From d84d4dd093789ff1d0e8fb7a0c8b19f16b325d28 Mon Sep 17 00:00:00 2001
From: Eric Mc Sween <5454374+emcsween@users.noreply.github.com>
Date: Mon, 18 Nov 2024 10:23:26 -0500
Subject: [PATCH] Merge pull request #21937 from overleaf/em-total-per-year

Display "Total per year" for annual subscription change previews

GitOrigin-RevId: 90e6cd6ccc9f442b6ce1ec27f539202d2b6a7796
---
 .../src/Features/Subscription/SubscriptionController.js    | 7 +++++++
 .../components/preview-subscription-change/root.tsx        | 6 +++++-
 .../web/types/subscription/subscription-change-preview.ts  | 3 +++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/services/web/app/src/Features/Subscription/SubscriptionController.js b/services/web/app/src/Features/Subscription/SubscriptionController.js
index 04bd425084..4f6e3d4287 100644
--- a/services/web/app/src/Features/Subscription/SubscriptionController.js
+++ b/services/web/app/src/Features/Subscription/SubscriptionController.js
@@ -29,6 +29,7 @@ const HttpErrorHandler = require('../Errors/HttpErrorHandler')
 const { URLSearchParams } = require('url')
 const RecurlyClient = require('./RecurlyClient')
 const { AI_ADD_ON_CODE } = require('./RecurlyEntities')
+const PlansLocator = require('./PlansLocator')
 
 /**
  * @import { SubscriptionChangeDescription } from '../../../../types/subscription/subscription-change-preview'
@@ -908,11 +909,17 @@ function makeChangePreview(
   paymentMethod
 ) {
   const subscription = subscriptionChange.subscription
+  const nextPlan = PlansLocator.findLocalPlanInSettings(
+    subscriptionChange.nextPlanCode
+  )
   return {
     change: subscriptionChangeDescription,
     currency: subscription.currency,
     immediateCharge: subscriptionChange.immediateCharge,
     paymentMethod: paymentMethod.toString(),
+    nextPlan: {
+      annual: nextPlan.annual ?? false,
+    },
     nextInvoice: {
       date: subscription.periodEnd.toISOString(),
       plan: {
diff --git a/services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx b/services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx
index bf625b44ed..bcf51e7891 100644
--- a/services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx
+++ b/services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx
@@ -115,7 +115,11 @@ function PreviewSubscriptionChange() {
               )}
 
               <Row className="mt-1">
-                <Col xs={9}>{t('total_per_month')}</Col>
+                <Col xs={9}>
+                  {preview.nextPlan.annual
+                    ? t('total_per_year')
+                    : t('total_per_month')}
+                </Col>
                 <Col xs={3} className="text-right">
                   {formatCurrencyLocalized(
                     preview.nextInvoice.total,
diff --git a/services/web/types/subscription/subscription-change-preview.ts b/services/web/types/subscription/subscription-change-preview.ts
index cea493ae65..dab0970151 100644
--- a/services/web/types/subscription/subscription-change-preview.ts
+++ b/services/web/types/subscription/subscription-change-preview.ts
@@ -3,6 +3,9 @@ export type SubscriptionChangePreview = {
   currency: string
   paymentMethod: string
   immediateCharge: number
+  nextPlan: {
+    annual: boolean
+  }
   nextInvoice: {
     date: string
     plan: {