✨ Add template for purchase multiple items (#37)

* ✨ Add template for purchase multiple items * 🔖 Bump version to 8.0.0-beta.0 * 💄 Adjust NFT widget style * 🔖 Bump version to 8.0.0-beta.1 * 💬 Update copywriting * 💄 Update items list * 🔖 Bump version to 8.0.0-beta.2 * ✏️ Fix WNFT CTA typo * 🩹 Fix Liker ID & display name swapped * 💄 Add WNFT CTA button form * 🍱 Use PNFT image for NFT image placeholder * 🔖 Bump version to 8.0.0-beta.3 * 🍱 Update WNFT CTA banner * 🔖 Bump version to 8.0.0-beta.4
likecoin · Jul 17, 2023 · 9db2b3e · 9db2b3e
1 parent b149442
commit 9db2b3e
Show file tree

Hide file tree

Showing 17 changed files with 439 additions and 21 deletions.
diff --git a/example/index.html b/example/index.html
@@ -100,6 +100,11 @@ <h2>Notification</h2>
           NFT Purchase Notification
         </a>
       </li>
+      <li>
+        <a href="/nft/notification/purchase-multiple">
+          NFT Batch Purchase Notification
+        </a>
+      </li>
     </ul>
 
   </body>

diff --git a/example/index.ts b/example/index.ts
@@ -17,6 +17,7 @@ import {
   getCreatorFollowPublishNewTemplate,
   getNFTNotificationTransferTemplate,
   getNFTNotificationPurchaseTemplate,
+  getNFTNotificationPurchaseMultipleTemplate,
 } from '../dist';
 
 import {
@@ -32,6 +33,7 @@ import {
 import {
   CreatorFollowConfirmationSampleData,
   CreatorFollowPublishNewSampleData,
+  NFTNotificationPurchaseMultipleSampleData,
   NFTNotificationPurchaseSampleData,
   NFTNotificationTransferSampleData,
 } from './data/nft';
@@ -168,6 +170,15 @@ handleRequest('/nft/notification/purchase', (req, res) => {
   res.send(subject.concat(body));
 });
 
+handleRequest('/nft/notification/purchase-multiple', (req, res) => {
+  const { subject, body } = getNFTNotificationPurchaseMultipleTemplate({
+    ...NFTNotificationPurchaseMultipleSampleData,
+    ...req.query,
+    ...req.body,
+  });
+  res.send(subject.concat(body));
+});
+
 app.get('/', (_, res) => {
   res.sendFile(path.join(__dirname, 'index.html'));
 });

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "7.1.0",
+  "version": "8.0.0-beta.4",
   "license": "GPL-3.0-or-later",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

diff --git a/src/assets/banners/cta-turn-story-into-collectible.jpg b/src/assets/banners/cta-turn-story-into-collectible.jpg
diff --git a/src/assets/icons/coin-insert.png b/src/assets/icons/coin-insert.png
diff --git a/src/components/cta-writing-nft.tsx b/src/components/cta-writing-nft.tsx
@@ -1,15 +1,50 @@
 import * as React from 'react';
+import { MjmlButton, MjmlColumn, MjmlImage, MjmlText } from 'mjml-react';
+import { FormattedMessage, useIntl } from 'react-intl';
 
-import { MjmlColumn, MjmlImage, MjmlText } from 'mjml-react';
+import { LIKER_LAND_ROOT } from '../constants';
+import * as Colors from '../constants/colors';
 
 import { getAssetPath, wrapUtm } from '../utils/url';
 
 import { BasicSection, BasicSectionProps } from './sections/basic';
-import { FormattedMessage, useIntl } from 'react-intl';
 
-export const WritingNFTCTASection = (props: BasicSectionProps) => {
+export interface WritingNFTCTASectionProps extends BasicSectionProps {
+  isButton?: boolean;
+  likerID?: string;
+}
+
+export const WritingNFTCTASection = ({
+  isButton = false,
+  likerID,
+  ...props
+}: WritingNFTCTASectionProps) => {
   const intl = useIntl();
-  const bannerSrc = getAssetPath(`/banners/cta-writing-nft.jpg`);
+  const url = wrapUtm(
+    likerID ? `${LIKER_LAND_ROOT}/${likerID}` : `${LIKER_LAND_ROOT}/writing-nft`
+  );
+  if (isButton) {
+    return (
+      <BasicSection paddingLeft={16} paddingRight={16} {...props}>
+        <MjmlColumn>
+          <MjmlButton
+            color={Colors.LikeGreen}
+            fontWeight={600}
+            backgroundColor={Colors.LighterCyan}
+            borderRadius={14}
+            href={url}
+            rel="noopener noreferrer"
+          >
+            <FormattedMessage id="cta.writing-nft.title" />
+          </MjmlButton>
+        </MjmlColumn>
+      </BasicSection>
+    );
+  }
+
+  const bannerSrc = getAssetPath(
+    `/banners/cta-turn-story-into-collectible.jpg`
+  );
   return (
     <BasicSection paddingLeft={16} paddingRight={16} {...props}>
       <MjmlColumn>
@@ -23,7 +58,7 @@ export const WritingNFTCTASection = (props: BasicSectionProps) => {
         </MjmlText>
         <MjmlImage
           src={bannerSrc}
-          href={wrapUtm('https://liker.land/campaign/writing-nft')}
+          href={url}
           alt={intl.formatMessage({ id: 'cta.writing-nft.title' })}
           width={400}
           borderRadius={24}

diff --git a/src/components/nft-widget.tsx b/src/components/nft-widget.tsx
@@ -3,26 +3,37 @@ import { MjmlRaw } from 'mjml-react';
 
 import * as Colors from '../constants/colors';
 
+import { getAssetPath } from '../utils/url';
+
 import { Link } from './link';
 
 export interface NFTWidgetProps {
   title?: string;
   coverImageSrc?: string;
   url?: string;
+  priceLabel?: string;
+  style?: React.CSSProperties;
 }
 
-export const NFTWidget = ({ title, coverImageSrc, url }: NFTWidgetProps) => {
+export const NFTWidget = ({
+  title,
+  coverImageSrc,
+  url,
+  priceLabel,
+  style,
+}: NFTWidgetProps) => {
   return (
     <MjmlRaw>
       <table
         style={{
           width: '100%',
           borderRadius: 14,
           backgroundColor: '#ffffff',
-          border: `2px solid ${Colors.GreyD8}`,
+          border: `2px solid ${Colors.GreyEB}`,
           display: 'block',
           fontSize: 16,
           lineHeight: 1.5,
+          ...style,
         }}
       >
         <tr>
@@ -69,6 +80,32 @@ export const NFTWidget = ({ title, coverImageSrc, url }: NFTWidgetProps) => {
                   </Link>
                 </td>
               </tr>
+              {!!priceLabel && (
+                <tr>
+                  <td
+                    style={{
+                      paddingTop: 12,
+                      color: Colors.LikeGreen,
+                      fontSize: 14,
+                      fontFamily: 'Arial',
+                      fontWeight: 600,
+                      textAlign: 'right',
+                    }}
+                  >
+                    <img
+                      width={14}
+                      height={14}
+                      src={getAssetPath('/icons/coin-insert.png')}
+                      style={{
+                        verticalAlign: 'middle',
+                        marginRight: 8,
+                        marginBottom: 3,
+                      }}
+                    />
+                    <span>{priceLabel}</span>
+                  </td>
+                </tr>
+              )}
             </table>
           </td>
         </tr>

diff --git a/src/constants/colors.ts b/src/constants/colors.ts
@@ -6,6 +6,7 @@ export const PaleCyan = '#D7ECEC';
 export const Grey4A = '#4a4a4a';
 export const Grey9B = '#9b9b9b';
 export const GreyD8 = '#d8d8d8';
+export const GreyEB = '#ebebeb';
 export const GreyF7 = '#f7f7f7';
 
 export const Green = '#36de00';

diff --git a/src/i18n/translations/cn.json b/src/i18n/translations/cn.json
@@ -2,13 +2,16 @@
   "cta.likecoin-button": "在文章中点击 LikeCoin button，可分配创作基金，额外奖励作者。",
   "cta.sponsor-link.banner.alt": "复制及分享你的赞助链结",
   "cta.sponsor-link.hint": "用这条链结建立你的粉丝团。<a>详情</a>",
-  "cta.writing-nft.title": "立即收集 Wrting NFT",
+  "cta.writing-nft.title": "立即收藏以表支持",
   "download": "下载:",
   "greeting": "你好 {name}：",
   "header.manage-delegation": "管理委託",
   "help.center.text": "帮助中心",
   "help.center.url": "https://docs.like.co/v/zh",
   "nft_notification_purchase_content": "<buyer>BUYER</buyer> 以 <price>LikeCoin</price> 购入了你的作品 <nft>NFT_TITLE</nft>。",
+  "nft_notification_purchase_multiple_content": "恭喜！<buyer>BUYER</buyer> 以 <price>LIKE</price> 购入了以下的作品：",
+  "nft_notification_purchase_multiple_subject": "你以 {price} LIKE 卖出了 {count} 份作品",
+  "nft_notification_purchase_multiple_title": "你以 {price} LIKE 卖出了 {count} 份作品",
   "nft_notification_purchase_subject": "你以 {price} LikeCoin 卖出了 {nftTitle}",
   "nft_notification_purchase_title": "你以 {price} LikeCoin 卖出了 {nftTitle}",
   "nft_notification_transfer_content": "<sender>SENDER</sender> 已赠你一份作品 <nft>NFT_TITLE</nft>。",

diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
@@ -2,13 +2,16 @@
   "cta.likecoin-button": "Click the LikeCoin button in any articles, distribute Creators Fund to reward the creators.",
   "cta.sponsor-link.banner.alt": "Copy and share your sponsor link",
   "cta.sponsor-link.hint": "Build your fans group by this link. <a>Learn more</a>",
-  "cta.writing-nft.title": "Collect Writing NFT Now",
+  "cta.writing-nft.title": "Collect to support now",
   "download": "Download:",
   "greeting": "Dear {name}",
   "header.manage-delegation": "Manage delegation",
   "help.center.text": "Help Center",
   "help.center.url": "https://docs.like.co",
   "nft_notification_purchase_content": "<buyer>BUYER</buyer> has bought <nft>NFT_TITLE</nft> for <price>LikeCoin</price>.",
+  "nft_notification_purchase_multiple_content": "Congratulation! <buyer>BUYER</buyer> has collected your following works for <price>LIKE</price>:",
+  "nft_notification_purchase_multiple_subject": "You have sold {count} items for {price} LIKE",
+  "nft_notification_purchase_multiple_title": "You have sold {count} items for {price} LIKE",
   "nft_notification_purchase_subject": "You have sold {nftTitle} for {price} LikeCoin",
   "nft_notification_purchase_title": "You have sold {nftTitle} for {price} LikeCoin",
   "nft_notification_transfer_content": "<sender>SENDER</sender> has sent you a piece of creative work <nft>NFT_TITLE</nft>.",

diff --git a/src/i18n/translations/zh.json b/src/i18n/translations/zh.json
@@ -2,13 +2,16 @@
   "cta.likecoin-button": "在文章中點擊 LikeCoin button，可分配創作基金，額外奬勵作者。",
   "cta.sponsor-link.banner.alt": "複製及分享你的贊助鏈結",
   "cta.sponsor-link.hint": "用這條鏈結建立你的粉絲團。<a>詳情</a>",
-  "cta.writing-nft.title": "立即收集 Wrting NFT",
+  "cta.writing-nft.title": "立即收藏以表支持",
   "download": "下載:",
   "greeting": "你好 {name}：",
   "header.manage-delegation": "管理委託",
   "help.center.text": "幫助中心",
   "help.center.url": "https://docs.like.co/v/zh",
   "nft_notification_purchase_content": "<buyer>BUYER</buyer> 以 <price>LikeCoin</price> 購入了你的作品 <nft>NFT_TITLE</nft>。",
+  "nft_notification_purchase_multiple_content": "恭喜！<buyer>BUYER</buyer> 以 <price>LIKE</price> 購入了以下的作品：",
+  "nft_notification_purchase_multiple_subject": "你以 {price} LIKE 賣出了 {count} 份作品",
+  "nft_notification_purchase_multiple_title": "你以 {price} LIKE 賣出了 {count} 份作品",
   "nft_notification_purchase_subject": "你以 {price} LikeCoin 賣出了 {nftTitle}",
   "nft_notification_purchase_title": "你以 {price} LikeCoin 賣出了 {nftTitle}",
   "nft_notification_transfer_content": "<sender>SENDER</sender> 已贈你一份作品 <nft>NFT_TITLE</nft>。",

diff --git a/src/index.tsx b/src/index.tsx
@@ -56,6 +56,10 @@ import {
   NFTNotificationPurchaseTemplate,
   NFTNotificationPurchaseTemplateProps,
 } from './templates/nft/notification/purchase';
+import {
+  NFTNotificationPurchaseMultipleTemplate,
+  NFTNotificationPurchaseMultipleTemplateProps,
+} from './templates/nft/notification/purchase-multiple';
 
 export const getBasicTemplate = (
   props: BasicTemplateProps,
@@ -312,3 +316,27 @@ export const getNFTNotificationPurchaseTemplate = (
   );
   return { subject, body };
 };
+
+export const getNFTNotificationPurchaseMultipleTemplate = (
+  props: NFTNotificationPurchaseMultipleTemplateProps,
+  options?: Mjml2HtmlOptions
+) => {
+  const intl = initIntl();
+  const {
+    subject = intl.formatMessage(
+      { id: 'nft_notification_purchase_multiple_subject' },
+      {
+        price: formatNumber(props.totalPriceInLIKE),
+        count: props.purchasedItems.length,
+      }
+    ),
+  } = props;
+  const { html: body } = render(
+    <NFTNotificationPurchaseMultipleTemplate {...props} />,
+    {
+      minify: false,
+      ...options,
+    }
+  );
+  return { subject, body };
+};
diff --git a/src/templates/nft/creator-follow/confirmation.tsx b/src/templates/nft/creator-follow/confirmation.tsx
@@ -87,7 +87,11 @@ export const CreatorFollowConfirmationTemplate = ({
           </MjmlText>
         </MjmlColumn>
       </BasicSection>
-      <WritingNFTCTASection />
+      <WritingNFTCTASection
+        isButton={true}
+        paddingBottom={64}
+        likerID={creatorLikerId}
+      />
       <FooterSection unsubscribeLink={unsubscribeLink} />
     </TemplateBase>
   );

diff --git a/src/templates/nft/default.tsx b/src/templates/nft/default.tsx
@@ -52,8 +52,8 @@ export const NFTDefaultTemplate = ({
           {!message && (
             <Avatar
               src={headerAvatarSrc}
-              likerID={headerAvatarDisplayName}
-              displayName={headerAvatarLikerID}
+              likerID={headerAvatarLikerID}
+              displayName={headerAvatarDisplayName}
               isCivicLiker={headerAvatarIsCivicLiker}
               size={44}
               display="inline-block"
@@ -87,8 +87,8 @@ export const NFTDefaultTemplate = ({
           <MjmlColumn padding={16} backgroundColor="white" borderRadius={24}>
             <Avatar
               src={headerAvatarSrc}
-              likerID={headerAvatarDisplayName}
-              displayName={headerAvatarLikerID}
+              likerID={headerAvatarLikerID}
+              displayName={headerAvatarDisplayName}
               isCivicLiker={headerAvatarIsCivicLiker}
               size={44}
               style={{ marginTop: -48 }}
@@ -100,15 +100,19 @@ export const NFTDefaultTemplate = ({
         </BasicSection>
       )}
       <BasicSection paddingTop={32} paddingBottom={32}>
-        <MjmlColumn>
+        <MjmlColumn width={320}>
           <NFTWidget
             title={nftTitle}
             coverImageSrc={nftCoverImageSrc}
             url={nftURL}
           />
         </MjmlColumn>
       </BasicSection>
-      <WritingNFTCTASection />
+      <WritingNFTCTASection
+        likerID={headerAvatarLikerID}
+        isButton={true}
+        paddingBottom={64}
+      />
       <FooterSection unsubscribeLink={unsubscribeLink} />
     </TemplateBase>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -100,6 +100,11 @@ <h2>Notification</h2> @@
               NFT Purchase Notification
             </a>
           </li>
+          <li>
+            <a href="/nft/notification/purchase-multiple">
+              NFT Batch Purchase Notification
+            </a>
+          </li>
         </ul>
       </body>
@@ Expand Down @@