@faststore/core 22.42.6

package/src/sdk/cart/index.ts

@@ -0,0 +1,187 @@
+import { gql } from '@faststore/graphql-utils'
+import { createCartStore } from '@faststore/sdk'
+import { useMemo } from 'react'
+import type { Cart as SDKCart, CartItem as SDKCartItem } from '@faststore/sdk'
+
+import type {
+  CartItemFragment,
+  CartMessageFragment,
+  IStoreOffer,
+  ValidateCartMutationMutation,
+  ValidateCartMutationMutationVariables,
+} from '@generated/graphql'
+
+import { request } from '../graphql/request'
+import { sessionStore } from '../session'
+import { createValidationStore, useStore } from '../useStore'
+
+export interface CartItem extends SDKCartItem, CartItemFragment {}
+
+export interface Cart extends SDKCart<CartItem> {
+  messages?: CartMessageFragment[]
+}
+
+export const ValidateCartMutation = gql`
+  mutation ValidateCartMutation($cart: IStoreCart!, $session: IStoreSession!) {
+    validateCart(cart: $cart, session: $session) {
+      order {
+        orderNumber
+        acceptedOffer {
+          ...CartItem
+        }
+      }
+      messages {
+        ...CartMessage
+      }
+    }
+  }
+
+  fragment CartMessage on StoreCartMessage {
+    text
+    status
+  }
+
+  fragment CartItem on StoreOffer {
+    seller {
+      identifier
+    }
+    quantity
+    price
+    listPrice
+    itemOffered {
+      ...CartProductItem
+    }
+  }
+
+  fragment CartProductItem on StoreProduct {
+    sku
+    name
+    image {
+      url
+      alternateName
+    }
+    brand {
+      name
+    }
+    isVariantOf {
+      productGroupID
+      name
+    }
+    gtin
+    additionalProperty {
+      propertyID
+      name
+      value
+      valueReference
+    }
+  }
+`
+
+const isGift = (item: CartItem) => item.price === 0
+
+const getItemId = (item: Pick<CartItem, 'itemOffered' | 'seller' | 'price'>) =>
+  [
+    item.itemOffered.sku,
+    item.seller.identifier,
+    item.itemOffered.additionalProperty
+      ?.map(({ propertyID }) => propertyID)
+      .join('-'),
+  ]
+    .filter(Boolean)
+    .join('::')
+
+const validateCart = async (cart: Cart): Promise<Cart | null> => {
+  const { validateCart: validated = null } = await request<
+    ValidateCartMutationMutation,
+    ValidateCartMutationMutationVariables
+  >(ValidateCartMutation, {
+    session: sessionStore.read(),
+    cart: {
+      order: {
+        orderNumber: cart.id,
+        acceptedOffer: cart.items.map(
+          ({
+            price,
+            listPrice,
+            seller,
+            quantity,
+            itemOffered,
+          }): IStoreOffer => ({
+            price,
+            listPrice,
+            seller,
+            quantity,
+            itemOffered: {
+              sku: itemOffered.sku,
+              image: itemOffered.image,
+              name: itemOffered.name,
+              additionalProperty: itemOffered.additionalProperty,
+            },
+          })
+        ),
+      },
+    },
+  })
+
+  return (
+    validated && {
+      id: validated.order.orderNumber,
+      items: validated.order.acceptedOffer.map((item) => ({
+        ...item,
+        id: getItemId(item),
+      })),
+      messages: validated.messages,
+    }
+  )
+}
+
+const [validationStore, onValidate] = createValidationStore(validateCart)
+const defaultCartStore = createCartStore<Cart>(
+  {
+    id: '',
+    items: [],
+    messages: [],
+  },
+  onValidate
+)
+
+export const cartStore = {
+  ...defaultCartStore,
+  addItem: (item: Omit<CartItem, 'id'>) => {
+    const cartItem = {
+      ...item,
+      id: getItemId(item),
+    }
+
+    defaultCartStore.addItem(cartItem)
+  },
+}
+
+export const useCart = () => {
+  const cart = useStore(cartStore)
+  const isValidating = useStore(validationStore)
+
+  return useMemo(
+    () => ({
+      ...cart,
+      isValidating,
+      messages: cart.messages,
+      gifts: cart.items.filter((item) => isGift(item)),
+      items: cart.items.filter((item) => !isGift(item)),
+      totalUniqueItems: cart.items.length,
+      totalItems: cart.items.reduce(
+        (acc, curr) => acc + (isGift(curr) ? 0 : curr.quantity),
+        0
+      ),
+      total: cart.items.reduce(
+        (acc, curr) => acc + curr.price * curr.quantity,
+        0
+      ),
+      subTotal: cart.items.reduce(
+        (acc, curr) => acc + curr.listPrice * curr.quantity,
+        0
+      ),
+    }),
+    [cart, isValidating]
+  )
+}

