BrandingUpload component, return spinner while loading; SubBranding schema validation

Author: Soxasora

components/territory-branding.js

@@ -2,18 +2,30 @@ import { useToast } from '@/components/toast'
 import { SUB_BRANDING, UPSERT_SUB_BRANDING } from '@/fragments/subs'
 import { useMutation, useQuery } from '@apollo/client'
 import { subBrandingSchema } from '@/lib/validate'
-import { Form, Input, ColorPicker, SubmitButton } from '@/components/form'
+import { Form, Input, ColorPicker, SubmitButton, BrandingUpload } from '@/components/form'
 import AccordianItem from '@/components/accordian-item'
+import Moon from '@/svgs/moon-fill.svg'
 
 export default function TerritoryBrandingForm ({ sub }) {
   const [upsertSubBranding] = useMutation(UPSERT_SUB_BRANDING)
   const toaster = useToast()
 
-  const { data } = useQuery(SUB_BRANDING, {
+  const { data, loading } = useQuery(SUB_BRANDING, {
     variables: { subName: sub.name }
   })
 
-  const subBranding = data?.sub?.branding
+  if (loading) {
+    return <Moon className='spin fill-grey' style={{ width: '1rem', height: '1rem' }} />
+  }
+
+  const subBranding = data?.subBranding || {
+    title: sub.name,
+    description: sub.desc,
+    primaryColor: '#FADA5E',
+    secondaryColor: '#F6911D',
+    logoId: null,
+    faviconId: null
+  }
 
   const onSubmit = async (values) => {
     try {
@@ -23,27 +35,27 @@ export default function TerritoryBrandingForm ({ sub }) {
           branding: {
             title: values.title,
             description: values.description,
-            primaryColor: values.primary,
-            secondaryColor: values.secondary,
+            primaryColor: values.primaryColor,
+            secondaryColor: values.secondaryColor,
             logoId: values.logoId,
             faviconId: values.faviconId
           }
         }
       })
-      toaster.success('Branding updated successfully')
+      toaster.success('branding updated successfully')
     } catch (error) {
       console.error(error)
-      toaster.danger('Failed to update branding', { error })
+      toaster.danger('failed to update branding', { error })
     }
   }
 
   const initialValues = {
-    title: subBranding?.title || sub?.name,
-    description: subBranding?.description || '',
-    primaryColor: subBranding?.primaryColor || '#FADA5E',
-    secondaryColor: subBranding?.secondaryColor || '#F6911D',
-    logoId: subBranding?.logoId || null,
-    faviconId: subBranding?.faviconId || null
+    title: subBranding.title,
+    description: subBranding.description,
+    primaryColor: subBranding.primaryColor,
+    secondaryColor: subBranding.secondaryColor,
+    logoId: subBranding.logoId,
+    faviconId: subBranding.faviconId
   }
 
   return (
@@ -55,8 +67,8 @@ export default function TerritoryBrandingForm ({ sub }) {
       <Input label='title' name='title' />
       <Input label='description' name='description' />
       <div className='row'>
-        <ColorPicker groupClassName='col-4' label='primary color' name='primary' />
-        <ColorPicker groupClassName='col-4' label='secondary color' name='secondary' />
+        <ColorPicker groupClassName='col-4' label='primary color' name='primaryColor' />
+        <ColorPicker groupClassName='col-4' label='secondary color' name='secondaryColor' />
       </div>
       <AccordianItem
         header={<div className='fw-bold text-muted'>logo and favicon</div>}
@@ -65,15 +77,13 @@ export default function TerritoryBrandingForm ({ sub }) {
             <div className='col-2'>
               <label className='form-label'>logo</label>
               <div style={{ position: 'relative', width: '100px', height: '100px', border: '1px solid #dee2e6', borderRadius: '5px', overflow: 'hidden' }}>
-                <p>placeholder</p>
-                {/* <BrandingUpload name='logoId' /> */}
+                <BrandingUpload name='logoId' />
               </div>
             </div>
             <div className='col-2'>
               <label className='form-label'>favicon</label>
               <div style={{ position: 'relative', width: '100px', height: '100px', border: '1px solid #dee2e6', borderRadius: '5px', overflow: 'hidden' }}>
-                <p>placeholder</p>
-                {/* <BrandingUpload name='faviconId' /> */}
+                <BrandingUpload name='faviconId' />
               </div>
             </div>
           </div>

lib/validate.js

@@ -365,6 +365,27 @@ export function customDomainSchema (args) {
   })
 }
 
+// Sub Branding validation schema
+// sanitize the input for correct colors and text
+export function subBrandingSchema (args) {
+  return object({
+    title: string().max(100, 'must be at most 100 characters').matches(/^[a-zA-Z0-9\s]+$/, {
+      message: 'title must only contain letters, numbers, and spaces'
+    }).nullable().trim(),
+    description: string().max(250, 'must be at most 250 characters').matches(/^[a-zA-Z0-9\s]+$/, {
+      message: 'description must only contain letters, numbers, and spaces'
+    }).nullable().trim(),
+    logoId: intValidator.nullable().positive('must be positive').integer('must be an integer'),
+    faviconId: intValidator.nullable().positive('must be positive').integer('must be an integer'),
+    primaryColor: string().matches(/^#([0-9a-fA-F]{6})$/, {
+      message: 'primary color must be a valid hex color'
+    }).nullable(),
+    secondaryColor: string().matches(/^#([0-9a-fA-F]{6})$/, {
+      message: 'secondary color must be a valid hex color'
+    }).nullable()
+  })
+}
+
 export function userSchema (args) {
   return object({
     name: nameValidator