Function DomainStatus

apps/web/ui/BrandingView/index.tsx:382–454

({
  currentCommunity,
  api,
  dnsSettings,
}: {
  currentCommunity: SerializedAccount;
  api: ApiClient;
  dnsSettings(mounted: boolean): void;
})

}

function DomainStatus({
  currentCommunity,
  api,
  dnsSettings,
}: {
  currentCommunity: SerializedAccount;
  api: ApiClient;
  dnsSettings(mounted: boolean): void;
}) {
  const [statusText, setStatusText] = useState<string>(
    getDefaultDomainStatus(currentCommunity)
  );
  const [statusColor, setStatusColor] = useState<'green' | 'red'>(
    currentCommunity.redirectDomainPropagate ? 'green' : 'red'
  );
  const [loading, setLoading] = useState(false);

  const validateDomain = async () => {
    const form = document.getElementById('branding-form') as HTMLFormElement;
    if (!form) {
      return;
    }

    try {
      setLoading(true);
      const domain = stripProtocol(form.redirectDomain.value).toLowerCase();

      if (domain !== currentCommunity.redirectDomain) {
        await api.updateAccount({
          accountId: currentCommunity.id,
          redirectDomain: domain,
        });
        dnsSettings(true);
        currentCommunity.redirectDomain = domain;
      }

      const result = await api.validateDomain({
        domain,
        accountId: currentCommunity.id,
      });

      if (result.ok) {
        setStatusColor('green');
        setStatusText('Custom domain is working.');
      } else {
        setStatusColor('red');
        setStatusText(result.cause || 'Invalid, try again later.');
      }
    } catch (error: any) {
      setStatusColor('red');
      setStatusText(error.details || 'Something went wrong.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className={styles.domainValidationWrapper}>