@redneckz/wildless-cms-uni-blocks 0.14.878 → 0.14.880

package/mobile/bundle/bundle.umd.js

@@ -1394,7 +1394,7 @@
         }, [isDisabled]);
         const handleChangeQuery = (newQuery) => {
             setQuery(newQuery);
-            setOption(newQuery, onChange);
+            isManualInput && setOption(newQuery, onChange);
             debouncedOnSearchQuery && debouncedOnSearchQuery(newQuery);
         };
         const handleClose = useCallback(() => {
@@ -2462,7 +2462,7 @@
 
     const CloseButton = JSX(({ className, onClose }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-2xs bg-transparent border-none', className), onClick: onClose, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", type: "button", children: jsx(Icon, { name: "CloseIcon", width: "20", height: "20", iconVersion: "gray" }) })));
 
-    const Dialog = JSX(({ className, head, children, onClose, onClick }) => (jsxs("div", { className: style('relative bg-white pt-0 p-lg', className), role: "dialog", title: "\u0414\u0438\u0430\u043B\u043E\u0433", onClick: onClick, children: [jsxs("div", { className: "sticky py-xl top-0 bg-white z-10", children: [jsx(CloseButton, { className: "absolute top-0 right-0", onClose: onClose }), jsx("div", { className: "container", children: head })] }), jsx("div", { className: "container pb-6xl", children: children })] })));
+    const Dialog = JSX(({ className, head, children, onClose, onClick }) => (jsxs("div", { className: style('relative bg-white pt-0 p-lg', className), role: "dialog", title: "\u0414\u0438\u0430\u043B\u043E\u0433", onClick: onClick, children: [jsxs("div", { className: "sticky py-xl top-0 bg-white z-10", children: [jsx(CloseButton, { className: "absolute top-0 right-0", onClose: onClose }), jsx("div", { className: "container", children: head })] }), jsx("div", { className: "container pb-m mb-[74px] lg:mb-0", children: children })] })));
 
     const ResponseTypeDialog = JSX(({ ok, typeForm, onClose }) => {
         const statusIcon = ok ? 'ResponseOKIcon' : 'ResponseFailIcon';
@@ -2550,7 +2550,7 @@
 
     const Loader = JSX(({ color = 'text-primary-main', position = 'absolute', blur = true, size = 'big' }) => (jsx("div", { className: style('flex justify-center items-center h-full w-full z-50', position, {
             'backdrop-blur': blur,
-        }), children: jsx("div", { className: style('inline-block', 'animate-spin rounded-full', 'border-solid border-current', 'border-r-transparent', size === 'small' ? 'border-4 h-8 w-8' : 'border-8 h-28 w-28', color), role: "status" }) })));
+        }), children: jsx("div", { className: style('inline-block', 'animate-spin rounded-full', 'border-solid border-current', 'border-r-transparent', size === 'extraSmall' && 'border-2 h-4 w-4', size === 'small' && 'border-4 h-8 w-8', size === 'big' && 'border-8 h-28 w-28', color), role: "status" }) })));
 
     const SubmitButton$1 = JSX(({ isLoading, disabled, children, className, ...rest }) => (jsxs(Button, { type: "submit", className: style('relative', className), disabled: isLoading || disabled, ...rest, children: [isLoading ? jsx(Loader, { blur: true, size: "small" }) : null, children] })));
 
@@ -4103,26 +4103,33 @@
 
     const DocumentDialog = JSX(({ src, onClose, onDocumentRead }) => {
         const isMobileMode = useMobileMode();
-        return (jsxs(Dialog, { className: "my-6xl max-w-4xl mx-auto px-0 min-h-0 pb-0 z-[101]", onClose: onClose, children: [isMobileMode ? (jsx("img", { src: src })) : (jsx("iframe", { src: `${src}#toolbar=0`, className: "w-full h-[80vh]", id: "iframe-dialog" })), jsx(Button, { className: "mx-auto mt-m", type: "button", onClick: () => {
+        return (jsxs(Dialog, { className: "mt-xl max-w-4xl mx-auto px-0 min-h-0 pb-0", onClose: onClose, children: [isMobileMode ? (jsx("img", { src: src })) : (jsx("iframe", { src: `${src}#toolbar=0`, className: "w-full h-[80vh]", id: "iframe-dialog" })), jsx(Button, { className: "mx-auto mt-m", type: "button", onClick: () => {
                         onDocumentRead?.();
                         onClose?.();
                     }, children: "\u041E\u0437\u043D\u0430\u043A\u043E\u043C\u0438\u0442\u044C\u0441\u044F" })] }));
     });
 
     const useDocumentDialog = (docId, onDocumentRead) => {
+        const [isLoading, { setTrue: startLoading, setFalse: endLoading }] = useBool(false);
         const { open } = useDialog(DocumentDialog);
         const isMobileMode = useMobileMode();
-        return useCallback(async () => {
-            if (docId) {
+        const openDocument = useCallback(async () => {
+            if (docId && !isLoading) {
+                startLoading();
                 const src = URL.createObjectURL(await feedbackById(docId, isMobileMode));
                 open({ src, onDocumentRead });
+                endLoading();
             }
-        }, [open, docId, isMobileMode]);
+        }, [open, docId, isMobileMode, isLoading]);
+        return {
+            openDocument,
+            isLoading,
+        };
     };
 
     const CheckboxWithDoc = JSX(({ className, error, docId, ...props }) => {
-        const openDocument = useDocumentDialog(docId, () => props.onChange?.(true));
-        return (jsxs("div", { className: className, children: [jsxs("div", { className: "flex flex-wrap gap-x-m", children: [jsx(Checkbox, { ...props }), docId ? (jsx(Button, { embedded: true, onClick: openDocument, children: jsx(ButtonTitle, { children: "\u041E\u0437\u043D\u0430\u043A\u043E\u043C\u0438\u0442\u044C\u0441\u044F" }) })) : null] }), renderErrorText(error)] }));
+        const { openDocument, isLoading } = useDocumentDialog(docId, () => props.onChange?.(true));
+        return (jsxs("div", { className: className, children: [jsxs("div", { className: "flex flex-wrap gap-x-m", children: [jsx(Checkbox, { ...props }), docId ? (jsxs(Button, { embedded: true, onClick: openDocument, children: [jsx(ButtonTitle, { children: "\u041E\u0437\u043D\u0430\u043A\u043E\u043C\u0438\u0442\u044C\u0441\u044F" }), isLoading ? jsx(Loader, { blur: false, size: "extraSmall", position: "static" }) : null] })) : null] }), renderErrorText(error)] }));
     });
 
     const ConsentField = JSX(({ field, input }) => {
@@ -5917,9 +5924,7 @@
                         }),
                     },
                 ],
-                marketingInfo: {
-                    bannerId: marketingInfo?.bannerId,
-                },
+                marketingInfo,
             },
         };
     };
@@ -6145,10 +6150,7 @@
         }
     }, [target, key]);
 
