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

package/src/styles/searchBar.module.css

@@ -0,0 +1,119 @@
+.root {
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: justify-self-center from global;
+    composes: max-w-site from global;
+    composes: px-xs from global;
+    composes: py-0 from global;
+    composes: w-full from global;
+
+    @apply hidden;
+}
+
+.root_open {
+    composes: root;
+
+    composes: z-dropdown from global;
+    @apply grid;
+}
+
+.form {
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-stretch from global;
+    composes: w-full from global;
+}
+
+.container {
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: max-w-[24rem] from global;
+    composes: pb-xs from global;
+    composes: relative from global;
+    composes: w-full from global;
+}
+
+.search {
+    composes: grid from global;
+    composes: relative from global;
+}
+
+.autocomplete {
+    composes: grid from global;
+    /* composes: relative from global; */
+    composes: z-menu from global;
+}
+
+.popover {
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: left-0 from global;
+    composes: p-xs from global;
+    composes: rounded-b-md from global;
+    composes: rounded-t-none from global;
+    composes: shadow-inputFocus from global;
+    composes: text-sm from global;
+    composes: z-menu from global;
+    transition-property: opacity, transform, visibility;
+    top: 2.5rem;
+}
+
+.root_hidden {
+    composes: root;
+
+    composes: invisible from global;
+    composes: opacity-0 from global;
+    transform: translate3d(0, -2rem, 0);
+    transition-duration: 192ms;
+    transition-timing-function: var(--venia-global-anim-out);
+}
+
+.root_visible {
+    composes: root;
+
+    composes: opacity-100 from global;
+    composes: visible from global;
+    transform: translate3d(0, 0, 0);
+    transition-duration: 224ms;
+    transition-timing-function: var(--venia-global-anim-in);
+}
+
+.message {
+    composes: px-3 from global;
+    composes: py-0 from global;
+    composes: text-center from global;
+    composes: text-subtle from global;
+
+    composes: empty_hidden from global;
+}
+
+.suggestions {
+    composes: gap-2xs from global;
+    composes: grid from global;
+
+    composes: empty_hidden from global;
+}
+
+.product-price {
+    display: grid;
+    grid-area: product-price;
+    height: 100%;
+    justify-content: left !important;
+    width: 100%;
+}
+
+.livesearch_root .ds-sdk-add-to-cart-button button svg {
+    display: none !important;
+}
+
+.search input {
+    padding-left: calc(1.875rem * var(--iconsBefore, 0) + 0.625rem);
+    padding-right: calc(1.875rem * var(--iconsAfter, 0) + 0.625rem);
+}
+
+/* .popover {
+
+} */

package/src/styles/tokens.css

@@ -0,0 +1,99 @@
+/* Tokens */
+.ds-widgets {
+    @import 'tailwindcss/base';
+    @import 'tailwindcss/components';
+    @import 'tailwindcss/utilities';
+
+    font-size: 1.6rem;
+
+    /* Colors */
+    --color-body: #fff;
+    --color-on-body: #222;
+
+    --color-surface: #e6e6e6;
+    --color-on-surface: #222;
+
+    --color-primary: #222;
+    --color-on-primary: #fff;
+
+    --color-secondary: #ff0000;
+    --color-on-secondary: #fff;
+
+    --color-gray-1: #f3f4f6;
+    --color-gray-2: #e5e7eb;
+    --color-gray-3: #d1d5db;
+    --color-gray-4: #9ca3af;
+    --color-gray-5: #6b7280;
+    --color-gray-6: #4b5563;
+    --color-gray-7: #374151;
+    --color-gray-8: #1f2937;
+    --color-gray-9: #111827;
+
+    /* Spacing: gaps, margin, padding, etc. */
+    --spacing-xxs: 0.15625em;
+    --spacing-xs: 0.3125em;
+    --spacing-sm: 0.625em;
+    --spacing-md: 1.25em;
+    --spacing-lg: 2.5em;
+    --spacing-xl: 3.75em;
+    --spacing-2xl: 4.25em;
+    --spacing-3xl: 4.75em;
+
+    /* Font Families */
+    --font-body: sans-serif;
+
+    /* Font Sizes */
+    --font-xs: 0.75em;
+    --font-sm: 0.875em;
+    --font-md: 1em;
+    --font-lg: 1.125em;
+    --font-xl: 1.25em;
+    --font-2xl: 1.5em;
+    --font-3xl: 1.875em;
+    --font-4xl: 2.25em;
+    --font-5xl: 3em;
+
+    /* Font Weights */
+    --font-thin: 100;
+    --font-extralight: 200;
+    --font-light: 300;
+    --font-normal: 400;
+    --font-medium: 500;
+    --font-semibold: 600;
+    --font-bold: 700;
+    --font-extrabold: 800;
+    --font-black: 900;
+
+    /* Line Heights */
+    --leading-none: 1;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+    --leading-loose: 2;
+    --leading-3: '.75em';
+    --leading-4: '1em';
+    --leading-5: '1.25em';
+    --leading-6: '1.5em';
+    --leading-7: '1.75em';
+    --leading-8: '2em';
+    --leading-9: '2.25em';
+    --leading-10: '2.5em';
+}
+
+.ds-widgets input[type='checkbox'] {
+    font-size: 80%;
+    margin: 0;
+    top: 0;
+}
+
+.block-display {
+    display: block;
+}
+
+.loading-spinner-on-mobile {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}

