Mobile Item Added to Cart Popover Component

[spencern]

Mobile Item Added to Cart Popover Component

Overview / Summary

Create a popover component which displays the most recent item added to the cart. This component should display a single Cart Item and a button with a link to the checkout page. This component should be added to the Storefront starter-kit This component should only be displayed on mobile devices

Expected use cases

This component will be used whenever a mobile user adds a product to their cart.

Where should this component live

This component should be created in the starterkit.

Images

// Pseudo-markup for the mobile cart Popover
<Popover>
  <div name="itemAddedToCart">
    <Image size=thumbnail src=cartItemImage/>
    <span cart-item-qty /> <span cart-item-name /> <span>added to cart</span>
  </div>
  <Button link=checkout">
</Popover>

Data

Props

propTypes: {
  cartItem: PropTypes.shape(),
}

Data Fetching

None. The item should be passed as a prop into this component

State Store

All data comes from props. No global state used.

Render Criteria

• The Mobile Item Added to Cart Popover is rendered when a customer in a mobile viewport successfully adds an item to their cart. When the MiniCart is rendered in this way, the dropdown (another component) should only display for 3 seconds unless the user hovers over the cart icon or the dropdown during that timeout. This behavior should be wired up as part of this issue.

Breakpoints

The Mobile Item Added to Cart Popover should be shown on browsers from 959px and narrower

UI States

Desktop

The Mobile Item Added to Cart Popover is not displayed for desktop users.

Mobile

Normal

Zeplin: https://app.zeplin.io/project/5afc82f5e8d73e250ff9d855/screen/5adf99f52f1dbdd37e7c611c The normal state of the Popover consists of one section and a button. The upper section of the popover should display the item that was most recently added to the cart, it's image, qty, and name and the phrase "added to cart" Below this section should be a single button linking to the checkout

Empty

This component should not be rendered without an item to display

[kieckhafer]

The dropdown (another component) should only display for 3 seconds unless the user hovers over the cart icon or the dropdown during that timeout. This behavior should be wired up as part of this issue.

@spencern Is this behavior necessary, considering this component is only shown on mobile sizes where "hover" isn't really a thing?

[kieckhafer]

My work on this is on hold, as we've decided to move the CartCheckoutButton out of the component library and into the starterkit. I've been working with the component library version, I'm going to stop work until https://github.com/reactioncommerce/reaction-component-library/pull/110 and the PR to create the new button inside this repo are both pulled in.

[spencern]

@kieckhafer good question - I think the mobile view renders this additional behavior unnecessary on mobile, but this PR and the PR to connect the mini-cart should play nicely together.