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

package/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/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">
@@ -17,7 +17,7 @@ export const SafeDepositRentalTotal = ({ days }: Days) => {
         {renderTotal('Цена', price + ' ₽')}
       </div>
       <div className="bg-primary-main px-10 pt-10 pb-4 text-center">
-        <Img image={{ icon: 'PackA4' }} width="290" height="257" asSVG />
+        <Img image={{ icon: 'PackA4Icon' }} width="290" height="257" asSVG />
 
         <span className="text-s-light text-white opacity-80 mt-2 inline-block">
           На рисунки изображена пачка<br></br> листов формата А4
@@ -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/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/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/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 || [];
+}

package/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -6,6 +6,7 @@ import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import { TableInnerButton, TableInnerButtonProps } from '../../ui-kit/InnerTable/InnerTableButton';
+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';
@@ -60,8 +61,8 @@ const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
 
 const renderTableCellData = JSX((props: TableInnerButtonProps) => {
   const [showBtn, setShowBtn] = useState(true);
-
-  const tariffInnerTableSubscriber = (event) => {
+  console.log(props);
+  const tariffInnerTableSubscriber = (event: TariffsTableInnerEvent) => {
     const _showBtn = (
       ['rowIdx', 'cellIdx', 'fieldIdx'] as Array<keyof TariffsTableCellIndexProps>
     ).every((key) => props[key] === event[key]);

package/src/components/TariffsTable/TariffsTableRowContainer.tsx

@@ -4,6 +4,7 @@ import { EventBus } from '../../EventBus/EventBus';
 import type { VNode } from '../../model/VNode';
 import type { UniBlockProps } from '../../types';
 import { InnerTable } from '../../ui-kit/InnerTable/InnerTable';
+import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 
 export interface TariffsTableRowContainerProps extends UniBlockProps {
   children?: VNode;
@@ -12,12 +13,16 @@ export interface TariffsTableRowContainerProps extends UniBlockProps {
 
 export const TariffsTableRowContainer = JSX<TariffsTableRowContainerProps>(
   ({ context, children, rowIdx }) => {
-    const [dataUrl, setDataUrl] = useState<string | undefined>(undefined);
+    const [tableInnerData, setTableInnerData] = useState<TariffsTableInnerContent | undefined>(
+      undefined,
+    );
 
     useEffect(
       () =>
         EventBus.inst.subscribe('tariffInnerTable', (event) => {
-          setDataUrl(rowIdx === event.rowIdx ? event.dataUrl : undefined);
+          setTableInnerData(
+            rowIdx === event.rowIdx ? { dataUrl: event.dataUrl, pdfUrl: event.pdfUrl } : undefined,
+          );
         }),
       [rowIdx],
     );
@@ -25,9 +30,9 @@ export const TariffsTableRowContainer = JSX<TariffsTableRowContainerProps>(
     return (
       <div className="self-start flex flex-col" role="row">
         <div className="flex">{children}</div>
-        {dataUrl ? (
+        {tableInnerData ? (
           <div className="origin-top animate-expansion">
-            <InnerTable context={context} dataUrl={dataUrl} />
+            <InnerTable context={context} {...tableInnerData} />
           </div>
         ) : null}
       </div>

package/src/components/TariffsTable/dataFixture.ts

@@ -1,12 +1,12 @@
+import type { Picture } from '../../model/Picture';
 import type {
+  InnerTableBlockDef,
+  LabelDescriptionCellDef,
+  ListBlockDef,
   TariffsTableColumn,
   TariffsTableContent,
   TariffsTableRowHeader,
-  LabelDescriptionCellDef,
-  ListBlockDef,
-  InnerTableBlockDef,
 } from './TariffsTableContent';
-import type { Picture } from '../../model/Picture';
 
 const title = 'Заголовок';
 const description = 'Описание предоставляемого продукта';
@@ -36,6 +36,7 @@ const LABEL_DESCRIPTION_BLOCK: LabelDescriptionCellDef = {
 const TABLE_BLOCK: InnerTableBlockDef = {
   tableCellType: 'Table',
   dataUrl: 'tariffs-inner-table-data',
+  pdfUrl: '#',
 };
 
 const DESCRIPTION_BLOCK: LabelDescriptionCellDef = {