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

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

@@ -0,0 +1,68 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { Button } from '../Button/Button';
+import { Dialog } from '../DialogManager/Dialog';
+import { Icon } from '../Icon/Icon';
+import { Input } from '../Input/Input';
+import { Logo } from '../Logo/Logo';
+import { checkCaptcha } from './checkCaptcha';
+import { createCaptcha } from './createCaptcha';
+
+export interface CaptchaDialogProps {
+  phoneNumber: string;
+  sendCode?: () => void;
+  close?: () => void;
+  onClose?: () => void;
+}
+
+export const CaptchaDialog = JSX<CaptchaDialogProps>(
+  ({ phoneNumber, close, sendCode, onClose }) => {
+    const [captcha, setCaptcha] = useState('');
+    const [code, setCode] = useState('');
+    const [hasError, setHasError] = useState(false);
+
+    useEffect(() => {
+      createCaptcha(setCaptcha, phoneNumber);
+    }, []);
+
+    return (
+      <Dialog
+        head={<Logo />}
+        onClose={onClose}
+        className="my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg"
+      >
+        <div className="flex flex-col gap-lg items-center rounded-md">
+          <div className="flex h-[140px] w-[300px]">
+            <img className="grow" src={captcha}></img>
+            <div
+              onClick={() => createCaptcha(setCaptcha, phoneNumber)}
+              className="flex w-8 items-center justify-center cursor-pointer"
+            >
+              <Icon iconVersion="normal" name="RefreshIcon" />
+            </div>
+          </div>
+          <Input
+            className="w-[300px]"
+            onChange={setCode}
+            value={code}
+            placeholder="Введите код с картинки"
+          />
+          {hasError ? <div className="text-error">Неверный код</div> : null}
+          <div className="flex w-[310px] justify-between">
+            <Button onClick={close} version="secondary">
+              Вернуться
+            </Button>
+            <Button
+              type="submit"
+              disabled={!code}
+              onClick={() => checkCaptcha({ code, setHasError, close, sendCode })}
+              version="secondary"
+            >
+              Отправить
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+    );
+  },
+);

package/src/ui-kit/CaptchaDialog/checkCaptcha.ts

@@ -0,0 +1,25 @@
+import { RETAIL_API } from '../../api/RetailApi/RetailApi';
+import { noop } from '../../utils/noop';
+
+interface CheckCaptchaProps {
+  code: string;
+  setHasError: (hasError: boolean) => void;
+  sendCode?: () => void;
+  close?: () => void;
+}
+
+export const checkCaptcha = async ({
+  code,
+  setHasError,
+  close,
+  sendCode = noop,
+}: CheckCaptchaProps) => {
+  const response = await RETAIL_API.CheckCaptcha({ captchaText: code });
+
+  if ((await response.text()) === 'ERROR') {
+    setHasError(true);
+  } else {
+    sendCode();
+    close?.();
+  }
+};

package/src/ui-kit/CaptchaDialog/createCaptcha.ts

@@ -0,0 +1,6 @@
+import { RETAIL_API } from '../../api/RetailApi/RetailApi';
+
+export const createCaptcha = async (setCaptcha: (captcha: string) => void, phoneNumber: string) => {
+  const response = await RETAIL_API.CreateCaptcha(phoneNumber);
+  setCaptcha(URL.createObjectURL(await response.blob()));
+};

package/src/ui-kit/CaptchaDialog/useCaptchaDialog.tsx

@@ -0,0 +1,12 @@
+import { useDialogManager } from '../DialogManager/useDialogManager';
+import { CaptchaDialog, type CaptchaDialogProps } from './CaptchaDialog';
+
+export const useCaptchaDialog = (initialProps: CaptchaDialogProps, onClose: () => void) => {
+  const { open, close, closeAll } = useDialogManager();
+
+  return {
+    open: () => open(<CaptchaDialog close={close} onClose={onClose} {...initialProps} />),
+    close,
+    closeAll,
+  };
+};

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { useElementSpace } from '../../hooks/useElementSpace';
 import { type LabelProps } from '../../model/HeadlineType';
 import { type IconVersion } from '../../model/IconVersion';
 import { formatDate } from '../../utils/formatDate';
@@ -65,13 +66,19 @@ export const DatePicker = JSX<DatePickerProps>(
       showCalendar,
     });
 
+    const spaceAbove = useElementSpace(ref, 370);
+
     return (
       <div className={style('space-y-xs', className)} ref={ref}>
         {renderLabel(label)}
         <div className="relative">
           {renderDatePickerForm(handleChangeVisibleCalendar, value, valid)}
           {showCalendar ? (
-            <div className="absolute bg-white z-20 select-none bottom-full">
+            <div
+              className={style('absolute bg-white z-20 select-none', {
+                'bottom-full': spaceAbove,
+              })}
+            >
               <div className="flex gap-s">
                 <div className="my-auto" onClick={handlePrevMonth}>
                   <Icon {...ICON_PROPS} className="-rotate-90 cursor-pointer" />
@@ -99,6 +106,7 @@ export const DatePicker = JSX<DatePickerProps>(
                 onDateSelect={onChange}
                 min={minDate}
                 max={maxDate}
+                setValue={setValue}
               />
             </div>
           ) : null}

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

@@ -5,9 +5,10 @@ type InputCodeProps = {
   values: string[];
   setValues: React.Dispatch<React.SetStateAction<string[]>>;
   hasError?: boolean;
+  errorText?: string;
 };
 
-export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError }) => {
+export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError, errorText }) => {
   const [activeIndex, setActiveIndex] = useState(0);
   const inputRefs = useRef<HTMLInputElement[]>([]);
 
@@ -76,7 +77,7 @@ export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError }) =
           />
         ))}
       </div>
-      {hasError ? <div className="text-error">Неверный код</div> : null}
+      {hasError ? <div className="text-error">{errorText}</div> : null}
     </div>
   );
 });

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

@@ -1,10 +1,11 @@
 import '../../setup-fixture';
 
+import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
 import { VerifyPhoneDialog } from './VerifyPhoneDialog';
 
 const title = 'Подтвердите номер телефона';
 
-const description = 'Мы отправили код на +7 (999) 999-99-99';
+const description = 'Мы отправили код на';
 
 const __html = `Вводя код, я подтверждаю, что ознакомлен и подписываю:
 <ul><li>соглашение о порядке использования простой электронной подписи,
@@ -14,12 +15,14 @@ const __html = `Вводя код, я подтверждаю, что ознак
 
 export default {
   default: (
-    <VerifyPhoneDialog
-      title={title}
-      description={description}
-      phone="+79999999999"
-      __html={__html}
-      textButton="Отправить"
-    />
+    <div>
+      <VerifyPhoneDialog
+        title={title}
+        description={description}
+        __html={__html}
+        textButton="Отправить"
+      />
+      <DialogManager />
+    </div>
   ),
 };

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