@lookiero/checkout 11.1.0 → 11.3.0

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

@@ -1,15 +1,16 @@
-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";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { ButtonIcon } from "@lookiero/sty-psp-ui";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 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 +36,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;
@@ -63,7 +66,7 @@ const ItemHeader: FC<ItemHeaderProps> = ({ items, item, onNext, onPrevious }) =>
       {!isFirstItem ? (
         <ButtonIcon
           name="arrow_left"
-          style={style.button}
+          style={{ button: style.button }}
           testID="arrow-left-button-icon"
           onPress={navigateToPreviousItem}
         />
@@ -76,7 +79,7 @@ const ItemHeader: FC<ItemHeaderProps> = ({ items, item, onNext, onPrevious }) =>
       {!isLastItem ? (
         <ButtonIcon
           name="arrow_right"
-          style={style.button}
+          style={{ button: style.button }}
           testID="arrow-right-button-icon"
           onPress={navigateToNextItem}
         />

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

@@ -50,7 +50,6 @@ exports[`ItemHeader template matches the snapshot 1`] = `
     testID="item-header"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -71,9 +70,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
       accessible={true}
       collapsable={false}
       focusable={true}
-      onBlur={[Function]}
       onClick={[Function]}
-      onFocus={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
       onResponderRelease={[Function]}
@@ -81,93 +78,47 @@ exports[`ItemHeader template matches the snapshot 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        [
-          [
-            {
-              "_container": {
-                "overflow": "hidden",
-              },
-              "_pressed": {
-                "bottom": 0,
-                "left": 0,
-                "right": 0,
-                "top": 0,
-              },
-              "alignSelf": "auto",
-              "container": {
-                "overflow": "hidden",
-              },
-              "height": 40,
-              "overflow": "visible",
-              "padding": 8,
-              "pressed": {
-                "bottom": 0,
-                "left": 0,
-                "right": 0,
-                "top": 0,
-              },
-              "width": 40,
-            },
-          ],
-          {
-            "opacity": 1,
-          },
-        ]
+        {
+          "alignSelf": "auto",
+          "flexGrow": 0,
+          "height": 40,
+          "opacity": 1,
+          "padding": 8,
+          "width": 40,
+        }
       }
       testID="arrow-left-button-icon"
     >
-      <View
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no"
+        selectable={false}
         style={
           [
             {
-              "position": "relative",
+              "color": "#0C0A0A",
+              "fontFamily": "auroraicons",
+              "fontSize": 24,
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+              "height": 24,
+              "letterSpacing": -0.2,
+              "lineHeight": 24,
+              "minHeight": 24,
+              "minWidth": 24,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 0,
+              "width": 24,
             },
           ]
         }
+        testID="icon"
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no"
-          selectable={false}
-          style={
-            [
-              {
-                "color": "#0C0A0A",
-                "fontFamily": "auroraicons",
-                "fontSize": 24,
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-                "height": 24,
-                "width": 24,
-              },
-            ]
-          }
-        >
-          
-        </Text>
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "#F45545",
-              "borderColor": "#FFFFFF",
-              "borderRadius": 9999,
-              "borderWidth": 2,
-              "height": 10,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "transform": [
-                {
-                  "scale": 0,
-                },
-              ],
-              "width": 10,
-            }
-          }
-        />
-      </View>
+        
+      </Text>
     </View>
     <Text
       allowFontScaling={false}
@@ -191,7 +142,6 @@ exports[`ItemHeader template matches the snapshot 1`] = `
       header.checkout_title
     </Text>
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -212,9 +162,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
       accessible={true}
       collapsable={false}
       focusable={true}
-      onBlur={[Function]}
       onClick={[Function]}
-      onFocus={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
       onResponderRelease={[Function]}
@@ -222,93 +170,47 @@ exports[`ItemHeader template matches the snapshot 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        [
-          [
-            {
-              "_container": {
-                "overflow": "hidden",
-              },
-              "_pressed": {
-                "bottom": 0,
-                "left": 0,
-                "right": 0,
-                "top": 0,
-              },
-              "alignSelf": "auto",
-              "container": {
-                "overflow": "hidden",
-              },
-              "height": 40,
-              "overflow": "visible",
-              "padding": 8,
-              "pressed": {
-                "bottom": 0,
-                "left": 0,
-                "right": 0,
-                "top": 0,
-              },
-              "width": 40,
-            },
-          ],
-          {
-            "opacity": 1,
-          },
-        ]
+        {
+          "alignSelf": "auto",
+          "flexGrow": 0,
+          "height": 40,
+          "opacity": 1,
+          "padding": 8,
+          "width": 40,
+        }
       }
       testID="arrow-right-button-icon"
     >
