@lookiero/checkout 0.6.0-beta.26 → 0.6.0-beta.28

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

@@ -1,7 +1,7 @@
 import { I18n } from "@lookiero/i18n-react";
 import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
 import { ComponentType } from "react";
-import { useRoutes as reactRouterUseRoutes } from "react-router-native";
+import { Routes as ReactRouterRoutes } from "react-router-native";
 import { Customer } from "../../projection/shared/customer";
 import { SentryLoggerFunctionArgs } from "../../shared/logging/SentryLogger";
 import { Menu, TabBar } from "./views/navigation/Navigation";
@@ -23,7 +23,7 @@ interface RootProps {
     readonly tabBar: TabBar;
     readonly onNotAccessible: () => void;
     readonly useRedirect: () => Record<string, string>;
-    readonly useRoutes?: typeof reactRouterUseRoutes;
+    readonly rootRoutes?: typeof ReactRouterRoutes;
 }
 declare const root: RootFunction;
 export type { RootProps };

package/dist/infrastructure/ui/Root.js

@@ -1,14 +1,14 @@
 import React, { useCallback } from "react";
 import { Platform } from "react-native";
-import { useRoutes as reactRouterUseRoutes } from "react-router-native";
+import { Routes as ReactRouterRoutes } from "react-router-native";
 import { sentryLogger } from "../../shared/logging/SentryLogger";
 import { Routing } from "./routing/Routing";
 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 Root = ({ basePath, locale = "en", customer, menu, tabBar, onNotAccessible, useRedirect, rootRoutes = ReactRouterRoutes, }) => {
         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 })));
+            React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, locale: locale, menu: menu, rootRoutes: rootRoutes, tabBar: tabBar, useRedirect: useRedirect, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
     };
     return sentryLogger(sentry)(Root);
 };

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

@@ -1,6 +1,6 @@
 import { I18n } from "@lookiero/i18n-react";
