@lookiero/checkout 0.6.0-beta.30 → 0.6.0-beta.32

package/dist/infrastructure/ui/Root.js

@@ -1,8 +1,6 @@
 import React, { useCallback } from "react";
 import { Platform } from "react-native";
-import { 
-//Routes as ReactRouterRoutes
-useRoutes as reactRouterUseRoutes, } from "react-router-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, sentry }) => {

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

@@ -1,5 +1,5 @@
 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";
@@ -16,11 +16,11 @@ interface RoutingProps {
     readonly useRedirect: () => Record<string, string>;
     readonly useRoutes: typeof reactRouterUseRoutes;
 }
-declare const Routing: FC<RoutingProps>;
 /**
  * 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)
  */
-export { Routing };
+declare const MemoizedRouting: React.NamedExoticComponent<RoutingProps>;
+export { MemoizedRouting as Routing };

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

@@ -1,8 +1,5 @@
-import React, { lazy, Suspense } from "react";
-import { 
-// Routes as ReactRouterRoutes,
-// Route,
-Navigate, Outlet, useRoutes as reactRouterUseRoutes, } 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";
@@ -15,92 +12,10 @@ const Item = lazy(() => import("../views/item/Item").then((module) => ({ default
 const Summary = lazy(() => import("../views/summary/Summary").then((module) => ({ default: module.Summary })));
 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 Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthToken, onI18nError, onNotAccessible, useRedirect, useRoutes = reactRouterUseRoutes,
-// rootRoutes: RootRoutes,
- }) => {
-    // return (
-    //   <RootRoutes>
-    //     <Route
-    //       path=""
-    //       element={
-    //         <BasePathProvider basePath={basePath}>
-    //           <CheckoutAccessibilityMiddleware customerId={customer?.customerId} onNotAccessible={onNotAccessible}>
-    //             <I18n loader={<Spinner />} locale={locale} onError={onI18nError}>
-    //               <CheckoutMiddleware customerId={customer?.customerId as string}>
-    //                 <App customerId={customer?.customerId as string} menu={menu} tabBar={tabBar}>
-    //                   <Outlet />
-    //                 </App>
-    //               </CheckoutMiddleware>
-    //             </I18n>
-    //           </CheckoutAccessibilityMiddleware>
-    //         </BasePathProvider>
-    //       }
-    //     >
-    //       <Route
-    //         path={Routes.INTRO}
-    //         element={
-    //           <Suspense fallback={<Spinner />}>
-    //             <Intro customerId={customer?.customerId as string} />
-    //           </Suspense>
-    //         }
-    //       />
-    //       <Route
-    //         path={Routes.ITEM}
-    //         element={
-    //           <Suspense fallback={<Spinner />}>
-    //             <Item country={customer?.country as Country} customerId={customer?.customerId as string} />
-    //           </Suspense>
-    //         }
-    //       />
-    //       <Route
-    //         path={Routes.ITEM_DETAIL}
-    //         element={
-    //           <Suspense fallback={<Spinner />}>
-    //             <Item country={customer?.country as Country} customerId={customer?.customerId as string} />
-    //           </Suspense>
-    //         }
-    //       />
-    //       <Route
-    //         path={Routes.SUMMARY}
-    //         element={
-    //           <Suspense fallback={<Spinner />}>
-    //             <Summary country={customer?.country as Country} customerId={customer?.customerId as string} />
-    //           </Suspense>
-    //         }
-    //       />
-    //       <Route
-    //         path={Routes.CHECKOUT}
-    //         element={
-    //           <Suspense fallback={<Spinner />}>
-    //             <Checkout
-    //               country={customer?.country as Country}
-    //               customerId={customer?.customerId as string}
-    //               useRedirect={useRedirect}
-    //             >
-    //               <Outlet />
-    //             </Checkout>
-    //           </Suspense>
-    //         }
-    //       >
-    //         <Route
-    //           element={<CheckoutPaymentModal customerId={customer?.customerId as string} getAuthToken={getAuthToken} />}
-    //           path={Routes.CHECKOUT_PAYMENT}
-    //         />
-    //       </Route>
-    //       <Route
-    //         path={Routes.FEEDBACK}
-    //         element={
-    //           <Suspense fallback={<Spinner />}>
-    //             <Feedback customerId={customer?.customerId as string} />
-    //           </Suspense>
-    //         }
-    //       />
-    //       <Route element={<Navigate to={`${Routes.HOME}`} replace />} path="*" />
-    //     </Route>
-    //   </RootRoutes>
-    // );
+const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthToken, onI18nError, onNotAccessible, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
     return useRoutes([
         {
+            id: "root",
             path: "",
             element: (React.createElement(BasePathProvider, { basePath: basePath },
                 React.createElement(CheckoutAccessibilityMiddleware, { customerId: customer?.customerId, onNotAccessible: onNotAccessible },
@@ -110,43 +25,51 @@ const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthT
                                 React.createElement(Outlet, null))))))),
             children: [
                 {
+                    id: Routes.INTRO,
                     path: Routes.INTRO,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
                         React.createElement(Intro, { customerId: customer?.customerId }))),
                 },
                 {
+                    id: Routes.ITEM,
                     path: Routes.ITEM,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
                         React.createElement(Item, { country: customer?.country, customerId: customer?.customerId }))),
                 },
                 {
+                    id: Routes.ITEM_DETAIL,
                     path: Routes.ITEM_DETAIL,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
                         React.createElement(Item, { country: customer?.country, customerId: customer?.customerId }))),
                 },
                 {
+                    id: Routes.SUMMARY,
                     path: Routes.SUMMARY,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
                         React.createElement(Summary, { country: customer?.country, customerId: customer?.customerId }))),
                 },
                 {
+                    id: Routes.CHECKOUT,
                     path: Routes.CHECKOUT,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
                         React.createElement(Checkout, { country: customer?.country, customerId: customer?.customerId, useRedirect: useRedirect },
                             React.createElement(Outlet, null)))),
                     children: [
                         {
+                            id: Routes.CHECKOUT_PAYMENT,
                             path: Routes.CHECKOUT_PAYMENT,
                             element: React.createElement(CheckoutPaymentModal, { customerId: customer?.customerId, getAuthToken: getAuthToken }),
                         },
                     ],
                 },
                 {
+                    id: Routes.FEEDBACK,
                     path: Routes.FEEDBACK,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
                         React.createElement(Feedback, { customerId: customer?.customerId }))),
                 },
                 {
+                    id: "not-found-home-redirect",
                     path: "*",
                     element: React.createElement(Navigate, { to: `${Routes.HOME}`, replace: true }),
                 },
