Revert "feat(payments-management): Refresh layout for Subscription Management page"

apps/payments/next/app/[locale]/subscriptions/en.ftl

@@ -0,0 +1,3 @@
+## Layout - Subscription Management
+
+subscription-management-account-profile-picture = Account profile picture

apps/payments/next/app/[locale]/subscriptions/layout.tsx

@@ -2,15 +2,27 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+import { headers } from 'next/headers';
+import Image from 'next/image';
+
 import { Breadcrumbs, Header } from '@fxa/payments/ui';
+import { getApp } from '@fxa/payments/ui/server';
+import defaultAvatarIcon from '@fxa/shared/assets/images/avatar-default.svg';
 import { auth } from 'apps/payments/next/auth';
 import { config } from 'apps/payments/next/config';
 
 export default async function SubscriptionsLayout({
   children,
+  params,
 }: {
   children: React.ReactNode;
+  params: {
+    locale: string;
+  };
 }) {
+  const { locale } = params;
+  const acceptLanguage = headers().get('accept-language');
+  const l10n = getApp().getL10n(acceptLanguage, locale);
   const session = await auth();
 
   return (
@@ -26,7 +38,41 @@ export default async function SubscriptionsLayout({
         paymentsNextUrl={config.paymentsNextHostedUrl}
       />
 
-      <div className="flex justify-center">{children}</div>
+      <div className="flex justify-center">
+        <div className="w-full py-6 text-grey-600 tablet:bg-white tablet:w-[640px] tablet:rounded-2xl tablet:shadow-sm tablet:shadow-grey-300 tablet:border-t-0 tablet:clip-shadow">
+          <section
+            aria-labelledby="profile-heading"
+            className="flex items-center gap-4 px-4 tablet:px-8"
+          >
+            <Image
+              unoptimized={true}
+              src={session?.user?.image ?? defaultAvatarIcon}
+              alt={l10n.getString(
+                'subscription-management-account-profile-picture',
+                'Account profile picture'
+              )}
+              width="48"
+              height="48"
+              className="w-12 h-12 rounded-full tablet:w-16 tablet:h-16"
+            />
+            <h1
+              id="profile-heading"
+              className="overflow-hidden text-start tablet:text-xl"
+            >
+              <div className="font-semibold mb-1 overflow-hidden text-ellipsis text-nowrap">
+                {session?.user?.name || session?.user?.email}
+              </div>
+              {session?.user?.name && (
+                <div className="font-normal overflow-hidden text-base text-ellipsis text-grey-400 text-nowrap mb-0">
+                  {session?.user?.email}
+                </div>
+              )}
+            </h1>
+          </section>
+          <hr className="border-b border-grey-50 my-6" aria-hidden="true" />
+          {children}
+        </div>
+      </div>
     </>
   );
 }

apps/payments/next/app/[locale]/subscriptions/manage/en.ftl

@@ -1,43 +1,41 @@
 ## Page - Subscription Management
 
-subscription-management-page-paypal-error-banner-title-invalid-payment-information = Invalid payment information
-subscription-management-page-paypal-error-banner-message-account-error = There is an error with your account.
-subscription-management-button-manage-payment-method-1 = Manage payment method
-subscription-management-page-banner-warning-title-no-payment-method = No payment method added
-subscription-management-page-banner-warning-link-no-payment-method = Add a payment method
-subscription-management-subscriptions-heading = Subscriptions
-# Heading for mobile only quick links menu
-subscription-management-jump-to-heading = Jump to
-subscription-management-nav-payment-details = Payment details
-subscription-management-nav-active-subscriptions = Active subscriptions
-subscription-management-payment-details-heading = Payment details
-subscription-management-email-label = Email
-subscription-management-credit-balance-label = Credit balance
-subscription-management-credit-balance-message = Credit will automatically be applied to future invoices
-subscription-management-payment-method-label = Payment method
+subscription-management-account-credit-balance-heading = Account credit balance
+subscription-management-account-credit-balance-message = Credit will be automatically applied towards future invoices
+subscription-management-payment-information-heading = Payment Information
 subscription-management-button-add-payment-method-aria = Add payment method
 subscription-management-button-add-payment-method = Add
-subscription-management-page-warning-message-no-payment-method = Please add a payment method to avoid interruption to your subscriptions.
+subscription-management-button-change-payment-method-aria = Change payment method
+subscription-management-button-change-payment-method = Change
 subscription-management-button-manage-payment-method-aria = Manage payment method
 subscription-management-button-manage-payment-method = Manage
 # $last4 (String) - Last four numbers of credit card
 subscription-management-card-ending-in = Card ending in { $last4 }
 # $expirationDate (Date) - Payment card's expiration date
 subscription-management-card-expires-date = Expires { $expirationDate }
-subscription-management-error-paypal-billing-agreement = There is an issue with your PayPal account. Please resolve the issue to maintain your active subscriptions.
-subscription-management-active-subscriptions-heading = Active subscriptions
-subscription-management-you-have-no-active-subscriptions = You have no active subscriptions
-subscription-management-new-subs-will-appear-here = New subscriptions will appear here.
-subscription-management-your-active-subscriptions-aria = Your active subscriptions
+subscription-management-subscriptions-heading = Subscriptions
+subscription-management-your-subscriptions-aria = Your subscriptions
+subscription-management-no-subscriptions = You don’t have any subscriptions yet
 subscription-management-button-support = Get help
 # $productName (String) - The name of the subscribed product, e.g. Mozilla VPN
 subscription-management-button-support-aria = Get help for { $productName }
 subscription-management-your-apple-iap-subscriptions-aria = Your { -brand-apple } In-App Subscriptions
-subscription-management-apple-in-app-purchase-2 = { -brand-apple } in-app purchase
+subscription-management-apple-in-app-purchase-1 = { -brand-apple }: in-app purchase
 subscription-management-your-google-iap-subscriptions-aria = Your { -brand-google } In-App Subscriptions
-subscription-management-google-in-app-purchase-2 = { -brand-google } in-app purchase
+subscription-management-google-in-app-purchase-1 = { -brand-google }: in-app purchase
 # $date (String) - Date of next bill
-subscription-management-iap-sub-expires-on-expiry-date = Expires on { $date }
+subscription-management-iap-sub-next-bill-is-due = Next bill is due <strong>{ $date }</strong>
+# $date (String) - Date of In-App purchase expires
+subscription-management-iap-sub-will-expire-on = Your subscription will expire on <strong>{ $date }</strong>
 # $productName (String) - The name of the subscribed product, e.g. Mozilla VPN
 subscription-management-button-manage-subscription-aria = Manage subscription for { $productName }
-subscription-management-button-manage-subscription-1 = Manage subscription
+subscription-management-button-manage-subscription = Manage
+## $productName (String) - The name of the subscribed product, e.g. Mozilla VPN
+## Daily/Weekly/Monthly/Yearly refers to the subscription interval/amount of time between billing occurrences
+subscription-management-page-subscription-interval-daily = { $productName } (daily)
+subscription-management-page-subscription-interval-weekly = { $productName } (weekly)
+subscription-management-page-subscription-interval-monthly = { $productName } (monthly)
+subscription-management-page-subscription-interval-halfyearly = { $productName } (6-month)
+subscription-management-page-subscription-interval-yearly = { $productName } (yearly)
+subscription-management-page-paypal-error-banner = Invalid payment information; there is an error with your account.
+subscription-management-page-paypal-error-banner-link = Manage