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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  import { I18n } from "@lookiero/i18n-react";
2
2
  import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
3
3
  import { ComponentType } from "react";
4
- import { Routes as ReactRouterRoutes } from "react-router-native";
4
+ import { useRoutes as reactRouterUseRoutes } from "react-router-native";
5
5
  import { Customer } from "../../projection/shared/customer";
6
6
  import { SentryLoggerFunctionArgs } from "../../shared/logging/SentryLogger";
7
7
  import { Menu, TabBar } from "./views/navigation/Navigation";
@@ -23,7 +23,7 @@ interface RootProps {
23
23
  readonly tabBar: TabBar;
24
24
  readonly onNotAccessible: () => void;
25
25
  readonly useRedirect: () => Record<string, string>;
26
- readonly rootRoutes?: typeof ReactRouterRoutes;
26
+ readonly useRoutes: typeof reactRouterUseRoutes;
27
27
  }
28
28
  declare const root: RootFunction;
29
29
  export type { RootProps };
@@ -1,14 +1,16 @@
1
1
  import React, { useCallback } from "react";
2
2
  import { Platform } from "react-native";
3
- import { Routes as ReactRouterRoutes } from "react-router-native";
3
+ import {
4
+ //Routes as ReactRouterRoutes
5
+ useRoutes as reactRouterUseRoutes, } from "react-router-native";
4
6
  import { sentryLogger } from "../../shared/logging/SentryLogger";
5
7
  import { Routing } from "./routing/Routing";
6
8
  const root = ({ Messaging, I18n, getAuthToken, development, sentry }) => {
7
9
  // eslint-disable-next-line react/display-name, react/prop-types
8
- const Root = ({ basePath, locale = "en", customer, menu, tabBar, onNotAccessible, useRedirect, rootRoutes = ReactRouterRoutes, }) => {
10
+ const Root = ({ basePath, locale = "en", customer, menu, tabBar, onNotAccessible, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
9
11
  const handleOnI18nError = useCallback(() => void 0, []);
10
12
  return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
11
- 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 })));
13
+ 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 })));
12
14
  };
13
15
  return sentryLogger(sentry)(Root);
14
16
  };
@@ -1,6 +1,6 @@
1
1
  import { I18n } from "@lookiero/i18n-react";
2
2
  import { FC } from "react";
3
- import { Routes as ReactRouterRoutes } from "react-router-native";
3
+ import { useRoutes as reactRouterUseRoutes } from "react-router-native";
4
4
  import { Customer } from "../../../projection/shared/customer";
5
5
  import { Menu, TabBar } from "../views/navigation/Navigation";