@@ -160,6 +83,5 @@ const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthT
  * 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 };
-export { Routing };
+const MemoizedRouting = memo(Routing);
+export { MemoizedRouting as Routing };

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

@@ -2,8 +2,9 @@ import { BrowserClient, Hub } from "@sentry/browser";
 import { ErrorBoundary } from "@sentry/react";
 import { ReactNativeTransportOptions } from "@sentry/react-native/dist/js/options";
 import { Transport, Integration } from "@sentry/types";
-import { ComponentType } from "react";
+import { WrapComponent, WrapUseRoutes } from "./types";
 declare const transport: (options: ReactNativeTransportOptions) => Transport;
-declare const integrations: (basename: string) => Integration[];
-declare const wrap: <P>(Component: ComponentType<P>) => ComponentType<P>;
-export { BrowserClient as Client, Hub, ErrorBoundary, transport, integrations, wrap };
+declare const integrations: Integration[];
+declare const wrapComponent: WrapComponent;
+declare const wrapUseRoutes: WrapUseRoutes;
+export { BrowserClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };

package/dist/shared/logging/SentryDependencies.js

@@ -1,16 +1,18 @@
 import { BrowserClient, Hub, makeFetchTransport, defaultIntegrations } from "@sentry/browser";
 import { ErrorBoundary } from "@sentry/react";
 import { reactRouterV6Instrumentation } from "@sentry/react";
+import { wrapUseRoutes as reactRouterV6WrapUseRoutes } from "@sentry/react";
 import { BrowserTracing } from "@sentry/tracing";
 import { useEffect } from "react";
 import { createRoutesFromChildren, useLocation, useNavigationType } from "react-router-native";
-import { matchRoutesForBasename } from "./matchRoutes";
+import { matchRoutes } from "./matchRoutes";
 const transport = (options, nativeFetch) => makeFetchTransport(options, nativeFetch);
