Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add site visibility badge to admin menu (#50775) 

* Add admin bar badge

* Remove previous badge

* Update e2e

* Add changelog

* Fix lint issues

* Hide embedded CSS when admin bar is not showing

* lint fix

* Fix copypasta

* Update doc comments

* Fix lys e2e tests

* Remove unused props

* Fix lysTourHidden check

* Update site visibility badge ID in tour and admin bar

* Add hover effects

* Update id in css

---------

Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
This commit is contained in:
Adrian Duffell 2024-08-20 16:36:20 +08:00 committed by GitHub
parent 071af63f32
commit 6a59fbc111
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 111 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
plugins/woocommerce-admin/client/header/index.js
View File

@ -118,10 +118,9 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
const isHomescreen =
isWCAdmin() && getScreenFromPath() === 'homescreen' && ! query.task;
const { isLoading, launchYourStoreEnabled, comingSoon, storePagesOnly } =
useLaunchYourStore( {
enabled: isHomescreen,
} );
const { isLoading, launchYourStoreEnabled } = useLaunchYourStore( {
enabled: isHomescreen,
} );
const showLaunchYourStoreStatus =
isHomescreen && launchYourStoreEnabled && ! isLoading;
@ -157,12 +156,7 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
) }
</Text>
{ showLaunchYourStoreStatus && (
<LaunchYourStoreStatus
comingSoon={ comingSoon }
storePagesOnly={ storePagesOnly }
/>
) }
{ showLaunchYourStoreStatus && <LaunchYourStoreStatus /> }
<WooHeaderItem.Slot fillProps={ { isEmbedded, query } } />
</div>

92
plugins/woocommerce-admin/client/launch-your-store/status/index.tsx
View File

@ -1,12 +1,6 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Icon, moreVertical, edit, cog } from '@wordpress/icons';
import { Dropdown, Button, MenuGroup, MenuItem } from '@wordpress/components';
import { getAdminLink, getSetting } from '@woocommerce/settings';
import clsx from 'clsx';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
@ -14,23 +8,8 @@ import { recordEvent } from '@woocommerce/tracks';
import './style.scss';
import { SiteVisibilityTour } from '../tour';
import { useSiteVisibilityTour } from '../tour/use-site-visibility-tour';
import { COMING_SOON_PAGE_EDITOR_LINK } from '../constants';
export const LaunchYourStoreStatus = ( {
comingSoon,
storePagesOnly,
}: {
comingSoon: string;
storePagesOnly: string;
} ) => {
const isComingSoon = comingSoon && comingSoon === 'yes';
const isStorePagesOnly =
isComingSoon && storePagesOnly && storePagesOnly === 'yes';
const comingSoonText = isStorePagesOnly
? __( 'Store coming soon', 'woocommerce' )
: __( 'Site coming soon', 'woocommerce' );
const liveText = __( 'Live', 'woocommerce' );
const dropdownText = isComingSoon ? comingSoonText : liveText;
export const LaunchYourStoreStatus = () => {
const { showTour, setShowTour, onClose, shouldTourBeShown } =
useSiteVisibilityTour();
@ -44,75 +23,6 @@ export const LaunchYourStoreStatus = ( {
} }
/>
) }
<div className="woocommerce-lys-status-pill-wrapper">
<Dropdown
className="woocommerce-lys-status-dropdown"
// @ts-expect-error Property does exists
focusOnMount={ true }
popoverProps={ { placement: 'bottom-start' } }
renderToggle={ ( { isOpen, onToggle } ) => (
<Button onClick={ onToggle } aria-expanded={ isOpen }>
<div
className={ clsx(
'woocommerce-lys-status-pill',
{ 'is-live': ! isComingSoon }
) }
>
<span>{ dropdownText }</span>
<Icon icon={ moreVertical } size={ 18 } />
</div>
</Button>
) }
renderContent={ () => (
<>
<MenuGroup className="woocommerce-lys-status-popover">
<MenuItem
onClick={ () => {
recordEvent(
'launch_your_store_badge_menu_manage_site_visibility_click',
{
site_visibility: isComingSoon
? 'coming_soon'
: 'live',
}
);
} }
// @ts-expect-error Prop gets passed down to underlying button https://developer.wordpress.org/block-editor/reference-guides/components/menu-item/#props
href={ getAdminLink(
'admin.php?page=wc-settings&tab=site-visibility'
) }
>
<Icon icon={ cog } size={ 24 } />
{ __(
'Manage site visibility',
'woocommerce'
) }
</MenuItem>
{ isComingSoon &&
getSetting( 'currentThemeIsFSETheme' ) && (
<MenuItem
onClick={ () => {
recordEvent(
'launch_your_store_badge_menu_customize_coming_soon_click'
);
} }
// @ts-expect-error Prop gets passed down to underlying button https://developer.wordpress.org/block-editor/reference-guides/components/menu-item/#props
href={
COMING_SOON_PAGE_EDITOR_LINK
}
>
<Icon icon={ edit } size={ 24 } />
{ __(
'Customize "Coming soon" page',
'woocommerce'
) }
</MenuItem>
) }
</MenuGroup>
</>
) }
/>
</div>
</div>
);
};

