@lookiero/checkout 1.1.7 → 1.2.0-beta.0

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

@@ -1,5 +1,4 @@
-import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
-import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { Button, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { animated, useSpring } from "@react-spring/native";
 import React from "react";
@@ -13,7 +12,7 @@ import { ArrowUp } from "./icons/ArrowUp";
 const { colorGrayscaleS } = theme();
 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),
+    React.createElement(Text, { level: level, action: true, upperCase: true }, text),
     children));
 const Pricing = ({ pendingToPay, subtotal, balanceDiscount, discount, discountPercentage = 0, totalCheckoutItemsKept, service, collapsible = true, collapsed = false, busy = false, onPress = () => void 0, onSubmit, }) => {
     const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL }) || "";
@@ -50,7 +49,7 @@ const Pricing = ({ pendingToPay, subtotal, balanceDiscount, discount, discountPe
                 React.createElement(Price, { price: discount, variant: "subtotal" }))),
             balanceDiscount && balanceDiscount.amount !== 0 && (React.createElement(Row, { text: creditText },
                 React.createElement(Price, { price: balanceDiscount, variant: "subtotal" }))),
-            React.createElement(Row, { text: feeText }, isPSServiceFree ? (React.createElement(Text, { level: 3, style: style.uppercase, action: true }, freeText)) : (React.createElement(Price, { price: service.finalPrice, variant: "subtotal" }))),
+            React.createElement(Row, { text: feeText }, isPSServiceFree ? (React.createElement(Text, { level: 3, action: true, upperCase: true }, freeText)) : (React.createElement(Price, { price: service.finalPrice, variant: "subtotal" }))),
             React.createElement(View, { style: style.divider }),
             React.createElement(Row, { level: 2, text: totalText },
                 React.createElement(Price, { price: pendingToPay, variant: "total" })),

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

@@ -24,8 +24,5 @@ declare const style: {
     totalCollapsed: {
         marginBottom: number;
     };
-    uppercase: {
-        textTransform: "uppercase";
-    };
 };
 export { style };

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

@@ -27,8 +27,5 @@ const style = StyleSheet.create({
     totalCollapsed: {
         marginBottom: spaceXS,
     },
-    uppercase: {
-        textTransform: "uppercase",
-    },
 });
 export { style };

package/dist/shared/notifications/domain/notification/command/createNotification.d.ts

@@ -0,0 +1,17 @@
+import { Command } from "@lookiero/messaging";
+import { NotificationLevel } from "../model/notification";
+declare const CREATE_NOTIFICATION = "create_notification";
+interface CreateNotificationPayload {
+    readonly aggregateId: string;
+    readonly level: NotificationLevel;
+    readonly bodyI18nKey: string;
+    readonly titleI18nKey: string | undefined;
+}
+interface CreateNotification extends Command<typeof CREATE_NOTIFICATION>, CreateNotificationPayload {
+}
+interface CreateNotificationFunction {
+    (payload: CreateNotificationPayload): CreateNotification;
+}
+declare const createNotification: CreateNotificationFunction;
+export type { CreateNotification };
+export { CREATE_NOTIFICATION, createNotification };

package/dist/shared/notifications/domain/notification/command/createNotification.js

@@ -0,0 +1,7 @@
+import { command } from "@lookiero/messaging";
+const CREATE_NOTIFICATION = "create_notification";
+const createNotification = ({ aggregateId, ...payload }) => ({
+    ...command({ aggregateId, name: CREATE_NOTIFICATION }),
+    ...payload,
+});
+export { CREATE_NOTIFICATION, createNotification };

package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.d.ts

@@ -0,0 +1,21 @@
+import { CommandStatus } from "@lookiero/messaging-react";
+import { Logger } from "../../../../../logging/Logger";
+import { NotificationLevel } from "../../../../domain/notification/model/notification";
+interface CreateNotificationFunctionArgs {
+    readonly aggregateId?: string;
+    readonly level: NotificationLevel;
+    readonly bodyI18nKey: string;
+    readonly titleI18nKey?: string;
+}
+interface CreateNotificationFunction {
+    (args: CreateNotificationFunctionArgs): Promise<void>;
+}
+interface UseCreateNotificationFunctionArgs {
+    readonly contextId: string;
+    readonly logger: Logger;
+}
+interface UseCreateNotificationFunction {
+    (args: UseCreateNotificationFunctionArgs): [create: CreateNotificationFunction, status: CommandStatus];
+}
+declare const useCreateNotification: UseCreateNotificationFunction;
+export { useCreateNotification };

package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.js

