@lookiero/checkout 0.2.26 → 0.2.27-beta.0

package/dist/infrastructure/ui/components/atoms/spinner/Spinner.style.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+const style = StyleSheet.create({
+    container: {
+        display: "flex",
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
+export { style };

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

@@ -0,0 +1,14 @@
+import { FC } 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) => JSX.Element;
+}
+declare const Pagination: FC<PaginationProps>;
+export { Pagination };

package/dist/infrastructure/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, { onPress: !touchable ? undefined : () => onChange(index), style: [
+            style.paginationItem,
+            activeIndex === index && style.active,
+            paginationItemStyle,
+            activeIndex === index && paginationActiveItemStyle,
+        ], testID: "slider-pagination-item" }, renderItem?.(index)))))));
+export { Pagination };

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

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

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

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

package/dist/infrastructure/ui/components/layouts/slider/Slider.d.ts

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+interface SliderProps {
+    readonly children: ReactNode[];
+    readonly active?: number;
+    readonly loop?: boolean;
+    readonly minDistanceToCapture?: number;
+    readonly minDistanceForAction?: number;
+    readonly gesturesEnabled?: boolean;
+    readonly paginationEnabled?: boolean;
+    readonly paginationStyle?: StyleProp<ViewStyle>;
+    readonly paginationItemStyle?: StyleProp<ViewStyle>;
+    readonly paginationActiveItemStyle?: StyleProp<ViewStyle>;
+    readonly onSliderStart?: () => void;
+    readonly onSliderEnd?: () => void;
+    readonly onChanged?: (index: number) => void;
+    readonly paginationRenderItem?: (index: number) => JSX.Element;
+}
+declare const Slider: FC<SliderProps>;
+export { Slider };

package/dist/infrastructure/ui/components/layouts/slider/Slider.js

