@riosst100/pwa-marketplace 1.8.8 → 1.9.0

package/src/overwrites/venia-ui/lib/components/AccountMenu/accountMenuItems.module.css

@@ -0,0 +1,31 @@
+.root {
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: justify-stretch from global;
+    composes: p-sm from global;
+}
+
+.link {
+    composes: cursor-pointer from global;
+    composes: font-semibold from global;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-start from global;
+    composes: leading-tight from global;
+    composes: max-w-full from global;
+    composes: no-underline from global;
+    composes: pointer-events-auto from global;
+    composes: text-subtle from global;
+
+    composes: hover_text-colorDefault from global;
+}
+
+.signOut {
+    composes: link;
+
+    composes: border-t-2 from global;
+    composes: border-solid from global;
+    composes: border-light from global;
+    composes: pt-xs from global;
+}

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

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

package/src/overwrites/venia-ui/lib/components/Button/button.js

@@ -47,7 +47,7 @@ const Button = props => {
     return (
         <button
             ref={buttonRef}
-            className={rootClassName}
+            className={cn(rootClassName, classes.rootClass)}
             {...buttonProps}
             {...restProps}
         >

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

@@ -0,0 +1,50 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { useGiftCard } from '@magento/peregrine/lib/talons/CartPage/GiftCards/useGiftCard.js';
+import Price from '@magento/venia-ui/lib/components/Price';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './giftCard.module.css';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+
+const GiftCard = props => {
+    const { code, currentBalance, isRemovingCard, removeGiftCard } = props;
+
+    const { removeGiftCardWithCode } = useGiftCard({
+        code,
+        removeGiftCard
+    });
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <Fragment>
+            <div className={classes.card_info}>
+                <span className={classes.code}>{code}</span>
+                <span className={classes.balance}>
+                    <FormattedMessage
+                        id={'giftCard.balance'}
+                        defaultMessage={'Balance: '}
+                    />
+                    <Price
+                        value={currentBalance.value}
+                        currencyCode={currentBalance.currency}
+                    />
+                </span>
+            </div>
+            <LinkButton
+                disabled={isRemovingCard}
+                onClick={removeGiftCardWithCode}
+                data-cy="GiftCards-GiftCard-removeButton"
+            >
+                <FormattedMessage
+                    id={'giftCard.remove'}
+                    defaultMessage={'Remove'}
+                />
+            </LinkButton>
+        </Fragment>
+    );
+};
+
+export default GiftCard;

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

@@ -0,0 +1,11 @@
+.card_info {
+    composes: grid from global;
+    composes: gap-y-2xs from global;
+}
+
+.balance {
+    composes: text-sm from global;
+}
+
+.code {
+}

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

@@ -0,0 +1,238 @@
+import React, { useEffect } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Form } from 'informed';
+import { AlertCircle as AlertCircleIcon } from 'react-feather';
+
+import { useGiftCards } from '@magento/peregrine/lib/talons/CartPage/GiftCards/useGiftCards';
+import { Price, useToasts } from '@magento/peregrine';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Field from '@magento/venia-ui/lib/components/Field';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import defaultClasses from './giftCards.module.css';
+import GiftCard from './giftCard';
+
+const errorIcon = (
+    <Icon
+        src={AlertCircleIcon}
+        attrs={{
+            width: 18
+        }}
+    />
+);
+
+/**
+ * GiftCards is a child component of the CartPage component.
+ * This component shows a form for applying gift cards along with a list of applied
+ * Gift Cards in the shopping cart.
+ *
+ * @param {Object} props Component props
+ * @param {Function} props.setIsCartUpdating Callback function to call when adding or removing a gift card
+ * @param {Object} props.classes CSS className overrides.
+ * See [giftCards.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css}
+ * for a list of classes you can override.
+ *
+ * @returns {React.Element}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import GiftCards from '@magento/venia-ui/lib/components/CartPage/GiftCards';
+ */
+const GiftCards = props => {
+    const talonProps = useGiftCards({
+        setIsCartUpdating: props.setIsCartUpdating
+    });
+    const {
+        applyGiftCard,
+        checkBalanceData,
+        checkGiftCardBalance,
+        checkGiftCardBalanceKeyPress,
+        errorLoadingGiftCards,
+        errorRemovingCard,
+        giftCardsData,
+        handleEnterKeyPress,
+        isLoadingGiftCards,
+        isApplyingCard,
+        isCheckingBalance,
+        isRemovingCard,
+        removeGiftCard,
+        shouldDisplayCardBalance,
+        shouldDisplayCardError
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
+    const [, { addToast }] = useToasts();
+    useEffect(() => {
+        if (errorRemovingCard) {
+            addToast({
+                type: 'error',
+                icon: errorIcon,
+                message: formatMessage({
+                    id: 'giftCards.errorRemoving',
+                    defaultMessage:
+                        'Unable to remove gift card. Please try again.'
+                }),
+                dismissable: true,
+                timeout: 7000
+            });
+        }
+    }, [addToast, errorRemovingCard, formatMessage]);
+
+    if (isLoadingGiftCards) {
+        return (
+            <LoadingIndicator>
+                <FormattedMessage
+                    id={'giftCards.loading'}
+                    defaultMessage={'Loading Gift Cards...'}
+                />
+            </LoadingIndicator>
+        );
+    }
+
+    const cardEntryErrorMessage = shouldDisplayCardError
+        ? formatMessage({
+            id: 'giftCards.errorInvalid',
+            defaultMessage: 'Invalid card. Please try again.'
+        })
+        : null;
+
+    let appliedGiftCards = null;
+    if (errorLoadingGiftCards) {
+        appliedGiftCards = (
+            <span className={classes.errorText}>
+                <FormattedMessage
+                    id={'giftCards.errorLoading'}
+                    defaultMessage={
+                        'There was an error loading applied gift cards. Please refresh and try again.'
+                    }
+                />
+            </span>
+        );
+    }
+    if (giftCardsData.length > 0) {
+        const cardList = giftCardsData.map(giftCardData => {
+            const { code, current_balance } = giftCardData;
+
+            return (
+                <GiftCard
+                    code={code}
+                    currentBalance={current_balance}
+                    isRemovingCard={isRemovingCard}
+                    key={code}
+                    removeGiftCard={removeGiftCard}
+                />
+            );
+        });
+
+        appliedGiftCards = (
+            <div className={classes.cards_container}>{cardList}</div>
+        );
+    }
+
+    const containerClass = shouldDisplayCardError
+        ? classes.card_input_container_error
+        : classes.card_input_container;
+
+    const cardBalance = (
+        <div className={classes.balance}>
+            {checkBalanceData && shouldDisplayCardBalance ? (
+                <div className={classes.price}>
+                    <FormattedMessage
+                        id={'giftCards.balance'}
+                        defaultMessage={'Balance: '}
+                    />
+                    <Price
+                        value={checkBalanceData.balance.value}
+                        currencyCode={checkBalanceData.balance.currency}
+                    />
+                </div>
+            ) : (
+                <span className={classes.invalid_card_error}>
+                    {cardEntryErrorMessage}
+                </span>
+            )}
+        </div>
+    );
+
+    const cardEntryContents = (
+        <div className={classes.card}>
+            <Field
+                classes={{
+                    root: classes.entry
+                }}
+                id={classes.card}
+                label={formatMessage({
+                    id: 'giftCards.cardNumber',
+                    defaultMessage: 'Gift Card Number'
+                })}
+            >
+                <div className={containerClass}>
+                    <TextInput
+                        id={classes.card}
+                        data-cy="GiftCards-card"
+                        disabled={isApplyingCard || isCheckingBalance}
+                        field="card"
+                        mask={value => value && value.trim()}
+                        maskOnBlur={true}
+                        // message={cardEntryErrorMessage}
+                        placeholder={formatMessage({
+                            id: 'giftCards.cardEntry',
+                            defaultMessage: 'Enter card number'
+                        })}
+                        validate={isRequired}
+                    />
+                </div>
+                <span aria-live="polite">{cardBalance}</span>
+            </Field>
+            <Field
+                classes={{
+                    label: classes.applyLabel
+                }}
+            >
+                <Button
+                    priority={'normal'}
+                    data-cy="GiftCards-apply"
+                    disabled={isApplyingCard}
+                    onClick={applyGiftCard}
+                    onKeyDown={handleEnterKeyPress}
+                >
+                    <FormattedMessage
+                        id={'giftCards.apply'}
+                        defaultMessage={'Apply'}
+                    />
+                </Button>
+            </Field>
+            <LinkButton
+                className={classes.check_balance_button}
+                disabled={isCheckingBalance}
+                onClick={checkGiftCardBalance}
+                onKeyDown={checkGiftCardBalanceKeyPress}
+            >
+                <FormattedMessage
+                    id={'giftCards.checkBalance'}
+                    defaultMessage={'Check balance'}
+                />
+            </LinkButton>
+        </div>
+    );
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.entryForm}>{cardEntryContents}</div>
+            {appliedGiftCards}
+        </div>
+    );
+};
+
+export default props => {
+    return (
+        <Form data-cy="GiftCards-form">
+            <GiftCards {...props} />
+        </Form>
+    );
+};

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

@@ -0,0 +1,98 @@
+.root {
+    composes: grid from global;
+    composes: gap-md from global;
+}
+
+.errorText {
+    composes: leading-normal from global;
+    composes: text-error from global;
+}
+
+.balance {
+    composes: grid from global;
+    composes: italic from global;
+    composes: items-start from global;
+    composes: pt-1.5 from global;
+    composes: text-sm from global;
+    grid-template-columns: max-content 1fr;
+}
+
+.card {
+    composes: gap-sm from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: items-start from global;
+    grid-template-areas:
+        'card_entry'
+        'check_balance_button'
+        'apply_button';
+
+    composes: lg_grid-cols-autoLast from global;
+}
+
+@media (min-width: 960px) {
+    .card {
+        grid-template-areas:
+            'card_entry apply_button'
+            'check_balance_button check_balance_button';
+    }
+}
+
+.card_input_container {}
+
+.invalid_card_error {
+    color: red;
+}
+
+/* TODO @TW: cannot compose */
+.card_input_container_error input {
+    /* composes: border-error from global; */
+    border-color: rgb(var(--venia-global-color-red-400));
+}
+
+/* TODO @TW: cannot compose */
+.card_input_container_error input:focus {
+    /* composes: border-gray-600 from global; */
+    border-color: rgb(var(--venia-global-color-gray-600));
+}
+
+/* TODO @TW: cannot compose */
+.card_input_container_error p {
+    /* composes: text-error from global; */
+    color: rgb(var(--venia-global-color-error));
+    /* composes: font-semibold from global; */
+    font-weight: 600;
+}
+
+.cards_container {
+    composes: gap-sm from global;
+    composes: grid from global;
+    composes: items-baseline from global;
+    composes: justify-start from global;
+    grid-template-columns: max-content auto;
+}
+
+.check_balance_button {
+    composes: root from '@magento/venia-ui/lib/components/LinkButton/linkButton.module.css';
+
+    composes: justify-self-center from global;
+    grid-area: check_balance_button;
+
+    composes: lg_justify-self-start from global;
+}
+
+.entry {
+    grid-area: card_entry;
+}
+
+.price {}
+
+.entryForm {}
+
+.applyLabel {
+    composes: label from '../../Field/field.module.css';
+
+    composes: hidden from global;
+
+    composes: lg_block from global;
+}

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

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

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.js

