@lookiero/checkout 12.18.0 → 12.20.0

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 (33) hide show
  1. package/dist/src/ExpoRoot.js +4 -4
  2. package/dist/src/infrastructure/ui/views/item/Item.js +4 -3
  3. package/dist/src/infrastructure/ui/views/item/Item.style.d.ts +13 -15
  4. package/dist/src/infrastructure/ui/views/item/Item.style.js +6 -7
  5. package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.d.ts +1 -0
  6. package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.js +13 -7
  7. package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.d.ts +0 -1
  8. package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.js +2 -6
  9. package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.d.ts +1 -0
  10. package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.js +5 -3
  11. package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.d.ts +1 -0
  12. package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.js +6 -4
  13. package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.d.ts +0 -1
  14. package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.js +2 -6
  15. package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.d.ts +1 -0
  16. package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.js +2 -2
  17. package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.style.d.ts +1 -2
  18. package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.style.js +4 -5
  19. package/dist/src/version.d.ts +1 -1
  20. package/dist/src/version.js +1 -1
  21. package/package.json +4 -4
  22. package/src/ExpoRoot.tsx +4 -4
  23. package/src/infrastructure/ui/views/item/Item.style.ts +7 -7
  24. package/src/infrastructure/ui/views/item/Item.tsx +6 -2
  25. package/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.ts +2 -8
  26. package/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.tsx +37 -18
  27. package/src/infrastructure/ui/views/item/components/productVariantSlider/__snapshots__/ProductVariantSlider.test.tsx.snap +194 -188
  28. package/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.tsx +7 -1
  29. package/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.ts +2 -7
  30. package/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.tsx +8 -2
  31. package/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.style.ts +4 -5
  32. package/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.tsx +4 -1
  33. package/src/infrastructure/ui/views/item/views/productVariant/__snapshots__/ProductVariant.test.tsx.snap +585 -567
@@ -1,4 +1,5 @@
1
1
  import React, { FC, useCallback, useMemo, useState } from "react";
