bring back credits modal

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>

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">

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
         };

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>