@lookiero/checkout 0.2.14 → 0.2.15

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import { EndpointFunction } from "@lookiero/i18n";
 import { FC } from "react";
-import "react-native-get-random-values";
 import { RootProps } from "./infrastructure/ui/Root";
 import { IsCheckoutAccessibleByCustomerIdProjection } from "./projection/checkout/viewIsCheckoutAccessibleByCustomerId";
 interface IsCheckoutAccessibleFunctionArgs {

package/dist/index.js

@@ -1,6 +1,5 @@
 import { fetchFetchTranslation } from "@lookiero/i18n";
 import { i18n } from "@lookiero/i18n-react";
-import "react-native-get-random-values";
 import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
 import { root } from "./infrastructure/ui/Root";
 import { viewIsCheckoutAccessibleByCustomerId, } from "./projection/checkout/viewIsCheckoutAccessibleByCustomerId";

package/dist/infrastructure/domain/checkoutBooking/react/useBookSizeReplaceableProductVariantsForCheckoutItem.d.ts

@@ -1,4 +1,5 @@
 import { CommandStatus } from "@lookiero/messaging-react";
+import "react-native-get-random-values";
 interface BookFunction {
     (): Promise<void>;
 }

package/dist/infrastructure/domain/checkoutBooking/react/useBookSizeReplaceableProductVariantsForCheckoutItem.js

@@ -1,5 +1,6 @@
 import { useCommand } from "@lookiero/messaging-react";
 import { useCallback } from "react";
+import "react-native-get-random-values";
 import { v4 as uuid } from "uuid";
 import { bookSizeReplaceableProductVariantsForCheckoutItem } from "../../../../domain/checkoutBooking/command/bookSizeReplaceableProductVariantsForCheckoutItem";
 const useBookSizeReplaceableProductVariantsForCheckoutItem = ({ checkoutId, checkoutItemId, checkoutBookingId }) => {

package/dist/infrastructure/domain/uiSetting/react/useUpdateUiSetting.d.ts

@@ -1,4 +1,5 @@
 import { CommandStatus } from "@lookiero/messaging-react";
+import "react-native-get-random-values";
 interface UpdateFunctionArgs {
     readonly key: string;
     readonly value: unknown;

package/dist/infrastructure/domain/uiSetting/react/useUpdateUiSetting.js

@@ -1,5 +1,6 @@
 import { useCommand } from "@lookiero/messaging-react";
 import { useCallback } from "react";
+import "react-native-get-random-values";
 import { v4 as uuid } from "uuid";
 import { updateUiSetting } from "../../../../domain/uiSetting/command/updateUiSetting";
 import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";

package/dist/infrastructure/projection/checkout/checkout.mock.d.ts

@@ -1,3 +1,4 @@
+import "react-native-get-random-values";
 import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
 import { CheckoutProjection } from "../../../projection/checkout/checkout";
 import { CheckoutDto } from "./checkout";

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

@@ -1,3 +1,4 @@
+import "react-native-get-random-values";
 import { v4 as uuid } from "uuid";
 import { CheckoutStatus } from "../../../domain/checkout/model/checkout";
 import { checkoutItemDto } from "../checkoutItem/checkoutItem.mock";

package/dist/infrastructure/projection/checkoutItem/checkoutItem.mock.d.ts

@@ -1,3 +1,4 @@
+import "react-native-get-random-values";
 import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
 import { CheckoutItemProjection } from "../../../projection/checkoutItem/checkoutItem";
 import { CheckoutItemDto } from "./checkoutItem";

package/dist/infrastructure/projection/checkoutItem/checkoutItem.mock.js

@@ -1,3 +1,4 @@
+import "react-native-get-random-values";
 import { v4 as uuid } from "uuid";
 import { Currency, MediaPerspective } from "../../../projection/checkoutItem/checkoutItem";
 import { toCheckoutItemProjection } from "./checkoutItem";
@@ -9,8 +10,13 @@ const checkoutItemDto = ({ status }) => ({
         media: [
             {
                 id: uuid(),
-                url: "https://cdn-catalog-back-prod.envs.lookiero.tech/d2/65/d2655b80-7745-4537-bb17-eb38f960a8de.jpg",
-                perspective: MediaPerspective.FRONT,
+                url: "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg",
+                perspective: MediaPerspective.MAIN,
+            },
+            {
+                id: uuid(),
+                url: "https://cdn-catalog-back-prod.envs.lookiero.tech/15/ac/15aca112-4e71-4646-8db5-7f9723bc0130.jpg",
+                perspective: MediaPerspective.DETAIL,
             },
         ],
         brand: "CKS",

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

@@ -1,9 +1,10 @@
 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 }) => (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))));
+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)));
 export { Body };

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

