@lookiero/checkout 11.5.0 → 12.1.0

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

@@ -6,6 +6,7 @@ import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { Customer } from "../../../../projection/customer/customer";
 import { OrderProjection } from "../../../../projection/order/order";
 import { SubscriptionProjection } from "../../../../projection/subscription/subscription";
 import { checkout } from "../../../projection/checkout/checkout.mock";
@@ -22,6 +23,11 @@ const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
 const basePath = "/checkout";
 const country = Country.ES;
 const segment = Segment.WOMEN;
+const mockCustomer: Customer = {
+  customerId,
+  country,
+  segment,
+} as Customer;
 const mockCheckout = checkout({
   items: [
     { status: CheckoutItemStatus.RETURNED },
@@ -41,14 +47,15 @@ const mockUseRedirect = jest.fn(() => ({ returnUrl: "https://web2.dev.aws.lookie
 
 const mockOnSuccess = jest.fn();
 const mockCheckoutFlow = jest.fn();
+const mockStatus = QueryStatus.SUCCESS;
 const paymentFlowTestId = "payment-flow";
 const mockPaymentFlowComponent: ReactNode = <View testID={paymentFlowTestId}>PaymentFlow</View>;
 jest.mock("../../hooks/useCheckoutFlow", () => ({
-  useCheckoutFlow: () => [mockCheckoutFlow, QueryStatus.SUCCESS, mockPaymentFlowComponent],
+  useCheckoutFlow: () => [mockCheckoutFlow, mockStatus, mockPaymentFlowComponent],
 }));
 
 jest.mock("../../hooks/useStaticInfo", () => ({
-  useStaticInfo: () => ({ customer: { customerId, country, segment }, basePath }),
+  useStaticInfo: () => ({ customer: mockCustomer, basePath }),
 }));
 // eslint-disable-next-line @typescript-eslint/naming-convention
 jest.mock("./components/paymentInstrument/PaymentInstrument", () => ({ PaymentInstrument: () => null }));

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

@@ -47,6 +47,7 @@ const Checkout: FC<CheckoutProps> = ({
   const {
     customer: { customerId, country, segment },
     basePath,
+    tradename,
   } = useStaticInfo();
   const screenSize = useScreenSize();
   const isDektopScreen = screenSize === "L";
@@ -73,6 +74,7 @@ const Checkout: FC<CheckoutProps> = ({
     page: TrackingPage.CHECKOUT,
     country,
     segment,
+    tradename,
     checkoutId: checkout?.id,
   });
 
@@ -81,6 +83,7 @@ const Checkout: FC<CheckoutProps> = ({
     page: TrackingPage.CHECKOUT,
     country,
     segment,
+    tradename,
     checkoutId: checkout?.id,
   });
   const handleOnSubmit = useCallback(async () => {
@@ -106,6 +109,7 @@ const Checkout: FC<CheckoutProps> = ({
     page: TrackingPage.CHECKOUT,
     country,
     segment,
+    tradename,
     checkoutId: checkout?.id,
   });
   const handleOnBack = useCallback(() => {

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

@@ -5,6 +5,7 @@ import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { Customer } from "../../../../projection/customer/customer";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
 import { checkout } from "../../../projection/checkout/checkout.mock";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -25,9 +26,14 @@ const checkoutMock = checkout({
   ],
 });
 const mockGiveCheckoutFeedback = jest.fn();
+const mockCustomer: Customer = {
+  customerId,
+  country,
+  segment,
+} as Customer;
 
 jest.mock("../../hooks/useStaticInfo", () => ({
-  useStaticInfo: () => ({ customer: { customerId, country, segment } }),
+  useStaticInfo: () => ({ customer: mockCustomer }),
 }));
 
 jest.mock("../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId");

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

@@ -37,6 +37,7 @@ const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
   const isDesktop = screenSize === "L";
   const {
     customer: { customerId, country, segment },
+    tradename,
   } = useStaticInfo();
 
   const style = useMemo(() => feedbackStyle(), []);
@@ -51,6 +52,7 @@ const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
     country,
     segment,
     checkoutId: checkout?.id,
+    tradename,
   });
 
   const trackChangeFeedback = useTrackChangeFeedback({
@@ -58,6 +60,7 @@ const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
     country,
     segment,
     checkoutId: checkout?.id,
+    tradename,
   });
   const handleOnChangedFeedback: HandleOnChangedFeedbackFunction = useCallback(
     ({ checkoutQuestionId, checkoutQuestionFeedback, hasFeedback }) => {
@@ -86,6 +89,7 @@ const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
     country,
     segment,
     checkoutId: checkout?.id,
+    tradename,
   });
   const handleOnSubmit = useCallback(
     async (feedbacks: CheckoutFeedbackProjection) => {

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

@@ -5,6 +5,7 @@ import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { Customer } from "../../../../projection/customer/customer";
 import { useBookCheckoutBookingForCheckoutItem } from "../../../domain/checkoutBooking/react/useBookCheckoutBookingForCheckoutItem";
 import { useKeepCheckoutItem } from "../../../domain/checkoutItem/react/useKeepCheckoutItem";
 import { useReplaceCheckoutItem } from "../../../domain/checkoutItem/react/useReplaceCheckoutItem";
@@ -26,9 +27,14 @@ const mockFirstCheckoutItemId = "a5422445-0e62-4b11-8a3f-1bb5469ee154";
 const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
 const country = Country.ES;
 const segment = Segment.WOMEN;
+const mockCustomer: Customer = {
+  customerId,
+  country,
+  segment,
+} as Customer;
 
 jest.mock("../../hooks/useStaticInfo", () => ({
-  useStaticInfo: () => ({ customer: { customerId, country, segment } }),
+  useStaticInfo: () => ({ customer: mockCustomer }),
 }));
 
 const mockNavigate = jest.fn();

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

@@ -63,6 +63,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
   const {
     customer: { customerId, country, segment },
     basePath,
+    tradename,
   } = useStaticInfo();
 
   const style = useMemo(() => itemStyle(), []);
@@ -133,6 +134,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
     page: TrackingPage.ITEM,
     country,
     segment,
+    tradename,
     checkoutId: checkout?.id,
     checkoutItemId: checkoutItem.id,
     status: checkoutItem.status,
@@ -145,6 +147,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
     page: TrackingPage.ITEM,
     country,
     segment,
+    tradename,
     checkoutId: checkout?.id,
   });
   const handleOnNext: HandleOnNextFunction = useCallback(
@@ -155,6 +158,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
     page: TrackingPage.ITEM,
     country,
     segment,
+    tradename,
     checkoutId: checkout?.id,
   });
   const handleOnPrevious: HandleOnPreviousFunction = useCallback(
@@ -165,6 +169,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
     page: TrackingPage.ITEM,
     country,
     segment,
+    tradename,
     checkoutId: checkout?.id,
   });
   const handleOnBack = useCallback(() => {

package/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/__snapshots__/GetOutOfCheckoutModal.test.tsx.snap

@@ -58,15 +58,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
         }
       }
       accessible={true}
-      collapsable={false}
       focusable={true}
-      jestAnimatedStyle={
-        {
-          "value": {
-            "opacity": 1,
-          },
-        }
-      }
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -75,14 +67,19 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        {
-          "backgroundColor": "rgba(12, 10, 10, 0.7)",
-          "height": "100%",
-          "opacity": 1,
-          "position": "absolute",
-          "width": "100%",
-          "zIndex": 1,
-        }
+        [
+          {
+            "backgroundColor": "rgba(12, 10, 10, 0.7)",
+            "height": "100%",
+            "position": "absolute",
+            "width": "100%",
+            "zIndex": 1,
+          },
+          undefined,
+          {
+            "opacity": 1,
+          },
+        ]
       }
       testID="modal-close-button"
     />
@@ -116,10 +113,26 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
       }
     >
       <View
-        collapsable={false}
-        jestAnimatedStyle={
-          {
-            "value": {
+        pointerEvents="auto"
+        style={
+          [
+            {
+              "backgroundColor": "#FFFFFF",
+              "borderRadius": 16,
+              "position": "absolute",
+              "width": "100%",
+              "zIndex": 3,
+            },
+            {
+              "borderBottomLeftRadius": 0,
+              "borderBottomRightRadius": 0,
+            },
+            undefined,
+            {
+              "maxHeight": 800,
+            },
+            undefined,
+            {
               "opacity": 1,
               "transform": [
                 {
@@ -130,29 +143,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                 },
               ],
             },
-          }
-        }
-        pointerEvents="auto"
-        style={
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderBottomLeftRadius": 0,
-            "borderBottomRightRadius": 0,
-            "borderRadius": 16,
-            "maxHeight": 800,
-            "opacity": 1,
-            "position": "absolute",
-            "transform": [
-              {
-                "translateY": 0,
-              },
-              {
-                "scale": 1,
-              },
-            ],
-            "width": "100%",
-            "zIndex": 3,
-          }
+          ]
         }
       >
         <View

package/src/infrastructure/ui/views/item/components/itemActions/__snapshots__/ItemActions.test.tsx.snap

@@ -632,15 +632,7 @@ exports[`ItemActions component matches the snapshot 1`] = `
           }
         }
         accessible={true}
-        collapsable={false}
         focusable={false}
-        jestAnimatedStyle={
-          {
-            "value": {
-              "opacity": 0,
-            },
-          }
-        }
         onClick={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
@@ -649,14 +641,19 @@ exports[`ItemActions component matches the snapshot 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          {
-            "backgroundColor": "rgba(12, 10, 10, 0.7)",
-            "height": "100%",
-            "opacity": 0,
-            "position": "absolute",
-            "width": "100%",
-            "zIndex": 1,
-          }
+          [
+            {
+              "backgroundColor": "rgba(12, 10, 10, 0.7)",
+              "height": "100%",
+              "position": "absolute",
+              "width": "100%",
+              "zIndex": 1,
+            },
+            undefined,
+            {
+              "opacity": 0,
+            },
+          ]
         }
         testID="modal-close-button"
       />
@@ -690,10 +687,26 @@ exports[`ItemActions component matches the snapshot 1`] = `
         }
       >
         <View
-          collapsable={false}
-          jestAnimatedStyle={
-            {
-              "value": {
+          pointerEvents="none"
+          style={
+            [
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": 16,
+                "position": "absolute",
+                "width": "100%",
+                "zIndex": 3,
+              },
+              {
+                "borderBottomLeftRadius": 0,
+                "borderBottomRightRadius": 0,
+              },
+              undefined,
+              {
+                "maxHeight": 800,
+              },
+              undefined,
+              {
                 "opacity": 1,
                 "transform": [
                   {
@@ -704,29 +717,7 @@ exports[`ItemActions component matches the snapshot 1`] = `
                   },
                 ],
               },
-            }
-          }
-          pointerEvents="none"
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-              "borderBottomLeftRadius": 0,
-              "borderBottomRightRadius": 0,
-              "borderRadius": 16,
-              "maxHeight": 800,
-              "opacity": 1,
-              "position": "absolute",
-              "transform": [
-                {
-                  "translateY": 800,
-                },
-                {
-                  "scale": 1,
-                },
-              ],
-              "width": "100%",
-              "zIndex": 3,
-            }
+            ]
           }
         >
           <View

