@lookiero/checkout 12.22.0 → 12.23.0-beta.0

package/dist/fake-dependencies/@lookiero/payments-front/index.d.ts

@@ -16,7 +16,12 @@ interface UsePaymentStatusManagerResult {
 }
 declare const usePaymentStatusManager: (section: Section) => UsePaymentStatusManagerResult;
 declare enum Section {
-    BOX_CHECKOUT = "box-checkout"
+    BOX_CHECKOUT = "box-checkout",
+    DIRECT_BUY_CHECKOUT = "direct-buy-checkout"
 }
+interface PayButtonProps {
+    readonly onPress: () => void;
+}
+declare const PayButton: FC<PayButtonProps>;
 export type { PaymentFlowRef };
-export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, usePaymentStatusManager, };
+export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, usePaymentStatusManager, PayButton, };

package/dist/fake-dependencies/@lookiero/payments-front/index.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { forwardRef, useImperativeHandle, } from "react";
+import React, { forwardRef, useImperativeHandle, } from "react";
+import { Button } from "@lookiero/aurora";
 let startLegacyBoxCheckoutListener;
 const setPaymentsBridge = () => void 0;
 const PaymentsQueryProvider = ({ children }) => children;
@@ -24,5 +25,7 @@ const usePaymentStatusManager = () => paymentStatusManagerResult;
 var Section;
 (function (Section) {
     Section["BOX_CHECKOUT"] = "box-checkout";
+    Section["DIRECT_BUY_CHECKOUT"] = "direct-buy-checkout";
 })(Section || (Section = {}));
-export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, usePaymentStatusManager, };
+const PayButton = ({ onPress }) => React.createElement(Button, { onPress: onPress }, "Pay");
+export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, usePaymentStatusManager, PayButton, };

package/dist/src/ExpoRoot.js

@@ -18,7 +18,7 @@ import { root } from "./infrastructure/ui/Root";
 import { DOMAIN } from "./infrastructure/ui/i18n/i18n";
 import { Router } from "./infrastructure/ui/routing/router/Router";
 import { VERSION } from "./version";
-const tradename = Tradename.LOOKIERO;
+const tradename = Tradename.OUTFITTERY;
 const theme = themeByTradename({ tradename });
 const locale = Locale.es_ES;
 const subscription = "b";
