@redneckz/wildless-cms-uni-blocks 0.4.6 → 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">
@@ -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/__snapshots__/Blocks.spec.tsx.snap

@@ -145,6 +145,17 @@ exports[`Blocks ComparisonTable should render block "ComparisonTable" without co
 </section>
 `;
 
+exports[`Blocks ErrorBlock should render block "ErrorBlock" without content 1`] = `
+<section
+  class="flex flex-col justify-center items-center "
+  role="listitem"
+>
+  <div
+    class="flex justify-center mb-7"
+  />
+</section>
+`;
+
 exports[`Blocks ExchangeRateTile should render block "ExchangeRateTile" without content 1`] = `
 <section
   class="bg-white text-primary-text font-sans p-9 box-border "
@@ -666,6 +677,12 @@ exports[`Blocks Navigation should render block "Navigation" without content 1`]
 </section>
 `;
 
+exports[`Blocks OfficeServicesBlock should render block "OfficeServicesBlock" without content 1`] = `
+<section
+  class="font-sans bg-white p-12 flex flex-col "
+/>
+`;
+
 exports[`Blocks OtherProducts should render block "OtherProducts" without content 1`] = `
 <section
   class="font-sans text-primary-text "
@@ -869,20 +886,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Город
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder="12321321312"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="Москва"
+                value=""
               >
-                Москва
-              </option>
-              <option
-                class=""
-                value="Краснодар"
-              >
-                Краснодар
+                Выберите значение
               </option>
             </select>
           </div>
@@ -897,32 +909,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Отделение
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder="12321321312"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="выберите отделение"
-              >
-                выберите отделение
-              </option>
-              <option
-                class=""
-                value="МоскваОфис1"
-              >
-                МоскваОфис1
-              </option>
-              <option
-                class=""
-                value="МоскваОфис2"
+                value=""
               >
-                МоскваОфис2
-              </option>
-              <option
-                class=""
-                value="МоскваОфис3"
-              >
-                МоскваОфис3
+                Выберите отделение
               </option>
             </select>
           </div>
@@ -985,29 +980,18 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
             <span
               class="block text-m-light mb-2"
             >
-              Размер ячейки
+              Размер
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder="12321321312"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="маленькая"
-              >
-                маленькая
-              </option>
-              <option
-                class=""
-                value="средняя"
-              >
-                средняя
-              </option>
-              <option
-                class=""
-                value="большая"
+                value=""
               >
-                большая
+                Выберите размер
               </option>
             </select>
           </div>
@@ -1022,26 +1006,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Параметры ячейки, мм (ВхШхД)
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder="12321321312"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="125x225x375"
-              >
-                125x225x375
-              </option>
-              <option
-                class=""
-                value="200x300x400"
+                value=""
               >
-                200x300x400
-              </option>
-              <option
-                class=""
-                value="300x400x500"
-              >
-                300x400x500
+                Выберите параметр ячейки
               </option>
             </select>
           </div>
@@ -1063,7 +1036,8 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               class="flex items-center relative cursor-pointer"
             >
               <input
-                class="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+                checked=""
+                class="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
                 name="contractType"
                 type="radio"
                 value="option1"
@@ -1080,8 +1054,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               class="flex items-center relative cursor-pointer"
             >
               <input
-                checked=""
-                class="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+                class="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
                 name="contractType"
                 type="radio"
                 value="option2"
@@ -1146,7 +1119,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
           <span
             class="text-h3"
           >
-            26 ₽
+            0 ₽
           </span>
         </div>
       </div>

package/src/ui-kit/BenefitItem/BenefitItem.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BenefitItemProps, BenefitItemCommonProps } from './BenefitItemProps';
-import { Img } from '../Img/Img';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { Img } from '../Img/Img';
+import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
 
 export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
 
@@ -25,15 +25,18 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
   } = props;
 
   const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
+  const listItemAlign = description ? 'items-start' : 'items-center';
 
   return (
-    <div className={`flex items-start gap-5 ${className}`}>
+    <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
-        <Img
-          className={renderBenefitIconBgStyle(version, benefitsVersion)}
-          image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
-          asSVG
-        />
+        <div className={renderBenefitIconBgStyle(version, benefitsVersion)}>
+          <Img
+            className="w-[24px] h-[24px]"
+            image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
+            asSVG
+          />
+        </div>
       ) : null}
       <div className="gap-0.5">
         {label ? <div className={`text-h6 ${titleStyleMap[version]}`}>{label}</div> : null}
@@ -54,5 +57,5 @@ function renderBenefitIconBgStyle(version, benefitsVersion) {
     bgColorStyle = 'bg-secondary-light text-primary-main';
   }
 
-  return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
+  return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border flex items-center justify-center ${bgColorStyle}`;
 }

package/src/ui-kit/InputRange/InputRange.tsx

@@ -41,7 +41,7 @@ export const InputRange = JSX<InputRangeProps>(
     return (
       <div className={className}>
         <label className="block relative">
-          {title ? <span className="text-m font-light">{title}</span> : null}
+          {title ? <span className="text-m-light">{title}</span> : null}
           <input
             className={`m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
                         outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus ${DISABLED_INPUT_CLASSES}`}

package/src/ui-kit/Radio/Radio.tsx

@@ -5,7 +5,7 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
   <div className={className}>
     <label className="flex items-center relative cursor-pointer">
       <input
-        className="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
         type="radio"
         value={value}
         name={name}

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

@@ -22,6 +22,7 @@ export const Select = JSX<SelectProps>(
         name={name || id}
         value={value}
         onChange={(e) => onChange(e.target.value as string)}
+        placeholder="12321321312"
       >
         {children}
       </select>