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
This commit is contained in:
Matt Gibson 2021-12-01 19:48:05 -06:00 committed by GitHub
parent bca7c14319
commit d9231ae3f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 42 additions and 32 deletions

View File

@ -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,20 +35,23 @@
</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>

View File

@ -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>

View File

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

View File

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