Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-10-06 05:28:51 +02:00
Code Issues Projects Releases Wiki Activity

[AC-1939] Manage provider payment information (#9415)

Browse Source 
* Added select-payment-method.component in shared lib

Because we're going to be implementing the same functionality for providers and orgs/users, I wanted to start moving some of this shared functionality into libs so it can be accessed in both web and bit-web. Additionally, the Stripe and Braintree functionality has been moved into their own services for more central management.

* Added generalized manage-tax-information component to shared lib

* Added generalized add-account-credit-dialog component to shared libs

* Added generalized verify-bank-account component to shared libs

* Added dialog for selection of provider payment method

* Added provider-payment-method component

* Added provider-payment-method component to provider layout
This commit is contained in:
Alex Morask 2024-06-03 11:01:14 -04:00 committed by GitHub
parent aee9720a6d
commit 28de91888a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
42 changed files with 1974 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/web/src/locales/en/messages.json
View File

@ -8297,5 +8297,20 @@
},
"allLoginRequestsApproved": {
"message": "All login requests approved"
},
"payPal": {
"message": "PayPal"
},
"bitcoin": {
"message": "Bitcoin"
},
"updatedTaxInformation": {
"message": "Updated tax information"
},
"unverified": {
"message": "Unverified"
},
"verified": {
"message": "Verified"
}
}

1
bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html
View File

@ -33,6 +33,7 @@
*ngIf="canAccessBilling$ | async"
>
<bit-nav-item [text]="'subscription' | i18n" route="billing/subscription"></bit-nav-item>
<bit-nav-item [text]="'paymentMethod' | i18n" route="billing/payment-method"></bit-nav-item>
</bit-nav-group>
<bit-nav-item
icon="bwi-cogs"

15
bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts
View File

@ -7,8 +7,12 @@ import { ProvidersComponent } from "@bitwarden/web-vault/app/admin-console/provi
import { FrontendLayoutComponent } from "@bitwarden/web-vault/app/layouts/frontend-layout.component";
import { UserLayoutComponent } from "@bitwarden/web-vault/app/layouts/user-layout.component";
import { ProviderSubscriptionComponent, hasConsolidatedBilling } from "../../billing/providers";
import { ManageClientOrganizationsComponent } from "../../billing/providers/clients";
import {
ManageClientOrganizationsComponent,
ProviderSubscriptionComponent,
hasConsolidatedBilling,
ProviderPaymentMethodComponent,
} from "../../billing/providers";
import { ClientsComponent } from "./clients/clients.component";
import { CreateOrganizationComponent } from "./clients/create-organization.component";
@ -118,6 +122,13 @@ const routes: Routes = [
titleId: "subscription",
},
},
{
path: "payment-method",
component: ProviderPaymentMethodComponent,
data: {
titleId: "paymentMethod",
},
},
],
},
{

10
bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts
View File

@ -9,13 +9,15 @@ import { OrganizationPlansComponent, TaxInfoComponent } from "@bitwarden/web-vau
import { PaymentMethodWarningsModule } from "@bitwarden/web-vault/app/billing/shared";
import { OssModule } from "@bitwarden/web-vault/app/oss.module";
import { ProviderSubscriptionComponent } from "../../billing/providers";
import {
CreateClientOrganizationComponent,
ManageClientOrganizationsComponent,
ManageClientOrganizationNameComponent,
ManageClientOrganizationsComponent,
ManageClientOrganizationSubscriptionComponent,
} from "../../billing/providers/clients";
ProviderPaymentMethodComponent,
ProviderSelectPaymentMethodDialogComponent,
ProviderSubscriptionComponent,
} from "../../billing/providers";
import { AddOrganizationComponent } from "./clients/add-organization.component";
import { ClientsComponent } from "./clients/clients.component";
@ -66,6 +68,8 @@ import { SetupComponent } from "./setup/setup.component";
ManageClientOrganizationNameComponent,
ManageClientOrganizationSubscriptionComponent,
ProviderSubscriptionComponent,
ProviderSelectPaymentMethodDialogComponent,
ProviderPaymentMethodComponent,
],
providers: [WebProviderService, ProviderPermissionsGuard],
})

8
bitwarden_license/bit-web/src/app/billing/providers/index.ts
View File

@ -1,2 +1,8 @@
export * from "./clients/create-client-organization.component";
export * from "./clients/manage-client-organization-name.component";
export * from "./clients/manage-client-organization-subscription.component";
export * from "./clients/manage-client-organizations.component";
export * from "./guards/has-consolidated-billing.guard";
export * from "./provider-subscription.component";
export * from "./payment-method/provider-select-payment-method-dialog.component";
export * from "./payment-method/provider-payment-method.component";
export * from "./subscription/provider-subscription.component";

52
bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-payment-method.component.html Normal file
View File

@ -0,0 +1,52 @@
<app-header></app-header>
<ng-container *ngIf="loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
</ng-container>
<bit-container *ngIf="!loading">
<!-- Account Credit -->
<ng-container>
<h2 bitTypography="h2">
{{ "accountCredit" | i18n }}
</h2>
<p class="tw-text-lg tw-font-bold">{{ accountCredit | currency: "$" }}</p>
<p bitTypography="body1">{{ "creditAppliedDesc" | i18n }}</p>
<button type="button" bitButton buttonType="secondary" [bitAction]="addAccountCredit">
{{ "addCredit" | i18n }}
</button>
</ng-container>
<!-- Payment Method -->
<ng-container>
<h2 class="spaced-header">{{ "paymentMethod" | i18n }}</h2>
<p *ngIf="!hasPaymentMethod">{{ "noPaymentMethod" | i18n }}</p>
<app-verify-bank-account
[onSubmit]="verifyBankAccount"
(verificationSubmitted)="onDataUpdated()"
*ngIf="hasUnverifiedPaymentMethod"
/>
<ng-container *ngIf="hasPaymentMethod">
<p>
<i class="bwi bwi-fw" [ngClass]="paymentMethodClass"></i>
{{ paymentMethodDescription }}
</p>
</ng-container>
<button type="button" bitButton buttonType="secondary" [bitAction]="changePaymentMethod">
{{ (hasPaymentMethod ? "changePaymentMethod" : "addPaymentMethod") | i18n }}
</button>
</ng-container>
<!-- Tax Information -->
<ng-container>
<h2 class="spaced-header">{{ "taxInformation" | i18n }}</h2>
<p>{{ "taxInformationDesc" | i18n }}</p>
<app-manage-tax-information
*ngIf="taxInformation"
[taxInformation]="taxInformation"
[onSubmit]="updateTaxInformation"
(taxInformationUpdated)="onDataUpdated()"
/>
</ng-container>
</bit-container>

140
bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-payment-method.component.ts Normal file
View File