@@ -28,7 +28,7 @@ const order = {
     coupon: "MYLOOKIERO",
 };
 const customer = {
-    customerId: "6bf2156d-aa5f-432a-88c9-578e9b6992fa",
+    customerId: "f943ae75-bffb-4b14-b418-e8c79da41dde",
     country: Country.ES,
     segment: Segment.WOMEN,
     email: "email@example.com",
@@ -47,7 +47,7 @@ const apiUrl = Platform.OS !== "web"
             ? "/local-to-dev"
             : "http://localhost:3004/local-to-dev"
         : "/checkout/api";
-const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzMTA4NTY4LCJleHAiOjE3NjAyNjEzNDIsImRpc3BsYXlOYW1lIjoiTWlrZWwiLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwic3Vic2NyaXB0aW9uU3RhcnRpbmdEYXRlIjoiMjAyNS0wOS0xMSIsImltcGVyc29uYXRlZCI6ZmFsc2UsInV1aWQiOiJhYjIzN2FiMy1mOWY2LTRiNWItOTNjMi1lNjg3YzJmOTlkMmMiLCJ0cmFkZW5hbWUiOiJMT09LSUVSTyIsImlhdCI6MTc1NzY2OTM0Mn0.mw9E6PLIc0KeXe7AdDcxxJrZZuGATxVoht5jDOlDXrk";
+const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzNDQzMjA4LCJleHAiOjE3NjQzNDQwNjUsImRpc3BsYXlOYW1lIjoiQWxleGFuZGVyIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMTAtMjciLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiZjk0M2FlNzUtYmZmYi00YjE0LWI0MTgtZThjNzlkYTQxZGRlIiwidHJhZGVuYW1lIjoiT1VURklUVEVSWSIsImlhdCI6MTc2MTY2NTY2NX0.ACQlI_HmEytLQCWNLXPStOwNdrOKjU9IHW4ezrHoquc";
 const getAuthToken = () => Promise.resolve(authToken);
 const externalTranslationsUrl = Platform.OS !== "web"
     ? "https://backend-for-user.dev.envs.lookiero.tech/api/v2/translations"
@@ -86,9 +86,10 @@ setPaymentsBridge({
     appVersion: VERSION,
     graphqlUri: "/graphql",
     useFeatureFlags: () => ({}),
-    locale: () => Promise.resolve("es-ES"),
+    locale: () => "es-ES",
     scrollView: ScrollView,
     hostUrl: "",
+    tradename,
 });
 const kameleoonConfig = {
     siteCode: "aplm4v3ckn",

package/dist/src/domain/checkoutBooking/command/blockCheckoutBooking.d.ts

@@ -0,0 +1,13 @@
+import { Command } from "@lookiero/messaging";
+declare const BLOCK_CHECKOUT_BOOKING = "block_checkout_booking";
+interface BlockCheckoutBookingPayload {
+    readonly aggregateId: string;
+}
+interface BlockCheckoutBooking extends Command<typeof BLOCK_CHECKOUT_BOOKING>, BlockCheckoutBookingPayload {
+}
+interface BlockCheckoutBookingFunction {
+    (payload: BlockCheckoutBookingPayload): BlockCheckoutBooking;
+}
+declare const blockCheckoutBooking: BlockCheckoutBookingFunction;
+export type { BlockCheckoutBooking };
+export { BLOCK_CHECKOUT_BOOKING, blockCheckoutBooking };

package/dist/src/domain/checkoutBooking/command/blockCheckoutBooking.js

@@ -0,0 +1,4 @@
+import { command } from "@lookiero/messaging";
+const BLOCK_CHECKOUT_BOOKING = "block_checkout_booking";
+const blockCheckoutBooking = ({ aggregateId }) => command({ aggregateId, name: BLOCK_CHECKOUT_BOOKING });
+export { BLOCK_CHECKOUT_BOOKING, blockCheckoutBooking };

package/dist/src/domain/checkoutBooking/model/checkoutBookingBlocked.d.ts

@@ -0,0 +1,13 @@
+import { DomainEvent } from "@lookiero/messaging";
+declare const CHECKOUT_BOOKING_BLOCKED = "checkout_booking_blocked";
+interface CheckoutBookingBlokedPaylcoad {
+    readonly aggregateId: string;
+}
+interface CheckoutBookingBlocked extends DomainEvent<typeof CHECKOUT_BOOKING_BLOCKED>, CheckoutBookingBlokedPaylcoad {
+}
+interface CheckoutBookingBlokedFunctcion {
+    (payload: CheckoutBookingBlokedPaylcoad): CheckoutBookingBlocked;
+}
+declare const checkoutBookingBlocked: CheckoutBookingBlokedFunctcion;
+export type { CheckoutBookingBlocked };
+export { CHECKOUT_BOOKING_BLOCKED, checkoutBookingBlocked };

package/dist/src/domain/checkoutBooking/model/checkoutBookingBlocked.js

@@ -0,0 +1,4 @@
+import { domainEvent } from "@lookiero/messaging";
+const CHECKOUT_BOOKING_BLOCKED = "checkout_booking_blocked";
+const checkoutBookingBlocked = ({ aggregateId }) => domainEvent({ aggregateId, name: CHECKOUT_BOOKING_BLOCKED });
+export { CHECKOUT_BOOKING_BLOCKED, checkoutBookingBlocked };

package/dist/src/domain/checkoutItem/model/currency.d.ts

@@ -0,0 +1,6 @@
+declare enum Currency {
+    EUR = "EUR",
+    GBP = "GBP",
+    SEK = "SEK"
+}
+export { Currency };

package/dist/src/domain/checkoutItem/model/currency.js

@@ -0,0 +1,7 @@
+var Currency;
+(function (Currency) {
+    Currency["EUR"] = "EUR";
+    Currency["GBP"] = "GBP";
+    Currency["SEK"] = "SEK";
+})(Currency || (Currency = {}));
+export { Currency };

package/dist/src/domain/uiSetting/command/updateUiSetting.d.ts

@@ -0,0 +1,15 @@
+import { Command } from "@lookiero/messaging";
+declare const UPDATE_UI_SETTING = "update_ui_setting";
+interface UpdateUiSettingPayload {
+    readonly aggregateId: string;
+    readonly key: string;
+    readonly value: unknown;
+}
+interface UpdateUiSetting extends Command<typeof UPDATE_UI_SETTING>, UpdateUiSettingPayload {
+}
+interface UpdateUiSettingFunction {
+    (payload: UpdateUiSettingPayload): UpdateUiSetting;
+}
+declare const updateUiSetting: UpdateUiSettingFunction;
+export type { UpdateUiSetting };
+export { UPDATE_UI_SETTING, updateUiSetting };

package/dist/src/domain/uiSetting/command/updateUiSetting.js

@@ -0,0 +1,10 @@
+import { command } from "@lookiero/messaging";
+const UPDATE_UI_SETTING = "update_ui_setting";
+const updateUiSetting = ({ aggregateId, ...payload }) => ({
+    ...command({
+        aggregateId,
+        name: UPDATE_UI_SETTING,
+    }),
+    ...payload,
+});
+export { UPDATE_UI_SETTING, updateUiSetting };

package/dist/src/domain/uiSetting/model/uiSetting.d.ts

@@ -0,0 +1,9 @@
+import { AggregateRoot, CommandHandlerFunction } from "@lookiero/messaging";
+import { UpdateUiSetting } from "../command/updateUiSetting";
+interface UiSetting extends AggregateRoot {
+    readonly key: string;
+    readonly value: unknown;
+}
+declare const updateUiSettingHandler: CommandHandlerFunction<UpdateUiSetting, UiSetting>;
+export type { UiSetting };
+export { updateUiSettingHandler };

package/dist/src/domain/uiSetting/model/uiSetting.js

@@ -0,0 +1,11 @@
+import { uiSettingUpdated } from "./uiSettingUpdated";
+const updateUiSettingHandler = () => async ({ aggregateRoot, command }) => {
+    const { aggregateId, key, value } = command;
+    return {
+        ...aggregateRoot,
+        key,
+        value,
+        domainEvents: [uiSettingUpdated({ aggregateId, key })],
+    };
+};
+export { updateUiSettingHandler };

package/dist/src/domain/uiSetting/model/uiSettingUpdated.d.ts

@@ -0,0 +1,15 @@
+import { DomainEvent, MessageName } from "@lookiero/messaging";
+declare const UI_SETTING_UPDATED = "ui_setting_updated";
+interface UiSettingUpdatedPayload {
+    readonly aggregateId: string;
+    readonly key: string;
+}
+interface UiSettingUpdated extends DomainEvent<typeof UI_SETTING_UPDATED>, UiSettingUpdatedPayload {
+}
+interface UiSettingUpdatedFunction {
+    (payload: UiSettingUpdatedPayload): UiSettingUpdated;
+}
+declare const uiSettingUpdated: UiSettingUpdatedFunction;
+declare const isUiSettingUpdated: (event: DomainEvent<MessageName>) => event is UiSettingUpdated;
+export type { UiSettingUpdated };
+export { UI_SETTING_UPDATED, uiSettingUpdated, isUiSettingUpdated };

package/dist/src/domain/uiSetting/model/uiSettingUpdated.js

@@ -0,0 +1,8 @@
+import { domainEvent } from "@lookiero/messaging";
+const UI_SETTING_UPDATED = "ui_setting_updated";
+const uiSettingUpdated = ({ aggregateId, key }) => ({
+    ...domainEvent({ aggregateId, name: UI_SETTING_UPDATED }),
+    key,
+});
+const isUiSettingUpdated = (event) => event.name === UI_SETTING_UPDATED;
+export { UI_SETTING_UPDATED, uiSettingUpdated, isUiSettingUpdated };

package/dist/src/domain/uiSetting/model/uiSettings.d.ts

@@ -0,0 +1,7 @@
+import { RepositoryGetFunction, RepositoryGetFunctionArgs, RepositorySaveFunction, RepositorySaveFunctionArgs } from "@lookiero/messaging";
+import { UiSetting } from "./uiSetting";
+interface UiSettingGetFunction<UiSettingGetFunctionArgs extends RepositoryGetFunctionArgs> extends RepositoryGetFunction<UiSetting, UiSettingGetFunctionArgs> {
+}
+interface UiSettingSaveFunction<UiSettingSaveFunctionArgs extends RepositorySaveFunctionArgs> extends RepositorySaveFunction<UiSetting, UiSettingSaveFunctionArgs> {
+}
+export type { UiSettingGetFunction, UiSettingSaveFunction };

package/dist/src/domain/uiSetting/model/uiSettings.js

@@ -0,0 +1 @@
+export {};

package/dist/src/infrastructure/domain/checkoutBooking/model/httpCheckoutBookingsBlock.d.ts

@@ -0,0 +1,5 @@
+import { HttpCheckoutBookingsSaveFunction } from "./httpCheckoutBookings";
+interface HttpCheckoutBookingsBlockFunction extends HttpCheckoutBookingsSaveFunction {
+}
+declare const httpCheckoutBookingsBlock: HttpCheckoutBookingsBlockFunction;
+export { httpCheckoutBookingsBlock };

package/dist/src/infrastructure/domain/checkoutBooking/model/httpCheckoutBookingsBlock.js

@@ -0,0 +1,15 @@
+import { CHECKOUT_BOOKING_BLOCKED, } from "../../../../domain/checkoutBooking/model/checkoutBookingBlocked";
+const isCheckoutBookingBlocked = (event) => event.name === CHECKOUT_BOOKING_BLOCKED;
+const httpCheckoutBookingsBlock = ({ httpPost }) => async ({ aggregateId, domainEvents }) => {
+    const checkoutBookingBlocked = domainEvents.find(isCheckoutBookingBlocked);
+    if (!checkoutBookingBlocked) {
+        return;
+    }
+    await httpPost({
+        endpoint: "/block-checkout-booking",
+        body: {
+            checkoutBookingId: aggregateId,
+        },
+    });
+};
+export { httpCheckoutBookingsBlock };

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

@@ -0,0 +1,15 @@
+import { CommandStatus } from "@lookiero/messaging-react";
+import { Logger } from "@lookiero/sty-psp-logging";
+interface BlockCheckoutBookingFunction {
+    (): Promise<void>;
+}
+type UseBlockCheckoutBooking = [blockCheckoutBooking: BlockCheckoutBookingFunction, status: CommandStatus];
+interface UseBlockCheckoutBookingFunctionArgs {
+    readonly checkoutBookingId: string | undefined;
+    readonly logger: Logger;
+}
+interface UseBlockCheckoutBookingFunction {
+    (args: UseBlockCheckoutBookingFunctionArgs): UseBlockCheckoutBooking;
+}
+declare const useBlockCheckoutBooking: UseBlockCheckoutBookingFunction;
+export { useBlockCheckoutBooking };

package/dist/src/infrastructure/domain/checkoutBooking/react/useBlockCheckoutBooking.js

@@ -0,0 +1,29 @@
+import { useCallback } from "react";
+import invariant from "tiny-invariant";
+import { useCommand } from "@lookiero/messaging-react";
+import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
+import { blockCheckoutBooking as blockCheckoutBookingCommand } from "../../../../domain/checkoutBooking/command/blockCheckoutBooking";
+import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
+import { I18nMessages } from "../../../ui/i18n/i18n";
+const useBlockCheckoutBooking = ({ checkoutBookingId, logger }) => {
+    const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
+    const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
+    const blockCheckoutBooking = useCallback(async () => {
+        invariant(checkoutBookingId, "checkoutBookingId is required");
+        try {
+            await commandBus(blockCheckoutBookingCommand({
+                aggregateId: checkoutBookingId,
+            }));
+        }
+        catch (error) {
+            logger.captureException(error);
+            createNotification({
+                level: NotificationLevel.ERROR,
+                bodyI18nKey: I18nMessages.TOAST_GENERIC_ERROR,
+            });
+            throw error;
+        }
+    }, [checkoutBookingId, commandBus, createNotification, logger]);
+    return [blockCheckoutBooking, status];
+};
+export { useBlockCheckoutBooking };

package/dist/src/infrastructure/domain/uiSetting/model/storageUiSettings.d.ts

@@ -0,0 +1,17 @@
+import { RepositoryGetFunctionArgs, RepositorySaveFunctionArgs } from "@lookiero/messaging";
+import { UiSettingGetFunction, UiSettingSaveFunction } from "../../../../domain/uiSetting/model/uiSettings";
+import { ReadFunction, WriteFunction } from "../../../persistence/storage";
+import { UiSettingDto } from "../../../persistence/uiSettingData";
+interface StorageUiSettingsGetFunctionArgs extends RepositoryGetFunctionArgs {
+    readonly read: ReadFunction<UiSettingDto>;
+}
+interface StorageUiSettingsGetFunction extends UiSettingGetFunction<StorageUiSettingsGetFunctionArgs> {
+}
+declare const getUiSetting: StorageUiSettingsGetFunction;
+interface StorageUiSettingsSaveFunctionArgs extends RepositorySaveFunctionArgs {
+    readonly write: WriteFunction<UiSettingDto>;
+}
+interface StorageUiSettingsSaveFunction extends UiSettingSaveFunction<StorageUiSettingsSaveFunctionArgs> {
+}
+declare const saveUiSetting: StorageUiSettingsSaveFunction;
+export { getUiSetting, saveUiSetting };

package/dist/src/infrastructure/domain/uiSetting/model/storageUiSettings.js

@@ -0,0 +1,20 @@
+const toDomain = (uiSettingDto) => ({
+    aggregateId: uiSettingDto.id,
+    key: uiSettingDto.key,
+    value: uiSettingDto.value,
+    domainEvents: [],
+});
+const fromDomain = (uiSetting) => ({
+    id: uiSetting.aggregateId,
+    key: uiSetting.key,
+    value: uiSetting.value,
+});
+const getUiSetting = ({ read }) => async (uiSettingKey) => {
+    const uiSettingDto = await read(uiSettingKey);
+    if (!uiSettingDto) {
+        throw new Error(`UiSetting not found: ${uiSettingKey}`);
+    }
+    return toDomain(uiSettingDto);
+};
+const saveUiSetting = ({ write }) => async (aggregateRoot) => await write(aggregateRoot.key, fromDomain(aggregateRoot));
+export { getUiSetting, saveUiSetting };

package/dist/src/infrastructure/domain/uiSetting/react/useUpdateUiSetting.d.ts

@@ -0,0 +1,18 @@
+import { CommandStatus } from "@lookiero/messaging-react";
+import { Logger } from "@lookiero/sty-psp-logging";
+interface UpdateFunctionArgs {
+    readonly key: string;
+    readonly value: unknown;
+}
+interface UpdateFunction {
+    (args: UpdateFunctionArgs): Promise<void>;
+}
+type UseUpdateUiSetting = [update: UpdateFunction, status: CommandStatus];
+interface UseUpdateUiSettingArgs {
+    readonly logger: Logger;
+}
+interface UseUpdateUiSettingFunction {
+    (args: UseUpdateUiSettingArgs): UseUpdateUiSetting;
+}
+declare const useUpdateUiSetting: UseUpdateUiSettingFunction;
+export { useUpdateUiSetting };

package/dist/src/infrastructure/domain/uiSetting/react/useUpdateUiSetting.js

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+import { v4 as uuid } from "uuid";
+import { useCommand } from "@lookiero/messaging-react";
+import { updateUiSetting } from "../../../../domain/uiSetting/command/updateUiSetting";
+import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
+const useUpdateUiSetting = ({ logger }) => {
+    const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
+    const update = useCallback(async ({ key, value }) => {
+        try {
+            await commandBus(updateUiSetting({
+                aggregateId: uuid(),
+                key,
+                value,
+            }));
+        }
+        catch (error) {
+            logger.captureException(error);
+        }
+    }, [commandBus, logger]);
+    return [update, status];
+};
+export { useUpdateUiSetting };

package/dist/src/infrastructure/persistence/asyncStorageStorage.d.ts

@@ -0,0 +1,5 @@
+import { ReadFunction, WriteFunction } from "./storage";
+import { UiSettingDto } from "./uiSettingData";
+declare const read: ReadFunction<UiSettingDto>;
+declare const write: WriteFunction<UiSettingDto>;
+export { read, write };

package/dist/src/infrastructure/persistence/asyncStorageStorage.js

@@ -0,0 +1,7 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+const read = async (key) => {
+    const value = await AsyncStorage.getItem(key);
+    return value ? JSON.parse(value) : null;
+};
+const write = async (key, value) => AsyncStorage.setItem(key, JSON.stringify(value));
+export { read, write };

package/dist/src/infrastructure/persistence/uiSettingData.d.ts

@@ -0,0 +1,6 @@
+interface UiSettingDto {
+    readonly id: string;
+    readonly key: string;
+    readonly value: unknown;
+}
+export type { UiSettingDto };

package/dist/src/infrastructure/persistence/uiSettingData.js

@@ -0,0 +1 @@
+export {};

package/dist/src/infrastructure/projection/checkoutQuestion/checkoutQuestions.mock.d.ts

@@ -0,0 +1,3 @@
+import { CheckoutQuestionProjection } from "../../../projection/checkoutQuestion/checkoutQuestion";
+declare const checkoutQuestions: CheckoutQuestionProjection[];
+export { checkoutQuestions };

package/dist/src/infrastructure/projection/checkoutQuestion/checkoutQuestions.mock.js

@@ -0,0 +1,103 @@
+import { CheckoutQuestionType, } from "../../../projection/checkoutQuestion/checkoutQuestion";
+const checkoutQuestions = [
+    {
+        id: "efe07b97-f6fb-4b6a-ba92-b68519320b2c",
+        name: "checkout_question.selection.question",
+        placeholder: "checkout_question.selection.placeholder",
+        type: CheckoutQuestionType.HOST_SELECT,
+        showCondition: [],
+        children: [
+            {
+                id: "68c0bb98-b00a-4b86-af43-528fe903cb69",
+                name: "checkout_question.icon.bad",
+                placeholder: "",
+                type: CheckoutQuestionType.ICON,
+                showCondition: [],
+            },
+            {
+                id: "85e84a77-461c-41e6-8544-95b5294d0b80",
+                name: "checkout_question.icon.regular",
+                placeholder: "",
+                type: CheckoutQuestionType.ICON,
+                showCondition: [],
+            },
+            {
+                id: "29441d25-8d9f-471e-a13e-a03f61c88091",
+                name: "checkout_question.icon.good",
+                placeholder: "",
+                type: CheckoutQuestionType.ICON,
+                showCondition: [],
+            },
+        ],
+    },
+    {
+        id: "6a6d3878-5561-412c-96f3-7ed79ee587bb",
+        name: "checkout_question.experience.question",
+        placeholder: "checkout_question.experience.placeholder",
+        type: CheckoutQuestionType.HOST_SELECT,
+        showCondition: [],
+        children: [
+            {
+                id: "a3d937b6-7499-4a3c-86bf-5c0af9ab2e23",
+                name: "checkout_question.icon.bad",
+                placeholder: "",
+                type: CheckoutQuestionType.ICON,
+                showCondition: [],
+            },
+            {
+                id: "7970edd3-fb5c-42d3-afe3-ce31bcbb856c",
+                name: "checkout_question.icon.regular",
+                placeholder: "",
+                type: CheckoutQuestionType.ICON,
+                showCondition: [],
+            },
+            {
+                id: "bab3d4f9-0227-4550-a53f-3c125d68429c",
+                name: "checkout_question.icon.good",
+                placeholder: "",
+                type: CheckoutQuestionType.ICON,
+                showCondition: [],
+            },
+        ],
+    },
+    {
+        id: "a1acdb2d-62c8-467f-b7cc-dc24d967290c",
+        name: "checkout_question.personalshopper.question",
+        placeholder: "checkout_question.personalshopper.placeholder",
+        type: CheckoutQuestionType.HOST_SELECT,
+        showCondition: ["68c0bb98-b00a-4b86-af43-528fe903cb69"],
+        children: [
+            {
+                id: "cce7851c-92c7-461b-8dcb-903c5de59ed1",
+                name: "checkout_question.personalshopper.yes",
+                placeholder: "",
+                type: CheckoutQuestionType.BUTTON,
+                showCondition: [],
+            },
+            {
+                id: "4bf8f27d-669b-4d36-8d39-b5599c671816",
+                name: "checkout_question.personalshopper.no",
+                placeholder: "",
+                type: CheckoutQuestionType.BUTTON,
+                showCondition: [],
+            },
+        ],
+    },
+    {
+        id: "ce3e8d57-5eea-4dd3-bef4-2e811a143612",
+        name: "checkout_question.comment.question",
+        placeholder: "",
+        type: CheckoutQuestionType.HOST_TEXTAREA,
+        showCondition: [],
+        children: [
+            {
+                id: "1123a37d-bc00-43a4-9d28-cee1dfaf356c",
+                name: "checkout_question.comment.question",
+                placeholder: "checkout_question.comment.placeholder",
+                type: CheckoutQuestionType.TEXTAREA,
+                showCondition: [],
+            },
+        ],
+    },
+];
+export { checkoutQuestions };

package/dist/src/infrastructure/projection/checkoutQuestion/httpCheckoutQuestionsByCheckoutIdView.d.ts

@@ -0,0 +1,12 @@
+import { HttpPostFunction } from "@lookiero/sty-psp-http";
+import { CheckoutQuestionsByCheckoutIdView } from "../../../projection/checkoutQuestion/listCheckoutQuestionsByCheckoutId";
+interface HttpCheckoutQuestionsByCheckoutIdView extends CheckoutQuestionsByCheckoutIdView {
+}
+interface HttpCheckoutQuestionsByCheckoutIdViewFunctionArgs {
+    readonly httpPost: HttpPostFunction;
+}
+interface HttpCheckoutQuestionsByCheckoutIdViewFunction {
+    (args: HttpCheckoutQuestionsByCheckoutIdViewFunctionArgs): HttpCheckoutQuestionsByCheckoutIdView;
+}
+declare const httpCheckoutQuestionsByCheckoutIdView: HttpCheckoutQuestionsByCheckoutIdViewFunction;
+export { httpCheckoutQuestionsByCheckoutIdView };

package/dist/src/infrastructure/projection/checkoutQuestion/httpCheckoutQuestionsByCheckoutIdView.js

@@ -0,0 +1,10 @@
+const httpCheckoutQuestionsByCheckoutIdView = ({ httpPost }) => async ({ checkoutId, signal }) => await httpPost({
+    endpoint: "/list-checkout-questions-by-checkout-id",
+    body: { checkoutId },
+    signal,
+    result: {
+        error: null,
+        success: (response) => response.result,
+    },
+});
+export { httpCheckoutQuestionsByCheckoutIdView };

package/dist/src/infrastructure/projection/checkoutQuestion/react/useListCheckoutQuestionsByCheckoutId.d.ts

@@ -0,0 +1,10 @@
+import { UseQueryFunctionResult } from "@lookiero/messaging-react";
+import { CheckoutQuestionProjection } from "../../../../projection/checkoutQuestion/checkoutQuestion";
+interface UseListChckoutQuestionsByCheckoutIdFunctionArgs {
+    readonly checkoutId: string;
+}
+interface UseListChckoutQuestionsByCheckoutIdFunction {
+    (args: UseListChckoutQuestionsByCheckoutIdFunctionArgs): UseQueryFunctionResult<CheckoutQuestionProjection[]>;
+}
+declare const useListCheckoutQuestionsByCheckoutId: UseListChckoutQuestionsByCheckoutIdFunction;
+export { useListCheckoutQuestionsByCheckoutId };

package/dist/src/infrastructure/projection/checkoutQuestion/react/useListCheckoutQuestionsByCheckoutId.js

@@ -0,0 +1,9 @@
+import { useQuery } from "@lookiero/messaging-react";
+import { listCheckoutQuestionsByCheckoutId } from "../../../../projection/checkoutQuestion/listCheckoutQuestionsByCheckoutId";
+import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
+const useListCheckoutQuestionsByCheckoutId = ({ checkoutId }) => useQuery({
+    query: listCheckoutQuestionsByCheckoutId({ checkoutId }),
+    contextId: MESSAGING_CONTEXT_ID,
+    options: { staleTime: Infinity, retry: false, refetchOnWindowFocus: false },
+});
+export { useListCheckoutQuestionsByCheckoutId };

package/dist/src/infrastructure/projection/uiSetting/react/useViewUiSettingByKey.d.ts

@@ -0,0 +1,10 @@
+import { UseQueryFunctionResult } from "@lookiero/messaging-react";
+import { UiSettingProjection } from "../../../../projection/uiSetting/viewUiSettingByKey";
+interface UseViewUiSettingByKeyFunctionArgs {
+    readonly key: string;
+}
+interface UseViewUiSettingByKeyFunction {
+    (args: UseViewUiSettingByKeyFunctionArgs): UseQueryFunctionResult<UiSettingProjection>;
+}
+declare const useViewUiSettingByKey: UseViewUiSettingByKeyFunction;
+export { useViewUiSettingByKey };

package/dist/src/infrastructure/projection/uiSetting/react/useViewUiSettingByKey.js

@@ -0,0 +1,11 @@
+import { useQuery } from "@lookiero/messaging-react";
+import { isUiSettingUpdated } from "../../../../domain/uiSetting/model/uiSettingUpdated";
+import { viewUiSettingByKey } from "../../../../projection/uiSetting/viewUiSettingByKey";
+import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
+const useViewUiSettingByKey = ({ key }) => useQuery({
+    query: viewUiSettingByKey({ key }),
+    contextId: MESSAGING_CONTEXT_ID,
+    invalidation: isUiSettingUpdated,
+    options: { refetchOnMount: "always", staleTime: Infinity, retry: false, refetchOnWindowFocus: false },
+});
+export { useViewUiSettingByKey };

package/dist/src/infrastructure/projection/uiSetting/storageUiSettingByKeyView.d.ts

@@ -0,0 +1,13 @@
+import { UiSettingByKeyView } from "../../../projection/uiSetting/viewUiSettingByKey";
+import { ReadFunction } from "../../persistence/storage";
+import { UiSettingDto } from "../../persistence/uiSettingData";
+interface StorageUiSettingByKeyView extends UiSettingByKeyView {
+}
+interface StorageUiSettingByKeyViewFunctionArgs {
+    readonly read: ReadFunction<UiSettingDto>;
+}
+interface StorageUiSettingByKeyViewFunction {
+    (args: StorageUiSettingByKeyViewFunctionArgs): StorageUiSettingByKeyView;
+}
+declare const storageUiSettingByKeyView: StorageUiSettingByKeyViewFunction;
+export { storageUiSettingByKeyView };

package/dist/src/infrastructure/projection/uiSetting/storageUiSettingByKeyView.js

@@ -0,0 +1,15 @@
+const toUiSettingProjection = (uiSettingDto) => ({
+    id: uiSettingDto.id,
+    key: uiSettingDto.key,
+    value: uiSettingDto.value,
+});
+const storageUiSettingByKeyView = ({ read }) => async ({ key }) => {
+    try {
+        const uiSettingDto = await read(key);
+        return uiSettingDto ? toUiSettingProjection(uiSettingDto) : null;
+    }
+    catch (ignored) {
+        throw new Error("Could not fetch the uiSetting");
+    }
+};
+export { storageUiSettingByKeyView };

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

@@ -45,7 +45,6 @@ declare enum I18nMessages {
     SUMMARY_FEE = "summary.fee",
     PRODUCT_VARIANT_SIZE_CHANGE = "product_variant.size_change",
     CHECKOUT_TITLE = "checkout.title",
-    CHECKOUT_PAY_BUTTON = "checkout.pay_button",
     CHECKOUT_TOAST_PAYMENT_ERROR = "checkout.toast_payment_error",
     CHECKOUT_TOAST_PAYMENT_SUCCESS = "checkout.toast_payment_success",
     CHECKOUT_SUCCESS_MODAL_TITLE = "checkout.success_modal_title",

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

@@ -47,7 +47,6 @@ var I18nMessages;
     I18nMessages["SUMMARY_FEE"] = "summary.fee";
     I18nMessages["PRODUCT_VARIANT_SIZE_CHANGE"] = "product_variant.size_change";
     I18nMessages["CHECKOUT_TITLE"] = "checkout.title";
-    I18nMessages["CHECKOUT_PAY_BUTTON"] = "checkout.pay_button";
     I18nMessages["CHECKOUT_TOAST_PAYMENT_ERROR"] = "checkout.toast_payment_error";
     I18nMessages["CHECKOUT_TOAST_PAYMENT_SUCCESS"] = "checkout.toast_payment_success";
     I18nMessages["CHECKOUT_SUCCESS_MODAL_TITLE"] = "checkout.success_modal_title";

package/dist/src/infrastructure/ui/settings/UISettings.d.ts

@@ -0,0 +1,3 @@
+declare enum UISettings {
+}
+export { UISettings };

package/dist/src/infrastructure/ui/settings/UISettings.js

@@ -0,0 +1,4 @@
+var UISettings;
+(function (UISettings) {
+})(UISettings || (UISettings = {}));
+export { UISettings };

package/dist/src/infrastructure/ui/views/checkout/Checkout.js

@@ -1,9 +1,10 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
+import { Box, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
+import { PayButton, Section } from "@lookiero/payments-front";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Sticky, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
@@ -30,7 +31,6 @@ const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedire
     const isDektopScreen = screenSize === "L";
     const style = useMemo(() => checkoutStyle(), []);
     const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_TITLE });
-    const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_PAY_BUTTON });
     const [pricingHeight, setPricingHeight] = useState(0);
     const handleOnPricingLayout = useCallback(({ height }) => setPricingHeight(height), []);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
