@redneckz/wildless-cms-uni-blocks 0.14.565 → 0.14.567

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

@@ -0,0 +1,90 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+type InputCodeProps = {
+  values: string[];
+  setValues: React.Dispatch<React.SetStateAction<string[]>>;
+  hasError?: boolean;
+};
+
+export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRefs = useRef<HTMLInputElement[]>([]);
+
+  useEffect(() => {
+    inputRefs.current?.[activeIndex]?.focus();
+  }, [activeIndex]);
+
+  const handleChange = useCallback(
+    (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      const { value } = event.currentTarget;
+      const isLastIndex = index === values.length - 1;
+      const isMultipleCharacters = value.length > 1;
+      if (isLastIndex && isMultipleCharacters) {
+        return;
+      }
+      setValues(values.map((_, i) => (i === index ? value : _)));
+      setActiveIndex(index + 1);
+    },
+    [values],
+  );
+
+  const handleKeyDown = useCallback(
+    (currentIndex: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {
+      const { key } = event;
+      if (key === 'Backspace' && !values[currentIndex]) {
+        const previousIndex = currentIndex > 0 ? currentIndex - 1 : values.length - 1;
+        const updatedValues = values.map((value, index) => (index === previousIndex ? '' : value));
+        setValues(updatedValues);
+        setActiveIndex(previousIndex);
+      }
+    },
+    [values],
+  );
+
+  const handlePaste = useCallback(
+    (event: React.ClipboardEvent<HTMLInputElement>) => {
+      event.preventDefault();
+      const pastedData = event.clipboardData.getData('text');
+      const updatedValues = values.map((_, idx) => (idx < pastedData.length ? pastedData[idx] : _));
+      setValues(updatedValues);
+      setActiveIndex(updatedValues.length - 1);
+    },
+    [values],
+  );
+
+  return (
+    <div className="flex flex-col gap-2 text-center">
+      <div>
+        {values.map((value, index) => (
+          <input
+            key={index}
+            type="number"
+            maxLength={1}
+            value={value}
+            onChange={handleChange(index)}
+            onPaste={handlePaste}
+            ref={(ref) => {
+              if (!inputRefs.current) {
+                inputRefs.current = [];
+              }
+              inputRefs.current[index] = ref as HTMLInputElement;
+            }}
+            onFocus={(event) => event.target.select()}
+            onKeyDown={handleKeyDown(index)}
+            className={getInputStyle(index, values, hasError)}
+          />
+        ))}
+      </div>
+      {hasError ? <div className="text-error">Неверный код</div> : null}
+    </div>
+  );
+});
+
+const getInputStyle = (index: number, values: string[], hasError?: boolean) => {
+  const isInputEmpty = !values[index];
+
+  return `w-16 h-20 text-3xl text-center p-2 m-2 border ${
+    hasError && isInputEmpty ? 'border-error' : 'border-gray'
+  } rounded-md caret-transparent outline-none`;
+};

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

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../Button/Button';
+import { Text } from '../Text/Text';
+
+interface SubmitButtonProps {
+  isDisabled: boolean;
+  onClick: () => void;
+  text?: string;
+}
+
+export const SubmitButton = JSX<SubmitButtonProps>(({ isDisabled, onClick, text }) => {
+  return (
+    <Button type="button" onClick={onClick} disabled={isDisabled}>
+      <Text font="font-medium">{text}</Text>
+    </Button>
+  );
+});

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

@@ -0,0 +1,24 @@
+import '../../setup-fixture';
+
+import { VerifyPhoneDialog } from './VerifyPhoneDialog';
+
+const title = 'Подтвердите номер телефона';
+
+const description = 'Мы отправили код на +7 (999) 999-99-99';
+
+const __html = `Вводя код, я подтверждаю, что ознакомлен и подписываю:
+<ul> <li>соглашение о порядке использования простой электронной подписи,
+</li> <li>согласие на обработку персональных данных,
+</li> <li>предоставление и подписание прочих согласий Банка,
+</li><li>согласие на запрос в ПФР</li> </ul>`;
+
+export default {
+  default: (
+    <VerifyPhoneDialog
+      title={title}
+      description={description}
+      __html={__html}
+      textButton="Отправить"
+    />
+  ),
+};

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

