@redneckz/wildless-cms-uni-blocks 0.14.636 → 0.14.638

package/mobile/bundle/bundle.umd.js

@@ -1076,6 +1076,7 @@
             ev.preventDefault();
             resetOnSubmit ? reset() : setDirtyForm(true);
             onSubmit && onSubmit(formState, ev);
+            return formState;
         }, [onSubmit, formState]);
         return [
             formState,
@@ -4113,10 +4114,58 @@
 
     const updateProfileEsia = (body) => doRequest('/esia/updateProfileEsia', 'POST', body);
 
+    const parseEsiaProfile = (esiaProfile) => {
+        const { profile, addInfo, document, addressRegistration, addressFact } = esiaProfile;
+        return {
+            name: profile?.name,
+            surname: profile?.surname,
+            middleName: profile?.midname,
+            birthday: profile?.birthDate,
+            phone: normalizePhone(profile?.phone),
+            email: profile?.email,
+            dulIssueDateField: document?.dulIssueDate,
+            dulIssuedBy: document?.dulIssuedBy,
+            dulNumber: document?.dulNumber,
+            dulSerie: document?.dulSerie,
+            dulSubdivisionCode: document?.dulSubdivisionCode,
+            snils: addInfo?.snils,
+            birthPlace: addInfo?.birthPlace,
+            addressRegistration: buildAddress(addressRegistration),
+            addressFact: buildAddress(addressFact),
+        };
+    };
+    const concatFullAddress = (address) => {
+        return address.reduce((acc, value) => {
+            if (value) {
+                return acc ? `${acc}, ${value}` : value;
+            }
+            return acc;
+        }, '');
+    };
+    const buildAddress = (fields) => {
+        const { postcode, region, regionCode, locality, city, street, house, building, block, apartment, } = fields;
+        const place = locality || city;
+        const fullAddress = concatFullAddress([
+            postcode,
+            region,
+            place,
+            street ? `ул ${street}` : undefined,
+            house ? `д ${house}` : undefined,
+            block ? `к ${block}` : undefined,
+            building ? `стр ${building}` : undefined,
+            apartment ? `кв ${apartment}` : undefined,
+        ]);
+        return {
+            ...fields,
+            regionCode: regionCode?.key,
+            fullAddress,
+        };
+    };
+
     const useInitApplicationLead = (nextStepLink) => {
         const [isLoading, setIsLoading] = useState(false);
         const [profileId] = useLocalStorage('profileId');
-        const [, setEsiaData] = useLocalStorage('esiaData');
+        const [leadForm, setLeadForm] = useLocalStorage('leadForm');
         const params = new URLSearchParams(decodeURIComponent(globalThis.location?.search));
         const code = params.get('code');
         const state = params.get('state');
@@ -4128,7 +4177,10 @@
                     state,
                     redirectUri: globalThis.location?.href,
                 });
-                setEsiaData(JSON.stringify(data));
+                setLeadForm({
+                    ...leadForm,
+                    ...parseEsiaProfile(data),
+                });
                 globalThis.location.href = nextStepLink;
             }
         }, []);
@@ -4138,7 +4190,6 @@
                 updateEsiaProfile();
             }
             else {
-                setEsiaData('');
                 sessionStorage.removeItem('accessToken');
                 sessionStorage.removeItem('refreshToken');
             }
@@ -4148,12 +4199,12 @@
         };
     };
 