@@ -0,0 +1,22 @@
+import { useCommand } from "@lookiero/messaging-react";
+import { useCallback } from "react";
+import { v4 as uuid } from "uuid";
+import { createNotification } from "../../../../domain/notification/command/createNotification";
+const useCreateNotification = ({ contextId, logger }) => {
+    const [commandBus, status] = useCommand({ contextId });
+    const create = useCallback(async ({ aggregateId, level, titleI18nKey, bodyI18nKey }) => {
+        try {
+            await commandBus(createNotification({
+                aggregateId: aggregateId || uuid(),
+                level,
+                titleI18nKey,
+                bodyI18nKey,
+            }));
+        }
+        catch (error) {
+            logger.captureException(error);
+        }
+    }, [commandBus, logger]);
+    return [create, status];
+};
+export { useCreateNotification };

package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { ToastStyle } from "../../../../ui/components/molecules/toast/Toast";
+import { NotificationProjection } from "../../../projection/notification/notification";
+interface NotificationItemProps {
+    readonly notification: NotificationProjection;
+    readonly onRemove: (notificationId: string) => void;
+    readonly autoHideTimeout?: number;
+    readonly testID?: string;
+    readonly style?: ToastStyle;
+}
+declare const NotificationItem: FC<NotificationItemProps>;
+export { NotificationItem };

package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.js

@@ -0,0 +1,24 @@
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React from "react";
+import { useCallback, useEffect } from "react";
+import { Toast, ToastVariant } from "../../../../ui/components/molecules/toast/Toast";
+import { NotificationLevel } from "../../../domain/notification/model/notification";
+const toastVariantForNotificationLevel = {
+    [NotificationLevel.INFO]: ToastVariant.INFO,
+    [NotificationLevel.ERROR]: ToastVariant.ERROR,
+    [NotificationLevel.SUCCESS]: ToastVariant.SUCCESS,
+};
+const NotificationItem = ({ notification, onRemove, autoHideTimeout, testID = "notification-item", style: customStyle, }) => {
+    const title = useI18nMessage({ id: notification.titleI18nKey }) || undefined;
+    const body = useI18nMessage({ id: notification.bodyI18nKey || "" });
+    const handleOnClose = useCallback(() => onRemove(notification.id), [notification.id, onRemove]);
+    useEffect(() => {
+        if (!autoHideTimeout) {
+            return;
+        }
+        const hideTimeout = setTimeout(handleOnClose, autoHideTimeout);
+        return () => clearTimeout(hideTimeout);
+    }, [autoHideTimeout, handleOnClose]);
+    return (React.createElement(Toast, { body: body, style: customStyle, testID: testID, title: title, variant: toastVariantForNotificationLevel[notification.level], onClose: handleOnClose }));
+};
+export { NotificationItem };

package/dist/shared/notifications/infrastructure/ui/components/Notifications.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { NotificationProjection } from "../../../projection/notification/notification";
+interface NotificationsProps {
+    readonly notifications?: NotificationProjection[];
+    readonly onRemove: (notificationId: string) => void;
+    readonly autoHideTimeout?: number;
+}
+declare const Notifications: FC<NotificationsProps>;
+export { Notifications };

package/dist/shared/notifications/infrastructure/ui/components/Notifications.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Column } from "../../../../ui/components/layouts/column/Column";
+import { Row } from "../../../../ui/components/layouts/row/Row";
+import { Stack } from "../../../../ui/components/layouts/stack/Stack";
+import { useScreenSize } from "../../../../ui/hooks/useScreenSize";
+import { NotificationItem } from "./NotificationItem";
+import { style } from "./Notifications.style";
+const NOTIFICATIONS_AUTOHIDE_TIMEOUT = 10000;
+const Notifications = ({ notifications = [], onRemove, autoHideTimeout = NOTIFICATIONS_AUTOHIDE_TIMEOUT, }) => {
+    const { top: safeAreaInsetTop } = useSafeAreaInsets();
+    const screenSize = useScreenSize();
+    const isSmallDevice = screenSize === "S";
+    return (React.createElement(View, { pointerEvents: "box-none", style: style.notifications, testID: "notifications" },
+        React.createElement(Row, { style: [style.row, isSmallDevice && style.rowSmall, { paddingTop: safeAreaInsetTop }] },
+            React.createElement(Column, null,
+                React.createElement(Stack, null, notifications.map((notification) => (React.createElement(NotificationItem, { key: notification.id, autoHideTimeout: autoHideTimeout, notification: notification, style: { toast: style.toast }, testID: notification.id, onRemove: onRemove }))))))));
+};
+export { Notifications };

package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.d.ts