@@ -0,0 +1,83 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useMemo } from 'react';
+import { Headline } from '../../components/Headline/Headline';
+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 { InputCode } from './InputCode';
+import { SubmitButton } from './SubmitButton';
+import { submitVerifyPhoneForm } from './submitVerifyPhoneForm';
+
+export interface VerifyPhoneDialogProps {
+  title?: string;
+  description?: string;
+  code?: boolean;
+  __html?: string;
+  codeLength?: number;
+  textButton?: string;
+}
+
+export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
+  ({ title, description, __html, code = true, codeLength = 4, textButton = '' }) => {
+    const { close } = useDialogManager();
+
+    const [values, setValues] = useState(Array(codeLength).fill(''));
+    const [hasError, setHasError] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [timeNextReq, setTimeNextReq] = useState<number>(0);
+
+    const isValidCode = useMemo(() => values.every(Boolean), [values]);
+
+    const handleSubmit = useCallback(async () => {
+      setIsLoading(true);
+      const { success, expiresIn } = await submitVerifyPhoneForm(values.join(''));
+      setIsLoading(false);
+
+      setTimeNextReq(expiresIn as number);
+
+      if (success) {
+        close();
+      } else {
+        setHasError(true);
+      }
+    }, [values]);
+
+    return (
+      <Dialog className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg">
+        <div className="flex flex-col gap-lg items-center rounded-md">
+          <Headline
+            className="w-full"
+            title={title}
+            description={description}
+            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>
+          )}
+
+          <RichText itemSize="list-s" __html={__html} />
+          {textButton ? (
+            <SubmitButton isDisabled={!isValidCode} onClick={handleSubmit} text={textButton} />
+          ) : null}
+
+          {isLoading ? <Loader blur={false} /> : null}
+        </div>
+      </Dialog>
+    );
+  },
+);

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

@@ -0,0 +1,36 @@
+export interface VerifyPhoneFormData {
+  smsText: string;
+  smsCodesSetName: {
+    key: string;
+  };
+}
+
+const SEND_CODE_URL = '/api/v1/sms/checkCode';
+
+export const submitVerifyPhoneForm = async (code: string) => {
+  const codeData: VerifyPhoneFormData = {
+    smsText: code,
+    smsCodesSetName: { key: 'AUTHENTICATION' },
+  };
+
+  const response = await fetch(SEND_CODE_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(codeData),
+  });
+
+  if (response.ok) {
+    const data = await response.json();
+
+    return {
+      success: true,
+      expiresIn: data.expires_in,
+    };
+  } else {
+    return {
+      success: false,
+    };
+  }
+};

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

@@ -0,0 +1,11 @@
+import { useDialogManager, type DialogOptions } from '../DialogManager/useDialogManager';
+import { VerifyPhoneDialog, type VerifyPhoneDialogProps } from './VerifyPhoneDialog';
+
+export const useVerifyPhoneDialog = (props: VerifyPhoneDialogProps) => {
+  const { open, close } = useDialogManager();
+
+  return {
+    open: (options: DialogOptions = {}) => open(<VerifyPhoneDialog {...props} />, options),
+    close,
+  };
+};

package/dist/ui-kit/Timer/Timer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Timer.js","sourceRoot":"","sources":["../../../src/ui-kit/Timer/Timer.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AACxC,uDAAkE;AAClE,iEAA8D;AAC9D,mDAAgD;AAQnC,QAAA,KAAK,GAAG,IAAA,aAAG,EAAa,CAAC,EAAE,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IACvE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,QAAQ,CAAC,CAAC;IAE3C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;QACpB,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,IAAI,IAAI,KAAK,CAAC,EAAE;YACd,aAAa,CAAC,KAAK,CAAC,CAAC;SACtB;QAED,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,kBAAkB,GAAG,GAAG,GAAG,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IAEtE,OAAO,CACL,4CACE,uBAAC,mBAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,eAAe,EAAC,GAAG,GAAG,EAC9C,iCAAK,SAAS,EAAC,2CAA2C,aACxD,iCAAK,SAAS,EAAC,gGAAgG,aAC7G,gCACE,SAAS,EAAC,+BAA+B,EACzC,KAAK,EAAE;oCACL,UAAU,EAAE,mCAAmC,kBAAkB,6BAA6B;iCAC/F,GACD,EACF,gCAAK,SAAS,EAAC,4GAA4G,YACxH,qBAAqB,CAAC,IAAI,CAAC,GACxB,IACF,EACN,uBAAC,mBAAQ,IAAC,MAAM,EAAE,MAAM,GAAI,IACxB,IACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,qBAAqB,GAAG,CAAC,IAAY,EAAE,EAAE;IAC7C,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC5D,MAAM,OAAO,GAAG,GAAG,IAAI,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAEhD,OAAO,GAAG,OAAO,IAAI,OAAO,EAAE,CAAC;AACjC,CAAC,CAAC"}

