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

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

@@ -0,0 +1,43 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space4, space6, space8 } = theme();
+const style = StyleSheet.create({
+    description: {
+        color: colorTextMedium,
+    },
+    desktopInfo: {
+        borderTopLeftRadius: borderRadius5,
+        borderTopRightRadius: borderRadius5,
+    },
+    desktopLayoutSpacing: {
+        paddingVertical: space8,
+    },
+    headerWrapper: {
+        display: "flex",
+        flexDirection: "column",
+    },
+    info: {
+        backgroundColor: colorBgBase,
+        paddingBottom: space4,
+        paddingHorizontal: space6,
+        paddingTop: space8,
+    },
+    layout: {
+        flex: 1,
+        justifyContent: "center",
+    },
+    safeAreaView: {
+        backgroundColor: colorBgPrimaryLight,
+        flex: 1,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    submit: {
+        backgroundColor: colorBgBase,
+        borderBottomLeftRadius: borderRadius5,
+        borderBottomRightRadius: borderRadius5,
+        padding: space6,
+    },
+});
+export { style };

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

@@ -1,20 +1,15 @@
 import { FC } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutProjection } from "../../../../../../projection/checkout/checkout";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
-interface ReturnQuestionsFormStyle {
-    readonly modal: StyleProp<ViewStyle>;
-}
 interface ReturnQuestionsFormProps {
     readonly checkout: CheckoutProjection;
     readonly checkoutItem: CheckoutItemProjection;
     readonly country: Country;
     readonly layout: UiLayout;
     readonly segment: Segment;
-    readonly style?: Partial<ReturnQuestionsFormStyle>;
 }
 declare const ReturnQuestionsForm: FC<ReturnQuestionsFormProps>;
 export { ReturnQuestionsForm };

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

@@ -37,7 +37,7 @@ const returnQuestionItems = {
     [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
     [ReturnQuestionType.OPTION]: RadioReturnQuestionItem,
 };
-const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout, segment, style: customStyle, }) => {
+const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout, segment, }) => {
     const navigate = useNavigate();
     const basePath = useBasePath();
     const logger = useLogger();
@@ -94,20 +94,21 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
     }
     return (React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
         React.createElement(PortalHost, { name: RETURN_QUESTION_FORM_PORTAL_HOST_NAME }),
-        React.createElement(Layout, { header: header, scrollEnabled: false, style: {
+        React.createElement(Layout, { footer: null, header: header, scrollEnabled: false, style: {
                 safeAreaView: style.safeAreaView,
                 scrollView: style.scrollView,
                 header: style.header,
             } },
             React.createElement(ProductVariantPreview, { country: country, item: checkoutItem }),
             React.createElement(ScrollView, { showsVerticalScrollIndicator: false, testID: "return-questions-form" },
-                React.createElement(AuroraLayout, { fullWidth: !screen.L, style: [style.layout, screen.L ? style.desktopLayoutSpacing : undefined] },
-                    React.createElement(Box, { size: { L: "2/3" } },
-                        React.createElement(View, { style: [style.info, !screen.S && style.desktopInfo] },
-                            React.createElement(Text, { level: 3, heading: true }, titleText),
-                            React.createElement(Text, { level: 1, style: style.description, detail: true }, descriptionText)),
-                        React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions, style: customStyle }),
-                        React.createElement(View, { style: style.submit },
-                            React.createElement(Button, { testID: "return-questions-button", onPress: handleOnSubmit }, submitButtonText))))))));
+                React.createElement(View, { style: style.background },
+                    React.createElement(AuroraLayout, { fullWidth: !screen.L, style: [style.layout, screen.L ? style.desktopLayoutSpacing : undefined] },
+                        React.createElement(Box, { size: { L: "2/3" } },
+                            React.createElement(View, { style: [style.info, !screen.S && style.desktopInfo] },
+                                React.createElement(Text, { level: 3, heading: true }, titleText),
+                                React.createElement(Text, { level: 1, style: style.description, detail: true }, descriptionText)),
+                            React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions }),
+                            React.createElement(View, { style: [style.submit, !screen.S && style.submitDesktop] },
+                                React.createElement(Button, { testID: "return-questions-button", onPress: handleOnSubmit }, submitButtonText)))))))));
 };
 export { ReturnQuestionsForm };

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

