@lookiero/checkout 15.2.3 → 15.3.0-beta.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## (2026-05-27)
+
+### Bug Fixes
+
+- checkout RadioReturnQuestionItem ([#505](https://github.com/lookiero/sty-sp-front/issues/505)) ([4a01deb](https://github.com/lookiero/sty-sp-front/commit/4a01deb17c7ebff417e203f28b58329570c7c01c))
+- **checkout:** clip and fill product variant images in XO ([#754](https://github.com/lookiero/sty-sp-front/issues/754)) ([8801c46](https://github.com/lookiero/sty-sp-front/commit/8801c466e8357b99410ef08e5d6323c6792fca67))
+- **notifications:** propagate bodyI18nValues through notification chain ([#727](https://github.com/lookiero/sty-sp-front/issues/727)) ([c8f1b30](https://github.com/lookiero/sty-sp-front/commit/c8f1b30a3bd5212b712d2243fdd1a6309b676321))
+- **slider:** correct price range slider alignment on Android ([#749](https://github.com/lookiero/sty-sp-front/issues/749)) ([9022d83](https://github.com/lookiero/sty-sp-front/commit/9022d8303fdcfd9f125fdb87cf41fc8df9db673a))
+- **ui:** carousel Bullets background color applied inside style object ([#757](https://github.com/lookiero/sty-sp-front/issues/757)) ([d764531](https://github.com/lookiero/sty-sp-front/commit/d764531a5e33c781b1e952a2310ba0fb91e799c6))
+
 # Changelog
 
 All notable changes to `@lookiero/checkout` are generated from Conventional Commits scoped to `apps/checkout`.

package/dist/src/ExpoRoot.js

@@ -61,10 +61,10 @@ setPaymentsBridge({
     },
     appVersion: RELEASE,
     graphqlUri: "/graphql",
-    useFeatureFlags: () => ({}),
     locale: () => "es-ES",
     scrollView: ScrollView,
     hostUrl: "",
+    host: "",
     tradename,
 });
 const kameleoonConfig = {

package/dist/src/infrastructure/projection/pricing/pricing.d.ts

@@ -0,0 +1,31 @@
+import { Tradename } from "@lookiero/sty-sp-tradename";
+import { PriceProjection } from "../../../projection/price/price";
+import { CheckoutPricingProjection } from "../../../projection/pricing/pricing";
+interface ServiceDto {
+    readonly discount: PriceProjection;
+    readonly finalPrice: PriceProjection;
+    readonly originalPrice: PriceProjection;
+    readonly prepaid: boolean;
+    readonly reference: string;
+    readonly paidWithPromocode?: boolean;
+}
+interface PricingDto {
+    readonly balanceDiscount: PriceProjection;
+    readonly discount: PriceProjection;
+    readonly discountPercentage: number;
+    readonly orderTotal: PriceProjection;
+    readonly pendingToPay: PriceProjection;
+    readonly service: ServiceDto;
+    readonly subtotal: PriceProjection;
+}
+interface ToPricingProjectionFunctionArgs {
+    readonly pricing: PricingDto;
+    readonly tradename: Tradename;
+    readonly migrated: boolean;
+}
+interface ToPricingProjectionFunction {
+    (args: ToPricingProjectionFunctionArgs): CheckoutPricingProjection;
+}
+declare const toPricingProjection: ToPricingProjectionFunction;
+export type { PricingDto };
+export { toPricingProjection };

package/dist/src/infrastructure/projection/pricing/pricing.js

@@ -0,0 +1,39 @@
+import { Tradename } from "@lookiero/sty-sp-tradename";
+import { CheckoutPricingContext, CheckoutPricingType, } from "../../../projection/pricing/pricing";
+const toPricingProjection = ({ pricing, tradename, migrated, }) => {
+    const shouldDisplayPsFeeModifier = tradename === Tradename.LOOKIERO || (tradename === Tradename.OUTFITTERY && !migrated);
+    const modifiers = [
+        {
+            amount: pricing.discount.amount,
+            type: CheckoutPricingType.DISCOUNT,
+            context: CheckoutPricingContext.PROMOCODE,
+            translationKey: "summary.discount",
+            percentage: pricing.discountPercentage,
+        },
+        {
+            amount: pricing.balanceDiscount.amount,
+            type: CheckoutPricingType.DISCOUNT,
+            context: CheckoutPricingContext.BALANCE,
+            translationKey: "summary.credit",
+        },
+        ...(shouldDisplayPsFeeModifier
+            ? [
+                {
+                    amount: pricing.service.finalPrice.amount,
+                    type: CheckoutPricingType.DISCOUNT,
+                    context: CheckoutPricingContext.PS_FEE,
+                    translationKey: "summary.fee",
+                },
+            ]
+            : []),
+    ]
+        .map((modifier) => ({ ...modifier, amount: Math.abs(modifier.amount) }))
+        .filter(({ amount }) => amount !== 0);
+    return {
+        currency: pricing.pendingToPay.currency,
+        finalPrice: pricing.pendingToPay.amount,
+        originalPrice: pricing.subtotal.amount,
+        modifiers,
+    };
+};
+export { toPricingProjection };

package/dist/src/infrastructure/ui/hooks/useCheckoutFlow.js

@@ -93,7 +93,7 @@ const useCheckoutFlow = ({ checkout: checkoutProjection, getAuthToken, onSuccess
         }
         return "idle";
     }, [startLegacyBoxCheckoutStatus, submitCheckoutStatus, checkoutBookingExpired]);
-    const paymentFlow = useMemo(() => (authToken ? React.createElement(PaymentFlow, { ref: paymentFlowRef, section: Section.BOX_CHECKOUT, token: authToken }) : null), [authToken]);
+    const paymentFlow = useMemo(() => (authToken ? React.createElement(PaymentFlow, { ref: paymentFlowRef, section: Section.BOX_CHECKOUT }) : null), [authToken]);
     return useMemo(() => [checkoutFlow, checkoutFlowStatus, paymentFlow], [checkoutFlow, paymentFlow, checkoutFlowStatus]);
 };
 export { useCheckoutFlow };

package/dist/src/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.js

@@ -4,9 +4,10 @@ import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 const PaymentInstrument = ({ useRedirect }) => {
     const { returnUrl } = useRedirect();
     const { customer } = useStaticInfo();
-    return (React.createElement(PaymentInstrumentSelect, { beforeRedirect: returnUrl ? () => Promise.resolve(returnUrl) : undefined, hasError: false, section: Section.BOX_CHECKOUT, userInformation: {
+    return (React.createElement(PaymentInstrumentSelect, { beforeRedirect: returnUrl ? () => Promise.resolve(returnUrl) : undefined, section: Section.BOX_CHECKOUT, userInformation: {
             email: customer.email,
             name: customer.name,
+            segment: customer.segment,
         }, showSingleUsePaymentMethods: true }));
 };
 export { PaymentInstrument };

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.d.ts

@@ -2,7 +2,6 @@ import { FC } from "react";
 import { StyleProp, TextStyle, ViewStyle } from "react-native";
 interface SelectModalStyle {
     readonly modalContent: StyleProp<ViewStyle>;
-    readonly option: StyleProp<ViewStyle>;
     readonly optionText: StyleProp<TextStyle>;
 }
 interface Option {

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.js

@@ -1,18 +1,27 @@
-import React, { useCallback, useMemo } from "react";
-import { TouchableHighlight, View } from "react-native";
-import { Text } from "@lookiero/sty-psp-ui";
-import { Modal } from "@lookiero/sty-psp-ui";
+import React, { useMemo } from "react";
+import { Pressable, View } from "react-native";
+import { Checkbox, Modal, Text } from "@lookiero/sty-psp-ui";
+import { Tradename } from "@lookiero/sty-sp-tradename";
+import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 import { style as modalStyle } from "./SelectModal.style";
 const SelectModal = ({ modalVisible, options, style: customStyle, testID, title, value, portalHostName, onChange = () => void 0, onClose = () => void 0, }) => {
-    const handleOnPressOption = useCallback((value) => {
-        onChange(value);
-        onClose();
-    }, [onClose, onChange]);
     const style = useMemo(() => modalStyle(), []);
+    const { tradename } = useStaticInfo();
     return (React.createElement(Modal, { portalHostName: portalHostName, testID: testID, visible: modalVisible, scroll: true, showCloseButton: true, onClose: onClose },
         React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
             title && (React.createElement(Text, { level: 3, style: style.modalTitle, variant: "heading" }, title)),
-            options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: optionValue, underlayColor: style.underlayColor, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
-                React.createElement(Text, { level: 3, style: [style.optionText, value === optionValue && style.textActive, customStyle?.optionText] }, label)))))));
+            React.createElement(View, { accessibilityRole: "radiogroup", style: style.container, testID: "options-radiogroup" }, options.map(({ label, value: optionValue }) => {
+                const checked = value === optionValue;
+                return (React.createElement(Pressable, { key: optionValue, accessibilityLabel: label, accessibilityRole: "radio", accessibilityState: { checked, disabled: checked }, disabled: checked, testID: optionValue, style: [
+                        style.wrapper,
+                        checked && style.wrapperChecked,
+                        tradename === Tradename.LOOKIERO && style.wrapperLookiero,
+                    ], accessible: true, onPress: () => {
+                        onChange(optionValue);
+                        onClose();
+                    } },
+                    React.createElement(Checkbox, { checked: checked }),
+                    React.createElement(Text, { style: style.text }, label)));
+            })))));
 };
 export { SelectModal };

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.style.d.ts

@@ -1,22 +1,33 @@
 declare const style: () => {
-    underlayColor: string;
+    container: {
+        gap: number;
+    };
     modalContent: {
-        paddingBottom: number;
         paddingHorizontal: number;
     };
     modalTitle: {
         marginBottom: number;
     };
-    option: {
-        borderBottomColor: string;
-        borderBottomWidth: number;
-        paddingVertical: number;
+    text: {
+        color: string;
+        flex: number;
+        marginLeft: number;
+    };
+    wrapper: {
+        alignItems: "center";
+        borderColor: string;
+        borderWidth: number;
+        flex: number;
+        flexDirection: "row";
+        padding: number;
     };
-    optionText: {
-        lineHeight: number;
+    wrapperChecked: {
+        borderColor: string;
+        borderWidth: number;
+        padding: number;
     };
-    textActive: {
-        color: string;
+    wrapperLookiero: {
+        borderRadius: number;
     };
 };
 export { style };

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.style.js

@@ -1,30 +1,38 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 const style = () => {
-    const { borderWidth1, colorBgPrimaryLight, colorBorderInteractive, colorTextMedium, space1, space5, space6 } = theme();
-    const styles = StyleSheet.create({
+    const { colorText, colorBorderInputFocus, colorBorderInteractive, space025, space3, space4, space6, borderWidth1, borderWidth2, borderRadius3, } = theme();
+    return StyleSheet.create({
+        container: {
+            gap: space3,
+        },
         modalContent: {
-            paddingBottom: space6,
             paddingHorizontal: space6,
         },
         modalTitle: {
-            marginBottom: space1,
+            marginBottom: space3,
+        },
+        text: {
+            color: colorText,
+            flex: 1,
+            marginLeft: space4,
         },
-        option: {
-            borderBottomColor: colorBorderInteractive,
-            borderBottomWidth: borderWidth1,
-            paddingVertical: space5,
+        wrapper: {
+            alignItems: "center",
+            borderColor: colorBorderInteractive,
+            borderWidth: borderWidth1,
+            flex: 1,
+            flexDirection: "row",
+            padding: space4,
         },
-        optionText: {
-            lineHeight: space6,
+        wrapperChecked: {
+            borderColor: colorBorderInputFocus,
+            borderWidth: borderWidth2,
+            padding: space4 - space025,
         },
-        textActive: {
-            color: colorTextMedium,
+        wrapperLookiero: {
+            borderRadius: borderRadius3,
         },
     });
-    return {
-        ...styles,
-        underlayColor: colorBgPrimaryLight,
-    };
 };
 export { style };

package/dist/src/version.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "15.2.3";
-export declare const RELEASE = "checkout@15.2.3";
+export declare const VERSION = "15.3.0-beta.0";
+export declare const RELEASE = "checkout@15.3.0-beta.0";

package/dist/src/version.js

@@ -1,2 +1,2 @@
-export const VERSION = "15.2.3";
-export const RELEASE = "checkout@15.2.3";
+export const VERSION = "15.3.0-beta.0";
+export const RELEASE = "checkout@15.3.0-beta.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "15.2.3",
+  "version": "15.3.0-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -51,7 +51,7 @@
     "@config-plugins/detox": "^6.0.0",
     "@lookiero/eslint-config-sty-psp": "*",
     "@lookiero/event": "^0.3",
-    "@lookiero/payments-front": "^9.2.0",
+    "@lookiero/payments-front": "14.1.0",
     "@lookiero/sty-psp-jest-config": "*",
     "@lookiero/sty-psp-prettier-config": "*",
     "@lookiero/sty-psp-scripts": "*",
@@ -83,7 +83,7 @@
     "@lookiero/event": "^0.3",
     "@lookiero/i18n": ">=3",
     "@lookiero/i18n-react": ">=3",
-    "@lookiero/payments-front": ">=9",
+    "@lookiero/payments-front": ">=14",
     "apollo-boost": "0.4.4",
     "expo": ">=54",
     "expo-font": ">=12",

package/src/ExpoRoot.tsx

@@ -5,7 +5,7 @@ import { Platform, ScrollView } from "react-native";
 import { Navigate, Route, Routes } from "react-router-native";
 import { Aurora } from "@lookiero/aurora";
 import { EventProvider } from "@lookiero/event";
-import { FeatureFlags, PaymentsQueryProvider, setPaymentsBridge } from "@lookiero/payments-front";
+import { PaymentsQueryProvider, setPaymentsBridge } from "@lookiero/payments-front";
 import { Country, Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment } from "@lookiero/sty-psp-logging";
 import { Segment } from "@lookiero/sty-psp-segment";
@@ -73,10 +73,10 @@ setPaymentsBridge({
   },
   appVersion: RELEASE,
   graphqlUri: "/graphql",
-  useFeatureFlags: () => ({}) as Record<FeatureFlags, boolean>,
   locale: () => "es-ES",
   scrollView: ScrollView,
   hostUrl: "",
+  host: "",
   tradename,
 });
 

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

@@ -1,7 +1,7 @@
 import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { CheckoutTrackingEvent } from "src/infrastructure/tracking/tracking";
 import { CommandStatus } from "@lookiero/messaging-react";
-import { PaymentFlow, PaymentFlowRef, PaymentPayload, Section } from "@lookiero/payments-front";
+import { PaymentFlow, PaymentFlowStrategies, PaymentPayload, Section } from "@lookiero/payments-front";
 import { LegacyBoxCheckoutStrategyPayload } from "@lookiero/payments-front/build/components/PaymentFlow/internals/strategies/LegacyBoxCheckoutStrategy";
 import { useLogger } from "@lookiero/sty-psp-logging";
 import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
@@ -60,7 +60,7 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({ checkout: checkoutProjection
     basePath,
     tradename,
   } = useStaticInfo();
-  const paymentFlowRef = useRef<PaymentFlowRef>(null);
+  const paymentFlowRef = useRef<PaymentFlowStrategies>(null);
   const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
     checkoutId: checkoutProjection?.id as string,
   });
@@ -157,7 +157,7 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({ checkout: checkoutProjection
   }, [startLegacyBoxCheckoutStatus, submitCheckoutStatus, checkoutBookingExpired]);
 
   const paymentFlow = useMemo(
-    () => (authToken ? <PaymentFlow ref={paymentFlowRef} section={Section.BOX_CHECKOUT} token={authToken} /> : null),
+    () => (authToken ? <PaymentFlow ref={paymentFlowRef} section={Section.BOX_CHECKOUT} /> : null),
     [authToken],
   );
 

package/src/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.tsx

@@ -12,11 +12,11 @@ const PaymentInstrument: FC<PaymentInstrumentProps> = ({ useRedirect }) => {
   return (
     <PaymentInstrumentSelect
       beforeRedirect={returnUrl ? () => Promise.resolve(returnUrl) : undefined}
-      hasError={false}
       section={Section.BOX_CHECKOUT}
       userInformation={{
         email: customer.email,
         name: customer.name,
+        segment: customer.segment,
       }}
       showSingleUsePaymentMethods
     />

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

@@ -7,6 +7,10 @@ import { I18nMessages } from "../../../../i18n/i18n";
 import { render } from "../../../../test/render";
 import { ItemActions } from "./ItemActions";
 
+jest.mock("../../../../hooks/useStaticInfo", () => ({
+  useStaticInfo: () => ({ tradename: "LOOKIERO" }),
+}));
+
 const productVariantProjection: ProductVariantProjection[] = [
   {
     id: "2875e66d-4e2a-47b1-a58b-61e316dcc66a",