From 778700f3993b3763cfbd9c667b6ecc81d74f05f7 Mon Sep 17 00:00:00 2001
From: Matt Gibson <mgibson@bitwarden.com>
Date: Wed, 1 Dec 2021 19:48:05 -0600
Subject: [PATCH] Fix families sponsorship redeem page (#1321)

* Display sponsorship warning when sponsoring an org

Move actions to drop down menu

Fix revoke cancel success popup

* Only show warning when sponsorship exists

(cherry picked from commit d9231ae3f38b2ea963ed4f8dda084b830c5b4c7e)
---
 .../sponsored-families.component.html         | 36 ++++++++++---------
 .../sponsoring-org-row.component.html         | 32 ++++++++++-------
 .../settings/sponsoring-org-row.component.ts  |  4 +--
 src/locales/en/messages.json                  |  2 +-
 4 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/src/app/settings/sponsored-families.component.html b/src/app/settings/sponsored-families.component.html
index 6d1c3899749..8ca5d8b21a2 100644
--- a/src/app/settings/sponsored-families.component.html
+++ b/src/app/settings/sponsored-families.component.html
@@ -24,7 +24,6 @@ <h1>{{'sponsoredFamilies' | i18n}}</h1>
                 <option value="">-- {{'select' | i18n}} --</option>
                 <option *ngFor="let o of availableSponsorshipOrgs" [ngValue]="o.id">{{o.name}}</option>
             </select>
-            <small>{{'sponsoredFamiliesLeaveCopy' | i18n}}</small>
         </div>
         <div class="form-group col-7">
             <label for="accountEmail">{{'sponsoredFamiliesEmail' | i18n}}:</label>
@@ -36,20 +35,23 @@ <h1>{{'sponsoredFamilies' | i18n}}</h1>
             </button>
         </div>
     </form>
-    <div *ngIf="anyActiveSponsorships">
-        <table class="table table-hover table-list">
-            <thead>
-                <tr>
-                    <th>{{'recipient' | i18n}}</th>
-                    <th>{{'sponsoringOrg' | i18n}}</th>
-                    <th></th>
-                </tr>
-            </thead>
-            <tbody>
-                <ng-container *ngFor="let o of activeSponsorshipOrgs">
-                    <tr sponsoring-org-row [sponsoringOrg]="o" (sponsorshipRemoved)="load(true)"></tr>
-                </ng-container>
-            </tbody>
-        </table>
-    </div>    
+    <ng-container *ngIf="anyActiveSponsorships">
+        <div class="border-bottom">
+            <table class="table table-hover table-list">
+                <thead>
+                    <tr>
+                        <th>{{'recipient' | i18n}}</th>
+                        <th>{{'sponsoringOrg' | i18n}}</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <ng-container *ngFor="let o of activeSponsorshipOrgs">
+                        <tr sponsoring-org-row [sponsoringOrg]="o" (sponsorshipRemoved)="load(true)"></tr>
+                    </ng-container>
+                </tbody>
+            </table>
+        </div>
+        <small>{{'sponsoredFamiliesLeaveCopy' | i18n}}</small>
+    </ng-container>
 </ng-container>
diff --git a/src/app/settings/sponsoring-org-row.component.html b/src/app/settings/sponsoring-org-row.component.html
index 497abe5c58c..6aceee2d92b 100644
--- a/src/app/settings/sponsoring-org-row.component.html
+++ b/src/app/settings/sponsoring-org-row.component.html
@@ -3,16 +3,24 @@
 </td>
 <td>{{sponsoringOrg.name}}</td>
 <td class="table-action-right">
-    <button #resendEmailBtn [appApiAction]="resendEmailPromise" class="btn btn-outline-primary btn-submit"
-        [disabled]="resendEmailBtn.loading" (click)="resendEmail()"
-        [attr.aria-label]="'resendEmailLabel' | i18n : sponsoringOrg.familySponsorshipFriendlyName">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-        <span>{{'resendEmail' | i18n }}</span>
-    </button>
-    <button #revokeSponsorshipBtn [appApiAction]="revokeSponsorshipPromise" class="btn btn-outline-danger btn-submit"
-        [disabled]="revokeSponsorshipBtn.loading" (click)="revokeSponsorship()"
-        [attr.aria-label]="'revokeAccount' | i18n : sponsoringOrg.familySponsorshipFriendlyName">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-        <span>{{'remove' | i18n}}</span>
-    </button>
+    <div class="dropdown" appListDropdown>
+        <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
+            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" appA11yTitle="{{'options' | i18n}}">
+            <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+        </button>
+        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+            <button #resendEmailBtn [appApiAction]="resendEmailPromise" class="dropdown-item btn-submit"
+                [disabled]="resendEmailBtn.loading" (click)="resendEmail()"
+                [attr.aria-label]="'resendEmailLabel' | i18n : sponsoringOrg.familySponsorshipFriendlyName">
+                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span>{{'resendEmail' | i18n }}</span>
+            </button>
+            <button #revokeSponsorshipBtn [appApiAction]="revokeSponsorshipPromise" class="dropdown-item text-danger btn-submit"
+                [disabled]="revokeSponsorshipBtn.loading" (click)="revokeSponsorship()"
+                [attr.aria-label]="'revokeAccount' | i18n : sponsoringOrg.familySponsorshipFriendlyName">
+                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span>{{'remove' | i18n}}</span>
+            </button>
+        </div>
+    </div>
 </td>
diff --git a/src/app/settings/sponsoring-org-row.component.ts b/src/app/settings/sponsoring-org-row.component.ts
index ff774666b58..c5ed67bd18f 100644
--- a/src/app/settings/sponsoring-org-row.component.ts
+++ b/src/app/settings/sponsoring-org-row.component.ts
@@ -32,8 +32,6 @@ export class SponsoringOrgRowComponent {
         try {
             this.revokeSponsorshipPromise = this.doRevokeSponsorship();
             await this.revokeSponsorshipPromise;
-            this.toasterService.popAsync('success', null, this.i18nService.t('reclaimedFreePlan'));
-            this.sponsorshipRemoved.emit();
         } catch (e) {
             this.logService.error(e);
         }
@@ -59,5 +57,7 @@ export class SponsoringOrgRowComponent {
         }
 
         await this.apiService.deleteRevokeSponsorship(this.sponsoringOrg.id);
+        this.toasterService.popAsync('success', null, this.i18nService.t('reclaimedFreePlan'));
+        this.sponsorshipRemoved.emit();
     }
 }
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 8b117d232be..74d61382589 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -4525,7 +4525,7 @@
     "message": "Enter your personal email to redeem Bitwarden Families"
   },
   "sponsoredFamiliesLeaveCopy": {
-    "message": "If you leave or are removed from this organization, your Families plan will expire at the end of the billing period."
+    "message": "If you leave or are removed from the sponsoring organization, your Families plan will expire at the end of the billing period."
   },
   "acceptBitwardenFamiliesHelp": {
     "message": "Accept offer for an existing organization or create a new Families organization."