-const integrations = (basename) => [
+const integrations = [
     ...defaultIntegrations,
     new BrowserTracing({
-        routingInstrumentation: reactRouterV6Instrumentation(useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutesForBasename(basename)),
+        routingInstrumentation: reactRouterV6Instrumentation(useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes),
     }),
 ];
-const wrap = (Component) => Component;
-export { BrowserClient as Client, Hub, ErrorBoundary, transport, integrations, wrap };
+const wrapComponent = (Component) => Component;
+const wrapUseRoutes = reactRouterV6WrapUseRoutes;
+export { BrowserClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };

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

@@ -1,8 +1,9 @@
 import { ReactNativeClient, Hub, ErrorBoundary } from "@sentry/react-native";
 import { ReactNativeTransportOptions } from "@sentry/react-native/dist/js/options";
 import { Transport, Integration } from "@sentry/types";
-import { ComponentType } from "react";
+import { WrapComponent, WrapUseRoutes } from "./types";
 declare const transport: (options: ReactNativeTransportOptions) => Transport;
-declare const integrations: () => Integration[];
-declare const wrap: <P>(Component: ComponentType<P>) => ComponentType<P>;
-export { ReactNativeClient as Client, Hub, ErrorBoundary, transport, integrations, wrap };
+declare const integrations: Integration[];
+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

@@ -2,12 +2,13 @@ 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 { useLocation, useNavigationType } from "react-router-native";
+import { matchRoutes } from "./matchRoutes";
 import { ReactRouterV6Instrumentation } from "./reactRouterV6Instrumentation.native";
 const transport = (options, nativeFetch) => NATIVE.isNativeTransportAvailable() ? makeReactNativeTransport(options) : makeFetchTransport(options, nativeFetch);
-const integrations = () => [
-    new ReactNativeTracing({
-        routingInstrumentation: new ReactRouterV6Instrumentation(),
-    }),
-];
-const wrap = (Component) => sentryWrap(Component);
-export { ReactNativeClient as Client, Hub, ErrorBoundary, transport, integrations, wrap };
+const routingInstrumentation = new ReactRouterV6Instrumentation(useEffect, useLocation, useNavigationType, matchRoutes);
+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

@@ -1,7 +1,6 @@
 import { ComponentType } from "react";
 import { Platform } from "react-native";
 interface SentryLoggerFunctionArgs {
-    readonly routerBasename: string;
     readonly publicKey: string;
     readonly environment: `${typeof Platform.OS}-${"DEV" | "PROD"}`;
     readonly release: string;

package/dist/shared/logging/SentryLogger.js

@@ -1,21 +1,16 @@
 import { defaultStackParser } from "@sentry/browser";
 import { makeMain } from "@sentry/core";
-import { 
-// withSentryReactRouterV6Routing,
-wrapUseRoutes, } from "@sentry/react";
 import React, { useEffect } from "react";
 import { Platform } from "react-native";
-import { 
-// Routes as ReactRouterRoutes,
-useRoutes as reactRouterUseRoutes, } from "react-router-native";
-import { Client, Hub, ErrorBoundary, transport, integrations, wrap } from "./SentryDependencies";
-const sentryLogger = ({ routerBasename, publicKey, environment, release, project }) => {
+import { useRoutes as reactRouterUseRoutes } from "react-router-native";
+import { Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes, } from "./SentryDependencies";
+const sentryLogger = ({ publicKey, environment, release, project }) => {
     let mainHub;
     const client = new Client({
         environment,
         release,
         dsn: `https://${publicKey}@o179049.ingest.sentry.io/${project}`,
-        integrations: integrations(routerBasename),
+        integrations,
         tracesSampleRate: 1.0,
         debug: true,
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -90,9 +85,8 @@ const sentryLogger = ({ routerBasename, publicKey, environment, release, project
         makeMain(mainHub);
     };
     const useRoutes = wrapUseRoutes(reactRouterUseRoutes);
-    // const Routes = withSentryReactRouterV6Routing(ReactRouterRoutes);
     return (Component) => {
-        const WrappedComponent = wrap(Component);
+        const WrappedComponent = wrapComponent(Component);
         const SentryLogger = (props) => {
             const { customer } = props;
             useEffect(() => {

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

@@ -1,6 +1,3 @@
-import { matchRoutes } from "@remix-run/router";
-interface MatchRoutesForBasenameFunction {
-    (basename: string): typeof matchRoutes;
-}
-declare const matchRoutesForBasename: MatchRoutesForBasenameFunction;
-export { matchRoutesForBasename };
+import { matchRoutes as reactRouterMatchRoutes } from "@remix-run/router";
+declare const matchRoutes: typeof reactRouterMatchRoutes;
+export { matchRoutes };

package/dist/shared/logging/matchRoutes.js

@@ -1,7 +1,7 @@
-import { matchRoutes } from "@remix-run/router";
-const matchRoutesForBasename = (basename) => (routes, locationArg) => {
+import { matchRoutes as reactRouterMatchRoutes } from "@remix-run/router";
+const matchRoutes = (routes, locationArg) => {
     // Remove the location's first path ("/checkout"). Otherwise it won't match the proper route.
     const location = (typeof locationArg === "string" ? locationArg : locationArg?.pathname || "").replace(/^\/\w+/, "");
-    return matchRoutes(routes, location, basename);
+    return reactRouterMatchRoutes(routes, location);
 };
-export { matchRoutesForBasename };
+export { matchRoutes };

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

@@ -1,20 +1,18 @@
 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";
-export interface ReactNavigationRoute {
-    readonly name: string;
-    readonly key: string;
-    readonly params: Record<string, unknown>;
-}
-export interface ReactNavigationCurrentRoute extends ReactNavigationRoute {
-    readonly hasBeenSeen: boolean;
-}
+import { MatchRoutes, UseEffect, UseLocation, UseNavigationType, WrapUseRoutes } from "./types";
 declare class ReactRouterV6Instrumentation extends RoutingInstrumentation {
     static instrumentationName: string;
+    private useEffect;
+    private useLocation;
+    private useNavigationType;
+    private matchRoutes;
     private prevRoute?;
     private recentRouteKeys;
     private latestTransaction?;
     private shouldUpdateLatestTransaction;
+    constructor(useEffect: UseEffect, useLocation: UseLocation, useNavigationType: UseNavigationType, matchRoutes: MatchRoutes);
     /**
      * Extends by calling _handleInitialState at the end.
      */
@@ -23,5 +21,7 @@ declare class ReactRouterV6Instrumentation extends RoutingInstrumentation {
      * Starts an idle transaction for the initial state which won't get called by the router listener.
      */
     private handleInitialState;
+    private getTransactionContext;
+    wrapUseRoutes: WrapUseRoutes;
 }
 export { ReactRouterV6Instrumentation };

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

@@ -1,16 +1,27 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { RoutingInstrumentation } from "@sentry/react-native";
+import { logger } from "@sentry/utils";
+import React from "react";
 class ReactRouterV6Instrumentation extends RoutingInstrumentation {
     static instrumentationName = "react-router-v6";
+    useEffect;
+    useLocation;
+    useNavigationType;
+    matchRoutes;
     // @ts-ignore
     prevRoute;
-    // @ts-ignore
     recentRouteKeys = [];
     // @ts-ignore
     latestTransaction;
     // @ts-ignore
     shouldUpdateLatestTransaction = false;
+    constructor(useEffect, useLocation, useNavigationType, matchRoutes) {
+        super();
+        this.useEffect = useEffect;
+        this.useLocation = useLocation;
+        this.useNavigationType = useNavigationType;
+        this.matchRoutes = matchRoutes;
+    }
     /**
      * Extends by calling _handleInitialState at the end.
      */
@@ -27,6 +38,71 @@ class ReactRouterV6Instrumentation extends RoutingInstrumentation {
         // We set this to true so when registerAppContainer is called, the transaction gets updated with the actual route data
         this.shouldUpdateLatestTransaction = true;
     }
+    // @ts-ignore
+    getTransactionContext(route, previousRoute) {
+        return {
+            name: route.name,
+            op: "navigation",
+            tags: {
+                ["routing.instrumentation"]: ReactRouterV6Instrumentation.instrumentationName,
+                ["routing.route.name"]: route.name,
+            },
+            data: {
+                route: {
+                    name: route.name,
+                    key: route.key,
+                    params: route.params ?? {},
+                    hasBeenSeen: this.recentRouteKeys.includes(route.key),
+                },
+                previousRoute: previousRoute
+                    ? {
+                        name: previousRoute.name,
+                        key: previousRoute.key,
+                        params: previousRoute.params ?? {},
+                    }
+                    : null,
+            },
+        };
+    }
+    wrapUseRoutes = (origUseRoutes) => {
+        if (!this.useEffect ||
+            !this.useLocation ||
+            !this.useNavigationType ||
+            !this.matchRoutes
+        // !this._customStartTransaction
+        ) {
+            __DEBUG_BUILD__ &&
+                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 = this.useLocation();
+                const navigationType = this.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;
+                this.useEffect(() => {
+                    const normalizedLocation = typeof stableLocationParam === "string" ? { pathname: stableLocationParam } : stableLocationParam;
+                    if (isMountRenderPass) {
+                        console.log("updatePageloadTransaction", normalizedLocation, routes);
+                        // updatePageloadTransaction(normalizedLocation, routes);
+                        isMountRenderPass = false;
+                    }
+                    else {
+                        console.log("normalizedLocation", normalizedLocation, routes, navigationType);
+                        // handleNavigation(normalizedLocation, routes, navigationType);
+                    }
+                }, [navigationType, stableLocationParam]);
+                return Routes;
+            };
+            return React.createElement(SentryRoutes, null);
+        };
+    };
 }
 const INITIAL_TRANSACTION_CONTEXT = {
     name: "App Launch",

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

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

package/dist/shared/logging/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.6.0-beta.30",
+  "version": "0.6.0-beta.32",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [