@lookiero/checkout 0.2.4 → 0.2.6

package/dist/infrastructure/delivery/http/fetchHttpClient.js

@@ -9,7 +9,6 @@ const fetchHttpPost = ({ apiUrl, getAuthToken }) => async ({ endpoint, body }) =
 const fetchHttpGet = ({ apiUrl, getAuthToken }) => async ({ endpoint }) => fetch(`${apiUrl}${endpoint}`, {
     method: "GET",
     credentials: "include",
-    mode: "no-cors",
     headers: {
         authorization: `Bearer ${getAuthToken()}`,
     },

package/dist/infrastructure/ui/components/atoms/price/Price.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { PriceProjection } from "../../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
+interface PriceProps {
+    readonly price: PriceProjection;
+}
+declare const Price: FC<PriceProps>;
+export { Price };

package/dist/infrastructure/ui/components/atoms/price/Price.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { View } from "react-native";
+import { useI18nNumber } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { style } from "./Price.style";
+const Price = ({ price }) => {
+    const isDiscounted = price.discountedPrice && price.discountedPrice.percentage !== 0;
+    const productPrice = useI18nNumber({
+        value: price.amount / 100,
+        style: "currency",
+        currency: price.currency,
+    });
+    const productDiscountedPrice = useI18nNumber({
+        value: (price.discountedPrice?.amount || 0) / 100,
+        style: "currency",
+        currency: price.currency,
+    });
+    return (React.createElement(View, { style: style.price, testID: "price" },
+        React.createElement(Text, { body: true, level: 3, style: isDiscounted && style.priceTextDiscounted, testID: "price-text" }, productPrice),
+        isDiscounted && (React.createElement(Text, { body: true, level: 3, style: style.discountedPriceText, testID: "discounted-price-text" }, productDiscountedPrice))));
+};
+export { Price };

package/dist/infrastructure/ui/components/atoms/price/Price.style.d.ts

@@ -0,0 +1,13 @@
+declare const style: {
+    price: {
+        flexDirection: "row";
+    };
+    priceTextDiscounted: {
+        textDecorationLine: "line-through";
+    };
+    discountedPriceText: {
+        marginLeft: number;
+        color: string;
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/atoms/price/Price.style.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../theme/theme";
+const { colorPrimary, spaceS } = theme();
+const style = StyleSheet.create({
+    price: {
+        flexDirection: "row",
+    },
+    priceTextDiscounted: {
+        textDecorationLine: "line-through",
+    },
+    discountedPriceText: {
+        marginLeft: spaceS,
+        color: colorPrimary,
+    },
+});
+export { style };

package/dist/infrastructure/ui/components/atoms/spinner/Spinner.js

@@ -1,9 +1,8 @@
 import React from "react";
-import { View } from "react-native";
+import { ActivityIndicator, View } from "react-native";
+import { theme } from "../../../theme/theme";
 import { style } from "./Spinner.style";
+const { colorPrimary } = theme();
 const Spinner = () => (React.createElement(View, { style: style.container },
-    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30px", height: "30px", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid" },
-        React.createElement("circle", { cx: "50", cy: "50", r: "32", stroke: "#000000", strokeWidth: "6", strokeLinecap: "round", fill: "none" },
-            React.createElement("animateTransform", { attributeName: "transform", type: "rotate", repeatCount: "indefinite", dur: "1.5384615384615383s", values: "0 50 50;180 50 50;720 50 50", keyTimes: "0;0.5;1" }),
-            React.createElement("animate", { attributeName: "stroke-dasharray", repeatCount: "indefinite", dur: "1.5384615384615383s", values: "42.22300526424682 158.83892456549995;176.93449825017714 24.127431579569617;42.22300526424682 158.83892456549995", keyTimes: "0;0.5;1" })))));
+    React.createElement(ActivityIndicator, { size: "large", color: colorPrimary })));
 export { Spinner };

package/dist/infrastructure/ui/components/layouts/body/Body.js

