@lookiero/checkout 9.14.0 → 10.0.0-beta.0

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

@@ -16,9 +16,8 @@ import { useTrackPressPricing } from "../../../tracking/useTrackPressPricing";
 import { FiveItemsDiscountBanner } from "../../components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
 import { Body } from "../../components/layouts/body/Body";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
-import { DOMAIN, I18nMessages } from "../../i18n/i18n";
+import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
-import { useBasePath } from "../../routing/useBasePath";
 import { style } from "./Summary.style";
 import { CollapsiblePricing } from "./components/collapsiblePricing/CollapsiblePricing";
 
@@ -33,9 +32,9 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
   } = useStaticInfo();
   const [pricingCollapsed, setPricingCollapsed] = useState(true);
   const [pricingHeight, setPricingHeight] = useState(0);
-  const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TITLE });
-  const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_DESCRIPTION });
-  const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_SUBMIT_BUTTON });
+  const titleText = useI18nMessage({ id: I18nMessages.SUMMARY_TITLE });
+  const descriptionText = useI18nMessage({ id: I18nMessages.SUMMARY_DESCRIPTION });
+  const submitButtonText = useI18nMessage({ id: I18nMessages.SUMMARY_SUBMIT_BUTTON });
   const { screen } = useDevice();
 
   const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
@@ -43,7 +42,7 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
   const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
 
   const navigate = useNavigate();
-  const basePath = useBasePath();
+  const { basePath } = useStaticInfo();
 
   const match = useMatch(`${basePath}/${Routes.SUMMARY}/${Routes.SUMMARY_TABS}`);
   const tab = match?.params.tab;

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

@@ -5,7 +5,7 @@ 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 { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { Pricing } from "../pricing/Pricing";
 import { style } from "./CollapsiblePricing.style";
 
@@ -29,9 +29,8 @@ const CollapsiblePricing: FC<CollapsiblePricingProps> = ({
 }) => {
   const { pendingToPay } = pricing;
 
-  const totalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TOTAL });
+  const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL });
   const totalCheckoutItemsKeptText = useI18nMessage({
-    domain: DOMAIN,
     id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
     values: { items: totalCheckoutItemsKept.toString() },
   });

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

@@ -130,7 +130,7 @@ exports[`Pricing component matches the snapshot for collaped pricing: collapsed
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
-              "paddingTop": 0,
+              "paddingTop": 4,
             },
           ]
         }
@@ -224,12 +224,19 @@ exports[`Pricing component matches the snapshot for collaped pricing: collapsed
                   "right": 0,
                   "top": 0,
                 },
+                "alignContent": "center",
                 "alignSelf": "flex-start",
+                "backgroundColor": "#0C0A0A",
+                "borderRadius": 9999,
                 "container": {
                   "overflow": "hidden",
                 },
                 "height": 48,
+                "justifyContent": "center",
                 "overflow": "hidden",
+                "paddingLeft": 24,
+                "paddingRight": 24,
+                "position": "relative",
                 "pressed": {
                   "bottom": 0,
                   "left": 0,
@@ -246,98 +253,55 @@ exports[`Pricing component matches the snapshot for collaped pricing: collapsed
         }
         testID="submit-checkout-collpased-button"
       >
-        <ViewManagerAdapter_ExpoLinearGradient
-          colors={
-            [
-              4278979082,
-              4278979082,
-            ]
-          }
-          endPoint={
-            [
-              1,
-              0,
-            ]
-          }
-          startPoint={
-            [
-              0,
-              1,
-            ]
+        <View
+          collapsable={false}
+          pointerEvents="none"
+          style={
+            {
+              "backgroundColor": "#716A6B",
+              "height": 48,
+              "left": 0,
+              "opacity": 0.7,
+              "position": "absolute",
+              "top": 0,
+              "width": "0%",
+            }
           }
+        />
+        <View
           style={
             [
               {
-                "alignContent": "center",
-                "height": 64,
+                "alignItems": "center",
+                "flexDirection": "row",
                 "justifyContent": "center",
-                "overflow": "hidden",
-                "paddingLeft": 24,
-                "paddingRight": 24,
-                "position": "relative",
-              },
-              {},
-              undefined,
-              {
-                "height": 48,
-              },
-              false,
-              {
-                "borderRadius": 9999,
               },
             ]
           }
         >
-          <View
-            collapsable={false}
-            pointerEvents="none"
-            style={
-              {
-                "backgroundColor": "#716A6B",
-                "height": 48,
-                "left": 0,
-                "opacity": 0.7,
-                "position": "absolute",
-                "top": 0,
-                "width": "0%",
-              }
-            }
-          />
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
               [
                 {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
+                  "color": "#FFFFFF",
+                  "fontFamily": "AreaNormal-Extrabold",
+                  "fontSize": 15,
+                  "letterSpacing": -0.2,
+                  "lineHeight": 20,
+                  "paddingBottom": 0,
+                  "paddingLeft": 0,
+                  "paddingRight": 0,
+                  "paddingTop": 2,
+                  "textAlign": "center",
                 },
               ]
             }
           >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontFamily": "AreaNormal-Extrabold",
-                    "fontSize": 15,
-                    "letterSpacing": -0.2,
-                    "lineHeight": 20,
-                    "paddingBottom": 0,
-                    "paddingLeft": 0,
-                    "paddingRight": 0,
-                    "paddingTop": 0,
-                    "textAlign": "center",
-                  },
-                ]
-              }
-            >
-              summary.submit_button
-            </Text>
-          </View>
-        </ViewManagerAdapter_ExpoLinearGradient>
+            summary.submit_button
+          </Text>
+        </View>
       </View>
     </View>
   </View>
@@ -474,7 +438,7 @@ exports[`Pricing component matches the snapshot for non-collaped pricing: non-co
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
-              "paddingTop": 0,
+              "paddingTop": 4,
             },
           ]
         }
