@redneckz/wildless-cms-uni-blocks 0.14.865 → 0.14.866

package/src/retail/components/VerifyPhoneDialog/VerifyPhoneDialog.tsx

@@ -2,6 +2,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 
+import { useSessionStore } from '@redneckz/uni-jsx/lib/Store/useSessionStore';
 import { Headline } from '../../../components/Headline/Headline';
 import type { OnCloseProps } from '../../../model/OnCloseProps';
 import { Button } from '../../../ui-kit/Button/Button';
@@ -20,26 +21,27 @@ import { InputCode } from './InputCode';
 import { SubmitButton } from './SubmitButton';
 import { useVerifyPhoneDialogSubmit } from './useVerifyPhoneDialogSubmit';
 
+export const TIME_TO_RESEND = 180;
+const CODE_LENGTH = 4;
+
 export interface VerifyPhoneDialogProps extends OnCloseProps {
   phone: string;
-  code?: boolean;
   withDescription?: boolean;
-  codeLength?: number;
   consents?: string[];
   onSuccess?: (smsCode?: string) => void;
 }
 
+export interface SmsCodeStore {
+  smsCode: {
+    sendTime?: number;
+    attempts?: number;
+  };
+}
+
 export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
-  ({
-    phone,
-    code = true,
-    withDescription = true,
-    codeLength = 4,
-    consents,
-    onSuccess = noop,
-    onClose = noop,
-  }) => {
-    const [values, setValues] = useState(Array(codeLength).fill(''));
+  ({ phone, withDescription = true, consents, onSuccess = noop, onClose = noop }) => {
+    const [values, setValues] = useState(Array(CODE_LENGTH).fill(''));
+    const sessionStore = useSessionStore<SmsCodeStore>();
 
     const {
       handleSubmit,
@@ -49,8 +51,7 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
       timeNextReq,
       isSubmitButtonDisabled,
       setTimeNextReq,
-      setIsTimerStarted,
-      setAttempts,
+      setErrorText,
     } = useVerifyPhoneDialogSubmit({ values, onSuccess });
 
     const captchaDialog = useDialog(CaptchaDialog);
@@ -66,17 +67,22 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
       });
 
       if (isSuccessSendCode) {
-        setAttempts(0);
-        setTimeNextReq(180);
-        restartTimer(180);
-        setIsTimerStarted(true);
+        setTimeNextReq(TIME_TO_RESEND);
+        restartTimer(TIME_TO_RESEND);
+        setErrorText('');
+        sessionStore.smsCode = {
+          sendTime: Date.now(),
+          attempts: 0,
+        };
       } else {
         captchaDialog.open({ phoneNumber, sendCode: handleSendCode });
       }
     }, [phoneNumber, restartTimer, onClose]);
 
     useEffect(() => {
-      handleSendCode();
+      if (!sessionStore.smsCode?.sendTime) {
+        handleSendCode();
+      }
     }, []);
 
     return (
@@ -93,14 +99,12 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
             isEmbedded={true}
             as="h6"
           />
-          {code ? (
-            <InputCode
-              values={values}
-              setValues={setValues}
-              errorText={errorText}
-              hasError={hasError}
-            />
-          ) : null}
+          <InputCode
+            values={values}
+            setValues={setValues}
+            errorText={errorText}
+            hasError={hasError}
+          />
           {renderText(timeNextReq, handleSendCode)}
 
           {withDescription ? (

package/src/retail/components/VerifyPhoneDialog/useVerifyPhoneDialogSubmit.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { useSessionStore } from '@redneckz/uni-jsx/lib/Store/useSessionStore';
 import { checkCode } from '../../api/checkCode';
+import { TIME_TO_RESEND, type SmsCodeStore } from './VerifyPhoneDialog';
 
 type useVerifyPhoneDialogSubmitProps = {
   values: string[];
@@ -11,28 +13,33 @@ export const useVerifyPhoneDialogSubmit = ({
   values,
   onSuccess,
 }: useVerifyPhoneDialogSubmitProps) => {
+  const sessionStore = useSessionStore<SmsCodeStore>();
+  const attempts = sessionStore.smsCode?.attempts || 0;
+  const timer = Math.max(getTimer(sessionStore.smsCode?.sendTime || Date.now()), 0);
+
   const [errorText, setErrorText] = useState('');
   const [isLoading, { setTrue: startLoading, setFalse: endLoading }] = useBool(false);
-  const [timeNextReq, setTimeNextReq] = useState(0);
-  const [isTimerStarted, setIsTimerStarted] = useState(false);
-  const [attempts, setAttempts] = useState(0);
+  const [timeNextReq, setTimeNextReq] = useState(timer);
 
   const resetError = useCallback(() => setErrorText(''), []);
 
-  const isTimeExpired = Boolean(timeNextReq === 0 && isTimerStarted);
+  const isTimeExpired = Boolean(timeNextReq === 0 && sessionStore.smsCode?.sendTime);
   const isSubmitButtonDisabled = attempts > 2 || isTimeExpired || !values.every(Boolean);
 
   const handleSubmit = useCallback(async () => {
     try {
-      setIsTimerStarted(false);
-      setTimeNextReq(0);
-      setAttempts((_) => _ + 1);
+      sessionStore.smsCode = {
+        ...sessionStore.smsCode,
+        attempts: attempts + 1,
+      };
       startLoading();
       await checkCode({
         smsText: values.join(''),
         smsCodesSetName: { key: 'AUTHENTICATION' },
       });
+      setTimeNextReq(0);
       resetError();
+      sessionStore.smsCode = null;
       await onSuccess?.(values.join(''));
     } catch {
       setErrorText(attempts > 1 ? 'Исчерпан лимит ввода смс-кода' : 'Неверный код');
@@ -42,7 +49,11 @@ export const useVerifyPhoneDialogSubmit = ({
   }, [values, attempts]);
 
   useEffect(() => {
-    setErrorText(isTimeExpired ? 'Код просрочен' : '');
+    if (isTimeExpired) {
+      setErrorText('Код просрочен');
+    } else if (attempts > 2) {
+      setErrorText('Исчерпан лимит ввода смс-кода');
+    }
   }, [isTimeExpired]);
 
   return {
@@ -53,7 +64,8 @@ export const useVerifyPhoneDialogSubmit = ({
     timeNextReq,
     isSubmitButtonDisabled,
     setTimeNextReq,
-    setIsTimerStarted,
-    setAttempts,
+    setErrorText,
   };
 };
+
+const getTimer = (sendTime: number) => TIME_TO_RESEND - Math.floor((Date.now() - sendTime) / 1000);