93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
import {
|
|
customElement,
|
|
DeesElement,
|
|
property,
|
|
html,
|
|
cssManager,
|
|
unsafeCSS,
|
|
css,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import sharedStyles 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,
|
|
})
|
|
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,
|
|
sharedStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
max-width: 900px;
|
|
margin: auto;
|
|
color: ${cssManager.bdTheme('#333', '#fff')};
|
|
}
|
|
`
|
|
]
|
|
|
|
public render() {
|
|
return html`
|
|
<h1>-> Billing & Subscription</h1>
|
|
This page allows you to setup how you are billed for any workspace.global charges.
|
|
<h2>PaymentMethod</h2>
|
|
<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>
|
|
Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here. Note: You are currently not eligible.
|
|
<h2>Subscriptions</h2>
|
|
<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>
|
|
Note: Subscriptions are tied to prganizations. You are only seeing subcriptions regarding ${'org1'} right now.
|
|
To see other organization, select the respective organization at the top left of this page.
|
|
</p>
|
|
<dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
|
|
<dees-button>Add subscription</dees-button>
|
|
<h2>Accrued IaaS Usage</h2>
|
|
<p>Note: The accrued IaaS Usage will be charged by adjusting the workspsace.gobal IaaS Postpaid Access price prior the renewal date.</p>
|
|
<dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
|
|
<h2>Upcoming Billable Items</h2>
|
|
<h2>Past Invoices</h2>
|
|
`;
|
|
}
|
|
} |