@redneckz/wildless-cms-uni-blocks 0.14.683 → 0.14.685

package/mobile/src/ui-kit/FormField/Fields/CardCategoryField.tsx

@@ -1,18 +1,28 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { getCardTypes, type CardTypeData } from '../../../api/RetailAPI/getCardTypes';
+import { useLocalStorage } from '../../../hooks/useLocalStorage';
+import { type Option } from '../../Select/Option';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { SelectField } from '../SelectField';
 
 export const CardCategoryField = JSX<CustomFieldProps>(({ field, input }) => {
   const [cardTypes, setCardTypes] = useState<CardTypeData[]>([]);
+  const [programId] = useLocalStorage<string>('programId');
+  const { value: selectedCardCategory, onChange: cardCategoryChange } = field('cardCategory');
   const selectedPaymentSystem = field('paymentSystem').value;
 
   useEffect(() => {
-    (async () => {
-      const fetchedCardTypes = await getCardTypes(selectedPaymentSystem as string);
-      setCardTypes(fetchedCardTypes);
-    })();
+    if (selectedPaymentSystem && programId) {
+      (async () => {
+        const fetchedCardTypes = await getCardTypes(selectedPaymentSystem as string, programId);
+        setCardTypes(fetchedCardTypes);
+
+        if (!isValidCardCategory(fetchedCardTypes, selectedCardCategory as Option)) {
+          cardCategoryChange && cardCategoryChange(null);
+        }
+      })();
+    }
   }, [selectedPaymentSystem]);
 
   return (
@@ -25,3 +35,6 @@ export const CardCategoryField = JSX<CustomFieldProps>(({ field, input }) => {
     />
   );
 });
+
+const isValidCardCategory = (cardTypes: CardTypeData[], selectedCardCategory: Option | null) =>
+  cardTypes.some((cardType) => cardType.key === selectedCardCategory?.key);

package/mobile/src/ui-kit/FormField/Fields/CreditCalcField.tsx

@@ -0,0 +1,24 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { CalculatorCredit } from '../../../components/CalculatorCredit/CalculatorCredit';
+import { type CreditCalculatorUserInputParams } from '../../../components/CalculatorCredit/CalculatorCreditContent';
+import { defaultValueAdapter } from '../../../components/CalculatorCredit/defaultValueAdapter';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+const FIELD_NAME = 'calculator';
+
+export const CreditCalcField = JSX<CustomFieldProps>(({ field, params }) => {
+  const handleChange = useCallback((_: CreditCalculatorUserInputParams) => {
+    field(FIELD_NAME).onChange?.(_);
+  }, []);
+
+  return (
+    <CalculatorCredit
+      {...params?.calcData}
+      defaultParams={defaultValueAdapter(
+        field(FIELD_NAME).value as CreditCalculatorUserInputParams,
+      )}
+      onChange={handleChange}
+    />
+  );
+});

package/mobile/src/ui-kit/FormField/Fields/PaymentSystemField.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { getPaymentSystems } from '../../../api/RetailAPI/getPaymentSystems';
+import { useLocalStorage } from '../../../hooks/useLocalStorage';
 import { type RadioButtonItem } from '../../RadioButtonGroup/RadioButtonGroup';
 import { RadioButtonGroupControl } from '../../RadioButtonGroup/RadioButtonGroupControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
@@ -9,14 +10,17 @@ import { getValidation } from '../getValidation';
 
 export const PaymentSystemField = JSX<CustomFieldProps>(({ field, input }) => {
   const { value, onChange } = field('paymentSystem');
+  const [programId] = useLocalStorage<string>('programId');
 
   const [paymentSystemOptions, setPaymentSystemOptions] = useState<RadioButtonItem[]>([]);
 
   useEffect(() => {
-    (async () => {
-      const fetchedPaymentSystems = await getPaymentSystems();
-      setPaymentSystemOptions(fetchedPaymentSystems || []);
-    })();
+    if (programId) {
+      (async () => {
+        const fetchedPaymentSystems = await getPaymentSystems(programId);
+        setPaymentSystemOptions(fetchedPaymentSystems || []);
+      })();
+    }
   }, []);
 
   return (

package/mobile/src/ui-kit/FormField/Fields/RegionField.tsx

@@ -1,12 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { getRegionUrl } from '../../../components/ApplicationForm/getRegionUrl';
 import { useRegions } from '../../../hooks/useRegions';
 import { SelectControl } from '../../Select/SelectControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
-export const RegionField = JSX<CustomFieldProps>(({ field, input, url }) => {
+export const RegionField = JSX<CustomFieldProps>(({ field, input, params }) => {
+  const url = getRegionUrl(params?.typeForm as string | undefined);
+
   const regions = useRegions(url);
 
   return (

package/mobile/src/ui-kit/FormField/NameFieldDef.ts

@@ -100,4 +100,5 @@ export type NameFieldDef =
   | 'currency'
   | 'cardCategory'
   | 'codeWord'
+  | 'calculator'
   | 'confirmationIncome';

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

@@ -33,12 +33,10 @@ export const SelectField = UniBlock<SelectFieldProps>(
     isSearch = false,
   }) => {
     const leadOptions: Option[] =
-      (source &&
-        source?.map((_: LeadProps) => ({
-          key: _.key || '',
-          text: _.value,
-        }))) ||
-      [];
+      source?.map((_: LeadProps) => ({
+        key: _.key || '',
+        text: _.value,
+      })) || [];
 
     return (
       <SelectControl

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

@@ -2,7 +2,6 @@
 /* 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';
 import { InputControl } from '../Input/InputControl';
 import { AcquiringField } from './Fields/AcquiringField';
@@ -29,6 +28,7 @@ import { CommentField } from './Fields/CommentField';
 import { ConfirmationIncomeField } from './Fields/ConfirmationIncomeField';
 import { ConscriptionField } from './Fields/ConscriptionField';
 import { ConsentField } from './Fields/ConsentField';
+import { CreditCalcField } from './Fields/CreditCalcField';
 import { CreditInRshbCdField } from './Fields/CreditInRshbCdField';
 import { CurrencyField } from './Fields/CurrencyField';
 import { DeliveryDateFiels } from './Fields/DeliveryDateFiels';
@@ -99,9 +99,9 @@ const PRODUCT_REF = {
 };
 
 export const getField =
-  (field: FormFieldRegisterer<any>, typeForm = '') =>
+  (field: FormFieldRegisterer<any>, params?: Record<string, any>) =>
   (input: FieldDef, i: number) => {
-    const isPremium = typeForm === 'ULTRASERVICE' || typeForm === 'PREMIUMSERVICE';
+    const isPremium = params?.typeForm === 'ULTRASERVICE' || params?.typeForm === 'PREMIUMSERVICE';
 
     const InputsMap = {
       surname: <SurnameField field={field} input={input} />,
@@ -157,7 +157,7 @@ export const getField =
       region: isPremium ? (
         <RegionPremiumField field={field} />
       ) : (
-        <RegionField field={field} input={input} url={getRegionUrl(typeForm)} />
+        <RegionField field={field} input={input} params={params} />
       ),
       education: <EducationField field={field} input={input} />,
       housing: <HousingField field={field} input={input} />,
@@ -205,6 +205,7 @@ export const getField =
       confirmationIncome: <ConfirmationIncomeField field={field} input={input} />,
       methodObtain: <MethodObtainField field={field} input={input} />,
       deliveryDate: <DeliveryDateFiels field={field} input={input} />,
+      calculator: <CreditCalcField field={field} params={params} />,
     };
 
     return isRenderField({ input, field }) ? (

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

@@ -105,6 +105,8 @@ export const validatorObj: Record<string, Validator> = {
   confirmationIncome: defaultValidator(),
   deliveryDate: defaultValidator('Укажите дату доставки'),
   addressCourier: addressDaDataValidator(),
+  cardCategory: defaultValidator('Укажите категорию карты'),
+  paymentSystem: defaultValidator('Укажите тип платежной системы'),
 };
 
 export const getObjectValidator = (inputs: FieldDef[]): Record<string, Validator> => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.683",
+  "version": "0.14.685",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -132,6 +132,7 @@
   "peerDependencies": {
     "cypress": "^13.13.0",
     "cypress-visual-regression": "5.0.0",
+    "cypress-wait-until": "^3.0.1",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1"
   },
@@ -214,7 +215,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "92 kB",
+      "limit": "100 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/api/RetailAPI/getCardTypes.ts

@@ -1,4 +1,4 @@
-import { doRequest } from './doRequest';
+import { fetchRetailJSON } from './doRequest';
 
 export type CardTypeData = {
   type: string;
@@ -8,13 +8,11 @@ export type CardTypeData = {
   description: string;
 };
 
-export const getCardTypes = async (paymentSystemType: string) => {
-  const response: Response = await doRequest('/dictionaryFiltered', 'POST', {
+export const getCardTypes = async (paymentSystemTypeCd: string, creditProgramId: string) => {
+  const data = await fetchRetailJSON<CardTypeData[]>('/dictionaryFiltered', 'POST', {
     type: 'CARD_TYPE',
-    presets: { paymentSystemType, creditProgramId: 13 },
+    presets: { paymentSystemTypeCd, creditProgramId },
   });
 
-  const data: CardTypeData[] = await response?.json();
-
-  return data;
+  return Array.isArray(data) ? data : [];
 };

package/src/api/RetailAPI/getPaymentSystems.ts

@@ -1,4 +1,4 @@
-import { doRequest } from './doRequest';
+import { fetchRetailJSON } from './doRequest';
 
 type PaymentSystemResponse = {
   paymentSystems?: {
@@ -7,12 +7,14 @@ type PaymentSystemResponse = {
   }[];
 };
 
-export const getPaymentSystems = async () => {
-  const response: Response = await doRequest('/public-data/creditProgramConditions', 'POST', {
-    creditProgramId: 13,
-  });
-
-  const data: PaymentSystemResponse = await response?.json();
+export const getPaymentSystems = async (creditProgramId: string) => {
+  const data = await fetchRetailJSON<PaymentSystemResponse>(
+    '/public-data/creditProgramConditions',
+    'POST',
+    {
+      creditProgramId,
+    },
+  );
 
   return (
     data?.paymentSystems?.map((paymentSystem) => ({

package/src/api/RetailAPI/updateUserProfile.ts

@@ -1,5 +1,4 @@
-import { fetchRetailJSON } from './doRequest';
-import { type CreateUserProfileResponse } from './updateUserTask';
+import { doRequest } from './doRequest';
 
 export type UpdateUserProfileBody = {
   profile: {
@@ -23,4 +22,4 @@ export type UpdateUserProfileBody = {
 };
 
 export const updateUserProfile = (body: UpdateUserProfileBody) =>
-  fetchRetailJSON<CreateUserProfileResponse>('/user-data/updateUserProfile', 'PUT', body);
+  doRequest('/user-data/updateUserProfile', 'PUT', body);

package/src/api/RetailAPI/updateUserTask.ts

@@ -1,5 +1,5 @@
 import { type Option } from '../../ui-kit/Select/Option';
-import { fetchRetailJSON } from './doRequest';
+import { doRequest } from './doRequest';
 
 type ParticipantAddress = {
   addressType: {
@@ -83,6 +83,7 @@ export type Participant = {
   participantAddresses?: ParticipantAddress[];
   participantIncomes?: ParticipantIncome[];
   payrollCardRshbFlg?: boolean;
+  consentInsuranceFlg?: boolean;
   positionCd?: Option;
   registrationDate?: string;
   seniority?: string;
@@ -107,9 +108,6 @@ export type Participant = {
   paymentSystemTypeCd?: string;
   classCard?: Option;
   codeWord?: string;
-  loanAmount?: number;
-  creditPeriod?: number;
-  paymentTypeCd?: PaymentType;
 };
 
 export type UpdateUserTaskBody = {
@@ -131,6 +129,9 @@ export type UpdateUserTaskBody = {
     esiaAccountTypeCd?: {
       key: 'VERIFIED' | 'STANDARD' | 'SIMPLIFIED';
     };
+    loanAmount?: number;
+    creditPeriod?: number;
+    paymentTypeCd?: PaymentType;
   };
 };
 
@@ -141,4 +142,4 @@ export type CreateUserProfileResponse = {
 };
 
 export const updateUserTask = (body: UpdateUserTaskBody) =>
-  fetchRetailJSON<CreateUserProfileResponse>('/user-data/updateUserTask', 'PUT', body);
+  doRequest('/user-data/updateUserTask', 'PUT', body);

package/src/api/RetailAPI/utils/getUpdateUserProfile.ts

@@ -11,7 +11,7 @@ export const getUpdateUserProfileData = (
     name = '',
     surname = '',
     middleName = '',
-    birthday = '',
+    limitedBirthday = '',
     phone = '',
     email = '',
     processPersonalDataFlg,
@@ -29,7 +29,7 @@ export const getUpdateUserProfileData = (
       name,
       surname,
       midname: middleName,
-      birthDate: birthday && formatDate(birthday, true),
+      birthDate: limitedBirthday && formatDate(limitedBirthday, true),
       email,
       phone: formatPhone(phone),
       processPersonalDataFlg: Boolean(processPersonalDataFlg),

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -92,7 +92,7 @@ export const ApplicationForm = JSX<ApplicationFormProps>(
               className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}
             >
               {renderTitle(_.title)}
-              {(_?.inputs || [])?.map(getField(field, typeForm))}
+              {(_?.inputs || [])?.map(getField(field, { typeForm }))}
             </div>
           ))}
           {renderAgreementSubmit(

package/src/components/ApplicationForm/renderInputs.tsx

@@ -11,11 +11,11 @@ export const renderInputs = ({ field, typeForm = '', inputs }: GroupedConsentsPr
 
   return consentInputs.length > 2 ? (
     <div>
-      {restInputs.map(getField(field, typeForm))}
+      {restInputs.map(getField(field, { typeForm }))}
       <GroupedConsents inputs={consentInputs} field={field} />
     </div>
   ) : (
-    (inputs || [])?.map(getField(field, typeForm))
+    (inputs || [])?.map(getField(field, { typeForm }))
   );
 };
 

package/src/components/ApplicationLeadForm/GroupedConsents.tsx

@@ -49,7 +49,7 @@ export const GroupedConsents = JSX<GroupedConsentsProps>(
           unfoldedByDefault
           renderFoldableSection={({ isUnfolded }) => (
             <FoldableSection isUnfolded={isUnfolded} className="flex flex-col pl-2xl">
-              {inputs.map(getField(field, typeForm))}
+              {inputs.map(getField(field, { typeForm }))}
             </FoldableSection>
           )}
           renderFoldButton={renderGeneralCheckbox(

package/src/components/ApplicationLeadForm/getInitialFormState.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable max-lines */
+import { type PaymentType } from '../../api/RetailAPI/updateUserTask';
 import {
   FEEDBACK_METHOD,
   SERVICE_DIRECTIONS,
@@ -143,14 +144,19 @@ export interface FormState extends FormConsents, FormStateDeliveryType {
   cardCategory?: Option;
   codeWord?: string;
   esiaAccountTypeCd?: Option;
-  moneyValue?: number;
-  monthsValue?: number;
-  isAnnuity?: boolean;
-  isInsurance?: boolean;
-  isSalaryClient?: boolean;
-  isPensionClient?: boolean;
-  isStateEmployee?: boolean;
+  calculator?: {
+    moneyValue?: number;
+    monthsValue?: number;
+    isAnnuity?: boolean;
+    isInsurance?: boolean;
+    isSalaryClient?: boolean;
+    isPensionClient?: boolean;
+    isStateEmployee?: boolean;
+  };
   addressRetail?: Option;
+  loanAmount?: number;
+  creditPeriod?: number;
+  paymentTypeCd?: PaymentType;
 }
 
 const initialFormState = {

package/src/components/ApplicationLeadForm/useApplicationLeadApi.ts

@@ -24,6 +24,13 @@ type ApplicationLeadApiProps = {
   saveForm: (value: FormState) => void;
 };
 
+type UserData = {
+  participantId: number;
+  taskId: number;
+  profileId: number;
+  programId: string;
+};
+
 export const useApplicationLeadApi = ({
   inputs,
   programId,
@@ -34,15 +41,20 @@ export const useApplicationLeadApi = ({
   const [, setTaskId] = useLocalStorage<number>('taskId');
   const [, setProfileId] = useLocalStorage<number>('profileId');
   const [, setParticipantId] = useLocalStorage<number>('participantId');
+  const [, setProgramId] = useLocalStorage<string>('programId');
   const esiaLoginDialog = useEsiaLoginDialog(nextStepLink);
   const consentBkiDialog = useConsentBkiDialog(esiaLoginDialog.open);
   const verifyPhoneDialog = useVerifyPhoneDialog();
 
-  const saveUserData = useCallback((participantId: number, taskId: number, profileId: number) => {
-    setParticipantId(participantId);
-    setTaskId(taskId);
-    setProfileId(profileId);
-  }, []);
+  const saveUserData = useCallback(
+    ({ participantId, taskId, profileId, programId: programNumber }: UserData) => {
+      setParticipantId(participantId);
+      setTaskId(taskId);
+      setProfileId(profileId);
+      setProgramId(programNumber);
+    },
+    [],
+  );
 
   // eslint-disable-next-line consistent-return
   const handleSubmit = useCallback(async (formData: FormState) => {
@@ -103,7 +115,7 @@ const updateUserData = async ({
   programId: string;
   profileId: number;
   formData: FormState;
-  saveUserData: (participantId: number, taskId: number, profileId: number) => void;
+  saveUserData: (userData: UserData) => void;
   saveForm: (formData: FormState) => void;
 }) => {
   const transformedForm = transformOtherConsentsField(formData);
@@ -115,16 +127,20 @@ const updateUserData = async ({
     programId,
   });
 
-  await updateUserTask(
-    getLeadFormTaskData({
-      participantId,
-      taskId,
-      profileId,
-      formData: transformedForm,
-    }),
-  );
-
-  saveUserData(participantId, taskId, profileId);
+  try {
+    await updateUserTask(
+      getLeadFormTaskData({
+        participantId,
+        taskId,
+        profileId,
+        formData: transformedForm,
+      }),
+    );
+  } catch (ex) {
+    console.log(ex);
+  }
+
+  saveUserData({ participantId, taskId, profileId, programId });
   saveForm(formData);
 };
 

package/src/components/CalculatorCredit/CalculatorCredit.tsx

@@ -18,7 +18,6 @@ import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInp
 import { setDefaultParamsCalc } from '../../ui-kit/Calculator/setDefaultParamsCalc';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
-import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { clamp } from '../../utils/clamp';
@@ -29,6 +28,7 @@ import {
   type CreditCalculatorParams,
   type CreditCalculatorParamsViewSettings,
   type CreditCalculatorSourceBookParams,
+  type CreditCalculatorUserInputParams,
 } from './CalculatorCreditContent';
 import { getCreditCalculatorParams } from './getCreditCalculatorParams';
 import { isDefaultParams } from './isDefaultParams';
@@ -45,7 +45,7 @@ const MAP = {
 export interface CalculatorDepositProps extends CalculatorCreditContent, UniBlockProps {
   className?: string;
   calcSource?: CreditCalculatorData & JSONRefObject;
-  registerSubmit?: (submit: ((ev: PreventableEvent) => Record<string, any>) | undefined) => void;
+  onChange?: (params: CreditCalculatorUserInputParams) => void;
 }
 
 export const CalculatorCredit = UniBlock<CalculatorDepositProps>(
@@ -57,12 +57,12 @@ export const CalculatorCredit = UniBlock<CalculatorDepositProps>(
     footnote,
     paramsViewSettings,
     defaultParams,
-    registerSubmit,
+    onChange,
     ...rest
   }) => {
     const defaultParamsCals = getDefaultParamsMin(calcSource?.rateRows);
 
-    const [userInputParams, { field, onSubmit }] = useForm({
+    const [userInputParams, { field, isDirty }] = useForm({
       moneyValue: getMoneyDefaultValue(defaultParams, CREDIT_DEFAULT_SUM),
       monthsValue: getMonthsDefaultValue(defaultParams, DEFAULT_MONTHS),
       isAnnuity: Boolean(defaultParams?.isAnnuity),
@@ -72,7 +72,9 @@ export const CalculatorCredit = UniBlock<CalculatorDepositProps>(
       isStateEmployee: Boolean(defaultParams?.isEnableStateEmployee),
     });
 
-    registerSubmit?.(onSubmit);
+    useEffect(() => {
+      isDirty && onChange?.(userInputParams);
+    }, [userInputParams, isDirty]);
 
     const calcParams = getCreditCalculatorParams(userInputParams, calcSource, paramsViewSettings);
     const paymentTypeElement = renderPaymentType({

package/src/components/CalculatorCredit/defaultValueAdapter.ts

@@ -0,0 +1,26 @@
+import {
+  type CreditCalculatorUserInputParams,
+  type CreditDefaultParams,
+} from './CalculatorCreditContent';
+
+export const PARAMS_MAP = {
+  moneyValue: 'sum',
+  monthsValue: 'period',
+  isInsurance: 'isEnableInsurance',
+  isPensionClient: 'isEnablePensionClient',
+  isStateEmployee: 'isEnableStateEmployee',
+  isSalaryClient: 'isEnableSalaryClient',
+  isAnnuity: 'isAnnuity',
+};
+
+export const defaultValueAdapter = (
+  value?: CreditCalculatorUserInputParams,
+  isInverse = false,
+): CreditDefaultParams => {
+  const keysMap = isInverse ? swap(PARAMS_MAP) : PARAMS_MAP;
+
+  return Object.fromEntries(Object.entries(value ?? {}).map(([k, v]) => [keysMap[k], v]));
+};
+
+const swap = (_: Record<string, string>) =>
+  Object.fromEntries(Object.entries(_).map(([k, v]) => [v, k]));

package/src/components/CreditCardForm/CreditCardForm.tsx

@@ -11,9 +11,9 @@ import { stepsSectionsMap } from './creditCardFormStepsData';
 
 interface CreditCardFormWizardProps extends CreditCardFormContent, UniBlockProps {}
 
-const WIZARD_STEPS = 6;
+const STEPS = 6;
 
-const WIZARD_TITLES = [
+const TITLES = [
   'Параметры карты',
   'Персональные данные',
   'Данные о трудоустройстве',
@@ -34,7 +34,7 @@ export const CreditCardForm = JSX<CreditCardFormWizardProps>(({ className, ...re
   useEffect(updateRefreshToken, []);
 
   const handleNextStep = useCallback(() => {
-    setStep((_) => Math.min(_ + 1, WIZARD_STEPS));
+    setStep((_) => Math.min(_ + 1, STEPS));
     scrollToTop();
   }, []);
 
@@ -52,11 +52,7 @@ export const CreditCardForm = JSX<CreditCardFormWizardProps>(({ className, ...re
     <BlockWrapper className={style('bg-transparent', className)} defaultPadding="p-0" {...rest}>
       <div ref={formContainerRef} className="container grid grid-cols-12">
         {isFormFinished ? null : (
-          <CreditCardFormProgress
-            stepsTitles={WIZARD_TITLES}
-            step={step}
-            totalSteps={WIZARD_STEPS}
-          />
+          <CreditCardFormProgress stepsTitles={TITLES} step={step} totalSteps={STEPS} />
         )}
         <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
           <CreditCardFormStep

package/src/components/CreditCardForm/CreditCardFormStatus.tsx

@@ -15,6 +15,7 @@ type CreditCardFormStatusProps = UniBlockProps & {
   title?: string;
   description?: string;
   interval?: number;
+  intervalExpireAction?: () => void;
   sectionInfoTitle?: string;
   sectionInfo?: (LabelProps & DescriptionProps)[];
   sectionAdditionalTitle?: string;
@@ -34,6 +35,9 @@ export const CreditCardFormStatus = JSX<CreditCardFormStatusProps>(
     sectionInfoAdditional,
     buttonText,
     interval,
+    intervalExpireAction = () => {
+      return;
+    },
     ...props
   }) => (
     <BlockWrapper {...props}>
@@ -46,7 +50,9 @@ export const CreditCardFormStatus = JSX<CreditCardFormStatusProps>(
           padding="p-xl"
           className="w-full"
         />
-        {interval ? <TimerCircle interval={interval} /> : null}
+        {interval ? (
+          <TimerCircle interval={interval} intervalExpireAction={intervalExpireAction} />
+        ) : null}
       </div>
       <SectionInfo title={sectionInfoTitle} items={sectionInfo} />
       <SectionInfo title={sectionAdditionalTitle} items={sectionInfoAdditional} countColumns />