- { __( + {__( 'You found an error, please refresh the page and try again!', 'wp-plugin-web' - ) } + )}
- { __( + {__( 'If the error persists, please contact support.', 'wp-plugin-web' - ) } + )}
- { error && error.message ? error.message : '' } - { error && error.data - ? __( ' Error code: ', 'wp-plugin-web' ) + + {error && error.message ? error.message : ''} + {error && error.data + ? __(' Error code: ', 'wp-plugin-web') + error.data.status - : '' } + : ''}
-
- -
- { 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
diff --git a/src/app/components/section/index.js b/src/app/components/section/index.js
new file mode 100644
index 0000000..6372eb1
--- /dev/null
+++ b/src/app/components/section/index.js
@@ -0,0 +1,94 @@
+import { Button, Title } from "@newfold/ui-component-library";
+import classNames from "classnames";
+
+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, className, children }) => {
+ return (
+
+ {title &&
+ {(primaryAction.title || secondaryAction.title) &&
+ {title}
} + {subTitle &&{subTitle}
} +
+ {primaryAction.title &&
+
+ }
+ {secondaryAction.title &&
+
+ }
+
+ }
+
+
+
+ );
+}
+
+export const SectionSettings = ({ className, children, title, description }) => {
+ return (
+
+ {children}
+
+
+
+
+
+
+
+ {title}
+
+ {description &&
+ {description}
}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/data/help.js b/src/app/data/help.js
index 0edc1b5..4bea0ef 100644
--- a/src/app/data/help.js
+++ b/src/app/data/help.js
@@ -6,7 +6,7 @@ const help = [
"Log in to your Account Manager to submit a support ticket. Once you open a ticket, we'll respond promptly to get it resolved.",
'wp-plugin-web'
),
- icon: 'email',
+ icon: false,
cta: __( 'Email Us', 'wp-plugin-web' ),
url: 'https://www.web.com/help/current-support-requests.jsp',
},
@@ -17,7 +17,7 @@ const help = [
'Speak to our award-winning support team over the phone at 866-923-8821. Our customer service hours are 7:00am - 12:00am ET.',
'wp-plugin-web'
),
- icon: 'phone',
+ icon: false,
cta: __( 'Call Us', 'wp-plugin-web' ),
url: 'tel:8669238821',
},
@@ -28,7 +28,7 @@ const help = [
'Chat with our sales and support team for quick, helpful answers to questions about product features, pricing and more. Our chat agents are available 24/7.',
'wp-plugin-web'
),
- icon: 'format-chat',
+ icon: false,
cta: __( 'Live Chat', 'wp-plugin-web' ),
url:
'https://www.web.com/chat?utm_campaign=&utm_content=help_chat_link&utm_term=live_chat&utm_medium=brand_plugin&utm_source=wp-admin/admin.php?page=web#/help',
@@ -40,7 +40,7 @@ const help = [
'Find our team at @webdotcom for updates on our products and support from our team.',
'wp-plugin-web'
),
- icon: 'twitter',
+ icon: false,
cta: __( 'Tweet Us', 'wp-plugin-web' ),
url: 'https://twitter.com/webdotcom',
},
@@ -51,7 +51,7 @@ const help = [
'Our experts share their experience and well-organized guides to common questions.',
'wp-plugin-web'
),
- icon: 'book',
+ icon: false,
cta: __( 'Find Answers', 'wp-plugin-web' ),
url:
'https://www.web.com/knowledge?utm_campaign=&utm_content=help_kb_link&utm_term=find_answers&utm_medium=brand_plugin&utm_source=wp-admin/admin.php?page=web#/help',
@@ -63,7 +63,7 @@ const help = [
'Learn best practices, get insider tips and find the latest news about Web.com.',
'wp-plugin-web'
),
- icon: 'text-page',
+ icon: false,
cta: __( 'Learn Stuff', 'wp-plugin-web' ),
url:
'https://www.web.com/blog/?utm_campaign=&utm_content=help_blog_link&utm_term=learn_stuff&utm_medium=brand_plugin&utm_source=wp-admin/admin.php?page=web#/help',
@@ -75,7 +75,7 @@ const help = [
'Check out our video library of step-by-step tutorials.',
'wp-plugin-web'
),
- icon: 'format-video',
+ icon: false,
cta: __( 'Watch Now', 'wp-plugin-web' ),
url: 'https://www.youtube.com/c/webdotcom',
},
diff --git a/src/app/data/routes.js b/src/app/data/routes.js
index d6a7e06..d45743b 100644
--- a/src/app/data/routes.js
+++ b/src/app/data/routes.js
@@ -1,4 +1,14 @@
-import { settings, help, grid, store } from '@wordpress/icons';
+import {
+ HomeIcon,
+ ShoppingBagIcon,
+ WrenchScrewdriverIcon,
+ BoltIcon,
+ AdjustmentsHorizontalIcon,
+ BuildingStorefrontIcon,
+ QuestionMarkCircleIcon }
+from '@heroicons/react/24/outline';
+import { NewfoldRuntime } from "@newfold-labs/wp-module-runtime";
+import { getMarketplaceSubnavRoutes } from '../../../vendor/newfold-labs/wp-module-marketplace/components/marketplaceSubnav';
import { Route, Routes } from 'react-router-dom';
import { __ } from '@wordpress/i18n';
import Home from '../pages/home';
@@ -42,40 +52,40 @@ const topRoutePaths = [
'/marketplace',
'/performance',
'/settings',
- '/help',
];
-const utilityRoutePaths = [ '/performance', '/settings', '/help' ];
+const utilityRoutePaths = [ '/help' ];
export const routes = [
{
name: '/home',
title: __( 'Home', 'wp-plugin-web' ),
Component: Home,
- Icon: grid,
+ Icon: HomeIcon,
},
{
name: '/marketplace',
title: __( 'Marketplace', 'wp-plugin-web' ),
Component: Marketplace,
- Icon: store,
+ Icon: ShoppingBagIcon,
+ subRoutes: await getMarketplaceSubnavRoutes(),
},
{
name: '/performance',
title: __( 'Performance', 'wp-plugin-web' ),
Component: Performance,
- Dashicon: 'performance',
+ Icon: BoltIcon,
},
{
name: '/settings',
title: __( 'Settings', 'wp-plugin-web' ),
Component: Settings,
- Icon: settings,
+ Icon: AdjustmentsHorizontalIcon,
},
{
name: '/help',
title: __( 'Help', 'wp-plugin-web' ),
Component: Help,
- Icon: help,
+ Icon: QuestionMarkCircleIcon,
},
];
diff --git a/src/app/data/store.js b/src/app/data/store.js
index b2fb329..890e040 100644
--- a/src/app/data/store.js
+++ b/src/app/data/store.js
@@ -1,5 +1,5 @@
import { createContext, useMemo } from '@wordpress/element';
-
+import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime';
import apiFetch from '@wordpress/api-fetch';
const DEFAULT = {
@@ -11,7 +11,7 @@ const AppStore = createContext( DEFAULT );
export const webApiFetchSettings = async ( options = {} ) => {
return await apiFetch( {
- url: window.WPPW.resturl + '/web/v1/settings',
+ url: NewfoldRuntime.createApiUrl('/web/v1/settings'),
...options,
} );
};
@@ -38,7 +38,6 @@ export const AppStoreProvider = ( { children } ) => {
webApiFetchSettings()
.then( ( settings ) => {
setStore( { ...store, ...window.WPPW, ...settings } );
- window.WPPW.migrated = true;
setBooted( true );
} )
.catch( ( error ) => {
diff --git a/src/app/images/section-settings-and-perf.png b/src/app/images/section-settings-and-perf.png
deleted file mode 100644
index bcdb08b..0000000
Binary files a/src/app/images/section-settings-and-perf.png and /dev/null differ
diff --git a/src/app/images/section-web-content.png b/src/app/images/section-web-content.png
deleted file mode 100644
index e5a042e..0000000
Binary files a/src/app/images/section-web-content.png and /dev/null differ
diff --git a/src/app/images/section-web-hosting.png b/src/app/images/section-web-hosting.png
deleted file mode 100644
index a397b7d..0000000
Binary files a/src/app/images/section-web-hosting.png and /dev/null differ
diff --git a/src/app/images/star-gray.jpg b/src/app/images/star-gray.jpg
deleted file mode 100644
index 8f73f29..0000000
Binary files a/src/app/images/star-gray.jpg and /dev/null differ
diff --git a/src/app/index.js b/src/app/index.js
index 9d04ada..ddccb60 100644
--- a/src/app/index.js
+++ b/src/app/index.js
@@ -1,25 +1,31 @@
import './stylesheet.scss';
+import './tailwind.css';
+import { Root } from "@newfold/ui-component-library";
+import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
import AppStore, { AppStoreProvider } from './data/store';
import { useLocation, HashRouter as Router } from 'react-router-dom';
-import { __ } from '@wordpress/i18n';
import { SnackbarList, Spinner } from '@wordpress/components';
import classnames from 'classnames';
-import Header from './components/header';
import AppRoutes from './data/routes';
import ErrorCard from './components/errorCard';
-import { useDispatch, useSelect } from '@wordpress/data';
import { useEffect } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
-import { store as noticesStore } from '@wordpress/notices';
import { setActiveSubnav } from './util/helpers';
import { kebabCase, filter } from 'lodash';
+import { AppNav } from './components/app-nav';
+import { SiteInfoBar } from './components/site-info';
+import { NotificationFeed } from './components/notifications/feed';
// component sourced from module
import { default as NewfoldNotifications } from '../../vendor/newfold-labs/wp-module-notifications/assets/js/components/notifications/';
// to pass to notifications module
import apiFetch from '@wordpress/api-fetch';
import { useState } from '@wordpress/element';
+import { addQueryArgs } from '@wordpress/url';
const Notices = () => {
if ( 'undefined' === typeof noticesStore ) {
@@ -66,20 +72,21 @@ const AppBody = ( props ) => {
id="wppw-app-rendered"
className={ classnames(
'wpadmin-brand-web',
- `wppw-wp-${ WPPW.wpversion }`,
+ `wppw-wp-${ NewfoldRuntime.wpVersion }`,
`wppw-page-${ kebabCase( location.pathname ) }`,
- props.className
+ props.className,
+ 'nfd-w-full nfd-p-4 min-[783px]:nfd-p-0'
) }
>
-
+
+
+
+
+
+ {title}
+
+
+
+ {renderPadLock()}
+ {siteDomain}
+
+
+
+
+
+
+
+
+ {item.description}
+
-
+
+
+ {renderHelpCards()}
+
+
+
);
};
diff --git a/src/app/pages/help/stylesheet.scss b/src/app/pages/help/stylesheet.scss
deleted file mode 100644
index f72604c..0000000
--- a/src/app/pages/help/stylesheet.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.card-help {
- text-align: center;
-
- .components-card-header,
- .components-card-footer {
- flex-direction: column;
- justify-content: end;
- }
-
- /* <= WP 5.8 */
- .components-card__header,
- .components-card__footer {
- justify-content: center;
- }
-}
\ No newline at end of file
diff --git a/src/app/pages/home/comingSoonSection.js b/src/app/pages/home/comingSoonSection.js
deleted file mode 100644
index ed7b26b..0000000
--- a/src/app/pages/home/comingSoonSection.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import graphicUrl from '../../../../assets/svg/small-blue-star.svg';
-import { Heading, ErrorCard } from '../../components';
-import AppStore from '../../data/store';
-import {
- webSettingsApiFetch,
- dispatchUpdateSnackbar,
- comingSoonAdminbarToggle,
-} from '../../util/helpers';
-import {
- Button,
- Card,
- CardBody,
- CardHeader,
- CardFooter,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { useUpdateEffect } from 'react-use';
-
-const ComingSoonSection = () => {
- const { store, setStore } = useContext( AppStore );
- const [ isError, setError ] = useState( false );
- const [ comingSoon, setComingSoon ] = useState( store.comingSoon );
- const [ wasComingSoon, setWasComingSoon ] = useState( false );
-
- const getComingSoonHeadline = () => {
- return comingSoon
- ? __( 'Coming Soon', 'wp-plugin-web' )
- : __( 'Site Launched', 'wp-plugin-web' );
- };
- const getComingSoonSubhead = () => {
- return comingSoon
- ? __( 'Site visitors see "Coming Soon"', 'wp-plugin-web' )
- : __( 'Your site is live!', 'wp-plugin-web' );
- };
- const getComingSoonBody = () => {
- return comingSoon
- ? __(
- "Once you've finished setting up your site, launch it so your visitors can reach it.",
- 'wp-plugin-web'
- )
- : __(
- 'Congratulations! Visitors will now see the site. You can always turn Coming Soon on from the Settings tab above.',
- 'wp-plugin-web'
- );
- };
- const getComingSoonGraphicClass = () => {
- return comingSoon ? 'section-graphic' : 'section-graphic reverse';
- };
- const getComingSoonButton = () => {
- return comingSoon ? (
-
- ) : (
- <>
-
-
-
- );
- };
- const getComingSoonNoticeText = () => {
- return comingSoon
- ? __( 'Coming soon activated.', 'wp-plugin-web' )
- : __( 'Coming soon deactivated.', 'wp-plugin-web' );
- };
-
- useUpdateEffect( () => {
- webSettingsApiFetch( { comingSoon }, setError, ( response ) => {
- setStore( {
- ...store,
- comingSoon,
- } );
- dispatchUpdateSnackbar( getComingSoonNoticeText() );
- comingSoonAdminbarToggle( comingSoon );
- } );
- }, [ comingSoon ] );
-
- if ( isError ) {
- return (
-
-
- );
- }
- // render nothing if coming soon is not active or not just launched
- if ( ! ( comingSoon || ( ! comingSoon && wasComingSoon ) ) ) {
- return <>;
- }
- return (
-
- 
-
-
- { getComingSoonHeadline() }
-
- { getComingSoonBody() }
- { getComingSoonButton() }
-
-
- );
-};
-
-export default ComingSoonSection;
diff --git a/src/app/pages/home/index.js b/src/app/pages/home/index.js
index d6945c9..cd29290 100644
--- a/src/app/pages/home/index.js
+++ b/src/app/pages/home/index.js
@@ -1,18 +1,39 @@
-import './stylesheet.scss';
-import ComingSoonSection from './comingSoonSection';
+
+import { Page } from '../../components/page';
+import { SectionContainer, SectionHeader, SectionContent } from '../../components/section';
+import ComingSoon from '../settings/comingSoon';
+import SettingsSection from './settingsSection';
import WebContentSection from './webContentSection';
import WebHostingSection from './webHostingSection';
-import SettingsSection from './settingsSection';
+
import { useEffect } from 'react';
const Home = () => {
return (
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/app/pages/home/settingsSection.js b/src/app/pages/home/settingsSection.js
index 28a26bf..6ce474b 100644
--- a/src/app/pages/home/settingsSection.js
+++ b/src/app/pages/home/settingsSection.js
@@ -1,103 +1,41 @@
-import graphicUrl from '../../images/section-settings-and-perf.png';
-import { Heading } from '../../components';
-import {
- Button,
- Card,
- CardBody,
- CardHeader,
- CardFooter,
- Dashicon,
-} from '@wordpress/components';
-import { Icon, settings, store } from '@wordpress/icons';
+import ActionField from "../../components/action-field";
+import { SectionSettings } from "../../components/section";
const SettingsSection = () => {
return (
-
-
-
-
-
- { __( 'Settings and Performance', 'wp-plugin-web' ) }
-
-
-
-
-
-
-
-
-
-
+
+
);
};
diff --git a/src/app/pages/home/stylesheet.scss b/src/app/pages/home/stylesheet.scss
deleted file mode 100644
index 100f532..0000000
--- a/src/app/pages/home/stylesheet.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-.wppw-section {
- margin: 0 0 2rem;
- position: relative;
-
- .components-card__header {
- background: var(--color-black);
- flex-direction: column;
- @media screen and (min-width: 1132px) {
- flex-direction: row;
- }
- .heading {
- color: var(--color-white);
- font-size: 1.5rem;
- margin-bottom: 0 !important; // wp core override
- @media screen and (min-width: 1132px) {
- margin-bottom: 24px !important;
- }
- }
- p {
- color: #FEC101;
- font-weight: 700;
- margin-left: 0;
- }
- }
- .components-card__footer {
- .heading {
- display: flex;
- align-items: center;
- svg,
- .dashicons {
- margin-right: 4px;
- }
- }
- }
-
-
- &.wppw-section-coming-soon {
-
- .wppw-section-graphic {
- top: -3rem;
- right: -6rem;
- }
- }
-
- &:first-of-type { // allows for better reordering and injection
- margin-top: 1rem;
- }
-}
-
-.section-graphic {
- position: absolute;
- right: 0;
- top: 2rem;
- transition: all .5s ease;
- z-index: 0;
- display: none;
- @media screen and (min-width: 882px) {
- display: block;
- max-width: 260px;
- }
- @media screen and (min-width: 1190px) {
- max-width: 330px;
- }
- @media screen and (min-width: 1399px) {
- max-width: 400px;
- }
-
- &.reverse {
- transform: rotateY(180deg);
- @media(prefers-reduced-motion) {
- transform: none;
- }
- }
-}
-
-.wppw-section-card {
- position: relative;
- z-index: 1;
-
- @media screen and (min-width: 882px) {
- max-width: 66%;
- }
-
- .components-card__footer {
- flex-direction: column;
-
- .wppw-cardlist-content {
- width: 100%;
- .components-heading {
- display: flex;
- align-items: center;
- .dashicons, svg {
- margin-right: 8px;
- color: var(--color-primary);
- fill: var(--color-primary);
- }
- }
- @media screen and (max-width: 700px) {
- text-align: center;
- .components-heading {
- justify-content: center;
- }
- }
- }
-
- .components-button {
- margin: 1rem auto;
- }
-
- @media screen and (min-width: 700px) {
- flex-direction: row;
-
- .wppw-cardlist-content {
- max-width: 60%;
- }
-
- .components-button {
- margin: 0;
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/app/pages/home/webContentSection.js b/src/app/pages/home/webContentSection.js
index f09a5df..09b8f21 100644
--- a/src/app/pages/home/webContentSection.js
+++ b/src/app/pages/home/webContentSection.js
@@ -1,100 +1,41 @@
-import graphicUrl from '../../images/section-web-content.png';
-import { Heading } from '../../components';
-import {
- Button,
- Card,
- CardBody,
- CardHeader,
- CardFooter,
- Dashicon,
-} from '@wordpress/components';
+import ActionField from "../../components/action-field";
+import { SectionSettings } from "../../components/section";
const WebContentSection = () => {
return (
-
-
-
-
-
- { __( 'Website Content', 'wp-plugin-web' ) }
-
-
-
-
-
-
-
-
-
-
+
+
);
};
diff --git a/src/app/pages/home/webHostingSection.js b/src/app/pages/home/webHostingSection.js
index b1fbfb7..240810c 100644
--- a/src/app/pages/home/webHostingSection.js
+++ b/src/app/pages/home/webHostingSection.js
@@ -1,145 +1,31 @@
-import graphicUrl from '../../images/section-web-hosting.png';
-import { Heading } from '../../components';
-import {
- Button,
- Card,
- CardBody,
- CardHeader,
- CardFooter,
- Dashicon,
-} from '@wordpress/components';
+import ActionField from "../../components/action-field";
+import { SectionSettings } from "../../components/section";
const WebHostingSection = () => {
return (
-
-
-
-
-
- { __( 'Web Hosting', 'wp-plugin-web' ) }
-
-
-
-
-
-
-
-
-
-
-
-
+
+
);
};
diff --git a/src/app/pages/marketplace/index.js b/src/app/pages/marketplace/index.js
index a3b9606..2c6779e 100644
--- a/src/app/pages/marketplace/index.js
+++ b/src/app/pages/marketplace/index.js
@@ -1,61 +1,53 @@
-import './stylesheet.scss';
-
-// to pass to marketplace module
-import apiFetch from '@wordpress/api-fetch';
+import apiFetch from '@wordpress/api-fetch';
+import { useState, useEffect } from '@wordpress/element';
+import { useLocation } from 'react-router-dom';
import classnames from 'classnames';
-import { useState } from '@wordpress/element';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { useEffect } from 'react';
-import {
- Button,
- Card,
- CardBody,
- CardHeader,
- CardFooter,
- CardMedia,
- TabPanel,
- Spinner
-} from '@wordpress/components';
-
+import { Page } from "../../components/page";
+import { SectionContainer, SectionHeader, SectionContent } from "../../components/section";
+import { NewfoldRuntime } from "@newfold-labs/wp-module-runtime";
// component sourced from marketplace module
import { default as NewfoldMarketplace } from '../../../../vendor/newfold-labs/wp-module-marketplace/components/marketplace/';
const MarketplacePage = () => {
- // Components to pass to module
- const moduleComponents = {
- Button,
- Card,
- CardBody,
- CardFooter,
- CardHeader,
- CardMedia,
- TabPanel,
- Spinner
- };
+ // constants to pass to module
+ const moduleConstants = {
+ 'supportsCTB': false,
+ 'text': {
+ 'title': __('Marketplace', 'wp-plugin-web'),
+ 'subTitle': __('Explore our featured collection of tools and services.', 'wp-plugin-web'),
+ 'error': __('Oops, there was an error loading the marketplace, please try again later.', 'wp-plugin-web'),
+ 'noProducts': __('Sorry, no marketplace items. Please, try again later.', 'wp-plugin-web'),
+ 'loadMore': __('Load More', 'wp-plugin-web'),
+ }
+ };
// methods to pass to module
const moduleMethods = {
apiFetch,
classnames,
useState,
useEffect,
- useNavigate,
- useLocation
+ useLocation,
+ NewfoldRuntime,
};
- // constants to pass to module
- const moduleConstants = {
- 'resturl': window.WPPW.resturl,
- 'eventendpoint': '/newfold-data/v1/events/',
- 'perPage': 12,
- 'supportsCTB': false, // not needed, but explicity setting to false anyway
- }
+
+ const moduleComponents = {
+ SectionHeader,
+ SectionContent,
+ }
return (
-
+
+
+
+
);
};
diff --git a/src/app/pages/marketplace/stylesheet.scss b/src/app/pages/marketplace/stylesheet.scss
deleted file mode 100644
index 138a856..0000000
--- a/src/app/pages/marketplace/stylesheet.scss
+++ /dev/null
@@ -1,227 +0,0 @@
-.newfold-marketplace-wrapper {
- .grid {
- display: grid;
- gap: clamp(0.5rem, calc(1rem + 1vw), 2rem);
- padding: 0;
-
- &.col2 {
- @media screen and (min-width: 600px) {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
-
- @media screen and (min-width: 1100px) {
- grid-template-columns: repeat(3, minmax(0, 1fr));
- }
- }
- }
-
- .newfold-marketplace-tabs {
- display: flex;
- flex-direction: column;
-
- .components-tab-panel__tabs {
- display: flex;
- /* <= WP 5.4 */
- flex-direction: row;
- /* <= WP 5.6 */
- gap: 0;
- max-width: max-content;
- height: fit-content;
- margin-bottom: 2rem;
- // padding: 0rem .8rem 0 .8rem;
- background-color: var(--color-primary-lighter);
- box-shadow: 2px 2px 0 4px var(--color-primary-dark);
-
- @media screen and (max-width: 600px) {
- min-width: initial;
- overflow-x: scroll;
- }
- }
- }
-
- .components-tab-panel__tabs-item {
- font-size: 14px;
- color: var(--color-primary-dark);
- padding: 16px 1.5rem 16px 1.5rem;
- min-width: 130px;
- justify-content: center;
- padding: 16px 3px 16px 3px;
- height: auto;
- transition: all .15s ease-in-out;
- border-right: 1px solid var(--color-primary-light);
- position: relative;
-
- @media screen and (max-width: 600px) {
- padding-bottom: 11px;
- border-bottom: 5px solid transparent;
- }
-
- &:hover {
- color: var(--color-primary);
- }
-
- &:last-child {
- border-right: none;
- padding-right: 0;
- }
-
- &.current-tab {
- cursor: default;
-
- &:hover {
- color: var(--color-primary-dark);
- }
-
- &::before {
- content: '';
- position: absolute;
- left: auto;
- right: auto;
- height: 20px;
- width: 20px;
- top: 42px;
- transform: rotate(45deg);
- transition: none;
- background: linear-gradient(133deg, transparent 50%, var(--color-primary-dark) 50%);
-
- @media screen and (max-width: 600px) {
- display: none !important;
- }
- }
-
- @media screen and (max-width: 600px) {
- border-bottom: 5px solid var(--color-primary-light);
- }
- }
-
- &.components-button:focus:not(:disabled) {
- box-shadow: none;
- }
- }
-}
-
-.marketplace-item {
- border-top: 2px;
- border-left: 2px;
- border-bottom: 4px;
- border-right: 4px;
- border-style: solid;
- border-color: var(--color-black);
- overflow: hidden;
-
- &.components-card {
- box-shadow: unset;
- }
-
- div:first-child {
- display: flex;
- flex-direction: column;
- }
-
- .components-card__media {
- position: relative;
- background-color: rgba(160, 170, 192, .35);
-
- &::after {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- transform: translateX(-100%);
- background-image: linear-gradient(90deg,
- rgba(#fff, 0) 0,
- rgba(#fff, 0.2) 20%,
- rgba(#fff, 0.5) 60%,
- rgba(#fff, 0));
- animation: marketplace-skeleton 2s infinite;
- content: '';
- }
-
- @keyframes marketplace-skeleton {
- 100% {
- transform: translateX(100%);
- }
- }
-
- img {
- aspect-ratio: 16 / 9;
- z-index: 2;
- }
- }
-
- .components-card__header {
- position: relative;
- border-bottom: none;
- flex-wrap: wrap;
- gap: .7rem;
-
- h2,
- h3 {
- font-size: .95rem;
- min-width: min-content;
- margin: 0;
- }
-
- .has-full-price {
- .price {
- margin-top: 10px;
- }
- }
-
- .price {
- background-color: var(--color-secondary-lighter);
- box-shadow: 1px 1px 0 2px var(--color-secondary);
- border-radius: 0;
- color: var(--color-secondary-dark);
- font-size: .95rem;
- font-weight: 800;
- min-width: max-content;
- margin-left: 0;
- padding: 0.25rem 0.75rem;
- }
-
- .full-price {
- filter: grayscale(.5);
- font-size: .8rem !important;
- }
- }
-
- .components-card__body {
- flex-grow: 1;
- padding-top: 4px;
- padding-bottom: 22px;
- line-height: 1.35;
- font-weight: 400;
- }
-
- .components-card__footer {
- justify-content: space-between;
-
- .is-secondary svg {
- display: none;
- }
-
- .is-secondary[target=_blank] {
- box-shadow: unset;
- outline: unset;
- margin-right: -10px;
-
- &:hover,
- &:active,
- &:focus {
- box-shadow: unset;
- outline: unset;
- background-color: transparent;
- }
-
- svg {
- display: inline;
- width: 14px;
- height: auto;
- margin-top: 2px;
- margin-left: 4px;
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/app/pages/performance/cacheSettings.js b/src/app/pages/performance/cacheSettings.js
deleted file mode 100644
index f4d63db..0000000
--- a/src/app/pages/performance/cacheSettings.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import AppStore from '../../data/store';
-import { Heading, ErrorCard } from '../../components';
-import {
- webSettingsApiFetch,
- dispatchUpdateSnackbar,
-} from '../../util/helpers';
-import {
- Card,
- CardBody,
- CardHeader,
- RadioControl,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { useUpdateEffect } from 'react-use';
-
-const CacheSettings = () => {
- const { store, setStore } = useContext( AppStore );
- const [ cacheLevel, setCacheLevel ] = useState( store.cacheLevel );
- const [ isError, setError ] = useState( false );
-
- const cacheOptions = [
- {
- label: (
-
- { __( 'Disabled', 'wp-plugin-web' ) }
-
- { __(
- 'No cache enabled. Every page load is fresh.',
- 'wp-plugin-web'
- ) }
-
- { __( 'Not recommended.', 'wp-plugin-web' ) }
-
- ),
- value: 0,
- notice: 'Caching disabled.',
- },
- {
- label: (
-
- { __( 'Assets Only', 'wp-plugin-web' ) }
-
- { __(
- 'Cache static assets like images and the appearance of your site for 1 hour.',
- 'wp-plugin-web'
- ) }
-
-
- { __(
- 'Tuned for online stores and member sites that need to be fresh.',
- 'wp-plugin-web'
- ) }
-
-
- ),
- value: 1,
- notice: 'Cache enabled for assets only.',
- },
- {
- label: (
-
-
- { __( 'Assets & Web Pages', 'wp-plugin-web' ) }
-
-
- { __(
- 'Cache static assets for 24 hours and web pages for 2 hours.',
- 'wp-plugin-web'
- ) }
-
-
- { __(
- 'Tuned for sites that change at least weekly.',
- 'wp-plugin-web'
- ) }
-
-
- ),
- value: 2,
- notice: 'Cache enabled for assets and pages.',
- },
- {
- label: (
-
-
- { __(
- 'Assets & Web Pages - Extended',
- 'wp-plugin-web'
- ) }
-
-
- { __(
- 'Cache static assets for 1 week and web pages for 8 hours.',
- 'wp-plugin-web'
- ) }
-
-
- { __(
- 'Tuned for sites that update a few times a month or less.',
- 'wp-plugin-web'
- ) }
-
-
- ),
- value: 3,
- notice: 'Cache enabled for assets and pages (extended).',
- },
- ];
-
- const getCacheLevelNoticeText = () => {
- return cacheOptions[ cacheLevel ].notice;
- };
-
- useUpdateEffect( () => {
- webSettingsApiFetch( { cacheLevel }, setError, ( response ) => {
- setStore( {
- ...store,
- cacheLevel,
- } );
- dispatchUpdateSnackbar( getCacheLevelNoticeText() );
- } );
- }, [ cacheLevel ] );
-
- if ( isError ) {
- return
-
-
- { __( 'Cache Level', 'wp-plugin-web' ) }
-
-
-
- { __(
- 'Improve delivery speed for this site by storing a static cached copy that gets regenerated regularly. This can help attract and retain visitors!',
- 'wp-plugin-web'
- ) }
-
-
- setCacheLevel( parseInt( value ) ) }
- />
-
-
- );
-};
-
-export default CacheSettings;
diff --git a/src/app/pages/performance/clearCache.js b/src/app/pages/performance/clearCache.js
deleted file mode 100644
index 5446225..0000000
--- a/src/app/pages/performance/clearCache.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Heading, ErrorCard } from '../../components';
-import AppStore from '../../data/store';
-import {
- webPurgeCacheApiFetch,
- dispatchUpdateSnackbar,
-} from '../../util/helpers';
-import {
- Button,
- Card,
- CardBody,
- CardHeader,
- CardFooter,
-} from '@wordpress/components';
-import { sprintf } from '@wordpress/i18n';
-
-const ClearCache = () => {
- const { store, setStore } = useContext( AppStore );
- const [ isError, setError ] = useState( false );
-
- const getCacheClearNoticeText = () => {
- return __( 'Cache cleared', 'wp-plugin-web' );
- };
-
- const clearCache = () => {
- webPurgeCacheApiFetch( {}, setError, ( response ) => {
- dispatchUpdateSnackbar( getCacheClearNoticeText() );
- } );
- };
-
- if ( isError ) {
- return
-
-
- { __( 'Clear Cache', 'wp-plugin-web' ) }
-
-
-
-
- { __(
- 'We automatically clear your cache',
- 'wp-plugin-web'
- ) }
-
- { ' ' +
- __(
- "as you work (creating content, changing settings, installing plugins and more). But you can manually clear it here to be confident it's fresh.",
- 'wp-plugin-web'
- ) }
-
-
-
-
-
- );
-};
-
-export default ClearCache;
diff --git a/src/app/pages/performance/index.js b/src/app/pages/performance/index.js
index 2292c63..6d8d1e6 100644
--- a/src/app/pages/performance/index.js
+++ b/src/app/pages/performance/index.js
@@ -1,33 +1,64 @@
-import './stylesheet.scss';
-import graphicUrl from '../../../../assets/svg/large-star.svg';
-import CacheSettings from './cacheSettings';
-import ClearCache from './clearCache';
-import SettingsCallout from './settingsCallout';
-import { useViewportMatch } from '@wordpress/compose';
+import AppStore from '../../data/store';
+import { Page } from '../../components/page';
+import { useState, useEffect, useContext, Fragment } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+import classnames from 'classnames';
+import { useUpdateEffect } from 'react-use';
+import { NewfoldRuntime } from "@newfold-labs/wp-module-runtime";
+import { SectionContainer, SectionHeader, SectionContent, SectionSettings } from '../../components/section';
+import { useNotification } from '../../components/notifications/feed';
+import {
+ webSettingsApiFetch as newfoldSettingsApiFetch,
+ webPurgeCacheApiFetch as newfoldPurgeCacheApiFetch
+} from '../../util/helpers';
-const Performance = () => {
- const isWideViewport = useViewportMatch( 'large' );
+import { default as NewfoldPerformance } from '../../../../vendor/newfold-labs/wp-module-performance/components/performance/';
+
+const PerformancePage = () => {
+
+ // constants to pass to module
+ const moduleConstants = {};
+
+ // methods to pass to module
+ const moduleMethods = {
+ apiFetch,
+ classnames,
+ useState,
+ useEffect,
+ useContext,
+ NewfoldRuntime,
+ useNotification,
+ newfoldSettingsApiFetch,
+ newfoldPurgeCacheApiFetch,
+ useUpdateEffect,
+ AppStore,
+ };
+
+ const moduleComponents = {
+ Page,
+ SectionHeader,
+ SectionContent,
+ SectionSettings,
+ SectionContainer,
+ Fragment,
+ }
return (
-
+
+
+
);
};
-export default Performance;
+export default PerformancePage;
diff --git a/src/app/pages/performance/settingsCallout.js b/src/app/pages/performance/settingsCallout.js
deleted file mode 100644
index 685611c..0000000
--- a/src/app/pages/performance/settingsCallout.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Heading } from '../../components';
-import {
- Card,
- CardBody,
- CardHeader,
- CardFooter,
- Button,
-} from '@wordpress/components';
-import { settings } from '@wordpress/icons';
-
-const SettingsCallout = () => {
- return (
-
-
-
- { __( 'Settings', 'wp-plugin-web' ) }
-
-
-
- { __(
- 'Looking for other Settings? You can refine auto-updates, comments and backups of content revisions on the Settings page.',
- 'wp-plugin-web'
- ) }
-
-
-
-
-
- );
-};
-
-export default SettingsCallout;
diff --git a/src/app/pages/performance/stylesheet.scss b/src/app/pages/performance/stylesheet.scss
deleted file mode 100644
index baa5806..0000000
--- a/src/app/pages/performance/stylesheet.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.wppw {
-
- .components-radio-control__option label span {
-
- strong {
- font-size: 16px;
- padding-top: 1px;
- }
-
- span {
- display: block;
- opacity: 0.75;
- padding: 0.5rem 0 0.25rem 1.75rem;
- transition: .2s opacity ease;
- }
-
- em {
- display: block;
- opacity: 0.6;
- padding: 0 0 0.75rem 1.75rem;
- transition: .2s opacity ease;
- }
-
- &:hover {
- span,
- em {
- opacity: 1;
- }
- }
-
- }
-
- /* WP 5.5 || WP 5.6 */
- [class*="wppw-wp-5.5"],
- [class*="wppw-wp-5.6"] {
- .components-radio-control__input[type="radio"]:checked::before {
- margin-top: 5px;
- margin-left: 5px;
-
- @media screen and (min-width: 782px) {
- margin-top: 1px;
- margin-left: 1px;
- }
-
- }
- }
-
- /* WP 5.7 */
- [class*="wppw-wp-5.7"] {
- .components-radio-control__input[type="radio"]:checked::before {
- transform: translate(3px, 3px);
-
- @media screen and (min-width: 600px) {
- transform: translate(1px, 1px);
-
- }
-
- }
- }
-
-}
\ No newline at end of file
diff --git a/src/app/pages/settings/automaticUpdates.js b/src/app/pages/settings/automaticUpdates.js
index a68df9d..8ff09ec 100644
--- a/src/app/pages/settings/automaticUpdates.js
+++ b/src/app/pages/settings/automaticUpdates.js
@@ -1,231 +1,284 @@
import AppStore from '../../data/store';
-import { Heading, ErrorCard } from '../../components';
-import {
- webSettingsApiFetch,
- dispatchUpdateSnackbar,
-} from '../../util/helpers';
-import {
- Card,
- CardBody,
- CardHeader,
- CardDivider,
- ToggleControl,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { useEffect } from 'react';
+import { webSettingsApiFetch } from '../../util/helpers';
import { useUpdateEffect } from 'react-use';
-import classNames from 'classnames';
+import { useState } from '@wordpress/element';
+import { Alert, ToggleField } from "@newfold/ui-component-library";
+import { SectionSettings } from "../../components/section";
+import { useNotification } from '../../components/notifications/feed';
-const AutomaticUpdates = () => {
- const { store, setStore } = useContext( AppStore );
- const [ autoUpdatesAll, setAutoUpdatesAll ] = useState(
+const AutomaticUpdatesAll = ({ setError, notify }) => {
+ const { store, setStore } = useContext(AppStore);
+ const [autoUpdatesAll, setAutoUpdatesAll] = useState(
store.autoUpdatesMajorCore &&
- store.autoUpdatesPlugins &&
- store.autoUpdatesThemes
- ? true
- : false
- );
- const [ autoUpdatesMajorCore, setAutoUpdatesCore ] = useState(
- store.autoUpdatesMajorCore
- );
- const [ autoUpdatesPlugins, setAutoUpdatesPlugins ] = useState(
- store.autoUpdatesPlugins
- );
- const [ autoUpdatesThemes, setAutoUpdatesThemes ] = useState(
+ store.autoUpdatesPlugins &&
store.autoUpdatesThemes
+ ? true
+ : false
);
- const [ isError, setError ] = useState( false );
- const getAllNoticeText = () => {
+ const getAllNoticeTitle = () => {
return autoUpdatesAll
- ? __( 'Everything will auto-update.', 'wp-plugin-web' )
- : __( 'Custom auto-update settings.', 'wp-plugin-web' );
+ ? __('Enabled All auto-updates', 'wp-plugin-web')
+ : __('Disabled All auto-updates', 'wp-plugin-web');
};
- const getAllHelpText = () => {
+ const getAllNoticeText = () => {
return autoUpdatesAll
- ? __( "We're on top of all your updates.", 'wp-plugin-web' )
- : __( 'Turn on for the safest, best experience.', 'wp-plugin-web' );
+ ? __('Everything will automatically update.', 'wp-plugin-web')
+ : __('Custom auto-update settings.', 'wp-plugin-web');
};
- const getCoreNoticeText = () => {
+
+ const toggleAutoUpdatesAll = () => {
+ if ( autoUpdatesAll ) { // is unchecking
+ // just uncheck this one
+ setAutoUpdatesAll(!autoUpdatesAll);
+ } else { // is checking
+ webSettingsApiFetch(
+ {
+ autoUpdatesMajorCore: true,
+ autoUpdatesPlugins: true,
+ autoUpdatesThemes: true
+ },
+ setError,
+ (response) => {
+ setAutoUpdatesAll(!autoUpdatesAll);
+ }
+ );
+ }
+ };
+
+ const notifySuccess = () => {
+ notify.push("everything-autoupdate-notice", {
+ title: getAllNoticeTitle(),
+ description: (
+
+ {getAllNoticeText()}
+
+ ),
+ variant: "success",
+ autoDismiss: 5000,
+ });
+ };
+
+ useEffect( () => {
+ if ( store.autoUpdatesMajorCore && store.autoUpdatesPlugins && store.autoUpdatesThemes ) {
+ setAutoUpdatesAll( true );
+ } else {
+ setAutoUpdatesAll( false );
+ }
+ }, [ store.autoUpdatesMajorCore, store.autoUpdatesPlugins, store.autoUpdatesThemes ] );
+
+ useUpdateEffect(() => {
+
+ setStore({
+ ...store,
+ autoUpdatesAll,
+ });
+
+ notifySuccess();
+ }, [autoUpdatesAll]);
+
+ return (
+
-
-
- { __( 'Automatic Updates', 'wp-plugin-web' ) }
-
-
-
- { __(
- 'We strongly recommend letting us manage updates to automatically receive critical security patches, bug fixes and new features as they become available.',
- 'wp-plugin-web'
- ) }
-
-
- {
- setAutoUpdatesAll( ( value ) => ! value );
- } }
- />
-
- { ! autoUpdatesAll && (
-
-
- {
- setAutoUpdatesCore( ( value ) => ! value );
- } }
- />
-
-
- {
- setAutoUpdatesPlugins( ( value ) => ! value );
- } }
- />
-
-
- {
- setAutoUpdatesThemes( ( value ) => ! value );
- } }
- />
-
-
- ) }
-
+
-
-
- { __( 'Coming Soon', 'wp-plugin-web' ) }
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/app/pages/settings/performanceCallout.js b/src/app/pages/settings/performanceCallout.js
deleted file mode 100644
index 4a78184..0000000
--- a/src/app/pages/settings/performanceCallout.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Heading } from '../../components';
-import {
- Card,
- CardBody,
- CardHeader,
- CardFooter,
- Dashicon,
- Button,
-} from '@wordpress/components';
-
-const PerformanceCallout = () => {
- return (
-
-
-
- { __( 'Performance', 'wp-plugin-web' ) }
-
-
-
- { __(
- 'Manage site performance and caching settings as well as clear the site cache.',
- 'wp-plugin-web'
- ) }
-
-
- }
- className="callout-link-performance"
- >
- { __( 'Performance', 'wp-plugin-web' ) }
-
-
-
- );
-};
-
-export default PerformanceCallout;
diff --git a/src/app/pages/settings/stylesheet.scss b/src/app/pages/settings/stylesheet.scss
deleted file mode 100644
index 36bd117..0000000
--- a/src/app/pages/settings/stylesheet.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-
-.components-toggle-control .components-base-control__field {
- margin-bottom: 0;
- flex-direction: row-reverse;
- justify-content: space-between;
-
- .components-toggle-control__label {
- font-weight: 600;
- }
-}
-
-.components-base-control .components-base-control__help {
- color: var(--color-text);
- opacity: .8;
- margin-top: .85rem;
- font-size: .9rem;
-}
-
-.wppw .components-select-control__input {
- max-width: 100%;
-}
\ No newline at end of file
diff --git a/src/app/stylesheet.scss b/src/app/stylesheet.scss
index 5676fa0..1404aff 100644
--- a/src/app/stylesheet.scss
+++ b/src/app/stylesheet.scss
@@ -236,38 +236,3 @@ body.toplevel_page_web {
color: var(--color-secondary-dark) !important;
}
}
-
-
-.has-page-graphic {
- padding-bottom: 26rem;
-}
-
-.wppw-page-graphic {
- bottom: 3.5rem;
- opacity: .5;
- position: absolute;
- right: 1rem;
- z-index: -1;
-}
-
-.wppw {
- .components-card {
- box-shadow: inset -2px -2px 0px 4px var(--color-black);
-
- &.short {
- margin-bottom: auto;
- }
-
- &.disabled {
- opacity: .5;
- }
- }
-
- .components-card-body,
- .components-card__body {
-
- &.disabled {
- opacity: .5;
- }
- }
-}
\ No newline at end of file
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
new file mode 100644
index 0000000..dcc64f8
--- /dev/null
+++ b/src/app/tailwind.css
@@ -0,0 +1,293 @@
+/* Import main CSS including all components. */
+@import "@newfold/ui-component-library";
+
+/* Tailwind layers */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Configs */
+@layer base {
+ .nfd-root {
+ @apply
+ nfd-text-body;
+
+ a {
+ @apply
+ nfd-no-underline
+ nfd-text-primary
+ hover:nfd-text-primary-dark
+ focus:nfd-text-primary-dark
+ focus:nfd-outline-none
+ focus:nfd-ring-1
+ focus:nfd-ring-offset-1
+ focus:nfd-ring-offset-transparent
+ focus:nfd-ring-primary-dark
+ focus:nfd-rounded-sm
+ visited:nfd-text-primary
+ visited:hover:nfd-text-primary-dark;
+ }
+ }
+}
+
+/* Titles */
+@layer components {
+ .nfd-root {
+ .nfd-title {
+ @apply
+ nfd-text-title
+ }
+ }
+}
+
+/* Links */
+@layer components {
+ .nfd-root {
+ .nfd-link {
+ @apply
+ nfd-text-primary
+
+ hover:nfd-text-primary-dark
+ focus:nfd-ring-primary-600
+ visited:nfd-text-primary-dark
+ visited:hover:nfd-text-primary-dark;
+ }
+
+ .nfd-link--primary {
+ @apply nfd-text-primary-600 hover:nfd-text-primary-500 focus:nfd-text-primary-500 focus:nfd-ring-primary-600;
+ }
+
+ .nfd-link--error {
+ @apply nfd-text-red-600 hover:nfd-text-red-500 focus:nfd-text-red-500 focus:nfd-ring-red-600;
+ }
+ }
+}
+
+/* Buttons */
+@layer components {
+ .nfd-root {
+ .nfd-button {
+ @apply
+ nfd-px-4
+ nfd-gap-2
+ focus:nfd-ring-primary;
+
+ svg {
+ @apply
+ nfd-w-5
+ nfd-h-5;
+ }
+ }
+
+ /* Variants */
+
+ .nfd-button--primary {
+ @apply
+ nfd-bg-primary
+
+ hover:nfd-bg-primary-dark
+ focus:nfd-ring-primary;
+ }
+
+ .nfd-button--secondary {
+ @apply
+ nfd-text-black
+ nfd-bg-white
+ nfd-border-primary
+
+ hover:nfd-text-black
+ hover:nfd-bg-primary-50
+ focus:nfd-text-title
+ focus:nfd-ring-primary
+ visited:nfd-text-black
+ visited:hover:nfd-text-title;
+ }
+
+ .nfd-button--standout {
+ @apply
+ nfd-bg-secondary
+ nfd-text-[#1E293B]
+
+ hover:nfd-bg-secondary-dark
+ hover:nfd-text-[#1E293B]
+ focus:nfd-text-[#1E293B];
+ }
+ }
+}
+
+/* Toggle / Toggle Field */
+@layer components {
+ .nfd-root {
+ .nfd-toggle {
+ @apply
+ nfd-bg-[#CDD0D6]
+
+ focus:nfd-ring-primary;
+ }
+
+ .nfd-toggle--checked {
+ @apply nfd-bg-primary;
+ }
+
+ .nfd-toggle__icon--check {
+ @apply nfd-text-primary;
+ }
+
+ .nfd-toggle__icon--x {
+ @apply nfd-text-[#9CA3AF];
+ }
+
+ .nfd-toggle-field__description {
+ @apply
+ nfd-mt-3
+ nfd-mr-2
+ sm:nfd-mr-[10.5rem]
+ sm:nfd-mt-0;
+ }
+ }
+}
+
+/* Checkbox */
+@layer components {
+ .nfd-root {
+ .nfd-checkbox {
+ .nfd-checkbox__input {
+ @apply
+ nfd-text-primary
+ nfd-shadow-none
+
+ focus:nfd-ring-primary;
+
+ &:checked {
+ &::before {
+ @apply nfd-hidden;
+ }
+ }
+ }
+ }
+ }
+}
+
+/* Radio Input */
+@layer components {
+ .nfd-root {
+ .nfd-radio-group {
+ .nfd-radio__description {
+ @apply
+ nfd-mb-2
+ nfd-ml-7
+ lg:nfd-mr-[10.5rem];
+ }
+ }
+
+ .nfd-radio__input {
+ @apply
+ nfd-text-primary
+ nfd-shadow-none
+
+ focus:nfd-ring-primary;
+
+ &:checked {
+ &::before {
+ @apply nfd-bg-transparent;
+ }
+ }
+ }
+ }
+}
+
+/* Select Field */
+@layer components {
+ .nfd-root {
+ .nfd-select__button {
+ @apply
+ focus:nfd-ring-primary
+ focus:nfd-border-primary;
+ }
+
+ .nfd-select__option {
+ &--active {
+ @apply nfd-bg-[#CDD0D6];
+ }
+
+ &--selected {
+ @apply nfd-bg-primary;
+ }
+ }
+
+ .nfd-select-field__spaced {
+ .nfd-select-field__select {
+ @apply
+ nfd-flex
+ nfd-items-center
+ nfd-justify-between
+ nfd-gap-4;
+ }
+
+ .nfd-select__button {
+ @apply nfd-w-24;
+ }
+
+ .nfd-select__options {
+ @apply
+ nfd-w-40
+ nfd-right-0;
+ }
+
+ .nfd-select-field__description {
+ @apply lg:nfd-mr-[10.5rem];
+ }
+ }
+ }
+}
+
+/* Notifications */
+@layer components {
+ .nfd-root {
+
+ .nfd-notifications {
+ z-index: 9991;
+ }
+
+ .nfd-notifications--bottom-left {
+ @apply nfd-left-[12%];
+ }
+ }
+}
+
+/* Modal */
+@layer components {
+ .nfd-root {
+ /* mobile menu modal */
+ .wppw-app-sidenav-mobile {
+ .nfd-modal__close {
+ @apply
+ nfd-flex
+ nfd-bg-white
+ nfd-rounded-full
+ nfd-top-[-36px]
+ nfd-right-0;
+ }
+
+ .nfd-modal__close-button {
+ @apply
+ nfd-text-body
+ nfd-rounded-full
+ nfd-p-1
+ hover:nfd-text-title
+ focus:nfd-ring-primary;
+ }
+ }
+ }
+}
+
+/* Text Input Field */
+@layer components {
+ .nfd-root {
+ .nfd-text-input {
+ @apply
+ focus:nfd-ring-primary
+ focus:nfd-border-primary;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/util/helpers.js b/src/app/util/helpers.js
index f6054f0..ba72378 100644
--- a/src/app/util/helpers.js
+++ b/src/app/util/helpers.js
@@ -1,5 +1,7 @@
import { dispatch } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import { NewfoldRuntime } from "@newfold-labs/wp-module-runtime";
let lastNoticeId;
const W_NAV = document.querySelector( '#toplevel_page_web .wp-submenu' );
@@ -80,7 +82,7 @@ export const dispatchUpdateSnackbar = ( text = 'Settings Saved' ) => {
export const webSettingsApiFetch = ( data, passError, thenCallback ) => {
return apiFetch( {
// path: 'web/v1/settings', // can't use path bacause it breaks on temp domains
- url: window.WPPW.resturl + '/web/v1/settings',
+ url: NewfoldRuntime.createApiUrl( '/web/v1/settings' ),
method: 'POST',
data,
} )
@@ -102,7 +104,7 @@ export const webSettingsApiFetch = ( data, passError, thenCallback ) => {
*/
export const webPurgeCacheApiFetch = ( data, passError, thenCallback ) => {
return apiFetch( {
- url: window.WPPW.resturl + '/web/v1/caching',
+ url: NewfoldRuntime.createApiUrl( '/web/v1/caching' ),
method: 'DELETE',
data,
} )
@@ -130,3 +132,21 @@ export const comingSoonAdminbarToggle = ( comingSoon ) => {
comingsoonadminbar.classList.remove( 'hideme' );
}
};
+
+/**
+ * Decorates an external link URL with UTM params.
+ *
+ * The utm_term, if passed, should be the link anchor text.
+ * The utm_content should be the unique identifier for the link.
+ * The utm_campaign is optional and reserved for special occasions.
+ *
+ * @param {string} url The original URL.
+ * @param {Object} params The URL parameters to add.
+ *
+ * @return {string} The new URL.
+ */
+export const addUtmParams = (url, params = {}) => {
+ params.utm_source = `wp-admin/admin.php?page=web${window.location.hash}`;
+ params.utm_medium = 'web_plugin';
+ return addQueryArgs(url, params);
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 8ec0b98..f46c715 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,7 @@ import './webpack-public-path';
import App from './app';
import domReady from '@wordpress/dom-ready';
-import { render } from '@wordpress/element';
+import { createRoot, render } from '@wordpress/element';
const WP_ADM_PAGE_ROOT_ELEMENT = 'wppw-app';
const W_ASCI = `Welcome to Web.com!`;
@@ -11,9 +11,14 @@ console.log( W_ASCI );
const WPPWRender = () => {
const DOM_ELEMENT = document.getElementById( WP_ADM_PAGE_ROOT_ELEMENT );
- if ( null !== DOM_ELEMENT && 'undefined' !== typeof render ) {
- render(
- { help.map( ( item ) => (
-
-
- { item.title }
-
-
- { /* {
-
- }
- >
- { ' ' }
- { item.cta }{ ' ' }
-
-
-
- ) ) }
+ const renderHelpCards = () => {
+ const helpItems = help;
+
+ return (
+
+ );
+ };
+
+ return (
+ { item.description }
-
+ {helpItems.map((item) => (
+
- { getComingSoonSubhead() }
-
-
+ - { __( - 'Customize & fine-tune your site.', - 'wp-plugin-web' - ) } -
-
-
-
-
-
- - { __( - 'Adjust auto-updates, comments, backed-up revisions & more.', - 'wp-plugin-web' - ) } -
-
-
-
-
- }
- className="callout-link-performance"
- >
- { __( 'Performance', 'wp-plugin-web' ) }
-
- - { __( - 'Strike the balance between fresh updates and fastest delivery.', - 'wp-plugin-web' - ) } -
-
-
-
-
-
- - { __( - 'Add site services, themes or plugins from our marketplace.', - 'wp-plugin-web' - ) } -
-
+
+ {__('Manage your site settings. You can ajdust automatic updates, comments, revisions and more.', 'wp-plugin-web')}
+
+
+
+ {__('Manage site performance and caching settings as well as clear the site cache.', 'wp-plugin-web')}
+
+
+
+ {__('Add site services, themes or plugins from the marketplace.', 'wp-plugin-web')}
+
+
+ - { __( - 'Create, manage & sort your story.', - 'wp-plugin-web' - ) } -
-
-
-
-
-
- - { __( - 'Update your site with news as your story unfolds.', - 'wp-plugin-web' - ) } -
-
-
-
-
-
- - { __( - "Share who you are, what you're about and how to get in touch.", - 'wp-plugin-web' - ) } -
-
-
-
-
-
- - { __( - 'Sort your story so visitors can focus on their interests.', - 'wp-plugin-web' - ) } -
-
+
+ {__('Write a new blog post.', 'wp-plugin-web')}
+
+
+
+ {__('Add fresh pages to your website.', 'wp-plugin-web')}
+
+
+
+ {__('Organize existing content into categories.', 'wp-plugin-web')}
+
+
+ - { __( - 'Access & manage your Web.com account.', - 'wp-plugin-web' - ) } -
-
-
-
-
-
- - { __( - 'Manage site backups, performance options and billing.', - 'wp-plugin-web' - ) } -
-
-
-
-
-
- - { __( - 'Create new email addresses and manage your inbox.', - 'wp-plugin-web' - ) } -
-
-
-
-
-
- - { __( - 'Find fresh domains, point them at sites and get found online.', - 'wp-plugin-web' - ) } -
-
-
-
-
-
- - { __( - 'Find how-to articles in our Knowledge Base and speak with our award-winning support team.', - 'wp-plugin-web' - ) } -
-
+
+ {__("Manage Web account products, options and billing.", "wp-plugin-web")}
+
+
+
-
+
-
-
- ) }
-
+
+ {__('Oops! Something went wrong. Please try again.', 'wp-plugin-web')}
+
+ }
+
+
);
-};
+}
-export default AutomaticUpdates;
+export default AutomaticUpdates;
\ No newline at end of file
diff --git a/src/app/pages/settings/comingSoon.js b/src/app/pages/settings/comingSoon.js
index 5f545a0..a431bab 100644
--- a/src/app/pages/settings/comingSoon.js
+++ b/src/app/pages/settings/comingSoon.js
@@ -1,113 +1,115 @@
import AppStore from '../../data/store';
-import { Heading, ErrorCard, Accordion } from '../../components';
import {
webSettingsApiFetch,
- dispatchUpdateSnackbar,
comingSoonAdminbarToggle,
} from '../../util/helpers';
-import {
- Card,
- CardBody,
- CardHeader,
- CardDivider,
- ToggleControl,
-} from '@wordpress/components';
import { useState } from '@wordpress/element';
import { useUpdateEffect } from 'react-use';
+import { Alert, ToggleField } from "@newfold/ui-component-library";
+import { SectionSettings } from "../../components/section";
+import { useNotification } from '../../components/notifications/feed';
const ComingSoon = () => {
- const { store, setStore } = useContext( AppStore );
- const [ comingSoon, setComingSoon ] = useState( store.comingSoon );
- const [ isError, setError ] = useState( false );
+ const { store, setStore } = useContext(AppStore);
+ const [comingSoon, setComingSoon] = useState(store.comingSoon);
+ const [isError, setError] = useState(false);
- const getComingSoonNoticeText = () => {
+ let notify = useNotification();
+
+ const getComingSoonNoticeTitle = () => {
return comingSoon
- ? __( 'Coming soon activated.', 'wp-plugin-web' )
- : __( 'Coming soon deactivated.', 'wp-plugin-web' );
+ ? __('Coming soon activated', 'wp-plugin-web')
+ : __('Coming soon deactivated', 'wp-plugin-web');
};
- const getComingSoonHelpText = () => {
+
+ const getComingSoonNoticeText = () => {
return comingSoon
? __(
- 'Coming soon page is active. Site requires login.',
- 'wp-plugin-web'
- )
+ 'Coming soon page is active. Site requires login.',
+ 'wp-plugin-web'
+ )
: __(
- 'Coming soon page is not active. Site is live to visitors.',
- 'wp-plugin-web'
- );
+ 'Coming soon page is not active. Site is live to visitors.',
+ 'wp-plugin-web'
+ );
+ };
+
+ const getComingSoonSectionTitle = () => {
+ const getStatus = () => {
+ return (
+ comingSoon
+ ? {__('Coming Soon', 'wp-plugin-web')}
+ : {__('Live', 'wp-plugin-web')}
+ );
+ };
+
+ return (
+ {__('Site Status', 'wp-plugin-web')}: {getStatus()}
+ )
+ };
+
+ const toggleComingSoon = () => {
+ webSettingsApiFetch({ comingSoon: !comingSoon }, setError, (response) => {
+ setComingSoon(!comingSoon);
+ });
+ };
+
+ const notifySuccess = () => {
+ notify.push("coming-soon-toggle-notice", {
+ title: getComingSoonNoticeTitle(),
+ description: (
+
+ {getComingSoonNoticeText()}
+
+ ),
+ variant: "success",
+ autoDismiss: 5000,
+ });
};
- useUpdateEffect( () => {
- webSettingsApiFetch( { comingSoon }, setError, ( response ) => {
- setStore( {
- ...store,
- comingSoon,
- } );
- dispatchUpdateSnackbar( getComingSoonNoticeText() );
- comingSoonAdminbarToggle();
- } );
- }, [ comingSoon ] );
+ useUpdateEffect(() => {
+ setStore({
+ ...store,
+ comingSoon,
+ });
+
+ notifySuccess();
+ comingSoonAdminbarToggle(comingSoon);
+ }, [comingSoon]);
- if ( isError ) {
- return
- { __(
- 'Still building your site? Need to make a big change?',
+
- { __(
- 'Your Web.com Coming Soon page lets you hide your site from visitors while you make the magic happen.',
- 'wp-plugin-web'
- ) }
-
- { __(
- 'Come back here anytime to turn it on or off as you want to drop a curtain over your site.',
- 'wp-plugin-web'
- ) }
-
- { __(
- 'Activate the "Jetpack" plugin, connect your site, and enable the "Subscriptions" module to build your following. Subscribers are notified when you publish new posts.',
- 'wp-plugin-web'
- ) }
-
- { __(
- 'When you have a large site with lots of revisions, it can slightly slow down your public site and WordPress Admin. For the best results, keep only a few revisions and empty the trash frequently.',
- 'wp-plugin-web'
- ) }
-
+
+
+
+
+
+
-
+
-
-
- ) }
-