woocommerce/plugins/woocommerce-admin/docs/examples/extensions/add-task/js/index.js

91 lines
2.0 KiB
JavaScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { addFilter } from '@wordpress/hooks';
import apiFetch from '@wordpress/api-fetch';
/**
* WooCommerce dependencies
*/
import { Card } from '@woocommerce/components';
import { getHistory, getNewPath } from '@woocommerce/navigation';
/* global addTaskData */
const markTaskComplete = () => {
apiFetch( {
path: '/wc-admin/options',
method: 'POST',
data: { woocommerce_admin_add_task_example_complete: true },
} )
.then( () => {
// Set the local `isComplete` to `true` so that task appears complete on the list.
addTaskData.isComplete = true;
// Redirect back to the root WooCommerce Admin page.
getHistory().push( getNewPath( {}, '/', {} ) );
} )
.catch( ( error ) => {
// Something went wrong with our update.
console.log( error );
} );
};
const markTaskIncomplete = () => {
apiFetch( {
path: '/wc-admin/options',
method: 'POST',
data: { woocommerce_admin_add_task_example_complete: false },
} )
.then( () => {
addTaskData.isComplete = false;
getHistory().push( getNewPath( {}, '/', {} ) );
} )
.catch( ( error ) => {
console.log( error );
} );
};
const Task = () => {
return (
<Card className="is-narrow">
{ __( 'Example task card content.', 'plugin-domain' ) }
<br />
<br />
<div>
{ addTaskData.isComplete ? (
<button onClick={ markTaskIncomplete }>
{ __( 'Mark task incomplete', 'plugin-domain' ) }
</button>
) : (
<button onClick={ markTaskComplete }>
{ __( 'Mark task complete', 'plugin-domain' ) }
</button>
) }
</div>
</Card>
);
};
/**
* Use the 'woocommerce_admin_onboarding_task_list' filter to add a task page.
*/
addFilter(
'woocommerce_admin_onboarding_task_list',
'plugin-domain',
( tasks ) => {
return [
...tasks,
{
key: 'example',
title: __( 'Example', 'plugin-domain' ),
content: __( 'This is an example task.', 'plugin-domain' ),
icon: 'info',
container: <Task />,
completed: addTaskData.isComplete,
visible: true,
},
];
}
);