@akinon/pz-pay-on-delivery 2.0.0-beta.9 → 2.0.0

package/CHANGELOG.md

@@ -1,45 +1,144 @@
 # @akinon/pz-pay-on-delivery
 
-## 2.0.0-beta.9
+## 2.0.0
+
+## 2.0.0-beta.27
+
+## 2.0.0-beta.26
+
+## 2.0.0-beta.25
+
+## 2.0.0-beta.24
+
+## 2.0.0-beta.23
+
+## 2.0.0-beta.22
+
+## 2.0.0-beta.21
+
+## 2.0.0-beta.20
+
+## 1.126.0
+
+## 1.125.2
+
+## 1.125.1
+
+## 1.125.0
+
+## 1.124.0
+
+## 1.123.0
+
+## 1.122.0
+
+## 1.121.0
+
+## 1.120.0
 
 ### Minor Changes
 
-- 0fe7711: ZERO-3387: Upgrade nextjs, eslint-config-next
+- 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
 
-## 2.0.0-beta.8
+## 1.111.0
 
-## 2.0.0-beta.7
+## 1.110.0
 
-## 2.0.0-beta.6
+## 1.109.0
+
+## 1.108.0
+
+## 1.107.0
+
+## 1.106.0
+
+## 1.105.0
+
+## 1.104.0
+
+## 1.103.0
 
 ### Minor Changes
 
-- 8f05f9b: ZERO-3250: Beta branch synchronized with Main branch
+- d0853b3: ZERO-2844 :Add README for PayOnDelivery component with installation and usage instructions
 
-## 2.0.0-beta.5
+## 1.102.0
 
-## 2.0.0-beta.4
+## 1.101.0
 
-## 2.0.0-beta.3
+## 1.100.0
 
-## 2.0.0-beta.2
+## 1.99.0
 
 ### Minor Changes
 
-- a006015: ZERO-3116: Add not-found page and update default middleware.
-- 1eeb3d8: ZERO-3116: Add not found page
+- 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
 
-## 2.0.0-beta.1
+## 1.91.0
+
+## 1.90.0
 
 ### Minor Changes
 
-- ZERO-3091: Upgrade Next.js to v15 and React to v19
+- d662786: ZERO-3371: Refactor Pay On Delivery component
+
+## 1.89.0
+
+## 1.88.0
+
+## 1.87.0
+
+## 1.86.0
+
+## 1.85.0
+
+## 1.84.0
+
+## 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-pay-on-delivery",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0",
   "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.5",
+    "react-dom": "19.2.5",
+    "typescript": "^4.7.4",
     "react-hook-form": "7.31.3",
     "@hookform/resolvers": "2.9.0"
   }

package/readme.md

