@redneckz/wildless-cms-uni-blocks 0.5.3 → 0.5.5

package/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Branch } from './SafeDepositRentalContent';
-import { Region } from './useGetRegions';
+import type { Branch } from '../../hooks/useFetchSafeBoxes';
+import type { Region } from './useGetRegions';
 import { WrapperSelect } from './WrapperSelect';
 
 interface RegionsAndBranchesProps {

package/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { SafeBoxCase, SafeBoxCaseVolume } from './SafeDepositRentalContent';
+import type { SafeBoxCase, SafeBoxCaseVolume } from '../../hooks/useFetchSafeBoxes';
 import { WrapperSelect } from './WrapperSelect';
 
 interface SafeBoxCasesProps {

package/src/components/SafeDepositRental/SafeDepositRental.fixture.tsx

@@ -4,7 +4,12 @@ import { SafeDepositRental } from './SafeDepositRental';
 export default {
   default: (
     <div className="container grid grid-cols-12 mb-1">
-      <SafeDepositRental className="col-span-12" context={context} />
+      <SafeDepositRental
+        className="col-span-12"
+        context={context}
+        footnote="Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
+          или процедуры ипотечной сделки"
+      />
     </div>
   ),
 };

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -1,27 +1,51 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useScript } from '../../hooks/useScript';
+import { projectSettings } from '../../ProjectSettings';
 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 { useGetRegions } from './useGetRegions';
+import { YandexMap } from './YandexMap';
 
 export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
 
 export const SafeDepositRental = JSX<SafeDepositRentalProps>(
-  ({ title, context, className = '', ...rest }) => {
+  ({ title, footnote, context, className = '', ...rest }) => {
+    const [points, setPoints] = useState<number[][]>([]);
+    const [showMap, setShowMap] = useState<boolean>(false);
+
     const regions = useGetRegions();
 
+    const statusScript = useScript(
+      `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY}&lang=ru_RU`,
+      {
+        removeOnUnmount: true,
+      },
+    );
+
+    const toggleShowMap = () => {
+      setShowMap(!showMap);
+    };
+
     return (
-      <BlockWrapper context={context} className={`bg-white px-8 py-12 ${className}`} {...rest}>
-        {title ? (
-          <Heading title={title} headingType="h3" as="h2" className="mb-2.5 text-center" />
+      <BlockWrapper context={context} className={className} {...rest}>
+        <div className="bg-white px-8 py-12">
+          {title ? (
+            <Heading title={title} headingType="h3" as="h2" className="mb-2.5 text-center" />
+          ) : null}
+          <SafeDepositRentalForm
+            regions={regions}
+            setPoints={setPoints}
+            toggleShowMap={toggleShowMap}
+          />
+          {footnote ? <p className="text-s-light text-secondary-text">{footnote}</p> : null}
+        </div>
+        {statusScript === 'ready' && points.length && showMap ? (
+          <YandexMap points={points} />
         ) : null}
-        <SafeDepositRentalForm regions={regions} />
-        <p className="text-s-light text-secondary-text">
-          Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
-          или процедуры ипотечной сделки
-        </p>
       </BlockWrapper>
     );
   },

package/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -1,28 +1,9 @@
-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 Аренда сейфовых ячеек
  */
 export interface SafeDepositRentalContent {
   /** @title Заголовок */
   title?: string;
+  /** @title Сноска */
+  footnote?: string;
 }

package/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -0,0 +1,77 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Branch, SafeBoxCase, SafeBoxCaseVolume } from '../../hooks/useFetchSafeBoxes';
+import { Button } from '../../ui-kit/Button/Button';
+import { RegionsAndBranches } from './RegionsAndBranches';
+import { RenderRadioButtons } from './RenderRadioButtons';
+import { RentalPeriod } from './RentalPeriod';
+import { SafeBoxCases } from './SafeBoxCases';
+import type { SafeDepositRentalFormProps } from './SafeDepositRentalForm';
+import type { HandleChangeState, SafeDepositRentalState } from './SafeDepositRentalTypes';
+import { getBranch, getCoordinates } from './utils';
+
+export interface SafeDepositRentalFieldsProps
+  extends SafeDepositRentalState,
+    SafeDepositRentalFormProps {
+  onChange: HandleChangeState;
+  safeBoxCases?: SafeBoxCase[];
+  caseVolumes?: SafeBoxCaseVolume[];
+}
+
+export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
+  ({
+    regions,
+    selectedRegion,
+    branches,
+    selectedBranch,
+    days,
+    selectedCaseVolume,
+    selectedBoxSize,
+    safeBoxCases,
+    caseVolumes,
+    setPoints,
+    onChange,
+    toggleShowMap,
+  }) => {
+    return (
+      <div className="flex-1 mr-9">
+        <RegionsAndBranches
+          regions={regions}
+          selectedRegion={selectedRegion}
+          onSelectedRegion={(value) => onChange({ selectedRegion: value })}
+          branches={branches}
+          selectedBranch={selectedBranch}
+          onSelectedBranch={onSelectedBranch(onChange, setPoints, branches)}
+        />
+        <RentalPeriod days={days} setDays={(value) => onChange({ days: value })} />
+        <SafeBoxCases
+          caseVolumes={caseVolumes}
+          selectedCaseVolume={selectedCaseVolume}
+          onSelectedCaseVolume={onSelectedCaseVolume(onChange)}
+          safeBoxCases={safeBoxCases}
+          selectedBoxSize={selectedBoxSize}
+          onSelectedBoxSize={(value) => onChange({ selectedBoxSize: value })}
+        />
+        <span className="text-secondary-text text-l-light">Тип договора</span>
+        <div className="flex justify-between items-center mt-5">
+          <RenderRadioButtons />
+          <Button text="Офисы на карте" version="primary" onClick={toggleShowMap} />
+        </div>
+      </div>
+    );
+  },
+);
+
+const onSelectedBranch =
+  (
+    onChange: HandleChangeState,
+    setPoints: SafeDepositRentalFieldsProps['setPoints'],
+    branches: Branch[],
+  ) =>
+  (value: string) => {
+    onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
+    setPoints(getCoordinates(value ? getBranch(branches, value) : branches));
+  };
+
+const onSelectedCaseVolume = (onChange: HandleChangeState) => (value: string) => {
+  onChange({ selectedCaseVolume: value, selectedBoxSize: '' });
+};

package/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -1,101 +1,84 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks/core';
-import { Button } from '../../ui-kit/Button/Button';
-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 { SafeBoxCase, SafeBoxCaseVolume, useFetchSafeBoxes } from '../../hooks/useFetchSafeBoxes';
+import { SafeDepositRentalFields } from './SafeDepositRentalFields';
 import { SafeDepositRentalTotal } from './SafeDepositRentalTotal';
+import type { HandleChangeState, SafeDepositRentalState } from './SafeDepositRentalTypes';
 import type { Region } from './useGetRegions';
+import { getBranch, getCoordinates } from './utils';
+
+const DEFAULT_DAYS = 26;
 
 export interface SafeDepositRentalFormProps {
   regions?: Region[];
+  setPoints: (points: number[][]) => void;
+  toggleShowMap: () => void;
 }
 
-const DEFAULT_DAYS = 26;
-
-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);
-
-  useEffect(() => {
-    setSelectedRegion(getInitialValueSelectedRegion(regions));
-  }, [regions]);
+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 (selectedRegion) {
-      fetchBranches(selectedRegion).then((result) => {
-        setBranches(result);
-      });
-    } else {
-      setBranches([]);
+    if (Array.isArray(resultBranches) && resultBranches.length) {
+      handleChangeSafeDepositState({ branches: resultBranches });
+      props.setPoints(getCoordinates(resultBranches));
     }
+  }, [resultBranches]);
 
-    setSelectedBranch('');
-    setSelectedCaseVolume('');
-    setSelectedBoxSize('');
-  }, [regions, selectedRegion]);
-
-  const onSelectedBranch = (value: string) => {
-    setSelectedBranch(value);
-    setSelectedCaseVolume('');
-    setSelectedBoxSize('');
-  };
-
-  const onSelectedCaseVolume = (value: string) => {
-    setSelectedCaseVolume(value);
-    setSelectedBoxSize('');
-  };
-
-  const branch = getBranch(branches, selectedBranch);
+  useEffect(() => {
+    handleChangeSafeDepositState({
+      selectedBranch: '',
+      selectedCaseVolume: '',
+      selectedBoxSize: '',
+    });
+  }, [safeDepositState.selectedRegion]);
+
+  const branch = getBranch(safeDepositState.branches, safeDepositState.selectedBranch);
   const caseVolumes = getCaseVolumes(branch?.safeBoxCaseVolumes);
 
-  const safeBoxCases = getCaseVolume(branch?.safeBoxCaseVolumes, selectedCaseVolume)?.safeBoxCases;
+  const safeBoxCases = getCaseVolume(
+    branch?.safeBoxCaseVolumes,
+    safeDepositState.selectedCaseVolume,
+  )?.safeBoxCases;
 
-  const tariffs = getTariffs(safeBoxCases, selectedBoxSize);
+  const tariffs = getTariffs(safeBoxCases, safeDepositState.selectedBoxSize);
 
   return (
     <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} />
+      <SafeDepositRentalFields
+        {...safeDepositState}
+        {...props}
+        caseVolumes={caseVolumes}
+        safeBoxCases={safeBoxCases}
+        onChange={handleChangeSafeDepositState}
+      />
+      <SafeDepositRentalTotal days={safeDepositState.days} tariffs={tariffs} />
     </div>
   );
 });
 
 const getInitialValueSelectedRegion = (regions?: Region[]) =>
-  regions?.find((_) => _.name === 'Москва')?.code || '';
-
-const getBranch = (branches: Branch[], selectedBranch: string) =>
-  branches.find((_) => _.branchCode === selectedBranch);
+  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,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { Tariff } from '../../hooks/useFetchSafeBoxes';
 import { Img } from '../../ui-kit/Img/Img';
