remove default currency symbol and make it customizable (#61)

.env.example

@@ -2,4 +2,6 @@
 # i.e. https://wishlist.your-domain.org
 ORIGIN=
 # Hours until signup and password reset tokens expire
-TOKEN_TIME=72
+TOKEN_TIME=72
+# The currency to use when a product search does not return a currency
+DEFAULT_CURRENCY=USD

Dockerfile

@@ -42,4 +42,7 @@ RUN chmod +x entrypoint.sh
 VOLUME /usr/src/app/uploads
 VOLUME /usr/src/app/data
 
+ENV DEFAULT_CURRENCY USD
+ENV TOKEN_TIME 72
+
 ENTRYPOINT [ "sh", "entrypoint.sh" ]

entrypoint.sh

@@ -1,6 +1,7 @@
 export PROTOCOL_HEADER=x-forwarded-proto 
 export HOST_HEADER=x-forwarded-host
 export DATABASE_URL="file:/usr/src/app/data/prod.db?connection_limit=1"
+export PUBLIC_DEFAULT_CURRENCY=${DEFAULT_CURRENCY}
 
 caddy start --config /usr/src/app/Caddyfile
 

package.json

@@ -22,6 +22,7 @@
 		"@sveltejs/adapter-node": "^1.3.1",
 		"@sveltejs/kit": "^1.25.2",
 		"@tailwindcss/forms": "^0.5.6",
+		"@types/metascraper": "^5.14.2",
 		"@types/node": "^18.18.4",
 		"@types/nodemailer": "^6.4.11",
 		"@types/pulltorefreshjs": "^0.1.5",
@@ -53,6 +54,7 @@
 	"type": "module",
 	"dependencies": {
 		"@lucia-auth/adapter-prisma": "^3.0.2",
+		"@metascraper/helpers": "^5.37.1",
 		"@prisma/client": "^5.4.2",
 		"@samirrayani/metascraper-shopping": "^1.4.22",
 		"@zxcvbn-ts/core": "^3.0.4",

prisma/migrations/20231022025934_add_default_currency_symbols/migration.sql

@@ -0,0 +1,3 @@
+UPDATE items
+SET price = '$' || price
+WHERE price <> '' AND price NOT LIKE '$%'

prisma/seed.js

@@ -40,9 +40,8 @@ const roles = async () => {
 
 const groups = async () => {
 	const groupCount = await prisma.group.count();
-	const userCount = await prisma.user.count();
 
-	if (userCount > 0 && groupCount === 0) {
+	if (groupCount === 0) {
 		const defaultGroup = await prisma.group.create({
 			data: {
 				name: "Default"
@@ -83,6 +82,7 @@ const groups = async () => {
 				}
 			});
 		}
+		console.log("created default group");
 	} else {
 		console.log("skipping default group creation");
 	}

src/lib/components/wishlists/ItemCard.svelte

@@ -141,7 +141,7 @@
 
 		<div class="flex flex-col">
 			{#if item.price}
-				<span class="text-lg font-semibold">${item.price}</span>
+				<span class="text-lg font-semibold">{item.price}</span>
 			{/if}
 
 			<span class="text-base md:text-lg">

src/lib/components/wishlists/ItemForm.svelte

@@ -2,6 +2,7 @@
 	import { page } from "$app/stores";
 	import type { Item } from "@prisma/client";
 	import Backdrop from "$lib/components/Backdrop.svelte";
+	import { env } from "$env/dynamic/public";
 
 	export let data: Item;
 	export let buttonText: string;
@@ -10,6 +11,14 @@
 	let loading = false;
 	let urlChanged = false;
 
+	const formatPrice = (price: number | null, currency: string | null) => {
+		if (!price) return null;
+		return Intl.NumberFormat(undefined, {
+			style: "currency",
+			currency: currency ? currency : env.PUBLIC_DEFAULT_CURRENCY
+		}).format(price);
+	};
+
 	const getInfo = async () => {
 		if (data.url && urlChanged) {
 			loading = true;
@@ -18,7 +27,7 @@
 				let productData: ProductData = await res.json();
 				data.name = productData.name ? productData.name : productData.title || "";
 				data.image_url = productData.image;
-				data.price = productData.price?.toString() || null;
+				data.price = formatPrice(productData.price, productData.currency);
 			} else {
 				console.log("invalid url");
 			}
@@ -31,30 +40,40 @@
 <div class="grid grid-cols-1 gap-4 md:grid-cols-6">
 	<label class="col-span-1 md:col-span-6" for="url">
 		<span>Item URL</span>
-		<input
-			id="url"
-			name="url"
-			class="input"
-			placeholder="Enter a URL to fetch the item data"
-			type="url"
-			bind:value={data.url}
-			on:focusout={() => getInfo()}
-			on:change={() => (urlChanged = true)}
-		/>
+		<div class="input-group grid-cols-[auto_1fr]">
+			<div class="input-group-shim">
+				<iconify-icon icon="ion:bag-handle"></iconify-icon>
+			</div>
+			<input
+				id="url"
+				name="url"
+				class="input"
+				placeholder="Enter a URL to fetch the item data"
+				type="url"
+				bind:value={data.url}
+				on:focusout={() => getInfo()}
+				on:change={() => (urlChanged = true)}
+			/>
+		</div>
 	</label>
 
 	<label class="col-span-1 row-start-2 md:col-span-4" for="name">
 		<span>Item Name*</span>
-		<input
-			id="name"
-			name="name"
-			class="input"
-			class:input-invalid={form?.missing}
-			autocomplete="off"
-			required
-			type="text"
-			bind:value={data.name}
-		/>
+		<div class="input-group grid-cols-[auto_1fr]">
+			<div class="input-group-shim">
+				<iconify-icon icon="ion:gift"></iconify-icon>
+			</div>
+			<input
+				id="name"
+				name="name"
+				class="input"
+				class:input-invalid={form?.missing}
+				autocomplete="off"
+				required
+				type="text"
+				bind:value={data.name}
+			/>
+		</div>
 		{#if form?.missing}
 			<p class="unstyled pt-2 text-xs text-warning-500">Item name required</p>
 		{/if}
@@ -63,7 +82,9 @@
 	<label class="col-span-1 row-start-3 md:col-span-2 md:row-start-2" for="price">
 		<span>Price</span>
 		<div class="input-group grid-cols-[auto_1fr]">
-			<div class="input-group-shim">$</div>
+			<div class="input-group-shim">
+				<iconify-icon icon="ion:cash"></iconify-icon>
+			</div>
 			<input
 				id="price"
 				name="price"
@@ -82,14 +103,19 @@
 
 	<label class="col-span-1 md:col-span-4" for="image_url">
 		<span>Image URL</span>
-		<input
-			id="image_url"
-			name="image_url"
-			class="input"
-			autocomplete="off"
-			type="text"
-			bind:value={data.image_url}
-		/>
+		<div class="input-group grid-cols-[auto_1fr]">
+			<div class="input-group-shim">
+				<iconify-icon icon="ion:image"></iconify-icon>
+			</div>
+			<input
+				id="image_url"
+				name="image_url"
+				class="input"
+				autocomplete="off"
+				type="text"
+				bind:value={data.image_url}
+			/>
+		</div>
 	</label>
 
 	<label class="col-span-1 md:col-span-6" for="note">

src/lib/server/shopping/helpers.ts

@@ -1,5 +1,7 @@
 /* eslint no-useless-escape: 0 */
-export const toPriceFormat = (price: string) => {
+export const toPriceFormat = (price: string | undefined | null) => {
+	if (!price) return;
+
 	if (typeof price === "string") {
 		// remove all non-numeric characters and symbols like $, € and others others.
 		// except for '.' and ','