@riosst100/pwa-marketplace 2.4.5 → 2.4.7

package/src/overwrites/venia-ui/lib/components/Header/cartTrigger.js

@@ -12,6 +12,8 @@ import { GET_ITEM_COUNT_QUERY } from '@magento/venia-ui/lib/components/Header/ca
 import cn from 'classnames';
 import { ShoppingCart } from 'iconsax-react';
 import { darkBlue } from '@riosst100/pwa-marketplace/src/theme/vars';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 
 const MiniCart = React.lazy(() => import('@magento/venia-ui/lib/components/MiniCart'));
 
@@ -50,8 +52,8 @@ const CartTrigger = props => {
         <span
             className={cn(
                 classes.counter,
-                'bg-yellow-300 min-w-[18px] min-h-[18px] text-base font-regular leading-[18px] top-[-5px]',
-                '!left-auto right-[0px]'
+                'bg-yellow-300 min-w-[18px] min-h-[18px] text-base font-regular leading-[18px] top-[-2px]',
+                '!left-auto right-[3px]'
             )}
             data-cy="CartTrigger-counter"
         >
@@ -65,20 +67,19 @@ const CartTrigger = props => {
         // and control which one displays via CSS.
         <Fragment>
             <div className={cn(triggerClassName, '!h-auto')} ref={miniCartTriggerRef}>
-                <button
-                    aria-expanded={miniCartIsOpen}
-                    aria-label={buttonAriaLabel}
+                <Link
                     className={cn(
                         classes.trigger,
                         'gap-[5px] !min-h-[30px] !h-auto !min-w-[35px] !w-fit !justify-between',
                     )}
-                    onClick={handleTriggerClick}
-                    data-cy="CartTrigger-trigger"
+                    to='/cart'
                 >
-                    {/* <Icon src={ShoppingCartIcon} /> */}
-                    <ShoppingCart size="20" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
-                    {maybeItemCounter}
-                </button>
+                    <span>
+                        {/* <Icon src={ShoppingCartIcon} /> */}
+                        <ShoppingCart size="20" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
+                        {maybeItemCounter}
+                    </span>
+                </Link>
             </div>
             <button
                 aria-expanded={miniCartIsOpen}

package/src/talons/CartPage/ProductListingBySeller/checkoutBySeller.gql.js

@@ -0,0 +1,21 @@
+import { gql } from '@apollo/client';
+
+export const INIT_CHECKOUT_SPLIT_CART_MUTATION = gql`
+    mutation InitCheckoutSplitCart(
+        $input: SubmitSplitCartInput!
+    ) {
+        initCheckoutSplitCart(
+            input: $input
+        ) {
+            id
+            parent_id
+            quote_id
+            is_active
+            is_ordered
+        }
+    }
+`;
+
+export default {
+    initCheckoutSplitCartMutation: INIT_CHECKOUT_SPLIT_CART_MUTATION
+};

package/src/talons/CartPage/ProductListingBySeller/useProductListingBySeller.js

@@ -0,0 +1,73 @@
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+import debounce from 'lodash.debounce';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+import { useMutation } from '@apollo/client';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from '@riosst100/pwa-marketplace/src/talons/CartPage/ProductListingBySeller/checkoutBySeller.gql';
+
+export const useProductListingBySeller = props => {
+    const { initialValue, min, onChange } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const {
+        initCheckoutSplitCartMutation
+    } = operations;
+
+    const [
+        initCheckoutSplitCart,
+        {
+            loading: initCheckoutSplitCartLoading,
+            error: initCheckoutSplitCartError,
+            called: initCheckoutSplitCartCalled
+        }
+    ] = useMutation(initCheckoutSplitCartMutation);
+
+    const [displayError, setDisplayError] = useState(false);
+
+    const [, { dispatch }] = useEventingContext();
+
+    const handleSellerToCheckout = useCallback(
+        async (sellerUrl, cartId) => {
+            try {
+                // await initCheckoutSplitCart({
+                //     variables: {
+                //         seller_url: sellerUrl,
+                //         cart_id: cartId
+                //     }
+                // });
+
+                // const selectedOptions =
+                //     item.configurable_options?.map(
+                //         ({ option_label, value_label }) => ({
+                //             attribute: option_label,
+                //             value: value_label
+                //         })
+                //     ) || null;
+
+                // dispatch({
+                //     type: quantity ? 'CART_UPDATE_ITEM' : 'CART_REMOVE_ITEM',
+                //     payload: {
+                //         cartId,
+                //         sku: item.product.sku,
+                //         name: item.product.name,
+                //         priceTotal: item.prices.price.value,
+                //         currencyCode: item.prices.price.currency,
+                //         discountAmount: item.prices.total_item_discount.value,
+                //         selectedOptions,
+                //         quantity: quantity || item.quantity
+                //     }
+                // });
+            } catch (err) {
+                // Make sure any errors from the mutation are displayed.
+                setDisplayError(true);
+            }
+        },
+        [dispatch, initCheckoutSplitCart]
+    );
+
+    return {
+        handleSellerToCheckout
+    };
+};

package/src/talons/SellerProducts/useProductContent.js

@@ -9,6 +9,8 @@ import DEFAULT_OPERATIONS from './productContent.gql';
 export const useProductContent = props => {
     const { sellerId, data, pageSize = 6 } = props;
 
+    const categoryUid = 'MTI=';
+
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
 
     const {
@@ -56,9 +58,9 @@ export const useProductContent = props => {
         {
             fetchPolicy: 'cache-and-network',
             nextFetchPolicy: 'cache-first',
-            skip: !sellerId,
+            skip: !categoryUid,
             variables: {
-                id: sellerId
+                id: categoryUid
             }
         }
     );
@@ -66,47 +68,50 @@ export const useProductContent = props => {
     const [, { dispatch }] = useEventingContext();
 
     useEffect(() => {
-        if (sellerId) {
+        if (categoryUid) {
             getFilters({
                 variables: {
                     categoryIdFilter: {
-                        eq: sellerId
+                        eq: categoryUid
                     }
                 }
             });
         }
-    }, [sellerId, getFilters]);
+    }, [categoryUid, getFilters]);
 
     useEffect(() => {
-        if (sellerId) {
+        if (categoryUid) {
             getSortMethods({
                 variables: {
                     categoryIdFilter: {
-                        in: sellerId
+                        in: categoryUid
                     }
                 }
             });
         }
-    }, [sellerId, getSortMethods]);
+    }, [categoryUid, getSortMethods]);
 
-    // console.log('data')
-    // console.log(data)
+    console.log('filterData')
+    console.log(filterData)
 
     const rawFilters = filterData ? filterData.products.aggregations : null;
     const items = data ? data.items : placeholderItems;
-    const category = null;
-    const children = null;
-    // const category =
-    //     categoryData && categoryData.categories.items.length
-    //         ? categoryData.categories.items[0]
-    //         : null;
-    // const children =
-    //     categoryData && categoryData.categories.items.length
-    //         ? categoryData.categories.items[0].children
-    //         : null;
+    // const category = null;
+    // const children = null;
+    const category =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0]
+            : null;
+    const children =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0].children
+            : null;
 
     const filters = [];
 
+    console.log('rawFilters')
+    console.log(rawFilters)
+
     rawFilters && rawFilters.map((filter, index) => {
 
         const filterOptions = [];

package/src/talons/SellerProducts/useSellerProducts.js

@@ -132,7 +132,7 @@ export const useSellerProducts = props => {
     const categoryId = useMemo(() => {
         let uid = null;
         if (categoryData) {
-            uid = categoryData.categories.items[0].id;
+            uid = categoryData?.categories?.items[0].id;
         }
         return uid;
     }, [categoryData]);