woocommerce/plugins/woocommerce-admin/client/activity-panel/display-options/index.js

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>
);
};