package/src/sdk/cart/useBuyButton.ts

@@ -0,0 +1,62 @@
+import { sendAnalyticsEvent } from '@faststore/sdk'
+import { useCallback } from 'react'
+import type { CurrencyCode, AddToCartEvent } from '@faststore/sdk'
+
+import type { AnalyticsItem } from 'src/sdk/analytics/types'
+import type { CartItem } from 'src/sdk/cart'
+
+import { useSession } from '../session'
+import { useUI } from '../ui/Provider'
+import { cartStore } from './index'
+
+export const useBuyButton = (item: CartItem | null) => {
+  const { openCart } = useUI()
+  const {
+    currency: { code },
+  } = useSession()
+
+  const onClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault()
+
+      if (!item) {
+        return
+      }
+
+      sendAnalyticsEvent<AddToCartEvent<AnalyticsItem>>({
+        name: 'add_to_cart',
+        params: {
+          currency: code as CurrencyCode,
+          // TODO: In the future, we can explore more robust ways of
+          // calculating the value (gift items, discounts, etc.).
+          value: item.price * item.quantity,
+          items: [
+            {
+              item_id: item.itemOffered.isVariantOf.productGroupID,
+              item_name: item.itemOffered.isVariantOf.name,
+              item_brand: item.itemOffered.brand.name,
+              item_variant: item.itemOffered.sku,
+              quantity: item.quantity,
+              price: item.price,
+              discount: item.listPrice - item.price,
+              currency: code as CurrencyCode,
+              item_variant_name: item.itemOffered.name,
+              product_reference_id: item.itemOffered.gtin,
+            },
+          ],
+        },
+      })
+
+      cartStore.addItem(item)
+      openCart()
+    },
+    [code, item, openCart]
+  )
+
+  return {
+    onClick,
+    'data-testid': 'buy-button',
+    'data-sku': item?.itemOffered.sku,
+    'data-seller': item?.seller.identifier,
+  }
+}

package/src/sdk/cart/useCartToggleButton.ts

@@ -0,0 +1,23 @@
+import { useCallback } from 'react'
+
+import { useUI } from '../ui/Provider'
+import { useCart } from './index'
+
+export const useCartToggleButton = () => {
+  const { totalItems } = useCart()
+  const { cart: displayCart, openCart, closeCart } = useUI()
+
+  const onClick = useCallback(() => {
+    if (displayCart) {
+      closeCart()
+    } else {
+      openCart()
+    }
+  }, [closeCart, displayCart, openCart])
+
+  return {
+    onClick,
+    'data-testid': 'cart-toggle',
+    'data-items': totalItems,
+  }
+}

package/src/sdk/cart/useCheckoutButton.ts

@@ -0,0 +1,22 @@
+import { useCart } from './index'
+import * as storeConfig from '../../../store.config'
+
+const { checkoutUrl } = storeConfig
+
+export const useCheckoutButton = () => {
+  const { isValidating, id } = useCart()
+
+  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+
+    if (!isValidating && id) {
+      window.location.href = `${checkoutUrl}?orderFormId=${id}`
+    }
+  }
+
+  return {
+    onClick,
+    disabled: isValidating,
+    'data-testid': 'checkout-button',
+  }
+}

package/src/sdk/cart/useRemoveButton.ts

@@ -0,0 +1,56 @@
+import { sendAnalyticsEvent } from '@faststore/sdk'
+import { useCallback } from 'react'
+import type { CurrencyCode, RemoveFromCartEvent } from '@faststore/sdk'
+
+import type { AnalyticsItem } from 'src/sdk/analytics/types'
+
+import { useSession } from '../session'
+import { cartStore } from './index'
+import type { CartItem } from '.'
+
+export const useRemoveButton = (item: CartItem | null) => {
+  const {
+    currency: { code },
+  } = useSession()
+
+  const onClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault()
+
+      if (!item) {
+        return
+      }
+
+      sendAnalyticsEvent<RemoveFromCartEvent<AnalyticsItem>>({
+        name: 'remove_from_cart',
+        params: {
+          currency: code as CurrencyCode,
+          value: item.price * item.quantity, // TODO: In the future, we can explore more robust ways of calculating the value (gift items, discounts, etc.).
+          items: [
+            {
+              item_id: item.itemOffered.isVariantOf.productGroupID,
+              item_name: item.itemOffered.isVariantOf.name,
+              item_brand: item.itemOffered.brand.name,
+              item_variant: item.itemOffered.sku,
+              quantity: item.quantity,
+              price: item.price,
+              discount: item.listPrice - item.price,
+              currency: code as CurrencyCode,
+              item_variant_name: item.itemOffered.name,
+              product_reference_id: item.itemOffered.gtin,
+            },
+          ],
+        },
+      })
+
+      cartStore.removeItem(item.id)
+    },
+    [code, item]
+  )
+
+  return {
+    onClick,
+    'data-testid': 'remove-from-cart-button',
+    'data-sku': item?.itemOffered.sku,
+  }
+}

