✨ Logo on bebop

src/routes/(app)/order/[id]/+page.svelte

@@ -21,6 +21,7 @@
 	import CmsDesign from '$lib/components/CmsDesign.svelte';
 	import Picture from '$lib/components/Picture.svelte';
 	import IconStripe from '$lib/components/icons/IconStripe.svelte';
+	import BEBOP_B_LOGO from '$lib/assets/bebop-b.svg';
 
 	let currentDate = new Date();
 	export let data;
@@ -309,7 +310,7 @@
 									)}
 								>
 									<img
-										src="{$page.url.pathname}/payment/{payment.id}/qrcode"
+										src="{$page.url.pathname}/payment/{payment.id}/qrcode?logo=true"
 										class="w-96 h-96"
 										alt="QR code"
 									/>

src/routes/(app)/order/[id]/payment/[paymentId]/qrcode/+server.ts

@@ -1,9 +1,17 @@
 import { collections } from '$lib/server/database';
+import { rootDir } from '$lib/server/root-dir';
 import { bitcoinPaymentQrCodeString } from '$lib/types/Order';
 import { error } from '@sveltejs/kit';
 import qrcode from 'qrcode';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { building } from '$app/environment';
 
-export async function GET({ params }) {
+const bebopLogoSvg = building ? '' : readFileSync(join(rootDir, 'assets/bebop-b.svg'), 'utf-8');
+
+const BEBOP_LOGO_RATIO = 0.2;
+
+export async function GET({ params, url }) {
 	const order = await collections.orders.findOne({ _id: params.id });
 
 	if (!order) {
@@ -28,7 +36,35 @@ export async function GET({ params }) {
 			? bitcoinPaymentQrCodeString(payment.address, payment.price.amount, payment.price.currency)
 			: payment.address;
 
-	return new Response(await qrcode.toString(address, { type: 'svg' }), {
+	let qrcodeString = (await qrcode.toString(address, { type: 'svg' })).trim();
+
+	const showLogo = url.searchParams.get('logo') === 'true';
+
+	if (showLogo) {
+		const viewBox = qrcodeString.match(/viewBox="([^"]+)"/)?.[1];
+		const logoViewBox = bebopLogoSvg.match(/viewBox="([^"]+)"/)?.[1];
+		const logoWidgth = Number(bebopLogoSvg.match(/width="([^"]+)"/)?.[1]);
+		const logoHeight = Number(bebopLogoSvg.match(/height="([^"]+)"/)?.[1]);
+
+		if (viewBox && logoViewBox && !isNaN(logoWidgth) && !isNaN(logoHeight)) {
+			const [x, y, width, height] = viewBox.split(' ').map(Number);
+			// add logo to SVG
+
+			const logoScale = Math.max(width / logoWidgth, height / logoHeight) * BEBOP_LOGO_RATIO;
+			const logoX = x + (width - Number(logoWidgth) * logoScale) / 2;
+			const logoY = y + (height - Number(logoHeight) * logoScale) / 2;
+
+			const logoSvg = `<g transform="translate(${logoX},${logoY}) scale(${logoScale})">${bebopLogoSvg}</g>`;
+			const whiteRectBg = `<rect x="${logoX}" y="${logoY}" width="${
+				logoWidgth * logoScale
+			}" height="${logoHeight * logoScale}" fill="white"/>`;
+			if (qrcodeString.endsWith('</svg>')) {
+				qrcodeString = qrcodeString.slice(0, -'</svg>'.length) + whiteRectBg + logoSvg + '</svg>';
+			}
+		}
+	}
+
+	return new Response(qrcodeString, {
 		headers: { 'content-type': 'image/svg+xml' },
 		status: 200
 	});

src/routes/(app)/pos/session/+page.svelte

@@ -9,7 +9,6 @@
 	import { computePriceInfo } from '$lib/types/Cart.js';
 	import { orderRemainingToPay } from '$lib/types/Order.js';
 	import Trans from '$lib/components/Trans.svelte';
-	import BEBOP_B_LOGO from '$lib/assets/bebop-b.svg';
 
 	interface CustomEventSource {
 		onerror?: ((this: CustomEventSource, ev: Event) => unknown) | null;
@@ -154,17 +153,10 @@
 			<div class="flex flex-col items-center gap-3">
 				<h1 class="text-3xl text-center">{t('order.singleTitle', { number: order?.number })}</h1>
 				<img
-					src="/order/{order?._id}/payment/{payment?.id}/qrcode"
+					src="/order/{order?._id}/payment/{payment?.id}/qrcode?logo={!data.removeBebopLogoPOS}"
 					alt="QR code"
 					class="h-96 w-96"
 				/>
-				{#if !data.removeBebopLogoPOS}
-					<img
-						src={BEBOP_B_LOGO}
-						alt=""
-						class="bg-white absolute top-[30%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 h-20 object-contain rounded-lg"
-					/>
-				{/if}
 			</div>
 		{/if}
 	{:else if view === 'canceled'}