@@ -0,0 +1,132 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Animated, I18nManager, PanResponder, StyleSheet, View, } from "react-native";
+import { Pagination } from "./Pagination";
+import { style } from "./Slider.style";
+const DEFAULT_WIDTH = 200;
+const Slider = ({ children, active = 0, loop = false, minDistanceToCapture = 5, minDistanceForAction = 0.2, gesturesEnabled = true, paginationEnabled = true, paginationStyle, paginationItemStyle, paginationActiveItemStyle, onSliderStart, onSliderEnd, onChanged, paginationRenderItem, }) => {
+    const flatennedChildren = children.flat();
+    const count = flatennedChildren.length;
+    const [width, setWidth] = useState(0);
+    const widthRef = useRef(width);
+    const activeIndex = useRef(active);
+    const animatedValueX = useRef(0);
+    const animatedValueY = useRef(0);
+    const pan = useRef(new Animated.ValueXY()).current;
+    const started = useRef(false);
+    const panResponder = useRef(PanResponder.create({
+        onPanResponderTerminationRequest: () => false,
+        onMoveShouldSetPanResponder: () => gesturesEnabled,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        onMoveShouldSetPanResponderCapture: (_e, gestureState) => {
+            if (!gesturesEnabled) {
+                return false;
+            }
+            startAnimation();
+            const allow = Math.abs(gestureState.dx) > minDistanceToCapture;
+            return allow;
+        },
+        onPanResponderGrant: () => fixState(),
+        onPanResponderMove: Animated.event([null, { dx: pan.x }], {
+            useNativeDriver: false,
+        }),
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        onPanResponderRelease: (_e, gesture) => {
+            const correction = gesture.moveX - gesture.x0;
+            if (Math.abs(correction) < widthRef.current * minDistanceForAction) {
+                spring({ x: 0, y: 0 });
+            }
+            else {
+                changeIndex(correction > 0 ? (I18nManager.isRTL ? 1 : -1) : I18nManager.isRTL ? -1 : 1);
+            }
+        },
+        onPanResponderEnd: () => endAnimation(),
+    })).current;
+    const startAnimation = useCallback(() => {
+        if (!started.current) {
+            onSliderStart?.();
+            started.current = true;
+        }
+    }, [onSliderStart]);
+    const endAnimation = useCallback(() => {
+        if (started.current) {
+            onSliderEnd?.();
+            started.current = false;
+        }
+    }, [onSliderEnd]);
+    const fixState = useCallback(() => {
+        animatedValueX.current = widthRef.current * activeIndex.current * (I18nManager.isRTL ? 1 : -1);
+        animatedValueY.current = 0;
+        pan.setOffset({
+            x: animatedValueX.current,
+            y: animatedValueY.current,
+        });
+        pan.setValue({ x: 0, y: 0 });
+    }, [pan]);
+    const spring = useCallback((toValue) => {
+        Animated.spring(pan, {
+            toValue,
+            useNativeDriver: false,
+        }).start();
+    }, [pan]);
+    const changeIndex = useCallback((delta = 1) => {
+        const toValue = { x: 0, y: 0 };
+        let skipChanges = !delta;
+        let calcDelta = delta;
+        if (activeIndex.current <= 0 && delta < 0) {
+            skipChanges = !loop;
+            calcDelta = count + delta;
+        }
+        else if (activeIndex.current + 1 >= count && delta > 0) {
+            skipChanges = !loop;
+            calcDelta = -1 * activeIndex.current + delta - 1;
+        }
+        if (skipChanges) {
+            return spring(toValue);
+        }
+        const index = activeIndex.current + calcDelta;
+        activeIndex.current = index;
+        toValue.x = widthRef.current * (I18nManager.isRTL ? 1 : -1) * calcDelta;
+        spring(toValue);
+        onChanged?.(index);
+    }, [count, loop, onChanged, spring]);
+    const fixAndGo = useCallback((delta) => {
+        fixState();
+        startAnimation();
+        changeIndex(delta);
+    }, [changeIndex, fixState, startAnimation]);
+    const goTo = useCallback((index = 0) => {
+        const delta = index - activeIndex.current;
+        if (delta) {
+            fixAndGo(delta);
+        }
+    }, [fixAndGo]);
+    const getActiveIndex = useCallback(() => activeIndex.current, []);
+    useEffect(() => {
+        pan.x.addListener(({ value }) => (animatedValueX.current = value));
+        pan.y.addListener(({ value }) => (animatedValueY.current = value));
+        return () => {
+            pan.x.removeAllListeners();
+            pan.y.removeAllListeners();
+        };
+    }, [pan.x, pan.y]);
+    useEffect(() => {
+        if (activeIndex.current !== active) {
+            goTo(active);
+        }
+    }, [active, goTo]);
+    const onLayoutWrapper = useCallback(({ nativeEvent: { layout: { width: wrapperWidth }, }, }) => {
+        const width = wrapperWidth || DEFAULT_WIDTH;
+        setWidth(width);
+        widthRef.current = width;
+        fixState();
+    }, [fixState]);
+    return (React.createElement(View, { style: style.container, onLayout: onLayoutWrapper, testID: "slider" },
+        React.createElement(Animated.View, { style: StyleSheet.flatten([
+                {
+                    transform: [{ translateX: pan.x }, { translateY: pan.y }],
+                },
+                style.sliderAreaStyle,
+            ]), ...panResponder.panHandlers }, flatennedChildren.map((child, index) => (React.createElement(View, { key: index, style: { width }, testID: "slider-child" }, child)))),
+        paginationEnabled && (React.createElement(Pagination, { count: count, activeIndex: getActiveIndex(), onChange: (index) => goTo(index), paginationStyle: paginationStyle, paginationItemStyle: paginationItemStyle, paginationActiveItemStyle: paginationActiveItemStyle, renderItem: paginationRenderItem }))));
+};
+export { Slider };

package/dist/infrastructure/ui/components/layouts/slider/Slider.style.d.ts

