@redneckz/wildless-cms-uni-blocks 0.14.1014 → 0.14.1015

package/bundle/api/LeadServiceAPI.d.ts

@@ -28,6 +28,11 @@ declare type CheckCodeResponse = {
     reqId?: string;
     status?: string;
 } | null;
+declare type VerifiedLeadRequest = {
+    requestId: string;
+    confirmationCode: string;
+    leadRequest: LeadRequest;
+};
 declare type PhoneOnly = {
     phone?: string;
 };
@@ -36,10 +41,12 @@ export declare type sendProps = {
     router: Router;
     endpoint?: EndpointType;
 };
+declare type SubmitBody = PhoneOnly | LeadRequest | CheckCodeProps | VerifiedLeadRequest;
 export declare function LeadServiceAPI(): {
     send: ({ body, router, endpoint }: sendProps) => Promise<any>;
     sendCode: ({ phone }: PhoneOnly) => Promise<string | null>;
     checkCode: ({ reqId, code, body, router, endpoint, }: CheckCodeProps) => Promise<CheckCodeResponse>;
     sendPhoneCallRequest: (body: LeadRequest, endpoint?: EndpointType) => Promise<any>;
 };
+export declare const LeadServiceFetch: (url: string, submitBody: SubmitBody) => Promise<Response>;
 export {};

package/bundle/api/sendUserSurvey.d.ts

@@ -0,0 +1,8 @@
+export declare type UserSurveyRequest = {
+    rate: number;
+    reason?: string;
+    message?: string;
+    url: string;
+    type: string;
+};
+export declare const sendUserSurvey: (body: UserSurveyRequest) => Promise<Response | null>;

package/bundle/bundle.umd.js

@@ -1345,6 +1345,7 @@
     const DIALOG_STYLE = {
         sm: 'max-w-sm top-1/3',
         lg: 'max-w-lg',
+        xl: 'max-w-xl',
         '4xl': 'max-w-4xl',
         none: 'mt-0',
     };
@@ -3322,7 +3323,7 @@
         horizontal: '@lg:flex-row',
         vertical: '',
     };
-    const RadioButtonGroup = JSX(({ label, items, value, className, disabled = false, orientation = 'horizontal', onChange: onChangeCheckedItem, }) => (jsxs("div", { className: "grid gap-xs whitespace-nowrap", children: [label ? (jsx("div", { role: "radiogroup", "aria-label": label, children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: label }) })) : null, jsx("div", { className: style('flex flex-col gap-s', orientationStyleMap[orientation], className), role: "radiogroup", "aria-label": "\u0413\u0440\u0443\u043F\u043F\u0430 \u043A\u043D\u043E\u043F\u043E\u043A", children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, value: value === id, onChange: () => onChangeCheckedItem?.(id), disabled: disabled, name: id }, String(id)))) })] })));
+    const RadioButtonGroup = JSX(({ label, items, value, className, disabled = false, orientation = 'horizontal', onChange: onChangeCheckedItem, }) => (jsxs("div", { className: "grid gap-xs whitespace-nowrap", children: [label ? (jsx("div", { role: "radiogroup", "aria-label": label, children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: label }) })) : null, jsx("div", { className: style('flex flex-col gap-s', orientationStyleMap[orientation], className), role: "radiogroup", "aria-label": "\u0413\u0440\u0443\u043F\u043F\u0430 \u043A\u043D\u043E\u043F\u043E\u043A", children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, value: value === id, onChange: () => onChangeCheckedItem?.(id, text), disabled: disabled, name: id }, String(id)))) })] })));
 
     const VedField = JSX(({ field, input }) => {
         const handleChange = useCallback((_) => {
@@ -11021,7 +11022,7 @@
         DELIVERY_CREDIT_CARD_CONTENT,
     ];
 
-    const STEPS$2 = 6;
+    const STEPS$3 = 6;
     const TITLES = [
         'Параметры карты',
         'Персональные данные',
@@ -11036,7 +11037,7 @@
         const scrollToTop = useCallback(() => formContainerRef?.current?.scrollIntoView({ behavior: 'smooth' }), [formContainerRef]);
         useEffect(updateRefreshToken, []);
         const handleNextStep = useCallback(() => {
-            setStep((_) => Math.min(_ + 1, STEPS$2));
+            setStep((_) => Math.min(_ + 1, STEPS$3));
             scrollToTop();
         }, []);
         const handlePrevStep = useCallback(() => {
@@ -11046,7 +11047,7 @@
         }, []);
         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$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))) })] }) }));
