Merge pull request #12 from clouda-inc/feature-sku-comparison

Limit comparison bucket size, Enhance comparison context to add array of items at once

CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+- Implemented loading behaviour for products comparison page.
+
+### Changed
+- Limit comparison bucket size and given it as app configuration parameter
+- Enhance product comparison context to add array of items at once 
+- Show notifications when comparison bucket is full
 
 ## [0.5.0] - 2020-11-19
 

docs/README.md

@@ -308,6 +308,18 @@ In any desired template, such as the `store.search`, add the `product-comparison
 | :------------: | :-----------: | :----------------------------: | :--------: |
 | `skuSpecificationsToHide` | `[string]` | List of SKU specification fields that should be hidden on the Product Comparison page. The desired SKU specification fields must be separated by comma. | `undefined` |
 
+
+### Step 6 - Change the comparison bucket size
+
+This is optional configuration, you can change the maximum number of items in comparison bucket by giving fixed number in app configuration. 
+Default value is 10 items, when you exceed maximum limit you will get a notification.
+
+#### Steps
+
+1. Go to `/admin/apps`, you will find `Product Comparison` app under `installed` apps
+2. Click on settings 
+3. Put the maximum comparison bucket size in your application
+
 ## Customization
 
 In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

manifest.json

@@ -27,7 +27,19 @@
  "vtex.slider-layout": "0.x",
  "vtex.list-context": "0.x",
  "vtex.product-list-context": "0.x",
- "vtex.flex-layout": "0.x"
+ "vtex.flex-layout": "0.x",
+ "vtex.apps-graphql": "2.x"
+ },
+ "settingsSchema": {
+ "title": "Product comparison",
+ "type": "object",
+ "properties": {
+ "maxNumberOfItemsToCompare": {
+ "title": "Comparison bucket upper limit",
+ "description": "Maximum number of items to compare. Default value is 10",
+ "type": "number"
+ }
+ }
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

messages/context.json

@@ -42,5 +42,6 @@
  "store/product-comparison.main-page.sort-by": "Sort by",
  "store/product-comparison.main-page.order-added": "Order added",
  "admin/editor.comparison-grid.product-specification-groups-to-be-removed.title": "Hide Product Specification Group",
- "admin/editor.comparison-grid.product-specification-groups-to-be-removed.description": "Names of product specification groups which needs to be hidden in comparison page (separate them by comma `,`)"
-}
+ "admin/editor.comparison-grid.product-specification-groups-to-be-removed.description": "Names of product specification groups which needs to be hidden in comparison page (separate them by comma `,`)",
+ "store/product-comparison.product-selector.upper-limit-exceeded": "Can't add this item to compare, bucket size exceeded"
+}

messages/en.json

@@ -42,5 +42,6 @@
  "store/product-comparison.main-page.sort-by": "Sort by",
  "store/product-comparison.main-page.order-added": "Order added",
  "admin/editor.comparison-grid.product-specification-groups-to-be-removed.title": "Hide Product Specification Group",
- "admin/editor.comparison-grid.product-specification-groups-to-be-removed.description": "Names of product specification groups which needs to be hidden in comparison page (separate them by comma `,`)"
-}
+ "admin/editor.comparison-grid.product-specification-groups-to-be-removed.description": "Names of product specification groups which needs to be hidden in comparison page (separate them by comma `,`)",
+ "store/product-comparison.product-selector.upper-limit-exceeded": "Can't add this item to compare, bucket size exceeded"
+}

messages/es.json

@@ -42,5 +42,6 @@
  "store/product-comparison.main-page.sort-by": "Sort by",
  "store/product-comparison.main-page.order-added": "Order added",
  "admin/editor.comparison-grid.product-specification-groups-to-be-removed.title": "Hide Product Specification Group",
- "admin/editor.comparison-grid.product-specification-groups-to-be-removed.description": "Names of product specification groups which needs to be hidden in comparison page (separate them by comma `,`)"
-}
+ "admin/editor.comparison-grid.product-specification-groups-to-be-removed.description": "Names of product specification groups which needs to be hidden in comparison page (separate them by comma `,`)",
+ "store/product-comparison.product-selector.upper-limit-exceeded": "Can't add this item to compare, bucket size exceeded"
+}

messages/pt.json

@@ -42,5 +42,6 @@
  "store/product-comparison.main-page.sort-by": "Sort by",
  "store/product-comparison.main-page.order-added": "Order added",
  "admin/editor.comparison-grid.product-specification-groups-to-be-removed.title": "Hide Product Specification Group",
- "admin/editor.comparison-grid.product-specification-groups-to-be-removed.description": "Names of product specification groups which needs to be hidden in comparison page (separate them by comma `,`)"
-}
+ "admin/editor.comparison-grid.product-specification-groups-to-be-removed.description": "Names of product specification groups which needs to be hidden in comparison page (separate them by comma `,`)",
+ "store/product-comparison.product-selector.upper-limit-exceeded": "Can't add this item to compare, bucket size exceeded"
+}

react/ComparisonPage.tsx

@@ -1,16 +1,16 @@
-import React, { ReactChildren, ReactChild } from 'react'
-import { pathOr, isEmpty } from 'ramda'
+import React, { ReactChild, ReactChildren } from 'react'
+import { isEmpty, pathOr } from 'ramda'
 import { useCssHandles } from 'vtex.css-handles'
 import {
+ Button,
  Layout,
- PageHeader,
  PageBlock,
- Button,
+ PageHeader,
+ Spinner,
  withToast,
- // Dropdown,
 } from 'vtex.styleguide'
 import ComparisonContext from './ProductComparisonContext'
-import { InjectedIntlProps, injectIntl, defineMessages } from 'react-intl'
+import { defineMessages, InjectedIntlProps, injectIntl } from 'react-intl'
 import './global.css'
 
 const CSS_HANDLES = ['pageContainer', 'sortBy', 'removeAllItemsButtonWrapper']
@@ -80,7 +80,9 @@ const ComparisonPage = ({ children, intl, showToast }: Props) => {
  }
 
  return isEmpty(comparisonProducts) ? (
- <div />
+ <div className={'mw3 center'}>
+ <Spinner />
+ </div>
  ) : (
  <div className={`${cssHandles.pageContainer} mw9 center`}>
  <Layout

react/ProductComparisonContext.tsx

@@ -7,11 +7,14 @@ import React, {
  useEffect,
 } from 'react'
 import { pathOr, reject, propEq, allPass } from 'ramda'
+import { useQuery } from 'react-apollo'
+import AppSettings from './queries/AppSettings.graphql'
 
 export interface State {
  isDrawerCollapsed: boolean
  showDifferences: boolean
  products: ProductToCompare[]
+ maxNumberOfItemsToCompare: number
 }
 
 interface SetShowDifferences {
@@ -24,6 +27,11 @@ interface AddAll {
  args: { products: ProductToCompare[] }
 }
 
+interface AddMultiple {
+ type: 'ADD_MULTIPLE'
+ args: { products: ProductToCompare[] }
+}
+
 interface RemoveAll {
  type: 'REMOVE_ALL'
 }
@@ -43,28 +51,68 @@ interface IsDrawerCollapsed {
  args: { isDrawerCollapsed: boolean }
 }
 
+interface SetMaxLimit {
+ type: 'SET_MAX_LIMIT'
+ args: { maxLimit: number }
+}
+
 type ReducerActions =
  | AddAll
+ | AddMultiple
  | Add
  | RemoveAll
  | Remove
  | SetShowDifferences
  | IsDrawerCollapsed
+ | SetMaxLimit
 
 export type Dispatch = (action: ReducerActions) => void
 
 const listReducer = (state: State, action: ReducerActions): State => {
  switch (action.type) {
  case 'ADD_ALL': {
  const products = pathOr([], ['args', 'products'], action)
+ const productsToCompare = [...state.products, ...products].slice(
+ 0,
+ state.maxNumberOfItemsToCompare
+ )
+ return {
+ ...state,
+ products: productsToCompare,
+ }
+ }
+ case 'ADD_MULTIPLE': {
+ const products = pathOr([], ['args', 'products'], action)
+
+ const productsToAdd = products.filter(
+ (product: ProductToCompare) =>
+ state.products.filter(
+ (existing: ProductToCompare) =>
+ existing.productId === product.productId &&
+ existing.skuId === product.skuId
+ ).length === 0
+ )
+
+ const newProductList = [...state.products, ...productsToAdd].slice(
+ 0,
+ state.maxNumberOfItemsToCompare
+ )
+
+ localStorage.setItem(
+ 'PRODUCTS_TO_COMPARE',
+ JSON.stringify(newProductList)
+ )
  return {
  ...state,
- products: [...state.products, ...products],
+ products: newProductList,
  }
  }
  case 'ADD': {
  const { product } = action.args
- const newProductList = [...state.products, product]
+ const newProductList = [...state.products, product].slice(
+ 0,
+ state.maxNumberOfItemsToCompare
+ )
  localStorage.setItem(
  'PRODUCTS_TO_COMPARE',
  JSON.stringify(newProductList)
@@ -105,16 +153,25 @@ const listReducer = (state: State, action: ReducerActions): State => {
  isDrawerCollapsed: action.args.isDrawerCollapsed,
  }
  }
+ case 'SET_MAX_LIMIT': {
+ return {
+ ...state,
+ maxNumberOfItemsToCompare: action.args.maxLimit,
+ }
+ }
  default: {
  throw new Error(`Unhandled action type on product-list-context`)
  }
  }
 }
 
+const MAX_ITEMS_TO_COMPARE = 10
+
 const DEFAULT_STATE: State = {
  isDrawerCollapsed: false,
  showDifferences: false,
  products: [] as ProductToCompare[],
+ maxNumberOfItemsToCompare: MAX_ITEMS_TO_COMPARE,
 }
 
 const ComparisonContext = createContext<State>(DEFAULT_STATE)
@@ -126,6 +183,7 @@ const initialState: State = {
  showDifferences: false,
  isDrawerCollapsed: false,
  products: [] as ProductToCompare[],
+ maxNumberOfItemsToCompare: MAX_ITEMS_TO_COMPARE,
 }
 
 interface Props {
@@ -135,6 +193,31 @@ interface Props {
 const ProductComparisonProvider = ({ children }: Props) => {
  const [state, dispatch] = useReducer(listReducer, initialState)
 
+ const { data: appSettingsData } = useQuery(AppSettings, {
+ variables: {
+ // eslint-disable-next-line no-undef
+ version: process.env.VTEX_APP_VERSION,
+ },
+ ssr: false,
+ })
+
+ useEffect(() => {
+ const appSettings = JSON.parse(
+ pathOr(`{}`, ['appSettings', 'message'], appSettingsData)
+ )
+
+ dispatch({
+ type: 'SET_MAX_LIMIT',
+ args: {
+ maxLimit: pathOr(
+ MAX_ITEMS_TO_COMPARE,
+ ['maxNumberOfItemsToCompare'],
+ appSettings
+ ),
+ },
+ })
+ }, [appSettingsData])
+
  useEffect(() => {
  const initialProducts = localStorage.getItem('PRODUCTS_TO_COMPARE')
  const productsToCompare = (initialProducts

react/ProductComparisonWrapper.tsx

@@ -5,6 +5,7 @@ import { ToastProvider } from 'vtex.styleguide'
 
 interface Props {
  children: ReactChildren | ReactChild
+ maxNumberOfItemsToCompare: number | undefined
 }
 const ProductComparisonWrapper = ({ children }: Props) => {
  const { ProductComparisonProvider } = ComparisonContext

react/components/drawer/drawer.css

@@ -9,7 +9,7 @@
  max-height: 500px;
  bottom: 0;
  left: 0;
- z-index: 1;
+ z-index: 2;
 }
 
 .drawerContainer :global(.vtex__icon-caret-up) {

react/components/productSelector/ProductSelector.tsx

@@ -26,6 +26,10 @@ const messages = defineMessages({
  defaultMessage: '',
  id: 'store/product-comparison.product-selector.compare',
  },
+ comparisonUpperLimit: {
+ defaultMessage: '',
+ id: 'store/product-comparison.product-selector.upper-limit-exceeded',
+ }
 })
 
 interface Props extends InjectedIntlProps {
@@ -49,16 +53,22 @@ const ProductSelector = ({ showToast, intl }: Props) => {
  const itemId = pathOr('', ['selectedItem', 'itemId'], valuesFromContext)
 
  const isDrawerCollapsed = pathOr(false, ['isDrawerCollapsed'], comparisonData)
+ const productsSelected = pathOr([], ['products'], comparisonData)
+ const maxItemsToCompare = pathOr(
+ 0,
+ ['maxNumberOfItemsToCompare'],
+ comparisonData
+ )
 
  useEffect(() => {
  const selectedProducts =
  productId && itemId
  ? find(
  allPass([propEq('productId', productId), propEq('skuId', itemId)])
- )(comparisonData.products)
+ )(productsSelected)
  : []
  setIsChecked(selectedProducts && !isEmpty(selectedProducts))
- }, [comparisonData.products, itemId, productId])
+ }, [productsSelected, itemId, productId])
 
  const showMessage = (message: string, show: boolean = true) => {
  if (showToast && show) {
@@ -69,7 +79,10 @@ const ProductSelector = ({ showToast, intl }: Props) => {
  }
 
  const productSelectorChanged = (e: { target: { checked: boolean } }) => {
- if (e.target.checked) {
+ if (e.target.checked && productsSelected.length === maxItemsToCompare) {
+ setIsChecked(false)
+ showMessage(`${intl.formatMessage(messages.comparisonUpperLimit)}`, true)
+ } else if (e.target.checked) {
  dispatchComparison({
  args: {
  product: { productId: productId, skuId: itemId },

react/global.css

@@ -9,3 +9,23 @@
  padding: unset;
  border: unset;
 }
+
+@-webkit-keyframes spin {
+ 0% { -webkit-transform: rotate(0deg); }
+ 100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+.productLoader {
+ border: 16px solid #f3f3f3;
+ border-radius: 50%;
+ border-top: 16px solid #3498db;
+ width: 120px;
+ height: 120px;
+ -webkit-animation: spin 2s linear infinite; /* Safari */
+ animation: spin 2s linear infinite;
+}

react/queries/AppSettings.graphql

@@ -0,0 +1,6 @@
+query AppSettings($version: String) {
+ appSettings(app: "vtex.product-comparison", version: $version)
+ @context(provider: "vtex.apps-graphql") {
+ message
+ }
+}

react/typings/vtex.styleguide.d.ts

@@ -10,6 +10,7 @@ declare module 'vtex.styleguide' {
  export const PageHeader: ComponentType<InputProps>
  export const PageBlock: ComponentType<InputProps>
  export const ToastProvider: ComponentType<InputProps>
+ export const Spinner: ComponentType<InputProps>
  export const ToastConsumer: ComponentType<InputProps>
  export const Dropdown: ComponentType<InputProps>
  export const withToast