@lookiero/checkout 9.13.0 → 10.0.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "9.13.0",
+  "version": "10.0.0-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -24,10 +24,10 @@
     "@lookiero/sty-psp-ab-testing": "^0.3",
     "@lookiero/sty-psp-expo-config": "^0.2",
     "@lookiero/sty-psp-http": "^2.0",
-    "@lookiero/sty-psp-i18n": "^0.4",
+    "@lookiero/sty-psp-i18n": "^0.2",
     "@lookiero/sty-psp-locale": "^0.4",
     "@lookiero/sty-psp-logging": "^0.5",
-    "@lookiero/sty-psp-notifications": "^0.8",
+    "@lookiero/sty-psp-notifications": "^0.6",
     "@lookiero/sty-psp-react-native": "^0.3",
     "@lookiero/sty-psp-segment": "^0.1",
     "@lookiero/sty-psp-storage": "^0.2",
@@ -46,7 +46,7 @@
     "@cypress/webpack-preprocessor": "^6.0.2",
     "@lookiero/eslint-config-sty-psp": "*",
     "@lookiero/event": "^0.3",
-    "@lookiero/payments-front": "6.0.3",
+    "@lookiero/payments-front": "7.0.0-LK-37705-2025.3.4.164034",
     "@lookiero/sty-psp-jest-config": "*",
     "@lookiero/sty-psp-prettier-config": "*",
     "@lookiero/sty-psp-scripts": "*",
@@ -61,6 +61,7 @@
     "expo-crypto": "~13.0.2",
     "jest-mock-extended": ">=3",
     "jest-when": ">=3",
+    "react-intl": "^6.5.1",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-get-random-values": "~1.11.0",
     "react-native-reanimated": "~3.10.1",
@@ -73,9 +74,9 @@
     "@lookiero/aurora-fonts": ">=2",
     "@lookiero/aurora-iconfont": ">=3",
     "@lookiero/event": "^0.3",
-    "@lookiero/i18n": ">=2",
-    "@lookiero/i18n-react": ">=2",
-    "@lookiero/payments-front": "6.0.3",
+    "@lookiero/i18n": ">=0.9",
+    "@lookiero/i18n-react": ">=0.9",
+    "@lookiero/payments-front": "7.0.0-LK-37705-2025.3.4.164034",
     "apollo-boost": "0.4.4",
     "expo": ">=51",
     "expo-font": ">=12",

package/src/ExpoRoot.tsx

@@ -1,3 +1,4 @@
+import { PortalProvider } from "@gorhom/portal";
 import { useFonts } from "expo-font";
 import "expo/build/Expo.fx";
 import React, { FC, useCallback, useState } from "react";
@@ -17,25 +18,26 @@ import { KameleoonEnvironment } from "./infrastructure/ab-testing/kameleoonEnvir
 import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
 import { bootstrap as checkoutMockBootstrap } from "./infrastructure/delivery/bootstrap.mock";
 import { root } from "./infrastructure/ui/Root";
-import { DOMAIN } from "./infrastructure/ui/i18n/i18n";
 import { Router } from "./infrastructure/ui/routing/router/Router";
 import { Customer } from "./projection/customer/customer";
-import { Order } from "./projection/order/order";
-import { Subscription } from "./projection/subscription/subscription";
+import { OrderProjection } from "./projection/order/order";
+import { SubscriptionProjection } from "./projection/subscription/subscription";
 import { VERSION } from "./version";
 
