@lookiero/checkout 8.14.0-beta.2 → 8.14.0-beta.3

package/dist/src/infrastructure/ui/routing/Routing.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { StyleProp, ViewStyle } from "react-native";
 import { useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { I18n } from "@lookiero/i18n-react";
 import { Locale } from "@lookiero/sty-psp-locale";
@@ -8,10 +7,6 @@ import { Customer } from "../../../projection/customer/customer";
 import { Order } from "../../../projection/order/order";
 import { Subscription } from "../../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
-import { AppStyle } from "../views/App";
-interface RoutingStyle extends AppStyle {
-    readonly modal: StyleProp<ViewStyle>;
-}
 interface RoutingProps {
     readonly basePath?: string;
     readonly customer: Customer;
@@ -21,7 +16,6 @@ interface RoutingProps {
     readonly I18n: I18n;
     readonly kameleoon: KameleoonEnvironment;
     readonly layout: Layout;
-    readonly style?: Partial<RoutingStyle>;
     readonly getAuthToken: () => Promise<string>;
     readonly onNotAccessible: () => void;
     readonly onCheckoutSubmitted?: () => void;
@@ -37,4 +31,3 @@ interface RoutingProps {
  */
 declare const MemoizedRouting: React.NamedExoticComponent<RoutingProps>;
 export { MemoizedRouting as Routing };
-export type { RoutingStyle };

package/dist/src/infrastructure/ui/routing/Routing.js

@@ -14,7 +14,7 @@ import { SummaryTabs } from "../views/summaryTabs/SummaryTabs";
 import { CheckoutMiddleware } from "./CheckoutMiddleware";
 import { Routes } from "./routes";
 import { BasePathProvider } from "./useBasePath";
-const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, kameleoon, layout, style: customStyle, getAuthToken, onI18nError, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, kameleoon, layout, getAuthToken, onI18nError, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
     return useRoutes([
         {
             path: "",
@@ -23,18 +23,18 @@ const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, k
                     React.createElement(I18n, { loader: React.createElement(Spinner, null), locale: locale, onError: onI18nError },
                         React.createElement(Kameleoon, { loader: React.createElement(Spinner, null), siteCode: kameleoon.siteCode },
                             React.createElement(CheckoutMiddleware, { customerId: customer?.customerId, onNotAccessible: onNotAccessible },
-                                React.createElement(App, { style: { container: customStyle?.container, notifications: customStyle?.notifications } },
+                                React.createElement(App, null,
                                     React.createElement(Outlet, null)))))))),
             children: [
                 {
                     path: Routes.ITEM,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Item, { layout: layout, style: { modal: customStyle?.modal } }))),
+                        React.createElement(Item, { layout: layout }))),
                 },
                 {
                     path: Routes.ITEM_DETAIL,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Item, { layout: layout, style: { modal: customStyle?.modal } }))),
+                        React.createElement(Item, { layout: layout }))),
                 },
                 {
                     path: Routes.SUMMARY,
@@ -69,7 +69,7 @@ const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, k
                 {
                     path: Routes.RETURN,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Return, { layout: layout, style: { modal: customStyle?.modal } }))),
+                        React.createElement(Return, { layout: layout }))),
                 },
                 {
                     path: "*",

package/dist/src/infrastructure/ui/test/render.js

@@ -4,6 +4,7 @@ import React, { Fragment } from "react";
 import { IntlProvider } from "react-intl";
 import { Aurora } from "@lookiero/aurora";
 import { LoggerProvider } from "@lookiero/sty-psp-logging";
+import { EnvironmentStyleProvider } from "@lookiero/sty-psp-ui";
 import { BasePathProvider } from "../routing/useBasePath";
 const renderWrapper = ({ locale, messages = {}, wrapper: Wrapper = Fragment, logger = mock() }) => 
 // eslint-disable-next-line react/display-name, react/prop-types
@@ -11,6 +12,7 @@ const renderWrapper = ({ locale, messages = {}, wrapper: Wrapper = Fragment, log
     React.createElement(IntlProvider, { locale: locale, messages: messages, onError: () => void 0 },
         React.createElement(LoggerProvider, { logger: logger },
             React.createElement(BasePathProvider, { basePath: "" },
-                React.createElement(Wrapper, null, children))))));
+                React.createElement(EnvironmentStyleProvider, null,
+                    React.createElement(Wrapper, null, children)))))));
 const renderWithProviders = (ui, { locale, messages, wrapper } = { locale: "en" }) => render(ui, { wrapper: renderWrapper({ locale, messages, wrapper }) });
 export { renderWithProviders as render };

