Added some testing components for email framework.
This commit is contained in:
Patrick Fic
@@ -19,6 +19,7 @@
|
||||
"axios": "^0.19.2",
|
||||
"dotenv": "^8.2.0",
|
||||
"firebase": "^7.13.1",
|
||||
"grapesjs-react": "^3.0.4",
|
||||
"graphql": "^14.6.0",
|
||||
"i18next": "^19.3.4",
|
||||
"node-sass": "^4.13.1",
|
||||
|
||||
@@ -1,30 +1,77 @@
|
||||
import React from "react";
|
||||
import React, { useRef, useState } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import {
|
||||
startLoading,
|
||||
endLoading
|
||||
endLoading,
|
||||
} from "../../redux/application/application.actions";
|
||||
import { setEmailOptions } from "../../redux/email/email.actions";
|
||||
import T, {
|
||||
Subject
|
||||
Subject,
|
||||
} from "../../emails/templates/appointment-confirmation/appointment-confirmation.template";
|
||||
import { EMAIL_APPOINTMENT_CONFIRMATION } from "../../emails/templates/appointment-confirmation/appointment-confirmation.query";
|
||||
import axios from "axios";
|
||||
import CKEditor from "@ckeditor/ckeditor5-react";
|
||||
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
|
||||
import { Editor } from "grapesjs-react";
|
||||
import "grapesjs/dist/css/grapes.min.css";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
//currentUser: selectCurrentUser
|
||||
});
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
setEmailOptions: e => dispatch(setEmailOptions(e)),
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
setEmailOptions: (e) => dispatch(setEmailOptions(e)),
|
||||
load: () => dispatch(startLoading()),
|
||||
endload: () => dispatch(endLoading())
|
||||
endload: () => dispatch(endLoading()),
|
||||
});
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(function Test({ setEmailOptions, load, endload }) {
|
||||
const editorRef = useRef(null);
|
||||
const [state, setState] = useState("");
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
onClick={() => {
|
||||
axios
|
||||
.post("/render", {
|
||||
view: testView2,
|
||||
context: {
|
||||
people: ["Yehuda Katz", "Alan Johnson", "Charles Jolley"],
|
||||
},
|
||||
})
|
||||
.then((r) => {
|
||||
var newWin = window.open(
|
||||
"url",
|
||||
"windowName",
|
||||
"height=300,width=300"
|
||||
);
|
||||
newWin.document.write(r.data);
|
||||
});
|
||||
}}>
|
||||
Test render for mustache
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
axios
|
||||
.post("/render", {
|
||||
view: state,
|
||||
context: {
|
||||
people: ["Yehuda Katz", "Alan Johnson", "Charles Jolley"],
|
||||
},
|
||||
})
|
||||
.then((r) => {
|
||||
var newWin = window.open(
|
||||
"url",
|
||||
"windowName",
|
||||
"height=300,width=300"
|
||||
);
|
||||
newWin.document.write(r.data);
|
||||
});
|
||||
}}>
|
||||
Test render for mustache using state
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
setEmailOptions({
|
||||
@@ -32,20 +79,499 @@ export default connect(
|
||||
from: { name: "Kavia Autobody", address: "noreply@bodyshop.app" },
|
||||
to: "patrickwf@gmail.com",
|
||||
replyTo: "snaptsoft@gmail.com",
|
||||
subject: Subject
|
||||
subject: Subject,
|
||||
},
|
||||
template: T,
|
||||
queryConfig: [
|
||||
EMAIL_APPOINTMENT_CONFIRMATION,
|
||||
{ variables: { id: "91bb31dd-ea87-4cfc-bbe2-2ec754dcb861" } }
|
||||
]
|
||||
{ variables: { id: "91bb31dd-ea87-4cfc-bbe2-2ec754dcb861" } },
|
||||
],
|
||||
})
|
||||
}
|
||||
>
|
||||
}>
|
||||
Set email config.
|
||||
</button>
|
||||
<button onClick={() => load()}>Load</button>
|
||||
<button onClick={() => endload()}>Stop</button>
|
||||
<CKEditor
|
||||
editor={ClassicEditor}
|
||||
data={view}
|
||||
onChange={(event, editor) => {
|
||||
// handleHtmlChange(editor.getData());
|
||||
//TODO Ensure that removing onchange never introduces a race condition
|
||||
}}
|
||||
onBlur={(event, editor) => {
|
||||
setState(editor.getData());
|
||||
}}
|
||||
/>
|
||||
<Editor
|
||||
blockManager={[
|
||||
{
|
||||
id: "section", // id is mandatory
|
||||
label: "<b>Section</b>", // You can use HTML/SVG inside labels
|
||||
attributes: { class: "gjs-block-section" },
|
||||
content: `<section>
|
||||
<h1>This is a simple title</h1>
|
||||
<div>This is just a Lorem text: Lorem ipsum dolor sit amet</div>
|
||||
</section>`,
|
||||
},
|
||||
{
|
||||
id: "text2",
|
||||
label: "Text2",
|
||||
content:
|
||||
'<div data-gjs-type="text">Insert your text here222222222</div>',
|
||||
},
|
||||
{
|
||||
id: "image",
|
||||
label: "Image",
|
||||
// Select the component once it's dropped
|
||||
select: true,
|
||||
// You can pass components as a JSON instead of a simple HTML string,
|
||||
// in this case we also use a defined component type `image`
|
||||
content: { type: "image" },
|
||||
// This triggers `active` event on dropped components and the `image`
|
||||
// reacts by opening the AssetManager
|
||||
activate: true,
|
||||
},
|
||||
]}
|
||||
onInit={(editor) => {
|
||||
console.log("editor", editor);
|
||||
editor.setComponents(view);
|
||||
}}
|
||||
storageManager={false}
|
||||
ref={editorRef}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const testView2 = `<!DOCTYPE html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>Landing Page - Start Bootstrap Theme</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom fonts for this template -->
|
||||
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
|
||||
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="css/landing-page.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-light bg-light static-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Start Bootstrap</a>
|
||||
<a class="btn btn-primary" href="#">Sign In</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Masthead -->
|
||||
<header class="masthead text-white text-center">
|
||||
<div class="overlay"></div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-9 mx-auto">
|
||||
<h1 class="mb-5">Build a landing page for your business or project and generate more leads!</h1>
|
||||
</div>
|
||||
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="col-12 col-md-9 mb-2 mb-md-0">
|
||||
<input type="email" class="form-control form-control-lg" placeholder="Enter your email...">
|
||||
</div>
|
||||
<div class="col-12 col-md-3">
|
||||
<button type="submit" class="btn btn-block btn-lg btn-primary">Sign up!</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Icons Grid -->
|
||||
<section class="features-icons bg-light text-center">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
|
||||
<div class="features-icons-icon d-flex">
|
||||
<i class="icon-screen-desktop m-auto text-primary"></i>
|
||||
</div>
|
||||
<h3>Fully Responsive</h3>
|
||||
<p class="lead mb-0">This theme will look great on any device, no matter the size!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
|
||||
<div class="features-icons-icon d-flex">
|
||||
<i class="icon-layers m-auto text-primary"></i>
|
||||
</div>
|
||||
<h3>Bootstrap 4 Ready</h3>
|
||||
<p class="lead mb-0">Featuring the latest build of the new Bootstrap 4 framework!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4" data-vvveb-disabled="">
|
||||
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
|
||||
<div class="features-icons-icon d-flex">
|
||||
<i class="icon-check m-auto text-primary"></i>
|
||||
</div>
|
||||
<h3>Easy to Use</h3>
|
||||
<p class="lead mb-0">Ready to use with your own content, or customize the source files!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Image Showcases -->
|
||||
<section class="showcase">
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row no-gutters">
|
||||
|
||||
<div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('img/bg-showcase-1.jpg');"></div>
|
||||
<div class="col-lg-6 order-lg-1 my-auto showcase-text">
|
||||
<h2>Fully Responsive Design</h2>
|
||||
<p class="lead mb-0">When you use a theme created by Start Bootstrap, you know that the theme will look great on any device, whether it's a phone, tablet, or desktop the page will behave responsively!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row no-gutters">
|
||||
<div class="col-lg-6 text-white showcase-img" style="background-image: url('img/bg-showcase-2.jpg');"></div>
|
||||
<div class="col-lg-6 my-auto showcase-text">
|
||||
<h2>Updated For Bootstrap 4</h2>
|
||||
<p class="lead mb-0">Newly improved, and full of great utility classes, Bootstrap 4 is leading the way in mobile responsive web development! All of the themes on Start Bootstrap are now using Bootstrap 4!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row no-gutters">
|
||||
<div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('img/bg-showcase-3.jpg');"></div>
|
||||
<div class="col-lg-6 order-lg-1 my-auto showcase-text">
|
||||
<h2>Easy to Use & Customize</h2>
|
||||
<p class="lead mb-0">Landing Page is just HTML and CSS with a splash of SCSS for users who demand some deeper customization options. Out of the box, just add your content and images, and your new landing page will be ready to go!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section class="testimonials text-center bg-light">
|
||||
<div class="container">
|
||||
<h2 class="mb-5">What people are saying...</h2>
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="testimonial-item mx-auto mb-5 mb-lg-0">
|
||||
<img class="img-fluid rounded-circle mb-3" src="img/testimonials-1.jpg" alt="">
|
||||
<h5>Margaret E.</h5>
|
||||
<p class="font-weight-light mb-0">"This is fantastic! Thanks so much guys!"</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="testimonial-item mx-auto mb-5 mb-lg-0">
|
||||
<img class="img-fluid rounded-circle mb-3" src="img/testimonials-2.jpg" alt="">
|
||||
<h5>Fred S.</h5>
|
||||
<p class="font-weight-light mb-0">"Bootstrap is amazing. I've been using it to create lots of super nice landing pages."</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4" data-vvveb-disabled="">
|
||||
<div class="testimonial-item mx-auto mb-5 mb-lg-0">
|
||||
<img class="img-fluid rounded-circle mb-3" src="img/testimonials-3.jpg" alt="">
|
||||
<h5>Sarah W.</h5>
|
||||
<p class="font-weight-light mb-0">"Thanks so much for making these free resources available to us!"</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<section class="call-to-action text-white text-center">
|
||||
<div class="overlay"></div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-9 mx-auto">
|
||||
<h2 class="mb-4">Ready to get started? Sign up now!</h2>
|
||||
</div>
|
||||
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="col-12 col-md-9 mb-2 mb-md-0">
|
||||
<input type="email" class="form-control form-control-lg" placeholder="Enter your email...">
|
||||
</div>
|
||||
<div class="col-12 col-md-3">
|
||||
<button type="submit" class="btn btn-block btn-lg btn-primary">Sign up!</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer bg-light">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
|
||||
<ul class="list-inline mb-2">
|
||||
<li class="list-inline-item">
|
||||
<a href="#">About</a>
|
||||
</li>
|
||||
<li class="list-inline-item">⋅</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#">Contact</a>
|
||||
</li>
|
||||
<li class="list-inline-item">⋅</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#">Terms of Use</a>
|
||||
</li>
|
||||
<li class="list-inline-item">⋅</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#">Privacy Policy</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="text-muted small mb-4 mb-lg-0">© Your Website 2018. All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item mr-3">
|
||||
<a href="#">
|
||||
<i class="fab fa-facebook fa-2x fa-fw"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item mr-3">
|
||||
<a href="#">
|
||||
<i class="fab fa-twitter-square fa-2x fa-fw"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#">
|
||||
<i class="fab fa-instagram fa-2x fa-fw"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script src="vendor/jquery/jquery.min.js"></script>
|
||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
const view = `<table class="main-body" style="box-sizing: border-box; min-height: 150px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width: 100%; height: 100%; background-color: rgb(234, 236, 237);" width="100%" height="100%" bgcolor="rgb(234, 236, 237)">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr class="row" style="box-sizing: border-box; vertical-align: top;" valign="top">
|
||||
<td class="main-body-cell" style="box-sizing: border-box;">
|
||||
<table class="container" style="box-sizing: border-box; font-family: Helvetica, serif; min-height: 150px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; height: 0px; width: 90%; max-width: 550px;" width="90%" height="0">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr style="box-sizing: border-box;">
|
||||
<td class="container-cell" style="box-sizing: border-box; vertical-align: top; font-size: medium; padding-bottom: 50px;" valign="top">
|
||||
<table class="table100 c1790" style="box-sizing: border-box; width: 100%; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; height: 0px; min-height: 30px; border-collapse: separate; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px;" width="100%" height="0">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr style="box-sizing: border-box;">
|
||||
<td id="c1793" class="top-cell" style="box-sizing: border-box; text-align: right; color: rgb(152, 156, 165);" align="right">
|
||||
<u id="c307" class="browser-link" style="box-sizing: border-box; font-size: 12px;">View in browser
|
||||
</u>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="c1766" style="box-sizing: border-box; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: 0px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width: 100%; min-height: 30px;" width="100%">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr style="box-sizing: border-box;">
|
||||
<td class="cell c1769" style="box-sizing: border-box; width: 11%;" width="11%">
|
||||
<img src="//artf.github.io/grapesjs/img/grapesjs-logo.png" alt="GrapesJS." class="c926" style="box-sizing: border-box; color: rgb(158, 83, 129); width: 100%; font-size: 50px;">
|
||||
</td>
|
||||
<td class="cell c1776" style="box-sizing: border-box; width: 70%; vertical-align: middle;" width="70%" valign="middle">
|
||||
<div class="c1144" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 17px; font-weight: 300;">GrapesJS Newsletter Builder
|
||||
<br style="box-sizing: border-box;">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="card" style="box-sizing: border-box; min-height: 150px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; margin-bottom: 20px; height: 0px;" height="0">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr style="box-sizing: border-box;">
|
||||
<td class="card-cell" style="box-sizing: border-box; background-color: rgb(255, 255, 255); overflow-x: hidden; overflow-y: hidden; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;" bgcolor="rgb(255, 255, 255)" align="center">
|
||||
<img src="//artf.github.io/grapesjs/img/tmp-header-txt.jpg" alt="Big image here" class="c1271" style="box-sizing: border-box; width: 100%; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; font-size: 50px; color: rgb(120, 197, 214); line-height: 250px; text-align: center;">
|
||||
<table class="table100 c1357" style="box-sizing: border-box; width: 100%; min-height: 150px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; height: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-collapse: collapse;" width="100%" height="0">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr style="box-sizing: border-box;">
|
||||
<td class="card-content" style="box-sizing: border-box; font-size: 13px; line-height: 20px; color: rgb(111, 119, 125); padding-top: 10px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; vertical-align: top;" valign="top">
|
||||
<h1 class="card-title" style="box-sizing: border-box; font-size: 25px; font-weight: 300; color: rgb(68, 68, 68);">Build your newsletters faster than ever
|
||||
<br style="box-sizing: border-box;">
|
||||
</h1>
|
||||
<p class="card-text" style="box-sizing: border-box;">Import, build, test and export responsive newsletter templates faster than ever using the GrapesJS Newsletter Builder.
|
||||
</p>
|
||||
<div id="i3mqog" style="box-sizing: border-box; padding: 10px;"> {{#each people}}
|
||||
<br style="box-sizing: border-box;">
|
||||
</div>
|
||||
<div id="izgz11" style="box-sizing: border-box; padding: 10px;"> {{this}}
|
||||
<br style="box-sizing: border-box;">
|
||||
</div>
|
||||
<a class="button" style="box-sizing: border-box; font-size: 12px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; background-color: rgb(217, 131, 166); color: rgb(255, 255, 255); text-align: center; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; font-weight: 300;">Button</a>
|
||||
<div id="ic5llo" style="box-sizing: border-box; padding: 10px;"> {{/each}}
|
||||
</div>
|
||||
<table class="c1542" style="box-sizing: border-box; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width: 100%;" width="100%">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr style="box-sizing: border-box;">
|
||||
<td id="c1545" class="card-footer" style="box-sizing: border-box; padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; text-align: center;" align="center">
|
||||
<a href="https://github.com/artf/grapesjs" class="button" style="box-sizing: border-box; font-size: 12px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; background-color: rgb(217, 131, 166); color: rgb(255, 255, 255); text-align: center; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; font-weight: 300;">Free and Open Source
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="list-item" style="box-sizing: border-box; height: auto; width: 100%; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;" width="100%">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr style="box-sizing: border-box;">
|
||||
<td class="list-item-cell" style="box-sizing: border-box; background-color: rgb(255, 255, 255); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; overflow-x: hidden; overflow-y: hidden; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;" bgcolor="rgb(255, 255, 255)">
|
||||
<table class="list-item-content" style="box-sizing: border-box; border-collapse: collapse; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; height: 150px; width: 100%;" width="100%" height="150">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr class="list-item-row" style="box-sizing: border-box;">
|
||||
<td class="list-cell-left" style="box-sizing: border-box; width: 30%; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;" width="30%">
|
||||
<img src="//artf.github.io/grapesjs/img/tmp-blocks.jpg" alt="Image1" class="list-item-image" style="box-sizing: border-box; color: rgb(217, 131, 166); font-size: 45px; width: 100%;">
|
||||
</td>
|
||||
<td class="list-cell-right" style="box-sizing: border-box; width: 70%; color: rgb(111, 119, 125); font-size: 13px; line-height: 20px; padding-top: 10px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px;" width="70%">
|
||||
<h1 class="card-title" style="box-sizing: border-box; font-size: 25px; font-weight: 300; color: rgb(68, 68, 68);">Built-in Blocks
|
||||
</h1>
|
||||
<p class="card-text" style="box-sizing: border-box;">Drag and drop built-in blocks from the right panel and style them in a matter of seconds
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="list-item" style="box-sizing: border-box; height: auto; width: 100%; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;" width="100%">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr style="box-sizing: border-box;">
|
||||
<td class="list-item-cell" style="box-sizing: border-box; background-color: rgb(255, 255, 255); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; overflow-x: hidden; overflow-y: hidden; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;" bgcolor="rgb(255, 255, 255)">
|
||||
<table class="list-item-content" style="box-sizing: border-box; border-collapse: collapse; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; height: 150px; width: 100%;" width="100%" height="150">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr class="list-item-row" style="box-sizing: border-box;">
|
||||
<td class="list-cell-left" style="box-sizing: border-box; width: 30%; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;" width="30%">
|
||||
<img src="//artf.github.io/grapesjs/img/tmp-tgl-images.jpg" alt="Image2" class="list-item-image" style="box-sizing: border-box; color: rgb(217, 131, 166); font-size: 45px; width: 100%;">
|
||||
</td>
|
||||
<td class="list-cell-right" style="box-sizing: border-box; width: 70%; color: rgb(111, 119, 125); font-size: 13px; line-height: 20px; padding-top: 10px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px;" width="70%">
|
||||
<h1 class="card-title" style="box-sizing: border-box; font-size: 25px; font-weight: 300; color: rgb(68, 68, 68);">Toggle images
|
||||
</h1>
|
||||
<p class="card-text" style="box-sizing: border-box;">Build a good looking newsletter even without images enabled by the email clients
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="grid-item-row" style="box-sizing: border-box; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; width: 100%;" width="100%">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr style="box-sizing: border-box;">
|
||||
<td class="grid-item-cell2-l" style="box-sizing: border-box; vertical-align: top; padding-right: 10px; width: 50%;" width="50%" valign="top">
|
||||
<table class="grid-item-card" style="box-sizing: border-box; width: 100%; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; margin-bottom: 10px;" width="100%">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr style="box-sizing: border-box;">
|
||||
<td class="grid-item-card-cell" style="box-sizing: border-box; background-color: rgb(255, 255, 255); overflow-x: hidden; overflow-y: hidden; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; text-align: center; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;" bgcolor="rgb(255, 255, 255)" align="center">
|
||||
<img src="//artf.github.io/grapesjs/img/tmp-send-test.jpg" alt="Image1" class="grid-item-image" style="box-sizing: border-box; line-height: 150px; font-size: 50px; color: rgb(120, 197, 214); margin-bottom: 15px; width: 100%;">
|
||||
<table class="grid-item-card-body" style="box-sizing: border-box;">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr style="box-sizing: border-box;">
|
||||
<td class="grid-item-card-content" style="box-sizing: border-box; font-size: 13px; color: rgb(111, 119, 125); padding-top: 0px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; width: 100%; line-height: 20px;" width="100%">
|
||||
<h1 class="card-title" style="box-sizing: border-box; font-size: 25px; font-weight: 300; color: rgb(68, 68, 68);">Test it
|
||||
</h1>
|
||||
<p class="card-text" style="box-sizing: border-box;">You can send email tests directly from the editor and check how are looking on your email clients
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td class="grid-item-cell2-r" style="box-sizing: border-box; vertical-align: top; padding-left: 10px; width: 50%;" width="50%" valign="top">
|
||||
<table class="grid-item-card" style="box-sizing: border-box; width: 100%; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; margin-bottom: 10px;" width="100%">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr style="box-sizing: border-box;">
|
||||
<td class="grid-item-card-cell" style="box-sizing: border-box; background-color: rgb(255, 255, 255); overflow-x: hidden; overflow-y: hidden; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; text-align: center; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;" bgcolor="rgb(255, 255, 255)" align="center">
|
||||
<img src="//artf.github.io/grapesjs/img/tmp-devices.jpg" alt="Image2" class="grid-item-image" style="box-sizing: border-box; line-height: 150px; font-size: 50px; color: rgb(120, 197, 214); margin-bottom: 15px; width: 100%;">
|
||||
<table class="grid-item-card-body" style="box-sizing: border-box;">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr style="box-sizing: border-box;">
|
||||
<td class="grid-item-card-content" style="box-sizing: border-box; font-size: 13px; color: rgb(111, 119, 125); padding-top: 0px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; width: 100%; line-height: 20px;" width="100%">
|
||||
<h1 class="card-title" style="box-sizing: border-box; font-size: 25px; font-weight: 300; color: rgb(68, 68, 68);">Responsive
|
||||
</h1>
|
||||
<p class="card-text" style="box-sizing: border-box;">Using the device manager you'll always send a fully responsive contents
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="footer" style="box-sizing: border-box; margin-top: 50px; color: rgb(152, 156, 165); text-align: center; font-size: 11px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;" align="center">
|
||||
<tbody style="box-sizing: border-box;">
|
||||
<tr style="box-sizing: border-box;">
|
||||
<td class="footer-cell" style="box-sizing: border-box;">
|
||||
<div class="c2577" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;">
|
||||
<p class="footer-info" style="box-sizing: border-box;">GrapesJS Newsletter Builder is a free and open source preset (plugin) used on top of the GrapesJS core library.
|
||||
For more information about and how to integrate it inside your applications check
|
||||
</p>
|
||||
<p style="box-sizing: border-box;">
|
||||
<a href="https://github.com/artf/grapesjs-preset-newsletter" class="link" style="box-sizing: border-box; color: rgb(217, 131, 166);">GrapesJS Newsletter Preset</a>
|
||||
<br style="box-sizing: border-box;">
|
||||
</p>
|
||||
</div>
|
||||
<div class="c2421" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;">
|
||||
MADE BY
|
||||
<a href="https://github.com/artf" class="link" style="box-sizing: border-box; color: rgb(217, 131, 166);">ARTUR ARSENIEV</a>
|
||||
<p style="box-sizing: border-box;">
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
|
||||
@@ -1,22 +1,5 @@
|
||||
import { all } from "redux-saga/effects";
|
||||
|
||||
// export function* onSendEmail() {
|
||||
// yield takeLatest(EmailActionTypes.SEND_EMAIL, sendEmail);
|
||||
// }
|
||||
// export function* sendEmail(payload) {
|
||||
// try {
|
||||
// console.log("Sending thta email", payload);
|
||||
// axios.post("/sendemail", payload).then(response => {
|
||||
// console.log(JSON.stringify(response));
|
||||
// put(sendEmailSuccess());
|
||||
// });
|
||||
// } catch (error) {
|
||||
// console.log("Error in sendEmail saga.");
|
||||
// yield put(sendEmailFailure(error.message));
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
export function* modalsSagas() {
|
||||
yield all([
|
||||
//call(onSendEmail),
|
||||
|
||||
925
client/yarn.lock
925
client/yarn.lock
File diff suppressed because it is too large
Load Diff
@@ -26,6 +26,7 @@
|
||||
"express-sslify": "^1.2.0",
|
||||
"firebase-tools": "^7.14.0",
|
||||
"graphql-request": "^1.8.2",
|
||||
"handlebars": "^4.7.6",
|
||||
"nodemailer": "^6.4.4",
|
||||
"phone": "^2.4.8",
|
||||
"source-map-explorer": "^2.3.1",
|
||||
|
||||
@@ -50,6 +50,9 @@ app.post(
|
||||
var downloadImages = require("./download-images");
|
||||
app.get("/downloadImages", downloadImages.downloadImages);
|
||||
|
||||
var renderHandlebars = require("./server/render/renderHandlebars");
|
||||
app.post("/render", renderHandlebars.render);
|
||||
|
||||
if (process.env.NODE_ENV === "production") {
|
||||
app.use(express.static(path.join(__dirname, "client/build")));
|
||||
|
||||
|
||||
9
server/render/renderHandlebars.js
Normal file
9
server/render/renderHandlebars.js
Normal file
@@ -0,0 +1,9 @@
|
||||
require("dotenv").config();
|
||||
const Handlebars = require("handlebars");
|
||||
|
||||
exports.render = (req, res) => {
|
||||
//Perform request validation
|
||||
console.log("Got a render request.");
|
||||
var template = Handlebars.compile(req.body.view);
|
||||
res.send(template(req.body.context));
|
||||
};
|
||||
44
yarn.lock
44
yarn.lock
@@ -876,6 +876,11 @@ commander@^4.0.1:
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-4.0.1.tgz#b67622721785993182e807f4883633e6401ba53c"
|
||||
integrity sha512-IPF4ouhCP+qdlcmCedhxX4xiGBPyigb8v5NeUp+0LyhwLgxMqyp3S0vl7TAPfS/hiP7FC3caI/PB9lTmP8r1NA==
|
||||
|
||||
commander@~2.20.3:
|
||||
version "2.20.3"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
|
||||
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
|
||||
|
||||
compare-semver@^1.0.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/compare-semver/-/compare-semver-1.1.0.tgz#7c0a79a27bb80b6c6994445f82958259d3d02153"
|
||||
@@ -2074,6 +2079,18 @@ gzip-size@^5.1.1:
|
||||
duplexer "^0.1.1"
|
||||
pify "^4.0.1"
|
||||
|
||||
handlebars@^4.7.6:
|
||||
version "4.7.6"
|
||||
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.6.tgz#d4c05c1baf90e9945f77aa68a7a219aa4a7df74e"
|
||||
integrity sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==
|
||||
dependencies:
|
||||
minimist "^1.2.5"
|
||||
neo-async "^2.6.0"
|
||||
source-map "^0.6.1"
|
||||
wordwrap "^1.0.0"
|
||||
optionalDependencies:
|
||||
uglify-js "^3.1.4"
|
||||
|
||||
har-schema@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
|
||||
@@ -2898,6 +2915,11 @@ minimist@^1.1.0, minimist@^1.2.0:
|
||||
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
|
||||
integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
|
||||
|
||||
minimist@^1.2.5:
|
||||
version "1.2.5"
|
||||
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
|
||||
integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
|
||||
|
||||
minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
|
||||
version "2.9.0"
|
||||
resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
|
||||
@@ -2976,6 +2998,11 @@ negotiator@0.6.2:
|
||||
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
|
||||
integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
|
||||
|
||||
neo-async@^2.6.0:
|
||||
version "2.6.1"
|
||||
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
|
||||
integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
|
||||
|
||||
next-tick@1, next-tick@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
|
||||
@@ -3811,6 +3838,11 @@ source-map-explorer@^2.3.1:
|
||||
temp "^0.9.1"
|
||||
yargs "^15.1.0"
|
||||
|
||||
source-map@^0.6.1:
|
||||
version "0.6.1"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
|
||||
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
|
||||
|
||||
source-map@^0.7.3:
|
||||
version "0.7.3"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
|
||||
@@ -4254,6 +4286,13 @@ type@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
|
||||
integrity sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==
|
||||
|
||||
uglify-js@^3.1.4:
|
||||
version "3.9.1"
|
||||
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.9.1.tgz#a56a71c8caa2d36b5556cc1fd57df01ae3491539"
|
||||
integrity sha512-JUPoL1jHsc9fOjVFHdQIhqEEJsQvfKDjlubcCilu8U26uZ73qOg8VsN8O1jbuei44ZPlwL7kmbAdM4tzaUvqnA==
|
||||
dependencies:
|
||||
commander "~2.20.3"
|
||||
|
||||
unique-string@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
|
||||
@@ -4463,6 +4502,11 @@ word-wrap@~1.2.3:
|
||||
resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
|
||||
integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
|
||||
|
||||
wordwrap@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
|
||||
integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
|
||||
|
||||
wrap-ansi@^5.1.0:
|
||||
version "5.1.0"
|
||||
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
|
||||
|
||||
Reference in New Issue
Block a user