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

package/mobile/src/components/CreditCardForm/getCreditCardFormTaskData.ts

@@ -0,0 +1,76 @@
+import { type Participant, type UpdateUserTaskBody } from '../../api/RetailAPI/updateUserTask';
+import { locationNavigator } from '../../external/locationNavigator';
+import { getAdditionalInfoData } from '../../services/retail/adaptors/getAdditionalInfoData';
+import { getCardOptionsData } from '../../services/retail/adaptors/getCardOptionsData';
+import { getEmploymentData } from '../../services/retail/adaptors/getEmploymentData';
+import { getFamilyStatusAndIncomeData } from '../../services/retail/adaptors/getFamilyStatusAndIncomeData';
+import { getPersonalInfoData } from '../../services/retail/adaptors/getPersonalInfoData';
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+import {
+  getDeliveryCreditCardData,
+  getDeliveryData,
+  getOfficeCode,
+} from './getDeliveryCreditCardData';
+
+type getCreditCardFormTaskDataProps = {
+  participantId: number;
+  taskId: number;
+  profileId: number;
+  formData: LeadFormState;
+  step?: number;
+};
+
+export const getCreditCardFormTaskData = ({
+  participantId,
+  taskId,
+  profileId,
+  formData,
+  step = 0,
+}: getCreditCardFormTaskDataProps): UpdateUserTaskBody => {
+  const navigator = locationNavigator();
+
+  return {
+    sendToBank: true,
+    taskKind: 'UNITED',
+    task: {
+      taskSource: navigator.origin,
+      id: taskId,
+      ...getOfficeCode(formData),
+      authorizedAgentId: formData?.bankEmployeeCode,
+      participants: [
+        {
+          id: participantId,
+          profile: {
+            id: profileId,
+          },
+          roleCd: {
+            key: 'BORROWER',
+            value: 'Заемщик',
+          },
+          ...getCurrentStepData(step, formData),
+        },
+      ],
+      ...getCardOptionsData(formData),
+      ...getDeliveryData(formData),
+    },
+  };
+};
+
+const getCurrentStepData = (step: number, formData: LeadFormState): Partial<Participant> => {
+  switch (step) {
+    case 0:
+      return {};
+    case 1:
+      return getPersonalInfoData(formData);
+    case 2:
+      return getEmploymentData(formData);
+    case 3:
+      return getFamilyStatusAndIncomeData(formData);
+    case 4:
+      return getAdditionalInfoData(formData);
+    case 5:
+      return getDeliveryCreditCardData(formData);
+    default:
+      return {};
+  }
+};

package/mobile/src/components/CreditCardForm/getDeliveryCreditCardData.ts

@@ -0,0 +1,43 @@
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+import { dateToISO } from '../../utils/dateToISO';
+import { getParticipantAddresses } from '../CreditForm/utils';
+
+export const getDeliveryData = (formData: LeadFormState) => {
+  const { methodObtain, deliveryDate = '' } = formData;
+
+  const isCourierDelivery = methodObtain === 'courier';
+
+  return isCourierDelivery
+    ? {
+        courierDeliveryFlg: isCourierDelivery,
+        deliveryDate: dateToISO(deliveryDate.toString().replace(/(GMT)[+-]\d{4}/, 'GMT+0000')),
+        deliveryTimeCd: { value: 'TIME_2' },
+        //TODO временный хардкод для тестирования, не забыть удалить
+        office: { id: '3' },
+      }
+    : {};
+};
+
+export const getOfficeCode = (formData: LeadFormState) => {
+  const { addressRetail, methodObtain } = formData;
+
+  const isOfficeObtain = addressRetail?.key && methodObtain === 'office';
+
+  return isOfficeObtain
+    ? {
+        office: { id: addressRetail.key },
+      }
+    : {};
+};
+
+export const getDeliveryCreditCardData = (formData: LeadFormState) => {
+  const { addressCourier, methodObtain } = formData;
+
+  const isCourierDelivery = methodObtain === 'courier';
+
+  return isCourierDelivery
+    ? {
+        participantAddresses: getParticipantAddresses({ addressCourier }),
+      }
+    : {};
+};

package/mobile/src/components/CreditCardForm/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/CreditCardForm/renderInputs.tsx

