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

package/mobile/src/components/CreditForm/CreditFormStep.tsx

@@ -0,0 +1,58 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm/useForm';
+import { useRetailFormStore } from '../../hooks/useRetailFormStore';
+import { type SectionsRetailProps } from '../../model/InputSectionsType';
+import type { LeadFormState } from '../../services/retail/model/LeadFormState';
+import { calculateInputs } from '../../services/retail/utils/calculateInputs';
+import { getFormValidator } from '../../ui-kit/FormField/getObjectValidator';
+import { type ProgramsSourceProps } from './ProgramsSourceProps';
+import { renderStep } from './renderStep';
+import { StepsNavigationButtons } from './StepsNavigationButtons';
+import { useCreditFormAPI } from './useCreditFormAPI';
+
+export interface CreditFormStepProps {
+  step: number;
+  sections: SectionsRetailProps[];
+  programsSource?: ProgramsSourceProps;
+  onNextStep: () => void;
+  onPrevStep: () => void;
+  onFinish?: () => void;
+}
+
+export const CreditFormStep = JSX<CreditFormStepProps>(
+  ({ step, sections, programsSource, onPrevStep, onNextStep, onFinish }) => {
+    const { programId } = useRetailFormStore();
+    const calcData = programsSource?.[programId ?? '']; // Need normalizator useForm, to be save defaultParams
+
+    const inputs = useMemo(
+      () => sections?.flatMap((_: SectionsRetailProps) => _?.inputs ?? []),
+      [sections],
+    );
+
+    const formValidator = useCallback(
+      (formState: LeadFormState) =>
+        // TODO Слишком сложно
+        getFormValidator(calculateInputs((_) => formState[_])(inputs, step))(formState),
+      [inputs],
+    );
+
+    const [initialState, onSubmit, isSending] = useCreditFormAPI({
+      step,
+      onNextStep,
+      onFinish,
+    });
+
+    const [, { field, onSubmit: handleSubmit }] = useForm(initialState, {
+      formValidator,
+      onSubmit,
+    });
+
+    return (
+      <form onSubmit={handleSubmit} className="space-y-m">
+        {renderStep({ sections, field, step, params: { calcData } })}
+        <StepsNavigationButtons step={step} isSending={isSending} onPrevStep={onPrevStep} />
+      </form>
+    );
+  },
+);

package/mobile/src/components/CreditForm/FailedStatusContent.tsx

@@ -0,0 +1,10 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { CreditFormStatus } from './CreditFormStatus';
+
+export const FailedStatusContent = JSX(() => (
+  <CreditFormStatus
+    title="Благодарим Вас за ожидание"
+    description="В настоящий момент Банк не может одобрить Вашу заявку на кредит. Попробуйте подать заявку позже. Спасибо за обращение в АО «Россельхозбанк»."
+    buttonText="Вернуться на главную"
+  />
+));

package/mobile/src/components/CreditForm/PendingStatusContent.tsx

@@ -0,0 +1,39 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useRetailFormStore } from '../../hooks/useRetailFormStore';
+import { CreditFormStatus } from './CreditFormStatus';
+
+export const PendingStatusContent = JSX(({ onExpire }: { onExpire: () => void }) => {
+  const { statusInfo } = useRetailFormStore();
+
+  return (
+    <CreditFormStatus
+      interval={300}
+      title="Заявка успешно отправлена"
+      description="Не закрывайте окно, скоро сообщим результат"
+      sectionInfoTitle="Заявленные условия по кредиту"
+      sectionInfo={[
+        {
+          label: 'Название продукта',
+          description: 'Кредит на любые цели',
+        },
+        {
+          label: 'Цель кредита',
+          description: 'На любые цели',
+        },
+        {
+          label: 'Сумма',
+          description: `${statusInfo?.calculator?.moneyValue?.toLocaleString() ?? '0'} ₽`,
+        },
+        {
+          label: 'Срок кредита',
+          description: `${statusInfo?.calculator?.monthsValue ?? '0'} мес`,
+        },
+        {
+          label: 'Тип платежа',
+          description: statusInfo?.calculator?.isAnnuity ? 'Аннуитетный' : 'Дифференцированный',
+        },
+      ]}
+      onExpire={onExpire}
+    />
+  );
+});

package/mobile/src/components/CreditForm/ProgramsSourceProps.tsx

