VACMS-19386 Update contact info component (#821)

department-of-veterans-affairs · Dec 12, 2024 · b1686c5 · b1686c5
1 parent 18538d3
commit b1686c5
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 127 deletions.
diff --git a/additional.d.ts b/additional.d.ts
@@ -32,5 +32,6 @@ declare namespace JSX {
     'va-link'
     'va-link-action'
     'va-on-this-page'
+    'va-telephone'
   }
 }
diff --git a/src/data/queries/supportServices.ts b/src/data/queries/supportServices.ts
@@ -15,8 +15,8 @@ export const formatter: QueryFormatter<NodeSupportService, Contact> = (
   if (!entity) return null
 
   return {
-    title: entity.title,
-    value: entity.field_phone_number,
+    label: entity.title,
+    number: entity.field_phone_number,
     href: entity.field_link.uri,
   }
 }
diff --git a/src/data/queries/tests/__snapshots__/contactInfo.test.tsx.snap b/src/data/queries/tests/__snapshots__/contactInfo.test.tsx.snap
@@ -13,8 +13,8 @@ exports[`ContactInfo formatData outputs formatted data 1`] = `
   "contactType": "DC",
   "defaultContact": {
     "href": "tel:1-800-698-2411",
-    "title": "MyVA411 main information line:",
-    "value": "800-698-2411",
+    "label": "MyVA411 main information line:",
+    "number": "800-698-2411",
   },
   "entityId": 13094,
   "id": "ebfce5d0-1bc5-45b9-93e9-669a1c1da645",

diff --git a/src/data/queries/tests/__snapshots__/resourcesSupport.test.tsx.snap b/src/data/queries/tests/__snapshots__/resourcesSupport.test.tsx.snap
@@ -51,8 +51,8 @@ exports[`Resources Support formatData outputs formatted data 1`] = `
     "contactType": "DC",
     "defaultContact": {
       "href": "tel:1-800-698-2411",
-      "title": "MyVA411 main information line:",
-      "value": "800-698-2411",
+      "label": "MyVA411 main information line:",
+      "number": "800-698-2411",
     },
     "entityId": 23309,
     "id": "ab6ce4bb-c9c4-426a-a157-7db1b9c4e70e",

diff --git a/src/data/queries/tests/supportServices.test.tsx b/src/data/queries/tests/supportServices.test.tsx
@@ -11,8 +11,8 @@ describe('SupportServices formatter function', () => {
       activeServiceMock as unknown as NodeSupportService
     )
     expect(formatted).toEqual({
-      title: activeServiceMock.title,
-      value: activeServiceMock.field_phone_number,
+      label: activeServiceMock.title,
+      number: activeServiceMock.field_phone_number,
       href: activeServiceMock.field_link.uri,
     })
   })

