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

package/src/components/SwatchButtonGroup/SwatchButtonGroup.jsx

@@ -0,0 +1,86 @@
+/*
+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 from 'react';
+import { SwatchButton } from '../SwatchButton';
+
+const MAX_SWATCHES = 5;
+
+export const SwatchButtonGroup = ({
+  isSelected,
+  swatches,
+  showMore,
+  productUrl,
+  onClick,
+  sku
+}) => {
+  const moreSwatches = swatches.length > MAX_SWATCHES;
+  const numberOfOptions = moreSwatches ? MAX_SWATCHES - 1 : swatches.length;
+
+  return (
+    <div className="ds-sdk-product-item__product-swatch-group flex column items-center space-x-2">
+      {moreSwatches ? (
+        <div className="flex">
+          {swatches.slice(0, numberOfOptions).map((swatch) => {
+            const checked = isSelected(swatch.id);
+            return (
+              swatch &&
+              swatch.type === 'COLOR_HEX' && (
+                <div
+                  key={swatch.id}
+                  className="ds-sdk-product-item__product-swatch-item mr-2 text-sm text-primary"
+                >
+                  <SwatchButton
+                    id={swatch.id}
+                    value={swatch.value}
+                    type={swatch.type}
+                    checked={!!checked}
+                    onClick={() => onClick([swatch.id], sku)}
+                  />
+                </div>
+              )
+            );
+          })}
+          <a href={productUrl} className="hover:no-underline">
+            <div className="ds-sdk-product-item__product-swatch-item text-sm text-primary">
+              <SwatchButton
+                id="show-more"
+                value={`+${swatches.length - numberOfOptions}`}
+                type="TEXT"
+                checked={false}
+                onClick={showMore}
+              />
+            </div>
+          </a>
+        </div>
+      ) : (
+        swatches.slice(0, numberOfOptions).map((swatch) => {
+          const checked = isSelected(swatch.id);
+          return (
+            swatch &&
+            swatch.type === 'COLOR_HEX' && (
+              <div
+                key={swatch.id}
+                className="ds-sdk-product-item__product-swatch-item text-sm text-primary"
+              >
+                <SwatchButton
+                  id={swatch.id}
+                  value={swatch.value}
+                  type={swatch.type}
+                  checked={!!checked}
+                  onClick={() => onClick([swatch.id], sku)}
+                />
+              </div>
+            )
+          );
+        })
+      )}
+    </div>
+  );
+};

package/src/components/SwatchButtonGroup/index.js

@@ -0,0 +1,11 @@
+/*
+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.
+*/
+
+export * from './SwatchButtonGroup';
+export { SwatchButtonGroup as default } from './SwatchButtonGroup';

package/src/components/ViewSwitcher/ViewSwitcher.jsx

@@ -0,0 +1,46 @@
+/*
+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 from 'react';
+import { useProducts } from '../../context';
+import { handleViewType } from '../../utils/handleUrlFilters';
+
+import GridView from '../../icons/gridView.svg';
+import ListView from '../../icons/listView.svg';
+
+const ViewSwitcher = () => {
+  const { viewType, setViewType } = useProducts();
+
+  const handleClick = (newViewType) => {
+    handleViewType(newViewType);
+    setViewType(newViewType);
+  };
+
+  return (
+    <div className="flex justify-between">
+      <button
+        className={`flex items-center ${
+          viewType === 'gridview' ? 'bg-gray-100' : ''
+        } ring-black ring-opacity-5 p-sm text-sm h-[32px] border border-gray-300`}
+        onClick={() => handleClick('gridview')}
+      >
+        <GridView className="h-[20px] w-[20px]" />
+      </button>
+      <button
+        className={`flex items-center ${
+          viewType === 'listview' ? 'bg-gray-100' : ''
+        } ring-black ring-opacity-5 p-sm text-sm h-[32px] border border-gray-300`}
+        onClick={() => handleClick('listview')}
+      >
+        <ListView className="h-[20px] w-[20px]" />
+      </button>
+    </div>
+  );
+};
+
+export default ViewSwitcher;

package/src/components/ViewSwitcher/index.js

@@ -0,0 +1,11 @@
+/*
+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.
+*/
+
+export * from './ViewSwitcher';
+export { default } from './ViewSwitcher';