6
6
  interface RoutingProps {
@@ -14,7 +14,13 @@ interface RoutingProps {
14
14
  readonly onNotAccessible: () => void;
15
15
  readonly onI18nError?: (err: Error) => void;
16
16
  readonly useRedirect: () => Record<string, string>;
17
- readonly rootRoutes: typeof ReactRouterRoutes;
17
+ readonly useRoutes: typeof reactRouterUseRoutes;
18
18
  }
19
19
  declare const Routing: FC<RoutingProps>;
20
+ /**
21
+ * Provided useRoutes is not stable (when integrated with Sentry) as it's rendering a different component tree.
22
+ *
23
+ * https://github.com/getsentry/sentry-javascript/blob/master/packages/react/src/reactrouterv6.tsx#L221
24
+ * (SentryRoutes is a new component after each re-render)
25
+ */
20
26
  export { Routing };
@@ -1,5 +1,8 @@
1
1
  import React, { lazy, Suspense } from "react";
2
- import { Navigate, Outlet, Route } from "react-router-native";
2
+ import {
3
+ // Routes as ReactRouterRoutes,
4
+ // Route,
5
+ Navigate, Outlet, useRoutes as reactRouterUseRoutes, } from "react-router-native";
3
6
  import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
4
7
  import { App } from "../views/App";
5
8
  import { CheckoutPaymentModal } from "../views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal";
@@ -12,28 +15,151 @@ const Item = lazy(() => import("../views/item/Item").then((module) => ({ default
12
15
  const Summary = lazy(() => import("../views/summary/Summary").then((module) => ({ default: module.Summary })));
13
16
  const Checkout = lazy(() => import("../views/checkout/Checkout").then((module) => ({ default: module.Checkout })));
14
17
  const Feedback = lazy(() => import("../views/feedback/Feedback").then((module) => ({ default: module.Feedback })));
15
- const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthToken, onI18nError, onNotAccessible, useRedirect, rootRoutes: RootRoutes, }) => {
16
- return (React.createElement(RootRoutes, null,
17
- React.createElement(Route, { path: "", element: React.createElement(BasePathProvider, { basePath: basePath },
18
+ const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthToken, onI18nError, onNotAccessible, useRedirect, useRoutes = reactRouterUseRoutes,
19
+ // rootRoutes: RootRoutes,
20
+ }) => {
21
+ // return (
22
+ // <RootRoutes>
23
+ // <Route
24
+ // path=""
25
+ // element={
26
+ // <BasePathProvider basePath={basePath}>
27
+ // <CheckoutAccessibilityMiddleware customerId={customer?.customerId} onNotAccessible={onNotAccessible}>
28
+ // <I18n loader={<Spinner />} locale={locale} onError={onI18nError}>
29
+ // <CheckoutMiddleware customerId={customer?.customerId as string}>
30
+ // <App customerId={customer?.customerId as string} menu={menu} tabBar={tabBar}>
31
+ // <Outlet />
32
+ // </App>
33
+ // </CheckoutMiddleware>
34
+ // </I18n>
35
+ // </CheckoutAccessibilityMiddleware>
36
+ // </BasePathProvider>
37
+ // }
38
+ // >
39
+ // <Route
40
+ // path={Routes.INTRO}
41
+ // element={
42
+ // <Suspense fallback={<Spinner />}>
43
+ // <Intro customerId={customer?.customerId as string} />
44
+ // </Suspense>
45
+ // }
46
+ // />
47
+ // <Route
48
+ // path={Routes.ITEM}
49
+ // element={
50
+ // <Suspense fallback={<Spinner />}>
51
+ // <Item country={customer?.country as Country} customerId={customer?.customerId as string} />
52
+ // </Suspense>
53
+ // }
54
+ // />
55
+ // <Route
56
+ // path={Routes.ITEM_DETAIL}
57
+ // element={
58
+ // <Suspense fallback={<Spinner />}>
59
+ // <Item country={customer?.country as Country} customerId={customer?.customerId as string} />
60
+ // </Suspense>
61
+ // }
62
+ // />
63
+ // <Route
64
+ // path={Routes.SUMMARY}
65
+ // element={
66
+ // <Suspense fallback={<Spinner />}>
67
+ // <Summary country={customer?.country as Country} customerId={customer?.customerId as string} />
68
+ // </Suspense>
69
+ // }
70
+ // />
71
+ // <Route
72
+ // path={Routes.CHECKOUT}
73
+ // element={
74
+ // <Suspense fallback={<Spinner />}>
75
+ // <Checkout
76
+ // country={customer?.country as Country}
77
+ // customerId={customer?.customerId as string}
78
+ // useRedirect={useRedirect}
79
+ // >
80
+ // <Outlet />
81
+ // </Checkout>
82
+ // </Suspense>
83
+ // }
84
+ // >
85
+ // <Route
86
+ // element={<CheckoutPaymentModal customerId={customer?.customerId as string} getAuthToken={getAuthToken} />}
87
+ // path={Routes.CHECKOUT_PAYMENT}
88
+ // />
89
+ // </Route>
90
+ // <Route
91
+ // path={Routes.FEEDBACK}
92
+ // element={
93
+ // <Suspense fallback={<Spinner />}>
94
+ // <Feedback customerId={customer?.customerId as string} />
95
+ // </Suspense>
96
+ // }
97
+ // />
98
+ // <Route element={<Navigate to={`${Routes.HOME}`} replace />} path="*" />
99
+ // </Route>
100
+ // </RootRoutes>
101
+ // );
102
+ return useRoutes([
103
+ {
104
+ path: "",
105
+ element: (React.createElement(BasePathProvider, { basePath: basePath },
18
106
  React.createElement(CheckoutAccessibilityMiddleware, { customerId: customer?.customerId, onNotAccessible: onNotAccessible },
19
107
  React.createElement(I18n, { loader: React.createElement(Spinner, null), locale: locale, onError: onI18nError },
20
108
  React.createElement(CheckoutMiddleware, { customerId: customer?.customerId },
21
109
  React.createElement(App, { customerId: customer?.customerId, menu: menu, tabBar: tabBar },
22
- React.createElement(Outlet, null)))))) },
23
- React.createElement(Route, { path: Routes.INTRO, element: React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
24
- React.createElement(Intro, { customerId: customer?.customerId })) }),
25
- React.createElement(Route, { path: Routes.ITEM, element: React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
26
- React.createElement(Item, { country: customer?.country, customerId: customer?.customerId })) }),
27
- React.createElement(Route, { path: Routes.ITEM_DETAIL, element: React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
28
- React.createElement(Item, { country: customer?.country, customerId: customer?.customerId })) }),
29
- React.createElement(Route, { path: Routes.SUMMARY, element: React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
30
- React.createElement(Summary, { country: customer?.country, customerId: customer?.customerId })) }),
31
- React.createElement(Route, { path: Routes.CHECKOUT, element: React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
32
- React.createElement(Checkout, { country: customer?.country, customerId: customer?.customerId, useRedirect: useRedirect },
33
- React.createElement(Outlet, null))) },
34
- React.createElement(Route, { element: React.createElement(CheckoutPaymentModal, { customerId: customer?.customerId, getAuthToken: getAuthToken }), path: Routes.CHECKOUT_PAYMENT })),
35
- React.createElement(Route, { path: Routes.FEEDBACK, element: React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
36
- React.createElement(Feedback, { customerId: customer?.customerId })) }),
37
- React.createElement(Route, { element: React.createElement(Navigate, { to: `${Routes.HOME}`, replace: true }), path: "*" }))));
110
+ React.createElement(Outlet, null))))))),
111
+ children: [
112
+ {
113
+ path: Routes.INTRO,
114
+ element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
115
+ React.createElement(Intro, { customerId: customer?.customerId }))),
116
+ },
117
+ {
118
+ path: Routes.ITEM,
119
+ element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
120
+ React.createElement(Item, { country: customer?.country, customerId: customer?.customerId }))),
121
+ },
122
+ {
123
+ path: Routes.ITEM_DETAIL,
124
+ element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
125
+ React.createElement(Item, { country: customer?.country, customerId: customer?.customerId }))),
126
+ },
127
+ {
128
+ path: Routes.SUMMARY,
129
+ element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
130
+ React.createElement(Summary, { country: customer?.country, customerId: customer?.customerId }))),
131
+ },
132
+ {
133
+ path: Routes.CHECKOUT,
134
+ element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
135
+ React.createElement(Checkout, { country: customer?.country, customerId: customer?.customerId, useRedirect: useRedirect },
136
+ React.createElement(Outlet, null)))),
137
+ children: [
138
+ {
139
+ path: Routes.CHECKOUT_PAYMENT,
140
+ element: React.createElement(CheckoutPaymentModal, { customerId: customer?.customerId, getAuthToken: getAuthToken }),
141
+ },
142
+ ],
143
+ },
144
+ {
145
+ path: Routes.FEEDBACK,
146
+ element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
147
+ React.createElement(Feedback, { customerId: customer?.customerId }))),
148
+ },
149
+ {
150
+ path: "*",
151
+ element: React.createElement(Navigate, { to: `${Routes.HOME}`, replace: true }),
152
+ },
153
+ ],
154
+ },
155
+ ]);
38
156
  };