@@ -74,6 +74,7 @@ const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedire
         trackPressBack();
         navigate(`${basePath}/${Routes.SUMMARY}`);
     }, [basePath, navigate, trackPressBack]);
+    const PaymentButton = () => useMemo(() => (React.createElement(PayButton, { busy: checkoutFlowStatus === "loading", section: Section.BOX_CHECKOUT, testID: "confirm-checkout-button", small: true, onPress: handleOnSubmit })), []);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) &&
         dependenciesLoadedStatuses.includes(pricingStatus);
@@ -100,10 +101,10 @@ const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedire
                             React.createElement(PaymentInstrument, { useRedirect: useRedirect }))))),
                 React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, isDektopScreen && style.desktopResume] }, pricing ? (React.createElement(View, { style: [style.princingWrapper, !isDektopScreen && style.princingWrapperSmall] },
                     React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0 }),
-                    isDektopScreen ? (React.createElement(Button, { busy: checkoutFlowStatus === "loading", testID: "confirm-checkout-button", onPress: handleOnSubmit }, submitButtonText)) : null)) : null))),
+                    isDektopScreen && React.createElement(PaymentButton, null))) : null))),
         pricing && !isDektopScreen ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
             React.createElement(Body, null,
-                React.createElement(Button, { busy: checkoutFlowStatus === "loading", testID: "confirm-checkout-button", small: true, onPress: handleOnSubmit }, submitButtonText)))) : null,
+                React.createElement(PaymentButton, null)))) : null,
         paymentFlowComponent));
 };
 export { Checkout };

