From 429c7da66fd8e822fbca8a6d5b75a7bf62c72dd5 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Tue, 28 Jan 2025 06:06:19 +0000
Subject: [PATCH] bring back credits modal

---
 .../billing/discountsApplied.svelte           | 23 +++++++++
 .../components/billing/estimatedTotal.svelte  | 49 ++++++++++---------
 src/lib/sdk/billing.ts                        |  3 +-
 .../change-plan/+page.svelte                  | 22 +++++----
 4 files changed, 64 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/billing/discountsApplied.svelte b/src/lib/components/billing/discountsApplied.svelte
index d35b3a168..82ae0907e 100644
--- a/src/lib/components/billing/discountsApplied.svelte
+++ b/src/lib/components/billing/discountsApplied.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
     import { formatCurrency } from '$lib/helpers/numbers';
+    import type { Coupon } from '$lib/sdk/billing'
 
     export let label: string;
     export let value: number;
+    export let couponData: Partial<Coupon> = {
+        code: null,
+        status: null,
+        credits: null
+    };
+    export let fixedCoupon = false;
 </script>
 
 {#if value > 0}
@@ -14,6 +21,22 @@
                     {label}
                 </span>
             </p>
+            {#if !fixedCoupon && label.toLowerCase() === 'credits'}
+                <button
+                    type="button"
+                    class="button is-text is-only-icon"
+                    style="--button-size:1.5rem;"
+                    aria-label="Close"
+                    title="Close"
+                    on:click={() =>
+                        (couponData = {
+                            code: null,
+                            status: null,
+                            credits: null
+                        })}>
+                    <span class="icon-x" aria-hidden="true" />
+                </button>
+            {/if}
         </div>
         {#if value >= 100}
             <p class="inline-tag">Credits applied</p>
diff --git a/src/lib/components/billing/estimatedTotal.svelte b/src/lib/components/billing/estimatedTotal.svelte
index 3afd78945..ce9a3558c 100644
--- a/src/lib/components/billing/estimatedTotal.svelte
+++ b/src/lib/components/billing/estimatedTotal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { FormList, InputChoice, InputNumber } from '$lib/elements/forms';
     import { formatCurrency } from '$lib/helpers/numbers';
-    import type { Estimation } from '$lib/sdk/billing';
+    import type { Coupon, Estimation } from '$lib/sdk/billing';
     import { sdk } from '$lib/stores/sdk';
     import Alert from '../alert.svelte';
     import Card from '../card.svelte';
@@ -13,6 +13,7 @@
     export let couponId: string;
     export let fixedCoupon = false;
     export let error = '';
+    export let couponData: Partial<Coupon>;
 
     export let billingBudget: number;
 
@@ -21,12 +22,13 @@
 
     async function getEstimate(billingPlan: string, collaborators: string[], couponId: string) {
         try {
+            error = '';
             estimation = await sdk.forConsole.billing.estimationCreateOrganization(
                 billingPlan,
                 couponId === '' ? null : couponId,
                 collaborators ?? []
             );
-            error = '';
+            error = estimation.error ?? '';
         } catch (e) {
             error = e.message;
         }
@@ -46,6 +48,7 @@
                 couponId && couponId.length > 0 ? couponId : null,
                 collaborators ?? []
             );
+            error = estimation.error ?? '';
         } catch (e) {
             error = e.message;
         }
@@ -59,34 +62,34 @@
 {#if estimation || error.length}
     <Card class="u-flex u-flex-vertical u-gap-8">
         {#if error.length}
-        <p class="u-color-text-danger">
+            <Alert type="error">
                 {error}
-        </p>
+            </Alert>
         {/if}
 
         {#if estimation}
-        {#each estimation.items ?? [] as item}
+            {#each estimation.items ?? [] as item}
+                <span class="u-flex u-main-space-between">
+                    <p class="text">{item.label}</p>
+                    <p class="text">{formatCurrency(item.value)}</p>
+                </span>
+            {/each}
+            {#each estimation.discounts ?? [] as item}
+                <DiscountsApplied bind:couponData {...item} />
+            {/each}
+            <div class="u-sep-block-start" />
             <span class="u-flex u-main-space-between">
-                <p class="text">{item.label}</p>
-                <p class="text">{formatCurrency(item.value)}</p>
+                <p class="text">Total due</p>
+                <p class="text">
+                    {formatCurrency(estimation.grossAmount)}
+                </p>
             </span>
-        {/each}
-        {#each estimation.discounts ?? [] as item}
-            <DiscountsApplied {...item} />
-        {/each}
-        <div class="u-sep-block-start" />
-        <span class="u-flex u-main-space-between">
-            <p class="text">Total due</p>
-            <p class="text">
-                {formatCurrency(estimation.grossAmount)}
-            </p>
-        </span>
 
-        <p class="text u-margin-block-start-16">
-            You'll pay <span class="u-bold">{formatCurrency(estimation.grossAmount)}</span> now.
-            Once your credits run out, you'll be charged
-            <span class="u-bold">{formatCurrency(estimation.amount)}</span> every 30 days.
-        </p>
+            <p class="text u-margin-block-start-16">
+                You'll pay <span class="u-bold">{formatCurrency(estimation.grossAmount)}</span> now.
+                Once your credits run out, you'll be charged
+                <span class="u-bold">{formatCurrency(estimation.amount)}</span> every 30 days.
+            </p>
         {/if}
 
         <FormList class="u-margin-block-start-24">
diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index 0d0824561..266399a1c 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -74,6 +74,7 @@ export type Estimation = {
     discounts: EstimationItem[];
     trialDays: number;
     trialEndDate: string | undefined;
+    error: string | undefined;
 }
 
 export type EstimationItem = {
@@ -902,7 +903,7 @@ export class Billing {
     }
 
     async getCoupon(couponId: string): Promise<Coupon> {
-        const path = `/console/coupons/${couponId}`;
+        const path = `/account/coupons/${couponId}`;
         const params = {
             couponId
         };
diff --git a/src/routes/(console)/organization-[organization]/change-plan/+page.svelte b/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
index d34d486ed..6bb3223b0 100644
--- a/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
@@ -36,7 +36,6 @@
         currentPlan,
         organization,
         organizationList,
-        type OrganizationError,
         type Organization
     } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
@@ -321,7 +320,7 @@
                 {/if}
             {/if}
             <!-- Show email input if upgrading from free plan -->
-            {#if billingPlan !== BillingPlan.FREE && $organization.billingPlan === BillingPlan.FREE}
+            {#if billingPlan !== BillingPlan.FREE && $organization.billingPlan !== billingPlan && $organization.billingPlan !== BillingPlan.CUSTOM && isUpgrade}
                 <FormList class="u-margin-block-start-16">
                     <InputTags
                         bind:tags={collaborators}
@@ -332,12 +331,16 @@
                         validityMessage="Invalid email address"
                         id="members" />
                     <SelectPaymentMethod bind:methods bind:value={paymentMethodId} bind:taxId />
-                    <InputText
-                        bind:value={couponId}
-                        label="Coupon"
-                        placeholder="Enter coupon code"
-                        id="couponId" />
                 </FormList>
+                {#if !couponData?.code}
+                    <Button
+                        text
+                        noMargin
+                        class="u-margin-block-start-16"
+                        on:click={() => (showCreditModal = true)}>
+                        <span class="icon-plus"></span> <span class="text">Add credits</span>
+                    </Button>
+                {/if}
             {/if}
             {#if isDowngrade && billingPlan === BillingPlan.FREE}
                 <FormList class="u-margin-block-start-24">
@@ -362,10 +365,11 @@
                 <EstimatedTotal
                     bind:error
                     bind:billingBudget
+                    bind:couponData
                     organizationId={$organization.$id}
+                    couponId={couponData.code}
                     {billingPlan}
-                    {collaborators}
-                    {couponId} />
+                    {collaborators} />
             {:else if $organization.billingPlan !== BillingPlan.CUSTOM}
                 {#if isDowngrade}
                     <Card>