151 lines
4.2 KiB
TypeScript
151 lines
4.2 KiB
TypeScript
import {
|
|
customElement,
|
|
DeesElement,
|
|
property,
|
|
html,
|
|
cssManager,
|
|
unsafeCSS,
|
|
css,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';
|
|
|
|
import * as state from '../../../states/accountstate.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'lele-accountview-subscription': SubscriptionView;
|
|
}
|
|
}
|
|
|
|
@customElement('lele-accountview-subscription')
|
|
export class SubscriptionView extends DeesElement {
|
|
|
|
@property({
|
|
type: Array,
|
|
})
|
|
accessor subscriptions: any[] = [{
|
|
organization: 'org1',
|
|
'subscription type': 'workspace.global SaaS',
|
|
price: '4€',
|
|
userFactor: 4,
|
|
total: '16.00€'
|
|
}, {
|
|
organization: 'org1',
|
|
'subscription type': 'workspace.global IaaS Base Access',
|
|
price: '0€',
|
|
userFactor: 4,
|
|
total: '0€'
|
|
}, {
|
|
organization: 'org1',
|
|
'subscription type': 'workspace.global SLA Senior',
|
|
price: '2000€',
|
|
userFactor: 'none',
|
|
total: '2000.00€'
|
|
}];
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
accountDesignTokens,
|
|
cardStyles,
|
|
typographyStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
padding: 48px;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--foreground);
|
|
margin: 24px 0 8px 0;
|
|
}
|
|
|
|
dees-table {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
dees-button {
|
|
margin-top: 16px;
|
|
}
|
|
`
|
|
]
|
|
|
|
public render() {
|
|
return html`
|
|
<h1>Billing & Subscription</h1>
|
|
<p>Manage your billing settings and subscriptions for your organization.</p>
|
|
|
|
<div class="section">
|
|
<h2>Payment Method</h2>
|
|
<div class="card">
|
|
<p>Our customer-side billing is handled by paddle.com. You subscribe to a free plan there,
|
|
and we will bill any occurring charges as an extra on the monthly date of your choosing.
|
|
Paddle.com will take care of proper VAT invoices that will allow for VAT reduction according to the law.</p>
|
|
|
|
<h3>Paddle</h3>
|
|
<dees-button @click=${async () => {
|
|
await this.domtoolsPromise;
|
|
this.domtools.router.pushUrl(`/org/${state.accountState.getState().selectedOrg.data.slug}/paddlesetup`)
|
|
}}>Set up Paddle.com</dees-button>
|
|
|
|
<h3>Enterprise Billing</h3>
|
|
<p>Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here.</p>
|
|
<p><em>Note: You are currently not eligible.</em></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Subscriptions</h2>
|
|
<div class="card">
|
|
<p>
|
|
The total price of a subscription already includes all taxes. If you are a VAT registered business,
|
|
the actual price might be cheaper in case you can claim VAT exemption from the purchase.
|
|
</p>
|
|
<p>
|
|
<em>Note: Subscriptions are tied to organizations. Select the respective organization from the sidebar to view its subscriptions.</em>
|
|
</p>
|
|
<dees-table .heading1=${'Subscriptions'} .heading2=${`for organization`} .data=${this.subscriptions}></dees-table>
|
|
<dees-button>Add Subscription</dees-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Accrued IaaS Usage</h2>
|
|
<div class="card">
|
|
<p>The accrued IaaS Usage will be charged by adjusting the workspace.global IaaS Postpaid Access price prior to the renewal date.</p>
|
|
<dees-table .heading1=${'Usage'} .heading2=${`for organization`} .data=${this.subscriptions}></dees-table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Upcoming Billable Items</h2>
|
|
<div class="card">
|
|
<p>No upcoming billable items.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Past Invoices</h2>
|
|
<div class="card">
|
|
<p>No past invoices available.</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
} |