feat: add button to send payment reminder

VaquitApp · Jun 11, 2024 · 7caaa22 · 7caaa22
1 parent a1c9d28
commit 7caaa22
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/my-app/src/lib/svgs.ts b/my-app/src/lib/svgs.ts
@@ -14,3 +14,6 @@ export const CAUTION_SVG =
 
 export const WARNING_SVG =
 	'<svg style="display: inline-block; vertical-align: inherit" viewBox="0 0 16 16" width="20" height="20"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>';
+
+export const BELL_SVG =
+	'<svg viewBox="2 2 20 20" width="18" height="18" fill="none"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g> <path d="M12.0009 5C13.4331 5 14.8066 5.50571 15.8193 6.40589C16.832 7.30606 17.4009 8.52696 17.4009 9.8C17.4009 11.7691 17.846 13.2436 18.4232 14.3279C19.1606 15.7133 19.5293 16.406 19.5088 16.5642C19.4849 16.7489 19.4544 16.7997 19.3026 16.9075C19.1725 17 18.5254 17 17.2311 17H6.77066C5.47638 17 4.82925 17 4.69916 16.9075C4.54741 16.7997 4.51692 16.7489 4.493 16.5642C4.47249 16.406 4.8412 15.7133 5.57863 14.3279C6.1558 13.2436 6.60089 11.7691 6.60089 9.8C6.60089 8.52696 7.16982 7.30606 8.18251 6.40589C9.19521 5.50571 10.5687 5 12.0009 5ZM12.0009 5V3M9.35489 20C10.0611 20.6233 10.9888 21.0016 12.0049 21.0016C13.0209 21.0016 13.9486 20.6233 14.6549 20" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>'
diff --git a/my-app/src/routes/groups/balance/[id=integer]/+page.svelte b/my-app/src/routes/groups/balance/[id=integer]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { title } from '$lib';
 	import { formatMoney } from '$lib/formatter';
-	import { INFO_SVG } from '$lib/svgs';
+	import { BELL_SVG, INFO_SVG } from '$lib/svgs';
 	import type { PageServerData } from './$types';
 
 	export let data: PageServerData;
@@ -50,7 +50,15 @@
 
 {#each data?.balances as { email, balance }}
 	<article class="grid">
-		<p>{email}</p>
+		<p>
+			{email}
+			<button
+				class="outline secondary bell"
+				data-tooltip="Enviar recordatorio"
+				disabled={balance >= 0}
+				on:click={() => alert('WIP')}>{@html BELL_SVG}</button
+			>
+		</p>
 		<p class="text-right">
 			<span style="color: {balanceColor(balance)}">{formatMoney(balance)}</span>
 			<span class="no-underline" data-tooltip={balanceTooltip(balance)}>{@html INFO_SVG}</span>
@@ -72,4 +80,9 @@
 	.no-underline {
 		border-bottom: 0px;
 	}
+
+	.bell {
+		width: 32px;
+		padding: 0px;
+	}
 </style>