@lookiero/checkout 8.10.0 → 8.12.0-beta.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 (24) hide show
  1. package/dist/public/public/assets/adaptive-icon.png +0 -0
  2. package/dist/public/public/assets/favicon.png +0 -0
  3. package/dist/public/public/assets/icon.png +0 -0
  4. package/dist/public/public/assets/splash.png +0 -0
  5. package/dist/public/public/images/not-found.png +0 -0
  6. package/dist/src/ExpoRoot.js +1 -1
  7. package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.js +2 -8
  8. package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.js +1 -0
  9. package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.style.d.ts +3 -0
  10. package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.style.js +4 -0
  11. package/dist/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.js +3 -7
  12. package/dist/src/version.d.ts +1 -1
  13. package/dist/src/version.js +1 -1
  14. package/package.json +1 -1
  15. package/src/ExpoRoot.tsx +1 -1
  16. package/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.tsx +5 -9
  17. package/src/infrastructure/ui/views/item/components/productVariantSlider/__snapshots__/ProductVariantSlider.test.tsx.snap +234 -20
  18. package/src/infrastructure/ui/views/item/views/productVariant/__snapshots__/ProductVariant.test.tsx.snap +702 -60
  19. package/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.style.ts +4 -0
  20. package/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.tsx +1 -0
  21. package/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.tsx +6 -9
  22. package/src/infrastructure/ui/views/shared/components/productVariant/__snapshots__/ProductVariant.test.tsx.snap +242 -28
  23. package/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/__snapshots__/CheckoutItemsTabs.test.tsx.snap +484 -56
  24. package/webpack.config.js +1 -1
@@ -1,5 +1,6 @@
1
1
  import { StyleSheet } from "react-native";
2
2
  import { theme } from "@lookiero/sty-psp-ui";
3
+ import { HEADER_HEIGHT } from "../../../../components/templates/header/Header.style";
3
4
 
4
5
  const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space4, space6, space8 } = theme();
5
6
 
