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

package/lib/components/ContactPage/contactPage.js

@@ -0,0 +1,270 @@
+import React, { Fragment, useEffect } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { shape, string } from 'prop-types';
+import { Form } from 'informed';
+
+import { useToasts } from '@magento/peregrine';
+import { useContactPage } from '@magento/peregrine/lib/talons/ContactPage';
+
+import { useStyle } from '../../classify';
+import { isRequired } from '../../util/formValidators';
+
+import Button from '../Button';
+import CmsBlock from '../CmsBlock/block';
+import { Meta, StoreTitle } from '../Head';
+import FormError from '../FormError';
+import Field from '../Field';
+import TextInput from '../TextInput';
+import TextArea from '../TextArea';
+import LoadingIndicator from '../LoadingIndicator';
+import ErrorView from '../ErrorView';
+import ContactPageShimmer from './contactPage.shimmer';
+import defaultClasses from './contactPage.module.css';
+
+const BANNER_IDENTIFIER = 'contact-us-banner';
+const SIDEBAR_IDENTIFIER = 'contact-us-sidebar';
+const NOT_FOUND_MESSAGE =
+    "Looks like the page you were hoping to find doesn't exist. Sorry about that.";
+
+const ContactPage = props => {
+    const { classes: propClasses } = props;
+    const classes = useStyle(defaultClasses, propClasses);
+    const { formatMessage } = useIntl();
+    const talonProps = useContactPage({
+        cmsBlockIdentifiers: [BANNER_IDENTIFIER, SIDEBAR_IDENTIFIER]
+    });
+    const [, { addToast }] = useToasts();
+
+    const {
+        isEnabled,
+        cmsBlocks,
+        errors,
+        handleSubmit,
+        isBusy,
+        isLoading,
+        setFormApi,
+        response
+    } = talonProps;
+
+    useEffect(() => {
+        if (response && response.status) {
+            addToast({
+                type: 'success',
+                message: formatMessage({
+                    id: 'contactPage.submitMessage',
+                    defaultMessage: 'Your message has been sent.'
+                }),
+                timeout: 5000
+            });
+        }
+    }, [addToast, formatMessage, response]);
+
+    if (!isLoading && !isEnabled) {
+        return (
+            <Fragment>
+                <StoreTitle>
+                    {formatMessage({
+                        id: 'contactPage.title',
+                        defaultMessage: 'Contact Us'
+                    })}
+                </StoreTitle>
+                <ErrorView
+                    message={formatMessage({
+                        id: 'magentoRoute.routeError',
+                        defaultMessage: NOT_FOUND_MESSAGE
+                    })}
+                />
+            </Fragment>
+        );
+    }
+
+    if (isLoading) {
+        return <ContactPageShimmer />;
+    }
+
+    const maybeLoadingIndicator = isBusy ? (
+        <div className={classes.loadingContainer}>
+            <LoadingIndicator>
+                <FormattedMessage
+                    id={'contactPage.loadingText'}
+                    defaultMessage={'Sending'}
+                />
+            </LoadingIndicator>
+        </div>
+    ) : null;
+
+    const contactUsBannerContent = cmsBlocks.find(
+        item => item.identifier === BANNER_IDENTIFIER
+    )?.content;
+
+    const contactUsBanner = contactUsBannerContent ? (
+        <div className={classes.banner}>
+            <CmsBlock content={contactUsBannerContent} />
+        </div>
+    ) : null;
+
+    const contactUsSidebarContent = cmsBlocks.find(
+        item => item.identifier === SIDEBAR_IDENTIFIER
+    )?.content;
+
+    const contactUsSidebar = contactUsSidebarContent ? (
+        <div className={classes.sideContent}>
+            <CmsBlock content={contactUsSidebarContent} />
+        </div>
+    ) : null;
+
+    const pageTitle = formatMessage({
+        id: 'contactPage.title',
+        defaultMessage: 'Contact Us'
+    });
+
+    const metaDescription = formatMessage({
+        id: 'contactPage.metaDescription',
+        defaultMessage: 'Contact Us'
+    });
+
+    return (
+        <Fragment>
+            <StoreTitle>{pageTitle}</StoreTitle>
+            <Meta name="title" content={pageTitle} />
+            <Meta name="description" content={metaDescription} />
+            <article className={classes.root} data-cy="ContactPage-root">
+                {contactUsBanner}
+                <div className={classes.content}>
+                    <div
+                        className={classes.formContainer}
+                        data-cy="ContactPage-formContainer"
+                    >
+                        {maybeLoadingIndicator}
+                        <h1 className={classes.title}>
+                            <FormattedMessage
+                                id={'contactPage.titleText'}
+                                defaultMessage={'Contact Us'}
+                            />
+                        </h1>
+
+                        <p className={classes.subtitle}>
+                            <FormattedMessage
+                                id={'contactPage.infoText'}
+                                defaultMessage={`Drop us a line and we'll get back to you as soon as possible.`}
+                            />
+                        </p>
+                        <FormError
+                            allowErrorMessages
+                            errors={Array.from(errors.values())}
+                        />
+                        <Form
+                            getApi={setFormApi}
+                            className={classes.form}
+                            onSubmit={handleSubmit}
+                        >
+                            <Field
+                                id="contact-name"
+                                label={formatMessage({
+                                    id: 'global.name',
+                                    defaultMessage: 'Name'
+                                })}
+                            >
+                                <TextInput
+                                    autoComplete="name"
+                                    field="name"
+                                    id="contact-name"
+                                    validate={isRequired}
+                                    data-cy="name"
+                                />
+                            </Field>
+                            <Field
+                                id="contact-email"
+                                label={formatMessage({
+                                    id: 'global.email',
+                                    defaultMessage: 'Email'
+                                })}
+                            >
+                                <TextInput
+                                    autoComplete="email"
+                                    field="email"
+                                    id="contact-email"
+                                    validate={isRequired}
+                                    placeholder={formatMessage({
+                                        id: 'global.emailPlaceholder',
+                                        defaultMessage: 'abc@xyz.com'
+                                    })}
+                                    data-cy="email"
+                                />
+                            </Field>
+                            <Field
+                                id="contact-telephone"
+                                label={formatMessage({
+                                    id: 'contactPage.telephone',
+                                    defaultMessage: 'Phone Number'
+                                })}
+                                optional={true}
+                            >
+                                <TextInput
+                                    autoComplete="tel"
+                                    field="telephone"
+                                    id="contact-telephone"
+                                    placeholder={formatMessage({
+                                        id: 'contactPage.telephonePlaceholder',
+                                        defaultMessage: '(222)-222-2222'
+                                    })}
+                                    data-cy="telephone"
+                                />
+                            </Field>
+                            <Field
+                                id="contact-comment"
+                                label={formatMessage({
+                                    id: 'contactPage.comment',
+                                    defaultMessage: 'Message'
+                                })}
+                            >
+                                <TextArea
+                                    autoComplete="comment"
+                                    field="comment"
+                                    id="contact-comment"
+                                    validate={isRequired}
+                                    placeholder={formatMessage({
+                                        id: 'contactPage.commentPlaceholder',
+                                        defaultMessage: `Tell us what's on your mind`
+                                    })}
+                                    data-cy="comment"
+                                />
+                            </Field>
+                            <div className={classes.buttonsContainer}>
+                                <Button
+                                    priority="high"
+                                    type="submit"
+                                    disabled={isBusy}
+                                    data-cy="submit"
+                                >
+                                    <FormattedMessage
+                                        id={'contactPage.submit'}
+                                        defaultMessage={'Send'}
+                                    />
+                                </Button>
+                            </div>
+                        </Form>
+                    </div>
+                    {contactUsSidebar}
+                </div>
+            </article>
+        </Fragment>
+    );
+};
+
+ContactPage.propTypes = {
+    classes: shape({
+        loadingContainer: string,
+        banner: string,
+        sideContent: string,
+        root: string,
+        content: string,
+        formContainer: string,
+        title: string,
+        subtitle: string,
+        form: string,
+        buttonsContainer: string
+    })
+};
+
+export default ContactPage;

