Feature/families for enterprise (#1300)

* Added manual routing

* Families for enterprise/account settings (#1290)

* Added sponsored families page

* Revert "Added manual routing"

This reverts commit a970ba78ffa98545176b636630e48115efcf51cc.

* Add messages to page

* Remove stages and simplify design

* Switch to new figma design

* Add screen reader

* Add calls to server

* Reorder methods

* Used to organization filters

* Connected page to server

* Add preliminary text to subscription page

* Sponsor existing family organization flow

* Update jslib

Co-authored-by: Matt Gibson <mgibson@bitwarden.com>

* Add revoke sponsorship flow

* Add spinner to send offer button

* Determine if subscription has sponsored items

* Work on subscription button

* Add  message for new family organization

* Families for enterprise/subscription page (#1292)

* Work on subscription button

* Determine if subscription has sponsored items

* Work on subscriptions page

* Add  message for new family organization

Co-authored-by: Matt Gibson <mgibson@bitwarden.com>

* Families for enterprise/redeem card (#1295)

* Add toast localization message

* Use helpers to property display sponsorship items

* Split table rows into component so buttons load (#1296)

* Split table rows into component so buttons load

* Update jslib

* Families for enterprise/localizations (#1299)

* Add more localizations

* Remove unneeded comments

* Fix help article

* Run linting

* Do not show redeem button if no orgs exist to redeem

* Implement new process for accepting sponsorships

* Hide business checkbox

* Update jslib

* Removed commented code

* Remove commented html

* Cleaned up imports

* Use proper message

* Remove merge conflict message

* Remove confusing comment

* Listened to PR feedback

* Remove unused property

* Update help text

* Fix aria labels

* Add try catch

* Made toast before emit

* Minor copy changes

* Update jslib

* Remove unneeded loading

Co-authored-by: Matt Gibson <mgibson@bitwarden.com>

src/app/settings/organization-plans.component.ts

@@ -48,6 +48,7 @@ export class OrganizationPlansComponent implements OnInit {
     @Input() organizationId: string;
     @Input() showFree = true;
     @Input() showCancel = false;
+    @Input() acceptingSponsorship = false;
     @Input() product: ProductType = ProductType.Free;
     @Input() plan: PlanType = PlanType.Free;
     @Input() providerId: string;
@@ -119,6 +120,10 @@ export class OrganizationPlansComponent implements OnInit {
             validPlans = validPlans.filter(plan => plan.product !== ProductType.Free);
         }
 
+        if (this.acceptingSponsorship) {
+            validPlans = validPlans.filter(plan => plan.product === ProductType.Families);
+        }
+
         validPlans = validPlans
             .filter(plan => !plan.legacyYear
                 && !plan.disabled
@@ -189,6 +194,16 @@ export class OrganizationPlansComponent implements OnInit {
         return (this.subtotal + this.taxCharges) || 0;
     }
 
+    get paymentDesc() {
+        if (this.acceptingSponsorship) {
+            return this.i18nService.t('paymentSponsored');
+        } else if (this.freeTrial && this.createOrganization) {
+            return this.i18nService.t('paymentChargedWithTrial');
+        } else {
+            return this.i18nService.t('paymentCharged', this.i18nService.t(this.selectedPlanInterval));
+        }
+    }
+
     changedProduct() {
         this.plan = this.selectablePlans[0].type;
         if (!this.selectedPlan.hasPremiumAccessOption) {
@@ -235,7 +250,7 @@ export class OrganizationPlansComponent implements OnInit {
         }
 
         try {
-            const doSubmit = async () => {
+            const doSubmit = async (): Promise<string> => {
                 let orgId: string = null;
                 if (this.createOrganization) {
                     const shareKey = await this.cryptoService.makeShareKey();
@@ -259,12 +274,16 @@ export class OrganizationPlansComponent implements OnInit {
 
                 await this.apiService.refreshIdentityToken();
                 await this.syncService.fullSync(true);
-                this.router.navigate(['/organizations/' + orgId]);
+                if (!this.acceptingSponsorship) {
+                    this.router.navigate(['/organizations/' + orgId]);
+                }
+
+                return orgId;
             };
 
             this.formPromise = doSubmit();
-            await this.formPromise;
-            this.onSuccess.emit();
+            const orgId = await this.formPromise;
+            this.onSuccess.emit({ organizationId: orgId });
         } catch (e) {
             this.logService.error(e);
         }