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

package/src/containers/ProductsContainer.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, { useEffect } from 'react';
+import { ProductCardShimmer } from '../components/ProductCardShimmer';
+import { useProducts, useSensor, useTranslation } from '../context';
+import { handleUrlPageSize, handleUrlPagination } from '../utils/handleUrlFilters';
+
+import { Alert } from '../components/Alert';
+import { Pagination } from '../components/Pagination';
+import { PerPagePicker } from '../components/PerPagePicker';
+import { ProductList } from '../components/ProductList';
+
+const ProductsContainer = ({ showFilters }) => {
+  const productsCtx = useProducts();
+  const { screenSize } = useSensor();
+
+  const {
+    variables,
+    items,
+    setCurrentPage,
+    currentPage,
+    setPageSize,
+    pageSize,
+    totalPages,
+    totalCount,
+    minQueryLength,
+    minQueryLengthReached,
+    pageSizeOptions,
+    loading,
+  } = productsCtx;
+
+  const translation = useTranslation();
+
+  const goToPage = (page) => {
+    if (typeof page === 'number') {
+      setCurrentPage(page);
+      handleUrlPagination(page);
+    }
+  };
+
+  const onPageSizeChange = (pageSizeOption) => {
+    setPageSize(pageSizeOption);
+    handleUrlPageSize(pageSizeOption);
+  };
+
+  const getPageSizeTranslation = (pageSize, pageSizeOptions) => {
+    const pageSizeTranslation = translation.ProductContainers.pagePicker;
+    const pageSizeTranslationOrder = pageSizeTranslation.split(' ');
+
+    return pageSizeTranslationOrder.map((word, index) =>
+      word === '{pageSize}' ? (
+        <PerPagePicker
+          key={index}
+          pageSizeOptions={pageSizeOptions}
+          value={pageSize}
+          onChange={onPageSizeChange}
+        />
+      ) : (
+        `${word} `
+      )
+    );
+  };
+
+  useEffect(() => {
+    if (currentPage < 1) {
+      goToPage(1);
+    }
+  }, []);
+
+  const productCardArray = Array.from({ length: 8 });
+
+  if (!minQueryLengthReached) {
+    const templateMinQueryText = translation.ProductContainers.minquery;
+    const title = templateMinQueryText
+      .replace('{variables.phrase}', variables.phrase)
+      .replace('{minQueryLength}', minQueryLength);
+
+    return (
+      <div className="ds-sdk-min-query__page mx-auto max-w-8xl py-12 px-4 sm:px-6 lg:px-8">
+        <Alert title={title} type="warning" description="" />
+      </div>
+    );
+  }
+
+  if (!totalCount) {
+    return (
+      <div className="ds-sdk-no-results__page mx-auto max-w-8xl py-12 px-4 sm:px-6 lg:px-8">
+        <Alert
+          title={translation.ProductContainers.noresults}
+          type="warning"
+          description=""
+        />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {loading ? (
+        <div
+          style={{
+            gridTemplateColumns: `repeat(${screenSize.columns}, minmax(0, 1fr))`,
+          }}
+          className="ds-sdk-product-list__grid mt-md grid grid-cols-1 gap-y-8 gap-x-md sm:grid-cols-2 md:grid-cols-3 xl:gap-x-4 pl-8"
+        >
+          {productCardArray.map((_, index) => (
+            <ProductCardShimmer key={index} />
+          ))}
+        </div>
+      ) : (
+        <ProductList
+          products={items}
+          numberOfColumns={screenSize.columns}
+          showFilters={showFilters}
+        />
+      )}
+
+      <div
+        className={`flex flex-row justify-between max-w-full ${
+          showFilters ? 'mx-auto' : 'mr-auto'
+        } w-full h-full`}
+      >
+        <div>
+          {getPageSizeTranslation(pageSize, pageSizeOptions)}
+        </div>
+        {totalPages > 1 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={goToPage}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+export default ProductsContainer;

package/src/containers/ProductsHeader.jsx

@@ -0,0 +1,123 @@
+/*
+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, { useCallback, useEffect, useState } from 'react';
+
+import ViewSwitcher from '../components/ViewSwitcher';
+import Facets from '../components/Facets';
+import { FilterButton } from '../components/FilterButton';
+import { SearchBar } from '../components/SearchBar';
+import { SortDropdown } from '../components/SortDropdown';
+
+import {
+  useAttributeMetadata,
+  useProducts,
+  useSearch,
+  useStore,
+  useTranslation,
+} from '../context';
+
+import { getValueFromUrl, handleUrlSort } from '../utils/handleUrlFilters';
+import {
+  defaultSortOptions,
+  generateGQLSortInput,
+  getSortOptionsfromMetadata,
+} from '../utils/sort';
+
+export const ProductsHeader = ({ facets, totalCount, screenSize }) => {
+  const searchCtx = useSearch();
+  const storeCtx = useStore();
+  const attributeMetadata = useAttributeMetadata();
+  const productsCtx = useProducts();
+  const translation = useTranslation();
+
+  const [showMobileFacet, setShowMobileFacet] = useState(
+    !!productsCtx.variables.filter?.length
+  );
+  const [sortOptions, setSortOptions] = useState(defaultSortOptions());
+
+  const getSortOptions = useCallback(() => {
+    setSortOptions(
+      getSortOptionsfromMetadata(
+        attributeMetadata?.sortable,
+        storeCtx?.config?.displayOutOfStock,
+        storeCtx?.config?.currentCategoryUrlPath,
+        translation
+      )
+    );
+  }, [storeCtx, translation, attributeMetadata]);
+
+  useEffect(() => {
+    getSortOptions();
+  }, [getSortOptions]);
+
+  const defaultSortOption = storeCtx.config?.currentCategoryUrlPath
+    ? 'position_ASC'
+    : 'relevance_DESC';
+
+  const sortFromUrl = getValueFromUrl('product_list_order');
+  const sortByDefault = sortFromUrl ? sortFromUrl : defaultSortOption;
+
+  const [sortBy, setSortBy] = useState(sortByDefault);
+
+  const onSortChange = (sortOption) => {
+    setSortBy(sortOption);
+    searchCtx.setSort(generateGQLSortInput(sortOption));
+    handleUrlSort(sortOption);
+  };
+
+  return (
+    <div className="flex flex-col max-w-5xl lg:max-w-full ml-auto w-full h-full">
+      <div
+        className={`flex gap-x-2.5 mb-[1px] ${
+          screenSize.mobile ? 'justify-between' : 'justify-end'
+        }`}
+      >
+        <div>
+          {screenSize.mobile ? (
+            totalCount > 0 && (
+              <div className="pb-4">
+                <FilterButton
+                  displayFilter={() => setShowMobileFacet(!showMobileFacet)}
+                  type="mobile"
+                />
+              </div>
+            )
+          ) : (
+            storeCtx.config.displaySearchBox && (
+              <SearchBar
+                phrase={searchCtx.phrase}
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter') {
+                    searchCtx.setPhrase(e.target.value);
+                  }
+                }}
+                onClear={() => searchCtx.setPhrase('')}
+                placeholder={translation.SearchBar.placeholder}
+              />
+            )
+          )}
+        </div>
+        {totalCount > 0 && (
+          <>
+            {storeCtx?.config?.listview && <ViewSwitcher />}
+            <SortDropdown
+              sortOptions={sortOptions}
+              value={sortBy}
+              onChange={onSortChange}
+            />
+          </>
+        )}
+      </div>
+      {screenSize.mobile && showMobileFacet && (
+        <Facets searchFacets={facets} />
+      )}
+    </div>
+  );
+};

package/src/context/attributeMetadata.js

@@ -0,0 +1,63 @@
+/*
+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, useEffect, useState } from 'react';
+import { getAttributeMetadata } from '../api/search';
+import { useStore } from './store';
+
+// Remove the interface and type annotations since we're using JavaScript
+const AttributeMetadataContext = createContext({
+    sortable: [],
+    filterableInSearch: []
+});
+
+const AttributeMetadataProvider = ({ children }) => {
+    const [attributeMetadata, setAttributeMetadata] = useState({
+        sortable: [],
+        filterableInSearch: null
+    });
+
+    const storeCtx = useStore();
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const data = await getAttributeMetadata({
+                ...storeCtx,
+                apiUrl: storeCtx.apiUrl
+            });
+            if (data?.attributeMetadata) {
+                setAttributeMetadata({
+                    sortable: data.attributeMetadata.sortable,
+                    filterableInSearch: data.attributeMetadata.filterableInSearch.map(
+                        attribute => attribute.attribute
+                    )
+                });
+            }
+        };
+
+        fetchData();
+    }, [storeCtx]); // Added storeCtx as dependency to handle any changes to the context
+
+    const attributeMetadataContext = {
+        ...attributeMetadata
+    };
+
+    return (
+        <AttributeMetadataContext.Provider value={attributeMetadataContext}>
+            {children}
+        </AttributeMetadataContext.Provider>
+    );
+};
+
+const useAttributeMetadata = () => {
+    const attributeMetadataCtx = useContext(AttributeMetadataContext);
+    return attributeMetadataCtx;
+};
+
+export { AttributeMetadataProvider, useAttributeMetadata };

package/src/context/cart.js

@@ -0,0 +1,97 @@
+/*
+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, useState } from 'react';
+import { getGraphQL } from '../api/graphql';
+import { ADD_TO_CART } from '../api/mutations';
+import { GET_CUSTOMER_CART } from '../api/queries';
+import { useProducts } from './products';
+import { useStore } from './store';
+
+// Removed TypeScript interface and type annotations
+
+const CartContext = createContext({});
+
+const useCart = () => {
+    return useContext(CartContext);
+};
+
+const CartProvider = ({ children }) => {
+    const [cart, setCart] = useState({ cartId: '' });
+    const { refreshCart, resolveCartId } = useProducts();
+    const { storeViewCode, config } = useStore();
+
+    const initializeCustomerCart = async () => {
+        let cartId = '';
+        if (!resolveCartId) {
+            const customerResponse = await getGraphQL(
+                GET_CUSTOMER_CART,
+                {},
+                storeViewCode,
+                config && config.baseUrl
+            );
+
+            cartId =
+                customerResponse &&
+                customerResponse.data &&
+                customerResponse.data.customerCart &&
+                customerResponse.data.customerCart.id
+                    ? customerResponse.data.customerCart.id
+                    : '';
+        } else {
+            const resolvedCartId = await resolveCartId();
+            cartId = resolvedCartId != null ? resolvedCartId : '';
+        }
+
+        setCart({ ...cart, cartId });
+        return cartId;
+    };
+
+    const addToCartGraphQL = async sku => {
+        let cartId = cart.cartId;
+        if (!cartId) {
+            cartId = await initializeCustomerCart();
+        }
+        const cartItems = [
+            {
+                quantity: 1,
+                sku
+            }
+        ];
+
+        const variables = {
+            cartId,
+            cartItems
+        };
+
+        const response = await getGraphQL(
+            ADD_TO_CART,
+            variables,
+            storeViewCode,
+            config?.baseUrl
+        );
+
+        return response;
+    };
+
+    const cartContext = {
+        cart,
+        initializeCustomerCart,
+        addToCartGraphQL,
+        refreshCart
+    };
+
+    return (
+        <CartContext.Provider value={cartContext}>
+            {children}
+        </CartContext.Provider>
+    );
+};
+
+export { CartProvider, useCart };

package/src/context/displayChange.js

@@ -0,0 +1,90 @@
+/*
+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, useState, useEffect } from 'react';
+import { PRODUCT_COLUMNS } from '../utils/constants';
+
+// Removed TypeScript interfaces
+
+const DefaultScreenSizeObject = {
+    mobile: false,
+    tablet: false,
+    desktop: false,
+    columns: PRODUCT_COLUMNS.desktop
+};
+
+const useSensor = () => {
+    const { screenSize } = useContext(ResizeChangeContext);
+
+    const [result, setResult] = useState(DefaultScreenSizeObject);
+
+    useEffect(() => {
+        const size = screenSize ? screenSize : DefaultScreenSizeObject;
+        setResult(size);
+    }, [screenSize]);
+
+    return { screenSize: result };
+};
+
+export const ResizeChangeContext = createContext({});
+
+const getColumn = screenSize => {
+    if (screenSize.desktop) {
+        return PRODUCT_COLUMNS.desktop;
+    }
+    if (screenSize.tablet) {
+        return PRODUCT_COLUMNS.tablet;
+    }
+    if (screenSize.mobile) {
+        return PRODUCT_COLUMNS.mobile;
+    }
+    // Fallback just in case
+    return PRODUCT_COLUMNS.desktop;
+};
+
+const Resize = ({ children }) => {
+    const detectDevice = () => {
+        const result = { ...DefaultScreenSizeObject };
+
+        result.mobile = window.matchMedia(
+            'screen and (max-width: 767px)'
+        ).matches;
+        result.tablet = window.matchMedia(
+            'screen and (min-width: 768px) and (max-width: 960px)'
+        ).matches;
+        result.desktop = window.matchMedia(
+            'screen and (min-width: 961px)'
+        ).matches;
+        result.columns = getColumn(result);
+        return result;
+    };
+
+    const [screenSize, setScreenSize] = useState(detectDevice());
+
+    useEffect(() => {
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    });
+
+    const handleResize = () => {
+        setScreenSize({ ...screenSize, ...detectDevice() });
+    };
+
+    return (
+        <ResizeChangeContext.Provider value={{ screenSize }}>
+            {children}
+        </ResizeChangeContext.Provider>
+    );
+};
+
+export default Resize;
+
+export { useSensor };

package/src/context/events.js

@@ -0,0 +1,160 @@
+/*
+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 mse from '@adobe/magento-storefront-events-sdk';
+
+const updateSearchInputCtx = (
+    searchUnitId,
+    searchRequestId,
+    phrase,
+    filters,
+    pageSize,
+    currentPage,
+    sort
+) => {
+    if (!mse) {
+        // don't break search if events are broken/not loading
+        return;
+    }
+
+    const searchInputResult = mse.context.getSearchInput();
+    const searchInputCtx =
+        searchInputResult !== null && searchInputResult !== undefined
+            ? searchInputResult
+            : { units: [] };
+
+    const searchInputUnit = {
+        searchUnitId,
+        searchRequestId,
+        queryTypes: ['products', 'suggestions'],
+        phrase,
+        pageSize,
+        currentPage,
+        filter: filters,
+        sort
+    };
+
+    const searchInputUnitIndex = searchInputCtx.units.findIndex(
+        unit => unit.searchUnitId === searchUnitId
+    );
+
+    if (searchInputUnitIndex < 0) {
+        searchInputCtx.units.push(searchInputUnit);
+    } else {
+        searchInputCtx.units[searchInputUnitIndex] = searchInputUnit;
+    }
+
+    mse.context.setSearchInput(searchInputCtx);
+};
+
+const updateSearchResultsCtx = (searchUnitId, searchRequestId, results) => {
+    const mse = window.magentoStorefrontEvents;
+    if (!mse) {
+        return;
+    }
+
+    const searchResultsResult = mse.context.getSearchResults();
+    const searchResultsCtx =
+        searchResultsResult !== null && searchResultsResult !== undefined
+            ? searchResultsResult
+            : { units: [] };
+
+    const searchResultUnitIndex = searchResultsCtx.units.findIndex(
+        unit => unit.searchUnitId === searchUnitId
+    );
+
+    const searchResultUnit = {
+        searchUnitId,
+        searchRequestId,
+        products: createProducts(results.items),
+        categories: [],
+        suggestions: createSuggestions(results.suggestions),
+        page: results?.page_info?.current_page || 1,
+        perPage: results?.page_info?.page_size || 20,
+        facets: createFacets(results.facets)
+    };
+
+    if (searchResultUnitIndex < 0) {
+        searchResultsCtx.units.push(searchResultUnit);
+    } else {
+        searchResultsCtx.units[searchResultUnitIndex] = searchResultUnit;
+    }
+
+    mse.context.setSearchResults(searchResultsCtx);
+};
+
+const createProducts = items => {
+    if (!items) {
+        return [];
+    }
+
+    return items.map((item, index) => ({
+        name: item && item.product && item.product.name,
+        sku: item && item.product && item.product.sku,
+        url:
+            item &&
+            item.product &&
+            item.product.canonical_url !== undefined &&
+            item.product.canonical_url !== null
+                ? item.product.canonical_url
+                : '',
+        imageUrl:
+            item &&
+            item.productView &&
+            Array.isArray(item.productView.images) &&
+            item.productView.images.length
+                ? item.productView.images[0].url !== undefined &&
+                  item.productView.images[0].url !== null
+                    ? item.productView.images[0].url
+                    : ''
+                : '',
+        price:
+            item &&
+            item.productView &&
+            item.productView.price &&
+            item.productView.price.final &&
+            item.productView.price.final.amount &&
+            item.productView.price.final.amount.value !== undefined &&
+            item.productView.price.final.amount.value !== null
+                ? item.productView.price.final.amount.value
+                : item &&
+                  item.product &&
+                  item.product.price_range &&
+                  item.product.price_range.minimum_price &&
+                  item.product.price_range.minimum_price.final_price &&
+                  item.product.price_range.minimum_price.final_price.value,
+        rank: index
+    }));
+};
+
+const createSuggestions = items => {
+    if (!items) {
+        return [];
+    }
+
+    return items.map((suggestion, index) => ({
+        suggestion,
+        rank: index
+    }));
+};
+
+const createFacets = items => {
+    if (!items) {
+        return [];
+    }
+
+    return items.map(item => ({
+        attribute: item?.attribute,
+        title: item?.title,
+        type: item?.type || 'PINNED',
+        buckets: item?.buckets.map(bucket => bucket)
+    }));
+};
+
+export { updateSearchInputCtx, updateSearchResultsCtx };

package/src/context/index.js

@@ -0,0 +1,19 @@
+/*
+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 './attributeMetadata';
+export * from './store';
+export * from './widgetConfig';
+export * from './search';
+export * from './products';
+export * from './displayChange';
+export * from './events';
+export * from './translation';
+export * from './cart';
+export * from './wishlist';