Add link to facility name for Appointments Details pages

src/applications/vaos/components/layout/ClaimExamLayout.jsx

@@ -109,7 +109,7 @@ export default function ClaimExamLayout({ data: appointment }) {
           )}
         {!!facility && (
           <>
-            {facility.name}
+            <a href={facility.website}>{facility.name}</a>
             <br />
             <Address address={facility?.address} />
             <div className="vads-u-margin-top--1 vads-u-color--link-default">
@@ -143,7 +143,7 @@ export default function ClaimExamLayout({ data: appointment }) {
           )}
           {!!facility && (
             <>
-              {facility.name}
+              <a href={facility.website}>{facility.name}</a>
               <br />
               {facilityPhone && (
                 <FacilityPhone heading="Phone:" contact={facilityPhone} />

src/applications/vaos/components/layout/ClaimExamLayout.unit.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { expect } from 'chai';
 import moment from 'moment';
 import {
   createTestStore,
   renderWithStoreAndRouter,
@@ -25,6 +25,8 @@
               value: '307-778-7550',
             },
           ],
+          website:
+            'https://www.va.gov/cheyenne-health-care/locations/cheyenne-va-medical-center/',
         },
       },
     },
@@ -318,6 +320,11 @@
         screen.getByRole('heading', { level: 2, name: /Where to attend/i }),
       );
       expect(screen.getByText(/Cheyenne VA Medical Center/i));
+      expect(
+        screen.container.querySelector(
+          'a[href="https://www.va.gov/cheyenne-health-care/locations/cheyenne-va-medical-center/"]',
+        ),
+      ).to.be.ok;
       expect(screen.getByText(/2360 East Pershing Boulevard/i));
 
       expect(screen.container.querySelector('va-icon[icon="directions"]')).to.be
@@ -395,7 +402,7 @@
           isCompAndPenAppointment: true,
           isPastAppointment: true,
           apiData: {
             localStartTime: moment()
               .subtract(1, 'day')
               .format('YYYY-MM-DDTHH:mm:ss'),
             serviceType: 'primaryCare',
@@ -494,7 +501,7 @@
           isCompAndPenAppointment: true,
           isUpcomingAppointment: true,
           apiData: {
             localStartTime: moment().format('YYYY-MM-DDTHH:mm:ss'),
             serviceType: 'primaryCare',
           },
         },

src/applications/vaos/components/layout/InPersonLayout.jsx

@@ -108,7 +108,7 @@ export default function InPersonLayout({ data: appointment }) {
           )}
         {!!facility && (
           <>
-            {facility.name}
+            <a href={facility.website}>{facility.name}</a>
             <br />
             <Address address={facility?.address} />
             <div className="vads-u-margin-top--1 vads-u-color--link-default">

src/applications/vaos/components/layout/InPersonLayout.unit.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { expect } from 'chai';
 import moment from 'moment';
 import {
   createTestStore,
   renderWithStoreAndRouter,
@@ -25,6 +25,8 @@
               value: '307-778-7550',
             },
           ],
+          website:
+            'https://www.va.gov/cheyenne-health-care/locations/cheyenne-va-medical-center/',
         },
       },
     },
@@ -320,6 +322,11 @@
         screen.getByRole('heading', { level: 2, name: /Where to attend/i }),
       );
       expect(screen.getByText(/Cheyenne VA Medical Center/i));
+      expect(
+        screen.container.querySelector(
+          'a[href="https://www.va.gov/cheyenne-health-care/locations/cheyenne-va-medical-center/"]',
+        ),
+      ).to.be.ok;
       expect(screen.getByText(/2360 East Pershing Boulevard/i));
 
       expect(screen.container.querySelector('va-icon[icon="directions"]')).to.be
