[PM-27879] Add AC shared MJML components (#6605)

.github/CODEOWNERS

@@ -36,6 +36,7 @@ util/Setup/** @bitwarden/dept-bre @bitwarden/team-platform-dev
 
 # UIF
 src/Core/MailTemplates/Mjml @bitwarden/team-ui-foundation # Teams are expected to own sub-directories of this project
+src/Core/MailTemplates/Mjml/.mjmlconfig # This change allows teams to add components within their own subdirectories without requiring a code review from UIF.
 
 # Auth team
 **/Auth @bitwarden/team-auth-dev

src/Core/MailTemplates/Mjml/.mjmlconfig

@@ -2,6 +2,7 @@
   "packages": [
     "components/mj-bw-hero",
     "components/mj-bw-icon-row",
-    "components/mj-bw-learn-more-footer"
+    "components/mj-bw-learn-more-footer",
+    "emails/AdminConsole/components/mj-bw-inviter-info"
   ]
 }

src/Core/MailTemplates/Mjml/emails/AdminConsole/components/mj-bw-inviter-info.js

@@ -0,0 +1,35 @@
+const { BodyComponent } = require("mjml-core");
+
+class MjBwInviterInfo extends BodyComponent {
+
+    static dependencies = {
+        "mj-column": ["mj-bw-inviter-info"],
+        "mj-wrapper": ["mj-bw-inviter-info"],
+        "mj-bw-inviter-info": [],
+    };
+
+    static allowedAttributes = {
+    "expiration-date": "string", // REQUIRED: Date to display
+    "email-address": "string", // Optional: Email address to display
+    };
+
+  render() {
+    const emailAddressText = this.getAttribute("email-address")
+      ? `This invitation was sent by <a href="mailto:${this.getAttribute("email-address")}" class="link">${this.getAttribute("email-address")}</a> and expires `
+      : "This invitation expires ";
+
+    return this.renderMJML(
+      `
+      <mj-section background-color="#fff" padding="15px 10px 10px 10px">
+        <mj-column>
+          <mj-text font-size="12px" line-height="24px" padding="10px 15px">
+            ${emailAddressText + this.getAttribute("expiration-date")}
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      `
+    );
+  }
+}
+
+module.exports = MjBwInviterInfo;

src/Core/MailTemplates/Mjml/emails/AdminConsole/components/mobile-app-download.mjml

@@ -0,0 +1,38 @@
+
+<mj-section background-color="#fff" padding="30px 30px 10px 30px">
+    <mj-column>
+        <mj-text font-size="18px" font-weight="700" line-height="32px" padding="0 0 15px 0">
+            Download Bitwarden on all devices
+        </mj-text>
+        <mj-text font-size="15px" line-height="16px" padding="0 0 20px 0">
+            Already using the <a href="https://bitwarden.com/download/" class="link">browser extension</a>?
+            Download the Bitwarden mobile app from the
+            <a href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744" class="link">App Store</a>
+            or <a href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden" class="link">Google Play</a>
+            to quickly save logins and autofill forms on the go.
+        </mj-text>
+    </mj-column>
+</mj-section>
+
+<mj-section background-color="#fff" padding="0 30px 20px 30px">
+    <mj-group>
+        <mj-column width="120px" vertical-align="middle">
+            <mj-image
+                href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744"
+                src="https://assets.bitwarden.com/email/v1/App-store.png"
+                alt="Download on the App Store"
+                width="120px"
+                padding="0"
+            />
+        </mj-column>
+        <mj-column width="150px" vertical-align="middle">
+            <mj-image
+                href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden"
+                src="https://assets.bitwarden.com/email/v1/google-play-badge.png"
+                alt="Get it on Google Play"
+                width="150px"
+                padding="0 0 0 10px"
+            />
+        </mj-column>
+    </mj-group>
+</mj-section>