fix(OUT-4003): address PR #267 review

- AccountSelect distinguishes the loading state (options undefined →
  "Loading accounts…") from the genuinely-empty state ("No matching
  accounts"), and InvoiceDetail only shows the "select an account" hint
  once options have loaded — so enabling the toggle mid-fetch no longer
  shows a misleading empty message.
- changeSettings is now generic over the field key
  (<K extends keyof InvoiceSettingType>(flag: K, value: InvoiceSettingType[K])),
  so the value type is tied to the field and e.g. a string can't be passed
  for a boolean flag.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: SandipBajracharya

src/components/dashboard/settings/sections/account/AccountSelect.tsx

@@ -24,6 +24,7 @@ export default function AccountSelect({
 
   useClickOutside(dropdownRef, () => setIsOpen(false), [buttonRef])
 
+  const loading = options === undefined
   const disabled = !options || options.length === 0
   const selected = options?.find((o) => o.id === value)
   // Defends against an account being deleted in QBO between load and save —
@@ -57,7 +58,11 @@ export default function AccountSelect({
               </span>
             ) : (
               <span className="text-gray-400">
-                {disabled ? 'No matching accounts in QuickBooks' : placeholder}
+                {loading
+                  ? 'Loading accounts…'
+                  : disabled
+                    ? 'No matching accounts in QuickBooks'
+                    : placeholder}
               </span>
             )}
           </div>

src/components/dashboard/settings/sections/invoice/InvoiceDetail.tsx

@@ -6,9 +6,9 @@ import { Checkbox, Spinner } from 'copilot-design-system'
 
 type InvoiceDetailProps = {
   settingState: InvoiceSettingType
-  changeSettings: (
-    flag: keyof InvoiceSettingType,
-    value: boolean | string,
+  changeSettings: <K extends keyof InvoiceSettingType>(
+    flag: K,
+    value: InvoiceSettingType[K],
   ) => void
   isLoading: boolean
   bankAccountOptions: AccountOption[] | undefined
@@ -70,11 +70,12 @@ export default function InvoiceDetail({
                   placeholder="Select a deposit bank account"
                   onChange={(id) => changeSettings('bankAccountRef', id)}
                 />
-                {!settingState.bankAccountRef && (
-                  <p className="text-xs text-red-600">
-                    Select a deposit bank account to enable bank deposits.
-                  </p>
-                )}
+                {bankAccountOptions !== undefined &&
+                  !settingState.bankAccountRef && (
+                    <p className="text-xs text-red-600">
+                      Select a deposit bank account to enable bank deposits.
+                    </p>
+                  )}
               </>
             )}
           </div>

src/hook/useSettings.ts

@@ -467,9 +467,9 @@ export const useInvoiceDetailSettings = () => {
       name: account.Name,
     }))
 
-  const changeSettings = async (
-    flag: keyof InvoiceSettingType,
-    value: boolean | string,
+  const changeSettings = async <K extends keyof InvoiceSettingType>(
+    flag: K,
+    value: InvoiceSettingType[K],
   ) => {
     setSettingState((prev) => ({ ...prev, [flag]: value }))
   }