@lookiero/checkout 0.6.4 → 0.7.0

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import { EndpointFunction } from "@lookiero/i18n";
-import { FC } from "react";
+import { ComponentType } from "react";
 import { CheckoutStatus } from "./domain/checkout/model/checkout";
 import { RootProps } from "./infrastructure/ui/Root";
 import { CheckoutProjection } from "./projection/checkout/checkout";
 import { IsCheckoutAccessibleByCustomerIdProjection } from "./projection/checkout/viewIsCheckoutAccessibleByCustomerId";
+import { SentryLoggerFunctionArgs } from "./shared/logging/SentryLogger";
 interface IsCheckoutAccessibleFunctionArgs {
     readonly customerId: string | undefined;
 }
@@ -20,9 +21,10 @@ interface BootstrapFunctionArgs {
     readonly getAuthToken: () => Promise<string>;
     readonly apiUrl: string;
     readonly translations: EndpointFunction;
+    readonly sentry: SentryLoggerFunctionArgs;
 }
 interface BootstrapFunctionReturn {
-    readonly Root: FC<RootProps>;
+    readonly Root: ComponentType<RootProps>;
     readonly isCheckoutAccessible: IsCheckoutAccessibleFunction;
     readonly firstAvailableCheckoutByCustomerId: FirstAvailableCheckoutByCustomerIdFunction;
 }

package/dist/index.js

@@ -5,13 +5,13 @@ import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootst
 import { root } from "./infrastructure/ui/Root";
 import { viewFirstAvailableCheckoutByCustomerId } from "./projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { viewIsCheckoutAccessibleByCustomerId, } from "./projection/checkout/viewIsCheckoutAccessibleByCustomerId";
-const bootstrap = ({ apiUrl, getAuthToken, translations }) => {
+const bootstrap = ({ apiUrl, getAuthToken, translations, sentry }) => {
     const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, getAuthToken });
     const I18n = i18n({
         fetchTranslation: fetchFetchTranslation({ endpoint: translations }),
         contextId: "CheckoutI18n",
     });