157
+ /**
158
+ * Provided useRoutes is not stable (when integrated with Sentry) as it's rendering a different component tree.
159
+ *
160
+ * https://github.com/getsentry/sentry-javascript/blob/master/packages/react/src/reactrouterv6.tsx#L221
161
+ * (SentryRoutes is a new component after each re-render)
162
+ */
163
+ // const MemoizedRouting = memo(Routing);
164
+ // export { MemoizedRouting as Routing };
39
165
  export { Routing };
@@ -3,6 +3,6 @@ import { ReactNativeTransportOptions } from "@sentry/react-native/dist/js/option
3
3
  import { Transport, Integration } from "@sentry/types";
4
4
  import { ComponentType } from "react";
5
5
  declare const transport: (options: ReactNativeTransportOptions) => Transport;
6
- declare const integrations: (basename: string) => Integration[];
6
+ declare const integrations: () => Integration[];
7
7
  declare const wrap: <P>(Component: ComponentType<P>) => ComponentType<P>;
8
8
  export { ReactNativeClient as Client, Hub, ErrorBoundary, transport, integrations, wrap };
@@ -2,14 +2,11 @@ import { makeFetchTransport } from "@sentry/browser";
2
2
  import { ReactNativeClient, Hub, ErrorBoundary, wrap as sentryWrap, ReactNativeTracing } from "@sentry/react-native";