@@ -0,0 +1,178 @@
+import React, { Fragment, useEffect } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { AlertCircle as AlertCircleIcon } from 'react-feather';
+import { useToasts } from '@magento/peregrine';
+import { deriveErrorMessage } from '@magento/peregrine/lib/util/deriveErrorMessage';
+import { useCouponCode } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/CouponCode/useCouponCode';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Button from '@magento/venia-ui/lib/components/Button';
+import { Form } from 'informed';
+import Field from '@magento/venia-ui/lib/components/Field';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+
+import defaultClasses from './couponCode.module.css';
+
+const errorIcon = (
+    <Icon
+        src={AlertCircleIcon}
+        attrs={{
+            width: 18
+        }}
+    />
+);
+
+/**
+ * A child component of the PriceAdjustments component.
+ * This component renders a form for addingg a coupon code to the cart.
+ *
+ * @param {Object} props
+ * @param {Function} props.setIsCartUpdating Function for setting the updating state for the cart.
+ * @param {Object} props.classes CSS className overrides.
+ * See [couponCode.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.module.css}
+ * for a list of classes you can override.
+ *
+ * @returns {React.Element}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import CouponCode from "@magento/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode";
+ */
+const CouponCode = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const talonProps = useCouponCode({
+        setIsCartUpdating: props.setIsCartUpdating
+    });
+    const [, { addToast }] = useToasts();
+    const {
+        applyingCoupon,
+        data,
+        errors,
+        handleApplyCoupon,
+        handleApplyCouponOnEnter,
+        handleRemoveCoupon,
+        handleRemoveCouponOnEnter,
+        removingCoupon
+    } = talonProps;
+    const { formatMessage } = useIntl();
+
+    const removeCouponError = deriveErrorMessage([
+        errors.get('removeCouponMutation')
+    ]);
+
+    useEffect(() => {
+        if (removeCouponError) {
+            addToast({
+                type: 'error',
+                icon: errorIcon,
+                message: removeCouponError,
+                dismissable: true,
+                timeout: 10000
+            });
+        }
+    }, [addToast, removeCouponError]);
+
+    if (!data) {
+        return null;
+    }
+
+    if (errors.get('getAppliedCouponsQuery')) {
+        return (
+            <div className={classes.errorContainer}>
+                <FormattedMessage
+                    id={'couponCode.errorContainer'}
+                    defaultMessage={
+                        'Something went wrong. Please refresh and try again.'
+                    }
+                />
+            </div>
+        );
+    }
+
+    if (data.cart.applied_coupons) {
+        const codes = data.cart.applied_coupons.map(({ code }) => {
+            return (
+                <Fragment key={code}>
+                    <span>{code}</span>
+                    <LinkButton
+                        className={classes.removeButton}
+                        disabled={removingCoupon}
+                        data-cy="CouponCode-removeCouponButton"
+                        onClick={() => {
+                            handleRemoveCoupon(code);
+                        }}
+                        onKeyDown={() => {
+                            handleRemoveCouponOnEnter(code);
+                        }}
+                    >
+                        <FormattedMessage
+                            id={'couponCode.removeButton'}
+                            defaultMessage={'Remove'}
+                        />
+                    </LinkButton>
+                </Fragment>
+            );
+        });
+
+        return <div className={classes.appliedCoupon}>{codes}</div>;
+    } else {
+        const errorMessage = deriveErrorMessage([
+            errors.get('applyCouponMutation')
+        ]);
+
+        const formClass = errorMessage
+            ? classes.entryFormError
+            : classes.entryForm;
+
+        return (
+            <Form
+                data-cy="CouponCode-form"
+                className={formClass}
+                onSubmit={handleApplyCoupon}
+            >
+                <Field
+                    id="couponCode"
+                    label={formatMessage({
+                        id: 'cartPage.couponCode',
+                        defaultMessage: 'Coupon Code'
+                    })}
+                >
+                    <TextInput
+                        field="couponCode"
+                        id={'couponCode'}
+                        data-cy="CouponCode-couponCode"
+                        placeholder={formatMessage({
+                            id: 'couponCode.enterCode',
+                            defaultMessage: 'Enter code'
+                        })}
+                        mask={value => value && value.trim()}
+                        maskOnBlur={true}
+                        message={errorMessage}
+                    />
+                </Field>
+                <Field>
+                    <Button
+                        data-cy="CouponCode-submit"
+                        disabled={applyingCoupon}
+                        priority={'normal'}
+                        type={'submit'}
+                        onKeyDown={handleApplyCouponOnEnter}
+                        classes={{
+                            content: 'gap-1.5 grid-flow-col inline-grid items-center justify-center justify-items-center capitalize font-medium'
+                        }}
+                    >
+                        <FormattedMessage
+                            id={'couponCode.apply'}
+                            defaultMessage={'Apply'}
+                        />
+                    </Button>
+                </Field>
+            </Form>
+        );
+    }
+};
+
+export default CouponCode;

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.module.css

