@lookiero/checkout 3.6.0-beta.9 → 3.6.1-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 (124) hide show
  1. package/dist/infrastructure/projection/checkout/checkout.js +12 -0
  2. package/dist/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.js +12 -7
  3. package/dist/infrastructure/ui/components/layouts/layout/dummyLayout/useScrollViewRef.d.ts +15 -0
  4. package/dist/infrastructure/ui/components/layouts/layout/dummyLayout/useScrollViewRef.js +14 -0
  5. package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.js +2 -2
  6. package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.js +1 -1
  7. package/dist/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.js +1 -1
  8. package/dist/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js +1 -1
  9. package/dist/infrastructure/ui/views/App.js +5 -1
  10. package/dist/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.js +1 -1
  11. package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.js +4 -6
  12. package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.d.ts +3 -10
  13. package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.js +3 -10
  14. package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.js +3 -4
  15. package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.style.d.ts +0 -3
  16. package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.style.js +0 -3
  17. package/dist/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.js +7 -15
  18. package/dist/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.style.d.ts +0 -1
  19. package/dist/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.style.js +0 -1
  20. package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.js +2 -3
  21. package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.style.d.ts +0 -3
  22. package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.style.js +0 -3
  23. package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.js +3 -4
  24. package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.style.d.ts +3 -10
  25. package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.style.js +3 -10
  26. package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.js +5 -6
  27. package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.style.d.ts +0 -6
  28. package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.style.js +0 -6
  29. package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.js +3 -4
  30. package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.style.d.ts +3 -10
  31. package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.style.js +3 -10
  32. package/dist/shared/ui/components/atoms/input/Input.js +1 -1
  33. package/dist/shared/ui/components/layouts/carousel/Carousel.d.ts +11 -0
  34. package/dist/shared/ui/components/layouts/carousel/Carousel.js +31 -0
  35. package/dist/shared/ui/components/layouts/carousel/Carousel.style.d.ts +17 -0
  36. package/dist/shared/ui/components/layouts/carousel/Carousel.style.js +7 -0
  37. package/dist/shared/ui/components/layouts/carousel/Carousel2.d.ts +16 -0
  38. package/dist/shared/ui/components/layouts/carousel/Carousel2.js +72 -0
  39. package/dist/shared/ui/components/layouts/carousel/DragComponent.d.ts +3 -0
  40. package/dist/shared/ui/components/layouts/carousel/DragComponent.js +48 -0
  41. package/dist/shared/ui/components/layouts/slider/Bullets.d.ts +10 -0
  42. package/dist/shared/ui/components/layouts/slider/Bullets.js +29 -0
  43. package/dist/shared/ui/components/layouts/slider/Bullets.style.d.ts +12 -0
  44. package/dist/shared/ui/components/layouts/slider/Bullets.style.js +15 -0
  45. package/dist/shared/ui/components/layouts/slider/Slider.d.ts +0 -5
  46. package/dist/shared/ui/components/layouts/slider/Slider.js +4 -4
  47. package/dist/shared/ui/components/layouts/slider/SliderDots.d.ts +8 -0
  48. package/dist/shared/ui/components/layouts/slider/SliderDots.js +16 -0
  49. package/dist/shared/ui/components/layouts/slider/SliderDots.style.d.ts +12 -0
  50. package/dist/shared/ui/components/layouts/slider/SliderDots.style.js +15 -0
  51. package/dist/shared/ui/components/molecules/selectField/SelectField.js +1 -1
  52. package/package.json +5 -1
  53. package/dist/domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired.d.ts +0 -6
  54. package/dist/domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired.js +0 -13
  55. package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.d.ts +0 -10
  56. package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.js +0 -11
  57. package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.d.ts +0 -6
  58. package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.js +0 -7
  59. package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.d.ts +0 -6
  60. package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.js +0 -9
  61. package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.d.ts +0 -13
  62. package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.js +0 -19
  63. package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.style.ts.d.ts +0 -6
  64. package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.style.ts.js +0 -7
  65. package/dist/infrastructure/ui/components/templates/header/header/Header.d.ts +0 -3
  66. package/dist/infrastructure/ui/components/templates/header/header/Header.js +0 -10
  67. package/dist/infrastructure/ui/components/templates/header/header/Header.style.d.ts +0 -9
  68. package/dist/infrastructure/ui/components/templates/header/header/Header.style.js +0 -12
  69. package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.d.ts +0 -13
  70. package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.js +0 -19
  71. package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.style.ts.d.ts +0 -6
  72. package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.style.ts.js +0 -7
  73. package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.d.ts +0 -2
  74. package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.js +0 -28
  75. package/dist/infrastructure/ui/hooks/useToast.d.ts +0 -11
  76. package/dist/infrastructure/ui/hooks/useToast.js +0 -49
  77. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.d.ts +0 -7
  78. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.js +0 -25
  79. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.style.d.ts +0 -16
  80. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.style.js +0 -19
  81. package/dist/infrastructure/ui/views/intro/Intro.d.ts +0 -6
  82. package/dist/infrastructure/ui/views/intro/Intro.js +0 -52
  83. package/dist/infrastructure/ui/views/intro/Intro.style.d.ts +0 -52
  84. package/dist/infrastructure/ui/views/intro/Intro.style.js +0 -55
  85. package/dist/infrastructure/ui/views/item/Item.style.d.ts +0 -15
  86. package/dist/infrastructure/ui/views/item/Item.style.js +0 -18
  87. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.d.ts +0 -26
  88. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.js +0 -44
  89. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.d.ts +0 -45
  90. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.js +0 -53
  91. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.d.ts +0 -7
  92. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.js +0 -25
  93. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.d.ts +0 -16
  94. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.js +0 -19
  95. package/dist/infrastructure/ui/views/navigation/Navigation.d.ts +0 -21
  96. package/dist/infrastructure/ui/views/navigation/Navigation.js +0 -45
  97. package/dist/infrastructure/ui/views/navigation/Navigation.style.d.ts +0 -5
  98. package/dist/infrastructure/ui/views/navigation/Navigation.style.js +0 -30
  99. package/dist/infrastructure/ui/views/navigation/components/header/Header.d.ts +0 -46
  100. package/dist/infrastructure/ui/views/navigation/components/header/Header.js +0 -120
  101. package/dist/infrastructure/ui/views/navigation/components/header/Header.style.d.ts +0 -31
  102. package/dist/infrastructure/ui/views/navigation/components/header/Header.style.js +0 -34
  103. package/dist/infrastructure/ui/views/navigation/components/header/Logo.d.ts +0 -7
  104. package/dist/infrastructure/ui/views/navigation/components/header/Logo.js +0 -11
  105. package/dist/infrastructure/ui/views/navigation/components/header/Logo.style.d.ts +0 -7
  106. package/dist/infrastructure/ui/views/navigation/components/header/Logo.style.js +0 -8
  107. package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.d.ts +0 -12
  108. package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.js +0 -24
  109. package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.style.d.ts +0 -15
  110. package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.style.js +0 -18
  111. package/dist/shared/notifications/domain/notification/command/createNotification.d.ts +0 -17
  112. package/dist/shared/notifications/domain/notification/command/createNotification.js +0 -7
  113. package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.d.ts +0 -21
  114. package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.js +0 -22
  115. package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.d.ts +0 -12
  116. package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.js +0 -24
  117. package/dist/shared/notifications/infrastructure/ui/components/Notifications.d.ts +0 -9
  118. package/dist/shared/notifications/infrastructure/ui/components/Notifications.js +0 -20
  119. package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.d.ts +0 -36
  120. package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.js +0 -31
  121. package/dist/shared/tracking/infrastructure/usePageView.d.ts +0 -13
  122. package/dist/shared/tracking/infrastructure/usePageView.js +0 -27
  123. package/dist/shared/ui/components/atoms/error/Error.style.d.ts +0 -6
  124. package/dist/shared/ui/components/atoms/error/Error.style.js +0 -9
