Add disclaimer for sidebar widget preview

[MAILPOET-2743]

assets/css/src/components-form-editor/_preview.scss

@@ -67,3 +67,11 @@
 .mailpoet_form_preview_modal_overlay {
   z-index: 100010; // Boosted z-index to cover Helpscout beacon
 }
+
+.mailpoet_form_preview_disclaimer {
+  bottom: 10px;
+  font-size: 0.9em;
+  position: absolute;
+  right: 0;
+  width: 380px;
+}

assets/js/src/form_editor/components/preview.jsx

@@ -34,6 +34,7 @@ const getPreviewType = () => (window.localStorage.getItem('mailpoet_form_preview
 
 const FormPreview = () => {
   const [iframeLoaded, setIframeLoaded] = useState(false);
+  const [previewType, setPreviewType] = useState(getPreviewType());
 
   const formBlocks = useSelect(
     (select) => select('mailpoet-form-editor').getFormBlocks(),
@@ -88,12 +89,12 @@ const FormPreview = () => {
     window.localStorage.setItem('mailpoet_form_preview_last_form_type', type);
   }
 
-  function setPreviewType(type) {
+  function onPreviewTypeChange(type) {
+    setPreviewType(type);
     window.localStorage.setItem('mailpoet_form_preview_last_preview_type', type);
   }
 
   const formType = getFormType(formData.settings);
-  const previewType = getPreviewType();
   const urlData = {
     id: formData.id,
     form_type: formType,
@@ -135,7 +136,7 @@ const FormPreview = () => {
             </label>
           </div>
           <Preview
-            onChange={setPreviewType}
+            onChange={onPreviewTypeChange}
             selectedType={previewType}
           >
             {!iframeLoaded && (
@@ -150,6 +151,11 @@ const FormPreview = () => {
               onLoad={() => setIframeLoaded(true)}
               data-automation-id="form_preview_iframe"
             />
+            {formType === 'sidebar' && previewType === 'desktop' && (
+              <div className="mailpoet_form_preview_disclaimer">
+                {MailPoet.I18n.t('formPreviewSidebarDisclaimer')}
+              </div>
+            )}
           </Preview>
         </>
       )}

views/form/editor.html

@@ -155,6 +155,7 @@
   'formPreview': __('Form Preview'),
   'formPreviewDesktop': _x('Desktop', 'Desktop browser preview mode'),
   'formPreviewMobile': _x('Mobile', 'Mobile browser preview mode'),
+  'formPreviewSidebarDisclaimer': __('Psssst. We try our best to show you what the widget might look like, but better check the final result on your website.'),
   'noName': _x('no name', 'fallback for forms without a name in a form list'),
 }) %>
 <% endblock %>