@redneckz/wildless-cms-uni-blocks 0.14.588 → 0.14.589

package/bundle/bundle.umd.js

@@ -1122,9 +1122,9 @@
             onChange && onChange(!value);
         }, [onChange, disabled, value]);
         const icon = isRadio ? (jsx("div", { className: "absolute left-1 w-3 h-3 rounded-full bg-primary-main" })) : (jsx(SVG, { paths: CHECK_PATHS, className: "absolute left-1 ml-px block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }));
-        return (jsx("div", { className: className, children: jsxs("label", { className: style('flex items-center relative group/box', getCursorStyle(disabled)), onClick: handleChange, children: [jsx("div", { className: style(defaultCheckStyle, 'm-0', isRadio ? 'rounded-full border-2' : checkboxStyle(value), !disabled && value ? 'border-primary-main' : 'border-gray', disabled ? 'bg-main-disabled' : 'group-hover/box:border-primary-hover'), role: role(isRadio), "aria-checked": Boolean(value), "aria-disabled": Boolean(disabled), "aria-label": text }), value ? icon : null, renderText$1(text)] }) }));
+        return (jsx("div", { className: className, children: jsxs("label", { className: style('flex items-center relative group/box', getCursorStyle(disabled)), onClick: handleChange, children: [jsx("div", { className: style(defaultCheckStyle, 'm-0', isRadio ? 'rounded-full border-2' : checkboxStyle(value), !disabled && value ? 'border-primary-main' : 'border-gray', disabled ? 'bg-main-disabled' : 'group-hover/box:border-primary-hover'), role: role(isRadio), "aria-checked": Boolean(value), "aria-disabled": Boolean(disabled), "aria-label": text }), value ? icon : null, renderText$2(text)] }) }));
     });
-    const renderText$1 = (text) => text ? (jsx("div", { className: "ml-s", children: jsx(Text, { size: "text-l", font: "font-light", children: text }) })) : null;
+    const renderText$2 = (text) => text ? (jsx("div", { className: "ml-s", children: jsx(Text, { size: "text-l", font: "font-light", children: text }) })) : null;
     const getCursorStyle = (disabled = false) => (disabled ? 'cursor-not-allowed' : 'cursor-pointer');
     const role = (isRadio = false) => (isRadio ? 'radio' : 'checkbox');
     const checkboxStyle = (value = false) => style('rounded border', { 'bg-primary-main': value });
@@ -2550,6 +2550,7 @@
 
     const renderSubmitButton = (button, className) => (jsx(Button, { className: style('w-full @xl:w-auto', className), type: "submit", children: button?.text ? button.text : 'Отправить заявку' }));
 
+    const getResponse = (response) => (isJSON(response) ? response.json() : response);
     const getAthorizationHeaders = () => {
         const token = sessionStorage.getItem('accessToken');
         return token ? { Authorization: `Bearer ${token}` } : null;
@@ -2563,7 +2564,18 @@
         },
         credentials: 'include',
         body: body ? JSON.stringify(body) : null,
-    }).then((response) => (isJSON(response) ? response.json() : response));
+    })
+        .then((response) => {
+        if (response.ok) {
+            return getResponse(response);
+        }
+        else {
+            throw response;
+        }
+    })
+        .catch((error) => {
+        throw error;
+    });
     const saveToken = (data) => {
         sessionStorage.setItem('accessToken', data.access_token);
         sessionStorage.setItem('refreshToken', data.refresh_token);
@@ -2575,6 +2587,8 @@
         UpdateUserTask: async (body) => await request('/user-data/updateUserTask', 'PUT', body),
         SendCode: async (body) => await request('/sms/sendCode', 'POST', body),
         CheckCode: async (body) => await request('/sms/checkCode', 'POST', body).then(saveToken),
+        CreateCaptcha: async (phoneNumber) => await request(`/sms/createCaptcha?phoneNumber=${phoneNumber}`, 'GET'),
+        CheckCaptcha: async (body) => await request('/sms/checkCaptcha', 'POST', body),
     };
 
     const getUpdateUserProfileData = (profileId, formData) => {
@@ -2639,6 +2653,71 @@
         },
     });
 
