woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Add pay later block

Browse source
This commit is contained in:
Alex P 2023-12-05 21:35:18 +02:00
parent 0d016b94ec
commit 9ded2bfa17
No known key found for this signature in database
GPG key ID: 54487A734A204D71
9 changed files with 244 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

42
modules/ppcp-paylater-block/block.json Normal file
View file

@ -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"
}

1
modules/ppcp-paylater-block/package.json
View file

@ -10,6 +10,7 @@
"Edge >= 14"
],
"dependencies": {
"@paypal/react-paypal-js": "^8.1.3",
"core-js": "^3.25.0"
},
"devDependencies": {

13
modules/ppcp-paylater-block/resources/css/edit.scss Normal file
View file

@ -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;
}

113
modules/ppcp-paylater-block/resources/js/edit.js Normal file
View file

@ -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 (
<>
<InspectorControls>
<PanelBody title={ __( 'Settings', 'woocommerce-paypal-payments' ) }>
<SelectControl
label={ __( 'Layout', 'woocommerce-paypal-payments' ) }
options={ [
{ label: __( 'Text', 'woocommerce-paypal-payments' ), value: 'text' },
{ label: __( 'Banner', 'woocommerce-paypal-payments' ), value: 'flex' },
] }
value={ layout }
onChange={ ( value ) => setAttributes( { layout: value } ) }
/>
{ !isFlex && (<SelectControl
label={__('Logo', 'woocommerce-paypal-payments')}
options={[
{ label: __('Primary', 'woocommerce-paypal-payments'), value: 'primary' },
{ label: __('Alternative', 'woocommerce-paypal-payments'), value: 'alternative' },
{ label: __('Inline', 'woocommerce-paypal-payments'), value: 'inline' },
{ label: __('None', 'woocommerce-paypal-payments'), value: 'none' },
]}
value={logo}
onChange={(value) => setAttributes({logo: value})}
/>)}
{ !isFlex && (<SelectControl
label={__('Logo Position', 'woocommerce-paypal-payments')}
options={[
{ label: __( 'Left', 'woocommerce-paypal-payments' ), value: 'left' },
{ label: __( 'Right', 'woocommerce-paypal-payments' ), value: 'right' },
{ label: __( 'Top', 'woocommerce-paypal-payments' ), value: 'top' },
]}
value={position}
onChange={(value) => setAttributes({position: value})}
/>)}
{ !isFlex && (<SelectControl
label={__('Text Color', 'woocommerce-paypal-payments')}
options={[
{ label: __( 'Black', 'woocommerce-paypal-payments' ), value: 'black' },
{ label: __( 'White', 'woocommerce-paypal-payments' ), value: 'white' },
{ label: __( 'Monochrome', 'woocommerce-paypal-payments' ), value: 'monochrome' },
{ label: __( 'Grayscale', 'woocommerce-paypal-payments' ), value: 'grayscale' },
]}
value={color}
onChange={(value) => setAttributes({color: value})}
/>)}
{ isFlex && (<SelectControl
label={__('Color', 'woocommerce-paypal-payments')}
options={[
{ label: __( 'Blue', 'woocommerce-paypal-payments' ), value: 'blue' },
{ label: __( 'Black', 'woocommerce-paypal-payments' ), value: 'black' },
{ label: __( 'White', 'woocommerce-paypal-payments' ), value: 'white' },
{ label: __( 'White no border', 'woocommerce-paypal-payments' ), value: 'white-no-border' },
{ label: __( 'Gray', 'woocommerce-paypal-payments' ), value: 'gray' },
{ label: __( 'Monochrome', 'woocommerce-paypal-payments' ), value: 'monochrome' },
{ label: __( 'Grayscale', 'woocommerce-paypal-payments' ), value: 'grayscale' },
]}
value={flexColor}
onChange={(value) => setAttributes({flexColor: value})}
/>)}
{ isFlex && (<SelectControl
label={__('Ratio', 'woocommerce-paypal-payments')}
options={[
{ label: __( '1x1', 'woocommerce-paypal-payments' ), value: '1x1' },
{ label: __( '1x4', 'woocommerce-paypal-payments' ), value: '1x4' },
{ label: __( '8x1', 'woocommerce-paypal-payments' ), value: '8x1' },
{ label: __( '20x1', 'woocommerce-paypal-payments' ), value: '20x1' },
]}
value={flexRatio}
onChange={(value) => setAttributes({flexRatio: value})}
/>)}
</PanelBody>
</InspectorControls>
<div {...useBlockProps({className: ['ppcp-paylater-block-preview', 'ppcp-overlay-parent']})}>
<div className={'ppcp-overlay-child'}>
<PayPalScriptProvider
options={{
clientId: "test",
components: "messages",
}}
>
<PayPalMessages
style={previewStyle}
forceReRender={[previewStyle]}
/>
</PayPalScriptProvider>
</div>
<div className={'ppcp-overlay-child ppcp-unclicable-overlay'}> {/* make the message not clickable */}
</div>
</div>
</>
);
}

9
modules/ppcp-paylater-block/resources/js/paylater-block.js Normal file
View file

@ -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,
} );

21
modules/ppcp-paylater-block/resources/js/save.js Normal file
View file

@ -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 <div { ...useBlockProps.save(props) }></div>;
}

11
modules/ppcp-paylater-block/src/PayLaterBlockModule.php
View file

@ -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 ) );
}
);
}
/**

2
modules/ppcp-paylater-block/webpack.config.js
View file

@ -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/'),

32
modules/ppcp-paylater-block/yarn.lock
View file

@ -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"