@@ -568,12 +532,19 @@ exports[`Pricing component matches the snapshot for non-collaped pricing: non-co
                   "right": 0,
                   "top": 0,
                 },
+                "alignContent": "center",
                 "alignSelf": "flex-start",
+                "backgroundColor": "#0C0A0A",
+                "borderRadius": 9999,
                 "container": {
                   "overflow": "hidden",
                 },
                 "height": 48,
+                "justifyContent": "center",
                 "overflow": "hidden",
+                "paddingLeft": 24,
+                "paddingRight": 24,
+                "position": "relative",
                 "pressed": {
                   "bottom": 0,
                   "left": 0,
@@ -590,98 +561,55 @@ exports[`Pricing component matches the snapshot for non-collaped pricing: non-co
         }
         testID="submit-checkout-collpased-button"
       >
-        <ViewManagerAdapter_ExpoLinearGradient
-          colors={
-            [
-              4278979082,
-              4278979082,
-            ]
-          }
-          endPoint={
-            [
-              1,
-              0,
-            ]
-          }
-          startPoint={
-            [
-              0,
-              1,
-            ]
+        <View
+          collapsable={false}
+          pointerEvents="none"
+          style={
+            {
+              "backgroundColor": "#716A6B",
+              "height": 48,
+              "left": 0,
+              "opacity": 0.7,
+              "position": "absolute",
+              "top": 0,
+              "width": "0%",
+            }
           }
+        />
+        <View
           style={
             [
               {
-                "alignContent": "center",
-                "height": 64,
+                "alignItems": "center",
+                "flexDirection": "row",
                 "justifyContent": "center",
-                "overflow": "hidden",
-                "paddingLeft": 24,
-                "paddingRight": 24,
-                "position": "relative",
-              },
-              {},
-              undefined,
-              {
-                "height": 48,
-              },
-              false,
-              {
-                "borderRadius": 9999,
               },
             ]
           }
         >
-          <View
-            collapsable={false}
-            pointerEvents="none"
-            style={
-              {
-                "backgroundColor": "#716A6B",
-                "height": 48,
-                "left": 0,
-                "opacity": 0.7,
-                "position": "absolute",
-                "top": 0,
-                "width": "0%",
-              }
-            }
-          />
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
               [
                 {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
+                  "color": "#FFFFFF",
+                  "fontFamily": "AreaNormal-Extrabold",
+                  "fontSize": 15,
+                  "letterSpacing": -0.2,
+                  "lineHeight": 20,
+                  "paddingBottom": 0,
+                  "paddingLeft": 0,
+                  "paddingRight": 0,
+                  "paddingTop": 2,
+                  "textAlign": "center",
                 },
               ]
             }
           >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontFamily": "AreaNormal-Extrabold",
