@magento/venia-pwa-live-search 1.0.0-alpha6

package/src/context/products.jsx

@@ -0,0 +1,336 @@
+import React, { useContext, useEffect, useMemo, useState, useRef, createContext } from 'react';
+
+import { getProductSearch, refineProductSearch } from '../api/search';
+import {
+  CATEGORY_SORT_DEFAULT,
+  DEFAULT_MIN_QUERY_LENGTH,
+  DEFAULT_PAGE_SIZE,
+  DEFAULT_PAGE_SIZE_OPTIONS,
+  SEARCH_SORT_DEFAULT,
+} from '../utils/constants';
+import { moveToTop } from '../utils/dom';
+import {
+  getFiltersFromUrl,
+  getValueFromUrl,
+  handleUrlPagination,
+} from '../utils/handleUrlFilters';
+import { useAttributeMetadata } from './attributeMetadata';
+import { useSearch } from './search';
+import { useStore } from './store';
+import { useTranslation } from './translation';
+import isEqual from 'lodash/isEqual';
+
+const ProductsContext = createContext({
+  variables: { phrase: '' },
+  loading: false,
+  items: [],
+  setItems: () => {},
+  currentPage: 1,
+  setCurrentPage: () => {},
+  pageSize: DEFAULT_PAGE_SIZE,
+  setPageSize: () => {},
+  totalCount: 0,
+  setTotalCount: () => {},
+  totalPages: 0,
+  setTotalPages: () => {},
+  facets: [],
+  setFacets: () => {},
+  categoryName: '',
+  setCategoryName: () => {},
+  currencySymbol: '',
+  setCurrencySymbol: () => {},
+  currencyRate: '',
+  setCurrencyRate: () => {},
+  minQueryLength: DEFAULT_MIN_QUERY_LENGTH,
+  minQueryLengthReached: false,
+  setMinQueryLengthReached: () => {},
+  pageSizeOptions: [],
+  setRoute: undefined,
+  refineProduct: () => {},
+  pageLoading: false,
+  setPageLoading: () => {},
+  categoryPath: undefined,
+  viewType: '',
+  setViewType: () => {},
+  listViewType: '',
+  setListViewType: () => {},
+  resolveCartId: () => Promise.resolve(''),
+  refreshCart: () => {},
+  addToCart: () => Promise.resolve(),
+});
+
+const ProductsContextProvider = ({ children }) => {
+  const urlValue = getValueFromUrl('p');
+  const pageDefault = urlValue ? Number(urlValue) : 1;
+
+  const searchCtx = useSearch();
+  const storeCtx = useStore();
+  const attributeMetadataCtx = useAttributeMetadata();
+
+  const pageSizeValue = getValueFromUrl('page_size');
+  const defaultPageSizeOption =
+    Number(storeCtx?.config?.perPageConfig?.defaultPageSizeOption) ||
+    DEFAULT_PAGE_SIZE;
+  const pageSizeDefault = pageSizeValue
+    ? Number(pageSizeValue)
+    : defaultPageSizeOption;
+
+  const translation = useTranslation();
+  const showAllLabel = translation.ProductContainers.showAll;
+
+  const [loading, setLoading] = useState(true);
+  const [pageLoading, setPageLoading] = useState(true);
+  const [items, setItems] = useState([]);
+  const [currentPage, setCurrentPage] = useState(pageDefault);
+  const [pageSize, setPageSize] = useState(pageSizeDefault);
+  const [totalCount, setTotalCount] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [facets, setFacets] = useState([]);
+  const [categoryName, setCategoryName] = useState(
+    storeCtx && storeCtx.config && storeCtx.config.categoryName 
+      ? storeCtx.config.categoryName 
+      : ''
+  );
+  
+  const [pageSizeOptions, setPageSizeOptions] = useState([]);
+  
+  const [currencySymbol, setCurrencySymbol] = useState(
+    storeCtx && storeCtx.config && storeCtx.config.currencySymbol 
+      ? storeCtx.config.currencySymbol 
+      : ''
+  );
+   
+  const [currencyRate, setCurrencyRate] = useState(
+    storeCtx && storeCtx.config && storeCtx.config.currencyRate 
+      ? storeCtx.config.currencyRate 
+      : ''
+  );
+  
+  const [minQueryLengthReached, setMinQueryLengthReached] = useState(false);
+
+  const minQueryLength = useMemo(() => {
+    return storeCtx?.config?.minQueryLength || DEFAULT_MIN_QUERY_LENGTH;
+  }, [storeCtx?.config?.minQueryLength]);
+
+  const categoryPath = storeCtx.config?.currentCategoryUrlPath;
+
+  const viewTypeFromUrl = getValueFromUrl('view_type');
+  const [viewType, setViewType] = useState(
+    viewTypeFromUrl ? viewTypeFromUrl : 'gridView'
+  );
+  const [listViewType, setListViewType] = useState('default');
+
+  const variables = useMemo(() => {
+    const isCategoryPage = Boolean(storeCtx.config?.currentCategoryUrlPath);
+    const baseSort = searchCtx.sort?.length
+      ? searchCtx.sort
+      : isCategoryPage
+        ? CATEGORY_SORT_DEFAULT
+        : SEARCH_SORT_DEFAULT;
+
+    return {
+      phrase: searchCtx.phrase,
+      filter: searchCtx.filters,
+      sort: baseSort,
+      context: storeCtx.context,
+      pageSize,
+      displayOutOfStock: storeCtx.config.displayOutOfStock,
+      currentPage,
+      categoryPath
+    };
+  }, [
+    searchCtx.phrase,
+    searchCtx.filters,
+    searchCtx.sort,
+    storeCtx.context,
+    storeCtx.config.displayOutOfStock,
+    categoryPath,
+    pageSize,
+    currentPage,
+  ]);
+
+  const handleRefineProductSearch = async (optionIds, sku) => {
+    const data = await refineProductSearch({ ...storeCtx, optionIds, sku });
+    return data;
+  };
+
+  const context = {
+    variables,
+    loading,
+    items,
+    setItems,
+    currentPage,
+    setCurrentPage,
+    pageSize,
+    setPageSize,
+    totalCount,
+    setTotalCount,
+    totalPages,
+    setTotalPages,
+    facets,
+    setFacets,
+    categoryName,
+    setCategoryName,
+    currencySymbol,
+    setCurrencySymbol,
+    currencyRate,
+    setCurrencyRate,
+    minQueryLength,
+    minQueryLengthReached,
+    setMinQueryLengthReached,
+    pageSizeOptions,
+    setRoute: storeCtx.route,
+    refineProduct: handleRefineProductSearch,
+    pageLoading,
+    setPageLoading,
+    categoryPath,
+    viewType,
+    setViewType,
+    listViewType,
+    setListViewType,
+    cartId: storeCtx.config.resolveCartId,
+    refreshCart: storeCtx.config.refreshCart,
+    resolveCartId: storeCtx.config.resolveCartId,
+    addToCart: storeCtx.config.addToCart,
+  };
+
+  const [hasInitialized, setHasInitialized] = useState(false);
+  const prevVariablesRef = useRef();
+
+  useEffect(() => {
+    searchProducts();
+    setHasInitialized(true);
+    prevVariablesRef.current = variables;
+  }, []);
+
+  useEffect(() => {
+    if (!hasInitialized) return;
+
+    const hasChanged = !isEqual(prevVariablesRef.current, variables);
+
+    if (hasChanged) {
+      prevVariablesRef.current = variables;
+      searchProducts();
+    }
+  }, [variables]);
+
+  const searchProducts = async () => {
+    try {
+      setLoading(true);
+      moveToTop();
+      if (checkMinQueryLength()) {
+        const filters = [...variables.filter];
+
+        handleCategorySearch(categoryPath, filters);
+
+        const data = await getProductSearch({
+          ...variables,
+          ...storeCtx,
+          apiUrl: storeCtx.apiUrl,
+          filter: filters,
+          categorySearch: !!categoryPath,
+        });
+
+        setItems(data?.productSearch?.items || []);
+        setFacets(data?.productSearch?.facets || []);
+        setTotalCount(data?.productSearch?.total_count || 0);
+        setTotalPages(data?.productSearch?.page_info?.total_pages || 1);
+        handleCategoryNames(data?.productSearch?.facets || []);
+
+        getPageSizeOptions(data?.productSearch?.total_count);
+
+        paginationCheck(
+          data?.productSearch?.total_count,
+          data?.productSearch?.page_info?.total_pages
+        );
+      }
+      setLoading(false);
+      setPageLoading(false);
+    } catch (error) {
+      setLoading(false);
+      setPageLoading(false);
+    }
+  };
+
+  const checkMinQueryLength = () => {
+    if (
+      !storeCtx.config?.currentCategoryUrlPath &&
+      searchCtx.phrase.trim().length <
+        (Number(storeCtx.config.minQueryLength) || DEFAULT_MIN_QUERY_LENGTH)
+    ) {
+      setItems([]);
+      setFacets([]);
+      setTotalCount(0);
+      setTotalPages(1);
+      setMinQueryLengthReached(false);
+      return false;
+    }
+    setMinQueryLengthReached(true);
+    return true;
+  };
+
+  const getPageSizeOptions = (totalCount) => {
+    const optionsArray = [];
+    const pageSizeString =
+      storeCtx?.config?.perPageConfig?.pageSizeOptions ||
+      DEFAULT_PAGE_SIZE_OPTIONS;
+    const pageSizeArray = pageSizeString.split(',');
+    pageSizeArray.forEach((option) => {
+      optionsArray.push({
+        label: option,
+        value: parseInt(option, 10),
+      });
+    });
+
+    if (storeCtx?.config?.allowAllProducts == '1') {
+      optionsArray.push({
+        label: showAllLabel,
+        value: totalCount !== null ? (totalCount > 500 ? 500 : totalCount) : 0,
+      });
+    }
+    setPageSizeOptions(optionsArray);
+  };
+
+  const paginationCheck = (totalCount, totalPages) => {
+    if (totalCount && totalCount > 0 && totalPages === 1) {
+      setCurrentPage(1);
+      handleUrlPagination(1);
+    }
+  };
+
+  const handleCategorySearch = (categoryPath, filters) => {
+    if (categoryPath) {
+      const categoryFilter = {
+        attribute: 'categoryPath',
+        eq: categoryPath,
+      };
+      filters.push(categoryFilter);
+    }
+  };
+
+  const handleCategoryNames = (facets) => {
+    facets.map((facet) => {
+      const bucketType = facet?.buckets[0]?.__typename;
+      if (bucketType === 'CategoryView') {
+        const names = facet.buckets.map((bucket) => {
+          if (bucket.__typename === 'CategoryView')
+            return {
+              name: bucket.name,
+              id: bucket.id,
+            };
+        });
+        setCategoryName(names?.[0]?.name);
+      }
+    });
+  };
+
+  return (
+    <ProductsContext.Provider value={context}>
+      {children}
+    </ProductsContext.Provider>
+  );
+};
+
+const useProducts = () => useContext(ProductsContext);
+
+export { ProductsContextProvider, useProducts };

