From f933ddc7aaadcf698ad90f48cd96a16b3395ee2a Mon Sep 17 00:00:00 2001
From: manikantakailasa <manikanta.kailasa@gmail.com>
Date: Wed, 29 Nov 2023 10:12:04 +0530
Subject: [PATCH] local view on no-site

---
 build/index.asset.php              |  2 +-
 src/components/OnboardingScreen.js | 78 ++++++++++++++++--------------
 2 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/build/index.asset.php b/build/index.asset.php
index d70b852f..429b163d 100644
--- a/build/index.asset.php
+++ b/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' => 'b0da7018c69582662c24');
+<?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');
diff --git a/src/components/OnboardingScreen.js b/src/components/OnboardingScreen.js
index 18c4229d..86ecfb31 100644
--- a/src/components/OnboardingScreen.js
+++ b/src/components/OnboardingScreen.js
@@ -1,29 +1,29 @@
-import { Alert, Button, Title } from '@newfold/ui-component-library';
-import { useEffect, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
-import { ReactComponent as ComingSoonIllustration } from '../icons/coming-soon.svg';
-import { ReactComponent as WelcomeIllustration } from '../icons/store-live.svg';
-import { NewfoldRuntime } from '../sdk/NewfoldRuntime';
-import { OnboardingList } from './OnboardingList';
-import { Section } from './Section';
-import { SiteStatus } from './SiteStatus';
-import useThumbnail from './useThumbnail';
+import { Alert, Button, Title } from "@newfold/ui-component-library";
+import { useEffect, useState } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import classNames from "classnames";
+import { ReactComponent as ComingSoonIllustration } from "../icons/coming-soon.svg";
+import { ReactComponent as WelcomeIllustration } from "../icons/store-live.svg";
+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'),
+    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.',
-      'wp-module-ecommerce'
+      "wp-module-ecommerce"
     ),
     Illustration: ComingSoonIllustration,
   },
   Live: {
-    title: __('Ready to go to the next level?', 'wp-module-ecommerce'),
-    description: __('Your site is live to the world!', 'wp-module-ecommerce'),
+    title: __("Ready to go to the next level?", "wp-module-ecommerce"),
+    description: __("Your site is live to the world!", "wp-module-ecommerce"),
     Illustration: WelcomeIllustration,
   },
 };
@@ -59,14 +59,14 @@ export function OnboardingScreen({
       className="nfd-welcome-section"
       showShadowBox={showShadowBox}
     >
-      <Section.Header title={__('Home', 'wp-module-ecommerce')} />
+      <Section.Header title={__("Home", "wp-module-ecommerce")} />
       <Section.Content className="nfd-app-section-home">
         <div className="nfd-flex nfd-flex-col nfd-gap-6">
           <div
             className={classNames(
-              'nfd-grid nfd-gap-6 nfd-min-h-[350px]',
-              'sm:nfd-grid-cols-1',
-              'xl:nfd-grid-cols-2'
+              "nfd-grid nfd-gap-6 nfd-min-h-[350px]",
+              "sm:nfd-grid-cols-1",
+              "xl:nfd-grid-cols-2"
             )}
           >
             <div className="nfd-flex nfd-flex-col nfd-justify-start nfd-items-start nfd-gap-4">
@@ -89,53 +89,57 @@ export function OnboardingScreen({
                 onMouseOver={handleMouseOver}
                 onMouseOut={handleMouseLeave}
                 className={classNames(
-                  'nfd-relative  nfd-flex-col nfd-justify-center nfd-items-center',
-                  'nfd-border-[#CBD5E1] nfd-border-[1px] nfd-border-solid nfd-rounded-md'
+                  "nfd-relative  nfd-flex-col nfd-justify-center nfd-items-center",
+                  "nfd-border-[#CBD5E1] nfd-border-[1px] nfd-border-solid nfd-rounded-md"
                 )}
               >
                 <div className="nfd-flex nfd-justify-center nfd-items-center nfd-bg-gray-200 nfd-border-b nfd-border-[#dbd1d1] nfd-relative nfd-z-10">
                   <p className="nfd-font-bold">
-                    {__('SITE PREVIEW', 'wp-module-ecommerce')}
+                    {__("SITE PREVIEW", "wp-module-ecommerce")}
                   </p>
                 </div>
                 {comingSoon ? (
                   <div className="nfd-flex-col">
                     <Illustration
-                      className={classNames('nfd-h-full', 'nfd-w-full')}
+                      className={classNames("nfd-h-full", "nfd-w-full")}
                     />
                   </div>
                 ) : (
                   <div className="nfd-flex-col">
                     <div
                       className={classNames(
-                        'nfd-h-[216px] nfd-box-content',
-                        '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-[245px]',
-                        'xl:min-[1280px]:nfd-w-[360px]',
-                        '2xl:nfd-w-[520px]'
+                        "nfd-h-[216px] nfd-box-content",
+                        "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-[245px]",
+                        "xl:min-[1280px]:nfd-w-[360px]",
+                        "2xl:nfd-w-[520px]"
                       )}
                     >
-                      {thumbnail && (
+                      {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>
                 )}
                 <div
                   className={classNames(
-                    'nfd-absolute nfd-top-0 nfd-left-0 nfd-bottom-0 nfd-right-0 nfd-place-content-center nfd-grid',
-                    'hover:nfd-animate-[wiggle_1s_ease-in-out_infinite]'
+                    "nfd-absolute nfd-top-0 nfd-left-0 nfd-bottom-0 nfd-right-0 nfd-place-content-center nfd-grid",
+                    "hover:nfd-animate-[wiggle_1s_ease-in-out_infinite]"
                   )}
                 >
                   <Button
                     style={{
-                      display: hovered ? 'block' : 'none',
+                      display: hovered ? "block" : "none",
                     }}
                     as="a"
                     className="nfd-bg-canvas "
@@ -143,7 +147,7 @@ export function OnboardingScreen({
                     target="_blank"
                     variant="secondary"
                   >
-                    {__('View your site', 'wp-module-ecommerce')}
+                    {__("View your site", "wp-module-ecommerce")}
                   </Button>
                 </div>
               </div>