Go-To Actions with transactions emails (#5728)

* feat: go-to actions for emails

* fix: comment

* fix: tsc without previewText

* fix: goToAction

* fix: link to original template

* fix: final comments

server/emails/templates/components/EmailLayout.tsx

@@ -2,15 +2,72 @@ import { Table, TBody, TR, TD } from "oy-vey";
 import * as React from "react";
 import theme from "@shared/styles/theme";
 
-const EmailLayout: React.FC = ({ children }) => (
-  <Table width="550">
-    <TBody>
-      <TR>
-        <TD align="left">{children}</TD>
-      </TR>
-    </TBody>
-  </Table>
-);
+const EmailLayout: React.FC<{
+  bgcolor?: string;
+  previewText: string;
+  goToAction?: { url: string; name: string };
+}> = ({ previewText, bgcolor = "#FFFFFF", goToAction, children }) => {
+  let markup;
+  if (goToAction) {
+    markup = JSON.stringify({
+      "@context": "http://schema.org",
+      "@type": "EmailMessage",
+      potentialAction: {
+        "@type": "ViewAction",
+        url: goToAction.url,
+        name: goToAction.name,
+      },
+    });
+  }
+  return (
+    <>
+      {markup ? (
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: markup }}
+        />
+      ) : null}
+      <Table
+        bgcolor={bgcolor}
+        id="__bodyTable__"
+        width="100%"
+        style={{
+          WebkitFontSmoothing: "antialiased",
+          width: "100% !important",
+          background: `${bgcolor}`,
+          WebkitTextSizeAdjust: "none",
+          margin: 0,
+          padding: 0,
+          minWidth: "100%",
+        }}
+      >
+        <TR>
+          <TD align="center">
+            <span
+              style={{
+                display: "none !important",
+                color: `${bgcolor}`,
+                margin: 0,
+                padding: 0,
+                fontSize: "1px",
+                lineHeight: "1px",
+              }}
+            >
+              {previewText}
+            </span>
+            <Table width="550">
+              <TBody>
+                <TR>
+                  <TD align="left">{children}</TD>
+                </TR>
+              </TBody>
+            </Table>
+          </TD>
+        </TR>
+      </Table>
+    </>
+  );
+};
 
 export default EmailLayout;