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

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js

@@ -1,8 +1,10 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Form } from 'informed';
 import { func, shape, string, arrayOf, number } from 'prop-types';
+import { AlertCircle } from 'react-feather';
 import { useGuestForm } from '@magento/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm';
+import { useToasts } from '@magento/peregrine';
 
 import { useStyle } from '../../../../classify';
 import { isRequired } from '../../../../util/formValidators';
@@ -13,22 +15,29 @@ import FormError from '../../../FormError';
 import Region from '../../../Region';
 import Postcode from '../../../Postcode';
 import TextInput from '../../../TextInput';
+import Icon from '../../../Icon';
 import defaultClasses from './guestForm.module.css';
 
+const AlertCircleIcon = <Icon src={AlertCircle} attrs={{ width: 20 }} />;
+
 const GuestForm = props => {
     const {
         afterSubmit,
         classes: propClasses,
         onCancel,
         onSuccess,
-        shippingData
+        shippingData,
+        toggleSignInContent,
+        setGuestSignInUsername
     } = props;
 
     const talonProps = useGuestForm({
         afterSubmit,
         onCancel,
         onSuccess,
-        shippingData
+        shippingData,
+        toggleSignInContent,
+        setGuestSignInUsername
     });
     const {
         errors,
@@ -36,9 +45,19 @@ const GuestForm = props => {
         handleSubmit,
         initialValues,
         isSaving,
-        isUpdate
+        isUpdate,
+        handleValidateEmail,
+        showSignInToast,
+        handleToastAction
     } = talonProps;
 
+    const formApiRef = useRef();
+    const getFormApi = api => {
+        formApiRef.current = api;
+    };
+
+    const [, { addToast }] = useToasts();
+
     const { formatMessage } = useIntl();
     const classes = useStyle(defaultClasses, propClasses);
 
@@ -77,13 +96,45 @@ const GuestForm = props => {
         type: 'submit'
     };
 
+    useEffect(() => {
+        if (showSignInToast) {
+            addToast({
+                type: 'info',
+                icon: AlertCircleIcon,
+                message: formatMessage({
+                    id: 'checkoutPage.suggestSignInMessage',
+                    defaultMessage:
+                        'The email you provided is associated with an existing Venia account. Would you like to sign into this account?'
+                }),
+                timeout: false,
+                dismissable: true,
+                hasDismissAction: true,
+                dismissActionText: formatMessage({
+                    id: 'checkoutPage.suggestSignInDeclineMessage',
+                    defaultMessage: 'No, thanks'
+                }),
+                actionText: formatMessage({
+                    id: 'checkoutPage.suggestSignInConfirmMessage',
+                    defaultMessage: 'Yes, sign in'
+                }),
+                onAction: removeToast =>
+                    handleToastAction(
+                        removeToast,
+                        formApiRef.current.getValue('email')
+                    )
+            });
+        }
+    }, [addToast, formatMessage, showSignInToast, handleToastAction]);
+
     return (
         <Fragment>
             <FormError errors={Array.from(errors.values())} />
             <Form
                 className={classes.root}
+                data-cy="GuestForm-root"
                 initialValues={initialValues}
                 onSubmit={handleSubmit}
+                getApi={getFormApi}
             >
                 <div className={classes.email}>
                     <Field
@@ -94,9 +145,22 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete="off"
                             field="email"
                             id="email"
+                            data-cy="GuestForm-email"
                             validate={isRequired}
+                            onBlur={() =>
+                                handleValidateEmail(
+                                    formApiRef.current.getValue('email')
+                                )
+                            }
+                            onPaste={e => {
+                                const text = e.clipboardData.getData(
+                                    'text/plain'
+                                );
+                                handleValidateEmail(text);
+                            }}
                         />
                         {guestEmailMessage}
                     </Field>
@@ -112,6 +176,7 @@ const GuestForm = props => {
                         <TextInput
                             field="firstname"
                             id="firstname"
+                            data-cy="GuestForm-firstName"
                             validate={isRequired}
                         />
                     </Field>
@@ -127,12 +192,16 @@ const GuestForm = props => {
                         <TextInput
                             field="lastname"
                             id="lastname"
+                            data-cy="GuestForm-lastName"
                             validate={isRequired}
                         />
                     </Field>
                 </div>
                 <div className={classes.country}>
-                    <Country validate={isRequired} />
+                    <Country
+                        validate={isRequired}
+                        data-cy="GuestForm-country"
+                    />
                 </div>
                 <div className={classes.street0}>
                     <Field
@@ -145,6 +214,7 @@ const GuestForm = props => {
                         <TextInput
                             field="street[0]"
                             id="street0"
+                            data-cy="GuestForm-street0"
                             validate={isRequired}
                         />
                     </Field>
@@ -158,7 +228,11 @@ const GuestForm = props => {
                         })}
                         optional={true}
                     >
-                        <TextInput field="street[1]" id="street1" />
+                        <TextInput
+                            field="street[1]"
+                            id="street1"
+                            data-cy="GuestForm-street1"
+                        />
                     </Field>
                 </div>
                 <div className={classes.city}>
@@ -172,6 +246,7 @@ const GuestForm = props => {
                         <TextInput
                             field="city"
                             id="city"
+                            data-cy="GuestForm-city"
                             validate={isRequired}
                         />
                     </Field>
@@ -182,10 +257,14 @@ const GuestForm = props => {
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
                         optionValueKey={'id'}
+                        data-cy="GuestForm-region"
                     />
                 </div>
                 <div className={classes.postcode}>
-                    <Postcode validate={isRequired} />
+                    <Postcode
+                        validate={isRequired}
+                        data-cy="GuestForm-postcode"
+                    />
                 </div>
                 <div className={classes.telephone}>
                     <Field
@@ -198,13 +277,19 @@ const GuestForm = props => {
                         <TextInput
                             field="telephone"
                             id="telephone"
+                            data-cy="GuestForm-telephone"
                             validate={isRequired}
                         />
                     </Field>
                 </div>
                 <div className={classes.buttons}>
                     {cancelButton}
-                    <Button {...submitButtonProps}>{submitButtonText}</Button>
+                    <Button
+                        {...submitButtonProps}
+                        data-cy="GuestForm-submitButton"
+                    >
+                        {submitButtonText}
+                    </Button>
                 </div>
             </Form>
         </Fragment>
@@ -260,5 +345,7 @@ GuestForm.propTypes = {
         }).isRequired,
         street: arrayOf(string),
         telephone: string
-    })
+    }),
+    toggleSignInContent: func.isRequired,
+    setGuestSignInUsername: func.isRequired
 };

package/lib/components/CheckoutPage/ShippingInformation/card.js

@@ -28,7 +28,7 @@ const Card = props => {
     const additionalAddressString = `${city}, ${region} ${postcode} ${country}`;
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="Card-root">
             <span>{email}</span>
             <span>{nameString}</span>
             <span>{telephone}</span>

package/lib/components/CheckoutPage/ShippingInformation/shippingInformation.js

@@ -19,7 +19,9 @@ const ShippingInformation = props => {
         classes: propClasses,
         onSave,
         onSuccess,
-        toggleActiveContent
+        toggleActiveContent,
+        toggleSignInContent,
+        setGuestSignInUsername
     } = props;
     const talonProps = useShippingInformation({
         onSave,
@@ -71,6 +73,7 @@ const ShippingInformation = props => {
                 <LinkButton
                     onClick={handleEditShipping}
                     className={classes.editButton}
+                    data-cy="ShippingInformation-editButton"
                 >
                     <Icon
                         size={16}
@@ -100,12 +103,18 @@ const ShippingInformation = props => {
                 <AddressForm
                     onSuccess={onSuccess}
                     shippingData={shippingData}
+                    toggleSignInContent={toggleSignInContent}
+                    setGuestSignInUsername={setGuestSignInUsername}
                 />
             </div>
         </Fragment>
     );
 
-    return <div className={rootClassName}>{shippingInformation}</div>;
+    return (
+        <div className={rootClassName} data-cy="ShippingInformation-root">
+            {shippingInformation}
+        </div>
+    );
 };
 
 export default ShippingInformation;
@@ -124,5 +133,7 @@ ShippingInformation.propTypes = {
     }),
     onSave: func.isRequired,
     onSuccess: func.isRequired,
-    toggleActiveContent: func.isRequired
+    toggleActiveContent: func.isRequired,
+    toggleSignInContent: func.isRequired,
+    setGuestSignInUsername: func.isRequired
 };

package/lib/components/CheckoutPage/ShippingMethod/completedView.js

@@ -63,6 +63,7 @@ const CompletedView = props => {
                     <LinkButton
                         className={classes.editButton}
                         onClick={showUpdateMode}
+                        data-cy="CompletedView-editButton"
                     >
                         <Icon
                             size={16}

package/lib/components/CheckoutPage/ShippingMethod/shippingMethod.js

@@ -58,7 +58,7 @@ const ShippingMethod = props => {
 
         contents = (
             <Fragment>
-                <div className={classes.done}>
+                <div className={classes.done} data-cy="ShippingMethod-done">
                     <CompletedView
                         selectedShippingMethod={selectedShippingMethod}
                         showUpdateMode={showUpdateMode}
@@ -100,6 +100,7 @@ const ShippingMethod = props => {
                     />
                     <div className={classes.formButtons}>
                         <Button
+                            data-cy="ShippingMethod-submitButton"
                             priority="normal"
                             type="submit"
                             disabled={pageIsUpdating || isLoading}

package/lib/components/CheckoutPage/ShippingMethod/updateModal.js

@@ -45,6 +45,7 @@ const UpdateModal = props => {
                 id: 'checkoutPage.editShippingMethod',
                 defaultMessage: 'Edit Shipping Method'
             })}
+            data-cy="ShippingMethod-updateModal"
         >
             <FormError
                 classes={{ root: classes.errorContainer }}

package/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap

@@ -53,7 +53,9 @@ exports[`CheckoutPage renders address book for customer 1`] = `
       />
       <ShippingInformation
         onSave={[MockFunction setShippingInformationDone]}
+        setGuestSignInUsername={[MockFunction setGuestSignInUsername]}
         toggleActiveContent={[MockFunction toggleAddressBookContent]}
+        toggleSignInContent={[MockFunction toggleSignInContent]}
       />
     </div>
     <div
@@ -193,7 +195,9 @@ exports[`CheckoutPage renders an error and disables review order button if there
       />
       <ShippingInformation
         onSave={[MockFunction setShippingInformationDone]}
+        setGuestSignInUsername={[MockFunction setGuestSignInUsername]}
         toggleActiveContent={[MockFunction toggleAddressBookContent]}
+        toggleSignInContent={[MockFunction toggleSignInContent]}
       />
     </div>
     <div
@@ -257,6 +261,11 @@ exports[`CheckoutPage renders an error and disables review order button if there
     </div>
   </div>
   <GuestSignIn
+    initialValues={
+      Object {
+        "email": "",
+      }
+    }
     isActive={false}
     toggleActiveContent={[MockFunction toggleSignInContent]}
   />
@@ -316,7 +325,9 @@ exports[`CheckoutPage renders checkout content for customer - default address 1`
       />
       <ShippingInformation
         onSave={[MockFunction setShippingInformationDone]}
+        setGuestSignInUsername={[MockFunction setGuestSignInUsername]}
         toggleActiveContent={[MockFunction toggleAddressBookContent]}
+        toggleSignInContent={[MockFunction toggleSignInContent]}
       />
     </div>
     <div
@@ -414,7 +425,9 @@ exports[`CheckoutPage renders checkout content for customer - no default address
       />
       <ShippingInformation
         onSave={[MockFunction setShippingInformationDone]}
+        setGuestSignInUsername={[MockFunction setGuestSignInUsername]}
         toggleActiveContent={[MockFunction toggleAddressBookContent]}
+        toggleSignInContent={[MockFunction toggleSignInContent]}
       />
     </div>
     <div
@@ -550,7 +563,9 @@ exports[`CheckoutPage renders checkout content for guest on desktop 1`] = `
       />
       <ShippingInformation
         onSave={[MockFunction setShippingInformationDone]}
+        setGuestSignInUsername={[MockFunction setGuestSignInUsername]}
         toggleActiveContent={[MockFunction toggleAddressBookContent]}
+        toggleSignInContent={[MockFunction toggleSignInContent]}
       />
     </div>
     <div
@@ -589,6 +604,11 @@ exports[`CheckoutPage renders checkout content for guest on desktop 1`] = `
     </div>
   </div>
   <GuestSignIn
+    initialValues={
+      Object {
+        "email": "",
+      }
+    }
     isActive={false}
     toggleActiveContent={[MockFunction toggleSignInContent]}
   />
@@ -686,7 +706,9 @@ exports[`CheckoutPage renders checkout content for guest on mobile 1`] = `
       />
       <ShippingInformation
         onSave={[MockFunction setShippingInformationDone]}
+        setGuestSignInUsername={[MockFunction setGuestSignInUsername]}
         toggleActiveContent={[MockFunction toggleAddressBookContent]}
+        toggleSignInContent={[MockFunction toggleSignInContent]}
       />
     </div>
     <div
@@ -725,6 +747,11 @@ exports[`CheckoutPage renders checkout content for guest on mobile 1`] = `
     </div>
   </div>
   <GuestSignIn
+    initialValues={
+      Object {
+        "email": "",
+      }
+    }
     isActive={false}
     toggleActiveContent={[MockFunction toggleSignInContent]}
   />
@@ -756,6 +783,11 @@ exports[`CheckoutPage renders empty cart 1`] = `
     </h3>
   </div>
   <GuestSignIn
+    initialValues={
+      Object {
+        "email": "",
+      }
+    }
     isActive={false}
     toggleActiveContent={[MockFunction toggleSignInContent]}
   />

package/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js

@@ -65,6 +65,7 @@ const defaultTalonProps = {
     checkoutStep: 1,
     customer: null,
     error: false,
+    guestSignInUsername: '',
     handleSignIn: jest.fn().mockName('handleSignIn'),
     handlePlaceOrder: jest.fn().mockName('handlePlaceOrder'),
     hasError: false,
@@ -76,6 +77,7 @@ const defaultTalonProps = {
     orderDetailsLoading: false,
     orderNumber: null,
     placeOrderLoading: false,
+    setGuestSignInUsername: jest.fn().mockName('setGuestSignInUsername'),
     setIsUpdating: jest.fn().mockName('setIsUpdating'),
     setShippingInformationDone: jest
         .fn()

package/lib/components/CheckoutPage/checkoutPage.js

@@ -49,6 +49,7 @@ const CheckoutPage = props => {
         checkoutStep,
         customer,
         error,
+        guestSignInUsername,
         handlePlaceOrder,
         hasError,
         isCartEmpty,
@@ -60,6 +61,7 @@ const CheckoutPage = props => {
         orderNumber,
         placeOrderLoading,
         setCheckoutStep,
+        setGuestSignInUsername,
         setIsUpdating,
         setShippingInformationDone,
         scrollShippingInformationIntoView,
@@ -131,7 +133,12 @@ const CheckoutPage = props => {
         checkoutContent = (
             <div className={classes.empty_cart_container}>
                 <div className={classes.heading_container}>
-                    <h1 className={classes.heading}>{heading}</h1>
+                    <h1
+                        className={classes.heading}
+                        data-cy="ChekoutPage-heading"
+                    >
+                        {heading}
+                    </h1>
                 </div>
                 <h3>
                     <FormattedMessage
@@ -152,6 +159,7 @@ const CheckoutPage = props => {
                 </span>
                 <Button
                     className={classes.signInButton}
+                    data-cy="CheckoutPage-signInButton"
                     onClick={toggleSignInContent}
                     priority="normal"
                 >
@@ -231,6 +239,7 @@ const CheckoutPage = props => {
                     onClick={handleReviewOrder}
                     priority="high"
                     className={classes.review_order_button}
+                    data-cy="CheckoutPage-reviewOrderButton"
                     disabled={
                         reviewOrderButtonClicked ||
                         isUpdating ||
@@ -257,6 +266,7 @@ const CheckoutPage = props => {
                     onClick={handlePlaceOrder}
                     priority="high"
                     className={classes.place_order_button}
+                    data-cy="CheckoutPage-placeOrderButton"
                     disabled={
                         isUpdating || placeOrderLoading || orderDetailsLoading
                     }
@@ -293,7 +303,10 @@ const CheckoutPage = props => {
             });
         } else {
             headerText = formatMessage(
-                { id: 'checkoutPage.greeting', defaultMessage: 'Welcome' },
+                {
+                    id: 'checkoutPage.greeting',
+                    defaultMessage: 'Welcome {firstname}!'
+                },
                 { firstname: customer.firstname }
             );
         }
@@ -332,7 +345,12 @@ const CheckoutPage = props => {
                         cartItems={cartItems}
                         message={stockStatusMessageElement}
                     />
-                    <h1 className={classes.heading}>{headerText}</h1>
+                    <h1
+                        className={classes.heading}
+                        data-cy="ChekoutPage-headerText"
+                    >
+                        {headerText}
+                    </h1>
                 </div>
                 {signInContainerElement}
                 <div className={classes.shipping_information_container}>
@@ -341,6 +359,8 @@ const CheckoutPage = props => {
                             onSave={setShippingInformationDone}
                             onSuccess={scrollShippingInformationIntoView}
                             toggleActiveContent={toggleAddressBookContent}
+                            toggleSignInContent={toggleSignInContent}
+                            setGuestSignInUsername={setGuestSignInUsername}
                         />
                     </ScrollAnchor>
                 </div>
@@ -371,13 +391,15 @@ const CheckoutPage = props => {
 
     const signInElement = isGuestCheckout ? (
         <GuestSignIn
+            key={guestSignInUsername}
             isActive={activeContent === 'signIn'}
             toggleActiveContent={toggleSignInContent}
+            initialValues={{ email: guestSignInUsername }}
         />
     ) : null;
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="CheckoutPage-root">
             <StoreTitle>
                 {formatMessage({
                     id: 'checkoutPage.titleCheckout',

package/lib/components/ContactPage/__tests__/__snapshots__/contactLink.spec.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it does not render children when inactive 1`] = `null`;
+
+exports[`it renders children 1`] = `
+<div>
+  Contact Link
+</div>
+`;
+
+exports[`it shows shimmer while loading 1`] = `<Shimmer />`;

package/lib/components/ContactPage/__tests__/__snapshots__/contactPage.shimmer.spec.js.snap

@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders 1`] = `
+<article>
+  <div>
+    <Shimmer
+      classes={
+        Object {
+          "root_rectangle": undefined,
+        }
+      }
+    />
+  </div>
+  <div>
+    <div>
+      <div>
+        <Shimmer
+          classes={
+            Object {
+              "root_rectangle": "shimmer-class",
+            }
+          }
+        >
+           
+        </Shimmer>
+      </div>
+      <div>
+        <Shimmer
+          classes={
+            Object {
+              "root_rectangle": "shimmer-class",
+            }
+          }
+        >
+           
+        </Shimmer>
+      </div>
+      <div>
+        <div>
+          <Shimmer
+            classes={
+              Object {
+                "root_rectangle": undefined,
+              }
+            }
+          >
+             
+          </Shimmer>
+          <Shimmer
+            type="textInput"
+          />
+        </div>
+        <div>
+          <Shimmer
+            classes={
+              Object {
+                "root_rectangle": undefined,
+              }
+            }
+          >
+             
+          </Shimmer>
+          <Shimmer
+            type="textInput"
+          />
+        </div>
+        <div>
+          <Shimmer
+            classes={
+              Object {
+                "root_rectangle": undefined,
+              }
+            }
+          >
+             
+          </Shimmer>
+          <Shimmer
+            type="textInput"
+          />
+        </div>
+        <div>
+          <Shimmer
+            classes={
+              Object {
+                "root_rectangle": undefined,
+              }
+            }
+          >
+             
+          </Shimmer>
+          <Shimmer
+            type="textArea"
+          />
+        </div>
+        <div>
+          <Shimmer
+            type="button"
+          />
+        </div>
+      </div>
+    </div>
+    <div>
+      <Shimmer
+        classes={
+          Object {
+            "root_rectangle": undefined,
+          }
+        }
+      />
+    </div>
+  </div>
+</article>
+`;