@redneckz/wildless-cms-uni-blocks 0.4.6 → 0.4.8

package/mobile/src/components/OfficeServicesBlock/OfficeServicesBlockContent.ts

@@ -0,0 +1,26 @@
+import type { Picture } from '../../model/Picture';
+
+export interface OfficeServicesBlockList {
+  /**
+   *  @title Иконка
+   *  @default {
+   *   "size": {
+   *     "width": 24,
+   *     "height": 24
+   *   },
+   *   "format": "webp"
+   * }
+   */
+  icon?: Picture;
+  text?: string;
+}
+
+/**
+ * @title Офисные услуги
+ */
+export interface OfficeServicesBlockContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Список услуг */
+  servicesList?: OfficeServicesBlockList[];
+}

package/mobile/src/components/PictureText/PictureText.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
-import type { PictureTextContent } from './PictureTextContent';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../types';
+import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
-import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
-import { Headline } from '../Headline/Headline';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import { Headline } from '../Headline/Headline';
+import type { PictureTextContent } from './PictureTextContent';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -42,7 +42,7 @@ export const PictureText = JSX<PictureTextProps>(
           align="center"
         />
         <div className={'flex justify-center gap-[122px] mt-[30px]'}>
-          {image?.src && <Img className={directionRight ? 'order-2 ml-6' : 'mr-6'} image={image} />}
+          {image?.src ? <Img className={directionRight ? 'order-2' : ''} image={image} /> : null}
           <div className="w-[558px] m-auto">
             {benefits?.length ? (
               <div className="flex flex-col gap-4">{benefits.map(renderBenefit(version))}</div>

package/mobile/src/components/Recommendation/RecommendationCard.tsx

@@ -33,22 +33,24 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
           title={tileTitle}
           image={tileImage}
         >
-          {description ? <Description className="mb-2" description={description} /> : null}
-          {items?.length ? (
-            <List
-              className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
-              items={items}
-              version={version}
-            />
-          ) : null}
-          {socialMedia ? (
-            <SocialMedia
-              className="pt-[42px] pb-0"
-              media={socialMedia}
-              version={version}
-              context={context}
-            />
-          ) : null}
+          <div className="h-full flex flex-col justify-between">
+            {description ? <Description className="mb-2" description={description} /> : null}
+            {items?.length ? (
+              <List
+                className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
+                items={items}
+                version={version}
+              />
+            ) : null}
+            {socialMedia ? (
+              <SocialMedia
+                className="pt-10 pb-0"
+                media={socialMedia}
+                version={version}
+                context={context}
+              />
+            ) : null}
+          </div>
         </BaseTile>
       </section>
     );

package/mobile/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Branch } from './SafeDepositRentalContent';
+import { Region } from './useGetRegions';
+import { WrapperSelect } from './WrapperSelect';
+
+interface RegionsAndBranchesProps {
+  regions?: Region[];
+  selectedRegion: string;
+  onSelectedRegion: (value: string) => void;
+  branches?: Branch[];
+  selectedBranch: string;
+  onSelectedBranch: (value: string) => void;
+}
+
+export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
+  ({
+    regions = [],
+    selectedRegion,
+    onSelectedRegion: onSelectedRegion,
+    branches = [],
+    selectedBranch,
+    onSelectedBranch,
+  }) => {
+    return (
+      <div className="flex justify-between mb-6">
+        <div className="w-full mr-4">
+          <WrapperSelect
+            data={regions}
+            fieldValue="code"
+            fieldLabel="name"
+            selected={selectedRegion}
+            setSelected={onSelectedRegion}
+            label="Город"
+          />
+        </div>
+        <div className="w-full">
+          <WrapperSelect
+            data={branches}
+            fieldValue="branchCode"
+            fieldLabel="address"
+            selected={selectedBranch}
+            setSelected={onSelectedBranch}
+            label="Отделение"
+            placeholder="Выберите отделение"
+          />
+        </div>
+      </div>
+    );
+  },
+);