@@ -0,0 +1,7 @@
1
+ import { StyleSheet } from "react-native";
2
+ const style = StyleSheet.create({
3
+ carousel: { flex: 1, flexDirection: "row", height: "100%", position: "absolute" },
4
+ carouselItem: { flex: 1 },
5
+ container: { flex: 1, overflow: "hidden", position: "relative" },
6
+ });
7
+ export { style };
@@ -0,0 +1,16 @@
1
+ /// <reference types="react" />
2
+ interface RenderItemFunctionArgs<T> {
3
+ readonly item: T;
4
+ readonly index: number;
5
+ }
6
+ interface RenderItemFunction<T> {
7
+ (args: RenderItemFunctionArgs<T>): JSX.Element;
8
+ }
9
+ interface CarouselProps<T> {
10
+ readonly data: T[];
11
+ readonly children: RenderItemFunction<T>;
12
+ readonly onActiveIndexChanged?: (index: number) => void;
13
+ }
14
+ declare const Carousel2: <T>({ data, children, onActiveIndexChanged }: CarouselProps<T>) => JSX.Element;
15
+ export type { RenderItemFunction };
16
+ export { Carousel2 };
@@ -0,0 +1,72 @@
1
+ import { clamp } from "@react-spring/shared";
2
+ import React, { useCallback, useMemo, useRef, useState } from "react";
3
+ import { View } from "react-native";
4
+ import { Gesture, GestureDetector } from "react-native-gesture-handler";
5
+ import Animated, { useSharedValue, withSpring, useAnimatedStyle, runOnJS } from "react-native-reanimated";
6
+ import { useScrollViewRef } from "../../../../../infrastructure/ui/components/layouts/layout/dummyLayout/useScrollViewRef";
7
+ import { Bullets } from "../slider/Bullets";
8
+ import { style } from "./Carousel.style";
9
+ const SPRING_CONFIG = {
10
+ damping: 25,
11
+ mass: 1,
12
+ stiffness: 300,
13
+ };
14
+ const Carousel2 = ({ data, children, onActiveIndexChanged }) => {
15
+ const { scrollViewRef, panGestureRef } = useScrollViewRef();
16
+ const [carouselDimensions, setCarouselDimensions] = useState();
17
+ const carouselItemWidth = carouselDimensions?.width || 1;
18
+ const handleOnLayout = useCallback(({ nativeEvent: { layout: { width, height }, }, }) => setCarouselDimensions({ width, height }), []);
19
+ const [activeIndex, setActiveIndex] = useState(0);
20
+ const activeIndexRef = useRef(activeIndex);
21
+ activeIndexRef.current = activeIndex;
22
+ const panTranslationX = useSharedValue(0);
23
+ const panInitialTranslationX = useSharedValue(0);
24
+ const updateActiveIndex = useCallback((index) => {
25
+ if (activeIndexRef.current === index) {
26
+ return;
27
+ }
28
+ setActiveIndex(index);
29
+ onActiveIndexChanged?.(index);
30
+ }, [onActiveIndexChanged]);
31
+ const panGesture = useMemo(() => Gesture.Pan()
32
+ .maxPointers(1)
33
+ .activeOffsetX([-20, 20])
34
+ .onStart(() => {
35
+ panInitialTranslationX.value = panTranslationX.value;
36
+ })
37
+ .onUpdate(({ translationX }) => {
38
+ const tX = panInitialTranslationX.value + translationX;
39
+ const index = clamp(0, data.length - 1, Math.round(-tX / carouselItemWidth));
40
+ panTranslationX.value = tX;
41
+ runOnJS(updateActiveIndex)(index);
42
+ })
43
+ .onEnd(({ translationX }) => {
44
+ const tX = panInitialTranslationX.value + translationX;
45
+ const index = clamp(0, data.length - 1, Math.round(-tX / carouselItemWidth));
46
+ panTranslationX.value = withSpring(-index * carouselItemWidth, SPRING_CONFIG);
47
+ })
48
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
49
+ // @ts-ignore
50
+ .simultaneousWithExternalGesture(scrollViewRef)
51
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
52
+ // @ts-ignore
53
+ .withRef(panGestureRef), [
54
+ carouselItemWidth,
55
+ data.length,
56
+ panGestureRef,
57
+ panInitialTranslationX,
58
+ panTranslationX,
59
+ scrollViewRef,
60
+ updateActiveIndex,
61
+ ]);
62
+ const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateX: panTranslationX.value }] }), [panTranslationX]);
63
+ return (React.createElement(React.Fragment, null,
64
+ React.createElement(View, { style: style.container, onLayout: handleOnLayout }, carouselDimensions && (
65
+ // <GestureHandlerRootView style={{ flex: 1 }}>
66
+ React.createElement(GestureDetector, { gesture: panGesture },
67
+ React.createElement(Animated.View, { style: [style.carousel, { width: carouselDimensions.width * data.length }, animatedStyle] }, data.map((item, index) => (React.createElement(View, { key: index, style: [style.carouselItem, { width: carouselDimensions.width }] }, children({ index, item }))))))
68
+ // </GestureHandlerRootView>
69
+ )),
70
+ React.createElement(Bullets, { activeIndex: activeIndex, count: data.length, onChange: () => void 0 })));
71
+ };
72
+ export { Carousel2 };
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare const DragComponent: (props: any) => JSX.Element;
3
+ export { DragComponent };
@@ -0,0 +1,48 @@
1
+ /* eslint-disable @typescript-eslint/ban-ts-comment */
2
+ import React from "react";
3
+ import { View } from "react-native";
4
+ import { Gesture, GestureDetector } from "react-native-gesture-handler";
5
+ import { useSharedValue } from "react-native-reanimated";
6
+ import { useScrollViewRef } from "../../../../../infrastructure/ui/components/layouts/layout/dummyLayout/useScrollViewRef";
7
+ const TOUCH_SLOP = 5;
8
+ const TIME_TO_ACTIVATE_PAN = 400;
9
+ // @ts-ignore
10
+ const DragComponent = (props) => {
11
+ const { scrollViewRef, panGestureRef } = useScrollViewRef();
12
+ const touchStart = useSharedValue({ x: 0, y: 0, time: 0 });
13
+ const gesture = Gesture.Pan()
14
+ .manualActivation(true)
15
+ .onTouchesDown((e) => {
16
+ touchStart.value = {
17
+ // @ts-ignore
18
+ x: e.changedTouches[0].x,
19
+ // @ts-ignore
20
+ y: e.changedTouches[0].y,
21
+ time: Date.now(),
22
+ };
23
+ })
24
+ .onTouchesMove((e, state) => {
25
+ if (Date.now() - touchStart.value.time > TIME_TO_ACTIVATE_PAN) {
26
+ state.activate();
27
+ console.log("activate");
28
+ }
29
+ else if (
30
+ // @ts-ignore
31
+ Math.abs(touchStart.value.x - e.changedTouches[0].x) > TOUCH_SLOP ||
32
+ // @ts-ignore
33
+ Math.abs(touchStart.value.y - e.changedTouches[0].y) > TOUCH_SLOP) {
34
+ state.fail();
35
+ console.log("fail");
36
+ }
37
+ })
38
+ .onUpdate(() => {
39
+ console.log("pan update");
40
+ })
41
+ // @ts-ignore
42
+ .simultaneousWithExternalGesture(scrollViewRef)
43
+ // @ts-ignore
44
+ .withRef(panGestureRef);
45
+ return (React.createElement(GestureDetector, { gesture: gesture },
46
+ React.createElement(View, null, props.children)));
47
+ };
48
+ export { DragComponent };
@@ -0,0 +1,10 @@
1
+ import { FC } from "react";
2
+ interface BulletsProps {
3
+ readonly activeIndex: number;
4
+ readonly onChange: (index: number) => void;
5
+ readonly count: number;
6
+ readonly maxBullets?: number;
7
+ readonly testID?: string;
8
+ }
9
+ declare const Bullets: FC<BulletsProps>;
10
+ export { Bullets };
@@ -0,0 +1,29 @@
1
+ import { animated, useSpring } from "@react-spring/native";
2
+ import React from "react";
3
+ import { TouchableHighlight, View } from "react-native";
4
+ import { theme } from "../../../../../infrastructure/ui/theme/theme";
5
+ import { style } from "./Bullets.style";
6
+ const { colorContent, colorGrayscaleM } = theme();
7
+ const colorTransparent = "rgba(0,0,0,0)";
8
+ const MAX = 5;
9
+ const DIAMETER_MAX = 8;
10
+ const DIAMETER_MIN = 2;
11
+ const Bullet = ({ index, activeIndex, maxBullets, onChange }) => {
12
+ const pivot = Math.floor(maxBullets / 2) + 1;
13
+ const delta = Math.abs(index - activeIndex);
14
+ const diameter = delta > 1 ? DIAMETER_MAX - delta * DIAMETER_MIN : DIAMETER_MAX;
15
+ const color = delta === 0 ? colorContent : colorGrayscaleM;
16
+ const springs = useSpring({ diameter, color });
17
+ return delta >= pivot ? null : (React.createElement(TouchableHighlight, { underlayColor: colorTransparent, onPress: () => onChange(index) },
18
+ React.createElement(animated.View, { accessibilityState: { selected: delta === 0 }, testID: "bullet", style: [
19
+ style.bullet,
20
+ {
21
+ width: springs.diameter,
22
+ height: springs.diameter,
23
+ backgroundColor: springs.color,
24
+ borderRadius: springs.diameter,
25
+ },
26
+ ] })));
27
+ };
28
+ const Bullets = ({ activeIndex, count, maxBullets = MAX, onChange, testID = "bullets" }) => (React.createElement(View, { style: style.bullets, testID: testID }, [...Array(count).keys()].map((index) => (React.createElement(Bullet, { key: index, activeIndex: activeIndex, index: index, maxBullets: maxBullets, onChange: onChange })))));
29
+ export { Bullets };
@@ -0,0 +1,12 @@
1
+ declare const style: {
2
+ bullet: {
3
+ marginHorizontal: number;
4
+ };
5
+ bullets: {
6
+ alignItems: "center";
7
+ flexDirection: "row";
8
+ justifyContent: "center";
9
+ paddingVertical: number;
10
+ };
11
+ };
12
+ export { style };
@@ -0,0 +1,15 @@
1
+ import { StyleSheet } from "react-native";
2
+ import { theme } from "../../../../../infrastructure/ui/theme/theme";
3
+ const { spaceM } = theme();
4
+ const style = StyleSheet.create({
5
+ bullet: {
6
+ marginHorizontal: 3,
7
+ },
8
+ bullets: {
9
+ alignItems: "center",
10
+ flexDirection: "row",
11
+ justifyContent: "center",
12
+ paddingVertical: spaceM,
13
+ },
14
+ });
15
+ export { style };
@@ -1,5 +1,4 @@
1
1
  import { FC, ReactNode } from "react";
