@redneckz/wildless-cms-uni-blocks 0.14.775 → 0.14.777

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

@@ -0,0 +1,70 @@
+[
+  [
+    "Лид форма",
+    {
+      "content": {
+        "version": "primary",
+        "padding": "",
+        "title": "Лид форма",
+        "typeForm": "OUTSERVICE",
+        "endpoint": "lead",
+        "sections": [
+          {
+            "columns": 2,
+            "inputs": [
+              {
+                "name": "surname",
+                "required": true
+              },
+              {
+                "name": "name",
+                "required": true
+              },
+              {
+                "name": "middleName"
+              },
+              {
+                "name": "limitedBirthday",
+                "required": true
+              },
+              {
+                "name": "phone",
+                "required": true
+              },
+              {
+                "name": "email",
+                "required": true
+              }
+            ]
+          },
+          {
+            "inputs": [
+              {
+                "name": "processPersonalDataFlg",
+                "required": true
+              },
+              {
+                "name": "consentProviderFlg",
+                "required": true
+              },
+              {
+                "name": "consentOthersFlg",
+                "required": true
+              },
+              {
+                "name": "consentInformFlg"
+              },
+              {
+                "name": "consentPfrFlg"
+              }
+            ]
+          }
+        ],
+        "button": {
+          "text": "Оформить",
+          "version": "primary"
+        }
+      }
+    }
+  ]
+]

package/mobile/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -0,0 +1,87 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm/useForm';
+import { type FieldRetailDef } from '../../retail/model/RetailFormContent';
+import { validatorObj } from '../../retail/validator/validatorObj';
+import { ApplicationFormLayout } from '../../ui-kit/ApplicationFormLayout/ApplicationFormLayout';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
+import { getFormValidator } from '../../ui-kit/FormField/getObjectValidator';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { renderTitle } from '../../ui-kit/FormField/renderTitle';
+import { Loader } from '../../ui-kit/Loader/Loader';
+import { ResponseTypeDialog } from '../../ui-kit/ResponseTypeDialog/ResponseTypeDialog';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { getApplicationFormData } from './applicationFormData';
+import { type ApplicationLeadFormContent } from './ApplicationLeadFormContent';
+import { renderInputs } from './renderInputs';
+import { renderSubmitButton } from './renderSubmitButton';
+import { useApplicationLeadApi } from './useApplicationLeadApi';
+import { useInitApplicationLead } from './useInitApplicationLead';
+
+interface ApplicationLeadFormProps extends ApplicationLeadFormContent, UniBlockProps {}
+
+export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
+  ({
+    className,
+    title,
+    programId = '',
+    nextStepLink = '/credit-lead',
+    button,
+    productType = 'credit',
+    ...rest
+  }) => {
+    const applicationFormData = useMemo(() => getApplicationFormData(productType), [productType]);
+    const inputs = useMemo(
+      () => (applicationFormData?.flatMap((_) => _?.inputs) || []) as FieldRetailDef[],
+      [applicationFormData],
+    );
+
+    const formValidator = useMemo(() => getFormValidator(inputs, validatorObj), [inputs]);
+
+    const [initialFormState, { isLoading }] = useInitApplicationLead(
+      inputs,
+      nextStepLink,
+      productType,
+    );
+    const { isSending, ok, handleSubmit } = useApplicationLeadApi({
+      programId,
+      nextStepLink,
+      productType,
+    });
+
+    const [, { field, onSubmit }] = useForm(initialFormState, {
+      formValidator,
+      onSubmit: handleSubmit,
+    });
+
+    const responseTypeDialog = useDialog(ResponseTypeDialog);
+    useEffect(() => {
+      if (ok !== undefined) {
+        responseTypeDialog.open({ ok });
+      }
+    }, [ok]);
+
+    return (
+      <ApplicationFormLayout
+        className={style('container space-y-m', className)}
+        title={title}
+        {...rest}
+      >
+        <form onSubmit={onSubmit} className="space-y-m relative">
+          {isLoading ? <Loader blur={false} /> : null}
+          {applicationFormData.map((_, i) => (
+            <div
+              key={`section-${i}`}
+              className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}
+            >
+              {renderTitle(_.title)}
+              {renderInputs({ field, inputs: _?.inputs }, productType)}
+            </div>
+          ))}
+          {renderSubmitButton(button, isSending)}
+        </form>
+      </ApplicationFormLayout>
+    );
+  },
+);

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

@@ -0,0 +1 @@
+{}