package/src/sdk/error/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,67 @@
+import { Component } from 'react'
+import type { ErrorInfo, ReactNode } from 'react'
+
+const getReloads = () =>
+  Number(window.sessionStorage.getItem('store:reloads') ?? '0')
+
+const setReloads = (reloads: number) =>
+  window.sessionStorage.setItem('store:reloads', `${reloads}`)
+
+const canRecover = () => getReloads() < 2
+
+const isFrameworkLevelError = (error: Error) => error?.name === 'ChunkLoadError'
+
+if (typeof window !== 'undefined') {
+  window.setInterval(() => setReloads(0), 30e3)
+}
+
+class ErrorBoundary extends Component<{ children: ReactNode }> {
+  public state = { hasError: false, error: null }
+
+  public static getDerivedStateFromError(error: Error) {
+    return {
+      hasError: true,
+      error,
+    }
+  }
+
+  // We can't accurately type the error here, since it could vary depending on
+  // what caused it. This is not standardized.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public componentDidCatch(error: any, errorInfo: ErrorInfo) {
+    console.error(`React Error: ${error.message} ${errorInfo.componentStack}`)
+
+    const errorId = 'unknown'
+
+    // prevent infinite loop
+    if (
+      window.location.pathname.startsWith('/404') ||
+      window.location.pathname.startsWith('/500')
+    ) {
+      return
+    }
+
+    const from = encodeURIComponent(window.location.pathname)
+
+    const is404 = error?.extensions?.exception?.status === 404
+
+    if (isFrameworkLevelError(error) && canRecover()) {
+      setReloads(getReloads() + 1)
+      window.location.reload()
+    } else if (is404) {
+      window.location.href = `/404?from=${from}`
+    } else {
+      window.location.href = `/500?from=${from}&errorId=${errorId}`
+    }
+  }
+
+  public render() {
+    if (this.state.hasError && process.env.NODE_ENV === 'production') {
+      return null
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

package/src/sdk/error/ErrorBoundary/index.ts

@@ -0,0 +1 @@
+export { default } from './ErrorBoundary'

package/src/sdk/graphql/prefetchQuery.ts

@@ -0,0 +1,20 @@
+import { mutate } from 'swr'
+import type { Cache } from 'swr'
+
+import { request } from './request'
+import { getKey } from './useQuery'
+import type { RequestOptions } from './request'
+
+export const prefetchQuery = <Data, Variables = Record<string, unknown>>(
+  operationName: string,
+  variables: Variables,
+  { cache, ...options }: Partial<RequestOptions> & { cache: Cache }
+) => {
+  const key = getKey(operationName, variables)
+
+  if (cache.get(key)) {
+    return
+  }
+
+  mutate(key, request<Data, Variables>(operationName, variables, options))
+}

package/src/sdk/graphql/request.ts

@@ -0,0 +1,25 @@
+import { request as baseRequest } from '@faststore/graphql-utils'
+import type { RequestOptions as GraphQLRequestOptions } from '@faststore/graphql-utils'
+
+export type RequestOptions = Omit<
+  GraphQLRequestOptions,
+  'operationName' | 'variables'
+>
+
+export const request = async <Query = unknown, Variables = unknown>(
+  operationName: string,
+  variables: Variables,
+  options?: RequestOptions
+) => {
+  const { data, errors } = await baseRequest<Variables, Query>('/api/graphql', {
+    ...options,
+    variables,
+    operationName,
+  })
+
+  if (errors?.length) {
+    throw errors[0]
+  }
+
+  return data
+}

package/src/sdk/graphql/useLazyQuery.ts

@@ -0,0 +1,29 @@
+import useSWR from 'swr'
+
+import { request } from './request'
+import { DEFAULT_OPTIONS, getKey } from './useQuery'
+import type { QueryOptions } from './useQuery'
+
+export const useLazyQuery = <Data, Variables = Record<string, unknown>>(
+  operationName: string,
+  variables: Variables,
+  options?: QueryOptions
+) => {
+  const response = useSWR<Data | null>(
+    getKey(operationName, variables),
+    () => null,
+    DEFAULT_OPTIONS
+  )
+
+  const execute = async (queryVariables: Variables) => {
+    const data = await request<Data, Variables>(
+      operationName,
+      queryVariables,
+      options
+    )
+
+    response.mutate(data, false)
+  }
+
+  return [execute, response] as [typeof execute, typeof response]
+}

package/src/sdk/graphql/useQuery.ts

@@ -0,0 +1,40 @@
+import useSWR from 'swr'
+import type { SWRConfiguration } from 'swr'
+
+import { request } from './request'
+import type { RequestOptions } from './request'
+
+export type QueryOptions = SWRConfiguration & RequestOptions
+
+export const getKey = <Variables>(
+  operationName: string,
+  variables: Variables
+) => `${operationName}::${JSON.stringify(variables)}`
+
+export const DEFAULT_OPTIONS = {
+  errorRetryCount: 3,
+  refreshWhenHidden: false,
+  refreshWhenOffline: false,
+  revalidateOnFocus: false,
+  revalidateOnReconnect: false,
+  shouldRetryOnError: true,
+}
+
+export const useQuery = <Data, Variables = Record<string, unknown>>(
+  operationName: string,
+  variables: Variables,
+  options?: QueryOptions
+) =>
+  useSWR<Data>(getKey(operationName, variables), {
+    fetcher: () => {
+      return new Promise((resolve) => {
+        setTimeout(async () => {
+          resolve(
+            await request<Data, Variables>(operationName, variables, options)
+          )
+        })
+      })
+    },
+    ...DEFAULT_OPTIONS,
+    ...options,
+  })

package/src/sdk/newsletter/useNewsletter.ts

@@ -0,0 +1,31 @@
+import { gql } from '@faststore/graphql-utils'
+
+import type {
+  SubscribeToNewsletterMutation as Mutation,
+  SubscribeToNewsletterMutationVariables as Variables,
+} from '../../../@generated/graphql/index'
+import { useLazyQuery } from '../graphql/useLazyQuery'
+
+export const mutation = gql`
+  mutation SubscribeToNewsletter($data: IPersonNewsletter!) {
+    subscribeToNewsletter(data: $data) {
+      id
+    }
+  }
+`
+
+export const useNewsletter = () => {
+  const [subscribeUser, { data, error, isValidating: loading }] = useLazyQuery<
+    Mutation,
+    Variables
+  >(mutation, {
+    data: { name: '', email: '' },
+  })
+
+  return {
+    subscribeUser,
+    data,
+    error,
+    loading,
+  }
+}

package/src/sdk/product/useDiscountPercent.ts

@@ -0,0 +1,10 @@
+import { useMemo } from 'react'
+
+export const useDiscountPercent = (listPrice: number, spotPrice: number) => {
+  return useMemo(() => {
+    const diff = listPrice - spotPrice
+    const discount = (diff * 100) / listPrice
+
+    return Math.round(discount)
+  }, [spotPrice, listPrice])
+}

package/src/sdk/product/useFormattedPrice.ts

@@ -0,0 +1,27 @@
+import { useCallback, useMemo } from 'react'
+
+import { useSession } from '../session'
+
+interface PriceFormatterOptions {
+  decimals?: boolean
+}
+
+export const usePriceFormatter = ({ decimals }: PriceFormatterOptions = {}) => {
+  const { currency, locale } = useSession()
+
+  return useCallback(
+    (price: number) =>
+      Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currency.code,
+        minimumFractionDigits: decimals ? 2 : 0,
+      }).format(price),
+    [currency.code, locale, decimals]
+  )
+}
+
+export const useFormattedPrice = (price: number) => {
+  const formatter = usePriceFormatter()
+
+  return useMemo(() => formatter(price), [formatter, price])
+}

