search

wix-incubator / mjml-react

React component library to generate the HTML emails on the fly
MIT License
993 stars 50 forks source link

Not able to work with Layout component #38

Closed SharadKumar closed 4 years ago

SharadKumar commented 4 years ago

Hi Team After few hrs of effort, I am giving up on this cause I can't figure! :)

Please help if you know why I am not able to work with Layout custom component. These are simple functions being used in nextjs (server side node).

My template:

import React from 'react'
import { Mjml, MjmlRaw, MjmlColumn, MjmlSection, MjmlText } from 'mjml-react'
import Layout from './components/layout'

function Template({ name }) {
  return (
    <Mjml>
      <MjmlSection>
        <MjmlColumn>
          <MjmlText align="center">
            Header in template, doesn't render
          </MjmlText>
        </MjmlColumn>
      </MjmlSection>
      <MjmlRaw>Raw in template, doesn't render either</MjmlRaw>
      <Layout>
        <MjmlSection>
          <MjmlColumn>
            <MjmlText align="center">
              This header inside layout, does render!
            </MjmlText>
          </MjmlColumn>
        </MjmlSection>
        <MjmlRaw>This raw inside layout also does render</MjmlRaw>
        <MjmlSection>
          <MjmlColumn>
            <MjmlText align="center">Hi {name} Welcome to our app! Yes of course this renders too</MjmlText>
          </MjmlColumn>
        </MjmlSection>
      </Layout>
    </Mjml>
  )
}

Template.getSubject = async () => {
  return 'Welcome to our app...'
}

Template.getTo = async ({ name, email }) => {
  return `${name} <${email}>`
}

export default Template

Layout is below... notice while props.children does render, the other components in Layout do not render!

import React from 'react'
import {
  MjmlBody,
  MjmlSection,
  MjmlColumn,
  MjmlText,
  MjmlRaw,
} from 'mjml-react'

function Layout(props) {
  return (
    <>
      <MjmlSection>
        <MjmlColumn>
          <MjmlText align="center">Header inside layout</MjmlText>
        </MjmlColumn>
      </MjmlSection>
      <MjmlRaw>Raw heading</MjmlRaw>
      <MjmlBody>{props.children}</MjmlBody>
      <MjmlSection>
        <MjmlColumn>
          <MjmlText align="center">Footer</MjmlText>
        </MjmlColumn>
      </MjmlSection>
    </>
  )
}

export default Layout

Files:

├── account-signed-up.jsx
└── components
    └── layout.jsx

Rendered mail:

...
Content-Type: multipart/alternative;
From: XXX
Subject: Welcome to our app...
...
MIME-Version: 1.0

----_NmP-e2eee9c3714fbb70-Part_1
Content-Type: text/plain; charset=us-ascii
Content-Transfer-Encoding: 7bit

Header inside layout, on template Raw heading, on template, inside layoutHi
McGrath Welcome to my app!
----_NmP-e2eee9c3714fbb70-Part_1
Content-Type: text/html; charset=us-ascii
Content-Transfer-Encoding: quoted-printable

<!doctype html><html xmlns=3D"http://www.w3.org/1999/xhtml" xmlns:v=3D"urn:=
schemas-microsoft-com:vml" xmlns:o=3D"urn:schemas-microsoft-com:office:offi=
ce"><head>
<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Dus-ascii"=
><title></title><!--[if !mso]><!-- --><meta http-equiv=3D"X-UA-Compatible" =
content=3D"IE=3Dedge"><!--<![endif]--><meta name=3D"viewport" content=3D"wi=
dth=3Ddevice-width,initial-scale=3D1"><style type=3D"text/css">#outlook a {=
 padding:0; }
          body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-=
size-adjust:100%; }
          table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-tab=
le-rspace:0pt; }
          img { border:0;height:auto;line-height:100%; outline:none;text-de=
coration:none;-ms-interpolation-mode:bicubic; }
          p { display:block;margin:13px 0; }</style><!--[if mso]>
        <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
        <![endif]--><!--[if lte mso 11]>
        <style type=3D"text/css">
          .mj-outlook-group-fix { width:100% !important; }
        </style>
        <![endif]--><!--[if !mso]><!--><link href=3D"https://fonts.googleap=
is.com/css?family=3DUbuntu:300,400,500,700" rel=3D"stylesheet" type=3D"text=
/css"><style type=3D"text/css">@import url(https://fonts.googleapis.com/css=
?family=3DUbuntu:300,400,500,700);</style><!--<![endif]--><style type=3D"te=
xt/css">@media only screen and (min-width:480px) {
        .mj-column-per-100 { width:100% !important; max-width: 100%; }
      }</style><style type=3D"text/css"></style></head><body><div><!--[if m=
so | IE]><table align=3D"center" border=3D"0" cellpadding=3D"0" cellspacing=
=3D"0" class=3D"" style=3D"width:600px;" width=3D"600" ><tr><td style=3D"li=
ne-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div=
 style=3D"margin:0px auto;max-width:600px;"><table align=3D"center" border=
=3D"0" cellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" style=3D"w=
idth:100%;"><tbody><tr><td style=3D"direction:ltr;font-size:0px;padding:20p=
x 0;text-align:center;"><!--[if mso | IE]><table role=3D"presentation" bord=
er=3D"0" cellpadding=3D"0" cellspacing=3D"0"><tr><td class=3D"" style=3D"ve=
rtical-align:top;width:600px;" ><![endif]--><div class=3D"mj-column-per-100=
 mj-outlook-group-fix" style=3D"font-size:0px;text-align:left;direction:ltr=