package/mobile/src/components/ApplicationLeadForm/ApplicationLeadFormContent.ts

@@ -0,0 +1,26 @@
+import { type TextProps, type TitleProps } from '../../model/HeadlineType';
+import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
+import { type InputRetailSectionsType } from '../../retail/model/InputSectionsType';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+export type SubmitButtonProps = TextProps & {
+  version?: LinkButtonVersion;
+};
+
+export type ProductType = 'credit' | 'creditCard' | 'debitCard';
+
+/**
+ * @title Форма заявки настраиваемая
+ */
+export type ApplicationLeadFormContent = UniBlockContent &
+  TitleProps &
+  InputRetailSectionsType & {
+    /** @title Кнопка */
+    button?: SubmitButtonProps;
+    /** @title Номер кредитной программы */
+    programId?: string;
+    /** @title адресс следующей страницы заявки */
+    nextStepLink?: string;
+    /** @title тип продукта */
+    productType?: ProductType;
+  };

package/mobile/src/components/ApplicationLeadForm/Footnote.tsx

@@ -0,0 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type TextProps } from '../../model/HeadlineType';
+import { type LinkProps } from '../../model/LinkProps';
+import { Link } from '../../ui-kit/Link/Link';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
+
+type FootnoteProps = TextProps & {
+  link?: LinkProps;
+};
+
+export const Footnote = JSX<FootnoteProps>(({ text, link }) => (
+  <Paragraph size="text-l" font="font-light" color="text-secondary-text">
+    {text ? <Text>{text}</Text> : null}
+    {link ? (
+      <Link {...link} ariaLabel="условия передачи данных">
+        {link.text}
+      </Link>
+    ) : null}
+  </Paragraph>
+));

package/mobile/src/components/ApplicationLeadForm/GroupedConsents.tsx

@@ -0,0 +1,74 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import { InputsConsentsMap } from '../../retail/inputs';
+import { type LeadFormState } from '../../retail/model/LeadFormState';
+import { type FieldRetailDef } from '../../retail/model/RetailFormContent';
+import { Button } from '../../ui-kit/Button/Button';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { getField } from '../../ui-kit/FormField/getField';
+import { agreementValidator } from '../../ui-kit/FormField/validators';
+import { ToggleIcon } from '../../ui-kit/Icon/ToggleIcon';
+import { renderErrorText } from '../../ui-kit/Input/renderErrorText';
+import { withValidator } from '../../validation/withValidator';
+
+export interface GroupedConsentsProps {
+  inputs?: FieldRetailDef[];
+  field: FormFieldRegisterer<LeadFormState>;
+}
+
+const CONSENT_ALL_DOCS_TEXT = 'Согласие на все документы';
+const CONSENT_REQUIRED = 'Отметьте все обязательные соглашения';
+
+export const GroupedConsents = JSX<GroupedConsentsProps>(({ inputs = [], field, key }) => {
+  const isChecked = inputs.every((_) => Boolean(field(_.name as keyof LeadFormState).value));
+
+  const handleGeneralToggle = useCallback(
+    (value: boolean) => {
+      for (const item of inputs) {
+        const itemField = field(item.name as keyof LeadFormState);
+        itemField.onChange?.(value);
+      }
+    },
+    [inputs],
+  );
+
+  const hasValidationErrors = useMemo(
+    () =>
+      inputs
+        ?.filter((_) => _.required)
+        ?.some((_) =>
+          Boolean(withValidator(field(_?.name as keyof LeadFormState), agreementValidator).error),
+        ),
+    [inputs],
+  );
+
+  const [isUnfolded, { toggle }] = useBool(true);
+
+  return (
+    <div className="w-fit">
+      <Foldable>
+        <div className="flex items-start">
+          <div>
+            <Checkbox
+              key={key}
+              text={CONSENT_ALL_DOCS_TEXT}
+              value={isChecked}
+              onChange={handleGeneralToggle}
+            />
+            {renderErrorText(hasValidationErrors ? CONSENT_REQUIRED : '')}
+          </div>
+          <Button embedded ariaLabel={CONSENT_ALL_DOCS_TEXT} onClick={toggle}>
+            <ToggleIcon className="p-2xs" iconVersion="color" isUnfolded={isUnfolded} />
+          </Button>
+        </div>
+        <FoldableSection className="flex flex-col pl-2xl" isUnfolded={isUnfolded}>
+          {inputs.map(getField<FieldRetailDef>(field, {}, InputsConsentsMap))}
+        </FoldableSection>
+      </Foldable>
+    </div>
+  );
+});

