@lookiero/checkout 3.10.0 → 4.0.0-beta.0

package/dist/shared/tracking/infrastructure/useTrackCheckout.js

@@ -0,0 +1,30 @@
+import { useCallback } from "react";
+import { PROJECT } from "../../../infrastructure/tracking/tracking";
+import { TrackingEvent, TrackingEventCategory } from "../tracking";
+import { useEmitUserEvent } from "./useEmitUserEvent";
+const useTrackCheckout = ({ page, country, checkoutId }) => {
+    const emitUserEvent = useEmitUserEvent();
+    const trackCheckout = useCallback(({ checkoutItems, checkoutItemId, checkoutValue, isFirstOrder, orderNumber, productVariantId, sizeChange, userId, }) => {
+        if (!checkoutId) {
+            return;
+        }
+        const checkoutTrackingEvent = {
+            event: TrackingEvent.CHECKOUT,
+            eventCategory: TrackingEventCategory.ECOMMERCE,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+            checkoutItems,
+            checkoutItemId,
+            checkoutValue,
+            isFirstOrder,
+            orderNumber,
+            productVariantId,
+            sizeChange,
+            userId,
+        };
+        emitUserEvent(checkoutTrackingEvent);
+    }, [checkoutId, country, emitUserEvent, page]);
+    return trackCheckout;
+};
+export { useTrackCheckout };

package/dist/shared/tracking/tracking.d.ts

@@ -16,10 +16,12 @@ declare enum TrackingEvent {
     PRESS_MENU = "press_menu",
     PRESS_BACK = "press_back",
     PRESS_NEXT = "press_next",
-    PRESS_PREVIOUS = "press_previous"
+    PRESS_PREVIOUS = "press_previous",
+    CHECKOUT = "checkout"
 }
 declare enum TrackingEventCategory {
-    NAVIGATION = "navigation"
+    NAVIGATION = "navigation",
+    ECOMMERCE = "ecommerce"
 }
 interface BaseTrackingEvent {
     readonly event: TrackingEvent;
@@ -82,5 +84,15 @@ interface PressPreviousTrackingEvent extends BaseTrackingEvent {
     readonly from: string;
     readonly to: string;
 }
-export type { BaseTrackingEvent, ChangeFeedbackTrackingEvent, ImageViewTrackingEvent, ItemPageViewTrackingEvent, KeepItemTrackingEvent, PageViewTrackingEvent, PressContinueTrackingEvent, PressItemTrackingEvent, PressPricingTrackingEvent, ReplaceItemTrackingEvent, ResetItemTrackingEvent, ReturnItemTrackingEvent, TabViewTrackingEvent, PressMenuTrackingEvent, PressBackTrackingEvent, PressNextTrackingEvent, PressPreviousTrackingEvent, };
+interface CheckoutTrackingEvent extends BaseTrackingEvent {
+    readonly userId: string;
+    readonly orderNumber: number;
+    readonly checkoutItems: number;
+    readonly productVariantId: string[];
+    readonly checkoutItemId: string[];
+    readonly checkoutValue: number;
+    readonly sizeChange: string[];
+    readonly isFirstOrder: boolean;
+}
+export type { BaseTrackingEvent, ChangeFeedbackTrackingEvent, CheckoutTrackingEvent, ImageViewTrackingEvent, ItemPageViewTrackingEvent, KeepItemTrackingEvent, PageViewTrackingEvent, PressContinueTrackingEvent, PressItemTrackingEvent, PressPricingTrackingEvent, ReplaceItemTrackingEvent, ResetItemTrackingEvent, ReturnItemTrackingEvent, TabViewTrackingEvent, PressMenuTrackingEvent, PressBackTrackingEvent, PressNextTrackingEvent, PressPreviousTrackingEvent, };
 export { TrackingEvent, TrackingEventCategory };

package/dist/shared/tracking/tracking.js

@@ -15,9 +15,11 @@ var TrackingEvent;
     TrackingEvent["PRESS_BACK"] = "press_back";
     TrackingEvent["PRESS_NEXT"] = "press_next";
     TrackingEvent["PRESS_PREVIOUS"] = "press_previous";
+    TrackingEvent["CHECKOUT"] = "checkout";
 })(TrackingEvent || (TrackingEvent = {}));
 var TrackingEventCategory;
 (function (TrackingEventCategory) {
     TrackingEventCategory["NAVIGATION"] = "navigation";
+    TrackingEventCategory["ECOMMERCE"] = "ecommerce";
 })(TrackingEventCategory || (TrackingEventCategory = {}));
 export { TrackingEvent, TrackingEventCategory };

