Adding setup required indicator for non-configured payment methods (https://github.com/woocommerce/woocommerce-admin/pull/6811)
This commit is contained in:
Joel Thiessen
GitHub
parent
c0e95ba189
commit
c31d694c45
|
|
@ -213,6 +213,18 @@
|
|||
margin-top: $gap-large;
|
||||
}
|
||||
|
||||
.woocommerce-task-payment__setup_required {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin-left: $gap-small;
|
||||
font-weight: 400;
|
||||
gap: 3px;
|
||||
> svg {
|
||||
fill: #efb854;
|
||||
}
|
||||
}
|
||||
|
||||
.components-card__header {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { updateQueryString } from '@woocommerce/navigation';
|
|||
import { useState } from '@wordpress/element';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
|
||||
export const Action = ( {
|
||||
export const PaymentAction = ( {
|
||||
hasSetup = false,
|
||||
isConfigured = false,
|
||||
isEnabled = false,
|
||||
|
|
@ -49,7 +49,38 @@ export const Action = ( {
|
|||
} );
|
||||
};
|
||||
|
||||
if ( hasSetup && ! isConfigured ) {
|
||||
const ManageButton = () => (
|
||||
<Button
|
||||
className={ classes }
|
||||
isSecondary
|
||||
href={ manageUrl }
|
||||
onClick={
|
||||
methodKey === 'wcpay'
|
||||
? () => recordEvent( 'tasklist_payment_manage' )
|
||||
: () => {}
|
||||
}
|
||||
>
|
||||
{ __( 'Manage', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
);
|
||||
|
||||
if ( ! hasSetup ) {
|
||||
if ( ! isEnabled ) {
|
||||
return (
|
||||
<Button
|
||||
className={ classes }
|
||||
isSecondary
|
||||
onClick={ () => markConfigured( methodKey ) }
|
||||
>
|
||||
{ __( 'Enable', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return <ManageButton />;
|
||||
}
|
||||
|
||||
if ( ! isEnabled ) {
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
|
|
@ -66,36 +97,22 @@ export const Action = ( {
|
|||
);
|
||||
}
|
||||
|
||||
if ( ( hasSetup && isConfigured ) || ( ! hasSetup && isEnabled ) ) {
|
||||
if ( ! manageUrl ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if ( ! isConfigured ) {
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className={ classes }
|
||||
isSecondary
|
||||
href={ manageUrl }
|
||||
onClick={
|
||||
methodKey === 'wcpay'
|
||||
? () => recordEvent( 'tasklist_payment_manage' )
|
||||
: () => {}
|
||||
}
|
||||
isPrimary={ isRecommended }
|
||||
isSecondary={ ! isRecommended }
|
||||
isBusy={ isBusy }
|
||||
disabled={ isBusy }
|
||||
onClick={ () => handleClick() }
|
||||
>
|
||||
{ __( 'Manage', 'woocommerce-admin' ) }
|
||||
{ __( 'Finish setup', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
className={ classes }
|
||||
isSecondary
|
||||
onClick={ () => markConfigured( methodKey ) }
|
||||
>
|
||||
{ __( 'Enable', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
);
|
||||
return <ManageButton />;
|
||||
};
|
||||
|
|
@ -10,14 +10,15 @@ import {
|
|||
CardHeader,
|
||||
CardDivider,
|
||||
} from '@wordpress/components';
|
||||
import { H } from '@woocommerce/components';
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Action } from '../Action';
|
||||
import { PaymentAction } from '../PaymentAction';
|
||||
import { RecommendedRibbon } from '../RecommendedRibbon';
|
||||
import { SetupRequired } from '../SetupRequired';
|
||||
|
||||
import './PaymentMethodList.scss';
|
||||
|
||||
|
|
@ -33,6 +34,7 @@ export const PaymentMethodList = ( {
|
|||
const {
|
||||
before,
|
||||
content,
|
||||
isEnabled,
|
||||
isConfigured,
|
||||
key,
|
||||
title,
|
||||
|
|
@ -65,15 +67,21 @@ export const PaymentMethodList = ( {
|
|||
<CardMedia isBorderless>{ before }</CardMedia>
|
||||
<div className="woocommerce-task-payment__description">
|
||||
{ showRecommendedRibbon && <RecommendedRibbon /> }
|
||||
<H className="woocommerce-task-payment__title">
|
||||
<Text
|
||||
as="h3"
|
||||
className="woocommerce-task-payment__title"
|
||||
>
|
||||
{ title }
|
||||
</H>
|
||||
{ isEnabled && ! isConfigured && (
|
||||
<SetupRequired />
|
||||
) }
|
||||
</Text>
|
||||
<div className="woocommerce-task-payment__content">
|
||||
{ content }
|
||||
</div>
|
||||
</div>
|
||||
<div className="woocommerce-task-payment__footer">
|
||||
<Action
|
||||
<PaymentAction
|
||||
manageUrl={ manageUrl }
|
||||
methodKey={ key }
|
||||
hasSetup={ !! method.container }
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@
|
|||
}
|
||||
|
||||
.woocommerce-task-payment__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $studio-gray-80;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data';
|
|||
*/
|
||||
import { createNoticesFromResponse } from '~/lib/notices';
|
||||
|
||||
export const Setup = ( { method, markConfigured, query } ) => {
|
||||
export const PaymentSetup = ( { method, markConfigured, query } ) => {
|
||||
const { activePlugins } = useSelect( ( select ) => {
|
||||
const { getActivePlugins } = select( PLUGINS_STORE_NAME );
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import NoticeOutlineIcon from 'gridicons/dist/notice-outline';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
|
||||
export const SetupRequired = () => {
|
||||
return (
|
||||
<span className="woocommerce-task-payment__setup_required">
|
||||
<NoticeOutlineIcon />
|
||||
<Text variant="small">
|
||||
{ __( 'Setup required', 'woocommerce-admin' ) }
|
||||
</Text>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __experimentalText as Text } from '@wordpress/components';
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
|
|
@ -18,7 +18,7 @@ import Discover from '../images/cards/discover.js';
|
|||
import JCB from '../images/cards/jcb.js';
|
||||
import UnionPay from '../images/cards/unionpay.js';
|
||||
|
||||
export default () => (
|
||||
export const WCPayAcceptedMethods = () => (
|
||||
<>
|
||||
<Text as="h3" variant="label">
|
||||
{ __( 'Accepted payment methods', 'woocommerce-admin' ) }
|
||||
|
|
|
|||
|
|
@ -1,25 +1,21 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import {
|
||||
Card,
|
||||
CardBody,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
__experimentalText as Text,
|
||||
} from '@wordpress/components';
|
||||
import { Card, CardBody, CardHeader, CardFooter } from '@wordpress/components';
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
|
||||
import interpolateComponents from 'interpolate-components';
|
||||
import { Link } from '@woocommerce/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import NoticeOutlineIcon from 'gridicons/dist/notice-outline';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import WCPayAcceptedMethods from '../WCPayAcceptedMethods';
|
||||
import { WCPayAcceptedMethods } from '../WCPayAcceptedMethods';
|
||||
import { SetupRequired } from '../SetupRequired';
|
||||
import { PaymentAction } from '../PaymentAction';
|
||||
import WCPayLogo from '../../images/wcpay-logo';
|
||||
import { Action } from '../Action';
|
||||
import './WCPayCard.scss';
|
||||
|
||||
const TosPrompt = () =>
|
||||
|
|
@ -58,14 +54,7 @@ export const WCPayCard = ( props ) => {
|
|||
{ __( 'Recommended', 'woocommerce-admin' ) }
|
||||
</span>
|
||||
) }
|
||||
{ isEnabled && (
|
||||
<span className="woocommerce-task-payment__setup_required">
|
||||
<NoticeOutlineIcon />
|
||||
<Text variant="small">
|
||||
{ __( 'Setup required', 'woocommerce-admin' ) }
|
||||
</Text>
|
||||
</span>
|
||||
) }
|
||||
{ isEnabled && <SetupRequired /> }
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Text className="woocommerce-task-payment-wcpay__description">
|
||||
|
|
@ -92,7 +81,7 @@ export const WCPayCard = ( props ) => {
|
|||
<Text>
|
||||
<TosPrompt />
|
||||
</Text>
|
||||
<Action
|
||||
<PaymentAction
|
||||
methodKey={ methodKey }
|
||||
hasSetup={ !! container }
|
||||
isConfigured={ isConfigured }
|
||||
|
|
@ -101,11 +90,7 @@ export const WCPayCard = ( props ) => {
|
|||
isLoading={ loading }
|
||||
onSetup={ () => {} }
|
||||
onSetupCallback={ onClick }
|
||||
setupButtonText={
|
||||
isEnabled
|
||||
? __( 'Finish setup', 'woocommerce-admin' )
|
||||
: __( 'Get started', 'woocommerce-admin' )
|
||||
}
|
||||
setupButtonText={ __( 'Get started', 'woocommerce-admin' ) }
|
||||
/>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -28,15 +28,4 @@
|
|||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.woocommerce-task-payment__setup_required {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin-left: $gap-small;
|
||||
gap: 3px;
|
||||
> svg {
|
||||
fill: #efb854;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { WCPayCard } from './components/WCPayCard';
|
|||
import { PaymentMethodList } from './components/PaymentMethodList';
|
||||
import { getCountryCode } from '../../../dashboard/utils';
|
||||
import { getPaymentMethods } from './methods';
|
||||
import { Setup } from './components/Setup';
|
||||
import { PaymentSetup } from './components/PaymentSetup';
|
||||
import { sift } from '../../../utils';
|
||||
|
||||
export const setMethodEnabledOption = async (
|
||||
|
|
@ -195,17 +195,16 @@ export const Payments = ( { query } ) => {
|
|||
|
||||
if ( currentMethod ) {
|
||||
return (
|
||||
<Setup method={ currentMethod } markConfigured={ markConfigured } />
|
||||
<PaymentSetup
|
||||
method={ currentMethod }
|
||||
markConfigured={ markConfigured }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Group by enabled vs the rest, with exception for WCPay which must be configured as well
|
||||
const [ enabledCardMethods, additionalCardMethods ] = sift(
|
||||
methods,
|
||||
( method ) =>
|
||||
method.isEnabled &&
|
||||
( method.key !== 'wcpay' ||
|
||||
( method.key === 'wcpay' && method.isConfigured ) )
|
||||
( method ) => method.isEnabled && method.isConfigured
|
||||
);
|
||||
|
||||
const wcPayIndex = additionalCardMethods.findIndex(
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@ const getPaymentsSettingsUrl = ( methodKey ) => {
|
|||
);
|
||||
};
|
||||
|
||||
const methodDefaults = { isConfigured: true };
|
||||
|
||||
export function getPaymentMethods( {
|
||||
activePlugins,
|
||||
countryCode,
|
||||
|
|
@ -562,5 +564,7 @@ export function getPaymentMethods( {
|
|||
} );
|
||||
}
|
||||
|
||||
return methods.filter( ( method ) => method.visible );
|
||||
return methods
|
||||
.filter( ( method ) => method.visible )
|
||||
.map( ( method ) => ( { ...methodDefaults, ...method } ) );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
|
|||
|
||||
== Unreleased ==
|
||||
|
||||
- Update: Adding setup required icon for non-configured payment methods #6811
|
||||
- Update: UI updates to Payment Task screen #6766
|
||||
- Dev: Add data source filter to remote inbox notification system #6794
|
||||
- Fix: Make pagination buttons height and width consistent #6725
|
||||
|
|
|
|||
Loading…
Reference in New Issue