@lookiero/checkout 0.2.30 → 0.2.31

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

@@ -1,6 +1,9 @@
 import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+declare type BodyStyle = "row" | "column";
 interface BodyProps {
     readonly children: ReactNode;
+    readonly style?: Partial<Record<BodyStyle, StyleProp<ViewStyle>>>;
 }
 declare const Body: FC<BodyProps>;
 export { Body };

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

@@ -2,6 +2,6 @@ import React from "react";
 import { Column } from "../../../shared/components/layouts/column/Column";
 import { Row } from "../../../shared/components/layouts/row/Row";
 import { style } from "./Body.style";
-const Body = ({ children }) => (React.createElement(Row, { style: style.row },
-    React.createElement(Column, { style: style.column }, children)));
+const Body = ({ children, style: customStyle }) => (React.createElement(Row, { style: [style.row, customStyle?.row] },
+    React.createElement(Column, { style: customStyle?.column }, children)));
 export { Body };

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

@@ -1,7 +1,4 @@
 declare const style: {
-    column: {
-        paddingHorizontal: number;
-    };
     row: {
         flex: number;
         justifyContent: "center";

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

@@ -1,10 +1,5 @@
 import { StyleSheet } from "react-native";
-import { theme } from "../../../theme/theme";
-const { spaceXL } = theme();
 const style = StyleSheet.create({
-    column: {
-        paddingHorizontal: spaceXL,
-    },
     row: {
         flex: 1,
         justifyContent: "center",

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

@@ -2,6 +2,7 @@ import { QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback, useState } from "react";
 import { Text, TouchableHighlight, View } from "react-native";
 import { useParams } from "react-router-native";
+import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { bookedSizeReplaceableProductVariants as bookedSizeReplaceableProductVariantsMock } from "../../../projection/bookedSizeReplaceableProductVariants/bookedSizeReplaceableProductVariants.mock";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -10,9 +11,9 @@ import { returnQuestions as returnQuestionsMock } from "../../../projection/retu
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { Spinner } from "../../shared/components/atoms/spinner/Spinner";
-import { Sticky } from "../../shared/components/layouts/sticky/Sticky";
 import { style } from "./Item.style";
-import { ProductVariantActions } from "./components/productVariantActions/ProductVariantActions";
+import { CustomerDecissionBanner } from "./components/banner/CustomerDecissionBanner";
+import { ItemActions } from "./components/itemActions/ItemActions";
 import { ProductVariantDescription } from "./components/productVariantDescription/ProductVariantDescription";
 import { ProductVariantSlider } from "./components/productVariantSlider/ProductVariantSlider";
 import { ReturnQuestionsFeedback } from "./components/returnQuestionsFeedback/ReturnQuestionsFeedback";
@@ -31,10 +32,12 @@ const Item = ({ customerId }) => {
     const handleOnKeep = useCallback(() => void 0, []);
     const handleOnReplace = useCallback(() => void 0, []);
     const handleOnReturn = useCallback(() => void 0, []);
+    const handleOnBannerPress = useCallback(() => void 0, []);
     if (status === QueryStatus.LOADING)
         return React.createElement(Spinner, null);
     const { price } = checkoutItem;
     const { media, brand, name, size, color } = checkoutItem.productVariant;
+    const customerDecissionMade = checkoutItem.status === CheckoutItemStatus.INITIAL || checkoutItem.status === CheckoutItemStatus.EXPIRED;
     const returnQuestions = returnQuestionsMock;
     const feedback = feedbackMock;
     const sizes = bookedSizeReplaceableProductVariantsMock.productVariants
@@ -43,7 +46,8 @@ const Item = ({ customerId }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(SafeAreaScrollView, null,
             React.createElement(Body, null,
-                React.createElement(View, { style: { paddingBottom: stickyHeight } },
+                !customerDecissionMade && (React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: handleOnBannerPress })),
+                React.createElement(View, { style: [style.container, { paddingBottom: stickyHeight }] },
                     React.createElement(View, { style: style.sliderContainer },
                         React.createElement(ProductVariantSlider, { producVariantMedia: media })),
                     React.createElement(ProductVariantDescription, { brand: brand, color: color, name: name, price: price, size: size }),
@@ -52,9 +56,7 @@ const Item = ({ customerId }) => {
                     React.createElement(View, { style: { flexDirection: "row", justifyContent: "center" } },
                         React.createElement(TouchableHighlight, { onPress: handleOnShowReturnQuestions },
                             React.createElement(Text, { style: { padding: 16 } }, "show return questions")))))),
-        React.createElement(Sticky, { onLayout: handleOnStickyLayout },
-            React.createElement(Body, null,
-                React.createElement(ProductVariantActions, { size: checkoutItem.productVariant.size, sizes: sizes, onKeep: handleOnKeep, onReplace: handleOnReplace, onReturn: handleOnReturn }))),
+        customerDecissionMade && (React.createElement(ItemActions, { size: checkoutItem.productVariant.size, sizes: sizes, onKeep: handleOnKeep, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn })),
         React.createElement(ReturnQuestionsForm, { checkoutItemPrice: checkoutItem.price, feedback: feedback, productVariant: checkoutItem.productVariant, returnQuestions: returnQuestions, visible: returnQuestionsVisible, onClose: handleOnHideReturnQuestions, onSubmit: handleOnSubmit })));
 };
 export { Item };

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

@@ -1,4 +1,7 @@
 declare const style: {
+    container: {
+        paddingHorizontal: number;
+    };
     feedbackContainer: {
         borderTopColor: string;
         borderTopWidth: number;

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

@@ -2,6 +2,9 @@ import { StyleSheet } from "react-native";
 import { theme } from "../../theme/theme";
 const { borderSize, colorGrayscaleM, spaceXL } = theme();
 const style = StyleSheet.create({
+    container: {
+        paddingHorizontal: spaceXL,
+    },
     feedbackContainer: {
         borderTopColor: colorGrayscaleM,
         borderTopWidth: borderSize,

package/dist/infrastructure/ui/views/item/components/{productVariantActions/ProductVariantActions.d.ts → itemActions/ItemActions.d.ts}

@@ -1,11 +1,13 @@
 import { FC } from "react";
 import { SizeProjection } from "../../../../../../projection/shared/size";
-interface ProductVariantActionsProps {
+import { Layout } from "../../../../shared/components/layouts/sticky/Sticky";
+interface ItemActionsProps {
     readonly sizes: SizeProjection[];
     readonly size: SizeProjection;
     readonly onKeep: (value: string) => void;
     readonly onReturn: () => void;
     readonly onReplace: () => void;
+    readonly onLayout?: ({ width, height }: Layout) => void;
 }
-declare const ProductVariantActions: FC<ProductVariantActionsProps>;
-export { ProductVariantActions };
+declare const ItemActions: FC<ItemActionsProps>;
+export { ItemActions };

package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.js

@@ -0,0 +1,25 @@
+import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
+import { BUTTON_VARIANT } from "@lookiero/aurora-next/build/components/atoms/Button/Button.definition";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { Body } from "../../../../components/layouts/body/Body";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { Sticky } from "../../../../shared/components/layouts/sticky/Sticky";
+import { SelectField } from "../../../../shared/components/molecules/selectField/SelectField";
+import { style } from "./ItemActions.style";
+const ItemActions = ({ sizes, size, onKeep, onReplace, onReturn, onLayout }) => {
+    const sizeSelectorLabelText = useI18nMessage({ id: I18nMessages.ITEM_SIZES_LABEL });
+    const keepButtonText = useI18nMessage({ id: I18nMessages.ITEM_KEEP_BUTTON });
+    const returnButtonText = useI18nMessage({ id: I18nMessages.ITEM_RETURN_BUTTON });
+    const sizeSelectorOptions = useMemo(() => sizes.map((size) => ({ label: size.lookiero, value: size.id })), [sizes]);
+    const disabledSizeSelector = useMemo(() => sizeSelectorOptions.length === 1 && sizeSelectorOptions[0]?.value === size.id, [sizeSelectorOptions, size.id]);
+    return (React.createElement(Sticky, { onLayout: onLayout },
+        React.createElement(Body, { style: { column: style.container } },
+            React.createElement(Button, { onPress: onKeep }, keepButtonText),
+            React.createElement(View, { style: style.row },
+                !size.unique && (React.createElement(SelectField, { disabled: disabledSizeSelector, options: sizeSelectorOptions, placeholder: sizeSelectorLabelText || "", style: { selectField: style.sizeSelector }, testID: "size-selector", value: size.id, onChange: onReplace })),
+                React.createElement(View, { style: style.returnButtonContainer },
+                    React.createElement(Button, { variant: BUTTON_VARIANT.SECONDARY, onPress: onReturn }, returnButtonText))))));
+};
+export { ItemActions };

package/dist/infrastructure/ui/views/item/components/{productVariantActions/ProductVariantActions.style.d.ts → itemActions/ItemActions.style.d.ts}

@@ -1,6 +1,6 @@
 declare const style: {
     container: {
-        width: string;
+        paddingHorizontal: number;
     };
     returnButtonContainer: {
         flex: number;

package/dist/infrastructure/ui/views/item/components/{productVariantActions/ProductVariantActions.style.js → itemActions/ItemActions.style.js}

@@ -1,9 +1,9 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
-const { spaceL } = theme();
+const { spaceL, spaceXL } = theme();
 const style = StyleSheet.create({
     container: {
-        width: "100%",
+        paddingHorizontal: spaceXL,
     },
     returnButtonContainer: {
         flex: 1,

package/package.json

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

package/dist/infrastructure/ui/views/item/components/productVariantActions/ProductVariantActions.js

@@ -1,22 +0,0 @@
-import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
-import { BUTTON_VARIANT } from "@lookiero/aurora-next/build/components/atoms/Button/Button.definition";
-import { useI18nMessage } from "@lookiero/i18n-react";
-import React, { useMemo } from "react";
-import { View } from "react-native";
-import { I18nMessages } from "../../../../i18n/i18n";
-import { SelectField } from "../../../../shared/components/molecules/selectField/SelectField";
-import { style } from "./ProductVariantActions.style";
-const ProductVariantActions = ({ sizes, size, onKeep, onReplace, onReturn }) => {
-    const sizeSelectorLabelText = useI18nMessage({ id: I18nMessages.ITEM_SIZES_LABEL });
-    const keepButtonText = useI18nMessage({ id: I18nMessages.ITEM_KEEP_BUTTON });
-    const returnButtonText = useI18nMessage({ id: I18nMessages.ITEM_RETURN_BUTTON });
-    const sizeSelectorOptions = useMemo(() => sizes.map((size) => ({ label: size.lookiero, value: size.id })), [sizes]);
-    const disabledSizeSelector = useMemo(() => sizeSelectorOptions.length === 1 && sizeSelectorOptions[0]?.value === size.id, [sizeSelectorOptions, size.id]);
-    return (React.createElement(View, { style: style.container },
-        React.createElement(Button, { onPress: onKeep }, keepButtonText),
-        React.createElement(View, { style: style.row },
-            !size.unique && (React.createElement(SelectField, { disabled: disabledSizeSelector, options: sizeSelectorOptions, placeholder: sizeSelectorLabelText || "", style: { selectField: style.sizeSelector }, testID: "size-selector", value: size.id, onChange: onReplace })),
-            React.createElement(View, { style: style.returnButtonContainer },
-                React.createElement(Button, { variant: BUTTON_VARIANT.SECONDARY, onPress: onReturn }, returnButtonText)))));
-};
-export { ProductVariantActions };