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

package/src/utils/htmlStringDecode.js

@@ -0,0 +1,13 @@
+// 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.
+
+const htmlStringDecode = input => {
+    const doc = new DOMParser().parseFromString(input, 'text/html');
+    return doc.documentElement.textContent;
+};
+
+export { htmlStringDecode };

package/src/utils/modifyResults.js

@@ -0,0 +1,164 @@
+// 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.
+
+// Clean a URL based on provided baseUrl(s)
+export const cleanUrl = (
+    url,
+    cleanWithProtocol = false,
+    baseUrl = '',
+    baseUrlWithoutProtocol = ''
+) => {
+    if (!url) return url;
+
+    try {
+        if (cleanWithProtocol) {
+            return baseUrl ? url.replace(baseUrl, '') : url;
+        }
+        return baseUrlWithoutProtocol
+            ? url.replace(baseUrlWithoutProtocol, '')
+            : url;
+    } catch {
+        return url;
+    }
+};
+
+export const cleanSwatchUrl = (
+    url,
+    cleanWithProtocol = true,
+    baseUrl = '',
+    baseUrlWithoutProtocol = ''
+) => {
+    if (!url) return url;
+
+    try {
+        if (cleanWithProtocol) {
+            if (baseUrl.endsWith('/')) {
+                const sanitizeBaseUrl = baseUrl.replace(/\/$/, '');
+                return sanitizeBaseUrl ? url.replace(sanitizeBaseUrl, '') : url;
+            }
+            return baseUrl ? url.replace(baseUrl, '') : url;
+        }
+        return baseUrlWithoutProtocol
+            ? url.replace(baseUrlWithoutProtocol, '')
+            : url;
+    } catch {
+        return url;
+    }
+};
+
+export const sanitizeImage = (
+    img,
+    cleanWithProtocol = false,
+    baseUrl,
+    baseUrlWithoutProtocol
+) => {
+    if (Array.isArray(img)) {
+        return img.map(i =>
+            i && i.url
+                ? {
+                      ...i,
+                      url: cleanUrl(
+                          i.url,
+                          cleanWithProtocol,
+                          baseUrl,
+                          baseUrlWithoutProtocol
+                      )
+                  }
+                : i
+        );
+    }
+    return img && img.url
+        ? {
+              ...img,
+              url: cleanUrl(
+                  img.url,
+                  cleanWithProtocol,
+                  baseUrl,
+                  baseUrlWithoutProtocol
+              )
+          }
+        : img;
+};
+
+export const sanitizeRefinedImages = (
+    refinedImages,
+    baseUrl,
+    baseUrlWithoutProtocol,
+    areSwatchImages = false
+) => {
+    if (!refinedImages || !Array.isArray(refinedImages)) return refinedImages;
+
+    return refinedImages.map(img => {
+        if (!img || !img.url) return img;
+
+        const cleanImageUrl = areSwatchImages
+            ? cleanSwatchUrl(img.url, true, baseUrl, baseUrlWithoutProtocol)
+            : cleanUrl(img.url, false, baseUrl, baseUrlWithoutProtocol);
+
+        return {
+            ...img,
+            url: cleanImageUrl
+        };
+    });
+};
+
+export const sanitizeProducts = (products, baseUrl, baseUrlWithoutProtocol) => {
+    if (!products || products.length === 0) return [];
+
+    return products.map(item => {
+        const prod = item.product;
+        const prodView = item.productView;
+
+        if (!prod) return item;
+
+        return {
+            ...item,
+            product: {
+                ...prod,
+                canonical_url: cleanUrl(
+                    prod.canonical_url,
+                    false,
+                    baseUrl,
+                    baseUrlWithoutProtocol
+                ),
+                image: sanitizeImage(
+                    prod.image,
+                    false,
+                    baseUrl,
+                    baseUrlWithoutProtocol
+                ),
+                small_image: sanitizeImage(
+                    prod.small_image,
+                    false,
+                    baseUrl,
+                    baseUrlWithoutProtocol
+                ),
+                thumbnail: sanitizeImage(
+                    prod.thumbnail,
+                    false,
+                    baseUrl,
+                    baseUrlWithoutProtocol
+                )
+            },
+            productView: {
+                ...prodView,
+                images: sanitizeImage(
+                    prodView?.images,
+                    true,
+                    baseUrl,
+                    baseUrlWithoutProtocol
+                ),
+                url: cleanUrl(
+                    prodView?.url,
+                    true,
+                    baseUrl,
+                    baseUrlWithoutProtocol
+                )
+            }
+        };
+    });
+};

package/src/utils/sort.js