@@ -1,10 +1,9 @@
 import { Box } from "@lookiero/aurora-next/build/components/atoms/Box/Box";
 import { Layout } from "@lookiero/aurora-next/build/components/atoms/Layout/Layout";
 import React from "react";
+import { SafeAreaView } from "react-native";
 import { style } from "./Body.style";
-const Body = ({ children }) => (
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-React.createElement(Layout, { style: style.layout },
-    React.createElement(Box, { size: { M: "2/3", L: "1/3" }, style: style.box }, children)));
+const Body = ({ children }) => (React.createElement(SafeAreaView, { style: style.container },
+    React.createElement(Layout, { style: style.layout },
+        React.createElement(Box, { size: { M: "2/3", L: "1/3" }, style: style.box }, children))));
 export { Body };

package/dist/infrastructure/ui/components/layouts/body/Body.style.d.ts

@@ -1,13 +1,14 @@
 declare const style: {
+    container: {
+        flex: number;
+    };
     layout: {
         flex: number;
         justifyContent: "center";
         padding: number;
-        textAlign: "center";
     };
     box: {
         height: string;
-        justifyContent: "space-between";
     };
 };
 export { style };

package/dist/infrastructure/ui/components/layouts/body/Body.style.js

@@ -2,15 +2,16 @@ import { StyleSheet } from "react-native";
 import { theme } from "../../../theme/theme";
 const { spaceXL } = theme();
 const style = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
     layout: {
         flex: 1,
         justifyContent: "center",
         padding: spaceXL,
-        textAlign: "center",
     },
     box: {
         height: "100%",
-        justifyContent: "space-between",
     },
 });
 export { style };

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

@@ -0,0 +1,14 @@
+import { FC } 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) => JSX.Element;
+}
+declare const Pagination: FC<PaginationProps>;
+export { Pagination };

package/dist/infrastructure/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, { onPress: !touchable ? undefined : () => onChange(index), style: [
+            style.paginationItem,
+            activeIndex === index && style.active,
+            paginationItemStyle,
+            activeIndex === index && paginationActiveItemStyle,
+        ], testID: "slider-pagination-item" }, renderItem?.(index)))))));
+export { Pagination };

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

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

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

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

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

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+interface SliderProps {
+    readonly children: ReactNode[];
+    readonly active?: number;
+    readonly loop?: boolean;
+    readonly minDistanceToCapture?: number;
+    readonly minDistanceForAction?: number;
+    readonly gesturesEnabled?: boolean;
+    readonly paginationEnabled?: boolean;
+    readonly paginationStyle?: StyleProp<ViewStyle>;
+    readonly paginationItemStyle?: StyleProp<ViewStyle>;
+    readonly paginationActiveItemStyle?: StyleProp<ViewStyle>;
+    readonly onSliderStart?: () => void;
+    readonly onSliderEnd?: () => void;
+    readonly onChanged?: (index: number) => void;
+    readonly paginationRenderItem?: (index: number) => JSX.Element;
+}
+declare const Slider: FC<SliderProps>;
+export { Slider };

package/dist/infrastructure/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 { Pagination } from "./Pagination";
+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, paginationStyle, paginationItemStyle, paginationActiveItemStyle, onSliderStart, onSliderEnd, onChanged, paginationRenderItem, }) => {
+    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, onLayout: onLayoutWrapper, testID: "slider" },
+        React.createElement(Animated.View, { style: StyleSheet.flatten([
+                {
+                    transform: [{ translateX: pan.x }, { translateY: pan.y }],
+                },
+                style.sliderAreaStyle,
+            ]), ...panResponder.panHandlers }, flatennedChildren.map((child, index) => (React.createElement(View, { key: index, style: { width }, testID: "slider-child" }, child)))),
+        paginationEnabled && (React.createElement(Pagination, { count: count, activeIndex: getActiveIndex(), onChange: (index) => goTo(index), paginationStyle: paginationStyle, paginationItemStyle: paginationItemStyle, paginationActiveItemStyle: paginationActiveItemStyle, renderItem: paginationRenderItem }))));
+};
+export { Slider };

