woocommerce/plugins/woocommerce-admin/client/header/activity-panel/panels/help.js

390 lines
10 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { __experimentalText as Text } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
import { Fragment, useEffect } from '@wordpress/element';
import { applyFilters } from '@wordpress/hooks';
import { Icon, chevronRight, page } from '@wordpress/icons';
import { partial } from 'lodash';
import { getSetting } from '@woocommerce/wc-admin-settings';
import { List, Section } from '@woocommerce/components';
import {
ONBOARDING_STORE_NAME,
PLUGINS_STORE_NAME,
SETTINGS_STORE_NAME,
} from '@woocommerce/data';
import { compose } from 'redux';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import ActivityHeader from '../activity-header';
import { getCountryCode } from '../../../dashboard/utils';
import { getPaymentMethods } from '../../../task-list/tasks/payments/methods';
export const SETUP_TASK_HELP_ITEMS_FILTER =
'woocommerce_admin_setup_task_help_items';
function getAppearanceItems() {
return [
{
title: __(
'Showcase your products and tailor your shopping experience using Blocks',
'woocommerce-admin'
),
link:
'https://docs.woocommerce.com/document/woocommerce-blocks/?utm_source=help_panel',
},
{
title: __(
'Manage Store Notice, Catalog View and Product Images',
'woocommerce-admin'
),
link:
'https://docs.woocommerce.com/document/woocommerce-customizer/?utm_source=help_panel',
},
{
title: __(
'How to choose and change a theme',
'woocommerce-admin'
),
link:
'https://docs.woocommerce.com/document/choose-change-theme/?utm_source=help_panel',
},
];
}
function getPaymentsItems( props ) {
const { countryCode, onboardingStatus, profileItems } = props;
const paymentMethods = props.getPaymentMethods( {
activePlugins: [],
countryCode,
onboardingStatus,
options: {},
profileItems,
} );
const methodIsVisible = ( methodKey ) =>
Boolean(
paymentMethods.find( ( method ) => method.key === methodKey )
);
const showWCPay = methodIsVisible( 'wcpay' );
const showStripe = methodIsVisible( 'stripe' );
const showKlarnaCheckout = methodIsVisible( 'klarna_checkout' );
const showKlarnaPayments = methodIsVisible( 'klarna_payments' );
const showPayPal = methodIsVisible( 'paypal' );
const showSquare = methodIsVisible( 'square' );
const showPayFast = methodIsVisible( 'payfast' );
const showEway = methodIsVisible( 'eway' );
return [
{
title: __(
'Which Payment Option is Right for Me?',
'woocommerce-admin'
),
link:
'https://docs.woocommerce.com/document/premium-payment-gateway-extensions/?utm_source=help_panel',
},
showWCPay && {
title: __(
'WooCommerce Payments Start Up Guide',
'woocommerce-admin'
),
link:
'https://docs.woocommerce.com/document/payments//?utm_source=help_panel',
},
showWCPay && {
title: __( 'WooCommerce Payments FAQs', 'woocommerce-admin' ),
link:
'https://docs.woocommerce.com/documentation/woocommerce-payments/woocommerce-payments-faqs/?utm_source=help_panel',
},
showStripe && {
title: __( 'Stripe Setup and Configuration', 'woocommerce-admin' ),
link:
'https://docs.woocommerce.com/document/stripe/?utm_source=help_panel',
},
showPayPal && {
title: __(
'PayPal Checkout Setup and Configuration',
'woocommerce-admin'
),
link:
'https://docs.woocommerce.com/document/paypal-express-checkout/?utm_source=help_panel',
},
showSquare && {
title: __( 'Square - Get started', 'woocommerce-admin' ),
link:
'https://docs.woocommerce.com/document/woocommerce-square/?utm_source=help_panel',
},
showKlarnaCheckout && {
title: __( 'Klarna - Introduction', 'woocommerce-admin' ),
link:
'https://docs.woocommerce.com/document/klarna-checkout/?utm_source=help_panel',
},
showKlarnaPayments && {
title: __( 'Klarna - Introduction', 'woocommerce-admin' ),
link:
'https://docs.woocommerce.com/document/klarna-payments/?utm_source=help_panel',
},
showPayFast && {
title: __( 'PayFast Setup and Configuration', 'woocommerce-admin' ),
link:
'https://docs.woocommerce.com/document/payfast-payment-gateway/?utm_source=help_panel',
},
showEway && {
title: __( 'eWAY Setup and Configuration', 'woocommerce-admin' ),
link:
'https://docs.woocommerce.com/document/eway/?utm_source=help_panel',
},
{
title: __( 'Direct Bank Transfer (BACS)', 'woocommerce-admin' ),
link:
'https://docs.woocommerce.com/document/bacs/?utm_source=help_panel',
},
{
title: __( 'Cash on Delivery', 'woocommerce-admin' ),
link:
'https://docs.woocommerce.com/document/cash-on-delivery/?utm_source=help_panel',
},
].filter( Boolean );
}
function getProductsItems() {
return [
{
title: __( 'Adding and Managing Products', 'woocommerce-admin' ),
link:
'https://docs.woocommerce.com/document/managing-products/?utm_source=help_panel',
},
{
title: __(
'Import products using the CSV Importer and Exporter',
'woocommerce-admin'
),
link:
'https://docs.woocommerce.com/document/product-csv-importer-exporter/?utm_source=help_panel',
},
{
title: __(
'Migrate products using Cart2Cart',
'woocommerce-admin'
),
link:
'https://woocommerce.com/products/cart2cart/?utm_source=help_panel',
},
{
title: __(
'Learn more about setting up products',
'woocommerce-admin'
),
link:
'https://docs.woocommerce.com/documentation/plugins/woocommerce/getting-started/setup-products/?utm_source=help_panel',
},
];
}
function getShippingItems( { activePlugins, countryCode } ) {
const showWCS =
countryCode === 'US' &&
! activePlugins.includes( 'woocommerce-services' );
return [
{
title: __( 'Setting up Shipping Zones', 'woocommerce-admin' ),
link:
'https://docs.woocommerce.com/document/setting-up-shipping-zones/?utm_source=help_panel',
},
{
title: __( 'Core Shipping Options', 'woocommerce-admin' ),
link:
'https://docs.woocommerce.com/documentation/plugins/woocommerce/getting-started/shipping/core-shipping-options/?utm_source=help_panel',
},
{
title: __( 'Product Shipping Classes', 'woocommerce-admin' ),
link:
'https://docs.woocommerce.com/document/product-shipping-classes/?utm_source=help_panel',
},
showWCS && {
title: __(
'WooCommerce Shipping setup and configuration',
'woocommerce-admin'
),
link:
'https://docs.woocommerce.com/document/woocommerce-services/#section-3/?utm_source=help_panel',
},
{
title: __(
'Learn more about configuring your shipping settings',
'woocommerce-admin'
),
link:
'https://docs.woocommerce.com/documentation/plugins/woocommerce/getting-started/shipping/?utm_source=help_panel',
},
].filter( Boolean );
}
function getTaxItems( props ) {
const { countryCode } = props;
const {
automatedTaxSupportedCountries = [],
taxJarActivated,
} = props.getSetting( 'onboarding', {} );
const showWCS =
! taxJarActivated && // WCS integration doesn't work with the official TaxJar plugin.
automatedTaxSupportedCountries.includes( countryCode );
return [
{
title: __( 'Setting up Taxes in WooCommerce', 'woocommerce-admin' ),
link:
'https://docs.woocommerce.com/document/setting-up-taxes-in-woocommerce/?utm_source=help_panel',
},
showWCS && {
title: __(
'Automated Tax calculation using WooCommerce Tax',
'woocommerce-admin'
),
link:
'https://docs.woocommerce.com/document/woocommerce-services/?utm_source=help_panel#section-10',
},
].filter( Boolean );
}
function getItems( props ) {
const { taskName } = props;
switch ( taskName ) {
case 'products':
return getProductsItems();
case 'appearance':
return getAppearanceItems();
case 'shipping':
return getShippingItems( props );
case 'tax':
return getTaxItems( props );
case 'payments':
return getPaymentsItems( props );
default:
return [];
}
}
function handleOnItemClick( props, event ) {
const { taskName } = props;
// event isn't initially set when triggering link with the keyboard.
if ( ! event ) {
return;
}
props.recordEvent( 'help_panel_click', {
task_name: taskName,
link: event.currentTarget.href,
} );
}
function getListItems( props ) {
const itemsByType = getItems( props );
const genericDocsLink = {
title: __( 'WooCommerce Docs', 'woocommerce-admin' ),
link: 'https://docs.woocommerce.com/?utm_source=help_panel',
};
itemsByType.push( genericDocsLink );
const filteredItems = applyFilters(
SETUP_TASK_HELP_ITEMS_FILTER,
itemsByType,
props.taskName,
props
);
// Filter out items that aren't objects without `title` and `link` properties.
let validatedItems = Array.isArray( filteredItems )
? filteredItems.filter(
( item ) => item instanceof Object && item.title && item.link
)
: [];
// Default empty array to the generic docs link.
if ( ! validatedItems.length ) {
validatedItems = [ genericDocsLink ];
}
const onClick = partial( handleOnItemClick, props );
return validatedItems.map( ( item ) => ( {
title: (
<Text as="div" variant="button">
{ item.title }
</Text>
),
before: <Icon icon={ page } />,
after: <Icon icon={ chevronRight } />,
linkType: 'external',
target: '_blank',
href: item.link,
onClick,
} ) );
}
export const HelpPanel = ( props ) => {
const { taskName } = props;
useEffect( () => {
props.recordEvent( 'help_panel_open', {
task_name: taskName,
} );
}, [ taskName ] );
const listItems = getListItems( props );
return (
<Fragment>
<ActivityHeader
title={ __( 'Documentation', 'woocommerce-admin' ) }
/>
<Section>
<List
items={ listItems }
className="woocommerce-quick-links__list"
/>
</Section>
</Fragment>
);
};
HelpPanel.defaultProps = {
getPaymentMethods,
getSetting,
recordEvent,
};
export default compose(
withSelect( ( select ) => {
const { getProfileItems, getTasksStatus } = select(
ONBOARDING_STORE_NAME
);
const { getSettings } = select( SETTINGS_STORE_NAME );
const { getActivePlugins } = select( PLUGINS_STORE_NAME );
const { general: generalSettings = {} } = getSettings( 'general' );
const activePlugins = getActivePlugins();
const onboardingStatus = getTasksStatus();
const profileItems = getProfileItems();
const countryCode = getCountryCode(
generalSettings.woocommerce_default_country
);
return {
activePlugins,
countryCode,
onboardingStatus,
profileItems,
};
} )
)( HelpPanel );