-const locale: Locale = Locale.en_GB;
-const subscription: Subscription = "b";
-const order: Order = {
+const locale: Locale = Locale.es_ES;
+const subscription: SubscriptionProjection = "b";
+const order: OrderProjection = {
   isFirstOrder: false,
   orderNumber: 3687582,
   coupon: "MYLOOKIERO",
 };
 
 const customer: Customer = {
-  customerId: "cc6dcaf3-9ec6-4b1e-bfbb-1ac404c6c162",
-  country: Country.ES,
+  customerId: "9cfb056e-6008-44b1-9075-320479bf92ac",
+  country: Country.NL,
   segment: Segment.WOMEN,
+  email: "email@example.com",
+  name: "Adèle Léonce Émilie",
 };
 
 const sentryConfig: SentryEnvironment = {
@@ -52,7 +54,7 @@ const apiUrl =
       ? "/local-to-dev"
       : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDg3OTAsImV4cCI6MTc0NDQ0MzcwMiwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjQtMTEtMDgiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiNzRjYjRmNzYtM2YxNC00OTgzLTgxYTYtMmVlMmE5YTI3NWQ0IiwiaWF0IjoxNzQxNzY1MzAyfQ.VrfjWZlhuG8dhDSFTbyGyClRFGbhdx9SglkE8rEEJyE";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDk0NjYsImV4cCI6MTc0MjQ3MDI5OSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTExIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6ImQzYzIzNTRiLTk4MTEtNDZkNC1iMmJhLTVmYmEwMTJlZDk0ZCIsImlhdCI6MTc0MDA1MTA5OX0.AkuUZTsn9mgplQwatg0dPKyv1Hsc6r267UMahxMH19g";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const externalTranslationsUrl =
@@ -65,7 +67,7 @@ const translations: EndpointFunction[] = [
   (locale) =>
     translationExternalEndpoint({
       translationsUrl: externalTranslationsUrl,
-      projects: [["checkout"]],
+      projects: [["user-area-front"], ["inventory-catalog", "feature;feature_value;Color"], ["checkout"]],
     })(locale),
 ];
 
@@ -93,6 +95,7 @@ setPaymentsBridge({
   useFeatureFlags: () => ({}),
   locale: () => Promise.resolve("es-ES"),
   scrollView: ScrollView,
+  hostUrl: "",
 });
 
 const kameleoonConfig: KameleoonEnvironment = {
@@ -106,7 +109,7 @@ const { Component: Messaging, queryBus } =
     : checkoutBootstrap({ apiUrl: () => apiUrl, getAuthToken });
 const I18n = i18n({
   fetchTranslation: fetchTranslations({ translations }),
-  domain: DOMAIN,
+  contextId: "CheckoutI18n",
 });
 const Root = root({
   Messaging,
@@ -130,35 +133,38 @@ const ExpoRoot: FC = () => {
   const onNotAccessible = useCallback(() => setIsAccessible(false), []);
 
   return fontsLoaded ? (
-    <PaymentsQueryProvider>
-      <EventProvider>
-        <Aurora>
-          {isAccessible === false && <Text heading={true}>Checkout is not accessible!</Text>}
+    <PortalProvider>
+      <PaymentsQueryProvider>
+        <EventProvider>
+          <Aurora>
+            {isAccessible === false && <Text heading={true}>Checkout is not accessible!</Text>}
 
-          <Router>
-            <Routes>
-              <Route
-                path="/checkout/*"
-                element={
-                  <Root
-                    basePath="/checkout"
-                    customer={customer}
-                    layout={DummyLayout}
-                    locale={locale}
-                    order={order}
-                    subscription={subscription}
-                    useRedirect={useRedirect}
-                    onNotAccessible={onNotAccessible}
-                  />
-                }
-              />
+            <Router>
+              <Routes>
+                <Route
+                  path="/checkout/*"
+                  element={
+                    <Root
+                      basePath="/checkout"
+                      customer={customer}
+                      layout={DummyLayout}
+                      locale={locale}
+                      order={order}
+                      subscription={subscription}
+                      useRedirect={useRedirect}
+                      onCheckoutFlowSuccess={() => console.log("Checkout flow success!")}
+                      onNotAccessible={onNotAccessible}
+                    />
+                  }
+                />
 
-              <Route element={<Navigate to="/checkout" replace />} path="*" />
-            </Routes>
-          </Router>
-        </Aurora>
-      </EventProvider>
-    </PaymentsQueryProvider>
+                <Route element={<Navigate to="/checkout" replace />} path="*" />
+              </Routes>
+            </Router>
+          </Aurora>
+        </EventProvider>
+      </PaymentsQueryProvider>
+    </PortalProvider>
   ) : null;
 };
 

package/src/infrastructure/domain/checkoutBooking/react/useBlockCheckoutBooking.ts

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import invariant from "tiny-invariant";
 import { CommandStatus, useCommand } from "@lookiero/messaging-react";
 import { Logger } from "@lookiero/sty-psp-logging";
 import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
@@ -13,7 +14,7 @@ interface BlockCheckoutBookingFunction {
 type UseBlockCheckoutBooking = [blockCheckoutBooking: BlockCheckoutBookingFunction, status: CommandStatus];
 
 interface UseBlockCheckoutBookingFunctionArgs {
-  readonly checkoutBookingId: string;
+  readonly checkoutBookingId: string | undefined;
   readonly logger: Logger;
 }
 
@@ -26,6 +27,8 @@ const useBlockCheckoutBooking: UseBlockCheckoutBookingFunction = ({ checkoutBook
   const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
 
   const blockCheckoutBooking = useCallback(async () => {
+    invariant(checkoutBookingId, "checkoutBookingId is required");
+
     try {
       await commandBus(
         blockCheckoutBookingCommand({

package/src/infrastructure/projection/pricing/react/useViewPricingByCheckoutId.ts

@@ -23,7 +23,7 @@ const DEFAULT_QUERY_OPTIONS: QueryOptions = {
 };
 
 interface UseViewPricingByCheckoutIdFunctionArgs {
-  readonly checkoutId: string;
+  readonly checkoutId: string | undefined;
   readonly queryOptions?: QueryOptions;
 }
 
@@ -36,7 +36,7 @@ const useViewPricingByCheckoutId: UseViewPricingByCheckoutIdFunction = ({
   queryOptions = DEFAULT_QUERY_OPTIONS,
 }) =>
   useQuery({
-    query: viewPricingByCheckoutId({ checkoutId }),
+    query: viewPricingByCheckoutId({ checkoutId: checkoutId as string }),
     contextId: MESSAGING_CONTEXT_ID,
     invalidation: shouldInvalidate,
     options: {
@@ -44,6 +44,7 @@ const useViewPricingByCheckoutId: UseViewPricingByCheckoutIdFunction = ({
       staleTime: Infinity,
       retry: false,
       refetchOnWindowFocus: false,
+      enabled: Boolean(checkoutId),
     },
   });
 

package/src/infrastructure/tracking/tracking.ts

@@ -2,7 +2,7 @@ import { BaseTrackingEvent, TrackingEventCategory } from "@lookiero/sty-psp-trac
 import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
 import { Currency } from "../../domain/checkoutItem/model/currency";
 import { MediaPerspective } from "../../projection/checkoutItem/checkoutItem";
-import { Subscription } from "../../projection/subscription/subscription";
+import { SubscriptionProjection } from "../../projection/subscription/subscription";
 
 const PROJECT = "checkout";
 
@@ -121,7 +121,7 @@ interface CheckoutTrackingEvent
       readonly actionField: {
         readonly items: number;
         readonly currencyCode: Currency;
-        readonly subscription: Subscription;
+        readonly subscription: SubscriptionProjection;
         readonly coupon: string | null;
         readonly orderId: number;
         readonly value: number;

package/src/infrastructure/tracking/useTrackCheckout.ts

@@ -1,84 +1,94 @@
 import { useCallback } from "react";
+import invariant from "tiny-invariant";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { useEmitUserEvent } from "@lookiero/sty-psp-tracking";
+import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
 import { Currency } from "../../domain/checkoutItem/model/currency";
-import { Subscription } from "../../projection/subscription/subscription";
+import { CheckoutProjection } from "../../projection/checkout/checkout";
+import { OrderProjection } from "../../projection/order/order";
+import { PricingProjection } from "../../projection/pricing/pricing";
+import { SubscriptionProjection } from "../../projection/subscription/subscription";
 import { PROJECT, TrackingPage } from "./tracking";
 import { CheckoutTrackingEvent, TrackingEventName, TrackingEventCategory } from "./tracking";
 
-interface TrackCheckoutFunctionArgs {
-  readonly userId: string;
-  readonly totalReplacedFor: number;
-  readonly isFirstOrder: boolean;
-  readonly totalCheckoutItemsKept: number;
-  readonly currencyCode: Currency;
-  readonly subscription: Subscription;
-  readonly coupon: string | null;
-  readonly orderNumber: number;
-  readonly pendingToPay: number;
-}
 interface TrackCheckoutFunction {
-  (args: TrackCheckoutFunctionArgs): void;
+  (): void;
 }
 
 interface UseTrackCheckoutFunctionArgs {
-  readonly page: TrackingPage;
+  readonly order: OrderProjection;
+  readonly checkout: CheckoutProjection | undefined;
+  readonly pricing: PricingProjection | undefined;
+  readonly subscription: SubscriptionProjection;
+  readonly userId: string;
   readonly country: Country;
-  readonly checkoutId: string | undefined;
   readonly segment: Segment;
 }
+
 interface UseTrackCheckoutFunction {
   (args: UseTrackCheckoutFunctionArgs): TrackCheckoutFunction;
 }
 
-const useTrackCheckout: UseTrackCheckoutFunction = ({ page, country, checkoutId, segment }) => {
+const useTrackCheckout: UseTrackCheckoutFunction = ({
+  order,
+  checkout,
+  pricing,
+  subscription,
+  segment,
+  country,
+  userId,
+}) => {
   const emitUserEvent = useEmitUserEvent<CheckoutTrackingEvent>();
+  const { coupon, isFirstOrder, orderNumber } = order;
 
-  const trackCheckout: TrackCheckoutFunction = useCallback(
-    ({
-      coupon,
-      currencyCode,
-      isFirstOrder,
-      orderNumber,
-      pendingToPay,
-      subscription,
-      totalCheckoutItemsKept,
-      totalReplacedFor,
-      userId,
-    }) => {
-      if (!checkoutId) {
-        return;
-      }
+  const trackCheckout: TrackCheckoutFunction = useCallback(() => {
+    invariant(checkout, "Checkout must be defined to track checkout");
+
+    const checkoutItemsKept = checkout.items.filter(
+      (checkoutItem) =>
+        checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED,
+    );
+    const totalReplacedFor = checkoutItemsKept?.filter(({ replacedFor }) => Boolean(replacedFor)).length || 0;
 
-      const checkoutTrackingEvent: CheckoutTrackingEvent = {
-        event: TrackingEventName.CHECKOUT,
-        eventCategory: TrackingEventCategory.ECOMMERCE,
-        section: `${PROJECT}_${page}`,
-        store: country,
-        segment,
-        checkoutId,
-        userId,
-        sizeChanges: totalReplacedFor,
-        isFirstOrder,
-        ecommerce: {
-          checkout: {
-            actionField: {
-              items: totalCheckoutItemsKept,
-              currencyCode,
-              subscription,
-              coupon,
-              orderId: orderNumber,
-              value: pendingToPay,
-            },
+    const checkoutTrackingEvent: CheckoutTrackingEvent = {
+      event: TrackingEventName.CHECKOUT,
+      eventCategory: TrackingEventCategory.ECOMMERCE,
+      section: `${PROJECT}_${TrackingPage.CHECKOUT}`,
+      store: country,
+      segment,
+      checkoutId: checkout.id,
+      userId,
+      sizeChanges: totalReplacedFor,
+      isFirstOrder,
+      ecommerce: {
+        checkout: {
+          actionField: {
+            items: checkoutItemsKept.length || 0,
+            currencyCode: pricing?.pendingToPay.currency as Currency,
+            subscription,
+            coupon,
+            orderId: orderNumber,
+            value: (pricing?.pendingToPay.amount as number) / 100,
           },
         },
-      };
+      },
+    };
 
-      emitUserEvent(checkoutTrackingEvent);
-    },
-    [checkoutId, country, emitUserEvent, page, segment],
-  );
+    emitUserEvent(checkoutTrackingEvent);
+  }, [
+    checkout,
+    country,
+    coupon,
+    emitUserEvent,
+    isFirstOrder,
+    orderNumber,
+    pricing?.pendingToPay.amount,
+    pricing?.pendingToPay.currency,
+    segment,
+    subscription,
+    userId,
+  ]);
 
   return trackCheckout;
 };

package/src/infrastructure/ui/Root.tsx

@@ -9,8 +9,8 @@ import { Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment, SentryLoggerFunctionArgs, sentryLogger, sentryLoggerHOC } from "@lookiero/sty-psp-logging";
 import { Layout } from "@lookiero/sty-psp-ui";
 import { Customer } from "../../projection/customer/customer";
-import { Order } from "../../projection/order/order";
-import { Subscription } from "../../projection/subscription/subscription";
+import { OrderProjection } from "../../projection/order/order";
+import { SubscriptionProjection } from "../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../ab-testing/kameleoonEnvironment";
 import { QueryBusProvider } from "./hooks/useQueryBus";
 import { Routing } from "./routing/Routing";
@@ -31,13 +31,13 @@ interface RootFunction {
 
 interface RootProps {
   readonly basePath: string;
-  readonly locale?: Locale;
+  readonly locale: Locale;
   readonly customer: Customer;
-  readonly order: Order | undefined;
-  readonly subscription: Subscription | undefined;
+  readonly order: OrderProjection;
+  readonly subscription: SubscriptionProjection;
   readonly layout: Layout;
   readonly onNotAccessible: () => void;
-  readonly onCheckoutSubmitted?: () => void;
+  readonly onCheckoutFlowSuccess: () => void;
   readonly useRedirect: () => Record<string, string>;
   readonly useRoutes?: typeof reactRouterUseRoutes;
 }
@@ -57,13 +57,13 @@ const root: RootFunction = ({
   // eslint-disable-next-line react/display-name, react/prop-types
   const Root = ({
     basePath,
-    locale = Locale.en_GB,
+    locale,
     customer,
     order,
     subscription,
     layout,
     onNotAccessible,
-    onCheckoutSubmitted,
+    onCheckoutFlowSuccess,
     useRedirect,
     useRoutes = reactRouterUseRoutes,
   }: RootProps) => {
@@ -84,7 +84,7 @@ const root: RootFunction = ({
             subscription={subscription}
             useRedirect={useRedirect}
             useRoutes={useRoutes}
-            onCheckoutSubmitted={onCheckoutSubmitted}
+            onCheckoutFlowSuccess={onCheckoutFlowSuccess}
             onI18nError={development ? undefined : handleOnI18nError}
             onNotAccessible={onNotAccessible}
           />

package/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.style.ts

@@ -1,11 +1,10 @@
 import { StyleSheet } from "react-native";
-import { theme } from "@lookiero/sty-psp-ui";
 
-const { fontMap } = theme();
+// TODO: get the font family from Aurora
 
 const style = StyleSheet.create({
   textBold: {
-    fontFamily: fontMap.Action,
+    fontFamily: "AreaNormal-Extrabold",
   },
 });
 

package/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import { ALIGN, DISPLAY, InfoBox, INFOBOX_TYPE, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN, I18nMessages } from "../../../i18n/i18n";
+import { I18nMessages } from "../../../i18n/i18n";
 import { style } from "./FiveItemsDiscountBanner.style";
 
 interface FiveItemsDiscountBannerProps {
@@ -9,11 +9,10 @@ interface FiveItemsDiscountBannerProps {
 }
 const FiveItemsDiscountBanner: FC<FiveItemsDiscountBannerProps> = ({ fiveItemsDiscount }) => {
   const bannerText = useI18nMessage({
-    domain: DOMAIN,
     id: I18nMessages.BANNER_DISCOUNT_TEXT,
     values: {
       discount: fiveItemsDiscount.toString(),
-      b: (chunks: string[]) => (
+      b: (chunks) => (
         <Text as="span" display={DISPLAY.INLINE} level={2} style={style.textBold}>
           {chunks}
         </Text>

package/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/__snapshots__/FiveItemsDiscountBanner.test.tsx.snap

@@ -100,7 +100,7 @@ exports[`FiveItemsDiscountBanner component matches the snapshot 1`] = `
                   "paddingBottom": 0,
                   "paddingLeft": 0,
                   "paddingRight": 0,
-                  "paddingTop": 4,
+                  "paddingTop": 5,
                 },
               ]
             }

package/src/infrastructure/ui/components/atoms/price/Price.tsx

@@ -3,7 +3,6 @@ import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nNumber } from "@lookiero/i18n-react";
 import { PriceProjection } from "../../../../../projection/price/price";
-import { DOMAIN } from "../../../i18n/i18n";
 import { style } from "./Price.style";
 
 type PriceVariant = "default" | "detail" | "subtotal" | "total";
@@ -30,13 +29,11 @@ interface PriceProps {
 const Price: FC<PriceProps> = ({ price, variant = "default", withPercentage = false }) => {
   const isDiscounted = price.discountedPrice && price.discountedPrice.percentage > 0;
   const productPrice = useI18nNumber({
-    domain: DOMAIN,
     value: price.amount / 100,
     style: "currency",
     currency: price.currency,
   });
   const productDiscountedPrice = useI18nNumber({
-    domain: DOMAIN,
     value: (price.discountedPrice?.amount || 0) / 100,
     style: "currency",
     currency: price.currency,

package/src/infrastructure/ui/components/atoms/price/__snapshots__/Price.test.tsx.snap

@@ -51,7 +51,7 @@ exports[`Price atom matches the snapshot for a discounted price: discounted pric
             "paddingBottom": 0,
             "paddingLeft": 0,
             "paddingRight": 0,
-            "paddingTop": 0,
+            "paddingTop": 4,
           },
         ]
       }
@@ -81,7 +81,7 @@ exports[`Price atom matches the snapshot for a discounted price: discounted pric
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
-              "paddingTop": 0,
+              "paddingTop": 4,
               "textDecorationLine": "line-through",
             },
           ]
@@ -146,7 +146,7 @@ exports[`Price atom matches the snapshot for a non-discounted price: non-discoun
             "paddingBottom": 0,
             "paddingLeft": 0,
             "paddingRight": 0,
-            "paddingTop": 0,
+            "paddingTop": 4,
           },
         ]
       }

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.ts

@@ -1,37 +1,16 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet, ViewStyle } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const {
-  colorBorderActionSecondary,
-  colorBgActionPrimaryActive,
-  colorTextActionPrimary,
-  borderWidth2,
-  borderRadiusFull,
-  space6,
-  space16,
-} = theme();
-
-const HEIGHT = space16;
+const { colorBorderActionSecondary, borderWidth2, borderStyle } = theme();
 
 const style = StyleSheet.create({
   button: {
-    alignContent: "center",
     borderColor: colorBorderActionSecondary,
-    borderRadius: borderRadiusFull,
+    borderStyle: borderStyle,
     borderWidth: borderWidth2,
     flex: 1,
-    height: HEIGHT,
-    justifyContent: "center",
     marginHorizontal: 12,
-    paddingLeft: space6,
-    paddingRight: space6,
-  },
-  buttonActive: {
-    backgroundColor: colorBgActionPrimaryActive,
-  },
-  textActive: {
-    color: colorTextActionPrimary,
-  },
+  } as ViewStyle,
 });
 
 export { style };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.tsx

@@ -1,14 +1,10 @@
 import React, { useCallback } from "react";
-import { TouchableOpacity } from "react-native";
-import { ALIGN, Text } from "@lookiero/aurora";
+import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
 import { style } from "./ButtonCheckoutQuestionItem.style";
 
-const ACTIVE_OPACITY = 0.6;
-
 const ButtonCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
   checkoutQuestionParentId,
@@ -16,24 +12,22 @@ const ButtonCheckoutQuestionItem: CheckoutQuestionItem = ({
 }: CheckoutQuestionItemProps) => {
   const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
 
-  const optionText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
+  const optionText = useI18nMessage({ id: checkoutQuestion.name });
   const handleOnPress = useCallback(
     () => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }),
     [onChange, checkoutQuestion.id, checkoutQuestionParentId],
   );
 
   return (
-    <TouchableOpacity
+    <Button
       accessibilityLabel={testID}
-      activeOpacity={ACTIVE_OPACITY}
-      style={[style.button, feedback === checkoutQuestion.id && style.buttonActive]}
+      style={style.button}
       testID={testID}
+      variant={feedback === checkoutQuestion.id ? BUTTON_VARIANT.PRIMARY : BUTTON_VARIANT.SECONDARY}
       onPress={handleOnPress}
     >
-      <Text align={ALIGN.CENTER} level={3} style={feedback === checkoutQuestion.id && style.textActive} action>
-        {optionText}
-      </Text>
-    </TouchableOpacity>
+      {optionText}
+    </Button>
   );
 };