diff --git a/additional.d.ts b/additional.d.ts index fb57d2930..aeea9d9e0 100644 --- 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 index a7603fffd..36048836e 100644 --- a/src/data/queries/supportServices.ts +++ b/src/data/queries/supportServices.ts @@ -15,8 +15,8 @@ export const formatter: QueryFormatter = ( 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 index 7051de88f..503163b1d 100644 --- 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 index efe7d2b37..cc6540084 100644 --- 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 index 373f60d54..fafbbc463 100644 --- 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 index 039fb4939..31b290be9 100644 --- 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 index c77a619d8..b24b436c3 100644 --- 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() + const { container } = render() 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() - 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( + '' + ) }) }) diff --git a/src/templates/components/contactInfo/index.tsx b/src/templates/components/contactInfo/index.tsx index d6677a0fd..3f898d4ac 100644 --- 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 ( - <> - {title} - recordEvent(analytic(value))} - href={href} - rel="noreferrer noopener" - passHref - > - {value} - - - ) + return true } export const EmailContact = ( email: ParagraphComponent ) => { - return ( -
  • - -
    • - ) + const { address, label } = email + + if (label && address) { + return ( +
  • + {label}  + +
    • + ) + } + + return null } export const PhoneContact = ( phone: ParagraphComponent ) => { - const phoneNumber = phone.extension - ? `${phone.number}p${phone.extension}` - : phone.number + const { extension, label, number } = phone - return ( -
  • - -
    • - ) + if (label && number) { + return ( +
  • + {label}  + +
    • + ) + } + + return null } // nested paragraphs -const AdditionalContact = (contact: FormattedAdditionalContact) => { +const AdditionalContact = ( + contact: FormattedEmailContact | FormattedPhoneContact +) => { switch (contact.type) { case PARAGRAPH_RESOURCE_TYPES.EMAIL_CONTACT: return @@ -81,12 +63,27 @@ const AdditionalContact = (contact: FormattedAdditionalContact) => { } // node--support-service nodes that get included -const BenefitHubContacts = ({ services }: BenefitHubContact) => { - return services.map((s) => ( -
  • - -
    • - )) +const BenefitHubContacts = ({ contacts }) => { + return contacts.map((contact) => { + const { href, label, number } = contact + + if (number && canUseWebComponent(number)) { + const phone = { + extension: null, + label, + number, + } + + return + } + + return ( +
  • + {label}  + +
    • + ) + }) } // wrapper around all types of contact info @@ -113,18 +110,21 @@ export function ContactInfo({ Need more help? {useDefaultContact ? ( - + <> + {defaultContact.label}  + + ) : ( -
      +
        {additionalContact && ( )} {contactType === 'BHC' && benefitHubContacts && ( - + )}
      )} diff --git a/src/templates/layouts/resourcesSupport/index.test.tsx b/src/templates/layouts/resourcesSupport/index.test.tsx index 20fb75e35..907284d25 100644 --- a/src/templates/layouts/resourcesSupport/index.test.tsx +++ b/src/templates/layouts/resourcesSupport/index.test.tsx @@ -58,12 +58,9 @@ describe(' 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(' 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() }) }) diff --git a/src/types/formatted/contactInfo.ts b/src/types/formatted/contactInfo.ts index 464bd6cf9..f3f2e6ae7 100644 --- a/src/types/formatted/contactInfo.ts +++ b/src/types/formatted/contactInfo.ts @@ -9,8 +9,8 @@ export type ContactInfo = PublishedParagraph & { } export type Contact = { - title: string - value: string + label: string + number: string href: string } @@ -29,11 +29,6 @@ export type EmailContact = PublishedParagraph & { export type AdditionalContact = PhoneContact | EmailContact -// TODO: Is this being used? benefitHubContacts is typed as Contact[] not BenefitHubcontact[] -export type BenefitHubContact = { - services: Contact[] -} - export type PressContact = { id: string name: string