From 5143e38d22f356a776c0d4189af3f8b9f0e02056 Mon Sep 17 00:00:00 2001
From: victorhmp <victor2142@gmail.com>
Date: Thu, 30 Jan 2020 16:29:20 -0300
Subject: [PATCH 1/3] Update verification for rendering children blocks

---
 react/BaseContent.tsx | 48 +++++++++++++++++--------------------------
 1 file changed, 19 insertions(+), 29 deletions(-)

diff --git a/react/BaseContent.tsx b/react/BaseContent.tsx
index 4cc55f32..4e999391 100644
--- a/react/BaseContent.tsx
+++ b/react/BaseContent.tsx
@@ -7,17 +7,15 @@ import React, {
   memo,
 } from 'react'
 import { FormattedMessage } from 'react-intl'
-import { ExtensionPoint } from 'vtex.render-runtime'
+import { ExtensionPoint, useChildBlock } from 'vtex.render-runtime'
 import { useOrderForm } from 'vtex.order-manager/OrderForm'
-import { useCheckoutURL } from 'vtex.checkout-resources/Utils'
 import { useCssHandles } from 'vtex.css-handles'
-import { Button } from 'vtex.styleguide'
 
 import { useMinicartState } from './MinicartContext'
 import styles from './styles.css'
 import { mapCartItemToPixel } from './modules/pixelHelper'
 import useDebouncedPush from './modules/debouncedPixelHook'
