@redneckz/wildless-cms-uni-blocks 0.14.581 → 0.14.583

package/bundle/bundle.umd.js

@@ -862,7 +862,7 @@
             const url = isNaturalPerson ? '/api/v1/lead' : '/api/v1/sendcorporatelead';
             const submitBody = {
                 typeForm,
-                ...getRegion$2(region, isNaturalPerson),
+                ...getRegion$1(region, isNaturalPerson),
                 ...getEmail(email, isNaturalPerson),
                 ...getPhone(phone),
                 ...getFormatDate(desiredMeetingDate, 'desiredMeetingDate'),
@@ -900,7 +900,7 @@
     }
     const getPhone = (phone) => (phone ? { phone: formatPhone(phone) } : {});
     const getFormatDate = (date, key = 'birthday') => date ? { [key]: formatDate(date) } : {};
-    const getRegion$2 = (region, isNaturalPerson = true) => ({
+    const getRegion$1 = (region, isNaturalPerson = true) => ({
         [isNaturalPerson ? 'regionBranch' : 'region']: region,
     });
     const getEmail = (email, isNaturalPerson = true) => ({
@@ -2211,19 +2211,19 @@
     };
 
     /* eslint-disable @typescript-eslint/no-unused-vars */
-    const getFormatData$1 = (data) => {
+    const getFormatData = (data) => {
         const { acquiringType, onlineCheckout, posTerminal, amount, term, annualRevenue, serviceType, vedTypes, region, ...usedData } = data;
         const partnerComments = acquiringType || annualRevenue ? getPartnerComments(data) : null;
         const formatData = {
             ...usedData,
             ...getVedTypes(vedTypes),
-            ...getRegion$1(region),
+            ...getRegion(region),
             ...(partnerComments ? { partnerComments } : {}),
             ...(serviceType ? { typeForm: serviceType } : {}),
         };
         return Object.fromEntries(Object.entries(formatData)?.map(([k, v]) => [k, v?.key || v]));
     };
-    const getRegion$1 = (region) => region?.key || region?.text ? { region: region?.text || region?.key } : {};
+    const getRegion = (region) => region?.key || region?.text ? { region: region?.text || region?.key } : {};
     const getVedTypes = (vedTypes) => vedTypes
         ? {
             vedTypes: Object.fromEntries(VED_TYPES.map((v) => [v, v === vedTypes])),
@@ -2276,7 +2276,7 @@
 
     const renderContacts = () => (jsxs("div", { className: "space-y-m", children: [jsx(Heading, { headingType: "h6", title: "\u0418\u043B\u0438 \u0441\u0432\u044F\u0436\u0438\u0442\u0435\u0441\u044C \u0441 \u043D\u0430\u043C\u0438 \u0443\u0434\u043E\u0431\u043D\u044B\u043C \u0441\u043F\u043E\u0441\u043E\u0431\u043E\u043C", className: "@xl:text-center" }), jsxs("div", { className: "flex sm:justify-center gap-xl", children: [jsxs("a", { className: "flex gap-s items-center text-primary-text no-underline", href: `tel:8 (800) 200-78-70`, "aria-label": "\u0442\u0435\u043B\u0435\u0444\u043E\u043D 8 (800) 200-78-70", children: [jsx(Img, { image: { icon: 'PhoneIcon' }, width: "24", height: "24" }), jsx("span", { children: "8 (800) 200-78-70" })] }), jsxs("a", { className: "flex gap-s items-center text-primary-text no-underline", "aria-label": "\u043F\u043E\u0447\u0442\u0430 ved@rshb.ru", href: `mailto:ved@rshb.ru`, children: [jsx(Img, { image: { icon: 'MailIcon' }, width: "24", height: "24" }), jsx("span", { children: "ved@rshb.ru" })] })] })] }));
 
-    const API$1 = LeadServiceAPI();
+    const API = LeadServiceAPI();
     const ApplicationForm = JSX(
     // eslint-disable-next-line max-lines-per-function
     ({ className, title, typeForm = '', sections = [], button, link, endpoint, additionalParams, isContacts, data, ...rest }) => {
@@ -2289,8 +2289,8 @@
             if (!isValidationSuccess(feedbackValidator(formData))) {
                 return 'Fail';
             }
-            const formatData = getFormatData$1({ ...formData, ...additionalParams });
-            const status = (await API$1.send(formatData, endpoint === 'lead')) ? 'OK' : 'Fail';
+            const formatData = getFormatData({ ...formData, ...additionalParams });
+            const status = (await API.send(formatData, endpoint === 'lead')) ? 'OK' : 'Fail';
             setResponseType(status);
             if (status) {
                 const responseTypeDialog = useResponseTypeDialog({ responseType: status, typeForm });
@@ -2333,16 +2333,6 @@
         'consentToReceiveMaterials',
     ];
 
-    const getFormatData = (data) => {
-        const { region, ...usedData } = data;
-        const formatData = {
-            ...usedData,
-            ...getRegion(region),
-        };
-        return Object.fromEntries(Object.entries(formatData)?.map(([k, v]) => [k, v?.key || v]));
-    };
-    const getRegion = (region) => region?.key || region?.text ? { region: region?.text || region?.key } : {};
-
     const initialFormState = {
         typeForm: '',
         region: { key: '', text: '' },
@@ -2442,27 +2432,282 @@
 
     const renderSubmitButton = (button, className) => (jsx(Button, { className: style('w-full @xl:w-auto', className), type: "submit", children: button?.text ? button.text : 'Отправить заявку' }));
 
-    const API = LeadServiceAPI();
-    const ApplicationLeadForm = JSX(
-    // eslint-disable-next-line max-lines-per-function
-    ({ className, title, typeForm = '', sections = [], button, endpoint, ...rest }) => {
-        const inputs = (sections?.flatMap((_) => _?.inputs) || []);
-        const initialFormState = getInitialFormState(inputs, typeForm);
-        const [responseType, setResponseType] = useState('');
+    const getAthorizationHeaders = () => {
+        const token = sessionStorage.getItem('accessToken');
+        return token ? { Authorization: `Bearer ${token}` } : null;
+    };
+    const isJSON = (response) => response.headers.get('Content-Type') === 'application/json';
+    const request = async (url, method, body) => await fetch('https://retail-light-api.cprb.dev.rshbdev.ru/api/v1' + url, {
+        method,
+        headers: {
+            'Content-Type': 'application/json',
+            ...getAthorizationHeaders(),
+        },
+        credentials: 'include',
+        body: body ? JSON.stringify(body) : null,
+    }).then((response) => (isJSON(response) ? response.json() : response));
+    const saveToken = (data) => {
+        sessionStorage.setItem('accessToken', data.access_token);
+        sessionStorage.setItem('refreshToken', data.refresh_token);
+    };
+    const RETAIL_API = {
+        CreateUserProfile: async (body) => await request('/public-data/createUserProfile', 'POST', body),
+        UpdateUserProfile: async (body) => await request('/user-data/updateUserProfile', 'PUT', body),
+        CreateDraftTask: async (body) => await request('/user-data/createDraftTask', 'POST', body),
+        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),
+    };
+
+    const getUpdateUserProfileData = (profileId, formData) => {
+        const { name = '', surname = '', middleName = '', birthday = '', phone = '', email = '', processPersonalDataLeadFlg, consentProviderFlg, consentPfrFlg, consentPhotoFlg, consentAssignmentClaimsFlg, consentCollectionFlg, consentInformFlg, } = formData;
+        return {
+            profile: {
+                id: profileId,
+                name,
+                surname,
+                midname: middleName,
+                birthDate: birthday && formatDate(birthday, true),
+                email,
+                phone: formatPhone(phone),
+                processPersonalDataLeadFlg: Boolean(processPersonalDataLeadFlg),
+                consentProviderFlg: Boolean(consentProviderFlg),
+                consentPfrFlg: Boolean(consentPfrFlg),
+                consentPhotoFlg: Boolean(consentPhotoFlg),
+                consentAssignmentClaimsFlg: Boolean(consentAssignmentClaimsFlg),
+                consentCollectionFlg: Boolean(consentCollectionFlg),
+                consentInformFlg: Boolean(consentInformFlg),
+            },
+        };
+    };
+
+    /* eslint-disable max-params */
+    const getUpdateUserTaskData = (participantId, taskId, profileId, formatData) => ({
+        sendToBank: true,
+        taskKind: 'SHORT',
+        task: {
+            taskSource: globalThis.location.origin,
+            id: taskId,
+            participants: [
+                {
+                    birthDate: formatData?.birthDate,
+                    id: participantId,
+                    midname: formatData?.midname,
+                    name: formatData?.name,
+                    surname: formatData?.surname,
+                    profile: {
+                        id: profileId,
+                    },
+                    participantContacts: [
+                        {
+                            contactTypeCd: {
+                                key: 'EMAIL',
+                            },
+                            value: formatData?.email,
+                        },
+                        {
+                            contactTypeCd: {
+                                key: 'MAIN_PHONE',
+                            },
+                            value: formatData?.phone,
+                        },
+                    ],
+                    roleCd: {
+                        key: 'BORROWER',
+                        value: 'Заемщик',
+                    },
+                },
+            ],
+        },
+    });
+
+    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" }) })));
+
+    const Timer = JSX(({ time, setTime, className }) => {
+        useEffect(() => {
+            const timer = setInterval(() => {
+                setTime(time - 1);
+            }, 1000);
+            if (time === 0) {
+                clearInterval(timer);
+            }
+            return () => {
+                clearInterval(timer);
+            };
+        }, [time]);
+        return jsx("span", { className: className, children: secondsToMinSecPadded(time) });
+    });
+    const secondsToMinSecPadded = (time) => {
+        const minutes = `${Math.floor(time / 60)}`.padStart(2, '0');
+        const seconds = `${time % 60}`.padStart(2, '0');
+        return `${minutes}:${seconds}`;
+    };
+
+    const InputCode = JSX(({ values, setValues, hasError }) => {
+        const [activeIndex, setActiveIndex] = useState(0);
+        const inputRefs = useRef([]);
+        useEffect(() => {
+            inputRefs.current?.[activeIndex]?.focus();
+        }, [activeIndex]);
+        const handleChange = useCallback((index) => (event) => {
+            const { value } = event.currentTarget;
+            const isLastIndex = index === values.length - 1;
+            const isMultipleCharacters = value.length > 1;
+            if (isLastIndex && isMultipleCharacters) {
+                return;
+            }
+            setValues(values.map((_, i) => (i === index ? value : _)));
+            setActiveIndex(index + 1);
+        }, [values]);
+        const handleKeyDown = useCallback((currentIndex) => (event) => {
+            const { key } = event;
+            if (key === 'Backspace' && !values[currentIndex]) {
+                const previousIndex = currentIndex > 0 ? currentIndex - 1 : values.length - 1;
+                const updatedValues = values.map((value, index) => (index === previousIndex ? '' : value));
+                setValues(updatedValues);
+                setActiveIndex(previousIndex);
+            }
+        }, [values]);
+        const handlePaste = useCallback((event) => {
+            event.preventDefault();
+            const pastedData = event.clipboardData.getData('text');
+            const updatedValues = values.map((_, idx) => (idx < pastedData.length ? pastedData[idx] : _));
+            setValues(updatedValues);
+            setActiveIndex(updatedValues.length - 1);
+        }, [values]);
+        return (jsxs("div", { className: "flex flex-col gap-2 text-center", children: [jsx("div", { children: values.map((value, index) => (jsx("input", { type: "number", maxLength: 1, value: value, onChange: handleChange(index), onPaste: handlePaste, ref: (ref) => {
+                            if (!inputRefs.current) {
+                                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] }));
+    });
+    const getInputStyle = (index, values, hasError = false) => {
+        const isInputEmpty = !values[index];
+        return `w-16 h-20 text-3xl text-center p-2 m-2 border ${hasError && isInputEmpty ? 'border-error' : 'border-gray'} rounded-md caret-transparent outline-none`;
+    };
+
+    const SubmitButton = JSX(({ isDisabled, onClick, text }) => {
+        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 [hasError, setHasError] = useState(false);
+        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 handleSubmit = useCallback(async () => {
+            try {
+                setIsLoading(true);
+                await RETAIL_API.CheckCode({
+                    smsText: values.join(''),
+                    smsCodesSetName: { key: 'AUTHENTICATION' },
+                });
+                globalThis.location.href = href;
+                close();
+                onClose && onClose();
+            }
+            catch {
+                setIsLoading(false);
+                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] }) }));
+    });
+
+    const useVerifyPhoneDialog = (props) => {
+        const { open, close } = useDialogManager();
+        return {
+            open: (options = {}) => open(jsx(VerifyPhoneDialog, { ...props }), options),
+            close,
+        };
+    };
+
+    const useApplicationLeadApi = (inputs, programId) => {
+        const [responseStatus, setResponseStatus] = useState('');
+        // eslint-disable-next-line consistent-return
         const handleSubmit = useCallback(async (formData) => {
             const feedbackValidator = objectValidator(getObjectValidator(inputs));
             if (!isValidationSuccess(feedbackValidator(formData))) {
                 return 'Fail';
             }
-            const formatData = getFormatData(formData);
-            const status = (await API.send(formatData, endpoint === 'lead')) ? 'OK' : 'Fail';
-            setResponseType(status);
-            if (status) {
-                const responseTypeDialog = useResponseTypeDialog({ responseType: status, typeForm });
-                responseTypeDialog.open();
+            try {
+                const { profile } = await RETAIL_API.CreateUserProfile({
+                    profile: { phone: formatPhone(formData.phone) },
+                });
+                const profileId = profile?.id;
+                if (profileId && formData?.phone) {
+                    const handleSuccessVerify = async () => {
+                        try {
+                            await RETAIL_API.UpdateUserProfile(getUpdateUserProfileData(profileId, formData));
+                            const { taskId, participantId } = await RETAIL_API.CreateDraftTask({
+                                profileId,
+                                programId,
+                            });
+                            await RETAIL_API.UpdateUserTask(getUpdateUserTaskData(participantId, taskId, profileId, formData));
+                            setResponseStatus('OK');
+                        }
+                        catch {
+                            setResponseStatus('Fail');
+                        }
+                    };
+                    // eslint-disable-next-line react-hooks/rules-of-hooks
+                    const verifyPhoneDialog = useVerifyPhoneDialog({
+                        onClose: handleSuccessVerify,
+                        ...verifyPhoneContent(formData?.phone),
+                    });
+                    verifyPhoneDialog.open();
+                }
+            }
+            catch {
+                setResponseStatus('Fail');
             }
-            return status;
         }, []);
+        return {
+            handleSubmit,
+            responseStatus,
+        };
+    };
+    const verifyPhoneContent = (phone) => ({
+        title: 'Подтвердите номер телефона',
+        description: `Мы отправили код на ${phone}`,
+        phone: formatPhone(phone),
+        textButton: 'Оформить',
+        __html: `<span>Вводя код, я подтверждаю, что ознакомлен и подписываю:</span>
+              <ul><li>соглашение о порядке использования простой электронной подписи,
+              </li><li>согласие на обработку персональных данных,
+              </li><li>предоставление и подписание прочих согласий Банка,
+              </li><li>согласие на запрос в ПФР</li></ul>`,
+        href: '/credit-lead',
+    });
+
+    const useInitApplicationLead = () => {
+        useEffect(() => {
+            sessionStorage.removeItem('accessToken');
+            sessionStorage.removeItem('refreshToken');
+        }, []);
+    };
+
+    const ApplicationLeadForm = JSX(({ className, title, programId, typeForm = '', sections = [], button, ...rest }) => {
+        const inputs = (sections?.flatMap((_) => _?.inputs) || []);
+        const initialFormState = getInitialFormState(inputs, typeForm);
+        const [responseType, setResponseType] = useState('');
+        useInitApplicationLead();
+        const { handleSubmit, responseStatus } = useApplicationLeadApi(inputs, programId || '');
+        if (responseStatus) {
+            const responseTypeDialog = useResponseTypeDialog({ responseType: responseStatus, typeForm });
+            responseTypeDialog.open();
+        }
         const [, { field, onSubmit, reset }] = useForm(initialFormState, { onSubmit: handleSubmit });
         useEffect(() => {
             if (responseType === 'OK') {
@@ -5568,10 +5813,6 @@
     const isClient = !isSSR();
     const ClientOnly = JSX(({ children }) => (isClient ? children : null));
 
-    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" }) })));
-
     const MapMarkerClusterIcon = '/icons/MapMarkerClusterIcon.svg';
     const MapMarkerClusterYellowIcon = '/icons/MapMarkerClusterYellowIcon.svg';
     function renderClusterer({ yandexMaps, map, points, isLoad, }) {
@@ -6944,7 +7185,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.580";
+    const packageVersion = "0.14.582";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;