mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 09:08:09 +08:00
New Settings UI: Implement logic for features and refresh button.
This commit is contained in:
Himad M
parent
33afa940dd
commit
75f3b0b7e4
11 changed files with 328 additions and 47 deletions
|
|
@ -11,42 +11,56 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<span className="ppcp-r-feature-item__notes">
|
||||
{ notes.map( ( note, index ) => (
|
||||
<span key={ index }>{ note }</span>
|
||||
) ) }
|
||||
</span>
|
||||
<>
|
||||
<span className="ppcp-r-feature-item__notes">
|
||||
{ notes.map( ( note, index ) => (
|
||||
<span key={ index }>{ note }</span>
|
||||
) ) }
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsBlock { ...props } className="ppcp-r-settings-block__feature">
|
||||
<Header>
|
||||
<Title>
|
||||
{ title }
|
||||
{ props.actionProps?.featureStatus && (
|
||||
<TitleBadge { ...props.actionProps?.badge } />
|
||||
) }
|
||||
</Title>
|
||||
<Description className="ppcp-r-settings-block__feature__description">
|
||||
{ description }
|
||||
{ printNotes() }
|
||||
</Description>
|
||||
</Header>
|
||||
<Action>
|
||||
<div className="ppcp-r-feature-item__buttons">
|
||||
{ props.actionProps?.buttons.map( ( button ) => (
|
||||
<Button
|
||||
href={ button.url }
|
||||
key={ button.text }
|
||||
variant={ button.type }
|
||||
>
|
||||
{ button.text }
|
||||
</Button>
|
||||
) ) }
|
||||
</div>
|
||||
</Action>
|
||||
</SettingsBlock>
|
||||
<SettingsBlock
|
||||
{ ...props }
|
||||
className="ppcp-r-settings-block__feature"
|
||||
components={ [
|
||||
() => (
|
||||
<>
|
||||
<Header>
|
||||
<Title>
|
||||
{ title }
|
||||
{ props.actionProps?.enabled && (
|
||||
<TitleBadge
|
||||
{ ...props.actionProps?.badge }
|
||||
/>
|
||||
) }
|
||||
</Title>
|
||||
<Description className="ppcp-r-settings-block__feature__description">
|
||||
{ description }
|
||||
{ printNotes() }
|
||||
</Description>
|
||||
</Header>
|
||||
<Action>
|
||||
<div className="ppcp-r-feature-item__buttons">
|
||||
{ props.actionProps?.buttons.map(
|
||||
( button ) => (
|
||||
<Button
|
||||
href={ button.url }
|
||||
key={ button.text }
|
||||
variant={ button.type }
|
||||
>
|
||||
{ button.text }
|
||||
</Button>
|
||||
)
|
||||
) }
|
||||
</div>
|
||||
</Action>
|
||||
</>
|
||||
),
|
||||
] }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -6,10 +6,42 @@ import TodoSettingsBlock from '../../ReusableComponents/SettingsBlocks/TodoSetti
|
|||
import FeatureSettingsBlock from '../../ReusableComponents/SettingsBlocks/FeatureSettingsBlock';
|
||||
import { TITLE_BADGE_POSITIVE } from '../../ReusableComponents/TitleBadge';
|
||||
import data from '../../../utils/data';
|
||||
import { useMerchantInfo } from '../../../data/common/hooks';
|
||||
import { useDispatch } from '@wordpress/data';
|
||||
import { STORE_NAME } from '../../../data/common';
|
||||
|
||||
const TabOverview = () => {
|
||||
const [ todos, setTodos ] = useState( [] );
|
||||
const [ todosData, setTodosData ] = useState( todosDataDefault );
|
||||
const [ isRefreshing, setIsRefreshing ] = useState( false );
|
||||
|
||||
const { merchant } = useMerchantInfo();
|
||||
const { refreshFeatureStatuses } = useDispatch( STORE_NAME );
|
||||
|
||||
const features = featuresDefault.map( ( feature ) => {
|
||||
const merchantFeature = merchant?.features?.[ feature.id ];
|
||||
return {
|
||||
...feature,
|
||||
enabled: merchantFeature?.enabled ?? false,
|
||||
};
|
||||
} );
|
||||
|
||||
const refreshHandler = async () => {
|
||||
setIsRefreshing( true );
|
||||
|
||||
const result = await refreshFeatureStatuses();
|
||||
|
||||
if ( result && ! result.success ) {
|
||||
console.error(
|
||||
'Failed to refresh features:',
|
||||
result.message || 'Unknown error'
|
||||
);
|
||||
} else {
|
||||
console.log( 'Features refreshed successfully.' );
|
||||
}
|
||||
|
||||
setIsRefreshing( false );
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-tab-overview">
|
||||
|
|
@ -39,30 +71,54 @@ const TabOverview = () => {
|
|||
title={ __( 'Features', 'woocommerce-paypal-payments' ) }
|
||||
description={
|
||||
<div>
|
||||
<p>{ __( 'Enable additional features…' ) }</p>
|
||||
<p>{ __( 'Click Refresh…' ) }</p>
|
||||
<Button variant="tertiary">
|
||||
<p>
|
||||
{ __(
|
||||
'Enable additional features…',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
<p>
|
||||
{ __(
|
||||
'Click Refresh…',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
<Button
|
||||
variant="tertiary"
|
||||
onClick={ refreshHandler }
|
||||
disabled={ isRefreshing }
|
||||
>
|
||||
{ data().getImage( 'icon-refresh.svg' ) }
|
||||
{ __( 'Refresh', 'woocommerce-paypal-payments' ) }
|
||||
{ isRefreshing
|
||||
? __(
|
||||
'Refreshing…',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Refresh',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
contentItems={ featuresDefault.map( ( feature ) => (
|
||||
contentItems={ features.map( ( feature ) => (
|
||||
<FeatureSettingsBlock
|
||||
key={ feature.id }
|
||||
title={ feature.title }
|
||||
description={ feature.description }
|
||||
actionProps={ {
|
||||
buttons: feature.buttons,
|
||||
featureStatus: feature.featureStatus,
|
||||
enabled: feature.enabled,
|
||||
notes: feature.notes,
|
||||
badge: {
|
||||
text: __(
|
||||
'Active',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
type: TITLE_BADGE_POSITIVE,
|
||||
},
|
||||
badge: feature.enabled
|
||||
? {
|
||||
text: __(
|
||||
'Active',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
type: TITLE_BADGE_POSITIVE,
|
||||
}
|
||||
: undefined,
|
||||
} }
|
||||
/>
|
||||
) ) }
|
||||
|
|
@ -133,7 +189,6 @@ const featuresDefault = [
|
|||
'Advanced Credit and Debit Cards',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
featureStatus: true,
|
||||
description: __(
|
||||
'Process major credit and debit cards including Visa, Mastercard, American Express and Discover.',
|
||||
'woocommerce-paypal-payments'
|
||||
|
|
@ -181,7 +236,6 @@ const featuresDefault = [
|
|||
'Let customers pay using their Google Pay wallet.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
featureStatus: true,
|
||||
buttons: [
|
||||
{
|
||||
type: 'secondary',
|
||||
|
|
|
|||
|
|
@ -23,4 +23,5 @@ export default {
|
|||
DO_SANDBOX_LOGIN: 'COMMON:DO_SANDBOX_LOGIN',
|
||||
DO_PRODUCTION_LOGIN: 'COMMON:DO_PRODUCTION_LOGIN',
|
||||
DO_REFRESH_MERCHANT: 'COMMON:DO_REFRESH_MERCHANT',
|
||||
DO_REFRESH_FEATURES: 'DO_REFRESH_FEATURES',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -189,3 +189,14 @@ export const connectViaIdAndSecret = function* () {
|
|||
export const refreshMerchantData = function* () {
|
||||
return yield { type: ACTION_TYPES.DO_REFRESH_MERCHANT };
|
||||
};
|
||||
|
||||
/**
|
||||
* Side effect.
|
||||
* Purges all features status data via a REST request.
|
||||
* Refreshes the merchant data via a REST request.
|
||||
*
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const refreshFeatureStatuses = function* () {
|
||||
return yield { type: ACTION_TYPES.DO_REFRESH_FEATURES };
|
||||
};
|
||||
|
|
|
|||
|
|
@ -53,3 +53,14 @@ export const REST_MANUAL_CONNECTION_PATH = '/wc/v3/wc_paypal/connect_manual';
|
|||
* @type {string}
|
||||
*/
|
||||
export const REST_CONNECTION_URL_PATH = '/wc/v3/wc_paypal/login_link';
|
||||
|
||||
/**
|
||||
* REST path to refresh the feature status.
|
||||
*
|
||||
* Used by: Controls
|
||||
* See: RefreshFeatureStatusEndpoint.php
|
||||
*
|
||||
* @type {string}
|
||||
*/
|
||||
export const REST_REFRESH_FEATURES_PATH =
|
||||
'/wc/v3/wc_paypal/refresh-feature-status';
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import {
|
|||
REST_MANUAL_CONNECTION_PATH,
|
||||
REST_CONNECTION_URL_PATH,
|
||||
REST_HYDRATE_MERCHANT_PATH,
|
||||
REST_REFRESH_FEATURES_PATH,
|
||||
} from './constants';
|
||||
import ACTION_TYPES from './action-types';
|
||||
|
||||
|
|
@ -121,4 +122,27 @@ export const controls = {
|
|||
|
||||
return result;
|
||||
},
|
||||
|
||||
async [ ACTION_TYPES.DO_REFRESH_FEATURES ]() {
|
||||
let result = null;
|
||||
|
||||
try {
|
||||
result = await apiFetch( {
|
||||
path: REST_REFRESH_FEATURES_PATH,
|
||||
method: 'POST',
|
||||
} );
|
||||
|
||||
if ( result.success ) {
|
||||
result = await dispatch( STORE_NAME ).refreshMerchantData();
|
||||
}
|
||||
} catch ( e ) {
|
||||
result = {
|
||||
success: false,
|
||||
error: e,
|
||||
message: e.message,
|
||||
};
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
