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

package/src/components/ProductItem/ProductItem.css

@@ -0,0 +1,84 @@
+.grid-container {
+    display: grid;
+    gap: 1px;
+    height: auto;
+    grid-template-columns: auto 1fr 1fr;
+    border-top: 2px solid #e5e7eb;
+    padding: 10px;
+    grid-template-areas:
+        'product-image product-details product-price'
+        'product-image product-description product-description'
+        'product-image product-ratings product-add-to-cart';
+}
+
+.product-image {
+    grid-area: product-image;
+    width: fit-content;
+}
+
+.product-details {
+    white-space: nowrap;
+    grid-area: product-details;
+}
+
+.product-price {
+    grid-area: product-price;
+    display: grid;
+    width: 100%;
+    height: 100%;
+    justify-content: end;
+}
+
+.product-description {
+    grid-area: product-description;
+}
+
+.product-description:hover {
+    text-decoration: underline;
+}
+
+.product-ratings {
+    grid-area: product-ratings;
+}
+
+.product-add-to-cart {
+    grid-area: product-add-to-cart;
+    display: grid;
+    justify-content: end;
+}
+
+@media screen and (max-width: 767px) {
+    .grid-container {
+        display: grid;
+        gap: 10px;
+        height: auto;
+        border-top: 2px solid #e5e7eb;
+        padding: 10px;
+        grid-template-areas:
+            'product-image  product-image product-image'
+            'product-details product-details product-details'
+            'product-price product-price product-price'
+            'product-description product-description product-description'
+            'product-ratings product-ratings product-ratings'
+            'product-add-to-cart product-add-to-cart product-add-to-cart';
+    }
+
+    .product-image {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: auto;
+    }
+
+    .product-price {
+        justify-content: start;
+    }
+
+    .product-add-to-cart {
+        justify-content: center;
+    }
+
+    .product-details {
+        justify-content: center;
+    }
+}

package/src/components/ProductItem/ProductItem.jsx