-      <View
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no"
+        selectable={false}
         style={
           [
             {
-              "position": "relative",
+              "color": "#0C0A0A",
+              "fontFamily": "auroraicons",
+              "fontSize": 24,
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+              "height": 24,
+              "letterSpacing": -0.2,
+              "lineHeight": 24,
+              "minHeight": 24,
+              "minWidth": 24,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 0,
+              "width": 24,
             },
           ]
         }
+        testID="icon"
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no"
-          selectable={false}
-          style={
-            [
-              {
-                "color": "#0C0A0A",
-                "fontFamily": "auroraicons",
-                "fontSize": 24,
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-                "height": 24,
-                "width": 24,
-              },
-            ]
-          }
-        >
-          
-        </Text>
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "#F45545",
-              "borderColor": "#FFFFFF",
-              "borderRadius": 9999,
-              "borderWidth": 2,
-              "height": 10,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "transform": [
-                {
-                  "scale": 0,
-                },
-              ],
-              "width": 10,
-            }
-          }
-        />
-      </View>
+        
+      </Text>
     </View>
   </View>
 </View>

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

@@ -1,11 +1,11 @@
 import React, { FC, useCallback, useMemo, useState } from "react";
 import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text, useDevice } from "@lookiero/aurora";
+import { Box, Button, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { Country } from "@lookiero/sty-psp-locale";
-import { Layout as UiLayout, Sticky } from "@lookiero/sty-psp-ui";
+import { Layout as UiLayout, Sticky, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { OrderProjection } from "../../../../projection/order/order";
 import { SubscriptionProjection } from "../../../../projection/subscription/subscription";
@@ -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,9 +48,13 @@ const Checkout: FC<CheckoutProps> = ({
     customer: { customerId, country, segment },
     basePath,
   } = useStaticInfo();
+  const screenSize = useScreenSize();
+  const isDektopScreen = screenSize === "L";
+
+  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();
   const [pricingHeight, setPricingHeight] = useState(0);
   const handleOnPricingLayout = useCallback(({ height }: LayoutRectangle) => setPricingHeight(height), []);
 
@@ -131,11 +135,11 @@ const Checkout: FC<CheckoutProps> = ({
         {hasReplacedCheckoutItem && <DeliveryBanner />}
 
         <AuroraLayout
-          fullWidth={!screen.L}
-          style={[screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }]}
+          fullWidth={!isDektopScreen}
+          style={[isDektopScreen && style.desktopLayoutSpacing, !isDektopScreen && { paddingBottom: pricingHeight }]}
         >
-          <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
-            <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
+          <Box size={{ L: "2/3" }} style={isDektopScreen && style.desktopListSpacing}>
+            <View style={[style.contentWrapper, isDektopScreen && style.desktopContentWrapper]}>
               {country === Country.NL && (
                 <View style={style.paymentSelectorNL}>
                   <PaymentInstrument useRedirect={useRedirect} />
@@ -173,12 +177,12 @@ const Checkout: FC<CheckoutProps> = ({
             </View>
           </Box>
 
-          <Box size={{ L: "1/3" }} style={[style.resume, screen.L && style.desktopResume]}>
+          <Box size={{ L: "1/3" }} style={[style.resume, isDektopScreen && style.desktopResume]}>
             {pricing ? (
-              <View style={[style.princingWrapper, !screen.L && style.princingWrapperSmall]}>
+              <View style={[style.princingWrapper, !isDektopScreen && style.princingWrapperSmall]}>
                 <Pricing pricing={pricing} totalCheckoutItemsKept={checkoutItemsKept?.length || 0} />
 
-                {screen.L ? (
+                {isDektopScreen ? (
                   <Button
                     busy={checkoutFlowStatus === "loading"}
                     testID="confirm-checkout-button"
@@ -193,7 +197,7 @@ const Checkout: FC<CheckoutProps> = ({
         </AuroraLayout>
       </ScrollView>
 
-      {pricing && !screen.L ? (
+      {pricing && !isDektopScreen ? (
         <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>
           <Body>
             <Button

package/src/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.tsx

@@ -1,14 +1,15 @@
 import React from "react";
-import { ALIGN, InfoBox, INFOBOX_TYPE, useDevice } from "@lookiero/aurora";
+import { ALIGN, InfoBox, INFOBOX_TYPE } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 
 const DeliveryBanner = () => {
-  const { screen } = useDevice();
+  const screenSize = useScreenSize();
 
   return (
     <InfoBox
-      contentAlign={screen.L ? ALIGN.CENTER : undefined}
+      contentAlign={screenSize === "L" ? ALIGN.CENTER : undefined}
       testID="delivery-banner"
       text={useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_DELIVERY_BANNER })}
       type={INFOBOX_TYPE.SQUARED}

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,