@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
@@ -36,7 +36,7 @@ const sentryConfig = {
36
36
  environment: `${Platform.OS}-EXPO`,
37
37
  };
38
38
  const apiUrl = Platform.OS !== "web" ? "https://web2.sp.dev.aws.lookiero.es/quiz/api" : __DEV__ ? "/local-to-dev" : "/checkout/api";
39
- const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjUyNTgzODQsImV4cCI6MTcyMzY0MTc3NCwiZGlzcGxheU5hbWUiOiJtYWlsLmRldithLnNhYXZlZHJhI2xvb2tpZXJvLmNvbUBsb29raWVyby5jb20iLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwidXVpZCI6IjBlZGUyNzZjLTRkNTEtNDhiMC05ZGJjLTQ4MmY4OGNiZmM3NyIsImlhdCI6MTcyMzYxMjk3NH0.x7E9b7DWVZjVAHJO_L36f7ZMxe_8N2Pjr8xHPjP1qF0";
39
+ const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjUzNzYyNDEsImV4cCI6MTcyNzAwMTc2MiwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTA4LTIwIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6IjRmMDg0ZTg0LWM5ZTEtNDE0NS1iMjM1LWE5ZjEyOWQ0OWMyMiIsImlhdCI6MTcyNDMyMzM2Mn0.mBDi_xW9DJLWLuWbxbC-TS6OWJriD4BTAXZAHoOMdcQ";
40
40
  const getAuthToken = () => Promise.resolve(authToken);
41
41
  const externalTranslationsUrl = Platform.OS !== "web"
42
42
  ? "https://backend-for-user.dev.envs.lookiero.tech/api/v2/translations"
@@ -1,6 +1,5 @@
1
1
  import React, { useCallback, useState } from "react";
2
- import { Image } from "react-native";
3
- import { Bullets, Carousel, theme, useScreenSize, } from "@lookiero/sty-psp-ui";
2
+ import { Bullets, Carousel, LazyImage, theme, useScreenSize, } from "@lookiero/sty-psp-ui";
4
3
  import { MediaPerspective } from "../../../../../../projection/checkoutItem/checkoutItem";
5
4
  import { AspectRatioView } from "../../../../../../shared/ui/components/atoms/aspectRatioView/AspectRatioView";
6
5
  import { useMediaImage } from "../../../../hooks/useMediaImage";
@@ -22,12 +21,7 @@ const ProductVariantSlider = ({ producVariantMedia, onChanged }) => {
22
21
  marginTop: isCollageImage && !isDesktopScreen ? space16 : 0,
23
22
  alignSelf: isCollageImage ? (isLastItem ? "flex-end" : "flex-start") : undefined,
24
23
  } },
25
- React.createElement(Image, { resizeMode: "stretch", style: [style.image, isDesktopScreen ? style.largeImage : null], testID: "product-variant-image", source: {
26
- uri: cdnImageUrl({
27
- url: item.url,
28
- width: 600,
29
- }),
30
- } })));
24
+ React.createElement(LazyImage, { hiResSrc: cdnImageUrl({ url: item.url, width: 600 }), resizeMode: "stretch", src: cdnImageUrl({ url: item.url, width: 600, dpi: 1 }), style: { view: [style.image, isDesktopScreen ? style.largeImage : null] }, testID: "product-variant-image" })));
31
25
  }, [cdnImageUrl, isDesktopScreen, producVariantMedia.length]);
32
26
  const renderBullets = useCallback(({ activeIndex, count, onChange }) => React.createElement(Bullets, { activeIndex: activeIndex, count: count, onChange: onChange }), []);
33
27
  return (React.createElement(Carousel, { activeIndex: activeIndex, bullets: renderBullets, data: producVariantMedia, onActiveIndexChanged: handleOnActiveChanged }, renderItem));
