Merge pull request #1760 from appwrite/fix-live-payment-validate

Feat: validate live payment

Author: christyjacob4

src/lib/components/heading.svelte

@@ -14,6 +14,7 @@
 
 <svelte:element
     this={tag}
+    class:target={!!id}
     class={`heading-level-${size} u-min-width-0 ${classes}`}
     class:u-trim-1={trimmed}
     class:u-trim-2={trimmedSecondLine}
@@ -23,7 +24,7 @@
 </svelte:element>
 
 <style>
-    :target {
+    .target {
         padding-top: 120px;
         margin-top: -120px;
     }

src/lib/sdk/billing.ts

@@ -739,6 +739,14 @@ export class Billing {
         );
     }
 
+    async updateInvoiceStatus(organizationId: string, invoiceId: string): Promise<Invoice> {
+        const path = `/organizations/${organizationId}/invoices/${invoiceId}/status`;
+        const uri = new URL(this.client.config.endpoint + path);
+        return await this.client.call('PATCH', uri, {
+            'content-type': 'application/json'
+        });
+    }
+
     async retryPayment(
         organizationId: string,
         invoiceId: string,

src/lib/stores/billing.ts

@@ -33,6 +33,7 @@ import { canSeeBilling } from './roles';
 import { sdk } from './sdk';
 import { user } from './user';
 import BudgetLimitAlert from '$routes/(console)/organization-[organization]/budgetLimitAlert.svelte';
+import TeamReadonlyAlert from '$routes/(console)/organization-[organization]/teamReadonlyAlert.svelte';
 
 export type Tier = 'tier-0' | 'tier-1' | 'tier-2' | 'auto-1' | 'cont-1' | 'ent-1';
 
@@ -59,6 +60,9 @@ export const roles = [
     }
 ];
 
+export const teamStatusReadonly = 'readonly';
+export const billingLimitOutstandingInvoice = 'outstanding_invoice';
+
 export const paymentMethods = derived(page, ($page) => $page.data.paymentMethods as PaymentList);
 export const addressList = derived(page, ($page) => $page.data.addressList as AddressesList);
 export const plansInfo = derived(page, ($page) => $page.data.plansInfo as PlansMap);