-import useCheckout from './modules/checkoutHook'
+import CheckoutButton from './CheckoutButton'
 
 interface Props {
   sideBarMode: boolean
@@ -44,8 +42,6 @@ const Content: FC<Props> = ({ finishShoppingButtonLink, children }) => {
   const push = useDebouncedPush()
   const handles = useCssHandles(CSS_HANDLES)
   const { variation } = useMinicartState()
-  const { url: checkoutUrl } = useCheckoutURL()
-  const goToCheckout = useCheckout()
 
   useEffect(() => {
     if (loading) {
@@ -67,7 +63,8 @@ const Content: FC<Props> = ({ finishShoppingButtonLink, children }) => {
   } sticky`
 
   const isCartEmpty = !loading && orderForm.items.length === 0
-  const hasChildren = Children.toArray(children).some(Boolean)
+  const hasProductListBlock = useChildBlock({ id: 'minicart-product-list' })
+  const hasMinicartSummaryBlock = useChildBlock({ id: 'minicart-summary' })
 
   if (isCartEmpty) {
     return (
@@ -78,36 +75,29 @@ const Content: FC<Props> = ({ finishShoppingButtonLink, children }) => {
     )
   }
 
-  if (hasChildren) {
+  if (hasProductListBlock && hasMinicartSummaryBlock) {
     return (
       <div className={minicartContentClasses}>
-        <MinicartHeader minicarTitleHandle={handles.minicartTitle} />
-        {Children.map(children, child =>
-          React.cloneElement(child as ReactElement, { renderAsChildren: true })
-        )}
+        <div
+          className={`w-100 h-100 overflow-y-auto ${handles.minicartProductListContainer}`}
+        >
+          <MinicartHeader minicarTitleHandle={handles.minicartTitle} />
+          <ExtensionPoint id="minicart-product-list" />
+        </div>
+        <div className={minicartFooterClasses}>
+          <ExtensionPoint id="minicart-summary" />
+          <CheckoutButton finishShoppingButtonLink={finishShoppingButtonLink} />
+        </div>
       </div>
     )
   }
 
   return (
     <div className={minicartContentClasses}>
-      <div
-        className={`w-100 h-100 overflow-y-auto ${handles.minicartProductListContainer}`}
-      >
-        <MinicartHeader minicarTitleHandle={handles.minicartTitle} />
-        <ExtensionPoint id="minicart-product-list" />
-      </div>
-      <div className={minicartFooterClasses}>
-        <ExtensionPoint id="minicart-summary" />
-        <Button
-          id="proceed-to-checkout"
-          onClick={() => goToCheckout(finishShoppingButtonLink || checkoutUrl)}
-          variation="primary"
-          block
-        >
-          <FormattedMessage id="store/minicart.go-to-checkout" />
-        </Button>
-      </div>
+      <MinicartHeader minicarTitleHandle={handles.minicartTitle} />
+      {Children.map(children, child =>
+        React.cloneElement(child as ReactElement, { renderAsChildren: true })
+      )}
     </div>
   )
 }

From bc9074a0ae3c0d08ffec2246e5f3e4adfbe04f2d Mon Sep 17 00:00:00 2001
From: victorhmp <victor2142@gmail.com>
Date: Thu, 30 Jan 2020 16:30:33 -0300
Subject: [PATCH 2/3] Update CHANGELOG

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5de7370d..54633646 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,12 +6,16 @@ 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]
+### Fixed
+- Duplicated components being rendered due to a faulty verification at BaseContent component.
 
 ## [2.42.0] - 2020-01-30
 ### Added
 - `Advanced configuration` section in the documentation.
 
 ## [2.41.2] - 2020-01-30
+### Fixed
+- Design improvements.
 
 ## [2.41.1] - 2020-01-30
 ### Fixed

From 974a55106521f05894fab95bacfd562154d5c3b7 Mon Sep 17 00:00:00 2001
From: victorhmp <victor2142@gmail.com>
Date: Fri, 31 Jan 2020 14:09:38 -0300
Subject: [PATCH 3/3] Fix typo on variable naming

---
 react/BaseContent.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/react/BaseContent.tsx b/react/BaseContent.tsx
index 4e999391..c7ffa28f 100644
--- a/react/BaseContent.tsx
+++ b/react/BaseContent.tsx
@@ -29,9 +29,11 @@ const CSS_HANDLES = [
   'minicartFooter',
 ] as const
 
-const MinicartHeader: FC<{ minicarTitleHandle: string }> = memo(
-  ({ minicarTitleHandle }) => (
-    <h3 className={`${minicarTitleHandle} t-heading-3 mv2 ph4 ph6-l c-on-base`}>
+const MinicartHeader: FC<{ minicartTitleHandle: string }> = memo(
+  ({ minicartTitleHandle }) => (
+    <h3
+      className={`${minicartTitleHandle} t-heading-3 mv2 ph4 ph6-l c-on-base`}
+    >
       <FormattedMessage id="store/minicart.title" />
     </h3>
   )
@@ -69,7 +71,7 @@ const Content: FC<Props> = ({ finishShoppingButtonLink, children }) => {
   if (isCartEmpty) {
     return (
       <Fragment>
-        <MinicartHeader minicarTitleHandle={handles.minicartTitle} />
+        <MinicartHeader minicartTitleHandle={handles.minicartTitle} />
         <ExtensionPoint id="minicart-empty-state" />
       </Fragment>
     )
@@ -81,7 +83,7 @@ const Content: FC<Props> = ({ finishShoppingButtonLink, children }) => {
         <div
           className={`w-100 h-100 overflow-y-auto ${handles.minicartProductListContainer}`}
         >
-          <MinicartHeader minicarTitleHandle={handles.minicartTitle} />
+          <MinicartHeader minicartTitleHandle={handles.minicartTitle} />
           <ExtensionPoint id="minicart-product-list" />
         </div>
         <div className={minicartFooterClasses}>
@@ -94,7 +96,7 @@ const Content: FC<Props> = ({ finishShoppingButtonLink, children }) => {
 
   return (
     <div className={minicartContentClasses}>
-      <MinicartHeader minicarTitleHandle={handles.minicartTitle} />
+      <MinicartHeader minicartTitleHandle={handles.minicartTitle} />
       {Children.map(children, child =>
         React.cloneElement(child as ReactElement, { renderAsChildren: true })
       )}