@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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

@@ -0,0 +1,123 @@
+import React, { Fragment } 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';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import { ChevronDown as ArrowDown, ChevronUp as ArrowUp } from 'react-feather';
+import defaultClasses from './discountSummary.module.css';
+import AnimateHeight from 'react-animate-height';
+import { useDiscountSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/useDiscountSummary';
+
+const MINUS_SYMBOL = '-';
+
+/**
+ * A component that renders the discount summary line item.
+ *
+ * @param {Object} props.classes
+ * @param {Object} props.data fragment response data
+ */
+const DiscountSummary = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
+
+    const {
+        totalDiscount,
+        discountData,
+        expanded,
+        handleClick
+    } = useDiscountSummary(props);
+
+    const toggleDiscountsAriaLabel = expanded
+        ? formatMessage({
+            id: 'priceSummary.discountSummary.hideDiscounts',
+            defaultMessage: 'Hide individual discounts.'
+        })
+        : formatMessage({
+            id: 'priceSummary.discountSummary.showDiscounts',
+            defaultMessage: 'Show individual discounts.'
+        });
+
+    const iconSrc = expanded ? ArrowUp : ArrowDown;
+
+    const individualDiscounts = discountData ? (
+        <AnimateHeight duration={500} height={expanded ? 'auto' : 0}>
+            <ul
+                className={classes.individualDiscountsList}
+                data-cy="DiscountSummary-IndividualDiscount"
+            >
+                <hr className={classes.individualDiscountSeparator} />
+                {discountData.map(discount => {
+                    if (discount.label != 'Gift Cards') {
+                        return (
+                            <li
+                                className={
+                                    classes.individualDiscountsListLineItem
+                                }
+                                key={discount.label}
+                            >
+                                <span
+                                    className={classes.lineItemLabel}
+                                    data-cy="DiscountSummary-IndividualDiscount-Label"
+                                >
+                                    <span data-cy="DiscountSummary-IndividualDiscount-DiscountLabel">
+                                        {discount.label}
+                                    </span>
+                                </span>
+                                <span
+                                    data-cy="DiscountSummary-IndividualDiscount-DiscountValue"
+                                    className={classes.price}
+                                >
+                                    {MINUS_SYMBOL}
+                                    <Price
+                                        value={discount.amount.value}
+                                        currencyCode={discount.amount.currency}
+                                    />
+                                </span>
+                            </li>
+                        );
+                    }
+                })}
+                <hr className={classes.individualDiscountSeparator} />
+            </ul>
+        </AnimateHeight>
+    ) : null;
+
+    return totalDiscount.value ? (
+        <Fragment>
+            <li className={classes.discountLineItems}>
+                <span
+                    className={classes.discountLineItemLabel}
+                    data-cy="PriceSummary-DiscountSummary-Label"
+                >
+                    <FormattedMessage
+                        id={'discountSummary.lineItemLabel'}
+                        defaultMessage={'Applied discounts'}
+                    />
+                    <button
+                        onClick={handleClick}
+                        data-cy="DiscountSummary-DiscountValue-TriggerButton"
+                        type="button"
+                        aria-expanded={expanded}
+                        aria-label={toggleDiscountsAriaLabel}
+                        className={classes.discountsButton}
+                    >
+                        <Icon src={iconSrc} />
+                    </button>
+                </span>
+                <span
+                    data-cy="DiscountSummary-discountValue"
+                    className={classes.price}
+                >
+                    {MINUS_SYMBOL}
+                    <Price
+                        value={totalDiscount.value}
+                        currencyCode={totalDiscount.currency}
+                    />
+                </span>
+            </li>
+            {individualDiscounts}
+        </Fragment>
+    ) : null;
+};
+
+export default DiscountSummary;

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

@@ -0,0 +1,40 @@
+.root {
+}
+
+.discountsButton {
+    composes: grid from global;
+    composes: items-center from global;
+    composes: ml-2 from global;
+}
+
+.discountLineItems {
+    composes: lineItems from './priceSummary.module.css';
+
+    composes: items-center from global;
+}
+
+.discountLineItemLabel {
+    composes: lineItemLabel from './priceSummary.module.css';
+
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+}
+
+.individualDiscountSeparator {
+    composes: mx-0 from global;
+    composes: my-4 from global;
+
+    color: rgb(var(--venia-global-color-gray-300));
+}
+.individualDiscountsList {
+    composes: lineItemLabel from './priceSummary.module.css';
+}
+
+.individualDiscountsListLineItem {
+    composes: lineItems from './priceSummary.module.css';
+    composes: mx-0 from global;
+    composes: pl-4 from global;
+
+    color: rgb(var(--venia-global-color-gray-700));
+}

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

@@ -0,0 +1 @@
+export default () => null;

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

@@ -0,0 +1,60 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import Price from '@magento/venia-ui/lib/components/Price';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+const MINUS_SYMBOL = '-';
+
+const DEFAULT_AMOUNT = {
+    currency: 'USD',
+    value: 0
+};
+
+/**
+ * Reduces applied gift card amounts into a single amount.
+ *
+ * @param {Array} cards
+ */
+const getGiftCards = (cards = []) => {
+    if (!cards.length) {
+        return DEFAULT_AMOUNT;
+    } else {
+        return {
+            currency: cards[0].applied_balance.currency,
+            value: cards.reduce(
+                (acc, card) => acc + card.applied_balance.value,
+                0
+            )
+        };
+    }
+};
+
+/**
+ * A component that renders the gift card summary line item.
+ *
+ * @param {Object} props.classes
+ * @param {Object} props.data fragment response data
+ */
+export default props => {
+    const classes = useStyle({}, props.classes);
+    const cards = getGiftCards(props.data);
+
+    return cards.value ? (
+        <Fragment>
+            <span
+                className={classes.lineItemLabel}
+                data-cy="PriceSummary-GiftCardSummary-label"
+            >
+                <FormattedMessage
+                    id={'giftCardSummary.lineItemLabel'}
+                    defaultMessage={'Gift Card(s) applied'}
+                />
+            </span>
+            <span className={classes.price}>
+                {MINUS_SYMBOL}
+                <Price value={cards.value} currencyCode={cards.currency} />
+            </span>
+        </Fragment>
+    ) : null;
+};

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

@@ -0,0 +1,5 @@
+/**
+ * Gift Options Prices are an AC-only feature.
+ * Here in MOS, don't render the component at all.
+ */
+export default () => null;

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

@@ -0,0 +1,40 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Price from '@magento/venia-ui/lib/components/Price';
+
+/**
+ * A component that renders the gift options summary line item.
+ *
+ * @param {Object} props.classes
+ * @param {Object} props.data fragment response data
+ */
+export default props => {
+    const classes = useStyle({}, props.classes);
+    const giftOptions = props?.data?.printed_card || {};
+
+    if (!giftOptions || !giftOptions.value) {
+        return null;
+    }
+
+    return (
+        <Fragment>
+            <span
+                className={classes.lineItemLabel}
+                data-cy="PriceSummary-GiftOptionsSummary-label"
+            >
+                <FormattedMessage
+                    id={'giftOptionsSummary.lineItemLabel'}
+                    defaultMessage={'Printed Card'}
+                />
+            </span>
+            <span className={classes.price}>
+                <Price
+                    value={giftOptions.value}
+                    currencyCode={giftOptions.currency}
+                />
+            </span>
+        </Fragment>
+    );
+};

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

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

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-medium 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-medium from global;
+}
+
+.totalPrice {
+    composes: price;
+    composes: font-medium 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;