@magento/venia-ui 9.1.0 → 9.2.0-alpha.1

package/lib/components/Newsletter/__tests__/__snapshots__/newsletter.shimmer.spec.js.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="root"
+>
+  <div
+    className="root_rectangle"
+    style={Object {}}
+  />
+  <div
+    className="root_rectangle"
+    style={Object {}}
+  />
+  <div
+    className="root_rectangle"
+    style={
+      Object {
+        "width": "50%",
+      }
+    }
+  />
+  <div
+    className="form"
+  >
+    <div
+      className="root_textInput"
+      style={Object {}}
+    />
+    <div
+      className="buttonsContainer"
+    >
+      <div
+        className="root_button"
+        style={Object {}}
+      />
+    </div>
+  </div>
+</div>
+`;

package/lib/components/Newsletter/__tests__/__snapshots__/newsletter.spec.js.snap

@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Newsletter displays an error message if the email already subscribed 1`] = `
+exports[`#Newsletter display it does not display when disabled 1`] = `null`;
+
+exports[`#Newsletter display it renders shimmer while loading config 1`] = `<NewsletterShimmer />`;
+
+exports[`#Newsletter display renders correctly 1`] = `
 <div
   className="root"
 >
@@ -21,11 +25,8 @@ exports[`Newsletter displays an error message if the email already subscribed 1`
     />
   </p>
   <FormError
-    errors={
-      Array [
-        "This email address is already subscribed.",
-      ]
-    }
+    allowErrorMessages={true}
+    errors={Array []}
   />
   <form
     className="form"
@@ -85,7 +86,7 @@ exports[`Newsletter displays an error message if the email already subscribed 1`
 </div>
 `;
 
-exports[`Newsletter renders correctly 1`] = `
+exports[`#Newsletter submit displays an error message if the email already subscribed 1`] = `
 <div
   className="root"
 >