@@ -0,0 +1,95 @@
+/*
+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.
+*/
+
+//hooks error - need to check
+//import { useTranslation } from '../context/translation';
+
+const defaultSortOptions = () => {
+    return [
+        { label: 'Most Relevant', value: 'relevance_DESC' },
+        { label: 'Price: Low to High', value: 'price_ASC' },
+        { label: 'Price: High to Low', value: 'price_DESC' }
+    ];
+};
+
+const getSortOptionsfromMetadata = (
+    sortMetadata,
+    displayOutOfStock,
+    categoryPath,
+    translation
+) => {
+    const sortOptions = categoryPath
+        ? [
+              {
+                  label: translation?.SortDropdown?.positionLabel || 'Position', // Now uses translation
+                  value: 'position_ASC'
+              }
+          ]
+        : [
+              {
+                  label:
+                      translation?.SortDropdown?.relevanceLabel ||
+                      'Most Relevant', // Now uses translation
+                  value: 'relevance_DESC'
+              }
+          ];
+
+    const displayInStockOnly = displayOutOfStock != '1'; // '!=' is intentional for conversion
+
+    if (sortMetadata && sortMetadata.length > 0) {
+        sortMetadata.forEach(e => {
+            if (
+                !e.attribute.includes('relevance') &&
+                !(e.attribute.includes('inStock') && displayInStockOnly) &&
+                !e.attribute.includes('position')
+                /* conditions for which we don't display the sorting option:
+                1) if the option attribute is relevance
+                2) if the option attribute is "inStock" and display out of stock products is set to no
+                3) if the option attribute is "position" and there is not a categoryPath (we're not in category browse mode) -> the conditional part is handled in setting sortOptions
+                */
+            ) {
+                if (e.numeric && e.attribute.includes('price')) {
+                    sortOptions.push({
+                        label: `${e.label}: Low to High`,
+                        value: `${e.attribute}_ASC`
+                    });
+                    sortOptions.push({
+                        label: `${e.label}: High to Low`,
+                        value: `${e.attribute}_DESC`
+                    });
+                } else {
+                    sortOptions.push({
+                        label: `${e.label}`,
+                        value: `${e.attribute}_DESC`
+                    });
+                }
+            }
+        });
+    }
+    return sortOptions;
+};
+
+const generateGQLSortInput = sortOption => {
+    // results sorted by relevance or position by default
+    if (!sortOption) {
+        return undefined;
+    }
+
+    // sort options are in format attribute_direction
+    const index = sortOption.lastIndexOf('_');
+    return [
+        {
+            attribute: sortOption.substring(0, index),
+            direction:
+                sortOption.substring(index + 1) === 'ASC' ? 'ASC' : 'DESC'
+        }
+    ];
+};
+
+export { defaultSortOptions, generateGQLSortInput, getSortOptionsfromMetadata };

package/src/utils/useIntersectionObserver.js

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+export const useIntersectionObserver = (ref, options) => {
+    const { rootMargin } = options;
+    const [observerEntry, setObserverEntry] = useState(null);
+
+    useEffect(() => {
+        if (!ref?.current) return;
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                setObserverEntry(entry);
+                if (entry.isIntersecting) {
+                    observer.unobserve(entry.target);
+                }
+            },
+            { rootMargin }
+        );
+
+        observer.observe(ref.current);
+
+        return () => {
+            observer.disconnect();
+        };
+    }, [ref, rootMargin]);
+
+    return observerEntry;
+};

package/src/utils/validateStoreDetails.js

@@ -0,0 +1,39 @@
+const validStoreDetailsKeys = [
+    'environmentId',
+    'environmentType',
+    'websiteCode',
+    'storeCode',
+    'storeViewCode',
+    'config',
+    'context',
+    'apiUrl',
+    'apiKey',
+    'route',
+    'searchQuery',
+    'baseUrl',
+    'baseUrlwithoutProtocol'
+];
+
+export const sanitizeString = value => {
+    // just in case, https://stackoverflow.com/a/23453651
+    if (typeof value === 'string') {
+        // eslint-disable-next-line no-useless-escape
+        value = value.replace(/[^a-z0-9áéíóúñü \.,_-]/gim, '');
+        return value.trim();
+    }
+    return value;
+};
+
+export const validateStoreDetailsKeys = storeDetails => {
+    Object.keys(storeDetails).forEach(key => {
+        if (!validStoreDetailsKeys.includes(key)) {
+            // eslint-disable-next-line no-console
+            console.error(`Invalid key ${key} in StoreDetailsProps`);
+            // filter out invalid keys/value
+            delete storeDetails[key];
+            return;
+        }
+        storeDetails[key] = sanitizeString(storeDetails[key]);
+    });
+    return storeDetails;
+};

package/src/wrappers/wrapUseApp.js

@@ -0,0 +1,28 @@
+//import useCustomUrl from '../hooks/useCustomUrl';
+//import useReferrerUrl from '../hooks/useReferrerUrl';
+import usePageView from '../hooks/eventing/usePageView';
+import useShopperContext from '../hooks/eventing/useShopperContext';
+import useStorefrontInstanceContext from '../hooks/eventing/useStorefrontInstanceContext';
+import useMagentoExtensionContext from '../hooks/eventing/useMagentoExtensionContext';
+//import useCart from '../hooks/useCart';
+import mse from '@adobe/magento-storefront-events-sdk';
+import msc from '@adobe/magento-storefront-event-collector';
+
+export default function wrapUseApp(origUseApp) {
+    if (!window.magentoStorefrontEvents) {
+        window.magentoStorefrontEvents = mse;
+    }
+    msc;
+
+    return function(props) {
+        useShopperContext();
+        useStorefrontInstanceContext();
+        useMagentoExtensionContext();
+        //useCart();
+        //useCustomUrl();
+        //useReferrerUrl();
+        usePageView();
+
+        return origUseApp(props);
+    };
+}