fix: disable adding custom domain on free plan

apps/dashboard/src/lib/components/Org/Settings/Domains.svelte

@@ -1,31 +1,31 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import isValidDomain from 'is-valid-domain';
-  import { parse } from 'tldts';
-  import { Grid, Row, Column, CopyButton } from 'carbon-components-svelte';
+  import { Column, CopyButton, Grid, Row } from 'carbon-components-svelte';
+  import ArrowUpRight from 'carbon-icons-svelte/lib/ArrowUpRight.svelte';
   import Restart from 'carbon-icons-svelte/lib/Restart.svelte';
   import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';
-  import ArrowUpRight from 'carbon-icons-svelte/lib/ArrowUpRight.svelte';
+  import isValidDomain from 'is-valid-domain';
+  import { parse } from 'tldts';
 
-  import TextField from '$lib/components/Form/TextField.svelte';
+  import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';
   import TextChip from '$lib/components/Chip/Text.svelte';
   import ComingSoon from '$lib/components/ComingSoon/index.svelte';
-  import UploadImage from '$lib/components/UploadImage/index.svelte';
   import TextArea from '$lib/components/Form/TextArea.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import IconButton from '$lib/components/IconButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import UpgradeBanner from '$lib/components/Upgrade/Banner.svelte';
+  import UploadImage from '$lib/components/UploadImage/index.svelte';
+  import { blockedSubdomain } from '$lib/utils/constants/app';
+  import { sanitizeDomain, sendDomainRequest } from '$lib/utils/functions/domain';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { t } from '$lib/utils/functions/translations';
+  import { updateOrgSiteNameValidation } from '$lib/utils/functions/validator';
   import { currentOrg, isFreePlan } from '$lib/utils/store/org';
   import type { CurrentOrg } from '$lib/utils/types/org';
-  import { supabase } from '$lib/utils/functions/supabase';
-  import { blockedSubdomain } from '$lib/utils/constants/app';
-  import { snackbar } from '$lib/components/Snackbar/store';
   import SectionTitle from '../SectionTitle.svelte';
-  import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';
-  import UpgradeBanner from '$lib/components/Upgrade/Banner.svelte';
-  import IconButton from '$lib/components/IconButton/index.svelte';
-  import { updateOrgSiteNameValidation } from '$lib/utils/functions/validator';
-  import { t } from '$lib/utils/functions/translations';
-  import { sanitizeDomain, sendDomainRequest } from '$lib/utils/functions/domain';
 
   let siteName = '';
   let customDomain = '';
@@ -210,13 +210,13 @@
   $: isDomainValid = isValidDomain(sanitizeDomain(customDomain), { subdomain: true });
 </script>
 
-<Grid class="border rounded border-gray-200 dark:border-neutral-600 w-full mt-5">
-  <Row class="py-7 border-bottom-c">
+<Grid class="mt-5 w-full rounded border border-gray-200 dark:border-neutral-600">
+  <Row class="border-bottom-c py-7">
     <Column sm={2} md={2} lg={4} class="text-lg">
       <SectionTitle>{$t('components.settings.domains.add')}</SectionTitle>
     </Column>
     <Column sm={2} md={6} lg={8}>
-      <p class="text-md text-gray-500 dark:text-white mb-5">
+      <p class="text-md mb-5 text-gray-500 dark:text-white">
         {$t('settings.organization.organization_profile.custom_domain.body')}
       </p>
 
@@ -232,7 +232,7 @@
           labelClassName=""
           errorMessage={errors.siteName}
         />
-        <div class="flex items-center mb-6">
+        <div class="mb-6 flex items-center">
           <PrimaryButton
             label={$t('components.settings.domains.update')}
             className="py-4"
@@ -255,12 +255,12 @@
       </SectionTitle>
     </Column>
     <Column sm={2} md={6} lg={10}>