package/src/components/WishlistButton/WishlistButton.jsx

@@ -0,0 +1,67 @@
+/*
+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 from 'react';
+
+import { useWishlist } from '../../context';
+import EmptyHeart from '../../icons/emptyHeart.svg';
+import FilledHeart from '../../icons/filledHeart.svg';
+import { classNames } from '../../utils/dom';
+
+export const WishlistButton = ({ type, productSku }) => {
+  const { isAuthorized, wishlist, addItemToWishlist, removeItemFromWishlist } =
+    useWishlist();
+
+  const wishlistItemStatus = wishlist?.items_v2?.items.find(
+    (ws) => ws.product.sku === productSku
+  );
+  const isWishlistItem = !!wishlistItemStatus;
+
+  const heart = isWishlistItem ? <FilledHeart /> : <EmptyHeart />;
+
+  const preventBubbleUp = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const handleAddWishlist = (e) => {
+    preventBubbleUp(e);
+    const selectedWishlistId = wishlist?.id;
+    if (isAuthorized) {
+      addItemToWishlist(selectedWishlistId, {
+        sku: productSku,
+        quantity: 1,
+      });
+    } else {
+      // FIXME: Update this for AEM/CIF compatibility if needed
+      window.location.href = `${window.origin}/customer/account/login/`;
+    }
+  };
+
+  const handleRemoveWishlist = (e) => {
+    preventBubbleUp(e);
+    if (!wishlistItemStatus) return;
+    removeItemFromWishlist(wishlist?.id, wishlistItemStatus.id);
+  };
+
+  return (
+    <div
+      className={classNames(
+        `ds-sdk-wishlist-${type}-button mt-[-2px]`,
+        type !== 'inLineWithName'
+          ? 'w-[30px] absolute top-0 right-0'
+          : 'w-[24px]'
+      )}
+    >
+      <div onClick={isWishlistItem ? handleRemoveWishlist : handleAddWishlist}>
+        {heart}
+      </div>
+    </div>
+  );
+};

package/src/components/WishlistButton/index.js

@@ -0,0 +1,11 @@
+/*
+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.
+*/
+
+export * from './WishlistButton';
+export { default } from './WishlistButton';

package/src/containers/App.jsx

