@riosst100/pwa-marketplace 1.8.8 → 1.9.0

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

@@ -0,0 +1,210 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Price from '@magento/venia-ui/lib/components/Price';
+import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';
+import Button from '@magento/venia-ui/lib/components/Button';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './priceSummary.module.css';
+import DiscountSummary from './discountSummary';
+import GiftCardSummary from './giftCardSummary';
+import GiftOptionsSummary from './giftOptionsSummary';
+import ShippingSummary from './shippingSummary';
+import TaxSummary from './taxSummary';
+import cn from 'classnames';
+
+/**
+ * A child component of the CartPage component.
+ * This component fetches and renders cart data, such as subtotal, discounts applied,
+ * gift cards applied, tax, shipping, and cart total.
+ *
+ * @param {Object} props
+ * @param {Object} props.classes CSS className overrides.
+ * See [priceSummary.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.module.css}
+ * for a list of classes you can override.
+ *
+ * @returns {React.Element}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import PriceSummary from "@magento/venia-ui/lib/components/CartPage/PriceSummary";
+ */
+const PriceSummary = props => {
+    const { isUpdating } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const talonProps = usePriceSummary();
+
+    const {
+        handleProceedToCheckout,
+        handleEnterKeyPress,
+        hasError,
+        hasItems,
+        isCheckout,
+        isLoading,
+        flatData
+    } = talonProps;
+    const { formatMessage } = useIntl();
+
+    if (hasError) {
+        return (
+            <div className={classes.root}>
+                <span className={classes.errorText}>
+                    <FormattedMessage
+                        id={'priceSummary.errorText'}
+                        defaultMessage={
+                            'Something went wrong. Please refresh and try again.'
+                        }
+                    />
+                </span>
+            </div>
+        );
+    } else if (!hasItems) {
+        return null;
+    }
+
+    const {
+        subtotal,
+        total,
+        discounts,
+        giftCards,
+        giftOptions,
+        taxes,
+        shipping
+    } = flatData;
+
+    const isPriceUpdating = isUpdating || isLoading;
+    const priceClass = isPriceUpdating ? classes.priceUpdating : classes.price;
+    const totalPriceClass = isPriceUpdating
+        ? classes.priceUpdating
+        : classes.totalPrice;
+
+    const totalPriceLabel = isCheckout
+        ? formatMessage({
+            id: 'priceSummary.total',
+            defaultMessage: 'Total'
+        })
+        : formatMessage({
+            id: 'priceSummary.estimatedTotal',
+            defaultMessage: 'Estimated Total'
+        });
+
+    const proceedToCheckoutButton = !isCheckout ? (
+        <div className={cn(classes.checkoutButton_container, 'block !mt-6 !min-h-auto')}>
+            <Button
+                disabled={isPriceUpdating}
+                priority={'high'}
+                onClick={handleProceedToCheckout}
+                onKeyDown={handleEnterKeyPress}
+                data-cy="PriceSummary-checkoutButton"
+                classes={{
+                    rootClass: 'w-full',
+                    content: 'font-medium text-[16px] capitalize',
+                }}
+            >
+                <FormattedMessage
+                    id={'priceSummary.checkoutButton'}
+                    defaultMessage={'Checkout'}
+                />
+            </Button>
+        </div>
+    ) : null;
+
+    return (
+        <div className={cn(classes.root, 'border border-gray-100 rounded-md p-6')} data-cy="PriceSummary-root">
+            <div>
+                <p className='text-[16px] front font-semibold mb-4'>
+                    <FormattedMessage
+                        id={'priceSummary.summaryLabel'}
+                        defaultMessage={'Summary'}
+                    />
+                </p>
+                <ul>
+                    <li className={classes.lineItems}>
+                        <span
+                            data-cy="PriceSummary-lineItemLabel"
+                            className={classes.lineItemLabel}
+                        >
+                            <FormattedMessage
+                                id={'priceSummary.lineItemLabel'}
+                                defaultMessage={'Subtotal'}
+                            />
+                        </span>
+                        <span
+                            data-cy="PriceSummary-subtotalValue"
+                            className={priceClass}
+                        >
+                            <Price
+                                value={subtotal.value}
+                                currencyCode={subtotal.currency}
+                            />
+                        </span>
+                    </li>
+                    <DiscountSummary
+                        classes={{
+                            lineItems: classes.lineItems,
+                            lineItemLabel: classes.lineItemLabel,
+                            price: priceClass
+                        }}
+                        data={discounts}
+                    />
+                    <li className={classes.lineItems}>
+                        <GiftCardSummary
+                            classes={{
+                                lineItemLabel: classes.lineItemLabel,
+                                price: priceClass
+                            }}
+                            data={giftCards}
+                        />
+                    </li>
+                    <li className={classes.lineItems}>
+                        <GiftOptionsSummary
+                            classes={{
+                                lineItemLabel: classes.lineItemLabel,
+                                price: priceClass
+                            }}
+                            data={giftOptions}
+                        />
+                    </li>
+                    <li className={classes.lineItems}>
+                        <TaxSummary
+                            classes={{
+                                lineItemLabel: classes.lineItemLabel,
+                                price: priceClass
+                            }}
+                            data={taxes}
+                            isCheckout={isCheckout}
+                        />
+                    </li>
+                    <li className={classes.lineItems}>
+                        <ShippingSummary
+                            classes={{
+                                lineItemLabel: classes.lineItemLabel,
+                                price: priceClass
+                            }}
+                            data={shipping}
+                            isCheckout={isCheckout}
+                        />
+                    </li>
+                    <li className={classes.lineItems}>
+                        <span
+                            data-cy="PriceSummary-totalLabel"
+                            className={classes.totalLabel}
+                        >
+                            {totalPriceLabel}
+                        </span>
+                        <span
+                            data-cy="PriceSummary-totalValue"
+                            className={totalPriceClass}
+                        >
+                            <Price
+                                value={total.value}
+                                currencyCode={total.currency}
+                            />
+                        </span>
+                    </li>
+                </ul>
+            </div>
+            {proceedToCheckoutButton}
+        </div>
+    );
+};
+
+export default PriceSummary;

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