package/src/targets/intercept.js

@@ -0,0 +1,21 @@
+module.exports = targets => {
+    const { specialFeatures } = targets.of('@magento/pwa-buildpack');
+    specialFeatures.tap(flags => {
+        /**
+         *  Wee need to activate esModules, GQL Queries and deactivate cssModules to allow build pack to load our extension
+         * {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
+         */
+        flags[targets.name] = {
+            esModules: true,
+            cssModules: false,
+            graphqlQueries: true
+        };
+    });
+
+    targets.of('@magento/peregrine').talons.tap(talons => {
+        talons.App.useApp.wrapWith(
+            `@magento/venia-pwa-live-search/src/wrappers/wrapUseApp`
+        );
+        return talons;
+    });
+};

package/src/utils/constants.js

@@ -0,0 +1,26 @@
+// 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 DEFAULT_PAGE_SIZE = 24;
+export const DEFAULT_PAGE_SIZE_OPTIONS = '12,24,36';
+export const DEFAULT_MIN_QUERY_LENGTH = 3;
+export const PRODUCT_COLUMNS = {
+    desktop: 4,
+    tablet: 3,
+    mobile: 2
+};
+
+export const SEARCH_SORT_DEFAULT = [
+    { attribute: 'relevance', direction: 'DESC' }
+];
+export const CATEGORY_SORT_DEFAULT = [
+    { attribute: 'position', direction: 'ASC' }
+];
+
+export const SEARCH_UNIT_ID = 'livesearch-plp';
+export const BOOLEAN_YES = 'yes';
+export const BOOLEAN_NO = 'no';

package/src/utils/decodeHtmlString.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 decodeHtmlString = input => {
+    const doc = new DOMParser().parseFromString(input, 'text/html');
+    return doc.documentElement.textContent;
+};
+
+export { decodeHtmlString };

package/src/utils/dom.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 moveToTop = () => {
+    window.scrollTo({ top: 0 });
+};
+
+export const classNames = (...classes) => {
+    return classes.filter(Boolean).join(' ');
+};

package/src/utils/eventing/getCookie.js

@@ -0,0 +1,9 @@
+export const getDecodedCookie = key => {
+    const encodedCookie = document.cookie
+        .split('; ')
+        .find(row => row.startsWith(key))
+        .split('=')[1];
+    const decodedCookie = decodeURIComponent(encodedCookie);
+    const value = JSON.parse(decodedCookie);
+    return value;
+};

package/src/utils/eventing/usePageTypeFromUrl.js

@@ -0,0 +1,26 @@
+// src/hooks/eventing/usePageTypeFromUrl.js
+import { useQuery } from '@apollo/client';
+import query from '../../queries/eventing/getPageType.gql';
+
+const pagetypeMap = {
+    CMS_PAGE: 'CMS',
+    CATEGORY: 'Category',
+    PRODUCT: 'Product',
+    '/cart': 'Cart',
+    '/checkout': 'Checkout'
+};
+
+const usePageTypeFromUrl = pathname => {
+    const { data } = useQuery(query.resolvePagetypeQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        variables: { url: pathname }
+    });
+
+    const type = data?.urlResolver?.type;
+    const pageType = pagetypeMap[type] || pagetypeMap[pathname];
+
+    return pageType;
+};
+
+export default usePageTypeFromUrl;

package/src/utils/getProductImage.js

