@akinon/pz-gpay 2.0.0-beta.2 → 2.0.0-beta.20

package/CHANGELOG.md

@@ -1,18 +1,130 @@
 # @akinon/pz-gpay
 
-## 2.0.0-beta.2
+## 2.0.0-beta.20
 
-## 2.0.0-beta.1
+## 1.125.0
+
+## 1.124.0
+
+## 1.123.0
+
+## 1.122.0
+
+### Minor Changes
+
+- 2e436c13: ZERO-3389 :Update README.md for GPay component: enhance props documentation, add custom UI usage examples
+
+## 1.121.0
+
+## 1.120.0
 
 ### Minor Changes
 
-- ZERO-3091: Upgrade Next.js to v15 and React to v19
+- 6ad72e8d: ZERO-4032: Add loading state management for payment submissions across multiple components and add safe guarding
+
+## 1.119.0
+
+## 1.118.0
+
+## 1.117.0
+
+## 1.116.0
+
+## 1.115.0
+
+## 1.114.0
+
+## 1.113.0
+
+## 1.112.0
+
+## 1.111.0
+
+## 1.110.0
+
+## 1.109.0
+
+## 1.108.0
+
+## 1.107.0
+
+## 1.106.0
+
+## 1.105.0
+
+## 1.104.0
+
+## 1.103.0
+
+## 1.102.0
+
+## 1.101.0
+
+## 1.100.0
+
+## 1.99.0
+
+### Minor Changes
+
+- d58538b: ZERO-3638: Enhance RC pipeline: add fetch, merge, and pre-release setup with conditional commit
+
+## 1.98.0
+
+## 1.97.0
+
+## 1.96.0
+
+## 1.95.0
+
+## 1.94.0
+
+## 1.93.0
+
+## 1.92.0
+
+## 1.91.0
+
+## 1.90.0
+
+### Minor Changes
+
+- a1463fd: ZERO-3381: Add customUIRender support for flexible UI rendering
+
+## 1.89.0
+
+### Minor Changes
+
+- 57a6184: ZERO-3332 :Add data-testid attribute to GPay payment button for testing
+
+## 1.88.0
+
+## 1.87.0
+
+## 1.86.0
+
+## 1.85.0
+
+## 1.84.0
+
+### Minor Changes
+
+- 624a4eb: ZERO-3276: Update installation instructions across multiple README files to standardize format and improve clarity
+
+## 1.83.0
+
+## 1.82.0
+
+## 1.81.0
+
+## 1.80.0
+
+## 1.79.0
 
-## 2.0.0-beta.0
+## 1.78.0
 
-### Major Changes
+## 1.77.0
 
-- be6c09d: ZERO-3114: Create beta version.
+## 1.76.0
 
 ## 1.75.0
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-gpay",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.20",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "typescript": "^5.7.2",
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^4.7.4",
     "react-hook-form": "7.31.3",
     "@hookform/resolvers": "2.9.0"
   }

package/readme.md

@@ -1,17 +1,64 @@
 # @akinon/pz-gpay
 
-### Install the npm package
+## Installation method
+
+You can use the following command to install the extension with the latest plugins:
 
 ```bash
-# For latest version
-yarn add @akinon/pz-gpay
 
-# Preferred installation method
 npx @akinon/projectzero@latest --plugins
+
+```
+
+## GPAY
+
+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
 ```
 
-### Example Usage
-##### File Path: src/views/checkout/steps/payment/options/gpay.tsx
+## Default Usage
 
 ```javascript
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
@@ -23,11 +70,33 @@ const GPay = () => {
       props={{
         translations: {
           title: 'Pay with GarantiPay',
-          description:
-            'Click the button below to pay for your order using 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'
         },
-        titleClassName: 'text-4xl'
+        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>
+              ))}
+            </div>
+            <button
+              type="submit"
+              className="w-full h-9 bg-black-300 text-white"
+            >
+              {translations.button}
+            </button>
+          </form>
+        )
       }}
     />
   );
