/** * External dependencies */ import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; import { compose } from '@wordpress/compose'; import { Button, Card, CardBody, CardFooter, TabPanel, __experimentalText as Text, } from '@wordpress/components'; import { withDispatch, withSelect } from '@wordpress/data'; import { SelectControl, Form, TextControl } from '@woocommerce/components'; import { ONBOARDING_STORE_NAME, PLUGINS_STORE_NAME, SETTINGS_STORE_NAME, } from '@woocommerce/data'; import { recordEvent } from '@woocommerce/tracks'; /** * Internal dependencies */ import { CurrencyContext } from '~/lib/currency-context'; import { createNoticesFromResponse } from '~/lib/notices'; import { platformOptions } from '../../data/platform-options'; import { sellingVenueOptions } from '../../data/selling-venue-options'; import { getRevenueOptions } from '../../data/revenue-options'; import { getProductCountOptions } from '../../data/product-options'; import { SelectiveExtensionsBundle } from './selective-extensions-bundle'; import './style.scss'; const BUSINESS_DETAILS_TAB_NAME = 'business-details'; const FREE_FEATURES_TAB_NAME = 'free-features'; class BusinessDetails extends Component { constructor() { super(); this.state = { isPopoverVisible: false, isValid: false, currentTab: 'business-details', savedValues: null, }; this.onContinue = this.onContinue.bind( this ); this.validate = this.validate.bind( this ); } async onContinue( extensionInstallationOptions ) { const { createNotice, goToNextStep, installAndActivatePlugins, updateProfileItems, } = this.props; const { other_platform: otherPlatform, other_platform_name: otherPlatformName, product_count: productCount, revenue, selling_venues: sellingVenues, } = this.state.savedValues; const { getCurrencyConfig } = this.context; const businessExtensions = Object.keys( extensionInstallationOptions ).filter( ( key ) => extensionInstallationOptions[ key ] && key !== 'install_extensions' ); recordEvent( 'storeprofiler_store_business_features_continue', { product_number: productCount, already_selling: sellingVenues, currency: getCurrencyConfig().code, revenue, used_platform: otherPlatform, used_platform_name: otherPlatformName, all_extensions_installed: Object.values( extensionInstallationOptions ).every( ( val ) => val ), install_woocommerce_services: extensionInstallationOptions[ 'woocommerce-services' ], install_mailchimp: extensionInstallationOptions[ 'mailchimp-for-woocommerce' ], install_jetpack: extensionInstallationOptions.jetpack, install_google_ads: extensionInstallationOptions[ 'kliken-marketing-for-google' ], install_facebook: extensionInstallationOptions[ 'facebook-for-woocommerce' ], install_wcpay: extensionInstallationOptions[ 'woocommerce-payments' ], install_creative_mail: extensionInstallationOptions[ 'creative-mail-by-constant-contact' ], } ); const updates = { other_platform: otherPlatform, other_platform_name: otherPlatform === 'other' ? otherPlatformName : '', product_count: productCount, revenue, selling_venues: sellingVenues, business_extensions: businessExtensions, }; // Remove possible empty values like `revenue` and `other_platform`. Object.keys( updates ).forEach( ( key ) => updates[ key ] === '' && delete updates[ key ] ); const promises = [ updateProfileItems( updates ).catch( () => { throw new Error(); } ), ]; if ( businessExtensions.length ) { promises.push( installAndActivatePlugins( businessExtensions ) .then( ( response ) => { createNoticesFromResponse( response ); } ) .catch( ( error ) => { createNoticesFromResponse( error ); throw new Error(); } ) ); } Promise.all( promises ) .then( () => { goToNextStep(); } ) .catch( () => { createNotice( 'error', __( 'There was a problem updating your business details', 'woocommerce-admin' ) ); } ); } validate( values ) { const errors = {}; if ( ! values.product_count.length ) { errors.product_count = __( 'This field is required', 'woocommerce-admin' ); } if ( ! values.selling_venues.length ) { errors.selling_venues = __( 'This field is required', 'woocommerce-admin' ); } if ( ! values.other_platform.length && [ 'other', 'brick-mortar-other' ].includes( values.selling_venues ) ) { errors.other_platform = __( 'This field is required', 'woocommerce-admin' ); } if ( ! values.other_platform_name && values.other_platform === 'other' && [ 'other', 'brick-mortar-other' ].includes( values.selling_venues ) ) { errors.other_platform_name = __( 'This field is required', 'woocommerce-admin' ); } if ( ! values.revenue.length && [ 'other', 'brick-mortar', 'brick-mortar-other', 'other-woocommerce', ].includes( values.selling_venues ) ) { errors.revenue = __( 'This field is required', 'woocommerce-admin' ); } if ( Object.keys( errors ).length === 0 ) { this.setState( { isValid: true } ); } return errors; } renderBusinessDetailsStep() { const { goToNextStep, isInstallingActivating, hasInstallActivateError, } = this.props; const { getCurrencyConfig } = this.context; const productCountOptions = getProductCountOptions( getCurrencyConfig() ); return (
); } renderFreeFeaturesStep() { const { isInstallingActivating, settings, profileItems } = this.props; const country = settings.woocommerce_default_country ? settings.woocommerce_default_country : null; return ( <>