@ -0,0 +1,140 @@
import { Component, OnDestroy, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { from, lastValueFrom, Subject, switchMap } from "rxjs";
import { takeUntil } from "rxjs/operators";
import { openAddAccountCreditDialog } from "@bitwarden/angular/billing/components";
import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
import { PaymentMethodType } from "@bitwarden/common/billing/enums";
import { MaskedPaymentMethod, TaxInformation } from "@bitwarden/common/billing/models/domain";
import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
import { VerifyBankAccountRequest } from "@bitwarden/common/billing/models/request/verify-bank-account.request";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { DialogService, ToastService } from "@bitwarden/components";
import {
openProviderSelectPaymentMethodDialog,
ProviderSelectPaymentMethodDialogResultType,
} from "./provider-select-payment-method-dialog.component";
@Component({
selector: "app-provider-payment-method",
templateUrl: "./provider-payment-method.component.html",
})
export class ProviderPaymentMethodComponent implements OnInit, OnDestroy {
protected providerId: string;
protected loading: boolean;
protected accountCredit: number;
protected maskedPaymentMethod: MaskedPaymentMethod;
protected taxInformation: TaxInformation;
private destroy$ = new Subject<void>();
constructor(
private activatedRoute: ActivatedRoute,
private billingApiService: BillingApiServiceAbstraction,
private dialogService: DialogService,
private i18nService: I18nService,
private toastService: ToastService,
) {}
addAccountCredit = () =>
openAddAccountCreditDialog(this.dialogService, {
data: {
providerId: this.providerId,
},
});
changePaymentMethod = async () => {
const dialogRef = openProviderSelectPaymentMethodDialog(this.dialogService, {
data: {
providerId: this.providerId,
},
});
const result = await lastValueFrom(dialogRef.closed);
if (result == ProviderSelectPaymentMethodDialogResultType.Submitted) {
await this.load();
}
};
async load() {
this.loading = true;
const paymentInformation = await this.billingApiService.getProviderPaymentInformation(
this.providerId,
);
this.accountCredit = paymentInformation.accountCredit;
this.maskedPaymentMethod = MaskedPaymentMethod.from(paymentInformation.paymentMethod);
this.taxInformation = TaxInformation.from(paymentInformation.taxInformation);
this.loading = false;
}
onDataUpdated = async () => await this.load();
updateTaxInformation = async (taxInformation: TaxInformation) => {
const request = ExpandedTaxInfoUpdateRequest.From(taxInformation);
await this.billingApiService.updateProviderTaxInformation(this.providerId, request);
this.toastService.showToast({
variant: "success",
title: null,
message: this.i18nService.t("updatedTaxInformation"),
});
};
verifyBankAccount = async (amount1: number, amount2: number) => {
const request = new VerifyBankAccountRequest(amount1, amount2);
await this.billingApiService.verifyProviderBankAccount(this.providerId, request);
};
ngOnInit() {
this.activatedRoute.params
.pipe(
switchMap(({ providerId }) => {
this.providerId = providerId;
return from(this.load());
}),
takeUntil(this.destroy$),
)
.subscribe();
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
protected get hasPaymentMethod(): boolean {
return !!this.maskedPaymentMethod;
}
protected get hasUnverifiedPaymentMethod(): boolean {
return !!this.maskedPaymentMethod && this.maskedPaymentMethod.needsVerification;
}
protected get paymentMethodClass(): string[] {
switch (this.maskedPaymentMethod.type) {
case PaymentMethodType.Card:
return ["bwi-credit-card"];
case PaymentMethodType.BankAccount:
return ["bwi-bank"];
case PaymentMethodType.PayPal:
return ["bwi-paypal tw-text-primary"];
default:
return [];
}
}
protected get paymentMethodDescription(): string {
let description = this.maskedPaymentMethod.description;
if (this.maskedPaymentMethod.type === PaymentMethodType.BankAccount) {
if (this.hasUnverifiedPaymentMethod) {
description += " - " + this.i18nService.t("unverified");
} else {
description += " - " + this.i18nService.t("verified");
}
}
return description;
}
}

18
bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-select-payment-method-dialog.component.html Normal file
View File

@ -0,0 +1,18 @@
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog dialogSize="large">
<span bitDialogTitle class="tw-font-semibold">
{{ "addPaymentMethod" | i18n }}
</span>
<ng-container bitDialogContent>
<app-select-payment-method [showAccountCredit]="false" />
</ng-container>
<ng-container bitDialogFooter>
<button bitButton bitFormButton buttonType="primary" type="submit">
{{ "submit" | i18n }}
</button>
<button bitButton buttonType="secondary" type="button" [bitDialogClose]="ResultType.Closed">
{{ "cancel" | i18n }}
</button>
</ng-container>
</bit-dialog>
</form>

60
bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-select-payment-method-dialog.component.ts Normal file
View File

@ -0,0 +1,60 @@
import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
import { Component, EventEmitter, Inject, Output, ViewChild } from "@angular/core";
import { FormGroup } from "@angular/forms";
import { SelectPaymentMethodComponent } from "@bitwarden/angular/billing/components";
import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
import { TokenizedPaymentMethodRequest } from "@bitwarden/common/billing/models/request/tokenized-payment-method.request";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { DialogService, ToastService } from "@bitwarden/components";
type ProviderSelectPaymentMethodDialogParams = {
providerId: string;
};
export enum ProviderSelectPaymentMethodDialogResultType {
Closed = "closed",
Submitted = "submitted",
}
export const openProviderSelectPaymentMethodDialog = (
dialogService: DialogService,
dialogConfig: DialogConfig<ProviderSelectPaymentMethodDialogParams>,
) =>
dialogService.open<
ProviderSelectPaymentMethodDialogResultType,
ProviderSelectPaymentMethodDialogParams
>(ProviderSelectPaymentMethodDialogComponent, dialogConfig);
@Component({
templateUrl: "provider-select-payment-method-dialog.component.html",
})
export class ProviderSelectPaymentMethodDialogComponent {
@ViewChild(SelectPaymentMethodComponent)
selectPaymentMethodComponent: SelectPaymentMethodComponent;
@Output() providerPaymentMethodUpdated = new EventEmitter();
protected readonly formGroup = new FormGroup({});
protected readonly ResultType = ProviderSelectPaymentMethodDialogResultType;
constructor(
private billingApiService: BillingApiServiceAbstraction,
@Inject(DIALOG_DATA) private dialogParams: ProviderSelectPaymentMethodDialogParams,
private dialogRef: DialogRef<ProviderSelectPaymentMethodDialogResultType>,
private i18nService: I18nService,
private toastService: ToastService,
) {}
submit = async () => {
const tokenizedPaymentMethod = await this.selectPaymentMethodComponent.tokenizePaymentMethod();
const request = TokenizedPaymentMethodRequest.From(tokenizedPaymentMethod);
await this.billingApiService.updateProviderPaymentMethod(this.dialogParams.providerId, request);
this.providerPaymentMethodUpdated.emit();
this.toastService.showToast({
variant: "success",
title: null,
message: this.i18nService.t("updatedPaymentMethod"),
});
this.dialogRef.close(this.ResultType.Submitted);
};
}

0
bitwarden_license/bit-web/src/app/billing/providers/provider-subscription.component.html → bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.html
View File

0
bitwarden_license/bit-web/src/app/billing/providers/provider-subscription.component.ts → bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.ts
View File

55
libs/angular/src/billing/components/add-account-credit-dialog/add-account-credit-dialog.component.html Normal file
View File

@ -0,0 +1,55 @@
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog [title]="'addCredit' | i18n">
<ng-container bitDialogContent>
<p bitTypography="body1">{{ "creditDelayed" | i18n }}</p>
<div class="tw-grid tw-grid-cols-2">
<bit-radio-group formControlName="paymentMethod">
<bit-radio-button [value]="paymentMethodType.PayPal">
<bit-label> <i class="bwi bwi-paypal"></i>{{ "payPal" | i18n }}</bit-label>
</bit-radio-button>
<bit-radio-button [value]="paymentMethodType.BitPay">
<bit-label> <i class="bwi bwi-bitcoin"></i>{{ "bitcoin" | i18n }}</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 type="number" formControlName="creditAmount" step="0.01" required />
<span bitPrefix>$USD</span>
</bit-form-field>
</div>
</ng-container>
<ng-container bitDialogFooter>
<button type="submit" bitButton bitFormButton buttonType="primary">
{{ "submit" | i18n }}
</button>
<button
type="button"
bitButton
bitFormButton
buttonType="secondary"
[bitDialogClose]="ResultType.Closed"
>
{{ "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="{{ payPalConfig.returnUrl }}" />
<input type="hidden" name="cancel_return" value="{{ payPalConfig.returnUrl }}" />
<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="{{ formGroup.get('creditAmount').value }}" />
<input type="hidden" name="custom" value="{{ payPalConfig.customField }}" />
<input type="hidden" name="item_name" value="Bitwarden Account Credit" />
<input type="hidden" name="item_number" value="{{ payPalConfig.subject }}" />
</form>

153
libs/angular/src/billing/components/add-account-credit-dialog/add-account-credit-dialog.component.ts Normal file
View File

@ -0,0 +1,153 @@
import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
import { Component, ElementRef, Inject, OnInit, ViewChild } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { firstValueFrom } from "rxjs";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
import { AccountInfo, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { PaymentMethodType } from "@bitwarden/common/billing/enums";
import { BitPayInvoiceRequest } from "@bitwarden/common/billing/models/request/bit-pay-invoice.request";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { UserId } from "@bitwarden/common/types/guid";
import { DialogService } from "@bitwarden/components";
export type AddAccountCreditDialogParams = {
organizationId?: string;
providerId?: string;
};
export enum AddAccountCreditDialogResultType {
Closed = "closed",
Submitted = "submitted",
}
export const openAddAccountCreditDialog = (
dialogService: DialogService,
dialogConfig: DialogConfig<AddAccountCreditDialogParams>,
) =>
dialogService.open<AddAccountCreditDialogResultType, AddAccountCreditDialogParams>(
AddAccountCreditDialogComponent,
dialogConfig,
);
type PayPalConfig = {
businessId?: string;
buttonAction?: string;
returnUrl?: string;
customField?: string;
subject?: string;
};
@Component({
templateUrl: "./add-account-credit-dialog.component.html",
})
export class AddAccountCreditDialogComponent implements OnInit {
@ViewChild("payPalForm", { read: ElementRef, static: true }) payPalForm: ElementRef;
protected formGroup = new FormGroup({
paymentMethod: new FormControl<PaymentMethodType>(PaymentMethodType.PayPal),
creditAmount: new FormControl<number>(null, [Validators.required, Validators.min(0.01)]),
});
protected payPalConfig: PayPalConfig;
protected ResultType = AddAccountCreditDialogResultType;
private organization?: Organization;
private provider?: Provider;
private user?: { id: UserId } & AccountInfo;
constructor(
private accountService: AccountService,
private apiService: ApiService,
private configService: ConfigService,
@Inject(DIALOG_DATA) private dialogParams: AddAccountCreditDialogParams,
private dialogRef: DialogRef<AddAccountCreditDialogResultType>,
private organizationService: OrganizationService,
private platformUtilsService: PlatformUtilsService,
private providerService: ProviderService,
) {
this.payPalConfig = process.env.PAYPAL_CONFIG as PayPalConfig;
}
protected readonly paymentMethodType = PaymentMethodType;
submit = async () => {
this.formGroup.markAllAsTouched();
if (this.formGroup.invalid) {
return;
}
if (this.formGroup.value.paymentMethod === PaymentMethodType.PayPal) {
this.payPalForm.nativeElement.submit();
return;
}
if (this.formGroup.value.paymentMethod === PaymentMethodType.BitPay) {
const request = this.getBitPayInvoiceRequest();
const bitPayUrl = await this.apiService.postBitPayInvoice(request);
this.platformUtilsService.launchUri(bitPayUrl);
return;
}
this.dialogRef.close(AddAccountCreditDialogResultType.Submitted);
};
async ngOnInit(): Promise<void> {
let payPalCustomField: string;
if (this.dialogParams.organizationId) {
this.formGroup.patchValue({
creditAmount: 20.0,
});
this.organization = await this.organizationService.get(this.dialogParams.organizationId);
payPalCustomField = "organization_id:" + this.organization.id;
this.payPalConfig.subject = this.organization.name;
} else if (this.dialogParams.providerId) {
this.formGroup.patchValue({
creditAmount: 20.0,
});
this.provider = await this.providerService.get(this.dialogParams.providerId);
payPalCustomField = "provider_id:" + this.provider.id;
this.payPalConfig.subject = this.provider.name;
} else {
this.formGroup.patchValue({
creditAmount: 10.0,
});
this.user = await firstValueFrom(this.accountService.activeAccount$);
payPalCustomField = "user_id:" + this.user.id;
this.payPalConfig.subject = this.user.email;
}
const region = await firstValueFrom(this.configService.cloudRegion$);
payPalCustomField += ",account_credit:1";
payPalCustomField += `,region:${region}`;
this.payPalConfig.customField = payPalCustomField;
this.payPalConfig.returnUrl = window.location.href;
}
getBitPayInvoiceRequest(): BitPayInvoiceRequest {
const request = new BitPayInvoiceRequest();
if (this.organization) {
request.name = this.organization.name;
request.organizationId = this.organization.id;
} else if (this.provider) {
request.name = this.provider.name;
request.providerId = this.provider.id;
} else {
request.email = this.user.email;
request.userId = this.user.id;
}
request.credit = true;
request.amount = this.formGroup.value.creditAmount;
request.returnUrl = window.location.href;
return request;
}
}

4
libs/angular/src/billing/components/index.ts Normal file
View File

@ -0,0 +1,4 @@
export * from "./add-account-credit-dialog/add-account-credit-dialog.component";
export * from "./manage-tax-information/manage-tax-information.component";
export * from "./select-payment-method/select-payment-method.component";
export * from "./verify-bank-account/verify-bank-account.component";

72
libs/angular/src/billing/components/manage-tax-information/manage-tax-information.component.html Normal file
View File

@ -0,0 +1,72 @@
<form [formGroup]="formGroup" [bitSubmit]="submit">
<div class="tw-grid tw-grid-cols-12 tw-gap-4">
<div class="tw-col-span-6">
<bit-form-field>
<bit-label>{{ "country" | i18n }}</bit-label>
<bit-select formControlName="country">
<bit-option
*ngFor="let country of countries"
[value]="country.value"
[disabled]="country.disabled"
[label]="country.name"
></bit-option>
</bit-select>
</bit-form-field>
</div>
<div class="tw-col-span-6">
<bit-form-field>
<bit-label>{{ "zipPostalCode" | i18n }}</bit-label>
<input bitInput type="text" formControlName="postalCode" autocomplete="postal-code" />
</bit-form-field>
</div>
<div class="tw-col-span-6" *ngIf="selectionSupportsAdditionalOptions">
<bit-form-control>
<input bitCheckbox type="checkbox" formControlName="includeTaxId" />
<bit-label>{{ "includeVAT" | i18n }}</bit-label>
</bit-form-control>
</div>
</div>
<div
class="tw-grid tw-grid-cols-12 tw-gap-4"
*ngIf="selectionSupportsAdditionalOptions && includeTaxIdIsSelected"
>
<div class="tw-col-span-6">
<bit-form-field>
<bit-label>{{ "taxIdNumber" | i18n }}</bit-label>
<input bitInput type="text" formControlName="taxId" />
</bit-form-field>
</div>
</div>
<div
class="tw-grid tw-grid-cols-12 tw-gap-4"
*ngIf="selectionSupportsAdditionalOptions && includeTaxIdIsSelected"
>
<div class="tw-col-span-6">
<bit-form-field disableMargin>
<bit-label>{{ "address1" | i18n }}</bit-label>
<input bitInput type="text" formControlName="line1" autocomplete="address-line1" />
</bit-form-field>
</div>
<div class="tw-col-span-6">
<bit-form-field disableMargin>
<bit-label>{{ "address2" | i18n }}</bit-label>
<input bitInput type="text" formControlName="line2" autocomplete="address-line2" />
</bit-form-field>
</div>
<div class="tw-col-span-6">
<bit-form-field>
<bit-label>{{ "cityTown" | i18n }}</bit-label>
<input bitInput type="text" formControlName="city" autocomplete="address-level2" />
</bit-form-field>
</div>
<div class="tw-col-span-6">
<bit-form-field>
<bit-label>{{ "stateProvince" | i18n }}</bit-label>
<input bitInput type="text" formControlName="state" autocomplete="address-level1" />
</bit-form-field>
</div>
</div>
<button *ngIf="!!onSubmit" bitButton bitFormButton buttonType="primary" type="submit">
{{ "submit" | i18n }}
</button>
</form>

406
libs/angular/src/billing/components/manage-tax-information/manage-tax-information.component.ts Normal file
View File

@ -0,0 +1,406 @@
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { FormBuilder, Validators } from "@angular/forms";
import { TaxInformation } from "@bitwarden/common/billing/models/domain";
type Country = {
name: string;
value: string;
disabled: boolean;
};
@Component({
selector: "app-manage-tax-information",
templateUrl: "./manage-tax-information.component.html",
})
export class ManageTaxInformationComponent implements OnInit {
@Input({ required: true }) taxInformation: TaxInformation;
@Input() onSubmit?: (taxInformation: TaxInformation) => Promise<void>;
@Output() taxInformationUpdated = new EventEmitter();
protected formGroup = this.formBuilder.group({
country: ["", Validators.required],
postalCode: ["", Validators.required],
includeTaxId: false,
taxId: "",
line1: "",
line2: "",
city: "",
state: "",
});
constructor(private formBuilder: FormBuilder) {}
submit = async () => {
await this.onSubmit({
country: this.formGroup.value.country,
postalCode: this.formGroup.value.postalCode,
taxId: this.formGroup.value.taxId,
line1: this.formGroup.value.line1,
line2: this.formGroup.value.line2,
city: this.formGroup.value.city,
state: this.formGroup.value.state,
});
this.taxInformationUpdated.emit();
};
async ngOnInit() {
if (this.taxInformation) {
this.formGroup.patchValue({
...this.taxInformation,
includeTaxId:
this.countrySupportsTax(this.taxInformation.country) &&
(!!this.taxInformation.taxId ||
!!this.taxInformation.line1 ||
!!this.taxInformation.line2 ||
!!this.taxInformation.city ||
!!this.taxInformation.state),
});
}
}
protected countrySupportsTax(countryCode: string) {
return this.taxSupportedCountryCodes.includes(countryCode);
}
protected get includeTaxIdIsSelected() {
return this.formGroup.value.includeTaxId;
}
protected get selectionSupportsAdditionalOptions() {
return (
this.formGroup.value.country !== "US" && this.countrySupportsTax(this.formGroup.value.country)
);
}
protected countries: Country[] = [
{ 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 },
];
private taxSupportedCountryCodes: string[] = [
"CN",
"FR",
"DE",
"CA",
"GB",
"AU",
"IN",
"AD",
"AR",
"AT",
"BE",
"BO",
"BR",
"BG",
"CL",
"CO",
"CR",
"HR",
"CY",
"CZ",
"DK",
"DO",
"EC",
"EG",
"SV",
"EE",
"FI",
"GE",
"GR",
"HK",
"HU",
"IS",
"ID",
"IQ",
"IE",
"IL",
"IT",
"JP",
"KE",
"KR",
"LV",
"LI",
"LT",
"LU",
"MY",
"MT",
"MX",
"NL",
"NZ",
"NO",
"PE",
"PH",
"PL",
"PT",
"RO",
"RU",
"SA",
"RS",
"SG",
"SK",
"SI",
"ZA",
"ES",
"SE",
"CH",
"TW",
"TH",
"TR",
"UA",
"AE",
"UY",
"VE",
"VN",
];
}

151
libs/angular/src/billing/components/select-payment-method/select-payment-method.component.html Normal file
View File

@ -0,0 +1,151 @@
<form [formGroup]="formGroup" [bitSubmit]="submit">
<div class="tw-mb-4 tw-text-lg">
<bit-radio-group formControlName="paymentMethod">
<bit-radio-button id="card-payment-method" [value]="PaymentMethodType.Card">
<bit-label>
<i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>
{{ "creditCard" | i18n }}
</bit-label>
</bit-radio-button>
<bit-radio-button
id="bank-payment-method"
[value]="PaymentMethodType.BankAccount"
*ngIf="showBankAccount"
>
<bit-label>
<i class="bwi bwi-fw bwi-bank" aria-hidden="true"></i>
{{ "bankAccount" | i18n }}
</bit-label>
</bit-radio-button>
<bit-radio-button
id="paypal-payment-method"
[value]="PaymentMethodType.PayPal"
*ngIf="showPayPal"
>
<bit-label>
<i class="bwi bwi-fw bwi-paypal" aria-hidden="true"></i>
{{ "payPal" | i18n }}
</bit-label>
</bit-radio-button>
<bit-radio-button
id="credit-payment-method"
[value]="PaymentMethodType.Credit"
*ngIf="showAccountCredit"
>
<bit-label>
<i class="bwi bwi-fw bwi-dollar" aria-hidden="true"></i>
{{ "accountCredit" | i18n }}
</bit-label>
</bit-radio-button>
</bit-radio-group>
</div>
<!-- Card -->
<ng-container *ngIf="usingCard">
<div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-4">
<div class="tw-col-span-1">
<label for="stripe-card-number">{{ "number" | i18n }}</label>
<div id="stripe-card-number" class="form-control 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">
<label for="stripe-card-expiry">{{ "expiration" | i18n }}</label>
<div id="stripe-card-expiry" class="form-control stripe-form-control"></div>
</div>
<div class="tw-col-span-1">
<div class="tw-flex">
<label for="stripe-card-cvc">
{{ "securityCode" | i18n }}
</label>
<a
href="https://www.cvvnumber.com/cvv.html"
tabindex="-1"
target="_blank"
rel="noreferrer"
class="ml-auto"
appA11yTitle="{{ 'learnMore' | i18n }}"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
</div>
<div id="stripe-card-cvc" class="form-control stripe-form-control"></div>
</div>
</div>
</ng-container>
<!-- Bank Account -->
<ng-container *ngIf="showBankAccount && usingBankAccount">
<app-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
{{ "verifyBankAccountInitialDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}
</app-callout>
<div class="tw-grid tw-grid-cols-2 tw-gap-4" formGroupName="bankInformation">
<bit-form-field class="tw-col-span-1" disableMargin>
<bit-label>{{ "routingNumber" | i18n }}</bit-label>
<input
bitInput
id="routingNumber"
type="text"
formControlName="routingNumber"
required
appInputVerbatim
/>
</bit-form-field>
<bit-form-field class="tw-col-span-1" disableMargin>
<bit-label>{{ "accountNumber" | i18n }}</bit-label>
<input
bitInput
id="accountNumber"
type="text"
formControlName="accountNumber"
required
appInputVerbatim
/>
</bit-form-field>
<bit-form-field class="tw-col-span-1" disableMargin>
<bit-label>{{ "accountHolderName" | i18n }}</bit-label>
<input
id="accountHolderName"
bitInput
type="text"
formControlName="accountHolderName"
required
appInputVerbatim
/>
</bit-form-field>
<bit-form-field class="tw-col-span-1" disableMargin>
<bit-label>{{ "bankAccountType" | i18n }}</bit-label>
<bit-select id="accountHolderType" formControlName="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>
<!-- PayPal -->
<ng-container *ngIf="showPayPal && usingPayPal">
<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>
<!-- Account Credit -->
<ng-container *ngIf="showAccountCredit && usingAccountCredit">
<app-callout type="note">
{{ "makeSureEnoughCredit" | i18n }}
</app-callout>
</ng-container>
<button *ngIf="!!onSubmit" bitButton bitFormButton buttonType="primary" type="submit">
{{ "submit" | i18n }}
</button>
</form>

159
libs/angular/src/billing/components/select-payment-method/select-payment-method.component.ts Normal file
View File

@ -0,0 +1,159 @@
import { Component, Input, OnDestroy, OnInit } from "@angular/core";
import { FormBuilder, Validators } from "@angular/forms";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import {
BillingApiServiceAbstraction,
BraintreeServiceAbstraction,
StripeServiceAbstraction,
} from "@bitwarden/common/billing/abstractions";
import { PaymentMethodType } from "@bitwarden/common/billing/enums";
import { TokenizedPaymentMethod } from "@bitwarden/common/billing/models/domain";
@Component({
selector: "app-select-payment-method",
templateUrl: "./select-payment-method.component.html",
})
export class SelectPaymentMethodComponent implements OnInit, OnDestroy {
@Input() protected showAccountCredit: boolean = true;
@Input() protected showBankAccount: boolean = true;
@Input() protected showPayPal: boolean = true;
@Input() private startWith: PaymentMethodType = PaymentMethodType.Card;
@Input() protected onSubmit: (tokenizedPaymentMethod: TokenizedPaymentMethod) => Promise<void>;
private destroy$ = new Subject<void>();
protected formGroup = this.formBuilder.group({
paymentMethod: [this.startWith],
bankInformation: this.formBuilder.group({
routingNumber: ["", [Validators.required]],
accountNumber: ["", [Validators.required]],
accountHolderName: ["", [Validators.required]],
accountHolderType: ["", [Validators.required]],
}),
});
protected PaymentMethodType = PaymentMethodType;
constructor(
private billingApiService: BillingApiServiceAbstraction,
private braintreeService: BraintreeServiceAbstraction,
private formBuilder: FormBuilder,
private stripeService: StripeServiceAbstraction,
) {}
async tokenizePaymentMethod(): Promise<TokenizedPaymentMethod> {
const type = this.selected;
if (this.usingStripe) {
const clientSecret = await this.billingApiService.createSetupIntent(type);
if (this.usingBankAccount) {
const token = await this.stripeService.setupBankAccountPaymentMethod(clientSecret, {
accountHolderName: this.formGroup.value.bankInformation.accountHolderName,
routingNumber: this.formGroup.value.bankInformation.routingNumber,
accountNumber: this.formGroup.value.bankInformation.accountNumber,
accountHolderType: this.formGroup.value.bankInformation.accountHolderType,
});
return {
type,
token,
};
}
if (this.usingCard) {
const token = await this.stripeService.setupCardPaymentMethod(clientSecret);
return {
type,
token,
};
}
}
if (this.usingPayPal) {
const token = await this.braintreeService.requestPaymentMethod();
return {
type,
token,
};
}
return null;
}
submit = async () => {
const tokenizedPaymentMethod = await this.tokenizePaymentMethod();
await this.onSubmit(tokenizedPaymentMethod);
};
ngOnInit(): void {
this.stripeService.loadStripe(
{
cardNumber: "#stripe-card-number",
cardExpiry: "#stripe-card-expiry",
cardCvc: "#stripe-card-cvc",
},
this.startWith === PaymentMethodType.Card,
);
if (this.showPayPal) {
this.braintreeService.loadBraintree(
"#braintree-container",
this.startWith === PaymentMethodType.PayPal,
);
}
this.formGroup
.get("paymentMethod")
.valueChanges.pipe(takeUntil(this.destroy$))
.subscribe((type) => {
this.onPaymentMethodChange(type);
});
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
this.stripeService.unloadStripe();
if (this.showPayPal) {
this.braintreeService.unloadBraintree();
}
}
private onPaymentMethodChange(type: PaymentMethodType): void {
switch (type) {
case PaymentMethodType.Card: {
this.stripeService.mountElements();
break;
}
case PaymentMethodType.PayPal: {
this.braintreeService.createDropin();
break;
}
}
}
private get selected(): PaymentMethodType {
return this.formGroup.value.paymentMethod;
}
protected get usingAccountCredit(): boolean {
return this.selected === PaymentMethodType.Credit;
}
protected get usingBankAccount(): boolean {
return this.selected === PaymentMethodType.BankAccount;
}
protected get usingCard(): boolean {
return this.selected === PaymentMethodType.Card;
}
protected get usingPayPal(): boolean {
return this.selected === PaymentMethodType.PayPal;
}
private get usingStripe(): boolean {
return this.usingBankAccount || this.usingCard;
}
}

18
libs/angular/src/billing/components/verify-bank-account/verify-bank-account.component.html Normal file
View File

@ -0,0 +1,18 @@
<app-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
<p>{{ "verifyBankAccountDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}</p>
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-form-field class="tw-mr-2 tw-w-40">
<bit-label>{{ "amountX" | i18n: "1" }}</bit-label>
<input bitInput type="number" step="1" placeholder="xx" formControlName="amount1" />
<span bitPrefix>$0.</span>
</bit-form-field>
<bit-form-field class="tw-mr-2 tw-w-40">
<bit-label>{{ "amountX" | i18n: "2" }}</bit-label>
<input bitInput type="number" step="1" placeholder="xx" formControlName="amount2" />
<span bitPrefix>$0.</span>
</bit-form-field>
<button type="submit" bitButton bitFormButton buttonType="primary">
{{ "submit" | i18n }}
</button>
</form>
</app-callout>

33
libs/angular/src/billing/components/verify-bank-account/verify-bank-account.component.ts Normal file
View File

@ -0,0 +1,33 @@
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { FormBuilder, FormControl, Validators } from "@angular/forms";
@Component({
selector: "app-verify-bank-account",
templateUrl: "./verify-bank-account.component.html",
})
export class VerifyBankAccountComponent {
@Input() onSubmit?: (amount1: number, amount2: number) => Promise<void>;
@Output() verificationSubmitted = new EventEmitter();
protected formGroup = this.formBuilder.group({
amount1: new FormControl<number>(null, [
Validators.required,
Validators.min(0),
Validators.max(99),
]),
amount2: new FormControl<number>(null, [
Validators.required,
Validators.min(0),
Validators.max(99),
]),
});
constructor(private formBuilder: FormBuilder) {}
submit = async () => {
if (this.onSubmit) {
await this.onSubmit(this.formGroup.value.amount1, this.formGroup.value.amount2);
}
this.verificationSubmitted.emit();
};
}

BIN
libs/angular/src/billing/images/cards.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

35
libs/angular/src/jslib.module.ts
View File

@ -2,7 +2,24 @@ import { CommonModule, DatePipe } from "@angular/common";
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { AutofocusDirective, ToastModule } from "@bitwarden/components";
import {
AddAccountCreditDialogComponent,
ManageTaxInformationComponent,
SelectPaymentMethodComponent,
VerifyBankAccountComponent,
} from "@bitwarden/angular/billing/components";
import {
AsyncActionsModule,
AutofocusDirective,
ButtonModule,
CheckboxModule,
DialogModule,
FormFieldModule,
RadioButtonModule,
SelectModule,
ToastModule,
TypographyModule,
} from "@bitwarden/components";
import { CalloutComponent } from "./components/callout.component";
import { A11yInvalidDirective } from "./directives/a11y-invalid.directive";
@ -41,6 +58,14 @@ import { IconComponent } from "./vault/components/icon.component";
CommonModule,
FormsModule,
ReactiveFormsModule,
AsyncActionsModule,
RadioButtonModule,
FormFieldModule,
SelectModule,
ButtonModule,
CheckboxModule,
DialogModule,
TypographyModule,
],
declarations: [
A11yInvalidDirective,
@ -70,6 +95,10 @@ import { IconComponent } from "./vault/components/icon.component";
UserTypePipe,
IfFeatureDirective,
FingerprintPipe,
AddAccountCreditDialogComponent,
ManageTaxInformationComponent,
SelectPaymentMethodComponent,
VerifyBankAccountComponent,
],
exports: [
A11yInvalidDirective,
@ -100,6 +129,10 @@ import { IconComponent } from "./vault/components/icon.component";
UserTypePipe,
IfFeatureDirective,
FingerprintPipe,
AddAccountCreditDialogComponent,
ManageTaxInformationComponent,
SelectPaymentMethodComponent,
VerifyBankAccountComponent,
],
providers: [
CreditCardNumberPipe,

22
libs/angular/src/services/jslib-services.module.ts
View File

@ -109,14 +109,20 @@ import {
DomainSettingsService,
DefaultDomainSettingsService,
} from "@bitwarden/common/autofill/services/domain-settings.service";
import {
BillingApiServiceAbstraction,
BraintreeServiceAbstraction,
OrganizationBillingServiceAbstraction,
PaymentMethodWarningsServiceAbstraction,
StripeServiceAbstraction,
} from "@bitwarden/common/billing/abstractions";
import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billilng-api.service.abstraction";
import { OrganizationBillingServiceAbstraction } from "@bitwarden/common/billing/abstractions/organization-billing.service";
import { PaymentMethodWarningsServiceAbstraction } from "@bitwarden/common/billing/abstractions/payment-method-warnings-service.abstraction";
import { DefaultBillingAccountProfileStateService } from "@bitwarden/common/billing/services/account/billing-account-profile-state.service";
import { BillingApiService } from "@bitwarden/common/billing/services/billing-api.service";
import { OrganizationBillingService } from "@bitwarden/common/billing/services/organization-billing.service";
import { PaymentMethodWarningsService } from "@bitwarden/common/billing/services/payment-method-warnings.service";
import { BraintreeService } from "@bitwarden/common/billing/services/payment-processors/braintree.service";
import { StripeService } from "@bitwarden/common/billing/services/payment-processors/stripe.service";
import { AppIdService as AppIdServiceAbstraction } from "@bitwarden/common/platform/abstractions/app-id.service";
import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
import { ConfigApiServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config-api.service.abstraction";
@ -1190,6 +1196,16 @@ const safeProviders: SafeProvider[] = [
useClass: KdfConfigService,
deps: [StateProvider],
}),
safeProvider({
provide: BraintreeServiceAbstraction,
useClass: BraintreeService,
deps: [LogService],
}),
safeProvider({
provide: StripeServiceAbstraction,
useClass: StripeService,
deps: [LogService],
}),
];
function encryptServiceFactory(

33
libs/common/src/billing/abstractions/billilng-api.service.abstraction.ts
View File

@ -1,3 +1,9 @@
import { PaymentMethodType } from "@bitwarden/common/billing/enums";
import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
import { TokenizedPaymentMethodRequest } from "@bitwarden/common/billing/models/request/tokenized-payment-method.request";
import { VerifyBankAccountRequest } from "@bitwarden/common/billing/models/request/verify-bank-account.request";
import { PaymentInformationResponse } from "@bitwarden/common/billing/models/response/payment-information.response";
import { SubscriptionCancellationRequest } from "../../billing/models/request/subscription-cancellation.request";
import { OrganizationBillingMetadataResponse } from "../../billing/models/response/organization-billing-metadata.response";
import { OrganizationBillingStatusResponse } from "../../billing/models/response/organization-billing-status.response";
@ -13,23 +19,50 @@ export abstract class BillingApiServiceAbstraction {
organizationId: string,
request: SubscriptionCancellationRequest,
) => Promise<void>;
cancelPremiumUserSubscription: (request: SubscriptionCancellationRequest) => Promise<void>;
createClientOrganization: (
providerId: string,
request: CreateClientOrganizationRequest,
) => Promise<void>;
createSetupIntent: (paymentMethodType: PaymentMethodType) => Promise<string>;
getBillingStatus: (id: string) => Promise<OrganizationBillingStatusResponse>;
getOrganizationBillingMetadata: (
organizationId: string,
) => Promise<OrganizationBillingMetadataResponse>;
getOrganizationSubscription: (
organizationId: string,
) => Promise<OrganizationSubscriptionResponse>;
getPlans: () => Promise<ListResponse<PlanResponse>>;
getProviderPaymentInformation: (providerId: string) => Promise<PaymentInformationResponse>;
getProviderSubscription: (providerId: string) => Promise<ProviderSubscriptionResponse>;
updateClientOrganization: (
providerId: string,
organizationId: string,
request: UpdateClientOrganizationRequest,
) => Promise<any>;
updateProviderPaymentMethod: (
providerId: string,
request: TokenizedPaymentMethodRequest,
) => Promise<void>;
updateProviderTaxInformation: (
providerId: string,
request: ExpandedTaxInfoUpdateRequest,
) => Promise<void>;
verifyProviderBankAccount: (
providerId: string,
request: VerifyBankAccountRequest,
) => Promise<void>;
}

7
libs/common/src/billing/abstractions/index.ts Normal file
View File

@ -0,0 +1,7 @@
export * from "./account/billing-account-profile-state.service";
export * from "./billilng-api.service.abstraction";
export * from "./organization-billing.service";
export * from "./payment-method-warnings-service.abstraction";
export * from "./payment-processors/braintree.service.abstraction";
export * from "./payment-processors/stripe.service.abstraction";
export * from "./provider-billing.service.abstraction";

28
libs/common/src/billing/abstractions/payment-processors/braintree.service.abstraction.ts Normal file
View File

@ -0,0 +1,28 @@
export abstract class BraintreeServiceAbstraction {
/**
* Utilizes the Braintree SDK to create a [Braintree drop-in]{@link https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html} instance attached to the container ID specified as part of the {@link loadBraintree} method.
*/
createDropin: () => void;
/**
* Loads the Bitwarden dropin.js script in the <head> element of the current page.
* This script attaches the Braintree SDK to the window.
* @param containerId - The ID of the HTML element where the Braintree drop-in will be loaded at.
* @param autoCreateDropin - Specifies whether the Braintree drop-in should be created when dropin.js loads.
*/
loadBraintree: (containerId: string, autoCreateDropin: boolean) => void;
/**
* Invokes the Braintree [requestPaymentMethod]{@link https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#requestPaymentMethod} method
* in order to generate a payment method token using the active Braintree drop-in.
*/
requestPaymentMethod: () => Promise<string>;
/**
* Removes the following elements from the <head> of the current page:
* - The Bitwarden dropin.js script
* - Any <script> elements that contain the word "paypal"
* - The Braintree drop-in stylesheet
*/
unloadBraintree: () => void;
}

45
libs/common/src/billing/abstractions/payment-processors/stripe.service.abstraction.ts Normal file
View File

@ -0,0 +1,45 @@
import { BankAccount } from "@bitwarden/common/billing/models/domain";
export abstract class StripeServiceAbstraction {
/**
* Loads [Stripe JS]{@link https://docs.stripe.com/js} in the <head> element of the current page and mounts
* Stripe credit card [elements]{@link https://docs.stripe.com/js/elements_object/create} into the HTML elements with the provided element IDS.
* We do this to avoid having to load the Stripe JS SDK on every page of the Web Vault given many pages contain sensitive information.
* @param elementIds - The ID attributes of the HTML elements used to load the Stripe JS credit card elements.
*/
loadStripe: (
elementIds: { cardNumber: string; cardExpiry: string; cardCvc: string },
autoMount: boolean,
) => void;
/**
* 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: () => void;
/**
* Creates a Stripe [SetupIntent]{@link https://docs.stripe.com/api/setup_intents} and uses the resulting client secret
* to invoke the Stripe JS [confirmUsBankAccountSetup]{@link https://docs.stripe.com/js/setup_intents/confirm_us_bank_account_setup} method,
* thereby creating and storing a Stripe [PaymentMethod]{@link https://docs.stripe.com/api/payment_methods}.
* @returns The ID of the newly created PaymentMethod.
*/
setupBankAccountPaymentMethod: (
clientSecret: string,
bankAccount: BankAccount,
) => Promise<string>;
/**
* Creates a Stripe [SetupIntent]{@link https://docs.stripe.com/api/setup_intents} and uses the resulting client secret
* to invoke the Stripe JS [confirmCardSetup]{@link https://docs.stripe.com/js/setup_intents/confirm_card_setup} method,
* thereby creating and storing a Stripe [PaymentMethod]{@link https://docs.stripe.com/api/payment_methods}.
* @returns The ID of the newly created PaymentMethod.
*/
setupCardPaymentMethod: (clientSecret: string) => Promise<string>;
/**
* Removes {@link https://docs.stripe.com/js} from the <head> element of the current page as well as all
* Stripe-managed <iframe> elements.
*/
unloadStripe: () => void;
}

6
libs/common/src/billing/models/domain/bank-account.ts Normal file
View File

@ -0,0 +1,6 @@
export type BankAccount = {
accountHolderName: string;
routingNumber: string;
accountNumber: string;
accountHolderType: string;
};

5
libs/common/src/billing/models/domain/index.ts Normal file
View File

@ -0,0 +1,5 @@
export * from "./bank-account";
export * from "./masked-payment-method";
export * from "./payment-method-warning";
export * from "./tax-information";
export * from "./tokenized-payment-method";

17
libs/common/src/billing/models/domain/masked-payment-method.ts Normal file
View File

@ -0,0 +1,17 @@
import { PaymentMethodType } from "@bitwarden/common/billing/enums";
import { MaskedPaymentMethodResponse } from "@bitwarden/common/billing/models/response/masked-payment-method.response";
export class MaskedPaymentMethod {
type: PaymentMethodType;
description: string;
needsVerification: boolean;
static from(response: MaskedPaymentMethodResponse | undefined) {
if (response === undefined) {
return null;
}
return {
...response,
};
}
}

32
libs/common/src/billing/models/domain/tax-information.ts Normal file
View File

@ -0,0 +1,32 @@
import { TaxInfoResponse } from "@bitwarden/common/billing/models/response/tax-info.response";
export class TaxInformation {
country: string;
postalCode: string;
taxId: string;
line1: string;
line2: string;
city: string;
state: string;
static empty(): TaxInformation {
return {
country: null,
postalCode: null,
taxId: null,
line1: null,
line2: null,
city: null,
state: null,
};
}
static from(response: TaxInfoResponse | null): TaxInformation {
if (response === null) {
return TaxInformation.empty();
}
return {
...response,
};
}
}

6
libs/common/src/billing/models/domain/tokenized-payment-method.ts Normal file
View File

@ -0,0 +1,6 @@
import { PaymentMethodType } from "@bitwarden/common/billing/enums";
export type TokenizedPaymentMethod = {
type: PaymentMethodType;
token: string;
};

1
libs/common/src/billing/models/request/bit-pay-invoice.request.ts
View File

@ -1,6 +1,7 @@
export class BitPayInvoiceRequest {
userId: string;
organizationId: string;
providerId: string;
credit: boolean;
amount: number;
returnUrl: string;

14
libs/common/src/billing/models/request/expanded-tax-info-update.request.ts
View File

@ -1,3 +1,5 @@
import { TaxInformation } from "@bitwarden/common/billing/models/domain/tax-information";
import { TaxInfoUpdateRequest } from "./tax-info-update.request";
export class ExpandedTaxInfoUpdateRequest extends TaxInfoUpdateRequest {
@ -6,4 +8,16 @@ export class ExpandedTaxInfoUpdateRequest extends TaxInfoUpdateRequest {
line2: string;
city: string;
state: string;
static From(taxInformation: TaxInformation): ExpandedTaxInfoUpdateRequest {
const request = new ExpandedTaxInfoUpdateRequest();
request.country = taxInformation.country;
request.postalCode = taxInformation.postalCode;
request.taxId = taxInformation.taxId;
request.line1 = taxInformation.line1;
request.line2 = taxInformation.line2;
request.city = taxInformation.city;
request.state = taxInformation.state;
return request;
}
}

14
libs/common/src/billing/models/request/tokenized-payment-method.request.ts Normal file
View File

@ -0,0 +1,14 @@
import { PaymentMethodType } from "@bitwarden/common/billing/enums";
import { TokenizedPaymentMethod } from "@bitwarden/common/billing/models/domain";
export class TokenizedPaymentMethodRequest {
type: PaymentMethodType;
token: string;
static From(tokenizedPaymentMethod: TokenizedPaymentMethod): TokenizedPaymentMethodRequest {
const request = new TokenizedPaymentMethodRequest();
request.type = tokenizedPaymentMethod.type;
request.token = tokenizedPaymentMethod.token;
return request;
}
}

9
libs/common/src/billing/models/request/verify-bank-account.request.ts Normal file
View File

@ -0,0 +1,9 @@
export class VerifyBankAccountRequest {
amount1: number;
amount2: number;
constructor(amount1: number, amount2: number) {
this.amount1 = amount1;
this.amount2 = amount2;
}
}

15
libs/common/src/billing/models/response/masked-payment-method.response.ts Normal file
View File

@ -0,0 +1,15 @@
import { PaymentMethodType } from "@bitwarden/common/billing/enums";
import { BaseResponse } from "@bitwarden/common/models/response/base.response";
export class MaskedPaymentMethodResponse extends BaseResponse {
type: PaymentMethodType;
description: string;
needsVerification: boolean;
constructor(response: any) {
super(response);
this.type = this.getResponseProperty("Type");
this.description = this.getResponseProperty("Description");
this.needsVerification = this.getResponseProperty("NeedsVerification");
}
}

25
libs/common/src/billing/models/response/payment-information.response.ts Normal file
View File

@ -0,0 +1,25 @@
import { BaseResponse } from "../../../models/response/base.response";
import { MaskedPaymentMethodResponse } from "./masked-payment-method.response";
import { TaxInfoResponse } from "./tax-info.response";
export class PaymentInformationResponse extends BaseResponse {
accountCredit: number;
paymentMethod?: MaskedPaymentMethodResponse;
taxInformation?: TaxInfoResponse;
constructor(response: any) {
super(response);
this.accountCredit = this.getResponseProperty("AccountCredit");
const paymentMethod = this.getResponseProperty("PaymentMethod");
if (paymentMethod) {
this.paymentMethod = new MaskedPaymentMethodResponse(paymentMethod);
}
const taxInformation = this.getResponseProperty("TaxInformation");
if (taxInformation) {
this.taxInformation = new TaxInfoResponse(taxInformation);
}
}
}

3
libs/common/src/billing/models/response/tax-info.response.ts
View File

@ -13,6 +13,9 @@ export class TaxInfoResponse extends BaseResponse {
constructor(response: any) {
super(response);
this.taxId = this.getResponseProperty("TaxIdNumber");
if (!this.taxId) {
this.taxId = this.getResponseProperty("TaxId");
}
this.taxIdType = this.getResponseProperty("TaxIdType");
this.line1 = this.getResponseProperty("Line1");
this.line2 = this.getResponseProperty("Line2");

69
libs/common/src/billing/services/billing-api.service.ts
View File

@ -1,10 +1,14 @@
import { OrganizationBillingMetadataResponse } from "@bitwarden/common/billing/models/response/organization-billing-metadata.response";
import { ApiService } from "../../abstractions/api.service";
import { BillingApiServiceAbstraction } from "../../billing/abstractions/billilng-api.service.abstraction";
import { BillingApiServiceAbstraction } from "../../billing/abstractions";
import { PaymentMethodType } from "../../billing/enums";
import { ExpandedTaxInfoUpdateRequest } from "../../billing/models/request/expanded-tax-info-update.request";
import { SubscriptionCancellationRequest } from "../../billing/models/request/subscription-cancellation.request";
import { TokenizedPaymentMethodRequest } from "../../billing/models/request/tokenized-payment-method.request";
import { VerifyBankAccountRequest } from "../../billing/models/request/verify-bank-account.request";
import { OrganizationBillingMetadataResponse } from "../../billing/models/response/organization-billing-metadata.response";
import { OrganizationBillingStatusResponse } from "../../billing/models/response/organization-billing-status.response";
import { OrganizationSubscriptionResponse } from "../../billing/models/response/organization-subscription.response";
import { PaymentInformationResponse } from "../../billing/models/response/payment-information.response";
import { PlanResponse } from "../../billing/models/response/plan.response";
import { ListResponse } from "../../models/response/list.response";
import { CreateClientOrganizationRequest } from "../models/request/create-client-organization.request";
@ -44,6 +48,21 @@ export class BillingApiService implements BillingApiServiceAbstraction {
);
}
async createSetupIntent(type: PaymentMethodType) {
const getPath = () => {
switch (type) {
case PaymentMethodType.BankAccount: {
return "/setup-intent/bank-account";
}
case PaymentMethodType.Card: {
return "/setup-intent/card";
}
}
};
const response = await this.apiService.send("POST", getPath(), null, true, true);
return response as string;
}
async getBillingStatus(id: string): Promise<OrganizationBillingStatusResponse> {
const r = await this.apiService.send(
"GET",
@ -87,6 +106,17 @@ export class BillingApiService implements BillingApiServiceAbstraction {
return new ListResponse(r, PlanResponse);
}
async getProviderPaymentInformation(providerId: string): Promise<PaymentInformationResponse> {
const response = await this.apiService.send(
"GET",
"/providers/" + providerId + "/billing/payment-information",
null,
true,
true,
);
return new PaymentInformationResponse(response);
}
async getProviderSubscription(providerId: string): Promise<ProviderSubscriptionResponse> {
const r = await this.apiService.send(
"GET",
@ -111,4 +141,37 @@ export class BillingApiService implements BillingApiServiceAbstraction {
false,
);
}
async updateProviderPaymentMethod(
providerId: string,
request: TokenizedPaymentMethodRequest,
): Promise<void> {
return await this.apiService.send(
"PUT",
"/providers/" + providerId + "/billing/payment-method",
request,
true,
false,
);
}
async updateProviderTaxInformation(providerId: string, request: ExpandedTaxInfoUpdateRequest) {
return await this.apiService.send(
"PUT",
"/providers/" + providerId + "/billing/tax-information",
request,
true,
false,
);
}
async verifyProviderBankAccount(providerId: string, request: VerifyBankAccountRequest) {
return await this.apiService.send(
"POST",
"/providers/" + providerId + "/billing/payment-method/verify-bank-account",
request,
true,
false,
);
}
}

89
libs/common/src/billing/services/payment-processors/braintree.service.ts Normal file
View File

@ -0,0 +1,89 @@
import { LogService } from "../../../platform/abstractions/log.service";
import { BraintreeServiceAbstraction } from "../../abstractions";
export class BraintreeService implements BraintreeServiceAbstraction {
private braintree: any;
private containerId: string;
constructor(private logService: LogService) {}
createDropin() {
window.setTimeout(() => {
const window$ = window as any;
window$.braintree.dropin.create(
{
authorization: process.env.BRAINTREE_KEY,
container: this.containerId,
paymentOptionPriority: ["paypal"],
paypal: {
flow: "vault",
buttonStyle: {
label: "pay",
size: "medium",
shape: "pill",
color: "blue",
tagline: "false",
},
},
},
(error: any, instance: any) => {
if (error != null) {
this.logService.error(error);
return;
}
this.braintree = instance;
},
);
}, 250);
}
loadBraintree(containerId: string, autoCreateDropin: boolean) {
const script = window.document.createElement("script");
script.id = "dropin-script";
script.src = `scripts/dropin.js?cache=${process.env.CACHE_TAG}`;
script.async = true;
if (autoCreateDropin) {
script.onload = () => this.createDropin();
}
this.containerId = containerId;
window.document.head.appendChild(script);
}
requestPaymentMethod(): Promise<string> {
return new Promise((resolve, reject) => {
this.braintree.requestPaymentMethod((error: any, payload: any) => {
if (error) {
this.logService.error(error);
reject(error.message);
} else {
resolve(payload.nonce as string);
}
});
});
}
unloadBraintree() {
const script = window.document.getElementById("dropin-script");
window.document.head.removeChild(script);
window.setTimeout(() => {
const scripts = Array.from(window.document.head.querySelectorAll("script")).filter(
(script) => script.src != null && script.src.indexOf("paypal") > -1,
);
scripts.forEach((script) => {
try {
window.document.head.removeChild(script);
} catch (error) {
this.logService.error(error);
}
});
const stylesheet = window.document.head.querySelector("#braintree-dropin-stylesheet");
if (stylesheet != null) {
try {
window.document.head.removeChild(stylesheet);
} catch (error) {
this.logService.error(error);
}
}
}, 500);
}
}

142
libs/common/src/billing/services/payment-processors/stripe.service.ts Normal file
View File

@ -0,0 +1,142 @@
import { LogService } from "../../../platform/abstractions/log.service";
import { StripeServiceAbstraction } from "../../abstractions";
import { BankAccount } from "../../models/domain";
export class StripeService implements StripeServiceAbstraction {
private stripe: any;
private elements: any;
private elementIds: {
cardNumber: string;
cardExpiry: string;
cardCvc: string;
};
constructor(private logService: LogService) {}
loadStripe(
elementIds: { cardNumber: string; cardExpiry: string; cardCvc: string },
autoMount: boolean,
) {
this.elementIds = elementIds;
const script = window.document.createElement("script");
script.id = "stripe-script";
script.src = "https://js.stripe.com/v3?advancedFraudSignals=false";
script.onload = () => {
const window$ = window as any;
this.stripe = window$.Stripe(process.env.STRIPE_KEY);
this.elements = this.stripe.elements();
const options = this.getElementOptions();
setTimeout(() => {
this.elements.create("cardNumber", options);
this.elements.create("cardExpiry", options);
this.elements.create("cardCvc", options);
if (autoMount) {
this.mountElements();
}
}, 50);
};
window.document.head.appendChild(script);
}
mountElements() {
setTimeout(() => {
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);
});
}
async setupBankAccountPaymentMethod(
clientSecret: string,
{ accountHolderName, routingNumber, accountNumber, accountHolderType }: BankAccount,
): Promise<string> {
const result = await this.stripe.confirmUsBankAccountSetup(clientSecret, {
payment_method: {
us_bank_account: {
routing_number: routingNumber,
account_number: accountNumber,
account_holder_type: accountHolderType,
},
billing_details: {
name: accountHolderName,
},
},
});
if (result.error || (result.setupIntent && result.setupIntent.status !== "requires_action")) {
this.logService.error(result.error);
throw result.error;
}
return result.setupIntent.payment_method as string;
}
async setupCardPaymentMethod(clientSecret: string): Promise<string> {
const cardNumber = this.elements.getElement("cardNumber");
const result = await this.stripe.confirmCardSetup(clientSecret, {
payment_method: {
card: cardNumber,
},
});
if (result.error || (result.setupIntent && result.setupIntent.status !== "succeeded")) {
this.logService.error(result.error);
throw result.error;
}
return result.setupIntent.payment_method as string;
}
unloadStripe() {
const script = window.document.getElementById("stripe-script");
window.document.head.removeChild(script);
window.setTimeout(() => {
const iFrames = Array.from(window.document.querySelectorAll("iframe")).filter(
(element) => element.src != null && element.src.indexOf("stripe") > -1,
);
iFrames.forEach((iFrame) => {
try {
window.document.body.removeChild(iFrame);
} catch (error) {
this.logService.error(error);
}
});
}, 500);
}
private getElementOptions(): any {
const options: any = {
style: {
base: {
color: null,
fontFamily:
'"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
fontSize: "14px",
fontSmoothing: "antialiased",
"::placeholder": {
color: null,
},
},
invalid: {
color: null,
},
},
classes: {
focus: "is-focused",
empty: "is-empty",
invalid: "is-invalid",
},
};
const style = getComputedStyle(document.documentElement);
options.style.base.color = `rgb(${style.getPropertyValue("--color-text-main")})`;
options.style.base["::placeholder"].color = `rgb(${style.getPropertyValue(
"--color-text-muted",
)})`;
options.style.invalid.color = `rgb(${style.getPropertyValue("--color-text-main")})`;
options.style.invalid.borderColor = `rgb(${style.getPropertyValue("--color-danger-600")})`;
return options;
}
}