@faststore/core 4.4.1-dev.0 → 4.5.0-dev.1

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/changeContractToken.ts

@@ -0,0 +1,119 @@
+import fetch from 'isomorphic-unfetch'
+
+import storeConfig from '../../../discovery.config'
+
+export class ContractSwitchError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'ContractSwitchError'
+  }
+}
+
+export const isContractSwitchEnabled = true
+
+type VtexAuthCookie = {
+  Name: string
+  Value: string
+}
+
+export type SwitchPropertiesResponse = {
+  authStatus?: string
+  expiresIn?: number
+  authCookie?: VtexAuthCookie | null
+  accountAuthCookie?: VtexAuthCookie | null
+}
+
+const DEFAULT_AUTH_COOKIE_MAX_AGE = 86_400
+const SWITCH_PROPERTIES_TIMEOUT_MS = 30_000
+
+export function applyVtexAuthCookieFromSwitchResponse(
+  response: SwitchPropertiesResponse
+): void {
+  if (globalThis.window === undefined) {
+    return
+  }
+
+  const maxAge = response.expiresIn ?? DEFAULT_AUTH_COOKIE_MAX_AGE
+  const secure =
+    globalThis.window.location.protocol === 'https:' ? '; secure' : ''
+
+  const cookies = [response.authCookie, response.accountAuthCookie].filter(
+    (cookie): cookie is VtexAuthCookie =>
+      Boolean(cookie?.Name?.trim() && cookie?.Value)
+  )
+
+  for (const cookie of cookies) {
+    document.cookie = `${cookie.Name}=${cookie.Value}; path=/; max-age=${maxAge}; samesite=lax${secure}`
+  }
+}
+
+/**
+ * Switches the buyer's active contract via VTEX Identity storefront credential API.
+ *
+ * POST /api/authenticator/storefront/credential/switch-properties?an={account}
+ * Body: { properties: { customerId: contractId } }
+ *
+ * Applies the returned `authCookie` (and optional `accountAuthCookie`) so the
+ * storefront JWT reflects the new commercial context. Throws `ContractSwitchError`
+ * on hard failures so `switchContract` can keep the previous contract active.
+ */
+export async function changeContractToken(
+  contractId: string
+): Promise<boolean> {
+  if (!contractId) {
+    throw new ContractSwitchError('Missing contractId for contract switch')
+  }
+
+  const an = encodeURIComponent(storeConfig.api.storeId)
+  const url = `/api/authenticator/storefront/credential/switch-properties?an=${an}`
+
+  let response: Response
+  try {
+    response = await fetch(url, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        properties: {
+          customerId: contractId,
+        },
+      }),
+      signal: AbortSignal.timeout(SWITCH_PROPERTIES_TIMEOUT_MS),
+    })
+  } catch (error) {
+    if (
+      error instanceof Error &&
+      (error.name === 'TimeoutError' || error.name === 'AbortError')
+    ) {
+      throw new ContractSwitchError('Contract switch timed out')
+    }
+
+    throw error instanceof Error
+      ? new ContractSwitchError(`Failed to switch contract: ${error.message}`)
+      : new ContractSwitchError('Failed to switch contract')
+  }
+
+  if (!response.ok) {
+    throw new ContractSwitchError(
+      `Failed to switch contract (${response.status})`
+    )
+  }
+
+  const payload = (await response.json()) as SwitchPropertiesResponse
+
+  if (payload.authStatus?.toLowerCase() !== 'success') {
+    throw new ContractSwitchError('Contract switch was not successful')
+  }
+
+  if (!payload.authCookie?.Name || !payload.authCookie?.Value) {
+    throw new ContractSwitchError(
+      'Contract switch succeeded but no auth cookie was returned'
+    )
+  }
+
+  applyVtexAuthCookieFromSwitchResponse(payload)
+
+  return true
+}

package/src/sdk/account/clearPersistedSessionState.ts

