From 32c2cba2e7dca07ff41ff938af294ace19d63768 Mon Sep 17 00:00:00 2001
From: Brandon Treston <btreston@bitwarden.com>
Date: Mon, 16 Dec 2024 10:07:46 -0500
Subject: [PATCH] create pipe for replacing string in template (#12381)

---
 .../src/app/billing/providers/clients/index.ts        |  1 +
 .../src/app/billing/providers/clients/replace.pipe.ts | 11 +++++++++++
 .../clients/vnext-manage-clients.component.html       |  2 +-
 .../clients/vnext-manage-clients.component.ts         |  4 ++--
 4 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 bitwarden_license/bit-web/src/app/billing/providers/clients/replace.pipe.ts

diff --git a/bitwarden_license/bit-web/src/app/billing/providers/clients/index.ts b/bitwarden_license/bit-web/src/app/billing/providers/clients/index.ts
index f8b344372e..05887fc198 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/clients/index.ts
+++ b/bitwarden_license/bit-web/src/app/billing/providers/clients/index.ts
@@ -4,3 +4,4 @@ export * from "./manage-client-name-dialog.component";
 export * from "./manage-client-subscription-dialog.component";
 export * from "./no-clients.component";
 export * from "./vnext-manage-clients.component";
+export * from "./replace.pipe";
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/clients/replace.pipe.ts b/bitwarden_license/bit-web/src/app/billing/providers/clients/replace.pipe.ts
new file mode 100644
index 0000000000..4a06e85f53
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/billing/providers/clients/replace.pipe.ts
@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+  name: "replace",
+  standalone: true,
+})
+export class ReplacePipe implements PipeTransform {
+  transform(value: string, pattern: string, replacement: string): string {
+    return value.replace(pattern, replacement);
+  }
+}
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/clients/vnext-manage-clients.component.html b/bitwarden_license/bit-web/src/app/billing/providers/clients/vnext-manage-clients.component.html
index 99de9352f6..73a62c513e 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/clients/vnext-manage-clients.component.html
+++ b/bitwarden_license/bit-web/src/app/billing/providers/clients/vnext-manage-clients.component.html
@@ -46,7 +46,7 @@
         <span class="tw-text-muted">{{ row.remainingSeats }}</span>
       </td>
       <td bitCell class="tw-whitespace-nowrap">
-        <span class="tw-text-muted">{{ row.plan }}</span>
+        <span class="tw-text-muted">{{ row.plan | replace: " (Monthly)" : "" }}</span>
       </td>
       <td bitCell class="tw-text-right">
         <button
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/clients/vnext-manage-clients.component.ts b/bitwarden_license/bit-web/src/app/billing/providers/clients/vnext-manage-clients.component.ts
index 4c0837d6da..94f615f0ce 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/clients/vnext-manage-clients.component.ts
+++ b/bitwarden_license/bit-web/src/app/billing/providers/clients/vnext-manage-clients.component.ts
@@ -37,6 +37,7 @@ import {
   ManageClientSubscriptionDialogResultType,
   openManageClientSubscriptionDialog,
 } from "./manage-client-subscription-dialog.component";
+import { ReplacePipe } from "./replace.pipe";
 import { vNextNoClientsComponent } from "./vnext-no-clients.component";
 
 @Component({
@@ -48,6 +49,7 @@ import { vNextNoClientsComponent } from "./vnext-no-clients.component";
     HeaderModule,
     SharedOrganizationModule,
     vNextNoClientsComponent,
+    ReplacePipe,
   ],
 })
 export class vNextManageClientsComponent {
@@ -115,8 +117,6 @@ export class vNextManageClientsComponent {
     const clients = (await this.billingApiService.getProviderClientOrganizations(this.providerId))
       .data;
 
-    clients.forEach((client) => (client.plan = client.plan?.replace(" (Monthly)", "")));
-
     this.dataSource.data = clients;
 
     this.plans = (await this.billingApiService.getPlans()).data;