@redneckz/wildless-cms-uni-blocks 0.14.828 → 0.14.829

package/mobile/src/components/ProductGallery/ProductGallery.example.json

@@ -1,72 +0,0 @@
-{
-  "content": {
-    "version": "primary",
-    "padding": "",
-    "slides": [
-      {
-        "nav": {
-          "title": "Заголовок",
-          "description": "Описание"
-        },
-        "productBlock": {
-          "title": "Продуктовая галерея",
-          "headlineVersion": "M",
-          "description": "Описание",
-          "__html": "<ul><li>Элемент списка 1</li><li>Элемент списка 2</li><li>Элемент списка 3</li></ul>",
-          "isDotted": true,
-          "benefitsVersion": "normal",
-          "benefits": [
-            {
-              "icon": {
-                "icon": "ActualBalanceIcon"
-              },
-              "label": "Преимущество №1",
-              "description": "Описание",
-              "type": "default"
-            },
-            {
-              "icon": {
-                "icon": "BankIcon"
-              },
-              "label": "Преимущество №2",
-              "description": "Описание",
-              "type": "default"
-            }
-          ]
-        }
-      },
-      {
-        "nav": {
-          "title": "Заголовок",
-          "description": "Описание"
-        },
-        "productBlock": {
-          "title": "Продуктовая галерея",
-          "headlineVersion": "XXL",
-          "description": "Описание",
-          "__html": "<ul><li>Элемент списка 1</li><li>Элемент списка 2</li><li>Элемент списка 3</li></ul>",
-          "isDotted": true,
-          "benefitsVersion": "normal",
-          "benefits": [
-            {
-              "icon": {
-                "icon": "BankIcon"
-              },
-              "label": "Возврат %",
-              "description": "при пополнении счёта",
-              "type": "default"
-            },
-            {
-              "icon": {
-                "icon": "ActualBalanceIcon"
-              },
-              "label": "Денежное преимущество",
-              "description": "эмпирическая выгода",
-              "type": "default"
-            }
-          ]
-        }
-      }
-    ]
-  }
-}

package/mobile/src/components/ProductGallery/ProductGallery.tsx

@@ -1,29 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
-import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
-import { style } from '../../utils/style';
-import { type ProductGalleryContent } from './ProductGalleryContent';
-
-export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
-
-export const ProductGallery = JSX<ProductGalleryProps>(
-  ({ className, padding, slides = [], ...rest }) => (
-    <BlockWrapper
-      className={style('overflow-hidden relative', className)}
-      padding={padding}
-      {...rest}
-    >
-      <SwipeListControl gap={0} padding={0}>
-        {slides
-          .map((s) => s.productBlock)
-          .map((_, i) => (
-            <div key={String(i)} className="box-border h-full">
-              <BaseProductTile className="px-5 h-full" headlineVersion="L" {..._} {...rest} />
-            </div>
-          ))}
-      </SwipeListControl>
-    </BlockWrapper>
-  ),
-);

package/mobile/src/components/ProductGallery/ProductGallery.ui.json

@@ -1,42 +0,0 @@
-{
-  "content": {
-    "slides": {
-      "items": {
-        "productBlock": {
-          "image": {
-            "ui:field": "picture"
-          },
-          "benefits": {
-            "items": {
-              "icon": {
-                "ui:field": "icon"
-              },
-              "__html": {
-                "ui:widget": "html"
-              },
-              "type": {
-                "ui:widget": "hidden"
-              }
-            }
-          },
-          "buttons": {
-            "items": {
-              "href": {
-                "ui:field": "attachmentHref"
-              },
-              "icon": {
-                "ui:field": "icon"
-              },
-              "iconRight": {
-                "ui:field": "icon"
-              }
-            }
-          },
-          "__html": {
-            "ui:widget": "html"
-          }
-        }
-      }
-    }
-  }
-}

package/mobile/src/components/ProductGallery/ProductGalleryContent.ts

