@redneckz/wildless-cms-uni-blocks 0.7.8 → 0.8.0

package/src/components/ApplicationForm/ApplicationFormCredit.tsx

@@ -0,0 +1,91 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useSafeBoxes } from '../../hooks/useSafeBoxes';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { useGetRegions } from '../SafeDepositRental/useGetRegions';
+import type { ApplicationFormsProps } from './ApplicationFormsProps';
+import { Footnote } from './Footnote';
+import { normalizeSelectedRegion } from './normalizeSelectedRegion';
+import { renderBankOffices } from './renderBankOffices';
+import { renderCreditParameters } from './renderCreditParameters';
+import { renderDataOrganization } from './renderDataOrganization';
+import { renderSubmitButton } from './renderSubmitButton';
+import { useFormHandlers } from './useFormHandlers';
+
+export interface CreditFormState {
+  amount: number;
+  term: number;
+  fullName: string;
+  inn: string;
+  name: string;
+  phone: string;
+  mail: string;
+  region: string;
+  department: string;
+  annualRevenue: string;
+}
+
+export const MIN_CREDIT_AMOUNT = 50000;
+export const MAX_CREDIT_AMOUNT = 3000000;
+export const ITEMS_CREDIT_AMOUNT = ['От 50 000 ₽', 'До 3 000 000 ₽'];
+
+export const MIN_CREDIT_TERM = 1;
+export const MAX_CREDIT_TERM = 60;
+export const ITEMS_CREDIT_TERM = ['От 1 года', 'До 5 лет'];
+
+export const ApplicationFormCredit = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, handleSubmit } = props;
+  const [formState, setFormState] = useState<CreditFormState>({
+    amount: MIN_CREDIT_AMOUNT,
+    term: MIN_CREDIT_TERM,
+    fullName: '',
+    inn: '',
+    name: '',
+    phone: '',
+    mail: '',
+    region: '',
+    department: '',
+    annualRevenue: '',
+  });
+
+  const { amount, term, fullName, inn, name, phone, mail, region, department, annualRevenue } =
+    formState;
+
+  const regions = useGetRegions();
+
+  const { handleChange, onSubmit } = useFormHandlers<CreditFormState>({
+    formState,
+    handleSubmit,
+    setFormState,
+    typeForm: 'cred',
+  });
+
+  const selectedRegion = normalizeSelectedRegion(formState.region, regions);
+
+  const branches = useSafeBoxes(region);
+
+  useEffect(() => {
+    handleChange({
+      department: '',
+    });
+  }, [formState.region, handleChange]);
+
+  return (
+    <form onSubmit={onSubmit} className="container">
+      <Heading headingType="h6" title="Параметры кредита" className="text-center mb-4" />
+      {renderCreditParameters({ amount, term, handleChange })}
+      <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
+      {renderDataOrganization({ fullName, inn, name, phone, mail, annualRevenue, handleChange })}
+      <Heading headingType="h6" title="Офис банка" className="text-center mb-4" />
+      {renderBankOffices({
+        regions,
+        region: selectedRegion,
+        branches,
+        department,
+        handleChange,
+      })}
+      {renderSubmitButton(button, 'mb-4')}
+      <Footnote link={link} />
+    </form>
+  );
+});

package/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -0,0 +1,74 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Input } from '../../ui-kit/Input/Input';
+import type { ApplicationFormsProps } from './ApplicationFormsProps';
+import { Footnote } from './Footnote';
+import type { HandleFormStateChange } from './models';
+import { renderSubmitButton } from './renderSubmitButton';
+import { useFormHandlers } from './useFormHandlers';
+
+export interface DepositFormState {
+  name: string;
+  phone: string;
+}
+
+export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, handleSubmit } = props;
+
+  const [formState, setFormState] = useState<DepositFormState>({
+    name: '',
+    phone: '',
+  });
+
+  const { handleChange, onSubmit } = useFormHandlers<DepositFormState>({
+    formState,
+    handleSubmit,
+    setFormState,
+    typeForm: 'dpst',
+  });
+
+  return (
+    <form onSubmit={onSubmit} className="container">
+      <Heading
+        headingType="h6"
+        title="Оставьте заявку и мы ответим на любые вопросы по депозитам"
+        className="text-center mb-4"
+      />
+      {renderDataOrganization({ name: formState.name, phone: formState.phone, handleChange })}
+      <div className="flex justify-between items-center max-w-[560px] m-auto">
+        <div className="flex-1">
+          <Footnote link={link} />
+        </div>
+        {renderSubmitButton(button)}
+      </div>
+    </form>
+  );
+});
+
+interface RenderDataOrganizationProps {
+  name: string;
+  phone: string;
+  handleChange: HandleFormStateChange<DepositFormState>;
+}
+
+const renderDataOrganization = ({ name, phone, handleChange }: RenderDataOrganizationProps) => (
+  <div className="max-w-[560px] m-auto">
+    <Input
+      className="shrink-0 text-l w-full mb-5"
+      type="text"
+      aria-label="Имя"
+      label="Имя"
+      value={name}
+      onChange={(value) => handleChange({ name: value })}
+    />
+    <Input
+      className="shrink-0 text-l w-full mb-5"
+      type="text"
+      aria-label="Телефон"
+      label="Телефон"
+      value={phone}
+      onChange={(value) => handleChange({ phone: value })}
+    />
+  </div>
+);

