fix form submit; update Sub onSubmit

Author: Soxasora

components/territory-domains.js

@@ -1,10 +1,10 @@
-import { useState } from 'react'
 import { Badge } from 'react-bootstrap'
 import { Form, Input, SubmitButton } from './form'
 import { gql, useMutation } from '@apollo/client'
 import Info from './info'
 import { customDomainSchema } from '@/lib/validate'
 import ActionTooltip from './action-tooltip'
+import { useToast } from '@/components/toast'
 
 const UPDATE_CUSTOM_DOMAIN = gql`
   mutation UpdateCustomDomain($subName: String!, $domain: String!) {
@@ -17,23 +17,19 @@ const UPDATE_CUSTOM_DOMAIN = gql`
 
 // TODO: verification states should refresh
 export default function CustomDomainForm ({ sub }) {
-  const [updateCustomDomain] = useMutation(UPDATE_CUSTOM_DOMAIN)
-  const [error, setError] = useState(null)
-  const [success, setSuccess] = useState(false)
+  const [updateCustomDomain] = useMutation(UPDATE_CUSTOM_DOMAIN, {
+    refetchQueries: ['Sub']
+  })
+  const toaster = useToast()
 
   const onSubmit = async ({ domain }) => {
-    setError(null)
-    setSuccess(false)
-    console.log('domain', domain)
-
-    const { data } = await updateCustomDomain({
+    await updateCustomDomain({
       variables: {
         subName: sub.name,
         domain
       }
     })
-    console.log('success', data)
-    setSuccess(true)
+    toaster.success('domain updated successfully')
   }
 
   const getStatusBadge = (status) => {
@@ -70,9 +66,7 @@ export default function CustomDomainForm ({ sub }) {
         <Input
           label={
             <div className='d-flex align-items-center gap-2'>
-              <span>domain</span>
-              {error && <Info variant='danger'>error</Info>}
-              {success && <Info variant='success'>Domain settings updated successfully!</Info>}
+              <span>custom domain</span>
               {sub?.customDomain && (
                 <>
                   <div className='d-flex align-items-center gap-2'>

components/territory-form.js

@@ -288,21 +288,23 @@ export default function TerritoryForm ({ sub }) {
           />
         </div>
       </Form>
-      <AccordianItem
-        header={<div style={{ fontWeight: 'bold', fontSize: '92%' }}>personalization</div>}
-        body={
-          <>
-            <TerritoryDomains sub={sub} />
-            {sub?.customDomain?.verificationState === 'VERIFIED' &&
-              <>
-                <BootstrapForm.Label>[NOT IMPLEMENTED] branding</BootstrapForm.Label>
-                <div className='mb-3'>WIP</div>
-                <BootstrapForm.Label>[NOT IMPLEMENTED] color scheme</BootstrapForm.Label>
-                <div className='mb-3'>WIP</div>
-              </>}
-          </>
-        }
-      />
+      <div className='w-100'>
+        <AccordianItem
+          header={<div style={{ fontWeight: 'bold', fontSize: '92%' }}>advanced</div>}
+          body={
+            <>
+              <TerritoryDomains sub={sub} />
+              {sub?.customDomain?.verificationState === 'VERIFIED' &&
+                <>
+                  <BootstrapForm.Label>[NOT IMPLEMENTED] branding</BootstrapForm.Label>
+                  <div className='mb-3'>WIP</div>
+                  <BootstrapForm.Label>[NOT IMPLEMENTED] color scheme</BootstrapForm.Label>
+                  <div className='mb-3'>WIP</div>
+                </>}
+            </>
+          }
+        />
+      </div>
     </FeeButtonProvider>
   )
 }