@@ -0,0 +1,36 @@
+import { StyleSheet } from "react-native";
+declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    notifications: {
+        flexDirection: "column";
+        top: number;
+        width: string;
+        zIndex: number;
+        left: number;
+    } | {
+        flexDirection: "column";
+        top: number;
+        width: string;
+        zIndex: number;
+        position: "fixed";
+        left: number;
+    } | {
+        flexDirection: "column";
+        top: number;
+        width: string;
+        zIndex: number;
+        position: "absolute";
+        left: number;
+    };
+    row: {
+        flex: number;
+        justifyContent: "center";
+    };
+    rowSmall: {
+        paddingLeft: number;
+        paddingRight: number;
+    };
+    toast: {
+        marginTop: number;
+    };
+}>;
+export { style };

package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.js

@@ -0,0 +1,31 @@
+import { Platform, StyleSheet } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+const { spaceM } = theme();
+const style = StyleSheet.create({
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    notifications: {
+        left: 0,
+        ...Platform.select({
+            web: { position: "fixed" },
+            ios: { position: "absolute" },
+            android: { position: "absolute" },
+        }),
+        flexDirection: "column",
+        top: 0,
+        width: "100%",
+        zIndex: 20,
+    },
+    row: {
+        flex: 1,
+        justifyContent: "center",
+    },
+    rowSmall: {
+        paddingLeft: spaceM,
+        paddingRight: spaceM,
+    },
+    toast: {
+        marginTop: spaceM,
+    },
+});
+export { style };

package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.js

@@ -1,5 +1,4 @@
-import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
-import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { ALIGN, Button, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
 import { useCallback } from "react";
@@ -13,14 +12,8 @@ const ModalNotificationItem = ({ visible, notification, onRemove, testID = "moda
     const handleOnClose = useCallback(() => onRemove(notification.id), [notification.id, onRemove]);
     return (React.createElement(Modal, { testID: testID, visible: visible, onClose: handleOnClose },
         React.createElement(View, { style: style.modal },
-            React.createElement(Text, { level: 1, style: style.modalTitle, body: true }, titleText),
-            React.createElement(Text, { level: 3, style: style.modalDescription, body: true }, bodyText),
-            React.createElement(Button
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            , { 
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                style: style.button, onPress: handleOnClose }, acceptText))));
+            React.createElement(Text, { align: ALIGN.CENTER, level: 1 }, titleText),
+            React.createElement(Text, { level: 3, style: style.modalDescription }, bodyText),
+            React.createElement(Button, { style: style.button, onPress: handleOnClose }, acceptText))));
 };
 export { ModalNotificationItem };

package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.style.d.ts

@@ -9,8 +9,5 @@ declare const style: {
         marginVertical: number;
         textAlign: "center";
     };
-    modalTitle: {
-        textAlign: "center";
-    };
 };
 export { style };

package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.style.js

@@ -12,8 +12,5 @@ const style = StyleSheet.create({
         marginVertical: spaceXL,
         textAlign: "center",
     },
-    modalTitle: {
-        textAlign: "center",
-    },
 });
 export { style };

package/dist/shared/tracking/infrastructure/usePageView.d.ts

@@ -0,0 +1,13 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface UsePageViewFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId?: string;
+    readonly checkoutItemId?: string;
+}
+interface UsePageViewFunction {
+    (agrs: UsePageViewFunctionArgs): void;
+}
+declare const usePageView: UsePageViewFunction;
+export { usePageView };

package/dist/shared/tracking/infrastructure/usePageView.js

@@ -0,0 +1,27 @@
+import { useLayoutEffect } from "react";
+import { PROJECT } from "../../../infrastructure/tracking/tracking";
+import { TrackingEvent, TrackingEventCategory } from "../tracking";
+import { useEmitUserEvent } from "./useEmitUserEvent";
+const usePageView = ({ page, country, checkoutId, checkoutItemId }) => {
+    const emitUserEvent = useEmitUserEvent();
+    useLayoutEffect(() => {
+        if (!checkoutId) {
+            return;
+        }
+        const baseTrackingEvent = {
+            event: TrackingEvent.PAGEVIEW,
+            eventCategory: TrackingEventCategory.NAVIGATION,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+        };
+        const pageViewTrackingEvent = checkoutItemId
+            ? {
+                ...baseTrackingEvent,
+                checkoutItemId,
+            }
+            : baseTrackingEvent;
+        emitUserEvent(pageViewTrackingEvent);
+    }, [checkoutId, checkoutItemId, country, emitUserEvent, page]);
+};
+export { usePageView };

package/dist/shared/ui/components/atoms/error/Error.js