package/dist/src/infrastructure/ui/views/App.d.ts

@@ -1,14 +1,6 @@
 import { FC } from "react";
-import { StyleProp, ViewStyle } from "react-native";
-import { NotificationsStyle } from "@lookiero/sty-psp-notifications";
-interface AppStyle {
-    readonly container: StyleProp<ViewStyle>;
-    readonly notifications: Partial<NotificationsStyle>;
-}
 interface AppProps {
     readonly children: JSX.Element;
-    readonly style?: Partial<AppStyle>;
 }
 declare const App: FC<AppProps>;
-export type { AppStyle };
 export { App };

package/dist/src/infrastructure/ui/views/App.js

@@ -4,14 +4,17 @@ import { StatusBar, View } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { PortalProvider as AuroraPortalProvider } from "@lookiero/aurora";
 import { Notifications } from "@lookiero/sty-psp-notifications";
-import { theme } from "@lookiero/sty-psp-ui";
+import { theme, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
 import { style } from "./App.style";
 const { colorBgBase } = theme();
-const App = ({ children, style: customStyle }) => (React.createElement(View, { style: [style.container, customStyle?.container] },
-    React.createElement(SafeAreaProvider, null,
-        React.createElement(PortalProvider, null,
-            React.createElement(StatusBar, { backgroundColor: colorBgBase, barStyle: "dark-content", translucent: true }),
-            React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID, style: customStyle?.notifications }),
-            React.createElement(AuroraPortalProvider, null, children)))));
+const App = ({ children }) => {
+    const { container } = useEnvironmentStyle();
+    return (React.createElement(View, { style: [style.container, container] },
+        React.createElement(SafeAreaProvider, null,
+            React.createElement(PortalProvider, null,
+                React.createElement(StatusBar, { backgroundColor: colorBgBase, barStyle: "dark-content", translucent: true }),
+                React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID }),
+                React.createElement(AuroraPortalProvider, null, children)))));
+};
 export { App };

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.d.ts

@@ -0,0 +1,7 @@
+declare const style: {
+    buttonContainer: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+};
+export { style };

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space6, space8 } = theme();
+const style = StyleSheet.create({
+    buttonContainer: {
+        paddingHorizontal: space6,
+        paddingVertical: space8,
+    },
+});
+export { style };

package/dist/src/infrastructure/ui/views/item/Item.d.ts

@@ -1,12 +1,7 @@
 import { FC } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 import { Layout } from "@lookiero/sty-psp-ui";
-interface ItemStyle {
-    readonly modal: StyleProp<ViewStyle>;
-}
 interface ItemProps {
     readonly layout: Layout;
-    readonly style?: Partial<ItemStyle>;
 }
 declare const Item: FC<ItemProps>;
 export { Item };

package/dist/src/infrastructure/ui/views/item/Item.js

@@ -26,7 +26,7 @@ import { useBasePath } from "../../routing/useBasePath";
 import { style } from "./Item.style";
 import { ItemWithCustomerDecission, } from "./views/itemWithCustomerDecission/ItemWithCustomerDecission";
 import { ItemWithoutCustomerDecission, } from "./views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission";
