@whatmore-repo/whatmore-reactnative-sdk 1.0.10 → 1.0.12

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 (36) hide show
  1. package/commands.txt +45 -45
  2. package/index.js +31 -31
  3. package/package.json +29 -29
  4. package/pre-integration-steps.txt +2 -2
  5. package/src/api/cart-commands/CartCommands.js +26 -26
  6. package/src/api/navigation-commands/NavigationCommands.js +16 -16
  7. package/src/api/partners/PartnerUtils.js +10 -10
  8. package/src/api/partners/appbrew/AppbrewCommands.js +26 -26
  9. package/src/api/product-details-commands/ProductDetailsCommands.js +389 -389
  10. package/src/api/shopify-commands/ShopifyCommands.js +28 -28
  11. package/src/api/whatmore-backend/WhatmoreMetricCommands.js +159 -159
  12. package/src/components/EventClickComponent.js +30 -30
  13. package/src/components/EventShoppingOverlay.js +74 -74
  14. package/src/components/EventShoppingView.js +31 -31
  15. package/src/components/EventsVerticalSwipeView.js +59 -59
  16. package/src/components/EventsVerticalSwipeViewNoModal.js +51 -51
  17. package/src/components/WhatmoreRootComponent.js +88 -88
  18. package/src/components/commons/AppMuteUnmuteIcon.js +35 -35
  19. package/src/components/cta-buttons/AddToCartButton.jsx +345 -345
  20. package/src/components/product-tiles/ProductPriceBadge.js +51 -51
  21. package/src/components/product-tiles/ProductTileV1.js +204 -204
  22. package/src/components/product-tiles/SelectVariantComponent.js +116 -116
  23. package/src/components/video-player/AppVideoPlayer.js +25 -25
  24. package/src/constants/AppGlobalVars.js +12 -12
  25. package/src/globals/useAppState_APP.js +17 -17
  26. package/src/hooks/useAddToCartStates.js +194 -194
  27. package/src/icons/icon-components/CartIcon.jsx +26 -26
  28. package/src/icons/icon-components/LoadingIcon.jsx +17 -17
  29. package/src/icons/icon-components/MuteIcon.jsx +22 -22
  30. package/src/icons/icon-components/PlusIcon.jsx +26 -26
  31. package/src/icons/icon-components/UnmuteIcon.jsx +22 -22
  32. package/src/icons/svg-utils.txt +6 -6
  33. package/src/utils/ColorUtils.js +39 -39
  34. package/src/utils/EventSanityUtils.js +21 -21
  35. package/src/utils/PriceUtils.js +27 -27
  36. package/src/utils/ProductUtils.js +5 -5
