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

package/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/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/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/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/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>
+);

package/src/components/OfficesAtmsMap/renderOfficeCard.tsx

@@ -3,22 +3,10 @@ import { Text } from '../../ui-kit/Text/Text';
 import { Badge } from './Badge';
 import { CardCell } from './CardCell';
 import { CardRow } from './CardRow';
-import {
-  type Branch,
-  type Currency,
-  type WorkSchedule,
-  type WorkScheduleWeek,
-} from './OfficesAtmsMapProps';
-
-const WEEKDAY_MAP = [
-  ['Понедельник', 'workingMonday'],
-  ['Вторник', 'workingTuesday'],
-  ['Среда', 'workingWednesday'],
-  ['Четверг', 'workingThursday'],
-  ['Пятница', 'workingFriday'],
-  ['Суббота', 'workingSaturday'],
-  ['Воскресенье', 'workingSunday'],
-];
+import { getScheduleDescription } from './getScheduleDescription';
+import { getWorkScheduleWeek } from './getWorkScheduleWeek';
+import { type Branch, type Currency, type WorkScheduleWeek } from './OfficesAtmsMapProps';
+import { renderAlternativeDay, renderBusinessSchedule } from './renderBusinessSchedule';
 
 const currentWeekDayIdx = new Date().getDay();
 