@@ -0,0 +1,130 @@
+# @akinon/pz-pay-on-delivery
+
+## Installation method
+
+You can use the following command to install the extension with the latest plugins:
+
+```bash
+npx @akinon/projectzero@latest --plugins
+```
+
+## PayOnDelivery
+
+A customizable React component that enables customers to select a "Pay on Delivery" payment method during checkout and confirm their agreement to terms before placing the order.
+
+---
+
+### Props
+
+#### `PayOnDeliveryProps`
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `translations` | `Record<string, PayOnDeliveryTranslationsProps>` | Optional | Localization texts for section titles, labels, and error messages |
+| `agreementCheckbox` | `React.ReactElement` | Optional | A controlled checkbox React element (e.g., terms agreement checkbox) |
+| `customUIRender` | `(props: RenderProps) => React.ReactNode` | Optional | Override default UI rendering with your own layout and logic |
+
+---
+
+#### `PayOnDeliveryTranslationsProps`
+
+| Key                          | Type     | Description                    |
+| ---------------------------- | -------- | ------------------------------ |
+| `paymentInformationTitle`    | `string` | Main section title             |
+| `paymentInformationSubtitle` | `string` | Subtitle for available options |
+| `totalAmountText`            | `string` | Label for total amount display |
+| `serviceFeeText`             | `string` | Label for service fee info     |
+| `returnInfoText`             | `string` | Text about return process      |
+| `refundInfoText`             | `string` | Text about refund process      |
+| `faqInfoText`                | `string` | Link/label for FAQ section     |
+| `placeOrderText`             | `string` | Button text                    |
+| `errorMessageText`           | `string` | API error display text         |
+| `requiredFieldMessage`       | `string` | Field validation error message |
+
+---
+
+#### RenderProps (for `customUIRender`)
+
+| Prop | Type | Description |
+| --- | --- | --- | --- |
+| `handleSubmit` | `UseFormHandleSubmit` | Form submit handler |
+| `onSubmit` | `SubmitHandler<PayOnDeliveryForm>` | Submit function |
+| `register` | `UseFormRegister<PayOnDeliveryForm>` | Form field registrar |
+| `control` | `Control<PayOnDeliveryForm>` | React Hook Form control instance |
+| `errors` | `FieldErrors<PayOnDeliveryForm>` | Validation errors |
+| `paymentChoices` | `any[]` | List of available payment choices |
+| `preOrder` | `RootState['checkout']['preOrder']` | PreOrder data from Redux |
+| `formError` | `string | null` | API error messages |
+| `isLoading` | `boolean` | Loading state |
+| `setPayOnDeliveryChoice` | `(value: string) => void` | Function to update payment selection |
+
+---
+
+## Usage
+
+```bash
+src/views/checkout/steps/payment/options/pay-on-delivery/
+```
+
+---
+
+### Default Usage
+
+```tsx
+<PluginModule
+  component={Component.PayOnDelivery}
+  props={{
+    agreementCheckbox: (
+      <CheckoutAgreements control={null} error={null} fieldId="agreement" />
+    )
+  }}
+/>
+```
+
+---
+
+### Customized Usage with `customUIRender`
+
+```tsx
+<PluginModule
+  component={Component.PayOnDelivery}
+  props={{
+    customUIRender: ({
+      handleSubmit,
+      onSubmit,
+      control,
+      errors,
+      setPayOnDeliveryChoice,
+      paymentChoices,
+      preOrder,
+      formError
+    }) => (
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="p-6 bg-white rounded-lg space-y-6"
+      >
+        <h2 className="text-xl font-semibold">PAY ON DELIVERY</h2>
+        <div className="space-y-4">
+          {paymentChoices.map((choice) => (
+            <label key={choice.value} className="flex items-center space-x-4">
+              <Radio
+                type="radio"
+                value={choice.value}
+                checked={choice.value === preOrder.payment_choice?.value}
+                onChange={() => setPayOnDeliveryChoice(choice.value)}
+              />
+              <span>{choice.label}</span>
+            </label>
+          ))}
+        </div>
+        {formError && <p className="text-xs text-error mt-2">{formError}</p>}
+        <Button type="submit" className="w-full bg-black text-white">
+          Place Order
+        </Button>
+      </form>
+    )
+  }}
+/>
+```
+
+---

package/src/endpoints.ts

@@ -15,7 +15,6 @@ interface CheckoutResponse {
 }
 
 export interface PayOnDeliveryParams {
-  agreement: string;
   paymentType: string;
 }
 

package/src/index.tsx

@@ -1,8 +1,16 @@
 import { useAppSelector } from '@akinon/next/redux/hooks';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Button, Icon, Price, Radio } from '@akinon/next/components';
