@magento/venia-ui 9.2.0-alpha.3 → 9.3.0-alpha.1

package/i18n/en_US.json

@@ -160,7 +160,7 @@
     "customerForm.defaultShipping": "Make this my default address",
     "customerForm.formMessage": "The shipping address you enter will be saved to your address book and set as your default for future purchases.",
     "customerForm.loading": "Fetching Customer Details...",
-    "discountSummary.lineItemLabel": "Discounts applied",
+    "discountSummary.lineItemLabel": "Applied discounts",
     "editModal.headerText": "Edit Item",
     "Email Signup": "Email Signup",
     "errorView.header": "Oops!",
@@ -211,9 +211,20 @@
     "giftCards.loading": "Loading Gift Cards...",
     "giftCardSection.giftCard": "Apply Gift Card",
     "giftCardSummary.lineItemLabel": "Gift Card(s) applied",
+    "giftOptions.addGiftMessage": "Add Message",
+    "giftOptions.cancelGiftMessageButton": "Cancel",
     "giftOptions.cardMessage": "Enter your message here",
+    "giftOptions.editGiftMessageButton": "Edit",
+    "giftOptions.from": "From",
+    "giftOptions.giftMessageFrom": "<strong>From:</strong> {cardFrom}",
+    "giftOptions.giftMessageTo": "<strong>To:</strong> {cardTo}",
+    "giftOptions.includeGiftMessage": "Optional Message",
     "giftOptions.includeGiftReceipt": "Include gift receipt",
-    "giftOptions.includePrintedCard": "Include printed card",
+    "giftOptions.includePrintedCard": "Add printed card{price}",
+    "giftOptions.message": "Message",
+    "giftOptions.saving": "Saving",
+    "giftOptions.to": "To",
+    "giftOptions.updateGiftMessageButton": "Update Message",
     "Give Back": "Give Back",
     "global.addButton": "Add",
     "global.cancelButton": "Cancel",
@@ -318,6 +329,8 @@
     "priceAdjustments.giftOptions": "See Gift Options",
     "priceAdjustments.shippingMethod": "Estimate your Shipping",
     "priceSummary.checkoutButton": "Proceed to Checkout",
+    "priceSummary.discountSummary.hideDiscounts": "Hide individual discounts.",
+    "priceSummary.discountSummary.showDiscounts": "Show individual discounts.",
     "priceSummary.errorText": "Something went wrong. Please refresh and try again.",
     "priceSummary.estimatedTotal": "Estimated Total",
     "priceSummary.lineItemLabel": "Subtotal",
@@ -362,12 +375,13 @@
     "region.label": "State",
     "Register": "Register",
     "resetPassword.descriptionText": "Please enter your email address and new password.",
+    "resetPassword.header": "Reset Password",
     "resetPassword.invalidTokenMessage": "Uh oh, something went wrong. Check the link or try again.",
     "resetPassword.newPasswordText": "New Password",
-    "resetPassword.pageTitleText": "Reset Password",
     "resetPassword.savedPasswordText": "Your new password has been saved.",
     "resetPassword.savePassword": "Save Password",
     "resetPassword.successMessage": "Your new password has been saved. Please use this password to sign into your Account.",
+    "resetPassword.title": "Reset Password",
     "Returns": "Returns",
     "savedPaymentsPage.addButtonText": "Add a credit card",
     "savedPaymentsPage.creditCard.errorRemoving": "Something went wrong deleting this payment method. Please refresh and try again.",

