diff --git a/includes/Data/Flows.php b/includes/Data/Flows.php index bca3616d2..982cbda8e 100644 --- a/includes/Data/Flows.php +++ b/includes/Data/Flows.php @@ -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', diff --git a/includes/RestApi/FlowController.php b/includes/RestApi/FlowController.php index 2b9137f53..dd0178540 100644 --- a/includes/RestApi/FlowController.php +++ b/includes/RestApi/FlowController.php @@ -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() ) { @@ -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() ) { @@ -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; } diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js index d30630866..16f224935 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js @@ -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 { @@ -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(), }; @@ -37,43 +36,107 @@ 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 ( +
handleCategoryClick( types[ type ].slug ) } + onKeyDown={ () => + handleCategoryClick( types[ type ].slug ) + } + > +
+ + + { types[ type ]?.label } + +
+
+ ); + } ); }; return ( @@ -81,87 +144,31 @@ const StepPrimarySetup = () => {
- +
- { content.categories.map( ( item, idx ) => { - return ( -
- handleCategoryClick( idx ) - } - > -
- - - { item?.name } - -
-
- ); - } ) } + { siteClassification && primarySiteTypeChips() }
- -
-
-

or tell us here:

- categoryInput( e ) } - className="tellUsInput" - placeholder={ sprintf( - __( - content.placeholderSiteTypeInput, - 'wp-module-onboarding' - ), - translations( 'site' ) - ) } - value={ inputCategVal } - /> -
+
+

+ or tell us here: +

