Tweak: One click site [ED-6569] (elementor#17947)

Tweak:  Import-export CPT [ED-6163]

core/app/assets/js/ui/atoms/select.js

@@ -19,11 +19,11 @@ export default function Select( props ) {
 }
 Select.propTypes = {
 	className: PropTypes.string,
-	value: PropTypes.string,
 	onChange: PropTypes.func,
 	options: PropTypes.array,
 	elRef: PropTypes.object,
 	multiple: PropTypes.bool,
+	value: PropTypes.oneOfType( [ PropTypes.array, PropTypes.string ] ),
 };
 Select.defaultProps = {
 	className: '',

core/app/assets/js/ui/molecules/select2.js

@@ -7,6 +7,7 @@ import './select2.scss';
  *
  * @returns {{placeholder: string, allowClear: boolean, dir: string}}
  */
+
 const getDefaultSettings = () => ( {
 	allowClear: true,
 	placeholder: '',
@@ -29,6 +30,7 @@ export default function Select2( props ) {
 			.select2( {
 				...getDefaultSettings(),
 				...props.settings,
+				placeholder: props.placeholder,
 			} )
 			.on( 'select2:select select2:unselect', props.onChange );
 
@@ -46,18 +48,27 @@ export default function Select2( props ) {
 		jQuery( ref.current ).val( props.value ).trigger( 'change' );
 	}, [ props.value ] );
 
-	return <Select multiple={ props.multiple } value={ props.value } onChange={ props.onChange } elRef={ ref } options={ props.options }/>;
+	return <Select
+		multiple={ props.multiple }
+		value={ props.value }
+		onChange={ props.onChange }
+		elRef={ ref }
+		options={ props.options }
+		placeholder={props.placeholder}
+	/>;
 }
 Select2.propTypes = {
-	value: PropTypes.string,
+	value: PropTypes.oneOfType( [ PropTypes.array, PropTypes.string ] ),
 	onChange: PropTypes.func,
 	onReady: PropTypes.func,
 	options: PropTypes.array,
 	settings: PropTypes.object,
 	multiple: PropTypes.bool,
+	placeholder: PropTypes.string,
 };
 Select2.defaultProps = {
 	settings: {},
 	options: [],
 	dependencies: [],
+	placeholder: '',
 };

core/app/modules/import-export/assets/js/context/shared-context/shared-context-provider.js

@@ -10,6 +10,8 @@ export default function SharedContextProvider( props ) {
 	const initialState = {
 		includes: kitContentData.map( ( item ) => item.type ),
 		referrer: null,
+		customPostTypes: [],
+		selectedCustomPostTypes: [],
 	},
 	[ data, dispatch ] = useReducer( reducer, initialState );
 

core/app/modules/import-export/assets/js/context/shared-context/shared-context-reducer.js

@@ -10,6 +10,10 @@ export const reducer = ( state, { type, payload } ) => {
 			return { ...state, referrer: payload };
 		case 'SET_INCLUDES':
 			return { ...state, includes: payload };
+		case 'SET_CPT':
+			return { ...state, customPostTypes: payload };
+		case 'SET_SELECTED_CPT':
+			return { ...state, selectedCustomPostTypes: payload };
 		default:
 			return state;
 	}

core/app/modules/import-export/assets/js/hooks/use-kit.js

@@ -30,7 +30,7 @@ export default function useKit() {
 				},
 			} );
 		},
-		importKit = ( { session, include, overrideConditions, referrer } ) => {
+		importKit = ( { session, include, overrideConditions, referrer, selectedCustomPostTypes } ) => {
 			const ajaxConfig = {
 				data: {
 					action: IMPORT_KIT_KEY,
@@ -47,18 +47,23 @@ export default function useKit() {
 				ajaxConfig.data.data.referrer = referrer;
 			}
 
+			if ( selectedCustomPostTypes ) {
+				ajaxConfig.data.data.selectedCustomPostTypes = selectedCustomPostTypes;
+			}
+
 			ajaxConfig.data.data = JSON.stringify( ajaxConfig.data.data );
 
 			setAjax( ajaxConfig );
 		},
-		exportKit = ( { include, kitInfo, plugins } ) => {
+		exportKit = ( { include, kitInfo, plugins, selectedCustomPostTypes } ) => {
 			setAjax( {
 				data: {
 					action: EXPORT_KIT_KEY,
 					data: JSON.stringify( {
 						include,
 						kitInfo,
 						plugins,
+						selectedCustomPostTypes,
 					} ),
 				},
 			} );

core/app/modules/import-export/assets/js/pages/export/export-kit/export-kit.js

@@ -1,7 +1,9 @@
 import React, { useEffect, useContext } from 'react';
 
 import { ExportContext } from '../../../context/export-context/export-context-provider';
+import { SharedContext } from '../../../context/shared-context/shared-context-provider';
 
+import { cptObjectToOptionsArray } from '../../../shared/cpt-select-box/cpt-object-to-options-array';
 import Layout from '../../../templates/layout';
 import PageHeader from '../../../ui/page-header/page-header';
 import KitContent from '../../../shared/kit-content/kit-content';
@@ -16,6 +18,7 @@ import './export-kit.scss';
 
 export default function ExportKit() {
 	const exportContext = useContext( ExportContext ),
+	sharedContext = useContext( SharedContext ),
 		getFooter = () => (
 			<ActionsFooter>
 				<Button
@@ -34,6 +37,7 @@ export default function ExportKit() {
 
 	useEffect( () => {
 		exportContext.dispatch( { type: 'SET_IS_EXPORT_PROCESS_STARTED', payload: true } );
+		sharedContext.dispatch( { type: 'SET_CPT', payload: cptObjectToOptionsArray( elementorAppConfig[ 'import-export' ].summaryTitles.content?.customPostTypes, 'plural' ) } );
 	}, [] );
 
 	return (

core/app/modules/import-export/assets/js/pages/export/export-process/export-process.js

@@ -23,7 +23,7 @@ export default function ExportProcess() {
 			navigate( 'export' );
 		},
 		exportKit = () => {
-			const { includes } = sharedContext.data;
+			const { includes, selectedCustomPostTypes } = sharedContext.data;
 
 			/*
 				Adding the plugins just before the export process begins for not mixing the kit-content selection with the plugins.
@@ -34,6 +34,7 @@ export default function ExportProcess() {
 				include: [ ...includes, 'plugins' ],
 				kitInfo,
 				plugins: pluginsData,
+				selectedCustomPostTypes,
 			} );
 		};
 

core/app/modules/import-export/assets/js/pages/import/import-content/components/import-content-display/import-content-display.js

@@ -1,7 +1,10 @@
+import React, { useContext, useEffect } from 'react';
 import KitContent from '../../../../../shared/kit-content/kit-content';
+import { SharedContext } from '../../../../../context/shared-context/shared-context-provider';
 import kitContentData from '../../../../../shared/kit-content-data/kit-content-data';
 import Notice from 'elementor-app/ui/molecules/notice';
 import InlineLink from 'elementor-app/ui/molecules/inline-link';
+import { cptObjectToOptionsArray } from '../../../../../shared/cpt-select-box/cpt-object-to-options-array';
 
 export default function ImportContentDisplay( {
 	manifest,
@@ -10,6 +13,7 @@ export default function ImportContentDisplay( {
 	isAllRequiredPluginsSelected,
 	onResetProcess,
 } ) {
+	const sharedContext = useContext( SharedContext );
 	// Getting the kit data from the manifest.
 	const kitData = kitContentData.filter( ( { type } ) => {
 		const contentType = 'settings' === type ? 'site-settings' : type,
@@ -18,6 +22,10 @@ export default function ImportContentDisplay( {
 		return ! ! ( Array.isArray( data ) ? data.length : data );
 	} );
 
+	useEffect( () => {
+		sharedContext.dispatch( { type: 'SET_CPT', payload: cptObjectToOptionsArray( manifest?.[ 'custom-post-type-title' ], 'label' ) } );
+	}, [] );
+
 	if ( ! kitData.length && hasPlugins ) {
 		return (
 			<Notice color="info" label={ __( 'Note:', 'elementor' ) }>
@@ -43,7 +51,7 @@ export default function ImportContentDisplay( {
 				</Notice>
 			}
 
-			<KitContent contentData={ kitData } hasPro={ hasPro } />;
+			<KitContent contentData={ kitData } hasPro={ hasPro } />
 		</>
 	);
 }

core/app/modules/import-export/assets/js/pages/import/import-content/import-content.js

@@ -47,7 +47,6 @@ export default function ImportContent() {
 						__( "All items are already selected by default. Uncheck the ones you don't want.", 'elementor' ),
 					] }
 				/>
-
 				<ImportContentDisplay
 					manifest={ uploadedData?.manifest }
 					hasPro={ isProInstalledDuringProcess }

core/app/modules/import-export/assets/js/pages/import/import-process/import-process.js

@@ -21,7 +21,7 @@ export default function ImportProcess() {
 		[ startImport, setStartImport ] = useState( false ),
 		{ kitState, kitActions, KIT_STATUS_MAP } = useKit(),
 		{ referrer, file_url: fileURL, action_type: actionType } = useQueryParams().getAll(),
-		{ includes } = sharedContext.data || {},
+		{ includes, selectedCustomPostTypes } = sharedContext.data || {},
 		{ file, uploadedData, importedData, overrideConditions } = importContext.data || {},
 		isKitHasSvgAssets = useMemo( () => includes.some( ( item ) => [ 'templates', 'content' ].includes( item ) ), [ includes ] ),
 		{ navigateToMainScreen } = useImportActions(),
@@ -71,6 +71,7 @@ export default function ImportProcess() {
 				include: includes,
 				overrideConditions: overrideConditions,
 				referrer,
+				selectedCustomPostTypes,
 			} );
 		}
 	}, [ startImport ] );

core/app/modules/import-export/assets/js/shared/cpt-select-box/cpt-object-to-options-array.js

@@ -0,0 +1,11 @@
+export const cptObjectToOptionsArray = ( cptObject, label = 'label' ) => {
+	const cptOptionsArray = [];
+	// eslint-disable-next-line no-unused-expressions
+	if ( cptObject && label ) {
+		Object.keys( cptObject ).forEach( ( key ) => cptOptionsArray.push( {
+			label: cptObject[ key ][ label ],
+			value: key,
+		} ) );
+	}
+	return cptOptionsArray;
+};

core/app/modules/import-export/assets/js/shared/cpt-select-box/cpt-select-box.js

@@ -0,0 +1,53 @@
+import React, { useContext, useState, useEffect } from 'react';
+import { SharedContext } from '../../context/shared-context/shared-context-provider';
+import Select2 from 'elementor-app/ui/molecules/select2';
+import Text from 'elementor-app/ui/atoms/text';
+import TextField from 'elementor-app/ui/atoms/text-field';
+
+export default function CptSelectBox() {
+	const sharedContext = useContext( SharedContext ),
+	{ customPostTypes } = sharedContext.data || [],
+	[ selected, setSelected ] = useState( [] );
+
+	useEffect( () => {
+		setSelected( arrayValueIterator( customPostTypes ) );
+	}, [ customPostTypes ] );
+
+	useEffect( () => {
+		sharedContext.dispatch( { type: 'SET_SELECTED_CPT', payload: selected } );
+	}, [ selected ] );
+
+	const arrayValueIterator = ( array ) => {
+		return array.map( ( { value } ) => value );
+	};
+
+	const selectedCpt = ( selectedValue ) => {
+		setSelected( arrayValueIterator( Array.from( selectedValue ) ) );
+	};
+
+	return (
+		<>
+			<Text variant="sm" tag="p" className="e-app-export-kit-content__description">
+				{__( 'Custom Post Type', 'elementor' )}
+			</Text>
+			{customPostTypes.length > 0 ?
+				<Select2
+					multiple
+					settings={ { width: '100%' } }
+					options={customPostTypes}
+					onChange={( e ) => selectedCpt( e.target.selectedOptions )}
+					value={ selected }
+					placeholder={ __( 'Click to select custom post types', 'elementor' )}
+				/> :
+				<TextField
+					variant="outlined"
+					placeholder={ __( 'No custom post types in your site...', 'elementor' ) }
+					className="e-app-export-kit-content__disabled"
+				/>
+			}
+			<Text variant="sm" tag="span" className="e-app-export-kit-content__small-notice">
+				{__( 'Add the custom posts types to export. The latest 20 items from each type will be included.', 'elementor' )}
+			</Text>
+		</>
+	);
+}

core/app/modules/import-export/assets/js/shared/kit-content-data/kit-content-data.js

@@ -33,7 +33,8 @@ const kitContentData = [
 					__( 'Elementor Posts', 'elementor' ),
 					__( 'WP Pages', 'elementor' ),
 					__( 'WP Posts', 'elementor' ),
-					__( 'Custom Post Type', 'elementor' ),
+					__( 'WP Menus', 'elementor' ),
+					__( 'Custom Post Types', 'elementor' ),
 				],
 			},
 		},

core/app/modules/import-export/assets/js/shared/kit-content/kit-content.js

@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 import TemplatesFeatures from './components/templates-features/templates-features';
 import KitContentCheckbox from './components/kit-content-checkbox/kit-content-checkbox';
+import CptOptionsSelectBox from '../cpt-select-box/cpt-select-box';
 import GoProButton from 'elementor-app/molecules/go-pro-button';
 import Box from 'elementor-app/ui/atoms/box';
 import List from 'elementor-app/ui/molecules/list';
@@ -42,26 +43,25 @@ export default function KitContent( { contentData, hasPro } ) {
 				{
 					contentData.map( ( { type, data }, index ) => {
 						const isLockedFeaturesNoPro = data.features?.locked && ! isProExist;
-
 						return (
 							<List.Item padding="20" key={ type } className="e-app-export-kit-content__item">
 								<div
 									onMouseEnter={ () => isLockedFeaturesNoPro && setContainerHoverState( index, true ) }
 									onMouseLeave={ () => isLockedFeaturesNoPro && setContainerHoverState( index, false ) }
 								>
-									<Grid container noWrap>
+									<Grid container noWrap >
 										<KitContentCheckbox type={ type } className="e-app-export-kit-content__checkbox" />
 
-										<Grid item>
+										<Grid item container>
 											<Heading variant="h4" tag="h3" className="e-app-export-kit-content__title">
 												{ data.title }
 											</Heading>
 
-											<Grid item container>
-												<Text variant="sm" tag="span" className="e-app-export-kit-content__description">
+											<Grid item container direction="column">
+												<Text variant="sm" tag="p" className="e-app-export-kit-content__description">
 													{ data.description || getTemplateFeatures( data.features, index ) }
 												</Text>
-
+												{ 'content' === type && <CptOptionsSelectBox /> }
 												{
 													isLockedFeaturesNoPro &&
 													<GoProButton

core/app/modules/import-export/assets/js/shared/kit-content/kit-content.scss

@@ -26,6 +26,11 @@ $root: e-app-export-kit-content;
 	&__notice {
 		margin-top: spacing(16);
 	}
+
+  	&__small-notice {
+	  font-style: italic;
+	  color: var(--e-app-export-kit-content-description-color);
+	}
 }
 
 .eps-theme-dark {

core/app/modules/import-export/directories/base.php

@@ -107,7 +107,6 @@ protected function export() {
 
 	/**
 	 * @param array $import_settings
-	 *
 	 * @return array
 	 */
 	protected function import( array $import_settings ) {