package/src/components/cta-buttons/AddToCartButton.jsx CHANGED
@@ -1,346 +1,346 @@
1
-
2
- import { useState } from "react";
3
- import { getGlobalState } from "../../globals/useAppState_APP";
4
- import { Text, TouchableOpacity, View } from "react-native";
5
- import { shadeColorHex } from "../../utils/ColorUtils";
6
- import * as Animatable from 'react-native-animatable';
7
- import LoadingIcon from "../../icons/icon-components/LoadingIcon";
8
- import CartIcon from "../../icons/icon-components/CartIcon";
9
- import PlusIcon from "../../icons/icon-components/PlusIcon";
10
-
11
- function LabelledButton(props){
12
- const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
13
- const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
14
- const whatmoreShopId = getGlobalState('whatmoreShopId');
15
-
16
- const event = props.event;
17
- const product = props.product;
18
- const BASE_FONT_SIZE = props.baseFontSize ?? 10;
19
- const onClick = props.onClick;
20
- const width = props.width;
21
- const height = props.height;
22
- const title = props.title;
23
- const showInProgressIcon = props.showInProgressIcon;
24
-
25
- const BOX_PADDING = 2;
26
-
27
- return (
28
- <TouchableOpacity
29
- style={{
30
- width: width, height: height,
31
- padding: BOX_PADDING,
32
- backgroundColor: (showInProgressIcon ? shadeColorHex(whatmorePrimaryColor, 8) : whatmorePrimaryColor)
33
- }}
34
- onPress={(e)=>{
35
- e.stopPropagation();
36
- onClick();
37
- }}
38
- >
39
- <View
40
- style={{
41
- width: '100%', height: height,
42
- flexDirection: 'row', justifyContent: 'center', alignItems: 'center',
43
- paddingVertical: 4
44
- }}
45
- >
46
- {
47
- title
48
- ?
49
- <Text
50
- style={{
51
- fontSize: BASE_FONT_SIZE * 4,
52
- fontFamily: whatmorePrimaryFont,
53
- fontWeight: 'bold',
54
- color: 'white'
55
- }}
56
- >
57
- &nbsp;{title}&nbsp;
58
- </Text>
59
- :
60
- <></>
61
- }
62
- {
63
- showInProgressIcon
64
- ?
65
- <Animatable.View
66
- animation="rotate"
67
- duration={400} iterationCount={'infinite'}
68
- easing="linear"
69
- style={{
70
- height: 'auto', width: 'auto'
71
- }}
72
- >
73
- <LoadingIcon
74
- color={"#F5F5F5"}
75
- size={BASE_FONT_SIZE * 8}
76
- />
77
- </Animatable.View>
78
- :
79
- <></>
80
- }
81
- </View>
82
- </TouchableOpacity>
83
- );
84
- }
85
-
86
-
87
-
88
- function AddToCartInitialButton(props){
89
- const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
90
- const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
91
- const whatmoreShopId = getGlobalState('whatmoreShopId');
92
-
93
- const event = props.event;
94
- const product = props.product;
95
- const BASE_FONT_SIZE = props.baseFontSize ?? 10;
96
- const onClick = props.onClick;
97
- const width = props.width;
98
- const height = props.height;
99
-
100
- const BOX_PADDING = 2;
101
-
102
- return (
103
- <TouchableOpacity
104
- style={{
105
- width: '100%',
106
- height: height,
107
- padding: BOX_PADDING,
108
- backgroundColor: whatmorePrimaryColor
109
- }}
110
- onPress={(e) => {
111
- e.stopPropagation();
112
- onClick();
113
- }}
114
- >
115
- <View
116
- style={{
117
- width: '100%',
118
- height: 'auto',
119
- alignItems: 'center',
120
- justifyContent: 'center',
121
- paddingVertical: 5
122
- }}
123
- >
124
- <Text
125
- style={{
126
- fontSize: 26,
127
- fontWeight: 'bold',
128
- fontFamily: whatmorePrimaryFont,
129
- color: 'white'
130
- }}
131
- >
132
- &nbsp;{"ADD TO CART"}&nbsp;
133
- </Text>
134
- </View>
135
- </TouchableOpacity>
136
- );
137
- }
138
-
139
- function SoldOutButton(props){
140
- const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
141
- const whatmoreShopId = getGlobalState('whatmoreShopId');
142
-
143
- const event = props.event;
144
- const product = props.product;
145
- const BASE_FONT_SIZE = props.baseFontSize ?? 10;
146
- const width = props.width;
147
- const height = props.height;
148
-
149
- const BOX_PADDING = 2;
150
-
151
- return (
152
- <TouchableOpacity
153
- style={{
154
- width: width, height: height,
155
- padding: BOX_PADDING, backgroundColor: 'white',
156
- borderColor: 'gray', borderWidth: 1
157
- }}
158
- onPress={(e)=>{
159
- e.stopPropagation();
160
- }}
161
- >
162
- <View
163
- style={{
164
- width: '100%', height: height,
165
- flexDirection: 'row', justifyContent: 'center', alignItems: 'center',
166
- paddingVertical: 4, paddingHorizontal: 5
167
- }}
168
- >
169
- <Text
170
- style={{
171
- fontSize: BASE_FONT_SIZE * 4,
172
- fontWeight: 'bold',
173
- fontFamily: whatmorePrimaryFont,
174
- color: 'gray'
175
- }}
176
- >
177
- &nbsp;{' Sold Out '}&nbsp;
178
- </Text>
179
- </View>
180
- </TouchableOpacity>
181
- );
182
- }
183
-
184
- function AddedToCartButton(props){
185
- const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
186
- const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
187
- const whatmoreShopId = getGlobalState('whatmoreShopId');
188
-
189
- const event = props.event;
190
- const product = props.product;
191
- const BASE_FONT_SIZE = props.baseFontSize ?? 10;
192
- const onClick = props.onClick;
193
- const cartCount = props.cartCount;
194
- const width = props.width;
195
- const height = props.height;
196
- const onCartIconClick = props.onCartIconClick;
197
-
198
- const BOX_PADDING = 2;
199
-
200
- return (
201
- <TouchableOpacity
202
- style={{
203
- width: width, height: height,
204
- padding: BOX_PADDING,
205
- backgroundColor: 'white', borderColor: whatmorePrimaryColor, borderWidth: 1
206
- }}
207
- onPress={(e)=>{
208
- e.stopPropagation();
209
- }}
210
- >
211
- <View
212
- style={{
213
- width: '100%', height: height,
214
- flexDirection: 'row', justifyContent: 'center', alignItems: 'center',
215
- paddingLeft: 4, paddingRight: 4,
216
- }}
217
- >
218
- <TouchableOpacity
219
- onPress={()=>{onCartIconClick();}}
220
- >
221
- <CartIcon
222
- color={whatmorePrimaryColor}
223
- size={BASE_FONT_SIZE * 6}
224
- />
225
- </TouchableOpacity>
226
-
227
- <Animatable.Text
228
- animation="bounceInUp"
229
- duration={500} iterationCount={1}
230
- style={{
231
- fontSize: BASE_FONT_SIZE * 4,
232
- fontWeight: 'bold',
233
- fontFamily: whatmorePrimaryFont,
234
- color: whatmorePrimaryColor,
235
- marginHorizontal: 20
236
- }}
237
- >
238
- {cartCount}
239
- </Animatable.Text >
240
-
241
- <TouchableOpacity
242
- onPress={(e)=>{
243
- e.stopPropagation();
244
- onClick();
245
- }}
246
- >
247
- <PlusIcon
248
- color={whatmorePrimaryColor}
249
- size={BASE_FONT_SIZE * 6}
250
- />
251
- </TouchableOpacity>
252
- </View>
253
- </TouchableOpacity>
254
- );
255
- }
256
-
257
- function AddToCartButton(props){
258
- const whatmoreShopId = getGlobalState('whatmoreShopId');
259
-
260
- const event = props.event;
261
- const product = props.product;
262
- const BASE_FONT_SIZE = props.baseFontSize ?? 10;
263
- const showAddedToCart = props.showAddedToCart ?? true;
264
- const cartState = props.cartState;
265
- const cartCount = props.cartCount;
266
- const onClickAtc = props.onClickAtc;
267
- const onCartIconClick = props.onCartIconClick;
268
-
269
- function _handleAddToCartClick() {
270
- onClickAtc();
271
- }
272
-
273
- const width = props.width ?? '100%';
274
- const height = props.height ?? 'auto';
275
-
276
- if(cartState == "errored"){
277
- return (
278
- <Animatable.View
279
- animation="fadeIn"
280
- duration={500} iterationCount={1}
281
- easing="ease-in-out"
282
- style={{
283
- height: height, width: width
284
- }}
285
- >
286
- <SoldOutButton
287
- event={event} product={product} baseFontSize={BASE_FONT_SIZE}
288
- width={width} height={height}
289
- />
290
- </Animatable.View>
291
- );
292
- }
293
-
294
- if(cartState == 'init'){
295
- if(cartCount == 0){
296
- return(
297
- <AddToCartInitialButton
298
- onClick={_handleAddToCartClick}
299
- event={event} product={product} baseFontSize={BASE_FONT_SIZE}
300
- width={width} height={height}
301
- />
302
- );
303
- }else{
304
- if(showAddedToCart){
305
- return (
306
- <Animatable.View
307
- animation="fadeIn"
308
- duration={500} iterationCount={1}
309
- easing="ease-in-out"
310
- style={{
311
- height: height, width: width
312
- }}
313
- >
314
- <AddedToCartButton
315
- onClick={_handleAddToCartClick}
316
- event={event} product={product} baseFontSize={BASE_FONT_SIZE}
317
- cartCount={cartCount}
318
- width={width} height={height}
319
- onCartIconClick={onCartIconClick}
320
- />
321
- </Animatable.View>
322
- );
323
- }else{
324
- return(
325
- <AddToCartInitialButton
326
- onClick={_handleAddToCartClick}
327
- event={event} product={product} baseFontSize={BASE_FONT_SIZE}
328
- width={width} height={height}
329
- />
330
- );
331
- }
332
- }
333
- }
334
-
335
- return(
336
- <LabelledButton
337
- onClick={_handleAddToCartClick}
338
- event={event} product={product} baseFontSize={BASE_FONT_SIZE}
339
- width={width} height={height}
340
- title={cartState == "awaitingVariantSelection" ? "Done" : ""}
341
- showInProgressIcon={cartState == "atcApiCallInProgress" || cartState == "productVariantDetailsApiCallInProgress"}
342
- />
343
- );
344
- }
345
-
1
+
2
+ import { useState } from "react";
3
+ import { getGlobalState } from "../../globals/useAppState_APP";
4
+ import { Text, TouchableOpacity, View } from "react-native";
5
+ import { shadeColorHex } from "../../utils/ColorUtils";
6
+ import * as Animatable from 'react-native-animatable';
7
+ import LoadingIcon from "../../icons/icon-components/LoadingIcon";
8
+ import CartIcon from "../../icons/icon-components/CartIcon";
9
+ import PlusIcon from "../../icons/icon-components/PlusIcon";
10
+
11
+ function LabelledButton(props){
12
+ const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
13
+ const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
14
+ const whatmoreShopId = getGlobalState('whatmoreShopId');
15
+
16
+ const event = props.event;
17
+ const product = props.product;
18
+ const BASE_FONT_SIZE = props.baseFontSize ?? 10;
19
+ const onClick = props.onClick;
20
+ const width = props.width;
21
+ const height = props.height;
22
+ const title = props.title;
23
+ const showInProgressIcon = props.showInProgressIcon;
24
+
25
+ const BOX_PADDING = 2;
26
+
27
+ return (
28
+ <TouchableOpacity
29
+ style={{
30
+ width: width, height: height,
31
+ padding: BOX_PADDING,
32
+ backgroundColor: (showInProgressIcon ? shadeColorHex(whatmorePrimaryColor, 8) : whatmorePrimaryColor)
33
+ }}
34
+ onPress={(e)=>{
35
+ e.stopPropagation();
36
+ onClick();
37
+ }}
38
+ >
39
+ <View
40
+ style={{
41
+ width: '100%', height: height,
42
+ flexDirection: 'row', justifyContent: 'center', alignItems: 'center',
43
+ paddingVertical: 4
44
+ }}
45
+ >
46
+ {
47
+ title
48
+ ?
49
+ <Text
50
+ style={{
51
+ fontSize: BASE_FONT_SIZE * 4,
52
+ fontFamily: whatmorePrimaryFont,
53
+ fontWeight: 'bold',
54
+ color: 'white'
55
+ }}
56
+ >
57
+ &nbsp;{title}&nbsp;
58
+ </Text>
59
+ :
60
+ <></>
61
+ }
62
+ {
63
+ showInProgressIcon
64
+ ?
65
+ <Animatable.View
66
+ animation="rotate"
67
+ duration={400} iterationCount={'infinite'}
68
+ easing="linear"
69
+ style={{
70
+ height: 'auto', width: 'auto'
71
+ }}
72
+ >
73
+ <LoadingIcon
74
+ color={"#F5F5F5"}
75
+ size={BASE_FONT_SIZE * 8}
76
+ />
77
+ </Animatable.View>
78
+ :
79
+ <></>
80
+ }
81
+ </View>
82
+ </TouchableOpacity>
83
+ );
84
+ }
85
+
86
+
87
+
88
+ function AddToCartInitialButton(props){
89
+ const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
90
+ const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
91
+ const whatmoreShopId = getGlobalState('whatmoreShopId');
92
+
93
+ const event = props.event;
94
+ const product = props.product;
95
+ const BASE_FONT_SIZE = props.baseFontSize ?? 10;
96
+ const onClick = props.onClick;
97
+ const width = props.width;
98
+ const height = props.height;
99
+
100
+ const BOX_PADDING = 2;
101
+
102
+ return (
103
+ <TouchableOpacity
104
+ style={{
105
+ width: '100%',
106
+ height: height,
107
+ padding: BOX_PADDING,
108
+ backgroundColor: whatmorePrimaryColor
109
+ }}
110
+ onPress={(e) => {
111
+ e.stopPropagation();
112
+ onClick();
113
+ }}
114
+ >
115
+ <View
116
+ style={{
117
+ width: '100%',
118
+ height: 'auto',
119
+ alignItems: 'center',
120
+ justifyContent: 'center',
121
+ paddingVertical: 5
122
+ }}
123
+ >
124
+ <Text
125
+ style={{
126
+ fontSize: 26,
127
+ fontWeight: 'bold',
128
+ fontFamily: whatmorePrimaryFont,
129
+ color: 'white'
130
+ }}
131
+ >
132
+ &nbsp;{"ADD TO CART"}&nbsp;
133
+ </Text>
134
+ </View>
135
+ </TouchableOpacity>
136
+ );
137
+ }
138
+
139
+ function SoldOutButton(props){
140
+ const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
141
+ const whatmoreShopId = getGlobalState('whatmoreShopId');
142
+
143
+ const event = props.event;
144
+ const product = props.product;
145
+ const BASE_FONT_SIZE = props.baseFontSize ?? 10;
146
+ const width = props.width;
147
+ const height = props.height;
148
+
149
+ const BOX_PADDING = 2;
150
+
151
+ return (
152
+ <TouchableOpacity
153
+ style={{
154
+ width: width, height: height,
155
+ padding: BOX_PADDING, backgroundColor: 'white',
156
+ borderColor: 'gray', borderWidth: 1
157
+ }}
158
+ onPress={(e)=>{
159
+ e.stopPropagation();
160
+ }}
161
+ >
162
+ <View
163
+ style={{
164
+ width: '100%', height: height,
165
+ flexDirection: 'row', justifyContent: 'center', alignItems: 'center',
166
+ paddingVertical: 4, paddingHorizontal: 5
167
+ }}
168
+ >
169
+ <Text
170
+ style={{
171
+ fontSize: BASE_FONT_SIZE * 4,
172
+ fontWeight: 'bold',
173
+ fontFamily: whatmorePrimaryFont,
174
+ color: 'gray'
175
+ }}
176
+ >
177
+ &nbsp;{' Sold Out '}&nbsp;
178
+ </Text>
179
+ </View>
180
+ </TouchableOpacity>
181
+ );
182
+ }
183
+
184
+ function AddedToCartButton(props){
185
+ const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
186
+ const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
187
+ const whatmoreShopId = getGlobalState('whatmoreShopId');
188
+
189
+ const event = props.event;
190
+ const product = props.product;
191
+ const BASE_FONT_SIZE = props.baseFontSize ?? 10;
192
+ const onClick = props.onClick;
193
+ const cartCount = props.cartCount;
194
+ const width = props.width;
195
+ const height = props.height;
196
+ const onCartIconClick = props.onCartIconClick;
197
+
198
+ const BOX_PADDING = 2;
199
+
200
+ return (
201
+ <TouchableOpacity
202
+ style={{
203
+ width: width, height: height,
204
+ padding: BOX_PADDING,
205
+ backgroundColor: 'white', borderColor: whatmorePrimaryColor, borderWidth: 1
206
+ }}
207
+ onPress={(e)=>{
208
+ e.stopPropagation();
209
+ }}
210
+ >
211
+ <View
212
+ style={{
213
+ width: '100%', height: height,
214
+ flexDirection: 'row', justifyContent: 'center', alignItems: 'center',
215
+ paddingLeft: 4, paddingRight: 4,
216
+ }}
217
+ >
218
+ <TouchableOpacity
219
+ onPress={()=>{onCartIconClick();}}
220
+ >
221
+ <CartIcon
222
+ color={whatmorePrimaryColor}
223
+ size={BASE_FONT_SIZE * 6}
224
+ />
225
+ </TouchableOpacity>
226
+
227
+ <Animatable.Text
228
+ animation="bounceInUp"
229
+ duration={500} iterationCount={1}
230
+ style={{
231
+ fontSize: BASE_FONT_SIZE * 4,
232
+ fontWeight: 'bold',
233
+ fontFamily: whatmorePrimaryFont,
234
+ color: whatmorePrimaryColor,
235
+ marginHorizontal: 20
236
+ }}
237
+ >
238
+ {cartCount}
239
+ </Animatable.Text >
240
+
241
+ <TouchableOpacity
242
+ onPress={(e)=>{
243
+ e.stopPropagation();
244
+ onClick();
245
+ }}
246
+ >
247
+ <PlusIcon
248
+ color={whatmorePrimaryColor}
249
+ size={BASE_FONT_SIZE * 6}
250
+ />
251
+ </TouchableOpacity>
252
+ </View>
253
+ </TouchableOpacity>
254
+ );
255
+ }
256
+
257
+ function AddToCartButton(props){
258
+ const whatmoreShopId = getGlobalState('whatmoreShopId');
259
+
260
+ const event = props.event;
261
+ const product = props.product;
262
+ const BASE_FONT_SIZE = props.baseFontSize ?? 10;
263
+ const showAddedToCart = props.showAddedToCart ?? true;
264
+ const cartState = props.cartState;
265
+ const cartCount = props.cartCount;
266
+ const onClickAtc = props.onClickAtc;
267
+ const onCartIconClick = props.onCartIconClick;
268
+
269
+ function _handleAddToCartClick() {
270
+ onClickAtc();
271
+ }
272
+
273
+ const width = props.width ?? '100%';
274
+ const height = props.height ?? 'auto';
275
+
276
+ if(cartState == "errored"){
277
+ return (
278
+ <Animatable.View
279
+ animation="fadeIn"
280
+ duration={500} iterationCount={1}
281
+ easing="ease-in-out"
282
+ style={{
283
+ height: height, width: width
284
+ }}
285
+ >
286
+ <SoldOutButton
287
+ event={event} product={product} baseFontSize={BASE_FONT_SIZE}
288
+ width={width} height={height}
289
+ />
290
+ </Animatable.View>
291
+ );
292
+ }
293
+
294
+ if(cartState == 'init'){
295
+ if(cartCount == 0){
296
+ return(
297
+ <AddToCartInitialButton
298
+ onClick={_handleAddToCartClick}
299
+ event={event} product={product} baseFontSize={BASE_FONT_SIZE}
300
+ width={width} height={height}
301
+ />
302
+ );
303
+ }else{
304
+ if(showAddedToCart){
305
+ return (
306
+ <Animatable.View
307
+ animation="fadeIn"
308
+ duration={500} iterationCount={1}
309
+ easing="ease-in-out"
310
+ style={{
311
+ height: height, width: width
312
+ }}
313
+ >
314
+ <AddedToCartButton
315
+ onClick={_handleAddToCartClick}
316
+ event={event} product={product} baseFontSize={BASE_FONT_SIZE}
317
+ cartCount={cartCount}
318
+ width={width} height={height}
319
+ onCartIconClick={onCartIconClick}
320
+ />
321
+ </Animatable.View>
322
+ );
323
+ }else{
324
+ return(
325
+ <AddToCartInitialButton
326
+ onClick={_handleAddToCartClick}
327
+ event={event} product={product} baseFontSize={BASE_FONT_SIZE}
328
+ width={width} height={height}
329
+ />
330
+ );
331
+ }
332
+ }
333
+ }
334
+
335
+ return(
336
+ <LabelledButton
337
+ onClick={_handleAddToCartClick}
338
+ event={event} product={product} baseFontSize={BASE_FONT_SIZE}
339
+ width={width} height={height}
340
+ title={cartState == "awaitingVariantSelection" ? "Done" : ""}
341
+ showInProgressIcon={cartState == "atcApiCallInProgress" || cartState == "productVariantDetailsApiCallInProgress"}
342
+ />
343
+ );
344
+ }
345
+
346
346
  export default AddToCartButton;