@lookiero/checkout 9.9.0-beta.2 → 9.10.0

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.style.d.ts

@@ -21,6 +21,7 @@ declare const style: {
     };
     info: {
         backgroundColor: string;
+        gap: number;
         paddingBottom: number;
         paddingHorizontal: number;
         paddingTop: number;

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.style.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../../../components/templates/header/Header.style";
-const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space4, space6, space8 } = theme();
+const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space1, space4, space6, space8 } = theme();
 const style = StyleSheet.create({
     background: {
         backgroundColor: colorBgPrimaryLight,
@@ -25,6 +25,7 @@ const style = StyleSheet.create({
     },
     info: {
         backgroundColor: colorBgBase,
+        gap: space1,
         paddingBottom: space4,
         paddingHorizontal: space6,
         paddingTop: space8,

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

@@ -4,7 +4,5 @@ interface Customer {
     readonly customerId: string;
     readonly country: Country;
     readonly segment: Segment;
-    readonly name: string;
-    readonly email: string;
 }
 export type { Customer };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "9.9.0-beta.2";
+export declare const VERSION = "9.10.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "9.9.0-beta.2";
+export const VERSION = "9.10.0";

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

@@ -7,57 +7,34 @@ import {
   RefAttributes,
   useImperativeHandle,
 } from "react";
-import { PaymentPayload } from "@lookiero/payments-front";
 
 const setPaymentsBridge = () => void 0;
 const PaymentsQueryProvider: FC<PropsWithChildren> = ({ children }) => children;
 const PaymentInstrumentSelect: FC = () => null;
-
+interface StartLegacyBoxCheckoutCallbackArgs {
+  readonly status: string;
+  readonly final: boolean;
+}
 interface StartLegacyBoxCheckoutFunction {
-  (paymentFlowPayload: unknown): void;
+  (paymentFlowPayload: unknown, callback: (params: StartLegacyBoxCheckoutCallbackArgs) => Promise<void>): void;
 }
-
 interface PaymentFlowRef {
   readonly startLegacyBoxCheckout: StartLegacyBoxCheckoutFunction;
 }
-
 const paymentFlowRef: PaymentFlowRef = {
-  startLegacyBoxCheckout: async () => {},
+  startLegacyBoxCheckout: async (_paymentFlowPayload, callback) => {
+    await callback({ status: "EXECUTED", final: true });
+  },
 };
-
 const PaymentFlow: ForwardRefExoticComponent<RefAttributes<PaymentFlowRef>> = forwardRef<PaymentFlowRef, unknown>(
   (_props, ref) => {
     useImperativeHandle(ref, () => paymentFlowRef, []);
     return null;
   },
 );
-
 PaymentFlow.displayName = "PaymentFlow";
-
-interface UsePaymentStatusManagerResult {
-  isLoading: boolean;
-  consumePayload: (callback: (payload: PaymentPayload) => void) => void;
-}
-
-const paymentStatusManagerResult: UsePaymentStatusManagerResult = {
-  isLoading: false,
-  consumePayload: (callback) => callback({ success: true } as PaymentPayload),
-};
-
-const usePaymentStatusManager: (section: Section) => UsePaymentStatusManagerResult = () => paymentStatusManagerResult;
-
 enum Section {
   BOX_CHECKOUT = "box-checkout",
 }
-
 export type { PaymentFlowRef };
-
-export {
-  PaymentsQueryProvider,
-  PaymentInstrumentSelect,
-  PaymentFlow,
-  Section,
-  setPaymentsBridge,
-  paymentFlowRef,
-  usePaymentStatusManager,
-};
+export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, paymentFlowRef };

package/index.ts

@@ -44,14 +44,14 @@ const bootstrap: BootstrapFunction = ({ apiUrl, getAuthToken, translations, sent
   const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, getAuthToken });
   const I18n = i18n({
     fetchTranslation: fetchTranslations({ translations }),
-    contextId: "CheckoutI18n",
+    domain: "CheckoutI18n",
   });
 
   const firstAvailableCheckoutByCustomerId: FirstAvailableCheckoutByCustomerIdFunction = ({ customerId }) =>
     queryBus(viewFirstAvailableCheckoutByCustomerId({ customerId: customerId as string }));
 
   return {
-    root: root({ Messaging, I18n, getAuthToken, sentry, kameleoon }),
+    root: root({ Messaging, I18n, queryBus, getAuthToken, sentry, kameleoon }),
     firstAvailableCheckoutByCustomerId,
   };
 };

package/jest.config.js

@@ -1,9 +1,9 @@
-const jestReactNativeConfig = require("@lookiero/sty-psp-jest-config/jest.config.react-native.js");
+const jestReactNativeConfig = require("@lookiero/sty-psp-jest-config/jest.config.expo.js");
 
 module.exports = {
   ...jestReactNativeConfig,
-  setupFiles: ["../../node_modules/react-native-gesture-handler/jestSetup.js"],
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  setupFiles: ["../../node_modules/react-native-gesture-handler/jestSetup.js"],
   moduleNameMapper: {
     ...(jestReactNativeConfig.moduleNameMapper || {}),
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "9.9.0-beta.2",
+  "version": "9.10.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -24,10 +24,10 @@
     "@lookiero/sty-psp-ab-testing": "^0.3",
     "@lookiero/sty-psp-expo-config": "^0.2",
     "@lookiero/sty-psp-http": "^2.0",
-    "@lookiero/sty-psp-i18n": "^0.2",
+    "@lookiero/sty-psp-i18n": "^0.3",
     "@lookiero/sty-psp-locale": "^0.4",
     "@lookiero/sty-psp-logging": "^0.5",
-    "@lookiero/sty-psp-notifications": "^0.6",
+    "@lookiero/sty-psp-notifications": "^0.7",
     "@lookiero/sty-psp-react-native": "^0.3",
     "@lookiero/sty-psp-segment": "^0.1",
     "@lookiero/sty-psp-storage": "^0.2",
@@ -46,7 +46,7 @@
     "@cypress/webpack-preprocessor": "^6.0.2",
     "@lookiero/eslint-config-sty-psp": "*",
     "@lookiero/event": "^0.3",
-    "@lookiero/payments-front": "7.0.0-ideal-integration-2025.2.24.164234",
+    "@lookiero/payments-front": "6.0.3",
     "@lookiero/sty-psp-jest-config": "*",
     "@lookiero/sty-psp-prettier-config": "*",
     "@lookiero/sty-psp-scripts": "*",
@@ -74,9 +74,9 @@
     "@lookiero/aurora-fonts": ">=2",
     "@lookiero/aurora-iconfont": ">=3",
     "@lookiero/event": "^0.3",
-    "@lookiero/i18n": ">=0.9",
-    "@lookiero/i18n-react": ">=0.9",
-    "@lookiero/payments-front": "7.0.0-LK-37736-2025.2.12.160011",
+    "@lookiero/i18n": ">=1",
+    "@lookiero/i18n-react": ">=1",
+    "@lookiero/payments-front": "6.0.3",
     "apollo-boost": "0.4.4",
     "expo": ">=51",
     "expo-font": ">=12",

package/src/ExpoRoot.tsx

@@ -1,4 +1,3 @@
-import { PortalProvider } from "@gorhom/portal";
 import { useFonts } from "expo-font";
 import "expo/build/Expo.fx";
 import React, { FC, useCallback, useState } from "react";
@@ -33,11 +32,9 @@ const order: Order = {
 };
 
 const customer: Customer = {
-  customerId: "d3c2354b-9811-46d4-b2ba-5fba012ed94d",
+  customerId: "74cb4f76-3f14-4983-81a6-2ee2a9a275d4",
   country: Country.ES,
   segment: Segment.WOMEN,
-  email: "email@example.com",
-  name: "Adèle Léonce Émilie",
 };
 
 const sentryConfig: SentryEnvironment = {
@@ -54,7 +51,7 @@ const apiUrl =
       ? "/local-to-dev"
       : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDk0NjYsImV4cCI6MTc0MjQ3MDI5OSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTExIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6ImQzYzIzNTRiLTk4MTEtNDZkNC1iMmJhLTVmYmEwMTJlZDk0ZCIsImlhdCI6MTc0MDA1MTA5OX0.AkuUZTsn9mgplQwatg0dPKyv1Hsc6r267UMahxMH19g";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDg3OTAsImV4cCI6MTc0NDQ0MzcwMiwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjQtMTEtMDgiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiNzRjYjRmNzYtM2YxNC00OTgzLTgxYTYtMmVlMmE5YTI3NWQ0IiwiaWF0IjoxNzQxNzY1MzAyfQ.VrfjWZlhuG8dhDSFTbyGyClRFGbhdx9SglkE8rEEJyE";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const externalTranslationsUrl =
@@ -95,7 +92,6 @@ setPaymentsBridge({
   useFeatureFlags: () => ({}),
   locale: () => Promise.resolve("es-ES"),
   scrollView: ScrollView,
-  hostUrl: "",
 });
 
 const kameleoonConfig: KameleoonEnvironment = {
@@ -103,17 +99,18 @@ const kameleoonConfig: KameleoonEnvironment = {
   experiments: {},
 };
 
-const { Component: Messaging } =
+const { Component: Messaging, queryBus } =
   process.env.EXPO_PUBLIC_APP_VARIANT === "test"
     ? checkoutMockBootstrap()
     : checkoutBootstrap({ apiUrl: () => apiUrl, getAuthToken });
 const I18n = i18n({
   fetchTranslation: fetchTranslations({ translations }),
-  contextId: "CheckoutI18n",
+  domain: "CheckoutI18n",
 });
 const Root = root({
   Messaging,
   I18n,
+  queryBus,
   getAuthToken,
   development: false,
   sentry: () => (process.env.EXPO_PUBLIC_APP_VARIANT === "test" ? ({} as SentryEnvironment) : sentryConfig),
@@ -132,37 +129,35 @@ const ExpoRoot: FC = () => {
   const onNotAccessible = useCallback(() => setIsAccessible(false), []);
 
   return fontsLoaded ? (
-    <PortalProvider>
-      <PaymentsQueryProvider>
-        <EventProvider>
-          <Aurora>
-            {isAccessible === false && <Text heading={true}>Checkout is not accessible!</Text>}
+    <PaymentsQueryProvider>
+      <EventProvider>
+        <Aurora>
+          {isAccessible === false && <Text heading={true}>Checkout is not accessible!</Text>}
 
-            <Router>
-              <Routes>
-                <Route
-                  path="/checkout/*"
-                  element={
-                    <Root
-                      basePath="/checkout"
-                      customer={customer}
-                      layout={DummyLayout}
-                      locale={locale}
-                      order={order}
-                      subscription={subscription}
-                      useRedirect={useRedirect}
-                      onNotAccessible={onNotAccessible}
-                    />
-                  }
-                />
+          <Router>
+            <Routes>
+              <Route
+                path="/checkout/*"
+                element={
+                  <Root
+                    basePath="/checkout"
+                    customer={customer}
+                    layout={DummyLayout}
+                    locale={locale}
+                    order={order}
+                    subscription={subscription}
+                    useRedirect={useRedirect}
+                    onNotAccessible={onNotAccessible}
+                  />
+                }
+              />
 
-                <Route element={<Navigate to="/checkout" replace />} path="*" />
-              </Routes>
-            </Router>
-          </Aurora>
-        </EventProvider>
-      </PaymentsQueryProvider>
-    </PortalProvider>
+              <Route element={<Navigate to="/checkout" replace />} path="*" />
+            </Routes>
+          </Router>
+        </Aurora>
+      </EventProvider>
+    </PaymentsQueryProvider>
   ) : null;
 };
 

package/src/infrastructure/ui/Root.tsx

@@ -3,6 +3,7 @@ import React, { ComponentType, useCallback } from "react";
 import { Platform } from "react-native";
 import { useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { I18n } from "@lookiero/i18n-react";
+import { QueryBus } from "@lookiero/messaging";
 import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
 import { Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment, SentryLoggerFunctionArgs, sentryLogger, sentryLoggerHOC } from "@lookiero/sty-psp-logging";
@@ -11,11 +12,13 @@ import { Customer } from "../../projection/customer/customer";
 import { Order } from "../../projection/order/order";
 import { Subscription } from "../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../ab-testing/kameleoonEnvironment";
+import { QueryBusProvider } from "./hooks/useQueryBus";
 import { Routing } from "./routing/Routing";
 
 interface RootFunctionArgs {
   readonly Messaging: MessagingRoot;
   readonly I18n: I18n;
+  readonly queryBus: QueryBus;
   readonly development?: boolean;
   readonly sentry: () => SentryEnvironment;
   readonly getAuthToken: () => Promise<string>;
@@ -39,7 +42,15 @@ interface RootProps {
   readonly useRoutes?: typeof reactRouterUseRoutes;
 }
 
-const root: RootFunction = ({ Messaging, I18n, getAuthToken, development, sentry, kameleoon: kameleoonConfig }) => {
+const root: RootFunction = ({
+  Messaging,
+  I18n,
+  queryBus,
+  getAuthToken,
+  development,
+  sentry,
+  kameleoon: kameleoonConfig,
+}) => {
   const logger = sentryLogger(sentry);
   const kameleoon = kameleoonConfig();
 
@@ -60,22 +71,24 @@ const root: RootFunction = ({ Messaging, I18n, getAuthToken, development, sentry
 
     return (
       <Messaging includeReactQueryDevTools={Platform.OS === "web"}>
-        <Routing
-          I18n={I18n}
-          basePath={basePath}
-          customer={customer}
-          getAuthToken={getAuthToken}
-          kameleoon={kameleoon}
-          layout={layout}
-          locale={locale}
-          order={order}
-          subscription={subscription}
-          useRedirect={useRedirect}
-          useRoutes={useRoutes}
-          onCheckoutSubmitted={onCheckoutSubmitted}
-          onI18nError={development ? undefined : handleOnI18nError}
-          onNotAccessible={onNotAccessible}
-        />
+        <QueryBusProvider queryBus={queryBus}>
+          <Routing
+            I18n={I18n}
+            basePath={basePath}
+            customer={customer}
+            getAuthToken={getAuthToken}
+            kameleoon={kameleoon}
+            layout={layout}
+            locale={locale}
+            order={order}
+            subscription={subscription}
+            useRedirect={useRedirect}
+            useRoutes={useRoutes}
+            onCheckoutSubmitted={onCheckoutSubmitted}
+            onI18nError={development ? undefined : handleOnI18nError}
+            onNotAccessible={onNotAccessible}
+          />
+        </QueryBusProvider>
       </Messaging>
     );
   };

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

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

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

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

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

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

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.ts

@@ -11,7 +11,6 @@ const style = StyleSheet.create({
     ...Platform.select({
       android: {
         paddingTop: space2,
-        height: "auto",
       },
     }),
   },

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.tsx

@@ -32,6 +32,7 @@ const TextareaCheckoutQuestionItem: CheckoutQuestionItem = ({
           placeholder={placeholderText}
           style={style}
           testID={testID}
+          textAlignVertical="top"
           value={feedback}
           multiline
           onBlur={onBlur}

package/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.ts

@@ -11,7 +11,6 @@ const style = StyleSheet.create({
     ...Platform.select({
       android: {
         paddingTop: space2,
-        height: "auto",
       },
     }),
   },

package/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.tsx

@@ -37,6 +37,7 @@ const TextareaReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.TEXTAREA
             placeholder={placeholderText}
             style={style}
             testID={testID}
+            textAlignVertical="top"
             value={feedback}
             multiline
             onBlur={onBlur}

package/src/infrastructure/ui/components/templates/header/checkoutHeader/__snapshots__/CheckoutHeader.test.tsx.snap

@@ -183,7 +183,7 @@ exports[`CheckoutHeader template matches the snapshot 1`] = `
             "paddingBottom": 0,
             "paddingLeft": 0,
             "paddingRight": 0,
-            "paddingTop": 2,
+            "paddingTop": 0,
           },
         ]
       }

package/src/infrastructure/ui/components/templates/header/itemDetailHeader/__snapshots__/ItemDetailHeader.test.tsx.snap

@@ -72,7 +72,7 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
             "paddingBottom": 0,
             "paddingLeft": 0,
             "paddingRight": 0,
-            "paddingTop": 2,
+            "paddingTop": 0,
           },
         ]
       }

package/src/infrastructure/ui/components/templates/header/itemHeader/__snapshots__/ItemHeader.test.tsx.snap

@@ -183,7 +183,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
             "paddingBottom": 0,
             "paddingLeft": 0,
             "paddingRight": 0,
-            "paddingTop": 2,
+            "paddingTop": 0,
           },
         ]
       }

package/src/infrastructure/ui/hooks/usePaymentInstrumentEvents.ts

@@ -1,33 +1,75 @@
-import { useEffect } from "react";
-import { PaymentPayload, Section, usePaymentStatusManager } from "@lookiero/payments-front";
+import { useCallback, useEffect } from "react";
+import { useEvent } from "@lookiero/event";
+import { Logger } from "@lookiero/sty-psp-logging";
+import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
+import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
+import { I18nMessages } from "../i18n/i18n";
+
+const PAYMENT_ERROR = "ERROR";
+const PAYMENT_SUCCESS = "PAYMENT_INSTRUMENT_UPDATED";
+
+interface Message {
+  readonly id: string;
+}
+interface OnSuccessFunctionArgs {
+  readonly message: Message;
+}
+interface OnSuccessFunction {
+  (args: OnSuccessFunctionArgs): void;
+}
+
+interface Toaster {
+  readonly id: string;
+}
+interface Error {
+  readonly toaster?: Toaster;
+}
+interface OnErrorFunctionArgs {
+  readonly error: Error;
+}
+interface OnErrorFunction {
+  (args: OnErrorFunctionArgs): void;
+}
 
 interface UsePaymentInstrumentEventsFunctionArgs {
-  readonly onSuccess: (payload: PaymentPayload) => void;
-  readonly onError: (payload: PaymentPayload) => void;
+  readonly logger: Logger;
 }
 
 interface UsePaymentInstrumentEventsFunction {
   (args: UsePaymentInstrumentEventsFunctionArgs): void;
 }
 
-const usePaymentInstrumentEvents: UsePaymentInstrumentEventsFunction = ({ onSuccess, onError }) => {
-  const refreshStatus = usePaymentStatusManager(Section.BOX_CHECKOUT);
+const usePaymentInstrumentEvents: UsePaymentInstrumentEventsFunction = ({ logger }) => {
+  const { subscribe, unsubscribe } = useEvent();
 
-  useEffect(() => {
-    const { isLoading, consumePayload } = refreshStatus;
+  const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
 
-    if (isLoading) {
-      return;
-    }
+  const onSuccess: OnSuccessFunction = useCallback(
+    ({ message }) => createNotification({ bodyI18nKey: message.id, level: NotificationLevel.SUCCESS }),
+    [createNotification],
+  );
 
-    consumePayload((payload) => {
-      if (payload.success) {
-        onSuccess(payload);
-      } else {
-        onError(payload);
+  const onError: OnErrorFunction = useCallback(
+    ({ error }) => {
+      if (error.toaster) {
+        createNotification({
+          bodyI18nKey: error.toaster.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+          level: NotificationLevel.ERROR,
+        });
       }
-    });
-  }, [onError, onSuccess, refreshStatus]);
+    },
+    [createNotification],
+  );
+
+  useEffect(() => {
+    subscribe({ event: PAYMENT_ERROR }, onError);
+    subscribe({ event: PAYMENT_SUCCESS }, onSuccess);
+
+    return () => {
+      unsubscribe({ event: PAYMENT_ERROR }, onError);
+      unsubscribe({ event: PAYMENT_SUCCESS }, onSuccess);
+    };
+  }, [subscribe, unsubscribe, createNotification, onError, onSuccess]);
 };
 
 export { usePaymentInstrumentEvents };

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

@@ -0,0 +1,23 @@
+import { renderHook, waitFor } from "@testing-library/react-native";
+import { mockFn } from "jest-mock-extended";
+import React, { FC } from "react";
+import { QueryBus } from "@lookiero/messaging";
+import { QueryBusProvider, useQueryBus as sut } from "./useQueryBus";
+
+const mockQueryBus = mockFn<QueryBus>();
+
+interface WrapperProps {
+  readonly children: JSX.Element;
+}
+
+const Wrapper: FC<WrapperProps> = ({ children }) => (
+  <QueryBusProvider queryBus={mockQueryBus}>{children}</QueryBusProvider>
+);
+
+describe("useQueryBus hook", () => {
+  it("returns the QueryBusProvider provided queryBus", async () => {
+    const { result } = renderHook(() => sut(), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current).toEqual(mockQueryBus));
+  });
+});

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

@@ -0,0 +1,27 @@
+import React, { createContext, FC, ReactNode, useContext } from "react";
+import invariant from "tiny-invariant";
+import { QueryBus } from "@lookiero/messaging";
+
+const QueryBusContext = createContext<QueryBus>(null as unknown as QueryBus);
+
+interface QueryBusProviderProps {
+  readonly children: ReactNode;
+  readonly queryBus: QueryBus;
+}
+
+const QueryBusProvider: FC<QueryBusProviderProps> = ({ children, queryBus }) => (
+  <QueryBusContext.Provider value={queryBus}>{children}</QueryBusContext.Provider>
+);
+
+const useQueryBus = () => {
+  const queryBus = useContext(QueryBusContext);
+
+  invariant(
+    queryBus,
+    "Your are trying to use the useQueryBus hook without wrapping your app with the <QueryBusProvider>.",
+  );
+
+  return queryBus;
+};
+
+export { useQueryBus, QueryBusProvider };