package/src/context/resultsModifierContext.js

@@ -0,0 +1,35 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import React, { createContext, useContext } from 'react';
+
+const ResultsModifierContext = createContext({
+    baseUrl: '',
+    baseUrlWithoutProtocol: ''
+});
+
+const ResultsModifierProvider = ({
+    baseUrl,
+    baseUrlWithoutProtocol,
+    children
+}) => {
+    return (
+        <ResultsModifierContext.Provider
+            value={{ baseUrl, baseUrlWithoutProtocol }}
+        >
+            {children}
+        </ResultsModifierContext.Provider>
+    );
+};
+
+const useResultsModifier = () => {
+    return useContext(ResultsModifierContext);
+};
+
+export { ResultsModifierProvider, useResultsModifier };

package/src/context/search.jsx

@@ -0,0 +1,127 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import React, { createContext, useState, useEffect, useContext } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { SEARCH_SORT_DEFAULT } from '../utils/constants';
+import {
+  addUrlFilter,
+  getValueFromUrl,
+  removeAllUrlFilters,
+  removeUrlFilter,
+} from '../utils/handleUrlFilters';
+import { generateGQLSortInput } from '../utils/sort';
+import { useStore } from './store';
+
+export const SearchContext = createContext({});
+
+const SearchProvider = ({ children }) => {
+  const storeCtx = useStore();
+  const location = useLocation(); // watches changes in URL query params
+
+  const getSearchPhrase = () => getValueFromUrl(storeCtx.searchQuery || 'q');
+  const getSortFromUrl = () => getValueFromUrl('product_list_order');
+
+  const [phrase, setPhrase] = useState(getSearchPhrase());
+  const [categoryPath, setCategoryPath] = useState('');
+  const [filters, setFilters] = useState([]);
+  const [categoryNames, setCategoryNames] = useState([]);
+  const [sort, setSort] = useState(generateGQLSortInput(getSortFromUrl()) || SEARCH_SORT_DEFAULT);
+  const [filterCount, setFilterCount] = useState(0);
+
+  // Update phrase and sort when URL changes
+  useEffect(() => {
+    setPhrase(getSearchPhrase());
+    setSort(generateGQLSortInput(getSortFromUrl()) || SEARCH_SORT_DEFAULT);
+  }, [location.search]);
+
+  const createFilter = (filter) => {
+    const newFilters = [...filters, filter];
+    setFilters(newFilters);
+    addUrlFilter(filter);
+  };
+
+  const updateFilter = (filter) => {
+    const newFilters = [...filters];
+    const index = newFilters.findIndex((e) => e.attribute === filter.attribute);
+    newFilters[index] = filter;
+    setFilters(newFilters);
+    addUrlFilter(filter);
+  };
+
+  const removeFilter = (name, option) => {
+    const newFilters = filters.filter((e) => e.attribute !== name);
+    setFilters(newFilters);
+    removeUrlFilter(name, option);
+  };
+
+  const clearFilters = () => {
+    removeAllUrlFilters();
+    setFilters([]);
+  };
+
+  const updateFilterOptions = (facetFilter, option) => {
+    const newFilters = filters.filter((e) => e.attribute !== facetFilter.attribute);
+    const newOptions = facetFilter.in?.filter((e) => e !== option);
+
+    newFilters.push({
+      attribute: facetFilter.attribute,
+      in: newOptions,
+    });
+
+    if (newOptions?.length) {
+      setFilters(newFilters);
+      removeUrlFilter(facetFilter.attribute, option);
+    } else {
+      removeFilter(facetFilter.attribute, option);
+    }
+  };
+
+  const getFilterCount = (filters) => {
+    return filters.reduce((count, filter) => {
+      return count + (filter.in ? filter.in.length : 1);
+    }, 0);
+  };
+
+  useEffect(() => {
+    setFilterCount(getFilterCount(filters));
+  }, [filters]);
+
+  const context = {
+    phrase,
+    categoryPath,
+    filters,
+    sort,
+    categoryNames,
+    filterCount,
+    setPhrase,
+    setCategoryPath,
+    setFilters,
+    setCategoryNames,
+    setSort,
+    createFilter,
+    updateFilter,
+    updateFilterOptions,
+    removeFilter,
+    clearFilters,
+  };
+
+  return (
+    <SearchContext.Provider value={context}>
+      {children}
+    </SearchContext.Provider>
+  );
+};
+
+const useSearch = () => {
+  return useContext(SearchContext);
+};
+
+export { SearchProvider, useSearch };

