Merge pull request #436 from vtex-apps/feature/legacy-orderForm-setting

Add `enableOrderFormOptimization` setting to the app
vtex-apps · Mar 24, 2020 · 35f2cda · 35f2cda
2 parents 542f3d1 + 6183f0a
commit 35f2cda
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ 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]
+### Added
+- `enableOrderFormOptimization` setting.
 
 ## [2.92.0] - 2020-03-20
 

diff --git a/manifest.json b/manifest.json
@@ -89,17 +89,26 @@
               "type": "string"
             }
           },
-          "required": [
-            "rel",
-            "href"
-          ]
+          "required": ["rel", "href"]
         },
         "description": "Configure your store's favicons"
       },
       "searchTermPath": {
         "title": "Search Term Path",
         "type": "string",
         "description": "Indicate the search path of your store"
+      },
+      "advancedSettings": {
+        "title": "Advanced Store settings",
+        "type": "object",
+        "properties": {
+          "enableOrderFormOptimization": {
+            "title": "Enable orderForm optimization",
+            "type": "boolean",
+            "default": false,
+            "description": "This setting disables the legacy orderForm provider. More at: https://vtex.io/docs/recipes/store-management/enabling-order-form-optimization."
+          }
+        }
       }
     }
   },

diff --git a/react/StoreWrapper.js b/react/StoreWrapper.js
@@ -93,6 +93,7 @@ const StoreWrapper = ({ children }) => {
     metaTagRobots,
     storeName,
     faviconLinks,
+    enableOrderFormOptimization = false,
   } = settings
 
   const { canonicalHost, canonicalPath } = systemToCanonical(route)
@@ -108,6 +109,17 @@ const StoreWrapper = ({ children }) => {
 
   const parsedFavicons = useFavicons(faviconLinks)
 
+  const content = (
+    <OrderQueueProvider>
+      <OrderFormProviderCheckout>
+        <OrderItemsProvider>
+          <WrapperContainer className="vtex-store__template bg-base">
+            {children}
+          </WrapperContainer>
+        </OrderItemsProvider>
+      </OrderFormProviderCheckout>
+    </OrderQueueProvider>
+  )
   return (
     <Fragment>
       <Helmet
@@ -157,17 +169,16 @@ const StoreWrapper = ({ children }) => {
           <UserDataPixel />
           <ToastProvider positioning="window">
             <NetworkStatusToast />
-            <OrderFormProvider>
-              <OrderQueueProvider>
-                <OrderFormProviderCheckout>
-                  <OrderItemsProvider>
-                    <WrapperContainer className="vtex-store__template bg-base">
-                      {children}
-                    </WrapperContainer>
-                  </OrderItemsProvider>
-                </OrderFormProviderCheckout>
-              </OrderQueueProvider>
-            </OrderFormProvider>
+            {enableOrderFormOptimization ? (
+              content
+            ) : (
+              /** This is necessary for backwards compatibility, since stores
+               *  might still need the OrderFormProvider from store-resources.
+               *  If a store does not have `enableOrderFormOptimization` enabled,
+               *  we should always add this provider.
+               */
+              <OrderFormProvider>{content}</OrderFormProvider>
+            )}
           </ToastProvider>
         </PWAProvider>
       </PixelProvider>