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

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

@@ -1,24 +1,37 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
 import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
+import { getStepAspects } from '../../utils/getStepAspects';
+import { CREDIT_CARD_FORM_STEPS_ASPECTS } from './creditCardFormAspects';
 
 export interface StepsNavigationButtonsProps {
   step: number;
   isSending: boolean;
   onPrevStep?: () => void;
+  programId?: string | null;
+  productType?: string;
+  paymentSystem?: string;
 }
 
 export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
-  ({ step, isSending, onPrevStep }) => {
+  ({ step, isSending, onPrevStep, programId, productType, paymentSystem }) => {
     const isFirstStep = step === 0;
     const isFinalStep = step === 5;
 
+    const aspects = getStepAspects({
+      step,
+      programId,
+      productType,
+      paymentSystem,
+      stepsConfig: CREDIT_CARD_FORM_STEPS_ASPECTS,
+    });
+
     return (
       <div className="flex justify-between gap-m">
         <Button version="secondary" disabled={isFirstStep} onClick={onPrevStep}>
           Назад
         </Button>
-        <SubmitButton isLoading={isSending}>
+        <SubmitButton isLoading={isSending} data={aspects}>
           {isFinalStep ? 'Отправить заявку' : 'Далее'}
         </SubmitButton>
       </div>

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

@@ -1,10 +1,24 @@
 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, type StatusInfoState } from '../../retail/hooks/useRetailFormStore';
+import { getAspects } from '../../retail/utils/commonAspects';
+import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { formatDate } from '../../utils/formatDate';
 
 export const SuccessStatusCardContent = JSX(() => {
   const { statusInfo } = useRetailFormStore();
+  const aspects = useAspects();
+
+  useEffect(() => {
+    handleAspects({
+      aspectsAttributes: getAspects('preDecision', 'creditCard'),
+      aspects,
+      ev: {} as PreventableEventWithTarget,
+    });
+  }, []);
 
   return (
     <FormStatus

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

@@ -0,0 +1,9 @@
+import { type StepAspectsConfig } from '../../retail/utils/formAspectsConfig';
+
+export const CREDIT_CARD_FORM_STEPS_ASPECTS: StepAspectsConfig[] = [
+  { ymTargetName: 'card_credit_calculator' },
+  { ymTargetName: 'card_app_personal_data' },
+  { ymTargetName: 'card_app_work' },
+  { ymTargetName: 'card_app_income' },
+  { ymTargetName: 'card_app_bank_office' },
+];

package/mobile/src/components/CreditForm/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', 'credit'),
+      aspects,
+      ev: {} as PreventableEventWithTarget,
+    });
+  }, []);
+
+  return (
+    <FormStatus
+      title="Благодарим Вас за ожидание"
+      description="В настоящий момент Банк не может одобрить Вашу заявку на кредит. Попробуйте подать заявку позже. Спасибо за обращение в АО «Россельхозбанк»."
+      buttonText="Вернуться на главную"
+    />
+  );
+});

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

@@ -1,6 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, 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';
 import { getCreditInfo } from './getCreditInfo';
 
 export const PendingStatusContent = JSX(({ onExpire }: { onExpire: () => void }) => {
@@ -8,6 +13,26 @@ export const PendingStatusContent = JSX(({ onExpire }: { onExpire: () => void })
 
   const creditInfo = getCreditInfo(programId);
 
+  const aspects = useAspects();
+
+  useEffect(() => {
+    handleAspects({
+      aspectsAttributes: getAspects('timer', 'credit'),
+      aspects,
+      ev: {} as PreventableEventWithTarget,
+    });
+  }, []);
+
+  const handleExpireWithEvent = useCallback(() => {
+    handleAspects({
+      aspectsAttributes: getAspects('timerEnd', 'credit'),
+      aspects,
+      ev: {} as PreventableEventWithTarget,
+    });
+
+    onExpire();
+  }, [aspects, onExpire]);
+
   return (
     <FormStatus
       interval={300}
@@ -36,7 +61,7 @@ export const PendingStatusContent = JSX(({ onExpire }: { onExpire: () => void })
           description: statusInfo?.calculator?.isAnnuity ? 'Аннуитетный' : 'Дифференцированный',
         },
       ]}
-      onExpire={onExpire}
+      onExpire={handleExpireWithEvent}
     />
   );
 });

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