-import React from "react";
-import { useRoutes as reactRouterUseRoutes } from "react-router-native";
+import { FC } from "react";
+import { Routes as ReactRouterRoutes } from "react-router-native";
 import { Customer } from "../../../projection/shared/customer";
 import { Menu, TabBar } from "../views/navigation/Navigation";
 interface RoutingProps {
@@ -14,13 +14,7 @@ interface RoutingProps {
     readonly onNotAccessible: () => void;
     readonly onI18nError?: (err: Error) => void;
     readonly useRedirect: () => Record<string, string>;
-    readonly useRoutes: typeof reactRouterUseRoutes;
+    readonly rootRoutes: typeof ReactRouterRoutes;
 }
-/**
- * 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 };
+declare const Routing: FC<RoutingProps>;
+export { Routing };

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

@@ -1,5 +1,5 @@
-import React, { lazy, memo, Suspense } from "react";
-import { Navigate, Outlet } from "react-router-native";
+import React, { lazy, Suspense } from "react";
+import { Navigate, Outlet, Route } 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";
@@ -12,68 +12,28 @@ 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, }) => {
-    const routes = useRoutes([
-        {
-            path: basePath,
-            element: (React.createElement(BasePathProvider, { basePath: basePath },
+const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthToken, onI18nError, onNotAccessible, useRedirect, rootRoutes: RootRoutes, }) => {
+    return (React.createElement(RootRoutes, null,
+        React.createElement(Route, { path: "", element: React.createElement(BasePathProvider, { basePath: basePath },
                 React.createElement(CheckoutAccessibilityMiddleware, { customerId: customer?.customerId, onNotAccessible: onNotAccessible },
                     React.createElement(I18n, { loader: React.createElement(Spinner, null), locale: locale, onError: onI18nError },
                         React.createElement(CheckoutMiddleware, { customerId: customer?.customerId },
                             React.createElement(App, { customerId: customer?.customerId, menu: menu, tabBar: tabBar },
-                                React.createElement(Outlet, null))))))),
-            children: [
-                {
-                    path: Routes.INTRO,
-                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Intro, { customerId: customer?.customerId }))),
-                },
-                {
-                    path: Routes.ITEM,
-                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Item, { country: customer?.country, customerId: customer?.customerId }))),
-                },
-                {
-                    path: Routes.ITEM_DETAIL,
-                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Item, { country: customer?.country, customerId: customer?.customerId }))),
-                },
-                {
-                    path: Routes.SUMMARY,
-                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Summary, { country: customer?.country, customerId: customer?.customerId }))),
-                },
-                {
-                    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: [
-                        {
-                            path: Routes.CHECKOUT_PAYMENT,
-                            element: React.createElement(CheckoutPaymentModal, { customerId: customer?.customerId, getAuthToken: getAuthToken }),
-                        },
-                    ],
-                },
-                {
-                    path: Routes.FEEDBACK,
-                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Feedback, { customerId: customer?.customerId }))),
-                },
-                {
-                    path: "*",
-                    element: React.createElement(Navigate, { to: `${Routes.HOME}`, replace: true }),
-                },
-            ],
-        },
-    ]);
-    return routes;
+                                React.createElement(Outlet, null)))))) },
+            React.createElement(Route, { path: Routes.INTRO, element: React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                    React.createElement(Intro, { customerId: customer?.customerId })) }),
+            React.createElement(Route, { path: Routes.ITEM, element: React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                    React.createElement(Item, { country: customer?.country, customerId: customer?.customerId })) }),
+            React.createElement(Route, { path: Routes.ITEM_DETAIL, element: React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                    React.createElement(Item, { country: customer?.country, customerId: customer?.customerId })) }),
+            React.createElement(Route, { path: Routes.SUMMARY, element: React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                    React.createElement(Summary, { country: customer?.country, customerId: customer?.customerId })) }),
+            React.createElement(Route, { 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))) },
+                React.createElement(Route, { element: React.createElement(CheckoutPaymentModal, { customerId: customer?.customerId, getAuthToken: getAuthToken }), path: Routes.CHECKOUT_PAYMENT })),
+            React.createElement(Route, { path: Routes.FEEDBACK, element: React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                    React.createElement(Feedback, { customerId: customer?.customerId })) }),
+            React.createElement(Route, { element: React.createElement(Navigate, { to: `${Routes.HOME}`, replace: true }), path: "*" }))));
 };
-/**
- * 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 };
+export { Routing };

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

@@ -4,6 +4,6 @@ import { ReactNativeTransportOptions } from "@sentry/react-native/dist/js/option
 import { Transport, Integration } from "@sentry/types";
 import { ComponentType } from "react";
 declare const transport: (options: ReactNativeTransportOptions) => Transport;
-declare const integrations: Integration[];
+declare const integrations: (basename: string) => Integration[];
 declare const wrap: <P>(Component: ComponentType<P>) => ComponentType<P>;
 export { BrowserClient as Client, Hub, ErrorBoundary, transport, integrations, wrap };

package/dist/shared/logging/SentryDependencies.js

@@ -2,12 +2,13 @@ import { BrowserClient, Hub, makeFetchTransport, defaultIntegrations } from "@se
 import { ErrorBoundary, reactRouterV6Instrumentation } from "@sentry/react";
 import { BrowserTracing } from "@sentry/tracing";
 import { useEffect } from "react";
-import { createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from "react-router-native";
+import { createRoutesFromChildren, useLocation, useNavigationType } from "react-router-native";
+import { matchRoutesForBasename } from "./matchRoutes";
 const transport = (options, nativeFetch) => makeFetchTransport(options, nativeFetch);
-const integrations = [
+const integrations = (basename) => [
     ...defaultIntegrations,
     new BrowserTracing({
-        routingInstrumentation: reactRouterV6Instrumentation(useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes),
+        routingInstrumentation: reactRouterV6Instrumentation(useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutesForBasename(basename)),
     }),
 ];
 const wrap = (Component) => Component;

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

@@ -3,6 +3,6 @@ import { ReactNativeTransportOptions } from "@sentry/react-native/dist/js/option
 import { Transport, Integration } from "@sentry/types";
 import { ComponentType } from "react";
 declare const transport: (options: ReactNativeTransportOptions) => Transport;
-declare const integrations: Integration[];
+declare const integrations: () => Integration[];
 declare const wrap: <P>(Component: ComponentType<P>) => ComponentType<P>;
 export { ReactNativeClient as Client, Hub, ErrorBoundary, transport, integrations, wrap };

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

@@ -3,6 +3,6 @@ import { ReactNativeClient, Hub, ErrorBoundary, wrap as sentryWrap } from "@sent
 import { makeReactNativeTransport } from "@sentry/react-native/dist/js/transports/native";
 import { NATIVE } from "@sentry/react-native/dist/js/wrapper";
 const transport = (options, nativeFetch) => NATIVE.isNativeTransportAvailable() ? makeReactNativeTransport(options) : makeFetchTransport(options, nativeFetch);
-const integrations = [];
+const integrations = () => [];
 const wrap = (Component) => sentryWrap(Component);
 export { ReactNativeClient as Client, Hub, ErrorBoundary, transport, integrations, wrap };

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

@@ -1,6 +1,7 @@
 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,17 +1,17 @@
 import { defaultStackParser } from "@sentry/browser";
 import { makeMain } from "@sentry/core";
-import { wrapUseRoutes } from "@sentry/react";
+import { withSentryReactRouterV6Routing } from "@sentry/react";
 import React, { useEffect } from "react";
 import { Platform } from "react-native";
-import { useRoutes as reactRouterUseRoutes } from "react-router-native";
+import { Routes as ReactRouterRoutes } from "react-router-native";
 import { Client, Hub, ErrorBoundary, transport, integrations, wrap } from "./SentryDependencies";
-const sentryLogger = ({ publicKey, environment, release, project }) => {
+const sentryLogger = ({ routerBasename, publicKey, environment, release, project }) => {
     let mainHub;
     const client = new Client({
         environment,
         release,
         dsn: `https://${publicKey}@o179049.ingest.sentry.io/${project}`,
-        integrations,
+        integrations: integrations(routerBasename),
         tracesSampleRate: 1.0,
         debug: true,
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -84,7 +84,8 @@ const sentryLogger = ({ publicKey, environment, release, project }) => {
         hub.endSession();
         makeMain(mainHub);
     };
-    const useRoutes = wrapUseRoutes(reactRouterUseRoutes);
+    // const useRoutes = wrapUseRoutes(reactRouterUseRoutes);
+    const Routes = withSentryReactRouterV6Routing(ReactRouterRoutes);
     return (Component) => {
         const WrappedComponent = wrap(Component);
         const SentryLogger = (props) => {
@@ -94,7 +95,7 @@ const sentryLogger = ({ publicKey, environment, release, project }) => {
                 return onUnMount;
             }, [customer?.customerId]);
             return (React.createElement(ErrorBoundary, null,
-                React.createElement(WrappedComponent, { ...props, useRoutes: useRoutes })));
+                React.createElement(WrappedComponent, { ...props, rootRoutes: Routes })));
         };
         return SentryLogger;
     };

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

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

package/dist/shared/logging/matchRoutes.js

@@ -0,0 +1,3 @@
+import { matchRoutes } from "@remix-run/router";
+const matchRoutesForBasename = (basename) => (routes, locationArg) => matchRoutes(routes, locationArg, basename);
+export { matchRoutesForBasename };

package/package.json

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