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 value="">-- {{'select' | i18n}} --</option>
<option *ngFor="let o of availableSponsorshipOrgs" [ngValue]="o.id">{{o.name}}</option> <option *ngFor="let o of availableSponsorshipOrgs" [ngValue]="o.id">{{o.name}}</option>
</select> </select>
<small>{{'sponsoredFamiliesLeaveCopy' | i18n}}</small>
</div> </div>
<div class="form-group col-7"> <div class="form-group col-7">
<label for="accountEmail">{{'sponsoredFamiliesEmail' | i18n}}:</label> <label for="accountEmail">{{'sponsoredFamiliesEmail' | i18n}}:</label>
@ -36,20 +35,23 @@
</button> </button>
</div> </div>
</form> </form>
<div *ngIf="anyActiveSponsorships"> <ng-container *ngIf="anyActiveSponsorships">
<table class="table table-hover table-list"> <div class="border-bottom">
<thead> <table class="table table-hover table-list">
<tr> <thead>
<th>{{'recipient' | i18n}}</th> <tr>
<th>{{'sponsoringOrg' | i18n}}</th> <th>{{'recipient' | i18n}}</th>
<th></th> <th>{{'sponsoringOrg' | i18n}}</th>
</tr> <th></th>
</thead> </tr>
<tbody> </thead>
<ng-container *ngFor="let o of activeSponsorshipOrgs"> <tbody>
<tr sponsoring-org-row [sponsoringOrg]="o" (sponsorshipRemoved)="load(true)"></tr> <ng-container *ngFor="let o of activeSponsorshipOrgs">
</ng-container> <tr sponsoring-org-row [sponsoringOrg]="o" (sponsorshipRemoved)="load(true)"></tr>
</tbody> </ng-container>
</table> </tbody>
</div> </table>
</div>
<small>{{'sponsoredFamiliesLeaveCopy' | i18n}}</small>
</ng-container>
</ng-container> </ng-container>

View File

@ -3,16 +3,24 @@
</td> </td>
<td>{{sponsoringOrg.name}}</td> <td>{{sponsoringOrg.name}}</td>
<td class="table-action-right"> <td class="table-action-right">
<button #resendEmailBtn [appApiAction]="resendEmailPromise" class="btn btn-outline-primary btn-submit" <div class="dropdown" appListDropdown>
[disabled]="resendEmailBtn.loading" (click)="resendEmail()" <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
[attr.aria-label]="'resendEmailLabel' | i18n : sponsoringOrg.familySponsorshipFriendlyName"> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" appA11yTitle="{{'options' | i18n}}">
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i> <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
<span>{{'resendEmail' | i18n }}</span> </button>
</button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<button #revokeSponsorshipBtn [appApiAction]="revokeSponsorshipPromise" class="btn btn-outline-danger btn-submit" <button #resendEmailBtn [appApiAction]="resendEmailPromise" class="dropdown-item btn-submit"
[disabled]="revokeSponsorshipBtn.loading" (click)="revokeSponsorship()" [disabled]="resendEmailBtn.loading" (click)="resendEmail()"
[attr.aria-label]="'revokeAccount' | i18n : sponsoringOrg.familySponsorshipFriendlyName"> [attr.aria-label]="'resendEmailLabel' | i18n : sponsoringOrg.familySponsorshipFriendlyName">
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i> <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
<span>{{'remove' | i18n}}</span> <span>{{'resendEmail' | i18n }}</span>
</button> </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> </td>

View File

@ -32,8 +32,6 @@ export class SponsoringOrgRowComponent {
try { try {
this.revokeSponsorshipPromise = this.doRevokeSponsorship(); this.revokeSponsorshipPromise = this.doRevokeSponsorship();
await this.revokeSponsorshipPromise; await this.revokeSponsorshipPromise;
this.toasterService.popAsync('success', null, this.i18nService.t('reclaimedFreePlan'));
this.sponsorshipRemoved.emit();
} catch (e) { } catch (e) {
this.logService.error(e); this.logService.error(e);
} }
@ -59,5 +57,7 @@ export class SponsoringOrgRowComponent {
} }
await this.apiService.deleteRevokeSponsorship(this.sponsoringOrg.id); 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" "message": "Enter your personal email to redeem Bitwarden Families"
}, },
"sponsoredFamiliesLeaveCopy": { "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": { "acceptBitwardenFamiliesHelp": {
"message": "Accept offer for an existing organization or create a new Families organization." "message": "Accept offer for an existing organization or create a new Families organization."