Community request - external resource (hyperlink) as a digital file #… (

#1685)

src/lib/components/ProductForm.svelte

@@ -96,6 +96,9 @@
 	let errorMessage = '';
 	$: variationLines = product.variations?.length ? product.variations?.length : 2;
 	let productCtaLines = product.cta?.length ? product.cta.length : 3;
+	let externalResourcesLines = product.externalResources?.length
+		? product.externalResources?.length
+		: 3;
 	if (product._id && isNew) {
 		product.name = product.name + ' (duplicate)';
 		product._id = generateId(product.name, false);
@@ -1003,6 +1006,52 @@
 		<button class="btn btn-gray self-start" on:click={() => (productCtaLines += 1)} type="button"
 			>Add CTAs
 		</button>
+
+		<h3 class="text-xl">Add external resource</h3>
+		<p class="font-light">
+			Resources from hyperlink will be treated as digital file(The link will be displayed on
+			checkout and will clickable once the order is fully paid)
+		</p>
+		{#each [...(product.externalResources || []), ...Array(externalResourcesLines).fill( { href: '', label: '' } )].slice(0, externalResourcesLines) as link, i}
+			<div class="flex gap-4">
+				<label class="form-label">
+					Text
+					<input
+						type="text"
+						name="externalResources[{i}].label"
+						class="form-input"
+						maxlength="60"
+						value={link.label}
+					/>
+				</label>
+				<label class="form-label">
+					Url
+					<input
+						type="text"
+						name="externalResources[{i}].href"
+						class="form-input"
+						value={link.href}
+					/>
+				</label>
+				<button
+					type="button"
+					class="self-start mt-8"
+					on:click={() => {
+						(product.externalResources = product.externalResources?.filter(
+							(externalResourceLink) =>
+								link.href !== externalResourceLink.href && link.label !== externalResourceLink.label
+						)),
+							(externalResourcesLines -= 1);
+					}}>🗑️</button
+				>
+			</div>
+		{/each}
+		<button
+			class="btn btn-gray self-start"
+			on:click={() => (externalResourcesLines += 1)}
+			type="button"
+			>Add external resource
+		</button>
 		{#if !isNew}
 			<label class="block w-full mt-4">
 				Add CMS code and widgets before product page core

src/lib/components/icons/IconDownloadWindow.svelte

@@ -0,0 +1,13 @@
+<svg
+	{...$$restProps}
+	width="1em"
+	height="1em"
+	viewBox="0 0 32 32"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M0 26.016q0 2.496 1.76 4.224t4.256 1.76h4.992l-2.496-4h-2.496q-0.832 0-1.44-0.576t-0.576-1.408v-14.016h24v14.016q0 0.832-0.576 1.408t-1.408 0.576h-2.528l-2.496 4h5.024q2.464 0 4.224-1.76t1.76-4.224v-20q0-2.496-1.76-4.256t-4.224-1.76h-20q-2.496 0-4.256 1.76t-1.76 4.256v20zM4 10.016v-4q0-0.832 0.576-1.408t1.44-0.608h20q0.8 0 1.408 0.608t0.576 1.408v4h-24zM6.016 8h1.984v-1.984h-1.984v1.984zM10.016 24l5.984 8 6.016-8h-4v-8h-4v8h-4zM10.016 8h1.984v-1.984h-1.984v1.984zM14.016 8h12v-1.984h-12v1.984z"
+		fill="currentColor"
+	></path>
+</svg>

src/lib/components/icons/IconExternalNewWindowOpen.svelte

@@ -0,0 +1,17 @@
+<svg
+	{...$$restProps}
+	width="1em"
+	height="1em"
+	viewBox="0 0 64 64"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M36.026,20.058l-21.092,0c-1.65,0 -2.989,1.339 -2.989,2.989l0,25.964c0,1.65 1.339,2.989 2.989,2.989l26.024,0c1.65,0 2.989,-1.339 2.989,-2.989l0,-20.953l3.999,0l0,21.948c0,3.308 -2.686,5.994 -5.995,5.995l-28.01,0c-3.309,0 -5.995,-2.687 -5.995,-5.995l0,-27.954c0,-3.309 2.686,-5.995 5.995,-5.995l22.085,0l0,4.001Z"
+		fill="currentColor"
+	/>
+	<path
+		d="M55.925,25.32l-4.005,0l0,-10.481l-27.894,27.893l-2.832,-2.832l27.895,-27.895l-10.484,0l0,-4.005l17.318,0l0.002,0.001l0,17.319Z"
+		fill="currentColor"
+	/>
+</svg>

src/lib/translations/en.json

@@ -467,6 +467,9 @@
 		"discount": {
 			"title": "Discount"
 		},
+		"externalResources": {
+			"title": "External resource"
+		},
 		"informSeller": "Inform seller",
 		"linkReminder": "Keep this link: <0></0> to access the order later.",
 		"list": {

src/lib/translations/es-sv.json

@@ -467,6 +467,9 @@
 		"discount": {
 			"title": "Descuento"
 		},
+		"externalResources": {
+			"title": "Recurso externo"
+		},
 		"informSeller": "Informar al vendedor",
 		"linkReminder": "Guarda este enlace: <0></0> para acceder al pedido más tarde.",
 		"list": {

src/lib/translations/fr.json

@@ -467,6 +467,9 @@
 		"discount": {
 			"title": "Rabais"
 		},
+		"externalResources": {
+			"title": "Ressource externe"
+		},
 		"informSeller": "Notifier le vendeur",
 		"linkReminder": "Conservez ce lien : <0></0> pour accéder à la commande ultérieurement.",
 		"list": {

src/lib/translations/it.json

@@ -467,6 +467,9 @@
 		"discount": {
 			"title": "Sconto"
 		},
+		"externalResources": {
+			"title": "Risorsa esterna"
+		},
 		"informSeller": "Informa il commerciante",
 		"linkReminder": "Conserva questo link: <0></0> per accedere all'ordine in seguito.",
 		"list": {

src/lib/translations/nl.json

@@ -467,6 +467,9 @@
 		"discount": {
 			"title": "Korting"
 		},
+		"externalResources": {
+			"title": "Externe bron"
+		},
 		"informSeller": "Verkoper informeren",
 		"linkReminder": "Bewaar deze link: <0></0> om later toegang te krijgen tot de bestelling.",
 		"list": {

src/lib/types/Product.ts

@@ -19,6 +19,10 @@ export interface ProductTranslatableFields {
 		href: string;
 		fallback?: boolean;
 	}[];
+	externalResources?: {
+		label: string;
+		href: string;
+	}[];
 	variationLabels?: {
 		names: Record<string, string>;
 		values: Record<string, Record<string, string>>;

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

@@ -199,6 +199,9 @@ export const actions: Actions = {
 						},
 						tagIds: parsed.tagIds,
 						cta: parsed.cta?.filter((ctaLink) => ctaLink.label && ctaLink.href),
+						externalResources: parsed.externalResources?.filter(
+							(externalResourceLink) => externalResourceLink.label && externalResourceLink.href
+						),
 						contentBefore: parsed.contentBefore,
 						contentAfter: parsed.contentAfter,
 						mobile: {

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

@@ -31,6 +31,7 @@ export const actions = {
 				language: z.enum(locales as [LanguageKey, ...LanguageKey[]]),
 				...mapObject(pick(productBaseSchema(), keys), (val) => val.optional()),
 				cta: productBaseSchema().cta.optional(),
+				externalResources: productBaseSchema().externalResources.optional(),
 				variationLabels: z
 					.object({
 						names: z.record(z.string().trim(), z.string().trim()),
@@ -52,6 +53,12 @@ export const actions = {
 			rest.cta = rest.cta.filter((ctaLink) => ctaLink.label && ctaLink.href);
 		}
 
+		if (rest.externalResources) {
+			rest.externalResources = rest.externalResources.filter(
+				(externalResourceLink) => externalResourceLink.label && externalResourceLink.href
+			);
+		}
+
 		await collections.products.updateOne(
 			{
 				_id: params.id

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

@@ -133,6 +133,32 @@
 			</label>
 		</div>
 	{/each}
+	<h2 class="text-2xl">External Resource Hyperlinks</h2>
+
+	{#each [...(data.product.translations?.[language]?.externalResources || []), ...Array(3).fill( { href: '', label: '' } )].slice(0, 3) as link, i}
+		<div class="flex gap-4">
+			<label class="form-label">
+				Text
+				<input
+					type="text"
+					name="externalResources[{i}].label"
+					class="form-input"
+					value={link.label}
+					placeholder={data.product.externalResources?.[i]?.label}
+				/>
+			</label>
+			<label class="form-label">
+				Url
+				<input
+					type="text"
+					name="externalResources[{i}].href"
+					class="form-input"
+					value={link.href}
+					placeholder={data.product.externalResources?.[i]?.href}
+				/>
+			</label>
+		</div>
+	{/each}
 
 	{#if data.product.hasSellDisclaimer}
 		<label class="form-label">

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

@@ -206,6 +206,9 @@ export const actions: Actions = {
 							},
 							tagIds: parsed.tagIds,
 							cta: parsed.cta?.filter((ctaLink) => ctaLink.label && ctaLink.href),
+							externalResources: parsed.externalResources?.filter(
+								(externalResourceLink) => externalResourceLink.label && externalResourceLink.href
+							),
 							...(parsed.standalone && { hasVariations: parsed.hasVariations }),
 							...(parsed.standalone &&
 								parsed.hasVariations && {
@@ -389,6 +392,7 @@ export const actions: Actions = {
 					}),
 					tagIds: product.tagIds,
 					cta: product.cta,
+					externalResources: product.externalResources,
 					...(parsed.standalone && { hasVariations: parsed.hasVariations }),
 					...(parsed.standalone &&
 						parsed.hasVariations && {

src/routes/(app)/admin[[hash=admin_hash]]/product/product-schema.ts

@@ -59,6 +59,15 @@ export const productBaseSchema = () => ({
 		)
 		.optional()
 		.default([]),
+	externalResources: z
+		.array(
+			z.object({
+				href: z.string().trim(),
+				label: z.string().trim()
+			})
+		)
+		.optional()
+		.default([]),
 	hasVariations: z.boolean({ coerce: true }).default(false),
 	variations: z
 		.array(

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

@@ -21,6 +21,8 @@
 	import CmsDesign from '$lib/components/CmsDesign.svelte';
 	import Picture from '$lib/components/Picture.svelte';
 	import IconStripe from '$lib/components/icons/IconStripe.svelte';
+	import IconDownloadWindow from '$lib/components/icons/IconDownloadWindow.svelte';
+	import IconExternalNewWindowOpen from '$lib/components/icons/IconExternalNewWindowOpen.svelte';
 
 	let currentDate = new Date();
 	export let data;
@@ -473,7 +475,8 @@
 				<h2 class="text-2xl">{t('product.digitalFiles.title')}</h2>
 				<ul>
 					{#each data.digitalFiles as digitalFile}
-						<li>
+						<li class="flex flex-row gap-2">
+							<IconDownloadWindow class="mt-1 body-hyperlink" />
 							{#if digitalFile.link}
 								<a href={digitalFile.link} class="body-hyperlink hover:underline" target="_blank"
 									>{digitalFile.name}</a
@@ -485,7 +488,25 @@
 					{/each}
 				</ul>
 			{/if}
-
+			{#if data.order.items.flatMap((item) => item.product.externalResources).length}
+				<h2 class="text-2xl">{t('order.externalResources.title')}</h2>
+				<ul>
+					{#each data.order.items.flatMap((item) => item.product.externalResources) as externalResource}
+						<li class="flex flex-row gap-2">
+							<IconExternalNewWindowOpen class="mt-1 body-hyperlink" />
+							{#if externalResource?.href}
+								<a
+									href={externalResource?.href}
+									class="body-hyperlink hover:underline"
+									target="_blank">{externalResource?.label}</a
+								>
+							{:else}
+								{externalResource?.label}
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			{/if}
 			{#if data.order.vatFree}
 				<p>{t('order.vatFree', { reason: data.order.vatFree.reason })}</p>
 			{/if}

src/routes/(app)/order/[id]/fetchOrderForUser.ts

@@ -137,7 +137,11 @@ export async function fetchOrderForUser(orderId: string) {
 				shipping: item.product.shipping,
 				paymentMethods: item.product.paymentMethods,
 				isTicket: item.product.isTicket,
-				variationLabels: item.product.variationLabels
+				variationLabels: item.product.variationLabels,
+				externalResources: item.product.externalResources?.map((externalResource) => ({
+					label: externalResource.label,
+					href: order.status === 'paid' ? externalResource.href : undefined
+				}))
 			},
 			vatRate: item.vatRate,
 			...(item.customPrice && { customPrice: item.customPrice }),