✨ Add transaction remarks

likecoin · Mar 22, 2021 · 051d242 · 051d242
1 parent b0d4098
commit 051d242
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 17 deletions.
diff --git a/src/i18n/translations/cn.json b/src/i18n/translations/cn.json
@@ -4,11 +4,11 @@
 
   "cta.likecoin-button": "在文章中点击 LikeCoin button，可分配创作基金，额外奖励作者。",
 
+  "greeting": "你好 {name}：",
+
   "help.center.text": "帮助中心",
   "help.center.url": "https://docs.like.co/v/zh",
 
-  "greeting": "你好 {name}：",
-
   "report.monthly.date": "{year}年{month}月",
 
   "report.monthly.civic-liker.subject": "赞赏公民每月报告 ({date})",
@@ -45,16 +45,18 @@
   "referral-tx.description.referrer": "<span>user</span> 已因你的推荐下载了 Liker Land。<br></br>你们两位各获得 {amount} LikeCoin 奖赏。",
   "referral-tx.check-wallet": "奖金已转帐至你的钱包，请用 <a>Liker Land app</a> 查看。",
 
-  "unsubscribe.text": "取消订阅",
-
   "reset-password.subject": "更改密码操作说明",
   "reset-password.subtitle": "更改密码操作说明",
   "reset-password.content": "{name} 您好, <br></br><br></br> 请按以下按键开始更改您的密码",
   "reset-password.cta": "更改密码",
   "reset-password.text": "你没有要求修改密码吗? <br></br>  别人可能不小心把Email地址打错成你的地址。 <br></br> 请忽略此邮件，你的密码将维持不变。",
 
+  "resend": "重发",
+
   "transaction.subject": "你已收到 {amount} LikeCoin",
   "transaction.subtitle": "你已收到 {amount} LikeCoin",
   "transaction.content": "{name} 你好, <br></br><br></br> 你已收到 {fromUser} 發送的 {amount} LikeCoin。 <br></br> 查阅交易详情：",
-  "resend": "重发"
+  "transaction.remarks": "备註： {remarks}",
+
+  "unsubscribe.text": "取消订阅"
 }
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
@@ -4,13 +4,13 @@
 
   "cta.likecoin-button": "Click the LikeCoin button in any articles, distribute Creators Fund to reward the creators.",
 
-  "help.center.text": "Help Center",
-  "help.center.url": "https://docs.like.co",
-
   "date.month": "Month",
 
   "greeting": "Dear {name}",
 
+  "help.center.text": "Help Center",
+  "help.center.url": "https://docs.like.co",
+
   "report.monthly.date": "{month} {year}",
 
   "report.monthly.civic-liker.subject": "Civic Liker Monthly Report ({date})",
@@ -47,16 +47,18 @@
   "referral-tx.description.referrer": "<span>user</span> has installed Liker Land app because of you.<br></br>You both received {amount} LikeCoin as rewards.",
   "referral-tx.check-wallet": "The rewards had been transferred to your wallet, you may open the <a>Liker Land app</a> and check.",
 
-  "unsubscribe.text": "Unsubscribe",
-
   "reset-password.subject": "Reset Password Instruction",
   "reset-password.subtitle": "Reset Password Instruction",
   "reset-password.content": "Hi {name}, <br></br><br></br> You can continue reset password through this button ",
   "reset-password.cta": "Reset password",
   "reset-password.text": "Didn’t request this email? <br></br>  Your address may have been entered by mistake. <br></br> Simply ignore this email and nothing further will happen.",
 
+  "resend": "Resend",
+
   "transaction.subject": "You have received {amount} LikeCoin",
   "transaction.subtitle": "You have received {amount} LikeCoin",
   "transaction.content": "Hi {name}, <br></br><br></br> You have received {amount} LikeCoin from {fromUser}. <br></br> Check the transaction details: ",
-  "resend": "Resend"
+  "transaction.remarks": "Remarks： {remarks}",
+
+  "unsubscribe.text": "Unsubscribe"
 }