-const Item = ({ layout: Layout, style: customStyle }) => {
+const Item = ({ layout: Layout }) => {
     const logger = useLogger();
     const screenSize = useScreenSize();
     const navigate = useNavigate();
@@ -141,10 +141,10 @@ const Item = ({ layout: Layout, style: customStyle }) => {
         return React.createElement(Spinner, { testID: "spinner" });
     }
     return (React.createElement(ReturnQuestionFeedbackProvider, { key: checkoutItem.id, feedback: checkoutItem.feedbacks || {} },
-        React.createElement(Layout, { header: header, scrollEnabled: !itemWithoutCustomerDecission, style: {
+        React.createElement(Layout, { footer: null, header: header, scrollEnabled: !itemWithoutCustomerDecission, style: {
                 header: fiveItemsDiscount !== 0 ? style.headerWithDoubleHeight : style.header,
                 scrollView: { height: itemWithoutCustomerDecission ? "100%" : "auto" },
                 safeAreaView: isDesktopScreen ? style.safeAreaView : null,
-            } }, itemWithoutCustomerDecission ? (React.createElement(ItemWithoutCustomerDecission, { bookedProductsVariants: bookedProductsVariants, checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, style: customStyle, onReturn: goToReturnPage })) : (React.createElement(ItemWithCustomerDecission, { checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, returnQuestions: returnQuestions, onEditFeedback: goToReturnPage })))));
+            } }, itemWithoutCustomerDecission ? (React.createElement(ItemWithoutCustomerDecission, { bookedProductsVariants: bookedProductsVariants, checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, onReturn: goToReturnPage })) : (React.createElement(ItemWithCustomerDecission, { checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, returnQuestions: returnQuestions, onEditFeedback: goToReturnPage })))));
 };
 export { Item };

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

@@ -1,8 +1,6 @@
 import { FC } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 interface GetOutOfCheckoutModalProps {
     readonly visible: boolean;
-    readonly style?: StyleProp<ViewStyle>;
     readonly onDismiss: () => void;
     readonly onConfirm: () => void;
 }

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

@@ -2,16 +2,17 @@ import React from "react";
 import { View } from "react-native";
 import { ALIGN, Button, BUTTON_VARIANT, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Modal } from "@lookiero/sty-psp-ui";
