From 1d326847b79c145658f5fa08357496e6f9270a79 Mon Sep 17 00:00:00 2001 From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com> Date: Thu, 22 Jul 2021 23:07:04 +0200 Subject: [PATCH 1/3] build: upgrade dinero.js to v2 --- package.json | 2 +- yarn.lock | 31 +++++++++++++++++++++++++++---- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index dce593d9a..af8e5986f 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "axios": "0.21.1", "clsx": "1.1.1", "date-fns": "2.22.1", - "dinero.js": "1.8.1", + "dinero.js": "2.0.0-alpha.6", "formik": "2.2.9", "history": "4.10.1", "react": "17.0.2", diff --git a/yarn.lock b/yarn.lock index dd0ce1088..1b403810a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3715,6 +3715,25 @@ enabled "2.0.x" kuler "^2.0.0" +"@dinero.js/calculator-number@2.0.0-alpha.6": + version "2.0.0-alpha.6" + resolved "https://registry.yarnpkg.com/@dinero.js/calculator-number/-/calculator-number-2.0.0-alpha.6.tgz#9ed3d733a7914b283e41be05005d2d6512145032" + integrity sha512-+nTAemUcZMYvwYQ4s8xn3SlIQPJtz6UD97rs9BMAK4vXTihFIrxlDDiJIXwUgFsSJ/SfNLaVgYAEVNhCratO/w== + dependencies: + "@dinero.js/core" "2.0.0-alpha.6" + +"@dinero.js/core@2.0.0-alpha.6": + version "2.0.0-alpha.6" + resolved "https://registry.yarnpkg.com/@dinero.js/core/-/core-2.0.0-alpha.6.tgz#d8554033125a9bbc72a3ca98a68363c8b339d293" + integrity sha512-AJxNGi9a9+y1Ow2RR4KAGpWxhrrIgtHFkAQOVJOaWT2Js7TcAEWPgyubE4RBKSN0lgS2sMkeB8FfUbaO7Sphdw== + dependencies: + "@dinero.js/currencies" "2.0.0-alpha.6" + +"@dinero.js/currencies@2.0.0-alpha.6": + version "2.0.0-alpha.6" + resolved "https://registry.yarnpkg.com/@dinero.js/currencies/-/currencies-2.0.0-alpha.6.tgz#4dc9aea3b32e9eab8cc8bb3a0b3102e9ad876a89" + integrity sha512-MLvmLF7B82ntGT3y/qxWga7VTUi/bmfj0e8RxcpphkmzT2qBtmn0fabqf+bSkpLn5Xbnz2yOXo8LAJHul94XpA== + "@emotion/hash@^0.8.0": version "0.8.0" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" @@ -8732,10 +8751,14 @@ dijkstrajs@^1.0.1: resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.1.tgz#d3cd81221e3ea40742cfcde556d4e99e98ddc71b" integrity sha1-082BIh4+pAdCz83lVtTpnpjdxxs= -dinero.js@1.8.1: - version "1.8.1" - resolved "https://registry.yarnpkg.com/dinero.js/-/dinero.js-1.8.1.tgz#775a647629b4195af9d02f46e9b7fa1fd81e906d" - integrity sha512-AQ09MDKonkGUrhBZZFx4tPTVcVJuHJ0VEA73LvcBoBB2eQSi1DbapeXj4wnUUpx1hVnPdyev1xPNnNMGy/Au0g== +dinero.js@2.0.0-alpha.6: + version "2.0.0-alpha.6" + resolved "https://registry.yarnpkg.com/dinero.js/-/dinero.js-2.0.0-alpha.6.tgz#eb22e2e7a6e8d7796838b9ad60f0d5a23db1add4" + integrity sha512-rKU2w5AATj7SlPCIAErjuC5iGBW+dM/jes1Sl0loOWlBFIEUbBCcAvk9wLM1/Wg87YbktWdEd+sgTdPxLrA0NA== + dependencies: + "@dinero.js/calculator-number" "2.0.0-alpha.6" + "@dinero.js/core" "2.0.0-alpha.6" + "@dinero.js/currencies" "2.0.0-alpha.6" dir-glob@^3.0.1: version "3.0.1" From 9f5ef96bafd2cf5e125cfb81681ac3ce81350831 Mon Sep 17 00:00:00 2001 From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com> Date: Thu, 22 Jul 2021 23:09:51 +0200 Subject: [PATCH 2/3] build: install Dinero.js currencies --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index af8e5986f..f15509fc1 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "dependencies": { "@auth0/auth0-react": "1.5.0", "@aws-amplify/ui-react": "1.2.4", + "@dinero.js/currencies": "2.0.0-alpha.6", "@material-ui/core": "4.11.3", "@material-ui/icons": "4.11.2", "@material-ui/lab": "4.0.0-alpha.58", From 0c6c8d37412d4d660532205d70396a10349d5695 Mon Sep 17 00:00:00 2001 From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com> Date: Fri, 23 Jul 2021 00:10:59 +0200 Subject: [PATCH 3/3] refactor: migrate codebase to Dinero.js v2 --- cypress/tests/ui/new-transaction.spec.ts | 20 ++++---- cypress/tests/ui/transaction-feeds.spec.ts | 15 ++---- src/utils/transactionUtils.ts | 56 +++++++++++++++------- 3 files changed, 54 insertions(+), 37 deletions(-) diff --git a/cypress/tests/ui/new-transaction.spec.ts b/cypress/tests/ui/new-transaction.spec.ts index d7c07c039..9c9bfa0bd 100644 --- a/cypress/tests/ui/new-transaction.spec.ts +++ b/cypress/tests/ui/new-transaction.spec.ts @@ -1,4 +1,4 @@ -import Dinero from "dinero.js"; +import { dineroUSD, format } from "utils/transactionUtils"; import { User } from "../../../src/models"; import { isMobile } from "../../support/utils"; @@ -59,9 +59,9 @@ describe("New Transaction", function () { .should("be.visible") .and("have.text", "Transaction Submitted!"); - const updatedAccountBalance = Dinero({ - amount: ctx.user!.balance - parseInt(payment.amount) * 100, - }).toFormat(); + const updatedAccountBalance = format( + dineroUSD(ctx.user!.balance - parseInt(payment.amount) * 100) + ); if (isMobile()) { cy.getBySel("sidenav-toggle").click(); @@ -179,9 +179,9 @@ describe("New Transaction", function () { cy.switchUserByXstate(ctx.contact!.username); - const updatedAccountBalance = Dinero({ - amount: ctx.contact!.balance + transactionPayload.amount * 100, - }).toFormat(); + const updatedAccountBalance = format( + dineroUSD(ctx.contact!.balance + transactionPayload.amount * 100) + ); if (isMobile()) { cy.getBySel("sidenav-toggle").click(); @@ -230,9 +230,9 @@ describe("New Transaction", function () { cy.switchUserByXstate(ctx.user!.username); - const updatedAccountBalance = Dinero({ - amount: ctx.user!.balance + transactionPayload.amount * 100, - }).toFormat(); + const updatedAccountBalance = format( + dineroUSD(ctx.user!.balance + transactionPayload.amount * 100) + ); if (isMobile()) { cy.getBySel("sidenav-toggle").click(); diff --git a/cypress/tests/ui/transaction-feeds.spec.ts b/cypress/tests/ui/transaction-feeds.spec.ts index 090bce71c..eb43169db 100644 --- a/cypress/tests/ui/transaction-feeds.spec.ts +++ b/cypress/tests/ui/transaction-feeds.spec.ts @@ -1,4 +1,3 @@ -import Dinero from "dinero.js"; import { User, Transaction, @@ -8,7 +7,7 @@ import { TransactionStatus, } from "../../../src/models"; import { addDays, isWithinInterval, startOfDay } from "date-fns"; -import { startOfDayUTC, endOfDayUTC } from "../../../src/utils/transactionUtils"; +import { startOfDayUTC, endOfDayUTC, dineroUSD, format } from "../../../src/utils/transactionUtils"; import { isMobile } from "../../support/utils"; const { _ } = Cypress; @@ -112,9 +111,7 @@ describe("Transaction Feed", function () { cy.log("🚩Testing a paid payment transaction item"); cy.contains("[data-test*='transaction-item']", "paid").within(($el) => { const transaction = getTransactionFromEl($el); - const formattedAmount = Dinero({ - amount: transaction.amount, - }).toFormat(); + const formattedAmount = format(dineroUSD(transaction.amount)); expect([TransactionStatus.pending, TransactionStatus.complete]).to.include( transaction.status @@ -136,9 +133,7 @@ describe("Transaction Feed", function () { cy.log("🚩Testing a charged payment transaction item"); cy.contains("[data-test*='transaction-item']", "charged").within(($el) => { const transaction = getTransactionFromEl($el); - const formattedAmount = Dinero({ - amount: transaction.amount, - }).toFormat(); + const formattedAmount = format(dineroUSD(transaction.amount)); expect(TransactionStatus.complete).to.equal(transaction.status); @@ -152,9 +147,7 @@ describe("Transaction Feed", function () { cy.log("🚩Testing a requested payment transaction item"); cy.contains("[data-test*='transaction-item']", "requested").within(($el) => { const transaction = getTransactionFromEl($el); - const formattedAmount = Dinero({ - amount: transaction.amount, - }).toFormat(); + const formattedAmount = format(dineroUSD(transaction.amount)); expect([TransactionStatus.pending, TransactionStatus.complete]).to.include( transaction.status diff --git a/src/utils/transactionUtils.ts b/src/utils/transactionUtils.ts index 6bac9a9e1..54f6bca40 100644 --- a/src/utils/transactionUtils.ts +++ b/src/utils/transactionUtils.ts @@ -12,7 +12,8 @@ import { CommentNotification, } from "../models"; import faker from "faker"; -import Dinero from "dinero.js"; +import { dinero, add, subtract, toFormat, toSnapshot, isPositive, Dinero } from "dinero.js"; +import { USD } from "@dinero.js/currencies"; import { flow, get, @@ -30,6 +31,22 @@ import { drop, } from "lodash/fp"; +const currencySymbols = { + USD: "$", +}; + +type CurrencySymbolsIndices = keyof typeof currencySymbols; + +export const dineroUSD = (amount: number) => dinero({ amount, currency: USD }); + +export const format = (dineroObject: Dinero, fractionDigits?: number) => + toFormat(dineroObject, ({ amount, currency }) => { + const { scale } = toSnapshot(dineroObject); + const symbol = currencySymbols[currency.code as CurrencySymbolsIndices] || currency.code; + + return `${symbol}${amount.toFixed(fractionDigits ?? scale)}`; + }); + export const isRequestTransaction = (transaction: Transaction) => flow(get("requestStatus"), negate(isEmpty))(transaction); @@ -52,33 +69,40 @@ export const getFakeAmount = (min: number = 1000, max: number = 50000) => parseInt(faker.finance.amount(min, max), 10); /* istanbul ignore next */ -export const formatAmount = (amount: number) => Dinero({ amount }).toFormat(); +export const formatAmount = (amount: number) => format(dineroUSD(amount)); /* istanbul ignore next */ -export const formatAmountSlider = (amount: number) => Dinero({ amount }).toFormat("$0,0"); +export const formatAmountSlider = (amount: number) => format(dineroUSD(amount), 0); export const payAppDifference = curry((sender: User, transaction: Transaction) => - Dinero({ amount: get("balance", sender) }).subtract( - Dinero({ amount: get("amount", transaction) }) - ) + subtract(dineroUSD(get("balance", sender)), dineroUSD(get("amount", transaction))) ); export const payAppAddition = curry((sender: User, transaction: Transaction) => - Dinero({ amount: get("balance", sender) }).add(Dinero({ amount: get("amount", transaction) })) + add(dineroUSD(get("balance", sender)), dineroUSD(get("amount", transaction))) ); -export const getChargeAmount = (sender: User, transaction: Transaction) => - Math.abs(payAppDifference(sender, transaction).getAmount()); +export const getChargeAmount = (sender: User, transaction: Transaction) => { + const { amount } = toSnapshot(payAppDifference(sender, transaction)); -export const getTransferAmount = curry((sender: User, transaction: Transaction) => - Math.abs(payAppDifference(sender, transaction).getAmount()) -); + return Math.abs(amount); +}; + +export const getTransferAmount = curry((sender: User, transaction: Transaction) => { + const { amount } = toSnapshot(payAppDifference(sender, transaction)); + + return Math.abs(amount); +}); -export const getPayAppCreditedAmount = (receiver: User, transaction: Transaction) => - Math.abs(payAppAddition(receiver, transaction).getAmount()); +export const getPayAppCreditedAmount = (receiver: User, transaction: Transaction) => { + const { amount } = toSnapshot(payAppAddition(receiver, transaction)); -export const hasSufficientFunds = (sender: User, transaction: Transaction) => - payAppDifference(sender, transaction).isPositive(); + return Math.abs(amount); +}; + +export const hasSufficientFunds = (sender: User, transaction: Transaction) => { + return isPositive(payAppDifference(sender, transaction)); +}; /* istanbul ignore next */ export const receiverIsCurrentUser = (currentUser: User, transaction: Transaction) =>