@faststore/core 2.2.0-alpha.0 → 2.2.0-alpha.10

package/src/sdk/product/useProductsPrefetch.ts

@@ -1,6 +1,6 @@
 import { gql } from '@faststore/graphql-utils'
 import { useSearch } from '@faststore/sdk'
-import { ClientProductsQueryQueryVariables } from '@generated/graphql'
+import { ClientManyProductsQueryQueryVariables } from '@generated/graphql'
 import { useEffect, useCallback } from 'react'
 import type { QueryOptions } from '../graphql/useQuery'
 import { useSWRConfig } from 'swr'
@@ -8,14 +8,14 @@ import { prefetchQuery } from '../graphql/prefetchQuery'
 import { useLocalizedVariables } from './useLocalizedVariables'
 
 export const query = gql`
-  query ClientProductsQuery(
+  query ClientManyProductsQuery(
     $first: Int!
     $after: String
     $sort: StoreSort!
     $term: String!
     $selectedFacets: [IStoreSelectedFacet!]!
   ) {
-    ...ClientProducts
+    ...ClientManyProducts
     search(
       first: $first
       after: $after
@@ -38,7 +38,7 @@ export const query = gql`
 `
 
 export const useProductsQueryPrefetch = (
-  variables: ClientProductsQueryQueryVariables,
+  variables: ClientManyProductsQueryQueryVariables,
   options?: QueryOptions
 ) => {
   const localizedVariables = useLocalizedVariables(variables)

package/src/sdk/product/useProductsQuery.ts

@@ -1,8 +1,8 @@
 import { gql } from '@faststore/graphql-utils'
 
 import type {
-  ClientProductsQueryQuery,
-  ClientProductsQueryQueryVariables,
+  ClientManyProductsQueryQuery,
+  ClientManyProductsQueryQueryVariables,
 } from '@generated/graphql'
 
 import type { QueryOptions } from '../graphql/useQuery'
@@ -10,14 +10,14 @@ import { useQuery } from '../graphql/useQuery'
 import { useLocalizedVariables } from './useLocalizedVariables'
 
 export const query = gql`