package/dist/shared/ui/components/atoms/error/Error.style.d.ts

@@ -0,0 +1,6 @@
+declare const style: {
+    error: {
+        color: string;
+    };
+};
+export { style };

package/dist/shared/ui/components/atoms/error/Error.style.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+const { colorPrimary } = theme();
+const style = StyleSheet.create({
+    error: {
+        color: colorPrimary,
+    },
+});
+export { style };

package/dist/shared/ui/components/layouts/slider/Bullets.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+interface BulletsProps {
+    readonly activeIndex: number;
+    readonly onChange: (index: number) => void;
+    readonly count: number;
+    readonly maxBullets?: number;
+    readonly testID?: string;
+}
+declare const Bullets: FC<BulletsProps>;
+export { Bullets };

package/dist/shared/ui/components/layouts/slider/Bullets.js

@@ -0,0 +1,29 @@
+import { animated, useSpring } from "@react-spring/native";
+import React from "react";
+import { TouchableHighlight, View } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+import { style } from "./Bullets.style";
+const { colorContent, colorGrayscaleM } = theme();
+const colorTransparent = "rgba(0,0,0,0)";
+const MAX = 7;
+const DIAMETER_MAX = 8;
+const DIAMETER_MIN = 2;
+const Bullet = ({ index, activeIndex, maxBullets, onChange }) => {
+    const pivot = Math.floor(maxBullets / 2) + 1;
+    const delta = Math.abs(index - activeIndex);
+    const diameter = delta > 1 ? DIAMETER_MAX - delta * DIAMETER_MIN : DIAMETER_MAX;
+    const color = delta === 0 ? colorContent : colorGrayscaleM;
+    const springs = useSpring({ diameter, color });
+    return delta >= pivot ? null : (React.createElement(TouchableHighlight, { underlayColor: colorTransparent, onPress: () => onChange(index) },
+        React.createElement(animated.View, { accessibilityState: { selected: delta === 0 }, testID: "bullet", style: [
+                style.bullet,
+                {
+                    width: springs.diameter,
+                    height: springs.diameter,
+                    backgroundColor: springs.color,
+                    borderRadius: springs.diameter,
+                },
+            ] })));
+};
+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 })))));
+export { Bullets };

package/dist/shared/ui/components/layouts/slider/Bullets.style.d.ts

@@ -0,0 +1,12 @@
+declare const style: {
+    bullet: {
+        marginHorizontal: number;
+    };
+    bullets: {
+        alignItems: "center";
+        flexDirection: "row";
+        justifyContent: "center";
+        paddingVertical: number;
+    };
+};
+export { style };

package/dist/shared/ui/components/layouts/slider/Bullets.style.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+const { spaceM } = theme();
+const style = StyleSheet.create({
+    bullet: {
+        marginHorizontal: 3,
+    },
+    bullets: {
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "center",
+        paddingVertical: spaceM,
+    },
+});
+export { style };

package/dist/shared/ui/components/layouts/slider/Pagination.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+interface PaginationProps {
+    readonly touchable?: boolean;
+    readonly paginationStyle?: StyleProp<ViewStyle>;
+    readonly paginationItemStyle?: StyleProp<ViewStyle>;
+    readonly paginationActiveItemStyle?: StyleProp<ViewStyle>;
+    readonly count?: number;
+    readonly activeIndex?: number;
+    readonly onChange: (index: number) => void;
+    readonly renderItem?: (index: number) => ReactNode;
+}
+declare const Pagination: FC<PaginationProps>;
+export { Pagination };

package/dist/shared/ui/components/layouts/slider/Pagination.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { style } from "./Pagination.style";
+const Pagination = ({ touchable = true, paginationStyle, paginationItemStyle, paginationActiveItemStyle, count = 0, activeIndex = 0, renderItem, onChange, }) => (React.createElement(View, { style: [style.paginationWrapper, paginationStyle], testID: "slider-pagination" }, Array.from(Array(count).keys()).map((index) => (React.createElement(View, { key: index, style: style.paginationContainer },
+    React.createElement(Pressable, { testID: "slider-pagination-item", style: [
+            style.paginationItem,
+            activeIndex === index && style.active,
+            paginationItemStyle,
+            activeIndex === index && paginationActiveItemStyle,
+        ], onPress: !touchable ? undefined : () => onChange(index) }, renderItem?.(index)))))));
+export { Pagination };

