- {invoiceImmediately ? (
-
-
- {productDetails.name || product_name} (
- {formattedInterval.replace(/\w/, (firstLetter) =>
- firstLetter.toUpperCase()
- )}
- )
-
-
- ) : (
-
- List Price
-
- )}
+
+
+ {productDetails.name || product_name} (
+ {formattedInterval.replace(/\w/, (firstLetter) =>
+ firstLetter.toUpperCase()
+ )}
+ )
+
+
)}
- {invoiceImmediately && oneTimeCharge && (
+ {oneTimeCharge && (
<>
- Prorated Upgrade
+
+ Prorated Upgrade
+
(e.g. Better Upgrade Product (Monthly))
+ // only appears when there is exclusive tax
+ if (
+ invoicePreview?.subtotal_excluding_tax ||
+ invoicePreview?.total_excluding_tax
+ ) {
expect(
queryByTestId(`sub-update-new-plan-${selectedPlan.interval}`)
).toBeInTheDocument();
+ }
- if (
- !!invoicePreview.one_time_charge &&
- invoicePreview.one_time_charge > 0
- ) {
- expect(queryByTestId('sub-update-prorated-upgrade')).toBeInTheDocument();
- expect(queryByTestId('prorated-amount')).toBeInTheDocument();
- } else {
- expect(
- queryByTestId('sub-update-prorated-upgrade')
- ).not.toBeInTheDocument();
- expect(queryByTestId('prorated-amount')).not.toBeInTheDocument();
- }
+ if (!!invoicePreview.one_time_charge && invoicePreview.one_time_charge > 0) {
+ expect(queryByTestId('sub-update-prorated-upgrade')).toBeInTheDocument();
+ expect(queryByTestId('prorated-amount')).toBeInTheDocument();
} else {
- expect(queryByTestId('sub-update-copy')).toHaveTextContent(
- expectedInvoiceDate
- );
+ expect(
+ queryByTestId('sub-update-prorated-upgrade')
+ ).not.toBeInTheDocument();
+ expect(queryByTestId('prorated-amount')).not.toBeInTheDocument();
}
}
diff --git a/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.tsx b/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.tsx
index 1c8097af3a..c85cba9f1e 100644
--- a/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.tsx
+++ b/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.tsx
@@ -1,11 +1,10 @@
-import React, { useCallback, useEffect, useState, useContext } from 'react';
+import React, { useCallback, useEffect, useState } 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';
@@ -61,7 +60,6 @@ export const SubscriptionUpgrade = ({
resetUpdateSubscriptionPlan,
discount,
}: SubscriptionUpgradeProps) => {
- const { config } = useContext(AppContext);
const ariaLabelledBy = 'error-plan-change-failed-header';
const ariaDescribedBy = 'error-plan-change-failed-description';
const validator = useValidatorState();
@@ -201,35 +199,21 @@ export const SubscriptionUpgrade = ({
{...{ validator, onSubmit }}
>
- {config.featureFlags.useStripeInvoiceImmediately ? (
-
-
- 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.
-
-
- ) : (
-
-
- 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.
-
-
- )}
+
+
+
+ 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.
+
+
+