@akinon/pz-credit-payment 1.90.0 → 1.91.0-rc.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @akinon/pz-credit-payment
 
+## 1.91.0-rc.1
+
+## 1.91.0-rc.0
+
+### Minor Changes
+
+- 310556e: ZERO-3372 :Add README and enhance CreditPayment component with renderer support
+- 64699d3f: ZERO-2761: Fix invalid import for plugin module
+- e974d8e: ZERO-3406: Fix rc build
+- 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
+- fec9638a: ZERO-3346 :Update data-testid for Credit Payment button
+
 ## 1.90.0
 
 ## 1.89.0

package/README.md

@@ -0,0 +1,126 @@
+# @akinon/pz-credit-payment
+
+## Installation method
+
+You can use the following command to install the extension with the latest plugins:
+
+```bash
+
+npx @akinon/projectzero@latest --plugins
+
+```
+
+## CreditPayment
+
+A customizable React component that enables customers to select a credit payment option during checkout and confirm their agreement to terms before placing the order.
+
+### Props
+
+#### `CreditPaymentProps`
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `translations` | `Record<string, CreditPaymentTranslationsProps>` | Optional | Localization texts for title, button and validation message |
+| `agreementCheckbox` | `React.ReactElement` | Required | A controlled checkbox React element (e.g., terms agreement checkbox) |
+| `titleClassName` | `string` | Optional | Optional custom CSS class for the title area |
+| `buttonClassName` | `string` | Optional | Optional custom CSS class for the submit button |
+| `renderer` | `{ Content?: (props: RendererProps) => JSX.Element }` | Optional | Optional override to fully control the rendering of the component |
+
+#### `CreditPaymentTranslationsProps`
+
+| Key | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | Title text shown at the top of the section |
+| `buttonName` | `string` | Submit button label |
+| `requiredFieldMessage` | `string` | Error message when checkbox is not checked |
+
+#### RendererProps (for `renderer.Content`)
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `control` | `any` | React Hook Form control instance |
+| `errors` | `any` | React Hook Form errors object |
+| `onSubmit` | `() => void` | Submit handler |
+| `creditPaymentOptions` | `any[]` | Available credit payment options |
+| `selectedCreditPaymentPk` | `number \| null` | Currently selected option's primary key |
+| `setCreditPaymentOption` | `(pk: number) => void` | Setter for selecting a payment option |
+| `preOrder` | `RootState['checkout']['preOrder']` | Pre-order object from Redux |
+| `agreementCheckbox` | `React.ReactElement` | Provided agreement checkbox component |
+| `formError` | `string \| null` | Any error returned from the confirmation API |
+
+### Usage
+
+```bash
+src/views/checkout/steps/payment/options/credit-payment/
+```
+
+#### Default Usage
+
+```javascript
+<PluginModule
+  component={Component.CreditPayment}
+  props={{
+    agreementCheckbox: (
+      <CheckoutAgreements control={null} error={null} fieldId="agreement" />
+    )
+  }}
+/>
+```
+
+#### Customized Usage with `renderer`
+
+```javascript
+<PluginModule
+  component={Component.CreditPayment}
+  props={{
+    agreementCheckbox: (
+      <CheckoutAgreements control={null} error={null} fieldId="agreement" />
+    ),
+    renderer: {
+      Content: ({
+        control,
+        errors,
+        onSubmit,
+        creditPaymentOptions,
+        selectedCreditPaymentPk,
+        setCreditPaymentOption,
+        preOrder,
+        agreementCheckbox,
+        formError
+      }) => (
+        <form onSubmit={onSubmit} className="p-6 bg-white rounded-lg space-y-6">
+          <h2 className="text-xl font-semibold">SHOPPING CREDIT</h2>
+          <div className="space-y-4">
+            {creditPaymentOptions.map((bank) => (
+              <label
+                key={bank.pk}
+                className="p-4 flex items-center cursor-pointer rounded-lg border-gray-480 border space-x-5 pl-5 mb-6"
+              >
+                <Radio
+                  type="radio"
+                  value={bank.pk}
+                  checked={
+                    bank.pk === selectedCreditPaymentPk ||
+                    preOrder.credit_payment_option?.pk === bank.pk
+                  }
+                  onChange={() => setCreditPaymentOption(bank.pk)}
+                />
+                <span>{bank.name}</span>
+              </label>
+            ))}
+          </div>
+          {React.cloneElement(agreementCheckbox, {
+            control,
+            error: errors.agreement,
+            fieldId: 'agreement'
+          })}
+          {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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-credit-payment",
-  "version": "1.90.0",
+  "version": "1.91.0-rc.1",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/index.tsx

@@ -1,4 +1,3 @@
-
 import React from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useEffect, useState } from 'react';
@@ -27,10 +26,23 @@ const defaultTranslations = {
 };
 
 export interface CreditPaymentProps {
-  translations: Record<string, CreditPaymentTranslationsProps>;
+  translations?: Record<string, CreditPaymentTranslationsProps>;
   agreementCheckbox: React.ReactElement;
   titleClassName?: string;
   buttonClassName?: string;
+  renderer?: {
+    Content?: (props: {
+      control: any;
+      errors: any;
+      onSubmit: () => void;
+      creditPaymentOptions: any[];
+      selectedCreditPaymentPk: number | null;
+      setCreditPaymentOption: (pk: number) => void;
+      preOrder: RootState['checkout']['preOrder'];
+      agreementCheckbox: React.ReactElement;
+      formError: string | null;
+    }) => JSX.Element;
+  };
 }
 
 const creditPaymentFormSchema = (requiredFieldMessage) =>
@@ -38,14 +50,13 @@ const creditPaymentFormSchema = (requiredFieldMessage) =>
     agreement: yup.boolean().oneOf([true], requiredFieldMessage)
   });
 
-export const CreditPayment = (
-	{
-		translations,
-		agreementCheckbox,
-    titleClassName,
-    buttonClassName
-	}: CreditPaymentProps
-) => {
+export const CreditPayment = ({
+  translations,
+  agreementCheckbox,
+  titleClassName,
+  buttonClassName,
+  renderer
+}: CreditPaymentProps) => {
   const _translations = {
     ...defaultTranslations,
     ...translations
@@ -57,21 +68,22 @@ export const CreditPayment = (
     register,
     formState: { errors }
   } = useForm({
-    resolver: yupResolver(creditPaymentFormSchema(_translations.requiredFieldMessage))
+    resolver: yupResolver(
+      creditPaymentFormSchema(_translations.requiredFieldMessage)
+    )
   });
   const [formError, setFormError] = useState<string | null>(null);
 
   const [setCreditPaymentOption] = useSetCreditPaymentOptionMutation();
   const [confirmationCreditPayment] = useConfirmationCreditPaymentMutation();
 
-  const { creditPaymentOptions, selectedCreditPaymentPk, preOrder } = useAppSelector(
-    (state: RootState) => state.checkout
-  );
+  const { creditPaymentOptions, selectedCreditPaymentPk, preOrder } =
+    useAppSelector((state: RootState) => state.checkout);
 
   const onSubmit: SubmitHandler<any> = async () => {
     const response = await confirmationCreditPayment().unwrap();
 
-    if(response?.errors?.non_field_errors) {
+    if (response?.errors?.non_field_errors) {
       setFormError(response?.errors?.non_field_errors);
       return;
     }
@@ -81,17 +93,38 @@ export const CreditPayment = (
     if (creditPaymentOptions?.length && !preOrder.credit_payment_option) {
       setCreditPaymentOption(creditPaymentOptions[0].pk);
     }
-  }, [creditPaymentOptions, selectedCreditPaymentPk, preOrder.credit_payment_option, setCreditPaymentOption]);
+  }, [
+    creditPaymentOptions,
+    selectedCreditPaymentPk,
+    preOrder.credit_payment_option,
+    setCreditPaymentOption
+  ]);
+
+  if (renderer?.Content) {
+    return renderer.Content({
+      control,
+      errors,
+      onSubmit: handleSubmit(onSubmit),
+      creditPaymentOptions,
+      selectedCreditPaymentPk,
+      setCreditPaymentOption,
+      preOrder,
+      agreementCheckbox,
+      formError
+    });
+  }
 
   return (
     <form className="flex flex-col w-full" onSubmit={handleSubmit(onSubmit)}>
-			<div className={clsx(
-        twMerge(
-          'flex justify-start items-center border-solid border-gray-400 px-4 py-2 sm:px-6 sm:py-3 sm:min-h-15',
-          'text-black-800 text-lg font-medium sm:text-2xl',
-          titleClassName
+      <div
+        className={clsx(
+          twMerge(
+            'flex justify-start items-center border-solid border-gray-400 px-4 py-2 sm:px-6 sm:py-3 sm:min-h-15',
+            'text-black-800 text-lg font-medium sm:text-2xl',
+            titleClassName
           )
-      )}>
+        )}
+      >
         {_translations.title}
       </div>
 
@@ -105,7 +138,10 @@ export const CreditPayment = (
               <Radio
                 type="radio"
                 value={bank.pk}
-                checked={bank.pk === selectedCreditPaymentPk || preOrder.credit_payment_option?.pk === bank.pk}
+                checked={
+                  bank.pk === selectedCreditPaymentPk ||
+                  preOrder.credit_payment_option?.pk === bank.pk
+                }
                 {...register('paymentType')}
                 onChange={() => {
                   setCreditPaymentOption(bank.pk);
@@ -123,12 +159,12 @@ export const CreditPayment = (
 
       <div className="px-4 sm:px-6">
         <div className="flex items-start flex-col py-4 space-y-4">
-        	{agreementCheckbox &&
+          {agreementCheckbox &&
             React.cloneElement(agreementCheckbox, {
               control,
               error: errors.agreement,
               fieldId: 'agreement'
-          })}
+            })}
 
           {formError && (
             <div className="w-full text-xs text-start px-1 mt-3 text-error">
@@ -138,12 +174,12 @@ export const CreditPayment = (
 
           <Button
             type="submit"
-            data-testid="checkout-bank-account-place-order"
+            data-testid="checkout-credit-payment-button"
             className={clsx(
               twMerge(
                 'group uppercase mt-4 inline-flex items-center justify-center w-full',
                 buttonClassName
-                )
+              )
             )}
           >
             <span>{_translations.buttonName}</span>
@@ -159,4 +195,3 @@ export const CreditPayment = (
     </form>
   );
 };
-