@@ -1,27 +0,0 @@
-import { type DescriptionProps, type TitleProps } from '../../model/HeadlineType';
-import { type BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
-import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
-
-/** @title Кнопка под слайдом */
-export type ProductGalleryNav = TitleProps & DescriptionProps;
-
-/**
- * @title Слайд
- */
-export interface ProductSlide {
-  /** @title Превью содержимого слайда на навигации */
-  nav?: ProductGalleryNav;
-  /** @title Содержимое слайда */
-  productBlock?: BaseProductTileContent;
-}
-
-/**
- * @title Продуктовая галерея
- */
-export type ProductGalleryContent = UniBlockContent & {
-  /**
-   * @title Слайды
-   * @minItems 2
-   */
-  slides?: ProductSlide[];
-};

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

@@ -1,33 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks/core';
-import { Radio } from '../../ui-kit/Radio/Radio';
-import { style } from '../../utils/style';
-
-interface RadioButtonsProps {
-  className?: string;
-}
-
-export const RadioButtons = JSX(({ className = '' }: RadioButtonsProps) => {
-  const [selectedOption, setSelectedOption] = useState('option2');
-  const onChange = useCallback((_: string) => setSelectedOption(_), []);
-
-  return (
-    <div className={style('order-4', className)} role="radiogroup">
-      <Radio
-        className="mb-xs"
-        name="contractType"
-        text="Простое хранение"
-        value="option1"
-        checked={selectedOption === 'option1'}
-        onChange={onChange}
-      />
-      <Radio
-        name="contractType"
-        text="Сделка с недвижимостью"
-        value="option2"
-        checked={selectedOption === 'option2'}
-        onChange={onChange}
-      />
-    </div>
-  );
-});

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

@@ -1,48 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { type Region } from '../../hooks/useRegions';
-import { type Branch } from './useSafeBoxes';
-import { WrapperSelect } from './WrapperSelect';
-
-interface RegionsAndBranchesProps {
-  regions?: Region[];
-  selectedRegion: string;
-  onSelectedRegion: (value: string) => void;
-  branches?: Branch[];
-  selectedBranch: string;
-  onSelectedBranch: (value: string) => void;
-}
-
-export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
-  ({
-    regions = [],
-    selectedRegion,
-    onSelectedRegion: onSelectedRegion,
-    branches = [],
-    selectedBranch,
-    onSelectedBranch,
-  }) => (
-    <div className="flex flex-col @xl:flex-row gap-m order-1">
-      <div className="flex-1 min-w-0">
-        <WrapperSelect
-          data={regions}
-          fieldValue="code"
-          fieldLabel="name"
-          selected={selectedRegion}
-          setSelected={onSelectedRegion}
-          label="Регион"
-        />
-      </div>
-      <div className="flex-1 min-w-0">
-        <WrapperSelect
-          data={branches}
-          fieldValue="branchCode"
-          fieldLabel="address"
-          selected={selectedBranch}
-          setSelected={onSelectedBranch}
-          label="Отделение"
-          placeholder="Выберите отделение"
-        />
-      </div>
-    </div>
-  ),
-);

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

@@ -1,21 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { Text } from '../../ui-kit/Text/Text';
-
-const ITEMS = ['От 1 дня', 'До 365 дней'];
-const MIN = 1;
-const MAX = 365;
-
-interface RentalPeriodProps {
-  days: number;
-  setDays: (value: number) => void;
-}
-
-export const RentalPeriod = JSX<RentalPeriodProps>(({ days, setDays }) => (
-  <div className="order-1">
-    <Text size="text-m" font="font-light">
-      Срок аренды
-    </Text>
-    <InputRange min={MIN} max={MAX} value={days} items={ITEMS} onChange={setDays} />
-  </div>
-));

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