@@ -499,7 +506,7 @@
           isPastAppointment: true,
           isCancellable: true,
           apiData: {
             localStartTime: moment()
               .subtract(1, 'day')
               .format('YYYY-MM-DDTHH:mm:ss'),
             serviceType: 'primaryCare',
@@ -591,7 +598,7 @@
         vaos: {
           isUpcomingAppointment: true,
           apiData: {
             localStartTime: moment().format('YYYY-MM-DDTHH:mm:ss'),
             serviceType: 'primaryCare',
           },
         },

src/applications/vaos/components/layout/PhoneLayout.jsx

@@ -86,7 +86,7 @@ export default function PhoneLayout({ data: appointment }) {
         )}
         {!!facility && (
           <>
-            {facility.name}
+            <a href={facility.website}>{facility.name}</a>
             <br />
             <Address address={facility?.address} />
           </>

src/applications/vaos/components/layout/PhoneLayout.unit.spec.js

@@ -25,6 +25,8 @@ describe('VAOS Component: PhoneLayout', () => {
               value: '307-778-7550',
             },
           ],
+          website:
+            'https://www.va.gov/cheyenne-health-care/locations/cheyenne-va-medical-center/',
         },
       },
     },
@@ -243,6 +245,11 @@ describe('VAOS Component: PhoneLayout', () => {
         }),
       );
       expect(screen.getByText(/Cheyenne VA Medical Center/i));
+      expect(
+        screen.container.querySelector(
+          'a[href="https://www.va.gov/cheyenne-health-care/locations/cheyenne-va-medical-center/"]',
+        ),
+      ).to.be.ok;
       expect(screen.getByText(/2360 East Pershing Boulevard/i));
       expect(screen.container.querySelector('va-icon[icon="directions"]')).not
         .to.exist;

src/applications/vaos/components/layout/VARequestLayout.jsx

@@ -89,7 +89,7 @@ export default function VARequestLayout({ data: appointment }) {
             )}
           {!!facility?.name && (
             <>
-              {facility.name}
+              <a href={facility.website}>{facility.name}</a>
               <br />
             </>
           )}

src/applications/vaos/components/layout/VARequestLayout.unit.spec.js

@@ -24,6 +24,8 @@ describe('VAOS Component: VARequestLayout', () => {
               value: '307-778-7550',
             },
           ],
+          website:
+            'https://www.va.gov/cheyenne-health-care/locations/cheyenne-va-medical-center/',
         },
       },
     },
