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

package/i18n/en_US.json

@@ -104,6 +104,9 @@
     "checkoutPage.step4": "Saved Credit Card Information Successfully",
     "checkoutPage.stockStatusMessage": "An item in your cart is currently out-of-stock and must be removed in order to Checkout. Please return to your cart to remove the item.",
     "checkoutPage.subscribe": "Subscribe to news and updates",
+    "checkoutPage.suggestSignInConfirmMessage": "Yes, sign in",
+    "checkoutPage.suggestSignInDeclineMessage": "No, thanks",
+    "checkoutPage.suggestSignInMessage'": "The email you provided is associated with an existing Venia account. Would you like to sign into this account?",
     "checkoutPage.thankYou": "Thank you for your order!",
     "checkoutPage.titleCheckout": "Checkout",
     "checkoutPage.titleReceipt": "Receipt",
@@ -120,6 +123,15 @@
     "completedView.errorLoading": "Error loading selected shipping method. Please select again.",
     "completedView.shippingMethod": "Shipping Method",
     "Contact Us": "Contact Us",
+    "contactPage.title": "Contact Us",
+    "contactPage.loadingText": "Sending",
+    "contactPage.titleText": "Contact Us",
+    "contactPage.infoText": "Drop us a line and we'll get back to you as soon as possible.",
+    "contactPage.telephone": "Phone Number",
+    "contactPage.telephonePlaceholder": "(222)-222-2222",
+    "contactPage.comment": "Message",
+    "contactPage.commentPlaceholder": "Tell us what's on your mind",
+    "contactPage.submit": "Send",
     "country.label": "Country",
     "couponCode.apply": "Apply",
     "couponCode.couponCode": "Coupon Code",
@@ -143,6 +155,8 @@
     "createWishlistForm.privateRadio": "Private",
     "createWishlistForm.publicRadio": "Public",
     "createWishlistForm.saveButton": "Save",
+    "customAttributes.title": "Details",
+    "Customer Service": "Customer Service",
     "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...",
@@ -211,6 +225,7 @@
     "global.deleteButton": "Delete",
     "global.editButton": "Edit",
     "global.email": "Email",
+    "global.emailPlaceholder": "abc@xyz.com",
     "global.firstName": "First Name",
     "global.free": "Free",
     "global.home": "Home",
@@ -234,7 +249,6 @@
     "guestForm.continueToNextStep": "Continue to Shipping Method",
     "guestForm.emailMessage": "Set a password at the end of guest checkout to create an account in one easy step.",
     "Help": "Help",
-    "Live Chat": "Live Chat",
     "loadingIndicator.message": "Fetching Data...",
     "logo.title": "Venia",
     "magentoRoute.internalError": "Something went wrong. Sorry about that.",
@@ -251,6 +265,11 @@
     "navHeader.myAccountText": "My Account",
     "navHeader.signInText": "Sign In",
     "navigationTrigger.ariaLabel": "Toggle navigation panel",
+    "newsletter.subscribeMessage": "The email address is subscribed.",
+    "newsletter.loadingText": "Subscribing",
+    "newsletter.titleText": "Subscribe to Venia",
+    "newsletter.subscribeText": "Subscribe",
+    "newsletter.infoText": "Recieve the latest news, update and special offers right to your inbox.",
     "noProductsFound.noProductsFound": "Sorry! We couldn't find any products.",
     "noProductsFound.tryOneOfTheseCategories": "Try one of these categories",
     "Order Status": "Order Status",
@@ -393,6 +412,7 @@
     "sortItem.priceAsc": "Price: Low to High",
     "sortItem.priceDesc": "Price: High to Low",
     "sortItem.relevance": "Best Match",
+    "sortItem.position": "Position",
     "stockStatusMessage.message": "An item in your cart is currently out-of-stock and must be removed in order to Checkout.",
     "storedPayments.creditCard": "Credit Card",
     "storedPayments.delete": "Delete",

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import createTestInstance from '@magento/peregrine/lib/util/createTestInstance';
 import { useQuery } from '@apollo/client';
-import CategoryList from '../../../components/CategoryList';
 import RichContent from '../../../components/RichContent';
 import { StoreTitle } from '../../../components/Head';
 import CMSPage from '../cms';