package/dist/shared/ui/components/layouts/slider/Pagination.style.d.ts

@@ -0,0 +1,23 @@
+declare const style: {
+    active: {
+        backgroundColor: string;
+    };
+    paginationContainer: {
+        margin: number;
+    };
+    paginationItem: {
+        backgroundColor: string;
+        borderRadius: number;
+        height: number;
+        width: number;
+    };
+    paginationWrapper: {
+        alignItems: "center";
+        bottom: number;
+        flexDirection: "row";
+        justifyContent: "center";
+        position: "absolute";
+        width: string;
+    };
+};
+export { style };

package/dist/shared/ui/components/layouts/slider/Pagination.style.js

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+const { colorGrayscaleS, colorGrayscaleXL } = theme();
+const DOT_SIZE = 8;
+const style = StyleSheet.create({
+    active: {
+        backgroundColor: colorGrayscaleXL,
+    },
+    paginationContainer: {
+        margin: 3,
+    },
+    paginationItem: {
+        backgroundColor: colorGrayscaleS,
+        borderRadius: DOT_SIZE / 2,
+        height: DOT_SIZE,
+        width: DOT_SIZE,
+    },
+    paginationWrapper: {
+        alignItems: "center",
+        bottom: 10,
+        flexDirection: "row",
+        justifyContent: "center",
+        position: "absolute",
+        width: "100%",
+    },
+});
+export { style };

package/dist/shared/ui/components/layouts/slider/Slider.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from "react";
+interface SliderProps {
+    readonly children: ReactNode[];
+    readonly active?: number;
+    readonly loop?: boolean;
+    readonly minDistanceToCapture?: number;
+    readonly minDistanceForAction?: number;
+    readonly gesturesEnabled?: boolean;
+    readonly paginationEnabled?: boolean;
+    readonly onSliderStart?: () => void;
+    readonly onSliderEnd?: () => void;
+    readonly onChanged?: (index: number) => void;
+}
+declare const Slider: FC<SliderProps>;
+export { Slider };

package/dist/shared/ui/components/layouts/slider/Slider.js

