diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js new file mode 100644 index 000000000..8160d73ce --- /dev/null +++ b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js @@ -0,0 +1,14 @@ +/** + * Renders Skeletons for Radio Control. + * + * @param {number} options The options to be renedered + * + */ +const RadioControlSkeleton = ({ options }) => { + + return
+ {options.map((option) => (
))} +
; +}; + +export default RadioControlSkeleton; \ No newline at end of file diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss new file mode 100644 index 000000000..b31051c56 --- /dev/null +++ b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss @@ -0,0 +1,22 @@ +/*COLOR VARIABLES*/ +$white-offset: rgb(224, 224, 224); +$main-color-light: var(--nfd-onboarding-white); + +.radio-control { + + &-main { + animation: fadeIn 300ms ease-in; + } + + &-skeleton { + margin: 30px; + + &-item { + height: 32px; + margin: 12px; + padding: 10px; + background: transparent; + } + } + +} \ No newline at end of file diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js new file mode 100644 index 000000000..1a14ce86f --- /dev/null +++ b/src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/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} 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 RadioControlStateHandler = ({ options, watch, children }) => { + const [rerender, doRerender] = useState(0); + + useEffect(() => doRerender(1), [watch]); + + return !watch ? ( + + ) : ( + <> + {
{rerender}
} + {children} + + ); +}; + +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 new file mode 100644 index 000000000..f8741d0c3 --- /dev/null +++ b/src/OnboardingSPA/components/RadioControl/index.js @@ -0,0 +1,2 @@ +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/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' ) } /> @@ -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,33 @@ 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 - }, - }, - }); - }} - /> + + { + return { + label: __( + option.content, + 'wp-module-onboarding' + ), + value: __( + option.value, + 'wp-module-onboarding' + ), + }; + } + )} + onChange={( value ) => selectOption( value )} + /> +
- { - return { - label: __( - option.content, - 'wp-module-onboarding' - ), - value: __( - option.value, - 'wp-module-onboarding' - ), - }; - } ) } - onChange={ ( value ) => setWpComfortLevel( value ) } - /> + + { + return { + label: __( + option.content, + 'wp-module-onboarding' + ), + value: __( + option.value, + 'wp-module-onboarding' + ), + }; + } + )} + onChange={( value ) => setWpComfortLevel( value )} + /> +