@lookiero/checkout 14.8.1 → 14.8.2

package/cypress/integration/checkout.spec.ts

@@ -6,7 +6,7 @@ import { checkoutBooking } from "../../src/infrastructure/projection/checkoutBoo
 import { checkoutFeedbackDefinition } from "../../src/infrastructure/projection/checkoutFeedback/checkoutFeedbackDefinition.mock";
 import { checkoutItem } from "../../src/infrastructure/projection/checkoutItem/checkoutItem.mock";
 import { paymentFlowPayload } from "../../src/infrastructure/projection/payment/paymentFlowPayload.mock";
-import { pricing } from "../../src/infrastructure/projection/pricing/pricing.mock";
+import { mockPricingDto, pricing } from "../../src/infrastructure/projection/pricing/pricing.mock";
 import { returnQuestions } from "../../src/infrastructure/projection/returnQuestion/returnQuestions.mock";
 import { Routes } from "../../src/infrastructure/ui/routing/routes";
 import { CheckoutFeedbackQuestionType } from "../../src/projection/checkoutFeedback/checkoutFeedback.constants";
@@ -130,7 +130,7 @@ describe("Checkout", () => {
     interceptViewFiveItemsDiscountByCustomerId(0);
     interceptViewBookedProductsVariantsForCheckoutItem(bookedProductsVariants);
     interceptListReturnQuestionsByCheckoutItemId(returnQuestions);
-    interceptViewPricingByCheckoutId(pricing());
+    interceptViewPricingByCheckoutId(mockPricingDto);
     interceptViewPaymentFlowPayloadByCheckoutId(paymentFlowPayload);
     interceptViewCheckoutFeedbackDefinitionByCheckoutId(checkoutFeedbackDefinition);
     interceptViewCheckoutBookingById(checkoutBooking);

package/cypress/support/interceptViewPricingByCheckoutId.ts

@@ -1,6 +1,7 @@
+import { PricingDto } from "../../src/infrastructure/projection/pricing/pricing";
 import { CheckoutPricingProjection } from "../../src/projection/pricing/pricing";
 
-const interceptViewPricingByCheckoutId = (response: CheckoutPricingProjection) =>
-  cy.intercept({ method: "POST", url: "/local-to-dev/view-checkout-pricing-by-checkout-id" }, { body: response });
+const interceptViewPricingByCheckoutId = (response: PricingDto) =>
+  cy.intercept({ method: "POST", url: "/local-to-dev/view-pricing-by-checkout-id" }, { body: { result: response } });
 
 export { interceptViewPricingByCheckoutId };

package/dist/index.d.ts

@@ -19,6 +19,8 @@ interface FirstAvailableCheckoutByCustomerIdFunction {
 interface BootstrapFunctionArgs {
     readonly getAuthToken: () => Promise<string>;
     readonly apiUrl: () => string;
+    readonly tradename: Tradename;
+    readonly migrated: boolean;
     readonly sentry: () => SentryEnvironment;
     readonly kameleoon: () => KameleoonEnvironment;
 }

package/dist/index.js

@@ -6,8 +6,8 @@ import { CheckoutStatus } from "./src/domain/checkout/model/checkout";
 import { bootstrap as checkoutBootstrap } from "./src/infrastructure/delivery/bootstrap";
 import { root } from "./src/infrastructure/ui/Root";
 import { viewFirstAvailableCheckoutByCustomerId } from "./src/projection/checkout/viewFirstAvailableCheckoutByCustomerId";
-const bootstrap = ({ apiUrl, getAuthToken, sentry, kameleoon }) => {
-    const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, getAuthToken });
+const bootstrap = ({ apiUrl, getAuthToken, tradename, migrated, sentry, kameleoon }) => {
+    const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, getAuthToken, tradename, migrated });
     const firstAvailableCheckoutByCustomerId = ({ customerId }) => queryBus(viewFirstAvailableCheckoutByCustomerId({ customerId: customerId }));
     return {
         root: root({ Messaging, queryBus, getAuthToken, sentry, kameleoon }),

package/dist/src/ExpoRoot.js

@@ -17,10 +17,11 @@ import { root } from "./infrastructure/ui/Root";
 import { Router } from "./infrastructure/ui/routing/router/Router";
 import { RELEASE } from "./version";
 const tradename = Tradename.LOOKIERO;
+const migrated = false;
 const theme = themeByTradename({ tradename });
 const locale = Locale.es_ES;
 const customer = {
-    customerId: "0d26cc55-b59e-4cde-971d-e587673f691e",
+    customerId: "e4450481-f8d1-47bd-a2f0-a8cb0d292bcd",
     country: Country.ES,
     segment: Segment.WOMEN,
     email: "email@example.com",
@@ -40,7 +41,7 @@ const apiUrl = Platform.OS !== "web"
             ? "/local-to-dev"
             : "http://localhost:3004/local-to-dev"
         : "/checkout/api";
-const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzNzI0MjA2LCJleHAiOjE3NzMyNTgxNDYsImRpc3BsYXlOYW1lIjoibWFpbC5kZXYrdGRwLmMwN2NiYTQ3LTc5MDUtNDE0Yi04Y2ViLTIzZDIxMTgyZDgzMEBsb29raWVyby5jb20iLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJ1dWlkIjoiMGQyNmNjNTUtYjU5ZS00Y2RlLTk3MWQtZTU4NzY3M2Y2OTFlIiwiaWF0IjoxNzczMjI5MzQ2fQ.qEd3wCB6qbMBCZnOWa3sa_aC-FDJe_f1AshhXYq1MIM";
+const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzNzI1NDU1LCJleHAiOjE3NzQwMjg4NTUsImRpc3BsYXlOYW1lIjoibWFpbC5kZXYrdGRwLjE4ZjUxODgxLTBkMWMtNDVhYy1iNzhkLWU5ODliYzRkZmFhNkBsb29raWVyby5jb20iLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJ1dWlkIjoiZTQ0NTA0ODEtZjhkMS00N2JkLWEyZjAtYThjYjBkMjkyYmNkIiwiaWF0IjoxNzc0MDAwMDU1fQ.iJflcz8dn3U516LdSht7_P2ixe_-OsEiSfvCvOTGYsw";
 const getAuthToken = () => Promise.resolve(authToken);
 const useRedirect = () => ({
     returnUrl: "https://web2.dev.aws.lookiero.es/user/",
@@ -73,7 +74,7 @@ const kameleoonConfig = {
 };
 const { Component: Messaging, queryBus } = process.env.EXPO_PUBLIC_APP_VARIANT === "test"
     ? checkoutMockBootstrap()
-    : checkoutBootstrap({ apiUrl: () => apiUrl, getAuthToken });
+    : checkoutBootstrap({ apiUrl: () => apiUrl, getAuthToken, tradename, migrated });
 const Root = root({
     Messaging,
     queryBus,
@@ -100,7 +101,7 @@ const ExpoRoot = () => {
                     isAccessible === false && React.createElement(Text, { variant: "heading" }, "Checkout is not accessible!"),
                     React.createElement(Router, null,
                         React.createElement(Routes, null,
-                            React.createElement(Route, { path: "/checkout/*", element: React.createElement(Root, { basePath: "/checkout", customer: customer, layout: DummyLayout, locale: locale, tradename: tradename, useRedirect: useRedirect, onCheckoutFlowSuccess: () => console.log("Checkout flow success!"), onNotAccessible: onNotAccessible }) }),
+                            React.createElement(Route, { path: "/checkout/*", element: React.createElement(Root, { basePath: "/checkout", customer: customer, layout: DummyLayout, locale: locale, migrated: migrated, tradename: tradename, useRedirect: useRedirect, onCheckoutFlowSuccess: () => console.log("Checkout flow success!"), onNotAccessible: onNotAccessible }) }),
                             React.createElement(Route, { element: React.createElement(Navigate, { to: "/checkout", replace: true }), path: "*" })))))))) : null;
 };
 export { ExpoRoot };

package/dist/src/infrastructure/delivery/bootstrap.d.ts

@@ -1,7 +1,10 @@
 import { BuildBootstrapFunctionReturn } from "@lookiero/messaging-react";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 interface BootstrapFunctionArgs {
     readonly getAuthToken: () => Promise<string>;
     readonly apiUrl: () => string;
+    readonly tradename: Tradename;
+    readonly migrated: boolean;
 }
 interface BootstrapFunction {
     (args: BootstrapFunctionArgs): BuildBootstrapFunctionReturn;

package/dist/src/infrastructure/delivery/bootstrap.js

@@ -19,7 +19,7 @@ import { httpPricingByCheckoutIdView } from "../projection/pricing/httpPricingBy
 import { httpReturnQuestionsByCheckoutItemIdView } from "../projection/returnQuestion/httpReturnQuestionsByCheckoutItemIdView";
 import { baseBootstrap } from "./baseBootstrap";
 const device = Platform.OS;
-const bootstrap = ({ apiUrl, getAuthToken }) => {
+const bootstrap = ({ apiUrl, getAuthToken, tradename, migrated }) => {
     const httpGet = fetchHttpGet({ apiUrl, getAuthToken, device, version: VERSION });
     const httpPost = fetchHttpPost({ apiUrl, getAuthToken, device, version: VERSION });
     return baseBootstrap({
@@ -36,6 +36,8 @@ const bootstrap = ({ apiUrl, getAuthToken }) => {
         }),
         pricingByCheckoutIdView: httpPricingByCheckoutIdView({
             httpPost,
+            tradename,
+            migrated,
         }),
         paymentFlowPayloadByCheckoutIdView: httpPaymentFlowPayloadByCheckoutIdView({
             httpPost,

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

@@ -1,9 +1,12 @@
 import { HttpPostFunction } from "@lookiero/sty-psp-http";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { PricingByCheckoutIdView } from "../../../projection/pricing/viewPricingByCheckoutId";
 interface HttpPricingByCheckoutIdView extends PricingByCheckoutIdView {
 }
 interface HttpPricingByCheckoutIdViewFunctionArgs {
     readonly httpPost: HttpPostFunction;
+    readonly tradename: Tradename;
+    readonly migrated: boolean;
 }
 interface HttpPricingByCheckoutIdViewFunction {
     (args: HttpPricingByCheckoutIdViewFunctionArgs): HttpPricingByCheckoutIdView;

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

@@ -1,10 +1,11 @@
-const httpPricingByCheckoutIdView = ({ httpPost }) => async ({ checkoutId, signal }) => await httpPost({
-    endpoint: "/view-checkout-pricing-by-checkout-id",
+import { toPricingProjection } from "./pricing";
+const httpPricingByCheckoutIdView = ({ httpPost, tradename, migrated }) => async ({ checkoutId, signal }) => await httpPost({
+    endpoint: "/view-pricing-by-checkout-id",
     body: { checkoutId },
     signal,
     result: {
         error: null,
-        success: (response) => response,
+        success: (response) => toPricingProjection({ pricing: response.result, tradename, migrated }),
     },
 });
 export { httpPricingByCheckoutIdView };

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/projection/pricing/pricing.mock.d.ts

@@ -1,4 +1,5 @@
 import { CheckoutPricingProjection } from "../../../projection/pricing/pricing";
+import { PricingDto } from "./pricing";
 declare const mockCheckoutPricingProjection: CheckoutPricingProjection;
-declare const pricing: () => CheckoutPricingProjection;
-export { mockCheckoutPricingProjection, pricing };
+declare const mockPricingDto: PricingDto;
+export { mockCheckoutPricingProjection, mockPricingDto };

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

@@ -26,5 +26,19 @@ const mockCheckoutPricingProjection = {
         },
     ],
 };
-const pricing = () => mockCheckoutPricingProjection;
-export { mockCheckoutPricingProjection, pricing };
+const mockPricingDto = {
+    pendingToPay: { amount: 12127, currency: Currency.EUR },
+    subtotal: { amount: 21195, currency: Currency.EUR },
+    discount: { amount: 7068, currency: Currency.EUR },
+    discountPercentage: 35,
+    balanceDiscount: { amount: 1000, currency: Currency.EUR },
+    service: {
+        discount: { amount: 0, currency: Currency.EUR },
+        finalPrice: { amount: 1000, currency: Currency.EUR },
+        originalPrice: { amount: 1000, currency: Currency.EUR },
+        prepaid: false,
+        reference: "ps-fee",
+    },
+    orderTotal: { amount: 13127, currency: Currency.EUR },
+};
+export { mockCheckoutPricingProjection, mockPricingDto };

package/dist/src/infrastructure/ui/Root.d.ts

@@ -26,6 +26,7 @@ interface RootProps {
     readonly customer: Customer;
     readonly layout: Layout;
     readonly tradename: Tradename;
+    readonly migrated: boolean;
     readonly onNotAccessible: () => void;
     readonly onCheckoutFlowSuccess: OnCheckoutFlowSuccessFunction;
     readonly useRedirect: () => Record<string, string>;

package/dist/src/infrastructure/ui/Root.js

@@ -9,11 +9,11 @@ const root = ({ Messaging, queryBus, getAuthToken, development, sentry, kameleoo
     const logger = sentryLogger(sentry);
     const kameleoon = kameleoonConfig();
     // eslint-disable-next-line react/display-name, react/prop-types
-    const Root = ({ basePath, locale, customer, layout, tradename, onNotAccessible, onCheckoutFlowSuccess, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+    const Root = ({ basePath, locale, customer, layout, tradename, migrated, onNotAccessible, onCheckoutFlowSuccess, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
         const handleOnI18nError = useCallback((error) => logger.captureException(error), []);
         return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
             React.createElement(QueryBusProvider, { queryBus: queryBus },
-                React.createElement(Routing, { I18n: i18n({ tradename }), basePath: basePath, customer: customer, getAuthToken: getAuthToken, kameleoon: kameleoon, layout: layout, locale: locale, tradename: tradename, useRedirect: useRedirect, useRoutes: useRoutes, onCheckoutFlowSuccess: onCheckoutFlowSuccess, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible }))));
+                React.createElement(Routing, { I18n: i18n({ tradename }), basePath: basePath, customer: customer, getAuthToken: getAuthToken, kameleoon: kameleoon, layout: layout, locale: locale, migrated: migrated, tradename: tradename, useRedirect: useRedirect, useRoutes: useRoutes, onCheckoutFlowSuccess: onCheckoutFlowSuccess, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible }))));
     };
     const hoc = sentryLoggerHOC({ logger });
     /**

package/dist/src/infrastructure/ui/hooks/useStaticInfo.d.ts

@@ -6,6 +6,7 @@ interface StaticInfo {
     readonly kameleoon: KameleoonEnvironment;
     readonly customer: Customer;
     readonly tradename: Tradename;
+    readonly migrated: boolean;
     readonly basePath: string;
 }
 interface StaticInfoProviderProps {
@@ -13,6 +14,7 @@ interface StaticInfoProviderProps {
     readonly kameleoon: KameleoonEnvironment;
     readonly customer: Customer;
     readonly tradename: Tradename;
+    readonly migrated: boolean;
     readonly basePath: string;
 }
 declare const StaticInfoProvider: FC<StaticInfoProviderProps>;

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

@@ -1,13 +1,14 @@
 import React, { createContext, useContext, useMemo } from "react";
 import invariant from "tiny-invariant";
 const StaticInfoContext = createContext(null);
-const StaticInfoProvider = ({ children, kameleoon, customer, tradename, basePath }) => {
+const StaticInfoProvider = ({ children, kameleoon, customer, tradename, migrated, basePath, }) => {
     const value = useMemo(() => ({
         kameleoon,
         customer,
         tradename,
+        migrated,
         basePath,
-    }), [basePath, customer, kameleoon, tradename]);
+    }), [basePath, customer, kameleoon, migrated, tradename]);
     return React.createElement(StaticInfoContext.Provider, { value: value }, children);
 };
 const useStaticInfo = () => {

package/dist/src/infrastructure/ui/routing/Routing.d.ts

@@ -15,6 +15,7 @@ interface RoutingProps {
     readonly kameleoon: KameleoonEnvironment;
     readonly layout: Layout;
     readonly tradename: Tradename;
+    readonly migrated: boolean;
     readonly getAuthToken: () => Promise<string>;
     readonly onNotAccessible: () => void;
     readonly onCheckoutFlowSuccess: OnCheckoutFlowSuccessFunction;

package/dist/src/infrastructure/ui/routing/Routing.js

@@ -12,11 +12,11 @@ import { Summary } from "../views/summary/Summary";
 import { SummaryTabs } from "../views/summaryTabs/SummaryTabs";
 import { CheckoutMiddleware } from "./CheckoutMiddleware";
 import { Routes } from "./routes";
-const Routing = ({ basePath = "", customer, locale, I18n, kameleoon, layout, tradename, getAuthToken, onI18nError, onNotAccessible, onCheckoutFlowSuccess, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+const Routing = ({ basePath = "", customer, locale, I18n, kameleoon, layout, tradename, migrated, getAuthToken, onI18nError, onNotAccessible, onCheckoutFlowSuccess, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
     return useRoutes([
         {
             path: "",
-            element: (React.createElement(StaticInfoProvider, { basePath: basePath, customer: customer, kameleoon: kameleoon, tradename: tradename },
+            element: (React.createElement(StaticInfoProvider, { basePath: basePath, customer: customer, kameleoon: kameleoon, migrated: migrated, tradename: tradename },
                 React.createElement(I18n, { loader: React.createElement(Spinner, null), locale: locale, onError: onI18nError },
                     React.createElement(Kameleoon, { loader: React.createElement(Spinner, null), siteCode: kameleoon.siteCode },
                         React.createElement(CheckoutMiddleware, { customerId: customer?.customerId, onNotAccessible: onNotAccessible },

package/dist/src/version.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "14.8.1";
-export declare const RELEASE = "checkout@14.8.1";
+export declare const VERSION = "14.8.2";
+export declare const RELEASE = "checkout@14.8.2";

package/dist/src/version.js

@@ -1,2 +1,2 @@
-export const VERSION = "14.8.1";
-export const RELEASE = "checkout@14.8.1";
+export const VERSION = "14.8.2";
+export const RELEASE = "checkout@14.8.2";

package/index.ts

@@ -24,6 +24,8 @@ interface FirstAvailableCheckoutByCustomerIdFunction {
 interface BootstrapFunctionArgs {
   readonly getAuthToken: () => Promise<string>;
   readonly apiUrl: () => string;
+  readonly tradename: Tradename;
+  readonly migrated: boolean;
   readonly sentry: () => SentryEnvironment;
   readonly kameleoon: () => KameleoonEnvironment;
 }
@@ -37,8 +39,8 @@ interface BootstrapFunction {
   (args: BootstrapFunctionArgs): BootstrapFunctionReturn;
 }
 
-const bootstrap: BootstrapFunction = ({ apiUrl, getAuthToken, sentry, kameleoon }) => {
-  const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, getAuthToken });
+const bootstrap: BootstrapFunction = ({ apiUrl, getAuthToken, tradename, migrated, sentry, kameleoon }) => {
+  const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, getAuthToken, tradename, migrated });
 
   const firstAvailableCheckoutByCustomerId: FirstAvailableCheckoutByCustomerIdFunction = ({ customerId }) =>
     queryBus(viewFirstAvailableCheckoutByCustomerId({ customerId: customerId as string }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "14.8.1",
+  "version": "14.8.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",

package/src/ExpoRoot.tsx

@@ -21,11 +21,12 @@ import { Customer } from "./projection/customer/customer";
 import { RELEASE } from "./version";
 
 const tradename = Tradename.LOOKIERO;
+const migrated = false;
 const theme = themeByTradename({ tradename });
 const locale: Locale = Locale.es_ES;
 
 const customer: Customer = {
-  customerId: "0d26cc55-b59e-4cde-971d-e587673f691e",
+  customerId: "e4450481-f8d1-47bd-a2f0-a8cb0d292bcd",
   country: Country.ES,
   segment: Segment.WOMEN,
   email: "email@example.com",
@@ -49,7 +50,7 @@ const apiUrl =
         : "http://localhost:3004/local-to-dev"
       : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzNzI0MjA2LCJleHAiOjE3NzMyNTgxNDYsImRpc3BsYXlOYW1lIjoibWFpbC5kZXYrdGRwLmMwN2NiYTQ3LTc5MDUtNDE0Yi04Y2ViLTIzZDIxMTgyZDgzMEBsb29raWVyby5jb20iLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJ1dWlkIjoiMGQyNmNjNTUtYjU5ZS00Y2RlLTk3MWQtZTU4NzY3M2Y2OTFlIiwiaWF0IjoxNzczMjI5MzQ2fQ.qEd3wCB6qbMBCZnOWa3sa_aC-FDJe_f1AshhXYq1MIM";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzNzI1NDU1LCJleHAiOjE3NzQwMjg4NTUsImRpc3BsYXlOYW1lIjoibWFpbC5kZXYrdGRwLjE4ZjUxODgxLTBkMWMtNDVhYy1iNzhkLWU5ODliYzRkZmFhNkBsb29raWVyby5jb20iLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJ1dWlkIjoiZTQ0NTA0ODEtZjhkMS00N2JkLWEyZjAtYThjYjBkMjkyYmNkIiwiaWF0IjoxNzc0MDAwMDU1fQ.iJflcz8dn3U516LdSht7_P2ixe_-OsEiSfvCvOTGYsw";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const useRedirect: () => Record<string, string> = () => ({
@@ -88,7 +89,7 @@ const kameleoonConfig: KameleoonEnvironment = {
 const { Component: Messaging, queryBus } =
   process.env.EXPO_PUBLIC_APP_VARIANT === "test"
     ? checkoutMockBootstrap()
-    : checkoutBootstrap({ apiUrl: () => apiUrl, getAuthToken });
+    : checkoutBootstrap({ apiUrl: () => apiUrl, getAuthToken, tradename, migrated });
 
 const Root = root({
   Messaging,
@@ -129,6 +130,7 @@ const ExpoRoot: FC = () => {
                       customer={customer}
                       layout={DummyLayout}
                       locale={locale}
+                      migrated={migrated}
                       tradename={tradename}
                       useRedirect={useRedirect}
                       onCheckoutFlowSuccess={() => console.log("Checkout flow success!")}

package/src/infrastructure/delivery/bootstrap.ts

@@ -1,6 +1,7 @@
 import { Platform } from "react-native";
 import { BuildBootstrapFunctionReturn } from "@lookiero/messaging-react";
 import { fetchHttpGet, fetchHttpPost } from "@lookiero/sty-psp-http";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { VERSION } from "../../version";
 import { getCheckout, saveCheckout } from "../domain/checkout/model/httpCheckouts";
 import { getCheckoutBooking, saveCheckoutBooking } from "../domain/checkoutBooking/model/httpCheckoutBookings";
@@ -27,13 +28,15 @@ const device = Platform.OS as Device;
 interface BootstrapFunctionArgs {
   readonly getAuthToken: () => Promise<string>;
   readonly apiUrl: () => string;
+  readonly tradename: Tradename;
+  readonly migrated: boolean;
 }
 
 interface BootstrapFunction {
   (args: BootstrapFunctionArgs): BuildBootstrapFunctionReturn;
 }
 
-const bootstrap: BootstrapFunction = ({ apiUrl, getAuthToken }) => {
+const bootstrap: BootstrapFunction = ({ apiUrl, getAuthToken, tradename, migrated }) => {
   const httpGet = fetchHttpGet({ apiUrl, getAuthToken, device, version: VERSION });
   const httpPost = fetchHttpPost({ apiUrl, getAuthToken, device, version: VERSION });
 
@@ -51,6 +54,8 @@ const bootstrap: BootstrapFunction = ({ apiUrl, getAuthToken }) => {
     }),
     pricingByCheckoutIdView: httpPricingByCheckoutIdView({
       httpPost,
+      tradename,
+      migrated,
     }),
     paymentFlowPayloadByCheckoutIdView: httpPaymentFlowPayloadByCheckoutIdView({
       httpPost,

package/src/infrastructure/projection/pricing/httpPricingByCheckoutIdView.test.ts

@@ -1,20 +1,26 @@
 import { mock } from "jest-mock-extended";
 import { fetchHttpPost } from "@lookiero/sty-psp-http";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { httpPricingByCheckoutIdView as sut } from "./httpPricingByCheckoutIdView";
-import { mockCheckoutPricingProjection } from "./pricing.mock";
+import { PricingDto } from "./pricing";
+import { mockCheckoutPricingProjection, mockPricingDto } from "./pricing.mock";
 
 const fetchMock = jest.fn();
 global.fetch = fetchMock;
 const apiUrl = "/api";
 const getAuthToken = () => Promise.resolve("token");
-const view = sut({ httpPost: fetchHttpPost({ apiUrl: () => apiUrl, getAuthToken, device: "web", version: "1.0.0" }) });
+const view = sut({
+  httpPost: fetchHttpPost({ apiUrl: () => apiUrl, getAuthToken, device: "web", version: "1.0.0" }),
+  tradename: Tradename.LOOKIERO,
+  migrated: false,
+});
 const signal = mock<AbortSignal>();
 
 const checkoutId = "29790d24-b139-4ab8-b618-d796d101e974";
 const pricingResponseOk: Response = {
   ok: true,
   status: 200,
-  text: () => Promise.resolve(JSON.stringify(mockCheckoutPricingProjection)),
+  text: () => Promise.resolve(JSON.stringify({ result: mockPricingDto })),
 } as Response;
 const pricingResponseNotFound: Response = {
   ok: false,
@@ -33,6 +39,88 @@ describe("httpPricingByCheckoutIdView", () => {
     expect(returnedPricing).toStrictEqual(mockCheckoutPricingProjection);
   });
 
+  it("does not include PS_FEE modifier for OUTFITTERY migrated", async () => {
+    const outfitteryMigratedView = sut({
+      httpPost: fetchHttpPost({ apiUrl: () => apiUrl, getAuthToken, device: "web", version: "1.0.0" }),
+      tradename: Tradename.OUTFITTERY,
+      migrated: true,
+    });
+    fetchMock.mockReturnValue(Promise.resolve(pricingResponseOk));
+
+    const returnedPricing = await outfitteryMigratedView({ checkoutId, signal });
+
+    expect(returnedPricing).toStrictEqual({
+      currency: mockPricingDto.pendingToPay.currency,
+      finalPrice: mockPricingDto.pendingToPay.amount,
+      originalPrice: mockPricingDto.subtotal.amount,
+      modifiers: [
+        {
+          amount: mockPricingDto.discount.amount,
+          type: "DISCOUNT",
+          context: "PROMOCODE",
+          translationKey: "summary.discount",
+          percentage: mockPricingDto.discountPercentage,
+        },
+        {
+          amount: mockPricingDto.balanceDiscount.amount,
+          type: "DISCOUNT",
+          context: "BALANCE",
+          translationKey: "summary.credit",
+        },
+      ],
+    });
+  });
+
+  it("filters zero modifiers and maps negative amounts as absolute values", async () => {
+    const mockPricingWithZeroAndNegativeAmounts: PricingDto = {
+      pendingToPay: { amount: 12127, currency: mockPricingDto.pendingToPay.currency },
+      subtotal: { amount: 21195, currency: mockPricingDto.subtotal.currency },
+      discount: { amount: -7068, currency: mockPricingDto.discount.currency },
+      discountPercentage: 35,
+      balanceDiscount: { amount: 0, currency: mockPricingDto.balanceDiscount.currency },
+      service: {
+        discount: { amount: 0, currency: mockPricingDto.service.discount.currency },
+        finalPrice: { amount: -1000, currency: mockPricingDto.service.finalPrice.currency },
+        originalPrice: {
+          amount: mockPricingDto.service.originalPrice.amount,
+          currency: mockPricingDto.service.originalPrice.currency,
+        },
+        prepaid: false,
+        reference: "ps-fee",
+      },
+      orderTotal: { amount: 13127, currency: mockPricingDto.orderTotal.currency },
+    };
+    const pricingResponseOkWithNegativeAndZeroModifiers: Response = {
+      ok: true,
+      status: 200,
+      text: () => Promise.resolve(JSON.stringify({ result: mockPricingWithZeroAndNegativeAmounts })),
+    } as Response;
+    fetchMock.mockReturnValue(Promise.resolve(pricingResponseOkWithNegativeAndZeroModifiers));
+
+    const returnedPricing = await view({ checkoutId, signal });
+
+    expect(returnedPricing).toStrictEqual({
+      currency: mockPricingDto.pendingToPay.currency,
+      finalPrice: 12127,
+      originalPrice: 21195,
+      modifiers: [
+        {
+          amount: 7068,
+          type: "DISCOUNT",
+          context: "PROMOCODE",
+          translationKey: "summary.discount",
+          percentage: 35,
+        },
+        {
+          amount: 1000,
+          type: "DISCOUNT",
+          context: "PS_FEE",
+          translationKey: "summary.fee",
+        },
+      ],
+    });
+  });
+
   it("returns null for a 404 response", async () => {
     fetchMock.mockReturnValue(Promise.resolve(pricingResponseNotFound));
 

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

@@ -1,29 +1,37 @@
 import { HttpPostFunction } from "@lookiero/sty-psp-http";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import {
   PricingByCheckoutIdView,
   ViewPricingByCheckoutIdResult,
 } from "../../../projection/pricing/viewPricingByCheckoutId";
+import { PricingDto, toPricingProjection } from "./pricing";
 
 interface HttpPricingByCheckoutIdView extends PricingByCheckoutIdView {}
 
 interface HttpPricingByCheckoutIdViewFunctionArgs {
   readonly httpPost: HttpPostFunction;
+  readonly tradename: Tradename;
+  readonly migrated: boolean;
 }
 
 interface HttpPricingByCheckoutIdViewFunction {
   (args: HttpPricingByCheckoutIdViewFunctionArgs): HttpPricingByCheckoutIdView;
 }
 
+interface ViewPricingByCheckoutIdResponse {
+  readonly result: PricingDto;
+}
+
 const httpPricingByCheckoutIdView: HttpPricingByCheckoutIdViewFunction =
-  ({ httpPost }) =>
+  ({ httpPost, tradename, migrated }) =>
   async ({ checkoutId, signal }) =>
-    await httpPost<ViewPricingByCheckoutIdResult>({
-      endpoint: "/view-checkout-pricing-by-checkout-id",
+    await httpPost<ViewPricingByCheckoutIdResponse, ViewPricingByCheckoutIdResult>({
+      endpoint: "/view-pricing-by-checkout-id",
       body: { checkoutId },
       signal,
       result: {
         error: null,
-        success: (response) => response,
+        success: (response) => toPricingProjection({ pricing: response.result, tradename, migrated }),
       },
     });
 

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

@@ -4,6 +4,7 @@ import {
   CheckoutPricingContext,
   CheckoutPricingType,
 } from "../../../projection/pricing/pricing";
+import { PricingDto } from "./pricing";
 
 const mockCheckoutPricingProjection: CheckoutPricingProjection = {
   currency: Currency.EUR,
@@ -32,6 +33,20 @@ const mockCheckoutPricingProjection: CheckoutPricingProjection = {
   ],
 };
 
-const pricing = (): CheckoutPricingProjection => mockCheckoutPricingProjection;
+const mockPricingDto: PricingDto = {
+  pendingToPay: { amount: 12127, currency: Currency.EUR },
+  subtotal: { amount: 21195, currency: Currency.EUR },
+  discount: { amount: 7068, currency: Currency.EUR },
+  discountPercentage: 35,
+  balanceDiscount: { amount: 1000, currency: Currency.EUR },
+  service: {
+    discount: { amount: 0, currency: Currency.EUR },
+    finalPrice: { amount: 1000, currency: Currency.EUR },
+    originalPrice: { amount: 1000, currency: Currency.EUR },
+    prepaid: false,
+    reference: "ps-fee",
+  },
+  orderTotal: { amount: 13127, currency: Currency.EUR },
+};
 
-export { mockCheckoutPricingProjection, pricing };
+export { mockCheckoutPricingProjection, mockPricingDto };

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

@@ -0,0 +1,83 @@
+import { Tradename } from "@lookiero/sty-sp-tradename";
+import { PriceProjection } from "../../../projection/price/price";
+import {
+  CheckoutPricingContext,
+  CheckoutPricingProjection,
+  CheckoutPricingType,
+} 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;
+}
+
+const toPricingProjection: ToPricingProjectionFunction = ({
+  pricing,
+  tradename,
+  migrated,
+}): CheckoutPricingProjection => {
+  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 type { PricingDto };
+export { toPricingProjection };

package/src/infrastructure/ui/Root.tsx

@@ -33,6 +33,7 @@ interface RootProps {
   readonly customer: Customer;
   readonly layout: Layout;
   readonly tradename: Tradename;
+  readonly migrated: boolean;
   readonly onNotAccessible: () => void;
   readonly onCheckoutFlowSuccess: OnCheckoutFlowSuccessFunction;
   readonly useRedirect: () => Record<string, string>;
@@ -50,6 +51,7 @@ const root: RootFunction = ({ Messaging, queryBus, getAuthToken, development, se
     customer,
     layout,
     tradename,
+    migrated,
     onNotAccessible,
     onCheckoutFlowSuccess,
     useRedirect,
@@ -68,6 +70,7 @@ const root: RootFunction = ({ Messaging, queryBus, getAuthToken, development, se
             kameleoon={kameleoon}
             layout={layout}
             locale={locale}
+            migrated={migrated}
             tradename={tradename}
             useRedirect={useRedirect}
             useRoutes={useRoutes}

package/src/infrastructure/ui/hooks/useStaticInfo.test.tsx

@@ -8,6 +8,7 @@ import { StaticInfoProvider, useStaticInfo as sut } from "./useStaticInfo";
 const kameleoon = {} as KameleoonEnvironment;
 const customer = { customerId: "6667283e-5f61-457e-b637-88736265b78f" } as Customer;
 const tradename = Tradename.LOOKIERO;
+const migrated = false;
 const basePath = "";
 
 interface WrapperProps {
@@ -15,7 +16,13 @@ interface WrapperProps {
 }
 
 const Wrapper: FC<WrapperProps> = ({ children }) => (
-  <StaticInfoProvider basePath={basePath} customer={customer} kameleoon={kameleoon} tradename={tradename}>
+  <StaticInfoProvider
+    basePath={basePath}
+    customer={customer}
+    kameleoon={kameleoon}
+    migrated={migrated}
+    tradename={tradename}
+  >
     {children}
   </StaticInfoProvider>
 );
@@ -28,6 +35,7 @@ describe("useStaticInfo hook", () => {
       kameleoon,
       customer,
       tradename,
+      migrated,
       basePath,
     };
 

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

@@ -8,6 +8,7 @@ interface StaticInfo {
   readonly kameleoon: KameleoonEnvironment;
   readonly customer: Customer;
   readonly tradename: Tradename;
+  readonly migrated: boolean;
   readonly basePath: string;
 }
 
@@ -18,18 +19,27 @@ interface StaticInfoProviderProps {
   readonly kameleoon: KameleoonEnvironment;
   readonly customer: Customer;
   readonly tradename: Tradename;
+  readonly migrated: boolean;
   readonly basePath: string;
 }
 
-const StaticInfoProvider: FC<StaticInfoProviderProps> = ({ children, kameleoon, customer, tradename, basePath }) => {
+const StaticInfoProvider: FC<StaticInfoProviderProps> = ({
+  children,
+  kameleoon,
+  customer,
+  tradename,
+  migrated,
+  basePath,
+}) => {
   const value = useMemo(
     () => ({
       kameleoon,
       customer,
       tradename,
+      migrated,
       basePath,
     }),
-    [basePath, customer, kameleoon, tradename],
+    [basePath, customer, kameleoon, migrated, tradename],
   );
 
   return <StaticInfoContext.Provider value={value}>{children}</StaticInfoContext.Provider>;

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

@@ -28,6 +28,7 @@ interface RoutingProps {
   readonly kameleoon: KameleoonEnvironment;
   readonly layout: Layout;
   readonly tradename: Tradename;
+  readonly migrated: boolean;
   readonly getAuthToken: () => Promise<string>;
   readonly onNotAccessible: () => void;
   readonly onCheckoutFlowSuccess: OnCheckoutFlowSuccessFunction;
@@ -44,6 +45,7 @@ const Routing: FC<RoutingProps> = ({
   kameleoon,
   layout,
   tradename,
+  migrated,
   getAuthToken,
   onI18nError,
   onNotAccessible,
@@ -55,7 +57,13 @@ const Routing: FC<RoutingProps> = ({
     {
       path: "",
       element: (
-        <StaticInfoProvider basePath={basePath} customer={customer} kameleoon={kameleoon} tradename={tradename}>
+        <StaticInfoProvider
+          basePath={basePath}
+          customer={customer}
+          kameleoon={kameleoon}
+          migrated={migrated}
+          tradename={tradename}
+        >
           <I18n loader={<Spinner />} locale={locale} onError={onI18nError}>
             <Kameleoon loader={<Spinner />} siteCode={kameleoon.siteCode}>
               <CheckoutMiddleware customerId={customer?.customerId as string} onNotAccessible={onNotAccessible}>