update support ticket to support categories, project, and target options

packages/services/api/src/modules/audit-logs/providers/audit-logs-types.ts

@@ -196,6 +196,9 @@ export const AuditLogModel = z.union([
     metadata: z.object({
       ticketId: z.string(),
       ticketSubject: z.string(),
+      ticketCategory: z.string().optional(),
+      ticketProject: z.string().optional(),
+      ticketTarget: z.string().optional(),
       ticketDescription: z.string(),
       ticketPriority: z.string(),
     }),

packages/services/api/src/modules/support/module.graphql.ts

@@ -30,6 +30,9 @@ export default gql`
 
   input SupportTicketCreateInput {
     organizationSlug: String!
+    projectId: String
+    targetId: String
+    category: SupportCategoryType
     subject: String!
     description: String!
     priority: SupportTicketPriority!
@@ -95,6 +98,13 @@ export default gql`
     fromSupport: Boolean!
   }
 
+  enum SupportCategoryType {
+    TECHNICAL_ISSUE
+    BILLING
+    COMPLIANCE
+    OTHER
+  }
+
   enum SupportTicketPriority {
     NORMAL
     HIGH

packages/services/api/src/modules/support/providers/support-manager.ts

@@ -1,7 +1,12 @@
 import { createHash } from 'node:crypto';
 import { Inject, Injectable, Scope } from 'graphql-modules';
 import { z } from 'zod';
-import { Organization, SupportTicketPriority, SupportTicketStatus } from '../../../shared/entities';
+import {
+  Organization,
+  SupportCategory,
+  SupportTicketPriority,
+  SupportTicketStatus,
+} from '../../../shared/entities';
 import { atomic } from '../../../shared/helpers';
 import { AuditLogRecorder } from '../../audit-logs/providers/audit-log-recorder';
 import { Session } from '../../auth/lib/authz';
@@ -23,6 +28,7 @@ export const SupportTicketStatusAPIModel = z.enum([
 
 export const SupportTicketPriorityModel = z.nativeEnum(SupportTicketPriority);
 export const SupportTicketStatusModel = z.nativeEnum(SupportTicketStatus);
+export const SupportTicketCategoryModel = z.nativeEnum(SupportCategory).optional();
 
 const SupportTicketModel = z.object({
   id: z.number(),
@@ -45,6 +51,9 @@ const SupportTicketModel = z.object({
 
     return SupportTicketStatusModel.parse(value);
   }),
+  category: SupportTicketCategoryModel,
+  project: z.string().optional(),
+  target: z.string().optional(),
   created_at: z.string(),
   updated_at: z.string(),
   subject: z.string(),
@@ -80,6 +89,9 @@ const SupportTicketCommentListModel = z.object({
 
 const SupportTicketCreateRequestModel = z.object({
   organizationId: z.string(),
+  category: SupportTicketCategoryModel,
+  project: z.string().optional(),
+  target: z.string().optional(),
   subject: z.string().min(3),
   description: z.string().min(3),
   priority: SupportTicketPriorityModel,
@@ -508,6 +520,9 @@ export class SupportManager {
     organizationId: string;
     subject: string;
     description: string;
+    category?: SupportCategory;
+    project?: string;
+    target?: string;
     priority: z.infer<typeof SupportTicketPriorityModel>;
   }) {
     this.logger.info(
@@ -549,6 +564,9 @@ export class SupportManager {
           subject: input.subject,
           description: input.description,
           priority: input.priority,
+          category: input.category,
+          project: input.project,
+          target: input.target,
           // version is here to cache bust the idempotency key.
           version: 'v2',
         }),
@@ -560,6 +578,12 @@ export class SupportManager {
     });
     const customerType = this.resolveCustomerType(organization);
 
+    const formattedBody = ` "Category: " + ${request.data.category ? request.data.category : "Not Selected"}\n\n
+        "Project: " + ${request.data.project ? request.data.project : "Not Selected"}\n\n
+        "Target: " + ${request.data.target ? request.data.target : "Not Selected"}\n\n
+        "Description: " + ${request.data.description}
+      `;
+
     const response = await this.httpClient
       .post(`https://${this.config.subdomain}.zendesk.com/api/v2/tickets`, {
         username: this.config.username,
@@ -570,7 +594,7 @@ export class SupportManager {
             submitter_id: parseInt(internalUserId, 10),
             requester_id: parseInt(internalUserId, 10),
             comment: {
-              body: request.data.description,
+              body: formattedBody,
             },
             priority: request.data.priority,
             subject: request.data.subject,
@@ -598,6 +622,9 @@ export class SupportManager {
       metadata: {
         ticketDescription: input.description,
         ticketPriority: input.priority,
+        ...(input.category ? { ticketCategory: input.category } : {}),
+        ...(input.project ? { ticketProject: input.project } : {}),
+        ...(input.target ? { ticketTarget: input.target } : {}),
         ticketId: String(response.ticket.id),
         ticketSubject: input.subject,
       },

packages/services/api/src/shared/entities.ts

@@ -75,6 +75,13 @@ export enum SupportTicketPriority {
   URGENT = 'urgent',
 }
 
+export enum SupportCategory {
+  Billing = 'BILLING',
+  Compliance = 'COMPLIANCE',
+  Other = 'OTHER',
+  TechnicalIssue = 'TECHNICAL_ISSUE',
+}
+
 export enum SupportTicketStatus {
   OPEN = 'open',
   SOLVED = 'solved',

packages/web/app/src/components/layouts/project-selector.tsx

@@ -1,6 +1,8 @@
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
 import { FragmentType, graphql, useFragment } from '@/gql';
+import { SelectValue } from '@radix-ui/react-select';
 import { Link, useRouter } from '@tanstack/react-router';
+import { SetStateAction } from 'react';
 
 const ProjectSelector_OrganizationConnectionFragment = graphql(`
   fragment ProjectSelector_OrganizationConnectionFragment on OrganizationConnection {
@@ -21,7 +23,23 @@ export function ProjectSelector(props: {
   currentOrganizationSlug: string;
   currentProjectSlug: string;
   organizations: FragmentType<typeof ProjectSelector_OrganizationConnectionFragment> | null;
+  onValueChange?: (id: string) => void;
+  optional?: boolean;
+  showOrganization?: boolean;
 }) {
+  const optional = typeof props.optional !== 'undefined' ? props.optional : false;
+  const showOrganization =
+    typeof props.showOrganization !== 'undefined' ? props.showOrganization : true;
+  const onValueChangeFunc: (id: string) => void =
+    typeof props.onValueChange !== 'undefined' ? props.onValueChange : (id: string) => {
+      void router.navigate({
+        to: '/$organizationSlug/$projectSlug',
+        params: {
+          organizationSlug: props.currentOrganizationSlug,
+          projectSlug: id,
+        },
+      })
+    };
   const router = useRouter();
 
   const organizations = useFragment(
@@ -38,47 +56,57 @@ export function ProjectSelector(props: {
 
   return (
     <>
-      {currentOrganization ? (
-        <Link
-          to="/$organizationSlug"
-          params={{ organizationSlug: props.currentOrganizationSlug }}
-          className="max-w-[200px] shrink-0 truncate font-medium"
-        >
-          {currentOrganization.slug}
-        </Link>
+      {showOrganization ? (
+        currentOrganization ? (
+          <Link
+            to="/$organizationSlug"
+            params={{ organizationSlug: props.currentOrganizationSlug }}
+            className="max-w-[200px] shrink-0 truncate font-medium"
+          >
+            {currentOrganization.slug}
+          </Link>
+        ) : (
+          <div className="h-5 w-48 max-w-[200px] animate-pulse rounded-full bg-gray-800" />
+        )
       ) : (
-        <div className="h-5 w-48 max-w-[200px] animate-pulse rounded-full bg-gray-800" />
+        ''
       )}
-      {projects?.length && currentProject ? (
+
+      {(projects?.length && currentProject) || optional ? (
         <>
-          <div className="italic text-gray-500">/</div>
+          {showOrganization ? <div className="italic text-gray-500">/</div> : null}
           <Select
             value={props.currentProjectSlug}
-            onValueChange={id => {
-              void router.navigate({
-                to: '/$organizationSlug/$projectSlug',
-                params: {
-                  organizationSlug: props.currentOrganizationSlug,
-                  projectSlug: id,
-                },
-              });
-            }}
+            onValueChange={onValueChangeFunc}
           >
             <SelectTrigger variant="default" data-cy="project-picker-trigger">
               <div className="font-medium" data-cy="project-picker-current">
-                {currentProject.slug}
+                {optional ? <SelectValue placeholder="Pick an option" /> : (currentProject?.slug ?? '')}  
               </div>
             </SelectTrigger>
             <SelectContent>
-              {projects.map(project => (
+              {optional ? (
                 <SelectItem
-                  key={project.slug}
-                  value={project.slug}
-                  data-cy={`project-picker-option-${project.slug}`}
+                  key={'empty'}
+                  value={'empty'}
+                  data-cy={`project-picker-option-Unassigned`}
                 >
-                  {project.slug}
+                  Unassigned
                 </SelectItem>
-              ))}
+              ) : null
+              }
+              {projects ? (
+                projects.map(project => (
+                  <SelectItem
+                    key={project.slug}
+                    value={project.id}
+                    data-cy={`project-picker-option-${project.slug}`}
+                  >
+                    {project.slug}
+                  </SelectItem>
+                ))
+              ) : null
+              }
             </SelectContent>
           </Select>
         </>