Skip to content

Commit

Permalink
feat(welcome): Show improved 3-year plans on Welcome page upon signup.
Browse files Browse the repository at this point in the history
  • Loading branch information
@gtandersen
gtandersen committed Oct 19, 2024
1 parent ba2d5a0 commit d2aa8fb
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 21 deletions.
29 changes: 17 additions & 12 deletions src/app/account-app/account-upgrades.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ <h3>
By subscribing to Runbox you support an independent and sustainable business in Norway, where your email will stay secure and private indefinitely.
</p>
<p>
To view your existing subscriptions, please go to <a routerLink="/account/subscriptions">Your Subscriptions</a>.
Feel free to contact us via <a href="https://support.runbox.com" target="support">Runbox Support</a> if you have any questions about our plans.
</p>
<p>
Feel free to contact us via <a href="https://support.runbox.com" target="support">Runbox Support</a> if you have any questions about our plans.
To view your existing subscriptions, please go to <a routerLink="/account/subscriptions">Your Subscriptions</a>.
</p>

<div class="navigationButtons">
Expand Down Expand Up @@ -75,13 +75,16 @@ <h1 style="margin: 10px 0 20px 0">One extra year for free!</h1>
</div>
-->

<a id="recommended"><h3>Our recommended plans</h3></a>
<a id="recommended"><h3>Our Recommended Plans</h3></a>

<p>
We offer a 20% discount on all our plans if you renew for 3 years, which locks in the current price for your entire selected subcription period. To review and compare all our plans, please see the table further down.
We currently offer a 20% discount on all our main account plans when you subscribe or renew for 3 years at a time.
</p>
<p>
Lock in the current price for less than the price of a cup of coffee per month!
<p>

<br /><br />
<br />

<div *ngIf="three_year_plans | async as three_year_plans; else productsLoading">
<div *ngIf="orig_three_plans | async as orig_three_plans; else productsLoading">
Expand All @@ -90,6 +93,7 @@ <h1 style="margin: 10px 0 20px 0">One extra year for free!</h1>
<!-- Mini 3-year plan -->

<mat-card *ngFor="let plan of three_year_plans; index as i" class="productCardFeatured {{ plan.subtype === 'medium3' ? 'recommended' : '' }}">

<mat-card-title class="{{ plan.subtype }}" [ngClass]="{'themePaletteDarkGray': over_quota.length > 0}">
{{ plan.name.replace('Runbox', '') }}
</mat-card-title>
Expand All @@ -99,7 +103,7 @@ <h4><span *ngIf="is_current_subscription"> Your current subscription </span></h4
<mat-card-content>
<div>
<p *ngIf="plan.subtype === 'mini3'">An affordable plan if you don't need a lot of email or file storage.</p>
<p *ngIf="plan.subtype === 'medium3'">Our recommended plan with plenty of email and file storage, suitable for most people.</p>
<p *ngIf="plan.subtype === 'medium3'">Suitable for most people, a popular plan with plenty of email and file storage.</p>
<p *ngIf="plan.subtype === 'max3'">A solid plan built to last, perfect for professionals and businesses.</p>
<ul class="planComponents">
<li>{{ plan.quotas.Disk.quota / 1024 / 1024 / 1024 }} GB email storage space</li>
Expand Down Expand Up @@ -135,12 +139,12 @@ <h4 *ngFor="let us of addon_usages">
(click)="order(plan)"
class="purchaseButtonFeatured {{ plan.subtype }}"
>
<span *ngIf="me.is_trial">Subscribe</span>
<span *ngIf="me.is_trial">Subscribe for</span>
<span *ngIf="!me.is_trial && me.subscription === undefined">Purchase for</span>
<span *ngIf="!me.is_trial && (orig_three_plans[i].pid === me.subscription || plan.pid === me.subscription)">Renew for</span>
<span *ngIf="!me.is_trial && plan.quotas.Disk.quota > current_sub.quotas.Disk.quota">Upgrade to</span>
<span *ngIf="!me.is_trial && plan.quotas.Disk.quota < current_sub.quotas.Disk.quota">Downgrade to</span>
{{ plan.currency.replace("USD","$") || "$" }} {{ plan.price | number:'1.2-2' }}
{{ plan.currency.replace("USD","$") }}{{ plan.price | number:'1.2-2' }}
</button>
<ng-template #unpurchase>
<button mat-raised-button
Expand All @@ -153,8 +157,9 @@ <h4 *ngFor="let us of addon_usages">
</ng-template>
</mat-card-actions>
<div>
Price per year: {{ plan.currency.replace("USD","$") || "$" }} {{ plan.price / 3 | number:'1.2-2' }} <br />
Annual price per GB: {{ plan.currency.replace("USD","$") || "$" }} {{ plan.price / 3 / ((plan.quotas.Disk.quota + plan.quotas.File.quota) / 1024 / 1024 / 1024) | number:'1.2-2' }}
Price per year: {{ plan.currency.replace("USD","$") }}{{ plan.price / 3 | number:'1.2-2' }} <br />
Price per month: {{ plan.currency.replace("USD","$") }}{{ plan.price / 3 / 12 | number:'1.2-2' }} <br />
Annual price per GB: {{ plan.currency.replace("USD","$") }}{{ plan.price / 3 / ((plan.quotas.Disk.quota + plan.quotas.File.quota) / 1024 / 1024 / 1024) | number:'1.2-2' }}
</div>

