@redneckz/wildless-cms-uni-blocks 0.14.912 → 0.14.914

package/mobile/src/components/ApplicationForm/useVerifyPhoneDialogSubmit.tsx

@@ -0,0 +1,63 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { LeadServiceAPI, type LeadRequest } from '../../api/LeadServiceAPI';
+import { getTimer } from '../../utils/getTimer';
+const API = LeadServiceAPI();
+
+type useVerifyPhoneDialogSubmitProps = {
+  values: string[];
+  formatData: LeadRequest;
+  reqId: string;
+  onSuccess?: (smsCode?: string) => void;
+};
+
+export const useVerifyPhoneDialogSubmit = ({
+  values,
+  onSuccess,
+  formatData,
+  reqId,
+}: useVerifyPhoneDialogSubmitProps) => {
+  const timer = Math.max(getTimer(Date.now()), 0);
+
+  const [errorText, setErrorText] = useState('');
+  const [isLoading, { setTrue: startLoading, setFalse: endLoading }] = useBool(false);
+  const [timeNextReq, setTimeNextReq] = useState(timer);
+
+  const resetError = useCallback(() => setErrorText(''), []);
+
+  const isSubmitButtonDisabled = !values.every(Boolean);
+
+  const handleSubmit = useCallback(async () => {
+    try {
+      startLoading();
+      const response = await API.checkCode({
+        code: values.join(''),
+        body: formatData,
+        reqId,
+      });
+      if (response?.errorDesc) {
+        setErrorText(response?.errorDesc);
+
+        return;
+      }
+      setTimeNextReq(0);
+      resetError();
+      onSuccess?.(values.join(''));
+    } catch {
+      setErrorText('Неверный код');
+    } finally {
+      endLoading();
+    }
+  }, [values]);
+
+  return {
+    handleSubmit,
+    hasError: Boolean(errorText),
+    errorText,
+    isLoading,
+    timeNextReq,
+    isSubmitButtonDisabled,
+    setTimeNextReq,
+    setErrorText,
+  };
+};