package/mobile/src/components/ApplicationLeadForm/applicationFormData.tsx

@@ -0,0 +1,63 @@
+import { type SectionsRetailProps } from '../../retail/model/InputSectionsType';
+import { type FieldRetailDef } from '../../retail/model/RetailFormContent';
+import { type ProductType } from './ApplicationLeadFormContent';
+import { productTypeToConsentsMap } from './consents';
+
+export const applicationFormData: SectionsRetailProps[] = [
+  {
+    columns: 2,
+    inputs: [
+      { name: 'surname', required: true, dadata: true },
+      { name: 'name', required: true, dadata: true },
+      { name: 'middleName', dadata: true },
+      { name: 'limitedBirthday', required: true },
+      { name: 'phone', required: true },
+      { name: 'email', required: true, dadata: true },
+    ],
+  },
+  {
+    inputs: [
+      { name: 'processPersonalDataFlg', required: true },
+      { name: 'consentProviderFlg', required: true },
+      { name: 'consentOthersFlg', required: true },
+      { name: 'consentInformFlg' },
+      { name: 'consentPfrFlg' },
+      { name: 'consentInformMaterialsFlg' },
+      { name: 'consentPhotoFlg' },
+      { name: 'consentFATCA' },
+    ],
+  },
+];
+
+export const getApplicationFormData = (productType: ProductType): SectionsRetailProps[] => {
+  const currentProductConsents = productTypeToConsentsMap[productType];
+  const allConsents: FieldRetailDef[] = [
+    { name: 'processPersonalDataFlg', required: true },
+    { name: 'consentProviderFlg', required: true },
+    { name: 'consentOthersFlg', required: true },
+    { name: 'consentInformFlg' },
+    { name: 'consentPfrFlg' },
+    { name: 'consentInformMaterialsFlg' },
+    { name: 'consentPhotoFlg' },
+    { name: 'consentFATCA', required: true },
+  ];
+
+  return [
+    {
+      columns: 2,
+      inputs: [
+        { name: 'surname', required: true, dadata: true },
+        { name: 'name', required: true, dadata: true },
+        { name: 'middleName', dadata: true },
+        { name: 'limitedBirthday', required: true },
+        { name: 'phone', required: true },
+        { name: 'email', required: true, dadata: true },
+      ],
+    },
+    {
+      inputs: allConsents.filter(
+        (_) => _.name && Object.keys(currentProductConsents).includes(_.name),
+      ),
+    },
+  ];
+};

package/mobile/src/components/ApplicationLeadForm/consents.ts

@@ -0,0 +1,91 @@
+import {
+  type CreditCardFormConsents,
+  type CreditFormConsents,
+  type DebitCardFormConsents,
+} from '../../retail/model/LeadFormState';
+
+interface ConsentData {
+  text: string;
+  docId?: number;
+}
+
+const CREDIT_CONSENTS: Record<keyof CreditFormConsents, ConsentData> = {
+  processPersonalDataFlg: {
+    text: 'Согласие на обработку персональных данных',
+    docId: 4,
+  },
+  consentInformFlg: {
+    text: 'Согласие на информирование о продуктах и услугах Банка',
+    docId: 14,
+  },
+  consentProviderFlg: {
+    text: 'Согласие об использовании простой электронной подписи',
+    docId: 5,
+  },
+  consentOthersFlg: {
+    text: 'Прочие согласия',
+    docId: 1,
+  },
+  consentPfrFlg: {
+    text: 'Согласие на запрос в ПФР',
+    docId: 3,
+  },
+};
+
+const CREDIT_CARD_CONSENTS: Record<keyof CreditCardFormConsents, ConsentData> = {
+  processPersonalDataFlg: {
+    text: 'Согласие на обработку персональных данных',
+    docId: 4,
+  },
+  consentInformFlg: {
+    text: 'Согласие на информирование о продуктах и услугах Банка',
+    docId: 14,
+  },
+  consentProviderFlg: {
+    text: 'Согласие об использовании простой электронной подписи',
+    docId: 5,
+  },
+  consentOthersFlg: {
+    text: 'Прочие согласия',
+    docId: 19,
+  },
+  consentInformMaterialsFlg: {
+    text: 'Согласие на получение информационных материалов',
+    docId: 18,
+  },
+  consentPhotoFlg: {
+    text: 'Согласие на фотографирование',
+    docId: 17,
+  },
+};
+
+const DEBIT_CARD_CONSENTS: Record<keyof DebitCardFormConsents, ConsentData> = {
+  processPersonalDataFlg: {
+    text: 'Согласие на обработку персональных данных',
+    docId: 4,
+  },
+  consentInformFlg: {
+    text: 'Согласие на информирование о продуктах и услугах Банка',
+    docId: 14,
+  },
+  consentProviderFlg: {
+    text: 'Согласие об использовании простой электронной подписи',
+    docId: 5,
+  },
+  consentOthersFlg: {
+    text: 'Прочие согласия',
+    //TODO: Добавить нужный ID после выкладки на бэк
+    docId: 10,
+  },
+  consentFATCA: {
+    text: 'Форма самосертификации',
+    //TODO: Добавить нужный ID после выкладки на бэк
+    docId: 7,
+  },
+};
+
+export const productTypeToConsentsMap = {
+  credit: CREDIT_CONSENTS,
+  creditCard: CREDIT_CARD_CONSENTS,
+  debitCard: DEBIT_CARD_CONSENTS,
+};