@@ -0,0 +1,145 @@
+/*
+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, { useState } from 'react';
+import { FilterButton } from '../components/FilterButton';
+import Loading from '../components/Loading';
+import Shimmer from '../components/Shimmer';
+
+import { CategoryFilters } from '../components/CategoryFilters';
+import { SelectedFilters } from '../components/Facets';
+import {
+  useProducts,
+  useSearch,
+  useSensor,
+  useStore,
+  useTranslation
+} from '../context';
+import ProductsContainer from './ProductsContainer';
+import { ProductsHeader } from './ProductsHeader';
+
+const App = () => {
+  const searchCtx = useSearch();
+  const productsCtx = useProducts();
+  const { screenSize } = useSensor();
+  const translation = useTranslation();
+  const { displayMode } = useStore().config;
+  const [showFilters, setShowFilters] = useState(true);
+
+  const loadingLabel = translation.Loading.title;
+
+  let title = productsCtx.categoryName || '';
+  if (productsCtx.variables.phrase) {
+    const text = translation.CategoryFilters.results;
+    title = text.replace('{phrase}', `"${productsCtx.variables.phrase !== null && productsCtx.variables.phrase !== undefined ? productsCtx.variables.phrase : ''}"`);
+
+  }
+
+  const getResults = (totalCount) => {
+    const resultsTranslation = translation.CategoryFilters.products;
+    return resultsTranslation.replace('{totalCount}', `${totalCount}`);
+  };
+
+  return (
+    <>
+      {!(displayMode === 'PAGE') &&
+        (!screenSize.mobile && showFilters && productsCtx.facets.length > 0 ? (
+          <div className="ds-widgets bg-body py-2 px-2">
+            <div className="flex">
+              <CategoryFilters
+                loading={productsCtx.loading}
+                pageLoading={productsCtx.pageLoading}
+                facets={productsCtx.facets}
+                totalCount={productsCtx.totalCount}
+                categoryName={productsCtx.categoryName !== null && productsCtx.categoryName !== undefined ? productsCtx.categoryName : ''}
+                phrase={productsCtx.variables.phrase !== null && productsCtx.variables.phrase !== undefined ? productsCtx.variables.phrase : ''}
+                showFilters={showFilters}
+                setShowFilters={setShowFilters}
+                filterCount={searchCtx.filterCount}
+              />
+              <div
+                className={`ds-widgets_results flex flex-col items-center ${
+                  productsCtx.categoryName ? 'pt-16' : 'pt-28'
+                } w-full h-full`}
+              >
+                <ProductsHeader
+                  facets={productsCtx.facets}
+                  totalCount={productsCtx.totalCount}
+                  screenSize={screenSize}
+                />
+                <SelectedFilters />
+                <ProductsContainer showFilters={showFilters} />
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="ds-widgets bg-body py-2 px-2">
+            <div className="flex flex-col">
+              <div className="flex flex-col items-center w-full h-full">
+                <div className="justify-start w-full h-full">
+                  <div className="hidden sm:flex ds-widgets-_actions relative max-w-[21rem] w-full h-full px-2 flex-col overflow-y-auto">
+                    <div className="ds-widgets_actions_header flex justify-between items-center mb-md">
+                      {title && <span>{title}</span>}
+                      {!productsCtx.loading && (
+                        <span className="text-primary text-sm">
+                          {getResults(productsCtx.totalCount)}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="ds-widgets_results flex flex-col items-center w-full h-full">
+                <div className="flex w-full h-full">
+                  {!screenSize.mobile &&
+                    !productsCtx.loading &&
+                    productsCtx.facets.length > 0 && (
+                      <div className="flex w-full h-full">
+                        <FilterButton
+                          displayFilter={() => setShowFilters(true)}
+                          type="desktop"
+                          title={`${translation.Filter.showTitle}${
+                            searchCtx.filterCount > 0
+                              ? ` (${searchCtx.filterCount})`
+                              : ''
+                          }`}
+                        />
+                      </div>
+                    )}
+                </div>
+                {productsCtx.loading ? (
+                  screenSize.mobile ? (
+                    <Loading label={loadingLabel} />
+                  ) : (
+                    <Shimmer />
+                  )
+                ) : (
+                  <>
+                    <div className="flex w-full h-full">
+                      <ProductsHeader
+                        facets={productsCtx.facets}
+                        totalCount={productsCtx.totalCount}
+                        screenSize={screenSize}
+                      />
+                    </div>
+                    <SelectedFilters />
+                    <ProductsContainer
+                      showFilters={showFilters && productsCtx.facets.length > 0}
+                    />
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+    </>
+  );
+};
+
+export default App;

package/src/containers/LiveSearchPLPLoader.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import LiveSearchPLP from '../index';
+import { useLiveSearchPLPConfig } from '../hooks/useLiveSearchPLPConfig';
+import { ResultsModifierProvider } from '../context/resultsModifierContext';
+
+export const LiveSearchPLPLoader = ({categoryId}) => {
+  const { config, loading, error } = useLiveSearchPLPConfig({categoryId});
+
+  if (loading) {
+    return <div></div>;
+  }
+  
+  if (error || !config) {
+    return <div>Error loading Live Search configuration</div>;
+  }
+
+  return (
+    <ResultsModifierProvider baseUrl={config?.baseUrl} baseUrlWithoutProtocol={config?.baseUrlwithoutProtocol}>
+      <LiveSearchPLP storeDetails={config} />
+    </ResultsModifierProvider>
+  );
+};
+
+export default LiveSearchPLPLoader;

package/src/containers/LiveSearchPopoverLoader.jsx

@@ -0,0 +1,190 @@
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useAutocomplete, Popover, LiveSearch } from '@magento/storefront-search-as-you-type';
+import { Form } from 'informed';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from '../styles/searchBar.module.css';
+import autoCompleteClasses from '../styles/autocomplete.module.css';
+import { useLiveSearchPopoverConfig } from '../hooks/useLiveSearchPopoverConfig';
+import { Search as SearchIcon } from 'react-feather';
+
+const LiveSearchPopoverLoader = () => {
+    const classes = useStyle(defaultClasses);
+    const history = useHistory();
+    const [isPopoverVisible, setPopoverVisible] = useState(false);
+
+    const {
+        storeDetails,
+        configReady,
+        storeLoading,
+        customerLoading,
+        storeError
+    } = useLiveSearchPopoverConfig();
+
+    const liveSearch = useMemo(() => {
+        if (!storeDetails || Object.keys(storeDetails).length === 0) return null;
+        return new LiveSearch(storeDetails);
+    }, [JSON.stringify(storeDetails)]);
+
+    const {
+    performSearch,
+    minQueryLength,
+    currencySymbol
+} = liveSearch ? liveSearch : {
+    performSearch: () => Promise.resolve({}),
+    minQueryLength: 3,
+    currencySymbol: '$'
+};
+
+
+    const {
+        formProps,
+        formRef,
+        inputProps,
+        inputRef,
+        results,
+        resultsRef,
+        loading: searchLoading,
+        searchTerm
+    } = useAutocomplete(performSearch, minQueryLength);
+
+    const transformResults = originalResults => {
+        if (!originalResults?.data?.productSearch?.items) return originalResults;
+
+        const cleanUrl = url =>
+                url?.replace(storeDetails.baseUrlwithoutProtocol, '');
+        
+        const transformedItems = originalResults.data.productSearch.items.map(item => {
+            const product = item.product;
+            if (!product) return item;
+
+            return {
+                ...item,
+                product: {
+                    ...product,
+                    canonical_url: cleanUrl(product.canonical_url),
+                    image: { ...product.image, url: cleanUrl(product.image?.url) },
+                    small_image: { ...product.small_image, url: cleanUrl(product.small_image?.url) },
+                    thumbnail: { ...product.thumbnail, url: cleanUrl(product.thumbnail?.url) }
+                }
+            };
+        });
+
+        return {
+            ...originalResults,
+            data: {
+                ...originalResults.data,
+                productSearch: {
+                    ...originalResults.data.productSearch,
+                    items: transformedItems
+                }
+            }
+        };
+    };
+
+    const modifiedResults = transformResults(results);
+    inputRef.current = document.getElementById('search_query');
+    formRef.current = document.getElementById('search-autocomplete-form');
+
+    const getSearchStatusMessage = () => {
+        if (!searchTerm) return 'Search for a product';
+
+        if (searchTerm.length < minQueryLength) {
+            return `Search term must be at least ${minQueryLength} characters`;
+        }
+
+        if (searchLoading) {
+            return 'Fetching results...';
+        }
+
+        if (
+            searchTerm.length >= minQueryLength &&
+            !searchLoading &&
+            modifiedResults?.data?.productSearch?.items?.length === 0
+        ) {
+            return 'No results were found.';
+        }
+
+        return null;
+    };
+
+    const searchStatusMessage = getSearchStatusMessage();
+
+    useEffect(() => {
+        if (searchTerm.length >= minQueryLength) {
+            setPopoverVisible(true);
+        }
+    }, [searchTerm, minQueryLength]);
+
+    const handleSubmit = useCallback(
+        event => {
+            const query = inputRef.current?.value;
+            if (query) {
+                setPopoverVisible(false);
+                history.push(`/search.html?query=${query}`);
+            }
+        },
+        [history, inputRef]
+    );
+
+    if (!configReady) return null; // Or a loading spinner
+
+    return (
+        <Form
+            autoComplete="off"
+            className={classes.form}
+            id="search-autocomplete-form"
+            {...formProps}
+            action="/search.html"
+            onSubmit={handleSubmit}
+        >
+            <div className={classes.search}>
+                <TextInput
+                    id="search_query"
+                    before={<SearchIcon />}
+                    field="query"
+                    data-cy="SearchField-textInput"
+                    {...inputProps}
+                />
+                <div data-cy="Autocomplete-root" className={autoCompleteClasses.root_visible}>
+                    {searchStatusMessage && (
+                        <label
+                            id="search_query_label"
+                            data-cy="Autocomplete-message"
+                            className={classes.message}
+                        >
+                            {searchStatusMessage}
+                        </label>
+                    )}
+                    <div
+                        id="search_autocomplete"
+                        className={`${classes.suggestions} ${classes.popover}`}
+                    >
+                        {searchTerm &&
+                        !searchLoading &&
+                        results &&
+                        isPopoverVisible && (
+                            <Popover
+                                active={searchTerm.length >= minQueryLength}
+                                response={modifiedResults}
+                                formRef={formRef}
+                                resultsRef={resultsRef}
+                                inputRef={inputRef}
+                                pageSize={storeDetails.config.pageSize}
+                                currencySymbol={currencySymbol}
+                                currencyRate={storeDetails.config.currencyRate}
+                                minQueryLengthHit={
+                                    searchTerm.length >= minQueryLength
+                                }
+                                searchRoute={storeDetails.searchRoute}
+                            />
+                        )}
+                    </div>
+                </div>
+            </div>
+        </Form>
+    );
+};
+
+export default LiveSearchPopoverLoader;

package/src/containers/LiveSearchSRLPLoader.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import LiveSearchPLP from '../index';
+import { useLiveSearchSRLPConfig } from '../hooks/useLiveSearchSRLPConfig';
+import { ResultsModifierProvider } from '../context/resultsModifierContext';
+
+export const LiveSearchSRLPLoader = () => {
+  const { config, loading, error } = useLiveSearchSRLPConfig();
+
+  if (loading) {
+    return <div></div>;
+  }
+ 
+  if (error || !config) {
+    return <div>Error loading Live Search configuration</div>;
+  }
+
+  return (
+    <ResultsModifierProvider baseUrl={config?.baseUrl} baseUrlWithoutProtocol={config?.baseUrlwithoutProtocol}>
+      <LiveSearchPLP storeDetails={config} />
+    </ResultsModifierProvider>
+  );
+};
+
+export default LiveSearchSRLPLoader;

package/src/containers/ProductListingPage.jsx

@@ -0,0 +1,66 @@
+/*
+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 from 'react';
+import { validateStoreDetailsKeys } from '../utils/validateStoreDetails';
+
+import '../styles/global.css';
+
+import {
+  AttributeMetadataProvider,
+  CartProvider,
+  ProductsContextProvider,
+  SearchProvider,
+  StoreContextProvider,
+} from '../context';
+import Resize from '../context/displayChange';
+import Translation from '../context/translation';
+import { getUserViewHistory } from '../utils/getUserViewHistory';
+import App from './App';
+
+/**
+ * A plug-and-play React component that provides the full Live Search PLP context.
+ * @param {object} props
+ * @param {object} props.storeDetails - Store configuration data (must include context).
+ */
+const ProductListingPage = ({ storeDetails }) => {
+  if (!storeDetails) {
+    throw new Error("LiveSearchPLP's storeDetails prop was not provided");
+  }
+
+  const userViewHistory = getUserViewHistory();
+
+  const updatedStoreDetails = {
+    ...storeDetails,
+    context: {
+      ...storeDetails.context,
+      userViewHistory,
+    },
+  };
+
+  return (
+    <StoreContextProvider {...validateStoreDetailsKeys(updatedStoreDetails)}>
+      <AttributeMetadataProvider>
+        <SearchProvider>
+          <Resize>
+            <Translation>
+              <ProductsContextProvider>
+                <CartProvider>
+                  <App />
+                </CartProvider>
+              </ProductsContextProvider>
+            </Translation>
+          </Resize>
+        </SearchProvider>
+      </AttributeMetadataProvider>
+    </StoreContextProvider>
+  );
+};
+
+export default ProductListingPage;