Fix basePrice to reflect the sponsorship (#1311)

* Fix basePrice to reflect the sponsorship

* Ran linter

* Add latest copy

* Remove unneeded if

* Fix times

* Stopped hardcoding basePrice

* Stopped hardcoding 40 in UI

* Switch to single small block

* Update jslib

* Revert "Update jslib"

This reverts commit 28534f2230.

* Revert "Remove unneeded if"

This reverts commit 5540b19998.

* Fix revert issue

src/app/settings/organization-plans.component.html

@@ -92,7 +92,7 @@
                 </small>
             </ng-template>
             <span *ngIf="selectableProduct.product != productTypes.Free">
-                <ng-container *ngIf="selectableProduct.basePrice">
+                <ng-container *ngIf="selectableProduct.basePrice && !acceptingSponsorship">
                     {{selectableProduct.basePrice / 12 | currency:'$'}} /{{'month' | i18n}},
                     {{'includesXUsers' | i18n : selectableProduct.baseSeats}}
                     <ng-container *ngIf="selectableProduct.hasAdditionalSeatsOption">
@@ -162,8 +162,14 @@
                         {{'basePrice' | i18n}}: {{ selectablePlan.basePrice / 12 | currency:'$'}} &times; 12
                         {{'monthAbbr' | i18n}}
                         =
-                        {{selectablePlan.basePrice | currency:'$'}}
-                        /{{'year' | i18n}}
+                        <ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
+                            <span style="text-decoration: line-through;">{{selectablePlan.basePrice | currency:'$'}}</span>
+                            {{'freeWithSponsorship' | i18n}}
+                        </ng-container>
+                        <ng-template #notAcceptingSponsorship>
+                            {{selectablePlan.basePrice | currency:'$'}}
+                            /{{'year' | i18n}}
+                        </ng-template>
                     </small>
                     <small *ngIf="selectablePlan.hasAdditionalSeatsOption">
                         <span *ngIf="selectablePlan.baseSeats">{{'additionalUsers' | i18n}}:</span>

src/app/settings/organization-plans.component.ts

@@ -68,6 +68,7 @@ export class OrganizationPlansComponent implements OnInit {
     productTypes = ProductType;
     formPromise: Promise<any>;
     singleOrgPolicyBlock: boolean = false;
+    discount = 0;
 
     plans: PlanResponse[];
 
@@ -120,15 +121,19 @@ export class OrganizationPlansComponent implements OnInit {
             validPlans = validPlans.filter(plan => plan.product !== ProductType.Free);
         }
 
+        validPlans = validPlans
+        .filter(plan => !plan.legacyYear
+            && !plan.disabled
+            && (plan.isAnnual || plan.product === this.productTypes.Free));
+
         if (this.acceptingSponsorship) {
-            validPlans = validPlans.filter(plan => plan.product === ProductType.Families);
+            const familyPlan = this.plans.find(plan => plan.type === PlanType.FamiliesAnnually);
+            this.discount = familyPlan.basePrice;
+            validPlans = [
+                familyPlan,
+            ];
         }
 
-        validPlans = validPlans
-            .filter(plan => !plan.legacyYear
-                && !plan.disabled
-                && (plan.isAnnual || plan.product === this.productTypes.Free));
-
         return validPlans;
     }
 
@@ -177,7 +182,7 @@ export class OrganizationPlansComponent implements OnInit {
         if (this.selectedPlan.hasPremiumAccessOption && this.premiumAccessAddon) {
             subTotal += this.selectedPlan.premiumAccessOptionPrice;
         }
-        return subTotal;
+        return subTotal - this.discount;
     }
 
     get freeTrial() {

src/locales/en/messages.json

@@ -4730,5 +4730,8 @@
   },
   "sponsorshipTokenHasExpired": {
     "message": "The sponsorship offer has expired."
+  },
+  "freeWithSponsorship": {
+    "message": "FREE with sponsorship"
   }
 }