@@ -0,0 +1,20 @@
+import { type JSONRefObject } from '../../data/JSONRefObject';
+import {
+  type CreditCalculatorData,
+  type CreditCalculatorUserInputParams,
+} from '../CalculatorCredit/CalculatorCreditContent';
+
+export type ProgramsSourceProps = {
+  [programId: string]: {
+    title?: string;
+    footnote?: string;
+    paramsViewSettings: {
+      isShowSalaryClient?: boolean;
+      isShowInsurance?: boolean;
+      isShowStateEmployee?: boolean;
+      isShowPensionClient?: boolean;
+    };
+    defaultParams?: CreditCalculatorUserInputParams;
+    calcSource?: CreditCalculatorData & JSONRefObject;
+  };
+};

package/mobile/src/components/CreditForm/ReworkStatusContent.tsx

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useRetailFormStore } from '../../hooks/useRetailFormStore';
+import { CreditFormStatus } from './CreditFormStatus';
+
+export const ReworkStatusContent = JSX(() => {
+  const { statusInfo } = useRetailFormStore();
+
+  return (
+    <CreditFormStatus
+      title="Благодарим вас за ожидание, но нам требуется больше времени для принятия решения"
+      description="Посетите выбранное отделение банка с необходимыми документами и так завершите оформление кредита."
+      sectionAdditionalTitle="В отделении Банка"
+      sectionInfoAdditional={[
+        {
+          label: 'Регион',
+          description: statusInfo?.regionRetail,
+        },
+        {
+          label: 'Адрес',
+          description: statusInfo?.addressRetail,
+        },
+      ]}
+      sectionInfo={[
+        {
+          label: 'Основные документы:',
+          description: '- Паспорт РФ',
+        },
+      ]}
+      buttonText="Вернуться на главную"
+    />
+  );
+});

package/mobile/src/components/CreditForm/StepsNavigationButtons.tsx

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../../ui-kit/Button/Button';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
+
+export interface StepsNavigationButtonsProps {
+  step: number;
+  isSending: boolean;
+  onPrevStep?: () => void;
+}
+
+export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
+  ({ step, onPrevStep, isSending }) => {
+    const isFirstStep = step === 0;
+    const isFinalStep = step === 5;
+
+    return (
+      <div className={'flex justify-between gap-m'}>
+        <Button version="secondary" disabled={isFirstStep} onClick={onPrevStep}>
+          Назад
+        </Button>
+        <SubmitButton isLoading={isSending}>
+          {isFinalStep ? 'Отправить заявку' : 'Далее'}
+        </SubmitButton>
+      </div>
+    );
+  },
+);

package/mobile/src/components/CreditForm/SuccessStatusContent.tsx

@@ -0,0 +1,37 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useRetailFormStore } from '../../hooks/useRetailFormStore';
+import { CreditFormStatus } from './CreditFormStatus';
+
+export const SuccessStatusContent = JSX(() => {
+  const { statusInfo } = useRetailFormStore();
+
+  return (
+    <CreditFormStatus
+      title="Банк одобрил вам кредит"
+      description="Обратитесь в отделение банка, чтобы завершить оформление и получит ваш кредит"
+      sectionInfo={[
+        {
+          label: 'Название продукта',
+          description: 'Кредит на любые цели',
+        },
+        {
+          label: 'Ставка',
+          description: '14,5%',
+        },
+        {
+          label: 'Ежемесячный платеж',
+          description: '86 052 ₽',
+        },
+        {
+          label: 'Срок кредита',
+          description: statusInfo?.calculator?.monthsValue + ' мес',
+        },
+        {
+          label: 'Тип платежа',
+          description: statusInfo?.calculator?.isAnnuity ? 'Аннуитетный' : 'Дифференцированный',
+        },
+      ]}
+      buttonText="Вернуться на главную"
+    />
+  );
+});

package/mobile/src/components/CreditForm/creditFormStepsData.tsx

@@ -0,0 +1,12 @@
+import { type SectionsRetailProps } from '../../model/InputSectionsType';
+import {
+  CALCULATOR_CONTENT,
+  COMMON_RETAIL_CONTENT,
+  DELIVERY_CREDIT_CONTENT,
+} from '../../services/retail/content';
+
+export const stepsSectionsMap: SectionsRetailProps[][] = [
+  CALCULATOR_CONTENT,
+  ...COMMON_RETAIL_CONTENT,
+  DELIVERY_CREDIT_CONTENT,
+];

package/mobile/src/components/CreditForm/formStateMap.tsx

