-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add example implementation of salutation placeholders in demo
- Loading branch information
1 parent
7489620
commit a3e586a
Showing
6 changed files
with
101 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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="newsletter.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="newsletter.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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
export const HIDE_IN_OUTLOOK_START_IF = "__IF_NOT_OUTLOOK__"; | ||
export const HIDE_IN_OUTLOOK_END_IF = "__END_IF__"; | ||
|
||
// Helper for hiding elements from Outlook/Windows Mail | ||
// Replaces placeholder with conditional statement to tell the client to ignore the contained content if it's not Outlook/Windows Mail | ||
// MJML escapes special characters, so this function replaces the placeholder after MJML generates html | ||
export const getPreparedHtml = (html: string) => { | ||
return html | ||
.replace(new RegExp(HIDE_IN_OUTLOOK_START_IF, "g"), "<!--[if !mso]><!-- -->") | ||
.replace(new RegExp(HIDE_IN_OUTLOOK_END_IF, "g"), "<!--<![endif]-->"); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters