@redneckz/wildless-cms-uni-blocks 0.16.1 → 0.16.3-isr

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { type LeadFormState } from '../../retail/model/LeadFormState';
+import { mainFormStateMap } from '../../retail/utils/mainFormStateMap';
+
+export const formStateMap: Partial<LeadFormState>[] = [
+  {
+    calculator: {
+      moneyValue: 0,
+      monthsValue: 0,
+      monthlyPayment: 0,
+      rate: 0,
+      isAnnuity: false,
+      isInsurance: false,
+      isSalaryClient: false,
+      isPensionClient: false,
+      isStateEmployee: false,
+    },
+  },
+  ...mainFormStateMap,
+  {
+    regionRetail: { key: '', text: '' },
+    addressRetail: undefined,
+    bankEmployeeCode: undefined,
+  },
+];

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

@@ -0,0 +1,19 @@
+import { type PaymentType, type UpdateUserTaskBody } from '../../retail/api/updateUserTask';
+import { type LeadFormState } from '../../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/useCreditFormAPI.tsx

@@ -0,0 +1,82 @@
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { getCreditFormTaskData } from '../../retail/adaptors/getCreditFormTaskData';
+import { updateUserTask } from '../../retail/api/updateUserTask';
+import { useRetailFormStore } from '../../retail/hooks/useRetailFormStore';
+import { type LeadFormState } from '../../retail/model/LeadFormState';
+import { getInitialFormState } from '../../retail/utils/getInitialFormState';
+import { formStateMap } from './formStateMap';
+
+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, formStateMap),
+    [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,
+            monthlyPayment: leadForm?.calculator?.monthlyPayment,
+            rate: leadForm?.calculator?.rate,
+          },
+        };
+        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);
+        }
+
+        isFinalStep ? onFinish?.() : onNextStep();
+      } catch (ex) {
+        // Do nothing
+      } finally {
+        endSending();
+      }
+    },
+    [isFinalStep, resetForm],
+  );
+
+  return [initialState, handleSubmit, isSending];
+};

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

@@ -0,0 +1,42 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useRetailFormStore } from '../../retail/hooks/useRetailFormStore';
+import { formatDate } from '../../utils/formatDate';
+import { DebitFormStatus } from './DebitFormStatus';
+
+export const DboClientStatusContent = JSX(() => {
+  const { leadForm } = useRetailFormStore();
+
+  return (
+    <DebitFormStatus
+      title={`${leadForm?.name} ${leadForm?.middleName},`}
+      description="Информация о Вас уже есть в системах Банка, обратите внимание на корректность заполнения паспортных данных"
+      sectionInfo={[
+        {
+          label: 'Фамилия',
+          description: leadForm?.surname,
+        },
+        {
+          label: 'Имя',
+          description: leadForm?.name,
+        },
+        {
+          label: 'Отчество',
+          description: leadForm?.middleName,
+        },
+        {
+          label: 'Дата рождения',
+          description: formatDate(leadForm?.limitedBirthday || ''),
+        },
+        {
+          label: 'Серия документа',
+          description: leadForm?.dulSerie,
+        },
+        {
+          label: 'Номер документа',
+          description: leadForm?.dulNumber,
+        },
+      ]}
+      isDboClient={true}
+    />
+  );
+});

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

@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { updateRefreshToken } from '../../retail/api/updateRefreshToken';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { type DebitFormContent } from './DebitFormContent';
+import { DebitFormProgress } from './DebitFormProgress';
+import { DebitFormStatusTracker } from './DebitFormStatusTracker';
+import { DebitFormStep } from './DebitFormStep';
+import { stepsSectionsMap } from './DebitFormStepsData';
+
+interface DebitFormProps extends DebitFormContent, UniBlockProps {}
+
+const STEPS = 2;
+
+const STEP_TITLES = ['', 'Персональные данные', 'Платежная система'];
+
+export const DebitForm = UniBlock<DebitFormProps>(({ className, ...rest }) => {
+  const [step, setStep] = useState(0);
+
+  const formContainerRef = useRef<HTMLDivElement | null>(null);
+  const scrollToTop = useCallback(
+    () => formContainerRef?.current?.scrollIntoView({ behavior: 'smooth' }),
+    [formContainerRef],
+  );
+
+  useEffect(updateRefreshToken, []);
+
+  const handleNextStep = useCallback(() => {
+    setStep((_) => Math.min(_ + 1, STEPS));
+    scrollToTop();
+  }, []);
+
+  const handlePrevStep = useCallback(() => {
+    //TODO search hook - 1,
+    setStep((_) => Math.max(_ - 1, 0));
+    scrollToTop();
+  }, []);
+
+  const sections = stepsSectionsMap[step];
+  const isStartStep = step === 0;
+
+  const [isFormFinished, { setTrue: handleFinish }] = useBool(false);
+
+  return (
+    <BlockWrapper className={className} {...rest}>
+      <div ref={formContainerRef} className="container grid grid-cols-12">
+        {isStartStep || isFormFinished ? null : (
+          <DebitFormProgress stepsTitles={STEP_TITLES} step={step} totalSteps={STEPS} />
+        )}
+        <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
+          {isFormFinished ? (
+            <DebitFormStatusTracker />
+          ) : (
+            <DebitFormStep
+              key={String(step)}
+              step={step}
+              sections={sections}
+              onNextStep={handleNextStep}
+              onPrevStep={handlePrevStep}
+              onFinish={handleFinish}
+            />
+          )}
+        </div>
+      </div>
+    </BlockWrapper>
+  );
+});

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

