FileMaster

Edit File: import-data.js

import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { RadioButton, Title } from '@bsf/force-ui';
import StepNavButtons from '../components/nav-buttons';
import { useOnboardingState } from '@Onboarding/store';

const options = [
	{
		label: __( 'SEOPress', 'surerank' ),
		value: 'seopress',
	},
	{
		label: __( 'AIO SEO', 'surerank' ),
		value: 'aioseo',
	},
	{
		label: __( 'Yoast SEO', 'surerank' ),
		value: 'yoastseo',
	},
];

const ImportData = () => {
	const [ { import_from = '' }, dispatch ] = useOnboardingState();
	// Local form state
	const [ formState, setFormState ] = useState( import_from );

const handleFormSubmit = ( event ) => {
		event.preventDefault();
	};

const handleChange = ( value ) => {
		setFormState( value );
	};

const handleNext = () => {
		dispatch( {
			import_from: formState,
		} );
	};

return (
		<form className="flex flex-col gap-6" onSubmit={ handleFormSubmit }>
			<div className="space-y-1">
				<Title
					tag="h4"
					title={ __(
						'Import Data From Your Current Plugins',
						'surerank'
					) }
					size="md"
				/>
				<p>
					{ __(
						'We have deducted few SEO plugins installed on your website. Select the plugin from which you want to import',
						'surerank'
					) }
				</p>
			</div>
			{ /* Settings / options */ }
			<div>
				<RadioButton.Group
					columns={ 3 }
					onChange={ handleChange }
					value={ formState }
					vertical
					size="md"
					name="import_from"
				>
					{ options.map( ( option ) => (
						<RadioButton.Button
							key={ option.value }
							buttonWrapperClasses="pl-3 py-3"
							label={ {
								heading: option.label,
							} }
							value={ option.value }
							borderOn
						/>
					) ) }
				</RadioButton.Group>
			</div>
			{ /* Nav Buttons */ }
			<StepNavButtons
				nextProps={ {
					onClick: handleNext,
				} }
			/>
		</form>
	);
};

export default ImportData;

Back