Update HOPagebuilderComponent

Author: Cody Nguyen

src/components/PageBuilderComponent/index.js

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+import { PageBuilderComponent } from 'simi-pagebuilder-react';
+
+const smRemoveMaxWidthOnMain = () => {
+    try {
+        if (document.getElementsByTagName('header')[0])
+            document.getElementsByTagName(
+                'header'
+            )[0].nextSibling.style.maxWidth = 'unset';
+    } catch (err) {
+        console.warn(err);
+    }
+};
+
+const HOPageBuilderComponent = props => {
+    useEffect(() => {
+        smRemoveMaxWidthOnMain();
+        return () => {
+            try {
+                //var(--venia-global-maxWidth);
+                if (document.getElementsByTagName('header')[0])
+                    document.getElementsByTagName(
+                        'header'
+                    )[0].nextSibling.style.maxWidth = '1440px';
+            } catch (err) {
+                console.warn(err);
+            }
+        };
+    }, []);
+    return <PageBuilderComponent {...props} />;
+};
+
+export default HOPageBuilderComponent;

src/components/ProductDetails/ProductFullDetail.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { PageBuilderComponent } from 'simi-pagebuilder-react';
+import PageBuilderComponent from '../PageBuilderComponent';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Form } from 'informed';
 import Price from '@magento/venia-ui/lib/components/Price';

src/components/ProductDetails/productFullDetail.css

@@ -1,3 +1,6 @@
+.smProductBuilderRoot > form {
+    padding: 0;
+}
 .smProductBuilderRoot h3 {
     font-size: 1rem !important;
     font-weight: 600 !important;

src/override/magentoRoute.js

@@ -5,7 +5,8 @@ import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
 
 import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/LoadingIndicator';
 import { useLocation, Link, useHistory } from 'react-router-dom';
-import { usePbFinder, PageBuilderComponent } from 'simi-pagebuilder-react';
+import { usePbFinder } from 'simi-pagebuilder-react';
+import PageBuilderComponent from '../components/PageBuilderComponent';
 import ProductDetails from '../components/ProductDetails';
 import ProductList from '../components/Products/list';
 import ProductGrid from '../components/Products/grid';
@@ -87,7 +88,6 @@ const MagentoRoute = () => {
         pageMaskedId !== 'notfound' &&
         (isNotFound || hasError || location.pathname === '/')
     ) {
-        smRemoveMaxWidthOnMain();
         return (
             <PageBuilderComponent
                 {...pbcProps}
@@ -99,15 +99,7 @@ const MagentoRoute = () => {
     } else if (pbLoading) {
         return fullPageLoadingIndicator;
     }
-    try {
-        if (document.getElementsByTagName('header')[0])
-            document.getElementsByTagName(
-                'header'
-            )[0].nextSibling.style.maxWidth = '1440px';
-    } catch (err) {
-        console.warn(err);
-    }
-
+    
     if (isLoading || isRedirect) {
         return fullPageLoadingIndicator;
     } else if (RootComponent) {
@@ -120,7 +112,6 @@ const MagentoRoute = () => {
             return fullPageLoadingIndicator;
         }
         if (type === 'PRODUCT') {
-            smRemoveMaxWidthOnMain();
             return (
                 <ProductDetails
                     {...componentData}
@@ -155,16 +146,4 @@ const MagentoRoute = () => {
     );
 };
 
-export default MagentoRoute;
-
-
-const smRemoveMaxWidthOnMain = () => {
-    try {
-        if (document.getElementsByTagName('header')[0])
-            document.getElementsByTagName(
-                'header'
-            )[0].nextSibling.style.maxWidth = 'unset';
-    } catch (err) {
-        console.warn(err);
-    }
-}
+export default MagentoRoute;