@lookiero/checkout 11.1.0 → 11.3.0

package/dist/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/CheckoutItemsTabs.js

@@ -1,16 +1,17 @@
 import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
-import { Text, useDevice } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Tabs } from "@lookiero/sty-psp-ui";
+import { Tabs, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { ProductVariant } from "../../../shared/components/productVariant/ProductVariant";
-import { style } from "./CheckoutItemsTabs.style";
+import { style as checkoutItemsTabsStyle } from "./CheckoutItemsTabs.style";
 const CheckoutItem = ({ checkoutItemStatus, checkoutItemProductVariant, checkoutItemPrice, country, testID, style: customStyle, onPress, }) => (React.createElement(View, { testID: testID },
     React.createElement(ProductVariant, { brand: checkoutItemProductVariant.brand, color: checkoutItemProductVariant.color, country: country, media: checkoutItemProductVariant.media, name: checkoutItemProductVariant.name, price: checkoutItemPrice, size: checkoutItemProductVariant.size, status: checkoutItemStatus, style: customStyle, onPress: onPress })));
 const CheckoutItemsTabs = ({ tabIndex, checkoutItemsKept, checkoutItemsReturned, country, onPressItem, onChanged, }) => {
-    const { screen } = useDevice();
+    const screenSize = useScreenSize();
+    const style = useMemo(() => checkoutItemsTabsStyle(), []);
     const keepTabText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_KEEP_TAB });
     const returnTabText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_RETURN_TAB });
     const keepEmptyText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_KEEP_EMPTY });
@@ -19,10 +20,21 @@ const CheckoutItemsTabs = ({ tabIndex, checkoutItemsKept, checkoutItemsReturned,
     const data = useMemo(() => [{ id: "0" }, { id: "1" }], []);
     const renderItem = useCallback(({ index }) => index === 0 ? (checkoutItemsKept.length === 0 ? (React.createElement(Text, { style: style.emptyText }, keepEmptyText)) : (React.createElement(React.Fragment, null, checkoutItemsKept.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemStatus: checkoutItem.status, country: country, testID: "keep-checkout-item", checkoutItemProductVariant: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
             ? checkoutItem.replacedFor
-            : checkoutItem.productVariant, onPress: () => handleOnPressItem(checkoutItem.id) })))))) : checkoutItemsReturned.length === 0 ? (React.createElement(Text, { style: style.emptyText }, returnEmptyText)) : (React.createElement(React.Fragment, null, checkoutItemsReturned.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemProductVariant: checkoutItem.productVariant, checkoutItemStatus: checkoutItem.status, country: country, testID: "return-checkout-item", onPress: () => handleOnPressItem(checkoutItem.id) }))))), [checkoutItemsKept, checkoutItemsReturned, country, handleOnPressItem, keepEmptyText, returnEmptyText]);
+            : checkoutItem.productVariant, onPress: () => handleOnPressItem(checkoutItem.id) })))))) : checkoutItemsReturned.length === 0 ? (React.createElement(Text, { style: style.emptyText }, returnEmptyText)) : (React.createElement(React.Fragment, null, checkoutItemsReturned.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemProductVariant: checkoutItem.productVariant, checkoutItemStatus: checkoutItem.status, country: country, testID: "return-checkout-item", onPress: () => handleOnPressItem(checkoutItem.id) }))))), [
+        checkoutItemsKept,
+        checkoutItemsReturned,
+        country,
+        handleOnPressItem,
+        keepEmptyText,
+        returnEmptyText,
+        style.emptyText,
+    ]);
     return (React.createElement(Tabs, { data: data, defaultIndex: tabIndex, tabLabels: [`${keepTabText} (${checkoutItemsKept.length})`, `${returnTabText} (${checkoutItemsReturned.length})`], style: {
-            carousel: [style.carousel, screen.L && style.carouselDesktop],
-            tabList: { tabList: [style.tabList, screen.L && style.tabListDesktop], tab: { tabText: style.tabText } },
+            carousel: [style.carousel, screenSize === "L" && style.carouselDesktop],
+            tabList: {
+                tabList: [style.tabList, screenSize === "L" && style.tabListDesktop],
+                tab: { tabText: style.tabText },
+            },
         }, onChanged: onChanged }, renderItem));
 };
 export { CheckoutItemsTabs };