@@ -270,27 +274,35 @@ export function calculateTrialDay(org: Organization) {
 }
 
 export async function checkForUsageLimit(org: Organization) {
-    if (!org?.billingLimits) {
+    if (org?.status === teamStatusReadonly && org?.remarks === billingLimitOutstandingInvoice) {
+        headerAlert.add({
+            id: 'teamReadOnlyFailedInvoices',
+            component: TeamReadonlyAlert,
+            show: true,
+            importance: 11
+        });
+        readOnly.set(true);
+        return;
+    }
+    if (!org?.billingLimits && org?.status !== teamStatusReadonly) {
         readOnly.set(false);
         return;
     }
     if (org?.billingPlan !== BillingPlan.FREE) {
         const { budgetLimit } = org?.billingLimits ?? {};
 
-        if (!budgetLimit || budgetLimit < 100) {
+        if (budgetLimit && budgetLimit >= 100) {
             readOnly.set(false);
+            headerAlert.add({
+                id: 'budgetLimit',
+                component: BudgetLimitAlert,
+                show: true,
+                importance: 10
+            });
+
+            readOnly.set(true);
             return;
         }
-
-        headerAlert.add({
-            id: 'budgetLimit',
-            component: BudgetLimitAlert,
-            show: true,
-            importance: 10
-        });
-
-        readOnly.set(true);
-        return;
     }
     const { bandwidth, documents, executions, storage, users } = org?.billingLimits ?? {};
     const resources = [

src/lib/stores/organization.ts

@@ -32,6 +32,8 @@ export type Organization = Models.Team<Record<string, unknown>> & {
     billingPlanDowngrade?: Tier;
     billingAggregationId: string;
     billingInvoiceId: string;
+    status: string;
+    remarks: string;
 };
 
 export type OrganizationList = {

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

@@ -19,7 +19,9 @@
     import RetryPaymentModal from './retryPaymentModal.svelte';
     import { selectedInvoice, showRetryModal } from './store';
     import { Button } from '$lib/elements/forms';
-    import { goto } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { base } from '$app/paths';
 
     export let data;
 
@@ -50,10 +52,21 @@
                 await confirmPayment(
                     $organization.$id,
                     invoice.clientSecret,
-                    $organization.paymentMethodId
+                    $organization.paymentMethodId,
+                    `${base}/organization-${$organization.$id}/billing?type=validate-invoice&invoice=${invoice.$id}`
                 );
             }
 
+            if (
+                $page.url.searchParams.has('type') &&
+                $page.url.searchParams.get('type') === 'validate-invoice'
+            ) {
+                const invoiceId = $page.url.searchParams.get('invoice');
+                await sdk.forConsole.billing.updateInvoiceStatus($organization.$id, invoiceId);
+                invalidate(Dependencies.INVOICES);
+                invalidate(Dependencies.ORGANIZATION);
+            }
+
             if (
                 $page.url.searchParams.has('invoice') &&
                 $page.url.searchParams.get('type') === 'retry'

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

@@ -51,6 +51,11 @@
         ]);
     }
 
+    $: if ($page.url.searchParams.get('type') === 'validate-invoice') {
+        window.history.replaceState({}, '', $page.url.pathname);
+        request();
+    }
+
     function retryPayment(invoice: Invoice) {
         $selectedInvoice = invoice;
         $showRetryModal = true;
@@ -62,7 +67,7 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="6">Payment history</Heading>
+    <Heading id="payment-history" tag="h2" size="6">Payment history</Heading>
 
     <p class="text">
         Transaction history for this organization. Download invoices for more details about your

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

@@ -20,6 +20,7 @@
     import { onMount } from 'svelte';
     import { getApiEndpoint, sdk } from '$lib/stores/sdk';
     import { formatCurrency } from '$lib/helpers/numbers';
+    import { base } from '$app/paths';
 
     export let show = false;
     export let invoice: Invoice;
@@ -79,8 +80,12 @@
             await confirmPayment(
                 $organization.$id,
                 clientSecret,
-                paymentMethodId ? paymentMethodId : $organization.paymentMethodId
+                paymentMethodId ? paymentMethodId : $organization.paymentMethodId,
+                `${base}/organization-${$organization.$id}/billing?type=validate-invoice&invoice=${invoice.$id}`
             );
+
+            await sdk.forConsole.billing.updateInvoiceStatus($organization.$id, invoice.$id);
+
             invalidate(Dependencies.ORGANIZATION);
             invalidate(Dependencies.INVOICES);
 

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Button } from '$lib/elements/forms';
+    import { organization } from '$lib/stores/organization';
+    import { HeaderAlert } from '$lib/layout';
+    import {
+        billingLimitOutstandingInvoice,
+        hideBillingHeaderRoutes,
+        readOnly,
+        teamStatusReadonly
+    } from '$lib/stores/billing';
+    import { base } from '$app/paths';
+
+    $: redirectUrl = `${base}/organization-${$organization?.$id}/billing#payment-history`;
+</script>
+
+{#if $organization?.$id && $organization?.status === teamStatusReadonly && $organization?.remarks === billingLimitOutstandingInvoice && $readOnly && !hideBillingHeaderRoutes.includes($page.url.pathname)}
+    <HeaderAlert type="error" title="Access restricted">
+        <svelte:fragment>
+            Your organization’s access to resources has been restricted due to unpaid invoices.
+            Payment is required to restore access.
+        </svelte:fragment>
+        <svelte:fragment slot="buttons">
+            <Button secondary fullWidthMobile href={redirectUrl}>
+                <span class="text">View invoices</span>
+            </Button>
+        </svelte:fragment>
+    </HeaderAlert>
+{/if}