-                    "fontSize": 15,
-                    "letterSpacing": -0.2,
-                    "lineHeight": 20,
-                    "paddingBottom": 0,
-                    "paddingLeft": 0,
-                    "paddingRight": 0,
-                    "paddingTop": 0,
-                    "textAlign": "center",
-                  },
-                ]
-              }
-            >
-              summary.submit_button
-            </Text>
-          </View>
-        </ViewManagerAdapter_ExpoLinearGradient>
+            summary.submit_button
+          </Text>
+        </View>
       </View>
     </View>
   </View>

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

@@ -4,7 +4,7 @@ import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { PricingProjection } from "../../../../../../projection/pricing/pricing";
 import { Price } from "../../../../components/atoms/price/Price";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./Pricing.style";
 
 interface RowProps {
@@ -30,21 +30,19 @@ interface PricingProps {
 const Pricing: FC<PricingProps> = ({ pricing, totalCheckoutItemsKept }) => {
   const { pendingToPay, subtotal, balanceDiscount, discount, discountPercentage = 0, service } = pricing;
 
-  const totalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TOTAL });
+  const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL });
   const totalCheckoutItemsKeptText = useI18nMessage({
-    domain: DOMAIN,
     id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
     values: { items: totalCheckoutItemsKept.toString() },
   });
-  const subtotalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_SUBTOTAL });
-  const freeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_FREE });
+  const subtotalText = useI18nMessage({ id: I18nMessages.SUMMARY_SUBTOTAL });
+  const freeText = useI18nMessage({ id: I18nMessages.SUMMARY_FREE });
   const discountText = useI18nMessage({
-    domain: DOMAIN,
     id: I18nMessages.SUMMARY_DISCOUNT,
     values: { discount: discountPercentage?.toString() },
   });
-  const creditText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_CREDIT });
-  const feeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_FEE });
+  const creditText = useI18nMessage({ id: I18nMessages.SUMMARY_CREDIT });
+  const feeText = useI18nMessage({ id: I18nMessages.SUMMARY_FEE });
 
   return (
     <View>

package/src/infrastructure/ui/views/summaryTabs/SummaryTabs.tsx

@@ -10,7 +10,6 @@ import { useTrackPressItem } from "../../../tracking/useTrackPressItem";
 import { useTrackTabView } from "../../../tracking/useTrackTabView";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { Routes } from "../../routing/routes";
-import { useBasePath } from "../../routing/useBasePath";
 import { CheckoutItemsTabs } from "./components/checkoutItemsTabs/CheckoutItemsTabs";
 
 type Tab = "keep" | "return";
@@ -24,6 +23,7 @@ const SummaryTabs: FC = () => {
   const { tab } = useParams();
   const {
     customer: { customerId, country, segment },
+    basePath,
   } = useStaticInfo();
 
   const tabIndex = useMemo(() => TAB_INDEX[tab as Tab] || 0, [tab]);
@@ -31,7 +31,6 @@ const SummaryTabs: FC = () => {
   const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
 
   const navigate = useNavigate();
-  const basePath = useBasePath();
 
   useTrackPageView({
     page: TrackingPage.SUMMARY,

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

@@ -10,7 +10,7 @@ import {
   CheckoutItemProjection,
 } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { PriceProjection } from "../../../../../../projection/price/price";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { ProductVariant, ProductVariantStyle } from "../../../shared/components/productVariant/ProductVariant";
 import { style } from "./CheckoutItemsTabs.style";
 
@@ -65,11 +65,11 @@ const CheckoutItemsTabs: FC<CheckoutItemsTabsProps> = ({
   onChanged,
 }) => {
   const { screen } = useDevice();
-  const keepTabText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_KEEP_TAB });
-  const returnTabText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_RETURN_TAB });
+  const keepTabText = useI18nMessage({ id: I18nMessages.SUMMARY_KEEP_TAB });
+  const returnTabText = useI18nMessage({ id: I18nMessages.SUMMARY_RETURN_TAB });
 
-  const keepEmptyText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_KEEP_EMPTY });
-  const returnEmptyText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_RETURN_EMPTY });
+  const keepEmptyText = useI18nMessage({ id: I18nMessages.SUMMARY_KEEP_EMPTY });
+  const returnEmptyText = useI18nMessage({ id: I18nMessages.SUMMARY_RETURN_EMPTY });
 
   const handleOnPressItem = useCallback((checkoutItemId: string) => onPressItem(checkoutItemId), [onPressItem]);
 

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

