@akinon/pz-checkout-gift-pack 1.102.0 → 1.103.0-rc.80

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +105 -231
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @akinon/pz-checkout-gift-pack
2
2
 
3
+ ## 1.103.0-rc.80
4
+
5
+ ### Minor Changes
6
+
7
+ - d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
8
+ - 16aff543: ZERO-3431: Add test script for redirect utility in package.json
9
+ - 64699d3ff: ZERO-2761: Fix invalid import for plugin module
10
+ - e974d8e8: ZERO-3406: Fix rc build
11
+ - 7eb51ca9: ZERO-3424 :Update package versions
12
+ - 7727ae55f: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
13
+ - 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
14
+ - 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
15
+ - 8bc82f02: ZERO-3405: Update Readme
16
+
3
17
  ## 1.102.0
4
18
 
5
19
  ## 1.101.0
package/README.md CHANGED
@@ -22,246 +22,120 @@ 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
- ### Customized sample code
25
+ ### Default Usage
26
26
 
27
27
  ```js
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>
28
+ import PluginModule, { Component } from '@akinon/next/components/plugin-module';
73
29
 
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>
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
+ ```
86
37
 
87
- {hasNote.state && <div className="mt-4">{formContent}</div>}
88
- </div>
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>
124
- </div>
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
152
- >
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
- )}
38
+ ### Customized sample code
39
+
40
+ ```js
41
+ import PluginModule, { Component } from '@akinon/next/components/plugin-module';
42
+
43
+ <PluginModule
44
+ component={Component.CheckoutGiftPack}
45
+ props={{
46
+ className: 'flex flex-col w-full mb-4 border border-solid border-gray-400',
47
+ translations: {
48
+ addGiftPackText: 'Add Gift Pack',
49
+ giftPackAdded: 'Gift Pack Added',
50
+ removeGiftPackText: 'Remove Gift Pack',
51
+ informationText: 'This order will be gift packaged*',
52
+ updateNote: 'Update Note',
53
+ removeGiftNoteText: 'Remove Gift Note',
54
+ charactersLength: 'characters left',
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"
168
81
  >
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>
82
+ {translations.removeGiftPackText}
83
+ </button>
177
84
  </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>
85
+
86
+ <div className="gift-note-info bg-gray-50 p-3 rounded">
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>
187
97
  </div>
98
+
99
+ {hasNote.state && <div className="mt-4">{formContent}</div>}
188
100
  </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>
217
- </div>
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')}
237
- </div>
101
+ ) : (
102
+ <button
103
+ onClick={onAddGiftPack}
104
+ className="w-full p-2 text-center border border-gray-200 hover:bg-gray-50"
105
+ >
106
+ {translations.addGiftPackText}
107
+ </button>
108
+ )}
238
109
  </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
- />
110
+ ),
111
+ customGiftNoteFormUIRender: ({
112
+ register,
113
+ errors,
114
+ note,
115
+ textAreaCount,
116
+ onSubmit,
117
+ removeNote,
118
+ handleSubmit,
119
+ translations: formTranslations
120
+ }) => (
121
+ <form onSubmit={handleSubmit(onSubmit)}>
122
+ <textarea
123
+ {...register('message')}
124
+ value={note}
125
+ placeholder={formTranslations.placeholderInput}
126
+ />
127
+ {errors.message && <span>{errors.message.message}</span>}
128
+ <div className="character-count">
129
+ {textAreaCount}/160 {formTranslations.charactersLength}
252
130
  </div>
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}
131
+ <div className="buttons">
132
+ <button type="button" onClick={removeNote}>
133
+ {formTranslations.removeGiftNoteText}
134
+ </button>
135
+ <button type="submit">{formTranslations.save}</button>
263
136
  </div>
264
- </div>
265
- </div>
266
- )}
137
+ </form>
138
+ )
139
+ }}
140
+ />;
267
141
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/pz-checkout-gift-pack",
3
- "version": "1.102.0",
3
+ "version": "1.103.0-rc.80",
4
4
  "license": "MIT",
5
5
  "main": "src/index.tsx",
6
6
  "peerDependencies": {