@@ -0,0 +1,51 @@
+.root {}
+
+.errorText {
+    composes: leading-normal from global;
+    composes: text-error from global;
+}
+
+.lineItems {
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
+    composes: leading-normal from global;
+}
+
+.lineItemLabel {
+    composes: justify-self-start from global;
+    composes: mb-3 from global;
+    composes: font-medium from global;
+    composes: text-[14px] from global;
+}
+
+.price {
+    composes: justify-self-end from global;
+    composes: self-center from global;
+    composes: text-[14px] from global;
+}
+
+.totalLabel {
+    composes: lineItemLabel;
+    composes: font-semibold from global;
+}
+
+.totalPrice {
+    composes: price;
+    composes: font-semibold from global;
+}
+
+.priceUpdating {
+    composes: price;
+    composes: opacity-0 from global;
+    composes: text-[14px] from global;
+}
+
+.checkoutButton_container {
+    composes: items-center from global;
+    composes: inline-flex from global;
+    composes: justify-center from global;
+    composes: mt-xs from global;
+    composes: w-full from global;
+    min-height: 5.5rem;
+}

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Price from '@magento/venia-ui/lib/components/Price';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+/**
+ * A component that renders the shipping summary line item after address and
+ * method are selected
+ *
+ * @param {Object} props.classes
+ * @param {Object} props.data fragment response data
+ */
+const ShippingSummary = props => {
+    const classes = useStyle({}, props.classes);
+    const { data, isCheckout } = props;
+    const { formatMessage } = useIntl();
+
+    // Don't render estimated shipping until an address has been provided and
+    // a method has been selected.
+    if (!data.length || !data[0].selected_shipping_method) {
+        return null;
+    }
+
+    const shipping = data[0].selected_shipping_method.amount;
+
+    const shippingLabel = isCheckout
+        ? formatMessage({
+            id: 'shippingSummary.shipping',
+            defaultMessage: 'Shipping'
+        })
+        : formatMessage({
+            id: 'shippingSummary.estimatedShipping',
+            defaultMessage: 'Estimated Shipping'
+        });
+
+    // For a value of "0", display "FREE".
+    const price = shipping.value ? (
+        <Price value={shipping.value} currencyCode={shipping.currency} />
+    ) : (
+        <span>
+            <FormattedMessage id={'global.free'} defaultMessage={'FREE'} />
+        </span>
+    );
+
+    return (
+        <>
+            <span className={classes.lineItemLabel}>{shippingLabel}</span>
+            <span
+                data-cy="ShippingSummary-shippingValue"
+                className={classes.price}
+            >
+                {price}
+            </span>
+        </>
+    );
+};
+
+export default ShippingSummary;

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import Price from '@magento/venia-ui/lib/components/Price';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+/**
+ * Reduces applied tax amounts into a single amount.
+ *
+ * @param {Array} applied_taxes
+ */
+const getEstimatedTax = (applied_taxes = []) => {
+    return {
+        currency: applied_taxes[0].amount.currency,
+        value: applied_taxes.reduce((acc, tax) => acc + tax.amount.value, 0)
+    };
+};
+
+/**
+ * A component that renders the tax summary line item.
+ *
+ * @param {Object} props.classes
+ * @param {Object} props.data query response data
+ */
+const TaxSummary = props => {
+    const classes = useStyle({}, props.classes);
+    const { data, isCheckout } = props;
+    const { formatMessage } = useIntl();
+
+    // Don't render estimated taxes until an address has been provided which
+    // causes the server to apply a tax value to the cart.
+    if (!data.length) {
+        return null;
+    }
+
+    const taxLabel = isCheckout
+        ? formatMessage({
+            id: 'taxSummary.tax',
+            defaultMessage: 'Tax'
+        })
+        : formatMessage({
+            id: 'taxSummary.estimatedTax',
+            defaultMessage: 'Estimated Tax'
+        });
+
+    const tax = getEstimatedTax(props.data);
+
+    return (
+        <>
+            <span className={classes.lineItemLabel}>{taxLabel}</span>
+            <span data-cy="TaxSummary-taxValue" className={classes.price}>
+                <Price value={tax.value} currencyCode={tax.currency} />
+            </span>
+        </>
+    );
+};
+
+export default TaxSummary;

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-semibold 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-semibold 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;