package/dist/src/projection/checkoutQuestion/checkoutQuestion.d.ts

@@ -0,0 +1,18 @@
+declare enum CheckoutQuestionType {
+    HOST_DEFAULT = "HOST_DEFAULT",
+    HOST_TEXTAREA = "HOST_TEXTAREA",
+    HOST_SELECT = "HOST_SELECT",
+    TEXTAREA = "TEXTAREA",
+    ICON = "ICON",
+    BUTTON = "BUTTON"
+}
+interface CheckoutQuestionProjection {
+    readonly id: string;
+    readonly name: string;
+    readonly placeholder: string;
+    readonly type: CheckoutQuestionType;
+    readonly children?: CheckoutQuestionProjection[];
+    readonly showCondition: string[];
+}
+export { CheckoutQuestionType };
+export type { CheckoutQuestionProjection };

package/dist/src/projection/checkoutQuestion/checkoutQuestion.js

@@ -0,0 +1,10 @@
+var CheckoutQuestionType;
+(function (CheckoutQuestionType) {
+    CheckoutQuestionType["HOST_DEFAULT"] = "HOST_DEFAULT";
+    CheckoutQuestionType["HOST_TEXTAREA"] = "HOST_TEXTAREA";
+    CheckoutQuestionType["HOST_SELECT"] = "HOST_SELECT";
+    CheckoutQuestionType["TEXTAREA"] = "TEXTAREA";
+    CheckoutQuestionType["ICON"] = "ICON";
+    CheckoutQuestionType["BUTTON"] = "BUTTON";
+})(CheckoutQuestionType || (CheckoutQuestionType = {}));
+export { CheckoutQuestionType };

