Added labs test to investigate impact of email bg color on cards

apps/admin-x-settings/src/components/settings/advanced/labs/PrivateFeatures.tsx

@@ -15,6 +15,10 @@ const features = [{
     title: 'Email customization',
     description: 'Adding more control over the newsletter template',
     flag: 'emailCustomization'
+}, {
+    title: 'Email customization (investigation)',
+    description: 'Enables hardcoded changes to the email template to test card compatibility',
+    flag: 'emailCustomizationInvestigation'
 }, {
     title: 'Import Member Tier',
     description: 'Enables tier to be specified when importing members',

ghost/core/core/shared/labs.js

@@ -46,6 +46,7 @@ const PRIVATE_FEATURES = [
     'importMemberTier',
     'urlCache',
     'emailCustomization',
+    'emailCustomizationInvestigation',
     'mailEvents',
     'collectionsCard',
     'lexicalIndicators',

ghost/core/test/e2e-api/admin/__snapshots__/config.test.js.snap

@@ -19,6 +19,7 @@ Object {
       "customFonts": true,
       "editorExcerpt": true,
       "emailCustomization": true,
+      "emailCustomizationInvestigation": true,
       "explore": true,
       "i18n": true,
       "importMemberTier": true,

ghost/core/test/e2e-api/admin/email-previews.test.js

@@ -38,6 +38,7 @@ describe('Email Preview API', function () {
 
     beforeEach(function () {
         mockManager.mockMailgun();
+        mockManager.mockLabsDisabled('emailCustomizationInvestigation');
         sinon.stub(settingsHelpers, 'getMembersValidationKey').returns('test-validation-key');
     });
 

ghost/core/test/integration/services/email-service/cards.test.js

@@ -69,6 +69,13 @@ describe('Can send cards via email', function () {
     beforeEach(function () {
         mockManager.mockMail();
         mockManager.mockMailgun();
+
+        sinon.stub(labs, 'isSet').callsFake((key) => {
+            if (labs.GA_KEYS.includes(key)) {
+                return true;
+            }
+            return false;
+        });
     });
 
     afterEach(async function () {
@@ -151,8 +158,6 @@ describe('Can send cards via email', function () {
     // means we can have snapshots for both free and non-free members
     ['status:free', 'status:-free'].forEach(function (status) {
         it(`renders the golden post correctly (no labs flags) (${status})`, async function () {
-            sinon.stub(labs, 'isSet').returns(false);
-
             const data = await sendEmail(agent, {
                 lexical: JSON.stringify(goldenPost)
             }, status);
@@ -163,13 +168,6 @@ describe('Can send cards via email', function () {
         });
 
         it(`renders the golden post correctly (labs flag: contentVisibility) (${status})`, async function () {
-            sinon.stub(labs, 'isSet').callsFake((key) => {
-                if (key === 'contentVisibility') {
-                    return true;
-                }
-                return false;
-            });
-
             const data = await sendEmail(agent, {
                 lexical: JSON.stringify(goldenPost)
             }, status);

ghost/email-service/lib/email-templates/partials/styles.hbs

@@ -18,6 +18,9 @@ img.is-dark-background {
 
 body {
     background-color: #fff;
+    {{#hasFeature "emailCustomizationInvestigation"}}
+    background-color: #f0c5c2;
+    {{/hasFeature}}
     font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     font-size: 18px;
@@ -48,6 +51,9 @@ table td {
 ------------------------------------- */
 .body {
     background-color: #fff;
+    {{#hasFeature "emailCustomizationInvestigation"}}
+    background-color: #f0c5c2;
+    {{/hasFeature}}
     width: 100%;
 }
 
@@ -522,7 +528,7 @@ figure blockquote p {
     color: #15212A;
     font-size: 13px !important;
     font-weight: 500;
-    margin: 1em 0 0 0; 
+    margin: 1em 0 0 0;
     line-height: 1.4em;
     word-break: break-word;
 }
@@ -1166,7 +1172,7 @@ img.kg-cta-image {
 }
 
 .kg-cta-minimal a.kg-cta-button {
-    display: inline-block; 
+    display: inline-block;
     font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
     font-size: 0.85em;
     font-weight: 600;
@@ -1180,7 +1186,7 @@ img.kg-cta-image {
 }
 
 .kg-cta-immersive a.kg-cta-button {
-    display: inline-block; 
+    display: inline-block;
     width: 100%;
     font-size: 0.9em;
     font-weight: 600;
@@ -1467,6 +1473,9 @@ img.kg-cta-image {
 ------------------------------------- */
 .main {
     background: #ffffff;
+    {{#hasFeature "emailCustomizationInvestigation"}}
+    background-color: #f0c5c2;
+    {{/hasFeature}}
     border-radius: 3px;
     border-spacing: 20px 0;
     width: 100%;
@@ -1983,7 +1992,7 @@ img.kg-cta-image {
     table.body .kg-cta-minimal .kg-cta-content-inner {
         display: inline-block !important;
         width: 100% !important;
-        padding: 0 !important; 
+        padding: 0 !important;
     }
 
     table.body .kg-cta-minimal img.kg-cta-image {

ghost/email-service/lib/email-templates/template.hbs

@@ -153,7 +153,7 @@
 
                             {{#if (or feedbackButtons newsletter.showCommentCta) }}
                                 <tr>
-                                    <td dir="ltr" width="100%" style="background-color: #ffffff; text-align: center; padding: 32px 0 24px; border-bottom: 1px solid #e0e7eb;" align="center">
+                                    <td dir="ltr" width="100%" style="background-color: #ffffff;{{#hasFeature "emailCustomizationInvestigation"}}background-color: #f0c5c2;{{/hasFeature}} text-align: center; padding: 32px 0 24px; border-bottom: 1px solid #e0e7eb;" align="center">
                                         <table class="feedback-buttons" role="presentation" border="0" cellpadding="0" cellspacing="0">
                                             <tr>
                                                 {{#if feedbackButtons }}