@@ -0,0 +1,347 @@
+/*
+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 '../ProductItem/ProductItem.css';
+
+import { useCart, useProducts, useSensor, useStore } from '../../context';
+import NoImage from '../../icons/NoImage.svg';
+import {
+  generateOptimizedImages,
+  getProductImageURLs,
+} from '../../utils/getProductImage';
+import { htmlStringDecode } from '../../utils/htmlStringDecode';
+import AddToCartButton from '../AddToCartButton';
+import { ImageCarousel } from '../ImageCarousel';
+import { SwatchButtonGroup } from '../SwatchButtonGroup';
+import ProductPrice from './ProductPrice';
+import { SEARCH_UNIT_ID } from '../../utils/constants';
+import { sanitizeRefinedImages } from '../../utils/modifyResults';
+import { useResultsModifier } from '../../context/resultsModifierContext';
+
+const ProductItem = ({
+  item,
+  currencySymbol,
+  currencyRate,
+  setRoute,
+  refineProduct,
+  setCartUpdated,
+  setItemAdded,
+  setError,
+  addToCart,
+}) => {
+  const { product, productView } = item;
+  const [carouselIndex, setCarouselIndex] = useState(0);
+  const [selectedSwatch, setSelectedSwatch] = useState('');
+  const [imagesFromRefinedProduct, setImagesFromRefinedProduct] = useState(null);
+  const [refinedProduct, setRefinedProduct] = useState();
+  const [isHovering, setIsHovering] = useState(false);
+  const { addToCartGraphQL, refreshCart } = useCart();
+  const { viewType } = useProducts();
+  const {
+    config: { optimizeImages, imageBaseWidth, imageCarousel, listview },
+  } = useStore();
+
+  const { screenSize } = useSensor();
+
+  const handleMouseOver = () => {
+    setIsHovering(true);
+  };
+
+  const handleMouseOut = () => {
+    setIsHovering(false);
+  };
+
+  const { baseUrl, baseUrlWithoutProtocol } = useResultsModifier();
+
+  const handleSelection = async (optionIds, sku) => {
+    const data = await refineProduct(optionIds, sku);
+    setSelectedSwatch(optionIds[0]);
+    setImagesFromRefinedProduct(sanitizeRefinedImages(data.refineProduct.images, baseUrl, baseUrlWithoutProtocol, true));
+    setRefinedProduct(data);
+    setCarouselIndex(0);
+  };
+
+  const isSelected = (id) => {
+    const selected = selectedSwatch ? selectedSwatch === id : false;
+    return selected;
+  };
+
+  const productImageArray = imagesFromRefinedProduct
+    ? getProductImageURLs(imagesFromRefinedProduct.length ? imagesFromRefinedProduct : [], imageCarousel ? 3 : 1)
+    : getProductImageURLs(
+        productView.images && productView.images.length ? productView.images : [],
+        imageCarousel ? 3 : 1, // number of images to display in carousel
+        product.image && product.image.url ? product.image.url : undefined
+      );
+    
+
+  let optimizedImageArray = [];
+  
+  if (optimizeImages) {
+    optimizedImageArray = generateOptimizedImages(
+      productImageArray,
+      imageBaseWidth !== undefined && imageBaseWidth !== null ? imageBaseWidth : 200
+    );
+  }
+
+  const discount = refinedProduct
+    ? refinedProduct.refineProduct?.priceRange?.minimum?.regular?.amount
+        ?.value >
+      refinedProduct.refineProduct?.priceRange?.minimum?.final?.amount?.value
+    : product?.price_range?.minimum_price?.regular_price?.value >
+        product?.price_range?.minimum_price?.final_price?.value ||
+      productView?.price?.regular?.amount?.value >
+        productView?.price?.final?.amount?.value;
+
+  const isSimple = product?.__typename === 'SimpleProduct';
+  const isComplexProductView = productView?.__typename === 'ComplexProductView';
+  const isBundle = product?.__typename === 'BundleProduct';
+  const isGrouped = product?.__typename === 'GroupedProduct';
+  const isGiftCard = product?.__typename === 'GiftCardProduct';
+  const isConfigurable = product?.__typename === 'ConfigurableProduct';
+
+  const onProductClick = () => {
+    window.magentoStorefrontEvents?.publish.searchProductClick(
+      SEARCH_UNIT_ID,
+      product?.sku
+    );
+  };
+
+  const productUrl = setRoute
+    ? setRoute({ sku: productView?.sku, urlKey: productView?.urlKey })
+    : product?.canonical_url;
+
+  const handleAddToCart = async () => {
+    setError(false);
+    if (isSimple) {
+      if (addToCart) {
+        await addToCart(productView.sku, [], 1);
+      } else {
+        const response = await addToCartGraphQL(productView.sku);
+
+        if (
+          response?.errors ||
+          response?.data?.addProductsToCart?.user_errors.length > 0
+        ) {
+          setError(true);
+          return;
+        }
+
+        setItemAdded(product.name);
+        refreshCart && refreshCart();
+        setCartUpdated(true);
+      }
+    } else if (productUrl) {
+      window.open(productUrl, '_self');
+    }
+  };
+
+  if (listview && viewType === 'listview') {
+    return (
+      <>
+        <div className="grid-container">
+          <div
+            className={`product-image ds-sdk-product-item__image relative rounded-md overflow-hidden}`}
+          >
+            <a
+              href={productUrl}
+              onClick={onProductClick}
+              className="!text-primary hover:no-underline hover:text-primary"
+            >
+              {/* Image */}
+              {productImageArray.length ? (
+                <ImageCarousel
+                  images={
+                    optimizedImageArray.length
+                      ? optimizedImageArray
+                      : productImageArray
+                  }
+                  productName={product.name}
+                  carouselIndex={carouselIndex}
+                  setCarouselIndex={setCarouselIndex}
+                />
+              ) : (
+                <img src={NoImage} className={`max-h-[250px] max-w-[200px] pr-5 m-auto object-cover object-center lg:w-full`} />
+                // <NoImage
+                //   className={`max-h-[250px] max-w-[200px] pr-5 m-auto object-cover object-center lg:w-full`}
+                // />
+              )}
+            </a>
+          </div>
+          <div className="product-details">
+            <div className="flex flex-col w-1/3">
+              {/* Product name */}
+              <a
+                href={productUrl}
+                onClick={onProductClick}
+                className="!text-primary hover:no-underline hover:text-primary"
+              >
+                <div className="ds-sdk-product-item__product-name mt-xs text-sm text-primary">
+                  {product.name !== null && htmlStringDecode(product.name)}
+                </div>
+                <div className="ds-sdk-product-item__product-sku mt-xs text-sm text-primary">
+                  SKU:
+                  {product.sku !== null && htmlStringDecode(product.sku)}
+                </div>
+              </a>
+
+              {/* Swatch */}
+              {!screenSize.mobile &&
+                productView?.options &&
+                  productView.options?.length > 0 && (
+                <div className="ds-sdk-product-item__product-swatch flex flex-row mt-sm text-sm text-primary pb-6">
+                  {productView?.options?.map(
+                    (swatches) =>
+                      swatches.id === 'color' && (
+                        <SwatchButtonGroup
+                          key={`${productView?.sku}-${option.id}`}
+                          isSelected={isSelected}
+                          swatches={swatches.values && swatches.values.length ? swatches.values : []}
+                          showMore={onProductClick}
+                          productUrl={productUrl}
+                          onClick={handleSelection}
+                          sku={productView?.sku}
+                        />
+                      )
+                  )}
+                </div>
+              )}
+              
+            </div>
+          </div>
+          <div className="product-price">
+            <a
+              href={productUrl}
+              onClick={onProductClick}
+              className="!text-primary hover:no-underline hover:text-primary"
+            >
+              <ProductPrice
+                item={refinedProduct !== undefined && refinedProduct !== null ? refinedProduct : item}
+                isBundle={isBundle}
+                isGrouped={isGrouped}
+                isGiftCard={isGiftCard}
+                isConfigurable={isConfigurable}
+                isComplexProductView={isComplexProductView}
+                discount={discount}
+                currencySymbol={currencySymbol}
+                currencyRate={currencyRate}
+              />
+            </a>
+          </div>
+          <div className="product-description text-sm text-primary mt-xs">
+            <a
+              href={productUrl}
+              onClick={onProductClick}
+              className="!text-primary hover:no-underline hover:text-primary"
+            >
+              {product.short_description?.html ? (
+                <>
+                  <span
+                    dangerouslySetInnerHTML={{
+                      __html: product.short_description.html,
+                    }}
+                  />
+                </>
+              ) : (
+                <span />
+              )}
+            </a>
+          </div>
+
+          <div className="product-ratings" />
+          <div className="product-add-to-cart">
+            <div className="pb-4 h-[38px] w-96">
+              <AddToCartButton onClick={handleAddToCart} />
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div
+      className="ds-sdk-product-item group relative flex flex-col max-w-sm justify-between h-full hover:border-[1.5px] border-solid hover:shadow-lg border-offset-2 p-5"
+      style={{
+        'borderColor': '#D5D5D5',
+      }}
+      onMouseEnter={handleMouseOver}
+      onMouseLeave={handleMouseOut}
+    >
+      <a
+        href={productUrl}
+        onClick={onProductClick}
+        className="!text-primary hover:no-underline hover:text-primary"
+      >
+        <div className="ds-sdk-product-item__main relative flex flex-col justify-between h-full">
+          <div className="ds-sdk-product-item__image relative w-full h-full rounded-md overflow-hidden">
+            {productImageArray.length ? (
+              <ImageCarousel
+                images={
+                  optimizedImageArray.length
+                    ? optimizedImageArray
+                    : productImageArray
+                }
+                productName={product.name}
+                carouselIndex={carouselIndex}
+                setCarouselIndex={setCarouselIndex}
+              />
+            ) : (
+              <img src={NoImage} className={`max-h-[45rem] w-full object-cover object-center lg:w-full`} />
+              // <NoImage
+              //   className={`max-h-[45rem] w-full object-cover object-center lg:w-full`}
+              // />
+            )}
+          </div>
+          <div className="flex flex-row">
+            <div className="flex flex-col">
+              <div className="ds-sdk-product-item__product-name mt-md text-sm text-primary">
+                {product.name !== null && htmlStringDecode(product.name)}
+              </div>
+              <ProductPrice
+                item={refinedProduct !== undefined && refinedProduct !== null ? refinedProduct : item}
+                isBundle={isBundle}
+                isGrouped={isGrouped}
+                isGiftCard={isGiftCard}
+                isConfigurable={isConfigurable}
+                isComplexProductView={isComplexProductView}
+                discount={discount}
+                currencySymbol={currencySymbol}
+                currencyRate={currencyRate}
+              />
+            </div>
+          </div>
+        </div>
+      </a>
+
+      {!screenSize.mobile && productView?.options && productView.options?.length > 0 && (
+        <div className="ds-sdk-product-item__product-swatch mt-sm text-sm text-primary pb-6">
+          {productView?.options.map((option) => (
+            <SwatchButtonGroup
+              key={`${productView?.sku}-${option.id}`}
+              isSelected={isSelected}
+              swatches={option.values && option.values.length ? option.values : []}
+              showMore={onProductClick}
+              productUrl={productUrl}
+              onClick={handleSelection}
+              sku={productView?.sku}
+            />
+          ))}
+        </div>
+      )}
+
+      <div className="ds-sdk-product-item__add-to-cart py-2">
+        <AddToCartButton onClick={handleAddToCart} />
+      </div>
+    </div>
+  );
+};
+
+export default ProductItem;