-import { Tariff } from './SafeDepositRentalContent';
 
 export interface SafeDepositRentalTotalProps {
   days: number;

package/src/components/SafeDepositRental/SafeDepositRentalTypes.ts

@@ -0,0 +1,12 @@
+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/WrapperSelect.tsx

@@ -13,15 +13,7 @@ interface WrapperSelectProps {
 }
 
 export const WrapperSelect = JSX<WrapperSelectProps>(
-  ({
-    data,
-    fieldLabel,
-    fieldValue,
-    selected,
-    placeholder = 'Выберите значение',
-    setSelected,
-    label,
-  }) => {
+  ({ data, fieldLabel, fieldValue, selected, placeholder, setSelected, label }) => {
     return (
       <div>
         <span className="block text-m-light mb-2">{label}</span>
@@ -32,7 +24,7 @@ export const WrapperSelect = JSX<WrapperSelectProps>(
           value={selected}
           onChange={(_) => setSelected(_)}
         >
-          <SelectOption value="">{placeholder}</SelectOption>
+          {placeholder ? <SelectOption value="">{placeholder}</SelectOption> : null}
           {data.map((_, i) => (
             <SelectOption key={String(i)} value={_?.[fieldValue || fieldLabel]}>
               {_?.[fieldLabel]}

package/src/components/SafeDepositRental/YandexMap.tsx

@@ -0,0 +1,35 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { renderClusterer } from './renderClusterer';
+
+declare let ymaps: any;
+
+interface YandexMapProps {
+  points: number[][];
+}
+
+let Map = null;
+
+export const YandexMap = JSX<YandexMapProps>(({ points }) => {
+  useEffect(() => {
+    ymaps.ready(() => {
+      Map = new ymaps.Map('map', {
+        center: points[0],
+        zoom: 10,
+      });
+      renderClusterer(Map, points);
+    });
+  }, []);
+
+  if (Map && points) {
+    renderClusterer(Map, points);
+  }
+
+  return (
+    <div className="pt-12 mt-1 bg-white">
+      <Heading title="Офисы на карте" headingType="h3" className="mb-8 text-center" />
+      <div id="map" className="h-[640px]" />
+    </div>
+  );
+});

package/src/components/SafeDepositRental/renderClusterer.ts

@@ -0,0 +1,45 @@
+declare let ymaps: any;
+
+export function renderClusterer(Map, points) {
+  Map.geoObjects.removeAll();
+
+  const pointsList = points;
+
+  const clusterIconContentLayout = ymaps.templateLayoutFactory.createClass(
+    '<div style="margin-top: -3px;">{{properties.geoObjects.length}}</div>',
+  );
+
+  const clusterer = new ymaps.Clusterer({
+    clusterIcons: [
+      {
+        href: 'icons/MapMarkerClusterIcon.svg',
+        size: [78, 84],
+        offset: [-35, -50],
+      },
+    ],
+    clusterIconContentLayout,
+    clusterHideIconOnBalloonOpen: false,
+    geoObjectHideIconOnBalloonOpen: false,
+  });
+
+  const geoObjects: any = [];
+
+  for (let i = 0, len = pointsList.length; i < len; i++) {
+    geoObjects[i] = new ymaps.Placemark(pointsList[i], null, {
+      iconLayout: 'default#image',
+      iconImageHref: 'icons/MapMarkerSingleIcon.svg',
+      iconImageSize: [78, 84],
+      iconImageOffset: [-35, -50],
+    });
+  }
+
+  clusterer.add(geoObjects);
+
+  Map.geoObjects.add(clusterer);
+
+  Map.setBounds(ymaps.util.bounds.fromPoints(pointsList)).then(() => {
+    if (Map.getZoom() > 10) {
+      Map.setZoom(10);
+    }
+  });
+}

package/src/components/SafeDepositRental/useGetRegions.ts

@@ -1,7 +1,7 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 import { fetchJSONUnsafe } from '../../utils/fetchJSON';
 
-const REGIONS_URL = '/api/v1/admin/regions';
+const REGIONS_URL = '/api/v1/regions';
 
 export interface Region {
   id?: number;

package/src/components/SafeDepositRental/utils.ts

@@ -0,0 +1,17 @@
+import type { Branch } from '../../hooks/useFetchSafeBoxes';
+
+export const getCoordinates = (data?: Branch | Branch[]): number[][] => {
+  if (Array.isArray(data)) {
+    return data.map((_) =>
+      _.gpsLatitude && _.gpsLongitude ? [_.gpsLatitude, _.gpsLongitude] : [],
+    );
+  }
+  if (data?.gpsLatitude && data?.gpsLongitude) {
+    return [[data.gpsLatitude, data.gpsLongitude]];
+  }
+
+  return [];
+};
+
+export const getBranch = (branches: Branch[], selectedBranch: string) =>
+  branches.find((_) => _.branchCode === selectedBranch);