package/dist/infrastructure/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/infrastructure/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/dist/infrastructure/ui/hooks/useMediaImage.d.ts

@@ -0,0 +1,7 @@
+interface CdnImageUrlParameters {
+    url: string;
+    width: number;
+    dpi?: number;
+}
+declare const useMediaImage: () => ({ url, width, dpi }: CdnImageUrlParameters) => string;
+export { useMediaImage };

package/dist/infrastructure/ui/hooks/useMediaImage.js

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import { PixelRatio } from "react-native";
+const DEFAULT_DPI = 1;
+const HIGHDPI = 2;
+const useMediaImage = () => {
+    const cdnImageUrl = useCallback(({ url, width, dpi = PixelRatio.get() }) => {
+        const imageDpi = dpi > DEFAULT_DPI ? HIGHDPI : DEFAULT_DPI;
+        return `${url}?w=${Math.ceil(width * imageDpi)}&f=auto`;
+    }, []);
+    return cdnImageUrl;
+};
+export { useMediaImage };

package/dist/infrastructure/ui/i18n/i18n.d.ts

@@ -5,6 +5,9 @@ declare enum I18nMessages {
     INTRO_BULLET_ONE = "intro.bullet_one",
     INTRO_BULLET_TWO = "intro.bullet_two",
     INTRO_BULLET_THREE = "intro.bullet_three",
-    INTRO_BUTTON = "intro.button"
+    INTRO_BUTTON = "intro.button",
+    ITEM_SIZE = "item.size",
+    ITEM_COLOR = "item.color",
+    ITEM_UNIQUE = "item.unique"
 }
 export { I18nMessages };

package/dist/infrastructure/ui/i18n/i18n.js

@@ -7,5 +7,8 @@ var I18nMessages;
     I18nMessages["INTRO_BULLET_TWO"] = "intro.bullet_two";
     I18nMessages["INTRO_BULLET_THREE"] = "intro.bullet_three";
     I18nMessages["INTRO_BUTTON"] = "intro.button";
+    I18nMessages["ITEM_SIZE"] = "item.size";
+    I18nMessages["ITEM_COLOR"] = "item.color";
+    I18nMessages["ITEM_UNIQUE"] = "item.unique";
 })(I18nMessages || (I18nMessages = {}));
 export { I18nMessages };

package/dist/infrastructure/ui/routing/CheckoutAccessibilityMiddleware.d.ts

