Refactor custom domains box

This commit is contained in:
Joshen Lim committed 2023-03-27 15:14:46 +08:00
1 parent ca1cdccdd3
commit bb81b4da93
1 file changed
+33 -37
@@ -36,46 +36,42 @@ const CustomDomainConfig = () => {
return (
<section>
<FormHeader title="Custom Domains" description="Present a branded experience to your users" />
{data?.status === '0_no_hostname_configured' ? (
{isLoading ? (
<Panel>
<Panel.Content className="space-y-6">
<CustomDomainsShimmerLoader />
</Panel.Content>
</Panel>
) : isError ? (
<Panel>
<Panel.Content className="space-y-6">
<div className="flex items-center justify-center space-x-2 py-8">
<IconAlertCircle size={16} strokeWidth={1.5} />
<p className="text-sm text-scale-1100">
Failed to retrieve custom domain configuration. Please try again later or{' '}
<Link href={`/support/new?ref=${ref}&category=sales`}>
<a className="underline">contact support</a>
</Link>
.
</p>
</div>
</Panel.Content>
</Panel>
) : data?.status === '0_no_hostname_configured' ? (
<CustomDomainsConfigureHostname />
) : data?.status === '0_not_allowed' ? (
<UpgradeToPro
icon={<IconAlertCircle size={18} strokeWidth={1.5} />}
primaryText="Custom domains are a Pro plan add-on"
projectRef={ref as string}
secondaryText={
tier === PRICING_TIER_PRODUCT_IDS.FREE
? 'To configure a custom domain for your project, please upgrade to the Pro plan with the custom domains add-on selected'
: 'To configure a custom domain for your project, please enable the add-on'
}
/>
) : (
<Panel>
{isLoading && (
<Panel.Content className="space-y-6">
<CustomDomainsShimmerLoader />
</Panel.Content>
)}
{data?.status === '0_not_allowed' && (
<Panel.Content className="space-y-6">
<UpgradeToPro
icon={<IconAlertCircle size={18} strokeWidth={1.5} />}
primaryText="Custom domains are a Pro plan add-on"
projectRef={ref as string}
secondaryText={
tier === PRICING_TIER_PRODUCT_IDS.FREE
? 'To configure a custom domain for your project, please upgrade to the Pro plan with the custom domains add-on selected'
: 'To configure a custom domain for your project, please enable the add-on'
}
/>
</Panel.Content>
)}
{isError && (
<Panel.Content className="space-y-6">
<div className="flex items-center justify-center space-x-2 py-8">
<IconAlertCircle size={16} strokeWidth={1.5} />
<p className="text-sm text-scale-1100">
Failed to retrieve custom domain configuration. Please try again later or{' '}
<Link href={`/support/new?ref=${ref}&category=sales`}>
<a className="underline">contact support</a>
</Link>
.
</p>
</div>
</Panel.Content>
)}
{isSuccess && (
<div className="flex flex-col">
{(data.status === '2_initiated' || data.status === '3_challenge_verified') && (