@akinon/pz-pay-on-delivery 1.103.0-snapshot-ZERO-3648-20251002184136 → 1.103.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -1
- package/package.json +1 -1
- package/readme.md +130 -0
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
package/readme.md
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
# @akinon/pz-pay-on-delivery
|
|
2
|
+
|
|
3
|
+
## Installation method
|
|
4
|
+
|
|
5
|
+
You can use the following command to install the extension with the latest plugins:
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npx @akinon/projectzero@latest --plugins
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## PayOnDelivery
|
|
12
|
+
|
|
13
|
+
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.
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
### Props
|
|
18
|
+
|
|
19
|
+
#### `PayOnDeliveryProps`
|
|
20
|
+
|
|
21
|
+
| Prop | Type | Required | Description |
|
|
22
|
+
| --- | --- | --- | --- |
|
|
23
|
+
| `translations` | `Record<string, PayOnDeliveryTranslationsProps>` | Optional | Localization texts for section titles, labels, and error messages |
|
|
24
|
+
| `agreementCheckbox` | `React.ReactElement` | Optional | A controlled checkbox React element (e.g., terms agreement checkbox) |
|
|
25
|
+
| `customUIRender` | `(props: RenderProps) => React.ReactNode` | Optional | Override default UI rendering with your own layout and logic |
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
#### `PayOnDeliveryTranslationsProps`
|
|
30
|
+
|
|
31
|
+
| Key | Type | Description |
|
|
32
|
+
| ---------------------------- | -------- | ------------------------------ |
|
|
33
|
+
| `paymentInformationTitle` | `string` | Main section title |
|
|
34
|
+
| `paymentInformationSubtitle` | `string` | Subtitle for available options |
|
|
35
|
+
| `totalAmountText` | `string` | Label for total amount display |
|
|
36
|
+
| `serviceFeeText` | `string` | Label for service fee info |
|
|
37
|
+
| `returnInfoText` | `string` | Text about return process |
|
|
38
|
+
| `refundInfoText` | `string` | Text about refund process |
|
|
39
|
+
| `faqInfoText` | `string` | Link/label for FAQ section |
|
|
40
|
+
| `placeOrderText` | `string` | Button text |
|
|
41
|
+
| `errorMessageText` | `string` | API error display text |
|
|
42
|
+
| `requiredFieldMessage` | `string` | Field validation error message |
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
#### RenderProps (for `customUIRender`)
|
|
47
|
+
|
|
48
|
+
| Prop | Type | Description |
|
|
49
|
+
| --- | --- | --- | --- |
|
|
50
|
+
| `handleSubmit` | `UseFormHandleSubmit` | Form submit handler |
|
|
51
|
+
| `onSubmit` | `SubmitHandler<PayOnDeliveryForm>` | Submit function |
|
|
52
|
+
| `register` | `UseFormRegister<PayOnDeliveryForm>` | Form field registrar |
|
|
53
|
+
| `control` | `Control<PayOnDeliveryForm>` | React Hook Form control instance |
|
|
54
|
+
| `errors` | `FieldErrors<PayOnDeliveryForm>` | Validation errors |
|
|
55
|
+
| `paymentChoices` | `any[]` | List of available payment choices |
|
|
56
|
+
| `preOrder` | `RootState['checkout']['preOrder']` | PreOrder data from Redux |
|
|
57
|
+
| `formError` | `string | null` | API error messages |
|
|
58
|
+
| `isLoading` | `boolean` | Loading state |
|
|
59
|
+
| `setPayOnDeliveryChoice` | `(value: string) => void` | Function to update payment selection |
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## Usage
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
src/views/checkout/steps/payment/options/pay-on-delivery/
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
### Default Usage
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
<PluginModule
|
|
75
|
+
component={Component.PayOnDelivery}
|
|
76
|
+
props={{
|
|
77
|
+
agreementCheckbox: (
|
|
78
|
+
<CheckoutAgreements control={null} error={null} fieldId="agreement" />
|
|
79
|
+
)
|
|
80
|
+
}}
|
|
81
|
+
/>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
### Customized Usage with `customUIRender`
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
<PluginModule
|
|
90
|
+
component={Component.PayOnDelivery}
|
|
91
|
+
props={{
|
|
92
|
+
customUIRender: ({
|
|
93
|
+
handleSubmit,
|
|
94
|
+
onSubmit,
|
|
95
|
+
control,
|
|
96
|
+
errors,
|
|
97
|
+
setPayOnDeliveryChoice,
|
|
98
|
+
paymentChoices,
|
|
99
|
+
preOrder,
|
|
100
|
+
formError
|
|
101
|
+
}) => (
|
|
102
|
+
<form
|
|
103
|
+
onSubmit={handleSubmit(onSubmit)}
|
|
104
|
+
className="p-6 bg-white rounded-lg space-y-6"
|
|
105
|
+
>
|
|
106
|
+
<h2 className="text-xl font-semibold">PAY ON DELIVERY</h2>
|
|
107
|
+
<div className="space-y-4">
|
|
108
|
+
{paymentChoices.map((choice) => (
|
|
109
|
+
<label key={choice.value} className="flex items-center space-x-4">
|
|
110
|
+
<Radio
|
|
111
|
+
type="radio"
|
|
112
|
+
value={choice.value}
|
|
113
|
+
checked={choice.value === preOrder.payment_choice?.value}
|
|
114
|
+
onChange={() => setPayOnDeliveryChoice(choice.value)}
|
|
115
|
+
/>
|
|
116
|
+
<span>{choice.label}</span>
|
|
117
|
+
</label>
|
|
118
|
+
))}
|
|
119
|
+
</div>
|
|
120
|
+
{formError && <p className="text-xs text-error mt-2">{formError}</p>}
|
|
121
|
+
<Button type="submit" className="w-full bg-black text-white">
|
|
122
|
+
Place Order
|
|
123
|
+
</Button>
|
|
124
|
+
</form>
|
|
125
|
+
)
|
|
126
|
+
}}
|
|
127
|
+
/>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
---
|