Merge branch 'main' of github.com:appwrite/console into chore-format-…

…prices
appwrite · Feb 9, 2024 · 9506f71 · 9506f71
2 parents e5ceb66 + f5d0192
commit 9506f71
Show file tree

Hide file tree

Showing 11 changed files with 325 additions and 176 deletions.
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
@@ -263,6 +263,7 @@ export enum Submit {
     PaymentMethodCreate = 'submit_payment_method_create',
     PaymentMethodUpdate = 'submit_payment_method_update',
     PaymentMethodDelete = 'submit_payment_method_delete',
+    RetryPayment = 'submit_retry_payment',
     BillingAddressCreate = 'submit_billing_address_create',
     BillingAddressUpdate = 'submit_billing_address_update',
     BillingAddressDelete = 'submit_billing_address_delete',

diff --git a/src/lib/components/billing/paymentBoxes.svelte b/src/lib/components/billing/paymentBoxes.svelte
@@ -1,12 +1,18 @@
 <script lang="ts">
-    import { FormList, InputText } from '$lib/elements/forms';
+    import { FormList, InputChoice, InputText } from '$lib/elements/forms';
     import { onDestroy, onMount } from 'svelte';
     import { CreditCardBrandImage, RadioBoxes } from '..';
     import { unmountPaymentElement } from '$lib/stores/stripe';
+    import { Pill } from '$lib/elements';
 
     export let methods: Record<string, unknown>[];
     export let group: string;
     export let name: string;
+    export let defaultMethod: string = null;
+    export let backupMethod: string = null;
+    export let disabledCondition: string = null;
+    export let setAsDefault = false;
+    export let showSetAsDefault = false;
 
     let element: HTMLDivElement;
     let loader: HTMLDivElement;
@@ -42,13 +48,36 @@
     }
 </script>
 
-<RadioBoxes elements={methods} total={methods?.length} variableName="$id" name="payment" bind:group>
+<RadioBoxes
+    elements={methods}
+    total={methods?.length}
+    variableName="$id"
+    name="payment"
+    bind:group
+    {disabledCondition}>
     <svelte:fragment slot="element" let:element>
         <slot {element}>
