fix(admin-ui): Wraps invite route correctly with analytics (#5118)

packages/admin-ui/ui/src/App.tsx

@@ -6,6 +6,8 @@ import {
   RouterProvider,
 } from "react-router-dom"
 import Spinner from "./components/atoms/spinner"
+import { AnalyticsProvider } from "./providers/analytics-provider"
+import { WRITE_KEY } from "./constants/analytics"
 
 const NotFound = lazy(() => import("./pages/404"))
 const Dashboard = lazy(() => import("./pages/a"))
@@ -18,8 +20,22 @@ const router = createBrowserRouter(
   createRoutesFromElements(
     <>
       <Route path="/" element={<IndexPage />} />
-      <Route path="a/*" element={<Dashboard />} />
-      <Route path="invite" element={<InvitePage />} />
+      <Route
+        path="a/*"
+        element={
+          <AnalyticsProvider writeKey={WRITE_KEY}>
+            <Dashboard />
+          </AnalyticsProvider>
+        }
+      />
+      <Route
+        path="invite"
+        element={
+          <AnalyticsProvider writeKey={WRITE_KEY}>
+            <InvitePage />
+          </AnalyticsProvider>
+        }
+      />
       <Route path="login" element={<LoginPage />} />
       <Route path="reset-password" element={<ResetPasswordPage />} />
       <Route path="*" element={<NotFound />} />

packages/admin-ui/ui/src/pages/a.tsx

@@ -7,7 +7,6 @@ import RouteErrorElement from "../components/extensions/route-container/route-er
 import PrivateRoute from "../components/private-route"
 import SEO from "../components/seo"
 import Layout from "../components/templates/layout"
-import { WRITE_KEY } from "../constants/analytics"
 import Collections from "../domain/collections"
 import Customers from "../domain/customers"
 import Discounts from "../domain/discounts"
@@ -22,7 +21,6 @@ import ProductsRoute from "../domain/products"
 import PublishableApiKeys from "../domain/publishable-api-keys"
 import SalesChannels from "../domain/sales-channels"
 import Settings from "../domain/settings"
-import { AnalyticsProvider } from "../providers/analytics-provider"
 import { useRoutes } from "../providers/route-provider"
 import { isRoute } from "../utils/extensions"
 
@@ -44,49 +42,44 @@ const DashboardRoutes = () => {
   const injectedRoutes = getTopLevelRoutes() || []
 
   return (
-    <AnalyticsProvider writeKey={WRITE_KEY}>
-      <DndProvider backend={HTML5Backend}>
-        <Layout>
-          <SEO title="Medusa" />
-          <Routes>
-            <Route path="oauth/:app_name" element={<Oauth />} />
-            <Route path="products/*" element={<ProductsRoute />} />
-            <Route
-              path="product-categories/*"
-              element={<ProductCategories />}
-            />
-            <Route path="collections/*" element={<Collections />} />
-            <Route path="gift-cards/*" element={<GiftCards />} />
-            <Route path="orders/*" element={<Orders />} />
-            <Route path="draft-orders/*" element={<DraftOrders />} />
-            <Route path="discounts/*" element={<Discounts />} />
-            <Route path="customers/*" element={<Customers />} />
-            <Route path="pricing/*" element={<Pricing />} />
-            <Route path="settings/*" element={<Settings />} />
-            <Route path="sales-channels/*" element={<SalesChannels />} />
-            <Route
-              path="publishable-api-keys/*"
-              element={<PublishableApiKeys />}
-            />
-            <Route path="inventory/*" element={<Inventory />} />
-            {injectedRoutes.map((route, index) => {
-              return (
-                <Route
-                  key={index}
-                  path={`/${route.path}/*`}
-                  errorElement={
-                    <RouteErrorElement
-                      origin={isRoute(route) ? route.origin : ""}
-                    />
-                  }
-                  element={<RouteContainer route={route} />}
-                />
-              )
-            })}
-          </Routes>
-        </Layout>
-      </DndProvider>
-    </AnalyticsProvider>
+    <DndProvider backend={HTML5Backend}>
+      <Layout>
+        <SEO title="Medusa" />
+        <Routes>
+          <Route path="oauth/:app_name" element={<Oauth />} />
+          <Route path="products/*" element={<ProductsRoute />} />
+          <Route path="product-categories/*" element={<ProductCategories />} />
+          <Route path="collections/*" element={<Collections />} />
+          <Route path="gift-cards/*" element={<GiftCards />} />
+          <Route path="orders/*" element={<Orders />} />
+          <Route path="draft-orders/*" element={<DraftOrders />} />
+          <Route path="discounts/*" element={<Discounts />} />
+          <Route path="customers/*" element={<Customers />} />
+          <Route path="pricing/*" element={<Pricing />} />
+          <Route path="settings/*" element={<Settings />} />
+          <Route path="sales-channels/*" element={<SalesChannels />} />
+          <Route
+            path="publishable-api-keys/*"
+            element={<PublishableApiKeys />}
+          />
+          <Route path="inventory/*" element={<Inventory />} />
+          {injectedRoutes.map((route, index) => {
+            return (
+              <Route
+                key={index}
+                path={`/${route.path}/*`}
+                errorElement={
+                  <RouteErrorElement
+                    origin={isRoute(route) ? route.origin : ""}
+                  />
+                }
+                element={<RouteContainer route={route} />}
+              />
+            )
+          })}
+        </Routes>
+      </Layout>
+    </DndProvider>
   )
 }
 

packages/admin-ui/ui/src/pages/invite.tsx

@@ -13,15 +13,11 @@ import useNotification from "../hooks/use-notification"
 import { getErrorMessage } from "../utils/error-messages"
 import FormValidator from "../utils/form-validator"
 import { useAdminCreateAnalyticsConfig } from "../services/analytics"
-import {
-  AnalyticsProvider,
-  useAnalytics,
-} from "../providers/analytics-provider"
+import { useAnalytics } from "../providers/analytics-provider"
 import AnalyticsConfigForm, {
   AnalyticsConfigFormType,
 } from "../components/organisms/analytics-config-form"
 import { nestedForm } from "../utils/nested-form"
-import { WRITE_KEY } from "../constants/analytics"
 
 type FormValues = {
   password: string
@@ -155,90 +151,88 @@ const InvitePage = () => {
   }
 
   return (
-    <AnalyticsProvider writeKey={WRITE_KEY}>
-      <PublicLayout>
-        <SEO title="Create Account" />
-        {signUp ? (
-          <form onSubmit={handleAcceptInvite}>
-            <div className="flex w-[300px] flex-col items-center">
-              <h1 className="inter-xlarge-semibold mb-large text-[20px]">
-                Create your Medusa account
-              </h1>
-              <div className="gap-y-small flex flex-col">
-                <div>
-                  <SigninInput readOnly placeholder={token.user_email} />
-                </div>
-                <div>
-                  <SigninInput
-                    placeholder="Password"
-                    type={"password"}
-                    {...register("password", {
-                      required: FormValidator.required("Password"),
-                    })}
-                    autoComplete="new-password"
-                  />
-                </div>
-                <div>
-                  <SigninInput
-                    placeholder="Confirm password"
-                    type={"password"}
-                    {...register("repeat_password", {
-                      required: "You must confirm your password",
-                    })}
-                    autoComplete="new-password"
-                  />
-                  <InputError errors={errors} name="repeat_password" />
-                </div>
+    <PublicLayout>
+      <SEO title="Create Account" />
+      {signUp ? (
+        <form onSubmit={handleAcceptInvite}>
+          <div className="flex w-[300px] flex-col items-center">
+            <h1 className="inter-xlarge-semibold mb-large text-[20px]">
+              Create your Medusa account
+            </h1>
+            <div className="gap-y-small flex flex-col">
+              <div>
+                <SigninInput readOnly placeholder={token.user_email} />
               </div>
-              <div className="gap-y-small my-8 flex w-[300px] flex-col">
-                <AnalyticsConfigForm
-                  form={nestedForm(form, "analytics")}
-                  compact={true}
+              <div>
+                <SigninInput
+                  placeholder="Password"
+                  type={"password"}
+                  {...register("password", {
+                    required: FormValidator.required("Password"),
+                  })}
+                  autoComplete="new-password"
                 />
               </div>
-              <Button
-                variant="secondary"
-                size="medium"
-                className="mt-large w-[300px]"
-                loading={isLoading}
-              >
-                Create account
-              </Button>
-              <p className="inter-small-regular text-grey-50 mt-xlarge">
-                Already signed up? <a href="/login">Log in</a>
-              </p>
+              <div>
+                <SigninInput
+                  placeholder="Confirm password"
+                  type={"password"}
+                  {...register("repeat_password", {
+                    required: "You must confirm your password",
+                  })}
+                  autoComplete="new-password"
+                />
+                <InputError errors={errors} name="repeat_password" />
+              </div>
+            </div>
+            <div className="gap-y-small my-8 flex w-[300px] flex-col">
+              <AnalyticsConfigForm
+                form={nestedForm(form, "analytics")}
+                compact={true}
+              />
             </div>
-          </form>
-        ) : (
-          <div className="flex flex-col items-center text-center">
-            <h1 className="inter-xlarge-semibold text-[20px]">
-              {first_run
-                ? `Let's get you started!`
-                : `You have been invited to join the team`}
-            </h1>
-            {first_run ? (
-              <p className="inter-base-regular text-grey-50 mt-xsmall">
-                Create an admin account to access your <br /> Medusa dashboard.
-              </p>
-            ) : (
-              <p className="inter-base-regular text-grey-50 mt-xsmall">
-                You can now join the team. Sign up below and get started
-                <br />
-                with your Medusa account right away.
-              </p>
-            )}
             <Button
               variant="secondary"
               size="medium"
-              className="mt-xlarge w-[300px]"
-              onClick={() => setSignUp(true)}
+              className="mt-large w-[300px]"
+              loading={isLoading}
             >
-              Sign up
+              Create account
             </Button>
+            <p className="inter-small-regular text-grey-50 mt-xlarge">
+              Already signed up? <a href="/login">Log in</a>
+            </p>
           </div>
-        )}
-      </PublicLayout>
-    </AnalyticsProvider>
+        </form>
+      ) : (
+        <div className="flex flex-col items-center text-center">
+          <h1 className="inter-xlarge-semibold text-[20px]">
+            {first_run
+              ? `Let's get you started!`
+              : `You have been invited to join the team`}
+          </h1>
+          {first_run ? (
+            <p className="inter-base-regular text-grey-50 mt-xsmall">
+              Create an admin account to access your <br /> Medusa dashboard.
+            </p>
+          ) : (
+            <p className="inter-base-regular text-grey-50 mt-xsmall">
+              You can now join the team. Sign up below and get started
+              <br />
+              with your Medusa account right away.
+            </p>
+          )}
+          <Button
+            variant="secondary"
+            size="medium"
+            className="mt-xlarge w-[300px]"
+            onClick={() => setSignUp(true)}
+          >
+            Sign up
+          </Button>
+        </div>
+      )}
+    </PublicLayout>
   )
 }