fix: update card

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 />

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>