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

package/src/api/search.js

@@ -0,0 +1,222 @@
+/*
+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 { v4 as uuidv4 } from 'uuid';
+
+import { updateSearchInputCtx, updateSearchResultsCtx } from '../context';
+import { SEARCH_UNIT_ID } from '../utils/constants';
+import {
+    ATTRIBUTE_METADATA_QUERY,
+    PRODUCT_SEARCH_QUERY,
+    REFINE_PRODUCT_QUERY
+} from './queries';
+
+const getHeaders = headers => {
+    return {
+        'Magento-Environment-Id': headers.environmentId,
+        'Magento-Website-Code': headers.websiteCode,
+        'Magento-Store-Code': headers.storeCode,
+        'Magento-Store-View-Code': headers.storeViewCode,
+        'X-Api-Key': headers.apiKey,
+        'X-Request-Id': headers.xRequestId,
+        'Content-Type': 'application/json',
+        'Magento-Customer-Group': headers.customerGroup
+    };
+};
+
+const getProductSearch = async ({
+    environmentId,
+    websiteCode,
+    storeCode,
+    storeViewCode,
+    apiKey,
+    apiUrl,
+    phrase,
+    pageSize = 24,
+    displayOutOfStock,
+    currentPage = 1,
+    xRequestId = uuidv4(),
+    filter = [],
+    sort = [],
+    context,
+    categorySearch = false
+}) => {
+    const variables = {
+        phrase,
+        pageSize,
+        currentPage,
+        filter,
+        sort,
+        context
+    };
+
+    // default filters if search is "catalog (category)" or "search"
+    let searchType = 'Search';
+    if (categorySearch) {
+        searchType = 'Catalog';
+    }
+
+    const defaultFilters = {
+        attribute: 'visibility',
+        in: [searchType, 'Catalog, Search']
+    };
+
+    variables.filter.push(defaultFilters); //add default visibility filter
+
+    const displayInStockOnly = displayOutOfStock != '1'; // '!=' is intentional for conversion
+
+    const inStockFilter = {
+        attribute: 'inStock',
+        eq: 'true'
+    };
+
+    if (displayInStockOnly) {
+        variables.filter.push(inStockFilter);
+    }
+
+    const headers = getHeaders({
+        environmentId,
+        websiteCode,
+        storeCode,
+        storeViewCode,
+        apiKey,
+        xRequestId,
+        customerGroup:
+            context && context.customerGroup ? context.customerGroup : ''
+    });
+
+    // ======  initialize data collection =====
+    const searchRequestId = uuidv4();
+
+    updateSearchInputCtx(
+        SEARCH_UNIT_ID,
+        searchRequestId,
+        phrase,
+        filter,
+        pageSize,
+        currentPage,
+        sort
+    );
+
+    const magentoStorefrontEvtPublish = window.magentoStorefrontEvents?.publish;
+
+    if (magentoStorefrontEvtPublish?.searchRequestSent) {
+        magentoStorefrontEvtPublish.searchRequestSent(SEARCH_UNIT_ID);
+    }
+    // ======  end of data collection =====
+
+    const response = await fetch(apiUrl, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({
+            query: PRODUCT_SEARCH_QUERY,
+            variables: { ...variables }
+        })
+    });
+
+    const results = await response.json();
+    // ======  initialize data collection =====
+    updateSearchResultsCtx(
+        SEARCH_UNIT_ID,
+        searchRequestId,
+        results?.data?.productSearch
+    );
+
+    if (magentoStorefrontEvtPublish?.searchResponseReceived) {
+        magentoStorefrontEvtPublish.searchResponseReceived(SEARCH_UNIT_ID);
+    }
+
+    if (categorySearch) {
+        magentoStorefrontEvtPublish?.categoryResultsView &&
+            magentoStorefrontEvtPublish.categoryResultsView(SEARCH_UNIT_ID);
+    } else {
+        magentoStorefrontEvtPublish?.searchResultsView &&
+            magentoStorefrontEvtPublish.searchResultsView(SEARCH_UNIT_ID);
+    }
+    // ======  end of data collection =====
+
+    return results?.data;
+};
+
+const getAttributeMetadata = async ({
+    environmentId,
+    websiteCode,
+    storeCode,
+    storeViewCode,
+    apiKey,
+    apiUrl,
+    xRequestId = uuidv4()
+}) => {
+    const headers = getHeaders({
+        environmentId,
+        websiteCode,
+        storeCode,
+        storeViewCode,
+        apiKey,
+        xRequestId,
+        customerGroup: ''
+    });
+
+    try {
+        const response = await fetch(apiUrl, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({
+                query: ATTRIBUTE_METADATA_QUERY
+            })
+        });
+        const results = await response.json();
+        return results?.data;
+    } catch (error) {
+        console.error('Metadata fetch failed:', error);
+    }
+};
+
+const refineProductSearch = async ({
+    environmentId,
+    websiteCode,
+    storeCode,
+    storeViewCode,
+    apiKey,
+    apiUrl,
+    xRequestId = uuidv4(),
+    context,
+    optionIds,
+    sku
+}) => {
+    const variables = {
+        optionIds,
+        sku
+    };
+
+    const headers = getHeaders({
+        environmentId,
+        websiteCode,
+        storeCode,
+        storeViewCode,
+        apiKey,
+        xRequestId,
+        customerGroup:
+            context && context.customerGroup ? context.customerGroup : ''
+    });
+
+    const response = await fetch(apiUrl, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({
+            query: REFINE_PRODUCT_QUERY,
+            variables: { ...variables }
+        })
+    });
+
+    const results = await response.json();
+    return results?.data;
+};
+
+export { getAttributeMetadata, getProductSearch, refineProductSearch };

package/src/components/AddToCartButton/AddToCartButton.jsx

@@ -0,0 +1,32 @@
+/*
+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 CartIcon from '../../icons/cart.svg';
+
+const AddToCartButton = ({ onClick }) => {
+  return (
+    <div className="ds-sdk-add-to-cart-button">
+      <button
+        className="flex items-center justify-center text-white text-sm rounded-full h-[32px] w-full p-sm"
+        style={{
+          backgroundColor: '#464646'
+        }}
+        onClick={onClick}
+      >
+        <img src={CartIcon} className="w-[24px] pr-4" />
+        {/* <CartIcon className="w-[24px] pr-4" /> */}
+        Add To Cart
+      </button>
+    </div>
+  );
+};
+
+export default AddToCartButton;

