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

package/src/hooks/useLiveSearchPLPConfig.js

@@ -0,0 +1,112 @@
+// src/hooks/useLiveSearchPLPConfig.js
+import { useQuery, useMutation } from '@apollo/client';
+import { GET_STORE_CONFIG_FOR_PLP, GET_CUSTOMER_GROUP_CODE } from '../queries';
+import CATEGORY_OPERATIONS from '@magento/peregrine/lib/talons/RootComponents/Category/categoryContent.gql';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+import operations from '@magento/peregrine/lib/talons/Gallery/addToCart.gql';
+
+export const useLiveSearchPLPConfig = ({ categoryId }) => {
+    const { getCategoryContentQuery } = CATEGORY_OPERATIONS;
+    const { data: categoryData } = useQuery(getCategoryContentQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        //skip: !categoryId,
+        variables: {
+            id: categoryId
+        }
+    });
+
+    const {
+        data: storeConfigData,
+        loading: loadingStoreConfig,
+        error: errorStoreConfig
+    } = useQuery(GET_STORE_CONFIG_FOR_PLP);
+
+    const { data: customerData, loading: loadingCustomer } = useQuery(
+        GET_CUSTOMER_GROUP_CODE
+    );
+
+    const loading = loadingStoreConfig || loadingCustomer;
+    const error = errorStoreConfig;
+
+    // Extract store config from the response
+    const storeConfig = storeConfigData?.storeConfig;
+    const currency = storeConfigData?.currency;
+    const baseUrl = storeConfig?.base_url || '';
+    const baseUrlwithoutProtocol = baseUrl
+        ?.replace(/^https?:/, '')
+        .replace(/\/$/, '');
+    const customerGroupCode =
+        customerData?.customer?.group_code ||
+        'b6589fc6ab0dc82cf12099d1c2d40ab994e8410c';
+
+    const [{ cartId }] = useCartContext();
+    const [addToCart] = useMutation(operations.ADD_ITEM);
+    const [, { dispatch }] = useEventingContext();
+
+    //console.log("categoryData ==",categoryData);
+    const config = {
+        environmentId: storeConfig?.ls_environment_id || '',
+        environmentType: storeConfig?.ls_environment_type || '',
+        //apiKey: storeConfig?.ls_service_api_key || '',
+        apiKey: '',
+        websiteCode: storeConfig?.website_code || '',
+        storeCode: storeConfig?.store_group_code || '',
+        storeViewCode: storeConfig?.store_code || '',
+        config: {
+            pageSize: storeConfig?.ls_page_size_default || '8',
+            perPageConfig: {
+                pageSizeOptions:
+                    storeConfig?.ls_page_size_options || '12,24,36',
+                defaultPageSizeOption: storeConfig?.ls_page_size_default || '12'
+            },
+            minQueryLength: storeConfig?.ls_min_query_length || '3',
+            currencySymbol:
+                currency?.default_display_currency_symbol || '\u0024',
+            currencyCode: currency?.default_display_currency_code || 'USD',
+            currencyRate: '1',
+            displayOutOfStock: storeConfig?.ls_display_out_of_stock || '',
+            allowAllProducts: storeConfig?.ls_allow_all || '',
+            currentCategoryUrlPath:
+                categoryData?.categories?.items[0]?.url_path,
+            categoryName: categoryData?.categories?.items[0]?.name,
+            displayMode: '',
+            locale: storeConfig?.ls_locale || 'en_US',
+            resolveCartId: () => cartId,
+            addToCart: async (sku, options, quantity) => {
+                try {
+                    await addToCart({
+                        variables: {
+                            cartId,
+                            cartItem: {
+                                quantity,
+                                entered_options: options,
+                                sku: sku
+                            }
+                        }
+                    });
+
+                    dispatch({
+                        type: 'CART_ADD_ITEM',
+                        payload: {
+                            cartId,
+                            sku: sku,
+                            selectedOptions: null,
+                            quantity
+                        }
+                    });
+                } catch (error) {
+                    console.error('Error adding to cart:', error);
+                }
+            }
+        },
+        context: {
+            customerGroup: customerGroupCode
+        },
+        baseUrl,
+        baseUrlwithoutProtocol
+    };
+
+    return { config, loading, error };
+};