@@ -1,3 +1,4 @@
+import "react-native-get-random-values";
 import { FC } from "react";
 interface CheckoutAccessibilityMiddlewareProps {
     readonly customerId: string | undefined;

package/dist/infrastructure/ui/routing/CheckoutAccessibilityMiddleware.js

@@ -1,3 +1,4 @@
+import "react-native-get-random-values";
 import React, { useEffect, useRef } from "react";
 import { Outlet } from "react-router-native";
 import { useViewIsCheckoutAccessibleByCustomerId } from "../../projection/react/useViewIsCheckoutAccessibleByCustomerId";

package/dist/infrastructure/ui/routing/Routing.js

@@ -14,10 +14,12 @@ const Routing = ({ onNotAccessible, customerId, locale, I18n, onI18nError }) =>
             element: React.createElement(CheckoutAccessibilityMiddleware, { customerId: customerId, onNotAccessible: onNotAccessible }),
             children: [
                 {
+                    path: "",
                     element: (React.createElement(I18n, { locale: locale, loader: React.createElement(Spinner, null), onError: onI18nError },
                         React.createElement(Outlet, null))),
                     children: [
                         {
+                            path: "",
                             element: React.createElement(CheckoutMiddleware, { customerId: customerId }),
                             children: [
                                 {

package/dist/infrastructure/ui/views/intro/Intro.js

@@ -9,10 +9,10 @@ import { useSetCheckoutIntroShown } from "../../../domain/react/useSetCheckoutIn
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/react/useViewFiveItemsDiscountByCustomerId";
 import { View } from "react-native";
 import React, { useCallback } from "react";
-import { styles } from "./Intro.style";
 import { Body } from "../../components/layouts/body/Body";
-const Bullet = ({ text }) => (React.createElement(View, { style: styles.bullet },
-    React.createElement(Icon, { name: "rounded-tick", style: styles.tickIcon }),
+import { style } from "./Intro.style";
+const Bullet = ({ text }) => (React.createElement(View, { style: style.bullet },
+    React.createElement(Icon, { name: "rounded-tick", style: style.tickIcon }),
     React.createElement(Text, { detail: true, level: 2 }, text)));
 const Intro = ({ customerId }) => {
     const titleText = useI18nMessage({ id: I18nMessages.INTRO_TITLE });
@@ -30,20 +30,21 @@ const Intro = ({ customerId }) => {
     if (fiveItemsDiscountState === QueryStatus.LOADING)
         return React.createElement(Spinner, null);
     return (React.createElement(Body, null,
-        React.createElement(View, null,
-            React.createElement(Text, { heading: true, level: 3, style: styles.title }, titleText),
-            React.createElement(Text, { body: true, level: 3 }, subTitleText),
-            React.createElement(View, { style: styles.discountContainer },
-                React.createElement(View, { style: styles.discount },
-                    React.createElement(Text, { heading: true, level: 2 },
-                        "- ",
-                        fiveItemsDiscount),
-                    React.createElement(Text, { heading: true, level: 3, style: styles.percentage }, "%")),
-                React.createElement(Text, { body: true, level: 3 }, discountText)),
-            React.createElement(View, { style: styles.description },
-                React.createElement(Bullet, { text: bulletOneText }),
-                React.createElement(Bullet, { text: bulletTwoText }),
-                React.createElement(Bullet, { text: bulletThreeText }))),
-        React.createElement(Button, { disabled: setCheckoutIntroShownStatus === CommandStatus.LOADING, onPress: handleOnPress }, buttonText)));
+        React.createElement(View, { style: style.container },
+            React.createElement(View, { style: style.content },
+                React.createElement(Text, { heading: true, level: 3, style: style.title }, titleText),
+                React.createElement(Text, { body: true, level: 3 }, subTitleText),
+                React.createElement(View, { style: style.discountContainer },
+                    React.createElement(View, { style: style.discount },
+                        React.createElement(Text, { heading: true, level: 2 },
+                            "- ",
+                            fiveItemsDiscount),
+                        React.createElement(Text, { heading: true, level: 3, style: style.percentage }, "%")),
+                    React.createElement(Text, { body: true, level: 3 }, discountText)),
+                React.createElement(View, { style: style.description },
+                    React.createElement(Bullet, { text: bulletOneText }),
+                    React.createElement(Bullet, { text: bulletTwoText }),
+                    React.createElement(Bullet, { text: bulletThreeText }))),
+            React.createElement(Button, { disabled: setCheckoutIntroShownStatus === CommandStatus.LOADING, onPress: handleOnPress }, buttonText))));
 };
 export { Intro };

package/dist/infrastructure/ui/views/intro/Intro.style.d.ts

@@ -1,11 +1,21 @@
-declare const styles: {
+declare const style: {
+    container: {
+        flex: number;
+        justifyContent: "space-between";
+    };
+    content: {
+        alignItems: "center";
+        textAlign: "center";
+    };
     title: {
         marginBottom: number;
     };
     discountContainer: {
+        alignItems: "center";
         backgroundColor: string;
         marginVertical: number;
         padding: number;
+        textAlign: "center";
         width: string;
     };
     discount: {
@@ -31,4 +41,4 @@ declare const styles: {
         marginRight: number;
     };
 };
-export { styles };
+export { style };

package/dist/infrastructure/ui/views/intro/Intro.style.js

@@ -1,14 +1,24 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../theme/theme";
 const { borderSize, colorAccent, spaceXS, spaceS, spaceM, spaceL, spaceXL } = theme();
-const styles = StyleSheet.create({
+const style = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "space-between",
+    },
+    content: {
+        alignItems: "center",
+        textAlign: "center",
+    },
     title: {
         marginBottom: spaceM,
     },
     discountContainer: {
+        alignItems: "center",
         backgroundColor: colorAccent,
         marginVertical: spaceL,
         padding: spaceM,
+        textAlign: "center",
         width: "100%",
     },
     discount: {
@@ -34,4 +44,4 @@ const styles = StyleSheet.create({
         marginRight: spaceS,
     },
 });
-export { styles };
+export { style };

package/dist/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import { ColorProjection, PriceProjection, SizeProjection } from "../../../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
+interface ProductVariantDescriptionProps {
+    readonly brand: string;
+    readonly name: string;
+    readonly price: PriceProjection;
+    readonly size: SizeProjection;
+    readonly color: ColorProjection;
+}
+declare const ProductVariantDescription: FC<ProductVariantDescriptionProps>;
+export { ProductVariantDescription };

package/dist/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { View } from "react-native";
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { Price } from "../../../../components/atoms/price/Price";
+import { style } from "./ProductVariantDescription.style";
+const ProductVariantDescription = ({ brand, name, price, size, color }) => {
+    const sizeText = useI18nMessage({ id: I18nMessages.ITEM_SIZE });
+    const colorText = useI18nMessage({ id: I18nMessages.ITEM_COLOR });
+    const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
+    return (React.createElement(View, { style: style.container },
+        React.createElement(Text, { detail: true, level: 3, style: style.brand }, brand),
+        React.createElement(Text, { body: true, level: 2, style: style.name }, name),
+        React.createElement(Price, { price: price }),
+        React.createElement(Text, { detail: true, level: 2, style: style.size },
+            sizeText,
+            ": ",
+            React.createElement(Text, { style: style.text }, size.unique ? uniqueText : size.lookiero)),
+        React.createElement(Text, { detail: true, level: 2 },
+            colorText,
+            ": ",
+            React.createElement(Text, { style: style.text }, color.label))));
+};
+export { ProductVariantDescription };

package/dist/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.style.d.ts

@@ -0,0 +1,19 @@
+declare const style: {
+    container: {
+        width: string;
+    };
+    brand: {
+        color: string;
+        textTransform: "uppercase";
+    };
+    name: {
+        marginVertical: number;
+    };
+    size: {
+        marginVertical: number;
+    };
+    text: {
+        color: string;
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.style.js

@@ -0,0 +1,22 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { colorGrayscaleL, spaceS, spaceL } = theme();
+const style = StyleSheet.create({
+    container: {
+        width: "100%",
+    },
+    brand: {
+        color: colorGrayscaleL,
+        textTransform: "uppercase",
+    },
+    name: {
+        marginVertical: spaceS,
+    },
+    size: {
+        marginVertical: spaceL,
+    },
+    text: {
+        color: colorGrayscaleL,
+    },
+});
+export { style };

package/dist/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { MediaProjection } from "../../../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
+interface ProductVariantSlider {
+    readonly producVariantMedia: MediaProjection[];
+}
+declare const ProductVariantSlider: FC<ProductVariantSlider>;
+export { ProductVariantSlider };

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

@@ -0,0 +1,22 @@
+import React, { useCallback, useState } from "react";
+import { Image } from "react-native";
+import { Slider } from "../../../../components/layouts/slider/Slider";
+import { useMediaImage } from "../../../../hooks/useMediaImage";
+import { style } from "./ProductVariantSlider.style";
+const ProductVariantSlider = ({ producVariantMedia }) => {
+    const cdnImageUrl = useMediaImage();
+    const [active, setActive] = useState(0);
+    const handleOnActiveChanged = useCallback((activeIndex) => setActive(activeIndex), []);
+    return (React.createElement(Slider, { active: active, onChanged: handleOnActiveChanged, paginationStyle: style.paginationStyle, paginationItemStyle: style.paginationItemStyle, paginationActiveItemStyle: style.paginationActiveItemStyle, paginationRenderItem: (index) => (React.createElement(Image, { key: producVariantMedia[index]?.perspective, style: style.paginationImage, resizeMode: "contain", source: {
+                uri: cdnImageUrl({
+                    url: producVariantMedia[index]?.url,
+                    width: 80,
+                }),
+            }, testID: "product-variant-pagination-image" })) }, producVariantMedia.map((media) => (React.createElement(Image, { key: media.perspective, style: style.image, source: {
+            uri: cdnImageUrl({
+                url: media.url,
+                width: 200,
+            }),
+        }, testID: "product-variant-image" })))));
+};
+export { ProductVariantSlider };

package/dist/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.d.ts

@@ -0,0 +1,25 @@
+declare const style: {
+    image: {
+        flex: number;
+    };
+    paginationImage: {
+        flex: number;
+    };
+    paginationStyle: {
+        bottom: number;
+        marginTop: number;
+        position: "relative";
+    };
+    paginationItemStyle: {
+        backgroundColor: string;
+        borderColor: string;
+        borderRadius: number;
+        borderWidth: number;
+        height: number;
+        width: number;
+    };
+    paginationActiveItemStyle: {
+        borderColor: string;
+    };
+};
+export { style };

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

@@ -0,0 +1,29 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { colorBase, colorGrayscaleL, colorContent, spaceM } = theme();
+const PAGINATION_SIZE = 37;
+const style = StyleSheet.create({
+    image: {
+        flex: 1,
+    },
+    paginationImage: {
+        flex: 1,
+    },
+    paginationStyle: {
+        bottom: 0,
+        marginTop: spaceM,
+        position: "relative",
+    },
+    paginationItemStyle: {
+        backgroundColor: colorBase,
+        borderColor: colorGrayscaleL,
+        borderRadius: 0,
+        borderWidth: 1,
+        height: PAGINATION_SIZE,
+        width: PAGINATION_SIZE,
+    },
+    paginationActiveItemStyle: {
+        borderColor: colorContent,
+    },
+});
+export { style };

package/dist/projection/checkout/viewFirstAvailableCheckoutByCustomerId.d.ts

@@ -101,4 +101,5 @@ interface ViewFirstAvailableCheckoutByCustomerIdHandlerFunctionArgs extends Quer
     readonly view: FirstAvailableCheckoutByCustomerIdView;
 }
 declare const viewFirstAvailableCheckoutByCustomerIdHandler: QueryHandlerFunction<ViewFirstAvailableCheckoutByCustomerId, ViewFirstAvailableCheckoutByCustomerIdResult, ViewFirstAvailableCheckoutByCustomerIdHandlerFunctionArgs>;
-export { CheckoutProjection, CheckoutStatus, CheckoutItemProjection, CheckoutItemStatus, MediaPerspective, Currency, VIEW_FIRST_AVAILABLE_CHECKOUT_BY_CUSTOMER_ID, viewFirstAvailableCheckoutByCustomerId, FirstAvailableCheckoutByCustomerIdView, viewFirstAvailableCheckoutByCustomerIdHandler, };
+export type { CheckoutItemProjection, CheckoutProjection, ColorProjection, FirstAvailableCheckoutByCustomerIdView, MediaProjection, PriceProjection, SizeProjection, };
+export { CheckoutStatus, CheckoutItemStatus, MediaPerspective, Currency, VIEW_FIRST_AVAILABLE_CHECKOUT_BY_CUSTOMER_ID, viewFirstAvailableCheckoutByCustomerId, viewFirstAvailableCheckoutByCustomerIdHandler, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -25,6 +25,7 @@
     "@lookiero/i18n-react": "^0.7.2",
     "@lookiero/messaging": "^6.2.1",
     "@lookiero/messaging-react": "^6.2.1",
+    "react-native-get-random-values": "^1.8.0",
     "react-router-dom": "^6.3.0",
     "react-router-native": "^6.3.0",
     "uuid": "^9.0.0"