+
+Upgrade your plan to add more {service}
+ +
+
diff --git a/src/lib/components/cardPlanLimit.svelte b/src/lib/components/cardPlanLimit.svelte
new file mode 100644
index 000000000..966337d2f
--- /dev/null
+++ b/src/lib/components/cardPlanLimit.svelte
@@ -0,0 +1,16 @@
+
+
+
+ type Consent = {
+ key: string;
+ accepted: Record;
+ };
+ export const settings = writable(false);
+ export const show = writable(false);
+ export const consent = writable(
+ JSON.parse(globalThis?.localStorage?.getItem('consent') ?? null)
+ );
+ consent.subscribe((value) => {
+ if (browser) {
+ globalThis.localStorage.setItem('consent', JSON.stringify(value));
+ }
+ });
+
+
+
+
+{#if $show}
+
+{/if}
+
+
+
+ We use cookies to improve your site experience. The "strictly necessary" cookies are
+ required for Appwrite to function.
+
+
+
+
+
+ Strictly necessary cookies
+
+ These are the cookies required for Appwrite to function.
+
+
+
+
+
+
+
+ (optional)
+
+ We include analytics cookies to understand how you use our product and design
+ better experiences.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/components/creditCardBrandImage.svelte b/src/lib/components/creditCardBrandImage.svelte
new file mode 100644
index 000000000..6bfe34c7c
--- /dev/null
+++ b/src/lib/components/creditCardBrandImage.svelte
@@ -0,0 +1,14 @@
+
+
+})
diff --git a/src/lib/components/creditCardInfo.svelte b/src/lib/components/creditCardInfo.svelte
new file mode 100644
index 000000000..b3b89d0d7
--- /dev/null
+++ b/src/lib/components/creditCardInfo.svelte
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+ {paymentMethod?.brand} ending in {paymentMethod?.last4}
+
+
+ Expires {paymentMethod?.expiryMonth}/{paymentMethod?.expiryYear}
+
+ {#if paymentMethod?.name}
+
+ {paymentMethod.name}
+
+ {/if}
+
+
+
+ This payment method has expired
+
+ {/if}
+
diff --git a/src/lib/components/drop.svelte b/src/lib/components/drop.svelte
index 31077c10d..d6c899df2 100644
--- a/src/lib/components/drop.svelte
+++ b/src/lib/components/drop.svelte
@@ -143,7 +143,7 @@
.drop-arrow::before {
content: '';
transform: rotate(45deg);
- background: hsl(var(--color-neutral-200));
+ background: hsl(var(--color-neutral-85));
body.theme-light & {
background: hsl(var(--color-neutral-10));
diff --git a/src/lib/components/dropListItem.svelte b/src/lib/components/dropListItem.svelte
index 98d7c2676..acf02686b 100644
--- a/src/lib/components/dropListItem.svelte
+++ b/src/lib/components/dropListItem.svelte
@@ -4,6 +4,7 @@
export let disabled = false;
export let icon: string = null;
export let event: string = null;
+ export let loading = false;
function track() {
if (!event) {
@@ -17,10 +18,17 @@
-
diff --git a/src/lib/components/dropListLink.svelte b/src/lib/components/dropListLink.svelte
index f0b0ca024..0267a21d0 100644
--- a/src/lib/components/dropListLink.svelte
+++ b/src/lib/components/dropListLink.svelte
@@ -1,13 +1,27 @@
+ class="card u-grid u-cross-center u-width-full-line dashed"
+ class:common-section={marginTop}>
+ We use cookies to improve your site experience. The "strictly necessary" cookies are + required for Appwrite to function. +
+
+
+
+
+
+
+ Strictly necessary cookies
+
+ + These are the cookies required for Appwrite to function. +
+
+
+
+
+
+ (optional)
+
+ + We include analytics cookies to understand how you use our product and design + better experiences. +
+
+
+ This payment method has expired
+
+ {/if}
+
diff --git a/src/lib/components/drop.svelte b/src/lib/components/drop.svelte
index 31077c10d..d6c899df2 100644
--- a/src/lib/components/drop.svelte
+++ b/src/lib/components/drop.svelte
@@ -143,7 +143,7 @@
.drop-arrow::before {
content: '';
transform: rotate(45deg);
- background: hsl(var(--color-neutral-200));
+ background: hsl(var(--color-neutral-85));
body.theme-light & {
background: hsl(var(--color-neutral-10));
diff --git a/src/lib/components/dropListItem.svelte b/src/lib/components/dropListItem.svelte
index 98d7c2676..acf02686b 100644
--- a/src/lib/components/dropListItem.svelte
+++ b/src/lib/components/dropListItem.svelte
@@ -4,6 +4,7 @@
export let disabled = false;
export let icon: string = null;
export let event: string = null;
+ export let loading = false;
function track() {
if (!event) {
@@ -17,10 +18,17 @@
+
+ {#if paymentMethod?.expired}
+
+
+
+
+ + {paymentMethod?.brand} ending in {paymentMethod?.last4} +
++ Expires {paymentMethod?.expiryMonth}/{paymentMethod?.expiryYear} +
+ {#if paymentMethod?.name} ++ {paymentMethod.name} +
+ {/if} +