@redneckz/wildless-cms-uni-blocks 0.14.775 → 0.14.777

package/mobile/src/retail/components/FormStatus/FormStatus.tsx

@@ -0,0 +1,110 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Headline } from '../../../components/Headline/Headline';
+import { useMobileMode } from '../../../hooks/useMobileMode';
+import { type DescriptionProps, type LabelProps } from '../../../model/HeadlineType';
+import { BlockWrapper } from '../../../ui-kit/BlockWrapper';
+import { inputColumnStyles } from '../../../ui-kit/FormField/inputColumnStyle';
+import { Link } from '../../../ui-kit/Link/Link';
+import { Text } from '../../../ui-kit/Text/Text';
+import { TimerCircle } from '../../../ui-kit/TimerCircle/TimerCircle';
+import { type UniBlockProps } from '../../../UniBlock/UniBlockProps';
+import { noop } from '../../../utils/noop';
+import { style } from '../../../utils/style';
+
+type CreditCardFormStatusProps = UniBlockProps & {
+  title?: string;
+  description?: string;
+  interval?: number;
+  sectionInfoTitle?: string;
+  sectionInfo?: (LabelProps & DescriptionProps)[];
+  sectionAdditionalTitle?: string;
+  sectionInfoAdditional?: (LabelProps & DescriptionProps)[];
+  buttonText?: string;
+  onExpire?: () => void;
+};
+
+export const FormStatus = JSX<CreditCardFormStatusProps>(
+  ({
+    title,
+    description: dsc,
+    sectionInfoTitle,
+    sectionInfo,
+    sectionAdditionalTitle,
+    sectionInfoAdditional,
+    buttonText,
+    interval,
+    onExpire = noop,
+    ...props
+  }) => (
+    <BlockWrapper {...props}>
+      <div className="flex flex-col md:flex-row items-center">
+        <Headline
+          headlineVersion="M"
+          title={title}
+          description={dsc}
+          align="text-left"
+          padding="p-xl"
+          className="w-full"
+        />
+        {interval ? <TimerCircle interval={interval} onEnd={onExpire} /> : null}
+      </div>
+      <SectionInfo title={sectionInfoTitle} items={sectionInfo} />
+      <SectionInfo title={sectionAdditionalTitle} items={sectionInfoAdditional} countColumns />
+      {buttonText ? (
+        <Link href="/natural" text={buttonText} version="primary" className="w-full mt-lg" />
+      ) : null}
+    </BlockWrapper>
+  ),
+);
+
+const SectionInfo = ({
+  title,
+  items,
+  countColumns = false,
+}: {
+  title?: string;
+  items?: (LabelProps & DescriptionProps)[];
+  countColumns?: boolean;
+}) => {
+  const isMobile = useMobileMode();
+
+  if (!items) {
+    return null;
+  }
+
+  return (
+    <div>
+      <hr className="w-full h-px bg-main-gray border-0" />
+      <div className="p-xl">
+        {title ? (
+          <Text color="text-primary-text" size="text-h5">
+            <div className={style({ 'mb-m': Boolean(title) })}>{title}</div>
+          </Text>
+        ) : null}
+        {items ? (
+          <div
+            className={style(
+              'grid grid-cols-1 gap-m',
+              inputColumnStyles(countColumns || isMobile ? 1 : 2),
+            )}
+          >
+            {items.map((item, index) => (
+              <div key={index}>{renderItem(item)}</div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+const renderItem = ({ label, description }: LabelProps & DescriptionProps) => (
+  <div className="flex flex-col">
+    <Text color="text-secondary-text" size="text-l">
+      {label}
+    </Text>
+    <Text color="text-primary-text" size="text-xl">
+      {description}
+    </Text>
+  </div>
+);

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

@@ -0,0 +1,89 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getValidStyle } from '../../../ui-kit/Input/getValidStyle';
+import { type PreventableEvent } from '../../../ui-kit/PreventableEvent';
+
+type InputCodeProps = {
+  values: string[];
+  setValues: (_: string[]) => void;
+  hasError?: boolean;
+  errorText?: string;
+};
+
+export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError, errorText }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRefs = useRef<HTMLInputElement[]>([]);
+
+  useEffect(() => {
+    inputRefs.current?.[activeIndex]?.focus();
+  }, [activeIndex]);
+
+  const handleChange = useCallback(
+    (index: number) => (event: PreventableEvent & { currentTarget: { value: string } }) => {
+      const { value } = event.currentTarget;
+      const oneValue = value.slice(0, 1);
+      setValues(values.map((_, i) => (i === index ? oneValue : _)));
+      setActiveIndex(index + 1);
+    },
+    [values],
+  );
+
+  const handleKeyDown = useCallback(
+    (currentIndex: number) => (event: PreventableEvent & { key: string }) => {
+      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: PreventableEvent & { clipboardData: { getData: (v: string) => string } }) => {
+      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">{errorText}</div> : null}
+    </div>
+  );
+});
+
+const getInputStyle = (index: number, values: string[], hasError = false) => {
+  const isInputEmpty = !values[index];
+
+  return `w-16 sm:w-20 h-24 text-5xl text-center p-md m-2 border ${getValidStyle(
+    !hasError || !isInputEmpty,
+  )} rounded-md caret-transparent outline-none`;
+};

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

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../../../ui-kit/Button/Button';
+import { Text } from '../../../ui-kit/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-normal">{text}</Text>
+    </Button>
+  );
+});

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

@@ -0,0 +1,139 @@
+/* eslint-disable max-lines-per-function */
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+import { Headline } from '../../../components/Headline/Headline';
+import { Button } from '../../../ui-kit/Button/Button';
+import { ButtonTitle } from '../../../ui-kit/Button/ButtonTitle';
+import { Dialog } from '../../../ui-kit/DialogManager/Dialog';
+import { useDialog } from '../../../ui-kit/DialogManager/useDialog';
+import { Loader } from '../../../ui-kit/Loader/Loader';
+import { RichText } from '../../../ui-kit/RichText/RichText';
+import { Timer } from '../../../ui-kit/TimerCircle/Timer';
+import { useCountDownTimer } from '../../../ui-kit/TimerCircle/useCountDownTimer';
+import { formatPhone } from '../../../utils/formatPhone';
+import { noop } from '../../../utils/noop';
+import { sendCode } from '../../api/sendCode';
+import { CaptchaDialog } from '../CaptchaDialog/CaptchaDialog';
+import { InputCode } from './InputCode';
+import { SubmitButton } from './SubmitButton';
+import { useVerifyPhoneDialogSubmit } from './useVerifyPhoneDialogSubmit';
+
+export interface VerifyPhoneDialogProps {
+  phone: string;
+  code?: boolean;
+  withDescription?: boolean;
+  codeLength?: number;
+  consents?: string[];
+  onSuccess?: (smsCode?: string) => void;
+  onClose?: () => void;
+}
+
+export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
+  ({
+    phone,
+    code = true,
+    withDescription = true,
+    codeLength = 4,
+    consents,
+    onSuccess = noop,
+    onClose = noop,
+  }) => {
+    const [values, setValues] = useState(Array(codeLength).fill(''));
+
+    const {
+      handleSubmit,
+      hasError,
+      errorText,
+      isLoading,
+      timeNextReq,
+      isSubmitButtonDisabled,
+      setTimeNextReq,
+      setIsTimerStarted,
+      setAttempts,
+    } = useVerifyPhoneDialogSubmit({ values, onSuccess });
+
+    const captchaDialog = useDialog(CaptchaDialog);
+
+    const phoneNumber = formatPhone(phone);
+
+    const restartTimer = useCountDownTimer({ seconds: timeNextReq, onTick: setTimeNextReq });
+
+    const handleSendCode = useCallback(async () => {
+      const isSuccessSendCode = await sendCode({
+        phoneNumber,
+        smsCodesSetName: { key: 'AUTHENTICATION' },
+      });
+
+      if (isSuccessSendCode) {
+        setAttempts(0);
+        setTimeNextReq(180);
+        restartTimer(180);
+        setIsTimerStarted(true);
+      } else {
+        captchaDialog.open({ phoneNumber, sendCode: handleSendCode });
+      }
+    }, [phoneNumber, restartTimer, onClose]);
+
+    useEffect(() => {
+      handleSendCode();
+    }, []);
+
+    return (
+      <Dialog
+        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-xl p-m"
+        onClose={onClose}
+      >
+        <div className="flex flex-col gap-xl items-center rounded-md">
+          <Headline
+            className="w-full"
+            title="Подтвердите номер телефона"
+            description={`Мы отправили код на ${phone}`}
+            headlineVersion="XS"
+            isEmbedded={true}
+            as="h6"
+          />
+          {code ? (
+            <InputCode
+              values={values}
+              setValues={setValues}
+              errorText={errorText}
+              hasError={hasError}
+            />
+          ) : null}
+          {renderText(timeNextReq, handleSendCode)}
+
+          {withDescription ? (
+            <RichText itemSize="list-s">
+              <span>Вводя код, я подтверждаю, что ознакомлен и подписываю: </span>
+              <ul>
+                {consents?.map((_, i) => (
+                  <li key={`${_}-${i}`}>{_}</li>
+                ))}
+              </ul>
+            </RichText>
+          ) : null}
+
+          {renderNextButton(isSubmitButtonDisabled, handleSubmit)}
+          {isLoading ? <Loader blur={false} /> : null}
+        </div>
+      </Dialog>
+    );
+  },
+);
+
+const renderNextButton = (isDisabled: boolean, onClick: () => void) => (
+  <SubmitButton text="Далее" isDisabled={isDisabled} onClick={onClick} />
+);
+
+const renderText = (timeNextReq: number, handleSendCode: () => void) =>
+  timeNextReq ? (
+    <div className="flex flex-row text-l font-light text-base">
+      Получить новый код можно через
+      <Timer className="ml-1" seconds={timeNextReq} />
+    </div>
+  ) : (
+    <Button embedded onClick={handleSendCode}>
+      <ButtonTitle>Получить новый код</ButtonTitle>
+    </Button>
+  );

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

@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { checkCode } from '../../api/checkCode';
+
+type useVerifyPhoneDialogSubmitProps = {
+  values: string[];
+  onSuccess?: (smsCode?: string) => void;
+};
+
+export const useVerifyPhoneDialogSubmit = ({
+  values,
+  onSuccess,
+}: useVerifyPhoneDialogSubmitProps) => {
+  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 resetError = useCallback(() => setErrorText(''), []);
+
+  const isTimeExpired = Boolean(timeNextReq === 0 && isTimerStarted);
+  const isSubmitButtonDisabled = attempts > 2 || isTimeExpired || !values.every(Boolean);
+
+  const handleSubmit = useCallback(async () => {
+    try {
+      setIsTimerStarted(false);
+      setTimeNextReq(0);
+      setAttempts((_) => _ + 1);
+      startLoading();
+      await checkCode({
+        smsText: values.join(''),
+        smsCodesSetName: { key: 'AUTHENTICATION' },
+      });
+      resetError();
+      await onSuccess?.(values.join(''));
+    } catch {
+      setErrorText(attempts > 1 ? 'Исчерпан лимит ввода смс-кода' : 'Неверный код');
+    } finally {
+      endLoading();
+    }
+  }, [values, attempts]);
+
+  useEffect(() => {
+    setErrorText(isTimeExpired ? 'Код просрочен' : '');
+  }, [isTimeExpired]);
+
+  return {
+    handleSubmit,
+    hasError: Boolean(errorText),
+    errorText,
+    isLoading,
+    timeNextReq,
+    isSubmitButtonDisabled,
+    setTimeNextReq,
+    setIsTimerStarted,
+    setAttempts,
+  };
+};