@lookiero/checkout 0.2.5 → 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/Slider.js

@@ -120,21 +120,13 @@ const Slider = ({ children, active = 0, loop = false, minDistanceToCapture = 5,
         widthRef.current = width;
         fixState();
     }, [fixState]);
-    return (React.createElement(View, { onLayout: onLayoutWrapper, testID: "slider" },
-        React.createElement(View, { style: StyleSheet.flatten([
+    return (React.createElement(View, { style: style.container, onLayout: onLayoutWrapper, testID: "slider" },
+        React.createElement(Animated.View, { style: StyleSheet.flatten([
                 {
-                    width,
+                    transform: [{ translateX: pan.x }, { translateY: pan.y }],
                 },
-                style.container,
-            ]) },
-            React.createElement(Animated.View, { style: StyleSheet.flatten([
-                    {
-                        width: width * count,
-                        transform: [{ translateX: pan.x }, { translateY: pan.y }],
-                    },
-                    style.sliderAreaStyle,
-                ]), ...panResponder.panHandlers }, flatennedChildren.map((child, index) => (React.createElement(View, { key: index, style: { width } },
-                React.createElement(View, { testID: "slider-child" }, child))))),
-            paginationEnabled && (React.createElement(Pagination, { count: count, activeIndex: getActiveIndex(), onChange: (index) => goTo(index), paginationStyle: paginationStyle, paginationItemStyle: paginationItemStyle, paginationActiveItemStyle: paginationActiveItemStyle, renderItem: paginationRenderItem })))));
+                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

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

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

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

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.style.d.ts

@@ -1,6 +1,5 @@
 declare const style: {
     image: {
-        aspectRatio: number;
         flex: number;
     };
     paginationImage: {

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

@@ -4,7 +4,6 @@ const { colorBase, colorGrayscaleL, colorContent, spaceM } = theme();
 const PAGINATION_SIZE = 37;
 const style = StyleSheet.create({
     image: {
-        aspectRatio: 0.75,
         flex: 1,
     },
     paginationImage: {

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, MediaProjection, 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.5",
+  "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"