@@ -112,6 +114,11 @@ describe('VAOS Component: VARequestLayout', () => {
 
       expect(screen.getByRole('heading', { level: 2, name: /Facility/i }));
       expect(screen.getByText(/Cheyenne VA Medical Center/i));
+      expect(
+        screen.container.querySelector(
+          'a[href="https://www.va.gov/cheyenne-health-care/locations/cheyenne-va-medical-center/"]',
+        ),
+      ).to.be.ok;
       expect(screen.getByText(/2360 East Pershing Boulevard/i));
 
       expect(screen.container.querySelector('va-icon[icon="directions"]')).to.be

src/applications/vaos/components/layout/VideoLayout.jsx

@@ -91,7 +91,7 @@ export default function VideoLayout({ data: appointment }) {
         <Section heading="Scheduling facility">
           {!!facility && (
             <>
-              {facility.name}
+              <a href={facility.website}>{facility.name}</a>
               <br />
               <span>
                 {address.city}, <State state={address.state} />
@@ -140,7 +140,7 @@ export default function VideoLayout({ data: appointment }) {
             <br />
             {facility ? (
               <>
-                {facility.name}
+                <a href={facility.website}>{facility.name}</a>
                 <br />
                 <span>
                   {address.city}, <State state={address.state} />

src/applications/vaos/components/layout/VideoLayout.unit.spec.js

@@ -25,6 +25,8 @@ describe('VAOS Component: VideoLayout', () => {
               value: '307-778-7550',
             },
           ],
+          website:
+            'https://www.va.gov/cheyenne-health-care/locations/cheyenne-va-medical-center/',
         },
       },
     },
@@ -276,6 +278,11 @@ describe('VAOS Component: VideoLayout', () => {
         }),
       );
       expect(screen.getByText(/Cheyenne VA Medical Center/i));
+      expect(
+        screen.container.querySelector(
+          'a[href="https://www.va.gov/cheyenne-health-care/locations/cheyenne-va-medical-center/"]',
+        ),
+      ).to.be.ok;
       expect(screen.queryByText(/2360 East Pershing Boulevard/i)).not.to.exist;
 
       expect(screen.getByText(/Clinic: Clinic 1/i));

src/applications/vaos/components/layout/VideoLayoutAtlas.jsx

@@ -113,7 +113,7 @@ export default function VideoLayoutAtlas({ data: appointment }) {
           )}
           {!!facility && (
             <>
-              {facility.name}
+              <a href={facility.website}>{facility.name}</a>
               <br />
               <ClinicOrFacilityPhone
                 clinicPhone={clinicPhone}
@@ -156,7 +156,7 @@ export default function VideoLayoutAtlas({ data: appointment }) {
             <br />
             {facility ? (
               <>
-                {facility.name}
+                <a href={facility.website}>{facility.name}</a>
                 <br />
                 <span>
                   {address.city}, <State state={address.state} />

src/applications/vaos/components/layout/VideoLayoutAtlas.unit.spec.js

@@ -25,6 +25,8 @@ describe('VAOS Component: VideoLayoutAtlas', () => {
               value: '307-778-7550',
             },
           ],
+          website:
+            'https://www.va.gov/cheyenne-health-care/locations/cheyenne-va-medical-center/',
         },
       },
     },
@@ -354,6 +356,11 @@ describe('VAOS Component: VideoLayoutAtlas', () => {
         }),
       );
       expect(screen.getByText(/Cheyenne VA Medical Center/i));
+      expect(
+        screen.container.querySelector(
+          'a[href="https://www.va.gov/cheyenne-health-care/locations/cheyenne-va-medical-center/"]',
+        ),
+      ).to.be.ok;
       expect(screen.queryByText(/2360 East Pershing Boulevard/i)).not.to.exist;
       expect(screen.container.querySelector('va-icon[icon="directions"]')).to.be
         .ok;

src/applications/vaos/components/layout/VideoLayoutVA.jsx

@@ -106,7 +106,7 @@ export default function VideoLayoutVA({ data: appointment }) {
           )}
         {!!facility && (
           <>
-            {facility.name}
+            <a href={facility.website}>{facility.name}</a>
             <br />
             <Address address={facility?.address} />
             <div className="vads-u-margin-top--1 vads-u-color--link-default">

src/applications/vaos/components/layout/VideoLayoutVA.unit.spec.js

@@ -25,6 +25,8 @@ describe('VAOS Component: VideoLayoutVA', () => {
               value: '307-778-7550',
             },
           ],
+          website:
+            'https://www.va.gov/cheyenne-health-care/locations/cheyenne-va-medical-center/',
         },
       },
     },
@@ -379,6 +381,11 @@ describe('VAOS Component: VideoLayoutVA', () => {
           }),
         );
         expect(screen.getByText(/Cheyenne VA Medical Center/i));
+        expect(
+          screen.container.querySelector(
+            'a[href="https://www.va.gov/cheyenne-health-care/locations/cheyenne-va-medical-center/"]',
+          ),
+        ).to.be.ok;
         expect(screen.getByText(/2360 East Pershing Boulevard/i));
         expect(screen.container.querySelector('va-icon[icon="directions"]')).to
           .be.ok;

src/applications/vaos/services/location/transformers.js

@@ -48,6 +48,7 @@ export function transformFacilityV2(facility) {
       state: facility.physicalAddress.state,
       postalCode: facility.physicalAddress.postalCode,
     },
+    website: facility.website,
   };
 }