@@ -0,0 +1,11 @@
+declare const style: {
+    container: {
+        flex: number;
+        overflow: "hidden";
+    };
+    sliderAreaStyle: {
+        flex: number;
+        flexDirection: "row";
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/layouts/slider/Slider.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+const style = StyleSheet.create({
+    container: {
+        flex: 1,
+        overflow: "hidden",
+    },
+    sliderAreaStyle: {
+        flex: 1,
+        flexDirection: "row",
+    },
+});
+export { style };

package/dist/infrastructure/ui/components/organisms/dropdown/Dropdown.d.ts

@@ -0,0 +1,15 @@
+import { FC } from "react";
+interface Option {
+    readonly name: string;
+    readonly value: string;
+}
+interface DrodownProps {
+    readonly defaultValue: string;
+    readonly label: string;
+    readonly name: string;
+    readonly options: Option[];
+    readonly disabled?: boolean;
+    readonly onChanged?: (value: string) => void;
+}
+declare const Dropdown: FC<DrodownProps>;
+export { Dropdown };

package/dist/infrastructure/ui/components/organisms/dropdown/Dropdown.js

@@ -0,0 +1,20 @@
+import React, { useCallback, useState } from "react";
+import { View } from "react-native";
+import { InputDropdown } from "@lookiero/aurora-next/build/components/organisms/InputDropdown/InputDropdown";
+import { style } from "./Dropdown.style";
+const Dropdown = ({ defaultValue, label, name, options, disabled = false, onChanged }) => {
+    const [value, setValue] = useState(defaultValue);
+    const handleOnChange = useCallback((value) => {
+        setValue(value);
+        onChanged?.(value);
+    }, [onChanged]);
+    return (React.createElement(View, { pointerEvents: disabled ? "none" : "auto" },
+        React.createElement(InputDropdown, { label: label, name: name, options: options, value: value, onChange: handleOnChange, 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            disabled: disabled, 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            style: style.dropdown })));
+};
+export { Dropdown };

package/dist/infrastructure/ui/components/organisms/dropdown/Dropdown.style.d.ts

@@ -0,0 +1,6 @@
+declare const style: {
+    dropdown: {
+        paddingVertical: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/organisms/dropdown/Dropdown.style.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../theme/theme";
+const { spaceXS } = theme();
+const style = StyleSheet.create({
+    dropdown: {
+        paddingVertical: spaceXS,
+    },
+});
+export { style };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.js

@@ -29,7 +29,7 @@ const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName
         React.createElement(TouchableHighlight, { style: style.container, underlayColor: containerUnderlayColor, onPress: handleOnPress },
             React.createElement(View, { pointerEvents: "none" },
                 React.createElement(InputField, { editable: false, icon: "arrow-down", label: placeholderText || "", value: inputValue }))),
-        React.createElement(Modal, { portalHostName: portalHostName, visible: modalVisible, header: deepestReturnQuestionWithFeedback && (React.createElement(ButtonIcon, { name: "arrow-left", testID: "modal-back-button", onPress: handleOnBackButtonPress })), scroll: true, onClose: handleOnModalClose },
+        React.createElement(Modal, { portalHostName: portalHostName, visible: modalVisible, header: deepestReturnQuestionWithFeedback && (React.createElement(ButtonIcon, { name: "arrow-left", testID: "modal-back-button", onPress: handleOnBackButtonPress })), scroll: true, showCloseButton: true, onClose: handleOnModalClose },
             React.createElement(View, { style: style.modalContent }, children))));
 };
 export { HostSelectReturnQuestionItem };

package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.style.d.ts

@@ -0,0 +1,10 @@
+declare const style: {
+    container: {
+        flex: number;
+    };
+    scrollContainer: {
+        flex: number;
+        flexGrow: number;
+    };
+};
+export { style };

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

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+const style = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scrollContainer: {
+        flex: 1,
+        flexGrow: 1,
+    },
+});
+export { style };

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

@@ -1,17 +1,18 @@
 import { FC, ReactNode } from "react";
-import { ViewProps } from "react-native";
+import { StyleProp, ViewStyle } from "react-native";
 import { ScreenSize } from "../../../hooks/useScreenSize";
 declare type ColumnSize = "1/4" | "1/3" | "1/2" | "2/3";
 declare type ModalStyle = "overlay" | "row" | "modal" | "header" | "closeButton";
 interface ModalProps {
     readonly children: ReactNode;
     readonly visible: boolean;
-    readonly onClose?: () => void;
+    readonly onClose: () => void;
+    readonly showCloseButton?: boolean;
     readonly header?: ReactNode;
     readonly portalHostName?: string;
     readonly scroll?: boolean;
     readonly size?: Partial<Record<ScreenSize, ColumnSize>>;
-    readonly style?: Partial<Record<ModalStyle, ViewProps>>;
+    readonly style?: Partial<Record<ModalStyle, StyleProp<ViewStyle>>>;
 }
 declare const Modal: FC<ModalProps>;
 export type { ColumnSize };

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

@@ -8,7 +8,7 @@ import { ButtonIcon } from "../../molecules/buttonIcon/ButtonIcon";
 import { Row } from "../row/Row";
 import { style } from "./Modal.style";
 const TRANSITION_MODAL_SCALE = 0.9;
