Merge pull request #45 from copilot-platforms/OUT-172

Out 172 Toggle Display Tasks to OFF if IU deletes the notification widget
copilot-platforms · Mar 20, 2024 · 9008f98 · 9008f98
2 parents 2929288 + 77bac93
commit 9008f98
Show file tree

Hide file tree

Showing 14 changed files with 159 additions and 65 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+src/components/tiptap/notificationWidget/NotificationWidget.tsx
diff --git a/src/app/api/settings/route.ts b/src/app/api/settings/route.ts
@@ -50,19 +50,9 @@ export async function PUT(request: NextRequest) {
   // Add notification settings if displayTasks is enabled
   if (setting.data.displayTasks) {
     // Ensure default values are saved if user doesn't customize them on the frontend
-    if (!setting.data.notifications) {
-      // @ts-expect-error inject default notifications
-      newData.notifications = defaultNotificationOptions
-    } else {
-      try {
-        newData.notifications = JSON.parse(setting.data.notifications)
-      } catch {
-        return NextResponse.json(
-          { error: 'Failed to parse notifications' },
-          { status: 400 },
-        )
-      }
-    }
+    newData.notifications = !setting.data.notifications
+      ? defaultNotificationOptions
+      : setting.data.notifications
   }
   await settingService.save(newData)
 

diff --git a/src/app/client-preview/page.tsx b/src/app/client-preview/page.tsx
@@ -132,21 +132,23 @@ export default async function ClientPreviewPage({
         background: `${settings.backgroundColor}`,
       }}
     >
-      {settings?.bannerImage?.url && (
-        <Image
-          className='w-full'
-          src={bannerImgUrl || '/images/default_banner.png'}
-          alt='banner image'
-          width={0}
-          height={0}
-          sizes='100vw'
-          style={{
-            width: '100%',
-            height: '25vh',
-            objectFit: 'cover',
-          }}
-        />
-      )}
+      <Image
+        className='w-full'
+        src={
+          settings.bannerImage?.url
+            ? (bannerImgUrl as string)
+            : '/images/default_banner.png'
+        }
+        alt='banner image'
+        width={0}
+        height={0}
+        sizes='100vw'
+        style={{
+          width: '100%',
+          height: '25vh',
+          objectFit: 'cover',
+        }}
+      />
       <div
         className='px-14 py-350 max-w-xl'
         style={{

diff --git a/src/app/components/ClientPreview.tsx b/src/app/components/ClientPreview.tsx
@@ -36,6 +36,8 @@ import { AutofillExtension } from '@/components/tiptap/autofieldSelector/ext_aut
 import { NotificationWidgetExtension } from '@/components/tiptap/notificationWidget/ext_notification_widget'
 import { useAppState } from '@/hooks/useAppState'
 import { INotification, ISettings } from '@/types/interfaces'
+import { defaultBannerImagePath } from '@/utils/constants'
+import { defaultState } from '../../../defaultState'
 
 const ClientPreview = ({
   content,
@@ -112,18 +114,18 @@ const ClientPreview = ({
       CodeBlock,
       Code,
     ],
-    content: content,
+    content: content || defaultState,
   })
 
   useEffect(() => {
     if (editor && content) {
       const _settings = {
-        content: '',
+        content: defaultState,
         backgroundColor: '#ffffff',
         id: '',
         bannerImage: {
           id: '',
-          url: '',
+          url: defaultBannerImagePath,
           filename: '',
           contentType: '',
           size: 0,

diff --git a/src/app/components/EditorInterface.tsx b/src/app/components/EditorInterface.tsx
@@ -142,9 +142,18 @@ const EditorInterface = ({ settings, token }: IEditorInterface) => {
       CodeBlock,
       Code,
     ],
-    content: `
-         ${settings?.content || defaultState}
-`,
+    content: settings?.content || defaultState,
+    onUpdate: ({ editor }) => {
+      if (
+        !editor?.getHTML().includes('notification_widget') &&
+        appState?.appState?.displayTasks
+      ) {
+        appState?.toggleDisplayTasks({ override: false })
+      }
+      if (!appState?.appState.readOnly) {
+        appState?.setOriginalTemplate(editor?.getHTML() as string)
+      }
+    },
   })
 
   const [bannerImage, setBannerImage] = useState<string>('')
@@ -181,15 +190,12 @@ const EditorInterface = ({ settings, token }: IEditorInterface) => {
     appState?.appState.selectedClientCompanyName,
   ])
 
-  useEffect(() => {
-    if (!appState?.appState.readOnly) {
-      appState?.setOriginalTemplate(editor?.getHTML() as string)
-    }
-  }, [editor?.getHTML(), appState?.appState.readOnly])
-
   useEffect(() => {
     // ! This will break someday
-    if (editor && appState?.appState.settings?.content.includes(defaultState)) {
+    if (
+      editor &&
+      appState?.appState.settings?.content?.includes(defaultState)
+    ) {
       if (
         appState?.appState.originalTemplate?.replace(/\s/g, '') !==
           defaultState.replace(/\s/g, '') ||
@@ -212,7 +218,7 @@ const EditorInterface = ({ settings, token }: IEditorInterface) => {
     ) {
       if (
         appState?.appState.originalTemplate?.toString() !==
-          appState?.appState.settings?.content.toString() ||
+          appState?.appState.settings?.content?.toString() ||
         appState?.appState.settings?.backgroundColor !==
           appState?.appState.editorColor ||
         (appState?.appState.settings.bannerImage?.url || '') !==
@@ -240,7 +246,6 @@ const EditorInterface = ({ settings, token }: IEditorInterface) => {
   useEffect(() => {
     if (editor) {
       appState?.setEditor(editor)
-
       const handleKeyDown = (event: KeyboardEvent) => {
         if (event.metaKey && event.key === 'z') {
           event.preventDefault() // Prevent the default behavior of Cmd+Z (e.g., browser undo)
@@ -259,7 +264,7 @@ const EditorInterface = ({ settings, token }: IEditorInterface) => {
       appState?.setLoading(true)
 
       if (token) {
-        const _settings = {
+        const _settings: ISettings = {
           content: defaultState,
           backgroundColor: '#ffffff',
           id: '',
@@ -273,10 +278,27 @@ const EditorInterface = ({ settings, token }: IEditorInterface) => {
           },
           createdById: '',
           displayTasks: false,
+          notifications: [
+            {
+              key: 'contracts',
+              show: false,
+              order: 0,
+            },
+            {
+              key: 'billing',
+              show: false,
+              order: 1,
+            },
+            {
+              key: 'forms',
+              show: false,
+              order: 1,
+            },
+          ],
         }
         appState?.setOriginalTemplate(settings?.content || '')
         if (settings?.displayTasks) {
-          appState?.toggleDisplayTasks()
+          appState?.toggleDisplayTasks({ override: true })
         }
         appState?.setSettings(settings || _settings)
         appState?.setToken(token)

diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
@@ -59,6 +59,7 @@ export const Footer = () => {
         bannerImageId: data?.id,
         token: appState?.appState.token,
         displayTasks: appState?.appState.displayTasks,
+        notifications: appState?.appState.settings?.notifications,
       }
       saveUtility(payload)
       return
@@ -71,6 +72,7 @@ export const Footer = () => {
         token: appState?.appState.token,
         bannerImageId: null,
         displayTasks: appState?.appState.displayTasks,
+        notifications: appState?.appState.settings?.notifications,
       }
       await fetch(`/api/media`, {
         method: 'DELETE',
@@ -103,13 +105,15 @@ export const Footer = () => {
         bannerImageId: data?.id,
         token: appState?.appState.token,
         displayTasks: appState?.appState.displayTasks,
+        notifications: appState?.appState.settings?.notifications,
       }
     } else {
       payload = {
         backgroundColor: appState?.appState?.editorColor,
         content: content,
         token: appState?.appState.token,
         displayTasks: appState?.appState.displayTasks,
+        notifications: appState?.appState.settings?.notifications,
       }
     }
     saveUtility(payload)

diff --git a/src/components/NotificationsModal/index.tsx b/src/components/NotificationsModal/index.tsx
@@ -43,8 +43,9 @@ const NotificationsModal = ({ settings }: NotificationsModalProps) => {
         method: 'PUT',
         body: JSON.stringify({
           ...settings,
+          displayTasks: appState?.appState.displayTasks,
           token: appState?.appState?.token,
-          notifications: JSON.stringify(formState),
+          notifications: formState,
         }),
       })
       appState?.toggleNotificationsModal()

diff --git a/src/components/atoms/RedirectButton.tsx b/src/components/atoms/RedirectButton.tsx
@@ -7,11 +7,14 @@ import { AvailablePortalRoutes } from '@/types/copilotPortal'
 interface RedirectButtonProps {
   route: AvailablePortalRoutes
   children: string | ReactNode
+  execute: boolean
 }
 
-const RedirectButton = ({ route, children }: RedirectButtonProps) => {
+const RedirectButton = ({ route, children, execute }: RedirectButtonProps) => {
   const handleClick = () => {
-    window.parent.postMessage({ type: 'history.push', route }, '*')
+    if (execute) {
+      window.parent.postMessage({ type: 'history.push', route }, '*')
+    }
   }
 
   return <Button handleClick={handleClick}>{children}</Button>

diff --git a/src/components/display/DisplayTasksToggle.tsx b/src/components/display/DisplayTasksToggle.tsx
@@ -1,31 +1,54 @@
 import { Switch } from '@/components/Forms/Switch'
 import { When } from '@/components/hoc/When'
 import { useAppState } from '@/hooks/useAppState'
+import { useEffect } from 'react'
 
 const DisplayTasksToggle = () => {
   const appState = useAppState()
 
-  const handleClick = () => {
-    if (!appState?.appState.settings?.displayTasks) {
+  const handleNotificationWidget = () => {
+    if (appState?.appState?.displayTasks) {
       if (appState?.appState.editor) {
         appState?.appState?.editor
           .chain()
           .focus()
           .setContent(
-            `
-               ${appState?.appState.originalTemplate}
-      `,
+            appState?.appState.originalTemplate?.includes('notification_widget')
+              ? appState?.appState.originalTemplate
+              : `<notification_widget></notification_widget>${appState?.appState.originalTemplate}`,
           )
           .run()
       }
       appState?.setOriginalTemplate(
         appState?.appState.editor?.getHTML() as string,
       )
+    } else {
+      if (appState?.appState.editor) {
+        appState?.appState?.editor
+          .chain()
+          .focus()
+          .setContent(
+            appState?.appState.originalTemplate?.replace(
+              '<notification_widget></notification_widget>',
+              '',
+            ) || '',
+          )
+          .run()
+      }
     }
+  }
+
+  const handleClick = () => {
     appState?.toggleDisplayTasks()
     appState?.toggleChangesCreated(true)
   }
 
+  useEffect(() => {
+    if (appState?.appState.editor) {
+      handleNotificationWidget()
+    }
+  }, [appState?.appState.displayTasks])
+
   return (
     <div className='py-600 px-500 border-1 border-b relative flex justify-between p-4 gap-3 z-0 items-center'>
       <p className='font-medium'>Display Tasks</p>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		src/components/tiptap/notificationWidget/NotificationWidget.tsx