package/src/sdk/product/useProduct.ts

@@ -0,0 +1,46 @@
+import { gql } from '@faststore/graphql-utils'
+import { useMemo } from 'react'
+
+import type {
+  BrowserProductQueryQuery,
+  BrowserProductQueryQueryVariables,
+} from '@generated/graphql'
+
+import { useQuery } from '../graphql/useQuery'
+import { useSession } from '../session'
+
+const query = gql`
+  query BrowserProductQuery($locator: [IStoreSelectedFacet!]!) {
+    product(locator: $locator) {
+      ...ProductDetailsFragment_product
+    }
+  }
+`
+
+export const useProduct = <T extends BrowserProductQueryQuery>(
+  productID: string,
+  fallbackData?: T
+) => {
+  const { channel, locale } = useSession()
+  const variables = useMemo(() => {
+    if (!channel) {
+      throw new Error(`useProduct: 'channel' from session is an empty string.`)
+    }
+
+    return {
+      locator: [
+        { key: 'id', value: productID },
+        { key: 'channel', value: channel },
+        { key: 'locale', value: locale },
+      ],
+    }
+  }, [channel, locale, productID])
+
+  return useQuery<
+    BrowserProductQueryQuery & T,
+    BrowserProductQueryQueryVariables
+  >(query, variables, {
+    fallbackData,
+    revalidateOnMount: true,
+  })
+}