Merge pull request #21937 from overleaf/em-total-per-year

Display "Total per year" for annual subscription change previews

GitOrigin-RevId: 90e6cd6ccc9f442b6ce1ec27f539202d2b6a7796

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: {

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,

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: {