Skip to content

Commit

Permalink
Checkout Items Review Component (#2257)
Browse files Browse the repository at this point in the history 
* Added initial UI.
* Added total quantity header.
* Added show all items footer.
* Minor css change.
* Addressed PR comments.
* Added useItemsReview tests.
* Added ItemsReview UI component tests.
* Define click handler locally
* Restore rem
* UX changes.
* Snapshot updates.
* Added css animation.
* Reducing gap from 1 rem to 0.5 rem for product options
* show -> isHidden
* Removed grid gap and using margin-top for items to handle hidden items spacing issue.
* Update packages/venia-ui/lib/components/CheckoutPage/ItemsReview/item.css
* Update packages/venia-ui/lib/components/CheckoutPage/ItemsReview/item.css

Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>
Co-authored-by: Jimmy Sanford <jimbo@users.noreply.github.com>
Co-authored-by: Tommy Wiebell <twiebell@adobe.com>
  • Loading branch information
@revanth0212 @dpatil-magento
@jimbo @tjwiebell
4 people authored Mar 26, 2020
1 parent f179f80 commit 35ddc07
Show file tree
Hide file tree
Showing 19 changed files with 956 additions and 17 deletions.
102 changes: 102 additions & 0 deletions packages/peregrine/lib/talons/CheckoutPage/ItemsReview/__fixtures__/cartItems.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
export default {
cart: {
id: 'GXtkt675mPd3gYuvhWLd5iw5ekVoDj1b',
total_quantity: 7,
items: [
{
id: '29568',
product: {
id: 1093,
name: 'Jillian Top',
thumbnail: {
url:
'https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg',
__typename: 'ProductImage'
},
__typename: 'ConfigurableProduct'
},
quantity: 3,
configurable_options: [
{
id: 179,
option_label: 'Fashion Color',
value_id: 18,
value_label: 'Peach',
__typename: 'SelectedConfigurableOption'
},
{
id: 182,
option_label: 'Fashion Size',
value_id: 27,
value_label: 'M',
__typename: 'SelectedConfigurableOption'
}
],
__typename: 'ConfigurableCartItem'
},
{
id: '29570',
product: {
id: 1115,
name: 'Juno Sweater',
thumbnail: {
url:
'https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg',
__typename: 'ProductImage'
},
__typename: 'ConfigurableProduct'
},
quantity: 1,
configurable_options: [
{
id: 179,
option_label: 'Fashion Color',
value_id: 21,
value_label: 'Rain',
__typename: 'SelectedConfigurableOption'
},
{
id: 182,
option_label: 'Fashion Size',
value_id: 29,
value_label: 'XS',
__typename: 'SelectedConfigurableOption'
}
],
__typename: 'ConfigurableCartItem'
},
{
id: '29572',
product: {
id: 1152,
name: 'Angelina Tank Dress',
thumbnail: {
url:
'https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg',
__typename: 'ProductImage'
},
__typename: 'ConfigurableProduct'
},
quantity: 3,
configurable_options: [
{
id: 179,
option_label: 'Fashion Color',
value_id: 20,
value_label: 'Lilac',
__typename: 'SelectedConfigurableOption'
},
{
id: 182,
option_label: 'Fashion Size',
value_id: 26,
value_label: 'L',
__typename: 'SelectedConfigurableOption'
}
],
__typename: 'ConfigurableCartItem'
}
],
__typename: 'Cart'
}
};
12 changes: 12 additions & 0 deletions ...e/lib/talons/CheckoutPage/ItemsReview/__tests__/__snapshots__/useItemsReview.spec.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`returns correct shape 1`] = `
Object {
"hasErrors": false,
"isLoading": true,
"items": Array [],
"setShowAllItems": [Function],
"showAllItems": false,
"totalQuantity": 0,
}
`;
98 changes: 98 additions & 0 deletions packages/peregrine/lib/talons/CheckoutPage/ItemsReview/__tests__/useItemsReview.spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import React from 'react';
import { useLazyQuery } from '@apollo/react-hooks';

import createTestInstance from '../../../../../lib/util/createTestInstance';
import { useItemsReview } from '../useItemsReview';

import cartItems from '../__fixtures__/cartItems';

jest.mock('@apollo/react-hooks', () => ({
useLazyQuery: jest.fn().mockReturnValue([
() => {},
{
data: null,
error: null,
loading: true
}
])
}));

jest.mock('../../../../context/cart', () => {
const state = {
cartId: 'cart123'
};
const api = {};
const useCartContext = jest.fn(() => [state, api]);

return { useCartContext };
});

const Component = props => {
const talonProps = useItemsReview(props);

return <i talonProps={talonProps} />;
};

test('returns correct shape', () => {
const tree = createTestInstance(
<Component queries={{ getItemsInCart: jest.fn() }} />
);
const { root } = tree;
const { talonProps } = root.findByType('i').props;

expect(talonProps).toMatchSnapshot();
});

