plugin updates

wp/wp-content/plugins/leadin/scripts/shared/Common/PreviewDisabled.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import UIContainer from '../UIComponents/UIContainer';
+import HubspotWrapper from './HubspotWrapper';
+import { pluginPath } from '../../constants/leadinConfig';
+import { __ } from '@wordpress/i18n';
+
+export default function PreviewDisabled() {
+  const errorHeader = __('Preview Unavailable', 'leadin');
+  const errorMessage = `${__(
+    'This block cannot be previewed within the Full Site Editor',
+    'leadin'
+  )} ${__('Switch to the Block Editor to view the content', 'leadin')}`;
+
+  return (
+    <HubspotWrapper pluginPath={pluginPath}>
+      <UIContainer textAlign="center">
+        <h4>{errorHeader}</h4>
+        <p>
+          <b>{errorMessage}</b>
+        </p>
+      </UIContainer>
+    </HubspotWrapper>
+  );
+}

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}`} />;
 }

wp/wp-content/plugins/leadin/scripts/shared/Meeting/MeetingEdit.tsx

@@ -15,6 +15,7 @@ import { getOrCreateBackgroundApp } from '../../utils/backgroundAppUtils';
 interface IMeetingEditProps extends IMeetingBlockProps {
   preview?: boolean;
   origin?: 'gutenberg' | 'elementor';
+  fullSiteEditor?: boolean;
 }
 
 function MeetingEdit({
@@ -23,6 +24,7 @@ function MeetingEdit({
   setAttributes,
   preview = true,
   origin = 'gutenberg',
+  fullSiteEditor,
 }: IMeetingEditProps) {
   const isBackgroundAppReady = useBackgroundAppContext();
   const monitorFormPreviewRender = usePostBackgroundMessage();
@@ -49,7 +51,9 @@ function MeetingEdit({
       {(isSelected || !url) && (
         <MeetingController url={url} handleChange={handleChange} />
       )}
-      {preview && url && <PreviewMeeting url={url} />}
+      {preview && url && (
+        <PreviewMeeting url={url} fullSiteEditor={fullSiteEditor} />
+      )}
     </Fragment>
   );
 }

wp/wp-content/plugins/leadin/scripts/shared/Meeting/PreviewMeeting.tsx

@@ -1,31 +1,36 @@
 import React, { Fragment, useEffect, useRef } from 'react';
 import UIOverlay from '../UIComponents/UIOverlay';
-import useMeetingsScript from './hooks/useMeetingsScript';
+import PreviewDisabled from '../Common/PreviewDisabled';
 
 interface IPreviewForm {
   url: string;
+  fullSiteEditor?: boolean;
 }
 
-export default function PreviewForm({ url }: IPreviewForm) {
-  const ready = useMeetingsScript();
+export default function PreviewForm({ url, fullSiteEditor }: IPreviewForm) {
   const inputEl = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (!ready) {
-      return;
-    }
     if (inputEl.current) {
-      inputEl.current.innerHTML = '';
-      const container = document.createElement('div');
-      container.dataset.src = `${url}?embed=true`;
-      container.classList.add('meetings-iframe-container');
-      inputEl.current.appendChild(container);
-      const embedScript = document.createElement('script');
-      embedScript.innerHTML =
-        'hbspt.meetings.create(".meetings-iframe-container");';
-      inputEl.current.appendChild(embedScript);
+      //@ts-expect-error Hubspot global
+      const hbspt = window.parent.hbspt || window.hbspt;
+      hbspt.meetings.create('.meetings-iframe-container');
     }
-  }, [url, ready, inputEl]);
+  }, [url, inputEl]);
 
-  return <Fragment>{url && <UIOverlay ref={inputEl}></UIOverlay>}</Fragment>;
+  if (fullSiteEditor) {
+    return <PreviewDisabled />;
+  }
+
+  return (
+    <Fragment>
+      {url && (
+        <UIOverlay
+          ref={inputEl}
+          className="meetings-iframe-container"
+          data-src={`${url}?embed=true`}
+        ></UIOverlay>
+      )}
+    </Fragment>
+  );
 }