Fix WC pay promotion ordering (https://github.com/woocommerce/woocommerce-admin/pull/7943)
* Fix WC Pay ordering and overwriting another payment gateway * Fix styling if extra columns are present * Add changelog
This commit is contained in:
louwie17
GitHub
parent
82f4120208
commit
30bca4c613
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: Fix
|
||||
|
||||
Fix ordering and styling issue with WooCommerce Payments payment method promotion. #7943
|
||||
|
|
@ -22,8 +22,13 @@ PAYMENT_METHOD_PROMOTIONS.forEach( ( paymentMethod ) => {
|
|||
);
|
||||
|
||||
if ( container ) {
|
||||
const sortColumn = container.children[ 0 ].innerHTML;
|
||||
const descriptionColumn = container.children[ 3 ].innerHTML;
|
||||
const columns = [ ...container.children ].map( ( child ) => {
|
||||
return {
|
||||
className: child.className,
|
||||
html: child.innerHTML,
|
||||
width: child.getAttribute( 'width' ),
|
||||
};
|
||||
} );
|
||||
const title = container.getElementsByClassName(
|
||||
'wc-payment-gateway-method-title'
|
||||
);
|
||||
|
|
@ -31,9 +36,8 @@ PAYMENT_METHOD_PROMOTIONS.forEach( ( paymentMethod ) => {
|
|||
|
||||
render(
|
||||
<PaymentPromotionRow
|
||||
columns={ columns }
|
||||
pluginSlug={ paymentMethod.pluginSlug }
|
||||
sortColumnContent={ sortColumn }
|
||||
descriptionColumnContent={ descriptionColumn }
|
||||
title={ title.length === 1 ? title[ 0 ].innerHTML : undefined }
|
||||
titleLink={ paymentMethod.link }
|
||||
subTitleContent={
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ import { recordEvent } from '@woocommerce/tracks';
|
|||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
import { sanitize } from 'dompurify';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import _ from 'lodash';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -32,20 +31,22 @@ function sanitizeHTML( html: string ) {
|
|||
|
||||
type PaymentPromotionRowProps = {
|
||||
pluginSlug: string;
|
||||
sortColumnContent: string;
|
||||
descriptionColumnContent: string;
|
||||
titleLink: string;
|
||||
title: string;
|
||||
columns: {
|
||||
className: string;
|
||||
html: string;
|
||||
width: string;
|
||||
}[];
|
||||
subTitleContent?: string;
|
||||
};
|
||||
|
||||
export const PaymentPromotionRow: React.FC< PaymentPromotionRowProps > = ( {
|
||||
pluginSlug,
|
||||
sortColumnContent,
|
||||
descriptionColumnContent,
|
||||
title,
|
||||
titleLink,
|
||||
subTitleContent,
|
||||
columns,
|
||||
} ) => {
|
||||
const [ installing, setInstalling ] = useState( false );
|
||||
const { installAndActivatePlugins }: PluginsStoreActions = useDispatch(
|
||||
|
|
@ -104,51 +105,67 @@ export const PaymentPromotionRow: React.FC< PaymentPromotionRowProps > = ( {
|
|||
|
||||
return (
|
||||
<>
|
||||
<td
|
||||
className="sort ui-sortable-handle"
|
||||
width="1%"
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html: sortColumnContent,
|
||||
} }
|
||||
></td>
|
||||
<td className="name">
|
||||
<div className="wc-payment-gateway-method_name">
|
||||
<Link
|
||||
target="_blank"
|
||||
type="external"
|
||||
rel="noreferrer"
|
||||
href={ titleLink }
|
||||
>
|
||||
{ title }
|
||||
</Link>
|
||||
{ subTitleContent ? (
|
||||
<div
|
||||
className="pre-install-payment-gateway_subtitle"
|
||||
dangerouslySetInnerHTML={ sanitizeHTML(
|
||||
subTitleContent
|
||||
) }
|
||||
></div>
|
||||
) : null }
|
||||
</div>
|
||||
</td>
|
||||
<td className="pre-install-payment-gateway_status"></td>
|
||||
<td
|
||||
className="description"
|
||||
dangerouslySetInnerHTML={ sanitizeHTML(
|
||||
descriptionColumnContent
|
||||
) }
|
||||
></td>
|
||||
<td className="action">
|
||||
<Button
|
||||
className="button alignright"
|
||||
onClick={ () => installPaymentGateway() }
|
||||
isSecondary
|
||||
isBusy={ installing }
|
||||
aria-disabled={ installing }
|
||||
>
|
||||
{ __( 'Install', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
</td>
|
||||
{ columns.map( ( column ) => {
|
||||
if ( column.className.includes( 'name' ) ) {
|
||||
return (
|
||||
<td className="name" key={ column.className }>
|
||||
<div className="wc-payment-gateway-method_name">
|
||||
<Link
|
||||
target="_blank"
|
||||
type="external"
|
||||
rel="noreferrer"
|
||||
href={ titleLink }
|
||||
>
|
||||
{ title }
|
||||
</Link>
|
||||
{ subTitleContent ? (
|
||||
<div
|
||||
className="pre-install-payment-gateway_subtitle"
|
||||
dangerouslySetInnerHTML={ sanitizeHTML(
|
||||
subTitleContent
|
||||
) }
|
||||
></div>
|
||||
) : null }
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
} else if ( column.className.includes( 'status' ) ) {
|
||||
return (
|
||||
<td
|
||||
className="pre-install-payment-gateway_status"
|
||||
key={ column.className }
|
||||
></td>
|
||||
);
|
||||
} else if ( column.className.includes( 'action' ) ) {
|
||||
return (
|
||||
<td className="action" key={ column.className }>
|
||||
<Button
|
||||
className="button alignright"
|
||||
onClick={ () => installPaymentGateway() }
|
||||
isSecondary
|
||||
isBusy={ installing }
|
||||
aria-disabled={ installing }
|
||||
>
|
||||
{ __( 'Install', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
</td>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<td
|
||||
key={ column.className }
|
||||
className={ column.className }
|
||||
width={ column.width }
|
||||
dangerouslySetInnerHTML={
|
||||
column.className.includes( 'sort' )
|
||||
? {
|
||||
__html: column.html,
|
||||
}
|
||||
: sanitizeHTML( column.html )
|
||||
}
|
||||
></td>
|
||||
);
|
||||
} ) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ class Init {
|
|||
$id = WCPaymentGatewayPreInstallWCPayPromotion::GATEWAY_ID;
|
||||
// Only tweak the ordering if the list hasn't been reordered with WooCommerce Payments in it already.
|
||||
if ( ! isset( $ordering[ $id ] ) || ! is_numeric( $ordering[ $id ] ) ) {
|
||||
$is_empty = empty( $ordering ) || empty( $ordering[0] );
|
||||
$is_empty = empty( $ordering ) || ( 1 === count( $ordering ) && false === $ordering[0] );
|
||||
$ordering[ $id ] = $is_empty ? 0 : ( min( $ordering ) - 1 );
|
||||
}
|
||||
return $ordering;
|
||||
|
|
|
|||
Loading…
Reference in New Issue