@riosst100/pwa-marketplace 1.8.8 → 1.9.0

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/EditModal/productForm.module.css

@@ -0,0 +1,52 @@
+.contents {
+    composes: contents from '@magento/venia-ui/lib/components/Dialog/dialog.module.css';
+
+    composes: relative from global;
+}
+
+.optionRoot {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
+}
+
+.quantityLabel {
+    composes: font-semibold from global;
+    composes: leading-normal from global;
+    composes: mb-sm from global;
+    composes: pt-xs from global;
+    composes: text-colorDefault from global;
+}
+
+.quantityRoot {
+    composes: root from '@magento/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css';
+    grid-template-columns: auto 4rem auto;
+    composes: justify-start from global;
+    composes: px-xs from global;
+    composes: py-0 from global;
+}
+
+.loading {
+    composes: root from '@magento/venia-ui/lib/components/LoadingIndicator/indicator.module.css';
+
+    composes: absolute from global;
+    composes: h-unset from global;
+    composes: left-0 from global;
+    composes: text-center from global;
+    composes: top-2/4 from global;
+    composes: z-mask from global;
+    transform: translateY(-50%);
+}
+
+.dataError {
+    composes: inline-block from global;
+    composes: leading-normal from global;
+    composes: pt-xs from global;
+    composes: text-error from global;
+}
+
+.errorContainer {
+    composes: pt-xs from global;
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './errorMessage.module.css';
+
+const ErrorMessage = props => {
+    const { error } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    if (!error || !error.message) {
+        return null;
+    }
+
+    return <div className={classes.root}>{error.message}</div>;
+};
+
+ErrorMessage.defaultProps = {
+    classes: null,
+    error: null
+};
+
+ErrorMessage.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    error: shape({
+        message: string
+    })
+};
+
+export default ErrorMessage;

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

@@ -0,0 +1,13 @@
+.root {
+    composes: border-l-4 from global;
+    composes: border-solid from global;
+    composes: border-error from global;
+    composes: font-semibold from global;
+    composes: leading-normal from global;
+    composes: mb-xs from global;
+    composes: pl-xs from global;
+    composes: pr-0 from global;
+    composes: py-xs from global;
+    composes: text-error from global;
+    composes: text-sm from global;
+}

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

@@ -0,0 +1 @@
+export { default } from './productListing';

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

@@ -0,0 +1,271 @@
+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-medium 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-semibold text-right mb-5')} data-cy="Product-price">
+                        <Price currencyCode={currency} value={unitPrice} />
+                        {/* <FormattedMessage
+                            id={'product.price'}
+                            defaultMessage={' ea.'}
+                        /> */}
+                    </span>
+                    <div className={classes.quantity}>
+                        <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'>
+                {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/ProductListing/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-semibold 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-semibold 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/ProductListing/productListing.js

@@ -0,0 +1,94 @@
+import React, { Fragment, Suspense } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useProductListing } from '@magento/peregrine/lib/talons/CartPage/ProductListing/useProductListing';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import defaultClasses from './productListing.module.css';
+import Product from './product';
+import ErrorMessage from './errorMessage';
+import cn from 'classnames';
+
+const EditModal = React.lazy(() => import('./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 ProductListing = props => {
+    const {
+        onAddToWishlistSuccess,
+        setIsCartUpdating,
+        fetchCartDetails
+    } = props;
+
+    const talonProps = useProductListing();
+
+    const {
+        activeEditItem,
+        isLoading,
+        error,
+        items,
+        setActiveEditItem,
+        wishlistConfig
+    } = 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}
+            />
+        ));
+
+        return (
+            <Fragment>
+                <ErrorMessage error={error} />
+                <ul className={cn(classes.root, 'border border-gray-100 rounded-md')} data-cy="ProductListing-root">
+                    <div className='px-4'>
+                        {productComponents}
+                    </div>
+                </ul>
+                <Suspense fallback={null}>
+                    <EditModal
+                        item={activeEditItem}
+                        setIsCartUpdating={setIsCartUpdating}
+                        setActiveEditItem={setActiveEditItem}
+                    />
+                </Suspense>
+            </Fragment>
+        );
+    }
+
+    return null;
+};
+
+export default ProductListing;

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

@@ -0,0 +1,11 @@
+.root {
+    composes: gap-x-md from global;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+}
+
+.errorText {
+    composes: leading-normal from global;
+    composes: mb-xs from global;
+    composes: text-error from global;
+}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Form } from 'informed';
+import { func, number, string } from 'prop-types';
+import QuantityStepper from '@magento/venia-ui/lib/components/QuantityStepper';
+
+const Quantity = props => {
+    return (
+        <Form
+            initialValues={{
+                quantity: props.initialValue
+            }}
+        >
+            <QuantityStepper {...props} />
+        </Form>
+    );
+};
+
+Quantity.propTypes = {
+    initialValue: number,
+    itemId: string,
+    label: string,
+    min: number,
+    onChange: func,
+    message: string
+};
+
+Quantity.defaultProps = {
+    label: 'Quantity',
+    min: 0,
+    initialValue: 1,
+    onChange: () => { }
+};
+
+/**
+ * @deprecated - moved to component directory in 12.4.0
+ * @see QuantityStepper
+ */
+export const QuantityFields = QuantityStepper;
+
+export default Quantity;