mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
update: copies, ui as per new designs.
This commit is contained in:
Darshan
@@ -79,7 +79,7 @@
|
||||
|
||||
<Form onSubmit={updateBudget}>
|
||||
<CardGrid>
|
||||
<Heading tag="h2" size="6">Budget alerts</Heading>
|
||||
<Heading tag="h2" size="6">Billing alerts</Heading>
|
||||
|
||||
<p class="text">
|
||||
{#if $organization?.billingPlan === BillingPlan.FREE}
|
||||
@@ -94,15 +94,9 @@
|
||||
{#if $organization?.billingPlan === BillingPlan.FREE}
|
||||
<Alert type="info">
|
||||
<svelte:fragment slot="title"
|
||||
>Budget alerts are a Pro plan feature
|
||||
>Billing alerts are a Pro plan feature
|
||||
</svelte:fragment>
|
||||
Upgrade to a Pro plan to set a budget alerts for your organization. For more information
|
||||
on what you can do with a Pro plan,
|
||||
<a
|
||||
class="link"
|
||||
href="https://appwrite.io/pricing"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">view our pricing guide.</a>
|
||||
Upgrade to a Pro plan to manage when you receive billing alerts for your organization.
|
||||
</Alert>
|
||||
{:else}
|
||||
<FormList>
|
||||
|
||||
@@ -55,8 +55,6 @@
|
||||
<p class="text">
|
||||
Restrict your resource usage by setting a budget cap. Cap usage is reset at the
|
||||
beginning of each billing cycle.
|
||||
<button class="link" type="button" on:click={() => ($showUsageRatesModal = true)}
|
||||
>Learn more about usage rates.</button>
|
||||
</p>
|
||||
<svelte:fragment slot="aside">
|
||||
{#if $organization?.billingPlan === BillingPlan.FREE}
|
||||
@@ -76,8 +74,12 @@
|
||||
<FormList>
|
||||
<InputSwitch id="cap-active" label="Enable budget cap" bind:value={capActive}>
|
||||
<svelte:fragment slot="description">
|
||||
Budget cap limits do not include the base amount of your plan. Cap usage
|
||||
is reset at the beginning of each billing cycle.
|
||||
Budget cap limits do not include the base amount of your plan. <button
|
||||
class="link"
|
||||
type="button"
|
||||
on:click={() => ($showUsageRatesModal = true)}
|
||||
>Learn more about usage rates.
|
||||
</button>
|
||||
</svelte:fragment>
|
||||
</InputSwitch>
|
||||
{#if capActive}
|
||||
|
||||
@@ -20,7 +20,6 @@
|
||||
import DeleteOrgPayment from './deleteOrgPayment.svelte';
|
||||
import ReplaceCard from './replaceCard.svelte';
|
||||
import EditPaymentModal from '$routes/(console)/account/payments/editPaymentModal.svelte';
|
||||
import { tooltip } from '$lib/actions/tooltip';
|
||||
import PaymentModal from '$lib/components/billing/paymentModal.svelte';
|
||||
import { user } from '$lib/stores/user';
|
||||
|
||||
@@ -198,8 +197,8 @@
|
||||
{#if $organization?.billingPlan !== BillingPlan.FREE}
|
||||
<!-- TODO: Add a simple button if a backup payment doesn't exist. -->
|
||||
<div class="u-flex u-flex-vertical u-gap-8">
|
||||
<h4 class="u-bold body-text-2">Backup</h4>
|
||||
{#if $organization?.backupPaymentMethodId}
|
||||
<h4 class="u-bold body-text-2">Backup</h4>
|
||||
<CreditCardInfo isBox paymentMethod={backupPaymentMethod}>
|
||||
<DropList bind:show={showDropdownBackup} placement="bottom-start" noArrow>
|
||||
<Button
|
||||
@@ -248,59 +247,47 @@
|
||||
{@const filteredPaymentMethods = $paymentMethods.paymentMethods.filter(
|
||||
(o) => !!o.last4 && o.$id !== $organization?.paymentMethodId
|
||||
)}
|
||||
<article class="card u-grid u-cross-center u-width-full-line dashed">
|
||||
<div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
|
||||
<div class="common-section">
|
||||
<DropList bind:show={showDropdownBackup} placement="bottom-start">
|
||||
<Button
|
||||
secondary
|
||||
round
|
||||
on:click={() => {
|
||||
if (filteredPaymentMethods.length) {
|
||||
showDropdownBackup = !showDropdownBackup;
|
||||
} else {
|
||||
isSelectedBackup = true;
|
||||
showPayment = true;
|
||||
}
|
||||
}}>
|
||||
<i class="icon-plus" />
|
||||
</Button>
|
||||
<svelte:fragment slot="list">
|
||||
{#if $paymentMethods.total}
|
||||
{#each filteredPaymentMethods as paymentMethod}
|
||||
<DropListItem
|
||||
on:click={() => {
|
||||
showDropdownBackup = true;
|
||||
addBackupPaymentMethod(paymentMethod?.$id);
|
||||
}}>
|
||||
<span class="u-flex u-cross-center u-gap-8">
|
||||
<p class="text">
|
||||
Card ending in {paymentMethod.last4}
|
||||
</p>
|
||||
<CreditCardBrandImage
|
||||
brand={paymentMethod?.brand} />
|
||||
</span>
|
||||
</DropListItem>
|
||||
{/each}
|
||||
{/if}
|
||||
<DropListItem on:click={() => (showPayment = true)}>
|
||||
Add new payment method
|
||||
</DropListItem>
|
||||
</svelte:fragment>
|
||||
</DropList>
|
||||
</div>
|
||||
<div class="common-section u-flex u-cross-center u-gap-4">
|
||||
<div
|
||||
class="u-bold body-text-2 u-flex u-cross-center u-gap-8 u-padding-block-start-8">
|
||||
<DropList bind:show={showDropdownBackup} placement="bottom-start">
|
||||
<Button
|
||||
text
|
||||
noMargin
|
||||
on:click={() => {
|
||||
if (filteredPaymentMethods.length) {
|
||||
showDropdownBackup = !showDropdownBackup;
|
||||
} else {
|
||||
isSelectedBackup = true;
|
||||
showPayment = true;
|
||||
}
|
||||
}}>
|
||||
<i class="icon-plus" />
|
||||
<span class="text"> Add a backup payment method </span>
|
||||
<span
|
||||
class="icon-info"
|
||||
style="font-size: var(--icon-size-small)"
|
||||
use:tooltip={{
|
||||
content:
|
||||
'When your default payment method fails, a backup method will be used to pay your invoice automatically'
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</Button>
|
||||
<svelte:fragment slot="list">
|
||||
{#if $paymentMethods.total}
|
||||
{#each filteredPaymentMethods as paymentMethod}
|
||||
<DropListItem
|
||||
on:click={() => {
|
||||
showDropdownBackup = true;
|
||||
addBackupPaymentMethod(paymentMethod?.$id);
|
||||
}}>
|
||||
<span class="u-flex u-cross-center u-gap-8">
|
||||
<p class="text">
|
||||
Card ending in {paymentMethod.last4}
|
||||
</p>
|
||||
<CreditCardBrandImage
|
||||
brand={paymentMethod?.brand} />
|
||||
</span>
|
||||
</DropListItem>
|
||||
{/each}
|
||||
{/if}
|
||||
<DropListItem on:click={() => (showPayment = true)}>
|
||||
Add new payment method
|
||||
</DropListItem>
|
||||
</svelte:fragment>
|
||||
</DropList>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -199,7 +199,7 @@
|
||||
{#if $organization?.billingPlan === BillingPlan.FREE}
|
||||
<!-- TODO: make center on mobile and have different styles. -->
|
||||
<div
|
||||
class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line">
|
||||
class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line u-main-end">
|
||||
<Button secondary href={`${base}/organization-${$organization?.$id}/usage`}>
|
||||
View estimated usage
|
||||
</Button>
|
||||
@@ -216,7 +216,8 @@
|
||||
</Button>
|
||||
</div>
|
||||
{:else if $organization?.billingPlan !== BillingPlan.GITHUB_EDUCATION}
|
||||
<div class="u-flex u-gap-16 u-flex-wrap">
|
||||
<div
|
||||
class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line u-main-end">
|
||||
<Button
|
||||
text
|
||||
disabled={$organization?.markedForDeletion}
|
||||
|
||||
Reference in New Issue
Block a user