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.

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>();

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

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;
 

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"
   },