feat: [M3-8915] - Improve UI for billing contact info when sensitive …

…data is masked (#11276)

* Update display of masked billing contact info

* Clean up MaskableText; use default export

* Add test coverage for masked billing contact info section

* Use consistent icon and allow umasking in panel

* Address UX feedback: move the visibility icon and allow toggle

* Add label to VisibilityTooltip

* Skip test for now

* Address feedback: use CDS 2.0 icons

* Better implementation using icons directly, no tooltip

* Clean up, clean up

* Update test coverage

* Added changeset: Improve billing contact info display when Mask Sensitive Data setting is enabled

* Fix failing tests caused by icon replacement

* Address feedback: switch order of buttons; stray Box styling clean up

packages/manager/.changeset/pr-11276-changed-1732122131530.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Improve billing contact info display when Mask Sensitive Data setting is enabled ([#11276](https://github.com/linode/manager/pull/11276))

packages/manager/cypress/e2e/core/billing/billing-contact.spec.ts

@@ -4,6 +4,7 @@ import type { Account } from '@linode/api-v4';
 import { ui } from 'support/ui';
 import { TAX_ID_HELPER_TEXT } from 'src/features/Billing/constants';
 import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
+import { mockGetUserPreferences } from 'support/intercepts/profile';
 
 /* eslint-disable sonarjs/no-duplicate-string */
 const accountData = accountFactory.build({
@@ -72,7 +73,31 @@ describe('Billing Contact', () => {
       },
     });
   });
+  it('Mask Contact Info', () => {
+    mockGetUserPreferences({ maskSensitiveData: true }).as(
+      'getUserPreferences'
+    );
+    mockGetAccount(accountData).as('getAccount');
+    cy.visitWithLogin('/account/billing');
+
+    cy.contains('This data is sensitive and hidden for privacy.');
+
+    // Confirm edit button and contact info is hidden when setting is enabled.
+    cy.findByText('Edit').should('not.exist');
+    cy.get('[data-qa-contact-name]').should('not.exist');
+
+    cy.findByRole('button', { name: 'Show' }).should('be.visible').click();
+
+    // Confirm edit button and contact info is visible when setting is disabled.
+    cy.findByText('Edit').should('be.visible');
+    cy.get('[data-qa-contact-name]').should('be.visible');
+
+    cy.findByRole('button', { name: 'Hide' }).should('be.visible').click();
+  });
   it('Edit Contact Info', () => {
+    mockGetUserPreferences({ maskSensitiveData: false }).as(
+      'getUserPreferences'
+    );
     // mock the user's account data and confirm that it is displayed correctly upon page load
     mockGetAccount(accountData).as('getAccount');
     cy.visitWithLogin('/account/billing');

packages/manager/src/components/CopyTooltip/CopyTooltip.test.tsx

@@ -69,7 +69,7 @@ describe('CopyTooltip', () => {
     );
 
     const copyIconButton = getByLabelText(`Copy ${mockText} to clipboard`);
-    const visibilityToggle = getByTestId('VisibilityIcon');
+    const visibilityToggle = getByTestId('VisibilityTooltip');
 
     // Text should be masked
     expect(copyIconButton).toBeInTheDocument();

packages/manager/src/components/MaskableText/MaskableText.test.tsx

@@ -85,7 +85,7 @@ describe('MaskableText', () => {
     expect(queryByText(maskedText)).not.toBeInTheDocument();
   });
 
-  it('should render a toggleable VisibilityIcon tooltip if isToggleable is provided', async () => {
+  it('should render a toggleable VisibilityTooltip if isToggleable is provided', async () => {
     queryMocks.usePreferences.mockReturnValue({
       data: preferences,
     });
@@ -94,7 +94,7 @@ describe('MaskableText', () => {
       <MaskableText {...defaultProps} isToggleable />
     );
 
-    const visibilityToggle = getByTestId('VisibilityIcon');
+    const visibilityToggle = getByTestId('VisibilityTooltip');
 
     // Original text should be masked
     expect(getByText(maskedText)).toBeVisible();

packages/manager/src/features/Billing/BillingDetail.tsx

@@ -15,7 +15,7 @@ import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import { BillingActivityPanel } from './BillingPanels/BillingActivityPanel/BillingActivityPanel';
 import BillingSummary from './BillingPanels/BillingSummary';
-import ContactInfo from './BillingPanels/ContactInfoPanel';
+import { ContactInformation } from './BillingPanels/ContactInfoPanel/ContactInformation';
 import PaymentInformation from './BillingPanels/PaymentInfoPanel';
 
 export const BillingDetail = () => {
@@ -67,7 +67,7 @@ export const BillingDetail = () => {
           paymentMethods={paymentMethods}
           promotions={account?.active_promotions}
         />
-        <ContactInfo
+        <ContactInformation
           address1={account.address_1}
           address2={account.address_2}
           city={account.city}

packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.styles.ts

@@ -0,0 +1,37 @@
+import { styled } from '@mui/material/styles';
+
+import VisibilityHideIcon from 'src/assets/icons/visibilityHide.svg';
+import VisibilityShowIcon from 'src/assets/icons/visibilityShow.svg';
+import { Typography } from 'src/components/Typography';
+
+export const StyledTypography = styled(Typography)(({ theme }) => ({
+  '& .dif': {
+    '& .MuiChip-root': {
+      position: 'absolute',
+      right: -10,
+      top: '-4px',
+    },
+    position: 'relative',
+    width: 'auto',
+  },
+  marginBottom: theme.spacing(1),
+}));
+
+export const StyledVisibilityShowIcon = styled(VisibilityShowIcon)(
+  ({ theme }) => ({
+    '& path': {
+      stroke: theme.palette.primary.main,
+    },
+    marginRight: theme.spacing(0.5),
+  })
+);
+
+// eslint-disable-next-line sonarjs/no-identical-functions
+export const StyledVisibilityHideIcon = styled(VisibilityHideIcon)(
+  ({ theme }) => ({
+    '& path': {
+      stroke: theme.palette.primary.main,
+    },
+    marginRight: theme.spacing(0.5),
+  })
+);

packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.test.tsx

@@ -4,7 +4,7 @@ import { profileFactory } from 'src/factories';
 import { grantsFactory } from 'src/factories/grants';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import ContactInformation from './ContactInformation';
+import { ContactInformation } from './ContactInformation';
 
 const EDIT_BUTTON_ID = 'edit-contact-info';