Skip to content

Commit 866dcbc

Browse files
mahdiyazdanigooklani
mahdiyazdani
and
gooklani
authored
Compatibility with WC Checkout block (#18)
* FPO * FPO * Delete editor.js * Enqueue editor resources * Register editor block * Simplified the `save` method * Register checkout block * Slide toggle the terms content on the checkout block * Add `autoload` to map classes from the `includes` folder * The checkout block integration class * FPO * Fix linting errors * Add `WAT` to prefixes * Registers block type with WC integration registry * Display notice when notice text is empty * Bail early if notice text is missing * Add dependency scripts * Removed unused method * Add `wp-primitives` dependency * Update block icon * Add changelog * Update FAQ * Update content * Update comment block * Restore `save_terms_acceptance` * Add `save_terms_acceptance` * Update field name * Update field name * Declares support for HPOS * Exclude `vendor` folder from the archive file * Add `wc-blocks-data-store` script dependency * Replace validation store path with constant * Generate * Update package version * Fix PHP 7.4 notice error * Add new screenshots * Update content * Bump tested WC version to 7.4 * Rename --------- Co-authored-by: Sajedeh Gooklani <[email protected]>
1 parent dc7da91 commit 866dcbc

17 files changed

+605
-82
lines changed

‎.wordpress-org/screenshot-4.png‎

345 KB
Loading

‎.wordpress-org/screenshot-5.png‎

159 KB
Loading

‎assets/js/block.js‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
( function ( wp, wc ) {
2+
'use strict';
3+
4+
if ( ! wp || ! wc ) {
5+
return;
6+
}
7+
8+
const el = wp.element.createElement;
9+
const { registerBlockType } = wp.blocks;
10+
const { useBlockProps } = wp.blockEditor;
11+
const { Disabled, Notice } = wp.components;
12+
const { SVG, Path } = wp.primitives;
13+
const { CheckboxControl } = wc.blocksCheckout;
14+
const { ADMIN_URL, getSetting } = wc.wcSettings;
15+
const { __ } = wp.i18n;
16+
17+
registerBlockType( 'mypreview/woo-additional-terms', {
18+
title: __( 'Additional Terms', 'woo-additional-terms' ),
19+
description: __( 'Placeholder block for displaying additional terms checkbox.', 'woo-additional-terms' ),
20+
icon: {
21+
foreground: '#ffffff',
22+
background: '#7f54b3',
23+
src: el(
24+
SVG,
25+
{ xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24' },
26+
el( Path, {
27+
d: 'M4 20h9v-1.5H4V20zm0-5.5V16h16v-1.5H4zm.8-4l.7.7 2-2V12h1V9.2l2 2 .7-.7-2-2H12v-1H9.2l2-2-.7-.7-2 2V4h-1v2.8l-2-2-.7.7 2 2H4v1h2.8l-2 2z',
28+
} )
29+
),
30+
},
31+
category: 'woocommerce',
32+
parent: [ 'woocommerce/checkout-fields-block' ],
33+
attributes: {
34+
lock: {
35+
type: 'object',
36+
default: {
37+
remove: true,
38+
move: false,
39+
},
40+
},
41+
checkbox: {
42+
type: 'boolean',
43+
default: false,
44+
},
45+
},
46+
supports: {
47+
align: false,
48+
html: false,
49+
multiple: false,
50+
reusable: false,
51+
},
52+
edit: () => {
53+
// eslint-disable-next-line react-hooks/rules-of-hooks
54+
const blockProps = useBlockProps();
55+
const { notice } = getSetting( '_woo_additional_terms_data', '' );
56+
57+
return notice
58+
? el(
59+
Disabled,
60+
{},
61+
el(
62+
'div',
63+
blockProps,
64+
el(
65+
CheckboxControl,
66+
{
67+
id: '_woo_additional_terms',
68+
checked: false,
69+
},
70+
el( 'span', {
71+
dangerouslySetInnerHTML: {
72+
__html: notice,
73+
},
74+
} )
75+
)
76+
)
77+
)
78+
: el(
79+
Notice,
80+
{
81+
isDismissible: false,
82+
status: 'warning',
83+
actions: [
84+
{
85+
className: 'wc-block-checkout__terms_notice-button',
86+
label: __(
87+
'Setup an additional Terms and Conditions page',
88+
'woo-additional-terms'
89+
),
90+
onClick: () =>
91+
window.open(
92+
`${ ADMIN_URL }admin.php?page=wc-settings&tab=woo-additional-terms`,
93+
'_blank'
94+
),
95+
},
96+
],
97+
},
98+
el(
99+
'p',
100+
{},
101+
__( 'You don’t have additional Terms and Conditions page set up.', 'woo-additional-terms' )
102+
)
103+
);
104+
},
105+
save: () => el( 'div', useBlockProps.save() ),
106+
} );
107+
} )( window.wp, window.wc );

‎assets/js/checkout.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/* eslint-disable react-hooks/rules-of-hooks */
2+
3+
( function ( wp, wc ) {
4+
'use strict';
5+
6+
if ( ! wp || ! wc ) {
7+
return;
8+
}
9+
10+
const el = wp.element.createElement;
11+
const { withInstanceId } = wp.compose;
12+
const { useDispatch, useSelect } = wp.data;
13+
const { useEffect, useState } = wp.element;
14+
const { __ } = wp.i18n;
15+
const { getSetting } = wc.wcSettings;
16+
const { VALIDATION_STORE_KEY } = wc.wcBlocksData;
17+
const { CheckboxControl, registerCheckoutBlock } = wc.blocksCheckout;
18+
19+
registerCheckoutBlock( {
20+
metadata: {
21+
name: 'mypreview/woo-additional-terms',
22+
parent: [ 'woocommerce/checkout-fields-block' ],
23+
},
24+
component: withInstanceId( ( { instanceId, checkoutExtensionData } ) => {
25+
const { content, notice } = getSetting( '_woo_additional_terms_data', '' );
26+
27+
if ( ! notice ) {
28+
return null;
29+
}
30+
31+
const validationErrorId = `_woo_additional_terms_data_${ instanceId }`;
32+
const { setExtensionData } = checkoutExtensionData;
33+
const [ checked, setChecked ] = useState( false );
34+
const { setValidationErrors, clearValidationError } = useDispatch( VALIDATION_STORE_KEY );
35+
const error = useSelect( ( select ) =>
36+
select( VALIDATION_STORE_KEY ).getValidationError( validationErrorId )
37+
);
38+
const hasError = !! ( error?.message && ! error?.hidden );
39+
40+
useEffect( () => {
41+
setExtensionData( '_woo_additional_terms', 'wat_checkbox', checked );
42+
43+
if ( checked ) {
44+
clearValidationError( validationErrorId );
45+
} else {
46+
setValidationErrors( {
47+
[ validationErrorId ]: {
48+
message: __(
49+
'Please read and accept the additional terms and conditions to proceed with your order.',
50+
'woo-additional-terms'
51+
),
52+
hidden: true,
53+
},
54+
} );
55+
}
56+
57+
return () => {
58+
clearValidationError( validationErrorId );
59+
};
60+
}, [ setExtensionData, checked, validationErrorId, clearValidationError, setValidationErrors ] );
61+
62+
return el(
63+
'div',
64+
{
65+
className: 'woocommerce-terms-and-conditions-wrapper woo-additional-terms',
66+
},
67+
el( 'div', {
68+
dangerouslySetInnerHTML: {
69+
__html: content,
70+
},
71+
} ),
72+
el(
73+
CheckboxControl,
74+
{
75+
checked,
76+
hasError,
77+
id: '_woo_additional_terms',
78+
name: '_woo_additional_terms',
79+
onChange: () => setChecked( ( value ) => ! value ),
80+
},
81+
el( 'span', {
82+
dangerouslySetInnerHTML: {
83+
__html: notice,
84+
},
85+
} )
86+
)
87+
);
88+
} ),
89+
} );
90+
} )( window.wp, window.wc );

‎assets/js/minified/block.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/minified/checkout.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/minified/script.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/script.js‎

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,44 @@
11
/* global jQuery */
22

33
( function ( $ ) {
4-
const wooTermsToggle = {
4+
'use strict';
5+
6+
const wat = {
7+
cache() {
8+
this.vars = {};
9+
this.els = {};
10+
this.vars.selector = 'woo-additional-terms';
11+
this.vars.embed = `${ this.vars.selector }__link`;
12+
this.vars.content = `${ wat.vars.selector }__content`;
13+
this.vars.openClassName = `${ this.vars.selector }__link--open`;
14+
this.vars.closeClassName = `${ this.vars.selector }__link--closed`;
15+
this.vars.wrapper = `.woocommerce-terms-and-conditions-wrapper.${ this.vars.selector }`;
16+
},
17+
518
init() {
6-
$( document.body ).on( 'click', 'a.woo-additional-terms__link', this.toggleTerms );
19+
this.cache();
20+
this.events();
721
},
822

9-
toggleTerms() {
10-
if ( $( '.woo-additional-terms__content' ).length ) {
11-
$( '.woo-additional-terms__content' ).slideToggle( function () {
12-
const linkToggle = $( '.woo-additional-terms__link' );
23+
events() {
24+
$( document.body ).on( 'click', `a.${ this.vars.embed }`, this.handleEmbedToggle );
25+
},
26+
27+
handleEmbedToggle( event ) {
28+
event.preventDefault();
29+
30+
const $this = $( this );
31+
const $wrapper = $this.closest( wat.vars.wrapper );
32+
const $content = $wrapper.find( `.${ wat.vars.content }` );
1333

14-
if ( $( '.woo-additional-terms__content' ).is( ':visible' ) ) {
15-
linkToggle.addClass( 'woo-additional-terms__link--open' );
16-
linkToggle.removeClass( 'woo-additional-terms__link--closed' );
34+
if ( $wrapper.length ) {
35+
$content.slideToggle( function () {
36+
if ( $content.is( ':visible' ) ) {
37+
$this.addClass( wat.vars.openClassName );
38+
$this.removeClass( wat.vars.closeClassName );
1739
} else {
18-
linkToggle.removeClass( 'woo-additional-terms__link--open' );
19-
linkToggle.addClass( 'woo-additional-terms__link--closed' );
40+
$this.removeClass( wat.vars.openClassName );
41+
$this.addClass( wat.vars.closeClassName );
2042
}
2143
} );
2244

@@ -25,5 +47,5 @@
2547
},
2648
};
2749

28-
wooTermsToggle.init();
50+
wat.init();
2951
} )( jQuery );

‎composer.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"archive": {
33
"exclude": [
44
"!/languages",
5-
"vendor",
5+
"!vendor/*",
66
"node_modules",
77
"CONTRIBUTING.md",
88
"CODE_OF_CONDUCT.md",
@@ -22,6 +22,11 @@
2222
"name": "MyPreview"
2323
}
2424
],
25+
"autoload": {
26+
"classmap": [
27+
"includes"
28+
]
29+
},
2530
"config": {
2631
"allow-plugins": {
2732
"dealerdirect/phpcodesniffer-composer-installer": true

0 commit comments

Comments
 (0)