2020-05-12 23:14:08 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
2020-11-11 17:20:15 +00:00
|
|
|
import {
|
|
|
|
Suspense,
|
|
|
|
lazy,
|
|
|
|
useCallback,
|
|
|
|
useLayoutEffect,
|
|
|
|
useRef,
|
|
|
|
useState,
|
|
|
|
} from '@wordpress/element';
|
2020-05-21 17:15:08 +00:00
|
|
|
import { compose } from '@wordpress/compose';
|
2020-09-03 21:45:40 +00:00
|
|
|
import { withDispatch, withSelect } from '@wordpress/data';
|
2020-05-12 23:14:08 +00:00
|
|
|
import classnames from 'classnames';
|
2020-05-21 17:15:08 +00:00
|
|
|
import PropTypes from 'prop-types';
|
2020-10-22 22:13:14 +00:00
|
|
|
import {
|
|
|
|
useUserPreferences,
|
|
|
|
NOTES_STORE_NAME,
|
|
|
|
OPTIONS_STORE_NAME,
|
|
|
|
} from '@woocommerce/data';
|
2020-11-06 17:53:03 +00:00
|
|
|
import { __ } from '@wordpress/i18n';
|
2021-10-20 16:16:22 +00:00
|
|
|
import moment from 'moment';
|
|
|
|
import { useExperiment } from '@woocommerce/explat';
|
2020-06-10 23:49:27 +00:00
|
|
|
|
2020-05-12 23:14:08 +00:00
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
2021-02-22 18:40:44 +00:00
|
|
|
import ActivityHeader from '../header/activity-panel/activity-header';
|
|
|
|
import { ActivityPanel } from './activity-panel';
|
|
|
|
import { Column } from './column';
|
|
|
|
import InboxPanel from '../inbox-panel';
|
|
|
|
import { IntroModal as NavigationIntroModal } from '../navigation/components/intro-modal';
|
2020-05-12 23:14:08 +00:00
|
|
|
import StatsOverview from './stats-overview';
|
2021-02-22 18:40:44 +00:00
|
|
|
import { StoreManagementLinks } from '../store-management-links';
|
2021-08-23 14:29:20 +00:00
|
|
|
import { TasksPlaceholder } from '../tasks';
|
2021-02-22 18:40:44 +00:00
|
|
|
import {
|
|
|
|
WELCOME_MODAL_DISMISSED_OPTION_NAME,
|
|
|
|
WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME,
|
|
|
|
} from './constants';
|
2021-01-08 02:06:52 +00:00
|
|
|
import { WelcomeFromCalypsoModal } from './welcome-from-calypso-modal';
|
2021-02-22 18:40:44 +00:00
|
|
|
import { WelcomeModal } from './welcome-modal';
|
2020-11-04 00:33:04 +00:00
|
|
|
import './style.scss';
|
|
|
|
import '../dashboard/style.scss';
|
|
|
|
|
2021-08-23 14:29:20 +00:00
|
|
|
const Tasks = lazy( () =>
|
|
|
|
import( /* webpackChunkName: "tasks" */ '../tasks' )
|
|
|
|
);
|
|
|
|
|
2021-10-20 16:16:22 +00:00
|
|
|
const TwoColumnTasks = lazy( () =>
|
|
|
|
import( /* webpackChunkName: "two-column-tasks" */ '../two-column-tasks' )
|
|
|
|
);
|
|
|
|
|
2021-10-26 04:08:05 +00:00
|
|
|
const TwoColumnTasksExtended = lazy( () =>
|
|
|
|
import(
|
|
|
|
/* webpackChunkName: "two-column-tasks-extended" */ '../two-column-tasks/extended-task'
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
2020-08-05 00:14:56 +00:00
|
|
|
export const Layout = ( {
|
2020-11-06 17:53:03 +00:00
|
|
|
defaultHomescreenLayout,
|
2020-08-13 13:23:38 +00:00
|
|
|
isBatchUpdating,
|
2020-08-05 00:14:56 +00:00
|
|
|
query,
|
2021-03-25 21:54:24 +00:00
|
|
|
taskListComplete,
|
2021-01-27 18:40:02 +00:00
|
|
|
bothTaskListsHidden,
|
2020-08-05 00:14:56 +00:00
|
|
|
shouldShowWelcomeModal,
|
2021-01-08 02:06:52 +00:00
|
|
|
shouldShowWelcomeFromCalypsoModal,
|
2021-03-25 21:54:24 +00:00
|
|
|
isTaskListHidden,
|
2020-08-05 00:14:56 +00:00
|
|
|
updateOptions,
|
|
|
|
} ) => {
|
2020-10-22 22:13:14 +00:00
|
|
|
const userPrefs = useUserPreferences();
|
2021-06-30 23:16:11 +00:00
|
|
|
const shouldShowStoreLinks = taskListComplete || isTaskListHidden;
|
|
|
|
const hasTwoColumnContent =
|
|
|
|
shouldShowStoreLinks || window.wcAdminFeatures.analytics;
|
2020-10-22 22:13:14 +00:00
|
|
|
const twoColumns =
|
2020-11-06 17:53:03 +00:00
|
|
|
( userPrefs.homepage_layout || defaultHomescreenLayout ) ===
|
2021-06-30 23:16:11 +00:00
|
|
|
'two_columns' && hasTwoColumnContent;
|
2020-05-12 23:14:08 +00:00
|
|
|
const [ showInbox, setShowInbox ] = useState( true );
|
|
|
|
|
2021-01-27 18:40:02 +00:00
|
|
|
const isTaskListEnabled = bothTaskListsHidden === false;
|
2021-01-08 03:24:23 +00:00
|
|
|
const isDashboardShown = ! query.task;
|
2020-05-21 17:15:08 +00:00
|
|
|
|
2021-10-20 16:16:22 +00:00
|
|
|
const [
|
|
|
|
isLoadingExperimentAssignment,
|
|
|
|
experimentAssignment,
|
|
|
|
] = useExperiment(
|
|
|
|
'woocommerce_tasklist_progression_headercard_' + moment().format( 'MM' )
|
|
|
|
);
|
|
|
|
|
|
|
|
const isRunningTwoColumnExperiment =
|
|
|
|
experimentAssignment?.variationName === 'treatment';
|
|
|
|
|
2020-08-13 13:23:38 +00:00
|
|
|
if ( isBatchUpdating && ! showInbox ) {
|
2020-06-05 16:28:25 +00:00
|
|
|
setShowInbox( true );
|
|
|
|
}
|
|
|
|
|
2020-11-11 17:20:15 +00:00
|
|
|
const isWideViewport = useRef( true );
|
|
|
|
const maybeToggleColumns = useCallback( () => {
|
|
|
|
isWideViewport.current = window.innerWidth >= 782;
|
|
|
|
}, [] );
|
|
|
|
|
|
|
|
useLayoutEffect( () => {
|
|
|
|
maybeToggleColumns();
|
|
|
|
window.addEventListener( 'resize', maybeToggleColumns );
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
window.removeEventListener( 'resize', maybeToggleColumns );
|
|
|
|
};
|
|
|
|
}, [ maybeToggleColumns ] );
|
|
|
|
|
|
|
|
const shouldStickColumns = isWideViewport.current && twoColumns;
|
|
|
|
|
2020-05-21 17:15:08 +00:00
|
|
|
const renderColumns = () => {
|
|
|
|
return (
|
2020-11-06 17:53:03 +00:00
|
|
|
<>
|
2020-11-11 17:20:15 +00:00
|
|
|
<Column shouldStick={ shouldStickColumns }>
|
2021-10-20 16:16:22 +00:00
|
|
|
{ ! isRunningTwoColumnExperiment && (
|
|
|
|
<ActivityHeader
|
|
|
|
className="your-store-today"
|
|
|
|
title={ __(
|
|
|
|
'Your store today',
|
|
|
|
'woocommerce-admin'
|
|
|
|
) }
|
|
|
|
subtitle={ __(
|
|
|
|
"To do's, tips, and insights for your business",
|
|
|
|
'woocommerce-admin'
|
|
|
|
) }
|
|
|
|
/>
|
|
|
|
) }
|
|
|
|
{ ! isRunningTwoColumnExperiment && <ActivityPanel /> }
|
2020-05-21 17:15:08 +00:00
|
|
|
{ isTaskListEnabled && renderTaskList() }
|
2021-01-28 13:33:36 +00:00
|
|
|
<InboxPanel />
|
2020-11-06 17:53:03 +00:00
|
|
|
</Column>
|
2020-11-11 17:20:15 +00:00
|
|
|
<Column shouldStick={ shouldStickColumns }>
|
2021-06-30 23:16:11 +00:00
|
|
|
{ window.wcAdminFeatures.analytics && <StatsOverview /> }
|
2021-03-25 21:54:24 +00:00
|
|
|
{ shouldShowStoreLinks && <StoreManagementLinks /> }
|
2020-11-06 17:53:03 +00:00
|
|
|
</Column>
|
|
|
|
</>
|
2020-05-21 17:15:08 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const renderTaskList = () => {
|
2021-10-20 16:16:22 +00:00
|
|
|
if ( twoColumns && isRunningTwoColumnExperiment ) {
|
2021-10-26 04:08:05 +00:00
|
|
|
return (
|
|
|
|
// When running the two-column experiment, we still need to render
|
|
|
|
// the component in the left column for the extended task list.
|
|
|
|
<TwoColumnTasksExtended query={ query } />
|
|
|
|
);
|
2021-10-20 16:16:22 +00:00
|
|
|
} else if (
|
|
|
|
! twoColumns &&
|
|
|
|
isRunningTwoColumnExperiment &&
|
|
|
|
! isLoadingExperimentAssignment
|
|
|
|
) {
|
|
|
|
return (
|
2021-10-26 04:08:05 +00:00
|
|
|
<>
|
|
|
|
<TwoColumnTasks
|
|
|
|
query={ query }
|
|
|
|
userPreferences={ userPrefs }
|
|
|
|
twoColumns={ twoColumns }
|
|
|
|
/>
|
|
|
|
<TwoColumnTasksExtended query={ query } />
|
|
|
|
</>
|
2021-10-20 16:16:22 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-05-21 17:15:08 +00:00
|
|
|
return (
|
2021-10-05 18:20:28 +00:00
|
|
|
<Suspense fallback={ <TasksPlaceholder query={ query } /> }>
|
|
|
|
<Tasks query={ query } />
|
2020-05-21 17:15:08 +00:00
|
|
|
</Suspense>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-05-12 23:14:08 +00:00
|
|
|
return (
|
2021-10-20 16:16:22 +00:00
|
|
|
<>
|
|
|
|
{ twoColumns && isRunningTwoColumnExperiment && (
|
|
|
|
<TwoColumnTasks query={ query } userPreferences={ userPrefs } />
|
2021-01-08 02:06:52 +00:00
|
|
|
) }
|
2021-10-20 16:16:22 +00:00
|
|
|
<div
|
|
|
|
className={ classnames( 'woocommerce-homescreen', {
|
|
|
|
'two-columns': twoColumns,
|
|
|
|
} ) }
|
|
|
|
>
|
|
|
|
{ isDashboardShown ? renderColumns() : renderTaskList() }
|
|
|
|
{ shouldShowWelcomeModal && (
|
|
|
|
<WelcomeModal
|
|
|
|
onClose={ () => {
|
|
|
|
updateOptions( {
|
|
|
|
[ WELCOME_MODAL_DISMISSED_OPTION_NAME ]: 'yes',
|
|
|
|
} );
|
|
|
|
} }
|
|
|
|
/>
|
|
|
|
) }
|
|
|
|
{ shouldShowWelcomeFromCalypsoModal && (
|
|
|
|
<WelcomeFromCalypsoModal
|
|
|
|
onClose={ () => {
|
|
|
|
updateOptions( {
|
|
|
|
[ WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME ]:
|
|
|
|
'yes',
|
|
|
|
} );
|
|
|
|
} }
|
|
|
|
/>
|
|
|
|
) }
|
|
|
|
{ window.wcAdminFeatures.navigation && (
|
|
|
|
<NavigationIntroModal />
|
|
|
|
) }
|
|
|
|
</div>
|
|
|
|
</>
|
2020-05-12 23:14:08 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-05-21 17:15:08 +00:00
|
|
|
Layout.propTypes = {
|
2020-05-27 16:08:39 +00:00
|
|
|
/**
|
|
|
|
* If the task list has been completed.
|
|
|
|
*/
|
|
|
|
taskListComplete: PropTypes.bool,
|
2020-05-21 17:15:08 +00:00
|
|
|
/**
|
|
|
|
* If the task list is hidden.
|
|
|
|
*/
|
2021-01-27 18:40:02 +00:00
|
|
|
bothTaskListsHidden: PropTypes.bool,
|
2020-05-21 17:15:08 +00:00
|
|
|
/**
|
|
|
|
* Page query, used to determine the current task if any.
|
|
|
|
*/
|
|
|
|
query: PropTypes.object.isRequired,
|
2020-08-05 00:14:56 +00:00
|
|
|
/**
|
|
|
|
* If the welcome modal should display
|
|
|
|
*/
|
|
|
|
shouldShowWelcomeModal: PropTypes.bool,
|
2021-01-08 02:06:52 +00:00
|
|
|
/**
|
|
|
|
* If the welcome from Calypso modal should display.
|
|
|
|
*/
|
|
|
|
shouldShowWelcomeFromCalypsoModal: PropTypes.bool,
|
2020-08-05 00:14:56 +00:00
|
|
|
/**
|
|
|
|
* Dispatch an action to update an option
|
|
|
|
*/
|
|
|
|
updateOptions: PropTypes.func.isRequired,
|
2020-05-21 17:15:08 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default compose(
|
2020-09-03 21:45:40 +00:00
|
|
|
withSelect( ( select ) => {
|
2020-08-13 13:23:38 +00:00
|
|
|
const { isNotesRequesting } = select( NOTES_STORE_NAME );
|
2021-08-10 18:58:01 +00:00
|
|
|
const { getOption, hasFinishedResolution } = select(
|
2020-11-11 00:23:33 +00:00
|
|
|
OPTIONS_STORE_NAME
|
|
|
|
);
|
2020-05-21 17:15:08 +00:00
|
|
|
|
2021-01-08 02:06:52 +00:00
|
|
|
const welcomeFromCalypsoModalDismissed =
|
|
|
|
getOption( WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME ) ===
|
|
|
|
'yes';
|
|
|
|
const welcomeFromCalypsoModalDismissedResolved = hasFinishedResolution(
|
|
|
|
'getOption',
|
|
|
|
[ WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME ]
|
|
|
|
);
|
|
|
|
const fromCalypsoUrlArgIsPresent = !! window.location.search.match(
|
|
|
|
'from-calypso'
|
|
|
|
);
|
|
|
|
|
|
|
|
const shouldShowWelcomeFromCalypsoModal =
|
|
|
|
welcomeFromCalypsoModalDismissedResolved &&
|
|
|
|
! welcomeFromCalypsoModalDismissed &&
|
|
|
|
fromCalypsoUrlArgIsPresent;
|
|
|
|
|
2020-08-05 00:14:56 +00:00
|
|
|
const welcomeModalDismissed =
|
2021-02-22 18:40:44 +00:00
|
|
|
getOption( WELCOME_MODAL_DISMISSED_OPTION_NAME ) === 'yes';
|
2020-08-05 00:14:56 +00:00
|
|
|
|
2020-11-11 00:23:33 +00:00
|
|
|
const welcomeModalDismissedHasResolved = hasFinishedResolution(
|
|
|
|
'getOption',
|
2021-02-22 18:40:44 +00:00
|
|
|
[ WELCOME_MODAL_DISMISSED_OPTION_NAME ]
|
2020-11-11 00:23:33 +00:00
|
|
|
);
|
2020-08-05 00:14:56 +00:00
|
|
|
|
|
|
|
const shouldShowWelcomeModal =
|
2021-01-08 02:06:52 +00:00
|
|
|
welcomeModalDismissedHasResolved &&
|
|
|
|
! welcomeModalDismissed &&
|
|
|
|
welcomeFromCalypsoModalDismissedResolved &&
|
|
|
|
! welcomeFromCalypsoModalDismissed;
|
2020-08-05 00:14:56 +00:00
|
|
|
|
2020-11-06 17:53:03 +00:00
|
|
|
const defaultHomescreenLayout =
|
|
|
|
getOption( 'woocommerce_default_homepage_layout' ) ||
|
|
|
|
'single_column';
|
2021-02-10 03:30:29 +00:00
|
|
|
const isTaskListHidden =
|
|
|
|
getOption( 'woocommerce_task_list_hidden' ) === 'yes';
|
2020-11-06 17:53:03 +00:00
|
|
|
|
2020-05-21 17:15:08 +00:00
|
|
|
return {
|
2020-11-06 17:53:03 +00:00
|
|
|
defaultHomescreenLayout,
|
2020-08-24 21:51:41 +00:00
|
|
|
isBatchUpdating: isNotesRequesting( 'batchUpdateNotes' ),
|
2020-08-05 00:14:56 +00:00
|
|
|
shouldShowWelcomeModal,
|
2021-01-08 02:06:52 +00:00
|
|
|
shouldShowWelcomeFromCalypsoModal,
|
2021-02-10 03:30:29 +00:00
|
|
|
isTaskListHidden,
|
2021-01-27 18:40:02 +00:00
|
|
|
bothTaskListsHidden:
|
2021-02-10 03:30:29 +00:00
|
|
|
isTaskListHidden &&
|
2021-01-27 18:40:02 +00:00
|
|
|
getOption( 'woocommerce_extended_task_list_hidden' ) === 'yes',
|
2021-03-25 21:54:24 +00:00
|
|
|
taskListComplete:
|
2021-08-10 18:58:01 +00:00
|
|
|
getOption( 'woocommerce_task_list_complete' ) === 'yes',
|
2020-05-21 17:15:08 +00:00
|
|
|
};
|
2020-08-05 00:14:56 +00:00
|
|
|
} ),
|
|
|
|
withDispatch( ( dispatch ) => ( {
|
|
|
|
updateOptions: dispatch( OPTIONS_STORE_NAME ).updateOptions,
|
|
|
|
} ) )
|
2020-05-21 17:15:08 +00:00
|
|
|
)( Layout );
|