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

package/mobile/src/components/DebitForm/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 onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
+          Назад
+        </Button>
+        <SubmitButton isLoading={isSending}>
+          {isFinalStep ? 'Отправить заявку' : 'Далее'}
+        </SubmitButton>
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DebitFormStatus } from './DebitFormStatus';
+
+type SuccessStatusContentProps = {
+  isOffice: boolean;
+};
+
+export const SuccessStatusContent = JSX<SuccessStatusContentProps>(({ isOffice }) => (
+  <DebitFormStatus
+    title="Заявка принята"
+    description={
+      isOffice
+        ? 'Ваша заявка принята, мы сообщим вам в СМС о поступлении карты в офис'
+        : 'Вам позвонит сотрудник Банка для уточнения времени и даты доставки'
+    }
+    buttonText="Вернуться на главную"
+  />
+));

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

@@ -0,0 +1,45 @@
+import { type LeadFormState } from '../../retail/model/LeadFormState';
+
+export const formStateMap: Partial<LeadFormState>[] = [
+  {
+    regionRetail: { key: '', text: '' },
+    regionHasDelivery: false,
+    addressRetail: { key: '', text: '' },
+    addressCourier: {
+      fullAddress: '',
+      fiasCode: '',
+    },
+    methodObtain: undefined,
+    deliveryDate: undefined,
+  },
+  {
+    surname: '',
+    name: '',
+    middleName: '',
+    sex: '',
+    limitedBirthday: undefined,
+    birthPlace: '',
+    phone: '',
+    email: '',
+    dulSerie: undefined,
+    dulNumber: undefined,
+    dulIssueDate: undefined,
+    dulSubdivisionCode: '',
+    dulIssuedBy: '',
+    addressRegistration: {
+      fullAddress: '',
+      fiasCode: '',
+    },
+    addressFact: {
+      fullAddress: '',
+      fiasCode: '',
+    },
+  },
+  {
+    paymentSystem: { key: '', text: '' },
+    currency: '810',
+    codeWord: '',
+    latinName: '',
+    latinSurname: '',
+  },
+];

package/mobile/src/components/DebitForm/getDebitCardFormTaskData.ts

@@ -0,0 +1,63 @@
+import { locationNavigator } from '../../external/locationNavigator';
+import { getCardOptionsData } from '../../retail/adaptors/getCardOptionsData';
+import { getPersonalInfoData } from '../../retail/adaptors/getPersonalInfoData';
+import { type Participant } from '../../retail/api/updateUserTask';
+import { type UpdateUserTaskDebitBody } from '../../retail/api/updateUserTaskDebit';
+import { type LeadFormState } from '../../retail/model/LeadFormState';
+import {
+  getDebitCardData,
+  getDeliveryData,
+  getDeliveryDebitData,
+  getOfficeCode,
+} from './getDeliveryDebitData';
+import { debitProgrammIdToCardCodesMap } from './utils';
+
+type getDebitFormTaskDataProps = {
+  participantId: number;
+  taskId: number;
+  formData: LeadFormState;
+  programId: string;
+  step?: number;
+};
+
+export const getDebitCardFormTaskData = ({
+  participantId,
+  taskId,
+  formData,
+  programId,
+  step = 0,
+}: getDebitFormTaskDataProps): UpdateUserTaskDebitBody => {
+  const navigator = locationNavigator();
+
+  return {
+    task: {
+      taskSource: navigator.origin,
+      id: taskId,
+      creditProgram: {
+        code: debitProgrammIdToCardCodesMap[programId],
+      },
+      ...getOfficeCode(formData),
+      participants: [
+        {
+          id: participantId,
+          ...getCurrentStepData(step, formData),
+        },
+      ],
+      ...getCardOptionsData(formData),
+      ...getDeliveryData(formData),
+    },
+  };
+};
+
+const getCurrentStepData = (step: number, formData: LeadFormState): Partial<Participant> => {
+  switch (step) {
+    case 0:
+      return getDeliveryDebitData(formData);
+    case 1:
+      return getPersonalInfoData(formData);
+    case 2:
+      return getDebitCardData(formData);
+    default:
+      return {};
+  }
+};

package/mobile/src/components/DebitForm/getDeliveryDebitData.ts