-            <span class="u-flex u-cross-center u-gap-8" style="padding-inline:0.25rem">
-                <span>
-                    <span class="u-capitalize">{element.brand}</span> ending in {element.last4}</span>
-                <CreditCardBrandImage brand={element.brand?.toString()} />
+            <span class="u-flex u-gap-16 u-flex-vertical">
+                <span class="u-flex u-gap-16">
+                    <span class="u-flex u-cross-center u-gap-8" style="padding-inline:0.25rem">
+                        <span>
+                            <span class="u-capitalize">{element.brand}</span> ending in {element.last4}</span>
+                        <CreditCardBrandImage brand={element.brand?.toString()} />
+                    </span>
+                    {#if element.$id === backupMethod}
+                        <Pill>Backup</Pill>
+                    {:else if element.$id === defaultMethod}
+                        <Pill>Default</Pill>
+                    {/if}
+                </span>
+                {#if !!defaultMethod && element.$id !== defaultMethod && group === element.$id && showSetAsDefault && element.$id !== backupMethod}
+                    <ul>
+                        <InputChoice
+                            bind:value={setAsDefault}
+                            id="default"
+                            label="Set as default payment method for this organization" />
+                    </ul>
+                {/if}
             </span>
         </slot>
     </svelte:fragment>
@@ -73,6 +102,14 @@
                 <!-- Stripe will create form elements here -->
             </div>
         </div>
+        {#if showSetAsDefault}
+            <ul>
+                <InputChoice
+                    bind:value={setAsDefault}
+                    id="default"
+                    label="Set as default payment method for this organization" />
+            </ul>
+        {/if}
     </FormList>
 </RadioBoxes>
 

diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte
@@ -3,6 +3,7 @@
 
     export let danger = false;
     export let hideOverflow = false;
+    export let hideFooter = false;
 </script>
 
 <Card {danger}>
@@ -14,7 +15,7 @@
             <slot name="aside" />
         </div>
     </div>
-    {#if $$slots.actions}
+    {#if $$slots.actions && !hideFooter}
         <div class="common-section card-separator u-flex u-main-end">
             <slot name="actions" />
         </div>

diff --git a/src/lib/components/radioBoxes.svelte b/src/lib/components/radioBoxes.svelte
@@ -13,7 +13,7 @@
     {#if total}
         {#each elements as element}
             {@const value = element[variableName]?.toString()}
-            <div class="box" data-private>
+            <ul class="box" data-private>
                 <InputRadio
                     id={`${name}-${value}`}
                     {value}
@@ -22,11 +22,11 @@
                     disabled={disabledCondition ? value === disabledCondition : false}>
                     <slot name="element" {element} />
                 </InputRadio>
-            </div>
+            </ul>
         {/each}
     {/if}
 
-    <div class="box">
+    <ul class="box">
         {#if total}
             <InputRadio id="payment-method" value={null} {name} bind:group>
                 <slot name="new">
@@ -37,5 +37,5 @@
         {#if group === null}
             <slot />
         {/if}
-    </div>
+    </ul>
 </div>
diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
@@ -523,6 +523,28 @@ export class Billing {
         );
     }
 
+    async retryPayment(
+        organizationId: string,
+        invoiceId: string,
+        paymentMethodId: string
+    ): Promise<Invoice> {
+        const path = `/organizations/${organizationId}/invoices/${invoiceId}/payments`;
+        const params = {
+            organizationId,
+            invoiceId,
+            paymentMethodId
+        };
+        const uri = new URL(this.client.config.endpoint + path);
+        return await this.client.call(
+            'post',
+            uri,
+            {
+                'content-type': 'application/json'
+            },
+            params
+        );
+    }
+
     async listUsage(
         organizationId: string,
         startDate: string = undefined,

diff --git a/src/lib/stores/stripe.ts b/src/lib/stores/stripe.ts
@@ -101,9 +101,15 @@ export async function submitStripeCard(name: string, urlRoute?: string) {
     }
 }
 
-export async function confirmPayment(orgId: string, clientSecret: string, paymentMethodId: string) {
+export async function confirmPayment(
+    orgId: string,
+    clientSecret: string,
+    paymentMethodId: string,
+    route?: string
+) {
     try {
-        const url = `${window.location.origin}/console/organization-${orgId}/billing`;
+        const url =
+            window.location.origin + (route ? route : `/console/organization-${orgId}/billing`);
 
         const paymentMethod = await sdk.forConsole.billing.getPaymentMethod(paymentMethodId);
 

diff --git a/src/routes/console/organization-[organization]/billing/availableCredit.svelte b/src/routes/console/organization-[organization]/billing/availableCredit.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Empty, Heading, PaginationInline } from '$lib/components';
+    import { Alert, CardGrid, Empty, Heading, PaginationInline } from '$lib/components';
     import {
         Table,
         TableBody,
@@ -19,6 +19,9 @@
     import { Button } from '$lib/elements/forms';
     import AddCreditModal from './addCreditModal.svelte';
     import { formatCurrency } from '$lib/helpers/numbers';
+    import { BillingPlan } from '$lib/constants';
+    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+    import { trackEvent } from '$lib/actions/analytics';
 
     let offset = 0;
     let creditList: CreditList = {
@@ -66,52 +69,78 @@
     }
 </script>
 
-<CardGrid>
+<CardGrid hideFooter={$organization?.billingPlan !== BillingPlan.STARTER}>
     <Heading tag="h2" size="6">Available credit</Heading>
 
     <p class="text">Appwrite credit will automatically be applied to your next invoice.</p>
     <svelte:fragment slot="aside">
-        <div class="u-flex u-cross-center u-main-space-between">
-            <div class="u-flex u-gap-8 u-cross-center">
-                <h4 class="body-text-1 u-bold">Credit balance</h4>
-                <span class="inline-tag">{formatCurrency(balance)}</span>
+        {#if $organization?.billingPlan === BillingPlan.STARTER}
+            <Alert type="info">
+                <svelte:fragment slot="title">Upgrade to Pro to add credits</svelte:fragment>
+                Upgrade to a Pro plan to add credits to 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>
+            </Alert>
+        {:else}
+            <div class="u-flex u-cross-center u-main-space-between">
+                <div class="u-flex u-gap-8 u-cross-center">
+                    <h4 class="body-text-1 u-bold">Credit balance</h4>
+                    <span class="inline-tag">{formatCurrency(balance)}</span>
+                </div>
+                {#if creditList?.total}
+                    <Button secondary on:click={handleCredits}>
+                        <span class="icon-plus" aria-hidden="true"></span>
+                        <span class="text">Add credits</span>
+                    </Button>
+                {/if}
             </div>
             {#if creditList?.total}
-                <Button secondary on:click={handleCredits}>
-                    <span class="icon-plus" aria-hidden="true"></span>
-                    <span class="text">Add credits</span>
-                </Button>
+                <Table noStyles noMargin>
+                    <TableHeader>
+                        <TableCellHead>Date Added</TableCellHead>
+                        <TableCellHead>Expiry Date</TableCellHead>
+                        <TableCellHead>Amount</TableCellHead>
+                    </TableHeader>
+                    <TableBody>
+                        {#each creditList.credits as credit}
+                            <TableRow>
+                                <TableCellText title="date added">
+                                    {toLocaleDate(credit.$createdAt)}
+                                </TableCellText>
+                                <TableCellText title="expiry date">
+                                    {toLocaleDate(credit.expiration)}
+                                </TableCellText>
+                                <TableCellText title="amount">
+                                    {formatCurrency(credit.credits)}
+                                </TableCellText>
+                            </TableRow>
+                        {/each}
+                    </TableBody>
+                </Table>
+                <div class="u-flex u-main-space-between">
+                    <p class="text">Total results: {creditList?.total}</p>
+                    <PaginationInline {limit} bind:offset sum={creditList?.total} hidePages />
+                </div>
+            {:else}
+                <Empty target="credits" on:click={handleCredits}>Add credits</Empty>
             {/if}
-        </div>
-        {#if creditList?.total}
-            <Table noStyles noMargin>
-                <TableHeader>
-                    <TableCellHead>Date Added</TableCellHead>
-                    <TableCellHead>Expiry Date</TableCellHead>
-                    <TableCellHead>Amount</TableCellHead>
-                </TableHeader>
-                <TableBody>
-                    {#each creditList.credits as credit}
-                        <TableRow>
-                            <TableCellText title="date added">
-                                {toLocaleDate(credit.$createdAt)}
-                            </TableCellText>
-                            <TableCellText title="expiry date">
-                                {toLocaleDate(credit.expiration)}
-                            </TableCellText>
-                            <TableCellText title="amount">
-                                {formatCurrency(credit.credits)}
-                            </TableCellText>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
-            <div class="u-flex u-main-space-between">
-                <p class="text">Total results: {creditList?.total}</p>
-                <PaginationInline {limit} bind:offset sum={creditList?.total} hidePages />
-            </div>
-        {:else}
-            <Empty target="credits" on:click={handleCredits}>Add credits</Empty>
+        {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="actions">
+        {#if $organization?.billingPlan === BillingPlan.STARTER}
+            <Button
+                secondary
+                on:click={() => {
+                    wizard.start(ChangeOrganizationTierCloud);
+                    trackEvent('click_organization_upgrade', {
+                        from: 'button',
+                        source: 'billing_add_credits'
+                    });
+                }}>Upgrade to Pro</Button>
         {/if}
     </svelte:fragment>
 </CardGrid>

diff --git a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
@@ -3,6 +3,7 @@
     import {
         CardGrid,
         DropList,
+        DropListItem,
         DropListLink,
         EmptySearch,
         Heading,
@@ -21,13 +22,17 @@
     } from '$lib/elements/table';
     import { toLocaleDate } from '$lib/helpers/date';
     import { formatCurrency } from '$lib/helpers/numbers';
-    import type { InvoiceList } from '$lib/sdk/billing';
+    import type { Invoice, InvoiceList } from '$lib/sdk/billing';
     import { sdk } from '$lib/stores/sdk';
     import { VARS } from '$lib/system';
     import { Query } from '@appwrite.io/console';
     import { onMount } from 'svelte';
+    import RetryPaymentModal from './retryPaymentModal.svelte';
+    import { trackEvent } from '$lib/actions/analytics';
 
     let showDropdown = [];
+    let showRetryModal = false;
+    let selectedInvoice: Invoice | null = null;
 
     let offset = 0;
     let invoiceList: InvoiceList = {
@@ -125,6 +130,22 @@
                                                 event="download_invoice">
                                                 Download PDF
                                             </DropListLink>
+                                            <!-- {#if status === 'overdue' || status === 'failed'} -->
+                                            {#if false}
+                                                <DropListItem
+                                                    icon="refresh"
+                                                    on:click={() => {
+                                                        selectedInvoice = invoice;
+                                                        showRetryModal = true;
+                                                        showDropdown[i] = !showDropdown[i];
+                                                        trackEvent(`click_retry_payment`, {
+                                                            from: 'button',
+                                                            source: 'billing_invoice_menu'
+                                                        });
+                                                    }}>
+                                                    Retry payment
+                                                </DropListItem>
+                                            {/if}
                                         </svelte:fragment>
                                     </DropList>
                                 </TableCell>
@@ -147,3 +168,7 @@
         {/if}
     </svelte:fragment>
 </CardGrid>
+
+{#if selectedInvoice}
+    <RetryPaymentModal bind:show={showRetryModal} bind:invoice={selectedInvoice} />
+{/if}