@@ -1,5 +1,4 @@
-import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { COLOR, Text } from "@lookiero/aurora";
 import React from "react";
-import { style } from "./Error.style";
-const Error = ({ error, style: customStyle }) => (React.createElement(Text, { level: 2, style: [style.error, customStyle], detail: true }, error));
+const Error = ({ error, style: customStyle }) => (React.createElement(Text, { color: COLOR.PRIMARY, level: 2, style: customStyle, detail: true }, error));
 export { Error };

package/dist/shared/ui/components/atoms/field/Field.js

@@ -1,4 +1,4 @@
-import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { Text } from "@lookiero/aurora";
 import { animated, useSpring } from "@react-spring/native";
 import React, { useCallback, useState } from "react";
 import { View } from "react-native";

package/dist/shared/ui/components/atoms/spinner/Spinner.js

@@ -1,4 +1,4 @@
-import { Spinner as AuroraSpinner } from "@lookiero/aurora-next/build/components/atoms/Spinner/Spinner";
+import { Spinner as AuroraSpinner } from "@lookiero/aurora";
 import React from "react";
 import { View } from "react-native";
 import { style } from "./Spinner.style";

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

@@ -1,5 +1,5 @@
 import { Portal } from "@gorhom/portal";
-import { useBack } from "@lookiero/aurora-next/build/hooks/useBack/useBack";
+import { useBack } from "@lookiero/aurora";
 import { animated, useTransition } from "@react-spring/native";
 import React, { useCallback, useMemo, useState } from "react";
 import { Dimensions, Platform, TouchableWithoutFeedback, View, } from "react-native";

package/dist/shared/ui/components/layouts/sticky/Sticky.style.d.ts

@@ -7,7 +7,10 @@ declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
         elevation: number;
         paddingTop: number;
         shadowColor: string;
-        shadowOffset: typeof import("@lookiero/aurora-next/build/theming/theme.default").DefaultTheme.$elevationOffset;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
         shadowOpacity: number;
         shadowRadius: number;
         width: string;
@@ -19,7 +22,10 @@ declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
         elevation: number;
         paddingTop: number;
         shadowColor: string;
-        shadowOffset: typeof import("@lookiero/aurora-next/build/theming/theme.default").DefaultTheme.$elevationOffset;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
         shadowOpacity: number;
         shadowRadius: number;
         width: string;
@@ -31,7 +37,10 @@ declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
         elevation: number;
         paddingTop: number;
         shadowColor: string;
-        shadowOffset: typeof import("@lookiero/aurora-next/build/theming/theme.default").DefaultTheme.$elevationOffset;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
         shadowOpacity: number;
         shadowRadius: number;
         width: string;

package/dist/shared/ui/components/molecules/selectField/SelectField.js

@@ -1,4 +1,4 @@
-import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { COLOR, Text } from "@lookiero/aurora";
 import React, { useCallback, useMemo, useState } from "react";
 import { TouchableHighlight, View } from "react-native";
 import { theme } from "../../../../../infrastructure/ui/theme/theme";
@@ -23,6 +23,6 @@ const SelectField = ({ title, placeholder, value, options, style: customStyle, o
             React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
                 title && (React.createElement(Text, { level: 2, style: style.modalTitle }, title)),
                 options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], underlayColor: colorGrayscaleS, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
-                    React.createElement(Text, { level: 3, style: [style.optionText, value === optionValue && style.selectedOptionText, customStyle?.optionText] }, label))))))));
+                    React.createElement(Text, { color: value === optionValue ? COLOR.GRAYSCALE_M : COLOR.CONTENT, level: 3, style: [style.optionText, customStyle?.optionText] }, label))))))));
 };
 export { SelectField };

package/dist/shared/ui/components/molecules/selectField/SelectField.style.d.ts

@@ -15,8 +15,5 @@ declare const style: {
     optionText: {
         lineHeight: number;
     };
-    selectedOptionText: {
-        color: string;
-    };
 };
 export { style };

