@lookiero/checkout 0.2.45 → 0.2.47

package/dist/infrastructure/ui/components/layouts/tabs/Tabs.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+interface TabStyle {
+    readonly tab: StyleProp<ViewStyle>;
+    readonly tabText: StyleProp<TextStyle>;
+}
+interface TabListStyle {
+    readonly tabList: StyleProp<ViewStyle>;
+    readonly indicator: StyleProp<ViewStyle>;
+    readonly tab: Partial<TabStyle>;
+}
+interface TabsStyle {
+    readonly tabContainer: StyleProp<ViewStyle>;
+    readonly sliderContainer: StyleProp<ViewStyle>;
+    readonly tabList: Partial<TabListStyle>;
+}
+interface TabsProps {
+    readonly children: JSX.Element[];
+    readonly defaultIndex?: number;
+    readonly tabLabels: string[];
+    readonly style?: Partial<TabsStyle>;
+    readonly onChanged?: (index: number) => void;
+    readonly tabLabelsWrapper?: (children: ReactNode) => ReactNode;
+}
+declare const Tabs: FC<TabsProps>;
+export { Tabs };

package/dist/infrastructure/ui/components/layouts/tabs/Tabs.js

@@ -0,0 +1,47 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { animated, useSpring } from "@react-spring/native";
+import React, { Children, useCallback, useState } from "react";
+import { Pressable, View } from "react-native";
+import invariant from "tiny-invariant";
+import { Slider } from "../../../shared/components/layouts/slider/Slider";
+import { style } from "./Tabs.style";
+const Tab = ({ children, active, disabled = false, style: customStyle, onPress, onLayout }) => (React.createElement(Pressable, { disabled: disabled, style: [style.tab, customStyle?.tab], testID: "tab", onLayout: onLayout, onPress: onPress },
+    React.createElement(Text, { level: 2, style: [style.tabText, active && style.tabActiveText, customStyle?.tabText], detail: true }, children)));
+const TabList = ({ labels = [], tabIndex = 0, style: customStyle, onSelect }) => {
+    const [tabItemPositions, setTabItemPositions] = useState([]);
+    const handleOnLayout = useCallback(({ nativeEvent: { layout: { width, x }, }, }, index) => setTabItemPositions((prevState) => [
+        ...prevState.slice(0, index),
+        {
+            position: x,
+            width,
+        },
+        ...prevState.slice(index),
+    ]), []);
+    const springs = useSpring({
+        width: tabItemPositions[tabIndex]?.width,
+        left: tabItemPositions[tabIndex]?.position,
+    });
+    return (React.createElement(View, { style: [style.tabs, customStyle?.tabList], testID: "tab-list" },
+        labels.map((item, index) => (React.createElement(Tab, { key: index, active: tabIndex === index, style: customStyle?.tab, onLayout: (event) => handleOnLayout(event, index), onPress: () => onSelect?.(index) }, item))),
+        React.createElement(animated.View, { style: [
+                style.indicator,
+                {
+                    width: springs.width,
+                    left: springs.left,
+                },
+                customStyle?.indicator,
+            ] })));
+};
+const Tabs = ({ children, defaultIndex = 0, tabLabels, style: customStyle, onChanged, tabLabelsWrapper = (children) => children, }) => {
+    invariant(Children.count(children) === tabLabels.length, "Children and tab labels must be the same length");
+    const [active, setActive] = useState(defaultIndex);
+    const handleOnActiveChanged = useCallback((activeIndex) => {
+        setActive(activeIndex);
+        onChanged?.(activeIndex);
+    }, [onChanged]);
+    return (React.createElement(View, { style: [style.container, customStyle?.tabContainer], testID: "tabs" },
+        tabLabelsWrapper(React.createElement(TabList, { labels: tabLabels, style: customStyle?.tabList, tabIndex: active, onSelect: handleOnActiveChanged })),
+        React.createElement(View, { style: customStyle?.sliderContainer },
+            React.createElement(Slider, { active: active, gesturesEnabled: false, paginationEnabled: false, onChanged: handleOnActiveChanged }, children))));
+};
+export { Tabs };

package/dist/infrastructure/ui/components/layouts/tabs/Tabs.style.d.ts

