@akinon/pz-pay-on-delivery 1.91.0-rc.3 → 1.91.0-rc.5

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @akinon/pz-pay-on-delivery
 
+## 1.91.0-rc.5
+
+## 1.91.0-rc.4
+
+### Minor Changes
+
+- d0853b3: ZERO-2844 :Add README for PayOnDelivery component with installation and usage instructions
+- 7eb51ca: ZERO-3424 :Update package versions
+
+<<<<<<< HEAD
+
 ## 1.91.0-rc.3
 
 ### Minor Changes
@@ -20,7 +31,11 @@
 - 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
+- # 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
+
+## 1.91.0
+
+> > > > > > > origin/ZERO-3418
 
 ## 1.90.0
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-pay-on-delivery",
-  "version": "1.91.0-rc.3",
+  "version": "1.91.0-rc.5",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

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>
+    )
+  }}
+/>
+```
+
+---