@lookiero/checkout 9.11.0 → 9.12.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 (14) hide show
  1. package/dist/src/ExpoRoot.js +1 -1
  2. package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.js +5 -2
  3. package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.d.ts +18 -2
  4. package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.js +14 -2
  5. package/dist/src/version.d.ts +1 -1
  6. package/dist/src/version.js +1 -1
  7. package/package.json +1 -1
  8. package/src/ExpoRoot.tsx +1 -1
  9. package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.ts +25 -4
  10. package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.tsx +11 -6
  11. package/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/__snapshots__/GetOutOfCheckoutModal.test.tsx.snap +159 -87
  12. package/src/infrastructure/ui/views/item/components/itemActions/__snapshots__/ItemActions.test.tsx.snap +242 -126
  13. package/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/__snapshots__/SizeWithoutStockModal.test.tsx.snap +74 -40
  14. package/src/infrastructure/ui/views/summary/components/collapsiblePricing/__snapshots__/CollapsiblePricing.test.tsx.snap +152 -80
package/dist/src/ExpoRoot.js CHANGED
@@ -24,7 +24,7 @@ const order = {
24
24
  coupon: "MYLOOKIERO",
25
25
  };
26
26
  const customer = {
27
- customerId: "74cb4f76-3f14-4983-81a6-2ee2a9a275d4",
27
+ customerId: "8107b5fe-8209-4b8f-86ef-85657cc496be",
28
28
  country: Country.ES,
29
29
  segment: Segment.WOMEN,
30
30
  };
package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.js CHANGED
@@ -1,12 +1,15 @@
1
1
  import React, { useCallback } from "react";
2
- import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
2
+ import { TouchableOpacity } from "react-native";
3
+ import { ALIGN, Text } from "@lookiero/aurora";
3
4
  import { useI18nMessage } from "@lookiero/i18n-react";
4
5
  import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
5
6
  import { style } from "./ButtonCheckoutQuestionItem.style";
7
+ const ACTIVE_OPACITY = 0.6;
6
8
  const ButtonCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, testID, }) => {
7
9
  const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
8
10
  const optionText = useI18nMessage({ id: checkoutQuestion.name });
9
11
  const handleOnPress = useCallback(() => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }), [onChange, checkoutQuestion.id, checkoutQuestionParentId]);
10
- return (React.createElement(Button, { accessibilityLabel: testID, style: style.button, testID: testID, variant: feedback === checkoutQuestion.id ? BUTTON_VARIANT.PRIMARY : BUTTON_VARIANT.SECONDARY, onPress: handleOnPress }, optionText));
12
+ return (React.createElement(TouchableOpacity, { accessibilityLabel: testID, activeOpacity: ACTIVE_OPACITY, style: [style.button, feedback === checkoutQuestion.id && style.buttonActive], testID: testID, onPress: handleOnPress },
13
+ React.createElement(Text, { align: ALIGN.CENTER, level: 3, style: feedback === checkoutQuestion.id && style.textActive, action: true }, optionText)));
11
14
  };
12
15
  export { ButtonCheckoutQuestionItem };
package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.d.ts CHANGED
@@ -1,5 +1,21 @@
1
- import { ViewStyle } from "react-native";
2
1
  declare const style: {
3
- button: ViewStyle;
2
+ button: {
3
+ alignContent: "center";
4
+ borderColor: string;
5
+ borderRadius: number;
6
+ borderWidth: number;
7
+ flex: number;
8
+ height: number;
9
+ justifyContent: "center";
10
+ marginHorizontal: number;
11
+ paddingLeft: number;
12
+ paddingRight: number;
13
+ };
14
+ buttonActive: {
15
+ backgroundColor: string;
16
+ };
17
+ textActive: {
18
+ color: string;
19
+ };
4
20
  };
5
21
  export { style };
package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.js CHANGED
@@ -1,13 +1,25 @@
1
1
  import { StyleSheet } from "react-native";
2
2
  import { theme } from "@lookiero/sty-psp-ui";
3
- const { colorBorderActionSecondary, borderWidth2, borderStyle } = theme();
3
+ const { colorBorderActionSecondary, colorBgActionPrimaryActive, colorTextActionPrimary, borderWidth2, borderRadiusFull, space6, space16, } = theme();
4
+ const HEIGHT = space16;
4
5
  const style = StyleSheet.create({
5
6
  button: {
7
+ alignContent: "center",
6
8
  borderColor: colorBorderActionSecondary,
7
- borderStyle: borderStyle,
9
+ borderRadius: borderRadiusFull,
8
10
  borderWidth: borderWidth2,
9
11
  flex: 1,
12
+ height: HEIGHT,
13
+ justifyContent: "center",
10
14
  marginHorizontal: 12,
15
+ paddingLeft: space6,
16
+ paddingRight: space6,
17
+ },
18
+ buttonActive: {
19
+ backgroundColor: colorBgActionPrimaryActive,
20
+ },
21
+ textActive: {
22
+ color: colorTextActionPrimary,
11
23
  },
12
24
  });
