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

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

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Star } from './Star';
+import { type StepProps } from './UserSurveyDialogContent';
+
+const stars = new Array(5).fill(Star);
+
+const TITLE = {
+  NPS: 'Оцените, пожалуйста, от 1 до 5 насколько вероятно, что вы порекомендуете Россельхозбанк коллегам, друзьям и знакомым?',
+  CSI: 'Оцените, пожалуйста, удовлетворённость пользования сайтом',
+};
+
+export const FirstStep = JSX<StepProps>(
+  ({ currentRating, surveyType, isSending, setCurrentRating, onNextStep, onSubmit }) => {
+    const [currentHover, setCurrentHover] = useState<number>();
+
+    const setRatingFn = (value: number): void => {
+      setCurrentRating(value);
+      if (value < 5) {
+        onNextStep();
+      }
+    };
+
+    return (
+      <div className="flex flex-col gap-xl items-center">
+        <Heading className="text-center" headingType="h5" title={TITLE[surveyType]} />
+        <div className="flex justify-center">
+          {stars.map((StarItem, index) => (
+            <StarItem
+              key={index}
+              value={index + 1}
+              rating={currentRating}
+              hover={currentHover}
+              setRating={setRatingFn}
+              setHover={setCurrentHover}
+              className="modal-feedback__star"
+            />
+          ))}
+        </div>
+        {currentRating === 5 ? (
+          <SubmitButton onClick={() => onSubmit()} isLoading={isSending}>
+            Отправить
+          </SubmitButton>
+        ) : null}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,57 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Input } from '../../ui-kit/Input/Input';
+import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import { Star } from './Star';
+import { type StepProps } from './UserSurveyDialogContent';
+
+const stars = new Array(5).fill(Star);
+const TITLE = 'Что бы мы могли улучшить?';
+
+export const SecondStep = JSX<StepProps>(
+  ({ currentRating, currentReason, reasons = [], isSending, setCurrentReason, onSubmit }) => {
+    const [comment, setComment] = useState<string>();
+    const handleReasonChange = (id: string, text?: string): void => {
+      setCurrentReason?.({
+        id,
+        text,
+      });
+    };
+
+    return (
+      <div className="flex flex-col gap-xl items-center">
+        <Heading className="text-center" headingType="h5" title={TITLE} />
+        <div className="flex justify-center">
+          {stars.map((StarItem, index) => (
+            <StarItem key={index} value={index + 1} rating={currentRating} />
+          ))}
+        </div>
+        <RadioButtonGroup
+          className="w-full text-wrap"
+          orientation="vertical"
+          items={reasons}
+          value={currentReason?.id}
+          onChange={handleReasonChange}
+        />
+        {currentReason?.text === 'Другое' ? (
+          <Input
+            className="w-full"
+            placeholder="Напишите, пожалуйста, свой вариант ответа"
+            isTextarea
+            value={comment}
+            onChange={setComment}
+            maxLength={255}
+          />
+        ) : null}
+
+        {currentReason ? (
+          <SubmitButton onClick={() => onSubmit(comment)} isLoading={isSending}>
+            Отправить
+          </SubmitButton>
+        ) : null}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,28 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+/* eslint-disable max-len */
+type StarProps = {
+  active: boolean;
+  className: string;
+  hover: number;
+  value: number;
+  rating: number;
+  setHover?: (value: number | null) => void;
+  setRating?: (value: number) => void;
+};
+
+export const Star = JSX<StarProps>(({ value, hover, rating, setHover, setRating }) => {
+  const fillColor = value <= (hover || rating) ? '#42AB44' : '#C9CACC';
+
+  return (
+    <div
+      onClick={() => setRating?.(value)}
+      onMouseEnter={() => setHover?.(value)}
+      onMouseLeave={() => setHover?.(null)}
+    >
+      <svg data-rating={value} fill={fillColor} width="57" height="57" viewBox="0 0 57 57">
+        <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" />
+      </svg>
+    </div>
+  );
+});

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

@@ -0,0 +1,80 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { useLocalStore } from '@redneckz/uni-jsx/lib/Store/useLocalStore';
+import { sendUserSurvey } from '../../api/sendUserSurvey';
+import { Dialog } from '../../ui-kit/DialogManager/Dialog';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { noop } from '../../utils/noop';
+import { FinalStep } from './FinalStep';
+import { FirstStep } from './FirstStep';
+import { SecondStep } from './SecondStep';
+import {
+  type Reason,
+  type UserSurveyDialogContent,
+  type UserSurveyStoreSlice,
+} from './UserSurveyDialogContent';
+
+export type UserSurveyDialogProps = UserSurveyDialogContent;
+
+const STEPS = [FirstStep, SecondStep, FinalStep];
+const LAST_STEP_INDEX = 2;
+
+export const UserSurveyDialog = UniBlock<UserSurveyDialogProps>(
+  ({ onClose = noop, 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 { reasons } = reasonsSource as { reasons: Reason[] };
+
+    const ActiveStep = STEPS[step];
+
+    const handleNextStep = useCallback(() => {
+      setStep((_) => _ + 1);
+    }, []);
+
+    const handleSubmit = useCallback(
+      async (message?: string) => {
+        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 (
+      <Dialog maxWidth="xl" onClose={onClose}>
+        <ActiveStep
+          currentRating={currentRating}
+          currentReason={currentReason}
+          reasons={reasons}
+          surveyType={surveyType}
+          isSending={isSending}
+          setCurrentReason={setCurrentReason}
+          setCurrentRating={setCurrentRating}
+          onSubmit={handleSubmit}
+          onNextStep={handleNextStep}
+        />
+      </Dialog>
+    );
+  },
+);
+
+const getMessage = (currentReason?: Reason, message?: string) => {
+  if (currentReason?.text !== 'Другое') {
+    return undefined;
+  }
+
+  return message?.length ? message : 'Другое. Клиент не оставил комментариев';
+};

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

@@ -0,0 +1,31 @@
+import { type JSONRefObject } from '../../data/JSONRefObject';
+import { type OnCloseProps } from '../../model/OnCloseProps';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+export type UserSurveyStoreSlice = {
+  userSurvey: {
+    lastShownType: 'NPS' | 'CSI';
+    nextDueAt: number;
+  };
+};
+
+export type Reason = {
+  id: string;
+  text?: string;
+};
+
+export type StepProps = {
+  currentRating?: number;
+  currentReason?: Reason;
+  reasons?: Reason[];
+  surveyType: 'NPS' | 'CSI';
+  isSending: boolean;
+  setCurrentReason: (value: Reason) => void;
+  setCurrentRating: (value: number) => void;
+  onSubmit: (message?: string) => void;
+  onNextStep: () => void;
+};
+
+export interface UserSurveyDialogContent extends OnCloseProps, UniBlockContent {
+  reasonsSource?: { reasons: Reason[] } | JSONRefObject;
+}

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

@@ -0,0 +1,56 @@
+import { 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';
+import { useDialog } from '../DialogManager/useDialog';
+import { UserSurveyDialog } from './UserSurveyDialog';
+import { type UserSurveyStoreSlice } from './UserSurveyDialogContent';
+
+const DELAY = 5 * 60 * 1000;
+
+type SurveyTimerStore = {
+  surveyTimerStart: string;
+};
+
+// Хук отвечает за показ пользователю опроса
+export const useUserSurveyDialog = () => {
+  const userSurveyDialog = useDialog(UserSurveyDialog);
+  const userSurveyStore = useLocalStore<UserSurveyStoreSlice>();
+  const sessionStore = useSessionStore<SurveyTimerStore>();
+  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;