Skip to content

Commit

Permalink
style(payment): Order account plans by quota and further formatting a…
Browse files Browse the repository at this point in the history 
…djustments.
  • Loading branch information
@gtandersen
gtandersen committed Feb 1, 2024
1 parent 9601124 commit 2af5945
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 41 deletions.
45 changes: 22 additions & 23 deletions src/app/account-app/account-product.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,19 @@ <h4 *ngIf="p.subtype === 'special'">Special Offer</h4>
<mat-card-title [ngClass]="{'themePaletteDarkGray': (p.type !== 'addon' && over_quota.length > 0)}">
{{ p.name }}
</mat-card-title>
<mat-card-subtitle>
<strong *ngIf="p.pid == me.subscription"> Your current {{ p.type }} </strong>
<br />
<mat-card-subtitle [ngClass]="{'themePaletteDarkGray': (p.type !== 'addon' && over_quota.length > 0)}">
<h4><span *ngIf="p.pid == me.subscription"> Your current {{ p.type }} </span><br /></h4>

Check warning on line 7 in src/app/account-app/account-product.component.html

View workflow job for this annotation

GitHub Actions / Run lint tests 

Expected `===` but received `==`
{{ p.description }}.
</mat-card-subtitle>
<mat-card-content>
<ng-content></ng-content>
<ng-container *ngIf="p.type === 'addon'">
<h4 *ngFor="let us of addon_usages">
Current usage: <span *ngIf="us.type === 'bytes'">{{ (us.current / 1024 / 1024 / 1024) | number:'1.2-2' }} GB of {{ (us.quota / 1024 / 1024 / 1024) | number:'1.2-2' }} GB</span>
<span *ngIf="us.type !== 'bytes'">{{ us.current }} of {{ us.quota }}</span>
<span *ngIf="us.type !== 'bytes'">{{ us.current }} of {{ us.quota }}</span>
</h4>
</ng-container>
<div *ngIf="allow_multiple" style="display: flex; justify-content: center; align-content: baseline;">
<div *ngIf="allow_multiple" class="multipleButtons">
<button mat-icon-button (click)="less()">
<mat-icon svgIcon="minus-circle-outline"></mat-icon>
</button>
Expand All @@ -28,16 +27,28 @@ <h4 *ngFor="let us of addon_usages">
</button>
</div>
</mat-card-content>
<mat-card-actions style="display: flex; justify-content: center;" *ngIf="p.type === 'subscription' && over_quota.length == 0">
<div *ngIf="p.type === 'subscription' && over_quota.length > 0">
Your usage is too great for this plan:
<ng-container *ngIf="p.type === 'subscription'">
<ul>
<li *ngFor="let oq of over_quota">
<span *ngIf="oq.type === 'bytes'">{{ (oq.current / 1024 / 1024 / 1024) | number:'1.2-2' }} GB {{ oq.quota }} used, while {{ (oq.allowed / 1024 / 1024 / 1024) | number:'1.2-2' }} GB </span>
<span *ngIf="oq.type !== 'bytes'">{{ oq.current }} {{ oq.quota }} used, while {{ oq.allowed }}</span>
are available
</li>
</ul>
</ng-container>
</div>
<mat-card-actions *ngIf="p.type === 'subscription' && over_quota.length == 0">

Check warning on line 42 in src/app/account-app/account-product.component.html

View workflow job for this annotation

GitHub Actions / Run lint tests 

Expected `===` but received `==`
<button mat-raised-button *ngIf="!purchased; else unpurchase"
[color]="p.pid < me.subscription ? 'accent' : 'primary'"
(click)="order()"
class="purchaseButton"
id="purchaseButton"
>
<span *ngIf="me.is_trial">Subscribe</span>
<span *ngIf="!me.is_trial && p.pid == me.subscription">Renew</span>

Check warning on line 49 in src/app/account-app/account-product.component.html

View workflow job for this annotation

GitHub Actions / Run lint tests 