package/src/hooks/useLiveSearchPopoverConfig.js

@@ -0,0 +1,83 @@
+import { useQuery } from '@apollo/client';
+import {
+    GET_STORE_CONFIG_FOR_LIVE_SEARCH_POPOVER,
+    GET_CUSTOMER_GROUP_CODE
+} from '../queries';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+export const useLiveSearchPopoverConfig = () => {
+    const [{ isSignedIn }] = useUserContext();
+
+    const {
+        data: storeData,
+        loading: storeLoading,
+        error: storeError
+    } = useQuery(GET_STORE_CONFIG_FOR_LIVE_SEARCH_POPOVER);
+
+    const {
+        data: customerData,
+        loading: customerLoading,
+        error: customerError
+    } = useQuery(GET_CUSTOMER_GROUP_CODE, {
+        skip: !isSignedIn,
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const storeConfig = storeData?.storeConfig || {};
+    const currency = storeData?.currency || {};
+    const baseUrl = storeConfig.base_url || '';
+    const baseUrlwithoutProtocol = baseUrl
+        .replace(/^https?:/, '')
+        .replace(/\/$/, '');
+    const customerGroupCode =
+        isSignedIn && customerData?.customer?.group_code
+            ? customerData.customer.group_code
+            : 'b6589fc6ab0dc82cf12099d1c2d40ab994e8410c';
+
+    const configReady =
+        !storeLoading &&
+        (!isSignedIn || !customerLoading) &&
+        !storeError &&
+        (!isSignedIn || !customerError) &&
+        storeConfig?.ls_environment_id; // required field
+
+    if (!configReady) {
+        return {
+            storeDetails: null,
+            storeLoading,
+            customerLoading,
+            storeError,
+            customerError,
+            configReady: false
+        };
+    }
+
+    const storeDetails = {
+        environmentId: storeConfig.ls_environment_id || '',
+        websiteCode: storeConfig.website_code || '',
+        storeCode: storeConfig.store_group_code || '',
+        storeViewCode: storeConfig.store_code || '',
+        config: {
+            pageSize: storeConfig.ls_page_size_default || '8',
+            minQueryLength: storeConfig.ls_min_query_length || '3',
+            currencySymbol:
+                currency.default_display_currency_symbol || '\u0024',
+            currencyCode: currency.default_display_currency_code || 'USD',
+            locale: storeConfig.ls_locale || 'en_US'
+        },
+        context: {
+            customerGroup: customerGroupCode
+        },
+        baseUrl,
+        baseUrlwithoutProtocol
+    };
+
+    return {
+        storeDetails,
+        storeLoading,
+        customerLoading,
+        storeError,
+        customerError,
+        configReady
+    };
+};

package/src/hooks/useLiveSearchSRLPConfig.js

@@ -0,0 +1,97 @@
+// src/hooks/useLiveSearchSRLPConfig.js
+import { useQuery, useMutation } from '@apollo/client';
+import { GET_STORE_CONFIG_FOR_PLP, GET_CUSTOMER_GROUP_CODE } from '../queries';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+import operations from '@magento/peregrine/lib/talons/Gallery/addToCart.gql';
+
+export const useLiveSearchSRLPConfig = () => {
+    const {
+        data: storeConfigData,
+        loading: loadingStoreConfig,
+        error: errorStoreConfig
+    } = useQuery(GET_STORE_CONFIG_FOR_PLP);
+
+    const { data: customerData, loading: loadingCustomer } = useQuery(
+        GET_CUSTOMER_GROUP_CODE
+    );
+
+    const loading = loadingStoreConfig || loadingCustomer;
+    const error = errorStoreConfig;
+
+    // Extract store config from the response
+    const storeConfig = storeConfigData?.storeConfig;
+    const currency = storeConfigData?.currency;
+    const baseUrl = storeConfig?.base_url || '';
+    const baseUrlwithoutProtocol = baseUrl
+        ?.replace(/^https?:/, '')
+        .replace(/\/$/, '');
+    const customerGroupCode =
+        customerData?.customer?.group_code ||
+        'b6589fc6ab0dc82cf12099d1c2d40ab994e8410c';
+
+    const [{ cartId }] = useCartContext();
+    const [addToCart] = useMutation(operations.ADD_ITEM);
+    const [, { dispatch }] = useEventingContext();
+
+    const config = {
+        environmentId: storeConfig?.ls_environment_id || '',
+        environmentType: storeConfig?.ls_environment_type || '',
+        apiKey: '',
+        websiteCode: storeConfig?.website_code || '',
+        storeCode: storeConfig?.store_group_code || '',
+        storeViewCode: storeConfig?.store_code || '',
+        searchQuery: 'query',
+        config: {
+            pageSize: storeConfig?.ls_page_size_default || '8',
+            perPageConfig: {
+                pageSizeOptions:
+                    storeConfig?.ls_page_size_options || '12,24,36',
+                defaultPageSizeOption: storeConfig?.ls_page_size_default || '12'
+            },
+            minQueryLength: storeConfig?.ls_min_query_length || '3',
+            currencySymbol:
+                currency?.default_display_currency_symbol || '\u0024',
+            currencyCode: currency?.default_display_currency_code || 'USD',
+            currencyRate: '1',
+            displayOutOfStock: storeConfig?.ls_display_out_of_stock || '',
+            allowAllProducts: storeConfig?.ls_allow_all || '',
+            locale: storeConfig?.ls_locale || 'en_US',
+            resolveCartId: () => cartId,
+            addToCart: async (sku, options, quantity) => {
+                try {
+                    await addToCart({
+                        variables: {
+                            cartId,
+                            cartItem: {
+                                quantity,
+                                entered_options: options,
+                                sku: sku
+                            }
+                        }
+                    });
+
+                    dispatch({
+                        type: 'CART_ADD_ITEM',
+                        payload: {
+                            cartId,
+                            sku: sku,
+                            selectedOptions: null,
+                            quantity
+                        }
+                    });
+                } catch (error) {
+                    console.error('Error adding to cart:', error);
+                }
+            }
+        },
+        context: {
+            customerGroup: customerGroupCode
+        },
+        baseUrl,
+        baseUrlwithoutProtocol
+    };
+    console.log('SRLP config : ', config);
+
+    return { config, loading, error };
+};

package/src/hooks/usePagination.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 { useMemo } from 'react';
+
+export const ELLIPSIS = '...';
+
+const getRange = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({ length }, (_, index) => start + index);
+};
+
+export const usePagination = ({
+    currentPage,
+    totalPages,
+    siblingCount = 1
+}) => {
+    const paginationRange = useMemo(() => {
+        const firstPageIndex = 1;
+        const lastPageIndex = totalPages;
+        const totalPagePills = siblingCount + 5; // siblingCount + firstPage + lastPage + currentPage + 2 * ellipsis(...)
+
+        const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+        const rightSiblingIndex = Math.min(
+            currentPage + siblingCount,
+            totalPages
+        );
+
+        // We do not show the left/right dots(...) if there is just one page left to be inserted between the extremes of sibling and the page limits.
+        const showLeftDots = leftSiblingIndex > 2;
+        const showRightDots = rightSiblingIndex < totalPages - 2;
+
+        // Case 1 - the total page count is less than the page pills we want to show.
+
+        // < 1 2 3 4 5 6 >
+        if (totalPages <= totalPagePills) {
+            return getRange(1, totalPages);
+        }
+
+        // Case 2 - the total page count is greater than the page pills and only the dots on the right are shown
+
+        // < 1 2 3 4 ... 25 >
+        if (!showLeftDots && showRightDots) {
+            const leftItemCount = 3 + 2 * siblingCount;
+            const leftRange = getRange(1, leftItemCount);
+            return [...leftRange, ELLIPSIS, totalPages];
+        }
+
+        // Case 3 - the total page count is greater than the page pills and only the dots on the left are shown
+
+        // < 1 ... 22 23 24 25 >
+        if (showLeftDots && !showRightDots) {
+            const rightItemCount = 3 + 2 * siblingCount;
+            const rightRange = getRange(
+                totalPages - rightItemCount + 1,
+                totalPages
+            );
+            return [firstPageIndex, ELLIPSIS, ...rightRange];
+        }
+
+        // Case 4 - the total page count is greater than the page pills and both the right and left dots are shown
+
+        // < 1 ... 19 20 21 ... 25 >
+        if (showLeftDots && showRightDots) {
+            const middleRange = getRange(leftSiblingIndex, rightSiblingIndex);
+            return [
+                firstPageIndex,
+                ELLIPSIS,
+                ...middleRange,
+                ELLIPSIS,
+                lastPageIndex
+            ];
+        }
+    }, [currentPage, totalPages, siblingCount]);
+
+    return paginationRange;
+};

package/src/hooks/useRangeFacet.js

@@ -0,0 +1,62 @@
+/*
+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 { useSearch } from '../context';
+
+const useRangeFacet = ({ attribute, buckets }) => {
+    const processedBuckets = {};
+
+    buckets.forEach(bucket => {
+        processedBuckets[bucket.title] = {
+            from: bucket.from,
+            to: bucket.to
+        };
+    });
+
+    const searchCtx = useSearch();
+
+    const filter = searchCtx?.filters?.find(e => e.attribute === attribute);
+
+    const isSelected = title => {
+        const selected = filter
+            ? processedBuckets[title].from === filter.range?.from &&
+              processedBuckets[title].to === filter.range?.to
+            : false;
+        return selected;
+    };
+
+    const onChange = value => {
+        const selectedRange = processedBuckets[value];
+
+        if (!filter) {
+            const newFilter = {
+                attribute,
+                range: {
+                    from: selectedRange.from,
+                    to: selectedRange.to
+                }
+            };
+            searchCtx.createFilter(newFilter);
+            return;
+        }
+
+        const newFilter = {
+            ...filter,
+            range: {
+                from: selectedRange.from,
+                to: selectedRange.to
+            }
+        };
+        searchCtx.updateFilter(newFilter);
+    };
+
+    return { isSelected, onChange };
+};
+
+export default useRangeFacet;

package/src/hooks/useScalarFacet.js

@@ -0,0 +1,61 @@
+/*
+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 { useSearch } from '../context';
+
+const useScalarFacet = facet => {
+    const searchCtx = useSearch();
+
+    const filter = searchCtx?.filters?.find(
+        e => e.attribute === facet.attribute
+    );
+
+    const isSelected = attribute => {
+        return filter ? filter.in?.includes(attribute) : false;
+    };
+
+    const onChange = (value, selected) => {
+        if (!filter) {
+            const newFilter = {
+                attribute: facet.attribute,
+                in: [value]
+            };
+
+            searchCtx.createFilter(newFilter);
+            return;
+        }
+
+        const newFilter = { ...filter };
+        const currentFilterIn = filter.in || [];
+
+        newFilter.in = selected
+            ? [...currentFilterIn, value]
+            : filter.in?.filter(e => e !== value);
+
+        const filterUnselected = filter.in?.filter(
+            x => !newFilter.in?.includes(x)
+        );
+
+        if (newFilter.in?.length) {
+            if (filterUnselected?.length) {
+                searchCtx.removeFilter(facet.attribute, filterUnselected[0]);
+            }
+            searchCtx.updateFilter(newFilter);
+            return;
+        }
+
+        if (!newFilter.in?.length) {
+            searchCtx.removeFilter(facet.attribute);
+        }
+    };
+
+    return { isSelected, onChange };
+};
+
+export default useScalarFacet;

package/src/hooks/useSliderFacet.js

@@ -0,0 +1,43 @@
+/*
+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 { useSearch } from '../context';
+
+const useSliderFacet = ({ attribute }) => {
+    const searchCtx = useSearch();
+
+    const onChange = (from, to) => {
+        const filter = searchCtx?.filters?.find(e => e.attribute === attribute);
+
+        if (!filter) {
+            const newFilter = {
+                attribute,
+                range: {
+                    from,
+                    to
+                }
+            };
+            searchCtx.createFilter(newFilter);
+            return;
+        }
+
+        const newFilter = {
+            ...filter,
+            range: {
+                from,
+                to
+            }
+        };
+        searchCtx.updateFilter(newFilter);
+    };
+
+    return { onChange };
+};
+
+export default useSliderFacet;

package/src/i18n/Sorani.js

@@ -0,0 +1,60 @@
+/*
+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 Sorani = {
+    Filter: {
+        title: 'فلتەرەکان',
+        showTitle: 'پیشاندانی فلتەرەکان',
+        hideTitle: 'شاردنەوەی فلتەرەکان',
+        clearAll: 'سڕینەوەی هەمووان'
+    },
+    InputButtonGroup: {
+        title: 'پۆلەکان',
+        price: 'نرخ',
+        customPrice: 'نرخی بەکەسیکراو',
+        priceIncluded: 'بەڵێ',
+        priceExcluded: 'نەخێر',
+        priceExcludedMessage: 'نا {title}',
+        priceRange: ' و سەرووتر',
+        showmore: 'بینینی زیاتر'
+    },
+    Loading: {
+        title: 'بارکردن'
+    },
+    NoResults: {
+        heading: 'هیچ ئەنجامێک بۆ گەڕانەکەت نییە.',
+        subheading: 'تكایە دیسان هەوڵ بدەوە...'
+    },
+    SortDropdown: {
+        title: 'پۆلێنکردن بەگوێرەی',
+        option: 'پۆلێنکردن بەگوێرەی: {selectedOption}',
+        relevanceLabel: 'پەیوەندیدارترین',
+        positionLabel: 'شوێن'
+    },
+    CategoryFilters: {
+        results: 'ئەنجامەکان بۆ {phrase}',
+        products: '{totalCount} بەرهەمەکان'
+    },
+    ProductCard: {
+        asLowAs: 'بەقەد نزمیی {discountPrice}',
+        startingAt: 'دەستپێدەکات لە {productPrice}',
+        bundlePrice: 'لە {fromBundlePrice} بۆ {toBundlePrice}',
+        from: 'لە {productPrice}'
+    },
+    ProductContainers: {
+        minquery:
+            'زاراوەی گەڕانەکەت {variables.phrase} بەلانی کەم نەگەیشتۆتە {minQueryLength} پیت.',
+        noresults: 'گەڕانەکەت هیچ ئەنجامێکی نەبوو.',
+        pagePicker: 'پیشاندانی {pageSize} لە هەر لاپەڕەیەکدا',
+        showAll: 'هەموو'
+    },
+    SearchBar: {
+        placeholder: 'گەڕان...'
+    }
+};

package/src/i18n/ar_AE.js

@@ -0,0 +1,60 @@
+/*
+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 ar_AE = {
+    Filter: {
+        title: 'عوامل التصفية',
+        showTitle: 'إظهار عوامل التصفية',
+        hideTitle: 'إخفاء عوامل التصفية',
+        clearAll: 'مسح الكل'
+    },
+    InputButtonGroup: {
+        title: 'الفئات',
+        price: 'السعر',
+        customPrice: 'السعر المخصص',
+        priceIncluded: 'نعم.',
+        priceExcluded: 'لا',
+        priceExcludedMessage: 'ليس {title}',
+        priceRange: ' وما بعده',
+        showmore: 'إظهار أكثر'
+    },
+    Loading: {
+        title: 'تحميل'
+    },
+    NoResults: {
+        heading: 'لا يوجد نتائج لبحثك.',
+        subheading: 'الرجاء المحاولة مرة أخرى...'
+    },
+    SortDropdown: {
+        title: 'فرز حسب',
+        option: 'فرز حسب: {selectedOption}',
+        relevanceLabel: 'الأكثر صلة',
+        positionLabel: 'الموضع'
+    },
+    CategoryFilters: {
+        results: 'النتائج لـ {phrase}',
+        products: 'منتجات {totalCount}'
+    },
+    ProductCard: {
+        asLowAs: 'بقيمة {discountPrice} فقط',
+        startingAt: 'بدءًا من {productPrice}',
+        bundlePrice: 'من {fromBundlePrice} إلى {toBundlePrice}',
+        from: 'من {productPrice}'
+    },
+    ProductContainers: {
+        minquery:
+            'مصطلح البحث الخاص بك {variables.phrase} لم يصل إلى {minQueryLength} من الأحرف كحد أدنى.',
+        noresults: 'لا يوجد لبحثك أي نتائج.',
+        pagePicker: 'إظهار {pageSize} لكل صفحة',
+        showAll: 'الكل'
+    },
+    SearchBar: {
+        placeholder: 'بحث...'
+    }
+};