@lookiero/checkout 3.6.1 → 3.7.0-beta.0

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

@@ -24,8 +24,9 @@ const ModalNotificationItem = ({ visible, notification, onRemove, testID = "moda
     }, [notification.id, onRemove]);
     return (React.createElement(Modal, { testID: testID, visible: visible, onClose: handleOnClose },
         React.createElement(View, { style: style.modal },
-            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))));
+            React.createElement(Text, { align: ALIGN.CENTER, level: 1, style: style.title }, titleText),
+            React.createElement(Text, { level: 3, style: style.description }, bodyText),
+            React.createElement(Button, { style: style.button, testID: "modal-notification-button", onPress: handleOnClose },
+                React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, acceptText)))));
 };
 export { ModalNotificationItem };

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

@@ -2,12 +2,19 @@ declare const style: {
     button: {
         flex: number;
     };
-    modal: {
-        padding: number;
+    buttonText: {
+        width: string;
     };
-    modalDescription: {
+    description: {
         marginVertical: number;
         textAlign: "center";
+        width: string;
+    };
+    modal: {
+        padding: number;
+    };
+    title: {
+        width: string;
     };
 };
 export { style };

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

@@ -5,12 +5,19 @@ const style = StyleSheet.create({
     button: {
         flex: 0,
     },
-    modal: {
-        padding: spaceXL,
+    buttonText: {
+        width: "100%",
     },
-    modalDescription: {
+    description: {
         marginVertical: spaceXL,
         textAlign: "center",
+        width: "100%",
+    },
+    modal: {
+        padding: spaceXL,
+    },
+    title: {
+        width: "100%",
     },
 });
 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.style.d.ts

@@ -0,0 +1,6 @@
+declare const style: {
+    error: {
+        color: string;
+    };
+};
+export { style };

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

@@ -0,0 +1,9 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+const { colorPrimary } = theme();
+const style = StyleSheet.create({
+    error: {
+        color: colorPrimary,
+    },
+});
+export { style };

package/dist/shared/ui/components/atoms/input/Input.js

@@ -6,7 +6,7 @@ const MIN_HEIGHT = 56;
 const MAX_HEIGHT = 242; // 10 lines
 const { colorGrayscaleL } = theme();
 const clamp = (min, max, value) => Math.min(Math.max(min, value), max);
-const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customStyle, placeholderTextColor = colorGrayscaleL, onChange, onContentSizeChange, value, multiline, ...restOfProps }) => {
+const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customStyle, placeholderTextColor = colorGrayscaleL, onChange, onContentSizeChange, value, multiline, testID = "input", ...restOfProps }) => {
     const [height, setHeight] = useState(minHeight);
     // When content height has became smaller the onContentSizeChange does in fact triggered but the internal height is incorrect.
     const handleOnContentSizeChange = useCallback((event) => {
@@ -32,6 +32,6 @@ const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customSt
     }, [maxHeight, minHeight, multiline]);
     useLayoutEffect(handleOnContentSizeChangeWeb, [handleOnContentSizeChangeWeb, value]);
     const textInputRef = useRef(null);
-    return (React.createElement(TextInput, { ...restOfProps, ref: textInputRef, multiline: multiline, numberOfLines: !!multiline ? undefined : 1, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, { height }], testID: "input", textAlignVertical: "top", value: value, onChange: onChange, onContentSizeChange: handleOnContentSizeChange }));
+    return (React.createElement(TextInput, { ref: textInputRef, accessibilityLabel: testID, multiline: multiline, numberOfLines: !!multiline ? undefined : 1, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, { height }], testID: testID, textAlignVertical: "top", value: value, accessible: true, onChange: onChange, onContentSizeChange: handleOnContentSizeChange, ...restOfProps }));
 };
 export { Input };

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

