@akinon/pz-gpay 2.0.0-beta.10 → 2.0.0-beta.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-gpay
 
+## 2.0.0-beta.11
+
+### Minor Changes
+
+- ac783d6: ZERO-3482: Update tailwindcss to version 4.1.11 and enhance button cursor styles
+
 ## 2.0.0-beta.10
 
 ### Minor Changes

package/package.json

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

package/readme.md

@@ -28,7 +28,26 @@ const GPay = () => {
             'Click the button below to pay for your order using GarantiPay.',
           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>
+        )
       }}
     />
   );
@@ -47,10 +66,26 @@ 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,39 +18,62 @@ 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';
 
+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 translations = { ...defaultTranslations, ...props.translations };
 
   const { preOrder } = useAppSelector((state: RootState) => state.checkout);
   const isPaymentStepBusy = useAppSelector(
     (state: RootState) => state.checkout.steps.payment.busy
   );
 
-  const { handleSubmit } = useForm({
+  const {
+    handleSubmit,
+    control,
+    formState: { errors: formErrors }
+  } = useForm<GPayForm>({
     resolver: yupResolver(gpayFormSchema)
   });
 
@@ -51,21 +81,19 @@ export function GPayOption(props: GpayOptionProps) {
   const [setGPayMethod] = useSetGPayMethodMutation();
   const [setCompleteGPay] = useSetCompleteGPayMutation();
 
-  const onSubmit: SubmitHandler<null> = async () => {
+  const onSubmit: SubmitHandler<GPayForm> = async () => {
     if (isPaymentStepBusy) return;
 
-    setFormError([]);
-
+    setFormError(null);
     await setGPayMethod();
 
     const response = await setCompleteGPay().unwrap();
 
     if (response?.errors?.non_field_errors) {
-      setFormError(response?.errors?.non_field_errors);
+      setFormError(response.errors.non_field_errors);
     }
   };
 
-  // this is necessary because we need to set the payment_option after the redirect
   useEffect(() => {
     const posErrors = getPosError();
 
@@ -79,6 +107,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 +124,30 @@ 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"
+      >
+        {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>