update(OUT-2056): Initial "Connect to Quickbooks" screen

- [X] update initial connection screen with settings section and product mapping table
- [X] blurred and disabled setting section
- [X] issue fix: when sync fails, sync flag was not true after re-authorization
- [X] issue fix: when sync fails and re-authorization is done, the QB items in dropdown were not loaded.
- [X] only fetch QB items when sync flag is true. Added condition to not fetch QB items when:
	- sync fails
	- during initial page
- [X] "Connecting" label in callout button when initial connection and re-authorization

Author: SandipBajracharya

src/app/(home)/HomeClient.tsx

@@ -1,25 +1,10 @@
 'use client'
 import { useApp } from '@/app/context/AppContext'
 import { Main as DashboardMain } from '@/components/dashboard/Main'
-import { SilentError } from '@/components/template/SilentError'
-import { useAppBridge, useQuickbooks } from '@/hook/useQuickbooks'
-import { Button, Spinner } from 'copilot-design-system'
+import { useAppBridge } from '@/hook/useQuickbooks'
 
 export default function HomeClient() {
-  const {
-    token,
-    tokenPayload,
-    reconnect,
-    portalConnectionStatus,
-    isEnabled,
-    syncFlag,
-  } = useApp()
-
-  const { loading, handleConnect, isReconnecting } = useQuickbooks(
-    token,
-    tokenPayload,
-    reconnect,
-  )
+  const { token, portalConnectionStatus, isEnabled, syncFlag } = useApp()
 
   // bridge related logics like disconnect app and download sync log csv
   useAppBridge({
@@ -29,45 +14,9 @@ export default function HomeClient() {
     connectionStatus: portalConnectionStatus || false,
   })
 
-  if (portalConnectionStatus === null) {
-    return (
-      <SilentError
-        message="Something went wrong while connecting to QuickBooks"
-        resetFn={handleConnect}
-      />
-    )
-  }
-
   return (
     <div className="home-client-wrapper w-full h-full">
-      {portalConnectionStatus ? (
-        <>
-          {isReconnecting && (
-            <div>
-              <span className="me-2">Reconnecting to QuickBooks</span>{' '}
-              <Spinner size={5} />
-            </div>
-          )}
-          <DashboardMain />
-        </>
-      ) : (
-        <div className="flex items-center justify-center h-full text-xl">
-          {loading ? (
-            <div className="flex items-center">
-              <span className="me-2">
-                Connecting to QuickBooks. Please wait
-              </span>{' '}
-              <Spinner size={5} />
-            </div>
-          ) : (
-            <Button
-              label="Connect to QuickBooks"
-              onClick={() => handleConnect()}
-              disabled={loading}
-            />
-          )}
-        </div>
-      )}
+      <DashboardMain />
     </div>
   )
 }

src/app/api/quickbooks/auth/auth.service.ts

@@ -15,6 +15,7 @@ import {
   QBPortalConnectionCreateSchemaType,
   QBPortalConnectionUpdateSchemaType,
 } from '@/db/schema/qbPortalConnections'
+import { QBSetting } from '@/db/schema/qbSettings'
 import {
   getPortalConnection,
   getPortalSettings,
@@ -111,6 +112,13 @@ export class AuthService extends BaseService {
         portalId,
         syncFlag,
       })
+    } else {
+      await settingsService.updateQBSettings(
+        {
+          syncFlag,
+        },
+        eq(QBSetting.portalId, portalId),
+      )
     }
   }
 

src/components/dashboard/Main.tsx

@@ -12,6 +12,7 @@ import {
   Spinner,
 } from 'copilot-design-system'
 import LastSyncAt from '@/components/dashboard/LastSyncAt'
