From fc8f5ba11c93a02e67482be9ec08ac8160a9c680 Mon Sep 17 00:00:00 2001
From: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Date: Fri, 6 Jan 2023 08:46:25 -0500
Subject: [PATCH] Feature/SG-959 Update "Go premium" copy verbiage (#4396)

* SG-959 - Replacing premium callout copy with new message + link to create org screen with families plan selected

* SG-959 - Replacing pure inputs for plan & product type with getters & setters so I can provide a form control setValue byproduct when a parent component (create-organization.component in this case) passes in a product / plan type. Query params for plan type were not being respected until this fix. Chose setters & getters over ngOnChanges as it doesn't allow for devs to manually set product or plan to other values without the form reflecting it.
---
 .../settings/organization-plans.component.ts  | 21 +++++++++++++++++--
 .../src/app/settings/premium.component.html   |  5 ++++-
 .../web/src/app/settings/premium.component.ts |  1 +
 apps/web/src/locales/en/messages.json         | 16 ++++++++++++++
 4 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/settings/organization-plans.component.ts b/apps/web/src/app/settings/organization-plans.component.ts
index e2dfd73d972..5c449894231 100644
--- a/apps/web/src/app/settings/organization-plans.component.ts
+++ b/apps/web/src/app/settings/organization-plans.component.ts
@@ -52,8 +52,25 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
   @Input() showFree = true;
   @Input() showCancel = false;
   @Input() acceptingSponsorship = false;
-  @Input() product: ProductType = ProductType.Free;
-  @Input() plan: PlanType = PlanType.Free;
+  @Input()
+  get product(): ProductType {
+    return this._product;
+  }
+  set product(product: ProductType) {
+    this._product = product;
+    this.formGroup?.controls?.product?.setValue(product);
+  }
+  private _product = ProductType.Free;
+
+  @Input()
+  get plan(): PlanType {
+    return this._plan;
+  }
+  set plan(plan: PlanType) {
+    this._plan = plan;
+    this.formGroup?.controls?.plan?.setValue(plan);
+  }
+  private _plan = PlanType.Free;
   @Input() providerId: string;
   @Output() onSuccess = new EventEmitter<OnSuccessArgs>();
   @Output() onCanceled = new EventEmitter<void>();
diff --git a/apps/web/src/app/settings/premium.component.html b/apps/web/src/app/settings/premium.component.html
index 13266fd9ca5..7fc2daae23b 100644
--- a/apps/web/src/app/settings/premium.component.html
+++ b/apps/web/src/app/settings/premium.component.html
@@ -45,7 +45,10 @@
     </li>
   </ul>
   <p class="text-lg" [ngClass]="{ 'mb-0': !selfHosted }">
-    {{ "premiumPrice" | i18n: (premiumPrice | currency: "$") }}
+    {{ "premiumPriceWithFamilyPlan" | i18n: (premiumPrice | currency: "$"):familyPlanMaxUserCount }}
+    <a routerLink="/create-organization" [queryParams]="{ plan: 'families' }">{{
+      "bitwardenFamiliesPlan" | i18n
+    }}</a>
   </p>
   <a
     bitButton
diff --git a/apps/web/src/app/settings/premium.component.ts b/apps/web/src/app/settings/premium.component.ts
index 49fbe09fa47..1699eeb6539 100644
--- a/apps/web/src/app/settings/premium.component.ts
+++ b/apps/web/src/app/settings/premium.component.ts
@@ -24,6 +24,7 @@ export class PremiumComponent implements OnInit {
   canAccessPremium = false;
   selfHosted = false;
   premiumPrice = 10;
+  familyPlanMaxUserCount = 6;
   storageGbPrice = 4;
   additionalStorage = 0;
 
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 4c48322cf33..2179028b60a 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -1822,6 +1822,22 @@
       }
     }
   },
+  "premiumPriceWithFamilyPlan": {
+    "message": "Go premium for just $PRICE$ /year, or get premium accounts for $FAMILYPLANUSERCOUNT$ users and unlimited family sharing with a ",
+    "placeholders": {
+      "price": {
+        "content": "$1",
+        "example": "$10"
+      },
+      "familyplanusercount": {
+        "content": "$2",
+        "example": "6"
+      }
+    }
+  },
+  "bitwardenFamiliesPlan": {
+    "message": "Bitwarden Families plan."
+  },
   "addons": {
     "message": "Addons"
   },