package/dist/src/projection/checkoutQuestion/listCheckoutQuestionsByCheckoutId.d.ts

@@ -0,0 +1,25 @@
+import { CancelableQueryViewArgs, Query, QueryHandlerFunction, QueryHandlerFunctionArgs } from "@lookiero/messaging";
+import { CheckoutQuestionProjection } from "./checkoutQuestion";
+declare const LIST_CHECKOUT_QUESTIONS_BY_CHECKOUT_ID = "list_checkout_questions_by_checkout_id";
+interface ListCheckoutQuestionsByCheckoutIdPayload {
+    readonly checkoutId: string;
+}
+interface ListCheckoutQuestionsByCheckoutId extends Query<typeof LIST_CHECKOUT_QUESTIONS_BY_CHECKOUT_ID>, ListCheckoutQuestionsByCheckoutIdPayload {
+}
+interface ListCheckoutQuestionsByCheckoutIdFunction {
+    (payload: ListCheckoutQuestionsByCheckoutIdPayload): ListCheckoutQuestionsByCheckoutId;
+}
+declare const listCheckoutQuestionsByCheckoutId: ListCheckoutQuestionsByCheckoutIdFunction;
+type ListCheckoutQuestionsByCheckoutIdResult = CheckoutQuestionProjection[] | null;
+interface CheckoutQuestionsByCheckoutIdViewArgs extends CancelableQueryViewArgs {
+    readonly checkoutId: string;
+}
+interface CheckoutQuestionsByCheckoutIdView {
+    (args: CheckoutQuestionsByCheckoutIdViewArgs): Promise<ListCheckoutQuestionsByCheckoutIdResult>;
+}
+interface ListCheckoutQuestionsByCheckoutIdHandlerFunctionArgs extends QueryHandlerFunctionArgs {
+    readonly view: CheckoutQuestionsByCheckoutIdView;
+}
+declare const listCheckoutQuestionsByCheckoutIdHandler: QueryHandlerFunction<ListCheckoutQuestionsByCheckoutId, ListCheckoutQuestionsByCheckoutIdResult, ListCheckoutQuestionsByCheckoutIdHandlerFunctionArgs>;
+export type { ListCheckoutQuestionsByCheckoutId, CheckoutQuestionsByCheckoutIdView, ListCheckoutQuestionsByCheckoutIdResult, };
+export { LIST_CHECKOUT_QUESTIONS_BY_CHECKOUT_ID, listCheckoutQuestionsByCheckoutId, listCheckoutQuestionsByCheckoutIdHandler, };

