@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useEditModal } from '@magento/peregrine/lib/talons/CartPage/ProductListing/EditModal/useEditModal';
+
+import ProductForm from './productForm';
+
+/**
+ * A child component of the ProductListing component.
+ * This component renders an edit modal for a product.
+ *
+ * @param {Object} props
+ * @param {Object} props.item Product to edit.
+ * @param {function} props.setActiveEditItem Function for setting the actively editing item
+ * See [productListingFragments.js]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/ProductListing/productListingFragments.js}
+ * for a list of properties for this object.
+ * @param {Function} props.setIsCartUpdating Function for setting the updating state of the cart.
+ * @param {Object} props.classes CSS className overrides.
+ * See [editModal.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/editModal.module.css}
+ * for a list of classes you can override.
+ *
+ * @returns {React.Element}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import EditModal from "@magento/venia-ui/lib/components/CartPage/ProductListing/EditModal";
+ */
+const EditModal = props => {
+    const { item, setActiveEditItem, setIsCartUpdating } = props;
+    const talonProps = useEditModal();
+    const { setVariantPrice, variantPrice } = talonProps;
+
+    return (
+        <ProductForm
+            item={item}
+            setIsCartUpdating={setIsCartUpdating}
+            setVariantPrice={setVariantPrice}
+            variantPrice={variantPrice}
+            setActiveEditItem={setActiveEditItem}
+        />
+    );
+};
+
+export default EditModal;

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

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

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Price from '@magento/venia-ui/lib/components/Price';
+import configuredVariant from '@magento/peregrine/lib/util/configuredVariant';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Image from '@magento/venia-ui/lib/components/Image';
+import defaultClasses from './productDetail.module.css';
+
+const IMAGE_SIZE = 240;
+
+const ProductDetail = props => {
+    const { item, variantPrice, configurableThumbnailSource } = props;
+    const { formatMessage } = useIntl();
+    const { prices, product } = item;
+    const { price } = prices;
+    const { currency, value: unitPrice } = variantPrice || price;
+    const { name, sku, stock_status: stockStatusValue } = product;
+    const stockStatusLabels = new Map([
+        [
+            'IN_STOCK',
+            formatMessage({
+                id: 'productDetail.inStock',
+                defaultMessage: 'In stock'
+            })
+        ],
+        [
+            'OUT_OF_STOCK',
+            formatMessage({
+                id: 'productDetail.outOfStock',
+                defaultMessage: 'Out of stock'
+            })
+        ]
+    ]);
+    const stockStatus =
+        stockStatusLabels.get(stockStatusValue) ||
+        formatMessage({
+            id: 'productDetail.unknown',
+            defaultMessage: 'Unknown'
+        });
+    const classes = useStyle(defaultClasses, props.classes);
+    const configured_variant = configuredVariant(
+        item.configurable_options,
+        product
+    );
+    return (
+        <div className={classes.root}>
+            <Image
+                alt={name}
+                classes={{
+                    image: classes.image,
+                    root: classes.imageContainer
+                }}
+                width={IMAGE_SIZE}
+                resource={
+                    configurableThumbnailSource === 'itself' &&
+                        configured_variant
+                        ? configured_variant.small_image.url
+                        : product.small_image.url
+                }
+            />
+            <span className={classes.productName}>{name}</span>
+            <div className={classes.stockRow}>
+                <span>
+                    <FormattedMessage
+                        id={'productDetail.skuNumber'}
+                        defaultMessage={'SKU # {sku}'}
+                        values={{ sku }}
+                    />
+                </span>
+                <span>{stockStatus}</span>
+            </div>
+            <div className={classes.price}>
+                <Price currencyCode={currency} value={unitPrice} />
+            </div>
+        </div>
+    );
+};
+
+export default ProductDetail;

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

@@ -0,0 +1,33 @@
+.root {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: pb-xs from global;
+}
+
+.imageContainer {
+    composes: justify-self-center from global;
+}
+
+.image {
+    composes: px-md from global;
+    composes: py-0 from global;
+}
+
+.productName {
+    composes: font-medium from global;
+    composes: text-xl from global;
+}
+
+.stockRow {
+    composes: flex from global;
+    composes: font-light from global;
+    composes: justify-between from global;
+    composes: text-sm from global;
+}
+
+.price {
+    composes: font-medium from global;
+}

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

