@redneckz/wildless-cms-uni-blocks 0.14.608 → 0.14.616

package/src/components/CreditForm/CreditFormStep.tsx

@@ -0,0 +1,65 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { renderTitle } from '../../ui-kit/FormField/renderTitle';
+import { InfoCard } from '../../ui-kit/InfoCard/InfoCard';
+import { style } from '../../utils/style';
+import { type SectionsProps } from '../ApplicationForm/ApplicationFormContent';
+import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import { getInitialFormState, type FormStateMap } from './getInitialFormState';
+import { renderInputs } from './renderInputs';
+import { StepsNavigationButtons } from './StepsNavigationButtons';
+import { useCreditFormApi } from './useCreditFormApi';
+
+export interface StepProps {
+  sections: SectionsProps[];
+  field: FormFieldRegisterer<FormStateMap[keyof FormStateMap]>;
+}
+
+export interface CreditFormStepProps {
+  totalSteps: number;
+  step: number;
+  sections: SectionsProps[];
+  inputs: FieldDef[];
+  onNextStep: () => void;
+  onPrevStep: () => void;
+}
+
+export const CreditFormStep = JSX<CreditFormStepProps>(
+  ({ totalSteps, step, sections, onPrevStep, onNextStep, inputs }) => {
+    const [localStorageData, saveStep] = useLocalStorage<Record<string, any>>('leadForm');
+    const initialState = getInitialFormState(step as keyof FormStateMap, localStorageData);
+
+    const { handleSubmit } = useCreditFormApi({
+      inputs,
+      onNextStep: onNextStep,
+      saveStep,
+    });
+
+    const [, { field, onSubmit }] = useForm(initialState, { onSubmit: handleSubmit });
+
+    return (
+      <form onSubmit={onSubmit} className="space-y-m">
+        {renderStep({ sections, field })}
+        <StepsNavigationButtons step={step} totalSteps={totalSteps} onPrevStep={onPrevStep} />
+      </form>
+    );
+  },
+);
+
+const renderStep = ({ sections, field }: StepProps) => {
+  return sections.map((_, i) => (
+    <div key={`section-${i}`} className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}>
+      {renderInfo(_?.inputs)}
+      {renderTitle(_?.title)}
+      {renderInputs({ field, inputs: _?.inputs })}
+    </div>
+  ));
+};
+
+const renderInfo = (inputs: FieldDef[] = []) => {
+  const infoInputs = inputs.filter((_) => _.fieldType === 'info');
+
+  return infoInputs.length ? infoInputs.map(({ text }) => <InfoCard __html={text} />) : null;
+};

package/src/components/CreditForm/StepsNavigationButtons.tsx

@@ -4,44 +4,25 @@ import { style } from '../../utils/style';
 
 export interface StepsNavigationButtonsProps {
   step: number;
-  setStep: (step: number) => void;
   totalSteps: number;
+  onPrevStep?: () => void;
 }
 
-export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
-  ({ step, setStep, totalSteps }) => {
-    const handleNext = () => {
-      if (step < totalSteps) {
-        setStep(step + 1);
-      }
-    };
-
-    const handlePrev = () => {
-      if (step > 1) {
-        setStep(step - 1);
-      }
-    };
-
-    return (
-      <div className={'flex justify-between'}>
-        <Button
-          onClick={handlePrev}
-          className={style('w-full @xl:w-auto')}
-          type="button"
-          version="secondary"
-          disabled={step === 1}
-        >
-          Назад
-        </Button>
-        <Button
-          onClick={handleNext}
-          className={style('w-full @xl:w-auto')}
-          type="button"
-          disabled={step === totalSteps}
-        >
-          Далее
-        </Button>
-      </div>
-    );
-  },
-);
+export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(({ step, onPrevStep }) => {
+  return (
+    <div className={'flex justify-between'}>
+      <Button
+        onClick={onPrevStep}
+        className={style('w-full @xl:w-auto')}
+        type="button"
+        version="secondary"
+        disabled={step === 1}
+      >
+        Назад
+      </Button>
+      <Button className={style('w-full @xl:w-auto')} type="submit">
+        Далее
+      </Button>
+    </div>
+  );
+});

package/src/components/CreditForm/creditFormStepsData.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable max-lines */
 /* eslint-disable max-len */
 