package/src/infrastructure/ui/views/item/components/productVariantSlider/__snapshots__/ProductVariantSlider.test.tsx.snap

@@ -59,44 +59,37 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
       >
         <View
           collapsable={false}
-          jestAnimatedStyle={
-            {
-              "value": {
+          style={
+            [
+              {
+                "flex": 1,
+                "flexDirection": "row",
+                "height": "100%",
+              },
+              {
+                "width": 600,
+              },
+              {
                 "transform": [
                   {
                     "translateX": 0,
                   },
                 ],
               },
-            }
-          }
-          style={
-            {
-              "flex": 1,
-              "flexDirection": "row",
-              "height": "100%",
-              "transform": [
-                {
-                  "translateX": 0,
-                },
-              ],
-              "width": 600,
-            }
+            ]
           }
           testID="carousel-track"
         >
           <View
-            collapsable={false}
-            jestAnimatedStyle={
-              {
-                "value": {},
-              }
-            }
             style={
-              {
-                "flex": 1,
-                "width": 300,
-              }
+              [
+                {
+                  "flex": 1,
+                },
+                {
+                  "width": 300,
+                },
+              ]
             }
             testID="carousel-item"
           >
@@ -213,14 +206,6 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
                     </View>
                   </View>
                   <Image
-                    collapsable={false}
-                    jestAnimatedStyle={
-                      {
-                        "value": {
-                          "opacity": 0,
-                        },
-                      }
-                    }
                     onLoad={[Function]}
                     resizeMode="stretch"
                     source={
@@ -229,14 +214,19 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
                       }
                     }
                     style={
-                      {
-                        "flex": 1,
-                        "height": "100%",
-                        "opacity": 0,
-                        "position": "absolute",
-                        "width": "100%",
-                        "zIndex": 10,
-                      }
+                      [
+                        {
+                          "flex": 1,
+                          "height": "100%",
+                          "position": "absolute",
+                          "width": "100%",
+                          "zIndex": 10,
+                        },
+                        undefined,
+                        {
+                          "opacity": 0,
+                        },
+                      ]
                     }
                     testID="lazy-image-main-image"
                   />
@@ -245,17 +235,15 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
             </View>
           </View>
           <View
-            collapsable={false}
-            jestAnimatedStyle={
-              {
-                "value": {},
-              }
-            }
             style={
-              {
-                "flex": 1,
-                "width": 300,
-              }
+              [
+                {
+                  "flex": 1,
+                },
+                {
+                  "width": 300,
+                },
+              ]
             }
             testID="carousel-item"
           >
@@ -372,14 +360,6 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
                     </View>
                   </View>
                   <Image
-                    collapsable={false}
-                    jestAnimatedStyle={
-                      {
-                        "value": {
-                          "opacity": 0,
-                        },
-                      }
-                    }
                     onLoad={[Function]}
                     resizeMode="stretch"
                     source={
@@ -388,14 +368,19 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
                       }
                     }
                     style={
-                      {
-                        "flex": 1,
-                        "height": "100%",
-                        "opacity": 0,
-                        "position": "absolute",
-                        "width": "100%",
-                        "zIndex": 10,
-                      }
+                      [
+                        {
+                          "flex": 1,
+                          "height": "100%",
+                          "position": "absolute",
+                          "width": "100%",
+                          "zIndex": 10,
+                        },
+                        undefined,
+                        {
+                          "opacity": 0,
+                        },
+                      ]
                     }
                     testID="lazy-image-main-image"
                   />
