@redneckz/wildless-cms-uni-blocks 0.14.714 → 0.14.716

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/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/ui-kit/Button/Button.tsx

@@ -3,6 +3,7 @@ import { type ButtonVersion } from '../../model/ButtonVersion';
 import { style } from '../../utils/style';
 import { type ARIAProps } from '../ARIAProps';
 import { type ControlStateProps } from '../ControlStateProps';
+import { Loader } from '../Loader/Loader';
 import { type PreventableEvent } from '../PreventableEvent';
 import { useButton } from './useButton';
 
@@ -30,6 +31,7 @@ export interface ButtonProps extends ControlStateProps, ARIAProps {
   version?: ButtonVersion;
   type?: 'button' | 'submit' | 'reset';
   rounded?: boolean;
+  isLoading?: boolean;
   role?: string;
   onClick?: (ev?: PreventableEvent) => void;
 }
@@ -42,6 +44,7 @@ export const Button = JSX<ButtonProps>(({ children, ...props }) => {
     version = 'primary',
     active,
     disabled,
+    isLoading,
     type = 'button',
     rounded = true,
     role,
@@ -52,13 +55,13 @@ export const Button = JSX<ButtonProps>(({ children, ...props }) => {
     <button
       className={style(
         'font-sans px-9 py-4',
-        'flex justify-center items-center gap-xs',
+        'flex justify-center items-center gap-xs relative',
         {
           'text-white bg-primary-active': active,
-          'bg-main-gray text-main-disabled cursor-not-allowed': disabled,
+          'bg-main-gray text-main-disabled cursor-not-allowed': disabled || isLoading,
           'rounded-md': rounded,
         },
-        !active && !disabled
+        !active && !disabled && !isLoading
           ? style(buttonStyleMap[version], secondaryButtonStyleMap[version])
           : '',
         className,
@@ -67,6 +70,7 @@ export const Button = JSX<ButtonProps>(({ children, ...props }) => {
       role={role}
       onClick={onClick}
     >
+      {isLoading ? <Loader blur={true} size="small" /> : null}
       {children}
     </button>
   );

package/src/ui-kit/FormField/Fields/Experience5YearsField.tsx

@@ -1,16 +1,30 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { clamp } from '../../../utils/clamp';
 import { InputControl } from '../../Input/InputControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
-export const Experience5YearsField = JSX<CustomFieldProps>(({ field, input }) => (
-  <InputControl
-    label="Стаж"
-    placeholder="За последние 5 лет"
-    type="number"
-    maxLength={2}
-    {...getValidation(field('experience5Years'), validatorObj.experience5Years, input?.required)}
-    {...input}
-  />
-));
+const FIELD_NAME = 'experience5Years';
+const MAX_YEARS = 5;
+const MIN_YEARS = 0;
+
+export const Experience5YearsField = JSX<CustomFieldProps>(({ field, input }) => {
+  const onChange = useCallback(
+    (value: string) =>
+      field(FIELD_NAME)?.onChange?.(String(clamp(Number(value), MIN_YEARS, MAX_YEARS))),
+    [],
+  );
+
+  return (
+    <InputControl
+      label="Стаж"
+      placeholder="За последние 5 лет"
+      type="number"
+      {...getValidation(field(FIELD_NAME), validatorObj[FIELD_NAME], input?.required)}
+      {...input}
+      onChange={onChange}
+    />
+  );
+});

package/src/ui-kit/FormField/Fields/PartInBusinessField.tsx

@@ -1,19 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { clamp } from '../../../utils/clamp';
 import { InputControl } from '../../Input/InputControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
 const MAX_PART = 100;
+const MIN_PART = 0;
 const FIELD_NAME = 'partInBusiness';
 
 export const PartInBusinessField = JSX<CustomFieldProps>(({ field, input }) => {
-  const onChange = useCallback((value: string) => {
-    field(FIELD_NAME)?.onChange?.(
-      String(Number(value) > MAX_PART ? MAX_PART : Number(value) || ''),
-    );
-  }, []);
+  const onChange = useCallback(
+    (value: string) =>
+      field(FIELD_NAME)?.onChange?.(String(clamp(Number(value), MIN_PART, MAX_PART))),
+    [],
+  );
 
   return (
     <InputControl

package/src/ui-kit/Loader/Loader.tsx

@@ -6,10 +6,11 @@ interface LoaderProps {
   color?: TextColor;
   position?: 'static' | 'absolute';
   blur?: boolean;
+  size?: 'small' | 'big';
 }
 
 export const Loader = JSX<LoaderProps>(
-  ({ color = 'text-primary-main', position = 'absolute', blur = true }) => (
+  ({ color = 'text-primary-main', position = 'absolute', blur = true, size = 'big' }) => (
     <div
       className={style('flex justify-center items-center h-full w-full z-50', position, {
         'backdrop-blur': blur,
@@ -17,10 +18,11 @@ export const Loader = JSX<LoaderProps>(
     >
       <div
         className={style(
-          'inline-block h-28 w-28',
+          'inline-block ',
           'animate-spin rounded-full',
-          'border-8 border-solid border-current',
+          'border-solid border-current',
           'border-r-transparent',
+          size === 'small' ? 'border-4 h-8 w-8' : 'border-8 h-28 w-28',
           color,
         )}
         role="status"

package/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]);