-  query ClientProductsQuery(
+  query ClientManyProductsQuery(
     $first: Int!
     $after: String
     $sort: StoreSort!
     $term: String!
     $selectedFacets: [IStoreSelectedFacet!]!
   ) {
-    ...ClientProducts
+    ...ClientManyProducts
     search(
       first: $first
       after: $after
@@ -43,14 +43,14 @@ export const query = gql`
  * Use this hook for fetching a list of products, like shelves and tiles
  */
 export const useProductsQuery = (
-  variables: Partial<ClientProductsQueryQueryVariables>,
+  variables: Partial<ClientManyProductsQueryQueryVariables>,
   options?: QueryOptions
 ) => {
   const localizedVariables = useLocalizedVariables(variables)
 
   const { data } = useQuery<
-    ClientProductsQueryQuery,
-    ClientProductsQueryQueryVariables
+    ClientManyProductsQueryQuery,
+    ClientManyProductsQueryQueryVariables
   >(query, localizedVariables, {
     fallbackData: null,
     suspense: true,

package/src/sdk/search/useSuggestions.ts

@@ -1,20 +1,23 @@
-import { gql } from '@faststore/graphql-utils'
+import { useMemo } from 'react'
 
+import { sendAnalyticsEvent } from '@faststore/sdk'
+import { gql } from '@faststore/graphql-utils'
 import { useQuery } from 'src/sdk/graphql/useQuery'
+
 import type {
-  SearchSuggestionsQueryQuery as Query,
-  SearchSuggestionsQueryQueryVariables as Variables,
+  ClientSearchSuggestionsQueryQuery as Query,
+  ClientSearchSuggestionsQueryQueryVariables as Variables,
 } from '@generated/graphql'
+import type { IntelligentSearchQueryEvent } from '../analytics/types'
 
 import { useSession } from '../session'
 
-const MAX_SUGGESTIONS = 5
-
 const query = gql`
-  query SearchSuggestionsQuery(
+  query ClientSearchSuggestionsQuery(
     $term: String!
     $selectedFacets: [IStoreSelectedFacet!]
   ) {
+    ...ClientSearchSuggestions
     search(first: 5, term: $term, selectedFacets: $selectedFacets) {
       suggestions {
         terms {
@@ -24,25 +27,54 @@ const query = gql`
           ...ProductSummary_product
         }
       }
+      products {
+        pageInfo {
+          totalCount
+        }
+      }
+      metadata {
+        ...SearchEvent_metadata
+      }
     }
   }
 `
 
-function useSuggestions(term: string, limit: number = MAX_SUGGESTIONS) {
+function useSuggestions(term: string) {
   const { channel, locale } = useSession()
 
-  const { data, error } = useQuery<Query, Variables>(query, {
-    term,
-    selectedFacets: [
-      { key: 'channel', value: channel ?? '' },
-      { key: 'locale', value: locale },
-    ],
+  const variables = useMemo(
+    () => ({
+      term,
+      selectedFacets: [
+        { key: 'channel', value: channel ?? '' },
+        { key: 'locale', value: locale },
+      ],
+    }),
+    [term, locale, channel]
+  )
+  const { data, error } = useQuery<Query, Variables>(query, variables, {
+    onSuccess: (callbackData) => {
+      if (callbackData && term) {
+        sendAnalyticsEvent<IntelligentSearchQueryEvent>({
+          name: 'intelligent_search_query',
+          params: {
+            locale,
+            term,
+            url: window.location.href,
+            logicalOperator:
+              callbackData.search.metadata?.logicalOperator ?? 'and',
+            isTermMisspelled:
+              callbackData.search.metadata?.isTermMisspelled ?? false,
+            totalCount: callbackData.search.products.pageInfo.totalCount,
+          },
+        })
+      }
+    },
   })
 
   return {
-    terms: (data?.search.suggestions.terms ?? []).slice(0, limit),
-    products: (data?.search.suggestions.products ?? []).slice(0, limit),
-    isLoading: !error && !data,
+    data,
+    error,
   }
 }
 

package/src/sdk/search/useTopSearch.ts

@@ -2,20 +2,18 @@ import { gql } from '@faststore/graphql-utils'
 
 import { useQuery } from 'src/sdk/graphql/useQuery'
 import type {
-  StoreSuggestionTerm,
-  SearchSuggestionsQueryQuery as Query,
-  SearchSuggestionsQueryQueryVariables as Variables,
+  ClientSearchSuggestionsQueryQuery as Query,
+  ClientSearchSuggestionsQueryQueryVariables as Variables,
 } from '@generated/graphql'
 
 import { useSession } from '../session'
 
-const MAX_TOP_SEARCH_TERMS = 5
-
 const query = gql`
-  query TopSearchSuggestionsQuery(
+  query ClientTopSearchSuggestionsQuery(
     $term: String!
     $selectedFacets: [IStoreSelectedFacet!]
   ) {
+    ...ClientTopSearchSuggestions
     search(first: 5, term: $term, selectedFacets: $selectedFacets) {
       suggestions {
         terms {
@@ -26,10 +24,7 @@ const query = gql`
   }
 `
 
-function useTopSearch(
-  initialTerms: StoreSuggestionTerm[] = [],
-  limit: number = MAX_TOP_SEARCH_TERMS
-) {
+function useTopSearch() {
   const { channel, locale } = useSession()
 
   const { data, error } = useQuery<Query, Variables>(query, {
@@ -41,8 +36,8 @@ function useTopSearch(
   })
 
   return {
-    terms: (data?.search.suggestions.terms ?? initialTerms).slice(0, limit),
-    isLoading: !error && !data,
+    data,
+    error,
   }
 }
 

package/src/sdk/shipping/index.ts

@@ -2,18 +2,19 @@ import type { IShippingItem } from '@faststore/api'
 import { gql } from '@faststore/graphql-utils'
 
 import type {
-  ShippingSimulationQueryQuery as Query,
-  ShippingSimulationQueryQueryVariables as Variables,
+  ClientShippingSimulationQueryQuery as Query,
+  ClientShippingSimulationQueryQueryVariables as Variables,
 } from '@generated/graphql'
 
 import { request } from '../graphql/request'
 
 const query = gql`
-  query ShippingSimulationQuery(
+  query ClientShippingSimulationQuery(
     $postalCode: String!
     $country: String!
     $items: [IShippingItem!]!
   ) {
+    ...ClientShippingSimulation
     shipping(items: $items, postalCode: $postalCode, country: $country) {
       logisticsInfo {
         slas {
@@ -32,6 +33,7 @@ const query = gql`
       address {
         city
         neighborhood
+        state
       }
     }
   }
@@ -54,7 +56,7 @@ export const getShippingSimulation = async ({
     country,
   })
 
-  return data.shipping
+  return data
 }
 
 export default getShippingSimulation

package/src/{components/ui/ShippingSimulation → sdk/shipping}/useShippingSimulation.ts

@@ -1,6 +1,8 @@
 import type { ChangeEvent } from 'react'
-import { useCallback, useEffect, useReducer } from 'react'
-import { ShippingSimulationProps as UIShippingSimulationProps } from '@faststore/components'
+import { useCallback, useEffect, useReducer, useRef } from 'react'
+import { ClientShippingSimulationQueryQuery } from '@generated/graphql'
+import getShippingSimulation from '.'
+import { useSession } from '../session'
 
 export interface ProductShippingInfo {
   id: string
@@ -14,14 +16,9 @@ type InputProps = {
   errorMessage?: string
 }
 
-type ShippingSimulationProps = {
-  location?: string
-  options?: UIShippingSimulationProps['options']
-}
-
 type State = {
   input: InputProps
-  shippingSimulation: ShippingSimulationProps
+  shippingSimulation?: ClientShippingSimulationQueryQuery['shipping']
 }
 
 type Action =
@@ -41,17 +38,15 @@ type Action =
       type: 'clear'
     }
 
-const createEmptySimulation = () => ({
-  input: {
-    postalCode: '',
-    displayClearButton: false,
-    errorMessage: '',
-  },
-  shippingSimulation: {
-    location: '',
-    options: [],
-  },
-})
+const createEmptySimulation = () =>
+  ({
+    input: {
+      postalCode: '',
+      displayClearButton: false,
+      errorMessage: '',
+    },
+    shippingSimulation: undefined,
+  } as State)
 
 const reducer = (state: State, action: Action) => {
   const { type } = action
@@ -104,38 +99,31 @@ const reducer = (state: State, action: Action) => {
   }
 }
 
-export type FetchShippingSimulation = (
-  shippingItem: ProductShippingInfo,
-  country: string,
-  postalCode: string
-) => Promise<[string, UIShippingSimulationProps['options']]>
-
-export const useShippingSimulation = (
-  shippingItem: ProductShippingInfo,
-  fetchShippingSimulationFn: FetchShippingSimulation,
-  sessionPostalCode: string,
-  country: string
-) => {
+export const useShippingSimulation = (shippingItem: ProductShippingInfo) => {
   const [{ input, shippingSimulation }, dispatch] = useReducer(
     reducer,
     null,
     createEmptySimulation
   )
 
+  const { country, postalCode: sessionPostalCode } = useSession()
   const { postalCode: shippingPostalCode } = input
+  const shippingPostalCodeRef = useRef(shippingPostalCode)
 
   useEffect(() => {
-    if (!sessionPostalCode || shippingPostalCode) {
+    const shouldFetch = sessionPostalCode && !shippingPostalCodeRef.current
+    if (!shouldFetch) {
       return
     }
 
     // Use sessionPostalCode if there is no shippingPostalCode
     async function fetchShipping() {
-      const [location, options] = await fetchShippingSimulationFn(
-        shippingItem,
+      const data = await getShippingSimulation({
         country,
-        sessionPostalCode ?? ''
-      )
+        postalCode: sessionPostalCode ?? '',
+        items: [shippingItem],
+      })
+      const shippingSimulation = data.shipping
 
       dispatch({
         type: 'update',
@@ -145,30 +133,22 @@ export const useShippingSimulation = (
             displayClearButton: true,
             errorMessage: '',
           },
-          shippingSimulation: {
-            location,
-            options,
-          },
+          shippingSimulation,
         },
       })
     }
 
     fetchShipping()
-  }, [
-    country,
-    fetchShippingSimulationFn,
-    sessionPostalCode,
-    shippingItem,
-    shippingPostalCode,
-  ])
+  }, [country, sessionPostalCode, shippingItem])
 
   const handleSubmit = useCallback(async () => {
     try {
-      const [location, options] = await fetchShippingSimulationFn(
-        shippingItem,
+      const data = await getShippingSimulation({
         country,
-        shippingPostalCode ?? ''
-      )
+        postalCode: shippingPostalCode ?? '',
+        items: [shippingItem],
+      })
+      const shippingSimulation = data.shipping
 
       dispatch({
         type: 'update',
@@ -177,10 +157,7 @@ export const useShippingSimulation = (
             displayClearButton: true,
             errorMessage: '',
           },
-          shippingSimulation: {
-            location,
-            options,
-          },
+          shippingSimulation,
         },
       })
     } catch (error) {
@@ -192,7 +169,7 @@ export const useShippingSimulation = (
         },
       })
     }
-  }, [country, fetchShippingSimulationFn, shippingItem, shippingPostalCode])
+  }, [country, shippingItem, shippingPostalCode])
 
   const handleOnInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     const currentValue = e.currentTarget.value

package/src/server/generator/schema.ts

@@ -1,3 +1,4 @@
+import path from 'path'
 import { writeFileSync } from 'fs-extra'
 import { getSchema, getTypeDefs } from '@faststore/api'
 import { printSchemaWithDirectives } from '@graphql-tools/utils'
@@ -69,7 +70,7 @@ export const getMergedSchema = (): GraphQLSchema =>
 export function writeGraphqlSchemaFile(apiSchema: GraphQLSchema) {
   try {
     writeFileSync(
-      [process.cwd(), '@generated', 'graphql', 'schema.graphql'].join('/'),
+      path.join(process.cwd(), '@generated', 'graphql', 'schema.graphql'),
       printSchemaWithDirectives(apiSchema)
     )
 

package/src/typings/overrides.ts

@@ -13,7 +13,7 @@ import type {
   IconButtonProps,
   IconProps,
   ImageGalleryProps,
-  ImageZoomProps,
+  ImageGalleryViewerProps,
   InputFieldProps,
   LinkButtonProps,
   NavbarButtonsProps,
@@ -40,6 +40,7 @@ import type {
   ComponentOverrideDefinition,
   SectionOverrideDefinition,
 } from './overrideDefinitionUtils'
+import { NewsletterAddendumProps } from 'src/components/ui/Newsletter/NewsletterAddendum'
 
 export type SectionOverride =
   | AlertOverrideDefinition
@@ -164,6 +165,7 @@ export type NewsletterOverrideDefinition = SectionOverrideDefinition<
       Omit<InputFieldProps, 'inputRef'>
     >
     Button: ComponentOverrideDefinition<ButtonProps, ButtonProps>
+    __experimentalNewsletterAddendum: ComponentOverrideDefinition<NewsletterAddendumProps, NewsletterAddendumProps>
   }
 >
 
@@ -197,10 +199,14 @@ export type ProductDetailsOverrideDefinition = SectionOverrideDefinition<
       ImageGalleryProps,
       ImageGalleryProps
     >
-    ImageZoom: ComponentOverrideDefinition<ImageZoomProps, ImageZoomProps>
+    ImageGalleryViewer: ComponentOverrideDefinition<
+      ImageGalleryViewerProps,
+      ImageGalleryViewerProps
+    >
     __experimentalImageGalleryImage: ComponentOverrideDefinition<any, any>
     __experimentalImageGallery: ComponentOverrideDefinition<any, any>
     __experimentalShippingSimulation: ComponentOverrideDefinition<any, any>
+    __experimentalNotAvailableButton: ComponentOverrideDefinition<any, any>
   }
 >
 

package/src/utils/getCookie.ts

@@ -0,0 +1,14 @@
+export function getCookie(name: string): string | undefined {
+  const cookieString = decodeURIComponent(document.cookie)
+  const cookies = cookieString.split(';')
+
+  for (const cookie of cookies) {
+    const [cookieName, cookieValue] = cookie.trim().split('=')
+
+    if (cookieName === name) {
+      return cookieValue
+    }
+  }
+
+  return undefined // Cookie not found
+}

package/tsconfig.json

@@ -13,7 +13,8 @@
     "allowJs": true,
     "paths": {
       "src/*": ["src/*"],
-      "@generated/*": ["@generated/*"]
+      "@generated/*": ["@generated/*"],
+      "@faststore/core/experimental": ["src/experimental/index.ts"]
     },
     "forceConsistentCasingInFileNames": true,
     "strict": false,

package/cypress.json

@@ -1,9 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000/",
-  "retries": 0,
-  "video": true,
-  "trashAssetsBeforeRuns": true,
-  "screenshotOnRunFailure": true,
-  "viewportWidth": 1000,
-  "viewportHeight": 600
-}

package/generate.sh

@@ -1,71 +0,0 @@
-#!/bin/sh
-
-# ANSI color codes
-RED='\033[0;31m'
-YELLOW='\033[1;33m'
-PURPLE='\033[0;35m'
-GREEN='\033[0;32m'
-NC='\033[0m' # No Color
-
-# Initialize debug flag to false
-DEBUG_FLAG=false
-
-# Check for --debug flag
-if [ "$1" = "--debug" ]; then
-    DEBUG_FLAG=true
-fi
-
-# Function to display errors with readable messages
-show_error() {
-    local cmd="$3"
-
-    echo "${RED}error${NC} $1"
-    if [ "$DEBUG_FLAG" = "true" ]; then
-        echo "${PURPLE}DEBUG - \$ $cmd ${RED}error root ↓${NC}\n$2"
-    fi
-    exit 1
-}
-
-# Function to display warnings
-show_warning() {
-    local cmd="$3"
-
-    echo "${YELLOW}warn${NC} $1"
-    if [ "$DEBUG_FLAG" = "true" ]; then
-        echo "${PURPLE}DEBUG - \$ $cmd ${YELLOW}warn root ↓${NC}\n$2"
-    fi
-}
-
-# Function to run a command and handle errors and warnings
-run_command() {
-    local cmd="$1"
-    local error_message="$2"
-    local warn="$3"
-    local output
-
-    if [ "$DEBUG_FLAG" = "true" ]; then
-        output="$($cmd --debug --verbose 2>&1)"
-    else
-        output="$($cmd 2>&1)"
-    fi
-
-    local exit_code="$?"
-    if [ "$warn" = "true" ]; then
-        if [ "$exit_code" -ne 0 ]; then
-            show_warning "$error_message" "$output" "$cmd"
-        fi
-    elif [ "$exit_code" -ne 0 ]; then
-        show_error "$error_message" "$output" "$cmd"
-    fi
-}
-
-# Run "yarn generate:schema" without outputting logs and errors
-run_command "yarn generate:schema" "Failed to run 'yarn generate:schema'. Please check your setup." "false"
-
-# Run graphql-codegen and capture the output
-run_command "graphql-codegen" "GraphQL was not optimized and TS files were not updated. Changes in the GraphQL layer did not take effect" "false"
-
-# Run "yarn format:generated" and display a warning if it produces output
-run_command "yarn format:generated" "Failed to format generated files. 'yarn format:generated' thrown errors" "true"
-
-echo "${GREEN}GraphQL schema, types, and optimizations successfully generated 🎉${NC}"