From cf6af069a65b76ee574376c65fc648d2573fd5b2 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Mon, 19 Dec 2022 19:10:54 +0530 Subject: [PATCH 01/13] Added Radio Control Skeleton --- .../RadioControlWithSkeleton/index.js | 62 +++++++++++++++++++ .../pages/Steps/Ecommerce/StepTax/index.js | 48 +++++++------- .../GetStarted/GetStartedExperience/index.js | 25 +++----- 3 files changed, 93 insertions(+), 42 deletions(-) create mode 100644 src/OnboardingSPA/components/RadioControlWithSkeleton/index.js diff --git a/src/OnboardingSPA/components/RadioControlWithSkeleton/index.js b/src/OnboardingSPA/components/RadioControlWithSkeleton/index.js new file mode 100644 index 000000000..2f6b4b48d --- /dev/null +++ b/src/OnboardingSPA/components/RadioControlWithSkeleton/index.js @@ -0,0 +1,62 @@ +import { __ } from '@wordpress/i18n'; +import { RadioControl } from '@wordpress/components'; +import { useState, useEffect } from '@wordpress/element'; + +/** + * Renders Skeletons for Radio Control. + * + * @property {number} data The options to be renedered + * @property {number} count The number of Live Previews to be shown + * @property {number} watch The variable to be awaited for + * @property {string} callback The Render function in parent to be called + * @property {string} className The class name for the Live Preview + * + */ +const RadioControlWithSkeleton = ({ + data, + count, + watch, + selected, + callback, + className, +}) => { + + const MAX_ANIMATION_TIME = 600000; + const [rerender, doRerender] = useState(0); + + useEffect(() => doRerender(1), [watch, selected]); + + const buildDummyPreviews = () => { + return
Boooom
; + }; + + const buildRealPreview = () => { + return ( + { + return { + label: __( + option.content, + 'wp-module-onboarding' + ), + value: __( + option.value, + 'wp-module-onboarding' + ), + }; + })} + onChange={(value) => callback(value)} + /> + ); + }; + + return !watch ? buildDummyPreviews() : + <> + {watch ?
{rerender}
: null} + {buildRealPreview()} + ; +}; + +export default RadioControlWithSkeleton; diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js index 8259497d1..397e53db5 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js @@ -13,6 +13,7 @@ import { EcommerceStateHandler } from '../../../../components/StateHandlers'; import { store as nfdOnboardingStore } from '../../../../store'; import content from '../content.json'; import { useWPSettings } from '../useWPSettings'; +import RadioControlWithSkeleton from '../../../../components/RadioControlWithSkeleton'; function createReverseLookup(state) { return (option) => @@ -74,6 +75,22 @@ const StepTax = () => { navigate('/ecommerce/step/products'); }; + const selectOption = (value) => { + let selectedOption = content.stepTaxOptions.find( + (option) => option.value === value + ); + setCurrentOnboardingData({ + storeDetails: { + ...currentData.storeDetails, + tax: { + ...selectedOption.data, + option: selectedOption.value, + isStoreDetailsFilled: tax?.isStoreDetailsFilled + }, + }, + }); + } + return ( @@ -85,33 +102,14 @@ const StepTax = () => { subHeading={__(content.stepTaxSubHeading, 'wp-module-onboarding')} question={__(content.question, 'wp-module-onboarding')} /> - {settings === null &&

Loading...

} - { - return { - label: __(option.content, 'wp-module-onboarding'), - value: option.value, - }; - })} - onChange={(value) => { - let selectedOption = content.stepTaxOptions.find( - (option) => option.value === value - ); - setCurrentOnboardingData({ - storeDetails: { - ...currentData.storeDetails, - tax: { - ...selectedOption.data, - option: selectedOption.value, - isStoreDetailsFilled: tax?.isStoreDetailsFilled - }, - }, - }); - }} - /> + data={content.stepTaxOptions} + callback={(value) => selectOption(value)} /> + - selectOption(value)} /> - - - - - - + + + ); }; diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/contents.js index a18669248..d03359e3c 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/contents.js @@ -4,7 +4,6 @@ import { translations } from '../../../../../../utils/locales/translations'; import { home } from '@wordpress/icons'; const getContents = ( techSupportLink, fullServiceCreativeTeamLink ) => { - return { introduction: { heading: __( 'WordPress Experience', 'wp-module-onboarding' ), @@ -24,10 +23,7 @@ const getContents = ( techSupportLink, fullServiceCreativeTeamLink ) => { information: { headingWithDescriptions: [ { - heading: __( - 'Why we ask', - 'wp-module-onboarding' - ), + heading: __( 'Why we ask', 'wp-module-onboarding' ), description: __( `We use this to help offer the best WordPress setup, features and suggestions for your site.`, 'wp-module-onboarding' diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js index e903ab9c5..cb7537e79 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js @@ -34,13 +34,18 @@ const StepIntroPanel = lazy( () => ); const LearnMore = () => { - - const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { - return { - techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), - }; - } ); + const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( + ( select ) => { + return { + techSupportLink: + select( nfdOnboardingStore ).getTechSupportUrl(), + fullServiceCreativeTeamLink: + select( + nfdOnboardingStore + ).getfullServiceCreativeTeamUrl(), + }; + } + ); const content = getContents( techSupportLink, fullServiceCreativeTeamLink ); @@ -61,7 +66,7 @@ const LearnMore = () => { - ( window.open( content.help.fullService.link, '_blank') ) + window.open( content.help.fullService.link, '_blank' ) } /> { question={ currentStep.subheading } /> - setWpComfortLevel(value)}/> + + { + return { + label: __( + option.content, + 'wp-module-onboarding' + ), + value: __( + option.value, + 'wp-module-onboarding' + ), + }; + } ) } + onChange={ ( value ) => setWpComfortLevel( value ) } + /> + Date: Mon, 26 Dec 2022 17:12:39 +0530 Subject: [PATCH 09/13] Revert "Added State Handler" This reverts commit 91bdda1b05b5984a5f3a702bccb73104d7fedfa5. --- .../RadioControlSkeleton/index.js | 20 --- .../RadioControl/RadioControlState/index.js | 27 --- .../components/RadioControl/index.js | 2 - .../RadioControlWithSkeleton/index.js | 68 ++++++++ .../stylesheet.scss | 0 .../pages/Steps/Ecommerce/StepTax/index.js | 161 +++++++----------- .../GetStarted/GetStartedExperience/index.js | 32 +--- src/OnboardingSPA/styles/app.scss | 2 +- 8 files changed, 138 insertions(+), 174 deletions(-) delete mode 100644 src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js delete mode 100644 src/OnboardingSPA/components/RadioControl/RadioControlState/index.js delete mode 100644 src/OnboardingSPA/components/RadioControl/index.js create mode 100644 src/OnboardingSPA/components/RadioControlWithSkeleton/index.js rename src/OnboardingSPA/components/{RadioControl/RadioControlSkeleton => RadioControlWithSkeleton}/stylesheet.scss (100%) diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js deleted file mode 100644 index 944938f11..000000000 --- a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Renders Skeletons for Radio Control. - * - * @param {number} data The options to be renedered - * - */ -const RadioControlSkeleton = ( { data } ) => { - const buildDummyRadioControls = () => { - const customItems = []; - - for ( let idx = 0; idx < data.length; idx++ ) - customItems.push(
); - - return
{ customItems }
; - }; - - return buildDummyRadioControls(); -}; - -export default RadioControlSkeleton; diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js deleted file mode 100644 index 73466b071..000000000 --- a/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js +++ /dev/null @@ -1,27 +0,0 @@ -import { useState, useEffect } from '@wordpress/element'; -import RadioControlSkeleton from '../RadioControlSkeleton'; - -/** - * A State Handler to manage Radio Control - * - * @param {number} data The options to be renedered. - * @param {string} children The children to be rendered out. - * @param {number} watch The variable to be awaited for to be fetched. - * - */ -const RadioControlState = ( { data, watch, children } ) => { - const [ rerender, doRerender ] = useState( 0 ); - - useEffect( () => doRerender( 1 ), [ watch ] ); - - return ! watch ? ( - - ) : ( - <> - {
{ rerender }
} - { children } - - ); -}; - -export default RadioControlState; diff --git a/src/OnboardingSPA/components/RadioControl/index.js b/src/OnboardingSPA/components/RadioControl/index.js deleted file mode 100644 index 7d22b59a8..000000000 --- a/src/OnboardingSPA/components/RadioControl/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as RadioCtrlSkeleton } from './RadioControlSkeleton'; -export { default as RadioCtrlStateHandler } from './RadioControlState'; diff --git a/src/OnboardingSPA/components/RadioControlWithSkeleton/index.js b/src/OnboardingSPA/components/RadioControlWithSkeleton/index.js new file mode 100644 index 000000000..7859dc781 --- /dev/null +++ b/src/OnboardingSPA/components/RadioControlWithSkeleton/index.js @@ -0,0 +1,68 @@ +import { __ } from '@wordpress/i18n'; +import { RadioControl } from '@wordpress/components'; +import { useState, useEffect } from '@wordpress/element'; + +/** + * Renders Skeletons for Radio Control. + * + * @property {number} data The options to be renedered + * @property {number} watch The variable to be awaited for + * @property {string} callback The Render function in parent to be called + * @property {string} className The class name for the Live Preview + * + */ +const RadioControlWithSkeleton = ({ + data, + watch, + selected, + callback, + className, +}) => { + + const [rerender, doRerender] = useState(0); + + useEffect(() => doRerender(1), [watch, selected]); + + const buildDummyPreviews = () => { + var customItems = []; + + for (let idx = 0; idx < data.length; idx++) + customItems.push(
); + + return ( +
+ {customItems} +
+ ); + }; + + const buildRealPreview = () => { + return ( + { + return { + label: __( + option.content, + 'wp-module-onboarding' + ), + value: __( + option.value, + 'wp-module-onboarding' + ), + }; + })} + onChange={(value) => callback(value)} + /> + ); + }; + + return !watch ? buildDummyPreviews() : + <> + {watch ?
{rerender}
: null} + {buildRealPreview()} + ; +}; + +export default RadioControlWithSkeleton; diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss b/src/OnboardingSPA/components/RadioControlWithSkeleton/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss rename to src/OnboardingSPA/components/RadioControlWithSkeleton/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js index 0bfe39445..67ce0708e 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js @@ -1,13 +1,10 @@ import { RadioControl } from '@wordpress/components'; import { useViewportMatch } from '@wordpress/compose'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch,useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { useNavigate } from 'react-router-dom'; -import { - SIDEBAR_LEARN_MORE, - VIEW_NAV_ECOMMERCE_STORE_INFO, -} from '../../../../../constants'; +import { SIDEBAR_LEARN_MORE, VIEW_NAV_ECOMMERCE_STORE_INFO } from '../../../../../constants'; import CardHeader from '../../../../components/CardHeader'; import CommonLayout from '../../../../components/Layouts/Common'; import NeedHelpTag from '../../../../components/NeedHelpTag'; @@ -16,13 +13,11 @@ import { EcommerceStateHandler } from '../../../../components/StateHandlers'; import { store as nfdOnboardingStore } from '../../../../store'; import content from '../content.json'; import { useWPSettings } from '../useWPSettings'; -import { RadioCtrlStateHandler } from '../../../../components/RadioControl'; +import RadioControlWithSkeleton from '../../../../components/RadioControlWithSkeleton'; -function createReverseLookup( state ) { - return ( option ) => - Object.entries( option.data ).every( - ( [ key, value ] ) => state?.[ key ] === value - ); +function createReverseLookup(state) { + return (option) => + Object.entries(option.data).every(([key, value]) => state?.[key] === value); } const StepTax = () => { @@ -33,44 +28,43 @@ const StepTax = () => { setIsDrawerSuppressed, setSidebarActiveView, setCurrentOnboardingData, - } = useDispatch( nfdOnboardingStore ); + } = useDispatch(nfdOnboardingStore); const navigate = useNavigate(); - const currentData = useSelect( ( select ) => - select( nfdOnboardingStore ).getCurrentOnboardingData() + let currentData = useSelect((select) => + select(nfdOnboardingStore).getCurrentOnboardingData() ); - useEffect( () => { - if ( isLargeViewport ) { - setIsDrawerOpened( true ); + useEffect(() => { + if (isLargeViewport) { + setIsDrawerOpened(true); } setSidebarActiveView( SIDEBAR_LEARN_MORE ); - setIsDrawerSuppressed( false ); - setDrawerActiveView( VIEW_NAV_ECOMMERCE_STORE_INFO ); - }, [] ); + setIsDrawerSuppressed(false); + setDrawerActiveView(VIEW_NAV_ECOMMERCE_STORE_INFO); + }, []); const settings = useWPSettings(); - useEffect( () => { - if ( settings !== null && currentData.storeDetails.tax === undefined ) { - const selectedTaxOption = content.stepTaxOptions.find( - createReverseLookup( settings ) + useEffect(() => { + if (settings !== null && currentData.storeDetails.tax === undefined) { + let selectedTaxOption = content.stepTaxOptions.find( + createReverseLookup(settings) ); - const tax = selectedTaxOption?.data ?? {}; - setCurrentOnboardingData( { + let tax = selectedTaxOption?.data ?? {}; + setCurrentOnboardingData({ storeDetails: { ...currentData.storeDetails, tax: { - ...( currentData.storeDetails.tax ?? {} ), + ...(currentData.storeDetails.tax ?? {}), ...tax, option: selectedTaxOption?.value, - isStoreDetailsFilled: - settings.woocommerce_store_postcode !== null, + isStoreDetailsFilled: settings.woocommerce_store_postcode !== null, }, }, - } ); + }); } - }, [ settings, currentData.storeDetails ] ); - const { tax } = currentData.storeDetails; + }, [settings, currentData.storeDetails]); + let { tax } = currentData.storeDetails; const handleButtonClick = () => { //Commented as auto-calculate tax option is removed for MMP // let isAddressNeeded = tax?.option === "1" && !tax.isStoreDetailsFilled; @@ -78,86 +72,55 @@ const StepTax = () => { // isAddressNeeded ? '/ecommerce/step/address' : '/ecommerce/step/products' // ); - navigate( '/ecommerce/step/products' ); + navigate('/ecommerce/step/products'); }; - const selectOption = ( value ) => { - const selectedOption = content.stepTaxOptions.find( - ( option ) => option.value === value + const selectOption = (value) => { + let selectedOption = content.stepTaxOptions.find( + (option) => option.value === value ); - setCurrentOnboardingData( { + setCurrentOnboardingData({ storeDetails: { ...currentData.storeDetails, tax: { ...selectedOption.data, option: selectedOption.value, - isStoreDetailsFilled: tax?.isStoreDetailsFilled, + isStoreDetailsFilled: tax?.isStoreDetailsFilled }, }, - } ); - }; + }); + } return ( - - - -
-
- -
- - { - return { - label: __( - option.content, - 'wp-module-onboarding' - ), - value: __( - option.value, - 'wp-module-onboarding' - ), - }; - } - ) } - onChange={ ( value ) => selectOption( value ) } - /> - - - + + + +
+
+
- - - + selectOption(value)} /> + + +
+ + + ); }; diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js index 0ff86564b..9f89bf88c 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js @@ -13,7 +13,7 @@ import { RadioControl } from '@wordpress/components'; import { useState, useEffect } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { RadioCtrlStateHandler } from '../../../../components/RadioControl'; +import RadioControlWithSkeleton from '../../../../components/RadioControlWithSkeleton'; /** * Get Started: WordPress Experience Comfort Level. @@ -81,30 +81,12 @@ const GetStartedExperience = () => { question={ currentStep.subheading } />
- - { - return { - label: __( - option.content, - 'wp-module-onboarding' - ), - value: __( - option.value, - 'wp-module-onboarding' - ), - }; - } ) } - onChange={ ( value ) => setWpComfortLevel( value ) } - /> - + setWpComfortLevel(value)}/> Date: Mon, 26 Dec 2022 17:13:15 +0530 Subject: [PATCH 10/13] Revert "Added State Handler" This reverts commit 91bdda1b05b5984a5f3a702bccb73104d7fedfa5. --- .../StepTax/Sidebar/LearnMore/contents.js | 10 +++---- .../StepTax/Sidebar/LearnMore/index.js | 27 +++++++------------ .../Sidebar/LearnMore/contents.js | 6 ++++- .../Sidebar/LearnMore/index.js | 21 ++++++--------- 4 files changed, 26 insertions(+), 38 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js index e1060349a..97243eda6 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js @@ -3,17 +3,15 @@ import { __, sprintf } from '@wordpress/i18n'; import { translations } from '../../../../../../utils/locales/translations'; import { institution } from '@wordpress/icons'; -const getContents = ( - brandName, - techSupportLink, - fullServiceCreativeTeamLink -) => { +const getContents = ( brandName, techSupportLink, fullServiceCreativeTeamLink ) => { return { introduction: { heading: __( 'Tax Info', 'wp-module-onboarding' ), subheading: sprintf( /* translators: 1: Site 2: Brand 3: Site */ - __( 'A %s that does taxes in one click. That’s pretty novel.' ), + __( + 'A %s that does taxes in one click. That’s pretty novel.' + ), translations( 'site' ), brandName, translations( 'Site' ) diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js index f6bb548a1..97db95436 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js @@ -34,24 +34,15 @@ const StepIntroPanel = lazy( () => ); const LearnMore = () => { - const { brandName, techSupportLink, fullServiceCreativeTeamLink } = - useSelect( ( select ) => { - return { - brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), - techSupportLink: - select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: - select( - nfdOnboardingStore - ).getfullServiceCreativeTeamUrl(), - }; - } ); + const { brandName, techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { + return { + brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), + techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), + fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + }; + } ); - const content = getContents( - brandName, - techSupportLink, - fullServiceCreativeTeamLink - ); + const content = getContents( brandName, techSupportLink, fullServiceCreativeTeamLink ); return (
@@ -70,7 +61,7 @@ const LearnMore = () => { - window.open( content.help.fullService.link, '_blank' ) + ( window.open( content.help.fullService.link, '_blank') ) } /> { + return { introduction: { heading: __( 'WordPress Experience', 'wp-module-onboarding' ), @@ -23,7 +24,10 @@ const getContents = ( techSupportLink, fullServiceCreativeTeamLink ) => { information: { headingWithDescriptions: [ { - heading: __( 'Why we ask', 'wp-module-onboarding' ), + heading: __( + 'Why we ask', + 'wp-module-onboarding' + ), description: __( `We use this to help offer the best WordPress setup, features and suggestions for your site.`, 'wp-module-onboarding' diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js index cb7537e79..e903ab9c5 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js @@ -34,18 +34,13 @@ const StepIntroPanel = lazy( () => ); const LearnMore = () => { - const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( - ( select ) => { - return { - techSupportLink: - select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: - select( - nfdOnboardingStore - ).getfullServiceCreativeTeamUrl(), - }; - } - ); + + const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { + return { + techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), + fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + }; + } ); const content = getContents( techSupportLink, fullServiceCreativeTeamLink ); @@ -66,7 +61,7 @@ const LearnMore = () => { - window.open( content.help.fullService.link, '_blank' ) + ( window.open( content.help.fullService.link, '_blank') ) } /> Date: Mon, 26 Dec 2022 17:14:03 +0530 Subject: [PATCH 11/13] Revert "Revert "Added State Handler"" This reverts commit 3f80b38e4a4837a06e0819409449c0cdfdc60991. --- .../StepTax/Sidebar/LearnMore/contents.js | 10 ++++--- .../StepTax/Sidebar/LearnMore/index.js | 27 ++++++++++++------- .../Sidebar/LearnMore/contents.js | 6 +---- .../Sidebar/LearnMore/index.js | 21 +++++++++------ 4 files changed, 38 insertions(+), 26 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js index 97243eda6..e1060349a 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js @@ -3,15 +3,17 @@ import { __, sprintf } from '@wordpress/i18n'; import { translations } from '../../../../../../utils/locales/translations'; import { institution } from '@wordpress/icons'; -const getContents = ( brandName, techSupportLink, fullServiceCreativeTeamLink ) => { +const getContents = ( + brandName, + techSupportLink, + fullServiceCreativeTeamLink +) => { return { introduction: { heading: __( 'Tax Info', 'wp-module-onboarding' ), subheading: sprintf( /* translators: 1: Site 2: Brand 3: Site */ - __( - 'A %s that does taxes in one click. That’s pretty novel.' - ), + __( 'A %s that does taxes in one click. That’s pretty novel.' ), translations( 'site' ), brandName, translations( 'Site' ) diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js index 97db95436..f6bb548a1 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js @@ -34,15 +34,24 @@ const StepIntroPanel = lazy( () => ); const LearnMore = () => { - const { brandName, techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { - return { - brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), - techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), - }; - } ); + const { brandName, techSupportLink, fullServiceCreativeTeamLink } = + useSelect( ( select ) => { + return { + brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), + techSupportLink: + select( nfdOnboardingStore ).getTechSupportUrl(), + fullServiceCreativeTeamLink: + select( + nfdOnboardingStore + ).getfullServiceCreativeTeamUrl(), + }; + } ); - const content = getContents( brandName, techSupportLink, fullServiceCreativeTeamLink ); + const content = getContents( + brandName, + techSupportLink, + fullServiceCreativeTeamLink + ); return (
@@ -61,7 +70,7 @@ const LearnMore = () => { - ( window.open( content.help.fullService.link, '_blank') ) + window.open( content.help.fullService.link, '_blank' ) } /> { - return { introduction: { heading: __( 'WordPress Experience', 'wp-module-onboarding' ), @@ -24,10 +23,7 @@ const getContents = ( techSupportLink, fullServiceCreativeTeamLink ) => { information: { headingWithDescriptions: [ { - heading: __( - 'Why we ask', - 'wp-module-onboarding' - ), + heading: __( 'Why we ask', 'wp-module-onboarding' ), description: __( `We use this to help offer the best WordPress setup, features and suggestions for your site.`, 'wp-module-onboarding' diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js index e903ab9c5..cb7537e79 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js @@ -34,13 +34,18 @@ const StepIntroPanel = lazy( () => ); const LearnMore = () => { - - const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { - return { - techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), - }; - } ); + const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( + ( select ) => { + return { + techSupportLink: + select( nfdOnboardingStore ).getTechSupportUrl(), + fullServiceCreativeTeamLink: + select( + nfdOnboardingStore + ).getfullServiceCreativeTeamUrl(), + }; + } + ); const content = getContents( techSupportLink, fullServiceCreativeTeamLink ); @@ -61,7 +66,7 @@ const LearnMore = () => { - ( window.open( content.help.fullService.link, '_blank') ) + window.open( content.help.fullService.link, '_blank' ) } /> Date: Mon, 26 Dec 2022 17:28:32 +0530 Subject: [PATCH 12/13] Added State Handler Again --- .../RadioControlSkeleton/index.js | 20 ++++++ .../RadioControlSkeleton}/stylesheet.scss | 0 .../RadioControl/RadioControlState/index.js | 27 ++++++++ .../components/RadioControl/index.js | 2 + .../RadioControlWithSkeleton/index.js | 68 ------------------- .../pages/Steps/Ecommerce/StepTax/index.js | 34 ++++++++-- .../GetStarted/GetStartedExperience/index.js | 34 ++++++++-- src/OnboardingSPA/styles/app.scss | 2 +- 8 files changed, 104 insertions(+), 83 deletions(-) create mode 100644 src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js rename src/OnboardingSPA/components/{RadioControlWithSkeleton => RadioControl/RadioControlSkeleton}/stylesheet.scss (100%) create mode 100644 src/OnboardingSPA/components/RadioControl/RadioControlState/index.js create mode 100644 src/OnboardingSPA/components/RadioControl/index.js delete mode 100644 src/OnboardingSPA/components/RadioControlWithSkeleton/index.js diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js new file mode 100644 index 000000000..9e7a26695 --- /dev/null +++ b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js @@ -0,0 +1,20 @@ +/** + * Renders Skeletons for Radio Control. + * + * @param {number} data The options to be renedered + * + */ +const RadioControlSkeleton = ({ data }) => { + const buildDummyRadioControls = () => { + const customItems = []; + + for (let idx = 0; idx < data.length; idx++) + customItems.push(
); + + return
{customItems}
; + }; + + return buildDummyRadioControls(); +}; + +export default RadioControlSkeleton; \ No newline at end of file diff --git a/src/OnboardingSPA/components/RadioControlWithSkeleton/stylesheet.scss b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/components/RadioControlWithSkeleton/stylesheet.scss rename to src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js new file mode 100644 index 000000000..f20ea6190 --- /dev/null +++ b/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js @@ -0,0 +1,27 @@ +import { useState, useEffect } from '@wordpress/element'; +import RadioControlSkeleton from '../RadioControlSkeleton'; + +/** + * A State Handler to manage Radio Control + * + * @param {number} data The options to be renedered. + * @param {string} children The children to be rendered out. + * @param {number} watch The variable to be awaited for to be fetched. + * + */ +const RadioControlState = ({ data, watch, children }) => { + const [rerender, doRerender] = useState(0); + + useEffect(() => doRerender(1), [watch]); + + return !watch ? ( + + ) : ( + <> + {
{rerender}
} + {children} + + ); +}; + +export default RadioControlState; \ No newline at end of file diff --git a/src/OnboardingSPA/components/RadioControl/index.js b/src/OnboardingSPA/components/RadioControl/index.js new file mode 100644 index 000000000..af8cae2e2 --- /dev/null +++ b/src/OnboardingSPA/components/RadioControl/index.js @@ -0,0 +1,2 @@ +export { default as RadioCtrlSkeleton } from './RadioControlSkeleton'; +export { default as RadioCtrlStateHandler } from './RadioControlState'; \ No newline at end of file diff --git a/src/OnboardingSPA/components/RadioControlWithSkeleton/index.js b/src/OnboardingSPA/components/RadioControlWithSkeleton/index.js deleted file mode 100644 index 7859dc781..000000000 --- a/src/OnboardingSPA/components/RadioControlWithSkeleton/index.js +++ /dev/null @@ -1,68 +0,0 @@ -import { __ } from '@wordpress/i18n'; -import { RadioControl } from '@wordpress/components'; -import { useState, useEffect } from '@wordpress/element'; - -/** - * Renders Skeletons for Radio Control. - * - * @property {number} data The options to be renedered - * @property {number} watch The variable to be awaited for - * @property {string} callback The Render function in parent to be called - * @property {string} className The class name for the Live Preview - * - */ -const RadioControlWithSkeleton = ({ - data, - watch, - selected, - callback, - className, -}) => { - - const [rerender, doRerender] = useState(0); - - useEffect(() => doRerender(1), [watch, selected]); - - const buildDummyPreviews = () => { - var customItems = []; - - for (let idx = 0; idx < data.length; idx++) - customItems.push(
); - - return ( -
- {customItems} -
- ); - }; - - const buildRealPreview = () => { - return ( - { - return { - label: __( - option.content, - 'wp-module-onboarding' - ), - value: __( - option.value, - 'wp-module-onboarding' - ), - }; - })} - onChange={(value) => callback(value)} - /> - ); - }; - - return !watch ? buildDummyPreviews() : - <> - {watch ?
{rerender}
: null} - {buildRealPreview()} - ; -}; - -export default RadioControlWithSkeleton; diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js index 67ce0708e..9618082b8 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js @@ -13,7 +13,7 @@ import { EcommerceStateHandler } from '../../../../components/StateHandlers'; import { store as nfdOnboardingStore } from '../../../../store'; import content from '../content.json'; import { useWPSettings } from '../useWPSettings'; -import RadioControlWithSkeleton from '../../../../components/RadioControlWithSkeleton'; +import { RadioCtrlStateHandler } from '../../../../components/RadioControl'; function createReverseLookup(state) { return (option) => @@ -103,12 +103,32 @@ const StepTax = () => { question={__(content.question, 'wp-module-onboarding')} />
- selectOption(value)} /> + + { + return { + label: __( + option.content, + 'wp-module-onboarding' + ), + value: __( + option.value, + 'wp-module-onboarding' + ), + }; + } + )} + onChange={( value ) => selectOption( value )} + /> +
- setWpComfortLevel(value)}/> + + { + return { + label: __( + option.content, + 'wp-module-onboarding' + ), + value: __( + option.value, + 'wp-module-onboarding' + ), + }; + } + )} + onChange={( value ) => setWpComfortLevel( value )} + /> + Date: Mon, 2 Jan 2023 12:30:14 +0530 Subject: [PATCH 13/13] Review Comments --- .../RadioControl/RadioControlSkeleton/index.js | 16 +++++----------- .../index.js | 12 ++++++------ .../components/RadioControl/index.js | 4 ++-- .../pages/Steps/Ecommerce/StepTax/index.js | 8 ++++---- .../GetStarted/GetStartedExperience/index.js | 8 ++++---- 5 files changed, 21 insertions(+), 27 deletions(-) rename src/OnboardingSPA/components/RadioControl/{RadioControlState => RadioControlStateHandler}/index.js (52%) diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js index 9e7a26695..8160d73ce 100644 --- a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js +++ b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js @@ -1,20 +1,14 @@ /** * Renders Skeletons for Radio Control. * - * @param {number} data The options to be renedered + * @param {number} options The options to be renedered * */ -const RadioControlSkeleton = ({ data }) => { - const buildDummyRadioControls = () => { - const customItems = []; +const RadioControlSkeleton = ({ options }) => { - for (let idx = 0; idx < data.length; idx++) - customItems.push(
); - - return
{customItems}
; - }; - - return buildDummyRadioControls(); + return
+ {options.map((option) => (
))} +
; }; export default RadioControlSkeleton; \ No newline at end of file diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js similarity index 52% rename from src/OnboardingSPA/components/RadioControl/RadioControlState/index.js rename to src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js index f20ea6190..1a14ce86f 100644 --- a/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js +++ b/src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js @@ -4,18 +4,18 @@ import RadioControlSkeleton from '../RadioControlSkeleton'; /** * A State Handler to manage Radio Control * - * @param {number} data The options to be renedered. - * @param {string} children The children to be rendered out. - * @param {number} watch The variable to be awaited for to be fetched. + * @param {number} options The options to be renedered. + * @param {string} children The children to be rendered out. + * @param {number} watch The variable to be awaited for to be fetched. * */ -const RadioControlState = ({ data, watch, children }) => { +const RadioControlStateHandler = ({ options, watch, children }) => { const [rerender, doRerender] = useState(0); useEffect(() => doRerender(1), [watch]); return !watch ? ( - + ) : ( <> {
{rerender}
} @@ -24,4 +24,4 @@ const RadioControlState = ({ data, watch, children }) => { ); }; -export default RadioControlState; \ No newline at end of file +export default RadioControlStateHandler; \ No newline at end of file diff --git a/src/OnboardingSPA/components/RadioControl/index.js b/src/OnboardingSPA/components/RadioControl/index.js index af8cae2e2..f8741d0c3 100644 --- a/src/OnboardingSPA/components/RadioControl/index.js +++ b/src/OnboardingSPA/components/RadioControl/index.js @@ -1,2 +1,2 @@ -export { default as RadioCtrlSkeleton } from './RadioControlSkeleton'; -export { default as RadioCtrlStateHandler } from './RadioControlState'; \ No newline at end of file +export { default as RadioControlSkeleton } from './RadioControlSkeleton'; +export { default as RadioControlStateHandler } from './RadioControlStateHandler'; \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js index 9618082b8..9a6790e52 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js @@ -13,7 +13,7 @@ import { EcommerceStateHandler } from '../../../../components/StateHandlers'; import { store as nfdOnboardingStore } from '../../../../store'; import content from '../content.json'; import { useWPSettings } from '../useWPSettings'; -import { RadioCtrlStateHandler } from '../../../../components/RadioControl'; +import { RadioControlStateHandler } from '../../../../components/RadioControl'; function createReverseLookup(state) { return (option) => @@ -103,9 +103,9 @@ const StepTax = () => { question={__(content.question, 'wp-module-onboarding')} />
- { )} onChange={( value ) => selectOption( value )} /> - +
- { )} onChange={( value ) => setWpComfortLevel( value )} /> - +