@@ -0,0 +1,6 @@
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+/**
+ * @title Форма заявки на дебетовую карту настраиваемая
+ */
+export type DebitFormContent = UniBlockContent;

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

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { ProgressBar } from '../../ui-kit/ProgressBar/ProgressBar';
+
+export interface DebitFormProgressProps {
+  step: number;
+  totalSteps?: number;
+  stepsTitles?: string[];
+}
+
+export const DebitFormProgress = JSX<DebitFormProgressProps>(
+  ({ step = 1, totalSteps = 2, stepsTitles = [] }) => {
+    const progress = useMemo(() => (step / totalSteps) * 100, [step, totalSteps]);
+
+    return (
+      <div className="py-lg px-5xl bg-white col-span-12">
+        <div>
+          <span className="font-bold mr-s">
+            Шаг {step} из {totalSteps}.
+          </span>
+          {stepsTitles[step] || null}
+          <ProgressBar step={progress} showPercentage={false} />
+        </div>
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,112 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type DescriptionProps, type LabelProps } from '../../model/HeadlineType';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Text } from '../../ui-kit/Text/Text';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
+
+type DebitFormStatusProps = UniBlockProps & {
+  title?: string;
+  description?: string;
+  sectionInfo?: (LabelProps & DescriptionProps)[];
+  buttonText?: string;
+  isDboClient?: boolean;
+};
+
+const INTERNET_BANK_LINK = 'https://online.rshb.ru/ib6/wf2/retail/ib/loginretaildefault';
+
+export const DebitFormStatus = JSX<DebitFormStatusProps>(
+  ({ title, description: dsc, sectionInfo, buttonText, isDboClient, ...props }) => {
+    return (
+      <BlockWrapper {...props}>
+        <div className="flex flex-col md:flex-row items-center">
+          <Headline
+            headlineVersion="M"
+            title={title}
+            description={dsc}
+            align="text-left"
+            padding="p-xl"
+            className="w-full"
+          />
+        </div>
+        <SectionInfo items={sectionInfo} />
+        {buttonText ? (
+          <LinkButton
+            href="/natural"
+            text={buttonText}
+            version="primary"
+            className="w-full mt-lg"
+          />
+        ) : null}
+        {isDboClient ? (
+          <div className="flex flex-col md:flex-row md:gap-lg">
+            <LinkButton
+              href="/natural/debetcards"
+              text="Заполнить заново"
+              version="primary"
+              className="w-full mt-lg"
+            />
+            <LinkButton
+              href={INTERNET_BANK_LINK}
+              text="Перейти в интернет банк"
+              version="primary"
+              className="w-full mt-lg"
+            />
+          </div>
+        ) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+const SectionInfo = ({
+  title,
+  items,
+}: {
+  title?: string;
+  items?: (LabelProps & DescriptionProps)[];
+  countColumns?: boolean;
+}) => {
+  if (!items) {
+    return null;
+  }
+
+  return (
+    <div>
+      <hr className="w-full h-px bg-main-gray border-0" />
+      <div className="p-xl">
+        {title ? (
+          <Text color="text-primary-text" size="text-h5">
+            <div className={style({ 'mb-m': Boolean(title) })}>{title}</div>
+          </Text>
+        ) : null}
+        {items ? (
+          <div
+            className={style(
+              'grid gap-m md:grid-cols-2',
+              'md:grid-cols-2',
+              // inputColumnStyles(countColumns || isMobile ? 1 : 2),
+            )}
+          >
+            {items.map((item, index) => (
+              <div key={index}>{renderItem(item)}</div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+const renderItem = ({ label, description }: LabelProps & DescriptionProps) => (
+  <div className="flex flex-col">
+    <Text color="text-secondary-text" size="text-l">
+      {label}
+    </Text>
+    <Text color="text-primary-text" size="text-xl">
+      {description}
+    </Text>
+  </div>
+);

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

@@ -0,0 +1,49 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type VNode } from '../../model/VNode';
+import { STATUS_TYPE } from '../../retail/api/getTaskStatus';
+import { sendSignalToProcess } from '../../retail/api/sendSignalToProcess';
+import { useRetailFormStore } from '../../retail/hooks/useRetailFormStore';
+import { DboClientStatusContent } from './DboClientStatusContent';
+import { FailedStatusContent } from './FailedStatusContent';
+import { PendingStatusContent } from './PendingStatusContent';
+import { SalaryDboClientStatusContent } from './SalaryDboClientStatusContent';
+import { SuccessStatusContent } from './SuccessStatusContent';
+
+export const DebitFormStatusTracker = JSX(() => {
+  const [status, setStatus] = useState(STATUS_TYPE.process);
+  const { taskId, statusInfo, programId } = useRetailFormStore();
+
+  const isSalaryCard = programId === '38';
+  const isOffice = statusInfo?.methodObtain === 'office';
+
+  useEffect(() => {
+    (async () => {
+      const statusCd = await sendSignalToProcess({
+        signalType: 'FIND_PERSON_SIGNAL',
+        taskId,
+      });
+      isOffice &&
+        (await sendSignalToProcess({
+          signalType: 'SET_PERSON_SIGNAL',
+          taskId,
+        }));
+
+      setStatus(statusCd || STATUS_TYPE.notFound);
+    })();
+  }, [taskId]);
+
+  return renderStatus(status, isOffice, isSalaryCard);
+});
+
+const renderStatus = (status: STATUS_TYPE, isOffice: boolean, isSalaryCard: boolean) => {
+  const statusesMap: Partial<Record<STATUS_TYPE, VNode>> = {
+    IN_PROCESS: <PendingStatusContent />,
+    NOT_FOUND: <FailedStatusContent />,
+    CLIENT_NOT_OK: <FailedStatusContent />,
+    DBO_CLIENT: isSalaryCard ? <SalaryDboClientStatusContent /> : <DboClientStatusContent />,
+    PRE_DECISION: <SuccessStatusContent isOffice={isOffice} />, //
+  };
+
+  return statusesMap[status] || <SuccessStatusContent isOffice={isOffice} />;
+};

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

@@ -0,0 +1,57 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm/useForm';
+import { type SectionsRetailProps } from '../../retail/model/InputSectionsType';
+import type { LeadFormState } from '../../retail/model/LeadFormState';
+import { renderStep } from '../../retail/utils/renderStep';
+import { getRetailFormValidator } from '../../retail/validator/getRetailFormValidator';
+import { StepsNavigationButtons } from './StepsNavigationButtons';
+import { useDebitFormAPI } from './useDebitFormAPI';
+
+export interface DebitFormStepProps {
+  step: number;
+  sections: SectionsRetailProps[];
+  onNextStep: () => void;
+  onPrevStep: () => void;
+  onFinish?: () => void;
+}
+
+const PRODUCT_TYPE = 'debitCard';
+
+export const DebitFormStep = JSX<DebitFormStepProps>(
+  ({ step, sections, onPrevStep, onNextStep, onFinish }) => {
+    const inputs = useMemo(
+      () => sections?.flatMap((_: SectionsRetailProps) => _?.inputs ?? []),
+      [sections],
+    );
+
+    const formValidator = useCallback(
+      (formState: LeadFormState) =>
+        getRetailFormValidator({
+          formState,
+          inputs,
+          step,
+          productType: PRODUCT_TYPE,
+        }),
+      [inputs],
+    );
+
+    const [initialState, onSubmit, isSending] = useDebitFormAPI({
+      step,
+      onNextStep,
+      onFinish,
+    });
+
+    const [, { field, onSubmit: handleSubmit }] = useForm(initialState, {
+      formValidator,
+      onSubmit,
+    });
+
+    return (
+      <form onSubmit={handleSubmit} className="space-y-m">
+        {renderStep({ sections, field, step })}
+        <StepsNavigationButtons step={step} isSending={isSending} onPrevStep={onPrevStep} />
+      </form>
+    );
+  },
+);

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DebitFormStatus } from './DebitFormStatus';
+
+export const PendingStatusContent = JSX(() => (
+  <DebitFormStatus title="Подождите немного" description="Банк проверяет вашу заявку" />
+));

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

@@ -0,0 +1,9 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DebitFormStatus } from './DebitFormStatus';
+
+export const SalaryDboClientStatusContent = JSX(() => (
+  <DebitFormStatus
+    description="Вы уже являетесь клиентом АО «Россельхозбанк», для Вас оформление зарплатной карты возможно в первый рабочий день"
+    buttonText="На главную"
+  />
+));

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="Вернуться на главную"
+  />
+));