[web] improve messaging when upgrading from standalone add-on to premium plan + add-on (#29330)

* update userCanStartTrial to consider standalone add-ons
* display correct disabled message on hover
* display error message on preview plan purchase page

GitOrigin-RevId: 57c4e4267c1fd0ea892df8c0f5443ad74847147c

services/web/app/src/Features/Subscription/SubscriptionController.mjs

@@ -747,7 +747,19 @@ async function previewSubscription(req, res, next) {
   }
   // TODO: use PaymentService to fetch plan information
   const plan = await RecurlyClient.promises.getPlan(planCode)
-  const userId = SessionManager.getLoggedInUserId(req.session)
+  const user = SessionManager.getSessionUser(req.session)
+  const userId = user?._id
+
+  let trialDisabledReason
+  if (planCode.includes('_free_trial')) {
+    const trialEligibility = (
+      await Modules.promises.hooks.fire('userCanStartTrial', user)
+    )?.[0]
+    if (!trialEligibility.canStartTrial) {
+      trialDisabledReason = trialEligibility.disabledReason
+    }
+  }
+
   const subscriptionChange =
     await SubscriptionHandler.promises.previewSubscriptionChange(
       userId,
@@ -770,6 +782,7 @@ async function previewSubscription(req, res, next) {
   res.render('subscriptions/preview-change', {
     changePreview,
     redirectedPaymentErrorCode: req.query.errorCode,
+    trialDisabledReason,
   })
 }
 

services/web/app/views/subscriptions/preview-change.pug

@@ -16,6 +16,11 @@ block append meta
 		data-type='string'
 		content=redirectedPaymentErrorCode
 	)
+	meta(
+		name='ol-trialDisabledReason'
+		data-type='string'
+		content=trialDisabledReason
+	)
 
 block content
 	main#main-content.content.content-alt

services/web/frontend/extracted-translations.json

@@ -2284,6 +2284,7 @@
   "youre_adding_x_licenses_to_your_plan_giving_you_a_total_of_y_licenses": "",
   "youre_already_setup_for_sso": "",
   "youre_joining": "",
+  "youre_not_eligible_for_a_free_trial": "",
   "youre_on_free_trial_which_ends_on": "",
   "youre_signed_in_as_logout": "",
   "youve_added_more_licenses": "",

services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx

@@ -23,6 +23,7 @@ import { useFeatureFlag } from '@/shared/context/split-test-context'
 import PaymentErrorNotification from '@/features/subscription/components/shared/payment-error-notification'
 import handleStripePaymentAction from '../../util/handle-stripe-payment-action'
 import RedirectedPaymentErrorNotification from '../shared/redirected-payment-error-notification'
+import TrialDisabledNotification from './trial-disabled-notification'
 
 function PreviewSubscriptionChange() {
   const preview = getMeta(
@@ -101,6 +102,7 @@ function PreviewSubscriptionChange() {
       <OLRow>
         <OLCol md={{ offset: 2, span: 8 }}>
           <RedirectedPaymentErrorNotification />
+          <TrialDisabledNotification />
           <OLCard className="p-3">
             {preview.change.type === 'add-on-purchase' ? (
               <h1>

services/web/frontend/js/features/subscription/components/preview-subscription-change/trial-disabled-notification.tsx

@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next'
+import OLNotification from '@/shared/components/ol/ol-notification'
+import getMeta from '@/utils/meta'
+
+export default function TrialDisabledNotification() {
+  const { t } = useTranslation()
+  const trialDisabledReason = getMeta('ol-trialDisabledReason')
+
+  if (!trialDisabledReason) {
+    return null
+  }
+
+  return (
+    <OLNotification
+      className="mb-4"
+      aria-live="polite"
+      content={t('youre_not_eligible_for_a_free_trial')}
+      type="warning"
+    />
+  )
+}

services/web/frontend/js/utils/meta.ts

@@ -300,6 +300,7 @@ export interface Meta {
   'ol-translationLoadErrorMessage': string
   'ol-translationMaintenance': string
   'ol-translationUnableToJoin': string
+  'ol-trialDisabledReason': string | undefined
   'ol-usGovBannerVariant': USGovBannerVariant
   'ol-useShareJsHash': boolean
   'ol-user': User

services/web/locales/en.json

@@ -2844,12 +2844,13 @@
   "youre_adding_x_licenses_to_your_plan_giving_you_a_total_of_y_licenses": "You’re adding <0>__adding__</0> licenses to your plan giving you a total of <1>__total__</1> licenses.",
   "youre_already_setup_for_sso": "You’re already set up for SSO",
   "youre_joining": "You’re joining",
+  "youre_not_eligible_for_a_free_trial": "You’re not eligible for a free trial. Upgrade to start using premium features.",
   "youre_on_free_trial_which_ends_on": "You’re on a free trial which ends on <0>__date__</0>.",
   "youre_signed_in_as_logout": "You’re signed in as <0>__email__</0>. <1>Log out.</1>",
   "youre_signed_up": "You’re signed up",
   "youve_added_more_licenses": "You’ve added more license(s)!",
   "youve_added_x_more_licenses_to_your_subscription_invite_people": "You’ve added __users__ more license(s) to your subscription. <0>Invite people</0>.",
-  "youve_already_used_your_free_tial": "You’ve already used your free trial. Upgrade to continue using premium features.",
+  "youve_already_used_your_free_trial": "You’ve already used your free trial. Upgrade to continue using premium features.",
   "youve_lost_collaboration_access": "You’ve lost collaboration access",
   "youve_paused_your_subscription": "Your <0>__planName__</0> subscription is paused until <0>__reactivationDate__</0>, then it’ll automatically unpause. You can unpause early at any time.",
   "youve_unlinked_all_users": "You’ve unlinked all users",