Press4 399 - removed the Adminbar from Iframe for site view

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'moment', 'react', 'wp-api-fetch', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => '4697b2445a35ed2572dc');
+<?php return array('dependencies' => array('lodash', 'moment', 'react', 'wp-api-fetch', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => '590c7bd6d4eda520d356');

src/components/OnboardingScreen.js

@@ -1,5 +1,5 @@
 import { Alert, Button, Title } from "@newfold/ui-component-library";
-import { useState } from "@wordpress/element";
+import { useEffect, useState } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import classNames from "classnames";
 import { ReactComponent as ComingSoonIllustration } from "../icons/coming-soon.svg";
@@ -8,14 +8,15 @@ import { NewfoldRuntime } from "../sdk/NewfoldRuntime";
 import { OnboardingList } from "./OnboardingList";
 import { Section } from "./Section";
 import { SiteStatus } from "./SiteStatus";
+import useThumbnail from "./useThumbnail";
 
 const Text = {
   Pending: {
     title: NewfoldRuntime.hasCapability("isEcommerce")
       ? __("Congrats on your new store!", "wp-module-ecommerce")
       : __("Congrats on your new site!", "wp-module-ecommerce"),
     description: __(
-      "Your site is currently displaying a \"Coming Soon\" page.",
+      'Your site is currently displaying a "Coming Soon" page.',
       "wp-module-ecommerce"
     ),
     Illustration: ComingSoonIllustration,
@@ -38,6 +39,7 @@ export function OnboardingScreen({
     : Text.Live;
 
   const [hovered, setIsHovered] = useState(false);
+  const [thumbnail, setThumbnail] = useState();
 
   const handleMouseOver = () => {
     setIsHovered(true);
@@ -47,10 +49,10 @@ export function OnboardingScreen({
     setIsHovered(false);
   };
 
- const iframeOnLoad= () => {
-  window.frames["iframe-preview"].document.getElementById("wpadminbar").style.display = "none"
- }
-     
+  useEffect(async () => {
+    const data = await useThumbnail(NewfoldRuntime.homeUrl);
+    setThumbnail(data?.thumbnail_loc);
+  }, []);
 
   return (
     <Section.Container
@@ -110,21 +112,22 @@ export function OnboardingScreen({
                         "nfd-box-content nfd-z-[2] nfd-opacity-100",
                         "nfd-flex nfd-flex-col nfd-justify-center nfd-items-center",
                         "md:nfd-w-[520px] md:min-[783px]:nfd-w-[387px] md:min-[768px]:nfd-w-[670px]",
-                        "lg:min-[1024px]:nfd-w-[486px] lg:nfd-w-[520px] lg:nfd-h-[258px]",
+                        "lg:min-[1024px]:nfd-w-[486px] lg:nfd-w-[520px] lg:nfd-h-[245px]",
                         "xl:min-[1280px]:nfd-w-[360px]",
                         "2xl:nfd-w-[520px]"
                       )}
                     >
-                      <iframe
-                      onLoad={iframeOnLoad}
-                      id="iframe-preview"
-                        title="Preview"
-                        className="nfd-w-[400%] nfd-min-h-[400%] nfd-basis-full nfd-scale-[0.25] nfd-overflow-hidden nfd-relative nfd-top-[-9px]"
-                        src={NewfoldRuntime.homeUrl}
-                        scrolling="no"
-                        name="iframe-preview"
-                        sandbox seamless
-                      ></iframe>
+                      {thumbnail ? (
+                        <img
+                          className="nfd-w-full nfd-h-full"
+                          src={thumbnail}
+                          alt="image not available"
+                        />
+                      ) : (
+                        <Illustration
+                          className={classNames("nfd-h-full", "nfd-w-full")}
+                        />
+                      )}
                     </div>
                   </div>
                 )}
@@ -135,9 +138,9 @@ export function OnboardingScreen({
                   )}
                 >
                   <Button
-                   style={{
-                    display: hovered ? "block" : "none",
-                  }}
+                    style={{
+                      display: hovered ? "block" : "none",
+                    }}
                     as="a"
                     className="nfd-bg-canvas "
                     href={NewfoldRuntime.siteDetails.url}

src/components/useThumbnail.js

@@ -0,0 +1,24 @@
+const REACT_APP_THUMBNAIL_URL =
+  'https://thumbnail.uapi.newfold.com/v1/thumbnail/get-screenshot';
+
+const REACT_APP_THUMBNAIL_JWT =
+  'eyJhbGciOiJSUzI1NiIsImtpZCI6InRodW1ibmFpbCIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1cm46amFydmlzOmJsdWVob3N0Iiwic2NvcGUiOiJ1c2VyLWZlIiwiYWN0Ijp7InN1YiI6ImphcnZpczpibHVlaG9zdDp1c2VyOnRlc3R1c2VyIiwicm9sZSI6ImFkbWluIn0sImF1ZCI6IlFBIiwiZXhwIjoxOTk2MTY4NDM2LCJpYXQiOjE2ODA1OTI0MzZ9.RDo_m2PP18ZAduFbCM1FVfDFpAh41785DtTkxRotN8qLcce95FZN8JkMiZdY7FOVzYLpAoY8bX6I8jcD7Libz1Q1Q02Qxy1vLX5-CUuwQ9VOioqs6637gBDspmO9ZjKj7Qy4DNnSzVW_e6qQQye9ZGDmeI1HsSm9LYhtTM6sPI7maSqMtCfCnJNJGHW0nO3AI1s4m11f6cxYHATypol6mNcVb1Jw7ex9e4-azWWOdESPotGxTJaA4kWDMrxIRR1Sg_0RLuurjvXMDLqCKarYGCH-JhDBIjyNS8j1ikTYY9rhPzim438u1Cp-txfPzMlopOSIW5zBuc5X7B9g2y8-TQ';
+
+const fetchThumbnail = async (siteUrl, override) => {
+  const result = await fetch(
+    `${REACT_APP_THUMBNAIL_URL}?site_url=${siteUrl}&force_override=${override}`,
+    {
+      headers: {
+        Authorization: `Bearer ${REACT_APP_THUMBNAIL_JWT}`,
+      },
+    }
+  );
+  return await result.json();
+};
+
+const useThumbnail = async (siteUrl, override = false) => {
+  const result = await fetchThumbnail(siteUrl, override);
+  return result;
+};
+
+export default useThumbnail;