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

package/mobile/src/components/Calculator/renderProposalMortgage.tsx

@@ -6,11 +6,16 @@ type porposalMortgage = {
   taxRefund: number;
 };
 
+const monthlyPayment = 777777; // TODO: hardcode
+
 export function renderProposalMortgage({ credit, period, taxRefund }: porposalMortgage) {
   return (
     <div>
-      {<CalculatorValueBlock title="Сумма кредита" value={credit} postfix="₽" />}
-      {<CalculatorValueBlock title="Срок" value={period} postfix="лет" />}
+      <div className="flex justify-between">
+        {<CalculatorValueBlock title="Сумма кредита" value={credit} postfix="₽" />}
+        {<CalculatorValueBlock title="Срок" value={period} postfix="лет" className="w-[120px]" />}
+      </div>
+      {<CalculatorValueBlock title="Ежемесячный платеж" value={monthlyPayment} postfix="₽" />}
       {<CalculatorValueBlock title="Налоговый вычет" value={taxRefund} postfix="₽" />}
     </div>
   );

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -0,0 +1,59 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { CurrencyInput } from '../../ui-kit/CurrencyInput/CurrencyInput';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import type { UniBlockProps } from '../../types';
+import type { GetButtonClassParams } from '../../ui-kit/Button/GetButtonClassParams';
+import type { CardTransferContent } from './CardTransferContent';
+import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
+import { getDisabledButtonClasses } from '../../ui-kit/Button/getDisabledButtonClasses';
+
+const AMOUNT_KEY = 'amount';
+const INPUT_LABEL = 'Сумма перевода';
+const BUTTON_TEXT = 'Далее';
+const PLACEHOLDER = '1500';
+const TITLE = 'Укажите сумму перевода';
+
+const FORM_URL = 'https://www.rshb.ru/p2p/';
+
+const BUTTON_CLASS_PARAMS: GetButtonClassParams = {
+  version: 'primary',
+  className: 'w-full h-[56px] px-9 mt-6',
+};
+
+export interface CardTransferProps extends CardTransferContent, UniBlockProps {}
+
+export const CardTransfer = JSX<CardTransferProps>(({ className = '', title = TITLE, ...rest }) => {
+  const [value, setValue] = useState<string>('');
+  const isDisabled = !Number(value);
+
+  return (
+    <BlockWrapper
+      className={`p-[50px] flex flex-col items-center font-sans bg-white ${className}`}
+      {...rest}
+    >
+      {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
+      <form className="w-[468px]" method="POST" action={FORM_URL}>
+        <CurrencyInput
+          name={AMOUNT_KEY}
+          value={value}
+          onChange={setValue}
+          placeholder={PLACEHOLDER}
+          label={INPUT_LABEL}
+        />
+        <button
+          type="submit"
+          className={
+            isDisabled
+              ? getDisabledButtonClasses(BUTTON_CLASS_PARAMS)
+              : getRegularButtonClasses(BUTTON_CLASS_PARAMS)
+          }
+          disabled={isDisabled}
+        >
+          {BUTTON_TEXT}
+        </button>
+      </form>
+    </BlockWrapper>
+  );
+});

package/mobile/src/components/CardTransfer/CardTransferContent.ts

@@ -0,0 +1,10 @@
+/**
+ * @title Перевод с карты на карту
+ */
+export type CardTransferContent = {
+  /**
+   * @title Заголовок
+   * @hidden
+   */
+  title?: string;
+};

package/mobile/src/components/ContentPage/ContentPage.page.json

@@ -2197,6 +2197,10 @@
         ]
       }
     },
+    {
+      "type": "CardTransfer",
+      "style": ["col-span-12"]
+    },
     {
       "type": "SafeDepositRental",
       "style": ["col-span-12"]

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

@@ -0,0 +1,13 @@
+{
+  "title": "Страница не найдена",
+  "subtitle": "Возможно неправильно набран адрес или такой странице не существует",
+  "error": {
+    "errorContentType": "Code",
+    "code": 404
+  },
+  "button": {
+    "text": "Вернуться на главную",
+    "version": "primary",
+    "target": "_blank"
+  }
+}

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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 Аренда сейфовых ячеек
  */