@akinon/pz-credit-payment 1.92.0-rc.9 → 1.92.0-snapshot-ZERO-3449-20250618101111

package/CHANGELOG.md

@@ -1,46 +1,8 @@
 # @akinon/pz-credit-payment
 
-## 1.92.0-rc.9
+## 1.92.0-snapshot-ZERO-3449-20250618101111
 
-## 1.92.0-rc.8
-
-## 1.92.0-rc.7
-
-## 1.91.0-rc.6
-
-## 1.91.0-rc.5
-
-## 1.91.0-rc.4
-
-### Minor Changes
-
-- 7eb51ca: ZERO-3424 :Update package versions
-
-## 1.91.0-rc.3
-
-### Minor Changes
-
-- 310556ec: ZERO-3372 :Add README and enhance CreditPayment component with renderer support
-- 64699d3f: ZERO-2761: Fix invalid import for plugin module
-- e974d8e8: 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.91.0-rc.2
-
-## 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.91.0
 
 ## 1.90.0
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-credit-payment",
-  "version": "1.92.0-rc.9",
+  "version": "1.92.0-snapshot-ZERO-3449-20250618101111",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/index.tsx

@@ -1,3 +1,4 @@
+
 import React from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useEffect, useState } from 'react';
@@ -26,23 +27,10 @@ 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) =>
@@ -50,13 +38,14 @@ const creditPaymentFormSchema = (requiredFieldMessage) =>
     agreement: yup.boolean().oneOf([true], requiredFieldMessage)
   });
 
-export const CreditPayment = ({
-  translations,
-  agreementCheckbox,
-  titleClassName,
-  buttonClassName,
-  renderer
-}: CreditPaymentProps) => {
+export const CreditPayment = (
+	{
+		translations,
+		agreementCheckbox,
+    titleClassName,
+    buttonClassName
+	}: CreditPaymentProps
+) => {
   const _translations = {
     ...defaultTranslations,
     ...translations
@@ -68,22 +57,21 @@ 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;
     }
@@ -93,38 +81,17 @@ export const CreditPayment = ({
     if (creditPaymentOptions?.length && !preOrder.credit_payment_option) {
       setCreditPaymentOption(creditPaymentOptions[0].pk);
     }
-  }, [
-    creditPaymentOptions,
-    selectedCreditPaymentPk,
-    preOrder.credit_payment_option,
-    setCreditPaymentOption
-  ]);
-
-  if (renderer?.Content) {
-    return renderer.Content({
-      control,
-      errors,
-      onSubmit: handleSubmit(onSubmit),
-      creditPaymentOptions,
-      selectedCreditPaymentPk,
-      setCreditPaymentOption,
-      preOrder,
-      agreementCheckbox,
-      formError
-    });
-  }
+  }, [creditPaymentOptions, selectedCreditPaymentPk, preOrder.credit_payment_option, setCreditPaymentOption]);
 
   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>
 
@@ -138,10 +105,7 @@ 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);
@@ -159,12 +123,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">
@@ -174,12 +138,12 @@ export const CreditPayment = ({
 
           <Button
             type="submit"
-            data-testid="checkout-credit-payment-button"
+            data-testid="checkout-bank-account-place-order"
             className={clsx(
               twMerge(
                 'group uppercase mt-4 inline-flex items-center justify-center w-full',
                 buttonClassName
-              )
+                )
             )}
           >
             <span>{_translations.buttonName}</span>
@@ -195,3 +159,4 @@ export const CreditPayment = ({
     </form>
   );
 };
+

package/README.md

@@ -1,126 +0,0 @@
-# @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>
-      )
-    }
-  }}
-/>
-```