@redneckz/wildless-cms-uni-blocks 0.5.3 → 0.5.5

package/bundle/bundle.umd.js

@@ -81,6 +81,9 @@
         get CDN() {
             return this._.CDN;
         }
+        get YANDEX_MAP_API_KEY() {
+            return this._.YANDEX_MAP_API_KEY;
+        }
     })();
 
     const AUTH_PREFIX = 'guest';
@@ -342,6 +345,8 @@
         IconMap["JCBIcon"] = "JCBIcon";
         IconMap["LogoIcon"] = "LogoIcon";
         IconMap["LoupeIcon"] = "LoupeIcon";
+        IconMap["MapMarkerClusterIcon"] = "MapMarkerClusterIcon";
+        IconMap["MapMarkerSingleIcon"] = "MapMarkerSingleIcon";
         IconMap["MasterCardIcon"] = "MasterCardIcon";
         IconMap["MinusIcon"] = "MinusIcon";
         IconMap["MirIcon"] = "MirIcon";
@@ -428,6 +433,8 @@
         IconTitleMap["JCBIcon"] = "JCB";
         IconTitleMap["LogoIcon"] = "Logo";
         IconTitleMap["LoupeIcon"] = "\u041B\u0443\u043F\u0430";
+        IconTitleMap["MapMarkerClusterIcon"] = "\u041C\u0430\u0440\u043A\u0435\u0440 \u043A\u0430\u0440\u0442\u044B";
+        IconTitleMap["MapMarkerSingleIcon"] = "\u041C\u0430\u0440\u043A\u0435\u0440 \u043A\u0430\u0440\u0442\u044B \u0420\u0421\u0425\u0411";
         IconTitleMap["MasterCardIcon"] = "MasterCard";
         IconTitleMap["MinusIcon"] = "\u041C\u0438\u043D\u0443\u0441";
         IconTitleMap["MirIcon"] = "\u041C\u0418\u0420";
@@ -650,7 +657,7 @@
         const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
         const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
         const listItemAlign = description ? 'items-start' : 'items-center';