package/src/components/ApplicationForm/ApplicationFormWed.tsx

@@ -0,0 +1,143 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Input } from '../../ui-kit/Input/Input';
+import type { ApplicationFormsProps } from './ApplicationFormsProps';
+import { Footnote } from './Footnote';
+import type { HandleFormStateChange } from './models';
+import { renderContacts } from './renderContacts';
+import { renderQuestionsInterested } from './renderQuestionsInterested';
+import { renderSubmitButton } from './renderSubmitButton';
+import { useFormHandlers } from './useFormHandlers';
+
+export interface WedFormState {
+  fullName: string;
+  name: string;
+  phone: string;
+  mail: string;
+  currencyControl: boolean;
+  documentaryOperations: boolean;
+  conversionOperations: boolean;
+  text: string;
+}
+
+export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, handleSubmit } = props;
+
+  const [formState, setFormState] = useState<WedFormState>({
+    fullName: '',
+    name: '',
+    phone: '',
+    mail: '',
+    currencyControl: false,
+    documentaryOperations: false,
+    conversionOperations: false,
+    text: '',
+  });
+
+  const {
+    fullName,
+    name,
+    phone,
+    mail,
+    currencyControl,
+    documentaryOperations,
+    conversionOperations,
+    text,
+  } = formState;
+
+  const { handleChange, onSubmit } = useFormHandlers<WedFormState>({
+    formState,
+    handleSubmit,
+    setFormState,
+    typeForm: 'kved',
+  });
+
+  return (
+    <form onSubmit={onSubmit} className="container">
+      <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
+      {renderDataOrganization({ fullName, name, phone, mail, handleChange })}
+      <Heading headingType="h6" title="Интересующий вопрос" className="text-center mb-4" />
+      {renderQuestionsInterested({
+        currencyControl,
+        documentaryOperations,
+        conversionOperations,
+        text,
+        handleChange,
+      })}
+      <div className="flex items-center pb-9 mb-9 border-b border-main-divider">
+        {renderSubmitButton(button, 'mr-5')}
+        <Footnote link={link} />
+      </div>
+      <Heading
+        headingType="h6"
+        title="Или свяжитесь с нами удобным способом"
+        className="text-center mb-4"
+      />
+      {renderContacts()}
+    </form>
+  );
+});
+
+interface RenderDataOrganizationProps {
+  fullName: string;
+  name: string;
+  phone: string;
+  mail: string;
+  handleChange: HandleFormStateChange<WedFormState>;
+}
+
+const renderDataOrganization = ({
+  fullName,
+  name,
+  phone,
+  mail,
+  handleChange,
+}: RenderDataOrganizationProps) => (
+  <div>
+    <div className="flex justify-between gap-5 mb-5">
+      <div className="w-1/2">
+        <Input
+          className="shrink-0 text-l w-full"
+          type="text"
+          aria-label="Наименование организации"
+          label="Наименование организации"
+          value={fullName}
+          onChange={(value) => handleChange({ fullName: value })}
+        />
+      </div>
+      <div className="w-1/2">
+        <Input
+          className="shrink-0 text-l w-full"
+          type="text"
+          aria-label="ФИО"
+          label="ФИО"
+          value={name}
+          onChange={(value) => handleChange({ name: value })}
+        />
+      </div>
+    </div>
+    <div className="flex justify-between gap-5 mb-7">
+      <div className="w-1/2">
+        <Input
+          className="shrink-0 text-l w-full"
+          type="text"
+          aria-label="Телефон"
+          label="Телефон"
+          value={phone}
+          onChange={(value) => handleChange({ phone: value })}
+        />
+      </div>
+      <div className="w-1/2">
+        <Input
+          className="shrink-0 text-l w-full"
+          type="text"
+          aria-label="Электронная почта"
+          label="Электронная почта"
+          value={mail}
+          onChange={(value) => handleChange({ mail: value })}
+        />
+      </div>
+    </div>
+  </div>
+);

package/src/components/ApplicationForm/ApplicationFormsProps.ts

@@ -0,0 +1,8 @@
+import type { LinkProps } from '../../model/LinkProps';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+export interface ApplicationFormsProps {
+  button?: ButtonProps;
+  link?: LinkProps;
+  handleSubmit: (data: any) => void;
+}

