@faststore/core 4.6.0 → 4.7.0-dev.0

package/src/components/account/cards/MyAccountListCards/myAccountListCardsLabels.ts

@@ -0,0 +1,44 @@
+export type MyAccountListCardsSectionLabels = {
+  pageTitle?: string
+  personalTabLabel?: string
+  sharedTabLabel?: string
+  searchPlaceholder?: string
+  paginationOfLabel?: string
+  previousPageLabel?: string
+  nextPageLabel?: string
+  noPersonalCardsLabel?: string
+  noSharedCardsLabel?: string
+  noResultsLabel?: string
+  errorTitleLabel?: string
+  tryAgainLabel?: string
+  sharedCardsTooltipLabel?: string
+  defaultCardLabel?: string
+  /** Shown in place of the brand name when the service doesn't return one. */
+  genericCardLabel?: string
+}
+
+export const defaultMyAccountListCardsLabels: Required<MyAccountListCardsSectionLabels> =
+  {
+    pageTitle: 'Cards',
+    personalTabLabel: 'Personal',
+    sharedTabLabel: 'Shared',
+    searchPlaceholder: 'Search',
+    paginationOfLabel: 'of',
+    previousPageLabel: 'Previous Page',
+    nextPageLabel: 'Next Page',
+    noPersonalCardsLabel: "You don't have any cards",
+    noSharedCardsLabel: 'Your organization has no shared cards',
+    noResultsLabel: 'No results found',
+    errorTitleLabel: "We couldn't load your cards",
+    tryAgainLabel: 'Try again',
+    sharedCardsTooltipLabel:
+      'These cards are shared by the organization you belong to. Changes can only be made by the administrator.',
+    defaultCardLabel: 'Default',
+    genericCardLabel: 'Card',
+  }
+
+export function resolveMyAccountListCardsLabels(
+  labels?: MyAccountListCardsSectionLabels
+): Required<MyAccountListCardsSectionLabels> {
+  return { ...defaultMyAccountListCardsLabels, ...labels }
+}

package/src/components/account/cards/MyAccountListCards/styles.module.scss

