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/data/routes/default-flow.js b/src/OnboardingSPA/data/routes/default-flow.js index 14ae4dee8..21ea8628e 100644 --- a/src/OnboardingSPA/data/routes/default-flow.js +++ b/src/OnboardingSPA/data/routes/default-flow.js @@ -189,12 +189,6 @@ export const steps = [ { path: '/wp-setup/step/get-started/welcome', title: __( 'Welcome', 'wp-module-onboarding' ), - heading: sprintf( - /* translators: %s: website or store */ - __( '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' @@ -212,18 +206,6 @@ export const steps = [ { path: '/wp-setup/step/get-started/experience', title: __( 'WordPress Experience', 'wp-module-onboarding' ), - heading: sprintf( - /* translators: %s: website or store */ - __( - '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,27 +227,6 @@ export const steps = [ __( 'Primary %s Setup', 'wp-module-onboarding' ), translations( 'Site' ) ), - heading: sprintf( - /* translators: %s: website or store */ - __( - 'Help us tailor this setup to your %s', - 'wp-module-onboarding' - ), - translations( 'site' ) - ), - subheading: sprintf( - /* translators: %s: website or store */ - __( 'What type of %s is it?', 'wp-module-onboarding' ), - translations( 'site' ) - ), - description: sprintf( - /* translators: %s: website or store */ - __( - "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,27 +245,6 @@ export const steps = [ __( 'Secondary %s Setup', 'wp-module-onboarding' ), translations( 'Site' ) ), - heading: sprintf( - /* translators: %s: website or store */ - __( - 'Help us tailor this setup to your %s', - 'wp-module-onboarding' - ), - translations( 'site' ) - ), - subheading: sprintf( - /* translators: %s: website or store */ - __( 'What type of %s is it?', 'wp-module-onboarding' ), - translations( 'site' ) - ), - description: sprintf( - /* translators: %s: website or store */ - __( - "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, @@ -361,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' ), @@ -591,9 +514,6 @@ export const conditionalSteps = { }, }; -/** - * Top-level registration of all routes. - */ export const routes = [ ...pages, ...steps ]; /** 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 16f224935..32d07ab69 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js @@ -23,7 +23,6 @@ const StepPrimarySetup = () => { setCurrentOnboardingData, } = useDispatch( nfdOnboardingStore ); - const contents = getContents(); const { currentData } = useSelect( ( select ) => { return { currentData: @@ -43,6 +42,8 @@ const StepPrimarySetup = () => { const [ siteClassification, setSiteClassification ] = useState(); const [ primaryCategory, setPrimaryCategory ] = useState( '' ); + const content = getContents(); + /** * Function which fetches the Site Classifications * @@ -144,9 +145,9 @@ const StepPrimarySetup = () => {
@@ -163,12 +164,12 @@ const StepPrimarySetup = () => { categoryInput( e?.target?.value ) } className="nfd-setup-primary-custom__tellus-input" - placeholder={ contents.placeholderSiteTypeInput } + placeholder={ content.customInputPlaceholderText } value={ custom ? primaryCategory : '' } />
- + diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js index c9da6cd4d..d3a1ca259 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js @@ -31,7 +31,7 @@ const StepPrimarySetup = () => { getSiteClassificationData(); }, [] ); - const contents = getContents(); + const content = getContents(); const [ custom, setCustom ] = useState( false ); const [ siteClassification, setSiteClassification ] = useState(); const [ primaryTypesList, setPrimaryTypeList ] = useState(); @@ -199,9 +199,9 @@ const StepPrimarySetup = () => {
@@ -276,7 +276,7 @@ const StepPrimarySetup = () => {
- { contents.tellusHereText } + { content.customInputLabel }
{ } className="nfd-setup-primary-custom__tellus-input" placeholder={ - contents.placeholderSiteTypeInput + content.customInputPlaceholderText } value={ custom ? secondaryCategory : '' } />
- + diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js index 343c43159..ce3999914 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js @@ -4,27 +4,31 @@ import { translations } from '../../../../utils/locales/translations'; const getContents = () => { return { - cardHeading: __( - 'Help us tailor this setup to your site', - 'wp-module-onboarding' + heading: sprintf( + /* translators: %s: site */ + __( + 'Help us tailor this setup to your %s', + 'wp-module-onboarding' + ), + translations( 'site' ) ), - subHeading: sprintf( - /* translators: 1: site */ + subheading: sprintf( + /* translators: %s: SITE */ __( 'ABOUT YOUR %s', 'wp-module-onboarding' ), translations( 'SITE' ) ), question: sprintf( - /* translators: 1: site */ + /* translators: %s: site */ __( 'What type of %s is it?', 'wp-module-onboarding' ), translations( 'site' ) ), buttonText: __( 'Continue Setup', 'wp-module-onboarding' ), - placeholderSiteTypeInput: sprintf( - /* translators: 1: site */ + customInputPlaceholderText: sprintf( + /* translators: %s: site */ __( 'Enter to search your %s type', 'wp-module-onboarding' ), translations( 'site' ) ), - tellusHereText: __( 'or tell us here:', 'wp-module-onboarding' ), + customInputLabel: __( 'or tell us here:', 'wp-module-onboarding' ), }; }; 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..cd4143e14 100644 --- a/src/OnboardingSPA/pages/Steps/TopPriority/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/TopPriority/stylesheet.scss @@ -1,5 +1,3 @@ -.info-button-top-priority { - margin: 16px; - font-weight: 500; - font-style: italic; +.info-top-priority { + width: 250px; }