Merge pull request #21938 from overleaf/jdt-checkout-success-add-on-wording

[Web] Adapt post checkout page for add-ons

GitOrigin-RevId: ee3ee28820f65977600a5aa47d85365148233bac

services/web/frontend/extracted-translations.json

@@ -1541,6 +1541,8 @@
   "thanks_for_confirming_your_email_address": "",
   "thanks_for_getting_in_touch": "",
   "thanks_for_subscribing": "",
+  "thanks_for_subscribing_to_plan_with_add_on": "",
+  "thanks_for_subscribing_to_the_add_on": "",
   "thanks_for_subscribing_you_help_sl": "",
   "thanks_settings_updated": "",
   "the_add_on_will_remain_active_until": "",

services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx

@@ -7,6 +7,12 @@ import OLRow from '@/features/ui/components/ol/ol-row'
 import OLCol from '@/features/ui/components/ol/ol-col'
 import OLPageContentCard from '@/features/ui/components/ol/ol-page-content-card'
 import OLNotification from '@/features/ui/components/ol/ol-notification'
+import {
+  AI_ADD_ON_CODE,
+  ADD_ON_NAME,
+  isStandaloneAiPlanCode,
+} from '../../data/add-on-codes'
+import { RecurlySubscription } from '../../../../../../types/subscription/dashboard/subscription'
 
 function SuccessfulSubscription() {
   const { t } = useTranslation()
@@ -17,6 +23,8 @@ function SuccessfulSubscription() {
 
   if (!subscription || !('recurly' in subscription)) return null
 
+  const onAiStandalonePlan = isStandaloneAiPlanCode(subscription.planCode)
+
   return (
     <div className="container">
       <OLRow>
@@ -66,12 +74,11 @@ function SuccessfulSubscription() {
                 </a>
               </p>
             )}
-            <p>
+            <ThankYouSection
-              {t('thanks_for_subscribing_you_help_sl', {
+              subscription={subscription}
-                planName: subscription.plan.name,
+              onAiStandalonePlan={onAiStandalonePlan}
-              })}
+            />
-            </p>
+            {!onAiStandalonePlan && <PremiumFeaturesLink />}
-            <PremiumFeaturesLink />
             <p>
               {t('need_anything_contact_us_at')}&nbsp;
               <a href={`mailto:${adminEmail}`} rel="noopener noreferrer">
@@ -79,19 +86,21 @@ function SuccessfulSubscription() {
               </a>
               .
             </p>
-            <p>
+            {!onAiStandalonePlan && (
-              <Trans
+              <p>
-                i18nKey="help_improve_overleaf_fill_out_this_survey"
+                <Trans
-                components={[
+                  i18nKey="help_improve_overleaf_fill_out_this_survey"
-                  // eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
+                  components={[
-                  <a
+                    // eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
-                    href="https://forms.gle/CdLNX9m6NLxkv1yr5"
+                    <a
-                    target="_blank"
+                      href="https://forms.gle/CdLNX9m6NLxkv1yr5"
-                    rel="noopener noreferrer"
+                      target="_blank"
-                  />,
+                      rel="noopener noreferrer"
-                ]}
+                    />,
-              />
+                  ]}
-            </p>
+                />
+              </p>
+            )}
             <p>
               {t('regards')},
               <br />
@@ -113,4 +122,45 @@ function SuccessfulSubscription() {
   )
 }
 
+function ThankYouSection({
+  subscription,
+  onAiStandalonePlan,
+}: {
+  subscription: RecurlySubscription
+  onAiStandalonePlan: boolean
+}) {
+  const { t } = useTranslation()
+  const hasAiAddon = subscription?.addOns?.some(
+    addOn => addOn.addOnCode === AI_ADD_ON_CODE
+  )
+
+  if (onAiStandalonePlan) {
+    return (
+      <p>
+        {t('thanks_for_subscribing_to_the_add_on', {
+          addOnName: ADD_ON_NAME,
+        })}
+      </p>
+    )
+  }
+  if (hasAiAddon) {
+    return (
+      <p>
+        {t('thanks_for_subscribing_to_plan_with_add_on', {
+          planName: subscription.plan.name,
+          addOnName: ADD_ON_NAME,
+        })}
+      </p>
+    )
+  }
+
+  return (
+    <p>
+      {t('thanks_for_subscribing_you_help_sl', {
+        planName: subscription.plan.name,
+      })}
+    </p>
+  )
+}
+
 export default SuccessfulSubscription

services/web/locales/en.json

@@ -2140,6 +2140,8 @@
   "thanks_for_confirming_your_email_address": "Thanks for confirming your email address",
   "thanks_for_getting_in_touch": "Thanks for getting in touch. Our team will get back to you by email as soon as possible.",
   "thanks_for_subscribing": "Thanks for subscribing!",
+  "thanks_for_subscribing_to_plan_with_add_on": "Thank you for subscribing to the __planName__ plan with the __addOnName__ add-on. It’s support from people like yourself that allows __appName__ to continue to grow and improve.",
+  "thanks_for_subscribing_to_the_add_on": "Thank you for subscribing to the __addOnName__ add-on. It’s support from people like yourself that allows __appName__ to continue to grow and improve.",
   "thanks_for_subscribing_you_help_sl": "Thank you for subscribing to the __planName__ plan. It’s support from people like yourself that allows __appName__ to continue to grow and improve.",
   "thanks_settings_updated": "Thanks, your settings have been updated.",
   "the_add_on_will_remain_active_until": "The add-on will remain active until the end of the current billing period.",