[web] Update change plan flow for group-pricing-2025 (#22532)

GitOrigin-RevId: 23f6f5972b1d13b457c7c5e88f508b7cf022469a

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

@@ -236,6 +236,7 @@ async function userSubscriptionPage(req, res) {
     res,
     'bootstrap-5-subscription'
   )
+  await SplitTestHandler.promises.getAssignment(req, res, 'group-pricing-2025')
 
   const results =
     await SubscriptionViewModelBuilder.promises.buildUsersSubscriptionViewModel(

services/web/frontend/extracted-translations.json

@@ -830,6 +830,7 @@
   "lets_fix_your_errors": "",
   "library": "",
   "license_for_educational_purposes": "",
+  "license_for_educational_purposes_2025": "",
   "limited_offer": "",
   "limited_to_n_editors": "",
   "limited_to_n_editors_per_project": "",

services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx

@@ -25,6 +25,7 @@ import OLButton from '@/features/ui/components/ol/ol-button'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import OLNotification from '@/features/ui/components/ol/ol-notification'
 import { bsVersion } from '@/features/utils/bootstrap-5'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 const educationalPercentDiscount = 40
 const groupSizeForEducationalDiscount = 10
@@ -46,10 +47,16 @@ function GroupPlanCollaboratorCount({ planCode }: { planCode: string }) {
   return null
 }
 
-function EducationDiscountAppliedOrNot({ groupSize }: { groupSize: string }) {
+function EducationDiscountAppliedOrNot({
+  groupSize,
+  showGroupPricing2025,
+}: {
+  groupSize: string
+  showGroupPricing2025: boolean
+}) {
   const { t } = useTranslation()
   const size = parseInt(groupSize)
-  if (size >= groupSizeForEducationalDiscount) {
+  if (size >= groupSizeForEducationalDiscount || showGroupPricing2025) {
     return (
       <p className="applied">
         {t('educational_percent_discount_applied', {
@@ -145,6 +152,7 @@ export function ChangeToGroupModal() {
   const [error, setError] = useState(false)
   const [inflight, setInflight] = useState(false)
   const location = useLocation()
+  const showGroupPricing2025 = useFeatureFlag('group-pricing-2025')
 
   async function upgrade() {
     setError(false)
@@ -196,11 +204,13 @@ export function ChangeToGroupModal() {
           <OLModalTitle className="lh-sm">
             {t('customize_your_group_subscription')}
             <br />
-            <span className="h5">
-              {t('save_x_percent_or_more', {
-                percent: '30',
-              })}
-            </span>
+            {!showGroupPricing2025 && (
+              <span className="h5">
+                {t('save_x_percent_or_more', {
+                  percent: '30',
+                })}
+              </span>
+            )}
           </OLModalTitle>
         </OLModalHeader>
 
@@ -276,14 +286,16 @@ export function ChangeToGroupModal() {
                     </OLFormSelect>
                   </OLFormGroup>
 
-                  <OLFormGroup>
-                    <strong>
-                      {t('percent_discount_for_groups', {
-                        percent: educationalPercentDiscount,
-                        size: groupSizeForEducationalDiscount,
-                      })}
-                    </strong>
-                  </OLFormGroup>
+                  {!showGroupPricing2025 && (
+                    <OLFormGroup>
+                      <strong>
+                        {t('percent_discount_for_groups', {
+                          percent: educationalPercentDiscount,
+                          size: groupSizeForEducationalDiscount,
+                        })}
+                      </strong>
+                    </OLFormGroup>
+                  )}
 
                   <OLFormCheckbox
                     id="usage"
@@ -297,7 +309,24 @@ export function ChangeToGroupModal() {
                         setGroupPlanToChangeToUsage('enterprise')
                       }
                     }}
-                    label={t('license_for_educational_purposes')}
+                    label={
+                      showGroupPricing2025 ? (
+                        <Trans
+                          i18nKey="license_for_educational_purposes_2025"
+                          values={{ percent: educationalPercentDiscount }}
+                          shouldUnescape
+                          tOptions={{ interpolation: { escapeValue: true } }}
+                          components={[
+                            /* eslint-disable-next-line react/jsx-key */
+                            <strong />,
+                            /* eslint-disable-next-line react/jsx-key */
+                            <br />,
+                          ]}
+                        />
+                      ) : (
+                        t('license_for_educational_purposes')
+                      )
+                    }
                   />
                 </form>
               </div>
@@ -306,6 +335,7 @@ export function ChangeToGroupModal() {
               {groupPlanToChangeToUsage === 'educational' && (
                 <EducationDiscountAppliedOrNot
                   groupSize={groupPlanToChangeToSize}
+                  showGroupPricing2025={showGroupPricing2025}
                 />
               )}
             </div>

services/web/locales/en.json

@@ -1171,7 +1171,7 @@
   "library": "Library",
   "license": "License",
   "license_for_educational_purposes": "This license is for educational purposes (applies to students or faculty using __appName__ for teaching)",
-  "limited_offer": "Limited offer",
+  "license_for_educational_purposes_2025": "<0>__percent__% educational discount</0><1/>I confirm this subscription is for educational purposes (applies to students or faculty using __appName__ for teaching)",
   "limited_to_n_editors": "Limited to __count__ editor",
   "limited_to_n_editors_per_project": "Limited to __count__ editor per project",
   "limited_to_n_editors_per_project_plural": "Limited to __count__ editors per project",