Merge pull request #2233 from appwrite/feat-SER-65-Adding-clear-steps-for-downgrading

src/lib/components/billing/planSelection.svelte

@@ -7,8 +7,8 @@
     import { LabelCard } from '..';
 
     export let billingPlan: Tier;
-    export let anyOrgFree = false;
     export let isNewOrg = false;
+    export let anyOrgFree = false;
     export let selfService = true;
 
     $: freePlan = $plansInfo.get(BillingPlan.FREE);
@@ -22,12 +22,9 @@
     <LabelCard
         name="plan"
         bind:group={billingPlan}
-        disabled={anyOrgFree || !selfService}
+        disabled={!selfService}
         value={BillingPlan.FREE}
-        title={tierFree.name}
-        tooltipShow={anyOrgFree}
-        tooltipText="You are limited to 1 Free organization per account."
-        tooltipWidth="100%">
+        title={tierFree.name}>
         <svelte:fragment slot="action">
             {#if $organization?.billingPlan === BillingPlan.FREE && !isNewOrg}
                 <Badge variant="secondary" size="xs" content="Current plan" />

src/routes/(console)/organization-[organization]/change-plan/+page.svelte

@@ -150,8 +150,7 @@
             await goto(previousPage);
             addNotification({
                 type: 'success',
-                isHtml: true,
-                message: `<b>${$organization.name}</b> plan has been successfully updated.`
+                message: `${$organization.name} plan has been successfully updated.`
             });
 
             trackEvent(Submit.OrganizationDowngrade, {
@@ -264,7 +263,9 @@
 
     $: isUpgrade = $plansInfo.get(selectedPlan).order > $currentPlan?.order;
     $: isDowngrade = $plansInfo.get(selectedPlan).order < $currentPlan?.order;
-    $: isButtonDisabled = $organization?.billingPlan === selectedPlan;
+    $: isButtonDisabled =
+        $organization?.billingPlan === selectedPlan ||
+        (isDowngrade && selectedPlan === BillingPlan.FREE && data.hasFreeOrgs);
 </script>
 
 <svelte:head>
@@ -297,8 +298,21 @@
                         selfService={data.selfService}
                         anyOrgFree={data.hasFreeOrgs} />
 
+                    {#if isDowngrade && selectedPlan === BillingPlan.FREE && data.hasFreeOrgs}
+                        <Alert.Inline
+                            status="warning"
+                            title="You can only have one free organization per account">
+                            To downgrade this organization, first migrate or delete one of your
+                            existing paid organizations.
+                            <Button
+                                compact
+                                href="https://appwrite.io/docs/advanced/migrations/cloud"
+                                >Migration guide</Button>
+                        </Alert.Inline>
+                    {/if}
+
                     {#if isDowngrade}
-                        {#if selectedPlan === BillingPlan.FREE}
+                        {#if selectedPlan === BillingPlan.FREE && !data.hasFreeOrgs}
                             <PlanExcess tier={BillingPlan.FREE} />
                         {:else if selectedPlan === BillingPlan.PRO && data.organization.billingPlan === BillingPlan.SCALE && collaborators?.length > 0}
                             {@const extraMembers = collaborators?.length ?? 0}
@@ -364,7 +378,7 @@
                         id="members" />
                 </Fieldset>
             {/if}
-            {#if isDowngrade && selectedPlan === BillingPlan.FREE}
+            {#if isDowngrade && selectedPlan === BillingPlan.FREE && !data.hasFreeOrgs}
                 <Fieldset legend="Feedback">
                     <Layout.Stack gap="xl">
                         <InputSelect
@@ -395,7 +409,7 @@
                 bind:billingBudget
                 organizationId={data.organization.$id} />
         {:else if data.organization.billingPlan !== BillingPlan.CUSTOM}
-            <PlanComparisonBox downgrade={isDowngrade} />
+            <PlanComparisonBox downgrade={data.hasFreeOrgs ? false : isDowngrade} />
         {/if}
     </svelte:fragment>
     <svelte:fragment slot="footer">