-        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: renderBenefitIconBgStyle(version, benefitsVersion), children: jsx(Img, { className: "w-[24px] h-[24px]", image: { ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }, asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
+        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: renderBenefitIconBgStyle(version, benefitsVersion), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }, asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
     });
     function renderBenefitIconBgStyle(version, benefitsVersion) {
         let bgColorStyle = 'bg-primary-main text-black';
@@ -660,7 +667,7 @@
         else if (benefitsVersion === 'normal') {
             bgColorStyle = 'bg-secondary-light text-primary-main';
         }
-        return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border flex items-center justify-center ${bgColorStyle}`;
+        return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
     }
 
     const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
@@ -1217,7 +1224,7 @@
         const { context, className = '', title, description, bonusItems, ...rest } = props;
         return (jsx(BlockWrapper, { className: `font-sans bg-white p-[50px] pb-9 ${className}`, context: context, ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems
                             ? bonusItems.map((_, i) => {
-                                return (jsx("div", { className: "flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-[14px] mx-[7px] even:mr-0 odd:ml-0 last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "mr-4", children: [jsx("div", { className: "text-h4", children: _.title }), jsx("div", { className: "text-xl-light mt-[14px] max-w-[488px]", children: _.description })] }), _.bonusCount ? (jsxs("div", { className: "relative -bottom-3 h-auto flex items-end mt-14 shrink-0", children: [jsx("span", { className: "font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7", children: _.bonusCount }), jsx("span", { className: "text-[44px] bg-clip-text text-transparent bg-green-to-yellow", children: _.bonusName })] })) : null] }) }, String(i)));
+                                return (jsx("div", { className: "flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-[14px] mx-[7px] even:mr-0 odd:ml-0 last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "mr-4", children: [jsx("div", { className: "text-h4", children: _.title }), jsx("div", { className: "text-xl-light mt-[14px] max-w-[488px]", children: _.description })] }), _.bonusCount ? (jsxs("div", { className: "relative -bottom-3 h-auto flex items-end mt-14 shrink-0", children: [jsx("span", { className: "font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7", children: _.bonusCount }), jsx("span", { className: "text-h2 bg-clip-text text-transparent bg-green-to-yellow", children: _.bonusName })] })) : null] }) }, String(i)));
                             })
                             : null })] }) }));
     });
@@ -1341,14 +1348,22 @@
     };
 
     const consistentDataMap = new Map();
-    function useAsyncData$1(key, fetcher) {
+    function useAsyncData$1(key, fetcher, { fallback } = {}) {
         const args = useMemo(() => keyToArgs(key), [key]);
         const [data, setData] = useState();
         const [error, setError] = useState();
+        const updateData = (_) => {
+            setData(_);
+            setError(undefined);
+        };
+        const updateError = (_) => {
+            setData(undefined);
+            setError(_);
+        };
         const chainToConsistentResult = (_) => {
-            _.then(_data => consistentDataMap.get(args) || _data)
-                .then(setData)
-                .catch(setError);
+            _.then(rawData => consistentDataMap.get(args) || rawData)
+                .then(updateData)
+                .catch(updateError);
         };
         useEffect(() => {
             const isEmptyKey = args.every(_ => _ === null);
@@ -1361,15 +1376,17 @@
                     chainToConsistentResult(_);
                 }
                 else {
-                    setData(_);
+                    updateData(_);
                 }
             }
             catch (err) {
-                setError(err);
+                updateError(err);
             }
         }, [fetcher, ...args]);
+        const simpleKey = args[0];
+        const fallbackData = fallback && typeof simpleKey === 'string' && fallback[simpleKey];
         return {
-            data,
+            data: !data && !error && fallbackData ? fallbackData : data,
             error,
             mutate: () => Promise.resolve(undefined),
             isValidating: false
@@ -1391,7 +1408,7 @@
     }
 
     let impl = useAsyncData$1;
-    const useAsyncData = (key, fetcher) => impl(key, fetcher);
+    const useAsyncData = (...args) => impl(...args);
 
     async function fetchJSON(url, options) {
         try {
@@ -1681,7 +1698,7 @@
             : `text-m-light text-secondary-text`;
         const iconClassName = isActiveBtn ? '' : `text-primary-main`;
         return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: `box-border relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
-      ${btnClassName}`, children: [jsx(Img, { className: `h-[24px] w-[24px] min-w-[24px] min-h-[24px] mr-4 ${iconClassName}`, image: { ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "border-0", children: [jsx("div", { className: `${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `${btnDescClassName}`, children: tab.description })] })] }, String(i)));
+      ${btnClassName}`, children: [jsx(Img, { className: `h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`, image: { ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "border-0", children: [jsx("div", { className: `${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `${btnDescClassName}`, children: tab.description })] })] }, String(i)));
     }
     function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex }) {
         return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${tabsShift * 388}px)` }, className: "flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-2", children: tabsNav.map((tab, i) => renderNavButton$2({
@@ -2110,7 +2127,7 @@
 
     const SearchBarInner = JSX(({ className, isMobile = false }) => {
         const { term, setTerm } = useSearch();
-        const LoupeIconClassName = isMobile ? 'w-[20px] h-[20px]' : 'w-[24px] h-[24px]';
+        const LoupeIconClassName = isMobile ? 'w-5 h-5' : 'w-6 h-6';
         const SearchBarLabelClassName = isMobile ? 'text-s' : 'text-l-light';
         const SearchBarInputClassName = isMobile ? ' placeholder-transparent' : 'h-full';
         const inputPlaceholder = isMobile ? 'some search' : undefined;
@@ -2449,13 +2466,13 @@
         const btnClassName = isActiveBtn
             ? 'shadow-dark-blue/42 border-primary-main'
             : `ease-in duration-300 border-main-stroke`;
-        return (jsxs("button", { type: "button", onClick: onClick, className: `p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`, children: [slide?.icon ? (jsx(Img, { className: "p-6 rounded-full bg-secondary-light mr-[30px]", image: slide.icon, width: "108", height: "108" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActiveBtn)] }, String(i)));
+        return (jsxs("button", { type: "button", onClick: onClick, className: `p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`, children: [slide?.icon ? (jsx(Img, { className: "p-5 rounded-full bg-secondary-light mr-[30px]", image: slide.icon, width: "108", height: "108" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActiveBtn)] }, String(i)));
     }
     function renderValueBlock(title, sum) {
         return (jsxs("div", { className: "flex flex-col text-left whitespace-pre", children: [jsxs("span", { className: "text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] }), jsx("span", { className: "text-secondary-text text-l mt-1", children: title })] }));
     }
     function renderDoneIcon(isActive) {
-        return isActive ? (jsx(Img, { className: `h-[24px] w-[24px] min-w-[24px] min-h-[24px] absolute right-4 top-4`, image: "DoneIcon", width: "24", height: "24" })) : null;
+        return isActive ? (jsx(Img, { className: `h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`, image: "DoneIcon", width: "24", height: "24" })) : null;
     }
 
     const InsuranceAmountBlock = JSX(({ className = '', context, title, insuranceTabs = [], button, ...rest }) => {
@@ -2506,15 +2523,15 @@
         const router = context.useRouter();
         const { handlerDecorator } = context;
         const activeButton = findActiveSubItem(router)(buttons);
-        return (jsxs(BlockWrapper, { context: context, className: `font-sans text-primary-text rounded-[40px] flex items-center justify-between ${className || ''}`, ...rest, children: [jsx("h2", { className: "text-xl font-medium m-0", children: title }), buttons?.length ? (jsx("div", { className: "flex rounded-md overflow-hidden bg-white", children: buttons
+        return (jsxs(BlockWrapper, { context: context, className: `font-sans text-primary-text flex items-center justify-between ${className || ''}`, ...rest, children: [jsx("h2", { className: "text-xl font-medium m-0", children: title }), buttons?.length ? (jsx("div", { className: "flex rounded-md overflow-hidden bg-white", children: buttons
                         .filter(({ text }) => text)
                         .map((button, i) => (jsx(NavigationItem, { className: "first:rounded-tl-md first:rounded-bl-md last:rounded-tr-md last:rounded-br-md", isActive: button === activeButton, ...useLink({ router, handlerDecorator }, button) }, String(i)))) })) : null] }));
     });
 
-    const OfficeServicesBlock = JSX(({ className = '', context, title, servicesList, anchor = '' }) => {
-        return (jsxs(BlockWrapper, { context: context, id: anchor, className: `font-sans bg-white p-12 flex flex-col ${className}`, children: [title ? jsx(Heading, { headingType: "h5", className: "mb-2.5", title: title }) : null, servicesList?.length ? servicesList.map(renderListItems) : null] }));
+    const OfficeServicesBlock = JSX(({ className = '', context, title, servicesList, anchor = '', ...rest }) => {
+        return (jsxs(BlockWrapper, { context: context, id: anchor, className: `font-sans bg-white p-8 flex flex-col ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h5", className: "mb-5", title: title }) : null, servicesList?.length ? servicesList.map(renderListItems) : null] }));
     });