Expected `===` but received `==`
<span *ngIf="!me.is_trial && p.quotas.Disk.quota > me.quotas.quota_mail_size">Upgrade</span>
<span *ngIf="!me.is_trial && p.quotas.Disk.quota < me.quotas.quota_mail_size">Downgrade</span>
<span *ngIf="!me.is_trial && p.quotas.Disk.quota > current_sub.quotas.Disk.quota">Upgrade</span>
<span *ngIf="!me.is_trial && p.quotas.Disk.quota < current_sub.quotas.Disk.quota">Downgrade</span>
for {{ currency || "USD" }} {{ p.price | number:'1.2-2' }}
</button>
<ng-template #unpurchase>
Expand All @@ -50,27 +61,15 @@ <h4 *ngFor="let us of addon_usages">
</button>
</ng-template>
</mat-card-actions>
<mat-card-actions style="text-align: center" *ngIf="p.type === 'subscription' && over_quota.length > 0">
Your usage is too great for this plan:
<ng-container *ngIf="p.type === 'subscription'">
<ul>
<li *ngFor="let oq of over_quota" style="text-align: left">
<span *ngIf="oq.type === 'bytes'">{{ (oq.current / 1024 / 1024 / 1024) | number:'1.2-2' }} GB {{ oq.quota }} used, while {{ (oq.allowed / 1024 / 1024 / 1024) | number:'1.2-2' }} GB </span>
<span *ngIf="oq.type !== 'bytes'">{{ oq.current }} {{ oq.quota }} used, while {{ oq.allowed }}</span>
are available
</li>
</ul>
</ng-container>
</mat-card-actions>
<h5 *ngIf="p.type !== 'addon'" [ngClass]="{'themePaletteDarkGray': over_quota.length > 0}">
Price per GB email storage: {{ currency || "USD" }} {{ p.price / (p.quotas.Disk.quota / 1024 / 1024 / 1024) | number:'1.2-2' }}
</h5>
<mat-card-actions style="display: flex; justify-content: center; align-content: baseline;" *ngIf="p.type !== 'subscription'">
<mat-card-actions *ngIf="p.type !== 'subscription'">
<button mat-raised-button (click)="order()"
color="primary"
id="purchaseButton"
>
Add <span *ngIf="p.subtype === 'subaccount'">account<span *ngIf="quantity > 1">s</span></span><span *ngIf="p.subtype !== 'subaccount'">product</span> for {{ quantity * p.price | number:'1.2-2' }} {{ currency }}
Add <span *ngIf="p.subtype === 'subaccount'">account<span *ngIf="quantity > 1">s</span></span><span *ngIf="p.subtype !== 'subaccount'">product</span> for {{ currency || "USD" }} {{ quantity * p.price | number:'1.2-2' }}
</button>
</mat-card-actions>
</mat-card>
39 changes: 24 additions & 15 deletions src/app/account-app/account-product.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ mat-card {
flex-direction: column;

h4 {
margin: 5px;
text-align: center;
margin: 0;
}
}

Expand All @@ -20,31 +19,41 @@ mat-card.addon {
}

mat-card-subtitle {
flex-grow: 1;
margin: 0;
font-size: 14px;
}

mat-card-subtitle {
flex-grow: 1;
color: rgba(0, 0, 0, 0.87);
}

mat-card-content {
margin: 0;

h4 {
text-align: center;
}
.multipleButtons {
display: flex;
justify-content: center;
align-content: baseline;
}
}

mat-card-actions {
display: flex;
justify-content: center;
margin-bottom: 0px !important;

ul {
margin: 0;
padding: 0 20px;
}

li {
list-style-type: square;
}
text-align: center;
}

h5 {
text-align: center;
}

ul {
margin: 0;
padding: 0 20px;
}

li {
list-style-type: square;
}
1 change: 1 addition & 0 deletions src/app/account-app/account-product.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export class ProductComponent implements OnInit {
@Input() currency: string;
@Input() active_sub: boolean;
@Input() usage: DataUsageInterface;
@Input() current_sub: Product;

me: RunboxMe = new RunboxMe();

Expand Down
4 changes: 2 additions & 2 deletions src/app/account-app/account-upgrades.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ <h1 style="margin: 10px 0 20px 0">One extra year for free!</h1>
-->

<div class="productGrid" *ngIf="subs_regular | async as subs_regular; else productsLoading">
<app-account-product *ngFor="let p of subs_regular" [ngClass]="'productCard'" [p]="p" [currency]="me.currency" [active_sub]="me.subscription === p.pid" [usage]="q_usage">
<app-account-product *ngFor="let p of subs_regular" [ngClass]="'productCard'" [p]="p" [currency]="me.currency" [active_sub]="me.subscription === p.pid" [usage]="q_usage" [current_sub]="current_sub">
<ul>
<li *ngFor="let detail of p.details"> {{ detail }}
</ul>
Expand Down Expand Up @@ -132,7 +132,7 @@ <h2> <a name="subaccounts">Sub-Accounts (additional accounts)</a> </h2>
</div>

<ng-template #usageLoading>
<app-runbox-loading text="Loading your usage to tailor the plans...">
<app-runbox-loading text="Loading your usage to tailor the subscription plans...">
</app-runbox-loading>
</ng-template>

Expand Down
6 changes: 5 additions & 1 deletion src/app/account-app/account-upgrades.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export class AccountUpgradesComponent implements OnInit {
subscriptions = new AsyncSubject<Product[]>();
subs_regular = new AsyncSubject<Product[]>();
subs_special = new AsyncSubject<Product[]>();
current_sub;

quota_usage = new AsyncSubject<DataUsageInterface>();

Expand All @@ -69,6 +70,9 @@ export class AccountUpgradesComponent implements OnInit {
});

this.paymentsservice.products.subscribe(products => {
// User's current subscription product:
this.current_sub = products.find(p => p.pid == this.me.subscription);

const subs_all = products.filter(p => p.type === 'subscription');
this.subscriptions.next(subs_all);
this.subscriptions.complete();
Expand All @@ -95,7 +99,7 @@ export class AccountUpgradesComponent implements OnInit {
for (const o of ordered_subs) {
this.cart.remove(o);
}
this.snackbar.open('You can only buy one main account subscription at a time.', 'Okay');
this.snackbar.open('You can only buy one main account subscription at a time.', 'OK');
}
});
});
Expand Down

0 comments on commit 2af5945

Please sign in to comment.