+        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$3 })), 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 = [] }) => {
@@ -11607,7 +11608,7 @@
         DELIVERY_CREDIT_CONTENT,
     ];
 
-    const STEPS$1 = 4;
+    const STEPS$2 = 4;
     const STEP_TITLES$1 = [
         '',
         'Персональные данные',
@@ -11621,7 +11622,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(() => {
@@ -11632,7 +11633,7 @@
         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))) })] }) }));
+        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$2 })), 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 = [] }) => {
@@ -12175,7 +12176,7 @@
         DEBIT_CARD_CONTENT,
     ];
 
-    const STEPS = 2;
+    const STEPS$1 = 2;
     const STEP_TITLES = ['', 'Персональные данные', 'Платежная система'];
     const DebitForm = UniBlock(({ className, ...rest }) => {
         const [step, setStep] = useState(0);
@@ -12183,7 +12184,7 @@
         const scrollToTop = useCallback(() => formContainerRef?.current?.scrollIntoView({ behavior: 'smooth' }), [formContainerRef]);
         useEffect(updateRefreshToken, []);
         const handleNextStep = useCallback(() => {
-            setStep((_) => Math.min(_ + 1, STEPS));
+            setStep((_) => Math.min(_ + 1, STEPS$1));
             scrollToTop();
         }, []);
         const handlePrevStep = useCallback(() => {
@@ -12198,7 +12199,7 @@
             setIsFormFinished();
             scrollToTop();
         }, []);
-        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))) })] }) }));
+        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$1 })), 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';
@@ -14131,6 +14132,128 @@
             }, role: "dialog", title: "\u0412\u0441\u043F\u043B\u044B\u0432\u0430\u044E\u0449\u0435\u0435 \u043E\u043A\u043D\u043E", children: popup.popup })) : null;
     });
 
