Skip to content

Commit

Permalink
server: adjust layout in emails
Browse files Browse the repository at this point in the history
  • Loading branch information
@emilwidlund
emilwidlund committed Nov 22, 2024
1 parent 07d8ffe commit e28fb6d
Show file tree
Hide file tree
Showing 6 changed files with 102 additions and 42 deletions.
83 changes: 59 additions & 24 deletions server/polar/email/email_templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,16 +116,16 @@
/* Buttons ------------------------------ */

.button {
background-color: #4872c8;
border-top: 10px solid #4872c8;
border-right: 18px solid #4872c8;
border-bottom: 10px solid #4872c8;
border-left: 18px solid #4872c8;
background-color: #0062FF;
border-top: 10px solid #0062FF;
border-right: 18px solid #0062FF;
border-bottom: 10px solid #0062FF;
border-left: 18px solid #0062FF;
display: inline-block;
color: #FFF !important;
font-weight: bold;
text-decoration: none;
border-radius: 8px;
border-radius: 99px;
-webkit-text-size-adjust: none;
box-sizing: border-box;
}
Expand Down Expand Up @@ -326,9 +326,21 @@
/* Masthead ----------------------- */

.email-masthead {
padding: 25px 0;
text-align: center;
height: 30px;
width: 100%;
margin: 0;
padding: 0;
-premailer-width: 100%;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
}

.email-masthead_inner {
width: 570px;
margin: 0 auto;
padding: 0;
-premailer-width: 570px;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
}

