From feede8503ce297aefb4948f77c8266261bdb22a5 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 11 Oct 2024 15:55:25 +0100
Subject: [PATCH 01/19] =?UTF-8?q?Updated=20=E2=80=9CTwitter=E2=80=9D=20to?=
 =?UTF-8?q?=20be=20=E2=80=9CX=20(Twitter)=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/webapp/app/routes/confirm-basic-details.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/routes/confirm-basic-details.tsx b/apps/webapp/app/routes/confirm-basic-details.tsx
index 852163c6dc..1258c319b7 100644
--- a/apps/webapp/app/routes/confirm-basic-details.tsx
+++ b/apps/webapp/app/routes/confirm-basic-details.tsx
@@ -222,7 +222,7 @@ export default function Page() {
                 <Label htmlFor={confirmEmail.id}>How did you hear about us?</Label>
                 <Input
                   {...conform.input(referralSource, { type: "text" })}
-                  placeholder="Google, Twitter…?"
+                  placeholder="Google, X (Twitter)…?"
                   icon="heart"
                   spellCheck={false}
                 />

From 008a880b6eb440afd4af79a902c9fcc01bbe4a61 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 11 Oct 2024 15:55:46 +0100
Subject: [PATCH 02/19] added Textarea to storybook

---
 .../app/routes/storybook.textarea/route.tsx     | 17 +++++++++++++++++
 apps/webapp/app/routes/storybook/route.tsx      | 12 ++++++++----
 2 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 apps/webapp/app/routes/storybook.textarea/route.tsx

diff --git a/apps/webapp/app/routes/storybook.textarea/route.tsx b/apps/webapp/app/routes/storybook.textarea/route.tsx
new file mode 100644
index 0000000000..efdcf577d3
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.textarea/route.tsx
@@ -0,0 +1,17 @@
+import { Input } from "~/components/primitives/Input";
+import { TextArea } from "~/components/primitives/TextArea";
+
+export default function Story() {
+  return (
+    <div className="flex gap-16">
+      <div>
+        <div className="m-8 flex w-64 flex-col gap-4">
+          <TextArea placeholder="6 rows (default)" autoFocus />
+          <Input placeholder="Input" />
+          <TextArea placeholder="3 rows" rows={3} />
+          <TextArea disabled placeholder="Disabled" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook/route.tsx b/apps/webapp/app/routes/storybook/route.tsx
index 7449597481..39cdb19d75 100644
--- a/apps/webapp/app/routes/storybook/route.tsx
+++ b/apps/webapp/app/routes/storybook/route.tsx
@@ -126,16 +126,20 @@ const stories: Story[] = [
     slug: "date-fields",
   },
   {
-    name: "Simple form",
-    slug: "simple-form",
+    name: "Input fields",
+    slug: "input-fields",
   },
   {
     name: "Search fields",
     slug: "search-fields",
   },
   {
-    name: "Input fields",
-    slug: "input-fields",
+    name: "Simple form",
+    slug: "simple-form",
+  },
+  {
+    name: "Textarea",
+    slug: "textarea",
   },
   {
     sectionTitle: "Menus",

From 6a85d580097c7f48410eb4d11a461f980738aa24 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 11 Oct 2024 15:56:01 +0100
Subject: [PATCH 03/19] Updated textarea styling to match input field

---
 apps/webapp/app/components/primitives/TextArea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/TextArea.tsx b/apps/webapp/app/components/primitives/TextArea.tsx
index 7d543e2ec5..f5350a510b 100644
--- a/apps/webapp/app/components/primitives/TextArea.tsx
+++ b/apps/webapp/app/components/primitives/TextArea.tsx
@@ -8,7 +8,7 @@ export function TextArea({ className, rows, ...props }: TextAreaProps) {
       {...props}
       rows={rows ?? 6}
       className={cn(
-        "placeholder:text-muted-foreground w-full rounded-md border border-tertiary bg-tertiary px-3 text-sm text-text-bright transition focus-custom file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-charcoal-600 focus:border-transparent focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
+        "placeholder:text-muted-foreground w-full rounded border border-charcoal-800 bg-charcoal-750 px-3 text-sm text-text-bright transition focus-custom focus-custom file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-charcoal-600 hover:bg-charcoal-650 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
     />

From 30d0178b572dbd2208073889a6269e05f93cf002 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 11 Oct 2024 15:56:25 +0100
Subject: [PATCH 04/19] WIP adding new text field to org creation page

---
 .../webapp/app/routes/_app.orgs.new/route.tsx | 75 +++++++++++--------
 1 file changed, 43 insertions(+), 32 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
index d99286dd05..6121a80be2 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -17,6 +17,7 @@ import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
 import { RadioGroupItem } from "~/components/primitives/RadioButton";
+import { TextArea } from "~/components/primitives/TextArea";
 import { useFeatures } from "~/hooks/useFeatures";
 import { createOrganization } from "~/models/organization.server";
 import { NewOrganizationPresenter } from "~/presenters/NewOrganizationPresenter.server";
@@ -97,39 +98,49 @@ export default function NewOrganizationPage() {
             <FormError id={orgName.errorId}>{orgName.error}</FormError>
           </InputGroup>
           {isManagedCloud && (
-            <InputGroup>
-              <Label htmlFor={"companySize"}>Number of employees</Label>
-              <RadioGroup name="companySize" className="flex items-center justify-between gap-2">
-                <RadioGroupItem
-                  id="employees-1-5"
-                  label="1-5"
-                  value={"1-5"}
-                  variant="button/small"
-                  className="grow"
+            <>
+              <InputGroup>
+                <Label htmlFor={"companySize"}>Number of employees</Label>
+                <RadioGroup name="companySize" className="flex items-center justify-between gap-2">
+                  <RadioGroupItem
+                    id="employees-1-5"
+                    label="1-5"
+                    value={"1-5"}
+                    variant="button/small"
+                    className="grow"
+                  />
+                  <RadioGroupItem
+                    id="employees-6-49"
+                    label="6-49"
+                    value={"6-49"}
+                    variant="button/small"
+                    className="grow"
+                  />
+                  <RadioGroupItem
+                    id="employees-50-99"
+                    label="50-99"
+                    value={"50-99"}
+                    variant="button/small"
+                    className="grow"
+                  />
+                  <RadioGroupItem
+                    id="employees-100+"
+                    label="100+"
+                    value={"100+"}
+                    variant="button/small"
+                    className="grow"
+                  />
+                </RadioGroup>
+              </InputGroup>
+              <InputGroup>
+                <Label>What problem are you trying to solve?</Label>
+                <TextArea
+                  rows={4}
+                  // placeholder="E.g. what problem are you trying to solve?"
+                  spellCheck={false}
                 />
-                <RadioGroupItem
-                  id="employees-6-49"
-                  label="6-49"
-                  value={"6-49"}
-                  variant="button/small"
-                  className="grow"
-                />
-                <RadioGroupItem
-                  id="employees-50-99"
-                  label="50-99"
-                  value={"50-99"}
-                  variant="button/small"
-                  className="grow"
-                />
-                <RadioGroupItem
-                  id="employees-100+"
-                  label="100+"
-                  value={"100+"}
-                  variant="button/small"
-                  className="grow"
-                />
-              </RadioGroup>
-            </InputGroup>
+              </InputGroup>
+            </>
           )}
 
           <FormButtons

From 7ce56fabdb8eb72e8a24f155d41c72eca3664b37 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 12 Oct 2024 13:13:45 +0100
Subject: [PATCH 05/19] Added description to field

---
 apps/webapp/app/routes/_app.orgs.new/route.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
index 6121a80be2..caae4b980d 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -133,12 +133,11 @@ export default function NewOrganizationPage() {
                 </RadioGroup>
               </InputGroup>
               <InputGroup>
-                <Label>What problem are you trying to solve?</Label>
-                <TextArea
-                  rows={4}
-                  // placeholder="E.g. what problem are you trying to solve?"
-                  spellCheck={false}
-                />
+                <Label htmlFor={"whyUseUs"}>What problem are you trying to solve?</Label>
+                <TextArea name="whyUseUs" rows={4} spellCheck={false} />
+                <Hint>
+                  Your answer will help us understand your use case and provide better support.
+                </Hint>
               </InputGroup>
             </>
           )}

From 23ceefc90650d301c2c336cc2c79e90a60acb9a3 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 12 Oct 2024 13:35:49 +0100
Subject: [PATCH 06/19] Submit feedback to Plain when an org signs up

---
 .../webapp/app/routes/_app.orgs.new/route.tsx | 66 ++++++++++++++++++-
 1 file changed, 64 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
index caae4b980d..2b8f54c326 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -21,12 +21,15 @@ import { TextArea } from "~/components/primitives/TextArea";
 import { useFeatures } from "~/hooks/useFeatures";
 import { createOrganization } from "~/models/organization.server";
 import { NewOrganizationPresenter } from "~/presenters/NewOrganizationPresenter.server";
-import { requireUserId } from "~/services/session.server";
+import { requireUser, requireUserId } from "~/services/session.server";
 import { organizationPath, rootPath } from "~/utils/pathBuilder";
+import { PlainClient, uiComponent } from "@team-plain/typescript-sdk";
+import { env } from "~/env.server";
 
 const schema = z.object({
   orgName: z.string().min(3).max(50),
   companySize: z.string().optional(),
+  whyUseUs: z.string().optional(),
 });
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
@@ -41,7 +44,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 
 export const action: ActionFunction = async ({ request }) => {
   const userId = await requireUserId(request);
-
+  const user = await requireUser(request);
   const formData = await request.formData();
   const submission = parse(formData, { schema });
 
@@ -56,6 +59,65 @@ export const action: ActionFunction = async ({ request }) => {
       companySize: submission.value.companySize ?? null,
     });
 
+    if (env.PLAIN_API_KEY) {
+      const client = new PlainClient({
+        apiKey: env.PLAIN_API_KEY,
+      });
+
+      const whyUseUs = formData.get("whyUseUs");
+
+      const upsertCustomerRes = await client.upsertCustomer({
+        identifier: {
+          emailAddress: user.email,
+        },
+        onCreate: {
+          externalId: userId,
+          fullName: submission.value.orgName,
+          email: {
+            email: user.email,
+            isVerified: true,
+          },
+        },
+        onUpdate: {
+          externalId: { value: userId },
+          fullName: { value: submission.value.orgName },
+          email: {
+            email: user.email,
+            isVerified: true,
+          },
+        },
+      });
+
+      if (upsertCustomerRes.error) {
+        console.error("Failed to upsert customer in Plain", upsertCustomerRes.error);
+      } else if (whyUseUs) {
+        const createThreadRes = await client.createThread({
+          customerIdentifier: {
+            customerId: upsertCustomerRes.data.customer.id,
+          },
+          title: "New org feedback",
+          components: [
+            uiComponent.text({
+              text: `${submission.value.orgName} just created a new organization.`,
+            }),
+            uiComponent.divider({ spacingSize: "M" }),
+            uiComponent.text({
+              size: "L",
+              color: "NORMAL",
+              text: "What problem are they trying to solve?",
+            }),
+            uiComponent.text({
+              text: whyUseUs.toString(),
+            }),
+          ],
+        });
+
+        if (createThreadRes.error) {
+          console.error("Failed to create thread in Plain", createThreadRes.error);
+        }
+      }
+    }
+
     return redirect(organizationPath(organization));
   } catch (error: any) {
     return json({ errors: { body: error.message } }, { status: 400 });

From 96578bb7753e2a98d02b3a955c1ab17e75772a46 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 12 Oct 2024 13:49:00 +0100
Subject: [PATCH 07/19] Formatting improvement

---
 apps/webapp/app/routes/_app.orgs.new/route.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
index 2b8f54c326..5acecaeb85 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -104,9 +104,11 @@ export const action: ActionFunction = async ({ request }) => {
             uiComponent.text({
               size: "L",
               color: "NORMAL",
-              text: "What problem are they trying to solve?",
+              text: "What problem are you trying to solve?",
             }),
             uiComponent.text({
+              size: "L",
+              color: "NORMAL",
               text: whyUseUs.toString(),
             }),
           ],

From fb0397a8b98fac00e39e56d40398c31042aeab98 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 14 Oct 2024 17:28:57 +0100
Subject: [PATCH 08/19] type improvement

---
 .../app/routes/resources.orgs.$organizationSlug.select-plan.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index b4411761b3..b8d0fa1922 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -867,7 +867,7 @@ function TierLimit({ children, href }: { children: React.ReactNode; href?: strin
           }
           content={
             <div className="flex items-center gap-1">
-              <Paragraph variant="small">View detailed compute pricing information</Paragraph>
+              <Paragraph variant="small">View compute pricing information</Paragraph>
               <ArrowUpRightIcon className="size-4 text-text-dimmed" />
             </div>
           }

From 1cb90bb0ae45dce465ce83b8a95d59962d5e0477 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 14 Oct 2024 17:29:18 +0100
Subject: [PATCH 09/19] removed userId

---
 apps/webapp/app/routes/_app.orgs.new/route.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
index 5acecaeb85..20cdd87d17 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -43,7 +43,6 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 };
 
 export const action: ActionFunction = async ({ request }) => {
-  const userId = await requireUserId(request);
   const user = await requireUser(request);
   const formData = await request.formData();
   const submission = parse(formData, { schema });
@@ -55,7 +54,7 @@ export const action: ActionFunction = async ({ request }) => {
   try {
     const organization = await createOrganization({
       title: submission.value.orgName,
-      userId,
+      userId: user.id,
       companySize: submission.value.companySize ?? null,
     });
 
@@ -71,7 +70,7 @@ export const action: ActionFunction = async ({ request }) => {
           emailAddress: user.email,
         },
         onCreate: {
-          externalId: userId,
+          externalId: user.id,
           fullName: submission.value.orgName,
           email: {
             email: user.email,
@@ -79,7 +78,7 @@ export const action: ActionFunction = async ({ request }) => {
           },
         },
         onUpdate: {
-          externalId: { value: userId },
+          externalId: { value: user.id },
           fullName: { value: submission.value.orgName },
           email: {
             email: user.email,

From daafd5e80ab003c203783c0adc8ecb49d75d27f9 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 14 Oct 2024 18:02:23 +0100
Subject: [PATCH 10/19] Moved submitting to Plain into its own file

---
 .../webapp/app/routes/_app.orgs.new/route.tsx | 50 ++++------------
 apps/webapp/app/utils/plain.server.ts         | 59 +++++++++++++++++++
 2 files changed, 70 insertions(+), 39 deletions(-)
 create mode 100644 apps/webapp/app/utils/plain.server.ts

diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
index 20cdd87d17..4ed9ad8e6f 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -25,6 +25,8 @@ import { requireUser, requireUserId } from "~/services/session.server";
 import { organizationPath, rootPath } from "~/utils/pathBuilder";
 import { PlainClient, uiComponent } from "@team-plain/typescript-sdk";
 import { env } from "~/env.server";
+import { sendToPlain } from "~/utils/plain.server";
+import { logger } from "~/services/logger.server";
 
 const schema = z.object({
   orgName: z.string().min(3).max(50),
@@ -58,42 +60,14 @@ export const action: ActionFunction = async ({ request }) => {
       companySize: submission.value.companySize ?? null,
     });
 
-    if (env.PLAIN_API_KEY) {
-      const client = new PlainClient({
-        apiKey: env.PLAIN_API_KEY,
-      });
+    const whyUseUs = formData.get("whyUseUs");
 
-      const whyUseUs = formData.get("whyUseUs");
-
-      const upsertCustomerRes = await client.upsertCustomer({
-        identifier: {
-          emailAddress: user.email,
-        },
-        onCreate: {
-          externalId: user.id,
-          fullName: submission.value.orgName,
-          email: {
-            email: user.email,
-            isVerified: true,
-          },
-        },
-        onUpdate: {
-          externalId: { value: user.id },
-          fullName: { value: submission.value.orgName },
-          email: {
-            email: user.email,
-            isVerified: true,
-          },
-        },
-      });
-
-      if (upsertCustomerRes.error) {
-        console.error("Failed to upsert customer in Plain", upsertCustomerRes.error);
-      } else if (whyUseUs) {
-        const createThreadRes = await client.createThread({
-          customerIdentifier: {
-            customerId: upsertCustomerRes.data.customer.id,
-          },
+    if (whyUseUs) {
+      try {
+        await sendToPlain({
+          userId: user.id,
+          email: user.email,
+          orgName: submission.value.orgName,
           title: "New org feedback",
           components: [
             uiComponent.text({
@@ -112,10 +86,8 @@ export const action: ActionFunction = async ({ request }) => {
             }),
           ],
         });
-
-        if (createThreadRes.error) {
-          console.error("Failed to create thread in Plain", createThreadRes.error);
-        }
+      } catch (error) {
+        logger.error("Error sending data to Plain when creating an org:", { error });
       }
     }
 
diff --git a/apps/webapp/app/utils/plain.server.ts b/apps/webapp/app/utils/plain.server.ts
new file mode 100644
index 0000000000..a10adee602
--- /dev/null
+++ b/apps/webapp/app/utils/plain.server.ts
@@ -0,0 +1,59 @@
+import { PlainClient, uiComponent } from "@team-plain/typescript-sdk";
+import { env } from "~/env.server";
+
+type Input = {
+  userId: string;
+  email: string;
+  orgName: string;
+  title: string;
+  components: ReturnType<typeof uiComponent.text>[];
+};
+
+export async function sendToPlain({ userId, email, orgName, title, components }: Input) {
+  if (!env.PLAIN_API_KEY) {
+    return;
+  }
+
+  const client = new PlainClient({
+    apiKey: env.PLAIN_API_KEY,
+  });
+
+  const upsertCustomerRes = await client.upsertCustomer({
+    identifier: {
+      emailAddress: email,
+    },
+    onCreate: {
+      externalId: userId,
+      fullName: orgName,
+      email: {
+        email: email,
+        isVerified: true,
+      },
+    },
+    onUpdate: {
+      externalId: { value: userId },
+      fullName: { value: orgName },
+      email: {
+        email: email,
+        isVerified: true,
+      },
+    },
+  });
+
+  if (upsertCustomerRes.error) {
+    console.error("Failed to upsert customer in Plain", upsertCustomerRes.error);
+    return;
+  }
+
+  const createThreadRes = await client.createThread({
+    customerIdentifier: {
+      customerId: upsertCustomerRes.data.customer.id,
+    },
+    title: title,
+    components: components,
+  });
+
+  if (createThreadRes.error) {
+    console.error("Failed to create thread in Plain", createThreadRes.error);
+  }
+}

From c791e50e2b4c85294dfbbc38c6cff2b95cdabe78 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Oct 2024 11:03:44 +0100
Subject: [PATCH 11/19] Change orgName with name

---
 apps/webapp/app/utils/plain.server.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/utils/plain.server.ts b/apps/webapp/app/utils/plain.server.ts
index a10adee602..4e8ce63073 100644
--- a/apps/webapp/app/utils/plain.server.ts
+++ b/apps/webapp/app/utils/plain.server.ts
@@ -4,12 +4,12 @@ import { env } from "~/env.server";
 type Input = {
   userId: string;
   email: string;
-  orgName: string;
+  name: string;
   title: string;
   components: ReturnType<typeof uiComponent.text>[];
 };
 
-export async function sendToPlain({ userId, email, orgName, title, components }: Input) {
+export async function sendToPlain({ userId, email, name, title, components }: Input) {
   if (!env.PLAIN_API_KEY) {
     return;
   }
@@ -24,7 +24,7 @@ export async function sendToPlain({ userId, email, orgName, title, components }:
     },
     onCreate: {
       externalId: userId,
-      fullName: orgName,
+      fullName: name,
       email: {
         email: email,
         isVerified: true,
@@ -32,7 +32,7 @@ export async function sendToPlain({ userId, email, orgName, title, components }:
     },
     onUpdate: {
       externalId: { value: userId },
-      fullName: { value: orgName },
+      fullName: { value: name },
       email: {
         email: email,
         isVerified: true,

From 34c6e9aa060552c33571e9ad5816339f59f34135 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Oct 2024 11:05:02 +0100
Subject: [PATCH 12/19] use sendToPlain function for the help & feedback email
 form

---
 apps/webapp/app/routes/resources.feedback.ts | 30 ++++----------------
 1 file changed, 5 insertions(+), 25 deletions(-)

diff --git a/apps/webapp/app/routes/resources.feedback.ts b/apps/webapp/app/routes/resources.feedback.ts
index 161eed564b..ee52cd33f3 100644
--- a/apps/webapp/app/routes/resources.feedback.ts
+++ b/apps/webapp/app/routes/resources.feedback.ts
@@ -6,6 +6,7 @@ import { z } from "zod";
 import { env } from "~/env.server";
 import { redirectWithSuccessMessage } from "~/models/message.server";
 import { requireUser } from "~/services/session.server";
+import { sendToPlain } from "~/utils/plain.server";
 
 let client: PlainClient | undefined;
 
@@ -63,8 +64,6 @@ export async function action({ request }: ActionFunctionArgs) {
       onCreate: {
         externalId: user.id,
         fullName: user.name ?? "",
-        // TODO - Optional: set 'first name' on user
-        // shortName: ''
         email: {
           email: user.email,
           isVerified: true,
@@ -73,8 +72,6 @@ export async function action({ request }: ActionFunctionArgs) {
       onUpdate: {
         externalId: { value: user.id },
         fullName: { value: user.name ?? "" },
-        // TODO - see above
-        // shortName: { value: "" },
         email: {
           email: user.email,
           isVerified: true,
@@ -95,10 +92,10 @@ export async function action({ request }: ActionFunctionArgs) {
     }
 
     const title = feedbackTypeLabel[submission.value.feedbackType as FeedbackType];
-    const createThreadRes = await client.createThread({
-      customerIdentifier: {
-        customerId: upsertCustomerRes.data.customer.id,
-      },
+    await sendToPlain({
+      userId: user.id,
+      email: user.email,
+      name: user.name ?? user.displayName ?? user.email,
       title,
       components: [
         uiComponent.text({
@@ -123,25 +120,8 @@ export async function action({ request }: ActionFunctionArgs) {
           text: submission.value.message,
         }),
       ],
-      // TODO: Optional: set labels on threads here on creation
-      // labelTypeIds: [],
-
-      // TODO: Optional: set the priority (0 is urgent, 3 is low)
-      // priority: 0,
     });
 
-    if (createThreadRes.error) {
-      console.error(
-        inspect(createThreadRes.error, {
-          showHidden: false,
-          depth: null,
-          colors: true,
-        })
-      );
-      submission.error.message = createThreadRes.error.message;
-      return json(submission);
-    }
-
     return redirectWithSuccessMessage(
       submission.value.path,
       request,

From ec45694a3a6b1079961805af4c4c048ff463ff3e Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Oct 2024 11:05:26 +0100
Subject: [PATCH 13/19] use name not orgName

---
 apps/webapp/app/routes/_app.orgs.new/route.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
index 4ed9ad8e6f..ee9d1ef324 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -67,7 +67,7 @@ export const action: ActionFunction = async ({ request }) => {
         await sendToPlain({
           userId: user.id,
           email: user.email,
-          orgName: submission.value.orgName,
+          name: user.name ?? user.displayName ?? user.email,
           title: "New org feedback",
           components: [
             uiComponent.text({

From 071954f6dca862a51cd63450d235d41c0bd6dc46 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Oct 2024 11:05:48 +0100
Subject: [PATCH 14/19] import cleanup

---
 apps/webapp/app/components/Feedback.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/Feedback.tsx b/apps/webapp/app/components/Feedback.tsx
index 3c9b389750..5a5472a976 100644
--- a/apps/webapp/app/components/Feedback.tsx
+++ b/apps/webapp/app/components/Feedback.tsx
@@ -1,8 +1,9 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import { EnvelopeIcon, LightBulbIcon } from "@heroicons/react/24/solid";
+import { InformationCircleIcon } from "@heroicons/react/20/solid";
+import { EnvelopeIcon } from "@heroicons/react/24/solid";
 import { Form, useActionData, useLocation, useNavigation } from "@remix-run/react";
-import { type ReactNode, useState, useEffect } from "react";
+import { type ReactNode, useEffect, useState } from "react";
 import { type FeedbackType, feedbackTypeLabel, schema } from "~/routes/resources.feedback";
 import { Button } from "./primitives/Buttons";
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "./primitives/Dialog";
@@ -16,7 +17,6 @@ import { Label } from "./primitives/Label";
 import { Paragraph } from "./primitives/Paragraph";
 import { Select, SelectItem } from "./primitives/Select";
 import { TextArea } from "./primitives/TextArea";
-import { InformationCircleIcon } from "@heroicons/react/20/solid";
 import { TextLink } from "./primitives/TextLink";
 
 type FeedbackProps = {

From 36bca68f57bb4fc32db1c1f27f80725f1deb335c Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Oct 2024 11:15:37 +0100
Subject: [PATCH 15/19] Downgrading plan form uses sendToPlain

---
 ...ces.orgs.$organizationSlug.select-plan.tsx | 66 ++-----------------
 1 file changed, 6 insertions(+), 60 deletions(-)

diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index b8d0fa1922..ceb499d331 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -8,7 +8,7 @@ import {
 import { ArrowDownCircleIcon } from "@heroicons/react/24/outline";
 import { Form, useLocation, useNavigation } from "@remix-run/react";
 import { ActionFunctionArgs } from "@remix-run/server-runtime";
-import { PlainClient, uiComponent } from "@team-plain/typescript-sdk";
+import { uiComponent } from "@team-plain/typescript-sdk";
 import { GitHubLightIcon } from "@trigger.dev/companyicons";
 import {
   FreePlanDefinition,
@@ -19,7 +19,6 @@ import {
   SubscriptionResult,
 } from "@trigger.dev/platform/v3";
 import React, { useEffect, useState } from "react";
-import { inspect } from "util";
 import { z } from "zod";
 import { DefinitionTip } from "~/components/DefinitionTooltip";
 import { Feedback } from "~/components/Feedback";
@@ -39,12 +38,12 @@ import { Spinner } from "~/components/primitives/Spinner";
 import { TextArea } from "~/components/primitives/TextArea";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { prisma } from "~/db.server";
-import { env } from "~/env.server";
 import { redirectWithErrorMessage } from "~/models/message.server";
 import { logger } from "~/services/logger.server";
 import { setPlan } from "~/services/platform.v3.server";
 import { requireUser } from "~/services/session.server";
 import { cn } from "~/utils/cn";
+import { sendToPlain } from "~/utils/plain.server";
 
 const Params = z.object({
   organizationSlug: z.string(),
@@ -88,53 +87,11 @@ export async function action({ request, params }: ActionFunctionArgs) {
   switch (form.type) {
     case "free": {
       try {
-        if (!env.PLAIN_API_KEY) {
-          throw new Error("PLAIN_API_KEY is not set");
-        }
-
-        const client = new PlainClient({
-          apiKey: env.PLAIN_API_KEY,
-        });
-
-        const upsertCustomerRes = await client.upsertCustomer({
-          identifier: {
-            emailAddress: user.email,
-          },
-          onCreate: {
-            externalId: user.id,
-            fullName: user.name ?? "",
-            email: {
-              email: user.email,
-              isVerified: true,
-            },
-          },
-          onUpdate: {
-            externalId: { value: user.id },
-            fullName: { value: user.name ?? "" },
-            email: {
-              email: user.email,
-              isVerified: true,
-            },
-          },
-        });
-
-        if (upsertCustomerRes.error) {
-          console.error(
-            inspect(upsertCustomerRes.error, {
-              showHidden: false,
-              depth: null,
-              colors: true,
-            })
-          );
-          throw redirectWithErrorMessage(form.callerPath, request, upsertCustomerRes.error.message);
-        }
-
-        // Only create a thread if there are reasons or a message
         if (reasons.length > 0 || (message && message.toString().trim() !== "")) {
-          const createThreadRes = await client.createThread({
-            customerIdentifier: {
-              customerId: upsertCustomerRes.data.customer.id,
-            },
+          await sendToPlain({
+            userId: user.id,
+            email: user.email,
+            name: user.name ?? "",
             title: "Plan cancelation feedback",
             components: [
               uiComponent.text({
@@ -169,17 +126,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
                 : []),
             ],
           });
-
-          if (createThreadRes.error) {
-            console.error(
-              inspect(createThreadRes.error, {
-                showHidden: false,
-                depth: null,
-                colors: true,
-              })
-            );
-            throw redirectWithErrorMessage(form.callerPath, request, createThreadRes.error.message);
-          }
         }
       } catch (e) {
         logger.error("Failed to submit to Plain the unsubscribe reason", { error: e });

From 710711968544ed738d1bfd934182681e533e6c09 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Oct 2024 11:32:21 +0100
Subject: [PATCH 16/19] Get the userId from requireUser only

---
 apps/webapp/app/routes/_app.orgs.new/route.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
index ee9d1ef324..6dee1ad152 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -4,6 +4,7 @@ import { RadioGroup } from "@radix-ui/react-radio-group";
 import type { ActionFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import { Form, useActionData, useNavigation } from "@remix-run/react";
+import { uiComponent } from "@team-plain/typescript-sdk";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { MainCenteredContainer } from "~/components/layout/AppLayout";
@@ -21,12 +22,10 @@ import { TextArea } from "~/components/primitives/TextArea";
 import { useFeatures } from "~/hooks/useFeatures";
 import { createOrganization } from "~/models/organization.server";
 import { NewOrganizationPresenter } from "~/presenters/NewOrganizationPresenter.server";
-import { requireUser, requireUserId } from "~/services/session.server";
+import { logger } from "~/services/logger.server";
+import { requireUser } from "~/services/session.server";
 import { organizationPath, rootPath } from "~/utils/pathBuilder";
-import { PlainClient, uiComponent } from "@team-plain/typescript-sdk";
-import { env } from "~/env.server";
 import { sendToPlain } from "~/utils/plain.server";
-import { logger } from "~/services/logger.server";
 
 const schema = z.object({
   orgName: z.string().min(3).max(50),
@@ -35,9 +34,9 @@ const schema = z.object({
 });
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const userId = await requireUserId(request);
+  const user = await requireUser(request);
   const presenter = new NewOrganizationPresenter();
-  const { hasOrganizations } = await presenter.call({ userId });
+  const { hasOrganizations } = await presenter.call({ userId: user.id });
 
   return typedjson({
     hasOrganizations,

From 38985419577cdbd7b726365ad2b05e1e445d2990 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 17 Oct 2024 09:20:54 +0100
Subject: [PATCH 17/19] Added whitespace-pre-wrap to the message property on
 the run page

---
 .../route.tsx                                                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
index 299a5eafec..9db878ea6c 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -314,7 +314,7 @@ function SpanBody({
               <Property.Table>
                 <Property.Item>
                   <Property.Label>Message</Property.Label>
-                  <Property.Value>{span.message}</Property.Value>
+                  <Property.Value className="whitespace-pre-wrap">{span.message}</Property.Value>
                 </Property.Item>
                 {span.triggeredRuns.length > 0 && (
                   <Property.Item>

From deea7c96ad0f7702cbdd25e773c73cc82c6db610 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 17 Oct 2024 10:36:29 +0100
Subject: [PATCH 18/19] use requireUserId

---
 apps/webapp/app/routes/_app.orgs.new/route.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
index 6dee1ad152..571c6163be 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -23,7 +23,7 @@ import { useFeatures } from "~/hooks/useFeatures";
 import { createOrganization } from "~/models/organization.server";
 import { NewOrganizationPresenter } from "~/presenters/NewOrganizationPresenter.server";
 import { logger } from "~/services/logger.server";
-import { requireUser } from "~/services/session.server";
+import { requireUser, requireUserId } from "~/services/session.server";
 import { organizationPath, rootPath } from "~/utils/pathBuilder";
 import { sendToPlain } from "~/utils/plain.server";
 
@@ -34,9 +34,9 @@ const schema = z.object({
 });
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const user = await requireUser(request);
+  const userId = await requireUserId(request);
   const presenter = new NewOrganizationPresenter();
-  const { hasOrganizations } = await presenter.call({ userId: user.id });
+  const { hasOrganizations } = await presenter.call({ userId: userId });
 
   return typedjson({
     hasOrganizations,

From 43c39b118ff6d965b758dd65f7f12407a81a30c0 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 17 Oct 2024 10:36:44 +0100
Subject: [PATCH 19/19] Removed old Plain submit code

---
 apps/webapp/app/routes/resources.feedback.ts | 51 ++------------------
 1 file changed, 4 insertions(+), 47 deletions(-)

diff --git a/apps/webapp/app/routes/resources.feedback.ts b/apps/webapp/app/routes/resources.feedback.ts
index ee52cd33f3..6bf8e012fd 100644
--- a/apps/webapp/app/routes/resources.feedback.ts
+++ b/apps/webapp/app/routes/resources.feedback.ts
@@ -33,7 +33,7 @@ const feedbackType = z.union(
 export const schema = z.object({
   path: z.string(),
   feedbackType,
-  message: z.string().min(1, "Must be at least 1 character"),
+  message: z.string().min(10, "Must be at least 10 characters"),
 });
 
 export async function action({ request }: ActionFunctionArgs) {
@@ -46,52 +46,8 @@ export async function action({ request }: ActionFunctionArgs) {
     return json(submission);
   }
 
+  const title = feedbackTypeLabel[submission.value.feedbackType as FeedbackType];
   try {
-    if (!env.PLAIN_API_KEY) {
-      console.error("PLAIN_API_KEY is not set");
-      submission.error.message = "PLAIN_API_KEY is not set";
-      return json(submission);
-    }
-
-    client = new PlainClient({
-      apiKey: env.PLAIN_API_KEY,
-    });
-
-    const upsertCustomerRes = await client.upsertCustomer({
-      identifier: {
-        emailAddress: user.email,
-      },
-      onCreate: {
-        externalId: user.id,
-        fullName: user.name ?? "",
-        email: {
-          email: user.email,
-          isVerified: true,
-        },
-      },
-      onUpdate: {
-        externalId: { value: user.id },
-        fullName: { value: user.name ?? "" },
-        email: {
-          email: user.email,
-          isVerified: true,
-        },
-      },
-    });
-
-    if (upsertCustomerRes.error) {
-      console.error(
-        inspect(upsertCustomerRes.error, {
-          showHidden: false,
-          depth: null,
-          colors: true,
-        })
-      );
-      submission.error.message = upsertCustomerRes.error.message;
-      return json(submission);
-    }
-
-    const title = feedbackTypeLabel[submission.value.feedbackType as FeedbackType];
     await sendToPlain({
       userId: user.id,
       email: user.email,
@@ -128,6 +84,7 @@ export async function action({ request }: ActionFunctionArgs) {
       "Thanks for your feedback! We'll get back to you soon."
     );
   } catch (e) {
-    return json(e, { status: 400 });
+    submission.error.message = e instanceof Error ? e.message : "Unknown error";
+    return json(submission);
   }
 }