Merge pull request #14007 from overleaf/tm-subscription-active-until-trial-ends

Show cancelled subscription will remain active until end of trial

GitOrigin-RevId: 277f477dc95869ff61cbb48cb2033ec55db3cf52

services/web/frontend/extracted-translations.json

@@ -990,6 +990,7 @@
   "subscription_canceled": "",
   "subscription_canceled_and_terminate_on_x": "",
   "subscription_will_remain_active_until_end_of_billing_period_x": "",
+  "subscription_will_remain_active_until_end_of_trial_period_x": "",
   "sure_you_want_to_cancel_plan_change": "",
   "sure_you_want_to_change_plan": "",
   "sure_you_want_to_delete": "",

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

@@ -35,9 +35,20 @@ export function CancelSubscriptionButton({
           {t('cancel_your_subscription')}
         </button>
       </p>
-      {!stillInATrial && (
-        <p>
-          <i>
+      <p>
+        <i>
+          {stillInATrial ? (
+            <Trans
+              i18nKey="subscription_will_remain_active_until_end_of_trial_period_x"
+              values={{
+                terminationDate: subscription.recurly.nextPaymentDueAt,
+              }}
+              components={[
+                // eslint-disable-next-line react/jsx-key
+                <strong />,
+              ]}
+            />
+          ) : (
             <Trans
               i18nKey="subscription_will_remain_active_until_end_of_billing_period_x"
               values={{
@@ -48,9 +59,9 @@ export function CancelSubscriptionButton({
                 <strong />,
               ]}
             />
-          </i>
-        </p>
-      )}
+          )}
+        </i>
+      </p>
     </>
   )
 }

services/web/locales/en.json

@@ -1586,6 +1586,7 @@
   "subscription_canceled": "Subscription Canceled",
   "subscription_canceled_and_terminate_on_x": " Your subscription has been canceled and will terminate on <0>__terminateDate__</0>. No further payments will be taken.",
   "subscription_will_remain_active_until_end_of_billing_period_x": "Your subscription will remain active until the end of your billing period, <0>__terminationDate__</0>.",
+  "subscription_will_remain_active_until_end_of_trial_period_x": "Your subscription will remain active until the end of your trial period, <0>__terminationDate__</0>.",
   "suggestion": "Suggestion",
   "support_lots_of_features": "We support almost all LaTeX features, including inserting images, bibliographies, equations, and much more! Read about all the exciting things you can do with __appName__ in our <0>__help_guides_link__</0>",
   "sure_you_want_to_cancel_plan_change": "Are you sure you want to revert your scheduled plan change? You will remain subscribed to the <0>__planName__</0> plan.",

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

@@ -169,14 +169,14 @@ describe('<ActiveSubscription />', function () {
     screen.getByText(subscription.recurly.totalLicenses)
   })
 
-  it('shows when trial ends and first payment collected', function () {
+  it('shows when trial ends and first payment collected and when subscription would become inactive if cancelled', function () {
     renderActiveSubscription(trialSubscription)
     screen.getByText('You’re on a free trial which ends on', { exact: false })
 
     const endDate = screen.getAllByText(
       trialSubscription.recurly.trialEndsAtFormatted!
     )
-    expect(endDate.length).to.equal(2)
+    expect(endDate.length).to.equal(3)
   })
 
   it('shows current discounts', function () {
@@ -218,9 +218,8 @@ describe('<ActiveSubscription />', function () {
       fireEvent.click(button)
     }
 
-    it('shows cancel UI and sends event', function () {
+    it('shows cancel UI', function () {
       renderActiveSubscription(annualActiveSubscription)
-      // before button clicked
       screen.getByText(
         'Your subscription will remain active until the end of your billing period',
         { exact: false }
@@ -232,6 +231,30 @@ describe('<ActiveSubscription />', function () {
         }
       )
       expect(dates.length).to.equal(2)
+      const button = screen.getByRole('button', {
+        name: 'Cancel Your Subscription',
+      })
+      expect(button).to.exist
+    })
+
+    it('shows cancel UI when still in a trial period', function () {
+      renderActiveSubscription(trialSubscription)
+      screen.getByText(
+        'Your subscription will remain active until the end of your trial period',
+        { exact: false }
+      )
+      const dates = screen.getAllByText(
+        trialSubscription.recurly.trialEndsAtFormatted!
+      )
+      expect(dates.length).to.equal(3)
+      const button = screen.getByRole('button', {
+        name: 'Cancel Your Subscription',
+      })
+      expect(button).to.exist
+    })
+
+    it('shows cancel prompt on button click and sends event', function () {
+      renderActiveSubscription(annualActiveSubscription)
 
       showConfirmCancelUI()