+ + categoryInput( e?.target?.value ) + } + className="nfd-setup-primary-custom__tellus-input" + placeholder={ contents.placeholderSiteTypeInput } + value={ custom ? primaryCategory : '' } + />
- + diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss index 745e77ee8..5bcc674a0 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss @@ -1,73 +1,94 @@ .nfd-setup-primary { + &-categories { - margin-top: 2rem; - width: 40vw; - text-align: center; - - .nfd-card-category { - &.chosenPrimaryCategory { - background-color: var(--wp-admin-theme-color-darker-10); - color: var(--nfd-onboarding-light); - } - - .nfd-card-category-wrapper { - display: inline-flex; - align-items: center; - } - } - - .icon { - width: 25px; - height: 24px; - display: inline-block; - background-repeat: no-repeat; - background-position: center; - } + margin-top: 3rem; + margin-bottom: 1rem; + width: 50vw; + text-align: center; } - &-second { + &-custom { display: flex; align-items: center; flex-direction: column; justify-content: space-around; width: 100%; - &-bottom { - margin-top: 20px; - width: 100%; - display: flex; - flex-flow: column; - align-items: center; + &__tellus { + + &-text { + color: var(--nfd-onboarding-black); + font-size: 1rem; + font-weight: 700; + text-align: center; + padding: 10px; + } + + &-input { + width: 30vw; + height: 5.5vh; + font-size: 16px; + font-weight: 300; + margin: 0 1rem 1.5rem 1rem; + padding: 8px 16px !important; + + &::placeholder { + font-size: 15px; + } + + @media (max-width: #{($break-medium - 1)}) { + width: 40vw; + } + } } + } } -.nfd-card-category { - color: var(--nfd-onboarding-black); - padding: 1rem; - background-color: var(--nfd-onboarding-light-gray-3); - background-position: center; - display: inline-flex; - margin: auto 0rem 1rem 1rem; - border-radius: 2.5rem; +.nfd-card-pri-category { cursor: pointer; align-items: center; -} - -.blackText { + padding: 0.7rem 1rem; + display: inline-flex; + border-radius: 2.5rem; + margin: auto 0.2rem 1.15rem 1rem; + background-position: center; color: var(--nfd-onboarding-black); - font-size: 1rem; - font-weight: 700; - text-align: center; - padding: 10px; -} + background-color: var(--nfd-onboarding-light-gray-3); + + &.chosenPrimaryCategory { + background-color: var(--wp-admin-theme-color-darker-10); + color: var(--nfd-onboarding-light); + } -.tellUsInput { - width: 30vw; - margin: 0 1rem 1rem; - height: 4vh; + &-wrapper { + display: inline-flex; + align-items: center; + + &__icon { + width: 24px; + height: 24px; + transform: scale(0.6); + display: inline-block; + background-size: 24px 24px; + background-repeat: no-repeat; + background-position: center; - @media (max-width: #{($break-medium - 1)}) { - width: 40vw; + &-selected { + filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(162deg) brightness(103%) contrast(101%); + } + } + } + + &:hover { + transition: all 0.2s ease-in; + background-color: rgba($color: var(--wp-admin-theme-color-darker-10--rgb), $alpha: 0.7); + color: var(--nfd-onboarding-light); + + .nfd-card-pri-category-wrapper-icon { + transition: all 0.2s ease-in; + filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(162deg) brightness(103%) contrast(101%); + } } } + diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js index fa23ac126..c9da6cd4d 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js @@ -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 { useDispatch, useSelect } from '@wordpress/data'; import { useEffect, useState } 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 { @@ -29,58 +28,170 @@ const StepPrimarySetup = () => { setIsDrawerSuppressed( true ); setDrawerActiveView( VIEW_NAV_GET_STARTED ); setIsHeaderNavigationEnabled( true ); + getSiteClassificationData(); }, [] ); - const [ clickedIndex, changeCategory ] = useState( -1 ); - const [ inputCategVal, changeInputCateg ] = useState( '' ); + const contents = getContents(); + const [ custom, setCustom ] = useState( false ); + const [ siteClassification, setSiteClassification ] = useState(); + const [ primaryTypesList, setPrimaryTypeList ] = useState(); + const [ primaryCategory, setPrimaryCategory ] = useState(); + const [ secondaryCategory, setSecondaryCategory ] = useState( '' ); - const { currentStep, currentData } = useSelect( ( select ) => { + const { currentData } = useSelect( ( select ) => { return { - currentStep: select( nfdOnboardingStore ).getCurrentStep(), currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), }; }, [] ); - const selectedCategoryInStore = currentData?.data?.siteType?.secondary; - const categoriesArray = content.categories; - const subCategories = categoriesArray[ 0 ]?.subCategories; + /** + * Function which fetches the Site Classifications + * + */ + const getSiteClassificationData = async () => { + const siteClassificationData = await getSiteClassification(); + + // First Key from the Data is the default Primary value + const defaultPrimaryType = Object.keys( + siteClassificationData?.body?.types + )[ 0 ]; + + setPrimaryCategory( defaultPrimaryType ); + setSiteClassification( siteClassificationData?.body ); + let primaryTypeList; + if ( window?.nfdOnboarding?.currentFlow === 'ecommerce' ) { + primaryTypeList = [ 'business' ]; + if ( currentData?.data?.siteType?.primary?.value !== 'business' ) { + currentData.data.siteType.primary = { + refers: 'slug', + value: 'business', + }; + } + } else { + primaryTypeList = Object.keys( + siteClassificationData?.body?.types + ); + } + setPrimaryTypeList( primaryTypeList ); + + // Incase old user comes again with data, we need to save it + if ( typeof currentData?.data?.siteType?.primary === 'string' ) { + const primaryValue = currentData?.data?.siteType?.primary; + currentData.data.siteType.primary = { + refers: 'custom', + value: primaryValue, + }; + setCurrentOnboardingData( currentData ); + } + + if ( typeof currentData?.data?.siteType?.secondary === 'string' ) { + const secondaryValue = currentData?.data?.siteType?.secondary; + currentData.data.siteType.secondary = { + refers: 'custom', + value: secondaryValue, + }; + setCurrentOnboardingData( currentData ); + } + + setSecondaryCategory( + currentData?.data?.siteType?.secondary?.value ?? '' + ); + if ( currentData?.data?.siteType?.primary?.value !== '' ) { + // Determining if primary is Custom + const isNotPrimaryCustom = + currentData?.data?.siteType?.primary?.refers !== 'custom'; - /**This condition fills the data in input box if the saved category isn't a subcategory from the content*/ - if ( - selectedCategoryInStore && - ! inputCategVal && - subCategories.indexOf( selectedCategoryInStore ) === -1 - ) { - if ( selectedCategoryInStore !== 'secondaryCategory' ) - changeInputCateg( selectedCategoryInStore ); - } + if ( isNotPrimaryCustom ) { + setPrimaryCategory( + currentData?.data?.siteType?.primary?.value + ); + } else { + setPrimaryCategory( defaultPrimaryType ); + categoryInput( currentData?.data?.siteType?.secondary?.value ); + } + } + + // Primary is valid and secondary is custom + if ( currentData?.data?.siteType?.secondary?.refers === 'custom' ) { + categoryInput( currentData?.data?.siteType?.secondary?.value ); + } + }; /** * 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.secondary = input?.target?.value; - setCurrentOnboardingData( currentDataCopy ); + const categoryInput = ( value ) => { + setCustom( true ); + setSecondaryCategory( value ); + currentData.data.siteType.secondary.refers = 'custom'; + currentData.data.siteType.secondary.value = value; + setCurrentOnboardingData( currentData ); }; /** * Function which saves data in redux when category name is chosen via categories displayed * - * @param idxOfElm + * @param {string} secType */ - const handleCategoryClick = ( idxOfElm ) => { - changeCategory( idxOfElm ); - changeInputCateg( '' ); - const currentDataCopy = currentData; - currentDataCopy.data.siteType.secondary = - categoriesArray[ 0 ]?.subCategories[ idxOfElm ]; - setCurrentOnboardingData( currentDataCopy ); + const handleCategoryClick = ( secType ) => { + setCustom( false ); + setSecondaryCategory( secType ); + currentData.data.siteType.primary.refers = 'slug'; + currentData.data.siteType.secondary.refers = 'slug'; + currentData.data.siteType.primary.value = primaryCategory; + currentData.data.siteType.secondary.value = secType; + setCurrentOnboardingData( currentData ); + }; + + const changePrimaryType = ( direction ) => { + const idx = primaryTypesList.findIndex( + ( val ) => primaryCategory === val + ); + switch ( direction ) { + case 'back': + // idx = ( (idx - 1 + N) % N ) + setPrimaryCategory( + primaryTypesList[ + ( idx - 1 + primaryTypesList.length ) % + primaryTypesList.length + ] + ); + break; + case 'next': + // idx = ( (idx + 1 ) % N ) + setPrimaryCategory( + primaryTypesList[ ( idx + 1 ) % primaryTypesList.length ] + ); + break; + } + }; + + const secondarySiteTypeChips = () => { + const types = + siteClassification?.types[ primaryCategory ]?.secondaryTypes; + return Object.keys( types ).map( ( type, idx ) => { + return ( +
handleCategoryClick( types[ type ].slug ) } + onKeyDown={ () => + handleCategoryClick( types[ type ].slug ) + } + > + { types[ type ]?.label } +
+ ); + } ); }; return ( @@ -88,96 +199,100 @@ const StepPrimarySetup = () => {
- +
-
-
- -

- { ' ' } - { categoriesArray[ 0 ].name } -

-
-
- -
- { categoriesArray[ 0 ]?.subCategories?.map( - ( item, idx ) => { - return ( +
+ { siteClassification && ( +
+ { primaryTypesList && + primaryTypesList.length > 1 && ( +
+ + changePrimaryType( + 'back' + ) + } + onKeyUp={ () => + changePrimaryType( + 'back' + ) + } + role="button" + tabIndex={ 0 } + style={ { + backgroundImage: + 'var(--chevron-left-icon)', + } } + /> +
+ ) } +
- handleCategoryClick( idx ) - } - className={ `${ - clickedIndex === idx || - item === selectedCategoryInStore - ? 'chosenSecondaryCategory ' - : '' - }nfd-card-category` } - > - { item } - - ); - } + className="category-scrolling-wrapper__type-icon" + style={ { + backgroundImage: `url(${ siteClassification?.types[ primaryCategory ]?.icon })`, + } } + /> +

+ { ` ${ siteClassification?.types[ primaryCategory ]?.label }` } +

+
+ { primaryTypesList && + primaryTypesList.length > 1 && ( +
+ + changePrimaryType( + 'next' + ) + } + onKeyUp={ () => + changePrimaryType( + 'next' + ) + } + role="button" + tabIndex={ 0 } + style={ { + backgroundImage: + 'var(--chevron-right-icon)', + } } + /> +
+ ) } +
) }
-
- -
-
-
- { __( - content.tellusHereText, - 'wp-module-onboarding' - ) } +
+ { siteClassification && secondarySiteTypeChips() } +
+
+
+ { contents.tellusHereText }
categoryInput( e ) } - className="tellUsInput" - placeholder={ sprintf( - __( - content.placeholderSiteTypeInput, - 'wp-module-onboarding' - ), - translations( 'site' ) - ) } - value={ inputCategVal } + type="search" + onChange={ ( e ) => + categoryInput( e?.target?.value ) + } + className="nfd-setup-primary-custom__tellus-input" + placeholder={ + contents.placeholderSiteTypeInput + } + value={ custom ? secondaryCategory : '' } />
- + diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss index 23349a5ee..6dc018d71 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss @@ -1,70 +1,152 @@ .nfd-setup-secondary { + &-categories { - text-align: center; - margin-top: 1rem; - - .nfd-card-category-wrapper { - display: inline-flex; - margin-bottom: 2rem; - border-bottom: 2px solid #00568c; - - .category-scrolling-wrapper { - width: 15vw; - display: flex; - justify-content: center; - } - } - - button { - display: inline-block; - } - - .categName { - display: inline-block; - color: black; - font-size: 0.8rem; - font-weight: 400; - margin-top: 0; - text-transform: uppercase; - margin-bottom: 0.3rem; - } - - .iconSiteType { - background-repeat: no-repeat; - display: inline-block; - width: 1vw; - height: 2vh; - cursor: pointer; + width: 40vw; + margin-top: 2.5rem; + text-align: center; + margin-bottom: 1rem; + + button { + display: inline-block; + } + } + + &-custom { + display: flex; + align-items: center; + flex-direction: column; + justify-content: space-around; + + &__tellus { + + &-text { + color: var(--nfd-onboarding-black); + font-size: 1rem; + font-weight: 700; + text-align: center; + padding: 10px; } - - .icon { - width: 25px; - height: 24px; - display: inline-block; - background-repeat: no-repeat; - @media (max-width:500px) { - display: none; + + &-input { + width: 30vw; + height: 5.5vh; + font-size: 16px; + font-weight: 300; + margin: 0 1rem 1.5rem 1rem; + padding: 8px 16px !important; + + &::placeholder { + font-size: 15px; } - } - - .subCategoriesSection { - .nfd-card-category { - &.chosenSecondaryCategory { - background-color: var(--wp-admin-theme-color-darker-10); - color: var(--nfd-onboarding-light); - } + + @media (max-width: #{($break-medium - 1)}) { + width: 40vw; } } + } + } +} + +.nfd-card-sec-category { + cursor: pointer; + align-items: center; + padding: 0.7rem 1rem; + display: inline-flex; + border-radius: 2.5rem; + margin: auto 0.2rem 1.15rem 1rem; + background-position: center; + color: var(--nfd-onboarding-black); + background-color: var(--nfd-onboarding-light-gray-3); + + &.chosenSecondaryCategory { + background-color: var(--wp-admin-theme-color-darker-10); + color: var(--nfd-onboarding-light); + } + + &:hover { + transition: all 0.2s ease-in; + background-color: rgba($color: var(--wp-admin-theme-color-darker-10--rgb), $alpha: 0.7); + color: var(--nfd-onboarding-light); + } + + &-wrapper { + display: inline-flex; + margin-bottom: 2rem; + border-bottom: 2px solid #00568c; + + } +} + +.subCategoriesSection { + height: 23%; + margin-top: 1rem; + min-height: 230px; + margin-bottom: 1rem; +} + +.category-scrolling-wrapper { + width: 100%; + padding: 5px; + display: flex; + align-items: center; + place-content: center; + justify-content: space-between; + + &__left-btn { + display: flex; + cursor: pointer; + align-items: center; + justify-content: flex-start; + + &-icon { + width: 12px; + height: 12px; + background-repeat: no-repeat; + } + } + + &__type { + display: flex; + padding: 0 30px; + align-items: center; + place-content: center; + + &-icon { + width: 28px; + height: 28px; + margin-right: 0.3rem; + margin-bottom: 0.1rem; + transform: scale(0.6); + display: inline-block; + background-size: 28px 28px; + background-repeat: no-repeat; + background-position: center; + + @media (max-width: 500px) { + display: none; + } + } + + &-text { + display: inline-block; + color: var(--nfd-onboarding-dark); + font-size: 0.85rem; + font-weight: 400; + margin: 0; + text-transform: uppercase; + } } - &-second { + &__right-btn { display: flex; + cursor: pointer; align-items: center; - flex-direction: column; - justify-content: space-around; + justify-content: flex-end; - &-bottom { - margin-top: 20px; + &-icon { + width: 12px; + height: 12px; + background-repeat: no-repeat; } } -} \ No newline at end of file +} diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/content.json b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/content.json deleted file mode 100644 index c3273f974..000000000 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/content.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "cardHeading": "Help us tailor this setup to your site", - "subHeading": "ABOUT YOUR %s", - "question": "What type of %s is it?", - "buttonText": "Continue Setup", - "placeholderSiteTypeInput": "Enter to search your %s type", - "tellusHereText": "or tell us here:", - "categories": [ - { - "name": "Business", - "icon": "var(--business-icon)", - "iconWhite": "var(--business-white-icon)", - "subCategories": [ - "Fashion, apparel and accessories", - "Health and beauty", - "Electronics and computers", - "Food and drink", - "CBD and other hemp-derived products", - "Jewelry", - "Pets", - "Motherhood & Baby", - "Furniture & Home Decoration", - "Education & Learning" - ] - } - ] -} diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js new file mode 100644 index 000000000..343c43159 --- /dev/null +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js @@ -0,0 +1,31 @@ +import { __, sprintf } from '@wordpress/i18n'; + +import { translations } from '../../../../utils/locales/translations'; + +const getContents = () => { + return { + cardHeading: __( + 'Help us tailor this setup to your site', + 'wp-module-onboarding' + ), + subHeading: sprintf( + /* translators: 1: site */ + __( 'ABOUT YOUR %s', 'wp-module-onboarding' ), + translations( 'SITE' ) + ), + question: sprintf( + /* translators: 1: site */ + __( 'What type of %s is it?', 'wp-module-onboarding' ), + translations( 'site' ) + ), + buttonText: __( 'Continue Setup', 'wp-module-onboarding' ), + placeholderSiteTypeInput: sprintf( + /* translators: 1: site */ + __( 'Enter to search your %s type', 'wp-module-onboarding' ), + translations( 'site' ) + ), + tellusHereText: __( 'or tell us here:', 'wp-module-onboarding' ), + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/utils/api/siteClassification.js b/src/OnboardingSPA/utils/api/siteClassification.js new file mode 100644 index 000000000..762331f76 --- /dev/null +++ b/src/OnboardingSPA/utils/api/siteClassification.js @@ -0,0 +1,18 @@ +import { resolve } from './resolve'; +import { onboardingRestURL } from './common'; +import siteClassificationData from './siteClassification.json'; + +import apiFetch from '@wordpress/api-fetch'; + +export async function getSiteClassification() { + const data = await resolve( + apiFetch( { + url: onboardingRestURL( 'site-classification' ), + } ) + ); + if ( data.body.length === 0 ) { + return siteClassificationData; + } + + return data; +} diff --git a/src/OnboardingSPA/utils/api/siteClassification.json b/src/OnboardingSPA/utils/api/siteClassification.json new file mode 100644 index 000000000..bf0bb87ec --- /dev/null +++ b/src/OnboardingSPA/utils/api/siteClassification.json @@ -0,0 +1,100 @@ +{ + "body": { + "types": { + "business": { + "slug": "business", + "label": "Business", + "icon": "https://cdn.hiive.space/site-classification/business.svg", + "emoji": "💼", + "schema": "Corporation", + "secondaryTypes": { + "agency-consulting": { + "primaryType": "business", + "slug": "agency-consulting", + "label": "Agency & Consulting" + }, + "arts-crafts": { + "primaryType": "business", + "slug": "arts-crafts", + "label": "Arts & Crafts" + }, + "autos-repair": { + "primaryType": "business", + "slug": "autos-repair", + "label": "Autos & Repair" + }, + "child-care": { + "primaryType": "business", + "slug": "child-care", + "label": "Child Care" + }, + "events": { + "primaryType": "business", + "slug": "events", + "label": "Events" + }, + "finance": { + "primaryType": "business", + "slug": "finance", + "label": "Finance" + }, + "garden-florist": { + "primaryType": "business", + "slug": "garden-florist", + "label": "Florist & Garden Center" + }, + "hr-recruiting": { + "primaryType": "business", + "slug": "hr-recruiting", + "label": "HR & Recruiting" + }, + "insurance": { + "primaryType": "business", + "slug": "insurance", + "label": "Insurance" + }, + "legal": { + "primaryType": "business", + "slug": "legal", + "label": "Legal" + }, + "marketing": { + "primaryType": "business", + "slug": "marketing", + "label": "Marketing" + }, + "outdoors": { + "primaryType": "business", + "slug": "outdoors", + "label": "Outdoors" + }, + "pr-communications": { + "primaryType": "business", + "slug": "pr-communications", + "label": "PR & Communications" + }, + "real-estate-management": { + "primaryType": "business", + "slug": "real-estate-management", + "label": "Real Estate & Management" + }, + "shopping-retail": { + "primaryType": "business", + "slug": "shopping-retail", + "label": "Shopping & Retail" + }, + "trades-repair-services": { + "primaryType": "business", + "slug": "trades-repair-services", + "label": "Trades & Repair Services" + }, + "weddings": { + "primaryType": "business", + "slug": "weddings", + "label": "Weddings" + } + } + } + } + } +}