diff --git a/src/i18n/translations/zh.json b/src/i18n/translations/zh.json
@@ -4,11 +4,11 @@
 
   "cta.likecoin-button": "在文章中點擊 LikeCoin button，可分配創作基金，額外奬勵作者。",
 
+  "greeting": "你好 {name}：",
+
   "help.center.text": "幫助中心",
   "help.center.url": "https://docs.like.co/v/zh",
 
-  "greeting": "你好 {name}：",
-
   "report.monthly.date": "{year}年{month}月",
 
   "report.monthly.civic-liker.subject": "讚賞公民每月報告 ({date})",
@@ -45,16 +45,18 @@
   "referral-tx.description.referrer": "<span>user</span> 已因你的推薦下載了 Liker Land。<br></br>你們兩位各獲得 {amount} LikeCoin 奬賞。",
   "referral-tx.check-wallet": "奬金已轉帳至你的錢包，請用 <a>Liker Land app</a> 查看。",
 
-  "unsubscribe.text": "取消訂閱",
-
   "reset-password.subject": "更改密碼操作說明",
   "reset-password.subtitle": "更改密碼操作說明",
   "reset-password.content": "{name} 您好, <br></br><br></br> 請按以下按鍵開始更改您的密碼",
   "reset-password.cta": "更改密碼",
   "reset-password.text": "您沒有要求修改密碼嗎? <br></br>  別人可能不小心把Email打錯成您的Email。 <br></br> 請忽略此郵件，您的密碼將維持不變。",
+
+  "resend": "重發",
 
   "transaction.subject": "您已收到 {amount} LikeCoin",
   "transaction.subtitle": "您已收到 {amount} LikeCoin",
   "transaction.content": "{name} 您好, <br></br><br></br> 您已收到 {fromUser} 發送的 {amount} LikeCoin。 <br></br> 查閱交易詳情： ",
-  "resend": "重發"
+  "transaction.remarks": "備註： {remarks}",
+
+  "unsubscribe.text": "取消訂閱"
 }
