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 d9231ae)
bitwarden · Dec 2, 2021 · 778700f · 778700f
1 parent 23048d4
commit 778700f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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."