2
- import { StyleProp, ViewStyle } from "react-native";
3
2
  interface SliderProps {
4
3
  readonly children: ReactNode[];
5
4
  readonly active?: number;
@@ -8,13 +7,9 @@ interface SliderProps {
8
7
  readonly minDistanceForAction?: number;
9
8
  readonly gesturesEnabled?: boolean;
10
9
  readonly paginationEnabled?: boolean;
11
- readonly paginationStyle?: StyleProp<ViewStyle>;
12
- readonly paginationItemStyle?: StyleProp<ViewStyle>;
13
- readonly paginationActiveItemStyle?: StyleProp<ViewStyle>;
14
10
  readonly onSliderStart?: () => void;
15
11
  readonly onSliderEnd?: () => void;
16
12
  readonly onChanged?: (index: number) => void;
17
- readonly paginationRenderItem?: (index: number) => ReactNode;
18
13
  }
19
14
  declare const Slider: FC<SliderProps>;
20
15
  export { Slider };
@@ -1,9 +1,9 @@
1
1
  import React, { useCallback, useEffect, useRef, useState } from "react";
2
- import { Animated, I18nManager, PanResponder, StyleSheet, View, } from "react-native";
3
- import { Pagination } from "./Pagination";
2
+ import { Animated, I18nManager, PanResponder, StyleSheet, View } from "react-native";
3
+ import { Bullets } from "./Bullets";
4
4
  import { style } from "./Slider.style";
5
5
  const DEFAULT_WIDTH = 200;
6
- const Slider = ({ children, active = 0, loop = false, minDistanceToCapture = 5, minDistanceForAction = 0.2, gesturesEnabled = true, paginationEnabled = true, paginationStyle, paginationItemStyle, paginationActiveItemStyle, onSliderStart, onSliderEnd, onChanged, paginationRenderItem, }) => {
6
+ const Slider = ({ children, active = 0, loop = false, minDistanceToCapture = 5, minDistanceForAction = 0.2, gesturesEnabled = true, paginationEnabled = true, onSliderStart, onSliderEnd, onChanged, }) => {
7
7
  const flatennedChildren = children.flat();
8
8
  const count = flatennedChildren.length;
9
9
  const [width, setWidth] = useState(0);
@@ -127,6 +127,6 @@ const Slider = ({ children, active = 0, loop = false, minDistanceToCapture = 5,
127
127
  },
128
128
  style.sliderAreaStyle,
129
129
  ]), ...panResponder.panHandlers }, flatennedChildren.map((child, index) => (React.createElement(View, { key: index, style: { width }, testID: "slider-child" }, child)))),
