Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit 6286a6f

Browse files
senadirsenadir
authored
Turn current page into the default Cart/Checkout page (#6867)
* Add default page notice * show notice all inner blocks * support flow when page isnt saved * switch from where we get the current post id * update lock * fix types * update logic to support cart as well * fix package.json * update design and move away from wc.data * restore notice * handle older versions of WooCommerce * fix package lock * fix typo
1 parent d2d809b commit 6286a6f

File tree

8 files changed

+235
-99
lines changed

8 files changed

+235
-99
lines changed

‎assets/js/blocks/cart-checkout-shared/default-notice/editor.scss‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎assets/js/blocks/cart-checkout-shared/default-notice/index.tsx‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎assets/js/blocks/cart-checkout-shared/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,5 @@ export * from './hacks';
22
export * from './use-forced-layout';
33
export * from './editor-utils';
44
export * from './use-view-switcher';
5-
export * from './default-notice';
65
export * from './sidebar-notices';
76
export * from './block-settings';

‎assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,13 @@ import {
99
import { addFilter, hasFilter } from '@wordpress/hooks';
1010
import type { StoreDescriptor } from '@wordpress/data';
1111
import { CartCheckoutSidebarCompatibilityNotice } from '@woocommerce/editor-components/sidebar-compatibility-notice';
12+
import {
13+
DefaultNotice,
14+
LegacyNotice,
15+
} from '@woocommerce/editor-components/default-notice';
1216
import { useSelect } from '@wordpress/data';
1317
import { CartCheckoutFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt';
14-
15-
/**
16-
* Internal dependencies
17-
*/
18-
import './editor.scss';
19-
import { DefaultNotice } from '../default-notice';
20-
18+
import { isWcVersion } from '@woocommerce/settings';
2119
declare module '@wordpress/editor' {
2220
let store: StoreDescriptor;
2321
}
@@ -66,12 +64,19 @@ const withSidebarNotices = createHigherOrderComponent(
6664
<>
6765
{ ( isCart || isCheckout ) && (
6866
<InspectorControls>
67+
{ isWcVersion( '6.9.0', '>=' ) ? (
68+
<DefaultNotice
69+
block={ isCheckout ? 'checkout' : 'cart' }
70+
/>
71+
) : (
72+
<LegacyNotice
73+
block={ isCheckout ? 'checkout' : 'cart' }
74+
/>
75+
) }
76+
6977
<CartCheckoutSidebarCompatibilityNotice
7078
block={ isCheckout ? 'checkout' : 'cart' }
7179
/>
72-
<DefaultNotice
73-
block={ isCheckout ? 'checkout' : 'cart' }
74-
/>
7580
{ isAddressFieldBlock ? null : (
7681
<CartCheckoutFeedbackPrompt />
7782
) }

assets/js/blocks/cart-checkout-shared/sidebar-notices/editor.scss renamed to assets/js/editor-components/default-notice/editor.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,15 @@
44
.components-notice__dismiss {
55
min-width: 24px;
66
}
7+
.components-notice__content {
8+
margin: 4px 0;
9+
}
710
svg {
811
width: 16px;
912
height: 16px;
1013
}
1114
}
15+
16+
.wc-blocks-legacy-page-notice {
17+
margin: 0;
18+
}

‎assets/js/editor-components/default-notice/index.tsx‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { __, sprintf } from '@wordpress/i18n';
5+
import { store as editorStore } from '@wordpress/editor';
6+
import triggerFetch from '@wordpress/api-fetch';
7+
import { store as coreStore } from '@wordpress/core-data';
8+
import { Notice, Button } from '@wordpress/components';
9+
import { useSelect, useDispatch } from '@wordpress/data';
10+
import { CHECKOUT_PAGE_ID, CART_PAGE_ID } from '@woocommerce/block-settings';
11+
import {
12+
useCallback,
13+
useState,
14+
createInterpolateElement,
15+
} from '@wordpress/element';
16+
import { getAdminLink } from '@woocommerce/settings';
17+
/**
18+
* Internal dependencies
19+
*/
20+
import './editor.scss';
21+
22+
export function DefaultNotice( { block }: { block: string } ) {
23+
// To avoid having the same logic twice, we're going to handle both pages here.
24+
const ORIGINAL_PAGE_ID =
25+
block === 'checkout' ? CHECKOUT_PAGE_ID : CART_PAGE_ID;
26+
const settingName =
27+
block === 'checkout'
28+
? 'woocommerce_checkout_page_id'
29+
: 'woocommerce_cart_page_id';
30+
31+
const noticeContent =
32+
block === 'checkout'
33+
? __(
34+
'If you would like to use this block as your default checkout, update your page settings',
35+
'woo-gutenberg-products-block'
36+
)
37+
: __(
38+
'If you would like to use this block as your default cart, update your page settings',
39+
'woo-gutenberg-products-block'
40+
);
41+
42+
// Everything below works the same for Cart/Checkout
43+
const { saveEntityRecord } = useDispatch( coreStore );
44+
const { editPost, savePost } = useDispatch( editorStore );
45+
const { slug, isLoadingPage, postPublished, currentPostId } = useSelect(
46+
( select ) => {
47+
const { getEntityRecord, isResolving } = select( coreStore );
48+
const { isCurrentPostPublished, getCurrentPostId } =
49+
select( editorStore );
50+
return {
51+
slug:
52+
getEntityRecord( 'postType', 'page', ORIGINAL_PAGE_ID )
53+
?.slug || block,
54+
isLoadingPage: isResolving( 'getEntityRecord', [
55+
'postType',
56+
'page',
57+
ORIGINAL_PAGE_ID,
58+
] ),
59+
postPublished: isCurrentPostPublished(),
60+
currentPostId: getCurrentPostId(),
61+
};
62+
},
63+
[]
64+
);
65+
const [ settingStatus, setStatus ] = useState( 'pristine' );
66+
const updatePage = useCallback( () => {
67+
setStatus( 'updating' );
68+
Promise.resolve()
69+
.then( () =>
70+
triggerFetch( {
71+
path: `/wc/v3/settings/advanced/${ settingName }`,
72+
method: 'GET',
73+
} )
74+
)
75+
.catch( ( error ) => {
76+
if ( error.code === 'rest_setting_setting_invalid' ) {
77+
setStatus( 'error' );
78+
}
79+
} )
80+
.then( () => {
81+
if ( ! postPublished ) {
82+
editPost( { status: 'publish' } );
83+
return savePost();
84+
}
85+
} )
86+
.then( () =>
87+
// Make this page ID the default cart/checkout.
88+
triggerFetch( {
89+
path: `/wc/v3/settings/advanced/${ settingName }`,
90+
method: 'POST',
91+
data: {
92+
value: currentPostId.toString(),
93+
},
94+
} )
95+
)
96+
// Append `-2` to the original link so we can use it here.
97+
.then( () => {
98+
if ( ORIGINAL_PAGE_ID !== 0 ) {
99+
return saveEntityRecord( 'postType', 'page', {
100+
id: ORIGINAL_PAGE_ID,
101+
slug: `${ slug }-2`,
102+
} );
103+
}
104+
} )
105+
// Use the original link for this page.
106+
.then( () => editPost( { slug } ) )
107+
// Save page.
108+
.then( () => savePost() )
109+
.then( () => setStatus( 'updated' ) );
110+
}, [
111+
postPublished,
112+
editPost,
113+
savePost,
114+
settingName,
115+
currentPostId,
116+
ORIGINAL_PAGE_ID,
117+
saveEntityRecord,
118+
slug,
119+
] );
120+
if ( currentPostId === ORIGINAL_PAGE_ID || settingStatus === 'dismissed' ) {
121+
return null;
122+
}
123+
return (
124+
<Notice
125+
className="wc-default-page-notice"
126+
status={ settingStatus === 'updated' ? 'success' : 'warning' }
127+
onRemove={ () => setStatus( 'dismissed' ) }
128+
spokenMessage={
129+
settingStatus === 'updated'
130+
? __(
131+
'Page settings updated',
132+
'woo-gutenberg-products-block'
133+
)
134+
: noticeContent
135+
}
136+
>
137+
{ settingStatus === 'updated' ? (
138+
__( 'Page settings updated', 'woo-gutenberg-products-block' )
139+
) : (
140+
<>
141+
<p>{ noticeContent }</p>
142+
<Button
143+
onClick={ updatePage }
144+
variant="secondary"
145+
isBusy={ settingStatus === 'updating' }
146+
disabled={ isLoadingPage }
147+
isSmall={ true }
148+
>
149+
{ __(
150+
'update your page settings',
151+
'woo-gutenberg-products-block'
152+
) }
153+
</Button>
154+
</>
155+
) }
156+
</Notice>
157+
);
158+
}
159+
160+
export function LegacyNotice( { block }: { block: string } ) {
161+
return (
162+
<Notice
163+
className="wc-blocks-legacy-page-notice"
164+
isDismissible={ false }
165+
status="warning"
166+
>
167+
{ createInterpolateElement(
168+
sprintf(
169+
/* translators: %s is the block name. It will be cart or checkout. */
170+
__(
171+
'If you would like to use this block as your default %s you must update your <a>page settings in WooCommerce</a>.',
172+
'woo-gutenberg-products-block'
173+
),
174+
block
175+
),
176+
{
177+
a: (
178+
// eslint-disable-next-line jsx-a11y/anchor-has-content
179+
<a
180+
href={ getAdminLink(
181+
'admin.php?page=wc-settings&tab=advanced'
182+
) }
183+
target="_blank"
184+
rel="noopener noreferrer"
185+
/>
186+
),
187+
}
188+
) }
189+
</Notice>
190+
);
191+
}

‎assets/js/editor-components/sidebar-compatibility-notice/editor.scss‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1-
.wc-blocks-sidebar-compatibility-notice {
2-
border-top: 1px solid $gray-200;
3-
}
4-
5-
.wc-blocks-sidebar-compatibility-notice__notice.components-notice.is-dismissible {
1+
.wc-blocks-sidebar-compatibility-notice.is-dismissible {
62
margin: 0;
7-
padding: $gap;
8-
padding-right: $gap-small;
9-
3+
padding-right: 16px;
4+
.components-notice__dismiss {
5+
min-width: 24px;
6+
}
107
.components-notice__content {
11-
margin-right: 0;
8+
margin: 4px 0;
9+
}
10+
svg {
11+
width: 16px;
12+
height: 16px;
13+
}
14+
&.is-hidden {
15+
display: none;
1216
}
1317
}

‎assets/js/editor-components/sidebar-compatibility-notice/index.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import { Notice, ExternalLink } from '@wordpress/components';
55
import { createInterpolateElement } from '@wordpress/element';
66
import { __ } from '@wordpress/i18n';
7+
import classnames from 'classnames';
78

89
/**
910
* Internal dependencies
@@ -33,16 +34,14 @@ export const CartCheckoutSidebarCompatibilityNotice = ( {
3334
);
3435

3536
return (
36-
<div
37-
className="wc-blocks-sidebar-compatibility-notice"
38-
style={ { display: isVisible ? 'block' : 'none' } }
37+
<Notice
38+
onRemove={ dismissNotice }
39+
className={ classnames( [
40+
'wc-blocks-sidebar-compatibility-notice',
41+
{ 'is-hidden': ! isVisible },
42+
] ) }
3943
>
40-
<Notice
41-
onRemove={ dismissNotice }
42-
className={ 'wc-blocks-sidebar-compatibility-notice__notice' }
43-
>
44-
{ noticeText }
45-
</Notice>
46-
</div>
44+
{ noticeText }
45+
</Notice>
4746
);
4847
};

0 commit comments

Comments
 (0)