@@ -14,6 +15,9 @@ const style = StyleSheet.create({
14
15
  desktopLayoutSpacing: {
15
16
  paddingVertical: space8,
16
17
  },
18
+ header: {
19
+ height: HEADER_HEIGHT,
20
+ },
17
21
  headerWrapper: {
18
22
  display: "flex",
19
23
  flexDirection: "column",
@@ -147,6 +147,7 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
147
147
  style={{
148
148
  safeAreaView: style.safeAreaView,
149
149
  scrollView: style.scrollView,
150
+ header: style.header,
150
151
  }}
151
152
  >
152
153
  <ProductVariantPreview country={country} item={checkoutItem} />
@@ -1,8 +1,9 @@
1
1
  import React, { FC } from "react";
2
- import { Image, ImageStyle, Pressable, StyleProp, View } from "react-native";
2
+ import { ImageStyle, Pressable, StyleProp, View } from "react-native";
3
3
  import { COLOR, Icon, Text } from "@lookiero/aurora";
4
4
  import { useI18nMessage } from "@lookiero/i18n-react";
5
5
  import { Country } from "@lookiero/sty-psp-locale";
6
+ import { LazyImage } from "@lookiero/sty-psp-ui";
6
7
  import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
7
8
  import { ColorProjection, MediaProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
8
9
  import { PriceProjection } from "../../../../../../projection/price/price";
@@ -55,16 +56,12 @@ const ProductVariant: FC<ProductVariantProps> = ({
55
56
  >
56
57
  <View style={style.row}>
57
58
  <View>
58
- <Image
59
+ <LazyImage
60
+ hiResSrc={cdnImageUrl({ url: media[0]?.url as string, width: IMAGE_WIDTH })}
59
61
  resizeMode="contain"
60
- style={[style.media, customStyle?.image]}
62
+ src={cdnImageUrl({ url: media[0]?.url as string, width: IMAGE_WIDTH, dpi: 1 })}
63
+ style={{ view: [style.media, customStyle?.image] }}
61
64
  testID="product-variant-media"
62
- source={{
63
- uri: cdnImageUrl({
64
- url: media[0]?.url as string,
65
- width: IMAGE_WIDTH,
66
- }),
67
- }}
68
65
  />
69
66
  </View>
70
67
 
@@ -81,27 +81,134 @@ exports[`ProductVariant component matches the snapshot for a non-unique size: no
81
81
  }
82
82
  >
83
83
  <View>
84
- <Image
85
- resizeMode="contain"
86
- source={
87
- {
88
- "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=208&f=auto",
89
- }
90
- }
84
+ <View
91
85
  style={
92
86
  [
93
87
  {
94
- "borderColor": "#DAD8D8",
95
- "borderRadius": 8,
96
- "borderWidth": 2,
97
- "height": 132,
98
- "width": 104,
88
+ "position": "relative",
99
89
  },
100
- undefined,
90
+ [
91
+ {
92
+ "borderColor": "#DAD8D8",
93
+ "borderRadius": 8,
94
+ "borderWidth": 2,
95
+ "height": 132,
96
+ "width": 104,
97
+ },
98
+ undefined,
99
+ ],
101
100
  ]
102
101
  }
103
102
  testID="product-variant-media"
104
- />
103
+ >
104
+ <View
105
+ style={
106
+ [
107
+ {
108
+ "flex": 1,
109
+ },
110
+ ]
111
+ }
112
+ testID="lazy-image-skeleton"
113
+ >
114
+ <View
115
+ onLayout={[Function]}
116
+ style={
117
+ [
118
+ {
119
+ "backgroundColor": "#F8F7F7",
120
+ "flex": 1,
121
+ "height": undefined,
122
+ "overflow": "hidden",
123
+ "width": undefined,
124
+ },
125
+ ]
126
+ }
127
+ >
128
+ <View
129
+ collapsable={false}
130
+ duration={1200}
131
+ style={
132
+ {
133
+ "height": "100%",
134
+ "left": 0,
135
+ "transform": [
136
+ {
137
+ "translateX": -375,
138
+ },
139
+ ],
140
+ "width": "100%",
141
+ }
142
+ }
143
+ >
144
+ <View
145
+ colors={
146
+ [
147
+ "rgba(255, 255, 255, 0)",
148
+ "#DAD8D8",
149
+ "#DAD8D8",
150
+ "rgba(255, 255, 255, 0)",
151
+ ]
152
+ }
153
+ end={
154
+ {
155
+ "x": 1,
156
+ "y": 0,
157
+ }
158
+ }
159
+ locations={
160
+ [
161
+ 0,
162
+ 0.25,
163
+ 0.75,
164
+ 1,
165
+ ]
166
+ }
167
+ start={
168
+ {
169
+ "x": 0,
170
+ "y": 0,
171
+ }
172
+ }
173
+ style={
174
+ {
175
+ "height": "100%",
176
+ "width": "100%",
177
+ }
178
+ }
179
+ />
180
+ </View>
181
+ </View>
182
+ </View>
183
+ <Image
184
+ animatedStyle={
185
+ {
186
+ "value": {
187
+ "opacity": 0,
188
+ },
189
+ }
190
+ }
191
+ collapsable={false}
192
+ onLoad={[Function]}
193
+ resizeMode="contain"
194
+ source={
195
+ {
196
+ "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=104&f=auto",
197
+ }
198
+ }
199
+ style={
200
+ {
201
+ "flex": 1,
202
+ "height": "100%",
203
+ "opacity": 0,
204
+ "position": "absolute",
205
+ "width": "100%",
206
+ "zIndex": 10,
207
+ }
208
+ }
209
+ testID="lazy-image-main-image"
210
+ />
211
+ </View>
105
212
  </View>
106
213
  <View
107
214
  style={
@@ -324,27 +431,134 @@ exports[`ProductVariant component matches the snapshot for an unique size: uniqu
324
431
  }
325
432
  >
326
433
  <View>
327
- <Image
328
- resizeMode="contain"
329
- source={
330
- {
331
- "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=208&f=auto",
332
- }
333
- }
434
+ <View
334
435
  style={
335
436
  [
336
437
  {
337
- "borderColor": "#DAD8D8",
338
- "borderRadius": 8,
339
- "borderWidth": 2,
340
- "height": 132,
341
- "width": 104,
438
+ "position": "relative",
342
439
  },
343
- undefined,
440
+ [
441
+ {
442
+ "borderColor": "#DAD8D8",
443
+ "borderRadius": 8,
444
+ "borderWidth": 2,
445
+ "height": 132,
446
+ "width": 104,
447
+ },
448
+ undefined,
449
+ ],
344
450
  ]
345
451
  }
346
452
  testID="product-variant-media"
347
- />
453
+ >
454
+ <View
455
+ style={
456
+ [
457
+ {
458
+ "flex": 1,
459
+ },
460
+ ]
461
+ }
462
+ testID="lazy-image-skeleton"
463
+ >
464
+ <View
465
+ onLayout={[Function]}
466
+ style={
467
+ [
468
+ {
469
+ "backgroundColor": "#F8F7F7",
470
+ "flex": 1,
471
+ "height": undefined,
472
+ "overflow": "hidden",
473
+ "width": undefined,
474
+ },
475
+ ]
476
+ }
477
+ >
478
+ <View
479
+ collapsable={false}
480
+ duration={1200}
481
+ style={
482
+ {
483
+ "height": "100%",
484
+ "left": 0,
485
+ "transform": [
486
+ {
487
+ "translateX": -375,
488
+ },
489
+ ],
490
+ "width": "100%",
491
+ }
492
+ }
493
+ >
494
+ <View
495
+ colors={
496
+ [
497
+ "rgba(255, 255, 255, 0)",
498
+ "#DAD8D8",
499
+ "#DAD8D8",
500
+ "rgba(255, 255, 255, 0)",
501
+ ]
502
+ }
503
+ end={
504
+ {
505
+ "x": 1,
506
+ "y": 0,
507
+ }
508
+ }
509
+ locations={
510
+ [
511
+ 0,
512
+ 0.25,
513
+ 0.75,
514
+ 1,
515
+ ]
516
+ }
517
+ start={
518
+ {
519
+ "x": 0,
520
+ "y": 0,
521
+ }
522
+ }
523
+ style={
524
+ {
525
+ "height": "100%",
526
+ "width": "100%",
527
+ }
528
+ }
529
+ />
530
+ </View>
531
+ </View>
532
+ </View>
533
+ <Image
534
+ animatedStyle={
535
+ {
536
+ "value": {
537
+ "opacity": 0,
538
+ },
539
+ }
540
+ }
541
+ collapsable={false}
542
+ onLoad={[Function]}
543
+ resizeMode="contain"
544
+ source={
545
+ {
546
+ "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=104&f=auto",
547
+ }
548
+ }
549
+ style={
550
+ {
551
+ "flex": 1,
552
+ "height": "100%",
553
+ "opacity": 0,
554
+ "position": "absolute",
555
+ "width": "100%",
556
+ "zIndex": 10,
557
+ }
558
+ }
559
+ testID="lazy-image-main-image"
560
+ />
561
+ </View>
348
562
  </View>
349
563
  <View
350
564
  style={