Skip to content

Commit

Permalink
Merge pull request runbox#1602 from gtandersen/gtandersen/geir/paymen…
Browse files Browse the repository at this point in the history
…t-3-year-plans-fix-3

fix(payment): Replace routerLink with regular link for bookmark links.
  • Loading branch information
castaway authored Oct 9, 2024
2 parents 8b755b6 + 0ba7b99 commit ba2d5a0
Show file tree
Hide file tree
Showing 9 changed files with 649 additions and 112 deletions.
6 changes: 3 additions & 3 deletions e2e/cypress/integration/ordering.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ describe('Ordering products', () => {
cy.visit('/account/plans');

cy.wait('@availableProducts', {'timeout':10000});
cy.get('.productGrid .purchaseButton').contains('Purchase').click();
cy.get('#pricePlans .purchaseButton').contains('Select').click();
cy.get('#shoppingCartButton').should('be.visible');

cy.get('#shoppingCartButton').click();
Expand All @@ -26,11 +26,11 @@ describe('Ordering products', () => {

cy.get('#shoppingCartButton').should('not.exist');

cy.get('.productGrid .purchaseButton').contains('Add product').click();
cy.get('.productGrid .purchaseButton').contains('Add').click();
cy.get('#shoppingCartButton').should('be.visible');
cy.get('#shoppingCartButton .mat-badge-content').should('contain', '1');

cy.get('.productGrid .purchaseButton').contains('Add product').click();
cy.get('.productGrid .purchaseButton').contains('Add').click();
cy.get('#shoppingCartButton .mat-badge-content').should('contain', '1');

cy.get('#shoppingCartButton').click();
Expand Down
41 changes: 40 additions & 1 deletion e2e/mockserver/mockserver.ts
Original file line number Diff line number Diff line change
Expand Up @@ -505,7 +505,46 @@ END:VCALENDAR
'subtype': 'test',
'price': '13.37',
'currency': 'EUR',
'pid': '9001',
'pid': '1006',
'description': 'Test subscription including some stuff',
"quotas": {
"Alias": {
"quota": 100,
"type": "fixed"
},
"File": {
"type": "fixed",
"quota": 2147483648
},
"Traffic": {
"quota": 10737418240,
"type": "fixed"
},
"VirtualDomain": {
"quota": 10,
"type": "fixed"
},
"Disk": {
"type": "fixed",
"quota": 26843545600
},
"Msg": {
"quota": 5000,
"type": "fixed"
},
"Sent": {
"type": "fixed",
"quota": 500
}
},
},
{
'name': 'Runbox Test 3-year',
'type': 'subscription',
'subtype': 'test',
'price': '13.37',
'currency': 'EUR',
'pid': '10006',
'description': 'Test subscription including some stuff',
"quotas": {
"Alias": {
Expand Down
149 changes: 78 additions & 71 deletions src/app/account-app/account-product.component.html
Original file line number Diff line number Diff line change
@@ -1,76 +1,83 @@
<mat-card [ngClass]="{ 'addon': p.type === 'addon' }">
<mat-card>

<div *ngIf="p.pid === 10033">
Best Plan
</div>

<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 [ngClass]="{'themePaletteDarkGray': (p.type !== 'addon' && over_quota.length > 0)}">
<h4><span *ngIf="is_current_subscription"> Your current {{ p.type }} </span><br /></h4>
{{ 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>
</h4>
</ng-container>
<div *ngIf="allow_multiple" class="multipleButtons">
<button mat-icon-button (click)="less()">
<mat-icon svgIcon="minus-circle-outline"></mat-icon>
</button>
<button mat-button>
{{ quantity }}
</button>
<button mat-icon-button (click)="more()">
<mat-icon svgIcon="plus-circle-outline"></mat-icon>
</button>
</div>
</mat-card-content>
<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>
<mat-card-title [ngClass]="{'themePaletteDarkGray': (p.type !== 'addon' && over_quota.length > 0)}">
{{ p.name.replace('Runbox', '') }}
</mat-card-title>
<mat-card-subtitle [ngClass]="{'themePaletteDarkGray': (p.type !== 'addon' && over_quota.length > 0)}">
<h4><span *ngIf="is_current_subscription"> Your current {{ p.type }} </span><br /></h4>
{{ 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>
</h4>
</ng-container>
<div *ngIf="allow_multiple" class="multipleButtons">
<button mat-icon-button (click)="less()">
<mat-icon svgIcon="minus-circle-outline"></mat-icon>
</button>
<button mat-button>
{{ quantity }}
</button>
<button mat-icon-button (click)="more()">
<mat-icon svgIcon="plus-circle-outline"></mat-icon>
</button>
</div>
<mat-card-actions *ngIf="p.type === 'subscription' && over_quota.length === 0">
<button mat-raised-button *ngIf="!purchased; else unpurchase"
[color]="is_downgrade ? 'accent' : 'primary'"
(click)="order()"
class="purchaseButton"
>
<span *ngIf="me.is_trial">Subscribe</span>
<span *ngIf="!me.is_trial && me.subscription === undefined">Purchase</span>
<span *ngIf="!me.is_trial && p.pid === me.subscription">Renew</span>
<span *ngIf="!me.is_trial && is_upgrade">Upgrade</span>
<span *ngIf="!me.is_trial && is_downgrade">Downgrade</span>
for {{ currency || "USD" }} {{ p.price | number:'1.2-2' }}
</button>
<ng-template #unpurchase>
<button mat-raised-button
</mat-card-content>
<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">
<button mat-raised-button *ngIf="!purchased; else unpurchase"
[color]="is_downgrade ? 'accent' : 'primary'"
(click)="order()"
class="purchaseButton"
>
<span *ngIf="me.is_trial">Subscribe</span>
<span *ngIf="!me.is_trial && me.subscription === undefined">Purchase</span>
<span *ngIf="!me.is_trial && p.pid === me.subscription">Renew</span>
<span *ngIf="!me.is_trial && is_upgrade">Upgrade</span>
<span *ngIf="!me.is_trial && is_downgrade">Downgrade</span>
<!-- Catch-all for e.g. 3-year plans when current subscription is 1-year -->
<span *ngIf="!me.is_trial && !is_upgrade && !is_downgrade && p.pid !== me.subscription">Renew</span>
for {{ currency || "USD" }} {{ p.price | number:'1.2-2' }}
</button>
<ng-template #unpurchase>
<button mat-raised-button
color="primary"
(click)="unorder()"
class="removeButton"
>
Remove from cart
</button>
</ng-template>
</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 *ngIf="p.type !== 'subscription'">
<button mat-raised-button (click)="order()"
color="primary"
(click)="unorder()"
class="removeButton"
class="purchaseButton"
>
Remove from cart
</button>
</ng-template>
</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 *ngIf="p.type !== 'subscription'">
<button mat-raised-button (click)="order()"
color="primary"
class="purchaseButton"
>
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>
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>
9 changes: 9 additions & 0 deletions src/app/account-app/account-product.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,15 @@ mat-card {
mat-card.addon {
}

mat-card.bestPlan {
border: 1px solid blue;
}

mat-card-title {
font-size: 18px;
font-weight: bold;
}

mat-card-subtitle {
flex-grow: 1;
margin: 0;
Expand Down
Loading

0 comments on commit ba2d5a0

Please sign in to comment.