+
+ }
+ >
+ Is the current Easy Email not meeting your requirements ?
+ It's time to try our more powerful commercial version of the email editor.{' '}
+
+ {showLiveChat ? (
+ <>
+ {
+ pushEvent({ event: `Contact_at_${page}` });
+ (window as any).$crisp?.push(['do', 'chat:open']);
+ }}
+ target='_blank'
+ style={{ fontSize: 16 }}
+ >
+ Open Live Chat
+
+
+ ) : (
+ <>
+ Contact us for more information. Email:{' '}
+ {
+ pushEvent({ event: `Contact_at_${page}` });
+ }}
+ target='_blank'
+ href='mailto:ch.mao@qq.com'
+ style={{ fontSize: 16 }}
+ >
+ ch.mao@qq.com
+
+ .
+
+ )}
+
+
+
+
+ );
+};
+
+export default FullScreenLoading;
diff --git a/nextjs-demo/client/components/IframeComponent/index.tsx b/nextjs-demo/client/components/IframeComponent/index.tsx
new file mode 100644
index 000000000..f29cf5644
--- /dev/null
+++ b/nextjs-demo/client/components/IframeComponent/index.tsx
@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { useInterval } from 'react-use';
+import { createPortal } from 'react-dom';
+
+interface Props
+ extends React.DetailedHTMLProps<
+ React.IframeHTMLAttributes
+
+ );
+};
diff --git a/nextjs-demo/client/components/Layout/NavBar/style/icon-button.module.less b/nextjs-demo/client/components/Layout/NavBar/style/icon-button.module.less
new file mode 100644
index 000000000..87345ddac
--- /dev/null
+++ b/nextjs-demo/client/components/Layout/NavBar/style/icon-button.module.less
@@ -0,0 +1,8 @@
+.icon-button {
+ font-size: 16px;
+ border: 1px solid var(--color-border-2);
+
+ > svg {
+ vertical-align: -3px;
+ }
+}
diff --git a/nextjs-demo/client/components/Layout/NavBar/style/index.module.less b/nextjs-demo/client/components/Layout/NavBar/style/index.module.less
new file mode 100644
index 000000000..514556f62
--- /dev/null
+++ b/nextjs-demo/client/components/Layout/NavBar/style/index.module.less
@@ -0,0 +1,80 @@
+.navbar {
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px solid rgb(229, 230, 235);
+ box-sizing: border-box;
+ background-color: #ffffff;
+ height: 100%;
+ height: 60px;
+}
+
+.left {
+ display: flex;
+ align-items: center;
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ width: 200px;
+ padding-left: 20px;
+ box-sizing: border-box;
+ font-weight: bold;
+ font-size: 28px;
+}
+
+.logo-name {
+ color: var(--color-text-1);
+ font-weight: 500;
+ font-size: 20px;
+ margin-left: 10px;
+ font-family: "PingFang SC";
+}
+
+.right {
+ display: flex;
+ list-style: none;
+ padding-right: 20px;
+
+ li {
+ padding: 0 8px;
+ display: flex;
+ align-items: center;
+ }
+
+ a {
+ text-decoration: none;
+ color: var(--color-text-1);
+ }
+}
+
+.username {
+ cursor: pointer;
+}
+
+.round {
+ :global(.arco-input-inner-wrapper) {
+ border-radius: 16px;
+ }
+
+ svg {
+ font-size: 16px;
+ }
+}
+
+.dropdown-icon {
+ margin-right: 8px;
+ font-size: 16px;
+ vertical-align: text-bottom;
+}
+
+.fixed-settings {
+ position: fixed;
+ top: 280px;
+ right: 0px;
+
+ svg {
+ font-size: 18px;
+ vertical-align: -4px;
+ }
+}
diff --git a/nextjs-demo/client/components/Layout/index.module.less b/nextjs-demo/client/components/Layout/index.module.less
new file mode 100644
index 000000000..8a210468e
--- /dev/null
+++ b/nextjs-demo/client/components/Layout/index.module.less
@@ -0,0 +1,144 @@
+.layout {
+ width: 100%;
+ height: 100%;
+}
+
+.layout-navbar {
+ position: fixed;
+ width: 100%;
+ min-width: 1100px;
+ top: 0;
+ left: 0;
+ height: 60px;
+ z-index: 100;
+}
+
+.layout-sider {
+ position: fixed;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 99;
+ box-sizing: border-box;
+}
+
+.layout-sider {
+ position: fixed;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 99;
+ box-sizing: border-box;
+
+ ::-webkit-scrollbar {
+ width: 12px;
+ height: 4px;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ border: 4px solid transparent;
+ background-clip: padding-box;
+ border-radius: 7px;
+ background-color: var(--color-text-4);
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background-color: var(--color-text-3);
+ }
+
+ &::after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ right: -1px;
+ width: 1px;
+ height: 100%;
+ background-color: var(--color-border);
+ }
+
+ :global(.arco-layout-sider-children) {
+ overflow-y: hidden;
+ }
+
+ .collapse-btn {
+ height: 24px;
+ width: 24px;
+ background-color: var(--color-fill-1);
+ color: var(--color-text-3);
+ border-radius: 2px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ // 位置
+ position: absolute;
+ bottom: 12px;
+ right: 12px;
+
+ &:hover {
+ background-color: var(--color-fill-3);
+ }
+ }
+}
+
+.menu-wrapper {
+ overflow: auto;
+ height: 100%;
+
+ :global(.arco-menu-item-inner > a::after),
+ :global(.arco-menu-item > a::after) {
+ content: "";
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ }
+
+ :global(.arco-menu-inline-header) {
+ font-weight: 500;
+ }
+}
+
+.icon {
+ font-size: 18px;
+ vertical-align: text-bottom;
+}
+
+.icon-empty {
+ width: 12px;
+ height: 18px;
+ display: inline-block;
+}
+
+.layout-content {
+ background-color: var(--color-fill-2);
+ min-width: 1100px;
+ min-height: 100vh;
+ transition: padding-left 0.2s;
+ box-sizing: border-box;
+ padding: 16px 0px 0px 0;
+}
+
+.layout-content-wrapper {
+ padding: 16px 20px 0;
+ height: 100%;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.layout-breadcrumb {
+ margin-bottom: 16px;
+}
+
+.spin {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ min-height: calc(100vh - 60px);
+}
diff --git a/nextjs-demo/client/components/Layout/index.tsx b/nextjs-demo/client/components/Layout/index.tsx
new file mode 100644
index 000000000..a3e7cc061
--- /dev/null
+++ b/nextjs-demo/client/components/Layout/index.tsx
@@ -0,0 +1,146 @@
+import { Alert, Layout, Menu } from '@arco-design/web-react';
+import styles from './index.module.less';
+import cs from 'classnames';
+import qs from 'query-string';
+import { ReactNode, useEffect, useState } from 'react';
+import { IconEmail } from '@arco-design/web-react/icon';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import { Navbar } from './NavBar';
+
+interface Props {
+ children: React.ReactNode;
+ hideSidebar?: boolean;
+ hideNavbar?: boolean;
+}
+
+const MenuItem = Menu.Item;
+const SubMenu = Menu.SubMenu;
+
+const Sider = Layout.Sider;
+
+type NavMenuItem = {
+ label: string;
+ icon?: ReactNode;
+ children?: Array
+
+ Easy Email
+ -
+ {user && (
+
-
+
+ ++ {(user.name || user.email)?.toUpperCase()} + +
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ setVisible(true)}
+ >
+ {children}
+
+
+ );
+};
+
+function EmailItem({ item, isMobile }: { item: IEmailTemplate; isMobile: boolean }) {
+ const [height, setHeight] = useState(600);
+
+ const [html, setHtml] = useState('');
+
+ useEffect(() => {
+ const mjmlStr = JsonToMjml({
+ data: item.content,
+ mode: 'production',
+ });
+ setHtml(mjml(mjmlStr).html);
+ }, [item.content]);
+
+ return (
+ -
+
+ {`Subject`}
+
+ {item.subject}
+ {
+ e.stopPropagation();
+ e.preventDefault();
+ }}
+ >
+
+
+
+
+
+
+
+
+ {list.map((item, index) => {
+ return (
+
+
+ );
+ })}
+
+
+
+
+
+ {item.subject}
+
+
+ View drink menu" + } + }, + "attributes": { + "align": "left", + "font-family": "Arial, sans-serif", + "padding": "25px 25px 25px 25px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "font-family": "Arial, sans-serif", + "width": "50%", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://d3k81ch9hvuctc.cloudfront.net/company/S7EvMw/images/a096e725-a517-477e-bdb9-97211537aeb8.png", + "font-family": "Arial, sans-serif", + "padding": "25px 25px 25px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#ffffff", + "font-family": "Arial, sans-serif", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "font-family": "Arial, sans-serif", + "width": "100%", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "divider", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "border-width": "1px", + "border-style": "solid", + "border-color": "#C9CCCF", + "font-family": "Arial, sans-serif", + "padding": "10px 0px 10px 0px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "rtl", + "text-align": "center", + "background-color": "#FFFFFF", + "font-family": "Arial, sans-serif", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "font-family": "Arial, sans-serif", + "width": "50%", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "text", + "data": { + "value": { + "content": "And of course, no Irish meal would be complete without a pint of Guinness or a dram of Irish whiskey to wash it down.
View drink menu" + } + }, + "attributes": { + "align": "left", + "font-family": "Arial, sans-serif", + "padding": "25px 25px 25px 25px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "font-family": "Arial, sans-serif", + "width": "50%", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://d3k81ch9hvuctc.cloudfront.net/company/S7EvMw/images/f812b491-36cb-4a82-b2f0-eea60ed5eba9.png", + "font-family": "Arial, sans-serif", + "padding": "25px 25px 25px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#263D29", + "font-family": "Arial, sans-serif", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "font-family": "Arial, sans-serif", + "width": "100%", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "text", + "data": { + "value": { + "content": "No longer want to receive these emails? unsubscribe" + } + }, + "attributes": { + "align": "left", + "color": "#FFFFFF", + "font-family": "Arial, sans-serif", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + } + ] + } +} diff --git a/nextjs-demo/client/pages/Emails/Create/templates/template2.json b/nextjs-demo/client/pages/Emails/Create/templates/template2.json new file mode 100644 index 000000000..a2e8d12e3 --- /dev/null +++ b/nextjs-demo/client/pages/Emails/Create/templates/template2.json @@ -0,0 +1,757 @@ +{ + "subject": "Arturia - Newsletter", + "thumbnail": "https://assets.maocanhua.cn/5523abbd-6484-40b0-a368-bbea5e647bf4-", + "content": { + "type": "page", + "data": { + "value": { + "breakpoint": "480px", + "headAttributes": "", + "font-size": "14px", + "line-height": "1.7", + "headStyles": [], + "fonts": [], + "responsive": true, + "font-family": "lucida Grande,Verdana,Microsoft YaHei", + "text-color": "#000000" + } + }, + "attributes": { + "background-color": "#F2F2F2", + "width": "600px" + }, + "children": [ + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "padding": "20px 0px 0px 0px", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "vertical-align": "center" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "middle", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://www.arturia.com/images/newsletters/2016-02-black/Logo-Baseline-0.15x.png", + "width": "144px", + "href": "https://www.arturia.com", + "alt": "", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + }, + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_text", + "data": { + "value": { + "content": "NEWS
MARCH 2016" + } + }, + "attributes": { + "align": "left", + "font-family": "Helvetica,Arial,sans-serif", + "line-height": "120%", + "text-decoration": "underline", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#000001", + "padding": "20px 0px 20px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_text", + "data": { + "value": { + "content": "Dear {firstname},
You used to follow rhythm, now rhythm follows you, everywhere you go!
Discover iSpark, the mobile transposition of our renowned beat-making solution Spark." + } + }, + "attributes": { + "align": "left", + "color": "#FFFFFE", + "font-family": "Helvetica,Arial,sans-serif", + "font-size": "14px", + "line-height": "120%", + "padding": "0px 25px 0px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "padding": "20px 0px 20px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "background-color": "#FFFFFE", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://www.arturia.com/images/newsletters/2016-02-ispark/05.jpg", + "href": "https://www.arturia.com/products/ipad-synths/ispark/overview", + "alt": "", + "padding": "0px 0px 0px 0px" + }, + "children": [] + }, + { + "type": "advanced_text", + "data": { + "value": { + "content": "iSpark is a powerful mobile production tool allowing you to create and play rhythmic tracks, complex grooves and even complete songs. Its sonic strike force comes along with an unwavering workflow and a real flexibility." + } + }, + "attributes": { + "align": "left", + "font-family": "Helvetica,Arial,sans-serif", + "font-size": "14px", + "line-height": "120%", + "padding": "25px 25px 25px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "padding": "20px 0px 20px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "background-color": "#FFFFFE", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://www.arturia.com/images/newsletters/2016-02-ispark/06.jpg", + "href": "https://www.arturia.com/products/ipad-synths/ispark/overview", + "alt": "", + "padding": "0px 0px 0px 0px" + }, + "children": [] + }, + { + "type": "advanced_text", + "data": { + "value": { + "content": "Check out the iSpark introduction movie shot during the Arturia Experience event at the ADE featuring the Dutch beatmaker FilosofischeStilte." + } + }, + "attributes": { + "align": "left", + "font-family": "Helvetica,Arial,sans-serif", + "font-size": "14px", + "line-height": "120%", + "padding": "25px 25px 25px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "padding": "20px 0px 20px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "background-color": "#FFFFFE", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://www.arturia.com/images/newsletters/2016-02-ispark/07.jpg", + "href": "https://www.arturia.com/products/ipad-synths/ispark/details", + "alt": "", + "padding": "0px 0px 0px 0px" + }, + "children": [] + }, + { + "type": "advanced_text", + "data": { + "value": { + "content": "Follow Mauricio Garcia, Arturia Product Specialist, presenting you the many clever features of iSpark in this series of tutorials." + } + }, + "attributes": { + "align": "left", + "font-family": "Helvetica,Arial,sans-serif", + "font-size": "14px", + "line-height": "120%", + "padding": "25px 25px 25px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "padding": "20px 0px 20px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "background-color": "#FFFFFE", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://www.arturia.com/images/newsletters/2016-02-ispark/08.jpg", + "href": "https://www.arturia.com/products/ipad-synths/ispark/details", + "alt": "", + "padding": "0px 0px 0px 0px" + }, + "children": [] + }, + { + "type": "advanced_text", + "data": { + "value": { + "content": "iSpark includes a tremendous collection of factory kits and individual instruments covering most of the field of application of beat-making but it is also compatible with the existing Spark resources and Expansion Packs." + } + }, + "attributes": { + "align": "left", + "font-family": "Helvetica,Arial,sans-serif", + "font-size": "14px", + "line-height": "120%", + "padding": "25px 25px 10px 25px" + }, + "children": [] + }, + { + "type": "advanced_button", + "data": { + "value": { + "content": "Learn more about iSpark" + } + }, + "attributes": { + "align": "center", + "background-color": "#2DDCB4", + "color": "#ffffff", + "font-weight": "normal", + "border-radius": "8px", + "line-height": "120%", + "target": "_blank", + "vertical-align": "middle", + "border": "none", + "text-align": "center", + "href": "https://www.arturia.com/products/ipad-synths/ispark/overview", + "font-size": "14px", + "font-family": "Helvetica,Arial,sans-serif", + "padding": "10px 25px 25px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#000001", + "padding": "20px 0px 20px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_text", + "data": { + "value": { + "content": "Musically yours,
The Arturia Team" + } + }, + "attributes": { + "align": "left", + "color": "#FFFFFE", + "font-family": "Helvetica,Arial,sans-serif", + "font-size": "14px", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://www.arturia.com/images/newsletters/2016-02-ispark/facebook_arturia.png", + "width": "86px", + "href": "http://www.facebook.com/arturia2", + "alt": "", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + }, + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://www.arturia.com/images/newsletters/2016-02-ispark/youtube.png", + "width": "86px", + "href": "http://www.youtube.com/arturiaweb", + "alt": "", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + }, + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://www.arturia.com/images/newsletters/2016-02-ispark/Soundcloud.png", + "width": "86px", + "href": "http://soundcloud.com/arturia-official", + "alt": "", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + }, + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://www.arturia.com/images/newsletters/2016-02-ispark/twitter_arturia.png", + "width": "86px", + "href": "http://twitter.com/arturiaofficial", + "alt": "", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_text", + "data": { + "value": { + "content": "See this email in your browser here" + } + }, + "attributes": { + "align": "center", + "font-family": "Helvetica,Arial,sans-serif", + "padding": "0px 25px 10px 25px" + }, + "children": [] + }, + { + "type": "advanced_divider", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "border-width": "1px", + "border-style": "solid", + "border-color": "#C9CCCF", + "padding": "10px 0px 10px 0px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_text", + "data": { + "value": { + "content": "Your email address is on this list as a result of a subscription, information request, competition, or other correspondence you may have had with us in the past. If you would like to be removed from our list, check the email address this newsletter\n was sent to and use the following link: Unsubscribe. Privacy policy available here." + } + }, + "attributes": { + "align": "left", + "font-family": "Helvetica,Arial,sans-serif", + "font-size": "10px", + "line-height": "12px", + "padding": "0px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "advanced_text", + "data": { + "value": { + "content": "ARTURIA: https://www.arturia.com - Contact: info
ARTURIA France: 30 chemin\n du vieux chêne, 38240 Meylan - FRANCE
ARTURIA US: : 5776-D Lindero Cyn Rd #239 -Westlake Village, CA 91362 - USA" + } + }, + "attributes": { + "align": "left", + "font-family": "Helvetica,Arial,sans-serif", + "font-size": "10px", + "line-height": "12px", + "padding": "10px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "advanced_divider", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "border-width": "1px", + "border-style": "solid", + "border-color": "#C9CCCF", + "padding": "10px 0px 10px 0px" + }, + "children": [] + } + ] + } + ] + } + ] + } +} diff --git a/nextjs-demo/client/pages/Emails/Create/templates/template3.json b/nextjs-demo/client/pages/Emails/Create/templates/template3.json new file mode 100644 index 000000000..34f60b063 --- /dev/null +++ b/nextjs-demo/client/pages/Emails/Create/templates/template3.json @@ -0,0 +1,404 @@ +{ + "subject": "Dynamic rendering", + "thumbnail": "https://d3k81ch9hvuctc.cloudfront.net/company/S7EvMw/images/cae2b095-1326-4212-b241-2b6a32442efe.png", + "content": { + "type": "page", + "data": { + "value": { + "breakpoint": "480px", + "headAttributes": "", + "font-size": "14px", + "line-height": "1.7", + "headStyles": [], + "fonts": [], + "responsive": true, + "font-family": "lucida Grande,Verdana,Microsoft YaHei", + "text-color": "#000000" + } + }, + "attributes": { + "background-color": "#efeeea", + "width": "600px" + }, + "children": [ + { + "type": "advanced_wrapper", + "data": { + "value": {} + }, + "attributes": { + "padding": "20px 0px 20px 0px", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#ffffff" + }, + "children": [ + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": true + } + }, + "attributes": { + "padding": "20px 25px 20px 25px", + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center" + }, + "children": [ + { + "type": "advanced_group", + "data": { + "value": {} + }, + "attributes": { + "vertical-align": "top", + "direction": "ltr" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "padding": "0px 0px 0px 0px", + "border": "none", + "vertical-align": "top", + "width": "30%" + }, + "children": [ + { + "type": "advanced_image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "padding": "0px 0px 0px 0px", + "src": "{{user.avatar}}", + "width": "150px" + }, + "children": [] + } + ] + }, + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "padding": "0px 0px 0px 20px", + "border": "none", + "vertical-align": "top", + "width": "70%" + }, + "children": [ + { + "type": "advanced_text", + "data": { + "value": { + "content": "Hello , my name is {{user.name}}
😃 welcome to {{user.project}}.
Today is {{date.today}}.
"
+ },
+ "hidden": false
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "align": "left",
+ "font-size": "21px",
+ "line-height": "2"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "advanced_text",
+ "data": {
+ "value": {
+ "content": "Conditon block 1Today is {{date.today}}.
Email wrong.
This block will be hidden when previewing or sending an email.
",
+ "condition": {
+ "enabled": true,
+ "symbol": "and",
+ "groups": [
+ {
+ "symbol": "and",
+ "groups": [
+ {
+ "left": "user.name",
+ "operator": "==",
+ "right": "Ryan"
+ },
+ {
+ "left": "user.email",
+ "operator": "==",
+ "right": "xx@gmail.com"
+ }
+ ]
+ },
+ {
+ "symbol": "and",
+ "groups": [
+ {
+ "left": "user.project",
+ "operator": "==",
+ "right": "Easy email"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ "hidden": false
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "align": "center",
+ "font-size": "25px",
+ "color": "#ffffff",
+ "container-background-color": "#d0021b"
+ },
+ "children": []
+ },
+ {
+ "type": "advanced_text",
+ "data": {
+ "value": {
+ "content": "Conditon block 2
Condition match
This block will be show when previewing or sending an email.",
+ "condition": {
+ "enabled": true,
+ "symbol": "and",
+ "groups": [
+ {
+ "symbol": "and",
+ "groups": [
+ {
+ "left": "user.name",
+ "operator": "==",
+ "right": "Ryan"
+ },
+ {
+ "left": "user.email",
+ "operator": "==",
+ "right": "easy-email@gmail.com"
+ }
+ ]
+ },
+ {
+ "symbol": "and",
+ "groups": [
+ {
+ "left": "user.project",
+ "operator": "==",
+ "right": "Easy email"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ "hidden": false
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "align": "center",
+ "font-size": "25px",
+ "color": "#ffffff",
+ "container-background-color": "#4a90e2"
+ },
+ "children": []
+ },
+ {
+ "type": "advanced_section",
+ "data": {
+ "value": {
+ "noWrap": false
+ }
+ },
+ "attributes": {
+ "padding": "20px 0px 20px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center",
+ "background-color": "#f69f40"
+ },
+ "children": [
+ {
+ "type": "advanced_column",
+ "data": {
+ "value": {
+ "iteration": {
+ "enabled": true,
+ "dataSource": "product_list",
+ "itemName": "item",
+ "limit": 9999,
+ "mockQuantity": 2
+ }
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top",
+ "width": "50%"
+ },
+ "children": [
+ {
+ "type": "advanced_image",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "height": "auto",
+ "padding": "10px 25px 10px 25px",
+ "src": "{{item.image}}",
+ "border-radius": "10px",
+ "href": "{{item.url}}"
+ },
+ "children": []
+ },
+ {
+ "type": "advanced_text",
+ "data": {
+ "value": {
+ "content": "{{item.title}}{{item.price}}
"
+ }
+ },
+ "attributes": {
+ "padding": "10px 25px 10px 25px",
+ "align": "center"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "advanced_section",
+ "data": {
+ "value": {
+ "noWrap": false
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center",
+ "background-color": "#7ed321"
+ },
+ "children": [
+ {
+ "type": "advanced_column",
+ "data": {
+ "value": {
+ "iteration": {
+ "enabled": true,
+ "dataSource": "emptyList",
+ "itemName": "item",
+ "limit": 9999,
+ "mockQuantity": 2
+ }
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top",
+ "width": "50%"
+ },
+ "children": [
+ {
+ "type": "advanced_image",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "height": "auto",
+ "padding": "10px 25px 10px 25px",
+ "src": "{{item.image}}",
+ "border-radius": "10px",
+ "href": "{{item.url}}"
+ },
+ "children": []
+ },
+ {
+ "type": "advanced_text",
+ "data": {
+ "value": {
+ "content": "Empty lists won't show{{item.title}}
{{item.price}}
"
+ }
+ },
+ "attributes": {
+ "padding": "10px 25px 10px 25px",
+ "align": "center"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "product_recommendation",
+ "data": {
+ "value": {
+ "title": "You might also like",
+ "buttonText": "Buy now",
+ "productList": [
+ {
+ "image": "https://assets.maocanhua.cn/8e0e07e2-3f84-4426-84c1-2add355c558b-image.png",
+ "title": "Red Flock Buckle Winter Boots",
+ "price": "$59.99 HKD",
+ "url": "https://easy-email-m-ryan.vercel.app"
+ },
+ {
+ "image": "https://assets.maocanhua.cn/8e0e07e2-3f84-4426-84c1-2add355c558b-image.png",
+ "title": "Thick Stretch Warm Fleece High Waist Pencil Pant",
+ "price": "$69.99 HKD",
+ "url": "https://easy-email-m-ryan.vercel.app"
+ },
+ {
+ "image": "https://assets.maocanhua.cn/8e0e07e2-3f84-4426-84c1-2add355c558b-image.png",
+ "title": "Thick Velvet Grid Pant",
+ "price": "$29.99 HKD",
+ "url": "https://easy-email-m-ryan.vercel.app"
+ }
+ ]
+ }
+ },
+ "attributes": {
+ "background-color": "#ffffff",
+ "button-text-color": "#ffffff",
+ "button-color": "#414141",
+ "product-name-color": "#414141",
+ "product-price-color": "#414141",
+ "title-color": "#222222"
+ },
+ "children": []
+ }
+ ]
+ }
+}
diff --git a/nextjs-demo/client/pages/Emails/Create/templates/template4.json b/nextjs-demo/client/pages/Emails/Create/templates/template4.json
new file mode 100644
index 000000000..579a0d3a2
--- /dev/null
+++ b/nextjs-demo/client/pages/Emails/Create/templates/template4.json
@@ -0,0 +1,644 @@
+{
+ "subject": "SPRING PREVIEW SALE",
+ "thumbnail": "https://assets.maocanhua.cn/5b9d0408-0e14-4c9f-979e-f526187bd0ca-",
+ "content": {
+ "type": "page",
+ "data": {
+ "value": {
+ "breakpoint": "480px",
+ "headAttributes": "",
+ "font-size": "14px",
+ "line-height": "1.7",
+ "headStyles": [],
+ "fonts": [],
+ "responsive": true,
+ "font-family": "lucida Grande,Verdana,Microsoft YaHei",
+ "text-color": "#000000"
+ }
+ },
+ "attributes": {
+ "background-color": "#F4F4F4",
+ "width": "600px",
+ "css-class": "mjml-body"
+ },
+ "children": [
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": false
+ }
+ },
+ "attributes": {
+ "padding": "30px 0px 0px 0px",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "background-color": "#ffffff"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "border": "none",
+ "vertical-align": "top",
+ "padding": "0px 0px 0px 0px"
+ },
+ "children": [
+ {
+ "type": "image",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "height": "auto",
+ "src": "https://assets.maocanhua.cn/b999e7e4-9242-4435-a4f6-c8f1d6fdfd96-image.png",
+ "target": "_blank",
+ "width": "214px",
+ "padding": "10px 25px 10px 25px"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Product | Concept | Contact
" + } + }, + "attributes": { + "align": "left", + "font-size": "13px", + "line-height": "22px", + "color": "#55575d", + "font-family": "Arial, sans-serif", + "padding": "0px 25px 15px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://assets.maocanhua.cn/ed0590da-b6dc-4d14-bfc7-6f1931a390fd-image.png", + "target": "_blank", + "width": "600px", + "padding": "0px 0px 0px 0px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#ffffff", + "padding": "30px 0px 0px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "text", + "data": { + "value": { + "content": "- Our Holiday Recipes -
" + } + }, + "attributes": { + "align": "left", + "font-size": "30px", + "line-height": "22px", + "color": "#55575d", + "font-family": "Arial, sans-serif", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#ffffff", + "padding": "20px 0px 0px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://assets.maocanhua.cn/be61d137-bb44-4358-a681-dea81d2a8ec1-image.png", + "target": "_blank", + "width": "1200px", + "padding": "0px 30px 20px 30px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "text", + "data": { + "value": { + "content": "Cake Title
\nSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
\nChoose me >
" + } + }, + "attributes": { + "align": "left", + "font-size": "13px", + "line-height": "22px", + "color": "#55575d", + "font-family": "Arial, sans-serif", + "padding": "0px 40px 0px 40px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "rtl", + "text-align": "center", + "background-color": "#ffffff", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://assets.maocanhua.cn/b3e16b18-9385-421e-b6a7-b28a749d6abf-image.png", + "target": "_blank", + "width": "1200px", + "padding": "20px 30px 20px 30px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "text", + "data": { + "value": { + "content": "Cake Title
\nSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
\nChoose me >
" + } + }, + "attributes": { + "align": "left", + "font-size": "13px", + "line-height": "22px", + "color": "#55575d", + "font-family": "Arial, sans-serif", + "padding": "0px 40px 0px 40px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#ffffff", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://assets.maocanhua.cn/6c23a5d0-ec6c-4634-8753-49e4a2da407e-image.png", + "target": "_blank", + "width": "1200px", + "padding": "20px 30px 20px 30px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "text", + "data": { + "value": { + "content": "Cake Title
\nSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
\nChoose me >
" + } + }, + "attributes": { + "align": "left", + "font-size": "13px", + "line-height": "22px", + "color": "#55575d", + "font-family": "Arial, sans-serif", + "padding": "0px 40px 0px 40px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#ffffff", + "padding": "0px 0px 20px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "button", + "data": { + "value": { + "content": "Discover all desserts" + } + }, + "attributes": { + "align": "center", + "background-color": "#354552", + "color": "#ffffff", + "font-weight": "normal", + "border-radius": "3px", + "line-height": "120%", + "target": "_blank", + "vertical-align": "middle", + "border": "none", + "text-align": "center", + "href": "#", + "font-size": "14px", + "font-family": "Georgia, Helvetica, Arial, sans-serif", + "text-decoration": "none", + "text-transform": "none", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#ffffff", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://assets.maocanhua.cn/0a270377-104e-4ea8-bd94-3df6d7afaa01-image.png", + "target": "_blank", + "width": "600px", + "padding": "0px 0px 0px 0px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#ffffff", + "padding": "20px 0px 20px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://assets.maocanhua.cn/a35965f4-900a-43a5-9c96-cef1e398e9c5-image.png", + "target": "_blank", + "width": "202px", + "padding": "10px 25px 10px 25px" + }, + "children": [] + }, + { + "type": "social", + "data": { + "value": { + "elements": [ + { + "href": "", + "icon-size": "20px", + "target": "_blank", + "src": "https://assets.maocanhua.cn/93013b18-062d-48d7-ae00-4a5f0a9ac988.png", + "content": "Facebook", + "font-size": "13px", + "line-height": "22px", + "text-padding": "4px 4px 4px 0", + "vertical-align": "middle", + "text-decoration": "none", + "color": "#333333", + "name": "facebook" + }, + { + "href": "", + "icon-size": "20px", + "target": "_blank", + "src": "https://assets.maocanhua.cn/a81ddd4b-3a12-47be-91f3-28d71eced397.png", + "content": "Google", + "font-size": "13px", + "line-height": "22px", + "text-padding": "4px 4px 4px 0", + "vertical-align": "middle", + "text-decoration": "none", + "color": "#333333", + "name": "pinterest" + }, + { + "href": "", + "icon-size": "20px", + "target": "_blank", + "src": "https://assets.maocanhua.cn/0a411326-17c5-4814-ad3a-6927266f097e.png", + "content": "Twitter", + "font-size": "13px", + "line-height": "22px", + "text-padding": "4px 4px 4px 0", + "vertical-align": "middle", + "text-decoration": "none", + "color": "#333333", + "name": "instagram" + } + ] + } + }, + "attributes": { + "align": "center", + "color": "#333333", + "mode": "horizontal", + "font-size": "13px", + "font-weight": "normal", + "border-radius": "3px", + "line-height": "22px", + "text-padding": "4px 4px 4px 0px", + "icon-padding": "0px", + "icon-size": "20px", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + } + ] + } +} diff --git a/nextjs-demo/client/pages/Emails/Create/templates/template5.json b/nextjs-demo/client/pages/Emails/Create/templates/template5.json new file mode 100644 index 000000000..f143300c4 --- /dev/null +++ b/nextjs-demo/client/pages/Emails/Create/templates/template5.json @@ -0,0 +1,561 @@ +{ + "subject": "MJML Code - Newsletter", + "thumbnail": "https://d3k81ch9hvuctc.cloudfront.net/company/S7EvMw/images/de4d139c-a137-479f-99f1-80c971eb69b2.png", + "content": { + "type": "page", + "data": { + "value": { + "breakpoint": "480px", + "headAttributes": "", + "font-size": "14px", + "line-height": "1.7", + "headStyles": [], + "fonts": [], + "responsive": true, + "font-family": "lucida Grande,Verdana,Microsoft YaHei", + "text-color": "#000000" + } + }, + "attributes": { + "background-color": "#E1E8ED", + "width": "600px" + }, + "children": [ + { + "type": "raw", + "data": { + "value": { + "content": "" + } + }, + "attributes": { + "padding": "20px 0px 20px 0px", + "border": "none", + "direction": "ltr", + "text-align": "center" + }, + "children": [] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "white", + "padding": "20px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "width": "100%", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://avatars0.githubusercontent.com/u/16115896?v=3&s=200", + "width": "50px", + "padding": "10px 25px 10px 25px" + }, + "children": [] + }, + { + "type": "advanced_divider", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "border-width": "1px", + "border-style": "solid", + "border-color": "#f8f8f8", + "horizontal-spacing": "0", + "vertical-spacing": "0", + "padding": "10px 0px 0px 0px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#fcfcfc", + "padding": "20px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "width": "100%", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_text", + "data": { + "value": { + "content": "Here is what you've missed" + } + }, + "attributes": { + "align": "center", + "font-size": "20px", + "color": "grey", + "font-family": "Helvetica Neue", + "font-weight": "200", + "padding": "10px 25px 10px 25px" + }, + "children": [] + }, + { + "type": "advanced_divider", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "border-width": "1px", + "border-style": "solid", + "border-color": "#f8f8f8", + "horizontal-spacing": "0", + "vertical-spacing": "0", + "padding": "10px 0px 0px 0px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "raw", + "data": { + "value": { + "content": "" + } + }, + "attributes": {}, + "children": [] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "white", + "padding": "20px 0px 20px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "width": "130px", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://mjml.io/assets/img/responsive.png", + "width": "100px", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + }, + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "width": "350px", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_text", + "data": { + "value": { + "content": "Sed ut perspiciatis" + } + }, + "attributes": { + "align": "left", + "font-size": "20px", + "color": "grey", + "padding": "10px 25px 10px 25px" + }, + "children": [] + }, + { + "type": "advanced_text", + "data": { + "value": { + "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip" + } + }, + "attributes": { + "align": "left", + "color": "grey", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "raw", + "data": { + "value": { + "content": "" + } + }, + "attributes": {}, + "children": [] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#f3f3f3", + "padding": "20px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_text", + "data": { + "value": { + "content": "Explore our new features" + } + }, + "attributes": { + "align": "center", + "font-size": "20px", + "color": "rgb(165, 176, 184)", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#f3f3f3", + "padding": "0px 0px 20px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "width": "100%", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://cloud.githubusercontent.com/assets/6558790/12450760/ee034178-bf85-11e5-9dda-98d0c8f9f8d6.png", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#fcfcfc", + "padding": "20px 0px 20px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "width": "130px", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "https://mjml.io/assets/img/easy-and-quick.png", + "width": "100px", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + }, + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "width": "350px", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_text", + "data": { + "value": { + "content": "Right on time!" + } + }, + "attributes": { + "align": "left", + "font-size": "20px", + "color": "grey", + "padding": "10px 25px 10px 25px" + }, + "children": [] + }, + { + "type": "advanced_text", + "data": { + "value": { + "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip" + } + }, + "attributes": { + "align": "left", + "color": "grey", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "advanced_section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#f3f3f3", + "padding": "20px 0px 20px 0px" + }, + "children": [ + { + "type": "advanced_column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "advanced_text", + "data": { + "value": { + "content": "Stay in touch!" + } + }, + "attributes": { + "align": "center", + "padding": "10px 25px 10px 25px" + }, + "children": [] + }, + { + "type": "advanced_social", + "data": { + "value": { + "elements": [ + { + "href": "#", + "icon-size": "20px", + "target": "_blank", + "src": "https://easy-email-m-ryan.vercel.app/images/acbae5eb-efa4-4eb6-866c-f421e740b713-ad3c92b1-9cdb-4a7b-aad3-75ad809db8a3.png", + "content": "Facebook", + "name": "twitter" + }, + { + "href": "#", + "icon-size": "20px", + "target": "_blank", + "src": "https://easy-email-m-ryan.vercel.app/images/98520d6c-5cef-449e-bcbf-6316ccec2088-e8780361-0deb-4896-895e-e690c886cdf0.png", + "content": "Google", + "name": "facebook" + }, + { + "href": "", + "icon-size": "20px", + "target": "_blank", + "src": "https://easy-email-m-ryan.vercel.app/images/b064f705-34ba-4400-975e-9dd0cec21c30-cc9aa158-56bd-4bf1-b532-72390d25c864.png", + "content": "Twitter" + } + ] + } + }, + "attributes": { + "align": "center", + "color": "#333333", + "mode": "horizontal", + "font-size": "13px", + "font-weight": "normal", + "border-radius": "3px", + "line-height": "22px", + "text-padding": "4px 4px 4px 0px", + "icon-padding": "0px", + "icon-size": "20px", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + } + ] + } +} diff --git a/nextjs-demo/client/pages/Emails/Create/templates/template6.json b/nextjs-demo/client/pages/Emails/Create/templates/template6.json new file mode 100644 index 000000000..cc6aefa00 --- /dev/null +++ b/nextjs-demo/client/pages/Emails/Create/templates/template6.json @@ -0,0 +1,1382 @@ +{ + "subject": "Racoon - Ecommerce", + "thumbnail": "https://d3k81ch9hvuctc.cloudfront.net/company/S7EvMw/images/821cbaa1-ebcf-476e-acc2-bb97a1edd316.png", + "content": { + "type": "page", + "data": { + "value": { + "breakpoint": "480px", + "headAttributes": "", + "font-size": "14px", + "line-height": "1.7", + "headStyles": [], + "fonts": [], + "responsive": true, + "font-family": "lucida Grande,Verdana,Microsoft YaHei", + "text-color": "#000000" + } + }, + "attributes": { + "background-color": "#d6dde5", + "width": "600px" + }, + "children": [ + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "padding": "20px 0px 20px 0px", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "background-color": "#ffffff" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "width": "50%", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/x4u.png", + "href": "https://mjml.io", + "alt": "Racoon logo", + "padding": "10px 10px 10px 10px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#fa8739", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "width": "200px", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "text", + "data": { + "value": { + "content": "SPRING PROMO
\n50%
\nOFFER
\nLorem ipsum dolor sit amet, consectetur adipiscing elit
FREE SHIPPING ON ORDER OVER 55€
" + } + }, + "attributes": { + "align": "left", + "color": "#fff", + "font-size": "18px", + "padding": "0px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#fff", + "padding": "20px 0px 20px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {}, + "hidden": false + }, + "attributes": { + "border": "none", + "vertical-align": "bottom", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/x4v.jpg", + "alt": "Chesterk tank", + "border": "none", + "width": "209px", + "padding": "30px 0px 20px 0px" + }, + "children": [] + }, + { + "type": "text", + "data": { + "value": { + "content": "CHESTERK TANK
\n15€
" + } + }, + "attributes": { + "align": "center", + "font-weight": "bold", + "color": "#000", + "font-size": "15px", + "padding": "0px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "button", + "data": { + "value": { + "content": "BUY NOW" + } + }, + "attributes": { + "align": "center", + "background-color": "#fa8739", + "color": "#fff", + "font-weight": "normal", + "border-radius": "3px", + "line-height": "120%", + "target": "_blank", + "vertical-align": "middle", + "border": "none", + "text-align": "center", + "href": "https://mjml.io", + "font-size": "13px", + "padding": "0px 30px 10px 30px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "bottom", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/x4g.jpg", + "alt": "Beyond backpack", + "border": "none", + "width": "178px", + "padding": "10px 0px 20px 0px" + }, + "children": [] + }, + { + "type": "text", + "data": { + "value": { + "content": "BEYOND BACKPACK
\n20€
" + } + }, + "attributes": { + "align": "center", + "font-weight": "bold", + "color": "#000", + "font-size": "15px", + "padding": "0px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "button", + "data": { + "value": { + "content": "BUY NOW" + } + }, + "attributes": { + "align": "center", + "background-color": "#612d0a", + "color": "#fff", + "font-weight": "normal", + "border-radius": "3px", + "line-height": "120%", + "target": "_blank", + "vertical-align": "middle", + "border": "none", + "text-align": "center", + "href": "https://mjml.io", + "font-size": "13px", + "padding": "0px 30px 10px 30px", + "inner-padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#fff", + "padding": "20px 0px 20px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "bottom", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/x46.jpg", + "alt": "Jensen shorts", + "border": "none", + "width": "182px", + "padding": "30px 0px 20px 0px" + }, + "children": [] + }, + { + "type": "text", + "data": { + "value": { + "content": "JENSEN SHORTS
\n28€
" + } + }, + "attributes": { + "align": "center", + "font-weight": "bold", + "color": "#000", + "font-size": "15px", + "padding": "0px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "button", + "data": { + "value": { + "content": "BUY NOW" + } + }, + "attributes": { + "align": "center", + "background-color": "#fa8739", + "color": "#fff", + "font-weight": "normal", + "border-radius": "3px", + "line-height": "120%", + "target": "_blank", + "vertical-align": "middle", + "border": "none", + "text-align": "center", + "href": "https://mjml.io", + "font-size": "13px", + "padding": "0px 30px 10px 30px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "bottom", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/x4h.jpg", + "alt": "Verdant cap", + "border": "none", + "width": "129px", + "padding": "20px 0px 20px 0px" + }, + "children": [] + }, + { + "type": "text", + "data": { + "value": { + "content": "VERDANT CAP
\n20€
" + } + }, + "attributes": { + "align": "center", + "font-weight": "bold", + "color": "#000", + "font-size": "15px", + "padding": "0px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "button", + "data": { + "value": { + "content": "BUY NOW" + } + }, + "attributes": { + "align": "center", + "background-color": "#fa8739", + "color": "#fff", + "font-weight": "normal", + "border-radius": "3px", + "line-height": "120%", + "target": "_blank", + "vertical-align": "middle", + "border": "none", + "text-align": "center", + "href": "https://mjml.io", + "font-size": "13px", + "padding": "0px 25px 10px 25px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "bottom", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/x4i.jpg", + "alt": "Blake polo shirt", + "border": "none", + "width": "208px", + "padding": "20px 0px 20px 0px" + }, + "children": [] + }, + { + "type": "text", + "data": { + "value": { + "content": "BLAKE POLO SHIRT
\n25€
" + } + }, + "attributes": { + "align": "center", + "font-weight": "bold", + "color": "#000", + "font-size": "15px", + "padding": "0px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "button", + "data": { + "value": { + "content": "BUY NOW" + } + }, + "attributes": { + "align": "center", + "background-color": "#fa8739", + "color": "#fff", + "font-weight": "normal", + "border-radius": "3px", + "line-height": "120%", + "target": "_blank", + "vertical-align": "middle", + "border": "none", + "text-align": "center", + "href": "https://mjml.io", + "font-size": "13px", + "padding": "0px 30px 10px 30px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "bottom", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/x4j.jpg", + "alt": "Sketch floral", + "border": "none", + "width": "72px", + "padding": "20px 0px 20px 0px" + }, + "children": [] + }, + { + "type": "text", + "data": { + "value": { + "content": "SKETCH FLORAL
\n23€
" + } + }, + "attributes": { + "align": "center", + "font-weight": "bold", + "color": "#000", + "font-size": "15px", + "padding": "0px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "button", + "data": { + "value": { + "content": "BUY NOW" + } + }, + "attributes": { + "align": "center", + "background-color": "#fa8739", + "color": "#fff", + "font-weight": "normal", + "border-radius": "3px", + "line-height": "120%", + "target": "_blank", + "vertical-align": "middle", + "border": "none", + "text-align": "center", + "href": "https://mjml.io", + "font-size": "13px", + "padding": "0px 30px 10px 30px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#fa8739", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/x4k.jpg", + "alt": "Man 1", + "width": "301px", + "padding": "0px 0px 0px 0px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "width": "50%", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "text", + "data": { + "value": { + "content": "ANDERSON SWEATER
\n75€
\nThe Anderson Sweater features a floral all-over print with contrast colour.
" + } + }, + "attributes": { + "align": "left", + "color": "#fff", + "font-size": "13px", + "padding": "0px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "button", + "data": { + "value": { + "content": "BUY NOW" + } + }, + "attributes": { + "align": "center", + "background-color": "#fff", + "color": "#fa8739", + "font-weight": "normal", + "border-radius": "3px", + "line-height": "120%", + "target": "_blank", + "vertical-align": "middle", + "border": "none", + "text-align": "center", + "href": "https://mjml.io", + "padding": "0px 30px 20px 30px", + "inner-padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#2f323b", + "padding": "0px 0px 20px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "text", + "data": { + "value": { + "content": "ALDER TWO JONES JACKET
\n100€
\nColour-block design, zip entry, oxford hood lining, side pockets & TC lining.
" + } + }, + "attributes": { + "align": "left", + "color": "#fff", + "font-size": "13px", + "padding": "0px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "button", + "data": { + "value": { + "content": "BUY NOW" + } + }, + "attributes": { + "align": "center", + "background-color": "#fa8739", + "color": "#fff", + "font-weight": "normal", + "border-radius": "3px", + "line-height": "120%", + "target": "_blank", + "vertical-align": "middle", + "border": "none", + "text-align": "center", + "href": "https://mjml.io", + "padding": "0px 30px 10px 30px", + "inner-padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/xj6.jpg", + "alt": "Man 2", + "border": "none", + "width": "302px", + "padding": "0px 0px 0px 0px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#fa8739", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "text", + "data": { + "value": { + "content": "DISCOVER OUR
\nSUMMER COLLECTION
" + } + }, + "attributes": { + "align": "center", + "color": "#fff", + "font-size": "13px", + "padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#fff", + "padding": "20px 0px 20px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/x4q.jpg", + "alt": "Topaz C3 shoes", + "padding": "0px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "text", + "data": { + "value": { + "content": "TOPAZ C3 SHOES
\n70€
" + } + }, + "attributes": { + "align": "center", + "color": "#000", + "font-size": "15px", + "font-weight": "bold", + "padding": "0px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "button", + "data": { + "value": { + "content": "BUY NOW" + } + }, + "attributes": { + "align": "center", + "background-color": "#fa8739", + "color": "#fff", + "font-weight": "normal", + "border-radius": "3px", + "line-height": "120%", + "target": "_blank", + "vertical-align": "middle", + "border": "none", + "text-align": "center", + "href": "https://mjml.io", + "font-size": "13px", + "padding": "0px 30px 10px 30px", + "inner-padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/x4r.jpg", + "alt": "Camden backpack", + "border": "none", + "width": "199px", + "padding": "0px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "text", + "data": { + "value": { + "content": "CAMDEN BACKPACK
\n50€
" + } + }, + "attributes": { + "align": "center", + "color": "#000", + "font-size": "15px", + "font-weight": "bold", + "padding": "0px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "button", + "data": { + "value": { + "content": "BUY NOW" + } + }, + "attributes": { + "align": "center", + "background-color": "#fa8739", + "color": "#fff", + "font-weight": "normal", + "border-radius": "3px", + "line-height": "120%", + "target": "_blank", + "vertical-align": "middle", + "border": "none", + "text-align": "center", + "href": "https://mjml.io", + "padding": "0px 30px 10px 30px", + "inner-padding": "10px 25px 10px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#2f323b", + "padding": "20px 0px 20px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/x47.png", + "alt": "Cards", + "width": "72px", + "padding": "10px 25px 10px 25px" + }, + "children": [] + }, + { + "type": "text", + "data": { + "value": { + "content": "PAYMENT METHODS
\nWe accept all majors payments options
" + } + }, + "attributes": { + "align": "center", + "color": "#fff", + "font-size": "13px", + "padding": "0px 25px 0px 25px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/x48.png", + "alt": "Currencies", + "border": "none", + "width": "70px", + "padding": "10px 25px 0px 25px" + }, + "children": [] + }, + { + "type": "text", + "data": { + "value": { + "content": "CURRENCIES CHOICE
\nYou have the choice to pay with your own currencies
" + } + }, + "attributes": { + "align": "center", + "color": "#fff", + "font-size": "13px", + "padding": "0px 25px 0px 25px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "top", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/x4y.png", + "alt": "Express", + "border": "none", + "width": "82px", + "padding": "10px 25px 8px 25px" + }, + "children": [] + }, + { + "type": "text", + "data": { + "value": { + "content": "EXPRESS SHIPPING
\nDelivered tomorrow before noon
" + } + }, + "attributes": { + "align": "center", + "color": "#fff", + "font-size": "13px", + "padding": "0px 25px 0px 25px" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center", + "background-color": "#fa8739", + "padding": "0px 0px 20px 0px" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "middle", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "image", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "height": "auto", + "src": "http://191n.mj.am/img/191n/3s/x49.png", + "alt": "Racoon logo", + "border": "none", + "width": "180px", + "padding": "10px 0px 0px 0px" + }, + "children": [] + } + ] + }, + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "border": "none", + "vertical-align": "middle", + "padding": "0px 0px 0px 0px" + }, + "children": [ + { + "type": "social", + "data": { + "value": { + "elements": [ + { + "href": "[[SHORT_PERMALINK]]", + "icon-size": "20px", + "target": "_blank", + "src": "https://easy-email-m-ryan.vercel.app/images/acbae5eb-efa4-4eb6-866c-f421e740b713-ad3c92b1-9cdb-4a7b-aad3-75ad809db8a3.png", + "content": "Facebook", + "name": "facebook" + }, + { + "href": "[[SHORT_PERMALINK]]", + "icon-size": "20px", + "target": "_blank", + "src": "https://easy-email-m-ryan.vercel.app/images/98520d6c-5cef-449e-bcbf-6316ccec2088-e8780361-0deb-4896-895e-e690c886cdf0.png", + "content": "Google", + "name": "twitter" + }, + { + "href": "[[SHORT_PERMALINK]]", + "icon-size": "20px", + "target": "_blank", + "src": "https://easy-email-m-ryan.vercel.app/images/b064f705-34ba-4400-975e-9dd0cec21c30-cc9aa158-56bd-4bf1-b532-72390d25c864.png", + "content": "Twitter", + "name": "google" + } + ] + } + }, + "attributes": { + "align": "center", + "color": "#333333", + "mode": "horizontal", + "font-size": "13px", + "font-weight": "normal", + "border-radius": "3px", + "line-height": "22px", + "text-padding": "4px 4px 4px 0px", + "icon-padding": "0px", + "icon-size": "20px", + "padding": "20px 25px 10px 25px", + "inner-padding": "4px 4px 4px 4px" + }, + "children": [] + } + ] + } + ] + } + ] + } +} diff --git a/nextjs-demo/client/pages/Emails/Create/templates/template7.json b/nextjs-demo/client/pages/Emails/Create/templates/template7.json new file mode 100644 index 000000000..02188bc5a --- /dev/null +++ b/nextjs-demo/client/pages/Emails/Create/templates/template7.json @@ -0,0 +1,1682 @@ +{ + "subject": "Real Estate.", + "thumbnail": "https://assets.maocanhua.cn/de29d529-1d64-460e-9fcf-65524b345a93-", + "content": { + "type": "page", + "data": { + "value": { + "breakpoint": "480px", + "headAttributes": "", + "font-size": "15px", + "line-height": "1.8", + "headStyles": [], + "fonts": [], + "responsive": true, + "font-family": "'Lato', sans-serif", + "text-color": "#000000", + "content-background-color": "#fafafa" + } + }, + "attributes": { + "background-color": "#efeeea", + "width": "600px" + }, + "children": [ + { + "type": "wrapper", + "data": { + "value": {} + }, + "attributes": { + "padding": "20px 0px 20px 0px", + "border": "none", + "direction": "ltr", + "text-align": "center" + }, + "children": [ + { + "type": "section", + "data": { + "value": { + "noWrap": false + } + }, + "attributes": { + "padding": "20px 0px 20px 0px", + "background-repeat": "repeat", + "background-size": "auto", + "background-position": "top center", + "border": "none", + "direction": "ltr", + "text-align": "center" + }, + "children": [ + { + "type": "column", + "data": { + "value": {} + }, + "attributes": { + "padding": "0px 0px 0px 0px", + "border": "none", + "vertical-align": "top" + }, + "children": [ + { + "type": "text", + "data": { + "value": { + "content": "Real Estate" + } + }, + "attributes": { + "padding": "10px 25px 10px 25px", + "align": "center", + "font-size": "30px", + "font-family": "'Playfair Display', sans-serif", + "font-weight": "700" + }, + "children": [] + }, + { + "type": "divider", + "data": { + "value": {} + }, + "attributes": { + "align": "center", + "border-width": "1px", + "border-style": "solid", + "border-color": "#807878", + "padding": "10px 0px" + }, + "children": [] + }, + { + "type": "navbar", + "data": { + "value": { + "links": [ + { + "href": "/gettings-started-onboard", + "content": "HOME", + "color": "#000000", + "font-size": "13px", + "target": "_blank", + "padding": "15px 10px 15px 10px" + }, + { + "href": "/try-it-live", + "content": "PROPERTIES", + "color": "#000000", + "font-size": "13px", + "target": "_blank", + "padding": "15px 10px 15px 10px" + }, + { + "href": "/templates", + "content": "CONTACT", + "color": "#000000", + "font-size": "13px", + "target": "_blank", + "padding": "15px 10px 15px 10px" + } + ] + } + }, + "attributes": { + "align": "center", + "base-url": "https://mjml.io" + }, + "children": [] + } + ] + } + ] + }, + { + "type": "hero", + "data": { + "value": {} + }, + "attributes": { + "background-color": "#ffffff", + "background-position": "center center", + "mode": "fluid-height", + "padding": "100px 0px 100px 0px", + "vertical-align": "top", + "background-url": "https://assets.maocanhua.cn/92a8e4ce-499a-4b7e-a0c6-38265f9589f2-image.png" + }, + "children": [ + { + "type": "text", + "data": { + "value": { + "content": "Real Estate" + } + }, + "attributes": { + "padding": "10px 25px 10px 25px", + "align": "center", + "color": "#ffffff", + "font-size": "45px", + "line-height": "45px" + }, + "children": [] + }, + { + "type": "text", + "data": { + "value": { + "content": "A small river named Duden flows by theirplace and supplies it with the necessary
regelialia.
"
+ }
+ },
+ "attributes": {
+ "align": "center",
+ "background-color": "#414141",
+ "color": "#ffffff",
+ "font-weight": "normal",
+ "border-radius": "3px",
+ "padding": "10px 25px 10px 25px",
+ "inner-padding": "10px 25px 10px 25px",
+ "line-height": "1.5",
+ "target": "_blank",
+ "vertical-align": "middle",
+ "border": "none",
+ "text-align": "center",
+ "href": "#",
+ "font-size": "14px"
+ },
+ "children": []
+ },
+ {
+ "type": "button",
+ "data": {
+ "value": {
+ "content": "Browse Properties"
+ }
+ },
+ "attributes": {
+ "align": "center",
+ "background-color": "#feb062",
+ "color": "#ffffff",
+ "font-size": "13px",
+ "font-weight": "normal",
+ "border-radius": "5px",
+ "padding": "10px 25px 10px 25px",
+ "inner-padding": "10px 25px 10px 25px",
+ "line-height": "120%",
+ "target": "_blank",
+ "vertical-align": "middle",
+ "border": "none",
+ "text-align": "center",
+ "href": "#"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": false
+ }
+ },
+ "attributes": {
+ "padding": "20px 0px 20px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Buy House in Best Price"
+ }
+ },
+ "attributes": {
+ "padding": "10px 25px 10px 25px",
+ "align": "center",
+ "font-size": "34px",
+ "font-weight": "300"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth."
+ }
+ },
+ "attributes": {
+ "padding": "10px 25px 10px 25px",
+ "align": "center",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ },
+ {
+ "type": "button",
+ "data": {
+ "value": {
+ "content": "Browse Properties"
+ }
+ },
+ "attributes": {
+ "align": "center",
+ "background-color": "#000",
+ "color": "#ffffff",
+ "font-weight": "normal",
+ "border-radius": "0px",
+ "padding": "10px 25px 10px 25px",
+ "inner-padding": "10px 25px 10px 25px",
+ "line-height": "120%",
+ "target": "_blank",
+ "vertical-align": "middle",
+ "border": "none",
+ "text-align": "center",
+ "href": "#",
+ "font-size": "12px"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "wrapper",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "20px 25px 20px 25px",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center",
+ "background-color": "#fafafa"
+ },
+ "children": [
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": false
+ }
+ },
+ "attributes": {
+ "padding": "20px 0px 20px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Our Services"
+ }
+ },
+ "attributes": {
+ "padding": "10px 25px 10px 25px",
+ "align": "center",
+ "font-size": "28px",
+ "line-height": "1.4",
+ "font-weight": "400"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": true
+ }
+ },
+ "attributes": {
+ "padding": "20px 0px 20px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "group",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "vertical-align": "top",
+ "direction": "ltr"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "image",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "height": "auto",
+ "padding": "0px 0px 0px 0px",
+ "src": "https://assets.maocanhua.cn/2d1f8c3a-6c54-428a-9300-e171131001bd-image.png",
+ "width": "100px"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Layout"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 0px 25px",
+ "align": "center",
+ "font-size": "18px",
+ "font-weight": "400"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Far far away, behind the word mountains, far from the countries"
+ }
+ },
+ "attributes": {
+ "padding": "10px 0px 10px 0px",
+ "align": "center",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "image",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "height": "auto",
+ "padding": "0px 0px 0px 0px",
+ "src": "https://assets.maocanhua.cn/0697f2b4-791a-4dc6-822d-59c6abec0faf-image.png",
+ "width": "100px"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Design"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 0px 25px",
+ "align": "center",
+ "font-size": "18px",
+ "font-weight": "400"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Far far away, behind the word mountains, far from the countries"
+ }
+ },
+ "attributes": {
+ "padding": "10px 0px 10px 0px",
+ "align": "center",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "wrapper",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "20px 25px 20px 25px",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center",
+ "background-color": "#fafafa"
+ },
+ "children": [
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": false
+ }
+ },
+ "attributes": {
+ "padding": "20px 0px 20px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Properties For Sale"
+ }
+ },
+ "attributes": {
+ "padding": "10px 25px 10px 25px",
+ "align": "center",
+ "font-size": "28px",
+ "line-height": "1.4",
+ "font-weight": "400"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "A small river named Duden flows by their place and supplies it with the necessary regelialia."
+ }
+ },
+ "attributes": {
+ "padding": "10px 25px 10px 25px",
+ "align": "center",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": true
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 20px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "group",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "vertical-align": "top",
+ "direction": "ltr"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "1px solid #ccc",
+ "vertical-align": "top",
+ "width": "48%"
+ },
+ "children": [
+ {
+ "type": "image",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "height": "auto",
+ "padding": "0px 0px 0px 0px",
+ "src": "https://assets.maocanhua.cn/c2fa56dd-c6d0-4dce-9aa5-d1de563320aa-image.png",
+ "width": ""
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Residential House"
+ }
+ },
+ "attributes": {
+ "padding": "10px 25px 0px 25px",
+ "align": "center",
+ "font-size": "18px",
+ "font-weight": "400"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "100 sqft 2 Bed 2 bath"
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 10px 0px",
+ "align": "center",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "$1,000,000"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 0px 25px",
+ "align": "center",
+ "font-size": "18px",
+ "font-weight": "400"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Far far away, behind the word mountains, far from the countries"
+ }
+ },
+ "attributes": {
+ "padding": "10px 5px 10px 5px",
+ "align": "center",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top",
+ "width": "4%"
+ },
+ "children": []
+ },
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "1px solid #ccc",
+ "vertical-align": "top",
+ "width": "48%"
+ },
+ "children": [
+ {
+ "type": "image",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "height": "auto",
+ "padding": "0px 0px 0px 0px",
+ "src": "https://assets.maocanhua.cn/8c8cca3a-d9c1-4ae4-bf49-1a0deca44c56-image.png",
+ "width": ""
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Residential House"
+ }
+ },
+ "attributes": {
+ "padding": "10px 25px 0px 25px",
+ "align": "center",
+ "font-size": "18px",
+ "font-weight": "400"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "100 sqft 2 Bed 2 bath"
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 10px 0px",
+ "align": "center",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "$1,000,000"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 0px 25px",
+ "align": "center",
+ "font-size": "18px",
+ "font-weight": "400"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Far far away, behind the word mountains, far from the countries"
+ }
+ },
+ "attributes": {
+ "padding": "10px 5px 10px 5px",
+ "align": "center",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": true
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 20px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "group",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "vertical-align": "top",
+ "direction": "ltr"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "1px solid #ccc",
+ "vertical-align": "top",
+ "width": "48%"
+ },
+ "children": [
+ {
+ "type": "image",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "height": "auto",
+ "padding": "0px 0px 0px 0px",
+ "src": "https://assets.maocanhua.cn/48d19e31-449f-453c-8c21-a10410575723-image.png",
+ "width": ""
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Residential House"
+ }
+ },
+ "attributes": {
+ "padding": "10px 25px 0px 25px",
+ "align": "center",
+ "font-size": "18px",
+ "font-weight": "400"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "100 sqft 2 Bed 2 bath"
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 10px 0px",
+ "align": "center",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "$1,000,000"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 0px 25px",
+ "align": "center",
+ "font-size": "18px",
+ "font-weight": "400"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Far far away, behind the word mountains, far from the countries"
+ }
+ },
+ "attributes": {
+ "padding": "10px 5px 10px 5px",
+ "align": "center",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top",
+ "width": "4%"
+ },
+ "children": []
+ },
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "1px solid #ccc",
+ "vertical-align": "top",
+ "width": "48%"
+ },
+ "children": [
+ {
+ "type": "image",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "height": "auto",
+ "padding": "0px 0px 0px 0px",
+ "src": "https://assets.maocanhua.cn/214fa0fd-afec-483f-a134-cb78305cad72-image.png",
+ "width": ""
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Residential House"
+ }
+ },
+ "attributes": {
+ "padding": "10px 25px 0px 25px",
+ "align": "center",
+ "font-size": "18px",
+ "font-weight": "400"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "100 sqft 2 Bed 2 bath"
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 10px 0px",
+ "align": "center",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "$1,000,000"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 0px 25px",
+ "align": "center",
+ "font-size": "18px",
+ "font-weight": "400"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Far far away, behind the word mountains, far from the countries"
+ }
+ },
+ "attributes": {
+ "padding": "10px 5px 10px 5px",
+ "align": "center",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "wrapper",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": true
+ }
+ },
+ "attributes": {
+ "padding": "75px 0px 75px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center",
+ "background-url": "https://assets.maocanhua.cn/ee1b8e88-a691-4ce5-ae45-b5b560f6cd13-image.png"
+ },
+ "children": [
+ {
+ "type": "group",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "vertical-align": "top",
+ "direction": "ltr"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "200"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 0px 25px",
+ "align": "center",
+ "font-size": "34px",
+ "font-weight": "700",
+ "color": "#ffffff"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Agents"
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "align": "center",
+ "font-size": "16px",
+ "color": "#ffffff"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "1200"
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "align": "center",
+ "font-size": "34px",
+ "font-weight": "700",
+ "color": "#ffffff"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "happy Clients"
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "align": "center",
+ "font-size": "16px",
+ "color": "#ffffff"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "1000"
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "align": "center",
+ "font-size": "34px",
+ "font-weight": "700",
+ "color": "#ffffff"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Sold Properties"
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "align": "center",
+ "font-size": "16px",
+ "color": "#ffffff"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "wrapper",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "25px 25px 0px 25px",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": true
+ }
+ },
+ "attributes": {
+ "padding": "20px 0px 20px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "group",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "vertical-align": "top",
+ "direction": "ltr"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Our Features"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 26px 0px",
+ "align": "left",
+ "font-size": "28px"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Our Features"
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "align": "left",
+ "font-size": "18px"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "A small river named Duden flows by their"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 20px 0px",
+ "align": "left",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Modern Design"
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "align": "left",
+ "font-size": "18px"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "A small river named Duden flows by their"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 20px 0px",
+ "align": "left",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Minimal Design"
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "align": "left",
+ "font-size": "18px"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "A small river named Duden flows by their"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 0px 0px",
+ "align": "left",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "image",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "height": "auto",
+ "padding": "0px 0px 0px 0px",
+ "src": "https://assets.maocanhua.cn/e49e99e4-e1a4-4a14-a3f2-885e7279a4d2-image.png"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": false
+ }
+ },
+ "attributes": {
+ "padding": "20px 0px 20px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "button",
+ "data": {
+ "value": {
+ "content": "Start Browsing"
+ }
+ },
+ "attributes": {
+ "align": "center",
+ "background-color": "transparent",
+ "color": "#000000",
+ "font-weight": "700",
+ "border-radius": "0px",
+ "padding": "10px 25px 10px 25px",
+ "inner-padding": "10px 25px 10px 25px",
+ "line-height": "120%",
+ "target": "_blank",
+ "vertical-align": "middle",
+ "border": "2px solid #000",
+ "text-align": "center",
+ "href": "#",
+ "font-size": ""
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "wrapper",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": false
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "divider",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "border-width": "1px",
+ "border-style": "solid",
+ "border-color": "#807878",
+ "padding": "10px 0px"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": true
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "group",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "vertical-align": "top",
+ "direction": "ltr"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "middle",
+ "width": "60%"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Stay Updated On Newest Properties"
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 15px",
+ "align": "left",
+ "font-size": "20px"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 15px 0px 0px",
+ "border": "none",
+ "vertical-align": "middle",
+ "width": "40%"
+ },
+ "children": [
+ {
+ "type": "social",
+ "data": {
+ "value": {
+ "elements": [
+ {
+ "href": "#",
+ "icon-size": "20px",
+ "target": "_blank",
+ "src": "https://assets.maocanhua.cn/5738124c-7dd0-4cde-9f24-dc713423ee36-image.png",
+ "content": ""
+ },
+ {
+ "href": "#",
+ "icon-size": "20px",
+ "target": "_blank",
+ "src": "https://assets.maocanhua.cn/fcce8406-c946-4ac5-a0cd-3982473be3e3-image.png",
+ "content": ""
+ },
+ {
+ "href": "",
+ "icon-size": "20px",
+ "target": "_blank",
+ "src": "https://assets.maocanhua.cn/2b845c8b-30d2-4326-a11f-48848dbadf7c-image.png",
+ "content": ""
+ }
+ ]
+ }
+ },
+ "attributes": {
+ "align": "right",
+ "color": "#333333",
+ "mode": "horizontal",
+ "font-size": "13px",
+ "font-weight": "normal",
+ "border-radius": "3px",
+ "padding": "0px10px 0px 10px 0px",
+ "inner-padding": "4px 4px 4px 4px",
+ "line-height": "22px",
+ "text-padding": "4px 4px 4px 0px",
+ "icon-padding": "0px",
+ "icon-size": "20px"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": false
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center",
+ "background-color": "#fafafa"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "No longer want to receive these email? You can Unsubscribe here"
+ }
+ },
+ "attributes": {
+ "padding": "10px 25px 10px 25px",
+ "align": "center",
+ "font-size": "",
+ "color": "#807878"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+}
diff --git a/nextjs-demo/client/pages/Emails/Create/templates/template8.json b/nextjs-demo/client/pages/Emails/Create/templates/template8.json
new file mode 100644
index 000000000..0ef980c8c
--- /dev/null
+++ b/nextjs-demo/client/pages/Emails/Create/templates/template8.json
@@ -0,0 +1,957 @@
+{
+ "subject": "Young Woman Dress",
+ "thumbnail": "https://assets.maocanhua.cn/42012a5b-c381-4c46-9a2e-c67daf610ccd-",
+ "content": {
+ "type": "page",
+ "data": {
+ "value": {
+ "breakpoint": "480px",
+ "headAttributes": "",
+ "font-size": "15px",
+ "line-height": "1.8",
+ "headStyles": [],
+ "fonts": [],
+ "responsive": true,
+ "font-family": "'Lato', sans-serif",
+ "text-color": "#000000",
+ "content-background-color": "#ffffff"
+ }
+ },
+ "attributes": {
+ "background-color": "#efeeea",
+ "width": "600px"
+ },
+ "children": [
+ {
+ "type": "wrapper",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "20px 0px 20px 0px",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": false
+ }
+ },
+ "attributes": {
+ "padding": "20px 0px 20px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "button",
+ "data": {
+ "value": {
+ "content": "SHOPING"
+ }
+ },
+ "attributes": {
+ "align": "center",
+ "background-color": "transparent",
+ "color": "#000000",
+ "font-weight": "700",
+ "border-radius": "0px",
+ "padding": "10px 25px 10px 25px",
+ "inner-padding": "10px 25px 10px 25px",
+ "line-height": "120%",
+ "target": "_blank",
+ "vertical-align": "middle",
+ "border": "2px solid #000",
+ "text-align": "center",
+ "href": "#",
+ "font-size": "20px"
+ },
+ "children": []
+ },
+ {
+ "type": "divider",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "border-width": "1px",
+ "border-style": "solid",
+ "border-color": "#c2c2c2",
+ "padding": "10px 0px"
+ },
+ "children": []
+ },
+ {
+ "type": "navbar",
+ "data": {
+ "value": {
+ "links": [
+ {
+ "href": "/gettings-started-onboard",
+ "content": "HOME",
+ "color": "#000000",
+ "font-size": "13px",
+ "target": "_blank",
+ "padding": "15px 10px 15px 10px"
+ },
+ {
+ "href": "/try-it-live",
+ "content": "NEW",
+ "color": "#000000",
+ "font-size": "13px",
+ "target": "_blank",
+ "padding": "15px 10px 15px 10px"
+ },
+ {
+ "href": "/templates",
+ "content": "WOMEN",
+ "color": "#000000",
+ "font-size": "13px",
+ "target": "_blank",
+ "padding": "15px 10px 15px 10px"
+ },
+ {
+ "href": "/components",
+ "content": "KIDS",
+ "color": "#000000",
+ "font-size": "13px",
+ "target": "_blank",
+ "padding": "15px 10px 15px 10px"
+ },
+ {
+ "href": "/components",
+ "content": "BLOG",
+ "color": "#000000",
+ "font-size": "13px",
+ "target": "_blank",
+ "padding": "15px 10px 15px 10px"
+ }
+ ]
+ }
+ },
+ "attributes": {
+ "align": "center",
+ "base-url": "https://mjml.io"
+ },
+ "children": []
+ },
+ {
+ "type": "divider",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "border-width": "1px",
+ "border-style": "solid",
+ "border-color": "#c2c2c2",
+ "padding": "10px 0px"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": false
+ }
+ },
+ "attributes": {
+ "padding": "20px 0px 20px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "We Are Shopping Website That Gives You An Affordable Prices & Discount"
+ }
+ },
+ "attributes": {
+ "padding": "10px 25px 10px 25px",
+ "align": "left",
+ "font-size": "30px",
+ "font-weight": "300"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": true
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "group",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "vertical-align": "top",
+ "direction": "ltr"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "middle"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Young Woman Dress"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 18px 25px",
+ "align": "left",
+ "font-size": "22px",
+ "line-height": "1.4"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "A small river named Duden flows by their place and supplies it with the necessary regelialia."
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 0px 25px",
+ "align": "left",
+ "font-size": "15px",
+ "line-height": "1.4",
+ "color": "#979494"
+ },
+ "children": []
+ },
+ {
+ "type": "button",
+ "data": {
+ "value": {
+ "content": "Shop now"
+ }
+ },
+ "attributes": {
+ "align": "center",
+ "background-color": "#f85e9f",
+ "color": "#ffffff",
+ "font-weight": "400",
+ "border-radius": "5px",
+ "padding": "10px 25px 10px 25px",
+ "inner-padding": "10px 25px 10px 25px",
+ "line-height": "120%",
+ "target": "_blank",
+ "vertical-align": "middle",
+ "border": "",
+ "text-align": "center",
+ "href": "#",
+ "font-size": "15px"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "middle"
+ },
+ "children": [
+ {
+ "type": "image",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "height": "auto",
+ "padding": "0px 0px 0px 0px",
+ "src": "https://assets.maocanhua.cn/d56e3068-0985-4b86-b94e-2f6b375a6735-image.png"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": true
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "group",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "vertical-align": "top",
+ "direction": "ltr"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "middle"
+ },
+ "children": [
+ {
+ "type": "image",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "height": "auto",
+ "padding": "0px 0px 0px 0px",
+ "src": "https://assets.maocanhua.cn/987f3337-ae63-41b4-a31b-d02f31c33061-image.png"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "middle"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Young Woman Dress"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 18px 25px",
+ "align": "left",
+ "font-size": "22px",
+ "line-height": "1.4"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "A small river named Duden flows by their place and supplies it with the necessary regelialia."
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 0px 25px",
+ "align": "left",
+ "font-size": "15px",
+ "line-height": "1.4",
+ "color": "#979494"
+ },
+ "children": []
+ },
+ {
+ "type": "button",
+ "data": {
+ "value": {
+ "content": "Shop now"
+ }
+ },
+ "attributes": {
+ "align": "center",
+ "background-color": "#f85e9f",
+ "color": "#ffffff",
+ "font-weight": "400",
+ "border-radius": "5px",
+ "padding": "10px 25px 10px 25px",
+ "inner-padding": "10px 25px 10px 25px",
+ "line-height": "120%",
+ "target": "_blank",
+ "vertical-align": "middle",
+ "border": "",
+ "text-align": "center",
+ "href": "#",
+ "font-size": "15px"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": true
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "group",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "vertical-align": "top",
+ "direction": "ltr"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "middle"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Young Woman Dress"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 18px 25px",
+ "align": "left",
+ "font-size": "22px",
+ "line-height": "1.4"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "A small river named Duden flows by their place and supplies it with the necessary regelialia."
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 0px 25px",
+ "align": "left",
+ "font-size": "15px",
+ "line-height": "1.4",
+ "color": "#979494"
+ },
+ "children": []
+ },
+ {
+ "type": "button",
+ "data": {
+ "value": {
+ "content": "Shop now"
+ }
+ },
+ "attributes": {
+ "align": "center",
+ "background-color": "#f85e9f",
+ "color": "#ffffff",
+ "font-weight": "400",
+ "border-radius": "5px",
+ "padding": "10px 25px 10px 25px",
+ "inner-padding": "10px 25px 10px 25px",
+ "line-height": "120%",
+ "target": "_blank",
+ "vertical-align": "middle",
+ "border": "",
+ "text-align": "center",
+ "href": "#",
+ "font-size": "15px"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "middle"
+ },
+ "children": [
+ {
+ "type": "image",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "height": "auto",
+ "padding": "0px 0px 0px 0px",
+ "src": "https://assets.maocanhua.cn/c4b825c3-89ba-46bc-9f1b-dc7a85b9dc68-image.png"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": true
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "group",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "vertical-align": "top",
+ "direction": "ltr"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "middle"
+ },
+ "children": [
+ {
+ "type": "image",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "align": "center",
+ "height": "auto",
+ "padding": "0px 0px 0px 0px",
+ "src": "https://assets.maocanhua.cn/3da866d0-3ba8-4150-99fc-8ac4d7024621-image.png"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "middle"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Young Woman Dress"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 18px 25px",
+ "align": "left",
+ "font-size": "22px",
+ "line-height": "1.4"
+ },
+ "children": []
+ },
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "A small river named Duden flows by their place and supplies it with the necessary regelialia."
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 0px 25px",
+ "align": "left",
+ "font-size": "15px",
+ "line-height": "1.4",
+ "color": "#979494"
+ },
+ "children": []
+ },
+ {
+ "type": "button",
+ "data": {
+ "value": {
+ "content": "Shop now"
+ }
+ },
+ "attributes": {
+ "align": "center",
+ "background-color": "#f85e9f",
+ "color": "#ffffff",
+ "font-weight": "400",
+ "border-radius": "5px",
+ "padding": "10px 25px 10px 25px",
+ "inner-padding": "10px 25px 10px 25px",
+ "line-height": "120%",
+ "target": "_blank",
+ "vertical-align": "middle",
+ "border": "",
+ "text-align": "center",
+ "href": "#",
+ "font-size": "15px"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": false
+ }
+ },
+ "attributes": {
+ "padding": "20px 0px 20px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "button",
+ "data": {
+ "value": {
+ "content": "Start Shopping"
+ }
+ },
+ "attributes": {
+ "align": "center",
+ "background-color": "#ffffff",
+ "color": "#000000",
+ "font-weight": "700",
+ "border-radius": "0px",
+ "padding": "10px 25px 10px 25px",
+ "inner-padding": "10px 25px 10px 25px",
+ "line-height": "120%",
+ "target": "_blank",
+ "vertical-align": "middle",
+ "border": "2px solid #000",
+ "text-align": "center",
+ "href": "#",
+ "font-size": "15px"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": true
+ }
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center"
+ },
+ "children": [
+ {
+ "type": "group",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "vertical-align": "top",
+ "direction": "ltr"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "middle",
+ "width": "60%"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "Stay Updated On Our Shopping"
+ }
+ },
+ "attributes": {
+ "padding": "0px 25px 0px 25px",
+ "align": "left",
+ "font-size": "20px",
+ "font-weight": "400",
+ "line-height": "36px"
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "middle",
+ "width": "40%"
+ },
+ "children": [
+ {
+ "type": "social",
+ "data": {
+ "value": {
+ "elements": [
+ {
+ "href": "#",
+ "icon-size": "20px",
+ "target": "_blank",
+ "src": "https://assets.maocanhua.cn/b7cc7e4d-b6a3-45cb-a1a5-bec2fac278ad-image.png",
+ "content": ""
+ },
+ {
+ "href": "#",
+ "icon-size": "20px",
+ "target": "_blank",
+ "src": "https://assets.maocanhua.cn/f8644f58-ea6d-4b68-90c4-7b871f7ad702-image.png",
+ "content": ""
+ },
+ {
+ "href": "",
+ "icon-size": "20px",
+ "target": "_blank",
+ "src": "https://assets.maocanhua.cn/fc295200-a262-4e3d-8310-e6dac278222e-image.png",
+ "content": ""
+ }
+ ]
+ }
+ },
+ "attributes": {
+ "align": "center",
+ "color": "#333333",
+ "mode": "horizontal",
+ "font-size": "13px",
+ "font-weight": "normal",
+ "border-radius": "3px",
+ "padding": "10px 25px 10px 25px",
+ "inner-padding": "4px 4px 4px 4px",
+ "line-height": "22px",
+ "text-padding": "4px 4px 4px 0px",
+ "icon-padding": "0px",
+ "icon-size": "20px"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "data": {
+ "value": {
+ "noWrap": false
+ }
+ },
+ "attributes": {
+ "padding": "10px 0px 10px 0px",
+ "background-repeat": "repeat",
+ "background-size": "auto",
+ "background-position": "top center",
+ "border": "none",
+ "direction": "ltr",
+ "text-align": "center",
+ "background-color": "#fafafa"
+ },
+ "children": [
+ {
+ "type": "column",
+ "data": {
+ "value": {}
+ },
+ "attributes": {
+ "padding": "0px 0px 0px 0px",
+ "border": "none",
+ "vertical-align": "top"
+ },
+ "children": [
+ {
+ "type": "text",
+ "data": {
+ "value": {
+ "content": "No longer want to receive these email? You can Unsubscribe here"
+ }
+ },
+ "attributes": {
+ "padding": "10px 25px 10px 25px",
+ "align": "center",
+ "font-size": "15px",
+ "line-height": "27px",
+ "color": "#c7bdbd"
+ },
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+}
diff --git a/nextjs-demo/client/pages/Emails/Editor/index.tsx b/nextjs-demo/client/pages/Emails/Editor/index.tsx
new file mode 100644
index 000000000..b9534f79a
--- /dev/null
+++ b/nextjs-demo/client/pages/Emails/Editor/index.tsx
@@ -0,0 +1,502 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { BlockManager, BasicType, AdvancedType, JsonToMjml } from 'easy-email-core';
+import {
+ EmailEditor,
+ EmailEditorProvider,
+ IEmailTemplate,
+ Stack,
+} from 'easy-email-editor';
+import { ExtensionProps, MjmlToJson, StandardLayout } from 'easy-email-extensions';
+import { useWindowSize } from 'react-use';
+import {
+ Button,
+ ConfigProvider,
+ Dropdown,
+ Form,
+ Input,
+ Menu,
+ Message,
+ Modal,
+ PageHeader,
+ Select,
+ Space,
+ Spin,
+} from '@arco-design/web-react';
+import 'easy-email-editor/lib/style.css';
+import 'easy-email-extensions/lib/style.css';
+
+// theme, If you need to change the theme, you can make a duplicate in https://arco.design/themes/design/1799/setting/base/Color
+
+import { Config } from 'final-form';
+import mjml from 'mjml-browser';
+import { useGetEmailTemplateQuery, useUpdateEmailTemplateMutation } from '@/client/hooks';
+import { useRouter } from 'next/router';
+import FullScreenLoading from '@/client/components/FullScreenLoading';
+import { pushEvent } from '@/client/utils/pushEvent';
+import { Liquid } from 'liquidjs';
+import { saveAs } from 'file-saver';
+import { useMergeTagsModal } from '@/client/hooks/useMergeTagsModal';
+import { testMergeTags } from './testMergeTags';
+import { IconMoonFill, IconSunFill } from '@arco-design/web-react/icon';
+import { Uploader } from '@/client/utils/Uploader';
+
+import blueTheme from '!!raw-loader!@arco-themes/react-easy-email-theme/css/arco.css';
+import purpleTheme from '!!raw-loader!@arco-themes/react-easy-email-theme-purple/css/arco.css';
+import greenTheme from '!!raw-loader!@arco-themes/react-easy-email-theme-green/css/arco.css';
+import { useSession } from 'next-auth/react';
+import { CommercialBanner } from '@/client/components/CommercialBanner';
+
+const defaultCategories: ExtensionProps['categories'] = [
+ {
+ label: 'Content',
+ active: true,
+ blocks: [
+ {
+ type: AdvancedType.TEXT,
+ },
+ {
+ type: AdvancedType.IMAGE,
+ payload: { attributes: { padding: '0px 0px 0px 0px' } },
+ },
+ {
+ type: AdvancedType.BUTTON,
+ },
+ {
+ type: AdvancedType.SOCIAL,
+ },
+ {
+ type: AdvancedType.DIVIDER,
+ },
+ {
+ type: AdvancedType.SPACER,
+ },
+ {
+ type: AdvancedType.HERO,
+ },
+ {
+ type: AdvancedType.WRAPPER,
+ },
+ ],
+ },
+ {
+ label: 'Layout',
+ active: true,
+ displayType: 'column',
+ blocks: [
+ {
+ title: '2 columns',
+ payload: [
+ ['50%', '50%'],
+ ['33%', '67%'],
+ ['67%', '33%'],
+ ['25%', '75%'],
+ ['75%', '25%'],
+ ],
+ },
+ {
+ title: '3 columns',
+ payload: [
+ ['33.33%', '33.33%', '33.33%'],
+ ['25%', '25%', '50%'],
+ ['50%', '25%', '25%'],
+ ],
+ },
+ {
+ title: '4 columns',
+ payload: [['25%', '25%', '25%', '25%']],
+ },
+ ],
+ },
+];
+
+export default function App() {
+ const { width } = useWindowSize();
+ const [isDarkMode, setIsDarkMode] = useState(false);
+ const [theme, setTheme] = useState<'blue' | 'green' | 'purple'>('blue');
+ const [locale, setLocale] = useState('en');
+ const {
+ modal: mergeTagsModal,
+ openModal: openMergeTagsModal,
+ mergeTags,
+ setMergeTags,
+ } = useMergeTagsModal(testMergeTags);
+
+ const session = useSession();
+ const user = session.data?.user;
+
+ const smallScene = width < 1400;
+ const router = useRouter();
+ const id = router.query.id;
+
+ const { data: template, fetching } = useGetEmailTemplateQuery({
+ id: id as string,
+ });
+
+ const { fetching: updateLoading, updateEmailTemplateMutation } =
+ useUpdateEmailTemplateMutation();
+
+ useEffect(() => {
+ if (isDarkMode) {
+ document.body.setAttribute('arco-theme', 'dark');
+ } else {
+ document.body.removeAttribute('arco-theme');
+ }
+ }, [isDarkMode]);
+
+ const themeStyleText = useMemo(() => {
+ if (theme === 'green') return greenTheme;
+ if (theme === 'purple') return purpleTheme;
+ return blueTheme;
+ }, [theme]);
+
+ const onSubmit: Config
+
+ {new Date(col).toLocaleString()}
;
+ },
+ },
+ {
+ title: 'Updated At',
+ dataIndex: 'updatedAt',
+ render(col, item, index) {
+ return {new Date(col).toLocaleString()}
;
+ },
+ },
+ {
+ title: '',
+ render(col, item, index) {
+ const droplist = (
+
+ );
+
+ return (
+
+
+