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

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;
+};