@redneckz/wildless-cms-uni-blocks 0.14.28 → 0.14.30

package/mobile/src/components/Blocks.ts

@@ -11,7 +11,6 @@ import { CarouselBankHistoryCard } from './CarouselBankHistoryCard/CarouselBankH
 import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
-import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
@@ -26,7 +25,6 @@ import { ImgBlock } from './ImgBlock/ImgBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { MortgageFiltration } from './MortgageFiltration/MortgageFiltration';
-import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
@@ -56,7 +54,6 @@ export const Blocks: BlocksRegistry = {
   CarouselCard,
   CarouselCatalogCard,
   CarouselLinks,
-  CarouselProductCard,
   CarouselRecommendationCard,
   CarouselTariffsCard,
   ComparisonTable,
@@ -71,7 +68,6 @@ export const Blocks: BlocksRegistry = {
   ImgBlock,
   LinkDocs,
   MobileAppTile,
-  PictureText,
   Placeholder,
   ProductBlock,
   ProductGallery,

package/mobile/src/components/Calculator/CreditCalculatorForm.tsx

@@ -26,7 +26,7 @@ export interface CreditCalculatorProp extends CreditCalculatorProps {
 }
 
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
-  ({ className, sourceBookDir, buttons, footnote, paramsViewSettings, isMobile }) => {
+  ({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
     const [userInputParams, { field }] = useForm({
       isAnnuity: true,
       isInsurance: true,
@@ -44,7 +44,8 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
     );
 
     const paymentTypeElement = renderPaymentType({
-      title: isMobile ? 'Тип платежа' : '',
+      title: '',
+      mobileTitle: 'Тип платежа',
       orientation: 'vertical',
       ...field('isAnnuity'),
     });

package/mobile/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -26,6 +26,7 @@ import {
 
 export interface RefinancingCalculatorProp extends RefinancingCalculatorProps {
   className?: string;
+  isMobile?: boolean;
 }
 
 export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
@@ -47,6 +48,13 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
       paramsViewSettings,
     );
 
+    const paymentTypeElement = renderPaymentType({
+      title: '',
+      mobileTitle: 'Тип платежа',
+      orientation: 'vertical',
+      ...field('isAnnuity'),
+    });
+
     return (
       <section className={style('flex flex-col justify-between @5xl:flex-row gap-m', className)}>
         <div className="flex flex-col gap-y-m sm:max-w-md gap-2xl">
@@ -84,12 +92,15 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
                 value: calculatorParams.moneyExtra,
               })
             : null}
+          <div className="sm:hidden pt-1 pb-4 border-b border-main-divider">
+            {paymentTypeElement}
+          </div>
         </div>
         {renderRate({
           rate: calculatorParams.rate,
           fractionDigits: 1,
         })}
-        <div className="flex flex-col gap-2xl sm:w-96">
+        <div className="flex flex-col gap-2xl mt-2 sm:w-96 sm:mt-0">
           <CalculatorValueBlock
             title={'Ежемесячный платеж'}
             value={calculatorParams.monthlyPayment}
@@ -102,7 +113,7 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
               postfix="₽"
             />
           ) : null}
-          {renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') })}
+          <div className="hidden sm:block">{paymentTypeElement}</div>
           {renderButtonsSection(buttons, { isVertical: true })}
           {renderFootnote(footnote)}
         </div>
@@ -115,7 +126,7 @@ const renderCreditParamsForm = (
   params: RefinancingCalculatorParams & RefinancingCalculatorParamsViewSettings,
   field: FormFieldRegisterer<any>,
 ) => (
-  <div className="space-y-s">
+  <div className="space-y-lg sm:space-y-s">
     {params.isShowSalaryClient ? (
       <Checkbox
         text="Получаю зарплату на счёт в Россельхозбанке"

package/mobile/src/components/Calculator/renderBinaryRadioButtonGroup.tsx

@@ -9,6 +9,7 @@ import { style } from '../../utils/style';
 export interface BinaryRadioButtonGroupProps {
   items: [truthy: RadioButtonItem, falsy: RadioButtonItem];
   title?: string;
+  mobileTitle?: string;
   orientation?: ListOrientation;
   value?: boolean;
   radioGroupClassName?: string;
@@ -18,6 +19,7 @@ export interface BinaryRadioButtonGroupProps {
 export const renderBinaryRadioButtonGroup = ({
   items,
   title,
+  mobileTitle = title,
   orientation = 'horizontal',
   value,
   radioGroupClassName,
@@ -25,12 +27,20 @@ export const renderBinaryRadioButtonGroup = ({
 }: BinaryRadioButtonGroupProps) => (
   <div className="space-y-s">
     {title ? (
-      <div>
+      <div className="hidden @5xl:block">
         <Text color="text-secondary-text" font="font-light">
           {title}
         </Text>
       </div>
     ) : null}
+    {mobileTitle ? (
+      <div className="@5xl:hidden">
+        <Text color="text-secondary-text" font="font-light">
+          {mobileTitle}
+        </Text>
+      </div>
+    ) : null}
+
     <RadioButtonGroup
       orientation={orientation}
       items={items}

package/mobile/src/components/Carousel/Carousel.tsx

@@ -88,8 +88,8 @@ Carousel.childrenTypes = [
   'CarouselProgramsCard',
   'CarouselRecommendationCard',
   'CarouselTariffsCard',
-  'CarouselRichTextCard',
   'CarouselInvestmentCard',
+  'RichTextBlock',
   'ProductBlock',
 ];
 

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -26,7 +26,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
         <div
           className={style(
             layerBaseStyle,
-            'relative p-xl sm:p-5xl bg-white border-transparent sm:border-green-light',
+            'relative p-xl sm:p-5xl bg-white border-transparent sm:border-green-more-light',
           )}
         >
           <Headline

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -7,6 +7,8 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { type TextAlign } from '../../ui-kit/Text/TextProps';
 import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
@@ -22,9 +24,11 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     className,
     padding,
     description,
+    additionalDescription,
     href,
     icon,
     items = [],
+    isDotted,
     listItemSize = 'S',
     socialMedia = [],
     target,
@@ -54,7 +58,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
                 <Headline
                   title={title}
                   description={description}
-                  headlineVersion="S"
+                  headlineVersion="XS"
                   isEmbedded={true}
                   align={align}
                 />
@@ -68,12 +72,26 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
             }
             isImageAlwaysOnRight={isImageAlwaysOnRight}
             isImageSecondary={isImageSecondary}
+            imageAlign="center"
           >
             <BenefitsList benefits={benefits} />
-            <List items={items} listItemSize={listItemSize} />
+            <List items={items} listItemSize={listItemSize} isDotted={isDotted} />
+            {renderAdditionalDescription(additionalDescription, align)}
           </BaseTile>
         </LinkWrapper>
       </BlockWrapper>
     );
   },
 );
+
+const renderAdditionalDescription = (additionalDescription?: string, align?: TextAlign) =>
+  additionalDescription ? (
+    <Paragraph
+      size="text-m"
+      font="font-light"
+      color="text-secondary-text group-data-secondary:text-white/80"
+      align={align}
+    >
+      {additionalDescription}
+    </Paragraph>
+  ) : null;

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -1,4 +1,9 @@
-import { type AlignProps, type HeadlineCommonProps } from '../../model/HeadlineType';
+import { type BulletsProps } from '../../model/Bullets';
+import {
+  type AdditionalDescriptionProps,
+  type AlignProps,
+  type HeadlineCommonProps,
+} from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type LinkCommonProps } from '../../model/LinkProps';
 import { type IconProps } from '../../model/Picture';
@@ -12,9 +17,11 @@ import { type ListContent } from '../../ui-kit/List/ListContent';
  */
 export type CarouselRecommendationCardContent = UniBlockContent &
   HeadlineCommonProps &
+  AdditionalDescriptionProps &
   ListContent &
   IconProps &
   LinkCommonProps &
+  BulletsProps &
   AlignProps &
   BenefitsListContent & {
     /** @title Соц сети */

package/mobile/src/components/Depository/Depository.tsx

@@ -5,6 +5,7 @@ import { type JSXBlock, type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { NotFound } from '../../ui-kit/NotFound/NotFound';
 import { Pagination } from '../../ui-kit/Pagination/Pagination';
+import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { type DepositoryContent } from './DepositoryContent';
 import { DepositoryFilter } from './DepositoryFilter';
@@ -33,32 +34,48 @@ export const Depository: JSXBlock<DepositoryProps> = JSX<DepositoryProps>(
     const [itemCount, setItemCount] = useState(DEFAULT_ITEMS_COUNT);
     const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
 
-    const { totalPages = 0, items } = useDepository({
+    const { totalPages = 0, items = [] } = useDepository({
       size: itemCount,
       page: currentPage,
       ...filtrationState,
     });
 
     const handleChangePage = useCallback((page: number) => setCurrentPage(page - 1), []);
-    const handleItemCountChange = useCallback((count: number) => setItemCount(count), []);
+
+    const handleItemCountChange = useCallback((count: number) => {
+      if (itemCount !== count) {
+        setItemCount(count);
+        setCurrentPage(0);
+      } else {
+        setItemCount(count);
+      }
+    }, []);
 
     return (
-      <BlockWrapper className={style(className, 'container p-4xl')} {...rest}>
+      <BlockWrapper className={style(className, 'container p-6xl')} {...rest}>
         <DepositoryFilter filtrationState={filtrationState} field={field} onClearFilter={reset} />
         <div className="flex flex-col">
           <div className="grid grid-cols-12 pb-lg border-gray border-opacity-50 border-b">
-            <span className="col-span-2 text-gray text-m">Дата</span>
-            <span className="col-span-10 text-gray text-m">Тема</span>
+            <div className="col-span-2">
+              <Text size="text-m" color="text-secondary-text">
+                Дата
+              </Text>
+            </div>
+            <span className="col-span-10">
+              <Text size="text-m" color="text-secondary-text">
+                Тема
+              </Text>
+            </span>
           </div>
-          {items?.length ? (
-            items?.map((params) => <DepositoryItem key={String(params.publicId)} {...params} />)
+          {items.length ? (
+            items.map((params) => <DepositoryItem key={String(params.publicId)} {...params} />)
           ) : (
             <NotFound title="Ничего не найдено" description="Попробуйте очистить фильтры" />
           )}
           <Pagination
             currentPage={currentPage + 1}
             onPageChange={handleChangePage}
-            totalPages={totalPages + 1}
+            totalPages={totalPages}
             itemCount={itemCount}
             onItemCountChange={handleItemCountChange}
           />

package/mobile/src/components/Depository/DepositoryFilter.tsx

@@ -28,7 +28,7 @@ export const DepositoryFilter = JSX<DepositoryFilterProps>(
       />
       <div className="col-span-2 mt-auto">
         <button
-          className="px-m py-s rounded-md bg-main-gray text-green cursor-pointer w-full"
+          className="px-m py-s rounded-md bg-main-gray text-green hover:text-white hover:bg-primary-hover active:bg-primary-active cursor-pointer w-full"
           onClick={onClearFilter}
         >
           Очистить фильтр

package/mobile/src/components/Depository/DepositoryItem.tsx

@@ -9,8 +9,12 @@ export const DepositoryItem = ({ title, timestamp, publicId }: DepositoryDataIte
 
   return (
     <div className="grid grid-cols-12 py-lg border-gray border-opacity-50 border-b" key={publicId}>
-      <div className="col-span-2 text-m">
-        {timestamp ? <Text>{formatDate(timestamp)}</Text> : null}
+      <div className="col-span-2">
+        {timestamp ? (
+          <Text size="text-m" font-weight="font-light">
+            {formatDate(timestamp)}
+          </Text>
+        ) : null}
       </div>
       <div className="col-span-10 text-h6 hover:text-primary-active">
         <a href={href} download aria-label="Скачать">

package/mobile/src/components/Depository/useDepository.ts

@@ -19,14 +19,23 @@ interface UseDepositoryParams extends DepositoryFiltrationState {
   size: number;
   page: number;
 }
+const DEPOSITARY_URL = '/api/v1/depository';
 
 export const useDepository = ({ size, page, query, startDate, endDate }: UseDepositoryParams) => {
-  const { data } = useAsyncData<DepositoryData>(
-    `/api/v1/depository?page=${page}&size=${size}&query=${query}&timestampStart=${
-      startDate ? formatDate(startDate, true) : ''
-    }&timestampEnd=${endDate ? formatDate(endDate, true) : ''}`,
-    fetchJSONUnsafe,
-  );
+  const formatStartDate = startDate ? formatDate(startDate, true) : '';
+  const formatEndDate = endDate ? formatDate(endDate, true) : '';
+
+  const searchParams = new URLSearchParams(DEPOSITARY_URL);
+
+  searchParams.set('page', String(page));
+  searchParams.set('size', String(size));
+  searchParams.set('query', query);
+  searchParams.set('startDate', formatStartDate);
+  searchParams.set('endDate', formatEndDate);
+
+  const queryString = `?${searchParams.toString()}`;
+
+  const { data } = useAsyncData<DepositoryData>(DEPOSITARY_URL + queryString, fetchJSONUnsafe);
 
   return { items: data?.content, totalPages: data?.totalPages };
 };

package/mobile/src/components/Footer/SocialMedia.tsx

@@ -33,7 +33,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
         ..._,
         ...buttonText,
         icon: { ...iconCustom, iconVersion: 'color' },
-        version,
+        version: _?.version ?? version,
       };
     });
 
@@ -47,7 +47,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
       <div className={style('flex flex-col gap-xs', className)}>
         <div className="flex gap-xs">
           {renderButtonsSection(buttons, {
-            className: stretched ? 'w-full' : '',
+            className: style(stretched || hasText ? 'basis-full' : ''),
             buttonClassName,
           })}
         </div>

package/mobile/src/components/Headline/headlineVersionStyles.ts

@@ -1,4 +1,4 @@
-import { type HeadlineSmallVersion, type HeadlineVersion } from '../../model/HeadlineType';
+import { type HeadlineVersion } from '../../model/HeadlineType';
 import { type HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import { type FontWeight, type TextSize, type TitleSize } from '../../ui-kit/Text/TextProps';
 
@@ -48,15 +48,3 @@ export const headlineVersionStyles: Record<
     descriptionStyle: 'mt-xs',
   },
 };
-
-// TODO: Move to Gallery and rename
-export const HEADLINE_SMALL_VERSION: Record<HeadlineSmallVersion, string> = {
-  H6: 'text-h6',
-  XL_L: 'text-xl-light',
-  XL_R: 'text-xl',
-  L_L: 'text-l-light',
-  L_R: 'text-l',
-  M: 'text-m-light',
-  S: 'text-s-light',
-  XS: 'text-xs-light',
-};

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

@@ -5,9 +5,9 @@ import { style } from '../../utils/style';
 
 const colorStyle: Record<string, { border: string; text: TextColor }> = {
   yellow: { border: 'border-yellow-light', text: 'text-yellow' },
-  green: { border: 'border-green-light', text: 'text-green-dark' },
+  green: { border: 'border-green-more-light', text: 'text-green-dark' },
   gray: { border: 'border-gray', text: 'text-secondary-text' },
-  red: { border: 'border-error', text: 'text-error' },
+  red: { border: 'border-error/30', text: 'text-error' },
 };
 
 export interface BadgeProps {

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

@@ -1,40 +1,52 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Text } from '../../ui-kit/Text/Text';
-import { type TextColor } from '../../ui-kit/Text/TextProps';
+import { type TextColor, type TextSize } from '../../ui-kit/Text/TextProps';
 import { style } from '../../utils/style';
 
 export interface CardCellProps {
   className?: string;
   label?: string;
-  value?: string;
+  labelSize?: TextSize;
+  value?: string | string[];
   subText?: string;
   subColor?: TextColor;
 }
 
-export const CardCell = JSX<CardCellProps>(({ className, label, value, subText, subColor }) => {
-  const textItems = value?.split(',') ?? [];
+export const CardCell = JSX<CardCellProps>(({ value, subText, children, ...props }) => {
+  const textItems = (Array.isArray(value) ? value : value?.split(',') ?? []).filter(Boolean);
 
-  if (!textItems.length && !subText) {
+  if ([textItems.length, children, subText].every((_) => !_)) {
     return null;
   }
 
-  return (
-    <div className={style('flex gap-2xs flex-col h-full max-w-[300px]', className)}>
-      {label ? (
-        <Text color="text-secondary-text" font="font-light" size="text-m">
-          {label}
-        </Text>
-      ) : null}
-      {textItems.filter(Boolean).map((text, i) => (
+  return renderCardCell({ textItems, subText, children, ...props });
+});
+
+const renderCardCell = ({
+  label,
+  labelSize = 'text-m',
+  textItems,
+  subColor,
+  subText,
+  className,
+  children,
+}: CardCellProps & { textItems: string[]; children: any }) => (
+  <div className={style('flex gap-2xs flex-col h-full max-w-[300px]', className)}>
+    {label ? (
+      <Text color="text-secondary-text" font="font-light" size={labelSize}>
+        {label}
+      </Text>
+    ) : null}
+    {children ||
+      textItems.filter(Boolean).map((text, i) => (
         <Text key={String(i)} size="text-l">
           {text.trim()}
         </Text>
       ))}
-      {subText ? (
-        <Text color={subColor} size="text-m">
-          {subText}
-        </Text>
-      ) : null}
-    </div>
-  );
-});
+    {subText ? (
+      <Text color={subColor} size="text-m">
+        {subText}
+      </Text>
+    ) : null}
+  </div>
+);

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

@@ -16,7 +16,9 @@ export interface ExchangeRate {
 }
 
 export type WorkScheduleWeek = {
+  key?: string;
   title?: string;
+  short?: string;
   status?: boolean;
   workTime?: string;
   lunchHour?: string;
@@ -42,6 +44,9 @@ export type WorkSchedule = {
   workingFriday?: boolean;
   workingSaturday?: boolean;
   workingSunday?: boolean;
+  isMatchesPattern?: boolean;
+  businessScheduleVisibleTag?: boolean;
+  businessScheduleDescription?: string;
 };
 
 export type SafeBoxCaseTariff = {

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

@@ -0,0 +1,48 @@
+import { CardCell } from './CardCell';
+import type { WorkScheduleWeek } from './OfficesAtmsMapProps';
+
+export const getScheduleDescription = (workScheduleWeek: WorkScheduleWeek[]) => {
+  const workingWeekday = workScheduleWeek.find(
+    (_) => _.key !== 'workingSaturday' && Boolean(_.status) && Boolean(_.workTime),
+  );
+
+  const workingSaturday = workScheduleWeek.find(
+    (_) => _.key === 'workingSaturday' && Boolean(_.status) && Boolean(_.workTime),
+  );
+
+  const daysOff = workScheduleWeek
+    .filter((_) => !_.status)
+    .map((_) => _.short?.toLowerCase())
+    .join(', ');
+
+  const rows = [
+    buildScheduleText({
+      workTime: workingWeekday?.workTime,
+      lunchHour: workingWeekday?.lunchHour,
+      daysOff: workingSaturday ? '' : daysOff,
+    }),
+    buildScheduleText(
+      { workTime: workingSaturday?.workTime, lunchHour: workingSaturday?.lunchHour, daysOff },
+      true,
+    ),
+  ].filter(Boolean);
+
+  return <CardCell label="Режим работы" value={rows} className="max-w-none" />;
+};
+
+export const buildScheduleText = (
+  { workTime = '', lunchHour = '', daysOff = '' }: Record<string, string | undefined>,
+  isSaturday = false,
+) => {
+  if (!workTime) {
+    return '';
+  }
+
+  return [
+    `${isSaturday ? 'Суббота' : 'Будние дни'}: ${workTime}`,
+    lunchHour ? `перерыв: ${lunchHour}` : '',
+    daysOff ? `не работает: ${daysOff}` : '',
+  ]
+    .filter(Boolean)
+    .join('; ');
+};

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

@@ -0,0 +1,28 @@
+import type { WorkSchedule, WorkScheduleWeek } from './OfficesAtmsMapProps';
+
+export const WEEKDAY_MAP = [
+  ['workingMonday', 'Пн', 'Понедельник'],
+  ['workingTuesday', 'Вт', 'Вторник'],
+  ['workingWednesday', 'Ср', 'Среда'],
+  ['workingThursday', 'Чт', 'Четверг'],
+  ['workingFriday', 'Пт', 'Пятница'],
+  ['workingSaturday', 'Сб', 'Суббота'],
+  ['workingSunday', 'Вс', 'Воскресенье'],
+];
+
+export const getWorkScheduleWeek = (workSchedule?: WorkSchedule): WorkScheduleWeek[] =>
+  WEEKDAY_MAP.map(([key, short, title]) => ({
+    key,
+    title,
+    short,
+    status: Boolean(workSchedule?.[key]),
+    get workTime() {
+      return key === 'workingSaturday' ? workSchedule?.workTimeSaturday : workSchedule?.workTime;
+    },
+    get lunchHour() {
+      return key === 'workingSaturday' ? workSchedule?.lunchHourSaturday : workSchedule?.lunchHour;
+    },
+    get hasLunch() {
+      return /\d+/.test(this.lunchHour ?? '');
+    },
+  }));

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

@@ -0,0 +1,54 @@
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { CardCell } from './CardCell';
+import { CardRow } from './CardRow';
+import { WEEKDAY_MAP } from './getWorkScheduleWeek';
+import type { WorkScheduleWeek } from './OfficesAtmsMapProps';
+
+export const renderBusinessSchedule = (scheduleDescription?: string) => {
+  if (!scheduleDescription) {
+    return null;
+  }
+
+  const businessSchedule = getBusinessSchedule(scheduleDescription);
+
+  return (
+    <CardRow className="border-none">
+      <CardCell label="Для юридических лиц" labelSize="text-l">
+        <div className="flex gap-1">{businessSchedule.map(renderAlternativeDay)}</div>
+      </CardCell>
+      <CardCell label="Режим работы" className="max-w-none">
+        <Text>{scheduleDescription}</Text>
+      </CardCell>
+    </CardRow>
+  );
+};
+
+export const getBusinessSchedule = (scheduleDescription: string) => {
+  const weekDayMap = WEEKDAY_MAP.map(([, short]) => ({ short, status: true }));
+
+  const splittedScheduleDescription = scheduleDescription.split('/') ?? [];
+  const lastPartScheduleDescription =
+    splittedScheduleDescription[splittedScheduleDescription.length - 1]?.toLowerCase();
+
+  if (!lastPartScheduleDescription?.includes('выходной')) {
+    return weekDayMap;
+  }
+
+  return weekDayMap.map((_) => ({
+    ..._,
+    status: !lastPartScheduleDescription?.includes(_.short.toLowerCase()),
+  }));
+};
+
+export const renderAlternativeDay = ({ short, status }: WorkScheduleWeek, index: number) => (
+  <div
+    key={String(index)}
+    className={style(
+      'w-9 h-9 rounded-md flex items-center justify-center',
+      status ? 'bg-green-more-light text-green-dark' : 'bg-error/30 text-error',
+    )}
+  >
+    <Text size="text-xs">{short}</Text>
+  </div>
+);