@@ -0,0 +1,132 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Animated, I18nManager, PanResponder, StyleSheet, View } from "react-native";
+import { Bullets } from "./Bullets";
+import { style } from "./Slider.style";
+const DEFAULT_WIDTH = 200;
+const Slider = ({ children, active = 0, loop = false, minDistanceToCapture = 5, minDistanceForAction = 0.2, gesturesEnabled = true, paginationEnabled = true, onSliderStart, onSliderEnd, onChanged, }) => {
+    const flatennedChildren = children.flat();
+    const count = flatennedChildren.length;
+    const [width, setWidth] = useState(0);
+    const widthRef = useRef(width);
+    const activeIndex = useRef(active);
+    const animatedValueX = useRef(0);
+    const animatedValueY = useRef(0);
+    const pan = useRef(new Animated.ValueXY()).current;
+    const started = useRef(false);
+    const panResponder = useRef(PanResponder.create({
+        onPanResponderTerminationRequest: () => false,
+        onMoveShouldSetPanResponder: () => gesturesEnabled,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        onMoveShouldSetPanResponderCapture: (_e, gestureState) => {
+            if (!gesturesEnabled) {
+                return false;
+            }
+            startAnimation();
+            const allow = Math.abs(gestureState.dx) > minDistanceToCapture;
+            return allow;
+        },
+        onPanResponderGrant: () => fixState(),
+        onPanResponderMove: Animated.event([null, { dx: pan.x }], {
+            useNativeDriver: false,
+        }),
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        onPanResponderRelease: (_e, gesture) => {
+            const correction = gesture.moveX - gesture.x0;
+            if (Math.abs(correction) < widthRef.current * minDistanceForAction) {
+                spring({ x: 0, y: 0 });
+            }
+            else {
+                changeIndex(correction > 0 ? (I18nManager.isRTL ? 1 : -1) : I18nManager.isRTL ? -1 : 1);
+            }
+        },
+        onPanResponderEnd: () => endAnimation(),
+    })).current;
+    const startAnimation = useCallback(() => {
+        if (!started.current) {
+            onSliderStart?.();
+            started.current = true;
+        }
+    }, [onSliderStart]);
+    const endAnimation = useCallback(() => {
+        if (started.current) {
+            onSliderEnd?.();
+            started.current = false;
+        }
+    }, [onSliderEnd]);
+    const fixState = useCallback(() => {
+        animatedValueX.current = widthRef.current * activeIndex.current * (I18nManager.isRTL ? 1 : -1);
+        animatedValueY.current = 0;
+        pan.setOffset({
+            x: animatedValueX.current,
+            y: animatedValueY.current,
+        });
+        pan.setValue({ x: 0, y: 0 });
+    }, [pan]);
+    const spring = useCallback((toValue) => {
+        Animated.spring(pan, {
+            toValue,
+            useNativeDriver: false,
+        }).start();
+    }, [pan]);
+    const changeIndex = useCallback((delta = 1) => {
+        const toValue = { x: 0, y: 0 };
+        let skipChanges = !delta;
+        let calcDelta = delta;
+        if (activeIndex.current <= 0 && delta < 0) {
+            skipChanges = !loop;
+            calcDelta = count + delta;
+        }
+        else if (activeIndex.current + 1 >= count && delta > 0) {
+            skipChanges = !loop;
+            calcDelta = -1 * activeIndex.current + delta - 1;
+        }
+        if (skipChanges) {
+            return spring(toValue);
+        }
+        const index = activeIndex.current + calcDelta;
+        activeIndex.current = index;
+        toValue.x = widthRef.current * (I18nManager.isRTL ? 1 : -1) * calcDelta;
+        spring(toValue);
+        onChanged?.(index);
+    }, [count, loop, onChanged, spring]);
+    const fixAndGo = useCallback((delta) => {
+        fixState();
+        startAnimation();
+        changeIndex(delta);
+    }, [changeIndex, fixState, startAnimation]);
+    const goTo = useCallback((index = 0) => {
+        const delta = index - activeIndex.current;
+        if (delta) {
+            fixAndGo(delta);
+        }
+    }, [fixAndGo]);
+    const getActiveIndex = useCallback(() => activeIndex.current, []);
+    useEffect(() => {
+        pan.x.addListener(({ value }) => (animatedValueX.current = value));
+        pan.y.addListener(({ value }) => (animatedValueY.current = value));
+        return () => {
+            pan.x.removeAllListeners();
+            pan.y.removeAllListeners();
+        };
+    }, [pan.x, pan.y]);
+    useEffect(() => {
+        if (activeIndex.current !== active) {
+            goTo(active);
+        }
+    }, [active, goTo]);
+    const onLayoutWrapper = useCallback(({ nativeEvent: { layout: { width: wrapperWidth }, }, }) => {
+        const width = wrapperWidth || DEFAULT_WIDTH;
+        setWidth(width);
+        widthRef.current = width;
+        fixState();
+    }, [fixState]);
+    return (React.createElement(View, { style: style.container, testID: "slider", onLayout: onLayoutWrapper },
+        React.createElement(Animated.View, { style: StyleSheet.flatten([
+                {
+                    left: pan.x,
+                },
+                style.sliderAreaStyle,
+            ]), ...panResponder.panHandlers }, flatennedChildren.map((child, index) => (React.createElement(View, { key: index, style: { width }, testID: "slider-child" }, child)))),
+        paginationEnabled && (React.createElement(Bullets, { activeIndex: getActiveIndex(), count: count, testID: "slider-bullets", onChange: (index) => goTo(index) }))));
+};
+export { Slider };

package/dist/shared/ui/components/layouts/slider/Slider.style.d.ts

@@ -0,0 +1,11 @@
+declare const style: {
+    container: {
+        flex: number;
+        overflow: "hidden";
+    };
+    sliderAreaStyle: {
+        flex: number;
+        flexDirection: "row";
+    };
+};
+export { style };

package/dist/shared/ui/components/layouts/slider/Slider.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+const style = StyleSheet.create({
+    container: {
+        flex: 1,
+        overflow: "hidden",
+    },
+    sliderAreaStyle: {
+        flex: 1,
+        flexDirection: "row",
+    },
+});
+export { style };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "3.10.0",
+  "version": "4.0.0-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [