@lookiero/checkout 3.6.1-beta.1 → 3.6.1

package/dist/infrastructure/projection/checkout/checkout.js

@@ -1,17 +1,5 @@
 const toCheckoutProjection = (checkoutDto) => ({
     ...checkoutDto,
-    items: checkoutDto.items.map((item) => ({
-        ...item,
-        productVariant: {
-            ...item.productVariant,
-            media: [
-                ...item.productVariant.media,
-                ...item.productVariant.media,
-                ...item.productVariant.media,
-                ...item.productVariant.media,
-            ],
-        },
-    })),
     expiresOn: new Date(checkoutDto.expiresOn),
 });
 export { toCheckoutProjection };

package/dist/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.js

@@ -1,21 +1,16 @@
 /* eslint-disable react/prop-types */
 import React from "react";
-import { View } from "react-native";
-import { ScrollView } from "react-native-gesture-handler";
+import { ScrollView, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Footer as DefaultFooter } from "../../../templates/footer/Footer";
 import { DefaultHeader } from "../../../templates/header/defaultHeader/DefaultHeader";
 import { Footer } from "../components/footer/Footer";
 import { Header } from "../components/header/Header";
 import { style } from "./DummyLayout.style";
-import { useScrollViewRef } from "./useScrollViewRef";
-const DummyLayout = ({ children, header = React.createElement(DefaultHeader, null), footer = React.createElement(DefaultFooter, null), panel, style: customStyle, scrollEnabled, onLayout, }) => {
-    const { scrollViewRef, panGestureRef } = useScrollViewRef();
-    return (React.createElement(SafeAreaView, { style: [style.safeAreaView, customStyle?.safeAreaView] },
-        React.createElement(ScrollView, { ref: scrollViewRef, contentContainerStyle: [style.scrollView, customStyle?.scrollView], scrollEnabled: scrollEnabled, scrollEventThrottle: 16, showsVerticalScrollIndicator: false, simultaneousHandlers: [panGestureRef], stickyHeaderIndices: [0] },
-            React.createElement(Header, null, header),
-            panel,
-            React.createElement(View, { style: style.children, onLayout: onLayout }, children)),
-        React.createElement(Footer, null, footer)));
-};
+const DummyLayout = ({ children, header = React.createElement(DefaultHeader, null), footer = React.createElement(DefaultFooter, null), panel, style: customStyle, scrollEnabled, onLayout, }) => (React.createElement(SafeAreaView, { style: [style.safeAreaView, customStyle?.safeAreaView] },
+    React.createElement(ScrollView, { contentContainerStyle: [style.scrollView, customStyle?.scrollView], scrollEnabled: scrollEnabled, scrollEventThrottle: 16, showsVerticalScrollIndicator: false, stickyHeaderIndices: [0] },
+        React.createElement(Header, null, header),
+        panel,
+        React.createElement(View, { style: style.children, onLayout: onLayout }, children)),
+    React.createElement(Footer, null, footer)));
 export { DummyLayout };

package/dist/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.js

@@ -1,17 +1,20 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { Image } from "react-native";
-import { Carousel2 } from "../../../../../../shared/ui/components/layouts/carousel/Carousel2";
+import { Slider } from "../../../../../../shared/ui/components/layouts/slider/Slider";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
 import { style } from "./ProductVariantSlider.style";
 const ProductVariantSlider = ({ producVariantMedia, onChanged }) => {
     const cdnImageUrl = useMediaImage();
-    const handleOnActiveChanged = useCallback((activeIndex) => onChanged?.(activeIndex), [onChanged]);
-    const renderItem = useCallback(({ item }) => (React.createElement(Image, { resizeMode: "contain", style: style.image, testID: "product-variant-image", source: {
+    const [active, setActive] = useState(0);
+    const handleOnActiveChanged = useCallback((activeIndex) => {
+        setActive(activeIndex);
+        onChanged?.(activeIndex);
+    }, [onChanged]);
+    return (React.createElement(Slider, { active: active, onChanged: handleOnActiveChanged }, producVariantMedia.map((media) => (React.createElement(Image, { key: media.perspective, resizeMode: "contain", style: style.image, testID: "product-variant-image", source: {
             uri: cdnImageUrl({
-                url: item.url,
+                url: media.url,
                 width: 600,
             }),
-        } })), [cdnImageUrl]);
-    return (React.createElement(Carousel2, { data: producVariantMedia, onActiveIndexChanged: handleOnActiveChanged }, renderItem));
+        } })))));
 };
 export { ProductVariantSlider };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "3.6.1-beta.1",
+  "version": "3.6.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -36,10 +36,7 @@
     "@sentry/react-native": "^4.13.0",
     "inline-style-prefixer": "6.0.1",
     "lodash": "^4.17.21",
-    "react-native-gesture-handler": "^2.12.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
-    "react-native-reanimated": "^3.3.0",
-    "react-native-reanimated-carousel": "^3.4.0",
     "react-native-safe-area-context": "^4.5.0",
     "react-native-svg": "^13.4.0",
     "tiny-invariant": "^1.3.1",

package/dist/infrastructure/ui/components/layouts/layout/dummyLayout/useScrollViewRef.d.ts

@@ -1,15 +0,0 @@
-import { FC, ReactNode, Ref } from "react";
-import { GestureType, ScrollView } from "react-native-gesture-handler";
-interface ContextShape {
-    readonly scrollViewRef: Ref<ScrollView>;
-    readonly panGestureRef: Ref<GestureType>;
-}
-interface ScrollViewRefContextProviderProps {
-    readonly children: ReactNode;
-}
-declare const ScrollViewRefContextProvider: FC<ScrollViewRefContextProviderProps>;
-interface UseScrollViewRefFunction {
-    (): ContextShape;
-}
-declare const useScrollViewRef: UseScrollViewRefFunction;
-export { useScrollViewRef, ScrollViewRefContextProvider };

package/dist/infrastructure/ui/components/layouts/layout/dummyLayout/useScrollViewRef.js

@@ -1,14 +0,0 @@
-import React, { createContext, useContext, useRef } from "react";
-import invariant from "tiny-invariant";
-const ScrollViewRefContext = createContext(null);
-const ScrollViewRefContextProvider = ({ children }) => {
-    const scrollViewRef = useRef(null);
-    const panGestureRef = useRef(null);
-    return (React.createElement(ScrollViewRefContext.Provider, { value: { scrollViewRef, panGestureRef } }, children));
-};
-const useScrollViewRef = () => {
-    const ref = useContext(ScrollViewRefContext);
-    invariant(ref, "Your are trying to use the useScrollViewRef hook without wrapping your app with the <ScrollViewRefContextProvider>.");
-    return ref;
-};
-export { useScrollViewRef, ScrollViewRefContextProvider };

package/dist/shared/ui/components/layouts/carousel/Carousel.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { TCarouselProps } from "react-native-reanimated-carousel";
-type CarouselRenderItem<T> = TCarouselProps<T>["renderItem"];
-interface CarouselProps<T> {
-    readonly data: T[];
-    readonly children: CarouselRenderItem<T>;
-    readonly onActiveIndexChanged?: (index: number) => void;
-}
-declare const Carousel: <T>({ data, children, onActiveIndexChanged }: CarouselProps<T>) => JSX.Element;
-export type { CarouselRenderItem };
-export { Carousel };

package/dist/shared/ui/components/layouts/carousel/Carousel.js

@@ -1,31 +0,0 @@
-import React, { useCallback, useRef, useState } from "react";
-import { View } from "react-native";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-import RNRCarousel from "react-native-reanimated-carousel";
-import { Bullets } from "../slider/Bullets";
-const Carousel = ({ data, children, onActiveIndexChanged }) => {
-    const [carouselDimensions, setCarouselDimensions] = useState();
-    const handleOnLayout = useCallback(({ nativeEvent: { layout: { width, height }, }, }) => setCarouselDimensions({ width, height }), []);
-    const ref = React.useRef(null);
-    const [activeIndex, setActiveIndex] = useState(0);
-    const activeIndexRef = useRef(activeIndex);
-    activeIndexRef.current = activeIndex;
-    const handleOnActiveChanged = useCallback((index) => ref.current?.scrollTo({ index, animated: true }), []);
-    const handleOnProgressChanged = useCallback(
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    (_offsetProgress, absoluteProgress) => {
-        const index = Math.round(absoluteProgress);
-        if (activeIndexRef.current === index) {
-            return;
-        }
-        setActiveIndex(index);
-        onActiveIndexChanged?.(index);
-    }, [onActiveIndexChanged]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(View, { style: { flex: 1 }, onLayout: handleOnLayout }, carouselDimensions && (React.createElement(GestureHandlerRootView, { style: { flex: 1 } },
-            React.createElement(RNRCarousel, { ref: ref, data: data, height: carouselDimensions.height, loop: false, renderItem: children, width: carouselDimensions.width, panGestureHandlerProps: {
-                    activeOffsetX: [-10, 10],
-                }, onProgressChange: handleOnProgressChanged })))),
-        React.createElement(Bullets, { activeIndex: activeIndex, count: data.length, onChange: handleOnActiveChanged })));
-};
-export { Carousel };

package/dist/shared/ui/components/layouts/carousel/Carousel.style.d.ts

@@ -1,17 +0,0 @@
-declare const style: {
-    carousel: {
-        flex: number;
-        flexDirection: "row";
-        height: string;
-        position: "absolute";
-    };
-    carouselItem: {
-        flex: number;
-    };
-    container: {
-        flex: number;
-        overflow: "hidden";
-        position: "relative";
-    };
-};
-export { style };

package/dist/shared/ui/components/layouts/carousel/Carousel.style.js

@@ -1,7 +0,0 @@
-import { StyleSheet } from "react-native";
-const style = StyleSheet.create({
-    carousel: { flex: 1, flexDirection: "row", height: "100%", position: "absolute" },
-    carouselItem: { flex: 1 },
-    container: { flex: 1, overflow: "hidden", position: "relative" },
-});
-export { style };

package/dist/shared/ui/components/layouts/carousel/Carousel2.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-interface RenderItemFunctionArgs<T> {
-    readonly item: T;
-    readonly index: number;
-}
-interface RenderItemFunction<T> {
-    (args: RenderItemFunctionArgs<T>): JSX.Element;
-}
-interface CarouselProps<T> {
-    readonly data: T[];
-    readonly children: RenderItemFunction<T>;
-    readonly onActiveIndexChanged?: (index: number) => void;
-}
-declare const Carousel2: <T>({ data, children, onActiveIndexChanged }: CarouselProps<T>) => JSX.Element;
-export type { RenderItemFunction };
-export { Carousel2 };

package/dist/shared/ui/components/layouts/carousel/Carousel2.js

@@ -1,72 +0,0 @@
-import { clamp } from "@react-spring/shared";
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { View } from "react-native";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, { useSharedValue, withSpring, useAnimatedStyle, runOnJS } from "react-native-reanimated";
-import { useScrollViewRef } from "../../../../../infrastructure/ui/components/layouts/layout/dummyLayout/useScrollViewRef";
-import { Bullets } from "../slider/Bullets";
-import { style } from "./Carousel.style";
-const SPRING_CONFIG = {
-    damping: 25,
-    mass: 1,
-    stiffness: 300,
-};
-const Carousel2 = ({ data, children, onActiveIndexChanged }) => {
-    const { scrollViewRef, panGestureRef } = useScrollViewRef();
-    const [carouselDimensions, setCarouselDimensions] = useState();
-    const carouselItemWidth = carouselDimensions?.width || 1;
-    const handleOnLayout = useCallback(({ nativeEvent: { layout: { width, height }, }, }) => setCarouselDimensions({ width, height }), []);
-    const [activeIndex, setActiveIndex] = useState(0);
-    const activeIndexRef = useRef(activeIndex);
-    activeIndexRef.current = activeIndex;
-    const panTranslationX = useSharedValue(0);
-    const panInitialTranslationX = useSharedValue(0);
-    const updateActiveIndex = useCallback((index) => {
-        if (activeIndexRef.current === index) {
-            return;
-        }
-        setActiveIndex(index);
-        onActiveIndexChanged?.(index);
-    }, [onActiveIndexChanged]);
-    const panGesture = useMemo(() => Gesture.Pan()
-        .maxPointers(1)
-        .activeOffsetX([-20, 20])
-        .onStart(() => {
-        panInitialTranslationX.value = panTranslationX.value;
-    })
-        .onUpdate(({ translationX }) => {
-        const tX = panInitialTranslationX.value + translationX;
-        const index = clamp(0, data.length - 1, Math.round(-tX / carouselItemWidth));
-        panTranslationX.value = tX;
-        runOnJS(updateActiveIndex)(index);
-    })
-        .onEnd(({ translationX }) => {
-        const tX = panInitialTranslationX.value + translationX;
-        const index = clamp(0, data.length - 1, Math.round(-tX / carouselItemWidth));
-        panTranslationX.value = withSpring(-index * carouselItemWidth, SPRING_CONFIG);
-    })
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        .simultaneousWithExternalGesture(scrollViewRef)
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        .withRef(panGestureRef), [
-        carouselItemWidth,
-        data.length,
-        panGestureRef,
-        panInitialTranslationX,
-        panTranslationX,
-        scrollViewRef,
-        updateActiveIndex,
-    ]);
-    const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateX: panTranslationX.value }] }), [panTranslationX]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(View, { style: style.container, onLayout: handleOnLayout }, carouselDimensions && (
-        // <GestureHandlerRootView style={{ flex: 1 }}>
-        React.createElement(GestureDetector, { gesture: panGesture },
-            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 }))))))
-        // </GestureHandlerRootView>
-        )),
-        React.createElement(Bullets, { activeIndex: activeIndex, count: data.length, onChange: () => void 0 })));
-};
-export { Carousel2 };

