fix(generateemail): fix generateEmail

fix generateEmail replace method for styles and HTML body Signed-off-by: Niloy Sikdar <[email protected]>
leopardslab · Jun 28, 2022 · 15f2f35 · 15f2f35
1 parent e54fff7
commit 15f2f35
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/utils/generateEmail/defaultHTML.ts b/src/utils/generateEmail/defaultHTML.ts
@@ -1 +1 @@
-export const deafultHTML = `<!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> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <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; } 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-table-rspace: 0pt; } img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } p { display: block; margin: 13px 0; } </style> <style type="text/css"> @media only screen and (min-width: 480px) { .column-per-100 { width: 100% !important; max-width: 100%; } } </style> <style media="screen and (min-width:480px)"> .moz-text-html .column-per-100 { width: 100% !important; max-width: 100%; } </style> <style type="text/css"> @media only screen and (max-width: 480px) { table.full-width-mobile { width: 100% !important; } td.full-width-mobile { width: auto !important; } } </style> </head> <body></body> </html>`;
+export const deafultHTML = `<!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> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <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; } 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-table-rspace: 0pt; } img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } p { display: block; margin: 13px 0; } EMAIL_BASE_STYLES </style> <style type="text/css"> @media only screen and (min-width: 480px) { .column-per-100 { width: 100% !important; max-width: 100%; } } </style> <style media="screen and (min-width:480px)"> .moz-text-html .column-per-100 { width: 100% !important; max-width: 100%; } </style> <style type="text/css"> @media only screen and (max-width: 480px) { table.full-width-mobile { width: 100% !important; } td.full-width-mobile { width: auto !important; } } </style> </head> <body> EMAIL_BODY_CONTENT </body> </html>`;
diff --git a/src/utils/generateEmail/generateEmail.ts b/src/utils/generateEmail/generateEmail.ts
@@ -5,12 +5,17 @@ import { deafultHTML } from './defaultHTML';
 interface GenerateEmailOptions {
   baseTemplate?: string;
   baseStyles?: string;
+  baseStylesReplacementString?: string;
+  baseBodyReplacementString?: string;
 }
 
 export const generateEmail = (
   jsxElement: React.ReactElement,
   options?: GenerateEmailOptions,
 ): string => {
+  const baseStylesReplacementString = options?.baseStylesReplacementString || 'EMAIL_BASE_STYLES';
+  const baseBodyReplacementString = options?.baseBodyReplacementString || 'EMAIL_BODY_CONTENT';
+
   const baseHTML: string = options?.baseTemplate
     ? fs.readFileSync(options.baseTemplate, 'utf8').toString()
     : deafultHTML;
@@ -21,11 +26,8 @@ export const generateEmail = (
 
   const JSXtoHTML = ReactDOMServer.renderToStaticMarkup(jsxElement);
 
-  const styleEndPos = baseHTML.indexOf('</style>');
-  const styledHTML = baseHTML.slice(0, styleEndPos) + '\n' + baseCSS + baseHTML.slice(styleEndPos);
-
-  const bodyEndPos = styledHTML.indexOf('</body>');
-  const finalHTML = styledHTML.slice(0, bodyEndPos) + JSXtoHTML + styledHTML.slice(bodyEndPos);
+  const styledHTML = baseHTML.replace(baseStylesReplacementString, baseCSS);
+  const finalHTML = styledHTML.replace(baseBodyReplacementString, JSXtoHTML);
 
   return finalHTML;
 };