@@ -0,0 +1,153 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useProductForm } from '@magento/peregrine/lib/talons/CartPage/ProductListing/EditModal/useProductForm';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import Options from '@magento/venia-ui/lib/components/ProductOptions';
+import QuantityStepper from '@magento/venia-ui/lib/components/QuantityStepper';
+import defaultClasses from './productForm.module.css';
+import Dialog from '@magento/venia-ui/lib/components/Dialog';
+import ProductDetail from './productDetail';
+
+const ProductForm = props => {
+    const {
+        item: cartItem,
+        setIsCartUpdating,
+        variantPrice,
+        setVariantPrice,
+        setActiveEditItem
+    } = props;
+    const { formatMessage } = useIntl();
+    const talonProps = useProductForm({
+        cartItem,
+        setIsCartUpdating,
+        setVariantPrice,
+        setActiveEditItem
+    });
+    const {
+        configItem,
+        errors,
+        handleOptionSelection,
+        handleSubmit,
+        outOfStockVariants,
+        isLoading,
+        isSaving,
+        isDialogOpen,
+        handleClose,
+        configurableThumbnailSource
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const dialogButtonsDisabled = isLoading;
+    const dialogSubmitButtonDisabled = isSaving;
+    const dialogFormProps = {
+        initialValues: cartItem
+    };
+
+    const message = isLoading
+        ? formatMessage({
+            id: 'productForm.fetchingProductOptions',
+            defaultMessage: 'Fetching Product Options...'
+        })
+            ? isSaving
+            : formatMessage({
+                id: 'productForm.updatingCart',
+                defaultMessage: 'Updating Cart...'
+            })
+        : null;
+
+    const maybeLoadingIndicator =
+        isLoading || isSaving ? (
+            <LoadingIndicator
+                classes={{
+                    root: classes.loading
+                }}
+            >
+                {message}
+            </LoadingIndicator>
+        ) : null;
+
+    if (cartItem && !isLoading && !configItem) {
+        return (
+            <span className={classes.dataError}>
+                <FormattedMessage
+                    id={'productForm.dataError'}
+                    defaultMessage={
+                        'Something went wrong. Please refresh and try again.'
+                    }
+                />
+            </span>
+        );
+    }
+
+    const dialogContent =
+        cartItem && configItem ? (
+            <div>
+                <FormError
+                    classes={{
+                        root: classes.errorContainer
+                    }}
+                    errors={Array.from(errors.values())}
+                    scrollOnError={false}
+                    allowErrorMessages={true}
+                />
+                <ProductDetail
+                    item={cartItem}
+                    variantPrice={variantPrice}
+                    configurableThumbnailSource={configurableThumbnailSource}
+                />
+                <Options
+                    classes={{
+                        root: classes.optionRoot
+                    }}
+                    onSelectionChange={handleOptionSelection}
+                    options={configItem.configurable_options}
+                    selectedValues={cartItem.configurable_options}
+                    outOfStockVariants={outOfStockVariants}
+                />
+                <h3 className={classes.quantityLabel}>
+                    <FormattedMessage
+                        id={'productForm.quantity'}
+                        defaultMessage={'Quantity'}
+                    />
+                </h3>
+                <QuantityStepper
+                    classes={{
+                        root: classes.quantityRoot
+                    }}
+                    initialValue={cartItem.quantity}
+                    itemId={cartItem.id}
+                />
+            </div>
+        ) : null;
+
+    return (
+        <Fragment>
+            <Dialog
+                classes={{
+                    contents: classes.contents
+                }}
+                confirmText={'Update'}
+                confirmTranslationId={'productForm.submit'}
+                formProps={dialogFormProps}
+                isOpen={isDialogOpen}
+                onCancel={handleClose}
+                onConfirm={handleSubmit}
+                shouldDisableAllButtons={dialogButtonsDisabled}
+                shouldDisableConfirmButton={dialogSubmitButtonDisabled}
+                shouldUnmountOnHide={false}
+                title={formatMessage({
+                    id: 'editModal.headerText',
+                    defaultMessage: 'Edit Item'
+                })}
+            >
+                {maybeLoadingIndicator}
+                {dialogContent}
+            </Dialog>
+        </Fragment>
+    );
+};
+
+export default ProductForm;

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-medium 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-medium 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,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-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-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}
+`;