@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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-medium 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';

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/GiftOptions/giftOptions.js

@@ -0,0 +1,321 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Edit2 as EditIcon } from 'react-feather';
+import { Form } from 'informed';
+
+import { useGiftOptions } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/GiftOptions/useGiftOptions';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Checkbox from '@magento/venia-ui/lib/components/Checkbox';
+import Field from '@magento/venia-ui/lib/components/Field';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import LoadingIndicator, {
+    Spinner
+} from '@magento/venia-ui/lib/components/LoadingIndicator';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import Price from '@magento/venia-ui/lib/components/Price';
+import TextArea from '@magento/venia-ui/lib/components/TextArea';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+
+import defaultClasses from './giftOptions.module.css';
+
+/**
+ * A child component of the PriceAdjustments component.
+ * This component displays the form for adding gift options.
+ *
+ * @param {Object} props
+ * @param {Object} [props.classes] CSS className overrides.
+ * @param {Object} [props.giftOptionsConfigData] store config data.
+ * See [giftOptions.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/PriceAdjustments/GiftOptions/giftOptions.module.css}
+ * for a list of classes you can override.
+ *
+ * @returns {React.Element}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import GiftOptions from "@magento/venia-ui/lib/components/CartPage/PriceAdjustments/GiftOptions";
+ */
+const GiftOptions = props => {
+    const { classes: propClasses } = props;
+    const {
+        loading,
+        errors,
+        savingOptions,
+        giftReceiptProps,
+        printedCardProps,
+        printedCardPrice,
+        giftMessageCheckboxProps,
+        giftMessageResult,
+        hasGiftMessage,
+        showGiftMessageResult,
+        cardToProps,
+        cardFromProps,
+        cardMessageProps,
+        editGiftMessageButtonProps,
+        cancelGiftMessageButtonProps,
+        saveGiftMessageButtonProps,
+        optionsFormProps
+    } = useGiftOptions();
+    const { formatMessage } = useIntl();
+    const classes = useStyle(defaultClasses, propClasses);
+
+    if (loading) {
+        return <LoadingIndicator />;
+    }
+
+    const { allow_order, allow_gift_receipt, allow_printed_card } =
+        props?.giftOptionsConfigData || {};
+
+    const includeGiftReceipt =
+        allow_gift_receipt === '1' ? (
+            <div className={classes.option}>
+                <div className={classes.checkboxContainer}>
+                    <Checkbox
+                        {...giftReceiptProps}
+                        data-cy="GiftOptions-includeGiftReceipt"
+                        label={formatMessage({
+                            id: 'giftOptions.includeGiftReceipt',
+                            defaultMessage: 'Include gift receipt'
+                        })}
+                    />
+                </div>
+
+                {savingOptions.includes(giftReceiptProps.field) ? (
+                    <div className={classes.savingContainer}>
+                        <span className={classes.savingText}>
+                            <FormattedMessage
+                                id={'giftOptions.saving'}
+                                defaultMessage={'Saving'}
+                            />
+                        </span>
+                        <Spinner classes={{ root: classes.savingSpinner }} />
+                    </div>
+                ) : null}
+            </div>
+        ) : null;
+
+    const includeGiftMessage =
+        allow_order === '1' ? (
+            <>
+                <div className={classes.option}>
+                    <div className={classes.checkboxContainer}>
+                        <Checkbox
+                            {...giftMessageCheckboxProps}
+                            data-cy="GiftOptions-includeGiftMessage"
+                            label={formatMessage({
+                                id: 'giftOptions.includeGiftMessage',
+                                defaultMessage: 'Optional Message'
+                            })}
+                        />
+                    </div>
+
+                    {savingOptions.includes('giftMessage') ? (
+                        <div className={classes.savingContainer}>
+                            <span className={classes.savingText}>
+                                <FormattedMessage
+                                    id={'giftOptions.saving'}
+                                    defaultMessage={'Saving'}
+                                />
+                            </span>
+                            <Spinner
+                                classes={{ root: classes.savingSpinner }}
+                            />
+                        </div>
+                    ) : null}
+                </div>
+
+                <div
+                    className={
+                        showGiftMessageResult
+                            ? classes.giftMessageResultContainer
+                            : classes.hidden
+                    }
+                >
+                    <div
+                        className={classes.giftMessageResult}
+                        data-cy="GiftOptions-giftMessageResult"
+                    >
+                        <p>
+                            <FormattedMessage
+                                id="giftOptions.giftMessageTo"
+                                defaultMessage="<strong>To:</strong> {cardTo}"
+                                values={{
+                                    cardTo: giftMessageResult.cardTo,
+                                    strong: chunks => <strong>{chunks}</strong>
+                                }}
+                            />
+                        </p>
+                        <p>
+                            <FormattedMessage
+                                id="giftOptions.giftMessageFrom"
+                                defaultMessage="<strong>From:</strong> {cardFrom}"
+                                values={{
+                                    cardFrom: giftMessageResult.cardFrom,
+                                    strong: chunks => <strong>{chunks}</strong>
+                                }}
+                            />
+                        </p>
+                        <p>{giftMessageResult.cardMessage}</p>
+                    </div>
+
+                    <LinkButton
+                        {...editGiftMessageButtonProps}
+                        classes={{ root: classes.editGiftMessageButton }}
+                        data-cy="GiftOptions-editGiftMessageButton"
+                    >
+                        <Icon
+                            classes={{ icon: null }}
+                            size={16}
+                            src={EditIcon}
+                        />
+                        <span className={classes.actionLabel}>
+                            <FormattedMessage
+                                id="giftOptions.editGiftMessageButton"
+                                defaultMessage="Edit"
+                            />
+                        </span>
+                    </LinkButton>
+                </div>
+
+                <div
+                    className={
+                        !showGiftMessageResult
+                            ? classes.giftMessageFields
+                            : classes.hidden
+                    }
+                >
+                    <Field
+                        id="to"
+                        label={formatMessage({
+                            id: 'giftOptions.to',
+                            defaultMessage: 'To'
+                        })}
+                    >
+                        <TextInput
+                            {...cardToProps}
+                            data-cy="GiftOptions-cardTo"
+                        />
+                    </Field>
+                    <Field
+                        id={cardFromProps.field}
+                        label={formatMessage({
+                            id: 'giftOptions.from',
+                            defaultMessage: 'From'
+                        })}
+                    >
+                        <TextInput
+                            {...cardFromProps}
+                            data-cy="GiftOptions-cardFrom"
+                        />
+                    </Field>
+                    <Field
+                        id="message"
+                        label={formatMessage({
+                            id: 'giftOptions.message',
+                            defaultMessage: 'Message'
+                        })}
+                    >
+                        <TextArea
+                            {...cardMessageProps}
+                            data-cy="GiftOptions-cardMessage"
+                            placeholder={formatMessage({
+                                id: 'giftOptions.cardMessage',
+                                defaultMessage: 'Enter your message here'
+                            })}
+                        />
+                    </Field>
+
+                    <div className={classes.giftMessageActions}>
+                        {hasGiftMessage ? (
+                            <Button
+                                {...cancelGiftMessageButtonProps}
+                                data-cy="GiftOptions-cancelGiftMessageButton"
+                            >
+                                <FormattedMessage
+                                    id="giftOptions.cancelGiftMessageButton"
+                                    defaultMessage="Cancel"
+                                />
+                            </Button>
+                        ) : null}
+                        <Button
+                            {...saveGiftMessageButtonProps}
+                            data-cy="GiftOptions-updateGiftMessageButton"
+                        >
+                            {hasGiftMessage ? (
+                                <FormattedMessage
+                                    id="giftOptions.updateGiftMessageButton"
+                                    defaultMessage="Update Message"
+                                />
+                            ) : (
+                                <FormattedMessage
+                                    id="giftOptions.addGiftMessage"
+                                    defaultMessage="Add Message"
+                                />
+                            )}
+                        </Button>
+                    </div>
+                </div>
+            </>
+        ) : null;
+
+    const includePrintedCard =
+        allow_printed_card === '1' ? (
+            <div className={classes.option}>
+                <div className={classes.checkboxContainer}>
+                    <Checkbox
+                        {...printedCardProps}
+                        data-cy="GiftOptions-includePrintedCard"
+                        label={formatMessage(
+                            {
+                                id: 'giftOptions.includePrintedCard',
+                                defaultMessage: 'Add printed card{price}'
+                            },
+                            {
+                                price:
+                                    printedCardPrice &&
+                                    printedCardPrice.value > 0 ? (
+                                        <>
+                                            {' ( + '}
+                                            <Price
+                                                currencyCode={
+                                                    printedCardPrice.currency
+                                                }
+                                                value={printedCardPrice.value}
+                                            />
+                                            {')'}
+                                        </>
+                                    ) : null
+                            }
+                        )}
+                    />
+                </div>
+
+                {savingOptions.includes(printedCardProps.field) ? (
+                    <div className={classes.savingContainer}>
+                        <span className={classes.savingText}>
+                            <FormattedMessage
+                                id={'giftOptions.saving'}
+                                defaultMessage={'Saving'}
+                            />
+                        </span>
+                        <Spinner classes={{ root: classes.savingSpinner }} />
+                    </div>
+                ) : null}
+            </div>
+        ) : null;
+
+    return (
+        <Form
+            data-cy="GiftOptions-form"
+            {...optionsFormProps}
+            className={classes.root}
+        >
+            <FormError errors={Array.from(errors.values())} />
+            {includeGiftReceipt}
+            {includeGiftMessage}
+            {includePrintedCard}
+        </Form>
+    );
+};
+
+export default GiftOptions;

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/GiftOptions/giftOptions.module.css

