Skip to content

Commit

Permalink
Merge pull request #221 from newfold-labs/PRESS2-834-Implement-Site-C…
Browse files Browse the repository at this point in the history 
…lassification-API-Frontend

PRESS-2 834 Implement Site Classification API (Frontend)
  • Loading branch information
@arunshenoy99
arunshenoy99 authored May 9, 2023
2 parents 6b739e5 + 58d59b7 commit 3c9cedf
Show file tree
Hide file tree
Showing 10 changed files with 711 additions and 363 deletions.
11 changes: 8 additions & 3 deletions includes/Data/Flows.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,15 @@ final class Flows {
// to populate the step fields if a user is resuming a flow.
'data' => array(
'siteType' => array(
'label' => '',
'referTo' => 'site',
'primary' => '',
'secondary' => '',
'primary' => array(
'refers' => '',
'value' => '',
),
'secondary' => array(
'refers' => '',
'value' => '',
),
),

'wpComfortLevel' => '0',
Expand Down
8 changes: 2 additions & 6 deletions includes/RestApi/FlowController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ public function save_onboarding_flow_data( \WP_REST_Request $request ) {
At least the primary and secondary update does not run on every flow data request.
*/
if ( ! empty( $params['data']['siteType']['primary']['value'] ) &&
( $flow_data['data']['siteType']['primary']['value'] !== $params['data']['siteType']['primary']['value'] ) ) {
( empty( $flow_data['data']['siteType']['primary']['value'] ) || $flow_data['data']['siteType']['primary']['value'] !== $params['data']['siteType']['primary']['value'] ) ) {
if ( class_exists( 'NewfoldLabs\WP\Module\Data\SiteClassification\PrimaryType' ) ) {
$primary_type = new PrimaryType( $params['data']['siteType']['primary']['refers'], $params['data']['siteType']['primary']['value'] );
if ( ! $primary_type->save() ) {
Expand All @@ -145,7 +145,7 @@ public function save_onboarding_flow_data( \WP_REST_Request $request ) {
}

if ( ! empty( $params['data']['siteType']['secondary']['value'] ) &&
( $flow_data['data']['siteType']['secondary']['value'] !== $params['data']['siteType']['secondary']['value'] ) ) {
( empty( $flow_data['data']['siteType']['secondary']['value'] ) || $flow_data['data']['siteType']['secondary']['value'] !== $params['data']['siteType']['secondary']['value'] ) ) {
if ( class_exists( 'NewfoldLabs\WP\Module\Data\SiteClassification\SecondaryType' ) ) {
$secondary_type = new SecondaryType( $params['data']['siteType']['secondary']['refers'], $params['data']['siteType']['secondary']['value'] );
if ( ! $secondary_type->save() ) {
Expand Down Expand Up @@ -208,10 +208,6 @@ private function update_default_data_for_ecommerce( $data ) {
if ( 'ecommerce' === $flow_type ) {
// update default data with ecommerce data
$data['data']['topPriority']['priority1'] = 'selling';
$data['data']['siteType'] = array(
'label' => '',
'referTo' => 'business',
);
}
return $data;
}
Expand Down
219 changes: 113 additions & 106 deletions src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import { __, sprintf } from '@wordpress/i18n';
import CommonLayout from '../../../../../components/Layouts/Common';
import NewfoldLargeCard from '../../../../../components/NewfoldLargeCard';
import {
SIDEBAR_LEARN_MORE,
VIEW_NAV_GET_STARTED,
} from '../../../../../../constants';
import getContents from '../contents';
import { store as nfdOnboardingStore } from '../../../../../store';
import { useSelect, useDispatch } from '@wordpress/data';
import { useState, useEffect } from '@wordpress/element';
import CardHeader from '../../../../../components/CardHeader';
import NavCardButton from '../../../../../components/Button/NavCardButton';
import NeedHelpTag from '../../../../../components/NeedHelpTag';
import content from '../content.json';
import { translations } from '../../../../../utils/locales/translations';
import Animate from '../../../../../components/Animate';
import { getSiteClassification } from '../../../../../utils/api/siteClassification';

const StepPrimarySetup = () => {
const {
Expand All @@ -24,9 +23,9 @@ const StepPrimarySetup = () => {
setCurrentOnboardingData,
} = useDispatch( nfdOnboardingStore );

const { currentStep, currentData } = useSelect( ( select ) => {
const contents = getContents();
const { currentData } = useSelect( ( select ) => {
return {
currentStep: select( nfdOnboardingStore ).getCurrentStep(),
currentData:
select( nfdOnboardingStore ).getCurrentOnboardingData(),
};
Expand All @@ -37,131 +36,139 @@ const StepPrimarySetup = () => {
setIsDrawerSuppressed( true );
setDrawerActiveView( VIEW_NAV_GET_STARTED );
setIsHeaderNavigationEnabled( true );
getSiteClassificationData();
}, [] );

const [ clickedIndex, changeCategory ] = useState( -1 );
const [ inputCategVal, changeInputCateg ] = useState( '' );
const [ custom, setCustom ] = useState( false );
const [ siteClassification, setSiteClassification ] = useState();
const [ primaryCategory, setPrimaryCategory ] = useState( '' );

const categoriesArray = content.categories;
const selectedPrimaryCategoryInStore = currentData?.data?.siteType?.primary;
/**
* Function which fetches the Site Classifications
*
*/
const getSiteClassificationData = async () => {
const siteClassificationData = await getSiteClassification();
setSiteClassification( siteClassificationData?.body );

/**This condition fills the data in input box if the saved category isn't a subcategory from the content*/
if ( selectedPrimaryCategoryInStore && ! inputCategVal ) {
const found = categoriesArray.find(
( e ) => e.name === selectedPrimaryCategoryInStore
);
if ( ! found && selectedPrimaryCategoryInStore !== 'primaryCategory' )
changeInputCateg( selectedPrimaryCategoryInStore );
}
// Incase old user comes again with data, we need to save it
if (
typeof currentData?.data?.siteType?.primary === 'string' ||
typeof currentData?.data?.siteType?.secondary === 'string'
) {
const primaryValue = currentData?.data?.siteType?.primary;
const secondaryValue = currentData?.data?.siteType?.secondary;
currentData.data.siteType.primary = {
refers: 'custom',
value: primaryValue,
};
currentData.data.siteType.secondary = {
refers: 'custom',
value: secondaryValue,
};
setCurrentOnboardingData( currentData );
}

const handleCategoryClick = ( idxOfElm ) => {
changeCategory( idxOfElm );
changeInputCateg( '' );
const currentDataCopy = currentData;
currentDataCopy.data.siteType.primary =
content.categories[ idxOfElm ]?.name;
setCurrentOnboardingData( currentDataCopy );
setPrimaryCategory( currentData?.data?.siteType?.primary?.value ?? '' );
if ( currentData?.data?.siteType?.primary?.refers === 'custom' ) {
categoryInput( currentData?.data?.siteType?.primary?.value );
}
};

/**
* Function which saves data in redux when category name is selected via chips
*
* @param {string} primType
*/
const handleCategoryClick = ( primType ) => {
setCustom( false );
setPrimaryCategory( primType );
currentData.data.siteType.primary.refers = 'slug';
currentData.data.siteType.primary.value = primType;
setCurrentOnboardingData( currentData );
};

/**
* Function which saves data in redux when category name is put-in via input box
*
* @param input
* @param {string} value
*/
const categoryInput = ( input ) => {
changeCategory( -1 );
changeInputCateg( input?.target?.value );
const currentDataCopy = currentData;
currentDataCopy.data.siteType.primary = input?.target?.value;
setCurrentOnboardingData( currentDataCopy );
const categoryInput = ( value ) => {
setCustom( true );
setPrimaryCategory( value );
currentData.data.siteType.primary.refers = 'custom';
currentData.data.siteType.primary.value = value;
setCurrentOnboardingData( currentData );
};

const primarySiteTypeChips = () => {
const types = siteClassification?.types;
return Object.keys( types ).map( ( type, idx ) => {
return (
<div
key={ types[ type ]?.slug }
tabIndex={ idx + 1 }
role="button"
className={ `${
types[ type ].slug === primaryCategory && ! custom
? 'chosenPrimaryCategory '
: ''
}nfd-card-pri-category` }
onClick={ () => handleCategoryClick( types[ type ].slug ) }
onKeyDown={ () =>
handleCategoryClick( types[ type ].slug )
}
>
<div className="nfd-card-pri-category-wrapper">
<span
className={ `nfd-card-pri-category-wrapper__icon ${
types[ type ].slug === primaryCategory
? 'nfd-card-pri-category-wrapper__icon-selected '
: ''
}` }
style={ {
backgroundImage: `url(${ types[ type ]?.icon })`,
} }
></span>
<span className="categName">
{ types[ type ]?.label }
</span>
</div>
</div>
);
} );
};

return (
<CommonLayout isBgPrimary isCentered>
<NewfoldLargeCard>
<div className="nfd-card-heading center">
<CardHeader
heading={ __(
currentStep?.heading,
'wp-module-onboarding'
) }
subHeading={ sprintf(
__( content.subHeading, 'wp-module-onboarding' ),
translations( 'SITE' )
) }
question={ __(
currentStep?.subheading,
'wp-module-onboarding'
) }
heading={ contents.cardHeading }
subHeading={ contents.subHeading }
question={ contents.question }
/>
</div>
<Animate
type="fade-in-disabled"
after={
content.categories &&
selectedPrimaryCategoryInStore !== null
}
>
<Animate type="fade-in-disabled" after={ siteClassification }>
<div className="nfd-setup-primary-categories">
{ content.categories.map( ( item, idx ) => {
return (
<div
key={ item?.name }
className={ `${
clickedIndex === idx ||
item.name ===
selectedPrimaryCategoryInStore
? 'chosenPrimaryCategory '
: ''
}nfd-card-category` }
onClick={ ( e ) =>
handleCategoryClick( idx )
}
>
<div className="nfd-card-category-wrapper">
<span
className="icon"
style={ {
backgroundImage:
clickedIndex !== idx &&
item.name !==
selectedPrimaryCategoryInStore
? item?.icon
: item?.iconWhite,
} }
></span>
<span className="categName">
{ item?.name }
</span>
</div>
</div>
);
} ) }
{ siteClassification && primarySiteTypeChips() }
</div>

<div className="nfd-setup-primary-second">
<div className="nfd-setup-primary-second-top">
<p className="blackText">or tell us here:</p>
<input
type="text"
onChange={ ( e ) => categoryInput( e ) }
className="tellUsInput"
placeholder={ sprintf(
__(
content.placeholderSiteTypeInput,
'wp-module-onboarding'
),
translations( 'site' )
) }
value={ inputCategVal }
/>
</div>
<div className="nfd-setup-primary-custom">
<p className="nfd-setup-primary-custom__tellus-text">
or tell us here:
</p>
<input
type="search"
onChange={ ( e ) =>
categoryInput( e?.target?.value )
}
className="nfd-setup-primary-custom__tellus-input"
placeholder={ contents.placeholderSiteTypeInput }
value={ custom ? primaryCategory : '' }
/>
</div>
</Animate>
<NavCardButton
text={ __( content.buttonText ) }
disabled={ content.categories === null }
/>
<NavCardButton text={ contents.buttonText } />
<NeedHelpTag />
</NewfoldLargeCard>
</CommonLayout>
Expand Down
Loading

0 comments on commit 3c9cedf

Please sign in to comment.