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

package/src/components/ErrorBlock/ErrorBlock.fixture.tsx

@@ -0,0 +1,53 @@
+import { context } from '../../react/setup-fixture';
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { ErrorBlock } from './ErrorBlock';
+
+const image: Picture = {
+  src: 'error.png',
+  format: 'webp',
+  alt: 'Ошибка',
+  size: {
+    width: 460,
+    height: 294,
+  },
+};
+
+const buttonPrimary: ButtonProps = {
+  href: '/credit-cards',
+  text: 'Вернуться на главную',
+  target: '_blank',
+  version: 'primary',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ErrorBlock
+        className="col-span-12"
+        context={context}
+        title="Страница не найдена"
+        subtitle="Возможно неправильно набран адрес или такой странице не существует"
+        error={{
+          errorContentType: 'Code',
+          code: 404,
+        }}
+        button={buttonPrimary}
+      />
+    </div>
+  ),
+  'error-with-image': (
+    <div className="container grid grid-cols-12">
+      <ErrorBlock
+        className="col-span-12"
+        context={context}
+        title="Страница не найдена"
+        subtitle="Возможно неправильно набран адрес или такой странице не существует"
+        error={{
+          errorContentType: 'Image',
+          image: image,
+        }}
+      />
+    </div>
+  ),
+};

package/src/components/ErrorBlock/ErrorBlock.tsx

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { ErrorBlockContent } from './ErrorBlockContent';
+import { useLink } from '../../hooks/useLink';
+import { Button } from '../../ui-kit/Button/Button';
+import { Img } from '../../ui-kit/Img/Img';
+import { Heading } from '../../ui-kit/Heading/Heading';
+
+export interface ErrorBlockProps extends ErrorBlockContent, UniBlockProps {}
+
+const renderErrorContent = (error: ErrorBlockContent['error']) => {
+  if (error?.errorContentType === 'Image' && error?.image) {
+    return <Img className="mb-7" image={error.image} />;
+  }
+
+  if (error?.errorContentType === 'Code' && error.code) {
+    return <div className="text-title-extra gradient-color-text">{error.code}</div>;
+  }
+
+  return null;
+};
+
+export const ErrorBlock = JSX<ErrorBlockProps>(
+  ({ context, className = '', title, subtitle, error, button }) => {
+    const { useRouter, handlerDecorator } = context;
+    const router = useRouter();
+
+    return (
+      <section className={`flex flex-col justify-center items-center ${className}`} role="listitem">
+        <div className="flex justify-center mb-7">{renderErrorContent(error)}</div>
+        {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
+        {subtitle ? <div className="text-xl-light text-left mb-7">{subtitle}</div> : null}
+        {button?.text ? (
+          <Button
+            className="py-4 px-9"
+            version={button?.version}
+            {...useLink({ router, handlerDecorator }, button)}
+          >
+            {button.text}
+          </Button>
+        ) : null}
+      </section>
+    );
+  },
+);

package/src/components/ErrorBlock/ErrorBlockContent.ts

@@ -0,0 +1,38 @@
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { EmptyOption } from '../../model/EmptyOptionType';
+
+/**
+ * @title Изображение
+ */
+export type ErrorImageDef = {
+  /** @default Image */
+  errorContentType: 'Image';
+  /** @title Изображение */
+  image?: Picture;
+};
+
+/**
+ * @title Код ошибки
+ */
+export type ErrorCodeDef = {
+  /** @default Code */
+  errorContentType: 'Code';
+  /** @title Код ошибки */
+  code?: number;
+};
+export type ErrorContentDef = EmptyOption | ErrorImageDef | ErrorCodeDef;
+
+/**
+ * @title Блок Ошибка
+ */
+export interface ErrorBlockContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Описание */
+  subtitle?: string;
+  /** @title Вид контента */
+  error?: ErrorContentDef;
+  /** @title Кнопка */
+  button?: ButtonProps;
+}

package/src/components/OfficeServicesBlock/OfficeServicesBlock.example.json

@@ -0,0 +1,33 @@
+{
+  "title": "Услуги",
+  "officesList": [
+    {
+      "text": "Обслуживание физических лиц",
+      "icon": { "icon": "CardTickIcon" }
+    },
+    {
+      "text": "Обслуживание юридических лиц",
+      "icon": { "icon": "EmptyWalletChangeIcon" }
+    },
+    {
+      "text": "Продажа монет из драгоценных металлов",
+      "icon": { "icon": "UserTickIcon" }
+    },
+    {
+      "text": "Аренда индивидуальных сейфовых ячеек",
+      "icon": { "icon": "UserTickIcon" }
+    },
+    {
+      "text": "Операции с обезличенными металлическими счетами",
+      "icon": { "icon": "ShieldTickIcon" }
+    },
+    {
+      "text": "Операции со слитками драгоценных металлов",
+      "icon": { "icon": "ShieldTickIcon" }
+    },
+    {
+      "text": "Передача фото и голоса в Единую биометрическую систему",
+      "icon": { "icon": "ShieldTickIcon" }
+    }
+  ]
+}

