refactor(components): add commas to dollar amounts

src/components/Footer/PdapFooter.vue

@@ -30,7 +30,10 @@
 			<span class="flex gap-1">
 				<a href="https://pdap.io/donate" target="_blank" rel="noreferrer">
 					<span><FontAwesomeIcon :icon="faCircleDollarToSlot" /> Donate</span>
-					(${{ fundraisingData.raised }} of ${{ fundraisingData.goal }} raised
+					(${{ formatWithCommas(fundraisingData.raised) }} of ${{
+						formatWithCommas(fundraisingData.goal)
+					}}
+					raised
 					<span v-if="fundraisingData.raised === fundraisingData.goal">🎉</span
 					>)
 				</a>
@@ -89,6 +92,7 @@ import {
 	faBook,
 	faCircleDollarToSlot,
 } from '@fortawesome/free-solid-svg-icons';
+import { formatWithCommas } from '../../utils/format';
 
 const { fundraisingData } = defineProps<PdapFooterProps>();
 

src/components/Footer/__snapshots__/footer.spec.ts.snap

@@ -60,7 +60,7 @@ exports[`Footer component > Renders a footer 1`] = `
           <svg aria-hidden="true" class="svg-inline--fa fa-circle-dollar-to-slot" data-icon="circle-dollar-to-slot" data-prefix="fas" focusable="false" role="img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
             <path class="" d="M326.7 403.7c-22.1 8-45.9 12.3-70.7 12.3s-48.7-4.4-70.7-12.3l-.8-.3c-30-11-56.8-28.7-78.6-51.4C70 314.6 48 263.9 48 208C48 93.1 141.1 0 256 0S464 93.1 464 208c0 55.9-22 106.6-57.9 144c-1 1-2 2.1-3 3.1c-21.4 21.4-47.4 38.1-76.3 48.6zM256 91.9c-11.1 0-20.1 9-20.1 20.1l0 6c-5.6 1.2-10.9 2.9-15.9 5.1c-15 6.8-27.9 19.4-31.1 37.7c-1.8 10.2-.8 20 3.4 29c4.2 8.8 10.7 15 17.3 19.5c11.6 7.9 26.9 12.5 38.6 16l2.2 .7c13.9 4.2 23.4 7.4 29.3 11.7c2.5 1.8 3.4 3.2 3.7 4c.3 .8 .9 2.6 .2 6.7c-.6 3.5-2.5 6.4-8 8.8c-6.1 2.6-16 3.9-28.8 1.9c-6-1-16.7-4.6-26.2-7.9c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-2.2-.7-4.3-1.5-6.4-2.1c-10.5-3.5-21.8 2.2-25.3 12.7s2.2 21.8 12.7 25.3c1.2 .4 2.7 .9 4.4 1.5c7.9 2.7 20.3 6.9 29.8 9.1l0 6.4c0 11.1 9 20.1 20.1 20.1s20.1-9 20.1-20.1l0-5.5c5.3-1 10.5-2.5 15.4-4.6c15.7-6.7 28.4-19.7 31.6-38.7c1.8-10.4 1-20.3-3-29.4c-3.9-9-10.2-15.6-16.9-20.5c-12.2-8.8-28.3-13.7-40.4-17.4l-.8-.2c-14.2-4.3-23.8-7.3-29.9-11.4c-2.6-1.8-3.4-3-3.6-3.5c-.2-.3-.7-1.6-.1-5c.3-1.9 1.9-5.2 8.2-8.1c6.4-2.9 16.4-4.5 28.6-2.6c4.3 .7 17.9 3.3 21.7 4.3c10.7 2.8 21.6-3.5 24.5-14.2s-3.5-21.6-14.2-24.5c-4.4-1.2-14.4-3.2-21-4.4l0-6.3c0-11.1-9-20.1-20.1-20.1zM48 352l16 0c19.5 25.9 44 47.7 72.2 64L64 416l0 32 192 0 192 0 0-32-72.2 0c28.2-16.3 52.8-38.1 72.2-64l16 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48z" fill="currentColor" />
           </svg> Donate
-        </span> ($5000 of $10000 raised
+        </span> ($5,000 of $10,000 raised
         <!--v-if-->)
       </a>
     </span>

src/components/Footer/footer.spec.ts

@@ -60,8 +60,8 @@ describe('Footer component', () => {
 				.find('a[href="https://pdap.io/donate"]')
 				.text();
 
-			expect(fundraisingText).toContain('$5000');
-			expect(fundraisingText).toContain('$10000');
+			expect(fundraisingText).toContain('$5,000');
+			expect(fundraisingText).toContain('$10,000');
 		});
 
 		test('Shows celebration emoji when goal is met', () => {

src/utils/format.ts

@@ -0,0 +1,5 @@
+export function formatWithCommas(number: number) {
+	const parts = number.toString().split('.');
+	parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+	return parts.join('.');
+}