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

package/src/context/widgetConfig.jsx

@@ -0,0 +1,120 @@
+/*
+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 { useStore } from './store';
+
+// Default widget config state
+const defaultWidgetConfigState = {
+  badge: {
+    enabled: false,
+    label: '',
+    attributeCode: '',
+    backgroundColor: '',
+  },
+  price: {
+    showNoPrice: false,
+    showRange: true,
+    showRegularPrice: true,
+    showStrikethruPrice: true,
+  },
+  attributeSlot: {
+    enabled: false,
+    attributeCode: '',
+    backgroundColor: '',
+  },
+  addToWishlist: {
+    enabled: true,
+    placement: 'inLineWithName',
+  },
+  layout: {
+    defaultLayout: 'grid',
+    allowedLayouts: [],
+    showToggle: true,
+  },
+  addToCart: { enabled: true },
+  stockStatusFilterLook: 'radio',
+  swatches: {
+    enabled: false,
+    swatchAttributes: [],
+    swatchesOnPage: 10,
+  },
+  multipleImages: {
+    enabled: true,
+    limit: 10,
+  },
+  compare: {
+    enabled: true,
+  },
+};
+
+const WidgetConfigContext = createContext(defaultWidgetConfigState);
+
+const WidgetConfigContextProvider = ({ children }) => {
+  const storeCtx = useStore();
+  const { environmentId, storeCode } = storeCtx;
+
+  const [widgetConfig, setWidgetConfig] = useState(defaultWidgetConfigState);
+  const [widgetConfigFetched, setWidgetConfigFetched] = useState(false);
+
+  useEffect(() => {
+    if (!environmentId || !storeCode) {
+      return;
+    }
+
+    if (!widgetConfigFetched) {
+      getWidgetConfig(environmentId, storeCode)
+        .then((results) => {
+          const newWidgetConfig = {
+            ...defaultWidgetConfigState,
+            ...results,
+          };
+          setWidgetConfig(newWidgetConfig);
+          setWidgetConfigFetched(true);
+        })
+        .finally(() => {
+          setWidgetConfigFetched(true);
+        });
+    }
+  }, [environmentId, storeCode, widgetConfigFetched]);
+
+  const getWidgetConfig = async (envId, storeCode) => {
+    const fileName = 'widgets-config.json';
+    const S3path = `/${envId}/${storeCode}/${fileName}`;
+    const widgetConfigUrl = `${WIDGET_CONFIG_URL}${S3path}`;
+
+    const response = await fetch(widgetConfigUrl, {
+      method: 'GET',
+    });
+
+    if (response.status !== 200) {
+      return defaultWidgetConfigState;
+    }
+
+    const results = await response.json();
+    return results;
+  };
+
+  const widgetConfigCtx = {
+    ...widgetConfig,
+  };
+
+  return (
+    <WidgetConfigContext.Provider value={widgetConfigCtx}>
+      {widgetConfigFetched && children}
+    </WidgetConfigContext.Provider>
+  );
+};
+
+const useWidgetConfig = () => {
+  const widgetConfigCtx = useContext(WidgetConfigContext);
+  return widgetConfigCtx;
+};
+
+export { WidgetConfigContextProvider, useWidgetConfig };

package/src/context/wishlist.jsx

@@ -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, useEffect, useState } from 'react';
+import { getGraphQL } from '../api/graphql';
+import { ADD_TO_WISHLIST, REMOVE_FROM_WISHLIST } from '../api/mutations';
+import { GET_CUSTOMER_WISHLISTS } from '../api/queries';
+import { useStore } from './store';
+
+// Default values for WishlistContext
+const WishlistContext = createContext({});
+
+const useWishlist = () => {
+  return useContext(WishlistContext);
+};
+
+const WishlistProvider = ({ children }) => {
+  const [isAuthorized, setIsAuthorized] = useState(false);
+  const [allWishlist, setAllWishlist] = useState([]);
+  const [wishlist, setWishlist] = useState();
+  const { storeViewCode, config } = useStore();
+
+  useEffect(() => {
+    getWishlists();
+  }, []);
+
+  const getWishlists = async () => {
+    const { data } =
+      (await getGraphQL(
+        GET_CUSTOMER_WISHLISTS,
+        {},
+        storeViewCode,
+        config?.baseUrl
+      )) || {};
+    const wishlistResponse = data?.customer;
+    const isAuthorized = !!wishlistResponse;
+
+    setIsAuthorized(isAuthorized);
+    if (isAuthorized) {
+      const firstWishlist = wishlistResponse.wishlists[0];
+      setWishlist(firstWishlist);
+      setAllWishlist(wishlistResponse.wishlists);
+    }
+  };
+
+  const addItemToWishlist = async (wishlistId, wishlistItem) => {
+    const { data } =
+      (await getGraphQL(
+        ADD_TO_WISHLIST,
+        {
+          wishlistId,
+          wishlistItems: [wishlistItem],
+        },
+        storeViewCode,
+        config?.baseUrl
+      )) || {};
+    const wishlistResponse = data?.addProductsToWishlist.wishlist;
+    setWishlist(wishlistResponse);
+  };
+
+  const removeItemFromWishlist = async (wishlistId, wishlistItemsIds) => {
+    const { data } =
+      (await getGraphQL(
+        REMOVE_FROM_WISHLIST,
+        {
+          wishlistId,
+          wishlistItemsIds: [wishlistItemsIds],
+        },
+        storeViewCode,
+        config?.baseUrl
+      )) || {};
+    const wishlistResponse = data?.removeProductsFromWishlist.wishlist;
+    setWishlist(wishlistResponse);
+  };
+
+  const wishlistContext = {
+    isAuthorized,
+    wishlist,
+    allWishlist,
+    addItemToWishlist,
+    removeItemFromWishlist,
+  };
+
+  return (
+    <WishlistContext.Provider value={wishlistContext}>
+      {children}
+    </WishlistContext.Provider>
+  );
+};
+
+export { useWishlist, WishlistProvider };

package/src/hooks/eventing/useEventListener.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+const useEventListener = (target, type, listener) => {
+    useEffect(() => {
+        target.addEventListener(type, listener);
+
+        return () => {
+            target.removeEventListener(type, listener);
+        };
+    }, [listener, target, type]);
+};
+
+export default useEventListener;

package/src/hooks/eventing/useLocation.js

@@ -0,0 +1,21 @@
+import { useLocation as useLocationDriver } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+
+// This thin wrapper prevents us from having references to venia drivers literred around the code
+const useLocation = () => {
+    const locationDriver = useLocationDriver();
+    const [location, setLocation] = useState(locationDriver);
+
+    useEffect(() => {
+        // Location consistency described here (https://reactrouter.com/web/api/Hooks/uselocation)
+        // is disrupted by Venia's implementation. This wrapper ensures that location
+        // only changes when the user navigates
+        if (locationDriver.pathname !== location.pathname) {
+            setLocation(locationDriver);
+        }
+    }, [locationDriver, location.pathname]);
+
+    return location;
+};
+
+export default useLocation;

package/src/hooks/eventing/useMagentoExtensionContext.js

@@ -0,0 +1,28 @@
+import { useQuery } from '@apollo/client';
+import { useEffect } from 'react';
+import { GET_MAGENTO_EXTENSION_CONTEXT } from '../../queries/eventing/getMagentoExtensionContext.gql.js';
+import mse from '@adobe/magento-storefront-events-sdk';
+
+const useMagentoExtensionContext = () => {
+    const { data, error } = useQuery(GET_MAGENTO_EXTENSION_CONTEXT);
+    if (
+        (process.env.NODE_ENV === 'development' ||
+            process.env.NODE_ENV === 'test') &&
+        error
+    ) {
+        console.error('Magento Extension context query failed!', error);
+    }
+
+    useEffect(() => {
+        let magentoExtensionContext = null;
+        if (data && data.magentoExtensionContext) {
+            magentoExtensionContext = {
+                magentoExtensionVersion:
+                    data.magentoExtensionContext.magento_extension_version
+            };
+        }
+        mse.context.setMagentoExtension(magentoExtensionContext);
+    }, [data]);
+};
+
+export default useMagentoExtensionContext;

package/src/hooks/eventing/usePageView.js

@@ -0,0 +1,36 @@
+import useLocation from './useLocation';
+import { useEffect, useRef } from 'react';
+import mse from '@adobe/magento-storefront-events-sdk';
+import usePageTypeFromUrl from '../../utils/eventing/usePageTypeFromUrl';
+
+// const usePageView = () => {
+//     const location = useLocation();
+//     const pageType = getPagetype(location);
+//     useEffect(() => {
+//         mse.context.setPage({ pageType });
+//         mse.publish.pageView();
+//     }, [location]);
+// };
+
+const usePageView = () => {
+    const location = useLocation();
+    const pathname = location?.pathname;
+
+    const pageType = usePageTypeFromUrl(pathname);
+
+    const lastPathnameRef = useRef(null);
+
+    useEffect(() => {
+        if (!pathname || !pageType) return;
+
+        // Publish only if pathname actually changed
+        if (lastPathnameRef.current === pathname) return;
+
+        lastPathnameRef.current = pathname;
+
+        mse.context.setPage({ pageType });
+        mse.publish.pageView();
+    }, [pathname, pageType]);
+};
+
+export default usePageView;

package/src/hooks/eventing/useShopperContext.js

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+import mse from '@adobe/magento-storefront-events-sdk';
+import { getDecodedCookie } from '../../utils/eventing/getCookie';
+
+const useShopperContext = () => {
+    const [{ isSignedIn }] = useUserContext();
+
+    useEffect(() => {
+        if (isSignedIn) {
+            try {
+                const customerGroupCode = getDecodedCookie(
+                    'dataservices_customer_group='
+                );
+                mse.context.setContext('customerGroup', customerGroupCode);
+            } catch (error) {
+                console.error(
+                    'Cannot access customer group cookie. It seems the data-services module is not able to populate cookies properly.',
+                    error
+                );
+            }
+            mse.context.setShopper({
+                shopperId: 'logged-in'
+            });
+        } else {
+            mse.context.setShopper({
+                shopperId: 'guest'
+            });
+        }
+    }, [isSignedIn]);
+};
+
+export default useShopperContext;

package/src/hooks/eventing/useStorefrontInstanceContext.js

@@ -0,0 +1,46 @@
+import { useQuery } from '@apollo/client';
+import { GET_STOREFRONT_CONTEXT } from '../../queries/eventing/getStorefrontContext.gql';
+import { useEffect } from 'react';
+import mse from '@adobe/magento-storefront-events-sdk';
+
+const useStorefrontInstanceContext = () => {
+    const { data, error } = useQuery(GET_STOREFRONT_CONTEXT);
+    if (
+        error &&
+        (process.env.NODE_ENV === 'development' ||
+            process.env.NODE_ENV === 'test')
+    ) {
+        console.error(
+            'Magento Storefront Instance context query failed!',
+            error
+        );
+    }
+
+    useEffect(() => {
+        let storefrontInstanceContext = null;
+        if (data && data.storefrontInstanceContext) {
+            const { storefrontInstanceContext: storefront } = data;
+            storefrontInstanceContext = {
+                catalogExtensionVersion: storefront.catalog_extension_version,
+                environment: storefront.environment,
+                environmentId: storefront.environment_id,
+                storeCode: storefront.store_code,
+                storeId: storefront.store_id,
+                storeName: storefront.store_name,
+                storeUrl: storefront.store_url,
+                storeViewCode: storefront.store_view_code,
+                storeViewId: storefront.store_view_id,
+                storeViewName: storefront.store_view_name,
+                websiteCode: storefront.website_code,
+                websiteId: storefront.website_id,
+                websiteName: storefront.website_name,
+                baseCurrencyCode: storefront.base_currency_code,
+                storeViewCurrencyCode: storefront.store_view_currency_code,
+                storefrontTemplate: 'PWA Studio'
+            };
+        }
+        mse.context.setStorefrontInstance(storefrontInstanceContext);
+    }, [data, error]);
+};
+
+export default useStorefrontInstanceContext;

package/src/hooks/eventing/useViewedOffsets.js

@@ -0,0 +1,74 @@
+import { useCallback, useState } from 'react';
+import useEventListener from './useEventListener';
+
+const documentScrollTop = () =>
+    document.body.scrollTop || document.documentElement.scrollTop;
+
+const documentScrollLeft = () =>
+    document.body.scrollLeft || document.documentElement.scrollLeft;
+
+const useViewedOffsets = () => {
+    const [offsets, setOffsets] = useState(() => {
+        const xOffset = documentScrollLeft();
+        const yOffset = documentScrollTop();
+        return {
+            minXOffset: xOffset,
+            maxXOffset: xOffset + window.innerWidth,
+            minYOffset: yOffset,
+            maxYOffset: yOffset + window.innerHeight
+        };
+    });
+    let waitingOnAnimRequest = false;
+
+    // Update refs for resetting the scroll position after navigation
+    // Do we need this? Or could we just reset both to the current scroll position when the location changes?
+    const handleChange = () => {
+        if (!waitingOnAnimRequest) {
+            requestAnimationFrame(() => {
+                const windowLeft = documentScrollLeft();
+                const windowRight = windowLeft + window.innerWidth;
+                const windowTop = documentScrollTop();
+                const windowBottom = windowTop + window.innerHeight;
+                const newOffsets = { ...offsets };
+                if (windowRight > offsets.maxXOffset) {
+                    newOffsets.maxXOffset = windowRight;
+                }
+                if (windowLeft < offsets.minXOffset) {
+                    newOffsets.minXOffset = windowLeft;
+                }
+                if (windowBottom > offsets.maxYOffset) {
+                    newOffsets.maxYOffset = windowBottom;
+                }
+                if (windowTop < offsets.minYOffset) {
+                    newOffsets.minYOffset = windowTop;
+                }
+                setOffsets(newOffsets);
+                waitingOnAnimRequest = false;
+            });
+            waitingOnAnimRequest = true;
+        }
+    };
+
+    useEventListener(window, 'scroll', handleChange);
+    useEventListener(window, 'resize', handleChange);
+
+    const resetScrollOffsets = useCallback(() => {
+        const windowLeft = documentScrollLeft();
+        const windowRight = windowLeft + window.innerWidth;
+        const windowTop = documentScrollTop();
+        const windowBottom = windowTop + window.innerHeight;
+        setOffsets({
+            minXOffset: windowLeft,
+            maxXOffset: windowRight,
+            minYOffset: windowTop,
+            maxYOffset: windowBottom
+        });
+    }, []);
+
+    return {
+        resetScrollOffsets,
+        offsets
+    };
+};
+
+export default useViewedOffsets;

package/src/hooks/useAccessibleDropdown.js

@@ -0,0 +1,148 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+
+const registerOpenDropdownHandlers = ({
+    options,
+    activeIndex,
+    setActiveIndex,
+    select
+}) => {
+    const optionsLength = options.length;
+
+    const keyDownCallback = e => {
+        e.preventDefault();
+
+        switch (e.key) {
+            case 'Up':
+            case 'ArrowUp':
+                setActiveIndex(
+                    activeIndex <= 0 ? optionsLength - 1 : activeIndex - 1
+                );
+                return;
+            case 'Down':
+            case 'ArrowDown':
+                setActiveIndex(
+                    activeIndex + 1 === optionsLength ? 0 : activeIndex + 1
+                );
+                return;
+            case 'Enter':
+            case ' ': // Space
+                select(options[activeIndex].value);
+                return;
+            case 'Esc':
+            case 'Escape':
+                select(null);
+                return;
+            case 'PageUp':
+            case 'Home':
+                setActiveIndex(0);
+                return;
+            case 'PageDown':
+            case 'End':
+                setActiveIndex(options.length - 1);
+                return;
+        }
+    };
+
+    document.addEventListener('keydown', keyDownCallback);
+    return () => {
+        document.removeEventListener('keydown', keyDownCallback);
+    };
+};
+
+const registerClosedDropdownHandlers = ({ setIsDropdownOpen }) => {
+    const keyDownCallback = e => {
+        switch (e.key) {
+            case 'Up':
+            case 'ArrowUp':
+            case 'Down':
+            case 'ArrowDown':
+            case ' ': // Space
+            case 'Enter':
+                e.preventDefault();
+                setIsDropdownOpen(true);
+        }
+    };
+
+    document.addEventListener('keydown', keyDownCallback);
+    return () => {
+        document.removeEventListener('keydown', keyDownCallback);
+    };
+};
+
+const isSafari = () => {
+    const chromeInAgent = navigator.userAgent.indexOf('Chrome') > -1;
+    const safariInAgent = navigator.userAgent.indexOf('Safari') > -1;
+    return safariInAgent && !chromeInAgent;
+};
+
+export const useAccessibleDropdown = ({ options, value, onChange }) => {
+    const [isDropdownOpen, setIsDropdownOpenInternal] = useState(false);
+    const listRef = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [isFocus, setIsFocus] = useState(false);
+
+    const setIsDropdownOpen = useCallback(
+        v => {
+            if (v) {
+                const selected = options?.findIndex(o => o.value === value);
+                setActiveIndex(selected < 0 ? 0 : selected);
+
+                if (listRef.current && isSafari()) {
+                    requestAnimationFrame(() => {
+                        listRef.current?.focus();
+                    });
+                }
+            } else if (listRef.current && isSafari()) {
+                requestAnimationFrame(() => {
+                    listRef.current?.previousSibling?.focus();
+                });
+            }
+
+            setIsDropdownOpenInternal(v);
+        },
+        [options, value]
+    );
+
+    const select = useCallback(
+        val => {
+            if (val !== null && val !== undefined) {
+                onChange && onChange(val);
+            }
+            setIsDropdownOpen(false);
+            setIsFocus(false);
+        },
+        [onChange, setIsDropdownOpen]
+    );
+
+    useEffect(() => {
+        if (isDropdownOpen) {
+            return registerOpenDropdownHandlers({
+                activeIndex,
+                setActiveIndex,
+                options,
+                select
+            });
+        }
+
+        if (isFocus) {
+            return registerClosedDropdownHandlers({ setIsDropdownOpen });
+        }
+    }, [
+        isDropdownOpen,
+        activeIndex,
+        isFocus,
+        options,
+        select,
+        setIsDropdownOpen
+    ]);
+
+    return {
+        isDropdownOpen,
+        setIsDropdownOpen,
+        activeIndex,
+        setActiveIndex,
+        select,
+        setIsFocus,
+        listRef
+    };
+};