package/lib/components/ContactPage/contactPage.module.css

@@ -0,0 +1,81 @@
+.root {
+    composes: px-4 from global;
+}
+
+.banner {
+    composes: mb-8 from global;
+}
+
+.title {
+    composes: mb-2 from global;
+    composes: mt-4 from global;
+    composes: text-center from global;
+    composes: text-3xl from global;
+
+    /* Medium */
+    composes: md_text-left from global;
+    composes: md_text-5xl from global;
+}
+
+.subtitle {
+    composes: mb-4 from global;
+}
+
+.content {
+    /* Medium */
+    composes: md_flex from global;
+    composes: md_justify-center from global;
+}
+
+.formContainer,
+.sideContent {
+    /* Medium */
+    composes: md_w-1/2 from global;
+}
+
+.sideContent {
+    composes: border-gray-300 from global;
+    composes: border-solid from global;
+    composes: border-t from global;
+    composes: mt-6 from global;
+    composes: pt-10 from global;
+
+    /* Medium */
+    composes: md_border-none from global;
+    composes: md_mt-0 from global;
+    composes: md_pt-4 from global;
+    composes: md_pl-12 from global;
+}
+
+.form {
+    composes: gap-y-4 from global;
+    composes: grid from global;
+}
+
+.formErrors {
+    border-color: rgb(var(--venia-global-color-error));
+    border-style: solid;
+    border-width: 0 0 0 5px;
+    padding: 1rem 0 1rem 1rem;
+    display: grid;
+    grid-column: 1 / span 1;
+}
+
+.loadingContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background: rgba(252, 252, 252, 0.75);
+}
+
+.buttonsContainer {
+    composes: px-0 from global;
+    composes: py-4 from global;
+    composes: text-center from global;
+
+    /* Medium */
+    composes: md_text-left from global;
+}

