@lookiero/checkout 11.0.0 → 11.2.0

package/src/infrastructure/ui/components/templates/header/Header.style.ts

@@ -1,23 +1,25 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorBgBase, space2 } = theme();
-
 const HEADER_HEIGHT = 48;
 
-const style = StyleSheet.create({
-  header: {
-    alignItems: "center",
-    backgroundColor: colorBgBase,
-    flexDirection: "row",
-    flexGrow: 0,
-    flexWrap: "nowrap",
-    height: HEADER_HEIGHT,
-    justifyContent: "space-between",
-    overflow: "visible",
-    paddingHorizontal: space2,
-    width: "100%",
-  },
-});
+const style = () => {
+  const { colorBgBase, space2 } = theme();
+
+  return StyleSheet.create({
+    header: {
+      alignItems: "center",
+      backgroundColor: colorBgBase,
+      flexDirection: "row",
+      flexGrow: 0,
+      flexWrap: "nowrap",
+      height: HEADER_HEIGHT,
+      justifyContent: "space-between",
+      overflow: "visible",
+      paddingHorizontal: space2,
+      width: "100%",
+    },
+  });
+};
 
 export { style, HEADER_HEIGHT };

package/src/infrastructure/ui/components/templates/header/Header.tsx

@@ -1,13 +1,17 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { View, ViewProps } from "react-native";
-import { style } from "./Header.style";
+import { style as headerStyle } from "./Header.style";
 
 type HeaderProps = ViewProps;
 
-const Header: FC<HeaderProps> = ({ children, style: customStyle, ...props }) => (
-  <View {...props} style={[style.header, customStyle]}>
-    {children}
-  </View>
-);
+const Header: FC<HeaderProps> = ({ children, style: customStyle, ...props }) => {
+  const style = useMemo(() => headerStyle(), []);
+
+  return (
+    <View {...props} style={[style.header, customStyle]}>
+      {children}
+    </View>
+  );
+};
 
 export { Header };

package/src/infrastructure/ui/components/templates/header/buttonIconPlaceholder/ButtonIconPlaceholder.style.ts