@@ -1,46 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { type SafeBoxCase, type SafeBoxCaseVolume } from './useSafeBoxes';
-import { WrapperSelect } from './WrapperSelect';
-
-interface SafeBoxCasesProps {
-  caseVolumes?: SafeBoxCaseVolume[];
-  selectedCaseVolume: string;
-  onSelectedCaseVolume: (value: string) => void;
-  safeBoxCases?: SafeBoxCase[];
-  selectedBoxSize: string;
-  onSelectedBoxSize: (value: string) => void;
-}
-
-export const SafeBoxCases = JSX<SafeBoxCasesProps>(
-  ({
-    caseVolumes = [],
-    selectedCaseVolume,
-    onSelectedCaseVolume,
-    safeBoxCases = [],
-    selectedBoxSize,
-    onSelectedBoxSize,
-  }) => (
-    <div className="flex flex-col @xl:flex-row gap-m order-1">
-      <div className="flex-1 min-w-0">
-        <WrapperSelect
-          data={caseVolumes}
-          fieldLabel="volume"
-          selected={selectedCaseVolume}
-          setSelected={onSelectedCaseVolume}
-          label="Размер"
-          placeholder="Выберите размер"
-        />
-      </div>
-      <div className="flex-1 min-w-0">
-        <WrapperSelect
-          data={safeBoxCases}
-          fieldLabel="safeBoxCasesSize"
-          selected={selectedBoxSize}
-          setSelected={onSelectedBoxSize}
-          label="Параметры ячейки, мм (ВхШхД)"
-          placeholder="Выберите параметр ячейки"
-        />
-      </div>
-    </div>
-  ),
-);

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

@@ -1,75 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useRegions, type Region } from '../../hooks/useRegions';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
-import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
-import { type SafeDepositRentalContent } from './SafeDepositRentalContent';
-import { SafeDepositRentalForm } from './SafeDepositRentalForm';
-import { type HandleFormStateChange, type SafeDepositRentalState } from './SafeDepositRentalTypes';
-import { useSafeBoxes } from './useSafeBoxes';
-import { getBranch, getCoordinates } from './utils';
-
-export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
-
-const DEFAULT_DAYS = 26;
-
-export const SafeDepositRental = JSX<SafeDepositRentalProps>(
-  ({ title, footnote, className = '', ...rest }) => {
-    const [showMap, setShowMap] = useState<boolean>(false);
-    const handleShowMap = useCallback(() => setShowMap((_) => !_), []);
-    const [safeDepositState, setStateDepositState] = useState<SafeDepositRentalState>({
-      selectedRegion: '',
-      selectedBranch: '',
-      selectedCaseVolume: '',
-      selectedBoxSize: '',
-      days: DEFAULT_DAYS,
-    });
-
-    const regions = useRegions();
-
-    const selectedRegion = normalizeSelectedRegion(safeDepositState.selectedRegion, regions);
-
-    const branches = useSafeBoxes(selectedRegion);
-
-    const handleChangeSafeDepositState: HandleFormStateChange = useCallback(
-      (state) => setStateDepositState((oldState) => ({ ...oldState, ...state })),
-      [setStateDepositState],
-    );
-
-    const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
-
-    return (
-      <BlockWrapper className={className} defaultPadding="" {...rest}>
-        <div className="p-4xl space-y-xl">
-          {title ? (
-            <Heading
-              title={title}
-              headingType="h3"
-              as="h2"
-              className="text-primary-text mb-s text-center"
-            />
-          ) : null}
-          <SafeDepositRentalForm
-            regions={regions}
-            branches={branches}
-            data={{ ...safeDepositState, selectedRegion }}
-            onClick={handleShowMap}
-            onChange={handleChangeSafeDepositState}
-          />
-          {footnote ? (
-            <Paragraph size="text-s" font="font-light">
-              {footnote}
-            </Paragraph>
-          ) : null}
-        </div>
-        {points.length && showMap ? <YandexMap points={points} className="h-[640px]" /> : null}
-      </BlockWrapper>
-    );
-  },
-);
-
-const normalizeSelectedRegion = (selectedRegion: string, regions?: Region[]) =>
-  !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;

package/mobile/src/components/SafeDepositRental/SafeDepositRental.ui.json

@@ -1,8 +0,0 @@
-{
-  "content": {},
-  "style": {
-    "ui:options": {
-      "minCols": 12
-    }
-  }
-}

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

@@ -1,8 +0,0 @@
-import { type Footnote } from '../../model/Footnote';
-import { type TitleProps } from '../../model/HeadlineType';
-import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
-
-/**
- * @title Аренда сейфовых ячеек
- */
-export type SafeDepositRentalContent = UniBlockContent & Footnote & TitleProps;

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

