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

fix: review comments, refactor confirmation

Browse Source
This commit is contained in:
Arman
2023-12-18 10:28:03 +01:00
parent 0bfd4ab90b
commit 739cd545cd
9 changed files with 64 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/labelCard.svelte
+2 -2
View File
@@ -12,7 +12,7 @@
export let backgroundColor: string = null;
export let backgroundColorHover: string = null;
export let tooltipText: string = null;
export let showTooltip = false;
export let tooltipShow = false;
enum Radius {
xsmall = '--border-radius-xsmall',
@@ -31,7 +31,7 @@
style:--card-border-radius={`var(${Radius[borderRadius]})`}
style:--p-card-bg-color-default={backgroundColor}
style:--p-card-bg-color-hover={backgroundColorHover}
use:tooltip={{ content: tooltipText, disabled: !tooltipText || !showTooltip }}>
use:tooltip={{ content: tooltipText, disabled: !tooltipText || !tooltipShow }}>
<div class="u-flex u-gap-8">
<input
class="is-small u-margin-block-start-2"
src/lib/components/step.svelte
+1 -1
View File
@@ -10,7 +10,7 @@
class:steps-item={!isSub}
class:steps-sub-item={isSub}
class:u-opacity-50={step.disabled}
style={`cursor: ${completed ? 'pointer' : 'default'};`}
style:cursor={completed ? 'pointer' : 'default'}
aria-label={`${completed ? 'done' : current ? 'current' : ''} step`}>
<button
type="button"
src/lib/elements/forms/inputDateRange.svelte
-2
View File
@@ -31,8 +31,6 @@
$: if ($value) {
data = $value;
}
$: console.log(data);
</script>
{#if label}
src/lib/elements/table/table.svelte
+2 -1
View File
@@ -9,7 +9,8 @@
class="table is-selected-columns-mobile"
class:u-margin-block-start-32={!noMargin}
class:is-remove-outer-styles={noStyles}
style={`${style} ${transparent ? '--p-table-bg-color: var(--transparent)' : ''}`}
{style}
style:--p-table-bg-color={transparent ? 'var(--transparent)' : ''}
role="table"
data-private>
<slot />
src/lib/elements/table/tableScroll.svelte
+2 -1
View File
@@ -45,7 +45,8 @@
<table
class="table"
class:is-sticky-scroll={isSticky && isOverflowing}
style={`${style} ${transparent ? '--p-table-bg-color: var(--transparent)' : ''}`}>
{style}
style:--p-table-bg-color={transparent ? 'var(--transparent)' : ''}>
<slot />
</table>
</div>
src/lib/stores/billing.ts
-8
View File
@@ -24,14 +24,6 @@ export const plansInfo = derived(page, ($page) => $page.data.plansInfo as PlansI
export const daysLeftInTrial = writable<number>(0);
export const readOnly = writable<boolean>(false);
// export type ReadOnlyData = {
// bandwidth: boolean;
// documents: boolean;
// executions: boolean;
// storage: boolean;
// users: boolean;
// };
export function tierToPlan(tier: Tier) {
switch (tier) {
case 'tier-0':
src/lib/stores/stripe.ts
+30 -6
View File
@@ -4,6 +4,7 @@ import { app } from './app';
import { get, writable } from 'svelte/store';
import type { PaymentMethodData } from '$lib/sdk/billing';
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
import { addNotification } from './notifications';
export const stripe = writable<Stripe>();
let paymentMethod: PaymentMethodData;
@@ -14,7 +15,6 @@ let paymentElement: StripeElement;
export const isStripeInitialized = writable(false);
export async function initializeStripe() {
console.log('Initializing Stripe');
if (!get(stripe)) return;
isStripeInitialized.set(true);
@@ -26,7 +26,6 @@ export async function initializeStripe() {
paymentMethod = await sdk.forConsole.billing.createPaymentMethod();
clientSecret = paymentMethod.clientSecret;
}
console.log('client secret', clientSecret);
// Set up the options for the stripe elements
const options = {
@@ -38,7 +37,6 @@ export async function initializeStripe() {
paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');
} catch (e) {
console.log(e);
throw e;
}
}
@@ -62,7 +60,9 @@ export async function submitStripeCard(name: string, urlRoute?: string) {
elements,
clientSecret,
confirmParams: {
return_url: `${baseUrl}${urlRoute ?? 'organization/billing?invoiceId'}`,
return_url: `${baseUrl}${
urlRoute ?? `organization/billing?clientSecret=${clientSecret}`
}`,
payment_method_data: {
billing_details: {
name
@@ -91,16 +91,40 @@ export async function submitStripeCard(name: string, urlRoute?: string) {
} else {
const e = new Error('Something went wrong');
trackError(e, Submit.PaymentMethodCreate);
console.log('setupIntent failed');
throw e;
}
} catch (e) {
trackError(e, Submit.PaymentMethodCreate);
console.log(e);
throw e;
}
}
export async function confirmPayment(orgId: string, clientSecret: string, paymentMethodId: string) {
try {
const url = `${window.location.origin}/console/organization-${orgId}/billing`;
const paymentMethod = await sdk.forConsole.billing.getPaymentMethod(paymentMethodId);
const { error } = await get(stripe).confirmPayment({
clientSecret: clientSecret,
confirmParams: {
return_url: url,
payment_method: paymentMethod.providerMethodId
}
});
if (error) {
throw new Error();
}
} catch (e) {
addNotification({
title: 'Error',
message:
'There was an error processing your payment, try again later. If the problem persists, please contact support.',
type: 'error'
});
}
}
const apperanceLight = {
variables: {
colorPrimary: '#606a7b',
src/routes/console/organization-[organization]/billing/+page.svelte
+26 -34
View File
@@ -14,7 +14,12 @@
import type { PaymentMethodData } from '$lib/sdk/billing';
import { onMount } from 'svelte';
import { page } from '$app/stores';
import { initializeStripe, isStripeInitialized, stripe } from '$lib/stores/stripe';
import {
confirmPayment,
initializeStripe,
isStripeInitialized,
stripe
} from '$lib/stores/stripe';
import { sdk } from '$lib/stores/sdk';
import { addNotification } from '$lib/stores/notifications';
import { toLocaleDate } from '$lib/helpers/date';
@@ -36,45 +41,32 @@
) {
wizard.start(ChangeOrganizationTierCloud);
}
if ($page.url.searchParams.has('clientSecret')) {
if (!$isStripeInitialized) {
await initializeStripe();
}
const clientSecret = $page.url.searchParams.get('clientSecret');
await confirmPayment($organization.$id, clientSecret, $organization.paymentMethodId);
}
if (
($page.url.searchParams.has('invoice') &&
$page.url.searchParams.has('type') &&
$page.url.searchParams.get('type') === 'confirmation') ||
$page.url.searchParams.has('clientSecret')
$page.url.searchParams.has('invoice') &&
$page.url.searchParams.has('type') &&
$page.url.searchParams.get('type') === 'confirmation'
) {
if (!$isStripeInitialized) {
await initializeStripe();
}
try {
const invoiceId = $page.url.searchParams.get('invoice');
const invoice = await sdk.forConsole.billing.getInvoice(
$page.params.organization,
invoiceId
);
const paymentMethod = await sdk.forConsole.billing.getPaymentMethod(
$organization.paymentMethodId
);
const url = `${window.location.origin}/console/organization-${$organization.$id}/billing`;
const invoiceId = $page.url.searchParams.get('invoice');
const invoice = await sdk.forConsole.billing.getInvoice(
$page.params.organization,
invoiceId
);
const { error } = await $stripe.confirmPayment({
clientSecret: invoice.clientSecret,
confirmParams: {
return_url: url,
payment_method: paymentMethod.providerMethodId
}
});
if (error) {
console.log('error', error);
throw new Error();
}
} catch (e) {
addNotification({
title: 'Error',
message:
'There was an error processing your payment, try again later. If the problem persists, please contact support.',
type: 'error'
});
}
await confirmPayment(
$organization.$id,
invoice.clientSecret,
$organization.paymentMethodId
);
}
});
</script>
src/routes/console/wizard/cloudOrganization/organizationDetails.svelte
+1 -1
View File
@@ -79,7 +79,7 @@
bind:group={$createOrganization.billingPlan}
value="tier-0"
disabled={!!anyOrgFree}
tooltipText="You are limited to 1 Free organization per account."
tooltipShow="You are limited to 1 Free organization per account."
showTooltip={!!anyOrgFree}>
<svelte:fragment slot="custom" let:disabled>
<div