From e7aeaef20025c6560c8f36493771e94ad2dde431 Mon Sep 17 00:00:00 2001 From: wpalani Date: Sat, 25 Nov 2023 21:59:12 -0700 Subject: [PATCH 01/17] Add `eslint` and lint js files --- .eslintrc.js | 30 ++ package-lock.json | 111 +++--- package.json | 3 + postcss.config.js | 14 +- set-latest-wp-version.js | 46 +-- src/app/components/accordion/index.js | 14 - src/app/components/accordion/stylesheet.scss | 33 -- src/app/components/app-nav/index.js | 380 ++++++++++--------- src/app/components/app-nav/logo.js | 8 +- src/app/components/errorCard/index.js | 6 +- src/app/components/header/index.js | 28 -- src/app/components/header/logo.js | 38 -- src/app/components/header/nav-large.js | 25 -- src/app/components/header/nav-mobile.js | 42 -- src/app/components/header/nav-utility.js | 35 -- src/app/components/header/stylesheet.scss | 150 -------- src/app/components/heading/index.js | 11 - src/app/components/icons/BluehostIcon.js | 25 +- src/app/components/icons/WordPressIcon.js | 64 +++- src/app/components/index.js | 3 - src/app/components/notifications/feed.js | 82 ---- src/app/components/notifications/index.js | 62 +++ src/app/components/page/index.js | 28 +- src/app/components/section/index.js | 271 +++++++------ src/app/components/site-info/index.js | 128 ++++--- src/app/components/webinars-banner/index.js | 142 ++++--- src/app/data/help.js | 23 +- src/app/data/routes.js | 53 +-- src/app/data/store.js | 3 +- src/app/index.js | 38 +- src/app/pages/ecommerce/page.js | 82 ++-- src/app/pages/example/index.js | 118 ++++-- src/app/pages/help/index.js | 82 ++-- src/app/pages/home/accountCard.js | 198 +++++----- src/app/pages/home/freeAddonsSection.js | 12 +- src/app/pages/home/helpCard.js | 53 +-- src/app/pages/home/index.js | 2 +- src/app/pages/home/welcomeSection.js | 41 +- src/app/pages/marketplace/index.js | 86 +++-- src/app/pages/performance/index.js | 91 +++-- src/app/pages/settings/automaticUpdates.js | 317 +++++++++------- src/app/pages/settings/comingSoon.js | 124 +++--- src/app/pages/settings/commentSettings.js | 237 ++++++------ src/app/pages/settings/contentSettings.js | 206 +++++----- src/app/pages/settings/index.js | 62 +-- src/app/pages/staging/index.js | 71 ++-- src/app/util/helpers.js | 149 +++----- src/index.js | 29 +- src/webpack-public-path.js | 6 +- tailwind.config.js | 72 ++-- webpack.config.js | 61 +-- 51 files changed, 1969 insertions(+), 2026 deletions(-) create mode 100644 .eslintrc.js delete mode 100644 src/app/components/accordion/index.js delete mode 100644 src/app/components/accordion/stylesheet.scss delete mode 100644 src/app/components/header/index.js delete mode 100644 src/app/components/header/logo.js delete mode 100644 src/app/components/header/nav-large.js delete mode 100644 src/app/components/header/nav-mobile.js delete mode 100644 src/app/components/header/nav-utility.js delete mode 100644 src/app/components/header/stylesheet.scss delete mode 100644 src/app/components/heading/index.js delete mode 100644 src/app/components/notifications/feed.js create mode 100644 src/app/components/notifications/index.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 000000000..bfe0dce4a --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,30 @@ +module.exports = { + extends: [ 'plugin:@wordpress/eslint-plugin/recommended' ], + settings: { + 'import/resolver': { + alias: { + map: [ + [ 'App', './src/app' ], + [ 'Assets', './aseets' ], + ], + extensions: [ '.js', '.jsx', '.json' ], + }, + }, + }, + globals: { + __: true, + _camelCase: true, + _filter: true, + _n: true, + classNames: true, + useContext: true, + useEffect: true, + useState: true, + }, + rules: { + 'import/no-unresolved': [ + 'error', + { ignore: [ '^App/', '^Assets/' ] }, + ], + }, +}; diff --git a/package-lock.json b/package-lock.json index 1bd0a17a5..e6a7c8443 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@wordpress/i18n": "^4.45.0", "@wordpress/icons": "^9.36.0", "classnames": "^2.3.2", + "eslint-import-resolver-alias": "^1.1.2", "jquery": "^3.7.1", "lodash": "^4.17.21", "react": "^18.2.0", @@ -32,9 +33,11 @@ "@tailwindcss/forms": "^0.5.6", "@testing-library/cypress": "^10.0.1", "@wordpress/env": "^8.11.0", + "@wordpress/eslint-plugin": "^17.3.0", "@wordpress/scripts": "^26.16.0", "cypress": "^13.4.0", "cypress-axe": "^1.5.0", + "eslint-plugin-import": "^2.29.0", "tailwindcss": "^3.3.5" }, "engines": { @@ -5200,9 +5203,9 @@ } }, "node_modules/@wordpress/babel-plugin-import-jsx-pragma": { - "version": "4.28.0", - "resolved": "https://registry.npmjs.org/@wordpress/babel-plugin-import-jsx-pragma/-/babel-plugin-import-jsx-pragma-4.28.0.tgz", - "integrity": "sha512-rLZgUIku7r0tI0Qxm8hLZq/0ecymtTSEL6MXesztqOMc155ZWpsTOBjOJgfiL3vaO3Hj1eZrgNKTkJbqhZNDvQ==", + "version": "4.29.0", + "resolved": "https://registry.npmjs.org/@wordpress/babel-plugin-import-jsx-pragma/-/babel-plugin-import-jsx-pragma-4.29.0.tgz", + "integrity": "sha512-VPAn1iVZae1sQ6QaiMKbp3AzFPbhBl6YQeDr3AKpj24GTiUmsho6WgxijzyhBEBX5xPHVCahhQ8mjiZ5Ql6FwA==", "dev": true, "engines": { "node": ">=14" @@ -5212,9 +5215,9 @@ } }, "node_modules/@wordpress/babel-preset-default": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@wordpress/babel-preset-default/-/babel-preset-default-7.29.0.tgz", - "integrity": "sha512-MOhijDBuG+iKZaxp8k6nvq/C4XujyHCwkYEs1WZ5+vCzsdBXg3Axa7wqURyuMjJ+e7hzejyj0w6bm19woMcIiQ==", + "version": "7.30.0", + "resolved": "https://registry.npmjs.org/@wordpress/babel-preset-default/-/babel-preset-default-7.30.0.tgz", + "integrity": "sha512-O/IA8Jvh6MzlTyeo0As2chhZ2w6WdvMYSjjTDDC66SkbnUxUf4jWqehncHGrtQLoQJfwsCUnyWSH4ePb/j+kIw==", "dev": true, "dependencies": { "@babel/core": "^7.16.0", @@ -5223,9 +5226,9 @@ "@babel/preset-env": "^7.16.0", "@babel/preset-typescript": "^7.16.0", "@babel/runtime": "^7.16.0", - "@wordpress/babel-plugin-import-jsx-pragma": "^4.28.0", - "@wordpress/browserslist-config": "^5.28.0", - "@wordpress/warning": "^2.45.0", + "@wordpress/babel-plugin-import-jsx-pragma": "^4.29.0", + "@wordpress/browserslist-config": "^5.29.0", + "@wordpress/warning": "^2.46.0", "browserslist": "^4.21.10", "core-js": "^3.31.0", "react": "^18.2.0" @@ -5241,9 +5244,9 @@ "dev": true }, "node_modules/@wordpress/browserslist-config": { - "version": "5.28.0", - "resolved": "https://registry.npmjs.org/@wordpress/browserslist-config/-/browserslist-config-5.28.0.tgz", - "integrity": "sha512-6O4mgi4mZAizyPpcKjXoXwcF7onL+BJckH3M1JnnXoa0aBb42TB3wQMTYDcGc1Kg1sRD4HWaDl53inWdmiyk7g==", + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@wordpress/browserslist-config/-/browserslist-config-5.29.0.tgz", + "integrity": "sha512-sVDgPWcI3wdKd3cIvgf/NLO7HtEkwyV4bWuSztzoemNMGQW17BhH2Blx46HnJFXm9ooYw4SpAOyioHTkuT+JFg==", "dev": true, "engines": { "node": ">=14" @@ -5784,16 +5787,16 @@ } }, "node_modules/@wordpress/eslint-plugin": { - "version": "17.2.0", - "resolved": "https://registry.npmjs.org/@wordpress/eslint-plugin/-/eslint-plugin-17.2.0.tgz", - "integrity": "sha512-i2Gpu+hmGyqzprwyfFutHaJ1ZQRv8tYfkgC3ROdzc1yAKw4AHWSRSPWk79d6Ua87y3EIYVEffRV5cQf4nnEQAQ==", + "version": "17.3.0", + "resolved": "https://registry.npmjs.org/@wordpress/eslint-plugin/-/eslint-plugin-17.3.0.tgz", + "integrity": "sha512-u6ZMf8sL4act3bNuX0CTuu9quCBw68BItpb5gpyo7LGmV4+/cic14GVWPBTroA9oz6z5UHjIfjKMqib7NGecWQ==", "dev": true, "dependencies": { "@babel/eslint-parser": "^7.16.0", "@typescript-eslint/eslint-plugin": "^6.4.1", "@typescript-eslint/parser": "^6.4.1", - "@wordpress/babel-preset-default": "^7.29.0", - "@wordpress/prettier-config": "^3.2.0", + "@wordpress/babel-preset-default": "^7.30.0", + "@wordpress/prettier-config": "^3.3.0", "cosmiconfig": "^7.0.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.25.2", @@ -6031,9 +6034,9 @@ } }, "node_modules/@wordpress/prettier-config": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@wordpress/prettier-config/-/prettier-config-3.2.0.tgz", - "integrity": "sha512-/iNBuGgUm9ul/76PrUKHzg+KVdXvsAvThz9Ui4z0HQIEBzkvNxrZnofIdH0PJ7tEVPMomkvbWmV/IR0410yfog==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@wordpress/prettier-config/-/prettier-config-3.3.0.tgz", + "integrity": "sha512-G0HoubSikorLtXs0CZ0TNGbhKImCr+Ztg0HQUKv683r+yiZBOQV1igk7TaHOmIaf6702Bt4E3++IoAQN8Nr5ew==", "dev": true, "engines": { "node": ">=14" @@ -6393,9 +6396,9 @@ } }, "node_modules/@wordpress/warning": { - "version": "2.45.0", - "resolved": "https://registry.npmjs.org/@wordpress/warning/-/warning-2.45.0.tgz", - "integrity": "sha512-cutow0USHkFWYQn4ah46gjoE9NAeq3q5fFCIXQoAK8MLuD7EVCcBmO7WvYVK0GeelHd1g7/Y7fM3GtqFFkLegg==", + "version": "2.46.0", + "resolved": "https://registry.npmjs.org/@wordpress/warning/-/warning-2.46.0.tgz", + "integrity": "sha512-oyUNmDz64nF8vnS9LaobXMIx6K5w+XhAtvo3Cjv3kCVIuWFwpxoeMus3pUo1A7v2H9zcW+E87zwEuqsLPYjNfQ==", "dev": true, "engines": { "node": ">=12" @@ -10602,6 +10605,17 @@ "eslint": ">=7.0.0" } }, + "node_modules/eslint-import-resolver-alias": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-alias/-/eslint-import-resolver-alias-1.1.2.tgz", + "integrity": "sha512-WdviM1Eu834zsfjHtcGHtGfcu+F30Od3V7I9Fi57uhBEwPkjDcii7/yW8jAT+gOhn4P/vOxxNAXbFAKsrrc15w==", + "engines": { + "node": ">= 4" + }, + "peerDependencies": { + "eslint-plugin-import": ">=1.4.0" + } + }, "node_modules/eslint-import-resolver-node": { "version": "0.3.9", "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz", @@ -27130,15 +27144,15 @@ } }, "@wordpress/babel-plugin-import-jsx-pragma": { - "version": "4.28.0", - "resolved": "https://registry.npmjs.org/@wordpress/babel-plugin-import-jsx-pragma/-/babel-plugin-import-jsx-pragma-4.28.0.tgz", - "integrity": "sha512-rLZgUIku7r0tI0Qxm8hLZq/0ecymtTSEL6MXesztqOMc155ZWpsTOBjOJgfiL3vaO3Hj1eZrgNKTkJbqhZNDvQ==", + "version": "4.29.0", + "resolved": "https://registry.npmjs.org/@wordpress/babel-plugin-import-jsx-pragma/-/babel-plugin-import-jsx-pragma-4.29.0.tgz", + "integrity": "sha512-VPAn1iVZae1sQ6QaiMKbp3AzFPbhBl6YQeDr3AKpj24GTiUmsho6WgxijzyhBEBX5xPHVCahhQ8mjiZ5Ql6FwA==", "dev": true }, "@wordpress/babel-preset-default": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@wordpress/babel-preset-default/-/babel-preset-default-7.29.0.tgz", - "integrity": "sha512-MOhijDBuG+iKZaxp8k6nvq/C4XujyHCwkYEs1WZ5+vCzsdBXg3Axa7wqURyuMjJ+e7hzejyj0w6bm19woMcIiQ==", + "version": "7.30.0", + "resolved": "https://registry.npmjs.org/@wordpress/babel-preset-default/-/babel-preset-default-7.30.0.tgz", + "integrity": "sha512-O/IA8Jvh6MzlTyeo0As2chhZ2w6WdvMYSjjTDDC66SkbnUxUf4jWqehncHGrtQLoQJfwsCUnyWSH4ePb/j+kIw==", "dev": true, "requires": { "@babel/core": "^7.16.0", @@ -27147,9 +27161,9 @@ "@babel/preset-env": "^7.16.0", "@babel/preset-typescript": "^7.16.0", "@babel/runtime": "^7.16.0", - "@wordpress/babel-plugin-import-jsx-pragma": "^4.28.0", - "@wordpress/browserslist-config": "^5.28.0", - "@wordpress/warning": "^2.45.0", + "@wordpress/babel-plugin-import-jsx-pragma": "^4.29.0", + "@wordpress/browserslist-config": "^5.29.0", + "@wordpress/warning": "^2.46.0", "browserslist": "^4.21.10", "core-js": "^3.31.0", "react": "^18.2.0" @@ -27162,9 +27176,9 @@ "dev": true }, "@wordpress/browserslist-config": { - "version": "5.28.0", - "resolved": "https://registry.npmjs.org/@wordpress/browserslist-config/-/browserslist-config-5.28.0.tgz", - "integrity": "sha512-6O4mgi4mZAizyPpcKjXoXwcF7onL+BJckH3M1JnnXoa0aBb42TB3wQMTYDcGc1Kg1sRD4HWaDl53inWdmiyk7g==", + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@wordpress/browserslist-config/-/browserslist-config-5.29.0.tgz", + "integrity": "sha512-sVDgPWcI3wdKd3cIvgf/NLO7HtEkwyV4bWuSztzoemNMGQW17BhH2Blx46HnJFXm9ooYw4SpAOyioHTkuT+JFg==", "dev": true }, "@wordpress/components": { @@ -27623,16 +27637,16 @@ } }, "@wordpress/eslint-plugin": { - "version": "17.2.0", - "resolved": "https://registry.npmjs.org/@wordpress/eslint-plugin/-/eslint-plugin-17.2.0.tgz", - "integrity": "sha512-i2Gpu+hmGyqzprwyfFutHaJ1ZQRv8tYfkgC3ROdzc1yAKw4AHWSRSPWk79d6Ua87y3EIYVEffRV5cQf4nnEQAQ==", + "version": "17.3.0", + "resolved": "https://registry.npmjs.org/@wordpress/eslint-plugin/-/eslint-plugin-17.3.0.tgz", + "integrity": "sha512-u6ZMf8sL4act3bNuX0CTuu9quCBw68BItpb5gpyo7LGmV4+/cic14GVWPBTroA9oz6z5UHjIfjKMqib7NGecWQ==", "dev": true, "requires": { "@babel/eslint-parser": "^7.16.0", "@typescript-eslint/eslint-plugin": "^6.4.1", "@typescript-eslint/parser": "^6.4.1", - "@wordpress/babel-preset-default": "^7.29.0", - "@wordpress/prettier-config": "^3.2.0", + "@wordpress/babel-preset-default": "^7.30.0", + "@wordpress/prettier-config": "^3.3.0", "cosmiconfig": "^7.0.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.25.2", @@ -27800,9 +27814,9 @@ } }, "@wordpress/prettier-config": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@wordpress/prettier-config/-/prettier-config-3.2.0.tgz", - "integrity": "sha512-/iNBuGgUm9ul/76PrUKHzg+KVdXvsAvThz9Ui4z0HQIEBzkvNxrZnofIdH0PJ7tEVPMomkvbWmV/IR0410yfog==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@wordpress/prettier-config/-/prettier-config-3.3.0.tgz", + "integrity": "sha512-G0HoubSikorLtXs0CZ0TNGbhKImCr+Ztg0HQUKv683r+yiZBOQV1igk7TaHOmIaf6702Bt4E3++IoAQN8Nr5ew==", "dev": true }, "@wordpress/primitives": { @@ -28112,9 +28126,9 @@ } }, "@wordpress/warning": { - "version": "2.45.0", - "resolved": "https://registry.npmjs.org/@wordpress/warning/-/warning-2.45.0.tgz", - "integrity": "sha512-cutow0USHkFWYQn4ah46gjoE9NAeq3q5fFCIXQoAK8MLuD7EVCcBmO7WvYVK0GeelHd1g7/Y7fM3GtqFFkLegg==", + "version": "2.46.0", + "resolved": "https://registry.npmjs.org/@wordpress/warning/-/warning-2.46.0.tgz", + "integrity": "sha512-oyUNmDz64nF8vnS9LaobXMIx6K5w+XhAtvo3Cjv3kCVIuWFwpxoeMus3pUo1A7v2H9zcW+E87zwEuqsLPYjNfQ==", "dev": true }, "@xobotyi/scrollbar-width": { @@ -31354,6 +31368,11 @@ "integrity": "sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==", "dev": true }, + "eslint-import-resolver-alias": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-alias/-/eslint-import-resolver-alias-1.1.2.tgz", + "integrity": "sha512-WdviM1Eu834zsfjHtcGHtGfcu+F30Od3V7I9Fi57uhBEwPkjDcii7/yW8jAT+gOhn4P/vOxxNAXbFAKsrrc15w==" + }, "eslint-import-resolver-node": { "version": "0.3.9", "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz", diff --git a/package.json b/package.json index e4e54baf0..8afe157e1 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "@wordpress/i18n": "^4.45.0", "@wordpress/icons": "^9.36.0", "classnames": "^2.3.2", + "eslint-import-resolver-alias": "^1.1.2", "jquery": "^3.7.1", "lodash": "^4.17.21", "react": "^18.2.0", @@ -47,9 +48,11 @@ "@tailwindcss/forms": "^0.5.6", "@testing-library/cypress": "^10.0.1", "@wordpress/env": "^8.11.0", + "@wordpress/eslint-plugin": "^17.3.0", "@wordpress/scripts": "^26.16.0", "cypress": "^13.4.0", "cypress-axe": "^1.5.0", + "eslint-plugin-import": "^2.29.0", "tailwindcss": "^3.3.5" }, "scripts": { diff --git a/postcss.config.js b/postcss.config.js index 4d8ae98c3..90a2477ed 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,8 +1,8 @@ module.exports = { - plugins: [ - require("postcss-import"), - require("tailwindcss/nesting"), - require("tailwindcss"), - ...require("@wordpress/postcss-plugins-preset"), - ], - }; \ No newline at end of file + plugins: [ + require( 'postcss-import' ), + require( 'tailwindcss/nesting' ), + require( 'tailwindcss' ), + ...require( '@wordpress/postcss-plugins-preset' ), + ], +}; diff --git a/set-latest-wp-version.js b/set-latest-wp-version.js index 05d4074a3..0502410df 100644 --- a/set-latest-wp-version.js +++ b/set-latest-wp-version.js @@ -1,24 +1,26 @@ -const fs = require('fs') -const fetch = require('node-fetch') -const wpEnv = require('./.wp-env.json') +const fs = require( 'fs' ); +const fetch = require( 'node-fetch' ); +const wpEnv = require( './.wp-env.json' ); -fetch('https://api.wordpress.org/core/stable-check/1.0/') - .then(res => res.json()) - .then( - json => { - const wpVersion = Object.keys(json)[Object.keys(json).length - 1] - wpEnv.core = `WordPress/WordPress#tags/${ wpVersion }` - fs.writeFile( - './.wp-env.json', - JSON.stringify(wpEnv, null, 2), - 'utf8', - (err) => { - if (err) { - console.log('An error occurred while writing latest WordPress version to .wp-env.json file.') - return console.log(err) - } - console.log(`The .wp-env.json file was updated with the latest WordPress version (${wpVersion}).`) +fetch( 'https://api.wordpress.org/core/stable-check/1.0/' ) + .then( ( res ) => res.json() ) + .then( ( json ) => { + const wpVersion = Object.keys( json )[ Object.keys( json ).length - 1 ]; + wpEnv.core = `WordPress/WordPress#tags/${ wpVersion }`; + fs.writeFile( + './.wp-env.json', + JSON.stringify( wpEnv, null, 2 ), + 'utf8', + ( err ) => { + if ( err ) { + console.log( + 'An error occurred while writing latest WordPress version to .wp-env.json file.' + ); + return console.log( err ); } - ); - } - ) \ No newline at end of file + console.log( + `The .wp-env.json file was updated with the latest WordPress version (${ wpVersion }).` + ); + } + ); + } ); diff --git a/src/app/components/accordion/index.js b/src/app/components/accordion/index.js deleted file mode 100644 index 851732604..000000000 --- a/src/app/components/accordion/index.js +++ /dev/null @@ -1,14 +0,0 @@ -import './stylesheet.scss'; - -const Accordion = ( { summary, className, children } ) => { - return ( -
- -

