@redneckz/wildless-cms-uni-blocks 0.14.651 → 0.14.653

package/mobile/src/ui-kit/FormField/getField.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable max-lines */
 /* eslint-disable max-lines-per-function */
+//TODO: Убрать обращение к компонентам т.к. ApplicationForm
 import { type FieldDef } from '../../components/ApplicationForm/ApplicationFormContent';
 import { getRegionUrl } from '../../components/ApplicationForm/getRegionUrl';
 import { type FormFieldRegisterer } from '../../hooks/useForm';
@@ -29,6 +30,7 @@ import { ConscriptionField } from './Fields/ConscriptionField';
 import { ConsentField } from './Fields/ConsentField';
 import { CreditInRshbCdField } from './Fields/CreditInRshbCdField';
 import { CurrencyField } from './Fields/CurrencyField';
+import { DeliveryDateFiels } from './Fields/DeliveryDateFiels';
 import { DependentsField } from './Fields/DependentsField';
 import { DesiredMeetingDateField } from './Fields/DesiredMeetingDateField';
 import { DisablePeopleFlgField } from './Fields/DisablePeopleFlgField';
@@ -58,6 +60,7 @@ import { LegalEntityNameField } from './Fields/LegalEntityNameField';
 import { LegalFormField } from './Fields/LegalFormField';
 import { LocalitiesField } from './Fields/LocalitiesField';
 import { MandatoryIncomeField } from './Fields/MandatoryIncome';
+import { MethodObtainField } from './Fields/MethodObtainField';
 import { MiddleNameField } from './Fields/MiddleNameField';
 import { NameField } from './Fields/NameField';
 import { OnlineCheckoutField } from './Fields/OnlineCheckoutField';
@@ -177,6 +180,7 @@ export const getField =
       dulSubdivisionCode: <DulSubdivisionCodeField field={field} input={input} />,
       dulIssuedBy: <DulIssuedByField field={field} input={input} />,
       addressRegistration: <AddressField field={field} input={input} />,
+      addressCourier: <AddressField field={field} input={input} />,
       participantDateRegistration: <ParticipantDateRegistrationField field={field} input={input} />,
       retirementIncome: <RetirementIncomeField field={field} input={input} />,
       otherIncome: <OtherIncomeField field={field} input={input} />,
@@ -197,6 +201,8 @@ export const getField =
       cardCategory: <CardCategoryField field={field} input={input} />,
       codeWord: <CodeWordField field={field} input={input} />,
       confirmationIncome: <ConfirmationIncomeField field={field} input={input} />,
