From 8ff29ed1e323165fd17025fc09e71ab183c7e3b2 Mon Sep 17 00:00:00 2001 From: Jordan Isip Date: Mon, 4 Mar 2024 10:49:55 -0500 Subject: [PATCH] Adding welcome email sample and polishing other sample templates. --- .../src/App/SamplesDrawer/index.tsx | 1 + .../src/getConfiguration/index.tsx | 3 + .../sample/empty-email-message.ts | 2 +- .../getConfiguration/sample/reset-password.ts | 14 +- .../src/getConfiguration/sample/welcome.ts | 170 ++++++++++++++++++ 5 files changed, 182 insertions(+), 8 deletions(-) create mode 100644 packages/editor-sample/src/getConfiguration/sample/welcome.ts diff --git a/packages/editor-sample/src/App/SamplesDrawer/index.tsx b/packages/editor-sample/src/App/SamplesDrawer/index.tsx index 18782ef..adf8ecb 100644 --- a/packages/editor-sample/src/App/SamplesDrawer/index.tsx +++ b/packages/editor-sample/src/App/SamplesDrawer/index.tsx @@ -29,6 +29,7 @@ export default function SamplesDrawer() { Empty + Welcome email One-time passcode (OTP) Reset password E-commerce receipt diff --git a/packages/editor-sample/src/getConfiguration/index.tsx b/packages/editor-sample/src/getConfiguration/index.tsx index c8972ee..6de8235 100644 --- a/packages/editor-sample/src/getConfiguration/index.tsx +++ b/packages/editor-sample/src/getConfiguration/index.tsx @@ -6,11 +6,14 @@ import RESERVATION_REMINDER from './sample/reservation-reminder'; import RESET_PASSWORD from './sample/reset-password'; import RESPOND_TO_MESSAGE from './sample/respond-to-message'; import SUBSCRIPTION_RECEIPT from './sample/subscription-receipt'; +import WELCOME from './sample/welcome'; export default function getConfiguration(template: string) { if (template.startsWith('#sample/')) { const sampleName = template.replace('#sample/', ''); switch (sampleName) { + case 'welcome': + return WELCOME; case 'one-time-password': return ONE_TIME_PASSCODE; case 'order-ecomerce': diff --git a/packages/editor-sample/src/getConfiguration/sample/empty-email-message.ts b/packages/editor-sample/src/getConfiguration/sample/empty-email-message.ts index 78bd217..1ef9925 100644 --- a/packages/editor-sample/src/getConfiguration/sample/empty-email-message.ts +++ b/packages/editor-sample/src/getConfiguration/sample/empty-email-message.ts @@ -4,7 +4,7 @@ const EMPTY_EMAIL_MESSAGE: TEditorConfiguration = { root: { type: 'EmailLayout', data: { - backdropColor: '#F5F5F5', + backdropColor: '#F8F8F8', canvasColor: '#FFFFFF', textColor: '#242424', fontFamily: 'MODERN_SANS', diff --git a/packages/editor-sample/src/getConfiguration/sample/reset-password.ts b/packages/editor-sample/src/getConfiguration/sample/reset-password.ts index a2bed94..353df35 100644 --- a/packages/editor-sample/src/getConfiguration/sample/reset-password.ts +++ b/packages/editor-sample/src/getConfiguration/sample/reset-password.ts @@ -22,18 +22,18 @@ const RESET_PASSWORD: TEditorConfiguration = { type: 'Image', data: { style: { - backgroundColor: null, padding: { top: 24, bottom: 8, - left: 24, right: 24, + left: 24, }, + backgroundColor: null, textAlign: 'left', }, props: { - height: 40, - url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_w9brVHZobEBhsJSK/marketbase.png', + height: 24, + url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_Xh1R23U9ziyct9nd/codoc.png', alt: '', linkHref: null, contentAlignment: 'middle', @@ -96,13 +96,13 @@ const RESET_PASSWORD: TEditorConfiguration = { padding: { top: 12, bottom: 32, - left: 24, right: 24, + left: 24, }, }, props: { - buttonBackgroundColor: '#2458AF', - buttonStyle: 'pill', + buttonBackgroundColor: '#0068FF', + buttonStyle: 'rectangle', buttonTextColor: '#FFFFFF', fullWidth: false, size: 'medium', diff --git a/packages/editor-sample/src/getConfiguration/sample/welcome.ts b/packages/editor-sample/src/getConfiguration/sample/welcome.ts new file mode 100644 index 0000000..54cf5e6 --- /dev/null +++ b/packages/editor-sample/src/getConfiguration/sample/welcome.ts @@ -0,0 +1,170 @@ +import { TEditorConfiguration } from '../../documents/editor/core'; + +const WELCOME: TEditorConfiguration = { + root: { + type: 'EmailLayout', + data: { + backdropColor: '#F2F5F7', + canvasColor: '#FFFFFF', + textColor: '#242424', + fontFamily: 'MODERN_SANS', + childrenIds: [ + 'block-1709571212684', + 'block-1709571228545', + 'block-1709571234315', + 'block-1709571247550', + 'block-1709571258507', + 'block-1709571281151', + 'block-1709571302968', + 'block-1709571282795', + ], + }, + }, + 'block-1709571212684': { + type: 'Image', + data: { + style: { + padding: { + top: 24, + bottom: 24, + right: 24, + left: 24, + }, + }, + props: { + url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_JTNBBPGrNs2Ph4JL/marketbase.png', + alt: 'Marketbase', + linkHref: 'https://marketbase.app', + contentAlignment: 'middle', + }, + }, + }, + 'block-1709571228545': { + type: 'Text', + data: { + style: { + fontWeight: 'normal', + padding: { + top: 0, + bottom: 16, + right: 24, + left: 24, + }, + }, + props: { + text: 'Hi Anna 👋,', + }, + }, + }, + 'block-1709571234315': { + type: 'Text', + data: { + style: { + fontWeight: 'normal', + padding: { + top: 0, + bottom: 16, + right: 24, + left: 24, + }, + }, + props: { + text: 'Welcome to Marketbase! Marketbase is how teams within fast growing marketplaces effortlessly monitor conversations to prevent disintermediation, identify problematic users, and increase trust & safety within their community.', + }, + }, + }, + 'block-1709571247550': { + type: 'Text', + data: { + style: { + fontWeight: 'normal', + padding: { + top: 0, + bottom: 16, + right: 24, + left: 24, + }, + }, + props: { + text: 'Best of all, you can connect your existing messaging services in minutes:', + }, + }, + }, + 'block-1709571258507': { + type: 'Image', + data: { + style: { + padding: { + top: 16, + bottom: 16, + right: 24, + left: 24, + }, + }, + props: { + url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_oWB821TUkDXvr2f4/Screenshot%202023-11-22%20at%2011.51.30%20AM.png', + alt: 'Video thumbnail', + linkHref: 'https://capture.dropbox.com/NBQEmoCKKP9RGBWr', + contentAlignment: 'middle', + }, + }, + }, + 'block-1709571281151': { + type: 'Text', + data: { + style: { + fontWeight: 'normal', + padding: { + top: 16, + bottom: 16, + right: 24, + left: 24, + }, + }, + props: { + text: 'If you ever need help, just reply to this email and one of us will get back to you shortly. We’re here to help.', + }, + }, + }, + 'block-1709571282795': { + type: 'Image', + data: { + style: { + padding: { + top: 16, + bottom: 40, + right: 24, + left: 24, + }, + }, + props: { + url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_cAK8FpmBEGoSRNi3/Screenshot%202023-11-22%20at%2011.48.53%20AM.png', + alt: 'Illustration', + linkHref: null, + contentAlignment: 'middle', + }, + }, + }, + 'block-1709571302968': { + type: 'Button', + data: { + style: { + fontSize: 14, + padding: { + top: 16, + bottom: 24, + right: 24, + left: 24, + }, + }, + props: { + buttonBackgroundColor: '#0079cc', + buttonStyle: 'rectangle', + text: 'Open dashboard', + url: 'https://www.usewaypoint.com', + }, + }, + }, +}; + +export default WELCOME;