Merge pull request #11906 from overleaf/ii-react-subscription-dash-active-coupons

[web] Subscription dash show active coupons react migration

GitOrigin-RevId: 7a63505b31d828491b6ea812482376882354b4ee

services/web/frontend/extracted-translations.json

@@ -146,6 +146,7 @@
   "country_flag": "",
   "coupon_code": "",
   "coupon_code_is_not_valid_for_selected_plan": "",
+  "coupons_not_included": "",
   "create": "",
   "create_first_project": "",
   "create_new_folder": "",

services/web/frontend/js/features/subscription/components/dashboard/states/active/active.tsx

@@ -96,7 +96,7 @@ export function ActiveSubscription({
         />
       </p>
       <PremiumFeaturesLink />
-      <PriceExceptions />
+      <PriceExceptions subscription={subscription} />
       <p>
         <a
           href={subscription.recurly.billingDetailsLink}

services/web/frontend/js/features/subscription/components/shared/price-exceptions.tsx

@@ -1,13 +1,31 @@
 import { useTranslation } from 'react-i18next'
+import { Subscription } from '../../../../../../types/subscription/dashboard/subscription'
 
-export function PriceExceptions() {
+type PriceExceptionsProps = {
+  subscription: Subscription
+}
+
+export function PriceExceptions({ subscription }: PriceExceptionsProps) {
   const { t } = useTranslation()
+  const { activeCoupons } = subscription.recurly
+
   return (
     <>
       <p>
         <i>* {t('subject_to_additional_vat')}</i>
       </p>
-      {/* TODO: activeCoupons */}
+      {activeCoupons.length > 0 && (
+        <>
+          <i>* {t('coupons_not_included')}</i>
+          <ul>
+            {activeCoupons.map(coupon => (
+              <li key={coupon.id}>
+                <i>{coupon.description || coupon.name}</i>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
     </>
   )
 }

services/web/test/frontend/features/subscription/components/dashboard/states/active/active.test.tsx

@@ -12,6 +12,7 @@ import {
 import sinon from 'sinon'
 import { cleanUpContext } from '../../../../helpers/render-with-subscription-dash-context'
 import { renderActiveSubscription } from '../../../../helpers/render-active-subscription'
+import { cloneDeep } from 'lodash'
 
 describe('<ActiveSubscription />', function () {
   let sendMBSpy: sinon.SinonSpy
@@ -169,6 +170,22 @@ describe('<ActiveSubscription />', function () {
     expect(endDate.length).to.equal(2)
   })
 
+  it('shows current discounts', function () {
+    const subscriptionWithActiveCoupons = cloneDeep(annualActiveSubscription)
+    subscriptionWithActiveCoupons.recurly.activeCoupons = [
+      {
+        name: 'fake coupon name',
+      },
+    ]
+    renderActiveSubscription(subscriptionWithActiveCoupons)
+    screen.getByText(
+      /this does not include your current discounts, which will be applied automatically before your next payment/i
+    )
+    screen.getByText(
+      subscriptionWithActiveCoupons.recurly.activeCoupons[0].name
+    )
+  })
+
   it('shows cancel UI and sends event', function () {
     renderActiveSubscription(annualActiveSubscription)
     // before button clicked