@@ -0,0 +1,61 @@
+.root {
+}
+
+.option {
+    composes: grid from global;
+    composes: px-0 from global;
+    composes: py-2 from global;
+    grid-template-columns: auto min-content;
+}
+
+.giftMessageResultContainer,
+.giftMessageFields {
+    composes: pb-4 from global;
+    composes: pl-8 from global;
+}
+
+.giftMessageResultContainer {
+    composes: gap-8 from global;
+    composes: items-start from global;
+
+    /* Small */
+    composes: sm_flex from global;
+    composes: sm_gap-12 from global;
+}
+
+.giftMessageResult p {
+    padding: 0.25rem 0;
+}
+
+.editGiftMessageButton {
+    composes: root from '../../../LinkButton/linkButton.module.css';
+    composes: mt-4 from global;
+
+    /* Small */
+    composes: sm_mt-2 from global;
+}
+
+.giftMessageActions {
+    composes: gap-4 from global;
+    composes: grid from global;
+    composes: mt-4 from global;
+
+    /* Small */
+    composes: sm_flex from global;
+}
+
+.savingContainer {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: pl-4 from global;
+    composes: text-gray-500 from global;
+}
+
+.savingSpinner {
+    composes: root from '../../../LoadingIndicator/spinner.module.css';
+    composes: ml-2 from global;
+}
+
+.hidden {
+    composes: hidden from global;
+}

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

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

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

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