@akinon/pz-click-collect 1.91.0 → 1.92.0-rc.7

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 +34 -1
  2. package/README.md +126 -129
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,6 +1,39 @@
1
1
  # @akinon/pz-click-collect
2
2
 
3
- ## 1.91.0
3
+ ## 1.92.0-rc.7
4
+
5
+ ## 1.91.0-rc.6
6
+
7
+ ## 1.91.0-rc.5
8
+
9
+ ## 1.91.0-rc.4
10
+
11
+ ### Minor Changes
12
+
13
+ - 7eb51ca: ZERO-3424 :Update package versions
14
+ - b16a370: ZERO-3403: Enhance README.md with detailed Click & Collect component documentation and usage examples
15
+
16
+ ## 1.91.0-rc.3
17
+
18
+ ### Minor Changes
19
+
20
+ - 64699d3f: ZERO-2761: Fix invalid import for plugin module
21
+ - e974d8e8: ZERO-3406: Fix rc build
22
+ - 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
23
+ - 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
24
+
25
+ ## 1.91.0-rc.2
26
+
27
+ ## 1.91.0-rc.1
28
+
29
+ ## 1.91.0-rc.0
30
+
31
+ ### Minor Changes
32
+
33
+ - 64699d3f: ZERO-2761: Fix invalid import for plugin module
34
+ - e974d8e: ZERO-3406: Fix rc build
35
+ - 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
36
+ - 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
4
37
 
5
38
  ## 1.90.0
6
39
 
package/README.md CHANGED
@@ -10,93 +10,105 @@ npx @akinon/projectzero@latest --plugins
10
10
 
11
11
  ```
12
12
 
13
- ### Props
14
-
15
- | Properties | Type | Description |
16
- | ---------------- | -------- | -------------------------- |
17
- | addressTypeParam | `string` | Address Type Request Param |
18
-
19
13
  # Click & Collect Component
20
14
 
21
- The Click & Collect component allows customers to select retail stores for pickup instead of delivery to a shipping address.
15
+ The ClickCollect component enables customers to choose retail store pickup instead of standard shipping. It integrates deeply with the checkout flow and allows complete UI customization.
22
16
 
23
- ## Features
17
+ ### Features
24
18
 
25
19
  - Toggle between delivery to address and retail store pickup
26
20
  - City and store selection
27
21
  - Fully customizable UI through renderer props
28
22
 
29
- ## Basic Usage
23
+ ## Props
30
24
 
31
- ```jsx
32
- import { ClickCollect } from '@akinon/pz-click-collect';
25
+ ### ClickCollectProps
33
26
 
34
- // Basic usage with default styling
35
- <ClickCollect
36
- addressTypeParam="shippingAddressPk"
37
- translations={{
38
- deliveryFromTheStore: 'DELIVERY FROM THE STORE',
39
- deliveryStore: 'Delivery Store'
40
- }}
41
- />;
42
- ```
27
+ | Properties | Type | Required | Description |
28
+ | --- | --- | --- | --- |
29
+ | addressTypeParam | `string` | Yes | Address Type Request Param |
30
+ | translations | `ClickCollectTranslationsProps` | Yes | Object containing localized strings. |
31
+ | renderer | `ClickCollectRendererProps` | No | Optional UI overrides for component sections. |
32
+
33
+ ### ClickCollectTranslationsProps
34
+
35
+ | Properties | Type | Description |
36
+ | --- | --- | --- |
37
+ | deliveryFromTheStore | `string` | Text for the inactive state label. |
38
+ | deliveryStore | `string` | Label text for selecting a store during the active state. |
43
39
 
44
- ## Customization
40
+ ### Customization
45
41
 
46
42
  The Click & Collect component is fully customizable through the `renderer` prop. You can override any part of the UI while keeping the core functionality.
47
43
 
48
- ### Renderer Props
44
+ #### Renderer Props
49
45
 
50
46
  The `renderer` prop accepts an object with the following properties:
51
47
 
52
- ```typescript
48
+ ```javascript
53
49
  interface ClickCollectRendererProps {
54
50
  renderContainer?: (props: {
55
- children: React.ReactNode;
56
- isActive: boolean;
57
- handleActive: () => void;
58
- handleDeactivate: () => void;
51
+ children: React.ReactNode,
52
+ isActive: boolean,
53
+ handleActive: () => void,
54
+ handleDeactivate: () => void
59
55
  }) => React.ReactNode;
60
56
 
61
57
  renderInactiveState?: (props: {
62
- translations: ClickCollectTranslationsProps;
58
+ translations: ClickCollectTranslationsProps
63
59
  }) => React.ReactNode;
64
60
 
65
61
  renderActiveState?: (props: {
66
- translations: ClickCollectTranslationsProps;
67
- cities: any[];
68
- stores: any[];
69
- selectedCity: any;
70
- handleCityChange: (e: ChangeEvent<HTMLSelectElement>) => void;
71
- handleStoreChange: (e: ChangeEvent<HTMLSelectElement>) => void;
72
- handleDeactivate: () => void;
62
+ translations: ClickCollectTranslationsProps,
63
+ cities: any[],
64
+ stores: any[],
65
+ selectedCity: any,
66
+ handleCityChange: (e: ChangeEvent<HTMLSelectElement>) => void,
67
+ handleStoreChange: (e: ChangeEvent<HTMLSelectElement>) => void,
68
+ handleDeactivate: () => void
73
69
  }) => React.ReactNode;
74
70
 
75
71
  renderCloseButton?: (props: {
76
- handleDeactivate: () => void;
72
+ handleDeactivate: () => void
77
73
  }) => React.ReactNode;
78
74
 
79
75
  renderLoader?: () => React.ReactNode;
80
76
  }
81
77
  ```
