OUT-2531 | Update default client home content

defaultState.ts

@@ -1,2 +1,93 @@
-export const defaultState = `<notification_widget></notification_widget><callout>This page is a sample of what you can include in your Home app. Edit the content and add a banner image to give your __client__ a personalized experience when they open up the __client__  portal. <br><br>The Tasks widget will show __client__ notifications for actions they have to take (in real-time), if they have any.</callout><h1>Welcome, <span data-type="mention" class="autofill-pill" data-id="{{__client__.givenName}}">{{__client__.givenName}}</span></h1><p>Welcome to Assembly, a full-service marketing agency that helps businesses increase their brand awareness, attract new customers, and grow their bottom line. We specialize in crafting unique and effective marketing strategies that align with your business goals and help you stand out in a crowded marketplace.</p><p></p><p>Here are our Working Hours:</p><table><tbody><tr><th class="font-bold" colspan="1" rowspan="1"><p>Days</p></th><th class="font-bold" colspan="1" rowspan="1"><p>Hours (EST)</p></th></tr><tr><td colspan="1" rowspan="1"><p>M-F</p></td><td colspan="1" rowspan="1"><p>9AM - 6PM</p></td></tr><tr><td colspan="1" rowspan="1"><p>Sat</p></td><td colspan="1" rowspan="1"><p>10AM - 5PM</p></td></tr><tr><td colspan="1" rowspan="1"><p>Sun</p></td><td colspan="1" rowspan="1"><p>Closed</p></td></tr></tbody></table><h1>How to use the Assembly portal</h1><h3>💬&nbsp;Messages</h3><p>Chat with the Assembly team or ask questions — make sure to check the Helpdesk first for some FAQs!</p><h3>📂&nbsp;Files</h3><p>Use this tab to share files with the Assembly team — you can upload any required documents and assets here. This is where we will store files for reference in the future.</p><h3>📜&nbsp;Contracts</h3><p>View and sign contracts shared by our team.</p><h3>📤&nbsp;Forms</h3><p>We’ve already shared our onboarding form with you. Please fill out the form and include all relevant information, including your brand guidelines and company details.</p><h3>💵&nbsp;Billing</h3><p>Here you will see active subscription and invoices once they’ve been assigned to you.</p><h3>🆘&nbsp;Helpdesk</h3><p>Access a collection of helpful articles we have put together.</p><h3>📊&nbsp;Analytics</h3><p>View custom analytics reports for your business.</p><h3>🌇&nbsp;Media Gallery</h3><p>See any visual and design work that the Assembly team has completed.</p><h3>📈&nbsp;Project status</h3><p>Track the projects we’re working on for you.</p>`;
+const brandNameAutofill = `
+  <span
+    data-type="mention"
+    class="autofill-pill"
+    data-id="{{workspace.brandName}}"
+  >
+    {{workspace.brandName}}
+  </span>
+`
 
+export const defaultState = `
+<notification_widget></notification_widget>
+
+<callout>
+  This page is an example. Edit the content and add a banner image in your
+  Client Home app to give your clients a personalized experience when they open
+  up the client portal.
+  <br /><br />
+  The action items widget will show client notifications for actions they have
+  to take (in real-time), if they have any.
+</callout>
+
+<h2>
+  Welcome, 
+  <span
+    data-type="mention"
+    class="autofill-pill"
+    data-id="{{__client__.givenName}}"
+    >{{__client__.givenName}}
+  </span>
+</h2>
+<p></p>
+
+<p>Welcome to your ${brandNameAutofill} client portal.</p>
+
+<p>
+  This portal is your all-in-one experience while working with ${brandNameAutofill} where you can view and complete important tasks and connect with our team.
+</p>
+<p></p>
+
+<p>Here are our Working Hours:</p>
+
+<table>
+  <tbody>
+    <tr>
+      <th class="font-bold" colspan="1" rowspan="1">
+        <p>Days</p>
+      </th>
+      <th class="font-bold" colspan="1" rowspan="1">
+        <p>Hours (EST)</p>
+      </th>
+    </tr>
+    <tr>
+      <td colspan="1" rowspan="1">
+        <p>M-F</p>
+      </td>
+      <td colspan="1" rowspan="1">
+        <p>9AM - 6PM</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="1" rowspan="1">
+        <p>Sat</p>
+      </td>
+      <td colspan="1" rowspan="1">
+        <p>9AM - 6PM</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="1" rowspan="1">
+        <p>Sun</p>
+      </td>
+      <td colspan="1" rowspan="1">
+        <p>Closed</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<h2>How to use the ${brandNameAutofill} portal</h2>
+<p></p>
+
+<p>
+  Save the link to this portal. If you miss an email notification, you can
+  always log in and check this portal for reminders on important tasks and
+  actions required. Explore the options on your left sidebar. We may add more
+  options tailored to your experience.
+</p>
+<p></p>
+
+<h3>💬&nbsp;Messages</h3>
+<p>Questions? Chat with the {workspace.brandName} team and get answers.</p>
+`