+import { Modal, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./GetOutOfCheckoutModal.style";
-const GetOutOfCheckoutModal = ({ visible, style: customStyle, onDismiss, onConfirm, }) => {
+const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
+    const { modal } = useEnvironmentStyle();
     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, onClose: onDismiss },
-        React.createElement(View, { style: [style.modal, customStyle] },
+        React.createElement(View, { style: [style.modal, modal?.content] },
             React.createElement(Text, { align: ALIGN.CENTER, level: 1, style: style.title }, titleText),
             React.createElement(Text, { level: 3, style: style.description }, descriptionText),
             React.createElement(Button, { style: style.button, onPress: onDismiss },

package/dist/src/infrastructure/ui/views/item/components/itemActions/ItemActions.d.ts

@@ -1,15 +1,11 @@
 import { FC } from "react";
-import { LayoutRectangle, StyleProp, ViewStyle } from "react-native";
+import { LayoutRectangle } from "react-native";
 import { Country } from "@lookiero/sty-psp-locale";
 import { ProductVariantProjection } from "../../../../../../projection/bookedProductsVariants/bookedProductsVariants";
-interface ItemActionsStyle {
-    readonly modal: StyleProp<ViewStyle>;
-}
 interface ItemActionsProps {
     readonly productVariants?: ProductVariantProjection[];
     readonly currentProductVariant: ProductVariantProjection;
     readonly country: Country;
-    readonly style?: Partial<ItemActionsStyle>;
     readonly onShowSizeWithoutStockModal?: () => void;
     readonly onKeep: () => void;
     readonly onReturn: () => void;

package/dist/src/infrastructure/ui/views/item/components/itemActions/ItemActions.js

@@ -8,7 +8,7 @@ import { Body } from "../../../../components/layouts/body/Body";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { SelectModal } from "../selectModal/SelectModal";
 import { style } from "./ItemActions.style";
-const ItemActions = ({ productVariants, currentProductVariant, country, style: customStyle, onShowSizeWithoutStockModal = () => void 0, onKeep, onReplace, onReturn, onLayout, }) => {
+const ItemActions = ({ productVariants, currentProductVariant, country, onShowSizeWithoutStockModal = () => void 0, onKeep, onReplace, onReturn, onLayout, }) => {
     const [modalVisible, setModalVisible] = useState(false);
     const changeSizeButtonText = useI18nMessage({ id: I18nMessages.ITEM_CHANGE_SIZE_BUTTON });
     const keepButtonText = useI18nMessage({ id: I18nMessages.ITEM_KEEP_BUTTON });
@@ -34,6 +34,6 @@ const ItemActions = ({ productVariants, currentProductVariant, country, style: c
                 !currentProductVariant.size.unique && productVariants ? (React.createElement(Button, { style: style.sizeSelector, testID: "size-selector", variant: BUTTON_VARIANT.SECONDARY, small: true, onPress: handleOnPressSelectField }, changeSizeButtonText)) : null,
                 React.createElement(Button, { style: style.returnButton, testID: "return-button", variant: BUTTON_VARIANT.SECONDARY, small: true, onPress: onReturn }, returnButtonText)),
             React.createElement(Button, { testID: "keep-button", small: true, onPress: onKeep }, keepButtonText)),
-        React.createElement(SelectModal, { modalVisible: modalVisible, options: sizeSelectorOptions, style: { modal: customStyle?.modal }, testID: "select-field-modal", title: changeSizeButtonText, value: currentProductVariant.id, onChange: onReplace, onClose: handleOnModalClose })));
+        React.createElement(SelectModal, { modalVisible: modalVisible, options: sizeSelectorOptions, testID: "select-field-modal", title: changeSizeButtonText, value: currentProductVariant.id, onChange: onReplace, onClose: handleOnModalClose })));
 };
 export { ItemActions };

package/dist/src/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.d.ts

@@ -1,12 +1,7 @@
 import { FC } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
-interface ReturnQuestionsFeedbackStyle {
-    readonly modal: StyleProp<ViewStyle>;
-}
 interface ReturnQuestionsFeedbackProps {
     readonly returnQuestions: ReturnQuestionProjection[];
-    readonly style?: Partial<ReturnQuestionsFeedbackStyle>;
     readonly onEditFeedback: () => void;
 }
 declare const ReturnQuestionsFeedback: FC<ReturnQuestionsFeedbackProps>;

package/dist/src/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.js

@@ -17,13 +17,13 @@ const returnQuestionItems = {
     [ReturnQuestionType.TEXTAREA]: ReturnQuestionFeedbackItem,
     [ReturnQuestionType.OPTION]: ReturnQuestionFeedbackItem,
 };
-const ReturnQuestionsFeedback = ({ returnQuestions, style: customStyle, onEditFeedback, }) => {
+const ReturnQuestionsFeedback = ({ returnQuestions, onEditFeedback }) => {
     const titleText = useI18nMessage({ id: I18nMessages.FEEDBACK_TITLE });
     return (React.createElement(View, null,
         React.createElement(View, { style: style.titleContainer },
             React.createElement(Text, { level: 2 }, titleText),
             React.createElement(ButtonIcon, { name: "pencil", testID: "edit-feedback", onPress: onEditFeedback })),
         React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
-            React.createElement(ReturnQuestions, { returnQuestions: returnQuestions, style: customStyle }))));
+            React.createElement(ReturnQuestions, { returnQuestions: returnQuestions }))));
 };
 export { ReturnQuestionsFeedback };

package/dist/src/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import { FeedbackProjection } from "../../../../../../projection/feedback/feedback";
+import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+interface ReturnQuestionsFormProps {
+    readonly visible: boolean;
+    readonly returnQuestions: ReturnQuestionProjection[];
+    readonly onSubmit: (feedback: FeedbackProjection) => void;
+    readonly onClose: () => void;
+}
+declare const ReturnQuestionsForm: FC<ReturnQuestionsFormProps>;
+export { ReturnQuestionsForm };

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

