@akinon/pz-gpay 2.0.0-beta.13 → 2.0.0-beta.14

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-gpay
 
+## 2.0.0-beta.14
+
+### Minor Changes
+
+- 6ad72e8d: ZERO-4032: Add loading state management for payment submissions across multiple components and add safe guarding
+
 ## 2.0.0-beta.13
 
 ## 1.118.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-gpay",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.14",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/views/gpay-option.tsx

@@ -19,7 +19,7 @@ import {
 } from '../endpoints';
 import { twMerge } from 'tailwind-merge';
 import { Button } from '@akinon/next/components/button';
-import { getPosError } from '@akinon/next/utils';
+import { getPosError, checkPaymentWillRedirect } from '@akinon/next/utils';
 
 type GPayForm = Record<string, never>;
 
@@ -61,6 +61,7 @@ const defaultTranslations: GPayTranslations = {
 export function GPayOption(props: GPayOptionProps) {
   const [formError, setFormError] = useState<string | null>(null);
   const [errors, setErrors] = useState<string[]>([]);
+  const [isProcessing, setIsProcessing] = useState(false);
 
   const translations = { ...defaultTranslations, ...props.translations };
 
@@ -72,25 +73,46 @@ export function GPayOption(props: GPayOptionProps) {
   const {
     handleSubmit,
     control,
-    formState: { errors: formErrors }
+    formState: { errors: formErrors, isSubmitting }
   } = useForm<GPayForm>({
     resolver: yupResolver(gpayFormSchema) as any
   });
 
   const [setPaymentOption] = useSetPaymentOptionMutation();
-  const [setGPayMethod] = useSetGPayMethodMutation();
-  const [setCompleteGPay] = useSetCompleteGPayMutation();
+  const [setGPayMethod, { isLoading: isSettingMethod }] =
+    useSetGPayMethodMutation();
+  const [setCompleteGPay, { isLoading: isCompleting }] =
+    useSetCompleteGPayMutation();
+
+  const isButtonDisabled =
+    isSubmitting ||
+    isPaymentStepBusy ||
+    isSettingMethod ||
+    isCompleting ||
+    isProcessing;
 
   const onSubmit: SubmitHandler<GPayForm> = async () => {
-    if (isPaymentStepBusy) return;
+    if (isButtonDisabled) return;
 
+    setIsProcessing(true);
     setFormError(null);
-    await setGPayMethod();
 
-    const response = await setCompleteGPay().unwrap();
+    try {
+      await setGPayMethod();
 
-    if (response?.errors?.non_field_errors) {
-      setFormError(response.errors.non_field_errors);
+      const response = await setCompleteGPay().unwrap();
+
+      if (response?.errors?.non_field_errors) {
+        setFormError(response.errors.non_field_errors);
+        setIsProcessing(false);
+        return;
+      }
+
+      if (response?.errors || !checkPaymentWillRedirect(response)) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      setIsProcessing(false);
     }
   };
 
@@ -137,6 +159,7 @@ export function GPayOption(props: GPayOptionProps) {
         data-testid="gpay-payment-button"
         className={twMerge('w-full mt-3', props.buttonClassName)}
         type="submit"
+        disabled={isButtonDisabled}
       >
         {translations.button}
       </Button>