@@ -97,6 +97,7 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
97
97
  React.createElement(Layout, { header: header, scrollEnabled: false, style: {
98
98
  safeAreaView: style.safeAreaView,
99
99
  scrollView: style.scrollView,
100
+ header: style.header,
100
101
  } },
101
102
  React.createElement(ProductVariantPreview, { country: country, item: checkoutItem }),
102
103
  React.createElement(ScrollView, { showsVerticalScrollIndicator: false, testID: "return-questions-form" },
@@ -9,6 +9,9 @@ declare const style: {
9
9
  desktopLayoutSpacing: {
10
10
  paddingVertical: number;
11
11
  };
12
+ header: {
13
+ height: number;
14
+ };
12
15
  headerWrapper: {
13
16
  display: "flex";
14
17
  flexDirection: "column";
@@ -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
  const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space4, space6, space8 } = theme();
4
5
  const style = StyleSheet.create({
5
6
  description: {
@@ -12,6 +13,9 @@ const style = StyleSheet.create({
12
13
  desktopLayoutSpacing: {
13
14
  paddingVertical: space8,
14
15
  },
16
+ header: {
17
+ height: HEADER_HEIGHT,
18
+ },
15
19
  headerWrapper: {
16
20
  display: "flex",
17
21
  flexDirection: "column",
@@ -1,7 +1,8 @@
1
1
  import React from "react";
2
- import { Image, Pressable, View } from "react-native";
2
+ import { Pressable, View } from "react-native";
3
3
  import { COLOR, Icon, Text } from "@lookiero/aurora";
4
4
  import { useI18nMessage } from "@lookiero/i18n-react";
5
+ import { LazyImage } from "@lookiero/sty-psp-ui";
5
6
  import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
6
7
  import { size } from "../../../../../../projection/size/size";
7
8
  import { Price } from "../../../../components/atoms/price/Price";
@@ -16,12 +17,7 @@ const ProductVariant = ({ media, brand, name, price, size: sizeProjection, color
16
17
  return (React.createElement(Pressable, { pointerEvents: onPress ? "auto" : "none", style: style.container, testID: "product-variant", onPress: onPress },
17
18
  React.createElement(View, { style: style.row },
18
19
  React.createElement(View, null,
19
- React.createElement(Image, { resizeMode: "contain", style: [style.media, customStyle?.image], testID: "product-variant-media", source: {
20
- uri: cdnImageUrl({
21
- url: media[0]?.url,
22
- width: IMAGE_WIDTH,
23
- }),
24
- } })),
20
+ React.createElement(LazyImage, { hiResSrc: cdnImageUrl({ url: media[0]?.url, width: IMAGE_WIDTH }), resizeMode: "contain", src: cdnImageUrl({ url: media[0]?.url, width: IMAGE_WIDTH, dpi: 1 }), style: { view: [style.media, customStyle?.image] }, testID: "product-variant-media" })),
25
21
  React.createElement(View, { style: style.descriptionContainer },
26
22
  React.createElement(View, { style: style.infoProductVariant },
27
23
  React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 2, detail: true }, brand),
@@ -1 +1 @@
1
- export declare const VERSION = "8.10.0";
1
+ export declare const VERSION = "8.12.0-beta.0";
@@ -1 +1 @@
1
- export const VERSION = "8.10.0";
1
+ export const VERSION = "8.12.0-beta.0";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lookiero/checkout",
3
- "version": "8.10.0",
3
+ "version": "8.12.0-beta.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "sideEffects": "false",
package/src/ExpoRoot.tsx CHANGED
@@ -48,7 +48,7 @@ const sentryConfig: SentryEnvironment = {
48
48
  const apiUrl =
49
49
  Platform.OS !== "web" ? "https://web2.sp.dev.aws.lookiero.es/quiz/api" : __DEV__ ? "/local-to-dev" : "/checkout/api";
50
50
  const authToken =
51
- "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjUyNTgzODQsImV4cCI6MTcyMzY0MTc3NCwiZGlzcGxheU5hbWUiOiJtYWlsLmRldithLnNhYXZlZHJhI2xvb2tpZXJvLmNvbUBsb29raWVyby5jb20iLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwidXVpZCI6IjBlZGUyNzZjLTRkNTEtNDhiMC05ZGJjLTQ4MmY4OGNiZmM3NyIsImlhdCI6MTcyMzYxMjk3NH0.x7E9b7DWVZjVAHJO_L36f7ZMxe_8N2Pjr8xHPjP1qF0";
51
+ "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjUzNzYyNDEsImV4cCI6MTcyNzAwMTc2MiwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTA4LTIwIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6IjRmMDg0ZTg0LWM5ZTEtNDE0NS1iMjM1LWE5ZjEyOWQ0OWMyMiIsImlhdCI6MTcyNDMyMzM2Mn0.mBDi_xW9DJLWLuWbxbC-TS6OWJriD4BTAXZAHoOMdcQ";
52
52
  const getAuthToken = () => Promise.resolve(authToken);
53
53
 
54
54
  const externalTranslationsUrl =
@@ -1,8 +1,8 @@
1
1
  import React, { FC, useCallback, useState } from "react";
2
- import { Image } from "react-native";
3
2
  import {
4
3
  Bullets,
5
4
  Carousel,
5
+ LazyImage,
6
6
  RenderBulletsFunction,
7
7
  RenderItemFunction,
8
8
  theme,
@@ -46,16 +46,12 @@ const ProductVariantSlider: FC<ProductVariantSlider> = ({ producVariantMedia, on
46
46
  alignSelf: isCollageImage ? (isLastItem ? "flex-end" : "flex-start") : undefined,
47
47
  }}
48
48
  >
49
- <Image
49
+ <LazyImage
50
+ hiResSrc={cdnImageUrl({ url: item.url, width: 600 })}
50
51
  resizeMode="stretch"
51
- style={[style.image, isDesktopScreen ? style.largeImage : null]}
52
+ src={cdnImageUrl({ url: item.url, width: 600, dpi: 1 })}
53
+ style={{ view: [style.image, isDesktopScreen ? style.largeImage : null] }}
52
54
  testID="product-variant-image"
53
- source={{
54
- uri: cdnImageUrl({
55
- url: item.url,
56
- width: 600,
57
- }),
58
- }}
59
55
  />
60
56
  </AspectRatioView>
61
57
  );
@@ -135,23 +135,130 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
135
135
  ]
136
136
  }
137
137
  >
138
- <Image
139
- resizeMode="stretch"
140
- source={
141
- {
142
- "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=1200&f=auto",
143
- }
144
- }
138
+ <View
145
139
  style={
146
140
  [
147
141
  {
148
- "flex": 1,
142
+ "position": "relative",
149
143
  },
150
- null,
144
+ [
145
+ {
146
+ "flex": 1,
147
+ },
148
+ null,
149
+ ],
151
150
  ]
152
151
  }
153
152
  testID="product-variant-image"
154
- />
153
+ >
154
+ <View
155
+ style={
156
+ [
157
+ {
158
+ "flex": 1,
159
+ },
160
+ ]
161
+ }
162
+ testID="lazy-image-skeleton"
163
+ >
164
+ <View
165
+ onLayout={[Function]}
166
+ style={
167
+ [
168
+ {
169
+ "backgroundColor": "#F8F7F7",
170
+ "flex": 1,
171
+ "height": undefined,
172
+ "overflow": "hidden",
173
+ "width": undefined,
174
+ },
175
+ ]
176
+ }
177
+ >
178
+ <View
179
+ collapsable={false}
180
+ duration={1200}
181
+ style={
182
+ {
183
+ "height": "100%",
184
+ "left": 0,
185
+ "transform": [
186
+ {
187
+ "translateX": -375,
188
+ },
189
+ ],
190
+ "width": "100%",
191
+ }
192
+ }
193
+ >
194
+ <View
195
+ colors={
196
+ [
197
+ "rgba(255, 255, 255, 0)",
198
+ "#DAD8D8",
199
+ "#DAD8D8",
200
+ "rgba(255, 255, 255, 0)",
201
+ ]
202
+ }
203
+ end={
204
+ {
205
+ "x": 1,
206
+ "y": 0,
207
+ }
208
+ }
209
+ locations={
210
+ [
211
+ 0,
212
+ 0.25,
213
+ 0.75,
214
+ 1,
215
+ ]
216
+ }
217
+ start={
218
+ {
219
+ "x": 0,
220
+ "y": 0,
221
+ }
222
+ }
223
+ style={
224
+ {
225
+ "height": "100%",
226
+ "width": "100%",
227
+ }
228
+ }
229
+ />
230
+ </View>
231
+ </View>
232
+ </View>
233
+ <Image
234
+ animatedStyle={
235
+ {
236
+ "value": {
237
+ "opacity": 0,
238
+ },
239
+ }
240
+ }
241
+ collapsable={false}
242
+ onLoad={[Function]}
243
+ resizeMode="stretch"
244
+ source={
245
+ {
246
+ "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=600&f=auto",
247
+ }
248
+ }
249
+ style={
250
+ {
251
+ "flex": 1,
252
+ "height": "100%",
253
+ "opacity": 0,
254
+ "position": "absolute",
255
+ "width": "100%",
256
+ "zIndex": 10,
257
+ }
258
+ }
259
+ testID="lazy-image-main-image"
260
+ />
261
+ </View>
155
262
  </View>
156
263
  </View>
157
264
  </View>
@@ -186,23 +293,130 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
186
293
  ]
187
294
  }
188
295
  >
189
- <Image
190
- resizeMode="stretch"
191
- source={
192
- {
193
- "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/15/ac/15aca112-4e71-4646-8db5-7f9723bc0130.jpg?w=1200&f=auto",
194
- }
195
- }
296
+ <View
196
297
  style={
197
298
  [
198
299
  {
199
- "flex": 1,
300
+ "position": "relative",
200
301
  },
201
- null,
302
+ [
303
+ {
304
+ "flex": 1,
305
+ },
306
+ null,
307
+ ],
202
308
  ]
203
309
  }
204
310
  testID="product-variant-image"
205
- />
311
+ >
312
+ <View
313
+ style={
314
+ [
315
+ {
316
+ "flex": 1,
317
+ },
318
+ ]
319
+ }
320
+ testID="lazy-image-skeleton"
321
+ >
322
+ <View
323
+ onLayout={[Function]}
324
+ style={
325
+ [
326
+ {
327
+ "backgroundColor": "#F8F7F7",
328
+ "flex": 1,
329
+ "height": undefined,
330
+ "overflow": "hidden",
331
+ "width": undefined,
332
+ },
333
+ ]
334
+ }
335
+ >
336
+ <View
337
+ collapsable={false}
338
+ duration={1200}
339
+ style={
340
+ {
341
+ "height": "100%",
342
+ "left": 0,
343
+ "transform": [
344
+ {
345
+ "translateX": -375,
346
+ },
347
+ ],
348
+ "width": "100%",
349
+ }
350
+ }
351
+ >
352
+ <View
353
+ colors={
354
+ [
355
+ "rgba(255, 255, 255, 0)",
356
+ "#DAD8D8",
357
+ "#DAD8D8",
358
+ "rgba(255, 255, 255, 0)",
359
+ ]
360
+ }
361
+ end={
362
+ {
363
+ "x": 1,
364
+ "y": 0,
365
+ }
366
+ }
367
+ locations={
368
+ [
369
+ 0,
370
+ 0.25,
371
+ 0.75,
372
+ 1,
373
+ ]
374
+ }
375
+ start={
376
+ {
377
+ "x": 0,
378
+ "y": 0,
379
+ }
380
+ }
381
+ style={
382
+ {
383
+ "height": "100%",
384
+ "width": "100%",
385
+ }
386
+ }
387
+ />
388
+ </View>
389
+ </View>
390
+ </View>
391
+ <Image
392
+ animatedStyle={
393
+ {
394
+ "value": {
395
+ "opacity": 0,
396
+ },
397
+ }
398
+ }
399
+ collapsable={false}
400
+ onLoad={[Function]}
401
+ resizeMode="stretch"
402
+ source={
403
+ {
404
+ "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/15/ac/15aca112-4e71-4646-8db5-7f9723bc0130.jpg?w=600&f=auto",
405
+ }
406
+ }
407
+ style={
408
+ {
409
+ "flex": 1,
410
+ "height": "100%",
411
+ "opacity": 0,
412
+ "position": "absolute",
413
+ "width": "100%",
414
+ "zIndex": 10,
415
+ }
416
+ }
417
+ testID="lazy-image-main-image"
418
+ />
419
+ </View>
206
420
  </View>
207
421
  </View>
208
422
  </View>