@lookiero/checkout 6.5.0-beta.4 → 6.5.0

package/dist/src/infrastructure/ab-testing/kameleoonEnvironment.d.ts

@@ -1,11 +1,11 @@
-interface Experiment<T extends string> {
+interface Experiment {
     readonly id: string;
-    readonly variations: Record<T, string>;
+    readonly variations: Record<string, string>;
 }
 interface KameleoonEnvironment {
     readonly siteCode: string;
     readonly experiments: {
-        readonly newFeedback: Experiment<"v1">;
+        readonly newFeedback: Experiment;
     };
 }
 export type { KameleoonEnvironment };

package/dist/src/infrastructure/ui/views/checkout/Checkout.d.ts

@@ -1,8 +1,8 @@
 import { FC, ReactNode } from "react";
-import { Layout as LocalLayout } from "@lookiero/sty-psp-ui";
+import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
 interface CheckoutProps {
     readonly children?: ReactNode;
-    readonly layout: LocalLayout;
+    readonly layout: UiLayout;
     readonly useRedirect: () => Record<string, string>;
 }
 declare const Checkout: FC<CheckoutProps>;

package/dist/src/infrastructure/ui/views/checkout/Checkout.js

@@ -23,7 +23,7 @@ import { Pricing } from "../summary/components/pricing/Pricing";
 import { style } from "./Checkout.style";
 import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
 import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
-const Checkout = ({ children, layout: LocalLayout, useRedirect }) => {
+const Checkout = ({ children, layout: UiLayout, useRedirect }) => {
     const { customer: { customerId, country, segment }, } = useStaticInfo();
     const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
     const submitButtonText = useI18nMessage({ id: I18nMessages.CHECKOUT_PAY_BUTTON });
@@ -68,7 +68,8 @@ const Checkout = ({ children, layout: LocalLayout, useRedirect }) => {
     if (!dependenciesLoaded) {
         return React.createElement(Spinner, null);
     }
-    return (React.createElement(LocalLayout, { header: React.createElement(CheckoutHeader, { onBack: handleOnBack }), scrollEnabled: false, style: {
+    return (React.createElement(UiLayout, { header: React.createElement(CheckoutHeader, { onBack: handleOnBack }), scrollEnabled: false, style: {
+            header: style.header,
             scrollView: style.scrollView,
         } },
         React.createElement(ScrollView, { showsVerticalScrollIndicator: false },

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

@@ -18,6 +18,9 @@ declare const style: {
     desktopResume: {
         borderRadius: number;
     };
+    header: {
+        height: number;
+    };
     paymentSelector: {
         marginTop: number;
     };
@@ -26,6 +29,7 @@ declare const style: {
     };
     princingWrapperSmall: {
         backgroundColor: string;
+        paddingBottom: number;
     };
     resume: any;
     scrollView: {

package/dist/src/infrastructure/ui/views/checkout/Checkout.style.js

@@ -1,6 +1,7 @@
 import { StyleSheet, Platform } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { borderRadius4, colorBgPrimaryLight, colorBgBase, space3, space4, space6, space12, space16 } = theme();
+import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
+const { borderRadius4, colorBgPrimaryLight, colorBgBase, space2, space3, space4, space6, space12, space16 } = theme();
 const style = StyleSheet.create({
     contentWrapper: {
         backgroundColor: colorBgBase,
@@ -21,6 +22,9 @@ const style = StyleSheet.create({
     desktopResume: {
         borderRadius: borderRadius4,
     },
+    header: {
+        height: HEADER_HEIGHT,
+    },
     paymentSelector: {
         marginTop: space6,
     },
@@ -29,6 +33,7 @@ const style = StyleSheet.create({
     },
     princingWrapperSmall: {
         backgroundColor: colorBgPrimaryLight,
+        paddingBottom: space2,
     },
     resume: {
         overflow: "hidden",

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.js

@@ -3,7 +3,6 @@ import { theme } from "@lookiero/sty-psp-ui";
 const { space10 } = theme();
 const style = StyleSheet.create({
     container: {
-        // justifyContent: "flex-start",
         paddingBottom: space10,
         paddingHorizontal: 0,
     },

package/dist/src/infrastructure/ui/views/return/Return.d.ts

@@ -1,7 +1,7 @@
 import { FC } from "react";
-import { Layout as LocalLayout } from "@lookiero/sty-psp-ui";
+import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
 interface ReturnProps {
-    readonly layout: LocalLayout;
+    readonly layout: UiLayout;
 }
 declare const Return: FC<ReturnProps>;
 export { Return };

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

@@ -38,7 +38,7 @@ const returnQuestionItems = {
     [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
     [ReturnQuestionType.OPTION]: RadioReturnQuestionItem,
 };
-const ReturnForm = ({ checkout, checkoutItem, country, segment, layout: LocalLayout }) => {
+const ReturnForm = ({ checkout, checkoutItem, country, segment, layout: UiLayout }) => {
     const { screen } = useDevice();
     const navigate = useNavigate();
     const logger = useLogger();
@@ -110,7 +110,7 @@ const ReturnForm = ({ checkout, checkoutItem, country, segment, layout: LocalLay
     }
     return (React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
         React.createElement(PortalHost, { name: "return-question-form-portal" }),
-        React.createElement(LocalLayout, { header: header, scrollEnabled: false, style: {
+        React.createElement(UiLayout, { header: header, scrollEnabled: false, style: {
                 safeAreaView: style.safeAreaView,
                 scrollView: style.scrollView,
             } },
@@ -125,7 +125,7 @@ const ReturnForm = ({ checkout, checkoutItem, country, segment, layout: LocalLay
                         React.createElement(View, { style: style.submit },
                             React.createElement(Button, { testID: "return-questions-button", onPress: handleOnSubmit }, submitButtonText))))))));
 };
-const Return = ({ layout: LocalLayout }) => {
+const Return = ({ layout: UiLayout }) => {
     const { id } = useParams();
     const { customer: { customerId, country, segment }, } = useStaticInfo();
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
@@ -135,6 +135,6 @@ const Return = ({ layout: LocalLayout }) => {
         return React.createElement(Spinner, null);
     }
     return (React.createElement(ReturnQuestionFeedbackProvider, { key: checkoutItem.id, feedback: checkoutItem.feedbacks || {} },
-        React.createElement(ReturnForm, { checkout: checkout, checkoutItem: checkoutItem, country: country, layout: LocalLayout, segment: segment })));
+        React.createElement(ReturnForm, { checkout: checkout, checkoutItem: checkoutItem, country: country, layout: UiLayout, segment: segment })));
 };
 export { Return };

package/dist/src/infrastructure/ui/views/summary/Summary.d.ts

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from "react";
-import { Layout as LocalLayout } from "@lookiero/sty-psp-ui";
+import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
 interface SummaryProps {
-    readonly layout: LocalLayout;
+    readonly layout: UiLayout;
     readonly children: ReactNode;
 }
 declare const Summary: FC<SummaryProps>;

package/dist/src/infrastructure/ui/views/summary/Summary.js

@@ -21,7 +21,7 @@ import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
 import { style } from "./Summary.style";
 import { CollapsiblePricing } from "./components/collapsiblePricing/CollapsiblePricing";
-const Summary = ({ layout: LocalLayout, children }) => {
+const Summary = ({ layout: UiLayout, children }) => {
     const { customer: { customerId, country, segment }, } = useStaticInfo();
     const [pricingCollapsed, setPricingCollapsed] = useState(true);
     const [pricingHeight, setPricingHeight] = useState(0);
@@ -79,7 +79,7 @@ const Summary = ({ layout: LocalLayout, children }) => {
     if (!dependenciesLoaded) {
         return React.createElement(Spinner, null);
     }
-    return (React.createElement(LocalLayout, { scrollEnabled: false, style: {
+    return (React.createElement(UiLayout, { scrollEnabled: false, style: {
             header: style.header,
             scrollView: style.scrollView,
         } },

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.5.0-beta.4";
+export declare const VERSION = "6.5.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "6.5.0-beta.4";
+export const VERSION = "6.5.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "6.5.0-beta.4",
+  "version": "6.5.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",

package/src/infrastructure/ab-testing/kameleoonEnvironment.ts

@@ -1,12 +1,12 @@
-interface Experiment<T extends string> {
+interface Experiment {
   readonly id: string;
-  readonly variations: Record<T, string>;
+  readonly variations: Record<string, string>;
 }
 
 interface KameleoonEnvironment {
   readonly siteCode: string;
   readonly experiments: {
-    readonly newFeedback: Experiment<"v1">;
+    readonly newFeedback: Experiment;
   };
 }
 

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

@@ -38,6 +38,7 @@ exports[`Header template matches the snapshot 1`] = `
           "flexDirection": "row",
           "flexGrow": 0,
           "flexWrap": "nowrap",
+          "height": 48,
           "justifyContent": "space-between",
           "overflow": "visible",
           "paddingHorizontal": 8,

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

@@ -33,181 +33,172 @@ exports[`CheckoutHeader template matches the snapshot 1`] = `
     style={
       [
         {
+          "alignItems": "center",
+          "backgroundColor": "#FFFFFF",
+          "flexDirection": "row",
+          "flexGrow": 0,
+          "flexWrap": "nowrap",
+          "height": 48,
+          "justifyContent": "space-between",
+          "overflow": "visible",
+          "paddingHorizontal": 8,
           "width": "100%",
         },
+        undefined,
       ]
     }
+    testID="checkout-header"
   >
     <View
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      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,
+            },
+          ],
           {
-            "alignItems": "center",
-            "backgroundColor": "#FFFFFF",
-            "flexDirection": "row",
-            "flexGrow": 0,
-            "flexWrap": "nowrap",
-            "justifyContent": "space-between",
-            "overflow": "visible",
-            "paddingHorizontal": 8,
-            "width": "100%",
+            "opacity": 1,
           },
-          undefined,
         ]
       }
-      testID="checkout-header"
+      testID="arrow-left-button-icon"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessibilityValue={
-          {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           [
-            [
-              {
-                "_container": {
-                  "overflow": "hidden",
-                },
-                "_pressed": {
-                  "bottom": 0,
-                  "left": 0,
-                  "right": 0,
-                  "top": 0,
-                },
-                "alignSelf": "flex-start",
-                "container": {
-                  "overflow": "hidden",
-                },
-                "height": 40,
-                "overflow": "visible",
-                "padding": 8,
-                "pressed": {
-                  "bottom": 0,
-                  "left": 0,
-                  "right": 0,
-                  "top": 0,
-                },
-                "width": 40,
-              },
-            ],
             {
-              "opacity": 1,
+              "position": "relative",
             },
           ]
         }
-        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,
+                "width": 24,
               },
             ]
           }
         >
-          <Text
-            accessibilityElementsHidden={true}
-            allowFontScaling={false}
-            importantForAccessibility="no"
-            selectable={false}
-            style={
-              [
+          
+        </Text>
+        <View
+          collapsable={false}
+          style={
+            {
+              "backgroundColor": "#F45545",
+              "borderColor": "#FFFFFF",
+              "borderRadius": 9999,
+              "borderWidth": 2,
+              "height": 10,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "transform": [
                 {
-                  "color": "#0C0A0A",
-                  "fontFamily": "auroraicons",
-                  "fontSize": 24,
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                  "height": 24,
-                  "width": 24,
+                  "scale": 0,
                 },
-              ]
-            }
-          >
-            
-          </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,
-              }
+              ],
+              "width": 10,
             }
-          />
-        </View>
+          }
+        />
       </View>
-      <Text
-        allowFontScaling={false}
-        selectable={false}
-        style={
-          [
-            {
-              "color": "#0C0A0A",
-              "fontFamily": "AreaNormal-Extrabold",
-              "fontSize": 15,
-              "letterSpacing": -0.2,
-              "lineHeight": 20,
-              "paddingBottom": 0,
-              "paddingLeft": 0,
-              "paddingRight": 0,
-              "paddingTop": 2,
-            },
-          ]
-        }
-      >
-        header.complete_checkout_title
-      </Text>
-      <View
-        style={
+    </View>
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
           {
-            "flexGrow": 0,
-            "height": 40,
-            "width": 40,
-          }
+            "color": "#0C0A0A",
+            "fontFamily": "AreaNormal-Extrabold",
+            "fontSize": 15,
+            "letterSpacing": -0.2,
+            "lineHeight": 20,
+            "paddingBottom": 0,
+            "paddingLeft": 0,
+            "paddingRight": 0,
+            "paddingTop": 2,
+          },
+        ]
+      }
+    >
+      header.complete_checkout_title
+    </Text>
+    <View
+      style={
+        {
+          "flexGrow": 0,
+          "height": 40,
+          "width": 40,
         }
-      />
-    </View>
+      }
+    />
   </View>
 </View>
 `;

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

@@ -38,6 +38,7 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
           "flexDirection": "row",
           "flexGrow": 0,
           "flexWrap": "nowrap",
+          "height": 48,
           "justifyContent": "space-between",
           "overflow": "visible",
           "paddingHorizontal": 8,
@@ -122,10 +123,11 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
                 "right": 0,
                 "top": 0,
               },
-              "alignSelf": "flex-start",
+              "alignSelf": "auto",
               "container": {
                 "overflow": "hidden",
               },
+              "height": 40,
               "overflow": "visible",
               "padding": 8,
               "pressed": {
@@ -134,6 +136,7 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
                 "right": 0,
                 "top": 0,
               },
+              "width": 40,
             },
           ],
           {

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

@@ -38,6 +38,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
           "flexDirection": "row",
           "flexGrow": 0,
           "flexWrap": "nowrap",
+          "height": 48,
           "justifyContent": "space-between",
           "overflow": "visible",
           "paddingHorizontal": 8,
@@ -92,7 +93,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
                 "right": 0,
                 "top": 0,
               },
-              "alignSelf": "flex-start",
+              "alignSelf": "auto",
               "container": {
                 "overflow": "hidden",
               },
@@ -233,7 +234,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
                 "right": 0,
                 "top": 0,
               },
-              "alignSelf": "flex-start",
+              "alignSelf": "auto",
               "container": {
                 "overflow": "hidden",
               },

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

@@ -1,7 +1,8 @@
 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, space3, space4, space6, space12, space16 } = theme();
+const { borderRadius4, colorBgPrimaryLight, colorBgBase, space2, space3, space4, space6, space12, space16 } = theme();
 
 const style = StyleSheet.create({
   contentWrapper: {
@@ -23,6 +24,9 @@ const style = StyleSheet.create({
   desktopResume: {
     borderRadius: borderRadius4,
   },
+  header: {
+    height: HEADER_HEIGHT,
+  },
   paymentSelector: {
     marginTop: space6,
   },
@@ -31,6 +35,7 @@ const style = StyleSheet.create({
   },
   princingWrapperSmall: {
     backgroundColor: colorBgPrimaryLight,
+    paddingBottom: space2,
   },
   resume: {
     overflow: "hidden",

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

@@ -2,13 +2,13 @@ import { fireEvent } from "@testing-library/react-native";
 import React from "react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { Segment } from "@lookiero/sty-psp-segment";
+import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { Country } from "../../../../projection/shared/country";
 import { checkout } from "../../../projection/checkout/checkout.mock";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { pricing } from "../../../projection/pricing/pricing.mock";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
-import { DummyLayout } from "../../components/layouts/layout/dummyLayout/DummyLayout";
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { render } from "../../test/render";

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

@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-native";
 import { Box, Button, Layout, Spinner, Text, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
-import { Layout as LocalLayout, Sticky } from "@lookiero/sty-psp-ui";
+import { Layout as UiLayout, Sticky } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
@@ -26,11 +26,11 @@ import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrum
 
 interface CheckoutProps {
   readonly children?: ReactNode;
-  readonly layout: LocalLayout;
+  readonly layout: UiLayout;
   readonly useRedirect: () => Record<string, string>;
 }
 
-const Checkout: FC<CheckoutProps> = ({ children, layout: LocalLayout, useRedirect }) => {
+const Checkout: FC<CheckoutProps> = ({ children, layout: UiLayout, useRedirect }) => {
   const {
     customer: { customerId, country, segment },
   } = useStaticInfo();
@@ -99,10 +99,11 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: LocalLayout, useRedirec
   }
 
   return (
-    <LocalLayout
+    <UiLayout
       header={<CheckoutHeader onBack={handleOnBack} />}
       scrollEnabled={false}
       style={{
+        header: style.header,
         scrollView: style.scrollView,
       }}
     >
@@ -171,7 +172,7 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: LocalLayout, useRedirec
       ) : null}
 
       {children}
-    </LocalLayout>
+    </UiLayout>
   );
 };
 

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

@@ -2,6 +2,7 @@ import { fireEvent } from "@testing-library/react-native";
 import React from "react";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { Segment } from "@lookiero/sty-psp-segment";
+import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { Country } from "../../../../projection/shared/country";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
@@ -9,7 +10,6 @@ import { checkout } from "../../../projection/checkout/checkout.mock";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { checkoutQuestions as checkoutQuestionsMock } from "../../../projection/checkoutQuestion/checkoutQuestions.mock";
 import { useListCheckoutQuestionsByCheckoutId } from "../../../projection/checkoutQuestion/react/useListCheckoutQuestionsByCheckoutId";
-import { DummyLayout } from "../../components/layouts/layout/dummyLayout/DummyLayout";
 import { I18nMessages } from "../../i18n/i18n";
 import { render } from "../../test/render";
 import { Feedback } from "./Feedback";

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

@@ -2,6 +2,7 @@ import { fireEvent, RenderAPI, waitFor, screen, within } from "@testing-library/
 import React from "react";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { Segment } from "@lookiero/sty-psp-segment";
+import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { Country } from "../../../../projection/shared/country";
 import { useBookCheckoutBookingForCheckoutItem } from "../../../domain/checkoutBooking/react/useBookCheckoutBookingForCheckoutItem";
@@ -18,7 +19,6 @@ import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../projection/chec
 import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
 import { returnQuestions as mockReturnQuestions } from "../../../projection/returnQuestion/returnQuestions.mock";
 import { useTrackItemPageView } from "../../../tracking/useTrackItemPageView";
-import { DummyLayout } from "../../components/layouts/layout/dummyLayout/DummyLayout";
 import { I18nMessages } from "../../i18n/i18n";
 import { render } from "../../test/render";
 import { Item } from "./Item";

package/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.ts

@@ -5,7 +5,6 @@ const { space10 } = theme();
 
 const style = StyleSheet.create({
   container: {
-    // justifyContent: "flex-start",
     paddingBottom: space10,
     paddingHorizontal: 0,
   },

package/src/infrastructure/ui/views/return/Return.tsx

@@ -7,7 +7,7 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
 import { Segment } from "@lookiero/sty-psp-segment";
-import { Layout as LocalLayout } from "@lookiero/sty-psp-ui";
+import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutProjection } from "../../../../projection/checkout/checkout";
 import { CheckoutItemProjection } from "../../../../projection/checkoutItem/checkoutItem";
 import { FeedbackProjection } from "../../../../projection/feedback/feedback";
@@ -56,11 +56,11 @@ interface ReturnFormProps {
   readonly checkoutItem: CheckoutItemProjection;
   readonly country: Country;
   readonly segment: Segment;
-  readonly layout: LocalLayout;
+  readonly layout: UiLayout;
   readonly checkout: CheckoutProjection;
 }
 
-const ReturnForm: FC<ReturnFormProps> = ({ checkout, checkoutItem, country, segment, layout: LocalLayout }) => {
+const ReturnForm: FC<ReturnFormProps> = ({ checkout, checkoutItem, country, segment, layout: UiLayout }) => {
   const { screen } = useDevice();
   const navigate = useNavigate();
   const logger = useLogger();
@@ -163,7 +163,7 @@ const ReturnForm: FC<ReturnFormProps> = ({ checkout, checkoutItem, country, segm
   return (
     <ReturnQuestionItemProvider returnQuestionItems={returnQuestionItems}>
       <PortalHost name="return-question-form-portal" />
-      <LocalLayout
+      <UiLayout
         header={header}
         scrollEnabled={false}
         style={{
@@ -195,16 +195,16 @@ const ReturnForm: FC<ReturnFormProps> = ({ checkout, checkoutItem, country, segm
             </Box>
           </Layout>
         </ScrollView>
-      </LocalLayout>
+      </UiLayout>
     </ReturnQuestionItemProvider>
   );
 };
 
 interface ReturnProps {
-  readonly layout: LocalLayout;
+  readonly layout: UiLayout;
 }
 
-const Return: FC<ReturnProps> = ({ layout: LocalLayout }) => {
+const Return: FC<ReturnProps> = ({ layout: UiLayout }) => {
   const { id } = useParams();
   const {
     customer: { customerId, country, segment },
@@ -223,7 +223,7 @@ const Return: FC<ReturnProps> = ({ layout: LocalLayout }) => {
         checkout={checkout}
         checkoutItem={checkoutItem}
         country={country}
-        layout={LocalLayout}
+        layout={UiLayout}
         segment={segment}
       />
     </ReturnQuestionFeedbackProvider>

package/src/infrastructure/ui/views/shared/components/productVariant/__snapshots__/ProductVariant.test.tsx.snap

@@ -63,7 +63,7 @@ exports[`ProductVariant component matches the snapshot for a non-unique size: no
     style={
       {
         "alignItems": "flex-end",
-        "borderBottomColor": "#DAD8D8",
+        "borderBottomColor": "#F8F7F7",
         "borderBottomWidth": 1,
         "flexDirection": "row",
         "justifyContent": "space-between",
@@ -306,7 +306,7 @@ exports[`ProductVariant component matches the snapshot for an unique size: uniqu
     style={
       {
         "alignItems": "flex-end",
-        "borderBottomColor": "#DAD8D8",
+        "borderBottomColor": "#F8F7F7",
         "borderBottomWidth": 1,
         "flexDirection": "row",
         "justifyContent": "space-between",

package/src/infrastructure/ui/views/summary/Summary.test.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { Text } from "react-native";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { Segment } from "@lookiero/sty-psp-segment";
+import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { Country } from "../../../../projection/shared/country";
 import { checkout } from "../../../projection/checkout/checkout.mock";
@@ -10,7 +11,6 @@ import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/c
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
 import { pricing } from "../../../projection/pricing/pricing.mock";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
-import { DummyLayout } from "../../components/layouts/layout/dummyLayout/DummyLayout";
 import { I18nMessages } from "../../i18n/i18n";
 import { render } from "../../test/render";
 import { Summary } from "./Summary";

package/src/infrastructure/ui/views/summary/Summary.tsx

@@ -4,7 +4,7 @@ import { generatePath, useMatch, useNavigate } from "react-router-native";
 import { Box, Text, Layout, useDevice, Spinner } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
-import { Layout as LocalLayout, Sticky } from "@lookiero/sty-psp-ui";
+import { Layout as UiLayout, Sticky } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
@@ -23,11 +23,11 @@ import { style } from "./Summary.style";
 import { CollapsiblePricing } from "./components/collapsiblePricing/CollapsiblePricing";
 
 interface SummaryProps {
-  readonly layout: LocalLayout;
+  readonly layout: UiLayout;
   readonly children: ReactNode;
 }
 
-const Summary: FC<SummaryProps> = ({ layout: LocalLayout, children }) => {
+const Summary: FC<SummaryProps> = ({ layout: UiLayout, children }) => {
   const {
     customer: { customerId, country, segment },
   } = useStaticInfo();
@@ -110,7 +110,7 @@ const Summary: FC<SummaryProps> = ({ layout: LocalLayout, children }) => {
   }
 
   return (
-    <LocalLayout
+    <UiLayout
       scrollEnabled={false}
       style={{
         header: style.header,
@@ -170,7 +170,7 @@ const Summary: FC<SummaryProps> = ({ layout: LocalLayout, children }) => {
           </Body>
         </Sticky>
       ) : null}
-    </LocalLayout>
+    </UiLayout>
   );
 };
 

package/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.test.tsx

@@ -4,7 +4,7 @@ import { PricingProjection } from "../../../../../../projection/pricing/pricing"
 import { pricing as pricingFunction } from "../../../../../projection/pricing/pricing.mock";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { render } from "../../../../test/render";
-import { Pricing } from "./CollapsiblePricing";
+import { CollapsiblePricing } from "./CollapsiblePricing";
 
 const mockOnPress = jest.fn();
 const mockOnSubmit = jest.fn();
@@ -25,7 +25,7 @@ const renderPricing: RenderPricingFunction = ({
   pricing = pricingFunction(),
 } = {}) =>
   render(
-    <Pricing
+    <CollapsiblePricing
       collapsed={collapsed}
       collapsible={collapsible}
       pricing={pricing}

package/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/__snapshots__/CheckoutItemsTabs.test.tsx.snap

@@ -51,10 +51,15 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
             "paddingHorizontal": 24,
           },
           false,
-          {
-            "borderBottomColor": "#DAD8D8",
-            "borderBottomWidth": 1,
-          },
+          [
+            {
+              "borderBottomColor": "#DAD8D8",
+              "borderBottomWidth": 1,
+              "justifyContent": "flex-start",
+              "paddingHorizontal": 16,
+            },
+            false,
+          ],
         ]
       }
       testID="tab-list"
@@ -109,9 +114,9 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
               {
                 "color": "#0C0A0A",
                 "fontFamily": "AreaNormal-Extrabold",
-                "fontSize": 12,
+                "fontSize": 13,
                 "letterSpacing": -0.2,
-                "lineHeight": 16,
+                "lineHeight": 17,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -173,9 +178,9 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
               {
                 "color": "#837C7C",
                 "fontFamily": "AreaNormal-Extrabold",
-                "fontSize": 12,
+                "fontSize": 13,
                 "letterSpacing": -0.2,
-                "lineHeight": 16,
+                "lineHeight": 17,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -211,7 +216,8 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
       style={
         {
           "opacity": 0,
-          "padding": 24,
+          "paddingBottom": 24,
+          "paddingHorizontal": 24,
           "paddingTop": 8,
         }
       }
@@ -342,7 +348,7 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                         style={
                           {
                             "alignItems": "flex-end",
-                            "borderBottomColor": "#DAD8D8",
+                            "borderBottomColor": "#F8F7F7",
                             "borderBottomWidth": 1,
                             "flexDirection": "row",
                             "justifyContent": "space-between",
@@ -557,7 +563,7 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                         style={
                           {
                             "alignItems": "flex-end",
-                            "borderBottomColor": "#DAD8D8",
+                            "borderBottomColor": "#F8F7F7",
                             "borderBottomWidth": 1,
                             "flexDirection": "row",
                             "justifyContent": "space-between",
@@ -821,7 +827,7 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                         style={
                           {
                             "alignItems": "flex-end",
-                            "borderBottomColor": "#DAD8D8",
+                            "borderBottomColor": "#F8F7F7",
                             "borderBottomWidth": 1,
                             "flexDirection": "row",
                             "justifyContent": "space-between",
@@ -1036,7 +1042,7 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                         style={
                           {
                             "alignItems": "flex-end",
-                            "borderBottomColor": "#DAD8D8",
+                            "borderBottomColor": "#F8F7F7",
                             "borderBottomWidth": 1,
                             "flexDirection": "row",
                             "justifyContent": "space-between",

package/dist/src/infrastructure/ui/components/layouts/layout/Layout.d.ts

@@ -1,21 +0,0 @@
-import { FC, ReactNode, RefObject } from "react";
-import { LayoutChangeEvent, ScrollView, StyleProp, ViewStyle } from "react-native";
-interface LayoutStyle {
-    readonly safeAreaView: StyleProp<ViewStyle>;
-    readonly scrollView: StyleProp<ViewStyle>;
-    readonly header: StyleProp<ViewStyle>;
-}
-interface LayoutProps {
-    readonly children: ReactNode;
-    readonly header?: JSX.Element | null;
-    readonly footer?: JSX.Element | null;
-    readonly panel?: JSX.Element | null;
-    readonly stickyHeader?: boolean;
-    readonly stickyHeaderHiddenOnScroll?: boolean;
-    readonly scrollRef?: RefObject<ScrollView>;
-    readonly scrollEnabled?: boolean;
-    readonly style?: Partial<LayoutStyle>;
-    readonly onLayout?: (event: LayoutChangeEvent) => void;
-}
-type Layout = FC<LayoutProps>;
-export type { Layout };

package/dist/src/infrastructure/ui/components/layouts/layout/Layout.js

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

package/dist/src/infrastructure/ui/components/layouts/layout/components/footer/Footer.d.ts

@@ -1,6 +0,0 @@
-import { FC, ReactNode } from "react";
-interface FooterProps {
-    readonly children: ReactNode;
-}
-declare const Footer: FC<FooterProps>;
-export { Footer };

package/dist/src/infrastructure/ui/components/layouts/layout/components/footer/Footer.js

@@ -1,4 +0,0 @@
-import React from "react";
-import { Platform } from "react-native";
-const Footer = ({ children }) => (Platform.OS !== "web" ? React.createElement(React.Fragment, null, children) : null);
-export { Footer };

package/dist/src/infrastructure/ui/components/layouts/layout/components/header/Header.d.ts

@@ -1,6 +0,0 @@
-import { FC, ReactNode } from "react";
-interface HeaderProps {
-    readonly children: ReactNode;
-}
-declare const Header: FC<HeaderProps>;
-export { Header };

package/dist/src/infrastructure/ui/components/layouts/layout/components/header/Header.js

@@ -1,5 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import { style } from "./Header.style";
-const Header = ({ children }) => React.createElement(View, { style: style.header }, children);
-export { Header };

package/dist/src/infrastructure/ui/components/layouts/layout/components/header/Header.style.d.ts

@@ -1,4 +0,0 @@
-declare const style: {
-    header: {};
-};
-export { style };

package/dist/src/infrastructure/ui/components/layouts/layout/components/header/Header.style.js

@@ -1,19 +0,0 @@
-import { Platform, StyleSheet } from "react-native";
-import { HEADER_HEIGHT } from "../../../../templates/header/Header.style";
-const style = StyleSheet.create({
-    header: {
-        ...Platform.select({
-            web: {
-                position: "sticky",
-                top: 0,
-                zIndex: 10,
-                height: HEADER_HEIGHT,
-            },
-            native: {
-                position: "relative",
-                height: HEADER_HEIGHT,
-            },
-        }),
-    },
-});
-export { style };

package/dist/src/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.d.ts

@@ -1,3 +0,0 @@
-import { Layout } from "../Layout";
-declare const DummyLayout: Layout;
-export { DummyLayout };

package/dist/src/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.js

@@ -1,18 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from "react";
-import { View } from "react-native";
-import { GestureHandlerRootView, ScrollView as RNGHScrollView } from "react-native-gesture-handler";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { Footer as DefaultFooter } from "../../../templates/footer/Footer";
-import { DefaultHeader } from "../../../templates/header/defaultHeader/DefaultHeader";
-import { Footer } from "../components/footer/Footer";
-import { Header } from "../components/header/Header";
-import { style } from "./DummyLayout.style";
-const DummyLayout = ({ children, header = React.createElement(DefaultHeader, null), footer = React.createElement(DefaultFooter, null), panel, style: customStyle, scrollEnabled, onLayout, }) => (React.createElement(SafeAreaView, { style: [style.safeAreaView, customStyle?.safeAreaView] },
-    React.createElement(GestureHandlerRootView, { style: { flex: 1 } },
-        React.createElement(RNGHScrollView, { contentContainerStyle: [style.scrollView, customStyle?.scrollView], scrollEnabled: scrollEnabled, scrollEventThrottle: 16, showsVerticalScrollIndicator: false, stickyHeaderIndices: [0] },
-            React.createElement(Header, null, header),
-            panel,
-            React.createElement(View, { style: style.children, onLayout: onLayout }, children))),
-    React.createElement(Footer, null, footer)));
-export { DummyLayout };

package/dist/src/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.style.d.ts

@@ -1,12 +0,0 @@
-declare const style: {
-    children: {
-        flex: number;
-    };
-    safeAreaView: {
-        flex: number;
-    };
-    scrollView: {
-        flexGrow: number;
-    };
-};
-export { style };

package/dist/src/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.style.js

@@ -1,13 +0,0 @@
-import { StyleSheet } from "react-native";
-const style = StyleSheet.create({
-    children: {
-        flex: 1,
-    },
-    safeAreaView: {
-        flex: 1,
-    },
-    scrollView: {
-        flexGrow: 1,
-    },
-});
-export { style };

package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.d.ts

@@ -1,6 +0,0 @@
-import { FC } from "react";
-interface DefaultHeaderProps {
-    readonly onPressMenu?: () => void;
-}
-declare const DefaultHeader: FC<DefaultHeaderProps>;
-export { DefaultHeader };

package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.js

@@ -1,11 +0,0 @@
-import React from "react";
-import { ButtonIcon } from "@lookiero/aurora";
-import { Header } from "../Header";
-import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
-import { Logo } from "../logo/Logo";
-import { style } from "./DefaultHeader.style";
-const DefaultHeader = ({ onPressMenu }) => (React.createElement(Header, { testID: "default-header" },
-    React.createElement(Logo, null),
-    React.createElement(ButtonIconPlaceholder, null),
-    React.createElement(ButtonIcon, { name: "menu", style: style.button, testID: "menu-button-icon", onPress: onPressMenu })));
-export { DefaultHeader };

package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.d.ts

@@ -1,8 +0,0 @@
-declare const style: {
-    button: {
-        alignSelf: "auto";
-        height: number;
-        width: number;
-    };
-};
-export { style };

package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.js

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

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

@@ -1,13 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-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 };