+import { SilentError } from '@/components/template/SilentError'
 
 type CalloutType = {
   title: string
@@ -43,6 +44,13 @@ const DashboardCallout = (lastSyncTime: string | null) => ({
     actionIcon: 'Repeat' as IconType,
     buttonVariant: 'secondary' as const,
   },
+  [CalloutVariant.INFO]: {
+    title: 'Authorize your account',
+    description: 'Log into QuickBooks with an admin account to get started.',
+    actionLabel: 'Connect to QuickBooks',
+    actionIcon: 'Check' as IconType,
+    buttonVariant: 'primary' as const,
+  },
 })
 
 export const Main = () => {
@@ -53,8 +61,21 @@ export const Main = () => {
     isReconnecting,
     lastSyncTimestamp,
     itemMapped,
+    portalConnectionStatus,
+    syncFlag,
+    handleConnect,
+    isConnecting,
   } = useDashboardMain()
 
+  if (portalConnectionStatus === null) {
+    return (
+      <SilentError
+        message="Something went wrong while connecting to QuickBooks"
+        resetFn={handleConnect}
+      />
+    )
+  }
+
   const dashboardCallout: CalloutType =
     DashboardCallout(lastSyncTimestamp)[status]
 
@@ -70,31 +91,39 @@ export const Main = () => {
             variant={status}
             {...(dashboardCallout.actionLabel && {
               actionProps: {
-                label: isReconnecting
-                  ? 'Reauthorizing...'
-                  : dashboardCallout.actionLabel,
+                label:
+                  isReconnecting || isConnecting
+                    ? 'Connecting...'
+                    : dashboardCallout.actionLabel,
                 onClick: buttonAction,
                 disabled:
                   isReconnecting ||
+                  isConnecting ||
                   (status === CalloutVariant.WARNING && !itemMapped),
                 prefixIcon: dashboardCallout.actionIcon,
                 ...(dashboardCallout.buttonVariant && {
                   variant: dashboardCallout.buttonVariant,
                 }),
+                className: !portalConnectionStatus ? 'lg:!px-8' : '',
               },
             })}
           />
-          <div className="mt-6 mb-2">
-            <Heading
-              size="xl"
-              tag="h2"
-              className="pb-4 border-b-1 border-b-card-divider !leading-7" // forcing styles with "!"
-            >
-              Settings
-            </Heading>
-            <Divider />
+          <div className={!portalConnectionStatus ? 'opacity-25 relative' : ''}>
+            {!portalConnectionStatus && (
+              <div className="absolute top-0 left-0 w-full h-full z-10"></div>
+            )}
+            <div className="mt-6 mb-2">
+              <Heading
+                size="xl"
+                tag="h2"
+                className="pb-4 border-b-1 border-b-card-divider !leading-7" // forcing styles with "!"
+              >
+                Settings
+              </Heading>
+              <Divider />
+            </div>
+            <SettingAccordion syncFlag={syncFlag} />
           </div>
-          <SettingAccordion />
         </>
       )}
     </>

src/components/dashboard/settings/SettingAccordion.tsx

@@ -9,7 +9,11 @@ import {
 } from '@/hook/useSettings'
 import { Button } from 'copilot-design-system'
 
