VACMS-18457 Implement action links on Event CTAs

additional.d.ts

@@ -1,35 +1,36 @@
 /// <reference types="react-scripts" />
 
-declare module 'nock'
-declare module 'test-utils'
-declare module '@testing-library/react'
 declare module '@department-of-veterans-affairs/component-library'
-declare module '@department-of-veterans-affairs/component-library/Table'
-declare module '@department-of-veterans-affairs/component-library/LoadingIndicator'
 declare module '@department-of-veterans-affairs/component-library/AlertBox'
-declare module '@department-of-veterans-affairs/component-library/DropDownPanel'
-declare module '@department-of-veterans-affairs/component-library/Breadcrumbs'
 declare module '@department-of-veterans-affairs/component-library/Banner'
-declare module '@department-of-veterans-affairs/component-library/TextInput'
-declare module '@department-of-veterans-affairs/component-library/TextArea'
+declare module '@department-of-veterans-affairs/component-library/Breadcrumbs'
+declare module '@department-of-veterans-affairs/component-library/dist/react-bindings'
+declare module '@department-of-veterans-affairs/component-library/DropDownPanel'
+declare module '@department-of-veterans-affairs/component-library/LoadingIndicator'
 declare module '@department-of-veterans-affairs/component-library/Modal'
 declare module '@department-of-veterans-affairs/component-library/Pagination'
 declare module '@department-of-veterans-affairs/component-library/ProgressButton'
 declare module '@department-of-veterans-affairs/component-library/PromoBanner'
-declare module '@department-of-veterans-affairs/component-library/dist/react-bindings'
-declare module 'mq-polyfill'
+declare module '@department-of-veterans-affairs/component-library/Table'
+declare module '@department-of-veterans-affairs/component-library/TextArea'
+declare module '@department-of-veterans-affairs/component-library/TextInput'
+declare module '@testing-library/react'
 declare module 'debug'
+declare module 'mq-polyfill'
+declare module 'nock'
+declare module 'test-utils'
 
 declare namespace JSX {
   interface IntrinsicElements {
+    'va-accordion-item'
+    'va-accordion'
     'va-alert'
-    'va-link'
-    'va-icon'
-    'va-button'
+    'va-back-to-top'
     'va-breadcrumbs'
-    'va-accordion'
-    'va-accordion-item'
+    'va-button'
+    'va-icon'
+    'va-link'
+    'va-link-action'
     'va-on-this-page'
-    'va-back-to-top'
   }
 }

src/lib/utils/events.test.ts

@@ -2,6 +2,13 @@ import { formatEventCTA, createMailToLink } from './events'
 
 describe('formatEventCTA', () => {
   describe('formatEventCTA', () => {
+    it('should format "rsvp" as "RSVP"', () => {
+      const input = 'rsvp'
+      const expected = 'RSVP'
+      const result = formatEventCTA(input)
+      expect(result).toBe(expected)
+    })
+
     it('should format "register_now" as "Register now"', () => {
       const input = 'register_now'
       const expected = 'Register now'

src/lib/utils/events.ts

@@ -1,6 +1,10 @@
 import { deriveFormattedTimestamp } from './date'
 
 export function formatEventCTA(input: string): string {
+  if (input.toLowerCase() === 'rsvp') {
+    return 'RSVP'
+  }
+
   const words: string[] = input.split('_')
 
   const formattedString: string = words

src/templates/layouts/event/index.tsx

@@ -75,6 +75,8 @@ export const Event = ({
     .filter(Boolean)
     .join(', ')
 
+  const eventCTAText = formatEventCTA(eventCTA)
+
   return (
     <div className="va-l-detail-page va-facility-page">
       <div className="usa-grid usa-grid-full">
@@ -228,33 +230,26 @@ export const Event = ({
               </p>
             ) : (
               <>
-                {link && (
-                  <p className="vads-u-margin--0">
-                    <a className="vads-c-action-link--green" href={link?.uri}>
-                      {eventCTA && eventCTA != 'more_details'
-                        ? eventCTA.toLowerCase() === 'rsvp'
-                          ? eventCTA.toUpperCase()
-                          : eventCTA.charAt(0).toUpperCase() + eventCTA.slice(1)
-                        : 'More details'}
-                    </a>
-                  </p>
+                {link && eventCTAText && (
+                  <va-link-action
+                    class="vads-u-display--block"
+                    href={link?.uri}
+                    text={eventCTAText}
+                  />
                 )}
                 {howToSignUp === 'email' && (
                   <>
-                    {mostRecentDate && (
-                      <p className="vads-u-margin--0">
-                        <a
-                          className="vads-c-action-link--green"
-                          href={createMailToLink(
-                            emailCTA,
-                            title,
-                            mostRecentDate,
-                            link?.uri
-                          )}
-                        >
-                          {eventCTA && formatEventCTA(eventCTA)}
-                        </a>
-                      </p>
+                    {mostRecentDate && eventCTAText && (
+                      <va-link-action
+                        class="vads-u-display--block"
+                        href={createMailToLink(
+                          emailCTA,
+                          title,
+                          mostRecentDate,
+                          link?.uri
+                        )}
+                        text={eventCTAText}
+                      />
                     )}
                   </>
                 )}