@redneckz/wildless-cms-uni-blocks 0.7.9 → 0.8.1

package/src/components/ApplicationForm/ApplicationFormAcquiring.tsx

@@ -0,0 +1,138 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Input } from '../../ui-kit/Input/Input';
+import { useGetRegions } from '../SafeDepositRental/useGetRegions';
+import { ACQUIRING_TYPES } from './acquiringTypes';
+import type { ApplicationFormsProps } from './ApplicationFormsProps';
+import { Footnote } from './Footnote';
+import type { HandleFormStateChange } from './models';
+import { normalizeSelectedRegion } from './normalizeSelectedRegion';
+import { renderSelects } from './renderSelects';
+import { renderSlideCheckboxes } from './renderSlideCheckboxes';
+import { renderSubmitButton } from './renderSubmitButton';
+import { useFormHandlers } from './useFormHandlers';
+
+export interface AcquiringFormState {
+  acquiringType: string;
+  region: string;
+  fullName: string;
+  inn: string;
+  name: string;
+  phone: string;
+  onlineСheckout: boolean;
+  posTerminal: boolean;
+}
+
+export const ApplicationFormAcquiring = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, handleSubmit } = props;
+
+  const [formState, setFormState] = useState<AcquiringFormState>({
+    acquiringType: '',
+    region: '',
+    fullName: '',
+    inn: '',
+    name: '',
+    phone: '',
+    onlineСheckout: false,
+    posTerminal: false,
+  });
+
+  const { acquiringType, region, fullName, inn, name, phone, onlineСheckout, posTerminal } =
+    formState;
+
+  const regions = useGetRegions();
+
+  const { handleChange, onSubmit } = useFormHandlers<AcquiringFormState>({
+    formState,
+    handleSubmit,
+    setFormState,
+    typeForm: 'acqr',
+  });
+
+  const selectedRegion = normalizeSelectedRegion(region, regions);
+
+  useEffect(() => {
+    setFormState((oldState) => ({
+      ...oldState,
+      acquiringType:
+        ACQUIRING_TYPES?.length && ACQUIRING_TYPES[0]?.code ? ACQUIRING_TYPES[0].code : '',
+    }));
+  }, []);
+
+  return (
+    <form onSubmit={onSubmit} className="container">
+      <Heading headingType="h6" title="Вид эквайринга и регион" className="text-center mb-4" />
+      {renderSelects({
+        acquiringType,
+        regions,
+        region: selectedRegion,
+        handleChange,
+      })}
+      <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
+      {renderDataOrganization({ fullName, inn, name, phone, handleChange })}
+      {renderSlideCheckboxes({
+        onlineСheckout,
+        posTerminal,
+        handleChange,
+      })}
+      {renderSubmitButton(button, 'mb-4')}
+      <Footnote link={link} />
+    </form>
+  );
+});
+
+interface RenderDataOrganizationProps {
+  fullName: string;
+  inn: string;
+  name: string;
+  phone: string;
+  handleChange: HandleFormStateChange<AcquiringFormState>;
+}
+
+const renderDataOrganization = ({
+  fullName,
+  inn,
+  name,
+  phone,
+  handleChange,
+}: RenderDataOrganizationProps) => (
+  <div className="flex justify-between gap-5 mb-5">
+    <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"
+        type="text"
+        aria-label="Контактное лицо"
+        label="Контактное лицо"
+        value={name}
+        onChange={(value) => handleChange({ name: value })}
+      />
+    </div>
+    <div className="w-1/2">
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        label="ИНН"
+        aria-label="ИНН"
+        value={inn}
+        onChange={(value) => handleChange({ inn: value })}
+      />
+      <Input
+        className="shrink-0 text-l w-full"
+        type="text"
+        label="Телефон"
+        aria-label="Телефон"
+        value={phone}
+        onChange={(value) => handleChange({ phone: value })}
+      />
+    </div>
+  </div>
+);

package/src/components/ApplicationForm/ApplicationFormBusinessCard.tsx