@@ -1,4 +1,7 @@
 declare const style: {
+    background: {
+        backgroundColor: string;
+    };
     description: {
         color: string;
     };
@@ -27,7 +30,6 @@ declare const style: {
         justifyContent: "center";
     };
     safeAreaView: {
-        backgroundColor: string;
         flex: number;
     };
     scrollView: {
@@ -35,9 +37,11 @@ declare const style: {
     };
     submit: {
         backgroundColor: string;
+        padding: number;
+    };
+    submitDesktop: {
         borderBottomLeftRadius: number;
         borderBottomRightRadius: number;
-        padding: number;
     };
 };
 export { style };

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

@@ -3,6 +3,9 @@ import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../../../components/templates/header/Header.style";
 const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space4, space6, space8 } = theme();
 const style = StyleSheet.create({
+    background: {
+        backgroundColor: colorBgPrimaryLight,
+    },
     description: {
         color: colorTextMedium,
     },
@@ -31,7 +34,6 @@ const style = StyleSheet.create({
         justifyContent: "center",
     },
     safeAreaView: {
-        backgroundColor: colorBgPrimaryLight,
         flex: 1,
     },
     scrollView: {
@@ -39,9 +41,11 @@ const style = StyleSheet.create({
     },
     submit: {
         backgroundColor: colorBgBase,
+        padding: space6,
+    },
+    submitDesktop: {
         borderBottomLeftRadius: borderRadius5,
         borderBottomRightRadius: borderRadius5,
-        padding: space6,
     },
 });
 export { style };

package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.d.ts

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { LayoutRectangle } from "react-native";
+import { PricingProjection } from "../../../../../../projection/pricing/pricing";
+interface StickyPricingProps {
+    readonly pricing: PricingProjection;
+    readonly totalCheckoutItemsKept: number;
+    readonly collapsed: boolean;
+    readonly onPress: () => void;
+    readonly onSubmit: () => void;
+    readonly onLayout?: ({ width, height }: LayoutRectangle) => void;
+}
+declare const StickyPricing: FC<StickyPricingProps>;
+export { StickyPricing };

package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { Sticky } from "@lookiero/sty-psp-ui";
+import { Body } from "../../../../components/layouts/body/Body";
+import { Pricing } from "../pricing/Pricing";
+import { style } from "./StickyPricing.style";
+const StickyPricing = ({ pricing, totalCheckoutItemsKept, collapsed, onPress, onSubmit, onLayout, }) => (React.createElement(Sticky, { style: style.sticky, onLayout: onLayout },
+    React.createElement(Body, null,
+        React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, collapsed: collapsed, discount: pricing.discount, discountPercentage: pricing.discountPercentage, pendingToPay: pricing.pendingToPay, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: totalCheckoutItemsKept, onPress: onPress, onSubmit: onSubmit }))));
+export { StickyPricing };

package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.d.ts

@@ -0,0 +1,7 @@
+declare const style: {
+    sticky: {
+        paddingBottom: number;
+        paddingTop: number;
+    };
+};
+export { style };

package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space3, space4 } = theme();
+const style = StyleSheet.create({
+    sticky: {
+        paddingBottom: space4,
+        paddingTop: space3,
+    },
+});
+export { style };

package/dist/src/projection/checkout/viewIsCheckoutAccessibleByCustomerId.d.ts

@@ -0,0 +1,17 @@
+import { Query, QueryHandlerFunction, QueryHandlerFunctionArgs } from "@lookiero/messaging";
+type IsCheckoutAccessibleByCustomerIdProjection = boolean;
+declare const VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID = "view_is_checkout_accessible_by_customer_id";
+interface ViewIsCheckoutAccessibleByCustomerIdPayload {
+    readonly customerId: string | undefined;
+}
+interface ViewIsCheckoutAccessibleByCustomerId extends Query<typeof VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID>, ViewIsCheckoutAccessibleByCustomerIdPayload {
+}
+interface ViewIsCheckoutAccessibleByCustomerIdFunction {
+    (payload: ViewIsCheckoutAccessibleByCustomerIdPayload): ViewIsCheckoutAccessibleByCustomerId;
+}
+declare const viewIsCheckoutAccessibleByCustomerId: ViewIsCheckoutAccessibleByCustomerIdFunction;
+interface ViewIsCheckoutAccessibleByCustomerIdHandlerFunctionArgs extends QueryHandlerFunctionArgs {
+}
+declare const viewIsCheckoutAccessibleByCustomerIdHandler: QueryHandlerFunction<ViewIsCheckoutAccessibleByCustomerId, IsCheckoutAccessibleByCustomerIdProjection, ViewIsCheckoutAccessibleByCustomerIdHandlerFunctionArgs>;
+export type { IsCheckoutAccessibleByCustomerIdProjection };
+export { VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID, viewIsCheckoutAccessibleByCustomerId, viewIsCheckoutAccessibleByCustomerIdHandler, };