13
25
  export { style };
package/dist/src/version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const VERSION = "9.11.0";
1
+ export declare const VERSION = "9.12.0";
package/dist/src/version.js CHANGED
@@ -1 +1 @@
1
- export const VERSION = "9.11.0";
1
+ export const VERSION = "9.12.0";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lookiero/checkout",
3
- "version": "9.11.0",
3
+ "version": "9.12.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "sideEffects": "false",
package/src/ExpoRoot.tsx CHANGED
@@ -32,7 +32,7 @@ const order: Order = {
32
32
  };
33
33
 
34
34
  const customer: Customer = {
35
- customerId: "74cb4f76-3f14-4983-81a6-2ee2a9a275d4",
35
+ customerId: "8107b5fe-8209-4b8f-86ef-85657cc496be",
36
36
  country: Country.ES,
37
37
  segment: Segment.WOMEN,
38
38
  };
package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.ts CHANGED
@@ -1,16 +1,37 @@
1
- import { StyleSheet, ViewStyle } from "react-native";
1
+ import { StyleSheet } from "react-native";
2
2
  import { theme } from "@lookiero/sty-psp-ui";
3
3
 
4
- const { colorBorderActionSecondary, borderWidth2, borderStyle } = theme();
4
+ const {
5
+ colorBorderActionSecondary,
6
+ colorBgActionPrimaryActive,
7
+ colorTextActionPrimary,
8
+ borderWidth2,
9
+ borderRadiusFull,
10
+ space6,
11
+ space16,
12
+ } = theme();
13
+
14
+ const HEIGHT = space16;
5
15
 
6
16
  const style = StyleSheet.create({
7
17
  button: {
18
+ alignContent: "center",
8
19
  borderColor: colorBorderActionSecondary,
9
- borderStyle: borderStyle,
20
+ borderRadius: borderRadiusFull,
10
21
  borderWidth: borderWidth2,
11
22
  flex: 1,
23
+ height: HEIGHT,
24
+ justifyContent: "center",
12
25
  marginHorizontal: 12,
13
- } as ViewStyle,
26
+ paddingLeft: space6,
27
+ paddingRight: space6,
28
+ },
29
+ buttonActive: {
30
+ backgroundColor: colorBgActionPrimaryActive,
31
+ },
32
+ textActive: {
33
+ color: colorTextActionPrimary,
34
+ },
14
35
  });
15
36
 
16
37
  export { style };
package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.tsx CHANGED
@@ -1,10 +1,13 @@
1
1
  import React, { useCallback } from "react";
2
- import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
2
+ import { TouchableOpacity } from "react-native";
3
+ import { ALIGN, Text } from "@lookiero/aurora";
3
4
  import { useI18nMessage } from "@lookiero/i18n-react";
4
5
  import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
5
6
  import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
6
7
  import { style } from "./ButtonCheckoutQuestionItem.style";
7
8
 
9
+ const ACTIVE_OPACITY = 0.6;
10
+
8
11
  const ButtonCheckoutQuestionItem: CheckoutQuestionItem = ({
9
12
  checkoutQuestion,
10
13
  checkoutQuestionParentId,
@@ -19,15 +22,17 @@ const ButtonCheckoutQuestionItem: CheckoutQuestionItem = ({
19
22
  );
20
23
 
21
24
  return (
22
- <Button
25
+ <TouchableOpacity
23
26
  accessibilityLabel={testID}
24
- style={style.button}
27
+ activeOpacity={ACTIVE_OPACITY}
28
+ style={[style.button, feedback === checkoutQuestion.id && style.buttonActive]}
25
29
  testID={testID}
26
- variant={feedback === checkoutQuestion.id ? BUTTON_VARIANT.PRIMARY : BUTTON_VARIANT.SECONDARY}
27
30
  onPress={handleOnPress}
28
31
  >
29
- {optionText}
30
- </Button>
32
+ <Text align={ALIGN.CENTER} level={3} style={feedback === checkoutQuestion.id && style.textActive} action>
33
+ {optionText}
34
+ </Text>
35
+ </TouchableOpacity>
31
36
  );
32
37
  };
33
38
 
package/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/__snapshots__/GetOutOfCheckoutModal.test.tsx.snap CHANGED
@@ -270,20 +270,13 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
270
270
  "right": 0,
271
271
  "top": 0,
272
272
  },
273
- "alignContent": "center",
274
273
  "alignSelf": "flex-start",
275
- "backgroundColor": "#0C0A0A",
276
- "borderRadius": 9999,
277
274
  "container": {
278
275
  "overflow": "hidden",
279
276
  },
280
277
  "flex": 0,
281
278
  "height": 64,
282
- "justifyContent": "center",
283
279
  "overflow": "hidden",
284
- "paddingLeft": 24,
285
- "paddingRight": 24,
286
- "position": "relative",
287
280
  "pressed": {
288
281
  "bottom": 0,
289
282
  "left": 0,
@@ -299,57 +292,98 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
299
292
  ]
300
293
  }