@@ -5,7 +5,7 @@ declare const style: {
     layout: {
         flex: number;
         justifyContent: "center";
-        padding: number;
+        paddingVertical: number;
     };
     box: {
         height: string;

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

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 import { theme } from "../../../theme/theme";
 const { spaceXL } = theme();
 const style = StyleSheet.create({
@@ -8,7 +8,7 @@ const style = StyleSheet.create({
     layout: {
         flex: 1,
         justifyContent: "center",
-        padding: spaceXL,
+        paddingVertical: Platform.OS === "web" ? spaceXL : 0,
     },
     box: {
         height: "100%",

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

@@ -4,7 +4,7 @@ import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Tex
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback } from "react";
-import { View } from "react-native";
+import { SafeAreaView, View } from "react-native";
 import { useSetCheckoutIntroShown } from "../../../domain/uiSetting/react/useSetCheckoutIntroShown";
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
 import { Spinner } from "../../components/atoms/spinner/Spinner";
@@ -29,22 +29,23 @@ const Intro = ({ customerId }) => {
     const handleOnPress = useCallback(() => setCheckoutIntroShown(), [setCheckoutIntroShown]);
     if (fiveItemsDiscountState === QueryStatus.LOADING)
         return React.createElement(Spinner, null);
-    return (React.createElement(Body, null,
-        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))));
+    return (React.createElement(SafeAreaView, { style: style.safeAreaContainer },
+        React.createElement(Body, null,
+            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, style: style.subtitle }, 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,14 +1,20 @@
 declare const style: {
+    safeAreaContainer: {
+        flex: number;
+    };
     container: {
         flex: number;
         justifyContent: "space-between";
     };
     content: {
         alignItems: "center";
-        textAlign: "center";
     };
     title: {
         marginBottom: number;
+        textAlign: "center";
+    };
+    subtitle: {
+        textAlign: "center";
     };
     discountContainer: {
         alignItems: "center";
@@ -34,6 +40,7 @@ declare const style: {
         width: string;
     };
     bullet: {
+        alignItems: "center";
         flexDirection: "row";
         marginVertical: number;
     };

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

@@ -2,16 +2,22 @@ import { StyleSheet } from "react-native";
 import { theme } from "../../theme/theme";
 const { borderSize, colorAccent, spaceXS, spaceS, spaceM, spaceL, spaceXL } = theme();
 const style = StyleSheet.create({
+    safeAreaContainer: {
+        flex: 1,
+    },
     container: {
         flex: 1,
         justifyContent: "space-between",
     },
     content: {
         alignItems: "center",
-        textAlign: "center",
     },
     title: {
         marginBottom: spaceM,
+        textAlign: "center",
+    },
+    subtitle: {
+        textAlign: "center",
     },
     discountContainer: {
         alignItems: "center",
@@ -37,6 +43,7 @@ const style = StyleSheet.create({
         width: "100%",
     },
     bullet: {
+        alignItems: "center",
         flexDirection: "row",
         marginVertical: spaceS,
     },

package/dist/infrastructure/ui/views/item/Item.d.ts

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 interface ItemProps {
     readonly customerId: string;
 }

package/dist/infrastructure/ui/views/item/Item.js

@@ -1,22 +1,22 @@
-import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { SafeAreaView, ScrollView, View } from "react-native";
 import { useParams } from "react-router-native";
+import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { Body } from "../../components/layouts/body/Body";
+import { style } from "./Item.style";
+import { ProductVariantDescription } from "./components/productVariantDescription/ProductVariantDescription";
+import { ProductVariantSlider } from "./components/productVariantSlider/ProductVariantSlider";
 const Item = ({ customerId }) => {
     const { id } = useParams();
     const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
-    console.log(checkout);
-    return (React.createElement(View, { style: styles.container },
-        React.createElement(Text, { heading: true, level: 3 }, "Item"),
-        React.createElement(Text, { level: 2 }, id)));
+    const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id);
+    const { media, brand, name, price, size, color } = checkoutItem?.productVariant;
+    return (React.createElement(SafeAreaView, { style: style.container },
+        React.createElement(ScrollView, { contentContainerStyle: style.scrollContainer, showsVerticalScrollIndicator: false },
+            React.createElement(Body, null,
+                React.createElement(View, { style: style.sliderContainer },
+                    React.createElement(ProductVariantSlider, { producVariantMedia: media })),
+                React.createElement(ProductVariantDescription, { brand: brand, name: name, price: price, size: size, color: color })))));
 };
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: "#fff",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-});
 export { Item };

package/dist/infrastructure/ui/views/item/Item.style.d.ts

@@ -0,0 +1,14 @@
+declare const style: {
+    container: {
+        flex: number;
+    };
+    scrollContainer: {
+        flex: number;
+        flexGrow: number;
+    };
+    sliderContainer: {
+        flex: number;
+        marginBottom: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/item/Item.style.js

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../theme/theme";
+const { spaceXL } = theme();
+const style = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scrollContainer: {
+        flex: 1,
+        flexGrow: 1,
+    },
+    sliderContainer: {
+        flex: 1,
+        marginBottom: spaceXL,
+    },
+});
+export { style };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -28,7 +28,7 @@
     "@lookiero/messaging": "^8.0.0",
     "@lookiero/messaging-react": "^8.0.0",
     "react-native-get-random-values": "^1.8.0",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.4.1",
     "react-router-native": "^6.3.0",
     "tiny-invariant": "^1.2.0",
     "uuid": "^9.0.0"
@@ -46,7 +46,7 @@
     "@lookiero/aurora-fonts": "^1.0.6",
     "@lookiero/aurora-iconfont": "^2.0.37",
     "@lookiero/aurora-next": "^3.0.181",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^11.0.0",
     "@trivago/prettier-plugin-sort-imports": "^3.3.0",