|
| 1 | +/* This Source Code Form is subject to the terms of the Mozilla Public |
| 2 | + * License, v. 2.0. If a copy of the MPL was not distributed with this |
| 3 | + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ |
| 4 | + |
| 5 | +import assert from 'assert'; |
| 6 | +import { headers } from 'next/headers'; |
| 7 | +import { MetricsWrapper } from '@fxa/payments/ui'; |
| 8 | +import { fetchCMSData, getCartAction } from '@fxa/payments/ui/actions'; |
| 9 | +import { |
| 10 | + getApp, |
| 11 | + CheckoutParams, |
| 12 | + SubscriptionTitle, |
| 13 | + TermsAndPrivacy, |
| 14 | + UpgradePurchaseDetails, |
| 15 | +} from '@fxa/payments/ui/server'; |
| 16 | +import { CartEligibilityStatus } from '@fxa/shared/db/mysql/account'; |
| 17 | +import { DEFAULT_LOCALE } from '@fxa/shared/l10n'; |
| 18 | +import { config } from 'apps/payments/next/config'; |
| 19 | + |
| 20 | +export default async function UpgradeLayout({ |
| 21 | + children, |
| 22 | + params, |
| 23 | +}: { |
| 24 | + children: React.ReactNode; |
| 25 | + params: CheckoutParams; |
| 26 | +}) { |
| 27 | + // Temporarily defaulting to `accept-language` |
| 28 | + // This to be updated in FXA-9404 |
| 29 | + //const locale = getLocaleFromRequest( |
| 30 | + // params, |
| 31 | + // headers().get('accept-language') |
| 32 | + //); |
| 33 | + const locale = headers().get('accept-language') || DEFAULT_LOCALE; |
| 34 | + |
| 35 | + const cartDataPromise = getCartAction(params.cartId); |
| 36 | + const cmsDataPromise = fetchCMSData(params.offeringId, locale); |
| 37 | + const l10n = getApp().getL10n(locale); |
| 38 | + const [cms, cart] = await Promise.all([cmsDataPromise, cartDataPromise]); |
| 39 | + const purchaseDetails = |
| 40 | + cms.defaultPurchase.purchaseDetails.localizations.at(0) || |
| 41 | + cms.defaultPurchase.purchaseDetails; |
| 42 | + |
| 43 | + assert(cart.fromOfferingConfigId, 'fromOfferingConfigId is missing in cart'); |
| 44 | + assert(cart.fromPrice, 'fromPrice is missing in cart'); |
| 45 | + |
| 46 | + const currentCmsDataPromise = fetchCMSData(cart.fromOfferingConfigId, locale); |
| 47 | + const currentCms = await currentCmsDataPromise; |
| 48 | + const currentPurchaseDetails = |
| 49 | + currentCms.defaultPurchase.purchaseDetails.localizations.at(0) || |
| 50 | + currentCms.defaultPurchase.purchaseDetails; |
| 51 | + |
| 52 | + return ( |
| 53 | + <MetricsWrapper cart={cart}> |
| 54 | + <div className="mx-7 tablet:grid tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:grid-rows-[min-content] tablet:gap-x-8 tablet:mt-4 tablet:mb-auto desktop:grid-cols-[600px_1fr]"> |
| 55 | + <SubscriptionTitle |
| 56 | + cartState={cart.state} |
| 57 | + cartEligibilityStatus={CartEligibilityStatus.UPGRADE} |
| 58 | + l10n={l10n} |
| 59 | + /> |
| 60 | + |
| 61 | + <section |
| 62 | + 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" |
| 63 | + aria-label="Upgrade details" |
| 64 | + > |
| 65 | + <UpgradePurchaseDetails |
| 66 | + l10n={l10n} |
| 67 | + interval={cart.interval} |
| 68 | + invoice={cart.upcomingInvoicePreview} |
| 69 | + currentPrice={cart.fromPrice} |
| 70 | + currentPurchaseDetails={currentPurchaseDetails} |
| 71 | + purchaseDetails={purchaseDetails} |
| 72 | + /> |
| 73 | + </section> |
| 74 | + |
| 75 | + <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"> |
| 76 | + {children} |
| 77 | + <TermsAndPrivacy |
| 78 | + l10n={l10n} |
| 79 | + {...cart} |
| 80 | + {...purchaseDetails} |
| 81 | + {...(cms.commonContent.localizations.at(0) || cms.commonContent)} |
| 82 | + contentServerUrl={config.contentServerUrl} |
| 83 | + showFXALinks={true} |
| 84 | + /> |
| 85 | + </div> |
| 86 | + </div> |
| 87 | + </MetricsWrapper> |
| 88 | + ); |
| 89 | +} |
0 commit comments