+    const sendUserSurvey = async (body) => {
+        try {
+            const response = await LeadServiceFetch(`${API_BASE_URI}/survey`, body);
+            return await response;
+        }
+        catch (e) {
+            return null;
+        }
+    };
+
+    const FinalStep = JSX(() => {
+        return (jsxs("div", { className: "flex flex-col items-center", children: [jsx(Heading, { className: "text-center", headingType: "h5", title: "\u0421\u043F\u0430\u0441\u0438\u0431\u043E \u0437\u0430 \u0443\u0447\u0430\u0441\u0442\u0438\u0435!" }), jsx(Paragraph, { children: "\u0412\u0430\u0448\u0435 \u043C\u043D\u0435\u043D\u0438\u0435 \u043E\u0447\u0435\u043D\u044C \u0432\u0430\u0436\u043D\u043E \u0434\u043B\u044F \u043D\u0430\u0441" })] }));
+    });
+
+    const Star = JSX(({ value, hover, rating, setHover, setRating }) => {
+        const fillColor = value <= (hover || rating) ? '#42AB44' : '#C9CACC';
+        return (jsx("div", { onClick: () => setRating?.(value), onMouseEnter: () => setHover?.(value), onMouseLeave: () => setHover?.(null), children: jsx("svg", { "data-rating": value, fill: fillColor, width: "57", height: "57", viewBox: "0 0 57 57", children: jsx("path", { d: "M47.7803 18.2879L47.7836 18.2884C50.566 18.7521 53.0867 20.1374 53.9176 22.7226C54.7498 25.3116 53.5025 27.9027 51.4977 29.8954L51.4942 29.8989L45.7132 35.6799C45.5729 35.8202 45.3591 36.1532 45.2186 36.6438C45.0796 37.1295 45.0808 37.5314 45.1257 37.7381L45.1268 37.743L46.78 44.8909C47.4787 47.9228 47.3175 51.2217 44.8924 52.9896C42.4714 54.7546 39.2808 53.9093 36.5999 52.3257L29.6214 48.1946C29.4392 48.0866 29.0426 47.96 28.5087 47.96C27.9816 47.96 27.5736 48.0831 27.3687 48.2004L27.3634 48.2035L20.4041 52.3232L20.4019 52.3246C17.7218 53.9145 14.5351 54.7459 12.1155 52.9803C9.69339 51.213 9.51826 47.9236 10.22 44.8909L11.8731 37.743L11.8743 37.7379C11.9191 37.5311 11.9203 37.1293 11.7813 36.6438C11.6409 36.1532 11.4271 35.8202 11.2867 35.6799L5.50006 29.8932C3.50738 27.9006 2.26429 25.3118 3.08972 22.7269C3.91586 20.1398 6.43161 18.7525 9.21638 18.2884L16.6527 17.0529L16.6552 17.0525C16.8169 17.0243 17.1619 16.8935 17.5523 16.604C17.945 16.3128 18.1668 16.022 18.2378 15.877L18.2462 15.8598L22.3508 7.65087L22.352 7.6485C23.629 5.08222 25.7146 3.01416 28.4796 3.01416C31.2412 3.01416 33.3328 5.07832 34.6215 7.64213L34.6236 7.64649L38.7303 15.8598L38.75 15.9001C38.7884 15.9807 38.8225 16.0591 38.8511 16.1283C38.9197 16.1891 39.0148 16.2702 39.1464 16.3781C39.1829 16.394 39.242 16.4185 39.3288 16.4505C39.5779 16.5424 39.9286 16.6512 40.3732 16.7719C41.2573 17.0121 42.3688 17.2611 43.4823 17.4894C44.5886 17.7163 45.6648 17.9163 46.4667 18.0598C46.8669 18.1315 47.1972 18.1888 47.4266 18.2281L47.6909 18.2729L47.7589 18.2843L47.7803 18.2879Z" }) }) }));
+    });
+
+    const stars$1 = new Array(5).fill(Star);
+    const TITLE$1 = {
+        NPS: 'Оцените, пожалуйста, от 1 до 5 насколько вероятно, что вы порекомендуете Россельхозбанк коллегам, друзьям и знакомым?',
+        CSI: 'Оцените, пожалуйста, удовлетворённость пользования сайтом',
+    };
+    const FirstStep = JSX(({ currentRating, surveyType, isSending, setCurrentRating, onNextStep, onSubmit }) => {
+        const [currentHover, setCurrentHover] = useState();
+        const setRatingFn = (value) => {
+            setCurrentRating(value);
+            if (value < 5) {
+                onNextStep();
+            }
+        };
+        return (jsxs("div", { className: "flex flex-col gap-xl items-center", children: [jsx(Heading, { className: "text-center", headingType: "h5", title: TITLE$1[surveyType] }), jsx("div", { className: "flex justify-center", children: stars$1.map((StarItem, index) => (jsx(StarItem, { value: index + 1, rating: currentRating, hover: currentHover, setRating: setRatingFn, setHover: setCurrentHover, className: "modal-feedback__star" }, index))) }), currentRating === 5 ? (jsx(SubmitButton$1, { onClick: () => onSubmit(), isLoading: isSending, children: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C" })) : null] }));
+    });
+
+    const stars = new Array(5).fill(Star);
+    const TITLE = 'Что бы мы могли улучшить?';
+    const SecondStep = JSX(({ currentRating, currentReason, reasons = [], isSending, setCurrentReason, onSubmit }) => {
+        const [comment, setComment] = useState();
+        const handleReasonChange = (id, text) => {
+            setCurrentReason?.({
+                id,
+                text,
+            });
+        };
+        return (jsxs("div", { className: "flex flex-col gap-xl items-center", children: [jsx(Heading, { className: "text-center", headingType: "h5", title: TITLE }), jsx("div", { className: "flex justify-center", children: stars.map((StarItem, index) => (jsx(StarItem, { value: index + 1, rating: currentRating }, index))) }), jsx(RadioButtonGroup, { className: "w-full text-wrap", orientation: "vertical", items: reasons, value: currentReason?.id, onChange: handleReasonChange }), currentReason?.text === 'Другое' ? (jsx(Input, { className: "w-full", placeholder: "\u041D\u0430\u043F\u0438\u0448\u0438\u0442\u0435, \u043F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0441\u0432\u043E\u0439 \u0432\u0430\u0440\u0438\u0430\u043D\u0442 \u043E\u0442\u0432\u0435\u0442\u0430", isTextarea: true, value: comment, onChange: setComment, maxLength: 255 })) : null, currentReason ? (jsx(SubmitButton$1, { onClick: () => onSubmit(comment), isLoading: isSending, children: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C" })) : null] }));
+    });
+
+    const STEPS = [FirstStep, SecondStep, FinalStep];
+    const LAST_STEP_INDEX = 2;
+    const UserSurveyDialog = UniBlock(({ onClose = noop, reasonsSource = {} }) => {
+        const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
+        const [currentRating, setCurrentRating] = useState(0);
+        const [currentReason, setCurrentReason] = useState();
+        const [step, setStep] = useState(0);
+        const userSurveyStore = useLocalStore();
+        const surveyType = userSurveyStore.userSurvey?.lastShownType ?? 'NPS';
+        const { reasons } = reasonsSource;
+        const ActiveStep = STEPS[step];
+        const handleNextStep = useCallback(() => {
+            setStep((_) => _ + 1);
+        }, []);
+        const handleSubmit = useCallback(async (message) => {
+            startSending();
+            await sendUserSurvey({
+                rate: currentRating,
+                reason: currentReason?.text,
+                message: getMessage(currentReason, message),
+                url: globalThis.location.href,
+                type: surveyType,
+            });
+            endSending();
+            setStep(LAST_STEP_INDEX);
+        }, [currentRating, currentReason]);
+        return (jsx(Dialog, { maxWidth: "xl", onClose: onClose, children: jsx(ActiveStep, { currentRating: currentRating, currentReason: currentReason, reasons: reasons, surveyType: surveyType, isSending: isSending, setCurrentReason: setCurrentReason, setCurrentRating: setCurrentRating, onSubmit: handleSubmit, onNextStep: handleNextStep }) }));
+    });
+    const getMessage = (currentReason, message) => {
+        if (currentReason?.text !== 'Другое') {
+            return undefined;
+        }
+        return message?.length ? message : 'Другое. Клиент не оставил комментариев';
+    };
+
+    const DELAY = 5 * 60 * 1000;
+    // Хук отвечает за показ пользователю опроса
+    const useUserSurveyDialog = () => {
+        const userSurveyDialog = useDialog(UserSurveyDialog);
+        const userSurveyStore = useLocalStore();
+        const sessionStore = useSessionStore();
+        const elapsedTime = sessionStore.surveyTimerStart
+            ? Date.now() - Number.parseInt(sessionStore.surveyTimerStart)
+            : 0;
+        const openUserSurveyDialog = () => {
+            userSurveyStore.userSurvey = {
+                lastShownType: userSurveyStore.userSurvey?.lastShownType === 'NPS' ? 'CSI' : 'NPS',
+                nextDueAt: getTimeAfter30days(),
+            };
+            userSurveyDialog.open({
+                reasonsSource: {
+                    $ref: '/wcms-resources/user-survey-reasons.json',
+                },
+            });
+        };
+        useEffect(() => {
+            // Опрос показывается только если ранее пользоваютелю не показывался опрос или с того момента прошел месяц
+            if (!userSurveyStore.userSurvey || userSurveyStore.userSurvey?.nextDueAt <= Date.now()) {
+                // начинаем отсчитывать время от первого захода на сайт
+                if (!sessionStore.surveyTimerStart) {
+                    sessionStore.surveyTimerStart = Date.now().toString();
+                }
+                // Опрос показывается спустя 5 минут нахождения на сайте
+                const timeout = setTimeout(openUserSurveyDialog, DELAY - elapsedTime);
+                return () => {
+                    clearTimeout(timeout);
+                };
+            }
+            return noop;
+        }, []);
+    };
+    // Отсчитываем месяц с текущей даты
+    const getTimeAfter30days = () => Date.now() + 30 * 24 * 60 * 60 * 1000;
+
     const HEADER_SLOT = 'header';
     const FOOTER_SLOT = 'footer';
     const STICKY_FOOTER_SLOT = 'sticky-footer';
@@ -14141,6 +14264,7 @@
         const isFrame = isIFrame();
         useClickHandler();
         useDefaultLocation();
+        useUserSurveyDialog();
         const options = {
             key: '',
             page: { slots, blocks, fallback, ...resolvedPageContent },
@@ -14163,7 +14287,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.1013";
+    const packageVersion = "0.14.1014";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;