package/dist/src/projection/checkoutQuestion/listCheckoutQuestionsByCheckoutId.js

@@ -0,0 +1,8 @@
+import { query, } from "@lookiero/messaging";
+const LIST_CHECKOUT_QUESTIONS_BY_CHECKOUT_ID = "list_checkout_questions_by_checkout_id";
+const listCheckoutQuestionsByCheckoutId = (payload) => ({
+    ...query({ name: LIST_CHECKOUT_QUESTIONS_BY_CHECKOUT_ID }),
+    ...payload,
+});
+const listCheckoutQuestionsByCheckoutIdHandler = ({ view, signal }) => async ({ checkoutId }) => view({ checkoutId, signal });
+export { LIST_CHECKOUT_QUESTIONS_BY_CHECKOUT_ID, listCheckoutQuestionsByCheckoutId, listCheckoutQuestionsByCheckoutIdHandler, };

package/dist/src/projection/uiSetting/viewUiSettingByKey.d.ts

@@ -0,0 +1,29 @@
+import { Query, QueryHandlerFunction, QueryHandlerFunctionArgs } from "@lookiero/messaging";
+interface UiSettingProjection {
+    readonly id: string;
+    readonly key: string;
+    readonly value: unknown;
+}
+declare const VIEW_UI_SETTING_BY_KEY = "view_ui_setting_by_key";
+interface ViewUiSettingByKeyPayload {
+    readonly key: string;
+}
+interface ViewUiSettingByKey extends Query<typeof VIEW_UI_SETTING_BY_KEY>, ViewUiSettingByKeyPayload {
+}
+interface ViewUiSettingByKeyFunction {
+    (payload: ViewUiSettingByKeyPayload): ViewUiSettingByKey;
+}
+declare const viewUiSettingByKey: ViewUiSettingByKeyFunction;
+type ViewUiSettingByKeyResult = UiSettingProjection | null;
+interface UiSettingByKeyViewArgs {
+    readonly key: string;
+}
+interface UiSettingByKeyView {
+    (args: UiSettingByKeyViewArgs): Promise<ViewUiSettingByKeyResult>;
+}
+interface ViewUiSettingByKeyHandlerFunctionArgs extends QueryHandlerFunctionArgs {
+    readonly view: UiSettingByKeyView;
+}
+declare const viewUiSettingByKeyHandler: QueryHandlerFunction<ViewUiSettingByKey, ViewUiSettingByKeyResult, ViewUiSettingByKeyHandlerFunctionArgs>;
+export type { UiSettingProjection, UiSettingByKeyView };
+export { VIEW_UI_SETTING_BY_KEY, viewUiSettingByKey, viewUiSettingByKeyHandler };

