[MM-44729] Update payment failed email (#20925)

* Update Payment Failed Email

* Actually add the mjml file:

* Fix mjml indentation

* Fix pipelines

* Fix translations

* Fix translations

* Clean up translations

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>

app/cloud.go

@@ -40,14 +40,40 @@ func (a *App) getSysAdminsEmailRecipients() ([]*model.User, *model.AppError) {
 	return a.GetUsersFromProfiles(userOptions)
 }
 
+func getCurrentPlanName(a *App) (string, *model.AppError) {
+	subscription, err := a.Cloud().GetSubscription("")
+	if err != nil {
+		return "", model.NewAppError("getCurrentPlanName", "app.cloud.get_subscription.app_error", nil, err.Error(), http.StatusInternalServerError)
+	}
+	if subscription == nil {
+		return "", model.NewAppError("getCurrentPlanName", "app.cloud.get_subscription.app_error", nil, "", http.StatusInternalServerError)
+	}
+
+	products, err := a.Cloud().GetCloudProducts("", false)
+	if err != nil {
+		return "", model.NewAppError("getCurrentPlanName", "app.cloud.get_cloud_products.app_error", nil, err.Error(), http.StatusInternalServerError)
+	}
+	if products == nil {
+		return "", model.NewAppError("getCurrentPlanName", "app.cloud.get_cloud_products.app_error", nil, "", http.StatusInternalServerError)
+	}
+
+	planName := getCurrentProduct(subscription.ProductID, products).Name
+	return planName, nil
+}
+
 func (a *App) SendPaymentFailedEmail(failedPayment *model.FailedPayment) *model.AppError {
 	sysAdmins, err := a.getSysAdminsEmailRecipients()
 	if err != nil {
 		return err
 	}
 
+	planName, err := getCurrentPlanName(a)
+	if err != nil {
+		return model.NewAppError("SendPaymentFailedEmail", "app.cloud.get_current_plan_name.app_error", nil, err.Error(), http.StatusInternalServerError)
+	}
+
 	for _, admin := range sysAdmins {
-		_, err := a.Srv().EmailService.SendPaymentFailedEmail(admin.Email, admin.Locale, failedPayment, *a.Config().ServiceSettings.SiteURL)
+		_, err := a.Srv().EmailService.SendPaymentFailedEmail(admin.Email, admin.Locale, failedPayment, planName, *a.Config().ServiceSettings.SiteURL)
 		if err != nil {
 			a.Log().Error("Error sending payment failed email", mlog.Err(err))
 		}
@@ -69,6 +95,11 @@ func (a *App) SendDelinquencyEmail(emailToSend model.DelinquencyEmail) *model.Ap
 	if aErr != nil {
 		return aErr
 	}
+	planName, aErr := getCurrentPlanName(a)
+	if aErr != nil {
+		return model.NewAppError("SendDelinquencyEmail", "app.cloud.get_current_plan_name.app_error", nil, aErr.Error(), http.StatusInternalServerError)
+	}
+
 	subscription, err := a.Cloud().GetSubscription("")
 	if err != nil {
 		return model.NewAppError("SendDelinquencyEmail", "app.cloud.get_subscription.app_error", nil, err.Error(), http.StatusInternalServerError)
@@ -77,16 +108,6 @@ func (a *App) SendDelinquencyEmail(emailToSend model.DelinquencyEmail) *model.Ap
 		return model.NewAppError("SendDelinquencyEmail", "app.cloud.get_subscription.app_error", nil, "", http.StatusInternalServerError)
 	}
 
-	products, err := a.Cloud().GetCloudProducts("", false)
-	if err != nil {
-		return model.NewAppError("SendDelinquencyEmail", "app.cloud.get_cloud_products.app_error", nil, err.Error(), http.StatusInternalServerError)
-	}
-	if products == nil {
-		return model.NewAppError("SendDelinquencyEmail", "app.cloud.get_cloud_products.app_error", nil, "", http.StatusInternalServerError)
-	}
-
-	planName := getCurrentProduct(subscription.ProductID, products).Name
-
 	if subscription.DelinquentSince == nil {
 		return model.NewAppError("SendDelinquencyEmail", "app.cloud.get_subscription_delinquency_date.app_error", nil, "", http.StatusInternalServerError)
 	}

app/email/email.go

@@ -943,24 +943,27 @@ func (es *Service) SendLicenseUpForRenewalEmail(email, name, locale, siteURL, re
 	return nil
 }
 
-func (es *Service) SendPaymentFailedEmail(email string, locale string, failedPayment *model.FailedPayment, siteURL string) (bool, error) {
+func (es *Service) SendPaymentFailedEmail(email string, locale string, failedPayment *model.FailedPayment, planName, siteURL string) (bool, error) {
 	T := i18n.GetUserTranslations(locale)
 
-	subject := T("api.templates.payment_failed.subject")
+	subject := T("api.templates.payment_failed.subject", map[string]any{"Plan": planName})
 
 	data := es.NewEmailTemplateData(locale)
 	data.Props["SiteURL"] = siteURL
 	data.Props["Title"] = T("api.templates.payment_failed.title")
-	data.Props["Info1"] = T("api.templates.payment_failed.info1", map[string]any{"CardBrand": failedPayment.CardBrand, "LastFour": failedPayment.LastFour})
-	data.Props["Info2"] = T("api.templates.payment_failed.info2")
-	data.Props["Info3"] = T("api.templates.payment_failed.info3")
-	data.Props["Button"] = T("api.templates.over_limit_fix_now")
+	data.Props["SubTitle1"] = T("api.templates.payment_failed.info1", map[string]any{"CardBrand": failedPayment.CardBrand, "LastFour": failedPayment.LastFour})
+	data.Props["SubTitle2"] = T("api.templates.payment_failed.info2")
+	data.Props["FailedReason"] = failedPayment.FailureMessage
+	data.Props["SubTitle3"] = T("api.templates.payment_failed.info3", map[string]any{"Plan": planName})
+	data.Props["QuestionTitle"] = T("api.templates.questions_footer.title")
+	data.Props["QuestionInfo"] = T("api.templates.questions_footer.info")
+	data.Props["SupportEmail"] = *es.config().SupportSettings.SupportEmail
+	data.Props["Button"] = T("api.templates.delinquency_45.button")
+	data.Props["IncludeSecondaryActionButton"] = false
 	data.Props["EmailUs"] = T("api.templates.email_us_anytime_at")
 
 	data.Props["Footer"] = T("api.templates.copyright")
 
-	data.Props["FailedReason"] = failedPayment.FailureMessage
-
 	body, err := es.templatesContainer.RenderToString("payment_failed_body", data)
 	if err != nil {
 		return false, err

app/email/mocks/ServiceInterface.go

@@ -463,20 +463,20 @@ func (_m *ServiceInterface) SendPasswordResetEmail(_a0 string, token *model.Toke
 	return r0, r1
 }
 
-// SendPaymentFailedEmail provides a mock function with given fields: _a0, locale, failedPayment, siteURL
-func (_m *ServiceInterface) SendPaymentFailedEmail(_a0 string, locale string, failedPayment *model.FailedPayment, siteURL string) (bool, error) {
-	ret := _m.Called(_a0, locale, failedPayment, siteURL)
+// SendPaymentFailedEmail provides a mock function with given fields: _a0, locale, failedPayment, planName, siteURL
+func (_m *ServiceInterface) SendPaymentFailedEmail(_a0 string, locale string, failedPayment *model.FailedPayment, planName string, siteURL string) (bool, error) {
+	ret := _m.Called(_a0, locale, failedPayment, planName, siteURL)
 
 	var r0 bool
-	if rf, ok := ret.Get(0).(func(string, string, *model.FailedPayment, string) bool); ok {
-		r0 = rf(_a0, locale, failedPayment, siteURL)
+	if rf, ok := ret.Get(0).(func(string, string, *model.FailedPayment, string, string) bool); ok {
+		r0 = rf(_a0, locale, failedPayment, planName, siteURL)
 	} else {
 		r0 = ret.Get(0).(bool)
 	}
 
 	var r1 error
-	if rf, ok := ret.Get(1).(func(string, string, *model.FailedPayment, string) error); ok {
-		r1 = rf(_a0, locale, failedPayment, siteURL)
+	if rf, ok := ret.Get(1).(func(string, string, *model.FailedPayment, string, string) error); ok {
+		r1 = rf(_a0, locale, failedPayment, planName, siteURL)
 	} else {
 		r1 = ret.Error(1)
 	}

app/email/service.go

@@ -142,7 +142,7 @@ type ServiceInterface interface {
 	SendNotificationMail(to, subject, htmlBody string) error
 	SendMailWithEmbeddedFiles(to, subject, htmlBody string, embeddedFiles map[string]io.Reader, messageID string, inReplyTo string, references string) error
 	SendLicenseUpForRenewalEmail(email, name, locale, siteURL, renewalLink string, daysToExpiration int) error
-	SendPaymentFailedEmail(email string, locale string, failedPayment *model.FailedPayment, siteURL string) (bool, error)
+	SendPaymentFailedEmail(email string, locale string, failedPayment *model.FailedPayment, planName, siteURL string) (bool, error)
 	// Cloud delinquency email sequence
 	SendDelinquencyEmail7(email, locale, siteURL, planName string) error
 	SendDelinquencyEmail14(email, locale, siteURL, planName string) error

i18n/en.json

@@ -3579,10 +3579,6 @@
     "id": "api.templates.mfa_deactivated_body.title",
     "translation": "Multi-factor authentication was removed"
   },
-  {
-    "id": "api.templates.over_limit_fix_now",
-    "translation": "Fix Now"
-  },
   {
     "id": "api.templates.password_change_body.info",
     "translation": "Your password has been updated for {{.TeamDisplayName}} on {{ .TeamURL }} by {{.Method}}."
@@ -3605,15 +3601,15 @@
   },
   {
     "id": "api.templates.payment_failed.info3",
-    "translation": "To ensure uninterrupted subscription to Mattermost Cloud, please either contact your financial institution to fix the underlying problem or update your payment information. Once payment information is updated, Mattermost will attempt to settle any outstanding balance."
+    "translation": "To ensure uninterrupted access to Mattermost {{.Plan}}, please either contact your financial institution to fix the underlying problem or update your payment information. Once payment information is updated, Mattermost will attempt to settle any outstanding balance."
   },
   {
     "id": "api.templates.payment_failed.subject",
-    "translation": "Action required: Payment failed for Mattermost Cloud"
+    "translation": "Action required: Payment failed for Mattermost {{.Plan}}"
   },
   {
     "id": "api.templates.payment_failed.title",
-    "translation": "Failed Payment"
+    "translation": "The payment wasn't successful"
   },
   {
     "id": "api.templates.payment_failed_no_card.button",
@@ -4791,6 +4787,10 @@
     "id": "app.cloud.get_cloud_products.app_error",
     "translation": "Couldn't retrieve cloud products"
   },
+  {
+    "id": "app.cloud.get_current_plan_name.app_error",
+    "translation": "Unable to get current plan name"
+  },
   {
     "id": "app.cloud.get_subscription.app_error",
     "translation": "Couldn't retrieve cloud subscription"

templates/cloud_45_day_arrears.html

@@ -418,7 +418,7 @@
                                   <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                     <tr>
                                       <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;border-top:16px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
-                                        <a href="{{.Props.SiteURL}}/admin_console/billing/payment_info" style="display: inline-block; background: #FFFFFF; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-family: Open Sans, sans-serif; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px; font-weight: 400;" target="_blank">
+                                        <a href="{{.Props.SiteURL}}/admin_console/billing/subscription?action=show_delinquency_modal" style="display: inline-block; background: #FFFFFF; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-family: Open Sans, sans-serif; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px; font-weight: 400;" target="_blank">
                                           {{.Props.Button}}
                                         </a>
                                       </td>

templates/cloud_90_day_arrears.html

@@ -418,7 +418,7 @@
                                   <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                     <tr>
                                       <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;border-top:16px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
-                                        <a href="{{.Props.SiteURL}}/admin_console/billing/payment_info" style="display: inline-block; background: #FFFFFF; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-family: Open Sans, sans-serif; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px; font-weight: 400;" target="_blank">
+                                        <a href="{{.Props.SiteURL}}/admin_console/billing/subscription?action=show_delinquency_modal" style="display: inline-block; background: #FFFFFF; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-family: Open Sans, sans-serif; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px; font-weight: 400;" target="_blank">
                                           {{.Props.Button}}
                                         </a>
                                       </td>

templates/partials/cloud_title_3subtitles_button.mjml

@@ -12,7 +12,7 @@
      <mj-text align="left" padding-bottom="24px" padding-top="0px" font-weight=400 color="#3F4350" font-size="16px" line-height="24px" font-family="Open Sans, sans-serif">
       {{.Props.SubTitle3}}
     </mj-text>
-    <mj-button href="{{.Props.SiteURL}}/admin_console/billing/payment_info" padding="0px" border-top="16px" font-weight="400 !important" css-class="button-cloud" font-family="Open Sans, sans-serif">
+    <mj-button href="{{.Props.SiteURL}}/admin_console/billing/subscription?action=show_delinquency_modal" padding="0px" border-top="16px" font-weight="400 !important" css-class="button-cloud" font-family="Open Sans, sans-serif">
       {{.Props.Button}}
     </mj-button>
     {{if .IncludeSecondaryActionButton}}

templates/payment_failed_body.html

@@ -1,95 +1,600 @@
 {{define "payment_failed_body"}}
-<html>
-<body>
-<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
-    style="margin-top: 20px; line-height: 1.7; color: #555;font-family: Arial; font-style: normal; font-weight: bold;">
-    <tr>
-        <td>
-            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
-                style="max-width: 660px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; background: #FFF;">
-                <tr>
-                    <td style="border: 1px solid #ddd;">
-                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
-                            <tr>
-                                <td style="padding: 20px 20px 10px; text-align:left;">
-                                    <img src="{{.Props.SiteURL}}/static/images/logo-email.png" style="opacity: 0.5"
-                                        width="130px" alt="">
-                                </td>
-                            </tr>
-                        </table>
-                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
-                            style="border-collapse: collapse; max-width: 443px">
-                            <tr style="width: 443px">
-                                <td>
-                                    <table border="0" cellpadding="0" cellspacing="0"
-                                        style="padding: 20px 0 0; text-align: center; margin: 0 auto">
-                                        <tr>
-                                            <td style="padding: 0 0 64px;">
-                                                <table align="center" border="0" cellpadding="0" cellspacing="0"
-                                                    width="371px">
-                                                    <tr>
-                                                        <td>
-                                                            <h2
-                                                                style="margin-bottom: 0; text-align: center; color: #3D3C40; font-weight: bold; margin-top: 10px; line-height: 32px; font-size: 28px; font-family: Arial">
-                                                                {{ .Props.Title }}</h2>
-                                                        </td>
-                                                    </tr>
-                                                </table>
-                                                <p
-                                                    style="font-weight: normal; color: #3D3C40; font-size: 16px; line-height: 24px; font-family: Arial">
-                                                    {{ .Props.Info1 }}</p>
-                                                <p style="margin-top: 16px; margin-bottom: 24px; font-weight: bold; font-size: 16px; line-height: 24px; color: #3D3C40; font-family: Arial">{{.Props.Info2}}<br>{{.Props.FailedReason}}</p>
-                                                <p style="margin-top: 24px; margin-bottom: 24px; font-weight: normal; font-size: 16px; line-height: 24px; color: #3D3C40; font-family: Arial">{{.Props.Info3}}</p>
-                                                <p style="margin: 31px 0 31px">
-                                                    <a href="{{.Props.SiteURL}}/admin_console/billing/subscription"
-                                                        target="_blank"
-                                                        style="font-weight: normal; border-radius: 4px; background: #1C58D9; color: #fff;outline: none; min-width: 200px; padding: 11px 24px 11px 24px; font-size: 16px; font-family: Arial; cursor: pointer; -webkit-appearance: none;text-decoration: none; margin-top: 16px;">{{ .Props.Button }}</a>
-                                                </p>
-                                            </td>
-                                        </tr>
-                                    </table>
-                                </td>
-                            </tr>
-                        </table>
-                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="612px">
-                            <tr>
-                                <td style="border-bottom: 1px solid #E5E5E5"></td>
-                            </tr>
-                        </table>
-                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%"
-                            style="max-width: 443px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; background: #FFF; border-collapse: collapse;">
-                            <tr>
-                                <td style="font-family: Arial; padding: 20px 20px 24px 48px; text-align:left;">
-                                    <h3 style="margin-bottom: 0;">Questions?</h3>
-                                    <p style="font-weight: normal; margin-top: 0;">{{ .Props.EmailUs }} <a
-                                            href="mailto:feedback@mattermost.com">feedback@mattermost.com</a></p>
-                                </td>
-                            </tr>
-                        </table>
-                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="612px">
-                            <tr>
-                                <td style="border-bottom: 1px solid #E5E5E5"></td>
-                            </tr>
-                        </table>
-                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
-                            style="font-family: Arial; line-height: 16px; font-size: 12px; background: #FFF;">
-                            <tr>
-                                <td
-                                    style="font-weight: normal; text-align: center;color: #AAA;font-size: 11px;padding-bottom: 10px;padding: 0;line-height: 16px;padding-bottom: 48px;padding-top: 4px;">
-                                    <p>
-                                        {{.Props.Organization}}<br>
-                                        {{.Props.Footer}}
-                                    </p>
-                                </td>
 
-                            </tr>
-                        </table>
-                    </td>
-                </tr>
-            </table>
-        </td>
-    </tr>
-</table>
+<!-- FILE: payment_failed_body.mjml -->
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+  <title>
+  </title>
+  <!--[if !mso]><!-->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!--<![endif]-->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style type="text/css">
+    #outlook a {
+      padding: 0;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }
+
+    table,
+    td {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+    }
+
+    img {
+      border: 0;
+      height: auto;
+      line-height: 100%;
+      outline: none;
+      text-decoration: none;
+      -ms-interpolation-mode: bicubic;
+    }
+
+    p {
+      display: block;
+      margin: 13px 0;
+    }
+  </style>
+  <!--[if mso]>
+        <xml>
+        <o:OfficeDocumentSettings>
+          <o:AllowPNG/>
+          <o:PixelsPerInch>96</o:PixelsPerInch>
+        </o:OfficeDocumentSettings>
+        </xml>
+        <![endif]-->
+  <!--[if lte mso 11]>
+        <style type="text/css">
+          .mj-outlook-group-fix { width:100% !important; }
+        </style>
+        <![endif]-->
+  <!--[if !mso]><!-->
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
+  </style>
+  <!--<![endif]-->
+  <style type="text/css">
+    @media only screen and (min-width:480px) {
+      .mj-column-per-100 {
+        width: 100% !important;
+        max-width: 100%;
+      }
+
+      .mj-column-per-50 {
+        width: 50% !important;
+        max-width: 50%;
+      }
+    }
+  </style>
+  <style media="screen and (min-width:480px)">
+    .moz-text-html .mj-column-per-100 {
+      width: 100% !important;
+      max-width: 100%;
+    }
+
+    .moz-text-html .mj-column-per-50 {
+      width: 50% !important;
+      max-width: 50%;
+    }
+  </style>
+  <style type="text/css">
+    @media only screen and (max-width:480px) {
+      table.mj-full-width-mobile {
+        width: 100% !important;
+      }
+
+      td.mj-full-width-mobile {
+        width: auto !important;
+      }
+    }
+  </style>
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
+
+    .emailBody {
+      background: #F3F3F3 !important;
+    }
+
+    .emailBody a {
+      text-decoration: none !important;
+      color: #1C58D9;
+    }
+
+    .title div {
+      font-weight: 600 !important;
+      font-size: 28px !important;
+      line-height: 36px !important;
+      letter-spacing: -0.01em !important;
+      color: #3F4350 !important;
+      font-family: Open Sans, sans-serif !important;
+    }
+
+    .subTitle div {
+      font-size: 16px !important;
+      line-height: 24px !important;
+      color: rgba(63, 67, 80, 0.64) !important;
+    }
+
+    .subTitle a {
+      color: rgb(28, 88, 217) !important;
+    }
+
+    .button a {
+      background-color: #1C58D9 !important;
+      font-weight: 600 !important;
+      font-size: 16px !important;
+      line-height: 18px !important;
+      color: #FFFFFF !important;
+      padding: 15px 24px !important;
+    }
+
+    .button-cloud a {
+      background-color: #1C58D9 !important;
+      font-weight: 400 !important;
+      font-family: Open Sans, sans-serif !important;
+      font-size: 16px !important;
+      line-height: 18px !important;
+      color: #FFFFFF !important;
+      padding: 15px 24px !important;
+    }
+
+    .messageButton a {
+      background-color: #FFFFFF !important;
+      border: 1px solid #FFFFFF !important;
+      box-sizing: border-box !important;
+      color: #1C58D9 !important;
+      padding: 12px 20px !important;
+      font-weight: 600 !important;
+      font-size: 14px !important;
+      line-height: 14px !important;
+    }
+
+    .info div {
+      font-size: 14px !important;
+      line-height: 20px !important;
+      color: #3F4350 !important;
+      padding: 40px 0px !important;
+    }
+
+    .footerTitle div {
+      font-weight: 600 !important;
+      font-size: 16px !important;
+      line-height: 24px !important;
+      color: #3F4350 !important;
+      padding: 0px 0px 4px 0px !important;
+    }
+
+    .footerInfo div {
+      font-size: 14px !important;
+      line-height: 20px !important;
+      color: #3F4350 !important;
+      padding: 0px 48px 0px 48px !important;
+    }
+
+    .footerInfo a {
+      color: #1C58D9 !important;
+    }
+
+    .appDownloadButton a {
+      background-color: #FFFFFF !important;
+      border: 1px solid #1C58D9 !important;
+      box-sizing: border-box !important;
+      color: #1C58D9 !important;
+      padding: 13px 20px !important;
+      font-weight: 600 !important;
+      font-size: 14px !important;
+      line-height: 14px !important;
+    }
+
+    .emailFooter div {
+      font-size: 12px !important;
+      line-height: 16px !important;
+      color: rgba(63, 67, 80, 0.56) !important;
+      padding: 8px 24px 8px 24px !important;
+    }
+
+    .postCard {
+      padding: 0px 24px 40px 24px !important;
+    }
+
+    .messageCard {
+      background: #FFFFFF !important;
+      border: 1px solid rgba(61, 60, 64, 0.08) !important;
+      box-sizing: border-box !important;
+      box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12) !important;
+      border-radius: 4px !important;
+      padding: 32px !important;
+    }
+
+    .messageAvatar img {
+      width: 32px !important;
+      height: 32px !important;
+      padding: 0px !important;
+      border-radius: 32px !important;
+    }
+
+    .messageAvatarCol {
+      width: 32px !important;
+    }
+
+    .postNameAndTime {
+      padding: 0px 0px 4px 0px !important;
+      display: flex;
+    }
+
+    .senderName {
+      font-family: Open Sans, sans-serif;
+      text-align: left !important;
+      font-weight: 600 !important;
+      font-size: 14px !important;
+      line-height: 20px !important;
+      color: #3F4350 !important;
+    }
+
+    .time {
+      font-family: Open Sans, sans-serif;
+      font-size: 12px;
+      line-height: 16px;
+      color: rgba(63, 67, 80, 0.56);
+      padding: 2px 6px;
+      align-items: center;
+      float: left;
+    }
+
+    .channelBg {
+      background: rgba(63, 67, 80, 0.08);
+      border-radius: 4px;
+      display: flex;
+      padding-left: 4px;
+    }
+
+    .channelLogo {
+      width: 10px;
+      height: 10px;
+      padding: 5px 4px 5px 6px;
+      float: left;
+    }
+
+    .channelName {
+      font-family: Open Sans, sans-serif;
+      font-weight: 600;
+      font-size: 10px;
+      line-height: 16px;
+      letter-spacing: 0.01em;
+      text-transform: uppercase;
+      color: rgba(63, 67, 80, 0.64);
+      padding: 2px 6px 2px 0px;
+    }
+
+    .gmChannelCount {
+      background-color: rgba(63, 67, 80, 0.2);
+      padding: 0 5px;
+      border-radius: 2px;
+      margin-right: 2px;
+    }
+
+    .senderMessage div {
+      text-align: left !important;
+      font-size: 14px !important;
+      line-height: 20px !important;
+      color: #3F4350 !important;
+      padding: 0px !important;
+    }
+
+    .senderInfoCol {
+      width: 394px !important;
+      padding: 0px 0px 0px 12px !important;
+    }
+
+    @media all and (min-width: 541px) {
+      .emailBody {
+        padding: 32px !important;
+      }
+    }
+
+    @media all and (max-width: 540px) and (min-width: 401px) {
+      .emailBody {
+        padding: 16px !important;
+      }
+
+      .messageCard {
+        padding: 16px !important;
+      }
+
+      .senderInfoCol {
+        width: 80% !important;
+        padding: 0px 0px 0px 12px !important;
+      }
+    }
+
+    @media all and (max-width: 400px) {
+      .emailBody {
+        padding: 0px !important;
+      }
+
+      .footerInfo div {
+        padding: 0px !important;
+      }
+
+      .messageCard {
+        padding: 16px !important;
+      }
+
+      .postCard {
+        padding: 0px 0px 40px 0px !important;
+      }
+
+      .senderInfoCol {
+        width: 80% !important;
+        padding: 0px 0px 0px 12px !important;
+      }
+    }
+  </style>
+</head>
+
+<body style="word-spacing:normal;">
+  <div class="emailBody" style="background: #F3F3F3;">
+    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:660px;" width="660" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:0;max-width:660px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:0;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:24px;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="660px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:612px;" width="612" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:612px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;border-top:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:24px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:562px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                                    <tbody>
+                                      <tr>
+                                        <td style="width:132px;">
+                                          <img alt height="21" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132">
+                                        </td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="660px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:612px;" width="612" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:612px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:0 60px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:490px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="left" class="title" style="font-size:0px;padding:10px 0px;padding-left:25px;word-break:break-word;">
+                                  <div style="text-align: left; font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: #3F4350; font-family: Open Sans, sans-serif;">{{.Props.Title}}</div>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td align="left" style="font-size:0px;padding:10px 25px;padding-bottom:16px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:16px;font-weight:400;line-height:24px;text-align:left;color:#3F4350;">{{.Props.SubTitle1}}</div>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td align="left" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:16px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:16px;font-weight:400;line-height:24px;text-align:left;color:#3F4350;">{{.Props.SubTitle2}}<br>{{.Props.FailedReason}}</div>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td align="left" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:24px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:16px;font-weight:400;line-height:24px;text-align:left;color:#3F4350;">{{.Props.SubTitle3}}</div>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td align="center" vertical-align="middle" class="button-cloud" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                                    <tr>
+                                      <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;border-top:16px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
+                                        <a href="{{.Props.SiteURL}}/admin_console/billing/subscription?action=show_delinquency_modal" style="display: inline-block; background: #FFFFFF; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-family: Open Sans, sans-serif; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px; font-weight: 400;" target="_blank">
+                                          {{.Props.Button}}
+                                        </a>
+                                      </td>
+                                    </tr>
+                                  </table>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td align="center" vertical-align="middle" style="font-size:0px;padding:0px;padding-top:12px;word-break:break-word;">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                                    <tr>
+                                      <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
+                                        <a href="{{.Props.SiteURL}}/admin_console/billing/subscription?action=show_delinquency_modal" style="display: inline-block; background: #FFFFFF; color: #166DE0; font-family: Open Sans, sans-serif; font-size: 13px; font-weight: 600; line-height: 120%; margin: 0; text-transform: none; padding: 10px 25px; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none;" target="_blank">
+                                          {{.Props.SecondaryActionButtonText}}
+                                        </a>
+                                      </td>
+                                    </tr>
+                                  </table>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="660px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:612px;" width="612" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:612px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:20px 0;padding-top:0px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:610px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                            <tbody>
+                              <tr>
+                                <td style="vertical-align:top;padding:0px;">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
+                                    <tbody>
+                                      <tr>
+                                        <td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
+                                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                                            <tbody>
+                                              <tr>
+                                                <td style="width:320px;">
+                                                  <img alt height="auto" src="{{.Props.SiteURL}}/static/images/cloud-laptop-error.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320">
+                                                </td>
+                                              </tr>
+                                            </tbody>
+                                          </table>
+                                        </td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="660px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:612px;" width="612" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:612px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:20px 0;padding-top:0px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:305px;" ><![endif]-->
+                        <div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                            <tbody>
+                              <tr>
+                                <td style="vertical-align:top;padding:0;">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
+                                    <tbody>
+                                      <tr>
+                                        <td align="left" style="font-size:0px;padding:0px;padding-bottom:0px;padding-left:48px;word-break:break-word;">
+                                          <div style="font-family:Open Sans, sans-serif;font-size:16px;font-weight:600;line-height:1;text-align:left;color:#000000;">{{.Props.QuestionTitle}}</div>
+                                        </td>
+                                      </tr>
+                                      <tr>
+                                        <td align="left" style="font-size:0px;padding:10px 25px;padding-bottom:0px;padding-left:48px;word-break:break-word;">
+                                          <div style="font-family:Open Sans, sans-serif;font-size:14px;line-height:1;text-align:left;color:#3F4350;">{{.Props.QuestionInfo}}
+                                            <a href="mailto:{{.Props.SupportEmail}}" style="color: #1C58D9; text-decoration: none;">
+                                              {{.Props.SupportEmail}}</a>
+                                          </div>
+                                        </td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:305px;" ><![endif]-->
+                        <div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                            <tbody>
+                              <tr>
+                                <td style="vertical-align:top;padding-bottom:0px;">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
+                                    <tbody>
+                                      <tr>
+                                        <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                                          <p style="border-top:solid 1px #E5E5E5;font-size:1px;margin:0px auto;width:100%;">
+                                          </p>
+                                          <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #E5E5E5;font-size:1px;margin:0px auto;width:255px;" role="presentation" width="255px" ><tr><td style="height:0;line-height:0;"> &nbsp;
+</td></tr></table><![endif]-->
+                                        </td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="660px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:612px;" width="612" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:612px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="border-bottom:1px solid #E5E5E5;border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:20px 0;padding-bottom:24px;padding-top:0px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:610px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                            <tbody>
+                              <tr>
+                                <td style="vertical-align:top;padding:0;">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
+                                    <tbody>
+                                      <tr>
+                                        <td align="center" style="font-size:0px;padding:0;word-break:break-word;">
+                                          <div style="font-family:Open Sans, sans-serif;font-size:12px;line-height:1;text-align:center;color:#AAAAAA;">{{.Props.Organization}}
+                                            {{.Props.FooterV2}}
+                                          </div>
+                                        </td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><![endif]-->
+  </div>
 </body>
+
 </html>
+
 {{end}}

templates/payment_failed_body.mjml

@@ -0,0 +1,41 @@
+<mjml>
+  <mj-head>
+    <mj-include path="./partials/style.mjml" />
+  </mj-head>
+  <mj-body css-class="emailBody" width="660px">
+    <mj-wrapper mj-class="email" border-radius="0">
+      <mj-section padding="24px" border-top="1px solid #E5E5E5" border-left="1px solid #E5E5E5" border-right="1px solid #E5E5E5">
+        <mj-column>
+          <mj-image mj-class="logo" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" />
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0 60px" border-left="1px solid #E5E5E5" border-right="1px solid #E5E5E5">
+        <mj-column>
+          <mj-text padding-left="25px" align="left" css-class="title" font-family="Open Sans, sans-serif" padding="10px 0px">
+            {{.Props.Title}}
+          </mj-text>
+          <mj-text align="left" padding-bottom="16px" font-weight=400 color="#3F4350" font-size="16px" line-height="24px" font-family="Open Sans, sans-serif">
+            {{.Props.SubTitle1}}
+          </mj-text>
+          <mj-text align="left" padding-bottom="16px" padding-top="0px" font-weight=400 color="#3F4350" font-size="16px" line-height="24px" font-family="Open Sans, sans-serif">
+            {{.Props.SubTitle2}}<br>{{.Props.FailedReason}}
+          </mj-text>
+          <mj-text align="left" padding-bottom="24px" padding-top="0px" font-weight=400 color="#3F4350" font-size="16px" line-height="24px" font-family="Open Sans, sans-serif">
+            {{.Props.SubTitle3}}
+          </mj-text>
+          <mj-button href="{{.Props.SiteURL}}/admin_console/billing/subscription?action=show_delinquency_modal" padding="0px" border-top="16px" font-weight="400 !important" css-class="button-cloud" font-family="Open Sans, sans-serif">
+            {{.Props.Button}}
+          </mj-button>
+          {{if .IncludeSecondaryActionButton}}
+          <mj-button color="#166DE0" align="center" padding-top="12px" font-weight="600" href="{{.Props.SiteURL}}/admin_console/billing/subscription?action=show_delinquency_modal">
+            {{.Props.SecondaryActionButtonText}}
+          </mj-button>
+          {{end}}
+        </mj-column>
+      </mj-section>
+
+      <mj-include path="./partials/cloud_laptop_error.mjml" />
+      <mj-include path="./partials/cloud_questions_hr_email_footer.mjml" />
+    </mj-wrapper>
+  </mj-body>
+</mjml>