package/src/components/ApplicationForm/Footnote.tsx

@@ -0,0 +1,25 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+import { Button } from '../../ui-kit/Button/Button';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
+
+interface FootnoteProps {
+  link?: LinkProps;
+}
+
+export const Footnote = JSX<FootnoteProps>(({ link }) => (
+  <Paragraph size="text-s-light" color="text-secondary-text">
+    <Text>Нажимая кнопку вы подтверждаете согласие с </Text>
+    {link ? (
+      <Button
+        href={link.href}
+        ariaLabel="условия передачи данных"
+        target={link.target}
+        className="text-primary-main"
+      >
+        <Text>{link.text}</Text>
+      </Button>
+    ) : null}
+  </Paragraph>
+));

package/src/components/ApplicationForm/ResponseNotification.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
+
+interface ResponseNotificationProps {
+  responceType?: 'OK' | 'Fail';
+}
+
+export const ResponseNotification = JSX<ResponseNotificationProps>(({ responceType }) => {
+  const responceOK = responceType === 'OK';
+  const backgroundColor = responceOK ? 'bg-responce-ok' : 'bg-responce-fail';
+
+  return (
+    <div className={`flex items-center mt-5 p-5 rounded-md ${backgroundColor}`}>
+      {responceOK ? (
+        <Img image={{ icon: 'ResponceOKIcon' }} width="42" height="42" className="mr-4" />
+      ) : (
+        <Img image={{ icon: 'ResponceFailIcon' }} width="37" height="34" className="mr-4" />
+      )}
+      <div>
+        <Heading
+          headingType="h6"
+          title={responceOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку'}
+          className="mb-1"
+        />
+        <Text size="text-l-light" color="text-secondary-text">
+          {responceOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее'}
+        </Text>
+      </div>
+    </div>
+  );
+});

package/src/components/ApplicationForm/WrapperSelect.tsx

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { OptionProps, Select } from '../../ui-kit/Select/Select';
+import { 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: OptionProps[] = 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}
+      />
+    );
+  },
+);

package/src/components/ApplicationForm/acquiringTypes.ts

@@ -0,0 +1,24 @@
+import { Select } from './models';
+
+export const ACQUIRING_TYPES: Select[] = [
+  {
+    code: '1',
+    name: 'Торговый эквайринг',
+  },
+  {
+    code: '2',
+    name: 'Мобильный эквайринг',
+  },
+  {
+    code: '3',
+    name: 'Интернет-эквайринг',
+  },
+  {
+    code: '4',
+    name: 'QR-эквайринг (СБП)',
+  },
+  {
+    code: '5',
+    name: 'Все виды эквайринга',
+  },
+];

package/src/components/ApplicationForm/models.ts

@@ -0,0 +1,7 @@
+export interface Select {
+  id?: number;
+  code?: string;
+  name?: string;
+}
+
+export type HandleFormStateChange<T> = (state: Partial<T>) => void;

package/src/components/ApplicationForm/normalizeSelectedRegion.ts

@@ -0,0 +1,4 @@
+import { Region } from '../../hooks/useRegions';
+
+export const normalizeSelectedRegion = (selectedRegion: string, regions?: Region[]) =>
+  !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;

package/src/components/ApplicationForm/renderBankOffices.tsx

@@ -0,0 +1,45 @@
+import { Branch } from '../../hooks/useSafeBoxes';
+import type { CreditFormState } from './ApplicationFormCredit';
+import type { HandleFormStateChange, Select } from './models';
+import { WrapperSelect } from './WrapperSelect';
+
+interface RenderBankOfficesProps {
+  regions: Select[];
+  region: string;
+  branches: Branch[];
+  department: string;
+  handleChange: HandleFormStateChange<CreditFormState>;
+}
+
+export const renderBankOffices = ({
+  regions,
+  region,
+  branches,
+  department,
+  handleChange,
+}: RenderBankOfficesProps) => (
+  <div className="flex justify-between gap-5 mb-7">
+    <div className="w-1/2">
+      <WrapperSelect
+        data={regions}
+        fieldValue="code"
+        fieldLabel="name"
+        selected={region}
+        setSelected={(value) => handleChange({ region: value })}
+        label="Регион"
+        placeholder="Выберите регион"
+      />
+    </div>
+    <div className="w-1/2">
+      <WrapperSelect
+        data={branches}
+        fieldValue="branchCode"
+        fieldLabel="address"
+        selected={department}
+        setSelected={(value) => handleChange({ department: value })}
+        label="Адрес"
+        placeholder="Выберите адрес"
+      />
+    </div>
+  </div>
+);

package/src/components/ApplicationForm/renderContacts.tsx

