@redneckz/wildless-cms-uni-blocks 0.14.1077 → 0.14.1078

package/mobile/src/retail/components/DraftDialog/DraftActionButton.tsx

@@ -1,9 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type IconName } from '../../../icons/IconName';
+import { type AspectsDef } from '../../../model/AspectsProps';
 import { type DescriptionProps, type TitleProps } from '../../../model/HeadlineType';
 import type { OnClickProps } from '../../../model/OnClickProps';
 import { Img } from '../../../ui-kit/Img/Img';
 import { Text } from '../../../ui-kit/Text/Text';
+import { getAspectsAttributes } from '../../../utils/dataAttributes';
 import { noop } from '../../../utils/noop';
 
 export type DraftActionButtonProps = TitleProps &
@@ -11,15 +13,18 @@ export type DraftActionButtonProps = TitleProps &
   OnClickProps & {
     icon: IconName;
     name?: string;
+    data?: AspectsDef[];
   };
 
 export const DraftActionButton = JSX<DraftActionButtonProps>(
-  ({ title, icon, description, name, onClick = noop }) => (
+  ({ title, icon, description, name, onClick = noop, data }) => (
     <button
       className="flex gap-lg items-center border border-gray/30 rounded-xl cursor-pointer p-4 hover:border-green"
       type="button"
       onClick={onClick}
       data-test-id={name}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...getAspectsAttributes(data)}
     >
       <Img image={{ icon, iconVersion: 'normal' }} width="78" height="78" />
       <div className="flex flex-col items-start gap-xs md:w-72 md:mr-lg">

package/mobile/src/retail/components/DraftDialog/DraftDialog.tsx

@@ -9,6 +9,7 @@ import { sendMessage } from '../../api/sendMessage';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
 import { type DraftTaskType } from '../../model/DraftTaskType';
 import { checkNewMicroservice } from '../../utils/checkNewMicroservice';
+import { getAspects } from '../../utils/commonAspects';
 import { creditProgramCodeToProductIdMap, getCreditProgramTaskType } from './creditProgramCodes';
 import { DraftDialogContent } from './DraftDialogContent';
 import { parseDraftTask } from './parseDraftTask';
@@ -40,6 +41,7 @@ export const DraftDialog = JSX<DraftDialogProps>(function ({
   );
   const currentParticipant = participant || participants?.[0];
   const { id: participantId, profile } = currentParticipant || {};
+
   const handleGoToDraft = useCallback(() => {
     const taskFromDraft = parseDraftTask(task);
     retailFormStore.participantId = participantId ?? null;
@@ -67,6 +69,17 @@ export const DraftDialog = JSX<DraftDialogProps>(function ({
     navigator.assign(productData.newTaskLink);
   }, [task.id, productData.newTaskLink, isNewMicroservice]);
 
+  let productType: string;
+  if (isDebit) {
+    productType = 'debitCard';
+  } else if (taskType === 'card') {
+    productType = 'creditCard';
+  } else {
+    productType = 'credit';
+  }
+  const draftAspects = getAspects('draft', productType);
+  const currentAspects = getAspects('current', productType);
+
   return (
     <Dialog onClose={onClose}>
       <DraftDialogContent
@@ -76,6 +89,8 @@ export const DraftDialog = JSX<DraftDialogProps>(function ({
         handleGoToDraft={handleGoToDraft}
         handleGoToNewTask={handleGoToNewTask}
         onClose={onClose}
+        draftAspects={draftAspects}
+        currentAspects={currentAspects}
       />
     </Dialog>
   );

package/mobile/src/retail/components/DraftDialog/DraftDialogContent.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type AspectsDef } from '../../../model/AspectsProps';
 import { type OnCloseProps } from '../../../model/OnCloseProps';
 import { Heading } from '../../../ui-kit/Heading/Heading';
 import { formatDate } from '../../../utils/formatDate';
@@ -11,6 +12,8 @@ export interface DraftDialogContentProps extends OnCloseProps {
   isFromLead: boolean;
   handleGoToDraft: () => void;
   handleGoToNewTask: () => void;
+  draftAspects?: AspectsDef[];
+  currentAspects?: AspectsDef[];
 }
 
 export const DraftDialogContent = JSX<DraftDialogContentProps>(function ({
@@ -20,6 +23,8 @@ export const DraftDialogContent = JSX<DraftDialogContentProps>(function ({
   handleGoToDraft,
   handleGoToNewTask,
   onClose,
+  draftAspects,
+  currentAspects,
 }) {
   return (
     <div className="flex flex-col gap-lg items-center mt-xs mx-6xl">
@@ -35,6 +40,7 @@ export const DraftDialogContent = JSX<DraftDialogContentProps>(function ({
           description={createdDate ? `Черновик от ${formatDate(new Date(createdDate))}` : ''}
           onClick={handleGoToDraft}
           name="go-to-draft-button"
+          data={draftAspects}
         />
         <DraftActionButton
           title={isFromLead ? 'Продолжить заполнение текущей заявки' : 'Создать новую заявку'}
@@ -42,6 +48,7 @@ export const DraftDialogContent = JSX<DraftDialogContentProps>(function ({
           description={productData.description}
           onClick={isFromLead ? onClose : handleGoToNewTask}
           name="go-to-current-task-button"
+          data={isFromLead ? currentAspects : undefined}
         />
       </div>
     </div>

package/mobile/src/retail/model/ApplicationLeadFormTypes.ts

@@ -1,7 +1,10 @@
+import { type Aspects } from '../../hooks/useAspects/useAspects';
 import { type DialogOptions } from '../../ui-kit/DialogManager/DialogAction';
 import { type VerifyPhoneDialogProps } from '../../ui-kit/VerifyPhoneDialogLayout/VerfiyPhoneDialogLayout';
 import { type Nullable } from '../../utils/Nullable';
 import { type MarketingInfo } from '../api/updateUserTask';
+import { type useConsentBkiDialog } from '../components/ConsentBkiDialog/useConsentBkiDialog';
+import { type useDraftDialog } from '../components/DraftDialog/useDraftDialog';
 import { type LeadFormState } from './LeadFormState';
 import { type ReferalData } from './ReferalData';
 
@@ -17,6 +20,7 @@ export interface UserData {
 export type ProductType = 'credit' | 'creditCard' | 'debitCard';
 
 export interface CommonLeadProps {
+  aspects: Aspects;
   programId: string;
   userId?: string | number;
   productType: ProductType;
@@ -54,3 +58,11 @@ export interface UpdateUserDataNewMicroserviceProps extends BaseUpdateUserDataPr
   participantId: string | number;
   userId?: string | number;
 }
+
+export interface OldMicroserviceProps {
+  common: Omit<CommonLeadProps, 'userId'> & { profileId: number };
+  taskData: TaskDataProps;
+  goToNextStep: () => void;
+  consentBkiDialog: ReturnType<typeof useConsentBkiDialog>;
+  draftDialog: ReturnType<typeof useDraftDialog>;
+}

package/mobile/src/retail/utils/commonAspects.ts

@@ -0,0 +1,64 @@
+import { type AspectsDef } from '../../model/AspectsProps';
+import { YANDEX_ID } from './yandexMetrika';
+
+const ASPECTS_MAP: Record<string, Record<string, string>> = {
+  leadForm: {
+    debitCard: 'debit_lead_form',
+    creditCard: 'card_lead_form',
+    default: 'lead_form',
+  },
+  draft: {
+    debitCard: 'debit_draft_app',
+    creditCard: 'card_draft_app',
+    default: 'draft_app',
+  },
+  smsAuth: {
+    debitCard: 'debit_sms_auth',
+    creditCard: 'card_sms_auth',
+    default: 'sms_auth',
+  },
+  consentBki: {
+    creditCard: 'card_consent_bki',
+    default: 'consent_bki',
+  },
+  smsBki: {
+    creditCard: 'card_sms_bki',
+    default: 'sms_bki',
+  },
+  current: {
+    debitCard: 'debit_current_app',
+    creditCard: 'card_current_app',
+    default: 'current_app',
+  },
+  timer: {
+    creditCard: 'card_timer',
+    default: 'timer',
+  },
+  timerEnd: {
+    creditCard: 'card_timer_end',
+    default: 'timer_end',
+  },
+  preDecision: {
+    creditCard: 'card_pre_decision',
+    default: 'pre_decision',
+  },
+  revision: {
+    creditCard: 'card_revision',
+    default: 'revision',
+  },
+  refuse: {
+    creditCard: 'card_refuse',
+    default: 'refuse',
+  },
+};
+
+export const getAspects = (aspectType: string, productType?: string): AspectsDef[] => {
+  const aspectForType = ASPECTS_MAP[aspectType];
+
+  return [
+    {
+      aspectName: 'ymReachGoal',
+      params: { yandexId: YANDEX_ID, targetName: aspectForType[productType || 'default'] },
+    },
+  ];
+};

package/mobile/src/retail/utils/formAspectsConfig.ts

@@ -0,0 +1,6 @@
+export interface StepAspectsConfig {
+  ymTargetName: string;
+  snowplowEventAction?: string;
+  snowplowEventCategory?: string;
+  snowplowEventValueText?: string;
+}

package/mobile/src/retail/utils/yandexMetrika.ts

@@ -0,0 +1,3 @@
+import { projectSettings } from '../../ProjectSettings';
+
+export const YANDEX_ID = projectSettings.YANDEX_METRIKA_ID || '92511315';

package/mobile/src/utils/getStepAspects.ts

@@ -0,0 +1,71 @@
+import { getCreditInfo } from '../components/CreditForm/getCreditInfo';
+import { type AspectsDef } from '../model/AspectsProps';
+import { type StepAspectsConfig } from '../retail/utils/formAspectsConfig';
+import { YANDEX_ID } from '../retail/utils/yandexMetrika';
+
+interface YandexAspectsParams {
+  step: number;
+  programId?: string | null;
+  productType?: string;
+  paymentSystem?: string;
+  stepsConfig: StepAspectsConfig[];
+}
+
+const getVisitParams = (
+  programId?: string | null,
+  productType?: string,
+  paymentSystem?: string,
+): Record<string, unknown> => {
+  const creditInfo = getCreditInfo(programId ?? null);
+  const productName = creditInfo?.name || '';
+  const productTypeValue = productType ?? '';
+
+  if (paymentSystem && productType !== 'credit') {
+    return {
+      [productTypeValue]: {
+        [productName]: paymentSystem,
+      },
+    };
+  } else {
+    return {
+      [productTypeValue]: productName,
+    };
+  }
+};
+
+export const getStepAspects = ({
+  step,
+  programId,
+  productType,
+  paymentSystem,
+  stepsConfig,
+}: YandexAspectsParams): AspectsDef[] => {
+  const config = stepsConfig[step];
+  if (!config) {
+    return [];
+  }
+  const visitParams = getVisitParams(programId, productType, paymentSystem);
+  const aspects: AspectsDef[] = [];
+
+  aspects.push({
+    aspectName: 'ymReachGoal',
+    params: {
+      yandexId: YANDEX_ID,
+      targetName: config.ymTargetName,
+      ...visitParams,
+    },
+  });
+
+  if (config.snowplowEventAction) {
+    aspects.push({
+      aspectName: 'snowplowEvent',
+      params: {
+        eventAction: config.snowplowEventAction,
+        eventCategory: config.snowplowEventCategory || 'naturalCredits',
+        eventValueText: config.snowplowEventValueText || '',
+      },
+    });
+  }
+
+  return aspects;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.1077",
+  "version": "0.14.1078",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -205,7 +205,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "120 kB",
+      "limit": "130 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -137,7 +137,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
               {renderInputs({ field, inputs: _?.inputs }, productType)}
             </div>
           ))}
-          {renderSubmitButton(button, isSending)}
+          {renderSubmitButton(button, { isSending, productType })}
           {esiaStatus === EsiaStatuses.Error ? (
             <Text size="text-m" font="font-medium" color="text-error">
               Использовать Госуслуги для оформления заявки невозможно, необходимо заполнить поля

package/src/components/ApplicationLeadForm/renderSubmitButton.tsx

@@ -1,8 +1,23 @@
+import { getAspects } from '../../retail/utils/commonAspects';
 import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
 import { type SubmitButtonProps } from './ApplicationLeadFormContent';
 
-export const renderSubmitButton = (button?: SubmitButtonProps, isSending = false) => (
-  <SubmitButton className="w-full @xl:w-auto" isLoading={isSending} testId="LeadSubmitButton">
-    {button?.text ? button.text : 'Отправить заявку'}
-  </SubmitButton>
-);
+export const renderSubmitButton = (
+  button?: SubmitButtonProps,
+  options?: { isSending?: boolean; productType?: string },
+) => {
+  const isSending = options?.isSending;
+  const productType = options?.productType;
+  const defaultAspects = getAspects('leadForm', productType);
+
+  return (
+    <SubmitButton
+      className="w-full @xl:w-auto"
+      isLoading={isSending ?? false}
+      testId="LeadSubmitButton"
+      data={defaultAspects}
+    >
+      {button?.text ? button.text : 'Отправить заявку'}
+    </SubmitButton>
+  );
+};

package/src/components/ApplicationLeadForm/useApplicationLeadApi.tsx

@@ -3,6 +3,8 @@ import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useSessionStore } from '@redneckz/uni-jsx/lib/Store/useSessionStore';
 import { locationNavigator } from '../../external/locationNavigator';
+import { handleAspects } from '../../hooks/useAspects/handleAspects';
+import { useAspects } from '../../hooks/useAspects/useAspects';
 import { type AspectsProps } from '../../model/AspectsProps';
 import { createDraftTask } from '../../retail/api/createDraftTask';
 import { createParticipant } from '../../retail/api/createParticipant';
@@ -19,15 +21,18 @@ import { useDraftDialog } from '../../retail/components/DraftDialog/useDraftDial
 import { VerifyPhoneDialog } from '../../retail/components/VerifyPhoneDialog/VerifyPhoneDialog';
 import {
   type CommonLeadProps,
+  type OldMicroserviceProps,
   type ProductType,
   type TaskDataProps,
   type UpdateUserDataNewMicroserviceProps,
   type UpdateUserDataProps,
 } from '../../retail/model/ApplicationLeadFormTypes';
 import { type FormRetailConsents, type LeadFormState } from '../../retail/model/LeadFormState';
+import { getAspects } from '../../retail/utils/commonAspects';
 import { getUpdateUserProfileData } from '../../retail/utils/getUpdateUserProfile';
 import { productTypeToTaskType } from '../../retail/utils/productTypeToTaskType';
 import { useDialog } from '../../ui-kit/DialogManager/useDialog';
+import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { formatPhone } from '../../utils/formatPhone';
 import { productTypeToConsentsMap } from './consents';
 import { getCreditLeadFormTaskData, getDebitLeadFormTaskData } from './getLeadFormTaskData';
@@ -59,13 +64,14 @@ export const useApplicationLeadApi = ({
   const leadFormStore = useLeadFormStore();
 
   const sendAspects = useSendLeadFormAspects({ data });
+  const aspects = useAspects();
   const navigator = locationNavigator();
 
   const goToNextStep = useCallback(() => {
     navigator.assign(nextStepLink);
   }, []);
 
-  const consentBkiDialog = useConsentBkiDialog(goToNextStep);
+  const consentBkiDialog = useConsentBkiDialog(goToNextStep, productType);
   const verifyPhoneDialog = useDialog(VerifyPhoneDialog);
   const draftDialog = useDraftDialog();
 
@@ -89,50 +95,33 @@ export const useApplicationLeadApi = ({
         throw new Error();
       }
 
-      const sendCurrentTask = async () => {
-        await updateUserData({
+      const oldMicroserviceProps: OldMicroserviceProps = {
+        common: {
+          aspects,
           programId,
+          productType,
+          sendAspects,
+          verifyPhoneDialog,
+          handleFailSendForm,
           profileId,
+        },
+        taskData: {
           formData: transformedFormData,
-          productType,
           referalData,
           marketingInfo,
           saveUserData,
-          sendAspects,
-        });
-        verifyPhoneDialog.close();
-        if (productType === 'debitCard') {
-          goToNextStep();
-        } else {
-          consentBkiDialog.open({
-            phone: transformedFormData.phone,
-            profileId,
-            onFail: handleFailSendForm,
-          });
-        }
-      };
-      const handleSuccessVerify = async () => {
-        try {
-          const lastTaskId = await getLastTaskStatus({ profileId, programId });
-
-          if (lastTaskId) {
-            const task = await getTaskById({ taskId: lastTaskId });
-            verifyPhoneDialog.close();
-            draftDialog.open({
-              task,
-              isFromLead: true,
-              taskType: productTypeToTaskType(productType),
-              sendAspects,
-              onClose: sendCurrentTask,
-            });
-          } else {
-            await sendCurrentTask();
-          }
-        } catch {
-          handleFailSendForm();
-        }
+        },
+        goToNextStep,
+        consentBkiDialog,
+        draftDialog,
       };
 
+      const sendCurrentTask = createSendCurrentTaskOld(oldMicroserviceProps);
+      const handleSuccessVerify = createHandleSuccessVerifyOld(
+        oldMicroserviceProps,
+        sendCurrentTask,
+      );
+
       const acceptedConsents = getAcceptedConsents(transformedFormData, productType);
 
       verifyPhoneDialog.open({
@@ -161,6 +150,7 @@ export const useApplicationLeadApi = ({
         sendAspects,
         verifyPhoneDialog,
         handleFailSendForm,
+        aspects,
       };
 
       const taskData: TaskDataProps = {
@@ -251,9 +241,16 @@ const createHandleSuccessVerifyNew =
     consentBkiDialog: ReturnType<typeof useConsentBkiDialog>;
   }) =>
   async () => {
-    const { programId, productType, sendAspects, verifyPhoneDialog, handleFailSendForm } = common;
+    const { verifyPhoneDialog, sendAspects, handleFailSendForm, programId, productType, aspects } =
+      common;
     const { formData } = taskData;
 
+    handleAspects({
+      aspectsAttributes: getAspects('leadForm', productType),
+      aspects,
+      ev: {} as PreventableEventWithTarget,
+    });
+
     try {
       const participantData = await createParticipant({
         phone: formatPhone(formData.phone as string),
@@ -307,6 +304,69 @@ const createHandleSuccessVerifyNew =
     }
   };
 
+const createSendCurrentTaskOld = (props: OldMicroserviceProps) => async () => {
+  const { common, taskData, goToNextStep, consentBkiDialog } = props;
+  const { programId, profileId, productType, verifyPhoneDialog, handleFailSendForm } = common;
+  const { formData } = taskData;
+
+  await updateUserData({
+    programId,
+    profileId,
+    formData,
+    productType,
+    referalData: taskData.referalData,
+    marketingInfo: taskData.marketingInfo,
+    saveUserData: taskData.saveUserData,
+    sendAspects: common.sendAspects,
+  });
+
+  verifyPhoneDialog.close();
+
+  if (productType === 'debitCard') {
+    goToNextStep();
+  } else {
+    consentBkiDialog.open({
+      phone: formData.phone,
+      profileId,
+      onFail: handleFailSendForm,
+    });
+  }
+};
+
+const createHandleSuccessVerifyOld =
+  (props: OldMicroserviceProps, sendCurrentTask: () => Promise<void>) => async () => {
+    const { common, draftDialog } = props;
+    const { aspects, programId, sendAspects, verifyPhoneDialog, handleFailSendForm, profileId } =
+      common;
+    const productType = common.productType as ProductType;
+
+    handleAspects({
+      aspectsAttributes: getAspects('leadForm', productType),
+      aspects,
+      ev: {} as PreventableEventWithTarget,
+    });
+
+    try {
+      const lastTaskId = await getLastTaskStatus({ profileId, programId });
+
+      if (lastTaskId) {
+        const task = await getTaskById({ taskId: lastTaskId });
+        verifyPhoneDialog.close();
+        draftDialog.open({
+          task,
+          isFromLead: true,
+          taskType: productTypeToTaskType(productType),
+          sendAspects,
+          onClose: sendCurrentTask,
+        });
+      } else {
+        await sendCurrentTask();
+      }
+    } catch {
+      handleFailSendForm();
+    }
+  };
+
 const getAcceptedConsents = (formData: LeadFormState, productType: ProductType): string[] => {
   const consents = productTypeToConsentsMap[productType];
 

package/src/components/CreditCardForm/CreditCardFormStep.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm/useForm';
 import { useIFrameMode } from '../../retail/hooks/useIFrameMode';
+import { useRetailFormStore } from '../../retail/hooks/useRetailFormStore';
 import { type SectionsRetailProps } from '../../retail/model/InputSectionsType';
 import { type LeadFormState } from '../../retail/model/LeadFormState';
 import { renderStep } from '../../retail/utils/renderStep';
@@ -21,6 +22,7 @@ const PRODUCT_TYPE = 'creditCard';
 
 export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
   ({ step, sections, onPrevStep, onNextStep, onFinish }) => {
+    const { programId } = useRetailFormStore();
     useIFrameMode();
     const inputs = useMemo(
       () => sections?.flatMap((_: SectionsRetailProps) => _?.inputs || []),
@@ -43,15 +45,24 @@ export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
       onFinish,
     });
 
-    const [, { field, onSubmit: handleSubmit }] = useForm(initialState, {
+    const [formState, { field, onSubmit: handleSubmit }] = useForm(initialState, {
       formValidator,
       onSubmit,
     });
 
+    const PAYMENT_SYSTEM = formState.paymentSystem?.text;
+
     return (
       <form onSubmit={handleSubmit} className="space-y-m">
         {renderStep({ sections, field })}
-        <StepsNavigationButtons isSending={isSending} step={step} onPrevStep={onPrevStep} />
+        <StepsNavigationButtons
+          isSending={isSending}
+          step={step}
+          onPrevStep={onPrevStep}
+          programId={programId}
+          productType={PRODUCT_TYPE}
+          paymentSystem={PAYMENT_SYSTEM}
+        />
       </form>
     );
   },

package/src/components/CreditCardForm/FailedStatusContent.tsx

@@ -1,10 +1,27 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { handleAspects } from '../../hooks/useAspects/handleAspects';
+import { useAspects } from '../../hooks/useAspects/useAspects';
 import { FormStatus } from '../../retail/components/FormStatus/FormStatus';
+import { getAspects } from '../../retail/utils/commonAspects';
+import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 
-export const FailedStatusContent = JSX(() => (
-  <FormStatus
-    title="Благодарим Вас за ожидание"
-    description="В настоящий момент Банк не может одобрить Вашу заявку на кредитную карту. Попробуйте подать заявку позже. Спасибо за обращение в АО «Россельхозбанк»."
-    buttonText="Вернуться на главную"
-  />
-));
+export const FailedStatusContent = JSX(() => {
+  const aspects = useAspects();
+
+  useEffect(() => {
+    handleAspects({
+      aspectsAttributes: getAspects('refuse', 'creditCard'),
+      aspects,
+      ev: {} as PreventableEventWithTarget,
+    });
+  }, []);
+
+  return (
+    <FormStatus
+      title="Благодарим Вас за ожидание"
+      description="В настоящий момент Банк не может одобрить Вашу заявку на кредит. Попробуйте подать заявку позже. Спасибо за обращение в АО «Россельхозбанк»."
+      buttonText="Вернуться на главную"
+    />
+  );
+});

package/src/components/CreditCardForm/PendingStatusContent.tsx

@@ -1,9 +1,32 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { handleAspects } from '../../hooks/useAspects/handleAspects';
+import { useAspects } from '../../hooks/useAspects/useAspects';
 import { FormStatus } from '../../retail/components/FormStatus/FormStatus';
 import { useRetailFormStore } from '../../retail/hooks/useRetailFormStore';
+import { getAspects } from '../../retail/utils/commonAspects';
+import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 
 export const PendingStatusContent = JSX(({ onExpire }: { onExpire: () => void }) => {
   const { statusInfo } = useRetailFormStore();
+  const aspects = useAspects();
+
+  useEffect(() => {
+    handleAspects({
+      aspectsAttributes: getAspects('timer', 'creditCard'),
+      aspects,
+      ev: {} as PreventableEventWithTarget,
+    });
+  }, []);
+
+  const handleExpireWithEvent = () => {
+    handleAspects({
+      aspectsAttributes: getAspects('timerEnd', 'creditCard'),
+      aspects,
+      ev: {} as PreventableEventWithTarget,
+    });
+    onExpire();
+  };
 
   return (
     <FormStatus
@@ -21,7 +44,7 @@ export const PendingStatusContent = JSX(({ onExpire }: { onExpire: () => void })
           description: statusInfo?.cardCategory,
         },
       ]}
-      onExpire={onExpire}
+      onExpire={handleExpireWithEvent}
     />
   );
 });