@@ -0,0 +1,134 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { Region } from '../../hooks/useRegions';
+import { Input } from '../../ui-kit/Input/Input';
+import { useGetRegions } from '../SafeDepositRental/useGetRegions';
+import type { ApplicationFormsProps } from './ApplicationFormsProps';
+import { Footnote } from './Footnote';
+import type { HandleFormStateChange } from './models';
+import { normalizeSelectedRegion } from './normalizeSelectedRegion';
+import { renderSubmitButton } from './renderSubmitButton';
+import { useFormHandlers } from './useFormHandlers';
+import { WrapperSelect } from './WrapperSelect';
+
+export interface BusinessCardFormState {
+  region: string;
+  name: string;
+  phone: string;
+  inn: string;
+  mail: string;
+}
+
+export const ApplicationFormBusinessCard = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, handleSubmit } = props;
+  const [formState, setFormState] = useState<BusinessCardFormState>({
+    region: '',
+    name: '',
+    phone: '',
+    inn: '',
+    mail: '',
+  });
+
+  const { name, phone, inn, mail } = formState;
+
+  const regions = useGetRegions();
+
+  const { handleChange, onSubmit } = useFormHandlers<BusinessCardFormState>({
+    formState,
+    handleSubmit,
+    setFormState,
+    typeForm: 'bcrd',
+  });
+
+  const selectedRegion = normalizeSelectedRegion(formState.region, regions);
+
+  return (
+    <form onSubmit={onSubmit} className="container">
+      {renderRegion({
+        regions,
+        region: selectedRegion,
+        handleChange,
+      })}
+      {renderDataOrganization({ name, phone, inn, mail, handleChange })}
+      {renderSubmitButton(button, 'mb-4')}
+      <Footnote link={link} />
+    </form>
+  );
+});
+
+interface RenderDataOrganizationProps {
+  name: string;
+  phone: string;
+  mail: string;
+  inn: string;
+  handleChange: HandleFormStateChange<BusinessCardFormState>;
+}
+
+const renderDataOrganization = ({
+  name,
+  phone,
+  mail,
+  inn,
+  handleChange,
+}: RenderDataOrganizationProps) => (
+  <div className="flex justify-between gap-5">
+    <div className="w-1/2">
+      <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={inn}
+        onChange={(value) => handleChange({ inn: value })}
+      />
+    </div>
+    <div className="w-1/2">
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        aria-label="Телефон"
+        label="Телефон"
+        value={phone}
+        onChange={(value) => handleChange({ phone: value })}
+      />
+      <Input
+        className="shrink-0 text-l w-full "
+        type="text"
+        aria-label="Электронная почта"
+        label="Электронная почта"
+        value={mail}
+        onChange={(value) => handleChange({ mail: value })}
+      />
+    </div>
+  </div>
+);
+
+interface RenderRegionProps {
+  regions: Region[];
+  region: string;
+  handleChange: HandleFormStateChange<BusinessCardFormState>;
+}
+
+const renderRegion = ({ regions, region, handleChange }: RenderRegionProps) => (
+  <div className="flex justify-between gap-5 mb-5">
+    <div className="w-full">
+      <WrapperSelect
+        data={regions}
+        fieldValue="code"
+        fieldLabel="name"
+        selected={region}
+        setSelected={(value) => handleChange({ region: value })}
+        label="Регион"
+        placeholder="Выберите регион"
+      />
+    </div>
+  </div>
+);

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -0,0 +1,19 @@
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { LinkProps } from '../../model/LinkProps';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Форма заявки
+ */
+export type ApplicationFormContent = HeadlineCommonProps & {
+  /**
+   * @title Вид заявки
+   * @default credit
+   * @enumNames ["Бизнес-карта", "ВЭД", "Депозит", "Кредит", "Эквайринг"]
+   */
+  typeForm?: 'business-card' | 'wed' | 'deposit' | 'credit' | 'acquiring';
+  /** @title Кнопка */
+  button?: ButtonProps;
+  /** @title Условия передачи данных */
+  link?: LinkProps;
+};

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>
+  );
+});