package/lib/components/ContactPage/contactPage.shimmer.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '../../classify';
+import Shimmer from '../Shimmer';
+import defaultClasses from './contactPage.module.css';
+import shimmerClasses from './contactPage.shimmer.module.css';
+
+const ContactPageShimmer = props => {
+    const { classes: propClasses } = props;
+    const classes = useStyle(defaultClasses, shimmerClasses, propClasses);
+
+    return (
+        <article className={classes.root} data-cy="ContactPage-root">
+            <div className={classes.banner}>
+                <Shimmer classes={{ root_rectangle: classes.shimmerBanner }} />
+            </div>
+            <div className={classes.content}>
+                <div className={classes.formContainer}>
+                    <div className={classes.title}>
+                        <Shimmer classes={{ root_rectangle: classes.shimmer }}>
+                            &nbsp;
+                        </Shimmer>
+                    </div>
+
+                    <div className={classes.subtitle}>
+                        <Shimmer classes={{ root_rectangle: classes.shimmer }}>
+                            &nbsp;
+                        </Shimmer>
+                    </div>
+                    <div className={classes.form}>
+                        <div key="name">
+                            <Shimmer
+                                classes={{
+                                    root_rectangle: classes.shimmerLabel
+                                }}
+                            >
+                                &nbsp;
+                            </Shimmer>
+                            <Shimmer type="textInput" />
+                        </div>
+                        <div key="email">
+                            <Shimmer
+                                classes={{
+                                    root_rectangle: classes.shimmerLabel
+                                }}
+                            >
+                                &nbsp;
+                            </Shimmer>
+                            <Shimmer type="textInput" />
+                        </div>
+                        <div key="telephone">
+                            <Shimmer
+                                classes={{
+                                    root_rectangle: classes.shimmerLabel
+                                }}
+                            >
+                                &nbsp;
+                            </Shimmer>
+                            <Shimmer type="textInput" />
+                        </div>
+                        <div key="comment">
+                            <Shimmer
+                                classes={{
+                                    root_rectangle: classes.shimmerLabel
+                                }}
+                            >
+                                &nbsp;
+                            </Shimmer>
+                            <Shimmer type="textArea" />
+                        </div>
+                        <div className={classes.buttonsContainer}>
+                            <Shimmer type="button" />
+                        </div>
+                    </div>
+                </div>
+                <div className={classes.sideContent}>
+                    <Shimmer
+                        classes={{ root_rectangle: classes.shimmerSideContent }}
+                    />
+                </div>
+            </div>
+        </article>
+    );
+};
+
+ContactPageShimmer.propTypes = {
+    classes: shape({
+        root: string,
+        banner: string,
+        content: string,
+        formContainer: string,
+        title: string,
+        subtitle: string,
+        form: string,
+        buttonsContainer: string,
+        sideContent: string,
+        shimmer: string,
+        shimmerBanner: string,
+        shimmerLabel: string,
+        shimmerSideContent: string
+    })
+};
+
+export default ContactPageShimmer;