-const Modal = ({ children, visible, header, portalHostName, onClose, size = { M: "2/3", L: "1/3" }, style: customStyle, scroll = false, }) => {
+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;
@@ -53,9 +53,9 @@ const Modal = ({ children, visible, header, portalHostName, onClose, size = { M:
                         },
                         customStyle?.modal,
                     ], onLayout: handleOnModalLayout },
-                    (header || onClose) && (React.createElement(View, { style: [style.header, customStyle?.header] },
+                    (header || showCloseButton) && (React.createElement(View, { style: [style.header, customStyle?.header] },
                         React.createElement(View, null, header),
-                        onClose && (React.createElement(ButtonIcon, { name: "close", style: { button: customStyle?.closeButton }, onPress: onClose })))),
+                        showCloseButton && (React.createElement(ButtonIcon, { name: "close", style: { button: customStyle?.closeButton }, onPress: onClose })))),
                     React.createElement(ModalContentView, null,
                         React.createElement(View, { style: { paddingBottom: safeAreaInsetBottom } }, children))))))))));
 };

package/dist/infrastructure/ui/views/item/components/actions/Actions.d.ts

@@ -0,0 +1,11 @@
+import { SizeProjection } from "../../../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
+import { FC } from "react";
+interface ActionsProps {
+    readonly sizes: SizeProjection[];
+    readonly size: SizeProjection;
+    readonly onKeep: (value: string) => void;
+    readonly onReturn: (value: string) => void;
+    readonly onReplace: (value: string) => void;
+}
+declare const Actions: FC<ActionsProps>;
+export { Actions };

package/dist/infrastructure/ui/views/item/components/actions/Actions.js

@@ -0,0 +1,24 @@
+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 { Dropdown } from "../../../../components/organisms/dropdown/Dropdown";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { View } from "react-native";
+import React, { useMemo } from "react";
+import { style } from "./Actions.style";
+const Actions = ({ sizes, size, onKeep, onReplace, onReturn }) => {
+    const sizesLabelText = useI18nMessage({ id: I18nMessages.ITEM_SIZES_LABEL });
+    const sizesNameText = useI18nMessage({ id: I18nMessages.ITEM_SIZES_NAME });
+    const keepButtonText = useI18nMessage({ id: I18nMessages.ITEM_KEEP_BUTTON });
+    const returnButtonText = useI18nMessage({ id: I18nMessages.ITEM_RETURN_BUTTON });
+    const options = useMemo(() => sizes.map((size) => ({ name: size.lookiero, value: size.id })), [sizes]);
+    const disabled = useMemo(() => options.length === 1 && options[0]?.value === size.id, [options, 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(View, { style: style.dropdownContainer },
+                React.createElement(Dropdown, { defaultValue: size.id, label: sizesLabelText, name: sizesNameText, options: options, onChanged: onReplace, disabled: disabled }))),
+            React.createElement(View, { style: style.returnButtonContainer },
+                React.createElement(Button, { variant: BUTTON_VARIANT.SECONDARY, onPress: onReturn }, returnButtonText)))));
+};
+export { Actions };

package/dist/infrastructure/ui/views/item/components/actions/Actions.style.d.ts

@@ -0,0 +1,20 @@
+declare const style: {
+    container: {
+        padding: number;
+        width: string;
+    };
+    row: {
+        alignItems: "center";
+        flexDirection: "row";
+        marginTop: number;
+    };
+    dropdownContainer: {
+        flex: number;
+        zIndex: number;
+        marginRight: number;
+    };
+    returnButtonContainer: {
+        flex: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/item/components/actions/Actions.style.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceL } = theme();
+const style = StyleSheet.create({
+    container: {
+        padding: spaceL,
+        width: "100%",
+    },
+    row: {
+        alignItems: "center",
+        flexDirection: "row",
+        marginTop: spaceL,
+    },
+    dropdownContainer: {
+        flex: 1,
+        zIndex: 4,
+        marginRight: spaceL,
+    },
+    returnButtonContainer: {
+        flex: 1,
+    },
+});
+export { style };

package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.js

@@ -3,30 +3,32 @@ import { BUTTON_VARIANT } from "@lookiero/aurora-next/build/components/atoms/But
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
-import { Modal } from "../../../../components/atoms/modal/Modal";
+import { View } from "react-native";
 import { I18nMessages } from "../../../../i18n/i18n";
+import { Modal } from "../../../../shared/components/layouts/modal/Modal";
 import { style } from "./GetOutOfCheckoutModal.style";
 const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
     const titleText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_TITLE });
     const descriptionText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION });
     const dismissButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON });
     const confirmButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON });
-    return (React.createElement(Modal, { visible: visible },
-        React.createElement(Text, { level: 1, style: style.modalTitle, body: true }, titleText),
-        React.createElement(Text, { level: 3, style: style.modalDescription, body: true }, descriptionText),
-        React.createElement(Button
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        , { 
+    return (React.createElement(Modal, { visible: visible, onClose: onDismiss },
+        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 }, descriptionText),
+            React.createElement(Button
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            style: style.button, onPress: onDismiss }, dismissButtonText),
-        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: onDismiss }, dismissButtonText),
+            React.createElement(Button
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            style: [style.button, style.confirmButton], variant: BUTTON_VARIANT.SECONDARY, onPress: onConfirm }, confirmButtonText)));
+            , { 
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                style: [style.button, style.confirmButton], variant: BUTTON_VARIANT.SECONDARY, onPress: onConfirm }, confirmButtonText))));
 };
 export { GetOutOfCheckoutModal };

package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.d.ts

@@ -5,6 +5,9 @@ declare const style: {
     confirmButton: {
         marginTop: number;
     };
+    modal: {
+        padding: number;
+    };
     modalDescription: {
         marginVertical: number;
         textAlign: "center";

package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.js

@@ -8,6 +8,9 @@ const style = StyleSheet.create({
     confirmButton: {
         marginTop: spaceXL,
     },
+    modal: {
+        padding: spaceXL,
+    },
     modalDescription: {
         marginVertical: spaceXL,
         textAlign: "center",

package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.js

@@ -24,7 +24,7 @@ const returnQuestionItems = {
 const ReturnQuestionsForm = ({ feedback, returnQuestions, onClose, visible }) => (React.createElement(ReturnQuestionFeedbackProvider, { feedback: feedback },
     React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
         React.createElement(PortalHost, { name: RETURN_QUESTION_FORM_PORTAL_HOST_NAME }),
-        React.createElement(Modal, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, visible: visible, scroll: true, onClose: onClose },
+        React.createElement(Modal, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, visible: visible, scroll: true, showCloseButton: true, onClose: onClose },
             React.createElement(View, { style: style.returnQuestionsContainer },
                 React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions }))))));
 export { ReturnQuestionsForm };

package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.js

@@ -2,22 +2,24 @@ import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Butt
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
-import { Modal } from "../../../../components/atoms/modal/Modal";
+import { View } from "react-native";
 import { I18nMessages } from "../../../../i18n/i18n";
+import { Modal } from "../../../../shared/components/layouts/modal/Modal";
 import { style } from "./SizeChangeModal.style";
 const SizeChangeModal = ({ visible, onDismiss }) => {
     const titleText = useI18nMessage({ id: I18nMessages.SIZE_CHANGE_MODAL_TITLE });
     const descriptionText = useI18nMessage({ id: I18nMessages.SIZE_CHANGE_MODAL_DESCRIPTION });
     const buttonText = useI18nMessage({ id: I18nMessages.SIZE_CHANGE_MODAL_BUTTON });
-    return (React.createElement(Modal, { visible: visible },
-        React.createElement(Text, { level: 1, style: style.modalTitle, body: true }, titleText),
-        React.createElement(Text, { level: 3, style: style.modalDescription, body: true }, descriptionText),
-        React.createElement(Button
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        , { 
+    return (React.createElement(Modal, { visible: visible, onClose: onDismiss },
+        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 }, descriptionText),
+            React.createElement(Button
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            style: style.button, onPress: onDismiss }, buttonText)));
+            , { 
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                style: style.button, onPress: onDismiss }, buttonText))));
 };
 export { SizeChangeModal };

package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.d.ts

@@ -2,6 +2,9 @@ declare const style: {
     button: {
         flex: number;
     };
+    modal: {
+        padding: number;
+    };
     modalDescription: {
         marginVertical: number;
         textAlign: "center";

package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.js

@@ -5,6 +5,9 @@ const style = StyleSheet.create({
     button: {
         flex: 0,
     },
+    modal: {
+        padding: spaceXL,
+    },
     modalDescription: {
         marginVertical: spaceXL,
         textAlign: "center",