@redneckz/wildless-cms-uni-blocks 0.14.1021 → 0.14.1023

package/mobile/src/ui-kit/UserSurveyDialog/UserSurveyDialogContent.ts

@@ -2,9 +2,11 @@ import { type JSONRefObject } from '../../data/JSONRefObject';
 import { type OnCloseProps } from '../../model/OnCloseProps';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
+export type UserSurveyType = 'NPS' | 'CSI';
+
 export type UserSurveyStoreSlice = {
   userSurvey: {
-    lastShownType: 'NPS' | 'CSI';
+    lastShownType: UserSurveyType;
     nextDueAt: number;
   };
 };
@@ -18,7 +20,7 @@ export type StepProps = {
   currentRating?: number;
   currentReason?: Reason;
   reasons?: Reason[];
-  surveyType: 'NPS' | 'CSI';
+  surveyType: UserSurveyType;
   isSending: boolean;
   setCurrentReason: (value: Reason) => void;
   setCurrentRating: (value: number) => void;
@@ -28,4 +30,5 @@ export type StepProps = {
 
 export interface UserSurveyDialogContent extends OnCloseProps, UniBlockContent {
   reasonsSource?: { reasons: Reason[] } | JSONRefObject;
+  isAfterTargetAction?: boolean;
 }

package/mobile/src/ui-kit/UserSurveyDialog/useUserSurveyDialog.ts

@@ -1,4 +1,4 @@
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useLocalStore } from '@redneckz/uni-jsx/lib/Store/useLocalStore';
 import { useSessionStore } from '@redneckz/uni-jsx/lib/Store/useSessionStore';
 import { noop } from '../../utils/noop';
@@ -10,47 +10,64 @@ const DELAY = 5 * 60 * 1000;
 
 type SurveyTimerStore = {
   surveyTimerStart: string;
+  surveyTimerId: NodeJS.Timeout;
+  isSurveySkipped: boolean;
 };
 
 // Хук отвечает за показ пользователю опроса
-export const useUserSurveyDialog = () => {
+export const useUserSurveyDialog = (withoutTimer?: boolean) => {
   const userSurveyDialog = useDialog(UserSurveyDialog);
   const userSurveyStore = useLocalStore<UserSurveyStoreSlice>();
   const sessionStore = useSessionStore<SurveyTimerStore>();
+  const surveyTimer = sessionStore.surveyTimerId;
+  const isSurveySkipped = sessionStore.isSurveySkipped;
   const elapsedTime = sessionStore.surveyTimerStart
     ? Date.now() - Number.parseInt(sessionStore.surveyTimerStart)
     : 0;
+  const isShowSurvey =
+    !isSurveySkipped &&
+    (!userSurveyStore.userSurvey || userSurveyStore.userSurvey?.nextDueAt <= Date.now());
 
-  const openUserSurveyDialog = () => {
-    userSurveyStore.userSurvey = {
-      lastShownType: userSurveyStore.userSurvey?.lastShownType === 'NPS' ? 'CSI' : 'NPS',
-      nextDueAt: getTimeAfter30days(),
-    };
+  const handleCloseSurvey = useCallback(() => {
+    sessionStore.isSurveySkipped = true;
+  }, []);
+
+  const openUserSurveyDialog = useCallback((isAfterTargetAction?: boolean) => {
     userSurveyDialog.open({
       reasonsSource: {
         $ref: '/wcms-resources/user-survey-reasons.json',
       },
+      isAfterTargetAction,
+      onClose: handleCloseSurvey,
     });
-  };
+  }, []);
+
+  const handleOpenSurveyAction = useCallback(() => {
+    if (isShowSurvey) {
+      surveyTimer && clearTimeout(surveyTimer);
+      openUserSurveyDialog(true);
+    }
+  }, [surveyTimer, isShowSurvey]);
 
   useEffect(() => {
     // Опрос показывается только если ранее пользоваютелю не показывался опрос или с того момента прошел месяц
-    if (!userSurveyStore.userSurvey || userSurveyStore.userSurvey?.nextDueAt <= Date.now()) {
+    if (!withoutTimer && isShowSurvey) {
       // начинаем отсчитывать время от первого захода на сайт
       if (!sessionStore.surveyTimerStart) {
         sessionStore.surveyTimerStart = Date.now().toString();
       }
       // Опрос показывается спустя 5 минут нахождения на сайте
       const timeout = setTimeout(openUserSurveyDialog, DELAY - elapsedTime);
+      sessionStore.surveyTimerId = timeout;
 
       return () => {
         clearTimeout(timeout);
+        sessionStore.surveyTimerId = null;
       };
     }
 
     return noop;
-  }, []);
-};
+  }, [isShowSurvey]);
 
-// Отсчитываем месяц с текущей даты
-const getTimeAfter30days = () => Date.now() + 30 * 24 * 60 * 60 * 1000;
+  return handleOpenSurveyAction;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.1021",
+  "version": "0.14.1023",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/api/sendUserSurvey.ts

@@ -7,6 +7,7 @@ export type UserSurveyRequest = {
   message?: string;
   url: string;
   type: string;
+  ip: string;
 };
 
 export const sendUserSurvey = async (body: UserSurveyRequest) => {

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -8,6 +8,7 @@ import { getConsentDataProcessing } from '../../ui-kit/FormField/getConsentDataP
 import { getFormValidator } from '../../ui-kit/FormField/getObjectValidator';
 import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { ResponseTypeDialog } from '../../ui-kit/ResponseTypeDialog/ResponseTypeDialog';
+import { useUserSurveyDialog } from '../../ui-kit/UserSurveyDialog/useUserSurveyDialog';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
@@ -71,6 +72,7 @@ export const ApplicationForm = UniBlock<ApplicationFormProps>(
     const formValidator = useMemo(() => getFormValidator(inputs), [inputs]);
     const responseTypeDialog = useDialog(ResponseTypeDialog);
     const verifyPhoneDialog = useDialog(VerifyPhoneDialog);
+    const openUserSurvey = useUserSurveyDialog(true);
 
     const handleSubmit = useCallback(
       async (formData: FormState, ev: PreventableEventWithTarget) => {
@@ -88,6 +90,7 @@ export const ApplicationForm = UniBlock<ApplicationFormProps>(
             verifyPhoneDialog,
             onSuccess,
             withSnowplow,
+            openUserSurvey,
           },
           endpoint,
         );

package/src/components/ApplicationForm/handlers.ts

@@ -19,6 +19,7 @@ export type HandlerProps = {
   verifyPhoneDialog?: any;
   responseTypeDialog?: any;
   onSuccess?: () => void;
+  openUserSurvey?: () => void;
   withSnowplow?: boolean;
 };
 
@@ -32,8 +33,10 @@ export const handleInitCorporateLead = async ({
   data = [],
   aspects = {},
   ev,
+  openUserSurvey,
 }: HandlerProps) => {
   const { phone } = formatData;
+  const hasSurveyAspect = data?.find((_) => _.aspectName === 'openUserSurvey');
 
   const response = await API.sendCode({ phone: String(phone) });
 
@@ -56,6 +59,7 @@ export const handleInitCorporateLead = async ({
         id,
       });
 
+      hasSurveyAspect && openUserSurvey?.();
       handleAspects({
         aspectsAttributes: getAspectsWithInclude(data, snowplowParams),
         aspects,
@@ -74,13 +78,16 @@ export const handleCallback = async ({
   responseTypeDialog,
   onSuccess = noop,
   endpoint,
+  openUserSurvey,
 }: HandlerProps) => {
+  const hasSurveyAspect = data?.find((_) => _.aspectName === 'openUserSurvey');
   const response = await API.sendPhoneCallRequest(formatData, endpoint);
 
   onSuccess();
 
   if (response?.status === 'success') {
     responseTypeDialog.open({ ok: true, typeForm });
+    hasSurveyAspect && openUserSurvey?.();
     handleAspects({ aspectsAttributes: data, aspects, ev });
   } else if (response?.status === 'error') {
     responseTypeDialog.open({
@@ -104,12 +111,16 @@ export const handleDefault = async ({
   responseTypeDialog,
   endpoint,
   withSnowplow,
+  openUserSurvey,
 }: HandlerProps) => {
+  const hasSurveyAspect = data?.find((_) => _.aspectName === 'openUserSurvey');
   const response = await API.send({ body: formatData, router, endpoint });
   const ok = Boolean(response);
 
   responseTypeDialog.open({ ok });
+
   if (ok) {
+    hasSurveyAspect && openUserSurvey?.();
     const { requestId } = response;
     const { phone } = formatData;
     const utms = router.pathname.split('?')[1];

package/src/components/ApplicationLeadForm/getLeadFormTaskData.ts

@@ -127,6 +127,9 @@ export const getDebitLeadFormTaskData = ({
 
 const getTaskSource = (source: Nullable<string>) => {
   switch (source) {
+    case 'banki_ru': {
+      return 'banki_ru';
+    }
     case 'referal_sf': {
       return 'ReferalSF';
     }

package/src/components/DebitForm/DebitFormStatus.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Button } from '../../ui-kit/Button/Button';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { Text } from '../../ui-kit/Text/Text';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
@@ -19,6 +20,10 @@ type DebitFormStatusProps = UniBlockProps &
 const INTERNET_BANK_LINK = 'https://online.rshb.ru/d?l=dcNqSvOE';
 const PRELOGIN_LINK = 'https://online.rshb.ru/rshb-mbfl/webmodules/prelogin-zone';
 
+const openLink = (url: string) => {
+  window.location.href = url;
+};
+
 export const DebitFormStatus = JSX<DebitFormStatusProps>(
   ({ title, description: dsc, sectionInfo, buttonText, isDboClient, isOffice, ...props }) => {
     return (
@@ -36,12 +41,13 @@ export const DebitFormStatus = JSX<DebitFormStatusProps>(
         <SectionInfo items={sectionInfo} />
         {isOffice ? (
           <div className="flex flex-col md:flex-row md:gap-lg">
-            <LinkButton
-              href={PRELOGIN_LINK}
-              text="Узнать статус заявки"
-              version="primary"
+            <Button
+              onClick={() => openLink(PRELOGIN_LINK)}
               className="w-full mt-lg"
-            />
+              version="primary"
+            >
+              Узнать статус заявки
+            </Button>
             <LinkButton
               href="/natural"
               text="Вернуться на главную"

package/src/model/AspectsProps.ts

@@ -35,6 +35,13 @@ export type ChatBotAspect = {
   aspectName: 'openChatBot';
 };
 
+/**
+ * @title Отправить опрос пользователю
+ */
+export type UserSurveyAspect = {
+  aspectName: 'openUserSurvey';
+};
+
 /**
  * @title Отправить событие партнёру
  * @default {"aspectName": "partnersEvent", "params": {"partner": "", "typeAction": "targetaction"}}
@@ -62,7 +69,8 @@ export type AspectsDef =
   | YandexReachGoalAspect
   | MindboxEventAspect
   | SnowplowEventAspect
-  | PartnersEventAspect;
+  | PartnersEventAspect
+  | UserSurveyAspect;
 
 export type AspectsProps = {
   /** @title Дополнительные атрибуты */

package/src/ui-kit/UserSurveyDialog/FirstStep.tsx

@@ -8,7 +8,7 @@ import { type StepProps } from './UserSurveyDialogContent';
 const stars = new Array(5).fill(Star);
 
 const TITLE = {
-  NPS: 'Оцените, пожалуйста, от 1 до 5 насколько вероятно, что вы порекомендуете Россельхозбанк коллегам, друзьям и знакомым?',
+  NPS: 'Оцените, пожалуйста, от 1 до 5,\nнасколько вероятно, что вы порекомендуете Россельхозбанк коллегам, друзьям и знакомым?',
   CSI: 'Оцените, пожалуйста, удовлетворённость пользования сайтом',
 };
 
@@ -25,7 +25,11 @@ export const FirstStep = JSX<StepProps>(
 
     return (
       <div className="flex flex-col gap-xl items-center">
-        <Heading className="text-center" headingType="h5" title={TITLE[surveyType]} />
+        <Heading
+          className="text-center whitespace-pre-line"
+          headingType="h5"
+          title={TITLE[surveyType]}
+        />
         <div className="flex justify-center">
           {stars.map((StarItem, index) => (
             <StarItem

package/src/ui-kit/UserSurveyDialog/UserSurveyDialog.tsx

@@ -12,6 +12,7 @@ import {
   type Reason,
   type UserSurveyDialogContent,
   type UserSurveyStoreSlice,
+  type UserSurveyType,
 } from './UserSurveyDialogContent';
 
 export type UserSurveyDialogProps = UserSurveyDialogContent;
@@ -20,13 +21,13 @@ const STEPS = [FirstStep, SecondStep, FinalStep];
 const LAST_STEP_INDEX = 2;
 
 export const UserSurveyDialog = UniBlock<UserSurveyDialogProps>(
-  ({ onClose = noop, reasonsSource = {} }) => {
+  ({ onClose = noop, isAfterTargetAction = false, reasonsSource = {} }) => {
     const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
     const [currentRating, setCurrentRating] = useState<number>(0);
     const [currentReason, setCurrentReason] = useState<Reason>();
     const [step, setStep] = useState<number>(0);
     const userSurveyStore = useLocalStore<UserSurveyStoreSlice>();
-    const surveyType = userSurveyStore.userSurvey?.lastShownType ?? 'NPS';
+    const surveyType = getUserSurveyType(userSurveyStore.userSurvey?.lastShownType);
 
     const { reasons } = reasonsSource as { reasons: Reason[] };
 
@@ -46,8 +47,13 @@ export const UserSurveyDialog = UniBlock<UserSurveyDialogProps>(
           message: getMessage(currentReason, message),
           url: globalThis.location.href,
           type: surveyType,
+          ip: isAfterTargetAction ? 'after_target_action' : 'time_on_site',
         });
         endSending();
+        userSurveyStore.userSurvey = {
+          lastShownType: surveyType,
+          nextDueAt: getTimeAfter30days(),
+        };
         setStep(LAST_STEP_INDEX);
       },
       [currentRating, currentReason],
@@ -78,3 +84,16 @@ const getMessage = (currentReason?: Reason, message?: string) => {
 
   return message?.length ? message : 'Другое. Клиент не оставил комментариев';
 };
+
+// Отсчитываем месяц с текущей даты
+const getTimeAfter30days = () => Date.now() + 30 * 24 * 60 * 60 * 1000;
+
+// Если пользователь проходил опрос то показываем другой, иначе показываем случайный тип опроса
+const getUserSurveyType = (lastShownType?: UserSurveyType) => {
+  console.log('Расчитал');
+  if (lastShownType) {
+    return lastShownType === 'NPS' ? 'CSI' : 'NPS';
+  }
+
+  return ['NPS', 'CSI'][Date.now() % 2] as UserSurveyType;
+};

package/src/ui-kit/UserSurveyDialog/UserSurveyDialogContent.ts

@@ -2,9 +2,11 @@ import { type JSONRefObject } from '../../data/JSONRefObject';
 import { type OnCloseProps } from '../../model/OnCloseProps';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
+export type UserSurveyType = 'NPS' | 'CSI';
+
 export type UserSurveyStoreSlice = {
   userSurvey: {
-    lastShownType: 'NPS' | 'CSI';
+    lastShownType: UserSurveyType;
     nextDueAt: number;
   };
 };
@@ -18,7 +20,7 @@ export type StepProps = {
   currentRating?: number;
   currentReason?: Reason;
   reasons?: Reason[];
-  surveyType: 'NPS' | 'CSI';
+  surveyType: UserSurveyType;
   isSending: boolean;
   setCurrentReason: (value: Reason) => void;
   setCurrentRating: (value: number) => void;
@@ -28,4 +30,5 @@ export type StepProps = {
 
 export interface UserSurveyDialogContent extends OnCloseProps, UniBlockContent {
   reasonsSource?: { reasons: Reason[] } | JSONRefObject;
+  isAfterTargetAction?: boolean;
 }

package/src/ui-kit/UserSurveyDialog/useUserSurveyDialog.ts

@@ -1,4 +1,4 @@
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useLocalStore } from '@redneckz/uni-jsx/lib/Store/useLocalStore';
 import { useSessionStore } from '@redneckz/uni-jsx/lib/Store/useSessionStore';
 import { noop } from '../../utils/noop';
@@ -10,47 +10,64 @@ const DELAY = 5 * 60 * 1000;
 
 type SurveyTimerStore = {
   surveyTimerStart: string;
+  surveyTimerId: NodeJS.Timeout;
+  isSurveySkipped: boolean;
 };
 
 // Хук отвечает за показ пользователю опроса
-export const useUserSurveyDialog = () => {
+export const useUserSurveyDialog = (withoutTimer?: boolean) => {
   const userSurveyDialog = useDialog(UserSurveyDialog);
   const userSurveyStore = useLocalStore<UserSurveyStoreSlice>();
   const sessionStore = useSessionStore<SurveyTimerStore>();
+  const surveyTimer = sessionStore.surveyTimerId;
+  const isSurveySkipped = sessionStore.isSurveySkipped;
   const elapsedTime = sessionStore.surveyTimerStart
     ? Date.now() - Number.parseInt(sessionStore.surveyTimerStart)
     : 0;
+  const isShowSurvey =
+    !isSurveySkipped &&
+    (!userSurveyStore.userSurvey || userSurveyStore.userSurvey?.nextDueAt <= Date.now());
 
-  const openUserSurveyDialog = () => {
-    userSurveyStore.userSurvey = {
-      lastShownType: userSurveyStore.userSurvey?.lastShownType === 'NPS' ? 'CSI' : 'NPS',
-      nextDueAt: getTimeAfter30days(),
-    };
+  const handleCloseSurvey = useCallback(() => {
+    sessionStore.isSurveySkipped = true;
+  }, []);
+
+  const openUserSurveyDialog = useCallback((isAfterTargetAction?: boolean) => {
     userSurveyDialog.open({
       reasonsSource: {
         $ref: '/wcms-resources/user-survey-reasons.json',
       },
+      isAfterTargetAction,
+      onClose: handleCloseSurvey,
     });
-  };
+  }, []);
+
+  const handleOpenSurveyAction = useCallback(() => {
+    if (isShowSurvey) {
+      surveyTimer && clearTimeout(surveyTimer);
+      openUserSurveyDialog(true);
+    }
+  }, [surveyTimer, isShowSurvey]);
 
   useEffect(() => {
     // Опрос показывается только если ранее пользоваютелю не показывался опрос или с того момента прошел месяц
-    if (!userSurveyStore.userSurvey || userSurveyStore.userSurvey?.nextDueAt <= Date.now()) {
+    if (!withoutTimer && isShowSurvey) {
       // начинаем отсчитывать время от первого захода на сайт
       if (!sessionStore.surveyTimerStart) {
         sessionStore.surveyTimerStart = Date.now().toString();
       }
       // Опрос показывается спустя 5 минут нахождения на сайте
       const timeout = setTimeout(openUserSurveyDialog, DELAY - elapsedTime);
+      sessionStore.surveyTimerId = timeout;
 
       return () => {
         clearTimeout(timeout);
+        sessionStore.surveyTimerId = null;
       };
     }
 
     return noop;
-  }, []);
-};
+  }, [isShowSurvey]);
 
-// Отсчитываем месяц с текущей даты
-const getTimeAfter30days = () => Date.now() + 30 * 24 * 60 * 60 * 1000;
+  return handleOpenSurveyAction;
+};