+      methodObtain: <MethodObtainField field={field} input={input} />,
+      deliveryDate: <DeliveryDateFiels field={field} input={input} />,
     };
 
     return isRenderField({ input, field }) ? (

package/mobile/src/ui-kit/FormField/getObjectValidator.tsx

@@ -84,6 +84,8 @@ export const validatorObj: Record<string, Validator> = {
   sex: defaultValidator('Укажите свой пол'),
   addressRegistration: addressDaDataValidator(),
   organizationAddress: addressDaDataValidator(),
+  deliveryDate: defaultValidator('Укажите дату доставки'),
+  addressCourier: addressDaDataValidator(),
   participantDateRegistration: defaultValidator('Укажите дату регистрации'),
   retirementIncome: defaultValidator(),
   otherIncome: defaultValidator(),
@@ -98,7 +100,10 @@ export const validatorObj: Record<string, Validator> = {
   regionRetail: defaultSelectValidator('Выберите филиал банка'),
   addressRetail: defaultSelectValidator('Выберите адрес банка'),
   addressMatch: defaultValidator(),
-  codeWord: codeWordValidator('Необходимо ввести кодовое слово'),
+  codeWord: codeWordValidator('Необходимо ввести кодовое слово латиницей'),
+  currency: defaultValidator(),
+  paymentSystem: defaultValidator(),
+  cardCategory: defaultSelectValidator(),
   confirmationIncome: defaultValidator(),
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.651",
+  "version": "0.14.653",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -210,7 +210,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "87 kB",
+      "limit": "89 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/api/RetailAPI/doRequest.ts

@@ -15,6 +15,7 @@ export async function doRequest<R>(
     body: body ? JSON.stringify(body) : null,
   });
 
+  // TODO: add error handling
   return isJSON(response) ? response.json() : response;
 }
 

package/src/api/RetailAPI/getTaskStatus.ts

@@ -12,5 +12,5 @@ interface GetTaskStatusResponse {
   taskId: number;
 }
 
-export const getTaskStatus = (body: { taskId: number }) =>
+export const getTaskStatus = (body: { taskId: number | null }) =>
   doRequest<GetTaskStatusResponse>('/user-data/getTaskStatus', 'POST', body);

package/src/api/RetailAPI/updateRefreshToken.ts

@@ -0,0 +1,42 @@
+import { doRequest } from './doRequest';
+
+interface UpdateRefreshTokenBody {
+  refresh_token: string;
+  access_token: string;
+}
+
+const PORTAL_NATURAL_URL = '/';
+
+const UPDATING_INTERVAL = 60000 * 4;
+
+export const updateRefreshToken = () => {
+  const refreshToken = globalThis.sessionStorage?.getItem('refreshToken');
+  const accessToken = globalThis.sessionStorage?.getItem('accessToken');
+  const taskId = globalThis.localStorage.getItem('taskId');
+
+  if (!accessToken || !refreshToken || !taskId) {
+    globalThis.location.href = PORTAL_NATURAL_URL;
+
+    return () => null;
+  }
+
+  const timer = setInterval(async () => {
+    const res = await doRequest<UpdateRefreshTokenBody | Response>('/auth/refresh', 'POST', {
+      // eslint-disable-next-line camelcase
+      refresh_token: refreshToken,
+      // eslint-disable-next-line camelcase
+      access_token: accessToken,
+    });
+
+    if (res instanceof Response) {
+      globalThis.location.href = PORTAL_NATURAL_URL;
+
+      return;
+    }
+
+    sessionStorage.setItem('refreshToken', res.refresh_token);
+    sessionStorage.setItem('accessToken', res.access_token);
+  }, UPDATING_INTERVAL);
+
+  return () => clearInterval(timer);
+};

package/src/api/RetailAPI/updateUserTask.ts

@@ -96,6 +96,10 @@ export type Participant = {
     key: string;
     value: string;
   };
+  currencyCode?: string;
+  paymentSystemTypeCd?: string;
+  classCard?: Option;
+  codeWord?: string;
 };
 
 export type UpdateUserTaskBody = {

package/src/api/dadataHints/hintsListsOptions.ts

@@ -64,6 +64,7 @@ export const hintsListsOptions: HintsListOptions = {
   addressRegistration: ADDRESS_HINTS_LIST_OPTIONS,
   addressFact: ADDRESS_HINTS_LIST_OPTIONS,
   organizationAddress: ADDRESS_HINTS_LIST_OPTIONS,
+  addressCourier: ADDRESS_HINTS_LIST_OPTIONS,
 };
 
 export type HintOption = {

package/src/components/ApplicationLeadForm/ApplicationLeadFormContent.ts

@@ -104,17 +104,6 @@ export type TypeFormFieldDef =
  */
 export type FormColumnsCount = 1 | 2;
 
-/** @hidden */
-export type EndpointType = 'lead' | 'sendcorporatelead';
-
-/**
- * @title Секция полей ввода
- */
-export type SectionsProps = TitleProps & {
-  columns?: FormColumnsCount;
-  inputs?: FieldDef[];
-};
-
 /**
  * @title Форма заявки настраиваемая
  */

package/src/components/ApplicationLeadForm/getInitialFormState.tsx

@@ -125,6 +125,10 @@ export interface FormState extends FormConsents {
   partInBusiness?: number;
   addressMatch?: boolean;
   confirmationIncome?: Option;
+  currency?: string;
+  paymentSystem?: string;
+  cardCategory?: { key: ''; text: '' };
+  codeWord?: string;
   esiaAccountTypeCd?: Option;
 }
 
@@ -160,6 +164,10 @@ const initialFormState = {
   consentInformFlg: false,
   addressRegistration: '',
   participantDateRegistration: undefined,
+  currency: '',
+  paymentSystem: '',
+  cardCategory: { key: '', text: '' },
+  codeWord: '',
 };
 
 export const getInitialFormState = (

package/src/components/Blocks.mobile.ts

@@ -19,6 +19,7 @@ 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';
@@ -69,6 +70,7 @@ export const Blocks: BlocksRegistry = {
   CarouselLinks,
   CarouselRecommendationCard,
   CarouselTariffsCard,
+  CreditCardForm,
   CreditForm,
   DepositFiltration,
   Depository,

package/src/components/Blocks.ts

@@ -21,6 +21,7 @@ import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ContactsBlock } from './ContactsBlock/ContactsBlock';
+import { CreditCardForm } from './CreditCardForm/CreditCardForm';
 import { CreditForm } from './CreditForm/CreditForm';
 import { DepositFiltration } from './DepositFiltration/DepositFiltration';
 import { Depository } from './Depository/Depository';
@@ -77,6 +78,7 @@ export const Blocks: BlocksRegistry = {
   CarouselRecommendationCard,
   CarouselTariffsCard,
   ContactsBlock,
+  CreditCardForm,
   CreditForm,
   DepositFiltration,
   Depository,

package/src/components/CreditCardForm/CreditCardForm.fixture.tsx

@@ -0,0 +1,14 @@
+import '../../setup-fixture';
+import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+import { CreditCardForm } from './CreditCardForm';
+
+export default {
+  default: (
+    <div>
+      <CreditCardForm className="col-span-12" />
+      <PopupManager />
+      <DialogManager />
+    </div>
+  ),
+};

package/src/components/CreditCardForm/CreditCardForm.tsx

@@ -0,0 +1,69 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type SectionsProps } from '../../model/InputSectionsType';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import { type CreditCardFormContent } from './CreditCardFormContent';
+import { CreditCardFormProgress } from './CreditCardFormProgress';
+import { CreditCardFormStep } from './CreditCardFormStep';
+import { stepsSectionsMap } from './creditCardFormStepsData';
+
+interface CreditCardFormWizardProps extends CreditCardFormContent, UniBlockProps {}
+
+const WIZARD_STEPS = 6;
+
+const WIZARD_TITLES = [
+  'Параметры карты',
+  'Персональные данные',
+  'Данные о трудоустройстве',
+  'Данные о доходах и расходах',
+  'Дополнительные сведения',
+  'Выбор способа получения',
+];
+
+export const CreditCardForm = JSX<CreditCardFormWizardProps>(({ className, ...rest }) => {
+  const [step, setStep] = useState(0);
+
+  const handleNextStep = useCallback(() => {
+    setStep((_) => Math.min(_ + 1, WIZARD_STEPS));
+  }, []);
+
+  const handlePrevStep = useCallback(() => {
+    //TODO search hook - 1,
+    setStep((_) => Math.max(_ - 1, 0));
+  }, []);
+
+  const sections = useMemo(() => stepsSectionsMap[step], [step]);
+
+  const inputs = (sections?.flatMap((_: SectionsProps) => _?.inputs) || []) as FieldDef[];
+
+  const [isFormFinished, setIsFormFinished] = useState(false);
+
+  return (
+    <BlockWrapper className={style('bg-transparent', className)} defaultPadding="p-0" {...rest}>
+      <div className="container grid grid-cols-12">
+        {isFormFinished ? null : (
+          <CreditCardFormProgress
+            stepsTitles={WIZARD_TITLES}
+            step={step}
+            totalSteps={WIZARD_STEPS}
+          />
+        )}
+        <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
+          <CreditCardFormStep
+            key={String(step)}
+            step={step}
+            inputs={inputs}
+            sections={sections}
+            onNextStep={handleNextStep}
+            onPrevStep={handlePrevStep}
+            isFormFinished={isFormFinished}
+            finishForm={setIsFormFinished}
+          />
+        </div>
+      </div>
+    </BlockWrapper>
+  );
+});

package/src/components/CreditCardForm/CreditCardFormContent.ts

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

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

@@ -0,0 +1,119 @@
+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 { InfoCard, type InfoCardProps } from '../../ui-kit/InfoCard/InfoCard';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Text } from '../../ui-kit/Text/Text';
+import { TimerCircle } from '../../ui-kit/TimerCircle/TimerCircle';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+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;
+  infoCard?: InfoCardProps;
+};
+
+export const CreditCardFormStatus = JSX<CreditCardFormStatusProps>(
+  ({
+    title,
+    description: dsc,
+    infoCard,
+    sectionInfoTitle,
+    sectionInfo,
+    sectionAdditionalTitle,
+    sectionInfoAdditional,
+    buttonText,
+    interval,
+    ...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} /> : null}
+      </div>
+      <SectionInfo title={sectionInfoTitle} items={sectionInfo} />
+      <SectionInfo title={sectionAdditionalTitle} items={sectionInfoAdditional} countColumns />
+      {infoCard?.__html ? (
+        <InfoCard
+          __html={infoCard?.__html}
+          icon={infoCard?.icon}
+          link={{
+            text: infoCard?.link?.text,
+          }}
+        />
+      ) : null}
+      {buttonText ? (
+        <LinkButton 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/src/components/CreditCardForm/CreditCardFormStatusTracker.tsx

@@ -0,0 +1,48 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { 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 { useLocalStorage } from '../../hooks/useLocalStorage';
+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 CreditCardFormStatusTracker = JSX(() => {
+  const [status, setStatus] = useState(STATUS_TYPE.process);
+  const [taskId] = useLocalStorage<number>('taskId');
+
+  useEffect(() => {
+    for (const signalType of SIGNAL_TYPES) {
+      sendSignalToProcess({ signalType, taskId });
+    }
+
+    const trackStatus = () =>
+      getTaskStatus({ taskId }).then((res) => {
+        if (res.statusCd && res.statusCd !== STATUS_TYPE.process) {
+          clearInterval(pullingInterval);
+          setStatus(res.statusCd);
+        }
+      });
+
+    const pullingInterval = setInterval(trackStatus, 30000);
+  }, []);
+
+  return renderStatus(status);
+});
+
+const renderStatus = (status: STATUS_TYPE) => {
+  const statusesMap: Record<STATUS_TYPE, JSX.Element> = {
+    IN_PROCESS: <PendingStatusContent />,
+    FAILED: <FailedStatusContent />,
+    OK: <SuccessStatusContent />,
+    REWORK: <ReworkStatusContent />,
+  };
+
+  return statusesMap[status] || null;
+};

package/src/components/CreditCardForm/CreditCardFormStep.tsx

@@ -0,0 +1,66 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { type SectionsProps } from '../ApplicationForm/ApplicationFormContent';
+import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import { CreditCardFormStatusTracker } from './CreditCardFormStatusTracker';
+import { type FormStateMap } from './formStateMap';
+import { getInitialFormState } from './getInitialFormState';
+import { renderStep, type CustomSubmit } from './renderStep';
+import { StepsNavigationButtons } from './StepsNavigationButtons';
+import { useCreditCardFormAPI } from './useCreditCardFormAPI';
+
+export interface CreditCardFormStepProps {
+  step: number;
+  sections: SectionsProps[];
+  inputs: FieldDef[];
+  onNextStep: () => void;
+  onPrevStep: () => void;
+  isFormFinished: boolean;
+  finishForm?: (bool: boolean) => void;
+}
+
+export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
+  ({ step, sections, onPrevStep, onNextStep, inputs, isFormFinished, finishForm }) => {
+    const [localStorageData, saveStep] = useLocalStorage<Record<string, any>>('leadForm');
+    const initialState = getInitialFormState(step as keyof FormStateMap, localStorageData);
+
+    const customSubmit = useRef<CustomSubmit | undefined>(undefined);
+
+    const registerSubmit = useCallback((submit?: CustomSubmit) => {
+      customSubmit.current = submit;
+    }, []);
+
+    const { handleSubmit } = useCreditCardFormAPI({
+      step,
+      inputs,
+      onNextStep,
+      saveStep,
+      finishForm,
+    });
+
+    const [state, { field, onSubmit }] = useForm(initialState, {
+      onSubmit: (formData, ev) => {
+        handleSubmit({ ...formData, ...customSubmit.current?.(ev) });
+      },
+    });
+
+    const methodObtain = 'methodObtain' in state ? state.methodObtain : undefined;
+
+    return isFormFinished ? (
+      <CreditCardFormStatusTracker />
+    ) : (
+      <form onSubmit={onSubmit} className="space-y-m">
+        {renderStep({
+          sections,
+          field,
+          registerSubmit,
+          methodObtain,
+          isLastStep: step === 5,
+        })}
+        <StepsNavigationButtons step={step} onPrevStep={onPrevStep} />
+      </form>
+    );
+  },
+);

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

@@ -0,0 +1,38 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { CreditCardFormStatus } from './CreditCardFormStatus';
+
+export const PendingStatusContent = JSX(() => {
+  const [leadForm] = useLocalStorage<Record<string, any>>('leadForm');
+
+  return (
+    <CreditCardFormStatus
+      interval={300}
+      title="Заявка успешно отправлена"
+      description="Не закрывайте окно, скоро сообщим результат"
+      sectionInfoTitle="Заявленные условия по кредиту"
+      sectionInfo={[
+        {
+          label: 'Название продукта',
+          description: 'Кредит на любые цели',
+        },
+        {
+          label: 'Цель кредита',
+          description: 'На любые цели',
+        },
+        {
+          label: 'Сумма',
+          description: leadForm?.moneyValue?.toLocaleString() + ' ₽',
+        },
+        {
+          label: 'Срок кредита',
+          description: leadForm?.monthsValue + ' мес',
+        },
+        {
+          label: 'Тип платежа',
+          description: leadForm?.isAnnuity ? 'Аннуитетный' : 'Дифференцированный',
+        },
+      ]}
+    />
+  );
+});