improve delete organization

This commit is contained in:
Damodar Lohani
2025-01-29 04:41:52 +00:00
parent 3c373367fb
commit 65720b25b9
4 changed files with 68 additions and 65 deletions
+4
View File
@@ -469,6 +469,10 @@ export const upgradeURL = derived(
page,
($page) => `${base}/organization-${$page.data?.organization?.$id}/change-plan`
);
export const billingURL = derived(
page,
($page) => `${base}/organization-${$page.data?.organization?.$id}/billing`
);
export const hideBillingHeaderRoutes = ['/console/create-organization', '/console/account'];
@@ -1,31 +1,19 @@
<script lang="ts">
import { Alert } from '$lib/components';
import type { EstimationDeleteOrganization } from '$lib/sdk/billing';
import RetryPaymentModal from '../billing/retryPaymentModal.svelte';
import { selectedInvoice, showRetryModal } from '../billing/store';
import InvoicesTable from './invoicesTable.svelte';
let error: string = '';
export let estimation: EstimationDeleteOrganization;
</script>
{#if error}
<Alert type="error">
<span>{error}</span>
</Alert>
{/if}
{#if estimation}
{#if estimation.unpaidInvoices?.length > 0}
<Alert type="warning">
<span slot="title">
You have a unpaid invoices. Please settle them first in order to delete team.
This organization has unresolved invoices that must be settled before it can be
deleted. Please review and resolve these invoices to proceed.
</span>
</Alert>
<InvoicesTable invoices={estimation.unpaidInvoices} />
<InvoicesTable invoices={estimation.unpaidInvoices} showActions={false} />
{/if}
{/if}
{#if $selectedInvoice}
<RetryPaymentModal bind:show={$showRetryModal} bind:invoice={$selectedInvoice} />
{/if}
@@ -22,6 +22,7 @@
} from '$lib/elements/table';
import { onMount } from 'svelte';
import DeleteOrganizationEstimation from './deleteOrganizationEstimation.svelte';
import { billingURL } from '$lib/stores/billing';
export let showDelete = false;
export let invoices: InvoiceList;
@@ -215,12 +216,17 @@
<svelte:fragment slot="footer">
<Button text on:click={() => (showDelete = false)}>Cancel</Button>
<Button
secondary
submit
disabled={!error && (!organizationName || organizationName !== $organization.name)}>
Delete
</Button>
{#if estimation && estimation.unpaidInvoices.length > 0}
<Button href={$billingURL} secondary>View invoices</Button>
{:else}
<Button
secondary
submit
disabled={!error &&
(!organizationName || organizationName !== $organization.name)}>
Delete
</Button>
{/if}
</svelte:fragment>
</Modal>
</div>
@@ -23,6 +23,7 @@
const endpoint = getApiEndpoint();
export let invoices: Invoice[];
export let showActions = true;
function retryPayment(invoice: Invoice) {
$selectedInvoice = invoice;
@@ -35,7 +36,9 @@
<TableCellHead width={100}>Due Date</TableCellHead>
<TableCellHead width={80}>Status</TableCellHead>
<TableCellHead width={100}>Amount Due</TableCellHead>
<TableCellHead width={40} />
{#if showActions}
<TableCellHead width={40} />
{/if}
</TableHeader>
<TableBody>
{#each invoices as invoice, i}
@@ -84,53 +87,55 @@
<TableCellText title="due">
{formatCurrency(invoice.grossAmount)}
</TableCellText>
<TableCell showOverflow right>
<DropList bind:show={showDropdown[i]} placement="bottom-start" noArrow>
<Button
round
text
noMargin
ariaLabel="More options"
on:click={() => {
showDropdown[i] = !showDropdown[i];
}}>
<span class="icon-dots-horizontal" aria-hidden="true" />
</Button>
<svelte:fragment slot="list">
<DropListLink
icon="external-link"
external
href={`${endpoint}/organizations/${$page.params.organization}/invoices/${invoice.$id}/view`}
on:click={() => (showDropdown[i] = !showDropdown[i])}
event="view_invoice">
View invoice
</DropListLink>
<DropListLink
icon="download"
href={`${endpoint}/organizations/${$page.params.organization}/invoices/${invoice.$id}/download`}
{#if showActions}
<TableCell showOverflow right>
<DropList bind:show={showDropdown[i]} placement="bottom-start" noArrow>
<Button
round
text
noMargin
ariaLabel="More options"
on:click={() => {
showDropdown[i] = !showDropdown[i];
}}
event="download_invoice">
Download PDF
</DropListLink>
{#if status === 'overdue' || status === 'failed'}
<DropListItem
icon="refresh"
}}>
<span class="icon-dots-horizontal" aria-hidden="true" />
</Button>
<svelte:fragment slot="list">
<DropListLink
icon="external-link"
external
href={`${endpoint}/organizations/${$page.params.organization}/invoices/${invoice.$id}/view`}
on:click={() => (showDropdown[i] = !showDropdown[i])}
event="view_invoice">
View invoice
</DropListLink>
<DropListLink
icon="download"
href={`${endpoint}/organizations/${$page.params.organization}/invoices/${invoice.$id}/download`}
on:click={() => {
retryPayment(invoice);
showDropdown[i] = !showDropdown[i];
trackEvent(`click_retry_payment`, {
from: 'button',
source: 'billing_invoice_menu'
});
}}>
Retry payment
</DropListItem>
{/if}
</svelte:fragment>
</DropList>
</TableCell>
}}
event="download_invoice">
Download PDF
</DropListLink>
{#if status === 'overdue' || status === 'failed'}
<DropListItem
icon="refresh"
on:click={() => {
retryPayment(invoice);
showDropdown[i] = !showDropdown[i];
trackEvent(`click_retry_payment`, {
from: 'button',
source: 'billing_invoice_menu'
});
}}>
Retry payment
</DropListItem>
{/if}
</svelte:fragment>
</DropList>
</TableCell>
{/if}
</TableRow>
{/each}
</TableBody>