diff --git a/src/templates/transaction.tsx b/src/templates/transaction.tsx
@@ -19,6 +19,7 @@ export interface TransactionTemplateProps {
   viewTxURL?: string;
   amount: string;
   isResend?: boolean;
+  remarks?: string;
 }
 
 export const TransactionTemplate = ({
@@ -28,6 +29,7 @@ export const TransactionTemplate = ({
   fromDisplayName,
   viewTxURL,
   amount,
+  remarks,
 }: TransactionTemplateProps) => {
   return (
     <TemplateBase language={language} isExtruded={true} subject={subject}>
@@ -112,6 +114,23 @@ export const TransactionTemplate = ({
           </MjmlText>
         </MjmlColumn>
       </BasicSection>
+      <BasicSection
+        paddingTop={32}
+        paddingLeft={40}
+        paddingRight={40}
+        paddingBottom={0}
+      >
+        <MjmlColumn>
+          <MjmlText fontSize={18}>
+            <FormattedMessage
+              id="transaction.remarks"
+              values={{
+                remarks: remarks,
+              }}
+            />
+          </MjmlText>
+        </MjmlColumn>
+      </BasicSection>
       <AppCTASection />
       <FooterSection />
     </TemplateBase>

diff --git a/test/__snapshots__/transaction.test.ts.snap b/test/__snapshots__/transaction.test.ts.snap
@@ -650,6 +650,95 @@ exports[`Render new transaction templates Default 1`] = `
         <v:textbox style=\\"mso-fit-shape-to-text:true\\" inset=\\"0,0,0,0\\">
       <![endif]-->
           
+      <div  style=\\"background:white url(http://localhost:3000/static/templates/basic/bg.jpg) center top / 616px repeat;background-position:center top;background-repeat:repeat;background-size:616px;margin:0px auto;max-width:616px;\\">
+        <div  style=\\"line-height:0;font-size:0;\\">
+        <table
+           align=\\"center\\" background=\\"http://localhost:3000/static/templates/basic/bg.jpg\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" style=\\"background:white url(http://localhost:3000/static/templates/basic/bg.jpg) center top / 616px repeat;background-position:center top;background-repeat:repeat;background-size:616px;width:100%;\\"
+        >
+          <tbody>
+            <tr>
+              <td
+                 style=\\"direction:ltr;font-size:0px;padding:0px;padding-bottom:0px;padding-left:40px;padding-right:40px;padding-top:32px;text-align:center;\\"
+              >
+                <!--[if mso | IE]>
+                  <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\">
+                
+        <tr>
+      
+            <td
+               class=\\"\\" style=\\"vertical-align:top;width:536px;\\"
+            >
+          <![endif]-->
+            
+      <div
+         class=\\"mj-column-per-100 mj-outlook-group-fix\\" style=\\"font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;\\"
+      >
+        
+      <table
+         border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" width=\\"100%\\"
+      >
+        <tbody>
+          <tr>
+            <td  style=\\"vertical-align:top;padding:0px;\\">
+              
+      <table
+         border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" style=\\"\\" width=\\"100%\\"
+      >
+        
+            <tr>
+              <td
+                 align=\\"left\\" style=\\"font-size:0px;padding:0px;word-break:break-word;\\"
+              >
+                
+      <div
+         style=\\"font-family:Arial;font-size:18px;line-height:1.5;text-align:left;color:#4a4a4a;\\"
+      >Remarks： likecoin remark</div>
+    
+              </td>
+            </tr>
+          
+      </table>
+    
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    
+      </div>
+    
+          <!--[if mso | IE]>
+            </td>
+          
+        </tr>
+      
+                  </table>
+                <![endif]-->
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        </div>
+      </div>
+    
+        <!--[if mso | IE]>
+        </v:textbox>
+      </v:rect>
+    
+          </td>
+        </tr>
+      </table>
+      
+      <table
+         align=\\"center\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"\\" style=\\"width:616px;\\" width=\\"616\\"
+      >
+        <tr>
+          <td style=\\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\\">
+      
+        <v:rect  style=\\"width:616px;\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" fill=\\"true\\" stroke=\\"false\\">
+        <v:fill  origin=\\"0.5, 0\\" position=\\"0.5, 0\\" src=\\"http://localhost:3000/static/templates/basic/bg.jpg\\" color=\\"white\\" type=\\"tile\\" size=\\"616px\\" aspect=\\"atmost\\" />
+        <v:textbox style=\\"mso-fit-shape-to-text:true\\" inset=\\"0,0,0,0\\">
+      <![endif]-->
+          
       <div  style=\\"background:white url(http://localhost:3000/static/templates/basic/bg.jpg) center top / 616px repeat;background-position:center top;background-repeat:repeat;background-size:616px;margin:0px auto;max-width:616px;\\">
         <div  style=\\"line-height:0;font-size:0;\\">
         <table

diff --git a/test/stub/samples.ts b/test/stub/samples.ts
@@ -5,3 +5,4 @@ export const SAMPLE_RICH_TEXT = '<p>Lorem <b>Ipsum</b></p>';
 export const SAMPLE_TEXT = 'Lorem Ipsum';
 export const SAMPLE_TIMESTAMP = 1609459860000;
 export const SAMPLE_URL = 'https://example.com';
+export const SAMPLE_REMARK = 'likecoin remark';
diff --git a/test/transaction.test.ts b/test/transaction.test.ts
@@ -1,6 +1,10 @@
 import { getTransactionTemplate } from '../src';
 
-import { SAMPLE_URL, SAMPLE_LIKER_DISPLAY_NAME } from './stub/samples';
+import {
+  SAMPLE_URL,
+  SAMPLE_LIKER_DISPLAY_NAME,
+  SAMPLE_REMARK,
+} from './stub/samples';
 
 describe('Render new transaction templates', () => {
   it('Default', () => {
@@ -11,6 +15,7 @@ describe('Render new transaction templates', () => {
         fromDisplayName: SAMPLE_LIKER_DISPLAY_NAME,
         viewTxURL: SAMPLE_URL,
         amount: '100',
+        remarks: SAMPLE_REMARK,
       },
       { minify: false }
     );