wip: upsert sub branding, territory branding form, apply styles

- get branding with ssrApollo
- apply styles via DomainProvider
- ColorPicker, BrandingUpload components
- territory branding validation schema
- fragments, resolvers, typedefs -- WIP

Author: Soxasora

api/resolvers/sub.js

@@ -1,5 +1,5 @@
 import { whenRange } from '@/lib/time'
-import { validateSchema, territorySchema } from '@/lib/validate'
+import { validateSchema, territorySchema, subBrandingSchema } from '@/lib/validate'
 import { decodeCursor, LIMIT, nextCursorEncoded } from '@/lib/cursor'
 import { viewGroup } from './growth'
 import { notifyTerritoryTransfer } from '@/lib/webPush'
@@ -170,6 +170,9 @@ export default {
         cursor: subs.length === limit ? nextCursorEncoded(decodedCursor, limit) : null,
         subs
       }
+    },
+    subBranding: async (parent, { subName }, { models }) => {
+      return models.subBranding.findUnique({ where: { subName } })
     }
   },
   Mutation: {
@@ -298,6 +301,28 @@ export default {
       }
 
       return await performPaidAction('TERRITORY_UNARCHIVE', data, { me, models, lnd })
+    },
+    upsertSubBranding: async (parent, { subName, branding }, { me, models }) => {
+      if (!me) {
+        throw new GqlAuthenticationError()
+      }
+
+      const sub = await models.sub.findUnique({ where: { name: subName } })
+      if (!sub) {
+        throw new GqlInputError('sub not found')
+      }
+
+      if (sub.userId !== me.id) {
+        throw new GqlInputError('you do not own this sub')
+      }
+
+      await validateSchema(subBrandingSchema, branding)
+
+      return await models.subBranding.upsert({
+        where: { subName },
+        update: { ...branding, subName },
+        create: { ...branding, subName }
+      })
     }
   },
   Sub: {

api/ssrApollo.js

@@ -16,6 +16,7 @@ import { getAuthOptions } from '@/pages/api/auth/[...nextauth]'
 import { NOFOLLOW_LIMIT } from '@/lib/constants'
 import { satsToMsats } from '@/lib/format'
 import { MULTI_AUTH_ANON, MULTI_AUTH_LIST } from '@/lib/auth'
+import { SUB_BRANDING } from '@/fragments/subs'
 
 export default async function getSSRApolloClient ({ req, res, me = null }) {
   const session = req && await getServerSession(req, res, getAuthOptions(req))
@@ -156,10 +157,15 @@ export function getGetServerSideProps (
     const subName = req.headers['x-stacker-news-subname'] || null
     let domain = null
     if (isCustomDomain && subName) {
+      const { data: { subBranding } } = await client.query({
+        query: SUB_BRANDING,
+        variables: { subName }
+      })
+      console.log('subBranding', subBranding)
       domain = {
         domainName: req.headers.host,
-        subName
-        // TODO: custom branding
+        subName,
+        branding: subBranding || null
       }
     }
 

api/typeDefs/sub.js

@@ -30,7 +30,7 @@ export default gql`
       replyCost: Int!, postTypes: [String!]!,
       billingType: String!, billingAutoRenew: Boolean!,
       moderated: Boolean!, nsfw: Boolean!): SubPaidAction!
-    setSubBranding(subName: String!, branding: SubBrandingInput): SubBranding!
+    upsertSubBranding(subName: String!, branding: SubBrandingInput): SubBranding!
   }
 
   type Sub {
@@ -59,6 +59,7 @@ export default gql`
     ncomments(when: String, from: String, to: String): Int!
     meSubscription: Boolean!
     domain: Domain
+    branding: SubBranding
     optional: SubOptional!
   }
 

components/form.js

@@ -24,7 +24,7 @@ import textAreaCaret from 'textarea-caret'
 import 'react-datepicker/dist/react-datepicker.css'
 import useDebounceCallback, { debounce } from './use-debounce-callback'
 import { FileUpload } from './file-upload'
-import { AWS_S3_URL_REGEXP } from '@/lib/constants'
+import { AWS_S3_URL_REGEXP, MEDIA_URL } from '@/lib/constants'
 import { whenRange } from '@/lib/time'
 import { useFeeButton } from './fee-button'
 import Thumb from '@/svgs/thumb-up-fill.svg'
@@ -42,6 +42,7 @@ import dynamic from 'next/dynamic'
 import { qrImageSettings } from './qr'
 import { useIsClient } from './use-client'
 import PageLoading from './page-loading'
+import Avatar from './avatar'
 
 export class SessionRequiredError extends Error {
   constructor () {
@@ -1532,5 +1533,54 @@ export function MultiInput ({
   )
 }
 
+export function ColorPicker ({ label, groupClassName, name, ...props }) {
+  const [field, , helpers] = useField({ ...props, name })
+
+  useEffect(() => {
+    helpers.setValue(field.value)
+  }, [field.value])
+
+  return (
+    <FormGroup label={label} className={groupClassName}>
+      <ClientInput
+        type='color'
+        {...field}
+        {...props}
+        onChange={(formik, e) => {
+          field.onChange(e)
+          if (props.onChange) {
+            props.onChange(formik, e)
+          }
+        }}
+      />
+    </FormGroup>
+  )
+}
+
+export function BrandingUpload ({ label, groupClassName, name, ...props }) {
+  const [field, , helpers] = useField({ ...props, name })
+  const [tempId, setTempId] = useState(field.value)
+
+  const handleSuccess = useCallback((id) => {
+    setTempId(id)
+    helpers.setValue(id)
+  }, [helpers])
+
+  return (
+    <FormGroup label={label} className={groupClassName}>
+      <img
+        src={tempId ? `${MEDIA_URL}/${tempId}` : '/favicon.png'}
+        alt={name}
+        width={100}
+        height={100}
+        style={{ objectFit: 'contain', position: 'relative' }}
+      />
+      <Avatar
+        onSuccess={handleSuccess}
+      />
+    </FormGroup>
+  )
+}
+
 export const ClientInput = Client(Input)
 export const ClientCheckbox = Client(Checkbox)

components/territory-branding.js

@@ -0,0 +1,87 @@
+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 AccordianItem from '@/components/accordian-item'
+
+export default function TerritoryBrandingForm ({ sub }) {
+  const [upsertSubBranding] = useMutation(UPSERT_SUB_BRANDING)
+  const toaster = useToast()
+
+  const { data } = useQuery(SUB_BRANDING, {
+    variables: { subName: sub.name }
+  })
+
+  const subBranding = data?.sub?.branding
+
+  const onSubmit = async (values) => {
+    try {
+      await upsertSubBranding({
+        variables: {
+          subName: sub.name,
+          branding: {
+            title: values.title,
+            description: values.description,
+            primaryColor: values.primary,
+            secondaryColor: values.secondary,
+            logoId: values.logoId,
+            faviconId: values.faviconId
+          }
+        }
+      })
+      toaster.success('Branding updated successfully')
+    } catch (error) {
+      console.error(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
+  }
+
+  return (
+    <Form
+      initial={initialValues}
+      schema={subBrandingSchema}
+      onSubmit={onSubmit}
+    >
+      <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' />
+      </div>
+      <AccordianItem
+        header={<div className='fw-bold text-muted'>logo and favicon</div>}
+        body={
+          <div className='row'>
+            <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' /> */}
+              </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' /> */}
+              </div>
+            </div>
+          </div>
+        }
+      />
+      <div className='mt-3 d-flex justify-content-end'>
+        <SubmitButton variant='primary'>save branding</SubmitButton>
+      </div>
+    </Form>
+  )
+}

components/territory-domains.js

@@ -10,6 +10,7 @@ import Moon from '@/svgs/moon-fill.svg'
 import ClipboardLine from '@/svgs/clipboard-line.svg'
 import RefreshLine from '@/svgs/refresh-line.svg'
 import styles from './item.module.css'
+import TerritoryBrandingForm from './territory-branding'
 
 // Domain context for custom domains
 const DomainContext = createContext({
@@ -25,12 +26,17 @@ export const DomainProvider = ({ domain: ssrDomain, children }) => {
 
   // wip-brandings: this is a sketch/hack to set the branding colors
   const setBrandingColors = (branding) => {
-    document.documentElement.style.setProperty('--bs-transition', 'all 0.3s ease')
+    document.documentElement.style.setProperty('--bs-transition', 'all 1s ease')
     if (branding.primaryColor) {
-      document.documentElement.style.setProperty('--theme-primary', branding.primaryColor)
+      document.documentElement.style.setProperty('--bs-primary', branding.primaryColor)
+      // wip-brandings: set the primary color to the navbar-brand svg
+      const navbarBrand = document.querySelector('.navbar-brand')
+      if (navbarBrand) {
+        navbarBrand.style.fill = branding.primaryColor
+      }
     }
     if (branding.secondaryColor) {
-      document.documentElement.style.setProperty('--theme-secondary', branding.secondaryColor)
+      document.documentElement.style.setProperty('--bs-secondary', branding.secondaryColor)
     }
 
     return () => {
@@ -222,6 +228,7 @@ export default function CustomDomainForm ({ sub }) {
       {data?.domain && data?.domain?.status !== 'ACTIVE' && (
         <DomainGuidelines domain={data?.domain} />
       )}
+      {data?.domain?.status === 'ACTIVE' && <TerritoryBrandingForm sub={sub} />}
     </>
   )
 }

fragments/subs.js

@@ -155,7 +155,7 @@ export const TOP_SUBS = gql`
   }
 `
 
-export const SUB_BRANDING = gql`
+export const SUB_BRANDING_FIELDS = gql`
   fragment SubBrandingFields on SubBranding {
     title
     description
@@ -165,3 +165,21 @@ export const SUB_BRANDING = gql`
     secondaryColor
   }
 `
+
+export const SUB_BRANDING = gql`
+  ${SUB_BRANDING_FIELDS}
+  query SubBranding($subName: String!) {
+    subBranding(subName: $subName) {
+      ...SubBrandingFields
+    }
+  }
+`
+
+export const UPSERT_SUB_BRANDING = gql`
+  ${SUB_BRANDING_FIELDS}
+  mutation upsertSubBranding($subName: String!, $branding: SubBrandingInput) {
+    upsertSubBranding(subName: $subName, branding: $branding) {
+      ...SubBrandingFields
+    }
+  }
+`