From 337df50dc1507d717c310ffd0fb7f2a250fb693e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 13 Nov 2023 11:47:32 +0100
Subject: [PATCH] fix: update card

---
 src/lib/elements/forms/formItem.svelte        |  6 ++-
 .../account/payments/editPaymentModal.svelte  | 46 ++++++++++++-------
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/lib/elements/forms/formItem.svelte b/src/lib/elements/forms/formItem.svelte
index 0a0509b0e..d8e4409c4 100644
--- a/src/lib/elements/forms/formItem.svelte
+++ b/src/lib/elements/forms/formItem.svelte
@@ -6,11 +6,15 @@
     export let tag: FormItemTag = 'li';
     export let fullWidth = false;
     export let isMultiple = false;
+    export let style: string = undefined;
+    let classes: string = undefined;
+    export { classes as class };
 </script>
 
 <svelte:element
     this={tag}
-    class="form-item"
+    class="form-item {classes}"
+    {style}
     class:is-multiple={isMultiple}
     class:u-width-full-line={fullWidth}>
     <slot />
diff --git a/src/routes/console/account/payments/editPaymentModal.svelte b/src/routes/console/account/payments/editPaymentModal.svelte
index 17fd8272e..6700022e2 100644
--- a/src/routes/console/account/payments/editPaymentModal.svelte
+++ b/src/routes/console/account/payments/editPaymentModal.svelte
@@ -12,22 +12,7 @@
     export let show = false;
     export let selectedPaymentMethod: PaymentMethodData;
     export let isLinked = false;
-
-    const options = [
-        { value: '01', label: '01' },
-        { value: '02', label: '02' },
-        { value: '03', label: '03' },
-        { value: '04', label: '04' },
-        { value: '05', label: '05' },
-        { value: '06', label: '06' },
-        { value: '07', label: '07' },
-        { value: '08', label: '08' },
-        { value: '09', label: '09' },
-        { value: '10', label: '10' },
-        { value: '11', label: '11' },
-        { value: '12', label: '12' }
-    ];
-
+    const currentYear = new Date().getFullYear();
     let error: string;
     let month: string;
     let year: number;
@@ -51,6 +36,32 @@
             trackError(e, Submit.PaymentMethodUpdate);
         }
     }
+
+    function createMonthOptions(year: number) {
+        const months = [
+            { value: '01', label: '01' },
+            { value: '02', label: '02' },
+            { value: '03', label: '03' },
+            { value: '04', label: '04' },
+            { value: '05', label: '05' },
+            { value: '06', label: '06' },
+            { value: '07', label: '07' },
+            { value: '08', label: '08' },
+            { value: '09', label: '09' },
+            { value: '10', label: '10' },
+            { value: '11', label: '11' },
+            { value: '12', label: '12' }
+        ];
+        if (!year) return months;
+        if (year === currentYear) {
+            const currentMonth = new Date().getMonth() + 1;
+            return months.filter((option) => parseInt(option.value) >= currentMonth);
+        } else {
+            return months;
+        }
+    }
+
+    $: options = createMonthOptions(year);
 </script>
 
 <Modal
@@ -69,7 +80,7 @@
         Updates to this payment method will be applied to any linked organizations.
     {/if}
     <FormList>
-        <FormItem isMultiple>
+        <FormItem isMultiple style="align-items: start;">
             <InputSelect
                 isMultiple
                 fullWidth
@@ -85,6 +96,7 @@
                 id="year"
                 label="Year"
                 bind:value={year}
+                min={currentYear}
                 required
                 placeholder="Select expiry year" />
         </FormItem>