[AC-1607] Add offboarding survey to subscription pages (#7809)

* Add offboarding survey to subscription pages * Cleaning up unused code * Removing unused eslint suppression * Product updates * Jared's feedback
2025-12-22 11:13:46 +00:00 · 2024-02-09 12:08:46 -05:00
parent 64381cbae0
commit b239e3736f
12 changed files with 358 additions and 43 deletions
--- a/apps/web/src/app/billing/shared/offboarding-survey.component.ts
+++ b/apps/web/src/app/billing/shared/offboarding-survey.component.ts
@@ -0,0 +1,117 @@
+import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
+
+import { BillingApiServiceAbstraction as BillingApiService } from "@bitwarden/common/billing/abstractions/billilng-api.service.abstraction";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { DialogService } from "@bitwarden/components";
+
+type UserOffboardingParams = {
+  type: "User";
+};
+
+type OrganizationOffboardingParams = {
+  type: "Organization";
+  id: string;
+};
+
+export type OffboardingSurveyDialogParams = UserOffboardingParams | OrganizationOffboardingParams;
+
+export enum OffboardingSurveyDialogResultType {
+  Closed = "closed",
+  Submitted = "submitted",
+}
+
+type Reason = {
+  value: string;
+  text: string;
+};
+
+export const openOffboardingSurvey = (
+  dialogService: DialogService,
+  dialogConfig: DialogConfig<OffboardingSurveyDialogParams>,
+) =>
+  dialogService.open<OffboardingSurveyDialogResultType, OffboardingSurveyDialogParams>(
+    OffboardingSurveyComponent,
+    dialogConfig,
+  );
+
+@Component({
+  selector: "app-cancel-subscription-form",
+  templateUrl: "offboarding-survey.component.html",
+})
+export class OffboardingSurveyComponent {
+  protected ResultType = OffboardingSurveyDialogResultType;
+  protected readonly MaxFeedbackLength = 400;
+
+  protected readonly reasons: Reason[] = [
+    {
+      value: null,
+      text: this.i18nService.t("selectPlaceholder"),
+    },
+    {
+      value: "missing_features",
+      text: this.i18nService.t("missingFeatures"),
+    },
+    {
+      value: "switched_service",
+      text: this.i18nService.t("movingToAnotherTool"),
+    },
+    {
+      value: "too_complex",
+      text: this.i18nService.t("tooDifficultToUse"),
+    },
+    {
+      value: "unused",
+      text: this.i18nService.t("notUsingEnough"),
+    },
+    {
+      value: "too_expensive",
+      text: this.i18nService.t("tooExpensive"),
+    },
+    {
+      value: "other",
+      text: this.i18nService.t("other"),
+    },
+  ];
+
+  protected formGroup = this.formBuilder.group({
+    reason: [this.reasons[0].value, [Validators.required]],
+    feedback: ["", [Validators.maxLength(this.MaxFeedbackLength)]],
+  });
+
+  constructor(
+    @Inject(DIALOG_DATA) private dialogParams: OffboardingSurveyDialogParams,
+    private dialogRef: DialogRef<OffboardingSurveyDialogResultType>,
+    private formBuilder: FormBuilder,
+    private billingApiService: BillingApiService,
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService,
+  ) {}
+
+  submit = async () => {
+    this.formGroup.markAllAsTouched();
+
+    if (this.formGroup.invalid) {
+      return;
+    }
+
+    const request = {
+      reason: this.formGroup.value.reason,
+      feedback: this.formGroup.value.feedback,
+    };
+
+    this.dialogParams.type === "Organization"
+      ? await this.billingApiService.cancelOrganizationSubscription(this.dialogParams.id, request)
+      : await this.billingApiService.cancelPremiumUserSubscription(request);
+
+    this.platformUtilsService.showToast(
+      "success",
+      null,
+      this.i18nService.t("canceledSubscription"),
+    );
+
+    this.dialogRef.close(this.ResultType.Submitted);
+  };
+}