test('Should return total quantity from gql query', () => {
useLazyQuery.mockReturnValueOnce([
() => {},
{
data: cartItems,
error: null,
loading: false
}
]);
const tree = createTestInstance(
<Component queries={{ getItemsInCart: jest.fn() }} />
);
const { root } = tree;
const { talonProps } = root.findByType('i').props;

expect(talonProps.totalQuantity).toBe(cartItems.cart.total_quantity);
});

test('Should return 0 for total quantity if gql does not return total_quality', () => {
const newCartItems = {
...cartItems
};
newCartItems.cart.total_quantity = null;
useLazyQuery.mockReturnValueOnce([
() => {},
{
data: newCartItems,
error: null,
loading: false
}
]);
const tree = createTestInstance(
<Component queries={{ getItemsInCart: jest.fn() }} />
);
const { root } = tree;
const { talonProps } = root.findByType('i').props;

expect(talonProps.totalQuantity).toBe(0);
});

test('hasErrors in return props should be set to true if gql throws any errors', () => {
useLazyQuery.mockReturnValueOnce([
() => {},
{ data: null, loading: false, error: 'some error' }
]);
const tree = createTestInstance(
<Component queries={{ getItemsInCart: jest.fn() }} />
);
const { root } = tree;
const { talonProps } = root.findByType('i').props;

expect(talonProps.hasErrors).toBeTruthy();
});
64 changes: 64 additions & 0 deletions packages/peregrine/lib/talons/CheckoutPage/ItemsReview/useItemsReview.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { useEffect, useState, useCallback } from 'react';
import { useLazyQuery } from '@apollo/react-hooks';

import { useCartContext } from '../../../context/cart';

export const useItemsReview = props => {
const [showAllItems, setShowAllItems] = useState(false);

const {
queries: { getItemsInCart }
} = props;

const [{ cartId }] = useCartContext();

const [fetchItemsInCart, { data, error, loading }] = useLazyQuery(
getItemsInCart,
{
fetchPolicy: 'cache-and-network'
}
);

const setShowAllItemsFlag = useCallback(() => setShowAllItems(true), [
setShowAllItems
]);

useEffect(() => {
if (cartId) {
fetchItemsInCart({
variables: {
cartId
}
});
}
}, [cartId, fetchItemsInCart]);

useEffect(() => {
if (error) {
console.error(error);
}
}, [error]);

useEffect(() => {
/**
* If there are 2 or less than 2 items in cart
* set show all items to `true`.
*/
if (data && data.cart && data.cart.items.length <= 2) {
setShowAllItems(true);
}
}, [data]);

const items = data ? data.cart.items : [];

const totalQuantity = data ? +data.cart.total_quantity : 0;

return {
isLoading: !!loading,
items,
hasErrors: !!error,
totalQuantity,
showAllItems,
setShowAllItems: setShowAllItemsFlag
};
};
102 changes: 102 additions & 0 deletions packages/venia-ui/lib/components/CheckoutPage/ItemsReview/__fixtures__/cartItems.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
export default {
cart: {
id: 'GXtkt675mPd3gYuvhWLd5iw5ekVoDj1b',
total_quantity: 7,
items: [
{
id: '29568',
product: {
id: 1093,
name: 'Jillian Top',
thumbnail: {
url:
'https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg',
__typename: 'ProductImage'
},
__typename: 'ConfigurableProduct'
},
quantity: 3,
configurable_options: [
{
id: 179,
option_label: 'Fashion Color',
value_id: 18,
value_label: 'Peach',
__typename: 'SelectedConfigurableOption'
},
{
id: 182,
option_label: 'Fashion Size',
value_id: 27,
value_label: 'M',
__typename: 'SelectedConfigurableOption'
}
],
__typename: 'ConfigurableCartItem'
},
{
id: '29570',
product: {
id: 1115,
name: 'Juno Sweater',
thumbnail: {
url:
'https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg',
__typename: 'ProductImage'
},
__typename: 'ConfigurableProduct'
},
quantity: 1,
configurable_options: [
{
id: 179,
option_label: 'Fashion Color',
value_id: 21,
value_label: 'Rain',
__typename: 'SelectedConfigurableOption'
},
{
id: 182,
option_label: 'Fashion Size',
value_id: 29,
value_label: 'XS',
__typename: 'SelectedConfigurableOption'
}
],
__typename: 'ConfigurableCartItem'
},
{
id: '29572',
product: {
id: 1152,
name: 'Angelina Tank Dress',
thumbnail: {
url:
'https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg',
__typename: 'ProductImage'
},
__typename: 'ConfigurableProduct'
},
quantity: 3,
configurable_options: [
{
id: 179,
option_label: 'Fashion Color',
value_id: 20,
value_label: 'Lilac',
__typename: 'SelectedConfigurableOption'
},
{
id: 182,
option_label: 'Fashion Size',
value_id: 26,
value_label: 'L',
__typename: 'SelectedConfigurableOption'
}
],
__typename: 'ConfigurableCartItem'
}
],
__typename: 'Cart'
}
};
Loading

0 comments on commit 35ddc07

Please # to comment.