diff --git a/modules/ppcp-settings/package.json b/modules/ppcp-settings/package.json index dfcad023c..15ec130c1 100644 --- a/modules/ppcp-settings/package.json +++ b/modules/ppcp-settings/package.json @@ -13,7 +13,7 @@ "@wordpress/scripts": "^30.3.0" }, "dependencies": { - "@paypal/paypal-js": "^8.1.2", + "@paypal/react-paypal-js": "^8.7.0", "@woocommerce/settings": "^1.0.0", "deepmerge": "^4.3.1", "react-select": "^5.8.3" diff --git a/modules/ppcp-settings/resources/css/components/screens/overview/_tab-styling.scss b/modules/ppcp-settings/resources/css/components/screens/overview/_tab-styling.scss index 00238eed6..c75d6a4c9 100644 --- a/modules/ppcp-settings/resources/css/components/screens/overview/_tab-styling.scss +++ b/modules/ppcp-settings/resources/css/components/screens/overview/_tab-styling.scss @@ -33,9 +33,16 @@ &__preview { width: calc(100% - 422px); background-color: #FAF8F5; + display: flex; + align-items: center; + + &-inner { + width: 100%; + padding: 24px; + } } - &__section--rc{ + &__section--rc { .ppcp-r-styling__title { @include font(13, 20, 600); color: $color-black; @@ -44,6 +51,12 @@ } } + &__section--empty.ppcp-r-styling__section { + padding-bottom: 0; + margin-bottom: 0; + border-bottom: none; + } + &__select { label { @include font(13, 16, 600); diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields.js index 79e75565a..74336951f 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields.js @@ -1,12 +1,20 @@ import { CheckboxControl } from '@wordpress/components'; export const PayPalCheckbox = ( props ) => { + let isChecked = null; + + if ( Array.isArray( props.currentValue ) ) { + isChecked = props.currentValue.includes( props.value ); + } else { + isChecked = props.currentValue; + } + return (
handleCheckboxState( checked, props ) } @@ -86,7 +94,9 @@ export const PayPalRdbWithContent = ( props ) => { export const handleCheckboxState = ( checked, props ) => { let newValue = null; - if ( checked ) { + if ( ! Array.isArray( props.currentValue ) ) { + newValue = checked; + } else if ( checked ) { newValue = [ ...props.currentValue, props.value ]; } else { newValue = props.currentValue.filter( diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabStyling.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabStyling.js index 4eafbb665..e7fda5427 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabStyling.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabStyling.js @@ -2,7 +2,8 @@ import { __, sprintf } from '@wordpress/i18n'; import { SelectControl, RadioControl } from '@wordpress/components'; import { PayPalCheckboxGroup } from '../../ReusableComponents/Fields'; import { useState, useMemo, useEffect } from '@wordpress/element'; -import Renderer from '../../../../../../ppcp-button/resources/js/modules/Renderer/Renderer'; +import { PayPalScriptProvider, PayPalButtons } from '@paypal/react-paypal-js'; + import { defaultLocationSettings, paymentMethodOptions, @@ -13,15 +14,32 @@ import { } from '../../../data/settings/tab-styling-data'; const TabStyling = () => { - useEffect( () => { - generatePreview(); - }, [] ); - const [ location, setLocation ] = useState( 'cart' ); + const [ canRender, setCanRender ] = useState( false ); const [ locationSettings, setLocationSettings ] = useState( { ...defaultLocationSettings, } ); + // Sometimes buttons won't render. This fixes the timing problem. + useEffect( () => { + const handleDOMContentLoaded = () => setCanRender( true ); + if ( + document.readyState === 'interactive' || + document.readyState === 'complete' + ) { + handleDOMContentLoaded(); + } else { + document.addEventListener( + 'DOMContentLoaded', + handleDOMContentLoaded + ); + } + }, [] ); + + document.addEventListener( 'DOMContentLoaded', () => { + setCanRender( true ); + } ); + const currentLocationSettings = useMemo( () => { return locationSettings[ location ]; }, [ location, locationSettings ] ); @@ -41,145 +59,80 @@ const TabStyling = () => { }, [] ); const updateButtonSettings = ( key, value ) => { - const updatedLocationSettings = { ...currentLocationSettings }; - - updatedLocationSettings.settings = { - ...updatedLocationSettings.settings, - ...{ [ key ]: value }, - }; - setLocationSettings( { ...locationSettings, - [ location ]: { ...updatedLocationSettings }, + [ location ]: { + ...currentLocationSettings, + settings: { + ...currentLocationSettings.settings, + [ key ]: value, + }, + }, } ); }; + const updateButtonStyle = ( key, value ) => { + setLocationSettings( { + ...locationSettings, + [ location ]: { + ...currentLocationSettings, + settings: { + ...currentLocationSettings.settings, + style: { + ...currentLocationSettings.settings.style, + [ key ]: value, + }, + }, + }, + } ); + }; + + if ( ! canRender ) { + return <>; + } + return (
- - - setLocation( newLocation ) - } - label={ __( - 'Locations', - 'woocommerce-paypal-payments' - ) } - options={ locationOptions } - /> - - -
- - updateButtonSettings( - 'paymentMethods', - newValue - ) - } - currentValue={ - currentLocationSettings.settings.paymentMethods - } - /> -
- - { currentLocationSettings.settings?.buttonLayout && ( - - - updateButtonSettings( 'buttonLayout', newValue ) - } - selected={ - currentLocationSettings.settings.buttonLayout - } - options={ buttonLayoutOptions } - /> - - ) } - - - updateButtonSettings( 'shape', newValue ) - } - selected={ currentLocationSettings.settings.shape } - options={ shapeOptions } - /> - - - - updateButtonSettings( 'buttonLabel', newValue ) - } - selected={ - currentLocationSettings.settings.buttonLabel - } - label={ __( - 'Button Label', - 'woocommerce-paypal-payments' - ) } - options={ buttonLabelOptions } - /> - - - - - { currentLocationSettings.settings?.tagLine && ( - - - updateButtonSettings( 'tagLine', newValue ) - } - currentValue={ - currentLocationSettings.settings.tagLine - } - /> - - ) } + + + + + + + + +
-
+
+ +
); @@ -225,74 +178,165 @@ const SectionIntro = () => { ); }; -const generatePreview = () => { - const render = () => { - const settings = { - button: { - wrapper: '#ppcp-r-styling-preview', - style: { - color: 'gold', - shape: 'rect', - label: 'paypal', - tagline: false, - layout: 'horizontal', - }, - }, - separate_buttons: {}, - }; - const wrapperSelector = - Object.values( settings.separate_buttons ).length > 0 - ? Object.values( settings.separate_buttons )[ 0 ].wrapper - : settings.button.wrapper; - const wrapper = document.querySelector( wrapperSelector ); - if ( ! wrapper ) { - return; - } - wrapper.innerHTML = ''; - - const renderer = new Renderer( - null, - settings, - ( data, actions ) => actions.reject(), - null - ); - - try { - renderer.render( {} ); - jQuery( document ).trigger( - 'ppcp_paypal_render_preview', - settings - ); - } catch ( err ) { - console.error( err ); - } - }; - - renderPreview( () => { - console.log( 'CALLBACK' ); - }, render ); +const SectionLocations = ( { locationOptions, location, setLocation } ) => { + return ( + + setLocation( newLocation ) } + label={ __( 'Locations', 'woocommerce-paypal-payments' ) } + options={ locationOptions } + /> + + ); }; -function renderPreview( settingsCallback, render ) { - let oldSettings = settingsCallback(); - const form = jQuery( '#mainform' ); - form.on( 'change', ':input', () => { - const newSettings = settingsCallback(); - if ( JSON.stringify( oldSettings ) === JSON.stringify( newSettings ) ) { - return; - } +const SectionPaymentMethods = ( { + locationSettings, + updateButtonSettings, +} ) => { + return ( + +
+ + updateButtonSettings( 'paymentMethods', newValue ) + } + currentValue={ locationSettings.settings.paymentMethods } + /> +
+ + ); +}; - render( newSettings ); +const SectionButtonLayout = ( { locationSettings, updateButtonStyle } ) => { + const buttonLayoutIsAllowed = + locationSettings.settings.style?.layout && + locationSettings.settings.style?.tagline === false; + return ( + buttonLayoutIsAllowed && ( + + + updateButtonStyle( 'layout', newValue ) + } + selected={ locationSettings.settings.style.layout } + options={ buttonLayoutOptions } + /> + + ) + ); +}; - oldSettings = newSettings; - } ); +const SectionButtonShape = ( { locationSettings, updateButtonStyle } ) => { + return ( + + + updateButtonStyle( 'shape', newValue ) + } + selected={ locationSettings.settings.style.shape } + options={ shapeOptions } + /> + + ); +}; - jQuery( document ).on( 'ppcp_paypal_script_loaded', () => { - oldSettings = settingsCallback(); +const SectionButtonLabel = ( { locationSettings, updateButtonStyle } ) => { + return ( + + + updateButtonStyle( 'label', newValue ) + } + value={ locationSettings.settings.style.label } + label={ __( 'Button Label', 'woocommerce-paypal-payments' ) } + options={ buttonLabelOptions } + /> + + ); +}; - render( oldSettings ); - } ); +const SectionButtonColor = ( { locationSettings, updateButtonStyle } ) => { + return ( + + + updateButtonStyle( 'color', newValue ) + } + value={ locationSettings.settings.style.color } + options={ colorOptions } + /> + + ); +}; + +const SectionButtonTagline = ( { locationSettings, updateButtonStyle } ) => { + const taglineIsAllowed = + locationSettings.settings.style.hasOwnProperty( 'tagline' ) && + locationSettings.settings.style?.layout === 'horizontal'; + + return ( + taglineIsAllowed && ( + + { + updateButtonStyle( 'tagline', newValue ); + } } + currentValue={ locationSettings.settings.style.tagline } + /> + + ) + ); +}; + +const SectionButtonPreview = ( { locationSettings } ) => { + return ( + + + Error + + + ); +}; - render( oldSettings ); -} export default TabStyling; diff --git a/modules/ppcp-settings/resources/js/data/settings/tab-styling-data.js b/modules/ppcp-settings/resources/js/data/settings/tab-styling-data.js index 9c8c2553c..35424f602 100644 --- a/modules/ppcp-settings/resources/js/data/settings/tab-styling-data.js +++ b/modules/ppcp-settings/resources/js/data/settings/tab-styling-data.js @@ -1,19 +1,23 @@ import { __ } from '@wordpress/i18n'; -const settings = { - paymentMethods: [], - buttonLayout: 'horizontal', - shape: null, - buttonLabel: 'paypal', - buttonColor: 'gold', - tagLine: [], -}; - const cartAndExpressCheckoutSettings = { paymentMethods: [], - shape: null, - buttonLabel: 'paypal', - buttonColor: 'gold', + style: { + shape: 'pill', + label: 'paypal', + color: 'gold', + }, +}; + +const settings = { + paymentMethods: [], + style: { + layout: 'vertical', + shape: cartAndExpressCheckoutSettings.style.shape, + label: cartAndExpressCheckoutSettings.style.label, + color: cartAndExpressCheckoutSettings.style.color, + tagline: false, + }, }; export const defaultLocationSettings = { @@ -77,11 +81,11 @@ export const buttonLabelOptions = [ label: __( 'Checkout', 'woocommerce-paypal-payments' ), }, { - value: 'paypal-buy-now', + value: 'buynow', label: __( 'PayPal Buy Now', 'woocommerce-paypal-payments' ), }, { - value: 'pay-with-paypal', + value: 'pay', label: __( 'Pay with PayPal', 'woocommerce-paypal-payments' ), }, ]; @@ -126,7 +130,7 @@ export const shapeOptions = [ label: __( 'Pill', 'woocommerce-paypal-payments' ), }, { - value: 'rectangle', + value: 'rect', label: __( 'Rectangle', 'woocommerce-paypal-payments' ), }, ]; diff --git a/modules/ppcp-settings/yarn.lock b/modules/ppcp-settings/yarn.lock index 0a32de5dd..a3b2a6adb 100644 --- a/modules/ppcp-settings/yarn.lock +++ b/modules/ppcp-settings/yarn.lock @@ -1881,6 +1881,21 @@ dependencies: promise-polyfill "^8.3.0" +"@paypal/react-paypal-js@^8.7.0": + version "8.7.0" + resolved "https://registry.yarnpkg.com/@paypal/react-paypal-js/-/react-paypal-js-8.7.0.tgz#26b9dc9b881827afcb2fb8dea5078a9c90e24128" + integrity sha512-KW4EdL8hlLWBY6f9l1csxQ8Szh5bhMFLxl+DV29jHNwdlM6z3s+w4LZQ7GtgHktSrlNBHgblNNvwLNpcDtsZgg== + dependencies: + "@paypal/paypal-js" "^8.1.2" + "@paypal/sdk-constants" "^1.0.122" + +"@paypal/sdk-constants@^1.0.122": + version "1.0.150" + resolved "https://registry.yarnpkg.com/@paypal/sdk-constants/-/sdk-constants-1.0.150.tgz#26b9f3b980bc1c73846ae0c1af99719e490dff48" + integrity sha512-ETm/mtiTBw4gHPdKo3GXzSQyXfZKevSg+ujfEvZbLT9gCc/YFmTBnWDroqmzOeuSXnf2Ll4bBSp3xbr47NQbUQ== + dependencies: + hi-base32 "^0.5.0" + "@pkgr/core@^0.1.0": version "0.1.1" resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31" @@ -6595,6 +6610,11 @@ hey-listen@^1.0.8: resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68" integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q== +hi-base32@^0.5.0: + version "0.5.1" + resolved "https://registry.yarnpkg.com/hi-base32/-/hi-base32-0.5.1.tgz#1279f2ddae2673219ea5870c2121d2a33132857e" + integrity sha512-EmBBpvdYh/4XxsnUybsPag6VikPYnN30td+vQk+GI3qpahVEG9+gTkG0aXVxTjBqQ5T6ijbWIu77O+C5WFWsnA== + highlight-words-core@^1.2.2: version "1.2.3" resolved "https://registry.yarnpkg.com/highlight-words-core/-/highlight-words-core-1.2.3.tgz#781f37b2a220bf998114e4ef8c8cb6c7a4802ea8"