@@ -0,0 +1,40 @@
+import { PortalHost } from "@gorhom/portal";
+import React, { useCallback } from "react";
+import { View } from "react-native";
+import { Button, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { Modal } from "@lookiero/sty-psp-ui";
+import { ReturnQuestionType, } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
+import { useReturnQuestionFeedback } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
+import { ReturnQuestionItemProvider, } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionItem";
+import { HostDefaultReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem";
+import { HostSelectReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem";
+import { HostStackReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem";
+import { OptionReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem";
+import { TextareaReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { style } from "./ReturnQuestionsForm.style";
+const RETURN_QUESTION_FORM_PORTAL_HOST_NAME = "return-question-form-portal";
+const returnQuestionItems = {
+    [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
+    [ReturnQuestionType.HOST_TEXTAREA]: HostDefaultReturnQuestionItem,
+    [ReturnQuestionType.HOST_SELECT]: HostSelectReturnQuestionItem,
+    [ReturnQuestionType.HOST_STACK]: HostStackReturnQuestionItem,
+    [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
+    [ReturnQuestionType.OPTION]: OptionReturnQuestionItem,
+};
+const ReturnQuestionsForm = ({ returnQuestions, visible, onSubmit, onClose }) => {
+    const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE });
+    const submitButtonText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON });
+    const feedback = useReturnQuestionFeedback();
+    const handleOnSubmit = useCallback(() => onSubmit(feedback), [feedback, onSubmit]);
+    return (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, testID: "return-questions-form-modal", visible: visible, scroll: true, showCloseButton: true, onClose: onClose },
+            React.createElement(View, { style: style.modalContent },
+                React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+                React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions }),
+                React.createElement(Button, { style: style.submit, testID: "return-questions-button", onPress: handleOnSubmit }, submitButtonText)))));
+};
+export { ReturnQuestionsForm };

package/dist/src/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.style.d.ts

@@ -0,0 +1,12 @@
+declare const style: {
+    modalContent: {
+        paddingHorizontal: number;
+    };
+    submit: {
+        marginTop: number;
+    };
+    title: {
+        marginBottom: number;
+    };
+};
+export { style };

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

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space6, space8 } = theme();
+const style = StyleSheet.create({
+    modalContent: {
+        paddingHorizontal: space6,
+    },
+    submit: {
+        marginTop: space8,
+    },
+    title: {
+        marginBottom: space6,
+    },
+});
+export { style };

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.d.ts

@@ -1,10 +1,4 @@
 import { FC } from "react";
-import { StyleProp, TextStyle, ViewStyle } from "react-native";
-interface SelectModalStyle {
-    readonly modal: StyleProp<ViewStyle>;
-    readonly option: StyleProp<ViewStyle>;
-    readonly optionText: StyleProp<TextStyle>;
-}
 interface Option {
     readonly label: string;
     readonly value: string;
@@ -13,7 +7,6 @@ interface SelectModalProps {
     readonly title?: string;
     readonly value: string | undefined;
     readonly options: Option[];
-    readonly style?: Partial<SelectModalStyle>;
     readonly modalVisible: boolean;
     readonly testID?: string;
     readonly onChange?: (value: string) => void;

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.js

@@ -1,18 +1,19 @@
 import React, { useCallback } from "react";
 import { TouchableHighlight, View } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
-import { Modal, theme } from "@lookiero/sty-psp-ui";
+import { Modal, theme, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
 import { style } from "./SelectModal.style";
 const { colorBgPrimaryLight } = theme();
-const SelectModal = ({ modalVisible, options, style: customStyle, testID, title, value, onChange = () => void 0, onClose = () => void 0, }) => {
+const SelectModal = ({ modalVisible, options, testID, title, value, onChange = () => void 0, onClose = () => void 0, }) => {
+    const { modal } = useEnvironmentStyle();
     const handleOnPressOption = useCallback((value) => {
         onChange(value);
         onClose();
     }, [onClose, onChange]);
     return (React.createElement(Modal, { testID: testID, visible: modalVisible, scroll: true, showCloseButton: true, onClose: onClose },
-        React.createElement(View, { style: [style.modal, customStyle?.modal] },
+        React.createElement(View, { style: [style.modal, modal?.content] },
             title && (React.createElement(Text, { level: 3, style: style.modalTitle, heading: true }, title)),
-            options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: optionValue, underlayColor: colorBgPrimaryLight, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
-                React.createElement(Text, { color: value === optionValue ? COLOR.TEXT_MEDIUM : COLOR.TEXT, level: 3, style: [style.optionText, customStyle?.optionText] }, label)))))));
+            options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: style.option, testID: optionValue, underlayColor: colorBgPrimaryLight, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
+                React.createElement(Text, { color: value === optionValue ? COLOR.TEXT_MEDIUM : COLOR.TEXT, level: 3, style: style.optionText }, label)))))));
 };
 export { SelectModal };

