@lookiero/checkout 6.4.0 → 6.5.0-beta.1

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

@@ -1,27 +1,26 @@
 import React, { FC } from "react";
-import { Box, ButtonIcon, Text } from "@lookiero/aurora";
+import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
-import style from "./CheckoutHeader.style";
+import { style } from "./CheckoutHeader.style";
 
 interface CheckoutHeaderProps {
   readonly onBack?: () => void;
 }
+
 const CheckoutHeader: FC<CheckoutHeaderProps> = ({ onBack }) => {
   const title = useI18nMessage({ id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
 
   return (
-    <Box>
-      <Header testID="checkout-header">
-        <ButtonIcon name="arrow_left" style={style.button} testID="arrow-left-button-icon" onPress={onBack} />
-        <Text level={3} action>
-          {title}
-        </Text>
-        <ButtonIconPlaceholder />
-      </Header>
-    </Box>
+    <Header testID="checkout-header">
+      <ButtonIcon name="arrow_left" style={style.button} testID="arrow-left-button-icon" onPress={onBack} />
+      <Text level={3} action>
+        {title}
+      </Text>
+      <ButtonIconPlaceholder />
+    </Header>
   );
 };
 

package/src/infrastructure/ui/{views/summary/components/stickyPricing/StickyPricing.style.ts → components/templates/header/itemDetailHeader/ItemDetailHeader.style.ts}

@@ -1,12 +1,13 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space3, space4 } = theme();
+const { space10 } = theme();
 
 const style = StyleSheet.create({
-  sticky: {
-    paddingBottom: space4,
-    paddingTop: space3,
+  button: {
+    alignSelf: "auto",
+    height: space10,
+    width: space10,
   },
 });
 

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

@@ -4,6 +4,7 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
+import { style } from "./ItemDetailHeader.style";
 
 interface ItemDetailHeaderProps {
   readonly onBack: () => void;
@@ -17,7 +18,7 @@ const ItemDetailHeader: FC<ItemDetailHeaderProps> = ({ onBack }) => {
       <Text level={3} action>
         {title}
       </Text>
-      <ButtonIcon name="close" testID="close-button-icon" onPress={onBack} />
+      <ButtonIcon name="close" style={style.button} testID="close-button-icon" onPress={onBack} />
     </Header>
   );
 };

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

@@ -5,6 +5,7 @@ const { space10 } = theme();
 
 const style = StyleSheet.create({
   button: {
+    alignSelf: "auto",
     height: space10,
     width: space10,
   },

package/src/infrastructure/ui/routing/Routing.tsx

@@ -3,11 +3,11 @@ import { Navigate, Outlet, useRoutes as reactRouterUseRoutes } from "react-route
 import { Spinner } from "@lookiero/aurora";
 import { I18n } from "@lookiero/i18n-react";
 import { Kameleoon } from "@lookiero/sty-psp-ab-testing";
+import { Layout } from "@lookiero/sty-psp-ui";
 import { Customer } from "../../../projection/shared/customer";
 import { Order } from "../../../projection/shared/order";
 import { Subscription } from "../../../projection/shared/subscription";
 import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
-import { Layout } from "../components/layouts/layout/Layout";
 import { NewFeedbackExperimentProvider } from "../hooks/useNewFeedbackExperiment";
 import { StaticInfoProvider } from "../hooks/useStaticInfo";
 import { App } from "../views/App";

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

@@ -1,20 +1,18 @@
 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, space4, space6, space8, space12, space16 } = theme();
+const { borderRadius4, colorBgPrimaryLight, colorBgBase, space4, space6, space12, space16, space24 } = theme();
 
 const style = StyleSheet.create({
   contentWrapper: {
     backgroundColor: colorBgBase,
     flexGrow: 0,
-    padding: space6,
-  },
-  deliveryBannerContainer: {
-    marginBottom: space6,
+    paddingHorizontal: space6,
+    paddingVertical: space6,
   },
   desktopContentWrapper: {
     borderRadius: borderRadius4,
+    paddingVertical: space12,
   },
   desktopLayoutSpacing: {
     paddingVertical: space12,
@@ -25,20 +23,8 @@ const style = StyleSheet.create({
   desktopResume: {
     borderRadius: borderRadius4,
   },
-  header: {
-    backgroundColor: colorBgBase,
-    height: HEADER_HEIGHT,
-  },
-  mobileInfo: {
-    paddingHorizontal: space6,
-    paddingTop: space6,
-  },
   paymentSelector: {
-    marginBottom: space4,
-  },
-  pricingContainer: {
-    paddingHorizontal: space6,
-    paddingVertical: space8,
+    marginTop: space6,
   },
   princingWrapper: {
     padding: space6,
@@ -49,7 +35,7 @@ const style = StyleSheet.create({
     ...Platform.select({
       web: {
         position: "sticky",
-        top: space12,
+        top: space24,
         alignSelf: "flex-start",
       },
     }),
@@ -59,7 +45,7 @@ const style = StyleSheet.create({
     backgroundColor: colorBgPrimaryLight,
   },
   title: {
-    marginVertical: space4,
+    marginBottom: space4,
   },
 });
 

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

@@ -1,9 +1,10 @@
 import React, { FC, ReactNode, useCallback, useMemo } from "react";
 import { View } from "react-native";
 import { useNavigate } from "react-router-native";
-import { Box, Layout, Spinner, Text, useDevice } from "@lookiero/aurora";
+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 } 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";
@@ -11,7 +12,6 @@ import { TrackingPage } from "../../../tracking/tracking";
 import { useTrackPageView } from "../../../tracking/useTrackPageView";
 import { useTrackPressBack } from "../../../tracking/useTrackPressBack";
 import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
-import { Layout as LocalLayout } from "../../components/layouts/layout/Layout";
 import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { I18nMessages } from "../../i18n/i18n";
@@ -99,18 +99,13 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: LocalLayout, useRedirec
     <LocalLayout
       header={<CheckoutHeader onBack={handleOnBack} />}
       style={{
-        header: style.header,
         scrollView: style.scrollView,
       }}
     >
       {hasReplacedCheckoutItem && <DeliveryBanner />}
       <Layout fullWidth={!screen.L} style={screen.L && style.desktopLayoutSpacing}>
-        <Box size={{ L: "2/3" }} style={screen.L ? style.desktopListSpacing : undefined}>
-          <View style={[style.contentWrapper, screen.L ? style.contentWrapper : undefined]}>
-            <View style={style.paymentSelector}>
-              <PaymentInstrument useRedirect={useRedirect} />
-            </View>
-
+        <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
+          <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
             <Text level={3} style={style.title} heading>
               {titleText}
             </Text>
@@ -133,24 +128,20 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: LocalLayout, useRedirec
                 />
               </View>
             ))}
+
+            <View style={style.paymentSelector}>
+              <PaymentInstrument useRedirect={useRedirect} />
+            </View>
           </View>
         </Box>
 
-        <Box size={{ L: "1/3" }} style={[style.resume, screen.L ? style.desktopResume : undefined]}>
+        <Box size={{ L: "1/3" }} style={[style.resume, screen.L && style.desktopResume]}>
           {pricing ? (
             <View style={style.princingWrapper}>
-              <Pricing
-                balanceDiscount={pricing.balanceDiscount}
-                collapsible={false}
-                discount={pricing.discount}
-                discountPercentage={pricing.discountPercentage}
-                pendingToPay={pricing.pendingToPay}
-                service={pricing.service}
-                submitButtonText={submitButtonText}
-                subtotal={pricing.subtotal}
-                totalCheckoutItemsKept={checkoutItemsKept?.length || 0}
-                onSubmit={handleOnSubmit}
-              />
+              <Pricing pricing={pricing} totalCheckoutItemsKept={checkoutItemsKept?.length || 0} />
+              <Button testID="confirm-checkout-button" onPress={handleOnSubmit}>
+                {submitButtonText}
+              </Button>
             </View>
           ) : null}
         </Box>

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

@@ -1,6 +1,5 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
 
 const { space8, space10 } = theme();
 
@@ -12,9 +11,6 @@ const style = StyleSheet.create({
   container: {
     paddingBottom: space10,
   },
-  header: {
-    height: HEADER_HEIGHT,
-  },
 });
 
 export { style };

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

@@ -2,6 +2,7 @@ import React, { FC, useCallback, useEffect, useRef } from "react";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
+import { Layout } from "@lookiero/sty-psp-ui";
 import { CheckoutFeedbackProjection } from "../../../../projection/checkoutFeedback/checkoutFeedback";
 import { CheckoutQuestionType } from "../../../../projection/checkoutQuestion/checkoutQuestion";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
@@ -12,7 +13,6 @@ import { useTrackChangeFeedback } from "../../../tracking/useTrackChangeFeedback
 import { useTrackPageView } from "../../../tracking/useTrackPageView";
 import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
 import { Body } from "../../components/layouts/body/Body";
-import { Layout } from "../../components/layouts/layout/Layout";
 import { CheckoutQuestionFeedbackProvider } from "../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { style } from "./Feedback.style";
@@ -114,7 +114,7 @@ const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
 
   return (
     <CheckoutQuestionFeedbackProvider feedback={{}} onChanged={handleOnChangedFeedback}>
-      <Layout style={{ header: style.header, scrollView: style.container }}>
+      <Layout style={{ scrollView: style.container }}>
         <Body style={{ column: style.bodyColumn }}>
           <CheckoutQuestionsForm
             checkoutQuestions={checkoutQuestions || []}

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

@@ -1,15 +1,14 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
 
-const { colorBgPrimaryLight } = theme();
+const { colorBgPrimaryLight, space12 } = theme();
 
 const style = StyleSheet.create({
-  header: {
-    height: HEADER_HEIGHT,
+  content: {
+    flex: 1,
   },
-  headerWithDoubleHeight: {
-    height: HEADER_HEIGHT * 2,
+  fiveItemsDiscountPadding: {
+    paddingTop: space12,
   },
   headerWrapper: {
     display: "flex",

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

@@ -1,9 +1,11 @@
 import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { View } from "react-native";
 import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
 import { Box, Spinner } from "@lookiero/aurora";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
+import { Layout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import {
   BookedProductsVariantsProjection,
@@ -25,7 +27,6 @@ import { useTrackPressNext } from "../../../tracking/useTrackPressNext";
 import { useTrackPressPrevious } from "../../../tracking/useTrackPressPrevious";
 import { useTrackReturnItem } from "../../../tracking/useTrackReturnItem";
 import { FiveItemsDiscountBanner } from "../../components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
-import { Layout } from "../../components/layouts/layout/Layout";
 import { ReturnQuestionFeedbackProvider } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
 import { ItemDetailHeader } from "../../components/templates/header/itemDetailHeader/ItemDetailHeader";
 import { ItemHeader } from "../../components/templates/header/itemHeader/ItemHeader";
@@ -253,30 +254,29 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
     <ReturnQuestionFeedbackProvider key={checkoutItem.id} feedback={checkoutItem.feedbacks || {}}>
       <Layout
         header={header}
-        scrollEnabled={!itemWithoutCustomerDecission}
         style={{
-          header: fiveItemsDiscount !== 0 ? style.headerWithDoubleHeight : style.header,
-          scrollView: { height: itemWithoutCustomerDecission ? "100%" : "auto" },
           safeAreaView: isDesktopScreen ? style.safeAreaView : null,
         }}
       >
-        {itemWithoutCustomerDecission ? (
-          <ItemWithoutCustomerDecission
-            bookedProductsVariants={bookedProductsVariants as BookedProductsVariantsProjection}
-            checkoutId={checkout.id}
-            checkoutItem={checkoutItem as CheckoutItemWithoutCustomerDecission}
-            currentProductVariant={currentProductVariant}
-            onReturn={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
-          />
-        ) : (
-          <ItemWithCustomerDecission
-            checkoutId={checkout.id}
-            checkoutItem={checkoutItem as CheckoutItemWithCustomerDecission}
-            currentProductVariant={currentProductVariant}
-            returnQuestions={returnQuestions}
-            onEditFeedback={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
-          />
-        )}
+        <View style={[style.content, fiveItemsDiscount !== 0 && style.fiveItemsDiscountPadding]}>
+          {itemWithoutCustomerDecission ? (
+            <ItemWithoutCustomerDecission
+              bookedProductsVariants={bookedProductsVariants as BookedProductsVariantsProjection}
+              checkoutId={checkout.id}
+              checkoutItem={checkoutItem as CheckoutItemWithoutCustomerDecission}
+              currentProductVariant={currentProductVariant}
+              onReturn={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
+            />
+          ) : (
+            <ItemWithCustomerDecission
+              checkoutId={checkout.id}
+              checkoutItem={checkoutItem as CheckoutItemWithCustomerDecission}
+              currentProductVariant={currentProductVariant}
+              returnQuestions={returnQuestions}
+              onEditFeedback={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
+            />
+          )}
+        </View>
       </Layout>
 
       {!redirectToReturnPage ? (

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

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

package/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useState } from "react";
-import { LayoutRectangle, Platform, ScrollView } from "react-native";
+import { LayoutRectangle, Platform } from "react-native";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
@@ -104,18 +104,16 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
     <>
       <SizeWithoutStockModal visible={sizeWithoutStockModalVisible} onDismiss={handleOnHideSizeWithoutStockModal} />
 
-      <ScrollView showsVerticalScrollIndicator={false}>
-        <Body style={{ row: style.container }}>
-          <ProductVariant
-            checkoutId={checkoutId}
-            checkoutItem={checkoutItem}
-            country={country}
-            currentProductVariant={currentProductVariant}
-            segment={segment}
-            style={{ content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } }}
-          />
-        </Body>
-      </ScrollView>
+      <Body style={{ row: style.container }}>
+        <ProductVariant
+          checkoutId={checkoutId}
+          checkoutItem={checkoutItem}
+          country={country}
+          currentProductVariant={currentProductVariant}
+          segment={segment}
+          style={{ content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } }}
+        />
+      </Body>
 
       <ItemActions
         country={country}

package/src/infrastructure/ui/views/return/Return.style.ts

@@ -1,8 +1,7 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
 
-const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space2, space4, space6, space8 } = theme();
+const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space4, space6, space8 } = theme();
 
 const style = StyleSheet.create({
   description: {
@@ -15,9 +14,6 @@ const style = StyleSheet.create({
   desktopLayoutSpacing: {
     paddingVertical: space8,
   },
-  header: {
-    height: HEADER_HEIGHT - space2,
-  },
   headerWrapper: {
     display: "flex",
     flexDirection: "column",

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

@@ -7,6 +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 { CheckoutProjection } from "../../../../projection/checkout/checkout";
 import { CheckoutItemProjection } from "../../../../projection/checkoutItem/checkoutItem";
 import { FeedbackProjection } from "../../../../projection/feedback/feedback";
@@ -20,7 +21,6 @@ import { useTrackPageView } from "../../../tracking/useTrackPageView";
 import { useTrackPressNext } from "../../../tracking/useTrackPressNext";
 import { useTrackPressPrevious } from "../../../tracking/useTrackPressPrevious";
 import { useTrackReturnItem } from "../../../tracking/useTrackReturnItem";
-import { Layout as LocalLayout } from "../../components/layouts/layout/Layout";
 import { ReturnQuestions } from "../../components/organisms/returnQuestions/ReturnQuestions";
 import {
   ReturnQuestionFeedbackProvider,
@@ -167,7 +167,6 @@ const ReturnForm: FC<ReturnFormProps> = ({ checkout, checkoutItem, country, segm
         header={header}
         scrollEnabled={false}
         style={{
-          header: style.header,
           safeAreaView: style.safeAreaView,
           scrollView: style.scrollView,
         }}

package/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.style.ts

@@ -7,6 +7,7 @@ const {
   borderRadiusFull,
   borderWidth2,
   colorBorderInput,
+  colorBgPrimaryLight,
   space05,
   space1,
   space2,
@@ -19,7 +20,7 @@ const IMAGE_HEIGHT = 132;
 const style = StyleSheet.create({
   container: {
     alignItems: "flex-end",
-    borderBottomColor: colorBorderInput,
+    borderBottomColor: colorBgPrimaryLight,
     borderBottomWidth: 1,
     flexDirection: "row",
     justifyContent: "space-between",

package/src/infrastructure/ui/views/summary/Summary.style.ts

@@ -1,16 +1,17 @@
 import { Platform, StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
 
 const {
   colorTextMedium,
   colorText,
   colorBgPrimaryLight,
   space2,
+  space3,
   space4,
   space6,
   space12,
   space16,
+  space24,
   borderRadius4,
   colorBgBase,
 } = theme();
@@ -22,7 +23,7 @@ const style = StyleSheet.create({
   },
   description: {
     color: colorTextMedium,
-    marginBottom: space4,
+    marginBottom: space6,
   },
   desktopContentWrapper: {
     borderRadius: borderRadius4,
@@ -38,9 +39,6 @@ const style = StyleSheet.create({
   desktopResume: {
     borderRadius: borderRadius4,
   },
-  header: {
-    height: HEADER_HEIGHT,
-  },
   mobileInfo: {
     paddingHorizontal: space6,
     paddingTop: space6,
@@ -66,7 +64,7 @@ const style = StyleSheet.create({
     ...Platform.select({
       web: {
         position: "sticky",
-        top: space12,
+        top: space24,
         alignSelf: "flex-start",
       },
     }),
@@ -74,7 +72,10 @@ const style = StyleSheet.create({
   } as any,
   scrollView: {
     backgroundColor: colorBgPrimaryLight,
-    flex: 1,
+  },
+  sticky: {
+    paddingBottom: space4,
+    paddingTop: space3,
   },
   title: {
     marginBottom: space2,