</mat-card>
Expand All @@ -170,7 +175,7 @@ <h4 *ngFor="let us of addon_usages">

<br /><br />

<a id="compare"><h3>All our price plans</h3></a>
<a id="compare"><h3>All Main Account Price Plans</h3></a>

<p>
Compare all our main account plans for 1 and 3 years in the table below.
Expand Down Expand Up @@ -301,7 +306,7 @@ <h2> <a id="subaccounts">Sub-Accounts (additional accounts)</a> </h2>
</p>

<div class="productGrid" *ngIf="subaccounts | async as subaccounts; else addonsLoading">
<app-account-product *ngFor="let p of subaccounts" class="productCard" [p]="p" [currency]="me.currency" [usage]="q_usage">
<app-account-product *ngFor="let p of subaccounts" class="productCard" [p]="p" [currency]="me.currency.replace('USD','$')" [usage]="q_usage">
</app-account-product>
</div>

Expand Down
6 changes: 3 additions & 3 deletions src/app/account-app/account-upgrades.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
}

.productCardFeatured {
height: 430px;
height: 450px;
width: 30%;
min-width: 250px;
margin-right: 2%;
Expand All @@ -55,7 +55,7 @@
}

mat-card-content {
height: 55%;
height: 50%;
padding: 0 5px;
font-size: 1.1em !important;
}
Expand All @@ -78,7 +78,7 @@
}

.productGrid mat-card.recommended {
height: 475px;
height: 500px;
width: 32%;
font-size: 1.1em;
}
Expand Down
12 changes: 6 additions & 6 deletions src/app/welcome/welcomedesk.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
<section class="mat-typography">
<div class="welcomeDesk">
<h1>Welcome to Runbox</h1>
<h1>Congratulations -- your new Runbox account is ready!</h1>
<div *ngIf="postSignup == 'offer'" id="introSpecialOffer">
<h2>Congratulations -- your new Runbox account is ready!</h2>
<h3>Take advantage of our current 20% discount by proceeding to <a routerLink="/account/plans">Plans & Upgrades</a> below.</h3>
<h4> You can also <a routerLink="/welcome">continue setting up your account</a>, or go <a routerLink="/">straight to your Inbox</a>.</h4>
<br />
<a routerLink="/account/plans">
<img src="assets/intro-special-banner-2023.jpg" id="introSpecialOfferBanner" alt="Special Offer: Get a full year added to your main subscription for free"/>
<img src="assets/payment/price_plans.jpg" id="introSpecialOfferBanner" alt="Save 20% if you subscribe for 3 years"/>
</a>
<br /><br />
<p>
The price shown is the subscription fee for a Micro account for the first 2 years when taking advantage of the offer. This offer is valid for all main account plans within 24 hours of signing up, in addition to any other current offers. All initial subscription payments include a 60-day money back guarantee.
All initial subscription payments include a 60-day money back guarantee.
</p>
<h2><a routerLink="/account/plans">Continue to Account Plans Now</a></h2>
<br />
<h4>You can also <a routerLink="/welcome">continue setting up your account</a>, or go <a routerLink="/">straight to your Inbox</a>.</h4>
</div>
<div *ngIf="!postSignup">
<h3>Let's get you set up with Runbox and make you an email pro!</h3>
Expand Down Expand Up @@ -81,7 +82,6 @@ <h4><mat-icon svgIcon="help-circle"></mat-icon>Learn more about Runbox</h4>
</mat-card>
</div>
</div>
<br />
<div id="introNote">
<div>
<mat-icon svgIcon="lightbulb"></mat-icon>
Expand Down

0 comments on commit d2aa8fb

Please sign in to comment.