package/mobile/src/components/ApplicationLeadForm/getInitialFormState.tsx

@@ -0,0 +1,32 @@
+import type { LeadFormState } from '../../retail/model/LeadFormState';
+import { type FieldRetailDef } from '../../retail/model/RetailFormContent';
+
+const initialFormState = {
+  surname: '',
+  name: '',
+  middleName: '',
+  limitedBirthday: undefined,
+  phone: '',
+  email: '',
+  processPersonalDataFlg: false,
+  consentProviderFlg: false,
+  consentOthersFlg: false,
+  consentInformFlg: false,
+  consentPfrFlg: false,
+  consentInformMaterialsFlg: false,
+  consentPhotoFlg: false,
+  consentFATCA: false,
+};
+
+export const getInitialFormState = (
+  inputs: FieldRetailDef[],
+  savedForm: LeadFormState | null,
+): LeadFormState => {
+  if (savedForm) {
+    return { ...savedForm, limitedBirthday: new Date(savedForm?.limitedBirthday || 0) };
+  }
+
+  const formState = Object.fromEntries(inputs.map((_) => [_.name, initialFormState[_.name || '']]));
+
+  return { ...formState };
+};

package/mobile/src/components/ApplicationLeadForm/getLeadFormTaskData.ts

@@ -0,0 +1,97 @@
+/* eslint-disable camelcase */
+import { locationNavigator } from '../../external/locationNavigator';
+import { getParticipantContacts } from '../../retail/adaptors/utils';
+import { type CreateUserTaskDebitBody } from '../../retail/api/createUserTaskDebit';
+import { type MarketingInfo, type UpdateUserTaskBody } from '../../retail/api/updateUserTask';
+import { type LeadFormState } from '../../retail/model/LeadFormState';
+import { formatDate } from '../../utils/formatDate';
+import { formatPhone } from '../../utils/formatPhone';
+import { debitProgrammIdToCardCodesMap } from '../DebitForm/utils';
+
+type getLeadFormTaskDataProps = {
+  participantId: number;
+  taskId: number;
+  profileId: number;
+  formData: LeadFormState;
+};
+
+export const getCreditLeadFormTaskData = ({
+  participantId,
+  taskId,
+  profileId,
+  formData,
+}: getLeadFormTaskDataProps): UpdateUserTaskBody => {
+  const { name, surname, middleName, limitedBirthday, phone, email } = formData;
+  const navigator = locationNavigator();
+
+  return {
+    sendToBank: true,
+    taskKind: 'SHORT',
+    task: {
+      taskSource: navigator.origin,
+      id: taskId,
+      participants: [
+        {
+          birthDate: limitedBirthday && formatDate(limitedBirthday, true),
+          id: participantId,
+          midname: middleName,
+          name,
+          surname,
+          profile: {
+            id: profileId,
+          },
+          participantContacts: getParticipantContacts({
+            phone: phone && formatPhone(phone),
+            email,
+          }),
+          roleCd: {
+            key: 'BORROWER',
+            value: 'Заемщик',
+          },
+        },
+      ],
+      marketingInfo: getMarketingInfo(),
+    },
+  };
+};
+
+export const getDebitLeadFormTaskData = (
+  formData: LeadFormState,
+  programId: string,
+): CreateUserTaskDebitBody => {
+  const { name, surname, middleName, limitedBirthday, phone, email } = formData;
+  const navigator = locationNavigator();
+
+  return {
+    task: {
+      taskSource: navigator.origin,
+      creditProgram: {
+        code: debitProgrammIdToCardCodesMap[programId],
+      },
+      participants: [
+        {
+          birthDate: limitedBirthday && formatDate(limitedBirthday, true),
+          midname: middleName,
+          name,
+          surname,
+          participantContacts: getParticipantContacts({
+            phone: phone && formatPhone(phone),
+            email,
+          }),
+        },
+      ],
+    },
+  };
+};
+
+const getMarketingInfo = (): MarketingInfo => {
+  const params = new URLSearchParams(decodeURIComponent(globalThis.location?.search));
+
+  return {
+    utm_campaign: params.get('utm_campaign'),
+    utm_medium: params.get('utm_medium'),
+    utm_source: params.get('utm_source'),
+    utm_content: params.get('utm_content'),
+    utm_term: params.get('utm_term'),
+  };
+};

