mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
fix: address wizard step
This commit is contained in:
Arman
@@ -37,7 +37,6 @@
|
||||
if (!$isStripeInitialized) {
|
||||
await initializeStripe();
|
||||
}
|
||||
console.log('test');
|
||||
try {
|
||||
const invoiceId = $page.url.searchParams.get('invoice');
|
||||
console.log(invoiceId);
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
import { Pill } from '$lib/elements';
|
||||
import { Button } from '$lib/elements/forms';
|
||||
import { toLocaleDate } from '$lib/helpers/date';
|
||||
import { daysLeftInTrial, plansInfo, tierFree, tierPro, tierScale } from '$lib/stores/billing';
|
||||
import { daysLeftInTrial, plansInfo, tierToPlan } from '$lib/stores/billing';
|
||||
import { organization } from '$lib/stores/organization';
|
||||
import { wizard } from '$lib/stores/wizard';
|
||||
import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
|
||||
@@ -26,12 +26,6 @@
|
||||
aggregation = $aggregationList.aggregations.find((a) => (a.$id = currentInvoice.$id));
|
||||
});
|
||||
|
||||
$: currentTier =
|
||||
$organization?.billingPlan === 'tier-2'
|
||||
? tierScale
|
||||
: $organization?.billingPlan === 'tier-1'
|
||||
? tierPro
|
||||
: tierFree;
|
||||
$: currentPlan = $plansInfo.plans.find((p) => p.$id === $organization.billingPlan);
|
||||
$: extraUsage = currentInvoice?.amount - currentPlan?.price;
|
||||
</script>
|
||||
@@ -55,7 +49,7 @@
|
||||
<div class="u-flex u-main-space-between u-cross-center">
|
||||
<div class="u-flex u-gap-8 u-cross-center">
|
||||
<h6 class="u-bold u-trim-1">
|
||||
{currentTier.name} plan
|
||||
{tierToPlan($organization.billingPlan)?.name} plan
|
||||
</h6>
|
||||
{#if $organization?.billingPlan !== 'tier-0' && $daysLeftInTrial}
|
||||
<Pill>FREE TRIAL</Pill>
|
||||
@@ -66,10 +60,10 @@
|
||||
{#if !extraUsage}
|
||||
<span class="text u-color-text-gray">Total to-date (in USD):</span>
|
||||
{/if}
|
||||
${currentPlan?.price}
|
||||
${$daysLeftInTrial ? 0 : currentPlan?.price}
|
||||
</p>
|
||||
</div>
|
||||
{#if currentInvoice && $organization?.billingPlan !== 'tier-0' && extraUsage}
|
||||
{#if currentInvoice && $organization?.billingPlan !== 'tier-0' && extraUsage > 0 && !$daysLeftInTrial}
|
||||
<div class="u-flex u-main-space-between u-margin-block-start-8">
|
||||
<p class="text u-color-text-gray">Extra usage</p>
|
||||
<p class="text">${extraUsage}</p>
|
||||
|
||||
@@ -34,80 +34,82 @@
|
||||
|
||||
<p class="text u-margin-block-start-24"><b>Billing address</b></p>
|
||||
<FormList class="u-margin-block-start-8">
|
||||
<RadioBoxes
|
||||
total={addressList?.total}
|
||||
name="address"
|
||||
bind:group={$createOrganization.billingAddressId}
|
||||
elements={addressList.billingAddresses}>
|
||||
<svelte:fragment slot="element" let:element>
|
||||
<div
|
||||
class="u-line-height-1-5 u-flex u-flex-vertical u-gap-2"
|
||||
style="padding-inline:0.25rem">
|
||||
<p class="text">{element.streetAddress}</p>
|
||||
{#if element?.addressLine2}
|
||||
<p class="text">{element.addressLine2}</p>
|
||||
{/if}
|
||||
<p class="text">{element.city}</p>
|
||||
<p class="text">{element.state}</p>
|
||||
<p class="text">{element.postalCode}</p>
|
||||
<p class="text">{element.country}</p>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
{#if addressList}
|
||||
<RadioBoxes
|
||||
total={addressList?.total}
|
||||
name="address"
|
||||
bind:group={$createOrganization.billingAddressId}
|
||||
elements={addressList.billingAddresses}>
|
||||
<svelte:fragment slot="element" let:element>
|
||||
<div
|
||||
class="u-line-height-1-5 u-flex u-flex-vertical u-gap-2"
|
||||
style="padding-inline:0.25rem">
|
||||
<p class="text">{element.streetAddress}</p>
|
||||
{#if element?.addressLine2}
|
||||
<p class="text">{element.addressLine2}</p>
|
||||
{/if}
|
||||
<p class="text">{element.city}</p>
|
||||
<p class="text">{element.state}</p>
|
||||
<p class="text">{element.postalCode}</p>
|
||||
<p class="text">{element.country}</p>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="new">
|
||||
<span style="padding-inline:0.25rem">Add new billing address</span>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="new">
|
||||
<span style="padding-inline:0.25rem">Add new billing address</span>
|
||||
</svelte:fragment>
|
||||
|
||||
<FormList gap={16} class="u-margin-block-start-24">
|
||||
<InputText
|
||||
bind:value={$createOrganization.taxId}
|
||||
id="text"
|
||||
label="Tax ID"
|
||||
placeholder="Enter tax ID"
|
||||
optionalText="(optional)" />
|
||||
<InputSelect
|
||||
bind:value={$createOrganization.billingAddress.country}
|
||||
{options}
|
||||
label="Country or region"
|
||||
placeholder="Select country or region"
|
||||
id="country"
|
||||
required />
|
||||
<InputText
|
||||
bind:value={$createOrganization.billingAddress.streetAddress}
|
||||
id="address"
|
||||
label="Street address"
|
||||
placeholder="Enter street address"
|
||||
required />
|
||||
<InputText
|
||||
bind:value={$createOrganization.billingAddress.addressLine2}
|
||||
id="address2"
|
||||
label="Address line 2"
|
||||
placeholder="Unit number, floor, etc." />
|
||||
<InputText
|
||||
bind:value={$createOrganization.billingAddress.city}
|
||||
id="city"
|
||||
label="City or suburb"
|
||||
placeholder="Enter your city"
|
||||
required />
|
||||
<FormItem isMultiple>
|
||||
<FormList gap={16} class="u-margin-block-start-24">
|
||||
<InputText
|
||||
isMultiple
|
||||
fullWidth
|
||||
bind:value={$createOrganization.billingAddress.state}
|
||||
id="state"
|
||||
label="State"
|
||||
placeholder="Enter your state"
|
||||
bind:value={$createOrganization.taxId}
|
||||
id="text"
|
||||
label="Tax ID"
|
||||
placeholder="Enter tax ID"
|
||||
optionalText="(optional)" />
|
||||
<InputSelect
|
||||
bind:value={$createOrganization.billingAddress.country}
|
||||
{options}
|
||||
label="Country or region"
|
||||
placeholder="Select country or region"
|
||||
id="country"
|
||||
required />
|
||||
<InputText
|
||||
isMultiple
|
||||
fullWidth
|
||||
bind:value={$createOrganization.billingAddress.postalCode}
|
||||
id="zip"
|
||||
label="Postal code"
|
||||
placeholder="Enter postal code"
|
||||
bind:value={$createOrganization.billingAddress.streetAddress}
|
||||
id="address"
|
||||
label="Street address"
|
||||
placeholder="Enter street address"
|
||||
required />
|
||||
</FormItem>
|
||||
</FormList>
|
||||
</RadioBoxes>
|
||||
<InputText
|
||||
bind:value={$createOrganization.billingAddress.addressLine2}
|
||||
id="address2"
|
||||
label="Address line 2"
|
||||
placeholder="Unit number, floor, etc." />
|
||||
<InputText
|
||||
bind:value={$createOrganization.billingAddress.city}
|
||||
id="city"
|
||||
label="City or suburb"
|
||||
placeholder="Enter your city"
|
||||
required />
|
||||
<FormItem isMultiple>
|
||||
<InputText
|
||||
isMultiple
|
||||
fullWidth
|
||||
bind:value={$createOrganization.billingAddress.state}
|
||||
id="state"
|
||||
label="State"
|
||||
placeholder="Enter your state"
|
||||
required />
|
||||
<InputText
|
||||
isMultiple
|
||||
fullWidth
|
||||
bind:value={$createOrganization.billingAddress.postalCode}
|
||||
id="zip"
|
||||
label="Postal code"
|
||||
placeholder="Enter postal code"
|
||||
required />
|
||||
</FormItem>
|
||||
</FormList>
|
||||
</RadioBoxes>
|
||||
{/if}
|
||||
</FormList>
|
||||
</WizardStep>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { FormItem, FormList, InputRadio, InputSelect, InputText } from '$lib/elements/forms';
|
||||
import { FormItem, FormList, InputSelect, InputText } from '$lib/elements/forms';
|
||||
import { WizardStep } from '$lib/layout';
|
||||
import { onMount } from 'svelte';
|
||||
import { sdk } from '$lib/stores/sdk';
|
||||
import { changeOrganizationTier } from './store';
|
||||
import { organization } from '$lib/stores/organization';
|
||||
import type { AddressesList } from '$lib/sdk/billing';
|
||||
import { RadioBoxes } from '$lib/components';
|
||||
|
||||
let options = [
|
||||
{
|
||||
@@ -36,95 +37,82 @@
|
||||
|
||||
<p class="text u-margin-block-start-24"><b>Billing address</b></p>
|
||||
<FormList class="u-margin-block-start-8">
|
||||
<div class:boxes-wrapper={addressList?.total}>
|
||||
{#if addressList?.total}
|
||||
{#each addressList.billingAddresses as address}
|
||||
<div class="box">
|
||||
<InputRadio
|
||||
id={`address-${address.$id}`}
|
||||
value={address.$id}
|
||||
name="address"
|
||||
bind:group={$changeOrganizationTier.billingAddressId}>
|
||||
<div
|
||||
class="u-line-height-1-5 u-flex u-flex-vertical u-gap-2"
|
||||
style="padding-inline:0.25rem">
|
||||
<p class="text">{address.streetAddress}</p>
|
||||
{#if address?.addressLine2}
|
||||
<p class="text">{address.addressLine2}</p>
|
||||
{/if}
|
||||
<p class="text">{address.city}</p>
|
||||
<p class="text">{address.state}</p>
|
||||
<p class="text">{address.postalCode}</p>
|
||||
<p class="text">{address.country}</p>
|
||||
</div>
|
||||
</InputRadio>
|
||||
{#if addressList}
|
||||
<RadioBoxes
|
||||
total={addressList?.total}
|
||||
name="address"
|
||||
bind:group={$changeOrganizationTier.billingAddressId}
|
||||
elements={addressList.billingAddresses}>
|
||||
<svelte:fragment slot="element" let:element>
|
||||
<div
|
||||
class="u-line-height-1-5 u-flex u-flex-vertical u-gap-2"
|
||||
style="padding-inline:0.25rem">
|
||||
<p class="text">{element.streetAddress}</p>
|
||||
{#if element?.addressLine2}
|
||||
<p class="text">{element.addressLine2}</p>
|
||||
{/if}
|
||||
<p class="text">{element.city}</p>
|
||||
<p class="text">{element.state}</p>
|
||||
<p class="text">{element.postalCode}</p>
|
||||
<p class="text">{element.country}</p>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
|
||||
<div class="box">
|
||||
{#if addressList?.total}
|
||||
<InputRadio
|
||||
<svelte:fragment slot="new">
|
||||
<span style="padding-inline:0.25rem">Add new billing address</span>
|
||||
</svelte:fragment>
|
||||
|
||||
<FormList gap={16} class="u-margin-block-start-24">
|
||||
<InputText
|
||||
bind:value={$changeOrganizationTier.taxId}
|
||||
id="text"
|
||||
label="Tax ID"
|
||||
placeholder="Enter tax ID"
|
||||
optionalText="(optional)" />
|
||||
<InputSelect
|
||||
bind:value={$changeOrganizationTier.billingAddress.country}
|
||||
{options}
|
||||
label="Country or region"
|
||||
placeholder="Select country or region"
|
||||
id="country"
|
||||
required />
|
||||
<InputText
|
||||
bind:value={$changeOrganizationTier.billingAddress.streetAddress}
|
||||
id="address"
|
||||
value={null}
|
||||
name="address"
|
||||
bind:group={$changeOrganizationTier.billingAddressId}>
|
||||
<span style="padding-inline:0.25rem">Add new billing address</span>
|
||||
</InputRadio>
|
||||
{/if}
|
||||
{#if $changeOrganizationTier.billingAddressId === null}
|
||||
<FormList gap={16} class="u-margin-block-start-24">
|
||||
label="Street address"
|
||||
placeholder="Enter street address"
|
||||
required />
|
||||
<InputText
|
||||
bind:value={$changeOrganizationTier.billingAddress.addressLine2}
|
||||
id="address2"
|
||||
label="Address line 2"
|
||||
placeholder="Unit number, floor, etc." />
|
||||
<InputText
|
||||
bind:value={$changeOrganizationTier.billingAddress.city}
|
||||
id="city"
|
||||
label="City or suburb"
|
||||
placeholder="Enter your city"
|
||||
required />
|
||||
<FormItem isMultiple>
|
||||
<InputText
|
||||
bind:value={$changeOrganizationTier.taxId}
|
||||
id="text"
|
||||
label="Tax ID"
|
||||
placeholder="Enter tax ID"
|
||||
optionalText="(optional)" />
|
||||
<InputSelect
|
||||
bind:value={$changeOrganizationTier.billingAddress.country}
|
||||
{options}
|
||||
label="Country or region"
|
||||
placeholder="Select country or region"
|
||||
id="country"
|
||||
isMultiple
|
||||
fullWidth
|
||||
bind:value={$changeOrganizationTier.billingAddress.state}
|
||||
id="state"
|
||||
label="State"
|
||||
placeholder="Enter your state"
|
||||
required />
|
||||
<InputText
|
||||
bind:value={$changeOrganizationTier.billingAddress.streetAddress}
|
||||
id="address"
|
||||
label="Street address"
|
||||
placeholder="Enter street address"
|
||||
isMultiple
|
||||
fullWidth
|
||||
bind:value={$changeOrganizationTier.billingAddress.postalCode}
|
||||
id="zip"
|
||||
label="Postal code"
|
||||
placeholder="Enter postal code"
|
||||
required />
|
||||
<InputText
|
||||
bind:value={$changeOrganizationTier.billingAddress.addressLine2}
|
||||
id="address2"
|
||||
label="Address line 2"
|
||||
placeholder="Unit number, floor, etc." />
|
||||
<InputText
|
||||
bind:value={$changeOrganizationTier.billingAddress.city}
|
||||
id="city"
|
||||
label="City or suburb"
|
||||
placeholder="Enter your city"
|
||||
required />
|
||||
<FormItem isMultiple>
|
||||
<InputText
|
||||
isMultiple
|
||||
fullWidth
|
||||
bind:value={$changeOrganizationTier.billingAddress.state}
|
||||
id="state"
|
||||
label="State"
|
||||
placeholder="Enter your state"
|
||||
required />
|
||||
<InputText
|
||||
isMultiple
|
||||
fullWidth
|
||||
bind:value={$changeOrganizationTier.billingAddress.postalCode}
|
||||
id="zip"
|
||||
label="Postal code"
|
||||
placeholder="Enter postal code"
|
||||
required />
|
||||
</FormItem>
|
||||
</FormList>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormList>
|
||||
</RadioBoxes>
|
||||
{/if}
|
||||
</FormList>
|
||||
</WizardStep>
|
||||
|
||||
Reference in New Issue
Block a user