Merge pull request #8261 from overleaf/tm-show-correct-price-in-change-plans-list

Show correct prices in change plans list on subscription dashboard

GitOrigin-RevId: 194b516bae92564d33f50e1c0035d21b2ba246a9

services/web/app/src/Features/Subscription/SubscriptionViewModelBuilder.js

@@ -272,6 +272,11 @@ function buildUsersSubscriptionViewModel(user, callback) {
                 pendingSubscriptionTax,
               recurlySubscription.currency
             )
+          personalSubscription.recurly.currentPlanDisplayPrice =
+            SubscriptionFormatters.formatPrice(
+              recurlySubscription.unit_amount_in_cents + addOnPrice + tax,
+              recurlySubscription.currency
+            )
           const pendingTotalLicenses =
             (pendingPlan.membersLimit || 0) + pendingAdditionalLicenses
           personalSubscription.recurly.pendingAdditionalLicenses =

services/web/frontend/js/main/subscription-dashboard.js

@@ -210,6 +210,10 @@ App.controller(
   function ($scope, $modal, RecurlyPricing) {
     if (!ensureRecurlyIsSetup()) return
 
+    function stripCentsIfZero(displayPrice) {
+      return displayPrice ? displayPrice.replace(/\.00$/, '') : '...'
+    }
+
     $scope.changePlan = () =>
       $modal.open({
         templateUrl: 'confirmChangePlanModalTemplate',
@@ -239,6 +243,26 @@ App.controller(
       const planCode = plan.planCode
       const subscription = getMeta('ol-subscription')
       const { currency, taxRate } = subscription.recurly
+      if (subscription.recurly.displayPrice) {
+        if (subscription.pendingPlan?.planCode === planCode) {
+          $scope.displayPrice = stripCentsIfZero(
+            subscription.recurly.displayPrice
+          )
+          return
+        }
+        if (subscription.planCode === planCode) {
+          if (subscription.pendingPlan) {
+            $scope.displayPrice = stripCentsIfZero(
+              subscription.recurly.currentPlanDisplayPrice
+            )
+          } else {
+            $scope.displayPrice = stripCentsIfZero(
+              subscription.recurly.displayPrice
+            )
+          }
+          return
+        }
+      }
       $scope.displayPrice = '...' // Placeholder while we talk to recurly
       RecurlyPricing.loadDisplayPriceWithTax(planCode, currency, taxRate).then(
         recurlyPrice => {