package/dist/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.d.ts

@@ -1,8 +1,6 @@
 import { FC } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 interface SizeWithoutStockModalProps {
     readonly visible: boolean;
-    readonly style?: StyleProp<ViewStyle>;
     readonly onDismiss: () => void;
 }
 declare const SizeWithoutStockModal: FC<SizeWithoutStockModalProps>;

package/dist/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.js

@@ -2,15 +2,16 @@ import React from "react";
 import { View } from "react-native";
 import { Button, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Modal } from "@lookiero/sty-psp-ui";
+import { Modal, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./SizeWithoutStockModal.style";
-const SizeWithoutStockModal = ({ visible, style: customStyle, onDismiss }) => {
+const SizeWithoutStockModal = ({ visible, onDismiss }) => {
+    const { modal } = useEnvironmentStyle();
     const titleText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_TITLE });
     const descriptionText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION });
     const buttonText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_BUTTON });
     return (React.createElement(Modal, { visible: visible, showCloseButton: true, onClose: onDismiss },
-        React.createElement(View, { style: [style.modalContent, customStyle] },
+        React.createElement(View, { style: [style.modalContent, modal?.content] },
             React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
             React.createElement(Text, { level: 3, style: style.description }, descriptionText),
             React.createElement(Button, { onPress: onDismiss }, buttonText))));

package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.d.ts

@@ -1,12 +1,8 @@
 import { FC } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { ProductVariantProjection } from "../../../../../../projection/bookedProductsVariants/bookedProductsVariants";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
-interface ItemWithCustomerDecissionStyle {
-    readonly modal: StyleProp<ViewStyle>;
-}
 interface CheckoutItemWithCustomerDecission extends CheckoutItemProjection {
     readonly status: Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL>;
 }
@@ -15,7 +11,6 @@ interface ItemWithCustomerDecissionProps {
     readonly checkoutItem: CheckoutItemWithCustomerDecission;
     readonly returnQuestions: ReturnQuestionProjection[];
     readonly currentProductVariant: ProductVariantProjection;
-    readonly style?: Partial<ItemWithCustomerDecissionStyle>;
     readonly onEditFeedback: () => void;
 }
 declare const ItemWithCustomerDecission: FC<ItemWithCustomerDecissionProps>;

package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.js

@@ -14,7 +14,7 @@ import { CustomerDecissionBanner, } from "../../components/banner/CustomerDeciss
 import { ReturnQuestionsFeedback } from "../../components/returnQuestionsFeedback/ReturnQuestionsFeedback";
 import { ProductVariant } from "../../views/productVariant/ProductVariant";
 import { style } from "./ItemWithCustomerDecission.style";
-const ItemWithCustomerDecission = ({ checkoutId, checkoutItem, returnQuestions, currentProductVariant, style: customStyle, onEditFeedback, }) => {
+const ItemWithCustomerDecission = ({ checkoutId, checkoutItem, returnQuestions, currentProductVariant, onEditFeedback, }) => {
     const screenSize = useScreenSize();
     const isMobile = screenSize === "S";
     const logger = useLogger();
@@ -42,6 +42,6 @@ const ItemWithCustomerDecission = ({ checkoutId, checkoutItem, returnQuestions,
     }
     return (React.createElement(Body, { style: { row: style.container } },
         React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, customerDecissionBanner: React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: resetItem }) }, checkoutItem.status === CheckoutItemStatus.RETURNED && (React.createElement(View, { style: [style.feedbackContainer, isMobile ? style.feedbackContainerMobile : undefined] },
-            React.createElement(ReturnQuestionsFeedback, { returnQuestions: returnQuestions, style: customStyle, onEditFeedback: onEditFeedback }))))));
+            React.createElement(ReturnQuestionsFeedback, { returnQuestions: returnQuestions, onEditFeedback: onEditFeedback }))))));
 };
 export { ItemWithCustomerDecission };

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.d.ts