package/mobile/src/components/TariffsTable/TariffsTableCell.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { JSONRefObject } from '../../data/JSONRefObject';
-import { type OnCloseProps } from '../../model/onClose';
+import { type OnCloseProps } from '../../model/OnCloseProps';
 import { TableInnerButton } from '../../ui-kit/InnerTable/InnerTableButton';
 import {
   type TableFetchData,

package/mobile/src/retail/api/checkCode.ts

@@ -1,14 +1,10 @@
-import { LeadServiceAPI, type LeadRequest } from '../../api/LeadServiceAPI';
 import { fetchRetailJSON } from './doRequest';
-const API = LeadServiceAPI();
 
 export type CheckCodeBody = {
   smsText: string;
   smsCodesSetName: {
     key: 'AUTHENTICATION' | 'SEND_TASK';
   };
-  reqId?: string;
-  body?: LeadRequest;
 };
 
 export type CheckCodeResponse = {
@@ -17,32 +13,8 @@ export type CheckCodeResponse = {
   refresh_token: string;
 };
 
-type RetailBody = {
-  smsText: string;
-  smsCodesSetName: {
-    key: 'AUTHENTICATION' | 'SEND_TASK';
-  };
-};
-
-export type MainBody = {
-  code: string;
-  reqId: string;
-  body: LeadRequest;
-};
-
-type TransformedBody = RetailBody | MainBody;
-
-export const checkCode = async (body: CheckCodeBody, isRetail: boolean) => {
-  const transformedBody = transformBody(body, isRetail);
-
-  return isRetail
-    ? fetchRetailJSON<CheckCodeResponse>('/sms/checkCode', 'POST', transformedBody).then(saveToken)
-    : fetchMain(transformedBody as MainBody).then((res) => {
-        if (res === null) {
-          throw new Error('Неверный код');
-        }
-      });
-};
+export const checkCode = async (body: CheckCodeBody) =>
+  fetchRetailJSON<CheckCodeResponse>('/sms/checkCode', 'POST', body).then(saveToken);
 
 export const saveToken = (data: CheckCodeResponse | null) => {
   if (data?.access_token && data?.refresh_token) {
@@ -50,20 +22,3 @@ export const saveToken = (data: CheckCodeResponse | null) => {
     globalThis.sessionStorage.setItem('refreshToken', data.refresh_token);
   }
 };
-
-const fetchMain = (body: MainBody) => API.checkCode(body);
-
-const transformBody = (
-  { smsText, smsCodesSetName, body, reqId }: CheckCodeBody,
-  isRetail: boolean,
-): TransformedBody => {
-  if (isRetail) {
-    return { smsText, smsCodesSetName };
-  }
-
-  if (!reqId || !body) {
-    throw new Error('Произошла ошибка, попробуйте позднее');
-  }
-
-  return { code: smsText, reqId, body };
-};

package/mobile/src/retail/api/sendCode.ts

@@ -1,6 +1,4 @@
-import { LeadServiceAPI } from '../../api/LeadServiceAPI';
 import { doRequest } from './doRequest';
-const API = LeadServiceAPI();
 
 export type SendCodeBody = {
   phoneNumber: string;
@@ -9,13 +7,7 @@ export type SendCodeBody = {
   };
 };
 
-export const sendCode = (body: SendCodeBody, isRetail: boolean) => {
-  return isRetail ? fetchRetail(body) : fetchMain(body);
-};
-
-const fetchRetail = (body: SendCodeBody) =>
+export const sendCode = (body: SendCodeBody) =>
   doRequest('/sms/sendCode', 'POST', body)
     .then((res) => res.text())
     .then((text) => text === 'OK');
-
-const fetchMain = (body: SendCodeBody) => API.sendCode({ phone: body.phoneNumber });

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

@@ -1,23 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useSessionStore } from '@redneckz/uni-jsx/lib/Store/useSessionStore';
-import { type LeadRequest } from '../../../api/LeadServiceAPI';
-import { Headline } from '../../../components/Headline/Headline';
 import type { OnCloseProps } from '../../../model/OnCloseProps';
-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 { VerifyPhoneDialogLayout } from '../../../ui-kit/VerifyPhoneDialogLayout/VerfiyPhoneDialogLayout';
 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 {
   TIME_TO_RESEND,
   useVerifyPhoneDialogSubmit,
@@ -31,26 +23,12 @@ export interface VerifyPhoneDialogProps extends OnCloseProps {
   withDescription?: boolean;
   consents?: string[];
   onSuccess?: (smsCode?: string) => void;
-  formatData?: LeadRequest;
-  reqId?: string;
-  isRetail?: boolean;
 }
 
 export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
-  // eslint-disable-next-line max-lines-per-function
-  ({
-    phone,
-    withDescription = true,
-    consents,
-    onSuccess = noop,
-    onClose = noop,
-    formatData,
-    reqId,
-    isRetail = true,
-  }) => {
-    const [values, setValues] = useState(Array(CODE_LENGTH).fill(''));
+  ({ phone, withDescription = true, consents, onSuccess = noop, onClose = noop }) => {
+    const [values, setValues] = useState<string[]>(Array(CODE_LENGTH).fill('') as string[]);
     const sessionStore = useSessionStore<SmsCodeStore>();
-    const [requestId, setRequestId] = useState(reqId);
 
     const {
       handleSubmit,
@@ -64,9 +42,6 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
     } = useVerifyPhoneDialogSubmit({
       values,
       onSuccess,
-      formatData,
-      reqId: requestId,
-      isRetail,
     });
 
     const captchaDialog = useDialog(CaptchaDialog);
@@ -74,13 +49,10 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
     const restartTimer = useCountDownTimer({ seconds: timeNextReq, onTick: setTimeNextReq });
 
     const handleSendCode = useCallback(async () => {
-      const response = await sendCode(
-        {
-          phoneNumber,
-          smsCodesSetName: { key: 'AUTHENTICATION' },
-        },
-        isRetail,
-      );
+      const response = await sendCode({
+        phoneNumber,
+        smsCodesSetName: { key: 'AUTHENTICATION' },
+      });
 
       if (response) {
         setTimeNextReq(TIME_TO_RESEND);
@@ -90,52 +62,37 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
           sendTime: Date.now(),
           attempts: 0,
         };
-
-        if (!isRetail) {
-          setRequestId(String(response));
-        }
       } else {
         captchaDialog.open({ phoneNumber, sendCode: handleSendCode });
       }
     }, [phoneNumber, restartTimer, onClose]);
 
     useEffect(() => {
-      if (!sessionStore.smsCode?.sendTime && isRetail) {
+      if (!sessionStore.smsCode?.sendTime) {
         handleSendCode();
       }
     }, []);
 
     return (
-      <Dialog maxWidth="lg" onClose={onClose}>
-        <div className="flex flex-col gap-xl items-center rounded-md">
-          {renderHeadline(phone)}
-          <InputCode
-            values={values}
-            setValues={setValues}
-            errorText={errorText}
-            hasError={hasError}
-          />
-          {renderText(timeNextReq, handleSendCode)}
-          {renderDescription(consents, withDescription)}
-          {renderNextButton(isSubmitButtonDisabled, handleSubmit)}
-          {isLoading ? <Loader blur={false} /> : null}
-        </div>
-      </Dialog>
+      <VerifyPhoneDialogLayout
+        isSubmitButtonDisabled={isSubmitButtonDisabled}
+        onSubmit={handleSubmit}
+        onSendCode={handleSendCode}
+        timeNextReq={timeNextReq}
+        values={values}
+        onChange={setValues}
+        phone={phone}
+        isLoading={isLoading}
+        errorText={errorText}
+        hasError={hasError}
+        onClose={onClose}
+      >
+        {renderDescription(consents, withDescription)}
+      </VerifyPhoneDialogLayout>
     );
   },
 );
 
-const renderHeadline = (phone: string) => (
-  <Headline
-    className="w-full"
-    title="Подтвердите номер телефона"
-    description={`Мы отправили код на ${phone}`}
-    headlineVersion="XS"
-    isEmbedded={true}
-    as="h6"
-  />
-);
-
 const renderDescription = (consents?: string[], isRender = false) =>
   isRender ? (
     <RichText itemSize="list-s">
@@ -147,19 +104,3 @@ const renderDescription = (consents?: string[], isRender = false) =>
       </ul>
     </RichText>
   ) : null;
-
-const renderNextButton = (disabled: boolean, onClick: () => void) => (
-  <SubmitButton text="Далее" disabled={disabled} onClick={onClick} />
-);
-
-const renderText = (timeNextReq: number, handleSendCode: () => void) =>
-  timeNextReq ? (
-    <div className="flex flex-row text-l font-light text-base">
-      Получить новый код можно через
-      <Timer className="pl-2xs" seconds={timeNextReq} />
-    </div>
-  ) : (
-    <Button embedded onClick={handleSendCode}>
-      <ButtonTitle>Получить новый код</ButtonTitle>
-    </Button>
-  );

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

@@ -1,18 +1,14 @@
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useSessionStore } from '@redneckz/uni-jsx/lib/Store/useSessionStore';
-import { type LeadRequest } from '../../../api/LeadServiceAPI';
+import { getTimer } from '../../../utils/getTimer';
 import { checkCode } from '../../api/checkCode';
 
 export const TIME_TO_RESEND = 180;
-export const TIME_TO_MAIN_EXPIRE = 600;
 
 type useVerifyPhoneDialogSubmitProps = {
   values: string[];
   onSuccess?: (smsCode?: string) => void;
-  formatData?: LeadRequest;
-  reqId?: string;
-  isRetail?: boolean;
 };
 
 export interface SmsCodeStore {
@@ -25,9 +21,6 @@ export interface SmsCodeStore {
 export const useVerifyPhoneDialogSubmit = ({
   values,
   onSuccess,
-  formatData,
-  reqId,
-  isRetail = true,
 }: useVerifyPhoneDialogSubmitProps) => {
   const sessionStore = useSessionStore<SmsCodeStore>();
   const attempts = sessionStore.smsCode?.attempts || 0;
@@ -49,19 +42,14 @@ export const useVerifyPhoneDialogSubmit = ({
         attempts: attempts + 1,
       };
       startLoading();
-      await checkCode(
-        {
-          smsText: values.join(''),
-          smsCodesSetName: { key: 'AUTHENTICATION' },
-          body: isRetail ? undefined : formatData,
-          reqId: isRetail ? undefined : reqId,
-        },
-        isRetail,
-      );
+      await checkCode({
+        smsText: values.join(''),
+        smsCodesSetName: { key: 'AUTHENTICATION' },
+      });
       setTimeNextReq(0);
       resetError();
       sessionStore.smsCode = null;
-      await onSuccess?.(values.join(''));
+      onSuccess?.(values.join(''));
     } catch {
       setErrorText(attempts > 1 ? 'Исчерпан лимит ввода смс-кода' : 'Неверный код');
     } finally {
@@ -70,7 +58,7 @@ export const useVerifyPhoneDialogSubmit = ({
   }, [values, attempts]);
 
   useEffect(() => {
-    if (isTimeExpired && isRetail) {
+    if (isTimeExpired) {
       setErrorText('Код просрочен');
     } else if (attempts > 2) {
       setErrorText('Исчерпан лимит ввода смс-кода');
@@ -88,5 +76,3 @@ export const useVerifyPhoneDialogSubmit = ({
     setErrorText,
   };
 };
-
-const getTimer = (sendTime: number) => TIME_TO_RESEND - Math.floor((Date.now() - sendTime) / 1000);

package/mobile/src/retail/utils/mockLocalStorage.ts

@@ -13,21 +13,15 @@ export const mockLocalStorage = async () => {
     globalThis.localStorage.getItem('profileId') ??
     (await createUserProfile({ profile: { phone: PHONE } }));
 
-  await sendCode(
-    {
-      phoneNumber: PHONE,
-      smsCodesSetName: { key: 'AUTHENTICATION' },
-    },
-    true,
-  );
-
-  await checkCode(
-    {
-      smsCodesSetName: { key: 'AUTHENTICATION' },
-      smsText: '1234',
-    },
-    true,
-  );
+  await sendCode({
+    phoneNumber: PHONE,
+    smsCodesSetName: { key: 'AUTHENTICATION' },
+  });
+
+  await checkCode({
+    smsCodesSetName: { key: 'AUTHENTICATION' },
+    smsText: '1234',
+  });
 
   const task = {
     taskId: globalThis.localStorage.getItem('taskId'),

package/mobile/src/ui-kit/BaseTile/BaseTile.tsx

@@ -94,7 +94,7 @@ export const BaseTile = JSX<BaseTileProps>(
 
 const renderMiddleContent = (insetTitle: VNode, children: VNode) =>
   insetTitle || children ? (
-    <div className="grow space-y-lg w-fit">
+    <div className="space-y-lg">
       {insetTitle}
       {children}
     </div>

package/mobile/src/ui-kit/ResponseTypeDialog/ResponseTypeDialog.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Headline } from '../../components/Headline/Headline';
-import { type OnCloseProps } from '../../model/onClose';
+import { type OnCloseProps } from '../../model/OnCloseProps';
 import { Button } from '../Button/Button';
 import { Dialog } from '../DialogManager/Dialog';
 import { Img } from '../Img/Img';

package/mobile/src/ui-kit/VerifyPhoneDialogLayout/VerfiyPhoneDialogLayout.tsx

@@ -0,0 +1,80 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Headline } from '../../components/Headline/Headline';
+import { type OnCloseProps } from '../../model/OnCloseProps';
+import { type VNode } from '../../model/VNode';
+import { InputCode } from '../../retail/components/VerifyPhoneDialog/InputCode';
+import { SubmitButton } from '../../retail/components/VerifyPhoneDialog/SubmitButton';
+import { Button } from '../Button/Button';
+import { ButtonTitle } from '../Button/ButtonTitle';
+import { Dialog } from '../DialogManager/Dialog';
+import { Loader } from '../Loader/Loader';
+import { Timer } from '../TimerCircle/Timer';
+
+export interface VerifyPhoneDialogProps extends OnCloseProps {
+  isSubmitButtonDisabled: boolean;
+  onSubmit: () => Promise<void>;
+  onSendCode: () => Promise<void>;
+  timeNextReq: number;
+  values: string[];
+  onChange: (values: string[]) => void;
+  phone: string;
+  children?: VNode;
+  isLoading?: boolean;
+  errorText?: string;
+  hasError?: boolean;
+}
+
+export const VerifyPhoneDialogLayout = JSX<VerifyPhoneDialogProps>(
+  ({
+    children,
+    isLoading,
+    isSubmitButtonDisabled,
+    timeNextReq,
+    onSubmit,
+    onSendCode,
+    values,
+    onChange,
+    errorText,
+    hasError,
+    phone,
+    onClose,
+  }) => (
+    <Dialog maxWidth="lg" onClose={onClose}>
+      <div className="flex flex-col gap-xl items-center rounded-md">
+        {renderHeadline(phone)}
+        <InputCode values={values} setValues={onChange} errorText={errorText} hasError={hasError} />
+        {renderText(timeNextReq, onSendCode)}
+        {children}
+        {renderNextButton(isSubmitButtonDisabled, onSubmit)}
+        {isLoading ? <Loader blur={false} /> : null}
+      </div>
+    </Dialog>
+  ),
+);
+
+const renderHeadline = (phone: string) => (
+  <Headline
+    className="w-full"
+    title="Подтвердите номер телефона"
+    description={`Мы отправили код на ${phone}`}
+    headlineVersion="XS"
+    isEmbedded={true}
+    as="h6"
+  />
+);
+
+const renderNextButton = (disabled: boolean, onClick: () => void) => (
+  <SubmitButton text="Далее" disabled={disabled} onClick={onClick} />
+);
+
+const renderText = (timeNextReq: number, handleSendCode: () => void) =>
+  timeNextReq ? (
+    <div className="flex flex-row text-l font-light text-base gap-2xs">
+      <span> Получить новый код можно через</span>
+      <Timer seconds={timeNextReq} />
+    </div>
+  ) : (
+    <Button embedded onClick={handleSendCode}>
+      <ButtonTitle>Получить новый код</ButtonTitle>
+    </Button>
+  );

package/mobile/src/utils/getTimer.ts

@@ -0,0 +1,4 @@
+export const TIME_TO_RESEND = 180;
+
+export const getTimer = (sendTime: number) =>
+  TIME_TO_RESEND - Math.floor((Date.now() - sendTime) / 1000);

package/package.json

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

package/src/api/LeadServiceAPI.ts

@@ -1,6 +1,5 @@
 import { type JSONRecord, type JSONScalar } from '@redneckz/json-op';
 import { type Router } from '../external/useRouter';
-import { type MainBody } from '../retail/api/checkCode';
 import { API_BASE_URI } from './apiBaseUrl';
 import { getPhoneBody, getSubmitBody } from './getSubmitBody';
 
@@ -18,7 +17,18 @@ export type LeadRequest = Record<string, JSONRecord | JSONScalar | null> & {
   partnerName?: string;
 };
 
-export type CheckCodeProps = MainBody;
+export type CheckCodeProps = {
+  reqId: string;
+  code: string;
+  body: LeadRequest;
+};
+
+type CheckCodeResponse = {
+  errorCode?: string;
+  errorDesc?: string;
+  reqId?: string;
+  status?: string;
+} | null;
 
 type VerifiedLeadRequest = {
   requestId: string;
@@ -73,7 +83,7 @@ export function LeadServiceAPI() {
     }
   }
 
-  async function checkCode({ reqId, code, body }: CheckCodeProps) {
+  async function checkCode({ reqId, code, body }: CheckCodeProps): Promise<CheckCodeResponse> {
     const submitBody = {
       requestId: reqId,
       confimationCode: code,
@@ -83,10 +93,6 @@ export function LeadServiceAPI() {
     try {
       const response = await LeadServiceFetch(`${API_BASE_URI}/confirmCorporateLead`, submitBody);
 
-      if (!response?.ok) {
-        return null;
-      }
-
       return await response.json();
     } catch (e) {
       return null;

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -6,7 +6,6 @@ import { useAspects } from '../../hooks/useAspects/useAspects';
 import { useForm, type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { type FormTypeFieldDef } from '../../model/FormTypeFieldDef';
 import { type SectionsProps } from '../../model/InputSectionsType';
-import { VerifyPhoneDialog } from '../../retail/components/VerifyPhoneDialog/VerifyPhoneDialog';
 import { ApplicationFormLayout } from '../../ui-kit/ApplicationFormLayout/ApplicationFormLayout';
 import { useDialog } from '../../ui-kit/DialogManager/useDialog';
 import { getConsentDataProcessing } from '../../ui-kit/FormField/getConsentDataProcessing';
@@ -28,6 +27,7 @@ import { getFormatData } from './getFormatData';
 import { getInitialFormState, type FormState } from './getInitialFormState';
 import { renderAgreementSubmit } from './renderAgreementSubmit';
 import { renderContacts } from './renderContacts';
+import { VerifyPhoneDialog } from './VerifyPhoneDialog';
 
 export interface ApplicationFormProps extends ApplicationFormContent, UniBlockProps {}
 
@@ -84,10 +84,8 @@ export const ApplicationForm = UniBlock<ApplicationFormProps>(
 
           verifyPhoneDialog.open({
             phone,
-            withDescription: false,
             formatData,
             reqId: String(response),
-            isRetail: false,
             onSuccess: () => {
               verifyPhoneDialog.close();
               responseTypeDialog.open({ ok: true, typeForm });