✨(backend) email invitation to new users
When generating an Invitation object within the database, our intention is to promptly notify the user via email. We send them an invitation to join Desk. This code is inspired by Joanie successful order flow. Johann's design was missing a link to Desk, I simply added a button which redirect to the staging url. This url is hardcoded, we should refactor it when we will deploy Desk in pre-prod or prod environments. Johann's design relied on Marianne font. I implemented a simpler version, which uses a google font. That's not important for MVP. Look and feel of this first invitation template is enough to make our PoC functionnal, which is the more important.
This commit is contained in:
Lebaud Antoine
committed by
aleb_the_flash
aleb_the_flash
parent
1919dce3a9
commit
522914b47a
@@ -1,28 +0,0 @@
|
||||
<mjml>
|
||||
<mj-include path="./partial/header.mjml" />
|
||||
<mj-body mj-class="bg--blue-100">
|
||||
<mj-wrapper css-class="wrapper" padding="20px 40px 40px 40px">
|
||||
<mj-section>
|
||||
<mj-column>
|
||||
<mj-image src="{% base64_static 'people/images/logo_people.png' %}" width="200px" align="left" alt="{%trans 'Company logo' %}" />
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<mj-section mj-class="bg--blue-100" border-radius="6px 6px 0 0" padding="30px 50px 60px 50px">
|
||||
<mj-column>
|
||||
<mj-text padding="0">
|
||||
<p>
|
||||
{%if fullname%}
|
||||
{% blocktranslate with name=fullname %}Hello {{ name }}{% endblocktranslate %}
|
||||
{% else %}
|
||||
{%trans "Hello" %}
|
||||
{% endif %}<br/>
|
||||
<strong>{%trans "Thank you very much for your visit!"%}</strong>
|
||||
</p>
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
</mj-wrapper>
|
||||
<mj-include path="./partial/footer.mjml" />
|
||||
</mj-body>
|
||||
</mjml>
|
||||
|
||||
57
src/mail/mjml/invitation.mjml
Normal file
57
src/mail/mjml/invitation.mjml
Normal file
@@ -0,0 +1,57 @@
|
||||
<mjml>
|
||||
<mj-include path="./partial/header.mjml" />
|
||||
|
||||
<mj-body mj-class="bg--blue-100">
|
||||
<mj-wrapper css-class="wrapper" padding="0 40px 40px 40px">
|
||||
<mj-section background-url="{% base64_static 'images/mail-header-background.png' %}" background-size="cover" background-repeat="no-repeat" background-position="0 -30px">
|
||||
<mj-column>
|
||||
<mj-image align="center" src="{% base64_static 'images/logo-suite-numerique.png' %}" width="250px" align="left" alt="{%trans 'La Suite Numérique' %}" />
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<mj-section mj-class="bg--white-100" padding="30px 20px 60px 20px">
|
||||
<mj-column>
|
||||
<mj-text font-size="14px">
|
||||
<p>{% trans "Invitation to join a team" %}</p>
|
||||
</mj-text>
|
||||
|
||||
<!-- Welcome Message -->
|
||||
<mj-text>
|
||||
<h1>{% trans "Welcome to" %} <strong>Equipes</strong></h1>
|
||||
</mj-text>
|
||||
<mj-divider border-width="1px" border-style="solid" border-color="#DDDDDD" width="30%" align="left"/>
|
||||
|
||||
<mj-image src="{% base64_static 'images/logo.png' %}" width="157px" align="left" alt="{%trans 'Logo' %}" />
|
||||
|
||||
<!-- Main Message -->
|
||||
<mj-text>{% trans "We are delighted to welcome you to our community on Equipes, your new companion to simplify the management of your groups efficiently, intuitively, and securely." %}</mj-text>
|
||||
<mj-text>{% trans "Our application is designed to help you organize, collaborate, and manage permissions." %}</mj-text>
|
||||
<mj-text>
|
||||
{% trans "With Equipes, you will be able to:" %}
|
||||
<ul>
|
||||
<li>{% trans "Create customized groups according to your specific needs."%}</li>
|
||||
<li>{% trans "Invite members of your team or community in just a few clicks."%}</li>
|
||||
<li>{% trans "Plan events, meetings, or activities effortlessly with our integrated calendar."%}</li>
|
||||
<li>{% trans "Share documents, photos, and important information securely."%}</li>
|
||||
<li>{% trans "Facilitate exchanges and communication with our messaging and group discussion tools."%}</li>
|
||||
</ul>
|
||||
</mj-text>
|
||||
<mj-button href="https://desk-staging.beta.numerique.gouv.fr/" background-color="#000091" color="white" padding-bottom="30px">
|
||||
{% trans "Visit Equipes"%}
|
||||
</mj-button>
|
||||
<mj-text>{% trans "We are confident that Equipes will help you increase efficiency and productivity while strengthening the bond among members." %}</mj-text>
|
||||
<mj-text>{% trans "Feel free to explore all the features of the application and share your feedback and suggestions with us. Your feedback is valuable to us and will enable us to continually improve our service." %}</mj-text>
|
||||
<mj-text>{% trans "Once again, welcome aboard! We are eager to accompany you on this group management adventure." %}</mj-text>
|
||||
|
||||
<!-- Signature -->
|
||||
<mj-text>
|
||||
<p>{% trans "Sincerely," %}</p>
|
||||
<p>{% trans "The La Suite Numérique Team" %}</p>
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
</mj-wrapper>
|
||||
</mj-body>
|
||||
|
||||
<mj-include path="./partial/footer.mjml" />
|
||||
</mjml>
|
||||
|
||||
@@ -14,10 +14,8 @@
|
||||
font-family="Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"
|
||||
font-size="16px"
|
||||
line-height="1.5em"
|
||||
color="#031963"
|
||||
color="#3A3A3A"
|
||||
/>
|
||||
<mj-class name="text--small" font-size="0.875rem" />
|
||||
<mj-class name="bg--blue-100" background-color="#EDF5FA" />
|
||||
</mj-attributes>
|
||||
<mj-style>
|
||||
/* Reset */
|
||||
@@ -33,7 +31,7 @@
|
||||
<mj-style>
|
||||
/* Global styles */
|
||||
h1 {
|
||||
color: #055FD2;
|
||||
color: #161616;
|
||||
font-size: 2rem;
|
||||
line-height: 1em;
|
||||
font-weight: 700;
|
||||
|
||||
Reference in New Issue
Block a user