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

B2Bitcoin · Dec 5, 2024 · e0d791d · e0d791d
1 parent e807fd1
commit e0d791d
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 3 deletions.
diff --git a/src/lib/components/CmsForm.svelte b/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" />

diff --git a/src/lib/types/CmsPage.ts b/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;

diff --git a/src/routes/(app)/admin[[hash=admin_hash]]/cms/[slug]/+page.server.ts b/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()
 				},

diff --git a/src/routes/(app)/admin[[hash=admin_hash]]/cms/[slug]/cms-schema.ts b/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()
 };
diff --git a/src/routes/(app)/admin[[hash=admin_hash]]/cms/[slug]/translations/+page.svelte b/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

diff --git a/src/routes/(app)/admin[[hash=admin_hash]]/cms/new/+page.server.ts b/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()