@akinon/pz-gpay 1.96.0-rc.57 → 1.96.0-rc.59

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @akinon/pz-gpay
 
+## 1.96.0-rc.59
+
+### Minor Changes
+
+- 4c23847: ZERO-3623 :Enhance GPay integration: add loading state to custom UI rendering and error handling
+
+## 1.96.0-rc.58
+
 ## 1.96.0-rc.57
 
 ## 1.96.0-rc.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-gpay",
-  "version": "1.96.0-rc.57",
+  "version": "1.96.0-rc.59",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/readme.md

@@ -106,7 +106,7 @@ const GPay = () => {
           ],
           button: 'Pay Now'
         },
-        customUIRender: ({ handleSubmit, onSubmit, translations }) => (
+        customUIRender: ({ handleSubmit, onSubmit, translations, loading }) => (
           <form
             onSubmit={handleSubmit(onSubmit)}
             className="p-6 bg-white rounded-md space-y-4"
@@ -121,7 +121,11 @@ const GPay = () => {
               type="submit"
               className="w-full h-10 bg-black text-white rounded"
             >
-              {translations.button}
+              {loading ? (
+                <LoaderSpinner className="w-5 h-5" />
+              ) : (
+                translations.button
+              )}
             </button>
           </form>
         )

package/src/views/gpay-option.tsx

@@ -44,6 +44,7 @@ type GPayOptionProps = {
     control: Control<GPayForm>;
     errors: FieldErrors<GPayForm>;
     translations: GPayTranslations;
+    loading: boolean;
   }) => ReactElement;
 };
 
@@ -78,19 +79,32 @@ export function GPayOption(props: GPayOptionProps) {
   });
 
   const [setPaymentOption] = useSetPaymentOptionMutation();
-  const [setGPayMethod] = useSetGPayMethodMutation();
-  const [setCompleteGPay] = useSetCompleteGPayMutation();
+  const [setGPayMethod, { isLoading: isGPayMethodLoading }] =
+    useSetGPayMethodMutation();
+  const [setCompleteGPay, { isLoading: isCompleteGPayLoading }] =
+    useSetCompleteGPayMutation();
 
   const onSubmit: SubmitHandler<GPayForm> = async () => {
-    if (isPaymentStepBusy) return;
-
     setFormError(null);
-    await setGPayMethod();
 
-    const response = await setCompleteGPay().unwrap();
+    try {
+      await setGPayMethod().unwrap();
+    } catch (e) {
+      setFormError(translations.error);
+      return;
+    }
 
-    if (response?.errors?.non_field_errors) {
-      setFormError(response.errors.non_field_errors);
+    try {
+      const data = await setCompleteGPay().unwrap();
+      if (data?.errors?.non_field_errors) {
+        setFormError(data.errors.non_field_errors);
+      }
+    } catch (e: any) {
+      const msg =
+        e?.data?.errors?.non_field_errors ??
+        e?.data?.detail ??
+        translations.error;
+      setFormError(msg);
     }
   };
 
@@ -113,7 +127,8 @@ export function GPayOption(props: GPayOptionProps) {
       onSubmit,
       control,
       errors: formErrors,
-      translations
+      translations,
+      loading: isGPayMethodLoading || isCompleteGPayLoading || isPaymentStepBusy
     });
   }