@magento/venia-ui 9.2.0-beta.1 → 9.3.0-beta.1

package/lib/components/CartPage/PriceAdjustments/GiftOptions/__tests__/giftOptions.spec.js

@@ -1,50 +1,236 @@
 import React from 'react';
+import { IntlProvider } from 'react-intl';
+
 import { createTestInstance } from '@magento/peregrine';
+import { useGiftOptions } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/GiftOptions/useGiftOptions';
 
 import GiftOptions from '../giftOptions';
 
-jest.mock('@magento/peregrine/lib/context/cart', () => {
-    const state = { cartId: 'fakeCartId' };
-    const api = {};
-    const useCartContext = jest.fn(() => [state, api]);
+jest.mock('react-intl', () => ({
+    ...jest.requireActual('react-intl')
+}));
+jest.mock('informed', () => ({
+    Form: ({ children, ...rest }) => <mock-Form {...rest}>{children}</mock-Form>
+}));
 
-    return { useCartContext };
-});
+jest.mock(
+    '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/GiftOptions/useGiftOptions'
+);
+jest.mock('@magento/venia-ui/lib/classify');
+jest.mock('@magento/venia-ui/lib/components/Button', () => props => (
+    <mock-Button {...props} />
+));
+jest.mock('@magento/venia-ui/lib/components/Checkbox', () => props => (
+    <mock-Checkbox {...props} />
+));
+jest.mock(
+    '@magento/venia-ui/lib/components/Field',
+    () => ({ children, ...rest }) => (
+        <mock-Field {...rest}>{children}</mock-Field>
+    )
+);
+jest.mock('@magento/venia-ui/lib/components/FormError', () => props => (
+    <mock-FormError {...props} />
+));
+jest.mock('@magento/venia-ui/lib/components/Icon', () => props => (
+    <mock-Icon {...props} />
+));
+jest.mock('@magento/venia-ui/lib/components/LoadingIndicator', () => ({
+    __esModule: true,
+    default: jest
+        .fn()
+        .mockImplementation(props => <mock-LoadingIndicator {...props} />),
+    Spinner: jest.fn().mockImplementation(props => <mock-Spinner {...props} />)
+}));
+jest.mock('@magento/venia-ui/lib/components/LinkButton', () => props => (
+    <mock-LinkButton {...props} />
+));
+jest.mock('@magento/venia-ui/lib/components/Price', () => props => (
+    <mock-Price {...props} />
+));
+jest.mock('@magento/venia-ui/lib/components/TextArea', () => props => (
+    <mock-TextArea {...props} />
+));
+jest.mock('@magento/venia-ui/lib/components/TextInput', () => props => (
+    <mock-TextInput {...props} />
+));
 