@@ -1,10 +1,25 @@
 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 ReworkStatusContent = JSX(() => {
   const { statusInfo } = useRetailFormStore();
 
+  const aspects = useAspects();
+
+  useEffect(() => {
+    handleAspects({
+      aspectsAttributes: getAspects('revision', 'credit'),
+      aspects,
+      ev: {} as PreventableEventWithTarget,
+    });
+  }, []);
+
   return (
     <FormStatus
       title="Благодарим вас за ожидание, но нам требуется больше времени для принятия решения"

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

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type AspectsDef } from '../../model/AspectsProps';
-import { projectSettings } from '../../ProjectSettings';
 import { Button } from '../../ui-kit/Button/Button';
 import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
-import { getYandexAspects } from './getYandexAspects';
+import { getStepAspects } from '../../utils/getStepAspects';
+import { CREDIT_FORM_STEPS_ASPECTS } from './creditFormAspects';
+
 export interface StepsNavigationButtonsProps {
   step: number;
   isSending: boolean;
@@ -12,106 +12,16 @@ export interface StepsNavigationButtonsProps {
   productType?: string;
 }
 
-const YANDEX_ID = projectSettings.YANDEX_METRIKA_ID || '92511315';
-
-const data: AspectsDef[][] = [
-  [
-    {
-      aspectName: 'ymReachGoal',
-      params: {
-        yandexId: YANDEX_ID,
-        targetName: 'credit_calculator',
-      },
-    },
-    {
-      aspectName: 'snowplowEvent',
-      params: {
-        eventAction: 'naturalCreditsReducedPaymentCreditSummPeriodNext',
-        eventCategory: 'naturalCredits',
-        eventValueText: 'Кредит со сниженным платежом Сумма и сроки кредита Кнопка Далее',
-      },
-    },
-  ],
-  [
-    {
-      aspectName: 'ymReachGoal',
-      params: {
-        yandexId: YANDEX_ID,
-        targetName: 'app_personal_data',
-      },
-    },
-    {
-      aspectName: 'snowplowEvent',
-      params: {
-        eventAction: 'naturalCreditsReducedPaymentCreditFormPassportNext',
-        eventCategory: 'naturalCredits',
-        eventValueText: 'Кредит со сниженным платежом Паспортные данные Кнопка Далее',
-      },
-    },
-  ],
-  [
-    {
-      aspectName: 'ymReachGoal',
-      params: {
-        yandexId: YANDEX_ID,
-        targetName: 'app_work',
-      },
-    },
-    {
-      aspectName: 'snowplowEvent',
-      params: {
-        eventAction: 'naturalCreditsReducedPaymentCreditFormEmployerDetailsNext',
-        eventCategory: 'naturalCredits',
-        eventValueText: 'Кредит со сниженным платежом Данные о работодателе Кнопка Далее',
-      },
-    },
-  ],
-  [
-    {
-      aspectName: 'ymReachGoal',
-      params: {
-        yandexId: YANDEX_ID,
-        targetName: 'app_income',
-      },
-    },
-    {
-      aspectName: 'snowplowEvent',
-      params: {
-        eventAction: 'naturalCreditsReducedPaymentCreditFormFamilyStatusNext',
-        eventCategory: 'naturalCredits',
-        eventValueText: 'Кредит со сниженным платежом Семейное положение и доход Кнопка Далее',
-      },
-    },
-  ],
-  [
-    {
-      aspectName: 'ymReachGoal',
-      params: {
-        yandexId: YANDEX_ID,
-        targetName: 'app_bank_office',
-      },
-    },
-    {
-      aspectName: 'snowplowEvent',
-      params: {
-        eventAction: 'naturalCreditsReducedPaymentCreditFormBankDepartmentChoosingNext',
-        eventCategory: 'naturalCredits',
-        eventValueText: 'Кредит со сниженным платежом Выбор отделения Кнопка Далее',
-      },
-    },
-  ],
-];
-
 export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
   ({ step, onPrevStep, isSending, programId, productType = 'credit' }) => {
     const isFirstStep = step === 0;
     const isFinalStep = step === 5;
 
-    const aspects = getYandexAspects({
+    const aspects = getStepAspects({
       step,
       programId,
       productType,
-      aspectsData: data,
+      stepsConfig: CREDIT_FORM_STEPS_ASPECTS,
     });
 
     return (

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

@@ -1,6 +1,11 @@
 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';
 import { getCreditInfo } from './getCreditInfo';
 
 export const SuccessStatusContent = JSX(() => {
@@ -8,6 +13,16 @@ export const SuccessStatusContent = JSX(() => {
 
   const creditInfo = getCreditInfo(programId);
 
+  const aspects = useAspects();
+
+  useEffect(() => {
+    handleAspects({
+      aspectsAttributes: getAspects('preDecision', 'credit'),
+      aspects,
+      ev: {} as PreventableEventWithTarget,
+    });
+  }, []);
+
   return (
     <FormStatus
       title="Банк одобрил вам кредит"

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

@@ -0,0 +1,35 @@
+import { type StepAspectsConfig } from '../../retail/utils/formAspectsConfig';
+
+export const CREDIT_FORM_STEPS_ASPECTS: StepAspectsConfig[] = [
+  {
+    ymTargetName: 'credit_calculator',
+    snowplowEventAction: 'naturalCreditsReducedPaymentCreditSummPeriodNext',
+    snowplowEventCategory: 'naturalCredits',
+    snowplowEventValueText: 'Кредит со сниженным платежом Сумма и сроки кредита Кнопка Далее',
+  },
+
+  {
+    ymTargetName: 'app_personal_data',
+    snowplowEventAction: 'naturalCreditsReducedPaymentCreditFormPassportNext',
+    snowplowEventCategory: 'naturalCredits',
+    snowplowEventValueText: 'Кредит со сниженным платежом Паспортные данные Кнопка Далее',
+  },
+  {
+    ymTargetName: 'app_work',
+    snowplowEventAction: 'naturalCreditsReducedPaymentCreditFormEmployerDetailsNext',
+    snowplowEventCategory: 'naturalCredits',
+    snowplowEventValueText: 'Кредит со сниженным платежом Данные о работодателе Кнопка Далее',
+  },
+  {
+    ymTargetName: 'app_income',
+    snowplowEventAction: 'naturalCreditsReducedPaymentCreditFormFamilyStatusNext',
+    snowplowEventCategory: 'naturalCredits',
+    snowplowEventValueText: 'Кредит со сниженным платежом Семейное положение и доход Кнопка Далее',
+  },
+  {
+    ymTargetName: 'app_bank_office',
+    snowplowEventAction: 'naturalCreditsReducedPaymentCreditFormBankDepartmentChoosingNext',
+    snowplowEventCategory: 'naturalCredits',
+    snowplowEventValueText: 'Кредит со сниженным платежом Выбор отделения Кнопка Далее',
+  },
+];

package/mobile/src/components/DebitForm/DebitFormStep.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 = 'debitCard';
 
 export const DebitFormStep = JSX<DebitFormStepProps>(
   ({ step, sections, onPrevStep, onNextStep, onFinish }) => {
+    const { programId } = useRetailFormStore();
     useIFrameMode();
     const inputs = useMemo(
       () => sections?.flatMap((_: SectionsRetailProps) => _?.inputs ?? []),
@@ -43,15 +45,24 @@ export const DebitFormStep = JSX<DebitFormStepProps>(
       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 step={step} isSending={isSending} onPrevStep={onPrevStep} />
+        <StepsNavigationButtons
+          step={step}
+          isSending={isSending}
+          onPrevStep={onPrevStep}
+          programId={programId}
+          productType={PRODUCT_TYPE}
+          paymentSystem={PAYMENT_SYSTEM}
+        />
       </form>
     );
   },

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

@@ -1,24 +1,37 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
 import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
+import { getStepAspects } from '../../utils/getStepAspects';
+import { DEBIT_FORM_STEPS_ASPECTS } from './debitFormAspects';
 
 export interface StepsNavigationButtonsProps {
   step: number;
   isSending: boolean;
   onPrevStep?: () => void;
+  programId?: string | null;
+  productType?: string;
+  paymentSystem?: string;
 }
 
 export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
-  ({ step, onPrevStep, isSending }) => {
+  ({ step, onPrevStep, isSending, programId, productType = 'debitCard', paymentSystem }) => {
     const isFirstStep = step === 0;
     const isFinalStep = step === 5;
 
+    const aspects = getStepAspects({
+      step,
+      programId,
+      productType,
+      paymentSystem,
+      stepsConfig: DEBIT_FORM_STEPS_ASPECTS,
+    });
+
     return (
       <div className={'flex justify-between gap-m'}>
         <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
           Назад
         </Button>
-        <SubmitButton isLoading={isSending}>
+        <SubmitButton isLoading={isSending} data={aspects}>
           {isFinalStep ? 'Отправить заявку' : 'Далее'}
         </SubmitButton>
       </div>

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

@@ -0,0 +1,7 @@
+import { type StepAspectsConfig } from '../../retail/utils/formAspectsConfig';
+
+export const DEBIT_FORM_STEPS_ASPECTS: StepAspectsConfig[] = [
+  { ymTargetName: 'debit_region' },
+  { ymTargetName: 'debit_app_personal_data' },
+  { ymTargetName: 'debit_app_card_data' },
+];

package/mobile/src/components/Footer/Contacts.tsx

@@ -59,4 +59,4 @@ const renderText = (type: ContactInfo['type'], text = '') => {
   }
 };
 
-const formatTel = (s: string) => s.replaceAll(/\D/g, '');
+const formatTel = (s: string): string => s.replace(/[^\d+]/g, '');

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

@@ -2,16 +2,21 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { OnCloseProps } from '../../../model/OnCloseProps';
 
+import { handleAspects } from '../../../hooks/useAspects/handleAspects';
+import { useAspects } from '../../../hooks/useAspects/useAspects';
 import { Button } from '../../../ui-kit/Button/Button';
 import { Dialog } from '../../../ui-kit/DialogManager/Dialog';
 import { Heading } from '../../../ui-kit/Heading/Heading';
 import { Paragraph } from '../../../ui-kit/Paragraph/Paragraph';
+import { type PreventableEventWithTarget } from '../../../ui-kit/PreventableEvent';
 import { RadioButtonGroup } from '../../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { noop } from '../../../utils/noop';
+import { getAspects } from '../../utils/commonAspects';
 import { useDocumentDialog } from '../DocumentDialog/useDocumentDialog';
 
 export interface ConsentBkiDialogProps extends OnCloseProps {
   onSubmit?: (confirmStatus: string) => void;
+  productType?: string;
 }
 
 const defaultConsentText = {
@@ -32,15 +37,24 @@ const ITEMS = [
 const CONSENT_BKI_ID = 2;
 
 export const ConsentBkiDialog = JSX<ConsentBkiDialogProps>(
-  ({ onSubmit = noop, onClose = noop }) => {
+  ({ onSubmit = noop, onClose = noop, productType }) => {
     const [confirmStatus, setConfirmStatus] = useState('');
     const [showRefuseContent, setShowRefuseContent] = useState(false);
 
     const { openDocument } = useDocumentDialog(CONSENT_BKI_ID);
 
+    const aspects = useAspects();
+
     const handleSubmit = useCallback(() => {
+      if (confirmStatus === 'SIGNED') {
+        handleAspects({
+          aspectsAttributes: getAspects('consentBki', productType),
+          aspects,
+          ev: {} as PreventableEventWithTarget,
+        });
+      }
       onSubmit(confirmStatus);
-    }, [onSubmit, confirmStatus]);
+    }, [onSubmit, confirmStatus, aspects, productType]);
 
     const handleConfirmChange = useCallback((value: string) => {
       setConfirmStatus(value);