@lookiero/checkout 0.2.27-beta.3 → 0.2.27-beta.4

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

@@ -1,20 +1,10 @@
-import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
-import { startedCheckoutWithStatusProjection } from "./checkout.mock";
-const httpFirstAvailableCheckoutByCustomerIdView = ({}) => async ({}) => {
-    return startedCheckoutWithStatusProjection({
-        status: [
-            CheckoutItemStatus.INITIAL,
-            CheckoutItemStatus.INITIAL,
-            CheckoutItemStatus.INITIAL,
-            CheckoutItemStatus.INITIAL,
-            CheckoutItemStatus.INITIAL,
-        ],
+import { toCheckoutProjection } from "./checkout";
+const httpFirstAvailableCheckoutByCustomerIdView = ({ httpPost }) => async ({ customerId, signal }) => {
+    const response = await httpPost({
+        endpoint: "/view-first-available-checkout-by-customer-id",
+        body: { customer_id: customerId },
+        signal,
     });
-    // const response = await httpPost({
-    //   endpoint: "/view-first-available-checkout-by-customer-id",
-    //   body: { customer_id: customerId },
-    //   signal,
-    // });
-    // return !response.ok || response.status === 404 ? undefined : toCheckoutProjection((await response.json()).result);
+    return !response.ok || response.status === 404 ? undefined : toCheckoutProjection((await response.json()).result);
 };
 export { httpFirstAvailableCheckoutByCustomerIdView };

package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.js

@@ -6,7 +6,7 @@ const { spaceXL } = theme();
 const SafeAreaScrollView = ({ children, edges = ["top", "bottom", "left", "right"] }) => {
     const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
     return (React.createElement(SafeAreaView, { edges: edges },
-        React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
+        React.createElement(ScrollView, null,
             React.createElement(View, { style: {
                     paddingTop: !safeAreaInsetTop ? spaceXL : 0,
                     paddingBottom: !safeAreaInsetBottom ? spaceXL : 0,

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.js

@@ -1,20 +1,33 @@
 import { Portal } from "@gorhom/portal";
+import { useBack } from "@lookiero/aurora-next/build/hooks/useBack/useBack";
 import { animated, useTransition } from "@react-spring/native";
 import React, { useCallback, useMemo, useState } from "react";
 import { Dimensions, Platform, ScrollView, TouchableWithoutFeedback, View, } from "react-native";
 import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
+import { theme } from "../../../../theme/theme";
 import { useScreenSize } from "../../../hooks/useScreenSize";
 import { ButtonIcon } from "../../molecules/buttonIcon/ButtonIcon";
 import { Row } from "../row/Row";
 import { style } from "./Modal.style";
+const { spaceXXL } = theme();
 const TRANSITION_MODAL_SCALE = 0.9;
+const DEFAULT_SAFEAREA_INSET_TOP = spaceXXL;
 const Modal = ({ children, visible, header, portalHostName, onClose, showCloseButton = false, size = { M: "2/3", L: "1/3" }, style: customStyle, scroll = false, }) => {
     const { height: screenHeight } = Dimensions.get("screen");
     const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
-    const screenSizeWithoutInsets = screenHeight - safeAreaInsetTop;
+    // On Android safeAreaInsetTop won't return the actual value.
+    const screenSizeWithoutInsets = screenHeight - (Platform.OS === "android" ? DEFAULT_SAFEAREA_INSET_TOP : safeAreaInsetTop);
     const screenSize = useScreenSize();
-    const isSmallDevice = screenSize === "S" || Platform.OS !== "web";
+    const isSmallDevice = screenSize === "S";
     const columnSizeForScreenSize = size[screenSize];
+    const handleHardwareBackPress = useCallback(() => {
+        if (!visible) {
+            return;
+        }
+        onClose();
+        return true; // The event will not be bubbled up
+    }, [onClose, visible]);
+    useBack(handleHardwareBackPress);
     const [modalHeight, setModalHeight] = useState();
     const handleOnModalLayout = useCallback(({ nativeEvent: { layout: { height }, }, }) => setModalHeight(height), []);
     const transitions = useTransition(visible, {
@@ -45,7 +58,7 @@ const Modal = ({ children, visible, header, portalHostName, onClose, showCloseBu
             React.createElement(Row, { pointerEvents: "box-none", style: [style.row, isSmallDevice && style.rowSmall, customStyle?.row] },
                 React.createElement(animated.View, { pointerEvents: visible ? "auto" : "none", style: [
                         style.modal,
-                        columnSizeForScreenSize && style.modal[columnSizeForScreenSize],
+                        columnSizeForScreenSize && style[columnSizeForScreenSize],
                         {
                             opacity: modalOpacity,
                             transform: [{ translateY: modalTranslateY }, { scale: modalScale }],

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.style.d.ts

@@ -1,34 +1,12 @@
-import { ViewStyle } from "react-native";
-declare const style: {
-    container: {
-        height: string;
-        overflow: "hidden";
-        position: "absolute";
-        width: string;
-    };
-    header: {
-        alignItems: "center";
-        flexDirection: "row";
-        justifyContent: "space-between";
-        padding: number;
-    };
-    modal: {
-        "1/4": ViewStyle;
-        "1/3": ViewStyle;
-        "1/2": ViewStyle;
-        "2/3": ViewStyle;
-        backgroundColor: string;
-        position: "absolute";
-        width: string;
-        zIndex: number;
-    };
+import { StyleSheet, ViewStyle } from "react-native";
+declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
     overlay: {
-        backgroundColor: string;
-        cursor: string;
         height: string;
         position: "absolute";
         width: string;
         zIndex: number;
+        cursor?: string | undefined;
+        backgroundColor: string;
     };
     row: {
         alignContent: "center";
@@ -42,5 +20,36 @@ declare const style: {
         flex: number;
         zIndex: number;
     };
-};
+    "1/4": ViewStyle;
+    "1/3": ViewStyle;
+    "1/2": ViewStyle;
+    "2/3": ViewStyle;
+    container: {
+        width: string;
+        height: string;
+        overflow: "hidden";
+    } | {
+        width: string;
+        position: "fixed";
+        height: string;
+        overflow: "hidden";
+    } | {
+        width: string;
+        position: "absolute";
+        height: string;
+        overflow: "hidden";
+    };
+    header: {
+        alignItems: "center";
+        flexDirection: "row";
+        justifyContent: "space-between";
+        padding: number;
+    };
+    modal: {
+        backgroundColor: string;
+        position: "absolute";
+        width: string;
+        zIndex: number;
+    };
+}>;
 export { style };

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.style.js

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
 const { spaceM, colorBase, colorOverlay } = theme();
 const modalStylesForColumSize = {
@@ -16,10 +16,16 @@ const modalStylesForColumSize = {
     },
 };
 const style = StyleSheet.create({
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     container: {
         height: "100%",
         overflow: "hidden",
-        position: "absolute",
+        ...Platform.select({
+            web: { position: "fixed" },
+            android: { position: "absolute" },
+            ios: { position: "absolute" },
+        }),
         width: "100%",
     },
     header: {
@@ -33,11 +39,13 @@ const style = StyleSheet.create({
         position: "absolute",
         width: "100%",
         zIndex: 3,
-        ...modalStylesForColumSize,
     },
+    ...modalStylesForColumSize,
     overlay: {
         backgroundColor: colorOverlay,
-        cursor: "pointer",
+        ...Platform.select({
+            web: { cursor: "pointer" },
+        }),
         height: "100%",
         position: "absolute",
         width: "100%",

package/package.json

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