Merge pull request #706 from bluehost/update-coming-soon-paramater

Coming soon section flow revamp
bluehost · Oct 6, 2023 · 83fd4cd · 83fd4cd
2 parents e626350 + a0c726c
commit 83fd4cd
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/components/section/index.js b/src/app/components/section/index.js
@@ -1,4 +1,5 @@
 import { Button, Title } from "@newfold/ui-component-library";
+import { useState, useEffect} from '@wordpress/element';
 import classNames from "classnames";
 
 export const SectionContainer = ({ className, children }) => {
@@ -56,9 +57,42 @@ export const SectionHeader = ({
     );
 }
 
-export const SectionContent = ({ separator = false, className, children }) => {
+export const SectionContent = ({ 
+    separator = false,
+    id,
+    className,
+    children
+}) => {
+    const [isTarget, setIsTarget] = useState(false);
+    const searchParams = new URLSearchParams(window.location.search);
+
+    useEffect(() => {
+        if (searchParams.has('nfd-target') && searchParams.get('nfd-target') === id) {
+            setIsTarget(true);
+
+            setTimeout(() => {
+                setIsTarget(false);
+                removeTargetQueryParam();
+            }, 9500);
+        }
+    }, [searchParams]);
+
+    /*
+    * Remove the 'nfd-target={id}' query param from the URL
+    */
+    const removeTargetQueryParam = () => {
+        searchParams.delete('nfd-target');
+        const currentURL = window.location.href;
+        const updatedURL = currentURL.replace(`&nfd-target=${id}`, '');
+        window.history.replaceState(null, null, updatedURL);
+    }
+
     return (
-        <div className={classNames("wppbh-app-section-content nfd-p-8 nfd-pb-0", className)}>
+        <div id={id} className={classNames(
+            "wppbh-app-section-content nfd-p-8 nfd-pb-0", 
+            className,
+            isTarget && "wppbh-animation-blink"
+        )}>
             <div className={
                 classNames(
                     "nfd-pb-8",

diff --git a/src/app/pages/settings/comingSoon.js b/src/app/pages/settings/comingSoon.js
@@ -63,9 +63,23 @@ const ComingSoon = () => {
 		comingSoonAdminbarToggle(comingSoon);
 	}, [comingSoon]);
 
+	const getComingSoonSectionTitle = () => {
+		const getStatus = () => {
+			return (
+				comingSoon 
+				? <span className="nfd-text-[#e10001]">{__('Coming Soon', 'wp-plugin-bluehost')}</span>
+				: <span className="nfd-text-[#008112]">{__('Live', 'wp-plugin-bluehost')}</span>
+			);
+		};
+
+		return (
+			<span>{__('Site Status', 'wp-plugin-bluehost')}: {getStatus()}</span>
+		)
+	};
+
 	return (
 		<SectionSettings
-			title={__('Maintenance Mode', 'wp-plugin-bluehost')}
+			title={getComingSoonSectionTitle()}
 			description={__('Still building your site? Need to make a big change?', 'wp-plugin-bluehost')}
 		>
 			<div className="nfd-flex nfd-flex-col nfd-gap-6">

diff --git a/src/app/pages/settings/index.js b/src/app/pages/settings/index.js
@@ -15,7 +15,7 @@ const Settings = () => {
                     className={'wppbh-app-settings-header'}
                 />
 
-                <SectionContent separator={true} className={'wppbh-app-settings-coming-soon'}>
+                <SectionContent separator={true} id={'coming-soon-section'} className={'wppbh-app-settings-coming-soon'}>
                     <ComingSoon />
                 </SectionContent>
 

diff --git a/src/app/stylesheet.scss b/src/app/stylesheet.scss
@@ -260,4 +260,21 @@ body.toplevel_page_bluehost {
       margin: 0;
     }
 
-   }
+   }
+
+.wppbh-animation-blink {
+    animation: blink 2.5s ease 1s 3 normal forwards;
+}
+
+@keyframes blink {
+	0%,
+	50%,
+	100% {
+		background-color: initial;
+	}
+
+	25%,
+	75% {
+		background-color: #e9f1fd;
+	}
+}