WIP

mozilla · Jan 10, 2025 · 66d42cc · 66d42cc
1 parent 7f38fb8
commit 66d42cc
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 62 deletions.
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/layout.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/layout.tsx
@@ -3,16 +3,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { headers } from 'next/headers';
-import { MetricsWrapper, PurchaseDetails } from '@fxa/payments/ui';
+import { MetricsWrapper } from '@fxa/payments/ui';
 import { fetchCMSData, getCartAction } from '@fxa/payments/ui/actions';
 import {
   getApp,
   CheckoutParams,
-  PriceHeader,
-  PriceInterval,
-  PriceItemized,
   SubscriptionTitle,
   TermsAndPrivacy,
+  UpgradePurchaseDetails,
 } from '@fxa/payments/ui/server';
 import { DEFAULT_LOCALE } from '@fxa/shared/l10n';
 import { config } from 'apps/payments/next/config';
@@ -32,19 +30,21 @@ export default async function UpgradeLayout({
   //);
   const locale = headers().get('accept-language') || DEFAULT_LOCALE;
 
-  const cmsDataPromise = fetchCMSData(params.offeringId, locale);
   const cartDataPromise = getCartAction(params.cartId);
+  const cmsDataPromise = fetchCMSData(params.offeringId, locale);
+  const currentCmsDataPromise = fetchCMSData(params.offeringId, locale);
   const l10n = getApp().getL10n(locale);
-  const [cms, cart] = await Promise.all([cmsDataPromise, cartDataPromise]);
+  const [cms, cart, currentCms] = await Promise.all([
+    cmsDataPromise,
+    cartDataPromise,
+    currentCmsDataPromise,
+  ]);
   const purchaseDetails =
     cms.defaultPurchase.purchaseDetails.localizations.at(0) ||
     cms.defaultPurchase.purchaseDetails;
-
-  // CURRENT PLAN
-  // const { price: currentPrice, offering: currentOffering } = cart.currentPlan;
-  // const currentPurchaseDetails =
-  //   currentOffering?.defaultPurchase.purchaseDetails.localizations.at(0) ||
-  //   currentOffering?.defaultPurchase.purchaseDetails;
+  const currentPurchaseDetails =
+    currentCms.defaultPurchase.purchaseDetails.localizations.at(0) ||
+    currentCms.defaultPurchase.purchaseDetails;
 
   return (
     <MetricsWrapper cart={cart}>
@@ -55,40 +55,14 @@ export default async function UpgradeLayout({
           className="mb-6 tablet:mt-6 tablet:min-w-[18rem] tablet:max-w-xs tablet:col-start-2 tablet:col-end-auto tablet:row-start-1 tablet:row-end-3"
           aria-label="Upgrade details"
         >
-          <PurchaseDetails
-            selectedPrice={
-              <PriceHeader
-                priceInterval={
-                  <PriceInterval
-                    l10n={l10n}
-                    currency={cart.upcomingInvoicePreview.currency}
-                    interval={cart.interval}
-                    listAmount={cart.upcomingInvoicePreview.listAmount}
-                  />
-                }
-                purchaseDetails={purchaseDetails}
-              />
-            }
-            // upgradeFrom={
-            //   <PriceHeader
-            //     priceInterval={
-            //       <PriceInterval
-            //         l10n={l10n}
-            //         currency={currentPrice.currency}
-            //         interval={currentPrice?.recurring.interval}
-            //         listAmount={currentPrice?.unit_amount}
-            //       />
-            //     }
-            //     purchaseDetails={currentPurchaseDetails}
-            //   />
-            // }
-          >
-            <PriceItemized
-              l10n={l10n}
-              interval={cart.interval}
-              invoice={cart.upcomingInvoicePreview}
-            />
-          </PurchaseDetails>
+          <UpgradePurchaseDetails
+            l10n={l10n}
+            interval={cart.interval}
+            invoice={cart.upcomingInvoicePreview}
+            currentPrice={cart.eligibleSourcePrice}
+            currentPurchaseDetails={currentPurchaseDetails}
+            purchaseDetails={purchaseDetails}
+          />
         </section>
 
         <div className="bg-white rounded-b-lg shadow-sm shadow-grey-300 border-t-0 mb-6 pt-4 px-4 pb-14 rounded-t-lg text-grey-600 tablet:clip-shadow tablet:rounded-t-none desktop:px-12 desktop:pb-12">

diff --git a/libs/payments/ui/src/lib/server/components/UpgradePurchaseDetails/index.tsx b/libs/payments/ui/src/lib/server/components/UpgradePurchaseDetails/index.tsx
@@ -4,43 +4,47 @@
 
 import Image from 'next/image';
 import { Invoice } from '@fxa/payments/cart';
+import { StripePrice } from '@fxa/payments/stripe';
+import { PriceInterval } from '@fxa/payments/ui/server';
 import { LocalizerRsc } from '@fxa/shared/l10n/server';
 
 type UpgradePurchaseDetailsProps = {
-  currentPriceInterval: React.ReactNode;
+  currentPrice: StripePrice;
   currentPurchaseDetails: {
     currentSubtitle: string | null;
     currentProductName: string;
     currentWebIcon: string;
   };
-  l10n: LocalizerRsc;
+  interval: string;
   invoice: Invoice;
-  newPriceInterval: React.ReactNode;
-  proratedPrice: React.ReactNode;
-
+  l10n: LocalizerRsc;
   purchaseDetails: {
     subtitle: string | null;
     productName: string;
     webIcon: string;
   };
-  totalPrice: React.ReactNode;
 };
 
 export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
   const {
-    currentPriceInterval,
+    currentPrice,
     currentPurchaseDetails,
-    l10n,
+    interval,
     invoice,
-    newPriceInterval,
-    proratedPrice,
+    l10n,
     purchaseDetails,
-    totalPrice,
   } = props;
   const { currentProductName, currentSubtitle, currentWebIcon } =
     currentPurchaseDetails;
   const { productName, subtitle, webIcon } = purchaseDetails;
-  const { currency, discountAmount, listAmount, taxAmounts } = invoice;
+  const {
+    currency,
+    discountAmount,
+    listAmount,
+    oneTimeCharge,
+    taxAmounts,
+    totalAmount,
+  } = invoice;
   const exclusiveTaxRates = taxAmounts.filter(
     (taxAmount) => !taxAmount.inclusive
   );
@@ -66,7 +70,12 @@ export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
             </h3>
 
             <p className="text-grey-400 mt-1 mb-0">
-              {currentPriceInterval}
+              <PriceInterval
+                l10n={l10n}
+                currency={currentPrice.currency}
+                interval={currentPrice.recurring?.interval}
+                listAmount={currentPrice.unit_amount}
+              />
               {currentSubtitle && (
                 <span>
                   &nbsp;&bull;&nbsp;
@@ -98,7 +107,12 @@ export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
             </h3>
 
             <p className="text-grey-400 mt-1 mb-0">
-              {newPriceInterval}
+              <PriceInterval
+                l10n={l10n}
+                currency={currency}
+                interval={interval}
+                listAmount={listAmount}
+              />
               {subtitle && (
                 <span>
                   &nbsp;&bull;&nbsp;
@@ -201,7 +215,13 @@ export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
               className="overflow-hidden text-ellipsis text-lg whitespace-nowrap"
               data-testid="total-price"
             >
-              {totalPrice}
+              <PriceInterval
+                l10n={l10n}
+                currency={currency}
+                interval={interval}
+                listAmount={listAmount}
+                totalAmount={totalAmount}
+              />
             </span>
           </li>
 
@@ -218,7 +238,13 @@ export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
               className="overflow-hidden text-ellipsis text-lg whitespace-nowrap"
               data-testid="prorated-price"
             >
-              {proratedPrice}
+              <PriceInterval
+                l10n={l10n}
+                currency={currency}
+                interval={interval}
+                listAmount={listAmount}
+                totalAmount={oneTimeCharge}
+              />
             </span>
           </li>
         </ul>