+    const ICON_SIZE$1 = { width: '118', height: '24' };
+
+    const logoTitleSizeStyle = '';
+
+    const ICON_VERSION_MAP = {
+        'bg-white': 'color',
+        transparent: 'white',
+    };
+    const SVG_COLOR = {
+        'bg-white': 'text-primary-main',
+        transparent: 'text-white',
+    };
+    const renderImage = (bgColor, image, size) => {
+        const img = image?.src
+            ? image
+            : {
+                icon: image?.icon || 'LogoIcon',
+                iconVersion: ICON_VERSION_MAP[bgColor],
+            };
+        return (jsx(Img, { image: img, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height }));
+    };
+
+    const TEXT_COLOR = {
+        'bg-white': 'text-primary-text',
+        transparent: 'text-white',
+    };
+    const Logo = JSX(({ className, href = '/', logo, children, targetBlank, bgColor = 'bg-white', showTitle = true, data, }) => (jsxs("a", { className: style('inline-flex items-center font-sans no-underline', className), href: logo?.href ?? href, target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title ?? 'Россельхозбанк', ...getAspectsAttributes(data), children: [renderImage(bgColor, logo?.image, ICON_SIZE$1), showTitle
+                ? children ?? (jsx("div", { className: "ml-s", children: jsx(Text, { font: "font-medium", color: TEXT_COLOR[bgColor], size: logoTitleSizeStyle, children: logo?.title ?? 'Россельхозбанк' }) }))
+                : null] })));
+
+    const checkCaptcha = async ({ code, setHasError, close, sendCode = noop, }) => {
+        const response = await RETAIL_API.CheckCaptcha({ captchaText: code });
+        if ((await response.text()) === 'ERROR') {
+            setHasError(true);
+        }
+        else {
+            sendCode();
+            close?.();
+        }
+    };
+
+    const createCaptcha = async (setCaptcha, phoneNumber) => {
+        const response = await RETAIL_API.CreateCaptcha(phoneNumber);
+        setCaptcha(URL.createObjectURL(await response.blob()));
+    };
+
+    const CaptchaDialog = JSX(({ phoneNumber, close, sendCode, onClose }) => {
+        const [captcha, setCaptcha] = useState('');
+        const [code, setCode] = useState('');
+        const [hasError, setHasError] = useState(false);
+        useEffect(() => {
+            createCaptcha(setCaptcha, phoneNumber);
+        }, []);
+        return (jsx(Dialog, { head: jsx(Logo, {}), onClose: onClose, className: "my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg", children: jsxs("div", { className: "flex flex-col gap-lg items-center rounded-md", children: [jsxs("div", { className: "flex h-[140px] w-[300px]", children: [jsx("img", { className: "grow", src: captcha }), jsx("div", { onClick: () => createCaptcha(setCaptcha, phoneNumber), className: "flex w-8 items-center justify-center cursor-pointer", children: jsx(Icon, { iconVersion: "normal", name: "RefreshIcon" }) })] }), jsx(Input, { className: "w-[300px]", onChange: setCode, value: code, placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u043E\u0434 \u0441 \u043A\u0430\u0440\u0442\u0438\u043D\u043A\u0438" }), hasError ? jsx("div", { className: "text-error", children: "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u043A\u043E\u0434" }) : null, jsxs("div", { className: "flex w-[310px] justify-between", children: [jsx(Button, { onClick: close, version: "secondary", children: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F" }), jsx(Button, { type: "submit", disabled: !code, onClick: () => checkCaptcha({ code, setHasError, close, sendCode }), version: "secondary", children: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C" })] })] }) }));
+    });
+
+    const useCaptchaDialog = (initialProps, onClose) => {
+        const { open, close, closeAll } = useDialogManager();
+        return {
+            open: () => open(jsx(CaptchaDialog, { close: close, onClose: onClose, ...initialProps })),
+            close,
+            closeAll,
+        };
+    };
+
     const Loader = JSX(({ color = 'text-primary-main', position = 'absolute', blur = true }) => (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 h-28 w-28', 'animate-spin rounded-full', 'border-8 border-solid border-current', 'border-r-transparent', color), role: "status" }) })));
@@ -2663,7 +2742,24 @@
         return `${minutes}:${seconds}`;
     };
 
-    const InputCode = JSX(({ values, setValues, hasError }) => {
+    const handleSendCode = async ({ phoneNumber, captchaDialog, setTimeNextReq, setIsTimerStarted, setAttemps, }) => {
+        try {
+            await RETAIL_API.SendCode({
+                phoneNumber: phoneNumber,
+                smsCodesSetName: { key: 'AUTHENTICATION' },
+            });
+            setAttemps(0);
+            setTimeNextReq(180);
+            setIsTimerStarted(true);
+        }
+        catch (e) {
+            if (e?.status === 429) {
+                captchaDialog.open();
+            }
+        }
+    };
+
+    const InputCode = JSX(({ values, setValues, hasError, errorText }) => {
         const [activeIndex, setActiveIndex] = useState(0);
         const inputRefs = useRef([]);
         useEffect(() => {
@@ -2700,7 +2796,7 @@
                                 inputRefs.current = [];
                             }
                             inputRefs.current[index] = ref;
-                        }, onFocus: (event) => event.target.select(), onKeyDown: handleKeyDown(index), className: getInputStyle(index, values, hasError) }, index))) }), hasError ? jsx("div", { className: "text-error", children: "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u043A\u043E\u0434" }) : null] }));
+                        }, onFocus: (event) => event.target.select(), onKeyDown: handleKeyDown(index), className: getInputStyle(index, values, hasError) }, index))) }), hasError ? jsx("div", { className: "text-error", children: errorText }) : null] }));
     });
     const getInputStyle = (index, values, hasError = false) => {
         const isInputEmpty = !values[index];
@@ -2711,42 +2807,85 @@
         return (jsx(Button, { type: "button", onClick: onClick, disabled: isDisabled, children: jsx(Text, { font: "font-medium", children: text }) }));
     });
 