package/src/components/ProductItem/ProductPrice.jsx

@@ -0,0 +1,181 @@
+/*
+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, { useContext } from 'react';
+import { TranslationContext } from '../../context/translation';
+import { getProductPrice } from '../../utils/getProductPrice';
+
+const ProductPrice = ({
+  isComplexProductView,
+  item,
+  isBundle,
+  isGrouped,
+  isGiftCard,
+  isConfigurable,
+  discount,
+  currencySymbol,
+  currencyRate
+}) => {
+  const translation = useContext(TranslationContext);
+  let price;
+
+  if ('product' in item) {
+    price = 
+      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 : item && item.product && item.product.price_range && item.product.price_range.minimum_price && item.product.price_range.minimum_price.regular_price 
+       ? item.product.price_range.minimum_price.regular_price : undefined;
+  } else {
+    price = 
+      item && item.refineProduct && item.refineProduct.priceRange && item.refineProduct.priceRange.minimum && item.refineProduct.priceRange.minimum.final 
+      ? item.refineProduct.priceRange.minimum.final 
+      : item && item.refineProduct && item.refineProduct.price && item.refineProduct.price.final 
+        ? item.refineProduct.price.final : undefined;
+  }
+
+  const getBundledPrice = (item, currencySymbol, currencyRate) => {
+    const bundlePriceTranslationOrder =
+      translation.ProductCard.bundlePrice.split(' ');
+    return bundlePriceTranslationOrder.map((word, index) =>
+      word === '{fromBundlePrice}' ? (
+        `${getProductPrice(item, currencySymbol, currencyRate, false, true)} `
+      ) : word === '{toBundlePrice}' ? (
+        getProductPrice(item, currencySymbol, currencyRate, true, true)
+      ) : (
+        <span className="text-gray-500 text-xs font-normal mr-xs" key={index}>
+          {word}
+        </span>
+      )
+    );
+  };
+
+  const getPriceFormat = (item, currencySymbol, currencyRate, isGiftCard) => {
+    const priceTranslation = isGiftCard
+      ? translation.ProductCard.from
+      : translation.ProductCard.startingAt;
+    const startingAtTranslationOrder = priceTranslation.split('{productPrice}');
+    return startingAtTranslationOrder.map((word, index) =>
+      word === '' ? (
+        getProductPrice(item, currencySymbol, currencyRate, false, true)
+      ) : (
+        <span className="text-gray-500 text-xs font-normal mr-xs" key={index}>
+          {word}
+        </span>
+      )
+    );
+  };
+
+  const getDiscountedPrice = (discount) => {
+    const discountPrice = discount ? (
+      <>
+        <span className="line-through pr-2">
+          {getProductPrice(item, currencySymbol, currencyRate, false, false)}
+        </span>
+        <span className="text-secondary">
+          {getProductPrice(item, currencySymbol, currencyRate, false, true)}
+        </span>
+      </>
+    ) : (
+      getProductPrice(item, currencySymbol, currencyRate, false, true)
+    );
+    const discountedPriceTranslation = translation.ProductCard.asLowAs;
+    const discountedPriceTranslationOrder =
+      discountedPriceTranslation.split('{discountPrice}');
+    return discountedPriceTranslationOrder.map((word, index) =>
+      word === '' ? (
+        discountPrice
+      ) : (
+        <span className="text-gray-500 text-xs font-normal mr-xs" key={index}>
+          {word}
+        </span>
+      )
+    );
+  };
+
+  return (
+    <>
+      {price && (
+        <div className="ds-sdk-product-price">
+          {!isBundle &&
+            !isGrouped &&
+            !isConfigurable &&
+            !isComplexProductView &&
+            discount && (
+              <p className="ds-sdk-product-price--discount mt-xs text-sm font-medium text-gray-900 my-auto">
+                <span className="line-through pr-2">
+                  {getProductPrice(
+                    item,
+                    currencySymbol,
+                    currencyRate,
+                    false,
+                    false
+                  )}
+                </span>
+                <span className="text-secondary">
+                  {getProductPrice(
+                    item,
+                    currencySymbol,
+                    currencyRate,
+                    false,
+                    true
+                  )}
+                </span>
+              </p>
+            )}
+
+          {!isBundle &&
+            !isGrouped &&
+            !isGiftCard &&
+            !isConfigurable &&
+            !isComplexProductView &&
+            !discount && (
+              <p className="ds-sdk-product-price--no-discount mt-xs text-sm font-medium text-gray-900 my-auto">
+                {getProductPrice(
+                  item,
+                  currencySymbol,
+                  currencyRate,
+                  false,
+                  true
+                )}
+              </p>
+            )}
+
+          {isBundle && (
+            <div className="ds-sdk-product-price--bundle">
+              <p className="mt-xs text-sm font-medium text-gray-900 my-auto">
+                {getBundledPrice(item, currencySymbol, currencyRate)}
+              </p>
+            </div>
+          )}
+
+          {isGrouped && (
+            <p className="ds-sdk-product-price--grouped mt-xs text-sm font-medium text-gray-900 my-auto">
+              {getPriceFormat(item, currencySymbol, currencyRate, false)}
+            </p>
+          )}
+
+          {isGiftCard && (
+            <p className="ds-sdk-product-price--gift-card mt-xs text-sm font-medium text-gray-900 my-auto">
+              {getPriceFormat(item, currencySymbol, currencyRate, true)}
+            </p>
+          )}
+
+          {!isGrouped &&
+            !isBundle &&
+            (isConfigurable || isComplexProductView) && (
+              <p className="ds-sdk-product-price--configurable mt-xs text-sm font-medium text-gray-900 my-auto">
+                {getDiscountedPrice(discount)}
+              </p>
+            )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ProductPrice;

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