added condition for checkbox

CHANGELOG.md

@@ -7,8 +7,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- Condition for comparing products based on the category tree of the first product selected for comparison, this condition renders the checkbox unclickable for products that do not match the category of the first selected product.
+- CSS Handles:
+  - `removeAllItemsButtonWrapper`
+  - `compareProductButtonWrapper`
+  - `removeAllWrapper`
+  - `hideOrShowText`
+
 ## [0.2.0] - 2020-10-08
 
+
 ## [0.1.0] - 2020-09-29
 
 ### Changed
@@ -48,4 +57,3 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Add changelog
 - Product comparison page basic functionality 
 
-

react/ComparisonPage.tsx

@@ -13,7 +13,7 @@ import ComparisonContext from './ProductComparisonContext'
 import { InjectedIntlProps, injectIntl, defineMessages } from 'react-intl'
 import './global.css'
 
-const CSS_HANDLES = ['pageContainer', 'sortBy']
+const CSS_HANDLES = ['pageContainer', 'sortBy', 'removeAllItemsButtonWrapper']
 
 interface Props extends InjectedIntlProps {
   children: ReactChildren | ReactChild
@@ -106,7 +106,7 @@ const ComparisonPage = ({ children, intl, showToast }: Props) => {
                   value={`productName`}
                 /> */}
               </div>
-              <div>
+              <div className={cssHandles.removeAllItemsButtonWrapper}>
                 <Button
                   variation="tertiary"
                   size="regular"

react/components/drawer/ComparisonDrawer.tsx

@@ -15,6 +15,9 @@ const CSS_HANDLES = [
   'comparisonButtons',
   'compareProductsButton',
   'drawer',
+  'compareProductButtonWrapper',
+  'removeAllWrapper',
+  'hideOrShowText',
 ]
 
 const messages = defineMessages({
@@ -144,12 +147,14 @@ const ComparisonDrawer = ({ showToast, intl, comparisonPageUrl }: Props) => {
                   onClick={onExpandCollapse}
                   className={`${cssHandles.expandCollapseButton} bg-transparent bn-ns t-small c-action-primary hover-c-action-primary pointer`}
                 >
-                  {!isCollapsed
-                    ? intl.formatMessage(messages.hide)
-                    : intl.formatMessage(messages.show)}
+                    <span className={cssHandles.hideOrShowText}>
+                      {!isCollapsed
+                          ? intl.formatMessage(messages.hide)
+                          : intl.formatMessage(messages.show)}
+                    </span>
                 </button>
               </div>
-              <div className="flex mr2 ml2">
+              <div className={`flex mr2 ml2 ${cssHandles.removeAllWrapper}`}>
                 <Button
                   block
                   variation="danger-tertiary"
@@ -159,7 +164,7 @@ const ComparisonDrawer = ({ showToast, intl, comparisonPageUrl }: Props) => {
                   {intl.formatMessage(messages.removeAll)}
                 </Button>
               </div>
-              <div className="flex mr2 ml2" onClick={onClickCompare}>
+              <div className={`flex mr2 ml2 ${cssHandles.compareProductButtonWrapper}`} onClick={onClickCompare}>
                 <Button
                   block
                   size="small"

react/components/productSelector/ProductSelector.tsx

@@ -30,9 +30,10 @@ const messages = defineMessages({
 
 interface Props extends InjectedIntlProps {
   showToast?: (input: ToastInput) => void
+  withCondition?: boolean
 }
 
-const ProductSelector = ({ showToast, intl }: Props) => {
+const ProductSelector = ({ showToast, intl, withCondition }: Props) => {
   const cssHandles = useCssHandles(CSS_HANDLES)
   const [isChecked, setIsChecked] = useState(false)
   const valuesFromContext = useProductSummary()
@@ -68,11 +69,18 @@ const ProductSelector = ({ showToast, intl }: Props) => {
     }
   }
 
+  const categoryArrayLength = valuesFromContext?.product?.categories.length;
+  const categoryAvailable = categoryArrayLength === 1 ? valuesFromContext?.product?.categories[0] : valuesFromContext?.product?.categories[categoryArrayLength - 2]
+
   const productSelectorChanged = (e: { target: { checked: boolean } }) => {
     if (e.target.checked) {
       dispatchComparison({
         args: {
-          product: { productId: productId, skuId: itemId },
+          product: {
+            productId: productId,
+            skuId: itemId,
+            categoryId: categoryAvailable,
+          },
         },
         type: 'ADD',
       })
@@ -85,7 +93,11 @@ const ProductSelector = ({ showToast, intl }: Props) => {
     } else {
       dispatchComparison({
         args: {
-          product: { productId: productId, skuId: itemId },
+          product: {
+            productId: productId,
+            skuId: itemId,
+            categoryId: categoryAvailable,
+          },
         },
         type: 'REMOVE',
       })
@@ -103,6 +115,9 @@ const ProductSelector = ({ showToast, intl }: Props) => {
     e.stopPropagation()
   }
 
+  const categoryCheck = (comparisonData?.products[0]?.categoryId &&
+    categoryAvailable !== comparisonData?.products[0]?.categoryId)
+
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
@@ -117,6 +132,10 @@ const ProductSelector = ({ showToast, intl }: Props) => {
         name={`${productId}-${itemId}-product-comparison`}
         onChange={productSelectorChanged}
         value={isChecked}
+        disabled={
+          withCondition &&
+          categoryCheck
+        }
       />
     </div>
   )

react/typings/global.d.ts

@@ -10,6 +10,7 @@ interface ToastInput {
 interface ProductToCompare {
   productId: string
   skuId: string
+  categoryId?: string
 }
 interface Sku {
   itemId: string