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

Add a visibility toggle to the Quick actions list (#40464) 

* Create toggle-visibility-menu-item component

* Add toggle-visibility-menu-item to variation-actions-menu

* Add toggle-visibility-menu-item to variations-actions-menu

* Add changelog file
This commit is contained in:
Maikel David Pérez Gómez 2023-09-27 11:19:49 -04:00 committed by GitHub
parent 5b06aace54
commit e6df583c65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 79 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/add-40215 Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Add a visibility toggle to the Quick actions list

1
packages/js/product-editor/src/components/variations-table/toggle-visibility-menu-item/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './toggle-visibility-menu-item';

62
packages/js/product-editor/src/components/variations-table/toggle-visibility-menu-item/toggle-visibility-menu-item.tsx Normal file
View File

@ -0,0 +1,62 @@
/**
* External dependencies
*/
import { MenuItem } from '@wordpress/components';
import { createElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import { TRACKS_SOURCE } from '../../../constants';
import { VariationActionsMenuItemProps } from '../types';
export function ToggleVisibilityMenuItem( {
selection,
onChange,
onClose,
}: VariationActionsMenuItemProps ) {
function toggleStatus( currentStatus: string ) {
return currentStatus === 'private' ? 'publish' : 'private';
}
function handleMenuItemClick() {
const ids = Array.isArray( selection )
? selection.map( ( { id } ) => id )
: selection.id;
recordEvent( 'product_variations_menu_toggle_visibility_select', {
source: TRACKS_SOURCE,
action: 'status_set',
variation_id: ids,
} );
if ( Array.isArray( selection ) ) {
onChange(
selection.map( ( { id, status } ) => ( {
id,
status: toggleStatus( status ),
} ) )
);
} else {
onChange( {
status: toggleStatus( selection.status ),
} );
}
recordEvent( 'product_variations_toggle_visibility_update', {
source: TRACKS_SOURCE,
action: 'status_set',
variation_id: ids,
} );
onClose();
}
return (
<MenuItem onClick={ handleMenuItemClick }>
{ __( 'Toggle visibility', 'woocommerce' ) }
</MenuItem>
);
}

6
packages/js/product-editor/src/components/variations-table/variation-actions-menu/variation-actions-menu.tsx
View File

@ -15,6 +15,7 @@ import { TRACKS_SOURCE } from '../../../constants';
import { ShippingMenuItem } from '../shipping-menu-item';
import { InventoryMenuItem } from '../inventory-menu-item';
import { PricingMenuItem } from '../pricing-menu-item';
import { ToggleVisibilityMenuItem } from '../toggle-visibility-menu-item';
export function VariationActionsMenu( {
selection,
@ -56,6 +57,11 @@ export function VariationActionsMenu( {
>
{ __( 'Preview', 'woocommerce' ) }
</MenuItem>
<ToggleVisibilityMenuItem
selection={ selection }
onChange={ onChange }
onClose={ onClose }
/>
</MenuGroup>
<MenuGroup>
<PricingMenuItem

6
packages/js/product-editor/src/components/variations-table/variations-actions-menu/variations-actions-menu.tsx
View File

@ -15,6 +15,7 @@ import { PricingMenuItem } from '../pricing-menu-item';
import { SetListPriceMenuItem } from '../set-list-price-menu-item';
import { InventoryMenuItem } from '../inventory-menu-item';
import { ShippingMenuItem } from '../shipping-menu-item';
import { ToggleVisibilityMenuItem } from '../toggle-visibility-menu-item';
export function VariationsActionsMenu( {
selection,
@ -50,6 +51,11 @@ export function VariationsActionsMenu( {
onChange={ onChange }
onClose={ onClose }
/>
<ToggleVisibilityMenuItem
selection={ selection }
onChange={ onChange }
onClose={ onClose }
/>
</MenuGroup>
<MenuGroup>
<PricingMenuItem