;display:inline-block;vertical-align:top;width:100%;"><table border=3D"0" c=
ellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" style=3D"vertical-=
align:top;" width=3D"100%"><tr><td align=3D"center" style=3D"font-size:0px;=
padding:10px 25px;word-break:break-word;"><div style=3D"font-family:Ubuntu,=
 Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:cente=
r;color:#000000;">Header inside layout, on template</div></td></tr></table>=
</div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></t=
able></div><!--[if mso | IE]></td></tr></table><![endif]--> Raw heading, on=
 template, inside layout<!--[if mso | IE]><table align=3D"center" border=3D=
"0" cellpadding=3D"0" cellspacing=3D"0" class=3D"" style=3D"width:600px;" w=
idth=3D"600" ><tr><td style=3D"line-height:0px;font-size:0px;mso-line-heigh=
t-rule:exactly;"><![endif]--><div style=3D"margin:0px auto;max-width:600px;=
"><table align=3D"center" border=3D"0" cellpadding=3D"0" cellspacing=3D"0" =
role=3D"presentation" style=3D"width:100%;"><tbody><tr><td style=3D"directi=
on:ltr;font-size:0px;padding:20px 0;text-align:center;"><!--[if mso | IE]><=
table role=3D"presentation" border=3D"0" cellpadding=3D"0" cellspacing=3D"0=
"><tr><td class=3D"" style=3D"vertical-align:top;width:600px;" ><![endif]--=
><div class=3D"mj-column-per-100 mj-outlook-group-fix" style=3D"font-size:0=
px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;wi=
dth:100%;"><table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" role=3D"=
presentation" style=3D"vertical-align:top;" width=3D"100%"><tr><td align=3D=
"center" style=3D"font-size:0px;padding:10px 25px;word-break:break-word;"><=
div style=3D"font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13p=
x;line-height:1;text-align:center;color:#000000;">Hi McGrath Welcome to my =
app!</div></td></tr></table></div><!--[if mso | IE]></td></tr></table><![en=
dif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table>=
<![endif]--></div><img src=3D"http://url791.auctionomy.app/wf/open?upn=3DeJ=
ytQtnrX6oMjWyMcWotS-2BqccebOxrBRzcVgCPCh36uJrShgbeVmy-2B-2F0j0L6zN5OvfP3MKQ=
xw23W0OVFSt7chK7RUitzbI5ULmieuZ-2F6WQzaMOIKk7UNFSAAnyrrNlKKRolHUZmeh76Yhe41=
gfYG7tlr6HeE4-2B3BTUK11rxIxnkUwb6Y91Ie9FvowbEIyCSRu67PXXoLbwhmSFgX5yYf3vecJ=
5nOWDiceR5HZY-2BXJHw-3D" alt=3D"" width=3D"1" height=3D"1" border=3D"0" sty=
le=3D"height:1px !important;width:1px !important;border-width:0 !important;=
margin-top:0 !important;margin-bottom:0 !important;margin-right:0 !importan=
t;margin-left:0 !important;padding-top:0 !important;padding-bottom:0 !impor=
tant;padding-right:0 !important;padding-left:0 !important;"></body></html>=

----_NmP-e2eee9c3714fbb70-Part_1--

And before the email is transported, I debug and see the following outcome from the component:

{
  html: '<!doctype html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><title></title><!--[if !mso]><!-- --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]--><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style type="text/css">#outlook a { padding:0; }\n' +
    '          body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }\n' +
    '          table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }\n' +
    '          img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }\n' +
    '          p { display:block;margin:13px 0; }</style><!--[if mso]>\n' +
    '        <xml>\n' +
    '        <o:OfficeDocumentSettings>\n' +
    '          <o:AllowPNG/>\n' +
    '          <o:PixelsPerInch>96</o:PixelsPerInch>\n' +
    '        </o:OfficeDocumentSettings>\n' +
    '        </xml>\n' +
    '        <![endif]--><!--[if lte mso 11]>\n' +
    '        <style type="text/css">\n' +
    '          .mj-outlook-group-fix { width:100% !important; }\n' +
    '        </style>\n' +
    '        <![endif]--><!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css"><style type="text/css">@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);</style><!--<![endif]--><style type="text/css">@media only screen and (min-width:480px) {\n' +
    '        .mj-column-per-100 { width:100% !important; max-width: 100%; }\n' +
    '      }</style><style type="text/css"></style></head><body><div><!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div style="margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]--><div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"><tr><td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">Header inside layout, on template</div></td></tr></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--> Raw heading, on template, inside layout<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div style="margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]--><div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"><tr><td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">Hi McGrath Welcome to my app!</div></td></tr></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></div></body></html>',
    subject: 'Welcome to our app...',
      text: 'Header inside layout, on template Raw heading, on template, inside layoutHi\n' +
        'McGrath Welcome to my app!',
}

Notably, see the text outcome... 

    const { render } = require('mjml-react')
   const htmlToText = require('html-to-text')
   ...
    const { html } = render(Template(props)) // Template is the above template with props passed
    const text = htmlToText.fromString(html)
SharadKumar commented 4 years ago

Damn... I have to put all components inside MjmlBody... closing now!