Merge pull request #22821 from overleaf/kh-cop-on-upgrade-modal

[web] limit COP group plans to 20 seats in upgrade modal

GitOrigin-RevId: b1d2713b978d0269892d8f547eeccc5ab702ea77

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

@@ -38,6 +38,9 @@ function formatGroupPlansDataForDash() {
   return {
     plans: [...groupPlanModalOptions.plan_codes],
     sizes: [...groupPlanModalOptions.sizes],
+    sizesForHighDenominationCurrencies: [
+      ...groupPlanModalOptions.sizesForHighDenominationCurrencies,
+    ],
     usages: [...groupPlanModalOptions.usages],
     priceByUsageTypeAndSize: JSON.parse(JSON.stringify(GroupPlansData)),
   }

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useTranslation, Trans } from 'react-i18next'
-import { Subscription } from '../../../../../../../../../../types/subscription/dashboard/subscription'
+import { RecurlySubscription } from '../../../../../../../../../../types/subscription/dashboard/subscription'
 import { PriceForDisplayData } from '../../../../../../../../../../types/subscription/plan'
 import { postJSON } from '../../../../../../../../infrastructure/fetch-json'
 import getMeta from '../../../../../../../../utils/meta'
@@ -118,7 +118,7 @@ export function ChangeToGroupModal() {
   const { modal: contactModal, showModal: showContactModal } =
     useContactUsModal({ autofillProjectUrl: false })
   const groupPlans = getMeta('ol-groupPlans')
-  const personalSubscription = getMeta('ol-subscription') as Subscription
+  const personalSubscription = getMeta('ol-subscription') as RecurlySubscription
   const [error, setError] = useState(false)
   const [inflight, setInflight] = useState(false)
   const location = useLocation()
@@ -155,10 +155,16 @@ export function ChangeToGroupModal() {
     !groupPlans ||
     !groupPlans.plans ||
     !groupPlans.sizes ||
+    !groupPlans.sizesForHighDenominationCurrencies ||
     !groupPlanToChangeToCode
   )
     return null
 
+  const isUsingCOP = personalSubscription.recurly?.currency === 'COP'
+  const groupPlanSizes = isUsingCOP
+    ? groupPlans.sizesForHighDenominationCurrencies
+    : groupPlans.sizes
+
   return (
     <>
       <UserProvider>{contactModal}</UserProvider>
@@ -241,7 +247,7 @@ export function ChangeToGroupModal() {
                       value={groupPlanToChangeToSize}
                       onChange={e => setGroupPlanToChangeToSize(e.target.value)}
                     >
-                      {groupPlans.sizes.map(size => (
+                      {groupPlanSizes.map(size => (
                         <option key={`size-option-${size}`}>{size}</option>
                       ))}
                     </OLFormSelect>
@@ -352,7 +358,7 @@ export function ChangeToGroupModal() {
               onClick={showContactModal}
             >
               {t('need_more_than_x_licenses', {
-                x: 50,
+                x: isUsingCOP ? 20 : 50,
               })}{' '}
               {t('please_get_in_touch')}
             </OLButton>

services/web/test/frontend/features/subscription/fixtures/plans.ts

@@ -227,6 +227,7 @@ export const groupPlans: GroupPlans = {
     },
   ],
   sizes: ['2', '3', '4', '5', '10', '20', '50'],
+  sizesForHighDenominationCurrencies: ['2', '3', '4', '5', '10', '20'],
 }
 
 export const groupPriceByUsageTypeAndSize = {

services/web/test/unit/src/Subscription/SubscriptionControllerTests.js

@@ -97,6 +97,7 @@ describe('SubscriptionController', function () {
           },
         ],
         sizes: ['42'],
+        sizesForHighDenominationCurrencies: ['42'],
         usages: [{ code: 'foo', display: 'Foo' }],
       },
       apis: {

services/web/types/subscription/dashboard/group-plans.ts

@@ -4,4 +4,5 @@ export type GroupPlans = {
     code: string
   }[]
   sizes: string[]
+  sizesForHighDenominationCurrencies: string[]
 }