@@ -0,0 +1,55 @@
+import { getParticipantAddresses } from '../../retail/adaptors/utils';
+import { type LeadFormState } from '../../retail/model/LeadFormState';
+import { dateToISO } from '../../utils/dateToISO';
+
+export const getDeliveryData = (formData: LeadFormState) => {
+  const { methodObtain, regionRetail, comment, deliveryDate = '' } = formData;
+
+  const isCourierDelivery = methodObtain === 'courier';
+
+  return isCourierDelivery
+    ? {
+        cardServiceRegionCd: regionRetail,
+        courierDeliveryFlg: true,
+        deliveryComments: comment,
+        deliveryDate: dateToISO(deliveryDate.toString().replace(/(GMT)[+-]\d{4}/, 'GMT+0000')),
+        deliveryTimeCd: { key: 'TIME_2' },
+        office: { id: '' },
+      }
+    : {};
+};
+
+export const getOfficeCode = (formData: LeadFormState) => {
+  const { addressRetail, methodObtain } = formData;
+
+  const isOfficeObtain = addressRetail?.key && methodObtain === 'office';
+
+  return isOfficeObtain
+    ? {
+        courierDeliveryFlg: false,
+        office: { id: addressRetail.key },
+      }
+    : {};
+};
+
+export const getDeliveryDebitData = (formData: LeadFormState) => {
+  const { addressCourier, methodObtain } = formData;
+
+  const isCourierDelivery = methodObtain === 'courier';
+
+  return isCourierDelivery
+    ? {
+        participantAddresses: getParticipantAddresses({ addressCourier }),
+      }
+    : {};
+};
+
+export const getDebitCardData = (formData: LeadFormState) => {
+  const { latinName: latinFirstname, latinSurname } = formData;
+
+  return {
+    latinFirstname,
+    latinSurname,
+    latinName: `${latinFirstname} ${latinSurname}`,
+  };
+};

package/mobile/src/components/DebitForm/useDebitFormAPI.tsx

@@ -0,0 +1,73 @@
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { updateUserTaskDebit } from '../../retail/api/updateUserTaskDebit';
+import { useRetailFormStore } from '../../retail/hooks/useRetailFormStore';
+import { type LeadFormState } from '../../retail/model/LeadFormState';
+import { getInitialFormState } from '../../retail/utils/getInitialFormState';
+import { getDebitCardFormTaskData } from './getDebitCardFormTaskData';
+
+interface DebitFormApiProps {
+  step: number;
+  onNextStep: () => void;
+  onFinish?: () => void;
+}
+
+export const useDebitFormAPI = ({
+  step,
+  onNextStep,
+  onFinish,
+}: DebitFormApiProps): [LeadFormState, (formData: LeadFormState) => void, boolean] => {
+  const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
+  const isFinalStep = step === 2;
+
+  const retailFormStore = useRetailFormStore();
+
+  const initialState = useMemo(
+    () => getInitialFormState(step, retailFormStore.leadForm),
+    [step, retailFormStore.leadForm],
+  );
+
+  const resetForm = useCallback(() => {
+    const { leadForm } = retailFormStore;
+    retailFormStore.statusInfo = {
+      methodObtain: leadForm?.methodObtain,
+    };
+    retailFormStore.leadForm = initialState;
+  }, [initialState]);
+
+  const handleSubmit = useCallback(
+    async (formData: LeadFormState) => {
+      startSending();
+      retailFormStore.leadForm = formData;
+
+      try {
+        const { taskId, participantId, programId } = retailFormStore;
+        if (taskId && participantId && programId) {
+          await updateUserTaskDebit(
+            getDebitCardFormTaskData({
+              participantId,
+              taskId,
+              programId,
+              step,
+              formData: formData as any,
+            }),
+          );
+        }
+
+        if (isFinalStep || formData.methodObtain === 'courier') {
+          onFinish?.();
+          resetForm();
+        } else {
+          onNextStep();
+        }
+      } catch (ex) {
+        // Do nothing
+      } finally {
+        endSending();
+      }
+    },
+    [isFinalStep],
+  );
+
+  return [initialState, handleSubmit, isSending];
+};

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

@@ -0,0 +1,10 @@
+export const debitProgrammIdToCardCodesMap = {
+  17: 'amur_debit_card',
+  16: 'owner_debit_card',
+  18: 'pansion_debit_card',
+  38: 'salary_debit_card',
+  40: 'vordi_debit_card',
+  42: 'eco_debit_card',
+  43: 'junior_debit_card',
+  44: 'appetit_debit_card',
+};

