🦋 Allow admin to set a QR-code-less order on their be-BOP #1621

src/app.css

@@ -46,6 +46,7 @@
 	--tagWidget-cta-color: #ffffff;
 	--tagWidget-color: #000000;
 	--tagWidget-hyperlink-color: #2271b1;
+	--order-creditCard-svg-color: #2271b1;
 }
 
 @layer base {
@@ -298,6 +299,9 @@
 		--tw-prose-bold: inherit;
 		--tw-prose-links: var(--body-hyperlink-color);
 	}
+	.order-creditCard-svg {
+		color: var(--order-creditCard-svg-color);
+	}
 }
 
 @layer utilities {

src/lib/server/runtime-config.ts

@@ -181,6 +181,8 @@ const baseConfig = {
 	],
 	contactModes: ['email', 'nostr'],
 	posTouchTag: [] as Tag['_id'][],
+	hideCreditCardQrCode: false,
+	overwriteCreditCardSvgColor: false,
 	hideCmsZonesOnMobile: false,
 	copyOrderEmailsToAdmin: true,
 	usersDarkDefaultTheme: false,

src/lib/server/theme.ts

@@ -102,6 +102,11 @@ export const themeValidator = z.object({
 			cancel: z.object({ backgroundColor }),
 			delete: z.object({ backgroundColor })
 		})
+	}),
+	order: z.object({
+		creditCard: z.object({
+			svg: z.object({ color })
+		})
 	})
 });
 

src/lib/types/Theme.ts

@@ -242,6 +242,15 @@ export const themeFormStructure = {
 				name: 'action.delete.backgroundColor'
 			}
 		]
+	},
+	order: {
+		label: 'Order',
+		elements: [
+			{
+				label: 'Credit card svg fill color',
+				name: 'creditCard.svg.color'
+			}
+		]
 	}
 } satisfies {
 	[key in keyof Omit<ThemeData, 'name'>]: {

src/routes/(app)/admin[[hash=admin_hash]]/config/+page.server.ts

@@ -35,7 +35,9 @@ export async function load(event) {
 		copyOrderEmailsToAdmin: runtimeConfig.copyOrderEmailsToAdmin,
 		disableLanguageSelector: runtimeConfig.disableLanguageSelector,
 		defaultOnLocation: runtimeConfig.defaultOnLocation,
-		cartPreviewInteractive: runtimeConfig.cartPreviewInteractive
+		cartPreviewInteractive: runtimeConfig.cartPreviewInteractive,
+		overwriteCreditCardSvgColor: runtimeConfig.overwriteCreditCardSvgColor,
+		hideCreditCardQrCode: runtimeConfig.hideCreditCardQrCode
 	};
 }
 
@@ -90,7 +92,9 @@ export const actions = {
 				cartMaxSeparateItems: z.number({ coerce: true }).int().default(0),
 				disableLanguageSelector: z.boolean({ coerce: true }),
 				contactModes: z.string().array(),
-				cartPreviewInteractive: z.boolean({ coerce: true })
+				cartPreviewInteractive: z.boolean({ coerce: true }),
+				hideCreditCardQrCode: z.boolean({ coerce: true }),
+				overwriteCreditCardSvgColor: z.boolean({ coerce: true })
 			})
 			.parse({
 				...Object.fromEntries(formData),

src/routes/(app)/admin[[hash=admin_hash]]/config/+page.svelte

@@ -218,6 +218,29 @@
 			/>
 		</label>
 	{/if}
+	<h2 class="text-2xl">Order</h2>
+	<label class="checkbox-label">
+		<input
+			type="checkbox"
+			name="hideCreditCardQrCode"
+			class="form-checkbox"
+			checked={data.hideCreditCardQrCode}
+		/>
+		Don't display order URL qr code on order paid with credit card
+	</label>
+	<label class="checkbox-label">
+		<input
+			type="checkbox"
+			name="overwriteCreditCardSvgColor"
+			class="form-checkbox"
+			checked={data.overwriteCreditCardSvgColor}
+		/>
+		Overwrite credit card payment processor SVG color with custom color
+	</label>
+	<p>
+		Target color can be changed in <a href="/admin/theme" class="underline">theme</a>("Order" then
+		"Credit card svg fill color" in theme)
+	</p>
 	<h2 class="text-2xl">VAT</h2>
 
 	<label class="checkbox-label">

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

@@ -6,6 +6,7 @@ import { getPublicS3DownloadLink } from '$lib/server/s3.js';
 import { uniqBy } from '$lib/utils/uniqBy.js';
 import { paymentMethods } from '$lib/server/payment-methods.js';
 import { cmsFromContent } from '$lib/server/cms.js';
+import { runtimeConfig } from '$lib/server/runtime-config.js';
 
 export async function load({ params, depends, locals }) {
 	depends(UrlDependency.Order);
@@ -75,7 +76,9 @@ export async function load({ params, depends, locals }) {
 		...(cmsOrderBottom && {
 			cmsOrderBottom,
 			cmsOrderBottomData: cmsFromContent({ content: cmsOrderBottom.content }, locals)
-		})
+		}),
+		overwriteCreditCardSvgColor: runtimeConfig.overwriteCreditCardSvgColor,
+		hideCreditCardQrCode: runtimeConfig.hideCreditCardQrCode
 	};
 }
 

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

@@ -151,7 +151,11 @@
 											>
 												<span>{t('order.paymentLink')}</span>
 												{#if payment.processor === 'sumup'}
-													<IconSumupWide class="h-12" />
+													<IconSumupWide
+														class="h-12 {data.overwriteCreditCardSvgColor
+															? 'order-creditCard-svg'
+															: ''} "
+													/>
 												{:else if payment.processor === 'stripe'}
 													<IconStripe class="h-12" />
 												{:else if payment.processor === 'paypal'}
@@ -294,7 +298,7 @@
 									/></a
 								>
 							{/if}
-							{#if payment.method === 'card'}
+							{#if payment.method === 'card' && !data.hideCreditCardQrCode}
 								<img
 									src="{$page.url.pathname}/payment/{payment.id}/qrcode"
 									class="w-96 h-96"