@wix/form-public 0.486.0 → 0.488.0

package/dist/index.js

@@ -43841,6 +43841,30 @@ var ReadOnlyField = ({ field, FieldLayout }) => {
     }
   }, /* @__PURE__ */ React171.createElement(FieldComponent, fieldProps));
 };
+var useSingleSubmit = (submit) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const isSubmittingRef = useRef(false);
+  const submitOnce = useCallback(async () => {
+    if (isSubmittingRef.current) {
+      return;
+    }
+    isSubmittingRef.current = true;
+    setIsSubmitting(true);
+    try {
+      await submit();
+    } catch (error) {
+      console.error(error);
+    }
+    isSubmittingRef.current = false;
+    setIsSubmitting(false);
+  }, [
+    submit
+  ]);
+  return {
+    submitOnce,
+    isSubmitting
+  };
+};
 
 // ../form-fields/dist/esm/fields/submit-button/submit-button/utils.js
 var getCurrentStep = (form, fieldId) => {
@@ -43858,11 +43882,15 @@ var getCurrentStep = (form, fieldId) => {
 // ../form-fields/dist/esm/fields/submit-button/submit-button/use-submit-button.js
 var useSubmitButton = ({ form, id: id6 }) => {
   const { hasSteps, stepNumber, isLastStep } = getCurrentStep(form, id6);
-  const { inProgress, actions } = useFieldActions();
-  const [submitInProgress, setSubmitInProgress] = useState(false);
+  const { inProgress: actionsInProgress, actions } = useFieldActions();
   const { formStatus } = useFormStatus();
-  const isDisabled = submitInProgress;
-  const isInProgress = inProgress || formStatus === FORM_STATUS.BUSY;
+  const submitForm = useCallback(async () => {
+    await actions?.submitForm();
+  }, [
+    actions
+  ]);
+  const { submitOnce, isSubmitting } = useSingleSubmit(submitForm);
+  const isInProgress = actionsInProgress || formStatus === FORM_STATUS.BUSY;
   const showPreviousButton = hasSteps && stepNumber !== 0;
   const showNextButton = hasSteps && !isLastStep;
   const showSubmitButton = !hasSteps || hasSteps && isLastStep;
@@ -43870,21 +43898,16 @@ var useSubmitButton = ({ form, id: id6 }) => {
     if (isInProgress) {
       return;
     }
-    setSubmitInProgress(true);
-    try {
-      await actions?.submitForm();
-    } catch (error) {
-      console.error(error);
-    }
-    setSubmitInProgress(false);
+    await submitOnce();
   }, [
-    actions,
-    isInProgress
+    isInProgress,
+    submitOnce
   ]);
   return {
     handleSubmitClick,
-    isDisabled,
+    isDisabled: isSubmitting,
     isInProgress,
+    isSubmitting,
     showPreviousButton,
     showNextButton,
     showSubmitButton,
@@ -43899,7 +43922,7 @@ var SubmitButtonField = ({ field, FieldLayout }) => {
   const externalData = useExternalData();
   const form = useForm();
   const { actions } = useFieldActions();
-  const { handleSubmitClick, isDisabled, isInProgress, showPreviousButton, showNextButton, showSubmitButton, hasSteps } = useSubmitButton({
+  const { handleSubmitClick, isDisabled, isInProgress, isSubmitting, showPreviousButton, showNextButton, showSubmitButton, hasSteps } = useSubmitButton({
     form,
     id: field.id
   });
@@ -43919,6 +43942,7 @@ var SubmitButtonField = ({ field, FieldLayout }) => {
     hasSteps,
     isDisabled,
     isInProgress,
+    isSubmitting,
     showPreviousButton,
     showNextButton,
     showSubmitButton,
@@ -49970,17 +49994,21 @@ function submitFormClick(params) {
 }
 var SubmitStatusContext = /* @__PURE__ */ createContext(void 0);
 var SubmitStatusProvider = ({ children }) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitSuccessMessage, setSubmitSuccessMessage] = useState();
   const [submitFailureCode, setSubmitFailureCode] = useState();
   const [submitFailureMessage, setSubmitFailureMessage] = useState();
   const value = useMemo(() => ({
+    isSubmitting,
     submitSuccessMessage,
     submitFailureCode,
     submitFailureMessage,
+    setIsSubmitting,
     setSubmitSuccessMessage,
     setSubmitFailureCode,
     setSubmitFailureMessage
   }), [
+    isSubmitting,
     submitSuccessMessage,
     submitFailureCode,
     submitFailureMessage
@@ -50067,7 +50095,7 @@ var getCheckoutMessage = (text) => {
 
 // ../form-viewer/dist/esm/hooks/use-submit/use-submit.js
 var useSubmit = ({ validateAndScrollToError, submitAction, onSubmit, onSubmitSuccess, onSubmitFailure, resetFormValues, values, submitSettings, limitationRule, handleStepChange, navigateToCheckout, openPopup, onValidate, handleScrollToFirstError, onSubmissionLimitReached }) => {
-  const { setSubmitSuccessMessage, setSubmitFailureCode, setSubmitFailureMessage } = useSubmitStatus();
+  const { setIsSubmitting, setSubmitSuccessMessage, setSubmitFailureCode, setSubmitFailureMessage } = useSubmitStatus();
   const { t } = useTranslation2();
   const { report } = useBi();
   const fireSubmitSuccess = useSubmitSuccessTrigger();
@@ -50168,8 +50196,10 @@ var useSubmit = ({ validateAndScrollToError, submitAction, onSubmit, onSubmitSuc
     const submitTransaction = panorama.transaction(INTERACTIONS.SUBMIT_FORM);
     try {
       submitTransaction.start();
+      setIsSubmitting(true);
       response = await submitAction(values);
     } catch (error) {
+      setIsSubmitting(false);
       const errorCode = getErrorCode(error);
       if (isExpectedSubmissionRejection(error)) {
         submitTransaction.finish();
@@ -50192,6 +50222,7 @@ var useSubmit = ({ validateAndScrollToError, submitAction, onSubmit, onSubmitSuc
       handleSubmitFailure(error);
       throw error;
     }
+    setIsSubmitting(false);
     if (response) {
       submitTransaction.finish();
       onSubmitSuccess?.(response);
@@ -50212,6 +50243,7 @@ var useSubmit = ({ validateAndScrollToError, submitAction, onSubmit, onSubmitSuc
     onSubmit,
     reportSubmitFormBi,
     panorama,
+    setIsSubmitting,
     submitAction,
     onSubmitFailure,
     handleCustomErrorMessages,
@@ -61527,15 +61559,17 @@ var NextButton = ({ className }) => {
   }, nextText);
 };
 var SubmitButtonComponent = ({ className, children }) => {
-  const { showSubmitButton, onSubmitClick, submitText, isDisabled, isInProgress } = useFieldPropsV2();
+  const { showSubmitButton, onSubmitClick, submitText, isDisabled, isInProgress, isSubmitting } = useFieldPropsV2();
   if (!showSubmitButton) {
     return null;
   }
   const loaderElement = findChildOfType(children, SubmitButtonComponent.Loader);
+  const isBusy = isSubmitting || isInProgress;
   return /* @__PURE__ */ React171.createElement(Button, {
     className,
-    onPress: onSubmitClick,
-    isDisabled: isDisabled || isInProgress,
+    onPress: isBusy ? void 0 : onSubmitClick,
+    isDisabled: isDisabled && !isBusy,
+    "aria-disabled": isBusy || void 0,
     "data-in-progress": isInProgress
   }, isInProgress && loaderElement ? loaderElement : submitText);
 };