+//TODO: DO List
 export const stepsSectionsMap = {
   1: [
     {
@@ -33,24 +34,27 @@ export const stepsSectionsMap = {
         {
           fieldType: 'common',
           name: 'education',
-          required: true,
         },
       ],
     },
     {
       title: 'Адрес регистрации по месту жительства',
+      columns: 1,
+      inputs: [],
+    },
+    {
+      inputs: [{ fieldType: 'common', name: 'participantAddress', required: true, dadata: true }],
+    },
+    {
       columns: 2,
-      inputs: [
-        { fieldType: 'common', name: 'participantAddress', required: true },
-        { fieldType: 'common', name: 'participantAddress', required: true, dadata: true },
-      ],
+      inputs: [{ fieldType: 'common', name: 'participantDateRegistration', required: true }],
     },
     {
       title: 'Адрес фактического проживания (место пребывания РФ)',
       columns: 2,
       inputs: [
         { fieldType: 'common', name: 'fullAddress', required: true, dadata: true },
-        { fieldType: 'common', name: 'housing', required: true },
+        { fieldType: 'common', name: 'housing' },
       ],
     },
   ],
@@ -69,7 +73,7 @@ export const stepsSectionsMap = {
     },
     {
       inputs: [
-        { fieldType: 'common', name: 'employment', required: true },
+        { fieldType: 'common', name: 'employment' },
         { fieldType: 'common', name: 'organizationName', required: true, dadata: true },
       ],
     },
@@ -82,15 +86,15 @@ export const stepsSectionsMap = {
     },
     {
       inputs: [
-        { fieldType: 'common', name: 'organization', required: true },
-        { fieldType: 'common', name: 'amountWorkers', required: true },
+        { fieldType: 'common', name: 'organization', required: false },
+        { fieldType: 'common', name: 'amountWorkers', required: false },
       ],
     },
     {
       columns: 2,
       inputs: [
-        { fieldType: 'common', name: 'employerActivities', required: true },
-        { fieldType: 'common', name: 'employerOrganization', required: true },
+        { fieldType: 'common', name: 'employerActivities', required: false },
+        { fieldType: 'common', name: 'employerOrganization', required: false },
         { fieldType: 'common', name: 'generalSeniority', required: true },
         { fieldType: 'common', name: 'lastJobExperience', required: true },
         { fieldType: 'common', name: 'experience5Years', required: true },
@@ -101,7 +105,13 @@ export const stepsSectionsMap = {
       inputs: [
         { fieldType: 'common', name: 'phone', label: 'Телефон работодателя', required: true },
         { fieldType: 'common', name: 'beginDate', required: true },
-        { fieldType: 'common', name: 'positionOrganization', required: true },
+      ],
+    },
+    {
+      columns: 2,
+      inputs: [
+        { fieldType: 'common', name: 'positionOrganization', required: false },
+        { fieldType: 'common', name: 'partInBusiness', required: true },
       ],
     },
     {
@@ -118,20 +128,15 @@ export const stepsSectionsMap = {
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'familyStatus' }],
+      inputs: [{ fieldType: 'common', name: 'familyStatus', required: true }],
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'dependents' }],
+      inputs: [{ fieldType: 'common', name: 'dependents', required: true }],
     },
     {
-      columns: 2,
-      inputs: [
-        { fieldType: 'common', name: 'familyMembers' },
-        { fieldType: 'common', name: 'familyMembers' },
-        { fieldType: 'common', name: 'retirementIncome' },
-        { fieldType: 'common', name: 'otherIncome' },
-      ],
+      columns: 1,
+      inputs: [{ fieldType: 'common', name: 'familyMembers', required: true }],
     },
     {
       title: 'Совокупный доход',
@@ -146,15 +151,15 @@ export const stepsSectionsMap = {
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'mandatoryIncome' }],
+      inputs: [{ fieldType: 'common', name: 'mandatoryIncome', required: true }],
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'otherPayments' }],
+      inputs: [{ fieldType: 'common', name: 'otherPayments', required: true }],
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'snils' }],
+      inputs: [{ fieldType: 'common', name: 'snils', required: true }],
     },
     {
       columns: 2,
@@ -190,10 +195,10 @@ export const stepsSectionsMap = {
       inputs: [],
     },
     {
-      inputs: [{ fieldType: 'common', name: 'region' }],
+      inputs: [{ fieldType: 'common', name: 'region', required: true }],
     },
     {
-      inputs: [{ fieldType: 'common', name: 'addressBranch' }],
+      inputs: [{ fieldType: 'common', name: 'addressBranch', required: true }],
     },
     {
       title: 'Код представителя Банка',

package/src/components/CreditForm/getInitialFormState.tsx

@@ -0,0 +1,145 @@
+import type { Option } from '../../ui-kit/Select/Option';
+
+export interface FormStateMap {
+  1: {
+    surname?: string;
+    name?: string;
+    middleName?: string;
+    sex?: string;
+    birthday?: Date;
+    birthPlace?: string;
+    phone?: string;
+    email?: string;
+    dulSerie?: number;
+    dulNumber?: number;
+    dulIssueDateField?: Date;
+    dulSubdivisionCode?: string;
+    dulIssuedBy?: string;
+    participantAddress?: string;
+    participantDateRegistration?: Date;
+    fullAddress?: string;
+    housing?: string;
+  };
+  2: {
+    employment?: Option;
+    organizationName?: string;
+    inn?: number;
+    legalForm?: string;
+    organization?: Option;
+    amountWorkers?: Option;
+    employerActivities?: Option;
+    employerOrganization?: Option;
+    lastJobExperience?: string;
+    experience5Years?: string;
+    jobsNumber?: string;
+    phone?: string;
+    beginDate?: Date;
+    positionOrganization?: Option;
+    partInBusiness?: number;
+    fullAddress?: string;
+  };
+  3: {
+    familyStatus?: Option;
+    dependents?: number;
+    familyMembers?: number;
+    mandatoryIncome?: number;
+    otherPayments?: number;
+    snils?: string;
+    armyIdFlg?: boolean;
+  };
+  4: {
+    disablePeopleFlg?: string;
+    bankruptcyFlg?: string;
+    shareholderFlg?: string;
+    legalEntityName?: string;
+    creditInRshbCd?: string;
+  };
+  5: {
+    region?: string;
+    addressBranch?: string;
+    bankEmployeeCode?: string;
+  };
+}
+
+const formStateMap: FormStateMap = {
+  1: {
+    surname: '',
+    name: '',
+    middleName: '',
+    sex: '',
+    birthday: undefined,
+    birthPlace: '',
+    phone: '',
+    email: '',
+    dulSerie: undefined,
+    dulNumber: undefined,
+    dulIssueDateField: undefined,
+    dulSubdivisionCode: '',
+    dulIssuedBy: '',
+    participantAddress: '',
+    participantDateRegistration: undefined,
+    fullAddress: '',
+    housing: '',
+  },
+  2: {
+    employment: { key: '', text: '' },
+    organizationName: '',
+    inn: undefined,
+    legalForm: '',
+    organization: { key: '', text: '' },
+    amountWorkers: { key: '', text: '' },
+    employerActivities: { key: '', text: '' },
+    employerOrganization: { key: '', text: '' },
+    lastJobExperience: '',
+    experience5Years: '',
+    jobsNumber: '',
+    phone: '',
+    beginDate: undefined,
+    positionOrganization: { key: '', text: '' },
+    partInBusiness: undefined,
+    fullAddress: '',
+  },
+  3: {
+    familyStatus: { key: '', text: '' },
+    dependents: undefined,
+    familyMembers: undefined,
+    mandatoryIncome: undefined,
+    otherPayments: undefined,
+    snils: '',
+    armyIdFlg: false,
+  },
+  4: {
+    disablePeopleFlg: '',
+    bankruptcyFlg: '',
+    shareholderFlg: '',
+    legalEntityName: '',
+    creditInRshbCd: '',
+  },
+  5: {
+    region: '',
+    addressBranch: '',
+    bankEmployeeCode: '',
+  },
+};
+
+export const getInitialFormState = <Step extends keyof FormStateMap>(
+  step: Step,
+  localStorageData: Record<string, any> | null,
+): FormStateMap[Step] => {
+  if (localStorageData) {
+    // TODO: Fill in for other fields with type Date
+    // TODO: Take it out to the helper
+    localStorageData.birthday = localStorageData.dulIssueDateField = new Date(
+      (localStorageData?.birthday as string) || Date.now(),
+    );
+    localStorageData.participantDateRegistration = new Date(
+      (localStorageData?.participantDateRegistration as string) || Date.now(),
+    );
+    localStorageData.beginDate = new Date((localStorageData?.beginDate as string) || Date.now());
+  }
+
+  return {
+    ...formStateMap[step],
+    ...localStorageData,
+  };
+};

package/src/components/CreditForm/renderInputs.tsx

@@ -0,0 +1,6 @@
+import { getField } from '../../ui-kit/FormField/getField';
+import { type RenderInputsProps } from './CreditFormContent';
+
+export const renderInputs = ({ field, inputs }: RenderInputsProps) => {
+  return (inputs || [])?.map(getField(field, ''));
+};

package/src/components/CreditForm/useCreditFormApi.tsx

@@ -0,0 +1,36 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { getObjectValidator } from '../../ui-kit/FormField/getObjectValidator';
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess } from '../../validation/validator';
+import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import { type FormStateMap } from './getInitialFormState';
+
+type CreditFormApiProps = {
+  inputs: FieldDef[];
+  onNextStep: () => void;
+  saveStep: (value: Record<string, any>) => void;
+};
+
+export const useCreditFormApi = ({ inputs, onNextStep, saveStep }: CreditFormApiProps) => {
+  const handleSubmit = useCallback(async (formData: FormStateMap[keyof FormStateMap]) => {
+    const feedbackValidator = objectValidator(getObjectValidator(inputs));
+    if (!isValidationSuccess(feedbackValidator(formData))) {
+      return 'Fail';
+    }
+
+    try {
+      // TODO: add updateUserTask here
+    } catch (ex) {
+      return 'Fail';
+    }
+
+    saveStep(formData);
+    onNextStep();
+
+    return 'OK';
+  }, []);
+
+  return {
+    handleSubmit,
+  };
+};

package/src/ui-kit/Checkbox/CheckboxWithDoc.tsx

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type VNode } from '../../model/VNode';
-import { Dialog } from '../DialogManager/Dialog';
+import { openDocument } from '../DialogManager/openDocument';
 import { useDialogManager } from '../DialogManager/useDialogManager';
 import { renderErrorText } from '../Input/renderErrorText';
 import { LinkButton } from '../LinkButton/LinkButton';
 import { Text } from '../Text/Text';
 import { Checkbox } from './Checkbox';
 import { type CheckboxProps } from './CheckboxProps';
