Merge pull request #215 from vtex-apps/fix/transparency

Fix an issue with transparency

CHANGELOG.md

@@ -6,10 +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]
+### Fixed
+- Transparency effect in 'drawer' variant.
 
 ## [2.43.2] - 2020-02-12
 ### Fixed
-- Correctly add SKUs that might have attachments.
+- [Legacy] Correctly add SKUs that might have attachments.
 
 ## [2.43.1] - 2020-02-05
 ### Removed

docs/README.md

@@ -60,9 +60,15 @@ According to the `minicart.v2` composition, it can be highly customizable using
   },
   "minicart-base-content": {
     "blocks": ["minicart-empty-state"],
-    "children": ["minicart-product-list", "sticky-layout#minicart-footer"]
+    "children": ["minicart-product-list", "flex-layout.row#minicart-footer"]
   },
-  "sticky-layout#minicart-footer": {
+  "flex-layout.row#minicart-footer": {
+    "props": {
+      "blockClass": "minicart-footer"
+    },
+    "children": ["flex-layout.col#minicart-footer"]
+  },
+  "flex-layout.col#minicart-footer": {
     "children": ["minicart-summary", "minicart-checkout-button"]
   },
   "minicart-product-list": {

manifest.json

@@ -32,8 +32,7 @@
     "vtex.checkout-summary": "0.x",
     "vtex.checkout-resources": "0.x",
     "vtex.flex-layout": "0.x",
-    "vtex.rich-text": "0.x",
-    "vtex.sticky-layout": "0.x"
+    "vtex.rich-text": "0.x"
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

react/BaseContent.tsx

@@ -7,7 +7,7 @@ import React, {
   memo,
 } from 'react'
 import { FormattedMessage } from 'react-intl'
-import { ExtensionPoint, useChildBlock } from 'vtex.render-runtime'
+import { ExtensionPoint, useTreePath, useRuntime } from 'vtex.render-runtime'
 import { useOrderForm } from 'vtex.order-manager/OrderForm'
 import { useCssHandles } from 'vtex.css-handles'
 
@@ -22,6 +22,12 @@ interface Props {
   finishShoppingButtonLink: string
 }
 
+interface BlocksFromExtension {
+  blockId: string
+  extensionPointId: string
+  children: boolean
+}
+
 const CSS_HANDLES = [
   'minicartContentContainer',
   'minicartProductListContainer',
@@ -45,6 +51,8 @@ const Content: FC<Props> = ({ finishShoppingButtonLink, children }) => {
   const push = useDebouncedPush()
   const handles = useCssHandles(CSS_HANDLES)
   const { variation } = useMinicartState()
+  const { extensions } = useRuntime()
+  const { treePath } = useTreePath()
 
   useEffect(() => {
     if (loading) {
@@ -66,8 +74,24 @@ const Content: FC<Props> = ({ finishShoppingButtonLink, children }) => {
   } sticky`
 
   const isCartEmpty = !loading && orderForm.items.length === 0
-  const hasProductListBlock = useChildBlock({ id: 'minicart-product-list' })
-  const hasMinicartSummaryBlock = useChildBlock({ id: 'minicart-summary' })
+
+  /**
+   * The logic below is to check if the user provided the blocks
+   * 'minicart-product-list' and 'minicart-summary' via 'blocks'
+   * instead of 'children' in their implementation of 'minicart-base-content'.
+   * The blocksFromUserImplementation variable represents the result of concatenating
+   * the 'blocks' and the 'children' arrays from blocks.json.
+   */
+  const blocksFromUserImplementation = extensions[treePath].blocks
+  const minicartBlocksFromUserImplementation = blocksFromUserImplementation.filter(
+    (block: BlocksFromExtension) => {
+      !block.children &&
+        (block.extensionPointId === 'minicart-product-list' ||
+          block.extensionPointId === 'minicart-summary')
+    }
+  )
+  const shouldRenderUsingBlocks =
+    minicartBlocksFromUserImplementation.length === 2
 
   if (isCartEmpty) {
     return (
@@ -78,7 +102,7 @@ const Content: FC<Props> = ({ finishShoppingButtonLink, children }) => {
     )
   }
 
-  if (hasProductListBlock && hasMinicartSummaryBlock) {
+  if (shouldRenderUsingBlocks) {
     return (
       <div className={minicartContentClasses}>
         <div

store/blocks.jsonc

@@ -5,13 +5,15 @@
   },
   "minicart-base-content": {
     "blocks": ["minicart-empty-state"],
-    "children": ["minicart-product-list", "sticky-layout#minicart-footer"]
+    "children": ["minicart-product-list", "flex-layout.row#minicart-footer"]
   },
-  "sticky-layout#minicart-footer": {
+  "flex-layout.row#minicart-footer": {
     "props": {
-      "position": "bottom",
-      "blockClass": "minicart-default"
+      "blockClass": "minicart-footer"
     },
+    "children": ["flex-layout.col#minicart-footer"]
+  },
+  "flex-layout.col#minicart-footer": {
     "children": ["minicart-summary", "minicart-checkout-button"]
   },
   "minicart-product-list": {

styles/css/vtex.sticky-layout.css → styles/css/vtex.flex-layout.css

@@ -1,3 +1,3 @@
-.container--minicart-default {
+.flexRow--minicart-footer {
   box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15);
 }