130
- paginationEnabled && (React.createElement(Pagination, { activeIndex: getActiveIndex(), count: count, paginationActiveItemStyle: paginationActiveItemStyle, paginationItemStyle: paginationItemStyle, paginationStyle: paginationStyle, renderItem: paginationRenderItem, onChange: (index) => goTo(index) }))));
130
+ paginationEnabled && (React.createElement(Bullets, { activeIndex: getActiveIndex(), count: count, testID: "slider-bullets", onChange: (index) => goTo(index) }))));
131
131
  };
132
132
  export { Slider };
@@ -0,0 +1,8 @@
1
+ import { FC } from "react";
2
+ interface SliderDotsProps {
3
+ readonly count: number;
4
+ readonly index: number;
5
+ readonly onChange: (index: number) => void;
6
+ }
7
+ declare const SliderDots: FC<SliderDotsProps>;
8
+ export { SliderDots };
@@ -0,0 +1,16 @@
1
+ import React from "react";
2
+ import { TouchableWithoutFeedback, View } from "react-native";
3
+ import { theme } from "../../../../../infrastructure/ui/theme/theme";
4
+ import { style } from "./SliderDots.style";
5
+ const { colorContent } = theme();
6
+ const SliderDot = ({ diameter, color }) => (React.createElement(View, { style: [style.sliderDot, { width: diameter, height: diameter, backgroundColor: color, borderRadius: diameter }] }));
7
+ const SliderDots = () => {
8
+ return (React.createElement(View, { style: style.sliderDots },
9
+ React.createElement(TouchableWithoutFeedback, null,
10
+ React.createElement(SliderDot, { color: colorContent, diameter: 8 })),
11
+ React.createElement(TouchableWithoutFeedback, null,
12
+ React.createElement(SliderDot, { color: colorContent, diameter: 8 })),
13
+ React.createElement(TouchableWithoutFeedback, null,
14
+ React.createElement(SliderDot, { color: colorContent, diameter: 8 }))));
15
+ };
16
+ export { SliderDots };
@@ -0,0 +1,12 @@
1
+ declare const style: {
2
+ sliderDot: {
3
+ marginHorizontal: number;
4
+ };
5
+ sliderDots: {
6
+ alignItems: "center";
7
+ flexDirection: "row";
8
+ justifyContent: "center";
9
+ paddingVertical: number;
10
+ };
11
+ };
12
+ export { style };
@@ -0,0 +1,15 @@
1
+ import { StyleSheet } from "react-native";
2
+ import { theme } from "../../../../../infrastructure/ui/theme/theme";
3
+ const { spaceM } = theme();
4
+ const style = StyleSheet.create({
5
+ sliderDot: {
6
+ marginHorizontal: 3,
7
+ },
8
+ sliderDots: {
9
+ alignItems: "center",
10
+ flexDirection: "row",
11
+ justifyContent: "center",
12
+ paddingVertical: spaceM,
13
+ },
14
+ });
15
+ export { style };
@@ -22,7 +22,7 @@ const SelectField = ({ title, placeholder, value, options, style: customStyle, o
22
22
  React.createElement(Modal, { testID: "select-field-modal", visible: modalVisible, scroll: true, showCloseButton: true, onClose: handleOnModalClose },
23
23
  React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
24
24
  title && (React.createElement(Text, { level: 2, style: style.modalTitle }, title)),
25
- options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: "select-field-option", underlayColor: colorGrayscaleS, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
25
+ options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], underlayColor: colorGrayscaleS, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
26
26
  React.createElement(Text, { color: value === optionValue ? COLOR.GRAYSCALE_M : COLOR.CONTENT, level: 3, style: [style.optionText, customStyle?.optionText] }, label))))))));
