@lookiero/checkout 14.3.0 → 14.4.0

package/src/infrastructure/projection/pricing/pricing.mock.ts

@@ -1,5 +1,10 @@
 import { Currency } from "@lookiero/sty-psp-locale";
-import { PricingProjection } from "../../../projection/pricing/pricing";
+import {
+  CheckoutPricingProjection,
+  CheckoutPrincingContext,
+  CheckoutPrincingType,
+  PricingProjection,
+} from "../../../projection/pricing/pricing";
 
 interface PricingFunctionArgs {
   readonly paidWithPromocode: boolean;
@@ -50,4 +55,31 @@ const pricing: PricingFunction = ({ paidWithPromocode } = { paidWithPromocode: f
   },
 });
 
-export { pricing };
+const mockCheckoutPricingProjection: CheckoutPricingProjection = {
+  currency: Currency.EUR,
+  final: 12127,
+  original: 21195,
+  modifiers: [
+    {
+      amount: 7068,
+      percentage: 35,
+      type: CheckoutPrincingType.DISCOUNT,
+      context: CheckoutPrincingContext.PROMOCODE,
+      translationKey: "summary.discount",
+    },
+    {
+      amount: 1000,
+      type: CheckoutPrincingType.DISCOUNT,
+      context: CheckoutPrincingContext.BALANCE,
+      translationKey: "summary.credit",
+    },
+    {
+      amount: 1000,
+      type: CheckoutPrincingType.DISCOUNT,
+      context: CheckoutPrincingContext.PS_FEE,
+      translationKey: "summary.fee",
+    },
+  ],
+};
+
+export { pricing, mockCheckoutPricingProjection };

package/src/infrastructure/tracking/tracking.ts

@@ -110,8 +110,10 @@ interface PressPreviousTrackingEvent extends CheckoutBaseTrackingEvent<TrackingE
   readonly to: string;
 }
 
