@redneckz/wildless-cms-uni-blocks 0.5.4 → 0.5.6

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,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useRef } 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[][];
+}
+
+export const YandexMap = JSX<YandexMapProps>(({ points }) => {
+  const map = useRef(null);
+
+  useEffect(() => {
+    ymaps.ready(() => {
+      map.current = new ymaps.Map('map', {
+        center: points[0],
+        zoom: 10,
+      });
+
+      renderClusterer(map.current, points);
+    });
+  }, []);
+
+  if (map.current && points) {
+    renderClusterer(map.current, 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);

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,40 +1,23 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { Picture } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 
 /**
  * @title Шаг
  */
-export interface Step {
-  /** @title Название */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-  /**
-   *  @title Иконка
-   *  @default
-   * {
-   *   "size": {
-   *     "width": 48,
-   *     "height": 48
-   *   },
-   *   "format": "webp"
-   * }
-   */
-  icon?: Picture;
-  /** @title Кнопка */
-  button?: ButtonWithIconProps;
-}
+export type Step = DescriptionProps &
+  LabelProps &
+  IconProps & {
+    /** @title Кнопка */
+    button?: ButtonWithIconProps;
+  };
 
 /**
  * @title Блок шаги
  */
-export interface StepsBlockContent {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string; // TODO: mobile content
+export type StepsBlockContent = HeadlineCommonProps & {
   /**
    * @title Линии
    * @default true
@@ -54,4 +37,4 @@ export interface StepsBlockContent {
    */
   size?: SizeVersion; // TODO: mobile content
   version?: BlockVersion;
-}
+};

package/src/components/Tabs/TabsContent.ts

@@ -1,26 +1,29 @@
 import type { LinkProps } from '../../model/LinkProps';
+import type { TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Группа
  */
-export interface GroupTab {
+export type GroupTab = TitleProps & {
+  /** @default group */
   type: 'group';
   /** @title Тег */
   ref?: string;
-  /** @title Название */
-  title?: string;
-}
+};
 
 /**
  * @title Ссылка
  */
 export type LinkTab = LinkProps & {
+  /** @default link */
   type: 'link';
 };
 
 /**
  * @title Таб
- * @default {"type": "group"}
+ * @default {
+ *    "type": "group"
+ * }
  */
 export type Tab = GroupTab | LinkTab;
 

package/src/components/TariffsTable/EmbeddableCellData.mobile.tsx

@@ -7,10 +7,6 @@ import type { ListProps } from '../../ui-kit/List/ListProps';
 import type { LabelDescriptionCell } from './TariffsTableContent';
 import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
 
-export interface LabelProps {
-  label?: string;
-}
-
 export type EmbeddableCellDataType =
   | ButtonContent
   | LabelDescriptionCell

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,10 +1,9 @@
 import type { EmptyOption } from '../../model/EmptyOptionType';
-import type { DescriptionProps } from '../../model/HeadlineType';
+import type { DescriptionProps, LabelProps } from '../../model/HeadlineType';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingProps } from '../../ui-kit/Heading/HeadingProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import type { ListProps } from '../../ui-kit/List/ListProps';
 
@@ -18,71 +17,57 @@ export interface TariffsTableCellIndexProps {
 }
 
 /**
- * @title Параметр
+ * @hidden
  */
-export type TariffsTableRowHeader = HeadingProps & {
-  /**
-   * @default { "format": "webp", "size": { "width": 24, "height": 24 } }
-   */
-  icon?: Picture;
+export type Data = {
+  header: TariffsTableRowHeader;
+  data: CellDef[][];
 };
 
 /**
- * @title Ряд
+ * @title Параметр
  */
-export type Data = {
-  header: TariffsTableRowHeader;
-  data: CellDef[][];
+export type TariffsTableRowHeader = HeadingProps & {
+  /** @default { "format": "webp", "size": { "width": 24, "height": 24 } } */
+  icon?: Picture;
 };
 
 /**
  * @title Изображение
- * @default { "image": { "format": "webp", "size": { "width": 24, "height": 24 } } }
  */
-export type ImageCellDef = ImageContent & {
-  /**
-   * @default Img
-   */
+export type ImageCellDef = {
+  /** @default Img */
   tableCellType: 'Img';
+  /** @default { "format": "webp", "size": { "width": 24, "height": 24 } } */
+  image?: Picture;
 };
 
 /**
  * @title Кнопки
  */
 export type ButtonsCellDef = ButtonContent & {
-  /**
-   * @default Buttons
-   */
+  /** @default Buttons */
   tableCellType: 'Buttons';
 };
 
 /**
  * @title Заголовок и описание
  */
-export interface LabelDescriptionCell {
-  /** @title Заголовок */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-}
+export type LabelDescriptionCell = LabelProps & DescriptionProps & {};
 
 /**
  * @title Заголовок и описание
  */
 export type LabelDescriptionCellDef = LabelDescriptionCell & {
-  /**
-   * @default LabelDescription
-   */
+  /** @default LabelDescription */
   tableCellType: 'LabelDescription';
 };
 
 /**
  * @title Список
  */
-export type ListBlockDef = ListProps & {
-  /**
-   * @default List
-   */
+export type ListBlockDef = Omit<ListProps, 'listItemSize' | 'version'> & {
+  /** @default List */
   tableCellType: 'List';
 };
 
@@ -90,9 +75,7 @@ export type ListBlockDef = ListProps & {
  * @title Таблица
  */
 export type InnerTableBlockDef = TariffsTableInnerContent & {
-  /**
-   * @default Table
-   */
+  /** @default Table */
   tableCellType: 'Table';
 };
 

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
@@ -33,7 +34,9 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
                 asSVG
               />
             ) : null}
-            {header?.title}
+            {header?.title ? (
+              <Heading headingType={header?.headingType || 'h6'} as="h6" title={header?.title} />
+            ) : null}
           </div>
         </div>
         {data?.length ? (

package/src/components/TextBlock/TextBlockContent.ts

@@ -1,4 +1,5 @@
 import type { Picture } from '../../model/Picture';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @title Цвет блока
@@ -15,11 +16,7 @@ export type TextBlockIconVersion = 'none' | 'small' | 'big';
 /**
  * @title Текстовый блок
  */
-export interface TextBlockContent {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string;
+export type TextBlockContent = HeadlineCommonProps & {
   iconVersion?: TextBlockIconVersion;
   image?: Picture;
   blockVersion?: TextBlockVersion;
@@ -27,4 +24,4 @@ export interface TextBlockContent {
   isDotted?: boolean;
   /** @title Список (моб.) */ // TODO: mobile prop
   items?: string[];
-}
+};

package/src/components/Tile/TileContent.ts

@@ -1,8 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { DescriptionProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { ListItemSize } from '../../ui-kit/List/ListProps';
 
@@ -12,8 +12,22 @@ import type { ListItemSize } from '../../ui-kit/List/ListProps';
 export type TileContent = HeadingCommonProps &
   DescriptionProps &
   ListContent &
-  ButtonContent &
-  ImageContent & {
+  ButtonContent & {
+    /**
+     * @default {
+     *   "format": "webp",
+     *   "size": {
+     *       "width": 320
+     *   },
+     *   "sources": [{
+     *       "media": 1279,
+     *	     "width": 192,
+     *       "format": "webp",
+     *       "alignment": "southeast"
+     *   }]
+     * }
+     */
+    image?: Picture;
     /**
      *  @title Буллиты
      *  @default true