-    const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-2.5 list-none", children: [itemList.icon ? (jsx(Img, { className: "mr-[14px] max-w-6 max-h-6", width: "24px", height: "24px", asSVG: true, image: itemList.icon })) : null, itemList.text ? jsx("span", { className: "text-l-light", children: itemList.text }) : null] }, `list_item_${String(i)}`));
+    const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-5 last:mb-0 list-none", children: [itemList.icon ? (jsx(Img, { className: "mr-3 max-w-6 max-h-6", width: "24px", height: "24px", asSVG: true, image: itemList.icon })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
 
     const foldableBlockClassNames = 'transition-all duration-300 max-h-0 overflow-hidden';
     const useActiveHandler = ({ initialState = false }) => {
@@ -2680,25 +2697,91 @@
             }) }));
     };
 
-    const BRANCHES_URL = '/api/v1/safeboxes';
-    async function fetchBranches(regionCode) {
-        try {
-            const response = await fetch(BRANCHES_URL + `?regionCode=${regionCode}`, {
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            });
-            const result = await response.json();
-            return Promise.resolve(result);
+    const cachedScriptStatuses = {};
+    function getScriptNode(src) {
+        const node = document.querySelector(`script[src="${src}"]`);
+        const status = node?.getAttribute('data-status');
+        return {
+            node,
+            status,
+        };
+    }
+    function getScriptStatus(type) {
+        return type === 'load' ? 'ready' : 'error';
+    }
+    function getInitialValueStatus(src, options) {
+        if (!src || options?.shouldPreventLoad) {
+            return 'idle';
         }
-        catch (err) {
-            console.error(err);
-            return Promise.reject();
+        if (typeof window === 'undefined') {
+            return 'loading';
         }
+        return cachedScriptStatuses[src] ?? 'loading';
+    }
+    function useScript(src, options) {
+        const [status, setStatus] = useState(getInitialValueStatus(src, options));
+        // eslint-disable-next-line complexity
+        useEffect(() => {
+            if (!src || options?.shouldPreventLoad) {
+                return undefined;
+            }
+            const cachedScriptStatus = cachedScriptStatuses[src];
+            if (cachedScriptStatus === 'ready' || cachedScriptStatus === 'error') {
+                setStatus(cachedScriptStatus);
+                return undefined;
+            }
+            const script = getScriptNode(src);
+            let scriptNode = script.node;
+            if (!scriptNode) {
+                scriptNode = document.createElement('script');
+                scriptNode.src = src;
+                scriptNode.async = true;
+                scriptNode.setAttribute('data-status', 'loading');
+                document.body.appendChild(scriptNode);
+                const setAttributeFromEvent = (event) => {
+                    const scriptStatus = getScriptStatus(event.type);
+                    scriptNode?.setAttribute('data-status', scriptStatus);
+                };
+                scriptNode.addEventListener('load', setAttributeFromEvent);
+                scriptNode.addEventListener('error', setAttributeFromEvent);
+            }
+            else {
+                setStatus(script.status ?? cachedScriptStatus ?? 'loading');
+            }
+            const setStateFromEvent = (event) => {
+                const newStatus = getScriptStatus(event.type);
+                setStatus(newStatus);
+                cachedScriptStatuses[src] = newStatus;
+            };
+            scriptNode.addEventListener('load', setStateFromEvent);
+            scriptNode.addEventListener('error', setStateFromEvent);
+            return () => {
+                if (scriptNode) {
+                    scriptNode.removeEventListener('load', setStateFromEvent);
+                    scriptNode.removeEventListener('error', setStateFromEvent);
+                }
+                if (scriptNode && options?.removeOnUnmount) {
+                    scriptNode.remove();
+                }
+            };
+        }, [src, options?.shouldPreventLoad, options?.removeOnUnmount]);
+        return status;
     }
 
-    const WrapperSelect = JSX(({ data, fieldLabel, fieldValue, selected, placeholder = 'Выберите значение', setSelected, label, }) => {
-        return (jsxs("div", { children: [jsx("span", { className: "block text-m-light mb-2", children: label }), jsxs(Select, { className: `h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer ${!selected ? 'text-secondary-text' : ''}`, value: selected, onChange: (_) => setSelected(_), children: [jsx(SelectOption, { value: "", children: placeholder }), data.map((_, i) => (jsx(SelectOption, { value: _?.[fieldValue || fieldLabel], children: _?.[fieldLabel] }, String(i))))] })] }));
+    const SAFEBOXES_URL = '/api/v1/safeboxes';
+    function useFetchSafeBoxes(regionCode) {
+        const { data } = useAsyncData(regionCode ? `${SAFEBOXES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes);
+        return data || [];
+    }
+    const fetchSafeBoxes = (url) => {
+        if (!url) {
+            return {};
+        }
+        return fetchJSON(url, { method: 'GET' });
+    };
+
+    const WrapperSelect = JSX(({ data, fieldLabel, fieldValue, selected, placeholder, setSelected, label }) => {
+        return (jsxs("div", { children: [jsx("span", { className: "block text-m-light mb-2", children: label }), jsxs(Select, { className: `h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer ${!selected ? 'text-secondary-text' : ''}`, value: selected, onChange: (_) => setSelected(_), children: [placeholder ? jsx(SelectOption, { value: "", children: placeholder }) : null, data.map((_, i) => (jsx(SelectOption, { value: _?.[fieldValue || fieldLabel], children: _?.[fieldLabel] }, String(i))))] })] }));
     });
 
     const RegionsAndBranches = JSX(({ regions = [], selectedRegion, onSelectedRegion: onSelectedRegion, branches = [], selectedBranch, onSelectedBranch, }) => {
@@ -2722,6 +2805,28 @@
         return (jsxs("div", { className: "flex justify-between mb-6", children: [jsx("div", { className: "mr-4 w-full", children: jsx(WrapperSelect, { data: caseVolumes, fieldLabel: "volume", selected: selectedCaseVolume, setSelected: onSelectedCaseVolume, label: "\u0420\u0430\u0437\u043C\u0435\u0440", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0430\u0437\u043C\u0435\u0440" }) }), jsx("div", { className: "w-full", children: jsx(WrapperSelect, { data: safeBoxCases, fieldLabel: "safeBoxCasesSize", selected: selectedBoxSize, setSelected: onSelectedBoxSize, label: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u044F\u0447\u0435\u0439\u043A\u0438, \u043C\u043C (\u0412\u0445\u0428\u0445\u0414)", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440 \u044F\u0447\u0435\u0439\u043A\u0438" }) })] }));
     });
 
+    const getCoordinates = (data) => {
+        if (Array.isArray(data)) {
+            return data.map((_) => _.gpsLatitude && _.gpsLongitude ? [_.gpsLatitude, _.gpsLongitude] : []);
+        }
+        if (data?.gpsLatitude && data?.gpsLongitude) {
+            return [[data.gpsLatitude, data.gpsLongitude]];
+        }
+        return [];
+    };
+    const getBranch = (branches, selectedBranch) => branches.find((_) => _.branchCode === selectedBranch);
+
+    const SafeDepositRentalFields = JSX(({ regions, selectedRegion, branches, selectedBranch, days, selectedCaseVolume, selectedBoxSize, safeBoxCases, caseVolumes, setPoints, onChange, toggleShowMap, }) => {
+        return (jsxs("div", { className: "flex-1 mr-9", children: [jsx(RegionsAndBranches, { regions: regions, selectedRegion: selectedRegion, onSelectedRegion: (value) => onChange({ selectedRegion: value }), branches: branches, selectedBranch: selectedBranch, onSelectedBranch: onSelectedBranch(onChange, setPoints, branches) }), jsx(RentalPeriod, { days: days, setDays: (value) => onChange({ days: value }) }), jsx(SafeBoxCases, { caseVolumes: caseVolumes, selectedCaseVolume: selectedCaseVolume, onSelectedCaseVolume: onSelectedCaseVolume(onChange), safeBoxCases: safeBoxCases, selectedBoxSize: selectedBoxSize, onSelectedBoxSize: (value) => onChange({ selectedBoxSize: value }) }), jsx("span", { className: "text-secondary-text text-l-light", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }), jsxs("div", { className: "flex justify-between items-center mt-5", children: [jsx(RenderRadioButtons, {}), jsx(Button, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary", onClick: toggleShowMap })] })] }));
+    });
+    const onSelectedBranch = (onChange, setPoints, branches) => (value) => {
+        onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
+        setPoints(getCoordinates(value ? getBranch(branches, value) : branches));
+    };
+    const onSelectedCaseVolume = (onChange) => (value) => {
+        onChange({ selectedCaseVolume: value, selectedBoxSize: '' });
+    };
+
     const SafeDepositRentalTotal = JSX(({ days, tariffs = [] }) => {
         const price = calculatePrice(days, tariffs);
         return (jsxs("div", { className: "flex flex-col justify-between", children: [jsxs("div", { className: "flex", children: [renderTotal('Аренда за', days, 'mr-11'), renderTotal('Цена', price + ' ₽')] }), jsxs("div", { className: "bg-primary-main px-10 pt-10 pb-4 text-center", children: [jsx(Img, { image: { icon: 'PackA4Icon' }, width: "290", height: "257", asSVG: true }), jsxs("span", { className: "text-s-light text-white opacity-80 mt-2 inline-block", children: ["\u041D\u0430 \u0440\u0438\u0441\u0443\u043D\u043A\u0438 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0430 \u043F\u0430\u0447\u043A\u0430", jsx("br", {}), " \u043B\u0438\u0441\u0442\u043E\u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0430 \u04104"] })] })] }));
@@ -2751,59 +2856,112 @@
     };
 
     const DEFAULT_DAYS = 26;
-    const SafeDepositRentalForm = JSX(({ regions }) => {
-        const [selectedRegion, setSelectedRegion] = useState('');
-        const [branches, setBranches] = useState([]);
-        const [selectedBranch, setSelectedBranch] = useState('');
-        const [selectedCaseVolume, setSelectedCaseVolume] = useState('');
-        const [selectedBoxSize, setSelectedBoxSize] = useState('');
-        const [days, setDays] = useState(DEFAULT_DAYS);
-        useEffect(() => {
-            setSelectedRegion(getInitialValueSelectedRegion(regions));
-        }, [regions]);
+    const SafeDepositRentalForm = JSX((props) => {
+        const [safeDepositState, setStateDepositState] = useState({
+            selectedRegion: '',
+            selectedBranch: '',
+            selectedCaseVolume: '',
+            selectedBoxSize: '',
+            days: DEFAULT_DAYS,
+            branches: [],
+        });
+        const resultBranches = useFetchSafeBoxes(safeDepositState.selectedRegion);
+        const handleChangeSafeDepositState = (state) => setStateDepositState((oldState) => ({ ...oldState, ...state }));
+        useEffect(() => handleChangeSafeDepositState({
+            selectedRegion: getInitialValueSelectedRegion(props.regions),
+        }), [props.regions]);
         useEffect(() => {
-            if (selectedRegion) {
-                fetchBranches(selectedRegion).then((result) => {
-                    setBranches(result);
-                });
-            }
-            else {
-                setBranches([]);
+            if (Array.isArray(resultBranches) && resultBranches.length) {
+                handleChangeSafeDepositState({ branches: resultBranches });
+                props.setPoints(getCoordinates(resultBranches));
             }
-            setSelectedBranch('');
-            setSelectedCaseVolume('');
-            setSelectedBoxSize('');
-        }, [regions, selectedRegion]);
-        const onSelectedBranch = (value) => {
-            setSelectedBranch(value);
-            setSelectedCaseVolume('');
-            setSelectedBoxSize('');
-        };
-        const onSelectedCaseVolume = (value) => {
-            setSelectedCaseVolume(value);
-            setSelectedBoxSize('');
-        };
-        const branch = getBranch(branches, selectedBranch);
+        }, [resultBranches]);
+        useEffect(() => {
+            handleChangeSafeDepositState({
+                selectedBranch: '',
+                selectedCaseVolume: '',
+                selectedBoxSize: '',
+            });
+        }, [safeDepositState.selectedRegion]);
+        const branch = getBranch(safeDepositState.branches, safeDepositState.selectedBranch);
         const caseVolumes = getCaseVolumes(branch?.safeBoxCaseVolumes);
-        const safeBoxCases = getCaseVolume(branch?.safeBoxCaseVolumes, selectedCaseVolume)?.safeBoxCases;
-        const tariffs = getTariffs(safeBoxCases, selectedBoxSize);
-        return (jsxs("div", { className: "flex justify-between align-top mb-6", children: [jsxs("div", { className: "flex-1 mr-9", children: [jsx(RegionsAndBranches, { regions: regions, selectedRegion: selectedRegion, onSelectedRegion: setSelectedRegion, branches: branches, selectedBranch: selectedBranch, onSelectedBranch: onSelectedBranch }), jsx(RentalPeriod, { days: days, setDays: setDays }), jsx(SafeBoxCases, { caseVolumes: caseVolumes, selectedCaseVolume: selectedCaseVolume, onSelectedCaseVolume: onSelectedCaseVolume, safeBoxCases: safeBoxCases, selectedBoxSize: selectedBoxSize, onSelectedBoxSize: setSelectedBoxSize }), jsx("span", { className: "text-secondary-text text-l-light", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }), jsxs("div", { className: "flex justify-between items-center mt-5", children: [jsx(RenderRadioButtons, {}), jsx(Button, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary" })] })] }), jsx(SafeDepositRentalTotal, { days: days, tariffs: tariffs })] }));
+        const safeBoxCases = getCaseVolume(branch?.safeBoxCaseVolumes, safeDepositState.selectedCaseVolume)?.safeBoxCases;
+        const tariffs = getTariffs(safeBoxCases, safeDepositState.selectedBoxSize);
+        return (jsxs("div", { className: "flex justify-between align-top mb-6", children: [jsx(SafeDepositRentalFields, { ...safeDepositState, ...props, caseVolumes: caseVolumes, safeBoxCases: safeBoxCases, onChange: handleChangeSafeDepositState }), jsx(SafeDepositRentalTotal, { days: safeDepositState.days, tariffs: tariffs })] }));
     });
-    const getInitialValueSelectedRegion = (regions) => regions?.find((_) => _.name === 'Москва')?.code || '';
-    const getBranch = (branches, selectedBranch) => branches.find((_) => _.branchCode === selectedBranch);
+    const getInitialValueSelectedRegion = (regions) => regions?.length && regions[0]?.code ? regions[0].code : '';
     const getCaseVolumes = (safeBoxCaseVolumes) => safeBoxCaseVolumes?.length ? safeBoxCaseVolumes?.filter((_) => _?.safeBoxCases?.length) : [];
     const getCaseVolume = (caseVolumes, selectedCaseVolume) => caseVolumes?.find((_) => _.volume === selectedCaseVolume);
     const getTariffs = (safeBoxCases, selectedBoxSize) => safeBoxCases?.find((_) => _.safeBoxCasesSize === selectedBoxSize)?.tariffs;
 
-    const REGIONS_URL = '/api/v1/admin/regions';
+    const REGIONS_URL = '/api/v1/regions';
     function useGetRegions() {
         const { data } = useAsyncData(REGIONS_URL, fetchJSONUnsafe);
         return data || [];
     }
 
-    const SafeDepositRental = JSX(({ title, context, className = '', ...rest }) => {
+    function renderClusterer(Map, points) {
+        Map.geoObjects.removeAll();
+        const pointsList = points;
+        const clusterIconContentLayout = ymaps.templateLayoutFactory.createClass('<div style="margin-top: -3px;">{{properties.geoObjects.length}}</div>');
+        const clusterer = new ymaps.Clusterer({
+            clusterIcons: [
+                {
+                    href: 'icons/MapMarkerClusterIcon.svg',
+                    size: [78, 84],
+                    offset: [-35, -50],
+                },
+            ],
+            clusterIconContentLayout,
+            clusterHideIconOnBalloonOpen: false,
+            geoObjectHideIconOnBalloonOpen: false,
+        });
+        const geoObjects = [];
+        for (let i = 0, len = pointsList.length; i < len; i++) {
+            geoObjects[i] = new ymaps.Placemark(pointsList[i], null, {
+                iconLayout: 'default#image',
+                iconImageHref: 'icons/MapMarkerSingleIcon.svg',
+                iconImageSize: [78, 84],
+                iconImageOffset: [-35, -50],
+            });
+        }
+        clusterer.add(geoObjects);
+        Map.geoObjects.add(clusterer);
+        Map.setBounds(ymaps.util.bounds.fromPoints(pointsList)).then(() => {
+            if (Map.getZoom() > 10) {
+                Map.setZoom(10);
+            }
+        });
+    }
+
+    let Map$1 = null;
+    const YandexMap = JSX(({ points }) => {
+        useEffect(() => {
+            ymaps.ready(() => {
+                Map$1 = new ymaps.Map('map', {
+                    center: points[0],
+                    zoom: 10,
+                });
+                renderClusterer(Map$1, points);
+            });
+        }, []);
+        if (Map$1 && points) {
+            renderClusterer(Map$1, points);
+        }
+        return (jsxs("div", { className: "pt-12 mt-1 bg-white", children: [jsx(Heading, { title: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", headingType: "h3", className: "mb-8 text-center" }), jsx("div", { id: "map", className: "h-[640px]" })] }));
+    });
+
+    const SafeDepositRental = JSX(({ title, footnote, context, className = '', ...rest }) => {
+        const [points, setPoints] = useState([]);
+        const [showMap, setShowMap] = useState(false);
         const regions = useGetRegions();
-        return (jsxs(BlockWrapper, { context: context, className: `bg-white px-8 py-12 ${className}`, ...rest, children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "mb-2.5 text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions }), jsx("p", { className: "text-s-light text-secondary-text", children: "\u0410\u0440\u0435\u043D\u0434\u0430 \u0421\u042F, \u0432 \u0441\u043B\u0443\u0447\u0430\u0435 \u043F\u0440\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u044F \u043F\u0440\u043E\u0446\u0435\u0434\u0443\u0440\u044B \u043A\u0443\u043F\u043B\u0438-\u043F\u0440\u043E\u0434\u0430\u0436\u0438, \u0441 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0435\u043C \u043D\u0430\u043B\u0438\u0447\u043D\u044B\u0445 \u0434\u0435\u043D\u0435\u0433 \u0438\u043B\u0438 \u043F\u0440\u043E\u0446\u0435\u0434\u0443\u0440\u044B \u0438\u043F\u043E\u0442\u0435\u0447\u043D\u043E\u0439 \u0441\u0434\u0435\u043B\u043A\u0438" })] }));
+        const statusScript = useScript(`https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY}&lang=ru_RU`, {
+            removeOnUnmount: true,
+        });
+        const toggleShowMap = () => {
+            setShowMap(!showMap);
+        };
+        return (jsxs(BlockWrapper, { context: context, className: className, ...rest, children: [jsxs("div", { className: "bg-white px-8 py-12", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "mb-2.5 text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, setPoints: setPoints, toggleShowMap: toggleShowMap }), footnote ? jsx("p", { className: "text-s-light text-secondary-text", children: footnote }) : null] }), statusScript === 'ready' && points.length && showMap ? (jsx(YandexMap, { points: points })) : null] }));
     });
 
     const checkIsIconRenderable = (icon) => Boolean(icon?.icon || icon?.src);
@@ -3081,17 +3239,17 @@
 
     const renderErrorContent = (error) => {
         if (error?.errorContentType === 'Image' && error?.image) {
-            return jsx(Img, { className: "mb-7", image: error.image });
+            return jsx(Img, { image: error.image });
         }
         if (error?.errorContentType === 'Code' && error.code) {
-            return jsx("div", { className: "text-title-extra gradient-color-text", children: error.code });
+            return jsx("div", { className: "font-mohave text-title-extra gradient-color-text", children: error.code });
         }
         return null;
     };
     const ErrorBlock = JSX(({ context, className = '', title, subtitle, error, button }) => {
         const { useRouter, handlerDecorator } = context;
         const router = useRouter();
-        return (jsxs("section", { className: `flex flex-col justify-center items-center ${className}`, role: "listitem", children: [jsx("div", { className: "flex justify-center mb-7", children: renderErrorContent(error) }), title ? jsx(Heading, { headingType: "h1", className: "text-left mb-4", title: title }) : null, subtitle ? jsx("div", { className: "text-xl-light text-left mb-7", children: subtitle }) : null, button?.text ? (jsx(Button, { className: "py-4 px-9", version: button?.version, ...useLink({ router, handlerDecorator }, button), children: button.text })) : null] }));
+        return (jsxs("section", { className: `flex flex-col justify-center items-center mt-12 ${className}`, role: "listitem", children: [jsx("div", { className: "flex justify-center py-20", children: renderErrorContent(error) }), title ? jsx(Heading, { headingType: "h1", className: "text-left mb-4", title: title }) : null, subtitle ? (jsx("div", { className: "font-sans text-xl-light text-left mb-7 max-w-[613px] text-center", children: subtitle })) : null, button?.text ? (jsx(Button, { className: "py-4 px-9", version: button?.version, ...useLink({ router, handlerDecorator }, button), children: button.text })) : null] }));
     });
 
     const Blocks = {
@@ -3154,7 +3312,7 @@
         };
     }
 
-    const LikeButton = JSX(({ className, onClick, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 w-[36px] bg-inherit cursor-pointer ${className || ''}`, onClick: onClick, "aria-label": ariaLabel, children: renderLikeIcon() })));
+    const LikeButton = JSX(({ className, onClick, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 w-9 bg-inherit cursor-pointer ${className || ''}`, onClick: onClick, "aria-label": ariaLabel, children: renderLikeIcon() })));
     const renderLikeIcon = () => {
         const params = {
             stroke: '#292D32',