🦋 allow employee-only alternative desktop content on CMS page #1628

src/lib/components/CmsForm.svelte

@@ -14,9 +14,11 @@
 		fullScreen: boolean;
 		hideFromSEO?: boolean;
 		hasMobileContent?: boolean;
+		hasEmployeeContent?: boolean;
 		maintenanceDisplay: boolean;
 		content: string;
 		mobileContent?: string;
+		employeeContent?: string;
 		metas?: {
 			name: string;
 			content: string;
@@ -32,7 +34,10 @@
 	let hideFromSEO = cmsPage?.hideFromSEO || false;
 	let hasCustomMeta = !!cmsPage?.metas?.length;
 	let hasMobileContent = cmsPage?.hasMobileContent || false;
+	let hasEmployeeContent = cmsPage?.hasEmployeeContent || false;
 	let mobileContent = cmsPage?.mobileContent || '';
+	let employeeContent = cmsPage?.employeeContent || '';
+
 	function confirmDelete(event: Event) {
 		if (!confirm('Would you like to delete this CMS page?')) {
 			event.preventDefault();
@@ -276,6 +281,37 @@
 			/>
 		</label>
 	{/if}
+	<label class="checkbox-label">
+		<input
+			type="checkbox"
+			name="hasEmployeeContent"
+			bind:checked={hasEmployeeContent}
+			class="form-checkbox"
+		/>
+		This page has a subtitution target for employee
+	</label>
+	{#if hasEmployeeContent}
+		<label class="block w-full mt-4">
+			Employee content
+			<Editor
+				scriptSrc="/tinymce/tinymce.js"
+				bind:value={employeeContent}
+				conf={{ plugins: TINYMCE_PLUGINS, toolbar: TINYMCE_TOOLBAR }}
+			/>
+
+			Raw HTML
+
+			<textarea
+				name="employeeContent"
+				cols="30"
+				rows="10"
+				maxlength={MAX_CONTENT_LIMIT}
+				placeholder="HTML content"
+				class="form-input block w-full"
+				bind:value={employeeContent}
+			/>
+		</label>
+	{/if}
 	<div class="flex flex-row justify-between gap-2">
 		{#if cmsPage}
 			<input type="submit" class="btn btn-blue text-white" formaction="?/update" value="Update" />

src/lib/types/CmsPage.ts

@@ -6,6 +6,7 @@ export interface CMSPageTranslatableFields {
 	shortDescription: string;
 	content: string;
 	mobileContent?: string;
+	employeeContent?: string;
 }
 
 export interface CMSPage extends Timestamps, CMSPageTranslatableFields {
@@ -14,6 +15,7 @@ export interface CMSPage extends Timestamps, CMSPageTranslatableFields {
 	maintenanceDisplay: boolean;
 	hideFromSEO?: boolean;
 	hasMobileContent?: boolean;
+	hasEmployeeContent?: boolean;
 	metas?: {
 		name: string;
 		content: string;

src/routes/(app)/+page.server.ts

@@ -4,6 +4,7 @@ import { load as catalogLoad } from './catalog/+page.server';
 import { cmsFromContent } from '$lib/server/cms';
 import { redirect } from '@sveltejs/kit';
 import { addYears } from 'date-fns';
+import { CUSTOMER_ROLE_ID } from '$lib/types/User';
 
 export const load = async ({ locals }) => {
 	const cmsPage = await collections.cmsPages.findOne(
@@ -16,6 +17,10 @@ export const load = async ({ locals }) => {
 				mobileContent: {
 					$ifNull: [`$translations.${locals.language}.mobileContent`, '$mobileContent']
 				},
+				employeeContent: {
+					$ifNull: [`$translations.${locals.language}.employeeContent`, '$employeeContent']
+				},
+				hasEmployeeContent: 1,
 				title: { $ifNull: [`$translations.${locals.language}.title`, '$title'] },
 				shortDescription: {
 					$ifNull: [`$translations.${locals.language}.shortDescription`, '$shortDescription']
@@ -36,7 +41,15 @@ export const load = async ({ locals }) => {
 	return {
 		cmsPage: omit(cmsPage, ['content']),
 		cmsData: cmsFromContent(
-			{ content: cmsPage.content, mobileContent: cmsPage.mobileContent },
+			{
+				content:
+					locals.user?.roleId !== CUSTOMER_ROLE_ID &&
+					cmsPage.hasEmployeeContent &&
+					cmsPage.employeeContent
+						? cmsPage.employeeContent
+						: cmsPage.content,
+				mobileContent: cmsPage.mobileContent
+			},
 			locals
 		),
 		layoutReset: cmsPage.fullScreen

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

@@ -2,6 +2,7 @@ import { collections } from '$lib/server/database';
 import { omit } from 'lodash-es';
 import { cmsFromContent } from '$lib/server/cms.js';
 import { error } from '@sveltejs/kit';
+import { CUSTOMER_ROLE_ID } from '$lib/types/User';
 
 export async function load({ params, locals, url }) {
 	let cmsPage = await collections.cmsPages.findOne(
@@ -18,11 +19,15 @@ export async function load({ params, locals, url }) {
 				shortDescription: {
 					$ifNull: [`$translations.${locals.language}.shortDescription`, '$shortDescription']
 				},
+				employeeContent: {
+					$ifNull: [`$translations.${locals.language}.employeeContent`, '$employeeContent']
+				},
 				fullScreen: 1,
 				maintenanceDisplay: 1,
 				hideFromSEO: 1,
 				hasMobileContent: 1,
-				metas: 1
+				metas: 1,
+				hasEmployeeContent: 1
 			}
 		}
 	);
@@ -56,15 +61,30 @@ export async function load({ params, locals, url }) {
 	}
 
 	return {
-		cmsPage: omit(cmsPage, ['content', 'mobileContent']),
+		cmsPage: omit(cmsPage, ['content', 'mobileContent', 'employeeContent']),
 		cmsData: cmsFromContent(
 			url.searchParams.get('content') === 'desktop' ||
 				!cmsPage.hasMobileContent ||
 				!cmsPage.mobileContent
-				? { content: cmsPage.content }
+				? {
+						content:
+							locals.user?.roleId !== CUSTOMER_ROLE_ID &&
+							cmsPage.hasEmployeeContent &&
+							cmsPage.employeeContent
+								? cmsPage.employeeContent
+								: cmsPage.content
+				  }
 				: url.searchParams.get('content') === 'mobile'
 				? { content: cmsPage.mobileContent }
-				: { content: cmsPage.content, mobileContent: cmsPage.mobileContent },
+				: {
+						content:
+							locals.user?.roleId !== CUSTOMER_ROLE_ID &&
+							cmsPage.hasEmployeeContent &&
+							cmsPage.employeeContent
+								? cmsPage.employeeContent
+								: cmsPage.content,
+						mobileContent: cmsPage.mobileContent
+				  },
 			locals
 		),
 		layoutReset: cmsPage.fullScreen,

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

@@ -32,6 +32,8 @@ export const actions = {
 			hideFromSEO,
 			hasMobileContent,
 			mobileContent,
+			hasEmployeeContent,
+			employeeContent,
 			metas
 		} = z
 			.object({
@@ -40,8 +42,8 @@ export const actions = {
 				maintenanceDisplay: z.boolean({ coerce: true }),
 				hideFromSEO: z.boolean({ coerce: true }),
 				desktopDisplayOnly: z.boolean({ coerce: true }),
-				mobileDisplaySubstitution: z.boolean({ coerce: true }),
 				hasMobileContent: z.boolean({ coerce: true }),
+				hasEmployeeContent: z.boolean({ coerce: true }),
 				metas: z
 					.array(
 						z.object({
@@ -67,7 +69,9 @@ export const actions = {
 					maintenanceDisplay,
 					hideFromSEO,
 					hasMobileContent,
-					...(hasMobileContent && mobileContent && { mobileContent }),
+					...(hasMobileContent && { mobileContent }),
+					hasEmployeeContent,
+					...(hasEmployeeContent && { employeeContent }),
 					...(metas.length && { metas: metas.filter((meta) => meta.name && meta.content) }),
 					updatedAt: new Date()
 				},

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

@@ -6,5 +6,6 @@ export const cmsTranslatableSchema = {
 	title: z.string().min(1).max(MAX_NAME_LIMIT),
 	content: z.string().max(MAX_CONTENT_LIMIT),
 	shortDescription: z.string().max(MAX_SHORT_DESCRIPTION_LIMIT),
-	mobileContent: z.string().max(MAX_CONTENT_LIMIT).optional()
+	mobileContent: z.string().max(MAX_CONTENT_LIMIT).optional(),
+	employeeContent: z.string().max(MAX_CONTENT_LIMIT).optional()
 };

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

@@ -52,6 +52,17 @@
 			value={data.cmsPage.translations?.[language]?.mobileContent ?? ''}
 		/>
 	</label>
+	<label class="form-label">
+		Employee content
+		<textarea
+			name="employeeContent"
+			class="form-input"
+			rows="10"
+			maxlength={MAX_CONTENT_LIMIT}
+			placeholder={data.cmsPage.employeeContent}
+			value={data.cmsPage.translations?.[language]?.employeeContent ?? ''}
+		/>
+	</label>
 
 	<label class="form-label">
 		Short Description

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

@@ -25,6 +25,8 @@ export const actions = {
 			maintenanceDisplay,
 			hasMobileContent,
 			mobileContent,
+			hasEmployeeContent,
+			employeeContent,
 			metas
 		} = z
 			.object({
@@ -36,6 +38,8 @@ export const actions = {
 				maintenanceDisplay: z.boolean({ coerce: true }),
 				hasMobileContent: z.boolean({ coerce: true }),
 				mobileContent: z.string().max(MAX_CONTENT_LIMIT).optional(),
+				hasEmployeeContent: z.boolean({ coerce: true }),
+				employeeContent: z.string().max(MAX_CONTENT_LIMIT).optional(),
 				metas: z
 					.array(z.object({ name: z.string().trim(), content: z.string().trim() }))
 					.optional()
@@ -62,6 +66,8 @@ export const actions = {
 			maintenanceDisplay,
 			hasMobileContent,
 			...(hasMobileContent && mobileContent && { mobileContent }),
+			hasEmployeeContent,
+			...(hasEmployeeContent && employeeContent && { employeeContent }),
 			...(metas.length && { metas: metas.filter((meta) => meta.name && meta.content) }),
 			createdAt: new Date(),
 			updatedAt: new Date()

src/routes/(app)/cart/+page.server.ts

@@ -3,6 +3,7 @@ import { cmsFromContent } from '$lib/server/cms';
 import { collections, withTransaction } from '$lib/server/database';
 import { refreshAvailableStockInDb } from '$lib/server/product.js';
 import { userIdentifier, userQuery } from '$lib/server/user.js';
+import { CUSTOMER_ROLE_ID } from '$lib/types/User';
 import { error, redirect } from '@sveltejs/kit';
 
 export async function load({ parent, locals }) {
@@ -33,6 +34,10 @@ export async function load({ parent, locals }) {
 			{
 				projection: {
 					content: { $ifNull: [`$translations.${locals.language}.content`, '$content'] },
+					employeeContent: {
+						$ifNull: [`$translations.${locals.language}.employeeContent`, '$employeeContent']
+					},
+					hasEmployeeContent: 1,
 					title: { $ifNull: [`$translations.${locals.language}.title`, '$title'] },
 					shortDescription: {
 						$ifNull: [`$translations.${locals.language}.shortDescription`, '$shortDescription']
@@ -49,6 +54,10 @@ export async function load({ parent, locals }) {
 			{
 				projection: {
 					content: { $ifNull: [`$translations.${locals.language}.content`, '$content'] },
+					employeeContent: {
+						$ifNull: [`$translations.${locals.language}.employeeContent`, '$employeeContent']
+					},
+					hasEmployeeContent: 1,
 					title: { $ifNull: [`$translations.${locals.language}.title`, '$title'] },
 					shortDescription: {
 						$ifNull: [`$translations.${locals.language}.shortDescription`, '$shortDescription']
@@ -62,11 +71,31 @@ export async function load({ parent, locals }) {
 	return {
 		...(cmsBasketTop && {
 			cmsBasketTop,
-			cmsBasketTopData: cmsFromContent({ content: cmsBasketTop.content }, locals)
+			cmsBasketTopData: cmsFromContent(
+				{
+					content:
+						locals.user?.roleId !== CUSTOMER_ROLE_ID &&
+						cmsBasketTop.hasEmployeeContent &&
+						cmsBasketTop.employeeContent
+							? cmsBasketTop.employeeContent
+							: cmsBasketTop.content
+				},
+				locals
+			)
 		}),
 		...(cmsBasketBottom && {
 			cmsBasketBottom,
-			cmsBasketBottomData: cmsFromContent({ content: cmsBasketBottom.content }, locals)
+			cmsBasketBottomData: cmsFromContent(
+				{
+					content:
+						locals.user?.roleId !== CUSTOMER_ROLE_ID &&
+						cmsBasketBottom.hasEmployeeContent &&
+						cmsBasketBottom.employeeContent
+							? cmsBasketBottom.employeeContent
+							: cmsBasketBottom.content
+				},
+				locals
+			)
 		})
 	};
 }

src/routes/(app)/checkout/+page.server.ts

@@ -8,7 +8,7 @@ import { emailsEnabled } from '$lib/server/email';
 import { runtimeConfig } from '$lib/server/runtime-config';
 import { checkCartItems, getCartFromDb } from '$lib/server/cart.js';
 import { userIdentifier, userQuery } from '$lib/server/user.js';
-import { POS_ROLE_ID } from '$lib/types/User.js';
+import { CUSTOMER_ROLE_ID, POS_ROLE_ID } from '$lib/types/User.js';
 import { zodNpub } from '$lib/server/nostr.js';
 import type { JsonObject } from 'type-fest';
 import { omit, set } from 'lodash-es';
@@ -39,6 +39,10 @@ export async function load({ parent, locals }) {
 			{
 				projection: {
 					content: { $ifNull: [`$translations.${locals.language}.content`, '$content'] },
+					employeeContent: {
+						$ifNull: [`$translations.${locals.language}.employeeContent`, '$employeeContent']
+					},
+					hasEmployeeContent: 1,
 					title: { $ifNull: [`$translations.${locals.language}.title`, '$title'] },
 					shortDescription: {
 						$ifNull: [`$translations.${locals.language}.shortDescription`, '$shortDescription']
@@ -55,6 +59,10 @@ export async function load({ parent, locals }) {
 			{
 				projection: {
 					content: { $ifNull: [`$translations.${locals.language}.content`, '$content'] },
+					employeeContent: {
+						$ifNull: [`$translations.${locals.language}.employeeContent`, '$employeeContent']
+					},
+					hasEmployeeContent: 1,
 					title: { $ifNull: [`$translations.${locals.language}.title`, '$title'] },
 					shortDescription: {
 						$ifNull: [`$translations.${locals.language}.shortDescription`, '$shortDescription']
@@ -92,11 +100,31 @@ export async function load({ parent, locals }) {
 		noProBilling: runtimeConfig.noProBilling,
 		...(cmsCheckoutTop && {
 			cmsCheckoutTop,
-			cmsCheckoutTopData: cmsFromContent({ content: cmsCheckoutTop.content }, locals)
+			cmsCheckoutTopData: cmsFromContent(
+				{
+					content:
+						locals.user?.roleId !== CUSTOMER_ROLE_ID &&
+						cmsCheckoutTop.hasEmployeeContent &&
+						cmsCheckoutTop.employeeContent
+							? cmsCheckoutTop.employeeContent
+							: cmsCheckoutTop.content
+				},
+				locals
+			)
 		}),
 		...(cmsCheckoutBottom && {
 			cmsCheckoutBottom,
-			cmsCheckoutBottomData: cmsFromContent({ content: cmsCheckoutBottom.content }, locals)
+			cmsCheckoutBottomData: cmsFromContent(
+				{
+					content:
+						locals.user?.roleId !== CUSTOMER_ROLE_ID &&
+						cmsCheckoutBottom.hasEmployeeContent &&
+						cmsCheckoutBottom.employeeContent
+							? cmsCheckoutBottom.employeeContent
+							: cmsCheckoutBottom.content
+				},
+				locals
+			)
 		}),
 		defaultOnLocation: runtimeConfig.defaultOnLocation,
 		desiredPaymentTimeout: runtimeConfig.desiredPaymentTimeout