mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-07 18:00:15 +08:00
Create sidebar for styling screen and initalize preview - no success
This commit is contained in:
inpsyde-maticluznar
parent
06e74e74f4
commit
5f83517509
44 changed files with 3070 additions and 90 deletions
|
|
@ -1,25 +1,38 @@
|
|||
import data from '../../utils/data';
|
||||
import { CheckboxControl } from '@wordpress/components';
|
||||
|
||||
export const PayPalCheckbox = ( props ) => {
|
||||
return (
|
||||
<div className="ppcp-r__checkbox">
|
||||
<input
|
||||
className="ppcp-r__checkbox-value"
|
||||
type="checkbox"
|
||||
checked={ props.currentValue.includes( props.value ) }
|
||||
name={ props.name }
|
||||
<CheckboxControl
|
||||
label={ props?.label ? props.label : '' }
|
||||
value={ props.value }
|
||||
onChange={ ( e ) =>
|
||||
props.handleCheckboxState( e.target.checked, props )
|
||||
checked={ props.currentValue.includes( props.value ) }
|
||||
onChange={ ( checked ) =>
|
||||
handleCheckboxState( checked, props )
|
||||
}
|
||||
/>
|
||||
<span className="ppcp-r__checkbox-presentation">
|
||||
{ data().getImage( 'icon-checkbox.svg' ) }
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const PayPalCheckboxGroup = ( props ) => {
|
||||
const renderCheckboxGroup = () => {
|
||||
return props.value.map( ( checkbox ) => {
|
||||
return (
|
||||
<PayPalCheckbox
|
||||
label={ checkbox.label }
|
||||
value={ checkbox.value }
|
||||
key={ checkbox.value }
|
||||
currentValue={ props.currentValue }
|
||||
changeCallback={ props.changeCallback }
|
||||
/>
|
||||
);
|
||||
} );
|
||||
};
|
||||
|
||||
return <>{ renderCheckboxGroup() }</>;
|
||||
};
|
||||
|
||||
export const PayPalRdb = ( props ) => {
|
||||
return (
|
||||
<div className="ppcp-r__radio">
|
||||
|
|
@ -75,7 +88,6 @@ export const handleCheckboxState = ( checked, props ) => {
|
|||
let newValue = null;
|
||||
if ( checked ) {
|
||||
newValue = [ ...props.currentValue, props.value ];
|
||||
props.changeCallback( newValue );
|
||||
} else {
|
||||
newValue = props.currentValue.filter(
|
||||
( value ) => value !== props.value
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import data from '../../utils/data';
|
||||
import { PayPalCheckbox, PayPalRdb, handleCheckboxState } from './Fields';
|
||||
import { PayPalCheckbox, PayPalRdb } from './Fields';
|
||||
|
||||
const SelectBox = ( props ) => {
|
||||
let boxClassName = 'ppcp-r-select-box';
|
||||
|
|
@ -24,10 +24,7 @@ const SelectBox = ( props ) => {
|
|||
) }
|
||||
{ props.type === 'checkbox' && (
|
||||
<PayPalCheckbox
|
||||
{ ...{
|
||||
...props,
|
||||
handleCheckboxState,
|
||||
} }
|
||||
{ ...props }
|
||||
/>
|
||||
) }
|
||||
<div className="ppcp-r-select-box__content">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,28 @@
|
|||
import PaymentMethodModal from '../../../ReusableComponents/PaymentMethodModal';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button } from '@wordpress/components';
|
||||
import {
|
||||
PayPalRdb,
|
||||
PayPalRdbWithContent,
|
||||
} from '../../../ReusableComponents/Fields';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { RadioControl } from '@wordpress/components';
|
||||
|
||||
const THREED_SECURE_GROUP_NAME = 'threed-secure';
|
||||
const ModalAcdc = ( { setModalIsVisible } ) => {
|
||||
const [ threeDSecure, setThreeDSecure ] = useState( 'no-3d-secure' );
|
||||
const acdcOptions = [
|
||||
{
|
||||
label: __( 'No 3D Secure', 'woocommerce-paypal-payments' ),
|
||||
value: 'no-3d-secure',
|
||||
},
|
||||
{
|
||||
label: __( 'Only when required', 'woocommerce-paypal-payments' ),
|
||||
value: 'only-required-3d-secure',
|
||||
},
|
||||
{
|
||||
label: __(
|
||||
'Always require 3D Secure',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
value: 'always-3d-secure',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PaymentMethodModal
|
||||
|
|
@ -30,39 +43,10 @@ const ModalAcdc = ( { setModalIsVisible } ) => {
|
|||
) }
|
||||
</p>
|
||||
<div className="ppcp-r-modal__field-rows ppcp-r-modal__field-rows--acdc">
|
||||
<PayPalRdbWithContent
|
||||
id="no-3d-secure"
|
||||
name={ THREED_SECURE_GROUP_NAME }
|
||||
value="no-3d-secure"
|
||||
currentValue={ threeDSecure }
|
||||
handleRdbState={ setThreeDSecure }
|
||||
label={ __(
|
||||
'No 3D Secure',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
<PayPalRdbWithContent
|
||||
id="only-required-3d-secure"
|
||||
name={ THREED_SECURE_GROUP_NAME }
|
||||
value="only-required-3d-secure"
|
||||
currentValue={ threeDSecure }
|
||||
handleRdbState={ setThreeDSecure }
|
||||
label={ __(
|
||||
'Only when required',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
|
||||
<PayPalRdbWithContent
|
||||
id="always-3d-secure"
|
||||
name={ THREED_SECURE_GROUP_NAME }
|
||||
value="always-3d-secure"
|
||||
currentValue={ threeDSecure }
|
||||
handleRdbState={ setThreeDSecure }
|
||||
label={ __(
|
||||
'Always require 3D Secure',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
<RadioControl
|
||||
onChange={ setThreeDSecure }
|
||||
selected={ threeDSecure }
|
||||
options={ acdcOptions }
|
||||
/>
|
||||
|
||||
<div className="ppcp-r-modal__field-row ppcp-r-modal__field-row--save">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import SettingsCard from '../../ReusableComponents/SettingsCard';
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import {
|
||||
PayPalCheckbox,
|
||||
handleCheckboxState,
|
||||
} from '../../ReusableComponents/Fields';
|
||||
import { useState } from '@wordpress/element';
|
||||
import data from '../../../utils/data';
|
||||
|
|
@ -41,7 +40,7 @@ const TabOverview = () => {
|
|||
value={ todo.value }
|
||||
currentValue={ todos }
|
||||
changeCallback={ setTodos }
|
||||
description={ todo.description }
|
||||
label={ todo.description }
|
||||
changeTodos={ setTodosData }
|
||||
todosData={ todosData }
|
||||
/>
|
||||
|
|
@ -144,10 +143,8 @@ const TodoItem = ( props ) => {
|
|||
<PayPalCheckbox
|
||||
{ ...{
|
||||
...props,
|
||||
handleCheckboxState,
|
||||
} }
|
||||
/>{ ' ' }
|
||||
<p>{ props.description }</p>
|
||||
</div>
|
||||
<div
|
||||
className="ppcp-r-todo-item__close"
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ const TabSettings = () => {
|
|||
buttonLanguage: '',
|
||||
} );
|
||||
const updateFormValue = ( key, value ) => {
|
||||
console.log( key, value );
|
||||
setSettings( { ...settings, [ key ]: value } );
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,256 @@
|
|||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { SelectControl, RadioControl } from '@wordpress/components';
|
||||
import { PayPalCheckboxGroup } from '../../ReusableComponents/Fields';
|
||||
import { useState, useMemo, useEffect } from '@wordpress/element';
|
||||
import {
|
||||
defaultLocationSettings,
|
||||
paymentMethodOptions,
|
||||
colorOptions,
|
||||
shapeOptions,
|
||||
buttonLayoutOptions,
|
||||
buttonLabelOptions,
|
||||
} from '../../../data/settings/tab-styling-data';
|
||||
import Renderer from '../../../utils/renderer';
|
||||
|
||||
const TabStyling = () => {
|
||||
return <div>Styling tab</div>;
|
||||
useEffect( () => {
|
||||
generatePreview();
|
||||
}, [] );
|
||||
|
||||
const [ location, setLocation ] = useState( 'cart' );
|
||||
const [ locationSettings, setLocationSettings ] = useState( {
|
||||
...defaultLocationSettings,
|
||||
} );
|
||||
|
||||
const currentLocationSettings = useMemo( () => {
|
||||
return locationSettings[ location ];
|
||||
}, [ location, locationSettings ] );
|
||||
|
||||
const locationOptions = useMemo( () => {
|
||||
return Object.keys( locationSettings ).reduce(
|
||||
( locationOptionsData, key ) => {
|
||||
locationOptionsData.push( {
|
||||
value: locationSettings[ key ].value,
|
||||
label: locationSettings[ key ].label,
|
||||
} );
|
||||
|
||||
return locationOptionsData;
|
||||
},
|
||||
[]
|
||||
);
|
||||
}, [] );
|
||||
|
||||
const updateButtonSettings = ( key, value ) => {
|
||||
const updatedLocationSettings = { ...currentLocationSettings };
|
||||
|
||||
updatedLocationSettings.settings = {
|
||||
...updatedLocationSettings.settings,
|
||||
...{ [ key ]: value },
|
||||
};
|
||||
|
||||
setLocationSettings( {
|
||||
...locationSettings,
|
||||
[ location ]: { ...updatedLocationSettings },
|
||||
} );
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-styling">
|
||||
<div className="ppcp-r-styling__settings">
|
||||
<SectionIntro />
|
||||
<TabStylingSection className="ppcp-r-styling__section--rc">
|
||||
<SelectControl
|
||||
className="ppcp-r-styling__select"
|
||||
value={ location }
|
||||
onChange={ ( newLocation ) =>
|
||||
setLocation( newLocation )
|
||||
}
|
||||
label={ __(
|
||||
'Locations',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
options={ locationOptions }
|
||||
/>
|
||||
</TabStylingSection>
|
||||
<TabStylingSection
|
||||
title={ __(
|
||||
'Payment Methods',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
className="ppcp-r-styling__section--rc"
|
||||
>
|
||||
<div className="ppcp-r-styling__payment-method-checkboxes">
|
||||
<PayPalCheckboxGroup
|
||||
value={ paymentMethodOptions }
|
||||
changeCallback={ ( newValue ) =>
|
||||
updateButtonSettings(
|
||||
'paymentMethods',
|
||||
newValue
|
||||
)
|
||||
}
|
||||
currentValue={
|
||||
currentLocationSettings.settings.paymentMethods
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</TabStylingSection>
|
||||
{ currentLocationSettings.settings?.buttonLayout && (
|
||||
<TabStylingSection
|
||||
className="ppcp-r-styling__section--rc"
|
||||
title={ __(
|
||||
'Button Layout',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
<RadioControl
|
||||
className="ppcp-r__horizontal-control"
|
||||
onChange={ ( newValue ) =>
|
||||
updateButtonSettings( 'buttonLayout', newValue )
|
||||
}
|
||||
selected={
|
||||
currentLocationSettings.settings.buttonLayout
|
||||
}
|
||||
options={ buttonLayoutOptions }
|
||||
/>
|
||||
</TabStylingSection>
|
||||
) }
|
||||
<TabStylingSection
|
||||
title={ __( 'Shape', 'woocommerce-paypal-payments' ) }
|
||||
className="ppcp-r-styling__section--rc"
|
||||
>
|
||||
<RadioControl
|
||||
className="ppcp-r__horizontal-control"
|
||||
onChange={ ( newValue ) =>
|
||||
updateButtonSettings( 'shape', newValue )
|
||||
}
|
||||
selected={ currentLocationSettings.settings.shape }
|
||||
options={ shapeOptions }
|
||||
/>
|
||||
</TabStylingSection>
|
||||
<TabStylingSection>
|
||||
<SelectControl
|
||||
className="ppcp-r-styling__select"
|
||||
onChange={ ( newValue ) =>
|
||||
updateButtonSettings( 'buttonLabel', newValue )
|
||||
}
|
||||
selected={
|
||||
currentLocationSettings.settings.buttonLabel
|
||||
}
|
||||
label={ __(
|
||||
'Button Label',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
options={ buttonLabelOptions }
|
||||
/>
|
||||
</TabStylingSection>
|
||||
<TabStylingSection>
|
||||
<SelectControl
|
||||
className="ppcp-r-styling__select"
|
||||
label={ __(
|
||||
'Button Color',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
options={ colorOptions }
|
||||
/>
|
||||
</TabStylingSection>
|
||||
{ currentLocationSettings.settings?.tagLine && (
|
||||
<TabStylingSection
|
||||
title={ __( 'Tagline', 'woocommerce-paypal-payments' ) }
|
||||
className="ppcp-r-styling__section--rc"
|
||||
>
|
||||
<PayPalCheckboxGroup
|
||||
value={ [
|
||||
{
|
||||
value: 'enable-tagline',
|
||||
label: __(
|
||||
'Enable Tagline',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
] }
|
||||
changeCallback={ ( newValue ) =>
|
||||
updateButtonSettings( 'tagLine', newValue )
|
||||
}
|
||||
currentValue={
|
||||
currentLocationSettings.settings.tagLine
|
||||
}
|
||||
/>
|
||||
</TabStylingSection>
|
||||
) }
|
||||
</div>
|
||||
<div
|
||||
id="ppcp-r-styling-preview"
|
||||
className="ppcp-r-styling__preview"
|
||||
>
|
||||
<div className="ppcp-preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TabStylingSection = ( props ) => {
|
||||
let sectionTitleClassName = 'ppcp-r-styling__section';
|
||||
|
||||
if ( props?.className ) {
|
||||
sectionTitleClassName += ` ${ props.className }`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ sectionTitleClassName }>
|
||||
<span className="ppcp-r-styling__title">{ props.title }</span>
|
||||
{ props?.description && (
|
||||
<p
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html: props.description,
|
||||
} }
|
||||
className="ppcp-r-styling__description"
|
||||
/>
|
||||
) }
|
||||
{ props.children }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SectionIntro = () => {
|
||||
const buttonStyleDescription = sprintf(
|
||||
// translators: %s: Link to Classic checkout page
|
||||
__(
|
||||
'Customize the appearance of the PayPal smart buttons on the <a href="%s">[MISSING LINK]Classic Checkout page</a>. Checkout Buttons must be enabled to display the PayPal gateway on the Checkout page.'
|
||||
),
|
||||
'#'
|
||||
);
|
||||
return (
|
||||
<TabStylingSection
|
||||
className="ppcp-r-styling__section--rc ppcp-r-styling__section--empty"
|
||||
title={ __( 'Button Styling', 'wooocommerce-paypal-payments' ) }
|
||||
description={ buttonStyleDescription }
|
||||
></TabStylingSection>
|
||||
);
|
||||
};
|
||||
|
||||
const generatePreview = () => {
|
||||
const settings = {
|
||||
button: {
|
||||
wrapper: '#ppcp-r-styling-preview',
|
||||
style: {
|
||||
color: 'gold',
|
||||
shape: 'rect',
|
||||
label: 'paypal',
|
||||
tagline: false,
|
||||
layout: 'horizontal',
|
||||
},
|
||||
},
|
||||
separate_buttons: {},
|
||||
};
|
||||
const renderer = new Renderer(
|
||||
null,
|
||||
settings,
|
||||
( data, actions ) => actions.reject(),
|
||||
null
|
||||
);
|
||||
jQuery( document ).trigger( 'ppcp_paypal_render_preview', settings );
|
||||
|
||||
renderer.render( {} );
|
||||
};
|
||||
|
||||
export default TabStyling;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
