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

codegen.mts

@@ -41,6 +41,7 @@ const config: CodegenConfig = {
             OrganizationAccessScope: '../modules/auth/providers/scopes#OrganizationAccessScope',
             SupportTicketPriority: '../shared/entities#SupportTicketPriority',
             SupportTicketStatus: '../shared/entities#SupportTicketStatus',
+            SupportCategoryType: '../shared/entities#SupportCategoryType',
           },
           resolversNonOptionalTypename: {
             interfaceImplementingType: true,

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.mappers.ts

@@ -1,4 +1,9 @@
-import { SupportTicketPriority, SupportTicketStatus } from '../../shared/entities';
+import {
+  SupportCategoryType,
+  SupportTicketPriority,
+  SupportTicketStatus,
+} from '../../shared/entities';
 
 export type SupportTicketPriorityMapper = SupportTicketPriority;
 export type SupportTicketStatusMapper = SupportTicketStatus;
+export type SupportCategoryTypeMapper = SupportCategoryType;

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,
+  SupportCategoryType,
+  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(SupportCategoryType);
 
 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?: z.infer<typeof SupportTicketCategoryModel>;
+    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/modules/support/resolvers/Mutation/supportTicketCreate.ts

@@ -11,6 +11,7 @@ export const supportTicketCreate: NonNullable<MutationResolvers['supportTicketCr
   const response = await injector.get(SupportManager).createTicket({
     organizationId,
     ...input,
+    category: input.category ?? undefined,
   });
 
   return response;

packages/services/api/src/modules/support/resolvers/SupportCategoryType.ts

@@ -0,0 +1,9 @@
+import { SupportCategoryType as SupportCategoryTypeEnum } from '../../../shared/entities';
+import type { SupportCategoryTypeResolvers } from './../../../__generated__/types';
+
+export const SupportCategoryType: SupportCategoryTypeResolvers = {
+  TECHNICAL_ISSUE: SupportCategoryTypeEnum.TECHNICAL_ISSUE,
+  BILLING: SupportCategoryTypeEnum.BILLING,
+  COMPLIANCE: SupportCategoryTypeEnum.COMPLIANCE,
+  OTHER: SupportCategoryTypeEnum.OTHER,
+};

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

@@ -75,6 +75,13 @@ export enum SupportTicketPriority {
   URGENT = 'urgent',
 }
 
+export enum SupportCategoryType {
+  BILLING = 'billing',
+  COMPLIANCE = 'compliance',
+  OTHER = 'other',
+  TECHNICAL_ISSUE = 'technical_issue',
+}
+
 export enum SupportTicketStatus {
   OPEN = 'open',
   SOLVED = 'solved',

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

@@ -1,5 +1,6 @@
 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';
 
 const ProjectSelector_OrganizationConnectionFragment = graphql(`
@@ -23,9 +24,25 @@ export function ProjectSelector(props: {
   currentOrganizationSlug: string;
   currentProjectSlug: string;
   organizations: FragmentType<typeof ProjectSelector_OrganizationConnectionFragment> | null;
+  onValueChange?: ((value: string) => void) | undefined;
+  optional?: boolean;
+  showOrganization?: boolean;
 }) {
   const router = useRouter();
-
+  const optional = typeof props.optional !== 'undefined' ? props.optional : false;
+  const showOrganization =
+    typeof props.showOrganization !== 'undefined' ? props.showOrganization : true;
+  const defaultFunc = (id: string) => {
+    void router.navigate({
+      to: '/$organizationSlug/$projectSlug',
+      params: {
+        organizationSlug: props.currentOrganizationSlug,
+        projectSlug: id,
+      },
+    });
+  };
+  const onValueChangeFunc =
+    typeof props.onValueChange !== 'undefined' ? props.onValueChange : defaultFunc;
   const organizations = useFragment(
     ProjectSelector_OrganizationConnectionFragment,
     props.organizations,
@@ -42,47 +59,51 @@ 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" />
+        ''
       )}
-      {projectEdges?.length && currentProject ? (
+      {(projectEdges?.length && currentProject) || optional ? (
         <>
-          <div className="italic text-gray-500">/</div>
-          <Select
-            value={props.currentProjectSlug}
-            onValueChange={id => {
-              void router.navigate({
-                to: '/$organizationSlug/$projectSlug',
-                params: {
-                  organizationSlug: props.currentOrganizationSlug,
-                  projectSlug: id,
-                },
-              });
-            }}
-          >
+          {showOrganization ? <div className="italic text-gray-500">/</div> : <></>}
+          <Select value={props.currentProjectSlug} 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>
-              {projectEdges.map(edge => (
-                <SelectItem
-                  key={edge.node.slug}
-                  value={edge.node.slug}
-                  data-cy={`project-picker-option-${edge.node.slug}`}
-                >
-                  {edge.node.slug}
+              {optional ? (
+                <SelectItem key="empty" value="empty" data-cy="project-picker-option-Unassigned">
+                  Unassigned
                 </SelectItem>
-              ))}
+              ) : null}
+              {projectEdges?.map(edge => {
+                return (
+                  <SelectItem
+                    key={edge.node.slug}
+                    value={edge.node.slug}
+                    data-cy={`project-picker-option-${edge.node.slug}`}
+                  >
+                    {edge.node.slug}
+                  </SelectItem>
+                );
+              })}
             </SelectContent>
           </Select>
         </>