-    const VerifyPhoneDialog = JSX(({ title, phone, description, __html, code = true, codeLength = 4, textButton = '', onClose, href = '', }) => {
-        const { close } = useDialogManager();
-        const [values, setValues] = useState(Array(codeLength).fill(''));
+    const useVerifyPhoneDialogSubmit = ({ close, values }) => {
         const [hasError, setHasError] = useState(false);
+        const [errorText, setErrorText] = useState('');
         const [isLoading, setIsLoading] = useState(false);
-        const [timeNextReq, setTimeNextReq] = useState(180);
-        const isValidCode = useMemo(() => values.every(Boolean), [values]);
-        useEffect(() => {
-            RETAIL_API.SendCode({
-                phoneNumber: phone,
-                smsCodesSetName: { key: 'AUTHENTICATION' },
-            });
+        const [timeNextReq, setTimeNextReq] = useState(0);
+        const [isTimerStarted, setIsTimerStarted] = useState(false);
+        const [attemps, setAttemps] = useState(0);
+        const resetError = useCallback(() => {
+            setHasError(false);
+            setErrorText('');
         }, []);
+        const isTimeExpired = useMemo(() => timeNextReq === 0 && isTimerStarted, [timeNextReq, isTimerStarted]);
+        const isSubmitButtonDisabled = useMemo(() => attemps > 2 || !values.every(Boolean) || isTimeExpired, [values]);
         const handleSubmit = useCallback(async () => {
             try {
+                setIsTimerStarted(false);
+                setTimeNextReq(0);
+                setAttemps(attemps + 1);
                 setIsLoading(true);
                 await RETAIL_API.CheckCode({
                     smsText: values.join(''),
                     smsCodesSetName: { key: 'AUTHENTICATION' },
                 });
-                globalThis.location.href = href;
-                close();
-                onClose && onClose();
+                resetError();
+                close && close();
             }
             catch {
                 setIsLoading(false);
+                attemps > 1 ? setErrorText('Исчерпан лимит ввода смс-кода') : setErrorText('Неверный код');
                 setHasError(true);
             }
-        }, [values]);
-        return (jsx(Dialog, { className: "my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg", children: jsxs("div", { className: "flex flex-col gap-lg items-center rounded-md", children: [jsx(Headline, { className: "w-full", title: title, description: description, headlineVersion: "S", isEmbedded: true }), code ? jsx(InputCode, { values: values, setValues: setValues, hasError: hasError }) : null, timeNextReq ? (jsxs("div", { className: "flex flex-row text-l font-light text-primary-main", children: ["\u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0439 \u043A\u043E\u0434 \u043C\u043E\u0436\u043D\u043E \u0447\u0435\u0440\u0435\u0437", jsx(Timer, { className: "text-primary-main ml-1", time: timeNextReq, setTime: setTimeNextReq })] })) : (jsx(LinkButton, { className: "text-primary-main", children: "\u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0439 \u043A\u043E\u0434" })), jsx(RichText, { itemSize: "list-s", __html: __html }), textButton ? (jsx(SubmitButton, { isDisabled: !isValidCode, onClick: handleSubmit, text: textButton })) : null, isLoading ? jsx(Loader, { blur: false }) : null] }) }));
+        }, [values, attemps]);
+        useEffect(() => {
+            if (isTimeExpired) {
+                setHasError(true);
+                setErrorText('Код просрочен');
+            }
+            else {
+                setHasError(false);
+            }
+        }, [isTimeExpired]);
+        return {
+            handleSubmit,
+            hasError,
+            errorText,
+            isLoading,
+            timeNextReq,
+            isSubmitButtonDisabled,
+            setTimeNextReq,
+            setIsTimerStarted,
+            setAttemps,
+        };
+    };
+
+    const VerifyPhoneDialog = JSX(({ close = noop, onClose = noop, title, description, __html, code = true, codeLength = 4, textButton = '', phoneNumber = '+79999999999', }) => {
+        const [values, setValues] = useState(Array(codeLength).fill(''));
+        const { handleSubmit, hasError, errorText, isLoading, timeNextReq, isSubmitButtonDisabled, setTimeNextReq, setIsTimerStarted, setAttemps, } = useVerifyPhoneDialogSubmit({ values, close });
+        const sendCode = useCallback(() => {
+            handleSendCode({
+                phoneNumber,
+                captchaDialog,
+                setTimeNextReq,
+                setIsTimerStarted,
+                setAttemps,
+            });
+        }, []);
+        const captchaDialog = useCaptchaDialog({ phoneNumber, sendCode }, onClose);
+        useEffect(() => {
+            sendCode();
+        }, []);
+        return (jsx(Dialog, { className: "my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg", children: jsxs("div", { className: "flex flex-col gap-lg items-center rounded-md", children: [jsx(Headline, { className: "w-full", title: title, description: description, headlineVersion: "S", isEmbedded: true }), code ? (jsx(InputCode, { values: values, setValues: setValues, errorText: errorText, hasError: hasError })) : null, renderText$1(timeNextReq, setTimeNextReq, sendCode), jsx(RichText, { itemSize: "list-s", __html: __html }), renderTextButton(textButton, isSubmitButtonDisabled, handleSubmit), isLoading ? jsx(Loader, { blur: false }) : null] }) }));
     });
+    const renderTextButton = (textButton, isDisabled, handleSubmit) => textButton ? (jsx(SubmitButton, { isDisabled: isDisabled, onClick: handleSubmit, text: textButton })) : null;
+    const renderText$1 = (timeNextReq, setTimeNextReq, sendCode) => timeNextReq ? (jsxs("div", { className: "flex flex-row text-l font-light text-primary-main", children: ["\u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0439 \u043A\u043E\u0434 \u043C\u043E\u0436\u043D\u043E \u0447\u0435\u0440\u0435\u0437", jsx(Timer, { className: "text-primary-main ml-1", time: timeNextReq, setTime: setTimeNextReq })] })) : (jsx(LinkButton, { onClick: sendCode, className: "text-primary-main", children: "\u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0439 \u043A\u043E\u0434" }));
 
     const useVerifyPhoneDialog = (props) => {
         const { open, close } = useDialogManager();
         return {
-            open: (options = {}) => open(jsx(VerifyPhoneDialog, { ...props }), options),
+            open: (options = {}) => open(jsx(VerifyPhoneDialog, { onClose: close, ...props }), options),
             close,
         };
     };
@@ -2773,7 +2912,7 @@
                                 programId,
                             });
                             await RETAIL_API.UpdateUserTask(getUpdateUserTaskData(participantId, taskId, profileId, formData));