@@ -0,0 +1,52 @@
+/* Styles for "add" view. */
+.entryForm,
+.entryFormError {
+    composes: gap-x-sm from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
+}
+
+/* on mobile... */
+@media (max-width: 959px) {
+
+    .entryForm,
+    .entryFormError {
+        /* switch to rows. */
+        grid-template-columns: unset;
+        grid-template-rows: 1fr 1fr;
+    }
+}
+
+/* TODO @TW: cannot compose */
+.entryFormError input {
+    /* composes: border-error from global; */
+    border-color: rgb(var(--venia-global-color-red-400));
+}
+
+/* TODO @TW: cannot compose */
+.entryFormError input:focus {
+    /* composes: border-gray-600 from global; */
+    border-color: rgb(var(--venia-global-color-gray-600));
+}
+
+/* TODO @TW: cannot compose */
+.entryFormError p {
+    /* composes: text-error from global; */
+    color: rgb(var(--venia-global-color-error));
+    /* composes: font-semibold from global; */
+    font-weight: 600;
+}
+
+.errorContainer {
+    composes: leading-normal from global;
+    /* Duplicate the left/right/bottom padding on the accordion section */
+    composes: pt-sm from global;
+    composes: text-error from global;
+}
+
+/* Styles for "removal" view. */
+.removeButton {
+    composes: root from '@magento/venia-ui/lib/components/LinkButton/linkButton.module.css';
+
+    composes: ml-xs from global;
+}

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

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