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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.587",
+  "version": "0.14.589",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -210,7 +210,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "74 kB",
+      "limit": "75 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/api/RetailApi/RetailApi.ts

@@ -1,4 +1,5 @@
 import {
+  type CapchaTextType,
   type CheckCodeBody,
   type CheckCodeResponse,
   type CreateDraftTaskBody,
@@ -12,6 +13,8 @@ import {
 
 type RequsetMethod = 'POST' | 'GET' | 'PUT';
 
+const getResponse = (response: Response) => (isJSON(response) ? response.json() : response);
+
 const getAthorizationHeaders = () => {
   const token = sessionStorage.getItem('accessToken');
 
@@ -29,7 +32,17 @@ const request = async <T>(url: string, method: RequsetMethod, body?: any): Promi
     },
     credentials: 'include',
     body: body ? JSON.stringify(body) : null,
-  }).then((response) => (isJSON(response) ? response.json() : response));
+  })
+    .then((response: Response) => {
+      if (response.ok) {
+        return getResponse(response);
+      } else {
+        throw response;
+      }
+    })
+    .catch((error) => {
+      throw error;
+    });
 
 const saveToken = (data: CheckCodeResponse) => {
   sessionStorage.setItem('accessToken', data.access_token as string);
@@ -48,4 +61,8 @@ export const RETAIL_API = {
   SendCode: async (body: SendCodeBody) => await request('/sms/sendCode', 'POST', body),
   CheckCode: async (body: CheckCodeBody) =>
     await request<CheckCodeResponse>('/sms/checkCode', 'POST', body).then(saveToken),
+  CreateCaptcha: async (phoneNumber: string) =>
+    await request<Response>(`/sms/createCaptcha?phoneNumber=${phoneNumber}`, 'GET'),
+  CheckCaptcha: async (body: CapchaTextType) =>
+    await request<Response>('/sms/checkCaptcha', 'POST', body),
 };

package/src/api/RetailApi/RetailApiTypes.ts

@@ -89,3 +89,7 @@ export type CheckCodeResponse = {
   expires_in: number;
   refresh_token: string;
 };
+
+export type CapchaTextType = {
+  captchaText: string;
+};

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 /* eslint-disable max-len */
 
 import { type AspectsProps } from '../../model/AspectsProps';
@@ -17,7 +18,7 @@ export type SubmitButtonProps = TextProps & {
 /**
  * @title Название поля ввода
  * @required
- * @enumNames ["Фамилия", "Имя", "Отчество", "Образование", "Тип жилья", "Информация о трудоустройстве", "Тип организации", "Количество работающих в организации", "Вид деятельности работодателя", "Вид организации работодателя", "Должность в организации", "Email", "Телефон", "ФИО", "ИНН", "ОПФ", "Наименование организации", "Общий стаж", "Стаж на последнем рабочем месте", "Стаж", "Количество мест работы", "Дата начала работы на текущем месте", "Адрес работодателя", "Комментарий", "Регион", "Регион выездной сервис", "Адрес", "Тип формы", "День рождения", "Клиент банка", "Согласие на получение материалов", "Тип эквайринга", "Онлайн касса", "POS-терминал", "Направление обслуживания", "Ультра/Премиум", "Тип обратной связи", "Способ получения ответа", "Банковский служащий", "Дата и время обращения", "Дополнительный телефон", "ВЭД", "Срок (месяцев)", "Сумма ₽", "Годовой доход", "Количество объектов инкассации", "День встречи", "Продукт", "Комментарий партнёров", "Согласие на обработку", "Семейное положение", "Количество иждивенцев", "Количество членов семьи", "Количество детей до 18 лет", "Совокупный официальный доход в месяц после вычета налогов (зарплата, премии)", "Статус военнообязанного", "Обязательные расходы в месяц", "Наличие военного билета", "Обязательные расходы в месяц"]
+ * @enumNames ["Фамилия", "Имя", "Отчество", "Образование", "Тип жилья", "Информация о трудоустройстве", "Тип организации", "Количество работающих в организации", "Вид деятельности работодателя", "Вид организации работодателя", "Должность в организации", "Серия документа", "Номер документа", "Дата выдачи", "Код подразделения", "Кем выдан", "Email", "Телефон", "ФИО", "ИНН", "ОПФ", "Наименование организации", "Общий стаж", "Стаж на последнем рабочем месте", "Стаж", "Количество мест работы", "Дата начала работы на текущем месте", "Адрес работодателя", "Комментарий", "Регион", "Регион выездной сервис", "Адрес", "Тип формы", "День рождения", "Клиент банка", "Согласие на получение материалов", "Тип эквайринга", "Онлайн касса", "POS-терминал", "Направление обслуживания", "Ультра/Премиум", "Тип обратной связи", "Способ получения ответа", "Банковский служащий", "Дата и время обращения", "Дополнительный телефон", "ВЭД", "Срок (месяцев)", "Сумма ₽", "Годовой доход", "Количество объектов инкассации", "День встречи", "Продукт", "Комментарий партнёров", "Согласие на обработку", "Семейное положение", "Количество иждивенцев", "Количество членов семьи", "Количество детей до 18 лет", "Совокупный официальный доход в месяц после вычета налогов (зарплата, премии)", "Статус военнообязанного", "Обязательные расходы в месяц", "Наличие военного билета", "Обязательные расходы в месяц"]
  */
 export type NameFieldDef =
   | 'surname'
@@ -31,6 +32,11 @@ export type NameFieldDef =
   | 'employerActivities'
   | 'employerOrganization'
   | 'positionOrganization'
+  | 'dulSerie'
+  | 'dulNumber'
+  | 'dulIssueDateField'
+  | 'dulSubdivisionCode'
+  | 'dulIssuedBy'
   | 'email'
   | 'phone'
   | 'fullName'

package/src/components/ApplicationLeadForm/ApplicationLeadFormContent.ts

@@ -18,7 +18,7 @@ export type SubmitButtonProps = TextProps & {
 /**
  * @title Название поля ввода
  * @required
- * @enumNames ["Фамилия", "Имя", "Отчество", "Образование", "Тип жилья", "Информация о трудоустройстве", "Тип организации", "Количество работающих в организации", "Вид деятельности работодателя", "Вид организации работодателя", "Должность в организации", "Email", "Телефон", "ФИО", "ИНН", "ОПФ", "Наименование организации", "Общий стаж", "Стаж на последнем рабочем месте", "Стаж", "Количество мест работы", "Дата начала работы на текущем месте", "Адрес работодателя", "Комментарий", "Регион", "Регион выездной сервис", "Адрес", "Тип формы", "День рождения", "Клиент банка", "Согласие на получение материалов", "Тип эквайринга", "Онлайн касса", "POS-терминал", "Направление обслуживания", "Ультра/Премиум", "Тип обратной связи", "Способ получения ответа", "Банковский служащий", "Дата и время обращения", "Дополнительный телефон", "ВЭД", "Срок (месяцев)", "Сумма ₽", "Годовой доход", "Количество объектов инкассации", "День встречи", "Продукт", "Комментарий партнёров", "Согласие на обработку", "Семейное положение", "Количество иждивенцев", "Количество членов семьи", "Количество детей до 18 лет", "Совокупный официальный доход в месяц после вычета налогов (зарплата, премии)", "Статус военнообязанного", "Обязательные расходы в месяц", "Наличие военного билета", "Обязательные расходы в месяц"]
+ * @enumNames ["Фамилия", "Имя", "Отчество", "Образование", "Тип жилья", "Информация о трудоустройстве", "Тип организации", "Количество работающих в организации", "Вид деятельности работодателя", "Вид организации работодателя", "Должность в организации", "Серия документа", "Номер документа", "Дата выдачи", "Код подразделения", "Кем выдан", "Email", "Телефон", "ФИО", "ИНН", "ОПФ", "Наименование организации", "Общий стаж", "Стаж на последнем рабочем месте", "Стаж", "Количество мест работы", "Дата начала работы на текущем месте", "Адрес работодателя", "Комментарий", "Регион", "Регион выездной сервис", "Адрес", "Тип формы", "День рождения", "Клиент банка", "Согласие на получение материалов", "Тип эквайринга", "Онлайн касса", "POS-терминал", "Направление обслуживания", "Ультра/Премиум", "Тип обратной связи", "Способ получения ответа", "Банковский служащий", "Дата и время обращения", "Дополнительный телефон", "ВЭД", "Срок (месяцев)", "Сумма ₽", "Годовой доход", "Количество объектов инкассации", "День встречи", "Продукт", "Комментарий партнёров", "Согласие на обработку", "Семейное положение", "Количество иждивенцев", "Количество членов семьи", "Количество детей до 18 лет", "Совокупный официальный доход в месяц после вычета налогов (зарплата, премии)", "Статус военнообязанного", "Обязательные расходы в месяц", "Наличие военного билета", "Обязательные расходы в месяц"]
  */
 export type NameFieldDef =
   | 'surname'
@@ -32,6 +32,11 @@ export type NameFieldDef =
   | 'employerActivities'
   | 'employerOrganization'
   | 'positionOrganization'
+  | 'dulSerie'
+  | 'dulNumber'
+  | 'dulIssueDateField'
+  | 'dulSubdivisionCode'
+  | 'dulIssuedBy'
   | 'email'
   | 'phone'
   | 'fullName'

package/src/components/ApplicationLeadForm/getInitialFormState.tsx

@@ -25,6 +25,11 @@ export interface FormState {
   employerActivities?: string;
   employerOrganization?: string;
   positionOrganization?: string;
+  dulSerie?: number;
+  dulNumber?: number;
+  dulIssueDateField?: string;
+  dulSubdivisionCode?: string;
+  dulIssuedBy?: string;
   email?: string;
   acquiringType?: Option;
   serviceType?: Option;

package/src/components/ApplicationLeadForm/useApplicationLeadApi.ts

@@ -38,14 +38,14 @@ export const useApplicationLeadApi = (inputs: FieldDef[], programId: string) =>
             await RETAIL_API.UpdateUserTask(
               getUpdateUserTaskData(participantId, taskId, profileId, formData),
             );
-            setResponseStatus('OK');
+            globalThis.location.href = '/credit-lead';
           } catch {
             setResponseStatus('Fail');
           }
         };
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const verifyPhoneDialog = useVerifyPhoneDialog({
-          onClose: handleSuccessVerify,
+          close: handleSuccessVerify,
           ...verifyPhoneContent(formData?.phone),
         });
         verifyPhoneDialog.open();
@@ -64,12 +64,11 @@ export const useApplicationLeadApi = (inputs: FieldDef[], programId: string) =>
 const verifyPhoneContent = (phone: string) => ({
   title: 'Подтвердите номер телефона',
   description: `Мы отправили код на ${phone}`,
-  phone: formatPhone(phone),
+  phoneNumber: formatPhone(phone),
   textButton: 'Оформить',
   __html: `<span>Вводя код, я подтверждаю, что ознакомлен и подписываю:</span>
               <ul><li>соглашение о порядке использования простой электронной подписи,
               </li><li>согласие на обработку персональных данных,
               </li><li>предоставление и подписание прочих согласий Банка,
               </li><li>согласие на запрос в ПФР</li></ul>`,
-  href: '/credit-lead',
 });