27
27
  };
28
28
  export { SelectField };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lookiero/checkout",
3
- "version": "3.6.0-beta.9",
3
+ "version": "3.6.1-beta.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "files": [
@@ -36,7 +36,10 @@
36
36
  "@sentry/react-native": "^4.13.0",
37
37
  "inline-style-prefixer": "6.0.1",
38
38
  "lodash": "^4.17.21",
39
+ "react-native-gesture-handler": "^2.12.0",
39
40
  "react-native-keyboard-aware-scroll-view": "^0.9.5",
41
+ "react-native-reanimated": "^3.3.0",
42
+ "react-native-reanimated-carousel": "^3.4.0",
40
43
  "react-native-safe-area-context": "^4.5.0",
41
44
  "react-native-svg": "^13.4.0",
42
45
  "tiny-invariant": "^1.3.1",
@@ -77,6 +80,7 @@
77
80
  "@pact-foundation/pact-node": "^10.17.6",
78
81
  "@react-native-firebase/analytics": "10.5.1",
79
82
  "@react-native-firebase/app": "10.5.0",
83
+ "@testing-library/jest-native": "^5.4.2",
80
84
  "@testing-library/react-native": "^11.5.0",
81
85
  "@trivago/prettier-plugin-sort-imports": "^3.3.0",