@@ -20,7 +19,6 @@ jest.mock('../../../components/LoadingIndicator', () => {
     };
 });
 jest.mock('../../../components/RichContent', () => 'RichContent');
-jest.mock('../../../components/CategoryList', () => 'CategoryList');
 
 jest.mock('@magento/peregrine/lib/context/app', () => {
     const state = {
@@ -73,9 +71,6 @@ test('page is set to loading when checking the network for updates', () => {
                 cmsPage: {
                     url_key: 'cached_page',
                     content: 'Cached Page.'
-                },
-                storeConfig: {
-                    root_category_id: 2
                 }
             },
             error: false,
@@ -99,16 +94,14 @@ test('page is set to loading when checking the network for updates', () => {
     expect(mockSetPageLoading).toHaveBeenCalledWith(true);
 });
 
-test('render CategoryList when default content is present', () => {
+test('renders default content', () => {
     useQuery.mockImplementation(() => {
         return {
             data: {
                 cmsPage: {
+                    title: 'Home Page',
                     url_key: 'homepage',
                     content: 'CMS homepage content goes here.'
-                },
-                storeConfig: {
-                    root_category_id: 2
                 }
             },
             error: false,
@@ -117,13 +110,13 @@ test('render CategoryList when default content is present', () => {
     });
 
     const { root } = createTestInstance(<CMSPage {...props} />);
-    const categoryList = root.findByType(CategoryList);
-    expect(categoryList).toBeTruthy();
-    expect(categoryList.props.title).toEqual('Shop by category');
-    expect(categoryList.props.id).toEqual(2);
+    const pageTitle = root.findByType(StoreTitle).props.children;
+    const pageContent = root.findByType(RichContent).props.html;
+    expect(pageTitle).toEqual('Home Page');
+    expect(pageContent).toEqual('CMS homepage content goes here.');
 });
 
-test('render RichContent when default content is not present', () => {
+test('render RichContent when content is present', () => {
     useQuery.mockImplementation(() => {
         return {
             data: {
@@ -132,9 +125,6 @@ test('render RichContent when default content is not present', () => {
                     content_heading: 'This is a rich content heading',
                     content:
                         '<div class="richContent">This is rich content</div>'
-                },
-                storeConfig: {
-                    root_category_id: 2
                 }
             },
             error: false,
@@ -152,6 +142,49 @@ test('render RichContent when default content is not present', () => {
     );
 });
 
+test('do not render heading when empty', () => {
+    useQuery.mockImplementation(() => {
+        return {
+            data: {
+                cmsPage: {
+                    url_key: 'homepage',
+                    content_heading: '',
+                    content:
+                        '<div class="richContent">This is rich content</div>'
+                }
+            },
+            error: false,
+            loading: false
+        };
+    });
+
+    const { root } = createTestInstance(<CMSPage {...props} />);
+
+    expect(() => root.findByType('h1')).toThrow();
+});
+
+test('render root class with layout when defined', () => {
+    useQuery.mockImplementation(() => {
+        return {
+            data: {
+                cmsPage: {
+                    url_key: 'homepage',
+                    content_heading: 'This is a rich content heading',
+                    content:
+                        '<div class="richContent">This is rich content</div>',
+                    page_layout: '1column'
+                }
+            },
+            error: false,
+            loading: false
+        };
+    });
+
+    const { root } = createTestInstance(<CMSPage {...props} />);
+
+    expect(root.findByProps({ className: 'root_1column' })).toBeTruthy();
+});
+
 test('render meta information based on meta data from GraphQL', () => {
     useQuery.mockImplementation(() => {
         return {
@@ -162,9 +195,6 @@ test('render meta information based on meta data from GraphQL', () => {
                     title: 'Test Title',
                     meta_title: 'Test Meta Title',
                     meta_description: 'Test Meta Description'
-                },
-                storeConfig: {
-                    root_category_id: 2
                 }
             },
             error: false,

package/lib/RootComponents/CMS/cms.js

@@ -1,12 +1,12 @@
 import React, { Fragment } from 'react';
-import { number, shape, string } from 'prop-types';
+import { shape, string } from 'prop-types';
+
 import { fullPageLoadingIndicator } from '../../components/LoadingIndicator';
 import { useCmsPage } from '@magento/peregrine/lib/talons/Cms/useCmsPage';
 import RichContent from '../../components/RichContent';
-import CategoryList from '../../components/CategoryList';
 import { Meta, StoreTitle } from '../../components/Head';
 import { useStyle } from '../../classify';
-import { useIntl } from 'react-intl';
+import { toCamelCase } from '../../util/toCamelCase';
 
 import defaultClasses from './cms.module.css';
 
@@ -14,62 +14,58 @@ const CMSPage = props => {
     const { identifier } = props;
 
     const talonProps = useCmsPage({ identifier });
-    const {
-        cmsPage,
-        hasContent,
-        rootCategoryId,
-        shouldShowLoadingIndicator
-    } = talonProps;
-    const { formatMessage } = useIntl();
+    const { cmsPage, shouldShowLoadingIndicator } = talonProps;
     const classes = useStyle(defaultClasses, props.classes);
 
     if (shouldShowLoadingIndicator) {
         return fullPageLoadingIndicator;
     }
 
-    if (hasContent) {
-        const {
-            content_heading,
-            title,
-            meta_title,
-            meta_description,
-            content
-        } = cmsPage;
+    const {
+        content_heading,
+        title,
+        meta_title,
+        meta_description,
+        page_layout,
+        content
+    } = cmsPage;
 
-        const headingElement =
-            content_heading !== '' ? (
-                <h1 className={classes.heading}>{content_heading}</h1>
-            ) : null;
+    const headingElement =
+        content_heading !== '' ? (
+            <h1 className={classes.heading}>{content_heading}</h1>
+        ) : null;
 
-        const pageTitle = meta_title || title;
+    const pageTitle = meta_title || title;
+    const rootClassName = page_layout
+        ? classes[`root_${toCamelCase(page_layout)}`]
+        : classes.root;
 
-        return (
-            <Fragment>
-                <StoreTitle>{pageTitle}</StoreTitle>
-                <Meta name="title" content={pageTitle} />
-                <Meta name="description" content={meta_description} />
+    return (
+        <Fragment>
+            <StoreTitle>{pageTitle}</StoreTitle>
+            <Meta name="title" content={pageTitle} />
+            <Meta name="description" content={meta_description} />
+            <article className={rootClassName}>
                 {headingElement}
                 <RichContent html={content} />
-            </Fragment>
-        );
-    }
-
-    // Fallback to a category list if there is no cms content.
-    return (
-        <CategoryList
-            title={formatMessage({
-                id: 'cms.shopByCategory',
-                defaultMessage: 'Shop by category'
-            })}
-            id={rootCategoryId}
-        />
+            </article>
+        </Fragment>
     );
 };
 
 CMSPage.propTypes = {
-    id: number,
+    identifier: string,
     classes: shape({
-        heading: string
+        root: string,
+        heading: string,
+        root_empty: string,
+        root_1column: string,
+        root_2columnsLeft: string,
+        root_2columnsRight: string,
+        root_3columns: string,
+        root_cmsFullWidth: string,
+        root_categoryFullWidth: string,
+        root_productFullWidth: string
     })
 };
 

package/lib/RootComponents/CMS/cms.module.css

@@ -1,22 +1,25 @@
 .root {
-    padding: 1rem;
-}
-
-.title {
-    font-size: 1.5rem;
-    font-weight: 400;
-    margin: 0 0 1rem;
-    padding: 0.5rem;
+    composes: px-4 from global;
 }
 
 .heading {
-    line-height: 1.25em;
-}
+    composes: mb-2 from global;
+    composes: mt-4 from global;
+    composes: text-center from global;
+    composes: text-3xl from global;
 
-.layout_default {
-    padding: 0;
+    /* Medium */
+    composes: md_mb-10 from global;
+    composes: md_text-5xl from global;
 }
 
-.layout_1column {
-    composes: layout_default;
+.root_empty,
+.root_1column,
+.root_2columnsLeft,
+.root_2columnsRight,
+.root_3columns,
+.root_cmsFullWidth,
+.root_categoryFullWidth,
+.root_productFullWidth {
+    composes: root;
 }

package/lib/RootComponents/Category/NoProductsFound/noProductsFound.js

@@ -41,7 +41,7 @@ const NoProductsFound = props => {
     });
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="NoProductsFound-root">
             <Image
                 alt={headerText}
                 classes={{ image: classes.image, root: classes.imageContainer }}

package/lib/RootComponents/Category/__tests__/__snapshots__/category.spec.js.snap

@@ -4,7 +4,7 @@ exports[`Category Root Component error view does not render when data is present
 Array [
   "Meta",
   <CategoryContent
-    categoryId={3}
+    categoryId="Mg=="
     classes={Object {}}
     data={
       Object {
@@ -93,7 +93,7 @@ exports[`Category Root Component renders the correct tree 1`] = `
 Array [
   "Meta",
   <CategoryContent
-    categoryId={3}
+    categoryId="Mg=="
     classes={Object {}}
     data={
       Object {

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

@@ -41,6 +41,16 @@ Array [
             className="headerButtons"
           >
             <ProductSort
+              availableSortMethods={
+                Array [
+                  Object {
+                    "attribute": "sortItem.attribute",
+                    "id": "sortItem.method",
+                    "sortDirection": "ASC",
+                    "text": "sortItem.text",
+                  },
+                ]
+              }
               sortProps={
                 Array [
                   Object {
@@ -135,6 +145,16 @@ Array [
               }
             />
             <ProductSort
+              availableSortMethods={
+                Array [
+                  Object {
+                    "attribute": "sortItem.attribute",
+                    "id": "sortItem.method",
+                    "sortDirection": "ASC",
+                    "text": "sortItem.text",
+                  },
+                ]
+              }
               sortProps={
                 Array [
                   Object {
@@ -236,6 +256,16 @@ Array [
               }
             />
             <ProductSort
+              availableSortMethods={
+                Array [
+                  Object {
+                    "attribute": "sortItem.attribute",
+                    "id": "sortItem.method",
+                    "sortDirection": "ASC",
+                    "text": "sortItem.text",
+                  },
+                ]
+              }
               sortProps={
                 Array [
                   Object {
@@ -345,6 +375,16 @@ Array [
               }
             />
             <ProductSort
+              availableSortMethods={
+                Array [
+                  Object {
+                    "attribute": "sortItem.attribute",
+                    "id": "sortItem.method",
+                    "sortDirection": "ASC",
+                    "text": "sortItem.text",
+                  },
+                ]
+              }
               sortProps={
                 Array [
                   Object {
@@ -557,6 +597,16 @@ Array [
             className="headerButtons"
           >
             <ProductSort
+              availableSortMethods={
+                Array [
+                  Object {
+                    "attribute": "sortItem.attribute",
+                    "id": "sortItem.method",
+                    "sortDirection": "ASC",
+                    "text": "sortItem.text",
+                  },
+                ]
+              }
               sortProps={
                 Array [
                   Object {
@@ -694,6 +744,16 @@ Array [
             className="headerButtons"
           >
             <ProductSort
+              availableSortMethods={
+                Array [
+                  Object {
+                    "attribute": "sortItem.attribute",
+                    "id": "sortItem.method",
+                    "sortDirection": "ASC",
+                    "text": "sortItem.text",
+                  },
+                ]
+              }
               sortProps={
                 Array [
                   Object {

package/lib/RootComponents/Category/__tests__/category.spec.js

@@ -49,7 +49,7 @@ const talonProps = {
 };
 
 const categoryProps = {
-    id: 3
+    uid: 'Mg=='
 };
 
 describe('Category Root Component', () => {

package/lib/RootComponents/Category/__tests__/categoryContent.spec.js

@@ -75,6 +75,14 @@ const defaultProps = {
 };
 
 const talonProps = {
+    availableSortMethods: [
+        {
+            id: 'sortItem.method',
+            text: 'sortItem.text',
+            attribute: 'sortItem.attribute',
+            sortDirection: 'ASC'
+        }
+    ],
     categoryName: 'Name',
     categoryDescription: 'test',
     filters: {},

package/lib/RootComponents/Category/category.gql.js

@@ -2,8 +2,9 @@ import { gql } from '@apollo/client';
 
 export const GET_PAGE_SIZE = gql`
     query getPageSize {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             grid_per_page
         }
     }

package/lib/RootComponents/Category/category.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { number, shape, string } from 'prop-types';
+import { shape, string } from 'prop-types';
 import { useCategory } from '@magento/peregrine/lib/talons/RootComponents/Category';
 import { useStyle } from '../../classify';
 
@@ -10,10 +10,10 @@ import { GET_PAGE_SIZE } from './category.gql';
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
 
 const Category = props => {
-    const { id } = props;
+    const { uid } = props;
 
     const talonProps = useCategory({
-        id,
+        id: uid,
         queries: {
             getPageSize: GET_PAGE_SIZE
         }
@@ -45,7 +45,7 @@ const Category = props => {
         <Fragment>
             <Meta name="description" content={metaDescription} />
             <CategoryContent
-                categoryId={id}
+                categoryId={uid}
                 classes={classes}
                 data={categoryData}
                 isLoading={loading}
@@ -63,11 +63,11 @@ Category.propTypes = {
         root: string,
         title: string
     }),
-    id: number
+    uid: string
 };
 
 Category.defaultProps = {
-    id: 3
+    uid: 'Mg=='
 };
 
 export default Category;

package/lib/RootComponents/Category/categoryContent.js

@@ -46,6 +46,7 @@ const CategoryContent = props => {
     });
 
     const {
+        availableSortMethods,
         categoryName,
         categoryDescription,
         filters,
@@ -64,7 +65,7 @@ const CategoryContent = props => {
     const shouldShowFilterShimmer = filters === null;
 
     // If there are no products we can hide the sort button.
-    const shouldShowSortButtons = totalPagesFromData;
+    const shouldShowSortButtons = totalPagesFromData && availableSortMethods;
     const shouldShowSortShimmer = !totalPagesFromData && isLoading;
 
     const maybeFilterButtons = shouldShowFilterButtons ? (
@@ -84,7 +85,10 @@ const CategoryContent = props => {
     ) : null;
 
     const maybeSortButton = shouldShowSortButtons ? (
-        <ProductSort sortProps={sortProps} />
+        <ProductSort
+            sortProps={sortProps}
+            availableSortMethods={availableSortMethods}
+        />
     ) : shouldShowSortShimmer ? (
         <ProductSortShimmer />
     ) : null;
@@ -149,10 +153,13 @@ const CategoryContent = props => {
         <Fragment>
             <Breadcrumbs categoryId={categoryId} />
             <StoreTitle>{categoryName}</StoreTitle>
-            <article className={classes.root}>
+            <article className={classes.root} data-cy="CategoryContent-root">
                 <div className={classes.categoryHeader}>
                     <h1 className={classes.title}>
-                        <div className={classes.categoryTitle}>
+                        <div
+                            className={classes.categoryTitle}
+                            data-cy="CategoryContent-categoryTitle"
+                        >
                             {categoryTitle}
                         </div>
                     </h1>

package/lib/components/Accordion/section.js

@@ -8,7 +8,10 @@ import { useStyle } from '../../classify';
 import defaultClasses from './section.module.css';
 
 const Section = props => {
-    const { children, id, title } = props;
+    const { children, id, title, ...restProps } = props;
+
+    // Remove isOpen from restProps to avoid having it in the root container
+    delete restProps.isOpen;
 
     const { handleSectionToggle, openSectionIds } = useAccordionContext();
 
@@ -27,9 +30,10 @@ const Section = props => {
         : classes.contents_container_closed;
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} {...restProps}>
             <button
                 className={classes.title_container}
+                data-cy="Section-titleContainer"
                 onClick={handleSectionToggleWithId}
                 type="button"
             >

package/lib/components/AccountChip/accountChip.gql.js

@@ -2,8 +2,8 @@ import { gql } from '@apollo/client';
 
 export const GET_CUSTOMER_DETAILS = gql`
     query accountChipQuery {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             firstname
         }
     }