82
78
 
83
- ### Example with Custom Styling
79
+ ### Usage Examples
84
80
 
85
- Here's an example of how to customize the component with branded styling:
81
+ #### Default Usage
86
82
 
87
- ```jsx
83
+ ```javascript
88
84
  import { ClickCollect } from '@akinon/pz-click-collect';
89
85
 
90
- const CustomClickCollect = () => {
91
- const customRenderer = {
92
- // Override the container
93
- renderContainer: ({ children, isActive, handleActive }) => (
94
- <div
95
- role={!isActive ? 'button' : 'div'}
96
- onClick={() => {
97
- !isActive && handleActive();
98
- }}
99
- className={`
86
+ <PluginModule
87
+ component={Component.ClickCollect}
88
+ props={{
89
+ addressTypeParam: addressType.requestParam,
90
+ translations: {
91
+ deliveryFromTheStore: 'DELIVERY FROM THE STORE',
92
+ deliveryStore: 'Delivery Store'
93
+ }
94
+ }}
95
+ />;
96
+ ```
97
+
98
+ ### Custom UI Usage
99
+
100
+ Here's an example of how to customize the component with branded styling:
101
+
102
+ ```javascript
103
+ const customRenderer = {
104
+ // Override the container
105
+ renderContainer: ({ children, isActive, handleActive }) => (
106
+ <div
107
+ role={!isActive ? 'button' : 'div'}
108
+ onClick={() => {
109
+ !isActive && handleActive();
110
+ }}
111
+ className={`
100
112
  relative w-full min-h-[8rem] rounded-lg
101
113
  ${
102
114
  isActive
@@ -105,94 +117,79 @@ const CustomClickCollect = () => {
105
117
  }
106
118
  p-6 transition-all duration-300
107
119
  `}
120
+ >
121
+ {children}
122
+ </div>
123
+ ),
124
+
125
+ // Override the inactive state display
126
+ renderInactiveState: ({ translations }) => (
127
+ <div className="text-sm flex flex-col justify-center items-center h-full gap-y-3 text-brand-primary">
128
+ <svg
129
+ xmlns="http://www.w3.org/2000/svg"
130
+ width="36"
131
+ height="36"
132
+ viewBox="0 0 24 24"
133
+ fill="none"
134
+ stroke="currentColor"
135
+ strokeWidth="2"
136
+ strokeLinecap="round"
137
+ strokeLinejoin="round"
108
138
  >
109
- {children}
110
- </div>
111
- ),
112
-
113
- // Override the inactive state display
114
- renderInactiveState: ({ translations }) => (
115
- <div className="text-sm flex flex-col justify-center items-center h-full gap-y-3 text-brand-primary">
116
- <svg
117
- xmlns="http://www.w3.org/2000/svg"
118
- width="36"
119
- height="36"
120
- viewBox="0 0 24 24"
121
- fill="none"
122
- stroke="currentColor"
123
- strokeWidth="2"
124
- strokeLinecap="round"
125
- strokeLinejoin="round"
126
- >
127
- <path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z" />
128
- <path d="M3 9V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4" />
129
- <path d="M9 13v5" />
130
- <path d="M15 13v5" />
131
- </svg>
132
- <span className="font-medium tracking-wide">
133
- {translations.deliveryFromTheStore}
134
- </span>
135
- </div>
136
- )
137
-
138
- // Custom styling for other parts...
139
- };
140
-
141
- return (
142
- <ClickCollect
143
- addressTypeParam="shippingAddressPk"
144
- translations={{
145
- deliveryFromTheStore: 'In-Store Pickup',
146
- deliveryStore: 'Select Your Store'
147
- }}
148
- renderer={customRenderer}
149
- />
150
- );
139
+ <path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z" />
140
+ <path d="M3 9V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4" />
141
+ <path d="M9 13v5" />
142
+ <path d="M15 13v5" />
143
+ </svg>
144
+ <span className="font-medium tracking-wide">
145
+ {translations.deliveryFromTheStore}
146
+ </span>
147
+ </div>
148
+ )
149
+
150
+ // Custom styling for other parts...
151
151
  };
152
- ```
153
152
 
154
- ### Partial Customization
155
-
156
- You can override only specific parts of the UI while keeping the default styling for the rest:
157
-
158
- ```jsx
159
- <ClickCollect
160
- addressTypeParam="shippingAddressPk"
161
- translations={{
162
- deliveryFromTheStore: 'DELIVERY FROM THE STORE',
163
- deliveryStore: 'Delivery Store'
164
- }}
165
- renderer={{
166
- // Override only the active state
167
- renderActiveState: ({
168
- translations,
169
- cities,
170
- stores,
171
- handleCityChange,
172
- handleStoreChange
173
- }) => (
174
- <div className="custom-active-state">
175
- {/* Your custom UI for the active state */}
176
- </div>
177
- )
153
+ <PluginModule
154
+ component={Component.ClickCollect}
155
+ props={{
156
+ addressTypeParam: 'shippingAddressPk',
157
+ translations: {
158
+ deliveryFromTheStore: 'Pick Up In-Store',
159
+ deliveryStore: 'Choose a Store'
160
+ },
161
+ renderer: customRenderer
178
162
  }}
179
- />
163
+ />;
180
164
  ```
181
165
 
182
- ## Translation Support
166
+ #### Partial Customization
183
167
 
184
- The component accepts a `translations` prop for localization:
168
+ You can override only specific parts of the UI while keeping the default styling for the rest:
185
169
 
186
- ```jsx
187
- <ClickCollect
188
- addressTypeParam="shippingAddressPk"
189
- translations={{
190
- deliveryFromTheStore: 'Mağazadan Teslim Al', // Turkish translation
191
- deliveryStore: 'Teslim Alınacak Mağaza' // Turkish translation
170
+ ```javascript
171
+ <PluginModule
172
+ component={Component.ClickCollect}
173
+ props={{
174
+ addressTypeParam: "shippingAddressPk",
175
+ translations: {
176
+ deliveryFromTheStore: 'Pick Up In-Store',
177
+ deliveryStore: 'Choose a Store'
178
+ },
179
+ renderer={{
180
+ // Override only the active state
181
+ renderActiveState: ({
182
+ translations,
183
+ cities,
184
+ stores,
185
+ handleCityChange,
186
+ handleStoreChange
187
+ }) => (
188
+ <div className="custom-active-state">
189
+ {/* Your custom UI for the active state */}
190
+ </div>
191
+ )
192
+ }}
192
193
  }}
193
194
  />
194
195
  ```
195
-
196
- ```
197
-
198
- ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/pz-click-collect",
3
- "version": "1.91.0",
3
+ "version": "1.92.0-rc.7",
4
4
  "main": "./src/index.tsx",
5
5
  "module": "./src/index.tsx",
6
6
  "license": "MIT",