package/mobile/src/components/ApplicationLeadForm/pasreEsiaProfile.ts

@@ -0,0 +1,70 @@
+import { type UpdateProfileEsiaResponse } from '../../retail/api/updateProfileEsia';
+import { type Address, type LeadFormState } from '../../retail/model/LeadFormState';
+import { normalizePhone } from '../../ui-kit/PhoneInput/normalizePhone';
+
+export const parseEsiaProfile = (esiaProfile: UpdateProfileEsiaResponse): LeadFormState => {
+  const { profile, addInfo, document, addressRegistration, addressFact } = esiaProfile;
+
+  return {
+    name: profile?.name,
+    surname: profile?.surname,
+    middleName: profile?.midname,
+    limitedBirthday: profile?.birthDate,
+    phone: normalizePhone(profile?.phone),
+    email: profile?.email,
+    dulIssueDate: document?.dulIssueDate,
+    dulIssuedBy: document?.dulIssuedBy,
+    dulNumber: document?.dulNumber,
+    dulSerie: document?.dulSerie,
+    dulSubdivisionCode: document?.dulSubdivisionCode,
+    snils: addInfo?.snils,
+    birthPlace: addInfo?.birthPlace,
+    addressRegistration: buildAddress(addressRegistration),
+    addressFact: buildAddress(addressFact),
+    esiaAccountTypeCd: profile?.esiaAccountType,
+  };
+};
+
+const concatFullAddress = (address: Array<string | undefined>): string => {
+  return address.reduce((acc: string, value) => {
+    if (value) {
+      return acc ? `${acc}, ${value}` : value;
+    }
+
+    return acc;
+  }, '');
+};
+
+const buildAddress = (fields: UpdateProfileEsiaResponse['addressRegistration']): Address => {
+  const {
+    postcode,
+    region,
+    regionCode,
+    locality,
+    city,
+    street,
+    house,
+    building,
+    block,
+    apartment,
+  } = fields;
+
+  const place = locality || city;
+
+  const fullAddress = concatFullAddress([
+    postcode,
+    region,
+    place,
+    street ? `ул ${street}` : undefined,
+    house ? `д ${house}` : undefined,
+    block ? `к ${block}` : undefined,
+    building ? `стр ${building}` : undefined,
+    apartment ? `кв ${apartment}` : undefined,
+  ]);
+
+  return {
+    ...fields,
+    regionCode: regionCode?.key,
+    fullAddress,
+  };
+};

package/mobile/src/components/ApplicationLeadForm/renderAgreementSubmit.tsx

@@ -0,0 +1,28 @@
+import { type FieldProps } from '../../hooks/useForm/useForm';
+import { type LinkProps } from '../../model/LinkProps';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { agreementValidator } from '../../ui-kit/FormField/validators';
+import { renderErrorText } from '../../ui-kit/Input/renderErrorText';
+import { withValidator } from '../../validation/withValidator';
+import { type SubmitButtonProps } from './ApplicationLeadFormContent';
+import { Footnote } from './Footnote';
+import { renderSubmitButton } from './renderSubmitButton';
+
+export const renderAgreementSubmit = (
+  consentDataProcessing?: FieldProps<boolean>,
+  link?: LinkProps,
+  button?: SubmitButtonProps,
+) => (
+  <div className="flex col-span-2 gap-xs flex-col w-full items-baseline">
+    <div>
+      <div className="flex gap-3 items-center">
+        <Checkbox {...consentDataProcessing} />
+        <Footnote link={link} />
+      </div>
+      {consentDataProcessing
+        ? renderErrorText(withValidator(consentDataProcessing, agreementValidator).error)
+        : null}
+    </div>
+    {renderSubmitButton(button)}
+  </div>
+);