-import { getDocument } from './getDocument';
 
 const OPEN_DOC_BUTTON_TEXT = 'Ознакомиться';
 
@@ -24,10 +22,7 @@ export const CheckboxWithDoc = JSX<CheckboxWithDocProps>(
         <div className="flex flex-wrap gap-x-m">
           <Checkbox {...props} />
           {docId ? (
-            <LinkButton
-              className="text-primary-main"
-              onClick={() => handleOpenDocument(docId, open)}
-            >
+            <LinkButton className="text-primary-main" onClick={() => openDocument(docId, open)}>
               <Text>{OPEN_DOC_BUTTON_TEXT}</Text>
             </LinkButton>
           ) : null}
@@ -37,12 +32,3 @@ export const CheckboxWithDoc = JSX<CheckboxWithDocProps>(
     );
   },
 );
-
-const handleOpenDocument = async (id: number, open: (dialog: VNode) => void) => {
-  const document = await getDocument(id);
-  open(
-    <Dialog className="my-6xl max-w-4xl mx-auto px-0 min-h-0 pb-0">
-      <iframe src={`${document}#toolbar=0`} className="w-full h-[80vh]" id="iframe-dialog" />
-    </Dialog>,
-  );
-};

package/src/ui-kit/ConsentBkiDialog/ConsentBkiDialog.fixture.tsx

