From 3f9b5028518b6c8a3b6652eb3dcc6390ca62874a Mon Sep 17 00:00:00 2001
From: AndreiAnton <andrei.anton@mindcell.ro>
Date: Tue, 6 Oct 2020 13:50:07 +0300
Subject: [PATCH 1/5] added condition for checkbox

---
 CHANGELOG.md                                  |  2 ++
 .../productSelector/ProductSelector.tsx       | 25 ++++++++++++++++---
 react/typings/global.d.ts                     |  1 +
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c0650b..76b1a4f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- added a 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
+
 ## [0.1.0] - 2020-09-29
 
 ### Changed
diff --git a/react/components/productSelector/ProductSelector.tsx b/react/components/productSelector/ProductSelector.tsx
index cbcfbd0..85d8bb9 100644
--- a/react/components/productSelector/ProductSelector.tsx
+++ b/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>
   )
diff --git a/react/typings/global.d.ts b/react/typings/global.d.ts
index db5de29..2815931 100644
--- a/react/typings/global.d.ts
+++ b/react/typings/global.d.ts
@@ -10,6 +10,7 @@ interface ToastInput {
 interface ProductToCompare {
   productId: string
   skuId: string
+  categoryId?: string
 }
 interface Sku {
   itemId: string

From c69f0f811c58d9b22c52ac97851be2385291c70f Mon Sep 17 00:00:00 2001
From: Ovi <covidiu97@gmail.com>
Date: Thu, 15 Oct 2020 13:05:23 +0300
Subject: [PATCH 2/5] Add extra css handles

---
 react/ComparisonPage.tsx                     |  4 ++--
 react/components/drawer/ComparisonDrawer.tsx | 15 ++++++++++-----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/react/ComparisonPage.tsx b/react/ComparisonPage.tsx
index f7a2361..ede50e5 100644
--- a/react/ComparisonPage.tsx
+++ b/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"
diff --git a/react/components/drawer/ComparisonDrawer.tsx b/react/components/drawer/ComparisonDrawer.tsx
index 2b31fd4..5735069 100644
--- a/react/components/drawer/ComparisonDrawer.tsx
+++ b/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"

From 863c1b5ee0c9d6d1b88327efabc5f7cf0d25a365 Mon Sep 17 00:00:00 2001
From: oviolion <68231117+oviolion@users.noreply.github.com>
Date: Tue, 27 Oct 2020 15:48:55 +0200
Subject: [PATCH 3/5] Update CHANGELOG.md

Co-authored-by: Breno Calazans <brenocalazans@gmail.com>
---
 CHANGELOG.md | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 87df7a7..c54e22a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-- added a 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
+### 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
 
@@ -51,4 +57,3 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Add changelog
 - Product comparison page basic functionality 
 
-

From 45204164c950fbaf20b4df21eb986781b1a42349 Mon Sep 17 00:00:00 2001
From: Ovi <covidiu97@gmail.com>
Date: Wed, 28 Oct 2020 10:46:28 +0200
Subject: [PATCH 4/5] Revert "Add extra css handles"

This reverts commit c69f0f81
---
 react/ComparisonPage.tsx                     |  4 ++--
 react/components/drawer/ComparisonDrawer.tsx | 15 +++++----------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/react/ComparisonPage.tsx b/react/ComparisonPage.tsx
index ede50e5..f7a2361 100644
--- a/react/ComparisonPage.tsx
+++ b/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', 'removeAllItemsButtonWrapper']
+const CSS_HANDLES = ['pageContainer', 'sortBy']
 
 interface Props extends InjectedIntlProps {
   children: ReactChildren | ReactChild
@@ -106,7 +106,7 @@ const ComparisonPage = ({ children, intl, showToast }: Props) => {
                   value={`productName`}
                 /> */}
               </div>
-              <div className={cssHandles.removeAllItemsButtonWrapper}>
+              <div>
                 <Button
                   variation="tertiary"
                   size="regular"
diff --git a/react/components/drawer/ComparisonDrawer.tsx b/react/components/drawer/ComparisonDrawer.tsx
index 5735069..2b31fd4 100644
--- a/react/components/drawer/ComparisonDrawer.tsx
+++ b/react/components/drawer/ComparisonDrawer.tsx
@@ -15,9 +15,6 @@ const CSS_HANDLES = [
   'comparisonButtons',
   'compareProductsButton',
   'drawer',
-  'compareProductButtonWrapper',
-  'removeAllWrapper',
-  'hideOrShowText',
 ]
 
 const messages = defineMessages({
@@ -147,14 +144,12 @@ 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`}
                 >
-                    <span className={cssHandles.hideOrShowText}>
-                      {!isCollapsed
-                          ? intl.formatMessage(messages.hide)
-                          : intl.formatMessage(messages.show)}
-                    </span>
+                  {!isCollapsed
+                    ? intl.formatMessage(messages.hide)
+                    : intl.formatMessage(messages.show)}
                 </button>
               </div>
-              <div className={`flex mr2 ml2 ${cssHandles.removeAllWrapper}`}>
+              <div className="flex mr2 ml2">
                 <Button
                   block
                   variation="danger-tertiary"
@@ -164,7 +159,7 @@ const ComparisonDrawer = ({ showToast, intl, comparisonPageUrl }: Props) => {
                   {intl.formatMessage(messages.removeAll)}
                 </Button>
               </div>
-              <div className={`flex mr2 ml2 ${cssHandles.compareProductButtonWrapper}`} onClick={onClickCompare}>
+              <div className="flex mr2 ml2" onClick={onClickCompare}>
                 <Button
                   block
                   size="small"

From 1523b3ba0d51add6065b4904bd1878fca2f825e2 Mon Sep 17 00:00:00 2001
From: Ovi <covidiu97@gmail.com>
Date: Wed, 28 Oct 2020 10:47:45 +0200
Subject: [PATCH 5/5] Revert "Update CHANGELOG.md" to remove the CSS handles

---
 CHANGELOG.md | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c54e22a..7e083d7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,11 +9,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### 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
 
@@ -57,3 +52,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Add changelog
 - Product comparison page basic functionality 
 
+