3
3
  import { makeReactNativeTransport } from "@sentry/react-native/dist/js/transports/native";
4
4
  import { NATIVE } from "@sentry/react-native/dist/js/wrapper";
5
- import { useEffect } from "react";
6
- import { createRoutesFromChildren, useLocation, useNavigationType } from "react-router-native";
7
- import { matchRoutesForBasename } from "./matchRoutes";
8
5
  import { ReactRouterV6Instrumentation } from "./reactRouterV6Instrumentation.native";
9
6
  const transport = (options, nativeFetch) => NATIVE.isNativeTransportAvailable() ? makeReactNativeTransport(options) : makeFetchTransport(options, nativeFetch);
10
- const integrations = (basename) => [
7
+ const integrations = () => [
11
8
  new ReactNativeTracing({
12
- routingInstrumentation: new ReactRouterV6Instrumentation(useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutesForBasename(basename)),
9
+ routingInstrumentation: new ReactRouterV6Instrumentation(),
13
10
  }),
14
11
  ];
15
12
  const wrap = (Component) => sentryWrap(Component);
@@ -1,9 +1,13 @@
1
1
  import { defaultStackParser } from "@sentry/browser";
2
2
  import { makeMain } from "@sentry/core";
3
- import { withSentryReactRouterV6Routing } from "@sentry/react";
3
+ import {
4
+ // withSentryReactRouterV6Routing,
5
+ wrapUseRoutes, } from "@sentry/react";
4
6
  import React, { useEffect } from "react";
5
7
  import { Platform } from "react-native";
6
- import { Routes as ReactRouterRoutes } from "react-router-native";
8
+ import {
9
+ // Routes as ReactRouterRoutes,
10
+ useRoutes as reactRouterUseRoutes, } from "react-router-native";
7
11
  import { Client, Hub, ErrorBoundary, transport, integrations, wrap } from "./SentryDependencies";
8
12
  const sentryLogger = ({ routerBasename, publicKey, environment, release, project }) => {
9
13
  let mainHub;
@@ -17,6 +21,7 @@ const sentryLogger = ({ routerBasename, publicKey, environment, release, project
17
21
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
18
22
  // @ts-ignore
19
23
  enableNative: Platform.OS !== "web",
24
+ autoInitializeNativeSdk: Platform.OS !== "web",
20
25
  stackParser: defaultStackParser,
21
26
  transport,
22
27
  // This configuration is obtained from
@@ -84,8 +89,8 @@ const sentryLogger = ({ routerBasename, publicKey, environment, release, project
84
89
  hub.endSession();
85
90
  makeMain(mainHub);
86
91
  };
87
- // const useRoutes = wrapUseRoutes(reactRouterUseRoutes);
88
- const Routes = withSentryReactRouterV6Routing(ReactRouterRoutes);
92
+ const useRoutes = wrapUseRoutes(reactRouterUseRoutes);
93
+ // const Routes = withSentryReactRouterV6Routing(ReactRouterRoutes);
89
94
  return (Component) => {
90
95
  const WrappedComponent = wrap(Component);
91
96
  const SentryLogger = (props) => {
@@ -95,7 +100,7 @@ const sentryLogger = ({ routerBasename, publicKey, environment, release, project
95
100
  return onUnMount;
96
101
  }, [customer?.customerId]);
97
102
  return (React.createElement(ErrorBoundary, null,
98
- React.createElement(WrappedComponent, { ...props, rootRoutes: Routes })));
103
+ React.createElement(WrappedComponent, { ...props, useRoutes: useRoutes })));
99
104
  };
100
105
  return SentryLogger;
101
106
  };
@@ -1,14 +1,27 @@
1
1
  import { RoutingInstrumentation } from "@sentry/react-native";
2
- import { useEffect } from "react";
3
- import { matchRoutes } from "react-router-native";
4
- import { createRoutesFromChildren, useLocation, useNavigationType } from "react-router-native";
5
- type UseEffect = typeof useEffect;
6
- type UseLocation = typeof useLocation;
7
- type UseNavigationType = typeof useNavigationType;
8
- type CreateRoutesFromChildren = typeof createRoutesFromChildren;
9
- type MatchRoutes = typeof matchRoutes;
2
+ import { OnConfirmRoute, TransactionCreator } from "@sentry/react-native/dist/js/tracing/routingInstrumentation";
3
+ import { BeforeNavigate } from "@sentry/react-native/dist/js/tracing/types";
4
+ export interface ReactNavigationRoute {
5
+ readonly name: string;
6
+ readonly key: string;
7
+ readonly params: Record<string, unknown>;
8
+ }
9
+ export interface ReactNavigationCurrentRoute extends ReactNavigationRoute {
10
+ readonly hasBeenSeen: boolean;
11
+ }
10
12
  declare class ReactRouterV6Instrumentation extends RoutingInstrumentation {
11
13
  static instrumentationName: string;
12
- constructor(useEffect: UseEffect, useLocation: UseLocation, useNavigationType: UseNavigationType, createRoutesFromChildren: CreateRoutesFromChildren, matchRoutes: MatchRoutes);
14
+ private prevRoute?;
15
+ private recentRouteKeys;
16
+ private latestTransaction?;
17
+ private shouldUpdateLatestTransaction;
18
+ /**
19
+ * Extends by calling _handleInitialState at the end.
20
+ */
21
+ registerRoutingInstrumentation(listener: TransactionCreator, beforeNavigate: BeforeNavigate, onConfirmRoute: OnConfirmRoute): void;
22
+ /**
23
+ * Starts an idle transaction for the initial state which won't get called by the router listener.
24
+ */
25
+ private handleInitialState;
13
26
  }
14
27
  export { ReactRouterV6Instrumentation };
@@ -1,10 +1,39 @@
1
- import { reactRouterV6Instrumentation as origReactRouterV6Instrumentation } from "@sentry/react";
1
+ /* eslint-disable @typescript-eslint/no-unused-vars */
2
+ /* eslint-disable @typescript-eslint/ban-ts-comment */
2
3
  import { RoutingInstrumentation } from "@sentry/react-native";
3
4
  class ReactRouterV6Instrumentation extends RoutingInstrumentation {
4
5
  static instrumentationName = "react-router-v6";
5
- constructor(useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes) {
6
- super();
7
- origReactRouterV6Instrumentation(useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes);
6
+ // @ts-ignore
7
+ prevRoute;
8
+ // @ts-ignore
9
+ recentRouteKeys = [];
10
+ // @ts-ignore
11
+ latestTransaction;
12
+ // @ts-ignore
13
+ shouldUpdateLatestTransaction = false;
14
+ /**
15
+ * Extends by calling _handleInitialState at the end.
16
+ */
17
+ registerRoutingInstrumentation(listener, beforeNavigate, onConfirmRoute) {
18
+ super.registerRoutingInstrumentation(listener, beforeNavigate, onConfirmRoute);
19
+ // Need to handle the initial state as the router patch will only attach transactions on subsequent route changes.
20
+ this.handleInitialState();
21
+ }
22
+ /**
23
+ * Starts an idle transaction for the initial state which won't get called by the router listener.
24
+ */
25
+ handleInitialState() {
26
+ this.latestTransaction = this.onRouteWillChange(INITIAL_TRANSACTION_CONTEXT);
27
+ // We set this to true so when registerAppContainer is called, the transaction gets updated with the actual route data
28
+ this.shouldUpdateLatestTransaction = true;
8
29
  }
9
30
  }
31
+ const INITIAL_TRANSACTION_CONTEXT = {
32
+ name: "App Launch",
33
+ op: "navigation",
34
+ tags: {
35
+ ["routing.instrumentation"]: ReactRouterV6Instrumentation.instrumentationName,
36
+ },
37
+ data: {},
38
+ };
10
39
  export { ReactRouterV6Instrumentation };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lookiero/checkout",
3
- "version": "0.6.0-beta.29",
3
+ "version": "0.6.0-beta.30",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "files": [