@redneckz/wildless-cms-uni-blocks 0.14.566 → 0.14.568

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.566",
+  "version": "0.14.568",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -5,22 +5,20 @@ import { handleAspects } from '../../hooks/useAspects/handleAspects';
 import { useAspects } from '../../hooks/useAspects/useAspects';
 import { useForm } from '../../hooks/useForm';
 import { ApplicationFormLayout } from '../../ui-kit/ApplicationFormLayout/ApplicationFormLayout';
+import { getConsentDataProcessing } from '../../ui-kit/FormField/getConsentDataProcessing';
+import { getField } from '../../ui-kit/FormField/getField';
+import { getObjectValidator } from '../../ui-kit/FormField/getObjectValidator';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { renderTitle } from '../../ui-kit/FormField/renderTitle';
 import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { useResponseTypeDialog } from '../../ui-kit/ResponseTypeDialog/useResponseTypeDialog';
-import { Text } from '../../ui-kit/Text/Text';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { objectValidator } from '../../validation/objectValidator';
 import { isValidationSuccess } from '../../validation/validator';
-import {
-  type ApplicationFormContent,
-  type FieldDef,
-  type FormColumnsCount,
-} from './ApplicationFormContent';
-import { getField } from './getField';
+import { type ApplicationFormContent, type FieldDef } from './ApplicationFormContent';
 import { getFormatData } from './getFormatData';
 import { getInitialFormState, type FormState } from './getInitialFormState';
-import { getObjectValidator } from './getObjectValidator';
 import { renderAgreementSubmit } from './renderAgreementSubmit';
 import { renderContacts } from './renderContacts';
 
@@ -108,19 +106,6 @@ export const ApplicationForm = JSX<ApplicationFormProps>(
   },
 );
 
-const renderTitle = (title?: string) =>
-  title ? (
-    <div className="@xl:text-center @xl:col-span-2 mb-m">
-      <Text size="text-h6">{title}</Text>
-    </div>
-  ) : null;
-
-const inputColumnStyles = (column: FormColumnsCount | undefined) =>
-  column === 2 ? '@xl:grid-cols-2' : '';
-
-const getConsentDataProcessing = (inputs: FieldDef[]) =>
-  inputs?.find((_) => _?.name === 'consentDataProcessing');
-
 const getFilteredInputs = (inputs: FieldDef[], data: FormState) =>
   inputs
     .filter((_) => _)

package/src/components/ApplicationForm/getFormatData.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
+import { VED_TYPES } from '../../ui-kit/FormField/Fields/VedField';
 import { type Option } from '../../ui-kit/Select/Option';
 import { type FormState } from './getInitialFormState';
 import { getPartnerComments } from './getPartnerComments';
-import { VED_TYPES } from './VedField';
 
 export const getFormatData = (data: FormState): Record<string, any> => {
   const {

package/src/components/ApplicationForm/getInitialFormState.tsx

@@ -1,8 +1,13 @@
+import {
+  FEEDBACK_METHOD,
+  FEEDBACK_TYPES,
+  SERVICE_DIRECTIONS,
+  SERVICE_TYPES,
+} from '../../ui-kit/FormField/constants';
+import { ACQUIRING_TYPES } from '../../ui-kit/FormField/Fields/AcquiringField';
+import { VED_TYPES } from '../../ui-kit/FormField/Fields/VedField';
 import { type Option } from '../../ui-kit/Select/Option';
-import { ACQUIRING_TYPES } from './AcquiringField';
 import { type FieldDef } from './ApplicationFormContent';
-import { FEEDBACK_METHOD, FEEDBACK_TYPES, SERVICE_DIRECTIONS, SERVICE_TYPES } from './constants';
-import { VED_TYPES } from './VedField';
 
 export interface FormState {
   typeForm?: Option | string;

package/src/components/ApplicationForm/getPartnerComments.tsx

@@ -1,4 +1,4 @@
-import { isAcquiringTrade } from './AcquiringField';
+import { isAcquiringTrade } from '../../ui-kit/FormField/Fields/AcquiringField';
 import { type FormState } from './getInitialFormState';
 
 export const getPartnerComments = (data: FormState): string => {

package/src/components/ApplicationForm/getRegionUrl.tsx

@@ -1,4 +1,4 @@
-import { OUT_SERVICE_URL } from './constants';
+import { OUT_SERVICE_URL } from '../../ui-kit/FormField/constants';
 
 export const getRegionUrl = (typeForm?: string) =>
   typeForm === 'OUTSERVICE' ? OUT_SERVICE_URL : undefined;

package/src/components/ApplicationForm/renderAgreementSubmit.tsx

@@ -1,12 +1,12 @@
 import { type FieldProps } from '../../hooks/useForm';
 import { type LinkProps } from '../../model/LinkProps';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { agreementValidator } from '../../ui-kit/FormField/validators';
 import { renderErrorText } from '../../ui-kit/Input/renderErrorText';
 import { withValidator } from '../../validation/withValidator';
 import { type SubmitButtonProps } from './ApplicationFormContent';
 import { Footnote } from './Footnote';
 import { renderSubmitButton } from './renderSubmitButton';
-import { agreementValidator } from './validators';
 
 const agreementText = 'Нажимая кнопку, вы подтверждаете согласие с ';
 export const renderAgreementSubmit = (