@@ -106,7 +107,12 @@ exports[`Newsletter renders correctly 1`] = `
     />
   </p>
   <FormError
-    errors={Array []}
+    allowErrorMessages={true}
+    errors={
+      Array [
+        "This email address is already subscribed.",
+      ]
+    }
   />
   <form
     className="form"

package/lib/components/Newsletter/__tests__/newsletter.shimmer.spec.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import NewsletterShimmer from '../newsletter.shimmer';
+
+jest.mock('../../../classify');
+
+test('renders correctly', () => {
+    const component = createTestInstance(<NewsletterShimmer />);
+    expect(component.toJSON()).toMatchSnapshot();
+});

package/lib/components/Newsletter/__tests__/newsletter.spec.js

@@ -22,6 +22,7 @@ jest.mock('../../Button', () => () => <i />);
 jest.mock('../../LinkButton', () => () => <i />);
 jest.mock('../../FormError/formError', () => 'FormError');
 jest.mock('../../LoadingIndicator', () => () => <i />);
+jest.mock('../newsletter.shimmer', () => 'NewsletterShimmer');
 
 jest.mock('@magento/peregrine', () => {
     const actual = jest.requireActual('@magento/peregrine');
@@ -45,20 +46,42 @@ jest.mock('@magento/peregrine/lib/hooks/useAwaitQuery', () => {
 });
 const mockHandleSubmit = jest.fn();
 const talonProps = {
+    isEnabled: true,
     errors: [],
     handleSubmit: mockHandleSubmit,
     isBusy: false,
+    isLoading: false,
     setFormApi: jest.fn()
 };
 const props = {};
 
-describe('Newsletter', () => {
+describe('#Newsletter display', () => {
     test('renders correctly', () => {
         useNewsletter.mockReturnValueOnce(talonProps);
         const component = createTestInstance(<Newsletter {...props} />);
         expect(component.toJSON()).toMatchSnapshot();
     });
 
+    test('it renders shimmer while loading config', () => {
+        useNewsletter.mockReturnValueOnce({
+            ...talonProps,
+            isLoading: true
+        });
+        const component = createTestInstance(<Newsletter {...props} />);
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    test('it does not display when disabled', () => {
+        useNewsletter.mockReturnValueOnce({
+            ...talonProps,
+            isEnabled: false
+        });
+        const component = createTestInstance(<Newsletter {...props} />);
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+});
+
+describe('#Newsletter submit', () => {
     test('calls `handleSubmit` on submit', () => {
         useNewsletter.mockReturnValueOnce(talonProps);
         useMutation.mockReturnValueOnce([mockHandleSubmit, {}]);
@@ -108,7 +131,7 @@ describe('Newsletter', () => {
         expect(component.toJSON()).toMatchSnapshot();
     });
 
-    test('throws a toast if there is response', () => {
+    test('shows a toast if there is response', () => {
         useNewsletter.mockReturnValueOnce({
             ...talonProps,
             newsLetterResponse: { status: 'SUBSCRIBED' }

package/lib/components/Newsletter/newsletter.js

@@ -13,8 +13,9 @@ import Button from '../Button';
 import Field from '../Field';
 import LoadingIndicator from '../LoadingIndicator';
 import TextInput from '../TextInput';
-import defaultClasses from './newsletter.module.css';
 import LinkButton from '../LinkButton';
+import Shimmer from './newsletter.shimmer';
+import defaultClasses from './newsletter.module.css';
 
 const Newsletter = props => {
     const { formatMessage } = useIntl();
@@ -22,17 +23,20 @@ const Newsletter = props => {
     const talonProps = useNewsletter();
     const [, { addToast }] = useToasts();
     const {
+        isEnabled,
         errors,
         handleSubmit,
         isBusy,
+        isLoading,
         setFormApi,
-        newsLetterResponse
+        newsLetterResponse,
+        clearErrors
     } = talonProps;
 
     useEffect(() => {
         if (newsLetterResponse && newsLetterResponse.status) {
             addToast({
-                type: 'info',
+                type: 'success',
                 message: formatMessage({
                     id: 'newsletter.subscribeMessage',
                     defaultMessage: 'The email address is subscribed.'
@@ -42,6 +46,14 @@ const Newsletter = props => {
         }
     }, [addToast, formatMessage, newsLetterResponse]);
 
+    if (isLoading) {
+        return <Shimmer />;
+    }
+
+    if (!isEnabled) {
+        return null;
+    }
+
     const maybeLoadingIndicator = isBusy ? (
         <div className={classes.loadingContainer}>
             <LoadingIndicator>
@@ -54,7 +66,7 @@ const Newsletter = props => {
     ) : null;
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy={'Newsletter-root'}>
             {maybeLoadingIndicator}
             <span className={classes.title}>
                 <FormattedMessage
@@ -71,7 +83,10 @@ const Newsletter = props => {
                     }
                 />
             </p>
-            <FormError errors={Array.from(errors.values())} />
+            <FormError
+                allowErrorMessages
+                errors={Array.from(errors.values())}
+            />
             <Form
                 getApi={setFormApi}
                 className={classes.form}
@@ -95,6 +110,7 @@ const Newsletter = props => {
                     className={classes.subscribe_link}
                     type="submit"
                     disabled={isBusy}
+                    onClick={clearErrors}
                 >
                     <FormattedMessage
                         id={'newsletter.subscribeText'}
@@ -102,7 +118,12 @@ const Newsletter = props => {
                     />
                 </LinkButton>
                 <div className={classes.buttonsContainer}>
-                    <Button priority="normal" type="submit" disabled={isBusy}>
+                    <Button
+                        priority="normal"
+                        type="submit"
+                        disabled={isBusy}
+                        onClick={clearErrors}
+                    >
                         <FormattedMessage
                             id={'newsletter.subscribeText'}
                             defaultMessage={'Subscribe'}

package/lib/components/Newsletter/newsletter.shimmer.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { useStyle } from '../../classify';
+import Shimmer from '../Shimmer';
+import defaultClasses from './newsletter.module.css';
+import defaultShimmerClasses from './newsletter.shimmer.module.css';
+
+const NewsletterShimmer = props => {
+    const classes = useStyle(
+        defaultClasses,
+        defaultShimmerClasses,
+        props.classes
+    );
+
+    return (
+        <div className={classes.root}>
+            <Shimmer
+                key="title"
+                classes={{
+                    root_rectangle: classes.shimmerItem
+                }}
+            />
+            <Shimmer
+                key="text"
+                classes={{
+                    root_rectangle: classes.shimmerParagraphLine
+                }}
+            />
+            <Shimmer
+                key="text2"
+                width="50%"
+                classes={{
+                    root_rectangle: classes.shimmerItem
+                }}
+            />
+            <div className={classes.form}>
+                <Shimmer type="textInput" />
+                <div className={classes.buttonsContainer}>
+                    <Shimmer type="button" />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NewsletterShimmer;

package/lib/components/Newsletter/newsletter.shimmer.module.css

@@ -0,0 +1,11 @@
+.shimmerItem {
+    composes: root_rectangle from '../Shimmer/shimmer.module.css';
+    display: block;
+    margin-bottom: 1rem;
+}
+
+.shimmerParagraphLine {
+    composes: root_rectangle from '../Shimmer/shimmer.module.css';
+    display: block;
+    margin-bottom: 0.5rem;
+}

package/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/item.spec.js.snap

@@ -57,7 +57,7 @@ https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=2560&he
   </dl>
   <span>
     <mock-FormattedMessage
-      defaultMessage="Qty"
+      defaultMessage="Qty : {quantity}"
       id="orderDetails.quantity"
       values={
         Object {

package/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/shippingMethod.spec.js.snap

@@ -30,6 +30,7 @@ exports[`should render properly 1`] = `
   <div>
     <span>
       <mock-FormattedMessage