package/mobile/src/components/SafeDepositRental/RenderRadioButtons.tsx

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks/core';
+import { Radio } from '../../ui-kit/Radio/Radio';
+
+export const RenderRadioButtons = JSX(() => {
+  const [selectedOption, setSelectedOption] = useState('option1');
+
+  const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelectedOption(_.target.value);
+
+  return (
+    <div>
+      <Radio
+        className="mb-2"
+        name="contractType"
+        text="Простое хранение"
+        value="option1"
+        checked={selectedOption === 'option1'}
+        onChange={onChange}
+      />
+      <Radio
+        name="contractType"
+        text="Сделка с недвижимостью"
+        value="option2"
+        checked={selectedOption === 'option2'}
+        onChange={onChange}
+      />
+    </div>
+  );
+});

package/mobile/src/components/SafeDepositRental/RentalPeriod.tsx

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+
+const ITEMS = ['От 1 дня', 'До 365 дней'];
+const MIN = 1;
+const MAX = 365;
+
+interface RentalPeriodProps {
+  days: number;
+  setDays: (value: number) => void;
+}
+
+export const RentalPeriod = JSX<RentalPeriodProps>(({ days, setDays }) => (
+  <div className="mb-6">
+    <span className="block text-m-light mb-[3px]">Срок аренды</span>
+    <InputRange min={MIN} max={MAX} value={days} items={ITEMS} onChange={setDays} />
+  </div>
+));

package/mobile/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -0,0 +1,48 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { SafeBoxCase, SafeBoxCaseVolume } from './SafeDepositRentalContent';
+import { WrapperSelect } from './WrapperSelect';
+
+interface SafeBoxCasesProps {
+  caseVolumes?: SafeBoxCaseVolume[];
+  selectedCaseVolume: string;
+  onSelectedCaseVolume: (value: string) => void;
+  safeBoxCases?: SafeBoxCase[];
+  selectedBoxSize: string;
+  onSelectedBoxSize: (value: string) => void;
+}
+
+export const SafeBoxCases = JSX<SafeBoxCasesProps>(
+  ({
+    caseVolumes = [],
+    selectedCaseVolume,
+    onSelectedCaseVolume,
+    safeBoxCases = [],
+    selectedBoxSize,
+    onSelectedBoxSize,
+  }) => {
+    return (
+      <div className="flex justify-between mb-6">
+        <div className="mr-4 w-full">
+          <WrapperSelect
+            data={caseVolumes}
+            fieldLabel="volume"
+            selected={selectedCaseVolume}
+            setSelected={onSelectedCaseVolume}
+            label="Размер"
+            placeholder="Выберите размер"
+          />
+        </div>
+        <div className="w-full">
+          <WrapperSelect
+            data={safeBoxCases}
+            fieldLabel="safeBoxCasesSize"
+            selected={selectedBoxSize}
+            setSelected={onSelectedBoxSize}
+            label="Параметры ячейки, мм (ВхШхД)"
+            placeholder="Выберите параметр ячейки"
+          />
+        </div>
+      </div>
+    );
+  },
+);

package/mobile/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -1,93 +1,23 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { SafeDepositRentalContent } from './SafeDepositRentalContent';
 import { SafeDepositRentalForm } from './SafeDepositRentalForm';
-import { SafeDepositRentalTotal } from './SafeDepositRentalTotal';
+import { useGetRegions } from './useGetRegions';
 
 export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
 
