woocommerce/plugins/woocommerce-admin/client/two-column-tasks/dismiss-modal.js

56 lines
1.3 KiB
JavaScript
Raw Normal View History

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
/**
* External dependencies
*/
import { Button, Modal } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
const DismissModal = ( {
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
showDismissModal,
setShowDismissModal,
hideTasks,
} ) => {
const closeModal = () => setShowDismissModal( false );
const title = __( 'Hide store setup tasks', 'woocommerce' );
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
const message = __(
'Are you sure? These tasks are required for all stores.',
'woocommerce'
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
);
const dismissActionText = __( 'Cancel', 'woocommerce' );
const acceptActionText = __( 'Yes, hide store setup tasks', 'woocommerce' );
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
return (
<>
{ showDismissModal && (
<Modal
title={ title }
className="woocommerce-task-dismiss-modal"
onRequestClose={ closeModal }
>
<div className="woocommerce-task-dismiss-modal__wrapper">
<div className="woocommerce-usage-modal__message">
{ message }
</div>
<div className="woocommerce-usage-modal__actions">
<Button
onClick={ () => setShowDismissModal( false ) }
>
{ dismissActionText }
</Button>
<Button
isPrimary
onClick={ () => {
hideTasks( 'remove_card' );
setShowDismissModal( false );
} }
>
{ acceptActionText }
</Button>
</div>
</div>
</Modal>
) }
</>
);
};
export default DismissModal;