@faststore/core 4.6.1-dev.0 → 4.7.0-dev.0

package/test/components/account/cards/MyAccountListCards.browser.test.tsx

@@ -0,0 +1,301 @@
+import '@testing-library/jest-dom/vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const mockReload = vi.hoisted(() => vi.fn())
+const mockUseRouter = vi.hoisted(() => vi.fn(() => ({ reload: mockReload })))
+
+vi.mock('next/router', () => ({
+  useRouter: mockUseRouter,
+}))
+
+import { MyAccountListCards } from 'src/components/account/cards/MyAccountListCards'
+
+afterEach(() => {
+  cleanup()
+  mockReload.mockClear()
+})
+
+const VISA_PERSONAL = {
+  accountId: 'acc-1',
+  bin: '411111',
+  cardNumber: '**** **** **** 1111',
+  paymentSystem: '2',
+  paymentSystemName: 'Visa',
+  isDefault: true,
+  isActive: true,
+}
+
+const MASTERCARD_PERSONAL = {
+  accountId: 'acc-2',
+  bin: '555555',
+  cardNumber: '**** **** **** 2222',
+  paymentSystem: '3',
+  paymentSystemName: 'Mastercard',
+  isDefault: false,
+  isActive: true,
+}
+
+const AMEX_SHARED = {
+  accountId: 'acc-3',
+  bin: '378282',
+  cardNumber: '**** **** **** 3333',
+  paymentSystem: '4',
+  paymentSystemName: 'Amex',
+  isDefault: false,
+  isActive: true,
+}
+
+describe('MyAccountListCards', () => {
+  it('shows the tab bar and renders Personal cards by default', () => {
+    render(
+      <MyAccountListCards
+        personalCards={[VISA_PERSONAL, MASTERCARD_PERSONAL]}
+        sharedCards={[AMEX_SHARED]}
+        hasOrgAssociation
+        canViewPersonalCards
+      />
+    )
+
+    expect(screen.getByRole('tablist')).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Personal' })).toHaveAttribute(
+      'aria-selected',
+      'true'
+    )
+    expect(screen.getByText('Visa')).toBeInTheDocument()
+    expect(screen.getByText('Mastercard')).toBeInTheDocument()
+    expect(screen.queryByText('Amex')).not.toBeInTheDocument()
+  })
+
+  it('marks the default card with the default badge', () => {
+    render(
+      <MyAccountListCards
+        personalCards={[VISA_PERSONAL, MASTERCARD_PERSONAL]}
+        sharedCards={[]}
+        hasOrgAssociation={false}
+        canViewPersonalCards
+      />
+    )
+
+    const visaItem = screen
+      .getByText('Visa')
+      .closest('[data-fs-list-cards-item]')
+    expect(visaItem).toHaveTextContent('Default')
+
+    const mastercardItem = screen
+      .getByText('Mastercard')
+      .closest('[data-fs-list-cards-item]')
+    expect(mastercardItem).not.toHaveTextContent('Default')
+  })
+
+  it('falls back to the generic card label when paymentSystemName is absent', () => {
+    render(
+      <MyAccountListCards
+        personalCards={[{ accountId: 'acc-9', cardNumber: '**** 9999' }]}
+        sharedCards={[]}
+        hasOrgAssociation={false}
+        canViewPersonalCards
+      />
+    )
+
+    expect(screen.getByText('Card')).toBeInTheDocument()
+  })
+
+  it('prefers cardLabel over paymentSystemName when the service has a nickname on file', () => {
+    render(
+      <MyAccountListCards
+        personalCards={[{ ...VISA_PERSONAL, cardLabel: 'Team lunch card' }]}
+        sharedCards={[]}
+        hasOrgAssociation={false}
+        canViewPersonalCards
+      />
+    )
+
+    expect(screen.getByText('Team lunch card')).toBeInTheDocument()
+    expect(screen.queryByText('Visa')).not.toBeInTheDocument()
+  })
+
+  it('matches cardLabel when searching', () => {
+    render(
+      <MyAccountListCards
+        personalCards={[
+          { ...VISA_PERSONAL, cardLabel: 'Team lunch card' },
+          MASTERCARD_PERSONAL,
+        ]}
+        sharedCards={[]}
+        hasOrgAssociation={false}
+        canViewPersonalCards
+      />
+    )
+
+    fireEvent.change(screen.getByPlaceholderText('Search'), {
+      target: { value: 'lunch' },
+    })
+
+    expect(screen.getByText('Team lunch card')).toBeInTheDocument()
+    expect(screen.queryByText('Mastercard')).not.toBeInTheDocument()
+  })
+
+  it('switches to the Shared tab by clicking it, and shows the tooltip info icon', () => {
+    render(
+      <MyAccountListCards
+        personalCards={[VISA_PERSONAL]}
+        sharedCards={[AMEX_SHARED]}
+        hasOrgAssociation
+        canViewPersonalCards
+      />
+    )
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Shared' }))
+
+    expect(screen.getByRole('tab', { name: 'Shared' })).toHaveAttribute(
+      'aria-selected',
+      'true'
+    )
+    expect(screen.getByText('Amex')).toBeInTheDocument()
+    expect(screen.queryByText('Visa')).not.toBeInTheDocument()
+  })
+
+  it('moves focus and switches tabs on ArrowRight/ArrowLeft', () => {
+    render(
+      <MyAccountListCards
+        personalCards={[VISA_PERSONAL]}
+        sharedCards={[AMEX_SHARED]}
+        hasOrgAssociation
+        canViewPersonalCards
+      />
+    )
+
+    const personalTab = screen.getByRole('tab', { name: 'Personal' })
+    const sharedTab = screen.getByRole('tab', { name: 'Shared' })
+
+    personalTab.focus()
+    fireEvent.keyDown(personalTab, { key: 'ArrowRight' })
+    expect(sharedTab).toHaveAttribute('aria-selected', 'true')
+    expect(sharedTab).toHaveFocus()
+
+    fireEvent.keyDown(sharedTab, { key: 'ArrowLeft' })
+    expect(personalTab).toHaveAttribute('aria-selected', 'true')
+    expect(personalTab).toHaveFocus()
+  })
+
+  it('renders shared cards directly with no tab chrome when Personal is unavailable (sharedOnly)', () => {
+    render(
+      <MyAccountListCards
+        personalCards={[]}
+        sharedCards={[AMEX_SHARED]}
+        hasOrgAssociation
+        canViewPersonalCards={false}
+      />
+    )
+
+    expect(screen.queryByRole('tablist')).not.toBeInTheDocument()
+    expect(screen.getByText('Amex')).toBeInTheDocument()
+  })
+
+  it('renders only the Personal tab when there is no org association (unconfirmed combo kept as-is)', () => {
+    render(
+      <MyAccountListCards
+        personalCards={[VISA_PERSONAL]}
+        sharedCards={[]}
+        hasOrgAssociation={false}
+        canViewPersonalCards={false}
+      />
+    )
+
+    expect(screen.getByRole('tablist')).toBeInTheDocument()
+    expect(
+      screen.queryByRole('tab', { name: 'Shared' })
+    ).not.toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Personal' })).toBeInTheDocument()
+  })
+
+  it('filters cards by search term', () => {
+    render(
+      <MyAccountListCards
+        personalCards={[VISA_PERSONAL, MASTERCARD_PERSONAL]}
+        sharedCards={[]}
+        hasOrgAssociation={false}
+        canViewPersonalCards
+      />
+    )
+
+    fireEvent.change(screen.getByPlaceholderText('Search'), {
+      target: { value: 'visa' },
+    })
+
+    expect(screen.getByText('Visa')).toBeInTheDocument()
+    expect(screen.queryByText('Mastercard')).not.toBeInTheDocument()
+  })
+
+  it('shows the no-results empty state when the search matches nothing', () => {
+    render(
+      <MyAccountListCards
+        personalCards={[VISA_PERSONAL]}
+        sharedCards={[]}
+        hasOrgAssociation={false}
+        canViewPersonalCards
+      />
+    )
+
+    fireEvent.change(screen.getByPlaceholderText('Search'), {
+      target: { value: 'nonexistent-brand' },
+    })
+
+    expect(screen.getByText('No results found')).toBeInTheDocument()
+  })
+
+  it('shows the empty state when there are no cards at all', () => {
+    render(
+      <MyAccountListCards
+        personalCards={[]}
+        sharedCards={[]}
+        hasOrgAssociation={false}
+        canViewPersonalCards
+      />
+    )
+
+    expect(screen.getByText("You don't have any cards")).toBeInTheDocument()
+  })
+
+  it('paginates when there are more than 25 cards', () => {
+    const manyCards = Array.from({ length: 26 }, (_, i) => ({
+      accountId: `acc-${i}`,
+      paymentSystemName: `Brand ${i}`,
+      cardNumber: `**** ${i}`,
+    }))
+
+    render(
+      <MyAccountListCards
+        personalCards={manyCards}
+        sharedCards={[]}
+        hasOrgAssociation={false}
+        canViewPersonalCards
+      />
+    )
+
+    expect(screen.getByText('Brand 0')).toBeInTheDocument()
+    expect(screen.queryByText('Brand 25')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Next Page' }))
+
+    expect(screen.getByText('Brand 25')).toBeInTheDocument()
+    expect(screen.queryByText('Brand 0')).not.toBeInTheDocument()
+  })
+
+  it('shows the error state with a retry action that reloads the page', () => {
+    render(
+      <MyAccountListCards
+        personalCards={[]}
+        sharedCards={[]}
+        hasOrgAssociation={false}
+        canViewPersonalCards
+        hasError
+      />
+    )
+
+    expect(screen.getByText("We couldn't load your cards")).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Try again' }))
+    expect(mockReload).toHaveBeenCalledTimes(1)
+  })
+})

