@akinon/pz-checkout-gift-pack 1.99.0-rc.70 → 1.99.0-snapshot-ZERO-3640-20250919140314
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 +1 -21
- package/README.md +231 -105
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,26 +1,6 @@
|
|
|
1
1
|
# @akinon/pz-checkout-gift-pack
|
|
2
2
|
|
|
3
|
-
## 1.99.0-
|
|
4
|
-
|
|
5
|
-
## 1.99.0-rc.69
|
|
6
|
-
|
|
7
|
-
## 1.99.0-rc.68
|
|
8
|
-
|
|
9
|
-
## 1.99.0-rc.67
|
|
10
|
-
|
|
11
|
-
## 1.99.0-rc.66
|
|
12
|
-
|
|
13
|
-
### Minor Changes
|
|
14
|
-
|
|
15
|
-
- d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
|
|
16
|
-
- 16aff543: ZERO-3431: Add test script for redirect utility in package.json
|
|
17
|
-
- 64699d3ff: ZERO-2761: Fix invalid import for plugin module
|
|
18
|
-
- e974d8e8: ZERO-3406: Fix rc build
|
|
19
|
-
- 7eb51ca9: ZERO-3424 :Update package versions
|
|
20
|
-
- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
|
|
21
|
-
- 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
|
|
22
|
-
- 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
|
|
23
|
-
- 8bc82f02: ZERO-3405: Update Readme
|
|
3
|
+
## 1.99.0-snapshot-ZERO-3640-20250919140314
|
|
24
4
|
|
|
25
5
|
## 1.98.0
|
|
26
6
|
|
package/README.md
CHANGED
|
@@ -22,120 +22,246 @@ npx @akinon/projectzero@latest --plugins
|
|
|
22
22
|
| customUIRender | `(props: { hasGiftPack: boolean; hasNote: { state: boolean }; note: string; onAddGiftPack: () => void; onRemoveGiftPack: () => void; onAddNote: () => void; formContent: React.ReactNode; translations: Record<string, string> }) => React.ReactNode` | A custom render function to fully override the default gift pack UI. This gives complete control over the display and interactions. |
|
|
23
23
|
| customGiftNoteFormUIRender | `(props: { register: any; errors: any; note: string; textAreaCount: number; onSubmit: (data: any) => void; removeNote: () => void; handleSubmit: any; translations: Record<string, string> }) => React.ReactNode` | A render function that replaces the default gift note form UI. Useful for providing a customized textarea, button layout, or validation display. |
|
|
24
24
|
|
|
25
|
-
### Default Usage
|
|
26
|
-
|
|
27
|
-
```js
|
|
28
|
-
import PluginModule, { Component } from '@akinon/next/components/plugin-module';
|
|
29
|
-
|
|
30
|
-
<PluginModule
|
|
31
|
-
component={Component.CheckoutGiftPack}
|
|
32
|
-
props={{
|
|
33
|
-
className: 'flex flex-col w-full mb-4 border border-solid border-gray-400'
|
|
34
|
-
}}
|
|
35
|
-
/>;
|
|
36
|
-
```
|
|
37
|
-
|
|
38
25
|
### Customized sample code
|
|
39
26
|
|
|
40
27
|
```js
|
|
41
|
-
|
|
28
|
+
<PluginModule
|
|
29
|
+
component={Component.CheckoutGiftPack}
|
|
30
|
+
props={{
|
|
31
|
+
className:
|
|
32
|
+
'flex flex-col w-full mb-4 border border-solid border-gray-400',
|
|
33
|
+
translations: {
|
|
34
|
+
addGiftPackText: 'Add Gift Pack',
|
|
35
|
+
giftPackAdded: 'Gift Pack Added',
|
|
36
|
+
removeGiftPackText: 'Remove Gift Pack',
|
|
37
|
+
informationText: 'This order will be gift packaged*',
|
|
38
|
+
updateNote: 'Update Note',
|
|
39
|
+
removeGiftNoteText: 'Remove Gift Note',
|
|
40
|
+
charactersLength: 'characters left',
|
|
41
|
+
placeholderInput:
|
|
42
|
+
'You can leave empty this area. However it will be a gift package without note.',
|
|
43
|
+
accordionTitle: 'Gift Note',
|
|
44
|
+
warningMessage:
|
|
45
|
+
'Make sure that this field is not longer than the character limit.',
|
|
46
|
+
save: 'SAVE',
|
|
47
|
+
close: 'Close'
|
|
48
|
+
},
|
|
49
|
+
customUIRender: ({
|
|
50
|
+
hasGiftPack,
|
|
51
|
+
hasNote,
|
|
52
|
+
note,
|
|
53
|
+
onAddGiftPack,
|
|
54
|
+
onRemoveGiftPack,
|
|
55
|
+
onAddNote,
|
|
56
|
+
formContent,
|
|
57
|
+
translations
|
|
58
|
+
}) => (
|
|
59
|
+
<div className="custom-gift-pack">
|
|
60
|
+
{hasGiftPack ? (
|
|
61
|
+
<div className="gift-pack-added p-4 border border-gray-200">
|
|
62
|
+
<div className="flex justify-between items-center mb-4">
|
|
63
|
+
<span className="font-medium">
|
|
64
|
+
{translations.giftPackAdded}
|
|
65
|
+
</span>
|
|
66
|
+
<button
|
|
67
|
+
onClick={onRemoveGiftPack}
|
|
68
|
+
className="text-red-500 hover:text-red-700"
|
|
69
|
+
>
|
|
70
|
+
{translations.removeGiftPackText}
|
|
71
|
+
</button>
|
|
72
|
+
</div>
|
|
42
73
|
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
placeholderInput:
|
|
56
|
-
'You can leave empty this area. However it will be a gift package without note.',
|
|
57
|
-
accordionTitle: 'Gift Note',
|
|
58
|
-
warningMessage:
|
|
59
|
-
'Make sure that this field is not longer than the character limit.',
|
|
60
|
-
save: 'SAVE',
|
|
61
|
-
close: 'Close'
|
|
62
|
-
},
|
|
63
|
-
customUIRender: ({
|
|
64
|
-
hasGiftPack,
|
|
65
|
-
hasNote,
|
|
66
|
-
note,
|
|
67
|
-
onAddGiftPack,
|
|
68
|
-
onRemoveGiftPack,
|
|
69
|
-
onAddNote,
|
|
70
|
-
formContent,
|
|
71
|
-
translations
|
|
72
|
-
}) => (
|
|
73
|
-
<div className="custom-gift-pack">
|
|
74
|
-
{hasGiftPack ? (
|
|
75
|
-
<div className="gift-pack-added p-4 border border-gray-200">
|
|
76
|
-
<div className="flex justify-between items-center mb-4">
|
|
77
|
-
<span className="font-medium">{translations.giftPackAdded}</span>
|
|
78
|
-
<button
|
|
79
|
-
onClick={onRemoveGiftPack}
|
|
80
|
-
className="text-red-500 hover:text-red-700"
|
|
81
|
-
>
|
|
82
|
-
{translations.removeGiftPackText}
|
|
83
|
-
</button>
|
|
84
|
-
</div>
|
|
74
|
+
<div className="gift-note-info bg-gray-50 p-3 rounded">
|
|
75
|
+
<span className="text-sm text-gray-600">
|
|
76
|
+
{translations.informationText}
|
|
77
|
+
</span>
|
|
78
|
+
{note && <p className="mt-2 text-sm">{note}</p>}
|
|
79
|
+
<button
|
|
80
|
+
onClick={onAddNote}
|
|
81
|
+
className="mt-2 text-blue-500 hover:text-blue-700"
|
|
82
|
+
>
|
|
83
|
+
{translations.updateNote}
|
|
84
|
+
</button>
|
|
85
|
+
</div>
|
|
85
86
|
|
|
86
|
-
|
|
87
|
-
<span className="text-sm text-gray-600">
|
|
88
|
-
{translations.informationText}
|
|
89
|
-
</span>
|
|
90
|
-
{note && <p className="mt-2 text-sm">{note}</p>}
|
|
91
|
-
<button
|
|
92
|
-
onClick={onAddNote}
|
|
93
|
-
className="mt-2 text-blue-500 hover:text-blue-700"
|
|
94
|
-
>
|
|
95
|
-
{translations.updateNote}
|
|
96
|
-
</button>
|
|
87
|
+
{hasNote.state && <div className="mt-4">{formContent}</div>}
|
|
97
88
|
</div>
|
|
98
|
-
|
|
99
|
-
|
|
89
|
+
) : (
|
|
90
|
+
<button
|
|
91
|
+
onClick={onAddGiftPack}
|
|
92
|
+
className="w-full p-2 text-center border border-gray-200 hover:bg-gray-50"
|
|
93
|
+
>
|
|
94
|
+
{translations.addGiftPackText}
|
|
95
|
+
</button>
|
|
96
|
+
)}
|
|
97
|
+
</div>
|
|
98
|
+
),
|
|
99
|
+
customGiftNoteFormUIRender: ({
|
|
100
|
+
register,
|
|
101
|
+
errors,
|
|
102
|
+
note,
|
|
103
|
+
textAreaCount,
|
|
104
|
+
onSubmit,
|
|
105
|
+
removeNote,
|
|
106
|
+
handleSubmit,
|
|
107
|
+
translations: formTranslations
|
|
108
|
+
}) => (
|
|
109
|
+
<form onSubmit={handleSubmit(onSubmit)}>
|
|
110
|
+
<textarea
|
|
111
|
+
{...register('message')}
|
|
112
|
+
value={note}
|
|
113
|
+
placeholder={formTranslations.placeholderInput}
|
|
114
|
+
/>
|
|
115
|
+
{errors.message && <span>{errors.message.message}</span>}
|
|
116
|
+
<div className="character-count">
|
|
117
|
+
{textAreaCount}/160 {formTranslations.charactersLength}
|
|
118
|
+
</div>
|
|
119
|
+
<div className="buttons">
|
|
120
|
+
<button type="button" onClick={removeNote}>
|
|
121
|
+
{formTranslations.removeGiftNoteText}
|
|
122
|
+
</button>
|
|
123
|
+
<button type="submit">{formTranslations.save}</button>
|
|
100
124
|
</div>
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
125
|
+
</form>
|
|
126
|
+
)
|
|
127
|
+
}}
|
|
128
|
+
/>
|
|
129
|
+
<div className="flex flex-col w-full border border-solid border-gray-400">
|
|
130
|
+
<div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-4 sm:min-h-15">
|
|
131
|
+
<span className="text-black-800 text-xl font-light sm:text-2xl">
|
|
132
|
+
{t('checkout.summary.title')}
|
|
133
|
+
</span>
|
|
134
|
+
<span className="text-gray-950 text-xs">
|
|
135
|
+
{preOrder.basket.basketitem_set.length}{' '}
|
|
136
|
+
{t('checkout.summary.items').toUpperCase()}
|
|
137
|
+
</span>
|
|
138
|
+
</div>
|
|
139
|
+
<div className="border-b border-solid border-gray-400 max-h-64 overflow-y-auto">
|
|
140
|
+
{preOrder.basket.basketitem_set.map((item, index) => (
|
|
141
|
+
<div
|
|
142
|
+
key={`summary-basketitem-${index}`}
|
|
143
|
+
className="flex flex-row border-b border-solid border-gray-400 py-3 px-4 last:border-b-0 sm:px-5"
|
|
144
|
+
>
|
|
145
|
+
<Link
|
|
146
|
+
href={'#'}
|
|
147
|
+
className={twMerge(
|
|
148
|
+
'min-w-max flex items-center justify-center',
|
|
149
|
+
isMobileApp && 'pointer-events-none'
|
|
150
|
+
)}
|
|
151
|
+
passHref
|
|
105
152
|
>
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
153
|
+
<Image
|
|
154
|
+
src={item.product.productimage_set[0]?.image}
|
|
155
|
+
alt="Checkout Summary Image"
|
|
156
|
+
width={64}
|
|
157
|
+
height={96}
|
|
158
|
+
/>
|
|
159
|
+
</Link>
|
|
160
|
+
<div className="w-full flex flex-wrap justify-between pl-4">
|
|
161
|
+
<div className="flex justify-center flex-col w-1/2">
|
|
162
|
+
<Link
|
|
163
|
+
href={item.product.absolute_url}
|
|
164
|
+
className={twMerge(
|
|
165
|
+
'text-xs text-black-800 transition-all mb-1 hover:text-secondary',
|
|
166
|
+
isMobileApp && 'pointer-events-none'
|
|
167
|
+
)}
|
|
168
|
+
>
|
|
169
|
+
{item.product.name}
|
|
170
|
+
</Link>
|
|
171
|
+
<div className="flex flex-col">
|
|
172
|
+
<div className="flex text-xs text-black-800">
|
|
173
|
+
<span>{t('checkout.summary.quantity')}:</span>
|
|
174
|
+
<span className="ml-1 min-w-max">{item.quantity}</span>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
<div className="flex items-end justify-center flex-col w-1/2">
|
|
179
|
+
{item.product.retail_price !== item.product.price && (
|
|
180
|
+
<div className="text-xs text-black-800 line-through min-w-max sm:text-sm">
|
|
181
|
+
<Price value={item.product.retail_price} />
|
|
182
|
+
</div>
|
|
183
|
+
)}
|
|
184
|
+
<div className="text-xs text-secondary min-w-max sm:text-sm">
|
|
185
|
+
<Price value={item.product.price} />
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
))}
|
|
191
|
+
</div>
|
|
192
|
+
<div className="pt-3">
|
|
193
|
+
<div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
|
|
194
|
+
<span>
|
|
195
|
+
{t('checkout.summary.subtotal')} (
|
|
196
|
+
{preOrder.basket.basketitem_set.length}{' '}
|
|
197
|
+
{t('checkout.summary.items')})
|
|
198
|
+
</span>
|
|
199
|
+
<span>
|
|
200
|
+
<Price value={preOrder?.basket?.total_amount} />
|
|
201
|
+
</span>
|
|
202
|
+
</div>
|
|
203
|
+
<div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
|
|
204
|
+
<span>{t('checkout.summary.shipping')}</span>
|
|
205
|
+
<span>
|
|
206
|
+
<Price value={preOrder?.shipping_amount} />
|
|
207
|
+
</span>
|
|
208
|
+
</div>
|
|
209
|
+
<div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
|
|
210
|
+
<span>{t('checkout.summary.discounts_total')}</span>
|
|
211
|
+
<span>
|
|
212
|
+
<Price
|
|
213
|
+
value={preOrder?.basket?.total_discount_amount}
|
|
214
|
+
useNegative
|
|
215
|
+
/>
|
|
216
|
+
</span>
|
|
109
217
|
</div>
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
{textAreaCount}/160 {formTranslations.charactersLength}
|
|
218
|
+
<div className="flex items-center justify-between w-full text-black-800 px-4 sm:px-5 text-lg border-t border-solid border-gray-400 py-2 mt-3 sm:text-xl sm:py-3">
|
|
219
|
+
<span className="font-light">{t('checkout.summary.total')}</span>
|
|
220
|
+
<span className="min-w-max pl-4">
|
|
221
|
+
<Price value={preOrder?.unpaid_amount} />
|
|
222
|
+
</span>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
{currentStep === CheckoutStep.Payment && (
|
|
227
|
+
<div className="flex flex-col w-full border border-solid border-gray-400 mt-4">
|
|
228
|
+
<div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-3 sm:min-h-15">
|
|
229
|
+
<div className="text-black-800 text-xl font-light sm:text-2xl">
|
|
230
|
+
{t('checkout.summary.delivery_info')}
|
|
231
|
+
</div>
|
|
232
|
+
<div
|
|
233
|
+
className="text-xs text-black-800 italic cursor-pointer underline transition-all hover:text-secondary"
|
|
234
|
+
onClick={() => dispatch(setCurrentStep(CheckoutStep.Shipping))}
|
|
235
|
+
>
|
|
236
|
+
{t('checkout.summary.change')}
|
|
130
237
|
</div>
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
238
|
+
</div>
|
|
239
|
+
<div className="flex flex-col py-4 px-4 text-black-800 text-xs sm:px-5">
|
|
240
|
+
<div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
|
|
241
|
+
<Trans
|
|
242
|
+
i18nKey="checkout.summary.info"
|
|
243
|
+
components={{
|
|
244
|
+
ShippingAddress: (
|
|
245
|
+
<Text title={preOrder.shipping_address?.title} />
|
|
246
|
+
),
|
|
247
|
+
ShippingOption: (
|
|
248
|
+
<Text title={preOrder.shipping_option?.name} />
|
|
249
|
+
)
|
|
250
|
+
}}
|
|
251
|
+
/>
|
|
136
252
|
</div>
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
253
|
+
<div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
|
|
254
|
+
{preOrder.shipping_address?.line}{' '}
|
|
255
|
+
{preOrder.shipping_address?.postcode}{' '}
|
|
256
|
+
{preOrder.shipping_address?.district && (
|
|
257
|
+
<>{preOrder.shipping_address?.district.name} / </>
|
|
258
|
+
)}
|
|
259
|
+
{preOrder.shipping_address?.township && (
|
|
260
|
+
<>{preOrder.shipping_address?.township.name} / </>
|
|
261
|
+
)}
|
|
262
|
+
{preOrder.shipping_address?.city?.name}
|
|
263
|
+
</div>
|
|
264
|
+
</div>
|
|
265
|
+
</div>
|
|
266
|
+
)}
|
|
141
267
|
```
|