136 lines
3.2 KiB
JavaScript
136 lines
3.2 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import {
|
|
createSlotFill,
|
|
DropdownMenu,
|
|
MenuGroup,
|
|
MenuItemsChoice,
|
|
} from '@wordpress/components';
|
|
import { useSelect } from '@wordpress/data';
|
|
import { __ } from '@wordpress/i18n';
|
|
import {
|
|
useUserPreferences,
|
|
ONBOARDING_STORE_NAME,
|
|
OPTIONS_STORE_NAME,
|
|
} from '@woocommerce/data';
|
|
import { recordEvent } from '@woocommerce/tracks';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { DisplayIcon } from './icons/display';
|
|
import { SingleColumnIcon } from './icons/single-column';
|
|
import { TwoColumnsIcon } from './icons/two-columns';
|
|
|
|
const { Fill, Slot } = createSlotFill( 'DisplayOptions' );
|
|
|
|
Fill.Slot = Slot;
|
|
|
|
export { Fill as DisplayOption };
|
|
|
|
const LAYOUTS = [
|
|
{
|
|
value: 'single_column',
|
|
label: (
|
|
<>
|
|
<SingleColumnIcon />
|
|
{ __( 'Single column', 'woocommerce' ) }
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
value: 'two_columns',
|
|
label: (
|
|
<>
|
|
<TwoColumnsIcon />
|
|
{ __( 'Two columns', 'woocommerce' ) }
|
|
</>
|
|
),
|
|
},
|
|
];
|
|
|
|
export const DisplayOptions = () => {
|
|
const { defaultHomescreenLayout, taskListComplete, isTaskListHidden } =
|
|
useSelect( ( select ) => {
|
|
const { getOption } = select( OPTIONS_STORE_NAME );
|
|
const { getTaskList } = select( ONBOARDING_STORE_NAME );
|
|
const taskList = getTaskList( 'setup' );
|
|
|
|
return {
|
|
defaultHomescreenLayout:
|
|
getOption( 'woocommerce_default_homepage_layout' ) ||
|
|
'single_column',
|
|
taskListComplete: taskList?.isComplete,
|
|
isTaskListHidden: taskList?.isHidden,
|
|
};
|
|
} );
|
|
const { updateUserPreferences, homepage_layout: layout } =
|
|
useUserPreferences();
|
|
|
|
const shouldShowStoreLinks = taskListComplete || isTaskListHidden;
|
|
const hasTwoColumnContent =
|
|
shouldShowStoreLinks || window.wcAdminFeatures.analytics;
|
|
|
|
return (
|
|
<Slot>
|
|
{ ( fills ) => {
|
|
// If there is no fill to render and only single column content, don't render the display.
|
|
if ( fills.length === 0 && ! hasTwoColumnContent ) {
|
|
return null;
|
|
}
|
|
return (
|
|
<DropdownMenu
|
|
icon={ <DisplayIcon /> }
|
|
/* translators: button label text should, if possible, be under 16 characters. */
|
|
label={ __( 'Display options', 'woocommerce' ) }
|
|
toggleProps={ {
|
|
className:
|
|
'woocommerce-layout__activity-panel-tab display-options',
|
|
onClick: () =>
|
|
recordEvent( 'homescreen_display_click' ),
|
|
} }
|
|
popoverProps={ {
|
|
className:
|
|
'woocommerce-layout__activity-panel-popover',
|
|
} }
|
|
>
|
|
{ ( { onClose } ) => (
|
|
<>
|
|
{ fills }
|
|
{ hasTwoColumnContent ? (
|
|
<MenuGroup
|
|
className="woocommerce-layout__homescreen-display-options"
|
|
label={ __( 'Layout', 'woocommerce' ) }
|
|
>
|
|
<MenuItemsChoice
|
|
choices={ LAYOUTS }
|
|
onSelect={ ( newLayout ) => {
|
|
updateUserPreferences( {
|
|
homepage_layout: newLayout,
|
|
} );
|
|
onClose();
|
|
recordEvent(
|
|
'homescreen_display_option',
|
|
{
|
|
display_option:
|
|
newLayout,
|
|
}
|
|
);
|
|
} }
|
|
value={
|
|
layout ||
|
|
defaultHomescreenLayout
|
|
}
|
|
/>
|
|
</MenuGroup>
|
|
) : null }
|
|
</>
|
|
) }
|
|
</DropdownMenu>
|
|
);
|
|
} }
|
|
</Slot>
|
|
);
|
|
};
|