@@ -36,7 +105,55 @@ const GPay = () => {
 export default GPay;
 ```
 
-##### File Path: src/app/[commerce]/[locale]/[currency]/orders/garanti-pay-redirect/page.tsx
+## Custom UI 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 the button below to pay for your order using GarantiPay.'
+          ],
+          button: 'Pay Now'
+        },
+        customUIRender: ({ handleSubmit, onSubmit, translations }) => (
+          <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">
+              {translations.description.map((item, index) => (
+                <li key={index}>{item}</li>
+              ))}
+            </ul>
+            <button
+              type="submit"
+              className="w-full h-10 bg-black text-white rounded"
+            >
+              {translations.button}
+            </button>
+          </form>
+        )
+      }}
+    />
+  );
+};
+
+export default GPay;
+```
+
+## Garanti Pay Redirect
+
+```bash
+/src/app/[commerce]/[locale]/[currency]/orders/garanti-pay-redirect/page.tsx
+```
 
 ```javascript
 import { GarantiPayRedirect } from '@akinon/pz-gpay/src/routes/garanti-pay-redirect';
@@ -45,10 +162,27 @@ 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.       |
+
+| 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.      |
+| 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

@@ -1,9 +1,16 @@
 'use client';
 
 import * as yup from 'yup';
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, ReactElement, useEffect, useState } from 'react';
+import {
+  SubmitHandler,
+  useForm,
+  UseFormHandleSubmit,
+  Control,
+  FieldErrors
+} from 'react-hook-form';
 import { RootState } from 'redux/store';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
 import { useAppSelector } from '@akinon/next/redux/hooks';
 import { useSetPaymentOptionMutation } from '@akinon/next/data/client/checkout';
 import {
@@ -11,61 +18,104 @@ import {
   useSetGPayMethodMutation
 } from '../endpoints';
 import { twMerge } from 'tailwind-merge';
-import { yupResolver } from '@hookform/resolvers/yup';
 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>;
 
 const gpayFormSchema = yup.object();
 
-enum Elements {
-  container,
-  title,
-  description,
-  button
-}
+type GPayTranslations = {
+  title: string;
+  description: string[];
+  button: string;
+  error: string;
+};
 
-type ElementClassKey = `${keyof typeof Elements}ClassName`;
+type GPayOptionProps = {
+  containerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  buttonClassName?: string;
+  translations?: Partial<GPayTranslations>;
+  customUIRender?: (params: {
+    handleSubmit: UseFormHandleSubmit<GPayForm>;
+    onSubmit: SubmitHandler<GPayForm>;
+    control: Control<GPayForm>;
+    errors: FieldErrors<GPayForm>;
+    translations: GPayTranslations;
+  }) => ReactElement;
+};
 
-type GpayOptionProps = {
-  [key in ElementClassKey]?: string;
-} & {
-  translations?: {
-    [element in keyof typeof Elements]?: string | ReactNode;
-  };
+const defaultTranslations: GPayTranslations = {
+  title: 'Pay with GarantiPay',
+  description: [
+    'Click on the "Pay with 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'
 };
 
-export function GPayOption(props: GpayOptionProps) {
-  const [formError, setFormError] = useState(null);
-  const [errors, setErrors] = useState([]);
+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 };
 
   const { preOrder } = useAppSelector((state: RootState) => state.checkout);
   const isPaymentStepBusy = useAppSelector(
     (state: RootState) => state.checkout.steps.payment.busy
   );
 
-  const { handleSubmit } = useForm({
-    resolver: yupResolver(gpayFormSchema)
+  const {
+    handleSubmit,
+    control,
+    formState: { errors: formErrors, isSubmitting }
+  } = useForm<GPayForm>({
+    resolver: yupResolver(gpayFormSchema) as any
   });
 
   const [setPaymentOption] = useSetPaymentOptionMutation();
-  const [setGPayMethod] = useSetGPayMethodMutation();
-  const [setCompleteGPay] = useSetCompleteGPayMutation();
-
-  const onSubmit: SubmitHandler<null> = async () => {
-    if (isPaymentStepBusy) return;
-
-    setFormError([]);
-
-    await setGPayMethod();
-
-    const response = await setCompleteGPay().unwrap();
-
-    if (response?.errors?.non_field_errors) {
-      setFormError(response?.errors?.non_field_errors);
+  const [setGPayMethod, { isLoading: isSettingMethod }] =
+    useSetGPayMethodMutation();
+  const [setCompleteGPay, { isLoading: isCompleting }] =
+    useSetCompleteGPayMutation();
+
+  const isButtonDisabled =
+    isSubmitting ||
+    isPaymentStepBusy ||
+    isSettingMethod ||
+    isCompleting ||
+    isProcessing;
+
+  const onSubmit: SubmitHandler<GPayForm> = async () => {
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
+    setFormError(null);
+
+    try {
+      await setGPayMethod();
+
+      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);
     }
   };
 
-  // this is necessary because we need to set the payment_option after the redirect
   useEffect(() => {
     const posErrors = getPosError();
 
@@ -79,6 +129,16 @@ export function GPayOption(props: GpayOptionProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  if (props.customUIRender) {
+    return props.customUIRender({
+      handleSubmit,
+      onSubmit,
+      control,
+      errors: formErrors,
+      translations
+    });
+  }
+
   return (
     <form
       id="gpay_payment"
@@ -86,38 +146,31 @@ export function GPayOption(props: GpayOptionProps) {
       onSubmit={handleSubmit(onSubmit)}
     >
       <h1 className={twMerge('text-2xl font-bold', props.titleClassName)}>
-        {props.translations?.title ?? 'Pay with GarantiPay'}
+        {translations.title}
       </h1>
+
       <div className={twMerge('text-sm', props.descriptionClassName)}>
-        {props.translations?.description ? (
-          props.translations.description
-        ) : (
-          <>
-            <li>
-              Click on the “Pay with GarantiPay” button. Guarantee for payment
-              you will be redirected to the payment page.
-            </li>
-            <li>
-              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.
-            </li>
-            <li>
-              Complete the payment process by selecting your card and payment
-              type.
-            </li>
-          </>
-        )}
+        {translations.description.map((item, index) => (
+          <li key={index}>{item}</li>
+        ))}
       </div>
-      <Button className={twMerge('w-full mt-3', props.buttonClassName)}>
-        {props.translations?.button ?? 'Pay with GarantiPay'}
+
+      <Button
+        data-testid="gpay-payment-button"
+        className={twMerge('w-full mt-3', props.buttonClassName)}
+        type="submit"
+        disabled={isButtonDisabled}
+      >
+        {translations.button}
       </Button>
+
       {formError && (
         <div className="w-full text-xs text-start px-1 mt-3 text-error">
           {formError}
         </div>
       )}
-      {errors && (
+
+      {errors.length > 0 && (
         <div className="w-full text-xs text-start px-1 mt-3 text-error">
           {errors.map((error) => (
             <div key={error}>{error}</div>