@@ -120,7 +120,7 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
-                "paddingTop": 0,
+                "paddingTop": 2,
               },
             ]
           }
@@ -184,7 +184,7 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
-                "paddingTop": 0,
+                "paddingTop": 2,
               },
             ]
           }
@@ -428,20 +428,20 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                                   }
                                 }
                               >
-                                <ViewManagerAdapter_ExpoLinearGradient
+                                <View
                                   colors={
                                     [
-                                      16777215,
-                                      4292532440,
-                                      4292532440,
-                                      16777215,
+                                      "rgba(255, 255, 255, 0)",
+                                      "#DAD8D8",
+                                      "#DAD8D8",
+                                      "rgba(255, 255, 255, 0)",
                                     ]
                                   }
-                                  endPoint={
-                                    [
-                                      1,
-                                      0,
-                                    ]
+                                  end={
+                                    {
+                                      "x": 1,
+                                      "y": 0,
+                                    }
                                   }
                                   locations={
                                     [
@@ -451,11 +451,11 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                                       1,
                                     ]
                                   }
-                                  startPoint={
-                                    [
-                                      0,
-                                      0,
-                                    ]
+                                  start={
+                                    {
+                                      "x": 0,
+                                      "y": 0,
+                                    }
                                   }
                                   style={
                                     {
@@ -750,20 +750,20 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                                   }
                                 }
                               >
-                                <ViewManagerAdapter_ExpoLinearGradient
+                                <View
                                   colors={
                                     [
-                                      16777215,
-                                      4292532440,
-                                      4292532440,
-                                      16777215,
+                                      "rgba(255, 255, 255, 0)",
+                                      "#DAD8D8",
+                                      "#DAD8D8",
+                                      "rgba(255, 255, 255, 0)",
                                     ]
                                   }
-                                  endPoint={
-                                    [
-                                      1,
-                                      0,
-                                    ]
+                                  end={
+                                    {
+                                      "x": 1,
+                                      "y": 0,
+                                    }
                                   }
                                   locations={
                                     [
@@ -773,11 +773,11 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                                       1,
                                     ]
                                   }
-                                  startPoint={
-                                    [
-                                      0,
-                                      0,
-                                    ]
+                                  start={
+                                    {
+                                      "x": 0,
+                                      "y": 0,
+                                    }
                                   }
                                   style={
                                     {
@@ -1122,20 +1122,20 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                                   }
                                 }
                               >
-                                <ViewManagerAdapter_ExpoLinearGradient
+                                <View
                                   colors={
                                     [
-                                      16777215,
-                                      4292532440,
-                                      4292532440,
-                                      16777215,
+                                      "rgba(255, 255, 255, 0)",
+                                      "#DAD8D8",
+                                      "#DAD8D8",
+                                      "rgba(255, 255, 255, 0)",
                                     ]
                                   }
-                                  endPoint={
-                                    [
-                                      1,
-                                      0,
-                                    ]
+                                  end={
+                                    {
+                                      "x": 1,
+                                      "y": 0,
+                                    }
                                   }
                                   locations={
                                     [
@@ -1145,11 +1145,11 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                                       1,
                                     ]
                                   }
-                                  startPoint={
-                                    [
-                                      0,
-                                      0,
-                                    ]
+                                  start={
+                                    {
+                                      "x": 0,
+                                      "y": 0,
+                                    }
                                   }
                                   style={
                                     {
@@ -1444,20 +1444,20 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                                   }
                                 }
                               >
-                                <ViewManagerAdapter_ExpoLinearGradient
+                                <View
                                   colors={
                                     [
-                                      16777215,
-                                      4292532440,
-                                      4292532440,
-                                      16777215,
+                                      "rgba(255, 255, 255, 0)",
+                                      "#DAD8D8",
+                                      "#DAD8D8",
+                                      "rgba(255, 255, 255, 0)",
                                     ]
                                   }
-                                  endPoint={
-                                    [
-                                      1,
-                                      0,
-                                    ]
+                                  end={
+                                    {
+                                      "x": 1,
+                                      "y": 0,
+                                    }
                                   }
                                   locations={
                                     [
@@ -1467,11 +1467,11 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                                       1,
                                     ]
                                   }
-                                  startPoint={
-                                    [
-                                      0,
-                                      0,
-                                    ]
+                                  start={
+                                    {
+                                      "x": 0,
+                                      "y": 0,
+                                    }
                                   }
                                   style={
                                     {