PM-4954: Hide copilot billing details modal when flag is off

src/apps/work/src/lib/components/ProjectBillingAccountExpiredNotice/ProjectBillingAccountExpiredNotice.spec.tsx

@@ -229,7 +229,7 @@ describe('ProjectBillingAccountExpiredNotice', () => {
             .toBeNull()
     })
 
-    it('hides the inline member payment balance but keeps billing account modal access for copilots '
+    it('hides the inline member payment balance and billing account modal access for copilots '
         + 'when disabled', () => {
         mockedUseFetchBillingAccountDetails.mockReturnValue({
             billingAccountDetails: {
@@ -255,14 +255,13 @@ describe('ProjectBillingAccountExpiredNotice', () => {
             .toBeNull()
         expect(screen.queryByText('$750 / $1,000 spent'))
             .toBeNull()
-        fireEvent.click(screen.getByRole('button', {
+        expect(screen.queryByRole('button', {
             name: 'View billing account details',
         }))
-
-        expect(screen.getByRole('dialog')
-            .textContent)
-            .toContain('Billing account details for 80001063')
+            .toBeNull()
+        expect(screen.queryByRole('dialog'))
+            .toBeNull()
         expect(mockedUseFetchBillingAccountDetails)
-            .toHaveBeenCalledWith('80001063')
+            .toHaveBeenCalledWith(undefined)
     })
 })

src/apps/work/src/lib/components/ProjectBillingAccountExpiredNotice/ProjectBillingAccountExpiredNotice.tsx

@@ -349,6 +349,7 @@ export const ProjectBillingAccountExpiredNotice: FC<ProjectBillingAccountExpired
         showPaymentAmounts,
     )
     const showMemberPaymentsRemainingInModal: boolean = isRestrictedCopilot(workAppContext)
+    const showDetailsButton: boolean = BILLING_ACCOUNT_DETAILS_MODAL_ENABLED && showPaymentAmounts
 
     const projectBillingAccountResult: UseFetchProjectBillingAccountResult = useFetchProjectBillingAccount(
         props.projectId,
@@ -359,7 +360,7 @@ export const ProjectBillingAccountExpiredNotice: FC<ProjectBillingAccountExpired
         || normalizeOptionalString(billingAccount?.id)
     const shouldFetchBillingAccountDetails = (BILLING_ACCOUNT_BUDGET_DISPLAY_ENABLED && showPaymentAmounts)
         || showMemberPaymentsRemaining
-        || (BILLING_ACCOUNT_DETAILS_MODAL_ENABLED && isModalOpen)
+        || (showDetailsButton && isModalOpen)
     const billingAccountDetailsResult: UseFetchBillingAccountDetailsResult = useFetchBillingAccountDetails(
         shouldFetchBillingAccountDetails
             ? normalizedBillingAccountId
@@ -434,13 +435,13 @@ export const ProjectBillingAccountExpiredNotice: FC<ProjectBillingAccountExpired
                 budgetDisplayContent={budgetDisplayContent}
                 budgetInfo={budgetInfo}
                 onOpenModal={handleOpenModal}
-                showDetailsButton={BILLING_ACCOUNT_DETAILS_MODAL_ENABLED}
+                showDetailsButton={showDetailsButton}
             />
         )
         : undefined
     const billingAccountModal = renderBillingAccountModal(
         billingAccountDetailsData,
-        isModalOpen,
+        showDetailsButton && isModalOpen,
         handleCloseModal,
         props.projectId,
         showMemberPaymentsRemainingInModal,

src/apps/work/src/lib/components/ProjectsTable/ProjectsTable.spec.tsx

@@ -320,7 +320,7 @@ describe('ProjectsTable', () => {
             .toBeNull()
     })
 
-    it('hides inline payment amounts but keeps billing details available for copilot project rows '
+    it('hides inline payment amounts and billing details for copilot project rows '
         + 'when disabled', () => {
         mockedUseFetchBillingAccounts.mockReturnValue({
             billingAccounts: [
@@ -366,12 +366,11 @@ describe('ProjectsTable', () => {
             .toBeNull()
         expect(screen.queryByText('$750 / $1,000 spent'))
             .toBeNull()
-        fireEvent.click(screen.getAllByRole('button', {
+        expect(screen.queryByRole('button', {
             name: 'View billing account details',
-        })[0])
-
-        expect(screen.getByRole('dialog')
-            .textContent)
-            .toContain('Billing account details for 80001063')
+        }))
+            .toBeNull()
+        expect(screen.queryByRole('dialog'))
+            .toBeNull()
     })
 })

src/apps/work/src/lib/components/ProjectsTable/ProjectsTable.tsx

@@ -268,12 +268,16 @@ interface RenderProjectBillingAccountModalParams {
  * Resolves whether the billing-account details hook should fetch modal data.
  *
  * @param isModalOpen Whether the row details modal has been opened.
+ * @param showDetailsButton Whether this user may open billing-account details.
  * @returns `true` when the modal feature is enabled and data should be fetched.
  */
 function canFetchProjectBillingAccountDetails(
     isModalOpen: boolean,
+    showDetailsButton: boolean,
 ): boolean {
-    return BILLING_ACCOUNT_DETAILS_MODAL_ENABLED && isModalOpen
+    return BILLING_ACCOUNT_DETAILS_MODAL_ENABLED
+        && showDetailsButton
+        && isModalOpen
 }
 
 /**
@@ -350,13 +354,15 @@ function renderProjectBillingAccountBudget(
  *
  * @param billingAccountId Normalized billing-account id for the current row.
  * @param onOpen Open handler for the row modal.
+ * @param showDetailsButton Whether this user may open billing-account details.
  * @returns The details button, or `undefined` when unavailable.
  */
 function renderProjectBillingAccountDetailsButton(
     billingAccountId: string | undefined,
     onOpen: () => void,
+    showDetailsButton: boolean,
 ): JSX.Element | undefined {
-    if (!BILLING_ACCOUNT_DETAILS_MODAL_ENABLED || !billingAccountId) {
+    if (!BILLING_ACCOUNT_DETAILS_MODAL_ENABLED || !showDetailsButton || !billingAccountId) {
         return undefined
     }
 
@@ -413,8 +419,9 @@ const ProjectBillingAccountCell: FC<ProjectBillingAccountCellProps> = (
     const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
     const normalizedBillingAccountId = normalizeOptionalString(props.project.billingAccountId)
         || normalizeOptionalString(props.billingAccount?.id)
+    const showDetailsButton = props.showPaymentAmounts
     const billingAccountDetailsResult: UseFetchBillingAccountDetailsResult = useFetchBillingAccountDetails(
-        canFetchProjectBillingAccountDetails(isModalOpen)
+        canFetchProjectBillingAccountDetails(isModalOpen, showDetailsButton)
             ? normalizedBillingAccountId
             : undefined,
     )
@@ -438,10 +445,11 @@ const ProjectBillingAccountCell: FC<ProjectBillingAccountCellProps> = (
     const billingAccountDetailsButton = renderProjectBillingAccountDetailsButton(
         normalizedBillingAccountId,
         handleOpenModal,
+        showDetailsButton,
     )
     const billingAccountModal = renderProjectBillingAccountModal({
         billingAccountDetails: billingAccountDetailsResult.billingAccountDetails,
-        isModalOpen,
+        isModalOpen: showDetailsButton && isModalOpen,
         onClose: handleCloseModal,
         projectId: props.project.id,
         showMemberPaymentsRemaining: props.showMemberPaymentsRemainingInModal,