idp.global/app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(account): Refactor account UI styles into reusable design tokens, apply updated styles across views and fix login submit behavior

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-01 04:08:17 +00:00
parent 9d012cd59f
commit 401d35186f
14 changed files with 457 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts_web/elements/account/views/subscriptions.ts
+91 -33
View File
@@ -8,7 +8,7 @@ import {
css,
} from '@design.estate/dees-element';
import sharedStyles from '../sharedstyles.js';
import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';
import * as state from '../../../states/accountstate.js';
@@ -46,48 +46,106 @@ export class SubscriptionView extends DeesElement {
public static styles = [
cssManager.defaultStyles,
sharedStyles,
accountDesignTokens,
cardStyles,
typographyStyles,
css`
:host {
display: block;
padding: 48px;
max-width: 900px;
margin: auto;
color: ${cssManager.bdTheme('#333', '#fff')};
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>
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>
<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>
`;
}
}