\n {children}\n
\n )\n}\n\nMargin.propTypes = {\n top: PT.oneOfType([PT.string, PT.bool]),\n bottom: PT.oneOfType([PT.string, PT.bool]),\n left: PT.oneOfType([PT.string, PT.bool]),\n right: PT.oneOfType([PT.string, PT.bool]),\n all: PT.oneOfType([PT.string, PT.bool]),\n className: PT.string,\n children: PT.oneOfType([PT.element, PT.array]),\n fullwidth: PT.bool,\n style: PT.shape({}),\n}\n\nMargin.defaultProps = {\n top: false,\n bottom: false,\n left: false,\n right: false,\n all: false,\n fullwidth: false,\n className: '',\n children: [],\n style: {},\n}\n\nexport default Margin\n","import React from 'react'\nimport PT from 'prop-types'\nimport cx from 'classnames'\nimport { Link } from 'react-router-dom'\nimport { Colors } from '../../colors'\nimport { Sizes } from '../../sizes'\nimport { Weights } from '../../weights'\nimport Icon from '../icons/Icon'\nimport Flex from '../spacing/Flex'\nimport Margin from '../spacing/Margin'\nimport styles from './Button.module.scss'\n\nconst Button = ({\n label,\n toLink,\n outline,\n disabled,\n loading,\n iconName,\n color,\n size,\n fullwidth,\n type,\n onClick,\n weight,\n className,\n style,\n noBorder,\n hidden,\n}) => {\n const Element = toLink ? Link : 'button'\n\n const buttonClass = `btn${outline ? '-outline' : ''}-${color}`\n\n const classes = cx(\n styles.button, styles[buttonClass], className, {\n [styles.noBorder]: noBorder,\n [styles.fullwidth]: fullwidth,\n [styles.hidden]: hidden,\n ['btn-sm']: size === Sizes.SMALL,\n ['btn-lg']: size === Sizes.LARGE,\n [styles[`btn-${weight}`]]: !!weight,\n })\n\n const renderIcon = () => {\n const icon = loading ? 'loading' : iconName\n if (!icon) return null\n\n if (!label) {\n return \n \n
\n )\n\n if (noWrapper) {\n return renderCheckbox()\n }\n\n return (\n \n {children}\n
\n )\n}\n\nContainer.propTypes = {\n children: PT.node.isRequired,\n padding: PT.oneOf([\n Sizes.XLARGE,\n Sizes.LARGE,\n Sizes.NORMAL,\n ]),\n withBorder: PT.bool,\n withShadow: PT.bool,\n formContainer: PT.bool,\n donateContainer: PT.bool,\n bgColor: PT.oneOf([...Object.values(Colors)]),\n className: PT.string,\n style: PT.shape({}),\n}\n\nContainer.defaultProps = {\n padding: Sizes.LARGE,\n withBorder: false,\n withShadow: true,\n formContainer: false,\n donateContainer: false,\n bgColor: Colors.WHITE,\n className: '',\n}\n\nexport default Container\n","import React from 'react'\nimport PT from 'prop-types'\nimport cx from 'classnames'\nimport classes from './ContainerFluid.module.scss'\n\nconst ContainerFluid = ({ children, className, style }) => {\n const classNames = cx(className, classes.containerFluid)\n\n return (\n \n {children}\n
\n )\n}\n\nContainerFluid.propTypes = {\n children: PT.node.isRequired,\n className: PT.string,\n style: PT.shape({}),\n}\n\nContainerFluid.defaultProps = {\n className: '',\n style: {},\n}\n\nexport default ContainerFluid\n","import React from 'react'\nimport PT from 'prop-types'\nimport cx from 'classnames'\nimport InputWrapper from '../InputWrapper'\nimport { usePlacesWidget } from 'react-google-autocomplete'\nimport appConfig from '../../../../configs/appConfig'\nimport styles from './GoogleAutocompleteInput.module.scss'\n\nconst GoogleAutocompleteInput = ({\n id,\n error,\n required,\n placeholder,\n disabled,\n label,\n name,\n onChange,\n onBlur,\n // bounds,\n noWrapper,\n style,\n}) => {\n const getLanguage = () => {\n const lang = localStorage.getItem('lang') || 'ua'\n if (lang === 'ua') {\n return 'uk'\n }\n\n return 'en'\n }\n\n const { ref } = usePlacesWidget({\n apiKey: appConfig.GOOGLE_PLACES_API_KEY,\n onPlaceSelected: ({ formatted_address }) => {\n onChange(formatted_address)\n },\n options: {\n types: ['address'],\n componentRestrictions: { country: 'ua' },\n // strictBounds: false,\n // bounds,\n },\n language: getLanguage(),\n })\n\n const renderInput = () => {\n return (\n \n \n {value ? value : {placeholder}}\n {renderIcon()}\n \n
\n ))\n\n const renderDatePicker = () => (\n - \n {renderItems()}\n
\n
\n )\n}\n\nLoadingSpinner.propTypes = {\n className: PT.string,\n color: PT.oneOf([\n Colors.SUCCESS,\n Colors.WARNING,\n Colors.DANGER,\n Colors.DARK,\n ]),\n size: PT.oneOf([Sizes.XSMALL, Sizes.SMALL, Sizes.NORMAL, Sizes.LARGE]),\n marginTop: PT.bool,\n style: PT.shape({}),\n}\n\nLoadingSpinner.defaultProps = {\n className: '',\n color: Colors.DARK,\n size: Sizes.LARGE,\n marginTop: false,\n style: {},\n}\n\nexport default LoadingSpinner\n","import React from 'react'\nimport cx from 'classnames'\nimport PT from 'prop-types'\nimport { createPortal } from 'react-dom'\nimport {\n Button,\n Container,\n Sizes,\n Colors,\n} from '../../index'\nimport styles from './Modal.module.scss'\n\nconst Modal = ({\n isOpen,\n onClose,\n children,\n style,\n className,\n overlayClick,\n width,\n showCloseButton,\n}) => {\n const handleOverlayClick = (e) => {\n e.preventDefault()\n if (!overlayClick) return null\n\n if (e.target === e.currentTarget) {\n onClose()\n }\n }\n\n const renderCloseButton = () => {\n if (!showCloseButton) return null\n\n return (\n \n {children}\n
\n )\n}\n\nPadding.propTypes = {\n top: PT.oneOfType([PT.string, PT.bool]),\n bottom: PT.oneOfType([PT.string, PT.bool]),\n left: PT.oneOfType([PT.string, PT.bool]),\n right: PT.oneOfType([PT.string, PT.bool]),\n all: PT.oneOfType([PT.string, PT.bool]),\n className: PT.string,\n children: PT.oneOfType([PT.element, PT.array]),\n style: PT.shape({}),\n}\n\nPadding.defaultProps = {\n top: false,\n bottom: false,\n left: false,\n right: false,\n all: false,\n className: '',\n children: [],\n style: {},\n}\n\nexport default Padding\n","import { createSearchParams, useLocation, useNavigate } from 'react-router-dom'\n\nexport const useQueryParams = () => {\n const navigate = useNavigate()\n const location = useLocation()\n const params = new URLSearchParams(location.search)\n const queryParams = Object.fromEntries(params)\n const setQueryParams = (newParams, removeQueryParam) => {\n const copyQueryParams = { ...queryParams }\n if (removeQueryParam) {\n delete copyQueryParams[removeQueryParam]\n }\n const searchParamStr = `?${createSearchParams({ ...copyQueryParams, ...newParams })}`\n if (location.search !== searchParamStr) {\n navigate({\n pathname: location.pathname,\n search: searchParamStr,\n })\n }\n }\n const removeQueryParam = (param) => {\n const currentParam = { ...queryParams }\n delete currentParam[param]\n navigate({\n pathname: location.pathname,\n search: `?${createSearchParams(currentParam)}`,\n })\n }\n return { queryParams, setQueryParams, removeQueryParam }\n}\n","import React, { useEffect, useState } from 'react'\nimport PT from 'prop-types'\nimport { useTranslation } from 'react-i18next'\nimport cx from 'classnames'\nimport { range } from 'lodash'\nimport { useQueryParams } from 'hooks/useQueryParams'\nimport { Icon, Colors, Text } from '../../index'\nimport classes from './Pagination.module.scss'\n\nconst Pagination = ({\n totalCount,\n totalPages,\n className,\n alignment,\n from,\n to,\n withResults,\n withPerPage,\n loading,\n}) => {\n const { t } = useTranslation()\n const { queryParams, setQueryParams } = useQueryParams()\n const currentPage = parseInt(queryParams.page) || 1\n const currentPerPage = parseInt(queryParams.perPage) || 10\n\n const handlePageChange = (pageNum) => {\n setQueryParams({ page: pageNum })\n }\n\n const handlePerPageChange = (pageNum) => {\n setQueryParams({ perPage: pageNum })\n }\n\n const containerClassnames = cx(\n classes.pagination, {\n [classes.paginationWithResults]: withResults,\n [classes.paginationAlignLeft]: !withResults && alignment === 'left',\n [classes.paginationAlignCenter]: !withResults && alignment === 'center',\n [classes.paginationAlignRight]: !withResults && alignment === 'right',\n [className]: !!className,\n },\n )\n\n const arrowButtonClassnames = (arrowSide, disabled) => cx(\n classes.arrowButton, {\n [classes.arrowButtonLeft]: arrowSide === 'left',\n [classes.arrowButtonRight]: arrowSide === 'right',\n [classes.disabled]: loading || disabled,\n },\n )\n\n const pageCellClassnames = (currentPage) => cx(\n classes.pageCell, {\n [classes.currentPage]: currentPage,\n [classes.disabled]: loading,\n },\n )\n\n const [displayedPages, setDisplayedPages] = useState(range(1,8))\n\n useEffect(() => {\n if (totalPages === 0 || totalPages === 1) {\n setDisplayedPages(range(1,0))\n } else if (currentPage <= 4) {\n const lastPageNumber = (totalPages > 8) ? 8 : totalPages\n setDisplayedPages(range(1, lastPageNumber + 1))\n } else if (currentPage > 4 && currentPage < (totalPages - 3)) {\n setDisplayedPages(range(currentPage - 3, currentPage + 5))\n } else {\n const firstPageNumber = (totalPages >= currentPage && totalPages >= 8) ? totalPages - 7 : 1\n setDisplayedPages(range(firstPageNumber, totalPages + 1))\n }\n }, [currentPage, totalPages])\n\n const renderResultsInfo = () => {\n if (!withResults) return null\n\n return(\n \n {[10,25,50,100].map((perPageNumber) => (\n handlePerPageChange(perPageNumber)}\n >\n {perPageNumber}\n
\n ))}\n \n )\n }\n\n return(\n \n {renderResultsInfo()}\n {renderPerPage()}\n handlePageChange(pageNumber)}\n >\n {pageNumber}\n
\n ))}\n\n \n handlePageChange(currentPage - 1)}\n >\n
\n\n {displayedPages.map((pageNumber) => (\n \n
\n )\n}\n\n\nSpacer.propTypes = {\n vertical: PT.oneOfType([PT.string, PT.bool]),\n horizontal: PT.oneOfType([PT.string, PT.bool]),\n line: PT.bool,\n className: PT.string,\n style: PT.shape({}),\n}\n\nSpacer.defaultProps = {\n vertical: false,\n horizontal: false,\n line: false,\n className: '',\n style: {},\n}\n\nexport default Spacer\n","import React from 'react'\nimport PT from 'prop-types'\nimport cx from 'classnames'\nimport { InputWrapper } from 'ui-kit'\nimport styles from './SwitchInput.module.scss'\n\nconst SwitchInput = ({\n name,\n label,\n labelWrapper,\n checked,\n noWrapper,\n required,\n error,\n onChange,\n onBlur,\n disabled,\n className,\n}) => {\n const classes = cx(styles.slider, className, {\n [styles.disabled]: disabled,\n })\n\n const renderSwitch = () => (\n \n {line && }\n
\n \n \n
\n )\n\n if (noWrapper) {\n return renderSwitch()\n }\n\n return (\n \n
\n - \n {data.map(item =>
\n {children[0]}\n {children[1]}\n
\n )\n}\n\nTwoColContainer.propTypes = {\n children: PT.arrayOf(PT.element).isRequired,\n className: PT.string,\n style: PT.shape({}),\n}\n\nTwoColContainer.defaultProps = {\n className: '',\n style: {},\n}\n\nexport default TwoColContainer\n","import React from 'react'\nimport PT from 'prop-types'\n\nconst Video = ({ src, title }) => {\n return (\n - \n {navList.map(({ icon, label, link, isActive }) => (\n
- \n \n
\n \n \n\n \n ),\n )}\n
- \n {navList.map(({ icon, label, link, isActive }) => (\n
- \n \n
\n \n \n\n {label} \n \n ),\n )}\n
\n
\n )\n}\n\nSidebar.propTypes = {\n isOpened: PT.bool,\n onSidebarToggle: PT.func,\n}\n\nSidebar.defaultProps = {\n isOpened: false,\n}\n\nexport default Sidebar\n","import React from 'react'\nimport PT from 'prop-types'\nimport { useDispatch } from 'react-redux'\nimport { useNavigate } from 'react-router-dom'\nimport { useTranslation } from 'react-i18next'\nimport {\n Icon,\n Colors,\n Sizes,\n Flex,\n Button,\n Dropdown,\n Text,\n} from 'ui-kit'\nimport { useCurrentUser } from 'hooks/useCurrentUser'\nimport { applyUserSignOut } from 'store/actions/auth'\nimport styles from './Header.module.scss'\n\nconst Header = ({ onSidebarToggle }) => {\n const { t, i18n } = useTranslation()\n const { currentUser } = useCurrentUser()\n const dispatch = useDispatch()\n const navigate = useNavigate()\n\n const handleSignOut = () => {\n dispatch(applyUserSignOut())\n navigate('/admin/login')\n }\n\n const handleLanguageChange = async (lang) => {\n await i18n.changeLanguage(lang)\n await localStorage.setItem('lang', lang)\n }\n\n const renderLangDropdown = () => {\n const options = [\n {\n key: 'ua',\n title: 'UA',\n handler: () => handleLanguageChange('ua'),\n },\n {\n key: 'en',\n title: 'EN',\n handler: () => handleLanguageChange('en'),\n },\n ]\n\n return (\n \n
\n \n \n {renderLangDropdown()}\n \n
\n )\n}\n\nHeader.propTypes = {\n onSidebarToggle: PT.func.isRequired,\n}\n\nexport default Header\n","import React, { useState } from 'react'\nimport { Outlet } from 'react-router-dom'\nimport Sidebar from './components/Sidebar'\nimport Header from './components/Header'\n\nimport { Flex } from 'ui-kit'\n\nimport styles from './Layout.module.scss'\n\nconst Layout = () => {\n const [isSidebarOpened, setIsSidebarOpened] = useState(false)\n\n const handleSidebarToggle = () => setIsSidebarOpened(!isSidebarOpened)\n\n return (\n \n {`${currentUser.firstName} ${currentUser.lastName}`} \n {t('signOut')}}\n onClick={handleSignOut}\n outline\n />\n
\n \n {renderUserMobileDropdown()}\n
\n \n \n \n \n
\n )\n}\n\nexport default Layout\n","import React from 'react'\nimport PT from 'prop-types'\nimport { Link } from 'react-router-dom'\nimport cx from 'classnames'\nimport { Text, Colors } from 'ui-kit'\nimport styles from './LinkButton.module.scss'\n\nconst LinkButton = ({ label, width, className, onClick, color, to, external }) => {\n const classes = cx(styles.linkButton, className, {\n [styles.primary]: color === Colors.PRIMARY,\n [styles.secondary]: color === Colors.SECONDARY,\n })\n\n if (external) {\n return (\n \n
\n - \n {navList(t).map(({ label, href }) => (\n
- \n \n
{label} \n \n \n ))}\n
\n
\n )\n}\n\nMobileSidebar.propTypes = {\n isOpened: PT.bool,\n onNavItemClick: PT.func.isRequired,\n}\n\nMobileSidebar.defaultProps = {\n isOpened: false,\n}\n\nexport default MobileSidebar\n","import React, { useState } from 'react'\nimport cx from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport LinkButton from 'pages/landing/components/LinkButton'\nimport { Flex, Icon } from 'ui-kit'\nimport Navigation from './Navigation'\nimport LangSwitcher from './LangSwitcher'\nimport MobileSidebar from './MobileSidebar'\nimport styles from './Header.module.scss'\n\nconst Header = () => {\n const [isMenuOpen, setIsMenuOpen] = useState(false)\n const { t } = useTranslation()\n\n const menuBtnClasses = cx(styles.hamburger, 'ms-1', {\n [styles.active]: isMenuOpen,\n })\n\n const handleMobileNavClick = () => {\n setIsMenuOpen(false)\n }\n\n return (\n <>\n \n \n \n \n \n \n \n \n
\n \n \n \n
\n {t('pageNotFound')}
\n )\n}\n\nexport default NotFound\n","import React, { useContext } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { LandingDataContext } from 'contexts'\nimport { useToaster } from 'hooks/useToaster'\nimport {\n Flex,\n Text,\n Section,\n Image,\n Colors,\n} from 'ui-kit'\nimport LinkButton from '../components/LinkButton'\nimport styles from './OurMission.module.scss'\n\nconst OurMission = () => {\n const { t } = useTranslation()\n const { requestFormEnabled } = useContext(LandingDataContext)\n const { showToaster, toasterTypes } = useToaster(15000)\n\n const handleRequestFormLinkClick = (e) => {\n if (requestFormEnabled === false) {\n e.preventDefault()\n showToaster({\n content: (\n <>\n{t('landing.sectionsTitle.ourMission')}
\n\n
\n {t('landing.sectionsTitle.aboutUs')}
\n{title}
\n{t('landing.sectionsTitle.ourProjects')}
\n\n \n {t('landing.sectionsText.ourProjects.linksText')}\n \n
\n \n
\n \n {title} \n
\n )\n}\n\nMetricCard.propTypes = {\n number: PT.number.isRequired,\n title: PT.string.isRequired,\n}\n\nexport default MetricCard\n","import React, { useContext, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { DateTime } from 'luxon'\nimport { LandingDataContext } from 'contexts'\nimport MetricCard from '../components/MetricCard'\nimport { Section, Flex } from 'ui-kit'\nimport { FOUNDING_DATE, CHARITY_TRIPS } from 'common/constants/landing'\nimport styles from './Metrics.module.scss'\n\nconst Metrics = () => {\n const { t } = useTranslation()\n const { closedRequests } = useContext(LandingDataContext)\n\n const calculateMonthsWork = () => {\n const start = DateTime.fromISO(FOUNDING_DATE)\n const diffMonths = DateTime.now().diff(start, 'months').toObject().months\n\n return Math.floor(diffMonths)\n }\n\n const calculatePeopleMetric = () => Math.floor(closedRequests * 3.645)\n\n const monthsWork = useMemo(calculateMonthsWork, [])\n const peopleMetric = useMemo(calculatePeopleMetric, [closedRequests])\n\n return (\n {number}
\n{t('landing.sectionsTitle.metrics')}
\n\n
\n {t('landing.sectionsTitle.headOfTeam')}
\n{t('landing.sectionsText.headOfTeam.name')}
\n{t('landing.sectionsTitle.ourTeam')}
\n\n {teamMembers(t).map(({ firstName, lastName, photo }) =>\n
\n {t('landing.sectionsTitle.massMedia')}
\n\n 
\n
\n )\n}\n\nPartnerLogo.propTypes = {\n src: PT.string.isRequired,\n alt: PT.string.isRequired,\n}\n\nexport default PartnerLogo\n","import React from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Section } from 'ui-kit'\nimport { ourPartners } from '../constants/ourPartners'\nimport PartnerLogo from '../components/PartnerLogo'\nimport styles from './OurPartners.module.scss'\n\nconst OurPartners = () => {\n const { t } = useTranslation()\n\n return (\n {t('landing.sectionsTitle.ourPartners')}
\n\n {ourPartners.map(({ alt, src }) => (\n
\n {t('landing.h1Text')}
\n \n )\n}\n\nexport default Home\n","export const validateRequiredField = (value, t) => {\n if ((!value && value !== 0) || value === '') {\n return t('validationError.required')\n } else return undefined\n}\n\nexport const validatePhoneNumberField = (value, t) => {\n if ((!value && value !== 0) || value === '') {\n return t('validationError.required')\n } else if (value.replace(/\\D/g, '').length !== 12) {\n return t('validationError.phoneNumber')\n } else return undefined\n}\n\nexport const validateEmail = (email, t) => {\n if (email) {\n const validateEmail = email.toLowerCase().match(\n // eslint-disable-next-line max-len\n /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/,\n )\n if (!validateEmail) {\n return t('validationError.email')\n }\n }\n return undefined\n}\n\nexport const validateEqualFields = (value1, value2, errorMessage = '') => {\n if (!value1 && !value2) return undefined\n\n if (value1 !== value2) {\n return errorMessage\n } else return undefined\n}\n\nexport const validateOneOfRequiredFields = (value1, value2, t) => {\n if (!value1 && !value2) {\n return t('validationError.requiredOne')\n } else return undefined\n}\n\nexport const validateMinimumFieldLength = (value, t, length) => {\n if ((!value && value !== 0) || value === '') {\n return t('validationError.required')\n } else if (value.length < length) {\n return `${t('validationError.smallLength.1')} ${length} ${t('validationError.smallLength.2')}`\n } else return undefined\n}\n","import React, { useContext, useEffect } from 'react'\nimport { Helmet } from 'react-helmet'\nimport { useFormik } from 'formik'\nimport axios from 'axios'\nimport { useTranslation } from 'react-i18next'\nimport { useMutation } from '@apollo/client'\nimport { pickBy, omit } from 'lodash'\nimport { useNavigate } from 'react-router-dom'\nimport { useQueryParams } from 'hooks/useQueryParams'\nimport { useToaster } from 'hooks/useToaster'\nimport { LandingDataContext } from 'contexts'\nimport { CreateRequestMutation } from 'queries/requests.gql'\nimport { validateRequiredField, validatePhoneNumberField, validateMinimumFieldLength } from 'common/utils/validators'\nimport {\n TextInput,\n Container,\n Flex,\n Checkbox,\n TextAreaInput,\n Datepicker,\n PhoneNumberInput,\n GoogleAutocompleteInput,\n Text,\n Button,\n Sizes,\n Colors,\n} from 'ui-kit'\n\n// import { KYIV_BOUNDS, WAR_ZONE_BOUNDS } from 'common/constants/googleAutocompletInputBounds'\n\nconst RequestForm = () => {\n const { t } = useTranslation()\n const { queryParams } = useQueryParams()\n const { requestFormEnabled } = useContext(LandingDataContext)\n const dateOfInvasion = new Date(2022, 1, 24)\n const navigate = useNavigate()\n const { showToaster, toasterTypes } = useToaster(7000)\n\n const token = queryParams.token\n\n useEffect(() => {\n window.scrollTo({ top: 0 })\n }, [])\n\n const redirectToMain = () => {\n showToaster({\n content: (\n <>\n{t('landing.requestForm.title')}
\n- \n
- {t('landing.requestForm.text.6')} \n
- {t('landing.requestForm.text.7')} \n
- {t('landing.requestForm.text.8')} \n
{title}
\n{t('landing.donatePage.titles.main')}
\n{t('landing.donatePage.titles.monthly')}
\n\n {monthlyDonates(t).map(({ image, link, title, buttonLabel }) => (\n
\n {t('landing.donatePage.titles.oneTime')}
\n{t('landing.donatePage.containersTitle.monobank')}
\n{t('landing.donatePage.containersTitle.jar')}
\n \n{t('landing.donatePage.containersTitle.paypal')}
\nPayPal
\n{t('landing.donatePage.containersTitle.swift')}
\nUAH
\nUSD
\nEUR
\n{label}
\n )\n }\n return (\n\n \n {backTo && (\n navigate(backTo)}\n size={Sizes.XLARGE}\n />\n )}\n {renderLabel()}\n \n
\n )\n}\n\nPageHeader.propTypes = {\n label: PT.oneOfType([PT.string, PT.element]).isRequired,\n actions: PT.arrayOf(PT.element),\n backTo: PT.oneOfType([PT.string, PT.number]),\n}\n\nPageHeader.defaultProps = {\n actions: [],\n backTo: -1,\n}\n\nexport default PageHeader\n","import React, { useState } from 'react'\nimport PT from 'prop-types'\nimport { debounce } from 'lodash'\nimport { useTranslation } from 'react-i18next'\nimport { TextInput } from 'ui-kit'\nimport { useQueryParams } from '../hooks/useQueryParams'\nimport { Flex, Icon, Sizes, Colors } from 'ui-kit'\n\nconst SearchInput = ({ extraParams }) => {\n const { t } = useTranslation()\n const { queryParams, setQueryParams } = useQueryParams()\n const search = queryParams.search\n const [searchQuery, setSearchQuery] = useState(search)\n\n const debouncedSearch = React.useRef(\n debounce((searchQuery, extraParams) => {\n setQueryParams({ ...extraParams, search: searchQuery, page: 1 })\n }, 1000),\n ).current\n\n const handleChange = (e) => {\n setSearchQuery(e.target.value)\n debouncedSearch(e.target.value, extraParams)\n }\n\n const handleClear = () => {\n setSearchQuery('')\n setQueryParams({ ...extraParams, search: '', page: 1 })\n }\n\n const renderCross = () => {\n if (!searchQuery) return null\n\n return (\n \n {actions.map(action => action)}\n
\n {t('createUser')}
\n{t('updateUser')}
\n{t('updateContact')}
\n{t('createContact')}
\nТовари на складі
\n\n {text} \n
\n )\n }\n\n const renderStoreItems = () => {\n if (!request.storeItemsSummary.length) return '-'\n\n const list = request.storeItemsSummary.map(item => (\n <>\n