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 d9231ae3f3)

src/app/settings/sponsored-families.component.html

@@ -24,7 +24,6 @@
                 <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,7 +35,8 @@
             </button>
         </div>
     </form>
-    <div *ngIf="anyActiveSponsorships">
+    <ng-container *ngIf="anyActiveSponsorships">
+        <div class="border-bottom">
             <table class="table table-hover table-list">
                 <thead>
                     <tr>
@@ -52,4 +52,6 @@
                 </tbody>
             </table>
         </div>
+        <small>{{'sponsoredFamiliesLeaveCopy' | i18n}}</small>
+    </ng-container>
 </ng-container>

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"
+    <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="btn btn-outline-danger btn-submit"
+            <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>

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

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."