1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-22 16:29:09 +01:00

Ac 3030 discount is not included in the pricing breakdown when annual plan (#11126)

* Resolve the discount issues

* Resolve the payment cvv alignment

* Resolve the wrong message for secrets manager

* Remove unused commented code

* resolve the display message bug on sm flow
This commit is contained in:
cyprain-okeke 2024-09-18 16:22:04 +01:00 committed by GitHub
parent f6e51ef024
commit 727fbb6731
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 26 additions and 77 deletions

View File

@ -318,7 +318,7 @@
type="info" type="info"
title="SECRETS MANAGER SUBSCRIPTION" title="SECRETS MANAGER SUBSCRIPTION"
> >
{{ "secretsManagerSubInfo" | i18n }} {{ "secretsManagerSubscriptionInfo" | i18n }}
</bit-callout> </bit-callout>
<bit-callout <bit-callout
*ngIf="organization.useSecretsManager && isSecretsManagerTrial()" *ngIf="organization.useSecretsManager && isSecretsManagerTrial()"
@ -356,7 +356,8 @@
<div id="price" class="tw-mt-4"> <div id="price" class="tw-mt-4">
<p class="tw-text-lg tw-mb-1"> <p class="tw-text-lg tw-mb-1">
<span class="tw-font-semibold" <span class="tw-font-semibold"
>{{ "total" | i18n }}: {{ total | currency: "USD" : "$" }} USD</span >{{ "total" | i18n }}:
{{ total - calculateTotalAppliedDiscount(total) | currency: "USD" : "$" }} USD</span
> >
<span class="tw-text-xs tw-font-light"> / {{ selectedPlanInterval | i18n }}</span> <span class="tw-text-xs tw-font-light"> / {{ selectedPlanInterval | i18n }}</span>
<button <button
@ -442,13 +443,11 @@
bitTypography="body2" bitTypography="body2"
*ngIf="organization.useSecretsManager && !isSecretsManagerTrial()" *ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
> >
<ng-container *ngIf="selectedInterval == planIntervals.Annually"> <ng-container
*ngIf="selectedInterval == planIntervals.Annually && discountPercentageFromSub > 0"
>
<span class="tw-text-xs"> <span class="tw-text-xs">
{{ {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
"providerDiscount"
| i18n: this.discountPercentageFromSub + this.discountPercentage
| lowercase
}}
</span> </span>
<span class="tw-line-through tw-text-xs">{{ <span class="tw-line-through tw-text-xs">{{
calculateTotalAppliedDiscount( calculateTotalAppliedDiscount(
@ -524,13 +523,11 @@
bitTypography="body2" bitTypography="body2"
*ngIf="organization.useSecretsManager && !isSecretsManagerTrial()" *ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
> >
<ng-container *ngIf="selectedInterval == planIntervals.Annually"> <ng-container
*ngIf="selectedInterval == planIntervals.Annually && discountPercentageFromSub > 0"
>
<span class="tw-text-xs"> <span class="tw-text-xs">
{{ {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
"providerDiscount"
| i18n: this.discountPercentageFromSub + this.discountPercentage
| lowercase
}}
</span> </span>
<span class="tw-line-through tw-text-xs">{{ <span class="tw-line-through tw-text-xs">{{
calculateTotalAppliedDiscount( calculateTotalAppliedDiscount(
@ -760,28 +757,6 @@
</span> </span>
<span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span> <span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
</p> </p>
<!--Discount SM Annual-->
<p
class="tw-mb-0 tw-flex tw-justify-between"
bitTypography="body2"
*ngIf="organization.useSecretsManager && isSecretsManagerTrial()"
>
<ng-container *ngIf="selectedInterval == planIntervals.Annually">
<span class="tw-text-xs">
{{
"providerDiscount"
| i18n: this.discountPercentageFromSub + this.discountPercentage
| lowercase
}}
</span>
<span class="tw-line-through tw-text-xs">{{
calculateTotalAppliedDiscount(
additionalServiceAccountTotal(selectedPlan) +
secretsManagerSeatTotal(selectedPlan, sub.smSeats)
) | currency: "$"
}}</span>
</ng-container>
</p>
<!-- password manager summary for annual --> <!-- password manager summary for annual -->
<p class="tw-font-semibold tw-mt-3 tw-mb-0" *ngIf="organization.useSecretsManager"> <p class="tw-font-semibold tw-mt-3 tw-mb-0" *ngIf="organization.useSecretsManager">
{{ "passwordManager" | i18n }} {{ "passwordManager" | i18n }}
@ -946,37 +921,19 @@
class="row" class="row"
> >
<bit-hint class="col-6"> <bit-hint class="col-6">
<p class="tw-mb-0 tw-flex tw-justify-between" bitTypography="body2"> <p
<ng-container class="tw-mb-0 tw-flex tw-justify-between"
*ngIf=" bitTypography="body2"
selectedInterval == planIntervals.Annually; *ngIf="discountPercentageFromSub > 0"
else MonthlyOrAnnuallyWithDiscount
"
> >
<ng-container>
<span class="tw-text-xs"> <span class="tw-text-xs">
{{ {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
"providerDiscount"
| i18n: this.discountPercentageFromSub + this.discountPercentage
| lowercase
}}
</span> </span>
<span class="tw-line-through tw-text-xs">{{ <span class="tw-line-through tw-text-xs">{{
calculateTotalAppliedDiscount(total) | currency: "$" calculateTotalAppliedDiscount(total) | currency: "$"
}}</span> }}</span>
</ng-container> </ng-container>
<ng-template #MonthlyOrAnnuallyWithDiscount>
<span
class="tw-text-xs"
[style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
>
{{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
</span>
<span
[style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
class="tw-line-through tw-text-xs"
>{{ calculateTotalAppliedDiscount(total) | currency: "$" }}</span
>
</ng-template>
</p> </p>
</bit-hint> </bit-hint>
</div> </div>
@ -989,7 +946,7 @@
{{ "total" | i18n }} {{ "total" | i18n }}
</span> </span>
<span> <span>
{{ total | currency: "USD" : "$" }} {{ total - calculateTotalAppliedDiscount(total) | currency: "USD" : "$" }}
<span class="tw-text-xs tw-font-semibold"> <span class="tw-text-xs tw-font-semibold">
/ {{ selectedPlanInterval | i18n }}</span / {{ selectedPlanInterval | i18n }}</span
> >

View File

@ -509,11 +509,8 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
} }
additionalStoragePriceMonthly(selectedPlan: PlanResponse) { additionalStoragePriceMonthly(selectedPlan: PlanResponse) {
if (!selectedPlan.isAnnual) {
return selectedPlan.PasswordManager.additionalStoragePricePerGb; return selectedPlan.PasswordManager.additionalStoragePricePerGb;
} }
return selectedPlan.PasswordManager.additionalStoragePricePerGb / 12;
}
additionalServiceAccountTotal(plan: PlanResponse): number { additionalServiceAccountTotal(plan: PlanResponse): number {
if ( if (
@ -834,12 +831,7 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
} }
calculateTotalAppliedDiscount(total: number) { calculateTotalAppliedDiscount(total: number) {
const discountPercent = const discountedTotal = total * (this.discountPercentageFromSub / 100);
this.selectedInterval == PlanInterval.Annually
? this.discountPercentage + this.discountPercentageFromSub
: this.discountPercentageFromSub;
const discountedTotal = total / (1 - discountPercent / 100);
return discountedTotal; return discountedTotal;
} }

View File

@ -26,7 +26,7 @@
</div> </div>
<ng-container *ngIf="showMethods && method === paymentMethodType.Card"> <ng-container *ngIf="showMethods && method === paymentMethodType.Card">
<div class="tw-grid tw-grid-cols-12 tw-gap-4 tw-mb-4"> <div class="tw-grid tw-grid-cols-12 tw-gap-4 tw-mb-4">
<div [ngClass]="trialFlow ? 'tw-col-span-12' : 'tw-col-span-4'"> <div [ngClass]="trialFlow ? 'tw-col-span-12' : 'tw-col-span-6'">
<app-payment-label-v2 for="stripe-card-number-element">{{ <app-payment-label-v2 for="stripe-card-number-element">{{
"number" | i18n "number" | i18n
}}</app-payment-label-v2> }}</app-payment-label-v2>
@ -40,13 +40,13 @@
height="32" height="32"
/> />
</div> </div>
<div [ngClass]="trialFlow ? 'tw-col-span-6' : 'tw-col-span-4'"> <div [ngClass]="trialFlow ? 'tw-col-span-6' : 'tw-col-span-6'">
<app-payment-label-v2 for="stripe-card-expiry-element">{{ <app-payment-label-v2 for="stripe-card-expiry-element">{{
"expiration" | i18n "expiration" | i18n
}}</app-payment-label-v2> }}</app-payment-label-v2>
<div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div> <div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
</div> </div>
<div [ngClass]="trialFlow ? 'tw-col-span-6' : 'tw-col-span-4'"> <div [ngClass]="trialFlow ? 'tw-col-span-6' : 'tw-col-span-6'">
<app-payment-label-v2 for="stripe-card-cvc-element"> <app-payment-label-v2 for="stripe-card-cvc-element">
{{ "securityCodeSlashCVV" | i18n }} {{ "securityCodeSlashCVV" | i18n }}
<a <a

View File

@ -9131,8 +9131,8 @@
"current": { "current": {
"message": "Current" "message": "Current"
}, },
"secretsManagerSubInfo": { "secretsManagerSubscriptionInfo": {
"message": "Your Secrets Manager subscription will upgrade base on the plan selected" "message": "Your Secrets Manager subscription will upgrade based on the plan selected"
}, },
"bitwardenPasswordManager": { "bitwardenPasswordManager": {
"message": "Bitwarden Password Manager" "message": "Bitwarden Password Manager"