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

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;

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

@@ -1,14 +1,14 @@
-import type { UniBlockProps } from '../../types';
+import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
+import { Tariff } from './SafeDepositRentalContent';
 
-export type SafeDepositRentalTotalProps = UniBlockProps;
-
-type Days = {
+export interface SafeDepositRentalTotalProps {
   days: number;
-};
+  tariffs?: Tariff[];
+}
 
-export const SafeDepositRentalTotal = ({ days }: Days) => {
-  const price = calculatePrice(days);
+export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days, tariffs = [] }) => {
+  const price = calculatePrice(days, tariffs);
 
   return (
     <div className="flex flex-col justify-between">
@@ -25,9 +25,9 @@ export const SafeDepositRentalTotal = ({ days }: Days) => {
       </div>
     </div>
   );
-};
+});
 
-const renderTotal = (label, total, className = '') => {
+const renderTotal = (label: string, total: string | number, className = '') => {
   return (
     <div className={className}>
       <span className="block text-m-light mb-1">{label}</span>
@@ -36,22 +36,30 @@ const renderTotal = (label, total, className = '') => {
   );
 };
 
-const calculatePrice = (days: number) => {
-  let TariffType = 1;
+const calculatePrice = (days: number, tariffs: Tariff[]) => {
+  const tariffType = getTariffType(days);
+
+  const tariffValue = tariffs?.find((_) => _.tariffType === String(tariffType))?.tariffValue || 0;
+
+  return days * tariffValue;
+};
+
+const getTariffType = (days) => {
+  let tariffType = 1;
 
   switch (true) {
     case days > 30 && days <= 90:
-      TariffType = 2;
+      tariffType = 2;
       break;
 
     case days > 90 && days <= 180:
-      TariffType = 3;
+      tariffType = 3;
       break;
 
     case days > 180 && days <= 365:
-      TariffType = 4;
+      tariffType = 4;
       break;
   }
 
-  return days * TariffType;
+  return tariffType;
 };

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

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Select } from '../../ui-kit/Select/Select';
+import { SelectOption } from '../../ui-kit/Select/SelectOption';
+
+interface WrapperSelectProps {
+  data: Record<string, any>[];
+  fieldLabel: string;
+  fieldValue?: string;
+  selected: string;
+  setSelected: (value: string) => void;
+  label: string;
+  placeholder?: string;
+}
+
+export const WrapperSelect = JSX<WrapperSelectProps>(
+  ({
+    data,
+    fieldLabel,
+    fieldValue,
+    selected,
+    placeholder = 'Выберите значение',
+    setSelected,
+    label,
+  }) => {
+    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 ${
+            !selected ? 'text-secondary-text' : ''
+          }`}
+          value={selected}
+          onChange={(_) => setSelected(_)}
+        >
+          <SelectOption value="">{placeholder}</SelectOption>
+          {data.map((_, i) => (
+            <SelectOption key={String(i)} value={_?.[fieldValue || fieldLabel]}>
+              {_?.[fieldLabel]}
+            </SelectOption>
+          ))}
+        </Select>
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,21 @@
+import { Branch } from './SafeDepositRentalContent';
+
+const BRANCHES_URL = '/api/v1/safeboxes';
+
+export async function fetchBranches(regionCode: string): Promise<Branch[]> {
+  try {
+    const response = await fetch(BRANCHES_URL + `?regionCode=${regionCode}`, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    const result = await response.json();
+
+    return Promise.resolve(result);
+  } catch (err) {
+    console.error(err);
+
+    return Promise.reject();
+  }
+}

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

@@ -0,0 +1,16 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { fetchJSONUnsafe } from '../../utils/fetchJSON';
+
+const REGIONS_URL = '/api/v1/admin/regions';
+
+export interface Region {
+  id?: number;
+  code?: string;
+  name?: string;
+}
+
+export function useGetRegions(): Region[] {
+  const { data } = useAsyncData<Region[]>(REGIONS_URL, fetchJSONUnsafe);
+
+  return data || [];
+}