82
86
  "@types/jest": "^29.2.4",
@@ -1,6 +0,0 @@
1
- import { ProcessManagerFunction } from "@lookiero/messaging";
2
- import { CheckoutBookingExpired } from "../model/checkoutBookingExpired";
3
- interface CreateNotificationWhenCheckoutBookingExpiredFunction extends ProcessManagerFunction<CheckoutBookingExpired> {
4
- }
5
- declare const createNotificationWhenCheckoutBookingExpired: CreateNotificationWhenCheckoutBookingExpiredFunction;
6
- export { createNotificationWhenCheckoutBookingExpired };
@@ -1,13 +0,0 @@
1
- import { v4 as uuid } from "uuid";
2
- import { I18nMessages } from "../../../infrastructure/ui/i18n/i18n";
3
- import { createNotification } from "../../../shared/notifications/domain/notification/command/createNotification";
4
- import { NotificationLevel } from "../../../shared/notifications/domain/notification/model/notification";
5
- const createNotificationWhenCheckoutBookingExpired = ({ commandBus }) => async () => {
6
- await commandBus(createNotification({
7
- aggregateId: uuid(),
8
- level: NotificationLevel.ERROR,
9
- titleI18nKey: undefined,
10
- bodyI18nKey: I18nMessages.CHECKOUT_TOAST_BOOKING_EXPIRED,
11
- }));
12
- };
13
- export { createNotificationWhenCheckoutBookingExpired };
@@ -1,10 +0,0 @@
1
- import { CommandStatus } from "@lookiero/messaging-react";
2
- interface IncrementIntroShownCountFunction {
3
- (): Promise<void>;
4
- }
5
- type UseIncrementIntroShownCount = [incrementIntroShownCount: IncrementIntroShownCountFunction, status: CommandStatus];
6
- interface UseIncrementIntroShownCountFunction {
7
- (): UseIncrementIntroShownCount;
8
- }
9
- declare const useIncrementIntroShownCount: UseIncrementIntroShownCountFunction;
10
- export { useIncrementIntroShownCount };
@@ -1,11 +0,0 @@
1
- import { useCallback } from "react";
2
- import { useViewIntroShownCount } from "../../../projection/uiSetting/react/useViewIntroShownCount";
3
- import { UISettings } from "../../../ui/settings/UISettings";
4
- import { useUpdateUiSetting } from "./useUpdateUiSetting";
5
- const useIncrementIntroShownCount = () => {
6
- const [update, status] = useUpdateUiSetting();
7
- const [introShownCount] = useViewIntroShownCount();
8
- const incrementIntroShownCount = useCallback(() => update({ key: UISettings.INTRO_SHOWN_COUNT, value: introShownCount + 1 }), [introShownCount, update]);
9
- return [incrementIntroShownCount, status];
10
- };
11
- export { useIncrementIntroShownCount };
@@ -1,6 +0,0 @@
1
- import { QueryStatus } from "@lookiero/messaging-react";
2
- interface UseShouldIntroBeShownFunction {
3
- (): [boolean, QueryStatus];
4
- }
5
- declare const useShouldIntroBeShown: UseShouldIntroBeShownFunction;
6
- export { useShouldIntroBeShown };
@@ -1,7 +0,0 @@
1
- import { useViewIntroShownCount } from "./useViewIntroShownCount";
2
- const MAX_INTRO_SHOWN_COUNT = 2;
3
- const useShouldIntroBeShown = () => {
4
- const [introShownCount, introShownCountStatus] = useViewIntroShownCount();
5
- return [introShownCount < MAX_INTRO_SHOWN_COUNT, introShownCountStatus];
6
- };
7
- export { useShouldIntroBeShown };
@@ -1,6 +0,0 @@
1
- import { QueryStatus } from "@lookiero/messaging-react";
2
- interface UseViewIntroShownCountFunction {
3
- (): [number, QueryStatus];
4
- }
5
- declare const useViewIntroShownCount: UseViewIntroShownCountFunction;
6
- export { useViewIntroShownCount };
@@ -1,9 +0,0 @@
1
- import { UISettings } from "../../../ui/settings/UISettings";
2
- import { useViewUiSettingByKey } from "./useViewUiSettingByKey";
3
- const useViewIntroShownCount = () => {
4
- const [introShownCount, introShownCountStatus] = useViewUiSettingByKey({
5
- key: UISettings.INTRO_SHOWN_COUNT,
6
- });
7
- return [introShownCount?.value || 0, introShownCountStatus];
8
- };
9
- export { useViewIntroShownCount };
@@ -1,13 +0,0 @@
1
- import { FC, ReactNode } from "react";
2
- import { StyleProp, ViewStyle } from "react-native";
3
- import { Edge } from "react-native-safe-area-context";
4
- type SafeAreaScrollViewStyle = "safeAreaView" | "scrollView";
5
- interface SafeAreaScrollViewProps {
6
- readonly children: ReactNode;
7
- readonly footer?: ReactNode;
8
- readonly scrollerPaddingTop?: number;
9
- readonly edges?: Edge[];
10
- readonly style?: Partial<Record<SafeAreaScrollViewStyle, StyleProp<ViewStyle>>>;
11
- }
12
- declare const SafeAreaScrollView: FC<SafeAreaScrollViewProps>;
13
- export { SafeAreaScrollView };
@@ -1,19 +0,0 @@
1
- import React from "react";
2
- import { ScrollView } from "react-native";
3
- import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
4
- import { theme } from "../../theme/theme";
5
- import { style } from "./SafeAreaScrollView.style.ts";
6
- const { spaceXXL } = theme();
7
- const SafeAreaScrollView = ({ children, footer, edges = ["top", "left", "right"], style: customStyle, scrollerPaddingTop = 0, }) => {
8
- const { bottom: safeAreaInsetBottom } = useSafeAreaInsets();
9
- return (React.createElement(SafeAreaView, { edges: edges, style: [style.safeAreaView, customStyle?.safeAreaView] },
10
- React.createElement(ScrollView, { contentContainerStyle: [
11
- {
12
- paddingTop: scrollerPaddingTop,
13
- paddingBottom: safeAreaInsetBottom + spaceXXL,
14
- },
15
- customStyle?.scrollView,
16
- ] }, children),
17
- footer));
18
- };
19
- export { SafeAreaScrollView };
@@ -1,6 +0,0 @@
1
- declare const style: {
2
- safeAreaView: {
3
- flex: number;
4
- };
5
- };
6
- export { style };
@@ -1,7 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- const style = StyleSheet.create({
3
- safeAreaView: {
4
- flex: 1,
5
- },
6
- });
7
- export { style };
@@ -1,3 +0,0 @@
1
- import { FC } from "react";
2
- declare const Header: FC;
3
- export { Header };
@@ -1,10 +0,0 @@
1
- import React from "react";
2
- import { ButtonIcon } from "../../../../../../shared/ui/components/molecules/buttonIcon/ButtonIcon";
3
- import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
4
- import { Logo } from "../logo/Logo";
5
- import { style } from "./Header.style";
6
- const Header = () => (React.createElement(React.Fragment, null,
7
- React.createElement(Logo, { style: style.logo }),
8
- React.createElement(ButtonIconPlaceholder, null),
9
- React.createElement(ButtonIcon, { name: "menu", testID: "menu-button-icon", onPress: () => void 0 })));
10
- export { Header };
@@ -1,9 +0,0 @@
1
- declare const HEADER_HEIGHT: number;
2
- declare const style: {
3
- logo: {
4
- left: number;
5
- position: "absolute";
6
- top: number;
7
- };
8
- };
9
- export { style, HEADER_HEIGHT };
@@ -1,12 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../../../theme/theme";
3
- const { spaceXXXL } = theme();
4
- const HEADER_HEIGHT = spaceXXXL;
5
- const style = StyleSheet.create({
6
- logo: {
7
- left: 0,
8
- position: "absolute",
9
- top: 0,
10
- },
11
- });
12
- export { style, HEADER_HEIGHT };
@@ -1,13 +0,0 @@
1
- import { FC, ReactNode } from "react";
2
- import { StyleProp, ViewStyle } from "react-native";
3
- import { Edge } from "react-native-safe-area-context";
4
- type SafeAreaScrollViewStyle = "safeAreaView" | "scrollView";
5
- interface SafeAreaScrollViewProps {
6
- readonly children: ReactNode;
7
- readonly footer?: ReactNode;
8
- readonly scrollerPaddingTop?: number;
9
- readonly edges?: Edge[];
10
- readonly style?: Partial<Record<SafeAreaScrollViewStyle, StyleProp<ViewStyle>>>;
11
- }
12
- declare const SafeAreaScrollView: FC<SafeAreaScrollViewProps>;
13
- export { SafeAreaScrollView };
@@ -1,19 +0,0 @@
1
- import React from "react";
2
- import { ScrollView } from "react-native";
3
- import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
4
- import { theme } from "../../../theme/theme.js";
5
- import { style } from "./SafeAreaScrollView.style.ts";
6
- const { spaceXXL } = theme();
7
- const SafeAreaScrollView = ({ children, footer, edges = ["top", "left", "right"], style: customStyle, scrollerPaddingTop = 0, }) => {
8
- const { bottom: safeAreaInsetBottom } = useSafeAreaInsets();
9
- return (React.createElement(SafeAreaView, { edges: edges, style: [style.safeAreaView, customStyle?.safeAreaView] },
10
- React.createElement(ScrollView, { contentContainerStyle: [
11
- {
12
- paddingTop: scrollerPaddingTop,
13
- paddingBottom: safeAreaInsetBottom + spaceXXL,
14
- },
15
- customStyle?.scrollView,
16
- ] }, children),
17
- footer));
18
- };
19
- export { SafeAreaScrollView };
@@ -1,6 +0,0 @@
1
- declare const style: {
2
- safeAreaView: {
3
- flex: number;
4
- };
5
- };
6
- export { style };
@@ -1,7 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- const style = StyleSheet.create({
3
- safeAreaView: {
4
- flex: 1,
5
- },
6
- });
7
- export { style };
@@ -1,2 +0,0 @@
1
- declare const usePaymentInstrumentUpdateEvents: () => void;
2
- export { usePaymentInstrumentUpdateEvents };
@@ -1,28 +0,0 @@
1
- import { useEvent } from "@lookiero/event";
2
- import { useCallback, useEffect } from "react";
3
- import { useCreateNotification } from "../../../shared/notifications";
4
- import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
5
- import { I18nMessages } from "../i18n/i18n";
6
- import { useToast } from "./useToast";
7
- const PAYMENT_ERROR = "ERROR";
8
- const PAYMENT_SUCCESS = "PAYMENT_INSTRUMENT_UPDATED";
9
- const usePaymentInstrumentUpdateEvents = () => {
10
- const { subscribe, unsubscribe } = useEvent();
11
- const { showError, showSuccess } = useToast();
12
- const [createNotification] = useCreateNotification({ contextId: MESSAGING_CONTEXT_ID });
13
- const onSuccess = useCallback(({ message }) => showSuccess({ message: message.id }), [showSuccess]);
14
- const onError = useCallback(({ error }) => {
15
- if (error.toaster) {
16
- showError({ message: error.toaster.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR });
17
- }
18
- }, [showError]);
19
- useEffect(() => {
20
- subscribe({ event: PAYMENT_ERROR }, onError);
21
- subscribe({ event: PAYMENT_SUCCESS }, onSuccess);
22
- return () => {
23
- unsubscribe({ event: PAYMENT_ERROR }, onError);
24
- unsubscribe({ event: PAYMENT_SUCCESS }, onSuccess);
25
- };
26
- }, [subscribe, unsubscribe, createNotification, onError, onSuccess]);
27
- };
28
- export { usePaymentInstrumentUpdateEvents };
@@ -1,11 +0,0 @@
1
- interface ShowErrorFunctionArgs {
2
- readonly message: string;
3
- }
4
- interface ShowErrorFunction {
5
- (args: ShowErrorFunctionArgs): void;
6
- }
7
- declare const useToast: () => {
8
- showError: ShowErrorFunction;
9
- showSuccess: ShowErrorFunction;
10
- };
11
- export { useToast };