package/mobile/src/components/Header/HeaderChatBotButton.tsx

@@ -16,7 +16,7 @@ interface HeaderChatBotButtonProps {
 
 export const HeaderChatBotButton = JSX<HeaderChatBotButtonProps>(
   ({ chat = 'personal', iconVersion, className, ariaLabel = 'Чат', version }) => {
-    const load = useChatBot(chat);
+    const { load, isLoading } = useChatBot(chat);
 
     return (
       <HeaderSecondaryMenuButton
@@ -27,6 +27,7 @@ export const HeaderChatBotButton = JSX<HeaderChatBotButtonProps>(
         buttonSize="large"
         isGrayBg={true}
         version={version}
+        isLoading={isLoading}
       />
     );
   },

package/mobile/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -16,6 +16,7 @@ export interface HeaderSecondaryMenuButtonProps extends ImageContent, AspectsPro
   ariaLabel?: string;
   onClick?: (ev: PreventableEventWithTarget) => void;
   version?: BlockVersion;
+  isLoading?: boolean;
 }
 
 const BUTTON_SIZE_STYLE = {
@@ -35,6 +36,7 @@ export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
     data,
     onClick,
     version,
+    isLoading,
   }) => {
     const grayBg = isGrayBg && !isRounded ? 'bg-main-divider' : '';
     const bgColor = version === 'transparent' ? 'backdrop-opacity-30 bg-white/30' : grayBg;
@@ -58,13 +60,17 @@ export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...getAspectsAttributes(data)}
       >
-        <Img
-          image={image}
-          className={style('h-full', {
-            'bg-main-divider/20 rounded-full': isRounded,
-          })}
-          imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
-        />
+        {isLoading ? (
+          <div className="w-full h-full rounded-full border-4 border-r-transparent animate-spin text-primary-main" />
+        ) : (
+          <Img
+            image={image}
+            className={style('h-full', {
+              'bg-main-divider/20 rounded-full': isRounded,
+            })}
+            imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
+          />
+        )}
       </button>
     );
   },

package/mobile/src/components/Header/useChatBot.ts

@@ -1,4 +1,4 @@
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { initializeExternalNS, initializeExternalStylesheet } from '../../hooks/useExternalNS';
 import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 
@@ -15,26 +15,35 @@ const CHATBOT_URL: Record<string, string> = {
 interface WebChat {
   render?: (id?: string, isOpen?: boolean) => void;
   chatOpen?: () => void;
+  chatClose?: () => void;
 }
 
 export const useChatBot = (chat?: string) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
   useEffect(() => globalThis.localStorage?.setItem(CHAT_STORAGE_NAME, String(Date.now())), []);
   const chatUrl = CHATBOT_URL[chat ?? ''];
 
-  return async (ev: PreventableEventWithTarget) => {
-    if (!chatUrl) {
-      return;
-    }
-
-    if (chat === 'business') {
-      await renderBusinessChatBot(chatUrl);
-    } else {
-      renderPersonalChatBot(ev, chatUrl);
-    }
-  };
+  const load = useCallback(
+    (ev: PreventableEventWithTarget) => {
+      if (!chatUrl) {
+        return;
+      }
+
+      setIsLoading(true);
+      if (chat === 'business') {
+        renderBusinessChatBot(chatUrl).finally(() => setIsLoading(false));
+      } else {
+        renderPersonalChatBot(ev, chatUrl).finally(() => setIsLoading(false));
+      }
+    },
+    [chatUrl, chat],
+  );
+
+  return { load, isLoading };
 };
 
