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

package/mobile/src/components/ApplicationLeadForm/useInitApplicationLead.ts

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { updateProfileEsia } from '../../api/RetailAPI/updateProfileEsia';
+import { locationNavigator } from '../../external/locationNavigator';
+import { useSetter } from '../../hooks/useSetter';
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
+import { safeJsonParse } from '../../utils/safeJsonParse';
+import { getInitialFormState } from './getInitialFormState';
+import { parseEsiaProfile } from './pasreEsiaProfile';
+import { useLeadFormStore } from './useLeadFormStore';
+
+export const useInitApplicationLead = (
+  inputs: FieldRetailDef[],
+  nextStepLink: string,
+): [LeadFormState, { isLoading: boolean }] => {
+  const navigator = locationNavigator();
+  const [isLoading, { setTrue: startLoading, setFalse: endLoading }] = useBool(false);
+
+  const leadFormStore = useLeadFormStore();
+  const saveForm = useSetter(leadFormStore, 'leadForm');
+
+  const initialFormState = useMemo(
+    () => getInitialFormState(inputs, leadFormStore.leadForm),
+    [inputs, leadFormStore.leadForm],
+  );
+
+  const updateEsiaProfile = useCallback(
+    async (profileId: string, code: string, state: string) => {
+      startLoading();
+      try {
+        const data = await updateProfileEsia({
+          profileId,
+          code,
+          state,
+          redirectUri: globalThis.location?.href,
+        });
+
+        if (data) {
+          saveForm((_) => ({
+            ..._,
+            ...parseEsiaProfile(data),
+          }));
+        }
+
+        navigator.assign(nextStepLink);
+      } finally {
+        endLoading();
+      }
+    },
+    [nextStepLink],
+  );
+
+  useEffect(() => {
+    const profileId: string = <string>(
+      safeJsonParse(globalThis.localStorage?.getItem('profileId') ?? '')
+    );
+    const params = new URLSearchParams(decodeURIComponent(globalThis.location?.search));
+    const code = params.get('code');
+    const state = params.get('state');
+
+    if (profileId && code && state) {
+      updateEsiaProfile(profileId, code, state);
+    } else {
+      sessionStorage.removeItem('accessToken');
+      sessionStorage.removeItem('refreshToken');
+    }
+  }, []);
+
+  return [initialFormState, { isLoading }];
+};

package/mobile/src/components/ApplicationLeadForm/useLeadFormStore.ts

@@ -0,0 +1,12 @@
+import { useLocalStore } from '@redneckz/uni-jsx/lib/Store/useLocalStore';
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+
+export interface LeadFormStoreSlice {
+  leadForm: LeadFormState;
+  taskId: number;
+  profileId: number;
+  participantId: number;
+  programId: string;
+}
+
+export const useLeadFormStore = () => useLocalStore<LeadFormStoreSlice>();

package/mobile/src/components/ApplicationLeadForm/useSaveUserData.ts

@@ -0,0 +1,27 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+import { useLeadFormStore } from './useLeadFormStore';
+
+export interface UserData {
+  participantId: number;
+  taskId: number;
+  profileId: number;
+  programId: string;
+  formData: LeadFormState;
+}
+export const useSaveUserData = () => {
+  const leadFormStore = useLeadFormStore();
+
+  const saveUserData = useCallback(
+    ({ participantId, taskId, profileId, programId: programNumber, formData }: UserData) => {
+      leadFormStore.participantId = participantId;
+      leadFormStore.taskId = taskId;
+      leadFormStore.profileId = profileId;
+      leadFormStore.programId = programNumber;
+      leadFormStore.leadForm = formData;
+    },
+    [],
+  );
+
+  return saveUserData;
+};

package/mobile/src/components/Blocks.ts

@@ -2,6 +2,7 @@ import { type BlocksRegistry } from '../model/BlocksRegistry';
 
 import { AdTile } from './AdTile/AdTile';
 import { ApplicationForm } from './ApplicationForm/ApplicationForm';
+import { ApplicationLeadForm } from './ApplicationLeadForm/ApplicationLeadForm';
 import { BankAccountFiltration } from './BankAccountFiltration/BankAccountFiltration';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
@@ -18,6 +19,8 @@ import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
+import { CreditCardForm } from './CreditCardForm/CreditCardForm';
+import { CreditForm } from './CreditForm/CreditForm';
 import { DepositFiltration } from './DepositFiltration/DepositFiltration';
 import { Depository } from './Depository/Depository';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
