Announcement Setting Implementation

package.json

@@ -32,6 +32,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
+    "dompurify": "^3.4.13",
     "holy-loader": "^2.3.14",
     "husky": "^9.1.7",
     "input-otp": "^1.4.2",

src/api/backend/const.ts

@@ -11,13 +11,14 @@ export const localeDir: Record<Locale, 'ltr' | 'rtl'> = {
 
 export const mediaTypes = ['image', 'video', 'audio', 'raw'] as const;
 
-export const mediaFolders = ['product', 'variant', 'brand', 'userReview'] as const;
+export const mediaFolders = ['product', 'variant', 'brand', 'userReview', 'announcement'] as const;
 
 export const mediaFoldersTypeMap = {
   product: 'all',
   variant: 'image',
   brand: 'image',
   userReview: 'image',
+  announcement: 'all',
 } as const satisfies Record<MediaFolder, MediaFormat | MediaFormat[]>;
 
 export const mediaRawFormats = ['.pdf', '.csv', '.txt', '.zip', '.doc', '.docx', '.xls', '.xlsx'] as const;

src/api/backend/schemas/settings/announcementSchema.ts

@@ -0,0 +1,14 @@
+import z from 'zod';
+
+import { optionalLocalizedSchema } from '../localizedSchema';
+import { MediaByFolder } from '../../types';
+
+export const announcementSchema = z.object({
+  enabled: z.boolean(),
+  message: optionalLocalizedSchema.optional(),
+  media: z.array(z.custom<MediaByFolder<'announcement'>>()).optional(),
+  disableAt: z.string().nullable().optional(),
+  intervalHours: z.number().int().min(0).optional(),
+});
+
+export type AnnouncementSchema = z.infer<typeof announcementSchema>;

src/api/backend/schemas/settings/index.ts

@@ -2,9 +2,11 @@ import z, { ZodObject } from 'zod';
 
 import { AppSettingsKey } from '@/api';
 import { maintenanceModeSchema } from './maintenanceModeSchema';
+import { announcementSchema } from './announcementSchema';
 
 export const appSettingsSchemas = {
   maintenanceMode: maintenanceModeSchema,
+  announcement: announcementSchema,
 } as const satisfies Record<AppSettingsKey, ZodObject>;
 
 export type AppSettingsSchemas = {

src/api/backend/schemas/settings/maintenanceModeSchema.ts

@@ -1,4 +1,5 @@
 import z from 'zod';
+
 import { optionalLocalizedSchema } from '../localizedSchema';
 
 export const maintenanceModeSchema = z.object({

src/api/backend/types.ts

@@ -277,6 +277,14 @@ export interface AppSettings {
     disableOnCountdownEnd?: boolean;
     countdown?: string;
   };
+  announcement: {
+    enabled: boolean;
+    message: Localized;
+    mediaIds: number[];
+    intervalHours: number;
+    media?: Media<'image' | 'video'>[];
+    disableAt?: string | null;
+  };
 }
 
 export type AppSettingsKey = keyof AppSettings;

src/app/(hydration)/(base)/(store)/products/[id]/page.tsx

@@ -6,7 +6,7 @@ import {
   ProductForm,
   SelectProductRelations,
   ProductStatusSelectMenu,
-  ProductUploadMedia,
+  ReorderedMediaUpload,
   ProductVariants,
   LocalizedForm,
   ProductFormCTA,
@@ -49,7 +49,7 @@ export default async function EditProduct(props: PagePropsWithParams<{ id: strin
             <LocalizedForm<ProductSchema> name="description" type="richtext" />
           </section>
 
-          <ProductUploadMedia />
+          <ReorderedMediaUpload folder="product" className="p-4" />
 
           <ProductVariants />
         </div>

src/app/(hydration)/(base)/(store)/products/add/page.tsx

@@ -5,7 +5,7 @@ import {
   ProductForm,
   SelectProductRelations,
   ProductStatusSelectMenu,
-  ProductUploadMedia,
+  ReorderedMediaUpload,
   ProductVariants,
   LocalizedForm,
   ProductFormCTA,
@@ -34,7 +34,7 @@ export default async function AddProduct() {
             <LocalizedForm<ProductSchema> name="description" type="richtext" />
           </section>
 
-          <ProductUploadMedia />
+          <ReorderedMediaUpload folder="product" className="p-4" />
 
           <ProductVariants />
         </div>

src/app/(hydration)/(base)/settings/page.tsx

@@ -2,7 +2,7 @@ import { Metadata } from 'next';
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 
 import { useAppSettingsQuery } from '@/hooks';
-import { MaintenanceMode } from '@/components';
+import { Announcement, MaintenanceMode } from '@/components';
 
 export const metadata: Metadata = { title: 'Gamers Core | Settings' };
 
@@ -14,6 +14,8 @@ export default async function Settings() {
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
       <MaintenanceMode {...settings.maintenanceMode} />
+
+      <Announcement {...settings.announcement} />
     </HydrationBoundary>
   );
 }

src/components/HTMLRender.tsx

@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import DOMPurify from 'dompurify';
 
 import { cn } from '@/lib/utils';
 
@@ -10,7 +11,7 @@ interface HTMLRenderProps {
 export const HTMLRender = (displayName: string) => {
   const Component = memo(({ html, className, ...props }: HTMLRenderProps) => (
     <div
-      dangerouslySetInnerHTML={{ __html: html }}
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }}
       className={cn(
         'prose prose-sm md:prose-base dark:prose-invert max-w-none prose-li:leading-normal prose-p:mt-0 prose-p:mb-0 prose-ul:mb-0 prose-ul:mt-0',
         className,