-    const ApplicationLeadForm = JSX(({ className, title, programId = '', nextStepLink = '/credit-lead', typeForm = '', sections = [], button, ...rest }) => {
+    const ApplicationLeadForm = JSX(({ className, title, programId = '', nextStepLink = '/credit-lead', sections = [], button, ...rest }) => {
         const inputs = (sections?.flatMap((_) => _?.inputs) || []);
         const [responseType, setResponseType] = useState('');
         const { isLoading } = useInitApplicationLead(nextStepLink);
         const [leadForm, setLeadForm] = useLocalStorage('leadForm');
-        const initialFormState = getInitialFormState$1(inputs, leadForm, typeForm);
+        const initialFormState = getInitialFormState$1(inputs, leadForm);
         const { handleSubmit, responseStatus } = useApplicationLeadApi({
             inputs,
             programId,
@@ -4161,7 +4212,7 @@
             saveForm: setLeadForm,
         });
         if (responseStatus) {
-            const responseTypeDialog = useResponseTypeDialog({ responseType: responseStatus, typeForm });
+            const responseTypeDialog = useResponseTypeDialog({ responseType: responseStatus });
             responseTypeDialog.open();
         }
         const [, { field, onSubmit, reset }] = useForm(initialFormState, { onSubmit: handleSubmit });
@@ -5067,9 +5118,9 @@
         isInsurance: 'isInsurance',
         moneyValue: 'maxSum',
     };
-    const CalculatorCredit = UniBlock(({ className, title, calcSource, buttons, footnote, paramsViewSettings, defaultParams, ...rest }) => {
+    const CalculatorCredit = UniBlock(({ className, title, calcSource, buttons, footnote, paramsViewSettings, defaultParams, registerSubmit, ...rest }) => {
         const defaultParamsCals = getDefaultParamsMin(calcSource?.rateRows);
-        const [userInputParams, { field }] = useForm({
+        const [userInputParams, { field, onSubmit }] = useForm({
             moneyValue: getMoneyDefaultValue(defaultParams, CREDIT_DEFAULT_SUM),
             monthsValue: getMonthsDefaultValue(defaultParams, DEFAULT_MONTHS),
             isAnnuity: Boolean(defaultParams?.isAnnuity),
@@ -5078,6 +5129,7 @@
             isPensionClient: Boolean(defaultParams?.isEnablePensionClient),
             isStateEmployee: Boolean(defaultParams?.isEnableStateEmployee),
         });
+        registerSubmit?.(onSubmit);
         const calcParams = getCreditCalculatorParams(userInputParams, calcSource, paramsViewSettings);
         const paymentTypeElement = renderPaymentType({
             title: 'Тип платежа',
@@ -5785,15 +5837,159 @@
 
     const ProgressBar = JSX(({ step = 10, description, showPercentage = true }) => (jsxs("div", { children: [jsx("div", { className: "h-4 w-full bg-gray relative", children: jsx("div", { className: "h-4 bg-green", style: { width: `${step}%` } }) }), jsxs("div", { className: "relative", children: [showPercentage ? jsxs("div", { className: "absolute left-2/4 text-green", children: [step, "%"] }) : null, description ? jsx("div", { className: "text-right mr-4 text-gray", children: description }) : null] })] })));
 
-    const CreditFormProgress = JSX(({ step = 0, totalSteps = 5, stepsTitles = [] }) => {
-        const progress = useMemo(() => ((step + 1) / 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", children: ["\u0428\u0430\u0433 ", step + 1, " \u0438\u0437 ", totalSteps, "."] }), stepsTitles[step] || null, jsx(ProgressBar, { step: progress, showPercentage: false })] }) }));
+    const CreditFormProgress = JSX(({ step = 1, totalSteps = 5, 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 })] }) }));
     });
 
+    var STATUS_TYPE;
+    (function (STATUS_TYPE) {
+        STATUS_TYPE["process"] = "IN_PROCESS";
+        STATUS_TYPE["ok"] = "OK";
+        STATUS_TYPE["fail"] = "FAILED";
+        STATUS_TYPE["rework"] = "REWORK";
+    })(STATUS_TYPE || (STATUS_TYPE = {}));
+    const getTaskStatus = (body) => doRequest('/user-data/getTaskStatus', 'POST', body);
+
+    const sendSignalToProcess = (body) => doRequest('/public-data/sendSignalToProcess', 'POST', body);
+
     const InfoCard = JSX(({ __html, icon = 'InfoCircleIcon', iconVersion = 'black', link }) => (jsxs("div", { className: "flex flex-row items-center w-full min-h-14 bg-main-gray rounded-lg gap-m p-m", children: [jsx("div", { className: "rounded-full bg-white p-xs", children: jsx(Icon, { name: icon, width: "24", height: "24", iconVersion: iconVersion }) }), jsxs("div", { className: "", children: [jsx(RichText, { __html: __html }), link?.text ? jsx(LinkButton, { className: "text-primary-main", children: link.text }) : null] })] })));
 
+    const TimerCircle = JSX(({ interval = 0, title, __html }) => {
+        const [time, setTime] = useState(interval);
+        const gradientPercentage = 100 - ((interval - time) / interval) * 100;
+        return (jsxs("div", { children: [title ? jsx(Headline, { title: title, headlineVersion: "S" }) : null, jsxs("div", { className: "flex justify-center items-center flex-col", children: [jsxs("div", { className: style(`relative flex items-center justify-center w-24 h-24 rounded-full bg-gray text-transparent mb-5`), children: [jsx("div", { className: "absolute inset-0 rounded-full", style: {
+                                        background: `conic-gradient(rgb(66, 171, 68) ${gradientPercentage}%, rgb(125, 126, 127) 0deg)`,
+                                    } }), jsx("div", { className: "z-10 flex items-center justify-center px-4 py-2 rounded-full w-20 h-20 bg-white text-primary-text text-m", children: jsx(Timer, { interval: interval, time: time, setTime: setTime }) })] }), __html ? jsx(RichText, { __html: __html }) : null] })] }));
+    });
+
+    const CreditFormStatus = JSX(({ title, description: dsc, infoCard, sectionInfoTitle, sectionInfo, sectionAdditionalTitle, sectionInfoAdditional, buttonText, interval, ...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 }) : null] }), jsx(SectionInfo, { title: sectionInfoTitle, items: sectionInfo }), jsx(SectionInfo, { title: sectionAdditionalTitle, items: sectionInfoAdditional, countColumns: true }), infoCard?.__html ? (jsx(InfoCard, { __html: infoCard?.__html, icon: infoCard?.icon, link: {
+                    text: infoCard?.link?.text,
+                } })) : null, buttonText ? (jsx(LinkButton, { href: "/natural", text: buttonText, version: "primary", className: "w-full mt-lg" })) : null] })));
+    const SectionInfo = ({ 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(item) }, index))) })) : null] })] }));
+    };
+    const renderItem = ({ 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 = JSX(() => (jsx(CreditFormStatus, { 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.\n      \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(() => {
+        const [leadForm] = useLocalStorage('leadForm');
+        return (jsx(CreditFormStatus, { 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: [
+                {
+                    label: 'Название продукта',
+                    description: 'Кредит на любые цели',
+                },
+                {
+                    label: 'Цель кредита',
+                    description: 'На любые цели',
+                },
+                {
+                    label: 'Сумма',
+                    description: leadForm?.moneyValue?.toLocaleString() + ' ₽',
+                },
+                {
+                    label: 'Срок кредита',
+                    description: leadForm?.monthsValue + ' мес',
+                },
+                {
+                    label: 'Тип платежа',
+                    description: leadForm?.isAnnuity ? 'Аннуитетный' : 'Дифференцированный',
+                },
+            ] }));
+    });
+
+    const ReworkStatusContent = JSX(() => {
+        const [leadForm] = useLocalStorage('leadForm');
+        return (jsx(CreditFormStatus, { title: "\u0411\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u0438\u043C \u0432\u0430\u0441 \u0437\u0430 \u043E\u0436\u0438\u0434\u0430\u043D\u0438\u0435, \u043D\u043E \u043D\u0430\u043C \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044F \u0431\u043E\u043B\u044C\u0448\u0435 \u0432\u0440\u0435\u043C\u0435\u043D\u0438 \u0434\u043B\u044F \u043F\u0440\u0438\u043D\u044F\u0442\u0438\u044F \u0440\u0435\u0448\u0435\u043D\u0438\u044F", description: "\u041F\u043E\u0441\u0435\u0442\u0438\u0442\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0431\u0430\u043D\u043A\u0430 \u0441 \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u044B\u043C\u0438 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u043C\u0438 \u0438 \u0442\u0430\u043A \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0435 \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u0435 \u043A\u0440\u0435\u0434\u0438\u0442\u0430.", sectionAdditionalTitle: "\u0412 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0438 \u0411\u0430\u043D\u043A\u0430", sectionInfoAdditional: [
+                {
+                    label: 'Регион',
+                    description: leadForm?.regionRetail?.text,
+                },
+                {
+                    label: 'Адрес',
+                    description: leadForm?.addressRetail?.text,
+                },
+            ], sectionInfo: [
+                {
+                    label: 'Основные документы:',
+                    description: '- Паспорт РФ',
+                },
+            ], buttonText: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430 \u0433\u043B\u0430\u0432\u043D\u0443\u044E" }));
+    });
+
+    const SuccessStatusContent = JSX(() => {
+        const [leadForm] = useLocalStorage('leadForm');
+        return (jsx(CreditFormStatus, { 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 \u0432\u0430\u0448 \u043A\u0440\u0435\u0434\u0438\u0442", sectionInfo: [
+                {
+                    label: 'Название продукта',
+                    description: 'Кредит на любые цели',
+                },
+                {
+                    label: 'Ставка',
+                    description: '14,5%',
+                },
+                {
+                    label: 'Ежемесячный платеж',
+                    description: '86 052 ₽',
+                },
+                {
+                    label: 'Срок кредита',
+                    description: leadForm?.monthsValue + ' мес',
+                },
+                {
+                    label: 'Тип платежа',
+                    description: leadForm?.isAnnuity ? 'Аннуитетный' : 'Дифференцированный',
+                },
+            ], buttonText: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430 \u0433\u043B\u0430\u0432\u043D\u0443\u044E" }));
+    });
+
+    const TASK_ID = 2816419;
+    const SIGNAL_TYPES = [
+        'CREATE_APPLICATION_SHORT_SIGNAL',
+        'CREATE_APPLICATION_LOAN_V3_SIGNAL',
+    ];
+    const CreditFormStatusTracker = JSX(() => {
+        const [status, setStatus] = useState(STATUS_TYPE.process);
+        useEffect(() => {
+            for (const signalType of SIGNAL_TYPES) {
+                sendSignalToProcess({ signalType, taskId: TASK_ID });
+            }
+            const trackStatus = () => getTaskStatus({ taskId: TASK_ID }).then((res) => {
+                if (res.statusCd && res.statusCd !== STATUS_TYPE.process) {
+                    clearInterval(pullingInterval);
+                    setStatus(res.statusCd);
+                }
+            });
+            const pullingInterval = setInterval(trackStatus, 30000);
+        }, []);
+        return renderStatus(status);
+    });
+    const renderStatus = (status) => {
+        const statusesMap = {
+            IN_PROCESS: jsx(PendingStatusContent, {}),
+            FAILED: jsx(FailedStatusContent, {}),
+            OK: jsx(SuccessStatusContent, {}),
+            REWORK: jsx(ReworkStatusContent, {}),
+        };
+        return statusesMap[status] || null;
+    };
+
     const formStateMap = {
         0: {
+            moneyValue: 0,
+            monthsValue: 0,
+            isAnnuity: false,
+            isInsurance: false,
+            isSalaryClient: false,
+            isPensionClient: false,
+            isStateEmployee: false,
+        },
+        1: {
             surname: '',
             name: '',
             middleName: '',
@@ -5811,7 +6007,6 @@
                 fullAddress: '',
                 fiasCode: '',
             },
-            addressMatch: false,
             participantDateRegistration: undefined,
             addressFact: {
                 fullAddress: '',
@@ -5819,7 +6014,7 @@
             },
             housing: '',
         },
-        1: {
+        2: {
             amountWorkers: { key: '', text: '' },
             beginDate: undefined,
             employerActivities: { key: '', text: '' },
@@ -5840,7 +6035,7 @@
             partInBusiness: undefined,
             positionOrganization: { key: '', text: '' },
         },
-        2: {
+        3: {
             familyStatus: { key: '', text: '' },
             dependents: undefined,
             familyMembers: undefined,
@@ -5849,19 +6044,20 @@
             snils: '',
             armyIdFlg: false,
         },
-        3: {
+        4: {
             disablePeopleFlg: false,
             bankruptcyFlg: false,
             shareholderFlg: false,
             legalEntityName: '',
             creditInRshbCd: undefined,
         },
-        4: {
+        5: {
             regionRetail: '',
             addressRetail: '',
             bankEmployeeCode: '',
         },
     };
+
     const getInitialFormState = (step, localStorageData) => {
         if (localStorageData) {
             // TODO: Fill in for other fields with type Date
@@ -5876,10 +6072,17 @@
         };
     };
 
-    const renderInputs = ({ field, inputs }) => {
-        return (inputs || [])?.map(getField(field, ''));
+    const renderInfo$1 = (inputs = []) => {
+        const infoInputs = inputs.filter((_) => _.fieldType === 'info');
+        return infoInputs.length
+            ? infoInputs.map(({ text, name }, i) => jsx(InfoCard, { __html: text }, `${name}_${i}`))
+            : null;
     };
 
+    const renderInputs = ({ field, inputs }) => (inputs || [])?.map(getField(field, ''));
+
+    const renderStep = ({ sections, field }) => sections?.map(({ inputs, columns, title }, i) => (jsxs("div", { className: style(inputColumnStyles(columns), 'grid gap-x-m'), children: [renderInfo$1(inputs), renderTitle(title), renderInputs({ field, inputs })] }, `section-${i}`)));
+
     const StepsNavigationButtons = JSX(({ step, onPrevStep }) => {
         const isFirstStep = step === 0;
         return (jsxs("div", { className: 'flex justify-between', children: [jsx(Button, { onClick: onPrevStep, className: style('w-full @xl:w-auto'), type: "button", version: "secondary", disabled: isFirstStep, children: "\u041D\u0430\u0437\u0430\u0434" }), jsx(Button, { className: style('w-full @xl:w-auto'), type: "submit", children: "\u0414\u0430\u043B\u0435\u0435" })] }));
@@ -6002,7 +6205,7 @@
         }
     };
 
-    const useCreditFormApi = ({ inputs, step, onNextStep, saveStep }) => {
+    const useCreditFormAPI = ({ step, inputs, onNextStep, saveStep, finishForm, }) => {
         const [taskId] = useLocalStorage('taskId');
         const [profileId] = useLocalStorage('profileId');
         const [participantId] = useLocalStorage('participantId');
@@ -6027,6 +6230,9 @@
                 return 'Fail';
             }
             onNextStep();
+            if (step === 5) {
+                finishForm?.(true);
+            }
             return 'OK';
         }, []);
         return {
@@ -6034,29 +6240,34 @@
         };
     };
 
-    const CreditFormStep = JSX(({ step, sections, onPrevStep, onNextStep, inputs }) => {
+    const CreditFormStep = JSX(({ step, sections, onPrevStep, onNextStep, inputs, renderStep: renderStep$1 = renderStep, isFormFinished, finishForm, }) => {
         const [localStorageData, saveStep] = useLocalStorage('leadForm');
         const initialState = getInitialFormState(step, localStorageData);
-        const { handleSubmit } = useCreditFormApi({
-            inputs,
+        const customSubmit = useRef(undefined);
+        const registerSubmit = useCallback((submit) => {
+            customSubmit.current = submit;
+        }, []);
+        const { handleSubmit } = useCreditFormAPI({
             step,
-            onNextStep: onNextStep,
+            inputs,
+            onNextStep,
             saveStep,
+            finishForm,
         });
-        const [, { field, onSubmit }] = useForm(initialState, { onSubmit: handleSubmit });
-        return (jsxs("form", { onSubmit: onSubmit, className: "space-y-m", children: [renderStep({ sections, field }), jsx(StepsNavigationButtons, { step: step, onPrevStep: onPrevStep })] }));
+        const [, { field, onSubmit }] = useForm(initialState, {
+            onSubmit: (formData, ev) => {
+                handleSubmit({ ...formData, ...customSubmit.current?.(ev) });
+            },
+        });
+        return isFormFinished ? (jsx(CreditFormStatusTracker, {})) : (jsxs("form", { onSubmit: onSubmit, className: "space-y-m", children: [renderStep$1({ sections, field, registerSubmit }), jsx(StepsNavigationButtons, { step: step, onPrevStep: onPrevStep })] }));
     });
-    const renderStep = ({ sections, field }) => {
-        return sections?.map((_, i) => (jsxs("div", { className: style(inputColumnStyles(_.columns), 'grid gap-x-m'), children: [renderInfo$1(_?.inputs), renderTitle(_?.title), renderInputs({ field, inputs: _?.inputs })] }, `section-${i}`)));
-    };
-    const renderInfo$1 = (inputs = []) => {
-        const infoInputs = inputs.filter((_) => _.fieldType === 'info');
-        return infoInputs.length ? infoInputs.map(({ text }) => jsx(InfoCard, { __html: text })) : null;
-    };
 
     /* eslint-disable max-lines */
     /* eslint-disable max-len */
     const stepsSectionsMap = [
+        [
+        // zero step for calculator
+        ],
         [
             {
                 title: 'Персональные данные',
@@ -6287,8 +6498,8 @@
         ],
     ];
 
-    const STEPS_COUNT = 5;
-    const STEPS_TITLES = [
+    const WIZARD_STEPS = 5;
+    const WIZARD_TITLES = [
         'Персональные данные',
         'Данные о трудоустройстве',
         'Данные о доходах и расходах',
@@ -6297,16 +6508,26 @@
     ];
     const CreditForm = JSX(({ className, ...rest }) => {
         const [step, setStep] = useState(0);
-        const sections = useMemo(() => stepsSectionsMap[step], [step]);
-        const inputs = (sections?.flatMap((_) => _?.inputs) || []);
         const handleNextStep = useCallback(() => {
-            setStep((_) => Math.min(_ + 1, STEPS_COUNT - 1));
+            setStep((_) => Math.min(_ + 1, WIZARD_STEPS));
         }, []);
         const handlePrevStep = useCallback(() => {
             //TODO search hook - 1,
             setStep((_) => Math.max(_ - 1, 0));
         }, []);
-        return (jsx(BlockWrapper, { className: style('bg-transparent', className), defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container grid grid-cols-12", children: [jsx(CreditFormProgress, { stepsTitles: STEPS_TITLES, step: step, totalSteps: STEPS_COUNT }), jsx("div", { className: "py-lg px-5xl mt-2xs bg-white col-span-12", children: jsx(CreditFormStep, { inputs: inputs, step: step, sections: sections, onNextStep: handleNextStep, onPrevStep: handlePrevStep }, String(step)) })] }) }));
+        const sections = useMemo(() => stepsSectionsMap[step], [step]);
+        const inputs = (sections?.flatMap((_) => _?.inputs) || []);
+        const isStartStep = step === 0;
+        const [isFormFinished, setIsFormFinished] = useState(false);
+        return (jsx(BlockWrapper, { className: style('bg-transparent', className), defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container grid grid-cols-12", children: [isStartStep || isFormFinished ? null : (jsx(CreditFormProgress, { stepsTitles: WIZARD_TITLES, step: step, totalSteps: WIZARD_STEPS })), jsx("div", { className: "py-lg px-5xl mt-2xs bg-white col-span-12", children: jsx(CreditFormStep, { step: step, inputs: inputs, sections: sections, onNextStep: handleNextStep, onPrevStep: handlePrevStep, isFormFinished: isFormFinished, finishForm: setIsFormFinished, renderStep: isStartStep
+                                ? ({ registerSubmit }) => (jsx(CalculatorCredit, { ...{
+                                        title: 'Калькулятор кредита',
+                                        footnote: 'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+                                        calcSource: {
+                                            $ref: '/wcms-resources/credit-calculator-data.json',
+                                        },
+                                    }, registerSubmit: registerSubmit }))
+                                : undefined }, String(step)) })] }) }));
     });
 
     const isRateRow = (rateRow) => typeof rateRow?.minMonths === 'number' && typeof rateRow?.maxMonths === 'number';
@@ -8202,7 +8423,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.635";
+    const packageVersion = "0.14.637";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;