@@ -0,0 +1,83 @@
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+
+export const formStateMap: Partial<LeadFormState>[] = [
+  {
+    calculator: {
+      moneyValue: 0,
+      monthsValue: 0,
+      isAnnuity: false,
+      isInsurance: false,
+      isSalaryClient: false,
+      isPensionClient: false,
+      isStateEmployee: false,
+    },
+  },
+  {
+    surname: '',
+    name: '',
+    middleName: '',
+    sex: '',
+    limitedBirthday: undefined,
+    birthPlace: '',
+    phone: '',
+    email: '',
+    dulSerie: undefined,
+    dulNumber: undefined,
+    dulIssueDate: undefined,
+    dulSubdivisionCode: '',
+    dulIssuedBy: '',
+    addressRegistration: {
+      fullAddress: '',
+      fiasCode: '',
+    },
+    participantDateRegistration: undefined,
+    addressFact: {
+      fullAddress: '',
+      fiasCode: '',
+    },
+    housing: undefined,
+  },
+  {
+    amountWorkers: { key: '', text: '' },
+    beginDate: undefined,
+    employerActivities: { key: '', text: '' },
+    employerOrganization: { key: '', text: '' },
+    employment: { key: '', text: '' },
+    experience5Years: undefined,
+    inn: undefined,
+    jobsNumber: undefined,
+    lastJobExperience: undefined,
+    legalForm: '',
+    organization: { key: '', text: '' },
+    organizationAddress: {
+      fullAddress: '',
+      fiasCode: '',
+    },
+    organizationName: '',
+    organizationPhone: '',
+    partInBusiness: undefined,
+    positionOrganization: { key: '', text: '' },
+  },
+  {
+    familyStatus: { key: '', text: '' },
+    dependents: undefined,
+    familyMembers: undefined,
+    confirmationIncome: { key: '', text: '' },
+    wages: undefined,
+    mandatoryPayments: undefined,
+    snils: '',
+    armyIdFlg: false,
+  },
+  {
+    disablePeopleFlg: false,
+    bankruptcyFlg: false,
+    shareholderFlg: false,
+    legalEntityName: '',
+    creditInRshbCd: undefined,
+  },
+  {
+    regionRetail: { key: '', text: '' },
+    addressRetail: undefined,
+    bankEmployeeCode: undefined,
+  },
+];

package/mobile/src/components/CreditForm/getCalcData.ts

@@ -0,0 +1,19 @@
+import { type PaymentType, type UpdateUserTaskBody } from '../../api/RetailAPI/updateUserTask';
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+
+const PAYMENT_TYPE_DATA: Record<string, PaymentType> = {
+  annuity: { key: 'ANNUITY', value: 'Аннуитетный' },
+  differential: { key: 'DIFFERENTIAL', value: 'Дифференцированный ' },
+};
+
+export const getCalcData = (
+  formData: LeadFormState,
+): Pick<UpdateUserTaskBody['task'], 'loanAmount' | 'creditPeriod' | 'paymentTypeCd'> => {
+  const { moneyValue, monthsValue, isAnnuity } = formData?.calculator ?? {};
+
+  return {
+    loanAmount: moneyValue,
+    creditPeriod: monthsValue,
+    paymentTypeCd: PAYMENT_TYPE_DATA[isAnnuity ? 'annuity' : 'differential'],
+  };
+};

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

@@ -0,0 +1,25 @@
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+import { formStateMap } from './formStateMap';
+
+export const getInitialFormState = (
+  step: number,
+  formState: LeadFormState | null,
+): LeadFormState => ({
+  ...formStateMap[step],
+  ...formState,
+  limitedBirthday: transformStringToData(formState?.limitedBirthday as string),
+  dulIssueDate: transformStringToData(formState?.dulIssueDate as string),
+  participantDateRegistration: transformStringToData(
+    formState?.participantDateRegistration as string,
+  ),
+  beginDate: transformStringToData(formState?.beginDate as string),
+  deliveryDate: transformStringToData(formState?.deliveryDate as string),
+});
+
+const transformStringToData = (text?: string) => {
+  try {
+    return text ? new Date(text) : undefined;
+  } catch (_) {
+    return undefined;
+  }
+};

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

@@ -0,0 +1,14 @@
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import { InputsRetailMap } from '../../services/retail/inputs';
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
+import { getField } from '../../ui-kit/FormField/getField';
+
+export interface RenderInputsProps {
+  inputs: FieldRetailDef[];
+  field: FormFieldRegisterer<LeadFormState>;
+  params?: Record<string, any>;
+}
+
+export const renderInputs = ({ field, inputs, params }: RenderInputsProps) =>
+  inputs.map(getField<FieldRetailDef>(field, params, { ...InputsRetailMap }));

package/mobile/src/components/CreditForm/renderStep.tsx