-const renderPersonalChatBot = (ev: PreventableEventWithTarget, chatUrl: string) => {
+const renderPersonalChatBot = async (ev: PreventableEventWithTarget, chatUrl: string) => {
   const target = ev.target as HTMLElement;
 
   if (!target?.classList.contains(CHAT_BUTTON_EXTERNAL_NAME)) {
@@ -43,7 +52,7 @@ const renderPersonalChatBot = (ev: PreventableEventWithTarget, chatUrl: string)
 
   const chatFrame = globalThis.document.getElementById(CHAT_FRAME_ID);
   if (!chatFrame) {
-    initializeExternalNS(CHAT_NAMESPACE, chatUrl);
+    await initializeExternalNS(CHAT_NAMESPACE, chatUrl);
   }
 };
 

package/mobile/src/retail/RetailBlocks.ts

@@ -0,0 +1 @@
+export { Blocks as RetailBlocks } from './blocks/Blocks';

package/mobile/src/retail/adaptors/getAdditionalInfoData.ts

@@ -0,0 +1,13 @@
+import { type Participant } from '../api/updateUserTask';
+import { type LeadFormState } from '../model/LeadFormState';
+
+export const getAdditionalInfoData = (formData: LeadFormState): Partial<Participant> => {
+  const { bankruptcyFlg, shareholderFlg, legalEntityName, creditInRshbCd } = formData;
+
+  return {
+    bankruptcyFlg,
+    shareholderFlg,
+    nameLegalEntity: legalEntityName,
+    creditInRshbCd,
+  };
+};

package/mobile/src/retail/adaptors/getCalculatorData.ts

@@ -0,0 +1,13 @@
+import { type Participant } from '../api/updateUserTask';
+import { type LeadFormState } from '../model/LeadFormState';
+
+export const getCalculatorData = (
+  formData: LeadFormState,
+): Pick<Participant, 'payrollCardRshbFlg' | 'consentInsuranceFlg'> => {
+  const { isInsurance, isSalaryClient } = formData?.calculator ?? {};
+
+  return {
+    payrollCardRshbFlg: isInsurance,
+    consentInsuranceFlg: isSalaryClient,
+  };
+};

package/mobile/src/retail/adaptors/getCardOptionsData.tsx

@@ -0,0 +1,12 @@
+import { type LeadFormState } from '../model/LeadFormState';
+
+export const getCardOptionsData = (formData: LeadFormState) => {
+  const { currency, paymentSystem, cardCategory, codeWord } = formData;
+
+  return {
+    currencyCode: currency ? { key: currency } : undefined,
+    paymentSystemTypeCd: paymentSystem,
+    classCard: cardCategory,
+    codeWord: codeWord,
+  };
+};

package/mobile/src/retail/adaptors/getCreditFormTaskData.ts

@@ -0,0 +1,73 @@
+import { getCalcData } from '../../components/CreditForm/getCalcData';
+import { locationNavigator } from '../../external/locationNavigator';
+import { type Participant, type UpdateUserTaskBody } from '../api/updateUserTask';
+import { type LeadFormState } from '../model/LeadFormState';
+import { getAdditionalInfoData } from './getAdditionalInfoData';
+import { getCalculatorData } from './getCalculatorData';
+import { getDeliveryCreditData } from './getDeliveryCreditData';
+import { getEmploymentData } from './getEmploymentData';
+import { getFamilyStatusAndIncomeData } from './getFamilyStatusAndIncomeData';
+import { getPersonalInfoData } from './getPersonalInfoData';
+
+type getCreditFormTaskDataProps = {
+  participantId: number;
+  taskId: number;
+  profileId: number;
+  formData: LeadFormState;
+  step?: number;
+};
+
+export const getCreditFormTaskData = ({
+  participantId,
+  taskId,
+  profileId,
+  formData,
+  step = 0,
+}: getCreditFormTaskDataProps): UpdateUserTaskBody => {
+  const navigator = locationNavigator();
+
+  return {
+    sendToBank: true,
+    taskKind: 'UNITED',
+    task: {
+      taskSource: navigator.origin,
+      id: taskId,
+      authorizedAgentId: formData?.bankEmployeeCode,
+      participants: [
+        {
+          id: participantId,
+          profile: {
+            id: profileId,
+          },
+          roleCd: {
+            key: 'BORROWER',
+            value: 'Заемщик',
+          },
+          ...getCurrentStepData(step, formData),
+        },
+      ],
+      ...getCalcData(formData),
+      ...getDeliveryCreditData(formData),
+      esiaAccountTypeCd: {
+        key: formData?.esiaAccountTypeCd?.key,
+      } as UpdateUserTaskBody['task']['esiaAccountTypeCd'],
+    },
+  };
+};
+
+const getCurrentStepData = (step: number, formData: LeadFormState): Partial<Participant> => {
+  switch (step) {
+    case 0:
+      return getCalculatorData(formData);
+    case 1:
+      return getPersonalInfoData(formData);
+    case 2:
+      return getEmploymentData(formData);
+    case 3:
+      return getFamilyStatusAndIncomeData(formData);
+    case 4:
+      return getAdditionalInfoData(formData);
+    default:
+      return {};
+  }
+};

package/mobile/src/retail/adaptors/getDeliveryCreditData.ts

@@ -0,0 +1,12 @@
+import { type UpdateUserTaskBody } from '../api/updateUserTask';
+import { type LeadFormState } from '../model/LeadFormState';
+
+export const getDeliveryCreditData = (
+  formData: LeadFormState,
+): Partial<UpdateUserTaskBody['task']> => {
+  const { addressRetail } = formData;
+
+  return {
+    office: addressRetail?.key ? { id: addressRetail.key } : undefined,
+  };
+};

package/mobile/src/retail/adaptors/getEmploymentData.tsx

@@ -0,0 +1,49 @@
+import { formatDate } from '../../utils/formatDate';
+import { formatPhone } from '../../utils/formatPhone';
+import { type Participant } from '../api/updateUserTask';
+import { type LeadFormState } from '../model/LeadFormState';
+import { getParticipantAddresses, getParticipantContacts } from './utils';
+
+export const getEmploymentData = (formData: LeadFormState): Partial<Participant> => {
+  const {
+    beginDate,
+    employment,
+    organizationName,
+    inn,
+    legalForm,
+    organization,
+    amountWorkers,
+    employerActivities,
+    employerOrganization,
+    generalSeniority,
+    lastJobExperience,
+    experience5Years,
+    jobsNumber,
+    organizationPhone,
+    organizationAddress,
+    positionOrganization,
+    partInBusiness,
+  } = formData;
+
+  return {
+    employmentContractDate: formatDate(beginDate || '', true),
+    employmentTypeCd: employment,
+    organizationName,
+    organizationInn: inn,
+    organizationActivityTypeCd: employerActivities,
+    organizationTypeCd: organization,
+    organizationKindCd: employerOrganization,
+    employeesNumberCd: amountWorkers,
+    opf: legalForm,
+    seniority: generalSeniority,
+    generalSeniority: experience5Years,
+    jobsNumber,
+    lastWorkDuration: lastJobExperience,
+    positionCd: positionOrganization,
+    participantContacts: getParticipantContacts({
+      organizationPhone: organizationPhone && formatPhone(organizationPhone),
+    }),
+    participantAddresses: getParticipantAddresses({ organizationAddress }),
+    ownershipShare: positionOrganization?.key === 'BUSINESS_OWNER' ? partInBusiness : '',
+  };
+};

package/mobile/src/retail/adaptors/getFamilyStatusAndIncomeData.ts

@@ -0,0 +1,47 @@
+import { type Participant } from '../api/updateUserTask';
+import { type LeadFormState } from '../model/LeadFormState';
+import { getParticipantIncomes } from './utils';
+
+export const getFamilyStatusAndIncomeData = (formData: LeadFormState): Partial<Participant> => {
+  const {
+    familyStatus,
+    familyMembers,
+    dependents,
+    children,
+    confirmationIncome,
+    wages,
+    mandatoryPayments,
+    additionalIncome,
+    otherIncome,
+    otherPayments,
+    rentalIncome,
+    retirementIncome,
+    snils,
+    armyIdFlg,
+    conscription,
+  } = formData;
+
+  return {
+    maritalStatusCd: familyStatus,
+    totalDependents: familyMembers,
+    incomeCertificateCd: confirmationIncome,
+    otherDependents: dependents,
+    childrenDependents: children,
+    militaryStatusCd: conscription,
+    participantIncomes: getParticipantIncomes({
+      wages,
+      mandatoryPayments,
+      incomeAverage: countIncomeAverage(wages, retirementIncome),
+      additionalIncome,
+      otherIncome,
+      otherPayments,
+      rentalIncome,
+      retirementIncome,
+    }),
+    snils: snils?.replace(/[-\s]/g, ''),
+    armyIdFlg,
+  };
+};
+
+export const countIncomeAverage = (wages?: number, retirementIncome?: number) =>
+  Number(wages) + Number(retirementIncome);