-jest.mock('@apollo/client', () => {
-    const queryResult = {
-        data: {
-            cart: {
-                include_gift_receipt: true,
-                include_printed_card: false,
-                gift_message: 'Sample Message'
-            }
-        },
-        error: null,
-        loading: false
-    };
+let inputProps = {};
 
-    const useQuery = jest.fn(() => queryResult);
+const talonProps = {
+    loading: false,
+    errors: [],
+    savingOptions: [],
+    giftReceiptProps: {
+        field: 'includeGiftReceipt'
+    },
+    printedCardProps: {
+        field: 'includePrintedCard'
+    },
+    printedCardPrice: {},
+    giftMessageCheckboxProps: {
+        field: 'includeGiftMessage'
+    },
+    giftMessageResult: {},
+    hasGiftMessage: false,
+    showGiftMessageResult: false,
+    cardToProps: {
+        field: 'cardTo'
+    },
+    cardFromProps: {
+        field: 'cardFrom'
+    },
+    cardMessageProps: {
+        field: 'cardMessage'
+    },
+    editGiftMessageButtonProps: {},
+    cancelGiftMessageButtonProps: {},
+    saveGiftMessageButtonProps: {},
+    optionsFormProps: {}
+};
 
-    const useMutation = jest.fn(() => [() => {}]);
+const Component = () => {
+    return (
+        <IntlProvider locale="en-US">
+            <GiftOptions {...inputProps} />
+        </IntlProvider>
+    );
+};
 
-    return {
-        gql: jest.fn(),
-        useApolloClient: jest.fn(() => ({
-            cache: {}
-        })),
-        useQuery,
-        useMutation
+const givenDefaultValues = () => {
+    inputProps = {
+        giftOptionsConfigData: null
     };
-});
+};
 
-beforeAll(() => {
-    // informed's random ids make snapshots unstable
-    jest.spyOn(Math, 'random').mockReturnValue(0);
-});
+const givenOptionsConfigData = () => {
+    inputProps.giftOptionsConfigData = {
+        allow_order: '1',
+        allow_gift_receipt: '1',
+        allow_printed_card: '1'
+    };
+};
+
+describe('#GiftOptions', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    it('renders loading indicator when loading', () => {
+        useGiftOptions.mockReturnValueOnce({
+            ...talonProps,
+            loading: true
+        });
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders empty form when no options are enabled', () => {
+        useGiftOptions.mockReturnValueOnce(talonProps);
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders form when options are enabled', () => {
+        givenOptionsConfigData();
+        useGiftOptions.mockReturnValueOnce(talonProps);
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders form returns errors', () => {
+        givenOptionsConfigData();
+        useGiftOptions.mockReturnValueOnce({
+            ...talonProps,
+            errors: new Map([['query', { message: 'error' }]])
+        });
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders form when gift message form is opened', () => {
+        givenOptionsConfigData();
+        useGiftOptions.mockReturnValueOnce({
+            ...talonProps,
+            showGiftMessageResult: true
+        });
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders form when gift message exists', () => {
+        givenOptionsConfigData();
+        useGiftOptions.mockReturnValueOnce({
+            ...talonProps,
+            hasGiftMessage: true,
+            giftMessageResult: {
+                cardTo: 'To',
+                cardFrom: 'From',
+                cardMessage: 'Message'
+            }
+        });
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders form when gift message exists and form is opened', () => {
+        givenOptionsConfigData();
+        useGiftOptions.mockReturnValueOnce({
+            ...talonProps,
+            hasGiftMessage: true,
+            giftMessageResult: {
+                cardTo: 'To',
+                cardFrom: 'From',
+                cardMessage: 'Message'
+            },
+            showGiftMessageResult: true
+        });
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders printed card price when above 0', () => {
+        givenOptionsConfigData();
+        useGiftOptions.mockReturnValueOnce({
+            ...talonProps,
+            printedCardPrice: {
+                currency: 'USD',
+                value: 10
+            }
+        });
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders spinners when gift options are saving', () => {
+        givenOptionsConfigData();
+        useGiftOptions.mockReturnValueOnce({
+            ...talonProps,
+            savingOptions: [
+                'includeGiftReceipt',
+                'includePrintedCard',
+                'giftMessage'
+            ]
+        });
 
-test('it renders gift options in venia cart page', () => {
-    const instance = createTestInstance(<GiftOptions />);
+        const tree = createTestInstance(<Component />);
 
-    expect(instance.toJSON()).toMatchSnapshot();
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
 });

package/lib/components/CartPage/PriceAdjustments/GiftOptions/giftOptions.js

@@ -1,11 +1,23 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
-import { Form, Relevant } from 'informed';
-import useGiftOptions from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/GiftOptions/useGiftOptions.js';
+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 { useStyle } from '../../../../classify';
-import Checkbox from '../../../Checkbox';
-import TextArea from '../../../TextArea';
 import defaultClasses from './giftOptions.module.css';
 
 /**
@@ -13,7 +25,8 @@ import defaultClasses from './giftOptions.module.css';
  * This component displays the form for adding gift options.
  *
  * @param {Object} props
- * @param {Object} props.classes CSS className overrides.
+ * @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.
  *
@@ -23,50 +36,284 @@ import defaultClasses from './giftOptions.module.css';
  * import GiftOptions from "@magento/venia-ui/lib/components/CartPage/PriceAdjustments/GiftOptions";
  */
 const GiftOptions = props => {
+    const { classes: propClasses } = props;
     const {
-        cardMessageProps,
+        loading,
+        errors,
+        savingOptions,
         giftReceiptProps,
-        optionsFormProps,
         printedCardProps,
-        shouldPromptForMessage
+        printedCardPrice,
+        giftMessageCheckboxProps,
+        giftMessageResult,
+        hasGiftMessage,
+        showGiftMessageResult,
+        cardToProps,
+        cardFromProps,
+        cardMessageProps,
+        editGiftMessageButtonProps,
+        cancelGiftMessageButtonProps,
+        saveGiftMessageButtonProps,
+        optionsFormProps
     } = useGiftOptions();
     const { formatMessage } = useIntl();
-    const classes = useStyle(defaultClasses, props.classes);
+    const classes = useStyle(defaultClasses, propClasses);
 
-    return (
-        <Form {...optionsFormProps} className={classes.root}>
-            <div className={classes.option}>
-                <Checkbox
-                    {...giftReceiptProps}
-                    data-cy="GiftOptions-includeGiftReceipt"
-                    label={formatMessage({
-                        id: 'giftOptions.includeGiftReceipt',
-                        defaultMessage: 'Include gift receipt'
-                    })}
-                />
-            </div>
+    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}>
-                <Checkbox
-                    {...printedCardProps}
-                    data-cy="GiftOptions-includePrintedCard"
-                    label={formatMessage({
-                        id: 'giftOptions.includePrintedCard',
-                        defaultMessage: 'Include printed card'
-                    })}
-                />
+                <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>
-            <div className={classes.option}>
-                <Relevant when={shouldPromptForMessage}>
-                    <TextArea
-                        {...cardMessageProps}
-                        data-cy="GiftOptions-cardMessage"
-                        placeholder={formatMessage({
-                            id: 'giftOptions.cardMessage',
-                            defaultMessage: 'Enter your message here'
+        ) : 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
+                            }
+                        )}
                     />
-                </Relevant>
+                </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>
     );
 };

package/lib/components/CartPage/PriceAdjustments/GiftOptions/giftOptions.module.css

@@ -2,5 +2,60 @@
 }
 
 .option {
-    padding: 0.5rem 0rem;
+    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;
 }