@@ -0,0 +1,126 @@
+@use "sass:meta";
+
+.page {
+  @include meta.load-css("~@faststore/ui/src/components/organisms/EmptyState/styles.scss");
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--fs-spacing-4, 1.5rem);
+
+  [data-fs-list-cards-tabs-row] {
+    display: flex;
+    gap: var(--fs-spacing-0-5, 0.25rem);
+    align-items: center;
+    border-bottom: 1px solid var(--fs-border-color, #d9d9d9);
+  }
+
+  [data-fs-list-cards-tabs] {
+    display: flex;
+    gap: var(--fs-spacing-4, 1.5rem);
+  }
+
+  [data-fs-list-cards-tab] {
+    display: inline-flex;
+    gap: var(--fs-spacing-0-5, 0.25rem);
+    align-items: center;
+    padding: var(--fs-spacing-1, 0.5rem) 0;
+    font: inherit;
+    color: var(--fs-text-secondary, #6f6f6f);
+    cursor: pointer;
+    background: none;
+    border: none;
+  }
+
+  [data-fs-list-cards-tab-active="true"] {
+    font-weight: 600;
+    color: var(--fs-text-link, #0632c1);
+    border-bottom: 2px solid var(--fs-text-link, #0632c1);
+  }
+
+  // Shared-only rendering (spec my-account-cards-gating-plan): no tab bar to
+  // switch between, just a heading-style label + info tooltip above the grid.
+  [data-fs-list-cards-tabs-shared-only] {
+    display: flex;
+    gap: var(--fs-spacing-0-5, 0.25rem);
+    align-items: center;
+    padding-bottom: var(--fs-spacing-1, 0.5rem);
+    border-bottom: 1px solid var(--fs-border-color, #d9d9d9);
+  }
+
+  [data-fs-list-cards-tab-label] {
+    font-weight: 600;
+    color: var(--fs-text-link, #0632c1);
+  }
+
+  [data-fs-list-cards-controls] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--fs-spacing-2, 1rem);
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  [data-fs-list-cards-search-wrapper] {
+    flex: 1;
+    max-width: 25rem;
+  }
+
+  [data-fs-list-cards-pagination] {
+    display: flex;
+    gap: var(--fs-spacing-1, 0.5rem);
+    align-items: center;
+    white-space: nowrap;
+  }
+
+  [data-fs-list-cards-grid] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 10rem);
+    gap: 1.25rem;
+
+    @media (max-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  [data-fs-list-cards-item] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-spacing-1, 0.5rem);
+    padding: var(--fs-spacing-2, 1rem);
+    border: 1px solid var(--fs-border-color, #d9d9d9);
+    border-radius: var(--fs-border-radius, 0.25rem);
+  }
+
+  [data-fs-list-cards-item-brand] {
+    font-size: 0.875rem;
+    font-weight: 700;
+  }
+
+  [data-fs-list-cards-item-label] {
+    display: flex;
+    gap: var(--fs-spacing-0-5, 0.25rem);
+    align-items: center;
+  }
+
+  [data-fs-list-cards-item-default-badge] {
+    padding: 0.0625rem 0.5rem;
+    font-size: 0.75rem;
+    color: var(--fs-text-secondary, #6f6f6f);
+    border: 1px solid var(--fs-border-color, #d9d9d9);
+    border-radius: 999px;
+  }
+
+  [data-fs-list-cards-item-number] {
+    font-size: 0.875rem;
+    color: var(--fs-text-secondary, #6f6f6f);
+  }
+
+  // The shared EmptyState is designed for full-page empty states
+  // (min-height: 50vh) — shrink that here so it sits inline within this
+  // list section instead of pushing a huge block, while keeping its
+  // default centered content.
+  [data-fs-empty-state] {
+    min-height: auto;
+    padding: 0;
+  }
+}

package/src/components/cms/account/Components.ts

@@ -1,5 +1,6 @@
 import type { ComponentType } from 'react'
 
+import AccountListCards from 'src/components/sections/Account/AccountListCards'
 import AccountNavigation from 'src/components/sections/Account/AccountNavigation'
 import AccountOrderBudgets from 'src/components/sections/Account/AccountOrderBudgets'
 import AccountOrderDelivery from 'src/components/sections/Account/AccountOrderDelivery'
@@ -25,6 +26,7 @@ const ACCOUNT_COMPONENTS: Record<string, ComponentType<any>> = {
   [getComponentKey(AccountNavigation, 'AccountNavigation')]: AccountNavigation,
   [getComponentKey(AccountProfile, 'AccountProfile')]: AccountProfile,
   [getComponentKey(AccountOrdersList, 'AccountOrdersList')]: AccountOrdersList,
+  [getComponentKey(AccountListCards, 'AccountListCards')]: AccountListCards,
   [getComponentKey(AccountUserDetails, 'AccountUserDetails')]:
     AccountUserDetails,
   [getComponentKey(AccountSecurity, 'AccountSecurity')]: AccountSecurity,

package/src/components/sections/Account/AccountListCards.tsx

@@ -0,0 +1,69 @@
+import { MyAccountListCards } from 'src/components/account/cards/MyAccountListCards'
+import type { MyAccountListCardsSectionLabels } from 'src/components/account/cards/MyAccountListCards/myAccountListCardsLabels'
+import { defaultMyAccountListCardsLabels } from 'src/components/account/cards/MyAccountListCards/myAccountListCardsLabels'
+import {
+  type AccountCardsPageData,
+  useAccountPageData,
+} from 'src/sdk/account/accountPageContext'
+import Section from '../Section'
+
+export type AccountListCardsProps = MyAccountListCardsSectionLabels
+
+const AccountListCards = ({
+  pageTitle = defaultMyAccountListCardsLabels.pageTitle,
+  personalTabLabel = defaultMyAccountListCardsLabels.personalTabLabel,
+  sharedTabLabel = defaultMyAccountListCardsLabels.sharedTabLabel,
+  searchPlaceholder = defaultMyAccountListCardsLabels.searchPlaceholder,
+  paginationOfLabel = defaultMyAccountListCardsLabels.paginationOfLabel,
+  previousPageLabel = defaultMyAccountListCardsLabels.previousPageLabel,
+  nextPageLabel = defaultMyAccountListCardsLabels.nextPageLabel,
+  noPersonalCardsLabel = defaultMyAccountListCardsLabels.noPersonalCardsLabel,
+  noSharedCardsLabel = defaultMyAccountListCardsLabels.noSharedCardsLabel,
+  noResultsLabel = defaultMyAccountListCardsLabels.noResultsLabel,
+  errorTitleLabel = defaultMyAccountListCardsLabels.errorTitleLabel,
+  tryAgainLabel = defaultMyAccountListCardsLabels.tryAgainLabel,
+  sharedCardsTooltipLabel = defaultMyAccountListCardsLabels.sharedCardsTooltipLabel,
+  defaultCardLabel = defaultMyAccountListCardsLabels.defaultCardLabel,
+  genericCardLabel = defaultMyAccountListCardsLabels.genericCardLabel,
+}: AccountListCardsProps) => {
+  const {
+    personalCards,
+    sharedCards,
+    hasOrgAssociation,
+    canViewPersonalCards,
+    hasError,
+  } = useAccountPageData<AccountCardsPageData>()
+
+  return (
+    <Section className="section-account-list-cards">
+      <MyAccountListCards
+        personalCards={personalCards ?? []}
+        sharedCards={sharedCards ?? []}
+        hasOrgAssociation={hasOrgAssociation}
+        canViewPersonalCards={canViewPersonalCards}
+        hasError={hasError}
+        labels={{
+          pageTitle,
+          personalTabLabel,
+          sharedTabLabel,
+          searchPlaceholder,
+          paginationOfLabel,
+          previousPageLabel,
+          nextPageLabel,
+          noPersonalCardsLabel,
+          noSharedCardsLabel,
+          noResultsLabel,
+          errorTitleLabel,
+          tryAgainLabel,
+          sharedCardsTooltipLabel,
+          defaultCardLabel,
+          genericCardLabel,
+        }}
+      />
+    </Section>
+  )
+}
+
+AccountListCards.$componentKey = 'AccountListCards'
+
+export default AccountListCards

package/src/pages/pvt/account/cards/index.tsx

@@ -0,0 +1,244 @@
+import type { Locator, Section } from '@vtex/client-cms'
+import type { GetServerSideProps } from 'next'
+import { NextSeo } from 'next-seo'
+import type { ComponentType } from 'react'
+import { Layout } from 'src/components/account'
+import RenderSections, {
+  RenderSectionsBase,
+} from 'src/components/cms/RenderSections'
+import ACCOUNT_COMPONENTS from 'src/components/cms/account/Components'
+import GLOBAL_COMPONENTS from 'src/components/cms/global/Components'
+import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+
+import { getGlobalSectionsData } from 'src/components/cms/GlobalSections'
+
+import { gql } from '@generated/gql'
+import type {
+  ServerListCardsQueryQuery,
+  ServerListCardsQueryQueryVariables,
+} from '@generated/graphql'
+import type { MyAccountProps } from 'src/experimental/myAccountServerSideProps'
+import type { AccountCardsPageData } from 'src/sdk/account/accountPageContext'
+import type { AccountNavigationLabels } from 'src/sdk/account/getMyAccountRoutes'
+import { getB2BSessionClaims } from 'src/sdk/account/getB2BSessionClaims'
+import { getIsRepresentative } from 'src/sdk/account/getIsRepresentative'
+import { execute } from 'src/server'
+import { injectGlobalSections } from 'src/server/cms/global'
+import { extractAccountNavigationData } from 'src/server/cms/myAccountDefaultSections'
+import { fetchMyAccountPageContent } from 'src/server/cms/fetchMyAccountPageContent'
+import { withLocaleValidationSSR } from 'src/utils/localization/withLocaleValidation'
+import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
+
+import storeConfig from 'discovery.config'
+import PageProvider from 'src/sdk/overrides/PageProvider'
+import { extractStatusFromError } from 'src/utils/utilities'
+
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
+  ...CUSTOM_COMPONENTS,
+}
+
+const query = gql(`
+  query ServerListCardsQuery {
+    listCreditCards {
+      list {
+        accountId
+        bin
+        cardNumber
+        cardLabel
+        paymentSystem
+        paymentSystemName
+        isDefault
+        isActive
+        origin
+      }
+    }
+    accountProfile {
+      name
+    }
+    hasAdHocCardAccess
+  }
+`)
+
+type ListCardsPageProps = {
+  pageSections: Section[]
+  navigationLabels: AccountNavigationLabels
+  accountPageData: AccountCardsPageData
+} & MyAccountProps
+
+export default function ListCardsPage({
+  globalSections: globalSectionsProp,
+  pageSections,
+  navigationLabels,
+  accountPageData,
+  accountName,
+  isRepresentative,
+}: ListCardsPageProps) {
+  const { sections: globalSections, settings: globalSettings } =
+    globalSectionsProp ?? {}
+
+  return (
+    <PageProvider
+      context={{
+        globalSettings,
+        accountPageData,
+        navigationLabels,
+      }}
+    >
+      <RenderSections globalSections={globalSections} components={COMPONENTS}>
+        <NextSeo noindex nofollow />
+
+        <Layout
+          isRepresentative={isRepresentative}
+          accountName={accountName}
+          navigationLabels={navigationLabels}
+        >
+          <RenderSectionsBase
+            sections={pageSections}
+            components={ACCOUNT_COMPONENTS}
+          />
+        </Layout>
+      </RenderSections>
+    </PageProvider>
+  )
+}
+
+const getServerSidePropsBase: GetServerSideProps<
+  ListCardsPageProps,
+  Record<string, string>,
+  Locator
+> = async (context) => {
+  const isRepresentative = getIsRepresentative({
+    headers: context.req.headers as Record<string, string>,
+    account: storeConfig.api.storeId,
+  })
+
+  const { hasOrgAssociation, hasCustomerId } = getB2BSessionClaims({
+    headers: context.req.headers as Record<string, string>,
+    account: storeConfig.api.storeId,
+  })
+
+  const contentContext = {
+    previewData: context.previewData,
+    locale: context.locale,
+  }
+
+  const { isFaststoreMyAccountEnabled, redirect } = getMyAccountRedirect({
+    query: context.query,
+  })
+
+  if (!isFaststoreMyAccountEnabled) {
+    return { redirect }
+  }
+
+  const [
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ] = getGlobalSectionsData(contentContext)
+
+  const [
+    pageContent,
+    listCards,
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  ] = await Promise.all([
+    fetchMyAccountPageContent(
+      'myAccountCards',
+      contentContext,
+      '/pvt/account/cards'
+    ),
+    execute<ServerListCardsQueryQueryVariables, ServerListCardsQueryQuery>(
+      {
+        variables: {},
+        operation: query,
+      },
+      { headers: { ...context.req.headers } }
+    ),
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ])
+
+  const hasError = !!listCards.errors
+
+  if (hasError) {
+    console.error(...listCards.errors)
+
+    const statusCode = extractStatusFromError(listCards.errors[0])
+
+    // Auth failures still redirect (consistent with Orders); anything else
+    // (e.g. the Saved-cards service being down) renders the page's own error
+    // state instead of a hard redirect (spec US-5) — the buyer stays in My
+    // Account and can retry.
+    if (statusCode === 403 || statusCode === 401) {
+      return {
+        redirect: {
+          destination: `/pvt/account/403?from=${encodeURIComponent('/pvt/account/cards')}`,
+          permanent: false,
+        },
+      }
+    }
+  }
+
+  // `useAdHocCard` does not gate access to the Cards route (spec
+  // my-account-cards-gating-plan, the rectified model) — it, together with
+  // `customerId`, gates visibility of the Personal tab only. The route always
+  // stays reachable and the sidebar entry always stays visible; there is no
+  // redirect and no menu hiding. Default to allowed so a query failure renders
+  // the page's own error state instead of hiding the Personal tab.
+  const hasAdHocCardAccess = listCards.data?.hasAdHocCardAccess ?? true
+  const canViewPersonalCards = hasCustomerId && hasAdHocCardAccess
+
+  const { pageSections, navigationData } = extractAccountNavigationData(
+    pageContent.sections
+  )
+
+  const globalSectionsResult = injectGlobalSections({
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  })
+
+  // The Saved-cards service returns personal and shared cards merged into one
+  // list, each tagged `origin` (spec my-account-cards-shared-listing-unblock).
+  // Partition here rather than de-duplicating: a card present under both
+  // origins is intentionally rendered in both tabs.
+  const allCards = hasError ? [] : (listCards.data?.listCreditCards?.list ?? [])
+  // Mirrors MyAccountListCards.tsx's `sharedOnly` exactly — that's the only
+  // combination where the UI actually hides the Personal tab (spec
+  // my-account-cards-gating-plan, O1). Stripping personalCards any time
+  // `canViewPersonalCards` is false would also empty it for the two
+  // "kept as-is" combinations (no `unitId`), which still render the tab and,
+  // per FR-7, must never be subject to this check at all. Drop the data from
+  // the SSR payload only when the chrome that would show it is gone too — an
+  // always-false strip ships nothing extra, but a too-broad one silently
+  // hides real cards from buyers this gate was never meant to touch.
+  const sharedOnly = !canViewPersonalCards && hasOrgAssociation
+  const personalCards = sharedOnly
+    ? []
+    : allCards.filter((card) => card.origin === 'personal')
+  const sharedCards = allCards.filter((card) => card.origin === 'shared')
+
+  return {
+    props: {
+      globalSections: globalSectionsResult,
+      accountName: listCards.data?.accountProfile.name ?? '',
+      navigationLabels: navigationData as AccountNavigationLabels,
+      accountPageData: {
+        personalCards,
+        sharedCards,
+        hasOrgAssociation,
+        canViewPersonalCards,
+        hasError,
+      },
+      pageSections,
+      isRepresentative,
+    },
+  }
+}
+
+export const getServerSideProps = withLocaleValidationSSR(
+  getServerSidePropsBase
+)

package/src/sdk/account/accountPageContext.ts

@@ -1,4 +1,5 @@
 import type {
+  ServerListCardsQueryQuery,
   ServerListOrdersQueryQuery,
   ServerOrderDetailsQueryQuery,
   ServerProfileQueryQuery,
@@ -27,6 +28,20 @@ export type AccountOrdersListPageData = {
   }
 }
 
+export type AccountCardsPageData = {
+  // Both partitioned from the same listCreditCards response by `origin`
+  // (spec my-account-cards-shared-listing-unblock) — one query, no dedup.
+  personalCards: NonNullable<
+    ServerListCardsQueryQuery['listCreditCards']
+  >['list']
+  sharedCards: NonNullable<ServerListCardsQueryQuery['listCreditCards']>['list']
+  hasOrgAssociation: boolean
+  // Gates the Personal tab (spec my-account-cards-gating-plan) — independent
+  // of route access, which is never gated.
+  canViewPersonalCards: boolean
+  hasError: boolean
+}
+
 export type AccountOrderDetailsPageData = {
   order: ServerOrderDetailsQueryQuery['userOrder']
   orderStatusLabels?: OrderStatusCmsLabels
@@ -53,6 +68,7 @@ export type AccountPageData =
   | AccountOrderDetailsPageData
   | AccountSecurityPageData
   | AccountUserDetailsPageData
+  | AccountCardsPageData
   | Record<string, never>
 
 export interface AccountPageContext extends PageGlobalContext {

package/src/sdk/account/getB2BSessionClaims.ts

@@ -0,0 +1,42 @@
+import { parse } from 'cookie'
+import { parseJwt } from 'src/utils/getCookie'
+
+type GetB2BSessionClaimsParams = {
+  headers?: Record<string, string>
+  account: string
+}
+
+export type B2BSessionClaims = {
+  /**
+   * Whether the buyer is associated with a Unit/Contract. Per the Personal
+   * Cards PRD (REQ-2), this is detected by the presence of a `unitId` claim in
+   * the VTEX ID JWT — the same cookie `getIsRepresentative` already decodes.
+   * Gates the Shared tab (FR-5).
+   *
+   * Note this is the only part of the gate that lives in the token. The
+   * `useAdHocCard` permission is a License Manager resource key resolved from
+   * the user's roles, so it is fetched server-side via the
+   * `hasAdHocCardAccess` GraphQL query — not read from here.
+   */
+  hasOrgAssociation: boolean
+  /**
+   * Whether the buyer has an individual `customerId` claim, distinct from the
+   * `unitId`/contract association. Combined with `hasAdHocCardAccess`, gates
+   * the Personal tab (spec my-account-cards-gating-plan, the rectified model —
+   * `useAdHocCard` alone doesn't gate the whole Cards route, only Personal-tab
+   * visibility).
+   */
+  hasCustomerId: boolean
+}
+
+export function getB2BSessionClaims({
+  headers,
+  account,
+}: GetB2BSessionClaimsParams): B2BSessionClaims {
+  const authCookie = parse(headers?.cookie ?? '')?.[
+    'VtexIdclientAutCookie_' + account
+  ]
+  const jwt = parseJwt(authCookie)
+
+  return { hasOrgAssociation: !!jwt?.unitId, hasCustomerId: !!jwt?.customerId }
+}

package/src/sdk/account/getMyAccountRoutes.ts

@@ -21,6 +21,7 @@ export type AccountNavigationLabels = Partial<{
   switchLabel: string
   companyLabel: string
   contractLabel: string
+  cardsLabel: string
 }>
 
 interface GetMyAccountRouteParams {
@@ -33,6 +34,7 @@ export const PROFILE_ROUTE = '/pvt/account/profile'
 export const ORDERS_ROUTE = '/pvt/account/orders'
 export const USER_DETAILS_ROUTE = '/pvt/account/user-details'
 export const SECURITY_ROUTE = '/pvt/account/security'
+export const CARDS_ROUTE = '/pvt/account/cards'
 export const QUOTES_ROUTE = '/pvt/account/quotes'
 
 export const ROUTES_ONLY_FOR_B2B_MEMBERS = [QUOTES_ROUTE]
@@ -42,6 +44,7 @@ const ROUTE_LABEL_KEYS: Record<string, keyof AccountNavigationLabels> = {
   [ORDERS_ROUTE]: 'ordersLabel',
   [USER_DETAILS_ROUTE]: 'userDetailsLabel',
   [SECURITY_ROUTE]: 'securityLabel',
+  [CARDS_ROUTE]: 'cardsLabel',
 }
 
 // This is the default route list for My Account, we should add then as the feature is implemented
@@ -54,6 +57,10 @@ const DEFAULT_ROUTES: Route[] = [
     title: 'Orders',
     route: ORDERS_ROUTE,
   },
+  {
+    title: 'Cards',
+    route: CARDS_ROUTE,
+  },
   {
     title: 'Quotes',
     route: QUOTES_ROUTE,

package/src/server/cms/myAccountDefaultSections.ts

@@ -5,6 +5,7 @@ export type NativeMyAccountContentType =
   | 'myAccountUserDetails'
   | 'myAccountSecurity'
   | 'myAccountUnauthorized'
+  | 'myAccountCards'
 
 /** Store content-types are opaque strings; native literals keep autocompletion. */
 export type MyAccountContentType = NativeMyAccountContentType | (string & {})
@@ -18,6 +19,7 @@ export type DefaultMyAccountSection = {
 const DEFAULT_SECTION_KEYS: Record<NativeMyAccountContentType, string[]> = {
   myAccountProfile: ['AccountNavigation', 'AccountProfile'],
   myAccountOrders: ['AccountNavigation', 'AccountOrdersList'],
+  myAccountCards: ['AccountNavigation', 'AccountListCards'],
   myAccountOrderDetails: [
     'AccountNavigation',
     'AccountOrderDetails',

package/src/utils/getCookie.ts

@@ -27,7 +27,14 @@ export function parseJwt(token: string) {
   if (!token) {
     return null
   }
-  return JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString())
+
+  try {
+    return JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString())
+  } catch {
+    // Malformed structure/base64/JSON — treat the same as no token, instead
+    // of throwing and 500ing the caller's request.
+    return null
+  }
 }
 
 export function getJWTAutCookie({ headers, account }: Params) {