@faststore/core 4.4.0 → 4.5.0-dev.0

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

@@ -0,0 +1,264 @@
+import type { Locator } 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 from 'src/components/cms/RenderSections'
+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 {
+  ServerAccountPageQueryQuery,
+  ServerAccountPageQueryQueryVariables,
+  ServerListQuotesQueryQuery,
+  ServerListQuotesQueryQueryVariables,
+  ServerQuotesOrganizationMemberQueryQuery,
+  ServerQuotesOrganizationMemberQueryQueryVariables,
+} from '@generated/graphql'
+import { ServerAccountPageQueryDocument } from '@generated/graphql'
+import AfterSection from 'src/customizations/src/myAccount/extensions/quotes/after'
+import BeforeSection from 'src/customizations/src/myAccount/extensions/quotes/before'
+import type { MyAccountProps } from 'src/experimental/myAccountServerSideProps'
+import { execute } from 'src/server'
+import { injectGlobalSections } from 'src/server/cms/global'
+import { withLocaleValidationSSR } from 'src/utils/localization/withLocaleValidation'
+import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
+
+import storeConfig from 'discovery.config'
+import { MyAccountListQuotes } from 'src/components/account/quotes/MyAccountListQuotes'
+import { getIsRepresentative } from 'src/sdk/account/getIsRepresentative'
+import PageProvider from 'src/sdk/overrides/PageProvider'
+import { extractStatusFromError } from 'src/utils/utilities'
+
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
+  ...CUSTOM_COMPONENTS,
+}
+
+type ListQuotesPageProps = {
+  listQuotes: ServerListQuotesQueryQuery['listUserQuotes']
+  total: number
+  perPage: number
+  filters: {
+    page: number
+    status: string[]
+    createdAtFrom: string
+    createdAtTo: string
+    expiresAtFrom: string
+    expiresAtTo: string
+    label: string
+  }
+} & MyAccountProps
+
+export default function ListQuotesPage({
+  globalSections: globalSectionsProp,
+  accountName,
+  listQuotes,
+  total,
+  perPage,
+  filters,
+  isRepresentative,
+}: ListQuotesPageProps) {
+  const { sections: globalSections, settings: globalSettings } =
+    globalSectionsProp ?? {}
+
+  return (
+    <PageProvider context={{ globalSettings }}>
+      <RenderSections globalSections={globalSections} components={COMPONENTS}>
+        <NextSeo noindex nofollow />
+
+        <Layout isRepresentative={isRepresentative} accountName={accountName}>
+          <BeforeSection />
+          <MyAccountListQuotes
+            listQuotes={listQuotes}
+            filters={filters}
+            perPage={perPage}
+            total={total}
+          />
+          <AfterSection />
+        </Layout>
+      </RenderSections>
+    </PageProvider>
+  )
+}
+
+const query = gql(`
+  query ServerListQuotesQuery ($page: Int, $perPage: Int, $status: [String], $createdAtFrom: String, $createdAtTo: String, $expiresAtFrom: String, $expiresAtTo: String, $label: String) {
+    listUserQuotes (page: $page, perPage: $perPage, status: $status, createdAtFrom: $createdAtFrom, createdAtTo: $createdAtTo, expiresAtFrom: $expiresAtFrom, expiresAtTo: $expiresAtTo, label: $label) {
+      list {
+        id
+        status
+        label
+        createdAt
+        expiresAt
+        amount
+        createdBy
+      }
+      paging {
+        total
+        currentPage
+        perPage
+      }
+    }
+  }
+`)
+
+const organizationMemberQuery = gql(`
+  query ServerQuotesOrganizationMemberQuery {
+    isOrganizationMember
+  }
+`)
+
+const getServerSidePropsBase: GetServerSideProps<
+  MyAccountProps,
+  Record<string, string>,
+  Locator
+> = async (context) => {
+  const isRepresentative = getIsRepresentative({
+    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 page = Number(context.query.page as string | undefined) || 1
+  const perPage = 25
+  const status = (
+    Array.isArray(context.query.status)
+      ? context.query.status
+      : [context.query.status]
+  ).filter(Boolean) as string[]
+  const createdAtFrom =
+    (context.query.createdAtFrom as string | undefined) || ''
+  const createdAtTo = (context.query.createdAtTo as string | undefined) || ''
+  const expiresAtFrom =
+    (context.query.expiresAtFrom as string | undefined) || ''
+  const expiresAtTo = (context.query.expiresAtTo as string | undefined) || ''
+  const label = (context.query.label as string | undefined) || ''
+
+  const [
+    listQuotesResult,
+    accountProfileResult,
+    organizationMemberResult,
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  ] = await Promise.all([
+    execute<ServerListQuotesQueryQueryVariables, ServerListQuotesQueryQuery>(
+      {
+        variables: {
+          page,
+          perPage,
+          status,
+          createdAtFrom: createdAtFrom || undefined,
+          createdAtTo: createdAtTo || undefined,
+          expiresAtFrom: expiresAtFrom || undefined,
+          expiresAtTo: expiresAtTo || undefined,
+          label: label || undefined,
+        },
+        operation: query,
+      },
+      { headers: { ...context.req.headers } }
+    ),
+    execute<ServerAccountPageQueryQueryVariables, ServerAccountPageQueryQuery>(
+      { variables: {}, operation: ServerAccountPageQueryDocument },
+      { headers: { ...context.req.headers } }
+    ).catch(() => null),
+    execute<
+      ServerQuotesOrganizationMemberQueryQueryVariables,
+      ServerQuotesOrganizationMemberQueryQuery
+    >(
+      { variables: {}, operation: organizationMemberQuery },
+      { headers: { ...context.req.headers } }
+    ).catch(() => null),
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ])
+
+  if (!organizationMemberResult?.data?.isOrganizationMember) {
+    return {
+      redirect: {
+        destination: `/pvt/account/403?from=${encodeURIComponent('/pvt/account/quotes')}`,
+        permanent: false,
+      },
+    }
+  }
+
+  if (listQuotesResult.errors) {
+    console.error(...listQuotesResult.errors)
+
+    const errorStatus = extractStatusFromError(listQuotesResult.errors[0])
+
+    const destination =
+      errorStatus === 403 || errorStatus === 401
+        ? `/pvt/account/403?from=${encodeURIComponent('/pvt/account/quotes')}`
+        : '/pvt/account/404'
+
+    return {
+      redirect: {
+        destination,
+        permanent: false,
+      },
+    }
+  }
+
+  if (!listQuotesResult.data.listUserQuotes) {
+    return {
+      redirect: {
+        destination: '/pvt/account/404',
+        permanent: false,
+      },
+    }
+  }
+
+  const globalSectionsResult = injectGlobalSections({
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  })
+
+  return {
+    props: {
+      globalSections: globalSectionsResult,
+      accountName: accountProfileResult?.data?.accountProfile?.name ?? '',
+      listQuotes: listQuotesResult.data.listUserQuotes,
+      total: listQuotesResult.data.listUserQuotes.paging.total,
+      perPage: listQuotesResult.data.listUserQuotes.paging.perPage,
+      filters: {
+        page: listQuotesResult.data.listUserQuotes.paging.currentPage ?? page,
+        status,
+        createdAtFrom,
+        createdAtTo,
+        expiresAtFrom,
+        expiresAtTo,
+        label,
+      },
+      isRepresentative,
+    },
+  }
+}
+
+export const getServerSideProps = withLocaleValidationSSR(
+  getServerSidePropsBase
+)

package/src/sdk/account/getMyAccountRoutes.ts

@@ -27,6 +27,9 @@ 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 QUOTES_ROUTE = '/pvt/account/quotes'
+
+export const ROUTES_ONLY_FOR_B2B_MEMBERS = [QUOTES_ROUTE]
 
 const ROUTE_LABEL_KEYS: Record<string, keyof AccountNavigationLabels> = {
   [PROFILE_ROUTE]: 'profileLabel',
@@ -45,6 +48,10 @@ const DEFAULT_ROUTES: Route[] = [
     title: 'Orders',
     route: ORDERS_ROUTE,
   },
+  {
+    title: 'Quotes',
+    route: QUOTES_ROUTE,
+  },
   {
     title: 'User Details',
     route: USER_DETAILS_ROUTE,

package/src/utils/quoteStatus.ts

@@ -0,0 +1,27 @@
+export type QuoteStatusKey =
+  | 'Draft'
+  | 'Requested'
+  | 'InReview'
+  | 'Reviewed'
+  | 'Approved'
+  | 'Declined'
+  | 'Expired'
+  | 'ConvertedToCart'
+  | 'ConvertedToOrder'
+
+export type QuoteStatusMapValue = {
+  variant: 'neutral' | 'warning' | 'info' | 'success' | 'danger'
+  label: string
+}
+
+export const quoteStatusMap: Record<QuoteStatusKey, QuoteStatusMapValue> = {
+  Draft: { variant: 'neutral', label: 'Draft' },
+  Requested: { variant: 'warning', label: 'Requested' },
+  InReview: { variant: 'warning', label: 'In Review' },
+  Reviewed: { variant: 'info', label: 'Revised' },
+  Approved: { variant: 'success', label: 'Approved' },
+  Declined: { variant: 'danger', label: 'Declined' },
+  Expired: { variant: 'neutral', label: 'Expired' },
+  ConvertedToCart: { variant: 'success', label: 'Converted' },
+  ConvertedToOrder: { variant: 'success', label: 'Converted to Order' },
+}

package/test/components/account/Layout.test.tsx

@@ -0,0 +1,62 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+const mockUseSession = vi.hoisted(() => vi.fn())
+vi.mock('src/sdk/session', () => ({ useSession: mockUseSession }))
+
+vi.mock('../../../src/components/account/Menu', () => ({
+  __esModule: true,
+  default: ({ items }: { items: Array<{ title: string; route: string }> }) => (
+    <ul>
+      {items.map((item) => (
+        <li key={item.route}>{item.title}</li>
+      ))}
+    </ul>
+  ),
+}))
+
+import Layout from '../../../src/components/account/Layout/Layout'
+
+describe('Layout', () => {
+  it('hides the Quotes route when the user is not an org member', () => {
+    mockUseSession.mockReturnValue({ b2b: null })
+
+    render(<Layout accountName="Jane Doe">content</Layout>)
+
+    expect(screen.queryByText('Quotes')).toBeNull()
+    expect(screen.getByText('Profile')).toBeTruthy()
+  })
+
+  it('shows the Quotes route when the user belongs to an org unit', () => {
+    mockUseSession.mockReturnValue({ b2b: { unitId: 'unit-1' } })
+
+    render(<Layout accountName="Jane Doe">content</Layout>)
+
+    expect(screen.getByText('Quotes')).toBeTruthy()
+  })
+
+  it('hides User Details when not a representative, regardless of org membership', () => {
+    mockUseSession.mockReturnValue({ b2b: { unitId: 'unit-1' } })
+
+    render(
+      <Layout accountName="Jane Doe" isRepresentative={false}>
+        content
+      </Layout>
+    )
+
+    expect(screen.queryByText('User Details')).toBeNull()
+    expect(screen.getByText('Quotes')).toBeTruthy()
+  })
+
+  it('renders children inside the layout content area', () => {
+    mockUseSession.mockReturnValue({ b2b: null })
+
+    render(<Layout accountName="Jane Doe">child content</Layout>)
+
+    expect(screen.getByText('child content')).toBeTruthy()
+  })
+})

package/test/components/account/OrganizationDrawerBody.test.tsx

@@ -0,0 +1,52 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+const mockUseAccountNavigationLabels = vi.hoisted(() => vi.fn())
+vi.mock('src/sdk/account/accountPageContext', () => ({
+  useAccountNavigationLabels: mockUseAccountNavigationLabels,
+}))
+
+vi.mock('src/components/ui/Link', () => ({
+  __esModule: true,
+  default: ({
+    href,
+    children,
+  }: {
+    href: string
+    children: React.ReactNode
+  }) => <a href={href}>{children}</a>,
+}))
+
+import { OrganizationDrawerBody } from '../../../src/components/account/Drawer/OrganizationDrawer/OrganizationDrawerBody'
+
+describe('OrganizationDrawerBody', () => {
+  it('hides the Quotes route when the user is not an org member', () => {
+    mockUseAccountNavigationLabels.mockReturnValue(undefined)
+
+    render(<OrganizationDrawerBody isRepresentative isOrgMember={false} />)
+
+    expect(screen.queryByText('Quotes')).toBeNull()
+    expect(screen.getByText('Profile')).toBeTruthy()
+  })
+
+  it('shows the Quotes route when the user belongs to an org unit', () => {
+    mockUseAccountNavigationLabels.mockReturnValue(undefined)
+
+    render(<OrganizationDrawerBody isRepresentative isOrgMember />)
+
+    expect(screen.getByText('Quotes')).toBeTruthy()
+  })
+
+  it('hides User Details when not a representative, regardless of org membership', () => {
+    mockUseAccountNavigationLabels.mockReturnValue(undefined)
+
+    render(<OrganizationDrawerBody isRepresentative={false} isOrgMember />)
+
+    expect(screen.queryByText('User Details')).toBeNull()
+    expect(screen.getByText('Quotes')).toBeTruthy()
+  })
+})

package/test/components/quotes/MyAccountListQuotes.test.tsx

@@ -0,0 +1,232 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mockUseScreenResize = vi.hoisted(() => vi.fn())
+vi.mock('src/sdk/ui/useScreenResize', () => ({
+  default: mockUseScreenResize,
+}))
+
+vi.mock(
+  '../../../src/components/account/quotes/MyAccountListQuotes/MyAccountListQuotesTable/MyAccountListQuotesTable',
+  () => ({
+    __esModule: true,
+    default: () => <div data-testid="quotes-table" />,
+    Pagination: ({ page }: { page: number }) => (
+      <div data-testid="pagination">page {page}</div>
+    ),
+  })
+)
+
+vi.mock(
+  '../../../src/components/account/quotes/MyAccountListQuotes/MyAccountQuotesFilterSlider/MyAccountQuotesFilterSlider',
+  () => ({
+    __esModule: true,
+    default: () => <div data-testid="filter-slider" />,
+  })
+)
+
+const mockUseUI = vi.hoisted(() => vi.fn())
+vi.mock('@faststore/ui', async () => {
+  const actual =
+    await vi.importActual<typeof import('@faststore/ui')>('@faststore/ui')
+  return {
+    ...actual,
+    useUI: mockUseUI,
+    SearchInputField: React.forwardRef(function MockSearchInputField(
+      { onBlur, onKeyDown }: any,
+      ref: any
+    ) {
+      const inputRef = React.useRef<HTMLInputElement>(null)
+      React.useImperativeHandle(ref, () => ({ inputRef: inputRef.current }))
+      return (
+        <input
+          ref={inputRef}
+          placeholder="Search"
+          onBlur={onBlur}
+          onKeyDown={onKeyDown}
+        />
+      )
+    }),
+  }
+})
+
+import MyAccountListQuotes from '../../../src/components/account/quotes/MyAccountListQuotes/MyAccountListQuotes'
+
+const originalLocation = window.location
+
+function stubLocation(search = '') {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: { ...originalLocation, search, href: '' },
+  })
+}
+
+function baseFilters(overrides: Record<string, unknown> = {}) {
+  return {
+    page: 1,
+    status: [],
+    createdAtFrom: '',
+    createdAtTo: '',
+    expiresAtFrom: '',
+    expiresAtTo: '',
+    label: '',
+    ...overrides,
+  }
+}
+
+describe('MyAccountListQuotes', () => {
+  const openFilter = vi.fn()
+
+  beforeEach(() => {
+    stubLocation()
+    mockUseScreenResize.mockReturnValue({ isDesktop: true })
+    mockUseUI.mockReturnValue({ openFilter, filter: false })
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: originalLocation,
+    })
+  })
+
+  it('renders the quotes table when there are results', () => {
+    render(
+      <MyAccountListQuotes
+        listQuotes={{ list: [{ id: 'q-1' }] } as any}
+        total={1}
+        perPage={25}
+        filters={baseFilters()}
+      />
+    )
+
+    expect(screen.getByTestId('quotes-table')).toBeTruthy()
+  })
+
+  it('renders the "no quotes" empty state when there are no results and no filters', () => {
+    render(
+      <MyAccountListQuotes
+        listQuotes={{ list: [] } as any}
+        total={0}
+        perPage={25}
+        filters={baseFilters()}
+      />
+    )
+
+    expect(screen.getByText("You don't have any quotes")).toBeTruthy()
+    expect(screen.queryByTestId('quotes-table')).toBeNull()
+  })
+
+  it('renders the "no results" empty state when filters are active but nothing matches', () => {
+    render(
+      <MyAccountListQuotes
+        listQuotes={{ list: [] } as any}
+        total={0}
+        perPage={25}
+        filters={baseFilters({ status: ['Draft'] })}
+      />
+    )
+
+    expect(screen.getByText('No results found')).toBeTruthy()
+  })
+
+  it('opens the filter slider and dispatches the current selected facets when Filters is clicked', () => {
+    render(
+      <MyAccountListQuotes
+        listQuotes={{ list: [] } as any}
+        total={0}
+        perPage={25}
+        filters={baseFilters({ status: ['Draft'] })}
+      />
+    )
+
+    fireEvent.click(screen.getByText('Filters'))
+
+    expect(openFilter).toHaveBeenCalledTimes(1)
+  })
+
+  it('shows the active filter count badge', () => {
+    render(
+      <MyAccountListQuotes
+        listQuotes={{ list: [] } as any}
+        total={0}
+        perPage={25}
+        filters={baseFilters({ status: ['Draft'] })}
+      />
+    )
+
+    expect(screen.getByText('1')).toBeTruthy()
+  })
+
+  it('renders the filter slider when the UI filter drawer is open', () => {
+    mockUseUI.mockReturnValue({ openFilter, filter: true })
+
+    render(
+      <MyAccountListQuotes
+        listQuotes={{ list: [] } as any}
+        total={0}
+        perPage={25}
+        filters={baseFilters()}
+      />
+    )
+
+    expect(screen.getByTestId('filter-slider')).toBeTruthy()
+  })
+
+  it('shows pagination on desktop when there are results', () => {
+    mockUseScreenResize.mockReturnValue({ isDesktop: true })
+
+    render(
+      <MyAccountListQuotes
+        listQuotes={{ list: [{ id: 'q-1' }] } as any}
+        total={30}
+        perPage={25}
+        filters={baseFilters({ page: 2 })}
+      />
+    )
+
+    expect(screen.getAllByTestId('pagination').length).toBeGreaterThan(0)
+  })
+
+  it('navigates with the search term on blur', async () => {
+    render(
+      <MyAccountListQuotes
+        listQuotes={{ list: [] } as any}
+        total={0}
+        perPage={25}
+        filters={baseFilters()}
+      />
+    )
+
+    const input = screen.getByPlaceholderText('Search')
+    fireEvent.change(input, { target: { value: 'ACME' } })
+    fireEvent.blur(input)
+    await new Promise((resolve) => setTimeout(resolve, 350))
+
+    expect(window.location.href).toBe('/pvt/account/quotes?label=ACME')
+  })
+
+  it('navigates without a label param when the search is cleared', async () => {
+    render(
+      <MyAccountListQuotes
+        listQuotes={{ list: [] } as any}
+        total={0}
+        perPage={25}
+        filters={baseFilters({ label: 'ACME' })}
+      />
+    )
+
+    const input = screen.getByPlaceholderText('Search')
+    fireEvent.change(input, { target: { value: '' } })
+    fireEvent.blur(input)
+    await new Promise((resolve) => setTimeout(resolve, 350))
+
+    expect(window.location.href).toBe('/pvt/account/quotes?')
+  })
+})