add example implementation of salutation placeholders in demo (#247)

Co-authored-by: Denise Buder <d.buder@sbg.at>

demo/admin/src/common/blocks/RichTextBlock.tsx

@@ -1,8 +1,49 @@
+import { CopyToClipboardButton } from "@comet/admin";
 import { createRichTextBlock } from "@comet/cms-admin";
+import { Box, FormLabel, List, ListItem, ListItemText, Paper } from "@mui/material";
+import React from "react";
+import { FormattedMessage } from "react-intl";
 
 import { LinkBlock } from "./LinkBlock";
 
-export const RichTextBlock = createRichTextBlock({
-    link: LinkBlock,
-    rte: { supports: ["bold", "italic", "header-one", "header-two", "header-three", "header-four", "header-five", "header-six"] },
-});
+const placeholders = [
+    {
+        placeholder: "{{SALUTATION}}",
+        helper: <FormattedMessage id="cometBrevoModule.richText.placeholder.salutation" defaultMessage="Dear Mr./Ms. LASTNAME" />,
+    },
+];
+
+export function createNewsletterRichTextBlock(): ReturnType<typeof createRichTextBlock> {
+    const RichTextBlock = createRichTextBlock({
+        link: LinkBlock,
+        rte: { supports: ["bold", "italic", "header-one", "header-two", "header-three", "header-four", "header-five", "header-six"] },
+    });
+
+    return {
+        ...RichTextBlock,
+        AdminComponent: (rteAdminComponentProps) => (
+            <>
+                <Box mb={2}>
+                    <RichTextBlock.AdminComponent {...rteAdminComponentProps} />
+                </Box>
+                <FormLabel>
+                    <FormattedMessage id="cometBrevoModule.richText.placeholder.info" defaultMessage="Placeholders available in the text" />
+                </FormLabel>
+                <Paper variant="outlined">
+                    <List>
+                        {placeholders.map(({ placeholder, helper }) => {
+                            const placeholderText = <Box sx={{ fontFamily: "monospace", fontWeight: "bold" }}>{placeholder}</Box>;
+                            return (
+                                <ListItem key={placeholder} secondaryAction={<CopyToClipboardButton copyText={placeholder} />}>
+                                    <ListItemText primary={placeholderText} secondary={helper} />
+                                </ListItem>
+                            );
+                        })}
+                    </List>
+                </Paper>
+            </>
+        ),
+    };
+}
+
+export const RichTextBlock = createNewsletterRichTextBlock();

demo/campaign/src/components/RenderedMail.tsx

@@ -1,6 +1,7 @@
 import { renderToMjml } from "@luma-team/mjml-react";
 import { EmailCampaignContentBlockData } from "@src/blocks.generated";
 import { ContentBlock } from "@src/blocks/ContentBlock";
+import { replaceMailHtmlPlaceholders } from "@src/util/replaceMailHtmlPlaceholders";
 import * as React from "react";
 import { IntlConfig, IntlProvider } from "react-intl";
 
@@ -35,8 +36,7 @@ export const RenderedMail: React.FC<Props> = ({ mjmlContent }) => {
         // eslint-disable-next-line @typescript-eslint/no-var-requires
         const mjml2htmlBrowser = require("mjml-browser");
         const { html: mjmlHtml, errors } = mjml2htmlBrowser(mjmlContent);
-
-        const html = mjmlHtml;
+        const html = replaceMailHtmlPlaceholders(mjmlHtml, "preview");
 
         if (errors.length) {
             // eslint-disable-next-line no-console

demo/campaign/src/util/replaceMailHtmlPlaceholders.tsx

@@ -0,0 +1,34 @@
+type Placeholder = {
+    preview: string;
+    mail: string;
+};
+
+const getPreviewHtml = (previewText: string) => {
+    return `<code style="background-color: rgba(41, 182, 246, 0.1); outline: 1px solid rgb(41, 182, 246)">${previewText}</code>`;
+};
+
+export const replaceMailHtmlPlaceholders = (html: string, type: "mail" | "preview") => {
+    let newHtml = html;
+    const placeholders: Record<string, Placeholder> = {
+        "{{SALUTATION}}": {
+            mail: [
+                '{% if ( contact.LASTNAME ) and (contact.SALUTATION == "MALE" ) %}',
+                `Dear Mr. {{contact.LASTNAME}} `,
+                '{% elif ( contact.LASTNAME ) and ( contact.SALUTATION == "FEMALE" ) %}',
+                `Dear Ms. {{contact.LASTNAME}}`,
+                "{% elif ( contact.LASTNAME )%}",
+                `Dear Mr./Ms. {{contact.LASTNAME}}`,
+                "{% else %}",
+                "Dear Ladies and Gentlemen",
+                "{% endif %}",
+            ].join(""),
+
+            preview: getPreviewHtml("Dear Ladies and Gentlemen "),
+        },
+    };
+    for (const placeholder in placeholders) {
+        newHtml = newHtml.replace(new RegExp(placeholder, "g"), placeholders[placeholder][type]);
+    }
+
+    return newHtml;
+};