+        defaultMessage="<strong>Tracking number:</strong> {number}"
         id="orderDetails.trackingInformation"
         values={
           Object {
@@ -41,6 +42,7 @@ exports[`should render properly 1`] = `
     </span>
     <span>
       <mock-FormattedMessage
+        defaultMessage="<strong>Tracking number:</strong> {number}"
         id="orderDetails.trackingInformation"
         values={
           Object {
@@ -52,6 +54,7 @@ exports[`should render properly 1`] = `
     </span>
     <span>
       <mock-FormattedMessage
+        defaultMessage="<strong>Tracking number:</strong> {number}"
         id="orderDetails.trackingInformation"
         values={
           Object {

package/lib/components/OrderHistoryPage/OrderDetails/billingInformation.js

@@ -30,7 +30,10 @@ const BillingInformation = props => {
     });
 
     return (
-        <div className={classes.root}>
+        <div
+            className={classes.root}
+            data-cy="OrderDetails-BillingInformation-root"
+        >
             <div className={classes.heading}>
                 <FormattedMessage
                     id="orderDetails.billingInformationLabel"

package/lib/components/OrderHistoryPage/OrderDetails/item.js

@@ -64,7 +64,7 @@ const Item = props => {
             <span className={classes.quantity}>
                 <FormattedMessage
                     id="orderDetails.quantity"
-                    defaultMessage="Qty"
+                    defaultMessage="Qty : {quantity}"
                     values={{
                         quantity: quantity_ordered
                     }}

package/lib/components/OrderHistoryPage/OrderDetails/items.js

@@ -17,7 +17,7 @@ const Items = props => {
     ));
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="OrderDetails-Items-root">
             <h3 className={classes.heading}>
                 <FormattedMessage
                     id="orderItems.itemsHeading"

package/lib/components/OrderHistoryPage/OrderDetails/paymentMethod.js

@@ -17,7 +17,7 @@ const PaymentMethod = props => {
     const [{ name }] = data;
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="OrderDetails-PaymentMethod-root">
             <div className={classes.heading}>
                 <FormattedMessage
                     id="orderDetails.paymentMethodLabel"

package/lib/components/OrderHistoryPage/OrderDetails/shippingInformation.js

@@ -52,7 +52,10 @@ const ShippingInformation = props => {
     }
 
     return (
-        <div className={classes.root}>
+        <div
+            className={classes.root}
+            data-cy="OrderDetails-ShippingInformation-root"
+        >
             <div className={classes.heading}>
                 <FormattedMessage
                     id="orderDetails.shippingInformationLabel"

package/lib/components/OrderHistoryPage/OrderDetails/shippingMethod.js

@@ -23,6 +23,7 @@ const ShippingMethod = props => {
                         <span className={classes.trackingRow} key={number}>
                             <FormattedMessage
                                 id="orderDetails.trackingInformation"
+                                defaultMessage="<strong>Tracking number:</strong> {number}"
                                 values={{
                                     number,
                                     strong: chunks => <strong>{chunks}</strong>
@@ -43,7 +44,10 @@ const ShippingMethod = props => {
     }
 
     return (
-        <div className={classes.root}>
+        <div
+            className={classes.root}
+            data-cy="OrderDetails-ShippingMethod-root"
+        >
             <div className={classes.heading}>
                 <FormattedMessage
                     id="orderDetails.shippingMethodLabel"

package/lib/components/OrderHistoryPage/orderHistoryPage.js

@@ -89,7 +89,14 @@ const OrderHistoryPage = props => {
                 </h3>
             );
         } else {
-            return <ul className={classes.orderHistoryTable}>{orderRows}</ul>;
+            return (
+                <ul
+                    className={classes.orderHistoryTable}
+                    data-cy="OrderHistoryPage-orderHistoryTable"
+                >
+                    {orderRows}
+                </ul>
+            );
         }
     }, [
         classes.emptyHistoryMessage,

package/lib/components/Pagination/pagination.js

@@ -50,7 +50,7 @@ const Pagination = props => {
     }
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="Pagination-root">
             <NavButton
                 name={navButtons.firstPage.name}
                 active={isActiveLeft}

package/lib/components/Pagination/tile.js

@@ -11,7 +11,11 @@ const Tile = props => {
     const handleClick = useCallback(() => onClick(number), [onClick, number]);
 
     return (
-        <button className={rootClass} onClick={handleClick}>
+        <button
+            className={rootClass}
+            onClick={handleClick}
+            data-cy={isActive ? 'Tile-activeRoot' : 'Tile-root'}
+        >
             {number}
         </button>
     );

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Boolean/__tests__/__snapshots__/boolean.spec.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#Boolean renders boolean when data is provided 1`] = `
+Array [
+  <div>
+    Boolean Label
+  </div>,
+  <div>
+    Yes
+  </div>,
+]
+`;
+
+exports[`#Boolean renders empty when no data is provided 1`] = `null`;
+
+exports[`#Boolean renders label only when data is missing 1`] = `
+<div>
+  Boolean Label
+</div>
+`;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Boolean/__tests__/boolean.spec.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import Boolean from '../boolean';
+
+let inputProps = {};
+
+const Component = () => {
+    return <Boolean {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        attribute_metadata: {
+            label: 'Boolean Label'
+        }
+    };
+};
+
+describe('#Boolean', () => {
+    it('renders empty when no data is provided', () => {
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders label only when data is missing', () => {
+        givenDefaultValues();
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders boolean when data is provided', () => {
+        givenDefaultValues();
+        inputProps = {
+            ...inputProps,
+            selected_attribute_options: {
+                attribute_option: [
+                    {
+                        label: 'Yes'
+                    }
+                ]
+            }
+        };
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Boolean/boolean.js

@@ -0,0 +1,74 @@
+import React, { Fragment } from 'react';
+import { arrayOf, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './boolean.module.css';
+
+/**
+ * Custom Attributes Boolean Type component.
+ *
+ * @typedef Boolean
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a Boolean Type Product Attribute.
+ */
+const Boolean = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { attribute_metadata = {}, selected_attribute_options = {} } = props;
+
+    const attributeLabel = attribute_metadata.label ? (
+        <div className={classes.label}>{attribute_metadata.label}</div>
+    ) : null;
+    let attributeContent;
+
+    if (selected_attribute_options.attribute_option?.length > 0) {
+        const options = selected_attribute_options.attribute_option
+            .map(option => option.label)
+            .join(', ');
+
+        attributeContent = <div className={classes.content}>{options}</div>;
+    }
+
+    return (
+        <Fragment>
+            {attributeLabel}
+            {attributeContent}
+        </Fragment>
+    );
+};
+
+/**
+ * Props for {@link Boolean}
+ *
+ * @typedef props
+ *
+ * @property {Object} classes An object containing the class names for the attribute
+ * @property {String} classes.label CSS class for the attribute label
+ * @property {String} classes.content CSS class for the attribute content
+ * @property {Object} attribute_metadata An object containing the attribute metadata
+ * @property {String} attribute_metadata.label The attribute label
+ * @property {Object} selected_attribute_options An object containing the attribute selected options
+ * @property {Array} selected_attribute_options.attribute_option An array of the selected options
+ * @property {String} selected_attribute_options.attribute_option.label Label of the selected option
+ */
+Boolean.propTypes = {
+    classes: shape({
+        label: string,
+        content: string
+    }),
+    attribute_metadata: shape({
+        label: string
+    }),
+    selected_attribute_options: shape({
+        attribute_option: arrayOf(
+            shape({
+                label: string
+            })
+        )
+    })
+};
+
+export default Boolean;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Boolean/boolean.module.css

@@ -0,0 +1,9 @@
+.label {
+    composes: font-bold from global;
+    composes: inline-block from global;
+    composes: mr-2 from global;
+}
+
+.content {
+    composes: inline-block from global;
+}

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Boolean/index.js

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

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Date/__tests__/__snapshots__/date.spec.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#Date renders date when data is provided 1`] = `
+Array [
+  <div>
+    Date Label
+  </div>,
+  <div>
+    <mock-FormattedDate
+      day="2-digit"
+      month="short"
+      value="2019-08-27T12:00:00"
+      year="numeric"
+    />
+  </div>,
+]
+`;
+
+exports[`#Date renders empty when no data is provided 1`] = `null`;
+
+exports[`#Date renders label only when data is missing 1`] = `
+<div>
+  Date Label
+</div>
+`;