@@ -0,0 +1,94 @@
+// 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 getProductImageURLs = (images, amount = 3, topImageUrl) => {
+    const imageUrlArray = [];
+    //const url = new URL(window.location.href);
+    //original protocol
+    //const protocol = url.protocol;
+
+    //making protocol empty
+    //const protocol = '';
+    // const topImageUrl = "http://master-7rqtwti-wdxwuaerh4gbm.eu-4.magentosite.cloud/media/catalog/product/3/1/31t0a-sopll._ac_.jpg";
+    for (const image of images) {
+        const imageUrl = image.url?.replace(/^https?:\/\//, '');
+        if (imageUrl) {
+            //original
+            //imageUrlArray.push(`${protocol}//${imageUrl}`);
+
+            //to remove protocol
+            imageUrlArray.push(`${imageUrl}`);
+        }
+    }
+
+    if (topImageUrl) {
+        //original
+        // const topImageUrlFormatted = `${protocol}//${topImageUrl.replace(
+        //     /^https?:\/\//,
+        //     ''
+        // )}`;
+
+        //to remove protocol
+        const topImageUrlFormatted = `${topImageUrl.replace(
+            /^https?:\/\//,
+            ''
+        )}`;
+
+        const index = topImageUrlFormatted.indexOf(topImageUrlFormatted);
+        if (index > -1) {
+            imageUrlArray.splice(index, 1);
+        }
+
+        imageUrlArray.unshift(topImageUrlFormatted);
+    }
+
+    return imageUrlArray.slice(0, amount);
+};
+
+const resolveImageUrl = (url, opts) => {
+    const [base, query] = url.split('?');
+    const params = new URLSearchParams(query);
+
+    Object.entries(opts).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+            params.set(key, String(value));
+        }
+    });
+
+    return `${base}?${params.toString()}`;
+};
+
+const generateOptimizedImages = (imageUrls, baseImageWidth) => {
+    const baseOptions = {
+        fit: 'cover',
+        crop: false,
+        dpi: 1
+    };
+
+    const imageUrlArray = [];
+
+    for (const imageUrl of imageUrls) {
+        const src = resolveImageUrl(imageUrl, {
+            ...baseOptions,
+            width: baseImageWidth
+        });
+        const dpiSet = [1, 2, 3];
+        const srcset = dpiSet.map(dpi => {
+            return `${resolveImageUrl(imageUrl, {
+                ...baseOptions,
+                auto: 'webp',
+                quality: 80,
+                width: baseImageWidth * dpi
+            })} ${dpi}x`;
+        });
+        imageUrlArray.push({ src, srcset });
+    }
+
+    return imageUrlArray;
+};
+
+export { generateOptimizedImages, getProductImageURLs };

package/src/utils/getProductPrice.js

@@ -0,0 +1,83 @@
+// 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 getSymbolFromCurrency from 'currency-symbol-map';
+
+const getProductPrice = (
+    product,
+    currencySymbol,
+    currencyRate,
+    useMaximum = false,
+    useFinal = false
+) => {
+    let priceType;
+    let price;
+    if ('product' in product) {
+        priceType = product?.product?.price_range?.minimum_price;
+
+        if (useMaximum) {
+            priceType = product?.product?.price_range?.maximum_price;
+        }
+
+        price = priceType?.regular_price;
+        if (useFinal) {
+            price = priceType?.final_price;
+        }
+    } else {
+        //getting error because the nullish coalescing operator (??) isn't supported by your Babel/Webpack setup yet.
+        // priceType =
+        //   product?.refineProduct?.priceRange?.minimum ??
+        //   product?.refineProduct?.price;
+
+        //workaround
+        priceType =
+            product &&
+            product.refineProduct &&
+            product.refineProduct.priceRange &&
+            product.refineProduct.priceRange.minimum
+                ? product.refineProduct.priceRange.minimum
+                : product &&
+                  product.refineProduct &&
+                  product.refineProduct.price
+                ? product.refineProduct.price
+                : undefined;
+
+        if (useMaximum) {
+            priceType = product?.refineProduct?.priceRange?.maximum;
+        }
+
+        price = priceType?.regular?.amount;
+        if (useFinal) {
+            price = priceType?.final?.amount;
+        }
+    }
+
+    // if currency symbol is configurable within Commerce, that symbol is used
+    let currency = price?.currency;
+
+    if (currencySymbol) {
+        currency = currencySymbol;
+    } else {
+        //getting error because the nullish coalescing operator (??) isn't supported by your Babel/Webpack setup yet.
+        //currency = getSymbolFromCurrency(currency) ?? '$';
+
+        // work around
+        currency =
+            getSymbolFromCurrency(currency) !== undefined &&
+            getSymbolFromCurrency(currency) !== null
+                ? getSymbolFromCurrency(currency)
+                : '$';
+    }
+
+    const convertedPrice = currencyRate
+        ? price?.value * parseFloat(currencyRate)
+        : price?.value;
+
+    return convertedPrice ? `${currency}${convertedPrice.toFixed(2)}` : '';
+};
+
+export { getProductPrice };

package/src/utils/getUserViewHistory.js

