feat(account): Refactor account UI styles into reusable design tokens, apply updated styles across views and fix login submit behavior
This commit is contained in:
@@ -11,7 +11,7 @@ import {
|
||||
directives,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import sharedStyles from '../sharedstyles.js';
|
||||
import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@@ -52,34 +52,75 @@ export class BaseView extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
sharedStyles,
|
||||
accountDesignTokens,
|
||||
cardStyles,
|
||||
typographyStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
.viewHost {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.slug {
|
||||
color: orange;
|
||||
color: var(--foreground);
|
||||
font-weight: 600;
|
||||
font-family: 'Geist Mono', monospace;
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: var(--muted-foreground);
|
||||
margin: 16px 0;
|
||||
padding: 12px 16px;
|
||||
background: var(--muted);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
dees-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.orgGrid {
|
||||
display: grid;
|
||||
grid-gap: 16px;
|
||||
grid-template-columns: ${cssManager.cssGridColumns(2, 16)};
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.org {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #444;
|
||||
background: ${cssManager.bdTheme('#ccc', '#222')};
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
color: var(--foreground);
|
||||
transition: all 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.org:hover {
|
||||
cursor: default;
|
||||
background: ${cssManager.bdTheme('#CCC', '#333')};
|
||||
background: var(--muted);
|
||||
border-color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.org dees-icon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
`,
|
||||
];
|
||||
@@ -100,24 +141,26 @@ export class BaseView extends DeesElement {
|
||||
if (state.accountState.getState().organizations.length === 0) {
|
||||
render(
|
||||
html`
|
||||
<h1>Setup Your Account</h1>
|
||||
<p>
|
||||
There are no organizations for your account. Please create one now. Alternatively you
|
||||
can ask an admin of an existing organization to invite you.
|
||||
</p>
|
||||
<dees-form>
|
||||
<dees-input-text .label=${'Organization Name'} .key=${'orgName'}></dees-input-text>
|
||||
</dees-form>
|
||||
<p>
|
||||
The organization slug corresponds to the organization name:<br />
|
||||
<span class="slug"
|
||||
>${directives.subscribe(
|
||||
state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
|
||||
)}</span
|
||||
>
|
||||
</p>
|
||||
<span class="hint"></span>
|
||||
<dees-button .disabled=${true}>Create the Organization</dees-button>
|
||||
<div class="card">
|
||||
<h1>Setup Your Account</h1>
|
||||
<p>
|
||||
There are no organizations for your account. Please create one now. Alternatively you
|
||||
can ask an admin of an existing organization to invite you.
|
||||
</p>
|
||||
<dees-form>
|
||||
<dees-input-text .label=${'Organization Name'} .key=${'orgName'}></dees-input-text>
|
||||
</dees-form>
|
||||
<p>
|
||||
The organization slug will be:<br />
|
||||
<span class="slug"
|
||||
>${directives.subscribe(
|
||||
state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
|
||||
)}</span
|
||||
>
|
||||
</p>
|
||||
<span class="hint"></span>
|
||||
<dees-button .disabled=${true}>Create the Organization</dees-button>
|
||||
</div>
|
||||
`,
|
||||
viewHost
|
||||
);
|
||||
@@ -169,6 +212,7 @@ export class BaseView extends DeesElement {
|
||||
render(
|
||||
html`
|
||||
<h1>Select An Organization</h1>
|
||||
<p>Choose an organization to manage its settings and billing.</p>
|
||||
<div class="orgGrid">
|
||||
${state.accountState.getState().organizations.map((orgArg) => {
|
||||
return html`
|
||||
@@ -180,7 +224,7 @@ export class BaseView extends DeesElement {
|
||||
parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`);
|
||||
}}
|
||||
>
|
||||
<dees-icon .iconFA=${"wallet"} style="display: inline-block; transform: translateY(3px); padding-right: 4px;"></dees-icon> ${orgArg.data.name}
|
||||
<dees-icon .icon=${'lucide:building2'} style="display: inline-block; transform: translateY(3px); padding-right: 8px;"></dees-icon> ${orgArg.data.name}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
|
||||
@@ -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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user