139 lines
3.5 KiB
TypeScript
139 lines
3.5 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
|
|
import {
|
|
PanelBody,
|
|
RadioControl,
|
|
ToggleControl,
|
|
Notice,
|
|
TextControl,
|
|
} from '@wordpress/components';
|
|
import ExternalLinkCard from '@woocommerce/editor-components/external-link-card';
|
|
import { ADMIN_URL } from '@woocommerce/settings';
|
|
import { useExpressPaymentMethods } from '@woocommerce/base-context/hooks';
|
|
import { __ } from '@wordpress/i18n';
|
|
import clsx from 'clsx';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import Block from './block';
|
|
import './editor.scss';
|
|
import { ExpressCheckoutAttributes } from './types';
|
|
import { ExpressCheckoutContext } from './context';
|
|
|
|
export const Edit = ( {
|
|
attributes,
|
|
setAttributes,
|
|
}: {
|
|
attributes: ExpressCheckoutAttributes;
|
|
setAttributes: ( attributes: Record< string, unknown > ) => undefined;
|
|
} ): JSX.Element | null => {
|
|
const { paymentMethods, isInitialized } = useExpressPaymentMethods();
|
|
const hasExpressPaymentMethods = Object.keys( paymentMethods ).length > 0;
|
|
const blockProps = useBlockProps( {
|
|
className: clsx(
|
|
{
|
|
'wp-block-woocommerce-checkout-express-payment-block--has-express-payment-methods':
|
|
hasExpressPaymentMethods,
|
|
},
|
|
attributes?.className
|
|
),
|
|
attributes,
|
|
} );
|
|
|
|
if ( ! isInitialized || ! hasExpressPaymentMethods ) {
|
|
return null;
|
|
}
|
|
|
|
const { buttonHeight, buttonBorderRadius, showButtonStyles } = attributes;
|
|
|
|
const buttonStyleControls = (
|
|
<>
|
|
<RadioControl
|
|
label={ __( 'Button Size', 'woocommerce' ) }
|
|
selected={ buttonHeight }
|
|
options={ [
|
|
{ label: 'Small (40px)', value: '40' },
|
|
{ label: 'Medium (48px)', value: '48' },
|
|
{ label: 'Large (55px)', value: '55' },
|
|
] }
|
|
onChange={ ( newValue: string ) =>
|
|
setAttributes( { buttonHeight: newValue } )
|
|
}
|
|
/>
|
|
<div className="border-radius-control-container">
|
|
<TextControl
|
|
label={ __( 'Button Border Radius', 'woocommerce' ) }
|
|
value={ buttonBorderRadius }
|
|
onChange={ ( newValue: string ) =>
|
|
setAttributes( {
|
|
buttonBorderRadius: newValue,
|
|
} )
|
|
}
|
|
/>
|
|
<span className="border-radius-control-px">px</span>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
const showControls = () => {
|
|
if ( showButtonStyles ) {
|
|
return buttonStyleControls;
|
|
}
|
|
return (
|
|
<Notice
|
|
status="info"
|
|
isDismissible={ false }
|
|
className="show-button-styles-notice"
|
|
>
|
|
<p className="wc-block-checkout__controls-text">
|
|
{ __(
|
|
'You can change the appearance of individual buttons in the respective payment extension settings page',
|
|
'woocommerce'
|
|
) }
|
|
</p>
|
|
<ExternalLinkCard
|
|
href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=checkout` }
|
|
title="Payment Settings"
|
|
/>
|
|
</Notice>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div { ...blockProps }>
|
|
<InspectorControls>
|
|
<PanelBody title={ __( 'Button Settings', 'woocommerce' ) }>
|
|
<p className="wc-block-checkout__controls-text">
|
|
{ __(
|
|
'These settings will override the plugin specific styles for these buttons',
|
|
'woocommerce'
|
|
) }
|
|
</p>
|
|
<ToggleControl
|
|
label={ __( 'Express Button Styles', 'woocommerce' ) }
|
|
checked={ showButtonStyles }
|
|
onChange={ () =>
|
|
setAttributes( {
|
|
showButtonStyles: ! showButtonStyles,
|
|
} )
|
|
}
|
|
/>
|
|
{ showControls() }
|
|
</PanelBody>
|
|
</InspectorControls>
|
|
<ExpressCheckoutContext.Provider
|
|
value={ { showButtonStyles, buttonHeight, buttonBorderRadius } }
|
|
>
|
|
<Block />
|
|
</ExpressCheckoutContext.Provider>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Save = (): JSX.Element => {
|
|
return <div { ...useBlockProps.save() } />;
|
|
};
|