-      <div class="pb-10 border-bottom-c">
+      <div class="border-bottom-c pb-10">
         <!-- DNS Configuration -->
         {#if $currentOrg.customDomain}
-          <div class="flex items-center justify-between mb-4">
+          <div class="mb-4 flex items-center justify-between">
             <div class="flex items-center gap-2">
-              <p class="font-medium text-md flex items-center gap-2">
+              <p class="text-md flex items-center gap-2 font-medium">
                 {$currentOrg.customDomain}
 
                 <IconButton
@@ -293,25 +293,25 @@
             {/if}
           </div>
 
-          <div class="text-sm text-gray-500 mb-4">
+          <div class="mb-4 text-sm text-gray-500">
             {$t('components.settings.domains.dns_description')}
           </div>
 
-          <div class="flex items-center gap-10 mb-4 border rounded-md py-2 px-4">
-            <div class="h-[72px] justify-evenly flex flex-col">
-              <p class="font-light text-sm">{$t('components.settings.domains.dns_type')}</p>
-              <p class="h-[40px] flex items-center">CNAME</p>
+          <div class="mb-4 flex items-center gap-10 rounded-md border px-4 py-2">
+            <div class="flex h-[72px] flex-col justify-evenly">
+              <p class="text-sm font-light">{$t('components.settings.domains.dns_type')}</p>
+              <p class="flex h-[40px] items-center">CNAME</p>
             </div>
 
-            <div class="h-[72px] justify-evenly flex flex-col">
-              <p class="font-light text-sm">{$t('components.settings.domains.dns_name')}</p>
-              <p class="h-[40px] flex items-center">
+            <div class="flex h-[72px] flex-col justify-evenly">
+              <p class="text-sm font-light">{$t('components.settings.domains.dns_name')}</p>
+              <p class="flex h-[40px] items-center">
                 {getSubdomain()}
               </p>
             </div>
 
-            <div class="h-[72px] justify-evenly flex flex-col">
-              <p class="font-light text-sm">{$t('components.settings.domains.dns_value')}</p>
+            <div class="flex h-[72px] flex-col justify-evenly">
+              <p class="text-sm font-light">{$t('components.settings.domains.dns_value')}</p>
               <p class=" flex items-center gap-1">
                 cname.vercel-dns.com
                 <CopyButton text="cname.vercel-dns.com" />
@@ -319,7 +319,7 @@
             </div>
           </div>
 
-          <div class="flex items-center justify-between mt-5">
+          <div class="mt-5 flex items-center justify-between">
             <PrimaryButton
               className="py-4 flex items-center gap-2"
               onClick={handleRefreshCustomDomain}
@@ -346,7 +346,7 @@
           </div>
         {:else}
           <!-- Add Custom Domain -->
-          <div class="flex items-center gap-5 mb-4">
+          <div class="mb-4 flex items-center gap-5">
             <p class="font-bold">{$t('components.settings.domains.your_domain')}</p>
           </div>
           <TextField
@@ -359,11 +359,11 @@
             isDisabled={$isFreePlan}
           />
 
-          <div class="flex items-center mt-5">
+          <div class="mt-5 flex items-center">
             <PrimaryButton
               label={$t('components.settings.domains.save')}
               className="py-4"
-              onClick={handleSaveCustomDomain}
+              onClick={$isFreePlan ? () => {} : handleSaveCustomDomain}
               isLoading={isCustomDomainLoading}
               isDisabled={isLoading || !isDomainValid}
             />
@@ -371,8 +371,8 @@
         {/if}
       </div>
 
-      <div class="py-10 border-bottom-c">
-        <div class="flex items-center gap-5 mb-4">
+      <div class="border-bottom-c py-10">
+        <div class="mb-4 flex items-center gap-5">
           <p class="font-bold">{$t('components.settings.domains.custom_favicon')}</p>
           <ComingSoon />
         </div>
@@ -390,7 +390,7 @@
       </div>
 
       <div class="py-10">
-        <div class="flex items-center gap-5 mb-4">
+        <div class="mb-4 flex items-center gap-5">
           <p class="font-bold">{$t('components.settings.domains.custom_code')}</p>
           <ComingSoon />
         </div>