+
custom domain
+ {domain && (
+
+ {status !== 'HOLD'
+ ? (
+ <>
+ {getStatusBadge('CNAME', records?.CNAME?.status)}
+ {getStatusBadge('SSL', records?.SSL?.status)}
+ >
+ )
+ : (
+ <>
+ HOLD
+
+
+
+ >
+ )}
+ {polling && }
+
+ )}
+
+ )
+}
+
+const DomainGuidelines = ({ domain }) => {
+ const { records } = domain || {}
+
+ const dnsRecord = ({ record }) => {
+ return (
+
+ {records?.CNAME?.status === 'PENDING' && (
+
+
Step 1: Verify your domain
+
Add the following DNS record to verify ownership of your domain:
+
CNAME
+ {dnsRecord({ record: records?.CNAME })}
+
+ )}
+ {records?.SSL?.status === 'PENDING' && (
+
+
Step 2: Prepare your domain for SSL
+
We issued an SSL certificate for your domain. To validate it, add the following CNAME record:
+
CNAME
+ {dnsRecord({ record: records?.SSL })}
+
+ )}
+
+ )
+}
+
+export default function CustomDomainForm ({ sub }) {
+ const [setDomain] = useMutation(SET_DOMAIN)
+
+ // Get the custom domain and poll for changes
+ const { data, refetch } = useQuery(GET_DOMAIN, SSR
+ ? {}
+ : {
+ variables: { subName: sub.name },
+ pollInterval: NORMAL_POLL_INTERVAL,
+ nextFetchPolicy: 'cache-and-network',
+ onCompleted: ({ domain }) => {
+ if (domain?.status !== 'PENDING') {
+ return { pollInterval: 0 }
+ }
+ }
+ })
+ const toaster = useToast()
+
+ const { domainName, status } = data?.domain || {}
+ const polling = status === 'PENDING'
+
+ // Update the custom domain
+ const onSubmit = async ({ domainName }) => {
+ try {
+ await setDomain({
+ variables: {
+ subName: sub.name,
+ domainName
+ }
+ })
+ refetch()
+ if (domainName) {
+ toaster.success('started domain verification')
+ } else {
+ toaster.success('domain removed successfully')
+ }
+ } catch (error) {
+ toaster.danger(error.message)
+ }
+ }
+
+ return (
+ <>
+