mirror of
https://github.com/bitwarden/browser
synced 2025-12-20 10:13:31 +00:00
[PM-5020] Adjust Storage component migration (#8301)
* Migrated Add Storage component * PM-5020 Addressed review comments for Adjust Storage component * PM-5020 Changes done in dialog css * PM-5020 Latest review comments addressed * PM-5020 Add storage submit action changes done * PM-5020 Moved the paragraph to top of dialog content
This commit is contained in:
KiruthigaManivannan
committed by
GitHub
GitHub
parent
cf2fefaead
commit
9ecf384176
@@ -1,4 +1,6 @@
|
||||
import { Component, EventEmitter, Input, Output, ViewChild } from "@angular/core";
|
||||
import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
|
||||
import { Component, Inject, ViewChild } from "@angular/core";
|
||||
import { FormControl, FormGroup, Validators } from "@angular/forms";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
|
||||
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
||||
@@ -8,27 +10,45 @@ import { StorageRequest } from "@bitwarden/common/models/request/storage.request
|
||||
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";
|
||||
import { DialogService } from "@bitwarden/components";
|
||||
|
||||
import { PaymentComponent } from "./payment.component";
|
||||
|
||||
export interface AdjustStorageDialogData {
|
||||
storageGbPrice: number;
|
||||
add: boolean;
|
||||
organizationId?: string;
|
||||
interval?: string;
|
||||
}
|
||||
|
||||
export enum AdjustStorageDialogResult {
|
||||
Adjusted = "adjusted",
|
||||
Cancelled = "cancelled",
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: "app-adjust-storage",
|
||||
templateUrl: "adjust-storage.component.html",
|
||||
})
|
||||
export class AdjustStorageComponent {
|
||||
@Input() storageGbPrice = 0;
|
||||
@Input() add = true;
|
||||
@Input() organizationId: string;
|
||||
@Input() interval = "year";
|
||||
@Output() onAdjusted = new EventEmitter<number>();
|
||||
@Output() onCanceled = new EventEmitter();
|
||||
storageGbPrice: number;
|
||||
add: boolean;
|
||||
organizationId: string;
|
||||
interval: string;
|
||||
|
||||
@ViewChild(PaymentComponent, { static: true }) paymentComponent: PaymentComponent;
|
||||
|
||||
storageAdjustment = 0;
|
||||
formPromise: Promise<PaymentResponse | void>;
|
||||
protected DialogResult = AdjustStorageDialogResult;
|
||||
protected formGroup = new FormGroup({
|
||||
storageAdjustment: new FormControl(0, [
|
||||
Validators.required,
|
||||
Validators.min(0),
|
||||
Validators.max(99),
|
||||
]),
|
||||
});
|
||||
|
||||
constructor(
|
||||
private dialogRef: DialogRef,
|
||||
@Inject(DIALOG_DATA) protected data: AdjustStorageDialogData,
|
||||
private apiService: ApiService,
|
||||
private i18nService: I18nService,
|
||||
private platformUtilsService: PlatformUtilsService,
|
||||
@@ -36,69 +56,74 @@ export class AdjustStorageComponent {
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private logService: LogService,
|
||||
private organizationApiService: OrganizationApiServiceAbstraction,
|
||||
) {}
|
||||
) {
|
||||
this.storageGbPrice = data.storageGbPrice;
|
||||
this.add = data.add;
|
||||
this.organizationId = data.organizationId;
|
||||
this.interval = data.interval || "year";
|
||||
}
|
||||
|
||||
async submit() {
|
||||
try {
|
||||
const request = new StorageRequest();
|
||||
request.storageGbAdjustment = this.storageAdjustment;
|
||||
if (!this.add) {
|
||||
request.storageGbAdjustment *= -1;
|
||||
}
|
||||
|
||||
let paymentFailed = false;
|
||||
const action = async () => {
|
||||
let response: Promise<PaymentResponse>;
|
||||
if (this.organizationId == null) {
|
||||
response = this.formPromise = this.apiService.postAccountStorage(request);
|
||||
} else {
|
||||
response = this.formPromise = this.organizationApiService.updateStorage(
|
||||
this.organizationId,
|
||||
request,
|
||||
);
|
||||
}
|
||||
const result = await response;
|
||||
if (result != null && result.paymentIntentClientSecret != null) {
|
||||
try {
|
||||
await this.paymentComponent.handleStripeCardPayment(
|
||||
result.paymentIntentClientSecret,
|
||||
null,
|
||||
);
|
||||
} catch {
|
||||
paymentFailed = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
this.formPromise = action();
|
||||
await this.formPromise;
|
||||
this.onAdjusted.emit(this.storageAdjustment);
|
||||
if (paymentFailed) {
|
||||
this.platformUtilsService.showToast(
|
||||
"warning",
|
||||
null,
|
||||
this.i18nService.t("couldNotChargeCardPayInvoice"),
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
|
||||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
this.router.navigate(["../billing"], { relativeTo: this.activatedRoute });
|
||||
} else {
|
||||
this.platformUtilsService.showToast(
|
||||
"success",
|
||||
null,
|
||||
this.i18nService.t("adjustedStorage", request.storageGbAdjustment.toString()),
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
this.logService.error(e);
|
||||
submit = async () => {
|
||||
const request = new StorageRequest();
|
||||
request.storageGbAdjustment = this.formGroup.value.storageAdjustment;
|
||||
if (!this.add) {
|
||||
request.storageGbAdjustment *= -1;
|
||||
}
|
||||
}
|
||||
|
||||
cancel() {
|
||||
this.onCanceled.emit();
|
||||
}
|
||||
let paymentFailed = false;
|
||||
const action = async () => {
|
||||
let response: Promise<PaymentResponse>;
|
||||
if (this.organizationId == null) {
|
||||
response = this.apiService.postAccountStorage(request);
|
||||
} else {
|
||||
response = this.organizationApiService.updateStorage(this.organizationId, request);
|
||||
}
|
||||
const result = await response;
|
||||
if (result != null && result.paymentIntentClientSecret != null) {
|
||||
try {
|
||||
await this.paymentComponent.handleStripeCardPayment(
|
||||
result.paymentIntentClientSecret,
|
||||
null,
|
||||
);
|
||||
} catch {
|
||||
paymentFailed = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
await action();
|
||||
this.dialogRef.close(AdjustStorageDialogResult.Adjusted);
|
||||
if (paymentFailed) {
|
||||
this.platformUtilsService.showToast(
|
||||
"warning",
|
||||
null,
|
||||
this.i18nService.t("couldNotChargeCardPayInvoice"),
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
|
||||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
this.router.navigate(["../billing"], { relativeTo: this.activatedRoute });
|
||||
} else {
|
||||
this.platformUtilsService.showToast(
|
||||
"success",
|
||||
null,
|
||||
this.i18nService.t("adjustedStorage", request.storageGbAdjustment.toString()),
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
get adjustedStorageTotal(): number {
|
||||
return this.storageGbPrice * this.storageAdjustment;
|
||||
return this.storageGbPrice * this.formGroup.value.storageAdjustment;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Strongly typed helper to open an AdjustStorageDialog
|
||||
* @param dialogService Instance of the dialog service that will be used to open the dialog
|
||||
* @param config Configuration for the dialog
|
||||
*/
|
||||
export function openAdjustStorageDialog(
|
||||
dialogService: DialogService,
|
||||
config: DialogConfig<AdjustStorageDialogData>,
|
||||
) {
|
||||
return dialogService.open<AdjustStorageDialogResult>(AdjustStorageComponent, config);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user