@redneckz/wildless-cms-uni-blocks 0.14.766 → 0.14.768

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

@@ -0,0 +1,72 @@
+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 '../../services/retail/model/RetailFormContent';
+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 { applicationFormData } 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, ...rest }) => {
+    const inputs = useMemo(
+      () => (applicationFormData?.flatMap((_) => _?.inputs) || []) as FieldRetailDef[],
+      [applicationFormData],
+    );
+
+    const formValidator = useMemo(() => getFormValidator(inputs), [inputs]);
+
+    const [initialFormState, { isLoading }] = useInitApplicationLead(inputs, nextStepLink);
+    const { isSending, ok, handleSubmit } = useApplicationLeadApi({
+      programId,
+      nextStepLink,
+    });
+
+    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 })}
+            </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,23 @@
+import { type TextProps, type TitleProps } from '../../model/HeadlineType';
+import { type InputRetailSectionsType } from '../../model/InputSectionsType';
+import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
+
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+export type SubmitButtonProps = TextProps & {
+  version?: LinkButtonVersion;
+};
+
+/**
+ * @title Форма заявки настраиваемая
+ */
+export type ApplicationLeadFormContent = UniBlockContent &
+  TitleProps &
+  InputRetailSectionsType & {
+    /** @title Кнопка */
+    button?: SubmitButtonProps;
+    /** @title Номер кредитной программы */
+    programId?: string;
+    /** @title адресс следующей страницы заявки */
+    nextStepLink?: string;
+  };

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,79 @@
+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 '../../services/retail/external/types';
+import { InputsConsentsMap } from '../../services/retail/inputs';
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+import { type FieldRetailDef } from '../../services/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 { validatorObj } from '../../ui-kit/FormField/getObjectValidator';
+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),
+              validatorObj[_?.name as keyof LeadFormState],
+            ).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,24 @@
+import { type SectionsRetailProps } from '../../model/InputSectionsType';
+
+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' },
+    ],
+  },
+];

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

@@ -0,0 +1,29 @@
+import { type FormRetailConsents } from '../../services/retail/model/LeadFormState';
+
+interface ConsentData {
+  text: string;
+  docId?: number;
+}
+
+export const CONSENTS: Record<keyof FormRetailConsents, ConsentData> = {
+  processPersonalDataFlg: {
+    text: 'Согласие на обработку персональных данных',
+    docId: 4,
+  },
+  consentInformFlg: {
+    text: 'Согласие на информирование о продуктах и услугах Банка',
+    docId: 14,
+  },
+  consentProviderFlg: {
+    text: 'Согласие об использовании простой электронной подписи',
+    docId: 5,
+  },
+  consentOthersFlg: {
+    text: 'Прочие согласия',
+    docId: 1,
+  },
+  consentPfrFlg: {
+    text: 'Согласие на запрос в ПФР',
+    docId: 3,
+  },
+};

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

@@ -0,0 +1,29 @@
+import type { LeadFormState } from '../../services/retail/model/LeadFormState';
+import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
+
+const initialFormState = {
+  surname: '',
+  name: '',
+  middleName: '',
+  limitedBirthday: undefined,
+  phone: '',
+  email: '',
+  processPersonalDataFlg: false,
+  consentProviderFlg: false,
+  consentOthersFlg: false,
+  consentInformFlg: false,
+  consentPfrFlg: 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,66 @@
+/* eslint-disable camelcase */
+import { type MarketingInfo, type UpdateUserTaskBody } from '../../api/RetailAPI/updateUserTask';
+import { locationNavigator } from '../../external/locationNavigator';
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+import { formatDate } from '../../utils/formatDate';
+import { formatPhone } from '../../utils/formatPhone';
+import { getParticipantContacts } from '../CreditForm/utils';
+
+type getLeadFormTaskDataProps = {
+  participantId: number;
+  taskId: number;
+  profileId: number;
+  formData: LeadFormState;
+};
+
+export const getLeadFormTaskData = ({
+  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(),
+    },
+  };
+};
+
+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 '../../api/RetailAPI/updateProfileEsia';
+import { type Address, type LeadFormState } from '../../services/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>
+);

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

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { InputsApplicationLeadMap } from '../../services/retail/inputs';
+import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
+import { getField } from '../../ui-kit/FormField/getField';
+import { CONSENTS } from './consents';
+import { GroupedConsents, type GroupedConsentsProps } from './GroupedConsents';
+
+export const renderInputs = ({ field, inputs }: GroupedConsentsProps) => {
+  const { consentInputs, restInputs } = splitInputs(inputs || []);
+
+  return consentInputs.length > 2 ? (
+    <div>
+      {restInputs.map(getField<FieldRetailDef>(field, {}, { ...InputsApplicationLeadMap }))}
+      <GroupedConsents inputs={consentInputs} field={field} />
+    </div>
+  ) : (
+    (inputs || [])?.map(getField(field, {}, { ...InputsApplicationLeadMap }))
+  );
+};
+
+const splitInputs = (
+  inputs: FieldRetailDef[] = [],
+): { consentInputs: FieldRetailDef[]; restInputs: FieldRetailDef[] } => ({
+  consentInputs: inputs.filter(({ name }) => Object.keys(CONSENTS).includes(String(name))),
+  restInputs: inputs.filter(({ name }) => !Object.keys(CONSENTS).includes(String(name))),
+});

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