@@ -0,0 +1,18 @@
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import { InputRetailCardMap, 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>;
+}
+
+const InputsMap = { ...InputsRetailMap, ...InputRetailCardMap };
+
+export const renderInputs = ({ field, inputs, params }: RenderInputsProps) =>
+  inputs.map(
+    getField<FieldRetailDef>(field, params, InputsMap),
+  );

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

@@ -0,0 +1,32 @@
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+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 { type CreditCardSectionsProps } from './CreditCardFormContent';
+import { renderInputs } from './renderInputs';
+
+export interface StepProps {
+  sections?: CreditCardSectionsProps[];
+  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/CreditCardForm/useCreditCardFormAPI.tsx

@@ -0,0 +1,78 @@
+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 { type LeadFormState } from '../../services/retail/model/LeadFormState';
+import { getCreditCardFormTaskData } from './getCreditCardFormTaskData';
+import { getInitialFormState } from './getInitialFormState';
+
+interface CreditFormApiProps {
+  step: number;
+  onNextStep: () => void;
+  onFinish?: () => void;
+}
+
+export const useCreditCardFormAPI = ({
+  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,
+          deliveryAddress: leadForm?.addressCourier?.fullAddress,
+          cardCategory: leadForm?.cardCategory?.text,
+          deliveryDate: leadForm?.deliveryDate,
+          methodObtain: leadForm?.methodObtain,
+        };
+        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(
+            getCreditCardFormTaskData({
+              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/CreditForm/CreditForm.tsx

@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { updateRefreshToken } from '../../api/RetailAPI/updateRefreshToken';
+import { type JSONRefObject } from '../../data/JSONRefObject';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { type CreditFormContent } from './CreditFormContent';
+import { CreditFormProgress } from './CreditFormProgress';
+import { CreditFormStatusTracker } from './CreditFormStatusTracker';
+import { CreditFormStep } from './CreditFormStep';
+import { stepsSectionsMap } from './creditFormStepsData';
+import { type ProgramsSourceProps } from './ProgramsSourceProps';
+
+interface CreditFormProps extends CreditFormContent, UniBlockProps {
+  programsSource?: ProgramsSourceProps | JSONRefObject;
+}
+
+const STEPS = 5;
+
+const STEP_TITLES = [
+  '',
+  'Персональные данные',
+  'Данные о трудоустройстве',
+  'Семейное положение и доход',
+  'Дополнительные сведения',
+  'Отделение Банка',
+];
+
+export const CreditForm = UniBlock<CreditFormProps>(({ className, programsSource, ...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 : (
+          <CreditFormProgress stepsTitles={STEP_TITLES} step={step} totalSteps={STEPS} />
+        )}
+        <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
+          {isFormFinished ? (
+            <CreditFormStatusTracker />
+          ) : (
+            <CreditFormStep
+              key={String(step)}
+              step={step}
+              sections={sections}
+              programsSource={programsSource as ProgramsSourceProps}
+              onNextStep={handleNextStep}
+              onPrevStep={handlePrevStep}
+              onFinish={handleFinish}
+            />
+          )}
+        </div>
+      </div>
+    </BlockWrapper>
+  );
+});

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

@@ -0,0 +1,10 @@
+import { type JSONRefObject } from '../../data/JSONRefObject';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+/**
+ * @title Форма заявки на потребительский кредит настраиваемая
+ */
+export type CreditFormContent = UniBlockContent & {
+  /** @title Данные по кредитным программам */
+  programsSource?: JSONRefObject;
+};

package/mobile/src/components/CreditForm/CreditFormProgress.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 CreditFormProgressProps {
+  step: number;
+  totalSteps?: number;
+  stepsTitles?: string[];
+}
+
+export const CreditFormProgress = JSX<CreditFormProgressProps>(
+  ({ step = 1, totalSteps = 5, 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/CreditForm/CreditFormStatus.tsx

@@ -0,0 +1,112 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMobileMode } from '../../hooks/useMobileMode';
+import { type DescriptionProps, type LabelProps } from '../../model/HeadlineType';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { Link } from '../../ui-kit/Link/Link';
+import { Text } from '../../ui-kit/Text/Text';
+import { TimerCircle } from '../../ui-kit/TimerCircle/TimerCircle';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { noop } from '../../utils/noop';
+import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
+
+type CreditFormStatusProps = UniBlockProps & {
+  title?: string;
+  description?: string;
+  interval?: number;
+  sectionInfoTitle?: string;
+  sectionInfo?: (LabelProps & DescriptionProps)[];
+  sectionAdditionalTitle?: string;
+  sectionInfoAdditional?: (LabelProps & DescriptionProps)[];
+  buttonText?: string;
+  onExpire?: () => void;
+};
+
+export const CreditFormStatus = JSX<CreditFormStatusProps>(
+  ({
+    title,
+    description: dsc,
+    sectionInfoTitle,
+    sectionInfo,
+    sectionAdditionalTitle,
+    sectionInfoAdditional,
+    buttonText,
+    interval,
+    onExpire = noop,
+    ...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"
+          />
+          {interval ? <TimerCircle interval={interval} onEnd={onExpire} /> : null}
+        </div>
+        <SectionInfo title={sectionInfoTitle} items={sectionInfo} />
+        <SectionInfo title={sectionAdditionalTitle} items={sectionInfoAdditional} countColumns />
+        {buttonText ? (
+          <Link href="/natural" text={buttonText} version="primary" className="w-full mt-lg" />
+        ) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+const SectionInfo = ({
+  title,
+  items,
+  countColumns = false,
+}: {
+  title?: string;
+  items?: (LabelProps & DescriptionProps)[];
+  countColumns?: boolean;
+}) => {
+  const isMobile = useMobileMode();
+
+  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 grid-cols-1 gap-m',
+              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/CreditForm/CreditFormStatusTracker.tsx

@@ -0,0 +1,60 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getTaskStatus, STATUS_TYPE } from '../../api/RetailAPI/getTaskStatus';
+import { sendSignalToProcess, type SignalType } from '../../api/RetailAPI/sendSignalToProcess';
+import { useInterval } from '../../hooks/useInterval';
+import { useRetailFormStore } from '../../hooks/useRetailFormStore';
+import { type VNode } from '../../model/VNode';
+import { FailedStatusContent } from './FailedStatusContent';
+import { PendingStatusContent } from './PendingStatusContent';
+import { ReworkStatusContent } from './ReworkStatusContent';
+import { SuccessStatusContent } from './SuccessStatusContent';
+const SIGNAL_TYPES: SignalType[] = [
+  'CREATE_APPLICATION_SHORT_SIGNAL',
+  'CREATE_APPLICATION_LOAN_V3_SIGNAL',
+];
+
+export const CreditFormStatusTracker = JSX(() => {
+  const [status, setStatus] = useState(STATUS_TYPE.process);
+  const { taskId } = useRetailFormStore();
+
+  useEffect(() => {
+    (async () => {
+      for (const signalType of SIGNAL_TYPES) {
+        await sendSignalToProcess({ signalType, taskId });
+      }
+    })();
+  }, [taskId]);
+
+  const trackStatus = useCallback(
+    async (stop: () => void) => {
+      const res = await getTaskStatus({ taskId });
+
+      if (res && res?.statusCd !== STATUS_TYPE.process) {
+        stop();
+        setStatus(res.statusCd);
+      }
+    },
+    [taskId],
+  );
+
+  useInterval(trackStatus, 30_000);
+
+  const handleExpire = useCallback(() => setStatus(STATUS_TYPE.rework), []);
+
+  return renderStatus(status, handleExpire);
+});
+
+const renderStatus = (status: STATUS_TYPE, onExpire: () => void) => {
+  const statusesMap: Record<STATUS_TYPE, VNode> = {
+    IN_PROCESS: <PendingStatusContent onExpire={onExpire} />,
+    CANCELLED: <FailedStatusContent />,
+    FAILED: <FailedStatusContent />,
+    DRAFT: <FailedStatusContent />,
+    APPROVED: <SuccessStatusContent />,
+    PRE_DECISION: <SuccessStatusContent />,
+    REVISION: <ReworkStatusContent />,
+  };
+
+  return statusesMap[status] || <ReworkStatusContent />;
+};

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}
+    />
+  );
+});