Add support for Euros

bundles/admin/donationProcessing/processDonations.tsx

@@ -10,6 +10,7 @@ import useSafeDispatch from '@public/api/useDispatch';
 import { useCachedCallback } from '@public/hooks/useCachedCallback';
 import { useFetchDonors } from '@public/hooks/useFetchDonors';
 import Spinner from '@public/spinner';
+import * as CurrencyUtils from '@public/util/currency';
 
 import styles from './donations.mod.css';
 
@@ -156,7 +157,9 @@ export default React.memo(function ProcessDonations() {
                     {canEditDonors ? <a href={`${ADMIN_ROOT}donor/${donation.donor}`}>{donorLabel}</a> : donorLabel}
                   </td>
                   <td>
-                    <a href={`${ADMIN_ROOT}donation/${donation.pk}`}>${(+donation.amount).toFixed(2)}</a>
+                    <a href={`${ADMIN_ROOT}donation/${donation.pk}`}>
+                      {CurrencyUtils.asCurrency(donation.amount, { currency: donation.currency })}
+                    </a>
                   </td>
                   <td className={styles['comment']}>{donation.comment}</td>
                   <td>

bundles/admin/donationProcessing/processDonationsSpec.tsx

@@ -49,6 +49,7 @@ describe('ProcessDonations', () => {
             {
               donor: 1,
               amount: 164.87,
+              currency: 'USD',
               comment: 'Amazing Comment',
               pk: 123,
             },
@@ -99,6 +100,7 @@ describe('ProcessDonations', () => {
               {
                 donor: 1,
                 amount: 164.87,
+                currency: 'USD',
                 comment: 'Amazing Comment',
                 pk: 123,
               },
@@ -190,6 +192,7 @@ describe('ProcessDonations', () => {
               {
                 donor: 1,
                 amount: 164.87,
+                currency: 'USD',
                 comment: 'Amazing Comment',
                 pk: 123,
               },

bundles/admin/donationProcessing/readDonations.tsx

@@ -9,6 +9,7 @@ import useSafeDispatch from '@public/api/useDispatch';
 import { useCachedCallback } from '@public/hooks/useCachedCallback';
 import { useFetchDonors } from '@public/hooks/useFetchDonors';
 import Spinner from '@public/spinner';
+import * as CurrencyUtils from '@public/util/currency';
 
 import styles from './donations.mod.css';
 
@@ -114,7 +115,9 @@ export default React.memo(function ReadDonations() {
                     {canEditDonors ? <a href={`${ADMIN_ROOT}donor/${donation.donor}`}>{donorLabel}</a> : donorLabel}
                   </td>
                   <td>
-                    <a href={`${ADMIN_ROOT}donation/${donation.pk}`}>${(+donation.amount).toFixed(2)}</a>
+                    <a href={`${ADMIN_ROOT}donation/${donation.pk}`}>
+                      {CurrencyUtils.asCurrency(donation.amount, { currency: donation.currency })}
+                    </a>
                   </td>
                   <td className={styles['comment']}>
                     {donation.pinned && '📌'}

bundles/admin/donationProcessing/readDonationsSpec.tsx

@@ -49,6 +49,7 @@ describe('ReadDonations', () => {
             {
               donor: 1,
               amount: 164.87,
+              currency: 'USD',
               comment: 'Amazing Comment',
               pinned: false,
               pk: 123,
@@ -141,6 +142,7 @@ describe('ReadDonations', () => {
             {
               donor: 1,
               amount: 164.87,
+              currency: 'USD',
               comment: 'Amazing Comment',
               pinned: true,
               pk: 123,

bundles/processing/modules/donations/DonationRow.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useDrag, useDrop } from 'react-dnd';
+import { useSelector } from 'react-redux';
 import { Clickable, Stack, Text } from '@spyrothon/sparx';
 
 import type { Donation, DonationBid } from '@public/apiv2/APITypes';
 import * as CurrencyUtils from '@public/util/currency';
 import DragHandle from '@uikit/icons/DragHandle';
 
+import * as EventDetailsStore from '@tracker/event_details/EventDetailsStore';
+
 import HighlightKeywords from './HighlightKeywords';
 
 import styles from './DonationRow.mod.css';
@@ -19,9 +22,10 @@ interface BidsRowProps {
 
 function BidsRow(props: BidsRowProps) {
   const { bids } = props;
+  const currency = useSelector(EventDetailsStore.getEventCurrency);
   if (bids.length === 0) return null;
 
-  const bidNames = bids.map(bid => `${bid.bid_name} (${CurrencyUtils.asCurrency(bid.amount)})`);
+  const bidNames = bids.map(bid => `${bid.bid_name} (${CurrencyUtils.asCurrency(bid.amount, { currency })})`);
 
   return (
     <Text variant="text-sm/normal" className={styles.bids}>
@@ -76,7 +80,8 @@ export default function DonationRow(props: DonationRowProps) {
     canDrop: checkDrop,
   } = props;
 
-  const amount = CurrencyUtils.asCurrency(donation.amount);
+  const currency = useSelector(EventDetailsStore.getEventCurrency);
+  const amount = CurrencyUtils.asCurrency(donation.amount, { currency });
   const donationTitle = (
     <Text variant="header-sm/normal">
       <strong>{amount}</strong>

bundles/processing/modules/donations/ModCommentModal.tsx

@@ -1,20 +1,23 @@
 import * as React from 'react';
 import { useMutation } from 'react-query';
+import { useSelector } from 'react-redux';
 import { Button, Card, FormControl, Header, Stack, Text, TextArea } from '@spyrothon/sparx';
 
 import APIClient from '@public/apiv2/APIClient';
 import { Donation } from '@public/apiv2/APITypes';
 import * as CurrencyUtils from '@public/util/currency';
 import TimeUtils from '@public/util/TimeUtils';
 
+import * as EventDetailsStore from '@tracker/event_details/EventDetailsStore';
+
 import RelativeTime from '../time/RelativeTime';
 import { useDonation } from './DonationsStore';
 
 import styles from '../donation-groups/CreateEditDonationGroupModal.mod.css';
 
-function renderDonationHeader(donation: Donation) {
+function renderDonationHeader(donation: Donation, currency: string) {
   const timestamp = TimeUtils.parseTimestamp(donation.timereceived);
-  const amount = CurrencyUtils.asCurrency(donation.amount);
+  const amount = CurrencyUtils.asCurrency(donation.amount, { currency });
 
   return (
     <Stack spacing="space-sm">
@@ -44,6 +47,7 @@ interface ModCommentModalProps {
 export default function ModCommentModal(props: ModCommentModalProps) {
   const { donationId, onClose } = props;
 
+  const currency = useSelector(EventDetailsStore.getEventCurrency);
   const donation = useDonation(donationId);
   const [comment, setComment] = React.useState(donation.modcomment ?? '');
 
@@ -59,7 +63,7 @@ export default function ModCommentModal(props: ModCommentModalProps) {
     <Card floating className={styles.modal}>
       <Stack as="form" spacing="space-lg" action="" onSubmit={handleSave}>
         <Header tag="h1">Edit Mod Comment</Header>
-        <Card>{renderDonationHeader(donation)}</Card>
+        <Card>{renderDonationHeader(donation, currency)}</Card>
         <FormControl label="Mod Comment">
           <TextArea
             value={comment}

bundles/processing/modules/processing/ActionLog.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useMutation } from 'react-query';
+import { useSelector } from 'react-redux';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { Anchor, Button, Header, Text } from '@spyrothon/sparx';
 
@@ -8,6 +9,8 @@ import { Donation } from '@public/apiv2/APITypes';
 import * as CurrencyUtils from '@public/util/currency';
 import Undo from '@uikit/icons/Undo';
 
+import * as EventDetailsStore from '@tracker/event_details/EventDetailsStore';
+
 import { AdminRoutes, useAdminRoute } from '../../Routes';
 import { loadDonations, useDonation } from '../donations/DonationsStore';
 import useProcessingStore, { HistoryAction } from '../processing/ProcessingStore';
@@ -32,6 +35,7 @@ function getRelativeTime(timestamp: number, now: number = Date.now()) {
 function ActionEntry({ action }: { action: HistoryAction }) {
   const donationLink = useAdminRoute(AdminRoutes.DONATION(action.donationId));
   const donation = useDonation(action.donationId);
+  const currency = useSelector(EventDetailsStore.getEventCurrency);
 
   const store = useProcessingStore();
   const unprocess = useMutation(
@@ -46,7 +50,7 @@ function ActionEntry({ action }: { action: HistoryAction }) {
     },
   );
 
-  const amount = CurrencyUtils.asCurrency(donation.amount);
+  const amount = CurrencyUtils.asCurrency(donation.amount, { currency });
 
   return (
     <div className={styles.action} key={action.id}>

bundles/processing/modules/reading/ReadingDonationRowPopout.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useMutation } from 'react-query';
+import { useSelector } from 'react-redux';
 import { Anchor, Button, Card, Checkbox, Header, openModal, Spacer, Stack, Text } from '@spyrothon/sparx';
 
 import { usePermission } from '@public/api/helpers/auth';
@@ -8,6 +9,7 @@ import * as CurrencyUtils from '@public/util/currency';
 
 import ModCommentModal from '@processing/modules/donations/ModCommentModal';
 import { AdminRoutes, useAdminRoute } from '@processing/Routes';
+import * as EventDetailsStore from '@tracker/event_details/EventDetailsStore';
 
 import useDonationGroupsStore from '../donation-groups/DonationGroupsStore';
 import { loadDonations, useDonation } from '../donations/DonationsStore';
@@ -21,8 +23,9 @@ export default function ReadingDonationRowPopout(props: ReadingDonationRowPopout
   const { donationId, onClose } = props;
   const donation = useDonation(donationId);
   const { groups, addDonationToGroup, removeDonationFromGroup, removeDonationFromAllGroups } = useDonationGroupsStore();
+  const currency = useSelector(EventDetailsStore.getEventCurrency);
 
-  const amount = CurrencyUtils.asCurrency(donation.amount);
+  const amount = CurrencyUtils.asCurrency(donation.amount, { currency });
   const donationLink = useAdminRoute(AdminRoutes.DONATION(donation.id));
   const donorLink = useAdminRoute(AdminRoutes.DONOR(donation.donor));
   const canEditDonors = usePermission('tracker.change_donor');

bundles/public/util/currency.ts

@@ -1,5 +1,29 @@
-export function asCurrency(amount: string | number) {
-  return `$${Number(amount).toFixed(2)}`;
+// This type enforces that consumers pass in the `currency` they want to display.
+interface CurrencyOptions extends Omit<Intl.NumberFormatOptions, 'style'> {
+  currency: string;
+}
+
+export function asCurrency(amount: string | number, options: CurrencyOptions) {
+  // `en-US` is hardcoded here because we don't actually localize the frontend currently.
+  const formatter = new Intl.NumberFormat('en-US', { style: 'currency', ...options });
+
+  return formatter.format(Number(amount));
+}
+
+export function getCurrencySymbol(currency: string): string {
+  try {
+    const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency, currencyDisplay: 'narrowSymbol' });
+
+    for (const part of formatter.formatToParts(0)) {
+      if (part.type === 'currency') return part.value;
+    }
+  } catch (e: unknown) {
+    // Ignored: RangeError: invalid currency code in NumberFormat()
+  }
+
+  // If there was no currency symbol in the formatted string, then we can assume that
+  // the language does not expect there to be a symbol around the currency value.
+  return '';
 }
 
 export function parseCurrency(amount?: string) {

bundles/public/util/currencySpec.ts

@@ -0,0 +1,47 @@
+import * as CurrencyUtils from './currency';
+
+describe('CurrencyUtils', () => {
+  describe('asCurrency', () => {
+    it('formats euros', () => {
+      const result = CurrencyUtils.asCurrency(123456.789, { currency: 'EUR', maximumFractionDigits: 0 });
+
+      expect(result).toEqual('€123,457');
+    });
+
+    it('formats with minimum digits', () => {
+      const result = CurrencyUtils.asCurrency(20, { currency: 'USD', minimumFractionDigits: 2 });
+
+      expect(result).toEqual('$20.00');
+    });
+
+    it('formats currency with full name', () => {
+      const result = CurrencyUtils.asCurrency(20, { currency: 'UAH', currencyDisplay: 'name' });
+
+      expect(result).toEqual('20.00 Ukrainian hryvnias');
+    });
+  });
+
+  describe('getCurrencySymbol', () => {
+    it('returns dollar symbol for USD', () => {
+      const result = CurrencyUtils.getCurrencySymbol('USD');
+
+      expect(result).toEqual('$');
+    });
+    it('returns euro symbol for EUR', () => {
+      const result = CurrencyUtils.getCurrencySymbol('EUR');
+
+      expect(result).toEqual('€');
+    });
+    it("returns input currency when it's 3 letters", () => {
+      const result = CurrencyUtils.getCurrencySymbol('GDQ');
+
+      // This is how the api works for some reason. GDQ is not a valid ISO-4217 currency, yet the api returns it.
+      expect(result).toEqual('GDQ');
+    });
+    it('returns blank string for wrong input', () => {
+      const result = CurrencyUtils.getCurrencySymbol('Invalid currency!');
+
+      expect(result).toEqual('');
+    });
+  });
+});

bundles/tracker/donation/__tests__/validateBid.spec.ts

@@ -58,7 +58,7 @@ describe('validateBid', () => {
       amount: 2.5,
     };
 
-    const validation = validateBid(bid, basicIncentive, donation, [], false, false);
+    const validation = validateBid('USD', bid, basicIncentive, donation, [], false, false);
     expect(validation.valid).toBe(true);
     expect(validation.errors.length).toEqual(0);
   });
@@ -71,9 +71,12 @@ describe('validateBid', () => {
         customoptionname: 'test',
       };
 
-      const validation = validateBid(bid, basicIncentive, donation, [], false, false);
+      const validation = validateBid('USD', bid, basicIncentive, donation, [], false, false);
       expect(validation.valid).toBe(false);
-      expect(validation.errors).toContain({ field: 'amount', message: BidErrors.AMOUNT_MINIMUM(BID_MINIMUM_AMOUNT) });
+      expect(validation.errors).toContain({
+        field: 'amount',
+        message: BidErrors.AMOUNT_MINIMUM(BID_MINIMUM_AMOUNT, 'USD'),
+      });
     });
 
     it('passes when amount equals allowed minimum', () => {
@@ -82,7 +85,7 @@ describe('validateBid', () => {
         amount: BID_MINIMUM_AMOUNT,
       };
 
-      const validation = validateBid(bid, basicIncentive, donation, [], false, false);
+      const validation = validateBid('USD', bid, basicIncentive, donation, [], false, false);
       expect(validation.valid).toBe(true);
       expect(validation.errors.length).toEqual(0);
     });
@@ -94,7 +97,7 @@ describe('validateBid', () => {
         amount: max,
       };
 
-      const validation = validateBid(bid, basicIncentive, donation, [], false, false);
+      const validation = validateBid('USD', bid, basicIncentive, donation, [], false, false);
       expect(validation.valid).toBe(true);
       expect(validation.errors.length).toEqual(0);
     });
@@ -106,9 +109,9 @@ describe('validateBid', () => {
         amount: max + 1,
       };
 
-      const validation = validateBid(bid, basicIncentive, donation, [], false, false);
+      const validation = validateBid('USD', bid, basicIncentive, donation, [], false, false);
       expect(validation.valid).toBe(false);
-      expect(validation.errors).toContain({ field: 'amount', message: BidErrors.AMOUNT_MAXIMUM(max) });
+      expect(validation.errors).toContain({ field: 'amount', message: BidErrors.AMOUNT_MAXIMUM(max, 'USD') });
     });
   });
 
@@ -119,7 +122,7 @@ describe('validateBid', () => {
         amount: 2.5,
       };
 
-      const validation = validateBid(bid, incentiveWithOptions, donation, [], true, false);
+      const validation = validateBid('USD', bid, incentiveWithOptions, donation, [], true, false);
       expect(validation.valid).toBe(false);
       expect(validation.errors).toContain({ field: 'incentiveId', message: BidErrors.NO_CHOICE });
     });
@@ -130,7 +133,7 @@ describe('validateBid', () => {
         amount: 2.5,
       };
 
-      const validation = validateBid(bid, incentiveWithOptions, donation, [], true, true);
+      const validation = validateBid('USD', bid, incentiveWithOptions, donation, [], true, true);
       expect(validation.valid).toBe(true);
       expect(validation.errors.length).toEqual(0);
     });
@@ -142,7 +145,7 @@ describe('validateBid', () => {
         customoptionname: 'test',
       };
 
-      const validation = validateBid(bid, incentiveWithOptions, donation, [], true, true, true);
+      const validation = validateBid('USD', bid, incentiveWithOptions, donation, [], true, true, true);
       expect(validation.valid).toBe(true);
       expect(validation.errors.length).toEqual(0);
     });
@@ -154,7 +157,7 @@ describe('validateBid', () => {
         customoptionname: '',
       };
 
-      const validation = validateBid(bid, incentiveWithOptions, donation, [], true, true, true);
+      const validation = validateBid('USD', bid, incentiveWithOptions, donation, [], true, true, true);
       expect(validation.valid).toBe(false);
       expect(validation.errors).toContain({
         field: 'new option',
@@ -169,7 +172,7 @@ describe('validateBid', () => {
         customoptionname: 'this is too long to be allowable clearly',
       };
 
-      const validation = validateBid(bid, incentiveWithOptions, donation, [], true, true, true);
+      const validation = validateBid('USD', bid, incentiveWithOptions, donation, [], true, true, true);
       expect(validation.valid).toBe(false);
       expect(validation.errors).toContain({
         field: 'new option',