cancel downgrade

src/routes/(console)/organization-[organization]/billing/cancelDowngradeModel.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { organization } from '$lib/stores/organization';
+    import { Dependencies } from '$lib/constants';
+    import { invalidate } from '$app/navigation';
+    import { tierToPlan } from '$lib/stores/billing';
+    import { toLocaleDate } from '$lib/helpers/date';
+
+    export let showCancel = false;
+
+    let error: string = null;
+
+    async function cancelDowngrade() {
+        try {
+            await sdk.forConsole.billing.cancelDowngrade($organization.$id);
+            await invalidate(Dependencies.ORGANIZATION);
+            showCancel = false;
+            addNotification({
+                type: 'success',
+                message: `${$organization.name} plan change has been cancelled.`
+            });
+        } catch (e) {
+            error = e.message;
+        }
+    }
+</script>
+
+<div class="max-height-dialog">
+    <Modal
+        title="Cancel plan change"
+        onSubmit={cancelDowngrade}
+        bind:show={showCancel}
+        bind:error
+        icon="exclamation"
+        state="warning"
+        headerDivider={false}>
+        <p>
+            Your organization is set to change to <strong>
+                {tierToPlan($organization?.billingPlanDowngrade).name}</strong>
+            plan on <strong> {toLocaleDate($organization.billingNextInvoiceDate)}</strong>.
+        </p>
+        <p>Are you sure you want to cancel the change?</p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showCancel = false)}>No</Button>
+            <Button secondary submit>Yes</Button>
+        </svelte:fragment>
+    </Modal>
+</div>

src/routes/(console)/organization-[organization]/billing/planSummary.svelte

@@ -8,18 +8,19 @@
     import type { CreditList, Invoice, Plan } from '$lib/sdk/billing';
     import { abbreviateNumber, formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
-    import { BillingPlan, Dependencies } from '$lib/constants';
+    import { BillingPlan } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
     import { tooltip } from '$lib/actions/tooltip';
     import { type Models } from '@appwrite.io/console';
-    import { sdk } from '$lib/stores/sdk';
-    import { invalidate } from '$app/navigation';
+    import CancelDowngradeModel from './cancelDowngradeModel.svelte';
 
     export let members: Models.MembershipList;
     export let currentPlan: Plan;
     export let creditList: CreditList;
     export let currentInvoice: Invoice | undefined = undefined;
 
+    let showCancel: boolean = false;
+
     const extraMembers = members.total > 1 ? members.total - 1 : 0;
     const availableCredit = creditList.available;
     const today = new Date();
@@ -28,17 +29,6 @@
         $plansInfo.get($organization.billingPlan)?.trialDays;
     const extraUsage = currentInvoice ? currentInvoice.amount - currentPlan?.price : 0;
     const extraAddons = currentInvoice ? currentInvoice.usage?.length : 0;
-
-    const cancelDowngrade = async () => {
-        await sdk.forConsole.billing.cancelDowngrade(
-            $organization.$id
-        );
-        await invalidate(Dependencies.ORGANIZATION);
-        trackEvent('click_organization_plan_update', {
-            from: 'button',
-            source: 'billing_tab'
-        });
-    };
 </script>
 
 {#if $organization}
@@ -214,7 +204,7 @@
             {:else}
                 <div class="u-flex u-gap-16 u-flex-wrap">
                     {#if $organization?.billingPlanDowngrade !== null}
-                        <Button text on:click={cancelDowngrade}>Cancel change</Button>
+                        <Button text on:click={() => (showCancel = true)}>Cancel change</Button>
                     {:else}
                         <Button
                             text
@@ -236,3 +226,4 @@
         </svelte:fragment>
     </CardGrid>
 {/if}
+<CancelDowngradeModel bind:showCancel />

src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte

@@ -6,7 +6,7 @@
     import { members, organization, organizationList } from '$lib/stores/organization';
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import { BillingPlan, Dependencies } from '$lib/constants';
+    import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { projects } from '../store';
     import { toLocaleDate } from '$lib/helpers/date';