package/dist/src/projection/uiSetting/viewUiSettingByKey.js

@@ -0,0 +1,8 @@
+import { query } from "@lookiero/messaging";
+const VIEW_UI_SETTING_BY_KEY = "view_ui_setting_by_key";
+const viewUiSettingByKey = (payload) => ({
+    ...query({ name: VIEW_UI_SETTING_BY_KEY }),
+    ...payload,
+});
+const viewUiSettingByKeyHandler = ({ view }) => async ({ key }) => view({ key });
+export { VIEW_UI_SETTING_BY_KEY, viewUiSettingByKey, viewUiSettingByKeyHandler };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "12.22.0";
+export declare const VERSION = "12.23.0-beta.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "12.22.0";
+export const VERSION = "12.23.0-beta.0";

package/fake-dependencies/@lookiero/payments-front/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import {
+import React, {
   FC,
   forwardRef,
   ForwardRefExoticComponent,
@@ -7,6 +7,7 @@ import {
   RefAttributes,
   useImperativeHandle,
 } from "react";
+import { Button } from "@lookiero/aurora";
 import { PaymentPayload } from "@lookiero/payments-front";
 
 let startLegacyBoxCheckoutListener: ({ success }: { success: boolean }) => void;
@@ -54,10 +55,15 @@ const usePaymentStatusManager: (section: Section) => UsePaymentStatusManagerResu
 
 enum Section {
   BOX_CHECKOUT = "box-checkout",
+  DIRECT_BUY_CHECKOUT = "direct-buy-checkout",
 }
 
-export type { PaymentFlowRef };
+interface PayButtonProps {
+  readonly onPress: () => void;
+}
+const PayButton: FC<PayButtonProps> = ({ onPress }) => <Button onPress={onPress}>Pay</Button>;
 
+export type { PaymentFlowRef };
 export {
   PaymentsQueryProvider,
   PaymentInstrumentSelect,
@@ -65,4 +71,5 @@ export {
   Section,
   setPaymentsBridge,
   usePaymentStatusManager,
+  PayButton,
 };

package/package.json

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

package/src/ExpoRoot.tsx

@@ -7,7 +7,7 @@ import { Aurora, Text } from "@lookiero/aurora";
 import { EventProvider } from "@lookiero/event";
 import { EndpointFunction } from "@lookiero/i18n";
 import { i18n } from "@lookiero/i18n-react";
-import { PaymentsQueryProvider, setPaymentsBridge } from "@lookiero/payments-front";
+import { FeatureFlags, PaymentsQueryProvider, setPaymentsBridge } from "@lookiero/payments-front";
 import { fetchTranslations, Project, translationExternalEndpoint } from "@lookiero/sty-psp-i18n";
 import { Country, Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment } from "@lookiero/sty-psp-logging";
@@ -25,7 +25,7 @@ import { OrderProjection } from "./projection/order/order";
 import { SubscriptionProjection } from "./projection/subscription/subscription";
 import { VERSION } from "./version";
 
-const tradename = Tradename.LOOKIERO;
+const tradename = Tradename.OUTFITTERY;
 const theme = themeByTradename({ tradename });
 const locale: Locale = Locale.es_ES;
 
@@ -37,7 +37,7 @@ const order: OrderProjection = {
 };
 
 const customer: Customer = {
-  customerId: "6bf2156d-aa5f-432a-88c9-578e9b6992fa",
+  customerId: "f943ae75-bffb-4b14-b418-e8c79da41dde",
   country: Country.ES,
   segment: Segment.WOMEN,
   email: "email@example.com",
@@ -60,7 +60,7 @@ const apiUrl =
         : "http://localhost:3004/local-to-dev"
       : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzMTA4NTY4LCJleHAiOjE3NjAyNjEzNDIsImRpc3BsYXlOYW1lIjoiTWlrZWwiLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwic3Vic2NyaXB0aW9uU3RhcnRpbmdEYXRlIjoiMjAyNS0wOS0xMSIsImltcGVyc29uYXRlZCI6ZmFsc2UsInV1aWQiOiJhYjIzN2FiMy1mOWY2LTRiNWItOTNjMi1lNjg3YzJmOTlkMmMiLCJ0cmFkZW5hbWUiOiJMT09LSUVSTyIsImlhdCI6MTc1NzY2OTM0Mn0.mw9E6PLIc0KeXe7AdDcxxJrZZuGATxVoht5jDOlDXrk";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzNDQzMjA4LCJleHAiOjE3NjQzNDQwNjUsImRpc3BsYXlOYW1lIjoiQWxleGFuZGVyIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMTAtMjciLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiZjk0M2FlNzUtYmZmYi00YjE0LWI0MTgtZThjNzlkYTQxZGRlIiwidHJhZGVuYW1lIjoiT1VURklUVEVSWSIsImlhdCI6MTc2MTY2NTY2NX0.ACQlI_HmEytLQCWNLXPStOwNdrOKjU9IHW4ezrHoquc";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const externalTranslationsUrl =
@@ -104,10 +104,11 @@ setPaymentsBridge({
   },
   appVersion: VERSION,
   graphqlUri: "/graphql",
-  useFeatureFlags: () => ({}),
-  locale: () => Promise.resolve("es-ES"),
+  useFeatureFlags: () => ({}) as Record<FeatureFlags, boolean>,
+  locale: () => "es-ES",
   scrollView: ScrollView,
   hostUrl: "",
+  tradename,
 });
 
 const kameleoonConfig: KameleoonEnvironment = {

package/src/infrastructure/ui/i18n/i18n.ts

@@ -48,7 +48,6 @@ enum I18nMessages {
   SUMMARY_FEE = "summary.fee",
   PRODUCT_VARIANT_SIZE_CHANGE = "product_variant.size_change",
   CHECKOUT_TITLE = "checkout.title",
-  CHECKOUT_PAY_BUTTON = "checkout.pay_button",
   CHECKOUT_TOAST_PAYMENT_ERROR = "checkout.toast_payment_error",
   CHECKOUT_TOAST_PAYMENT_SUCCESS = "checkout.toast_payment_success",
   CHECKOUT_SUCCESS_MODAL_TITLE = "checkout.success_modal_title",

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

@@ -120,8 +120,7 @@ describe("Checkout view", () => {
 
     expect(getByTestId(paymentFlowTestId)).toBeTruthy();
 
-    expect(getByText(I18nMessages.CHECKOUT_PAY_BUTTON)).toBeTruthy();
-    fireEvent.press(getByText(I18nMessages.CHECKOUT_PAY_BUTTON));
+    fireEvent.press(getByTestId("confirm-checkout-button"));
     expect(mockTrackPressContinue).toHaveBeenCalled();
     expect(mockCheckoutFlow).toHaveBeenCalled();
 

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

@@ -1,9 +1,10 @@
 import React, { FC, useCallback, useMemo, useState } from "react";
 import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
+import { Box, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
+import { PayButton, Section } from "@lookiero/payments-front";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Layout as UiLayout, Sticky, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
@@ -55,7 +56,6 @@ const Checkout: FC<CheckoutProps> = ({
   const style = useMemo(() => checkoutStyle(), []);
 
   const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_TITLE });
-  const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_PAY_BUTTON });
   const [pricingHeight, setPricingHeight] = useState(0);
   const handleOnPricingLayout = useCallback(({ height }: LayoutRectangle) => setPricingHeight(height), []);
 
@@ -117,6 +117,20 @@ const Checkout: FC<CheckoutProps> = ({
     navigate(`${basePath}/${Routes.SUMMARY}`);
   }, [basePath, navigate, trackPressBack]);
 
+  const PaymentButton = () =>
+    useMemo(
+      () => (
+        <PayButton
+          busy={checkoutFlowStatus === "loading"}
+          section={Section.BOX_CHECKOUT}
+          testID="confirm-checkout-button"
+          small
+          onPress={handleOnSubmit}
+        />
+      ),
+      [],
+    );
+
   const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
   const dependenciesLoaded =
     (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) &&
@@ -186,15 +200,7 @@ const Checkout: FC<CheckoutProps> = ({
               <View style={[style.princingWrapper, !isDektopScreen && style.princingWrapperSmall]}>
                 <Pricing pricing={pricing} totalCheckoutItemsKept={checkoutItemsKept?.length || 0} />
 
-                {isDektopScreen ? (
-                  <Button
-                    busy={checkoutFlowStatus === "loading"}
-                    testID="confirm-checkout-button"
-                    onPress={handleOnSubmit}
-                  >
-                    {submitButtonText}
-                  </Button>
-                ) : null}
+                {isDektopScreen && <PaymentButton />}
               </View>
             ) : null}
           </Box>
@@ -204,14 +210,7 @@ const Checkout: FC<CheckoutProps> = ({
       {pricing && !isDektopScreen ? (
         <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>
           <Body>
-            <Button
-              busy={checkoutFlowStatus === "loading"}
-              testID="confirm-checkout-button"
-              small
-              onPress={handleOnSubmit}
-            >
-              {submitButtonText}
-            </Button>
+            <PaymentButton />
           </Body>
         </Sticky>
       ) : null}