-export default function SettingAccordion() {
+export default function SettingAccordion({
+  syncFlag,
+}: {
+  syncFlag: boolean | null
+}) {
   const {
     openDropdowns,
     setOpenDropdowns,
@@ -89,6 +93,7 @@ export default function SettingAccordion() {
               className={`absolute top-[14px] right-0 z-10 flex items-center justify-end`}
             >
               {index === 0 &&
+                syncFlag &&
                 (showProductConfirm || setting.settingShowConfirm) && (
                   <>
                     {!initialSettingMapFlag && (
@@ -107,7 +112,7 @@ export default function SettingAccordion() {
                     />
                   </>
                 )}
-              {index === 1 && showInvoiceButton && (
+              {index === 1 && syncFlag && showInvoiceButton && (
                 <>
                   {!initialSettingMapFlag && (
                     <Button

src/hook/useDashboard.ts

@@ -15,40 +15,54 @@ export const useDashboardMain = () => {
     isEnabled,
     initialSettingMapFlag,
     itemMapped,
+    portalConnectionStatus,
   } = useApp()
 
-  const { handleConnect, isReconnecting, handleSyncEnable } = useQuickbooks(
-    token,
-    tokenPayload,
-    reconnect,
-  )
+  const {
+    handleConnect,
+    isReconnecting,
+    handleSyncEnable,
+    loading: isConnecting,
+  } = useQuickbooks(token, tokenPayload, reconnect)
+
   const [callOutStatus, setCallOutStatus] = useState<
-    CalloutVariant.SUCCESS | CalloutVariant.ERROR | CalloutVariant.WARNING
+    | CalloutVariant.SUCCESS
+    | CalloutVariant.ERROR
+    | CalloutVariant.WARNING
+    | CalloutVariant.INFO
   >(CalloutVariant.SUCCESS)
   const [isLoading, setIsLoading] = useState(true)
   const [buttonAction, setButtonAction] = useState<
     (() => Promise<NodeJS.Timeout>) | undefined
   >(undefined)
 
   useEffect(() => {
-    if (syncFlag) {
-      if (!isEnabled) {
-        setCallOutStatus(CalloutVariant.WARNING)
-        setButtonAction(() => handleSyncEnable)
-      } else {
-        setCallOutStatus(CalloutVariant.SUCCESS)
-      }
-    } else {
-      let timeout: NodeJS.Timeout
-      setCallOutStatus(CalloutVariant.ERROR)
+    let timeout: NodeJS.Timeout
+    if (!portalConnectionStatus) {
+      // No early return to run timeout cleanup function
+      setCallOutStatus(CalloutVariant.INFO)
       setButtonAction(() => async () => {
-        timeout = await handleConnect(AuthStatus.RECONNECT)
+        timeout = await handleConnect()
         return timeout
       })
-
-      return () => clearTimeout(timeout)
+    } else {
+      if (syncFlag) {
+        if (!isEnabled) {
+          setCallOutStatus(CalloutVariant.WARNING)
+          setButtonAction(() => handleSyncEnable)
+        } else {
+          setCallOutStatus(CalloutVariant.SUCCESS)
+        }
+      } else {
+        setCallOutStatus(CalloutVariant.ERROR)
+        setButtonAction(() => async () => {
+          timeout = await handleConnect(AuthStatus.RECONNECT)
+          return timeout
+        })
+      }
     }
     setIsLoading(false)
+    return () => clearTimeout(timeout)
   }, [syncFlag, isEnabled])
 
   return {
@@ -59,5 +73,9 @@ export const useDashboardMain = () => {
     lastSyncTimestamp,
     itemMapped,
     initialSettingMapFlag,
+    portalConnectionStatus,
+    syncFlag,
+    isConnecting,
+    handleConnect,
   }
 }

src/hook/useQuickbooks.ts

@@ -38,6 +38,7 @@ export const useQuickbooks = (
             syncFlag: payload.new.sync_flag,
             isEnabled: payload.new.is_enabled,
           }))
+          setLoading(false)
         },
       )
       .on(
@@ -66,6 +67,7 @@ export const useQuickbooks = (
               : prev.lastSyncTimestamp,
             portalConnectionStatus: connectionStatus,
           }))
+          setLoading(false)
         },
       )
       .on(
@@ -108,24 +110,17 @@ export const useQuickbooks = (
   }, [reconnect])
 
   const getAuthUrl = async (type?: string) => {
+    setLoading(true)
     const redirectUrl = copilotDashboardUrl
     const url = `/api/quickbooks/auth?token=${token}${type ? `&type=${type}` : ''}`
-    setLoading(true)
     const response = await fetch(url, {
       method: 'POST',
       body: JSON.stringify({ redirectUrl }),
     })
-
     return await response.json()
   }
 
   const handleConnect = async (type?: string) => {
-    setAppParams((prev) => ({
-      ...prev,
-      portalConnectionStatus: false,
-    }))
-    setLoading(true)
-
     // set time-out in case if user closes the popped up window. This will prevent the app from the infinite "connecting" state
     const timeout = setTimeout(() => {
       if (!portalConnectionStatus) {