@redneckz/wildless-cms-uni-blocks 0.14.588 → 0.14.589

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

@@ -1,71 +1,70 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { RETAIL_API } from '../../api/RetailApi/RetailApi';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Headline } from '../../components/Headline/Headline';
+import { noop } from '../../utils/noop';
+import { useCaptchaDialog } from '../CaptchaDialog/useCaptchaDialog';
 import { Dialog } from '../DialogManager/Dialog';
-import { useDialogManager } from '../DialogManager/useDialogManager';
 import { LinkButton } from '../LinkButton/LinkButton';
 import { Loader } from '../Loader/Loader';
 import { RichText } from '../RichText/RichText';
 import { Timer } from '../TimerCircle/Timer';
+import { handleSendCode } from './handleSendCode';
 import { InputCode } from './InputCode';
 import { SubmitButton } from './SubmitButton';
+import { useVerifyPhoneDialogSubmit } from './useVerifyPhoneDialogSubmit';
 
 export interface VerifyPhoneDialogProps {
-  phone: string;
+  close?: () => void;
+  onClose?: () => void;
   title?: string;
   description?: string;
   code?: boolean;
   __html?: string;
   codeLength?: number;
   textButton?: string;
-  onClose?: () => Promise<void>;
-  href?: string;
+  phoneNumber?: string;
 }
 
 export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
   ({
+    close = noop,
+    onClose = noop,
     title,
-    phone,
     description,
     __html,
     code = true,
     codeLength = 4,
     textButton = '',
-    onClose,
-    href = '',
+    phoneNumber = '+79999999999',
   }) => {
-    const { close } = useDialogManager();
+    const [values, setValues] = useState(Array(codeLength).fill(''));
 
-    const [values, setValues] = useState<string[]>(Array(codeLength).fill('') as string[]);
-    const [hasError, setHasError] = useState(false);
-    const [isLoading, setIsLoading] = useState(false);
-    const [timeNextReq, setTimeNextReq] = useState<number>(180);
+    const {
+      handleSubmit,
+      hasError,
+      errorText,
+      isLoading,
+      timeNextReq,
+      isSubmitButtonDisabled,
+      setTimeNextReq,
+      setIsTimerStarted,
+      setAttemps,
+    } = useVerifyPhoneDialogSubmit({ values, close });
 
-    const isValidCode = useMemo(() => values.every(Boolean), [values]);
-
-    useEffect(() => {
-      RETAIL_API.SendCode({
-        phoneNumber: phone,
-        smsCodesSetName: { key: 'AUTHENTICATION' },
+    const sendCode = useCallback(() => {
+      handleSendCode({
+        phoneNumber,
+        captchaDialog,
+        setTimeNextReq,
+        setIsTimerStarted,
+        setAttemps,
       });
     }, []);
+    const captchaDialog = useCaptchaDialog({ phoneNumber, sendCode }, onClose);
 
-    const handleSubmit = useCallback(async () => {
-      try {
-        setIsLoading(true);
-        await RETAIL_API.CheckCode({
-          smsText: values.join(''),
-          smsCodesSetName: { key: 'AUTHENTICATION' },
-        });
-        globalThis.location.href = href;
-        close();
-        onClose && onClose();
-      } catch {
-        setIsLoading(false);
-        setHasError(true);
-      }
-    }, [values]);
+    useEffect(() => {
+      sendCode();
+    }, []);
 
     return (
       <Dialog className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg">
@@ -77,24 +76,19 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
             headlineVersion="S"
             isEmbedded={true}
           />
-          {code ? <InputCode values={values} setValues={setValues} hasError={hasError} /> : null}
-          {timeNextReq ? (
-            <div className="flex flex-row text-l font-light text-primary-main">
-              Получить новый код можно через
-              <Timer
-                className="text-primary-main ml-1"
-                time={timeNextReq}
-                setTime={setTimeNextReq}
-              />
-            </div>
-          ) : (
-            <LinkButton className="text-primary-main">Получить новый код</LinkButton>
-          )}
+          {code ? (
+            <InputCode
+              values={values}
+              setValues={setValues}
+              errorText={errorText}
+              hasError={hasError}
+            />
+          ) : null}
+          {renderText(timeNextReq, setTimeNextReq, sendCode)}
 
           <RichText itemSize="list-s" __html={__html} />
-          {textButton ? (
-            <SubmitButton isDisabled={!isValidCode} onClick={handleSubmit} text={textButton} />
-          ) : null}
+
+          {renderTextButton(textButton, isSubmitButtonDisabled, handleSubmit)}
 
           {isLoading ? <Loader blur={false} /> : null}
         </div>
@@ -102,3 +96,24 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
     );
   },
 );
+
+const renderTextButton = (textButton: string, isDisabled: boolean, handleSubmit: () => void) =>
+  textButton ? (
+    <SubmitButton isDisabled={isDisabled} onClick={handleSubmit} text={textButton} />
+  ) : null;
+
+const renderText = (
+  timeNextReq: number,
+  setTimeNextReq: React.Dispatch<React.SetStateAction<number>>,
+  sendCode: () => void,
+) =>
+  timeNextReq ? (
+    <div className="flex flex-row text-l font-light text-primary-main">
+      Получить новый код можно через
+      <Timer className="text-primary-main ml-1" time={timeNextReq} setTime={setTimeNextReq} />
+    </div>
+  ) : (
+    <LinkButton onClick={sendCode} className="text-primary-main">
+      Получить новый код
+    </LinkButton>
+  );

package/src/ui-kit/VerifyPhoneDialog/handleSendCode.ts

@@ -0,0 +1,37 @@
+import { RETAIL_API } from '../../api/RetailApi/RetailApi';
+import { type CaptchaDialogProps } from '../CaptchaDialog/CaptchaDialog';
+import { type DialogOptions } from '../DialogManager/useDialogManager';
+
+interface HandleSendCodeProps {
+  phoneNumber: string;
+  captchaDialog: {
+    open: (props?: CaptchaDialogProps, options?: DialogOptions) => void;
+    close: () => void;
+    closeAll: () => void;
+  };
+  setTimeNextReq: (timeNextReq: number) => void;
+  setIsTimerStarted: (isTimerStarted: boolean) => void;
+  setAttemps: (attemps: number) => void;
+}
+
+export const handleSendCode = async ({
+  phoneNumber,
+  captchaDialog,
+  setTimeNextReq,
+  setIsTimerStarted,
+  setAttemps,
+}: HandleSendCodeProps) => {
+  try {
+    await RETAIL_API.SendCode({
+      phoneNumber: phoneNumber,
+      smsCodesSetName: { key: 'AUTHENTICATION' },
+    });
+    setAttemps(0);
+    setTimeNextReq(180);
+    setIsTimerStarted(true);
+  } catch (e: any) {
+    if (e?.status === 429) {
+      captchaDialog.open();
+    }
+  }
+};

package/src/ui-kit/VerifyPhoneDialog/useVerifyPhoneDialog.tsx

@@ -5,7 +5,8 @@ export const useVerifyPhoneDialog = (props: VerifyPhoneDialogProps) => {
   const { open, close } = useDialogManager();
 
   return {
-    open: (options: DialogOptions = {}) => open(<VerifyPhoneDialog {...props} />, options),
+    open: (options: DialogOptions = {}) =>
+      open(<VerifyPhoneDialog onClose={close} {...props} />, options),
     close,
   };
 };

package/src/ui-kit/VerifyPhoneDialog/useVerifyPhoneDialogSubmit.tsx

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { RETAIL_API } from '../../api/RetailApi/RetailApi';
+
+type useVerifyPhoneDialogSubmitProps = {
+  values: string[];
+  close?: () => void;
+};
+
+export const useVerifyPhoneDialogSubmit = ({ close, values }: useVerifyPhoneDialogSubmitProps) => {
+  const [hasError, setHasError] = useState(false);
+  const [errorText, setErrorText] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [timeNextReq, setTimeNextReq] = useState<number>(0);
+  const [isTimerStarted, setIsTimerStarted] = useState(false);
+  const [attemps, setAttemps] = useState(0);
+
+  const resetError = useCallback(() => {
+    setHasError(false);
+    setErrorText('');
+  }, []);
+
+  const isTimeExpired = useMemo(
+    () => timeNextReq === 0 && isTimerStarted,
+    [timeNextReq, isTimerStarted],
+  );
+
+  const isSubmitButtonDisabled = useMemo(
+    () => attemps > 2 || !values.every(Boolean) || isTimeExpired,
+    [values],
+  );
+
+  const handleSubmit = useCallback(async () => {
+    try {
+      setIsTimerStarted(false);
+      setTimeNextReq(0);
+      setAttemps(attemps + 1);
+      setIsLoading(true);
+      await RETAIL_API.CheckCode({
+        smsText: values.join(''),
+        smsCodesSetName: { key: 'AUTHENTICATION' },
+      });
+      resetError();
+      close && close();
+    } catch {
+      setIsLoading(false);
+      attemps > 1 ? setErrorText('Исчерпан лимит ввода смс-кода') : setErrorText('Неверный код');
+      setHasError(true);
+    }
+  }, [values, attemps]);
+
+  useEffect(() => {
+    if (isTimeExpired) {
+      setHasError(true);
+      setErrorText('Код просрочен');
+    } else {
+      setHasError(false);
+    }
+  }, [isTimeExpired]);
+
+  return {
+    handleSubmit,
+    hasError,
+    errorText,
+    isLoading,
+    timeNextReq,
+    isSubmitButtonDisabled,
+    setTimeNextReq,
+    setIsTimerStarted,
+    setAttemps,
+  };
+};