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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/ui-kit/List/List.tsx

@@ -4,7 +4,7 @@ import { type ListItemSize } from './ListContent';
 import { ListItem } from './ListItem';
 import { type ListProps } from './ListProps';
 
-const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
+export const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
   XS: 'text-m font-light',
   S: 'text-l font-light',
   M: 'text-h6',

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

@@ -0,0 +1,25 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { Text } from '../Text/Text';
+import { type PriceItem, type PriceListProps } from './PriceListProps';
+
+export const PriceList = JSX<PriceListProps>(({ priceList }) =>
+  priceList?.length ? (
+    <div className="flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-xl">
+      {priceList.map(renderPriceListItem)}
+    </div>
+  ) : null,
+);
+
+const renderPriceListItem = ({ label, amount }: PriceItem) => (
+  <div className="basis-full flex flex-col-reverse sm:flex-row sm:justify-between sm:bg-main-divider sm:py-m sm:px-lg sm:rounded-md items-baseline whitespace-pre">
+    <Text font="font-light" size="text-l" color="text-secondary-text">
+      {label}
+    </Text>
+    {amount ? (
+      <span className="font-sans text-h6 sm:text-primary-main text-primary-text">
+        {toLocalNumberFormat(2)(amount)} ₽
+      </span>
+    ) : null}
+  </div>
+);

package/mobile/src/ui-kit/PriceList/PriceListProps.ts

@@ -0,0 +1,11 @@
+import { type LabelProps } from '../../model/HeadlineType';
+
+export type PriceItem = LabelProps & {
+  /** @title Значение поля */
+  amount?: number;
+};
+
+export interface PriceListProps {
+  /** @title Список цен */
+  priceList?: PriceItem[];
+}

package/mobile/src/ui-kit/Select/Select.tsx

@@ -51,6 +51,7 @@ export const Select = JSX<SelectProps>(
       query,
       onChange,
       onClose: handleClose,
+      iconVersion,
     });
 
     return (

package/mobile/src/ui-kit/Select/SelectPopup.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 import { filterOptions } from './filterOptions';
@@ -6,42 +7,48 @@ import { formatOption } from './formatOption';
 import { type Option } from './Option';
 
 export interface SelectPopupProps {
-  popupRef?: { current: HTMLDivElement | null };
+  iconVersion?: IconVersion;
+  onChange?: (option: Option) => void;
   options?: Option[];
-  value?: Option;
+  popupRef?: { current: HTMLDivElement | null };
   query?: string;
-  onChange?: (option: Option) => void;
+  value?: Option;
 }
 
-export const SelectPopup = JSX<SelectPopupProps>(({ popupRef, options, value, query, onChange }) =>
-  options?.length ? (
-    <div
-      className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md"
-      role="listbox"
-      ref={popupRef}
-    >
-      {filterOptions(options, query).map((option) => (
-        <div
-          key={option.key}
-          className="flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative"
-          role="option"
-          aria-selected={option.key === value?.key}
-          onClick={(e) => {
-            e.stopPropagation();
-            if (onChange) {
-              onChange(option);
-            }
-          }}
-        >
-          <span className="min-h-6">{formatOption(option)}</span>
-          <Icon
-            name="DoneSimpleIcon"
-            width="16"
-            height="16"
-            className={style('absolute right-4 pt-3xs', option.key === value?.key ? '' : 'hidden')}
-          />
-        </div>
-      ))}
-    </div>
-  ) : null,
+export const SelectPopup = JSX<SelectPopupProps>(
+  ({ popupRef, options, value, query, onChange, iconVersion }) =>
+    options?.length ? (
+      <div
+        className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md"
+        role="listbox"
+        ref={popupRef}
+      >
+        {filterOptions(options, query).map((option) => (
+          <div
+            key={option.key}
+            className="flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative"
+            role="option"
+            aria-selected={option.key === value?.key}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (onChange) {
+                onChange(option);
+              }
+            }}
+          >
+            <span className="min-h-6">{formatOption(option)}</span>
+            <Icon
+              name="DoneSimpleIcon"
+              width="16"
+              height="16"
+              iconVersion={iconVersion}
+              className={style(
+                'absolute right-4 pt-3xs',
+                option.key === value?.key ? '' : 'hidden',
+              )}
+            />
+          </div>
+        ))}
+      </div>
+    ) : null,
 );