@@ -1,74 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { type Region } from '../../hooks/useRegions';
-import { Button } from '../../ui-kit/Button/Button';
-import { Text } from '../../ui-kit/Text/Text';
-import { RadioButtons } from './RadioButtons';
-import { RegionsAndBranches } from './RegionsAndBranches';
-import { RentalPeriod } from './RentalPeriod';
-import { SafeBoxCases } from './SafeBoxCases';
-import { type HandleFormStateChange, type SafeDepositRentalState } from './SafeDepositRentalTypes';
-import { type Branch, type SafeBoxCase, type SafeBoxCaseVolume } from './useSafeBoxes';
-
-export interface SafeDepositRentalFieldsProps extends SafeDepositRentalState {
-  regions?: Region[];
-  safeBoxCases?: SafeBoxCase[];
-  caseVolumes?: SafeBoxCaseVolume[];
-  branches?: Branch[];
-  onClick: () => void;
-  onChange: HandleFormStateChange;
-}
-
-export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
-  ({
-    regions,
-    selectedRegion,
-    branches,
-    selectedBranch,
-    days,
-    selectedCaseVolume,
-    selectedBoxSize,
-    safeBoxCases,
-    caseVolumes,
-    onChange,
-    onClick,
-  }) => (
-    <div className="contents @xl:block flex-1 space-y-xl">
-      <RegionsAndBranches
-        regions={regions}
-        selectedRegion={selectedRegion}
-        onSelectedRegion={(value) => onChange({ selectedRegion: value })}
-        branches={branches}
-        selectedBranch={selectedBranch}
-        onSelectedBranch={onSelectedBranch(onChange)}
-      />
-      <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 })}
-      />
-      <div className="order-4">
-        <Text size="text-l" font="font-light" color="text-secondary-text">
-          Тип договора
-        </Text>
-      </div>
-      <div className="contents @md:flex justify-between items-center gap-m">
-        <RadioButtons />
-        <Button className="order-6" version="primary" onClick={onClick}>
-          Офисы на карте
-        </Button>
-      </div>
-    </div>
-  ),
-);
-
-const onSelectedBranch = (onChange: HandleFormStateChange) => (value: string) => {
-  onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
-};
-
-const onSelectedCaseVolume = (onChange: HandleFormStateChange) => (value: string) => {
-  onChange({ selectedCaseVolume: value, selectedBoxSize: '' });
-};

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

@@ -1,62 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks/core';
-import { type Region } from '../../hooks/useRegions';
-import { SafeDepositRentalFields } from './SafeDepositRentalFields';
-import { SafeDepositRentalTotal } from './SafeDepositRentalTotal';
-import { type SafeDepositRentalState } from './SafeDepositRentalTypes';
-import { type Branch, type SafeBoxCase, type SafeBoxCaseVolume } from './useSafeBoxes';
-import { getBranch } from './utils';
-
-export interface SafeDepositRentalFormProps {
-  regions: Region[];
-  branches: Branch[];
-  data: SafeDepositRentalState;
-  onClick: () => void;
-  onChange: (data: Partial<SafeDepositRentalState>) => void;
-}
-
-export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) => {
-  const { regions, data, branches, onChange, onClick } = props;
-
-  useEffect(() => {
-    onChange({
-      selectedBranch: '',
-      selectedCaseVolume: '',
-      selectedBoxSize: '',
-    });
-  }, [data.selectedRegion, onChange]);
-
-  const branch = getBranch(branches, data.selectedBranch);
-  const caseVolumes = getCaseVolumes(branch?.safeBoxCaseVolumes);
-
-  const safeBoxCases = getCaseVolume(
-    branch?.safeBoxCaseVolumes,
-    data.selectedCaseVolume,
-  )?.safeBoxCases;
-
-  const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
-
-  return (
-    <div className="flex flex-col @4xl:flex-row gap-4xl align-top">
-      <SafeDepositRentalFields
-        {...data}
-        regions={regions}
-        onClick={onClick}
-        branches={branches}
-        caseVolumes={caseVolumes}
-        safeBoxCases={safeBoxCases}
-        onChange={onChange}
-      />
-      <SafeDepositRentalTotal days={data.days} tariffs={tariffs} />
-    </div>
-  );
-});
-
-const getCaseVolumes = (safeBoxCaseVolumes?: SafeBoxCaseVolume[]) =>
-  safeBoxCaseVolumes?.length ? safeBoxCaseVolumes?.filter((_) => _?.safeBoxCases?.length) : [];
-
-const getCaseVolume = (caseVolumes?: SafeBoxCaseVolume[], selectedCaseVolume?: string) =>
-  caseVolumes?.find((_) => _.volume === selectedCaseVolume);
-
-const getTariffs = (safeBoxCases?: SafeBoxCase[], selectedBoxSize?: string) =>
-  safeBoxCases?.find((_) => _.safeBoxCasesSize === selectedBoxSize)?.tariffs;

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

