diff --git a/example/index.html b/example/index.html index 314f52d..d41735e 100644 --- a/example/index.html +++ b/example/index.html @@ -115,6 +115,15 @@

Notification

+ +

NFT

+ diff --git a/example/index.ts b/example/index.ts index 4769ef8..45f062d 100644 --- a/example/index.ts +++ b/example/index.ts @@ -19,6 +19,7 @@ import { getNFTNotificationPurchaseTemplate, getNFTNotificationPurchaseMultipleTemplate, getBasicV2Template, + getNFTTwoContentWithMessageAndButtonTemplate, } from '../dist'; import { @@ -34,6 +35,7 @@ import { import { CreatorFollowConfirmationSampleData, CreatorFollowPublishNewSampleData, + NFTTwoContentWithMessageAndButtonTemplateSampleData, NFTNotificationPurchaseMultipleSampleData, NFTNotificationPurchaseSampleData, NFTNotificationTransferSampleData, @@ -185,6 +187,15 @@ handleRequest('/nft/notification/purchase-multiple', (req, res) => { res.send(subject.concat(body)); }); +handleRequest('/nft/2-content-with-message-n-button', (req, res) => { + const { body } = getNFTTwoContentWithMessageAndButtonTemplate({ + ...NFTTwoContentWithMessageAndButtonTemplateSampleData, + ...req.query, + ...req.body, + }); + res.send(body); +}); + app.get('/', (_, res) => { res.sendFile(path.join(__dirname, 'index.html')); }); diff --git a/package.json b/package.json index eec4579..eb79f2a 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "8.0.0-beta.4", + "version": "8.2.0-beta.0", "license": "GPL-3.0-or-later", "main": "dist/index.js", "typings": "dist/index.d.ts", @@ -71,7 +71,7 @@ "dependencies": { "@types/mjml-react": "^2.0.6", "canvas": "^2.8.0", - "mjml": "^4.13.0", + "mjml": "^4.15.3", "mjml-react": "^2.0.8", "react-intl": "^5.10.16" } diff --git a/src/components/footer.tsx b/src/components/footer.tsx index 5d887da..324928a 100644 --- a/src/components/footer.tsx +++ b/src/components/footer.tsx @@ -109,9 +109,11 @@ export const FooterSection = ({ - - - + {!!unsubscribeLink && ( + + + + )} diff --git a/src/constants/colors.ts b/src/constants/colors.ts index 28e1172..bcce068 100644 --- a/src/constants/colors.ts +++ b/src/constants/colors.ts @@ -9,5 +9,6 @@ export const GreyD8 = '#d8d8d8'; export const GreyEB = '#ebebeb'; export const GreyF7 = '#f7f7f7'; +export const White = '#ffffff'; export const Green = '#36de00'; export const Red = '#ff0000'; diff --git a/src/index.tsx b/src/index.tsx index 5afd630..33fbd81 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -61,6 +61,10 @@ import { NFTNotificationPurchaseMultipleTemplateProps, } from './templates/nft/notification/purchase-multiple'; import { BasicV2Template, BasicV2TemplateProps } from './templates/basic-v2'; +import { + NFTTwoContentWithMessageAndButtonTemplate, + NFTTwoContentWithMessageAndButtonTemplateProps, +} from './templates/nft/two-content-with-message-and-button'; export const getBasicTemplate = ( props: BasicTemplateProps, @@ -353,3 +357,17 @@ export const getNFTNotificationPurchaseMultipleTemplate = ( ); return { subject, body }; }; + +export const getNFTTwoContentWithMessageAndButtonTemplate = ( + props: NFTTwoContentWithMessageAndButtonTemplateProps, + options?: Mjml2HtmlOptions +) => { + const { html: body } = render( + , + { + minify: false, + ...options, + } + ); + return { body }; +}; diff --git a/src/templates/nft/two-content-with-message-and-button.tsx b/src/templates/nft/two-content-with-message-and-button.tsx new file mode 100644 index 0000000..27653e0 --- /dev/null +++ b/src/templates/nft/two-content-with-message-and-button.tsx @@ -0,0 +1,234 @@ +import * as React from 'react'; +import { + MjmlButton, + MjmlColumn, + MjmlDivider, + MjmlRaw, + MjmlText, +} from 'mjml-react'; + +import * as Colors from '../../constants/colors'; + +import { Avatar } from '../../components/avatar'; +import { FooterSection } from '../../components/footer'; +import { HeaderSection } from '../../components/header'; +import { TemplateBase } from '../../components/template-base'; +import { BasicSection } from '../../components/sections/basic'; + +interface NFTMessageBoxProps { + title?: string; + content?: string; + avatarSrc?: string; + style?: React.CSSProperties; +} + +const NFTMessageBox = (props: NFTMessageBoxProps) => ( + + + {!!(props.avatarSrc || props.title) && ( + + {!!props.avatarSrc && ( + + )} + {!!props.title && ( + + )} + + )} + + + +
+ + + {props.title} +
+ {props.content} +
+ +); + +export interface NFTContentWithMessageAndButtonSectionProps { + content?: string; + messageAvatarSrc?: string; + messageTitle?: string; + messageContent?: string; + buttonText?: string; + buttonHref?: string; + append?: string; +} + +export const NFTContentWithMessageAndButtonSection = ( + props: NFTContentWithMessageAndButtonSectionProps +) => { + return ( + + + {!!props.content && ( + +
+ + )} + + {!!(props.messageTitle || props.messageContent) && ( + + )} + + {!!props.buttonText && ( + + {props.buttonText} + + )} + + {!!props.append && ( + +
+ + )} + + + ); +}; + +export interface NFTTwoContentWithMessageAndButtonTemplateProps { + subject?: string; + title1?: string; + title2?: string; + content1?: string; + content2?: string; + messageAvatarSrc1?: string; + messageAvatarSrc2?: string; + messageTitle1?: string; + messageTitle2?: string; + messageContent1?: string; + messageContent2?: string; + buttonText1?: string; + buttonText2?: string; + buttonHref1?: string; + buttonHref2?: string; + append1?: string; + append2?: string; + unsubscribeLink?: string; +} + +export const NFTTwoContentWithMessageAndButtonTemplate = ( + props: NFTTwoContentWithMessageAndButtonTemplateProps +) => { + return ( + + + + + + + {props.title1} +
+ {props.title2} + + + + + + + + + + + + + + + + + ); +}; diff --git a/test/__snapshots__/basic.test.ts.snap b/test/__snapshots__/basic.test.ts.snap index 1ed6087..db41095 100644 --- a/test/__snapshots__/basic.test.ts.snap +++ b/test/__snapshots__/basic.test.ts.snap @@ -2,11 +2,9 @@ exports[`Render basic templates Default 1`] = ` " - + - - - + @@ -49,19 +47,20 @@ exports[`Render basic templates Default 1`] = ` .moz-text-html .mj-column-px-120 { width:120px !important; max-width: 120px; } - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - +