From c4f6a4cf0e54d566342a99bc79700b1e7398eff2 Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 3 Oct 2023 15:12:28 +0200 Subject: [PATCH] feat: refactor modals, stripe colors, failed payments --- src/lib/components/alert.svelte | 1 - src/lib/components/creditCardInfo.svelte | 47 +++++++++++-------- src/lib/elements/table/table.svelte | 3 +- src/lib/stores/billing.ts | 24 ++++++---- .../account/payments/addressModal.svelte | 3 +- .../account/payments/deleteAddress.svelte | 4 +- .../account/payments/editAddressModal.svelte | 3 +- .../account/payments/editPaymentModal.svelte | 3 +- .../account/payments/paymentMethods.svelte | 2 +- .../account/payments/paymentModal.svelte | 3 +- .../billing/+page.svelte | 6 ++- .../billing/deleteOrgPayment.svelte | 4 +- .../billing/paymentHistory.svelte | 2 +- .../billing/replaceCard.svelte | 9 +++- .../cloudOrganization/usageRates.svelte | 3 +- 15 files changed, 68 insertions(+), 49 deletions(-) diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte index 4fa41721a..b935f72a5 100644 --- a/src/lib/components/alert.svelte +++ b/src/lib/components/alert.svelte @@ -44,7 +44,6 @@ {/if} -

{#if $$slots.default}

diff --git a/src/lib/components/creditCardInfo.svelte b/src/lib/components/creditCardInfo.svelte index 482aab8ed..0720af170 100644 --- a/src/lib/components/creditCardInfo.svelte +++ b/src/lib/components/creditCardInfo.svelte @@ -1,30 +1,39 @@ -
-
- -

- {paymentMethod?.brand} ending in {paymentMethod?.last4} +

+
+
+ +

+ {paymentMethod?.brand} ending in {paymentMethod?.last4} +

+ {paymentMethod?.brand} + +

+ Expires {paymentMethod?.expiryMonth}/{paymentMethod?.expiryYear}

- {paymentMethod?.brand} - -

- Expires {paymentMethod?.expiryMonth}/{paymentMethod?.expiryYear} -

- -
+ +
- + +
+ {#if paymentMethod?.expired} + + This payment method has expired + + {/if}
diff --git a/src/lib/elements/table/table.svelte b/src/lib/elements/table/table.svelte index 342071287..5245b1d21 100644 --- a/src/lib/elements/table/table.svelte +++ b/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;
diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts index 4c2669db4..fa4b1c3ad 100644 --- a/src/lib/stores/billing.ts +++ b/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' diff --git a/src/routes/console/account/payments/addressModal.svelte b/src/routes/console/account/payments/addressModal.svelte index 3d20f508d..118a16ce0 100644 --- a/src/routes/console/account/payments/addressModal.svelte +++ b/src/routes/console/account/payments/addressModal.svelte @@ -62,8 +62,7 @@ $: isButtonDisabled = !country || !address || !city || !state || !zip; - - Add billing address + - Delete billing address + headerDivider={false} + title="Delete billing address">

Are you sure you want to delete this billing address from your account?

diff --git a/src/routes/console/account/payments/editAddressModal.svelte b/src/routes/console/account/payments/editAddressModal.svelte index 3a3f1720e..954531528 100644 --- a/src/routes/console/account/payments/editAddressModal.svelte +++ b/src/routes/console/account/payments/editAddressModal.svelte @@ -58,8 +58,7 @@ } - - Edit billing address + - - Update payment method + {#if $paymentMethods?.total} - +
Payment methods diff --git a/src/routes/console/account/payments/paymentModal.svelte b/src/routes/console/account/payments/paymentModal.svelte index 704f99c75..314e58673 100644 --- a/src/routes/console/account/payments/paymentModal.svelte +++ b/src/routes/console/account/payments/paymentModal.svelte @@ -33,8 +33,7 @@ } - - Add payment method + method.$id === $organization?.paymentMethodId ); + + $: backupPaymentMethod = $paymentMethods?.paymentMethods?.find( + (method: PaymentMethodData) => method.$id === $organization?.backupPaymentMethodId + ); @@ -26,7 +30,7 @@ To avoid service disruptions in your projects, please verify your payment details and update them if necessary. - {:else if defaultPaymentMethod?.failed} + {:else if defaultPaymentMethod?.failed && !backupPaymentMethod} The default payment method for {$organization.name} has expired diff --git a/src/routes/console/organization-[organization]/billing/deleteOrgPayment.svelte b/src/routes/console/organization-[organization]/billing/deleteOrgPayment.svelte index 82071f2ab..e148cf1c4 100644 --- a/src/routes/console/organization-[organization]/billing/deleteOrgPayment.svelte +++ b/src/routes/console/organization-[organization]/billing/deleteOrgPayment.svelte @@ -55,8 +55,8 @@ onSubmit={isBackup ? removeBackuptMethod : removeDefaultMethod} icon="exclamation" state="warning" - headerDivider={false}> - Delete payment method + headerDivider={false} + title="Delete payment method">

Are you sure you want to delete the payment method from {$organization?.name}?

diff --git a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte index 92d559da1..bb1c2336e 100644 --- a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte +++ b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte @@ -87,7 +87,7 @@

{#if invoiceList.total} -
+
Due Date Status diff --git a/src/routes/console/organization-[organization]/billing/replaceCard.svelte b/src/routes/console/organization-[organization]/billing/replaceCard.svelte index 0d1a39571..2fe0e5611 100644 --- a/src/routes/console/organization-[organization]/billing/replaceCard.svelte +++ b/src/routes/console/organization-[organization]/billing/replaceCard.svelte @@ -100,8 +100,13 @@ } - - Replace payment method +

Replace the existing payment method for your organization.

{#if methods?.total} diff --git a/src/routes/console/wizard/cloudOrganization/usageRates.svelte b/src/routes/console/wizard/cloudOrganization/usageRates.svelte index 4afe45cb8..2e78315c3 100644 --- a/src/routes/console/wizard/cloudOrganization/usageRates.svelte +++ b/src/routes/console/wizard/cloudOrganization/usageRates.svelte @@ -57,8 +57,7 @@ ]; - - Usage rates +

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)}