package/dist/src/projection/checkout/viewIsCheckoutAccessibleByCustomerId.js

@@ -0,0 +1,13 @@
+import { query } from "@lookiero/messaging";
+import { viewFirstAvailableCheckoutByCustomerId } from "./viewFirstAvailableCheckoutByCustomerId";
+import { viewIsCheckoutEnabledByCustomerId } from "./viewIsCheckoutEnabledByCustomerId";
+const VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID = "view_is_checkout_accessible_by_customer_id";
+const viewIsCheckoutAccessibleByCustomerId = (payload) => ({
+    ...query({ name: VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID }),
+    ...payload,
+});
+const isNonEmptyCustomerId = (customerId) => Boolean(customerId);
+const viewIsCheckoutAccessibleByCustomerIdHandler = ({ queryBus }) => async ({ customerId }) => isNonEmptyCustomerId(customerId) &&
+    Boolean(await queryBus(viewFirstAvailableCheckoutByCustomerId({ customerId }))) &&
+    Boolean(await queryBus(viewIsCheckoutEnabledByCustomerId({ customerId })));
+export { VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID, viewIsCheckoutAccessibleByCustomerId, viewIsCheckoutAccessibleByCustomerIdHandler, };

package/dist/src/projection/shared/country.d.ts

@@ -0,0 +1,14 @@
+declare enum Country {
+    ES = "ES",
+    FR = "FR",
+    GB = "GB",
+    BE = "BE",
+    LU = "LU",
+    IT = "IT",
+    PT = "PT",
+    DE = "DE",
+    AT = "AT",
+    NL = "NL",
+    SE = "SE"
+}
+export { Country };

package/dist/src/projection/shared/country.js

@@ -0,0 +1,15 @@
+var Country;
+(function (Country) {
+    Country["ES"] = "ES";
+    Country["FR"] = "FR";
+    Country["GB"] = "GB";
+    Country["BE"] = "BE";
+    Country["LU"] = "LU";
+    Country["IT"] = "IT";
+    Country["PT"] = "PT";
+    Country["DE"] = "DE";
+    Country["AT"] = "AT";
+    Country["NL"] = "NL";
+    Country["SE"] = "SE";
+})(Country || (Country = {}));
+export { Country };

package/dist/src/projection/shared/customer.d.ts

@@ -0,0 +1,8 @@
+import { Country } from "@lookiero/sty-psp-locale";
+import { Segment } from "@lookiero/sty-psp-segment";
+interface Customer {
+    readonly customerId: string;
+    readonly country: Country;
+    readonly segment: Segment;
+}
+export type { Customer };

package/dist/src/projection/shared/customer.js

@@ -0,0 +1 @@
+export {};

package/dist/src/projection/shared/locale.d.ts

@@ -0,0 +1,12 @@
+declare enum Locale {
+    ES = "es",
+    FR = "fr",
+    EN = "en",
+    IT = "it",
+    PT = "pt",
+    DE = "de",
+    AT = "at",
+    NL = "nl",
+    SE = "sv"
+}
+export { Locale };

package/dist/src/projection/shared/locale.js

@@ -0,0 +1,13 @@
+var Locale;
+(function (Locale) {
+    Locale["ES"] = "es";
+    Locale["FR"] = "fr";
+    Locale["EN"] = "en";
+    Locale["IT"] = "it";
+    Locale["PT"] = "pt";
+    Locale["DE"] = "de";
+    Locale["AT"] = "at";
+    Locale["NL"] = "nl";
+    Locale["SE"] = "sv";
+})(Locale || (Locale = {}));
+export { Locale };

package/dist/src/projection/shared/order.d.ts

@@ -0,0 +1,6 @@
+interface Order {
+    readonly orderNumber: number;
+    readonly isFirstOrder: boolean;
+    readonly coupon: string | null;
+}
+export type { Order };

package/dist/src/projection/shared/order.js

@@ -0,0 +1 @@
+export {};

package/dist/src/projection/shared/price.d.ts

@@ -0,0 +1,10 @@
+import { Currency } from "../../domain/checkoutItem/model/currency";
+interface PriceProjection {
+    readonly amount: number;
+    readonly currency: Currency;
+    readonly discountedPrice?: {
+        readonly amount: number;
+        readonly percentage: number;
+    };
+}
+export type { PriceProjection };

package/dist/src/projection/shared/price.js