package/lib/RootComponents/CMS/__tests__/__snapshots__/cms.spec.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shimmer is present when loading but no data 1`] = `
+<div
+  aria-busy="true"
+  aria-live="polite"
+  className="root"
+>
+  <div
+    className="root_rectangle"
+    style={
+      Object {
+        "height": "880px",
+        "width": "100%",
+      }
+    }
+  />
+</div>
+`;

package/lib/RootComponents/CMS/__tests__/cms.spec.js

@@ -13,11 +13,7 @@ jest.mock('../../../components/Head', () => ({
     StoreTitle: () => 'Title',
     Meta: () => 'Meta'
 }));
-jest.mock('../../../components/LoadingIndicator', () => {
-    return {
-        fullPageLoadingIndicator: 'LoadingIndicator'
-    };
-});
+
 jest.mock('../../../components/RichContent', () => 'RichContent');
 
 jest.mock('@magento/peregrine/lib/context/app', () => {
@@ -50,7 +46,7 @@ const props = {
     id: 1
 };
 
-test('fullPageLoadingIndicator is present when loading but no data', () => {
+test('Shimmer is present when loading but no data', () => {
     useQuery.mockImplementation(() => {
         return {
             data: false,
@@ -59,9 +55,8 @@ test('fullPageLoadingIndicator is present when loading but no data', () => {
         };
     });
 
-    const { root } = createTestInstance(<CMSPage {...props} />);
-    expect(root.children.length).toEqual(1);
-    expect(root.children[0]).toEqual('LoadingIndicator');
+    const instance = createTestInstance(<CMSPage {...props} />);
+    expect(instance.toJSON()).toMatchSnapshot();
 });
 
 test('page is set to loading when checking the network for updates', () => {

package/lib/RootComponents/CMS/cms.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { shape, string } from 'prop-types';
 
-import { fullPageLoadingIndicator } from '../../components/LoadingIndicator';
+import CMSPageShimmer from './cms.shimmer';
 import { useCmsPage } from '@magento/peregrine/lib/talons/Cms/useCmsPage';
 import RichContent from '../../components/RichContent';
 import { Meta, StoreTitle } from '../../components/Head';
@@ -18,7 +18,7 @@ const CMSPage = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
     if (shouldShowLoadingIndicator) {
-        return fullPageLoadingIndicator;
+        return <CMSPageShimmer classes={classes} />;
     }
 
     const {
@@ -32,14 +32,15 @@ const CMSPage = props => {
 
     const headingElement =
         content_heading !== '' ? (
-            <h1 className={classes.heading}>{content_heading}</h1>
+            <h1 data-cy="Cms-contentHeading" className={classes.heading}>
+                {content_heading}
+            </h1>
         ) : null;
 
     const pageTitle = meta_title || title;
     const rootClassName = page_layout
         ? classes[`root_${toCamelCase(page_layout)}`]
         : classes.root;
-
     return (
         <Fragment>
             <StoreTitle>{pageTitle}</StoreTitle>

package/lib/RootComponents/CMS/cms.shimmer.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer/shimmer.js';
+import { useStyle } from '../../classify';
+
+import defaultClasses from './cms.module.css';
+
+const CMSPageShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer width="100%" height="880px" key="banner" />
+        </div>
+    );
+};
+
+export default CMSPageShimmer;

package/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.shimmer.spec.js.snap

@@ -143,6 +143,7 @@ Array [
                       className="image placeholder"
                       loading="eager"
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+                      style={Object {}}
                     />
                     <img
                       alt="Placeholder for gallery item image"
@@ -151,6 +152,7 @@ Array [
                       onError={[Function]}
                       onLoad={[Function]}
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+                      style={Object {}}
                     />
                   </div>
                 </div>
@@ -192,6 +194,7 @@ Array [
                       className="image placeholder"
                       loading="eager"
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+                      style={Object {}}
                     />
                     <img
                       alt="Placeholder for gallery item image"
@@ -200,6 +203,7 @@ Array [
                       onError={[Function]}
                       onLoad={[Function]}
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+                      style={Object {}}
                     />
                   </div>
                 </div>
@@ -241,6 +245,7 @@ Array [
                       className="image placeholder"
                       loading="eager"
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+                      style={Object {}}
                     />
                     <img
                       alt="Placeholder for gallery item image"
@@ -249,6 +254,7 @@ Array [
                       onError={[Function]}
                       onLoad={[Function]}
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+                      style={Object {}}
                     />
                   </div>
                 </div>
@@ -290,6 +296,7 @@ Array [
                       className="image placeholder"
                       loading="eager"
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+                      style={Object {}}
                     />
                     <img
                       alt="Placeholder for gallery item image"
@@ -298,6 +305,7 @@ Array [
                       onError={[Function]}
                       onLoad={[Function]}
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+                      style={Object {}}
                     />
                   </div>
                 </div>
@@ -339,6 +347,7 @@ Array [
                       className="image placeholder"
                       loading="eager"
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+                      style={Object {}}
                     />
                     <img
                       alt="Placeholder for gallery item image"
@@ -347,6 +356,7 @@ Array [
                       onError={[Function]}
                       onLoad={[Function]}
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+                      style={Object {}}
                     />
                   </div>
                 </div>
@@ -388,6 +398,7 @@ Array [
                       className="image placeholder"
                       loading="eager"
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+                      style={Object {}}
                     />
                     <img
                       alt="Placeholder for gallery item image"
@@ -396,6 +407,7 @@ Array [
                       onError={[Function]}
                       onLoad={[Function]}
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+                      style={Object {}}
                     />
                   </div>
                 </div>

package/lib/RootComponents/Category/categoryContent.js

@@ -173,7 +173,10 @@ const CategoryContent = props => {
                     </div>
                     <div className={classes.categoryContent}>
                         <div className={classes.heading}>
-                            <div className={classes.categoryInfo}>
+                            <div
+                                data-cy="CategoryContent-categoryInfo"
+                                className={classes.categoryInfo}
+                            >
                                 {categoryResultsHeading}
                             </div>
                             <div className={classes.headerButtons}>

package/lib/components/AccountChip/accountChip.js

@@ -54,7 +54,9 @@ const AccountChip = props => {
     return (
         <span className={classes.root}>
             <Icon src={AccountIcon} />
-            <span className={classes.text}>{chipText}</span>
+            <span data-cy="AccountChip-text" className={classes.text}>
+                {chipText}
+            </span>
         </span>
     );
 };

package/lib/components/AccountInformationPage/accountInformationPage.js

@@ -30,7 +30,8 @@ const AccountInformationPage = props => {
         isUpdateMode,
         loadDataError,
         shouldShowNewPassword,
-        showUpdateMode
+        showUpdateMode,
+        recaptchaWidgetProps
     } = talonProps;
     const { formatMessage } = useIntl();
 
@@ -110,6 +111,7 @@ const AccountInformationPage = props => {
                         onChangePassword={handleChangePassword}
                         onSubmit={handleSubmit}
                         shouldShowNewPassword={shouldShowNewPassword}
+                        recaptchaWidgetProps={recaptchaWidgetProps}
                     />
                 </Suspense>
             </Fragment>

package/lib/components/AccountInformationPage/editModal.js

@@ -6,6 +6,7 @@ import { useStyle } from '../../classify';
 import EditForm from './editForm';
 import FormError from '../FormError';
 import Dialog from '../Dialog';
+import GoogleReCaptcha from '../GoogleReCaptcha';
 import defaultClasses from './editModal.module.css';
 
 const EditModal = props => {
@@ -18,7 +19,8 @@ const EditModal = props => {
         initialValues,
         isDisabled,
         isOpen,
-        shouldShowNewPassword
+        shouldShowNewPassword,
+        recaptchaWidgetProps
     } = props;
     const { formatMessage } = useIntl();
 
@@ -50,6 +52,7 @@ const EditModal = props => {
                 handleChangePassword={onChangePassword}
                 shouldShowNewPassword={shouldShowNewPassword}
             />
+            <GoogleReCaptcha {...recaptchaWidgetProps} />
         </Dialog>
     );
 };
@@ -65,5 +68,9 @@ EditModal.propTypes = {
     handleSubmit: func,
     initialValues: object,
     isDisabled: bool,
-    isOpen: bool
+    isOpen: bool,
+    recaptchaWidgetProps: shape({
+        containerElement: func,
+        shouldRender: bool
+    })
 };

package/lib/components/AccountMenu/accountMenuItems.js

@@ -18,20 +18,25 @@ const AccountMenuItems = props => {
 
     const menu = menuItems.map(item => {
         return (
-            <Link className={classes.link} key={item.name} to={item.url}>
+            <Link
+                data-cy="AccountMenuItems-link"
+                className={classes.link}
+                key={item.name}
+                to={item.url}
+            >
                 <FormattedMessage id={item.id} defaultMessage={item.name} />
             </Link>
         );
     });
 
     return (
-        <div className={classes.root} data-cy="accountMenuItems-root">
+        <div className={classes.root} data-cy="AccountMenuItems-root">
             {menu}
             <button
                 className={classes.signOut}
                 onClick={handleSignOut}
                 type="button"
-                data-cy="accountMenuItems-signOut"
+                data-cy="AccountMenuItems-signOut"
             >
                 <FormattedMessage
                     id={'accountMenu.signOutButtonText'}

package/lib/components/CartPage/GiftCards/giftCards.js

@@ -221,7 +221,7 @@ const GiftCards = props => {
 
 export default props => {
     return (
-        <Form>
+        <Form data-cy="GiftCards-form">
             <GiftCards {...props} />
         </Form>
     );

package/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.js

@@ -123,7 +123,11 @@ const CouponCode = props => {
             : classes.entryForm;
 
         return (
-            <Form className={formClass} onSubmit={handleApplyCoupon}>
+            <Form
+                data-cy="CouponCode-form"
+                className={formClass}
+                onSubmit={handleApplyCoupon}
+            >
                 <Field
                     id="couponCode"
                     label={formatMessage({