package/src/context/store.jsx

@@ -0,0 +1,93 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { createContext } from 'react';
+import { useContext, useMemo } from 'react';
+import React from 'react';
+
+// Define default URLs and keys (you can move these to a constants file)
+const API_URL = 'https://catalog-service.adobe.io/graphql';
+const TEST_URL = 'https://catalog-service-sandbox.adobe.io/graphql';
+const SANDBOX_KEY = 'storefront-widgets'; // Replace with your actual sandbox key if needed
+
+const StoreContext = createContext({
+  environmentId: '',
+  environmentType: '',
+  websiteCode: '',
+  storeCode: '',
+  storeViewCode: '',
+  apiUrl: '',
+  apiKey: '',
+  config: {},
+  context: {},
+  route: undefined,
+  searchQuery: 'q',
+});
+
+const StoreContextProvider = ({
+  children,
+  environmentId,
+  environmentType,
+  websiteCode,
+  storeCode,
+  storeViewCode,
+  config,
+  context,
+  apiKey,
+  route,
+  searchQuery = 'q',
+}) => {
+  const storeProps = useMemo(() => {
+    const isTesting = environmentType?.toLowerCase() === 'testing';
+    return {
+      environmentId,
+      environmentType,
+      websiteCode,
+      storeCode,
+      storeViewCode,
+      config,
+      context: {
+        //getting error because the nullish coalescing operator (??) isn't supported by your Babel/Webpack setup yet.
+        // customerGroup: context?.customerGroup ?? '',
+        // userViewHistory: context?.userViewHistory ?? [],
+
+        //workaround
+        customerGroup: context && context.customerGroup != null ? context.customerGroup : '',
+        userViewHistory: context && context.userViewHistory != null ? context.userViewHistory : [],
+      },
+      apiUrl: isTesting ? TEST_URL : API_URL,
+      apiKey: isTesting && !apiKey ? SANDBOX_KEY : apiKey,
+      route,
+      searchQuery,
+    };
+  }, [
+    environmentId,
+    environmentType,
+    websiteCode,
+    storeCode,
+    storeViewCode,
+    config,
+    context,
+    apiKey,
+    route,
+    searchQuery,
+  ]);
+
+  return (
+    <StoreContext.Provider value={storeProps}>
+      {children}
+    </StoreContext.Provider>
+  );
+};
+
+const useStore = () => {
+  return useContext(StoreContext);
+};
+
+export { StoreContextProvider, useStore };