@@ -0,0 +1,27 @@
+// 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 getUserViewHistory = () => {
+    const userViewHistory = localStorage?.getItem('ds-view-history-time-decay')
+        ? JSON.parse(localStorage.getItem('ds-view-history-time-decay'))
+        : null;
+
+    if (userViewHistory && Array.isArray(userViewHistory)) {
+        // https://git.corp.adobe.com/magento-datalake/magento2-snowplow-js/blob/main/src/utils.js#L177
+        // this shows localStorage is guaranteed sorted by unique by most recent timestamp as last index.
+
+        // MSRCH-2740: send the top 200 most recently viewed unique SKUs
+        return userViewHistory.slice(-200).map(v => ({
+            sku: v.sku,
+            dateTime: v.date
+        }));
+    }
+
+    return [];
+};
+
+export { getUserViewHistory };

package/src/utils/handleUrlFilters.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.
+
+// Luma Specific URL handling
+import { DEFAULT_PAGE_SIZE } from '../utils/constants';
+
+const nonFilterKeys = {
+    search: 'q',
+    search_query: 'search_query',
+    pagination: 'p',
+    sort: 'product_list_order',
+    page_size: 'page_size'
+};
+
+const addUrlFilter = filter => {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.searchParams);
+    const attribute = filter.attribute;
+    if (filter.range) {
+        const filt = filter.range;
+        if (getValueFromUrl(attribute)) {
+            params.delete(attribute);
+            params.append(attribute, `${filt.from}--${filt.to}`);
+        } else {
+            params.append(attribute, `${filt.from}--${filt.to}`);
+        }
+    } else {
+        const filt = filter.in || [];
+        const filterParams = params.getAll(attribute);
+        filt.map(f => {
+            if (!filterParams.includes(f)) {
+                params.append(attribute, f);
+            }
+        });
+    }
+    setWindowHistory(url.pathname, params);
+};
+
+const removeUrlFilter = (name, option) => {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.searchParams);
+    const allValues = url.searchParams.getAll(name);
+    params.delete(name);
+    if (option) {
+        allValues.splice(allValues.indexOf(option), 1);
+        allValues.forEach(val => params.append(name, val));
+    }
+    setWindowHistory(url.pathname, params);
+};
+
+const removeAllUrlFilters = () => {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.searchParams);
+    for (const key of url.searchParams.keys()) {
+        if (!Object.values(nonFilterKeys).includes(key)) {
+            params.delete(key);
+        }
+    }
+    setWindowHistory(url.pathname, params);
+};
+
+const handleUrlSort = sortOption => {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.searchParams);
+    params.set('product_list_order', sortOption);
+    setWindowHistory(url.pathname, params);
+};
+
+const handleViewType = viewType => {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.searchParams);
+    params.set('view_type', viewType);
+    setWindowHistory(url.pathname, params);
+};
+
+const handleUrlPageSize = pageSizeOption => {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.searchParams);
+    if (pageSizeOption === DEFAULT_PAGE_SIZE) {
+        params.delete('page_size');
+    } else {
+        params.set('page_size', pageSizeOption.toString());
+    }
+    setWindowHistory(url.pathname, params);
+};
+
+const handleUrlPagination = pageNumber => {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.searchParams);
+    if (pageNumber === 1) {
+        params.delete('p');
+    } else {
+        params.set('p', pageNumber.toString());
+    }
+    setWindowHistory(url.pathname, params);
+};
+
+const getFiltersFromUrl = filterableAttributes => {
+    const params = getSearchParams();
+
+    const filters = [];
+    for (const [key, value] of params.entries()) {
+        if (
+            filterableAttributes.includes(key) &&
+            !Object.values(nonFilterKeys).includes(key)
+        ) {
+            if (value.includes('--')) {
+                const range = value.split('--');
+                const filter = {
+                    attribute: key,
+                    range: { from: Number(range[0]), to: Number(range[1]) }
+                };
+                filters.push(filter);
+            } else {
+                const attributeIndex = filters.findIndex(
+                    filter => filter.attribute == key
+                );
+                if (attributeIndex !== -1) {
+                    filters[attributeIndex].in.push(value);
+                } else {
+                    const filter = { attribute: key, in: [value] };
+                    filters.push(filter);
+                }
+            }
+        }
+    }
+
+    return filters;
+};
+
+const getValueFromUrl = param => {
+    const params = getSearchParams();
+    const filter = params.get(param);
+    return filter || '';
+};
+
+const getSearchParams = () => {
+    const search = window.location.search;
+    return new URLSearchParams(search);
+};
+
+const setWindowHistory = (pathname, params) => {
+    if (params.toString() === '') {
+        window.history.pushState({}, '', `${pathname}`);
+    } else {
+        window.history.pushState({}, '', `${pathname}?${params.toString()}`);
+    }
+};
+
+export {
+    addUrlFilter,
+    getFiltersFromUrl,
+    getValueFromUrl,
+    handleUrlPageSize,
+    handleUrlPagination,
+    handleUrlSort,
+    handleViewType,
+    removeAllUrlFilters,
+    removeUrlFilter
+};