@@ -0,0 +1,22 @@
+import { Img } from '../../ui-kit/Img/Img';
+
+export const renderContacts = () => (
+  <div className="flex">
+    <a
+      className="flex items-center text-primary-text no-underline mr-6"
+      href={`tel:8 (800) 200-78-70`}
+      aria-label="8 (800) 200-78-70"
+    >
+      <Img image={{ icon: 'PhoneIcon' }} width="24" height="24" className="mr-3" />
+      <span>8 (800) 200-78-70</span>
+    </a>
+    <a
+      className="flex items-center text-primary-text no-underline"
+      aria-label="ved@rshb.ru"
+      href={`mailto:ved@rshb.ru`}
+    >
+      <Img image={{ icon: 'MailIcon' }} width="24" height="24" className="mr-3" />
+      <span>ved@rshb.ru</span>
+    </a>
+  </div>
+);

package/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -0,0 +1,61 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { Text } from '../../ui-kit/Text/Text';
+import {
+  CreditFormState,
+  ITEMS_CREDIT_AMOUNT,
+  ITEMS_CREDIT_TERM,
+  MAX_CREDIT_AMOUNT,
+  MAX_CREDIT_TERM,
+  MIN_CREDIT_AMOUNT,
+  MIN_CREDIT_TERM,
+} from './ApplicationFormCredit';
+import type { HandleFormStateChange } from './models';
+
+interface RenderCreditParametersProps {
+  amount: number;
+  term: number;
+  handleChange: HandleFormStateChange<CreditFormState>;
+}
+
+export const renderCreditParameters = ({
+  amount,
+  term,
+  handleChange,
+}: RenderCreditParametersProps) => (
+  <div className="flex justify-between gap-5 mb-7">
+    {renderInputRange({
+      label: 'Сумма кредита, ₽',
+      value: amount,
+      onChange: (value) => handleChange({ amount: value }),
+      min: MIN_CREDIT_AMOUNT,
+      max: MAX_CREDIT_AMOUNT,
+      items: ITEMS_CREDIT_AMOUNT,
+    })}
+    {renderInputRange({
+      label: 'Срок кредита, месяцев',
+      value: term,
+      onChange: (value) => handleChange({ term: value }),
+      min: MIN_CREDIT_TERM,
+      max: MAX_CREDIT_TERM,
+      items: ITEMS_CREDIT_TERM,
+    })}
+  </div>
+);
+
+interface RenderInputRangeProps {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  min: number;
+  max: number;
+  items: string[];
+}
+
+const renderInputRange = (props: RenderInputRangeProps) => (
+  <div className="w-1/2">
+    <label>
+      <Text size="text-m-light">{props.label}</Text>
+    </label>
+    <InputRange {...props} />
+  </div>
+);

package/src/components/ApplicationForm/renderDataOrganization.tsx

@@ -0,0 +1,78 @@
+import { Input } from '../../ui-kit/Input/Input';
+import type { CreditFormState } from './ApplicationFormCredit';
+import type { HandleFormStateChange } from './models';
+
+interface RenderDataOrganizationProps {
+  fullName: string;
+  inn: string;
+  name: string;
+  phone: string;
+  mail: string;
+  annualRevenue: string;
+  handleChange: HandleFormStateChange<CreditFormState>;
+}
+
+export const renderDataOrganization = ({
+  fullName,
+  inn,
+  name,
+  phone,
+  mail,
+  annualRevenue,
+  handleChange,
+}: RenderDataOrganizationProps) => (
+  <div className="flex justify-between gap-5 mb-7">
+    <div className="w-1/2">
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        aria-label="Наименование организации"
+        label="Наименование организации"
+        value={fullName}
+        onChange={(value) => handleChange({ fullName: value })}
+      />
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        aria-label="ИНН"
+        label="ИНН"
+        value={inn}
+        onChange={(value) => handleChange({ inn: value })}
+      />
+      <Input
+        className="shrink-0 text-l w-full "
+        type="text"
+        aria-label="Телефон"
+        label="Телефон"
+        value={phone}
+        onChange={(value) => handleChange({ phone: value })}
+      />
+    </div>
+    <div className="w-1/2">
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        aria-label="Годовая выручка, ₽"
+        label="Годовая выручка, ₽"
+        value={annualRevenue}
+        onChange={(value) => handleChange({ annualRevenue: value })}
+      />
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        aria-label="Контактное лицо"
+        label="Контактное лицо"
+        value={name}
+        onChange={(value) => handleChange({ name: value })}
+      />
+      <Input
+        className="shrink-0 text-l w-full "
+        type="text"
+        aria-label="Электронная почта"
+        label="Электронная почта"
+        value={mail}
+        onChange={(value) => handleChange({ mail: value })}
+      />
+    </div>
+  </div>
+);