@@ -0,0 +1,32 @@
+declare const style: {
+    container: {
+        width: string;
+    };
+    indicator: {
+        backgroundColor: string;
+        bottom: number;
+        display: "flex";
+        height: number;
+        position: "absolute";
+    };
+    tab: {
+        marginHorizontal: number;
+        paddingVertical: number;
+    };
+    tabActiveText: {
+        color: string;
+    };
+    tabText: {
+        color: string;
+    };
+    tabs: {
+        alignItems: "center";
+        backgroundColor: string;
+        borderBottomColor: string;
+        borderBottomWidth: number;
+        flexDirection: "row";
+        justifyContent: "center";
+        marginBottom: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/layouts/tabs/Tabs.style.js

@@ -0,0 +1,35 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../theme/theme";
+const { colorBase, colorContent, colorGrayscaleS, colorGrayscaleL, spaceM, spaceXL } = theme();
+const style = StyleSheet.create({
+    container: {
+        width: "100%",
+    },
+    indicator: {
+        backgroundColor: colorContent,
+        bottom: -1,
+        display: "flex",
+        height: 1,
+        position: "absolute",
+    },
+    tab: {
+        marginHorizontal: spaceM,
+        paddingVertical: spaceM,
+    },
+    tabActiveText: {
+        color: colorContent,
+    },
+    tabText: {
+        color: colorGrayscaleL,
+    },
+    tabs: {
+        alignItems: "center",
+        backgroundColor: colorBase,
+        borderBottomColor: colorGrayscaleS,
+        borderBottomWidth: 1,
+        flexDirection: "row",
+        justifyContent: "center",
+        marginBottom: spaceXL,
+    },
+});
+export { style };

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

@@ -32,6 +32,8 @@ declare enum I18nMessages {
     FEEDBACK_TITLE = "feedback.title",
     FEEDBACK_UNANSWERED = "feedback.unanswered",
     RETURN_QUESTIONS_TITLE = "return_questions.title",
-    RETURN_QUESTIONS_SUBMIT_BUTTON = "return_questions.submit_button"
+    RETURN_QUESTIONS_SUBMIT_BUTTON = "return_questions.submit_button",
+    SUMMARY_KEEP_TAB = "summary.keep_tab",
+    SUMMARY_RETURN_TAB = "summary.return_tab"
 }
 export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };

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

@@ -34,5 +34,7 @@ var I18nMessages;
     I18nMessages["FEEDBACK_UNANSWERED"] = "feedback.unanswered";
     I18nMessages["RETURN_QUESTIONS_TITLE"] = "return_questions.title";
     I18nMessages["RETURN_QUESTIONS_SUBMIT_BUTTON"] = "return_questions.submit_button";
+    I18nMessages["SUMMARY_KEEP_TAB"] = "summary.keep_tab";
+    I18nMessages["SUMMARY_RETURN_TAB"] = "summary.return_tab";
 })(I18nMessages || (I18nMessages = {}));
 export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };

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

@@ -40,7 +40,7 @@ const Routing = ({ onNotAccessible, customerId, locale, I18n, onI18nError }) =>
                                         {
                                             path: Routes.SUMMARY,
                                             element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                                                React.createElement(Summary, null))),
+                                                React.createElement(Summary, { customerId: customerId }))),
                                         },
                                     ],
                                 },

package/dist/infrastructure/ui/views/summary/Summary.d.ts

@@ -1,3 +1,6 @@
 import { FC } from "react";
-declare const Summary: FC;
+interface SummaryProps {
+    readonly customerId: string;
+}
+declare const Summary: FC<SummaryProps>;
 export { Summary };

package/dist/infrastructure/ui/views/summary/Summary.js

@@ -1,19 +1,18 @@
-import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
-import { useI18nMessage } from "@lookiero/i18n-react";
+import { QueryStatus } from "@lookiero/messaging-react";
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
-const Summary = () => {
-    const summaryText = useI18nMessage({ id: "summary" });
+import { Spinner } from "../../shared/components/atoms/spinner/Spinner";
+import { CheckoutItemsTabs } from "./components/checkoutItemsTabs/CheckoutItemsTabs";
+const Summary = ({ customerId }) => {
+    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus);
+    if (!dependenciesLoaded)
+        return React.createElement(Spinner, null);
     return (React.createElement(SafeAreaScrollView, null,
-        React.createElement(View, { style: styles.container },
-            React.createElement(Text, { heading: true, level: 3 }, summaryText))));
+        React.createElement(Body, null,
+            React.createElement(CheckoutItemsTabs, { checkoutItems: checkout?.items || [] }))));
 };
-const styles = StyleSheet.create({
-    container: {
-        alignItems: "center",
-        flex: 1,
-        justifyContent: "center",
-    },
-});
 export { Summary };

package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
+interface CheckoutItemsTabsProps {
+    readonly checkoutItems: CheckoutItemProjection[];
+}
+declare const CheckoutItemsTabs: FC<CheckoutItemsTabsProps>;
+export { CheckoutItemsTabs };

package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.js

@@ -0,0 +1,20 @@
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { Tabs } from "../../../../components/layouts/tabs/Tabs";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { ProductVariant } from "../../../item/components/productVariant/ProductVariant";
+import { style } from "./CheckoutItemsTabs.style";
+const CheckoutItem = ({ checkoutItem, testID }) => (React.createElement(View, { style: style.checkoutItem, testID: testID },
+    React.createElement(ProductVariant, { brand: checkoutItem.productVariant.brand, color: checkoutItem.productVariant.color, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, size: checkoutItem.productVariant.size })));
+const CheckoutItemsTabs = ({ checkoutItems }) => {
+    const keepTabText = useI18nMessage({ id: I18nMessages.SUMMARY_KEEP_TAB });
+    const returnTabText = useI18nMessage({ id: I18nMessages.SUMMARY_RETURN_TAB });
+    const keepCheckoutItems = useMemo(() => checkoutItems.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkoutItems]);
+    const returnCheckoutItems = useMemo(() => checkoutItems.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.RETURNED || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkoutItems]);
+    return (React.createElement(Tabs, { style: { sliderContainer: style.sliderContainer }, tabLabels: [`${keepTabText} (${keepCheckoutItems.length})`, `${returnTabText} (${returnCheckoutItems.length})`] },
+        React.createElement(React.Fragment, null, keepCheckoutItems.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItem: checkoutItem, testID: "keep-checkout-item" })))),
+        React.createElement(React.Fragment, null, returnCheckoutItems.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItem: checkoutItem, testID: "return-checkout-item" }))))));
+};
+export { CheckoutItemsTabs };

package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.style.d.ts

@@ -0,0 +1,9 @@
+declare const style: {
+    checkoutItem: {
+        paddingVertical: number;
+    };
+    sliderContainer: {
+        paddingHorizontal: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceM, spaceXL } = theme();
+const style = StyleSheet.create({
+    checkoutItem: {
+        paddingVertical: spaceM,
+    },
+    sliderContainer: {
+        paddingHorizontal: spaceXL,
+    },
+});
+export { style };

package/package.json

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