-    const Root = root({ Messaging, I18n, getAuthToken });
+    const Root = root({ Messaging, I18n, getAuthToken, sentry });
     const isCheckoutAccessible = ({ customerId }) => queryBus(viewIsCheckoutAccessibleByCustomerId({ customerId }));
     const firstAvailableCheckoutByCustomerId = ({ customerId }) => queryBus(viewFirstAvailableCheckoutByCustomerId({ customerId: customerId }));
     return {

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

@@ -1,16 +1,19 @@
 import { I18n } from "@lookiero/i18n-react";
 import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
-import { FC } from "react";
+import { ComponentType } from "react";
+import { useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { Customer } from "../../projection/shared/customer";
+import { SentryLoggerFunctionArgs } from "../../shared/logging/SentryLogger";
 import { Menu, TabBar } from "./views/navigation/Navigation";
 interface RootFunctionArgs {
     readonly Messaging: MessagingRoot;
     readonly I18n: I18n;
     readonly development?: boolean;
+    readonly sentry: SentryLoggerFunctionArgs;
     readonly getAuthToken: () => Promise<string>;
 }
 interface RootFunction {
-    (args: RootFunctionArgs): FC<RootProps>;
+    (args: RootFunctionArgs): ComponentType<RootProps>;
 }
 interface RootProps {
     readonly basePath: string;
@@ -20,6 +23,7 @@ interface RootProps {
     readonly tabBar: TabBar;
     readonly onNotAccessible: () => void;
     readonly useRedirect: () => Record<string, string>;
+    readonly useRoutes?: typeof reactRouterUseRoutes;
 }
 declare const root: RootFunction;
 export type { RootProps };

package/dist/infrastructure/ui/Root.js

@@ -1,11 +1,15 @@
 import React, { useCallback } from "react";
 import { Platform } from "react-native";
+import { useRoutes as reactRouterUseRoutes } from "react-router-native";
+import { sentryLogger } from "../../shared/logging/SentryLogger";
 import { Routing } from "./routing/Routing";
-const root = ({ Messaging, I18n, getAuthToken, development }) => 
-// eslint-disable-next-line react/display-name, react/prop-types
-({ basePath, locale = "en", customer, menu, tabBar, onNotAccessible, useRedirect }) => {
-    const handleOnI18nError = useCallback(() => void 0, []);
-    return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
-        React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, locale: locale, menu: menu, tabBar: tabBar, useRedirect: useRedirect, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
+const root = ({ Messaging, I18n, getAuthToken, development, sentry }) => {
+    // eslint-disable-next-line react/display-name, react/prop-types
+    const Root = ({ basePath, locale = "en", customer, menu, tabBar, onNotAccessible, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+        const handleOnI18nError = useCallback(() => void 0, []);
+        return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
+            React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, locale: locale, menu: menu, tabBar: tabBar, useRedirect: useRedirect, useRoutes: useRoutes, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
+    };
+    return sentryLogger(sentry)(Root);
 };
 export { root };

package/dist/infrastructure/ui/routing/CheckoutAccessibilityMiddleware.js

@@ -11,7 +11,7 @@ const CheckoutAccessibilityMiddleware = ({ customerId, onNotAccessible, loader =
         if (notAccessible) {
             onNotAccessibleRef.current();
         }
-    }, [notAccessible, onNotAccessible]);
+    }, [notAccessible]);
     return accessible === undefined && [QueryStatus.IDLE, QueryStatus.LOADING].includes(status)
         ? loader
         : accessible

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

@@ -1,5 +1,6 @@
 import { I18n } from "@lookiero/i18n-react";
-import { FC } from "react";
+import React from "react";
+import { useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { Customer } from "../../../projection/shared/customer";
 import { Menu, TabBar } from "../views/navigation/Navigation";
 interface RoutingProps {
@@ -13,6 +14,13 @@ interface RoutingProps {
     readonly onNotAccessible: () => void;
     readonly onI18nError?: (err: Error) => void;
     readonly useRedirect: () => Record<string, string>;
+    readonly useRoutes: typeof reactRouterUseRoutes;
 }
-declare const Routing: FC<RoutingProps>;
-export { Routing };
+/**
+ * Provided useRoutes is not stable (when integrated with Sentry) as it's rendering a different component tree.
+ *
+ * https://github.com/getsentry/sentry-javascript/blob/master/packages/react/src/reactrouterv6.tsx#L221
+ * (SentryRoutes is a new component after each re-render)
+ */
+declare const MemoizedRouting: React.NamedExoticComponent<RoutingProps>;
+export { MemoizedRouting as Routing };

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

@@ -1,5 +1,5 @@
-import React, { lazy, Suspense } from "react";
-import { Navigate, Outlet, useRoutes } from "react-router-native";
+import React, { lazy, memo, Suspense } from "react";
+import { Navigate, Outlet, useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
 import { App } from "../views/App";
 import { CheckoutPaymentModal } from "../views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal";
@@ -13,8 +13,8 @@ const Summary = lazy(() => import("../views/summary/Summary").then((module) => (
 const Checkout = lazy(() => import("../views/checkout/Checkout").then((module) => ({ default: module.Checkout })));
 const Feedback = lazy(() => import("../views/feedback/Feedback").then((module) => ({ default: module.Feedback })));
 const NotFound = lazy(() => import("../views/notFound/NotFound").then((module) => ({ default: module.NotFound })));
-const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthToken, onI18nError, onNotAccessible, useRedirect, }) => {
-    const routes = useRoutes([
+const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthToken, onI18nError, onNotAccessible, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+    return useRoutes([
         {
             path: "",
             element: (React.createElement(BasePathProvider, { basePath: basePath },
@@ -73,6 +73,12 @@ const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthT
             ],
         },
     ]);
-    return routes;
 };
-export { Routing };
+/**
+ * Provided useRoutes is not stable (when integrated with Sentry) as it's rendering a different component tree.
+ *
+ * https://github.com/getsentry/sentry-javascript/blob/master/packages/react/src/reactrouterv6.tsx#L221
+ * (SentryRoutes is a new component after each re-render)
+ */
+const MemoizedRouting = memo(Routing);
+export { MemoizedRouting as Routing };

package/dist/shared/logging/SentryDependencies.d.ts

@@ -0,0 +1,11 @@
+import { BrowserClient, Hub } from "@sentry/browser";
+import { FetchImpl } from "@sentry/browser/types/transports/utils";
+import { ErrorBoundary } from "@sentry/react";
+import { ReactNativeTransportOptions } from "@sentry/react-native/dist/js/options";
+import { Transport } from "@sentry/types";
+import { wrapUseRoutes } from "./reactRouterV6Instrumentation/reactRouterV6Instrumentation";
+import { Integrations, WrapComponent } from "./types";
+declare const transport: (options: ReactNativeTransportOptions, nativeFetch?: FetchImpl) => Transport;
+declare const integrations: Integrations;
+declare const wrapComponent: WrapComponent;
+export { BrowserClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };

package/dist/shared/logging/SentryDependencies.js

@@ -0,0 +1,17 @@
+import { BrowserClient, Hub, makeFetchTransport, defaultIntegrations } from "@sentry/browser";
+import { ErrorBoundary } from "@sentry/react";
+import { BrowserTracing } from "@sentry/tracing";
+import { useEffect } from "react";
+import { useLocation, useNavigationType, matchRoutes } from "react-router-native";
+import { reactRouterV6Instrumentation, wrapUseRoutes, } from "./reactRouterV6Instrumentation/reactRouterV6Instrumentation";
+const transport = (options, nativeFetch) => makeFetchTransport(options, nativeFetch);
+/**
+ * BrowserTracing must be initialized before the BrowserClient
+ * so we instantiate it before the integrations function is called
+ */
+const browserTracing = new BrowserTracing({
+    routingInstrumentation: reactRouterV6Instrumentation({ useEffect, useLocation, useNavigationType, matchRoutes }),
+});
+const integrations = () => [...defaultIntegrations, browserTracing];
+const wrapComponent = (Component) => Component;
+export { BrowserClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };

package/dist/shared/logging/SentryDependencies.native.d.ts

@@ -0,0 +1,10 @@
+import { FetchImpl } from "@sentry/browser/types/transports/utils";
+import { ReactNativeClient, Hub, ErrorBoundary } from "@sentry/react-native";
+import { ReactNativeTransportOptions } from "@sentry/react-native/dist/js/options";
+import { Transport } from "@sentry/types";
+import { Integrations, WrapComponent, WrapUseRoutes } from "./types";
+declare const transport: (options: ReactNativeTransportOptions, nativeFetch?: FetchImpl) => Transport;
+declare const integrations: Integrations;
+declare const wrapComponent: WrapComponent;
+declare const wrapUseRoutes: WrapUseRoutes;
+export { ReactNativeClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };

package/dist/shared/logging/SentryDependencies.native.js

@@ -0,0 +1,15 @@
+import { makeFetchTransport } from "@sentry/browser";
+import { ReactNativeClient, Hub, ErrorBoundary, wrap as sentryWrap, ReactNativeTracing } from "@sentry/react-native";
+import { makeReactNativeTransport } from "@sentry/react-native/dist/js/transports/native";
+import { NATIVE } from "@sentry/react-native/dist/js/wrapper";
+import { useEffect } from "react";
+import { matchRoutes, useLocation } from "react-router-native";
+import { NativeReactRouterV6Instrumentation } from "./reactRouterV6Instrumentation/NativeReactRouterV6Instrumentation";
+const transport = (options, nativeFetch) => NATIVE.isNativeTransportAvailable() ? makeReactNativeTransport(options) : makeFetchTransport(options, nativeFetch);
+const routingInstrumentation = new NativeReactRouterV6Instrumentation({ useEffect, useLocation, matchRoutes });
+// ReactNativeTracing's instantiation must be delayed so we wrap it in a function
+// that's going to be called when the Client is instantiated
+const integrations = () => [new ReactNativeTracing({ routingInstrumentation })];
+const wrapComponent = (Component) => sentryWrap(Component);
+const wrapUseRoutes = routingInstrumentation.wrapUseRoutes.bind(routingInstrumentation);
+export { ReactNativeClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };

package/dist/shared/logging/SentryLogger.d.ts

@@ -0,0 +1,19 @@
+import { ComponentType } from "react";
+import { Platform } from "react-native";
+interface SentryLoggerFunctionArgs {
+    readonly publicKey: string;
+    readonly environment: `${typeof Platform.OS}-${"DEV" | "PROD" | "EXPO"}`;
+    readonly release: string;
+    readonly project: string;
+}
+interface SentryLoggerHOCProps {
+    readonly customer: {
+        readonly customerId: string;
+    } | undefined;
+}
+interface SentryLoggerFunction {
+    (args: SentryLoggerFunctionArgs): <P extends SentryLoggerHOCProps>(Component: ComponentType<P>) => ComponentType<P & JSX.IntrinsicAttributes>;
+}
+declare const sentryLogger: SentryLoggerFunction;
+export type { SentryLoggerFunctionArgs, SentryLoggerHOCProps };
+export { sentryLogger };

package/dist/shared/logging/SentryLogger.js

@@ -0,0 +1,122 @@
+import { defaultStackParser } from "@sentry/browser";
+import { makeMain } from "@sentry/core";
+import React, { useEffect } from "react";
+import { Platform } from "react-native";
+import { useRoutes as reactRouterUseRoutes } from "react-router-native";
+import { Client, Hub, transport, integrations, wrapUseRoutes, wrapComponent, ErrorBoundary, } from "./SentryDependencies";
+// This configuration is obtained from
+// https://docs.sentry.io/clients/javascript/tips/#decluttering-sentry
+const IGNORED_ERRORS = [
+    // Random plugins/extensions
+    "top.GLOBALS",
+    // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
+    "originalCreateNotification",
+    "canvas.contentDocument",
+    "MyApp_RemoveAllHighlights",
+    "http://tt.epicplay.com",
+    "Can't find variable: ZiteReader",
+    "jigsaw is not defined",
+    "ComboSearch is not defined",
+    "http://loading.retry.widdit.com/",
+    "atomicFindClose",
+    // Facebook borked
+    "fb_xd_fragment",
+    // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to reduce this. (thanks @acdha)
+    // See http://stackoverflow.com/questions/4113268/how-to-stop-javascript-injection-from-vodafone-proxy
+    "bmi_SafeAddOnload",
+    "EBCallBackMessageReceived",
+    // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
+    "conduitPage",
+    // Generic error code from errors outside the security sandbox
+    // You can delete this if using raven.js > 1.0, which ignores these automatically.
+    "Script error.",
+    // Avast extension error
+    "_avast_submit",
+];
+const DENIED_URLS = [
+    // Google Adsense
+    /pagead\/js/i,
+    // Facebook flakiness
+    /graph\.facebook\.com/i,
+    // Facebook blocked
+    /connect\.facebook\.net\/en_US\/all\.js/i,
+    // Woopra flakiness
+    /eatdifferent\.com\.woopra-ns\.com/i,
+    /static\.woopra\.com\/js\/woopra\.js/i,
+    // Chrome extensions
+    /extensions\//i,
+    /^chrome:\/\//i,
+    // Other plugins
+    /127\.0\.0\.1:4001\/isrunning/i,
+    /webappstoolbarba\.texthelp\.com\//i,
+    /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
+];
+const sentryLogger = ({ publicKey, environment, release, project }) => {
+    let globalHub;
+    let currentHub;
+    const initHub = () => {
+        const client = new Client({
+            environment,
+            release,
+            dsn: `https://${publicKey}@o179049.ingest.sentry.io/${project}`,
+            integrations: integrations(),
+            tracesSampleRate: 0.5,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            enableNative: Platform.OS !== "web",
+            autoInitializeNativeSdk: Platform.OS !== "web",
+            stackParser: defaultStackParser,
+            transport,
+            ignoreErrors: IGNORED_ERRORS,
+            denyUrls: DENIED_URLS,
+        });
+        return new Hub(client);
+    };
+    /**
+     * BrowserClient must be initialized before wrapUseRoutes is used.
+     *
+     * ReactNativeClient cannot be initialized until actual component is rendered.
+     * Its initialization will trigger the native sdk setup with the provided settings,
+     * but by the time an event will be sent to Sentry, the host project (UAF)
+     * will have overridden its configuration (dsn, etc) after initializing it
+     * so we have to initialize it after the component mount.
+     */
+    if (Platform.OS === "web") {
+        currentHub = initHub();
+    }
+    const onMount = (customerId) => {
+        // currentHub won't be initialized in native until this time
+        currentHub = currentHub ?? initHub();
+        currentHub.setUser({ id: customerId });
+        currentHub.startSession();
+        if (!globalHub) {
+            globalHub = makeMain(currentHub);
+        }
+    };
+    const onUnMount = () => {
+        if (currentHub) {
+            currentHub.setUser(null);
+            currentHub.endSession();
+        }
+        if (globalHub) {
+            makeMain(globalHub);
+            globalHub = null;
+        }
+    };
+    const useRoutes = wrapUseRoutes(reactRouterUseRoutes);
+    return (Component) => {
+        const WrappedComponent = wrapComponent(Component);
+        const SentryLogger = (props) => {
+            const { customer } = props;
+            useEffect(() => {
+                onMount(customer?.customerId);
+                return onUnMount;
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+            }, []);
+            return (React.createElement(ErrorBoundary, null,
+                React.createElement(WrappedComponent, { ...props, useRoutes: useRoutes })));
+        };
+        return SentryLogger;
+    };
+};
+export { sentryLogger };

package/dist/shared/logging/reactRouterV6Instrumentation/NativeReactRouterV6Instrumentation.d.ts

@@ -0,0 +1,49 @@
+import { RoutingInstrumentation } from "@sentry/react-native";
+import { OnConfirmRoute, TransactionCreator } from "@sentry/react-native/dist/js/tracing/routingInstrumentation";
+import { BeforeNavigate } from "@sentry/react-native/dist/js/tracing/types";
+import { TransactionContext } from "@sentry/types";
+import { Location, MatchRoutes, UseEffect, UseLocation, WrapUseRoutes } from "../types";
+import { NavigationCurrentRoute, NavigationRoute } from "./types";
+/**
+ * This instrumentation has been built taking as an example the actual
+ * ReactNavigationV4Instrumentation implementation as suggested in the documentation.
+ *
+ * (https://docs.sentry.io/platforms/react-native/performance/instrumentation/automatic-instrumentation/#custom-instrumentation)
+ * (https://github.com/getsentry/sentry-react-native/blob/211ec081b6bf8d7d29541afe9d800040f61e3c4e/src/js/tracing/reactnavigationv4.ts)
+ */
+interface NavigationTransactionContext extends TransactionContext {
+    readonly tags: {
+        readonly ["routing.instrumentation"]: string;
+        readonly ["routing.route.name"]: string;
+    };
+    readonly data: {
+        readonly route: NavigationCurrentRoute;
+        readonly previousRoute: NavigationRoute | null;
+    };
+}
+interface NativeReactRouterV6InstrumentationConstructorArgs {
+    readonly useEffect: UseEffect;
+    readonly useLocation: UseLocation;
+    readonly matchRoutes: MatchRoutes;
+    readonly transformLocation?: (location: Location) => Location;
+}
+declare class NativeReactRouterV6Instrumentation extends RoutingInstrumentation {
+    static instrumentationName: string;
+    private useEffect;
+    private useLocation;
+    private matchRoutes;
+    private transformLocation;
+    private prevRoute?;
+    private recentRouteKeys;
+    private latestTransaction?;
+    private readonly maxRecentRouteLen;
+    constructor({ useEffect, useLocation, matchRoutes, transformLocation, }: NativeReactRouterV6InstrumentationConstructorArgs);
+    registerRoutingInstrumentation(listener: TransactionCreator, beforeNavigate: BeforeNavigate, onConfirmRoute: OnConfirmRoute): void;
+    private onRouteChange;
+    private currentRouteFromLocation;
+    private pushRecentRouteKey;
+    private onBeforeNavigateNotSampled;
+    wrapUseRoutes: WrapUseRoutes;
+}
+export type { NavigationTransactionContext };
+export { NativeReactRouterV6Instrumentation };

package/dist/shared/logging/reactRouterV6Instrumentation/NativeReactRouterV6Instrumentation.js

@@ -0,0 +1,131 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { RoutingInstrumentation } from "@sentry/react-native";
+import { logger } from "@sentry/utils";
+import React from "react";
+import { stripFirstSlugFromLocation } from "./location";
+import { normalizedNameAndMatchForLocation } from "./normalizedNameAndMatchForLocation";
+const transactionContext = ({ instrumentationName, route, previousRoute = null, }) => ({
+    name: route.name,
+    op: "navigation",
+    tags: {
+        ["routing.instrumentation"]: instrumentationName,
+        ["routing.route.name"]: route.name,
+    },
+    data: {
+        route,
+        previousRoute,
+    },
+});
+class NativeReactRouterV6Instrumentation extends RoutingInstrumentation {
+    static instrumentationName = "react-router-v6";
+    useEffect;
+    useLocation;
+    matchRoutes;
+    transformLocation;
+    prevRoute;
+    recentRouteKeys = [];
+    latestTransaction;
+    maxRecentRouteLen = 200;
+    constructor({ useEffect, useLocation, matchRoutes, transformLocation = stripFirstSlugFromLocation, }) {
+        super();
+        this.useEffect = useEffect;
+        this.useLocation = useLocation;
+        this.matchRoutes = matchRoutes;
+        this.transformLocation = transformLocation;
+    }
+    registerRoutingInstrumentation(listener, beforeNavigate, onConfirmRoute) {
+        super.registerRoutingInstrumentation(listener, beforeNavigate, onConfirmRoute);
+        this.latestTransaction = this.onRouteWillChange(INITIAL_TRANSACTION_CONTEXT);
+    }
+    onRouteChange(location, routes, updateLatestTransaction = false) {
+        const currentRoute = this.currentRouteFromLocation(location, routes);
+        if (!currentRoute || (this.prevRoute && currentRoute.key === this.prevRoute.key)) {
+            return;
+        }
+        const originalContext = transactionContext({
+            instrumentationName: NativeReactRouterV6Instrumentation.instrumentationName,
+            route: currentRoute,
+            previousRoute: this.prevRoute,
+        });
+        let finalContext = this._beforeNavigate?.(originalContext);
+        if (!finalContext) {
+            logger.error(`[ReactRouterV6Instrumentation] beforeNavigate returned ${finalContext}, return context.sampled = false to not send transaction.`);
+            finalContext = { ...originalContext, sampled: false };
+        }
+        if (finalContext.sampled === false) {
+            this.onBeforeNavigateNotSampled(finalContext.name);
+        }
+        if (updateLatestTransaction && this.latestTransaction) {
+            this.latestTransaction.updateWithContext(finalContext);
+        }
+        else {
+            this.latestTransaction = this.onRouteWillChange(finalContext);
+        }
+        this.pushRecentRouteKey(currentRoute.key);
+        this.prevRoute = currentRoute;
+    }
+    currentRouteFromLocation(location, routes) {
+        const normalizedLocation = this.transformLocation(location);
+        const branches = this.matchRoutes(routes, normalizedLocation);
+        if (!branches) {
+            return null;
+        }
+        const [normalizedName, match] = normalizedNameAndMatchForLocation({
+            location: normalizedLocation,
+            routes,
+            branches,
+        });
+        return {
+            name: normalizedName,
+            key: normalizedName,
+            params: match?.params ?? {},
+            hasBeenSeen: this.recentRouteKeys.includes(normalizedName),
+        };
+    }
+    pushRecentRouteKey(key) {
+        this.recentRouteKeys.push(key);
+        if (this.recentRouteKeys.length > this.maxRecentRouteLen) {
+            this.recentRouteKeys = this.recentRouteKeys.slice(this.recentRouteKeys.length - this.maxRecentRouteLen);
+        }
+    }
+    onBeforeNavigateNotSampled(transactionName) {
+        logger.log(`[ReactRouterV6Instrumentation] Will not send transaction "${transactionName}" due to beforeNavigate.`);
+    }
+    wrapUseRoutes = (origUseRoutes) => {
+        if (!this.useEffect || !this.useLocation || !this.matchRoutes) {
+            logger.warn("ReactRouterV6Instrumentation was unable to wrap `useRoutes` because of one or more missing parameters.");
+            return origUseRoutes;
+        }
+        let isMountRenderPass = true;
+        const useRoutes = (routes, locationArg) => {
+            const SentryRoutes = () => {
+                const Routes = origUseRoutes(routes, locationArg);
+                const location = this.useLocation();
+                const stableLocationParam = typeof locationArg === "string" || (locationArg && locationArg.pathname)
+                    ? locationArg
+                    : location;
+                this.useEffect(() => {
+                    const normalizedLocation = typeof stableLocationParam === "string" ? { pathname: stableLocationParam } : stableLocationParam;
+                    if (isMountRenderPass) {
+                        this.onRouteChange(normalizedLocation, routes, true);
+                        isMountRenderPass = false;
+                    }
+                    else {
+                        this.onRouteChange(normalizedLocation, routes);
+                    }
+                }, [stableLocationParam]);
+                return Routes;
+            };
+            return React.createElement(SentryRoutes, null);
+        };
+        return useRoutes;
+    };
+}
+const INITIAL_TRANSACTION_CONTEXT = {
+    name: "App Launch",
+    op: "navigation",
+    tags: {
+        ["routing.instrumentation"]: NativeReactRouterV6Instrumentation.instrumentationName,
+    },
+};
+export { NativeReactRouterV6Instrumentation };

package/dist/shared/logging/reactRouterV6Instrumentation/location.d.ts

@@ -0,0 +1,3 @@
+import { Location } from "../types";
+declare const stripFirstSlugFromLocation: (locationArg: string | Location) => Location;
+export { stripFirstSlugFromLocation };

package/dist/shared/logging/reactRouterV6Instrumentation/location.js

@@ -0,0 +1,5 @@
+// Remove the location's first path ("/checkout"). Otherwise it won't match the proper route.
+const stripFirstSlugFromLocation = (locationArg) => ({
+    pathname: (typeof locationArg === "string" ? locationArg : locationArg?.pathname || "").replace(/^\/\w+/, ""),
+});
+export { stripFirstSlugFromLocation };

package/dist/shared/logging/reactRouterV6Instrumentation/normalizedNameAndMatchForLocation.d.ts

@@ -0,0 +1,12 @@
+import { RouteMatch, RouteObject } from "react-router-native";
+import { Location } from "../types";
+interface NormalizedNameAndMatchForLocationFunctionArgs {
+    readonly routes?: RouteObject[];
+    readonly location: Location;
+    readonly branches: RouteMatch[];
+}
+interface NormalizedNameAndMatchForLocationFunction {
+    (args: NormalizedNameAndMatchForLocationFunctionArgs): [string, RouteMatch | null];
+}
+declare const normalizedNameAndMatchForLocation: NormalizedNameAndMatchForLocationFunction;
+export { normalizedNameAndMatchForLocation };

package/dist/shared/logging/reactRouterV6Instrumentation/normalizedNameAndMatchForLocation.js

@@ -0,0 +1,34 @@
+import { getNumberOfUrlSegments } from "@sentry/utils";
+const normalizedNameAndMatchForLocation = ({ routes, location, branches, }) => {
+    if (!routes || routes.length === 0) {
+        return [location.pathname, null];
+    }
+    let pathBuilder = "";
+    if (branches) {
+        // eslint-disable-next-line @typescript-eslint/prefer-for-of
+        for (let x = 0; x < branches.length; x++) {
+            const branch = branches[x];
+            const route = branch.route;
+            if (route) {
+                // Early return if index route
+                if (route.index) {
+                    return [branch.pathname, branch];
+                }
+                const path = route.path;
+                if (path) {
+                    const newPath = path[0] === "/" || pathBuilder[pathBuilder.length - 1] === "/" ? path : `/${path}`;
+                    pathBuilder += newPath;
+                    if (branch.pathname === location.pathname) {
+                        if (getNumberOfUrlSegments(pathBuilder) !== getNumberOfUrlSegments(branch.pathname) &&
+                            pathBuilder.slice(-2) !== "/*") {
+                            return [newPath, branch];
+                        }
+                        return [pathBuilder, branch];
+                    }
+                }
+            }
+        }
+    }
+    return [location.pathname, null];
+};
+export { normalizedNameAndMatchForLocation };

package/dist/shared/logging/reactRouterV6Instrumentation/reactRouterV6Instrumentation.d.ts

@@ -0,0 +1,15 @@
+import { Transaction, TransactionContext } from "@sentry/types";
+import { Location, MatchRoutes, UseEffect, UseLocation, UseNavigationType, WrapUseRoutes } from "../types";
+interface ReactRouterV6InstrumentationFunctionArgs {
+    readonly useEffect: UseEffect;
+    readonly useLocation: UseLocation;
+    readonly useNavigationType: UseNavigationType;
+    readonly matchRoutes: MatchRoutes;
+    readonly transformLocation?: (location: Location) => Location;
+}
+interface ReactRouterV6InstrumentationFunction {
+    (args: ReactRouterV6InstrumentationFunctionArgs): (customStartTransaction: (context: TransactionContext) => Transaction | undefined, startTransactionOnPageLoad?: boolean, startTransactionOnLocationChange?: boolean) => void;
+}
+declare const reactRouterV6Instrumentation: ReactRouterV6InstrumentationFunction;
+declare const wrapUseRoutes: WrapUseRoutes;
+export { reactRouterV6Instrumentation, wrapUseRoutes };

package/dist/shared/logging/reactRouterV6Instrumentation/reactRouterV6Instrumentation.js

@@ -0,0 +1,92 @@
+import { WINDOW } from "@sentry/browser";
+import { logger } from "@sentry/utils";
+import React from "react";
+import { stripFirstSlugFromLocation } from "./location";
+import { normalizedNameAndMatchForLocation } from "./normalizedNameAndMatchForLocation";
+const transactionContext = ({ instrumentationName, op, routeName, source, }) => ({
+    name: routeName,
+    op,
+    tags: {
+        ["routing.instrumentation"]: instrumentationName,
+        ["routing.route.name"]: routeName,
+    },
+    metadata: {
+        source,
+    },
+});
+const instrumentationName = "react-router-v6";
+let activeTransaction;
+/* eslint-disable @typescript-eslint/naming-convention */
+let _useEffect;
+let _useLocation;
+let _useNavigationType;
+let _matchRoutes;
+let _customStartTransaction;
+let _startTransactionOnLocationChange;
+let _transformLocation;
+const reactRouterV6Instrumentation = ({ useEffect, useLocation, useNavigationType, matchRoutes, transformLocation = stripFirstSlugFromLocation, }) => {
+    return (customStartTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true) => {
+        const initPathName = WINDOW && WINDOW.location && WINDOW.location.pathname;
+        if (startTransactionOnPageLoad && initPathName) {
+            activeTransaction = customStartTransaction(transactionContext({ instrumentationName, op: "pageload", routeName: initPathName, source: "url" }));
+        }
+        _useEffect = useEffect;
+        _useLocation = useLocation;
+        _useNavigationType = useNavigationType;
+        _matchRoutes = matchRoutes;
+        _customStartTransaction = customStartTransaction;
+        _startTransactionOnLocationChange = startTransactionOnLocationChange;
+        _transformLocation = transformLocation;
+    };
+};
+const updatePageloadTransaction = (location, routes) => {
+    const branches = _matchRoutes(routes, location);
+    if (activeTransaction && branches) {
+        const [name, match] = normalizedNameAndMatchForLocation({ routes, location, branches });
+        const source = match ? "route" : "url";
+        activeTransaction.setName(name, source);
+    }
+};
+const handleNavigation = (location, routes, navigationType) => {
+    const branches = _matchRoutes(routes, location);
+    if (_startTransactionOnLocationChange && (navigationType === "PUSH" || navigationType === "POP") && branches) {
+        if (activeTransaction) {
+            activeTransaction.finish();
+        }
+        const [name, match] = normalizedNameAndMatchForLocation({ routes, location, branches });
+        const source = match ? "route" : "url";
+        activeTransaction = _customStartTransaction(transactionContext({ instrumentationName, op: "navigation", routeName: name, source }));
+    }
+};
+const wrapUseRoutes = (origUseRoutes) => {
+    if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes || !_customStartTransaction) {
+        logger.warn("reactRouterV6Instrumentation was unable to wrap `useRoutes` because of one or more missing parameters.");
+        return origUseRoutes;
+    }
+    let isMountRenderPass = true;
+    // eslint-disable-next-line react/display-name
+    return (routes, locationArg) => {
+        const SentryRoutes = () => {
+            const Routes = origUseRoutes(routes, locationArg);
+            const location = _useLocation();
+            const navigationType = _useNavigationType();
+            // A value with stable identity to either pick `locationArg` if available or `location` if not
+            const stableLocationParam = typeof locationArg === "string" || (locationArg && locationArg.pathname)
+                ? locationArg
+                : location;
+            _useEffect(() => {
+                const normalizedLocation = typeof stableLocationParam === "string" ? { pathname: stableLocationParam } : stableLocationParam;
+                if (isMountRenderPass) {
+                    updatePageloadTransaction(_transformLocation(normalizedLocation), routes);
+                    isMountRenderPass = false;
+                }
+                else {
+                    handleNavigation(_transformLocation(normalizedLocation), routes, navigationType);
+                }
+            }, [navigationType, stableLocationParam]);
+            return Routes;
+        };
+        return React.createElement(SentryRoutes, null);
+    };
+};
+export { reactRouterV6Instrumentation, wrapUseRoutes };

package/dist/shared/logging/reactRouterV6Instrumentation/types.d.ts

@@ -0,0 +1,9 @@
+interface NavigationRoute {
+    readonly name: string;
+    readonly key: string;
+    readonly params: Record<string, unknown>;
+}
+interface NavigationCurrentRoute extends NavigationRoute {
+    readonly hasBeenSeen: boolean;
+}
+export type { NavigationRoute, NavigationCurrentRoute };

package/dist/shared/logging/reactRouterV6Instrumentation/types.js

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

package/dist/shared/logging/types.d.ts

@@ -0,0 +1,22 @@
+import { Integration } from "@sentry/types";
+import { ComponentType, useEffect } from "react";
+import { matchRoutes, RouteObject, useLocation } from "react-router-native";
+interface Location {
+    readonly pathname: string;
+}
+type UseEffect = typeof useEffect;
+type UseLocation = typeof useLocation;
+type MatchRoutes = typeof matchRoutes;
+type NavigationType = "PUSH" | "REPLACE" | "POP";
+type UseNavigationType = () => NavigationType;
+type UseRoutes = (routes: RouteObject[], locationArg?: Partial<Location> | string) => React.ReactElement | null;
+interface WrapUseRoutes {
+    (useRoutes: UseRoutes): UseRoutes;
+}
+interface WrapComponent {
+    <P>(Component: ComponentType<P>): ComponentType<P>;
+}
+interface Integrations {
+    (): Integration[];
+}
+export type { Location, Integrations, UseEffect, UseLocation, NavigationType, UseNavigationType, MatchRoutes, UseRoutes, WrapUseRoutes, WrapComponent, };

package/dist/shared/logging/types.js

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

package/dist/shared/ui/components/atoms/field/Field.js

@@ -4,22 +4,14 @@ import React from "react";
 import { View } from "react-native";
 import { theme } from "../../../../../infrastructure/ui/theme/theme";
 import { style } from "./Field.style";
-const { spaceM } = theme();
+const { spaceM, spaceXL } = theme();
 const Field = ({ label, isFocused = false, style: customStyle }) => {
-    const springs = useSpring(isFocused ? { scale: 0.75, translateY: -14, translateX: 0 } : { scale: 1, translateY: spaceM, translateX: spaceM });
+    const springs = useSpring(isFocused
+        ? { scale: 0.75, translateY: -14, translateX: -spaceXL }
+        : { scale: 1, translateY: spaceM, translateX: 0 });
     return (React.createElement(animated.View, { pointerEvents: "none", style: [
             {
-                transform: [
-                    {
-                        scale: springs.scale,
-                    },
-                    {
-                        translateY: springs.translateY,
-                    },
-                    {
-                        translateX: springs.translateX,
-                    },
-                ],
+                transform: [{ scale: springs.scale }, { translateY: springs.translateY }, { translateX: springs.translateX }],
             },
             customStyle?.field,
         ] },

package/dist/shared/ui/components/atoms/field/Field.style.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../../infrastructure/ui/theme/theme";
-const { colorBase, spaceS } = theme();
+const { colorBase, spaceM } = theme();
 const style = StyleSheet.create({
     fieldBackground: {
         backgroundColor: colorBase,
@@ -12,7 +12,7 @@ const style = StyleSheet.create({
     fieldText: {
         flexWrap: "nowrap",
         overflow: "hidden",
-        paddingHorizontal: spaceS,
+        paddingHorizontal: spaceM,
         zIndex: 1,
     },
 });

package/dist/shared/ui/components/molecules/inputField/InputField.js

@@ -7,8 +7,8 @@ import { Icon } from "../../atoms/icon/Icon";
 import { Input } from "../../atoms/input/Input";
 import { style } from "./InputField.style";
 const { colorBase, colorContent, colorGrayscaleL, colorPrimary, spaceM, iconSize } = theme();
-const inputPaddingRightWithIcon = iconSize + spaceM * 2;
-const inputPaddingRightWithoutIcon = spaceM * 2;
+const inputPaddingRightWithIcon = iconSize + spaceM;
+const inputPaddingRightWithoutIcon = spaceM;
 const InputField = ({ label, placeholder, value, multiline = false, minHeight, error, style: customStyle, onChange = () => void 0, icon, ...inputRestProps }) => {
     const [isFocused, setIsFocused] = useState(false);
     const handleOnChange = useCallback((text) => onChange(text), [onChange]);

package/dist/shared/ui/components/molecules/inputField/InputField.style.d.ts

@@ -5,6 +5,7 @@ declare const style: {
     };
     field: {
         position: "absolute";
+        width: string;
         zIndex: number;
     };
     icon: {

package/dist/shared/ui/components/molecules/inputField/InputField.style.js

@@ -8,6 +8,7 @@ const style = StyleSheet.create({
     },
     field: {
         position: "absolute",
+        width: "100%",
         zIndex: 4,
     },
     icon: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -33,6 +33,7 @@
     "@lookiero/messaging": "^8.0.0",
     "@lookiero/messaging-react": "^8.0.0",
     "@react-spring/native": "^9.5.5",
+    "@sentry/react-native": "^4.13.0",
     "inline-style-prefixer": "6.0.1",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-svg": "^12.1.1",