@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.
- package/dist/infrastructure/projection/checkout/checkout.js +12 -0
- package/dist/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.js +12 -7
- package/dist/infrastructure/ui/components/layouts/layout/dummyLayout/useScrollViewRef.d.ts +15 -0
- package/dist/infrastructure/ui/components/layouts/layout/dummyLayout/useScrollViewRef.js +14 -0
- package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.js +2 -2
- package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.js +1 -1
- package/dist/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.js +1 -1
- package/dist/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js +1 -1
- package/dist/infrastructure/ui/views/App.js +5 -1
- package/dist/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.js +1 -1
- package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.js +4 -6
- package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.d.ts +3 -10
- package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.js +3 -10
- package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.js +3 -4
- package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.style.d.ts +0 -3
- package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.style.js +0 -3
- package/dist/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.js +7 -15
- package/dist/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.style.d.ts +0 -1
- package/dist/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.style.js +0 -1
- package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.js +2 -3
- package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.style.d.ts +0 -3
- package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.style.js +0 -3
- package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.js +3 -4
- package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.style.d.ts +3 -10
- package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.style.js +3 -10
- package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.js +5 -6
- package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.style.d.ts +0 -6
- package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.style.js +0 -6
- package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.js +3 -4
- package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.style.d.ts +3 -10
- package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.style.js +3 -10
- package/dist/shared/ui/components/atoms/input/Input.js +1 -1
- package/dist/shared/ui/components/layouts/carousel/Carousel.d.ts +11 -0
- package/dist/shared/ui/components/layouts/carousel/Carousel.js +31 -0
- package/dist/shared/ui/components/layouts/carousel/Carousel.style.d.ts +17 -0
- package/dist/shared/ui/components/layouts/carousel/Carousel.style.js +7 -0
- package/dist/shared/ui/components/layouts/carousel/Carousel2.d.ts +16 -0
- package/dist/shared/ui/components/layouts/carousel/Carousel2.js +72 -0
- package/dist/shared/ui/components/layouts/carousel/DragComponent.d.ts +3 -0
- package/dist/shared/ui/components/layouts/carousel/DragComponent.js +48 -0
- package/dist/shared/ui/components/layouts/slider/Bullets.d.ts +10 -0
- package/dist/shared/ui/components/layouts/slider/Bullets.js +29 -0
- package/dist/shared/ui/components/layouts/slider/Bullets.style.d.ts +12 -0
- package/dist/shared/ui/components/layouts/slider/Bullets.style.js +15 -0
- package/dist/shared/ui/components/layouts/slider/Slider.d.ts +0 -5
- package/dist/shared/ui/components/layouts/slider/Slider.js +4 -4
- package/dist/shared/ui/components/layouts/slider/SliderDots.d.ts +8 -0
- package/dist/shared/ui/components/layouts/slider/SliderDots.js +16 -0
- package/dist/shared/ui/components/layouts/slider/SliderDots.style.d.ts +12 -0
- package/dist/shared/ui/components/layouts/slider/SliderDots.style.js +15 -0
- package/dist/shared/ui/components/molecules/selectField/SelectField.js +1 -1
- package/package.json +5 -1
- package/dist/domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired.d.ts +0 -6
- package/dist/domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired.js +0 -13
- package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.d.ts +0 -10
- package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.js +0 -11
- package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.d.ts +0 -6
- package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.js +0 -7
- package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.d.ts +0 -6
- package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.js +0 -9
- package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.d.ts +0 -13
- package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.js +0 -19
- package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.style.ts.d.ts +0 -6
- package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.style.ts.js +0 -7
- package/dist/infrastructure/ui/components/templates/header/header/Header.d.ts +0 -3
- package/dist/infrastructure/ui/components/templates/header/header/Header.js +0 -10
- package/dist/infrastructure/ui/components/templates/header/header/Header.style.d.ts +0 -9
- package/dist/infrastructure/ui/components/templates/header/header/Header.style.js +0 -12
- package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.d.ts +0 -13
- package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.js +0 -19
- package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.style.ts.d.ts +0 -6
- package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.style.ts.js +0 -7
- package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.d.ts +0 -2
- package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.js +0 -28
- package/dist/infrastructure/ui/hooks/useToast.d.ts +0 -11
- package/dist/infrastructure/ui/hooks/useToast.js +0 -49
- package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.d.ts +0 -7
- package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.js +0 -25
- package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.style.d.ts +0 -16
- package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.style.js +0 -19
- package/dist/infrastructure/ui/views/intro/Intro.d.ts +0 -6
- package/dist/infrastructure/ui/views/intro/Intro.js +0 -52
- package/dist/infrastructure/ui/views/intro/Intro.style.d.ts +0 -52
- package/dist/infrastructure/ui/views/intro/Intro.style.js +0 -55
- package/dist/infrastructure/ui/views/item/Item.style.d.ts +0 -15
- package/dist/infrastructure/ui/views/item/Item.style.js +0 -18
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.d.ts +0 -26
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.js +0 -44
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.d.ts +0 -45
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.js +0 -53
- package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.d.ts +0 -7
- package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.js +0 -25
- package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.d.ts +0 -16
- package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.js +0 -19
- package/dist/infrastructure/ui/views/navigation/Navigation.d.ts +0 -21
- package/dist/infrastructure/ui/views/navigation/Navigation.js +0 -45
- package/dist/infrastructure/ui/views/navigation/Navigation.style.d.ts +0 -5
- package/dist/infrastructure/ui/views/navigation/Navigation.style.js +0 -30
- package/dist/infrastructure/ui/views/navigation/components/header/Header.d.ts +0 -46
- package/dist/infrastructure/ui/views/navigation/components/header/Header.js +0 -120
- package/dist/infrastructure/ui/views/navigation/components/header/Header.style.d.ts +0 -31
- package/dist/infrastructure/ui/views/navigation/components/header/Header.style.js +0 -34
- package/dist/infrastructure/ui/views/navigation/components/header/Logo.d.ts +0 -7
- package/dist/infrastructure/ui/views/navigation/components/header/Logo.js +0 -11
- package/dist/infrastructure/ui/views/navigation/components/header/Logo.style.d.ts +0 -7
- package/dist/infrastructure/ui/views/navigation/components/header/Logo.style.js +0 -8
- package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.d.ts +0 -12
- package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.js +0 -24
- package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.style.d.ts +0 -15
- package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.style.js +0 -18
- package/dist/shared/notifications/domain/notification/command/createNotification.d.ts +0 -17
- package/dist/shared/notifications/domain/notification/command/createNotification.js +0 -7
- package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.d.ts +0 -21
- package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.js +0 -22
- package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.d.ts +0 -12
- package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.js +0 -24
- package/dist/shared/notifications/infrastructure/ui/components/Notifications.d.ts +0 -9
- package/dist/shared/notifications/infrastructure/ui/components/Notifications.js +0 -20
- package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.d.ts +0 -36
- package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.js +0 -31
- package/dist/shared/tracking/infrastructure/usePageView.d.ts +0 -13
- package/dist/shared/tracking/infrastructure/usePageView.js +0 -27
- package/dist/shared/ui/components/atoms/error/Error.style.d.ts +0 -6
- 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,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,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
|
|
3
|
-
import {
|
|
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,
|
|
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(
|
|
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,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,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],
|
|
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.
|
|
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,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,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,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,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 };
|
package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.d.ts
DELETED
|
@@ -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 };
|
package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.js
DELETED
|
@@ -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,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 };
|