{ summary }

- -
{ children }
-
- ); -}; - -export default Accordion; diff --git a/src/app/components/accordion/stylesheet.scss b/src/app/components/accordion/stylesheet.scss deleted file mode 100644 index 21269fda6..000000000 --- a/src/app/components/accordion/stylesheet.scss +++ /dev/null @@ -1,33 +0,0 @@ -.wppbh .accordion { - border: 1px solid var(--color-border); - margin-bottom: .6em; - margin-top: .6em; - opacity: .8; - padding: 1px; - transition: opacity .2s ease; - - &:hover, - &[open] { - opacity: 1; - } - - .accordion-summary { - background: var(--color-off-white); - cursor: pointer; - font-weight: 700; - padding: 10px 15px; - - p { - display: inline; - } - } - - .accordion-content { - padding: 0 15px; - margin: 10px 0; - } - - + .accordion { - margin-top: -.6em; - } -} diff --git a/src/app/components/app-nav/index.js b/src/app/components/app-nav/index.js index 636c4a176..fd0af78d0 100644 --- a/src/app/components/app-nav/index.js +++ b/src/app/components/app-nav/index.js @@ -1,199 +1,205 @@ -import { Modal, SidebarNavigation } from "@newfold/ui-component-library" -import { NavLink, useLocation } from 'react-router-dom'; +import { useEffect, useState } from '@wordpress/element'; import { useViewportMatch } from '@wordpress/compose'; -import Logo from "./logo"; -import { topRoutes, utilityRoutes } from "../../data/routes"; -import { Bars3Icon } from "@heroicons/react/24/outline"; -import { useEffect } from 'react'; -import { handleHelpLinksClick } from "../../util/helpers"; +import { Modal, SidebarNavigation } from '@newfold/ui-component-library'; +import { NavLink, useLocation } from 'react-router-dom'; +import { Bars3Icon } from '@heroicons/react/24/outline'; +import { topRoutes, utilityRoutes } from 'App/data/routes'; +import { handleHelpLinksClick } from '../../util/helpers'; +import Logo from './logo'; export const SideNavHeader = () => { - return ( -
- -
- ); -} + return ( +
+ +
+ ); +}; export const SideNavMenu = () => { - let location = useLocation(); - - const primaryMenu = () => { - return ( - - ); - } - - const secondaryMenu = () => { - return ( - - ); - } - - const SubMenusManager = () => { - // close any open submenus - const subMenus = document.querySelectorAll('.wppbh-app-navitem-submenu'); - subMenus.forEach((subMenu) => { - subMenu.classList.add('nfd-hidden'); - }); - - // open active's submenu if it exists - const activeMenu = document.querySelector('.wppbh-app-sidenav .active'); - if (activeMenu && null !== activeMenu.nextSibling && activeMenu.nextSibling.classList.contains('wppbh-app-navitem-submenu')) { - activeMenu.nextSibling.classList.remove('nfd-hidden'); - } - } - - useEffect(() => { - SubMenusManager(); - document.onclick = SubMenusManager; - }, [location]); - - return ( -
- {primaryMenu()} - {secondaryMenu()} -
- ); -} - -export const SideNavMenuItem = ({ label, name, icon: Icon = null, path, action, subItems }) => { - return ( -
  • - - {Icon && - - } - {label} - - - {subItems && subItems.length > 0 && - - } -
    • - ); -} - -export const SideNavMenuSubItem = ({ label, name, path, action }) => { - return ( -
  • - - {label} - -
    • - ); -} + const location = useLocation(); + + const primaryMenu = () => { + return ( + + ); + }; + + const secondaryMenu = () => { + return ( + + ); + }; + + const SubMenusManager = () => { + // close any open submenus + const subMenus = document.querySelectorAll( + '.wppbh-app-navitem-submenu' + ); + subMenus.forEach( ( subMenu ) => { + subMenu.classList.add( 'nfd-hidden' ); + } ); + + // open active's submenu if it exists + const activeMenu = document.querySelector( + '.wppbh-app-sidenav .active' + ); + if ( + activeMenu && + null !== activeMenu.nextSibling && + activeMenu.nextSibling.classList.contains( + 'wppbh-app-navitem-submenu' + ) + ) { + activeMenu.nextSibling.classList.remove( 'nfd-hidden' ); + } + }; + + useEffect( () => { + SubMenusManager(); + document.onclick = SubMenusManager; + }, [ location ] ); + + return ( +
    + { primaryMenu() } + { secondaryMenu() } +
    + ); +}; + +export const SideNavMenuItem = ( { + label, + icon: Icon = null, + path, + action, + subItems, +} ) => { + return ( +
  • + + { Icon && ( + + ) } + { label } + + + { subItems && subItems.length > 0 && ( + + ) } +
    • + ); +}; + +export const SideNavMenuSubItem = ( { label, path, action } ) => { + return ( +
  • + + { label } + +
    • + ); +}; export const SideNav = () => { - return ( - - ); -} + return ( + + ); +}; export const MobileNav = () => { - const [isOpen, setIsOpen] = useState(false); - - let location = useLocation(); - // Close mobile nav when location changes - useEffect(() => { - setIsOpen(false); - }, [location]); - - return ( -
    -
    - -
    - -
    - - - setIsOpen(false)} - className="wppbh-app-sidenav-mobile nfd-z-40" - initialFocus - > - -
    - -
    -     -     - -
    -
    - ); -} + const [ isOpen, setIsOpen ] = useState( false ); + + const location = useLocation(); + // Close mobile nav when location changes + useEffect( () => { + setIsOpen( false ); + }, [ location ] ); + + return ( +
    +
    +
    + +
    + + + setIsOpen( false ) } + className="wppbh-app-sidenav-mobile nfd-z-40" + initialFocus + > + +
    + +
    +     +     +
    +
    + ); +}; export const AppNav = () => { - const isLargeViewport = useViewportMatch('medium'); - handleHelpLinksClick(); - - return ( - <> - {(isLargeViewport && ) || } - + const isLargeViewport = useViewportMatch( 'medium' ); + handleHelpLinksClick(); - ); -} \ No newline at end of file + return <>{ ( isLargeViewport && ) || }; +}; diff --git a/src/app/components/app-nav/logo.js b/src/app/components/app-nav/logo.js index a29bc2ca2..ccc7e3895 100644 --- a/src/app/components/app-nav/logo.js +++ b/src/app/components/app-nav/logo.js @@ -1,6 +1,6 @@ import { Button } from '@wordpress/components'; -import { Heading } from '..'; -import { ReactComponent as Brand } from '../../../../assets/svg/bluehost-logo.svg'; +import { Title } from '@newfold/ui-component-library'; +import { ReactComponent as Brand } from 'Assets/svg/bluehost-logo.svg'; import { delay } from 'lodash'; const Mark = () => { @@ -27,9 +27,9 @@ const Logo = () => { return (
    - + { __( 'Bluehost WordPress Plugin', 'wp-plugin-bluehost' ) } - </Heading> +
    ); }; diff --git a/src/app/components/errorCard/index.js b/src/app/components/errorCard/index.js index 0a2b437a4..abba3619e 100644 --- a/src/app/components/errorCard/index.js +++ b/src/app/components/errorCard/index.js @@ -1,3 +1,4 @@ +import { Title } from '@newfold/ui-component-library'; import './stylesheet.scss'; import { Card, @@ -6,7 +7,6 @@ import { CardFooter, Dashicon, } from '@wordpress/components'; -import { Heading } from '../../components'; import { dispatchUpdateSnackbar } from '../../util/helpers'; const ErrorCard = ( { error, className, notice = 'Error!' } ) => { @@ -15,7 +15,7 @@ const ErrorCard = ( { error, className, notice = 'Error!' } ) => { return ( - + <Dashicon icon="warning" style={ { @@ -25,7 +25,7 @@ const ErrorCard = ( { error, className, notice = 'Error!' } ) => { } } />{ ' ' } { __( 'Oh No, An Error!', 'wp-plugin-bluehost' ) } - </Heading> +

    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 ( - -

    -
    - - { ( isLargeViewport && ) || } -
    -
    - { isLargeViewport && ( - - ) } - - ); -}; - -export default Header; diff --git a/src/app/components/header/logo.js b/src/app/components/header/logo.js deleted file mode 100644 index 8b6e8f846..000000000 --- a/src/app/components/header/logo.js +++ /dev/null @@ -1,38 +0,0 @@ -import { Button } from '@wordpress/components'; -import { Heading } from '../../components'; -import { ReactComponent as Brand } from '../../../../assets/svg/bluehost-logo.svg'; -import { delay } from 'lodash'; - -const Mark = () => { - const defocus = () => { - const button = document.querySelector( '.logo-mark' ); - delay( () => { - if ( null !== button ) { - button.blur(); - } - }, 500 ); - }; - return ( - - } - {secondaryAction.title && - - } - - } +export const SectionHeader = ( { + title, + subTitle, + className, + primaryAction = { title: false, className: false, onClick: false }, + secondaryAction = { title: false, className: false, onClick: false }, +} ) => { + return ( +
    +
    + { title && ( +

    + { title } +

    + ) } + { subTitle &&

    { subTitle }

    } +
    + { ( primaryAction.title || secondaryAction.title ) && ( +
    + { primaryAction.title && ( + + ) } + { secondaryAction.title && ( + + ) } +
    + ) } +
    + ); +}; - - ); -} +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 ( -
    -
    - {children} -
    -
    - ); -} + /* + * 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 ( -
    -
    -
    - - {title} - - {description &&
    {description}
    } -
    -
    + return ( +
    +
    + { children } +
    +
    + ); +}; -
    - {title} -
    - {children} -
    -
    -
    - ); -} \ No newline at end of file +export const SectionSettings = ( { + className, + children, + title, + description, +} ) => { + return ( +
    +
    +
    + + { title } + + { description && ( +
    { description }
    + ) } +
    +
    + +
    + { title } +
    { children }
    +
    +
    + ); +}; diff --git a/src/app/components/site-info/index.js b/src/app/components/site-info/index.js index bb627c11a..682f89fa5 100644 --- a/src/app/components/site-info/index.js +++ b/src/app/components/site-info/index.js @@ -1,62 +1,78 @@ -import { LockClosedIcon, LockOpenIcon } from "@heroicons/react/24/outline"; -import { NewfoldRuntime } from "@newfold-labs/wp-module-runtime"; -import { Button } from "@newfold/ui-component-library"; -import { BluehostIcon, WordPressIcon } from "../icons"; -import { getPlatformPathUrl, addUtmParams } from "../../util/helpers"; +import { LockClosedIcon, LockOpenIcon } from '@heroicons/react/24/outline'; +import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime'; +import { Button } from '@newfold/ui-component-library'; +import { BluehostIcon, WordPressIcon } from '../icons'; +import { getPlatformPathUrl, addUtmParams } from '../../util/helpers'; export const SiteInfoBar = () => { - const { url, title } = NewfoldRuntime.siteDetails; - const parsedUrl = new URL(url); - const siteDomain = parsedUrl.hostname; - const hasSSL = parsedUrl.protocol.includes("https"); - const isWooCommerce = NewfoldRuntime.hasCapability('isEcommerce'); - const isStore = window.location.href.includes('store'); + const { url, title } = NewfoldRuntime.siteDetails; + const parsedUrl = new URL( url ); + const siteDomain = parsedUrl.hostname; + const hasSSL = parsedUrl.protocol.includes( 'https' ); + const isWooCommerce = NewfoldRuntime.hasCapability( 'isEcommerce' ); + const isStore = window.location.href.includes( 'store' ); - const renderPadLock = () => { - if (hasSSL) { - return - } + const renderPadLock = () => { + if ( hasSSL ) { + return ( + + ); + } - return - } + return ( + + ); + }; - return ( -
    -
    + return ( +
    +
    +
    +

    + { title } +

    +
    +
    + { renderPadLock() } + + { siteDomain } + +
    +
    +
    -
    -

    {title}

    -
    -
    - {renderPadLock()} - {siteDomain} -
    -
    -
    - -
    - - -
    - -
    -
    - ); -} \ No newline at end of file +
    + + +
    +
    +
    + ); +}; 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 (
  • • - {children} + { children }
    • ); - } + }; - if (!nextWebinar) { + if ( ! nextWebinar ) { return null; } @@ -94,53 +115,68 @@ const WebinarsBanner = () => {
    - FREE Monthly Webinar: {nextWebinar.title} + + FREE Monthly Webinar: { nextWebinar.title } + - {(nextWebinar.hasDescription || nextWebinar.hasTopics) && + { ( nextWebinar.hasDescription || + nextWebinar.hasTopics ) && (
    - {nextWebinar.description &&

    {nextWebinar.description}

    } - {nextWebinar.topics && + { nextWebinar.description && ( +

    + { nextWebinar.description } +

    + ) } + { nextWebinar.topics && ( <> - Topics: + + Topics: +
      - {nextWebinar.topics.map((topic, index) => {topic})} + { nextWebinar.topics.map( + ( topic, index ) => ( + + { topic } + + ) + ) }
    - } + ) }
    - } - + ) }
    - {nextWebinar.date} + { nextWebinar.date }
    - {nextWebinar.hasTime && + { nextWebinar.hasTime && (
    - {nextWebinar.time} + { nextWebinar.time }
    - } + ) }
    -
    ); -} +}; -export default WebinarsBanner; \ No newline at end of file +export default WebinarsBanner; diff --git a/src/app/data/help.js b/src/app/data/help.js index a3b045214..0184667e9 100644 --- a/src/app/data/help.js +++ b/src/app/data/help.js @@ -1,5 +1,5 @@ -import { NewfoldRuntime } from "@newfold-labs/wp-module-runtime"; -import { getPlatformBaseUrl } from "../util/helpers"; +import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime'; +import { getPlatformBaseUrl } from '../util/helpers'; const getSupportPhoneNumber = () => { const brand = NewfoldRuntime.plugin.brand; @@ -9,13 +9,14 @@ const getSupportPhoneNumber = () => { } return '888-401-4678'; -} +}; const help = [ { name: 'phone', title: __( 'Phone', 'wp-plugin-bluehost' ), + // eslint-disable-next-line @wordpress/i18n-no-variables description: __( - "Contact one of our friendly Customer Care Specialists, as we are waiting to help at " + getSupportPhoneNumber() + ". Open 24 hours - 7 days.", + `Contact one of our friendly Customer Care Specialists, as we are waiting to help at ${ getSupportPhoneNumber() }. Open 24 hours - 7 days.`, 'wp-plugin-bluehost' ), icon: false, @@ -31,7 +32,9 @@ const help = [ ), icon: false, cta: __( 'Live Chat', 'wp-plugin-bluehost' ), - url: getPlatformBaseUrl() + '/contact/?utm_campaign=&utm_content=help_chat_link&utm_term=live_chat&utm_medium=brand_plugin&utm_source=wp-admin/admin.php?page=bluehost#/help', + url: + getPlatformBaseUrl() + + '/contact/?utm_campaign=&utm_content=help_chat_link&utm_term=live_chat&utm_medium=brand_plugin&utm_source=wp-admin/admin.php?page=bluehost#/help', }, { name: 'twitter', @@ -48,7 +51,7 @@ const help = [ name: 'youtube', title: __( 'YouTube', 'wp-plugin-bluehost' ), description: __( - "Find tutorials, answers, interviews and guides on our YouTube channel.", + 'Find tutorials, answers, interviews and guides on our YouTube channel.', 'wp-plugin-bluehost' ), icon: false, @@ -64,7 +67,9 @@ const help = [ ), icon: false, cta: __( 'Visit Knowledge Base', 'wp-plugin-bluehost' ), - url: getPlatformBaseUrl() + '/help/?utm_campaign=&utm_content=help_help_link&utm_term=we_can_help&utm_medium=brand_plugin&utm_source=wp-admin/admin.php?page=bluehost#/help', + url: + getPlatformBaseUrl() + + '/help/?utm_campaign=&utm_content=help_help_link&utm_term=we_can_help&utm_medium=brand_plugin&utm_source=wp-admin/admin.php?page=bluehost#/help', }, { name: 'resources', @@ -75,7 +80,9 @@ const help = [ ), icon: false, cta: __( 'Explore Resources', 'wp-plugin-bluehost' ), - url: getPlatformBaseUrl() + '/blog/?utm_campaign=&utm_content=help_kb_link&utm_term=find_answers&utm_medium=brand_plugin&utm_source=wp-admin/admin.php?page=bluehost#/help', + url: + getPlatformBaseUrl() + + '/blog/?utm_campaign=&utm_content=help_kb_link&utm_term=find_answers&utm_medium=brand_plugin&utm_source=wp-admin/admin.php?page=bluehost#/help', }, { name: 'events', diff --git a/src/app/data/routes.js b/src/app/data/routes.js index 10667cd00..3654e1c00 100644 --- a/src/app/data/routes.js +++ b/src/app/data/routes.js @@ -1,12 +1,11 @@ -import { +import { HomeIcon, ShoppingBagIcon, WrenchScrewdriverIcon, - BoltIcon, + BoltIcon, AdjustmentsHorizontalIcon, BuildingStorefrontIcon, - QuestionMarkCircleIcon } -from '@heroicons/react/24/outline'; +} from '@heroicons/react/24/outline'; import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime'; import { Route, Routes } from 'react-router-dom'; import { __ } from '@wordpress/i18n'; @@ -18,15 +17,15 @@ import Settings from '../pages/settings'; import Staging from '../pages/staging'; import Help from '../pages/help'; import { getMarketplaceSubnavRoutes } from '../../../vendor/newfold-labs/wp-module-marketplace/components/marketplaceSubnav'; -import { ReactComponent as HelpIcon } from "../components/icons/HelpIcon.svg"; +import { ReactComponent as HelpIcon } from '../components/icons/HelpIcon.svg'; -const addPartialMatch = (prefix, path) => - prefix === path ? `${prefix}/*` : path; +const addPartialMatch = ( prefix, path ) => + prefix === path ? `${ prefix }/*` : path; -const HelpCenterAI = (e) => { +const HelpCenterAI = ( e ) => { e.preventDefault(); window.newfoldEmbeddedHelp.toggleNFDLaunchedEmbeddedHelp(); -} +}; export const AppRoutes = () => { return ( @@ -38,7 +37,7 @@ export const AppRoutes = () => { path={ addPartialMatch( '/marketplace', addPartialMatch( '/store', page.name ) - )} + ) } element={ } /> ) ) } @@ -48,7 +47,10 @@ export const AppRoutes = () => { element={

    - { __( "There's nothing here!", 'wp-plugin-bluehost' ) } + { __( + "There's nothing here!", + 'wp-plugin-bluehost' + ) }

    } @@ -84,23 +86,24 @@ export const routes = [ name: '/store/products', title: __( 'Products & Services', 'wp-plugin-bluehost' ), }, - NewfoldRuntime.hasCapability( 'hasYithExtended' ) || NewfoldRuntime.hasCapability('canAccessGlobalCTB') - ? { - name: "/store/sales_discounts", - title: __("Sales & Discounts", "wp-plugin-bluehost"), - } - : null, + NewfoldRuntime.hasCapability( 'hasYithExtended' ) || + NewfoldRuntime.hasCapability( 'canAccessGlobalCTB' ) + ? { + name: '/store/sales_discounts', + title: __( 'Sales & Discounts', 'wp-plugin-bluehost' ), + } + : null, NewfoldRuntime.isWoo - ? { - name: '/store/payments', - title: __( 'Payments', 'wp-plugin-bluehost' ), - } - : null, + ? { + name: '/store/payments', + title: __( 'Payments', 'wp-plugin-bluehost' ), + } + : null, { name: '/store/details', title: __( 'Store Details', 'wp-plugin-bluehost' ), }, - ].filter(Boolean), + ].filter( Boolean ), }, { name: '/marketplace', @@ -132,7 +135,9 @@ export const routes = [ title: __( 'Help', 'wp-plugin-bluehost' ), Component: Help, Icon: HelpIcon, - action: NewfoldRuntime.hasCapability( 'canAccessHelpCenter' ) ? HelpCenterAI : false, + action: NewfoldRuntime.hasCapability( 'canAccessHelpCenter' ) + ? HelpCenterAI + : false, }, ]; diff --git a/src/app/data/store.js b/src/app/data/store.js index f57ad7e03..64def0fe8 100644 --- a/src/app/data/store.js +++ b/src/app/data/store.js @@ -11,7 +11,7 @@ const AppStore = createContext( DEFAULT ); export const bluehostApiFetchSettings = async ( options = {} ) => { return await apiFetch( { - url: NewfoldRuntime.createApiUrl('/bluehost/v1/settings'), + url: NewfoldRuntime.createApiUrl( '/bluehost/v1/settings' ), ...options, } ); }; @@ -44,6 +44,7 @@ export const AppStoreProvider = ( { children } ) => { setError( error ); } ); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [] ); return ( diff --git a/src/app/index.js b/src/app/index.js index 68aa1b633..3d9c3622f 100644 --- a/src/app/index.js +++ b/src/app/index.js @@ -4,7 +4,6 @@ import './tailwind.pcss'; import AppStore, { AppStoreProvider } from './data/store'; import { useLocation, HashRouter as Router } from 'react-router-dom'; import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime'; -import { __ } from '@wordpress/i18n'; import { SnackbarList, Spinner } from '@wordpress/components'; import classnames from 'classnames'; import AppRoutes from './data/routes'; @@ -12,13 +11,13 @@ import ErrorCard from './components/errorCard'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect } from 'react'; import { ErrorBoundary } from 'react-error-boundary'; +// eslint-disable-next-line import/no-unresolved import { store as noticesStore } from '@wordpress/notices'; -import { setActiveSubnav } from './util/helpers'; import { kebabCase, filter } from 'lodash'; -import { Root } from "@newfold/ui-component-library"; +import { Root } from '@newfold/ui-component-library'; import { AppNav } from './components/app-nav'; import { SiteInfoBar } from './components/site-info'; -import { NotificationFeed } from './components/notifications/feed'; +import { NotificationFeed } from './components/notifications'; // component sourced from module import { default as NewfoldNotifications } from '../../vendor/newfold-labs/wp-module-notifications/assets/js/components/notifications/'; @@ -28,9 +27,6 @@ import { addQueryArgs } from '@wordpress/url'; import { useState } from '@wordpress/element'; const Notices = () => { - if ( 'undefined' === typeof noticesStore ) { - return null; - } const notices = useSelect( ( select ) => select( noticesStore ) @@ -39,6 +35,7 @@ const Notices = () => { [] ); const { removeNotice } = useDispatch( noticesStore ); + return ( { ); }; -const handlePageLoad = () => { - const location = useLocation(); - const routeContents = document.querySelector( '.wppbh-app-body-inner' ); - useEffect( () => { - setActiveSubnav( location.pathname ); - window.scrollTo( 0, 0 ); - if ( routeContents ) { - routeContents.focus( { preventScroll: true } ); - } - }, [ location.pathname ] ); -}; - const AppBody = ( props ) => { const location = useLocation(); const hashedPath = '#' + location.pathname; const { booted, hasError } = useContext( AppStore ); - handlePageLoad(); - return (
    { 'nfd-w-full nfd-p-4 min-[783px]:nfd-p-0' ) } > -
    @@ -105,7 +87,7 @@ const AppBody = ( props ) => {
    - + { 'undefined' !== typeof noticesStore && }
    ); 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 ( - - - - ); + return ( + + + + ); }; export default ECommerce; diff --git a/src/app/pages/example/index.js b/src/app/pages/example/index.js index 12e2ae61b..d64495801 100644 --- a/src/app/pages/example/index.js +++ b/src/app/pages/example/index.js @@ -1,44 +1,86 @@ -import { Button } from "@newfold/ui-component-library"; -import { SectionContainer, SectionHeader, SectionContent } from "../../components/section"; -import { RocketLaunchIcon } from "@heroicons/react/24/outline"; -import { Page } from "../../components/page"; +import { Button } from '@newfold/ui-component-library'; +import { + SectionContainer, + SectionHeader, + SectionContent, +} from '../../components/section'; +import { RocketLaunchIcon } from '@heroicons/react/24/outline'; +import { Page } from '../../components/page'; const Example = () => { - return ( - - - { console.log('Primary Action Clicked') } }} - secondaryAction={{ title: 'Secondary Action', onClick: () => { console.log('Secondary Action Clicked') } }} - /> + return ( + + + { + // eslint-disable-next-line no-console + console.log( 'Primary Action Clicked' ); + }, + } } + secondaryAction={ { + title: 'Secondary Action', + onClick: () => { + // eslint-disable-next-line no-console + console.log( 'Secondary Action Clicked' ); + }, + } } + /> - -
    - 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. +

    + +
    +     +     +     + ); +}; -export default Example; \ No newline at end of file +export default Example; diff --git a/src/app/pages/help/index.js b/src/app/pages/help/index.js index c5df84caf..fd0961d18 100644 --- a/src/app/pages/help/index.js +++ b/src/app/pages/help/index.js @@ -1,34 +1,36 @@ -import { Page } from '../../components/page'; -import { SectionContainer, SectionContent, SectionHeader } from '../../components/section'; -import help from '../../data/help'; -import { Button, Card, Title } from "@newfold/ui-component-library"; +import { Button, Card, Title } from '@newfold/ui-component-library'; +import { Page } from 'App/components/page'; +import { + SectionContainer, + SectionContent, + SectionHeader, +} from 'App/components/section'; +import help from 'App/data/help'; -const HelpCard = ({ item }) => { - return ( - - - {item.title} -

    {item.description}

    -     +const HelpCard = ( { item } ) => { + return ( + + + + { item.title } + +

    { item.description }

    +     - - - -     - ); -} + + + +     + ); +}; const Help = () => { const renderHelpCards = () => { @@ -36,24 +38,24 @@ const Help = () => { return (
    - {helpItems.map((item) => ( - - ))} + { helpItems.map( ( item ) => ( + + ) ) }
    ); }; return ( - - + + - - {renderHelpCards()} - + { renderHelpCards() } ); diff --git a/src/app/pages/home/accountCard.js b/src/app/pages/home/accountCard.js index f862cdeec..061249211 100644 --- a/src/app/pages/home/accountCard.js +++ b/src/app/pages/home/accountCard.js @@ -1,99 +1,109 @@ import { - CpuChipIcon, - CreditCardIcon, - EnvelopeIcon, - GiftIcon, - IdentificationIcon, - ShieldCheckIcon, -} from "@heroicons/react/24/outline"; -import { NewfoldRuntime } from "@newfold-labs/wp-module-runtime"; -import { Card, Title } from "@newfold/ui-component-library"; -import { addUtmParams, getPlatformPathUrl, getPlatformBaseUrl, isJarvis } from "../../util/helpers"; -import classNames from "classnames"; + CpuChipIcon, + CreditCardIcon, + EnvelopeIcon, + GiftIcon, + IdentificationIcon, + ShieldCheckIcon, +} from '@heroicons/react/24/outline'; +import { Card, Title } from '@newfold/ui-component-library'; +import { + addUtmParams, + getPlatformPathUrl, + getPlatformBaseUrl, + isJarvis, +} from '../../util/helpers'; +import classNames from 'classnames'; const base = [ - { - icon: CpuChipIcon, - id: "account_link", - href: addUtmParams( getPlatformPathUrl("hosting/list", "app") ), - label: isJarvis() - ? __("Hosting", "bluehost-wordpress-plugin") - : __("Control Panel", "bluehost-wordpress-plugin"), - color: "nfd-fill-gray", - }, - { - icon: GiftIcon, - id: "products_link", - href: addUtmParams( getPlatformPathUrl("renewal-center", "account_center#products") ), - label: isJarvis() - ? __("Renewal Center", "bluehost-wordpress-plugin") - : __("Products", "bluehost-wordpress-plugin"), - color: "nfd-fill-primary-dark", - }, - { - icon: CreditCardIcon, - id: "billing_link", - href: addUtmParams( getPlatformPathUrl("billing-center", "account_center#billing") ), - label: isJarvis() - ? __("Payment Methods", "bluehost-wordpress-plugin") - : __("Billing", "bluehost-wordpress-plugin"), - color: "nfd-fill-primary", - }, - { - icon: EnvelopeIcon, - id: "mail_link", - href: addUtmParams( getPlatformPathUrl("home", "app#/email-office") ), - label: isJarvis() - ? __("Mail", "bluehost-wordpress-plugin") - : __("Mail & Office", "bluehost-wordpress-plugin"), - color: "nfd-fill-[#5b5b5b]", - }, - { - icon: ShieldCheckIcon, - id: "security_link", - href: addUtmParams( getPlatformPathUrl("account-center", "account_center#security") ), - label: __("Security", "bluehost-wordpress-plugin"), - color: "nfd-fill-[#17b212]", - }, - { - icon: IdentificationIcon, - id: "validation_token_link", - href: isJarvis() - ? addUtmParams( getPlatformPathUrl("account-center") ) - : addUtmParams( getPlatformBaseUrl("/cgi/token") ), - label: isJarvis() - ? __("Profile", "bluehost-wordpress-plugin") - : __("Validation Token", "bluehost-wordpress-plugin"), - color: "nfd-fill-[#f89c24]", - }, + { + icon: CpuChipIcon, + id: 'account_link', + href: addUtmParams( getPlatformPathUrl( 'hosting/list', 'app' ) ), + label: isJarvis() + ? __( 'Hosting', 'bluehost-wordpress-plugin' ) + : __( 'Control Panel', 'bluehost-wordpress-plugin' ), + color: 'nfd-fill-gray', + }, + { + icon: GiftIcon, + id: 'products_link', + href: addUtmParams( + getPlatformPathUrl( 'renewal-center', 'account_center#products' ) + ), + label: isJarvis() + ? __( 'Renewal Center', 'bluehost-wordpress-plugin' ) + : __( 'Products', 'bluehost-wordpress-plugin' ), + color: 'nfd-fill-primary-dark', + }, + { + icon: CreditCardIcon, + id: 'billing_link', + href: addUtmParams( + getPlatformPathUrl( 'billing-center', 'account_center#billing' ) + ), + label: isJarvis() + ? __( 'Payment Methods', 'bluehost-wordpress-plugin' ) + : __( 'Billing', 'bluehost-wordpress-plugin' ), + color: 'nfd-fill-primary', + }, + { + icon: EnvelopeIcon, + id: 'mail_link', + href: addUtmParams( getPlatformPathUrl( 'home', 'app#/email-office' ) ), + label: isJarvis() + ? __( 'Mail', 'bluehost-wordpress-plugin' ) + : __( 'Mail & Office', 'bluehost-wordpress-plugin' ), + color: 'nfd-fill-[#5b5b5b]', + }, + { + icon: ShieldCheckIcon, + id: 'security_link', + href: addUtmParams( + getPlatformPathUrl( 'account-center', 'account_center#security' ) + ), + label: __( 'Security', 'bluehost-wordpress-plugin' ), + color: 'nfd-fill-[#17b212]', + }, + { + icon: IdentificationIcon, + id: 'validation_token_link', + href: isJarvis() + ? addUtmParams( getPlatformPathUrl( 'account-center' ) ) + : addUtmParams( getPlatformBaseUrl( '/cgi/token' ) ), + label: isJarvis() + ? __( 'Profile', 'bluehost-wordpress-plugin' ) + : __( 'Validation Token', 'bluehost-wordpress-plugin' ), + color: 'nfd-fill-[#f89c24]', + }, ]; -export function AccountCard(props) { - return ( - - - Bluehost Account - - - - ); -} +export const AccountCard = ( { props } ) => { + return ( + + + Bluehost Account + + + + ); +}; diff --git a/src/app/pages/home/freeAddonsSection.js b/src/app/pages/home/freeAddonsSection.js index 2518f6f5f..2aa9f50be 100644 --- a/src/app/pages/home/freeAddonsSection.js +++ b/src/app/pages/home/freeAddonsSection.js @@ -1,7 +1,7 @@ -import { FreePlugins } from "@newfold-labs/wp-module-ecommerce"; -import { useNotification } from "../../components/notifications/feed"; +import { FreePlugins } from '@newfold-labs/wp-module-ecommerce'; +import { useNotification } from 'App/components/notifications'; -export function FreeAddonsSection() { - let notify = useNotification(); - return ; -} +export const FreeAddonsSection = ( { props } ) => { + const notify = useNotification(); + return ; +}; diff --git a/src/app/pages/home/helpCard.js b/src/app/pages/home/helpCard.js index a3ee28006..c7829c2db 100644 --- a/src/app/pages/home/helpCard.js +++ b/src/app/pages/home/helpCard.js @@ -1,26 +1,31 @@ -import { Button, Card, Title } from "@newfold/ui-component-library"; -import SupportIllustration from "../../images/section-home-help-me.svg"; +import { Button, Card, Title } from '@newfold/ui-component-library'; +import SupportIllustration from '../../images/section-home-help-me.svg'; export function HelpCard() { - return ( - - - Need some help? -
    - Help Agent Illustration -

    From DIY to full-service help.

    -

    - Call or chat 24/7 for support or let our experts build your site for - you. -

    - -
    -     -     - ); + return ( + + + Need some help? +
    + Help Agent Illustration +

    From DIY to full-service help.

    +

    + Call or chat 24/7 for support or let our experts build + your site for you. +

    + +
    +     +     + ); } diff --git a/src/app/pages/home/index.js b/src/app/pages/home/index.js index 7df5f3d50..6b7efae6c 100644 --- a/src/app/pages/home/index.js +++ b/src/app/pages/home/index.js @@ -12,7 +12,7 @@ const Home = () => { - +
    diff --git a/src/app/pages/home/welcomeSection.js b/src/app/pages/home/welcomeSection.js index 002dce3eb..d5540304c 100644 --- a/src/app/pages/home/welcomeSection.js +++ b/src/app/pages/home/welcomeSection.js @@ -1,23 +1,24 @@ -import { OnboardingScreen } from "@newfold-labs/wp-module-ecommerce"; -import { useContext } from "@wordpress/element"; -import { useNotification } from "../../components/notifications/feed"; -import AppStore from "../../data/store"; -import { bluehostSettingsApiFetch } from "../../util/helpers"; +import { useContext } from '@wordpress/element'; +import { OnboardingScreen } from '@newfold-labs/wp-module-ecommerce'; +import AppStore from 'App/data/store'; +import { bluehostSettingsApiFetch } from 'App/util/helpers'; +import { useNotification } from 'App/components/notifications'; export function WelcomeSection() { - let { store, setStore } = useContext(AppStore); - let notify = useNotification(); - const toggleComingSoon = () => - bluehostSettingsApiFetch( - { comingSoon: !store.comingSoon }, - console.error, - () => setStore({ ...store, comingSoon: !store.comingSoon }) - ); - return ( - - ); + const { store, setStore } = useContext( AppStore ); + const notify = useNotification(); + const toggleComingSoon = () => + bluehostSettingsApiFetch( + { comingSoon: ! store.comingSoon }, + // eslint-disable-next-line no-console + console.error, + () => setStore( { ...store, comingSoon: ! store.comingSoon } ) + ); + return ( + + ); } diff --git a/src/app/pages/marketplace/index.js b/src/app/pages/marketplace/index.js index 97d5fc920..40e929ff1 100644 --- a/src/app/pages/marketplace/index.js +++ b/src/app/pages/marketplace/index.js @@ -2,54 +2,64 @@ import apiFetch from '@wordpress/api-fetch'; import { useState, useEffect } from '@wordpress/element'; import { useLocation } from 'react-router-dom'; import classnames from 'classnames'; -import { Page } from "../../components/page"; -import { SectionContainer, SectionHeader, SectionContent } from "../../components/section"; -import { NewfoldRuntime } from "@newfold-labs/wp-module-runtime"; +import { Page } from 'App/components/page'; +import { + SectionContainer, + SectionHeader, + SectionContent, +} from 'App/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 = () => { - - // constants to pass to module - const moduleConstants = { - 'supportsCTB': true, - 'text': { - 'title': __('Marketplace', 'bluehost-wordpress-plugin'), - 'subTitle': __('Explore our featured collection of tools and services.', 'bluehost-wordpress-plugin'), - 'error': __('Oops, there was an error loading the marketplace, please try again later.', 'bluehost-wordpress-plugin'), - 'noProducts': __('Sorry, no marketplace items. Please, try again later.', 'bluehost-wordpress-plugin'), - 'loadMore': __('Load More', 'bluehost-wordpress-plugin'), - } + // constants to pass to module + const moduleConstants = { + supportsCTB: true, + text: { + title: __( 'Marketplace', 'bluehost-wordpress-plugin' ), + subTitle: __( + 'Explore our featured collection of tools and services.', + 'bluehost-wordpress-plugin' + ), + error: __( + 'Oops, there was an error loading the marketplace, please try again later.', + 'bluehost-wordpress-plugin' + ), + noProducts: __( + 'Sorry, no marketplace items. Please, try again later.', + 'bluehost-wordpress-plugin' + ), + loadMore: __( 'Load More', 'bluehost-wordpress-plugin' ), + }, }; - // methods to pass to module - const moduleMethods = { - apiFetch, - classnames, - useState, - useEffect, - useLocation, - NewfoldRuntime, - }; + // methods to pass to module + const moduleMethods = { + apiFetch, + classnames, + useState, + useEffect, + useLocation, + NewfoldRuntime, + }; const moduleComponents = { SectionHeader, SectionContent, - } - - return ( - - - - + }; - - - ); + return ( + + + + + + ); }; -export default MarketplacePage; \ No newline at end of file +export default MarketplacePage; diff --git a/src/app/pages/performance/index.js b/src/app/pages/performance/index.js index 3a4f7ec34..33dfc9d97 100644 --- a/src/app/pages/performance/index.js +++ b/src/app/pages/performance/index.js @@ -4,59 +4,66 @@ 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 { - bluehostSettingsApiFetch as newfoldSettingsApiFetch, - bluehostPurgeCacheApiFetch as newfoldPurgeCacheApiFetch -} from '../../util/helpers'; +import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime'; +import { + SectionContainer, + SectionHeader, + SectionContent, + SectionSettings, +} from 'App/components/section'; +import { useNotification } from 'App/components/notifications'; +import { + bluehostSettingsApiFetch as newfoldSettingsApiFetch, + bluehostPurgeCacheApiFetch as newfoldPurgeCacheApiFetch, +} from 'App/util/helpers'; import { default as NewfoldPerformance } from '../../../../vendor/newfold-labs/wp-module-performance/components/performance/'; const PerformancePage = () => { + // constants to pass to module + const moduleConstants = {}; - // 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, - }; + // methods to pass to module + const moduleMethods = { + apiFetch, + classnames, + useState, + useEffect, + useContext, + NewfoldRuntime, + useNotification, + newfoldSettingsApiFetch, + newfoldPurgeCacheApiFetch, + useUpdateEffect, + AppStore, + }; const moduleComponents = { Page, - SectionHeader, + SectionHeader, SectionContent, - SectionSettings, - SectionContainer, - Fragment, - } + SectionSettings, + SectionContainer, + Fragment, + }; return ( - - - - - + + + + + ); }; diff --git a/src/app/pages/settings/automaticUpdates.js b/src/app/pages/settings/automaticUpdates.js index 6ef9a85f2..0758c2fa2 100644 --- a/src/app/pages/settings/automaticUpdates.js +++ b/src/app/pages/settings/automaticUpdates.js @@ -1,284 +1,323 @@ +import { useState } from '@wordpress/element'; +import { useUpdateEffect } from 'react-use'; +import { Alert, ToggleField } from '@newfold/ui-component-library'; import AppStore from '../../data/store'; import { bluehostSettingsApiFetch } from '../../util/helpers'; -import { useUpdateEffect } from 'react-use'; -import { useState } from '@wordpress/element'; -import { Alert, ToggleField } from "@newfold/ui-component-library"; -import { SectionSettings } from "../../components/section"; -import { useNotification } from '../../components/notifications/feed'; +import { SectionSettings } from 'App/components/section'; +import { useNotification } from 'App/components/notifications'; -const AutomaticUpdatesAll = ({ setError, notify }) => { - 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 + store.autoUpdatesPlugins && + store.autoUpdatesThemes + ? true + : false ); const getAllNoticeTitle = () => { return autoUpdatesAll - ? __('Enabled All auto-updates', 'wp-plugin-bluehost') - : __('Disabled All auto-updates', 'wp-plugin-bluehost'); + ? __( 'Enabled All auto-updates', 'wp-plugin-bluehost' ) + : __( 'Disabled All auto-updates', 'wp-plugin-bluehost' ); }; const getAllNoticeText = () => { return autoUpdatesAll - ? __('Everything will automatically update.', 'wp-plugin-bluehost') - : __('Custom auto-update settings.', 'wp-plugin-bluehost'); + ? __( + 'Everything will automatically update.', + 'wp-plugin-bluehost' + ) + : __( 'Custom auto-update settings.', 'wp-plugin-bluehost' ); }; const toggleAutoUpdatesAll = () => { - if ( autoUpdatesAll ) { // is unchecking + if ( autoUpdatesAll ) { + // is unchecking // just uncheck this one - setAutoUpdatesAll(!autoUpdatesAll); - } else { // is checking + setAutoUpdatesAll( ! autoUpdatesAll ); + } else { + // is checking bluehostSettingsApiFetch( - { + { autoUpdatesMajorCore: true, autoUpdatesPlugins: true, - autoUpdatesThemes: true - }, - setError, - (response) => { - setAutoUpdatesAll(!autoUpdatesAll); + autoUpdatesThemes: true, + }, + setError, + // eslint-disable-next-line no-unused-vars + ( response ) => { + setAutoUpdatesAll( ! autoUpdatesAll ); } ); } }; const notifySuccess = () => { - notify.push("everything-autoupdate-notice", { + notify.push( 'everything-autoupdate-notice', { title: getAllNoticeTitle(), - description: ( - - {getAllNoticeText()} - - ), - variant: "success", + description: { getAllNoticeText() }, + variant: 'success', autoDismiss: 5000, - }); + } ); }; useEffect( () => { - if ( store.autoUpdatesMajorCore && store.autoUpdatesPlugins && store.autoUpdatesThemes ) { + if ( + store.autoUpdatesMajorCore && + store.autoUpdatesPlugins && + store.autoUpdatesThemes + ) { setAutoUpdatesAll( true ); } else { setAutoUpdatesAll( false ); } - }, [ store.autoUpdatesMajorCore, store.autoUpdatesPlugins, store.autoUpdatesThemes ] ); - - useUpdateEffect(() => { - - setStore({ + }, [ + store.autoUpdatesMajorCore, + store.autoUpdatesPlugins, + store.autoUpdatesThemes, + ] ); + + useUpdateEffect( () => { + setStore( { ...store, autoUpdatesAll, - }); + } ); notifySuccess(); - }, [autoUpdatesAll]); + }, [ autoUpdatesAll ] ); return ( ); -} +}; -const AutomaticUpdatesMajorCore = ({ setError, notify }) => { - const { store, setStore } = useContext(AppStore); - const [autoUpdatesMajorCore, setAutoUpdatesCore] = useState( +const AutomaticUpdatesMajorCore = ( { setError, notify } ) => { + const { store, setStore } = useContext( AppStore ); + const [ autoUpdatesMajorCore, setAutoUpdatesCore ] = useState( store.autoUpdatesMajorCore ); const getCoreNoticeTitle = () => { return autoUpdatesMajorCore - ? __('Enabled Core auto-updates', 'wp-plugin-bluehost') - : __('Disabled Core auto-updates', 'wp-plugin-bluehost'); + ? __( 'Enabled Core auto-updates', 'wp-plugin-bluehost' ) + : __( 'Disabled Core auto-updates', 'wp-plugin-bluehost' ); }; const getCoreNoticeText = () => { return autoUpdatesMajorCore - ? __('WordPress will automatically update.', 'wp-plugin-bluehost') - : __('WordPress must be manually updated.', 'wp-plugin-bluehost'); + ? __( 'WordPress will automatically update.', 'wp-plugin-bluehost' ) + : __( 'WordPress must be manually updated.', 'wp-plugin-bluehost' ); }; const toggleAutoUpdatesMajorCore = () => { - bluehostSettingsApiFetch({ autoUpdatesMajorCore: !autoUpdatesMajorCore }, setError, (response) => { - setAutoUpdatesCore(!autoUpdatesMajorCore); - }); + bluehostSettingsApiFetch( + { autoUpdatesMajorCore: ! autoUpdatesMajorCore }, + setError, + // eslint-disable-next-line no-unused-vars + ( response ) => { + setAutoUpdatesCore( ! autoUpdatesMajorCore ); + } + ); }; const notifySuccess = () => { - notify.push("major-core-autoupdate-notice", { + notify.push( 'major-core-autoupdate-notice', { title: getCoreNoticeTitle(), - description: ( - - {getCoreNoticeText()} - - ), - variant: "success", + description: { getCoreNoticeText() }, + variant: 'success', autoDismiss: 5000, - }); + } ); }; - useUpdateEffect(() => { - setStore({ + useUpdateEffect( () => { + setStore( { ...store, autoUpdatesMajorCore, - }); + } ); notifySuccess(); - }, [autoUpdatesMajorCore]); + }, [ autoUpdatesMajorCore ] ); return ( ); -} +}; -const AutomaticUpdatesPlugins = ({ setError, notify }) => { - const { store, setStore } = useContext(AppStore); - const [autoUpdatesPlugins, setAutoUpdatesPlugins] = useState( +const AutomaticUpdatesPlugins = ( { setError, notify } ) => { + const { store, setStore } = useContext( AppStore ); + const [ autoUpdatesPlugins, setAutoUpdatesPlugins ] = useState( store.autoUpdatesPlugins ); const getPluginsNoticeTitle = () => { return autoUpdatesPlugins - ? __('Enabled Plugins auto-update', 'wp-plugin-bluehost') - : __('Disabled Plugins auto-update', 'wp-plugin-bluehost'); + ? __( 'Enabled Plugins auto-update', 'wp-plugin-bluehost' ) + : __( 'Disabled Plugins auto-update', 'wp-plugin-bluehost' ); }; const getPluginsNoticeText = () => { return autoUpdatesPlugins - ? __('All plugins will automatically update.', 'wp-plugin-bluehost') - : __('Each plugin must be manually updated.', 'wp-plugin-bluehost'); + ? __( + 'All plugins will automatically update.', + 'wp-plugin-bluehost' + ) + : __( + 'Each plugin must be manually updated.', + 'wp-plugin-bluehost' + ); }; const toggleAutoUpdatesPlugins = () => { - bluehostSettingsApiFetch({ autoUpdatesPlugins: !autoUpdatesPlugins }, setError, (response) => { - setAutoUpdatesPlugins(!autoUpdatesPlugins); - }); + bluehostSettingsApiFetch( + { autoUpdatesPlugins: ! autoUpdatesPlugins }, + setError, + // eslint-disable-next-line no-unused-vars + ( response ) => { + setAutoUpdatesPlugins( ! autoUpdatesPlugins ); + } + ); }; const notifySuccess = () => { - notify.push("plugins-autoupdate-notice", { + notify.push( 'plugins-autoupdate-notice', { title: getPluginsNoticeTitle(), - description: ( - - {getPluginsNoticeText()} - - ), - variant: "success", + description: { getPluginsNoticeText() }, + variant: 'success', autoDismiss: 5000, - }); + } ); }; - useUpdateEffect(() => { - setStore({ + useUpdateEffect( () => { + setStore( { ...store, autoUpdatesPlugins, - }); + } ); notifySuccess(); - }, [autoUpdatesPlugins]); + }, [ autoUpdatesPlugins ] ); return ( ); -} +}; -const AutomaticUpdatesThemes = ({ setError, notify }) => { - const { store, setStore } = useContext(AppStore); - const [autoUpdatesThemes, setAutoUpdatesThemes] = useState( +const AutomaticUpdatesThemes = ( { setError, notify } ) => { + const { store, setStore } = useContext( AppStore ); + const [ autoUpdatesThemes, setAutoUpdatesThemes ] = useState( store.autoUpdatesThemes ); const getThemesNoticeTitle = () => { return autoUpdatesThemes - ? __('Enabled Themes auto-update', 'wp-plugin-bluehost') - : __('Disabled Themes auto-update', 'wp-plugin-bluehost'); + ? __( 'Enabled Themes auto-update', 'wp-plugin-bluehost' ) + : __( 'Disabled Themes auto-update', 'wp-plugin-bluehost' ); }; const getThemesNoticeText = () => { return autoUpdatesThemes - ? __('All themes will automatically update.', 'wp-plugin-bluehost') - : __('Each theme must be manually updated.', 'wp-plugin-bluehost'); + ? __( + 'All themes will automatically update.', + 'wp-plugin-bluehost' + ) + : __( + 'Each theme must be manually updated.', + 'wp-plugin-bluehost' + ); }; const toggleAutoUpdatesThemes = () => { - bluehostSettingsApiFetch({ autoUpdatesThemes: !autoUpdatesThemes }, setError, (response) => { - setAutoUpdatesThemes(!autoUpdatesThemes); - }); + bluehostSettingsApiFetch( + { autoUpdatesThemes: ! autoUpdatesThemes }, + setError, + // eslint-disable-next-line no-unused-vars + ( response ) => { + setAutoUpdatesThemes( ! autoUpdatesThemes ); + } + ); }; const notifySuccess = () => { - notify.push("themes-autoupdate-notice", { + notify.push( 'themes-autoupdate-notice', { title: getThemesNoticeTitle(), - description: ( - - {getThemesNoticeText()} - - ), - variant: "success", + description: { getThemesNoticeText() }, + variant: 'success', autoDismiss: 5000, - }); + } ); }; - useUpdateEffect(() => { - setStore({ + useUpdateEffect( () => { + setStore( { ...store, autoUpdatesThemes, - }); + } ); notifySuccess(); - }, [autoUpdatesThemes]); + }, [ autoUpdatesThemes ] ); return ( ); -} +}; const AutomaticUpdates = () => { - const [isError, setError] = useState(false); + const [ isError, setError ] = useState( false ); - let notify = useNotification(); + const notify = useNotification(); return (
    - - - - - {isError && + + + + + { isError && ( - {__('Oops! Something went wrong. Please try again.', 'wp-plugin-bluehost')} + { __( + 'Oops! Something went wrong. Please try again.', + 'wp-plugin-bluehost' + ) } - } + ) }
    ); -} +}; -export default AutomaticUpdates; \ No newline at end of file +export default AutomaticUpdates; diff --git a/src/app/pages/settings/comingSoon.js b/src/app/pages/settings/comingSoon.js index e77a57ba2..de0d710cd 100644 --- a/src/app/pages/settings/comingSoon.js +++ b/src/app/pages/settings/comingSoon.js @@ -1,115 +1,131 @@ +import { useState } from '@wordpress/element'; +import { useUpdateEffect } from 'react-use'; +import { Alert, ToggleField } from '@newfold/ui-component-library'; import AppStore from '../../data/store'; import { bluehostSettingsApiFetch, comingSoonAdminbarToggle, } from '../../util/helpers'; -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'; +import { SectionSettings } from 'App/components/section'; +import { useNotification } from 'App/components/notifications'; 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 ); - let notify = useNotification(); + const notify = useNotification(); const getComingSoonNoticeTitle = () => { return comingSoon - ? __('Coming soon activated', 'wp-plugin-bluehost') - : __('Coming soon deactivated', 'wp-plugin-bluehost'); + ? __( 'Coming soon activated', 'wp-plugin-bluehost' ) + : __( 'Coming soon deactivated', 'wp-plugin-bluehost' ); }; const getComingSoonNoticeText = () => { return comingSoon ? __( - 'Coming soon page is active. Site requires login.', - 'wp-plugin-bluehost' - ) + 'Coming soon page is active. Site requires login.', + 'wp-plugin-bluehost' + ) : __( - 'Coming soon page is not active. Site is live to visitors.', - 'wp-plugin-bluehost' - ); + 'Coming soon page is not active. Site is live to visitors.', + 'wp-plugin-bluehost' + ); }; const toggleComingSoon = () => { - bluehostSettingsApiFetch({ comingSoon: !comingSoon }, setError, (response) => { - setComingSoon(!comingSoon); - }); + bluehostSettingsApiFetch( + { comingSoon: ! comingSoon }, + setError, + // eslint-disable-next-line no-unused-vars + ( response ) => { + setComingSoon( ! comingSoon ); + } + ); }; const notifySuccess = () => { - notify.push("coming-soon-toggle-notice", { + notify.push( 'coming-soon-toggle-notice', { title: getComingSoonNoticeTitle(), - description: ( - - {getComingSoonNoticeText()} - - ), - variant: "success", + description: { getComingSoonNoticeText() }, + variant: 'success', autoDismiss: 5000, - }); + } ); }; - useUpdateEffect(() => { - setStore({ + useUpdateEffect( () => { + setStore( { ...store, comingSoon, - }); + } ); notifySuccess(); - comingSoonAdminbarToggle(comingSoon); - }, [comingSoon]); + comingSoonAdminbarToggle( comingSoon ); + }, [ comingSoon ] ); const getComingSoonSectionTitle = () => { const getStatus = () => { - return ( - comingSoon - ? {__('Coming Soon', 'wp-plugin-bluehost')} - : {__('Live', 'wp-plugin-bluehost')} + return comingSoon ? ( + + { __( 'Coming Soon', 'wp-plugin-bluehost' ) } + + ) : ( + + { __( 'Live', 'wp-plugin-bluehost' ) } + ); }; return ( - {__('Site Status', 'wp-plugin-bluehost')}: {getStatus()} - ) + + { __( 'Site Status', 'wp-plugin-bluehost' ) }: { getStatus() } + + ); }; return (
    { + ) } + checked={ comingSoon } + onChange={ () => { toggleComingSoon(); - }} + } } /> - {comingSoon && + { comingSoon && ( - {__('Your website is currently displaying a "Coming Soon" page.', 'wp-plugin-bluehost')} + { __( + 'Your website is currently displaying a "Coming Soon" page.', + 'wp-plugin-bluehost' + ) } - } + ) } - {isError && + { isError && ( - {__('Oops! Something went wrong. Please try again.', 'wp-plugin-bluehost')} + { __( + 'Oops! Something went wrong. Please try again.', + 'wp-plugin-bluehost' + ) } - } + ) }
    ); -} +}; -export default ComingSoon; \ No newline at end of file +export default ComingSoon; diff --git a/src/app/pages/settings/commentSettings.js b/src/app/pages/settings/commentSettings.js index 27f6475f4..fdd66e3a5 100644 --- a/src/app/pages/settings/commentSettings.js +++ b/src/app/pages/settings/commentSettings.js @@ -1,137 +1,150 @@ +import { useState } from '@wordpress/element'; +import { useUpdateEffect } from 'react-use'; +import { Alert, SelectField, ToggleField } from '@newfold/ui-component-library'; import AppStore from '../../data/store'; import { bluehostSettingsApiFetch } from '../../util/helpers'; -import { useUpdateEffect } from 'react-use'; -import { useState } from '@wordpress/element'; -import { Alert, SelectField, ToggleField } from "@newfold/ui-component-library"; -import { SectionSettings } from "../../components/section"; -import { useNotification } from '../../components/notifications/feed'; +import { SectionSettings } from 'App/components/section'; +import { useNotification } from 'App/components/notifications'; -const OldPostsComments = ({ setError, notify }) => { - const { store, setStore } = useContext(AppStore); - const [disableCommentsOldPosts, setDisableCommentsOldPosts] = useState( +const OldPostsComments = ( { setError, notify } ) => { + const { store, setStore } = useContext( AppStore ); + const [ disableCommentsOldPosts, setDisableCommentsOldPosts ] = useState( store.disableCommentsOldPosts ); const disableCommentsNoticeTitle = () => { return disableCommentsOldPosts - ? __('Disabled old post comments', 'wp-plugin-bluehost') - : __('Enabled old post comments', 'wp-plugin-bluehost'); + ? __( 'Disabled old post comments', 'wp-plugin-bluehost' ) + : __( 'Enabled old post comments', 'wp-plugin-bluehost' ); }; const disableCommentsNoticeText = () => { return disableCommentsOldPosts - ? __('Comments on old posts are disabled.', 'wp-plugin-bluehost') - : __('Comments are allowed on old posts.', 'wp-plugin-bluehost'); + ? __( 'Comments on old posts are disabled.', 'wp-plugin-bluehost' ) + : __( 'Comments are allowed on old posts.', 'wp-plugin-bluehost' ); }; const toggleDisableCommentsOldPosts = () => { - bluehostSettingsApiFetch({ disableCommentsOldPosts: !disableCommentsOldPosts }, setError, (response) => { - setDisableCommentsOldPosts(!disableCommentsOldPosts); - }); + bluehostSettingsApiFetch( + { disableCommentsOldPosts: ! disableCommentsOldPosts }, + setError, + // eslint-disable-next-line no-unused-vars + ( response ) => { + setDisableCommentsOldPosts( ! disableCommentsOldPosts ); + } + ); }; const notifySuccess = () => { - notify.push("disable-old-posts-comments-notice", { + notify.push( 'disable-old-posts-comments-notice', { title: disableCommentsNoticeTitle(), - description: ( - - {disableCommentsNoticeText()} - - ), - variant: "success", + description: { disableCommentsNoticeText() }, + variant: 'success', autoDismiss: 5000, - }); + } ); }; - useUpdateEffect(() => { - setStore({ + useUpdateEffect( () => { + setStore( { ...store, disableCommentsOldPosts, - }); + } ); notifySuccess(); - }, [disableCommentsOldPosts]); + }, [ disableCommentsOldPosts ] ); return ( ); -} +}; -const CloseCommentsDays = ({ setError, notify }) => { - const { store, setStore } = useContext(AppStore); - const [closeCommentsDays, setNumCloseCommentsDays] = useState( +const CloseCommentsDays = ( { setError, notify } ) => { + const { store, setStore } = useContext( AppStore ); + const [ closeCommentsDays, setNumCloseCommentsDays ] = useState( store.closeCommentsDays ); const closeCommentsDaysNoticeTitle = () => { - return ( - __('Comments setting saved ', 'wp-plugin-bluehost') - ); + return __( 'Comments setting saved ', 'wp-plugin-bluehost' ); }; const closeCommentsDaysNoticeText = () => { //`Comments on posts are disabled after ${closeCommentsDays} days.` return ( - __('Comments on posts are disabled after ', 'wp-plugin-bluehost') + + __( + 'Comments on posts are disabled after ', + 'wp-plugin-bluehost' + ) + closeCommentsDays + - _n(' day.', ' days.', parseInt(closeCommentsDays), 'wp-plugin-bluehost') + _n( + ' day.', + ' days.', + parseInt( closeCommentsDays ), + 'wp-plugin-bluehost' + ) ); }; const closeCommentsDaysLabelText = () => { //`Close comments after ${closeCommentsDays} days.` return ( - __('Close comments after ', 'wp-plugin-bluehost') + + __( 'Close comments after ', 'wp-plugin-bluehost' ) + closeCommentsDays + - _n(' day.', ' days.', parseInt(closeCommentsDays), 'wp-plugin-bluehost') + _n( + ' day.', + ' days.', + parseInt( closeCommentsDays ), + 'wp-plugin-bluehost' + ) ); }; - const handleCloseCommentsDaysChange = (value) => { - bluehostSettingsApiFetch({ closeCommentsDays: value }, setError, (response) => { - setNumCloseCommentsDays(value); - }); + const handleCloseCommentsDaysChange = ( value ) => { + bluehostSettingsApiFetch( + { closeCommentsDays: value }, + setError, + // eslint-disable-next-line no-unused-vars + ( response ) => { + setNumCloseCommentsDays( value ); + } + ); }; const notifySuccess = () => { - notify.push("close-comments-days-notice", { + notify.push( 'close-comments-days-notice', { title: closeCommentsDaysNoticeTitle(), - description: ( - - {closeCommentsDaysNoticeText()} - - ), - variant: "success", + description: { closeCommentsDaysNoticeText() }, + variant: 'success', autoDismiss: 5000, - }); + } ); }; - useUpdateEffect(() => { - setStore({ + useUpdateEffect( () => { + setStore( { ...store, closeCommentsDays, - }); + } ); notifySuccess(); - }, [closeCommentsDays]); + }, [ closeCommentsDays ] ); return ( { { label: '30', value: '30' }, { label: '50', value: '50' }, { label: '100', value: '100' }, - ]} - onChange={handleCloseCommentsDaysChange} + ] } + onChange={ handleCloseCommentsDaysChange } className="nfd-select-field__spaced" /> ); -} +}; -const CommentsPerPage = ({ setError, notify }) => { - const { store, setStore } = useContext(AppStore); - const [commentsPerPage, setNumCommentsPerPage] = useState( +const CommentsPerPage = ( { setError, notify } ) => { + const { store, setStore } = useContext( AppStore ); + const [ commentsPerPage, setNumCommentsPerPage ] = useState( store.commentsPerPage ); const commentsPerPageNoticeTitle = () => { - return __('Comments setting saved.', 'wp-plugin-bluehost'); + return __( 'Comments setting saved.', 'wp-plugin-bluehost' ); }; const commentsPerPageNoticeText = () => { //`Posts will display ${commentsPerPage} comments at a time.` return ( - __('Posts will display ', 'wp-plugin-bluehost') + + __( 'Posts will display ', 'wp-plugin-bluehost' ) + commentsPerPage + _n( ' comment at a time.', ' comments at a time.', - parseInt(commentsPerPage), + parseInt( commentsPerPage ), 'wp-plugin-bluehost' ) ); }; - const handleCommentsPerPageChange = (value) => { - bluehostSettingsApiFetch({ commentsPerPage: value }, setError, (response) => { - setNumCommentsPerPage(value); - }); + const handleCommentsPerPageChange = ( value ) => { + bluehostSettingsApiFetch( + { commentsPerPage: value }, + setError, + // eslint-disable-next-line no-unused-vars + ( response ) => { + setNumCommentsPerPage( value ); + } + ); }; const notifySuccess = () => { - notify.push("comments-per-page-notice", { + notify.push( 'comments-per-page-notice', { title: commentsPerPageNoticeTitle(), - description: ( - - {commentsPerPageNoticeText()} - - ), - variant: "success", + description: { commentsPerPageNoticeText() }, + variant: 'success', autoDismiss: 5000, - }); + } ); }; - useUpdateEffect(() => { - setStore({ + useUpdateEffect( () => { + setStore( { ...store, commentsPerPage, - }); + } ); notifySuccess(); - }, [commentsPerPage]); + }, [ commentsPerPage ] ); return ( ); -} +}; const CommentSettings = () => { - const [isError, setError] = useState(false); + const [ isError, setError ] = useState( false ); - let notify = useNotification(); + const notify = useNotification(); return (
    - - - - {isError && + + + + { isError && ( - {__('Oops! Something went wrong. Please try again.', 'wp-plugin-bluehost')} + { __( + 'Oops! Something went wrong. Please try again.', + 'wp-plugin-bluehost' + ) } - } + ) }
    -     + ); }; diff --git a/src/app/pages/settings/contentSettings.js b/src/app/pages/settings/contentSettings.js index 067ea6c8e..7beb8548a 100644 --- a/src/app/pages/settings/contentSettings.js +++ b/src/app/pages/settings/contentSettings.js @@ -1,181 +1,217 @@ -import AppStore from '../../data/store'; -import { bluehostSettingsApiFetch } from '../../util/helpers'; -import { useUpdateEffect } from 'react-use'; import { useState } from '@wordpress/element'; -import { Alert, SelectField } from "@newfold/ui-component-library"; -import { SectionSettings } from "../../components/section"; -import { useNotification } from '../../components/notifications/feed'; - -const ContentRevisions = ({ setError, notify }) => { - const { store, setStore } = useContext(AppStore); +import { useUpdateEffect } from 'react-use'; +import { Alert, SelectField } from '@newfold/ui-component-library'; +import AppStore from 'App/data/store'; +import { bluehostSettingsApiFetch } from 'App/util/helpers'; +import { SectionSettings } from 'App/components/section'; +import { useNotification } from 'App/components/notifications'; + +const ContentRevisions = ( { setError, notify } ) => { + const { store, setStore } = useContext( AppStore ); const [ contentRevisions, setNumContentRevisions ] = useState( store.contentRevisions ); const contentRevisionsNoticeTitle = () => { - return ( - __('Post revision setting saved ', 'wp-plugin-bluehost') - ); + return __( 'Post revision setting saved ', 'wp-plugin-bluehost' ); }; const contentRevisionsNoticeText = () => { return ( - __('Posts will save ', 'wp-plugin-bluehost') + + __( 'Posts will save ', 'wp-plugin-bluehost' ) + contentRevisions + - _n(' revision.', ' revisions.', parseInt(contentRevisions), 'wp-plugin-bluehost') + _n( + ' revision.', + ' revisions.', + parseInt( contentRevisions ), + 'wp-plugin-bluehost' + ) ); }; const contentRevisionsDescriptionText = () => { return ( - __('Saving drafts and updating published content creates revisions. Make changes with confidence, knowing you can take ', 'wp-plugin-bluehost') + + __( + 'Saving drafts and updating published content creates revisions. Make changes with confidence, knowing you can take ', + 'wp-plugin-bluehost' + ) + contentRevisions + - _n(' step back.', ' steps back.', parseInt(contentRevisions), 'wp-plugin-bluehost') + _n( + ' step back.', + ' steps back.', + parseInt( contentRevisions ), + 'wp-plugin-bluehost' + ) ); }; - const handleContentRevisionsChange = (value) => { - bluehostSettingsApiFetch({ contentRevisions: value }, setError, (response) => { - setNumContentRevisions(value); - }); + const handleContentRevisionsChange = ( value ) => { + bluehostSettingsApiFetch( + { contentRevisions: value }, + setError, + // eslint-disable-next-line no-unused-vars + ( response ) => { + setNumContentRevisions( value ); + } + ); }; const notifySuccess = () => { - notify.push("content-revision-notice", { + notify.push( 'content-revision-notice', { title: contentRevisionsNoticeTitle(), - description: ( - - {contentRevisionsNoticeText()} - - ), - variant: "success", + description: { contentRevisionsNoticeText() }, + variant: 'success', autoDismiss: 5000, - }); + } ); }; - useUpdateEffect(() => { - setStore({ + useUpdateEffect( () => { + setStore( { ...store, contentRevisions, - }); + } ); notifySuccess(); - }, [contentRevisions]); + }, [ contentRevisions ] ); return ( ); -} +}; -const EmptyTrash = ({ setError, notify }) => { - const { store, setStore } = useContext(AppStore); +const EmptyTrash = ( { setError, notify } ) => { + const { store, setStore } = useContext( AppStore ); const [ emptyTrashDays, setNumEmptyTrashDays ] = useState( store.emptyTrashDays ); let numTrashWeeks = Math.floor( emptyTrashDays / 7 ); const emptyTrashNoticeTitle = () => { - return ( - __('Trash setting saved ', 'wp-plugin-bluehost') - ); + return __( 'Trash setting saved ', 'wp-plugin-bluehost' ); }; const emptyTrashNoticeText = () => { return ( - __('The trash will automatically empty every ', 'wp-plugin-bluehost') + + __( + 'The trash will automatically empty every ', + 'wp-plugin-bluehost' + ) + numTrashWeeks + - _n( ' week.', ' weeks.', parseInt(numTrashWeeks), 'wp-plugin-bluehost' ) + _n( + ' week.', + ' weeks.', + parseInt( numTrashWeeks ), + 'wp-plugin-bluehost' + ) ); }; - const handleEmptyTrashDaysChange = (value) => { - bluehostSettingsApiFetch({ emptyTrashDays: value }, setError, (response) => { - setNumEmptyTrashDays(value); - }); + const handleEmptyTrashDaysChange = ( value ) => { + bluehostSettingsApiFetch( + { emptyTrashDays: value }, + setError, + // eslint-disable-next-line no-unused-vars + ( response ) => { + setNumEmptyTrashDays( value ); + } + ); }; const notifySuccess = () => { - notify.push("empty-trash-notice", { + notify.push( 'empty-trash-notice', { title: emptyTrashNoticeTitle(), - description: ( - - {emptyTrashNoticeText()} - - ), - variant: "success", + description: { emptyTrashNoticeText() }, + variant: 'success', autoDismiss: 5000, - }); + } ); }; - useUpdateEffect(() => { - setStore({ + useUpdateEffect( () => { + setStore( { ...store, emptyTrashDays, - }); + } ); numTrashWeeks = Math.floor( emptyTrashDays / 7 ); notifySuccess(); - }, [emptyTrashDays]); + }, [ emptyTrashDays ] ); return ( ); -} +}; const ContentSettings = () => { - const [isError, setError] = useState(false); + const [ isError, setError ] = useState( false ); - let notify = useNotification(); + const notify = useNotification(); return (
    - - - - {isError && + + + + { isError && ( - {__('Oops! Something went wrong. Please try again.', 'wp-plugin-bluehost')} + { __( + 'Oops! Something went wrong. Please try again.', + 'wp-plugin-bluehost' + ) } - } + ) }
    -     + ); -} +}; export default ContentSettings; diff --git a/src/app/pages/settings/index.js b/src/app/pages/settings/index.js index 0d35ba176..2316d1e86 100644 --- a/src/app/pages/settings/index.js +++ b/src/app/pages/settings/index.js @@ -2,36 +2,52 @@ import AutomaticUpdates from './automaticUpdates'; import ComingSoon from './comingSoon'; import CommentSettings from './commentSettings'; import ContentSettings from './contentSettings'; -import { Page } from '../../components/page'; -import { SectionContainer, SectionHeader, SectionContent } from '../../components/section'; +import { Page } from 'App/components/page'; +import { + SectionContainer, + SectionHeader, + SectionContent, +} from 'App/components/section'; const Settings = () => { return ( - - - + + + - - - + + + - - - + + + - - - + + + - - - - - + + + + ); }; diff --git a/src/app/pages/staging/index.js b/src/app/pages/staging/index.js index c6106311a..94d5dcf7d 100644 --- a/src/app/pages/staging/index.js +++ b/src/app/pages/staging/index.js @@ -1,51 +1,52 @@ import './stylesheet.scss'; - import { useState, useEffect } from '@wordpress/element'; import apiFetch from '@wordpress/api-fetch'; import classnames from 'classnames'; -import { NewfoldRuntime } from "@newfold-labs/wp-module-runtime"; -import { Page } from '../../components/page'; -import { SectionContainer, SectionHeader, SectionContent, SectionSettings } from '../../components/section'; -import { useNotification } from '../../components/notifications/feed'; +import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime'; +import { Page } from 'App/components/page'; +import { + SectionContainer, + SectionHeader, + SectionContent, + SectionSettings, +} from 'App/components/section'; +import { useNotification } from 'App/components/notifications'; // component sourced from staging module import { default as NewfoldStaging } from '../../../../vendor/newfold-labs/wp-module-staging/components/staging/'; const Staging = () => { - - // constants to pass to module - const moduleConstants = { - 'text': { - 'title': __('Staging', 'bluehost-wordpress-plugin'), - } + // constants to pass to module + const moduleConstants = { + text: { + title: __( 'Staging', 'bluehost-wordpress-plugin' ), + }, }; - // methods to pass to module - const moduleMethods = { - apiFetch, - classnames, - useState, - useEffect, - NewfoldRuntime, - useNotification, - }; + // methods to pass to module + const moduleMethods = { + apiFetch, + classnames, + useState, + useEffect, + NewfoldRuntime, + useNotification, + }; const moduleComponents = { Page, - SectionHeader, + SectionHeader, SectionContent, - SectionSettings, - SectionContainer, - } - - return ( - - + SectionSettings, + SectionContainer, + }; - ); -} + return ( + + ); +}; -export default Staging; \ No newline at end of file +export default Staging; diff --git a/src/app/util/helpers.js b/src/app/util/helpers.js index 6e907e6a9..566ffebee 100644 --- a/src/app/util/helpers.js +++ b/src/app/util/helpers.js @@ -4,63 +4,11 @@ import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; let lastNoticeId; -const W_NAV = document.querySelector( '#toplevel_page_bluehost .wp-submenu' ); -/** - * Set active nav in wp admin sub pages. - * - * @param path - */ -export const setActiveSubnav = ( path ) => { - if ( W_NAV ) { - const W_NAV_LIS = W_NAV.children; - if ( W_NAV_LIS ) { - for ( let i = 0; i < W_NAV_LIS.length; i++ ) { - // get all children li elements - const link = W_NAV_LIS[ i ].children[ 0 ]; - if ( link ) { - const href = link.getAttribute( 'href' ); - // check each child a href for match with path - if ( - href.endsWith( path ) || // match - ( path.includes( '/marketplace/' ) && - href.endsWith( 'marketplace' ) ) || - ( path === '/' && href.endsWith( 'home' ) ) - ) { - // highlight home subnav for root page - // update li class when match - W_NAV_LIS[ i ].classList.add( 'current' ); - } else { - W_NAV_LIS[ i ].classList.remove( 'current' ); - } - // highlight our home nav for root level access - const W_HOME_NAV = document.querySelector( - '.wppbh-nav a[href="#/home"]' - ); - if ( W_HOME_NAV ) { - if ( path === '/' || path === '/home' ) { - W_HOME_NAV.classList.add( 'active' ); - } else { - W_HOME_NAV.classList.remove( 'active' ); - } - } - // handle help - if ( path === '/help' ) { - if ( NewfoldRuntime.hasCapability( 'canAccessHelpCenter' ) && !window.newfoldEmbeddedHelp.isDefaultOpen ) { - window.newfoldEmbeddedHelp.toggleNFDLaunchedEmbeddedHelp(); - window.newfoldEmbeddedHelp.isDefaultOpen = true; // since this fires multiple times on load - } - } - } - } - } - } -}; /** * Wrapper method to dispatch snackbar notice * - * @param string text text for notice - * @param text + * @param {string} text text for notice */ export const dispatchUpdateSnackbar = ( text = 'Settings Saved' ) => { //clear previous notice so they don't stack up when quickly saving multiple settings @@ -81,10 +29,9 @@ export const dispatchUpdateSnackbar = ( text = 'Settings Saved' ) => { /** * Wrapper method to post setting to bluehost endpoint * - * @param {*} data object of data - * @param passError setter for the error in component - * @param thenCallback method to call in promise then - * @return apiFetch promise + * @param {Object} data object of data + * @param {Function} passError setter for the error in component + * @param {Function} thenCallback method to call in promise then */ export const bluehostSettingsApiFetch = ( data, passError, thenCallback ) => { return apiFetch( { @@ -104,10 +51,9 @@ export const bluehostSettingsApiFetch = ( data, passError, thenCallback ) => { /** * Wrapper method to post request to bluehost cache endpoint * - * @param {*} data object of data - * @param passError setter for the error in component - * @param thenCallback method to call in promise then - * @return apiFetch promise + * @param {Object} data object of data + * @param {Function} passError setter for the error in component + * @param {Function} thenCallback method to call in promise then */ export const bluehostPurgeCacheApiFetch = ( data, passError, thenCallback ) => { return apiFetch( { @@ -125,6 +71,7 @@ export const bluehostPurgeCacheApiFetch = ( data, passError, thenCallback ) => { /** * Coming soon admin bar + * @param {boolean} comingSoon Whether or not the site is coming soon. */ export const comingSoonAdminbarToggle = ( comingSoon ) => { const comingsoonadminbar = document.getElementById( @@ -134,11 +81,11 @@ export const comingSoonAdminbarToggle = ( comingSoon ) => { return; } if ( ! comingSoon ) { - comingsoonadminbar.style.color = "#048200"; - comingsoonadminbar.textContent = "Live"; + comingsoonadminbar.style.color = '#048200'; + comingsoonadminbar.textContent = 'Live'; } else { - comingsoonadminbar.style.color = "#E01C1C"; - comingsoonadminbar.textContent = "Coming Soon"; + comingsoonadminbar.style.color = '#E01C1C'; + comingsoonadminbar.textContent = 'Coming Soon'; } }; @@ -149,92 +96,94 @@ export const comingSoonAdminbarToggle = ( comingSoon ) => { * 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 {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=bluehost${window.location.hash}`; +export const addUtmParams = ( url, params = {} ) => { + params.utm_source = `wp-admin/admin.php?page=bluehost${ window.location.hash }`; params.utm_medium = 'bluehost_plugin'; - return addQueryArgs(url, params); -} + return addQueryArgs( url, params ); +}; /** * Get's Base Platform URL * @param {string} path The path to a resource within the platform, leave blank for root. - * - * @return {string} + * + * @return {string} The base URL for the platform. */ export const getPlatformBaseUrl = ( path = '' ) => { const brand = NewfoldRuntime.plugin.brand; const baseUrl = () => { - if (brand === 'Bluehost_India') { + if ( brand === 'Bluehost_India' ) { return 'https://my.bluehost.in'; } - if (isJarvis()) { + if ( isJarvis() ) { return 'https://www.bluehost.com'; } return 'https://my.bluehost.com'; - } + }; return baseUrl() + path; }; /** * Gets Platform URL - * + * * @param {string} jarvisPath The path to the hosting resource for Jarvis accounts, leave blank for the main page. * @param {string} legacyPath The path to the hosting resource for Legacy accounts, leave blank for the main page. - * - * @return {string} - * + * + * @return {string} The URL for the platform. + * * @example * getPlatformPathUrl('home', 'app#home') * // returns https://www.bluehost.com/my-account/home if Jarvis or https://my.bluehost.com/hosting/app#home if legacy */ export const getPlatformPathUrl = ( jarvisPath = '', legacyPath = '' ) => { - - if (isJarvis()) { - return getPlatformBaseUrl('/my-account/') + jarvisPath; + if ( isJarvis() ) { + return getPlatformBaseUrl( '/my-account/' ) + jarvisPath; } - return getPlatformBaseUrl('/hosting/') + legacyPath; + return getPlatformBaseUrl( '/hosting/' ) + legacyPath; }; /** * Handles help center links click, will open help center slide if user has access * or navigate to help page if user doesn't have access - * - * @return void */ export const handleHelpLinksClick = () => { - if (NewfoldRuntime.hasCapability( 'canAccessHelpCenter' ) && window.newfoldEmbeddedHelp && !window.newfoldEmbeddedHelp.hasListeners) { - const helpLinks = document.querySelectorAll('[href*="#/help"]'); - if (helpLinks) { - helpLinks.forEach(el => el.addEventListener('click', (e) => { - e.preventDefault(); - window.newfoldEmbeddedHelp.toggleNFDLaunchedEmbeddedHelp(); - })); + if ( + NewfoldRuntime.hasCapability( 'canAccessHelpCenter' ) && + window.newfoldEmbeddedHelp && + ! window.newfoldEmbeddedHelp.hasListeners + ) { + const helpLinks = document.querySelectorAll( '[href*="#/help"]' ); + if ( helpLinks ) { + helpLinks.forEach( ( el ) => + el.addEventListener( 'click', ( e ) => { + e.preventDefault(); + window.newfoldEmbeddedHelp.toggleNFDLaunchedEmbeddedHelp(); + } ) + ); window.newfoldEmbeddedHelp.hasListeners = true; } } -}; +}; /** - * Check if this is a jarvis site or not. - * Defaults to true in cases where the capabilites are not set such as + * Check if this is a jarvis site or not. + * Defaults to true in cases where the capabilites are not set such as * in local and test environments that do not receive capabilities. - * - * @return boolean + * + * @return {boolean} Whether or not this is a jarvis site. */ export const isJarvis = () => { if ( NewfoldRuntime.hasCapability( 'isJarvis' ) ) { return window.NewfoldRuntime.capabilities.isJarvis; - } else { - return true; } -}; \ No newline at end of file + return true; +}; diff --git a/src/index.js b/src/index.js index 47dda59f5..728ede72c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,13 @@ /* Use PHP-provided URL to current version's build directory instead of root */ import './webpack-public-path'; -import App from './app'; import domReady from '@wordpress/dom-ready'; -import {createRoot, render} from '@wordpress/element'; +import { createRoot, render } from '@wordpress/element'; +import App from './app'; const WP_ADM_PAGE_ROOT_ELEMENT = 'wppbh-app'; const W_ASCI = ` - Welcome to Bluehost! + Welcome to Bluehost! @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@(((((((((@@((((((((((@@(((((((((@@@ @@@(((((((((@@((((((((((@@(((((((((@@@ @@ -25,18 +25,19 @@ const W_ASCI = ` @@@(((((((((@@((((((((((@@(((((((((@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ `; -console.log(W_ASCI); +// eslint-disable-next-line no-console +console.log( W_ASCI ); const WPPBHRender = () => { - const DOM_ELEMENT = document.getElementById(WP_ADM_PAGE_ROOT_ELEMENT); - if (null !== DOM_ELEMENT) { - if ('undefined' !== typeof createRoot) { - // WP 6.2+ only - createRoot(DOM_ELEMENT).render(); - } else if ('undefined' !== typeof render) { - render(, DOM_ELEMENT); - } - } + const DOM_ELEMENT = document.getElementById( WP_ADM_PAGE_ROOT_ELEMENT ); + if ( null !== DOM_ELEMENT ) { + if ( 'undefined' !== typeof createRoot ) { + // WP 6.2+ only + createRoot( DOM_ELEMENT ).render( ); + } else if ( 'undefined' !== typeof render ) { + render( , DOM_ELEMENT ); + } + } }; -domReady(WPPBHRender); +domReady( WPPBHRender ); diff --git a/src/webpack-public-path.js b/src/webpack-public-path.js index 122ff2e66..a6298b178 100644 --- a/src/webpack-public-path.js +++ b/src/webpack-public-path.js @@ -3,7 +3,11 @@ * so that lazy-loading works correctly. This value is set in /includes/Data.php in runtime(). */ export default () => { - if ( 'undefined' !== typeof window.NewfoldRuntime && 'plugin' in window.NewfoldRuntime ) { + if ( + 'undefined' !== typeof window.NewfoldRuntime && + 'plugin' in window.NewfoldRuntime + ) { + // eslint-disable-next-line camelcase, no-undef __webpack_public_path__ = window.NewfoldRuntime.plugin.url; } }; diff --git a/tailwind.config.js b/tailwind.config.js index 18ca2dc39..e48d1958b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,39 +1,39 @@ -import { TAILWINDCSS_PRESET } from "@newfold/ui-component-library"; +import { TAILWINDCSS_PRESET } from '@newfold/ui-component-library'; module.exports = { - presets: [ TAILWINDCSS_PRESET ], - content: [ - // Include all JS files inside the UI library in your content. - ...TAILWINDCSS_PRESET.content, - "./src/**/*.js", // all source files - "./node_modules/@newfold-labs/wp-module-*/build/index.js", // all npm sourced module builds - "./vendor/newfold-labs/wp-module-*/components/**/*.js", // all composer sourced module components - ], - theme: { - extend: { - colors: { - primary: { - DEFAULT: "#196BDE", - dark: "#1A4884", - light: "#CCDCF4", - lighter: "#949FB1", - }, - secondary: { - DEFAULT: "#FCD34D", - dark: "#E9B404", - light: "#FEF6D9", - lighter: "#FEF6D9", - }, - title: "#0F172A", - body: "#4A5567", - link: "#2271B1", - line: "#E2E8F0", - white: "#FFFFFF", - offWhite: "#F0F0F5", - black: "#000000", - canvas: "#F1F5F9", - }, - }, - }, - plugins: [], + presets: [ TAILWINDCSS_PRESET ], + content: [ + // Include all JS files inside the UI library in your content. + ...TAILWINDCSS_PRESET.content, + './src/**/*.js', // all source files + './node_modules/@newfold-labs/wp-module-*/build/index.js', // all npm sourced module builds + './vendor/newfold-labs/wp-module-*/components/**/*.js', // all composer sourced module components + ], + theme: { + extend: { + colors: { + primary: { + DEFAULT: '#196BDE', + dark: '#1A4884', + light: '#CCDCF4', + lighter: '#949FB1', + }, + secondary: { + DEFAULT: '#FCD34D', + dark: '#E9B404', + light: '#FEF6D9', + lighter: '#FEF6D9', + }, + title: '#0F172A', + body: '#4A5567', + link: '#2271B1', + line: '#E2E8F0', + white: '#FFFFFF', + offWhite: '#F0F0F5', + black: '#000000', + canvas: '#F1F5F9', + }, + }, + }, + plugins: [], }; diff --git a/webpack.config.js b/webpack.config.js index c48777fd0..c3313b229 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,35 +1,36 @@ -const path = require('path'); -const { merge } = require('webpack-merge'); -const wpScriptsConfig = require('@wordpress/scripts/config/webpack.config'); -const version = require('./package.json').version; -const { ProvidePlugin } = require('webpack'); +const path = require( 'path' ); +const { merge } = require( 'webpack-merge' ); +const wpScriptsConfig = require( '@wordpress/scripts/config/webpack.config' ); +const version = require( './package.json' ).version; +const { ProvidePlugin } = require( 'webpack' ); /** * Aliases for resolving Brand imports */ const alias = { - App: path.resolve(__dirname, '/src/app/'), - Store: path.resolve(__dirname, '/src/app/data/store.js'), - Routes: path.resolve(__dirname, '/src/app/data/routes.js'), + App: path.resolve( __dirname, '/src/app/' ), + Assets: path.resolve( __dirname, '/assets/' ), + Store: path.resolve( __dirname, '/src/app/data/store.js' ), + Routes: path.resolve( __dirname, '/src/app/data/routes.js' ), }; /** * Make most-common imports available globally to ease import debt. * (Instead of import { useEffect } from '@wordpress/element' in every file) */ const mostCommonImports = { - Fragment: ['@wordpress/element', 'Fragment'], - useState: ['@wordpress/element', 'useState'], - useEffect: ['@wordpress/element', 'useEffect'], - useContext: ['@wordpress/element', 'useContext'], - useLocation: ['react-router-dom', 'useLocation'], - useNavigate: ['react-router-dom', 'useNavigate'], - _filter: ['lodash', 'filter'], - _map: ['lodash', 'map'], - _isEmpty: ['lodash', 'isEmpty'], - _camelCase: ['lodash', 'camelCase'], - __: ['@wordpress/i18n', '__'], - _n: ['@wordpress/i18n', '_n'], - sprintf: ['@wordpress/i18n', 'sprintf'], - classNames: ['classnames'], + Fragment: [ '@wordpress/element', 'Fragment' ], + useState: [ '@wordpress/element', 'useState' ], + useEffect: [ '@wordpress/element', 'useEffect' ], + useContext: [ '@wordpress/element', 'useContext' ], + useLocation: [ 'react-router-dom', 'useLocation' ], + useNavigate: [ 'react-router-dom', 'useNavigate' ], + _filter: [ 'lodash', 'filter' ], + _map: [ 'lodash', 'map' ], + _isEmpty: [ 'lodash', 'isEmpty' ], + _camelCase: [ 'lodash', 'camelCase' ], + __: [ '@wordpress/i18n', '__' ], + _n: [ '@wordpress/i18n', '_n' ], + sprintf: [ '@wordpress/i18n', 'sprintf' ], + classNames: [ 'classnames' ], }; /** * Extend @wordpress/scripts default webpack config with: @@ -38,12 +39,12 @@ const mostCommonImports = { * - Use webpack's ProvidePlugin to ease repetitive imports. */ const webConfig = { - mode: 'production', - output: { - // versioned output directory i.e. /build/1.0.0, /build/1.1.0, etc. - path: path.resolve(process.cwd(), 'build/' + version), - }, - resolve: { alias }, - plugins: [new ProvidePlugin(mostCommonImports)], + mode: 'production', + output: { + // versioned output directory i.e. /build/1.0.0, /build/1.1.0, etc. + path: path.resolve( process.cwd(), 'build/' + version ), + }, + resolve: { alias }, + plugins: [ new ProvidePlugin( mostCommonImports ) ], }; -module.exports = merge(wpScriptsConfig, webConfig); \ No newline at end of file +module.exports = merge( wpScriptsConfig, webConfig ); From a44aae1d6df9da46a5aaac02808e2bb583312eae Mon Sep 17 00:00:00 2001 From: wpalani Date: Sat, 25 Nov 2023 22:05:24 -0700 Subject: [PATCH 02/17] Other lint fixes --- src/app/pages/home/accountCard.js | 4 +++- src/app/pages/home/helpCard.js | 9 ++++++--- src/app/pages/home/index.js | 12 ++++++------ src/app/pages/home/welcomeSection.js | 8 ++++++-- 4 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/app/pages/home/accountCard.js b/src/app/pages/home/accountCard.js index 061249211..801a4ace1 100644 --- a/src/app/pages/home/accountCard.js +++ b/src/app/pages/home/accountCard.js @@ -78,7 +78,7 @@ const base = [ }, ]; -export const AccountCard = ( { props } ) => { +const AccountCard = ( { props } ) => { return ( @@ -107,3 +107,5 @@ export const AccountCard = ( { props } ) => { ); }; + +export default AccountCard; diff --git a/src/app/pages/home/helpCard.js b/src/app/pages/home/helpCard.js index c7829c2db..2b48b8c3f 100644 --- a/src/app/pages/home/helpCard.js +++ b/src/app/pages/home/helpCard.js @@ -1,6 +1,7 @@ import { Button, Card, Title } from '@newfold/ui-component-library'; -import SupportIllustration from '../../images/section-home-help-me.svg'; -export function HelpCard() { +import SupportIllustration from 'App/images/section-home-help-me.svg'; + +const HelpCard = ( {} ) => { return ( @@ -28,4 +29,6 @@ export function HelpCard() { ); -} +}; + +export default HelpCard; diff --git a/src/app/pages/home/index.js b/src/app/pages/home/index.js index 6b7efae6c..22232a333 100644 --- a/src/app/pages/home/index.js +++ b/src/app/pages/home/index.js @@ -1,10 +1,10 @@ -import { Page } from '../../components/page'; -import { SectionContainer, SectionContent } from '../../components/section'; -import WebinarsBanner from 'App/components/webinars-banner'; -import { AccountCard } from './accountCard'; -import { HelpCard } from './helpCard'; import './stylesheet.scss'; -import { WelcomeSection } from './welcomeSection'; +import { Page } from 'App/components/page'; +import { SectionContainer, SectionContent } from 'App/components/section'; +import WebinarsBanner from 'App/components/webinars-banner'; +import AccountCard from './accountCard'; +import HelpCard from './helpCard'; +import WelcomeSection from './welcomeSection'; const Home = () => { return ( diff --git a/src/app/pages/home/welcomeSection.js b/src/app/pages/home/welcomeSection.js index d5540304c..ad0e1ef74 100644 --- a/src/app/pages/home/welcomeSection.js +++ b/src/app/pages/home/welcomeSection.js @@ -4,9 +4,10 @@ import AppStore from 'App/data/store'; import { bluehostSettingsApiFetch } from 'App/util/helpers'; import { useNotification } from 'App/components/notifications'; -export function WelcomeSection() { +const WelcomeSection = ( {} ) => { const { store, setStore } = useContext( AppStore ); const notify = useNotification(); + const toggleComingSoon = () => bluehostSettingsApiFetch( { comingSoon: ! store.comingSoon }, @@ -14,6 +15,7 @@ export function WelcomeSection() { console.error, () => setStore( { ...store, comingSoon: ! store.comingSoon } ) ); + return ( ); -} +}; + +export default WelcomeSection; From 13575d4ba18489c0bf06d85c03e2dc18fc71823d Mon Sep 17 00:00:00 2001 From: wpalani Date: Sat, 25 Nov 2023 22:15:31 -0700 Subject: [PATCH 03/17] Fix webinar banner component lint issue --- src/app/components/webinars-banner/index.js | 31 ++++++++++----------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/src/app/components/webinars-banner/index.js b/src/app/components/webinars-banner/index.js index e5a68ced3..0a42a4b3e 100644 --- a/src/app/components/webinars-banner/index.js +++ b/src/app/components/webinars-banner/index.js @@ -22,7 +22,7 @@ import { SectionContainer, SectionContent } from 'App/components/section'; */ const WebinarsBanner = () => { const [ webinars, setWebinars ] = useState( [] ); - const [ nextWebinar, setNextWebinar ] = useState( null ); + const [ upcomingWebinar, setUpcomingWebinar ] = useState( null ); useEffect( () => { fetchWebinars(); @@ -52,7 +52,7 @@ const WebinarsBanner = () => { }; useEffect( () => { - setNextWebinar( getNextWebinar() ); + setUpcomingWebinar( getNextWebinar() ); // eslint-disable-next-line react-hooks/exhaustive-deps }, [ webinars ] ); @@ -69,7 +69,6 @@ const WebinarsBanner = () => { ( a, b ) => new Date( a.date ) - new Date( b.date ) ); - // eslint-disable-next-line no-shadow const nextWebinar = futureWebinars[ 0 ]; if ( nextWebinar.hasOwnProperty( 'title' ) && @@ -102,7 +101,7 @@ const WebinarsBanner = () => { ); }; - if ( ! nextWebinar ) { + if ( ! upcomingWebinar ) { return null; } @@ -116,24 +115,24 @@ const WebinarsBanner = () => {
    - FREE Monthly Webinar: { nextWebinar.title } + FREE Monthly Webinar: { upcomingWebinar.title } - { ( nextWebinar.hasDescription || - nextWebinar.hasTopics ) && ( + { ( upcomingWebinar.hasDescription || + upcomingWebinar.hasTopics ) && (
    - { nextWebinar.description && ( + { upcomingWebinar.description && (

    - { nextWebinar.description } + { upcomingWebinar.description }

    ) } - { nextWebinar.topics && ( + { upcomingWebinar.topics && ( <> Topics:
      - { nextWebinar.topics.map( + { upcomingWebinar.topics.map( ( topic, index ) => ( {
      - { nextWebinar.date } + { upcomingWebinar.date }
      - { nextWebinar.hasTime && ( + { upcomingWebinar.hasTime && (
      - { nextWebinar.time } + { upcomingWebinar.time }
      ) }
      @@ -165,12 +164,12 @@ const WebinarsBanner = () => {
    From 0d19e1904d4f1e67e165010af3f33e69e2c2aaf0 Mon Sep 17 00:00:00 2001 From: wpalani Date: Mon, 27 Nov 2023 13:29:00 -0700 Subject: [PATCH 04/17] ESLint action --- .github/workflows/eslint.yml | 49 ++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 .github/workflows/eslint.yml diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml new file mode 100644 index 000000000..66a147fd6 --- /dev/null +++ b/.github/workflows/eslint.yml @@ -0,0 +1,49 @@ +name: ESLint + +on: + push: + branches: + - main + - master + - trunk + - develop + - release/* + - feature/* + - add/* + - update/* + - fix/* + - try/*' + paths: + - 'src/**/*.js' + pull_request: + types: [ opened, edited, reopened, ready_for_review ] + paths: + - 'src/**/*.js' + workflow_dispatch: + +concurrency: + group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }} + cancel-in-progress: true + +jobs: + eslint: + runs-on: ubuntu-latest + steps: + + - name: Checkout + uses: actions/checkout@v4 + + - name: Use Node.js 16.x + uses: actions/setup-node@v4 + with: + node-version: 16.x + cache: 'npm' + + - name: Setup Registry + run: printf "\n//npm.pkg.github.com/:_authToken=${{ secrets.NEWFOLD_ACCESS_TOKEN }}" >> .npmrc + + - name: NPM Install + run: npm ci --legacy-peer-deps + + - name: ESLint + run: npm run lint:js From 4325287ddc7d31e257173e82bfc089bdc254954b Mon Sep 17 00:00:00 2001 From: wpalani Date: Mon, 27 Nov 2023 13:50:44 -0700 Subject: [PATCH 05/17] Move handlePageLoad function to react hook --- src/app/index.js | 3 +++ src/app/util/hooks/index.js | 1 + src/app/util/hooks/useHandlePageLoad.js | 18 ++++++++++++++++++ 3 files changed, 22 insertions(+) create mode 100644 src/app/util/hooks/index.js create mode 100644 src/app/util/hooks/useHandlePageLoad.js diff --git a/src/app/index.js b/src/app/index.js index 3d9c3622f..e913f06dc 100644 --- a/src/app/index.js +++ b/src/app/index.js @@ -14,6 +14,7 @@ import { ErrorBoundary } from 'react-error-boundary'; // eslint-disable-next-line import/no-unresolved import { store as noticesStore } from '@wordpress/notices'; import { kebabCase, filter } from 'lodash'; +import { useHandlePageLoad } from './util/hooks'; import { Root } from '@newfold/ui-component-library'; import { AppNav } from './components/app-nav'; import { SiteInfoBar } from './components/site-info'; @@ -50,6 +51,8 @@ const AppBody = ( props ) => { const hashedPath = '#' + location.pathname; const { booted, hasError } = useContext( AppStore ); + useHandlePageLoad(); + return (
    { + const location = useLocation(); + const routeContents = document.querySelector( '.wppbh-app-body-inner' ); + + useEffect( () => { + window.scrollTo( 0, 0 ); + if ( routeContents ) { + routeContents.focus( { preventScroll: true } ); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ location.pathname ] ); + + return true; +}; + +export default useHandlePageLoad; From 82fe8c77fa2011b746ccf2ca4de03450d11580f7 Mon Sep 17 00:00:00 2001 From: wpalani Date: Mon, 27 Nov 2023 17:35:09 -0700 Subject: [PATCH 06/17] Add php dependencies to eslint action --- .github/workflows/eslint.yml | 42 ++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml index 66a147fd6..e3bc4197d 100644 --- a/.github/workflows/eslint.yml +++ b/.github/workflows/eslint.yml @@ -33,12 +33,54 @@ jobs: - name: Checkout uses: actions/checkout@v4 + - name: Setup PHP + uses: shivammathur/setup-php@v2 + with: + php-version: '8.1' + coverage: none + tools: composer, cs2pr + + - name: Setup workflow context + id: workflow + working-directory: ${{ runner.temp }} + env: + REPO: ${{ github.repository }} + run: | + mkdir dist + echo "DIST=${PWD}/dist" >> $GITHUB_OUTPUT + echo "PACKAGE=${REPO##*/}" >> $GITHUB_OUTPUT + - name: Use Node.js 16.x uses: actions/setup-node@v4 with: node-version: 16.x cache: 'npm' + - name: Get Composer cache directory + id: composer-cache + run: echo "dir=$(composer config cache-files-dir)" >> $GITHUB_OUTPUT + + - name: Cache Composer vendor directory + uses: actions/cache@v3 + with: + path: ${{ steps.composer-cache.outputs.dir }} + key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }} + restore-keys: | + ${{ runner.os }}-composer- + + - name: Show versions + run: | + php --version + composer --version + node --version + npm --version + + - name: Validate composer.json and composer.lock + run: composer validate + + - name: Install PHP Dependencies + run: composer install --no-progress --no-dev --optimize-autoloader --prefer-dist + - name: Setup Registry run: printf "\n//npm.pkg.github.com/:_authToken=${{ secrets.NEWFOLD_ACCESS_TOKEN }}" >> .npmrc From 72e7233887d70f6311bf59ac4b5a62fcc84cfd19 Mon Sep 17 00:00:00 2001 From: wpalani Date: Mon, 27 Nov 2023 17:35:30 -0700 Subject: [PATCH 07/17] Remove example page --- src/app/pages/example/index.js | 86 ---------------------------------- 1 file changed, 86 deletions(-) delete mode 100644 src/app/pages/example/index.js diff --git a/src/app/pages/example/index.js b/src/app/pages/example/index.js deleted file mode 100644 index d64495801..000000000 --- a/src/app/pages/example/index.js +++ /dev/null @@ -1,86 +0,0 @@ -import { Button } from '@newfold/ui-component-library'; -import { - SectionContainer, - SectionHeader, - SectionContent, -} from '../../components/section'; -import { RocketLaunchIcon } from '@heroicons/react/24/outline'; -import { Page } from '../../components/page'; - -const Example = () => { - return ( - - - { - // eslint-disable-next-line no-console - console.log( 'Primary Action Clicked' ); - }, - } } - secondaryAction={ { - title: 'Secondary Action', - onClick: () => { - // eslint-disable-next-line no-console - console.log( 'Secondary Action Clicked' ); - }, - } } - /> - - -
    - 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 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 - 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. -

    - -
    -     -     -     - ); -}; - -export default Example; From 254de76d56fd682defa24bbcbd7e5f3e9603e466 Mon Sep 17 00:00:00 2001 From: wpalani Date: Mon, 27 Nov 2023 17:37:55 -0700 Subject: [PATCH 08/17] Update eslint.yml --- .github/workflows/eslint.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml index e3bc4197d..53f170c38 100644 --- a/.github/workflows/eslint.yml +++ b/.github/workflows/eslint.yml @@ -26,7 +26,7 @@ concurrency: cancel-in-progress: true jobs: - eslint: + ESLint: runs-on: ubuntu-latest steps: From cfd6d82fa8a7cba38ba465e2ee653c9cc0cd7d27 Mon Sep 17 00:00:00 2001 From: Brad Parbs Date: Tue, 28 Nov 2023 10:35:10 -0600 Subject: [PATCH 09/17] Update console ascii art --- src/index.js | 46 ++++++++++++++++++++++++++-------------------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/src/index.js b/src/index.js index 728ede72c..df7577997 100644 --- a/src/index.js +++ b/src/index.js @@ -6,27 +6,33 @@ import { createRoot, render } from '@wordpress/element'; import App from './app'; const WP_ADM_PAGE_ROOT_ELEMENT = 'wppbh-app'; -const W_ASCI = ` - Welcome to Bluehost! -@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ -@@@(((((((((@@((((((((((@@(((((((((@@@ -@@@(((((((((@@((((((((((@@(((((((((@@@ -@@@(((((((((@@((((((((((@@(((((((((@@@ -@@@(((((((((@@((((((((((@@(((((((((@@@ -@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ -@@@(((((((((@@((((((((((@@(((((((((@@@ -@@@(((((((((@@((((((((((@@(((((((((@@@ -@@@(((((((((@@((((((((((@@(((((((((@@@ -@@@(((((((((@@((((((((((@@(((((((((@@@ -@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ -@@@(((((((((@@((((((((((@@(((((((((@@@ -@@@(((((((((@@((((((((((@@(((((((((@@@ -@@@(((((((((@@((((((((((@@(((((((((@@@ -@@@(((((((((@@((((((((((@@(((((((((@@@ -@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ -`; + // eslint-disable-next-line no-console -console.log( W_ASCI ); +console.log(` +%cWelcome to Bluehost! + +%c +██████████████████████████████████████ +███ ██ ██ ███ +███ ██ ██ ███ +███ ██ ██ ███ +███ ██ ██ ███ +██████████████████████████████████████ +███ ██ ██ ███ +███ ██ ██ ███ +███ ██ ██ ███ +███ ██ ██ ███ +██████████████████████████████████████ +███ ██ ██ ███ +███ ██ ██ ███ +███ ██ ██ ███ +███ ██ ██ ███ +██████████████████████████████████████ +`, + 'color: #196bde; font-size: 2em; font-weight: 900;', + 'background: #fff; color: #196bde; font-weight: 400;' +); + const WPPBHRender = () => { const DOM_ELEMENT = document.getElementById( WP_ADM_PAGE_ROOT_ELEMENT ); From 944cb60aee106a3d47419bb879316ff0581fad52 Mon Sep 17 00:00:00 2001 From: Brad Parbs Date: Tue, 28 Nov 2023 10:45:10 -0600 Subject: [PATCH 10/17] Fix linting --- src/index.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index df7577997..41eee7b34 100644 --- a/src/index.js +++ b/src/index.js @@ -8,8 +8,7 @@ import App from './app'; const WP_ADM_PAGE_ROOT_ELEMENT = 'wppbh-app'; // eslint-disable-next-line no-console -console.log(` -%cWelcome to Bluehost! +console.log(`%cWelcome to Bluehost! %c ██████████████████████████████████████ @@ -28,10 +27,7 @@ console.log(` ███ ██ ██ ███ ███ ██ ██ ███ ██████████████████████████████████████ -`, - 'color: #196bde; font-size: 2em; font-weight: 900;', - 'background: #fff; color: #196bde; font-weight: 400;' -); +`, 'color: #196bde; font-size: 2em; font-weight: 900;', 'background: #fff; color: #196bde; font-weight: 400;'); const WPPBHRender = () => { From f2189f1882d8bc9b38edf951a32c2bcc2d63133f Mon Sep 17 00:00:00 2001 From: wpalani Date: Tue, 28 Nov 2023 16:16:12 -0700 Subject: [PATCH 11/17] Translate strings --- src/app/components/site-info/index.js | 6 +++--- src/app/pages/home/helpCard.js | 15 +++++++++++---- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/app/components/site-info/index.js b/src/app/components/site-info/index.js index 682f89fa5..99a7639e5 100644 --- a/src/app/components/site-info/index.js +++ b/src/app/components/site-info/index.js @@ -55,7 +55,7 @@ export const SiteInfoBar = () => { className="nfd-bg-[#383F4A] nfd-text-tiny nfd-w-full min-[400px]:nfd-w-auto" > - Bluehost Account + { __( 'Bluehost Account', 'wp-plugin-bluehost' ) }
    diff --git a/src/app/pages/home/helpCard.js b/src/app/pages/home/helpCard.js index 2b48b8c3f..6666620ec 100644 --- a/src/app/pages/home/helpCard.js +++ b/src/app/pages/home/helpCard.js @@ -12,10 +12,17 @@ const HelpCard = ( {} ) => { src={ SupportIllustration } alt="Help Agent Illustration" /> -

    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.', + 'wp-plugin-bluehost' + ) } +

    +

    + { __( + 'Call or chat 24/7 for support or let our experts build your site for you.', + 'wp-plugin-bluehost' + ) }

    From 0cb99541471ebaecc17c6f523da5c047369b6957 Mon Sep 17 00:00:00 2001 From: wpalani Date: Tue, 28 Nov 2023 17:09:12 -0700 Subject: [PATCH 12/17] Fix minor ESLint issue after PR merge --- src/index.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index 41eee7b34..40d3a8136 100644 --- a/src/index.js +++ b/src/index.js @@ -8,8 +8,8 @@ import App from './app'; const WP_ADM_PAGE_ROOT_ELEMENT = 'wppbh-app'; // eslint-disable-next-line no-console -console.log(`%cWelcome to Bluehost! - +console.log( + `%cWelcome to Bluehost! %c ██████████████████████████████████████ ███ ██ ██ ███ @@ -27,8 +27,10 @@ console.log(`%cWelcome to Bluehost! ███ ██ ██ ███ ███ ██ ██ ███ ██████████████████████████████████████ -`, 'color: #196bde; font-size: 2em; font-weight: 900;', 'background: #fff; color: #196bde; font-weight: 400;'); - +`, + 'color: #196bde; font-size: 2em; font-weight: 900;', + 'background: #fff; color: #196bde; font-weight: 400;' +); const WPPBHRender = () => { const DOM_ELEMENT = document.getElementById( WP_ADM_PAGE_ROOT_ELEMENT ); From 34cfbdc227b635549ec06c3f01c6e6344aed8778 Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Wed, 29 Nov 2023 09:42:56 -0500 Subject: [PATCH 13/17] add module alias for cleaner imports --- src/app/data/routes.js | 2 +- src/app/index.js | 2 +- src/app/pages/marketplace/index.js | 2 +- src/app/pages/performance/index.js | 2 +- src/app/pages/staging/index.js | 2 +- webpack.config.js | 1 + 6 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/app/data/routes.js b/src/app/data/routes.js index 10667cd00..81cca0082 100644 --- a/src/app/data/routes.js +++ b/src/app/data/routes.js @@ -17,7 +17,7 @@ import Performance from '../pages/performance'; import Settings from '../pages/settings'; import Staging from '../pages/staging'; import Help from '../pages/help'; -import { getMarketplaceSubnavRoutes } from '../../../vendor/newfold-labs/wp-module-marketplace/components/marketplaceSubnav'; +import { getMarketplaceSubnavRoutes } from 'Modules/wp-module-marketplace/components/marketplaceSubnav'; import { ReactComponent as HelpIcon } from "../components/icons/HelpIcon.svg"; const addPartialMatch = (prefix, path) => diff --git a/src/app/index.js b/src/app/index.js index 68aa1b633..24698ed91 100644 --- a/src/app/index.js +++ b/src/app/index.js @@ -21,7 +21,7 @@ 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/'; +import { default as NewfoldNotifications } from 'Modules/wp-module-notifications/assets/js/components/notifications/'; // to pass to notifications module import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; diff --git a/src/app/pages/marketplace/index.js b/src/app/pages/marketplace/index.js index 97d5fc920..3b56875a0 100644 --- a/src/app/pages/marketplace/index.js +++ b/src/app/pages/marketplace/index.js @@ -6,7 +6,7 @@ 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/'; +import { default as NewfoldMarketplace } from 'Modules/wp-module-marketplace/components/marketplace/'; const MarketplacePage = () => { diff --git a/src/app/pages/performance/index.js b/src/app/pages/performance/index.js index 3a4f7ec34..659ba2129 100644 --- a/src/app/pages/performance/index.js +++ b/src/app/pages/performance/index.js @@ -12,7 +12,7 @@ import { bluehostPurgeCacheApiFetch as newfoldPurgeCacheApiFetch } from '../../util/helpers'; -import { default as NewfoldPerformance } from '../../../../vendor/newfold-labs/wp-module-performance/components/performance/'; +import { default as NewfoldPerformance } from 'Modules/wp-module-performance/components/performance/'; const PerformancePage = () => { diff --git a/src/app/pages/staging/index.js b/src/app/pages/staging/index.js index c6106311a..4c9b63a7f 100644 --- a/src/app/pages/staging/index.js +++ b/src/app/pages/staging/index.js @@ -8,7 +8,7 @@ import { Page } from '../../components/page'; import { SectionContainer, SectionHeader, SectionContent, SectionSettings } from '../../components/section'; import { useNotification } from '../../components/notifications/feed'; // component sourced from staging module -import { default as NewfoldStaging } from '../../../../vendor/newfold-labs/wp-module-staging/components/staging/'; +import { default as NewfoldStaging } from 'Modules/wp-module-staging/components/staging/'; const Staging = () => { diff --git a/webpack.config.js b/webpack.config.js index c48777fd0..6445227b4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -10,6 +10,7 @@ const alias = { App: path.resolve(__dirname, '/src/app/'), Store: path.resolve(__dirname, '/src/app/data/store.js'), Routes: path.resolve(__dirname, '/src/app/data/routes.js'), + Modules: path.resolve(__dirname, '/vendor/newfold-labs/'), }; /** * Make most-common imports available globally to ease import debt. From 028d368108a98644d23cbaaf210e2ff1adb15099 Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Thu, 30 Nov 2023 15:34:17 -0500 Subject: [PATCH 14/17] use '@module' as alias --- src/app/data/routes.js | 2 +- src/app/index.js | 2 +- src/app/pages/marketplace/index.js | 2 +- src/app/pages/performance/index.js | 2 +- src/app/pages/staging/index.js | 2 +- webpack.config.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/data/routes.js b/src/app/data/routes.js index 81cca0082..b2c1e9dab 100644 --- a/src/app/data/routes.js +++ b/src/app/data/routes.js @@ -17,7 +17,7 @@ import Performance from '../pages/performance'; import Settings from '../pages/settings'; import Staging from '../pages/staging'; import Help from '../pages/help'; -import { getMarketplaceSubnavRoutes } from 'Modules/wp-module-marketplace/components/marketplaceSubnav'; +import { getMarketplaceSubnavRoutes } from '@modules/wp-module-marketplace/components/marketplaceSubnav'; import { ReactComponent as HelpIcon } from "../components/icons/HelpIcon.svg"; const addPartialMatch = (prefix, path) => diff --git a/src/app/index.js b/src/app/index.js index 24698ed91..edcb4bb38 100644 --- a/src/app/index.js +++ b/src/app/index.js @@ -21,7 +21,7 @@ import { SiteInfoBar } from './components/site-info'; import { NotificationFeed } from './components/notifications/feed'; // component sourced from module -import { default as NewfoldNotifications } from 'Modules/wp-module-notifications/assets/js/components/notifications/'; +import { default as NewfoldNotifications } from '@modules/wp-module-notifications/assets/js/components/notifications/'; // to pass to notifications module import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; diff --git a/src/app/pages/marketplace/index.js b/src/app/pages/marketplace/index.js index 3b56875a0..aed6c0b16 100644 --- a/src/app/pages/marketplace/index.js +++ b/src/app/pages/marketplace/index.js @@ -6,7 +6,7 @@ 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 'Modules/wp-module-marketplace/components/marketplace/'; +import { default as NewfoldMarketplace } from '@modules/wp-module-marketplace/components/marketplace/'; const MarketplacePage = () => { diff --git a/src/app/pages/performance/index.js b/src/app/pages/performance/index.js index 659ba2129..7b4056e91 100644 --- a/src/app/pages/performance/index.js +++ b/src/app/pages/performance/index.js @@ -12,7 +12,7 @@ import { bluehostPurgeCacheApiFetch as newfoldPurgeCacheApiFetch } from '../../util/helpers'; -import { default as NewfoldPerformance } from 'Modules/wp-module-performance/components/performance/'; +import { default as NewfoldPerformance } from '@modules/wp-module-performance/components/performance/'; const PerformancePage = () => { diff --git a/src/app/pages/staging/index.js b/src/app/pages/staging/index.js index 4c9b63a7f..f1d75ee38 100644 --- a/src/app/pages/staging/index.js +++ b/src/app/pages/staging/index.js @@ -8,7 +8,7 @@ import { Page } from '../../components/page'; import { SectionContainer, SectionHeader, SectionContent, SectionSettings } from '../../components/section'; import { useNotification } from '../../components/notifications/feed'; // component sourced from staging module -import { default as NewfoldStaging } from 'Modules/wp-module-staging/components/staging/'; +import { default as NewfoldStaging } from '@modules/wp-module-staging/components/staging/'; const Staging = () => { diff --git a/webpack.config.js b/webpack.config.js index 6445227b4..30a80e694 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -10,7 +10,7 @@ const alias = { App: path.resolve(__dirname, '/src/app/'), Store: path.resolve(__dirname, '/src/app/data/store.js'), Routes: path.resolve(__dirname, '/src/app/data/routes.js'), - Modules: path.resolve(__dirname, '/vendor/newfold-labs/'), + '@modules': path.resolve(__dirname, '/vendor/newfold-labs/'), }; /** * Make most-common imports available globally to ease import debt. From 9ec77a5fcb8d83b6b3509a0cbb6f23a010b42cf0 Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Thu, 30 Nov 2023 15:56:34 -0500 Subject: [PATCH 15/17] lint update and add map for @modules alias --- .eslintrc.js | 1 + webpack.config.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index bfe0dce4a..bcf47e946 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -6,6 +6,7 @@ module.exports = { map: [ [ 'App', './src/app' ], [ 'Assets', './aseets' ], + [ '@modules', './vendor/newfold-labs' ], ], extensions: [ '.js', '.jsx', '.json' ], }, diff --git a/webpack.config.js b/webpack.config.js index e1ad2b303..5c173b6cb 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -11,7 +11,7 @@ const alias = { Assets: path.resolve( __dirname, '/assets/' ), Store: path.resolve( __dirname, '/src/app/data/store.js' ), Routes: path.resolve( __dirname, '/src/app/data/routes.js' ), - '@modules': path.resolve(__dirname, '/vendor/newfold-labs/'), + '@modules': path.resolve( __dirname, '/vendor/newfold-labs/' ), }; /** * Make most-common imports available globally to ease import debt. From 2e1df828291c64e3b38ad762a069acbd12d53f33 Mon Sep 17 00:00:00 2001 From: wpalani Date: Sun, 3 Dec 2023 17:08:51 -0700 Subject: [PATCH 16/17] Move `eslint-import-resolver-alias` package to dev --- package-lock.json | 6 ++++-- package.json | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index e6a7c8443..a11d77035 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,6 @@ "@wordpress/i18n": "^4.45.0", "@wordpress/icons": "^9.36.0", "classnames": "^2.3.2", - "eslint-import-resolver-alias": "^1.1.2", "jquery": "^3.7.1", "lodash": "^4.17.21", "react": "^18.2.0", @@ -37,6 +36,7 @@ "@wordpress/scripts": "^26.16.0", "cypress": "^13.4.0", "cypress-axe": "^1.5.0", + "eslint-import-resolver-alias": "^1.1.2", "eslint-plugin-import": "^2.29.0", "tailwindcss": "^3.3.5" }, @@ -10609,6 +10609,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/eslint-import-resolver-alias/-/eslint-import-resolver-alias-1.1.2.tgz", "integrity": "sha512-WdviM1Eu834zsfjHtcGHtGfcu+F30Od3V7I9Fi57uhBEwPkjDcii7/yW8jAT+gOhn4P/vOxxNAXbFAKsrrc15w==", + "dev": true, "engines": { "node": ">= 4" }, @@ -31371,7 +31372,8 @@ "eslint-import-resolver-alias": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/eslint-import-resolver-alias/-/eslint-import-resolver-alias-1.1.2.tgz", - "integrity": "sha512-WdviM1Eu834zsfjHtcGHtGfcu+F30Od3V7I9Fi57uhBEwPkjDcii7/yW8jAT+gOhn4P/vOxxNAXbFAKsrrc15w==" + "integrity": "sha512-WdviM1Eu834zsfjHtcGHtGfcu+F30Od3V7I9Fi57uhBEwPkjDcii7/yW8jAT+gOhn4P/vOxxNAXbFAKsrrc15w==", + "dev": true }, "eslint-import-resolver-node": { "version": "0.3.9", diff --git a/package.json b/package.json index 8afe157e1..8c0431ec7 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "@wordpress/i18n": "^4.45.0", "@wordpress/icons": "^9.36.0", "classnames": "^2.3.2", - "eslint-import-resolver-alias": "^1.1.2", "jquery": "^3.7.1", "lodash": "^4.17.21", "react": "^18.2.0", @@ -52,6 +51,7 @@ "@wordpress/scripts": "^26.16.0", "cypress": "^13.4.0", "cypress-axe": "^1.5.0", + "eslint-import-resolver-alias": "^1.1.2", "eslint-plugin-import": "^2.29.0", "tailwindcss": "^3.3.5" }, From 2c4b4ba6fa2830d3dd4d382519eab89fc950f8ee Mon Sep 17 00:00:00 2001 From: wpalani Date: Sun, 3 Dec 2023 18:14:10 -0700 Subject: [PATCH 17/17] Update package-lock.json --- package-lock.json | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 431b20b89..d901c298c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,6 @@ "requires": true, "packages": { "": { - "name": "bluehost-wordpress-plugin", "version": "3.6.0", "license": "GPL-2.0-or-later", "dependencies": { @@ -32,9 +31,12 @@ "@tailwindcss/forms": "^0.5.6", "@testing-library/cypress": "^10.0.1", "@wordpress/env": "^8.11.0", + "@wordpress/eslint-plugin": "^17.3.0", "@wordpress/scripts": "^26.16.0", "cypress": "^13.4.0", "cypress-axe": "^1.5.0", + "eslint-import-resolver-alias": "^1.1.2", + "eslint-plugin-import": "^2.29.0", "tailwindcss": "^3.3.5" }, "engines": { @@ -10517,6 +10519,18 @@ "eslint": ">=7.0.0" } }, + "node_modules/eslint-import-resolver-alias": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-alias/-/eslint-import-resolver-alias-1.1.2.tgz", + "integrity": "sha512-WdviM1Eu834zsfjHtcGHtGfcu+F30Od3V7I9Fi57uhBEwPkjDcii7/yW8jAT+gOhn4P/vOxxNAXbFAKsrrc15w==", + "dev": true, + "engines": { + "node": ">= 4" + }, + "peerDependencies": { + "eslint-plugin-import": ">=1.4.0" + } + }, "node_modules/eslint-import-resolver-node": { "version": "0.3.9", "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz", @@ -31111,6 +31125,12 @@ "integrity": "sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==", "dev": true }, + "eslint-import-resolver-alias": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-alias/-/eslint-import-resolver-alias-1.1.2.tgz", + "integrity": "sha512-WdviM1Eu834zsfjHtcGHtGfcu+F30Od3V7I9Fi57uhBEwPkjDcii7/yW8jAT+gOhn4P/vOxxNAXbFAKsrrc15w==", + "dev": true + }, "eslint-import-resolver-node": { "version": "0.3.9", "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",