package/mobile/src/ui-kit/Select/useSelectPopup.tsx

@@ -16,6 +16,7 @@ export function useSelectPopup({
   query,
   onChange,
   onClose,
+  iconVersion,
 }: SelectPopupOptions) {
   const popup = usePopupManager();
 
@@ -50,6 +51,7 @@ export function useSelectPopup({
         value={value}
         query={query}
         onChange={handleChange}
+        iconVersion={iconVersion}
       />,
       {
         top: top + window.scrollY + height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.29",
+  "version": "0.14.31",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -243,4 +243,4 @@
       "optional": true
     }
   }
-}
+}

package/src/common.css

@@ -8,6 +8,7 @@ html {
 * {
   --color-green: 78, 190, 81;
   --color-green-light: 131, 184, 62;
+  --color-green-more-light: 219, 242, 219;
   --color-green-dark: 66, 171, 68;
   --color-green-more-dark: 39, 148, 41;
   --color-yellow: 221, 182, 61;

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -5,7 +5,9 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
 import { Img } from '../../ui-kit/Img/Img';
+import { TEXT_SIZE_MAP } from '../../ui-kit/List/List';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import {
   type BenefitBlockItemProps,
   type BenefitsBlockContent,
@@ -84,14 +86,15 @@ const renderListBenefit = (description?: ListBenefitDef) => {
   const listStyleType = description?.bullets ? 'list-disc pl-3xl' : '';
 
   return description?.items && description.items.length > 0 ? (
-    <ul className={listStyleType}>
+    <ul
+      className={style(
+        listStyleType,
+        description.listItemSize ? TEXT_SIZE_MAP[description.listItemSize] : '',
+      )}
+    >
       {description.items.map((_, i) => (
         <li key={`benefitListItem-${i}`}>
-          <Text
-            size="text-l"
-            color="text-secondary-text group-data-secondary:text-white/80"
-            font="font-light"
-          >
+          <Text color="text-secondary-text group-data-secondary:text-white/80" font="font-light">
             {_}
           </Text>
         </li>

package/src/components/Blocks.mobile.ts

@@ -25,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';
@@ -69,7 +68,6 @@ export const Blocks: BlocksRegistry = {
   ImgBlock,
   LinkDocs,
   MobileAppTile,
-  PictureText,
   Placeholder,
   ProductBlock,
   ProductGallery,

package/src/components/Blocks.ts

@@ -34,7 +34,6 @@ import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { MortgageFiltration } from './MortgageFiltration/MortgageFiltration';
 import { OfficesAtmsMap } from './OfficesAtmsMap/OfficesAtmsMap';
 import { ParagraphBlock } from './ParagraphBlock/ParagraphBlock';
-import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
@@ -89,7 +88,6 @@ export const Blocks: BlocksRegistry = {
   MortgageFiltration,
   OfficesAtmsMap,
   ParagraphBlock,
-  PictureText,
   Placeholder,
   ProductBlock,
   ProductGallery,

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

@@ -85,6 +85,21 @@ export default {
             buttons: [sendRequestButton, detailsButton],
           },
         },
+        {
+          nav: {
+            title: 'Рефинансирование',
+          },
+          calculatorBlock: {
+            calcType: 'RefinancingCalculatorForm',
+            paramsViewSettings: {
+              isShowSalaryClient: true,
+              isShowInsurance: true,
+            },
+            buttons: [sendRequestButton],
+            footnote:
+              'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+          },
+        },
       ]}
     />
   ),

package/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/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="Получаю зарплату на счёт в Россельхозбанке"