From c85d9c7bff0be3beff235995dc83bf9a31341fc8 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 12 Dec 2024 13:20:36 +0530
Subject: [PATCH] update: copies, ui as per new designs.

---
 .../billing/budgetAlert.svelte                | 12 +--
 .../billing/budgetCap.svelte                  | 10 +-
 .../billing/paymentMethods.svelte             | 95 ++++++++-----------
 .../billing/planSummary.svelte                |  5 +-
 4 files changed, 53 insertions(+), 69 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte b/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
index 116c72e47..02632fad9 100644
--- a/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
@@ -79,7 +79,7 @@
 
 <Form onSubmit={updateBudget}>
     <CardGrid>
-        <Heading tag="h2" size="6">Budget alerts</Heading>
+        <Heading tag="h2" size="6">Billing alerts</Heading>
 
         <p class="text">
             {#if $organization?.billingPlan === BillingPlan.FREE}
@@ -94,15 +94,9 @@
             {#if $organization?.billingPlan === BillingPlan.FREE}
                 <Alert type="info">
                     <svelte:fragment slot="title"
-                        >Budget alerts are a Pro plan feature
+                        >Billing alerts are a Pro plan feature
                     </svelte:fragment>
-                    Upgrade to a Pro plan to set a budget alerts for your organization. For more information
-                    on what you can do with a Pro plan,
-                    <a
-                        class="link"
-                        href="https://appwrite.io/pricing"
-                        target="_blank"
-                        rel="noopener noreferrer">view our pricing guide.</a>
+                    Upgrade to a Pro plan to manage when you receive billing alerts for your organization.
                 </Alert>
             {:else}
                 <FormList>
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
index 0d3503c0a..20586264c 100644
--- a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
@@ -55,8 +55,6 @@
         <p class="text">
             Restrict your resource usage by setting a budget cap. Cap usage is reset at the
             beginning of each billing cycle.
-            <button class="link" type="button" on:click={() => ($showUsageRatesModal = true)}
-                >Learn more about usage rates.</button>
         </p>
         <svelte:fragment slot="aside">
             {#if $organization?.billingPlan === BillingPlan.FREE}
@@ -76,8 +74,12 @@
                 <FormList>
                     <InputSwitch id="cap-active" label="Enable budget cap" bind:value={capActive}>
                         <svelte:fragment slot="description">
-                            Budget cap limits do not include the base amount of your plan. Cap usage
-                            is reset at the beginning of each billing cycle.
+                            Budget cap limits do not include the base amount of your plan. <button
+                                class="link"
+                                type="button"
+                                on:click={() => ($showUsageRatesModal = true)}
+                                >Learn more about usage rates.
+                            </button>
                         </svelte:fragment>
                     </InputSwitch>
                     {#if capActive}
diff --git a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
index 1a7938d24..9c50f62b3 100644
--- a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
@@ -20,7 +20,6 @@
     import DeleteOrgPayment from './deleteOrgPayment.svelte';
     import ReplaceCard from './replaceCard.svelte';
     import EditPaymentModal from '$routes/(console)/account/payments/editPaymentModal.svelte';
-    import { tooltip } from '$lib/actions/tooltip';
     import PaymentModal from '$lib/components/billing/paymentModal.svelte';
     import { user } from '$lib/stores/user';
 
@@ -198,8 +197,8 @@
         {#if $organization?.billingPlan !== BillingPlan.FREE}
             <!-- TODO: Add a simple button if a backup payment doesn't exist. -->
             <div class="u-flex u-flex-vertical u-gap-8">
-                <h4 class="u-bold body-text-2">Backup</h4>
                 {#if $organization?.backupPaymentMethodId}
+                    <h4 class="u-bold body-text-2">Backup</h4>
                     <CreditCardInfo isBox paymentMethod={backupPaymentMethod}>
                         <DropList bind:show={showDropdownBackup} placement="bottom-start" noArrow>
                             <Button
@@ -248,59 +247,47 @@
                     {@const filteredPaymentMethods = $paymentMethods.paymentMethods.filter(
                         (o) => !!o.last4 && o.$id !== $organization?.paymentMethodId
                     )}
-                    <article class="card u-grid u-cross-center u-width-full-line dashed">
-                        <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
-                            <div class="common-section">
-                                <DropList bind:show={showDropdownBackup} placement="bottom-start">
-                                    <Button
-                                        secondary
-                                        round
-                                        on:click={() => {
-                                            if (filteredPaymentMethods.length) {
-                                                showDropdownBackup = !showDropdownBackup;
-                                            } else {
-                                                isSelectedBackup = true;
-                                                showPayment = true;
-                                            }
-                                        }}>
-                                        <i class="icon-plus" />
-                                    </Button>
-                                    <svelte:fragment slot="list">
-                                        {#if $paymentMethods.total}
-                                            {#each filteredPaymentMethods as paymentMethod}
-                                                <DropListItem
-                                                    on:click={() => {
-                                                        showDropdownBackup = true;
-                                                        addBackupPaymentMethod(paymentMethod?.$id);
-                                                    }}>
-                                                    <span class="u-flex u-cross-center u-gap-8">
-                                                        <p class="text">
-                                                            Card ending in {paymentMethod.last4}
-                                                        </p>
-                                                        <CreditCardBrandImage
-                                                            brand={paymentMethod?.brand} />
-                                                    </span>
-                                                </DropListItem>
-                                            {/each}
-                                        {/if}
-                                        <DropListItem on:click={() => (showPayment = true)}>
-                                            Add new payment method
-                                        </DropListItem>
-                                    </svelte:fragment>
-                                </DropList>
-                            </div>
-                            <div class="common-section u-flex u-cross-center u-gap-4">
+                    <div
+                        class="u-bold body-text-2 u-flex u-cross-center u-gap-8 u-padding-block-start-8">
+                        <DropList bind:show={showDropdownBackup} placement="bottom-start">
+                            <Button
+                                text
+                                noMargin
+                                on:click={() => {
+                                    if (filteredPaymentMethods.length) {
+                                        showDropdownBackup = !showDropdownBackup;
+                                    } else {
+                                        isSelectedBackup = true;
+                                        showPayment = true;
+                                    }
+                                }}>
+                                <i class="icon-plus" />
                                 <span class="text"> Add a backup payment method </span>
-                                <span
-                                    class="icon-info"
-                                    style="font-size: var(--icon-size-small)"
-                                    use:tooltip={{
-                                        content:
-                                            'When your default payment method fails, a backup method will be used to pay your invoice automatically'
-                                    }} />
-                            </div>
-                        </div>
-                    </article>
+                            </Button>
+                            <svelte:fragment slot="list">
+                                {#if $paymentMethods.total}
+                                    {#each filteredPaymentMethods as paymentMethod}
+                                        <DropListItem
+                                            on:click={() => {
+                                                showDropdownBackup = true;
+                                                addBackupPaymentMethod(paymentMethod?.$id);
+                                            }}>
+                                            <span class="u-flex u-cross-center u-gap-8">
+                                                <p class="text">
+                                                    Card ending in {paymentMethod.last4}
+                                                </p>
+                                                <CreditCardBrandImage
+                                                    brand={paymentMethod?.brand} />
+                                            </span>
+                                        </DropListItem>
+                                    {/each}
+                                {/if}
+                                <DropListItem on:click={() => (showPayment = true)}>
+                                    Add new payment method
+                                </DropListItem>
+                            </svelte:fragment>
+                        </DropList>
+                    </div>
                 {/if}
             </div>
         {/if}
diff --git a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
index 331e11add..668a110d5 100644
--- a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
@@ -199,7 +199,7 @@
             {#if $organization?.billingPlan === BillingPlan.FREE}
                 <!-- TODO: make center on mobile and have different styles. -->
                 <div
-                    class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line">
+                    class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line u-main-end">
                     <Button secondary href={`${base}/organization-${$organization?.$id}/usage`}>
                         View estimated usage
                     </Button>
@@ -216,7 +216,8 @@
                     </Button>
                 </div>
             {:else if $organization?.billingPlan !== BillingPlan.GITHUB_EDUCATION}
-                <div class="u-flex u-gap-16 u-flex-wrap">
+                <div
+                    class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line u-main-end">
                     <Button
                         text
                         disabled={$organization?.markedForDeletion}