package/test/components/sections/Account/AccountListCards.browser.test.tsx

@@ -0,0 +1,57 @@
+import '@testing-library/jest-dom/vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const mockUseAccountPageData = vi.hoisted(() => vi.fn())
+const mockUseRouter = vi.hoisted(() => vi.fn(() => ({ reload: vi.fn() })))
+
+vi.mock('next/router', () => ({ useRouter: mockUseRouter }))
+vi.mock('src/sdk/account/accountPageContext', () => ({
+  useAccountPageData: mockUseAccountPageData,
+}))
+
+import AccountListCards from 'src/components/sections/Account/AccountListCards'
+
+afterEach(cleanup)
+
+describe('AccountListCards', () => {
+  it('reads accountPageData and forwards it to MyAccountListCards', () => {
+    mockUseAccountPageData.mockReturnValueOnce({
+      personalCards: [{ accountId: 'acc-1', paymentSystemName: 'Visa' }],
+      sharedCards: [],
+      hasOrgAssociation: false,
+      canViewPersonalCards: true,
+      hasError: false,
+    })
+
+    render(<AccountListCards />)
+
+    expect(screen.getByText('Visa')).toBeInTheDocument()
+  })
+
+  it('falls back to empty card arrays when the page data omits them', () => {
+    mockUseAccountPageData.mockReturnValueOnce({
+      hasOrgAssociation: false,
+      canViewPersonalCards: true,
+      hasError: false,
+    })
+
+    render(<AccountListCards />)
+
+    expect(screen.getByText("You don't have any cards")).toBeInTheDocument()
+  })
+
+  it('applies CMS-provided label overrides', () => {
+    mockUseAccountPageData.mockReturnValueOnce({
+      personalCards: [],
+      sharedCards: [],
+      hasOrgAssociation: false,
+      canViewPersonalCards: true,
+      hasError: false,
+    })
+
+    render(<AccountListCards pageTitle="Meus Cartões" />)
+
+    expect(screen.getByText('Meus Cartões')).toBeInTheDocument()
+  })
+})