-interface CheckoutTrackingEvent
-  extends CheckoutBaseTrackingEvent<TrackingEventName.CHECKOUT, TrackingEventCategory.ECOMMERCE> {
+interface CheckoutTrackingEvent extends CheckoutBaseTrackingEvent<
+  TrackingEventName.CHECKOUT,
+  TrackingEventCategory.ECOMMERCE
+> {
   readonly userId: string;
   readonly sizeChanges: number;
   // readonly isFirstOrder: boolean;

package/src/infrastructure/ui/hooks/useCheckoutFlow.tsx

@@ -128,7 +128,7 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({ checkout: checkoutProjection
       setStartLegacyBoxCheckoutStatus("error");
 
       createNotification({
-        bodyI18nKey: payload.metadata?.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+        bodyI18nKey: payload.metadata?.translation || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
         level: NotificationLevel.ERROR,
       });
     },

package/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useCallback, useMemo } from "react";
 import { View } from "react-native";
-import { Button } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Button } from "@lookiero/sty-psp-ui";
 import {
   CheckoutFeedbackProjection,
   CheckoutFeedbackQuestionProjection,

package/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.ts

@@ -5,9 +5,6 @@ const style = () => {
   const { space6, space8 } = theme();
 
   return StyleSheet.create({
-    button: {
-      flex: 0,
-    },
     buttonText: {
       textAlign: "center",
       width: "100%",

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

@@ -1,8 +1,7 @@
 import React, { FC, useMemo } from "react";
 import { View } from "react-native";
-import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Modal, Text } from "@lookiero/sty-psp-ui";
+import { Button, Modal, Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style as getOutOfCheckoutModalStyle } from "./GetOutOfCheckoutModal.style";
 
@@ -34,7 +33,7 @@ const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({ visible, onDism
         <Text level={3} style={style.description}>
           {descriptionText}
         </Text>
-        <Button style={style.button} onPress={onDismiss}>
+        <Button onPress={onDismiss}>
           <Text
             level={3}
             selectable={false}
@@ -44,7 +43,7 @@ const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({ visible, onDism
             {dismissButtonText}
           </Text>
         </Button>
-        <Button style={[style.button, style.confirmButton]} variant={BUTTON_VARIANT.SECONDARY} onPress={onConfirm}>
+        <Button style={{ button: style.confirmButton }} variant="secondary" onPress={onConfirm}>
           <Text
             level={3}
             selectable={false}

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

@@ -215,7 +215,6 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                 get_out_of_checkout_modal.description
               </Text>
               <View
-                accessibilityRole="button"
                 accessibilityState={
                   {
                     "busy": undefined,
@@ -236,9 +235,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                 accessible={true}
                 collapsable={false}
                 focusable={true}
-                onBlur={[Function]}
                 onClick={[Function]}
-                onFocus={[Function]}
                 onLayout={[Function]}
                 onResponderGrant={[Function]}
                 onResponderMove={[Function]}
@@ -247,38 +244,10 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  [
-                    [
-                      {
-                        "_container": {
-                          "overflow": "hidden",
-                        },
-                        "_pressed": {
-                          "bottom": 0,
-                          "left": 0,
-                          "right": 0,
-                          "top": 0,
-                        },
-                        "alignSelf": "flex-start",
-                        "container": {
-                          "overflow": "hidden",
-                        },
-                        "flex": 0,
-                        "height": 64,
-                        "overflow": "hidden",
-                        "pressed": {
-                          "bottom": 0,
-                          "left": 0,
-                          "right": 0,
-                          "top": 0,
-                        },
-                        "width": "100%",
-                      },
-                    ],
-                    {
-                      "opacity": 1,
-                    },
-                  ]
+                  {
+                    "height": 64,
+                    "opacity": 1,
+                  }
                 }
               >
                 <ViewManagerAdapter_ExpoLinearGradient
@@ -301,28 +270,19 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                     ]
                   }
                   style={
-                    [
-                      {
-                        "alignContent": "center",
-                        "height": 64,
-                        "justifyContent": "center",
-                        "overflow": "hidden",
-                        "paddingLeft": 24,
-                        "paddingRight": 24,
-                        "position": "relative",
-                      },
-                      {},
-                      undefined,
-                      undefined,
-                      false,
-                      {
-                        "borderRadius": 9999,
-                      },
-                    ]
+                    {
+                      "alignContent": "center",
+                      "borderRadius": 9999,
+                      "height": 64,
+                      "justifyContent": "center",
+                      "overflow": "hidden",
+                      "paddingLeft": 24,
+                      "paddingRight": 24,
+                      "position": "relative",
+                    }
                   }
                 >
                   <View
-                    collapsable={false}
                     pointerEvents="none"
                     style={
                       [
@@ -335,24 +295,21 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                           "top": 0,
                         },
                         {
-                          "width": "0%",
+                          "width": 0,
                         },
                       ]
                     }
                   />
                   <View
                     style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "flexDirection": "row",
-                          "justifyContent": "center",
-                        },
-                      ]
+                      {
+                        "alignItems": "center",
+                        "flexDirection": "row",
+                        "justifyContent": "center",
+                      }
                     }
                   >
                     <Text
-                      selectable={false}
                       style={
                         [
                           {
@@ -366,23 +323,46 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                           },
                           [
                             {
+                              "color": "#FFFFFF",
                               "textAlign": "center",
-                              "width": "100%",
-                            },
-                            {
-                              "textTransform": "uppercase",
                             },
+                            undefined,
                           ],
                         ]
                       }
                     >
-                      get_out_of_checkout_modal.dismiss_button
+                      <Text
+                        selectable={false}
+                        style={
+                          [
+                            {
+                              "color": "#0C0A0A",
+                              "fontFamily": "AreaNormal-Extrabold",
+                              "fontSize": 15,
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                              "letterSpacing": -0.2,
+                              "lineHeight": 20,
+                            },
+                            [
+                              {
+                                "textAlign": "center",
+                                "width": "100%",
+                              },
+                              {
+                                "textTransform": "uppercase",
+                              },
+                            ],
+                          ]
+                        }
+                      >
+                        get_out_of_checkout_modal.dismiss_button
+                      </Text>
                     </Text>
                   </View>
                 </ViewManagerAdapter_ExpoLinearGradient>
               </View>
               <View
-                accessibilityRole="button"
                 accessibilityState={
                   {
                     "busy": undefined,
@@ -403,9 +383,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                 accessible={true}
                 collapsable={false}
                 focusable={true}
-                onBlur={[Function]}
                 onClick={[Function]}
-                onFocus={[Function]}
                 onLayout={[Function]}
                 onResponderGrant={[Function]}
                 onResponderMove={[Function]}
@@ -414,39 +392,11 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  [
-                    [
-                      {
-                        "_container": {
-                          "overflow": "hidden",
-                        },
-                        "_pressed": {
-                          "bottom": 0,
-                          "left": 0,
-                          "right": 0,
-                          "top": 0,
-                        },
-                        "alignSelf": "flex-start",
-                        "container": {
-                          "overflow": "hidden",
-                        },
-                        "flex": 0,
-                        "height": 64,
-                        "marginTop": 32,
-                        "overflow": "hidden",
-                        "pressed": {
-                          "bottom": 0,
-                          "left": 0,
-                          "right": 0,
-                          "top": 0,
-                        },
-                        "width": "100%",
-                      },
-                    ],
-                    {
-                      "opacity": 1,
-                    },
-                  ]
+                  {
+                    "height": 64,
+                    "marginTop": 32,
+                    "opacity": 1,
+                  }
                 }
               >
                 <ViewManagerAdapter_ExpoLinearGradient
@@ -469,35 +419,22 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                     ]
                   }
                   style={
-                    [
-                      {
-                        "alignContent": "center",
-                        "height": 64,
-                        "justifyContent": "center",
-                        "overflow": "hidden",
-                        "paddingLeft": 24,
-                        "paddingRight": 24,
-                        "position": "relative",
-                      },
-                      {
-                        "borderColor": "#0C0A0A",
-                        "borderStyle": "solid",
-                        "borderWidth": 2,
-                        "height": 64,
-                        "paddingLeft": 24,
-                        "paddingRight": 24,
-                      },
-                      undefined,
-                      undefined,
-                      false,
-                      {
-                        "borderRadius": 9999,
-                      },
-                    ]
+                    {
+                      "alignContent": "center",
+                      "borderColor": "#0C0A0A",
+                      "borderRadius": 9999,
+                      "borderStyle": "solid",
+                      "borderWidth": 2,
+                      "height": 64,
+                      "justifyContent": "center",
+                      "overflow": "hidden",
+                      "paddingLeft": 24,
+                      "paddingRight": 24,
+                      "position": "relative",
+                    }
                   }
                 >
                   <View
-                    collapsable={false}
                     pointerEvents="none"
                     style={
                       [
@@ -510,24 +447,21 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                           "top": 0,
                         },
                         {
-                          "width": "0%",
+                          "width": 0,
                         },
                       ]
                     }
                   />
                   <View
                     style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "flexDirection": "row",
-                          "justifyContent": "center",
-                        },
-                      ]
+                      {
+                        "alignItems": "center",
+                        "flexDirection": "row",
+                        "justifyContent": "center",
+                      }
                     }
                   >
                     <Text