-                            setResponseStatus('OK');
+                            globalThis.location.href = '/credit-lead';
                         }
                         catch {
                             setResponseStatus('Fail');
@@ -2781,7 +2920,7 @@
                     };
                     // eslint-disable-next-line react-hooks/rules-of-hooks
                     const verifyPhoneDialog = useVerifyPhoneDialog({
-                        onClose: handleSuccessVerify,
+                        close: handleSuccessVerify,
                         ...verifyPhoneContent(formData?.phone),
                     });
                     verifyPhoneDialog.open();
@@ -2799,14 +2938,13 @@
     const verifyPhoneContent = (phone) => ({
         title: 'Подтвердите номер телефона',
         description: `Мы отправили код на ${phone}`,
-        phone: formatPhone(phone),
+        phoneNumber: formatPhone(phone),
         textButton: 'Оформить',
         __html: `<span>Вводя код, я подтверждаю, что ознакомлен и подписываю:</span>
               <ul><li>соглашение о порядке использования простой электронной подписи,
               </li><li>согласие на обработку персональных данных,
               </li><li>предоставление и подписание прочих согласий Банка,
               </li><li>согласие на запрос в ПФР</li></ul>`,
-        href: '/credit-lead',
     });
 
     const useInitApplicationLead = () => {
@@ -4555,7 +4693,7 @@
         return null;
     };
 
