-
Notifications
You must be signed in to change notification settings - Fork 10.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Launch Your Store settings section #45402
Changes from 10 commits
708b7ef
c48d121
193de0a
d668bc0
769b8ee
28d1821
307913f
f277d6b
44ac372
48fdf30
7fd5be7
e4efc17
bc20d56
0558ed6
01ff813
dfcfa51
438d631
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,219 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { | ||
createSlotFill, | ||
ToggleControl, | ||
RadioControl, | ||
} from '@wordpress/components'; | ||
import { useState, useEffect } from '@wordpress/element'; | ||
import { registerPlugin } from '@wordpress/plugins'; | ||
import { __ } from '@wordpress/i18n'; | ||
import { OPTIONS_STORE_NAME } from '@woocommerce/data'; | ||
import { withSelect } from '@wordpress/data'; | ||
import classNames from 'classnames'; | ||
import { compose } from '@wordpress/compose'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { SETTINGS_SLOT_FILL_CONSTANT } from '../settings/settings-slots'; | ||
import './style.scss'; | ||
|
||
const { Fill } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT ); | ||
|
||
const SiteVisibility = ( { | ||
woocommerce_coming_soon, | ||
woocommerce_store_pages_only, | ||
woocommerce_private_link, | ||
isLoading, | ||
placeholder = false, | ||
} ) => { | ||
const [ comingSoon, setComingSoon ] = useState( woocommerce_coming_soon ); | ||
const [ storePagesOnly, setStorePagesOnly ] = useState( | ||
woocommerce_store_pages_only | ||
); | ||
const [ privateLink, setPrivateLink ] = useState( | ||
woocommerce_private_link | ||
); | ||
|
||
useEffect( () => { | ||
setComingSoon( woocommerce_coming_soon ); | ||
setStorePagesOnly( woocommerce_store_pages_only ); | ||
setPrivateLink( woocommerce_private_link ); | ||
}, [ | ||
woocommerce_coming_soon, | ||
woocommerce_store_pages_only, | ||
woocommerce_private_link, | ||
] ); | ||
|
||
if ( isLoading ) { | ||
return ( | ||
<SiteVisibility | ||
woocommerce_lys_setting_coming_soon={ 'yes' } | ||
isLoading={ false } | ||
placeholder={ true } | ||
/> | ||
); | ||
} | ||
|
||
return ( | ||
<div | ||
className={ classNames( 'site-visibility-settings-slotfill', { | ||
placeholder, | ||
} ) } | ||
> | ||
<input | ||
type="hidden" | ||
value={ comingSoon } | ||
name="woocommerce_coming_soon" | ||
/> | ||
<input | ||
type="hidden" | ||
value={ storePagesOnly } | ||
name="woocommerce_store_pages_only" | ||
/> | ||
<input | ||
type="hidden" | ||
value={ privateLink } | ||
name="woocommerce_private_link" | ||
/> | ||
<p className="site-visibility-settings-slotfill-description"> | ||
{ __( | ||
"Set your site to coming soon or live you're ready to launch", | ||
'woocommerce' | ||
) } | ||
</p> | ||
<div className="site-visibility-settings-slotfill-section"> | ||
<RadioControl | ||
onChange={ () => { | ||
setComingSoon( 'yes' ); | ||
} } | ||
options={ [ | ||
{ | ||
label: 'Coming soon', | ||
value: 'yes', | ||
}, | ||
] } | ||
selected={ comingSoon } | ||
/> | ||
<p className="site-visibility-settings-slotfill-section-description"> | ||
{ __( | ||
'Your site is hidden from visitors behind a “Coming soon” landing page until it’s ready for viewing. You can customize your “Coming soon” landing page via the Editor.', | ||
'woocommerce' | ||
) } | ||
</p> | ||
<div | ||
className={ classNames( | ||
'site-visibility-settings-slotfill-section-content', | ||
{ | ||
'is-hidden': comingSoon !== 'yes', | ||
} | ||
) } | ||
> | ||
<ToggleControl | ||
label={ | ||
<> | ||
{ __( | ||
'Restrict to store pages only', | ||
'woocommerce' | ||
) } | ||
<p> | ||
{ __( | ||
'Hide store pages only behind a “Coming soon” page. The rest of your site will remain public.', | ||
'woocommerce' | ||
) } | ||
</p> | ||
</> | ||
} | ||
checked={ storePagesOnly === 'yes' } | ||
onChange={ () => { | ||
setStorePagesOnly( | ||
storePagesOnly === 'yes' ? 'no' : 'yes' | ||
); | ||
} } | ||
/> | ||
<ToggleControl | ||
label={ | ||
<> | ||
{ __( | ||
'Share your site with a private link', | ||
'woocommerce' | ||
) } | ||
<p> | ||
{ __( | ||
'“Coming soon” sites are only visible to Admins and Shop managers. Enable “Share site” to let other users view your site.', | ||
'woocommerce' | ||
) } | ||
</p> | ||
</> | ||
} | ||
checked={ privateLink === 'yes' } | ||
onChange={ () => { | ||
setPrivateLink( | ||
privateLink === 'yes' ? 'no' : 'yes' | ||
); | ||
} } | ||
/> | ||
</div> | ||
</div> | ||
<div className="site-visibility-settings-slotfill-section"> | ||
<RadioControl | ||
onChange={ () => { | ||
setComingSoon( 'no' ); | ||
} } | ||
options={ [ | ||
{ | ||
label: 'Live', | ||
value: 'no', | ||
}, | ||
] } | ||
selected={ comingSoon } | ||
/> | ||
<p className="site-visibility-settings-slotfill-section-description"> | ||
{ __( 'Your site is visible to everyone.', 'woocommerce' ) } | ||
</p> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
const SiteVisibilityComponent = compose( | ||
withSelect( ( select ) => { | ||
const { getOption, hasFinishedResolution } = | ||
select( OPTIONS_STORE_NAME ); | ||
|
||
return { | ||
woocommerce_coming_soon: getOption( 'woocommerce_coming_soon' ), | ||
woocommerce_store_pages_only: getOption( | ||
'woocommerce_store_pages_only' | ||
), | ||
woocommerce_private_link: getOption( 'woocommerce_private_link' ), | ||
isLoading: | ||
! hasFinishedResolution( 'getOption', [ | ||
'woocommerce_coming_soon', | ||
] ) || | ||
! hasFinishedResolution( 'getOption', [ | ||
'woocommerce_store_pages_only', | ||
] ) || | ||
! hasFinishedResolution( 'getOption', [ | ||
'woocommerce_private_link', | ||
] ), | ||
}; | ||
} ) | ||
)( SiteVisibility ); | ||
|
||
const SiteVisibilitySlotFill = () => { | ||
return ( | ||
<Fill> | ||
<SiteVisibilityComponent /> | ||
</Fill> | ||
); | ||
}; | ||
|
||
export const registerSiteVisibilitySlotFill = () => { | ||
registerPlugin( 'woocommerce-admin-site-visibility-settings-slotfill', { | ||
scope: 'woocommerce-site-visibility-settings', | ||
render: SiteVisibilitySlotFill, | ||
} ); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
.site-visibility-settings-slotfill { | ||
line-height: 16px; | ||
font-weight: 400; | ||
color: #1E1E1E; | ||
|
||
&.placeholder { | ||
opacity: 0.3; | ||
} | ||
|
||
.components-form-toggle { | ||
.components-form-toggle__input:focus+.components-form-toggle__track { | ||
box-shadow: none; | ||
} | ||
.components-form-toggle__track { | ||
width: 32px; | ||
height: 20px; | ||
background-color: #949494; | ||
border: none; | ||
border-radius: 10px; | ||
} | ||
.components-form-toggle__thumb { | ||
background-color: #fff; | ||
border: 5px solid #fff; | ||
top: 4px; | ||
} | ||
&.is-checked .components-form-toggle__thumb { | ||
transform: translateX(14px); | ||
} | ||
&.is-checked .components-form-toggle__track { | ||
background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); | ||
} | ||
} | ||
|
||
.site-visibility-settings-slotfill-section-description { | ||
margin: 4px 0px 18px 28px; | ||
} | ||
|
||
p { | ||
color: #757575; | ||
} | ||
|
||
.site-visibility-settings-slotfill-description { | ||
font-size: inherit; | ||
font-weight: inherit; | ||
color: inherit; | ||
margin-bottom: 24px; | ||
} | ||
|
||
.components-radio-control__input[type=radio]:focus { | ||
outline: none; | ||
box-shadow: none; | ||
} | ||
|
||
.site-visibility-settings-slotfill-section { | ||
max-width: 620px;; | ||
&:last-child { | ||
margin-top: 16px; | ||
} | ||
|
||
.site-visibility-settings-slotfill-section-content { | ||
&.is-hidden { | ||
display: none; | ||
} | ||
margin: 16px 0px 0px 30px; | ||
.components-toggle-control { | ||
.components-h-stack { | ||
align-items: baseline; | ||
} | ||
} | ||
|
||
.components-base-control__field { | ||
p { | ||
margin-top: 6px; | ||
} | ||
} | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -18,6 +18,10 @@ export const possiblyRenderSettingsSlots = () => { | |
}, | ||
{ id: 'wc_tax_settings_slotfill', scope: 'woocommerce-tax-settings' }, | ||
{ id: 'wc_settings_slotfill', scope: 'woocommerce-settings' }, | ||
{ | ||
id: 'wc_settings_general_site_visibility_slotfill', | ||
scope: 'woocommerce-site-visibility-settings', | ||
}, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice to see this getting used! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice! useLaunchYourStore looks fantastic! I'll update this PR to use it 👍 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @psealock Could you also return comingSoon, storePagesOnly, privateLink, and shareKey from the function? |
||
]; | ||
|
||
slots.forEach( ( slot ) => { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: minor | ||
Type: add | ||
|
||
Add Launch Your Store settings section |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we should use the same scope
woocommerce-settings
here. The reason this exists is so that we're not loading all of the app's Fills, just the ones that match the current scope.woocommerce-settings
is already on the page so may as well use itThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good @psealock 👍 Updated in Use woocommerce-settings scope