@@ -0,0 +1,7 @@
+import '../../setup-fixture';
+
+import { ConsentBkiDialog } from './ConsentBkiDialog';
+
+export default {
+  default: <ConsentBkiDialog />,
+};

package/src/ui-kit/ConsentBkiDialog/ConsentBkiDialog.tsx

@@ -0,0 +1,73 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { noop } from '../../utils/noop';
+import { Button } from '../Button/Button';
+import { Dialog } from '../DialogManager/Dialog';
+import { openDocument } from '../DialogManager/openDocument';
+import { useDialogManager } from '../DialogManager/useDialogManager';
+import { Heading } from '../Heading/Heading';
+import { Paragraph } from '../Paragraph/Paragraph';
+import { RadioButtonGroup } from '../RadioButtonGroup/RadioButtonGroup';
+export interface ConsentBkiDialogProps {
+  handleSubmit?: (confirmStatus: string) => void;
+  onClose?: () => void;
+}
+
+const defaultConsentText = {
+  title: 'Подпишите согласие на запрос в БКИ',
+  description: 'Согласие на запрос в Бюро кредитных историй (БКИ) ускорит решение по кредиту',
+};
+
+const refuseConsentText = {
+  title: 'Вы уверены, что хотите отказаться от запроса в БКИ',
+  description: 'Согласие на запрос в Бюро кредитных историй (БКИ) повысит вероятность одобрения',
+};
+
+export const ConsentBkiDialog = JSX<ConsentBkiDialogProps>(function ({
+  handleSubmit = noop,
+  onClose = noop,
+}) {
+  const [confirmStatus, setConfirmStatus] = useState('');
+  const [showRefuceContent, setShowRefuceContent] = useState(false);
+  const { open, close } = useDialogManager();
+  const handleClose = useCallback(() => {
+    close();
+    handleSubmit(confirmStatus);
+  }, [confirmStatus]);
+
+  const handleConfirmChange = useCallback((value: string) => {
+    setConfirmStatus(value);
+    if (value === 'REFUSE') {
+      setShowRefuceContent(true);
+    }
+  }, []);
+  const consentText = showRefuceContent ? refuseConsentText : defaultConsentText;
+
+  return (
+    <Dialog className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg" onClose={onClose}>
+      <div className="flex flex-col gap-lg items-center">
+        <div role="button" onClick={() => openDocument(CONSENT_BKI_ID, open)}>
+          <Heading className="text-center text-balance" title={consentText.title} />
+        </div>
+        <Paragraph align="text-center">{consentText.description}</Paragraph>
+        <RadioButtonGroup
+          className="whitespace-normal"
+          orientation="horizontal"
+          items={ITEMS}
+          value={confirmStatus}
+          onChange={handleConfirmChange}
+        />
+        <Button disabled={!confirmStatus} type="button" onClick={handleClose}>
+          Продолжить
+        </Button>
+      </div>
+    </Dialog>
+  );
+});
+
+const ITEMS = [
+  { id: 'SIGNED', text: 'Подписать' },
+  { id: 'REFUSE', text: 'Отказаться' },
+];
+
+const CONSENT_BKI_ID = 2;