@@ -1,14 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space10 } = theme();
+const style = () => {
+  const { space10 } = theme();
 
-const style = StyleSheet.create({
-  buttonIconPlaceholder: {
-    flexGrow: 0,
-    height: space10,
-    width: space10,
-  },
-});
+  return StyleSheet.create({
+    buttonIconPlaceholder: {
+      flexGrow: 0,
+      height: space10,
+      width: space10,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/templates/header/buttonIconPlaceholder/ButtonIconPlaceholder.tsx

@@ -1,7 +1,11 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { View } from "react-native";
-import { style } from "./ButtonIconPlaceholder.style";
+import { style as buttonIconPlaceholderStyle } from "./ButtonIconPlaceholder.style";
 
-const ButtonIconPlaceholder: FC = () => <View style={style.buttonIconPlaceholder} />;
+const ButtonIconPlaceholder: FC = () => {
+  const style = useMemo(() => buttonIconPlaceholderStyle(), []);
+
+  return <View style={style.buttonIconPlaceholder} />;
+};
 
 export { ButtonIconPlaceholder };

package/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.style.ts

@@ -1,14 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space10 } = theme();
+const style = () => {
+  const { space10 } = theme();
 
-const style = StyleSheet.create({
-  button: {
-    alignSelf: "auto",
-    height: space10,
-    width: space10,
-  },
-});
+  return StyleSheet.create({
+    button: {
+      alignSelf: "auto",
+      height: space10,
+      width: space10,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
-import { style } from "./CheckoutHeader.style";
+import { style as checkoutHeader } from "./CheckoutHeader.style";
 
 interface CheckoutHeaderProps {
   readonly onBack?: () => void;
@@ -13,6 +13,8 @@ interface CheckoutHeaderProps {
 const CheckoutHeader: FC<CheckoutHeaderProps> = ({ onBack }) => {
   const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
 
+  const style = useMemo(() => checkoutHeader(), []);
+
   return (
     <Header testID="checkout-header">
       <ButtonIcon name="arrow_left" style={style.button} testID="arrow-left-button-icon" onPress={onBack} />

package/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.style.ts

@@ -1,14 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space10 } = theme();
+const style = () => {
+  const { space10 } = theme();
 
-const style = StyleSheet.create({
-  button: {
-    alignSelf: "auto",
-    height: space10,
-    width: space10,
-  },
-});
+  return StyleSheet.create({
+    button: {
+      alignSelf: "auto",
+      height: space10,
+      width: space10,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
-import { style } from "./ItemDetailHeader.style";
+import { style as itemDetailHeaderStyle } from "./ItemDetailHeader.style";
 
 interface ItemDetailHeaderProps {
   readonly onBack: () => void;
@@ -12,6 +12,8 @@ interface ItemDetailHeaderProps {
 const ItemDetailHeader: FC<ItemDetailHeaderProps> = ({ onBack }) => {
   const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
 
+  const style = useMemo(() => itemDetailHeaderStyle(), []);
+
   return (
     <Header testID="item-detail-header">
       <ButtonIconPlaceholder />

package/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.style.ts

@@ -1,14 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space10 } = theme();
+const style = () => {
+  const { space10 } = theme();
 
-const style = StyleSheet.create({
-  button: {
-    alignSelf: "auto",
-    height: space10,
-    width: space10,
-  },
-});
+  return StyleSheet.create({
+    button: {
+      alignSelf: "auto",
+      height: space10,
+      width: space10,
+    },
+  });
+};
 
-export default style;
+export { style };

package/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from "react";
+import React, { FC, useCallback, useMemo } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import { generatePath, useNavigate } from "react-router-native";
 import { ButtonIcon, Text } from "@lookiero/aurora";
@@ -9,7 +9,7 @@ import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
-import style from "./ItemHeader.style";
+import { style as itemHeaderStyle } from "./ItemHeader.style";
 
 interface OnNextItemFunctionArgs {
   readonly from: string;
@@ -35,6 +35,8 @@ interface ItemHeaderProps {
 }
 
 const ItemHeader: FC<ItemHeaderProps> = ({ items, item, onNext, onPrevious }) => {
+  const style = useMemo(() => itemHeaderStyle(), []);
+
   const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
   const itemIndex = items.indexOf(item);
   const isFirstItem = itemIndex === 0;

package/src/infrastructure/ui/views/App.tsx

@@ -7,19 +7,21 @@ import { theme } from "@lookiero/sty-psp-ui";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
 import { DOMAIN } from "../i18n/i18n";
 
-const { colorBgBase } = theme();
-
 interface AppProps {
   readonly children: JSX.Element;
 }
 
-const App: FC<AppProps> = ({ children }) => (
-  <SafeAreaProvider>
-    <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
-    <Notifications contextId={MESSAGING_CONTEXT_ID} domain={DOMAIN} portalHostName="Checkout" />
-    <PortalHost name="Checkout" />
-    {children}
-  </SafeAreaProvider>
-);
+const App: FC<AppProps> = ({ children }) => {
+  const { colorBgBase } = theme();
+
+  return (
+    <SafeAreaProvider>
+      <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
+      <Notifications contextId={MESSAGING_CONTEXT_ID} domain={DOMAIN} portalHostName="Checkout" />
+      <PortalHost name="Checkout" />
+      {children}
+    </SafeAreaProvider>
+  );
+};
 
 export { App };

package/src/infrastructure/ui/views/checkout/Checkout.style.ts

@@ -2,67 +2,69 @@ import { StyleSheet, Platform } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
 
-const { borderRadius4, colorBgPrimaryLight, colorBgBase, space2, space3, space4, space6, space12, space16 } = theme();
+const style = () => {
+  const { borderRadius4, colorBgPrimaryLight, colorBgBase, space2, space3, space4, space6, space12, space16 } = theme();
 
-const style = StyleSheet.create({
-  contentWrapper: {
-    backgroundColor: colorBgBase,
-    flexGrow: 0,
-    paddingHorizontal: space6,
-    paddingVertical: space6,
-  },
-  desktopContentWrapper: {
-    borderRadius: borderRadius4,
-    paddingVertical: space12,
-  },
-  desktopLayoutSpacing: {
-    paddingVertical: space12,
-  },
-  desktopListSpacing: {
-    paddingRight: space16,
-  },
-  desktopResume: {
-    borderRadius: borderRadius4,
-  },
-  header: {
-    height: HEADER_HEIGHT,
-  },
-  paymentSelector: {
-    marginTop: space6,
-  },
-  paymentSelectorNL: {
-    marginBottom: space6,
-  },
-  princingWrapper: {
-    padding: space6,
-  },
-  princingWrapperSmall: {
-    backgroundColor: colorBgPrimaryLight,
-    paddingBottom: space2,
-  },
-  resume: {
-    overflow: "hidden",
-    backgroundColor: colorBgBase,
-    ...Platform.select({
-      web: {
-        position: "sticky",
-        top: space12,
-        alignSelf: "flex-start",
-      },
-    }),
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } as any,
-  scrollView: {
-    backgroundColor: colorBgPrimaryLight,
-    flex: 1,
-  },
-  sticky: {
-    paddingBottom: space4,
-    paddingTop: space3,
-  },
-  title: {
-    marginBottom: space4,
-  },
-});
+  return StyleSheet.create({
+    contentWrapper: {
+      backgroundColor: colorBgBase,
+      flexGrow: 0,
+      paddingHorizontal: space6,
+      paddingVertical: space6,
+    },
+    desktopContentWrapper: {
+      borderRadius: borderRadius4,
+      paddingVertical: space12,
+    },
+    desktopLayoutSpacing: {
+      paddingVertical: space12,
+    },
+    desktopListSpacing: {
+      paddingRight: space16,
+    },
+    desktopResume: {
+      borderRadius: borderRadius4,
+    },
+    header: {
+      height: HEADER_HEIGHT,
+    },
+    paymentSelector: {
+      marginTop: space6,
+    },
+    paymentSelectorNL: {
+      marginBottom: space6,
+    },
+    princingWrapper: {
+      padding: space6,
+    },
+    princingWrapperSmall: {
+      backgroundColor: colorBgPrimaryLight,
+      paddingBottom: space2,
+    },
+    resume: {
+      overflow: "hidden",
+      backgroundColor: colorBgBase,
+      ...Platform.select({
+        web: {
+          position: "sticky",
+          top: space12,
+          alignSelf: "flex-start",
+        },
+      }),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any,
+    scrollView: {
+      backgroundColor: colorBgPrimaryLight,
+      flex: 1,
+    },
+    sticky: {
+      paddingBottom: space4,
+      paddingTop: space3,
+    },
+    title: {
+      marginBottom: space4,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/views/checkout/Checkout.tsx

@@ -23,7 +23,7 @@ import { DOMAIN, I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { ProductVariant } from "../shared/components/productVariant/ProductVariant";
 import { Pricing } from "../summary/components/pricing/Pricing";
-import { style } from "./Checkout.style";
+import { style as checkoutStyle } from "./Checkout.style";
 import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
 import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
 
@@ -48,6 +48,9 @@ const Checkout: FC<CheckoutProps> = ({
     customer: { customerId, country, segment },
     basePath,
   } = useStaticInfo();
+
+  const style = useMemo(() => checkoutStyle(), []);
+
   const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_TITLE });
   const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_PAY_BUTTON });
   const { screen } = useDevice();

package/src/infrastructure/ui/views/feedback/Feedback.style.ts

@@ -1,17 +1,19 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space3, space6, space8 } = theme();
+const style = () => {
+  const { space3, space6, space8 } = theme();
 
-const style = StyleSheet.create({
-  container: {
-    justifyContent: "flex-start",
-    paddingHorizontal: space6,
-    paddingVertical: space8,
-  },
-  containerDesktop: {
-    paddingHorizontal: space3,
-  },
-});
+  return StyleSheet.create({
+    container: {
+      justifyContent: "flex-start",
+      paddingHorizontal: space6,
+      paddingVertical: space8,
+    },
+    containerDesktop: {
+      paddingHorizontal: space3,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/views/feedback/Feedback.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useRef } from "react";
+import React, { FC, useCallback, useEffect, useMemo, useRef } from "react";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
@@ -15,7 +15,7 @@ import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
 import { Body } from "../../components/layouts/body/Body";
 import { CheckoutQuestionFeedbackProvider } from "../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
-import { style } from "./Feedback.style";
+import { style as feedbackStyle } from "./Feedback.style";
 import { CheckoutQuestionsForm } from "./components/checkoutQuestionsForm/CheckoutQuestionsForm";
 
 interface HandleOnChangedFeedbackFunctionArgs {
@@ -38,6 +38,9 @@ const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
   const {
     customer: { customerId, country, segment },
   } = useStaticInfo();
+
+  const style = useMemo(() => feedbackStyle(), []);
+
   const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
   const [checkoutQuestions, checkoutQuestionsStatus] = useListCheckoutQuestionsByCheckoutId({
     checkoutId: checkout?.id as string,

package/src/infrastructure/ui/views/item/Item.style.ts

@@ -2,25 +2,27 @@ import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
 
-const { colorBgPrimaryLight, space12 } = theme();
+const style = () => {
+  const { colorBgPrimaryLight, space12 } = theme();
 
-const style = StyleSheet.create({
-  fiveItemsDiscountPadding: {
-    paddingTop: space12,
-  },
-  header: {
-    height: HEADER_HEIGHT,
-  },
-  headerWithDoubleHeight: {
-    height: HEADER_HEIGHT * 2,
-  },
-  headerWrapper: {
-    display: "flex",
-    flexDirection: "column",
-  },
-  safeAreaView: {
-    backgroundColor: colorBgPrimaryLight,
-  },
-});
+  return StyleSheet.create({
+    fiveItemsDiscountPadding: {
+      paddingTop: space12,
+    },
+    header: {
+      height: HEADER_HEIGHT,
+    },
+    headerWithDoubleHeight: {
+      height: HEADER_HEIGHT * 2,
+    },
+    headerWrapper: {
+      display: "flex",
+      flexDirection: "column",
+    },
+    safeAreaView: {
+      backgroundColor: colorBgPrimaryLight,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/views/item/Item.tsx

@@ -28,7 +28,7 @@ import { ItemDetailHeader } from "../../components/templates/header/itemDetailHe
 import { ItemHeader } from "../../components/templates/header/itemHeader/ItemHeader";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { Routes } from "../../routing/routes";
-import { style } from "./Item.style";
+import { style as itemStyle } from "./Item.style";
 import {
   CheckoutItemWithCustomerDecission,
   ItemWithCustomerDecission,
@@ -59,12 +59,15 @@ interface ItemProps {
 
 const Item: FC<ItemProps> = ({ layout: Layout }) => {
   const logger = useLogger();
-  const screenSize = useScreenSize();
   const navigate = useNavigate();
   const {
     customer: { customerId, country, segment },
     basePath,
   } = useStaticInfo();
+
+  const style = useMemo(() => itemStyle(), []);
+
+  const screenSize = useScreenSize();
   const isDesktopScreen = screenSize !== "S";
 
   const { id } = useParams();
@@ -194,6 +197,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
       handleOnNext,
       handleOnPrevious,
       itemDetailRouteMatch,
+      style.headerWrapper,
     ],
   );
 

package/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.ts

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

package/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.tsx

@@ -1,11 +1,11 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { Pressable, View } from "react-native";
 import { InfoBox, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
-import { style } from "./CustomerDecissionBanner.style";
+import { style as customerDecissionBannerStyle } from "./CustomerDecissionBanner.style";
 
 type CustomerDecissionBannerStatus = Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL>;
 
@@ -22,9 +22,12 @@ interface CustomerDecissionBannerProps {
 const CustomerDecissionBanner: FC<CustomerDecissionBannerProps> = ({ checkoutItemStatus, onPress }) => {
   const decissionText = useI18nMessage({ domain: DOMAIN, id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
   const bannerButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_BANNER_BUTTON });
+
   const screenSize = useScreenSize();
   const isSmallScreen = screenSize === "S";
 
+  const style = useMemo(() => customerDecissionBannerStyle(), []);
+
   return (
     <View style={[style.container, isSmallScreen ? style.smallContainer : null]}>
       <InfoBox text={decissionText}>