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

package/dist/src/infrastructure/ui/Root.d.ts

@@ -9,6 +9,7 @@ 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 { RoutingStyle } from "./routing/Routing";
 interface RootFunctionArgs {
     readonly Messaging: MessagingRoot;
     readonly I18n: I18n;
@@ -27,6 +28,7 @@ interface RootProps {
     readonly order: Order | undefined;
     readonly subscription: Subscription | undefined;
     readonly layout: Layout;
+    readonly style?: Partial<RoutingStyle>;
     readonly onNotAccessible: () => void;
     readonly onCheckoutSubmitted?: () => void;
     readonly useRedirect: () => Record<string, string>;

package/dist/src/infrastructure/ui/Root.js

@@ -9,10 +9,10 @@ const root = ({ Messaging, I18n, getAuthToken, development, sentry, kameleoon: k
     const logger = sentryLogger(sentry);
     const kameleoon = kameleoonConfig();
     // eslint-disable-next-line react/display-name, react/prop-types
-    const Root = ({ basePath, locale = Locale.en_GB, customer, order, subscription, layout, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+    const Root = ({ basePath, locale = Locale.en_GB, customer, order, subscription, layout, style: customStyle, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
         const handleOnI18nError = useCallback((error) => logger.captureException(error), []);
         return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
-            React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, kameleoon: kameleoon, layout: layout, locale: locale, order: order, subscription: subscription, useRedirect: useRedirect, useRoutes: useRoutes, onCheckoutSubmitted: onCheckoutSubmitted, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
+            React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, kameleoon: kameleoon, layout: layout, locale: locale, order: order, style: customStyle, subscription: subscription, useRedirect: useRedirect, useRoutes: useRoutes, onCheckoutSubmitted: onCheckoutSubmitted, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
     };
     const hoc = sentryLoggerHOC({ logger });
     /**

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestion.d.ts

@@ -1,9 +1,14 @@
 import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { ReturnQuestionProjection } from "../../../../../projection/returnQuestion/returnQuestion";
+interface ReturnQuestionStyle {
+    readonly modal: StyleProp<ViewStyle>;
+}
 interface ReturnQuestionProps {
     readonly returnQuestionParent: ReturnQuestionProjection;
     readonly returnQuestion: ReturnQuestionProjection;
     readonly portalHostName?: string;
+    readonly style?: Partial<ReturnQuestionStyle>;
 }
 declare const _default: React.NamedExoticComponent<ReturnQuestionProps>;
 export default _default;

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestion.js

@@ -1,8 +1,8 @@
 import React, { memo } from "react";
 import { useReturnQuestionItem } from "./behaviors/useReturnQuestionItem";
-const ReturnQuestion = ({ returnQuestionParent, returnQuestion, portalHostName }) => {
+const ReturnQuestion = ({ returnQuestionParent, returnQuestion, portalHostName, style: customStyle, }) => {
     const Item = useReturnQuestionItem({ type: returnQuestion.type });
-    return (React.createElement(Item, { portalHostName: portalHostName, returnQuestion: returnQuestion, returnQuestionParent: returnQuestionParent, testID: returnQuestion.id },
-        React.createElement(React.Fragment, null, returnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParent: returnQuestion }))))));
+    return (React.createElement(Item, { portalHostName: portalHostName, returnQuestion: returnQuestion, returnQuestionParent: returnQuestionParent, style: customStyle, testID: returnQuestion.id },
+        React.createElement(React.Fragment, null, returnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParent: returnQuestion, style: customStyle }))))));
 };
 export default memo(ReturnQuestion);

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestions.d.ts

@@ -1,8 +1,13 @@
 import { FC } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { ReturnQuestionProjection } from "../../../../../projection/returnQuestion/returnQuestion";
+interface ReturnQuestionsStyle {
+    readonly modal: StyleProp<ViewStyle>;
+}
 interface ReturnQuestionsProps {
     readonly returnQuestions: ReturnQuestionProjection[];
     readonly portalHostName?: string;
+    readonly style?: Partial<ReturnQuestionsStyle>;
 }
 declare const ReturnQuestions: FC<ReturnQuestionsProps>;
 export { ReturnQuestions };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestions.js

@@ -1,4 +1,4 @@
 import React from "react";
 import ReturnQuestion from "./ReturnQuestion";
-const ReturnQuestions = ({ returnQuestions, portalHostName }) => (React.createElement(React.Fragment, null, returnQuestions.map((returnQuestion) => (React.createElement(ReturnQuestion, { key: returnQuestion.id, portalHostName: portalHostName, returnQuestion: returnQuestion, returnQuestionParent: {} })))));
+const ReturnQuestions = ({ returnQuestions, portalHostName, style: customStyle }) => (React.createElement(React.Fragment, null, returnQuestions.map((returnQuestion) => (React.createElement(ReturnQuestion, { key: returnQuestion.id, portalHostName: portalHostName, returnQuestion: returnQuestion, returnQuestionParent: {}, style: customStyle })))));
 export { ReturnQuestions };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/ReturnQuestionItem.d.ts

@@ -1,11 +1,16 @@
 import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+interface ReturnQuestionItemStyle {
+    readonly modal: StyleProp<ViewStyle>;
+}
 interface ReturnQuestionItemProps {
     readonly returnQuestionParent: ReturnQuestionProjection;
     readonly returnQuestion: ReturnQuestionProjection;
     readonly children?: ReactNode;
     readonly portalHostName?: string;
     readonly testID?: string;
+    readonly style?: Partial<ReturnQuestionItemStyle>;
 }
 type ReturnQuestionItem = FC<ReturnQuestionItemProps>;
 export type { ReturnQuestionItem, ReturnQuestionItemProps };

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

@@ -7,7 +7,7 @@ import { InputField } from "../../../../../../../shared/ui/components/molecules/
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForReturnQuestion, } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { style, containerUnderlayColor } from "./HostSelectReturnQuestionItem.style";
-const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName, testID, }) => {
+const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName, testID, style: customStyle, }) => {
     const { formatMessage } = useIntl();
     const placeholderText = useMemo(() => (returnQuestion.placeholder ? formatMessage({ id: returnQuestion.placeholder }) : ""), [formatMessage, returnQuestion.placeholder]);
     const [modalVisible, setModalVisible] = useState(false);
@@ -35,6 +35,6 @@ const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName
             React.createElement(View, { pointerEvents: "none" },
                 React.createElement(InputField, { editable: false, icon: "arrow_down", label: placeholderText, value: inputValue }))),
         React.createElement(Modal, { portalHostName: portalHostName, style: deepestReturnQuestionWithFeedback && { header: style.header }, visible: modalVisible, header: deepestReturnQuestionWithFeedback && (React.createElement(ButtonIcon, { name: "arrow_left", style: style.backButton, testID: "modal-back-button", onPress: handleOnBackButtonPress })), scroll: true, showCloseButton: true, onClose: handleOnModalClose },
-            React.createElement(View, { style: style.modalContent }, children))));
+            React.createElement(View, { style: [style.modal, customStyle?.modal] }, children))));
 };
 export { HostSelectReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.style.d.ts

@@ -9,7 +9,7 @@ declare const style: {
     header: {
         justifyContent: "space-between";
     };
-    modalContent: {
+    modal: {
         paddingBottom: number;
         paddingHorizontal: number;
     };

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

@@ -12,7 +12,7 @@ const style = StyleSheet.create({
     header: {
         justifyContent: "space-between",
     },
-    modalContent: {
+    modal: {
         paddingBottom: space6,
         paddingHorizontal: space6,
     },

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/form/HostStackReturnQuestionItem.js

@@ -1,4 +1,4 @@
 import React from "react";
 import ReturnQuestion from "../../../ReturnQuestion";
-const HostStackReturnQuestionItem = ({ returnQuestion, portalHostName, }) => (React.createElement(React.Fragment, null, returnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParent: returnQuestion })))));
+const HostStackReturnQuestionItem = ({ returnQuestion, portalHostName, style: customStyle, }) => (React.createElement(React.Fragment, null, returnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParent: returnQuestion, style: customStyle })))));
 export { HostStackReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem.js

@@ -6,7 +6,7 @@ import { useIntl } from "@lookiero/i18n-react";
 import ReturnQuestion from "../../../ReturnQuestion";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../../behaviors/useReturnQuestionFeedback";
 import { style } from "./HostStackReturnQuestionItem.style";
-const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName, }) => {
+const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName, style: customStyle, }) => {
     const { formatMessage } = useIntl();
     const { feedback } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion });
     const feedbackReturnQuestion = feedback
@@ -22,6 +22,6 @@ const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName,
             titleText && (React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText)),
             feedbackReturnQuestion ? (React.createElement(React.Fragment, null,
                 React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 3 }, feedbackText),
-                feedbackReturnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParent: feedbackReturnQuestion }))))) : (children))));
+                feedbackReturnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParent: feedbackReturnQuestion, style: customStyle }))))) : (children))));
 };
 export { HostStackReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
 interface ModalOptionReturnQuestionItemsProps {
     readonly portalHostName?: string;
     readonly returnQuestion: ReturnQuestionProjection;
     readonly returnQuestionParent: ReturnQuestionProjection;
     readonly visible: boolean;
+    readonly style?: StyleProp<ViewStyle>;
     readonly onClose: () => void;
 }
-declare const ModalOptionReturnQuestionItems: ({ portalHostName, returnQuestion, visible, onClose, }: ModalOptionReturnQuestionItemsProps) => React.JSX.Element;
+declare const ModalOptionReturnQuestionItems: ({ portalHostName, returnQuestion, visible, style: customStyle, onClose, }: ModalOptionReturnQuestionItemsProps) => React.JSX.Element;
 export { ModalOptionReturnQuestionItems };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems.js

@@ -5,12 +5,12 @@ import { useIntl } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
 import ReturnQuestion from "../../ReturnQuestion";
 import { style } from "./ModalOptionReturnQuestionItems.style";
-const ModalOptionReturnQuestionItems = ({ portalHostName, returnQuestion, visible, onClose, }) => {
+const ModalOptionReturnQuestionItems = ({ portalHostName, returnQuestion, visible, style: customStyle, onClose, }) => {
     const { formatMessage } = useIntl();
     const title = formatMessage({ id: returnQuestion.name });
     return (React.createElement(Modal, { portalHostName: portalHostName, visible: visible, scroll: true, showCloseButton: true, onClose: onClose },
-        React.createElement(View, { style: style.modalContent },
+        React.createElement(View, { style: [style.modalContent, customStyle] },
             React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 2, style: style.optionText }, title),
-            React.createElement(React.Fragment, null, returnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: "", returnQuestion: childReturnQuestion, returnQuestionParent: returnQuestion })))))));
+            React.createElement(React.Fragment, null, returnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: "", returnQuestion: childReturnQuestion, returnQuestionParent: returnQuestion, style: { modal: customStyle } })))))));
 };
 export { ModalOptionReturnQuestionItems };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.js

@@ -1,11 +1,11 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { View, Option, OPTION_VARIANT, SIZE } from "@lookiero/aurora";
+import { View, Option, OPTION_VARIANT } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForReturnQuestion, } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { ModalOptionReturnQuestionItems } from "../modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems";
 import { style } from "./RadioReturnQuestionItem.style";
-const RadioReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, portalHostName, }) => {
+const RadioReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, portalHostName, style: customStyle, }) => {
     const intl = useIntl();
     const [modalVisible, setModalVisible] = useState(false);
     const { feedback: feedbackId, onChange, clear, } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
@@ -43,7 +43,7 @@ const RadioReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID,
      */
     return (React.createElement(React.Fragment, null,
         React.createElement(View, { style: style.wrapper, testID: testID },
-            React.createElement(Option, { checked: returnQuestion.id === feedbackId, flex: SIZE.XS, name: returnQuestion.id, title: inputValue ? `${optionText} / ${inputValue}` : `${optionText}`, value: returnQuestion.id, variant: OPTION_VARIANT.BUTTON, onChange: handleOnPress })),
-        hasChildren ? (React.createElement(ModalOptionReturnQuestionItems, { portalHostName: portalHostName, returnQuestion: returnQuestion, returnQuestionParent: returnQuestion, visible: modalVisible, onClose: handleOnModalClose })) : null));
+            React.createElement(Option, { checked: returnQuestion.id === feedbackId, name: returnQuestion.id, title: inputValue ? `${optionText} / ${inputValue}` : `${optionText}`, value: returnQuestion.id, variant: OPTION_VARIANT.BUTTON, onChange: handleOnPress })),
+        hasChildren ? (React.createElement(ModalOptionReturnQuestionItems, { portalHostName: portalHostName, returnQuestion: returnQuestion, returnQuestionParent: returnQuestion, style: customStyle?.modal, visible: modalVisible, onClose: handleOnModalClose })) : null));
 };
 export { RadioReturnQuestionItem };

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

@@ -1,4 +1,5 @@
 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";
@@ -7,6 +8,10 @@ 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;
@@ -16,6 +21,7 @@ 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;
@@ -31,3 +37,4 @@ 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, getAuthToken, onI18nError, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, kameleoon, layout, style: customStyle, 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, null,
+                                React.createElement(App, { style: { container: customStyle?.container, notifications: customStyle?.notifications } },
                                     React.createElement(Outlet, null)))))))),
             children: [
                 {
                     path: Routes.ITEM,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Item, { layout: layout }))),
+                        React.createElement(Item, { layout: layout, style: { modal: customStyle?.modal } }))),
                 },
                 {
                     path: Routes.ITEM_DETAIL,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Item, { layout: layout }))),
+                        React.createElement(Item, { layout: layout, style: { modal: customStyle?.modal } }))),
                 },
                 {
                     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 }))),
+                        React.createElement(Return, { layout: layout, style: { modal: customStyle?.modal } }))),
                 },
                 {
                     path: "*",

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

@@ -1,6 +1,14 @@
 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

@@ -1,17 +1,17 @@
 import { PortalProvider } from "@gorhom/portal";
 import React from "react";
-import { StatusBar } from "react-native";
-import { KeyboardProvider } from "react-native-keyboard-controller";
+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 { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
+import { style } from "./App.style";
 const { colorBgBase } = theme();
-const App = ({ children }) => (React.createElement(KeyboardProvider, null,
+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 }),
+            React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID, style: customStyle?.notifications }),
             React.createElement(AuroraPortalProvider, null, children)))));
 export { App };

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

@@ -1,6 +1,6 @@
 declare const style: {
-  container: {
-    flex: number;
-  };
+    container: {
+        flex: number;
+    };
 };
 export { style };

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

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

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

@@ -1,7 +1,12 @@
 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 }) => {
+const Item = ({ layout: Layout, style: customStyle }) => {
     const logger = useLogger();
     const screenSize = useScreenSize();
     const navigate = useNavigate();
@@ -141,10 +141,10 @@ const Item = ({ layout: Layout }) => {
         return React.createElement(Spinner, { testID: "spinner" });
     }
     return (React.createElement(ReturnQuestionFeedbackProvider, { key: checkoutItem.id, feedback: checkoutItem.feedbacks || {} },
-        React.createElement(Layout, { footer: null, header: header, scrollEnabled: !itemWithoutCustomerDecission, style: {
+        React.createElement(Layout, { 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, 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, style: customStyle, 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,6 +1,8 @@
 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

@@ -5,13 +5,13 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./GetOutOfCheckoutModal.style";
-const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
+const GetOutOfCheckoutModal = ({ visible, style: customStyle, 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, onClose: onDismiss },
-        React.createElement(View, { style: style.modalContent },
+        React.createElement(View, { style: [style.modal, customStyle] },
             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/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.d.ts

@@ -12,7 +12,7 @@ declare const style: {
         marginVertical: number;
         width: "100%";
     };
-    modalContent: {
+    modal: {
         paddingHorizontal: number;
     };
     title: {

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

@@ -15,7 +15,7 @@ const style = StyleSheet.create({
         marginVertical: space8,
         width: "100%",
     },
-    modalContent: {
+    modal: {
         paddingHorizontal: space6,
     },
     title: {

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

@@ -1,11 +1,15 @@
 import { FC } from "react";
-import { LayoutRectangle } from "react-native";
+import { LayoutRectangle, StyleProp, ViewStyle } 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, onShowSizeWithoutStockModal = () => void 0, onKeep, onReplace, onReturn, onLayout, }) => {
+const ItemActions = ({ productVariants, currentProductVariant, country, style: customStyle, 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, onShowSi
                 !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, testID: "select-field-modal", title: changeSizeButtonText, value: currentProductVariant.id, onChange: onReplace, onClose: handleOnModalClose })));
+        React.createElement(SelectModal, { modalVisible: modalVisible, options: sizeSelectorOptions, style: { modal: customStyle?.modal }, 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,7 +1,12 @@
 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, onEditFeedback }) => {
+const ReturnQuestionsFeedback = ({ returnQuestions, style: customStyle, 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 }))));
+            React.createElement(ReturnQuestions, { returnQuestions: returnQuestions, style: customStyle }))));
 };
 export { ReturnQuestionsFeedback };

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

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { StyleProp, TextStyle, ViewStyle } from "react-native";
 interface SelectModalStyle {
-    readonly modalContent: StyleProp<ViewStyle>;
+    readonly modal: StyleProp<ViewStyle>;
     readonly option: StyleProp<ViewStyle>;
     readonly optionText: StyleProp<TextStyle>;
 }
@@ -14,10 +14,10 @@ interface SelectModalProps {
     readonly value: string | undefined;
     readonly options: Option[];
     readonly style?: Partial<SelectModalStyle>;
-    readonly onChange?: (value: string) => void;
-    readonly onClose?: () => void;
     readonly modalVisible: boolean;
     readonly testID?: string;
+    readonly onChange?: (value: string) => void;
+    readonly onClose?: () => void;
 }
 declare const SelectModal: FC<SelectModalProps>;
 export type { Option };

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

@@ -4,13 +4,13 @@ import { COLOR, Text } from "@lookiero/aurora";
 import { Modal, theme } from "@lookiero/sty-psp-ui";
 import { style } from "./SelectModal.style";
 const { colorBgPrimaryLight } = theme();
-const SelectModal = ({ modalVisible, onChange = () => void 0, onClose = () => void 0, options, style: customStyle, testID, title, value, }) => {
+const SelectModal = ({ modalVisible, options, style: customStyle, testID, title, value, onChange = () => void 0, onClose = () => void 0, }) => {
     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.modalContent, customStyle?.modalContent] },
+        React.createElement(View, { style: [style.modal, customStyle?.modal] },
             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)))))));

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

@@ -1,5 +1,5 @@
 declare const style: {
-    modalContent: {
+    modal: {
         paddingBottom: number;
         paddingHorizontal: number;
     };

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

@@ -2,7 +2,7 @@ import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 const { borderWidth1, colorBorderInteractive, space1, space5, space6 } = theme();
 const style = StyleSheet.create({
-    modalContent: {
+    modal: {
         paddingBottom: space6,
         paddingHorizontal: space6,
     },

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

@@ -1,6 +1,8 @@
 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

@@ -5,12 +5,12 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./SizeWithoutStockModal.style";
-const SizeWithoutStockModal = ({ visible, onDismiss }) => {
+const SizeWithoutStockModal = ({ visible, style: customStyle, onDismiss }) => {
     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 },
+        React.createElement(View, { style: [style.modalContent, customStyle] },
             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))));