-const DEFAULT_DAYS = 26;
-
-const DATA = {
-  cities: [
-    {
-      city: 'Москва',
-      offices: [
-        {
-          office: 'выберите отделение',
-          rate: null,
-        },
-        {
-          office: 'МоскваОфис1',
-          rate: 1,
-        },
-        {
-          office: 'МоскваОфис2',
-          rate: 2,
-        },
-        {
-          office: 'МоскваОфис3',
-          rate: 3,
-        },
-      ],
-    },
-    {
-      city: 'Краснодар',
-      offices: [
-        {
-          office: 'КраснодарОфис1',
-          rate: 2,
-        },
-        {
-          office: 'КраснодарОфис2',
-          rate: 4,
-        },
-        {
-          office: 'КраснодарОфис3',
-          rate: 6,
-        },
-      ],
-    },
-  ],
-  cellDimensions: [
-    {
-      dimension: 'маленькая',
-    },
-    {
-      dimension: 'средняя',
-    },
-    {
-      dimension: 'большая',
-    },
-  ],
-  cellOptions: [
-    {
-      option: '125x225x375',
-    },
-    {
-      option: '200x300x400',
-    },
-    {
-      option: '300x400x500',
-    },
-  ],
-};
-
 export const SafeDepositRental = JSX<SafeDepositRentalProps>(
-  ({ context, className = '', ...rest }) => {
-    const [days, setDays] = useState(DEFAULT_DAYS);
-    const data = DATA;
+  ({ title, context, className = '', ...rest }) => {
+    const regions = useGetRegions();
 
     return (
       <BlockWrapper context={context} className={`bg-white px-8 py-12 ${className}`} {...rest}>
-        <div className="flex justify-between align-top mb-6">
-          {data?.cities?.length ? (
-            <SafeDepositRentalForm {...data} days={days} setDays={setDays} />
-          ) : null}
-          <SafeDepositRentalTotal days={days} />
-        </div>
+        {title ? (
+          <Heading title={title} headingType="h3" as="h2" className="mb-2.5 text-center" />
+        ) : null}
+        <SafeDepositRentalForm regions={regions} />
         <p className="text-s-light text-secondary-text">
           Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
           или процедуры ипотечной сделки

package/mobile/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -1,3 +1,24 @@
+export interface Tariff {
+  tariffType?: string;
+  tariffValue?: number;
+}
+
+export interface SafeBoxCase {
+  safeBoxCasesSize?: string;
+  tariffs?: Tariff[];
+}
+
+export interface SafeBoxCaseVolume {
+  volume?: string;
+  safeBoxCases?: SafeBoxCase[];
+}
+
+export interface Branch {
+  branchCode?: string;
+  address?: string;
+  safeBoxCaseVolumes?: SafeBoxCaseVolume[];
+}
+
 /**
  * @title Аренда сейфовых ячеек
  */

package/mobile/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -1,164 +1,107 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import { UniBlockProps } from '../../types';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks/core';
 import { Button } from '../../ui-kit/Button/Button';
-import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { Radio } from '../../ui-kit/Radio/Radio';
-import { Select } from '../../ui-kit/Select/Select';
-import { SelectOption } from '../../ui-kit/Select/SelectOption';
+import { fetchBranches } from './fetchBranches';
+import { RegionsAndBranches } from './RegionsAndBranches';
+import { RenderRadioButtons } from './RenderRadioButtons';
+import { RentalPeriod } from './RentalPeriod';
+import { SafeBoxCases } from './SafeBoxCases';
+import { Branch, SafeBoxCase, SafeBoxCaseVolume } from './SafeDepositRentalContent';
+import { SafeDepositRentalTotal } from './SafeDepositRentalTotal';
+import type { Region } from './useGetRegions';
+
+export interface SafeDepositRentalFormProps {
+  regions?: Region[];
+}
 
-export type SafeDepositRentalFormProps = UniBlockProps;
+const DEFAULT_DAYS = 26;
 
-// TODO: Добавить типизацию
+export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>(({ regions }) => {
+  const [selectedRegion, setSelectedRegion] = useState<string>('');
+  const [branches, setBranches] = useState<Branch[]>([]);
+  const [selectedBranch, setSelectedBranch] = useState<string>('');
+  const [selectedCaseVolume, setSelectedCaseVolume] = useState<string>('');
+  const [selectedBoxSize, setSelectedBoxSize] = useState<string>('');
+  const [days, setDays] = useState<number>(DEFAULT_DAYS);
 
-export const SafeDepositRentalForm = JSX<any>(
-  ({ cities, cellDimensions, cellOptions, days, setDays }) => {
-    return (
-      <div className="flex-1 mr-9">
-        {cities.length ? <CitiesOffices cities={cities} /> : null}
-        {renderRentalPeriod(days, setDays)}
-        {cellDimensions.length && cellOptions.length ? (
-          <DimensionsOptions cellDimensions={cellDimensions} cellOptions={cellOptions} />
-        ) : null}
-        <span className="text-secondary-text text-l-light">Тип договора</span>
-        <div className="flex justify-between items-center mt-5">
-          <RadioButtons />
-          <Button text="Офисы на карте" version="primary" />
-        </div>
-      </div>
-    );
-  },
-);
+  useEffect(() => {
+    setSelectedRegion(getInitialValueSelectedRegion(regions));
+  }, [regions]);
 
-const CitiesOffices = JSX<any>(({ cities }) => {
-  const [selectedCity, setSelectedCity] = useState(cities[0].city);
+  useEffect(() => {
+    if (selectedRegion) {
+      fetchBranches(selectedRegion).then((result) => {
+        setBranches(result);
+      });
+    } else {
+      setBranches([]);
+    }
 
-  const setSelected = (_) => setSelectedCity(_);
+    setSelectedBranch('');
+    setSelectedCaseVolume('');
+    setSelectedBoxSize('');
+  }, [regions, selectedRegion]);
 
-  const offices = cities.find((_) => _.city === selectedCity).offices;
+  const onSelectedBranch = (value: string) => {
+    setSelectedBranch(value);
+    setSelectedCaseVolume('');
+    setSelectedBoxSize('');
+  };
 
-  return (
-    <div className="flex justify-between mb-6">
-      <div className="w-full mr-4">
-        {cities.length
-          ? renderSelect({
-              data: cities,
-              field: 'city',
-              selected: selectedCity,
-              setSelected,
-              label: 'Город',
-            })
-          : null}
-      </div>
-      <div className="w-full">
-        {offices.length
-          ? renderSelect({
-              data: offices,
-              field: 'office',
-              selected: offices[0],
-              setSelected,
-              label: 'Отделение',
-            })
-          : null}
-      </div>
-    </div>
-  );
-});
+  const onSelectedCaseVolume = (value: string) => {
+    setSelectedCaseVolume(value);
+    setSelectedBoxSize('');
+  };
 
-const DimensionsOptions = JSX<any>(({ cellDimensions, cellOptions }) => {
-  const [selectedDimension, setSelectedDimension] = useState(cellDimensions[0].dimension);
-  const [selectedOption, setSelectedOption] = useState(cellOptions[0].option);
+  const branch = getBranch(branches, selectedBranch);
+  const caseVolumes = getCaseVolumes(branch?.safeBoxCaseVolumes);
+
+  const safeBoxCases = getCaseVolume(branch?.safeBoxCaseVolumes, selectedCaseVolume)?.safeBoxCases;
+
+  const tariffs = getTariffs(safeBoxCases, selectedBoxSize);
 
   return (
-    <div className="flex justify-between mb-6">
-      <div className="mr-4 w-full">
-        {cellDimensions.length
-          ? renderSelect({
-              data: cellDimensions,
-              field: 'dimension',
-              selected: selectedDimension,
-              setSelected: setSelectedDimension,
-              label: 'Размер ячейки',
-            })
-          : null}
-      </div>
-      <div className="w-full">
-        {cellOptions.length
-          ? renderSelect({
-              data: cellOptions,
-              field: 'option',
-              selected: selectedOption,
-              setSelected: setSelectedOption,
-              label: 'Параметры ячейки, мм (ВхШхД)',
-            })
-          : null}
+    <div className="flex justify-between align-top mb-6">
+      <div className="flex-1 mr-9">
+        <RegionsAndBranches
+          regions={regions}
+          selectedRegion={selectedRegion}
+          onSelectedRegion={setSelectedRegion}
+          branches={branches}
+          selectedBranch={selectedBranch}
+          onSelectedBranch={onSelectedBranch}
+        />
+        <RentalPeriod days={days} setDays={setDays} />
+        <SafeBoxCases
+          caseVolumes={caseVolumes}
+          selectedCaseVolume={selectedCaseVolume}
+          onSelectedCaseVolume={onSelectedCaseVolume}
+          safeBoxCases={safeBoxCases}
+          selectedBoxSize={selectedBoxSize}
+          onSelectedBoxSize={setSelectedBoxSize}
+        />
+        <span className="text-secondary-text text-l-light">Тип договора</span>
+        <div className="flex justify-between items-center mt-5">
+          <RenderRadioButtons />
+          <Button text="Офисы на карте" version="primary" />
+        </div>
       </div>
+      <SafeDepositRentalTotal days={days} tariffs={tariffs} />
     </div>
   );
 });
 
-interface SelectProps {
-  data: any[];
-  field: string;
-  selected: string;
-  setSelected: (value: string) => void;
-  label: string;
-}
+const getInitialValueSelectedRegion = (regions?: Region[]) =>
+  regions?.find((_) => _.name === 'Москва')?.code || '';
 
-const renderSelect = (props: SelectProps) => {
-  const { data, field, selected, setSelected, label } = props;
+const getBranch = (branches: Branch[], selectedBranch: string) =>
+  branches.find((_) => _.branchCode === selectedBranch);
 
-  return (
-    <div>
-      <span className="block text-m-light mb-2">{label}</span>
-      <Select
-        className="h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
-        value={selected}
-        onChange={(_) => setSelected(_)}
-      >
-        {data.map((_, i) => (
-          <SelectOption key={String(i)} value={_?.[field]}>
-            {_?.[field]}
-          </SelectOption>
-        ))}
-      </Select>
-    </div>
-  );
-};
+const getCaseVolumes = (safeBoxCaseVolumes?: SafeBoxCaseVolume[]) =>
+  safeBoxCaseVolumes?.length ? safeBoxCaseVolumes?.filter((_) => _?.safeBoxCases?.length) : [];
 
-export const renderRentalPeriod = (days, setDays) => {
-  const items = ['От 1 дня', 'До 365 дней'];
+const getCaseVolume = (caseVolumes?: SafeBoxCaseVolume[], selectedCaseVolume?: string) =>
+  caseVolumes?.find((_) => _.volume === selectedCaseVolume);
 
-  return (
-    <div className="mb-6">
-      <span className="block text-m-light mb-[3px]">Срок аренды</span>
-      <InputRange min={1} max={365} value={days} items={items} onChange={setDays} />
-    </div>
-  );
-};
-
-// TODO: В качестве компонента не годится
-const RadioButtons = JSX<any>(() => {
-  const [selected, setSelected] = useState('option2');
-  const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelected(_.target.value);
-
-  return (
-    <div>
-      <Radio
-        className="mb-2"
-        name="contractType"
-        text="Простое хранение"
-        value="option1"
-        checked={selected === 'option1'}
-        onChange={onChange}
-      />
-      <Radio
-        name="contractType"
-        text="Сделка с недвижимостью"
-        value="option2"
-        checked={selected === 'option2'}
-        onChange={onChange}
-      />
-    </div>
-  );
-});
+const getTariffs = (safeBoxCases?: SafeBoxCase[], selectedBoxSize?: string) =>
+  safeBoxCases?.find((_) => _.safeBoxCasesSize === selectedBoxSize)?.tariffs;