OUT-2090 | OUT-2091 | OUT-2092: fixed the first time UI flow

src/app/api/quickbooks/setting/setting.controller.ts

@@ -1,6 +1,6 @@
 import authenticate from '@/app/api/core/utils/authenticate'
 import { SettingService } from '@/app/api/quickbooks/setting/setting.service'
-import { QBSetting } from '@/db/schema/qbSettings'
+import { QBSetting, QBSettingsUpdateSchemaType } from '@/db/schema/qbSettings'
 import { eq } from 'drizzle-orm'
 import { NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
@@ -16,7 +16,11 @@ export async function getSettings(req: NextRequest) {
 
   if (parsedType.success) {
     // return attributes as per the type. If type not provided, return all attributes
-    returningFields.push('id', 'initialSettingMap')
+    returningFields.push(
+      'id',
+      'initialInvoiceSettingMap',
+      'initialProductSettingMap',
+    )
     if (parsedType.data === SettingType.INVOICE)
       returningFields.push('absorbedFeeFlag', 'useCompanyNameFlag')
     if (parsedType.data === SettingType.PRODUCT)
@@ -30,10 +34,19 @@ export async function updateSettings(req: NextRequest) {
   const user = await authenticate(req)
   const body = await req.json()
 
-  const parsedBody = SettingRequestSchema.parse(body)
   const settingService = new SettingService(user)
+  const type = req.nextUrl.searchParams.get('type')
+
+  const parsedType = z.nativeEnum(SettingType).parse(type)
+
+  const payload = {
+    ...SettingRequestSchema.parse(body),
+    ...(parsedType === SettingType.INVOICE
+      ? { initialInvoiceSettingMap: true }
+      : { initialProductSettingMap: true }),
+  }
   const setting = await settingService.updateQBSettings(
-    { ...parsedBody, initialSettingMap: false },
+    payload,
     eq(QBSetting.portalId, user.workspaceId),
   )
   return NextResponse.json({ setting }, { status: httpStatus.CREATED })

src/app/context/AppContext.tsx

@@ -13,8 +13,9 @@ type AppContextType = {
   lastSyncTimestamp: string | null
   showProductConfirm?: boolean
   initialProductMap?: ProductMappingItemType[] // initial product mapped value
-  itemMapped?: boolean // flag to indicate if product mapping has been done or not
-  initialSettingMapFlag?: boolean // flag to determine the initial setting flag
+  enableAppIndicator?: boolean // flag to indicate whether to enable the "Enable App" button
+  initialInvoiceSettingMapFlag?: boolean // flag to determine the initial invoice setting flag
+  initialProductSettingMapFlag?: boolean // flag to determine the initial product setting flag
 }
 
 const AppContext = createContext<
@@ -34,8 +35,9 @@ export const AppProvider = ({
   lastSyncTimestamp,
   showProductConfirm = false,
   initialProductMap = [],
-  itemMapped = false,
-  initialSettingMapFlag = false,
+  enableAppIndicator = false,
+  initialInvoiceSettingMapFlag = false,
+  initialProductSettingMapFlag = false,
   children,
 }: AppContextType & { children: ReactNode }) => {
   const [authParams, setAppParams] = useState<AppContextType>({
@@ -48,8 +50,9 @@ export const AppProvider = ({
     isEnabled,
     showProductConfirm,
     initialProductMap,
-    itemMapped,
-    initialSettingMapFlag,
+    enableAppIndicator,
+    initialInvoiceSettingMapFlag,
+    initialProductSettingMapFlag,
   })
   return (
     <AppContext.Provider value={{ ...authParams, setAppParams }}>

src/components/dashboard/Main.tsx

@@ -13,6 +13,7 @@ import {
 } from 'copilot-design-system'
 import LastSyncAt from '@/components/dashboard/LastSyncAt'
 import { SilentError } from '@/components/template/SilentError'
+import { useApp } from '@/app/context/AppContext'
 
 type CalloutType = {
   title: string
@@ -60,13 +61,14 @@ export const Main = () => {
     buttonAction,
     isReconnecting,
     lastSyncTimestamp,
-    itemMapped,
     portalConnectionStatus,
     syncFlag,
     handleConnect,
     isConnecting,
   } = useDashboardMain()
 
+  const { enableAppIndicator } = useApp()
+
   if (portalConnectionStatus === null) {
     return (
       <SilentError
@@ -99,7 +101,7 @@ export const Main = () => {
                 disabled:
                   isReconnecting ||
                   isConnecting ||
-                  (status === CalloutVariant.WARNING && !itemMapped),
+                  (status === CalloutVariant.WARNING && !enableAppIndicator),
                 prefixIcon: dashboardCallout.actionIcon,
                 ...(dashboardCallout.buttonVariant && {
                   variant: dashboardCallout.buttonVariant,

src/components/dashboard/settings/SettingAccordion.tsx

@@ -1,3 +1,4 @@
+import { useApp } from '@/app/context/AppContext'
 import InvoiceDetail from '@/components/dashboard/settings/sections/invoice/InvoiceDetail'
 import ProductMapping from '@/components/dashboard/settings/sections/product/ProductMapping'
 import Accordion from '@/components/ui/Accordion'
@@ -29,10 +30,11 @@ export default function SettingAccordion({
     setMappingItems,
     showProductConfirm,
     setting,
-    initialSettingMapFlag,
-    itemMapped,
   } = useProductMappingSettings()
 
+  const { initialInvoiceSettingMapFlag, initialProductSettingMapFlag } =
+    useApp()
+
   const {
     settingState,
     submitInvoiceSettings,
@@ -96,7 +98,7 @@ export default function SettingAccordion({
                 syncFlag &&
                 (showProductConfirm || setting.settingShowConfirm) && (
                   <>
-                    {!initialSettingMapFlag && (
+                    {initialProductSettingMapFlag && (
                       <Button
                         label="Cancel"
                         variant="text"
@@ -105,7 +107,11 @@ export default function SettingAccordion({
                       />
                     )}
                     <Button
-                      label={itemMapped ? 'Update Setting' : 'Confirm'}
+                      label={
+                        initialProductSettingMapFlag
+                          ? 'Update Setting'
+                          : 'Confirm'
+                      }
                       variant="primary"
                       prefixIcon="Check"
                       onClick={submitMappingItems}
@@ -114,7 +120,7 @@ export default function SettingAccordion({
                 )}
               {index === 1 && syncFlag && showInvoiceButton && (
                 <>
-                  {!initialSettingMapFlag && (
+                  {initialInvoiceSettingMapFlag && (
                     <Button
                       label="Cancel"
                       variant="text"
@@ -124,7 +130,9 @@ export default function SettingAccordion({
                   )}
                   <Button
                     label={
-                      !initialSettingMapFlag ? 'Update Setting' : 'Confirm'
+                      initialInvoiceSettingMapFlag
+                        ? 'Update Setting'
+                        : 'Confirm'
                     }
                     variant="primary"
                     prefixIcon="Check"

src/db/migrations/20250729092322_invoice_product_setting_map_flag.sql

@@ -0,0 +1,3 @@
+ALTER TABLE "qb_settings" RENAME COLUMN "initial_setting_map" TO "initial_invoice_setting_map";--> statement-breakpoint
+ALTER TABLE "qb_settings" ADD COLUMN "initial_product_setting_map" boolean DEFAULT false NOT NULL,
+  ALTER COLUMN "initial_invoice_setting_map" SET DEFAULT false;