@redneckz/wildless-cms-uni-blocks 0.14.713 → 0.14.715

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

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { checkCode } from '../../api/RetailAPI/checkCode';
 
 type useVerifyPhoneDialogSubmitProps = {
@@ -11,7 +12,7 @@ export const useVerifyPhoneDialogSubmit = ({
   onSuccess,
 }: useVerifyPhoneDialogSubmitProps) => {
   const [errorText, setErrorText] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, { setTrue: startLoading, setFalse: endLoading }] = useBool(false);
   const [timeNextReq, setTimeNextReq] = useState(0);
   const [isTimerStarted, setIsTimerStarted] = useState(false);
   const [attempts, setAttempts] = useState(0);
@@ -26,17 +27,17 @@ export const useVerifyPhoneDialogSubmit = ({
       setIsTimerStarted(false);
       setTimeNextReq(0);
       setAttempts((_) => _ + 1);
-      setIsLoading(true);
+      startLoading();
       await checkCode({
         smsText: values.join(''),
         smsCodesSetName: { key: 'AUTHENTICATION' },
       });
       resetError();
-      onSuccess?.(values.join(''));
+      await onSuccess?.(values.join(''));
     } catch {
       setErrorText(attempts > 1 ? 'Исчерпан лимит ввода смс-кода' : 'Неверный код');
     } finally {
-      setIsLoading(false);
+      endLoading();
     }
   }, [values, attempts]);
 

package/package.json

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

package/src/api/RetailAPI/sendCode.ts

@@ -1,5 +1,4 @@
-import { fetchRetailJSON } from './doRequest';
-import { type StatusType } from './StatusType';
+import { doRequest } from './doRequest';
 
 export type SendCodeBody = {
   phoneNumber: string;
@@ -8,17 +7,7 @@ export type SendCodeBody = {
   };
 };
 
-type SendCodeErrorResult = { errorMessage: string };
-
 export const sendCode = (body: SendCodeBody) =>
-  fetchRetailJSON<StatusType | SendCodeErrorResult>('/sms/sendCode', 'POST', body).then(
-    (res) => !isErrorResult(res, body.phoneNumber),
-  );
-
-const isErrorResult = (
-  res: StatusType | SendCodeErrorResult | null,
-  phoneNumber: string,
-): res is SendCodeErrorResult =>
-  Boolean(res) &&
-  typeof res !== 'string' &&
-  Boolean(res?.errorMessage?.startsWith(`Too many request for phoneNumber [${phoneNumber}]`));
+  doRequest('/sms/sendCode', 'POST', body)
+    .then((res) => res.text())
+    .then((text) => text === 'OK');

package/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -26,7 +26,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     );
 
     const [initialFormState, { isLoading }] = useInitApplicationLead(inputs, nextStepLink);
-    const { handleSubmit, responseStatus } = useApplicationLeadApi({
+    const { handleSubmit, responseStatus, isSending } = useApplicationLeadApi({
       inputs,
       programId,
       nextStepLink,
@@ -58,7 +58,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
               {renderInputs({ field, inputs: _?.inputs })}
             </div>
           ))}
-          {renderSubmitButton(button)}
+          {renderSubmitButton(button, isSending)}
         </form>
       </ApplicationFormLayout>
     );

package/src/components/ApplicationLeadForm/renderSubmitButton.tsx

@@ -2,8 +2,8 @@ import { Button } from '../../ui-kit/Button/Button';
 import { style } from '../../utils/style';
 import { type SubmitButtonProps } from './ApplicationLeadFormContent';
 