package/dist/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/CheckoutItemsTabs.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     carousel: {
         paddingBottom: number;
         paddingHorizontal: number;

package/dist/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/CheckoutItemsTabs.style.js

@@ -1,30 +1,32 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space2, space4, space6, colorBorderInput, fontDetailSize1, fontDetailHeight1 } = theme();
-const style = StyleSheet.create({
-    carousel: {
-        paddingBottom: space6,
-        paddingHorizontal: space6,
-        paddingTop: space2,
-    },
-    carouselDesktop: {
-        paddingHorizontal: 0,
-    },
-    emptyText: {
-        paddingTop: space4,
-    },
-    tabList: {
-        borderBottomColor: colorBorderInput,
-        borderBottomWidth: 1,
-        justifyContent: "flex-start",
-        paddingHorizontal: space4,
-    },
-    tabListDesktop: {
-        paddingHorizontal: 0,
-    },
-    tabText: {
-        fontSize: fontDetailSize1,
-        lineHeight: fontDetailHeight1,
-    },
-});
+const style = () => {
+    const { space2, space4, space6, colorBorderInput, fontDetailSize1, fontDetailHeight1 } = theme();
+    return StyleSheet.create({
+        carousel: {
+            paddingBottom: space6,
+            paddingHorizontal: space6,
+            paddingTop: space2,
+        },
+        carouselDesktop: {
+            paddingHorizontal: 0,
+        },
+        emptyText: {
+            paddingTop: space4,
+        },
+        tabList: {
+            borderBottomColor: colorBorderInput,
+            borderBottomWidth: 1,
+            justifyContent: "flex-start",
+            paddingHorizontal: space4,
+        },
+        tabListDesktop: {
+            paddingHorizontal: 0,
+        },
+        tabText: {
+            fontSize: fontDetailSize1,
+            lineHeight: fontDetailHeight1,
+        },
+    });
+};
 export { style };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "11.1.0";
+export declare const VERSION = "11.3.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "11.1.0";
+export const VERSION = "11.3.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "11.1.0",
+  "version": "11.3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -27,13 +27,13 @@
     "@lookiero/sty-psp-i18n": "^0.4",
     "@lookiero/sty-psp-locale": "^0.4",
     "@lookiero/sty-psp-logging": "^0.5",
-    "@lookiero/sty-psp-notifications": "^0.8",
+    "@lookiero/sty-psp-notifications": "^1.0",
     "@lookiero/sty-psp-react-native": "^0.3",
     "@lookiero/sty-psp-segment": "^0.1",
     "@lookiero/sty-psp-storage": "^0.2",
     "@lookiero/sty-psp-tracking": "^0.2",
     "@lookiero/sty-sp-tradename": "^1.0",
-    "@lookiero/sty-psp-ui": "^0.7",
+    "@lookiero/sty-psp-ui": "^1.0",
     "@lookiero/sty-psp-ui-settings": "^0.2",
     "@lookiero/sty-psp-units": "^0.1",
     "@lookiero/sty-psp-uuid": "^0.2",

package/src/Expo.tsx

@@ -1,16 +1,8 @@
 import { registerRootComponent } from "expo";
-import React from "react";
 import { enableLegacyWebImplementation } from "react-native-gesture-handler";
 import "react-native-get-random-values";
-import { setTheme } from "@lookiero/sty-psp-ui";
-import { Tradename } from "@lookiero/sty-sp-tradename";
+import { ExpoRoot } from "./ExpoRoot";
 
 enableLegacyWebImplementation(true);
 
-const tradename = Tradename.LOOKIERO;
-setTheme({ tradename });
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { ExpoRoot } = require("./ExpoRoot");
-
-registerRootComponent(() => <ExpoRoot tradename={tradename} />);
+registerRootComponent(ExpoRoot);