@@ -0,0 +1,32 @@
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import { type SectionsRetailProps } from '../../model/InputSectionsType';
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+import { calculateInputs, type GetValue } from '../../services/retail/utils/calculateInputs';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { renderTitle } from '../../ui-kit/FormField/renderTitle';
+import { style } from '../../utils/style';
+import { renderInputs } from './renderInputs';
+
+export interface StepProps {
+  sections?: SectionsRetailProps[];
+  field: FormFieldRegisterer<LeadFormState>;
+  step: number;
+  params?: Record<string, any>;
+}
+
+export const renderStep = ({ sections, field, step, params }: StepProps) =>
+  sections?.map(({ inputs: origInputs = [], columns, title }, i) => {
+    const inputs = calculateInputs(getValue(field))(origInputs, step);
+
+    return (
+      <div key={`section-${i}`} className={style(inputColumnStyles(columns), 'grid gap-x-m')}>
+        {renderTitle(title)}
+        {renderInputs({ field, inputs, params })}
+      </div>
+    );
+  });
+
+const getValue =
+  (field: FormFieldRegisterer<LeadFormState>): GetValue =>
+  (name) =>
+    field(name)?.value;

package/mobile/src/components/CreditForm/useCreditFormAPI.tsx

@@ -0,0 +1,83 @@
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { updateUserTask } from '../../api/RetailAPI/updateUserTask';
+import { useRetailFormStore } from '../../hooks/useRetailFormStore';
+import { getCreditFormTaskData } from '../../services/retail/adaptors/getCreditFormTaskData';
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+import { getInitialFormState } from './getInitialFormState';
+
+interface CreditFormApiProps {
+  step: number;
+  onNextStep: () => void;
+  onFinish?: () => void;
+}
+
+export const useCreditFormAPI = ({
+  step,
+  onNextStep,
+  onFinish,
+}: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void, boolean] => {
+  const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
+  const isFinalStep = step === 5;
+
+  const retailFormStore = useRetailFormStore();
+
+  const initialState = useMemo(
+    () => getInitialFormState(step, retailFormStore.leadForm),
+    [step, retailFormStore.leadForm],
+  );
+
+  const resetForm = useCallback(
+    (response: Response) => {
+      const { leadForm } = retailFormStore;
+      if (isFinalStep && response.ok && leadForm) {
+        retailFormStore.statusInfo = {
+          regionRetail: leadForm?.regionRetail?.text,
+          addressRetail: leadForm?.addressRetail?.text,
+          calculator: {
+            monthsValue: leadForm?.calculator?.monthsValue,
+            moneyValue: leadForm?.calculator?.moneyValue,
+            isAnnuity: leadForm?.calculator?.isAnnuity,
+          },
+        };
+        retailFormStore.leadForm = initialState;
+      }
+    },
+    [isFinalStep, initialState],
+  );
+
+  const handleSubmit = useCallback(
+    async (formData: LeadFormState) => {
+      startSending();
+      retailFormStore.leadForm = formData;
+
+      try {
+        const { taskId, profileId, participantId } = retailFormStore;
+        if (taskId && profileId && participantId) {
+          const response = await updateUserTask(
+            getCreditFormTaskData({
+              participantId,
+              taskId,
+              profileId,
+              step,
+              formData: formData as any,
+            }),
+          );
+          resetForm(response);
+        }
+
+        onNextStep();
+        if (isFinalStep) {
+          onFinish?.();
+        }
+      } catch (ex) {
+        // Do nothing
+      } finally {
+        endSending();
+      }
+    },
+    [isFinalStep, resetForm],
+  );
+
+  return [initialState, handleSubmit, isSending];
+};

package/mobile/src/components/CreditForm/utils.ts

