- { __( "There's nothing here!", 'wp-plugin-bluehost' ) } + { __( + "There's nothing here!", + 'wp-plugin-bluehost' + ) }
diff --git a/src/app/components/header/index.js b/src/app/components/header/index.js
deleted file mode 100644
index 5b0a697cc..000000000
--- a/src/app/components/header/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import './stylesheet.scss';
-
-import Logo from './logo';
-import NavLarge from './nav-large';
-import NavMobile from './nav-mobile';
-import NavUtility from './nav-utility';
-import { useViewportMatch } from '@wordpress/compose';
-
-const Header = () => {
- const isLargeViewport = useViewportMatch( 'medium' );
- return (
-
-
-
-
-
- { __( 'Bluehost WordPress Plugin', 'wp-plugin-bluehost' ) }
-
-
- );
-};
-
-export default Logo;
diff --git a/src/app/components/header/nav-large.js b/src/app/components/header/nav-large.js
deleted file mode 100644
index c7ceab4a0..000000000
--- a/src/app/components/header/nav-large.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import classNames from 'classnames';
-import { NavLink } from 'react-router-dom';
-import { topRoutes } from '../../data/routes';
-
-const NavLarge = () => (
- -
- { topRoutes.map( ( page ) => (
-
-
- --
- { page.title } - -
- ) ) }
-
-
- { topRoutes.map( ( page ) => (
-
-
-
setIsOpen( false ) } - className={ `components-button is-secondary mobile-link-${ page.title }` } - style={ { width: '100%', textAlign: 'center' } } - > - { page.title } - -
- ) ) }
-
-
- { utilityRoutes.map( ( page ) => (
-
-
-
- { page.Icon && ( - -- ) } - { page.Dashicon && ( - - ) } -
- ) ) }
-
- {children}
-
- );
-}
\ No newline at end of file
+export const Page = ( { className, children } ) => {
+ return (
+
+ { children }
+
+ );
+};
diff --git a/src/app/components/section/index.js b/src/app/components/section/index.js
index 75d862ef5..03a4352af 100644
--- a/src/app/components/section/index.js
+++ b/src/app/components/section/index.js
@@ -1,128 +1,159 @@
-import { Button, Title } from "@newfold/ui-component-library";
-import { useState, useEffect} from '@wordpress/element';
-import classNames from "classnames";
+import { Button, Title } from '@newfold/ui-component-library';
+import { useState, useEffect } from '@wordpress/element';
+import classNames from 'classnames';
-export const SectionContainer = ({ className, children }) => {
- return (
-
- {children}
-
- );
-}
+export const SectionContainer = ( { className, children } ) => {
+ return (
+
+ { children }
+
+ );
+};
-export const SectionHeader = ({
- title,
- subTitle,
- className,
- primaryAction = { title: false, className: false, onClick: false },
- secondaryAction = { title: false, className: false, onClick: false }
-}) => {
- return (
-
-
- );
-}
+export const SectionContent = ( {
+ separator = false,
+ id,
+ className,
+ children,
+} ) => {
+ const [ isTarget, setIsTarget ] = useState( false );
+ const searchParams = new URLSearchParams( window.location.search );
-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 );
- useEffect(() => {
- if (searchParams.has('nfd-target') && searchParams.get('nfd-target') === id) {
- setIsTarget(true);
-
- setTimeout(() => {
- setIsTarget(false);
- removeTargetQueryParam();
- }, 9500);
- }
- }, [searchParams]);
+ setTimeout( () => {
+ setIsTarget( false );
+ removeTargetQueryParam();
+ }, 9500 );
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [ 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 (
-
- {title &&
- {(primaryAction.title || secondaryAction.title) &&
- {title}
} - {subTitle &&{subTitle}
} -
- {primaryAction.title &&
-
- }
- {secondaryAction.title &&
-
- }
-
- }
+export const SectionHeader = ( {
+ title,
+ subTitle,
+ className,
+ primaryAction = { title: false, className: false, onClick: false },
+ secondaryAction = { title: false, className: false, onClick: false },
+} ) => {
+ return (
+
+
+ );
+};
-
+ { title && (
+
+ { ( primaryAction.title || secondaryAction.title ) && (
+ + { title } +
+ ) } + { subTitle &&{ subTitle }
} +
+ { primaryAction.title && (
+
+ ) }
+ { secondaryAction.title && (
+
+ ) }
+
+ ) }
+
-
- );
-}
+ /*
+ * 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 );
+ };
-export const SectionSettings = ({ className, children, title, description }) => {
- return (
-
- {children}
-
-
-
+ return (
+
-
- {title}
-
- {description &&
- {description}
}
-
+
+ );
+};
-
-
+ { children }
+
+
+
+
+
+
+
+ { title }
+
+ { description && (
+
+ { description }
+ ) }
+
-
+ );
+};
diff --git a/src/app/components/webinars-banner/index.js b/src/app/components/webinars-banner/index.js
index 7bb7c8bb4..e5a68ced3 100644
--- a/src/app/components/webinars-banner/index.js
+++ b/src/app/components/webinars-banner/index.js
@@ -1,87 +1,108 @@
-import { useState, useEffect } from "@wordpress/element";
-import { Button, Title } from "@newfold/ui-component-library";
-import { ArrowRightIcon, CalendarIcon, ClockIcon } from "@heroicons/react/24/outline";
+import { useState, useEffect } from '@wordpress/element';
+import { Button, Title } from '@newfold/ui-component-library';
+import {
+ ArrowRightIcon,
+ CalendarIcon,
+ ClockIcon,
+} from '@heroicons/react/24/outline';
import { ReactComponent as WebinarsVector } from 'App/images/webinars-vector.svg';
import { SectionContainer, SectionContent } from 'App/components/section';
/**
* A component that displays the next monthly webinar.
- *
+ *
* The component will attempt to fetch the webinars data from the Hiive CDN.
* If the file is fetched successfully, the component will verify the required shape of the data.
* When the data is valid, the component will filter the webinars to only include next webinar.
* The component will then render the next webinar.
- *
+ *
* If any of the above fails the component will not render.
- *
- * @returns JSX.Element
+ *
+ * @return { JSX.Element } The webinars banner component.
*/
const WebinarsBanner = () => {
- const [webinars, setWebinars] = useState([]);
- const [nextWebinar, setNextWebinar] = useState(null);
+ const [ webinars, setWebinars ] = useState( [] );
+ const [ nextWebinar, setNextWebinar ] = useState( null );
- useEffect(() => {
+ useEffect( () => {
fetchWebinars();
- }, []);
+ }, [] );
const fetchWebinars = async () => {
- const webinarsEndpoint = 'https://cdn.hiive.space/resources/bluehost-webinars.json';
+ const webinarsEndpoint =
+ 'https://cdn.hiive.space/resources/bluehost-webinars.json';
- const response = await fetch(webinarsEndpoint);
- if (!response.ok) {
- console.warn('Could not fetch webinars data.');
+ const response = await fetch( webinarsEndpoint );
+ if ( ! response.ok ) {
+ // eslint-disable-next-line no-console
+ console.warn( 'Could not fetch webinars data.' );
return;
}
const data = await response.json();
if (
- data.hasOwnProperty('isActive') &&
+ data.hasOwnProperty( 'isActive' ) &&
data.isActive &&
- data.hasOwnProperty('items') &&
- Array.isArray(data.items) &&
+ data.hasOwnProperty( 'items' ) &&
+ Array.isArray( data.items ) &&
data.items.length > 0
) {
- setWebinars(data.items);
+ setWebinars( data.items );
}
- }
+ };
- useEffect(() => {
- setNextWebinar(getNextWebinar());
- }, [webinars]);
+ useEffect( () => {
+ setNextWebinar( getNextWebinar() );
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [ webinars ] );
const getNextWebinar = () => {
const currentDate = new Date();
- const futureWebinars = webinars.filter(webinar => new Date(webinar.date) > currentDate);
- if (futureWebinars.length === 0) {
+ const futureWebinars = webinars.filter(
+ ( webinar ) => new Date( webinar.date ) > currentDate
+ );
+ if ( futureWebinars.length === 0 ) {
return null;
}
- futureWebinars.sort((a, b) => new Date(a.date) - new Date(b.date));
+ futureWebinars.sort(
+ ( a, b ) => new Date( a.date ) - new Date( b.date )
+ );
- const nextWebinar = futureWebinars[0];
- if (nextWebinar.hasOwnProperty('title') && nextWebinar.title.length > 0) {
+ // eslint-disable-next-line no-shadow
+ const nextWebinar = futureWebinars[ 0 ];
+ if (
+ nextWebinar.hasOwnProperty( 'title' ) &&
+ nextWebinar.title.length > 0
+ ) {
nextWebinar.hasDescription = nextWebinar.description ? true : false;
- nextWebinar.hasTopics = (nextWebinar.hasOwnProperty('topics') && Array.isArray(nextWebinar.topics) && nextWebinar.topics.length > 0) ? true : false;
+ nextWebinar.hasTopics =
+ nextWebinar.hasOwnProperty( 'topics' ) &&
+ Array.isArray( nextWebinar.topics ) &&
+ nextWebinar.topics.length > 0
+ ? true
+ : false;
nextWebinar.hasTime = nextWebinar.time ? true : false;
- nextWebinar.link = nextWebinar.link ?? 'https://www.bluehost.com/blog/events/';
+ nextWebinar.link =
+ nextWebinar.link ?? 'https://www.bluehost.com/blog/events/';
nextWebinar.ctaText = nextWebinar.ctaText ?? 'Register Now';
return nextWebinar;
}
return null;
- }
+ };
- const WebinarListItem = ({ children }) => {
+ const WebinarListItem = ( { children } ) => {
return (
+ return (
+
+
+
- );
-}
\ No newline at end of file
+
+
-
+
- + { title } +
+
+
+
+ { renderPadLock() }
+
+ { siteDomain }
+
+
+
-
-
- {title}
-
-
-
- {renderPadLock()}
- {siteDomain}
-
-
-
-
-
-
-
+
+
+
+
- FREE Monthly Webinar: {nextWebinar.title}
+
+ FREE Monthly Webinar: { nextWebinar.title }
+
- {(nextWebinar.hasDescription || nextWebinar.hasTopics) &&
+ { ( nextWebinar.hasDescription ||
+ nextWebinar.hasTopics ) && (
- {nextWebinar.description && Topics:
+
+ Topics:
+
- }
-
+ ) }
{nextWebinar.description}
} - {nextWebinar.topics && + { nextWebinar.description && ( ++ { nextWebinar.description } +
+ ) } + { nextWebinar.topics && ( <> --
- {nextWebinar.topics.map((topic, index) =>
@@ -105,7 +87,7 @@ const AppBody = ( props ) => {
-
);
diff --git a/src/app/pages/ecommerce/page.js b/src/app/pages/ecommerce/page.js
index f64d14fe0..21e319c14 100644
--- a/src/app/pages/ecommerce/page.js
+++ b/src/app/pages/ecommerce/page.js
@@ -1,45 +1,51 @@
-import { NewfoldECommerce } from "@newfold-labs/wp-module-ecommerce";
-import { useContext } from "@wordpress/element";
-import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
-import { useNotification } from "../../components/notifications/feed";
-import { Page } from "../../components/page";
-import AppStore from "../../data/store";
-import { bluehostSettingsApiFetch } from "../../util/helpers";
-import "./styles.scss";
-import "@newfold-labs/wp-module-ecommerce/bluehost.css";
+import './styles.scss';
+import { useContext } from '@wordpress/element';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { NewfoldECommerce } from '@newfold-labs/wp-module-ecommerce';
+import '@newfold-labs/wp-module-ecommerce/bluehost.css';
+import AppStore from 'App/data/store';
+import { bluehostSettingsApiFetch } from 'App/util/helpers';
+import { Page } from 'App/components/page';
+import { useNotification } from 'App/components/notifications';
const ECommerce = () => {
- const { store, setStore } = useContext(AppStore);
- let [params] = useSearchParams();
- let location = useLocation();
- let navigate = useNavigate();
- let notify = useNotification();
- let state = {
- wp: { comingSoon: store?.comingSoon },
- params,
- location: location.pathname,
- };
- let wpModules = { navigate, notify };
+ const { store, setStore } = useContext( AppStore );
+ const [ params ] = useSearchParams();
+ const location = useLocation();
+ const navigate = useNavigate();
+ const notify = useNotification();
+ const state = {
+ wp: { comingSoon: store?.comingSoon },
+ params,
+ location: location.pathname,
+ };
+ const wpModules = { navigate, notify };
- let actions = {
- toggleComingSoon: () =>
- bluehostSettingsApiFetch(
- { comingSoon: !store.comingSoon },
- console.error,
- (response) => {
- setStore({
- ...store,
- comingSoon: !store.comingSoon,
- });
- }
- ),
- };
+ const actions = {
+ toggleComingSoon: () =>
+ bluehostSettingsApiFetch(
+ { comingSoon: ! store.comingSoon },
+ // eslint-disable-next-line no-console
+ console.error,
+ // eslint-disable-next-line no-unused-vars
+ ( response ) => {
+ setStore( {
+ ...store,
+ comingSoon: ! store.comingSoon,
+ } );
+ }
+ ),
+ };
- return (
-
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
-
-
+ Lorem Ipsum is simply dummy text of the printing and
+ typesetting industry. Lorem Ipsum has been the industrys
+ standard dummy text ever since the 1500s, when an
+ unknown printer took a galley of type and scrambled it
+ to make a type specimen book. It has survived not only
+ five centuries, but also the leap into electronic
+ typesetting, remaining essentially unchanged.
+
+
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
-
-
+ Lorem Ipsum is simply dummy text of the printing and
+ typesetting industry. Lorem Ipsum has been the industrys
+ standard dummy text ever since the 1500s, when an
+ unknown printer took a galley of type and scrambled it
+ to make a type specimen book. It has survived not only
+ five centuries, but also the leap into electronic
+ typesetting, remaining essentially unchanged.
+
+
-
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
- -
+
+ + Lorem Ipsum is simply dummy text of the printing and + typesetting industry. Lorem Ipsum has been the + industrys standard dummy text ever since the 1500s, + when an unknown printer took a galley of type and + scrambled it to make a type specimen book. +
+ +{item.description}
-{ item.description }
+
- {helpItems.map((item) => (
-
);
};
return (
- -
- {base.map((link) => (
-
-
-
-
- {link.label} - -
- ))}
-
-
+ { base.map( ( link ) => (
+
-
+
+
+ { link.label } + +
+ ) ) }
+
- 
-
- From DIY to full-service help.
-- Call or chat 24/7 for support or let our experts build your site for - you. -
- -
+ 
+
+ From DIY to full-service help.
++ Call or chat 24/7 for support or let our experts build + your site for you. +
+ +
-
- {__('Oops! Something went wrong. Please try again.', 'wp-plugin-bluehost')}
+ { __(
+ 'Oops! Something went wrong. Please try again.',
+ 'wp-plugin-bluehost'
+ ) }
- }
+ ) }
-
- {__('Oops! Something went wrong. Please try again.', 'wp-plugin-bluehost')}
+ { __(
+ 'Oops! Something went wrong. Please try again.',
+ 'wp-plugin-bluehost'
+ ) }
- }
+ ) }
-
-
- {__('Oops! Something went wrong. Please try again.', 'wp-plugin-bluehost')}
+ { __(
+ 'Oops! Something went wrong. Please try again.',
+ 'wp-plugin-bluehost'
+ ) }
- }
+ ) }
-