-    const ICON_SIZE$1 = { width: '24', height: '24' };
+    const ICON_SIZE = { width: '24', height: '24' };
     const PaginationContainer = ({ currentPage, onPageChange, totalPages, }) => {
         const pages = useMemo(() => Array.from({ length: totalPages }).fill({
             currentPage,
@@ -4574,7 +4712,7 @@
         }, [currentPage, totalPages]);
         const handleFirstPage = useCallback(() => onPageChange(1), []);
         const handleLastPage = useCallback(() => onPageChange(totalPages), [totalPages]);
-        return (jsxs("div", { className: "flex gap-m items-center", children: [jsx("div", { onClick: handlePrevPage, children: jsx(Icon, { name: "ArrowLeftIcon", iconVersion: "black", imageClassName: getIconStyle(currentPage === 1), ...ICON_SIZE$1 }) }), jsxs("div", { className: "flex @lg:gap-2xs", children: [currentPage > 1 ? (jsx("div", { onClick: handleFirstPage, className: paginationBlockStyle, "aria-label": "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 1", children: "1" })) : null, currentPage > 3 ? jsx("div", { className: "py-m @lg:px-s", children: "..." }) : null, pages.map(renderPages), currentPage < totalPages - 2 ? jsx("div", { className: "py-m @lg:px-s", children: "..." }) : null, currentPage < totalPages ? (jsx("div", { onClick: handleLastPage, className: paginationBlockStyle, "aria-label": `Страница ${totalPages}`, children: totalPages })) : null] }), jsx("div", { onClick: handleNextPage, children: jsx(Icon, { className: "rotate-180", name: "ArrowLeftIcon", iconVersion: "black", imageClassName: getIconStyle(currentPage === totalPages), ...ICON_SIZE$1 }) })] }));
+        return (jsxs("div", { className: "flex gap-m items-center", children: [jsx("div", { onClick: handlePrevPage, children: jsx(Icon, { name: "ArrowLeftIcon", iconVersion: "black", imageClassName: getIconStyle(currentPage === 1), ...ICON_SIZE }) }), jsxs("div", { className: "flex @lg:gap-2xs", children: [currentPage > 1 ? (jsx("div", { onClick: handleFirstPage, className: paginationBlockStyle, "aria-label": "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 1", children: "1" })) : null, currentPage > 3 ? jsx("div", { className: "py-m @lg:px-s", children: "..." }) : null, pages.map(renderPages), currentPage < totalPages - 2 ? jsx("div", { className: "py-m @lg:px-s", children: "..." }) : null, currentPage < totalPages ? (jsx("div", { onClick: handleLastPage, className: paginationBlockStyle, "aria-label": `Страница ${totalPages}`, children: totalPages })) : null] }), jsx("div", { onClick: handleNextPage, children: jsx(Icon, { className: "rotate-180", name: "ArrowLeftIcon", iconVersion: "black", imageClassName: getIconStyle(currentPage === totalPages), ...ICON_SIZE }) })] }));
     };
     const getIconStyle = (condition) => condition ? 'opacity-20' : 'cursor-pointer hover:opacity-60';
 
@@ -4895,36 +5033,6 @@
 
     const LEFT_COLUMN_STYLE = 'w-full lg:w-52';
 
-    const ICON_SIZE = { width: '118', height: '24' };
-
-    const logoTitleSizeStyle = '';
-
-    const ICON_VERSION_MAP = {
-        'bg-white': 'color',
-        transparent: 'white',
-    };
-    const SVG_COLOR = {
-        'bg-white': 'text-primary-main',
-        transparent: 'text-white',
-    };
-    const renderImage = (bgColor, image, size) => {
-        const img = image?.src
-            ? image
-            : {
-                icon: image?.icon || 'LogoIcon',
-                iconVersion: ICON_VERSION_MAP[bgColor],
-            };
-        return (jsx(Img, { image: img, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height }));
-    };
-
-    const TEXT_COLOR = {
-        'bg-white': 'text-primary-text',
-        transparent: 'text-white',
-    };
-    const Logo = JSX(({ className, href = '/', logo, children, targetBlank, bgColor = 'bg-white', showTitle = true, data, }) => (jsxs("a", { className: style('inline-flex items-center font-sans no-underline', className), href: logo?.href ?? href, target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title ?? 'Россельхозбанк', ...getAspectsAttributes(data), children: [renderImage(bgColor, logo?.image, ICON_SIZE), showTitle
-                ? children ?? (jsx("div", { className: "ml-s", children: jsx(Text, { font: "font-medium", color: TEXT_COLOR[bgColor], size: logoTitleSizeStyle, children: logo?.title ?? 'Россельхозбанк' }) }))
-                : null] })));
-
     function useDebouncedEffect(effect, deps, delay = 300) {
         useEffect(() => {
             const timerId = globalThis.setTimeout(effect, delay);
@@ -7303,7 +7411,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.587";
+    const packageVersion = "0.14.588";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;