@@ -0,0 +1 @@
+export {};

package/dist/src/projection/shared/size.d.ts

@@ -0,0 +1,20 @@
+import { Country } from "./country";
+interface SizeProjection {
+    readonly id: string;
+    readonly lookiero: string;
+    readonly uk: string;
+    readonly it: string;
+    readonly europe: string;
+    readonly unique: boolean;
+    readonly visualOrder?: number;
+}
+interface SizeFunctionArgs {
+    readonly size: SizeProjection;
+    readonly country: Country;
+}
+interface SizeFunction {
+    (args: SizeFunctionArgs): string;
+}
+declare const size: SizeFunction;
+export type { SizeProjection };
+export { size };

package/dist/src/projection/shared/size.js

@@ -0,0 +1,3 @@
+import { Country } from "./country";
+const size = ({ size, country }) => (country === Country.GB ? size.uk : size.lookiero);
+export { size };

package/dist/src/projection/shared/subscription.d.ts

@@ -0,0 +1,2 @@
+type Subscription = "o" | "m" | "b" | "q";
+export type { Subscription };

package/dist/src/projection/shared/subscription.js

@@ -0,0 +1 @@
+export {};

package/dist/src/shared/ui/components/atoms/error/Error.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { StyleProp, TextStyle } from "react-native";
+type ErrorStyle = StyleProp<TextStyle>;
+interface ErrorProps {
+    readonly error?: string | null;
+    readonly style?: ErrorStyle;
+}
+declare const Error: FC<ErrorProps>;
+export type { ErrorStyle };
+export { Error };

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { COLOR, Text } from "@lookiero/aurora";
+const Error = ({ error, style: customStyle }) => (React.createElement(Text, { color: COLOR.TEXT_ERROR, level: 2, style: customStyle, detail: true }, error));
+export { Error };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "8.14.0-beta.2";
+export declare const VERSION = "8.14.0-beta.3";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "8.14.0-beta.2";
+export const VERSION = "8.14.0-beta.3";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "8.14.0-beta.2",
+  "version": "8.14.0-beta.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -21,7 +21,7 @@
     "@lookiero/sty-psp-i18n": "^0.2",
     "@lookiero/sty-psp-locale": "^0.4",
     "@lookiero/sty-psp-logging": "^0.3",
-    "@lookiero/sty-psp-notifications": "^0.5.16-beta.2",
+    "@lookiero/sty-psp-notifications": "^0.5",
     "@lookiero/sty-psp-react-native": "^0.2",
     "@lookiero/sty-psp-segment": "^0.1",
     "@lookiero/sty-psp-storage": "^0.1",

package/src/infrastructure/ui/Root.tsx

@@ -6,12 +6,12 @@ import { I18n } from "@lookiero/i18n-react";
 import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
 import { Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment, SentryLoggerFunctionArgs, sentryLogger, sentryLoggerHOC } from "@lookiero/sty-psp-logging";
-import { Layout } from "@lookiero/sty-psp-ui";
+import { EnvironmentStyle, EnvironmentStyleProvider, Layout } from "@lookiero/sty-psp-ui";
 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 { Routing, RoutingStyle } from "./routing/Routing";
