From ac9a631fe32a2602d02edf7fd011d0f9b252fd4f Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Wed, 20 Oct 2021 20:21:57 +0530
Subject: [PATCH] Updated copy for offer renewal info on offer screen

refs https://github.com/TryGhost/Team/issues/1162

- updates renewal info based on offer duration and cadence
---
 .../portal/src/components/pages/OfferPage.js  | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/ghost/portal/src/components/pages/OfferPage.js b/ghost/portal/src/components/pages/OfferPage.js
index db272ea120..73cc3bf136 100644
--- a/ghost/portal/src/components/pages/OfferPage.js
+++ b/ghost/portal/src/components/pages/OfferPage.js
@@ -399,6 +399,30 @@ export default class OfferPage extends React.Component {
         return '';
     }
 
+    renderOfferMessage({offer, product}) {
+        const discountDuration = offer.duration;
+        let durationLabel = '';
+        const originalPrice = this.getOriginalPrice({offer, product});
+        let renewsLabel = '';
+        if (discountDuration === 'once') {
+            durationLabel = `for first ${offer.cadence}`;
+            renewsLabel = `Renews at ${originalPrice}.`;
+        } else if (discountDuration === 'forever') {
+            durationLabel = `forever`;
+        } else if (discountDuration === 'repeating') {
+            const durationInMonths = offer.duration_in_months;
+            if (durationInMonths === 1) {
+                durationLabel = `for first month`;
+            } else {
+                durationLabel = `for first ${durationInMonths} months`;
+            }
+            renewsLabel = `Renews at ${originalPrice}.`;
+        }
+        return (
+            <p className="footnote">{this.getOffAmount({offer})} off {durationLabel}. {renewsLabel}</p>
+        );
+    }
+
     render() {
         const {pageData: offer, site} = this.context;
         if (!offer) {
@@ -427,7 +451,7 @@ export default class OfferPage extends React.Component {
                                 <h4 className="gh-portal-plan-name">{product.name} - {(offer.cadence === 'month' ? 'Monthly' : 'Yearly')}</h4>
                                 <p>{product.description}</p>
                                 {this.renderBenefits({product})}
-                                <p className="footnote">{this.getOffAmount({offer})} off for first year. Renews at {this.getOriginalPrice({offer, product})}</p>
+                                {this.renderOfferMessage({offer, product})}
                             </div>
                             <div className="gh-portal-offer-price">
                                 <div className="old">{getCurrencySymbol(price.currency)}{price.amount / 100}</div>