Merge pull request #11885 from overleaf/ab-personal-sub-custom-react

[web] Display a message for custom personal subscriptions in React dash

GitOrigin-RevId: c70986ffacfdfdeccd3675385e2e5dba1a2ad61f

services/web/test/frontend/features/subscription/components/dashboard/personal-subscription.test.tsx

@@ -4,6 +4,7 @@ import PersonalSubscription from '../../../../../../frontend/js/features/subscri
 import {
   annualActiveSubscription,
   canceledSubscription,
+  customSubscription,
   pastDueExpiredSubscription,
 } from '../../fixtures/subscriptions'
 import {
@@ -25,6 +26,18 @@ describe('<PersonalSubscription />', function () {
     })
   })
 
+  describe('custom subscription', function () {
+    it('displays contact support message', function () {
+      renderWithSubscriptionDashContext(<PersonalSubscription />, {
+        metaTags: [{ name: 'ol-subscription', value: customSubscription }],
+      })
+
+      screen.getByText('Please', { exact: false })
+      screen.getByText('contact support', { exact: false })
+      screen.getByText('to make changes to your plan', { exact: false })
+    })
+  })
+
   describe('subscription states  ', function () {
     it('renders the active dash', function () {
       renderWithSubscriptionDashContext(<PersonalSubscription />, {
@@ -44,7 +57,7 @@ describe('<PersonalSubscription />', function () {
         'Your subscription has been canceled and will terminate on',
         { exact: false }
       )
-      screen.getByText(canceledSubscription.recurly.nextPaymentDueAt, {
+      screen.getByText(canceledSubscription.recurly!.nextPaymentDueAt, {
         exact: false,
       })
 

services/web/test/frontend/features/subscription/components/dashboard/states/active/active.test.tsx

@@ -1,7 +1,7 @@
 import { expect } from 'chai'
 import { fireEvent, screen } from '@testing-library/react'
 import * as eventTracking from '../../../../../../../../frontend/js/infrastructure/event-tracking'
-import { Subscription } from '../../../../../../../../types/subscription/dashboard/subscription'
+import { RecurlySubscription } from '../../../../../../../../types/subscription/dashboard/subscription'
 import {
   annualActiveSubscription,
   groupActiveSubscription,
@@ -26,7 +26,7 @@ describe('<ActiveSubscription />', function () {
     sendMBSpy.restore()
   })
 
-  function expectedInActiveSubscription(subscription: Subscription) {
+  function expectedInActiveSubscription(subscription: RecurlySubscription) {
     // sentence broken up by bolding
     screen.getByText('You are currently subscribed to the', { exact: false })
     screen.getByText(subscription.plan.name, { exact: false })

services/web/test/frontend/features/subscription/fixtures/subscriptions.tsx

@@ -1,6 +1,7 @@
 import {
+  CustomSubscription,
   GroupSubscription,
-  Subscription,
+  RecurlySubscription,
 } from '../../../../../types/subscription/dashboard/subscription'
 const dateformat = require('dateformat')
 const today = new Date()
@@ -12,7 +13,7 @@ const sevenDaysFromTodayFormatted = dateformat(
   'dS mmmm yyyy'
 )
 
-export const annualActiveSubscription: Subscription = {
+export const annualActiveSubscription: RecurlySubscription = {
   manager_ids: ['abc123'],
   member_ids: [],
   invited_emails: [],
@@ -51,7 +52,7 @@ export const annualActiveSubscription: Subscription = {
   },
 }
 
-export const annualActiveSubscriptionEuro: Subscription = {
+export const annualActiveSubscriptionEuro: RecurlySubscription = {
   manager_ids: ['abc123'],
   member_ids: [],
   invited_emails: [],
@@ -90,7 +91,7 @@ export const annualActiveSubscriptionEuro: Subscription = {
   },
 }
 
-export const annualActiveSubscriptionPro: Subscription = {
+export const annualActiveSubscriptionPro: RecurlySubscription = {
   manager_ids: ['abc123'],
   member_ids: [],
   invited_emails: [],
@@ -128,7 +129,7 @@ export const annualActiveSubscriptionPro: Subscription = {
   },
 }
 
-export const pastDueExpiredSubscription: Subscription = {
+export const pastDueExpiredSubscription: RecurlySubscription = {
   manager_ids: ['abc123'],
   member_ids: [],
   invited_emails: [],
@@ -167,7 +168,7 @@ export const pastDueExpiredSubscription: Subscription = {
   },
 }
 
-export const canceledSubscription: Subscription = {
+export const canceledSubscription: RecurlySubscription = {
   manager_ids: ['abc123'],
   member_ids: [],
   invited_emails: [],
@@ -206,7 +207,7 @@ export const canceledSubscription: Subscription = {
   },
 }
 
-export const pendingSubscriptionChange: Subscription = {
+export const pendingSubscriptionChange: RecurlySubscription = {
   manager_ids: ['abc123'],
   member_ids: [],
   invited_emails: [],
@@ -362,7 +363,7 @@ export const groupActiveSubscriptionWithPendingLicenseChange: GroupSubscription
     },
   }
 
-export const trialSubscription: Subscription = {
+export const trialSubscription: RecurlySubscription = {
   manager_ids: ['abc123'],
   member_ids: [],
   invited_emails: [],
@@ -410,3 +411,24 @@ export const trialSubscription: Subscription = {
     displayPrice: '$14.00',
   },
 }
+
+export const customSubscription: CustomSubscription = {
+  manager_ids: ['abc123'],
+  member_ids: [],
+  invited_emails: [],
+  groupPlan: false,
+  membersLimit: 0,
+  _id: 'def456',
+  admin_id: 'abc123',
+  teamInvites: [],
+  planCode: 'collaborator-annual',
+  recurlySubscription_id: 'ghi789',
+  plan: {
+    planCode: 'collaborator-annual',
+    name: 'Standard (Collaborator) Annual',
+    price_in_cents: 21900,
+    annual: true,
+    featureDescription: [],
+  },
+  customAccount: true,
+}

services/web/test/frontend/features/subscription/helpers/render-active-subscription.tsx

@@ -1,10 +1,10 @@
 import { ActiveSubscription } from '../../../../../frontend/js/features/subscription/components/dashboard/states/active/active'
-import { Subscription } from '../../../../../types/subscription/dashboard/subscription'
+import { RecurlySubscription } from '../../../../../types/subscription/dashboard/subscription'
 import { groupPlans, plans } from '../fixtures/plans'
 import { renderWithSubscriptionDashContext } from './render-with-subscription-dash-context'
 
 export function renderActiveSubscription(
-  subscription: Subscription,
+  subscription: RecurlySubscription,
   tags: { name: string; value: string | object | Array<object> }[] = [],
   currencyCode?: string
 ) {