+import { checkPaymentWillRedirect } from '@akinon/next/utils';
 import React, { useEffect, useState } from 'react';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import {
+  SubmitHandler,
+  useForm,
+  UseFormHandleSubmit,
+  UseFormRegister,
+  Control,
+  FieldErrors
+} from 'react-hook-form';
 import { RootState } from 'redux/store';
 import * as yup from 'yup';
 import {
@@ -10,6 +18,11 @@ import {
   useSetPayOnDeliveryChoiceMutation
 } from './endpoints';
 
+interface PayOnDeliveryForm {
+  agreement: boolean;
+  paymentType: string;
+}
+
 interface PayOnDeliveryTranslationsProps {
   paymentInformationTitle: string;
   paymentInformationSubtitle: string;
@@ -43,59 +56,77 @@ const defaultTranslations = {
 interface PayOnDeliveryProps {
   translations: Record<string, PayOnDeliveryTranslationsProps>;
   agreementCheckbox?: React.ReactElement;
+  customUIRender?: (props: {
+    handleSubmit: UseFormHandleSubmit<PayOnDeliveryForm>;
+    onSubmit: SubmitHandler<any>;
+    paymentChoices: any[];
+    preOrder: any;
+    formError: string | null;
+    isLoading: boolean;
+    register: UseFormRegister<PayOnDeliveryForm>;
+    control: Control<PayOnDeliveryForm>;
+    errors: FieldErrors<PayOnDeliveryForm>;
+    setPayOnDeliveryChoice: (value: string) => void;
+  }) => React.ReactNode;
 }
 
 export const PayOnDelivery = ({
   translations,
-  agreementCheckbox
+  agreementCheckbox,
+  customUIRender
 }: PayOnDeliveryProps) => {
   const _translations = {
     ...defaultTranslations,
     ...translations
   };
 
-  const createPayOnDeliveryFormSchema = (
-    _translations: PayOnDeliveryTranslationsProps
-  ) => {
-    return yup.object().shape({
-      agreement: yup
-        .boolean()
-        .oneOf([true], _translations.requiredFieldMessage),
-      paymentType: yup.string()
-    });
-  };
-
-  const payOnDeliveryFormSchema = createPayOnDeliveryFormSchema(_translations);
+  const payOnDeliveryFormSchema = yup.object().shape({
+    agreement: yup.boolean().oneOf([true], _translations.requiredFieldMessage),
+    paymentType: yup.string()
+  });
 
   const {
     handleSubmit,
     control,
     register,
-    formState: { errors },
+    formState: { errors, isSubmitting },
     setValue
-  } = useForm({
-    resolver: yupResolver(payOnDeliveryFormSchema)
+  } = useForm<PayOnDeliveryForm>({
+    resolver: yupResolver(payOnDeliveryFormSchema) as any
   });
 
-  const [setCompletePayOnDelivery] = useSetCompletePayOnDeliveryMutation();
-
+  const [setCompletePayOnDelivery, { isLoading: isCompleting }] =
+    useSetCompletePayOnDeliveryMutation();
   const [setPayOnDeliveryPaymentChoice, { isLoading }] =
     useSetPayOnDeliveryChoiceMutation();
   const [formError, setFormError] = useState(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const isButtonDisabled = isSubmitting || isCompleting || isProcessing;
 
   const { preOrder, paymentChoices } = useAppSelector(
     (state: RootState) => state.checkout
   );
 
-  const onSubmit: SubmitHandler<null> = async (data) => {
-    const response = await setCompletePayOnDelivery(data).unwrap();
+  const onSubmit: SubmitHandler<PayOnDeliveryForm> = async (data) => {
+    if (isButtonDisabled) return;
 
-    setFormError(response?.errors?.non_field_errors);
+    setIsProcessing(true);
+
+    try {
+      const response = await setCompletePayOnDelivery(data).unwrap();
+      setFormError(response?.errors?.non_field_errors);
+
+      if (response?.errors || !checkPaymentWillRedirect(response)) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      setIsProcessing(false);
+    }
   };
 
   const setPayOnDeliveryChoice = async (value: string) => {
     if (isLoading) return;
-
     const response = await setPayOnDeliveryPaymentChoice(value).unwrap();
     setFormError(response?.errors?.non_field_errors);
   };
@@ -108,6 +139,21 @@ export const PayOnDelivery = ({
     }
   }, [paymentChoices, preOrder?.payment_choice]);
 
+  if (customUIRender) {
+    return customUIRender({
+      handleSubmit,
+      onSubmit,
+      register,
+      control,
+      errors,
+      paymentChoices,
+      preOrder,
+      formError,
+      isLoading: isButtonDisabled,
+      setPayOnDeliveryChoice
+    });
+  }
+
   return (
     <form
       id="pay_on_delivery"
@@ -163,9 +209,8 @@ export const PayOnDelivery = ({
       <div className="px-4 sm:px-6">
         <div className="flex items-start flex-col border-solid border-gray-400 py-4 space-y-4">
           {agreementCheckbox &&
-            React.cloneElement(agreementCheckbox, {
-              // @ts-ignore
-              control,
+            React.cloneElement(agreementCheckbox as any, {
+              control: control as any,
               error: errors.agreement,
               fieldId: 'agreement'
             })}
@@ -178,6 +223,7 @@ export const PayOnDelivery = ({
           <Button
             className="group uppercase mt-4 inline-flex items-center justify-center w-full"
             type="submit"
+            disabled={isButtonDisabled}
             data-testid="checkout-bank-account-place-order"
           >
             <span>{_translations.placeOrderText}</span>