Merge pull request #16293 from overleaf/jdt-grammarly-perm-advert

Grammarly Permanent Collaboration

GitOrigin-RevId: 0ef47cb7dcb4b175c4d5f3a3c2dbe2e6590a69de

services/web/frontend/js/features/source-editor/components/grammarly-advert.tsx

@@ -13,12 +13,9 @@ export default function GrammarlyAdvert() {
     const hasDismissedGrammarlyAdvert = customLocalStorage.getItem(
       'editor.has_dismissed_grammarly_advert'
     )
-    // promotion ends on december 16th, 2023 at 00:00 UTC
-    const promotionEnded =
-      new Date() > new Date(Date.UTC(2023, 11, 16, 0, 0, 0))
 
     const showGrammarlyAdvert =
-      grammarlyInstalled && !hasDismissedGrammarlyAdvert && !promotionEnded
+      grammarlyInstalled && !hasDismissedGrammarlyAdvert
 
     if (showGrammarlyAdvert) {
       eventTracking.sendMB('grammarly-advert-shown')
@@ -35,8 +32,36 @@ export default function GrammarlyAdvert() {
   if (!show) {
     return null
   }
+  // promotion ends on december 16th, 2023 at 00:00 UTC
+  const promotionEnded = new Date() > new Date(Date.UTC(2023, 11, 16, 0, 0, 0))
 
-  return (
+  const permanentOffer = (
+    <div className="alert alert-info grammarly-advert" role="alert">
+      <div className="grammarly-advert-container">
+        <div className="advert-content">
+          <p>
+            Love Grammarly? Then you're in luck! Get 25% off Grammarly Premium
+            with this exclusive offer for Overleaf users.
+          </p>
+          <a
+            className="advert-link"
+            onClick={() => eventTracking.sendMB('grammarly-advert-clicked')}
+            href="https://grammarly.go2cloud.org/aff_c?offer_id=373&aff_id=142242"
+            target="_blank"
+            rel="noopener"
+          >
+            Claim my discount
+          </a>
+        </div>
+        <div className="grammarly-notification-close-btn">
+          <button aria-label="Close" onClick={handleClose}>
+            <MaterialIcon type="close" />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+  const promoOffer = (
     <div className="alert alert-info grammarly-advert" role="alert">
       <div className="grammarly-advert-container">
         <div className="advert-content">
@@ -62,4 +87,5 @@ export default function GrammarlyAdvert() {
       </div>
     </div>
   )
+  return promotionEnded ? permanentOffer : promoOffer
 }