fix: small fixes

src/lib/components/creditCardInfo.svelte

@@ -19,10 +19,11 @@
             <p class="text">
                 Expires {paymentMethod?.expiryMonth}/{paymentMethod?.expiryYear}
             </p>
-            <!-- TODO: add card owner name when in SDK 
+            {#if paymentMethod?.name}
                 <p class="text">
-                    {paymentMethod?.name}
-                </p> -->
+                    {paymentMethod.name}
+                </p>
+            {/if}
         </div>
 
         <slot />

src/lib/elements/forms/inputDateRange.svelte

@@ -24,8 +24,8 @@
     export let id: string;
     export let required = false;
     export let hideRequired = false;
-    export let tooltip: string;
-    export let optionalText: string;
+    export let tooltip: string = '';
+    export let optionalText: string = '';
     export let showDates = true;
 
     $: if ($value) {

src/lib/sdk/billing.ts

@@ -16,6 +16,7 @@ export type PaymentMethodData = {
     brand: string;
     clientSecret: string;
     failed: boolean;
+    name: string;
 };
 
 export type PaymentList = {

src/routes/console/account/payments/paymentMethods.svelte

@@ -50,7 +50,7 @@
         created.
     </p>
     <svelte:fragment slot="aside">
-        {#if $paymentMethods?.total}
+        {#if $paymentMethods?.total && filteredMethods?.length > 0}
             <Table noMargin noStyles transparent>
                 <TableHeader>
                     <TableCellHead>Payment methods</TableCellHead>

src/routes/console/organization-[organization]/usage/[[period]]/+page.svelte

@@ -9,6 +9,7 @@
     import { InputDate, InputDateRange, InputSelect } from '$lib/elements/forms';
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
+    import type { DateRange } from '@melt-ui/svelte/index.js';
 
     const tier = tierToPlan($organization?.billingPlan)?.name;
 
@@ -32,9 +33,11 @@
             // await goto(`/console/organization-${$organization.$id}/usage/custom`);
         }
     }
+
+    let test: DateRange;
 </script>
 
-<InputDateRange></InputDateRange>
+<InputDateRange id="date" label="test" bind:data={test}></InputDateRange>
 
 <Container>
     <Heading tag="h2" size="5">Usage</Heading>
@@ -64,6 +67,7 @@
             <p class="text">Usage period:</p>
 
             <InputSelect
+                wrapperTag="div"
                 id="period"
                 label="Usage period"
                 showLabel={false}