@@ -465,25 +450,21 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
                 "selected": true,
               }
             }
-            collapsable={false}
-            jestAnimatedStyle={
-              {
-                "value": {
+            style={
+              [
+                {
+                  "backgroundColor": "#0C0A0A",
+                  "marginHorizontal": 3,
+                },
+                {
                   "height": 8,
                   "opacity": 1,
                   "width": 8,
                 },
-              }
-            }
-            style={
-              {
-                "backgroundColor": "#0C0A0A",
-                "borderRadius": 8,
-                "height": 8,
-                "marginHorizontal": 3,
-                "opacity": 1,
-                "width": 8,
-              }
+                {
+                  "borderRadius": 8,
+                },
+              ]
             }
             testID="bullet"
           />
@@ -525,25 +506,21 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
                 "selected": false,
               }
             }
-            collapsable={false}
-            jestAnimatedStyle={
-              {
-                "value": {
+            style={
+              [
+                {
+                  "backgroundColor": "#0C0A0A",
+                  "marginHorizontal": 3,
+                },
+                {
                   "height": 8,
                   "opacity": 0.3,
                   "width": 8,
                 },
-              }
-            }
-            style={
-              {
-                "backgroundColor": "#0C0A0A",
-                "borderRadius": 8,
-                "height": 8,
-                "marginHorizontal": 3,
-                "opacity": 0.3,
-                "width": 8,
-              }
+                {
+                  "borderRadius": 8,
+                },
+              ]
             }
             testID="bullet"
           />