From dfb41d07b4926ceeb431b220af039797f1d23784 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 18 Jun 2024 16:58:30 +0530 Subject: [PATCH 1/2] Code --- .../steps/SiteGen/SiteDetails/index.js | 111 ++++++++++-------- 1 file changed, 59 insertions(+), 52 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js index 619821271..6f3d13c83 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js @@ -25,16 +25,15 @@ import { ACTION_SITEGEN_SITE_DETAILS_PROMPT_SET } from '../../../utils/analytics import { SITEGEN_FLOW } from '../../../data/flows/constants'; const SiteGenSiteDetails = () => { - const [ customerInput, setCustomerInput ] = useState( '' ); - const [ customerInputStrength, setCustomerInputStrength ] = useState( 0 ); - const [ isValidInput, setIsValidInput ] = useState( false ); + const [customerInput, setCustomerInput] = useState(''); + const [customerInputStrength, setCustomerInputStrength] = useState(0); + const [isValidInput, setIsValidInput] = useState(false); - const { currentData } = useSelect( ( select ) => { + const { currentData } = useSelect((select) => { return { - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), + currentData: select(nfdOnboardingStore).getCurrentOnboardingData(), }; - } ); + }); const { setIsFooterNavAllowed, @@ -45,29 +44,39 @@ const SiteGenSiteDetails = () => { setHideFooterNav, setCurrentOnboardingData, setIsHeaderNavigationEnabled, - } = useDispatch( nfdOnboardingStore ); + } = useDispatch(nfdOnboardingStore); - const isLargeViewport = useViewportMatch( 'small' ); + const isLargeViewport = useViewportMatch('small'); - useEffect( () => { - setHideFooterNav( false ); - setIsHeaderEnabled( true ); - setSidebarActiveView( false ); - setHeaderActiveView( HEADER_SITEGEN ); - setIsHeaderNavigationEnabled( true ); - setDrawerActiveView( false ); - if ( currentData.sitegen.siteDetails?.prompt !== '' ) { - setIsValidInput( true ); - setIsFooterNavAllowed( true ); - return setCustomerInput( currentData.sitegen.siteDetails.prompt ); + useEffect(() => { + setHideFooterNav(false); + setIsHeaderEnabled(true); + setSidebarActiveView(false); + setHeaderActiveView(HEADER_SITEGEN); + setIsHeaderNavigationEnabled(true); + setDrawerActiveView(false); + if (currentData.sitegen.siteDetails?.prompt !== '') { + if ( + currentData.sitegen.siteDetails?.prompt.length < + currentData.sitegen.siteDetails?.minCharLimit + ) { + setIsValidInput(false); + setIsFooterNavAllowed(false); + currentData.sitegen.siteDetails.prompt = ''; + setCurrentOnboardingData(currentData); + } else { + setIsValidInput(true); + setIsFooterNavAllowed(true); + } + return setCustomerInput(currentData.sitegen.siteDetails.prompt); } - setIsFooterNavAllowed( false ); - }, [] ); + setIsFooterNavAllowed(false); + }, []); - useEffect( () => { - if ( customerInput !== undefined ) { + useEffect(() => { + if (customerInput !== undefined) { const customerInputTrimmed = customerInput.trim(); - if ( customerInputTrimmed !== '' ) { + if (customerInputTrimmed !== '') { // When something new is added then only change in store. if ( customerInputTrimmed !== @@ -80,21 +89,21 @@ const SiteGenSiteDetails = () => { currentData.sitegen.sitemapPagesGenerated = false; currentData.sitegen.homepages.active = {}; currentData.sitegen.homepages.data = {}; - setCurrentOnboardingData( currentData ); + setCurrentOnboardingData(currentData); } // Else just make sure the Next is enabled when prompt is present - setIsValidInput( true ); - setIsFooterNavAllowed( true ); + setIsValidInput(true); + setIsFooterNavAllowed(true); } else { - setIsValidInput( false ); - setIsFooterNavAllowed( false ); + setIsValidInput(false); + setIsFooterNavAllowed(false); } } - }, [ customerInput ] ); + }, [customerInput]); const trackPromptSetEvent = () => { let customerInputStrengthForEvent = false; - switch ( customerInputStrength ) { + switch (customerInputStrength) { case 2: customerInputStrengthForEvent = 'MEDIUM'; break; @@ -103,7 +112,7 @@ const SiteGenSiteDetails = () => { break; } - if ( customerInputStrengthForEvent ) { + if (customerInputStrengthForEvent) { trackOnboardingEvent( new OnboardingEvent( ACTION_SITEGEN_SITE_DETAILS_PROMPT_SET, @@ -122,34 +131,32 @@ const SiteGenSiteDetails = () => { return ( - -
- + +
+ - { isLargeViewport && ( -
+ {isLargeViewport && ( +
{ + callback={() => { trackPromptSetEvent(); - } } - text={ content.buttonText } - disabled={ ! isValidInput } + }} + text={content.buttonText} + disabled={!isValidInput} />
- ) } + )}
From f19db01bebd6dced20d8d5661e57136effddf96e Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Mon, 24 Jun 2024 17:45:57 +0530 Subject: [PATCH 2/2] Fix Lint --- .../steps/SiteGen/SiteDetails/index.js | 107 +++++++++--------- 1 file changed, 55 insertions(+), 52 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js index 6f3d13c83..f99ad9cee 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js @@ -25,15 +25,16 @@ import { ACTION_SITEGEN_SITE_DETAILS_PROMPT_SET } from '../../../utils/analytics import { SITEGEN_FLOW } from '../../../data/flows/constants'; const SiteGenSiteDetails = () => { - const [customerInput, setCustomerInput] = useState(''); - const [customerInputStrength, setCustomerInputStrength] = useState(0); - const [isValidInput, setIsValidInput] = useState(false); + const [ customerInput, setCustomerInput ] = useState( '' ); + const [ customerInputStrength, setCustomerInputStrength ] = useState( 0 ); + const [ isValidInput, setIsValidInput ] = useState( false ); - const { currentData } = useSelect((select) => { + const { currentData } = useSelect( ( select ) => { return { - currentData: select(nfdOnboardingStore).getCurrentOnboardingData(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), }; - }); + } ); const { setIsFooterNavAllowed, @@ -44,39 +45,39 @@ const SiteGenSiteDetails = () => { setHideFooterNav, setCurrentOnboardingData, setIsHeaderNavigationEnabled, - } = useDispatch(nfdOnboardingStore); + } = useDispatch( nfdOnboardingStore ); - const isLargeViewport = useViewportMatch('small'); + const isLargeViewport = useViewportMatch( 'small' ); - useEffect(() => { - setHideFooterNav(false); - setIsHeaderEnabled(true); - setSidebarActiveView(false); - setHeaderActiveView(HEADER_SITEGEN); - setIsHeaderNavigationEnabled(true); - setDrawerActiveView(false); - if (currentData.sitegen.siteDetails?.prompt !== '') { + useEffect( () => { + setHideFooterNav( false ); + setIsHeaderEnabled( true ); + setSidebarActiveView( false ); + setHeaderActiveView( HEADER_SITEGEN ); + setIsHeaderNavigationEnabled( true ); + setDrawerActiveView( false ); + if ( currentData.sitegen.siteDetails?.prompt !== '' ) { if ( currentData.sitegen.siteDetails?.prompt.length < currentData.sitegen.siteDetails?.minCharLimit ) { - setIsValidInput(false); - setIsFooterNavAllowed(false); + setIsValidInput( false ); + setIsFooterNavAllowed( false ); currentData.sitegen.siteDetails.prompt = ''; - setCurrentOnboardingData(currentData); + setCurrentOnboardingData( currentData ); } else { - setIsValidInput(true); - setIsFooterNavAllowed(true); + setIsValidInput( true ); + setIsFooterNavAllowed( true ); } - return setCustomerInput(currentData.sitegen.siteDetails.prompt); + return setCustomerInput( currentData.sitegen.siteDetails.prompt ); } - setIsFooterNavAllowed(false); - }, []); + setIsFooterNavAllowed( false ); + }, [] ); - useEffect(() => { - if (customerInput !== undefined) { + useEffect( () => { + if ( customerInput !== undefined ) { const customerInputTrimmed = customerInput.trim(); - if (customerInputTrimmed !== '') { + if ( customerInputTrimmed !== '' ) { // When something new is added then only change in store. if ( customerInputTrimmed !== @@ -89,21 +90,21 @@ const SiteGenSiteDetails = () => { currentData.sitegen.sitemapPagesGenerated = false; currentData.sitegen.homepages.active = {}; currentData.sitegen.homepages.data = {}; - setCurrentOnboardingData(currentData); + setCurrentOnboardingData( currentData ); } // Else just make sure the Next is enabled when prompt is present - setIsValidInput(true); - setIsFooterNavAllowed(true); + setIsValidInput( true ); + setIsFooterNavAllowed( true ); } else { - setIsValidInput(false); - setIsFooterNavAllowed(false); + setIsValidInput( false ); + setIsFooterNavAllowed( false ); } } - }, [customerInput]); + }, [ customerInput ] ); const trackPromptSetEvent = () => { let customerInputStrengthForEvent = false; - switch (customerInputStrength) { + switch ( customerInputStrength ) { case 2: customerInputStrengthForEvent = 'MEDIUM'; break; @@ -112,7 +113,7 @@ const SiteGenSiteDetails = () => { break; } - if (customerInputStrengthForEvent) { + if ( customerInputStrengthForEvent ) { trackOnboardingEvent( new OnboardingEvent( ACTION_SITEGEN_SITE_DETAILS_PROMPT_SET, @@ -131,32 +132,34 @@ const SiteGenSiteDetails = () => { return ( - -
- + +
+ - {isLargeViewport && ( -
+ { isLargeViewport && ( +
{ + callback={ () => { trackPromptSetEvent(); - }} - text={content.buttonText} - disabled={!isValidInput} + } } + text={ content.buttonText } + disabled={ ! isValidInput } />
- )} + ) }