feat(payments): revise acknowledgement copy on upgrades

packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/en.ftl

@@ -6,6 +6,10 @@ sub-update-copy =
     Your plan will change immediately, and you’ll be charged an adjusted
     amount for the rest of your billing cycle. Starting { $startingDate }
     you’ll be charged the full amount.
+sub-update-acknowledgment =
+    Your plan will change immediately, and you’ll be charged a prorated
+    amount today for the rest of this billing cycle. Starting { $startingDate }
+    you’ll be charged the full amount.
 sub-change-submit = Confirm change
 sub-update-current-plan-label = Current plan
 sub-update-new-plan-label = New plan

packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.stories.tsx

@@ -136,6 +136,16 @@ export const Default = storyWithContext({
     ...MOCK_PROPS,
     updateSubscriptionPlanAndRefresh: () => linkToUpgradeSuccess(),
   },
+  appContextValue: {
+    ...defaultAppContext,
+    config: {
+      ...defaultAppContext.config,
+      featureFlags: {
+        useStripeAutomaticTax: true,
+        useStripeInvoiceImmediately: true,
+      },
+    },
+  },
 });
 
 export const DefaultWithInclusiveTax = storyWithContext({
@@ -149,7 +159,10 @@ export const DefaultWithInclusiveTax = storyWithContext({
     navigatorLanguages: ['xx-pirate'],
     config: {
       ...defaultAppContext.config,
-      featureFlags: { useStripeAutomaticTax: true },
+      featureFlags: {
+        useStripeAutomaticTax: true,
+        useStripeInvoiceImmediately: true,
+      },
     },
   },
 });
@@ -165,7 +178,10 @@ export const DefaultWithExclusiveTax = storyWithContext({
     navigatorLanguages: ['xx-pirate'],
     config: {
       ...defaultAppContext.config,
-      featureFlags: { useStripeAutomaticTax: true },
+      featureFlags: {
+        useStripeAutomaticTax: true,
+        useStripeInvoiceImmediately: true,
+      },
     },
   },
 });
@@ -181,7 +197,10 @@ export const MultipleWithExclusiveTax = storyWithContext({
     navigatorLanguages: ['xx-pirate'],
     config: {
       ...defaultAppContext.config,
-      featureFlags: { useStripeAutomaticTax: true },
+      featureFlags: {
+        useStripeAutomaticTax: true,
+        useStripeInvoiceImmediately: true,
+      },
     },
   },
 });
@@ -194,6 +213,12 @@ export const LocalizedToPirate = storyWithContext({
   appContextValue: {
     ...defaultAppContext,
     navigatorLanguages: ['xx-pirate'],
+    config: {
+      ...defaultAppContext.config,
+      featureFlags: {
+        useStripeInvoiceImmediately: true,
+      },
+    },
   },
 });
 
@@ -206,6 +231,15 @@ export const Submitting = storyWithContext({
       error: null,
     },
   },
+  appContextValue: {
+    ...defaultAppContext,
+    config: {
+      ...defaultAppContext.config,
+      featureFlags: {
+        useStripeInvoiceImmediately: true,
+      },
+    },
+  },
 });
 
 export const InternalServerError = storyWithContext({
@@ -221,4 +255,13 @@ export const InternalServerError = storyWithContext({
     },
     resetUpdateSubscriptionPlan: linkToUpgradeOffer,
   },
+  appContextValue: {
+    ...defaultAppContext,
+    config: {
+      ...defaultAppContext.config,
+      featureFlags: {
+        useStripeInvoiceImmediately: true,
+      },
+    },
+  },
 });

packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.test.tsx

@@ -40,7 +40,7 @@ import {
   getLocalizedDateString,
 } from '../../../lib/formats';
 import { WebSubscription } from 'fxa-shared/subscriptions/types';
-import { updateConfig } from '../../../lib/config';
+import { config, updateConfig } from '../../../lib/config';
 import { deepCopy } from '../../../lib/test-utils';
 
 jest.mock('../../../lib/sentry');
@@ -90,11 +90,19 @@ async function rendersAsExpected(
     selectedPlan.interval_count === upgradeFromPlan.interval_count
       ? getLocalizedDateString(invoicePreview.line_items[0].period.end)
       : getLocalizedDateString(customerWebSubscription.current_period_end);
+
   expect(queryByTestId('plan-upgrade-subtotal')).not.toBeInTheDocument();
   expect(queryByTestId('plan-upgrade-tax-amount')).not.toBeInTheDocument();
-  expect(queryByTestId('sub-update-copy')).toHaveTextContent(
-    expectedInvoiceDate
-  );
+
+  if (config.featureFlags.useStripeInvoiceImmediately) {
+    expect(queryByTestId('sub-update-acknowledgment')).toHaveTextContent(
+      expectedInvoiceDate
+    );
+  } else {
+    expect(queryByTestId('sub-update-copy')).toHaveTextContent(
+      expectedInvoiceDate
+    );
+  }
 }
 
 describe('routes/Product/SubscriptionUpgrade', () => {

packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.tsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useContext } from 'react';
 import { Localized } from '@fluent/react';
 
 import { Plan, Customer, Profile } from '../../../store/types';
 import { SelectorReturns } from '../../../store/selectors';
 
 import * as Amplitude from '../../../lib/amplitude';
+import AppContext from '../../../lib/AppContext';
 
 import { getLocalizedDate, getLocalizedDateString } from '../../../lib/formats';
 import { useCallbackOnce } from '../../../lib/hooks';
@@ -53,6 +54,7 @@ export const SubscriptionUpgrade = ({
   updateSubscriptionPlanAndRefresh,
   resetUpdateSubscriptionPlan,
 }: SubscriptionUpgradeProps) => {
+  const { config } = useContext(AppContext);
   const ariaLabelledBy = 'error-plan-change-failed-header';
   const ariaDescribedBy = 'error-plan-change-failed-description';
   const validator = useValidatorState();
@@ -179,20 +181,35 @@ export const SubscriptionUpgrade = ({
             {...{ validator, onSubmit }}
           >
             <hr className="my-6" />
-            <Localized
-              id="sub-update-copy"
-              vars={{
-                startingDate: getLocalizedDate(nextInvoiceDate),
-              }}
-            >
-              <p data-testid="sub-update-copy">
-                Your plan will change immediately, and you’ll be charged an
-                adjusted amount for the rest of your billing cycle. Starting
-                {getLocalizedDateString(nextInvoiceDate)} you’ll be charged the
-                full amount.
-              </p>
-            </Localized>
-
+            {config.featureFlags.useStripeInvoiceImmediately ? (
+              <Localized
+                id="sub-update-acknowledgment"
+                vars={{
+                  startingDate: getLocalizedDate(nextInvoiceDate),
+                }}
+              >
+                <p data-testid="sub-update-acknowledgment">
+                  Your plan will change immediately, and you’ll be charged a
+                  prorated amount today for the rest of this billing cycle.
+                  Starting {getLocalizedDateString(nextInvoiceDate)} you’ll be
+                  charged the full amount.
+                </p>
+              </Localized>
+            ) : (
+              <Localized
+                id="sub-update-copy"
+                vars={{
+                  startingDate: getLocalizedDate(nextInvoiceDate),
+                }}
+              >
+                <p data-testid="sub-update-copy">
+                  Your plan will change immediately, and you’ll be charged an
+                  adjusted amount for the rest of your billing cycle. Starting
+                  {getLocalizedDateString(nextInvoiceDate)} you’ll be charged
+                  the full amount.
+                </p>
+              </Localized>
+            )}
             <hr className="my-6" />
 
             <PaymentConsentCheckbox