301
294
  >
302
- <View
303
- collapsable={false}
304
- pointerEvents="none"
305
- style={
306
- {
307
- "backgroundColor": "#716A6B",
308
- "height": "300%",
309
- "left": 0,
310
- "opacity": 0.7,
311
- "position": "absolute",
312
- "top": 0,
313
- "width": "0%",
314
- }
295
+ <ViewManagerAdapter_ExpoLinearGradient
296
+ colors={
297
+ [
298
+ 4278979082,
299
+ 4278979082,
300
+ ]
301
+ }
302
+ endPoint={
303
+ [
304
+ 1,
305
+ 0,
306
+ ]
307
+ }
308
+ startPoint={
309
+ [
310
+ 0,
311
+ 1,
312
+ ]
315
313
  }
316
- />
317
- <View
318
314
  style={
319
315
  [
320
316
  {
321
- "alignItems": "center",
322
- "flexDirection": "row",
317
+ "alignContent": "center",
318
+ "height": 64,
323
319
  "justifyContent": "center",
320
+ "overflow": "hidden",
321
+ "paddingLeft": 24,
322
+ "paddingRight": 24,
323
+ "position": "relative",
324
+ },
325
+ {},
326
+ undefined,
327
+ undefined,
328
+ false,
329
+ {
330
+ "borderRadius": 9999,
324
331
  },
325
332
  ]
326
333
  }
327
334
  >
328
- <Text
329
- allowFontScaling={false}
330
- selectable={false}
335
+ <View
336
+ collapsable={false}
337
+ pointerEvents="none"
338
+ style={
339
+ {
340
+ "backgroundColor": "#716A6B",
341
+ "height": "300%",
342
+ "left": 0,
343
+ "opacity": 0.7,
344
+ "position": "absolute",
345
+ "top": 0,
346
+ "width": "0%",
347
+ }
348
+ }
349
+ />
350
+ <View
331
351
  style={
332
352
  [
333
353
  {
334
- "color": "#0C0A0A",
335
- "fontFamily": "AreaNormal-Extrabold",
336
- "fontSize": 15,
337
- "letterSpacing": -0.2,
338
- "lineHeight": 20,
339
- "paddingBottom": 0,
340
- "paddingLeft": 0,
341
- "paddingRight": 0,
342
- "paddingTop": 0,
343
- "textAlign": "center",
344
- "textTransform": "uppercase",
345
- "width": "100%",
354
+ "alignItems": "center",
355
+ "flexDirection": "row",
356
+ "justifyContent": "center",
346
357
  },
347
358
  ]
348
359
  }
349
360
  >
350
- get_out_of_checkout_modal.dismiss_button
351
- </Text>
352
- </View>
361
+ <Text
362
+ allowFontScaling={false}
363
+ selectable={false}
364
+ style={
365
+ [
366
+ {
367
+ "color": "#0C0A0A",
368
+ "fontFamily": "AreaNormal-Extrabold",
369
+ "fontSize": 15,
370
+ "letterSpacing": -0.2,
371
+ "lineHeight": 20,
372
+ "paddingBottom": 0,
373
+ "paddingLeft": 0,
374
+ "paddingRight": 0,
375
+ "paddingTop": 0,
376
+ "textAlign": "center",
377
+ "textTransform": "uppercase",
378
+ "width": "100%",
379
+ },
380
+ ]
381
+ }
382
+ >
383
+ get_out_of_checkout_modal.dismiss_button
384
+ </Text>
385
+ </View>
386
+ </ViewManagerAdapter_ExpoLinearGradient>
353
387
  </View>
354
388
  <View
355
389
  accessibilityRole="button"
@@ -396,24 +430,14 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
396
430
  "right": 0,
397
431
  "top": 0,
398
432
  },
399
- "alignContent": "center",
400
433
  "alignSelf": "flex-start",