3
plugins/woocommerce-admin/client/launch-your-store/tour/index.tsx
View File

@ -49,7 +49,8 @@ export const SiteVisibilityTour = ( { onClose }: { onClose: () => void } ) => {
steps: [
{
referenceElements: {
desktop: '.woocommerce-lys-status-pill',
desktop:
'#wp-admin-bar-woocommerce-site-visibility-badge',
},
meta: {
name: 'set-your-store-visibility',

2
plugins/woocommerce-admin/client/launch-your-store/tour/use-site-visibility-tour.tsx
View File

@ -51,7 +51,7 @@ export const useSiteVisibilityTour = () => {
onClose,
shouldTourBeShown:
shouldStoreShowLYSTour &&
! ( hasUserDismissedTourMeta || lysTourHidden ),
! ( hasUserDismissedTourMeta || lysTourHidden === 'yes' ),
showTour,
setShowTour,
};

4
plugins/woocommerce/changelog/update-coming-soon-badge Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Move site visibility badge to admin bar.

2
plugins/woocommerce/includes/class-woocommerce.php
View File

@ -10,6 +10,7 @@ defined( 'ABSPATH' ) || exit;
use Automattic\WooCommerce\Internal\AssignDefaultCategory;
use Automattic\WooCommerce\Internal\BatchProcessing\BatchProcessingController;
use Automattic\WooCommerce\Internal\ComingSoon\ComingSoonAdminBarBadge;
use Automattic\WooCommerce\Internal\ComingSoon\ComingSoonCacheInvalidator;
use Automattic\WooCommerce\Internal\ComingSoon\ComingSoonRequestHandler;
use Automattic\WooCommerce\Internal\DataStores\Orders\CustomOrdersTableController;
@ -329,6 +330,7 @@ final class WooCommerce {
$container->get( WebhookUtil::class );
$container->get( Marketplace::class );
$container->get( TimeUtil::class );
$container->get( ComingSoonAdminBarBadge::class );
$container->get( ComingSoonCacheInvalidator::class );
$container->get( ComingSoonRequestHandler::class );

90
plugins/woocommerce/src/Internal/ComingSoon/ComingSoonAdminBarBadge.php Normal file
View File

@ -0,0 +1,90 @@
<?php
declare( strict_types = 1 );
namespace Automattic\WooCommerce\Internal\ComingSoon;
/**
* Adds hooks to add a badge to the WordPress admin bar showing site visibility.
*/
class ComingSoonAdminBarBadge {
/**
* Sets up the hooks.
*
* @internal
*/
final public function init() {
add_action( 'admin_bar_menu', array( $this, 'site_visibility_badge' ), 31 );
add_action( 'wp_head', array( $this, 'output_css' ) );
add_action( 'admin_head', array( $this, 'output_css' ) );
}
/**
* Add site visibility cache badge to WP admin bar.
*
* @internal
* @param WP_Admin_Bar $wp_admin_bar The WP_Admin_Bar instance.
*/
public function site_visibility_badge( $wp_admin_bar ) {
$labels = array(
'coming-soon' => __( 'Coming soon', 'woocommerce' ),
'store-coming-soon' => __( 'Store coming soon', 'woocommerce' ),
'live' => __( 'Live', 'woocommerce' ),
);
if ( get_option( 'woocommerce_coming_soon' ) === 'yes' ) {
if ( get_option( 'woocommerce_store_pages_only' ) === 'yes' ) {
$key = 'store-coming-soon';
} else {
$key = 'coming-soon';
}
} else {
$key = 'live';
}
$args = array(
'id' => 'woocommerce-site-visibility-badge',
'title' => $labels[ $key ],
'href' => admin_url( 'admin.php?page=wc-settings&tab=site-visibility' ),
'meta' => array(
'class' => 'woocommerce-site-status-badge-' . $key,
),
);
$wp_admin_bar->add_node( $args );
}
/**
* Output CSS for site visibility badge.
*
* @internal
*/
public function output_css() {
if ( is_admin_bar_showing() ) {
echo '<style>
#wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item {
background-color: #F6F7F7;
color: black;
margin-top:6px;
padding: 0 6px;
height: 20px;
line-height: 20px;
border-radius: 2px;
}
#wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item:hover {
background-color: #DCDCDE;
}
#wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge.woocommerce-site-status-badge-live a.ab-item {
background-color: #E6F2E8;
color: #00450C;
}
#wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge.woocommerce-site-status-badge-live a.ab-item:hover {
background-color: #B8E6BF;
}
</style>';
}
}
}

3
plugins/woocommerce/src/Internal/DependencyManagement/ServiceProviders/ComingSoonServiceProvider.php
View File

@ -3,6 +3,7 @@
namespace Automattic\WooCommerce\Internal\DependencyManagement\ServiceProviders;
use Automattic\WooCommerce\Internal\DependencyManagement\AbstractServiceProvider;
use Automattic\WooCommerce\Internal\ComingSoon\ComingSoonAdminBarBadge;
use Automattic\WooCommerce\Internal\ComingSoon\ComingSoonCacheInvalidator;
use Automattic\WooCommerce\Internal\ComingSoon\ComingSoonRequestHandler;
use Automattic\WooCommerce\Internal\ComingSoon\ComingSoonHelper;
@ -18,6 +19,7 @@ class ComingSoonServiceProvider extends AbstractServiceProvider {
* @var array
*/
protected $provides = array(
ComingSoonAdminBarBadge::class,
ComingSoonCacheInvalidator::class,
ComingSoonHelper::class,
ComingSoonRequestHandler::class,
@ -27,6 +29,7 @@ class ComingSoonServiceProvider extends AbstractServiceProvider {
* Register the classes.
*/
public function register() {
$this->add( ComingSoonAdminBarBadge::class );
$this->add( ComingSoonCacheInvalidator::class );
$this->add( ComingSoonHelper::class );
$this->add( ComingSoonRequestHandler::class )->addArgument( ComingSoonHelper::class );

47
plugins/woocommerce/tests/e2e-pw/tests/merchant/launch-your-store.spec.js
View File

@ -212,24 +212,11 @@ test.describe(
await page.goto( '/wp-admin/admin.php?page=wc-admin' );
await expect(
page.getByRole( 'button', {
page.getByRole( 'menuitem', {
name: 'Store coming soon',
exact: true,
} )
).toBeVisible();
page.getByRole( 'button', {
name: 'Store coming soon',
exact: true,
} ).click();
await expect(
page.getByText( 'Manage site visibility' )
).toBeVisible();
await expect(
page.getByText( 'Customize "Coming soon" page' )
).toBeVisible();
} );
test( 'Homescreen badge coming soon entire store', async ( {
@ -257,24 +244,11 @@ test.describe(
await page.goto( '/wp-admin/admin.php?page=wc-admin' );
await expect(
page.getByRole( 'button', {
name: 'Site coming soon',
page.getByRole( 'menuitem', {
name: 'Coming soon',
exact: true,
} )
).toBeVisible();
page.getByRole( 'button', {
name: 'Site coming soon',
exact: true,
} ).click();
await expect(
page.getByText( 'Manage site visibility' )
).toBeVisible();
await expect(
page.getByText( 'Customize "Coming soon" page' )
).toBeVisible();
} );
test( 'Homescreen badge live', async ( { page, baseURL } ) => {
@ -299,24 +273,11 @@ test.describe(
await page.goto( '/wp-admin/admin.php?page=wc-admin' );
await expect(
page.getByRole( 'button', {
page.getByRole( 'menuitem', {
name: 'Live',
exact: true,
} )
).toBeVisible();
page.getByRole( 'button', {
name: 'Live',
exact: true,
} ).click();
await expect(
page.getByText( 'Manage site visibility' )
).toBeVisible();
await expect(
page.getByText( 'Customize "Coming soon" page' )
).toBeHidden();
} );
}
);