2
+ import { LayoutChangeEvent, View } from "react-native";
2
3
  import {
3
4
  AspectRatioView,
4
5
  Bullets,
@@ -15,8 +16,10 @@ import { style as productVariantSliderStyle } from "./ProductVariantSlider.style
15
16
  interface ProductVariantSlider {
16
17
  readonly producVariantMedia: MediaProjection[];
17
18
  readonly onChanged?: (active: number) => void;
19
+ readonly availableHeight: number;
18
20
  }
19
- const ProductVariantSlider: FC<ProductVariantSlider> = ({ producVariantMedia, onChanged }) => {
21
+
22
+ const ProductVariantSlider: FC<ProductVariantSlider> = ({ producVariantMedia, onChanged, availableHeight }) => {
20
23
  const cdnImageUrl = useMediaImage();
21
24
  const screenSize = useScreenSize();
22
25
  const isDesktopScreen = screenSize !== "S";
@@ -32,36 +35,50 @@ const ProductVariantSlider: FC<ProductVariantSlider> = ({ producVariantMedia, on
32
35
  [onChanged],
33
36
  );
34
37
 
38
+ const [width, setWidth] = useState<number>(0);
39
+ const handleOnLayout = useCallback(
40
+ ({
41
+ nativeEvent: {
42
+ layout: { width },
43
+ },
44
+ }: LayoutChangeEvent) => setWidth(width),
45
+ [],
46
+ );
47
+
48
+ const aspectRatio = Math.min(4 / 3, availableHeight / width);
49
+
35
50
  const renderItem: RenderItemFunction<MediaProjection> = useCallback(
36
51
  ({ item, index }) => {
37
52
  const isCollageImage = item.perspective === MediaPerspective.COLLAGE;
38
53
  const isLastItem = index === producVariantMedia.length - 1;
39
54
 
40
55
  return (
41
- <AspectRatioView
42
- aspectRatio={4 / 3}
43
- multiplier={isCollageImage && isLastItem ? 2 : 1}
44
- style={{
45
- marginTop: isCollageImage && !isDesktopScreen ? style.imageContainerMarginTop : 0,
46
- alignSelf: isCollageImage ? (isLastItem ? "flex-end" : "flex-start") : undefined,
47
- }}
48
- >
49
- <LazyImage
50
- hiResSrc={cdnImageUrl({ url: item.url, width: 600 })}
51
- resizeMode="stretch"
52
- src={cdnImageUrl({ url: item.url, width: 600, dpi: 1 })}
53
- style={{ view: [style.image, isDesktopScreen ? style.largeImage : null] }}
54
- testID="product-variant-image"
55
- />
56
- </AspectRatioView>
56
+ <View onLayout={handleOnLayout}>
57
+ <AspectRatioView
58
+ aspectRatio={aspectRatio}
59
+ multiplier={isCollageImage && isLastItem ? 2 : 1}
60
+ style={{
61
+ alignSelf: isCollageImage ? (isLastItem ? "flex-end" : "flex-start") : undefined,
62
+ }}
63
+ >
64
+ <LazyImage
65
+ hiResSrc={cdnImageUrl({ url: item.url, width: 600 })}
66
+ resizeMode={isCollageImage ? "stretch" : "contain"}
67
+ src={cdnImageUrl({ url: item.url, width: 600, dpi: 1 })}
68
+ style={{ view: [style.image, isDesktopScreen ? style.largeImage : null] }}
69
+ testID="product-variant-image"
70
+ />
71
+ </AspectRatioView>
72
+ </View>
57
73
  );
58
74
  },
59
75
  [
76
+ aspectRatio,
60
77
  cdnImageUrl,
78
+ handleOnLayout,
61
79
  isDesktopScreen,
62
80
  producVariantMedia.length,
63
81
  style.image,
64
- style.imageContainerMarginTop,
65
82
  style.largeImage,
66
83
  ],
67
84
  );
@@ -71,6 +88,8 @@ const ProductVariantSlider: FC<ProductVariantSlider> = ({ producVariantMedia, on
71
88
  [],
72
89
  );
73
90
 
91
+ console.log({ producVariantMedia });
92
+
74
93
  return (
75
94
  <Carousel
76
95
  activeIndex={activeIndex}
@@ -97,139 +97,142 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
97
97
  onLayout={[Function]}
98
98
  >
99
99
  <View
100
- style={
101
- [
102
- {
103
- "height": undefined,
104
- "width": undefined,
105
- },
106
- {
107
- "alignSelf": undefined,
108
- "marginTop": 0,
109
- },
110
- ]
111
- }
100
+ onLayout={[Function]}
112
101
  >
113
102
  <View
114
103
  style={
115
104
  [
116
105
  {
117
- "position": "relative",
106
+ "height": undefined,
107
+ "width": undefined,
108
+ },
109
+ {
110
+ "alignSelf": undefined,
118
111
  },
119
- [
120
- {
121
- "flex": 1,
122
- },
123
- null,
124
- ],
125
112
  ]
126
113
  }
127
- testID="product-variant-image"
128
114
  >
129
115
  <View
130
116
  style={
131
117
  [
132
118
  {
133
- "flex": 1,
119
+ "position": "relative",
134
120
  },
121
+ [
122
+ {
123
+ "flex": 1,
124
+ },
125
+ null,
126
+ ],
135
127
  ]
136
128
  }
137
- testID="lazy-image-skeleton"
129
+ testID="product-variant-image"
138
130
  >
139
131
  <View
140
- onLayout={[Function]}
141
132
  style={
142
133
  [
143
134
  {
144
- "backgroundColor": "#F8F7F7",
145
135
  "flex": 1,
146
- "height": undefined,
147
- "overflow": "hidden",
148
- "width": undefined,
149
136
  },
150
137
  ]
151
138
  }
139
+ testID="lazy-image-skeleton"
152
140
  >
153
141
  <View
154
- collapsable={false}
155
- duration={1200}
142
+ onLayout={[Function]}
156
143
  style={
157
- {
158
- "height": "100%",
159
- "left": 0,
160
- "transform": [
161
- {
162
- "translateX": -375,
163
- },
164
- ],
165
- "width": "100%",
166
- }
144
+ [
145
+ {
146
+ "backgroundColor": "#F8F7F7",
147
+ "flex": 1,
148
+ "height": undefined,
149
+ "overflow": "hidden",
150
+ "width": undefined,
151
+ },
152
+ ]
167
153
  }
168
154
  >
169
- <ViewManagerAdapter_ExpoLinearGradient
170
- colors={
171
- [
172
- 16777215,
173
- 4292532440,
174
- 4292532440,
175
- 16777215,
176
- ]
177
- }
178
- endPoint={
179
- [
180
- 1,
181
- 0,
182
- ]
183
- }
184
- locations={
185
- [
186
- 0,
187
- 0.25,
188
- 0.75,
189
- 1,
190
- ]
191
- }
192
- startPoint={
193
- [
194
- 0,
195
- 0,
196
- ]
197
- }
155
+ <View
156
+ collapsable={false}
157
+ duration={1200}
198
158
  style={
199
159
  {
200
160
  "height": "100%",
161
+ "left": 0,
162
+ "transform": [
163
+ {
164
+ "translateX": -375,
165
+ },
166
+ ],
201
167
  "width": "100%",
202
168
  }
203
169
  }
204
- />
170
+ >
171
+ <ViewManagerAdapter_ExpoLinearGradient
172
+ colors={
173
+ [
174
+ 16777215,
175
+ 4292532440,
176
+ 4292532440,
177
+ 16777215,
178
+ ]
179
+ }
180
+ endPoint={
181
+ [
182
+ 1,
183
+ 0,
184
+ ]
185
+ }
186
+ locations={
187
+ [
188
+ 0,
189
+ 0.25,
190
+ 0.75,
191
+ 1,
192
+ ]
193
+ }
194
+ startPoint={
195
+ [
196
+ 0,
197
+ 0,
198
+ ]
199
+ }
200
+ style={
201
+ {
202
+ "height": "100%",
203
+ "width": "100%",
204
+ }
205
+ }
206
+ />
207
+ </View>
205
208
  </View>
206
209
  </View>
207
- </View>
208
- <Image
209
- onLoad={[Function]}
210
- resizeMode="stretch"
211
- source={
212
- {
213
- "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=600&f=auto",
214
- }
215
- }
216
- style={
217
- [
210
+ <Image
211
+ onLoad={[Function]}
212
+ resizeMode="contain"
213
+ source={
218
214
  {
219
- "flex": 1,
220
- "height": "100%",
221
- "position": "absolute",
222
- "width": "100%",
223
- "zIndex": 10,
224
- },
225
- undefined,
226
- {
227
- "opacity": 0,
228
- },
229
- ]
230
- }
231
- testID="lazy-image-main-image"
232
- />
215
+ "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=600&f=auto",
216
+ }
217
+ }
218
+ style={
219
+ [
220
+ {
221
+ "flex": 1,
222
+ "height": "100%",
223
+ "position": "absolute",
224
+ "width": "100%",
225
+ "zIndex": 10,
226
+ },
227
+ undefined,
228
+ {
229
+ "opacity": 0,
230
+ },
231
+ ]
232
+ }
233
+ testID="lazy-image-main-image"
234
+ />
235
+ </View>
233
236
  </View>
234
237
  </View>
235
238
  </View>
@@ -251,139 +254,142 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
251
254
  onLayout={[Function]}
252
255
  >
253
256
  <View
254
- style={
255
- [
256
- {
257
- "height": undefined,
258
- "width": undefined,
259
- },
260
- {
261
- "alignSelf": undefined,
262
- "marginTop": 0,
263
- },
264
- ]
265
- }
257
+ onLayout={[Function]}
266
258
  >
267
259
  <View
268
260
  style={
269
261
  [
270
262
  {
271
- "position": "relative",
263
+ "height": undefined,
264
+ "width": undefined,
265
+ },
266
+ {
267
+ "alignSelf": undefined,
272
268
  },
273
- [
274
- {
275
- "flex": 1,
276
- },
277
- null,
278
- ],
279
269
  ]
280
270
  }
281
- testID="product-variant-image"
282
271
  >
283
272
  <View
284
273
  style={
285
274
  [
286
275
  {
287
- "flex": 1,
276
+ "position": "relative",
288
277
  },
278
+ [
279
+ {
280
+ "flex": 1,
281
+ },
282
+ null,
283
+ ],
289
284
  ]
290
285
  }
291
- testID="lazy-image-skeleton"
286
+ testID="product-variant-image"
292
287
  >
293
288
  <View
294
- onLayout={[Function]}
295
289
  style={
296
290
  [
297
291
  {
298
- "backgroundColor": "#F8F7F7",
299
292
  "flex": 1,
300
- "height": undefined,
301
- "overflow": "hidden",
302
- "width": undefined,
303
293
  },
304
294
  ]
305
295
  }
296
+ testID="lazy-image-skeleton"
306
297
  >
307
298
  <View
308
- collapsable={false}
309
- duration={1200}
299
+ onLayout={[Function]}
310
300
  style={
311
- {
312
- "height": "100%",
313
- "left": 0,
314
- "transform": [
315
- {
316
- "translateX": -375,
317
- },
318
- ],
319
- "width": "100%",
320
- }
301
+ [
302
+ {
303
+ "backgroundColor": "#F8F7F7",
304
+ "flex": 1,
305
+ "height": undefined,
306
+ "overflow": "hidden",
307
+ "width": undefined,
308
+ },
309
+ ]
321
310
  }
322
311
  >
323
- <ViewManagerAdapter_ExpoLinearGradient
324
- colors={
325
- [
326
- 16777215,
327
- 4292532440,
328
- 4292532440,
329
- 16777215,
330
- ]
331
- }
332
- endPoint={
333
- [
334
- 1,
335
- 0,
336
- ]
337
- }
338
- locations={
339
- [
340
- 0,
341
- 0.25,
342
- 0.75,
343
- 1,
344
- ]
345
- }
346
- startPoint={
347
- [
348
- 0,
349
- 0,
350
- ]
351
- }
312
+ <View
313
+ collapsable={false}
314
+ duration={1200}
352
315
  style={
353
316
  {
354
317
  "height": "100%",
318
+ "left": 0,
319
+ "transform": [
320
+ {
321
+ "translateX": -375,
322
+ },
323
+ ],
355
324
  "width": "100%",
356
325
  }
357
326
  }
358
- />
327
+ >
328
+ <ViewManagerAdapter_ExpoLinearGradient
329
+ colors={
330
+ [
331
+ 16777215,
332
+ 4292532440,
333
+ 4292532440,
334
+ 16777215,
335
+ ]
336
+ }
337
+ endPoint={
338
+ [
339
+ 1,
340
+ 0,
341
+ ]
342
+ }
343
+ locations={
344
+ [
345
+ 0,
346
+ 0.25,
347
+ 0.75,
348
+ 1,
349
+ ]
350
+ }
351
+ startPoint={
352
+ [
353
+ 0,
354
+ 0,
355
+ ]
356
+ }
357
+ style={
358
+ {
359
+ "height": "100%",
360
+ "width": "100%",
361
+ }
362
+ }
363
+ />
364
+ </View>
359
365
  </View>
360
366
  </View>
361
- </View>
362
- <Image
363
- onLoad={[Function]}
364
- resizeMode="stretch"
365
- source={
366
- {
367
- "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/15/ac/15aca112-4e71-4646-8db5-7f9723bc0130.jpg?w=600&f=auto",
368
- }
369
- }
370
- style={
371
- [
367
+ <Image
368
+ onLoad={[Function]}
369
+ resizeMode="contain"
370
+ source={
372
371
  {
373
- "flex": 1,
374
- "height": "100%",
375
- "position": "absolute",
376
- "width": "100%",
377
- "zIndex": 10,
378
- },
379
- undefined,
380
- {
381
- "opacity": 0,
382
- },
383
- ]
384
- }
385
- testID="lazy-image-main-image"
386
- />
372
+ "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/15/ac/15aca112-4e71-4646-8db5-7f9723bc0130.jpg?w=600&f=auto",
373
+ }
374
+ }
375
+ style={
376
+ [
377
+ {
378
+ "flex": 1,
379
+ "height": "100%",
380
+ "position": "absolute",
381
+ "width": "100%",
382
+ "zIndex": 10,
383
+ },
384
+ undefined,
385
+ {
386
+ "opacity": 0,
387
+ },
388
+ ]
389
+ }
390
+ testID="lazy-image-main-image"
391
+ />
392
+ </View>
387
393
  </View>
388
394
  </View>
389
395
  </View>
@@ -1,5 +1,5 @@
1
1
  import React, { FC, useCallback, useMemo } from "react";
2
- import { View } from "react-native";
2
+ import { useWindowDimensions, View } from "react-native";
3
3
  import { Spinner } from "@lookiero/aurora";
4
4
  import { CommandStatus } from "@lookiero/messaging-react";
5
5
  import { useLogger } from "@lookiero/sty-psp-logging";
@@ -31,6 +31,7 @@ interface ItemWithCustomerDecissionProps {
31
31
  readonly returnQuestions: ReturnQuestionProjection[];
32
32
  readonly currentProductVariant: ProductVariantProjection;
33
33
  readonly onEditFeedback: () => void;
34
+ readonly headerHeight: number;
34
35
  }
35
36
 
36
37
  const ItemWithCustomerDecission: FC<ItemWithCustomerDecissionProps> = ({
@@ -39,8 +40,10 @@ const ItemWithCustomerDecission: FC<ItemWithCustomerDecissionProps> = ({
39
40
  returnQuestions,
40
41
  currentProductVariant,
41
42
  onEditFeedback,
43
+ headerHeight,
42
44
  }) => {
43
45
  const style = useMemo(() => itemWithCustomerDecissionStyle(), []);
46
+ const { height } = useWindowDimensions();
44
47
 
45
48
  const screenSize = useScreenSize();
46
49
  const isMobile = screenSize === "S";
@@ -75,6 +78,8 @@ const ItemWithCustomerDecission: FC<ItemWithCustomerDecissionProps> = ({
75
78
  return <Spinner testID="spinner" />;
76
79
  }
77
80
 
81
+ const sliderAvailableHeight = height - headerHeight;
82
+
78
83
  return (
79
84
  <Body style={{ row: style.container }}>
80
85
  <ProductVariant
@@ -83,6 +88,7 @@ const ItemWithCustomerDecission: FC<ItemWithCustomerDecissionProps> = ({
83
88
  country={country}
84
89
  currentProductVariant={currentProductVariant}
85
90
  segment={segment}
91
+ sliderAvailableHeight={sliderAvailableHeight}
86
92
  tradename={tradename}
87
93
  customerDecissionBanner={
88
94
  <CustomerDecissionBanner
@@ -2,19 +2,14 @@ import { StyleSheet } from "react-native";
2
2
  import { theme } from "@lookiero/sty-psp-ui";
3
3
 
4
4
  const style = () => {
5
- const { space6, space10 } = theme();
5
+ const { space10 } = theme();
6
6
 
7
- const styles = StyleSheet.create({
7
+ return StyleSheet.create({
8
8
  container: {
9
9
  paddingBottom: space10,
10
10
  paddingHorizontal: 0,
11
11
  },
12
12
  });
13
-
14
- return {
15
- ...styles,
16
- productVariantPaddingBottom: space6,
17
- };
18
13
  };
19
14
 
20
15
  export { style };
@@ -1,5 +1,5 @@
1
1
  import React, { FC, useCallback, useMemo, useState } from "react";
2
- import { LayoutRectangle, Platform, ScrollView } from "react-native";
2
+ import { LayoutRectangle, Platform, ScrollView, useWindowDimensions } from "react-native";
3
3
  import { Spinner } from "@lookiero/aurora";
4
4
  import { CommandStatus } from "@lookiero/messaging-react";
5
5
  import { useLogger } from "@lookiero/sty-psp-logging";
@@ -32,6 +32,7 @@ interface ItemWithoutCustomerDecissionProps {
32
32
  readonly bookedProductsVariants: BookedProductsVariantsProjection;
33
33
  readonly currentProductVariant: ProductVariantProjection;
34
34
  readonly onReturn: () => void;
35
+ readonly headerHeight: number;
35
36
  }
36
37
 
37
38
  const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
@@ -40,6 +41,7 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
40
41
  bookedProductsVariants,
41
42
  currentProductVariant,
42
43
  onReturn,
44
+ headerHeight,
43
45
  }) => {
44
46
  const logger = useLogger();
45
47
  const {
@@ -48,6 +50,7 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
48
50
  } = useStaticInfo();
49
51
 
50
52
  const style = useMemo(() => itemWithoutCustomerDecissionStyle(), []);
53
+ const { height } = useWindowDimensions();
51
54
 
52
55
  /* KeepCheckoutItem */
53
56
  const [keepCheckoutItem, keepCheckoutItemStatus] = useKeepCheckoutItem({ checkoutItemId: checkoutItem.id, logger });
@@ -102,6 +105,8 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
102
105
  return <Spinner testID="spinner" />;
103
106
  }
104
107
 
108
+ const sliderAvailableHeight = height - headerHeight - stickyHeight;
109
+
105
110
  return (
106
111
  <>
107
112
  <SizeWithoutStockModal visible={sizeWithoutStockModalVisible} onDismiss={handleOnHideSizeWithoutStockModal} />
@@ -114,9 +119,10 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
114
119
  country={country}
115
120
  currentProductVariant={currentProductVariant}
116
121
  segment={segment}
122
+ sliderAvailableHeight={sliderAvailableHeight}
117
123
  tradename={tradename}
118
124
  style={{
119
- content: { paddingBottom: Platform.OS === "web" ? style.productVariantPaddingBottom : stickyHeight },
125
+ content: { paddingBottom: Platform.OS === "web" ? 0 : stickyHeight },
120
126
  }}
121
127
  />
122
128
  </Body>