package/test/pages/pvt/account/cards/index.test.ts

@@ -0,0 +1,202 @@
+import { describe, expect, it, vi } from 'vitest'
+
+const mockExecute = vi.hoisted(() => vi.fn())
+const mockGetB2BSessionClaims = vi.hoisted(() => vi.fn())
+const mockGetIsRepresentative = vi.hoisted(() => vi.fn(() => true))
+const mockGetMyAccountRedirect = vi.hoisted(() =>
+  vi.fn(() => ({ isFaststoreMyAccountEnabled: true, redirect: undefined }))
+)
+
+vi.mock('src/server', () => ({ execute: mockExecute }))
+vi.mock('src/server/cms/global', () => ({
+  injectGlobalSections: vi.fn(() => ({ sections: [], settings: {} })),
+}))
+vi.mock('src/server/cms/myAccountDefaultSections', () => ({
+  extractAccountNavigationData: vi.fn(() => ({
+    pageSections: [],
+    navigationData: {},
+  })),
+}))
+vi.mock('src/server/cms/fetchMyAccountPageContent', () => ({
+  fetchMyAccountPageContent: vi.fn(async () => ({ sections: [] })),
+}))
+vi.mock('src/components/cms/GlobalSections', () => ({
+  getGlobalSectionsData: vi.fn(() => [
+    Promise.resolve(null),
+    Promise.resolve(null),
+    Promise.resolve(null),
+  ]),
+}))
+vi.mock('src/sdk/account/getB2BSessionClaims', () => ({
+  getB2BSessionClaims: mockGetB2BSessionClaims,
+}))
+vi.mock('src/sdk/account/getIsRepresentative', () => ({
+  getIsRepresentative: mockGetIsRepresentative,
+}))
+vi.mock('src/utils/myAccountRedirect', () => ({
+  getMyAccountRedirect: mockGetMyAccountRedirect,
+}))
+
+import { getServerSideProps } from 'src/pages/pvt/account/cards/index'
+
+function makeContext() {
+  return {
+    req: { headers: {} },
+    query: {},
+    previewData: undefined,
+    locale: undefined,
+  } as any
+}
+
+const CARD_PERSONAL = { accountId: 'p1', origin: 'personal' }
+const CARD_SHARED = { accountId: 's1', origin: 'shared' }
+
+function mockSuccessfulExecute({
+  cards = [CARD_PERSONAL, CARD_SHARED],
+  hasAdHocCardAccess = true,
+  accountName = 'Jane Buyer',
+} = {}) {
+  mockExecute.mockResolvedValueOnce({
+    data: {
+      listCreditCards: { list: cards },
+      accountProfile: { name: accountName },
+      hasAdHocCardAccess,
+    },
+    errors: undefined,
+  })
+}
+
+describe('Cards page getServerSideProps', () => {
+  it('redirects when the FastStore My Account experience is disabled', async () => {
+    mockGetMyAccountRedirect.mockReturnValueOnce({
+      isFaststoreMyAccountEnabled: false,
+      redirect: { destination: '/account', permanent: false },
+    })
+    mockGetB2BSessionClaims.mockReturnValueOnce({
+      hasOrgAssociation: false,
+      hasCustomerId: false,
+    })
+
+    const result = await getServerSideProps(makeContext())
+
+    expect(result).toEqual({
+      redirect: { destination: '/account', permanent: false },
+    })
+    expect(mockExecute).not.toHaveBeenCalled()
+  })
+
+  it('redirects to /pvt/account/403 when the query fails with 401/403', async () => {
+    mockGetB2BSessionClaims.mockReturnValueOnce({
+      hasOrgAssociation: false,
+      hasCustomerId: false,
+    })
+    mockExecute.mockResolvedValueOnce({
+      data: undefined,
+      errors: [{ extensions: { status: 401 } }],
+    })
+
+    const result: any = await getServerSideProps(makeContext())
+
+    expect(result.redirect.destination).toContain('/pvt/account/403')
+  })
+
+  it('renders the error state (no redirect) when the query fails with a non-auth status', async () => {
+    mockGetB2BSessionClaims.mockReturnValueOnce({
+      hasOrgAssociation: false,
+      hasCustomerId: false,
+    })
+    mockExecute.mockResolvedValueOnce({
+      data: undefined,
+      errors: [{ extensions: { status: 502 } }],
+    })
+
+    const result: any = await getServerSideProps(makeContext())
+
+    expect(result.redirect).toBeUndefined()
+    expect(result.props.accountPageData.hasError).toBe(true)
+    expect(result.props.accountPageData.personalCards).toEqual([])
+    expect(result.props.accountPageData.sharedCards).toEqual([])
+  })
+
+  it('partitions the merged card list by origin and computes canViewPersonalCards', async () => {
+    mockGetB2BSessionClaims.mockReturnValueOnce({
+      hasOrgAssociation: true,
+      hasCustomerId: true,
+    })
+    mockSuccessfulExecute()
+
+    const result: any = await getServerSideProps(makeContext())
+
+    expect(result.props.accountPageData.personalCards).toEqual([CARD_PERSONAL])
+    expect(result.props.accountPageData.sharedCards).toEqual([CARD_SHARED])
+    expect(result.props.accountPageData.canViewPersonalCards).toBe(true)
+    expect(result.props.accountPageData.hasOrgAssociation).toBe(true)
+    expect(result.props.accountName).toBe('Jane Buyer')
+    expect(result.props).not.toHaveProperty('hasAdHocCardAccess')
+  })
+
+  it('never gates the route: canViewPersonalCards is false but no redirect happens', async () => {
+    mockGetB2BSessionClaims.mockReturnValueOnce({
+      hasOrgAssociation: true,
+      hasCustomerId: false,
+    })
+    mockSuccessfulExecute({ hasAdHocCardAccess: false })
+
+    const result: any = await getServerSideProps(makeContext())
+
+    expect(result.redirect).toBeUndefined()
+    expect(result.props.accountPageData.canViewPersonalCards).toBe(false)
+  })
+
+  it('drops personal cards from the SSR payload in the sharedOnly combination (hasOrgAssociation, canViewPersonalCards false)', async () => {
+    mockGetB2BSessionClaims.mockReturnValueOnce({
+      hasOrgAssociation: true,
+      hasCustomerId: false,
+    })
+    mockSuccessfulExecute({ hasAdHocCardAccess: false })
+
+    const result: any = await getServerSideProps(makeContext())
+
+    // The UI hides the Personal tab only for this combination (sharedOnly);
+    // this asserts the data itself never reaches __NEXT_DATA__ either (PR
+    // review, REQ-6's "hide" intent) — not just that the tab is visually
+    // hidden.
+    expect(result.props.accountPageData.personalCards).toEqual([])
+    expect(result.props.accountPageData.sharedCards).toEqual([CARD_SHARED])
+  })
+
+  it('keeps personal cards in the payload when there is no org association, even though canViewPersonalCards is false (FR-7: B2C buyers are never subject to this check)', async () => {
+    mockGetB2BSessionClaims.mockReturnValueOnce({
+      hasOrgAssociation: false,
+      hasCustomerId: false,
+    })
+    mockSuccessfulExecute({ hasAdHocCardAccess: false })
+
+    const result: any = await getServerSideProps(makeContext())
+
+    // Without hasOrgAssociation, the component still renders the Personal
+    // tab (the "kept as-is" O1 combination) — stripping the data here would
+    // silently regress a buyer this gate was never meant to touch, even
+    // though canViewPersonalCards itself is false.
+    expect(result.props.accountPageData.personalCards).toEqual([CARD_PERSONAL])
+  })
+
+  it('defaults hasAdHocCardAccess to allowed when the query field is missing', async () => {
+    mockGetB2BSessionClaims.mockReturnValueOnce({
+      hasOrgAssociation: true,
+      hasCustomerId: true,
+    })
+    mockExecute.mockResolvedValueOnce({
+      data: {
+        listCreditCards: { list: [] },
+        accountProfile: { name: 'Jane' },
+        hasAdHocCardAccess: undefined,
+      },
+      errors: undefined,
+    })
+
+    const result: any = await getServerSideProps(makeContext())
+
+    expect(result.props.accountPageData.canViewPersonalCards).toBe(true)
+  })
+})