@@ -0,0 +1,26 @@
+import { SESSION_READY_KEY } from '../session/storageKeys'
+import {
+  STORAGE_KEY_CACHE_BUST_LAST_VALUE,
+  STORAGE_KEY_PERSON_ID,
+} from 'src/utils/cookieCacheBusting'
+
+/**
+ * Clears client-side session persistence so a hard reload rehydrates from
+ * validateSession instead of stale IndexedDB / sessionStorage values.
+ */
+export async function clearPersistedSessionState(): Promise<void> {
+  try {
+    const { del } = await import('idb-keyval')
+    await del('fs::session').catch(() => {})
+  } catch {}
+
+  if (typeof sessionStorage === 'undefined') {
+    return
+  }
+
+  try {
+    sessionStorage.removeItem(SESSION_READY_KEY)
+    sessionStorage.removeItem(STORAGE_KEY_PERSON_ID)
+    sessionStorage.removeItem(STORAGE_KEY_CACHE_BUST_LAST_VALUE)
+  } catch {}
+}

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/sdk/account/refreshToken.ts

@@ -25,19 +25,32 @@ async function fetchWithRetry(
   return undefined
 }
 
-export const refreshTokenRequest = async (): Promise<
-  RefreshTokenResponse | undefined
-> => {
-  const storeOriginURL = new URL(getStoreURL()).origin
-  const REFRESH_TOKEN_URL = `${storeOriginURL}/api/vtexid/refreshtoken/webstore`
+function getRefreshTokenUrl(): string {
+  if (globalThis.window !== undefined) {
+    return '/api/vtexid/refreshtoken/webstore'
+  }
+
+  return `${new URL(getStoreURL()).origin}/api/vtexid/refreshtoken/webstore`
+}
+
+function getRefreshTokenHeaders(): HeadersInit {
   const headers: HeadersInit = {
     'content-type': 'application/json',
-    Host: `${sanitizeHost(storeOriginURL)}`,
   }
 
-  return await fetchWithRetry(REFRESH_TOKEN_URL, {
+  if (globalThis.window === undefined) {
+    headers.Host = `${sanitizeHost(new URL(getStoreURL()).origin)}`
+  }
+
+  return headers
+}
+
+export const refreshTokenRequest = async (): Promise<
+  RefreshTokenResponse | undefined
+> => {
+  return fetchWithRetry(getRefreshTokenUrl(), {
     credentials: 'include',
-    headers,
+    headers: getRefreshTokenHeaders(),
     body: JSON.stringify({}),
     method: 'POST',
   })

package/src/sdk/account/useAvailableContracts.ts

@@ -0,0 +1,49 @@
+import { gql } from '@generated'
+import type {
+  AvailableContractsQueryQuery,
+  AvailableContractsQueryQueryVariables,
+} from '@generated/graphql'
+
+import { useQuery } from '../graphql/useQuery'
+import { useSession } from '../session'
+
+export const AvailableContractsQuery = gql(`
+  query AvailableContractsQuery($orgUnitId: String!) {
+    availableContracts(orgUnitId: $orgUnitId) {
+      id
+      corporateName
+      isActive
+    }
+  }
+`)
+
+export type AvailableContract =
+  AvailableContractsQueryQuery['availableContracts'][number]
+
+/**
+ * Lists the contracts associated with the current buyer's Organization Unit,
+ * resolved to human-readable corporate names. The list is governed server-side:
+ * only contracts associated with the Org Unit are ever returned (REQ-05).
+ *
+ * The query is gated by `enabled` so it only runs on demand (e.g. when the
+ * switcher is opened), protecting performance budgets.
+ */
+export const useAvailableContracts = (enabled = true) => {
+  const { b2b } = useSession()
+  const orgUnitId = b2b?.unitId ?? ''
+
+  const { data, error, isValidating } = useQuery<
+    AvailableContractsQueryQuery,
+    AvailableContractsQueryQueryVariables
+  >(
+    AvailableContractsQuery,
+    { orgUnitId },
+    { doNotRun: !enabled || !orgUnitId, dedupingInterval: 0 }
+  )
+
+  return {
+    contracts: data?.availableContracts ?? [],
+    loading: (enabled && !!orgUnitId && !data && !error) || isValidating,
+    error: error ?? null,
+  }
+}

package/src/sdk/account/useSwitchContract.ts

@@ -0,0 +1,60 @@
+import { useState } from 'react'
+
+import { clearPersistedSessionState } from './clearPersistedSessionState'
+import {
+  ContractSwitchError,
+  changeContractToken,
+  isContractSwitchEnabled,
+} from './changeContractToken'
+
+/**
+ * Orchestrates a full change of commercial context (REQ-06).
+ *
+ * Steps:
+ *  1. POST switch-properties with the target contract id and apply the returned auth cookie.
+ *  2. Clear persisted session state and reload the page.
+ */
+export const useSwitchContract = () => {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  const switchContract = async (contractId: string): Promise<boolean> => {
+    setLoading(true)
+    setError(null)
+
+    try {
+      const switched = await changeContractToken(contractId)
+      if (!switched) {
+        setError(
+          new ContractSwitchError('Contract switching is not available yet')
+        )
+        return false
+      }
+
+      await clearPersistedSessionState()
+
+      if (globalThis.window !== undefined) {
+        globalThis.window.location.reload()
+      }
+
+      return true
+    } catch (err) {
+      const normalized =
+        err instanceof Error
+          ? err
+          : new ContractSwitchError('Failed to switch contract')
+      setError(normalized)
+
+      return false
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return {
+    switchContract,
+    loading,
+    error,
+    enabled: isContractSwitchEnabled,
+  }
+}

package/src/sdk/analytics/hooks/useStartRecommendationSession.ts

@@ -0,0 +1,96 @@
+import { useEffect } from 'react'
+
+import { gql } from '@faststore/core/api'
+
+import storeConfig from 'discovery.config'
+import { useLazyQuery } from 'src/sdk/graphql/useLazyQuery'
+import { getCookie } from 'src/utils/getCookie'
+import { retry } from 'src/utils/retry'
+
+// Cookie set once the anonymous personalization session has been started,
+// so we only fire `StartRecommendationSession` a single time per browser session.
+const VTEX_REC_USER_START_SESSION = 'vtex-rec-user-start-session'
+
+const startRecommendationSessionMutation = gql(`
+  mutation StartRecommendationSession {
+    startRecommendationSession
+  }
+`)
+
+type StartRecommendationSessionData = { startRecommendationSession: boolean }
+type StartRecommendationSessionVariables = Record<string, never>
+
+/**
+ * Starts the anonymous recommendation/personalization session once per browser
+ * session.
+ *
+ * Mounted globally from `Layout` so it runs on every page, regardless of
+ * whether a recommendation section is present.
+ *
+ * The product view is no longer reported through a mutation here: the PDP now
+ * exposes the product data as `<meta property="product:*">` tags, which the
+ * Activity Flow script reads to capture the product view event.
+ *
+ * All work runs client-side in effects (after hydration), so it doesn't affect
+ * SSR/TTFB or Lighthouse render metrics.
+ *
+ * Gated behind the `experimental.enableRecommendations` flag: stores that don't
+ * opt into Recommendations never start a session nor hit the Recommendations API.
+ */
+export function useStartRecommendationSession() {
+  const [runStartRecommendationSession] = useLazyQuery<
+    StartRecommendationSessionData,
+    StartRecommendationSessionVariables
+  >(
+    startRecommendationSessionMutation,
+    {} as StartRecommendationSessionVariables,
+    {
+      doNotRun: true,
+    }
+  )
+
+  useEffect(() => {
+    if (!storeConfig.experimental.enableRecommendations) {
+      return
+    }
+
+    const startRecommendationSessionCookie = getCookie(
+      VTEX_REC_USER_START_SESSION
+    )
+
+    if (startRecommendationSessionCookie) {
+      return
+    }
+
+    const controller = new AbortController()
+
+    // The session endpoint may not be ready on the first try, so we retry with
+    // exponential backoff until it returns a defined result (or we give up).
+    // Transient request/GraphQL rejections are treated as retryable: swallow
+    // the error and return `undefined` so the backoff loop keeps going instead
+    // of aborting on the first failure.
+    void retry(
+      async () => {
+        try {
+          return await runStartRecommendationSession({})
+        } catch {
+          return undefined
+        }
+      },
+      {
+        attempts: 10,
+        delayMs: 300,
+        backoff: true,
+        maxDelayMs: 3000,
+        until: (result) => result !== undefined,
+        signal: controller.signal,
+      }
+      // Guard the discarded promise so a give-up (or any unexpected rejection)
+      // never surfaces as an unhandled promise rejection.
+    ).catch(() => {})
+
+    return () => {
+      controller.abort()
+    }
+  }, [runStartRecommendationSession])
+}

package/src/sdk/analytics/utils.ts

@@ -0,0 +1,9 @@
+import { getCookie } from 'src/utils/getCookie'
+
+// Name of the cookie that holds the anonymous user id used by the
+// recommendation/personalization pixel.
+const USER_ID_COOKIE = 'vtex-rec-user-id'
+
+export function getUserIdFromCookie(): string {
+  return getCookie(USER_ID_COOKIE) ?? ''
+}