@@ -75,7 +75,7 @@ const Modal = ({ children, visible, header, footer, portalHostName, onClose, sho
                     (header || showCloseButton) && (React.createElement(View, { style: [style.header, customStyle?.header] },
                         React.createElement(View, null, header),
                         showCloseButton && (React.createElement(ButtonIcon, { name: "close", style: { button: customStyle?.closeButton }, onPress: onClose })))),
-                    React.createElement(ModalContentView, null,
+                    React.createElement(ModalContentView, { keyboardShouldPersistTaps: "handled" },
                         React.createElement(View, { style: {
                                 paddingBottom: safeAreaInsetBottom +
                                     (Platform.OS !== "ios" ? spaceXL : 0) +

package/dist/shared/ui/components/layouts/slider/Bullets.js

@@ -5,7 +5,7 @@ import { theme } from "../../../../../infrastructure/ui/theme/theme";
 import { style } from "./Bullets.style";
 const { colorContent, colorGrayscaleM } = theme();
 const colorTransparent = "rgba(0,0,0,0)";
-const MAX = 5;
+const MAX = 7;
 const DIAMETER_MAX = 8;
 const DIAMETER_MIN = 2;
 const Bullet = ({ index, activeIndex, maxBullets, onChange }) => {

package/dist/shared/ui/components/layouts/slider/Pagination.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+interface PaginationProps {
+    readonly touchable?: boolean;
+    readonly paginationStyle?: StyleProp<ViewStyle>;
+    readonly paginationItemStyle?: StyleProp<ViewStyle>;
+    readonly paginationActiveItemStyle?: StyleProp<ViewStyle>;
+    readonly count?: number;
+    readonly activeIndex?: number;
+    readonly onChange: (index: number) => void;
+    readonly renderItem?: (index: number) => ReactNode;
+}
+declare const Pagination: FC<PaginationProps>;
+export { Pagination };

package/dist/shared/ui/components/layouts/slider/Pagination.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { style } from "./Pagination.style";
+const Pagination = ({ touchable = true, paginationStyle, paginationItemStyle, paginationActiveItemStyle, count = 0, activeIndex = 0, renderItem, onChange, }) => (React.createElement(View, { style: [style.paginationWrapper, paginationStyle], testID: "slider-pagination" }, Array.from(Array(count).keys()).map((index) => (React.createElement(View, { key: index, style: style.paginationContainer },
+    React.createElement(Pressable, { testID: "slider-pagination-item", style: [
+            style.paginationItem,
+            activeIndex === index && style.active,
+            paginationItemStyle,
+            activeIndex === index && paginationActiveItemStyle,
+        ], onPress: !touchable ? undefined : () => onChange(index) }, renderItem?.(index)))))));
+export { Pagination };

package/dist/shared/ui/components/layouts/slider/Pagination.style.d.ts

@@ -0,0 +1,23 @@
+declare const style: {
+    active: {
+        backgroundColor: string;
+    };
+    paginationContainer: {
+        margin: number;
+    };
+    paginationItem: {
+        backgroundColor: string;
+        borderRadius: number;
+        height: number;
+        width: number;
+    };
+    paginationWrapper: {
+        alignItems: "center";
+        bottom: number;
+        flexDirection: "row";
+        justifyContent: "center";
+        position: "absolute";
+        width: string;
+    };
+};
+export { style };

package/dist/shared/ui/components/layouts/slider/Pagination.style.js

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+const { colorGrayscaleS, colorGrayscaleXL } = theme();
+const DOT_SIZE = 8;
+const style = StyleSheet.create({
+    active: {
+        backgroundColor: colorGrayscaleXL,
+    },
+    paginationContainer: {
+        margin: 3,
+    },
+    paginationItem: {
+        backgroundColor: colorGrayscaleS,
+        borderRadius: DOT_SIZE / 2,
+        height: DOT_SIZE,
+        width: DOT_SIZE,
+    },
+    paginationWrapper: {
+        alignItems: "center",
+        bottom: 10,
+        flexDirection: "row",
+        justifyContent: "center",
+        position: "absolute",
+        width: "100%",
+    },
+});
+export { style };

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

@@ -6,7 +6,7 @@ import { Modal } from "../../layouts/modal/Modal";
 import { InputField } from "../inputField/InputField";
 import { style } from "./SelectField.style";
 const { colorGrayscaleS } = theme();
-const SelectField = ({ title, placeholder, value, options, style: customStyle, onChange = () => void 0, ...touchableRestProps }) => {
+const SelectField = ({ title, placeholder, value, options, style: customStyle, onChange = () => void 0, testID, ...touchableRestProps }) => {
     const [modalVisible, setModalVisible] = useState(false);
     const handleOnPressSelectField = useCallback(() => setModalVisible(true), []);
     const handleOnModalClose = useCallback(() => setModalVisible(false), []);
@@ -16,13 +16,13 @@ const SelectField = ({ title, placeholder, value, options, style: customStyle, o
     }, [handleOnModalClose, onChange]);
     const selectedValue = useMemo(() => options.find((option) => option.value === value), [options, value]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(TouchableHighlight, { style: customStyle?.selectField, underlayColor: colorGrayscaleS, onPress: handleOnPressSelectField, ...touchableRestProps },
+        React.createElement(TouchableHighlight, { accessibilityLabel: testID, style: customStyle?.selectField, testID: testID, underlayColor: colorGrayscaleS, accessible: true, onPress: handleOnPressSelectField, ...touchableRestProps },
             React.createElement(View, { pointerEvents: "none" },
                 React.createElement(InputField, { editable: false, icon: "arrow-down", label: placeholder, style: customStyle?.inputField, value: selectedValue?.label }))),
         React.createElement(Modal, { testID: "select-field-modal", visible: modalVisible, scroll: true, showCloseButton: true, onClose: handleOnModalClose },
             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 },
+                options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: optionValue, underlayColor: colorGrayscaleS, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
                     React.createElement(Text, { color: value === optionValue ? COLOR.GRAYSCALE_M : COLOR.CONTENT, level: 3, style: [style.optionText, customStyle?.optionText] }, label))))))));
 };
 export { SelectField };

package/package.json

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