package/src/ui-kit/ConsentBkiDialog/useConsentBkiDialog.tsx

@@ -0,0 +1,58 @@
+import { updateUserProfile } from '../../api/RetailAPI/updateUserProfile';
+import { formatPhone } from '../../utils/formatPhone';
+import { useDialogManager } from '../DialogManager/useDialogManager';
+import { useVerifyPhoneDialog } from '../VerifyPhoneDialog/useVerifyPhoneDialog';
+import { ConsentBkiDialog } from './ConsentBkiDialog';
+
+export const useConsentBkiDialog = () => {
+  const { open, closeAll } = useDialogManager();
+  const verifyPhoneDialog = useVerifyPhoneDialog();
+
+  const redirectToCreditForm = () => {
+    globalThis.location.href = '/credit-lead';
+  };
+
+  const handleSuccessVerify = (profileId?: number) => async (smsCode?: string) => {
+    if (profileId) {
+      await updateUserProfile({
+        profile: {
+          id: profileId,
+          consentBkiFlg: true,
+          smsConsentBki: smsCode,
+        },
+      });
+    }
+
+    redirectToCreditForm();
+  };
+
+  const handleSubmitBkiConstent =
+    (phone?: string, profileId?: number) => async (confirmStatus: string) => {
+      await closeAll();
+
+      if (confirmStatus === 'SIGNED' && phone) {
+        verifyPhoneDialog.open(handleSuccessVerify(profileId), verifyPhoneContent(phone));
+      } else {
+        redirectToCreditForm();
+      }
+    };
+
+  return {
+    open: (phone?: string, profileId?: number) =>
+      open(
+        <ConsentBkiDialog
+          handleSubmit={handleSubmitBkiConstent(phone, profileId)}
+          onClose={redirectToCreditForm}
+        />,
+      ),
+  };
+};
+
+const verifyPhoneContent = (phone: string) => ({
+  title: 'Подтвердите номер телефона',
+  description: `Мы отправили код на ${phone}`,
+  phoneNumber: formatPhone(phone),
+  textButton: 'Отправить',
+  __html: `<span>Вводя код, я подтверждаю, что ознакомлен и подписываю:</span>
+              <ul><li>согласие на запрос информации в БКИ</li></ul>`,
+});