Skip to content

Ac/pm 21742/update confirmed to org email templates #6683

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JimmyVo16 merged 16 commits into from
Dec 9, 2025
+1,948 −32
Merged

Ac/pm 21742/update confirmed to org email templates #6683

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
7982f21
[PM-21742] Add confirmed-to-organization-enterprise-teams
JimmyVo16 Dec 3, 2025
2ac4ae0
[PM-21742] Fix mjml validation
JimmyVo16 Dec 3, 2025
f28cf2f
[PM-21742] undo
JimmyVo16 Dec 4, 2025
357ecd2
[PM-21742] wip
JimmyVo16 Dec 4, 2025
10e04f0
Merge branch 'main' into ac/pm-21742/update-confirmed-to-org-email-te…
JimmyVo16 Dec 5, 2025
29150fb
Merge branch 'main' into ac/pm-21742/update-confirmed-to-org-email-te…
JimmyVo16 Dec 5, 2025
b018dd0
Merge branch 'main' into ac/pm-21742/update-confirmed-to-org-email-te…
JimmyVo16 Dec 5, 2025
ff82ccc
[PM-21742] wip
JimmyVo16 Dec 5, 2025
4adb7ea
[PM-21742] update styling
JimmyVo16 Dec 5, 2025
efe18b2
[PM-21742] wip
JimmyVo16 Dec 5, 2025
8ff3ba9
Merge branch 'main' into ac/pm-21742/update-confirmed-to-org-email-te…
JimmyVo16 Dec 8, 2025
5177577
[PM-21742] wip
JimmyVo16 Dec 8, 2025
ad6bedd
[PM-21742] Add Family Free template and .text.hbs files.
JimmyVo16 Dec 8, 2025
83f117f
[PM-21742] Actually add the text files.
JimmyVo16 Dec 8, 2025
9a38eee
[PM-21742] Product feedback
JimmyVo16 Dec 8, 2025
ab69748
[PM-21742] claude feedback
JimmyVo16 Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
815 changes: 815 additions & 0 deletions ...AdminConsole/OrganizationConfirmation/organization-confirmation-enterprise-teams.html.hbs
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions ...AdminConsole/OrganizationConfirmation/organization-confirmation-enterprise-teams.text.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{{#>TitleContactUsTextLayout}}
You may now access logins and other items {{OrganizationName}} has shared with you from your Bitwarden vault.
Tip: Use the Bitwarden mobile app to quickly save logins and auto-fill forms. Download from the App Store or Google Play.
{{/TitleContactUsTextLayout}}
983 changes: 983 additions & 0 deletions ...MJML/AdminConsole/OrganizationConfirmation/organization-confirmation-family-free.html.hbs
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions ...MJML/AdminConsole/OrganizationConfirmation/organization-confirmation-family-free.text.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{{#>TitleContactUsTextLayout}}
You may now access logins and other items {{OrganizationName}} has shared with you from your Bitwarden vault.
Tip: Use the Bitwarden mobile app to quickly save logins and auto-fill forms. Download from the App Store or Google Play.
{{/TitleContactUsTextLayout}}
69 changes: 37 additions & 32 deletions src/Core/MailTemplates/Mjml/components/mj-bw-icon-row.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
const { BodyComponent } = require("mjml-core");

const BODY_TEXT_STYLES = `
Copy link
Contributor Author

@JimmyVo16 JimmyVo16 Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey folks, I got some feedback from Sukhleen that the font spacing doesn’t align with the design. I think this wasn’t caught earlier because the welcome email doesn’t have multi-line text, but the org confirmation email does.

I also noticed that the style from mj-bw-icon-row-text isn’t being applied to the text. I can’t get the styling to apply through the CSS class; it might be related to how MJML renders it.

Image

The workaround is to inject the styling directly.

I’m open to any suggestions on how to handle this better.

Copy link
Contributor

@BryanCunningham BryanCunningham Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like it's being overridden by another class/style. Not sure what that is or why though

font-family="Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif"
font-size="16px"
font-weight="400"
line-height="24px"
`;

class MjBwIconRow extends BodyComponent {
static dependencies = {
"mj-column": ["mj-bw-icon-row"],
Expand All @@ -18,7 +26,7 @@ class MjBwIconRow extends BodyComponent {

static defaultAttributes = {};

headStyle = (breakpoint) => {
headStyle = (breakpoint) => {
return `
@media only screen and (max-width:${breakpoint}) {
.mj-bw-icon-row-text {
Expand All @@ -36,30 +44,35 @@ class MjBwIconRow extends BodyComponent {
render() {
const headAnchorElement =
this.getAttribute("head-url-text") && this.getAttribute("head-url")
? `<a href="${this.getAttribute("head-url")}" class="link">
${this.getAttribute("head-url-text")}
<span style="text-decoration: none">
<img src="https://assets.bitwarden.com/email/v1/bwi-external-link-16px.png"
alt="External Link Icon"
width="16px"
style="vertical-align: middle;"
/>
</span>
</a>`
? `
<mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px" ${BODY_TEXT_STYLES}>
<a href="${this.getAttribute("head-url")}" class="link">
${this.getAttribute("head-url-text")}
<span style="text-decoration: none">
<img src="https://assets.bitwarden.com/email/v1/bwi-external-link-16px.png"
alt="External Link Icon"
width="16px"
style="vertical-align: middle;"
/>
</span>
</a>
</mj-text>`
: "";

const footAnchorElement =
this.getAttribute("foot-url-text") && this.getAttribute("foot-url")
? `<a href="${this.getAttribute("foot-url")}" class="link">
${this.getAttribute("foot-url-text")}
<span style="text-decoration: none">
<img src="https://assets.bitwarden.com/email/v1/bwi-external-link-16px.png"
alt="External Link Icon"
width="16px"
style="vertical-align: middle;"
/>
</span>
</a>`
? `<mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px" ${BODY_TEXT_STYLES}>
<a href="${this.getAttribute("foot-url")}" class="link">
${this.getAttribute("foot-url-text")}
<span style="text-decoration: none">
<img src="https://assets.bitwarden.com/email/v1/bwi-external-link-16px.png"
alt="External Link Icon"
width="16px"
style="vertical-align: middle;"
/>
</span>
</a>
</mj-text>`
: "";

return this.renderMJML(
Expand All @@ -76,19 +89,11 @@ class MjBwIconRow extends BodyComponent {
/>
</mj-column>
<mj-column width="85%" vertical-align="top">
<mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px">
` +
headAnchorElement +
`
</mj-text>
<mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px">
${headAnchorElement}
<mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px" ${BODY_TEXT_STYLES}>
${this.getAttribute("text")}
</mj-text>
<mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px">
` +
footAnchorElement +
`
</mj-text>
${footAnchorElement}
</mj-column>
</mj-group>
</mj-section>
Expand Down
50 changes: 50 additions & 0 deletions ...ils/AdminConsole/OrganizationConfirmation/organization-confirmation-enterprise-teams.mjml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<mjml>
<mj-head>
<mj-include path="../../../components/head.mjml" />
</mj-head>

<mj-body css-class="border-fix">
<!-- Blue Header Section -->
<mj-wrapper css-class="border-fix" padding="20px 20px 10px 20px">
<mj-bw-hero
img-src="https://assets.bitwarden.com/email/v1/spot-enterprise.png"
title="You can now share passwords with members of {{OrganizationName}}!"
button-text="Log in"
button-url="https://vault.bitwarden.com"
/>
</mj-wrapper>

<!-- Main Content -->
<mj-wrapper padding="5px 20px 10px 20px">
<mj-section background-color="#fff" padding="15px 10px 10px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="10px 15px">
As a member of <b>{{OrganizationName}}</b>:
</mj-text>
</mj-column>
</mj-section>
<mj-bw-icon-row
icon-src="https://assets.bitwarden.com/email/v1/icon-enterprise.png"
icon-alt="Organization Icon"
text="Your account is owned by {{OrganizationName}} and is subject to their security and management policies."
/>
<mj-bw-icon-row
icon-src="https://assets.bitwarden.com/email/v1/icon-account-switching-new.png"
icon-alt="Group Users Icon"
text="You can easily access and share passwords with your team."
foot-url-text="Share passwords in Bitwarden"
foot-url="https://bitwarden.com/help/share-to-a-collection/"
/>
<mj-section background-color="#fff" padding="0 20px 20px 20px">
</mj-section>
</mj-wrapper>

<!-- Learn More Section -->
<mj-wrapper padding="5px 20px 10px 20px">
<mj-bw-learn-more-footer />
</mj-wrapper>

<!-- Footer -->
<mj-include path="../../../components/footer.mjml" />
</mj-body>
</mjml>
55 changes: 55 additions & 0 deletions ...l/emails/AdminConsole/OrganizationConfirmation/organization-confirmation-family-free.mjml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<mjml>
<mj-head>
<mj-include path="../../../components/head.mjml" />
</mj-head>

<mj-body css-class="border-fix">
<!-- Blue Header Section -->
<mj-wrapper css-class="border-fix" padding="20px 20px 10px 20px">
<mj-bw-hero
img-src="https://assets.bitwarden.com/email/v1/spot-family-homes.png"
title="You can now share passwords with members of {{OrganizationName}}!"
button-text="Log in"
button-url="https://vault.bitwarden.com"
/>
</mj-wrapper>

<!-- Main Content -->
<mj-wrapper padding="5px 20px 10px 20px">
<mj-section background-color="#fff" padding="15px 10px 10px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="10px 15px">
As a member of <b>{{OrganizationName}}</b>:
</mj-text>
</mj-column>
</mj-section>
<mj-bw-icon-row
icon-src="https://assets.bitwarden.com/email/v1/icon-item-type.png"
icon-alt="Collections Icon"
text="You can access passwords {{OrganizationName}} has shared with you."
/>
<mj-bw-icon-row
icon-src="https://assets.bitwarden.com/email/v1/icon-account-switching-new.png"
icon-alt="Group Users Icon"
text="You can easily share passwords with friends, family, or coworkers."
foot-url-text="Share passwords in Bitwarden"
foot-url="https://bitwarden.com/help/share-to-a-collection/"
/>
<mj-section background-color="#fff" padding="0 20px 20px 20px">
</mj-section>
</mj-wrapper>

<!-- Download Mobile Apps Section -->
<mj-wrapper padding="5px 20px 10px 20px">
<mj-include path="../components/mobile-app-download.mjml" />
</mj-wrapper>

<!-- Learn More Section -->
<mj-wrapper padding="5px 20px 10px 20px">
<mj-bw-learn-more-footer />
</mj-wrapper>

<!-- Footer -->
<mj-include path="../../../components/footer.mjml" />
</mj-body>
</mjml>
Loading