-    const esiaRequestProfile = (body) => fetchRetailJSON('/esia/requestProfile', 'POST', body).then((res) => {
-        saveToken(res);
-        return res;
-    });
+    const esiaRequestProfile = (body) => fetchRetailJSON('/esia/requestProfile', 'POST', body);
 
     const initialFormState = {
         surname: '',
@@ -6366,7 +6368,7 @@
                     code,
                     state,
                     redirectUri: globalThis.location?.href,
-                    authorize: true,
+                    authorize: false,
                 });
                 if (data) {
                     const parsedData = await parseEsiaProfile(data, productType === 'debitCard');
@@ -6420,6 +6422,7 @@
                 utm_content: queryStorage.get('utm_content'),
                 utm_term: queryStorage.get('utm_term'),
                 bannerId: queryStorage.get('bannerId'),
+                userId: queryStorage.get('userId'),
             };
         return {
             code,
@@ -7909,19 +7912,19 @@
                             } }), jsx("div", { className: "z-10 flex items-center justify-center w-20 h-20 rounded-full bg-white text-primary-text text-m", children: jsx(Timer, { seconds: time }) })] })] }));
     });
 
-    const FormStatus = JSX(({ title, description: dsc, sectionInfoTitle, sectionInfo, sectionAdditionalTitle, sectionInfoAdditional, buttonText, interval, onExpire = noop, ...props }) => (jsxs(BlockWrapper, { ...props, children: [jsxs("div", { className: "flex flex-col md:flex-row items-center", children: [jsx(Headline, { headlineVersion: "M", title: title, description: dsc, align: "text-left", padding: "p-xl", className: "w-full" }), interval ? jsx(TimerCircle, { interval: interval, onEnd: onExpire }) : null] }), jsx(SectionInfo, { title: sectionInfoTitle, items: sectionInfo }), jsx(SectionInfo, { title: sectionAdditionalTitle, items: sectionInfoAdditional, countColumns: true }), buttonText ? (jsx(Link, { href: "/natural", text: buttonText, version: "primary", className: "w-full mt-lg" })) : null] })));
-    const SectionInfo = ({ title, items, countColumns = false, }) => {
+    const FormStatus = JSX(({ title, description: dsc, sectionInfoTitle, sectionInfo, sectionAdditionalTitle, sectionInfoAdditional, buttonText, interval, onExpire = noop, ...props }) => (jsxs(BlockWrapper, { ...props, children: [jsxs("div", { className: "flex flex-col md:flex-row items-center", children: [jsx(Headline, { headlineVersion: "M", title: title, description: dsc, align: "text-left", padding: "p-xl", className: "w-full" }), interval ? jsx(TimerCircle, { interval: interval, onEnd: onExpire }) : null] }), jsx(SectionInfo$1, { title: sectionInfoTitle, items: sectionInfo }), jsx(SectionInfo$1, { title: sectionAdditionalTitle, items: sectionInfoAdditional, countColumns: true }), buttonText ? (jsx(Link, { href: "/natural", text: buttonText, version: "primary", className: "w-full mt-lg" })) : null] })));
+    const SectionInfo$1 = ({ title, items, countColumns = false, }) => {
         const isMobile = useMobileMode();
         if (!items) {
             return null;
         }
-        return (jsxs("div", { children: [jsx("hr", { className: "w-full h-px bg-main-gray border-0" }), jsxs("div", { className: "p-xl", children: [title ? (jsx(Text, { color: "text-primary-text", size: "text-h5", children: jsx("div", { className: style({ 'mb-m': Boolean(title) }), children: title }) })) : null, items ? (jsx("div", { className: style('grid grid-cols-1 gap-m', inputColumnStyles(countColumns || isMobile ? 1 : 2)), children: items.map((item, index) => (jsx("div", { children: renderItem$1(item) }, index))) })) : null] })] }));
+        return (jsxs("div", { children: [jsx("hr", { className: "w-full h-px bg-main-gray border-0" }), jsxs("div", { className: "p-xl", children: [title ? (jsx(Text, { color: "text-primary-text", size: "text-h5", children: jsx("div", { className: style({ 'mb-m': Boolean(title) }), children: title }) })) : null, items ? (jsx("div", { className: style('grid grid-cols-1 gap-m', inputColumnStyles(countColumns || isMobile ? 1 : 2)), children: items.map((item, index) => (jsx("div", { children: renderItem$2(item) }, index))) })) : null] })] }));
     };
-    const renderItem$1 = ({ label, description }) => (jsxs("div", { className: "flex flex-col", children: [jsx(Text, { color: "text-secondary-text", size: "text-l", children: label }), jsx(Text, { color: "text-primary-text", size: "text-xl", children: description })] }));
+    const renderItem$2 = ({ label, description }) => (jsxs("div", { className: "flex flex-col", children: [jsx(Text, { color: "text-secondary-text", size: "text-l", children: label }), jsx(Text, { color: "text-primary-text", size: "text-xl", children: description })] }));
 
-    const FailedStatusContent$1 = JSX(() => (jsx(FormStatus, { title: "\u0411\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u0438\u043C \u0412\u0430\u0441 \u0437\u0430 \u043E\u0436\u0438\u0434\u0430\u043D\u0438\u0435", description: "\u0412 \u043D\u0430\u0441\u0442\u043E\u044F\u0449\u0438\u0439 \u043C\u043E\u043C\u0435\u043D\u0442 \u0411\u0430\u043D\u043A \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u043E\u0434\u043E\u0431\u0440\u0438\u0442\u044C \u0412\u0430\u0448\u0443 \u0437\u0430\u044F\u0432\u043A\u0443 \u043D\u0430 \u043A\u0440\u0435\u0434\u0438\u0442. \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043F\u043E\u0434\u0430\u0442\u044C \u0437\u0430\u044F\u0432\u043A\u0443 \u043F\u043E\u0437\u0436\u0435. \u0421\u043F\u0430\u0441\u0438\u0431\u043E \u0437\u0430 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435 \u0432 \u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB.", buttonText: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430 \u0433\u043B\u0430\u0432\u043D\u0443\u044E" })));
+    const FailedStatusContent$2 = JSX(() => (jsx(FormStatus, { title: "\u0411\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u0438\u043C \u0412\u0430\u0441 \u0437\u0430 \u043E\u0436\u0438\u0434\u0430\u043D\u0438\u0435", description: "\u0412 \u043D\u0430\u0441\u0442\u043E\u044F\u0449\u0438\u0439 \u043C\u043E\u043C\u0435\u043D\u0442 \u0411\u0430\u043D\u043A \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u043E\u0434\u043E\u0431\u0440\u0438\u0442\u044C \u0412\u0430\u0448\u0443 \u0437\u0430\u044F\u0432\u043A\u0443 \u043D\u0430 \u043A\u0440\u0435\u0434\u0438\u0442. \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043F\u043E\u0434\u0430\u0442\u044C \u0437\u0430\u044F\u0432\u043A\u0443 \u043F\u043E\u0437\u0436\u0435. \u0421\u043F\u0430\u0441\u0438\u0431\u043E \u0437\u0430 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435 \u0432 \u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB.", buttonText: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430 \u0433\u043B\u0430\u0432\u043D\u0443\u044E" })));
 
-    const PendingStatusContent$1 = JSX(({ onExpire }) => {
+    const PendingStatusContent$2 = JSX(({ onExpire }) => {
         const { statusInfo } = useRetailFormStore();
         return (jsx(FormStatus, { interval: 300, title: "\u0417\u0430\u044F\u0432\u043A\u0430 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0430", description: "\u041D\u0435 \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0439\u0442\u0435 \u043E\u043A\u043D\u043E, \u0441\u043A\u043E\u0440\u043E \u0441\u043E\u043E\u0431\u0449\u0438\u043C \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442", sectionInfoTitle: "\u0417\u0430\u044F\u0432\u043B\u0435\u043D\u043D\u044B\u0435 \u0443\u0441\u043B\u043E\u0432\u0438\u044F \u043F\u043E \u043A\u0440\u0435\u0434\u0438\u0442\u0443", sectionInfo: [
                 {
@@ -8017,14 +8020,14 @@
         }, [taskId]);
         useInterval(trackStatus, 30000);
         const handleExpire = useCallback(() => setStatus(STATUS_TYPE.rework), []);
-        return renderStatus$1(status, handleExpire);
+        return renderStatus$2(status, handleExpire);
     });
-    const renderStatus$1 = (status, handleExpire) => {
+    const renderStatus$2 = (status, handleExpire) => {
         const statusesMap = {
-            IN_PROCESS: jsx(PendingStatusContent$1, { onExpire: handleExpire }),
-            CANCELLED: jsx(FailedStatusContent$1, {}),
-            FAILED: jsx(FailedStatusContent$1, {}),
-            DRAFT: jsx(FailedStatusContent$1, {}),
+            IN_PROCESS: jsx(PendingStatusContent$2, { onExpire: handleExpire }),
+            CANCELLED: jsx(FailedStatusContent$2, {}),
+            FAILED: jsx(FailedStatusContent$2, {}),
+            DRAFT: jsx(FailedStatusContent$2, {}),
             APPROVED: jsx(SuccessStatusCardContent, {}),
             PRE_DECISION: jsx(SuccessStatusCardContent, {}),
             REVISION: jsx(ReworkStatusContent$1, {}),
@@ -8085,7 +8088,7 @@
         participantDateRegistration: dateRegistrationValidator(formState.limitedBirthday),
     })(formState);
 
-    const StepsNavigationButtons$1 = JSX(({ step, isSending, onPrevStep }) => {
+    const StepsNavigationButtons$2 = JSX(({ step, isSending, onPrevStep }) => {
         const isFirstStep = step === 0;
         const isFinalStep = step === 5;
         return (jsxs("div", { className: "flex justify-between gap-m", children: [jsx(Button, { version: "secondary", disabled: isFirstStep, onClick: onPrevStep, children: "\u041D\u0430\u0437\u0430\u0434" }), jsx(SubmitButton$1, { isLoading: isSending, children: isFinalStep ? 'Отправить заявку' : 'Далее' })] }));
@@ -8176,7 +8179,7 @@
         },
     ];
 
-    const formStateMap$1 = [
+    const formStateMap$2 = [
         {
             paymentSystem: { key: '', text: '' },
             currency: '810',
@@ -8280,7 +8283,7 @@
         return new Date(date).toISOString().split('.')[0];
     };
 
-    const getDeliveryData = (formData) => {
+    const getDeliveryData$1 = (formData) => {
         const { methodObtain, deliveryDate = '', deliveryTime } = formData;
         const isCourierDelivery = methodObtain === 'courier';
         const deliveryTimeCd = deliveryTime ? { deliveryTimeCd: { key: deliveryTime } } : {};
@@ -8294,7 +8297,7 @@
             }
             : {};
     };
-    const getOfficeCode = (formData) => {
+    const getOfficeCode$1 = (formData) => {
         const { addressRetail, methodObtain } = formData;
         const isOfficeObtain = addressRetail?.key && methodObtain === 'office';
         return isOfficeObtain
@@ -8318,7 +8321,7 @@
         taskKind: 'UNITED',
         task: {
             id: taskId,
-            ...getOfficeCode(formData),
+            ...getOfficeCode$1(formData),
             authorizedAgentId: formData?.bankEmployeeCode,
             participants: [
                 {
@@ -8330,15 +8333,15 @@
                         key: 'BORROWER',
                         value: 'Заемщик',
                     },
-                    ...getCurrentStepData$1(step, formData),
+                    ...getCurrentStepData$2(step, formData),
                 },
             ],
             ...getCardOptionsData(formData),
-            ...getDeliveryData(formData),
+            ...getDeliveryData$1(formData),
             files: formData?.files,
         },
     });
-    const getCurrentStepData$1 = (step, formData) => {
+    const getCurrentStepData$2 = (step, formData) => {
         switch (step) {
             case 0:
                 return {};
@@ -8361,7 +8364,7 @@
         const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
         const isFinalStep = step === 5;
         const retailFormStore = useRetailFormStore();
-        const initialState = useMemo(() => getInitialFormState(step, retailFormStore.leadForm, formStateMap$1), [step, retailFormStore.leadForm]);
+        const initialState = useMemo(() => getInitialFormState(step, retailFormStore.leadForm, formStateMap$2), [step, retailFormStore.leadForm]);
         const resetForm = useCallback((response) => {
             const { leadForm } = retailFormStore;
             if (isFinalStep && response.ok && leadForm) {
@@ -8402,14 +8405,14 @@
         return [initialState, handleSubmit, isSending];
     };
 
-    const PRODUCT_TYPE$1 = 'creditCard';
+    const PRODUCT_TYPE$2 = 'creditCard';
     const CreditCardFormStep = JSX(({ step, sections, onPrevStep, onNextStep, onFinish }) => {
         const inputs = useMemo(() => sections?.flatMap((_) => _?.inputs || []), [sections]);
         const formValidator = useCallback((formState) => getRetailFormValidator({
             formState,
             inputs,
             step,
-            productType: PRODUCT_TYPE$1,
+            productType: PRODUCT_TYPE$2,
         }), [inputs]);
         const [initialState, onSubmit, isSending] = useCreditCardFormAPI({
             step,
@@ -8420,7 +8423,7 @@
             formValidator,
             onSubmit,
         });
-        return (jsxs("form", { onSubmit: handleSubmit, className: "space-y-m", children: [renderStep({ sections, field, step }), jsx(StepsNavigationButtons$1, { isSending: isSending, step: step, onPrevStep: onPrevStep })] }));
+        return (jsxs("form", { onSubmit: handleSubmit, className: "space-y-m", children: [renderStep({ sections, field, step }), jsx(StepsNavigationButtons$2, { isSending: isSending, step: step, onPrevStep: onPrevStep })] }));
     });
 
     const PERSONAL_DATA = [
@@ -8818,7 +8821,7 @@
             ],
         },
     ];
-    const stepsSectionsMap$1 = [
+    const stepsSectionsMap$2 = [
         CREDIT_CARD_CONTENT,
         PERSONAL_INFO_CONTENT$1,
         EMPLOYMENT_CONTENT$1,
@@ -8827,7 +8830,7 @@
         DELIVERY_CREDIT_CARD_CONTENT,
     ];
 
-    const STEPS$1 = 6;
+    const STEPS$2 = 6;
     const TITLES = [
         'Параметры карты',
         'Персональные данные',
@@ -8842,7 +8845,7 @@
         const scrollToTop = useCallback(() => formContainerRef?.current?.scrollIntoView({ behavior: 'smooth' }), [formContainerRef]);
         useEffect(updateRefreshToken, []);
         const handleNextStep = useCallback(() => {
-            setStep((_) => Math.min(_ + 1, STEPS$1));
+            setStep((_) => Math.min(_ + 1, STEPS$2));
             scrollToTop();
         }, []);
         const handlePrevStep = useCallback(() => {
@@ -8850,9 +8853,9 @@
             setStep((_) => Math.max(_ - 1, 0));
             scrollToTop();
         }, []);
-        const sections = stepsSectionsMap$1[step];
+        const sections = stepsSectionsMap$2[step];
         const [isFormFinished, { setTrue: handleFinish }] = useBool(false);
-        return (jsx(BlockWrapper, { className: className, ...rest, children: jsxs("div", { ref: formContainerRef, className: "container grid grid-cols-12", children: [isFormFinished ? null : (jsx(CreditCardFormProgress, { stepsTitles: TITLES, step: step, totalSteps: STEPS$1 })), jsx("div", { className: "py-lg px-5xl mt-2xs bg-white col-span-12", children: isFormFinished ? (jsx(CreditCardFormStatusTracker, {})) : (jsx(CreditCardFormStep, { step: step, sections: sections, onNextStep: handleNextStep, onPrevStep: handlePrevStep, onFinish: handleFinish }, String(step))) })] }) }));
+        return (jsx(BlockWrapper, { className: className, ...rest, children: jsxs("div", { ref: formContainerRef, className: "container grid grid-cols-12", children: [isFormFinished ? null : (jsx(CreditCardFormProgress, { stepsTitles: TITLES, step: step, totalSteps: STEPS$2 })), jsx("div", { className: "py-lg px-5xl mt-2xs bg-white col-span-12", children: isFormFinished ? (jsx(CreditCardFormStatusTracker, {})) : (jsx(CreditCardFormStep, { step: step, sections: sections, onNextStep: handleNextStep, onPrevStep: handlePrevStep, onFinish: handleFinish }, String(step))) })] }) }));
     });
 
     const CreditFormProgress = JSX(({ step = 1, totalSteps = 5, stepsTitles = [] }) => {
@@ -8860,9 +8863,9 @@
         return (jsx("div", { className: "py-lg px-5xl bg-white col-span-12", children: jsxs("div", { children: [jsxs("span", { className: "font-bold mr-s", children: ["\u0428\u0430\u0433 ", step, " \u0438\u0437 ", totalSteps, "."] }), stepsTitles[step] || null, jsx(ProgressBar, { step: progress, showPercentage: false })] }) }));
     });
 
-    const FailedStatusContent = JSX(() => (jsx(FormStatus, { title: "\u0411\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u0438\u043C \u0412\u0430\u0441 \u0437\u0430 \u043E\u0436\u0438\u0434\u0430\u043D\u0438\u0435", description: "\u0412 \u043D\u0430\u0441\u0442\u043E\u044F\u0449\u0438\u0439 \u043C\u043E\u043C\u0435\u043D\u0442 \u0411\u0430\u043D\u043A \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u043E\u0434\u043E\u0431\u0440\u0438\u0442\u044C \u0412\u0430\u0448\u0443 \u0437\u0430\u044F\u0432\u043A\u0443 \u043D\u0430 \u043A\u0440\u0435\u0434\u0438\u0442. \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043F\u043E\u0434\u0430\u0442\u044C \u0437\u0430\u044F\u0432\u043A\u0443 \u043F\u043E\u0437\u0436\u0435. \u0421\u043F\u0430\u0441\u0438\u0431\u043E \u0437\u0430 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435 \u0432 \u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB.", buttonText: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430 \u0433\u043B\u0430\u0432\u043D\u0443\u044E" })));
+    const FailedStatusContent$1 = JSX(() => (jsx(FormStatus, { title: "\u0411\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u0438\u043C \u0412\u0430\u0441 \u0437\u0430 \u043E\u0436\u0438\u0434\u0430\u043D\u0438\u0435", description: "\u0412 \u043D\u0430\u0441\u0442\u043E\u044F\u0449\u0438\u0439 \u043C\u043E\u043C\u0435\u043D\u0442 \u0411\u0430\u043D\u043A \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u043E\u0434\u043E\u0431\u0440\u0438\u0442\u044C \u0412\u0430\u0448\u0443 \u0437\u0430\u044F\u0432\u043A\u0443 \u043D\u0430 \u043A\u0440\u0435\u0434\u0438\u0442. \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043F\u043E\u0434\u0430\u0442\u044C \u0437\u0430\u044F\u0432\u043A\u0443 \u043F\u043E\u0437\u0436\u0435. \u0421\u043F\u0430\u0441\u0438\u0431\u043E \u0437\u0430 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435 \u0432 \u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB.", buttonText: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430 \u0433\u043B\u0430\u0432\u043D\u0443\u044E" })));
 
-    const PendingStatusContent = JSX(({ onExpire }) => {
+    const PendingStatusContent$1 = JSX(({ onExpire }) => {
         const { statusInfo } = useRetailFormStore();
         return (jsx(FormStatus, { interval: 300, title: "\u0417\u0430\u044F\u0432\u043A\u0430 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0430", description: "\u041D\u0435 \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0439\u0442\u0435 \u043E\u043A\u043D\u043E, \u0441\u043A\u043E\u0440\u043E \u0441\u043E\u043E\u0431\u0449\u0438\u043C \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442", sectionInfoTitle: "\u0417\u0430\u044F\u0432\u043B\u0435\u043D\u043D\u044B\u0435 \u0443\u0441\u043B\u043E\u0432\u0438\u044F \u043F\u043E \u043A\u0440\u0435\u0434\u0438\u0442\u0443", sectionInfo: [
                 {
@@ -8907,7 +8910,7 @@
             ], buttonText: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430 \u0433\u043B\u0430\u0432\u043D\u0443\u044E" }));
     });
 
-    const SuccessStatusContent = JSX(() => {
+    const SuccessStatusContent$1 = JSX(() => {
         const { statusInfo } = useRetailFormStore();
         return (jsx(FormStatus, { title: "\u0411\u0430\u043D\u043A \u043E\u0434\u043E\u0431\u0440\u0438\u043B \u0432\u0430\u043C \u043A\u0440\u0435\u0434\u0438\u0442", description: "\u041E\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044C \u0432 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0431\u0430\u043D\u043A\u0430, \u0447\u0442\u043E\u0431\u044B \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044C \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u0435 \u0438 \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0432\u0430\u0448 \u043A\u0440\u0435\u0434\u0438\u0442", sectionInfo: [
                 {
@@ -8956,22 +8959,22 @@
         }, [taskId]);
         useInterval(trackStatus, 30_000);
         const handleExpire = useCallback(() => setStatus(STATUS_TYPE.rework), []);
-        return renderStatus(status, handleExpire);
+        return renderStatus$1(status, handleExpire);
     });
-    const renderStatus = (status, onExpire) => {
+    const renderStatus$1 = (status, onExpire) => {
         const statusesMap = {
-            IN_PROCESS: jsx(PendingStatusContent, { onExpire: onExpire }),
-            CANCELLED: jsx(FailedStatusContent, {}),
-            FAILED: jsx(FailedStatusContent, {}),
-            DRAFT: jsx(FailedStatusContent, {}),
-            APPROVED: jsx(SuccessStatusContent, {}),
-            PRE_DECISION: jsx(SuccessStatusContent, {}),
+            IN_PROCESS: jsx(PendingStatusContent$1, { onExpire: onExpire }),
+            CANCELLED: jsx(FailedStatusContent$1, {}),
+            FAILED: jsx(FailedStatusContent$1, {}),
+            DRAFT: jsx(FailedStatusContent$1, {}),
+            APPROVED: jsx(SuccessStatusContent$1, {}),
+            PRE_DECISION: jsx(SuccessStatusContent$1, {}),
             REVISION: jsx(ReworkStatusContent, {}),
         };
         return statusesMap[status] || jsx(ReworkStatusContent, {});
     };
 
-    const StepsNavigationButtons = JSX(({ step, onPrevStep, isSending }) => {
+    const StepsNavigationButtons$1 = JSX(({ step, onPrevStep, isSending }) => {
         const isFirstStep = step === 0;
         const isFinalStep = step === 5;
         return (jsxs("div", { className: 'flex justify-between gap-m', children: [jsx(Button, { version: "secondary", disabled: isFirstStep, onClick: onPrevStep, children: "\u041D\u0430\u0437\u0430\u0434" }), jsx(SubmitButton$1, { isLoading: isSending, children: isFinalStep ? 'Отправить заявку' : 'Далее' })] }));
@@ -9021,7 +9024,7 @@
                         key: 'BORROWER',
                         value: 'Заемщик',
                     },
-                    ...getCurrentStepData(step, formData),
+                    ...getCurrentStepData$1(step, formData),
                 },
             ],
             ...getCalcData(formData),
@@ -9032,7 +9035,7 @@
             files: formData?.files,
         },
     });
-    const getCurrentStepData = (step, formData) => {
+    const getCurrentStepData$1 = (step, formData) => {
         switch (step) {
             case 0:
                 return getCalculatorData(formData);
@@ -9047,7 +9050,7 @@
         }
     };
 
-    const formStateMap = [
+    const formStateMap$1 = [
         {
             calculator: {
                 moneyValue: 0,
@@ -9073,7 +9076,7 @@
         const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
         const isFinalStep = step === 4;
         const retailFormStore = useRetailFormStore();
-        const initialState = useMemo(() => getInitialFormState(step, retailFormStore.leadForm, formStateMap), [step, retailFormStore.leadForm]);
+        const initialState = useMemo(() => getInitialFormState(step, retailFormStore.leadForm, formStateMap$1), [step, retailFormStore.leadForm]);
         const resetForm = useCallback((response) => {
             const { leadForm } = retailFormStore;
             if (isFinalStep && response.ok && leadForm) {
@@ -9118,7 +9121,7 @@
         return [initialState, handleSubmit, isSending];
     };
 
-    const PRODUCT_TYPE = 'credit';
+    const PRODUCT_TYPE$1 = 'credit';
     const CreditFormStep = JSX(({ step, sections, programsSource, onPrevStep, onNextStep, onFinish }) => {
         const { programId } = useRetailFormStore();
         const calcData = programsSource?.[programId ?? '']; // Need normalizator useForm, to be save defaultParams
@@ -9127,7 +9130,7 @@
             formState,
             inputs,
             step,
-            productType: PRODUCT_TYPE,
+            productType: PRODUCT_TYPE$1,
         }), [inputs]);
         const [initialState, onSubmit, isSending] = useCreditFormAPI({
             step,
@@ -9138,7 +9141,7 @@
             formValidator,
             onSubmit,
         });
-        return (jsxs("form", { onSubmit: handleSubmit, className: "space-y-m", children: [renderStep({ sections, field, step, params: { calcData } }), jsx(StepsNavigationButtons, { step: step, isSending: isSending, onPrevStep: onPrevStep })] }));
+        return (jsxs("form", { onSubmit: handleSubmit, className: "space-y-m", children: [renderStep({ sections, field, step, params: { calcData } }), jsx(StepsNavigationButtons$1, { step: step, isSending: isSending, onPrevStep: onPrevStep })] }));
     });
 
     /* eslint-disable max-lines */
@@ -9328,7 +9331,7 @@
             ],
         },
     ];
-    const stepsSectionsMap = [
+    const stepsSectionsMap$1 = [
         CALCULATOR_CONTENT,
         PERSONAL_INFO_CONTENT,
         EMPLOYMENT_CONTENT,
@@ -9336,8 +9339,8 @@
         DELIVERY_CREDIT_CONTENT,
     ];
 
-    const STEPS = 4;
-    const STEP_TITLES = [
+    const STEPS$1 = 4;
+    const STEP_TITLES$1 = [
         '',
         'Персональные данные',
         'Данные о трудоустройстве',
@@ -9345,6 +9348,382 @@
         'Отделение Банка',
     ];
     const CreditForm = UniBlock(({ className, programsSource, ...rest }) => {
+        const [step, setStep] = useState(0);
+        const formContainerRef = useRef(null);
+        const scrollToTop = useCallback(() => formContainerRef?.current?.scrollIntoView({ behavior: 'smooth' }), [formContainerRef]);
+        useEffect(updateRefreshToken, []);
+        const handleNextStep = useCallback(() => {
+            setStep((_) => Math.min(_ + 1, STEPS$1));
+            scrollToTop();
+        }, []);
+        const handlePrevStep = useCallback(() => {
+            //TODO search hook - 1,
+            setStep((_) => Math.max(_ - 1, 0));
+            scrollToTop();
+        }, []);
+        const sections = stepsSectionsMap$1[step];
+        const isStartStep = step === 0;
+        const [isFormFinished, { setTrue: handleFinish }] = useBool(false);
+        return (jsx(BlockWrapper, { className: className, ...rest, children: jsxs("div", { ref: formContainerRef, className: "container grid grid-cols-12", children: [isStartStep || isFormFinished ? null : (jsx(CreditFormProgress, { stepsTitles: STEP_TITLES$1, step: step, totalSteps: STEPS$1 })), jsx("div", { className: "py-lg px-5xl mt-2xs bg-white col-span-12", children: isFormFinished ? (jsx(CreditFormStatusTracker, {})) : (jsx(CreditFormStep, { step: step, sections: sections, programsSource: programsSource, onNextStep: handleNextStep, onPrevStep: handlePrevStep, onFinish: handleFinish }, String(step))) })] }) }));
+    });
+
+    const DebitFormProgress = JSX(({ step = 1, totalSteps = 2, stepsTitles = [] }) => {
+        const progress = useMemo(() => (step / totalSteps) * 100, [step, totalSteps]);
+        return (jsx("div", { className: "py-lg px-5xl bg-white col-span-12", children: jsxs("div", { children: [jsxs("span", { className: "font-bold mr-s", children: ["\u0428\u0430\u0433 ", step, " \u0438\u0437 ", totalSteps, "."] }), stepsTitles[step] || null, jsx(ProgressBar, { step: progress, showPercentage: false })] }) }));
+    });
+
+    const INTERNET_BANK_LINK = 'https://online.rshb.ru/ib6/wf2/retail/ib/loginretaildefault';
+    const DebitFormStatus = JSX(({ title, description: dsc, sectionInfo, buttonText, isDboClient, ...props }) => {
+        return (jsxs(BlockWrapper, { ...props, children: [jsx("div", { className: "flex flex-col md:flex-row items-center", children: jsx(Headline, { headlineVersion: "M", title: title, description: dsc, align: "text-left", padding: "p-xl", className: "w-full" }) }), jsx(SectionInfo, { items: sectionInfo }), buttonText ? (jsx(LinkButton, { href: "/natural", text: buttonText, version: "primary", className: "w-full mt-lg" })) : null, isDboClient ? (jsxs("div", { className: "flex flex-col md:flex-row md:gap-lg", children: [jsx(LinkButton, { href: "/natural/debetcards", text: "\u0417\u0430\u043F\u043E\u043B\u043D\u0438\u0442\u044C \u0437\u0430\u043D\u043E\u0432\u043E", version: "primary", className: "w-full mt-lg" }), jsx(LinkButton, { href: INTERNET_BANK_LINK, text: "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u0438\u043D\u0442\u0435\u0440\u043D\u0435\u0442 \u0431\u0430\u043D\u043A", version: "primary", className: "w-full mt-lg" })] })) : null] }));
+    });
+    const SectionInfo = ({ title, items, }) => {
+        if (!items) {
+            return null;
+        }
+        return (jsxs("div", { children: [jsx("hr", { className: "w-full h-px bg-main-gray border-0" }), jsxs("div", { className: "p-xl", children: [title ? (jsx(Text, { color: "text-primary-text", size: "text-h5", children: jsx("div", { className: style({ 'mb-m': Boolean(title) }), children: title }) })) : null, items ? (jsx("div", { className: style('grid gap-m md:grid-cols-2', 'md:grid-cols-2'), children: items.map((item, index) => (jsx("div", { children: renderItem$1(item) }, index))) })) : null] })] }));
+    };
+    const renderItem$1 = ({ label, description }) => (jsxs("div", { className: "flex flex-col", children: [jsx(Text, { color: "text-secondary-text", size: "text-l", children: label }), jsx(Text, { color: "text-primary-text", size: "text-xl", children: description })] }));
+
+    const DboClientStatusContent = JSX(() => {
+        const { leadForm } = useRetailFormStore();
+        return (jsx(DebitFormStatus, { title: `${leadForm?.name} ${leadForm?.middleName},`, description: "\u0418\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0412\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044C \u0432 \u0441\u0438\u0441\u0442\u0435\u043C\u0430\u0445 \u0411\u0430\u043D\u043A\u0430, \u043E\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043D\u0438\u043C\u0430\u043D\u0438\u0435 \u043D\u0430 \u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u043E\u0441\u0442\u044C \u0437\u0430\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u044F \u043F\u0430\u0441\u043F\u043E\u0440\u0442\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445", sectionInfo: [
+                {
+                    label: 'Фамилия',
+                    description: leadForm?.surname,
+                },
+                {
+                    label: 'Имя',
+                    description: leadForm?.name,
+                },
+                {
+                    label: 'Отчество',
+                    description: leadForm?.middleName,
+                },
+                {
+                    label: 'Дата рождения',
+                    description: formatDate(leadForm?.limitedBirthday || ''),
+                },
+                {
+                    label: 'Серия документа',
+                    description: leadForm?.dulSerie,
+                },
+                {
+                    label: 'Номер документа',
+                    description: leadForm?.dulNumber,
+                },
+            ], isDboClient: true }));
+    });
+
+    const FailedStatusContent = JSX(() => (jsx(DebitFormStatus, { title: "\u0412\u0440\u0435\u043C\u044F \u043E\u0436\u0438\u0434\u0430\u043D\u0438\u044F \u043F\u0440\u0435\u0432\u044B\u0448\u0435\u043D\u043E", description: "\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0437\u0430\u044F\u0432\u043A\u0443 \u043F\u043E\u0437\u0436\u0435", buttonText: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430 \u0433\u043B\u0430\u0432\u043D\u0443\u044E" })));
+
+    const PendingStatusContent = JSX(() => (jsx(DebitFormStatus, { title: "\u041F\u043E\u0434\u043E\u0436\u0434\u0438\u0442\u0435 \u043D\u0435\u043C\u043D\u043E\u0433\u043E", description: "\u0411\u0430\u043D\u043A \u043F\u0440\u043E\u0432\u0435\u0440\u044F\u0435\u0442 \u0432\u0430\u0448\u0443 \u0437\u0430\u044F\u0432\u043A\u0443" })));
+
+    const SalaryDboClientStatusContent = JSX(() => (jsx(DebitFormStatus, { description: "\u0412\u044B \u0443\u0436\u0435 \u044F\u0432\u043B\u044F\u0435\u0442\u0435\u0441\u044C \u043A\u043B\u0438\u0435\u043D\u0442\u043E\u043C \u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB, \u0434\u043B\u044F \u0412\u0430\u0441 \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u0435 \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u043D\u043E\u0439 \u043A\u0430\u0440\u0442\u044B \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0432 \u043F\u0435\u0440\u0432\u044B\u0439 \u0440\u0430\u0431\u043E\u0447\u0438\u0439 \u0434\u0435\u043D\u044C", buttonText: "\u041D\u0430 \u0433\u043B\u0430\u0432\u043D\u0443\u044E" })));
+
+    const SuccessStatusContent = JSX(({ isOffice }) => (jsx(DebitFormStatus, { title: "\u0417\u0430\u044F\u0432\u043A\u0430 \u043F\u0440\u0438\u043D\u044F\u0442\u0430", description: isOffice
+            ? 'Ваша заявка принята, мы сообщим вам в СМС о поступлении карты в офис'
+            : 'Вам позвонит сотрудник Банка для уточнения времени и даты доставки', buttonText: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430 \u0433\u043B\u0430\u0432\u043D\u0443\u044E" })));
+
+    const DebitFormStatusTracker = JSX(() => {
+        const [status, setStatus] = useState(STATUS_TYPE.process);
+        const { taskId, statusInfo, programId } = useRetailFormStore();
+        const isSalaryCard = programId === '38';
+        const isOffice = statusInfo?.methodObtain === 'office';
+        useEffect(() => {
+            (async () => {
+                const statusCd = await sendSignalToProcess({
+                    signalType: 'FIND_PERSON_SIGNAL',
+                    taskId,
+                });
+                isOffice &&
+                    (await sendSignalToProcess({
+                        signalType: 'SET_PERSON_SIGNAL',
+                        taskId,
+                    }));
+                setStatus(statusCd || STATUS_TYPE.notFound);
+            })();
+        }, [taskId]);
+        return renderStatus(status, isOffice, isSalaryCard);
+    });
+    const renderStatus = (status, isOffice, isSalaryCard) => {
+        const statusesMap = {
+            IN_PROCESS: jsx(PendingStatusContent, {}),
+            NOT_FOUND: jsx(FailedStatusContent, {}),
+            CLIENT_NOT_OK: jsx(FailedStatusContent, {}),
+            DBO_CLIENT: isSalaryCard ? jsx(SalaryDboClientStatusContent, {}) : jsx(DboClientStatusContent, {}),
+            PRE_DECISION: jsx(SuccessStatusContent, { isOffice: isOffice }), //
+        };
+        return statusesMap[status] || jsx(SuccessStatusContent, { isOffice: isOffice });
+    };
+
+    const StepsNavigationButtons = JSX(({ step, onPrevStep, isSending }) => {
+        const isFirstStep = step === 0;
+        const isFinalStep = step === 5;
+        return (jsxs("div", { className: 'flex justify-between gap-m', children: [jsx(Button, { onClick: onPrevStep, type: "button", version: "secondary", disabled: isFirstStep, children: "\u041D\u0430\u0437\u0430\u0434" }), jsx(SubmitButton$1, { isLoading: isSending, children: isFinalStep ? 'Отправить заявку' : 'Далее' })] }));
+    });
+
+    const updateUserTaskDebit = (body) => doRequest('/user-data/updateUserTaskDebit', 'PUT', body);
+
+    const formStateMap = [
+        {
+            regionRetail: { key: '', text: '' },
+            regionHasDelivery: false,
+            addressRetail: { key: '', text: '' },
+            addressCourier: {
+                fullAddress: '',
+                fiasCode: '',
+            },
+            methodObtain: undefined,
+            deliveryDate: undefined,
+        },
+        {
+            surname: '',
+            name: '',
+            middleName: '',
+            sex: '',
+            limitedBirthday: undefined,
+            birthPlace: '',
+            phone: '',
+            email: '',
+            dulSerie: undefined,
+            dulNumber: undefined,
+            dulIssueDate: undefined,
+            dulSubdivisionCode: '',
+            dulIssuedBy: '',
+            addressRegistration: {
+                fullAddress: '',
+                fiasCode: '',
+            },
+            addressFact: {
+                fullAddress: '',
+                fiasCode: '',
+            },
+        },
+        {
+            paymentSystem: { key: '', text: '' },
+            currency: '810',
+            codeWord: '',
+            latinName: '',
+            latinSurname: '',
+        },
+    ];
+
+    const getDeliveryData = (formData) => {
+        const { methodObtain, regionRetail, comment, deliveryDate = '', deliveryTime } = formData;
+        const isCourierDelivery = methodObtain === 'courier';
+        const deliveryTimeCd = deliveryTime ? { deliveryTimeCd: { key: deliveryTime } } : {};
+        return isCourierDelivery
+            ? {
+                cardServiceRegionCd: regionRetail,
+                courierDeliveryFlg: true,
+                deliveryComment: comment,
+                deliveryDate: dateToISO(deliveryDate.toString().replace(/(GMT)[+-]\d{4}/, 'GMT+0000')),
+                office: { id: '' },
+                ...deliveryTimeCd,
+            }
+            : {};
+    };
+    const getOfficeCode = (formData) => {
+        const { addressRetail, methodObtain } = formData;
+        const isOfficeObtain = addressRetail?.key && methodObtain === 'office';
+        return isOfficeObtain
+            ? {
+                courierDeliveryFlg: false,
+                office: { id: addressRetail.key },
+            }
+            : {};
+    };
+    const getDeliveryDebitData = (formData) => {
+        const { addressCourier, methodObtain } = formData;
+        const isCourierDelivery = methodObtain === 'courier';
+        return isCourierDelivery
+            ? {
+                participantAddresses: getParticipantAddresses$1({ addressCourier }),
+            }
+            : {};
+    };
+    const getDebitCardData = (formData) => {
+        const { latinName: latinFirstname, latinSurname } = formData;
+        return {
+            latinFirstname,
+            latinSurname,
+            latinName: `${latinFirstname} ${latinSurname}`,
+        };
+    };
+
+    const getDebitCardFormTaskData = ({ participantId, taskId, formData, programId, step = 0, }) => ({
+        task: {
+            id: taskId,
+            creditProgram: {
+                code: debitProgrammIdToCardCodesMap[programId],
+            },
+            ...getOfficeCode(formData),
+            participants: [
+                {
+                    id: participantId,
+                    residentOtherCountry: false,
+                    ...getCurrentStepData(step, formData),
+                },
+            ],
+            ...getCardOptionsData(formData),
+            ...getDeliveryData(formData),
+        },
+    });
+    const getCurrentStepData = (step, formData) => {
+        switch (step) {
+            case 0:
+                return getDeliveryDebitData(formData);
+            case 1:
+                return getPersonalInfoData(formData);
+            case 2:
+                return getDebitCardData(formData);
+            default:
+                return {};
+        }
+    };
+
+    const useDebitFormAPI = ({ step, onNextStep, onFinish, }) => {
+        const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
+        const isFinalStep = step === 2;
+        const retailFormStore = useRetailFormStore();
+        const initialState = useMemo(() => getInitialFormState(step, retailFormStore.leadForm, formStateMap), [step, retailFormStore.leadForm]);
+        const resetForm = useCallback(() => {
+            const { leadForm } = retailFormStore;
+            retailFormStore.statusInfo = {
+                methodObtain: leadForm?.methodObtain,
+            };
+            retailFormStore.leadForm = initialState;
+        }, [initialState]);
+        const handleSubmit = useCallback(async (formData) => {
+            startSending();
+            retailFormStore.leadForm = formData;
+            try {
+                const { taskId, participantId, programId } = retailFormStore;
+                if (taskId && participantId && programId) {
+                    await updateUserTaskDebit(getDebitCardFormTaskData({
+                        participantId,
+                        taskId,
+                        programId,
+                        step,
+                        formData: formData,
+                    }));
+                }
+                if (isFinalStep || formData.methodObtain === 'courier') {
+                    onFinish?.();
+                    resetForm();
+                }
+                else {
+                    onNextStep();
+                }
+            }
+            catch (ex) {
+                // Do nothing
+            }
+            finally {
+                endSending();
+            }
+        }, [isFinalStep]);
+        return [initialState, handleSubmit, isSending];
+    };
+
+    const PRODUCT_TYPE = 'debitCard';
+    const DebitFormStep = JSX(({ step, sections, onPrevStep, onNextStep, onFinish }) => {
+        const inputs = useMemo(() => sections?.flatMap((_) => _?.inputs ?? []), [sections]);
+        const formValidator = useCallback((formState) => getRetailFormValidator({
+            formState,
+            inputs,
+            step,
+            productType: PRODUCT_TYPE,
+        }), [inputs]);
+        const [initialState, onSubmit, isSending] = useDebitFormAPI({
+            step,
+            onNextStep,
+            onFinish,
+        });
+        const [, { field, onSubmit: handleSubmit }] = useForm(initialState, {
+            formValidator,
+            onSubmit,
+        });
+        return (jsxs("form", { onSubmit: handleSubmit, className: "space-y-m", children: [renderStep({ sections, field, step }), jsx(StepsNavigationButtons, { step: step, isSending: isSending, onPrevStep: onPrevStep })] }));
+    });
+
+    const DEBIT_PERSONAL_INFO_CONTENT = [
+        ...PERSONAL_DATA,
+        {
+            title: 'Адрес регистрации по месту жительства',
+            columns: 1,
+            inputs: [],
+        },
+        {
+            inputs: [
+                {
+                    name: 'addressRegistration',
+                    required: true,
+                    dadata: true,
+                    filledByEsia: true,
+                },
+                { name: 'addressMatch' },
+            ],
+        },
+        {
+            title: 'Адрес фактического проживания (место пребывания РФ)',
+            inputs: [],
+        },
+        {
+            inputs: [{ name: 'addressFact', required: true, dadata: true }],
+        },
+    ];
+    const DEBIT_CARD_CONTENT = [
+        {
+            title: 'Параметры карты',
+            inputs: [],
+        },
+        {
+            inputs: [
+                { name: 'currency', required: true },
+                { name: 'paymentSystem', required: true },
+                { name: 'cardCategory', required: true },
+            ],
+        },
+        {
+            title: 'Отображение на карте',
+            inputs: [],
+        },
+        {
+            columns: 2,
+            inputs: [{ name: 'latinName' }, { name: 'latinSurname', required: true }],
+        },
+        {
+            inputs: [
+                {
+                    name: 'infoCard',
+                    label: 'Проверьте корректность заполненных полей, при необходимости внесите изменения.',
+                },
+            ],
+        },
+        {
+            inputs: [
+                {
+                    name: 'infoCard',
+                    label: 
+                    // eslint-disable-next-line max-len
+                    'Количество символов ограничивается 20. При этом, если фамилия и имя на карте содержит более 21 символа, то необходимо сократить имя и указывать на карте только первую букву имени и фамилию, если при таком сокращении фамилия и имя не умещается в количество символов – 20, то указывать только фамилию.',
+                },
+            ],
+        },
+        {
+            inputs: [{ name: 'codeWord', required: true }],
+        },
+    ];
+    const stepsSectionsMap = [
+        DELIVERY_CARD_CONTENT,
+        DEBIT_PERSONAL_INFO_CONTENT,
+        DEBIT_CARD_CONTENT,
+    ];
+
+    const STEPS = 2;
+    const STEP_TITLES = ['', 'Персональные данные', 'Платежная система'];
+    const DebitForm = UniBlock(({ className, ...rest }) => {
         const [step, setStep] = useState(0);
         const formContainerRef = useRef(null);
         const scrollToTop = useCallback(() => formContainerRef?.current?.scrollIntoView({ behavior: 'smooth' }), [formContainerRef]);
@@ -9361,7 +9740,7 @@
         const sections = stepsSectionsMap[step];
         const isStartStep = step === 0;
         const [isFormFinished, { setTrue: handleFinish }] = useBool(false);
-        return (jsx(BlockWrapper, { className: className, ...rest, children: jsxs("div", { ref: formContainerRef, className: "container grid grid-cols-12", children: [isStartStep || isFormFinished ? null : (jsx(CreditFormProgress, { stepsTitles: STEP_TITLES, step: step, totalSteps: STEPS })), jsx("div", { className: "py-lg px-5xl mt-2xs bg-white col-span-12", children: isFormFinished ? (jsx(CreditFormStatusTracker, {})) : (jsx(CreditFormStep, { step: step, sections: sections, programsSource: programsSource, onNextStep: handleNextStep, onPrevStep: handlePrevStep, onFinish: handleFinish }, String(step))) })] }) }));
+        return (jsx(BlockWrapper, { className: className, ...rest, children: jsxs("div", { ref: formContainerRef, className: "container grid grid-cols-12", children: [isStartStep || isFormFinished ? null : (jsx(DebitFormProgress, { stepsTitles: STEP_TITLES, step: step, totalSteps: STEPS })), jsx("div", { className: "py-lg px-5xl mt-2xs bg-white col-span-12", children: isFormFinished ? (jsx(DebitFormStatusTracker, {})) : (jsx(DebitFormStep, { step: step, sections: sections, onNextStep: handleNextStep, onPrevStep: handlePrevStep, onFinish: handleFinish }, String(step))) })] }) }));
     });
 
     const isRateRow = (rateRow) => typeof rateRow?.minMonths === 'number' && typeof rateRow?.maxMonths === 'number';
@@ -10601,6 +10980,7 @@
         ApplicationLeadForm,
         CreditCardForm,
         CreditForm,
+        DebitForm,
     };
 
     const applyAspects = (aspects) => (ev) => {
@@ -10722,7 +11102,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.877";
+    const packageVersion = "0.14.879";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;