@redneckz/wildless-cms-uni-blocks 0.5.11 → 0.5.13

package/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -1,85 +1,57 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks/core';
-import { SafeBoxCase, SafeBoxCaseVolume, useFetchSafeBoxes } from '../../hooks/useFetchSafeBoxes';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks/core';
+import { Branch, SafeBoxCase, SafeBoxCaseVolume } from '../../hooks/useSafeBoxes';
 import { SafeDepositRentalFields } from './SafeDepositRentalFields';
 import { SafeDepositRentalTotal } from './SafeDepositRentalTotal';
-import type { HandleChangeState, SafeDepositRentalState } from './SafeDepositRentalTypes';
+import type { SafeDepositRentalState } from './SafeDepositRentalTypes';
 import type { Region } from './useGetRegions';
-import { getBranch, getCoordinates } from './utils';
-
-const DEFAULT_DAYS = 26;
+import { getBranch } from './utils';
 
 export interface SafeDepositRentalFormProps {
-  regions?: Region[];
-  setPoints: (points: number[][]) => void;
-  toggleShowMap: () => void;
+  regions: Region[];
+  branches: Branch[];
+  data: SafeDepositRentalState;
+  onShowMapToggle: () => void;
+  onChange: (data: Partial<SafeDepositRentalState>) => void;
 }
 
 export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) => {
-  const [safeDepositState, setStateDepositState] = useState<SafeDepositRentalState>({
-    selectedRegion: '',
-    selectedBranch: '',
-    selectedCaseVolume: '',
-    selectedBoxSize: '',
-    days: DEFAULT_DAYS,
-    branches: [],
-  });
-
-  const resultBranches = useFetchSafeBoxes(safeDepositState.selectedRegion);
-
-  const handleChangeSafeDepositState: HandleChangeState = (state) =>
-    setStateDepositState((oldState) => ({ ...oldState, ...state }));
-
-  useEffect(
-    () =>
-      handleChangeSafeDepositState({
-        selectedRegion: getInitialValueSelectedRegion(props.regions),
-      }),
-    [props.regions],
-  );
-
-  useEffect(() => {
-    if (Array.isArray(resultBranches) && resultBranches.length) {
-      handleChangeSafeDepositState({ branches: resultBranches });
-      props.setPoints(getCoordinates(resultBranches));
-    }
-  }, [resultBranches]);
+  const { regions, data, branches, onChange, onShowMapToggle } = props;
 
   useEffect(() => {
-    handleChangeSafeDepositState({
+    onChange({
       selectedBranch: '',
       selectedCaseVolume: '',
       selectedBoxSize: '',
     });
-  }, [safeDepositState.selectedRegion]);
+  }, [data.selectedRegion, onChange]);
 
-  const branch = getBranch(safeDepositState.branches, safeDepositState.selectedBranch);
+  const branch = getBranch(branches, data.selectedBranch);
   const caseVolumes = getCaseVolumes(branch?.safeBoxCaseVolumes);
 
   const safeBoxCases = getCaseVolume(
     branch?.safeBoxCaseVolumes,
-    safeDepositState.selectedCaseVolume,
+    data.selectedCaseVolume,
   )?.safeBoxCases;
 
-  const tariffs = getTariffs(safeBoxCases, safeDepositState.selectedBoxSize);
+  const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
 
   return (
     <div className="flex justify-between align-top mb-6">
       <SafeDepositRentalFields
-        {...safeDepositState}
-        {...props}
+        {...data}
+        regions={regions}
+        onShowMapToggle={onShowMapToggle}
+        branches={branches}
         caseVolumes={caseVolumes}
         safeBoxCases={safeBoxCases}
-        onChange={handleChangeSafeDepositState}
+        onChange={onChange}
       />
-      <SafeDepositRentalTotal days={safeDepositState.days} tariffs={tariffs} />
+      <SafeDepositRentalTotal days={data.days} tariffs={tariffs} />
     </div>
   );
 });
 
-const getInitialValueSelectedRegion = (regions?: Region[]) =>
-  regions?.length && regions[0]?.code ? regions[0].code : '';
-
 const getCaseVolumes = (safeBoxCaseVolumes?: SafeBoxCaseVolume[]) =>
   safeBoxCaseVolumes?.length ? safeBoxCaseVolumes?.filter((_) => _?.safeBoxCases?.length) : [];
 

