Merge pull request #24164 from overleaf/ds-group-discount-10-percent-february

Group plans - Reintroduce 10% discount for group plans (Part 1, 2 & 3 Combined)

GitOrigin-RevId: f3a59a65bbd300cc06f70e179e794c32ed7970ce

services/web/frontend/extracted-translations.json

@@ -137,6 +137,7 @@
   "anyone_with_link_can_view": "",
   "app_on_x": "",
   "appearance": "",
+  "apply_educational_discount_description_with_group_discount": "",
   "apply_suggestion": "",
   "archive": "",
   "archive_projects": "",
@@ -199,8 +200,6 @@
   "cancel": "",
   "cancel_add_on": "",
   "cancel_anytime": "",
-  "cancel_group_price_warning": "",
-  "cancel_group_price_warning_heading": "",
   "cancel_my_account": "",
   "cancel_my_subscription": "",
   "cancel_personal_subscription_first": "",
@@ -892,7 +891,6 @@
   "let_us_know_what_you_think": "",
   "lets_get_those_premium_features": "",
   "library": "",
-  "license_for_educational_purposes_confirmation": "",
   "limited_document_history": "",
   "limited_offer": "",
   "limited_to_n_editors": "",
@@ -1417,6 +1415,7 @@
   "save_or_cancel-cancel": "",
   "save_or_cancel-or": "",
   "save_or_cancel-save": "",
+  "save_x_or_more": "",
   "saving": "",
   "saving_notification_with_seconds": "",
   "search": "",

services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/cancel-subscription.tsx

@@ -15,8 +15,6 @@ import ExtendTrialButton from './extend-trial-button'
 import { useLocation } from '../../../../../../../shared/hooks/use-location'
 import { debugConsole } from '@/utils/debugging'
 import OLButton from '@/features/ui/components/ol/ol-button'
-import moment from 'moment'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
 
 const planCodeToDowngradeTo = 'paid-personal'
 
@@ -172,12 +170,6 @@ export function CancelSubscription() {
     return <LoadingSpinner />
   }
 
-  const startDate = moment.utc(personalSubscription.recurly.account.created_at)
-  const pricingChangeEffectiveDate = moment.utc('2025-01-08T12:00:00Z')
-  const displayPricingWarning =
-    personalSubscription.plan.groupPlan &&
-    startDate.isBefore(pricingChangeEffectiveDate)
-
   async function handleCancelSubscription() {
     try {
       await runAsyncCancel(postJSON(cancelSubscriptionUrl))
@@ -191,19 +183,6 @@ export function CancelSubscription() {
 
   return (
     <>
-      {displayPricingWarning && (
-        <OLNotification
-          type="warning"
-          content={
-            <>
-              <h2 className="pricing-warning-heading">
-                {t('cancel_group_price_warning_heading')}
-              </h2>
-              <p>{t('cancel_group_price_warning')}</p>
-            </>
-          }
-        />
-      )}
       <div className="text-center">
         <p>
           <strong>{t('wed_love_you_to_stay')}</strong>

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

@@ -118,6 +118,7 @@ export function ChangeToGroupModal() {
   const { modal: contactModal, showModal: showContactModal } =
     useContactUsModal({ autofillProjectUrl: false })
   const groupPlans = getMeta('ol-groupPlans')
+  const showGroupDiscount = getMeta('ol-showGroupDiscount')
   const personalSubscription = getMeta('ol-subscription') as RecurlySubscription
   const [error, setError] = useState(false)
   const [inflight, setInflight] = useState(false)
@@ -172,6 +173,11 @@ export function ChangeToGroupModal() {
         <OLModalHeader closeButton>
           <OLModalTitle className="lh-sm">
             {t('customize_your_group_subscription')}
+            {showGroupDiscount && (
+              <p className="group-subscription-modal-title-discount">
+                {t('save_x_or_more', { percentage: '10%' })}
+              </p>
+            )}
           </OLModalTitle>
         </OLModalHeader>
 
@@ -259,20 +265,9 @@ export function ChangeToGroupModal() {
                         setGroupPlanToChangeToUsage('enterprise')
                       }
                     }}
-                    label={
-                      <Trans
-                        i18nKey="license_for_educational_purposes_confirmation"
-                        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 />,
-                        ]}
-                      />
-                    }
+                    label={t(
+                      'apply_educational_discount_description_with_group_discount'
+                    )}
                   />
                 </form>
               </div>

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

@@ -194,6 +194,7 @@ export interface Meta {
   'ol-showAiErrorAssistant': boolean
   'ol-showBrlGeoBanner': boolean
   'ol-showCouponField': boolean
+  'ol-showGroupDiscount': boolean
   'ol-showGroupsAndEnterpriseBanner': boolean
   'ol-showInrGeoBanner': boolean
   'ol-showLATAMBanner': boolean

services/web/frontend/stylesheets/app/plans.less

@@ -165,6 +165,22 @@
           outline: 0;
         }
 
+        .group-discount-bubble {
+          padding: var(--spacing-01) var(--spacing-04);
+          background-color: var(--green-10);
+          color: var(--green-50);
+          border-radius: var(--border-radius-full-new);
+          font-family: 'DM Mono', monospace;
+          font-feature-settings: 'ss05';
+          font-size: var(--font-size-01);
+          line-height: var(--line-height-01);
+          font-weight: 500;
+
+          @media (max-width: @screen-xs-max) {
+            display: none;
+          }
+        }
+
         @media (max-width: @screen-xs-max) {
           font-size: var(--font-size-02);
           line-height: var(--line-height-02);

services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss

@@ -37,6 +37,13 @@
  *  MODALS
  */
 
+.group-subscription-modal-title-discount {
+  @include body-base;
+
+  margin-top: var(--spacing-02);
+  margin-bottom: unset;
+}
+
 .group-subscription-modal {
   .circle {
     font-size: var(--font-size-06);