bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00
Code Issues Releases Wiki Activity

Billing/pm 26686/update upgrade account component to be responsive (#16808)

Browse Source 
* fix(billing): Update initialization of payment component

* fix(billing): Add more signal validation

* fix(billing): Add responsiveness to upgrade-account component
This commit is contained in:
Stephon Brown
2025-10-10 12:05:27 -04:00
committed by GitHub
parent e9cd6d2b7f
commit 9c7d794cac
4 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.html
View File

@@ -1,6 +1,6 @@
@if (step() == PlanSelectionStep) {
<app-upgrade-account (planSelected)="onPlanSelected($event)" (closeClicked)="onCloseClicked()" />
} @else if (step() == PaymentStep && selectedPlan() !== null) {
} @else if (step() == PaymentStep && selectedPlan() !== null && account() !== null) {
<app-upgrade-payment
[selectedPlanId]="selectedPlan()"
[account]="account()"

8
apps/web/src/app/billing/individual/upgrade/upgrade-account/upgrade-account.component.html
View File

@@ -1,6 +1,6 @@
@if (!loading()) {
<section
class="tw-bg-background tw-rounded-xl tw-shadow-lg tw-max-w-5xl tw-min-w-[332px] tw-w-[870px] tw-border-secondary-100 tw-border-solid tw-border"
class="tw-w-screen tw-max-h-screen tw-min-w-[332px] md:tw-max-w-4xl tw-overflow-y-auto tw-self-center tw-bg-background tw-rounded-xl tw-shadow-lg tw-border-secondary-100 tw-border-solid tw-border"
cdkTrapFocus
cdkTrapFocusAutoCapture
>
@@ -24,10 +24,10 @@
</p>
</div>
<div class="tw-flex tw-flex-row tw-gap-6 tw-mb-4">
<div class="tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 tw-gap-5 tw-mb-4">
@if (premiumCardDetails) {
<billing-pricing-card
class="tw-flex-1 tw-basis-0 tw-min-w-0"
class="tw-w-full tw-min-w-[216px] tw-max-w-[456px]"
[tagline]="premiumCardDetails.tagline"
[price]="premiumCardDetails.price"
[button]="premiumCardDetails.button"
@@ -42,7 +42,7 @@
@if (familiesCardDetails) {
<billing-pricing-card
class="tw-flex-1 tw-basis-0 tw-min-w-0"
class="tw-w-full tw-min-w-[216px] tw-max-w-[456px]"
[tagline]="familiesCardDetails.tagline"
[price]="familiesCardDetails.price"
[button]="familiesCardDetails.button"

1
apps/web/src/app/billing/individual/upgrade/upgrade-payment/upgrade-payment.component.html
View File

@@ -26,6 +26,7 @@
<section>
@if (passwordManager) {
<billing-cart-summary
#cartSummaryComponent
[passwordManager]="passwordManager"
[estimatedTax]="estimatedTax"
></billing-cart-summary>

37
apps/web/src/app/billing/individual/upgrade/upgrade-payment/upgrade-payment.component.ts
View File

@@ -118,27 +118,24 @@ export class UpgradePaymentComponent implements OnInit, AfterViewInit {
tier: this.selectedPlanId(),
details: planDetails,
};
this.passwordManager = {
name: this.isFamiliesPlan ? "familiesMembership" : "premiumMembership",
cost: this.selectedPlan.details.passwordManager.annualPrice,
quantity: 1,
cadence: "year",
};
this.upgradeToMessage = this.i18nService.t(
this.isFamiliesPlan ? "upgradeToFamilies" : "upgradeToPremium",
);
this.estimatedTax = 0;
} else {
this.complete.emit({ status: UpgradePaymentStatus.Closed, organizationId: null });
return;
}
});
if (!this.selectedPlan) {
this.complete.emit({ status: UpgradePaymentStatus.Closed, organizationId: null });
return;
}
this.passwordManager = {
name: this.isFamiliesPlan ? "familiesMembership" : "premiumMembership",
cost: this.selectedPlan.details.passwordManager.annualPrice,
quantity: 1,
cadence: "year",
};
this.upgradeToMessage = this.i18nService.t(
this.isFamiliesPlan ? "upgradeToFamilies" : "upgradeToPremium",
);
this.estimatedTax = 0;
this.formGroup.valueChanges
.pipe(debounceTime(1000), takeUntilDestroyed(this.destroyRef))
.subscribe(() => this.refreshSalesTax());
@@ -146,7 +143,9 @@ export class UpgradePaymentComponent implements OnInit, AfterViewInit {
}
ngAfterViewInit(): void {
this.cartSummaryComponent.isExpanded.set(false);
if (this.cartSummaryComponent) {
this.cartSummaryComponent.isExpanded.set(false);
}
}
protected get isPremiumPlan(): boolean {