package/test/sdk/account/getB2BSessionClaims.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { getB2BSessionClaims } from '../../../src/sdk/account/getB2BSessionClaims'
+
+const ACCOUNT = 'storeaccount'
+
+const makeJwt = (payload: Record<string, unknown>) =>
+  `header.${Buffer.from(JSON.stringify(payload)).toString('base64')}.signature`
+
+describe('getB2BSessionClaims', () => {
+  it('reads hasOrgAssociation and hasCustomerId from the token claims', () => {
+    const cookie = `VtexIdclientAutCookie_${ACCOUNT}=${makeJwt({ unitId: 'unit-1', customerId: 'customer-1' })}`
+
+    const result = getB2BSessionClaims({
+      headers: { cookie },
+      account: ACCOUNT,
+    })
+
+    expect(result).toEqual({ hasOrgAssociation: true, hasCustomerId: true })
+  })
+
+  it('returns false claims when the token has neither unitId nor customerId', () => {
+    const cookie = `VtexIdclientAutCookie_${ACCOUNT}=${makeJwt({})}`
+
+    const result = getB2BSessionClaims({
+      headers: { cookie },
+      account: ACCOUNT,
+    })
+
+    expect(result).toEqual({ hasOrgAssociation: false, hasCustomerId: false })
+  })
+
+  it('returns false claims (not a throw) when there is no auth cookie at all', () => {
+    const result = getB2BSessionClaims({ headers: {}, account: ACCOUNT })
+
+    expect(result).toEqual({ hasOrgAssociation: false, hasCustomerId: false })
+  })
+
+  it('does not throw when the auth cookie is malformed', () => {
+    const cookie = `VtexIdclientAutCookie_${ACCOUNT}=not-a-jwt`
+
+    const result = getB2BSessionClaims({
+      headers: { cookie },
+      account: ACCOUNT,
+    })
+
+    expect(result).toEqual({ hasOrgAssociation: false, hasCustomerId: false })
+  })
+})

