mirror of
https://github.com/bitwarden/browser
synced 2025-12-13 06:43:35 +00:00
[PM-21881] Manage payment details outside of checkout (#15458)
* Add billable-entity * Add payment types * Add billing.client * Update stripe.service * Add payment method components * Add address.pipe * Add billing address components * Add account credit components * Add component index * Add feature flag * Re-work organization warnings code * Add organization-payment-details.component * Backfill translations * Set up organization FF routing * Add account-payment-details.component * Set up account FF routing * Add provider-payment-details.component * Set up provider FF routing * Use inline component templates for re-usable payment components * Remove errant rebase file * Removed public accessibility modifier * Fix failing test
This commit is contained in:
Alex Morask
GitHub
@@ -1,14 +1,14 @@
|
||||
<app-free-trial-warning
|
||||
<app-organization-free-trial-warning
|
||||
*ngIf="useOrganizationWarningsService$ | async"
|
||||
[organization]="organization"
|
||||
(clicked)="navigateToPaymentMethod()"
|
||||
>
|
||||
</app-free-trial-warning>
|
||||
<app-reseller-renewal-warning
|
||||
</app-organization-free-trial-warning>
|
||||
<app-organization-reseller-renewal-warning
|
||||
*ngIf="useOrganizationWarningsService$ | async"
|
||||
[organization]="organization"
|
||||
>
|
||||
</app-reseller-renewal-warning>
|
||||
</app-organization-reseller-renewal-warning>
|
||||
<ng-container *ngIf="freeTrialWhenWarningsServiceDisabled$ | async as freeTrial">
|
||||
<bit-banner
|
||||
id="free-trial-banner"
|
||||
|
||||
@@ -78,8 +78,8 @@ import {
|
||||
DecryptionFailureDialogComponent,
|
||||
PasswordRepromptService,
|
||||
} from "@bitwarden/vault";
|
||||
import { OrganizationWarningsService } from "@bitwarden/web-vault/app/billing/services/organization-warnings.service";
|
||||
import { ResellerRenewalWarningComponent } from "@bitwarden/web-vault/app/billing/warnings/reseller-renewal-warning.component";
|
||||
import { OrganizationResellerRenewalWarningComponent } from "@bitwarden/web-vault/app/billing/warnings/components/organization-reseller-renewal-warning.component";
|
||||
import { OrganizationWarningsService } from "@bitwarden/web-vault/app/billing/warnings/services/organization-warnings.service";
|
||||
|
||||
import { BillingNotificationService } from "../../../billing/services/billing-notification.service";
|
||||
import {
|
||||
@@ -88,7 +88,7 @@ import {
|
||||
} from "../../../billing/services/reseller-warning.service";
|
||||
import { TrialFlowService } from "../../../billing/services/trial-flow.service";
|
||||
import { FreeTrial } from "../../../billing/types/free-trial";
|
||||
import { FreeTrialWarningComponent } from "../../../billing/warnings/free-trial-warning.component";
|
||||
import { OrganizationFreeTrialWarningComponent } from "../../../billing/warnings/components/organization-free-trial-warning.component";
|
||||
import { SharedModule } from "../../../shared";
|
||||
import { AssignCollectionsWebComponent } from "../../../vault/components/assign-collections";
|
||||
import {
|
||||
@@ -125,7 +125,7 @@ import {
|
||||
BulkCollectionsDialogResult,
|
||||
} from "./bulk-collections-dialog";
|
||||
import { CollectionAccessRestrictedComponent } from "./collection-access-restricted.component";
|
||||
import { getNestedCollectionTree, getFlatCollectionTree } from "./utils";
|
||||
import { getFlatCollectionTree, getNestedCollectionTree } from "./utils";
|
||||
import { VaultFilterModule } from "./vault-filter/vault-filter.module";
|
||||
import { VaultHeaderComponent } from "./vault-header/vault-header.component";
|
||||
|
||||
@@ -150,8 +150,8 @@ enum AddAccessStatusType {
|
||||
SharedModule,
|
||||
BannerModule,
|
||||
NoItemsModule,
|
||||
FreeTrialWarningComponent,
|
||||
ResellerRenewalWarningComponent,
|
||||
OrganizationFreeTrialWarningComponent,
|
||||
OrganizationResellerRenewalWarningComponent,
|
||||
],
|
||||
providers: [
|
||||
RoutedVaultFilterService,
|
||||
@@ -749,10 +749,13 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
async navigateToPaymentMethod() {
|
||||
await this.router.navigate(
|
||||
["organizations", `${this.organization?.id}`, "billing", "payment-method"],
|
||||
{ state: { launchPaymentModalAutomatically: true } },
|
||||
const managePaymentDetailsOutsideCheckout = await this.configService.getFeatureFlag(
|
||||
FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout,
|
||||
);
|
||||
const route = managePaymentDetailsOutsideCheckout ? "payment-details" : "payment-method";
|
||||
await this.router.navigate(["organizations", `${this.organization?.id}`, "billing", route], {
|
||||
state: { launchPaymentModalAutomatically: true },
|
||||
});
|
||||
}
|
||||
|
||||
addAccessToggle(e: AddAccessStatusType) {
|
||||
|
||||
@@ -74,7 +74,11 @@
|
||||
>
|
||||
<bit-nav-item [text]="'subscription' | i18n" route="billing/subscription"></bit-nav-item>
|
||||
<ng-container *ngIf="(showPaymentAndHistory$ | async) && (organizationIsUnmanaged$ | async)">
|
||||
<bit-nav-item [text]="'paymentMethod' | i18n" route="billing/payment-method"></bit-nav-item>
|
||||
@let paymentDetailsPageData = paymentDetailsPageData$ | async;
|
||||
<bit-nav-item
|
||||
[text]="paymentDetailsPageData.textKey | i18n"
|
||||
[route]="paymentDetailsPageData.route"
|
||||
></bit-nav-item>
|
||||
<bit-nav-item [text]="'billingHistory' | i18n" route="billing/history"></bit-nav-item>
|
||||
</ng-container>
|
||||
</bit-nav-group>
|
||||
|
||||
@@ -64,6 +64,11 @@ export class OrganizationLayoutComponent implements OnInit {
|
||||
protected showSponsoredFamiliesDropdown$: Observable<boolean>;
|
||||
protected canShowPoliciesTab$: Observable<boolean>;
|
||||
|
||||
protected paymentDetailsPageData$: Observable<{
|
||||
route: string;
|
||||
textKey: string;
|
||||
}>;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private organizationService: OrganizationService,
|
||||
@@ -135,6 +140,16 @@ export class OrganizationLayoutComponent implements OnInit {
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
this.paymentDetailsPageData$ = this.configService
|
||||
.getFeatureFlag$(FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout)
|
||||
.pipe(
|
||||
map((managePaymentDetailsOutsideCheckout) =>
|
||||
managePaymentDetailsOutsideCheckout
|
||||
? { route: "billing/payment-details", textKey: "paymentDetails" }
|
||||
: { route: "billing/payment-method", textKey: "paymentMethod" },
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
canShowVaultTab(organization: Organization): boolean {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { NgModule } from "@angular/core";
|
||||
import { RouterModule, Routes } from "@angular/router";
|
||||
|
||||
import { AccountPaymentDetailsComponent } from "@bitwarden/web-vault/app/billing/individual/payment-details/account-payment-details.component";
|
||||
|
||||
import { PaymentMethodComponent } from "../shared";
|
||||
|
||||
import { BillingHistoryViewComponent } from "./billing-history-view.component";
|
||||
@@ -30,6 +32,11 @@ const routes: Routes = [
|
||||
component: PaymentMethodComponent,
|
||||
data: { titleId: "paymentMethod" },
|
||||
},
|
||||
{
|
||||
path: "payment-details",
|
||||
component: AccountPaymentDetailsComponent,
|
||||
data: { titleId: "paymentDetails" },
|
||||
},
|
||||
{
|
||||
path: "billing-history",
|
||||
component: BillingHistoryViewComponent,
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
<bit-container>
|
||||
@let view = view$ | async;
|
||||
@if (!view) {
|
||||
<ng-container>
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin tw-text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
|
||||
</ng-container>
|
||||
} @else {
|
||||
<ng-container>
|
||||
<app-display-payment-method
|
||||
[owner]="view.account"
|
||||
[paymentMethod]="view.paymentMethod"
|
||||
(updated)="setPaymentMethod($event)"
|
||||
></app-display-payment-method>
|
||||
|
||||
<app-display-account-credit
|
||||
[owner]="view.account"
|
||||
[credit]="view.credit"
|
||||
></app-display-account-credit>
|
||||
</ng-container>
|
||||
}
|
||||
</bit-container>
|
||||
@@ -0,0 +1,116 @@
|
||||
import { Component } from "@angular/core";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import {
|
||||
BehaviorSubject,
|
||||
EMPTY,
|
||||
filter,
|
||||
from,
|
||||
map,
|
||||
merge,
|
||||
Observable,
|
||||
shareReplay,
|
||||
switchMap,
|
||||
tap,
|
||||
} from "rxjs";
|
||||
import { catchError } from "rxjs/operators";
|
||||
|
||||
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
|
||||
import { HeaderModule } from "../../../layouts/header/header.module";
|
||||
import { SharedModule } from "../../../shared";
|
||||
import {
|
||||
DisplayAccountCreditComponent,
|
||||
DisplayPaymentMethodComponent,
|
||||
} from "../../payment/components";
|
||||
import { MaskedPaymentMethod } from "../../payment/types";
|
||||
import { BillingClient } from "../../services";
|
||||
import { accountToBillableEntity, BillableEntity } from "../../types";
|
||||
|
||||
class RedirectError {
|
||||
constructor(
|
||||
public path: string[],
|
||||
public relativeTo: ActivatedRoute,
|
||||
) {}
|
||||
}
|
||||
|
||||
type View = {
|
||||
account: BillableEntity;
|
||||
paymentMethod: MaskedPaymentMethod | null;
|
||||
credit: number | null;
|
||||
};
|
||||
|
||||
@Component({
|
||||
templateUrl: "./account-payment-details.component.html",
|
||||
standalone: true,
|
||||
imports: [
|
||||
DisplayAccountCreditComponent,
|
||||
DisplayPaymentMethodComponent,
|
||||
HeaderModule,
|
||||
SharedModule,
|
||||
],
|
||||
providers: [BillingClient],
|
||||
})
|
||||
export class AccountPaymentDetailsComponent {
|
||||
private viewState$ = new BehaviorSubject<View | null>(null);
|
||||
|
||||
private load$: Observable<View> = this.accountService.activeAccount$.pipe(
|
||||
switchMap((account) =>
|
||||
this.configService
|
||||
.getFeatureFlag$(FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout)
|
||||
.pipe(
|
||||
map((managePaymentDetailsOutsideCheckout) => {
|
||||
if (!managePaymentDetailsOutsideCheckout) {
|
||||
throw new RedirectError(["../payment-method"], this.activatedRoute);
|
||||
}
|
||||
return account;
|
||||
}),
|
||||
),
|
||||
),
|
||||
accountToBillableEntity,
|
||||
switchMap(async (account) => {
|
||||
const [paymentMethod, credit] = await Promise.all([
|
||||
this.billingClient.getPaymentMethod(account),
|
||||
this.billingClient.getCredit(account),
|
||||
]);
|
||||
|
||||
return {
|
||||
account,
|
||||
paymentMethod,
|
||||
credit,
|
||||
};
|
||||
}),
|
||||
shareReplay({ bufferSize: 1, refCount: false }),
|
||||
catchError((error: unknown) => {
|
||||
if (error instanceof RedirectError) {
|
||||
return from(this.router.navigate(error.path, { relativeTo: error.relativeTo })).pipe(
|
||||
switchMap(() => EMPTY),
|
||||
);
|
||||
}
|
||||
throw error;
|
||||
}),
|
||||
);
|
||||
|
||||
view$: Observable<View> = merge(
|
||||
this.load$.pipe(tap((view) => this.viewState$.next(view))),
|
||||
this.viewState$.pipe(filter((view): view is View => view !== null)),
|
||||
).pipe(shareReplay({ bufferSize: 1, refCount: true }));
|
||||
|
||||
constructor(
|
||||
private accountService: AccountService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private billingClient: BillingClient,
|
||||
private configService: ConfigService,
|
||||
private router: Router,
|
||||
) {}
|
||||
|
||||
setPaymentMethod = (paymentMethod: MaskedPaymentMethod) => {
|
||||
if (this.viewState$.value) {
|
||||
this.viewState$.next({
|
||||
...this.viewState$.value,
|
||||
paymentMethod,
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -3,7 +3,10 @@
|
||||
<bit-tab-link [route]="(hasPremium$ | async) ? 'user-subscription' : 'premium'">{{
|
||||
"subscription" | i18n
|
||||
}}</bit-tab-link>
|
||||
<bit-tab-link route="payment-method">{{ "paymentMethod" | i18n }}</bit-tab-link>
|
||||
@let paymentMethodPageData = paymentDetailsPageData$ | async;
|
||||
<bit-tab-link [route]="paymentMethodPageData.route">{{
|
||||
paymentMethodPageData.textKey | i18n
|
||||
}}</bit-tab-link>
|
||||
<bit-tab-link route="billing-history">{{ "billingHistory" | i18n }}</bit-tab-link>
|
||||
</bit-tab-nav-bar>
|
||||
</app-header>
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
// FIXME: Update this file to be type safe and remove this and next line
|
||||
// @ts-strict-ignore
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { Observable, switchMap } from "rxjs";
|
||||
import { map, Observable, switchMap } from "rxjs";
|
||||
|
||||
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
||||
import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
||||
|
||||
@Component({
|
||||
@@ -13,16 +15,32 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
|
||||
})
|
||||
export class SubscriptionComponent implements OnInit {
|
||||
hasPremium$: Observable<boolean>;
|
||||
paymentDetailsPageData$: Observable<{
|
||||
route: string;
|
||||
textKey: string;
|
||||
}>;
|
||||
|
||||
selfHosted: boolean;
|
||||
|
||||
constructor(
|
||||
private platformUtilsService: PlatformUtilsService,
|
||||
billingAccountProfileStateService: BillingAccountProfileStateService,
|
||||
accountService: AccountService,
|
||||
private configService: ConfigService,
|
||||
) {
|
||||
this.hasPremium$ = accountService.activeAccount$.pipe(
|
||||
switchMap((account) => billingAccountProfileStateService.hasPremiumPersonally$(account.id)),
|
||||
);
|
||||
|
||||
this.paymentDetailsPageData$ = this.configService
|
||||
.getFeatureFlag$(FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout)
|
||||
.pipe(
|
||||
map((managePaymentDetailsOutsideCheckout) =>
|
||||
managePaymentDetailsOutsideCheckout
|
||||
? { route: "payment-details", textKey: "paymentDetails" }
|
||||
: { route: "payment-method", textKey: "paymentMethod" },
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
@@ -2,6 +2,7 @@ import { NgModule } from "@angular/core";
|
||||
import { RouterModule, Routes } from "@angular/router";
|
||||
|
||||
import { canAccessBillingTab } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
|
||||
import { OrganizationPaymentDetailsComponent } from "@bitwarden/web-vault/app/billing/organizations/payment-details/organization-payment-details.component";
|
||||
|
||||
import { organizationPermissionsGuard } from "../../admin-console/organizations/guards/org-permissions.guard";
|
||||
import { organizationIsUnmanaged } from "../../billing/guards/organization-is-unmanaged.guard";
|
||||
@@ -36,6 +37,17 @@ const routes: Routes = [
|
||||
titleId: "paymentMethod",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "payment-details",
|
||||
component: OrganizationPaymentDetailsComponent,
|
||||
canActivate: [
|
||||
organizationPermissionsGuard((org) => org.canEditPaymentMethods),
|
||||
organizationIsUnmanaged,
|
||||
],
|
||||
data: {
|
||||
titleId: "paymentDetails",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "history",
|
||||
component: OrgBillingHistoryViewComponent,
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
@let organization = organization$ | async;
|
||||
@if (organization) {
|
||||
<app-organization-free-trial-warning
|
||||
[organization]="organization"
|
||||
(clicked)="changePaymentMethod()"
|
||||
>
|
||||
</app-organization-free-trial-warning>
|
||||
}
|
||||
<app-header></app-header>
|
||||
<bit-container>
|
||||
@let view = view$ | async;
|
||||
@if (!view) {
|
||||
<ng-container>
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin tw-text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
|
||||
</ng-container>
|
||||
} @else {
|
||||
<ng-container>
|
||||
<app-display-payment-method
|
||||
[owner]="view.organization"
|
||||
[paymentMethod]="view.paymentMethod"
|
||||
(updated)="setPaymentMethod($event)"
|
||||
></app-display-payment-method>
|
||||
|
||||
<app-display-billing-address
|
||||
[owner]="view.organization"
|
||||
[billingAddress]="view.billingAddress"
|
||||
(updated)="setBillingAddress($event)"
|
||||
></app-display-billing-address>
|
||||
|
||||
<app-display-account-credit
|
||||
[owner]="view.organization"
|
||||
[credit]="view.credit"
|
||||
></app-display-account-credit>
|
||||
</ng-container>
|
||||
}
|
||||
</bit-container>
|
||||
@@ -0,0 +1,187 @@
|
||||
import { Component, OnInit, ViewChild } from "@angular/core";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import {
|
||||
BehaviorSubject,
|
||||
catchError,
|
||||
EMPTY,
|
||||
filter,
|
||||
firstValueFrom,
|
||||
from,
|
||||
lastValueFrom,
|
||||
map,
|
||||
merge,
|
||||
Observable,
|
||||
shareReplay,
|
||||
switchMap,
|
||||
tap,
|
||||
} from "rxjs";
|
||||
|
||||
import {
|
||||
getOrganizationById,
|
||||
OrganizationService,
|
||||
} from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
|
||||
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
|
||||
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
||||
import { getUserId } from "@bitwarden/common/auth/services/account.service";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { DialogService } from "@bitwarden/components";
|
||||
|
||||
import { HeaderModule } from "../../../layouts/header/header.module";
|
||||
import { SharedModule } from "../../../shared";
|
||||
import {
|
||||
ChangePaymentMethodDialogComponent,
|
||||
DisplayAccountCreditComponent,
|
||||
DisplayBillingAddressComponent,
|
||||
DisplayPaymentMethodComponent,
|
||||
} from "../../payment/components";
|
||||
import { BillingAddress, MaskedPaymentMethod } from "../../payment/types";
|
||||
import { BillingClient } from "../../services";
|
||||
import { BillableEntity, organizationToBillableEntity } from "../../types";
|
||||
import { OrganizationFreeTrialWarningComponent } from "../../warnings/components";
|
||||
|
||||
class RedirectError {
|
||||
constructor(
|
||||
public path: string[],
|
||||
public relativeTo: ActivatedRoute,
|
||||
) {}
|
||||
}
|
||||
|
||||
type View = {
|
||||
organization: BillableEntity;
|
||||
paymentMethod: MaskedPaymentMethod | null;
|
||||
billingAddress: BillingAddress | null;
|
||||
credit: number | null;
|
||||
};
|
||||
|
||||
@Component({
|
||||
templateUrl: "./organization-payment-details.component.html",
|
||||
standalone: true,
|
||||
imports: [
|
||||
DisplayBillingAddressComponent,
|
||||
DisplayAccountCreditComponent,
|
||||
DisplayPaymentMethodComponent,
|
||||
HeaderModule,
|
||||
OrganizationFreeTrialWarningComponent,
|
||||
SharedModule,
|
||||
],
|
||||
providers: [BillingClient],
|
||||
})
|
||||
export class OrganizationPaymentDetailsComponent implements OnInit {
|
||||
@ViewChild(OrganizationFreeTrialWarningComponent)
|
||||
organizationFreeTrialWarningComponent!: OrganizationFreeTrialWarningComponent;
|
||||
|
||||
private viewState$ = new BehaviorSubject<View | null>(null);
|
||||
|
||||
private load$: Observable<View> = this.accountService.activeAccount$
|
||||
.pipe(
|
||||
getUserId,
|
||||
switchMap((userId) =>
|
||||
this.organizationService
|
||||
.organizations$(userId)
|
||||
.pipe(getOrganizationById(this.activatedRoute.snapshot.params.organizationId)),
|
||||
),
|
||||
)
|
||||
.pipe(
|
||||
switchMap((organization) =>
|
||||
this.configService
|
||||
.getFeatureFlag$(FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout)
|
||||
.pipe(
|
||||
map((managePaymentDetailsOutsideCheckout) => {
|
||||
if (!managePaymentDetailsOutsideCheckout) {
|
||||
throw new RedirectError(["../payment-method"], this.activatedRoute);
|
||||
}
|
||||
return organization;
|
||||
}),
|
||||
),
|
||||
),
|
||||
organizationToBillableEntity,
|
||||
switchMap(async (organization) => {
|
||||
const [paymentMethod, billingAddress, credit] = await Promise.all([
|
||||
this.billingClient.getPaymentMethod(organization),
|
||||
this.billingClient.getBillingAddress(organization),
|
||||
this.billingClient.getCredit(organization),
|
||||
]);
|
||||
|
||||
return {
|
||||
organization,
|
||||
paymentMethod,
|
||||
billingAddress,
|
||||
credit,
|
||||
};
|
||||
}),
|
||||
catchError((error: unknown) => {
|
||||
if (error instanceof RedirectError) {
|
||||
return from(this.router.navigate(error.path, { relativeTo: error.relativeTo })).pipe(
|
||||
switchMap(() => EMPTY),
|
||||
);
|
||||
}
|
||||
throw error;
|
||||
}),
|
||||
);
|
||||
|
||||
view$: Observable<View> = merge(
|
||||
this.load$.pipe(tap((view) => this.viewState$.next(view))),
|
||||
this.viewState$.pipe(filter((view): view is View => view !== null)),
|
||||
).pipe(shareReplay({ bufferSize: 1, refCount: true }));
|
||||
|
||||
organization$ = this.view$.pipe(map((view) => view.organization.data as Organization));
|
||||
|
||||
constructor(
|
||||
private accountService: AccountService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private billingClient: BillingClient,
|
||||
private configService: ConfigService,
|
||||
private dialogService: DialogService,
|
||||
private organizationService: OrganizationService,
|
||||
private router: Router,
|
||||
) {}
|
||||
|
||||
async ngOnInit() {
|
||||
const openChangePaymentMethodDialogOnStart =
|
||||
(history.state?.launchPaymentModalAutomatically as boolean) ?? false;
|
||||
|
||||
if (openChangePaymentMethodDialogOnStart) {
|
||||
history.replaceState({ ...history.state, launchPaymentModalAutomatically: false }, "");
|
||||
await this.changePaymentMethod();
|
||||
}
|
||||
}
|
||||
|
||||
changePaymentMethod = async () => {
|
||||
const view = await firstValueFrom(this.view$);
|
||||
const dialogRef = ChangePaymentMethodDialogComponent.open(this.dialogService, {
|
||||
data: {
|
||||
owner: view.organization,
|
||||
},
|
||||
});
|
||||
const result = await lastValueFrom(dialogRef.closed);
|
||||
if (result?.type === "success") {
|
||||
this.setPaymentMethod(result.paymentMethod);
|
||||
if (!view.billingAddress && result.paymentMethod.type !== "payPal") {
|
||||
const billingAddress = await this.billingClient.getBillingAddress(view.organization);
|
||||
if (billingAddress) {
|
||||
this.setBillingAddress(billingAddress);
|
||||
}
|
||||
}
|
||||
this.organizationFreeTrialWarningComponent.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
setBillingAddress = (billingAddress: BillingAddress) => {
|
||||
if (this.viewState$.value) {
|
||||
this.viewState$.next({
|
||||
...this.viewState$.value,
|
||||
billingAddress,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
setPaymentMethod = (paymentMethod: MaskedPaymentMethod) => {
|
||||
if (this.viewState$.value) {
|
||||
this.viewState$.next({
|
||||
...this.viewState$.value,
|
||||
paymentMethod,
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import { Location } from "@angular/common";
|
||||
import { Component, OnDestroy } from "@angular/core";
|
||||
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { firstValueFrom, from, lastValueFrom, map, switchMap } from "rxjs";
|
||||
import { combineLatest, firstValueFrom, from, lastValueFrom, map, switchMap } from "rxjs";
|
||||
|
||||
import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
|
||||
import {
|
||||
@@ -19,6 +19,8 @@ import { TaxInformation } from "@bitwarden/common/billing/models/domain";
|
||||
import { VerifyBankAccountRequest } from "@bitwarden/common/billing/models/request/verify-bank-account.request";
|
||||
import { OrganizationSubscriptionResponse } from "@bitwarden/common/billing/models/response/organization-subscription.response";
|
||||
import { PaymentSourceResponse } from "@bitwarden/common/billing/models/response/payment-source.response";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
||||
import { SyncService } from "@bitwarden/common/platform/sync";
|
||||
@@ -72,18 +74,28 @@ export class OrganizationPaymentMethodComponent implements OnDestroy {
|
||||
private accountService: AccountService,
|
||||
protected syncService: SyncService,
|
||||
private billingNotificationService: BillingNotificationService,
|
||||
private configService: ConfigService,
|
||||
) {
|
||||
this.activatedRoute.params
|
||||
combineLatest([
|
||||
this.activatedRoute.params,
|
||||
this.configService.getFeatureFlag$(FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout),
|
||||
])
|
||||
.pipe(
|
||||
takeUntilDestroyed(),
|
||||
switchMap(({ organizationId }) => {
|
||||
switchMap(([{ organizationId }, managePaymentDetailsOutsideCheckout]) => {
|
||||
if (this.platformUtilsService.isSelfHost()) {
|
||||
return from(this.router.navigate(["/settings/subscription"]));
|
||||
}
|
||||
|
||||
if (managePaymentDetailsOutsideCheckout) {
|
||||
return from(
|
||||
this.router.navigate(["../payment-details"], { relativeTo: this.activatedRoute }),
|
||||
);
|
||||
}
|
||||
|
||||
this.organizationId = organizationId;
|
||||
return from(this.load());
|
||||
}),
|
||||
takeUntilDestroyed(),
|
||||
)
|
||||
.subscribe();
|
||||
|
||||
|
||||
@@ -0,0 +1,241 @@
|
||||
import { DIALOG_DATA } from "@angular/cdk/dialog";
|
||||
import { Component, ElementRef, Inject, ViewChild } from "@angular/core";
|
||||
import {
|
||||
AbstractControl,
|
||||
FormControl,
|
||||
FormGroup,
|
||||
ValidationErrors,
|
||||
ValidatorFn,
|
||||
Validators,
|
||||
} from "@angular/forms";
|
||||
import { map } from "rxjs";
|
||||
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
||||
import { DialogConfig, DialogRef, DialogService, ToastService } from "@bitwarden/components";
|
||||
|
||||
import { SharedModule } from "../../../shared";
|
||||
import { BillingClient } from "../../services";
|
||||
import { BillableEntity } from "../../types";
|
||||
|
||||
type DialogParams = {
|
||||
owner: BillableEntity;
|
||||
};
|
||||
|
||||
type DialogResult = "cancelled" | "error" | "launched";
|
||||
|
||||
type PayPalConfig = {
|
||||
businessId: string;
|
||||
buttonAction: string;
|
||||
};
|
||||
|
||||
declare const process: {
|
||||
env: {
|
||||
PAYPAL_CONFIG: PayPalConfig;
|
||||
};
|
||||
};
|
||||
|
||||
const positiveNumberValidator =
|
||||
(message: string): ValidatorFn =>
|
||||
(control: AbstractControl): ValidationErrors | null => {
|
||||
if (!control.value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const value = parseFloat(control.value);
|
||||
|
||||
if (isNaN(value) || value <= 0) {
|
||||
return { notPositiveNumber: { message } };
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<form [formGroup]="formGroup" [bitSubmit]="submit">
|
||||
<bit-dialog>
|
||||
<span bitDialogTitle class="tw-font-semibold">
|
||||
{{ "addCredit" | i18n }}
|
||||
</span>
|
||||
<div bitDialogContent>
|
||||
<p bitTypography="body1">{{ "creditDelayed" | i18n }}</p>
|
||||
<div class="tw-grid tw-grid-cols-2">
|
||||
<bit-radio-group [formControl]="formGroup.controls.paymentMethod">
|
||||
<bit-radio-button id="credit-method-paypal" [value]="'payPal'">
|
||||
<bit-label> <i class="bwi bwi-paypal"></i>PayPal</bit-label>
|
||||
</bit-radio-button>
|
||||
<bit-radio-button id="credit-method-bitcoin" [value]="'bitPay'">
|
||||
<bit-label> <i class="bwi bwi-bitcoin"></i>Bitcoin</bit-label>
|
||||
</bit-radio-button>
|
||||
</bit-radio-group>
|
||||
</div>
|
||||
<div class="tw-grid tw-grid-cols-2">
|
||||
<bit-form-field>
|
||||
<bit-label>{{ "amount" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
[formControl]="formGroup.controls.amount"
|
||||
type="text"
|
||||
(blur)="formatAmount()"
|
||||
required
|
||||
/>
|
||||
<span bitPrefix>$USD</span>
|
||||
</bit-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container bitDialogFooter>
|
||||
<button type="submit" bitButton bitFormButton buttonType="primary">
|
||||
{{ "submit" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
bitButton
|
||||
bitFormButton
|
||||
buttonType="secondary"
|
||||
[bitDialogClose]="'cancelled'"
|
||||
>
|
||||
{{ "cancel" | i18n }}
|
||||
</button>
|
||||
</ng-container>
|
||||
</bit-dialog>
|
||||
</form>
|
||||
<form #payPalForm action="{{ payPalConfig.buttonAction }}" method="post" target="_top">
|
||||
<input type="hidden" name="cmd" value="_xclick" />
|
||||
<input type="hidden" name="business" value="{{ payPalConfig.businessId }}" />
|
||||
<input type="hidden" name="button_subtype" value="services" />
|
||||
<input type="hidden" name="no_note" value="1" />
|
||||
<input type="hidden" name="no_shipping" value="1" />
|
||||
<input type="hidden" name="rm" value="1" />
|
||||
<input type="hidden" name="return" value="{{ redirectUrl }}" />
|
||||
<input type="hidden" name="cancel_return" value="{{ redirectUrl }}" />
|
||||
<input type="hidden" name="currency_code" value="USD" />
|
||||
<input
|
||||
type="hidden"
|
||||
name="image_url"
|
||||
value="https://bitwarden.com/images/paypal-banner.png"
|
||||
/>
|
||||
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynow_LG.gif:NonHosted" />
|
||||
<input type="hidden" name="amount" value="{{ amount }}" />
|
||||
<input type="hidden" name="custom" value="{{ payPalCustom$ | async }}" />
|
||||
<input type="hidden" name="item_name" value="Bitwarden Account Credit" />
|
||||
<input type="hidden" name="item_number" value="{{ payPalSubject }}" />
|
||||
</form>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [SharedModule],
|
||||
providers: [BillingClient],
|
||||
})
|
||||
export class AddAccountCreditDialogComponent {
|
||||
@ViewChild("payPalForm", { read: ElementRef, static: true }) payPalForm!: ElementRef;
|
||||
|
||||
protected payPalConfig = process.env.PAYPAL_CONFIG as PayPalConfig;
|
||||
protected redirectUrl = window.location.href;
|
||||
|
||||
protected formGroup = new FormGroup({
|
||||
paymentMethod: new FormControl<"payPal" | "bitPay">("payPal"),
|
||||
amount: new FormControl<string | null>("0.00", [
|
||||
Validators.required,
|
||||
positiveNumberValidator(this.i18nService.t("mustBePositiveNumber")),
|
||||
]),
|
||||
});
|
||||
|
||||
protected payPalCustom$ = this.configService.cloudRegion$.pipe(
|
||||
map((cloudRegion) => {
|
||||
switch (this.dialogParams.owner.type) {
|
||||
case "account": {
|
||||
return `user_id=${this.dialogParams.owner.data.id},account_credit=1,region=${cloudRegion}`;
|
||||
}
|
||||
case "organization": {
|
||||
return `organization_id=${this.dialogParams.owner.data.id},account_credit=1,region=${cloudRegion}`;
|
||||
}
|
||||
case "provider": {
|
||||
return `provider_id=${this.dialogParams.owner.data.id},account_credit=1,region=${cloudRegion}`;
|
||||
}
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
||||
constructor(
|
||||
private billingClient: BillingClient,
|
||||
private configService: ConfigService,
|
||||
@Inject(DIALOG_DATA) private dialogParams: DialogParams,
|
||||
private dialogRef: DialogRef<DialogResult>,
|
||||
private i18nService: I18nService,
|
||||
private platformUtilsService: PlatformUtilsService,
|
||||
private toastService: ToastService,
|
||||
) {}
|
||||
|
||||
submit = async (): Promise<void> => {
|
||||
this.formGroup.markAllAsTouched();
|
||||
|
||||
if (!this.formGroup.valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.formGroup.value.paymentMethod === "bitPay") {
|
||||
const result = await this.billingClient.addCreditWithBitPay(this.dialogParams.owner, {
|
||||
amount: this.amount!,
|
||||
redirectUrl: this.redirectUrl,
|
||||
});
|
||||
|
||||
switch (result.type) {
|
||||
case "success": {
|
||||
this.platformUtilsService.launchUri(result.value);
|
||||
this.dialogRef.close("launched");
|
||||
break;
|
||||
}
|
||||
case "error": {
|
||||
this.toastService.showToast({
|
||||
variant: "error",
|
||||
title: "",
|
||||
message: result.message,
|
||||
});
|
||||
this.dialogRef.close("error");
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.payPalForm.nativeElement.submit();
|
||||
this.dialogRef.close("launched");
|
||||
};
|
||||
|
||||
formatAmount = (): void => {
|
||||
if (this.formGroup.value.amount) {
|
||||
const amount = parseFloat(this.formGroup.value.amount);
|
||||
if (isNaN(amount)) {
|
||||
this.formGroup.controls.amount.setValue(null);
|
||||
} else {
|
||||
this.formGroup.controls.amount.setValue(amount.toFixed(2).toString());
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
get amount(): number | null {
|
||||
if (this.formGroup.value.amount) {
|
||||
const amount = parseFloat(this.formGroup.value.amount);
|
||||
if (isNaN(amount)) {
|
||||
return null;
|
||||
}
|
||||
return amount;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
get payPalSubject(): string {
|
||||
switch (this.dialogParams.owner.type) {
|
||||
case "account": {
|
||||
return this.dialogParams.owner.data.email;
|
||||
}
|
||||
case "organization":
|
||||
case "provider": {
|
||||
return this.dialogParams.owner.data.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static open = (dialogService: DialogService, dialogConfig: DialogConfig<DialogParams>) =>
|
||||
dialogService.open<DialogResult>(AddAccountCreditDialogComponent, dialogConfig);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { DIALOG_DATA } from "@angular/cdk/dialog";
|
||||
import { Component, Inject, ViewChild } from "@angular/core";
|
||||
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { DialogConfig, DialogRef, DialogService, ToastService } from "@bitwarden/components";
|
||||
|
||||
import { SharedModule } from "../../../shared";
|
||||
import { BillingClient } from "../../services";
|
||||
import { BillableEntity } from "../../types";
|
||||
import { MaskedPaymentMethod } from "../types";
|
||||
|
||||
import { EnterPaymentMethodComponent } from "./enter-payment-method.component";
|
||||
|
||||
type DialogParams = {
|
||||
owner: BillableEntity;
|
||||
};
|
||||
|
||||
type DialogResult =
|
||||
| { type: "cancelled" }
|
||||
| { type: "error" }
|
||||
| { type: "success"; paymentMethod: MaskedPaymentMethod };
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<form [formGroup]="formGroup" [bitSubmit]="submit">
|
||||
<bit-dialog>
|
||||
<span bitDialogTitle class="tw-font-semibold">
|
||||
{{ "changePaymentMethod" | i18n }}
|
||||
</span>
|
||||
<div bitDialogContent>
|
||||
<app-enter-payment-method [group]="formGroup" [includeBillingAddress]="true">
|
||||
</app-enter-payment-method>
|
||||
</div>
|
||||
<ng-container bitDialogFooter>
|
||||
<button bitButton bitFormButton buttonType="primary" type="submit">
|
||||
{{ "save" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
bitButton
|
||||
buttonType="secondary"
|
||||
type="button"
|
||||
[bitDialogClose]="{ type: 'cancelled' }"
|
||||
>
|
||||
{{ "cancel" | i18n }}
|
||||
</button>
|
||||
</ng-container>
|
||||
</bit-dialog>
|
||||
</form>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [EnterPaymentMethodComponent, SharedModule],
|
||||
providers: [BillingClient],
|
||||
})
|
||||
export class ChangePaymentMethodDialogComponent {
|
||||
@ViewChild(EnterPaymentMethodComponent)
|
||||
private enterPaymentMethodComponent!: EnterPaymentMethodComponent;
|
||||
protected formGroup = EnterPaymentMethodComponent.getFormGroup();
|
||||
|
||||
constructor(
|
||||
private billingClient: BillingClient,
|
||||
@Inject(DIALOG_DATA) protected dialogParams: DialogParams,
|
||||
private dialogRef: DialogRef<DialogResult>,
|
||||
private i18nService: I18nService,
|
||||
private toastService: ToastService,
|
||||
) {}
|
||||
|
||||
submit = async () => {
|
||||
this.formGroup.markAllAsTouched();
|
||||
|
||||
if (!this.formGroup.valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const paymentMethod = await this.enterPaymentMethodComponent.tokenize();
|
||||
const billingAddress =
|
||||
this.formGroup.value.type !== "payPal"
|
||||
? this.formGroup.controls.billingAddress.getRawValue()
|
||||
: null;
|
||||
|
||||
const result = await this.billingClient.updatePaymentMethod(
|
||||
this.dialogParams.owner,
|
||||
paymentMethod,
|
||||
billingAddress,
|
||||
);
|
||||
|
||||
switch (result.type) {
|
||||
case "success": {
|
||||
this.toastService.showToast({
|
||||
variant: "success",
|
||||
title: "",
|
||||
message: this.i18nService.t("paymentMethodUpdated"),
|
||||
});
|
||||
this.dialogRef.close({
|
||||
type: "success",
|
||||
paymentMethod: result.value,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "error": {
|
||||
this.toastService.showToast({
|
||||
variant: "error",
|
||||
title: "",
|
||||
message: result.message,
|
||||
});
|
||||
this.dialogRef.close({ type: "error" });
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
static open = (dialogService: DialogService, dialogConfig: DialogConfig<DialogParams>) =>
|
||||
dialogService.open<DialogResult>(ChangePaymentMethodDialogComponent, dialogConfig);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { CurrencyPipe } from "@angular/common";
|
||||
import { Component, Input } from "@angular/core";
|
||||
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { DialogService, ToastService } from "@bitwarden/components";
|
||||
|
||||
import { SharedModule } from "../../../shared";
|
||||
import { BillingClient } from "../../services";
|
||||
import { BillableEntity } from "../../types";
|
||||
|
||||
import { AddAccountCreditDialogComponent } from "./add-account-credit-dialog.component";
|
||||
|
||||
@Component({
|
||||
selector: "app-display-account-credit",
|
||||
template: `
|
||||
<bit-section>
|
||||
<h2 bitTypography="h2">{{ "accountCredit" | i18n }}: {{ formattedCredit }}</h2>
|
||||
<p>{{ "availableCreditAppliedToInvoice" | i18n }}</p>
|
||||
<button type="button" bitButton buttonType="secondary" [bitAction]="addAccountCredit">
|
||||
{{ "addCredit" | i18n }}
|
||||
</button>
|
||||
</bit-section>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [SharedModule],
|
||||
providers: [BillingClient, CurrencyPipe],
|
||||
})
|
||||
export class DisplayAccountCreditComponent {
|
||||
@Input({ required: true }) owner!: BillableEntity;
|
||||
@Input({ required: true }) credit!: number | null;
|
||||
|
||||
constructor(
|
||||
private billingClient: BillingClient,
|
||||
private currencyPipe: CurrencyPipe,
|
||||
private dialogService: DialogService,
|
||||
private i18nService: I18nService,
|
||||
private toastService: ToastService,
|
||||
) {}
|
||||
|
||||
addAccountCredit = async () => {
|
||||
if (this.owner.type !== "account") {
|
||||
const billingAddress = await this.billingClient.getBillingAddress(this.owner);
|
||||
if (!billingAddress) {
|
||||
this.toastService.showToast({
|
||||
variant: "error",
|
||||
title: "",
|
||||
message: this.i18nService.t("billingAddressRequiredToAddCredit"),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
AddAccountCreditDialogComponent.open(this.dialogService, {
|
||||
data: {
|
||||
owner: this.owner,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
get formattedCredit(): string | null {
|
||||
const credit = this.credit ?? 0;
|
||||
return this.currencyPipe.transform(credit, "$");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { Component, EventEmitter, Input, Output } from "@angular/core";
|
||||
import { lastValueFrom } from "rxjs";
|
||||
|
||||
import { DialogService } from "@bitwarden/components";
|
||||
|
||||
import { SharedModule } from "../../../shared";
|
||||
import { BillableEntity } from "../../types";
|
||||
import { AddressPipe } from "../pipes";
|
||||
import { BillingAddress } from "../types";
|
||||
|
||||
import { EditBillingAddressDialogComponent } from "./edit-billing-address-dialog.component";
|
||||
|
||||
@Component({
|
||||
selector: "app-display-billing-address",
|
||||
template: `
|
||||
<bit-section>
|
||||
<h2 bitTypography="h2">{{ "billingAddress" | i18n }}</h2>
|
||||
@if (billingAddress) {
|
||||
<p>{{ billingAddress | address }}</p>
|
||||
@if (billingAddress.taxId) {
|
||||
<p>{{ "taxId" | i18n: billingAddress.taxId.value }}</p>
|
||||
}
|
||||
} @else {
|
||||
<p>{{ "noBillingAddress" | i18n }}</p>
|
||||
}
|
||||
@let key = billingAddress ? "editBillingAddress" : "addBillingAddress";
|
||||
<button type="button" bitButton buttonType="secondary" [bitAction]="editBillingAddress">
|
||||
{{ key | i18n }}
|
||||
</button>
|
||||
</bit-section>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [AddressPipe, SharedModule],
|
||||
})
|
||||
export class DisplayBillingAddressComponent {
|
||||
@Input({ required: true }) owner!: BillableEntity;
|
||||
@Input({ required: true }) billingAddress!: BillingAddress | null;
|
||||
@Output() updated = new EventEmitter<BillingAddress>();
|
||||
|
||||
constructor(private dialogService: DialogService) {}
|
||||
|
||||
editBillingAddress = async (): Promise<void> => {
|
||||
const dialogRef = EditBillingAddressDialogComponent.open(this.dialogService, {
|
||||
data: {
|
||||
owner: this.owner,
|
||||
billingAddress: this.billingAddress,
|
||||
},
|
||||
});
|
||||
|
||||
const result = await lastValueFrom(dialogRef.closed);
|
||||
|
||||
if (result?.type === "success") {
|
||||
this.updated.emit(result.billingAddress);
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import { Component, EventEmitter, Input, Output } from "@angular/core";
|
||||
import { lastValueFrom } from "rxjs";
|
||||
|
||||
import { DialogService } from "@bitwarden/components";
|
||||
|
||||
import { SharedModule } from "../../../shared";
|
||||
import { BillableEntity } from "../../types";
|
||||
import { MaskedPaymentMethod } from "../types";
|
||||
|
||||
import { ChangePaymentMethodDialogComponent } from "./change-payment-method-dialog.component";
|
||||
import { VerifyBankAccountComponent } from "./verify-bank-account.component";
|
||||
|
||||
@Component({
|
||||
selector: "app-display-payment-method",
|
||||
template: `
|
||||
<bit-section>
|
||||
<h2 bitTypography="h2">{{ "paymentMethod" | i18n }}</h2>
|
||||
@if (paymentMethod) {
|
||||
@switch (paymentMethod.type) {
|
||||
@case ("bankAccount") {
|
||||
@if (!paymentMethod.verified) {
|
||||
<app-verify-bank-account [owner]="owner" (verified)="onBankAccountVerified($event)">
|
||||
</app-verify-bank-account>
|
||||
}
|
||||
|
||||
<p>
|
||||
<i class="bwi bwi-fw bwi-billing"></i>
|
||||
{{ paymentMethod.bankName }}, *{{ paymentMethod.last4 }}
|
||||
@if (!paymentMethod.verified) {
|
||||
<span>- {{ "unverified" | i18n }}</span>
|
||||
}
|
||||
</p>
|
||||
}
|
||||
@case ("card") {
|
||||
<p class="tw-flex tw-items-center tw-gap-2">
|
||||
@let brandIcon = getBrandIconForCard();
|
||||
@if (brandIcon !== null) {
|
||||
<i class="bwi bwi-fw credit-card-icon {{ brandIcon }}"></i>
|
||||
} @else {
|
||||
<i class="bwi bwi-fw bwi-credit-card"></i>
|
||||
}
|
||||
{{ paymentMethod.brand | titlecase }}, *{{ paymentMethod.last4 }},
|
||||
{{ paymentMethod.expiration }}
|
||||
</p>
|
||||
}
|
||||
@case ("payPal") {
|
||||
<p>
|
||||
<i class="bwi bwi-fw bwi-paypal tw-text-primary-600"></i>
|
||||
{{ paymentMethod.email }}
|
||||
</p>
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
<p bitTypography="body1">{{ "noPaymentMethod" | i18n }}</p>
|
||||
}
|
||||
@let key = paymentMethod ? "changePaymentMethod" : "addPaymentMethod";
|
||||
<button type="button" bitButton buttonType="secondary" [bitAction]="changePaymentMethod">
|
||||
{{ key | i18n }}
|
||||
</button>
|
||||
</bit-section>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [SharedModule, VerifyBankAccountComponent],
|
||||
})
|
||||
export class DisplayPaymentMethodComponent {
|
||||
@Input({ required: true }) owner!: BillableEntity;
|
||||
@Input({ required: true }) paymentMethod!: MaskedPaymentMethod | null;
|
||||
@Output() updated = new EventEmitter<MaskedPaymentMethod>();
|
||||
|
||||
protected availableCardIcons: Record<string, string> = {
|
||||
amex: "card-amex",
|
||||
diners: "card-diners-club",
|
||||
discover: "card-discover",
|
||||
jcb: "card-jcb",
|
||||
mastercard: "card-mastercard",
|
||||
unionpay: "card-unionpay",
|
||||
visa: "card-visa",
|
||||
};
|
||||
|
||||
constructor(private dialogService: DialogService) {}
|
||||
|
||||
changePaymentMethod = async (): Promise<void> => {
|
||||
const dialogRef = ChangePaymentMethodDialogComponent.open(this.dialogService, {
|
||||
data: {
|
||||
owner: this.owner,
|
||||
},
|
||||
});
|
||||
|
||||
const result = await lastValueFrom(dialogRef.closed);
|
||||
|
||||
if (result?.type === "success") {
|
||||
this.updated.emit(result.paymentMethod);
|
||||
}
|
||||
};
|
||||
|
||||
onBankAccountVerified = (paymentMethod: MaskedPaymentMethod) => this.updated.emit(paymentMethod);
|
||||
|
||||
protected getBrandIconForCard = (): string | null => {
|
||||
if (this.paymentMethod?.type !== "card") {
|
||||
return null;
|
||||
}
|
||||
|
||||
return this.paymentMethod.brand in this.availableCardIcons
|
||||
? this.availableCardIcons[this.paymentMethod.brand]
|
||||
: null;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
import { DIALOG_DATA } from "@angular/cdk/dialog";
|
||||
import { Component, Inject } from "@angular/core";
|
||||
|
||||
import { ProductTierType } from "@bitwarden/common/billing/enums";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { DialogConfig, DialogRef, DialogService, ToastService } from "@bitwarden/components";
|
||||
|
||||
import { SharedModule } from "../../../shared";
|
||||
import { BillingClient } from "../../services";
|
||||
import { BillableEntity } from "../../types";
|
||||
import { BillingAddress, getTaxIdTypeForCountry } from "../types";
|
||||
|
||||
import { EnterBillingAddressComponent } from "./enter-billing-address.component";
|
||||
|
||||
type DialogParams = {
|
||||
owner: BillableEntity;
|
||||
billingAddress: BillingAddress | null;
|
||||
};
|
||||
|
||||
type DialogResult =
|
||||
| { type: "cancelled" }
|
||||
| { type: "error" }
|
||||
| { type: "success"; billingAddress: BillingAddress };
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<form [formGroup]="formGroup" [bitSubmit]="submit">
|
||||
<bit-dialog>
|
||||
<span bitDialogTitle class="tw-font-semibold">
|
||||
{{ "editBillingAddress" | i18n }}
|
||||
</span>
|
||||
<div bitDialogContent>
|
||||
<app-enter-billing-address
|
||||
[scenario]="{
|
||||
type: 'update',
|
||||
existing: dialogParams.billingAddress,
|
||||
supportsTaxId,
|
||||
}"
|
||||
[group]="formGroup"
|
||||
></app-enter-billing-address>
|
||||
</div>
|
||||
<ng-container bitDialogFooter>
|
||||
<button bitButton bitFormButton buttonType="primary" type="submit">
|
||||
{{ "save" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
bitButton
|
||||
buttonType="secondary"
|
||||
type="button"
|
||||
[bitDialogClose]="{ type: 'cancelled' }"
|
||||
>
|
||||
{{ "cancel" | i18n }}
|
||||
</button>
|
||||
</ng-container>
|
||||
</bit-dialog>
|
||||
</form>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [EnterBillingAddressComponent, SharedModule],
|
||||
providers: [BillingClient],
|
||||
})
|
||||
export class EditBillingAddressDialogComponent {
|
||||
protected formGroup = EnterBillingAddressComponent.getFormGroup();
|
||||
|
||||
constructor(
|
||||
private billingClient: BillingClient,
|
||||
@Inject(DIALOG_DATA) protected dialogParams: DialogParams,
|
||||
private dialogRef: DialogRef<DialogResult>,
|
||||
private i18nService: I18nService,
|
||||
private toastService: ToastService,
|
||||
) {
|
||||
if (dialogParams.billingAddress) {
|
||||
this.formGroup.patchValue({
|
||||
...dialogParams.billingAddress,
|
||||
taxId: dialogParams.billingAddress.taxId?.value,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
submit = async (): Promise<void> => {
|
||||
this.formGroup.markAllAsTouched();
|
||||
|
||||
if (this.formGroup.invalid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { taxId, ...addressFields } = this.formGroup.getRawValue();
|
||||
|
||||
const taxIdType = taxId ? getTaxIdTypeForCountry(addressFields.country) : null;
|
||||
|
||||
const billingAddress = taxIdType
|
||||
? { ...addressFields, taxId: { code: taxIdType.code, value: taxId! } }
|
||||
: { ...addressFields, taxId: null };
|
||||
|
||||
const result = await this.billingClient.updateBillingAddress(
|
||||
this.dialogParams.owner,
|
||||
billingAddress,
|
||||
);
|
||||
|
||||
switch (result.type) {
|
||||
case "success": {
|
||||
this.toastService.showToast({
|
||||
variant: "success",
|
||||
title: "",
|
||||
message: this.i18nService.t("billingAddressUpdated"),
|
||||
});
|
||||
this.dialogRef.close({
|
||||
type: "success",
|
||||
billingAddress: result.value,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "error": {
|
||||
this.toastService.showToast({
|
||||
variant: "error",
|
||||
title: "",
|
||||
message: result.message,
|
||||
});
|
||||
this.dialogRef.close({
|
||||
type: "error",
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
get supportsTaxId(): boolean {
|
||||
switch (this.dialogParams.owner.type) {
|
||||
case "account": {
|
||||
return false;
|
||||
}
|
||||
case "organization": {
|
||||
return [
|
||||
ProductTierType.TeamsStarter,
|
||||
ProductTierType.Teams,
|
||||
ProductTierType.Enterprise,
|
||||
].includes(this.dialogParams.owner.data.productTierType);
|
||||
}
|
||||
case "provider": {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static open = (dialogService: DialogService, dialogConfig: DialogConfig<DialogParams>) =>
|
||||
dialogService.open<DialogResult>(EditBillingAddressDialogComponent, dialogConfig);
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
import { Component, Input, OnDestroy, OnInit } from "@angular/core";
|
||||
import { FormControl, FormGroup, Validators } from "@angular/forms";
|
||||
import { map, Observable, startWith, Subject, takeUntil } from "rxjs";
|
||||
|
||||
import { ControlsOf } from "@bitwarden/angular/types/controls-of";
|
||||
|
||||
import { SharedModule } from "../../../shared";
|
||||
import { BillingAddress, selectableCountries, taxIdTypes } from "../types";
|
||||
|
||||
export interface BillingAddressControls {
|
||||
country: string;
|
||||
postalCode: string;
|
||||
line1: string | null;
|
||||
line2: string | null;
|
||||
city: string | null;
|
||||
state: string | null;
|
||||
taxId: string | null;
|
||||
}
|
||||
|
||||
export type BillingAddressFormGroup = FormGroup<ControlsOf<BillingAddressControls>>;
|
||||
|
||||
type Scenario =
|
||||
| {
|
||||
type: "checkout";
|
||||
supportsTaxId: boolean;
|
||||
}
|
||||
| {
|
||||
type: "update";
|
||||
existing?: BillingAddress;
|
||||
supportsTaxId: boolean;
|
||||
};
|
||||
|
||||
@Component({
|
||||
selector: "app-enter-billing-address",
|
||||
template: `
|
||||
<form [formGroup]="group">
|
||||
<div class="tw-grid tw-grid-cols-12 tw-gap-4">
|
||||
<div class="tw-col-span-6">
|
||||
<bit-form-field [disableMargin]="true">
|
||||
<bit-label>{{ "country" | i18n }}</bit-label>
|
||||
<bit-select [formControl]="group.controls.country">
|
||||
@for (selectableCountry of selectableCountries; track selectableCountry.value) {
|
||||
<bit-option
|
||||
[value]="selectableCountry.value"
|
||||
[disabled]="selectableCountry.disabled"
|
||||
[label]="selectableCountry.name"
|
||||
></bit-option>
|
||||
}
|
||||
</bit-select>
|
||||
</bit-form-field>
|
||||
</div>
|
||||
<div class="tw-col-span-6">
|
||||
<bit-form-field [disableMargin]="true">
|
||||
<bit-label>{{ "zipPostalCode" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
type="text"
|
||||
[formControl]="group.controls.postalCode"
|
||||
autocomplete="postal-code"
|
||||
/>
|
||||
</bit-form-field>
|
||||
</div>
|
||||
<div class="tw-col-span-6">
|
||||
<bit-form-field [disableMargin]="true">
|
||||
<bit-label>{{ "address1" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
type="text"
|
||||
[formControl]="group.controls.line1"
|
||||
autocomplete="address-line1"
|
||||
/>
|
||||
</bit-form-field>
|
||||
</div>
|
||||
<div class="tw-col-span-6">
|
||||
<bit-form-field [disableMargin]="true">
|
||||
<bit-label>{{ "address2" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
type="text"
|
||||
[formControl]="group.controls.line2"
|
||||
autocomplete="address-line2"
|
||||
/>
|
||||
</bit-form-field>
|
||||
</div>
|
||||
<div class="tw-col-span-6">
|
||||
<bit-form-field [disableMargin]="true">
|
||||
<bit-label>{{ "cityTown" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
type="text"
|
||||
[formControl]="group.controls.city"
|
||||
autocomplete="address-level2"
|
||||
/>
|
||||
</bit-form-field>
|
||||
</div>
|
||||
<div class="tw-col-span-6">
|
||||
<bit-form-field [disableMargin]="true">
|
||||
<bit-label>{{ "stateProvince" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
type="text"
|
||||
[formControl]="group.controls.state"
|
||||
autocomplete="address-level1"
|
||||
/>
|
||||
</bit-form-field>
|
||||
</div>
|
||||
@if (supportsTaxId$ | async) {
|
||||
<div class="tw-col-span-6">
|
||||
<bit-form-field [disableMargin]="true">
|
||||
<bit-label>{{ "taxIdNumber" | i18n }}</bit-label>
|
||||
<input bitInput type="text" [formControl]="group.controls.taxId" />
|
||||
</bit-form-field>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [SharedModule],
|
||||
})
|
||||
export class EnterBillingAddressComponent implements OnInit, OnDestroy {
|
||||
@Input({ required: true }) scenario!: Scenario;
|
||||
@Input({ required: true }) group!: BillingAddressFormGroup;
|
||||
|
||||
protected selectableCountries = selectableCountries;
|
||||
protected supportsTaxId$!: Observable<boolean>;
|
||||
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
ngOnInit() {
|
||||
switch (this.scenario.type) {
|
||||
case "checkout": {
|
||||
this.disableAddressControls();
|
||||
break;
|
||||
}
|
||||
case "update": {
|
||||
if (this.scenario.existing) {
|
||||
this.group.patchValue({
|
||||
...this.scenario.existing,
|
||||
taxId: this.scenario.existing.taxId?.value,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.supportsTaxId$ = this.group.controls.country.valueChanges.pipe(
|
||||
startWith(this.group.value.country ?? this.selectableCountries[0].value),
|
||||
map((country) => {
|
||||
if (!this.scenario.supportsTaxId) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return taxIdTypes.filter((taxIdType) => taxIdType.iso === country).length > 0;
|
||||
}),
|
||||
);
|
||||
|
||||
this.supportsTaxId$.pipe(takeUntil(this.destroy$)).subscribe((supportsTaxId) => {
|
||||
if (supportsTaxId) {
|
||||
this.group.controls.taxId.enable();
|
||||
} else {
|
||||
this.group.controls.taxId.disable();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
disableAddressControls = () => {
|
||||
this.group.controls.line1.disable();
|
||||
this.group.controls.line2.disable();
|
||||
this.group.controls.city.disable();
|
||||
this.group.controls.state.disable();
|
||||
};
|
||||
|
||||
static getFormGroup = (): BillingAddressFormGroup =>
|
||||
new FormGroup({
|
||||
country: new FormControl<string>("", {
|
||||
nonNullable: true,
|
||||
validators: [Validators.required],
|
||||
}),
|
||||
postalCode: new FormControl<string>("", {
|
||||
nonNullable: true,
|
||||
validators: [Validators.required],
|
||||
}),
|
||||
line1: new FormControl<string | null>(null),
|
||||
line2: new FormControl<string | null>(null),
|
||||
city: new FormControl<string | null>(null),
|
||||
state: new FormControl<string | null>(null),
|
||||
taxId: new FormControl<string | null>(null),
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,408 @@
|
||||
import { Component, Input, OnInit } from "@angular/core";
|
||||
import { FormControl, FormGroup, Validators } from "@angular/forms";
|
||||
import { BehaviorSubject, startWith, Subject, takeUntil } from "rxjs";
|
||||
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
|
||||
import { PopoverModule, ToastService } from "@bitwarden/components";
|
||||
|
||||
import { SharedModule } from "../../../shared";
|
||||
import { BillingServicesModule, BraintreeService, StripeService } from "../../services";
|
||||
import { PaymentLabelComponent } from "../../shared/payment/payment-label.component";
|
||||
import {
|
||||
isTokenizablePaymentMethod,
|
||||
selectableCountries,
|
||||
TokenizablePaymentMethod,
|
||||
TokenizedPaymentMethod,
|
||||
} from "../types";
|
||||
|
||||
type PaymentMethodOption = TokenizablePaymentMethod | "accountCredit";
|
||||
|
||||
type PaymentMethodFormGroup = FormGroup<{
|
||||
type: FormControl<PaymentMethodOption>;
|
||||
bankAccount: FormGroup<{
|
||||
routingNumber: FormControl<string>;
|
||||
accountNumber: FormControl<string>;
|
||||
accountHolderName: FormControl<string>;
|
||||
accountHolderType: FormControl<"" | "company" | "individual">;
|
||||
}>;
|
||||
billingAddress: FormGroup<{
|
||||
country: FormControl<string>;
|
||||
postalCode: FormControl<string>;
|
||||
}>;
|
||||
}>;
|
||||
|
||||
@Component({
|
||||
selector: "app-enter-payment-method",
|
||||
template: `
|
||||
@let showBillingDetails = includeBillingAddress && selected !== "payPal";
|
||||
<form [formGroup]="group">
|
||||
@if (showBillingDetails) {
|
||||
<h5 bitTypography="h5">{{ "paymentMethod" | i18n }}</h5>
|
||||
}
|
||||
<div class="tw-mb-4 tw-text-lg">
|
||||
<bit-radio-group [formControl]="group.controls.type">
|
||||
<bit-radio-button id="card-payment-method" [value]="'card'">
|
||||
<bit-label>
|
||||
<i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>
|
||||
{{ "creditCard" | i18n }}
|
||||
</bit-label>
|
||||
</bit-radio-button>
|
||||
@if (showBankAccount) {
|
||||
<bit-radio-button id="bank-payment-method" [value]="'bankAccount'">
|
||||
<bit-label>
|
||||
<i class="bwi bwi-fw bwi-billing" aria-hidden="true"></i>
|
||||
{{ "bankAccount" | i18n }}
|
||||
</bit-label>
|
||||
</bit-radio-button>
|
||||
}
|
||||
@if (showPayPal) {
|
||||
<bit-radio-button id="paypal-payment-method" [value]="'payPal'">
|
||||
<bit-label>
|
||||
<i class="bwi bwi-fw bwi-paypal" aria-hidden="true"></i>
|
||||
{{ "payPal" | i18n }}
|
||||
</bit-label>
|
||||
</bit-radio-button>
|
||||
}
|
||||
@if (showAccountCredit) {
|
||||
<bit-radio-button id="credit-payment-method" [value]="'accountCredit'">
|
||||
<bit-label>
|
||||
<i class="bwi bwi-fw bwi-dollar" aria-hidden="true"></i>
|
||||
{{ "accountCredit" | i18n }}
|
||||
</bit-label>
|
||||
</bit-radio-button>
|
||||
}
|
||||
</bit-radio-group>
|
||||
</div>
|
||||
@switch (selected) {
|
||||
@case ("card") {
|
||||
<div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-4">
|
||||
<div class="tw-col-span-1">
|
||||
<app-payment-label for="stripe-card-number" required>
|
||||
{{ "number" | i18n }}
|
||||
</app-payment-label>
|
||||
<div id="stripe-card-number" class="tw-stripe-form-control"></div>
|
||||
</div>
|
||||
<div class="tw-col-span-1 tw-flex tw-items-end">
|
||||
<img
|
||||
src="../../../images/cards.png"
|
||||
alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay"
|
||||
class="tw-max-w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="tw-col-span-1">
|
||||
<app-payment-label for="stripe-card-expiry" required>
|
||||
{{ "expiration" | i18n }}
|
||||
</app-payment-label>
|
||||
<div id="stripe-card-expiry" class="tw-stripe-form-control"></div>
|
||||
</div>
|
||||
<div class="tw-col-span-1">
|
||||
<app-payment-label for="stripe-card-cvc" required>
|
||||
{{ "securityCodeSlashCVV" | i18n }}
|
||||
<button
|
||||
[bitPopoverTriggerFor]="cardSecurityCodePopover"
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600 tw-p-0"
|
||||
[position]="'above-end'"
|
||||
>
|
||||
<i class="bwi bwi-question-circle tw-text-lg" aria-hidden="true"></i>
|
||||
</button>
|
||||
<bit-popover [title]="'cardSecurityCode' | i18n" #cardSecurityCodePopover>
|
||||
<p>{{ "cardSecurityCodeDescription" | i18n }}</p>
|
||||
</bit-popover>
|
||||
</app-payment-label>
|
||||
<div id="stripe-card-cvc" class="tw-stripe-form-control"></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@case ("bankAccount") {
|
||||
<ng-container>
|
||||
<bit-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
|
||||
{{ "verifyBankAccountWarning" | i18n }}
|
||||
</bit-callout>
|
||||
<div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-4" formGroupName="bankAccount">
|
||||
<bit-form-field class="tw-col-span-1" [disableMargin]="true">
|
||||
<bit-label>{{ "routingNumber" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
id="routingNumber"
|
||||
type="text"
|
||||
[formControl]="group.controls.bankAccount.controls.routingNumber"
|
||||
required
|
||||
/>
|
||||
</bit-form-field>
|
||||
<bit-form-field class="tw-col-span-1" [disableMargin]="true">
|
||||
<bit-label>{{ "accountNumber" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
id="accountNumber"
|
||||
type="text"
|
||||
[formControl]="group.controls.bankAccount.controls.accountNumber"
|
||||
required
|
||||
/>
|
||||
</bit-form-field>
|
||||
<bit-form-field class="tw-col-span-1" [disableMargin]="true">
|
||||
<bit-label>{{ "accountHolderName" | i18n }}</bit-label>
|
||||
<input
|
||||
id="accountHolderName"
|
||||
bitInput
|
||||
type="text"
|
||||
[formControl]="group.controls.bankAccount.controls.accountHolderName"
|
||||
required
|
||||
/>
|
||||
</bit-form-field>
|
||||
<bit-form-field class="tw-col-span-1" [disableMargin]="true">
|
||||
<bit-label>{{ "bankAccountType" | i18n }}</bit-label>
|
||||
<bit-select
|
||||
id="accountHolderType"
|
||||
[formControl]="group.controls.bankAccount.controls.accountHolderType"
|
||||
required
|
||||
>
|
||||
<bit-option [value]="''" label="-- {{ 'select' | i18n }} --"></bit-option>
|
||||
<bit-option
|
||||
[value]="'company'"
|
||||
label="{{ 'bankAccountTypeCompany' | i18n }}"
|
||||
></bit-option>
|
||||
<bit-option
|
||||
[value]="'individual'"
|
||||
label="{{ 'bankAccountTypeIndividual' | i18n }}"
|
||||
></bit-option>
|
||||
</bit-select>
|
||||
</bit-form-field>
|
||||
</div>
|
||||
</ng-container>
|
||||
}
|
||||
@case ("payPal") {
|
||||
<ng-container>
|
||||
<div class="tw-mb-3">
|
||||
<div id="braintree-container" class="tw-mb-1 tw-content-center"></div>
|
||||
<small class="tw-text-muted">{{ "paypalClickSubmit" | i18n }}</small>
|
||||
</div>
|
||||
</ng-container>
|
||||
}
|
||||
@case ("accountCredit") {
|
||||
<ng-container>
|
||||
<bit-callout type="info">
|
||||
{{ "makeSureEnoughCredit" | i18n }}
|
||||
</bit-callout>
|
||||
</ng-container>
|
||||
}
|
||||
}
|
||||
@if (showBillingDetails) {
|
||||
<h5 bitTypography="h5">{{ "billingAddress" | i18n }}</h5>
|
||||
<div class="tw-grid tw-grid-cols-12 tw-gap-4">
|
||||
<div class="tw-col-span-6">
|
||||
<bit-form-field [disableMargin]="true">
|
||||
<bit-label>{{ "country" | i18n }}</bit-label>
|
||||
<bit-select [formControl]="group.controls.billingAddress.controls.country">
|
||||
@for (selectableCountry of selectableCountries; track selectableCountry.value) {
|
||||
<bit-option
|
||||
[value]="selectableCountry.value"
|
||||
[disabled]="selectableCountry.disabled"
|
||||
[label]="selectableCountry.name"
|
||||
></bit-option>
|
||||
}
|
||||
</bit-select>
|
||||
</bit-form-field>
|
||||
</div>
|
||||
<div class="tw-col-span-6">
|
||||
<bit-form-field [disableMargin]="true">
|
||||
<bit-label>{{ "zipPostalCode" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
type="text"
|
||||
[formControl]="group.controls.billingAddress.controls.postalCode"
|
||||
autocomplete="postal-code"
|
||||
/>
|
||||
</bit-form-field>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</form>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [BillingServicesModule, PaymentLabelComponent, PopoverModule, SharedModule],
|
||||
})
|
||||
export class EnterPaymentMethodComponent implements OnInit {
|
||||
@Input({ required: true }) group!: PaymentMethodFormGroup;
|
||||
|
||||
private showBankAccountSubject = new BehaviorSubject<boolean>(true);
|
||||
showBankAccount$ = this.showBankAccountSubject.asObservable();
|
||||
@Input()
|
||||
set showBankAccount(value: boolean) {
|
||||
this.showBankAccountSubject.next(value);
|
||||
}
|
||||
get showBankAccount(): boolean {
|
||||
return this.showBankAccountSubject.value;
|
||||
}
|
||||
|
||||
@Input() showPayPal: boolean = true;
|
||||
@Input() showAccountCredit: boolean = false;
|
||||
@Input() includeBillingAddress: boolean = false;
|
||||
|
||||
protected selectableCountries = selectableCountries;
|
||||
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
constructor(
|
||||
private braintreeService: BraintreeService,
|
||||
private i18nService: I18nService,
|
||||
private logService: LogService,
|
||||
private stripeService: StripeService,
|
||||
private toastService: ToastService,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.stripeService.loadStripe(
|
||||
{
|
||||
cardNumber: "#stripe-card-number",
|
||||
cardExpiry: "#stripe-card-expiry",
|
||||
cardCvc: "#stripe-card-cvc",
|
||||
},
|
||||
true,
|
||||
);
|
||||
|
||||
if (this.showPayPal) {
|
||||
this.braintreeService.loadBraintree("#braintree-container", false);
|
||||
}
|
||||
|
||||
if (!this.includeBillingAddress) {
|
||||
this.group.controls.billingAddress.disable();
|
||||
}
|
||||
|
||||
this.group.controls.type.valueChanges
|
||||
.pipe(startWith(this.group.controls.type.value), takeUntil(this.destroy$))
|
||||
.subscribe((selected) => {
|
||||
if (selected === "bankAccount") {
|
||||
this.group.controls.bankAccount.enable();
|
||||
if (this.includeBillingAddress) {
|
||||
this.group.controls.billingAddress.enable();
|
||||
}
|
||||
} else {
|
||||
switch (selected) {
|
||||
case "card": {
|
||||
this.stripeService.mountElements();
|
||||
if (this.includeBillingAddress) {
|
||||
this.group.controls.billingAddress.enable();
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "payPal": {
|
||||
this.braintreeService.createDropin();
|
||||
if (this.includeBillingAddress) {
|
||||
this.group.controls.billingAddress.disable();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.group.controls.bankAccount.disable();
|
||||
}
|
||||
});
|
||||
|
||||
this.showBankAccount$.pipe(takeUntil(this.destroy$)).subscribe((showBankAccount) => {
|
||||
if (!showBankAccount && this.selected === "bankAccount") {
|
||||
this.select("card");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
select = (paymentMethod: PaymentMethodOption) =>
|
||||
this.group.controls.type.patchValue(paymentMethod);
|
||||
|
||||
tokenize = async (): Promise<TokenizedPaymentMethod> => {
|
||||
const exchange = async (paymentMethod: TokenizablePaymentMethod) => {
|
||||
switch (paymentMethod) {
|
||||
case "bankAccount": {
|
||||
this.group.controls.bankAccount.markAllAsTouched();
|
||||
if (!this.group.controls.bankAccount.valid) {
|
||||
throw new Error("Attempted to tokenize invalid bank account information.");
|
||||
}
|
||||
|
||||
const bankAccount = this.group.controls.bankAccount.getRawValue();
|
||||
const clientSecret = await this.stripeService.createSetupIntent("bankAccount");
|
||||
const billingDetails = this.group.controls.billingAddress.enabled
|
||||
? this.group.controls.billingAddress.getRawValue()
|
||||
: undefined;
|
||||
return await this.stripeService.setupBankAccountPaymentMethod(
|
||||
clientSecret,
|
||||
bankAccount,
|
||||
billingDetails,
|
||||
);
|
||||
}
|
||||
case "card": {
|
||||
const clientSecret = await this.stripeService.createSetupIntent("card");
|
||||
const billingDetails = this.group.controls.billingAddress.enabled
|
||||
? this.group.controls.billingAddress.getRawValue()
|
||||
: undefined;
|
||||
return this.stripeService.setupCardPaymentMethod(clientSecret, billingDetails);
|
||||
}
|
||||
case "payPal": {
|
||||
return this.braintreeService.requestPaymentMethod();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (!isTokenizablePaymentMethod(this.selected)) {
|
||||
throw new Error(`Attempted to tokenize a non-tokenizable payment method: ${this.selected}`);
|
||||
}
|
||||
|
||||
try {
|
||||
const token = await exchange(this.selected);
|
||||
return { type: this.selected, token };
|
||||
} catch (error: unknown) {
|
||||
this.logService.error(error);
|
||||
this.toastService.showToast({
|
||||
variant: "error",
|
||||
title: "",
|
||||
message: this.i18nService.t("problemSubmittingPaymentMethod"),
|
||||
});
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
validate = (): boolean => {
|
||||
if (this.selected === "bankAccount") {
|
||||
this.group.controls.bankAccount.markAllAsTouched();
|
||||
return this.group.controls.bankAccount.valid;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
get selected(): PaymentMethodOption {
|
||||
return this.group.value.type!;
|
||||
}
|
||||
|
||||
static getFormGroup = (): PaymentMethodFormGroup =>
|
||||
new FormGroup({
|
||||
type: new FormControl<PaymentMethodOption>("card", { nonNullable: true }),
|
||||
bankAccount: new FormGroup({
|
||||
routingNumber: new FormControl<string>("", {
|
||||
nonNullable: true,
|
||||
validators: [Validators.required],
|
||||
}),
|
||||
accountNumber: new FormControl<string>("", {
|
||||
nonNullable: true,
|
||||
validators: [Validators.required],
|
||||
}),
|
||||
accountHolderName: new FormControl<string>("", {
|
||||
nonNullable: true,
|
||||
validators: [Validators.required],
|
||||
}),
|
||||
accountHolderType: new FormControl<"" | "company" | "individual">("", {
|
||||
nonNullable: true,
|
||||
validators: [Validators.required],
|
||||
}),
|
||||
}),
|
||||
billingAddress: new FormGroup({
|
||||
country: new FormControl<string>("", {
|
||||
nonNullable: true,
|
||||
validators: [Validators.required],
|
||||
}),
|
||||
postalCode: new FormControl<string>("", {
|
||||
nonNullable: true,
|
||||
validators: [Validators.required],
|
||||
}),
|
||||
}),
|
||||
});
|
||||
}
|
||||
9
apps/web/src/app/billing/payment/components/index.ts
Normal file
9
apps/web/src/app/billing/payment/components/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export * from "./add-account-credit-dialog.component";
|
||||
export * from "./change-payment-method-dialog.component";
|
||||
export * from "./display-account-credit.component";
|
||||
export * from "./display-billing-address.component";
|
||||
export * from "./display-payment-method.component";
|
||||
export * from "./edit-billing-address-dialog.component";
|
||||
export * from "./enter-billing-address.component";
|
||||
export * from "./enter-payment-method.component";
|
||||
export * from "./verify-bank-account.component";
|
||||
@@ -0,0 +1,86 @@
|
||||
import { Component, EventEmitter, Input, Output } from "@angular/core";
|
||||
import { FormControl, FormGroup, Validators } from "@angular/forms";
|
||||
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { ToastService } from "@bitwarden/components";
|
||||
|
||||
import { SharedModule } from "../../../shared";
|
||||
import { BillingClient } from "../../services";
|
||||
import { BillableEntity } from "../../types";
|
||||
import { MaskedPaymentMethod } from "../types";
|
||||
|
||||
@Component({
|
||||
selector: "app-verify-bank-account",
|
||||
template: `
|
||||
<bit-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
|
||||
<p>{{ "verifyBankAccountWithStatementDescriptorInstructions" | i18n }}</p>
|
||||
<form [formGroup]="formGroup" [bitSubmit]="submit">
|
||||
<bit-form-field class="tw-mr-2 tw-w-48">
|
||||
<bit-label>{{ "descriptorCode" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
type="text"
|
||||
placeholder="SMAB12"
|
||||
[formControl]="formGroup.controls.descriptorCode"
|
||||
/>
|
||||
</bit-form-field>
|
||||
<button type="submit" bitButton bitFormButton buttonType="primary">
|
||||
{{ "submit" | i18n }}
|
||||
</button>
|
||||
</form>
|
||||
</bit-callout>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [SharedModule],
|
||||
providers: [BillingClient],
|
||||
})
|
||||
export class VerifyBankAccountComponent {
|
||||
@Input({ required: true }) owner!: BillableEntity;
|
||||
@Output() verified = new EventEmitter<MaskedPaymentMethod>();
|
||||
|
||||
protected formGroup = new FormGroup({
|
||||
descriptorCode: new FormControl<string>("", [
|
||||
Validators.required,
|
||||
Validators.minLength(6),
|
||||
Validators.maxLength(6),
|
||||
]),
|
||||
});
|
||||
|
||||
constructor(
|
||||
private billingClient: BillingClient,
|
||||
private i18nService: I18nService,
|
||||
private toastService: ToastService,
|
||||
) {}
|
||||
|
||||
submit = async (): Promise<void> => {
|
||||
this.formGroup.markAllAsTouched();
|
||||
|
||||
if (!this.formGroup.valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await this.billingClient.verifyBankAccount(
|
||||
this.owner,
|
||||
this.formGroup.value.descriptorCode!,
|
||||
);
|
||||
|
||||
switch (result.type) {
|
||||
case "success": {
|
||||
this.toastService.showToast({
|
||||
variant: "success",
|
||||
title: "",
|
||||
message: this.i18nService.t("bankAccountVerified"),
|
||||
});
|
||||
this.verified.emit(result.value);
|
||||
break;
|
||||
}
|
||||
case "error": {
|
||||
this.toastService.showToast({
|
||||
variant: "error",
|
||||
title: "",
|
||||
message: result.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
65
apps/web/src/app/billing/payment/pipes/address.pipe.spec.ts
Normal file
65
apps/web/src/app/billing/payment/pipes/address.pipe.spec.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
import { AddressPipe } from "./address.pipe";
|
||||
|
||||
describe("AddressPipe", () => {
|
||||
let pipe: AddressPipe;
|
||||
|
||||
beforeEach(() => {
|
||||
pipe = new AddressPipe();
|
||||
});
|
||||
|
||||
it("should format a complete address with all fields", () => {
|
||||
const address = {
|
||||
country: "United States",
|
||||
postalCode: "10001",
|
||||
line1: "123 Main St",
|
||||
line2: "Apt 4B",
|
||||
city: "New York",
|
||||
state: "NY",
|
||||
};
|
||||
|
||||
const result = pipe.transform(address);
|
||||
expect(result).toBe("123 Main St, Apt 4B, New York, NY, 10001, United States");
|
||||
});
|
||||
|
||||
it("should format address without line2", () => {
|
||||
const address = {
|
||||
country: "United States",
|
||||
postalCode: "10001",
|
||||
line1: "123 Main St",
|
||||
line2: null,
|
||||
city: "New York",
|
||||
state: "NY",
|
||||
};
|
||||
|
||||
const result = pipe.transform(address);
|
||||
expect(result).toBe("123 Main St, New York, NY, 10001, United States");
|
||||
});
|
||||
|
||||
it("should format address without state", () => {
|
||||
const address = {
|
||||
country: "United Kingdom",
|
||||
postalCode: "SW1A 1AA",
|
||||
line1: "123 Main St",
|
||||
line2: "Apt 4B",
|
||||
city: "London",
|
||||
state: null,
|
||||
};
|
||||
|
||||
const result = pipe.transform(address);
|
||||
expect(result).toBe("123 Main St, Apt 4B, London, SW1A 1AA, United Kingdom");
|
||||
});
|
||||
|
||||
it("should format minimal address with only required fields", () => {
|
||||
const address = {
|
||||
country: "United States",
|
||||
postalCode: "10001",
|
||||
line1: null,
|
||||
line2: null,
|
||||
city: null,
|
||||
state: null,
|
||||
};
|
||||
|
||||
const result = pipe.transform(address);
|
||||
expect(result).toBe("10001, United States");
|
||||
});
|
||||
});
|
||||
32
apps/web/src/app/billing/payment/pipes/address.pipe.ts
Normal file
32
apps/web/src/app/billing/payment/pipes/address.pipe.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { Pipe, PipeTransform } from "@angular/core";
|
||||
|
||||
import { BillingAddress } from "../types";
|
||||
|
||||
@Pipe({
|
||||
name: "address",
|
||||
})
|
||||
export class AddressPipe implements PipeTransform {
|
||||
transform(address: Omit<BillingAddress, "taxId">): string {
|
||||
const parts: string[] = [];
|
||||
|
||||
if (address.line1) {
|
||||
parts.push(address.line1);
|
||||
}
|
||||
|
||||
if (address.line2) {
|
||||
parts.push(address.line2);
|
||||
}
|
||||
|
||||
if (address.city) {
|
||||
parts.push(address.city);
|
||||
}
|
||||
|
||||
if (address.state) {
|
||||
parts.push(address.state);
|
||||
}
|
||||
|
||||
parts.push(address.postalCode, address.country);
|
||||
|
||||
return parts.join(", ");
|
||||
}
|
||||
}
|
||||
1
apps/web/src/app/billing/payment/pipes/index.ts
Normal file
1
apps/web/src/app/billing/payment/pipes/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from "./address.pipe";
|
||||
37
apps/web/src/app/billing/payment/types/billing-address.ts
Normal file
37
apps/web/src/app/billing/payment/types/billing-address.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { BaseResponse } from "@bitwarden/common/models/response/base.response";
|
||||
|
||||
import { TaxId, TaxIdResponse } from "./tax-id";
|
||||
|
||||
export type BillingAddress = {
|
||||
country: string;
|
||||
postalCode: string;
|
||||
line1: string | null;
|
||||
line2: string | null;
|
||||
city: string | null;
|
||||
state: string | null;
|
||||
taxId: TaxId | null;
|
||||
};
|
||||
|
||||
export class BillingAddressResponse extends BaseResponse implements BillingAddress {
|
||||
country: string;
|
||||
postalCode: string;
|
||||
line1: string | null;
|
||||
line2: string | null;
|
||||
city: string | null;
|
||||
state: string | null;
|
||||
taxId: TaxId | null;
|
||||
|
||||
constructor(response: any) {
|
||||
super(response);
|
||||
|
||||
this.country = this.getResponseProperty("Country");
|
||||
this.postalCode = this.getResponseProperty("PostalCode");
|
||||
this.line1 = this.getResponseProperty("Line1");
|
||||
this.line2 = this.getResponseProperty("Line2");
|
||||
this.city = this.getResponseProperty("City");
|
||||
this.state = this.getResponseProperty("State");
|
||||
|
||||
const taxId = this.getResponseProperty("TaxId");
|
||||
this.taxId = taxId ? new TaxIdResponse(taxId) : null;
|
||||
}
|
||||
}
|
||||
6
apps/web/src/app/billing/payment/types/index.ts
Normal file
6
apps/web/src/app/billing/payment/types/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export * from "./billing-address";
|
||||
export * from "./masked-payment-method";
|
||||
export * from "./selectable-country";
|
||||
export * from "./tax-id";
|
||||
export * from "./tax-id-type";
|
||||
export * from "./tokenized-payment-method";
|
||||
114
apps/web/src/app/billing/payment/types/masked-payment-method.ts
Normal file
114
apps/web/src/app/billing/payment/types/masked-payment-method.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
import { BaseResponse } from "@bitwarden/common/models/response/base.response";
|
||||
|
||||
import {
|
||||
BankAccountPaymentMethod,
|
||||
CardPaymentMethod,
|
||||
PayPalPaymentMethod,
|
||||
} from "./tokenized-payment-method";
|
||||
|
||||
export const StripeCardBrands = {
|
||||
amex: "amex",
|
||||
diners: "diners",
|
||||
discover: "discover",
|
||||
eftpos_au: "eftpos_au",
|
||||
jcb: "jcb",
|
||||
link: "link",
|
||||
mastercard: "mastercard",
|
||||
unionpay: "unionpay",
|
||||
visa: "visa",
|
||||
unknown: "unknown",
|
||||
} as const;
|
||||
|
||||
export type StripeCardBrand = (typeof StripeCardBrands)[keyof typeof StripeCardBrands];
|
||||
|
||||
type MaskedBankAccount = {
|
||||
type: BankAccountPaymentMethod;
|
||||
bankName: string;
|
||||
last4: string;
|
||||
verified: boolean;
|
||||
};
|
||||
|
||||
type MaskedCard = {
|
||||
type: CardPaymentMethod;
|
||||
brand: StripeCardBrand;
|
||||
last4: string;
|
||||
expiration: string;
|
||||
};
|
||||
|
||||
type MaskedPayPalAccount = {
|
||||
type: PayPalPaymentMethod;
|
||||
email: string;
|
||||
};
|
||||
|
||||
export type MaskedPaymentMethod = MaskedBankAccount | MaskedCard | MaskedPayPalAccount;
|
||||
|
||||
export class MaskedPaymentMethodResponse extends BaseResponse {
|
||||
value: MaskedPaymentMethod;
|
||||
|
||||
constructor(response: any) {
|
||||
super(response);
|
||||
|
||||
const type = this.getResponseProperty("Type");
|
||||
switch (type) {
|
||||
case "card": {
|
||||
this.value = new MaskedCardResponse(response);
|
||||
break;
|
||||
}
|
||||
case "bankAccount": {
|
||||
this.value = new MaskedBankAccountResponse(response);
|
||||
break;
|
||||
}
|
||||
case "payPal": {
|
||||
this.value = new MaskedPayPalAccountResponse(response);
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
throw new Error(`Cannot deserialize unsupported payment method type: ${type}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class MaskedBankAccountResponse extends BaseResponse implements MaskedBankAccount {
|
||||
type: BankAccountPaymentMethod;
|
||||
bankName: string;
|
||||
last4: string;
|
||||
verified: boolean;
|
||||
|
||||
constructor(response: any) {
|
||||
super(response);
|
||||
|
||||
this.type = "bankAccount";
|
||||
this.bankName = this.getResponseProperty("BankName");
|
||||
this.last4 = this.getResponseProperty("Last4");
|
||||
this.verified = this.getResponseProperty("Verified");
|
||||
}
|
||||
}
|
||||
|
||||
class MaskedCardResponse extends BaseResponse implements MaskedCard {
|
||||
type: CardPaymentMethod;
|
||||
brand: StripeCardBrand;
|
||||
last4: string;
|
||||
expiration: string;
|
||||
|
||||
constructor(response: any) {
|
||||
super(response);
|
||||
|
||||
this.type = "card";
|
||||
this.brand = this.getResponseProperty("Brand");
|
||||
this.last4 = this.getResponseProperty("Last4");
|
||||
this.expiration = this.getResponseProperty("Expiration");
|
||||
}
|
||||
}
|
||||
|
||||
class MaskedPayPalAccountResponse extends BaseResponse implements MaskedPayPalAccount {
|
||||
type: PayPalPaymentMethod;
|
||||
email: string;
|
||||
|
||||
constructor(response: any) {
|
||||
super(response);
|
||||
|
||||
this.type = "payPal";
|
||||
this.email = this.getResponseProperty("Email");
|
||||
}
|
||||
}
|
||||
259
apps/web/src/app/billing/payment/types/selectable-country.ts
Normal file
259
apps/web/src/app/billing/payment/types/selectable-country.ts
Normal file
@@ -0,0 +1,259 @@
|
||||
type SelectableCountry = Readonly<{
|
||||
name: string;
|
||||
value: string;
|
||||
disabled: boolean;
|
||||
}>;
|
||||
|
||||
export const selectableCountries: ReadonlyArray<SelectableCountry> = [
|
||||
{ name: "-- Select --", value: "", disabled: false },
|
||||
{ name: "United States", value: "US", disabled: false },
|
||||
{ name: "China", value: "CN", disabled: false },
|
||||
{ name: "France", value: "FR", disabled: false },
|
||||
{ name: "Germany", value: "DE", disabled: false },
|
||||
{ name: "Canada", value: "CA", disabled: false },
|
||||
{ name: "United Kingdom", value: "GB", disabled: false },
|
||||
{ name: "Australia", value: "AU", disabled: false },
|
||||
{ name: "India", value: "IN", disabled: false },
|
||||
{ name: "", value: "-", disabled: true },
|
||||
{ name: "Afghanistan", value: "AF", disabled: false },
|
||||
{ name: "Åland Islands", value: "AX", disabled: false },
|
||||
{ name: "Albania", value: "AL", disabled: false },
|
||||
{ name: "Algeria", value: "DZ", disabled: false },
|
||||
{ name: "American Samoa", value: "AS", disabled: false },
|
||||
{ name: "Andorra", value: "AD", disabled: false },
|
||||
{ name: "Angola", value: "AO", disabled: false },
|
||||
{ name: "Anguilla", value: "AI", disabled: false },
|
||||
{ name: "Antarctica", value: "AQ", disabled: false },
|
||||
{ name: "Antigua and Barbuda", value: "AG", disabled: false },
|
||||
{ name: "Argentina", value: "AR", disabled: false },
|
||||
{ name: "Armenia", value: "AM", disabled: false },
|
||||
{ name: "Aruba", value: "AW", disabled: false },
|
||||
{ name: "Austria", value: "AT", disabled: false },
|
||||
{ name: "Azerbaijan", value: "AZ", disabled: false },
|
||||
{ name: "Bahamas", value: "BS", disabled: false },
|
||||
{ name: "Bahrain", value: "BH", disabled: false },
|
||||
{ name: "Bangladesh", value: "BD", disabled: false },
|
||||
{ name: "Barbados", value: "BB", disabled: false },
|
||||
{ name: "Belarus", value: "BY", disabled: false },
|
||||
{ name: "Belgium", value: "BE", disabled: false },
|
||||
{ name: "Belize", value: "BZ", disabled: false },
|
||||
{ name: "Benin", value: "BJ", disabled: false },
|
||||
{ name: "Bermuda", value: "BM", disabled: false },
|
||||
{ name: "Bhutan", value: "BT", disabled: false },
|
||||
{ name: "Bolivia, Plurinational State of", value: "BO", disabled: false },
|
||||
{ name: "Bonaire, Sint Eustatius and Saba", value: "BQ", disabled: false },
|
||||
{ name: "Bosnia and Herzegovina", value: "BA", disabled: false },
|
||||
{ name: "Botswana", value: "BW", disabled: false },
|
||||
{ name: "Bouvet Island", value: "BV", disabled: false },
|
||||
{ name: "Brazil", value: "BR", disabled: false },
|
||||
{ name: "British Indian Ocean Territory", value: "IO", disabled: false },
|
||||
{ name: "Brunei Darussalam", value: "BN", disabled: false },
|
||||
{ name: "Bulgaria", value: "BG", disabled: false },
|
||||
{ name: "Burkina Faso", value: "BF", disabled: false },
|
||||
{ name: "Burundi", value: "BI", disabled: false },
|
||||
{ name: "Cambodia", value: "KH", disabled: false },
|
||||
{ name: "Cameroon", value: "CM", disabled: false },
|
||||
{ name: "Cape Verde", value: "CV", disabled: false },
|
||||
{ name: "Cayman Islands", value: "KY", disabled: false },
|
||||
{ name: "Central African Republic", value: "CF", disabled: false },
|
||||
{ name: "Chad", value: "TD", disabled: false },
|
||||
{ name: "Chile", value: "CL", disabled: false },
|
||||
{ name: "Christmas Island", value: "CX", disabled: false },
|
||||
{ name: "Cocos (Keeling) Islands", value: "CC", disabled: false },
|
||||
{ name: "Colombia", value: "CO", disabled: false },
|
||||
{ name: "Comoros", value: "KM", disabled: false },
|
||||
{ name: "Congo", value: "CG", disabled: false },
|
||||
{ name: "Congo, the Democratic Republic of the", value: "CD", disabled: false },
|
||||
{ name: "Cook Islands", value: "CK", disabled: false },
|
||||
{ name: "Costa Rica", value: "CR", disabled: false },
|
||||
{ name: "Côte d'Ivoire", value: "CI", disabled: false },
|
||||
{ name: "Croatia", value: "HR", disabled: false },
|
||||
{ name: "Cuba", value: "CU", disabled: false },
|
||||
{ name: "Curaçao", value: "CW", disabled: false },
|
||||
{ name: "Cyprus", value: "CY", disabled: false },
|
||||
{ name: "Czech Republic", value: "CZ", disabled: false },
|
||||
{ name: "Denmark", value: "DK", disabled: false },
|
||||
{ name: "Djibouti", value: "DJ", disabled: false },
|
||||
{ name: "Dominica", value: "DM", disabled: false },
|
||||
{ name: "Dominican Republic", value: "DO", disabled: false },
|
||||
{ name: "Ecuador", value: "EC", disabled: false },
|
||||
{ name: "Egypt", value: "EG", disabled: false },
|
||||
{ name: "El Salvador", value: "SV", disabled: false },
|
||||
{ name: "Equatorial Guinea", value: "GQ", disabled: false },
|
||||
{ name: "Eritrea", value: "ER", disabled: false },
|
||||
{ name: "Estonia", value: "EE", disabled: false },
|
||||
{ name: "Ethiopia", value: "ET", disabled: false },
|
||||
{ name: "Falkland Islands (Malvinas)", value: "FK", disabled: false },
|
||||
{ name: "Faroe Islands", value: "FO", disabled: false },
|
||||
{ name: "Fiji", value: "FJ", disabled: false },
|
||||
{ name: "Finland", value: "FI", disabled: false },
|
||||
{ name: "French Guiana", value: "GF", disabled: false },
|
||||
{ name: "French Polynesia", value: "PF", disabled: false },
|
||||
{ name: "French Southern Territories", value: "TF", disabled: false },
|
||||
{ name: "Gabon", value: "GA", disabled: false },
|
||||
{ name: "Gambia", value: "GM", disabled: false },
|
||||
{ name: "Georgia", value: "GE", disabled: false },
|
||||
{ name: "Ghana", value: "GH", disabled: false },
|
||||
{ name: "Gibraltar", value: "GI", disabled: false },
|
||||
{ name: "Greece", value: "GR", disabled: false },
|
||||
{ name: "Greenland", value: "GL", disabled: false },
|
||||
{ name: "Grenada", value: "GD", disabled: false },
|
||||
{ name: "Guadeloupe", value: "GP", disabled: false },
|
||||
{ name: "Guam", value: "GU", disabled: false },
|
||||
{ name: "Guatemala", value: "GT", disabled: false },
|
||||
{ name: "Guernsey", value: "GG", disabled: false },
|
||||
{ name: "Guinea", value: "GN", disabled: false },
|
||||
{ name: "Guinea-Bissau", value: "GW", disabled: false },
|
||||
{ name: "Guyana", value: "GY", disabled: false },
|
||||
{ name: "Haiti", value: "HT", disabled: false },
|
||||
{ name: "Heard Island and McDonald Islands", value: "HM", disabled: false },
|
||||
{ name: "Holy See (Vatican City State)", value: "VA", disabled: false },
|
||||
{ name: "Honduras", value: "HN", disabled: false },
|
||||
{ name: "Hong Kong", value: "HK", disabled: false },
|
||||
{ name: "Hungary", value: "HU", disabled: false },
|
||||
{ name: "Iceland", value: "IS", disabled: false },
|
||||
{ name: "Indonesia", value: "ID", disabled: false },
|
||||
{ name: "Iran, Islamic Republic of", value: "IR", disabled: false },
|
||||
{ name: "Iraq", value: "IQ", disabled: false },
|
||||
{ name: "Ireland", value: "IE", disabled: false },
|
||||
{ name: "Isle of Man", value: "IM", disabled: false },
|
||||
{ name: "Israel", value: "IL", disabled: false },
|
||||
{ name: "Italy", value: "IT", disabled: false },
|
||||
{ name: "Jamaica", value: "JM", disabled: false },
|
||||
{ name: "Japan", value: "JP", disabled: false },
|
||||
{ name: "Jersey", value: "JE", disabled: false },
|
||||
{ name: "Jordan", value: "JO", disabled: false },
|
||||
{ name: "Kazakhstan", value: "KZ", disabled: false },
|
||||
{ name: "Kenya", value: "KE", disabled: false },
|
||||
{ name: "Kiribati", value: "KI", disabled: false },
|
||||
{ name: "Korea, Democratic People's Republic of", value: "KP", disabled: false },
|
||||
{ name: "Korea, Republic of", value: "KR", disabled: false },
|
||||
{ name: "Kuwait", value: "KW", disabled: false },
|
||||
{ name: "Kyrgyzstan", value: "KG", disabled: false },
|
||||
{ name: "Lao People's Democratic Republic", value: "LA", disabled: false },
|
||||
{ name: "Latvia", value: "LV", disabled: false },
|
||||
{ name: "Lebanon", value: "LB", disabled: false },
|
||||
{ name: "Lesotho", value: "LS", disabled: false },
|
||||
{ name: "Liberia", value: "LR", disabled: false },
|
||||
{ name: "Libya", value: "LY", disabled: false },
|
||||
{ name: "Liechtenstein", value: "LI", disabled: false },
|
||||
{ name: "Lithuania", value: "LT", disabled: false },
|
||||
{ name: "Luxembourg", value: "LU", disabled: false },
|
||||
{ name: "Macao", value: "MO", disabled: false },
|
||||
{ name: "Macedonia, the former Yugoslav Republic of", value: "MK", disabled: false },
|
||||
{ name: "Madagascar", value: "MG", disabled: false },
|
||||
{ name: "Malawi", value: "MW", disabled: false },
|
||||
{ name: "Malaysia", value: "MY", disabled: false },
|
||||
{ name: "Maldives", value: "MV", disabled: false },
|
||||
{ name: "Mali", value: "ML", disabled: false },
|
||||
{ name: "Malta", value: "MT", disabled: false },
|
||||
{ name: "Marshall Islands", value: "MH", disabled: false },
|
||||
{ name: "Martinique", value: "MQ", disabled: false },
|
||||
{ name: "Mauritania", value: "MR", disabled: false },
|
||||
{ name: "Mauritius", value: "MU", disabled: false },
|
||||
{ name: "Mayotte", value: "YT", disabled: false },
|
||||
{ name: "Mexico", value: "MX", disabled: false },
|
||||
{ name: "Micronesia, Federated States of", value: "FM", disabled: false },
|
||||
{ name: "Moldova, Republic of", value: "MD", disabled: false },
|
||||
{ name: "Monaco", value: "MC", disabled: false },
|
||||
{ name: "Mongolia", value: "MN", disabled: false },
|
||||
{ name: "Montenegro", value: "ME", disabled: false },
|
||||
{ name: "Montserrat", value: "MS", disabled: false },
|
||||
{ name: "Morocco", value: "MA", disabled: false },
|
||||
{ name: "Mozambique", value: "MZ", disabled: false },
|
||||
{ name: "Myanmar", value: "MM", disabled: false },
|
||||
{ name: "Namibia", value: "NA", disabled: false },
|
||||
{ name: "Nauru", value: "NR", disabled: false },
|
||||
{ name: "Nepal", value: "NP", disabled: false },
|
||||
{ name: "Netherlands", value: "NL", disabled: false },
|
||||
{ name: "New Caledonia", value: "NC", disabled: false },
|
||||
{ name: "New Zealand", value: "NZ", disabled: false },
|
||||
{ name: "Nicaragua", value: "NI", disabled: false },
|
||||
{ name: "Niger", value: "NE", disabled: false },
|
||||
{ name: "Nigeria", value: "NG", disabled: false },
|
||||
{ name: "Niue", value: "NU", disabled: false },
|
||||
{ name: "Norfolk Island", value: "NF", disabled: false },
|
||||
{ name: "Northern Mariana Islands", value: "MP", disabled: false },
|
||||
{ name: "Norway", value: "NO", disabled: false },
|
||||
{ name: "Oman", value: "OM", disabled: false },
|
||||
{ name: "Pakistan", value: "PK", disabled: false },
|
||||
{ name: "Palau", value: "PW", disabled: false },
|
||||
{ name: "Palestinian Territory, Occupied", value: "PS", disabled: false },
|
||||
{ name: "Panama", value: "PA", disabled: false },
|
||||
{ name: "Papua New Guinea", value: "PG", disabled: false },
|
||||
{ name: "Paraguay", value: "PY", disabled: false },
|
||||
{ name: "Peru", value: "PE", disabled: false },
|
||||
{ name: "Philippines", value: "PH", disabled: false },
|
||||
{ name: "Pitcairn", value: "PN", disabled: false },
|
||||
{ name: "Poland", value: "PL", disabled: false },
|
||||
{ name: "Portugal", value: "PT", disabled: false },
|
||||
{ name: "Puerto Rico", value: "PR", disabled: false },
|
||||
{ name: "Qatar", value: "QA", disabled: false },
|
||||
{ name: "Réunion", value: "RE", disabled: false },
|
||||
{ name: "Romania", value: "RO", disabled: false },
|
||||
{ name: "Russian Federation", value: "RU", disabled: false },
|
||||
{ name: "Rwanda", value: "RW", disabled: false },
|
||||
{ name: "Saint Barthélemy", value: "BL", disabled: false },
|
||||
{ name: "Saint Helena, Ascension and Tristan da Cunha", value: "SH", disabled: false },
|
||||
{ name: "Saint Kitts and Nevis", value: "KN", disabled: false },
|
||||
{ name: "Saint Lucia", value: "LC", disabled: false },
|
||||
{ name: "Saint Martin (French part)", value: "MF", disabled: false },
|
||||
{ name: "Saint Pierre and Miquelon", value: "PM", disabled: false },
|
||||
{ name: "Saint Vincent and the Grenadines", value: "VC", disabled: false },
|
||||
{ name: "Samoa", value: "WS", disabled: false },
|
||||
{ name: "San Marino", value: "SM", disabled: false },
|
||||
{ name: "Sao Tome and Principe", value: "ST", disabled: false },
|
||||
{ name: "Saudi Arabia", value: "SA", disabled: false },
|
||||
{ name: "Senegal", value: "SN", disabled: false },
|
||||
{ name: "Serbia", value: "RS", disabled: false },
|
||||
{ name: "Seychelles", value: "SC", disabled: false },
|
||||
{ name: "Sierra Leone", value: "SL", disabled: false },
|
||||
{ name: "Singapore", value: "SG", disabled: false },
|
||||
{ name: "Sint Maarten (Dutch part)", value: "SX", disabled: false },
|
||||
{ name: "Slovakia", value: "SK", disabled: false },
|
||||
{ name: "Slovenia", value: "SI", disabled: false },
|
||||
{ name: "Solomon Islands", value: "SB", disabled: false },
|
||||
{ name: "Somalia", value: "SO", disabled: false },
|
||||
{ name: "South Africa", value: "ZA", disabled: false },
|
||||
{ name: "South Georgia and the South Sandwich Islands", value: "GS", disabled: false },
|
||||
{ name: "South Sudan", value: "SS", disabled: false },
|
||||
{ name: "Spain", value: "ES", disabled: false },
|
||||
{ name: "Sri Lanka", value: "LK", disabled: false },
|
||||
{ name: "Sudan", value: "SD", disabled: false },
|
||||
{ name: "Suriname", value: "SR", disabled: false },
|
||||
{ name: "Svalbard and Jan Mayen", value: "SJ", disabled: false },
|
||||
{ name: "Swaziland", value: "SZ", disabled: false },
|
||||
{ name: "Sweden", value: "SE", disabled: false },
|
||||
{ name: "Switzerland", value: "CH", disabled: false },
|
||||
{ name: "Syrian Arab Republic", value: "SY", disabled: false },
|
||||
{ name: "Taiwan", value: "TW", disabled: false },
|
||||
{ name: "Tajikistan", value: "TJ", disabled: false },
|
||||
{ name: "Tanzania, United Republic of", value: "TZ", disabled: false },
|
||||
{ name: "Thailand", value: "TH", disabled: false },
|
||||
{ name: "Timor-Leste", value: "TL", disabled: false },
|
||||
{ name: "Togo", value: "TG", disabled: false },
|
||||
{ name: "Tokelau", value: "TK", disabled: false },
|
||||
{ name: "Tonga", value: "TO", disabled: false },
|
||||
{ name: "Trinidad and Tobago", value: "TT", disabled: false },
|
||||
{ name: "Tunisia", value: "TN", disabled: false },
|
||||
{ name: "Turkey", value: "TR", disabled: false },
|
||||
{ name: "Turkmenistan", value: "TM", disabled: false },
|
||||
{ name: "Turks and Caicos Islands", value: "TC", disabled: false },
|
||||
{ name: "Tuvalu", value: "TV", disabled: false },
|
||||
{ name: "Uganda", value: "UG", disabled: false },
|
||||
{ name: "Ukraine", value: "UA", disabled: false },
|
||||
{ name: "United Arab Emirates", value: "AE", disabled: false },
|
||||
{ name: "United States Minor Outlying Islands", value: "UM", disabled: false },
|
||||
{ name: "Uruguay", value: "UY", disabled: false },
|
||||
{ name: "Uzbekistan", value: "UZ", disabled: false },
|
||||
{ name: "Vanuatu", value: "VU", disabled: false },
|
||||
{ name: "Venezuela, Bolivarian Republic of", value: "VE", disabled: false },
|
||||
{ name: "Viet Nam", value: "VN", disabled: false },
|
||||
{ name: "Virgin Islands, British", value: "VG", disabled: false },
|
||||
{ name: "Virgin Islands, U.S.", value: "VI", disabled: false },
|
||||
{ name: "Wallis and Futuna", value: "WF", disabled: false },
|
||||
{ name: "Western Sahara", value: "EH", disabled: false },
|
||||
{ name: "Yemen", value: "YE", disabled: false },
|
||||
{ name: "Zambia", value: "ZM", disabled: false },
|
||||
{ name: "Zimbabwe", value: "ZW", disabled: false },
|
||||
];
|
||||
1123
apps/web/src/app/billing/payment/types/tax-id-type.ts
Normal file
1123
apps/web/src/app/billing/payment/types/tax-id-type.ts
Normal file
File diff suppressed because it is too large
Load Diff
18
apps/web/src/app/billing/payment/types/tax-id.ts
Normal file
18
apps/web/src/app/billing/payment/types/tax-id.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { BaseResponse } from "@bitwarden/common/models/response/base.response";
|
||||
|
||||
export interface TaxId {
|
||||
code: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export class TaxIdResponse extends BaseResponse implements TaxId {
|
||||
code: string;
|
||||
value: string;
|
||||
|
||||
constructor(response: any) {
|
||||
super(response);
|
||||
|
||||
this.code = this.getResponseProperty("Code");
|
||||
this.value = this.getResponseProperty("Value");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
export const TokenizablePaymentMethods = {
|
||||
bankAccount: "bankAccount",
|
||||
card: "card",
|
||||
payPal: "payPal",
|
||||
} as const;
|
||||
|
||||
export type BankAccountPaymentMethod = typeof TokenizablePaymentMethods.bankAccount;
|
||||
export type CardPaymentMethod = typeof TokenizablePaymentMethods.card;
|
||||
export type PayPalPaymentMethod = typeof TokenizablePaymentMethods.payPal;
|
||||
|
||||
export type TokenizablePaymentMethod =
|
||||
(typeof TokenizablePaymentMethods)[keyof typeof TokenizablePaymentMethods];
|
||||
|
||||
export const isTokenizablePaymentMethod = (value: string): value is TokenizablePaymentMethod => {
|
||||
const valid = Object.values(TokenizablePaymentMethods) as readonly string[];
|
||||
return valid.includes(value);
|
||||
};
|
||||
|
||||
export type TokenizedPaymentMethod = {
|
||||
type: TokenizablePaymentMethod;
|
||||
token: string;
|
||||
};
|
||||
153
apps/web/src/app/billing/services/billing.client.ts
Normal file
153
apps/web/src/app/billing/services/billing.client.ts
Normal file
@@ -0,0 +1,153 @@
|
||||
import { Injectable } from "@angular/core";
|
||||
|
||||
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
||||
import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
|
||||
|
||||
import {
|
||||
BillingAddress,
|
||||
BillingAddressResponse,
|
||||
MaskedPaymentMethod,
|
||||
MaskedPaymentMethodResponse,
|
||||
TokenizedPaymentMethod,
|
||||
} from "../payment/types";
|
||||
import { BillableEntity } from "../types";
|
||||
|
||||
type Result<T> =
|
||||
| {
|
||||
type: "success";
|
||||
value: T;
|
||||
}
|
||||
| {
|
||||
type: "error";
|
||||
message: string;
|
||||
};
|
||||
|
||||
@Injectable()
|
||||
export class BillingClient {
|
||||
constructor(private apiService: ApiService) {}
|
||||
|
||||
private getEndpoint = (entity: BillableEntity): string => {
|
||||
switch (entity.type) {
|
||||
case "account": {
|
||||
return "/account/billing/vnext";
|
||||
}
|
||||
case "organization": {
|
||||
return `/organizations/${entity.data.id}/billing/vnext`;
|
||||
}
|
||||
case "provider": {
|
||||
return `/providers/${entity.data.id}/billing/vnext`;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
addCreditWithBitPay = async (
|
||||
owner: BillableEntity,
|
||||
credit: { amount: number; redirectUrl: string },
|
||||
): Promise<Result<string>> => {
|
||||
const path = `${this.getEndpoint(owner)}/credit/bitpay`;
|
||||
try {
|
||||
const data = await this.apiService.send("POST", path, credit, true, true);
|
||||
return {
|
||||
type: "success",
|
||||
value: data as string,
|
||||
};
|
||||
} catch (error: any) {
|
||||
if (error instanceof ErrorResponse) {
|
||||
return {
|
||||
type: "error",
|
||||
message: error.message,
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
getBillingAddress = async (owner: BillableEntity): Promise<BillingAddress | null> => {
|
||||
const path = `${this.getEndpoint(owner)}/address`;
|
||||
const data = await this.apiService.send("GET", path, null, true, true);
|
||||
return data ? new BillingAddressResponse(data) : null;
|
||||
};
|
||||
|
||||
getCredit = async (owner: BillableEntity): Promise<number | null> => {
|
||||
const path = `${this.getEndpoint(owner)}/credit`;
|
||||
const data = await this.apiService.send("GET", path, null, true, true);
|
||||
return data ? (data as number) : null;
|
||||
};
|
||||
|
||||
getPaymentMethod = async (owner: BillableEntity): Promise<MaskedPaymentMethod | null> => {
|
||||
const path = `${this.getEndpoint(owner)}/payment-method`;
|
||||
const data = await this.apiService.send("GET", path, null, true, true);
|
||||
return data ? new MaskedPaymentMethodResponse(data).value : null;
|
||||
};
|
||||
|
||||
updateBillingAddress = async (
|
||||
owner: BillableEntity,
|
||||
billingAddress: BillingAddress,
|
||||
): Promise<Result<BillingAddress>> => {
|
||||
const path = `${this.getEndpoint(owner)}/address`;
|
||||
try {
|
||||
const data = await this.apiService.send("PUT", path, billingAddress, true, true);
|
||||
return {
|
||||
type: "success",
|
||||
value: new BillingAddressResponse(data),
|
||||
};
|
||||
} catch (error: any) {
|
||||
if (error instanceof ErrorResponse) {
|
||||
return {
|
||||
type: "error",
|
||||
message: error.message,
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
updatePaymentMethod = async (
|
||||
owner: BillableEntity,
|
||||
paymentMethod: TokenizedPaymentMethod,
|
||||
billingAddress: Pick<BillingAddress, "country" | "postalCode"> | null,
|
||||
): Promise<Result<MaskedPaymentMethod>> => {
|
||||
const path = `${this.getEndpoint(owner)}/payment-method`;
|
||||
try {
|
||||
const request = {
|
||||
...paymentMethod,
|
||||
billingAddress,
|
||||
};
|
||||
const data = await this.apiService.send("PUT", path, request, true, true);
|
||||
return {
|
||||
type: "success",
|
||||
value: new MaskedPaymentMethodResponse(data).value,
|
||||
};
|
||||
} catch (error: any) {
|
||||
if (error instanceof ErrorResponse) {
|
||||
return {
|
||||
type: "error",
|
||||
message: error.message,
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
verifyBankAccount = async (
|
||||
owner: BillableEntity,
|
||||
descriptorCode: string,
|
||||
): Promise<Result<MaskedPaymentMethod>> => {
|
||||
const path = `${this.getEndpoint(owner)}/payment-method/verify-bank-account`;
|
||||
try {
|
||||
const data = await this.apiService.send("POST", path, { descriptorCode }, true, true);
|
||||
return {
|
||||
type: "success",
|
||||
value: new MaskedPaymentMethodResponse(data).value,
|
||||
};
|
||||
} catch (error: any) {
|
||||
if (error instanceof ErrorResponse) {
|
||||
return {
|
||||
type: "error",
|
||||
message: error.message,
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
export * from "./billing.client";
|
||||
export * from "./billing-services.module";
|
||||
export * from "./braintree.service";
|
||||
export * from "./stripe.service";
|
||||
|
||||
@@ -2,11 +2,43 @@
|
||||
// @ts-strict-ignore
|
||||
import { Injectable } from "@angular/core";
|
||||
|
||||
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
||||
import { BankAccount } from "@bitwarden/common/billing/models/domain";
|
||||
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
|
||||
|
||||
import { BankAccountPaymentMethod, CardPaymentMethod } from "../payment/types";
|
||||
|
||||
import { BillingServicesModule } from "./billing-services.module";
|
||||
|
||||
type SetupBankAccountRequest = {
|
||||
payment_method: {
|
||||
us_bank_account: {
|
||||
routing_number: string;
|
||||
account_number: string;
|
||||
account_holder_type: string;
|
||||
};
|
||||
billing_details: {
|
||||
name: string;
|
||||
address?: {
|
||||
country: string;
|
||||
postal_code: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
type SetupCardRequest = {
|
||||
payment_method: {
|
||||
card: string;
|
||||
billing_details?: {
|
||||
address: {
|
||||
country: string;
|
||||
postal_code: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
@Injectable({ providedIn: BillingServicesModule })
|
||||
export class StripeService {
|
||||
private stripe: any;
|
||||
@@ -17,7 +49,28 @@ export class StripeService {
|
||||
cardCvc: string;
|
||||
};
|
||||
|
||||
constructor(private logService: LogService) {}
|
||||
constructor(
|
||||
private apiService: ApiService,
|
||||
private logService: LogService,
|
||||
) {}
|
||||
|
||||
createSetupIntent = async (
|
||||
paymentMethod: BankAccountPaymentMethod | CardPaymentMethod,
|
||||
): Promise<string> => {
|
||||
const getPath = () => {
|
||||
switch (paymentMethod) {
|
||||
case "bankAccount": {
|
||||
return "/setup-intent/bank-account";
|
||||
}
|
||||
case "card": {
|
||||
return "/setup-intent/card";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const response = await this.apiService.send("POST", getPath(), null, true, true);
|
||||
return response as string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Loads [Stripe JS]{@link https://docs.stripe.com/js} in the <head> element of the current page and mounts
|
||||
@@ -51,25 +104,28 @@ export class StripeService {
|
||||
window.document.head.appendChild(script);
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-mounts previously created Stripe credit card [elements]{@link https://docs.stripe.com/js/elements_object/create} into the HTML elements
|
||||
* specified during the {@link loadStripe} call. This is useful for when those HTML elements are removed from the DOM by Angular.
|
||||
*/
|
||||
mountElements(i: number = 0) {
|
||||
mountElements(attempt: number = 1) {
|
||||
setTimeout(() => {
|
||||
if (!document.querySelector(this.elementIds.cardNumber) && i < 10) {
|
||||
this.logService.warning("Stripe container missing, retrying...");
|
||||
this.mountElements(i + 1);
|
||||
return;
|
||||
}
|
||||
if (!this.elements) {
|
||||
this.logService.warning(`Stripe elements are missing, retrying for attempt ${attempt}...`);
|
||||
this.mountElements(attempt + 1);
|
||||
} else {
|
||||
const cardNumber = this.elements.getElement("cardNumber");
|
||||
const cardExpiry = this.elements.getElement("cardExpiry");
|
||||
const cardCVC = this.elements.getElement("cardCvc");
|
||||
|
||||
const cardNumber = this.elements.getElement("cardNumber");
|
||||
const cardExpiry = this.elements.getElement("cardExpiry");
|
||||
const cardCvc = this.elements.getElement("cardCvc");
|
||||
cardNumber.mount(this.elementIds.cardNumber);
|
||||
cardExpiry.mount(this.elementIds.cardExpiry);
|
||||
cardCvc.mount(this.elementIds.cardCvc);
|
||||
}, 50);
|
||||
if ([cardNumber, cardExpiry, cardCVC].some((element) => !element)) {
|
||||
this.logService.warning(
|
||||
`Some Stripe card elements are missing, retrying for attempt ${attempt}...`,
|
||||
);
|
||||
this.mountElements(attempt + 1);
|
||||
} else {
|
||||
cardNumber.mount(this.elementIds.cardNumber);
|
||||
cardExpiry.mount(this.elementIds.cardExpiry);
|
||||
cardCVC.mount(this.elementIds.cardCvc);
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -81,8 +137,9 @@ export class StripeService {
|
||||
async setupBankAccountPaymentMethod(
|
||||
clientSecret: string,
|
||||
{ accountHolderName, routingNumber, accountNumber, accountHolderType }: BankAccount,
|
||||
billingDetails?: { country: string; postalCode: string },
|
||||
): Promise<string> {
|
||||
const result = await this.stripe.confirmUsBankAccountSetup(clientSecret, {
|
||||
const request: SetupBankAccountRequest = {
|
||||
payment_method: {
|
||||
us_bank_account: {
|
||||
routing_number: routingNumber,
|
||||
@@ -93,7 +150,16 @@ export class StripeService {
|
||||
name: accountHolderName,
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
if (billingDetails) {
|
||||
request.payment_method.billing_details.address = {
|
||||
country: billingDetails.country,
|
||||
postal_code: billingDetails.postalCode,
|
||||
};
|
||||
}
|
||||
|
||||
const result = await this.stripe.confirmUsBankAccountSetup(clientSecret, request);
|
||||
if (result.error || (result.setupIntent && result.setupIntent.status !== "requires_action")) {
|
||||
this.logService.error(result.error);
|
||||
throw result.error;
|
||||
@@ -107,13 +173,25 @@ export class StripeService {
|
||||
* thereby creating and storing a Stripe [PaymentMethod]{@link https://docs.stripe.com/api/payment_methods}.
|
||||
* @returns The ID of the newly created PaymentMethod.
|
||||
*/
|
||||
async setupCardPaymentMethod(clientSecret: string): Promise<string> {
|
||||
async setupCardPaymentMethod(
|
||||
clientSecret: string,
|
||||
billingDetails?: { country: string; postalCode: string },
|
||||
): Promise<string> {
|
||||
const cardNumber = this.elements.getElement("cardNumber");
|
||||
const result = await this.stripe.confirmCardSetup(clientSecret, {
|
||||
const request: SetupCardRequest = {
|
||||
payment_method: {
|
||||
card: cardNumber,
|
||||
},
|
||||
});
|
||||
};
|
||||
if (billingDetails) {
|
||||
request.payment_method.billing_details = {
|
||||
address: {
|
||||
country: billingDetails.country,
|
||||
postal_code: billingDetails.postalCode,
|
||||
},
|
||||
};
|
||||
}
|
||||
const result = await this.stripe.confirmCardSetup(clientSecret, request);
|
||||
if (result.error || (result.setupIntent && result.setupIntent.status !== "succeeded")) {
|
||||
this.logService.error(result.error);
|
||||
throw result.error;
|
||||
|
||||
@@ -11,6 +11,8 @@ import { BillingSourceResponse } from "@bitwarden/common/billing/models/response
|
||||
import { OrganizationBillingMetadataResponse } from "@bitwarden/common/billing/models/response/organization-billing-metadata.response";
|
||||
import { OrganizationSubscriptionResponse } from "@bitwarden/common/billing/models/response/organization-subscription.response";
|
||||
import { PaymentSourceResponse } from "@bitwarden/common/billing/models/response/payment-source.response";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { DialogService } from "@bitwarden/components";
|
||||
|
||||
@@ -28,6 +30,7 @@ export class TrialFlowService {
|
||||
private router: Router,
|
||||
protected billingApiService: BillingApiServiceAbstraction,
|
||||
private organizationApiService: OrganizationApiServiceAbstraction,
|
||||
private configService: ConfigService,
|
||||
) {}
|
||||
checkForOrgsWithUpcomingPaymentIssues(
|
||||
organization: Organization,
|
||||
@@ -131,7 +134,11 @@ export class TrialFlowService {
|
||||
}
|
||||
|
||||
private async navigateToPaymentMethod(orgId: string) {
|
||||
await this.router.navigate(["organizations", `${orgId}`, "billing", "payment-method"], {
|
||||
const managePaymentDetailsOutsideCheckout = await this.configService.getFeatureFlag(
|
||||
FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout,
|
||||
);
|
||||
const route = managePaymentDetailsOutsideCheckout ? "payment-details" : "payment-method";
|
||||
await this.router.navigate(["organizations", `${orgId}`, "billing", route], {
|
||||
state: { launchPaymentModalAutomatically: true },
|
||||
queryParams: { launchPaymentModalAutomatically: true },
|
||||
});
|
||||
|
||||
@@ -18,7 +18,9 @@ import { PaymentMethodType } from "@bitwarden/common/billing/enums";
|
||||
import { BillingPaymentResponse } from "@bitwarden/common/billing/models/response/billing-payment.response";
|
||||
import { OrganizationSubscriptionResponse } from "@bitwarden/common/billing/models/response/organization-subscription.response";
|
||||
import { SubscriptionResponse } from "@bitwarden/common/billing/models/response/subscription.response";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { VerifyBankRequest } from "@bitwarden/common/models/request/verify-bank.request";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
||||
import { SyncService } from "@bitwarden/common/platform/sync";
|
||||
@@ -79,6 +81,7 @@ export class PaymentMethodComponent implements OnInit, OnDestroy {
|
||||
private organizationService: OrganizationService,
|
||||
private accountService: AccountService,
|
||||
protected syncService: SyncService,
|
||||
private configService: ConfigService,
|
||||
) {
|
||||
const state = this.router.getCurrentNavigation()?.extras?.state;
|
||||
// incase the above state is undefined or null we use redundantState
|
||||
@@ -107,6 +110,14 @@ export class PaymentMethodComponent implements OnInit, OnDestroy {
|
||||
return;
|
||||
}
|
||||
|
||||
const managePaymentDetailsOutsideCheckout = await this.configService.getFeatureFlag(
|
||||
FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout,
|
||||
);
|
||||
|
||||
if (managePaymentDetailsOutsideCheckout) {
|
||||
await this.router.navigate(["../payment-details"], { relativeTo: this.route });
|
||||
}
|
||||
|
||||
await this.load();
|
||||
this.firstLoaded = true;
|
||||
});
|
||||
|
||||
42
apps/web/src/app/billing/types/billable-entity.ts
Normal file
42
apps/web/src/app/billing/types/billable-entity.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import { map } from "rxjs";
|
||||
|
||||
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
|
||||
import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
|
||||
import { Account } from "@bitwarden/common/auth/abstractions/account.service";
|
||||
|
||||
export type BillableEntity =
|
||||
| { type: "account"; data: Account }
|
||||
| { type: "organization"; data: Organization }
|
||||
| { type: "provider"; data: Provider };
|
||||
|
||||
export const accountToBillableEntity = map<Account | null, BillableEntity>((account) => {
|
||||
if (!account) {
|
||||
throw new Error("Account not found");
|
||||
}
|
||||
return {
|
||||
type: "account",
|
||||
data: account,
|
||||
};
|
||||
});
|
||||
|
||||
export const organizationToBillableEntity = map<Organization | undefined, BillableEntity>(
|
||||
(organization) => {
|
||||
if (!organization) {
|
||||
throw new Error("Organization not found");
|
||||
}
|
||||
return {
|
||||
type: "organization",
|
||||
data: organization,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
export const providerToBillableEntity = map<Provider | null, BillableEntity>((provider) => {
|
||||
if (!provider) {
|
||||
throw new Error("Organization not found");
|
||||
}
|
||||
return {
|
||||
type: "provider",
|
||||
data: provider,
|
||||
};
|
||||
});
|
||||
2
apps/web/src/app/billing/types/index.ts
Normal file
2
apps/web/src/app/billing/types/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from "./billable-entity";
|
||||
export * from "./free-trial";
|
||||
2
apps/web/src/app/billing/warnings/components/index.ts
Normal file
2
apps/web/src/app/billing/warnings/components/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from "./organization-free-trial-warning.component";
|
||||
export * from "./organization-reseller-renewal-warning.component";
|
||||
@@ -6,15 +6,13 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga
|
||||
import { AnchorLinkDirective, BannerComponent } from "@bitwarden/components";
|
||||
import { I18nPipe } from "@bitwarden/ui-common";
|
||||
|
||||
import {
|
||||
FreeTrialWarning,
|
||||
OrganizationWarningsService,
|
||||
} from "../services/organization-warnings.service";
|
||||
import { OrganizationWarningsService } from "../services";
|
||||
import { OrganizationFreeTrialWarning } from "../types";
|
||||
|
||||
@Component({
|
||||
selector: "app-free-trial-warning",
|
||||
selector: "app-organization-free-trial-warning",
|
||||
template: `
|
||||
@let warning = freeTrialWarning$ | async;
|
||||
@let warning = warning$ | async;
|
||||
|
||||
@if (warning) {
|
||||
<bit-banner
|
||||
@@ -39,17 +37,19 @@ import {
|
||||
`,
|
||||
imports: [AnchorLinkDirective, AsyncPipe, BannerComponent, I18nPipe],
|
||||
})
|
||||
export class FreeTrialWarningComponent implements OnInit {
|
||||
export class OrganizationFreeTrialWarningComponent implements OnInit {
|
||||
@Input({ required: true }) organization!: Organization;
|
||||
@Output() clicked = new EventEmitter<void>();
|
||||
|
||||
freeTrialWarning$!: Observable<FreeTrialWarning>;
|
||||
warning$!: Observable<OrganizationFreeTrialWarning>;
|
||||
|
||||
constructor(private organizationWarningsService: OrganizationWarningsService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.freeTrialWarning$ = this.organizationWarningsService.getFreeTrialWarning$(
|
||||
this.organization,
|
||||
);
|
||||
this.warning$ = this.organizationWarningsService.getFreeTrialWarning$(this.organization);
|
||||
}
|
||||
|
||||
refresh = () => {
|
||||
this.warning$ = this.organizationWarningsService.getFreeTrialWarning$(this.organization, true);
|
||||
};
|
||||
}
|
||||
@@ -5,15 +5,13 @@ import { Observable } from "rxjs";
|
||||
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
|
||||
import { BannerComponent } from "@bitwarden/components";
|
||||
|
||||
import {
|
||||
OrganizationWarningsService,
|
||||
ResellerRenewalWarning,
|
||||
} from "../services/organization-warnings.service";
|
||||
import { OrganizationWarningsService } from "../services";
|
||||
import { OrganizationResellerRenewalWarning } from "../types";
|
||||
|
||||
@Component({
|
||||
selector: "app-reseller-renewal-warning",
|
||||
selector: "app-organization-reseller-renewal-warning",
|
||||
template: `
|
||||
@let warning = resellerRenewalWarning$ | async;
|
||||
@let warning = warning$ | async;
|
||||
|
||||
@if (warning) {
|
||||
<bit-banner
|
||||
@@ -29,16 +27,14 @@ import {
|
||||
`,
|
||||
imports: [AsyncPipe, BannerComponent],
|
||||
})
|
||||
export class ResellerRenewalWarningComponent implements OnInit {
|
||||
export class OrganizationResellerRenewalWarningComponent implements OnInit {
|
||||
@Input({ required: true }) organization!: Organization;
|
||||
|
||||
resellerRenewalWarning$!: Observable<ResellerRenewalWarning>;
|
||||
warning$!: Observable<OrganizationResellerRenewalWarning>;
|
||||
|
||||
constructor(private organizationWarningsService: OrganizationWarningsService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.resellerRenewalWarning$ = this.organizationWarningsService.getResellerRenewalWarning$(
|
||||
this.organization,
|
||||
);
|
||||
this.warning$ = this.organizationWarningsService.getResellerRenewalWarning$(this.organization);
|
||||
}
|
||||
}
|
||||
1
apps/web/src/app/billing/warnings/services/index.ts
Normal file
1
apps/web/src/app/billing/warnings/services/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from "./organization-warnings.service";
|
||||
@@ -1,25 +1,20 @@
|
||||
import { Injectable } from "@angular/core";
|
||||
import { Router } from "@angular/router";
|
||||
import {
|
||||
filter,
|
||||
from,
|
||||
lastValueFrom,
|
||||
map,
|
||||
Observable,
|
||||
shareReplay,
|
||||
switchMap,
|
||||
takeWhile,
|
||||
} from "rxjs";
|
||||
import { filter, from, lastValueFrom, map, Observable, switchMap, takeWhile } from "rxjs";
|
||||
import { take } from "rxjs/operators";
|
||||
|
||||
import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
|
||||
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
|
||||
import { OrganizationBillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/organizations/organization-billing-api.service.abstraction";
|
||||
import { OrganizationWarningsResponse } from "@bitwarden/common/billing/models/response/organization-warnings.response";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { OrganizationId } from "@bitwarden/common/types/guid";
|
||||
import { DialogService } from "@bitwarden/components";
|
||||
import { openChangePlanDialog } from "@bitwarden/web-vault/app/billing/organizations/change-plan-dialog.component";
|
||||
|
||||
import { openChangePlanDialog } from "../../organizations/change-plan-dialog.component";
|
||||
import { OrganizationFreeTrialWarning, OrganizationResellerRenewalWarning } from "../types";
|
||||
|
||||
const format = (date: Date) =>
|
||||
date.toLocaleDateString("en-US", {
|
||||
@@ -28,21 +23,12 @@ const format = (date: Date) =>
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
export type FreeTrialWarning = {
|
||||
organization: Pick<Organization, "id" & "name">;
|
||||
message: string;
|
||||
};
|
||||
|
||||
export type ResellerRenewalWarning = {
|
||||
type: "info" | "warning";
|
||||
message: string;
|
||||
};
|
||||
|
||||
@Injectable({ providedIn: "root" })
|
||||
export class OrganizationWarningsService {
|
||||
private cache$ = new Map<OrganizationId, Observable<OrganizationWarningsResponse>>();
|
||||
|
||||
constructor(
|
||||
private configService: ConfigService,
|
||||
private dialogService: DialogService,
|
||||
private i18nService: I18nService,
|
||||
private organizationApiService: OrganizationApiServiceAbstraction,
|
||||
@@ -50,8 +36,11 @@ export class OrganizationWarningsService {
|
||||
private router: Router,
|
||||
) {}
|
||||
|
||||
getFreeTrialWarning$ = (organization: Organization): Observable<FreeTrialWarning> =>
|
||||
this.getWarning$(organization, (response) => response.freeTrial).pipe(
|
||||
getFreeTrialWarning$ = (
|
||||
organization: Organization,
|
||||
bypassCache: boolean = false,
|
||||
): Observable<OrganizationFreeTrialWarning> =>
|
||||
this.getWarning$(organization, (response) => response.freeTrial, bypassCache).pipe(
|
||||
map((warning) => {
|
||||
const { remainingTrialDays } = warning;
|
||||
|
||||
@@ -76,9 +65,12 @@ export class OrganizationWarningsService {
|
||||
}),
|
||||
);
|
||||
|
||||
getResellerRenewalWarning$ = (organization: Organization): Observable<ResellerRenewalWarning> =>
|
||||
this.getWarning$(organization, (response) => response.resellerRenewal).pipe(
|
||||
map((warning): ResellerRenewalWarning | null => {
|
||||
getResellerRenewalWarning$ = (
|
||||
organization: Organization,
|
||||
bypassCache: boolean = false,
|
||||
): Observable<OrganizationResellerRenewalWarning> =>
|
||||
this.getWarning$(organization, (response) => response.resellerRenewal, bypassCache).pipe(
|
||||
map((warning): OrganizationResellerRenewalWarning | null => {
|
||||
switch (warning.type) {
|
||||
case "upcoming": {
|
||||
return {
|
||||
@@ -116,8 +108,11 @@ export class OrganizationWarningsService {
|
||||
filter((result): result is NonNullable<typeof result> => result !== null),
|
||||
);
|
||||
|
||||
showInactiveSubscriptionDialog$ = (organization: Organization): Observable<void> =>
|
||||
this.getWarning$(organization, (response) => response.inactiveSubscription).pipe(
|
||||
showInactiveSubscriptionDialog$ = (
|
||||
organization: Organization,
|
||||
bypassCache: boolean = false,
|
||||
): Observable<void> =>
|
||||
this.getWarning$(organization, (response) => response.inactiveSubscription, bypassCache).pipe(
|
||||
switchMap(async (warning) => {
|
||||
switch (warning.resolution) {
|
||||
case "contact_provider": {
|
||||
@@ -142,8 +137,14 @@ export class OrganizationWarningsService {
|
||||
cancelButtonText: this.i18nService.t("close"),
|
||||
});
|
||||
if (confirmed) {
|
||||
const managePaymentDetailsOutsideCheckout = await this.configService.getFeatureFlag(
|
||||
FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout,
|
||||
);
|
||||
const route = managePaymentDetailsOutsideCheckout
|
||||
? "payment-details"
|
||||
: "payment-method";
|
||||
await this.router.navigate(
|
||||
["organizations", `${organization.id}`, "billing", "payment-method"],
|
||||
["organizations", `${organization.id}`, "billing", route],
|
||||
{
|
||||
state: { launchPaymentModalAutomatically: true },
|
||||
},
|
||||
@@ -177,14 +178,15 @@ export class OrganizationWarningsService {
|
||||
}),
|
||||
);
|
||||
|
||||
private getResponse$ = (organization: Organization): Observable<OrganizationWarningsResponse> => {
|
||||
private getResponse$ = (
|
||||
organization: Organization,
|
||||
bypassCache: boolean = false,
|
||||
): Observable<OrganizationWarningsResponse> => {
|
||||
const existing = this.cache$.get(organization.id as OrganizationId);
|
||||
if (existing) {
|
||||
if (existing && !bypassCache) {
|
||||
return existing;
|
||||
}
|
||||
const response$ = from(this.organizationBillingApiService.getWarnings(organization.id)).pipe(
|
||||
shareReplay({ bufferSize: 1, refCount: false }),
|
||||
);
|
||||
const response$ = from(this.organizationBillingApiService.getWarnings(organization.id));
|
||||
this.cache$.set(organization.id as OrganizationId, response$);
|
||||
return response$;
|
||||
};
|
||||
@@ -192,8 +194,9 @@ export class OrganizationWarningsService {
|
||||
private getWarning$ = <T>(
|
||||
organization: Organization,
|
||||
extract: (response: OrganizationWarningsResponse) => T | null | undefined,
|
||||
bypassCache: boolean = false,
|
||||
): Observable<T> =>
|
||||
this.getResponse$(organization).pipe(
|
||||
this.getResponse$(organization, bypassCache).pipe(
|
||||
map(extract),
|
||||
takeWhile((warning): warning is T => !!warning),
|
||||
take(1),
|
||||
1
apps/web/src/app/billing/warnings/types/index.ts
Normal file
1
apps/web/src/app/billing/warnings/types/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from "./organization-warnings";
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
|
||||
|
||||
export type OrganizationFreeTrialWarning = {
|
||||
organization: Pick<Organization, "id" & "name">;
|
||||
message: string;
|
||||
};
|
||||
|
||||
export type OrganizationResellerRenewalWarning = {
|
||||
type: "info" | "warning";
|
||||
message: string;
|
||||
};
|
||||
@@ -8,6 +8,7 @@ import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
|
||||
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
||||
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
||||
import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
||||
import { MessageListener } from "@bitwarden/common/platform/messaging";
|
||||
@@ -87,6 +88,10 @@ describe("VaultBannersComponent", () => {
|
||||
allMessages$: messageSubject.asObservable(),
|
||||
}),
|
||||
},
|
||||
{
|
||||
provide: ConfigService,
|
||||
useValue: mock<ConfigService>(),
|
||||
},
|
||||
],
|
||||
})
|
||||
.overrideProvider(VaultBannersService, { useValue: bannerService })
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import { Component, Input, OnInit } from "@angular/core";
|
||||
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
|
||||
import { Router } from "@angular/router";
|
||||
import { firstValueFrom, map, Observable, switchMap, filter } from "rxjs";
|
||||
import { filter, firstValueFrom, map, Observable, switchMap } from "rxjs";
|
||||
|
||||
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { MessageListener } from "@bitwarden/common/platform/messaging";
|
||||
import { UserId } from "@bitwarden/common/types/guid";
|
||||
@@ -35,6 +37,7 @@ export class VaultBannersComponent implements OnInit {
|
||||
private i18nService: I18nService,
|
||||
private accountService: AccountService,
|
||||
private messageListener: MessageListener,
|
||||
private configService: ConfigService,
|
||||
) {
|
||||
this.premiumBannerVisible$ = this.activeUserId$.pipe(
|
||||
filter((userId): userId is UserId => userId != null),
|
||||
@@ -68,12 +71,16 @@ export class VaultBannersComponent implements OnInit {
|
||||
}
|
||||
|
||||
async navigateToPaymentMethod(organizationId: string): Promise<void> {
|
||||
const managePaymentDetailsOutsideCheckout = await this.configService.getFeatureFlag(
|
||||
FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout,
|
||||
);
|
||||
const route = managePaymentDetailsOutsideCheckout ? "payment-details" : "payment-method";
|
||||
const navigationExtras = {
|
||||
state: { launchPaymentModalAutomatically: true },
|
||||
};
|
||||
|
||||
await this.router.navigate(
|
||||
["organizations", organizationId, "billing", "payment-method"],
|
||||
["organizations", organizationId, "billing", route],
|
||||
navigationExtras,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10802,5 +10802,53 @@
|
||||
"billingAddressRequiredToAddCredit": {
|
||||
"message": "Billing address required to add credit.",
|
||||
"description": "Error message shown when trying to add credit to a trialing organization without a billing address."
|
||||
},
|
||||
"billingAddress": {
|
||||
"message": "Billing address"
|
||||
},
|
||||
"addBillingAddress": {
|
||||
"message": "Add billing address"
|
||||
},
|
||||
"editBillingAddress": {
|
||||
"message": "Edit billing address"
|
||||
},
|
||||
"noBillingAddress": {
|
||||
"message": "No address on file."
|
||||
},
|
||||
"billingAddressUpdated": {
|
||||
"message": "Your billing address has been updated."
|
||||
},
|
||||
"paymentDetails": {
|
||||
"message": "Payment details"
|
||||
},
|
||||
"paymentMethodUpdated": {
|
||||
"message": "Your payment method has been updated."
|
||||
},
|
||||
"bankAccountVerified": {
|
||||
"message": "Your bank account has been verified."
|
||||
},
|
||||
"availableCreditAppliedToInvoice": {
|
||||
"message": "Any available credit will be automatically applied towards invoices generated for this account."
|
||||
},
|
||||
"mustBePositiveNumber": {
|
||||
"message": "Must be a positive number"
|
||||
},
|
||||
"cardSecurityCode": {
|
||||
"message": "Card security code"
|
||||
},
|
||||
"cardSecurityCodeDescription": {
|
||||
"message": "Card security code, also known as CVV or CVC, is typically a 3 digit number printed on the back of your credit card or 4 digit number printed on the front above your card number."
|
||||
},
|
||||
"verifyBankAccountWarning": {
|
||||
"message": "Payment with a bank account is only available to customers in the United States. You will be required to verify your bank account. We will make a micro-deposit within the next 1-2 business days. Enter the statement descriptor code from this deposit on the Payment Details page to verify the bank account. Failure to verify the bank account will result in a missed payment and your subscription being suspended."
|
||||
},
|
||||
"taxId": {
|
||||
"message": "Tax ID: $TAX_ID$",
|
||||
"placeholders": {
|
||||
"tax_id": {
|
||||
"content": "$1",
|
||||
"example": "12-3456789"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,6 +31,12 @@
|
||||
*ngIf="canAccessBilling$ | async"
|
||||
>
|
||||
<bit-nav-item [text]="'subscription' | i18n" route="billing/subscription"></bit-nav-item>
|
||||
@if (managePaymentDetailsOutsideCheckout$ | async) {
|
||||
<bit-nav-item
|
||||
[text]="'paymentDetails' | i18n"
|
||||
route="billing/payment-details"
|
||||
></bit-nav-item>
|
||||
}
|
||||
<bit-nav-item [text]="'billingHistory' | i18n" route="billing/history"></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
<bit-nav-item
|
||||
|
||||
@@ -10,6 +10,8 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
|
||||
import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
|
||||
import { ProviderStatusType, ProviderType } from "@bitwarden/common/admin-console/enums";
|
||||
import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { Icon, IconModule } from "@bitwarden/components";
|
||||
import { BusinessUnitPortalLogo } from "@bitwarden/web-vault/app/admin-console/icons/business-unit-portal-logo.icon";
|
||||
import { ProviderPortalLogo } from "@bitwarden/web-vault/app/admin-console/icons/provider-portal-logo";
|
||||
@@ -32,10 +34,12 @@ export class ProvidersLayoutComponent implements OnInit, OnDestroy {
|
||||
protected canAccessBilling$: Observable<boolean>;
|
||||
|
||||
protected clientsTranslationKey$: Observable<string>;
|
||||
protected managePaymentDetailsOutsideCheckout$: Observable<boolean>;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private providerService: ProviderService,
|
||||
private configService: ConfigService,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
@@ -69,6 +73,10 @@ export class ProvidersLayoutComponent implements OnInit, OnDestroy {
|
||||
provider.providerType === ProviderType.BusinessUnit ? "businessUnits" : "clients",
|
||||
),
|
||||
);
|
||||
|
||||
this.managePaymentDetailsOutsideCheckout$ = this.configService.getFeatureFlag$(
|
||||
FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout,
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
hasConsolidatedBilling,
|
||||
ProviderBillingHistoryComponent,
|
||||
} from "../../billing/providers";
|
||||
import { ProviderPaymentDetailsComponent } from "../../billing/providers/payment-details/provider-payment-details.component";
|
||||
import { SetupBusinessUnitComponent } from "../../billing/providers/setup/setup-business-unit.component";
|
||||
|
||||
import { ClientsComponent } from "./clients/clients.component";
|
||||
@@ -142,6 +143,14 @@ const routes: Routes = [
|
||||
titleId: "subscription",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "payment-details",
|
||||
component: ProviderPaymentDetailsComponent,
|
||||
canActivate: [providerPermissionsGuard()],
|
||||
data: {
|
||||
titleId: "paymentDetails",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "history",
|
||||
component: ProviderBillingHistoryComponent,
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<app-header></app-header>
|
||||
<bit-container>
|
||||
@let view = view$ | async;
|
||||
@if (!view) {
|
||||
<ng-container>
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin tw-text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
|
||||
</ng-container>
|
||||
} @else {
|
||||
<ng-container>
|
||||
<app-display-payment-method
|
||||
[owner]="view.provider"
|
||||
[paymentMethod]="view.paymentMethod"
|
||||
(updated)="setPaymentMethod($event)"
|
||||
></app-display-payment-method>
|
||||
|
||||
<app-display-billing-address
|
||||
[owner]="view.provider"
|
||||
[billingAddress]="view.billingAddress"
|
||||
(updated)="setBillingAddress($event)"
|
||||
></app-display-billing-address>
|
||||
|
||||
<app-display-account-credit
|
||||
[owner]="view.provider"
|
||||
[credit]="view.credit"
|
||||
></app-display-account-credit>
|
||||
</ng-container>
|
||||
}
|
||||
</bit-container>
|
||||
@@ -0,0 +1,133 @@
|
||||
import { Component } from "@angular/core";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import {
|
||||
BehaviorSubject,
|
||||
EMPTY,
|
||||
filter,
|
||||
from,
|
||||
map,
|
||||
merge,
|
||||
Observable,
|
||||
shareReplay,
|
||||
switchMap,
|
||||
tap,
|
||||
} from "rxjs";
|
||||
import { catchError } from "rxjs/operators";
|
||||
|
||||
import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import {
|
||||
DisplayAccountCreditComponent,
|
||||
DisplayBillingAddressComponent,
|
||||
DisplayPaymentMethodComponent,
|
||||
} from "@bitwarden/web-vault/app/billing/payment/components";
|
||||
import {
|
||||
BillingAddress,
|
||||
MaskedPaymentMethod,
|
||||
} from "@bitwarden/web-vault/app/billing/payment/types";
|
||||
import { BillingClient } from "@bitwarden/web-vault/app/billing/services";
|
||||
import { BillableEntity, providerToBillableEntity } from "@bitwarden/web-vault/app/billing/types";
|
||||
import { HeaderModule } from "@bitwarden/web-vault/app/layouts/header/header.module";
|
||||
import { SharedModule } from "@bitwarden/web-vault/app/shared";
|
||||
|
||||
class RedirectError {
|
||||
constructor(
|
||||
public path: string[],
|
||||
public relativeTo: ActivatedRoute,
|
||||
) {}
|
||||
}
|
||||
|
||||
type View = {
|
||||
provider: BillableEntity;
|
||||
paymentMethod: MaskedPaymentMethod | null;
|
||||
billingAddress: BillingAddress | null;
|
||||
credit: number | null;
|
||||
};
|
||||
|
||||
@Component({
|
||||
templateUrl: "./provider-payment-details.component.html",
|
||||
standalone: true,
|
||||
imports: [
|
||||
DisplayBillingAddressComponent,
|
||||
DisplayAccountCreditComponent,
|
||||
DisplayPaymentMethodComponent,
|
||||
HeaderModule,
|
||||
SharedModule,
|
||||
],
|
||||
providers: [BillingClient],
|
||||
})
|
||||
export class ProviderPaymentDetailsComponent {
|
||||
private viewState$ = new BehaviorSubject<View | null>(null);
|
||||
|
||||
private load$: Observable<View> = this.activatedRoute.params.pipe(
|
||||
switchMap(({ providerId }) => this.providerService.get$(providerId)),
|
||||
switchMap((provider) =>
|
||||
this.configService
|
||||
.getFeatureFlag$(FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout)
|
||||
.pipe(
|
||||
map((managePaymentDetailsOutsideCheckout) => {
|
||||
if (!managePaymentDetailsOutsideCheckout) {
|
||||
throw new RedirectError(["../subscription"], this.activatedRoute);
|
||||
}
|
||||
return provider;
|
||||
}),
|
||||
),
|
||||
),
|
||||
providerToBillableEntity,
|
||||
switchMap(async (provider) => {
|
||||
const [paymentMethod, billingAddress, credit] = await Promise.all([
|
||||
this.billingClient.getPaymentMethod(provider),
|
||||
this.billingClient.getBillingAddress(provider),
|
||||
this.billingClient.getCredit(provider),
|
||||
]);
|
||||
|
||||
return {
|
||||
provider,
|
||||
paymentMethod,
|
||||
billingAddress,
|
||||
credit,
|
||||
};
|
||||
}),
|
||||
shareReplay({ bufferSize: 1, refCount: false }),
|
||||
catchError((error: unknown) => {
|
||||
if (error instanceof RedirectError) {
|
||||
return from(this.router.navigate(error.path, { relativeTo: error.relativeTo })).pipe(
|
||||
switchMap(() => EMPTY),
|
||||
);
|
||||
}
|
||||
throw error;
|
||||
}),
|
||||
);
|
||||
|
||||
view$: Observable<View> = merge(
|
||||
this.load$.pipe(tap((view) => this.viewState$.next(view))),
|
||||
this.viewState$.pipe(filter((view): view is View => view !== null)),
|
||||
).pipe(shareReplay({ bufferSize: 1, refCount: true }));
|
||||
|
||||
constructor(
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private billingClient: BillingClient,
|
||||
private configService: ConfigService,
|
||||
private providerService: ProviderService,
|
||||
private router: Router,
|
||||
) {}
|
||||
|
||||
setBillingAddress = (billingAddress: BillingAddress) => {
|
||||
if (this.viewState$.value) {
|
||||
this.viewState$.next({
|
||||
...this.viewState$.value,
|
||||
billingAddress,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
setPaymentMethod = (paymentMethod: MaskedPaymentMethod) => {
|
||||
if (this.viewState$.value) {
|
||||
this.viewState$.next({
|
||||
...this.viewState$.value,
|
||||
paymentMethod,
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -62,49 +62,51 @@
|
||||
</bit-table>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Account Credit -->
|
||||
<bit-section>
|
||||
<h2 bitTypography="h2">
|
||||
{{ "accountCredit" | i18n }}
|
||||
</h2>
|
||||
<p class="tw-text-lg tw-font-bold">{{ subscription.accountCredit | currency: "$" }}</p>
|
||||
<p bitTypography="body1">{{ "creditAppliedDesc" | i18n }}</p>
|
||||
</bit-section>
|
||||
<!-- Payment Method -->
|
||||
<bit-section>
|
||||
<h2 bitTypography="h2">{{ "paymentMethod" | i18n }}</h2>
|
||||
<p *ngIf="!subscription.paymentSource" bitTypography="body1">
|
||||
{{ "noPaymentMethod" | i18n }}
|
||||
</p>
|
||||
<ng-container *ngIf="subscription.paymentSource">
|
||||
<app-verify-bank-account
|
||||
*ngIf="subscription.paymentSource.needsVerification"
|
||||
[onSubmit]="verifyBankAccount"
|
||||
(submitted)="load()"
|
||||
>
|
||||
</app-verify-bank-account>
|
||||
<p>
|
||||
<i class="bwi bwi-fw" [ngClass]="paymentSourceClasses"></i>
|
||||
{{ subscription.paymentSource.description }}
|
||||
<span *ngIf="subscription.paymentSource.needsVerification"
|
||||
>- {{ "unverified" | i18n }}</span
|
||||
>
|
||||
@if (!managePaymentDetailsOutsideCheckout) {
|
||||
<!-- Account Credit -->
|
||||
<bit-section>
|
||||
<h2 bitTypography="h2">
|
||||
{{ "accountCredit" | i18n }}
|
||||
</h2>
|
||||
<p class="tw-text-lg tw-font-bold">{{ subscription.accountCredit | currency: "$" }}</p>
|
||||
<p bitTypography="body1">{{ "creditAppliedDesc" | i18n }}</p>
|
||||
</bit-section>
|
||||
<!-- Payment Method -->
|
||||
<bit-section>
|
||||
<h2 bitTypography="h2">{{ "paymentMethod" | i18n }}</h2>
|
||||
<p *ngIf="!subscription.paymentSource" bitTypography="body1">
|
||||
{{ "noPaymentMethod" | i18n }}
|
||||
</p>
|
||||
</ng-container>
|
||||
<button type="button" bitButton buttonType="secondary" [bitAction]="updatePaymentMethod">
|
||||
{{ updatePaymentSourceButtonText }}
|
||||
</button>
|
||||
</bit-section>
|
||||
<!-- Tax Information -->
|
||||
<bit-section>
|
||||
<h2 bitTypography="h2" class="tw-mt-16">{{ "taxInformation" | i18n }}</h2>
|
||||
<p>{{ "taxInformationDesc" | i18n }}</p>
|
||||
<app-manage-tax-information
|
||||
*ngIf="subscription.taxInformation"
|
||||
[startWith]="TaxInformation.from(subscription.taxInformation)"
|
||||
[onSubmit]="updateTaxInformation"
|
||||
(taxInformationUpdated)="load()"
|
||||
/>
|
||||
</bit-section>
|
||||
<ng-container *ngIf="subscription.paymentSource">
|
||||
<app-verify-bank-account
|
||||
*ngIf="subscription.paymentSource.needsVerification"
|
||||
[onSubmit]="verifyBankAccount"
|
||||
(submitted)="load()"
|
||||
>
|
||||
</app-verify-bank-account>
|
||||
<p>
|
||||
<i class="bwi bwi-fw" [ngClass]="paymentSourceClasses"></i>
|
||||
{{ subscription.paymentSource.description }}
|
||||
<span *ngIf="subscription.paymentSource.needsVerification"
|
||||
>- {{ "unverified" | i18n }}</span
|
||||
>
|
||||
</p>
|
||||
</ng-container>
|
||||
<button type="button" bitButton buttonType="secondary" [bitAction]="updatePaymentMethod">
|
||||
{{ updatePaymentSourceButtonText }}
|
||||
</button>
|
||||
</bit-section>
|
||||
<!-- Tax Information -->
|
||||
<bit-section>
|
||||
<h2 bitTypography="h2" class="tw-mt-16">{{ "taxInformation" | i18n }}</h2>
|
||||
<p>{{ "taxInformationDesc" | i18n }}</p>
|
||||
<app-manage-tax-information
|
||||
*ngIf="subscription.taxInformation"
|
||||
[startWith]="TaxInformation.from(subscription.taxInformation)"
|
||||
[onSubmit]="updateTaxInformation"
|
||||
(taxInformationUpdated)="load()"
|
||||
/>
|
||||
</bit-section>
|
||||
}
|
||||
</ng-container>
|
||||
</bit-container>
|
||||
|
||||
@@ -13,6 +13,8 @@ import {
|
||||
ProviderPlanResponse,
|
||||
ProviderSubscriptionResponse,
|
||||
} from "@bitwarden/common/billing/models/response/provider-subscription-response";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { DialogService, ToastService } from "@bitwarden/components";
|
||||
import { BillingNotificationService } from "@bitwarden/web-vault/app/billing/services/billing-notification.service";
|
||||
@@ -34,6 +36,7 @@ export class ProviderSubscriptionComponent implements OnInit, OnDestroy {
|
||||
protected loading: boolean;
|
||||
private destroy$ = new Subject<void>();
|
||||
protected totalCost: number;
|
||||
protected managePaymentDetailsOutsideCheckout: boolean;
|
||||
|
||||
protected readonly TaxInformation = TaxInformation;
|
||||
|
||||
@@ -44,6 +47,7 @@ export class ProviderSubscriptionComponent implements OnInit, OnDestroy {
|
||||
private billingNotificationService: BillingNotificationService,
|
||||
private dialogService: DialogService,
|
||||
private toastService: ToastService,
|
||||
private configService: ConfigService,
|
||||
) {}
|
||||
|
||||
async ngOnInit() {
|
||||
@@ -51,6 +55,9 @@ export class ProviderSubscriptionComponent implements OnInit, OnDestroy {
|
||||
.pipe(
|
||||
concatMap(async (params) => {
|
||||
this.providerId = params.providerId;
|
||||
this.managePaymentDetailsOutsideCheckout = await this.configService.getFeatureFlag(
|
||||
FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout,
|
||||
);
|
||||
await this.load();
|
||||
this.firstLoaded = true;
|
||||
}),
|
||||
|
||||
@@ -29,6 +29,8 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga
|
||||
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
||||
import { getUserId } from "@bitwarden/common/auth/services/account.service";
|
||||
import { OrganizationBillingServiceAbstraction } from "@bitwarden/common/billing/abstractions";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
|
||||
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
||||
@@ -129,6 +131,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
|
||||
private trialFlowService: TrialFlowService,
|
||||
private organizationBillingService: OrganizationBillingServiceAbstraction,
|
||||
private billingNotificationService: BillingNotificationService,
|
||||
private configService: ConfigService,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
@@ -250,12 +253,13 @@ export class OverviewComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
async navigateToPaymentMethod() {
|
||||
await this.router.navigate(
|
||||
["organizations", `${this.organizationId}`, "billing", "payment-method"],
|
||||
{
|
||||
state: { launchPaymentModalAutomatically: true },
|
||||
},
|
||||
const managePaymentDetailsOutsideCheckout = await this.configService.getFeatureFlag(
|
||||
FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout,
|
||||
);
|
||||
const route = managePaymentDetailsOutsideCheckout ? "payment-details" : "payment-method";
|
||||
await this.router.navigate(["organizations", `${this.organizationId}`, "billing", route], {
|
||||
state: { launchPaymentModalAutomatically: true },
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
|
||||
@@ -34,6 +34,7 @@ export enum FeatureFlag {
|
||||
PM19956_RequireProviderPaymentMethodDuringSetup = "pm-19956-require-provider-payment-method-during-setup",
|
||||
UseOrganizationWarningsService = "use-organization-warnings-service",
|
||||
AllowTrialLengthZero = "pm-20322-allow-trial-length-0",
|
||||
PM21881_ManagePaymentDetailsOutsideCheckout = "pm-21881-manage-payment-details-outside-checkout",
|
||||
|
||||
/* Data Insights and Reporting */
|
||||
EnableRiskInsightsNotifications = "enable-risk-insights-notifications",
|
||||
@@ -116,6 +117,7 @@ export const DefaultFeatureFlagValue = {
|
||||
[FeatureFlag.PM19956_RequireProviderPaymentMethodDuringSetup]: FALSE,
|
||||
[FeatureFlag.UseOrganizationWarningsService]: FALSE,
|
||||
[FeatureFlag.AllowTrialLengthZero]: FALSE,
|
||||
[FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout]: FALSE,
|
||||
|
||||
/* Key Management */
|
||||
[FeatureFlag.PrivateKeyRegeneration]: FALSE,
|
||||
|
||||
Reference in New Issue
Block a user