package/src/components/OfficeServicesBlock/OfficeServicesBlock.fixture.tsx

@@ -0,0 +1,44 @@
+import { context } from '../../react/setup-fixture';
+import { OfficeServicesBlock } from './OfficeServicesBlock';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <OfficeServicesBlock
+        className="col-span-4"
+        context={context}
+        title="Услуги"
+        officesList={[
+          {
+            text: 'Обслуживание физических лиц',
+            icon: { icon: 'CardTickIcon' },
+          },
+          {
+            text: 'Обслуживание юридических лиц',
+            icon: { icon: 'EmptyWalletChangeIcon' },
+          },
+          {
+            text: 'Продажа монет из драгоценных металлов',
+            icon: { icon: 'UserTickIcon' },
+          },
+          {
+            text: 'Аренда индивидуальных сейфовых ячеек',
+            icon: { icon: 'UserTickIcon' },
+          },
+          {
+            text: 'Операции с обезличенными металлическими счетами',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+          {
+            text: 'Операции со слитками драгоценных металлов',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+          {
+            text: 'Передача фото и голоса в Единую биометрическую систему',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -0,0 +1,41 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import type {
+  OfficeServicesBlockContent,
+  OfficeServicesBlockList,
+} from './OfficeServicesBlockContent';
+
+export interface OfficeServicesBlockProps extends OfficeServicesBlockContent, UniBlockProps {}
+
+export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
+  ({ className = '', context, title, officesList, anchor = '' }) => {
+    return (
+      <BlockWrapper
+        context={context}
+        id={anchor}
+        className={`font-sans bg-white p-12 flex flex-col ${className}`}
+      >
+        {title ? <Heading headingType="h5" className="mb-2.5" title={title} /> : null}
+        {officesList?.length ? officesList.map(renderListItems) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderListItems = (itemList: OfficeServicesBlockList, i) => (
+  <li key={`list_item_${String(i)}`} className="flex mb-2.5 list-none">
+    {itemList.icon ? (
+      <Img
+        className="mr-[14px] max-w-6 max-h-6"
+        width="24px"
+        height="24px"
+        asSVG
+        image={itemList.icon}
+      />
+    ) : null}
+    {itemList.text ? <span className="text-l-light">{itemList.text}</span> : null}
+  </li>
+);

package/src/components/OfficeServicesBlock/OfficeServicesBlockContent.ts

@@ -0,0 +1,26 @@
+import type { Picture } from '../../model/Picture';
+
+export interface OfficeServicesBlockList {
+  /**
+   *  @title Иконка
+   *  @default {
+   *   "size": {
+   *     "width": 24,
+   *     "height": 24
+   *   },
+   *   "format": "webp"
+   * }
+   */
+  icon?: Picture;
+  text?: string;
+}
+
+/**
+ * @title Офисные услуги
+ */
+export interface OfficeServicesBlockContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Список */
+  officesList?: OfficeServicesBlockList[];
+}

package/src/components/PictureText/PictureText.fixture.tsx

@@ -55,11 +55,11 @@ export const INSURANCE_TEXT: PictureTextContent = {
   benefits: [
     {
       label: 'Телесное повреждение',
-      description: 'Описание',
       icon: { icon: 'ShieldTickIcon' },
     },
     {
       label: 'Госпитализация застрахованного',
+      description: 'Описание',
       icon: { icon: 'ShieldTickIcon' },
     },
     {

package/src/components/PictureText/PictureText.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
-import type { PictureTextContent } from './PictureTextContent';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../types';
+import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
-import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
-import { Headline } from '../Headline/Headline';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import { Headline } from '../Headline/Headline';
+import type { PictureTextContent } from './PictureTextContent';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -42,7 +42,7 @@ export const PictureText = JSX<PictureTextProps>(
           align="center"
         />
         <div className={'flex justify-center gap-[122px] mt-[30px]'}>
-          {image?.src && <Img className={directionRight ? 'order-2 ml-6' : 'mr-6'} image={image} />}
+          {image?.src ? <Img className={directionRight ? 'order-2' : ''} image={image} /> : null}
           <div className="w-[558px] m-auto">
             {benefits?.length ? (
               <div className="flex flex-col gap-4">{benefits.map(renderBenefit(version))}</div>

package/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Branch } from './SafeDepositRentalContent';
+import { Region } from './useGetRegions';
+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,
+  }) => {
+    return (
+      <div className="flex justify-between mb-6">
+        <div className="w-full mr-4">
+          <WrapperSelect
+            data={regions}
+            fieldValue="code"
+            fieldLabel="name"
+            selected={selectedRegion}
+            setSelected={onSelectedRegion}
+            label="Город"
+          />
+        </div>
+        <div className="w-full">
+          <WrapperSelect
+            data={branches}
+            fieldValue="branchCode"
+            fieldLabel="address"
+            selected={selectedBranch}
+            setSelected={onSelectedBranch}
+            label="Отделение"
+            placeholder="Выберите отделение"
+          />
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/SafeDepositRental/RenderRadioButtons.tsx

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks/core';
+import { Radio } from '../../ui-kit/Radio/Radio';
+
+export const RenderRadioButtons = JSX(() => {
+  const [selectedOption, setSelectedOption] = useState('option1');
+
+  const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelectedOption(_.target.value);
+
+  return (
+    <div>
+      <Radio
+        className="mb-2"
+        name="contractType"
+        text="Простое хранение"
+        value="option1"
+        checked={selectedOption === 'option1'}
+        onChange={onChange}
+      />
+      <Radio
+        name="contractType"
+        text="Сделка с недвижимостью"
+        value="option2"
+        checked={selectedOption === 'option2'}
+        onChange={onChange}
+      />
+    </div>
+  );
+});

package/src/components/SafeDepositRental/RentalPeriod.tsx

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+
+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="mb-6">
+    <span className="block text-m-light mb-[3px]">Срок аренды</span>
+    <InputRange min={MIN} max={MAX} value={days} items={ITEMS} onChange={setDays} />
+  </div>
+));

package/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -0,0 +1,48 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { SafeBoxCase, SafeBoxCaseVolume } from './SafeDepositRentalContent';
+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,
+  }) => {
+    return (
+      <div className="flex justify-between mb-6">
+        <div className="mr-4 w-full">
+          <WrapperSelect
+            data={caseVolumes}
+            fieldLabel="volume"
+            selected={selectedCaseVolume}
+            setSelected={onSelectedCaseVolume}
+            label="Размер"
+            placeholder="Выберите размер"
+          />
+        </div>
+        <div className="w-full">
+          <WrapperSelect
+            data={safeBoxCases}
+            fieldLabel="safeBoxCasesSize"
+            selected={selectedBoxSize}
+            setSelected={onSelectedBoxSize}
+            label="Параметры ячейки, мм (ВхШхД)"
+            placeholder="Выберите параметр ячейки"
+          />
+        </div>
+      </div>
+    );
+  },
+);

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

@@ -1,5 +1,6 @@
 import { context } from '../../react/setup-fixture';
 import { SafeDepositRental } from './SafeDepositRental';
+
 export default {
   default: (
     <div className="container grid grid-cols-12 mb-1">

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -1,93 +1,23 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
 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 { SafeDepositRentalTotal } from './SafeDepositRentalTotal';
+import { useGetRegions } from './useGetRegions';
 
 export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
 
-const DEFAULT_DAYS = 26;
-
-const DATA = {
-  cities: [
-    {
-      city: 'Москва',
-      offices: [
-        {
-          office: 'выберите отделение',
-          rate: null,
-        },
-        {
-          office: 'МоскваОфис1',
-          rate: 1,
-        },
-        {
-          office: 'МоскваОфис2',
-          rate: 2,
-        },
-        {
-          office: 'МоскваОфис3',
-          rate: 3,
-        },
-      ],
-    },
-    {
-      city: 'Краснодар',
-      offices: [
-        {
-          office: 'КраснодарОфис1',
-          rate: 2,
-        },
-        {
-          office: 'КраснодарОфис2',
-          rate: 4,
-        },
-        {
-          office: 'КраснодарОфис3',
-          rate: 6,
-        },
-      ],
-    },
-  ],
-  cellDimensions: [
-    {
-      dimension: 'маленькая',
-    },
-    {
-      dimension: 'средняя',
-    },
-    {
-      dimension: 'большая',
-    },
-  ],
-  cellOptions: [
-    {
-      option: '125x225x375',
-    },
-    {
-      option: '200x300x400',
-    },
-    {
-      option: '300x400x500',
-    },
-  ],
-};
-
 export const SafeDepositRental = JSX<SafeDepositRentalProps>(
-  ({ context, className = '', ...rest }) => {
-    const [days, setDays] = useState(DEFAULT_DAYS);
-    const data = DATA;
+  ({ title, context, className = '', ...rest }) => {
+    const regions = useGetRegions();
 
     return (
       <BlockWrapper context={context} className={`bg-white px-8 py-12 ${className}`} {...rest}>
-        <div className="flex justify-between align-top mb-6">
-          {data?.cities?.length ? (
-            <SafeDepositRentalForm {...data} days={days} setDays={setDays} />
-          ) : null}
-          <SafeDepositRentalTotal days={days} />
-        </div>
+        {title ? (
+          <Heading title={title} headingType="h3" as="h2" className="mb-2.5 text-center" />
+        ) : null}
+        <SafeDepositRentalForm regions={regions} />
         <p className="text-s-light text-secondary-text">
           Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
           или процедуры ипотечной сделки

package/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -1,3 +1,24 @@
+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 Аренда сейфовых ячеек
  */