package/lib/ui-kit/Timer/Timer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Timer.js","sourceRoot":"","sources":["../../../src/ui-kit/Timer/Timer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAQhD,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAa,CAAC,EAAE,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IACvE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;QACpB,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,IAAI,IAAI,KAAK,CAAC,EAAE;YACd,aAAa,CAAC,KAAK,CAAC,CAAC;SACtB;QAED,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,kBAAkB,GAAG,GAAG,GAAG,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IAEtE,OAAO,CACL,0BACE,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,eAAe,EAAC,GAAG,GAAG,EAC9C,eAAK,SAAS,EAAC,2CAA2C,aACxD,eAAK,SAAS,EAAC,gGAAgG,aAC7G,cACE,SAAS,EAAC,+BAA+B,EACzC,KAAK,EAAE;oCACL,UAAU,EAAE,mCAAmC,kBAAkB,6BAA6B;iCAC/F,GACD,EACF,cAAK,SAAS,EAAC,4GAA4G,YACxH,qBAAqB,CAAC,IAAI,CAAC,GACxB,IACF,EACN,KAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,GAAI,IACxB,IACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,qBAAqB,GAAG,CAAC,IAAY,EAAE,EAAE;IAC7C,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC5D,MAAM,OAAO,GAAG,GAAG,IAAI,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAEhD,OAAO,GAAG,OAAO,IAAI,OAAO,EAAE,CAAC;AACjC,CAAC,CAAC"}

package/mobile/dist/ui-kit/Timer/Timer.d.ts

@@ -1,7 +0,0 @@
-interface TimerProps {
-    interval?: number;
-    title?: string;
-    __html?: string;
-}
-export declare const Timer: import("@redneckz/uni-jsx").UNIComponent<TimerProps, any, any>;
-export {};

package/mobile/dist/ui-kit/Timer/Timer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Timer.js","sourceRoot":"","sources":["../../../src/ui-kit/Timer/Timer.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AACxC,uDAAkE;AAClE,iEAA8D;AAC9D,mDAAgD;AAQnC,QAAA,KAAK,GAAG,IAAA,aAAG,EAAa,CAAC,EAAE,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IACvE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,QAAQ,CAAC,CAAC;IAE3C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;QACpB,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,IAAI,IAAI,KAAK,CAAC,EAAE;YACd,aAAa,CAAC,KAAK,CAAC,CAAC;SACtB;QAED,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,kBAAkB,GAAG,GAAG,GAAG,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IAEtE,OAAO,CACL,4CACE,uBAAC,mBAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,eAAe,EAAC,GAAG,GAAG,EAC9C,iCAAK,SAAS,EAAC,2CAA2C,aACxD,iCAAK,SAAS,EAAC,gGAAgG,aAC7G,gCACE,SAAS,EAAC,+BAA+B,EACzC,KAAK,EAAE;oCACL,UAAU,EAAE,mCAAmC,kBAAkB,6BAA6B;iCAC/F,GACD,EACF,gCAAK,SAAS,EAAC,4GAA4G,YACxH,qBAAqB,CAAC,IAAI,CAAC,GACxB,IACF,EACN,uBAAC,mBAAQ,IAAC,MAAM,EAAE,MAAM,GAAI,IACxB,IACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,qBAAqB,GAAG,CAAC,IAAY,EAAE,EAAE;IAC7C,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC5D,MAAM,OAAO,GAAG,GAAG,IAAI,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAEhD,OAAO,GAAG,OAAO,IAAI,OAAO,EAAE,CAAC;AACjC,CAAC,CAAC"}

package/mobile/lib/ui-kit/Timer/Timer.d.ts

@@ -1,7 +0,0 @@
-interface TimerProps {
-    interval?: number;
-    title?: string;
-    __html?: string;
-}
-export declare const Timer: import("@redneckz/uni-jsx").UNIComponent<TimerProps, any, any>;
-export {};

package/mobile/lib/ui-kit/Timer/Timer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Timer.js","sourceRoot":"","sources":["../../../src/ui-kit/Timer/Timer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAQhD,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAa,CAAC,EAAE,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IACvE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;QACpB,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,IAAI,IAAI,KAAK,CAAC,EAAE;YACd,aAAa,CAAC,KAAK,CAAC,CAAC;SACtB;QAED,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,kBAAkB,GAAG,GAAG,GAAG,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IAEtE,OAAO,CACL,0BACE,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,eAAe,EAAC,GAAG,GAAG,EAC9C,eAAK,SAAS,EAAC,2CAA2C,aACxD,eAAK,SAAS,EAAC,gGAAgG,aAC7G,cACE,SAAS,EAAC,+BAA+B,EACzC,KAAK,EAAE;oCACL,UAAU,EAAE,mCAAmC,kBAAkB,6BAA6B;iCAC/F,GACD,EACF,cAAK,SAAS,EAAC,4GAA4G,YACxH,qBAAqB,CAAC,IAAI,CAAC,GACxB,IACF,EACN,KAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,GAAI,IACxB,IACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,qBAAqB,GAAG,CAAC,IAAY,EAAE,EAAE;IAC7C,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC5D,MAAM,OAAO,GAAG,GAAG,IAAI,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAEhD,OAAO,GAAG,OAAO,IAAI,OAAO,EAAE,CAAC;AACjC,CAAC,CAAC"}