@lookiero/checkout 0.3.10 → 0.3.11

package/dist/package.json

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

package/dist/src/infrastructure/ui/views/checkout/Checkout.js

@@ -1,4 +1,3 @@
-import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
@@ -13,19 +12,21 @@ import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner"
 import { useMarkCheckoutAsPaid } from "../../../domain/checkout/react/useMarkCheckoutAsPaid";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPaymentFlowPayloadByCheckoutId } from "../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
+import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
 import { ProductVariant } from "../item/components/productVariant/ProductVariant";
+import { Pricing } from "../summary/components/pricing/Pricing";
 import { style } from "./Checkout.style";
 import { CheckoutSuccessModal } from "./components/CheckoutSuccessModal";
 const Checkout = ({ customerId, authToken }) => {
     const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
-    const payButtonText = useI18nMessage({ id: I18nMessages.CHECKOUT_PAY_BUTTON });
     const paymentFlowRef = useRef(null);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
         checkoutId: checkout?.id,
     });
@@ -34,7 +35,8 @@ const Checkout = ({ customerId, authToken }) => {
     const [processingCheckout, setProcessingCheckout] = useState(false);
     const navigate = useNavigate();
     const basePath = useBasePath();
-    const onSubmitCheckout = useCallback(() => {
+    const handleOnSubmitCheckout = useCallback(() => {
+        console.log("onSubmit checkout");
         if (!paymentFlowRef.current) {
             return;
         }
@@ -64,7 +66,7 @@ const Checkout = ({ customerId, authToken }) => {
     const handleOnSuccessModalDismiss = useCallback(() => navigate(`${basePath}/${Routes.FEEDBACK}`), [basePath, navigate]);
     const checkoutItemsKept = useMemo(() => checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
-    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus);
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) && dependenciesLoadedStatuses.includes(pricingStatus);
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(React.Fragment, null,
@@ -74,7 +76,8 @@ const Checkout = ({ customerId, authToken }) => {
                 React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
                 checkoutItemsKept?.map((checkoutItem) => (React.createElement(View, { key: checkoutItem.id, style: style.checkoutItemKept, testID: "checkout-items-kept" },
                     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, status: checkoutItem.status })))),
-                React.createElement(Button, { busy: processingCheckout || markAsPaidStatus === CommandStatus.LOADING, onPress: onSubmitCheckout }, payButtonText))),
+                pricing && (React.createElement(View, { style: style.pricingContainer },
+                    React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, busy: processingCheckout || markAsPaidStatus === CommandStatus.LOADING, collapsible: false, discount: pricing.discount, discountPercentage: pricing.discountPercentage, orderTotal: pricing.orderTotal, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onSubmit: handleOnSubmitCheckout }))))),
         React.createElement(PaymentFlow, { ref: paymentFlowRef, token: authToken })));
 };
 export { Checkout };

package/dist/src/infrastructure/ui/views/checkout/Checkout.style.d.ts

@@ -5,8 +5,12 @@ declare const style: {
     checkoutItemKept: {
         paddingVertical: number;
     };
+    pricingContainer: {
+        marginTop: number;
+    };
     title: {
         marginBottom: number;
+        marginTop: number;
         textAlign: "center";
     };
 };

package/dist/src/infrastructure/ui/views/checkout/Checkout.style.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../theme/theme";
-const { spaceM, spaceXL } = theme();
+const { spaceM, spaceXL, spaceXXL } = theme();
 const style = StyleSheet.create({
     bodyColumn: {
         paddingHorizontal: spaceXL,
@@ -8,8 +8,12 @@ const style = StyleSheet.create({
     checkoutItemKept: {
         paddingVertical: spaceM,
     },
+    pricingContainer: {
+        marginTop: spaceXL,
+    },
     title: {
         marginBottom: spaceM,
+        marginTop: spaceXXL,
         textAlign: "center",
     },
 });

package/dist/src/infrastructure/ui/views/summary/components/pricing/Pricing.d.ts

@@ -11,6 +11,7 @@ interface PricingProps {
     readonly service: ServiceProjection;
     readonly collapsible?: boolean;
     readonly collapsed?: boolean;
+    readonly busy?: boolean;
     readonly onPress?: () => void;
     readonly onSubmit: () => void;
 }

package/dist/src/infrastructure/ui/views/summary/components/pricing/Pricing.js

@@ -13,7 +13,7 @@ const PS_SERVICE_FREE_INDICATOR = 100;
 const Row = ({ text, level = 3, children }) => (React.createElement(View, { style: style.row },
     React.createElement(Text, { level: level, style: style.uppercase, action: true }, text),
     children));
-const Pricing = ({ orderTotal, subtotal, balanceDiscount, discount, discountPercentage = 0, totalCheckoutItemsKept, service, collapsible = true, collapsed = false, onPress = () => void 0, onSubmit, }) => {
+const Pricing = ({ orderTotal, subtotal, balanceDiscount, discount, discountPercentage = 0, totalCheckoutItemsKept, service, collapsible = true, collapsed = false, busy = false, onPress = () => void 0, onSubmit, }) => {
     const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL }) || "";
     const totalCheckoutItemsKeptText = useI18nMessage({
         id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
@@ -31,7 +31,7 @@ const Pricing = ({ orderTotal, subtotal, balanceDiscount, discount, discountPerc
     const isPSServiceFree = service.discount.amount === PS_SERVICE_FREE_INDICATOR;
     const collapsedStyle = useSpring({ opacitiy: collapsed ? 1 : 0 });
     const notCollapsedStyle = useSpring({ opacitiy: collapsed ? 0 : 1 });
-    return (React.createElement(Pressable, { disabled: !collapsible, testID: "pricing", onPress: onPress },
+    return (React.createElement(Pressable, { testID: "pricing", onPress: collapsible ? onPress : null },
         collapsible && (React.createElement(View, { style: style.iconContainer }, collapsed ? (React.createElement(ArrowUp, { style: style.icon, testID: "arrow-up" })) : (React.createElement(ArrowDown, { style: style.icon, testID: "arrow-down" })))),
         collapsed && collapsible ? (React.createElement(animated.View, { style: [style.collapsed, { opacity: collapsedStyle.opacitiy }] },
             React.createElement(View, null,
@@ -41,7 +41,7 @@ const Pricing = ({ orderTotal, subtotal, balanceDiscount, discount, discountPerc
                     totalCheckoutItemsKeptText),
                 React.createElement(Price, { price: orderTotal, variant: "detail" })),
             React.createElement(View, null,
-                React.createElement(Button, { small: true, onPress: onSubmit }, submitButtonText)))) : (React.createElement(animated.View, { style: { opacity: notCollapsedStyle.opacitiy } },
+                React.createElement(Button, { busy: busy, small: true, onPress: onSubmit }, submitButtonText)))) : (React.createElement(animated.View, { style: { opacity: notCollapsedStyle.opacitiy } },
             React.createElement(Row, { text: `${subtotalText} ${totalCheckoutItemsKeptText}` },
                 React.createElement(Price, { price: subtotal, variant: "subtotal" })),
             discount && (React.createElement(Row, { text: discountText },
@@ -52,6 +52,6 @@ const Pricing = ({ orderTotal, subtotal, balanceDiscount, discount, discountPerc
             React.createElement(View, { style: style.divider }),
             React.createElement(Row, { level: 2, text: totalText },
                 React.createElement(Price, { price: orderTotal, variant: "total" })),
-            React.createElement(Button, { onPress: onSubmit }, submitButtonText)))));
+            React.createElement(Button, { busy: busy, onPress: onSubmit }, submitButtonText)))));
 };
 export { Pricing };

package/package.json

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