🩹 Fix JOY values in emails and footer (#241)

* Fix JOY values in emails

* Fix email footer

* Test `formatJOY` function

* Use `Number.toFixed` to rewrite `formatJOY`

* Fix demo emails

.github/workflows/tests.yml

@@ -62,6 +62,8 @@ jobs:
         run: make prepare
       - name: Run tests
         run: npm run tests:notifications
+      - name: Run utils tests
+        run: npm run tests:notifications-utils
   mail-scheduler:
     name: Mail scheduler tests
     needs: [migrations]

package.json

@@ -26,6 +26,7 @@
     "tests:mail-scheduler": "./src/mail-scheduler/tests/run-tests.sh",
     "tests:migrations": "./src/tests/migrations/run.sh",
     "tests:notifications": "./src/tests/integration/run.sh",
+    "tests:notifications-utils": "ts-mocha src/utils/notification/testing/*.test.ts",
     "offchain-state:export": "node ./lib/scripts/export.js",
     "get-public-key": "node ./lib/scripts/getPublicKey.js"
   },

scripts/generate-emails.js

@@ -9,7 +9,7 @@ const { compile } = require('handlebars')
 const ghRaw = 'https://raw.githubusercontent.com/Joystream'
 const emailAssets = 'https://eu-central-1.linodeobjects.com/atlas-assets/email'
 const gleevLogos = `${emailAssets}/logos/gleev`
-const gleevRoot = 'https://atlas-git-notifications-joystream.vercel.app'
+const gleevRoot = 'https://gleev.xyz'
 const contexts = {
   gleev: {
     title: 'Hi alice,',
@@ -42,7 +42,7 @@ const contexts = {
       app: {
         name: 'Studio',
         logo: `${gleevLogos}/header-studio.png`,
-        notificationPage: `${gleevRoot}/studio/notifications/channel`,
+        notificationLink: `${gleevRoot}/studio/notifications/channel`,
         unsubscribeLink: `${gleevRoot}/studio/channel?tab=Notifications`,
       },
     })

src/auth-server/emails/templates/mjml/notification.html.mst.mjml

@@ -115,7 +115,7 @@
     </mj-wrapper>
 
     <!-- Footer -->
-    <mj-section padding="0">
+    <mj-section padding="0" background-color="#DAE2EB" full-width="full-width">
       <mj-column background-color="#DAE2EB">
         <mj-image
           src="{{ app.logoAlt }}"
@@ -127,8 +127,8 @@
       </mj-column>
     </mj-section>
 
-    <mj-section padding="0">
-      <mj-group background-color="#DAE2EB">
+    <mj-section padding="0" background-color="#DAE2EB" full-width="full-width">
+      <mj-group>
         <mj-column>
           <mj-button
             mj-class="link footer-link"
@@ -147,7 +147,7 @@
       </mj-group>
     </mj-section>
 
-    <mj-section padding="0 0 24px">
+    <mj-section padding="0 0 24px" background-color="#DAE2EB" full-width="full-width">
       <mj-column background-color="#DAE2EB" padding="16px 16px 24px">
         <mj-text color="#343D44" align="center" padding="0">
           You can

src/utils/notification/notificationsData.ts

@@ -255,20 +255,30 @@ export const getNotificationData = async (
 }
 
 const JOY_DECIMAL = 10
-const formatJOY = (hapiAmount: bigint): string => {
+export const formatJOY = (hapiAmount: bigint | number): string => {
   const [intPart, decPart] = splitInt(String(hapiAmount), JOY_DECIMAL)
-  const formatedIntPart = chunkFromEnd(intPart, 3).join(' ')
-  const roundedDec = Math.round(Number(splitInt(decPart, 2).join('.')))
-  const _decPart = formatedIntPart === '0' && roundedDec === 0 ? Number(decPart) : roundedDec
-  const joyAmount = _decPart ? `${formatedIntPart}.${_decPart}` : formatedIntPart
 
-  return `${joyAmount} $JOY`
+  const formatedIntPart = chunkFromEnd(intPart, 3).join(' ') || '0'
+
+  const fractionDigits = (decPart.match(/[1-9]/)?.index ?? -1) + 1
+  const roundedDecPart =
+    fractionDigits === 0
+      ? ''
+      : !intPart && fractionDigits > 2
+      ? roundDecPart(decPart, fractionDigits).replace(/\.?0+$/, '')
+      : roundDecPart(decPart, 2).replace(/^\.00/, '')
+
+  return `${formatedIntPart}${roundedDecPart} $JOY`
 }
-const splitInt = (numStr: string, decimal: number) => {
-  return [numStr.slice(0, -decimal) ?? '0', numStr.slice(-decimal).padStart(decimal)]
+const splitInt = (numStr: string, decimalSize: number): [string, string] => {
+  const intPart = numStr.slice(0, -decimalSize) ?? ''
+  const decPart = numStr.slice(-decimalSize).padStart(decimalSize, '0') || '0'
+  return [intPart, decPart]
 }
 const chunkFromEnd = (str: string, interval: number): string[] =>
   Array.from({ length: Math.floor((str.length - 1) / interval) }).reduce(
     ([head, ...tail]: string[]) => [head.slice(0, -interval), head.slice(-interval), ...tail],
     [str]
   )
+const roundDecPart = (decPart: string, fractionDigits: number): string =>
+  Number(`.${decPart}`).toFixed(fractionDigits).slice(1)

src/utils/notification/testing/formatJOY.test.ts

@@ -0,0 +1,32 @@
+import { expect } from 'chai'
+import { formatJOY } from '../notificationsData'
+
+describe('formatJOY', () => {
+  it('Parse HAPI amounts into JOY values', () => {
+    expect(formatJOY(0)).to.equal('0 $JOY')
+    expect(formatJOY(1)).to.equal('0.0000000001 $JOY')
+    expect(formatJOY(9)).to.equal('0.0000000009 $JOY')
+    expect(formatJOY(10)).to.equal('0.000000001 $JOY')
+    expect(formatJOY(94)).to.equal('0.000000009 $JOY')
+    expect(formatJOY(95)).to.equal('0.00000001 $JOY')
+    expect(formatJOY(100000000)).to.equal('0.01 $JOY')
+    expect(formatJOY(1000000000)).to.equal('0.10 $JOY')
+
+    expect(formatJOY(1_0000000000)).to.equal('1 $JOY')
+    expect(formatJOY(1_0100000000)).to.equal('1.01 $JOY')
+    expect(formatJOY(1_1000000000)).to.equal('1.10 $JOY')
+    expect(formatJOY(1_0000000001)).to.equal('1 $JOY')
+    expect(formatJOY(1_0040000000)).to.equal('1 $JOY')
+    expect(formatJOY(1_0050000000)).to.equal('1.01 $JOY')
+    expect(formatJOY(1_0900000000)).to.equal('1.09 $JOY')
+    expect(formatJOY(1_0912000000)).to.equal('1.09 $JOY')
+    expect(formatJOY(1_0950000000)).to.equal('1.10 $JOY')
+    expect(formatJOY(1_0250000000)).to.equal('1.03 $JOY')
+
+    expect(formatJOY(1_000_0000000000)).to.equal('1 000 $JOY')
+    expect(formatJOY(1_000_0000000001)).to.equal('1 000 $JOY')
+    expect(formatJOY(1_000_1000000000)).to.equal('1 000.10 $JOY')
+    expect(formatJOY(100_000_0000000000)).to.equal('100 000 $JOY')
+    expect(formatJOY(1_000_000_0000000000n)).to.equal('1 000 000 $JOY')
+  })
+})