plugin updates

wp/wp-content/plugins/leadin/scripts/shared/Form/FormEdit.tsx

@@ -16,6 +16,7 @@ import { getOrCreateBackgroundApp } from '../../utils/backgroundAppUtils';
 interface IFormEditProps extends IFormBlockProps {
   preview: boolean;
   origin: 'gutenberg' | 'elementor';
+  fullSiteEditor?: boolean;
 }
 
 function FormEdit({
@@ -24,6 +25,7 @@ function FormEdit({
   setAttributes,
   preview = true,
   origin = 'gutenberg',
+  fullSiteEditor,
 }: IFormEditProps) {
   const { formId, formName } = attributes;
   const formSelected = portalId && formId;
@@ -63,7 +65,13 @@ function FormEdit({
       {formSelected && (
         <Fragment>
           {isSelected && <UISpacer />}
-          {preview && <PreviewForm portalId={portalId} formId={formId} />}
+          {preview && (
+            <PreviewForm
+              portalId={portalId}
+              formId={formId}
+              fullSiteEditor={fullSiteEditor}
+            />
+          )}
         </Fragment>
       )}
     </Fragment>

wp/wp-content/plugins/leadin/scripts/shared/Form/PreviewForm.tsx

@@ -1,29 +1,43 @@
 import React, { useEffect, useRef } from 'react';
 import UIOverlay from '../UIComponents/UIOverlay';
-import { formsScriptPayload, hublet } from '../../constants/leadinConfig';
-import useFormScript from './hooks/useFormsScript';
+import {
+  formsScriptPayload,
+  hublet as region,
+} from '../../constants/leadinConfig';
+import PreviewDisabled from '../Common/PreviewDisabled';
 
 export default function PreviewForm({
   portalId,
   formId,
+  fullSiteEditor,
 }: {
   portalId: number;
   formId: string;
+  fullSiteEditor?: boolean;
 }) {
   const inputEl = useRef<HTMLDivElement>(null);
-  const ready = useFormScript();
 
   useEffect(() => {
-    if (!ready) {
-      return;
-    }
     if (inputEl.current) {
-      inputEl.current.innerHTML = '';
-      const embedScript = document.createElement('script');
-      embedScript.innerHTML = `hbspt.forms.create({ portalId: '${portalId}', formId: '${formId}', region: '${hublet}', ${formsScriptPayload} });`;
-      inputEl.current.appendChild(embedScript);
-    }
-  }, [formId, portalId, ready, inputEl]);
+      //@ts-expect-error Hubspot global
+      const hbspt = window.parent.hbspt || window.hbspt;
 
-  return <UIOverlay ref={inputEl} />;
+      const additionalParams = formsScriptPayload.includes('qa')
+        ? { env: 'qa' }
+        : {};
+      hbspt.forms.create({
+        portalId,
+        formId,
+        region,
+        target: `#${inputEl.current.id}`,
+        ...additionalParams,
+      });
+    }
+  }, [formId, portalId, inputEl]);
+
+  if (fullSiteEditor) {
+    return <PreviewDisabled />;
+  }
+
+  return <UIOverlay ref={inputEl} id={`hbspt-previewform-${formId}`} />;
 }