feat(webapp): migrate Plain to @team-plain/graphql + attribute support threads to org tenant

.server-changes/plain-graphql-migration.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+In-app feedback and add-on/quota requests are now recorded with more account context for the support team.

apps/webapp/app/routes/api.v1.plain.customer-cards.ts

@@ -1,6 +1,6 @@
 import { json, type ActionFunctionArgs } from "@remix-run/server-runtime";
 import { timingSafeEqual } from "crypto";
-import { uiComponent } from "@team-plain/typescript-sdk";
+import { uiComponent } from "@team-plain/ui-components";
 import { z } from "zod";
 import { prisma } from "~/db.server";
 import { env } from "~/env.server";

apps/webapp/app/routes/resources.feedback.ts

@@ -1,13 +1,11 @@
 import { parseWithZod } from "@conform-to/zod";
 import { type ActionFunctionArgs, json } from "@remix-run/server-runtime";
-import { type PlainClient, uiComponent } from "@team-plain/typescript-sdk";
+import { uiComponent } from "@team-plain/ui-components";
 import { z } from "zod";
 import { redirectWithSuccessMessage } from "~/models/message.server";
 import { requireUser } from "~/services/session.server";
 import { sendToPlain } from "~/utils/plain.server";
 
-let _client: PlainClient | undefined;
-
 export const feedbackTypes = {
   bug: {
     label: "Bug report",

apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx

@@ -1,7 +1,7 @@
 import { CheckIcon, XMarkIcon } from "@heroicons/react/20/solid";
 import { ArrowDownCircleIcon, ArrowUpCircleIcon } from "@heroicons/react/24/outline";
 import { Form, useLocation, useNavigation } from "@remix-run/react";
-import { uiComponent } from "@team-plain/typescript-sdk";
+import { uiComponent } from "@team-plain/ui-components";
 import {
   type AddOnPricing,
   type FreePlanDefinition,
@@ -95,6 +95,8 @@ export const action = dashboardAction(
               email: user.email,
               name: user.name ?? "",
               title: "Plan cancelation feedback",
+              organizationId: organization.id,
+              organizationName: organization.title,
               components: [
                 uiComponent.text({
                   text: `${user.name} (${user.email}) just canceled their plan.`,

apps/webapp/app/utils/plain.server.ts

@@ -1,5 +1,5 @@
-import type { uiComponent } from "@team-plain/typescript-sdk";
-import { PlainClient } from "@team-plain/typescript-sdk";
+import { PlainClient } from "@team-plain/graphql";
+import type { uiComponent } from "@team-plain/ui-components";
 import { env } from "~/env.server";
 
 type Input = {
@@ -9,9 +9,20 @@ type Input = {
   title: string;
   components: ReturnType<typeof uiComponent.text>[];
   labelTypeIds?: string[];
+  organizationId?: string;
+  organizationName?: string;
 };
 
-export async function sendToPlain({ userId, email, name, title, components, labelTypeIds }: Input) {
+export async function sendToPlain({
+  userId,
+  email,
+  name,
+  title,
+  components,
+  labelTypeIds,
+  organizationId,
+  organizationName,
+}: Input) {
   if (!env.PLAIN_API_KEY) {
     return;
   }
@@ -20,43 +31,93 @@ export async function sendToPlain({ userId, email, name, title, components, labe
     apiKey: env.PLAIN_API_KEY,
   });
 
-  const upsertCustomerRes = await client.upsertCustomer({
-    identifier: {
-      emailAddress: email,
-    },
-    onCreate: {
-      externalId: userId,
-      fullName: name,
-      email: {
-        email: email,
-        isVerified: true,
+  // Best-effort support side-effect. Only transport/auth errors throw (caught below); business
+  // and validation failures come back in each mutation's `result.error`, so we check those inline.
+  try {
+    const upsertCustomerRes = await client.mutation.upsertCustomer({
+      input: {
+        identifier: {
+          emailAddress: email,
+        },
+        onCreate: {
+          externalId: userId,
+          fullName: name,
+          email: {
+            email: email,
+            isVerified: true,
+          },
+        },
+        onUpdate: {
+          externalId: { value: userId },
+          fullName: { value: name },
+          email: {
+            email: email,
+            isVerified: true,
+          },
+        },
       },
-    },
-    onUpdate: {
-      externalId: { value: userId },
-      fullName: { value: name },
-      email: {
-        email: email,
-        isVerified: true,
-      },
-    },
-  });
+    });
 
-  if (upsertCustomerRes.error) {
-    console.error("Failed to upsert customer in Plain", upsertCustomerRes.error);
-    return;
-  }
+    if (upsertCustomerRes.error || !upsertCustomerRes.customer?.id) {
+      console.error("Failed to upsert customer in Plain", upsertCustomerRes.error);
+      return;
+    }
+    const customerId = upsertCustomerRes.customer.id;
 
-  const createThreadRes = await client.createThread({
-    customerIdentifier: {
-      customerId: upsertCustomerRes.data.customer.id,
-    },
-    title: title,
-    components: components,
-    labelTypeIds,
-  });
+    // Attribute the thread to the org so support data can be rolled up per org: the tenant is
+    // keyed by externalId = org_id. Isolated in its own try/catch, and the thread's
+    // tenantIdentifier is gated on success — so a tenant failure (e.g. an API key without
+    // tenant scope) downgrades to "no attribution" instead of dropping the thread. The
+    // customer's own externalId (User.id, used by the customer cards + impersonation link) is
+    // left untouched.
+    let tenantLinked = false;
+    if (organizationId) {
+      try {
+        const tenantRes = await client.mutation.upsertTenant({
+          input: {
+            identifier: { externalId: organizationId },
+            externalId: organizationId,
+            name: organizationName ?? organizationId,
+          },
+        });
+        // Only link + attribute if the tenant genuinely upserted — a mutation error comes back in
+        // `.error` (not thrown), and stamping the thread with a tenant that wasn't created would
+        // make createThread itself fail.
+        const membershipRes = tenantRes.error
+          ? undefined
+          : await client.mutation.addCustomerToTenants({
+              input: {
+                customerIdentifier: { customerId },
+                tenantIdentifiers: [{ externalId: organizationId }],
+              },
+            });
+        if (tenantRes.error) {
+          console.error("Failed to upsert Plain tenant", tenantRes.error);
+        } else if (membershipRes?.error) {
+          console.error("Failed to link Plain customer to tenant", membershipRes.error);
+        } else {
+          tenantLinked = true;
+        }
+      } catch (error) {
+        console.error("Failed to link Plain customer to org tenant", error);
+      }
+    }
 
-  if (createThreadRes.error) {
-    console.error("Failed to create thread in Plain", createThreadRes.error);
+    const threadRes = await client.mutation.createThread({
+      input: {
+        customerIdentifier: {
+          customerId,
+        },
+        title: title,
+        components: components,
+        labelTypeIds,
+        tenantIdentifier: tenantLinked ? { externalId: organizationId } : undefined,
+      },
+    });
+    if (threadRes.error) {
+      console.error("Failed to create Plain thread", threadRes.error);
+    }
+  } catch (error) {
+    console.error("Failed to send to Plain", error);
   }
 }

apps/webapp/app/v3/services/setBranchesAddOn.server.ts

@@ -3,7 +3,7 @@ import { tryCatch } from "@trigger.dev/core/utils";
 import { setBranchesAddOn } from "~/services/platform.v3.server";
 import assertNever from "assert-never";
 import { sendToPlain } from "~/utils/plain.server";
-import { uiComponent } from "@team-plain/typescript-sdk";
+import { uiComponent } from "@team-plain/ui-components";
 
 type Input = {
   userId: string;
@@ -74,6 +74,8 @@ export class SetBranchesAddOnService extends BaseService {
             email: user.email,
             name: user.name ?? user.displayName ?? user.email,
             title: `Preview branches quota request: ${amount}`,
+            organizationId,
+            organizationName: organization?.title,
             components: [
               uiComponent.text({
                 text: `Org: ${organization?.title} (${organizationId})`,

apps/webapp/app/v3/services/setConcurrencyAddOn.server.ts

@@ -4,7 +4,7 @@ import { tryCatch } from "@trigger.dev/core";
 import { setConcurrencyAddOn } from "~/services/platform.v3.server";
 import assertNever from "assert-never";
 import { sendToPlain } from "~/utils/plain.server";
-import { uiComponent } from "@team-plain/typescript-sdk";
+import { uiComponent } from "@team-plain/ui-components";
 
 type Input = {
   userId: string;
@@ -106,6 +106,8 @@ export class SetConcurrencyAddOnService extends BaseService {
             email: user.email,
             name: user.name ?? user.displayName ?? user.email,
             title: `Concurrency quota request: ${totalExtraConcurrency}`,
+            organizationId,
+            organizationName: organization?.title,
             components: [
               uiComponent.text({
                 text: `Org: ${organization?.title} (${organizationId})`,

apps/webapp/app/v3/services/setSchedulesAddOn.server.ts

@@ -3,7 +3,7 @@ import { tryCatch } from "@trigger.dev/core/utils";
 import { setSchedulesAddOn } from "~/services/platform.v3.server";
 import assertNever from "assert-never";
 import { sendToPlain } from "~/utils/plain.server";
-import { uiComponent } from "@team-plain/typescript-sdk";
+import { uiComponent } from "@team-plain/ui-components";
 
 type Input = {
   userId: string;
@@ -74,6 +74,8 @@ export class SetSchedulesAddOnService extends BaseService {
             email: user.email,
             name: user.name ?? user.displayName ?? user.email,
             title: `Schedules quota request: ${amount}`,
+            organizationId,
+            organizationName: organization?.title,
             components: [
               uiComponent.text({
                 text: `Org: ${organization?.title} (${organizationId})`,

apps/webapp/app/v3/services/setSeatsAddOn.server.ts

@@ -3,7 +3,7 @@ import { tryCatch } from "@trigger.dev/core/utils";
 import { setSeatsAddOn } from "~/services/platform.v3.server";
 import assertNever from "assert-never";
 import { sendToPlain } from "~/utils/plain.server";
-import { uiComponent } from "@team-plain/typescript-sdk";
+import { uiComponent } from "@team-plain/ui-components";
 
 type Input = {
   userId: string;
@@ -74,6 +74,8 @@ export class SetSeatsAddOnService extends BaseService {
             email: user.email,
             name: user.name ?? user.displayName ?? user.email,
             title: `Seats quota request: ${amount}`,
+            organizationId,
+            organizationName: organization?.title,
             components: [
               uiComponent.text({
                 text: `Org: ${organization?.title} (${organizationId})`,

apps/webapp/package.json

@@ -112,7 +112,8 @@
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.0.4",
-    "@team-plain/typescript-sdk": "^3.5.0",
+    "@team-plain/graphql": "^1.3.0",
+    "@team-plain/ui-components": "^5.0.0",
     "@trigger.dev/companyicons": "^1.5.35",
     "@trigger.dev/core": "workspace:*",
     "@trigger.dev/database": "workspace:*",