@@ -1,74 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { Text } from '../../ui-kit/Text/Text';
-import { type Tariff } from './useSafeBoxes';
-
-export interface SafeDepositRentalTotalProps {
-  days: number;
-  tariffs?: Tariff[];
-}
-
-export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days, tariffs = [] }) => {
-  const price = calculatePrice(days, tariffs);
-  const imageDescription = 'На рисунке изображена пачка листов\nформата А4';
-
-  return (
-    <div className="contents @xl:flex flex-col justify-between gap-xl order-2">
-      <div className="flex flex-col @xl:flex-row gap-x-6xl gap-y-2xl order-5 @xl:order-none py-2xl @xl:py-0 border-t border-main-divider @xl:border-none">
-        {renderTotal('Аренда за', days)}
-        {renderTotal('Цена', price + ' ₽')}
-      </div>
-      <div className="@xl:hidden order-3 mb-xs">
-        <Paragraph size="text-s" font="font-light" color="text-secondary-text">
-          {imageDescription}
-        </Paragraph>
-      </div>
-      <div className="flex flex-col items-center gap-s order-3 @xl:order-none mb-xl @xl:mb-0 bg-primary-main py-s @xl:p-3xl text-center">
-        <Icon className="@xl:h-60" name="PackA4Icon" />
-        <div className="hidden @xl:inline opacity-80 whitespace-pre-line">
-          <Paragraph size="text-s" font="font-light" color="text-white">
-            {imageDescription}
-          </Paragraph>
-        </div>
-      </div>
-    </div>
-  );
-});
-
-const renderTotal = (label: string, total: string | number) => (
-  <div className="flex justify-between items-center gap-y-xs @xl:flex-col @xl:items-start">
-    <Text size="text-l" font="font-light" color="text-secondary-text">
-      {label}
-    </Text>
-    <span className="text-l @xl:text-h3 text-primary-text">{total}</span>
-  </div>
-);
-
-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: number) => {
-  let tariffType = 1;
-
-  switch (true) {
-    case days > 30 && days <= 90:
-      tariffType = 2;
-      break;
-
-    case days > 90 && days <= 180:
-      tariffType = 3;
-      break;
-
-    case days > 180 && days <= 365:
-      tariffType = 4;
-      break;
-  }
-
-  return tariffType;
-};

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

@@ -1,9 +0,0 @@
-export interface SafeDepositRentalState {
-  selectedRegion: string;
-  selectedBranch: string;
-  selectedCaseVolume: string;
-  selectedBoxSize: string;
-  days: number;
-}
-
-export type HandleFormStateChange = (state: Partial<SafeDepositRentalState>) => void;

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

@@ -1,33 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { type Option } from '../../ui-kit/Select/Option';
-import { Select } from '../../ui-kit/Select/Select';
-import { type Currency } from '../ExchangeRateTile/CurrencyProps';
-
-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 }) => {
-    const dataFormat: Option[] = data
-      .filter(Boolean)
-      .map((_) => ({ key: _?.[fieldValue || fieldLabel], text: _?.[fieldLabel] }));
-    const selectedObj = dataFormat.find((_) => _.key === selected);
-
-    return (
-      <Select
-        options={dataFormat}
-        label={label}
-        placeholder={placeholder || selected}
-        onChange={(_) => setSelected(_.key as Currency)}
-        value={selectedObj}
-      />
-    );
-  },
-);