@@ -37,14 +25,20 @@ export const renderOfficeCard = (
   }: Branch,
   index: number,
 ) => {
-  const workScheduleWeek = workSchedule ? getWorkScheduleWeek(workSchedule) : null;
-  const [currentWeekDay] = workScheduleWeek?.slice(currentWeekDayIdx - 1) ?? [];
+  if (!workSchedule) {
+    return null;
+  }
+
+  const workScheduleWeek = getWorkScheduleWeek(workSchedule);
+  const labelSchedule = workSchedule?.businessScheduleVisibleTag
+    ? 'Для физических лиц'
+    : 'Для физических и юридических лиц';
 
   return (
     <div key={String(index)} className="bg-white col-span-12 p-3xl border-green border">
       <div className="flex justify-between">
         <Text size="text-h4">{name}</Text>
-        {renderCurrentDaySchedule(currentWeekDay)}
+        {renderCurrentDaySchedule(workScheduleWeek)}
       </div>
       {address ? (
         <div className="flex pb-xl pt-xs gap-2xs">
@@ -60,7 +54,23 @@ export const renderOfficeCard = (
         <CardCell label="Для консультаций по валютному контролю" value={phoneCurrencyControl} />
         <CardCell label="Контакт-центр" value={phoneCallCentre} />
       </CardRow>
-      {workScheduleWeek?.length ? <CardRow>{workScheduleWeek?.map(renderDay)}</CardRow> : null}
+      {workSchedule.isMatchesPattern ? (
+        <CardRow>
+          <CardCell label={labelSchedule} labelSize="text-l" className="w-full max-w-none">
+            <div className="flex justify-between pt-xs">{workScheduleWeek?.map(renderDay)}</div>
+          </CardCell>
+        </CardRow>
+      ) : (
+        <CardRow>
+          <CardCell label={labelSchedule} labelSize="text-l">
+            <div className="flex gap-1">{workScheduleWeek?.map(renderAlternativeDay)}</div>
+          </CardCell>
+          {getScheduleDescription(workScheduleWeek)}
+        </CardRow>
+      )}
+      {workSchedule?.businessScheduleVisibleTag
+        ? renderBusinessSchedule(workSchedule?.businessScheduleDescription)
+        : null}
       {exchangeRate?.currencies?.length ? (
         <CardRow className="flex-wrap">{exchangeRate?.currencies?.map(renderCurrency)}</CardRow>
       ) : null}
@@ -68,21 +78,6 @@ export const renderOfficeCard = (
   );
 };
 
-const getWorkScheduleWeek = (workSchedule?: WorkSchedule): WorkScheduleWeek[] =>
-  WEEKDAY_MAP.map(([title, key]) => {
-    const dayOff = ['workingSaturday', 'workingSunday'].includes(key);
-
-    return {
-      title,
-      status: Boolean(workSchedule?.[key]),
-      workTime: dayOff ? workSchedule?.workTimeSaturday : workSchedule?.workTime,
-      lunchHour: dayOff ? workSchedule?.lunchHourSaturday : workSchedule?.lunchHour,
-      get hasLunch() {
-        return /\d+/.test(this.lunchHour ?? '');
-      },
-    };
-  });
-
 export const renderCurrency = (
   { currency, buyExchangeRate, saleExchangeRate }: Currency,
   i: number,
@@ -95,17 +90,19 @@ export const renderCurrency = (
 );
 
 //TODO: Add logic time https://github.com/redneckz/wildless-cms-uni-blocks/pull/1549
-export const renderCurrentDaySchedule = (workScheduleWeek?: WorkScheduleWeek) => {
-  if (!workScheduleWeek) {
+export const renderCurrentDaySchedule = (workScheduleWeek?: WorkScheduleWeek[]) => {
+  const [currentWeekDay] = workScheduleWeek?.slice(currentWeekDayIdx - 1) ?? [];
+
+  if (!currentWeekDay) {
     return null;
   }
 
-  const { lunchHour, status, workTime, hasLunch } = workScheduleWeek;
+  const { lunchHour, status, workTime, hasLunch } = currentWeekDay;
 
   return status ? (
-    <div className="flex gap-s">
+    <div className="flex gap-s items-start whitespace-nowrap">
       {workTime ? <Badge color="green">{workTime}</Badge> : null}
-      {lunchHour && hasLunch ? <Badge color="yellow">{lunchHour}</Badge> : null}
+      {lunchHour && hasLunch ? <Badge color="yellow">{`перерыв: ${lunchHour}`}</Badge> : null}
     </div>
   ) : (
     <Badge color="red">Выходной</Badge>
@@ -120,7 +117,15 @@ export const renderDay = (
     key={String(index)}
     label={title}
     value={status && workTime ? workTime : ''}
-    subText={!status ? 'Выходной' : lunchHour}
+    subText={getSubTextLunch(lunchHour, hasLunch, status)}
     subColor={!status || hasLunch ? 'text-error' : 'text-green-dark'}
   />
 );
+
+const getSubTextLunch = (lunchHour?: string, hasLunch = false, status = false) => {
+  if (!status) {
+    return 'Не работает';
+  }
+
+  return lunchHour && hasLunch ? `Перерыв ${lunchHour}` : lunchHour;
+};

package/src/components/ProductBlock/ProductBlock.fixture.mobile.tsx

@@ -89,6 +89,48 @@ export default {
       <ProductBlock className="col-span-12" {...props} benefits={benefits} label={label} />
     </div>
   ),
+  'primary with insurance': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        isFullWidthTitle={true}
+        align="text-center"
+        headlineVersion="M"
+        title="Страховые риски и продукты"
+        description="Покрываемые риски программы «Защита вас и ваших близких»"
+        image={image}
+        benefits={[
+          {
+            type: 'default',
+            label: 'Телесное повреждение',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+          {
+            type: 'default',
+            label: 'Госпитализация застрахованного',
+            description: 'Описание',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+          {
+            type: 'default',
+            label:
+              'Сокращение численности работников организации и другой текст для теста длинны текста',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+          {
+            type: 'default',
+            label: 'Смерть застрахованного',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+        ]}
+        priceList={[
+          { label: 'Страховая сумма', amount: 500000 },
+          { label: 'Ежемесячный лимит', amount: 25000 },
+        ]}
+        imageOptions={{ directionRight: false }}
+      />
+    </div>
+  ),
   secondary: (
     <div className="container grid grid-cols-12">
       <ProductBlock className="col-span-12" {...props} benefits={benefits} version="secondary" />

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -146,6 +146,48 @@ export default {
       />
     </div>
   ),
+  'primary with insurance': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        isFullWidthTitle={true}
+        align="text-center"
+        headlineVersion="M"
+        title="Страховые риски и продукты"
+        description="Покрываемые риски программы «Защита вас и ваших близких»"
+        image={image}
+        benefits={[
+          {
+            type: 'default',
+            label: 'Телесное повреждение',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+          {
+            type: 'default',
+            label: 'Госпитализация застрахованного',
+            description: 'Описание',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+          {
+            type: 'default',
+            label:
+              'Сокращение численности работников организации и другой текст для теста длинны текста',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+          {
+            type: 'default',
+            label: 'Смерть застрахованного',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+        ]}
+        priceList={[
+          { label: 'Страховая сумма', amount: 500000 },
+          { label: 'Ежемесячный лимит', amount: 25000 },
+        ]}
+        imageOptions={{ directionRight: false }}
+      />
+    </div>
+  ),
   'secondary with back button': (
     <div className="container grid grid-cols-12">
       <ProductBlock

package/src/components/StepsBlock/StepsBlock.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { AlignStyles } from '../../model/AlignStyles';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -20,15 +21,16 @@ const getPaddingX = (steps: number) => (steps < 5 ? 'px-24' : 'px-16');
 
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
+    align = AlignStyles,
+    buttons,
     className = '',
+    description,
     showLines = true,
-    steps = [],
-    buttons,
     size = 'normal',
-    version = 'primary',
+    steps = [],
     stepVersion = 'gray',
     title,
-    description,
+    version = 'primary',
     ...rest
   }) => {
     const shortGaps = steps.length > 3;
@@ -56,6 +58,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
           description={description}
           isEmbedded={true}
           className="w-full"
+          align={align}
         />
         {steps?.length ? (
           <div className="box-border space-y-lg">

package/src/hooks/useResizeObserver.ts

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+
+export function useResizeObserver<T extends HTMLDivElement, Deps extends any[] = []>(
+  callback: (target: T, entry: ResizeObserverEntry) => void,
+  deps: Deps,
+) {
+  const ref = useRef<T | null>(null);
+
+  useEffect(() => {
+    const element = ref?.current;
+
+    if (!element) {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      callback(element, entries[0]);
+    });
+
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [callback, ...deps]);
+
+  return ref;
+}

package/src/ui-kit/BaseProductTile/BaseProductTile.tsx

@@ -8,6 +8,7 @@ import { BenefitsList } from '../BenefitsList/BenefitsList';
 import { renderButtonsSection } from '../Button/renderButtonsSection';
 import { Img } from '../Img/Img';
 import { List } from '../List/List';
+import { PriceList } from '../PriceList/PriceList';
 import { RichText } from '../RichText/RichText';
 import { Tags } from '../Tags/Tags';
 import { type TextAlign } from '../Text/TextProps';
@@ -31,6 +32,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     isFullWidthTitle,
     items,
     isDotted = true,
+    priceList = [],
     listItemSize,
     tags = [],
     buttons,
@@ -74,6 +76,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
             <List items={items} isDotted={isDotted} listItemSize={listItemSize} />
           ) : null}
           {children}
+          {priceList?.length ? <PriceList priceList={priceList} /> : null}
           {renderTags(tags)}
         </div>
       </BaseTile>

package/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -20,6 +20,16 @@ export interface TileImageOptions {
   isImageAlwaysOnRight?: boolean;
 }
 
+export interface PriceItem {
+  label?: string;
+  amount?: number;
+  unit?: string;
+}
+
+export interface PriceListProps {
+  priceList?: PriceItem[];
+}
+
 export type BaseProductTileContent = HeadlineProps &
   BenefitsListContent &
   RichTextProps &
@@ -28,7 +38,8 @@ export type BaseProductTileContent = HeadlineProps &
   TagsContent &
   ButtonsSectionContent &
   ImageContent &
-  LabelProps & {
+  LabelProps &
+  PriceListProps & {
     imageOptions?: TileImageOptions;
     /** @title Заголовок во всю ширину */
     isFullWidthTitle?: boolean;

package/src/ui-kit/DatePicker/DatePicker.tsx

@@ -67,7 +67,9 @@ export const DatePicker = JSX<DatePickerProps>(
 
     return (
       <div className={style(className, 'relative')} ref={ref}>
-        <Text size="text-m">{label}</Text>
+        <Text size="text-m" font-weight="font-light">
+          {label}
+        </Text>
         {renderDatePickerForm(handleChangeVisibleCalendar, value, valid)}
         {showCalendar ? (
           <div className="absolute bg-white z-10 select-none">

package/src/ui-kit/Foldable/FoldableSection.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 
 export interface FoldableSectionProps {
   className?: string;
@@ -9,23 +10,27 @@ export interface FoldableSectionProps {
 export const FoldableSection = JSX<FoldableSectionProps>(
   ({ className = '', isUnfolded, children }) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
-
-    useEffect(() => {
-      if (containerRef.current) {
-        containerRef.current.style.maxHeight = isUnfolded
-          ? `${containerRef.current.scrollHeight}px`
-          : '';
-      }
-    }, [isUnfolded, children?.length]);
+    const childrenWrapperRef = useResizeObserver(
+      (childrenWrapperEl) => {
+        if (containerRef.current) {
+          containerRef.current.style.maxHeight = isUnfolded
+            ? `${childrenWrapperEl.scrollHeight}px`
+            : '';
+        }
+      },
+      [isUnfolded],
+    );
 
     return (
       <div
         ref={containerRef}
         className={`transition-max-h duration-300 overflow-hidden ${
           containerRef.current || !isUnfolded ? 'max-h-0' : ''
-        } ${className}`}
+        } `}
       >
-        {children}
+        <div className={className} ref={childrenWrapperRef}>
+          {children}
+        </div>
       </div>
     );
   },

package/src/ui-kit/PriceList/PriceList.fixture.tsx

@@ -0,0 +1,16 @@
+import '../../setup-fixture';
+
+import { PriceList } from './PriceList';
+
+const priceList = [
+  { label: 'PriceListItem #1', amount: 25000 },
+  { label: 'PriceListItem #2', amount: 500000 },
+];
+
+export default {
+  'primary dotted (default)': (
+    <div className="bg-white p-6xl">
+      <PriceList priceList={priceList} />
+    </div>
+  ),
+};