@@ -50,6 +53,7 @@ import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 export const Blocks: BlocksRegistry = {
   AdTile,
   ApplicationForm,
+  ApplicationLeadForm,
   BankAccountFiltration,
   BenefitsBlock,
   BonusBenefitsBlock,
@@ -66,6 +70,8 @@ export const Blocks: BlocksRegistry = {
   CarouselLinks,
   CarouselRecommendationCard,
   CarouselTariffsCard,
+  CreditCardForm,
+  CreditForm,
   DepositFiltration,
   Depository,
   ErrorBlock,

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

@@ -0,0 +1,75 @@
+import { JSX } from '@redneckz/uni-jsx';
+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 { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { type CreditCardFormContent } from './CreditCardFormContent';
+import { CreditCardFormProgress } from './CreditCardFormProgress';
+import { CreditCardFormStatusTracker } from './CreditCardFormStatusTracker';
+import { CreditCardFormStep } from './CreditCardFormStep';
+import { stepsSectionsMap } from './creditCardFormStepsData';
+
+interface CreditCardFormWizardProps extends CreditCardFormContent, UniBlockProps {}
+
+const STEPS = 6;
+
+const TITLES = [
+  'Параметры карты',
+  'Персональные данные',
+  'Данные о трудоустройстве',
+  'Семейное положение и доход',
+  'Дополнительные сведения',
+  'Выбор способа получения',
+];
+
+export const CreditCardForm = JSX<CreditCardFormWizardProps>(({ 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 [isFormFinished, { setTrue: handleFinish }] = useBool(false);
+
+  return (
+    <BlockWrapper className={className} {...rest}>
+      <div ref={formContainerRef} className="container grid grid-cols-12">
+        {isFormFinished ? null : (
+          <CreditCardFormProgress stepsTitles={TITLES} step={step} totalSteps={STEPS} />
+        )}
+        <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
+          {isFormFinished ? (
+            <CreditCardFormStatusTracker />
+          ) : (
+            <CreditCardFormStep
+              key={String(step)}
+              step={step}
+              sections={sections}
+              onNextStep={handleNextStep}
+              onPrevStep={handlePrevStep}
+              onFinish={handleFinish}
+            />
+          )}
+        </div>
+      </div>
+    </BlockWrapper>
+  );
+});

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

@@ -0,0 +1,26 @@
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import { type TitleProps } from '../../model/HeadlineType';
+import { type InputSectionsType, type SectionsRetailProps } from '../../model/InputSectionsType';
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+/** @hidden */
+export interface RenderInputsProps {
+  inputs?: FieldRetailDef[];
+  field: FormFieldRegisterer<LeadFormState>;
+}
+
+export type CreditCardSectionsProps = SectionsRetailProps & {
+  type?: 'courier' | 'office';
+};
+
+/**
+ * @title Форма заявки на потребительский кредит настраиваемая
+ */
+export type CreditCardFormContent = UniBlockContent &
+  TitleProps &
+  InputSectionsType & {
+    /** @title Номер кредитной программы */
+    programId?: string;
+  };

package/mobile/src/components/CreditCardForm/CreditCardFormProgress.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 CreditCardFormProgressProps {
+  step: number;
+  totalSteps?: number;
+  stepsTitles?: string[];
+}
+
+export const CreditCardFormProgress = JSX<CreditCardFormProgressProps>(
+  ({ step = 1, totalSteps = 6, stepsTitles = [] }) => {
+    const progress = useMemo(() => ((step + 1) / totalSteps) * 100, [step, totalSteps]);
+
+    return (
+      <div className="py-lg px-5xl bg-white col-span-12">
+        <div>
+          <span className="font-bold mr-s">
+            Шаг {step + 1} из {totalSteps}.
+          </span>
+          {stepsTitles[step] || null}
+          <ProgressBar step={progress} showPercentage={false} />
+        </div>
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,110 @@
+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 CreditCardFormStatusProps = UniBlockProps & {
+  title?: string;
+  description?: string;
+  interval?: number;
+  sectionInfoTitle?: string;
+  sectionInfo?: (LabelProps & DescriptionProps)[];
+  sectionAdditionalTitle?: string;
+  sectionInfoAdditional?: (LabelProps & DescriptionProps)[];
+  buttonText?: string;
+  onExpire?: () => void;
+};
+
+export const CreditCardFormStatus = JSX<CreditCardFormStatusProps>(
+  ({
+    title,
+    description: dsc,
+    sectionInfoTitle,
+    sectionInfo,
+    sectionAdditionalTitle,
+    sectionInfoAdditional,
+    buttonText,
+    interval,
+    onExpire = noop,
+    ...props
+  }) => (
+    <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/CreditCardForm/CreditCardFormStatusTracker.tsx

@@ -0,0 +1,61 @@
+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 { SuccessStatusCardContent } from './SuccessStatusCardContent';
+
+const SIGNAL_TYPES: SignalType[] = [
+  'CREATE_APPLICATION_SHORT_SIGNAL',
+  'CREATE_APPLICATION_LOAN_V3_SIGNAL',
+];
+
+export const CreditCardFormStatusTracker = 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, handleExpire: () => void) => {
+  const statusesMap: Record<STATUS_TYPE, VNode> = {
+    IN_PROCESS: <PendingStatusContent onExpire={handleExpire} />,
+    CANCELLED: <FailedStatusContent />,
+    FAILED: <FailedStatusContent />,
+    DRAFT: <FailedStatusContent />,
+    APPROVED: <SuccessStatusCardContent />,
+    PRE_DECISION: <SuccessStatusCardContent />,
+    REVISION: <ReworkStatusContent />,
+  };
+
+  return statusesMap[status] || <ReworkStatusContent />;
+};

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

@@ -0,0 +1,52 @@
+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 '../../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 { renderStep } from './renderStep';
+import { StepsNavigationButtons } from './StepsNavigationButtons';
+import { useCreditCardFormAPI } from './useCreditCardFormAPI';
+
+export interface CreditCardFormStepProps {
+  step: number;
+  sections: SectionsRetailProps[];
+  onNextStep: () => void;
+  onPrevStep: () => void;
+  onFinish?: () => void;
+}
+
+export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
+  ({ step, sections, onPrevStep, onNextStep, onFinish }) => {
+    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] = useCreditCardFormAPI({
+      step,
+      onNextStep,
+      onFinish,
+    });
+
+    const [, { field, onSubmit: handleSubmit }] = useForm(initialState, {
+      formValidator,
+      onSubmit,
+    });
+
+    return (
+      <form onSubmit={handleSubmit} className="space-y-m">
+        {renderStep({ sections, field, step })}
+        <StepsNavigationButtons isSending={isSending} step={step} onPrevStep={onPrevStep} />
+      </form>
+    );
+  },
+);

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

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

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

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useRetailFormStore } from '../../hooks/useRetailFormStore';
+import { CreditCardFormStatus } from './CreditCardFormStatus';
+
+export const PendingStatusContent = JSX(({ onExpire }: { onExpire: () => void }) => {
+  const { statusInfo } = useRetailFormStore();
+
+  return (
+    <CreditCardFormStatus
+      interval={300}
+      title="Заявка успешно отправлена"
+      description="Не закрывайте окно, скоро сообщим результат"
+      sectionInfoTitle="Заявленные условия по кредиту"
+      sectionInfo={[
+        {
+          label: 'Название продукта',
+          description: 'Кредитная карта',
+        },
+        {
+          label: 'Категория',
+          description: statusInfo?.cardCategory,
+        },
+      ]}
+      onExpire={onExpire}
+    />
+  );
+});

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

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

package/mobile/src/components/CreditCardForm/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, isSending, onPrevStep }) => {
+    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/CreditCardForm/SuccessStatusCardContent.tsx

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useRetailFormStore, type StatusInfoState } from '../../hooks/useRetailFormStore';
+import { formatDate } from '../../utils/formatDate';
+import { CreditCardFormStatus } from './CreditCardFormStatus';
+
+export const SuccessStatusCardContent = JSX(() => {
+  const { statusInfo } = useRetailFormStore();
+
+  return (
+    <CreditCardFormStatus
+      title="Банк одобрил вам кредит"
+      description="Обратитесь в отделение банка, чтобы завершить оформление и получит ваш кредит"
+      sectionInfo={getSectionInfo(statusInfo)}
+      buttonText="Вернуться на главную"
+    />
+  );
+});
+
+const getSectionInfo = (statusInfo: StatusInfoState | null) => {
+  const sectionInfo = [
+    {
+      label: 'Название продукта',
+      description: 'Кредитная карта',
+    },
+    {
+      label: 'Категория',
+      description: statusInfo?.cardCategory,
+    },
+  ];
+
+  if (statusInfo?.deliveryAddress && statusInfo?.deliveryDate) {
+    return sectionInfo.concat([
+      {
+        label: 'Адрес доставки',
+        description: statusInfo?.deliveryAddress,
+      },
+      {
+        label: 'Дата доставки',
+        description: formatDate(statusInfo?.deliveryDate),
+      },
+    ]);
+  }
+
+  return sectionInfo;
+};

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

@@ -0,0 +1,12 @@
+import {
+  COMMON_RETAIL_CONTENT,
+  CREDIT_CARD_CONTENT,
+  DELIVERY_CREDIT_CARD_CONTENT,
+} from '../../services/retail/content';
+import { type CreditCardSectionsProps } from './CreditCardFormContent';
+
+export const stepsSectionsMap: CreditCardSectionsProps[][] = [
+  CREDIT_CARD_CONTENT,
+  ...COMMON_RETAIL_CONTENT,
+  DELIVERY_CREDIT_CARD_CONTENT,
+];