package/dist/shared/ui/components/layouts/carousel/DragComponent.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const DragComponent: (props: any) => JSX.Element;
-export { DragComponent };

package/dist/shared/ui/components/layouts/carousel/DragComponent.js

@@ -1,48 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import React from "react";
-import { View } from "react-native";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import { useSharedValue } from "react-native-reanimated";
-import { useScrollViewRef } from "../../../../../infrastructure/ui/components/layouts/layout/dummyLayout/useScrollViewRef";
-const TOUCH_SLOP = 5;
-const TIME_TO_ACTIVATE_PAN = 400;
-// @ts-ignore
-const DragComponent = (props) => {
-    const { scrollViewRef, panGestureRef } = useScrollViewRef();
-    const touchStart = useSharedValue({ x: 0, y: 0, time: 0 });
-    const gesture = Gesture.Pan()
-        .manualActivation(true)
-        .onTouchesDown((e) => {
-        touchStart.value = {
-            // @ts-ignore
-            x: e.changedTouches[0].x,
-            // @ts-ignore
-            y: e.changedTouches[0].y,
-            time: Date.now(),
-        };
-    })
-        .onTouchesMove((e, state) => {
-        if (Date.now() - touchStart.value.time > TIME_TO_ACTIVATE_PAN) {
-            state.activate();
-            console.log("activate");
-        }
-        else if (
-        // @ts-ignore
-        Math.abs(touchStart.value.x - e.changedTouches[0].x) > TOUCH_SLOP ||
-            // @ts-ignore
-            Math.abs(touchStart.value.y - e.changedTouches[0].y) > TOUCH_SLOP) {
-            state.fail();
-            console.log("fail");
-        }
-    })
-        .onUpdate(() => {
-        console.log("pan update");
-    })
-        // @ts-ignore
-        .simultaneousWithExternalGesture(scrollViewRef)
-        // @ts-ignore
-        .withRef(panGestureRef);
-    return (React.createElement(GestureDetector, { gesture: gesture },
-        React.createElement(View, null, props.children)));
-};
-export { DragComponent };

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

@@ -1,14 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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/SliderDots.d.ts

@@ -1,8 +0,0 @@
-import { FC } from "react";
-interface SliderDotsProps {
-    readonly count: number;
-    readonly index: number;
-    readonly onChange: (index: number) => void;
-}
-declare const SliderDots: FC<SliderDotsProps>;
-export { SliderDots };

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

@@ -1,16 +0,0 @@
-import React from "react";
-import { TouchableWithoutFeedback, View } from "react-native";
-import { theme } from "../../../../../infrastructure/ui/theme/theme";
-import { style } from "./SliderDots.style";
-const { colorContent } = theme();
-const SliderDot = ({ diameter, color }) => (React.createElement(View, { style: [style.sliderDot, { width: diameter, height: diameter, backgroundColor: color, borderRadius: diameter }] }));
-const SliderDots = () => {
-    return (React.createElement(View, { style: style.sliderDots },
-        React.createElement(TouchableWithoutFeedback, null,
-            React.createElement(SliderDot, { color: colorContent, diameter: 8 })),
-        React.createElement(TouchableWithoutFeedback, null,
-            React.createElement(SliderDot, { color: colorContent, diameter: 8 })),
-        React.createElement(TouchableWithoutFeedback, null,
-            React.createElement(SliderDot, { color: colorContent, diameter: 8 }))));
-};
-export { SliderDots };

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

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

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

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