+import { Routing } from "./routing/Routing";
 
 interface RootFunctionArgs {
   readonly Messaging: MessagingRoot;
@@ -33,7 +33,7 @@ interface RootProps {
   readonly order: Order | undefined;
   readonly subscription: Subscription | undefined;
   readonly layout: Layout;
-  readonly style?: Partial<RoutingStyle>;
+  readonly style?: EnvironmentStyle;
   readonly onNotAccessible: () => void;
   readonly onCheckoutSubmitted?: () => void;
   readonly useRedirect: () => Record<string, string>;
@@ -52,7 +52,7 @@ const root: RootFunction = ({ Messaging, I18n, getAuthToken, development, sentry
     order,
     subscription,
     layout,
-    style: customStyle,
+    style,
     onNotAccessible,
     onCheckoutSubmitted,
     useRedirect,
@@ -62,23 +62,24 @@ const root: RootFunction = ({ Messaging, I18n, getAuthToken, development, sentry
 
     return (
       <Messaging includeReactQueryDevTools={Platform.OS === "web"}>
-        <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}
-        />
+        <EnvironmentStyleProvider style={style}>
+          <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}
+          />
+        </EnvironmentStyleProvider>
       </Messaging>
     );
   };

package/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestion.tsx

@@ -1,25 +1,14 @@
 import React, { FC, memo } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 import { ReturnQuestionProjection } from "../../../../../projection/returnQuestion/returnQuestion";
 import { useReturnQuestionItem } from "./behaviors/useReturnQuestionItem";
 
-interface ReturnQuestionStyle {
-  readonly modal: StyleProp<ViewStyle>;
-}
-
 interface ReturnQuestionProps {
   readonly returnQuestionParent: ReturnQuestionProjection;
   readonly returnQuestion: ReturnQuestionProjection;
   readonly portalHostName?: string;
-  readonly style?: Partial<ReturnQuestionStyle>;
 }
 
-const ReturnQuestion: FC<ReturnQuestionProps> = ({
-  returnQuestionParent,
-  returnQuestion,
-  portalHostName,
-  style: customStyle,
-}) => {
+const ReturnQuestion: FC<ReturnQuestionProps> = ({ returnQuestionParent, returnQuestion, portalHostName }) => {
   const Item = useReturnQuestionItem({ type: returnQuestion.type });
 
   return (
@@ -27,7 +16,6 @@ const ReturnQuestion: FC<ReturnQuestionProps> = ({
       portalHostName={portalHostName}
       returnQuestion={returnQuestion}
       returnQuestionParent={returnQuestionParent}
-      style={customStyle}
       testID={returnQuestion.id}
     >
       <>
@@ -37,7 +25,6 @@ const ReturnQuestion: FC<ReturnQuestionProps> = ({
             portalHostName={portalHostName}
             returnQuestion={childReturnQuestion}
             returnQuestionParent={returnQuestion}
-            style={customStyle}
           />
         ))}
       </>

package/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestions.tsx

@@ -1,19 +1,13 @@
 import React, { FC } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 import { ReturnQuestionProjection } from "../../../../../projection/returnQuestion/returnQuestion";
 import ReturnQuestion from "./ReturnQuestion";
 
-interface ReturnQuestionsStyle {
-  readonly modal: StyleProp<ViewStyle>;
-}
-
 interface ReturnQuestionsProps {
   readonly returnQuestions: ReturnQuestionProjection[];
   readonly portalHostName?: string;
-  readonly style?: Partial<ReturnQuestionsStyle>;
 }
 
-const ReturnQuestions: FC<ReturnQuestionsProps> = ({ returnQuestions, portalHostName, style: customStyle }) => (
+const ReturnQuestions: FC<ReturnQuestionsProps> = ({ returnQuestions, portalHostName }) => (
   <>
     {returnQuestions.map((returnQuestion: ReturnQuestionProjection) => (
       <ReturnQuestion
@@ -21,7 +15,6 @@ const ReturnQuestions: FC<ReturnQuestionsProps> = ({ returnQuestions, portalHost
         portalHostName={portalHostName}
         returnQuestion={returnQuestion}
         returnQuestionParent={{} as ReturnQuestionProjection}
-        style={customStyle}
       />
     ))}
   </>

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

@@ -1,18 +1,12 @@
 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>;

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { TouchableHighlight, View } from "react-native";
 import { ButtonIcon } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
-import { Modal } from "@lookiero/sty-psp-ui";
+import { Modal, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import {
   useReturnQuestionFeedback,
@@ -20,8 +20,8 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem = ({
   children,
   portalHostName,
   testID,
-  style: customStyle,
 }: ReturnQuestionItemProps) => {
+  const { modal } = useEnvironmentStyle();
   const { formatMessage } = useIntl();
   const placeholderText = useMemo(
     () => (returnQuestion.placeholder ? formatMessage({ id: returnQuestion.placeholder }) : ""),
@@ -91,7 +91,7 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem = ({
         showCloseButton
         onClose={handleOnModalClose}
       >
-        <View style={[style.modal, customStyle?.modal]}>{children}</View>
+        <View style={[style.modal, modal?.content]}>{children}</View>
       </Modal>
     </>
   );

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

@@ -5,7 +5,6 @@ import { ReturnQuestionItem, ReturnQuestionItemProps } from "../../ReturnQuestio
 const HostStackReturnQuestionItem: ReturnQuestionItem = ({
   returnQuestion,
   portalHostName,
-  style: customStyle,
 }: ReturnQuestionItemProps) => (
   <>
     {returnQuestion.children?.map((childReturnQuestion) => (
@@ -14,7 +13,6 @@ const HostStackReturnQuestionItem: ReturnQuestionItem = ({
         portalHostName={portalHostName}
         returnQuestion={childReturnQuestion}
         returnQuestionParent={returnQuestion}
-        style={customStyle}
       />
     ))}
   </>