@akinon/pz-click-collect 1.92.0-rc.9 → 1.92.0-snapshot-ZERO-3449-20250618101111

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 +2 -37
  2. package/README.md +129 -126
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,43 +1,8 @@
1
1
  # @akinon/pz-click-collect
2
2
 
3
- ## 1.92.0-rc.9
3
+ ## 1.92.0-snapshot-ZERO-3449-20250618101111
4
4
 
5
- ## 1.92.0-rc.8
6
-
7
- ## 1.92.0-rc.7
8
-
9
- ## 1.91.0-rc.6
10
-
11
- ## 1.91.0-rc.5
12
-
13
- ## 1.91.0-rc.4
14
-
15
- ### Minor Changes
16
-
17
- - 7eb51ca: ZERO-3424 :Update package versions
18
- - b16a370: ZERO-3403: Enhance README.md with detailed Click & Collect component documentation and usage examples
19
-
20
- ## 1.91.0-rc.3
21
-
22
- ### Minor Changes
23
-
24
- - 64699d3f: ZERO-2761: Fix invalid import for plugin module
25
- - e974d8e8: ZERO-3406: Fix rc build
26
- - 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
27
- - 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
28
-
29
- ## 1.91.0-rc.2
30
-
31
- ## 1.91.0-rc.1
32
-
33
- ## 1.91.0-rc.0
34
-
35
- ### Minor Changes
36
-
37
- - 64699d3f: ZERO-2761: Fix invalid import for plugin module
38
- - e974d8e: ZERO-3406: Fix rc build
39
- - 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
40
- - 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
5
+ ## 1.91.0
41
6
 
42
7
  ## 1.90.0
43
8
 
package/README.md CHANGED
@@ -10,105 +10,93 @@ 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
+
13
19
  # Click & Collect Component
14
20
 
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.
21
+ The Click & Collect component allows customers to select retail stores for pickup instead of delivery to a shipping address.
16
22
 
17
- ### Features
23
+ ## Features
18
24
 
19
25
  - Toggle between delivery to address and retail store pickup
20
26
  - City and store selection
21
27
  - Fully customizable UI through renderer props
22
28
 
23
- ## Props
24
-
25
- ### ClickCollectProps
26
-
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. |
29
+ ## Basic Usage
32
30
 
33
- ### ClickCollectTranslationsProps
31
+ ```jsx
32
+ import { ClickCollect } from '@akinon/pz-click-collect';
34
33
 
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. |
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
+ ```
39
43
 
40
- ### Customization
44
+ ## Customization
41
45
 
42
46
  The Click & Collect component is fully customizable through the `renderer` prop. You can override any part of the UI while keeping the core functionality.
43
47
 
44
- #### Renderer Props
48
+ ### Renderer Props
45
49
 
46
50
  The `renderer` prop accepts an object with the following properties:
47
51
 
48
- ```javascript
52
+ ```typescript
49
53
  interface ClickCollectRendererProps {
50
54
  renderContainer?: (props: {
51
- children: React.ReactNode,
52
- isActive: boolean,
53
- handleActive: () => void,
54
- handleDeactivate: () => void
55
+ children: React.ReactNode;
56
+ isActive: boolean;
57
+ handleActive: () => void;
58
+ handleDeactivate: () => void;
55
59
  }) => React.ReactNode;
56
60
 
57
61
  renderInactiveState?: (props: {
58
- translations: ClickCollectTranslationsProps
62
+ translations: ClickCollectTranslationsProps;
59
63
  }) => React.ReactNode;
60
64
 
61
65
  renderActiveState?: (props: {
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
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;
69
73
  }) => React.ReactNode;
70
74
 
71
75
  renderCloseButton?: (props: {
72
- handleDeactivate: () => void
76
+ handleDeactivate: () => void;
73
77
  }) => React.ReactNode;
74
78
 
75
79
  renderLoader?: () => React.ReactNode;
76
80
  }
77
81
  ```
78
82
 
79
- ### Usage Examples
83
+ ### Example with Custom Styling
80
84
 
81
- #### Default Usage
85
+ Here's an example of how to customize the component with branded styling:
82
86
 
83
- ```javascript
87
+ ```jsx
84
88
  import { ClickCollect } from '@akinon/pz-click-collect';
85
89
 
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={`
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={`
112
100
  relative w-full min-h-[8rem] rounded-lg
113
101
  ${
114
102
  isActive
@@ -117,79 +105,94 @@ const customRenderer = {
117
105
  }
118
106
  p-6 transition-all duration-300
119
107
  `}
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"
138
108
  >
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...
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
+ );
151
151
  };
152
+ ```
152
153
 
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
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'
162
164
  }}
163
- />;
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
+ )
178
+ }}
179
+ />
164
180
  ```
165
181
 
166
- #### Partial Customization
182
+ ## Translation Support
167
183
 
168
- You can override only specific parts of the UI while keeping the default styling for the rest:
184
+ The component accepts a `translations` prop for localization:
169
185
 
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
- }}
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
193
192
  }}
194
193
  />
195
194
  ```
195
+
196
+ ```
197
+
198
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/pz-click-collect",
3
- "version": "1.92.0-rc.9",
3
+ "version": "1.92.0-snapshot-ZERO-3449-20250618101111",
4
4
  "main": "./src/index.tsx",
5
5
  "module": "./src/index.tsx",
6
6
  "license": "MIT",