fix(payments): on sub confirm show invoice date

packages/fxa-payments-server/src/components/PaymentConfirmation/en.ftl

@@ -12,6 +12,8 @@ payment-confirmation-thanks-subheading-account-exists = You’ll receive an emai
 
 payment-confirmation-order-heading = Order details
 payment-confirmation-invoice-number = Invoice #{ $invoiceNumber }
+# $invoiceDate (Date) - Start date of the latest invoice
+payment-confirmation-invoice-date = { $invoiceDate }
 payment-confirmation-details-heading-2 = Payment information
 
 payment-confirmation-amount = { $amount } per { $interval }

packages/fxa-payments-server/src/components/PaymentConfirmation/index.stories.tsx

@@ -29,7 +29,7 @@ const userProfile: Profile = {
 };
 
 const selectedPlan: Plan = {
-  plan_id: 'planId',
+  plan_id: '123doneProMonthly',
   product_id: 'fpnID',
   product_name: 'Firefox Private Network Pro',
   currency: 'usd',
@@ -50,7 +50,18 @@ const selectedPlanWithMetadata: Plan = {
 };
 
 const invoice: FirstInvoicePreview = {
-  line_items: [],
+  line_items: [
+    {
+      id: '123doneProMonthly',
+      name: 'Pro level',
+      currency: 'USD',
+      amount: 735,
+      period: {
+        start: Date.now() / 1000 - 86400 * 31,
+        end: Date.now() / 1000 + 86400 * 31,
+      },
+    },
+  ],
   subtotal: 735,
   subtotal_excluding_tax: null,
   total: 735,
@@ -127,22 +138,42 @@ export const CustomActionButtonLabelWithLocalization = storyWithProps(
 
 export const Paypal = storyWithProps({
   profile: userProfile,
-  selectedPlan: selectedPlan,
+  selectedPlan: {
+    ...selectedPlan,
+    plan_id: 'plan_123',
+  },
   customer: PAYPAL_CUSTOMER,
   productUrl: productUrl,
 });
 
 export const WithPasswordlessAccount = storyWithProps({
   profile: userProfile,
-  selectedPlan: selectedPlan,
+  selectedPlan: {
+    ...selectedPlan,
+    plan_id: 'plan_123',
+  },
   customer: PAYPAL_CUSTOMER,
   productUrl: productUrl,
   accountExists: false,
 });
 
 export const WithInvoicePreview = storyWithProps({
   profile: userProfile,
-  selectedPlan: selectedPlan,
+  selectedPlan: {
+    ...selectedPlan,
+    plan_id: 'plan_123',
+  },
+  customer: PAYPAL_CUSTOMER,
+  productUrl: productUrl,
+  invoice: invoice,
+});
+
+export const WithoutOrderDetails = storyWithProps({
+  profile: userProfile,
+  selectedPlan: {
+    ...selectedPlan,
+    plan_id: 'other_plan',
+  },
   customer: PAYPAL_CUSTOMER,
   productUrl: productUrl,
   invoice: invoice,

packages/fxa-payments-server/src/components/PaymentConfirmation/index.test.tsx

@@ -4,7 +4,10 @@ import '@testing-library/jest-dom/extend-expect';
 import TestRenderer from 'react-test-renderer';
 
 import PaymentConfirmation from './index';
-import { getLocalizedCurrency } from '../../lib/formats';
+import {
+  getLocalizedCurrency,
+  getLocalizedDateString,
+} from '../../lib/formats';
 import { Customer, Plan } from '../../store/types';
 import { MOCK_PLANS, getLocalizedMessage } from '../../lib/test-utils';
 import { getFtlBundle } from 'fxa-react/lib/test-utils';
@@ -36,7 +39,7 @@ const defaultButtonLabel = 'Continue to download';
 
 const selectedPlan: Plan = {
   active: true,
-  plan_id: 'planId',
+  plan_id: '123doneProMonthly',
   plan_name: 'Pro level',
   product_id: 'fpnID',
   product_name: 'Firefox Private Network Pro',
@@ -124,6 +127,12 @@ describe('PaymentConfirmation', () => {
     const footer = queryByTestId('footer');
     expect(footer).toBeVisible();
     expect(queryByText(defaultButtonLabel)).toBeInTheDocument();
+    const paymentOrder = queryByTestId('payment-confirmation-order');
+    expect(paymentOrder?.textContent).toBe(
+      `Order detailsInvoice #628031D-0002${getLocalizedDateString(
+        Date.now() / 1000 - 86400 * 31
+      )}`
+    );
   });
 
   it('renders as expected with no display name', () => {
@@ -303,6 +312,27 @@ describe('PaymentConfirmation', () => {
     expect(planPrice?.innerHTML).toContain('$7.35 monthly');
   });
 
+  it('renders without Order details if not available', () => {
+    const subject = () => {
+      return render(
+        <PaymentConfirmation
+          {...{
+            profile: userProfile,
+            selectedPlan: {
+              ...selectedPlan,
+              plan_id: 'other_plan_id',
+            },
+            customer,
+            productUrl,
+          }}
+        />
+      );
+    };
+
+    const { queryByTestId } = subject();
+    expect(queryByTestId('payment-confirmation-order')).not.toBeInTheDocument();
+  });
+
   describe('When payment_provider is "paypal"', () => {
     const subject = () => {
       return render(

packages/fxa-payments-server/src/components/PaymentConfirmation/index.tsx

@@ -1,6 +1,11 @@
 import React, { useContext } from 'react';
 import { Localized, useLocalization } from '@fluent/react';
-import { getLocalizedCurrency, formatPlanPricing } from '../../lib/formats';
+import {
+  getLocalizedCurrency,
+  formatPlanPricing,
+  getLocalizedDate,
+  getLocalizedDateString,
+} from '../../lib/formats';
 import { Plan, Profile, Customer } from '../../store/types';
 import { PaymentProviderDetails } from '../PaymentProviderDetails';
 import SubscriptionTitle from '../SubscriptionTitle';
@@ -47,12 +52,15 @@ export const PaymentConfirmation = ({
     config.featureFlags.useFirestoreProductConfigs
   ).successActionButtonLabel;
 
-  const invoiceNumber = (subscriptions[0] as WebSubscription).latest_invoice;
-  const date = new Date().toLocaleDateString(navigator.language, {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  });
+  const subscription = (subscriptions as WebSubscription[]).find(
+    (sub) => sub.plan_id === selectedPlan.plan_id
+  );
+  const invoiceNumber = subscription?.latest_invoice;
+  const latestInvoiceLineItem =
+    subscription?.latest_invoice_items.line_items.find(
+      (item) => item.id === selectedPlan.plan_id
+    );
+  const invoiceDate = latestInvoiceLineItem?.period.start;
 
   const finalAmount = invoice && amount ? invoice.total : amount;
   const planPrice = formatPlanPricing(
@@ -118,20 +126,33 @@ export const PaymentConfirmation = ({
           )}
         </header>
 
-        <div className="pb-6 row-divider-grey-200">
-          <Localized id="payment-confirmation-order-heading">
-            <h3 className={h3classes}>Order details</h3>
-          </Localized>
-          <div className={bottomRowClasses}>
-            <Localized
-              id="payment-confirmation-invoice-number"
-              vars={{ invoiceNumber }}
+        {
+          // Do not display Order details section if all data could not be retrieved
+          invoiceNumber && invoiceDate !== undefined && (
+            <div
+              className="pb-6 row-divider-grey-200"
+              data-testid="payment-confirmation-order"
             >
-              <p></p>
-            </Localized>
-            <p>{date}</p>
-          </div>
-        </div>
+              <Localized id="payment-confirmation-order-heading">
+                <h3 className={h3classes}>Order details</h3>
+              </Localized>
+              <div className={bottomRowClasses}>
+                <Localized
+                  id="payment-confirmation-invoice-number"
+                  vars={{ invoiceNumber }}
+                >
+                  <p>Invoice #{invoiceNumber}</p>
+                </Localized>
+                <Localized
+                  id="payment-confirmation-invoice-date"
+                  vars={{ invoiceDate: getLocalizedDate(invoiceDate) }}
+                >
+                  <p>{getLocalizedDateString(invoiceDate)}</p>
+                </Localized>
+              </div>
+            </div>
+          )
+        }
 
         <div className="pb-6 row-divider-grey-200">
           <Localized id="payment-confirmation-details-heading-2">

packages/fxa-payments-server/src/lib/mock-data.tsx

@@ -15,13 +15,34 @@ import { FilteredSetupIntent } from '../lib/apiClient';
 import { Customer, Plan, Profile } from '../store/types';
 
 const invoice: LatestInvoiceItems = {
-  line_items: [],
+  line_items: [
+    {
+      id: '123doneProMonthly',
+      name: 'Pro level',
+      currency: 'USD',
+      amount: 735,
+      period: {
+        start: Date.now() / 1000 - 86400 * 31,
+        end: Date.now() / 1000 + 86400 * 31,
+      },
+    },
+  ],
   subtotal: 735,
   subtotal_excluding_tax: null,
   total: 735,
   total_excluding_tax: null,
 };
 
+const invoicePayPal: LatestInvoiceItems = {
+  ...invoice,
+  line_items: [
+    {
+      ...invoice.line_items[0],
+      id: 'plan_123',
+    },
+  ],
+};
+
 export const PROFILE: Profile = {
   amrValues: [],
   avatar: 'http://placekitten.com/256/256?image=11',
@@ -160,7 +181,7 @@ export const PAYPAL_CUSTOMER: Customer = {
       product_id: 'prod_123',
       product_name: '123done Pro',
       latest_invoice: '628031D-0002',
-      latest_invoice_items: invoice,
+      latest_invoice_items: invoicePayPal,
       status: 'active',
       cancel_at_period_end: false,
       created: Date.now(),