src/app/client-preview/page.tsx

@@ -169,7 +169,10 @@ export default async function ClientPreviewPage({
     company: company?.name,
   }
 
-  const htmlContent = template({ client })
+  const htmlContent = template({
+    client,
+    workspace: { brandName: workspace.brandName },
+  })
 
   const bannerImgUrl = !defaultSetting
     ? defaultBannerImagePath

src/app/components/EditorInterface.tsx

@@ -32,7 +32,7 @@
 import TableRow from '@tiptap/extension-table-row'
 import Text from '@tiptap/extension-text'
 import Underline from '@tiptap/extension-underline'
 import Handlebars from 'handlebars'
 import { Scrollbars } from 'react-custom-scrollbars'
 import { Toaster } from 'react-hot-toast'
 
@@ -200,9 +200,10 @@
           ),
         ),
       )
-      const c = template(appData)
+      const htmlContent = template(appData)
+
       setTimeout(() => {
-        editor?.chain().focus().setContent(c).run()
+        editor?.chain().focus().setContent(htmlContent).run()
         editor?.chain().focus().setTextSelection(0).run()
       })
     } else {

src/app/components/SideBarInterface.tsx

@@ -6,7 +6,7 @@ import AutofillFields from '@/components/autofillFields/AutofillFields'
 import ColorPicker from '@/components/colorPicker/ColorPicker'
 import DisplayTasksToggle from '@/components/display/DisplayTasksToggle'
 import { useAppState } from '@/hooks/useAppState'
-import { CompanyResponse } from '@/types/common'
+import { CompanyResponse, WorkspaceInfo } from '@/types/common'
 import { IClient, ICustomField } from '@/types/interfaces'
 import { flattenClients } from '@/utils/api'
 import {
@@ -23,13 +23,15 @@ interface IEditorInterface {
   displayTasks: boolean
   clientList: IClient[]
   companies: CompanyResponse[]
+  workspace: WorkspaceInfo
   customFields: ICustomField[]
 }
 
 const SideBarInterface: FC<IEditorInterface> = ({
   displayTasks,
   clientList,
   companies,
+  workspace,
   customFields,
 }) => {
   const sideBarRef = useRef<HTMLDivElement | null>(null)
@@ -96,7 +98,8 @@ const SideBarInterface: FC<IEditorInterface> = ({
     appState?.setClientList(clientList)
     appState?.setCompanies(companies)
     appState?.setCustomFields(customFields)
-  }, [displayTasks, clientList, companies, customFields])
+    appState?.setBrandName(workspace.brandName)
+  }, [displayTasks, clientList, companies, customFields, workspace])
 
   useEffect(() => {
     ;(async () => {

src/app/layout.tsx

@@ -24,12 +24,12 @@ export default async function RootLayout({
               var t = ev.target;
               if (t && t.tagName === 'IFRAME') {
                 ev.stopImmediatePropagation();
-                console.log('[iframe load error]', t.src);
+                console.info('[iframe load error]', t.src);
                 return;
               }
               if (ev instanceof ErrorEvent && ev.message === 'Script error.') {
                 ev.stopImmediatePropagation();
-                console.log('[iframe script error]', ev.filename);
+                console.info('[iframe script error]', ev.filename);
                 return;
               }
             }, true);

src/app/page.tsx

@@ -117,6 +117,7 @@ export default async function Page({
               displayTasks={settings?.displayTasks}
               clientList={clientList}
               companies={companies}
+              workspace={workspace}
               customFields={customFields}
             />
           </div>

src/components/tiptap/autofieldSelector/autofillMenuSuggestion.ts

@@ -41,7 +41,6 @@ export const autofillMenuSuggestion = {
       ...customFields.map((el: any) => `{{__client__.${el.key}}}`),
     ]
       .map((text) => prepareCustomLabel(text, appContextData?.customLabels))
-
       .filter((item: any) =>
         item
           ?.toLowerCase()

src/components/tiptap/iframe/EmbedComponent.tsx

@@ -68,7 +68,7 @@ export const EmbedComponent = (props: any) => {
           height='100%'
           onError={(e) => {
             e.stopPropagation()
-            console.log('[iframe error]:', e)
+            console.info('[iframe error]:', e)
           }}
         />
       </div>

src/components/tiptap/notificationWidget/NotificationWidget.tsx

@@ -160,6 +160,7 @@ export const NotificationWidget = () => {
               },
             )}
           </Stack>
+
           <Box
             sx={{
               position: 'absolute',

src/context/index.tsx

@@ -36,6 +36,7 @@ export interface IAppState {
   font: string
   tasks?: number
   customLabels?: CustomLabels
+  brandName?: string
 }
 
 export interface IAppContext {
@@ -64,6 +65,7 @@ export interface IAppContext {
   setFont: (font: string) => void
   setTasks: (tasks: number) => void
   setCustomLabels: (customLabels?: CustomLabels) => void
+  setBrandName: (brandName?: string | null) => void
   /* eslint-enable no-unused-vars */
 }
 
@@ -100,6 +102,7 @@ export const AppContextProvider: FC<IAppCoreProvider> = ({ children }) => {
     font: 'Inter', //default font
     tasks: undefined,
     customLabels: undefined,
+    brandName: '',
   })
 
   useEffect(() => {
@@ -203,6 +206,10 @@ export const AppContextProvider: FC<IAppCoreProvider> = ({ children }) => {
   const setCustomLabels = (customLabels?: CustomLabels) =>
     setState((prev) => ({ ...prev, customLabels }))
 
+  const setBrandName = (brandName?: string | null) => {
+    setState((prev) => ({ ...prev, brandName: brandName || '' }))
+  }
+
   return (
     <AppContext.Provider
       value={{
@@ -230,6 +237,7 @@ export const AppContextProvider: FC<IAppCoreProvider> = ({ children }) => {
         setFont,
         setTasks,
         setCustomLabels,
+        setBrandName,
       }}
     >
       <AppDataProvider>{children}</AppDataProvider>

src/hooks/useAppData.tsx

@@ -107,11 +107,13 @@ export const AppDataProvider = ({ children }: PropsWithChildren) => {
       form,
       contract,
       tasks,
+      workspace: { brandName: appState?.appState.brandName || '' },
     }
   }, [
     appState?.appState.selectedClient,
     appState?.appState.selectedClientCompanyName,
     appState?.appState.notifications,
+    appState?.appState.brandName,
   ])
 
   return (

src/types/common.ts

@@ -125,5 +125,6 @@ export type CustomLabels = z.infer<typeof CustomLabelsSchema>
 export const WorkspaceInfoSchema = z.object({
   font: z.string(),
   labels: CustomLabelsSchema,
+  brandName: z.string().nullish(),
 })
 export type WorkspaceInfo = z.infer<typeof WorkspaceInfoSchema>

src/utils/constants.ts

@@ -1,4 +1,5 @@
 export const staticAutofillValues = [
+  '{{workspace.brandName}}',
   '{{__client__.givenName}}',
   '{{__client__.familyName}}',
   '{{__client__.email}}',

src/utils/customLabels.ts

@@ -45,7 +45,7 @@ export const prepareCustomLabel = (
     isClientMode?: boolean
   },
 ) => {
-  if (!text) return text
+  if (!text || !text.includes('__client__')) return text
 
   let result = text