@riosst100/pwa-marketplace 3.0.0 → 3.0.1

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

@@ -3,7 +3,9 @@ import { shape, string } from 'prop-types';
 import { Link, Route } from 'react-router-dom';
 
 import AccountTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/accountTrigger';
+
 import CartTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/cartTrigger';
+
 import WishlistTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/wishlistTrigger';
 import NavTrigger from '@magento/venia-ui/lib/components/Header/navTrigger';
 import SearchTrigger from '@magento/venia-ui/lib/components/Header/searchTrigger';

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

@@ -1,9 +1,8 @@
 import React from 'react'
 import { Link } from 'react-router-dom';
+import Icon from '@magento/venia-ui/lib/components/Icon';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
-import { Heart } from 'iconsax-react';
-import { darkBlue } from '@riosst100/pwa-marketplace/src/theme/vars';
-import cn from 'classnames';
+import { Heart as HeartIcon } from 'react-feather';
 
 const wishlistTrigger = () => {
     return (
@@ -14,7 +13,8 @@ const wishlistTrigger = () => {
                 className={''}
                 data-cy="wishlistLink"
             >
-                <Heart size="20" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
+                <Icon src={HeartIcon} attrs={{ width: 20 }} />
+                {/* <Heart size="20" color={darkBlue} className={cn('stroke-0')} variant="Outline" /> */}
             </Link>
         </div>
     )

package/src/overwrites/venia-ui/lib/components/Main/main.js

@@ -6,6 +6,7 @@ import { useScrollLock } from '@magento/peregrine';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import Footer from '@magento/venia-ui/lib/components/Footer';
 import Header from '@magento/venia-ui/lib/components/Header';
+import CheckoutHeader from '@riosst100/pwa-marketplace/src/components/CheckoutHeader';
 import defaultClasses from './main.module.css';
 import cn from 'classnames';
 
@@ -21,10 +22,14 @@ const Main = props => {
     useScrollLock(isMasked);
 
     return (
-        <main className={rootClass}>
-            {!isCheckoutPage && <Header />}
-            <div className={cn(pageClass, 'main-content-container pb-16 !min-h-[50vh]')}>{children}</div>
-            {!isCheckoutPage && <Footer />}
+        <main className={rootClass} style={{
+            "minHeight": "100vh",
+            "display": "flex",
+            "flexDirection": "column"
+        }}>
+            {isCheckoutPage ? <CheckoutHeader /> : <Header />}
+            <div style={{"flex": 1}} className={cn(pageClass, isCheckoutPage ? 'max-w-[1000px] main-content-container pb-16 !min-h-[50vh]' : 'max-w-[1300px] main-content-container pb-16 !min-h-[50vh]')}>{children}</div>
+            <Footer />
         </main>
     );
 };

package/src/overwrites/venia-ui/lib/components/Main/main.module.css

@@ -10,9 +10,9 @@
 }
 
 .page {
-    composes: md_max-w-screen-md from global;
-    composes: lg_max-w-[1300px] from global;
+    /* composes: md_max-w-screen-md from global; */
     composes: mx-auto from global;
+    composes: w-full from global;
     composes: my-0 from global;
     composes: px-[15px] from global;
     min-height: 40rem;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -38,6 +38,8 @@ import RFQ from '@riosst100/pwa-marketplace/src/components/RFQ';
 import LinkToOtherStores from '@riosst100/pwa-marketplace/src/components/LinkToOtherStores';
 import Collapsible from '@riosst100/pwa-marketplace/src/components/commons/Collapsible';
 import { useLocation } from 'react-router-dom';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import { ShoppingCart } from 'react-feather';
 
 import { totalListings, lowestPrice } from '@riosst100/pwa-marketplace/src/components/CrossSeller/crossSellerBuy';
 
@@ -57,6 +59,7 @@ const ERROR_FIELD_TO_MESSAGE_MAPPING = {
 
 const ProductDetailsCollapsible = (props) => {
     const { data } = props;
+
     return (
         <>
             {data.map((_data) => (
@@ -99,13 +102,10 @@ const ProductFullDetail = props => {
         customAttributes,
         wishlistButtonProps,
         sellerDetails,
-        productReviewData,
-        loadingProductReview,
-        errorProductReview,
-        ratingsMetadataData,
-        loadingRatingsMetadata,
-        handleSubmitReview,
-        defaultNickname
+        handleToastAction,
+        addToCartResponseData,
+        errorAddingProductToCart,
+        isAddProductLoading,
     } = talonProps;
 
     const [, { addToast }] = useToasts();
@@ -135,59 +135,69 @@ const ProductFullDetail = props => {
             currentProduct={productDetails.name}
         />
     ) : null;
+    
     // Fill a map with field/section -> error.
     const errors = new Map();
-    if (errorMessage) {
-        Object.keys(ERROR_MESSAGE_TO_FIELD_MAPPING).forEach(key => {
-            if (errorMessage.includes(key)) {
-                const target = ERROR_MESSAGE_TO_FIELD_MAPPING[key];
-                const message = ERROR_FIELD_TO_MESSAGE_MAPPING[target];
-                errors.set(target, message);
-            }
-        });
 
-        // Handle cases where a user token is invalid or expired. Preferably
-        // this would be handled elsewhere with an error code and not a string.
-        if (errorMessage.includes('The current user cannot')) {
-            errors.set('form', [
-                new Error(
-                    formatMessage({
-                        id: 'productFullDetail.errorToken',
-                        defaultMessage:
-                            'There was a problem with your cart. Please sign in again and try adding the item once more.'
-                    })
-                )
-            ]);
-        }
+    useEffect(() => {
+        if (errorMessage) {
+            Object.keys(ERROR_MESSAGE_TO_FIELD_MAPPING).forEach(key => {
+                if (errorMessage.includes(key)) {
+                    const target = ERROR_MESSAGE_TO_FIELD_MAPPING[key];
+                    const message = ERROR_FIELD_TO_MESSAGE_MAPPING[target];
+                    errors.set(target, message);
+                }
+            });
 
-        // Handle cases where a cart wasn't created properly.
-        if (
-            errorMessage.includes('Variable "$cartId" got invalid value null')
-        ) {
-            errors.set('form', [
-                new Error(
-                    formatMessage({
-                        id: 'productFullDetail.errorCart',
-                        defaultMessage:
-                            'There was a problem with your cart. Please refresh the page and try adding the item once more.'
-                    })
-                )
-            ]);
-        }
+            addToast({
+                type: 'error',
+                message: 'Desired quantity not available. You already have all of these in your cart.',
+                timeout: 3000
+            });
 
-        // An unknown error should still present a readable message.
-        if (!errors.size) {
-            errors.set('form', [
-                new Error(
-                    formatMessage({
-                        id: 'productFullDetail.errorUnknown',
-                        defaultMessage:
-                            'Could not add item to cart. Please check required options and try again.'
-                    })
-                )
-            ]);
+            // Handle cases where a user token is invalid or expired. Preferably
+            // this would be handled elsewhere with an error code and not a string.
+            // if (errorMessage.includes('The current user cannot')) {
+            //     errors.set('form', [
+            //         new Error(
+            //             formatMessage({
+            //                 id: 'productFullDetail.errorToken',
+            //                 defaultMessage:
+            //                     'There was a problem with your cart. Please sign in again and try adding the item once more.'
+            //             })
+            //         )
+            //     ]);
+            // }
+
+            // Handle cases where a cart wasn't created properly.
+            // if (
+            //     errorMessage.includes('Variable "$cartId" got invalid value null')
+            // ) {
+            //     errors.set('form', [
+            //         new Error(
+            //             formatMessage({
+            //                 id: 'productFullDetail.errorCart',
+            //                 defaultMessage:
+            //                     'There was a problem with your cart. Please refresh the page and try adding the item once more.'
+            //             })
+            //         )
+            //     ]);
+            // }
+
+            // An unknown error should still present a readable message.
+            // if (!errors.size) {
+            //     errors.set('form', [
+            //         new Error(
+            //             formatMessage({
+            //                 id: 'productFullDetail.errorUnknown',
+            //                 defaultMessage:
+            //                     'Could not add item to cart. Please check required options and try again.'
+            //             })
+            //         )
+            //     ]);
+            // }
         }
-    }
+    }, [errorMessage]);
 
     const customAttributesDetails = useMemo(() => {
         const list = [];
@@ -499,17 +509,7 @@ const ProductFullDetail = props => {
         {
             id: 'product-reviews',
             title: 'Reviews',
-            content: <ProductReviews 
-                className={cn(contentContainerClass, classes.contentContainerTabOverride)}
-                productReviewData={productReviewData}
-                loadingProductReview={loadingProductReview}
-                errorProductReview={errorProductReview}
-                ratingsMetadataData={ratingsMetadataData}
-                loadingRatingsMetadata={loadingRatingsMetadata}
-                handleSubmitReview={handleSubmitReview}
-                defaultNickname={defaultNickname}
-                product={product}
-            />
+            content: <ProductReviews className={cn(contentContainerClass, classes.contentContainerTabOverride)} />
         }
     ];
 
@@ -552,16 +552,11 @@ const ProductFullDetail = props => {
         </div>
     ) : null;
 
+    const AlertCircleIcon = <Icon src={ShoppingCart} attrs={{ width: 20 }} />;
+
     const handleAddToCart = async (...args) => {
         try {
             await originalHandleAddToCart(...args);
-            addToast({
-                type: 'success',
-                message: formatMessage({
-                    id: 'productFullDetail.addToCartSuccess',
-                    defaultMessage: 'Product successfully added to cart!'
-                })
-            });
         } catch (e) {
             addToast({
                 type: 'error',
@@ -573,6 +568,39 @@ const ProductFullDetail = props => {
         }
     };
 
+    useEffect(() => {
+        if (
+            addToCartResponseData 
+            && !addToCartResponseData?.addProductsToCart?.user_errors.length 
+            && !isAddProductLoading 
+            && !errorAddingProductToCart
+        ) {
+            addToast({
+                type: 'success',
+                icon: AlertCircleIcon,
+                message: formatMessage({
+                    id: 'productFullDetail.addToCartSuccess',
+                    defaultMessage: '1 item added to cart.'
+                }),
+                timeout: 5000,
+                dismissable: true,
+                hasDismissAction: true,
+                dismissActionText: formatMessage({
+                    id: 'productFullDetail.addToCartContinueShipping',
+                    defaultMessage: 'Continue Shopping'
+                }),
+                actionText: formatMessage({
+                    id: 'productFullDetail.addToCartViewCart',
+                    defaultMessage: 'View Shopping Cart'
+                }),
+                onAction: removeToast =>
+                    handleToastAction(
+                        removeToast
+                    )
+            });
+        }
+    }, [addToCartResponseData, errorAddingProductToCart, isAddProductLoading]);
+
     useEffect(() => {
         const toastRoot = document.getElementById('toast-root');
         if (toastRoot) {

package/src/overwrites/venia-ui/lib/components/ToastContainer/toast.module.css

@@ -26,7 +26,7 @@
     grid-auto-columns: min-content auto min-content;
     width: 100%;
     box-shadow: none;
-    border-bottom-width: 3px !important;
+    border-bottom-width: 2px !important;
     border-radius: 10px;
 }
 
@@ -89,11 +89,11 @@
     composes: root;
 
     background-color: #f1f9f4;
-    border: 2px solid #51dc6b;
+    border: 1px solid #51dc6b;
 }
 
 .successToast > .icon {
-    --stroke: #51dc6b;
+    /* --stroke: #51dc6b; */
 }
 
 .message {

package/src/talons/Header/useCartTrigger.js

@@ -0,0 +1,82 @@
+import { useCallback, useState, useEffect } from 'react';
+import { useQuery } from '@apollo/client';
+import { useHistory, useLocation } from 'react-router-dom';
+
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
+
+/**
+ * Routes to hide the mini cart on.
+ */
+// const DENIED_MINI_CART_ROUTES = ['/checkout'];
+const DENIED_MINI_CART_ROUTES = [];
+
+/**
+ *
+ * @param {DocumentNode} props.queries.getItemCountQuery query to get the total cart items count
+ *
+ * @returns {
+ *      itemCount: Number,
+ *      miniCartIsOpen: Boolean,
+ *      handleLinkClick: Function,
+ *      handleTriggerClick: Function,
+ *      miniCartRef: Function,
+ *      hideCartTrigger: Function,
+ *      setMiniCartIsOpen: Function
+ *  }
+ */
+export const useCartTrigger = props => {
+    const {
+        queries: { getItemCountQuery }
+    } = props;
+
+    const [{ cartId }] = useCartContext();
+    const history = useHistory();
+    const location = useLocation();
+    const [isHidden, setIsHidden] = useState(() =>
+        DENIED_MINI_CART_ROUTES.includes(location.pathname)
+    );
+
+    const {
+        elementRef: miniCartRef,
+        expanded: miniCartIsOpen,
+        setExpanded: setMiniCartIsOpen,
+        triggerRef: miniCartTriggerRef
+    } = useDropdown();
+
+    const { data } = useQuery(getItemCountQuery, {
+        fetchPolicy: 'cache-and-network',
+        variables: {
+            cartId
+        },
+        skip: !cartId,
+        errorPolicy: 'all'
+    });
+
+    const itemCount = data?.cart?.total_summary_quantity_including_config || 0;
+
+    const handleTriggerClick = useCallback(() => {
+        // Open the mini cart.
+        setMiniCartIsOpen(isOpen => !isOpen);
+    }, [setMiniCartIsOpen]);
+
+    const handleLinkClick = useCallback(() => {
+        // Send the user to the cart page.
+        history.push('/cart');
+    }, [history]);
+
+    useEffect(() => {
+        setIsHidden(DENIED_MINI_CART_ROUTES.includes(location.pathname));
+    }, [location]);
+
+    return {
+        handleLinkClick,
+        handleTriggerClick,
+        itemCount,
+        miniCartIsOpen,
+        miniCartRef,
+        hideCartTrigger: isHidden,
+        setMiniCartIsOpen,
+        miniCartTriggerRef
+    };
+};

package/src/talons/Seller/seller.gql.js

@@ -162,7 +162,48 @@ export const GET_SELLER_DETAIL_QUERY = gql`
     }
 `;
 
+export const GET_COUPON_CODE_QUERY = gql`
+    query getSellerCoupons(
+        $sellerUrl: String!
+        $pageSize: Int
+        $currentPage: Int
+        $filters: CouponCodeFilterInput
+        ) {
+        sellerCoupons(
+            sellerUrl: $sellerUrl
+            pageSize: $pageSize
+            currentPage: $currentPage
+            filters: $filters
+        ) {
+            items {
+            code
+            coupon_id
+            couponcode_id
+            created_at
+            description
+            discount_amount
+            expiration_date
+            from_date
+            is_active
+            name
+            seller_id
+            times_used
+            to_date
+            type
+            uses_per_customer
+            }
+            page_info {
+            current_page
+            page_size
+            total_pages
+            }
+            total_count
+        }
+    }
+`;
+
 export default {
     getStoreConfigData: GET_STORE_CONFIG_DATA,
-    getSellerDetailQuery: GET_SELLER_DETAIL_QUERY
+    getSellerDetailQuery: GET_SELLER_DETAIL_QUERY,
+    getCouponCodeQuery: GET_COUPON_CODE_QUERY,
 };

package/src/talons/Seller/useSeller.js

@@ -13,7 +13,7 @@ export const useSeller = props => {
     const { formatMessage } = useIntl();
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getStoreConfigData, getSellerDetailQuery } = operations;
+    const { getStoreConfigData, getSellerDetailQuery, getCouponCodeQuery } = operations;
     const { pathname } = useLocation();
     const [
         ,
@@ -45,6 +45,26 @@ export const useSeller = props => {
         }
     });
 
+    const {
+        data: couponData,
+        error: couponError,
+        loading: couponLoading
+    } = useQuery(getCouponCodeQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        variables: {
+            sellerUrl: urlKey,
+            pageSize: 20,
+            currentPage: 1,
+            filters: {
+                is_public: {
+                    eq: '1'
+                }
+            }
+        },
+        skip: !urlKey
+    });
+
     const isBackgroundLoading = !!data && loading;
 
     const seller = useMemo(() => {
@@ -84,6 +104,9 @@ export const useSeller = props => {
         error,
         loading,
         seller,
-        favoriteSellerButtonProps
+        favoriteSellerButtonProps,
+        couponData,
+        couponError,
+        couponLoading
     };
 };