package/test/sdk/account/getMyAccountRoutes.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
 import {
+  CARDS_ROUTE,
   ORDERS_ROUTE,
   PROFILE_ROUTE,
   QUOTES_ROUTE,
@@ -20,6 +21,7 @@ describe('getMyAccountRoutes', () => {
     expect(result.map((r) => r.route)).toEqual([
       PROFILE_ROUTE,
       ORDERS_ROUTE,
+      CARDS_ROUTE,
       QUOTES_ROUTE,
       USER_DETAILS_ROUTE,
       SECURITY_ROUTE,
@@ -27,6 +29,14 @@ describe('getMyAccountRoutes', () => {
     ])
   })
 
+  it('keeps routes with /pvt prefix unchanged', () => {
+    const result = getMyAccountRoutes({
+      routes: [{ title: 'Custom', route: '/pvt/custom' }],
+    })
+
+    expect(result.find((r) => r.title === 'Custom')?.route).toBe('/pvt/custom')
+  })
+
   it('prefixes routes with /pvt when missing', () => {
     const result = getMyAccountRoutes({
       routes: [{ title: 'Custom', route: '/custom' }],

package/test/server/index.test.ts

@@ -73,6 +73,8 @@ const QUERIES = [
   'profile',
   'productCount',
   'userOrder',
+  'listCreditCards',
+  'hasAdHocCardAccess',
   'listUserOrders',
   'listUserQuotes',
   'userDetails',

package/test/utils/getCookie.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { parseJwt } from '../../src/utils/getCookie'
+
+describe('parseJwt', () => {
+  it('returns null for an empty token', () => {
+    expect(parseJwt('')).toBeNull()
+  })
+
+  it('decodes a well-formed token payload', () => {
+    const payload = { unitId: 'unit-1' }
+    const token = `header.${Buffer.from(JSON.stringify(payload)).toString('base64')}.signature`
+
+    expect(parseJwt(token)).toEqual(payload)
+  })
+
+  it('returns null instead of throwing for a malformed token', () => {
+    expect(parseJwt('not-a-jwt')).toBeNull()
+  })
+
+  it('returns null instead of throwing when the payload segment is not valid base64/JSON', () => {
+    expect(parseJwt('header.%%%not-base64%%%.signature')).toBeNull()
+  })
+})