@akinon/pz-gpay 1.96.0-snapshot-ZERO-3620-20250915165755 → 1.97.0-snapshot-ZERO-3634-20250918132143

package/CHANGELOG.md

@@ -1,62 +1,8 @@
 # @akinon/pz-gpay
 
-## 1.96.0-snapshot-ZERO-3620-20250915165755
+## 1.97.0-snapshot-ZERO-3634-20250918132143
 
-### Minor Changes
-
-- 4c23847: ZERO-3623 :Enhance GPay integration: add loading state to custom UI rendering and error handling
-- d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
-- 16aff543: ZERO-3431: Add test script for redirect utility in package.json
-- 64699d3ff: ZERO-2761: Fix invalid import for plugin module
-- e974d8e8: ZERO-3406: Fix rc build
-- 7eb51ca9: ZERO-3424 :Update package versions
-- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
-- 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
-- 2e436c13: ZERO-3389 :Update README.md for GPay component: enhance props documentation, add custom UI usage examples
-- 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
-
-## 1.96.0-rc.61
-
-### Minor Changes
-
-- 4c23847: ZERO-3623 :Enhance GPay integration: add loading state to custom UI rendering and error handling
-- d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
-- 16aff543: ZERO-3431: Add test script for redirect utility in package.json
-- 64699d3ff: ZERO-2761: Fix invalid import for plugin module
-- e974d8e8: ZERO-3406: Fix rc build
-- 7eb51ca9: ZERO-3424 :Update package versions
-- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
-- 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
-- 2e436c13: ZERO-3389 :Update README.md for GPay component: enhance props documentation, add custom UI usage examples
-- 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
-
-## 1.96.0-rc.60
-
-## 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
-
-## 1.96.0-rc.55
-
-### Minor Changes
-
-- d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
-- 16aff543: ZERO-3431: Add test script for redirect utility in package.json
-- 64699d3ff: ZERO-2761: Fix invalid import for plugin module
-- e974d8e8: ZERO-3406: Fix rc build
-- 7eb51ca9: ZERO-3424 :Update package versions
-- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
-- 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
-- 2e436c13: ZERO-3389 :Update README.md for GPay component: enhance props documentation, add custom UI usage examples
-- 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
+## 1.96.0
 
 ## 1.95.0
 
@@ -68,8 +14,6 @@
 
 ## 1.91.0
 
-> > > > > > > origin/ZERO-3418
-
 ## 1.90.0
 
 ### Minor Changes
@@ -81,46 +25,6 @@
 ### Minor Changes
 
 - 57a6184: ZERO-3332 :Add data-testid attribute to GPay payment button for testing
-- 64699d3f: ZERO-2761: Fix invalid import for plugin module
-- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
-- 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
-
-## 1.89.0-rc.9
-
-### Minor Changes
-
-- 57a6184: ZERO-3332 :Add data-testid attribute to GPay payment button for testing
-- 64699d3f: ZERO-2761: Fix invalid import for plugin module
-- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
-- 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
-
-## 1.89.0-rc.8
-
-## 1.89.0-rc.7
-
-## 1.89.0-rc.6
-
-## 1.89.0-rc.5
-
-## 1.89.0-rc.4
-
-## 1.89.0-rc.3
-
-## 1.89.0-rc.2
-
-### Minor Changes
-
-- 57a6184: ZERO-3332 :Add data-testid attribute to GPay payment button for testing
-
-## 1.89.0-rc.1
-
-## 1.89.0-rc.0
-
-### Minor Changes
-
-- 64699d3f: ZERO-2761: Fix invalid import for plugin module
-- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
-- 33377cf: ZERO-3267: Refactor import statement for ROUTES in error-page component
 
 ## 1.88.0
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-gpay",
-  "version": "1.96.0-snapshot-ZERO-3620-20250915165755",
+  "version": "1.97.0-snapshot-ZERO-3634-20250918132143",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/readme.md

