feat: refactor modals, stripe colors, failed payments

src/lib/components/alert.svelte

@@ -44,7 +44,6 @@
                     <slot name="title" />
                 </h6>
             {/if}
-            <p class="alert-message"><slot /></p>
 
             {#if $$slots.default}
                 <p class="alert-message"><slot /></p>

src/lib/components/creditCardInfo.svelte

@@ -1,30 +1,39 @@
 <script lang="ts">
     import type { PaymentMethodData } from '$lib/sdk/billing';
     import { getCreditCardImage } from '$lib/stores/billing';
+    import { Alert } from '.';
 
     export let isBox = false;
     export let paymentMethod: PaymentMethodData;
 </script>
 
-<div class:box={isBox} class="u-flex u-main-space-between u-cross-start">
-    <div class="u-line-height-1-5">
-        <span class="u-flex u-cross-center u-gap-8">
-            <p class="text u-bold">
-                <span class="u-capitalize">{paymentMethod?.brand}</span> ending in {paymentMethod?.last4}
+<div class:box={isBox}>
+    <div class="u-flex u-main-space-between u-cross-start">
+        <div class="u-line-height-1-5">
+            <span class="u-flex u-cross-center u-gap-8">
+                <p class="text u-bold">
+                    <span class="u-capitalize">{paymentMethod?.brand}</span> ending in {paymentMethod?.last4}
+                </p>
+                <img
+                    width="23"
+                    height="16"
+                    src={getCreditCardImage(paymentMethod?.brand)}
+                    alt={paymentMethod?.brand} />
+            </span>
+            <p class="text">
+                Expires {paymentMethod?.expiryMonth}/{paymentMethod?.expiryYear}
             </p>
-            <img
-                width="23"
-                height="16"
-                src={getCreditCardImage(paymentMethod?.brand)}
-                alt={paymentMethod?.brand} />
-        </span>
-        <p class="text">
-            Expires {paymentMethod?.expiryMonth}/{paymentMethod?.expiryYear}
-        </p>
-        <!-- <p class="text">
-            {paymentMethod?.name}
-        </p> -->
-    </div>
+            <!-- TODO: add card owner name when in SDK 
+                <p class="text">
+                    {paymentMethod?.name}
+                </p> -->
+        </div>
 
-    <slot />
+        <slot />
+    </div>
+    {#if paymentMethod?.expired}
+        <Alert type="error" class="u-margin-block-start-16 u-width-full-line">
+            <svelte:fragment slot="title">This payment method has expired</svelte:fragment>
+        </Alert>
+    {/if}
 </div>

src/lib/elements/table/table.svelte

@@ -2,13 +2,14 @@
     export let noMargin = false;
     export let noStyles = false;
     export let style = '';
+    export let transparent = false;
 </script>
 
 <div
     class="table is-selected-columns-mobile"
     class:u-margin-block-start-32={!noMargin}
     class:is-remove-outer-styles={noStyles}
-    {style}
+    style={`${style} ${transparent ? '--p-table-bg-color: var(--transparent)' : ''}`}
     role="table"
     data-private>
     <slot />

src/lib/stores/billing.ts

@@ -78,20 +78,21 @@ export const tierScale = {
 export const apperanceLight = {
     variables: {
         colorPrimary: '#606a7b',
-        colorText: '#373B4D',
+        colorText: 'rgb(107, 107, 112)',
         colorBackground: '#FFFFFF',
         color: '#606a7b',
         colorDanger: '#df1b41',
         fontFamily: 'Inter, arial, sans-serif',
-        borderRadius: '4px'
+        borderRadius: '4px',
+        fontSizeBase: '14px'
     },
     rules: {
         '.Input:hover': {
-            border: 'solid 1px #C4C6D7',
+            border: 'solid 1px rgb(195, 195, 198)',
             boxShadow: 'none'
         },
         '.Input:focus': {
-            border: 'solid 1px #C4C6D7',
+            border: 'solid 1px rgb(195, 195, 198)',
             boxShadow: 'none'
         },
         '.Input::placeholder': {
@@ -103,24 +104,29 @@ export const apperanceLight = {
         }
     }
 };
+
 export const apperanceDark = {
     variables: {
         colorPrimary: '#606a7b',
-        colorText: '#C5C7D8',
-        colorBackground: '#161622',
+        colorText: 'rgb(195, 195, 198)',
+        colorBackground: 'rgb(24, 24, 27)',
         colorDanger: '#FF453A',
         fontFamily: 'Inter, arial, sans-serif',
-        borderRadius: '4px'
+        borderRadius: '4px',
+        fontSizeBase: '14px'
     },
     rules: {
         '.Input:hover': {
-            border: 'solid 1px #4F5769',
+            border: 'solid 1px rgb(87, 87, 92)',
             boxShadow: 'none'
         },
         '.Input:focus': {
-            border: 'solid 1px #4F5769',
+            border: 'solid 1px rgb(87, 87, 92)',
             boxShadow: 'none'
         },
+        '.Input::placeholder': {
+            color: 'rgb(87, 87, 92)'
+        },
         '.Input--invalid': {
             border: 'solid 1px var(--colorDanger)',
             boxShadow: 'none'

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

@@ -62,8 +62,7 @@
     $: isButtonDisabled = !country || !address || !city || !state || !zip;
 </script>
 
-<Modal bind:show onSubmit={handleSubmit} size="big">
-    <svelte:fragment slot="header">Add billing address</svelte:fragment>
+<Modal bind:show onSubmit={handleSubmit} size="big" title="Add billing address">
     <InputSelect
         bind:value={country}
         {options}

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

@@ -35,8 +35,8 @@
     onSubmit={handleDelete}
     icon="exclamation"
     state="warning"
-    headerDivider={false}>
-    <svelte:fragment slot="header">Delete billing address</svelte:fragment>
+    headerDivider={false}
+    title="Delete billing address">
     <p class="text">Are you sure you want to delete this billing address from your account?</p>
 
     <svelte:fragment slot="footer">

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

@@ -58,8 +58,7 @@
     }
 </script>
 
-<Modal bind:show onSubmit={handleSubmit} size="big">
-    <svelte:fragment slot="header">Edit billing address</svelte:fragment>
+<Modal bind:show onSubmit={handleSubmit} size="big" title="Edit billing address">
     <InputSelect
         bind:value={selectedAddress.country}
         {options}

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

@@ -48,8 +48,7 @@
     }
 </script>
 
-<Modal bind:error onSubmit={handleSubmit} size="big" bind:show>
-    <svelte:fragment slot="header">Update payment method</svelte:fragment>
+<Modal bind:error onSubmit={handleSubmit} size="big" bind:show title="Update payment method">
     <FormList>
         <InputSelect
             id="month"

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

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

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

@@ -33,8 +33,7 @@
     }
 </script>
 
-<Modal bind:error onSubmit={handleSubmit} size="big" bind:show>
-    <svelte:fragment slot="header">Add payment method</svelte:fragment>
+<Modal bind:error onSubmit={handleSubmit} size="big" bind:show title="Add payment method">
     <FormList>
         <InputText
             id="name"

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

@@ -15,6 +15,10 @@
     $: defaultPaymentMethod = $paymentMethods?.paymentMethods?.find(
         (method: PaymentMethodData) => method.$id === $organization?.paymentMethodId
     );
+
+    $: backupPaymentMethod = $paymentMethods?.paymentMethods?.find(
+        (method: PaymentMethodData) => method.$id === $organization?.backupPaymentMethodId
+    );
 </script>
 
 <Container>
@@ -26,7 +30,7 @@
             To avoid service disruptions in your projects, please verify your payment details and update
             them if necessary.
         </Alert>
-    {:else if defaultPaymentMethod?.failed}
+    {:else if defaultPaymentMethod?.failed && !backupPaymentMethod}
         <Alert type="error">
             <svelte:fragment slot="title">
                 The default payment method for {$organization.name} has expired

src/routes/console/organization-[organization]/billing/deleteOrgPayment.svelte

@@ -55,8 +55,8 @@
     onSubmit={isBackup ? removeBackuptMethod : removeDefaultMethod}
     icon="exclamation"
     state="warning"
-    headerDivider={false}>
-    <svelte:fragment slot="header">Delete payment method</svelte:fragment>
+    headerDivider={false}
+    title="Delete payment method">
     <p data-private>
         Are you sure you want to delete the payment method from <b>{$organization?.name}</b>?
     </p>

src/routes/console/organization-[organization]/billing/paymentHistory.svelte

@@ -87,7 +87,7 @@
     </p>
     <svelte:fragment slot="aside">
         {#if invoiceList.total}
-            <Table noMargin noStyles>
+            <Table noMargin noStyles transparent>
                 <TableHeader>
                     <TableCellHead>Due Date</TableCellHead>
                     <TableCellHead>Status</TableCellHead>

src/routes/console/organization-[organization]/billing/replaceCard.svelte

@@ -100,8 +100,13 @@
     }
 </script>
 
-<Modal bind:show bind:error onSubmit={handleSubmit} size="big" headerDivider={false}>
-    <svelte:fragment slot="header">Replace payment method</svelte:fragment>
+<Modal
+    bind:show
+    bind:error
+    onSubmit={handleSubmit}
+    size="big"
+    headerDivider={false}
+    title="Replace payment method">
     <p class="text">Replace the existing payment method for your organization.</p>
     <div class:boxes-wrapper={methods?.total}>
         {#if methods?.total}

src/routes/console/wizard/cloudOrganization/usageRates.svelte

@@ -57,8 +57,7 @@
     ];
 </script>
 
-<Modal bind:show size="big" headerDivider={false}>
-    <svelte:fragment slot="header">Usage rates</svelte:fragment>
+<Modal bind:show size="big" headerDivider={false} title="Usage rates">
     <p>
         Usage on the Pro plan and Scale plan will be charged at the end of each billing period at
         the following rates. Next billing period: {toLocaleDate(nextDate)}