@riosst100/pwa-marketplace 2.4.4 → 2.4.6

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/product.js

@@ -0,0 +1,278 @@
+import React, { useMemo } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+// import { Heart } from 'react-feather';
+import { gql } from '@apollo/client';
+import { Link } from 'react-router-dom';
+import { useProduct } from '@magento/peregrine/lib/talons/CartPage/ProductListing/useProduct';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import Price from '@magento/venia-ui/lib/components/Price';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import Image from '@magento/venia-ui/lib/components/Image';
+import Kebab from '@magento/venia-ui/lib/components/LegacyMiniCart/kebab';
+import ProductOptions from '@magento/venia-ui/lib/components/LegacyMiniCart/productOptions';
+import Section from '@magento/venia-ui/lib/components/LegacyMiniCart/section';
+import AddToListButton from '@magento/venia-ui/lib/components/Wishlist/AddToListButton';
+import Quantity from './quantity';
+import cn from 'classnames';
+import Button from '@magento/venia-ui/lib/components/Button';
+import { Trash, Heart } from 'iconsax-react';
+
+import defaultClasses from './product.module.css';
+
+import { CartPageFragment } from '@magento/peregrine/lib/talons/CartPage/cartPageFragments.gql.js';
+import { AvailableShippingMethodsCartFragment } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/shippingMethodsFragments.gql.js';
+
+const IMAGE_SIZE = 100;
+
+const HeartIcon = <Heart size="16" color="#909090" />;
+
+const Product = props => {
+    const { item } = props;
+
+    const { formatMessage } = useIntl();
+    const talonProps = useProduct({
+        operations: {
+            removeItemMutation: REMOVE_ITEM_MUTATION,
+            updateItemQuantityMutation: UPDATE_QUANTITY_MUTATION
+        },
+        ...props
+    });
+
+    const {
+        addToWishlistProps,
+        errorMessage,
+        handleEditItem,
+        handleRemoveFromCart,
+        handleUpdateItemQuantity,
+        isEditable,
+        product,
+        isProductUpdating
+    } = talonProps;
+
+    const { afterAdd, item: itemProduct, storeConfig } = addToWishlistProps;
+
+    const {
+        currency,
+        image,
+        name,
+        options,
+        quantity,
+        stockStatus,
+        unitPrice,
+        urlKey,
+        urlSuffix
+    } = product;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const itemClassName = isProductUpdating
+        ? classes.item_disabled
+        : classes.item;
+
+    const editItemSection = isEditable ? (
+        <Section
+            text={formatMessage({
+                id: 'product.editItem',
+                defaultMessage: 'Edit item'
+            })}
+            data-cy="Product-Section-editItem"
+            onClick={handleEditItem}
+            icon="Edit2"
+            classes={{
+                text: classes.sectionText
+            }}
+        />
+    ) : null;
+
+    const itemLink = useMemo(
+        () => resourceUrl(`/${urlKey}${urlSuffix || ''}`),
+        [urlKey, urlSuffix]
+    );
+
+    const stockStatusMessage =
+        stockStatus === 'OUT_OF_STOCK'
+            ? formatMessage({
+                id: 'product.outOfStock',
+                defaultMessage: 'Out-of-stock'
+            })
+            : '';
+
+    return (
+        <li className={cn(classes.root, 'border-b border-gray-100 p-[15px] last_border-none')} data-cy="Product-root">
+            <span className={classes.errorText}>{errorMessage}</span>
+            <div className="flex justify-between">
+                <div className='flex gap-[15px]'>
+                    <Link
+                        to={itemLink}
+                        className={classes.imageContainer}
+                        data-cy="Product-imageContainer"
+                    >
+                        <Image
+                            alt={name}
+                            classes={{
+                                root: classes.imageRoot,
+                                image: cn(classes.image, '!h-[100px] w-full border-gray-100 !rounded-md !bg-transparent p-1')
+                            }}
+                            width={IMAGE_SIZE}
+                            height={IMAGE_SIZE}
+                            resource={image}
+                            data-cy="Product-image"
+                        />
+                    </Link>
+                    <div className='flex flex-col'>
+                        <div className={cn(classes.name, 'text-[14px] font-normal max-w-[260px]')} data-cy="Product-name">
+                            <Link to={itemLink}>{name}</Link>
+                        </div>
+                        <ProductOptions
+                            options={options}
+                            classes={{
+                                options: classes.options,
+                                optionLabel: classes.optionLabel
+                            }}
+                        />
+                        <span className={classes.stockStatusMessage}>
+                            {stockStatusMessage}
+                        </span>
+                    </div>
+                </div>
+                <div className="flex flex-col">
+
+                    <span className={cn(classes.price, 'text-[16px] font-medium text-right mb-5')} data-cy="Product-price">
+                        <Price currencyCode={currency} value={unitPrice} />
+                        {/* <FormattedMessage
+                            id={'product.price'}
+                            defaultMessage={' ea.'}
+                        /> */}
+                    </span>
+                    <div className={cn(classes.quantity, 'hidden sm_flex')}>
+                        <Quantity
+                            itemId={item.id}
+                            initialValue={quantity}
+                            onChange={handleUpdateItemQuantity}
+                        />
+                    </div>
+                </div>
+                {/* <Kebab
+                    classes={{
+                        root: classes.kebab
+                    }}
+                    disabled={true}
+                >
+                    {editItemSection}
+                    <Section
+                        text={formatMessage({
+                            id: 'product.removeFromCart',
+                            defaultMessage: 'Remove from cart'
+                        })}
+                        data-cy="Product-Section-removeFromCart"
+                        onClick={handleRemoveFromCart}
+                        icon="Trash"
+                        classes={{
+                            text: classes.sectionText
+                        }}
+                    />
+                    <li>
+                        <AddToListButton
+                            {...addToWishlistProps}
+                            classes={{
+                                root: classes.addToListButton,
+                                root_selected: classes.addToListButton_selected
+                            }}
+                            icon={HeartIcon}
+                        />
+                    </li>
+                </Kebab> */}
+
+            </div>
+            <div className='flex justify-end gap-2.5 items-center mt-2 sm_mt-0'>
+                <div className={cn(classes.quantity, 'flex-auto sm_hidden')}>
+                    <Quantity
+                        itemId={item.id}
+                        initialValue={quantity}
+                        onChange={handleUpdateItemQuantity}
+                    />
+                </div>
+                {editItemSection}
+                <li>
+                    <AddToListButton
+                        // {...addToWishlistProps}
+                        afterAdd={afterAdd}
+                        item={itemProduct}
+                        storeConfig={storeConfig}
+                        classes={{
+                            root: cn(
+                                classes.addToListButton,
+                                'min-w-min border border-gray-200 rounded-full border-solid w-7 h-7 flex items-center justify-center !p-0 hover_border-gray-600'
+                            ),
+                            root_selected: classes.addToListButton_selected
+                        }}
+                        icon={HeartIcon}
+                    />
+                </li>
+                {/* <Section
+                    // text={formatMessage({
+                    //     id: 'product.removeFromCart',
+                    //     defaultMessage: 'Remove from cart'
+                    // })}
+                    data-cy="Product-Section-removeFromCart"
+                    onClick={handleRemoveFromCart}
+                    icon={"Trash"}
+                    classes={{
+                        text: classes.sectionText,
+                        button: 'w-fitContent'
+                    }}
+                /> */}
+                <Button
+                    data-cy="Product-Section-removeFromCart"
+                    onClick={handleRemoveFromCart}
+                    className="min-w-min border border-gray-200 rounded-full border-solid w-7 h-7 flex items-center justify-center hover_border-gray-600"
+                >
+                    <Trash size="16" color="#999999" />
+                </Button>
+            </div>
+        </li>
+    );
+};
+
+export default Product;
+
+export const REMOVE_ITEM_MUTATION = gql`
+    mutation removeItem($cartId: String!, $itemId: ID!) {
+        removeItemFromCart(
+            input: { cart_id: $cartId, cart_item_uid: $itemId }
+        ) {
+            cart {
+                id
+                ...CartPageFragment
+                ...AvailableShippingMethodsCartFragment
+            }
+        }
+    }
+    ${CartPageFragment}
+    ${AvailableShippingMethodsCartFragment}
+`;
+
+export const UPDATE_QUANTITY_MUTATION = gql`
+    mutation updateItemQuantity(
+        $cartId: String!
+        $itemId: ID!
+        $quantity: Float!
+    ) {
+        updateCartItems(
+            input: {
+                cart_id: $cartId
+                cart_items: [{ cart_item_uid: $itemId, quantity: $quantity }]
+            }
+        ) {
+            cart {
+                id
+                ...CartPageFragment
+                ...AvailableShippingMethodsCartFragment
+            }
+        }
+    }
+    ${CartPageFragment}
+    ${AvailableShippingMethodsCartFragment}
+`;

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/product.module.css