package/dist/shared/ui/components/molecules/selectField/SelectField.style.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../../infrastructure/ui/theme/theme";
-const { borderSize, colorGrayscaleS, colorGrayscaleM, spaceM, spaceL, spaceXL } = theme();
+const { borderSize, colorGrayscaleS, spaceM, spaceL, spaceXL } = theme();
 const style = StyleSheet.create({
     modalContent: {
         paddingBottom: spaceXL,
@@ -18,8 +18,5 @@ const style = StyleSheet.create({
     optionText: {
         lineHeight: 24,
     },
-    selectedOptionText: {
-        color: colorGrayscaleM,
-    },
 });
 export { style };

package/dist/shared/ui/components/molecules/toast/Toast.js

@@ -1,4 +1,4 @@
-import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { COLOR, Text } from "@lookiero/aurora";
 import React from "react";
 import { View } from "react-native";
 import { useScreenSize } from "../../../hooks/useScreenSize";
@@ -15,8 +15,8 @@ const Toast = ({ body, title, onClose, testID, variant = ToastVariant.INFO, styl
     const screenSize = useScreenSize();
     return (React.createElement(View, { style: [style.toast, style[styleVariant(variant)], customStyle?.toast], testID: testID },
         React.createElement(View, { style: style.content },
-            title && (React.createElement(Text, { level: screenSize === "S" ? 3 : 2, style: [style.title, customStyle?.title], testID: "toast-title", body: true }, title)),
-            React.createElement(Text, { level: 2, style: [style.body, customStyle?.body], testID: "toast-body", detail: true }, body)),
+            title && (React.createElement(Text, { level: screenSize === "S" ? 3 : 2, style: [style.title, customStyle?.title], testID: "toast-title" }, title)),
+            React.createElement(Text, { color: COLOR.CONTENT, level: 2, style: customStyle?.body, testID: "toast-body", detail: true }, body)),
         onClose && (React.createElement(ButtonIcon, { name: "close", style: { button: [style.button, customStyle?.closeButton] }, testID: "toast-close-button", onPress: onClose }))));
 };
 export { Toast, ToastVariant };

package/dist/shared/ui/components/molecules/toast/Toast.style.d.ts

@@ -1,7 +1,4 @@
 declare const style: {
-    body: {
-        color: string;
-    };
     button: {
         marginLeft: number;
         padding: number;
@@ -26,7 +23,10 @@ declare const style: {
         alignItems: "flex-start";
         flexDirection: "row";
         shadowColor: string;
-        shadowOffset: typeof import("@lookiero/aurora-next/build/theming/theme.default").DefaultTheme.$elevationOffset;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
         shadowOpacity: number;
         shadowRadius: number;
     };

package/dist/shared/ui/components/molecules/toast/Toast.style.js

@@ -1,10 +1,7 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../../infrastructure/ui/theme/theme";
-const { colorAlert, colorInfo, colorAccent, colorContent, spaceS, spaceM, elevationColor, elevationOffset, elevationOpacityM, elevationRadius, } = theme();
+const { colorAlert, colorInfo, colorAccent, spaceS, spaceM, elevationColor, elevationOffset, elevationOpacityM, elevationRadius, } = theme();
 const style = StyleSheet.create({
-    body: {
-        color: colorContent,
-    },
     button: {
         marginLeft: spaceS,
         padding: spaceM,

package/dist/shared/ui/hooks/useScreenSize.js

@@ -1,4 +1,4 @@
-import { useDevice } from "@lookiero/aurora-next/build/hooks/useDevice/useDevice";
+import { useDevice } from "@lookiero/aurora";
 const useScreenSize = () => {
     const { screen } = useDevice();
     const screenSize = Object.entries(screen)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "1.1.7",
+  "version": "1.2.0-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -45,11 +45,11 @@
   "peerDependencies": {
     "@lookiero/aurora-fonts": "^1.0.6",
     "@lookiero/aurora-iconfont": "^2.0.37",
-    "@lookiero/aurora-next": "^3.0.191",
+    "@lookiero/aurora": "^3.1.0",
     "@lookiero/data-sources": "^0.3",
     "@lookiero/event": "^0.3",
     "@lookiero/locale": "^0.3",
-    "@lookiero/payments-front": "^0.16.9",
+    "@lookiero/payments-front": "^1.0.2",
     "@lookiero/user-tracking-front": "0.0.37",
     "apollo-boost": "0.4.4",
     "graphql": "16.6.0",
@@ -67,11 +67,11 @@
     "@expo/webpack-config": "^0.17.2",
     "@lookiero/aurora-fonts": "^1.0.6",
     "@lookiero/aurora-iconfont": "^2.0.37",
-    "@lookiero/aurora-next": "^3.0.191",
+    "@lookiero/aurora": "^3.1.0",
     "@lookiero/data-sources": "^0.3",
     "@lookiero/event": "^0.3",
     "@lookiero/locale": "^0.3",
-    "@lookiero/payments-front": "^0.16.9",
+    "@lookiero/payments-front": "^1.0.2",
     "@lookiero/user-tracking-front": "0.0.37",
     "@pact-foundation/pact": "^10.1.4",
     "@pact-foundation/pact-node": "^10.17.6",