feat(payments-ui): Display whether coupon was applied to next bill

- adds in `[Promotion name] discount] will be applied` when coupon has been applied to the next invoice

Closes: PAY-3279, PAY-3283, PAY-3285

Author: xlisachan

libs/payments/customer/src/lib/invoice.manager.spec.ts

@@ -14,6 +14,7 @@ import {
   StripePriceFactory,
   StripePromotionCodeFactory,
   StripeResponseFactory,
+  StripeSubscriptionFactory,
   StripeUpcomingInvoiceFactory,
   StripeAddressFactory,
   StripeSubscriptionItemFactory,
@@ -295,6 +296,31 @@ describe('InvoiceManager', () => {
     });
   });
 
+  describe('previewUpcomingSubscription', () => {
+    it('returns upcoming invoice for a subscription', async () => {
+      const mockCustomer = StripeCustomerFactory({ currency: 'usd' });
+      const mockSubscription = StripeSubscriptionFactory();
+      const mockUpcomingInvoice = StripeResponseFactory(
+        StripeUpcomingInvoiceFactory()
+      );
+      const mockPreviewUpcomingInvoice = InvoicePreviewFactory();
+
+      jest
+        .spyOn(stripeClient, 'invoicesRetrieveUpcoming')
+        .mockResolvedValue(mockUpcomingInvoice);
+
+      mockedStripeInvoiceToFirstInvoicePreviewDTO.mockReturnValue(
+        mockPreviewUpcomingInvoice
+      );
+
+      const result = await invoiceManager.previewUpcomingSubscription({
+        customer: mockCustomer,
+        subscription: mockSubscription,
+      });
+      expect(result).toEqual(mockPreviewUpcomingInvoice);
+    });
+  });
+
   describe('retrieve', () => {
     it('retrieves an invoice', async () => {
       const mockInvoice = StripeResponseFactory(StripeInvoiceFactory());

libs/payments/customer/src/lib/invoice.manager.ts

@@ -10,6 +10,7 @@ import {
   StripeCustomer,
   StripeInvoice,
   StripePromotionCode,
+  StripeSubscription,
   StripeSubscriptionItem,
 } from '@fxa/payments/stripe';
 import {
@@ -177,6 +178,21 @@ export class InvoiceManager {
     });
   }
 
+  async previewUpcomingSubscription({
+    customer,
+    subscription,
+  }: {
+    customer: StripeCustomer;
+    subscription: StripeSubscription;
+  }): Promise<InvoicePreview> {
+    const upcomingInvoice = await this.stripeClient.invoicesRetrieveUpcoming({
+      customer: customer.id,
+      subscription: subscription.id,
+    });
+
+    return stripeInvoiceToInvoicePreviewDTO(upcomingInvoice);
+  }
+
   /**
    * Fetch the invoice preview for the latest invoice associated with a cart
    */

libs/payments/management/src/lib/subscriptionManagement.error.ts

@@ -77,10 +77,7 @@ export class SetDefaultPaymentAccountCustomerMissingStripeId extends Subscriptio
 
 export class CreateBillingAgreementActiveBillingAgreement extends SubscriptionManagementError {
   constructor(uid: string) {
-    super(
-      'Account already has an active paypal billing agreement',
-      { uid }
-    );
+    super('Account already has an active paypal billing agreement', { uid });
     this.name = 'CreateBillingAgreementActiveBillingAgreement';
   }
 }
@@ -97,20 +94,16 @@ export class CreateBillingAgreementAccountCustomerMissingStripeId extends Subscr
 
 export class CreateBillingAgreementCurrencyNotFound extends SubscriptionManagementError {
   constructor(uid: string) {
-    super(
-      'Currency could not be found for account',
-      { uid }
-    );
+    super('Currency could not be found for account', { uid });
     this.name = 'CreateBillingAgreementCurrencyNotFound';
   }
 }
 
 export class CreateBillingAgreementPaypalSubscriptionNotFound extends SubscriptionManagementError {
   constructor(uid: string) {
-    super(
-      'No PayPal subscription found when creating billing agreement',
-      { uid }
-    );
+    super('No PayPal subscription found when creating billing agreement', {
+      uid,
+    });
     this.name = 'CreateBillingAgreementPaypalSubscriptionNotFound';
   }
 }
@@ -202,16 +195,9 @@ export class SubscriptionContentMissingLatestInvoiceError extends SubscriptionMa
 }
 
 export class SubscriptionContentMissingUpcomingInvoicePreviewError extends SubscriptionManagementError {
-  constructor(
-    subscriptionId: string,
-    priceId: string,
-    currency: string,
-    customer: StripeCustomer
-  ) {
+  constructor(subscriptionId: string, customer: StripeCustomer) {
     super('Subscription is missing latest invoice preview', {
       subscriptionId,
-      priceId,
-      currency,
       customer,
     });
     this.name = 'SubscriptionContentMissingUpcomingInvoicePreviewError';

libs/payments/management/src/lib/subscriptionManagement.service.ts

@@ -374,7 +374,6 @@ export class SubscriptionManagementService {
     webIcon: string,
     supportUrl: string
   ): Promise<SubscriptionContent> {
-    const currency = subscription.currency;
     const latestInvoiceId = subscription.latest_invoice;
 
     if (!latestInvoiceId) {
@@ -392,11 +391,13 @@ export class SubscriptionManagementService {
     }
 
     const subplatInterval = getSubplatInterval(interval, intervalCount);
-    const priceId = price.id;
 
     const [latestInvoice, upcomingInvoice] = await Promise.all([
       this.invoiceManager.preview(latestInvoiceId),
-      this.invoiceManager.previewUpcoming({ priceId, currency, customer }),
+      this.invoiceManager.previewUpcomingSubscription({
+        customer,
+        subscription,
+      }),
     ]);
 
     if (!latestInvoice) {
@@ -409,8 +410,6 @@ export class SubscriptionManagementService {
     if (!upcomingInvoice) {
       throw new SubscriptionContentMissingUpcomingInvoicePreviewError(
         subscription.id,
-        price.id,
-        currency,
         customer
       );
     }
@@ -427,6 +426,7 @@ export class SubscriptionManagementService {
 
     const {
       nextInvoiceDate,
+      promotionName: nextPromotionName,
       subsequentAmount,
       subsequentAmountExcludingTax,
       subsequentTax,
@@ -467,6 +467,7 @@ export class SubscriptionManagementService {
         nextInvoiceTotalExclusiveTax && nextInvoiceTotalExclusiveTax > 0
           ? (subsequentAmountExcludingTax ?? subsequentAmount)
           : subsequentAmount,
+      nextPromotionName,
       promotionName,
       cancelAtPeriodEnd: subscription.cancel_at_period_end,
     };

libs/payments/management/src/lib/types.ts

@@ -54,5 +54,6 @@ export interface SubscriptionContent {
   nextInvoiceDate: number;
   nextInvoiceTax?: number;
   nextInvoiceTotal?: number;
+  nextPromotionName?: string | null;
   promotionName?: string | null;
 }

libs/payments/ui/src/lib/client/components/SubscriptionContent/en.ftl

@@ -13,6 +13,7 @@ subscription-content-current-billed-on-tax = <strong>{ $invoiceTotal } + { $taxD
 subscription-content-current-billed-on-no-tax = <strong>{ $invoiceTotal }</strong><span> billed on { $billedOnDate }</span>
 subscription-content-credit-issued-to-your-account = <strong>{ $creditApplied }</strong> credit issued to your account
 subscription-content-coupon-applied = { $promotionName } applied
+subscription-content-coupon-will-be-applied = { $promotionName } discount will be applied
 subscription-content-next-bill-excl-disc-with-tax = Next bill of <strong>{ $nextInvoiceTotal } + { $taxDue } tax</strong>, excluding discounts, is due on <strong>{ $nextBillDate }</strong>
 subscription-content-next-bill-excl-no-tax = Next bill of <strong>{ $nextInvoiceTotal }</strong>, excluding discounts, is due on <strong>{ $nextBillDate }</strong>
 subscription-content-heading-cancel-subscription = Cancel Subscription

libs/payments/ui/src/lib/client/components/SubscriptionContent/index.tsx

@@ -36,6 +36,7 @@ interface Subscription {
   nextInvoiceDate: number;
   nextInvoiceTax?: number;
   nextInvoiceTotal?: number;
+  nextPromotionName?: string | null;
   promotionName?: string | null;
 }
 
@@ -62,6 +63,7 @@ export const SubscriptionContent = ({
     currentPeriodEnd,
     nextInvoiceTax,
     nextInvoiceTotal,
+    nextPromotionName,
     productName,
     webIcon,
     promotionName,
@@ -602,7 +604,7 @@ export const SubscriptionContent = ({
                     </Localized>
                   )}
                   {nextInvoiceTotal !== undefined && nextInvoiceTotal >= 0 ? (
-                    <div className="text-sm">
+                    <div className="mt-2 text-sm">
                       {nextInvoiceTax ? (
                         <Localized
                           id="subscription-content-next-bill-excl-disc-with-tax"
@@ -646,6 +648,18 @@ export const SubscriptionContent = ({
                       )}
                     </div>
                   ) : null}
+                  {nextPromotionName && (
+                    <Localized
+                      id="subscription-content-coupon-will-be-applied"
+                      vars={{
+                        promotionName: nextPromotionName,
+                      }}
+                    >
+                      <p className="font-bold text-sm text-violet-700">
+                        {nextPromotionName} discount will be applied
+                      </p>
+                    </Localized>
+                  )}
                 </div>
               )}
               <Localized