@@ -0,0 +1,156 @@
+.root {
+    composes: gap-y-2xs from global;
+    composes: grid from global;
+}
+
+.item {
+    composes: gap-x-2xs from global;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: items-start from global;
+    grid-template-areas: 'image details kebab';
+    grid-template-columns: 100px 1fr min-content;
+}
+
+.item_disabled {
+    composes: item;
+    composes: opacity-50 from global;
+}
+
+.errorText {
+    composes: leading-normal from global;
+    composes: text-error from global;
+}
+
+/* TODO @TW: cannot compose */
+.errorText:empty {
+    display: none;
+}
+
+.imageContainer {
+    grid-area: image;
+    flex-basis: 100px;
+}
+
+.imageRoot {
+    composes: h-full from global;
+    composes: w-[100px] from global;
+}
+
+.image {
+    composes: bg-subtle from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: h-full from global;
+    composes: object-contain from global;
+    composes: object-center from global;
+    composes: rounded-sm from global;
+}
+
+.details {
+    composes: gap-2xs from global;
+    composes: leading-normal from global;
+
+    composes: sm_grid from global;
+}
+
+@media (min-width: 640px) {
+    .details {
+        grid-area: details;
+        grid-template-areas:
+            'name name'
+            'options quantity'
+            'price quantity'
+            'stock quantity';
+        grid-template-columns: 2fr 1fr;
+    }
+}
+
+.name {
+    /* composes: font-medium from global; */
+    grid-area: name;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: normal;
+}
+
+.price {
+    composes: text-sm from global;
+    grid-area: price;
+}
+
+.quantity {
+    composes: grid from global;
+    composes: items-start from global;
+    composes: justify-items-start from global;
+    grid-area: quantity;
+
+    composes: sm_justify-items-center from global;
+}
+
+.kebab {
+    composes: relative from global;
+    grid-area: kebab;
+}
+
+.sectionText {
+    composes: pointer-events-none from global;
+    composes: px-2xs from global;
+    composes: py-1 from global;
+    composes: text-sm from global;
+}
+
+.options {
+    composes: gap-0.5 from global;
+    composes: grid from global;
+    composes: text-sm from global;
+    grid-area: options;
+}
+
+.optionLabel {
+    composes: auto-cols-max from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+}
+
+.stockStatusMessage {
+    composes: font-medium from global;
+    composes: text-error from global;
+    composes: text-sm from global;
+    grid-area: stock;
+}
+
+/* TODO @TW: cannot compose */
+.stockStatusMessage:empty {
+    display: none;
+}
+
+.addToListButton {
+    --stroke: rgb(var(--venia-global-color-teal));
+
+    composes: content-center from global;
+    composes: gap-x-xs from global;
+    composes: inline-flex from global;
+    composes: px-2.5 from global;
+    composes: py-3.5 from global;
+    composes: text-sm from global;
+    composes: w-full from global;
+}
+
+.addToListButton_selected {
+    composes: hidden from global;
+}
+
+@media (max-width: 639px) {
+
+    .name,
+    .options,
+    .price,
+    .stockStatusMessage,
+    .quantity {
+        grid-area: auto;
+    }
+}

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/productListingBySeller.js