package/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Tariff } from '../../hooks/useFetchSafeBoxes';
+import type { Tariff } from '../../hooks/useSafeBoxes';
 import { Img } from '../../ui-kit/Img/Img';
 
 export interface SafeDepositRentalTotalProps {

package/src/components/SafeDepositRental/SafeDepositRentalTypes.ts

@@ -1,12 +1,9 @@
-import type { Branch } from '../../hooks/useFetchSafeBoxes';
-
 export interface SafeDepositRentalState {
   selectedRegion: string;
   selectedBranch: string;
   selectedCaseVolume: string;
   selectedBoxSize: string;
   days: number;
-  branches: Branch[];
 }
 
 export type HandleChangeState = (state: Partial<SafeDepositRentalState>) => void;

package/src/components/SafeDepositRental/utils.ts

@@ -1,4 +1,4 @@
-import type { Branch } from '../../hooks/useFetchSafeBoxes';
+import type { Branch } from '../../hooks/useSafeBoxes';
 
 export const getCoordinates = (data?: Branch | Branch[]): number[][] => {
   if (Array.isArray(data)) {

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -1,7 +1,9 @@
 import { context } from '../../react/setup-fixture';
 import { StepsBlock } from './StepsBlock';
+import type { Step } from './StepsBlockContent';
 
-const steps = [
+const ITEMS = ['item1', 'item2', 'item3', 'item4', 'item5'];
+const STEPS = [
   {
     label: 'Заявка на кредит',
     description: 'Оставьте онлайн-заявку на потребительский кредит',
@@ -20,6 +22,27 @@ const steps = [
   },
 ];
 
+const STEPS_WITH_LIST: Step[] = [
+  {
+    label: 'В мобильном приложении или интернет-банке',
+    description: 'Для всех клиентов Россельхозбанка',
+    icon: { icon: 'SignDocsIcon' },
+    items: ITEMS,
+  },
+  {
+    label: 'Через Госуслуги',
+    description: 'При наличии данных в Единой биометрической системе',
+    icon: { icon: 'ClockIcon' },
+    items: ITEMS,
+  },
+  {
+    label: 'В офисах Россельхозбанка',
+    description: 'Откройте вклад',
+    icon: { icon: 'ComfortableCompIcon' },
+    items: ITEMS,
+  },
+];
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -27,7 +50,7 @@ export default {
         className="col-span-12"
         context={context}
         title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-        steps={steps.slice(0, 3)}
+        steps={STEPS.slice(0, 3)}
         version="secondary"
       />
     </div>
@@ -90,20 +113,39 @@ export default {
           text: 'Отправить заявку',
           href: 'https://www.rshb.ru/',
           target: '_blank',
-          icon: { icon: 'ComfortableCompIcon' },
-          iconRight: { icon: 'ComfortableCompIcon' },
         }}
       />
     </div>
   ),
-
   '4 steps': (
     <div className="container grid grid-cols-12">
       <StepsBlock
         className="col-span-12"
         context={context}
         title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-        steps={steps}
+        steps={STEPS}
+      />
+    </div>
+  ),
+
+  'with list': (
+    <div className="container grid grid-cols-12">
+      <StepsBlock
+        className="col-span-12"
+        context={context}
+        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+        steps={STEPS_WITH_LIST}
+      />
+    </div>
+  ),
+  'with list secondary': (
+    <div className="container grid grid-cols-12">
+      <StepsBlock
+        className="col-span-12"
+        context={context}
+        version="secondary"
+        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+        steps={STEPS_WITH_LIST}
       />
     </div>
   ),

package/src/components/StepsBlock/StepsBlock.tsx

@@ -1,23 +1,23 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/ContentPageDef';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
 import { joinList } from '../../utils/joinList';
-import type { HandlerDecorator, Router } from '../ContentPage/ContentPageContext';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import type { StyleType } from './StepsBlockStyleMaps';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
-
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderStepContent } from './renderStepContent';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
 const getLineOpacity = (showLines: boolean) => (showLines ? '' : 'opacity-0');
 
+const getPaddingX = (steps: number) => (steps < 5 ? 'px-[88px]' : 'px-[55px]');
+
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
     className = '',
@@ -36,6 +36,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
     const shortGaps = steps.length > 3;
     const lineOpacity = getLineOpacity(showLines);
     const titleMargin = title ? 'mt-9' : '';
+    const paddingX = getPaddingX(steps.length);
 
     return (
       <BlockWrapper
@@ -51,18 +52,18 @@ export const StepsBlock = JSX<StepsBlockProps>(
         {...rest}
       >
         {title ? (
-          <Heading headingType="h2" className="max-w-[752px] text-center" title={title} />
+          <Heading headingType="h3" className="max-w-[752px] text-center" title={title} />
         ) : null}
         {steps?.length ? (
           <div className={`box-border ${titleMargin}`}>
-            <div className="flex items-center px-[88px]">
+            <div className={`flex items-center ${paddingX}`}>
               {joinList(<div className={`h-0.5 w-full bg-secondary-light ${lineOpacity}`} />)(
                 steps.map(renderStepIcon(styleMap)),
               )}
             </div>
             <div className={`flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`}>
               {steps.map(
-                renderStepTitle({
+                renderStepContent({
                   styleMap,
                   isMainButton: Boolean(button?.text),
                   version,
@@ -103,45 +104,3 @@ const renderStepIcon =
       </div>
     );
   };
-
-const renderStepTitle =
-  ({
-    styleMap,
-    isMainButton,
-    version,
-    router,
-    handlerDecorator,
-  }: {
-    styleMap: StyleType;
-    isMainButton: boolean;
-    version: BlockVersion;
-    router: Router;
-    handlerDecorator?: HandlerDecorator;
-  }) =>
-  (step: Step, i: number) => {
-    const additionalMarginClass = step?.label ? 'mt-2' : 'mt-4';
-
-    return (
-      <div
-        key={String(i)}
-        className="flex flex-col items-center justify-between text-center relative w-[276px]
-        whitespace-pre-line overflow-hidden"
-      >
-        {step?.label ? <div className="text-xl m-0 mt-4">{step.label}</div> : null}
-        {step?.description ? (
-          <div className={`text-l-light ${styleMap.description} ${additionalMarginClass}`}>
-            {step.description}
-          </div>
-        ) : null}
-        {step.button?.text && !isMainButton ? (
-          <Button
-            className="box-border mt-8 py-3 h-12 w-full max-w-[240px]"
-            {...useLink({ router, handlerDecorator }, step.button)}
-            version={version}
-          >
-            {step.button.text}
-          </Button>
-        ) : null}
-      </div>
-    );
-  };

package/src/components/StepsBlock/StepsBlock.ui.json

@@ -4,6 +4,14 @@
       "items": {
         "icon": {
           "ui:field": "icon"
+        },
+        "button": {
+          "icon": {
+            "ui:field": "icon"
+          },
+          "iconRight": {
+            "ui:field": "icon"
+          }
         }
       }
     }

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,8 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 import type { IconProps } from '../../model/Picture';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 
 /**
  * @title Шаг
@@ -12,6 +12,13 @@ export type Step = DescriptionProps &
   IconProps & {
     /** @title Кнопка */
     button?: ButtonWithIconProps;
+    /**
+     * @title Буллиты
+     * @default true
+     */
+    isDotted?: boolean;
+    /** @title Список */
+    items?: string[];
   };
 
 /**
@@ -26,7 +33,7 @@ export type StepsBlockContent = HeadlineCommonProps & {
   /**
    * @title Шаги
    * @minItems 2
-   * @maxItems 4
+   * @maxItems 5
    */
   steps?: Step[];
   /** @title Кнопка */

package/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -7,23 +7,26 @@ export type StyleType = {
   iconText: string;
   iconBackground: string;
   iconConnector: string;
+  dot: string;
 };
 
 export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
   primary: {
     background: 'bg-white',
     title: 'text-primary-text',
-    description: 'text-secondary-text',
+    description: '!text-secondary-text text-l-light',
     iconText: 'text-secondary-text',
     iconBackground: 'bg-main-divider',
     iconConnector: 'bg-secondary-light',
+    dot: 'bg-secondary-text',
   },
   secondary: {
     background: 'bg-primary-main',
     title: 'text-white',
-    description: 'text-white/80',
+    description: '!text-white/80 text-l-light',
     iconText: 'text-white',
     iconBackground: 'bg-white/30',
     iconConnector: 'bg-white',
+    dot: 'bg-white/80',
   },
 };

package/src/components/StepsBlock/renderItems.tsx

@@ -0,0 +1,26 @@
+import { List } from '../../ui-kit/List/List';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+export const renderItems = ({
+  items,
+  isDotted = true,
+  version = 'primary',
+  className = '',
+}: {
+  items?: string[];
+  isDotted?: boolean;
+  version?: BlockVersion;
+  className?: string;
+}) => {
+  const listVersion = version === 'primary' ? 'gray' : version;
+
+  return items ? (
+    <List
+      className={`mt-4 ${className}`}
+      version={listVersion}
+      items={items}
+      listItemSize="S"
+      isDotted={isDotted}
+    />
+  ) : null;
+};

package/src/components/StepsBlock/renderStepContent.tsx

@@ -0,0 +1,63 @@
+import { Button } from '../../ui-kit/Button/Button';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { HandlerDecorator, Router } from '../ContentPage/ContentPageContext';
+import type { Step } from './StepsBlockContent';
+import type { StyleType } from './StepsBlockStyleMaps';
+import { renderItems } from './renderItems';
+import { useLink } from '../../hooks/useLink';
+
+export const renderStepContent =
+  ({
+    styleMap,
+    isMainButton,
+    version,
+    router,
+    handlerDecorator,
+  }: {
+    styleMap: StyleType;
+    isMainButton: boolean;
+    version: BlockVersion;
+    router: Router;
+    handlerDecorator?: HandlerDecorator;
+  }) =>
+  (step: Step, i: number, { length }: { length: number }) => {
+    const { label, description, button, items, isDotted } = step;
+
+    const additionalMarginClass = `${button?.text ? 'mb-8' : ''} ${step?.label ? 'mt-2' : 'mt-4'}`;
+    const widthContainer = length < 5 ? 'w-[276px]' : 'w-[210px]';
+
+    return (
+      <div
+        key={String(i)}
+        className={`flex flex-col items-center text-center relative
+        whitespace-pre-line overflow-hidden ${widthContainer}`}
+      >
+        {renderStepLabel(label)}
+        {renderStepDescription({
+          description,
+          className: `${styleMap.description} ${additionalMarginClass}`,
+        })}
+        {renderItems({ items, isDotted, version, className: styleMap.description })}
+        {button?.text && !isMainButton ? (
+          <Button
+            className="box-border py-3 h-12 w-full max-w-[240px] mt-auto"
+            {...useLink({ router, handlerDecorator }, button)}
+            version={version}
+          >
+            {button.text}
+          </Button>
+        ) : null}
+      </div>
+    );
+  };
+
+const renderStepLabel = (label?: string) =>
+  label ? <div className="text-x6 m-0 mt-4">{label}</div> : null;
+
+const renderStepDescription = ({
+  description,
+  className = '',
+}: {
+  description?: string;
+  className?: string;
+}) => (description ? <div className={className}>{description}</div> : null);

package/src/components/TariffsTable/EmbeddableCellData.mobile.tsx

@@ -5,7 +5,6 @@ import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
 import type { LabelDescriptionCell } from './TariffsTableContent';
-import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
 
 export type EmbeddableCellDataType =
   | ButtonContent
@@ -16,17 +15,14 @@ export type EmbeddableCellDataType =
 const renderButtonsCellData = ({ buttons }: ButtonContent) =>
   buttons && buttons?.length ? (
     <div>
-      {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
+      {buttons.map(({ rounded, appendLeft, ariaLabel, ...buttonProps }, idx) => (
         <Button
-          className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
+          className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${appendLeft ? 'w-12 h-12' : ''}`}
           key={String(idx)}
-          ariaLabel={getButtonAriaLabel(icon)}
+          appendLeft={appendLeft}
           rounded={rounded}
-          appendLeft={
-            icon?.src || icon?.icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null
-          }
+          ariaLabel={ariaLabel}
           {...buttonProps}
-          aria-label={icon}
         />
       ))}
     </div>

package/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -10,7 +10,6 @@ import { TariffsTableInnerEvent } from '../../ui-kit/InnerTable/InnerTableProps'
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
 import type { LabelDescriptionCell, TariffsTableCellIndexProps } from './TariffsTableContent';
-import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
 
 export type EmbeddableCellDataType =
   | LabelDescriptionCell
@@ -22,15 +21,11 @@ export type EmbeddableCellDataType =
 const renderButtonsCellData = ({ buttons }: ButtonContent) =>
   buttons && buttons?.length ? (
     <div>
-      {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
+      {buttons.map(({ rounded, ...buttonProps }, idx) => (
         <Button
           className={`${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`}
           key={String(idx)}
-          ariaLabel={getButtonAriaLabel(icon)}
           rounded={rounded}
-          appendLeft={
-            icon?.src || icon?.icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null
-          }
           {...buttonProps}
         />
       ))}
@@ -38,12 +33,12 @@ const renderButtonsCellData = ({ buttons }: ButtonContent) =>
   ) : null;
 
 const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => {
-  const labelClassName = `text-h6 font-medium m-0 ${description ? 'mb-1' : ''}`;
+  const labelClassName = `text-h6 m-0 ${description ? 'mb-1' : ''}`;
 
   return (
     <div>
       {label ? <div className={labelClassName}>{label}</div> : null}
-      {description ? <div className="text-s text-secondary-text">{description}</div> : null}
+      {description ? <div className="text-secondary-text text-l-light">{description}</div> : null}
     </div>
   );
 };
@@ -52,8 +47,8 @@ const renderImgCellData = ({ image }: ImageContent) => (image?.src ? <Img image=
 
 const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
   <List
-    className="flex flex-col justify-between items-start text-sm"
-    version="gray"
+    className="flex flex-col justify-between items-start text-h6"
+    version="primary"
     isDotted={isDotted ?? true}
     {...rest}
   />