feat: ✨ Use nano ids

Author: RatulMaharaj

apps/app/package.json

@@ -63,8 +63,8 @@
 		"pnpm": ">=8"
 	},
 	"dependencies": {
-		"@invoicelink/db": "workspace:*",
 		"@floating-ui/dom": "^1.6.8",
+		"@invoicelink/db": "workspace:*",
 		"@lucia-auth/adapter-prisma": "4.0.1",
 		"@paralleldrive/cuid2": "^2.2.2",
 		"@prisma/client": "5.17.0",
@@ -77,6 +77,7 @@
 		"javascript-time-ago": "^2.5.10",
 		"jwt-decode": "^4.0.0",
 		"lucia": "3.2.0",
+		"nanoid": "^5.0.7",
 		"oslo": "^1.2.1",
 		"posthog-js": "^1.154.2",
 		"prisma": "5.17.0",

apps/app/src/lib/utils/id.ts

@@ -0,0 +1,5 @@
+import { customAlphabet } from 'nanoid';
+
+const alphabet = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+export const generateId = customAlphabet(alphabet, 9);

apps/app/src/routes/(app)/invoices/management/manage/+page.server.ts

@@ -7,6 +7,7 @@ import { createCheckout } from '$lib/utils/yoco';
 import { SerialType } from '@invoicelink/db';
 import { getNextSerial } from '$lib/utils/serialNumbers';
 import { schema } from './validation';
+import { generateId } from '$lib/utils/id';
 
 export const load = (async ({ parent, locals, url }) => {
 	await parent();
@@ -149,6 +150,7 @@ export const actions: Actions = {
 			if (user?.id) {
 				let invoice = await prisma.invoice.create({
 					data: {
+						id: generateId(),
 						issueDate: form.data.issueDate,
 						dueDate: form.data.dueDate,
 						description: form.data.description,
@@ -180,9 +182,9 @@ export const actions: Actions = {
 					const { errors: yocoErrors, checkout: yocoCheckout } = await createCheckout({
 						secretKey: yocoIntegration.secretKey,
 						amount: form.data.total,
-						cancelUrl: `${url.origin}/pay?id=${invoice.id}`,
-						failureUrl: `${url.origin}/pay?id=${invoice.id}`,
-						successUrl: `${url.origin}/pay?id=${invoice.id}`
+						cancelUrl: `${url.origin}/${invoice.id}`,
+						failureUrl: `${url.origin}/${invoice.id}`,
+						successUrl: `${url.origin}/${invoice.id}`
 					});
 
 					if (yocoErrors) {
@@ -336,9 +338,9 @@ export const actions: Actions = {
 				const { errors: yocoErrors, checkout: yocoCheckout } = await createCheckout({
 					secretKey: yocoIntegration.secretKey,
 					amount: updatedInvoice.total,
-					cancelUrl: `${url.origin}/pay?id=${updatedInvoice.id}`,
-					failureUrl: `${url.origin}/pay?id=${updatedInvoice.id}`,
-					successUrl: `${url.origin}/pay?id=${updatedInvoice.id}`
+					cancelUrl: `${url.origin}/${updatedInvoice.id}`,
+					failureUrl: `${url.origin}/${updatedInvoice.id}`,
+					successUrl: `${url.origin}/${updatedInvoice.id}`
 				});
 
 				if (yocoErrors) {

apps/app/src/routes/(app)/invoices/management/manage/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	export let data: PageData;
-	import { page } from '$app/stores';
 
 	import Invoice from '$lib/components/Invoice.svelte';
 	import PageHeading from '$lib/components/PageHeading.svelte';
@@ -88,6 +87,9 @@
 			address: defaultAddress
 		};
 	}
+
+	// payment link
+	const paymentLink = `https://pay.invoicelink.io/${$form.id}`;
 </script>
 
 <PageHeading>
@@ -98,7 +100,7 @@
 				class="tooltip tooltip-accent"
 				data-tip="Preview invoicelink"
 				target="_blank"
-				href="/pay?id={$form.id}"
+				href={paymentLink}
 			>
 				<Icon name="launch" />
 			</a>
@@ -110,10 +112,7 @@
 			>
 				<Icon name="download" />
 			</a>
-			<CopyToClipboard
-				text={`${$page.url.origin}/pay?id=${$form.id}`}
-				message="Invoicelink copied"
-			/>
+			<CopyToClipboard text={paymentLink} message="Invoicelink copied" />
 		</div>
 	{/if}
 </PageHeading>

apps/app/src/routes/(app)/quick-links/+page.server.ts

@@ -7,6 +7,7 @@ import { SerialType } from '@invoicelink/db';
 import { incrementSerialNumber } from '$lib/utils/serialNumbers';
 import { createCheckout } from '$lib/utils/yoco';
 import { quickLinkSchema } from '../validation';
+import { generateId } from '$lib/utils/id';
 
 export const load = (async ({ parent, locals }) => {
 	await parent();
@@ -93,6 +94,7 @@ export const actions: Actions = {
 			if (user?.id) {
 				let quickLink = await prisma.quickLink.create({
 					data: {
+						id: generateId(),
 						subtotal: form.data.amount,
 						tax: 0,
 						total: form.data.amount,
@@ -117,9 +119,9 @@ export const actions: Actions = {
 					const { errors: yocoErrors, checkout: yocoCheckout } = await createCheckout({
 						secretKey: yocoIntegration.secretKey,
 						amount: form.data.amount,
-						cancelUrl: `${url.origin}/pay?id=${quickLink.id}`,
-						failureUrl: `${url.origin}/pay?id=${quickLink.id}`,
-						successUrl: `${url.origin}/pay?id=${quickLink.id}`
+						cancelUrl: `${url.origin}/${quickLink.id}`,
+						failureUrl: `${url.origin}/${quickLink.id}`,
+						successUrl: `${url.origin}/${quickLink.id}`
 					});
 
 					if (yocoErrors) {

apps/app/src/routes/(app)/quick-links/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	export let data: PageData;
-	import { page } from '$app/stores';
 	import toast from 'svelte-french-toast';
 	import { superForm } from 'sveltekit-superforms/client';
 	import Icon from '$lib/components/Icon.svelte';
@@ -94,10 +93,10 @@
 								</div>
 							</div>
 							<Badge status={link.status} />
-							<a target="_blank" href="/pay?id={link.id}">
+							<a target="_blank" href="https://pay.invoicelink.io/{link.id}">
 								<Icon name="launch" />
 							</a>
-							<CopyToClipboard text={`${$page.url.origin}/pay?id=${link.id}`} />
+							<CopyToClipboard text={`https://pay.invoicelink.io/${link.id}`} />
 						</li>
 					{/each}
 				</ul>