@redneckz/wildless-cms-uni-blocks 0.14.333 → 0.14.335

package/lib/ui-kit/YandexMap/renderClusterer.js

@@ -1,10 +1,34 @@
-export function renderClusterer(yandexMaps, map, points) {
+const MapMarkerClusterIcon = '/icons/MapMarkerClusterIcon.svg';
+const MapMarkerClusterYellowIcon = '/icons/MapMarkerClusterYellowIcon.svg';
+export function renderClusterer({ yandexMaps, map, points, }) {
     map.geoObjects.removeAll();
     const clusterIconContentLayout = yandexMaps.templateLayoutFactory.createClass('<div style="margin-top: -3px;">{{properties.geoObjects.length}}</div>');
-    const clusterer = new yandexMaps.Clusterer({
+    const officeClusterer = defineClusterer('offices', yandexMaps, clusterIconContentLayout);
+    if (points.length && points.every((_) => 'type' in _)) {
+        const remoteWorkplaceClusterer = defineClusterer('workplaces', yandexMaps, clusterIconContentLayout);
+        const remoteWorkplaceGeoObjects = defineGeoObjects(points.filter((_) => _.type === 'workplaces'), 'workplaces', yandexMaps);
+        const officesGeoObjects = defineGeoObjects(points.filter((_) => _.type === 'offices'), 'offices', yandexMaps);
+        officeClusterer.add(officesGeoObjects);
+        remoteWorkplaceClusterer.add(remoteWorkplaceGeoObjects);
+        map.geoObjects.add(remoteWorkplaceClusterer);
+        map.geoObjects.add(officeClusterer);
+    }
+    else {
+        const geoObjects = defineGeoObjects(points, 'offices', yandexMaps);
+        officeClusterer.add(geoObjects);
+        map.geoObjects.add(officeClusterer);
+    }
+    map.setBounds(yandexMaps.util.bounds.fromPoints(points.map((_) => _.coords))).then(() => {
+        if (map.getZoom() > 10) {
+            map.setZoom(10);
+        }
+    });
+}
+const defineClusterer = (type, yandexMaps, clusterIconContentLayout) => {
+    return new yandexMaps.Clusterer({
         clusterIcons: [
             {
-                href: '/icons/MapMarkerClusterIcon.svg',
+                href: type === 'offices' ? MapMarkerClusterIcon : MapMarkerClusterYellowIcon,
                 size: [78, 84],
                 offset: [-35, -50],
             },
@@ -13,23 +37,18 @@ export function renderClusterer(yandexMaps, map, points) {
         clusterHideIconOnBalloonOpen: false,
         geoObjectHideIconOnBalloonOpen: false,
     });
-    const geoObjects = points.map(({ coords, content }) => new yandexMaps.Placemark(coords, {
+};
+const defineGeoObjects = (pointArr, type, yandexMaps) => {
+    return pointArr.map(({ coords, content }) => new yandexMaps.Placemark(coords, {
         balloonContentHeader: content?.header,
         balloonContentBody: content?.body,
         balloonContentFooter: content?.footer,
         hintContent: content?.hint,
     }, {
         iconLayout: 'default#image',
-        iconImageHref: '/icons/MapMarkerSingleIcon.svg',
+        iconImageHref: type === 'offices' ? MapMarkerClusterIcon : MapMarkerClusterYellowIcon,
         iconImageSize: [78, 84],
         iconImageOffset: [-35, -50],
     }));
-    clusterer.add(geoObjects);
-    map.geoObjects.add(clusterer);
-    map.setBounds(yandexMaps.util.bounds.fromPoints(points.map((_) => _.coords))).then(() => {
-        if (map.getZoom() > 10) {
-            map.setZoom(10);
-        }
-    });
-}
+};
 //# sourceMappingURL=renderClusterer.js.map

package/lib/ui-kit/YandexMap/renderClusterer.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderClusterer.js","sourceRoot":"","sources":["../../../src/ui-kit/YandexMap/renderClusterer.ts"],"names":[],"mappings":"AAMA,MAAM,UAAU,eAAe,CAAC,UAAwB,EAAE,GAAc,EAAE,MAAuB;IAC/F,GAAG,CAAC,UAAU,CAAC,SAAS,EAAE,CAAC;IAE3B,MAAM,wBAAwB,GAAG,UAAU,CAAC,qBAAqB,CAAC,WAAW,CAC3E,uEAAuE,CACxE,CAAC;IAEF,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,SAAS,CAAC;QACzC,YAAY,EAAE;YACZ;gBACE,IAAI,EAAE,iCAAiC;gBACvC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;gBACd,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;aACnB;SACF;QACD,wBAAwB;QACxB,4BAA4B,EAAE,KAAK;QACnC,8BAA8B,EAAE,KAAK;KACX,CAAC,CAAC;IAE9B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAC3B,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CACtB,IAAI,UAAU,CAAC,SAAS,CACtB,MAAM,EACN;QACE,oBAAoB,EAAE,OAAO,EAAE,MAAM;QACrC,kBAAkB,EAAE,OAAO,EAAE,IAAI;QACjC,oBAAoB,EAAE,OAAO,EAAE,MAAM;QACrC,WAAW,EAAE,OAAO,EAAE,IAAI;KAC3B,EACD;QACE,UAAU,EAAE,eAAe;QAC3B,aAAa,EAAE,gCAAgC;QAC/C,aAAa,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;QACvB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;KAC5B,CACF,CACJ,CAAC;IAEF,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAE1B,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,SAAgB,CAAC,CAAC;IAErC,GAAG,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;QACtF,IAAI,GAAG,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;YACtB,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;SACjB;IACH,CAAC,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"renderClusterer.js","sourceRoot":"","sources":["../../../src/ui-kit/YandexMap/renderClusterer.ts"],"names":[],"mappings":"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"}

package/mobile/bundle/bundle.umd.js

@@ -4130,13 +4130,37 @@
         childSchema: (content) => content?.filtrationSchema || {},
     });
 
-    function renderClusterer(yandexMaps, map, points) {
+    const MapMarkerClusterIcon = '/icons/MapMarkerClusterIcon.svg';
+    const MapMarkerClusterYellowIcon = '/icons/MapMarkerClusterYellowIcon.svg';
+    function renderClusterer({ yandexMaps, map, points, }) {
         map.geoObjects.removeAll();
         const clusterIconContentLayout = yandexMaps.templateLayoutFactory.createClass('<div style="margin-top: -3px;">{{properties.geoObjects.length}}</div>');
-        const clusterer = new yandexMaps.Clusterer({
+        const officeClusterer = defineClusterer('offices', yandexMaps, clusterIconContentLayout);
+        if (points.length && points.every((_) => 'type' in _)) {
+            const remoteWorkplaceClusterer = defineClusterer('workplaces', yandexMaps, clusterIconContentLayout);
+            const remoteWorkplaceGeoObjects = defineGeoObjects(points.filter((_) => _.type === 'workplaces'), 'workplaces', yandexMaps);
+            const officesGeoObjects = defineGeoObjects(points.filter((_) => _.type === 'offices'), 'offices', yandexMaps);
+            officeClusterer.add(officesGeoObjects);
+            remoteWorkplaceClusterer.add(remoteWorkplaceGeoObjects);
+            map.geoObjects.add(remoteWorkplaceClusterer);
+            map.geoObjects.add(officeClusterer);
+        }
+        else {
+            const geoObjects = defineGeoObjects(points, 'offices', yandexMaps);
+            officeClusterer.add(geoObjects);
+            map.geoObjects.add(officeClusterer);
+        }
+        map.setBounds(yandexMaps.util.bounds.fromPoints(points.map((_) => _.coords))).then(() => {
+            if (map.getZoom() > 10) {
+                map.setZoom(10);
+            }
+        });
+    }
+    const defineClusterer = (type, yandexMaps, clusterIconContentLayout) => {
+        return new yandexMaps.Clusterer({
             clusterIcons: [
                 {
-                    href: '/icons/MapMarkerClusterIcon.svg',
+                    href: type === 'offices' ? MapMarkerClusterIcon : MapMarkerClusterYellowIcon,
                     size: [78, 84],
                     offset: [-35, -50],
                 },
@@ -4145,25 +4169,20 @@
             clusterHideIconOnBalloonOpen: false,
             geoObjectHideIconOnBalloonOpen: false,
         });
-        const geoObjects = points.map(({ coords, content }) => new yandexMaps.Placemark(coords, {
+    };
+    const defineGeoObjects = (pointArr, type, yandexMaps) => {
+        return pointArr.map(({ coords, content }) => new yandexMaps.Placemark(coords, {
             balloonContentHeader: content?.header,
             balloonContentBody: content?.body,
             balloonContentFooter: content?.footer,
             hintContent: content?.hint,
         }, {
             iconLayout: 'default#image',
-            iconImageHref: '/icons/MapMarkerSingleIcon.svg',
+            iconImageHref: type === 'offices' ? MapMarkerClusterIcon : MapMarkerClusterYellowIcon,
             iconImageSize: [78, 84],
             iconImageOffset: [-35, -50],
         }));
-        clusterer.add(geoObjects);
-        map.geoObjects.add(clusterer);
-        map.setBounds(yandexMaps.util.bounds.fromPoints(points.map((_) => _.coords))).then(() => {
-            if (map.getZoom() > 10) {
-                map.setZoom(10);
-            }
-        });
-    }
+    };
 
     const styles$1 = {
         focus: 'focus:border-primary-text focus:border',
@@ -4295,11 +4314,11 @@
                         controls: [],
                         suppressMapOpenBlock: true,
                     });
-                    renderClusterer(yandexMaps, map.current, points);
+                    renderClusterer({ yandexMaps, map: map.current, points });
                 });
             }
             else if (yandexMaps) {
-                renderClusterer(yandexMaps, map.current, points);
+                renderClusterer({ yandexMaps, map: map.current, points });
                 if (!points?.length) {
                     map.current.setCenter(DEFAULT_CENTER_COORDS);
                 }
@@ -4318,6 +4337,8 @@
     const mapByIndex = (points, index) => points.map((_) => _.coords[index]);
     const getArraySumAndAverage = (arr) => arr.length && arr.reduce((a, b) => a + b) / arr.length;
 
+    const renderDescriptionBlock$1 = ({ __html, list }) => __html || list?.length ? (jsxs("div", { className: "mb-2xl border-b sm:border border-main-divider sm:rounded-md", children: [__html ? (jsx("div", { className: "mb-2xl", children: jsx(RichText, { __html: __html }) })) : null, list?.length ? (jsx("div", { className: "flex flex-col sm:flex-row gap-2xl sm:flex-wrap pb-2xl sm:pb-xl", children: list.map((item, i) => (jsxs("div", { className: "flex gap-xs items-center", children: [item?.image ? jsx(Img, { image: item.image }) : null, item?.text ? (jsx(Text, { size: "text-m", font: "font-light", children: item.text })) : null] }, String(i)))) })) : null] })) : null;
+
     const FILTRATION_LABELS = {
         safeBoxCaseVolumes: 'Аренда индивидуальных сейфовых ячеек',
         workingSaturday: 'Открыты по субботам',
@@ -4332,14 +4353,14 @@
         bullionOperations: 'Операции со слитками',
         preciousMetalsOperations: 'Операции с драгоценными металлами',
         transferringDataToBiometricSystem: 'Передача фото и голоса в Единую биометрическую систему',
+        remoteWorkplace: 'Удаленное рабочее место',
     };
     const COMMON_FILTERS_STYLES = 'flex flex-col sm:flex-row sm:flex-wrap gap-3xl pb-2xl';
     const renderFiltrationForm = (filters, { field, reset }, onlyOffice) => {
-        const visibleFiltersNum = onlyOffice ? 3 : 4;
+        const visibleFiltersNum = 4;
         const filtersCheckbox = (filters || []).map((key) => (jsx(Checkbox, { text: FILTRATION_LABELS[key], ...field(key) }, key)));
-        const [visibleFilters, hiddenFilters] = visibleFiltersNum > 0
-            ? [filtersCheckbox.slice(0, visibleFiltersNum), filtersCheckbox.slice(visibleFiltersNum)]
-            : [filtersCheckbox, []];
+        const [visibleFilters, hiddenFilters] = [filtersCheckbox.slice(0, visibleFiltersNum), filtersCheckbox.slice(visibleFiltersNum)]
+            ;
         return (jsx("div", { children: filters?.length ? (jsx("div", { children: jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [jsx("div", { className: COMMON_FILTERS_STYLES, children: visibleFilters }), jsx(FoldableSection, { className: COMMON_FILTERS_STYLES, isUnfolded: isUnfolded, children: hiddenFilters })] })), renderFoldButton: renderFoldButton$1(reset, onlyOffice) }) })) : null }));
     };
     const renderFoldButton$1 = (reset, onlyOffice) => ({ isUnfolded, onToggle }) => {
@@ -4351,37 +4372,47 @@
     const defaultEmptyFunction = () => void 0;
     const defaultFilterItems = () => [];
     const filtersVisibleStyles = (activeButton) => activeButton === 'all' ? 'block' : 'hidden';
-    const OfficesAtmsMapLayout = JSX(({ className, data = [], renderCard = defaultEmptyFunction, filterItems = defaultFilterItems, getBalloon = defaultEmptyFunction, initFilterState = {}, descriptionData, title, }) => {
+    const OfficesAtmsMapLayout = JSX(({ className, data = [], remoteWorkplaces = [], renderCard = defaultEmptyFunction, renderRemoteWorkplaceCard = defaultEmptyFunction, filterItems = defaultFilterItems, getBalloon = defaultEmptyFunction, getBalloonRemoteWorkplaces = defaultEmptyFunction, initFilterState = {}, descriptionData, title, }) => {
         const onlyOffice = title?.includes('Офис');
         const [filtrationState, { field, reset }] = useForm(initFilterState);
-        const [filteredItems, points, lengthItems] = useMemo(() => {
+        const [filteredItems, points, filteredRemoteWorkplaces, lengthItems] = useMemo(() => {
             const _filteredItems = filterItems(data, filtrationState);
-            const _points = _filteredItems
-                .map((_) => ({
-                coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
-                content: getBalloon(_),
-            }))
-                .filter((_) => _.coords && _.coords.length === 2);
-            return [_filteredItems, _points, _filteredItems.length];
-        }, [data, filtrationState]);
+            const _filteredRemoteWorkplaces = filterItems(remoteWorkplaces, filtrationState);
+            const _points = [
+                ..._filteredItems.map((_) => ({
+                    type: 'offices',
+                    coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
+                    content: getBalloon(_),
+                })),
+                ..._filteredRemoteWorkplaces.map((_) => ({
+                    type: 'workplaces',
+                    coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
+                    content: getBalloonRemoteWorkplaces({
+                        address: _.address,
+                        workScheduleDescription: _.workScheduleDescription,
+                    }),
+                })),
+            ].filter((_) => _.coords && _.coords.length === 2);
+            const itemsLength = _filteredItems.length + _filteredRemoteWorkplaces?.length;
+            return [_filteredItems, _points, _filteredRemoteWorkplaces, itemsLength];
+        }, [data, remoteWorkplaces, filtrationState]);
         const [activeButton, setActiveButton] = useState('all');
-        return (jsxs("div", { className: style('space-y-1', className), children: [jsxs("div", { className: "bg-white", children: [jsxs("div", { className: "p-6xl pb-0", children: [jsx("div", { className: "flex flex-col sm:flex-row gap-xs mb-2xl", children: jsxs(Heading, { headingType: "h2", children: [title, lengthItems ? (jsx(Text, { size: "text-h2", color: "text-secondary-text", children: ` (${lengthItems})` })) : null] }) }), descriptionData ? renderDescriptionBlock$1(descriptionData) : null, onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton), jsx("div", { className: style('pb-2xl', filtersVisibleStyles(activeButton)), children: renderFiltrationForm(Object.keys(initFilterState), { field, reset }, onlyOffice) })] }), jsx("div", { className: "h-[600px]", children: jsx(ClientOnly, { children: jsx(YandexMap, { points: points, className: "h-full" }) }) })] }), filteredItems.map(renderCard)] }));
+        return (jsxs("div", { className: style('space-y-1', className), children: [jsxs("div", { className: "bg-white", children: [jsxs("div", { className: "p-6xl pb-0", children: [jsx("div", { className: "flex flex-col sm:flex-row gap-xs mb-2xl", children: jsxs(Heading, { headingType: "h2", children: [title, lengthItems ? (jsx(Text, { size: "text-h2", color: "text-secondary-text", children: ` (${lengthItems})` })) : null] }) }), descriptionData ? renderDescriptionBlock$1(descriptionData) : null, onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton), jsx("div", { className: style('pb-2xl', filtersVisibleStyles(activeButton)), children: renderFiltrationForm(Object.keys(initFilterState), { field, reset }, onlyOffice) })] }), jsx("div", { className: "h-[600px]", children: jsx(ClientOnly, { children: jsx(YandexMap, { points: points, className: "h-full" }) }) })] }), filteredItems.map(renderCard), filteredRemoteWorkplaces.map(renderRemoteWorkplaceCard)] }));
     });
-    const renderButtonsGroup = (data, activeButton, setActiveButton) => {
+    const renderButtonsGroup = (data, activeButton, onButtonClick) => {
         const allButtonVersion = activeButton === 'all' ? 'primary' : 'secondary';
         const businessButtonVersion = activeButton === 'business' ? 'primary' : 'secondary';
-        const handleOnClick = (e, key, branches) => {
+        const handleClick = (e, key, branches) => {
             if (e.currentTarget === e.target && key === 'business') {
                 branches.filter((branch) => branch.workSchedule &&
                     branch.workSchedule.businessScheduleVisibleTag &&
                     !branch.workSchedule.businessScheduleDescription);
             }
-            setActiveButton(key);
+            onButtonClick(key);
             return branches;
         };
-        return (jsxs("div", { className: "flex gap-lg flex-col sm:flex-row pb-lg", children: [jsx(Button, { "data-id": "all", onClick: (e) => handleOnClick(e, 'all', data), version: allButtonVersion, children: "\u0414\u043B\u044F \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446" }), jsx(Button, { "data-id": "business", onClick: (e) => handleOnClick(e, 'business', data), version: businessButtonVersion, children: "\u0414\u043B\u044F \u044E\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446" })] }));
+        return (jsxs("div", { className: "flex gap-lg flex-col sm:flex-row pb-lg", children: [jsx(Button, { "data-id": "all", onClick: (e) => handleClick(e, 'all', data), version: allButtonVersion, children: "\u0414\u043B\u044F \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446" }), jsx(Button, { "data-id": "business", onClick: (e) => handleClick(e, 'business', data), version: businessButtonVersion, children: "\u0414\u043B\u044F \u044E\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446" })] }));
     };
-    const renderDescriptionBlock$1 = ({ __html, list }) => __html || list?.length ? (jsxs("div", { className: "mb-2xl border-b sm:border border-main-divider sm:rounded-md", children: [__html ? (jsx("div", { className: "mb-2xl", children: jsx(RichText, { __html: __html }) })) : null, list?.length ? (jsx("div", { className: "flex flex-col sm:flex-row gap-2xl sm:flex-wrap pb-2xl sm:pb-xl", children: list.map((item, i) => (jsxs("div", { className: "flex gap-xs items-center", children: [item?.image ? jsx(Img, { image: item.image }) : null, item?.text ? (jsx(Text, { size: "text-m", font: "font-light", children: item.text })) : null] }, String(i)))) })) : null] })) : null;
 
     const colorStyle = {
         yellow: { border: 'border-yellow-light', text: 'text-yellow' },
@@ -4605,7 +4636,7 @@
             return null;
         }
         const workScheduleWeek = getWorkScheduleWeek(workSchedule);
-        return (jsxs("div", { className: "bg-white col-span-12 p-3xl sm:border-green sm:border", children: [jsxs("div", { className: "sm:flex sm:justify-between", children: [jsxs("div", { children: [jsx(Text, { size: "text-h4", children: name }), address ? (jsxs("div", { className: "flex pb-xl pt-xs gap-2xs", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24" }), jsx(Text, { size: "text-l", children: address })] })) : null] }), renderCurrentDaySchedule(workScheduleWeek)] }), jsx("div", { className: "hidden sm:block", children: renderCardContent({
+        return (jsxs("div", { className: "bg-white col-span-12 p-3xl sm:border-green sm:border", children: [jsxs("div", { className: "sm:flex sm:justify-between", children: [jsxs("div", { children: [jsx(Text, { size: "text-h4", children: name }), address ? (jsxs("div", { className: "flex pb-xl pt-xs gap-2xs", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24" }), jsx(Text, { size: "text-l", children: address })] })) : null] }), renderCurrentDaySchedule(workScheduleWeek)] }), jsx("div", { className: "hidden sm:block", children: renderCardContent$1({
                         phone,
                         fax,
                         phoneBusiness,
@@ -4615,7 +4646,7 @@
                         workSchedule,
                         exchangeRate,
                     }) }), jsx(Foldable, { className: "block sm:hidden", renderFoldableSection: ({ isUnfolded }) => {
-                        return (jsx(FoldableSection, { isUnfolded: isUnfolded, children: renderCardContent({
+                        return (jsx(FoldableSection, { isUnfolded: isUnfolded, children: renderCardContent$1({
                                 phone,
                                 fax,
                                 phoneBusiness,
@@ -4629,7 +4660,7 @@
                     //** TODO: remove styles with refactoring  DefaultFoldButton*/
                     renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle }) })] }, String(index)));
     };
-    const renderCardContent = ({ phone, fax, phoneBusiness, phoneNatural, phoneCallCentre, phoneCurrencyControl, workSchedule, exchangeRate, }) => {
+    const renderCardContent$1 = ({ phone, fax, phoneBusiness, phoneNatural, phoneCallCentre, phoneCurrencyControl, workSchedule, exchangeRate, }) => {
         const workScheduleWeek = getWorkScheduleWeek(workSchedule);
         const labelSchedule = workSchedule?.businessScheduleVisibleTag
             ? 'Для физических лиц'
@@ -4645,13 +4676,38 @@
         return { header, body };
     };
 
+    const renderRemoteWorkplaceCard = ({ address, workScheduleDescription }, index) => {
+        if (!workScheduleDescription) {
+            return null;
+        }
+        return (jsxs("div", { className: "bg-white col-span-12 p-3xl sm:border-green sm:border", children: [jsx("div", { className: "sm:flex sm:justify-between", children: jsxs("div", { children: [jsx(Text, { size: "text-h4", children: "\u0423\u0434\u0430\u043B\u0435\u043D\u043D\u043E\u0435 \u0440\u0430\u0431\u043E\u0447\u0435\u0435 \u043C\u0435\u0441\u0442\u043E" }), address ? (jsxs("div", { className: "flex pb-xl pt-xs gap-2xs", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24" }), jsx(Text, { size: "text-l", children: address })] })) : null] }) }), jsx("div", { className: "hidden sm:block", children: renderCardContent({
+                        workScheduleDescription,
+                    }) }), jsx(Foldable, { className: "block sm:hidden", renderFoldableSection: ({ isUnfolded }) => {
+                        return (jsx(FoldableSection, { isUnfolded: isUnfolded, children: renderCardContent({
+                                workScheduleDescription,
+                            }) }));
+                    }, 
+                    //** TODO: remove styles with refactoring  DefaultFoldButton*/
+                    renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle }) })] }, String(index)));
+    };
+    const renderCardContent = ({ workScheduleDescription }) => {
+        return (jsxs("div", { children: [jsxs(CardRow, { className: "flex", children: [jsx(CardCell, { label: "\u041E\u043F\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043B\u044F \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446", children: jsx(Text, { children: "\u041E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u0435 \u0438 \u043E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u043D\u0438\u0435 \u043A\u0440\u0435\u0434\u0438\u0442\u043E\u0432, \u0441\u0447\u0435\u0442\u043E\u0432, \u0432\u043A\u043B\u0430\u0434\u043E\u0432" }) }), jsx(CardCell, { label: "\u041E\u043F\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043B\u044F \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446", children: jsx(Text, { children: "\u041E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u0435 \u0438 \u043E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u043D\u0438\u0435 \u0431\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0445 \u043A\u0430\u0440\u0442" }) }), jsx(CardCell, { label: "\u041E\u043F\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043B\u044F \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446", children: jsx(Text, { children: "\u0418\u043D\u0432\u0435\u0441\u0442\u0438\u0446\u0438\u043E\u043D\u043D\u043E\u0435 \u0438 \u043D\u0430\u043A\u043E\u043F\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0435 \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u043D\u0438\u0435" }) }), jsx(CardCell, { label: "\u041E\u043F\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043B\u044F \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446", children: jsx(Text, { children: "\u0411\u0435\u0437\u043D\u0430\u043B\u0438\u0447\u043D\u044B\u0435 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 \u0440\u0443\u0431\u043B\u044F\u0445, \u043F\u0435\u0440\u0435\u0432\u043E\u0434\u044B \u0431\u0435\u0437 \u043E\u0442\u043A\u0440\u044B\u0442\u0438\u044F \u0441\u0447\u0451\u0442\u0430" }) })] }), jsx(CardCell, { label: "\u0420\u0435\u0436\u0438\u043C \u0440\u0430\u0431\u043E\u0442\u044B", className: "max-w-none", children: jsx(Text, { children: workScheduleDescription }) })] }));
+    };
+    const getRemoteWorkplacePoint = ({ address = '', workScheduleDescription, }) => {
+        const header = 'Удаленное рабочее место';
+        const body = `${address} ${workScheduleDescription}`;
+        return { header, body };
+    };
+
     const EMPTY_VALUE$1 = [];
     function useOffices(regionCode) {
-        const { data = EMPTY_VALUE$1 } = useAsyncData(`/api/v1/branches?regionCode=${regionCode}`, fetchMap);
+        const { data = EMPTY_VALUE$1 } = useAsyncData(`/api/v1/branchesAndRemoteWorkplaces?regionCode=${regionCode}`, fetchMap);
         return data;
     }
     const fetchMap = async (url) => {
-        const result = await fetchJSON(url, { method: 'GET' });
+        const result = await fetchJSON(url, {
+            method: 'GET',
+        });
         return Array.isArray(result) ? result : EMPTY_VALUE$1;
     };
 
@@ -4659,6 +4715,7 @@
         workingSaturday: false,
         premiumService: false,
         privateBanking: false,
+        remoteWorkplace: false,
         sellingCoins: false,
         buyingCoins: false,
         bullionOperations: false,
@@ -4666,20 +4723,21 @@
         transferringDataToBiometricSystem: false,
     };
     const FILTRATION_PREDICATES = {
-        workingSaturday: (item) => Boolean(item.workSchedule?.workingSaturday),
-        premiumService: (item) => Boolean(item.premiumService),
-        privateBanking: (item) => Boolean(item.privateBanking),
-        sellingCoins: (item) => Boolean(item.sellingCoins),
-        buyingCoins: (item) => Boolean(item.buyingCoins),
-        bullionOperations: (item) => Boolean(item.bullionOperations),
-        preciousMetalsOperations: (item) => Boolean(item.preciousMetalsOperations),
-        transferringDataToBiometricSystem: (item) => Boolean(item.transferringDataToBiometricSystem),
+        workingSaturday: (item) => Boolean('workSchedule' in item && item.workSchedule?.workingSaturday),
+        premiumService: (item) => Boolean('premiumService' in item && item.premiumService),
+        privateBanking: (item) => Boolean('privateBanking' in item && item.privateBanking),
+        remoteWorkplace: (item) => Boolean('workScheduleDescription' in item),
+        sellingCoins: (item) => Boolean('sellingCoins' in item && item.sellingCoins),
+        buyingCoins: (item) => Boolean('buyingCoins' in item && item.buyingCoins),
+        bullionOperations: (item) => Boolean('bullionOperations' in item && item.bullionOperations),
+        preciousMetalsOperations: (item) => Boolean('preciousMetalsOperations' in item && item.preciousMetalsOperations),
+        transferringDataToBiometricSystem: (item) => Boolean('transferringDataToBiometricSystem' in item && item.transferringDataToBiometricSystem),
     };
     const OfficesMap = JSX(({ className }) => {
         const [currentLocation] = useLocation();
         const regionCode = currentLocation?.code ?? '000';
         const officesData = useOffices(regionCode);
-        return (jsx(OfficesAtmsMapLayout, { className: className, filterItems: filterItems, data: officesData, initFilterState: INITIAL_FILTRATION_STATE, renderCard: renderOfficeCard, getBalloon: getOfficePoint, title: `Офисы филиала ${currentLocation?.name}` }));
+        return (jsx(OfficesAtmsMapLayout, { className: className, filterItems: filterItems, data: officesData[0]?.branches, remoteWorkplaces: officesData[0]?.remoteWorkplaces, initFilterState: INITIAL_FILTRATION_STATE, renderCard: renderOfficeCard, renderRemoteWorkplaceCard: renderRemoteWorkplaceCard, getBalloon: getOfficePoint, getBalloonRemoteWorkplaces: getRemoteWorkplacePoint, title: `Офисы филиала ${currentLocation?.name}` }));
     });
     const filterItems = (data, filtrationState) => {
         const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
@@ -5732,7 +5790,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.332";
+    const packageVersion = "0.14.334";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;