feat: [AB#16898] add utm links to email, fix styling

Author: ashlsun

api/src/functions/messagingService/reactEmail/components/Header.tsx

@@ -1,13 +1,13 @@
 import { Column, Link, Markdown, Row, Section } from "@react-email/components";
 
-export const Header = (): JSX.Element => {
+export const Header = (props: { utmString?: string }): JSX.Element => {
   return (
     <Section style={{ fontSize: "12px" }}>
       <Row style={{ backgroundColor: "#1B1B1B", color: "#FFFFFF", padding: "12px 20px" }}>
         <Column>Official Site of the State of New Jersey</Column>{" "}
         <Column style={{ textAlign: "right" }}>
           <Link
-            href="https://account.business.nj.gov"
+            href={`https://account.business.nj.gov/${props.utmString}`}
             style={{ color: "inherit", textDecoration: "underline" }}
           >
             account.business.nj.gov
@@ -16,7 +16,7 @@ export const Header = (): JSX.Element => {
       </Row>
       <Row style={{ backgroundColor: "#F8F8F8", padding: "0 20px" }}>
         <Column>
-          <Markdown>
+          <Markdown markdownCustomStyles={{ link: { color: "black" } }}>
             **For Your Safety.** We will never send or ask for your personal or business information
             by email. If you suspect a scam, report it at
             [cyber.nj.gov/report](https://cyber.nj.gov/report)

api/src/functions/messagingService/reactEmail/emails/welcomeEmailShortVersion.tsx

@@ -20,7 +20,7 @@ export const WelcomeEmailShortVersion = (): JSX.Element => {
         <title>Welcome to Business.NJ.gov</title>
       </Head>
       <Container style={{ fontFamily: "sans-serif" }}>
-        <Header />
+        <Header utmString="?utm_source=myaccount-welcome-email&utm_medium=email&utm_campaign=welcome-email&utm_content=welcome-email-B-version1-black-ribbon-header" />
 
         {/* Body section */}
         <Section style={{ padding: "0 24px" }}>
@@ -40,11 +40,11 @@ export const WelcomeEmailShortVersion = (): JSX.Element => {
           </Row>
           <Hr />
           <Row>
-            <Markdown>
+            <Markdown markdownCustomStyles={{ link: { color: "black" } }}>
               Congratulations on creating your account with
-              [Business.NJ.gov](https://account.business.nj.gov/dashboard).
+              **[Business.NJ.gov](https://account.business.nj.gov/dashboard?utm_source=myaccount-welcome-email&utm_medium=email&utm_campaign=welcome-email&utm_content=welcome-email-B-version1-inline-message-business.nj.gov)**.
             </Markdown>
-            <Markdown>
+            <Markdown markdownContainerStyles={{ paddingBottom: "18px" }}>
               You've joined **200,000+ business owners** who've used the site to start, operate, and
               grow their businesses.
             </Markdown>
@@ -53,7 +53,7 @@ export const WelcomeEmailShortVersion = (): JSX.Element => {
           {/* Call to action section */}
           <Section
             style={{
-              backgroundColor: "#f9fbfb",
+              backgroundColor: "#F9FBFB",
               borderRadius: "20px",
               textAlign: "center",
               padding: "0 0 24px",
@@ -72,7 +72,7 @@ export const WelcomeEmailShortVersion = (): JSX.Element => {
                 Log In to Get Started
               </h2>
               <Button
-                href="https://account.business.nj.gov/dashboard"
+                href="https://account.business.nj.gov/dashboard?utm_source=myaccount-welcome-email&utm_medium=email&utm_campaign=welcome-email&utm_content=welcome-email-B-version1-green-cta"
                 style={{
                   background: "#4b7600",
                   color: "#fff",
@@ -84,8 +84,13 @@ export const WelcomeEmailShortVersion = (): JSX.Element => {
               </Button>
             </Row>
             <Row>
-              <Text style={{ textDecoration: "underline", color: "#3D4551" }}>
-                https://account.business.nj.gov/dashboard
+              <Text>
+                <Link
+                  href="https://account.business.nj.gov/dashboard"
+                  style={{ textDecoration: "underline", color: "#3D4551" }}
+                >
+                  https://account.business.nj.gov/dashboard
+                </Link>
               </Text>
             </Row>
           </Section>
@@ -105,21 +110,21 @@ export const WelcomeEmailShortVersion = (): JSX.Element => {
               {/* Links */}
               <Link
                 style={{ color: "inherit", textDecoration: "underline" }}
-                href="https://business.nj.gov/privacy-policy"
+                href="https://business.nj.gov/privacy-policy?utm_source=myaccount-welcome-email&utm_medium=email&utm_campaign=welcome-email&utm_content=welcome-email-B-version1-footer-privacy-policy"
               >
                 Privacy Policy
               </Link>{" "}
               <span style={{ padding: " 0 8px" }}>|</span>
               <Link
                 style={{ color: "inherit", textDecoration: "underline" }}
-                href="https://business.nj.gov/contact-us"
+                href="https://business.nj.gov/contact-us?utm_source=myaccount-welcome-email&utm_medium=email&utm_campaign=welcome-email&utm_content=welcome-email-B-version1-footer-contact-us"
               >
                 Contact Us
               </Link>{" "}
               <span style={{ padding: " 0 8px" }}>|</span>
               <Link
                 style={{ color: "inherit", textDecoration: "underline" }}
-                href="https://account.business.nj.gov/profile"
+                href="https://account.business.nj.gov/profile?utm_source=myaccount-welcome-email&utm_medium=email&utm_campaign=welcome-email&utm_content=welcome-email-B-version1-footer-manage-notifications"
               >
                 Manage Notifications
               </Link>