OUT-3392 | Action items do not reference updated app names

.env.example

@@ -2,6 +2,9 @@
 ASSEMBLY_API_KEY=
 TASKS_ASSEMBLY_API_KEY=
 TASKS_APP_ID= # Remains unchanged for dev
+FORMS_APP_ID=
+CONTRACTS_APP_ID=
+INVOICES_APP_ID=
 
 COPILOT_DEBUG=true
 BLOB_READ_WRITE_TOKEN= # Blob rw token for old client home's vercel blob store

src/app/api/workspace/app-display-names/route.ts

@@ -0,0 +1,14 @@
+import AssemblyClient from '@assembly/assembly-client'
+import { authenticateHeaders } from '@auth/lib/authenticate'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import type { APIResponse } from '@/app/types'
+import { withErrorHandler } from '@/lib/with-error-handler'
+
+export const GET = withErrorHandler(async (req: NextRequest): Promise<NextResponse<APIResponse>> => {
+  const user = authenticateHeaders(req.headers)
+
+  const assembly = new AssemblyClient(z.string().parse(user.token))
+  const displayNames = await assembly.getAppDisplayNames()
+  return NextResponse.json({ data: displayNames })
+})

src/app/routes.ts

@@ -6,6 +6,7 @@ export const ROUTES = Object.freeze({
     settings: '/api/settings',
     workspace: '/api/workspace',
     tasksAppId: '/api/workspace/tasks-app-id',
+    appDisplayNames: '/api/workspace/app-display-names',
     media: '/api/media',
     image: '/api/media/image',
     upload: '/api/media/upload',
@@ -53,13 +54,15 @@ export const authorizedRoutes: Record<string, RouteRule[]> = {
     ROUTES.api.segment,
     ROUTES.api.segmentConfig,
     ROUTES.api.segmentStats,
+    ROUTES.api.appDisplayNames,
   ],
   clientUsers: [
     ROUTES.api.workspace,
     ROUTES.api.clientContext,
     ROUTES.client,
     ROUTES.api.listCustomFields,
     ROUTES.api.tasksAppId,
+    ROUTES.api.appDisplayNames,
     {
       path: ROUTES.api.settings,
       methods: ['GET'],

src/config/env.ts

@@ -7,6 +7,9 @@ const EnvSchema = z.object({
 
   TASKS_ASSEMBLY_API_KEY: z.string().min(1),
   TASKS_APP_ID: z.uuid(),
+  FORMS_APP_ID: z.string().min(1),
+  CONTRACTS_APP_ID: z.string().min(1),
+  INVOICES_APP_ID: z.string().min(1),
 
   VERCEL_ENV: z.enum(['production', 'preview', 'development']).optional(), // NOTE: We can add other custom environments here
   VERCEL_URL: z.url(),

src/features/action-items/components/action-item.tsx

@@ -17,6 +17,10 @@ interface ActionItemProps {
 export const ActionItem = ({ action, isLoading, mode, className, count }: ActionItemProps) => {
   const clientId = useAuthStore((s) => s.clientId)
   const tasksAppId = useViewStore((s) => s.tasksAppId)
+  const appDisplayNames = useViewStore((s) => s.appDisplayNames)
+
+  const displayLabel = appDisplayNames[action.key] ?? action.label
+  const displaySingularLabel = appDisplayNames[action.key] ?? action.singularLabel
 
   const handleClick = () => {
     if (!clientId) return
@@ -60,7 +64,7 @@ export const ActionItem = ({ action, isLoading, mode, className, count }: Action
             icon={action.icon}
             className="size-4 transition-transform duration-300 group-hover:scale-110 dark-bg:text-white"
           />
-          <h3 className="text-heading-md dark-bg:text-white">{action.label}</h3>
+          <h3 className="text-heading-md dark-bg:text-white">{displayLabel}</h3>
         </div>
         <Icon
           icon="ArrowRight"
@@ -78,7 +82,7 @@ export const ActionItem = ({ action, isLoading, mode, className, count }: Action
           fallbackValue={count ?? 0}
         />
         {mode === ViewMode.PREVIEW
-          ? ` ${count === 1 ? action.singularLabel?.toLocaleLowerCase() : action.label.toLocaleLowerCase()}`
+          ? ` ${count === 1 ? displaySingularLabel?.toLocaleLowerCase() : displayLabel.toLocaleLowerCase()}`
           : null}
       </div>
     </button>

src/features/action-items/components/actions-card.tsx

@@ -2,6 +2,7 @@ import { useViewStore, ViewMode } from '@editor/stores/viewStore'
 import { useNotificationCounts } from '@notification-counts/hooks/useNotificationCounts'
 import type { NotificationCountsDto } from '@notification-counts/notification-counts.dto'
 import { useEnabledActions } from '@settings/hooks/useEnabledActions'
+import { useAppDisplayNames } from '@/features/action-items/hooks/useAppDisplayNames'
 import { HandleBarTemplate } from '@/features/handlebar-template/components/handle-bar-template'
 import { cn } from '@/utils/tailwind'
 import { ActionItem } from './action-item'
@@ -14,7 +15,10 @@ export const ActionsCard = ({ readonly }: ActionCardProps) => {
   const { enabledActions } = useEnabledActions()
   const viewMode = useViewStore((store) => store.viewMode)
   const workspace = useViewStore((store) => store.workspace)
-  const { counts, isLoading } = useNotificationCounts()
+  const { counts, isLoading: isCountsLoading } = useNotificationCounts()
+  const { isLoading: isDisplayNamesLoading } = useAppDisplayNames()
+
+  const isLoading = isCountsLoading || isDisplayNamesLoading
 
   const isPreviewMode = readonly || viewMode === ViewMode.PREVIEW
 

src/features/action-items/hooks/useAppDisplayNames.ts

@@ -0,0 +1,20 @@
+import { useViewStore } from '@editor/stores/viewStore'
+import { useQuery } from '@tanstack/react-query'
+import { api } from '@/lib/core/axios.instance'
+
+export const useAppDisplayNames = () => {
+  const setAppDisplayNames = useViewStore((store) => store.setAppDisplayNames)
+
+  return useQuery({
+    queryKey: ['app-display-names'],
+    queryFn: async (): Promise<Record<string, string>> => {
+      const res = await api.get<{ data: Record<string, string> }>('/api/workspace/app-display-names')
+      setAppDisplayNames(res.data.data)
+      return res.data.data
+    },
+    refetchInterval: 0,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+  })
+}

src/features/editor/components/ClientEditorWrapper.tsx

@@ -5,6 +5,7 @@ import { useViewStore } from '@editor/stores/viewStore'
 import { useSettingsStore } from '@settings/providers/settings.provider'
 import { useQuery } from '@tanstack/react-query'
 import { ActionsCard } from '@/features/action-items/components/actions-card'
+import { useAppDisplayNames } from '@/features/action-items/hooks/useAppDisplayNames'
 import { Banner } from '@/features/banner'
 import { getImageUrl } from '@/features/banner/lib/utils'
 import { api } from '@/lib/core/axios.instance'
@@ -36,6 +37,8 @@ export const ClientEditorWrapper = () => {
     refetchOnWindowFocus: false,
   })
 
+  useAppDisplayNames()
+
   const isDark = isDarkColor(backgroundColor)
 
   return (

src/features/editor/components/EditorWrapper.tsx

@@ -10,6 +10,7 @@ import { useSegmentSettings } from '@settings/hooks/useSegmentSettings'
 import { useSettingsStore } from '@settings/providers/settings.provider'
 import { Activity } from 'react'
 import { ActionsCard } from '@/features/action-items/components/actions-card'
+import { useAppDisplayNames } from '@/features/action-items/hooks/useAppDisplayNames'
 import { Banner } from '@/features/banner'
 import { getImageUrl } from '@/features/banner/lib/utils'
 import { useSidebarStore } from '@/features/editor/stores/sidebarStore'
@@ -43,6 +44,7 @@ export function EditorWrapper({ className }: EditorWrapperProps) {
 
   useSegmentSettings()
   useAppControls()
+  useAppDisplayNames()
 
   return (
     <div

src/features/editor/components/Sidebar/Actions/useActions.tsx

@@ -1,9 +1,11 @@
 import { ActionDefinitions } from '@editor/components/Sidebar/Actions/constant'
+import { useViewStore } from '@editor/stores/viewStore'
 import { useSettingsStore } from '@settings/providers/settings.provider'
 
 export const useActions = () => {
   const actions = useSettingsStore((s) => s.actions)
   const setActions = useSettingsStore((s) => s.setActions)
+  const appDisplayNames = useViewStore((s) => s.appDisplayNames)
 
   const order = actions?.order ?? []
 
@@ -16,7 +18,7 @@ export const useActions = () => {
     .map((item) => {
       return {
         key: item.key,
-        label: item.label,
+        label: appDisplayNames[item.key] ?? item.label,
         icon: item.icon,
         checked: actions?.[item.key] ?? false,
         onChange: () => {

src/features/editor/stores/viewStore.ts

@@ -16,6 +16,7 @@ interface ViewStoreState {
   displayMode: DisplayMode
   workspace: WorkspaceResponse | null
   tasksAppId: string | null
+  appDisplayNames: Record<string, string>
   activeSegmentId: string | null
 }
 
@@ -24,6 +25,7 @@ interface ViewStoreAction {
   changeView: (data: Partial<ViewStoreState>) => void
   setWorkspace: (workspace: WorkspaceResponse) => void
   setTasksAppId: (id: string) => void
+  setAppDisplayNames: (names: Record<string, string>) => void
   setActiveSegmentId: (segmentId: string | null) => void
 }
 
@@ -32,6 +34,7 @@ const defaultState = {
   displayMode: DisplayMode.DESKTOP,
   workspace: null,
   tasksAppId: null,
+  appDisplayNames: {},
   activeSegmentId: null,
 } as const satisfies Partial<ViewStoreState>
 
@@ -42,6 +45,7 @@ export const useViewStore = create<ViewStore>()((set) => ({
   changeView: (data: Partial<ViewStoreState>) => set(data),
   setWorkspace: (workspace: WorkspaceResponse) => set({ workspace }),
   setTasksAppId: (tasksAppId: string | null) => set({ tasksAppId }),
+  setAppDisplayNames: (appDisplayNames: Record<string, string>) => set({ appDisplayNames }),
   setActiveSegmentId: (activeSegmentId: string | null) => set({ activeSegmentId }),
   reset: () => set(defaultState),
 }))

src/lib/assembly/assembly-client.ts

@@ -82,6 +82,28 @@ export default class AssemblyClient {
     return installedApps.find((app) => app.appId === appDeploymentId)?.id || null
   }
 
+  async _getAppDisplayNames(): Promise<Record<string, string>> {
+    const assembly = await this.assemblyPromise
+    const installedApps = AppInstallsResponseSchema.parse(await assembly.listAppInstalls())
+
+    const appDeploymentIds = {
+      forms: env.FORMS_APP_ID,
+      contracts: env.CONTRACTS_APP_ID,
+      invoices: env.INVOICES_APP_ID,
+      tasks: env.TASKS_APP_ID,
+    }
+
+    const displayNames: Record<string, string> = {}
+    for (const [key, deploymentId] of Object.entries(appDeploymentIds)) {
+      const app = installedApps.find((a) => a.appId === deploymentId)
+      if (app?.displayName) {
+        displayNames[key] = app.displayName
+      }
+    }
+
+    return displayNames
+  }
+
   async _createClient(requestBody: ClientCreateRequest, sendInvite: boolean = false): Promise<ClientResponse> {
     logger.info('AssemblyClient#_createClient', requestBody, sendInvite)
     const assembly = await this.assemblyPromise
@@ -240,4 +262,5 @@ export default class AssemblyClient {
   listCustomFields = this.wrapWithRetry(this._listCustomFields)
   listCustomFieldOptions = this.wrapWithRetry(this._listCustomFieldOptions)
   getAppId = this.wrapWithRetry(this._getAppId)
+  getAppDisplayNames = this.wrapWithRetry(this._getAppDisplayNames)
 }