package/src/ExpoRoot.tsx

@@ -26,7 +26,10 @@ import { OrderProjection } from "./projection/order/order";
 import { SubscriptionProjection } from "./projection/subscription/subscription";
 import { VERSION } from "./version";
 
+const tradename = Tradename.LOOKIERO;
+const theme = themeByTradename({ tradename });
 const locale: Locale = Locale.es_ES;
+
 const subscription: SubscriptionProjection = "b";
 const order: OrderProjection = {
   isFirstOrder: false,
@@ -35,7 +38,7 @@ const order: OrderProjection = {
 };
 
 const customer: Customer = {
-  customerId: "9cfb056e-6008-44b1-9075-320479bf92ac",
+  customerId: "dd186ec9-109f-418d-a770-c6721aa2a97e",
   country: Country.NL,
   segment: Segment.WOMEN,
   email: "email@example.com",
@@ -56,7 +59,7 @@ const apiUrl =
       ? "/local-to-dev"
       : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDk0NjYsImV4cCI6MTc0MjQ3MDI5OSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTExIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6ImQzYzIzNTRiLTk4MTEtNDZkNC1iMmJhLTVmYmEwMTJlZDk0ZCIsImlhdCI6MTc0MDA1MTA5OX0.AkuUZTsn9mgplQwatg0dPKyv1Hsc6r267UMahxMH19g";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2OTUxOTEsImV4cCI6MTc0ODA3NzU5NSwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMDQtMjQiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiZGQxODZlYzktMTA5Zi00MThkLWE3NzAtYzY3MjFhYTJhOTdlIiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJpYXQiOjE3NDU0ODU1OTV9.MHdtbMWX4lUU98ARiGALsUNkoqu1wKN7Qd-fCv6oqi4";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const externalTranslationsUrl =
@@ -69,7 +72,7 @@ const translations: EndpointFunction[] = [
   (locale) =>
     translationExternalEndpoint({
       translationsUrl: externalTranslationsUrl,
-      projects: [["checkout"]],
+      projects: [["checkout"], ["inventory-catalog"]],
     })(locale),
 ];
 
@@ -123,10 +126,7 @@ const Root = root({
   kameleoon: () => kameleoonConfig,
 })({ customerId: customer.customerId });
 
-interface ExpoRootProps {
-  readonly tradename: Tradename;
-}
-const ExpoRoot: FC<ExpoRootProps> = ({ tradename }) => {
+const ExpoRoot: FC = () => {
   const [fontsLoaded] = useFonts({
     ["AreaInktrap-Semibold"]: require("@lookiero/aurora/build/assets/fonts/AreaInktrap-Semibold.otf"),
     ["AreaNormal-Semibold"]: require("@lookiero/aurora/build/assets/fonts/AreaNormal-Semibold.otf"),
@@ -140,8 +140,6 @@ const ExpoRoot: FC<ExpoRootProps> = ({ tradename }) => {
   const [isAccessible, setIsAccessible] = useState<boolean>();
   const onNotAccessible = useCallback(() => setIsAccessible(false), []);
 
-  const theme = themeByTradename({ tradename });
-
   return fontsLoaded ? (
     <PortalProvider>
       <PaymentsQueryProvider>
@@ -161,7 +159,7 @@ const ExpoRoot: FC<ExpoRootProps> = ({ tradename }) => {
                       locale={locale}
                       order={order}
                       subscription={subscription}
-                      tradename={Tradename.LOOKIERO}
+                      tradename={tradename}
                       useRedirect={useRedirect}
                       onCheckoutFlowSuccess={() => console.log("Checkout flow success!")}
                       onNotAccessible={onNotAccessible}

package/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.style.ts

@@ -1,12 +1,14 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { fontMap } = theme();
+const style = () => {
+  const { fontMap } = theme();
 
-const style = StyleSheet.create({
-  textBold: {
-    fontFamily: fontMap.Action,
-  },
-});
+  return StyleSheet.create({
+    textBold: {
+      fontFamily: fontMap.Action,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.tsx

@@ -1,13 +1,15 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { ALIGN, DISPLAY, InfoBox, INFOBOX_TYPE, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { DOMAIN, I18nMessages } from "../../../i18n/i18n";
-import { style } from "./FiveItemsDiscountBanner.style";
+import { style as fiveItemsDiscountBannerStyle } from "./FiveItemsDiscountBanner.style";
 
 interface FiveItemsDiscountBannerProps {
   readonly fiveItemsDiscount: number;
 }
 const FiveItemsDiscountBanner: FC<FiveItemsDiscountBannerProps> = ({ fiveItemsDiscount }) => {
+  const style = useMemo(() => fiveItemsDiscountBannerStyle(), []);
+
   const bannerText = useI18nMessage({
     domain: DOMAIN,
     id: I18nMessages.BANNER_DISCOUNT_TEXT,

package/src/infrastructure/ui/components/atoms/price/Price.style.ts

@@ -1,22 +1,24 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorTextError, colorTextMedium, space2 } = theme();
+const style = () => {
+  const { colorTextError, colorTextMedium, space2 } = theme();
 
-const style = StyleSheet.create({
-  discountedPercentage: {
-    color: colorTextError,
-  },
-  discountedPriceInfo: {
-    alignItems: "flex-end",
-    marginLeft: space2,
-  },
-  discountedPriceText: {
-    color: colorTextMedium,
-  },
-  price: {
-    flexDirection: "row",
-  },
-});
+  return StyleSheet.create({
+    discountedPercentage: {
+      color: colorTextError,
+    },
+    discountedPriceInfo: {
+      alignItems: "flex-end",
+      marginLeft: space2,
+    },
+    discountedPriceText: {
+      color: colorTextMedium,
+    },
+    price: {
+      flexDirection: "row",
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/atoms/price/Price.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nNumber } from "@lookiero/i18n-react";
 import { PriceProjection } from "../../../../../projection/price/price";
 import { DOMAIN } from "../../../i18n/i18n";
-import { style } from "./Price.style";
+import { style as priceStyle } from "./Price.style";
 
 type PriceVariant = "default" | "detail" | "subtotal" | "total";
 
@@ -44,6 +44,8 @@ const Price: FC<PriceProps> = ({ price, variant = "default", withPercentage = fa
 
   const priceValue = isDiscounted ? productDiscountedPrice : productPrice;
 
+  const style = useMemo(() => priceStyle(), []);
+
   return (
     <View style={style.price} testID="price">
       <Text {...PRICE_VARIANT[variant]} testID="price-text">

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.ts

@@ -1,37 +1,40 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const {
-  colorBorderActionSecondary,
-  colorBgActionPrimaryActive,
-  colorTextActionPrimary,
-  borderWidth2,
-  borderRadiusFull,
-  space6,
-  space16,
-} = theme();
+const style = () => {
+  const {
+    colorBorderActionSecondary,
+    colorBgActionPrimaryActive,
+    colorTextActionPrimary,
+    borderWidth2,
+    borderRadiusFull,
+    space6,
+    space16,
+  } = theme();
 
-const HEIGHT = space16;
-
-const style = StyleSheet.create({
-  button: {
-    alignContent: "center",
-    borderColor: colorBorderActionSecondary,
-    borderRadius: borderRadiusFull,
-    borderWidth: borderWidth2,
-    flex: 1,
-    height: HEIGHT,
-    justifyContent: "center",
-    marginHorizontal: 12,
-    paddingLeft: space6,
-    paddingRight: space6,
-  },
-  buttonActive: {
-    backgroundColor: colorBgActionPrimaryActive,
-  },
-  textActive: {
-    color: colorTextActionPrimary,
-  },
-});
+  return StyleSheet.create({
+    button: {
+      alignContent: "center",
+      borderColor: colorBorderActionSecondary,
+      borderRadius: borderRadiusFull,
+      borderWidth: borderWidth2,
+      flex: 1,
+      height: space16,
+      justifyContent: "center",
+      marginHorizontal: 12,
+      paddingLeft: space6,
+      paddingRight: space6,
+    },
+    buttonActive: {
+      backgroundColor: colorBgActionPrimaryActive,
+    },
+    text: {
+      textAlign: "center",
+    },
+    textActive: {
+      color: colorTextActionPrimary,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.tsx

@@ -1,11 +1,11 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity } from "react-native";
-import { ALIGN, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
-import { style } from "./ButtonCheckoutQuestionItem.style";
+import { style as buttonCheckoutQuestionItemStyle } from "./ButtonCheckoutQuestionItem.style";
 
 const ACTIVE_OPACITY = 0.6;
 
@@ -22,15 +22,19 @@ const ButtonCheckoutQuestionItem: CheckoutQuestionItem = ({
     [onChange, checkoutQuestion.id, checkoutQuestionParentId],
   );
 
+  const style = useMemo(() => buttonCheckoutQuestionItemStyle(), []);
+
+  const checked = feedback === checkoutQuestion.id;
+
   return (
     <TouchableOpacity
       accessibilityLabel={testID}
       activeOpacity={ACTIVE_OPACITY}
-      style={[style.button, feedback === checkoutQuestion.id && style.buttonActive]}
+      style={[style.button, checked && style.buttonActive]}
       testID={testID}
       onPress={handleOnPress}
     >
-      <Text align={ALIGN.CENTER} level={3} style={feedback === checkoutQuestion.id && style.textActive} action>
+      <Text level={3} style={[style.text, checked && style.textActive]} action>
         {optionText}
       </Text>
     </TouchableOpacity>

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostDefaultCheckoutQuestionItem/HostDefaultCheckoutQuestionItem.style.ts

@@ -1,15 +1,17 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space6, space8 } = theme();
+const style = () => {
+  const { space6, space8 } = theme();
 
-const style = StyleSheet.create({
-  content: {
-    marginBottom: space8,
-  },
-  title: {
-    marginBottom: space6,
-  },
-});
+  return StyleSheet.create({
+    content: {
+      marginBottom: space8,
+    },
+    title: {
+      marginBottom: space6,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostDefaultCheckoutQuestionItem/HostDefaultCheckoutQuestionItem.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
-import { style } from "./HostDefaultCheckoutQuestionItem.style";
+import { style as hostDefaultCheckoutQuestionItemStyle } from "./HostDefaultCheckoutQuestionItem.style";
 
 const HostDefaultCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
@@ -12,6 +12,8 @@ const HostDefaultCheckoutQuestionItem: CheckoutQuestionItem = ({
 }: CheckoutQuestionItemProps) => {
   const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
 
+  const style = useMemo(() => hostDefaultCheckoutQuestionItemStyle(), []);
+
   return (
     <>
       <Text level={3} style={style.title}>

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.style.ts

@@ -1,18 +1,24 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorBgPrimaryLight, space6, space8 } = theme();
-const containerUnderlayColor = colorBgPrimaryLight;
+const style = () => {
+  const { colorBgPrimaryLight, space6, space8 } = theme();
 
-const style = StyleSheet.create({
-  content: {
-    flexDirection: "row",
-    justifyContent: "center",
-    marginBottom: space8,
-  },
-  title: {
-    marginBottom: space6,
-  },
-});
+  const styles = StyleSheet.create({
+    content: {
+      flexDirection: "row",
+      justifyContent: "center",
+      marginBottom: space8,
+    },
+    title: {
+      marginBottom: space6,
+    },
+  });
 
-export { style, containerUnderlayColor };
+  return {
+    ...styles,
+    containerUnderlayColor: colorBgPrimaryLight,
+  };
+};
+
+export { style };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
-import { style } from "./HostSelectCheckoutQuestionItem.style";
+import { style as hostSelectCheckoutQuestionItemStyle } from "./HostSelectCheckoutQuestionItem.style";
 
 const HostSelectCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
@@ -12,6 +12,8 @@ const HostSelectCheckoutQuestionItem: CheckoutQuestionItem = ({
 }: CheckoutQuestionItemProps) => {
   const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
 
+  const style = useMemo(() => hostSelectCheckoutQuestionItemStyle(), []);
+
   return (
     <>
       <Text level={3} style={style.title}>

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.style.ts

@@ -1,9 +1,20 @@
 import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
 
-const style = StyleSheet.create({
-  icon: {
-    marginHorizontal: 12,
-  },
-});
+const style = () => {
+  const { colorBgPrimaryMediumLight, colorIcon } = theme();
+
+  const styles = StyleSheet.create({
+    icon: {
+      marginHorizontal: 12,
+    },
+  });
+
+  return {
+    ...styles,
+    colorBgPrimaryMediumLight,
+    colorIcon,
+  };
+};
 
 export { style };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.tsx

@@ -1,17 +1,14 @@
-import React, { FC, useCallback } from "react";
+import React, { FC, useCallback, useMemo } from "react";
 import { Pressable } from "react-native";
 import { SvgProps } from "react-native-svg";
 import invariant from "tiny-invariant";
-import { theme } from "@lookiero/sty-psp-ui";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
-import { style } from "./IconCheckoutQuestionItem.style";
+import { style as iconCheckoutQuestionItemStyle } from "./IconCheckoutQuestionItem.style";
 import { Happy } from "./icons/Happy";
 import { Normal } from "./icons/Normal";
 import { Sad } from "./icons/Sad";
 
-const { colorBgPrimaryMediumLight } = theme();
-
 type IconName = "checkout_question.icon.bad" | "checkout_question.icon.regular" | "checkout_question.icon.good";
 
 const ICON: Record<IconName, FC<SvgProps>> = {
@@ -30,6 +27,8 @@ const IconCheckoutQuestionItem: CheckoutQuestionItem = ({
 }: CheckoutQuestionItemProps) => {
   const Icon = ICON[checkoutQuestion.name as IconName];
 
+  const style = useMemo(() => iconCheckoutQuestionItemStyle(), []);
+
   const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
   const isSelected = feedback === checkoutQuestion.id;
 
@@ -43,7 +42,8 @@ const IconCheckoutQuestionItem: CheckoutQuestionItem = ({
   return (
     <Pressable accessibilityLabel={testID} testID={testID} onPress={handleOnPress}>
       <Icon
-        fill={isSelected ? colorBgPrimaryMediumLight : "none"}
+        color={style.colorIcon}
+        fill={isSelected ? style.colorBgPrimaryMediumLight : "none"}
         strokeWidth={isSelected ? 2 : 1}
         style={style.icon}
       />

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/icons/Happy.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from "react";
 import Svg, { Circle, Path, SvgProps } from "react-native-svg";
 
-const Happy: FC<SvgProps> = ({ strokeWidth = 1, ...props }) => (
+const Happy: FC<SvgProps> = ({ strokeWidth = 1, color, ...props }) => (
   <Svg fill="none" height={48} width={48} {...props}>
-    <Circle cx={24} cy={24} r={23} stroke="#000" strokeWidth={strokeWidth} />
-    <Circle cx={16} cy={17} fill="#000" r={2} />
-    <Circle cx={32} cy={17} fill="#000" r={2} />
-    <Path d="M14 28.5s3 6 10 6 10-6 10-6" stroke="#000" strokeWidth={strokeWidth} />
+    <Circle cx={24} cy={24} r={23} stroke={color} strokeWidth={strokeWidth} />
+    <Circle cx={16} cy={17} fill={color} r={2} />
+    <Circle cx={32} cy={17} fill={color} r={2} />
+    <Path d="M14 28.5s3 6 10 6 10-6 10-6" stroke={color} strokeWidth={strokeWidth} />
   </Svg>
 );