@redneckz/wildless-cms-uni-blocks 0.16.1 → 0.16.2-credit

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -1,4 +1,4 @@
-import { useRouter, type Router } from '../../hooks/useRouter';
+import { useRouter, type Router } from '../../external/useRouter';
 import { type Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { RichText } from '../../ui-kit/RichText/RichText';
@@ -14,7 +14,7 @@ import {
   type LinkDocsContent,
 } from './LinkDocsContent';
 import { renderDefaultItem } from './renderDefaultItem';
-import { ReportDialogButton } from './RepordDialogButton';
+import { ReportDialogButton } from './ReportDialogButton';
 
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
   double: 'sm:flex-wrap sm:flex-row',
@@ -72,13 +72,13 @@ const renderLinkDocItem =
     }
 
     if ('reportSource' in docBlockDef && docBlockDef?.reportSource?.__html) {
-      return renderModalItem(docBlockDef, i);
+      return renderModalItem(icon)(docBlockDef, i);
     }
 
     return renderDefaultItem(router, icon)(docBlockDef, i);
   };
 
-const renderModalItem = (props: LinkDocDef | AttachmentDocDef, i: number) => {
+const renderModalItem = (icon: Picture) => (props: LinkDocDef | AttachmentDocDef, i: number) => {
   const commonProps = {
     text: props.text,
     target: props.target,
@@ -89,6 +89,7 @@ const renderModalItem = (props: LinkDocDef | AttachmentDocDef, i: number) => {
     <div role="listitem" key={String(i)}>
       <ReportDialogButton
         {...commonProps}
+        icon={icon}
         href={isLinkDoc(props) ? props?.href : props?.attachment?.src}
       />
       <RichText __html={props?.__html} />

package/mobile/src/components/LinkDocs/ReportDialogButton.tsx

@@ -0,0 +1,24 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
+import { ReportDialog, type ReportDialogProps } from '../../ui-kit/ReportDialog/ReportDialog';
+import { Text } from '../../ui-kit/Text/Text';
+import { renderImg } from './renderDefaultItem';
+
+export const ReportDialogButton = JSX<ReportDialogProps>(({ text, href, target, __html, icon }) => {
+  const { open } = useDialog(ReportDialog);
+  const openReportDialog = useCallback(
+    () => open({ __html, href, target }),
+    [__html, href, target],
+  );
+
+  return text ? (
+    <button
+      className="flex gap-s text-primary-text no-underline hover:text-primary-main"
+      onClick={openReportDialog}
+    >
+      {renderImg(icon)}
+      <Text font="font-light">{text}</Text>
+    </button>
+  ) : null;
+});

package/mobile/src/components/LinkDocs/linkDocsContentExample.ts

@@ -37,6 +37,7 @@ export const linkDocsContentExample: LinkDocsContent = {
       href: '/abc8/archive.zip',
       fileFormat: 'zip',
       fileSize: '2.3МБ',
+      __html: HTML,
     },
     {
       docType: 'Link',

package/mobile/src/components/LinkDocs/renderDefaultItem.tsx

@@ -1,4 +1,4 @@
-import { type Router } from '../../hooks/useRouter';
+import { type Router } from '../../external/useRouter';
 import { type Picture } from '../../model/Picture';
 import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
@@ -38,7 +38,7 @@ export const renderDefaultItem =
     );
   };
 
-const renderImg = (icon?: Picture) =>
+export const renderImg = (icon?: Picture) =>
   icon ? <Img className={linkIconStyle} image={icon} width="24" height="24" /> : null;
 
 const getExtFromHref = (href?: string) => {

package/mobile/src/components/OfficesAtmsMap/AtmsMap.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLocation } from '../../hooks/useLocation';
+import { type ComponentType } from '../../model/ComponentType';
 import { type AtmsDef } from './OfficesAtmsMapContent';
 import { OfficesAtmsMapLayout } from './OfficesAtmsMapLayout';
 import { type Atm } from './OfficesAtmsMapProps';
@@ -24,13 +25,12 @@ const FILTRATION_PREDICATES = {
   designDisabledPeople: (item: Atm) => Boolean(item.designDisabledPeople),
 };
 
-export interface AtmsMapProps {
+export interface AtmsMapProps extends ComponentType {
   descriptionData?: AtmsDef;
-  className?: string;
 }
 
 export const AtmsMap = JSX<AtmsMapProps>(({ descriptionData, className }) => {
-  const [currentLocation] = useLocation();
+  const currentLocation = useLocation();
 
   const regionCode = currentLocation?.code ?? '000';
 

package/mobile/src/components/OfficesAtmsMap/Badge.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
 import { type TextColor } from '../../ui-kit/Text/TextProps';
@@ -11,8 +12,7 @@ const colorStyle: Record<string, { border: string; text: TextColor }> = {
   red: { border: 'border-error/30', text: 'text-error' },
 };
 
-export interface BadgeProps {
-  className?: string;
+export interface BadgeProps extends ComponentType {
   color?: keyof typeof colorStyle;
 }
 

package/mobile/src/components/OfficesAtmsMap/CardCell.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
+import { type LabelProps } from '../../model/HeadlineType';
 import { Text } from '../../ui-kit/Text/Text';
 import { type TextColor, type TextSize } from '../../ui-kit/Text/TextProps';
 import { style } from '../../utils/style';
 
-export interface CardCellProps {
-  className?: string;
-  label?: string;
+export interface CardCellProps extends ComponentType, LabelProps {
   labelSize?: TextSize;
   value?: string | string[];
   subText?: string;

package/mobile/src/components/OfficesAtmsMap/CardRow.tsx

@@ -1,11 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 
-export interface CardRowProps {
-  className?: string;
-}
-
-export const CardRow = JSX<CardRowProps>(({ className, children }) => (
+export const CardRow = JSX<ComponentType>(({ className, children }) => (
   <div
     className={style(
       'flex flex-col sm:flex-row sm:border-t sm:border-solid sm:border-main-divider py-xl gap-x-6xl gap-y-xl',

package/mobile/src/components/OfficesAtmsMap/FiltrationForm.tsx

@@ -0,0 +1,68 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import { Button } from '../../ui-kit/Button/Button';
+import { ButtonTitle } from '../../ui-kit/Button/ButtonTitle';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Icon } from '../../ui-kit/Icon/Icon';
+
+const COMMON_FILTERS_STYLES = 'flex flex-col sm:flex-row sm:flex-wrap gap-3xl pb-2xl';
+
+export interface RenderFiltrationFormProps {
+  filters: string[];
+  field: { field: FormFieldRegisterer<any>; reset: () => void };
+  onlyOffice?: boolean;
+  labels: Record<string, string>;
+}
+
+export const FiltrationForm = JSX<RenderFiltrationFormProps>(
+  ({ filters, field: { field, reset }, onlyOffice, labels }) => {
+    const visibleFiltersNum = onlyOffice ? 5 : 6;
+
+    const filtersCheckbox = (filters || []).map((key) => (
+      <Checkbox key={key} text={labels[key]} {...field(key)} />
+    ));
+
+    const [visibleFilters, hiddenFilters] =
+      visibleFiltersNum > 0
+        ? [filtersCheckbox.slice(0, visibleFiltersNum), filtersCheckbox.slice(visibleFiltersNum)]
+        : [filtersCheckbox, []];
+
+    const [isUnfolded, { toggle }] = useBool(false);
+
+    return (
+      <div>
+        {filters?.length ? (
+          <div>
+            <Foldable>
+              <div>
+                <div className={COMMON_FILTERS_STYLES}>{visibleFilters}</div>
+                <FoldableSection className={COMMON_FILTERS_STYLES} isUnfolded={isUnfolded}>
+                  {hiddenFilters}
+                </FoldableSection>
+              </div>
+              <div className="flex space-x-lg">
+                {onlyOffice ? (
+                  <DefaultFoldButton
+                    label={isUnfolded ? 'Меньше фильтров' : 'Больше фильтров'}
+                    isUnfolded={isUnfolded}
+                    embedded
+                    short
+                    onClick={toggle}
+                  />
+                ) : null}
+                <Button embedded onClick={reset}>
+                  <ButtonTitle>Очистить фильтр</ButtonTitle>
+                  <Icon name="CloseIcon" size="small" />
+                </Button>
+              </div>
+            </Foldable>
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);

package/mobile/src/components/OfficesAtmsMap/FoldableCardContent.tsx

@@ -0,0 +1,25 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+
+export const FoldableCardContent = JSX(({ children }) => {
+  const [isUnfolded, { toggle }] = useBool(false);
+
+  return (
+    <div>
+      <div className="hidden sm:block">{children}</div>
+      <Foldable className="block sm:hidden">
+        <FoldableSection isUnfolded={isUnfolded}>{children}</FoldableSection>
+        <DefaultFoldButton
+          className="my-m mr-m border-b border-solid border-main-divider"
+          label={isUnfolded ? 'Скрыть' : 'Подробнее'}
+          isUnfolded={isUnfolded}
+          embedded
+          onClick={toggle}
+        />
+      </Foldable>
+    </div>
+  );
+});

package/mobile/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -1,25 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useForm } from '../../hooks/useForm';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm/useForm';
+import { type ComponentType } from '../../model/ComponentType';
 import { type VNode } from '../../model/VNode';
 import { ClientOnly } from '../../ui-kit/ClientOnly';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
 import { style } from '../../utils/style';
 import { FILTRATION_LABELS, FILTRATION_PREDICATES, INITIAL_FILTRATION_STATE } from './filters';
+import { FiltrationForm } from './FiltrationForm';
 import { type AtmsDef } from './OfficesAtmsMapContent';
 import { type Atm, type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
 import { renderButtonsGroup } from './renderButtonsGroup';
 import { renderDescriptionBlock } from './renderDescriptionBlock';
-import { renderFiltrationForm, type RenderFiltrationFormOptions } from './renderFiltrationForm';
 import { renderHeading } from './renderHeading';
+import { useOfficesAtmsMapData } from './useOfficesAtmsMapData';
 import { type BalloonContent } from './YandexMapProps';
 
 const defaultEmptyFunction = () => void 0;
 
 export type InitFilterState = Record<string, boolean>;
 
-export interface OfficesAtmsMapLayoutProps<T> {
-  className?: string;
+export interface OfficesAtmsMapLayoutProps<T> extends ComponentType {
   data?: T[];
   isLoad: boolean;
   remoteWorkplaces?: T[];
@@ -52,40 +53,16 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
     const onlyOffice = title?.includes('Офис');
     const [filtrationState, { field, reset }] = useForm(INITIAL_FILTRATION_STATE);
 
-    const [filteredItems, points, filteredRemoteWorkplaces, lengthItems] = useMemo(() => {
-      const _filteredItems = filterItems(data, filtrationState);
-      const _filteredRemoteWorkplaces = filterItems(remoteWorkplaces, filtrationState);
-
-      const _points = [
-        ..._filteredItems.map((_) => ({
-          type: 'offices',
-          coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
-          content: getBalloon(_),
-        })),
-        ..._filteredRemoteWorkplaces.map((_: RemoteWorkplace) => ({
-          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 { filteredItems, points, filteredRemoteWorkplaces, lengthItems } = useOfficesAtmsMapData({
+      data,
+      remoteWorkplaces,
+      filtrationState,
+      getBalloon,
+      getBalloonRemoteWorkplaces,
+    });
 
     const [activeButton, setActiveButton] = useState('all');
 
-    const filterOptions: RenderFiltrationFormOptions = {
-      filters: getFiltersWithNonEmptyData([...data, ...remoteWorkplaces]),
-      field: { field, reset },
-      onlyOffice,
-      labels: FILTRATION_LABELS,
-    };
-
     return (
       <div className={style('space-y-1', className)}>
         <div className="bg-white">
@@ -94,7 +71,12 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
             {descriptionData ? renderDescriptionBlock(descriptionData) : null}
             {onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton)}
             <div className={style('pb-3xl', filtersVisibleStyles(activeButton))}>
-              {renderFiltrationForm(filterOptions)}
+              <FiltrationForm
+                filters={getFiltersWithNonEmptyData([...data, ...remoteWorkplaces])}
+                field={{ field, reset }}
+                onlyOffice={onlyOffice}
+                labels={FILTRATION_LABELS}
+              />
             </div>
           </div>
           <div className="h-[600px]">
@@ -112,15 +94,6 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
   },
 );
 
-export const filterItems = (
-  data: (Branch | RemoteWorkplace)[],
-  filtrationState: Record<string, boolean>,
-) => {
-  const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
-
-  return data.filter((item) => truthyFilters.every((_) => FILTRATION_PREDICATES[_](item)));
-};
-
 export const getFiltersWithNonEmptyData = (data: (Branch | Atm | RemoteWorkplace)[]) =>
   Object.keys(INITIAL_FILTRATION_STATE).filter(
     (_) => data.filter((item) => FILTRATION_PREDICATES[_](item)).length,

package/mobile/src/components/OfficesAtmsMap/OfficesMap.tsx

@@ -1,16 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLocation } from '../../hooks/useLocation';
+import { type ComponentType } from '../../model/ComponentType';
 import { OfficesAtmsMapLayout } from './OfficesAtmsMapLayout';
 import { getOfficePoint, renderOfficeCard } from './renderOfficeCard';
 import { getRemoteWorkplacePoint, renderRemoteWorkplaceCard } from './renderRemoteWorkplaceCard';
 import { useOffices } from './useOffices';
 
-export interface OfficesMapProps {
-  className?: string;
-}
-
-export const OfficesMap = JSX<OfficesMapProps>(({ className }) => {
-  const [currentLocation] = useLocation();
+export const OfficesMap = JSX<ComponentType>(({ className }) => {
+  const currentLocation = useLocation();
   const regionCode = currentLocation?.code ?? '000';
   const { data, isLoad } = useOffices(regionCode);
 

package/mobile/src/components/OfficesAtmsMap/filterItems.tsx

@@ -0,0 +1,11 @@
+import { FILTRATION_PREDICATES } from './filters';
+import { type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
+
+export const filterItems = (
+  data: (Branch | RemoteWorkplace)[],
+  filtrationState: Record<string, boolean>,
+) => {
+  const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
+
+  return data.filter((item) => truthyFilters.every((_) => FILTRATION_PREDICATES[_](item)));
+};

package/mobile/src/components/OfficesAtmsMap/renderAtmCard.tsx

@@ -1,12 +1,11 @@
-import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Text } from '../../ui-kit/Text/Text';
+import { capitalize } from '../../utils/capitalize';
 import { Badge } from './Badge';
-import { CardCell } from './CardCell';
+import { CardCell, type CardCellProps } from './CardCell';
 import { CardRow } from './CardRow';
+import { FoldableCardContent } from './FoldableCardContent';
 import { type Atm } from './OfficesAtmsMapProps';
-import { renderFoldButton } from './renderFoldButton';
 
 export const renderAtmCard = (
   {
@@ -21,10 +20,10 @@ export const renderAtmCard = (
   }: Atm,
   i: number,
 ) => {
-  const additionalInfo = [
+  const additionalInfo: CardCellProps[] = [
     {
       label: 'Устройство',
-      value: capitalizedFirstLetter(terminalType),
+      value: capitalize(terminalType),
     },
     { label: 'Модуль приема наличных', value: billAcceptorEnable ? 'Да' : 'Нет' },
     {
@@ -42,7 +41,7 @@ export const renderAtmCard = (
     <div key={String(i)} className="bg-white col-span-12 p-3xl sm:border-green sm:border">
       <div className="sm:flex sm:justify-between">
         <div>
-          <Text size="text-h4">{capitalizedFirstLetter(location)}</Text>
+          <Text size="text-h4">{capitalize(location)}</Text>
           {address ? (
             <div className="flex pb-xl pt-xs gap-2xs">
               <Icon name="GeolocationIcon" width="24" height="24" />
@@ -51,38 +50,23 @@ export const renderAtmCard = (
           ) : null}
         </div>
         <div className="whitespace-nowrap">
-          <Badge color="green">{capitalizedFirstLetter(workTime)}</Badge>
+          <Badge color="green">{capitalize(workTime)}</Badge>
         </div>
       </div>
-      <div className="hidden sm:block">
-        <CardRow className="flex-wrap">{additionalInfo?.map(renderInfo)}</CardRow>
-      </div>
-      <Foldable
-        className="block sm:hidden"
-        renderFoldableSection={({ isUnfolded }) => {
-          return (
-            <FoldableSection isUnfolded={isUnfolded}>
-              <CardRow className="flex-wrap">{additionalInfo?.map(renderInfo)}</CardRow>
-            </FoldableSection>
-          );
-        }}
-        //** TODO: Remove styles with refactoring  DefaultFoldButton*/
-        renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
-      />
+      <FoldableCardContent>
+        <CardRow className="flex-wrap">
+          {additionalInfo?.map((item, key) => (
+            <CardCell key={String(key)} {...item} />
+          ))}
+        </CardRow>
+      </FoldableCardContent>
     </div>
   );
 };
 
 export const getAtmPoint = ({ address = '', terminalType, atmCode = '' }: Atm) => {
-  const header = `${capitalizedFirstLetter(terminalType)} №${atmCode}`;
+  const header = `${capitalize(terminalType)} №${atmCode}`;
   const body = address.toUpperCase();
 
   return { header, body };
 };
-
-const renderInfo = (item: Record<string, string>, i: number) => (
-  <CardCell key={String(i)} {...item} />
-);
-
-const capitalizedFirstLetter = (text?: string) =>
-  text ? `${text?.charAt(0)?.toUpperCase()}${text?.slice(1)}` : '';

package/mobile/src/components/OfficesAtmsMap/renderButtonsGroup.tsx

@@ -12,20 +12,22 @@ export const renderButtonsGroup = (
   const businessButtonVersion = getVersion(activeButton === 'business');
 
   const handleClick = (e: any, key: string, branches: Branch[]) => {
-    if (e.currentTarget === e.target && key === 'business') {
-      branches.filter(
-        (branch) =>
-          branch.workSchedule &&
-          branch.workSchedule.businessScheduleVisibleTag &&
-          !branch.workSchedule.businessScheduleDescription,
-      );
-    }
+    const filteredBranches =
+      e.currentTarget === e.target && key === 'business' ? filterBranches(branches) : branches;
 
     onButtonClick(key);
 
-    return branches;
+    return filteredBranches;
   };
 
+  const filterBranches = (branches: Branch[]) =>
+    branches.filter(
+      (branch) =>
+        branch.workSchedule &&
+        branch.workSchedule.businessScheduleVisibleTag &&
+        !branch.workSchedule.businessScheduleDescription,
+    );
+
   return (
     <div className="flex gap-lg flex-col sm:flex-row pb-lg">
       <Button data-id="all" onClick={(e) => handleClick(e, 'all', data)} version={allButtonVersion}>

package/mobile/src/components/OfficesAtmsMap/renderOfficeCard.tsx

@@ -1,9 +1,8 @@
-import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Text } from '../../ui-kit/Text/Text';
 import { CardCell } from './CardCell';
 import { CardRow } from './CardRow';
+import { FoldableCardContent } from './FoldableCardContent';
 import { getScheduleDescription } from './getScheduleDescription';
 import { getWorkScheduleWeek } from './getWorkScheduleWeek';
 import { type Branch } from './OfficesAtmsMapProps';
@@ -11,77 +10,30 @@ import { renderAlternativeDay, renderBusinessSchedule } from './renderBusinessSc
 import { renderCurrency } from './renderCurrency';
 import { renderCurrentDaySchedule } from './renderCurrentDaySchedule';
 import { renderDay } from './renderDay';
-import { renderFoldButton } from './renderFoldButton';
 import { renderWorkSchedule } from './renderWorkSchedule';
 
-export const renderOfficeCard = (
-  {
-    name,
-    address,
-    phone,
-    fax,
-    phoneBusiness,
-    phoneNatural,
-    phoneCallCentre,
-    phoneCurrencyControl,
-    workSchedule,
-    exchangeRate,
-  }: Branch,
-  i: number,
-) => {
-  if (!workSchedule) {
+export const renderOfficeCard = (branch: Branch, i: number) => {
+  if (!branch.workSchedule) {
     return null;
   }
 
-  const workScheduleWeek = getWorkScheduleWeek(workSchedule);
+  const workScheduleWeek = getWorkScheduleWeek(branch.workSchedule);
 
   return (
     <div key={String(i)} className="bg-white col-span-12 p-3xl sm:border-green sm:border">
       <div className="sm:flex sm:justify-between">
         <div>
-          <Text size="text-h4">{name}</Text>
-          {address ? (
+          <Text size="text-h4">{branch.name}</Text>
+          {branch.address ? (
             <div className="flex pb-xl pt-xs gap-2xs">
               <Icon name="GeolocationIcon" width="24" height="24" />
-              <Text size="text-l">{address}</Text>
+              <Text size="text-l">{branch.address}</Text>
             </div>
           ) : null}
         </div>
         {renderCurrentDaySchedule(workScheduleWeek)}
       </div>
-      <div className="hidden sm:block">
-        {renderCardContent({
-          phone,
-          fax,
-          phoneBusiness,
-          phoneNatural,
-          phoneCallCentre,
-          phoneCurrencyControl,
-          workSchedule,
-          exchangeRate,
-        })}
-      </div>
-      <Foldable
-        className="block sm:hidden"
-        renderFoldableSection={({ isUnfolded }) => {
-          return (
-            <FoldableSection isUnfolded={isUnfolded}>
-              {renderCardContent({
-                phone,
-                fax,
-                phoneBusiness,
-                phoneNatural,
-                phoneCallCentre,
-                phoneCurrencyControl,
-                workSchedule,
-                exchangeRate,
-              })}
-            </FoldableSection>
-          );
-        }}
-        //** TODO: remove styles with refactoring  DefaultFoldButton*/
-        renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
-      />
+      <FoldableCardContent>{renderCardContent(branch)}</FoldableCardContent>
     </div>
   );
 };

package/mobile/src/components/OfficesAtmsMap/renderRemoteWorkplaceCard.tsx

@@ -1,11 +1,9 @@
-import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Text } from '../../ui-kit/Text/Text';
 import { CardCell } from './CardCell';
 import { CardRow } from './CardRow';
+import { FoldableCardContent } from './FoldableCardContent';
 import { type RemoteWorkplace } from './OfficesAtmsMapProps';
-import { renderFoldButton } from './renderFoldButton';
 
 export const renderRemoteWorkplaceCard = (
   { address, workScheduleDescription }: RemoteWorkplace,
@@ -28,28 +26,12 @@ export const renderRemoteWorkplaceCard = (
           ) : null}
         </div>
       </div>
-      <div className="hidden sm:block">
-        {renderCardContent({
-          workScheduleDescription,
-        })}
-      </div>
-      <Foldable
-        className="block sm:hidden"
-        renderFoldableSection={({ isUnfolded }) => (
-          <FoldableSection isUnfolded={isUnfolded}>
-            {renderCardContent({
-              workScheduleDescription,
-            })}
-          </FoldableSection>
-        )}
-        //** TODO: remove styles with refactoring  DefaultFoldButton*/
-        renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
-      />
+      <FoldableCardContent>{renderCardContent(workScheduleDescription)}</FoldableCardContent>
     </div>
   );
 };
 
-const renderCardContent = ({ workScheduleDescription }: RemoteWorkplace) => {
+const renderCardContent = (workScheduleDescription?: string) => {
   return (
     <div>
       <CardRow className="flex">