diff --git a/modules/ppcp-paylater-block/block.json b/modules/ppcp-paylater-block/block.json new file mode 100644 index 000000000..b900a160e --- /dev/null +++ b/modules/ppcp-paylater-block/block.json @@ -0,0 +1,42 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "woocommerce-paypal-payments/paylater-messages", + "version": "1.0.0", + "title": "PayPal Pay Later messages", + "category": "widgets", + "description": "Pay Later", + "example": {}, + "attributes": { + "layout": { + "type": "string", + "default": "flex" + }, + "logo": { + "type": "string", + "default": "inline" + }, + "position": { + "type": "string", + "default": "left" + }, + "color": { + "type": "string", + "default": "black" + }, + "flexColor": { + "type": "string", + "default": "white" + }, + "flexRatio": { + "type": "string", + "default": "8x1" + } + }, + "supports": { + "html": false + }, + "textdomain": "woocommerce-paypal-payments", + "editorScript": "file:./assets/js/paylater-block.js", + "editorStyle": "file:./assets/css/edit.css" +} diff --git a/modules/ppcp-paylater-block/package.json b/modules/ppcp-paylater-block/package.json index c88508afe..711ad6549 100644 --- a/modules/ppcp-paylater-block/package.json +++ b/modules/ppcp-paylater-block/package.json @@ -10,6 +10,7 @@ "Edge >= 14" ], "dependencies": { + "@paypal/react-paypal-js": "^8.1.3", "core-js": "^3.25.0" }, "devDependencies": { diff --git a/modules/ppcp-paylater-block/resources/css/edit.scss b/modules/ppcp-paylater-block/resources/css/edit.scss new file mode 100644 index 000000000..010b2fd6c --- /dev/null +++ b/modules/ppcp-paylater-block/resources/css/edit.scss @@ -0,0 +1,13 @@ +.ppcp-overlay-parent { + display: grid; + grid-template-columns: 1fr; +} + +.ppcp-overlay-child { + grid-row-start: 1; + grid-column-start: 1; +} + +.ppcp-unclicable-overlay { + z-index: 10; +} diff --git a/modules/ppcp-paylater-block/resources/js/edit.js b/modules/ppcp-paylater-block/resources/js/edit.js new file mode 100644 index 000000000..0b000474a --- /dev/null +++ b/modules/ppcp-paylater-block/resources/js/edit.js @@ -0,0 +1,113 @@ +import { __ } from '@wordpress/i18n'; +import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; +import { PanelBody, SelectControl } from '@wordpress/components'; +import { PayPalScriptProvider, PayPalMessages } from "@paypal/react-paypal-js"; + +export default function Edit( { attributes, setAttributes } ) { + const { layout, logo, position, color, flexColor, flexRatio } = attributes; + const isFlex = layout === 'flex'; + + const previewStyle = { + layout, + logo: { + position, + type: logo, + }, + color: flexColor, + ratio: flexRatio, + text: { + color, + }, + }; + return ( + <> + + + setAttributes( { layout: value } ) } + /> + { !isFlex && ( setAttributes({logo: value})} + />)} + { !isFlex && ( setAttributes({position: value})} + />)} + { !isFlex && ( setAttributes({color: value})} + />)} + { isFlex && ( setAttributes({flexColor: value})} + />)} + { isFlex && ( setAttributes({flexRatio: value})} + />)} + + +
+
+ + + +
+
{/* make the message not clickable */} +
+
+ + ); +} diff --git a/modules/ppcp-paylater-block/resources/js/paylater-block.js b/modules/ppcp-paylater-block/resources/js/paylater-block.js new file mode 100644 index 000000000..40692d3cc --- /dev/null +++ b/modules/ppcp-paylater-block/resources/js/paylater-block.js @@ -0,0 +1,9 @@ +import { registerBlockType } from '@wordpress/blocks'; + +import Edit from './edit'; +import save from './save'; + +registerBlockType( 'woocommerce-paypal-payments/paylater-messages', { + edit: Edit, + save, +} ); diff --git a/modules/ppcp-paylater-block/resources/js/save.js b/modules/ppcp-paylater-block/resources/js/save.js new file mode 100644 index 000000000..e1db30d8f --- /dev/null +++ b/modules/ppcp-paylater-block/resources/js/save.js @@ -0,0 +1,21 @@ +import { useBlockProps } from '@wordpress/block-editor'; + +export default function save( { attributes } ) { + const { layout, logo, position, color, flexColor, flexRatio } = attributes; + const dataAttributes = layout === 'flex' ? { + 'data-pp-style-layout': 'flex', + 'data-pp-style-color': flexColor, + 'data-pp-style-ratio': flexRatio, + } : { + 'data-pp-style-layout': 'text', + 'data-pp-style-logo-type': logo, + 'data-pp-style-logo-position': position, + 'data-pp-style-text-color': color, + }; + const props = { + className: 'ppcp-paylater-message-block', + ...dataAttributes, + }; + + return
; +} diff --git a/modules/ppcp-paylater-block/src/PayLaterBlockModule.php b/modules/ppcp-paylater-block/src/PayLaterBlockModule.php index c66fec46e..25d9050ac 100644 --- a/modules/ppcp-paylater-block/src/PayLaterBlockModule.php +++ b/modules/ppcp-paylater-block/src/PayLaterBlockModule.php @@ -32,6 +32,17 @@ class PayLaterBlockModule implements ModuleInterface { * {@inheritDoc} */ public function run( ContainerInterface $c ): void { + add_action( + 'init', + function (): void { + /** + * Cannot return false for this path. + * + * @psalm-suppress PossiblyFalseArgument + */ + register_block_type( dirname( realpath( __FILE__ ), 2 ) ); + } + ); } /** diff --git a/modules/ppcp-paylater-block/webpack.config.js b/modules/ppcp-paylater-block/webpack.config.js index 12f344299..512da2177 100644 --- a/modules/ppcp-paylater-block/webpack.config.js +++ b/modules/ppcp-paylater-block/webpack.config.js @@ -9,6 +9,8 @@ module.exports = { target: 'web', plugins: [ new DependencyExtractionWebpackPlugin() ], entry: { + 'paylater-block': path.resolve('./resources/js/paylater-block.js'), + 'edit': path.resolve('./resources/css/edit.scss'), }, output: { path: path.resolve(__dirname, 'assets/'), diff --git a/modules/ppcp-paylater-block/yarn.lock b/modules/ppcp-paylater-block/yarn.lock index 209adc4a4..d6b9c3600 100644 --- a/modules/ppcp-paylater-block/yarn.lock +++ b/modules/ppcp-paylater-block/yarn.lock @@ -1005,6 +1005,28 @@ "@jridgewell/resolve-uri" "3.1.0" "@jridgewell/sourcemap-codec" "1.4.14" +"@paypal/paypal-js@^7.0.0": + version "7.1.1" + resolved "https://registry.yarnpkg.com/@paypal/paypal-js/-/paypal-js-7.1.1.tgz#3547cbb96f1692209c4b33cf0f8e69225c2e84a3" + integrity sha512-fVpExBrHINGHsyODYKBXSMinxrgPKzmVW7ZCaCqUaMl7kTSR1ZsVi2IhgLvsPpXF4LWSAMkPTP/J6aetQ6ZlNA== + dependencies: + promise-polyfill "^8.3.0" + +"@paypal/react-paypal-js@^8.1.3": + version "8.1.3" + resolved "https://registry.yarnpkg.com/@paypal/react-paypal-js/-/react-paypal-js-8.1.3.tgz#2a46bd864eee02efada370ca50fab5a5bf38f4ff" + integrity sha512-hEm27iYP/UHS3XPBhDdiK2U4PH1FxrOD5O3f9tstAVLJd82l/laCjq751HiESSm63PVOoFeKE41Fe1mYGab+oA== + dependencies: + "@paypal/paypal-js" "^7.0.0" + "@paypal/sdk-constants" "^1.0.122" + +"@paypal/sdk-constants@^1.0.122": + version "1.0.133" + resolved "https://registry.yarnpkg.com/@paypal/sdk-constants/-/sdk-constants-1.0.133.tgz#ee65c0bb574554becc8a5d3d0a834a944bbeb0e7" + integrity sha512-NWV0IWrHwQQrNLaUYxQ1GsytvHbDu+x63kRpNJfw1OQeDcUca4B0I4LoBktWQl5gICi090hD56n2Wg08dAl44g== + dependencies: + hi-base32 "^0.5.0" + "@types/eslint-scope@^3.7.3": version "3.7.4" resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16" @@ -1599,6 +1621,11 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +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== + immutable@^4.0.0: version "4.1.0" resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef" @@ -1840,6 +1867,11 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0: dependencies: find-up "^4.0.0" +promise-polyfill@^8.3.0: + version "8.3.0" + resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.3.0.tgz#9284810268138d103807b11f4e23d5e945a4db63" + integrity sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg== + punycode@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"