@redneckz/wildless-cms-uni-blocks 0.14.884 → 0.14.885

package/mobile/lib/retail/model/LeadFormState.d.ts

@@ -16,7 +16,6 @@ export interface CreditCardFormConsents {
 }
 export interface DebitCardFormConsents {
     processPersonalDataFlg?: boolean;
-    consentProviderFlg?: boolean;
     consentOthersFlg?: boolean;
     consentInformFlg?: boolean;
     consentFATCA?: boolean;

package/mobile/lib/ui-kit/FormField/getObjectValidator.js

@@ -48,7 +48,7 @@ export const getFormValidator = (fieldDefs, externalValidatorObj = {}) => {
 };
 const byNonEmptyValidator = (validator = {}) => ({ name }) => Boolean(validator[name ?? '']);
 const byCondition = (formState) => (fieldDef) => !fieldDef?.condition ||
-    fieldDef.condition.values.find((_) => {
+    fieldDef.condition.values.some((_) => {
         const dependencyValue = formState?.[fieldDef?.condition?.name ?? ''];
         return _ === (dependencyValue?.key ?? dependencyValue);
     });

package/mobile/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -111,7 +111,9 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
         title={title}
         {...rest}
       >
-        {!esiaStatus ? <EsiaLoginBanner onChangeEsiaStatus={setEsiaStatus} /> : null}
+        {!esiaStatus ? (
+          <EsiaLoginBanner onChangeEsiaStatus={setEsiaStatus} productType={productType} />
+        ) : null}
         <form onSubmit={onSubmitWithPrecondition} className="space-y-m relative" ref={leadForm}>
           {esiaStatus === EsiaStatuses.Pending ? <Loader blur={false} /> : null}
           {applicationFormData.map((_, i) => (

package/mobile/src/components/ApplicationLeadForm/EsiaLoginBanner.tsx

@@ -4,13 +4,14 @@ import { locationNavigator } from '../../external/locationNavigator';
 import { getLink } from '../../retail/api/getLink';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
-import { EsiaStatuses } from './ApplicationLeadFormContent';
+import { EsiaStatuses, type ProductType } from './ApplicationLeadFormContent';
 
 export interface EsiaLoginBannerProps {
   onChangeEsiaStatus: (status: EsiaStatuses) => void;
+  productType: ProductType;
 }
 
-export const EsiaLoginBanner = JSX<EsiaLoginBannerProps>(({ onChangeEsiaStatus }) => {
+export const EsiaLoginBanner = JSX<EsiaLoginBannerProps>(({ onChangeEsiaStatus, productType }) => {
   const navigator = locationNavigator();
 
   const handleAuth = useCallback(async () => {
@@ -28,16 +29,20 @@ export const EsiaLoginBanner = JSX<EsiaLoginBannerProps>(({ onChangeEsiaStatus }
   }, []);
 
   return (
-    <div className="flex gap-lg items-center rounded-md bg-main-gray p-4xl">
-      <div className="flex flex-col justify-around w-full">
-        <p className="mb-m text-xl">Заполните данные через Госуслуги</p>
-        <ul className="list-disc list-inside mb-4xl">
-          <li>Вероятность одобрения выше</li>
-          <li>Без справок о доходах и трудоустройстве</li>
-          <li>С защитой Ваших данных</li>
-        </ul>
+    <div className="flex items-center rounded-md bg-main-gray p-4xl">
+      <div className="flex gap-m flex-col justify-around w-full">
+        <p className="text-xl">{`Заполните данные через Госуслуги${
+          productType === 'debitCard' ? ' - это значительно сократит время оформления заявки' : ''
+        }`}</p>
+        {productType === 'debitCard' ? null : (
+          <ul className="list-disc list-inside">
+            <li>Вероятность одобрения выше</li>
+            <li>Без справок о доходах и трудоустройстве</li>
+            <li>С защитой Ваших данных</li>
+          </ul>
+        )}
         <Img
-          className="block mb-xl self-center @md:hidden"
+          className="block self-center @md:hidden"
           image={{ icon: 'GosUslugiIcon', iconVersion: 'normal' }}
           height="80"
           width="80"

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

@@ -64,10 +64,6 @@ const DEBIT_CARD_CONSENTS: Record<keyof DebitCardFormConsents, ConsentData> = {
     text: 'Согласие на информирование о продуктах и услугах Банка',
     docId: 14,
   },
-  consentProviderFlg: {
-    text: 'Согласие об использовании простой электронной подписи',
-    docId: 5,
-  },
   consentOthersFlg: {
     text: 'Прочие согласия',
     docId: 20,

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

@@ -41,7 +41,12 @@ export const DebitForm = UniBlock<DebitFormProps>(({ className, ...rest }) => {
   const sections = stepsSectionsMap[step];
   const isStartStep = step === 0;
 
-  const [isFormFinished, { setTrue: handleFinish }] = useBool(false);
+  const [isFormFinished, { setTrue: setIsFormFinished }] = useBool(false);
+
+  const handleFinish = useCallback(() => {
+    setIsFormFinished();
+    scrollToTop();
+  }, []);
 
   return (
     <BlockWrapper className={className} {...rest}>

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

@@ -1,6 +1,109 @@
-import { DELIVERY_CARD_CONTENT, PERSONAL_DATA } from '../../retail/content';
+/* eslint-disable max-lines */
+import { PERSONAL_DATA } from '../../retail/content';
 import { type SectionsRetailProps } from '../../retail/model/InputSectionsType';
 
+export const DELIVERY_DEBIT_CARD_CONTENT: SectionsRetailProps[] = [
+  {
+    title: 'Регион обслуживания карты',
+    columns: 1,
+    inputs: [],
+  },
+  {
+    inputs: [
+      {
+        name: 'regionRetail',
+        required: true,
+      },
+    ],
+  },
+  {
+    title: 'Способ получения',
+    columns: 1,
+    inputs: [],
+    condition: {
+      name: 'regionHasDelivery',
+      values: [true],
+    },
+  },
+  {
+    inputs: [
+      {
+        name: 'methodObtain',
+        condition: {
+          name: 'regionHasDelivery',
+          values: [true],
+        },
+      },
+    ],
+  },
+  {
+    title: 'Выбор офиса',
+    columns: 1,
+    inputs: [],
+    condition: {
+      name: 'methodObtain',
+      values: ['office'],
+    },
+  },
+  {
+    title: 'Адрес доставки',
+    columns: 1,
+    inputs: [],
+    condition: {
+      name: 'methodObtain',
+      values: ['courier'],
+    },
+  },
+  {
+    inputs: [
+      {
+        name: 'addressCourier',
+        dadata: true,
+        condition: {
+          name: 'methodObtain',
+          values: ['courier'],
+        },
+        required: true,
+      },
+    ],
+  },
+  {
+    inputs: [
+      {
+        name: 'infoCard',
+        condition: {
+          name: 'methodObtain',
+          values: ['courier'],
+        },
+        label: 'Ожидайте звонка для согласования даты и времени доставки карты',
+      },
+    ],
+  },
+  {
+    inputs: [
+      {
+        name: 'comment',
+        condition: {
+          name: 'methodObtain',
+          values: ['courier'],
+        },
+      },
+    ],
+  },
+  {
+    inputs: [
+      {
+        name: 'addressRetail',
+        required: true,
+        condition: {
+          name: 'methodObtain',
+          values: ['office'],
+        },
+      },
+    ],
+  },
+];
+
 const DEBIT_PERSONAL_INFO_CONTENT: SectionsRetailProps[] = [
   ...PERSONAL_DATA,
   {
@@ -22,9 +125,23 @@ const DEBIT_PERSONAL_INFO_CONTENT: SectionsRetailProps[] = [
   {
     title: 'Адрес фактического проживания (место пребывания РФ)',
     inputs: [],
+    condition: {
+      name: 'addressMatch',
+      values: [false],
+    },
   },
   {
-    inputs: [{ name: 'addressFact', required: true, dadata: true }],
+    inputs: [
+      {
+        name: 'addressFact',
+        required: true,
+        dadata: true,
+        condition: {
+          name: 'addressMatch',
+          values: [false],
+        },
+      },
+    ],
   },
 ];
 const DEBIT_CARD_CONTENT: SectionsRetailProps[] = [
@@ -55,6 +172,9 @@ const DEBIT_CARD_CONTENT: SectionsRetailProps[] = [
       },
     ],
   },
+  {
+    inputs: [{ name: 'codeWord', required: true }],
+  },
   {
     inputs: [
       {
@@ -65,13 +185,10 @@ const DEBIT_CARD_CONTENT: SectionsRetailProps[] = [
       },
     ],
   },
-  {
-    inputs: [{ name: 'codeWord', required: true }],
-  },
 ];
 
 export const stepsSectionsMap: SectionsRetailProps[][] = [
-  DELIVERY_CARD_CONTENT,
+  DELIVERY_DEBIT_CARD_CONTENT,
   DEBIT_PERSONAL_INFO_CONTENT,
   DEBIT_CARD_CONTENT,
 ];

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

@@ -30,6 +30,7 @@ export const formStateMap: Partial<LeadFormState>[] = [
       fullAddress: '',
       fiasCode: '',
     },
+    addressMatch: true,
     addressFact: {
       fullAddress: '',
       fiasCode: '',

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

@@ -7,4 +7,6 @@ export const debitProgrammIdToCardCodesMap = {
   42: 'eco_debit_card',
   43: 'junior_debit_card',
   44: 'appetit_debit_card',
+  46: 'owner_debit_card_plus',
+  47: 'owner_debit_card_pens_plus',
 };

package/mobile/src/retail/adaptors/getPersonalInfoData.tsx

@@ -48,7 +48,10 @@ export const getPersonalInfoData = (formData: LeadFormState): Partial<Participan
       phone: formatPhone(phone),
       email,
     }),
-    participantAddresses: getParticipantAddresses({ addressRegistration, addressFact }),
+    participantAddresses: getParticipantAddresses({
+      addressRegistration,
+      addressFact: addressMatch ? addressRegistration : addressFact,
+    }),
     genderCd: sex
       ? {
           key: sex === 'male' ? 'MAN' : 'WOMAN',

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

@@ -8,9 +8,10 @@ import { formatDate } from '../../../utils/formatDate';
 import { noop } from '../../../utils/noop';
 import { type Task } from '../../api/draftTasksKZO';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
+import { creditCodesToProgrammIdMap, creditProgramCodeToProductIdMap } from './creditProgramCodes';
 import { DraftActionButton } from './DraftActionButton';
 import { parseDraftTask } from './parseDraftTask';
-import { creditCodesToProgrammIdMap, creditProgramCodeToProductIdMap } from './utils';
+import { getProductData } from './utils';
 
 export interface DraftDialogProps extends OnCloseProps {
   task: Task;
@@ -33,15 +34,7 @@ export const DraftDialog = JSX<DraftDialogProps>(function ({
 
   const programmId: string = creditProgramCodeToProductIdMap[creditProgram.code];
   const isCredit = Boolean(creditCodesToProgrammIdMap[creditProgram.code]);
-  const getNextStepLink = () => {
-    if (isDebit) {
-      return '/debit-card-lead';
-    } else if (isCredit) {
-      return '/credit-lead';
-    }
-
-    return '/credit-card-lead';
-  };
+  const productData = getProductData(isDebit, isCredit);
 
   const { id: participantId, profile } = participants[0];
 
@@ -56,11 +49,11 @@ export const DraftDialog = JSX<DraftDialogProps>(function ({
     if (profile?.id) {
       sendAspects(profile.id, taskId);
     }
-    navigator.assign(getNextStepLink());
+    navigator.assign(productData.nextStepLink);
   }, []);
 
   const handleGoToNewTask = useCallback(() => {
-    navigator.assign(isCredit ? '/natural/loans/all-goals' : '/natural/creditcards/svoya');
+    navigator.assign(productData.newTaskLink);
   }, []);
 
   return (
@@ -81,7 +74,7 @@ export const DraftDialog = JSX<DraftDialogProps>(function ({
           <DraftActionButton
             title={isFromLead ? 'Продолжить заполнение текущей заявки' : 'Создать новую заявку'}
             icon="NewLoanIcon"
-            description="На получение кредита"
+            description={productData.description}
             onClick={isFromLead ? onClose : handleGoToNewTask}
           />
         </div>

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

@@ -7,12 +7,18 @@ import { Dialog } from '../../../ui-kit/DialogManager/Dialog';
 import { Heading } from '../../../ui-kit/Heading/Heading';
 import { Paragraph } from '../../../ui-kit/Paragraph/Paragraph';
 import { noop } from '../../../utils/noop';
+import { getProductData } from './utils';
 
-export const EmptyDraftDialog = JSX<OnCloseProps>(function ({ onClose = noop }) {
+export interface EmptyDraftDialogProps extends OnCloseProps {
+  isDebit?: boolean;
+}
+
+export const EmptyDraftDialog = JSX<EmptyDraftDialogProps>(function ({ isDebit, onClose = noop }) {
   const navigator = locationNavigator();
+  const productData = getProductData(isDebit);
 
   const handleGoNewTask = useCallback(() => {
-    navigator.assign('/natural/loans/all-goals');
+    navigator.assign(productData.newTaskLink);
   }, []);
 
   const handleGoMainPage = useCallback(() => {

package/mobile/src/retail/components/DraftDialog/creditProgramCodes.ts

@@ -0,0 +1,40 @@
+/* eslint-disable camelcase */
+
+export const creditCodesToProgrammIdMap = {
+  credit_cash: '10',
+  credit_cash_single_doc: '28',
+  credit_mcx: '39',
+  family_offer_credit: '41',
+  gas_engine_fuel: '33',
+  pension_credit: '12',
+  ref_credit: '11',
+  ref_credit_single_doc: '29',
+  self_employed: '34',
+  summer_cash: '35',
+  summer_cash_pens: '36',
+};
+
+const debitCardCodesToProgrammIdMap = {
+  amur_debit_card: '17',
+  owner_debit_card: '16',
+  pension_debit_card: '18',
+  salary_debit_card: '38',
+  vordi_debit_card: '40',
+  eco_debit_card: '42',
+  junior_debit_card: '43',
+  appetit_debit_card: '44',
+  owner_debit_card_plus: '46',
+  owner_debit_card_pens_plus: '47',
+};
+
+const cardCodesToProgrammIdMap = {
+  amur_card: '14',
+  owner_card: '13',
+  travel_card: '15',
+};
+
+export const creditProgramCodeToProductIdMap = {
+  ...creditCodesToProgrammIdMap,
+  ...cardCodesToProgrammIdMap,
+  ...debitCardCodesToProgrammIdMap,
+};

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

@@ -10,7 +10,7 @@ export const useDraftDialog = () => {
     open: ({ task, isFromLead, isDebit, onClose, sendAspects }: Partial<DraftDialogProps>) => {
       task
         ? openDraftDialog({ task, isFromLead, isDebit, onClose, sendAspects })
-        : openEmptyDraftDialog({});
+        : openEmptyDraftDialog({ isDebit });
     },
   };
 };

package/mobile/src/retail/components/DraftDialog/utils.ts

@@ -1,5 +1,3 @@
-/* eslint-disable camelcase */
-
 import { type Option } from '../../../ui-kit/Select/Option';
 import { countIncomeAverage } from '../../adaptors/getFamilyStatusAndIncomeData';
 import { type Participant } from '../../api/updateUserTask';
@@ -43,31 +41,6 @@ export const INCOME_CERTIFICATE = {
   OTHER: 'Другое',
 };
 
-export const creditCodesToProgrammIdMap = {
-  credit_cash: '10',
-  credit_cash_single_doc: '28',
-  credit_mcx: '39',
-  family_offer_credit: '41',
-  gas_engine_fuel: '33',
-  pension_credit: '12',
-  ref_credit: '11',
-  ref_credit_single_doc: '29',
-  self_employed: '34',
-  summer_cash: '35',
-  summer_cash_pens: '36',
-};
-
-export const cardCodesToProgrammIdMap = {
-  amur_card: '14',
-  owner_card: '13',
-  travel_card: '15',
-};
-
-export const creditProgramCodeToProductIdMap = {
-  ...creditCodesToProgrammIdMap,
-  ...cardCodesToProgrammIdMap,
-};
-
 export const getParticipantIncomes = (participantIncomes: Participant['participantIncomes']) => {
   const wages = participantIncomes?.find(
     (contact) => contact.incomeTypeCd.key === EIncomesType.WAGES,
@@ -161,3 +134,25 @@ export const getSelectValue = (
       }
     : undefined;
 };
+
+export const getProductData = (isDebit = false, isCredit = false) => {
+  if (isDebit) {
+    return {
+      nextStepLink: '/debit-card-lead',
+      newTaskLink: '/natural/debetcards',
+      description: 'На дебетовую карту',
+    };
+  } else if (isCredit) {
+    return {
+      nextStepLink: '/credit-lead',
+      newTaskLink: '/natural/loans/all-goals',
+      description: 'На получение кредита',
+    };
+  }
+
+  return {
+    nextStepLink: '/credit-card-lead',
+    newTaskLink: '/natural/creditcards/svoya',
+    description: 'На получение кредитной карты',
+  };
+};

package/mobile/src/retail/components/Fields/CardCategoryField.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLocalStorage } from '../../../hooks/useLocalStorage';
 import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProps';
 import { InfoCard } from '../../../ui-kit/InfoCard/InfoCard';
@@ -13,6 +13,17 @@ export const CardCategoryField = JSX<CustomFieldProps>(({ field, input }) => {
   const { value: selectedCardCategory, onChange: cardCategoryChange } = field('cardCategory');
   const selectedPaymentSystem = field('paymentSystem')?.value?.key;
 
+  const getCardCategoryValue = useCallback(
+    (fetchedCardTypes: CardTypeData[]) =>
+      fetchedCardTypes.length === 1
+        ? {
+            key: fetchedCardTypes[0].key,
+            text: fetchedCardTypes[0].value,
+          }
+        : null,
+    [],
+  );
+
   useEffect(() => {
     if (selectedPaymentSystem && programId) {
       (async () => {
@@ -20,11 +31,11 @@ export const CardCategoryField = JSX<CustomFieldProps>(({ field, input }) => {
         setCardTypes(fetchedCardTypes);
 
         if (!isValidCardCategory(fetchedCardTypes, selectedCardCategory as Option)) {
-          cardCategoryChange && cardCategoryChange(null);
+          cardCategoryChange?.(getCardCategoryValue(fetchedCardTypes));
         }
       })();
     }
-  }, [selectedPaymentSystem]);
+  }, [selectedPaymentSystem, getCardCategoryValue]);
 
   const description = useMemo(
     () => cardTypes?.find((_) => _.key === selectedCardCategory?.key)?.description,

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

@@ -20,7 +20,6 @@ export interface CreditCardFormConsents {
 
 export interface DebitCardFormConsents {
   processPersonalDataFlg?: boolean;
-  consentProviderFlg?: boolean;
   consentOthersFlg?: boolean;
   consentInformFlg?: boolean;
   consentFATCA?: boolean;

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

@@ -80,7 +80,7 @@ const byCondition =
   <FormState extends Record<string, any>>(formState: FormState) =>
   (fieldDef: BaseFieldDef) =>
     !fieldDef?.condition ||
-    fieldDef.condition.values.find((_) => {
+    fieldDef.condition.values.some((_) => {
       const dependencyValue = formState?.[fieldDef?.condition?.name ?? ''];
 
       return _ === (dependencyValue?.key ?? dependencyValue);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.884",
+  "version": "0.14.885",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -111,7 +111,9 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
         title={title}
         {...rest}
       >
-        {!esiaStatus ? <EsiaLoginBanner onChangeEsiaStatus={setEsiaStatus} /> : null}
+        {!esiaStatus ? (
+          <EsiaLoginBanner onChangeEsiaStatus={setEsiaStatus} productType={productType} />
+        ) : null}
         <form onSubmit={onSubmitWithPrecondition} className="space-y-m relative" ref={leadForm}>
           {esiaStatus === EsiaStatuses.Pending ? <Loader blur={false} /> : null}
           {applicationFormData.map((_, i) => (

package/src/components/ApplicationLeadForm/EsiaLoginBanner.tsx

@@ -4,13 +4,14 @@ import { locationNavigator } from '../../external/locationNavigator';
 import { getLink } from '../../retail/api/getLink';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
-import { EsiaStatuses } from './ApplicationLeadFormContent';
+import { EsiaStatuses, type ProductType } from './ApplicationLeadFormContent';
 
 export interface EsiaLoginBannerProps {
   onChangeEsiaStatus: (status: EsiaStatuses) => void;
+  productType: ProductType;
 }
 
-export const EsiaLoginBanner = JSX<EsiaLoginBannerProps>(({ onChangeEsiaStatus }) => {
+export const EsiaLoginBanner = JSX<EsiaLoginBannerProps>(({ onChangeEsiaStatus, productType }) => {
   const navigator = locationNavigator();
 
   const handleAuth = useCallback(async () => {
@@ -28,16 +29,20 @@ export const EsiaLoginBanner = JSX<EsiaLoginBannerProps>(({ onChangeEsiaStatus }
   }, []);
 
   return (
-    <div className="flex gap-lg items-center rounded-md bg-main-gray p-4xl">
-      <div className="flex flex-col justify-around w-full">
-        <p className="mb-m text-xl">Заполните данные через Госуслуги</p>
-        <ul className="list-disc list-inside mb-4xl">
-          <li>Вероятность одобрения выше</li>
-          <li>Без справок о доходах и трудоустройстве</li>
-          <li>С защитой Ваших данных</li>
-        </ul>
+    <div className="flex items-center rounded-md bg-main-gray p-4xl">
+      <div className="flex gap-m flex-col justify-around w-full">
+        <p className="text-xl">{`Заполните данные через Госуслуги${
+          productType === 'debitCard' ? ' - это значительно сократит время оформления заявки' : ''
+        }`}</p>
+        {productType === 'debitCard' ? null : (
+          <ul className="list-disc list-inside">
+            <li>Вероятность одобрения выше</li>
+            <li>Без справок о доходах и трудоустройстве</li>
+            <li>С защитой Ваших данных</li>
+          </ul>
+        )}
         <Img
-          className="block mb-xl self-center @md:hidden"
+          className="block self-center @md:hidden"
           image={{ icon: 'GosUslugiIcon', iconVersion: 'normal' }}
           height="80"
           width="80"

package/src/components/ApplicationLeadForm/consents.ts

@@ -64,10 +64,6 @@ const DEBIT_CARD_CONSENTS: Record<keyof DebitCardFormConsents, ConsentData> = {
     text: 'Согласие на информирование о продуктах и услугах Банка',
     docId: 14,
   },
-  consentProviderFlg: {
-    text: 'Согласие об использовании простой электронной подписи',
-    docId: 5,
-  },
   consentOthersFlg: {
     text: 'Прочие согласия',
     docId: 20,

package/src/components/DebitForm/DebitForm.tsx

@@ -41,7 +41,12 @@ export const DebitForm = UniBlock<DebitFormProps>(({ className, ...rest }) => {
   const sections = stepsSectionsMap[step];
   const isStartStep = step === 0;
 
-  const [isFormFinished, { setTrue: handleFinish }] = useBool(false);
+  const [isFormFinished, { setTrue: setIsFormFinished }] = useBool(false);
+
+  const handleFinish = useCallback(() => {
+    setIsFormFinished();
+    scrollToTop();
+  }, []);
 
   return (
     <BlockWrapper className={className} {...rest}>