From 8772a0722ecfb6bceed0cfccfce66d0e7cdba331 Mon Sep 17 00:00:00 2001
From: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>
Date: Mon, 18 Sep 2023 15:25:12 +0200
Subject: [PATCH] fix(admin-ui): Wrap invite route in AnalyticsProvider (#5111)

* fix(admin-ui): Wrap invite route in AnalyticsProvider

* Create nervous-keys-impress.md
---
 .changeset/nervous-keys-impress.md        |   6 +
 packages/admin-ui/ui/src/pages/invite.tsx | 158 +++++++++++-----------
 2 files changed, 88 insertions(+), 76 deletions(-)
 create mode 100644 .changeset/nervous-keys-impress.md

diff --git a/.changeset/nervous-keys-impress.md b/.changeset/nervous-keys-impress.md
new file mode 100644
index 0000000000..d18e27ec9c
--- /dev/null
+++ b/.changeset/nervous-keys-impress.md
@@ -0,0 +1,6 @@
+---
+"@medusajs/admin-ui": patch
+"@medusajs/admin": patch
+---
+
+fix(admin-ui): Wrap invite route in AnalyticsProvider
diff --git a/packages/admin-ui/ui/src/pages/invite.tsx b/packages/admin-ui/ui/src/pages/invite.tsx
index b18303768d..13d0657f71 100644
--- a/packages/admin-ui/ui/src/pages/invite.tsx
+++ b/packages/admin-ui/ui/src/pages/invite.tsx
@@ -13,11 +13,15 @@ import useNotification from "../hooks/use-notification"
 import { getErrorMessage } from "../utils/error-messages"
 import FormValidator from "../utils/form-validator"
 import { useAdminCreateAnalyticsConfig } from "../services/analytics"
-import { useAnalytics } from "../providers/analytics-provider"
+import {
+  AnalyticsProvider,
+  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
@@ -151,88 +155,90 @@ const InvitePage = () => {
   }
 
   return (
-    <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
+    <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>
+              </div>
+              <div className="gap-y-small my-8 flex w-[300px] flex-col">
+                <AnalyticsConfigForm
+                  form={nestedForm(form, "analytics")}
+                  compact={true}
+                />
+              </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>
+          </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>
-            <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>
-            </div>
-            <div className="gap-y-small my-8 flex w-[300px] flex-col">
-              <AnalyticsConfigForm
-                form={nestedForm(form, "analytics")}
-                compact={true}
-              />
-            </div>
+            {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-large w-[300px]"
-              loading={isLoading}
+              className="mt-xlarge w-[300px]"
+              onClick={() => setSignUp(true)}
             >
-              Create account
+              Sign up
             </Button>
-            <p className="inter-small-regular text-grey-50 mt-xlarge">
-              Already signed up? <a href="/login">Log in</a>
-            </p>
           </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)}
-          >
-            Sign up
-          </Button>
-        </div>
-      )}
-    </PublicLayout>
+        )}
+      </PublicLayout>
+    </AnalyticsProvider>
   )
 }