@@ -0,0 +1,82 @@
+import { type Address } from '../../services/retail/model/LeadFormState';
+
+export const fieldsNamesToContactKeysMap = {
+  email: 'EMAIL',
+  phone: 'MAIN_PHONE',
+  organizationPhone: 'ORGANIZATION_PHONE',
+};
+
+export const fieldsNamesToAddressKeysMap = {
+  addressRegistration: 'REGISTRATION',
+  addressFact: 'RESIDENTAL',
+  organizationAddress: 'WORK',
+  addressCourier: 'DELIVERY',
+};
+
+export const fieldsNamesToIncomeKeysMap = {
+  incomeAverage: 'INCOME_AVERAGE',
+  mandatoryPayments: 'MANDATORY_PAYMENTS',
+  additionalIncome: 'ADDITIONAL_INCOME',
+  otherIncome: 'OTHER_INCOME',
+  otherPayments: 'OTHER_PAYMENTS',
+  rentalIncome: 'RENTAL_INCOME',
+  wages: 'WAGES',
+  retirementIncome: 'RETIREMENT_INCOME',
+};
+
+export const getParticipantContacts = (fields: Record<string, string | undefined>): any[] =>
+  Object.entries(fields).reduce((acc: any[], [key, value]) => {
+    if (key in fieldsNamesToContactKeysMap) {
+      return [
+        ...acc,
+        {
+          contactTypeCd: {
+            key: fieldsNamesToContactKeysMap[key],
+          },
+          value,
+        },
+      ];
+    }
+
+    return acc;
+  }, []);
+
+export const getParticipantAddresses = (fields: Record<string, Address | undefined>): any[] =>
+  Object.entries(fields).reduce((acc: any[], [key, value]) => {
+    if (key in fieldsNamesToAddressKeysMap) {
+      const address = Object.fromEntries(
+        Object.entries(value ?? {})
+          .filter(([k]) => !k.startsWith('qc')) // exclude dadata fields
+          .map(([k, v]) => [k, v ?? '']), // transform undefined to empty string
+      );
+
+      return [
+        ...acc,
+        {
+          addressType: {
+            key: fieldsNamesToAddressKeysMap[key],
+          },
+          ...address,
+        },
+      ];
+    }
+
+    return acc;
+  }, []);
+
+export const getParticipantIncomes = (fields: Record<string, number | undefined>): any[] =>
+  Object.entries(fields).reduce((acc: any[], [key, value]) => {
+    if (key in fieldsNamesToIncomeKeysMap) {
+      return [
+        ...acc,
+        {
+          incomeTypeCd: {
+            key: fieldsNamesToIncomeKeysMap[key],
+          },
+          value: Number(value || 0),
+        },
+      ];
+    }
+
+    return acc;
+  }, []);

package/mobile/src/hooks/useLeadFormData.ts

@@ -0,0 +1,25 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { type DictionaryItem } from '../services/retail/model/LeadFormData';
+import { fetchJSON } from '../utils/fetchJSON';
+
+type ErrorProps = {
+  errorMessage?: string;
+};
+
+export const useLeadFormData = (typeField: string) => {
+  const { data, error } = useAsyncData(
+    `/light-api-cash/v1/dictionary?dictionaryType=${encodeURIComponent(typeField)}`,
+    fetchData,
+  );
+  if (data && 'errorMessage' in data) {
+    return { error };
+  }
+
+  return { data: data as DictionaryItem[], error };
+};
+
+const fetchData = async (url: string): Promise<DictionaryItem[] | ErrorProps> => {
+  const result = await fetchJSON<DictionaryItem[] | ErrorProps>(url, { method: 'POST' });
+
+  return result || [];
+};

package/mobile/src/hooks/useRetailFormStore.tsx

@@ -0,0 +1,32 @@
+import { useLocalStore } from '@redneckz/uni-jsx/lib/Store/useLocalStore';
+import { type LeadFormStoreSlice } from '../components/ApplicationLeadForm/useLeadFormStore';
+import { type DictionaryItem } from '../services/retail/model/LeadFormData';
+
+export type StatusInfoState = {
+  regionRetail?: string;
+  addressRetail?: string;
+  cardCategory?: string;
+  deliveryDate?: Date | string;
+  deliveryAddress?: string;
+  methodObtain?: string;
+  calculator?: {
+    monthsValue?: number;
+    moneyValue?: number;
+    isAnnuity?: boolean;
+  };
+};
+
+export interface CreditFormDictionarySlice {
+  amountWorkers: DictionaryItem[] | null;
+  organization: DictionaryItem[] | null;
+  employerActivities: DictionaryItem[] | null;
+  employerOrganization: DictionaryItem[] | null;
+}
+
+export interface CreditFormStoreSlice extends CreditFormDictionarySlice, LeadFormStoreSlice {
+  statusInfo: StatusInfoState;
+}
+
+export const useRetailFormStore = () => {
+  return useLocalStore<CreditFormStoreSlice>();
+};

package/mobile/src/model/InputSectionsType.ts

@@ -1,4 +1,5 @@
 import { type FieldDef } from '../components/ApplicationForm/ApplicationFormContent';
+import { type FieldRetailDef } from '../services/retail/model/RetailFormContent';
 import { type ColumnsCount } from './ColumnCount';
 import { type TitleProps } from './HeadlineType';
 
@@ -14,3 +15,13 @@ export interface InputSectionsType {
   /** @hidden */
   sections?: SectionsProps[];
 }
+
+export type SectionsRetailProps = TitleProps & {
+  columns?: ColumnsCount;
+  inputs?: FieldRetailDef[];
+};
+
+export interface InputRetailSectionsType {
+  /** @hidden */
+  sections?: SectionsRetailProps[];
+}