@@ -0,0 +1,8 @@
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
+import { type SubmitButtonProps } from './ApplicationLeadFormContent';
+
+export const renderSubmitButton = (button?: SubmitButtonProps, isSending?: boolean) => (
+  <SubmitButton className="w-full @xl:w-auto" isLoading={isSending}>
+    {button?.text ? button.text : 'Отправить заявку'}
+  </SubmitButton>
+);

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

@@ -0,0 +1,141 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { createDraftTask } from '../../api/RetailAPI/createDraftTask';
+import { createUserProfile } from '../../api/RetailAPI/createUserProfile';
+import { getLastTaskStatus } from '../../api/RetailAPI/getLastTaskStatus';
+import { getTaskById } from '../../api/RetailAPI/getTaskById';
+import { updateUserProfile } from '../../api/RetailAPI/updateUserProfile';
+import { updateUserTask } from '../../api/RetailAPI/updateUserTask';
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+import { getUpdateUserProfileData } from '../../services/retail/utils/getUpdateUserProfile';
+import { useConsentBkiDialog } from '../../ui-kit/ConsentBkiDialog/useConsentBkiDialog';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
+import { useDraftDialog } from '../../ui-kit/DraftDialog/useDraftDialog';
+import { useEsiaLoginDialog } from '../../ui-kit/EsiaLoginDialog/useEsiaLoginDialog';
+import { VerifyPhoneDialog } from '../../ui-kit/VerifyPhoneDialog/VerifyPhoneDialog';
+import { formatPhone } from '../../utils/formatPhone';
+import { CONSENTS } from './consents';
+import { getLeadFormTaskData } from './getLeadFormTaskData';
+import { useSaveUserData, type UserData } from './useSaveUserData';
+
+interface ApplicationLeadApiProps {
+  programId: string;
+  nextStepLink: string;
+}
+
+export const useApplicationLeadApi = ({ programId, nextStepLink }: ApplicationLeadApiProps) => {
+  const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
+  const [ok, setOK] = useState<boolean | undefined>();
+  const saveUserData = useSaveUserData();
+
+  const openEsiaLoginDialog = useEsiaLoginDialog(nextStepLink);
+  const consentBkiDialog = useConsentBkiDialog(openEsiaLoginDialog);
+  const verifyPhoneDialog = useDialog(VerifyPhoneDialog);
+  const draftDialog = useDraftDialog();
+
+  const handleSubmit = useCallback(async (formData: LeadFormState) => {
+    try {
+      startSending();
+      const profileId = await createUserProfile({
+        profile: { phone: formatPhone(formData.phone as string) },
+      });
+
+      if (profileId && formData?.phone) {
+        const sendCurrentTask = async () => {
+          await updateUserData({
+            programId,
+            profileId,
+            formData,
+            saveUserData,
+          });
+          verifyPhoneDialog.close();
+          consentBkiDialog.open(formData.phone, profileId);
+        };
+        const handleSuccessVerify = async () => {
+          try {
+            const lastTaskId = await getLastTaskStatus({ profileId, programId });
+
+            if (lastTaskId) {
+              const task = await getTaskById({ taskId: lastTaskId });
+              verifyPhoneDialog.close();
+              draftDialog.open({
+                task,
+                isFromLead: true,
+                onClose: sendCurrentTask,
+              });
+            } else {
+              await sendCurrentTask();
+            }
+          } catch {
+            setOK(false);
+          }
+        };
+
+        const acceptedConsents = getAcceptedConsents(formData);
+
+        verifyPhoneDialog.open({
+          phone: formData?.phone,
+          consents: acceptedConsents,
+          onSuccess: handleSuccessVerify,
+        });
+        endSending();
+      }
+    } catch {
+      setOK(false);
+    }
+  }, []);
+
+  return { isSending, ok, handleSubmit };
+};
+
+const getAcceptedConsents = (formData: LeadFormState): string[] =>
+  Object.keys(CONSENTS)
+    .filter((_) => formData[_])
+    .map((_) => CONSENTS[_]?.text);
+
+const updateUserData = async ({
+  programId,
+  profileId,
+  formData,
+  saveUserData,
+}: {
+  programId: string;
+  profileId: number;
+  formData: LeadFormState;
+  saveUserData: (userData: UserData) => void;
+}) => {
+  const transformedForm = transformOtherConsentsField(formData);
+
+  await updateUserProfile(getUpdateUserProfileData(profileId, transformedForm));
+
+  const { taskId, participantId } = await createDraftTask({
+    profileId,
+    programId,
+  });
+
+  try {
+    await updateUserTask(
+      getLeadFormTaskData({
+        participantId,
+        taskId,
+        profileId,
+        formData: transformedForm,
+      }),
+    );
+  } catch (ex) {
+    console.log(ex);
+  }
+
+  saveUserData({ participantId, taskId, profileId, programId, formData });
+};
+
+const transformOtherConsentsField = (formData: LeadFormState): LeadFormState => {
+  const { consentOthersFlg, ...form } = formData;
+
+  return {
+    ...form,
+    consentCollectionFlg: consentOthersFlg,
+    consentAssignmentClaimsFlg: consentOthersFlg,
+    consentPhotoFlg: consentOthersFlg,
+  };
+};