woocommerce/plugins/woocommerce-admin/client/homescreen/layout.js

268 lines
7.3 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import {
Suspense,
lazy,
useCallback,
useLayoutEffect,
useRef,
useState,
} from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { withDispatch, withSelect } from '@wordpress/data';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import {
useUserPreferences,
NOTES_STORE_NAME,
ONBOARDING_STORE_NAME,
OPTIONS_STORE_NAME,
} from '@woocommerce/data';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import ActivityHeader from '~/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';
import StatsOverview from './stats-overview';
import { StoreManagementLinks } from '../store-management-links';
2022-06-01 17:10:20 +00:00
import { TasksPlaceholder, useActiveSetupTasklist } from '../tasks';
import {
WELCOME_MODAL_DISMISSED_OPTION_NAME,
WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME,
} from './constants';
import { WelcomeFromCalypsoModal } from './welcome-from-calypso-modal';
import { WelcomeModal } from './welcome-modal';
import './style.scss';
import '../dashboard/style.scss';
import { getAdminSetting } from '~/utils/admin-settings';
2022-06-01 17:10:20 +00:00
import { ProgressTitle } from '../task-lists';
const Tasks = lazy( () =>
import( /* webpackChunkName: "tasks" */ '../tasks' ).then( ( module ) => ( {
default: module.Tasks,
} ) )
);
export const Layout = ( {
defaultHomescreenLayout,
isBatchUpdating,
query,
taskListComplete,
hasTaskList,
showingProgressHeader,
isLoadingTaskLists,
shouldShowWelcomeModal,
shouldShowWelcomeFromCalypsoModal,
isTaskListHidden,
updateOptions,
} ) => {
const userPrefs = useUserPreferences();
const shouldShowStoreLinks = taskListComplete || isTaskListHidden;
const hasTwoColumnContent =
shouldShowStoreLinks || window.wcAdminFeatures.analytics;
const [ showInbox, setShowInbox ] = useState( true );
const isDashboardShown = ! query.task; // ?&task=<x> query param is used to show tasks instead of the homescreen
2022-06-01 17:10:20 +00:00
const activeSetupTaskList = useActiveSetupTasklist();
const twoColumns =
( userPrefs.homepage_layout || defaultHomescreenLayout ) ===
'two_columns' && hasTwoColumnContent;
if ( isBatchUpdating && ! showInbox ) {
setShowInbox( true );
}
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;
const renderColumns = () => {
return (
<>
<Column shouldStick={ shouldStickColumns }>
{ ! isLoadingTaskLists && ! showingProgressHeader && (
<ActivityHeader
className="your-store-today"
title={ __( 'Your store today', 'woocommerce' ) }
subtitle={ __(
"To do's, tips, and insights for your business",
'woocommerce'
) }
/>
) }
{ <ActivityPanel /> }
{ hasTaskList && renderTaskList() }
<InboxPanel />
</Column>
<Column shouldStick={ shouldStickColumns }>
{ window.wcAdminFeatures.analytics && <StatsOverview /> }
{ shouldShowStoreLinks && <StoreManagementLinks /> }
</Column>
</>
);
};
const renderTaskList = () => {
return (
<Suspense fallback={ <TasksPlaceholder query={ query } /> }>
{ activeSetupTaskList && isDashboardShown && (
<ProgressTitle taskListId={ activeSetupTaskList } />
) }
<Tasks query={ query } />
</Suspense>
);
};
return (
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
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>
</>
);
};
Layout.propTypes = {
/**
* If the task list has been completed.
*/
taskListComplete: PropTypes.bool,
/**
* If any task list is visible.
*/
hasTaskList: PropTypes.bool,
/**
* Page query, used to determine the current task if any.
*/
query: PropTypes.object.isRequired,
/**
* If the welcome modal should display
*/
shouldShowWelcomeModal: PropTypes.bool,
/**
* If the welcome from Calypso modal should display.
*/
shouldShowWelcomeFromCalypsoModal: PropTypes.bool,
/**
* Timestamp of WooCommerce Admin installation.
*/
installTimestamp: PropTypes.string,
/**
* Resolution of WooCommerce Admin installation timetsamp.
*/
installTimestampHasResolved: PropTypes.bool,
/**
* Dispatch an action to update an option
*/
updateOptions: PropTypes.func.isRequired,
};
export default compose(
withSelect( ( select ) => {
const { isNotesRequesting } = select( NOTES_STORE_NAME );
const { getOption, hasFinishedResolution } =
select( OPTIONS_STORE_NAME );
const {
getTaskList,
getTaskLists,
hasFinishedResolution: taskListFinishResolution,
} = select( ONBOARDING_STORE_NAME );
const taskLists = getTaskLists();
const isLoadingTaskLists = ! taskListFinishResolution( 'getTaskLists' );
const welcomeFromCalypsoModalDismissed =
2022-03-23 12:08:58 +00:00
getOption( WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME ) !==
'no';
const welcomeFromCalypsoModalDismissedResolved = hasFinishedResolution(
'getOption',
[ WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME ]
);
const fromCalypsoUrlArgIsPresent =
!! window.location.search.match( 'from-calypso' );
const shouldShowWelcomeFromCalypsoModal =
welcomeFromCalypsoModalDismissedResolved &&
! welcomeFromCalypsoModalDismissed &&
fromCalypsoUrlArgIsPresent;
const welcomeModalDismissed =
2022-03-23 12:08:58 +00:00
getOption( WELCOME_MODAL_DISMISSED_OPTION_NAME ) !== 'no';
const welcomeModalDismissedHasResolved = hasFinishedResolution(
'getOption',
[ WELCOME_MODAL_DISMISSED_OPTION_NAME ]
);
const shouldShowWelcomeModal =
welcomeModalDismissedHasResolved &&
! welcomeModalDismissed &&
welcomeFromCalypsoModalDismissedResolved &&
! welcomeFromCalypsoModalDismissed;
const defaultHomescreenLayout =
getOption( 'woocommerce_default_homepage_layout' ) ||
'single_column';
return {
defaultHomescreenLayout,
isBatchUpdating: isNotesRequesting( 'batchUpdateNotes' ),
shouldShowWelcomeModal,
shouldShowWelcomeFromCalypsoModal,
isLoadingTaskLists,
isTaskListHidden: getTaskList( 'setup' )?.isHidden,
hasTaskList: getAdminSetting( 'visibleTaskListIds', [] ).length > 0,
showingProgressHeader: !! taskLists.find(
( list ) => list.isVisible && list.displayProgressHeader
),
taskListComplete: getTaskList( 'setup' )?.isComplete,
};
} ),
withDispatch( ( dispatch ) => ( {
updateOptions: dispatch( OPTIONS_STORE_NAME ).updateOptions,
} ) )
)( Layout );