package/src/context/translation.jsx

@@ -0,0 +1,125 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import React, { createContext, useContext } from 'react';
+
+import {
+  bg_BG,
+  ca_ES,
+  cs_CZ,
+  da_DK,
+  de_DE,
+  el_GR,
+  en_GB,
+  en_US,
+  es_ES,
+  et_EE,
+  eu_ES,
+  fa_IR,
+  fi_FI,
+  fr_FR,
+  gl_ES,
+  hi_IN,
+  hu_HU,
+  id_ID,
+  it_IT,
+  ja_JP,
+  ko_KR,
+  lt_LT,
+  lv_LV,
+  nb_NO,
+  nl_NL,
+  pt_BR,
+  pt_PT,
+  ro_RO,
+  ru_RU,
+  sv_SE,
+  th_TH,
+  tr_TR,
+  zh_Hans_CN,
+  zh_Hant_TW,
+} from '../i18n';
+import { useStore } from './store';
+
+export const languages = {
+  default: en_US,
+  bg_BG,
+  ca_ES,
+  cs_CZ,
+  da_DK,
+  de_DE,
+  el_GR,
+  en_GB,
+  en_US,
+  es_ES,
+  et_EE,
+  eu_ES,
+  fa_IR,
+  fi_FI,
+  fr_FR,
+  gl_ES,
+  hi_IN,
+  hu_HU,
+  id_ID,
+  it_IT,
+  ja_JP,
+  ko_KR,
+  lt_LT,
+  lv_LV,
+  nb_NO,
+  nl_NL,
+  pt_BR,
+  pt_PT,
+  ro_RO,
+  ru_RU,
+  sv_SE,
+  th_TH,
+  tr_TR,
+  zh_Hans_CN,
+  zh_Hant_TW,
+};
+
+export const TranslationContext = createContext(languages.default);
+
+const useTranslation = () => {
+  const translation = useContext(TranslationContext);
+  return translation;
+};
+
+const getCurrLanguage = (languageDetected) => {
+  const langKeys = Object.keys(languages);
+  if (langKeys.includes(languageDetected)) {
+    return languageDetected;
+  }
+  return 'default';
+};
+
+const Translation = ({ children }) => {
+  const storeCtx = useStore();
+
+  //getting error because the nullish coalescing operator (??) isn't supported by your Babel/Webpack setup yet.
+  //const currLanguage = getCurrLanguage(storeCtx?.config?.locale ?? '');
+
+  //workaround
+  const currLanguage = getCurrLanguage(
+    storeCtx && storeCtx.config && storeCtx.config.locale
+      ? storeCtx.config.locale
+      : ''
+  );
+
+
+  return (
+    <TranslationContext.Provider value={languages[currLanguage]}>
+      {children}
+    </TranslationContext.Provider>
+  );
+};
+
+export default Translation;
+export { getCurrLanguage, useTranslation };