@@ -1,12 +1,8 @@
 import { FC } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { BookedProductsVariantsProjection, ProductVariantProjection } from "../../../../../../projection/bookedProductsVariants/bookedProductsVariants";
 import "../../../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
-interface ItemWithoutCustomerDecissionStyle {
-    readonly modal: StyleProp<ViewStyle>;
-}
 interface CheckoutItemWithoutCustomerDecission extends CheckoutItemProjection {
     readonly status: CheckoutItemStatus.INITIAL;
 }
@@ -15,7 +11,6 @@ interface ItemWithoutCustomerDecissionProps {
     readonly checkoutItem: CheckoutItemWithoutCustomerDecission;
     readonly bookedProductsVariants: BookedProductsVariantsProjection;
     readonly currentProductVariant: ProductVariantProjection;
-    readonly style?: Partial<ItemWithoutCustomerDecissionStyle>;
     readonly onReturn: () => void;
 }
 declare const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps>;

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.js

@@ -17,7 +17,7 @@ import { SizeWithoutStockModal } from "../../components/sizeWithoutStockModal/Si
 import { ProductVariant } from "../productVariant/ProductVariant";
 import { style } from "./ItemWithoutCustomerDecission.style";
 const { space6 } = theme();
-const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProductsVariants, currentProductVariant, style: customStyle, onReturn, }) => {
+const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProductsVariants, currentProductVariant, onReturn, }) => {
     const logger = useLogger();
     const { customer: { country, segment }, } = useStaticInfo();
     /* KeepCheckoutItem */
@@ -62,7 +62,7 @@ const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProducts
         return React.createElement(Spinner, { testID: "spinner" });
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(SizeWithoutStockModal, { style: customStyle?.modal, visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
+        React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
         React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
             React.createElement(Body, { style: { row: style.container } },
                 React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, style: { content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } } }))),

package/dist/src/infrastructure/ui/views/return/Return.d.ts

@@ -1,12 +1,7 @@
 import { FC } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
-interface ReturnStyle {
-    readonly modal: StyleProp<ViewStyle>;
-}
 interface ReturnProps {
     readonly layout: UiLayout;
-    readonly style?: Partial<ReturnStyle>;
 }
 declare const Return: FC<ReturnProps>;
 export { Return };

package/dist/src/infrastructure/ui/views/return/Return.js

@@ -6,7 +6,7 @@ import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/c
 import { ReturnQuestionFeedbackProvider } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { ReturnQuestionsForm } from "./components/returnQuestionsForm/ReturnQuestionsForm";
-const Return = ({ layout, style: customStyle }) => {
+const Return = ({ layout }) => {
     const { id } = useParams();
     const { customer: { customerId, country, segment }, } = useStaticInfo();
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
@@ -16,6 +16,6 @@ const Return = ({ layout, style: customStyle }) => {
         return React.createElement(Spinner, null);
     }
     return (React.createElement(ReturnQuestionFeedbackProvider, { key: checkoutItem.id, feedback: checkoutItem.feedbacks || {} },
-        React.createElement(ReturnQuestionsForm, { checkout: checkout, checkoutItem: checkoutItem, country: country, layout: layout, segment: segment, style: customStyle })));
+        React.createElement(ReturnQuestionsForm, { checkout: checkout, checkoutItem: checkoutItem, country: country, layout: layout, segment: segment })));
 };
 export { Return };

package/dist/src/infrastructure/ui/views/return/Return.style.d.ts

@@ -0,0 +1,40 @@
+declare const style: {
+    description: {
+        color: string;
+    };
+    desktopInfo: {
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+    };
+    desktopLayoutSpacing: {
+        paddingVertical: number;
+    };
+    headerWrapper: {
+        display: "flex";
+        flexDirection: "column";
+    };
+    info: {
+        backgroundColor: string;
+        paddingBottom: number;
+        paddingHorizontal: number;
+        paddingTop: number;
+    };
+    layout: {
+        flex: number;
+        justifyContent: "center";
+    };
+    safeAreaView: {
+        backgroundColor: string;
+        flex: number;
+    };
+    scrollView: {
+        flex: number;
+    };
+    submit: {
+        backgroundColor: string;
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+        padding: number;
+    };
+};
+export { style };