Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: work on the upgrade and downgrade modal

Browse Source
This commit is contained in:
Arman
2023-07-20 18:28:59 +02:00
parent 19d83e0b26
commit 21952837ab
12 changed files with 70 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/stores/wizard.ts
+10
View File
@@ -1,4 +1,5 @@
import { trackEvent } from '$lib/actions/analytics';
import type { WizardStepsType } from '$lib/layout/wizard.svelte';
import type { SvelteComponent } from 'svelte';
import { writable } from 'svelte/store';
@@ -47,3 +48,12 @@ function createWizardStore() {
}
export const wizard = createWizardStore();
export function updateStepStatus(map: WizardStepsType, key: number, status: boolean) {
const updatedComponent = {
...map.get(key),
disabled: status
};
map.set(key, updatedComponent);
return map;
}
src/routes/console/changeOrganizationTierCloud.svelte
+12 -9
View File
@@ -7,13 +7,16 @@
import Step2 from './wizard/cloudOrganizationChangeTier/step2.svelte';
import Step3 from './wizard/cloudOrganizationChangeTier/step3.svelte';
import Step4 from './wizard/cloudOrganizationChangeTier/step4.svelte';
import { changeOrganizationTier } from './wizard/cloudOrganizationChangeTier/store';
import type { WizardStepsType } from '$lib/layout/wizard.svelte';
import {
changeOrganizationTier,
changeTierSteps
} from './wizard/cloudOrganizationChangeTier/store';
import { goto, invalidate } from '$app/navigation';
import { Dependencies } from '$lib/constants';
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
import { page } from '$app/stores';
import { organization } from '$lib/stores/organization';
import { wizard } from '$lib/stores/wizard';
const dispatch = createEventDispatcher();
@@ -37,6 +40,7 @@
[75]
);
}
//Add collaborators
if ($changeOrganizationTier?.collaborators?.length) {
$changeOrganizationTier.collaborators.forEach(async (collaborator) => {
@@ -62,6 +66,7 @@
trackEvent(Submit.OrganizationCreate, {
customId: !!$changeOrganizationTier.id
});
wizard.hide();
} catch (e) {
addNotification({
type: 'error',
@@ -79,21 +84,19 @@
};
});
const stepsComponents: WizardStepsType = new Map();
stepsComponents.set(1, {
$changeTierSteps.set(1, {
label: 'Change plan',
component: Step1
});
stepsComponents.set(2, {
$changeTierSteps.set(2, {
label: 'Payment details',
component: Step2
});
stepsComponents.set(3, {
$changeTierSteps.set(3, {
label: 'Invite collaborators',
component: Step3
});
stepsComponents.set(4, {
$changeTierSteps.set(4, {
label: 'Review & confirm',
component: Step4
});
@@ -101,7 +104,7 @@
<Wizard
title="Change plan"
steps={stepsComponents}
steps={$changeTierSteps}
finalAction="Start trial"
on:finish={upgrade}
on:exit={onFinish} />
src/routes/console/createOrganizationCloud.svelte
+8 -6
View File
@@ -7,12 +7,13 @@
import Step2 from './wizard/cloudOrganization/step2.svelte';
import Step3 from './wizard/cloudOrganization/step3.svelte';
import Step4 from './wizard/cloudOrganization/step4.svelte';
import { createOrganization, stepsComponents } from './wizard/cloudOrganization/store';
import { createOrganization, createOrgSteps } from './wizard/cloudOrganization/store';
import { goto, invalidate } from '$app/navigation';
import { Dependencies } from '$lib/constants';
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
import { ID } from '@appwrite.io/console';
import { page } from '$app/stores';
import { wizard } from '$lib/stores/wizard';
const dispatch = createEventDispatcher();
@@ -59,6 +60,7 @@
trackEvent(Submit.OrganizationCreate, {
customId: !!$createOrganization.id
});
wizard.hide();
} catch (e) {
addNotification({
type: 'error',
@@ -77,19 +79,19 @@
};
});
$stepsComponents.set(1, {
$createOrgSteps.set(1, {
label: 'Organization details',
component: Step1
});
$stepsComponents.set(2, {
$createOrgSteps.set(2, {
label: 'Payment details',
component: Step2
});
$stepsComponents.set(3, {
$createOrgSteps.set(3, {
label: 'Invite collaborators',
component: Step3
});
$stepsComponents.set(4, {
$createOrgSteps.set(4, {
label: 'Review & confirm',
component: Step4
});
@@ -97,7 +99,7 @@
<Wizard
title="Create organization"
steps={$stepsComponents}
steps={$createOrgSteps}
finalAction="Start trial"
on:finish={create}
on:exit={onFinish} />
src/routes/console/organization-[organization]/billing/billingAddress.svelte
+1 -1
View File
@@ -16,7 +16,7 @@
<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={showDropdown} placement="bottom-end">
<DropList bind:show={showDropdown} placement="bottom-start">
<Button secondary round on:click={() => (showDropdown = !showDropdown)}>
<i class="icon-plus" />
</Button>
src/routes/console/organization-[organization]/billing/paymentHistory.svelte
+4 -3
View File
@@ -53,16 +53,17 @@
{#if $invoiceList.total}
<Table noMargin noStyles>
<TableHeader>
<TableCellHead>Date</TableCellHead>
<TableCellHead>Due Date</TableCellHead>
<TableCellHead>Status</TableCellHead>
<TableCellHead>Amount Due</TableCellHead>
<TableCellHead>Invoce #</TableCellHead>
<TableCellHead width={20} />
<TableCellHead width={40} />
</TableHeader>
<TableBody>
{#each $invoiceList?.invoices as invoice, i}
<TableRow>
<TableCellText title="date">{toLocaleDate(invoice.from)}</TableCellText>
<TableCellText title="date"
>{toLocaleDate(invoice.dueAt)}</TableCellText>
<TableCell title="status">
<Pill>{invoice.status}</Pill>
</TableCell>
src/routes/console/organization-[organization]/billing/paymentMethods.svelte
+2 -2
View File
@@ -133,7 +133,7 @@
<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={showDropdown} placement="bottom-end">
<DropList bind:show={showDropdown} placement="bottom-start">
<Button secondary round on:click={() => (showDropdown = !showDropdown)}>
<i class="icon-plus" />
</Button>
@@ -167,7 +167,7 @@
<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-end">
<DropList bind:show={showDropdownBackup} placement="bottom-start">
<Button
secondary
round
src/routes/console/organization-[organization]/createProjectCloud.svelte
+2
View File
@@ -12,6 +12,7 @@
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
import { ID } from '@appwrite.io/console';
import { createProject } from './wizard/store';
import { wizard } from '$lib/stores/wizard';
const teamId = $page.params.organization;
const dispatch = createEventDispatcher();
@@ -38,6 +39,7 @@
message: `${$createProject.name} has been created`
});
await goto(`/console/project-${project.$id}`);
wizard.hide();
} catch (e) {
addNotification({
type: 'error',
src/routes/console/wizard/cloudOrganization/step1.svelte
+6 -5
View File
@@ -5,7 +5,8 @@
import { WizardStep } from '$lib/layout';
import { tierFree, tierPro, tierScale } from '$lib/stores/billing';
import { organizationList, type Organization } from '$lib/stores/organization';
import { createOrganization, stepsComponents, updateComponentStatus } from './store';
import { updateStepStatus } from '$lib/stores/wizard';
import { createOrganization, createOrgSteps } from './store';
let showCustomId = false;
@@ -14,16 +15,16 @@
);
$: if ($createOrganization.billingPlan === 'tier-0') {
$stepsComponents = updateComponentStatus($stepsComponents, 2, true);
$stepsComponents = updateComponentStatus($stepsComponents, 3, true);
$createOrgSteps = updateStepStatus($createOrgSteps, 2, true);
$createOrgSteps = updateStepStatus($createOrgSteps, 3, true);
}
$: if (
$createOrganization.billingPlan === 'tier-2' ||
$createOrganization.billingPlan === 'tier-1'
) {
$stepsComponents = updateComponentStatus($stepsComponents, 2, false);
$stepsComponents = updateComponentStatus($stepsComponents, 3, false);
$createOrgSteps = updateStepStatus($createOrgSteps, 2, false);
$createOrgSteps = updateStepStatus($createOrgSteps, 3, false);
}
</script>
src/routes/console/wizard/cloudOrganization/step2.svelte
+4 -4
View File
@@ -79,20 +79,20 @@
});
console.log(clientSecret);
if (!clientSecret) {
console.log('test2');
paymentMethod = await sdk.forConsole.billing.createPaymentMethod();
clientSecret = paymentMethod.clientSecret;
}
const { setupIntent } = await stripe.retrieveSetupIntent(paymentMethod.clientSecret);
const { setupIntent } = await stripe.retrieveSetupIntent(clientSecret);
if (setupIntent && setupIntent.status === 'succeeded') {
await sdk.forConsole.billing.setOrganizationPaymentMethod(
$organization.$id,
$createOrganization.id,
paymentMethod.$id
);
await invalidate(Dependencies.PAYMENT_METHODS);
console.log('test');
// const paymentElement = elements.getElement('payment');
// paymentElement.destroy();
} else console.log('test2');
} else console.log('something went wrong');
} catch (e) {
console.log(e);
// trackError(StripeError, Submit.ProjectCreate);
src/routes/console/wizard/cloudOrganization/store.ts
+1 -10
View File
@@ -2,16 +2,7 @@ import type { WizardStepsType } from '$lib/layout/wizard.svelte';
import type { Tier } from '$lib/stores/billing';
import { writable } from 'svelte/store';
export const stepsComponents = writable<WizardStepsType>(new Map());
export function updateComponentStatus(map: WizardStepsType, key: number, status: boolean) {
const updatedComponent = {
...map.get(key),
disabled: status
};
map.set(key, updatedComponent);
return map;
}
export const createOrgSteps = writable<WizardStepsType>(new Map());
export const createOrganization = writable<{
id?: string;
src/routes/console/wizard/cloudOrganizationChangeTier/step1.svelte
+17 -1
View File
@@ -4,7 +4,21 @@
import { WizardStep } from '$lib/layout';
import { tierFree, tierPro, tierScale } from '$lib/stores/billing';
import { organization } from '$lib/stores/organization';
import { changeOrganizationTier } from './store';
import { updateStepStatus } from '$lib/stores/wizard';
import { changeOrganizationTier, changeTierSteps } from './store';
$: if ($changeOrganizationTier.billingPlan === 'tier-0') {
$changeTierSteps = updateStepStatus($changeTierSteps, 2, true);
$changeTierSteps = updateStepStatus($changeTierSteps, 3, true);
}
$: if (
$changeOrganizationTier.billingPlan === 'tier-2' ||
$changeOrganizationTier.billingPlan === 'tier-1'
) {
$changeTierSteps = updateStepStatus($changeTierSteps, 2, false);
$changeTierSteps = updateStepStatus($changeTierSteps, 3, false);
}
</script>
<WizardStep>
@@ -81,4 +95,6 @@
</li>
{/if}
</ul>
{#if $organization.billingPlan === 'tier-0'}tesr{/if}
</WizardStep>
src/routes/console/wizard/cloudOrganizationChangeTier/store.ts
+3
View File
@@ -1,6 +1,9 @@
import type { WizardStepsType } from '$lib/layout/wizard.svelte';
import type { Tier } from '$lib/stores/billing';
import { writable } from 'svelte/store';
export const changeTierSteps = writable<WizardStepsType>(new Map());
export const changeOrganizationTier = writable<{
id?: string;
billingPlan: Tier;