401
- "backgroundColor": "#FFFFFF",
402
- "borderColor": "#0C0A0A",
403
- "borderRadius": 9999,
404
- "borderStyle": "solid",
405
- "borderWidth": 2,
406
434
  "container": {
407
435
  "overflow": "hidden",
408
436
  },
409
437
  "flex": 0,
410
438
  "height": 64,
411
- "justifyContent": "center",
412
439
  "marginTop": 32,
413
440
  "overflow": "hidden",
414
- "paddingLeft": 24,
415
- "paddingRight": 24,
416
- "position": "relative",
417
441
  "pressed": {
418
442
  "bottom": 0,
419
443
  "left": 0,
@@ -429,57 +453,105 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
429
453
  ]
430
454
  }
431
455
  >
432
- <View
433
- collapsable={false}
434
- pointerEvents="none"
435
- style={
436
- {
437
- "backgroundColor": "#B7B3B3",
438
- "height": "300%",
439
- "left": 0,
440
- "opacity": 0.7,
441
- "position": "absolute",
442
- "top": 0,
443
- "width": "0%",
444
- }
456
+ <ViewManagerAdapter_ExpoLinearGradient
457
+ colors={
458
+ [
459
+ 4294967295,
460
+ 4294967295,
461
+ ]
462
+ }
463
+ endPoint={
464
+ [
465
+ 1,
466
+ 0,
467
+ ]
468
+ }
469
+ startPoint={
470
+ [
471
+ 0,
472
+ 1,
473
+ ]
445
474
  }
446
- />
447
- <View
448
475
  style={
449
476
  [
450
477
  {
451
- "alignItems": "center",
452
- "flexDirection": "row",
478
+ "alignContent": "center",
479
+ "height": 64,
453
480
  "justifyContent": "center",
481
+ "overflow": "hidden",
482
+ "paddingLeft": 24,
483
+ "paddingRight": 24,
484
+ "position": "relative",
485
+ },
486
+ {
487
+ "borderColor": "#0C0A0A",
488
+ "borderStyle": "solid",
489
+ "borderWidth": 2,
490
+ "height": 64,
491
+ "paddingLeft": 24,
492
+ "paddingRight": 24,
493
+ },
494
+ undefined,
495
+ undefined,
496
+ false,
497
+ {
498
+ "borderRadius": 9999,
454
499
  },
455
500
  ]
456
501
  }
457
502
  >
458
- <Text
459
- allowFontScaling={false}
460
- selectable={false}
503
+ <View
504
+ collapsable={false}
505
+ pointerEvents="none"
506
+ style={
507
+ {
508
+ "backgroundColor": "#B7B3B3",
509
+ "height": "300%",
510
+ "left": 0,
511
+ "opacity": 0.7,
512
+ "position": "absolute",
513
+ "top": 0,
514
+ "width": "0%",
515
+ }
516
+ }
517
+ />
518
+ <View
461
519
  style={
462
520
  [
463
521
  {
464
- "color": "#0C0A0A",
465
- "fontFamily": "AreaNormal-Extrabold",
466
- "fontSize": 15,
467
- "letterSpacing": -0.2,
468
- "lineHeight": 20,
469
- "paddingBottom": 0,
470
- "paddingLeft": 0,
471
- "paddingRight": 0,
472
- "paddingTop": 0,
473
- "textAlign": "center",
474
- "textTransform": "uppercase",
475
- "width": "100%",
522
+ "alignItems": "center",
523
+ "flexDirection": "row",
524
+ "justifyContent": "center",
476
525
  },
477
526
  ]
478
527
  }
479
528
  >
480
- get_out_of_checkout_modal.confirm_button
481
- </Text>
482
- </View>
529
+ <Text
530
+ allowFontScaling={false}
531
+ selectable={false}
532
+ style={
533
+ [
534
+ {
535
+ "color": "#0C0A0A",
536
+ "fontFamily": "AreaNormal-Extrabold",
537
+ "fontSize": 15,
538
+ "letterSpacing": -0.2,
539
+ "lineHeight": 20,
540
+ "paddingBottom": 0,
541
+ "paddingLeft": 0,
542
+ "paddingRight": 0,
543
+ "paddingTop": 0,
544
+ "textAlign": "center",
545
+ "textTransform": "uppercase",
546
+ "width": "100%",
547
+ },
548
+ ]
549
+ }
550
+ >
551
+ get_out_of_checkout_modal.confirm_button
552
+ </Text>
553
+ </View>
554
+ </ViewManagerAdapter_ExpoLinearGradient>
483
555
  </View>
484
556
  </View>
485
557
  </View>