mirror of
https://github.com/bitwarden/browser
synced 2026-02-27 18:13:29 +00:00
96f31aac3a
* Implement the planservice * Add the pricing component and service * Add the change plan type service * resolve the unit test issues * Move the changeSubscriptionFrequency endpoint * Rename planservice to plancardservice * Remove unused and correct typos * Resolve the double asignment * resolve the unit test failing * Remove default payment setting to card * remove unnecessary check * Property initialPaymentMethod has no initializer * move the logic to service * Move estimate tax to pricing service * Refactor thr pricing summary component * Resolve the lint unit test error * Add changes for auto modal * Remove custom role for sm * Resolve the blank member page issue * Changes on the pricing display
69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
import { Component, input, output } from "@angular/core";
|
|
|
|
import { ProductTierType } from "@bitwarden/common/billing/enums";
|
|
|
|
export interface PlanCard {
|
|
title: string;
|
|
costPerMember: number;
|
|
discount?: number;
|
|
isDisabled: boolean;
|
|
isAnnual: boolean;
|
|
isSelected: boolean;
|
|
productTier: ProductTierType;
|
|
}
|
|
|
|
@Component({
|
|
selector: "app-plan-card",
|
|
templateUrl: "./plan-card.component.html",
|
|
standalone: false,
|
|
})
|
|
export class PlanCardComponent {
|
|
plan = input.required<PlanCard>();
|
|
productTiers = ProductTierType;
|
|
|
|
cardClicked = output();
|
|
|
|
getPlanCardContainerClasses(): string[] {
|
|
const isSelected = this.plan().isSelected;
|
|
const isDisabled = this.plan().isDisabled;
|
|
if (isDisabled) {
|
|
return [
|
|
"tw-cursor-not-allowed",
|
|
"tw-bg-secondary-100",
|
|
"tw-font-normal",
|
|
"tw-bg-blur",
|
|
"tw-text-muted",
|
|
"tw-block",
|
|
"tw-rounded",
|
|
];
|
|
}
|
|
|
|
return isSelected
|
|
? [
|
|
"tw-cursor-pointer",
|
|
"tw-block",
|
|
"tw-rounded",
|
|
"tw-border",
|
|
"tw-border-solid",
|
|
"tw-border-primary-600",
|
|
"tw-border-2",
|
|
"tw-rounded-lg",
|
|
"hover:tw-border-primary-700",
|
|
"focus:tw-border-3",
|
|
"focus:tw-border-primary-700",
|
|
"focus:tw-rounded-lg",
|
|
]
|
|
: [
|
|
"tw-cursor-pointer",
|
|
"tw-block",
|
|
"tw-rounded",
|
|
"tw-border",
|
|
"tw-border-solid",
|
|
"tw-border-secondary-300",
|
|
"hover:tw-border-text-main",
|
|
"focus:tw-border-2",
|
|
"focus:tw-border-primary-700",
|
|
];
|
|
}
|
|
}
|