@@ -10,86 +10,9 @@ npx @akinon/projectzero@latest --plugins
 
 ```
 
-## GPAY
+### Example Usage
 
-The `GPayOption` component provides GarantiPay (GPay) payment integration within the checkout process. It supports both default UI rendering and a fully customized UI via the `customUIRender` prop.
-
-### Props
-
-| Prop | Type | Required | Description |
-| --- | --- | --- | --- |
-| `containerClassName` | `string` | Optional | Custom class for the root `<form>` container |
-| `titleClassName` | `string` | Optional | Class for the title (`<h1>` element) |
-| `descriptionClassName` | `string` | Optional | Class for the description container |
-| `buttonClassName` | `string` | Optional | Class for the submit button |
-| `translations` | `Partial<GPayTranslations>` | Optional | Override default title, description, button and error texts |
-| `customUIRender` | `function` | Optional | Function to override the internal rendering logic and provide custom layout |
-
----
-
-### `customUIRender` Parameters
-
-| Parameter | Type | Description |
-| --- | --- | --- |
-| `handleSubmit` | `UseFormHandleSubmit<GPayForm>` | Wrapper for your `onSubmit` function with validation |
-| `onSubmit` | `SubmitHandler<GPayForm>` | Submit logic that handles payment integration internally |
-| `control` | `Control<GPayForm>` | React Hook Form control object, useful for controlled inputs |
-| `errors` | `FieldErrors<GPayForm>` | Validation errors, helpful for form field error handling |
-| `translations` | `GPayTranslations` | Final translation object with merged defaults and overrides |
-
-### Default Translations
-
-```javascript
-{
-  title: 'Pay with GarantiPay',
-  description: [
-    'Click on the "GarantiPay" button. Guarantee for payment you will be redirected to the payment page.',
-    'Log in to your account with your username and password on the Garanti Pay page. If you do not have a Garanti Pay membership, create a new membership you can create.',
-    'Complete the payment process by selecting your card and payment type.'
-  ],
-  button: 'Pay with GarantiPay',
-  error: 'An error occurred during payment'
-}
-```
-
-### Usage Examples
-
-```bash
-/src/views/checkout/steps/payment/options/gpay.tsx
-```
-
-## Default Usage
-
-```javascript
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-
-const GPay = () => {
-  return (
-    <PluginModule
-      component={Component.GPay}
-      props={{
-        translations: {
-          title: 'Pay with GarantiPay',
-          description: [
-            'Click on the "Pay with GarantiPay" button. You will be redirected to the payment page.',
-            'Log in with your credentials. If you don’t have an account, create one.',
-            'Select your card and complete the payment process.'
-          ],
-          button: 'Pay Now'
-        },
-        containerClassName: 'bg-gray-50 p-6 rounded-lg',
-        titleClassName: 'text-xl font-bold',
-        descriptionClassName: 'text-sm text-gray-700',
-        buttonClassName: 'bg-primary text-white py-2'
-      }}
-    />
-  );
-};
-
-export default GPay;
-```
-
-## Custom UI Usage
+##### File Path: src/views/checkout/steps/payment/options/gpay.tsx
 
 ```javascript
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
@@ -101,31 +24,27 @@ const GPay = () => {
       props={{
         translations: {
           title: 'Pay with GarantiPay',
-          description: [
-            'Click the button below to pay for your order using GarantiPay.'
-          ],
+          description:
+            'Click the button below to pay for your order using GarantiPay.',
           button: 'Pay Now'
         },
-        customUIRender: ({ handleSubmit, onSubmit, translations, loading }) => (
-          <form
-            onSubmit={handleSubmit(onSubmit)}
-            className="p-6 bg-white rounded-md space-y-4"
-          >
-            <h2 className="text-2xl font-semibold">{translations.title}</h2>
-            <ul className="text-sm text-gray-700 list-disc pl-4">
+        containerClassName: 'bg-gray-50 rounded-md',
+        titleClassName: 'text-2xl font-bold',
+        descriptionClassName: 'text-sm',
+        buttonClassName: 'bg-primary text-white',
+        customUIRender: ({ handleSubmit, onSubmit, translations }) => (
+          <form onSubmit={handleSubmit(onSubmit)} className="p-6 bg-white">
+            <h2 className="text-xl font-bold mb-2">{translations.title}</h2>
+            <div className="text-sm mb-4">
               {translations.description.map((item, index) => (
                 <li key={index}>{item}</li>
               ))}
-            </ul>
+            </div>
             <button
               type="submit"
-              className="w-full h-10 bg-black text-white rounded"
+              className="w-full h-9 bg-black-300 text-white"
             >
-              {loading ? (
-                <LoaderSpinner className="w-5 h-5" />
-              ) : (
-                translations.button
-              )}
+              {translations.button}
             </button>
           </form>
         )
@@ -137,14 +56,36 @@ const GPay = () => {
 export default GPay;
 ```
 
-## Garanti Pay Redirect
-
-```bash
-/src/app/[commerce]/[locale]/[currency]/orders/garanti-pay-redirect/page.tsx
-```
+##### File Path: src/app/[commerce]/[locale]/[currency]/orders/garanti-pay-redirect/page.tsx
 
 ```javascript
 import { GarantiPayRedirect } from '@akinon/pz-gpay/src/routes/garanti-pay-redirect';
 
 export default GarantiPayRedirect;
 ```
+
+### Props
+
+| Properties | Type | Description |
+| --- | --- | --- |
+| translations | object | The translations of the component. |
+| containerClassName | string | The CSS class to apply to the container. |
+| titleClassName | string | The CSS class to apply to the title. |
+| descriptionClassName | string | The CSS class to apply to the description. |
+| buttonClassName | string | The CSS class to apply to the button. |
+| customUIRender | function | Custom render function for the component. Receives form handlers and translations. |
+
+### Default Translations
+
+```javascript
+{
+  title: 'Pay with GarantiPay',
+  description: [
+    'Click on the "GarantiPay" button. Guarantee for payment you will be redirected to the payment page.',
+    'Log in to your account with your username and password on the Garanti Pay page. If you do not have a Garanti Pay membership, create a new membership you can create.',
+    'Complete the payment process by selecting your card and payment type.'
+  ],
+  button: 'Pay with GarantiPay',
+  error: 'An error occurred during payment'
+}
+```

package/src/views/gpay-option.tsx

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