+ Your payment method will be charged this amount plus usage fees every 30 days {!currentPlan.trialDays
+ ? `starting ${toLocaleDate(billingPayDate.toString())}`
+ : ` after your trial period ends on ${toLocaleDate(trialEndDate.toString())}`}.
+
+
+
+ {#if budgetEnabled}
+
+
+
+ {/if}
+
+
+
diff --git a/src/lib/components/billing/index.ts b/src/lib/components/billing/index.ts
index 0d7a98daa..b8aac8ada 100644
--- a/src/lib/components/billing/index.ts
+++ b/src/lib/components/billing/index.ts
@@ -1,2 +1,8 @@
export { default as PaymentBoxes } from './paymentBoxes.svelte';
export { default as CouponInput } from './couponInput.svelte';
+export { default as SelectPaymentMethod } from './selectPaymentMethod.svelte';
+export { default as UsageRates } from './usageRates.svelte';
+export { default as EstimatedTotalBox } from './estimatedTotalBox.svelte';
+export { default as PlanComparisonBox } from './planComparisonBox.svelte';
+export { default as EmptyCardCloud } from './emptyCardCloud.svelte';
+export { default as CreditsApplied } from './creditsApplied.svelte';
diff --git a/src/lib/components/billing/paymentBoxes.svelte b/src/lib/components/billing/paymentBoxes.svelte
index e964c3d77..0ff377796 100644
--- a/src/lib/components/billing/paymentBoxes.svelte
+++ b/src/lib/components/billing/paymentBoxes.svelte
@@ -46,6 +46,11 @@
$: if (element) {
observer.observe(element, { childList: true });
}
+
+ //Set setAsDefault as false when group changes
+ $: if (group || group === null) {
+ setAsDefault = false;
+ }
-
+
+
+
-
+
diff --git a/src/lib/components/billing/planComparisonBox.svelte b/src/lib/components/billing/planComparisonBox.svelte
new file mode 100644
index 000000000..b17aa8437
--- /dev/null
+++ b/src/lib/components/billing/planComparisonBox.svelte
@@ -0,0 +1,50 @@
+
+
+
+
+ (selectedTab = 'tier-0')}>
+ Free
+
+ (selectedTab = 'tier-1')}>
+ Pro
+
+
+
+
+ {#if selectedTab === 'tier-0'}
+
{plan.name} plan
+
+
+ Limited to {plan.databases} Database, {plan.buckets} Buckets, {plan.functions} Functions
+ per project
+
+
Limited to 1 organization member
+
{plan.bandwidth}GB bandwidth
+
{plan.storage}GB storage
+
{formatNum(plan.executions)} executions
+
+ {:else if selectedTab === 'tier-1'}
+
{plan.name} plan
+
+
Everything in the Free plan, plus:
+
Unlimited databases, buckets, functions
+
{plan.bandwidth}GB bandwidth
+
{plan.storage}GB storage
+
{formatNum(plan.executions)} executions
+
Email support
+
+ {/if}
+
+
diff --git a/src/lib/components/billing/planExcess.svelte b/src/lib/components/billing/planExcess.svelte
new file mode 100644
index 000000000..4005487bd
--- /dev/null
+++ b/src/lib/components/billing/planExcess.svelte
@@ -0,0 +1,138 @@
+
+
+{#if showExcess}
+
+
+ Your {tierToPlan($organization.billingPlan).name} plan subscription will end on {toLocaleDate(
+ $organization.billingNextInvoiceDate
+ )}
+
+ Following payment of your final invoice, your organization will switch to the {tierToPlan(
+ BillingPlan.FREE
+ ).name} plan. {#if excess?.members > 0}All team members except the owner will be removed on
+ that date.{/if} Service disruptions may occur unless resource usage is reduced.
+
+
+
+
+
+
+
+
+ Resource
+ Free limit
+ Excess usage
+
+
+ {#if excess?.members}
+
+ Organization members
+ {plan.members} members
+
+
+
+
+ {/if}
+
+
+{/if}
diff --git a/src/lib/components/billing/selectPaymentMethod.svelte b/src/lib/components/billing/selectPaymentMethod.svelte
new file mode 100644
index 000000000..a35f81b6a
--- /dev/null
+++ b/src/lib/components/billing/selectPaymentMethod.svelte
@@ -0,0 +1,127 @@
+
+
+{#if filteredMethods?.length}
+ {#if selectedPaymentMethod?.country === 'in'}
+
+ Indian credit or debit card-holders
+ To comply with RBI regulations in India, Appwrite will ask for verification to charge up
+ to $150 USD on your payment method. We will never charge more than the cost of your plan
+ and the resources you use, or your budget cap limit. For higher usage limits, please contact
+ us.
+
+ {/if}
+ {
+ return {
+ value: method.$id,
+ label: `${capitalize(method.brand)} ending in ${method.last4}`,
+ data: [method.brand]
+ };
+ })}
+ interactiveOutput
+ let:option={o}>
+
+
+
+
+
+
+
+ {o.label}
+
+
+
+
+
+
+
+
+{:else}
+
+