@@ -0,0 +1,125 @@
+import React, { Fragment, Suspense } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import defaultClasses from './productListingBySeller.module.css';
+import Product from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/product';
+import ErrorMessage from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/errorMessage';
+import cn from 'classnames';
+import { useProductListingBySeller } from '@riosst100/pwa-marketplace/src/talons/CartPage/ProductListingBySeller/useProductListingBySeller';
+import { Shop, ArrowRight2 } from 'iconsax-react';
+import PriceSummary from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CartPage/PriceSummary';
+
+const EditModal = React.lazy(() => import('@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/EditModal'));
+/**
+ * A child component of the CartPage component.
+ * This component renders the product listing on the cart page.
+ *
+ * @param {Object} props
+ * @param {Function} props.setIsCartUpdating Function for setting the updating state of the cart.
+ * @param {Object} props.classes CSS className overrides.
+ * See [productListing.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/ProductListing/productListing.module.css}
+ * for a list of classes you can override.
+ *
+ * @returns {React.Element}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import ProductListing from "@magento/venia-ui/lib/components/CartPage/ProductListing";
+ */
+const ProductListingBySeller = props => {
+    const {
+        onAddToWishlistSuccess,
+        isCartUpdating,
+        hasItems,
+        setIsCartUpdating,
+        fetchCartDetails,
+        activeEditItem,
+        setActiveEditItem,
+        wishlistConfig,
+        isLoading,
+        error,
+        seller,
+        items
+    } = props;
+
+    const talonProps = useProductListingBySeller({
+        
+    });
+
+    const {
+        handleSellerToCheckout
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    if (isLoading) {
+        return (
+            <LoadingIndicator>
+                <FormattedMessage
+                    id={'productListing.loading'}
+                    defaultMessage={'Fetching Cart...'}
+                />
+            </LoadingIndicator>
+        );
+    }
+
+    if (items.length) {
+        const productComponents = items.map(product => (
+            <Product
+                item={product}
+                key={product.uid}
+                setActiveEditItem={setActiveEditItem}
+                setIsCartUpdating={setIsCartUpdating}
+                onAddToWishlistSuccess={onAddToWishlistSuccess}
+                fetchCartDetails={fetchCartDetails}
+                wishlistConfig={wishlistConfig}
+            />
+        ));
+
+        const priceSummary = hasItems ? (
+            <PriceSummary isUpdating={isCartUpdating} sellerUrl={seller.seller_url} />
+        ) : null;
+
+        return (
+            <Fragment>
+                <ErrorMessage error={error} />
+                <ul className={cn(classes.root, 'mb-5 border border-gray-100 rounded-md')} data-cy="ProductListing-root">
+                    <div className='px-6'>
+                        <div className={cn(classes.sellerTitleContainer, 'border-b border-gray-100')}>
+                            {/* <input type="checkbox" className={classes.sellerCheckbox} onChange={handleSellerToCheckout(seller.seller_url, null)}/> */}
+                            <Link
+                                to={resourceUrl('/seller/' + seller.seller_url)}
+                                className={classes.seller_title}
+                            ><span style={{
+                                "display": "flex",
+                                "gap": "7px"
+                            }}>
+                                <span style={{"paddingTop": "2px"}}><Shop size="20" color="#999999" /></span>
+                                 {seller?.seller_name}<span style={{"paddingTop": "3px"}}><ArrowRight2 size="18" color="#999999" /></span></span></Link>
+                        </div>
+                        {productComponents}
+                        <div className={classes.summary_container}>
+                            <div className={classes.summary_contents}>
+                                {priceSummary}
+                            </div>
+                        </div>
+                    </div>
+                </ul>
+                <Suspense fallback={null}>
+                    <EditModal
+                        item={activeEditItem}
+                        setIsCartUpdating={setIsCartUpdating}
+                        setActiveEditItem={setActiveEditItem}
+                    />
+                </Suspense>
+            </Fragment>
+        );
+    }
+
+    return null;
+};
+
+export default ProductListingBySeller;

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/productListingBySeller.module.css

@@ -0,0 +1,33 @@
+.root {
+    display: grid;
+    gap: 1rem 0.5rem;
+}
+
+.errorText {
+    line-height: 1.5;
+    margin-bottom: 0.25rem;
+    color: #dc3545;
+}
+
+.seller_title {
+    font-weight: 500;
+    font-size: 16px;
+    /* padding-left: 10px; */
+}
+
+.sellerTitleContainer {
+    display: block;
+    padding: 15px 0px 15px 0px;
+    border-bottom-width: 2px;
+}
+
+.sellerCheckbox {
+    width: 19px;
+    height: 19px;
+    vertical-align: text-bottom;
+    /* appearance: none; */
+    border: 1px solid #d7d7d7;
+    border-radius: 5px;
+    /* outline: none; */
+    cursor: pointer;
+}

package/src/overwrites/venia-ui/lib/components/CartPage/cartPage.js

@@ -62,11 +62,17 @@ const CartPage = props => {
         return fullPageLoadingIndicator;
     }
 
+    const priceSummary = hasItems ? (
+        <PriceSummary isUpdating={isCartUpdating} />
+    ) : null;
+
     const productListing = hasItems ? (
         <ProductListing
             onAddToWishlistSuccess={onAddToWishlistSuccess}
             setIsCartUpdating={setIsCartUpdating}
             fetchCartDetails={fetchCartDetails}
+            isCartUpdating={isCartUpdating}
+            hasItems={hasItems}
         />
     ) : (
         <h3>
@@ -81,10 +87,7 @@ const CartPage = props => {
         <PriceAdjustments setIsCartUpdating={setIsCartUpdating} />
     ) : null;
 
-    const priceSummary = hasItems ? (
-        <PriceSummary isUpdating={isCartUpdating} />
-    ) : null;
-
+    
     return (
         <div className={classes.root} data-cy="CartPage-root">
             <StoreTitle>
@@ -110,14 +113,14 @@ const CartPage = props => {
             </div>
             <div className={classes.body}>
                 <div className={classes.items_container}>{productListing}</div>
-                <div className={classes.price_adjustments_container}>
+                {/* <div className={classes.price_adjustments_container}>
                     {priceAdjustments}
-                </div>
-                <div className={classes.summary_container}>
+                </div> */}
+                {/* <div className={classes.summary_container}>
                     <div className={classes.summary_contents}>
                         {priceSummary}
                     </div>
-                </div>
+                </div> */}
             </div>
         </div>
     );

package/src/overwrites/venia-ui/lib/components/CartPage/cartPage.module.css

@@ -4,7 +4,7 @@
 }
 
 .body {
-    composes: grid from global;
+    /* composes: grid from global; */
     composes: gap-md from global;
     grid-template-columns: 1fr 18rem;
     /* The summary grid item spans the entire right column. */