@lookiero/checkout 6.4.0 → 6.5.0-beta.0

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

@@ -1,9 +1,10 @@
 import React, { FC, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
-import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
+import { LayoutRectangle, Platform, View } from "react-native";
 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 { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
@@ -13,14 +14,14 @@ import { useTrackPageView } from "../../../tracking/useTrackPageView";
 import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
 import { useTrackPressPricing } from "../../../tracking/useTrackPressPricing";
 import { FiveItemsDiscountBanner } from "../../components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
-import { Layout as LocalLayout } from "../../components/layouts/layout/Layout";
+import { Body } from "../../components/layouts/body/Body";
+import { DefaultHeader } from "../../components/templates/header/defaultHeader/DefaultHeader";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
 import { style } from "./Summary.style";
-import { Pricing } from "./components/pricing/Pricing";
-import { StickyPricing } from "./components/stickyPricing/StickyPricing";
+import { CollapsiblePricing } from "./components/collapsiblePricing/CollapsiblePricing";
 
 interface SummaryProps {
   readonly layout: LocalLayout;
@@ -111,64 +112,60 @@ const Summary: FC<SummaryProps> = ({ layout: LocalLayout, children }) => {
 
   return (
     <LocalLayout
-      scrollEnabled={false}
+      header={<DefaultHeader />}
       style={{
-        header: style.header,
         scrollView: style.scrollView,
       }}
     >
-      <ScrollView showsVerticalScrollIndicator={false}>
-        {fiveItemsDiscount !== 0 && <FiveItemsDiscountBanner fiveItemsDiscount={fiveItemsDiscount} />}
-
-        <Layout
-          fullWidth={!screen.L}
-          style={[screen.L ? style.desktopLayoutSpacing : undefined, { paddingBottom: pricingHeight }]}
-        >
-          <Box size={{ L: "2/3" }} style={screen.L ? style.desktopListSpacing : undefined}>
-            <View style={[style.contentWrapper, screen.L ? style.desktopContentWrapper : undefined]}>
-              <View style={!screen.L ? style.mobileInfo : undefined}>
-                <Text level={3} style={style.title} heading>
-                  {titleText}
-                </Text>
-                <Text level={3} style={style.description}>
-                  {descriptionText}
-                </Text>
-              </View>
-
-              {children}
+      {fiveItemsDiscount !== 0 && <FiveItemsDiscountBanner fiveItemsDiscount={fiveItemsDiscount} />}
+
+      <Layout
+        fullWidth={!screen.L}
+        style={[screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }]}
+      >
+        <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
+          <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
+            <View style={!screen.L && style.mobileInfo}>
+              <Text level={3} style={style.title} heading>
+                {titleText}
+              </Text>
+              <Text level={3} style={style.description}>
+                {descriptionText}
+              </Text>
+            </View>
+
+            {children}
+          </View>
+        </Box>
+        {pricing && screen.L ? (
+          <Box size={{ L: "1/3" }} style={[style.resume, screen.L ? style.desktopResume : style.mobileResume]}>
+            <View style={style.princingWrapper}>
+              <CollapsiblePricing
+                collapsed={false}
+                collapsible={false}
+                pricing={pricing}
+                submitButtonText={submitButtonText}
+                totalCheckoutItemsKept={totalCheckoutItemsKept}
+                onSubmit={handleOnSubmit}
+              />
             </View>
           </Box>
-          {pricing && screen.L ? (
-            <Box size={{ L: "1/3" }} style={[style.resume, screen.L ? style.desktopResume : style.mobileResume]}>
-              <View style={style.princingWrapper}>
-                <Pricing
-                  balanceDiscount={pricing.balanceDiscount}
-                  collapsed={false}
-                  collapsible={false}
-                  discount={pricing.discount}
-                  discountPercentage={pricing.discountPercentage}
-                  pendingToPay={pricing.pendingToPay}
-                  service={pricing.service}
-                  submitButtonText={submitButtonText}
-                  subtotal={pricing.subtotal}
-                  totalCheckoutItemsKept={totalCheckoutItemsKept}
-                  onSubmit={handleOnSubmit}
-                />
-              </View>
-            </Box>
-          ) : null}
-        </Layout>
-      </ScrollView>
+        ) : null}
+      </Layout>
+
       {pricing && !screen.L ? (
-        <StickyPricing
-          collapsed={pricingCollapsed}
-          pricing={pricing}
-          submitButtonText={submitButtonText}
-          totalCheckoutItemsKept={totalCheckoutItemsKept}
-          onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}
-          onPress={handleOnPressPricing}
-          onSubmit={handleOnSubmit}
-        />
+        <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>
+          <Body>
+            <CollapsiblePricing
+              collapsed={pricingCollapsed}
+              pricing={pricing}
+              submitButtonText={submitButtonText}
+              totalCheckoutItemsKept={totalCheckoutItemsKept}
+              onPress={handleOnPressPricing}
+              onSubmit={handleOnSubmit}
+            />
+          </Body>
+        </Sticky>
       ) : null}
     </LocalLayout>
   );

package/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.style.ts

@@ -0,0 +1,24 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { space1, space3 } = theme();
+
+const style = StyleSheet.create({
+  collapsed: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  collapsedContent: {
+    flex: 1,
+    marginBottom: space1,
+  },
+  iconContainer: {
+    alignItems: "center",
+    marginBottom: space3,
+  },
+  totalCollapsed: {
+    marginBottom: space1,
+  },
+});
+
+export { style };

package/src/infrastructure/ui/views/summary/components/{pricing/Pricing.test.tsx → 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 "./Pricing";
+import { Pricing } from "./CollapsiblePricing";
 
 const mockOnPress = jest.fn();
 const mockOnSubmit = jest.fn();
@@ -26,15 +26,10 @@ const renderPricing: RenderPricingFunction = ({
 } = {}) =>
   render(
     <Pricing
-      balanceDiscount={pricing.balanceDiscount}
       collapsed={collapsed}
       collapsible={collapsible}
-      discount={pricing.discount}
-      discountPercentage={pricing.discountPercentage}
-      pendingToPay={pricing.pendingToPay}
-      service={pricing.service}
+      pricing={pricing}
       submitButtonText={I18nMessages.SUMMARY_SUBMIT_BUTTON}
-      subtotal={pricing.subtotal}
       totalCheckoutItemsKept={3}
       onPress={mockOnPress}
       onSubmit={mockOnSubmit}

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

@@ -0,0 +1,81 @@
+import { animated, useSpring } from "@react-spring/native";
+import React, { FC } from "react";
+import { Pressable, View } from "react-native";
+import { Button, Icon, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { PricingProjection } from "../../../../../../projection/pricing/pricing";
+import { Price } from "../../../../components/atoms/price/Price";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { Pricing } from "../pricing/Pricing";
+import { style } from "./CollapsiblePricing.style";
+
+interface CollapsiblePricingProps {
+  readonly pricing: PricingProjection;
+  readonly totalCheckoutItemsKept: number;
+  readonly collapsible?: boolean;
+  readonly collapsed?: boolean;
+  readonly submitButtonText: string;
+  readonly onPress?: () => void;
+  readonly onSubmit: () => void;
+}
+const CollapsiblePricing: FC<CollapsiblePricingProps> = ({
+  pricing,
+  totalCheckoutItemsKept,
+  collapsible = true,
+  collapsed = false,
+  submitButtonText,
+  onPress = () => void 0,
+  onSubmit,
+}) => {
+  const { pendingToPay } = pricing;
+
+  const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL });
+  const totalCheckoutItemsKeptText = useI18nMessage({
+    id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
+    values: { items: totalCheckoutItemsKept.toString() },
+  });
+
+  const collapsedStyle = useSpring({ opacitiy: collapsed ? 1 : 0 });
+  const notCollapsedStyle = useSpring({ opacitiy: collapsed ? 0 : 1 });
+
+  return (
+    <>
+      {collapsible && (
+        <Pressable style={style.iconContainer} testID="pricing-collapsed" onPress={onPress}>
+          {collapsed ? (
+            <Icon name="arrow_up_small" testID="arrow-up" />
+          ) : (
+            <Icon name="arrow_down_small" testID="arrow-down" />
+          )}
+        </Pressable>
+      )}
+
+      {collapsed && collapsible ? (
+        <animated.View style={[style.collapsed, { opacity: collapsedStyle.opacitiy }]}>
+          <View style={style.collapsedContent}>
+            <Text level={1} style={style.totalCollapsed} detail>
+              {totalText} {totalCheckoutItemsKeptText}
+            </Text>
+            <Price price={pendingToPay} variant="detail" />
+          </View>
+
+          <View style={style.collapsedContent}>
+            <Button testID="confirm-checkout-collpased-button" small onPress={onSubmit}>
+              {submitButtonText}
+            </Button>
+          </View>
+        </animated.View>
+      ) : (
+        <animated.View style={{ opacity: notCollapsedStyle.opacitiy }}>
+          <Pricing pricing={pricing} totalCheckoutItemsKept={totalCheckoutItemsKept} />
+
+          <Button testID="confirm-checkout-button" onPress={onSubmit}>
+            {submitButtonText}
+          </Button>
+        </animated.View>
+      )}
+    </>
+  );
+};
+
+export { CollapsiblePricing };

package/src/infrastructure/ui/views/summary/components/pricing/Pricing.style.ts

@@ -1,34 +1,19 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorBgPrimary, space1, space3, space4 } = theme();
+const { space4, colorBgPrimary } = theme();
 
 const style = StyleSheet.create({
-  collapsed: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-  },
-  collapsedContent: {
-    flex: 1,
-    marginBottom: space1,
-  },
   divider: {
     backgroundColor: colorBgPrimary,
     height: 1,
     marginBottom: space4,
   },
-  iconContainer: {
-    alignItems: "center",
-    marginBottom: space3,
-  },
   row: {
     flexDirection: "row",
     justifyContent: "space-between",
     marginBottom: space4,
   },
-  totalCollapsed: {
-    marginBottom: space1,
-  },
 });
 
 export { style };

package/src/infrastructure/ui/views/summary/components/pricing/Pricing.tsx

@@ -1,10 +1,8 @@
-import { animated, useSpring } from "@react-spring/native";
 import React, { FC, ReactNode } from "react";
-import { Pressable, View } from "react-native";
-import { Button, Icon, Text } from "@lookiero/aurora";
+import { View } from "react-native";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { ServiceProjection } from "../../../../../../projection/pricing/pricing";
-import { PriceProjection } from "../../../../../../projection/shared/price";
+import { PricingProjection } from "../../../../../../projection/pricing/pricing";
 import { Price } from "../../../../components/atoms/price/Price";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./Pricing.style";
@@ -25,35 +23,13 @@ const Row: FC<RowProps> = ({ action = false, text, level = 3, children }) => (
 );
 
 interface PricingProps {
-  readonly pendingToPay: PriceProjection;
-  readonly subtotal: PriceProjection;
-  readonly balanceDiscount?: PriceProjection;
-  readonly discount?: PriceProjection;
-  readonly discountPercentage?: number;
+  readonly pricing: PricingProjection;
   readonly totalCheckoutItemsKept: number;
-  readonly service: ServiceProjection;
-  readonly collapsible?: boolean;
-  readonly collapsed?: boolean;
-  readonly busy?: boolean;
-  readonly submitButtonText: string;
-  readonly onPress?: () => void;
-  readonly onSubmit: () => void;
 }
-const Pricing: FC<PricingProps> = ({
-  pendingToPay,
-  subtotal,
-  balanceDiscount,
-  discount,
-  discountPercentage = 0,
-  totalCheckoutItemsKept,
-  service,
-  collapsible = true,
-  collapsed = false,
-  busy = false,
-  submitButtonText,
-  onPress = () => void 0,
-  onSubmit,
-}) => {
+
+const Pricing: FC<PricingProps> = ({ pricing, totalCheckoutItemsKept }) => {
+  const { pendingToPay, subtotal, balanceDiscount, discount, discountPercentage = 0, service } = pricing;
+
   const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL });
   const totalCheckoutItemsKeptText = useI18nMessage({
     id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
@@ -68,74 +44,38 @@ const Pricing: FC<PricingProps> = ({
   const creditText = useI18nMessage({ id: I18nMessages.SUMMARY_CREDIT });
   const feeText = useI18nMessage({ id: I18nMessages.SUMMARY_FEE });
 
-  const collapsedStyle = useSpring({ opacitiy: collapsed ? 1 : 0 });
-  const notCollapsedStyle = useSpring({ opacitiy: collapsed ? 0 : 1 });
-
   return (
-    <>
-      {collapsible && (
-        <Pressable style={style.iconContainer} testID="pricing-collapsed" onPress={onPress}>
-          {collapsed ? (
-            <Icon name="arrow_up_small" testID="arrow-up" />
-          ) : (
-            <Icon name="arrow_down_small" testID="arrow-down" />
-          )}
-        </Pressable>
-      )}
-
-      {collapsed && collapsible ? (
-        <animated.View style={[style.collapsed, { opacity: collapsedStyle.opacitiy }]}>
-          <View style={style.collapsedContent}>
-            <Text level={1} style={style.totalCollapsed} detail>
-              {totalText} {totalCheckoutItemsKeptText}
-            </Text>
-            <Price price={pendingToPay} variant="detail" />
-          </View>
+    <View>
+      <Row text={`${subtotalText} ${totalCheckoutItemsKeptText}`}>
+        <Price price={subtotal} variant="subtotal" />
+      </Row>
 
-          <View style={style.collapsedContent}>
-            <Button busy={busy} testID="confirm-checkout-collpased-button" small onPress={onSubmit}>
-              {submitButtonText}
-            </Button>
-          </View>
-        </animated.View>
-      ) : (
-        <animated.View style={{ opacity: notCollapsedStyle.opacitiy }}>
-          <Row text={`${subtotalText} ${totalCheckoutItemsKeptText}`}>
-            <Price price={subtotal} variant="subtotal" />
-          </Row>
-
-          {discount && discount.amount !== 0 && (
-            <Row text={discountText}>
-              <Price price={discount} variant="subtotal" />
-            </Row>
-          )}
-
-          {balanceDiscount && balanceDiscount.amount !== 0 && (
-            <Row text={creditText}>
-              <Price price={balanceDiscount} variant="subtotal" />
-            </Row>
-          )}
+      {discount && discount.amount !== 0 && (
+        <Row text={discountText}>
+          <Price price={discount} variant="subtotal" />
+        </Row>
+      )}
 
-          <Row text={feeText}>
-            {service.paidWithPromocode ? (
-              <Text level={3}>{freeText}</Text>
-            ) : (
-              <Price price={service.finalPrice} variant="subtotal" />
-            )}
-          </Row>
+      {balanceDiscount && balanceDiscount.amount !== 0 && (
+        <Row text={creditText}>
+          <Price price={balanceDiscount} variant="subtotal" />
+        </Row>
+      )}
 
-          <View style={style.divider} />
+      <Row text={feeText}>
+        {service.paidWithPromocode ? (
+          <Text level={3}>{freeText}</Text>
+        ) : (
+          <Price price={service.finalPrice} variant="subtotal" />
+        )}
+      </Row>
 
-          <Row level={2} text={totalText} action>
-            <Price price={pendingToPay} variant="total" />
-          </Row>
+      <View style={style.divider} />
 
-          <Button busy={busy} testID="confirm-checkout-button" onPress={onSubmit}>
-            {submitButtonText}
-          </Button>
-        </animated.View>
-      )}
-    </>
+      <Row level={2} text={totalText} action>
+        <Price price={pendingToPay} variant="total" />
+      </Row>
+    </View>
   );
 };
 

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

@@ -1,23 +1,32 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space2, space4, space6, colorBorderInput, fontDetailSize2, fontDetailHeight2 } = theme();
+const { space2, space4, space6, colorBorderInput, fontDetailSize1, fontDetailHeight1 } = theme();
 
 const style = StyleSheet.create({
   carousel: {
-    padding: space6,
+    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: fontDetailSize2,
-    lineHeight: fontDetailHeight2,
+    fontSize: fontDetailSize1,
+    lineHeight: fontDetailHeight1,
   },
 });
 

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

@@ -1,6 +1,6 @@
 import React, { FC, useCallback, useMemo } from "react";
 import { View } from "react-native";
-import { Text } from "@lookiero/aurora";
+import { Text, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { RenderItemFunction, Tabs } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
@@ -64,6 +64,7 @@ const CheckoutItemsTabs: FC<CheckoutItemsTabsProps> = ({
   onPressItem,
   onChanged,
 }) => {
+  const { screen } = useDevice();
   const keepTabText = useI18nMessage({ id: I18nMessages.SUMMARY_KEEP_TAB });
   const returnTabText = useI18nMessage({ id: I18nMessages.SUMMARY_RETURN_TAB });
 
@@ -121,8 +122,11 @@ const CheckoutItemsTabs: FC<CheckoutItemsTabsProps> = ({
     <Tabs
       data={data}
       defaultIndex={tabIndex}
-      style={{ carousel: style.carousel, tabList: { tabList: style.tabList, tab: { tabText: style.tabText } } }}
       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 } },
+      }}
       onChanged={onChanged}
     >
       {renderItem}

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

@@ -1,25 +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/src/infrastructure/ui/components/layouts/layout/components/footer/Footer.test.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-import { Text } from "react-native";
-import { render } from "../../../../../test/render";
-import { Footer } from "./Footer";
-
-describe("Footer component", () => {
-  it("matches the snapshot", () => {
-    const { toJSON } = render(
-      <Footer>
-        <Text>Footer content</Text>
-      </Footer>,
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it("renders correctly", () => {
-    const { getByText } = render(
-      <Footer>
-        <Text>Footer content</Text>
-      </Footer>,
-    );
-
-    expect(getByText("Footer content")).toBeTruthy();
-  });
-
-  it("renders correctly web", () => {
-    jest.doMock("react-native/Libraries/Utilities/Platform", () => ({
-      OS: "web",
-    }));
-
-    const { queryByText } = render(
-      <Footer>
-        <Text>Footer content</Text>
-      </Footer>,
-    );
-
-    expect(queryByText("Footer content")).not.toBeTruthy();
-  });
-});

package/src/infrastructure/ui/components/layouts/layout/components/footer/Footer.tsx

@@ -1,9 +0,0 @@
-import React, { FC, ReactNode } from "react";
-import { Platform } from "react-native";
-
-interface FooterProps {
-  readonly children: ReactNode;
-}
-const Footer: FC<FooterProps> = ({ children }) => (Platform.OS !== "web" ? <>{children}</> : null);
-
-export { Footer };

package/src/infrastructure/ui/components/layouts/layout/components/footer/__snapshots__/Footer.test.tsx.snap

@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Footer component matches the snapshot 1`] = `
-<View
-  style={
-    [
-      {
-        "backgroundColor": "#FFFFFF",
-        "flex": 1,
-      },
-    ]
-  }
->
-  <View
-    style={
-      [
-        {
-          "alignSelf": "center",
-          "left": 0,
-          "marginHorizontal": "auto",
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-          "width": "100%",
-          "zIndex": 5,
-        },
-      ]
-    }
-  >
-    <RCTSafeAreaView />
-  </View>
-  <Text>
-    Footer content
-  </Text>
-</View>
-`;

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

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