package/src/components/AddToCartButton/AddToCartButton.stories.mdx

@@ -0,0 +1,14 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import { action } from '@storybook/addon-actions';
+import AddToCartButton from '../AddToCartButton';
+
+<Meta
+  title="PLP/AddToCartButton"
+  component={AddToCartButton}
+  parameters={{ layout: 'centered' }}
+/>
+
+export const Template = (args) => <AddToCartButton {...args} />;
+
+# AddToCartButton
+

package/src/components/AddToCartButton/index.js

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

package/src/components/Alert/Alert.jsx

@@ -0,0 +1,155 @@
+/*
+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 Checkmark from '../../icons/checkmark.svg';
+import Error from '../../icons/error.svg';
+import Info from '../../icons/info.svg';
+import Warning from '../../icons/warning.svg';
+import X from '../../icons/x.svg';
+
+export const Alert = ({ title, type, description, url, onClick }) => {
+  return (
+    <div className="mx-auto max-w-8xl">
+      {(() => {
+        switch (type) {
+          case 'error':
+            return (
+              <div className="rounded-md bg-red-50 p-4">
+                <div className="flex items-center">
+                  <div className="flex-shrink-0 p-1">
+                    <img src={Error} className="h-5 w-5 text-red-400" aria-hidden="true" />
+                    {/* <Error
+                      className="h-5 w-5 text-red-400"
+                      aria-hidden="true"
+                    /> */}
+                  </div>
+                  <div className="ml-3">
+                    <h3 className="text-sm font-medium text-red-800">
+                      {title}
+                    </h3>
+                    {description?.length > 0 && (
+                      <div className="mt-2 text-sm text-red-700">
+                        <p>{description}</p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          case 'warning':
+            return (
+              <div className="rounded-md bg-yellow-50 p-4">
+                <div className="flex items-center">
+                  <div className="flex-shrink-0 p-1">
+                    <img src={Warning} className="h-5 w-5 text-yellow-400" aria-hidden="true" />
+                    {/* <Warning
+                      className="h-5 w-5 text-yellow-400"
+                      aria-hidden="true"
+                    /> */}
+                  </div>
+                  <div className="ml-3">
+                    <h3 className="text-sm font-medium text-yellow-800">
+                      {title}
+                    </h3>
+                    {description?.length > 0 && (
+                      <div className="mt-2 text-sm text-yellow-700">
+                        <p>{description}</p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          case 'info':
+            return (
+              <div className="rounded-md bg-blue-50 p-4">
+                <div className="flex items-center">
+                  <div className="flex-shrink-0 p-1">
+                    <img src={Info} className="h-5 w-5 text-blue-400" aria-hidden="true" />
+                    {/* <Info
+                      className="h-5 w-5 text-blue-400"
+                      aria-hidden="true"
+                    /> */}
+                  </div>
+                  <div className="ml-3 flex-1 md:flex md:justify-between">
+                    <div>
+                      <h3 className="text-sm font-medium text-blue-800">
+                        {title}
+                      </h3>
+                      {description?.length > 0 && (
+                        <div className="mt-2 text-sm text-blue-700">
+                          <p>{description}</p>
+                        </div>
+                      )}
+                    </div>
+                    {url && (
+                      <div className="mt-4 text-sm md:ml-6">
+                        <a
+                          href={url}
+                          className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600"
+                        >
+                          Details
+                          <span aria-hidden="true">&rarr;</span>
+                        </a>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          case 'success':
+            return (
+              <div className="rounded-md bg-green-50 p-4">
+                <div className="flex items-center">
+                  <div className="flex-shrink-0 p-1">
+                  <img src={Checkmark} alt="Success" className="h-5 w-5 text-green-400" aria-hidden="true" />
+                    {/* <Checkmark
+                      className="h-5 w-5 text-green-400"
+                      aria-hidden="true"
+                    /> */}
+                  </div>
+                  <div className="ml-3">
+                    <h3 className="text-sm font-medium text-green-800">
+                      {title}
+                    </h3>
+                    {description?.length > 0 && (
+                      <div className="mt-2 text-sm text-green-700">
+                        <p>{description}</p>
+                      </div>
+                    )}
+                  </div>
+                  {onClick && (
+                    <div className="ml-auto">
+                      <div className="md:ml-6">
+                        <button
+                          type="button"
+                          className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 ring-off hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
+                          onClick={onClick}
+                        >
+                          <span className="sr-only">Dismiss</span>
+                          <img src={X} className="h-5 w-5" aria-hidden="true" />
+                          {/* <X
+                            className="h-5 w-5"
+                            aria-hidden="true"
+                          /> */}
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          default:
+            return null;
+        }
+      })()}
+    </div>
+  );
+};

package/src/components/Alert/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 './Alert';
+export { Alert as default } from './Alert';

package/src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Chevron from '../../icons/chevron.svg';
+
+export const Breadcrumbs = ({ pages }) => {
+  return (
+    <nav className="ds-sdk-breadcrumbs flex" aria-label="Breadcrumbs">
+      <ol role="list" className="flex column items-center space-x-2">
+        {pages.map((page, index) => (
+          <li key={page.name} className="ds-sdk-breadcrumbs__item">
+            <div className="flex items-center">
+              {index > 0 && (
+                <Chevron className="h-sm w-sm transform -rotate-90 stroke-gray-400" />
+              )}
+
+              <a
+                href={page.href}
+                className={`ml-2 text-sm font-normal hover:text-gray-900 first:ml-0 ${
+                  page.current
+                    ? 'ds-sdk-breadcrumbs__item--current text-gray-500 font-light'
+                    : 'text-black'
+                }`}
+                aria-current={page.current ? 'page' : undefined}
+              >
+                {page.name}
+              </a>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+};
+
+export default Breadcrumbs;

package/src/components/Breadcrumbs/MockPages.js

@@ -0,0 +1,14 @@
+/*
+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 const pages = [
+    { name: 'Category I', href: '#', current: false },
+    { name: 'Category II', href: '#', current: false },
+    { name: 'Category III', href: '#', current: true }
+];

package/src/components/Breadcrumbs/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 './Breadcrumbs';
+export { Breadcrumbs as default } from './Breadcrumbs';

package/src/components/ButtonShimmer/ButtonShimmer.css

@@ -0,0 +1,32 @@
+@keyframes placeholderShimmer {
+    0% {
+        background-position: calc(100vw + 40px);
+    }
+
+    100% {
+        background-position: calc(100vw - 40px);
+    }
+}
+
+.shimmer-animation-button {
+    background-color: #f6f7f8;
+    background-image: linear-gradient(
+        to right,
+        #f6f7f8 0%,
+        #edeef1 20%,
+        #f6f7f8 40%,
+        #f6f7f8 100%
+    );
+    background-repeat: no-repeat;
+    background-size: 100vw 4rem;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: placeholderShimmer;
+    animation-timing-function: linear;
+}
+
+.ds-plp-facets__button {
+    height: 3rem;
+    width: 160px;
+}

package/src/components/ButtonShimmer/ButtonShimmer.jsx

@@ -0,0 +1,23 @@
+/*
+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 '../ButtonShimmer/ButtonShimmer.css';
+import React from 'react';
+
+export const ButtonShimmer = () => {
+  return (
+    <>
+      <div className="ds-plp-facets ds-plp-facets--loading">
+        <div className="ds-plp-facets__button shimmer-animation-button" />
+      </div>
+    </>
+  );
+};
+
+//export default ButtonShimmer;

package/src/components/ButtonShimmer/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 './ButtonShimmer';
+export { ButtonShimmer as default } from './ButtonShimmer';

package/src/components/CategoryFilters/CategoryFilters.jsx

@@ -0,0 +1,59 @@
+/*
+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 { useTranslation } from '../../context/translation';
+import { Facets } from '../Facets';
+import { FilterButton } from '../FilterButton';
+
+export const CategoryFilters = ({
+  loading,
+  pageLoading,
+  totalCount,
+  facets,
+  categoryName,
+  phrase,
+  setShowFilters,
+  filterCount,
+}) => {
+  const translation = useTranslation();
+  let title = categoryName || '';
+  if (phrase) {
+    const text = translation.CategoryFilters.results;
+    title = text.replace('{phrase}', `"${phrase}"`);
+  }
+  const resultsTranslation = translation.CategoryFilters.products;
+  const results = resultsTranslation.replace('{totalCount}', `${totalCount}`);
+
+  return (
+    <div className="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>}
+        {!loading && <span className="text-primary text-sm">{results}</span>}
+      </div>
+
+      {!pageLoading && facets.length > 0 && (
+        <>
+          <div className="flex pb-4 w-full h-full">
+            <FilterButton
+              displayFilter={() => setShowFilters(false)}
+              type="desktop"
+              title={`${translation.Filter.hideTitle}${
+                filterCount > 0 ? ` (${filterCount})` : ''
+              }`}
+            />
+          </div>
+          <Facets searchFacets={facets} />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default CategoryFilters;

package/src/components/CategoryFilters/index.js

@@ -0,0 +1,10 @@
+/*
+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 './CategoryFilters';