-                      selectable={false}
                       style={
                         [
                           {
@@ -541,17 +475,41 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                           },
                           [
                             {
+                              "color": "#0C0C0A",
                               "textAlign": "center",
-                              "width": "100%",
-                            },
-                            {
-                              "textTransform": "uppercase",
                             },
+                            undefined,
                           ],
                         ]
                       }
                     >
-                      get_out_of_checkout_modal.confirm_button
+                      <Text
+                        selectable={false}
+                        style={
+                          [
+                            {
+                              "color": "#0C0A0A",
+                              "fontFamily": "AreaNormal-Extrabold",
+                              "fontSize": 15,
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                              "letterSpacing": -0.2,
+                              "lineHeight": 20,
+                            },
+                            [
+                              {
+                                "textAlign": "center",
+                                "width": "100%",
+                              },
+                              {
+                                "textTransform": "uppercase",
+                              },
+                            ],
+                          ]
+                        }
+                      >
+                        get_out_of_checkout_modal.confirm_button
+                      </Text>
                     </Text>
                   </View>
                 </ViewManagerAdapter_ExpoLinearGradient>

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

@@ -1,9 +1,8 @@
 import React, { FC, useCallback, useMemo, useState } from "react";
 import { LayoutRectangle, View } from "react-native";
-import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Country } from "@lookiero/sty-psp-locale";
-import { Sticky } from "@lookiero/sty-psp-ui";
+import { Button, Sticky } from "@lookiero/sty-psp-ui";
 import { ProductVariantProjection } from "../../../../../../projection/bookedProductsVariants/bookedProductsVariants";
 import { size } from "../../../../../../projection/size/size";
 import { Body } from "../../../../components/layouts/body/Body";
@@ -70,10 +69,10 @@ const ItemActions: FC<ItemActionsProps> = ({
         <View style={style.actionsRow}>
           {!currentProductVariant.size.unique && productVariants ? (
             <Button
-              style={style.sizeSelector}
+              size="small"
+              style={{ button: style.sizeSelector }}
               testID="size-selector"
-              variant={BUTTON_VARIANT.SECONDARY}
-              small
+              variant="secondary"
               onPress={handleOnPressSelectField}
             >
               {changeSizeButtonText}
@@ -81,17 +80,17 @@ const ItemActions: FC<ItemActionsProps> = ({
           ) : null}
 
           <Button
-            style={style.returnButton}
+            size="small"
+            style={{ button: style.returnButton }}
             testID="return-button"
-            variant={BUTTON_VARIANT.SECONDARY}
-            small
+            variant="secondary"
             onPress={onReturn}
           >
             {returnButtonText}
           </Button>
         </View>
 
-        <Button testID="keep-button" small onPress={onKeep}>
+        <Button size="small" testID="keep-button" onPress={onKeep}>
           {keepButtonText}
         </Button>
       </Body>