-export const renderSubmitButton = (button?: SubmitButtonProps, className?: string) => (
-  <Button className={style('w-full @xl:w-auto', className)} type="submit">
+export const renderSubmitButton = (button?: SubmitButtonProps, isSending?: boolean) => (
+  <Button className={style('w-full @xl:w-auto')} type="submit" isLoading={isSending}>
     {button?.text ? button.text : 'Отправить заявку'}
   </Button>
 );

package/src/components/ApplicationLeadForm/useApplicationLeadApi.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { createDraftTask } from '../../api/RetailAPI/createDraftTask';
 import { createUserProfile } from '../../api/RetailAPI/createUserProfile';
 import { getLastTaskStatus } from '../../api/RetailAPI/getLastTaskStatus';
@@ -33,6 +34,7 @@ export const useApplicationLeadApi = ({
   nextStepLink,
 }: ApplicationLeadApiProps) => {
   const [responseStatus, setResponseStatus] = useState<'OK' | 'Fail' | ''>('');
+  const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
   const saveUserData = useSaveUserData();
 
   const openEsiaLoginDialog = useEsiaLoginDialog(nextStepLink);
@@ -47,6 +49,7 @@ export const useApplicationLeadApi = ({
     }
 
     try {
+      startSending();
       const profileId = await createUserProfile({
         profile: { phone: formatPhone(formData.phone as string) },
       });
@@ -64,10 +67,7 @@ export const useApplicationLeadApi = ({
         };
         const handleSuccessVerify = async () => {
           try {
-            const lastTaskId = await getLastTaskStatus({
-              profileId,
-              programId,
-            });
+            const lastTaskId = await getLastTaskStatus({ profileId, programId });
 
             if (lastTaskId) {
               const task = await getTaskById({ taskId: lastTaskId });
@@ -85,15 +85,14 @@ export const useApplicationLeadApi = ({
           }
         };
 
-        const acceptedConsents: string[] = Object.keys(CONSENTS)
-          .filter((_) => formData[_])
-          .map((_) => CONSENTS[_]?.text);
+        const acceptedConsents = getAcceptedConsents(formData);
 
         verifyPhoneDialog.open({
           phone: formData?.phone,
           consents: acceptedConsents,
           onSuccess: handleSuccessVerify,
         });
+        endSending();
       }
     } catch {
       setResponseStatus('Fail');
@@ -103,9 +102,15 @@ export const useApplicationLeadApi = ({
   return {
     handleSubmit,
     responseStatus,
+    isSending,
   };
 };
 
+const getAcceptedConsents = (formData: LeadFormState): string[] =>
+  Object.keys(CONSENTS)
+    .filter((_) => formData[_])
+    .map((_) => CONSENTS[_]?.text);
+
 const updateUserData = async ({
   programId,
   profileId,

package/src/components/CreditCardForm/CreditCardForm.fixture.mobile.tsx

@@ -1,25 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useAsyncEffect } from '../../hooks/useAsyncEffect';
+import { mockLocalStorage } from '../../services/retail/mockLocalStorage';
 import '../../setup-fixture';
 import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
 import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { CreditCardForm } from './CreditCardForm';
 
-const MOCK_TOKEN = 'mock-key';
-const MOCK_TASK_ID = '111111';
-
-const refreshToken = globalThis.sessionStorage?.getItem('refreshToken');
-const accessToken = globalThis.sessionStorage?.getItem('accessToken');
-const taskId = globalThis.localStorage.getItem('taskId');
-
-!refreshToken && globalThis.sessionStorage?.setItem('refreshToken', MOCK_TOKEN);
-!accessToken && globalThis.sessionStorage?.setItem('accessToken', MOCK_TOKEN);
-!taskId && globalThis.localStorage.setItem('taskId', MOCK_TASK_ID);
-
 export default {
-  default: (
-    <div>
-      <CreditCardForm className="col-span-12" />
-      <PopupManager />
-      <DialogManager />
-    </div>
-  ),
+  default: JSX(() => {
+    useAsyncEffect(async () => await mockLocalStorage(), []);
+
+    return (
+      <div>
+        <CreditCardForm className="col-span-12" />
+        <PopupManager />
+        <DialogManager />
+      </div>
+    );
+  }),
 };

package/src/components/CreditCardForm/CreditCardForm.fixture.tsx

@@ -1,25 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useAsyncEffect } from '../../hooks/useAsyncEffect';
+import { mockLocalStorage } from '../../services/retail/mockLocalStorage';
 import '../../setup-fixture';
 import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
 import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { CreditCardForm } from './CreditCardForm';
 
-const MOCK_TOKEN = 'mock-key';
-const MOCK_TASK_ID = '111111';
-
-const refreshToken = globalThis.sessionStorage?.getItem('refreshToken');
-const accessToken = globalThis.sessionStorage?.getItem('accessToken');
-const taskId = globalThis.localStorage.getItem('taskId');
-
-!refreshToken && globalThis.sessionStorage?.setItem('refreshToken', MOCK_TOKEN);
-!accessToken && globalThis.sessionStorage?.setItem('accessToken', MOCK_TOKEN);
-!taskId && globalThis.localStorage.setItem('taskId', MOCK_TASK_ID);
-
 export default {
-  default: (
-    <div>
-      <CreditCardForm className="col-span-12" />
-      <PopupManager />
-      <DialogManager />
-    </div>
-  ),
+  default: JSX(() => {
+    useAsyncEffect(async () => await mockLocalStorage(), []);
+
+    return (
+      <div>
+        <CreditCardForm className="col-span-12" />
+        <PopupManager />
+        <DialogManager />
+      </div>
+    );
+  }),
 };

package/src/components/CreditCardForm/CreditCardFormStep.tsx

@@ -24,7 +24,7 @@ export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
       [sections],
     );
 
-    const [initialState, onSubmit] = useCreditCardFormAPI({
+    const [initialState, onSubmit, isSending] = useCreditCardFormAPI({
       step,
       inputs,
       onNextStep,
@@ -38,7 +38,7 @@ export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
     ) : (
       <form onSubmit={handleSubmit} className="space-y-m">
         {renderStep({ sections, field, step })}
-        <StepsNavigationButtons step={step} onPrevStep={onPrevStep} />
+        <StepsNavigationButtons isSending={isSending} step={step} onPrevStep={onPrevStep} />
       </form>
     );
   },

package/src/components/CreditCardForm/StepsNavigationButtons.tsx

@@ -3,19 +3,24 @@ import { Button } from '../../ui-kit/Button/Button';
 
 export interface StepsNavigationButtonsProps {
   step: number;
+  isSending: boolean;
   onPrevStep?: () => void;
 }
 
-export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(({ step, onPrevStep }) => {
-  const isFirstStep = step === 0;
-  const isFinalStep = step === 5;
+export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
+  ({ step, isSending, onPrevStep }) => {
+    const isFirstStep = step === 0;
+    const isFinalStep = step === 5;
 
-  return (
-    <div className="flex justify-between gap-m">
-      <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
-        Назад
-      </Button>
-      <Button type="submit">{isFinalStep ? 'Отправить заявку' : 'Далее'}</Button>
-    </div>
-  );
-});
+    return (
+      <div className="flex justify-between gap-m">
+        <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
+          Назад
+        </Button>
+        <Button isLoading={isSending} type="submit">
+          {isFinalStep ? 'Отправить заявку' : 'Далее'}
+        </Button>
+      </div>
+    );
+  },
+);

package/src/components/CreditCardForm/useCreditCardFormAPI.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { updateUserTask } from '../../api/RetailAPI/updateUserTask';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
 import { getObjectValidator } from '../../ui-kit/FormField/getObjectValidator';
@@ -22,7 +23,8 @@ export const useCreditCardFormAPI = ({
   inputs,
   onNextStep,
   onFinish,
-}: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void] => {
+}: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void, boolean] => {
+  const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
   const isFinalStep = step === 5;
 
   const retailFormStore = useRetailFormStore();
@@ -61,6 +63,7 @@ export const useCreditCardFormAPI = ({
         return;
       }
 
+      startSending();
       retailFormStore.leadForm = formData;
 
       try {
@@ -84,12 +87,14 @@ export const useCreditCardFormAPI = ({
         }
       } catch (ex) {
         // Do nothing
+      } finally {
+        endSending();
       }
     },
     [isFinalStep, resetForm],
   );
 
-  return [initialState, handleSubmit];
+  return [initialState, handleSubmit, isSending];
 };
 
 const getValue =

package/src/components/CreditForm/CreditForm.fixture.mobile.tsx

@@ -1,30 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useAsyncEffect } from '../../hooks/useAsyncEffect';
+import { mockLocalStorage } from '../../services/retail/mockLocalStorage';
 import '../../setup-fixture';
 import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
 import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { CreditForm } from './CreditForm';
 
-const MOCK_TOKEN = 'mock-key';
-const MOCK_TASK_ID = '111111';
-
-const refreshToken = globalThis.sessionStorage?.getItem('refreshToken');
-const accessToken = globalThis.sessionStorage?.getItem('accessToken');
-const taskId = globalThis.localStorage.getItem('taskId');
-
-!refreshToken && globalThis.sessionStorage?.setItem('refreshToken', MOCK_TOKEN);
-!accessToken && globalThis.sessionStorage?.setItem('accessToken', MOCK_TOKEN);
-!taskId && globalThis.localStorage.setItem('taskId', MOCK_TASK_ID);
-
 export default {
-  default: (
-    <div>
-      <CreditForm
-        className="col-span-12"
-        programsSource={{
-          $ref: '/wcms-resources/products-credit-calc-data.json',
-        }}
-      />
-      <PopupManager />
-      <DialogManager />
-    </div>
-  ),
+  default: JSX(() => {
+    useAsyncEffect(async () => await mockLocalStorage(), []);
+
+    return (
+      <div>
+        <CreditForm
+          className="col-span-12"
+          programsSource={{
+            $ref: '/wcms-resources/products-credit-calc-data.json',
+          }}
+        />
+        <PopupManager />
+        <DialogManager />
+      </div>
+    );
+  }),
 };

package/src/components/CreditForm/CreditForm.fixture.tsx

@@ -1,30 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useAsyncEffect } from '../../hooks/useAsyncEffect';
+import { mockLocalStorage } from '../../services/retail/mockLocalStorage';
 import '../../setup-fixture';
 import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
 import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { CreditForm } from './CreditForm';
 
-const MOCK_TOKEN = 'mock-key';
-const MOCK_TASK_ID = '111111';
-
-const refreshToken = globalThis.sessionStorage?.getItem('refreshToken');
-const accessToken = globalThis.sessionStorage?.getItem('accessToken');
-const taskId = globalThis.localStorage.getItem('taskId');
-
-!refreshToken && globalThis.sessionStorage?.setItem('refreshToken', MOCK_TOKEN);
-!accessToken && globalThis.sessionStorage?.setItem('accessToken', MOCK_TOKEN);
-!taskId && globalThis.localStorage.setItem('taskId', MOCK_TASK_ID);
-
 export default {
-  default: (
-    <div>
-      <CreditForm
-        className="col-span-12"
-        programsSource={{
-          $ref: '/wcms-resources/products-credit-calc-data.json',
-        }}
-      />
-      <PopupManager />
-      <DialogManager />
-    </div>
-  ),
+  default: JSX(() => {
+    useAsyncEffect(async () => await mockLocalStorage(), []);
+
+    return (
+      <div>
+        <CreditForm
+          className="col-span-12"
+          programsSource={{
+            $ref: '/wcms-resources/products-credit-calc-data.json',
+          }}
+        />
+        <PopupManager />
+        <DialogManager />
+      </div>
+    );
+  }),
 };

package/src/components/CreditForm/CreditFormStep.tsx

@@ -30,7 +30,7 @@ export const CreditFormStep = JSX<CreditFormStepProps>(
       [sections],
     );
 
-    const [initialState, onSubmit] = useCreditFormAPI({
+    const [initialState, onSubmit, isSending] = useCreditFormAPI({
       step,
       inputs,
       onNextStep,
@@ -44,7 +44,7 @@ export const CreditFormStep = JSX<CreditFormStepProps>(
     ) : (
       <form onSubmit={handleSubmit} className="space-y-m">
         {renderStep({ sections, field, step, params: { calcData } })}
-        <StepsNavigationButtons step={step} onPrevStep={onPrevStep} />
+        <StepsNavigationButtons step={step} isSending={isSending} onPrevStep={onPrevStep} />
       </form>
     );
   },

package/src/components/CreditForm/StepsNavigationButtons.tsx

@@ -3,19 +3,24 @@ import { Button } from '../../ui-kit/Button/Button';
 
 export interface StepsNavigationButtonsProps {
   step: number;
+  isSending: boolean;
   onPrevStep?: () => void;
 }
 
-export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(({ step, onPrevStep }) => {
-  const isFirstStep = step === 0;
-  const isFinalStep = step === 5;
+export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
+  ({ step, onPrevStep, isSending }) => {
+    const isFirstStep = step === 0;
+    const isFinalStep = step === 5;
 
-  return (
-    <div className={'flex justify-between gap-m'}>
-      <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
-        Назад
-      </Button>
-      <Button type="submit">{isFinalStep ? 'Отправить заявку' : 'Далее'}</Button>
-    </div>
-  );
-});
+    return (
+      <div className={'flex justify-between gap-m'}>
+        <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
+          Назад
+        </Button>
+        <Button type="submit" isLoading={isSending}>
+          {isFinalStep ? 'Отправить заявку' : 'Далее'}
+        </Button>
+      </div>
+    );
+  },
+);

package/src/components/CreditForm/useCreditFormAPI.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { updateUserTask } from '../../api/RetailAPI/updateUserTask';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
 import { getCreditFormTaskData } from '../../services/retail/adaptors/getCreditFormTaskData';
@@ -22,7 +23,8 @@ export const useCreditFormAPI = ({
   inputs,
   onNextStep,
   onFinish,
-}: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void] => {
+}: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void, boolean] => {
+  const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
   const isFinalStep = step === 5;
 
   const retailFormStore = useRetailFormStore();
@@ -62,6 +64,7 @@ export const useCreditFormAPI = ({
         return;
       }
 
+      startSending();
       retailFormStore.leadForm = formData;
 
       try {
@@ -85,12 +88,14 @@ export const useCreditFormAPI = ({
         }
       } catch (ex) {
         // Do nothing
+      } finally {
+        endSending();
       }
     },
     [isFinalStep, resetForm],
   );
 
-  return [initialState, handleSubmit];
+  return [initialState, handleSubmit, isSending];
 };
 
 const getValue =

package/src/hooks/useAsyncEffect.ts

@@ -0,0 +1,16 @@
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+
+export function useAsyncEffect<Deps extends any[], R>(
+  effect: () => Promise<R | (() => void)>,
+  deps: Deps,
+): void {
+  useEffect(() => {
+    const free = effect();
+
+    return () => {
+      free.then((_) => {
+        _ instanceof Function && _();
+      });
+    };
+  }, deps);
+}

package/src/services/retail/mockLocalStorage.ts

@@ -0,0 +1,40 @@
+import { checkCode } from '../../api/RetailAPI/checkCode';
+import { createDraftTask } from '../../api/RetailAPI/createDraftTask';
+import { createUserProfile } from '../../api/RetailAPI/createUserProfile';
+import { sendCode } from '../../api/RetailAPI/sendCode';
+
+const PHONE = '+11111111111';
+const PROGRAM_ID = '13';
+
+export const mockLocalStorage = async () => {
+  const programId = globalThis.localStorage.getItem('programId') ?? PROGRAM_ID;
+
+  const profileId =
+    globalThis.localStorage.getItem('profileId') ??
+    (await createUserProfile({ profile: { phone: PHONE } }));
+
+  await sendCode({
+    phoneNumber: PHONE,
+    smsCodesSetName: { key: 'AUTHENTICATION' },
+  });
+
+  await checkCode({
+    smsCodesSetName: { key: 'AUTHENTICATION' },
+    smsText: '1234',
+  });
+
+  const task = {
+    taskId: globalThis.localStorage.getItem('taskId'),
+    participantId: globalThis.localStorage.getItem('participantId'),
+  };
+
+  if (!task.taskId || !task.participantId) {
+    const draft = await createDraftTask({ profileId: Number(profileId), programId });
+    Object.assign(task, draft);
+  }
+
+  globalThis.localStorage.setItem('programId', programId);
+  globalThis.localStorage.setItem('profileId', String(profileId));
+  globalThis.localStorage.setItem('taskId', String(task.taskId));
+  globalThis.localStorage.setItem('participantId', String(task.participantId));
+};

package/src/setup-fixture.ts

@@ -1,8 +1,10 @@
 import '@redneckz/uni-jsx/lib/setup.react';
 import { useEffect, useState } from 'react';
 import { handlerDecorator } from './external/handlerDecorator';
+import { locationNavigator } from './external/locationNavigator';
 import { useRouter } from './external/useRouter';
 import { projectSettings } from './ProjectSettings';
+import { noop } from './utils/noop';
 import { joinPath } from './utils/url';
 import wlc from './wlc.json';
 
@@ -49,3 +51,13 @@ handlerDecorator.setup((handler): any => (ev) => {
 
   handler(ev);
 });
+
+locationNavigator.setup(() => ({
+  assign: noop,
+  get href() {
+    return globalThis.location.href;
+  },
+  get origin() {
+    return globalThis.location.origin;
+  },
+}));