package/lib/components/ContactPage/contactPage.shimmer.module.css

@@ -0,0 +1,27 @@
+.shimmer {
+    composes: root_rectangle from '../Shimmer/shimmer.module.css';
+    display: block;
+}
+
+.shimmerBanner {
+    composes: shimmer;
+    width: 100%;
+    height: 510px;
+}
+
+.shimmerLabel {
+    composes: label from '../Field/field.module.css';
+    composes: shimmer;
+}
+
+.shimmerSideContent {
+    composes: shimmer;
+    width: 100%;
+    height: 500px;
+}
+
+@media only screen and (min-width: 769px) {
+    .shimmerBanner {
+        height: 300px;
+    }
+}

package/lib/components/ContactPage/index.js

@@ -0,0 +1,2 @@
+export { default } from './contactPage';
+export { default as ContactLink } from './contactLink';

package/lib/components/CreateAccount/createAccount.js

@@ -57,6 +57,7 @@ const CreateAccount = props => {
             disabled={isDisabled}
             type="submit"
             priority="high"
+            data-cy="CreateAccount-submitButton"
         >
             <FormattedMessage
                 id={'createAccount.createAccountText'}
@@ -91,6 +92,7 @@ const CreateAccount = props => {
                     validateOnBlur
                     mask={value => value && value.trim()}
                     maskOnBlur={true}
+                    data-cy="customer-firstname"
                 />
             </Field>
             <Field
@@ -106,6 +108,7 @@ const CreateAccount = props => {
                     validateOnBlur
                     mask={value => value && value.trim()}
                     maskOnBlur={true}
+                    data-cy="customer-lastname"
                 />
             </Field>
             <Field
@@ -121,6 +124,7 @@ const CreateAccount = props => {
                     validateOnBlur
                     mask={value => value && value.trim()}
                     maskOnBlur={true}
+                    data-cy="customer-email"
                 />
             </Field>
             <Password
@@ -139,6 +143,7 @@ const CreateAccount = props => {
                 validateOnBlur
                 mask={value => value && value.trim()}
                 maskOnBlur={true}
+                data-cy="password"
             />
             <div className={classes.subscribe}>
                 <Checkbox

package/lib/components/Dialog/dialog.js

@@ -87,6 +87,7 @@ const Dialog = props => {
     const maybeButtons = shouldShowButtons ? (
         <div className={classes.buttons}>
             <Button
+                data-cy="Dialog-cancelButton"
                 classes={cancelButtonClasses}
                 disabled={shouldDisableAllButtons}
                 onClick={onCancel}
@@ -99,6 +100,7 @@ const Dialog = props => {
                 />
             </Button>
             <Button
+                data-cy="Dialog-confirmButton"
                 classes={confirmButtonClasses}
                 disabled={confirmButtonDisabled}
                 priority="high"
@@ -114,7 +116,12 @@ const Dialog = props => {
 
     const maybeForm =
         isOpen || !shouldUnmountOnHide ? (
-            <Form className={classes.form} {...formProps} onSubmit={onConfirm}>
+            <Form
+                className={classes.form}
+                {...formProps}
+                onSubmit={onConfirm}
+                data-cy="Dialog-form"
+            >
                 {/* The Mask. */}
                 <button
                     className={classes.mask}
@@ -123,9 +130,14 @@ const Dialog = props => {
                     type="reset"
                 />
                 {/* The Dialog. */}
-                <div className={classes.dialog}>
+                <div className={classes.dialog} data-cy={title}>
                     <div className={classes.header}>
-                        <span className={classes.headerText}>{title}</span>
+                        <span
+                            className={classes.headerText}
+                            data-cy="Dialog-headerText"
+                        >
+                            {title}
+                        </span>
                         {maybeCloseXButton}
                     </div>
                     <div className={classes.body}>
@@ -138,7 +150,9 @@ const Dialog = props => {
 
     return (
         <Portal>
-            <aside className={rootClass}>{maybeForm}</aside>
+            <aside className={rootClass} data-cy="Dialog-root">
+                {maybeForm}
+            </aside>
         </Portal>
     );
 };

package/lib/components/ErrorMessage/errorMessage.js

@@ -10,8 +10,13 @@ const ErrorMessage = React.forwardRef((props, ref) => {
     const classes = useStyle(defaultClasses, props.classes);
 
     return (
-        <div className={classes.root} ref={ref}>
-            <span className={classes.errorMessage}>{children}</span>
+        <div className={classes.root} ref={ref} data-cy="ErrorMessage-root">
+            <span
+                className={classes.errorMessage}
+                data-cy="ErrorMessage-errorMessage"
+            >
+                {children}
+            </span>
         </div>
     );
 });

package/lib/components/ErrorView/errorView.js

@@ -53,10 +53,12 @@ const ErrorView = props => {
     };
 
     return (
-        <div className={classes.root} style={style}>
+        <div className={classes.root} style={style} data-cy="ErrorView-root">
             <div className={classes.content}>
                 <p className={classes.header}>{header}</p>
-                <p className={classes.message}>{message}</p>
+                <p className={classes.message} data-cy="ErrorView-message">
+                    {message}
+                </p>
                 <div className={classes.actionsContainer}>
                     <Button priority="high" type="button" onClick={handleClick}>
                         {buttonPrompt}

package/lib/components/Field/field.module.css

@@ -15,19 +15,23 @@
     min-height: 2.125rem;
 }
 
-.input {
-    background: white;
-    border: 2px solid rgb(var(--venia-global-color-gray-600));
+.input_base {
     border-radius: 6px;
-    color: rgb(var(--venia-global-color-text));
-    display: inline-flex;
-    flex: 0 0 100%;
     font-size: 1rem;
     height: 2.5rem;
     margin: 0;
     max-width: 100%;
     padding: calc(0.375rem - 1px) calc(0.625rem - 1px);
     width: 100%;
+}
+
+.input {
+    composes: input_base;
+    background: white;
+    border: 2px solid rgb(var(--venia-global-color-gray-600));
+    color: rgb(var(--venia-global-color-text));
+    display: inline-flex;
+    flex: 0 0 100%;
     -webkit-appearance: none;
 }
 

package/lib/components/FilterModal/CurrentFilters/currentFilter.js

@@ -23,7 +23,7 @@ const CurrentFilter = props => {
     const ariaLabel = formatMessage(
         {
             id: 'filterModal.action.clearFilterItem.ariaLabel',
-            defaultMessage: 'Clear filter'
+            defaultMessage: 'Clear filter "{name}"'
         },
         {
             name: item.title
@@ -31,8 +31,12 @@ const CurrentFilter = props => {
     );
 
     return (
-        <span className={classes.root}>
-            <Trigger action={handleClick} ariaLabel={ariaLabel}>
+        <span className={classes.root} data-cy="CurrentFilter-root">
+            <Trigger
+                action={handleClick}
+                ariaLabel={ariaLabel}
+                data-cy="CurrentFilter-trigger"
+            >
                 <Icon size={20} src={Remove} />
             </Trigger>
             <span className={classes.text}>{item.title}</span>