.email-masthead a {
Expand Down Expand Up @@ -359,11 +371,11 @@

.email-masthead_feat {
display: inline-block;
height: 30px;
font-size: 18px;
text-decoration: none;
text-shadow: none;
vertical-align: super;
padding-left: 45px;
}

.email-masthead_feat_plus {
Expand Down Expand Up @@ -418,13 +430,27 @@
.body-sub {
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid #EAEAEC;
}

.content-cell {
padding: 45px;
}

.order-summary {
padding-top: 25px;
padding-bottom: 25px;
}

.product-image {
padding-top: 25px;
padding-bottom: 25px;
}

.order-summary .product-name {
font-weight: bold;
font-size: 18px;
}

/*Media Queries ------------------------------ */

@media only screen and (max-width: 600px) {
Expand Down Expand Up @@ -501,19 +527,28 @@
<td align="center">
<table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="email-masthead">
<a href="https://polar.sh" class="f-fallback email-masthead_logo">
<img src="https://polar.sh/email-logo.png" alt="Polar"
class="email-masthead_logo_light" />
<img src="https://polar.sh/email-logo-dark.png" alt="Polar"
class="email-masthead_logo_dark" />
</a>
{% if featured_organization is defined %}
<div class="email-masthead_feat">
<span class="email-masthead_feat_plus"> + </span>
<span>{{ featured_organization.slug }}</span>
</div>
{% endif %}
<td class="email-masthead" width="570" cellpadding="0" cellspacing="0">
<table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0"
role="presentation">

<tr>
<td class="content-cell">
<a href="https://polar.sh" class="f-fallback email-masthead_logo">
<img src="https://polar.sh/email-logo.png" alt="Polar"
class="email-masthead_logo_light" />
<img src="https://polar.sh/email-logo-dark.png" alt="Polar"
class="email-masthead_logo_dark" />
</a>
</td>
</tr>
{% if featured_organization is defined %}
<tr>
<td class="email-masthead_feat">
<span>{{ featured_organization.slug }}</span>
</td>
</tr>
{% endif %}
</table>
</td>
</tr>
<!-- Email Body -->
Expand Down
26 changes: 18 additions & 8 deletions server/polar/order/email_templates/confirmation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,23 @@

{% block body %}
<h1>Thank you for your order!</h1>
<p>Your order of <strong>{{ product.name }}</strong> is now processed.</strong> As part of your purchase, you have access to the following benefits:</p>
<ul>
{% for benefit in product.benefits %}
<li>{{ benefit.description }}</li>
{% endfor %}
</ul>
<p>You can access them right away from Polar by clicking on the button below:</p>

{% if product.medias is defined and product.medias[0] is defined and product.medias[0].public_url is defined %}
<img class="product-image" src="{{ product.medias[0].public_url }}" width="100%" alt="Product Image"></img>
{% endif %}

<table class="order-summary" width="100%" cellpadding="10" cellspacing="0" role="presentation">
<tr>
<td class="product-name">{{ product.name }}</td>
<td align="right">${{ order.amount / 100 }}</td>
</tr>
{% for benefit in product.benefits %}
<tr class="benefit">
<td>{{ benefit.description }}</td>
</tr>
{% endfor %}
</table>

<!-- Action -->
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
Expand All @@ -18,7 +28,7 @@ <h1>Thank you for your order!</h1>
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tr>
<td align="center">
<a href="{{ url | safe }}" class="f-fallback button">Access my benefits</a>
<a href="{{ url | safe }}" class="f-fallback button" style="width: 100%;">Access Purchase</a>
</td>
</tr>
</table>
Expand Down
6 changes: 5 additions & 1 deletion server/polar/order/service.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@
from polar.webhook.webhooks import WebhookTypeObject
from polar.worker import enqueue_job

from ..product.service.product import product as product_service

log: Logger = structlog.get_logger()


Expand Down Expand Up @@ -489,14 +491,16 @@ async def send_confirmation_email(
email_renderer = get_email_renderer({"order": "polar.order"})
email_sender = get_email_sender()

product = order.product
product = await product_service.get_loaded(session, order.product_id)

user = order.user
subject, body = email_renderer.render_from_template(
"Your {{ product.name }} order confirmation",
"order/confirmation.html",
{
"featured_organization": organization,
"product": product,
"order": order,
"url": f"{settings.FRONTEND_BASE_URL}/purchases/products/{order.id}",
"current_year": datetime.now().year,
},
Expand Down
2 changes: 1 addition & 1 deletion server/polar/subscription/email_templates/cancellation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ <h1>Your subscription has been canceled</h1>
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tr>
<td align="center">
<a href="{{ url | safe }}" class="f-fallback button">Manage my subscription</a>
<a href="{{ url | safe }}" class="f-fallback button" style="width: 100%;">Manage my subscription</a>
</td>
</tr>
</table>
Expand Down
26 changes: 18 additions & 8 deletions server/polar/subscription/email_templates/confirmation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,23 @@

{% block body %}
<h1>Thank you for your subscription!</h1>
<p>Your subscription to <strong>{{ product.name }}</strong> is now active.</strong> As part of it, you have access to the following benefits:</p>
<ul>
{% for benefit in product.benefits %}
<li>{{ benefit.description }}</li>
{% endfor %}
</ul>
<p>You can access them right away from Polar by clicking on the button below:</p>

{% if product.medias is defined and product.medias[0] is defined and product.medias[0].public_url is defined %}
<img class="product-image" src="{{ product.medias[0].public_url }}" width="100%" alt="Product Image"></img>
{% endif %}

<table class="order-summary" width="100%" cellpadding="10" cellspacing="0" role="presentation">
<tr>
<td class="product-name">{{ product.name }}</td>
<td align="right">${{ subscription.amount / 100 }} /{{ subscription.recurring_interval }}</td>
</tr>
{% for benefit in product.benefits %}
<tr class="benefit">
<td>{{ benefit.description }}</td>
</tr>
{% endfor %}
</table>

<!-- Action -->
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
Expand All @@ -18,7 +28,7 @@ <h1>Thank you for your subscription!</h1>
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tr>
<td align="center">
<a href="{{ url | safe }}" class="f-fallback button">Access my benefits</a>
<a href="{{ url | safe }}" class="f-fallback button" style="width: 100%;">Access Subscription</a>
</td>
</tr>
</table>
Expand Down
1 change: 1 addition & 0 deletions server/polar/subscription/service.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -722,6 +722,7 @@ async def send_confirmation_email(
{
"featured_organization": featured_organization,
"product": product,
"subscription": subscription,
"url": (
f"{settings.FRONTEND_BASE_URL}"
f"/purchases/subscriptions/{subscription.id}"
Expand Down

0 comments on commit e28fb6d

Please sign in to comment.