From 153ab0b88e7687e4b50ca1db723dd657b588f63c Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Mon, 1 May 2023 13:20:00 +0530 Subject: [PATCH 1/2] add support for translations in steps --- .../components/MiniPreview/contents.js | 22 + .../components/MiniPreview/index.js | 72 +-- .../components/MiniPreview/miniPreview.json | 6 - .../components/MiniPreview/stylesheet.scss | 431 +++++++++--------- src/OnboardingSPA/data/routes/default-flow.js | 105 +---- .../Steps/Ecommerce/StepAddress/contents.js | 31 ++ .../Steps/Ecommerce/StepAddress/index.js | 56 +-- .../Steps/Ecommerce/StepProducts/contents.js | 83 ++++ .../Steps/Ecommerce/StepProducts/index.js | 41 +- .../pages/Steps/Ecommerce/StepTax/contents.js | 50 ++ .../pages/Steps/Ecommerce/StepTax/index.js | 45 +- .../pages/Steps/Ecommerce/content.json | 93 ---- .../GetStartedExperience/content.json | 7 - .../GetStartedExperience/contents.js | 38 ++ .../GetStarted/GetStartedExperience/index.js | 40 +- .../SiteTypeSetup/PrimarySite/index.js | 52 +-- .../SiteTypeSetup/SecondarySite/index.js | 62 +-- .../GetStarted/SiteTypeSetup/content.json | 27 -- .../GetStarted/SiteTypeSetup/contents.js | 60 +++ .../Steps/GetStarted/Welcome/contents.js | 78 ++++ .../pages/Steps/GetStarted/Welcome/index.js | 64 ++- .../Steps/GetStarted/Welcome/tabContent.json | 28 -- .../pages/Steps/TopPriority/contents.js | 39 ++ .../pages/Steps/TopPriority/index.js | 47 +- .../pages/Steps/TopPriority/stylesheet.scss | 10 +- src/OnboardingSPA/styles/_interface.scss | 1 + 26 files changed, 791 insertions(+), 797 deletions(-) create mode 100644 src/OnboardingSPA/components/MiniPreview/contents.js delete mode 100644 src/OnboardingSPA/components/MiniPreview/miniPreview.json create mode 100644 src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/contents.js create mode 100644 src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/contents.js create mode 100644 src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/contents.js delete mode 100644 src/OnboardingSPA/pages/Steps/Ecommerce/content.json delete mode 100644 src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/content.json create mode 100644 src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/contents.js delete mode 100644 src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/content.json create mode 100644 src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js create mode 100644 src/OnboardingSPA/pages/Steps/GetStarted/Welcome/contents.js delete mode 100644 src/OnboardingSPA/pages/Steps/GetStarted/Welcome/tabContent.json create mode 100644 src/OnboardingSPA/pages/Steps/TopPriority/contents.js diff --git a/src/OnboardingSPA/components/MiniPreview/contents.js b/src/OnboardingSPA/components/MiniPreview/contents.js new file mode 100644 index 000000000..c63480777 --- /dev/null +++ b/src/OnboardingSPA/components/MiniPreview/contents.js @@ -0,0 +1,22 @@ +import { __, sprintf } from '@wordpress/i18n'; + +import { translations } from '../../utils/locales/translations'; + +const getContents = () => { + return { + defaultTitle: sprintf( + /* translators: %s: Site */ + __( 'WordPress %s', 'wp-module-onboarding' ), + translations( 'Site' ) + ), + defaultDesc: sprintf( + /* translators: %s: Site */ + __( 'Just another WordPress %s', 'wp-module-onboarding' ), + translations( 'Site' ) + ), + defaultIcon: '--default-logo-icon', + defaultUrl: 'https://bluehost.com', + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/components/MiniPreview/index.js b/src/OnboardingSPA/components/MiniPreview/index.js index 2bf4609be..ac7a662b9 100644 --- a/src/OnboardingSPA/components/MiniPreview/index.js +++ b/src/OnboardingSPA/components/MiniPreview/index.js @@ -1,21 +1,7 @@ -import { __, sprintf } from '@wordpress/i18n'; import { memo, useState, useEffect } from '@wordpress/element'; -import content from './miniPreview.json'; -import { translations } from '../../utils/locales/translations'; +import getContents from './contents'; -/** - * A Mini Preview Section. - * - * @param root0 - * @param root0.title - * @param root0.desc - * @param root0.icon - * @param root0.socialData - * @param root0.isSocialFormOpen - * @param root0.setIsSocialFormOpen - * @return - */ const MiniPreview = ( { title, desc, @@ -24,22 +10,12 @@ const MiniPreview = ( { isSocialFormOpen, setIsSocialFormOpen, } ) => { - const iconPreview = icon == '' || icon == undefined ? content.icon : icon; - const titlePreview = - title == '' - ? sprintf( - __( content.title, 'wp-module-onboarding' ), - translations( 'Site' ) - ) - : title; - const descPreview = - desc == '' - ? sprintf( - __( content.desc, 'wp-module-onboarding' ), - translations( 'Site' ) - ) - : desc; - const urlPreview = title == '' ? content.url : titleToUrl( title ); + const content = getContents(); + const iconPreview = + icon === '' || icon === undefined ? content.defaultIcon : icon; + const titlePreview = title === '' ? content.defaultTitle : title; + const descPreview = desc === '' ? content.defaultDesc : desc; + const urlPreview = title === '' ? content.defaultUrl : titleToUrl(); const [ facebook, setFacebook ] = useState( '' ); const [ twitter, setTwitter ] = useState( '' ); @@ -91,7 +67,7 @@ const MiniPreview = ( { { url: tiktok, image: 'var(--tiktok-colored-icon)' }, ]; - function titleToUrl( title ) { + function titleToUrl() { return `https://${ title ?.toLowerCase() .replace( /\s/g, '' ) @@ -99,11 +75,14 @@ const MiniPreview = ( { } function socialIconList() { - return socialDataset.map( ( socialInfo ) => { + return socialDataset.map( ( socialInfo, idx ) => { return (
+ tabIndex={ idx + 1 } + role="button" + onClick={ () => setIsSocialFormOpen( ! isSocialFormOpen ) } + onKeyDown={ () => setIsSocialFormOpen( ! isSocialFormOpen ) } className={ `browser-content_social_icon ${ @@ -143,7 +122,7 @@ const MiniPreview = ( {
- { ( icon == 0 || icon == undefined ) && ( + { ( icon === 0 || icon === undefined ) && (
) } - { icon != 0 && icon != undefined && ( + { icon !== 0 && icon !== undefined && ( ) }
- { __( - titlePreview?.substring( 0, 20 ), - 'wp-module-onboarding' - ) } + { titlePreview?.substring( 0, 20 ) }
x @@ -192,8 +168,8 @@ const MiniPreview = ( { {} } - value={ __( urlPreview, 'wp-module-onboarding' ) } + onChange={ () => {} } + value={ urlPreview } >
@@ -206,15 +182,13 @@ const MiniPreview = ( {

- { __( titlePreview, 'wp-module-onboarding' ) } + { titlePreview }

- - { __( urlPreview, 'wp-module-onboarding' ) } - + + { urlPreview } +
-
- { __( descPreview, 'wp-module-onboarding' ) } -
+
{ descPreview }
{ socialIconList() }
diff --git a/src/OnboardingSPA/components/MiniPreview/miniPreview.json b/src/OnboardingSPA/components/MiniPreview/miniPreview.json deleted file mode 100644 index ec2e6fb73..000000000 --- a/src/OnboardingSPA/components/MiniPreview/miniPreview.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "icon": "--default-logo-icon", - "title": "WordPress %s", - "desc": "Just another WordPress %s", - "url": "https://bluehost.com" -} diff --git a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss index 24dd803ab..11c59f1e7 100644 --- a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss +++ b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss @@ -1,230 +1,237 @@ -$white: #FFFFFF; -$black: #000000; -$browser-dark: #CACACA; -$browser-light: #F2F2F2; +$white: #fff; +$black: #000; +$browser-dark: #cacaca; +$browser-light: #f2f2f2; $link-browser-color: #007017; -$title-browser-color: #3858E9; +$link-hover-color: var(--nfd-onboarding-link-hover-blue); +$title-browser-color: #3858e9; .mini-preview { - margin: 0px 0px 10px 0px; - font-weight: 500; - font-size: 1rem; + margin: 0 0 10px 0; + font-weight: 500; + font-size: 1rem; } .browser-container { - width: 100%; - background-color: $browser-dark; + width: 100%; + background-color: $browser-dark; } -.browser-icon{ - width: 24px; - height: 24px; - padding: 4px; - background-position: center; - background-repeat: no-repeat; - background-clip: padding-box; - - &-title{ - width: 18px; - height: 18px; - padding: 5px; - background-position: center; - background-repeat: no-repeat; - background-clip: padding-box; - } +.browser-icon { + width: 24px; + height: 24px; + padding: 4px; + background-position: center; + background-repeat: no-repeat; + background-clip: padding-box; + + &-title { + width: 18px; + height: 18px; + padding: 5px; + background-position: center; + background-repeat: no-repeat; + background-clip: padding-box; + } } .browser-dot { - width: 12px; - height: 12px; - margin: 4px; - border-radius: 50%; - display: inline-block; - - @media (max-width: 400px) { - width: 8px; - margin: 2.8px; - height: 8px; - margin-top: 3px; - } + width: 12px; + height: 12px; + margin: 4px; + border-radius: 50%; + display: inline-block; + + @media (max-width: 400px) { + width: 8px; + margin: 2.8px; + height: 8px; + margin-top: 3px; + } } .browser-content { - padding: 10px; - word-break: break-all; - background-color: $white; - - &_top-row{ - - margin-top: 8px; - - &-name{ - cursor: pointer; - font-weight: 600; - font-size: 1.2rem; - margin: 0px 0px 6px 0px; - color: $title-browser-color; - } - - &-link { - margin: 0px; - font-size: 1rem; - cursor: pointer; - color: $link-browser-color; - } - } - &_desc{ - color: $black; - text-align: left; - max-width: 450px; - font-weight: 400; - line-height: 1.58; - font-size: 0.88rem; - margin: 16px 0px 0px 0px; - } - &_social{ - display: flex; - margin-top: 4px; - justify-content: flex-start; - - &_icon{ - opacity: 1; - width: 24px; - height: 24px; - filter: none; - cursor: pointer; - text-align: center; - padding-right: 6px; - background-position: center; - background-repeat: no-repeat; - background-clip: padding-box; - transition: opacity 0.4s ease-in-out; - - &.--no-url { - opacity: 0.5; - filter: grayscale(1); - } - - &.--invalid-url { - opacity: 0.75; - filter: none; - } - } - } + padding: 10px; + word-break: break-all; + background-color: $white; + + &_top-row { + + margin-top: 8px; + + &-name { + cursor: pointer; + font-weight: 600; + font-size: 1.2rem; + margin: 0 0 6px 0; + color: $title-browser-color; + } + + &-link { + margin: 0; + font-size: 1rem; + cursor: pointer; + color: $link-browser-color; + + &:hover { + color: $link-hover-color; + } + } + } + + &_desc { + color: $black; + text-align: left; + max-width: 450px; + font-weight: 400; + line-height: 1.58; + font-size: 0.88rem; + margin: 16px 0 0 0; + } + + &_social { + display: flex; + margin-top: 4px; + justify-content: flex-start; + + &_icon { + opacity: 1; + width: 24px; + height: 24px; + filter: none; + cursor: pointer; + text-align: center; + padding-right: 6px; + background-position: center; + background-repeat: no-repeat; + background-clip: padding-box; + transition: opacity 0.4s ease-in-out; + + &.--no-url { + opacity: 0.5; + filter: grayscale(1); + } + + &.--invalid-url { + opacity: 0.75; + filter: none; + } + } + } } .browser-row { - &-title { - display: flex; - align-items: flex-end; - background-color: $browser-dark; - - &_main{ - height: 100%; - margin-left: 6px; - } - - &_buttons{ - padding: 2px 8px 3px 2px; - } - - &_bar { - display: flex; - align-items: flex-end; - - &_before { - background-color: $browser-light; - - &-curve { - opacity: 1; - width: 10px; - height: 10px; - content: " "; - display: flex; - align-items: center; - pointer-events: none; - justify-content: center; - border-radius: 0 0 8px 0; - background-color: $browser-dark; - } - } - - &_after { - background-color: $browser-light; - - &-curve { - opacity: 1; - width: 10px; - height: 10px; - content: " "; - display: flex; - align-items: center; - pointer-events: none; - justify-content: center; - border-radius: 0 0 0 8px; - background-color: $browser-dark; - } - } - - &_main { - z-index: 4; - height: 30px; - display: flex; - margin-top: 5px; - min-width: 150px; - padding-left: 5px; - padding-right: 10px; - align-items: center; - border-radius: 8px 8px 0px 0px; - background-color: $browser-light; - - &-text { - flex: 1; - content: " "; - margin-left: 2px; - max-width: 140px; - font-size: 0.8rem; - line-clamp: 1; - white-space: nowrap; - text-overflow: ellipsis; - background: -webkit-linear-gradient(left, #000 50%, #fff); - background-clip: text; - -webkit-text-fill-color: transparent; - } - } - } - - - } - - &-search { - display: flex; - align-items: center; - justify-content: center; - background-color: $browser-light; - - &__icons { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - } - - &__search-box { - flex: 10; - padding: 5px; - - &_input { - width: 100%; - font-size: 0.8rem; - border: none !important; - background-color: $white; - } - } - - &__more { - flex: 1; - } - } -} \ No newline at end of file + &-title { + display: flex; + align-items: flex-end; + background-color: $browser-dark; + + &_main { + height: 100%; + margin-left: 6px; + } + + &_buttons { + padding: 2px 8px 3px 2px; + } + + &_bar { + display: flex; + align-items: flex-end; + + &_before { + background-color: $browser-light; + + &-curve { + opacity: 1; + width: 10px; + height: 10px; + content: " "; + display: flex; + align-items: center; + pointer-events: none; + justify-content: center; + border-radius: 0 0 8px 0; + background-color: $browser-dark; + } + } + + &_after { + background-color: $browser-light; + + &-curve { + opacity: 1; + width: 10px; + height: 10px; + content: " "; + display: flex; + align-items: center; + pointer-events: none; + justify-content: center; + border-radius: 0 0 0 8px; + background-color: $browser-dark; + } + } + + &_main { + z-index: 4; + height: 30px; + display: flex; + margin-top: 5px; + min-width: 150px; + padding-left: 5px; + padding-right: 10px; + align-items: center; + border-radius: 8px 8px 0 0; + background-color: $browser-light; + + &-text { + flex: 1; + content: " "; + margin-left: 2px; + max-width: 140px; + font-size: 0.8rem; + line-clamp: 1; + white-space: nowrap; + text-overflow: ellipsis; + background: -webkit-linear-gradient(left, #000 50%, #fff); + background-clip: text; + -webkit-text-fill-color: transparent; + } + } + } + + + } + + &-search { + display: flex; + align-items: center; + justify-content: center; + background-color: $browser-light; + + &__icons { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + } + + &__search-box { + flex: 10; + padding: 5px; + + &_input { + width: 100%; + font-size: 0.8rem; + border: none !important; + background-color: $white; + } + } + + &__more { + flex: 1; + } + } +} diff --git a/src/OnboardingSPA/data/routes/default-flow.js b/src/OnboardingSPA/data/routes/default-flow.js index bfe85280a..2539969fc 100644 --- a/src/OnboardingSPA/data/routes/default-flow.js +++ b/src/OnboardingSPA/data/routes/default-flow.js @@ -1,5 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; import { lazy } from '@wordpress/element'; +// eslint-disable-next-line import/no-extraneous-dependencies import { filter, orderBy } from 'lodash'; import IndexPage from '../../pages/index'; import { translations } from '../../utils/locales/translations'; @@ -22,8 +23,6 @@ import { import { VIEW_DESIGN_COLORS, VIEW_DESIGN_HEADER_MENU, - VIEW_DESIGN_HOMEPAGE_MENU, - VIEW_DESIGN_THEME_STYLES_MENU, VIEW_DESIGN_THEME_STYLES_PREVIEW, VIEW_DESIGN_TYPOGRAPHY, VIEW_NAV_GET_STARTED, @@ -84,10 +83,6 @@ const StepBasicInfoLearnMoreSidebar = lazy( () => import( '../../pages/Steps/BasicInfo/Sidebar/LearnMore' ) ); -const StepDesignThemes = lazy( () => - import( '../../pages/Steps/DesignThemes' ) -); - const StepDesignThemeStylesMenu = lazy( () => import( '../../pages/Steps/DesignThemeStyles/Menu' ) ); @@ -194,12 +189,6 @@ export const steps = [ { path: '/wp-setup/step/get-started/welcome', title: __( 'Welcome', 'wp-module-onboarding' ), - /* translators: %s: website or store */ - heading: sprintf( - __( 'Make your %s dreams a reality!', 'wp-module-onboarding' ), - translations( 'website' ) - ), - subheading: __( 'with WordPress and ', 'wp-module-onboarding' ), description: __( "We'll use this to personalize this onboarding and future recommendations", 'wp-module-onboarding' @@ -217,18 +206,6 @@ export const steps = [ { path: '/wp-setup/step/get-started/experience', title: __( 'WordPress Experience', 'wp-module-onboarding' ), - /* translators: %s: website or store */ - heading: sprintf( - __( - 'Help us tailor this setup to your %s', - 'wp-module-onboarding' - ), - translations( 'site' ) - ), - subheading: __( - 'What is your experience with WordPress?', - 'wp-module-onboarding' - ), description: __( "We'll use this to personalize this onboarding and future recommendations", 'wp-module-onboarding' @@ -245,32 +222,11 @@ export const steps = [ }, { path: '/wp-setup/step/get-started/site-primary', - /* translators: %s: website or store */ title: sprintf( + /* translators: %s: website or store */ __( 'Primary %s Setup', 'wp-module-onboarding' ), translations( 'Site' ) ), - /* translators: %s: website or store */ - heading: sprintf( - __( - 'Help us tailor this setup to your %s', - 'wp-module-onboarding' - ), - translations( 'site' ) - ), - /* translators: %s: website or store */ - subheading: sprintf( - __( 'What type of %s is it?', 'wp-module-onboarding' ), - translations( 'site' ) - ), - /* translators: %s: website or store */ - description: sprintf( - __( - "Setup more of your %s, show you around WordPress or share secrets to success -- we'll follow your lead on how you'd like to proceed.", - 'wp-module-onboarding' - ), - translations( 'site' ) - ), Component: StepGetStartedPrimarySetup, Icon: moveTo, priority: 60, @@ -284,32 +240,11 @@ export const steps = [ }, { path: '/wp-setup/step/get-started/site-secondary', - /* translators: %s: website or store */ title: sprintf( + /* translators: %s: website or store */ __( 'Secondary %s Setup', 'wp-module-onboarding' ), translations( 'Site' ) ), - /* translators: %s: website or store */ - heading: sprintf( - __( - 'Help us tailor this setup to your %s', - 'wp-module-onboarding' - ), - translations( 'site' ) - ), - /* translators: %s: website or store */ - subheading: sprintf( - __( 'What type of %s is it?', 'wp-module-onboarding' ), - translations( 'site' ) - ), - /* translators: %s: website or store */ - description: sprintf( - __( - "Setup more of your %s, show you around WordPress or share secrets to success -- we'll follow your lead on how you'd like to proceed.", - 'wp-module-onboarding' - ), - translations( 'site' ) - ), Component: StepGetStartedSecondarySetup, Icon: moveTo, priority: 80, @@ -340,8 +275,8 @@ export const steps = [ { path: '/wp-setup/step/basic-info', title: __( 'Basic Info', 'wp-module-onboarding' ), - /* translators: %s: website or store */ heading: sprintf( + /* translators: %s: website or store */ __( 'Introduce us to this %s', 'wp-module-onboarding' ), translations( 'website' ) ), @@ -349,8 +284,8 @@ export const steps = [ 'So we can introduce it to the web', 'wp-module-onboarding' ), - /* translators: %s: website or store */ description: sprintf( + /* translators: %s: website or store */ __( 'Help visitors, search results and social media identify your %s.', 'wp-module-onboarding' @@ -366,23 +301,6 @@ export const steps = [ }, }, }, - // { - // path: '/wp-setup/step/design/themes', - // title: __( 'Themes', 'wp-module-onboarding' ), - // heading: __( "Let's make you look your best", 'wp-module-onboarding' ), - // subheading: __( - // 'Find a WordPress Theme to present polished and compelling.', - // 'wp-module-onboarding' - // ), - // description: __( - // 'Your Theme is the starting place for layout and design, setting the tone for your site. Keep it for years or change and swap as you grow.', - // 'wp-module-onboarding' - // ), - // Component: StepDesignThemes, - // Icon: brush, - // priority: 140, - // VIEW: VIEW_DESIGN_THEMES, - // }, { path: '/wp-setup/step/design/theme-styles/menu', title: __( 'Theme Styles', 'wp-module-onboarding' ), @@ -620,16 +538,8 @@ export const conditionalSteps = { }, }; -/** - * Top-level registration of all routes. - */ export const routes = [ ...pages, ...steps ]; -/** - * Filter-out the design steps and register a fake step in their place. - * - * @return - */ export const initialTopSteps = () => { const topSteps = filter( steps, ( step ) => { return ( @@ -666,11 +576,6 @@ export const initialTopSteps = () => { return orderBy( topSteps, [ 'priority' ], [ 'asc' ] ); }; -/** - * Filter out all non-design steps. - * - * @return - */ export const initialDesignSteps = () => { const designSteps = filter( steps, ( step ) => { return ( diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/contents.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/contents.js new file mode 100644 index 000000000..73faeef6e --- /dev/null +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/contents.js @@ -0,0 +1,31 @@ +import { __ } from '@wordpress/i18n'; + +const getContents = () => { + return { + heading: __( + 'Confirm your business or store address', + 'wp-module-onboarding' + ), + subheading: __( + 'We’ll use this information to help you setup your online store', + 'wp-module-onboarding' + ), + countryInputLabel: __( + 'Where is your store based?', + 'wp-module-onboarding' + ), + addressInputLabel: __( 'Address', 'wp-module-onboarding' ), + cityInputLabel: __( 'City', 'wp-module-onboarding' ), + stateInputLabel: __( 'State', 'wp-module-onboarding' ), + postalCodeInputLabel: __( 'Postal Code', 'wp-module-onboarding' ), + emailInputLabel: __( 'Email', 'wp-module-onboarding' ), + currencyInputLabel: __( + 'What currency do you want to display in your store?', + 'wp-module-onboarding' + ), + requiredText: __( '* required', 'wp-module-onboarding' ), + buttonText: __( 'Continue Setup', 'wp-module-onboarding' ), + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js index 8652c067f..f9cc46bf4 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js @@ -1,7 +1,6 @@ import { useViewportMatch } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect, useState } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; import { useNavigate } from 'react-router-dom'; import { SIDEBAR_LEARN_MORE, @@ -17,6 +16,7 @@ import currencies from '../currencies.json'; import { useWPSettings as getWPSettings } from '../useWPSettings'; import Animate from '../../../../components/Animate'; import { EcommerceStateHandler } from '../../../../components/StateHandlers'; +import getContents from './contents'; const StepAddress = () => { const [ settings, setSettings ] = useState(); @@ -202,6 +202,8 @@ const StepAddress = () => { } ); } + const content = getContents(); + return ( @@ -234,14 +236,8 @@ const StepAddress = () => { >
{
{ address === undefined ? ( { aria-required htmlFor="woocommerce_store_address" > - { __( - 'Address', - 'wp-module-onboarding' - ) } + { content.addressInputLabel } { aria-required htmlFor="woocommerce_store_city" > - { __( - 'City', - 'wp-module-onboarding' - ) } + { content.cityInputLabel } { aria-required htmlFor="state" > - { __( - 'State', - 'wp-module-onboarding' - ) } + { content.stateInputLabel } { aria-required htmlFor="woocommerce_email_from_address" > - { __( - 'Email', - 'wp-module-onboarding' - ) } + { content.emailInputLabel } {
- * required + { content.requiredText }
@@ -455,10 +430,7 @@ const StepAddress = () => { disabled={ address === undefined } type="submit" > - { __( - 'Continue Setup', - 'wp-module-onboarding' - ) } + { content.buttonText } diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/contents.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/contents.js new file mode 100644 index 000000000..5199ef89b --- /dev/null +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/contents.js @@ -0,0 +1,83 @@ +import { __ } from '@wordpress/i18n'; + +const getContents = () => { + return { + heading: __( 'Tell us about your products', 'wp-module-onboarding' ), + subheading: __( + 'What type of products will you be selling?', + 'wp-module-onboarding' + ), + question: __( + 'How many products will you be selling?', + 'wp-module-onboarding' + ), + typeOptions: [ + { + content: __( 'Physical products', 'wp-module-onboarding' ), + value: 'physical', + }, + { + content: __( + 'Digital / Downloadable products', + 'wp-module-onboarding' + ), + value: 'downloads', + }, + { + content: __( 'Subscriptions', 'wp-module-onboarding' ), + value: 'subscriptions', + }, + { + content: __( + 'Book rooms, houses or rent products', + 'wp-module-onboarding' + ), + value: 'bookings', + }, + { + content: __( 'Membership', 'wp-module-onboarding' ), + value: 'memberships', + }, + { + content: __( 'Customizable products', 'wp-module-onboarding' ), + value: 'product-add-ons', + }, + { + content: __( 'Bundles of products', 'wp-module-onboarding' ), + value: 'product-bundles', + }, + { + content: __( + 'Let your users ask a quote for your products', + 'wp-module-onboarding' + ), + value: 'product-quotes', + }, + ], + numberOptions: [ + { + content: '0', + value: '0', + }, + { + content: '1 - 10', + value: '1-10', + }, + { + content: '11 - 100', + value: '11-100', + }, + { + content: '101 - 1000', + value: '101-1000', + }, + { + content: '1000 +', + value: '1000+', + }, + ], + buttonText: __( 'Continue Setup', 'wp-module-onboarding' ), + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js index 4b2810433..41e79bd3b 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js @@ -1,7 +1,6 @@ import { CheckboxControl, RadioControl } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; import { SIDEBAR_LEARN_MORE, VIEW_NAV_ECOMMERCE_STORE_INFO, @@ -13,7 +12,7 @@ import NeedHelpTag from '../../../../components/NeedHelpTag'; import NewfoldLargeCard from '../../../../components/NewfoldLargeCard'; import { EcommerceStateHandler } from '../../../../components/StateHandlers'; import { store as nfdOnboardingStore } from '../../../../store'; -import content from '../content.json'; +import getContents from './contents'; const StepProducts = () => { const { @@ -56,6 +55,8 @@ const StepProducts = () => { }, } ); + const content = getContents(); + return ( @@ -63,18 +64,12 @@ const StepProducts = () => {
- { content.productOptions.map( ( product ) => ( + { content.typeOptions.map( ( product ) => ( {
- { __( - content.stepProductsQuestion, - 'wp-module-onboarding' - ) } + { content.question } { return { - label: __( - option.content, - 'wp-module-onboarding' - ), - value: __( - option.value, - 'wp-module-onboarding' - ), + label: option.content, + value: option.value, }; } ) } onChange={ handleProductCount } />
- +
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/contents.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/contents.js new file mode 100644 index 000000000..e3197588e --- /dev/null +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/contents.js @@ -0,0 +1,50 @@ +import { __ } from '@wordpress/i18n'; + +const getContents = () => { + return { + heading: __( 'Configure your tax information', 'wp-module-onboarding' ), + subheading: __( + 'Do you want to enable tax rates and calculations?', + 'wp-module-onboarding' + ), + options: [ + { + content: __( + 'Yes, enable tax rates and calculations', + 'wp-module-onboarding' + ), + value: '1', + data: { + wc_connect_taxes_enabled: 'yes', + woocommerce_calc_taxes: 'yes', + }, + }, + { + content: __( + 'I will configure my own tax information later', + 'wp-module-onboarding' + ), + value: '3', + data: { + wc_connect_taxes_enabled: 'no', + woocommerce_calc_taxes: 'yes', + }, + }, + { + content: __( + "I don't charge sales tax", + 'wp-module-onboarding' + ), + value: '5', + data: { + woocommerce_no_sales_tax: true, + woocommerce_calc_taxes: 'no', + wc_connect_taxes_enabled: 'no', + }, + }, + ], + buttonText: __( 'Continue Setup', 'wp-module-onboarding' ), + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js index 106185807..b6148feb9 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js @@ -1,7 +1,6 @@ import { RadioControl } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect, useState } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; import { useNavigate } from 'react-router-dom'; import { SIDEBAR_LEARN_MORE, @@ -13,9 +12,9 @@ import NeedHelpTag from '../../../../components/NeedHelpTag'; import NewfoldLargeCard from '../../../../components/NewfoldLargeCard'; import { EcommerceStateHandler } from '../../../../components/StateHandlers'; import { store as nfdOnboardingStore } from '../../../../store'; -import content from '../content.json'; import { useWPSettings as getWPSettings } from '../useWPSettings'; import Animate from '../../../../components/Animate'; +import getContents from './contents'; function createReverseLookup( state ) { return ( option ) => @@ -48,13 +47,15 @@ const StepTax = () => { setWPSettings(); }, [] ); + const content = getContents(); + useEffect( () => { if ( settings && settings !== null && currentData.storeDetails.tax === undefined ) { - const selectedTaxOption = content.stepTaxOptions.find( + const selectedTaxOption = content.options.find( createReverseLookup( settings ) ); const tax = selectedTaxOption?.data ?? {}; @@ -86,7 +87,7 @@ const StepTax = () => { }; const selectOption = ( value ) => { - const selectedOption = content.stepTaxOptions.find( + const selectedOption = content.options.find( ( option ) => option.value === value ); setCurrentOnboardingData( { @@ -109,18 +110,8 @@ const StepTax = () => {
@@ -129,20 +120,12 @@ const StepTax = () => { 'nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-tax-step radio-control-main' } selected={ tax?.option } - options={ content.stepTaxOptions.map( - ( option ) => { - return { - label: __( - option.content, - 'wp-module-onboarding' - ), - value: __( - option.value, - 'wp-module-onboarding' - ), - }; - } - ) } + options={ content.options.map( ( option ) => { + return { + label: option.content, + value: option.value, + }; + } ) } onChange={ ( value ) => selectOption( value ) } /> @@ -153,7 +136,7 @@ const StepTax = () => { } onClick={ handleButtonClick } > - { __( 'Continue Setup', 'wp-module-onboarding' ) } + { content.buttonText }
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/content.json b/src/OnboardingSPA/pages/Steps/Ecommerce/content.json deleted file mode 100644 index 91aea0189..000000000 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/content.json +++ /dev/null @@ -1,93 +0,0 @@ -{ - "stepProductsHeading": "Tell us about your products", - "stepProductsSubHeading": "What type of products will you be selling?", - "stepProductsQuestion": "How many products will you be selling?", - "stepTaxHeading": "Configure your tax information", - "stepTaxSubHeading": "Do you want to enable tax rates and calculations?", - "stepAddressHeading": "Confirm your business or store address", - "stepAddressSubHeading": "We’ll use this information to help you setup your online store", - "stepTaxOptions": [ - { - "content": "Yes, enable tax rates and calculations", - "value": "1", - "data": { - "wc_connect_taxes_enabled": "yes", - "woocommerce_calc_taxes": "yes" - } - }, - { - "content": "I will configure my own tax information later", - "value": "3", - "data": { - "wc_connect_taxes_enabled": "no", - "woocommerce_calc_taxes": "yes" - } - }, - { - "content": "I don't charge sales tax", - "value": "5", - "data": { - "woocommerce_no_sales_tax": true, - "woocommerce_calc_taxes": "no", - "wc_connect_taxes_enabled": "no" - } - } - ], - "buttonText": "Continue Setup", - "productOptions": [ - { - "content": "Physical products", - "value": "physical" - }, - { - "content": "Digital / Downloadable products", - "value": "downloads" - }, - { - "content": "Subscriptions", - "value": "subscriptions" - }, - { - "content": "Book rooms, houses or rent products", - "value": "bookings" - }, - { - "content": "Membership", - "value": "memberships" - }, - { - "content": "Customizable products", - "value": "product-add-ons" - }, - { - "content": "Bundles of products", - "value": "product-bundles" - }, - { - "content": "Let your users ask a quote for your products", - "value": "product-quotes" - } - ], - "stepProductNumbers": [ - { - "content": "0", - "value": "0" - }, - { - "content": "1 - 10", - "value": "1-10" - }, - { - "content": "11 - 100", - "value": "11-100" - }, - { - "content": "101 - 1000", - "value": "101-1000" - }, - { - "content": "1000 +", - "value": "1000+" - } - ] -} \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/content.json b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/content.json deleted file mode 100644 index 0c1ea0911..000000000 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/content.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "aboutYouTag": "ABOUT YOU", - "buttonText": "Continue Setup", - "options": [{ "content":"Never used it" , "value" : "1"}, - { "content": "Used it some", "value" : "3"}, - { "content": "I'm an expert", "value" : "5"}] -} \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/contents.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/contents.js new file mode 100644 index 000000000..e3060eff1 --- /dev/null +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/contents.js @@ -0,0 +1,38 @@ +import { __, sprintf } from '@wordpress/i18n'; + +import { translations } from '../../../../utils/locales/translations'; + +const getContents = () => { + return { + heading: sprintf( + /* translators: %s: website or store */ + __( + 'Help us tailor this setup to your %s', + 'wp-module-onboarding' + ), + translations( 'site' ) + ), + subheading: __( 'ABOUT YOU', 'wp-module-onboarding' ), + question: __( + 'What is your experience with WordPress?', + 'wp-module-onboarding' + ), + buttonText: __( 'Continue Setup', 'wp-module-onboarding' ), + options: [ + { + label: __( 'Never used it', 'wp-module-onboarding' ), + value: '1', + }, + { + label: __( 'Used it some', 'wp-module-onboarding' ), + value: '3', + }, + { + label: __( "I'm an expert", 'wp-module-onboarding' ), + value: '5', + }, + ], + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js index d128b8216..a426d0031 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js @@ -8,27 +8,19 @@ import { VIEW_NAV_GET_STARTED, } from '../../../../../constants'; import { store as nfdOnboardingStore } from '../../../../store'; -import content from './content.json'; import { RadioControl } from '@wordpress/components'; import { useState, useEffect } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; import Animate from '../../../../components/Animate'; - -/** - * Get Started: WordPress Experience Comfort Level. - * - * @return - */ +import getContents from './contents'; const GetStartedExperience = () => { const [ wpComfortLevel, setWpComfortLevel ] = useState( '0' ); - const { currentData, currentStep } = useSelect( ( select ) => { + const { currentData } = useSelect( ( select ) => { return { currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), - currentStep: select( nfdOnboardingStore ).getCurrentStep(), }; }, [] ); @@ -62,18 +54,17 @@ const GetStartedExperience = () => { setCurrentOnboardingData( currentDataCopy ); }; + const content = getContents(); + return (
{ selected={ wpComfortLevel } options={ content.options.map( ( option ) => { return { - label: __( - option.content, - 'wp-module-onboarding' - ), - value: __( - option.value, - 'wp-module-onboarding' - ), + label: option.label, + value: option.value, }; } ) } onChange={ ( value ) => saveData( value ) } />
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js index d30630866..89941bab9 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js @@ -1,4 +1,3 @@ -import { __, sprintf } from '@wordpress/i18n'; import CommonLayout from '../../../../../components/Layouts/Common'; import NewfoldLargeCard from '../../../../../components/NewfoldLargeCard'; import { @@ -11,9 +10,8 @@ import { useState, useEffect } from '@wordpress/element'; import CardHeader from '../../../../../components/CardHeader'; import NavCardButton from '../../../../../components/Button/NavCardButton'; import NeedHelpTag from '../../../../../components/NeedHelpTag'; -import content from '../content.json'; -import { translations } from '../../../../../utils/locales/translations'; import Animate from '../../../../../components/Animate'; +import getContents from '../contents'; const StepPrimarySetup = () => { const { @@ -24,9 +22,8 @@ const StepPrimarySetup = () => { setCurrentOnboardingData, } = useDispatch( nfdOnboardingStore ); - const { currentStep, currentData } = useSelect( ( select ) => { + const { currentData } = useSelect( ( select ) => { return { - currentStep: select( nfdOnboardingStore ).getCurrentStep(), currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), }; @@ -42,6 +39,7 @@ const StepPrimarySetup = () => { const [ clickedIndex, changeCategory ] = useState( -1 ); const [ inputCategVal, changeInputCateg ] = useState( '' ); + const content = getContents(); const categoriesArray = content.categories; const selectedPrimaryCategoryInStore = currentData?.data?.siteType?.primary; @@ -63,11 +61,6 @@ const StepPrimarySetup = () => { setCurrentOnboardingData( currentDataCopy ); }; - /** - * Function which saves data in redux when category name is put-in via input box - * - * @param input - */ const categoryInput = ( input ) => { changeCategory( -1 ); changeInputCateg( input?.target?.value ); @@ -81,18 +74,9 @@ const StepPrimarySetup = () => {
{ return (
{ ? 'chosenPrimaryCategory ' : '' }nfd-card-category` } - onClick={ ( e ) => - handleCategoryClick( idx ) - } + onClick={ () => handleCategoryClick( idx ) } + onKeyUp={ () => handleCategoryClick( idx ) } >
{
-

or tell us here:

+

+ { content.customInputLabel } +

categoryInput( e ) } className="tellUsInput" - placeholder={ sprintf( - __( - content.placeholderSiteTypeInput, - 'wp-module-onboarding' - ), - translations( 'site' ) - ) } + placeholder={ + content.customInputPlaceholderText + } value={ inputCategVal } />
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js index fa23ac126..7385c01df 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js @@ -1,4 +1,3 @@ -import { __, sprintf } from '@wordpress/i18n'; import CommonLayout from '../../../../../components/Layouts/Common'; import NewfoldLargeCard from '../../../../../components/NewfoldLargeCard'; import { @@ -11,9 +10,8 @@ import { useEffect, useState } from '@wordpress/element'; import CardHeader from '../../../../../components/CardHeader'; import NavCardButton from '../../../../../components/Button/NavCardButton'; import NeedHelpTag from '../../../../../components/NeedHelpTag'; -import content from '../content.json'; -import { translations } from '../../../../../utils/locales/translations'; import Animate from '../../../../../components/Animate'; +import getContents from '../contents'; const StepPrimarySetup = () => { const { @@ -34,19 +32,18 @@ const StepPrimarySetup = () => { const [ clickedIndex, changeCategory ] = useState( -1 ); const [ inputCategVal, changeInputCateg ] = useState( '' ); - const { currentStep, currentData } = useSelect( ( select ) => { + const { currentData } = useSelect( ( select ) => { return { - currentStep: select( nfdOnboardingStore ).getCurrentStep(), currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), }; }, [] ); + const content = getContents(); const selectedCategoryInStore = currentData?.data?.siteType?.secondary; const categoriesArray = content.categories; const subCategories = categoriesArray[ 0 ]?.subCategories; - /**This condition fills the data in input box if the saved category isn't a subcategory from the content*/ if ( selectedCategoryInStore && ! inputCategVal && @@ -56,11 +53,6 @@ const StepPrimarySetup = () => { changeInputCateg( selectedCategoryInStore ); } - /** - * Function which saves data in redux when category name is put-in via input box - * - * @param input - */ const categoryInput = ( input ) => { changeCategory( -1 ); changeInputCateg( input?.target?.value ); @@ -69,11 +61,6 @@ const StepPrimarySetup = () => { setCurrentOnboardingData( currentDataCopy ); }; - /** - * Function which saves data in redux when category name is chosen via categories displayed - * - * @param idxOfElm - */ const handleCategoryClick = ( idxOfElm ) => { changeCategory( idxOfElm ); changeInputCateg( '' ); @@ -88,18 +75,9 @@ const StepPrimarySetup = () => {
{ return ( + tabIndex={ idx + 1 } + role="button" + onClick={ () => + handleCategoryClick( idx ) + } + onKeyUp={ () => handleCategoryClick( idx ) } className={ `${ @@ -153,29 +136,26 @@ const StepPrimarySetup = () => {
- { __( - content.tellusHereText, - 'wp-module-onboarding' - ) } + { content.customInputLabel }
categoryInput( e ) } className="tellUsInput" - placeholder={ sprintf( - __( - content.placeholderSiteTypeInput, - 'wp-module-onboarding' - ), - translations( 'site' ) - ) } + placeholder={ + content.customInputPlaceholderText + } value={ inputCategVal } />
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/content.json b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/content.json deleted file mode 100644 index c3273f974..000000000 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/content.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "cardHeading": "Help us tailor this setup to your site", - "subHeading": "ABOUT YOUR %s", - "question": "What type of %s is it?", - "buttonText": "Continue Setup", - "placeholderSiteTypeInput": "Enter to search your %s type", - "tellusHereText": "or tell us here:", - "categories": [ - { - "name": "Business", - "icon": "var(--business-icon)", - "iconWhite": "var(--business-white-icon)", - "subCategories": [ - "Fashion, apparel and accessories", - "Health and beauty", - "Electronics and computers", - "Food and drink", - "CBD and other hemp-derived products", - "Jewelry", - "Pets", - "Motherhood & Baby", - "Furniture & Home Decoration", - "Education & Learning" - ] - } - ] -} diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js new file mode 100644 index 000000000..78af08007 --- /dev/null +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js @@ -0,0 +1,60 @@ +import { __, sprintf } from '@wordpress/i18n'; + +import { translations } from '../../../../utils/locales/translations'; + +const getContents = () => { + return { + heading: sprintf( + /* translators: %s: site */ + __( + 'Help us tailor this setup to your %s', + 'wp-module-onboarding' + ), + translations( 'site' ) + ), + subheading: sprintf( + /* translators: %s: SITE */ + __( 'ABOUT YOUR %s', 'wp-module-onboarding' ), + translations( 'SITE' ) + ), + question: sprintf( + /* translators: %s: site */ + __( 'What type of %s is it?', 'wp-module-onboarding' ), + translations( 'site' ) + ), + buttonText: __( 'Continue Setup', 'wp-module-onboarding' ), + customInputPlaceholderText: sprintf( + /* translators: %s: site */ + __( 'Enter to search your %s type', 'wp-module-onboarding' ), + translations( 'site' ) + ), + customInputLabel: __( 'or tell us here:', 'wp-module-onboarding' ), + categories: [ + { + name: __( 'Business', 'wp-module-onboarding' ), + icon: 'var(--business-icon)', + iconWhite: 'var(--business-white-icon)', + subCategories: [ + __( + 'Fashion, apparel and accessories', + 'wp-module-onboarding' + ), + __( 'Health and beauty', 'wp-module-onboarding' ), + __( 'Electronics and computers', 'wp-module-onboarding' ), + __( 'Food and drink', 'wp-module-onboarding' ), + __( + 'CBD and other hemp-derived products', + 'wp-module-onboarding' + ), + __( 'Jewelry', 'wp-module-onboarding' ), + __( 'Pets', 'wp-module-onboarding' ), + __( 'Motherhood & Baby', 'wp-module-onboarding' ), + __( 'Furniture & Home Decoration', 'wp-module-onboarding' ), + __( 'Education & Learning', 'wp-module-onboarding' ), + ], + }, + ], + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/contents.js b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/contents.js new file mode 100644 index 000000000..4fb479fb7 --- /dev/null +++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/contents.js @@ -0,0 +1,78 @@ +import { __, sprintf } from '@wordpress/i18n'; + +import { translations } from '../../../../utils/locales/translations'; + +const getContents = ( brandName ) => { + return { + heading: sprintf( + /* translators: %s: website or store */ + __( 'Make your %s dreams a reality!', 'wp-module-onboarding' ), + translations( 'website' ) + ), + subheading: sprintf( + /* translators: %s: Brand */ + __( 'with WordPress and %s.', 'wp-module-onboarding' ), + brandName + ), + buttonText: __( 'Start Setup', 'wp-module-onboarding' ), + tabs: [ + { + name: 'tab1', + title: __( 'YOUR CONTENT', 'wp-module-onboarding' ), + subtitle: __( + 'Publish boldly with WordPress Blocks.', + 'wp-module-onboarding' + ), + text: sprintf( + /* translators: %s: Site */ + __( + 'Build a beautiful %s using a visual builder. Block Patterns accelerate telling your story or tending your store with professional designs.', + 'wp-module-onboarding' + ), + translations( 'site' ) + ), + imgType: 'content-img', + animationName: 'fade-in-right', + }, + { + name: 'tab2', + title: __( 'POWERFUL FEATURES', 'wp-module-onboarding' ), + subtitle: __( + 'Proven, easy-to-use solutions.', + 'wp-module-onboarding' + ), + text: sprintf( + /* translators: %s: Site */ + __( + 'Reach for your %1$s goals using proven WordPress Plugins & %2$s solutions. Send a newsletter, host a podcast, book clients, take payments and more.', + 'wp-module-onboarding' + ), + translations( 'site' ), + brandName + ), + imgType: 'features-img', + animationName: 'fade-in-up', + }, + { + name: 'tab3', + title: __( 'MODERN DESIGN', 'wp-module-onboarding' ), + subtitle: __( + 'Paint trim. Move walls. No sweat.', + 'wp-module-onboarding' + ), + text: sprintf( + /* translators: %s: site */ + __( + "Establish your %s's unique design. Use the WordPress Editor to refine over time with professionally-designed patterns, parts, templates, colors and type.", + 'wp-module-onboarding' + ), + translations( 'site' ) + ), + imgType: 'design-img', + animationName: 'fade-in-left', + }, + ], + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js index 976cb52b1..06ebcea06 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js @@ -1,41 +1,35 @@ -import { __, sprintf } from '@wordpress/i18n'; import { store as nfdOnboardingStore } from '../../../../store'; import { useLocation } from 'react-router-dom'; import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; -import {translations} from '../../../../utils/locales/translations'; import CommonLayout from '../../../../components/Layouts/Common'; import NewfoldLargeCard from '../../../../components/NewfoldLargeCard'; import CardHeader from '../../../../components/CardHeader'; import NavCardButton from '../../../../components/Button/NavCardButton'; import Tab from '../../../../components/Tab'; -import tabContent from './tabContent.json'; import TabPanelHover from '../../../../components/TabPanelHover'; -import { VIEW_NAV_GET_STARTED, SIDEBAR_LEARN_MORE } from '../../../../../constants'; +import { + VIEW_NAV_GET_STARTED, + SIDEBAR_LEARN_MORE, +} from '../../../../../constants'; +import getContents from './contents'; - -/** - * component for rendering welcome step details. - * - * @returns - */ const StepWelcome = () => { const location = useLocation(); - const { currentStep, brandName } = useSelect( - (select) => { + const { brandName } = useSelect( + ( select ) => { return { - currentStep: select(nfdOnboardingStore).getCurrentStep(), - brandName: select(nfdOnboardingStore).getNewfoldBrandName(), + brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), }; }, - [location.pathname] + [ location.pathname ] ); const { setDrawerActiveView, setSidebarActiveView, setIsDrawerSuppressed, - setIsHeaderNavigationEnabled + setIsHeaderNavigationEnabled, } = useDispatch( nfdOnboardingStore ); useEffect( () => { @@ -45,33 +39,37 @@ const StepWelcome = () => { setDrawerActiveView( VIEW_NAV_GET_STARTED ); }, [] ); + const content = getContents( brandName ); + return ( -
+
- + heading={ content.heading } + subHeading={ content.subheading } + > { + tabs={ content.tabs.map( ( tab ) => { return { - name: __( tab.name , 'wp-module-onboarding'), - title: __( tab.title , 'wp-module-onboarding'), - content: + name: tab.name, + title: tab.title, + content: ( + + ), }; - } )} + } ) } > - {( tab ) =>
{tab.content}
} - + { ( tab ) =>
{ tab.content }
} - +
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/tabContent.json b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/tabContent.json deleted file mode 100644 index cf12b6ea4..000000000 --- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/tabContent.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "tabs": [ - { - "name": "tab1", - "title": "YOUR CONTENT", - "subtitle": "Publish boldly with WordPress Blocks.", - "text": "Build a beautiful %s using a visual builder. Block Patterns accelerate telling your story or tending your store with professional designs.", - "imgType": "content-img", - "animationName": "fade-in-right" - }, - { - "name": "tab2", - "title": "POWERFUL FEATURES", - "subtitle": "Proven, easy-to-use solutions.", - "text": "Reach for your %s goals using proven WordPress Plugins & %s solutions. Send a newsletter, host a podcast, book clients, take payments and more.", - "imgType": "features-img", - "animationName": "fade-in-up" - }, - { - "name": "tab3", - "title": "MODERN DESIGN", - "subtitle": "Paint trim. Move walls. No sweat.", - "text": "Establish your %s's unique design. Use the WordPress Editor to refine over time with professionally-designed patterns, parts, templates, colors and type.", - "imgType": "design-img", - "animationName": "fade-in-left" - } - ] -} \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/TopPriority/contents.js b/src/OnboardingSPA/pages/Steps/TopPriority/contents.js new file mode 100644 index 000000000..bf0b6333c --- /dev/null +++ b/src/OnboardingSPA/pages/Steps/TopPriority/contents.js @@ -0,0 +1,39 @@ +import { __ } from '@wordpress/i18n'; + +const getContents = () => { + return { + heading: __( 'Tell us your top priority', 'wp-module-onboarding' ), + subheading: __( + "We'll prioritize getting you there.", + 'wp-module-onboarding' + ), + options: [ + { + icon: '--nfd-publish-icon', + title: __( 'Publishing', 'wp-module-onboarding' ), + desc: __( + 'From blogs, to newsletters, to podcasts and videos, we help the web find your content.', + 'wp-module-onboarding' + ), + }, + { + icon: '--nfd-selling-icon', + title: __( 'Selling', 'wp-module-onboarding' ), + desc: __( + "Startup or seasoned business, drop-shipping or downloads, we've got ecommerce covered.", + 'wp-module-onboarding' + ), + }, + { + icon: '--nfd-design-icon', + title: __( 'Designing', 'wp-module-onboarding' ), + desc: __( + 'With smart style presets and powerful options, we help your site look and feel polished.', + 'wp-module-onboarding' + ), + }, + ], + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/pages/Steps/TopPriority/index.js b/src/OnboardingSPA/pages/Steps/TopPriority/index.js index 29d59ec5f..186f01b1b 100644 --- a/src/OnboardingSPA/pages/Steps/TopPriority/index.js +++ b/src/OnboardingSPA/pages/Steps/TopPriority/index.js @@ -1,5 +1,4 @@ import { __ } from '@wordpress/i18n'; -import { useNavigate } from 'react-router-dom'; import { useViewportMatch } from '@wordpress/compose'; import { useEffect, useState } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; @@ -10,33 +9,15 @@ import { store as nfdOnboardingStore } from '../../../store'; import CommonLayout from '../../../components/Layouts/Common'; import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; import SelectableCardList from '../../../components/SelectableCardList/selectable-card-list'; +import getContents from './contents'; -const StepTopPriority = ( props ) => { +const StepTopPriority = () => { const priorityTypes = { 0: 'publishing', 1: 'selling', 2: 'designing', }; - const priorities = [ - { - icon: '--nfd-publish-icon', - title: 'Publishing', - desc: 'From blogs, to newsletters, to podcasts and videos, we help the web find your content.', - }, - { - icon: '--nfd-selling-icon', - title: 'Selling', - desc: "Startup or seasoned business, drop-shipping or downloads, we've got ecommerce covered.", - }, - { - icon: '--nfd-design-icon', - title: 'Designing', - desc: 'With smart style presets and powerful options, we help your site look and feel polished.', - }, - ]; - - const navigate = useNavigate(); const [ selected, setSelected ] = useState( 0 ); const [ isLoaded, setisLoaded ] = useState( false ); const isLargeViewport = useViewportMatch( 'medium' ); @@ -47,17 +28,17 @@ const StepTopPriority = ( props ) => { setSidebarActiveView, setCurrentOnboardingData, setIsDrawerSuppressed, - setIsHeaderNavigationEnabled + setIsHeaderNavigationEnabled, } = useDispatch( nfdOnboardingStore ); - const { currentStep, currentData } = useSelect( ( select ) => { + const { currentData } = useSelect( ( select ) => { return { - currentStep: select(nfdOnboardingStore).getCurrentStep(), - currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), }; }, [] ); - const getKey = ( priorityTypes, value ) => { + const getKey = ( value ) => { return Object?.keys( priorityTypes ).find( ( key ) => priorityTypes[ key ] === value ); @@ -68,7 +49,7 @@ const StepTopPriority = ( props ) => { setIsDrawerOpened( true ); } setSidebarActiveView( SIDEBAR_LEARN_MORE ); - setIsDrawerSuppressed( false ); + setIsDrawerSuppressed( false ); setDrawerActiveView( VIEW_NAV_PRIMARY ); setIsHeaderNavigationEnabled( true ); }, [] ); @@ -77,8 +58,7 @@ const StepTopPriority = ( props ) => { async function setInitialData() { if ( currentData ) { const val = await currentData?.data.topPriority.priority1; - if ( val != '' ) - setSelected( parseInt( getKey( priorityTypes, val ) ) ); + if ( val !== '' ) setSelected( parseInt( getKey( val ) ) ); else { currentData.data.topPriority.priority1 = priorityTypes[ selected ]; @@ -97,12 +77,16 @@ const StepTopPriority = ( props ) => { } }, [ selected ] ); + const content = getContents(); + return ( + title={ content.heading } + subtitle={ content.subheading } + /> @@ -112,7 +96,6 @@ const StepTopPriority = ( props ) => { "Where would you like to start? We'll start ", 'wp-module-onboarding' ) } -

{ __( 'there and then move into next steps.', 'wp-module-onboarding' diff --git a/src/OnboardingSPA/pages/Steps/TopPriority/stylesheet.scss b/src/OnboardingSPA/pages/Steps/TopPriority/stylesheet.scss index db1b5b947..1fe88984c 100644 --- a/src/OnboardingSPA/pages/Steps/TopPriority/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/TopPriority/stylesheet.scss @@ -1,5 +1,9 @@ .info-button-top-priority { - margin: 16px; - font-weight: 500; - font-style: italic; + margin: 16px; + font-weight: 500; + font-style: italic; +} + +.info-top-priority { + width: 250px; } diff --git a/src/OnboardingSPA/styles/_interface.scss b/src/OnboardingSPA/styles/_interface.scss index fa941cc12..9b854da5a 100644 --- a/src/OnboardingSPA/styles/_interface.scss +++ b/src/OnboardingSPA/styles/_interface.scss @@ -33,4 +33,5 @@ body { --nfd-onboarding-drawer-fg: var(--nfd-onboarding-light); --nfd-onboarding-footer-fg: var(--nfd-onboarding-dark); --nfd-onboarding-footer-bg: var(--nfd-onboarding-light); + --nfd-onboarding-link-hover-blue: #135e96; } From 531f3eff78dd3aae248886b5006df720c6d7cce3 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Fri, 5 May 2023 13:11:39 +0530 Subject: [PATCH 2/2] remove unused css --- src/OnboardingSPA/pages/Steps/TopPriority/stylesheet.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/TopPriority/stylesheet.scss b/src/OnboardingSPA/pages/Steps/TopPriority/stylesheet.scss index 1fe88984c..cd4143e14 100644 --- a/src/OnboardingSPA/pages/Steps/TopPriority/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/TopPriority/stylesheet.scss @@ -1,9 +1,3 @@ -.info-button-top-priority { - margin: 16px; - font-weight: 500; - font-style: italic; -} - .info-top-priority { width: 250px; }