From 20f0c5cf6e79d16d641a53c8b70c1a3df3d716ec Mon Sep 17 00:00:00 2001 From: wpalani Date: Tue, 3 Oct 2023 21:27:08 -0700 Subject: [PATCH 1/4] Add url params tracker in the `SectionContent` component - In the `SectionContent` component, we are adding a new optional `id` prop. - In the `SectionContent` component, we are tracking url params and looking for `target`. - If the value of the target param matches the passed value in the `id` prop, we'll temporarily add a blink animation. - We are also updating the coming soon section title as per this ticket: https://jira.newfold.com/projects/PRESS1/issues/PRESS1-161 --- cypress.config.js | 6 +++--- package-lock.json | 4 ++-- src/app/components/section/index.js | 29 ++++++++++++++++++++++++++-- src/app/pages/settings/comingSoon.js | 16 ++++++++++++++- src/app/pages/settings/index.js | 2 +- src/app/stylesheet.scss | 19 +++++++++++++++++- 6 files changed, 66 insertions(+), 10 deletions(-) diff --git a/cypress.config.js b/cypress.config.js index 51b0bffcb..668d3d3fb 100644 --- a/cypress.config.js +++ b/cypress.config.js @@ -6,8 +6,8 @@ const wpVersion = /[^/]*$/.exec(core)[0] module.exports = defineConfig({ projectId: "h78f39", env: { - wpUsername: 'admin', - wpPassword: 'password', + wpUsername: 'Alani', + wpPassword: 'Admin@123', wpVersion, phpVersion, pluginId: 'bluehost', @@ -76,7 +76,7 @@ module.exports = defineConfig({ return config; }, - baseUrl: 'http://localhost:8882', + baseUrl: 'http://localhost:10041', specPattern: [ "tests/cypress/integration/**/*.cy.{js,jsx,ts,tsx}", "vendor/newfold-labs/**/tests/cypress/integration/**/*.cy.{js,jsx,ts,tsx}", diff --git a/package-lock.json b/package-lock.json index ec9e70b39..91939a341 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { "name": "bluehost-wordpress-plugin", - "version": "3.3.1", + "version": "3.3.2", "lockfileVersion": 2, "requires": true, "packages": { "": { - "version": "3.3.1", + "version": "3.3.2", "license": "GPL-2.0-or-later", "dependencies": { "@heroicons/react": "^2.0.18", diff --git a/src/app/components/section/index.js b/src/app/components/section/index.js index 32638fe6c..549eb7a50 100644 --- a/src/app/components/section/index.js +++ b/src/app/components/section/index.js @@ -1,5 +1,8 @@ import { Button, Title } from "@newfold/ui-component-library"; +import { useState, useEffect} from '@wordpress/element'; import classNames from "classnames"; +import { set } from "lodash"; +import { useSearchParams } from 'react-router-dom'; export const SectionContainer = ({ className, children }) => { return ( @@ -56,9 +59,31 @@ 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, setSearchParams] = useSearchParams(); + + useEffect(() => { + if (searchParams.has('target') && searchParams.get('target') === id) { + setIsTarget(true); + setTimeout(() => { + setSearchParams({ target: 'false' }); + setIsTarget(false); + }, 9500); + } + }, [searchParams]); + return ( -
+
{ comingSoonAdminbarToggle(comingSoon); }, [comingSoon]); + const getComingSoonSectionTitle = () => { + const getStatus = () => { + return ( + comingSoon + ? Coming Soon + : Live + ); + }; + + return ( + {__('Site Status', 'wp-plugin-bluehost')}: {getStatus()} + ) + }; + return (
diff --git a/src/app/pages/settings/index.js b/src/app/pages/settings/index.js index 25664ff2f..0d35ba176 100644 --- 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'} /> - + diff --git a/src/app/stylesheet.scss b/src/app/stylesheet.scss index ab342216f..3eba336ab 100644 --- a/src/app/stylesheet.scss +++ b/src/app/stylesheet.scss @@ -260,4 +260,21 @@ body.toplevel_page_bluehost { margin: 0; } - } \ No newline at end of file + } + +.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; + } +} From 58d39b8970275c7668d14e11c0f54b21b374a5be Mon Sep 17 00:00:00 2001 From: wpalani Date: Tue, 3 Oct 2023 21:37:32 -0700 Subject: [PATCH 2/4] Restore cypress configs Accidentally pushed my local's cypress configs --- cypress.config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/cypress.config.js b/cypress.config.js index 668d3d3fb..51b0bffcb 100644 --- a/cypress.config.js +++ b/cypress.config.js @@ -6,8 +6,8 @@ const wpVersion = /[^/]*$/.exec(core)[0] module.exports = defineConfig({ projectId: "h78f39", env: { - wpUsername: 'Alani', - wpPassword: 'Admin@123', + wpUsername: 'admin', + wpPassword: 'password', wpVersion, phpVersion, pluginId: 'bluehost', @@ -76,7 +76,7 @@ module.exports = defineConfig({ return config; }, - baseUrl: 'http://localhost:10041', + baseUrl: 'http://localhost:8882', specPattern: [ "tests/cypress/integration/**/*.cy.{js,jsx,ts,tsx}", "vendor/newfold-labs/**/tests/cypress/integration/**/*.cy.{js,jsx,ts,tsx}", From 1647fc5b0cf387dae3ec3e3f1fb805f07d97f337 Mon Sep 17 00:00:00 2001 From: wpalani Date: Tue, 3 Oct 2023 22:12:00 -0700 Subject: [PATCH 3/4] Make `getStatus` function return a translatable string --- src/app/pages/settings/comingSoon.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/pages/settings/comingSoon.js b/src/app/pages/settings/comingSoon.js index 21b30af0c..e77a57ba2 100644 --- a/src/app/pages/settings/comingSoon.js +++ b/src/app/pages/settings/comingSoon.js @@ -67,8 +67,8 @@ const ComingSoon = () => { const getStatus = () => { return ( comingSoon - ? Coming Soon - : Live + ? {__('Coming Soon', 'wp-plugin-bluehost')} + : {__('Live', 'wp-plugin-bluehost')} ); }; From a0c726c6630ca18cc4a9eb8ab4ce7bfdce7f1529 Mon Sep 17 00:00:00 2001 From: wpalani Date: Thu, 5 Oct 2023 17:31:36 -0700 Subject: [PATCH 4/4] Change query string detection method --- src/app/components/section/index.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/app/components/section/index.js b/src/app/components/section/index.js index 549eb7a50..75d862ef5 100644 --- a/src/app/components/section/index.js +++ b/src/app/components/section/index.js @@ -1,8 +1,6 @@ import { Button, Title } from "@newfold/ui-component-library"; import { useState, useEffect} from '@wordpress/element'; import classNames from "classnames"; -import { set } from "lodash"; -import { useSearchParams } from 'react-router-dom'; export const SectionContainer = ({ className, children }) => { return ( @@ -63,20 +61,31 @@ export const SectionContent = ({ separator = false, id, className, - children + children }) => { const [isTarget, setIsTarget] = useState(false); - const [searchParams, setSearchParams] = useSearchParams(); + const searchParams = new URLSearchParams(window.location.search); useEffect(() => { - if (searchParams.has('target') && searchParams.get('target') === id) { + if (searchParams.has('nfd-target') && searchParams.get('nfd-target') === id) { setIsTarget(true); + setTimeout(() => { - setSearchParams({ target: 'false' }); 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 (