diff --git a/src/templates/components/contactInfo/contactInfo.stories.ts b/src/templates/components/contactInfo/contactInfo.stories.ts
@@ -14,8 +14,8 @@ export const Default: Story = {
   args: {
     contactType: 'DC',
     defaultContact: {
-      title: 'Phone Number',
-      value: '(855) 867-5309',
+      label: 'Phone Number',
+      number: '(855) 867-5309',
       href: 'tel:8558675309',
     },
   },
@@ -25,8 +25,8 @@ export const AdditionalContactPhone: Story = {
   args: {
     contactType: 'DC',
     defaultContact: {
-      title: 'Phone Number',
-      value: '(855) 867-5309',
+      label: 'Phone Number',
+      number: '(855) 867-5309',
       href: 'tel:8558675309',
     },
     additionalContact: {
@@ -43,8 +43,8 @@ export const AdditionalContactEmail: Story = {
   args: {
     contactType: 'DC',
     defaultContact: {
-      title: 'Phone Number',
-      value: '(855) 867-5309',
+      label: 'Phone Number',
+      number: '(855) 867-5309',
       href: 'tel:8558675309',
     },
     additionalContact: {
@@ -61,28 +61,28 @@ export const BenefitsHubContact: Story = {
     contactType: 'BHC',
     benefitHubContacts: [
       {
-        title: 'Health benefits hotline: ',
-        value: '877-222-VETS (8387)',
+        label: 'Health benefits hotline: ',
+        number: '877-222-VETS (8387)',
         href: 'tel:8772228387',
       },
       {
-        title: 'My HealtheVet help desk: ',
-        value: '877-327-0022',
+        label: 'My HealtheVet help desk: ',
+        number: '877-327-0022',
         href: 'tel:8773270022',
       },
       {
-        title: 'eBenefits technical support:',
-        value: '800-983-0937',
+        label: 'eBenefits technical support:',
+        number: '800-983-0937',
         href: 'tel:8009830937',
       },
       {
-        title: 'MyVA411 main information line:',
-        value: '800-698-2411',
+        label: 'MyVA411 main information line:',
+        number: '800-698-2411',
         href: 'tel:8006982411',
       },
       {
-        title: 'Telecommunications Relay Services (using TTY)',
-        value: 'TTY: 711',
+        label: 'Telecommunications Relay Services (using TTY)',
+        number: 'TTY: 711',
         href: 'tel:1+711',
       },
     ],

diff --git a/src/templates/components/contactInfo/index.test.tsx b/src/templates/components/contactInfo/index.test.tsx
@@ -1,7 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import { fireEvent, getByRole } from '@testing-library/dom'
 jest.mock('@/lib/analytics/recordEvent')
-import * as recordEvent from '@/lib/analytics/recordEvent'
 import { ContactInfo } from './index'
 import { ParagraphComponent } from '@/types/formatted/paragraph'
 import { ContactInfo as FormattedContactInfo } from '@/types/formatted/contactInfo'
@@ -11,8 +9,8 @@ describe('ContactInfo with valid data', () => {
     id: '1',
     contactType: 'DC',
     defaultContact: {
-      title: 'Phone Number',
-      value: '(855) 867-5309',
+      label: 'Phone Number',
+      number: '(855) 867-5309',
       href: 'tel:8558675309',
     },
   }
@@ -45,50 +43,39 @@ describe('ContactInfo with valid data', () => {
       contactType: 'BHC',
       benefitHubContacts: [
         {
-          title: 'Health benefits hotline: ',
-          value: '877-222-VETS (8387)',
+          label: 'Health benefits hotline: ',
+          number: '877-222-VETS (8387)',
           href: 'tel:8772228387',
         },
         {
-          title: 'My HealtheVet help desk: ',
-          value: '877-327-0022',
+          label: 'My HealtheVet help desk: ',
+          number: '877-327-0022',
           href: 'tel:8773270022',
         },
         {
-          title: 'eBenefits technical support:',
-          value: '800-983-0937',
+          label: 'eBenefits technical support:',
+          number: '800-983-0937',
           href: 'tel:8009830937',
         },
         {
-          title: 'MyVA411 main information line:',
-          value: '800-698-2411',
+          label: 'MyVA411 main information line:',
+          number: '800-698-2411',
           href: 'tel:8006982411',
         },
         {
-          title: 'Telecommunications Relay Services (using TTY)',
-          value: 'TTY: 711',
+          label: 'Telecommunications Relay Services (using TTY)',
+          number: 'TTY: 711',
           href: 'tel:1+711',
         },
       ],
     }
 
-    render(<ContactInfo {...bhc} />)
+    const { container } = render(<ContactInfo {...bhc} />)
 
     expect(screen.queryByText(/Phone Number/)).not.toBeInTheDocument()
     expect(screen.queryByText(/My HealtheVet help desk/)).toBeInTheDocument()
-  })
-
-  test('click event sends correct params to recordEvent', () => {
-    data.defaultContact.value = 't$st.vet=ran@va.gov'
-    const { container } = render(<ContactInfo {...data} />)
-    const link = getByRole(container, 'link')
-
-    fireEvent.click(link)
-    expect(recordEvent.recordEvent).toHaveBeenCalledWith({
-      event: 'nav-linkslist',
-      'links-list-header': 't%24st.vet%3Dran%40va.gov',
-      'links-list-section-header': 'Need more help?',
-    })
-    jest.restoreAllMocks()
+    expect(container.innerHTML).toContain(
+      '<va-telephone contact="800-983-0937">'
+    )
   })
 })
diff --git a/src/templates/components/contactInfo/index.tsx b/src/templates/components/contactInfo/index.tsx
@@ -1,76 +1,58 @@
-import { recordEvent } from '@/lib/analytics/recordEvent'
-import Link from 'next/link'
 import {
   Contact,
-  AdditionalContact as FormattedAdditionalContact,
-  BenefitHubContact,
   ContactInfo as FormattedContactInfo,
   EmailContact as FormattedEmailContact,
   PhoneContact as FormattedPhoneContact,
-  PressContact,
 } from '@/types/formatted/contactInfo'
 import { PARAGRAPH_RESOURCE_TYPES } from '@/lib/constants/resourceTypes'
 import { ParagraphComponent } from '@/types/formatted/paragraph'
 
-const analytic = (header) => {
-  return {
-    event: 'nav-linkslist',
-    'links-list-header': `${encodeURIComponent(header)}`,
-    'links-list-section-header': 'Need more help?',
+const canUseWebComponent = (telephone) => {
+  if (!telephone || /[a-zA-Z+]/.test(telephone)) {
+    return false
   }
-}
 
-// simple contact info base component
-export const DefaultContact = ({ title, value, href }: Contact) => {
-  return (
-    <>
-      <strong>{title} </strong>
-      <Link
-        onClick={() => recordEvent(analytic(value))}
-        href={href}
-        rel="noreferrer noopener"
-        passHref
-      >
-        {value}
-      </Link>
-    </>
-  )
+  return true
 }
 
 export const EmailContact = (
   email: ParagraphComponent<FormattedEmailContact>
 ) => {
-  return (
-    <li className="vads-u-margin-top--1">
-      <DefaultContact
-        title={email.label}
-        value={email.address}
-        href={`mailto:${email.address}`}
-      />
-    </li>
-  )
+  const { address, label } = email
+
+  if (label && address) {
+    return (
+      <li className="vads-u-margin-top--1">
+        <strong>{label}&nbsp;</strong>
+        <va-link href={`mailto:${address}`} text={address} />
+      </li>
+    )
+  }
+
+  return null
 }
 
 export const PhoneContact = (
   phone: ParagraphComponent<FormattedPhoneContact>
 ) => {
-  const phoneNumber = phone.extension
-    ? `${phone.number}p${phone.extension}`
-    : phone.number
+  const { extension, label, number } = phone
 
-  return (
-    <li className="vads-u-margin-top--1">
-      <DefaultContact
-        title={phone.label}
-        value={phoneNumber}
-        href={`tel:${phoneNumber}`}
-      />
-    </li>
-  )
+  if (label && number) {
+    return (
+      <li className="vads-u-margin-top--1">
+        <strong>{label}&nbsp;</strong>
+        <va-telephone contact={number} extension={extension || null} />
+      </li>
+    )
+  }
+
+  return null
 }
 
 // nested paragraphs
-const AdditionalContact = (contact: FormattedAdditionalContact) => {
+const AdditionalContact = (
+  contact: FormattedEmailContact | FormattedPhoneContact
+) => {
   switch (contact.type) {
     case PARAGRAPH_RESOURCE_TYPES.EMAIL_CONTACT:
       return <EmailContact {...(contact as FormattedEmailContact)} />
@@ -81,12 +63,27 @@ const AdditionalContact = (contact: FormattedAdditionalContact) => {
 }
 
 // node--support-service nodes that get included
-const BenefitHubContacts = ({ services }: BenefitHubContact) => {
-  return services.map((s) => (
-    <li className="vads-u-margin-top--1" key={s.title}>
-      <DefaultContact {...s} />
-    </li>
-  ))
+const BenefitHubContacts = ({ contacts }) => {
+  return contacts.map((contact) => {
+    const { href, label, number } = contact
+
+    if (number && canUseWebComponent(number)) {
+      const phone = {
+        extension: null,
+        label,
+        number,
+      }
+
+      return <PhoneContact {...phone} id={label} key={label} />
+    }
+
+    return (
+      <li className="vads-u-margin-top--1" key={label}>
+        <strong>{label}&nbsp;</strong>
+        <va-link href={href} text={number} />
+      </li>
+    )
+  })
 }
 
 // wrapper around all types of contact info
@@ -113,18 +110,21 @@ export function ContactInfo({
                 Need more help?
               </h2>
               {useDefaultContact ? (
-                <DefaultContact {...defaultContact} />
+                <>
+                  <strong>{defaultContact.label}&nbsp;</strong>
+                  <va-link
+                    href={defaultContact.href}
+                    text={defaultContact.label}
+                  />
+                </>
               ) : (
-                <ul
-                  className="usa-unstyled-list vads-u-display--flex vads-u-flex-direction--column"
-                  role="list"
-                >
+                <ul className="usa-unstyled-list vads-u-display--flex vads-u-flex-direction--column">
                   {additionalContact && (
                     <AdditionalContact {...additionalContact} />
                   )}
 
                   {contactType === 'BHC' && benefitHubContacts && (
-                    <BenefitHubContacts services={benefitHubContacts} />
+                    <BenefitHubContacts contacts={benefitHubContacts} />
                   )}
                 </ul>
               )}

diff --git a/src/templates/layouts/resourcesSupport/index.test.tsx b/src/templates/layouts/resourcesSupport/index.test.tsx
@@ -58,12 +58,9 @@ describe('<ResourcesSupport /> Component', () => {
       type: 'paragraph--contact_information' as ContactInfo['type'],
       contactType: 'DC' as ContactInfo['contactType'],
       defaultContact: {
-        name: 'Test Name',
-        phone: '123-456-7890',
-        email: 'test@example.com',
-        title: 'Test contact title',
-        value: 'Test Value',
-        href: '/test-contact-href/',
+        href: 'tel:1-800-698-2411',
+        label: 'MyVA411 main information line:',
+        number: '800-698-2411',
       },
     },
     benefitsHubLinks: [
@@ -102,6 +99,6 @@ describe('<ResourcesSupport /> Component', () => {
     expect(screen.getByText('If you need support...')).toBeInTheDocument()
     expect(screen.getByText('Test Audience')).toBeInTheDocument()
     expect(screen.getByText('Test Topic')).toBeInTheDocument()
-    expect(screen.getByText('Test contact title')).toBeInTheDocument()
+    expect(screen.getByText('Need more help?')).toBeInTheDocument()
   })
 })