From a928fd20e678a6343bad468410b9eed0b440ed54 Mon Sep 17 00:00:00 2001
From: Alexandre Bourdin <abourdin@users.noreply.github.com>
Date: Wed, 22 Feb 2023 12:53:20 +0100
Subject: [PATCH] Merge pull request #11906 from
 overleaf/ii-react-subscription-dash-active-coupons

[web] Subscription dash show active coupons react migration

GitOrigin-RevId: 7a63505b31d828491b6ea812482376882354b4ee
---
 .../web/frontend/extracted-translations.json  |  1 +
 .../dashboard/states/active/active.tsx        |  2 +-
 .../components/shared/price-exceptions.tsx    | 22 +++++++++++++++++--
 .../dashboard/states/active/active.test.tsx   | 17 ++++++++++++++
 4 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 5aee55b2e6..a073ec4273 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/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": "",
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/active.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/active.tsx
index 3cc3c3d0cc..f44d4fa9f6 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/active.tsx
+++ b/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}
diff --git a/services/web/frontend/js/features/subscription/components/shared/price-exceptions.tsx b/services/web/frontend/js/features/subscription/components/shared/price-exceptions.tsx
index 17a2841682..b98e757f23 100644
--- a/services/web/frontend/js/features/subscription/components/shared/price-exceptions.tsx
+++ b/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>
+        </>
+      )}
     </>
   )
 }
diff --git a/services/web/test/frontend/features/subscription/components/dashboard/states/active/active.test.tsx b/services/web/test/frontend/features/subscription/components/dashboard/states/active/active.test.tsx
index 61044d9f66..12697d52f4 100644
--- a/services/web/test/frontend/features/subscription/components/dashboard/states/active/active.test.tsx
+++ b/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