woocommerce/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx

67 lines
1.5 KiB
TypeScript
Raw Normal View History

2022-04-20 04:28:31 +00:00
/**
* External dependencies
*/
import { Button } from '@wordpress/components';
2022-04-06 16:38:38 +00:00
import { __ } from '@wordpress/i18n';
import { getAdminLink } from '@woocommerce/settings';
import {
WCPayBanner,
WCPayBannerBody,
WCPayBannerFooter,
} from '@woocommerce/onboarding';
2022-04-20 04:28:31 +00:00
/**
* Internal dependencies
*/
2022-04-06 16:38:38 +00:00
import './payment-recommendations.scss';
import { getAdminSetting } from '~/utils/admin-settings';
import { usePaymentExperiment } from './use-payments-experiment';
2022-04-06 16:38:38 +00:00
const WCPaySettingBanner = () => {
const WC_PAY_SETUP_URL = getAdminLink(
'admin.php?wcpay-connect=1&_wpnonce=' +
getAdminSetting( 'wcpay_welcome_page_connect_nonce' )
);
2022-04-06 16:38:38 +00:00
return (
<WCPayBanner>
<WCPayBannerBody
textPosition="right"
actionButton={
2022-04-19 08:07:07 +00:00
<Button href={ WC_PAY_SETUP_URL } isPrimary>
2022-04-06 16:38:38 +00:00
{ __( 'Get started', 'woocommerce' ) }
</Button>
}
/>
<WCPayBannerFooter />
</WCPayBanner>
2022-04-06 16:38:38 +00:00
);
};
2022-04-19 08:07:07 +00:00
const DefaultPaymentMethodsHeaderText = () => (
<>
<h2>{ __( 'Payment Methods', 'woocommerce' ) }</h2>
<div id="payment_gateways_options-description">
<p>
{ __(
'Installed payment methods are listed below and can be sorted to control their display order on the frontend.',
'woocommerce'
) }
</p>
</div>
</>
);
2022-04-20 07:29:29 +00:00
export const PaymentsBannerWrapper = () => {
const { isLoadingExperiment, experimentAssignment } =
usePaymentExperiment();
2022-04-19 08:07:07 +00:00
if (
! isLoadingExperiment &&
experimentAssignment?.variationName === 'treatment'
) {
return <WCPaySettingBanner />;
2022-04-19 08:07:07 +00:00
}
return <DefaultPaymentMethodsHeaderText />;
2022-04-19 08:07:07 +00:00
};