diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/index.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/index.tsx index 820e84ab516d7..33975137425b2 100644 --- a/projects/packages/my-jetpack/_inc/components/products-table-view/index.tsx +++ b/projects/packages/my-jetpack/_inc/components/products-table-view/index.tsx @@ -1,7 +1,11 @@ +import { useViewportMatch } from '@wordpress/compose'; import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews'; import { __ } from '@wordpress/i18n'; +import { Icon, chevronRight } from '@wordpress/icons'; import { useCallback, useState, useMemo } from 'react'; +import { useNavigate } from 'react-router-dom'; import { useAllProducts } from '../../data/products/use-all-products'; +import useAnalytics from '../../hooks/use-analytics'; import ActionButton from '../action-button'; import { PRODUCT_TABLE_TITLE, @@ -30,7 +34,7 @@ import type { Operator, Option, } from '@wordpress/dataviews'; -import type { FC } from 'react'; +import type { FC, MouseEvent } from 'react'; import './style.scss'; @@ -100,6 +104,9 @@ const ProductsTableView: FC< ProductsTableViewProps > = ( { products } ) => { }, [] ); const isItemClickable = useCallback( () => false, [] ); const allProductData = useAllProducts(); + const isMobileViewport: boolean = useViewportMatch( 'medium', '<' ); + const navigate = useNavigate(); + const { recordEvent } = useAnalytics(); const baseView: ViewList = { sort: { @@ -127,6 +134,15 @@ const ProductsTableView: FC< ProductsTableViewProps > = ( { products } ) => { [ products, allProductData ] ); + const navigateToInterstitial = useCallback( + ( slug: string ) => ( event: MouseEvent< HTMLButtonElement > ) => { + event.preventDefault(); + recordEvent( `jetpack_myjetpack_product_list_item_${ slug }_learnmore_mobile_click` ); + navigate( `add-${ slug }` ); + }, + [ navigate, recordEvent ] + ); + const fields = useMemo( () => { return [ { @@ -177,8 +193,8 @@ const ProductsTableView: FC< ProductsTableViewProps > = ( { products } ) => { enableHiding: false, render( { item }: { item: ProductData } ) { const { product } = item; - const Icon = PRODUCT_ICONS[ product.slug ]; - return ; + const ProductIcon = PRODUCT_ICONS[ product.slug ]; + return ; }, }, { @@ -193,7 +209,24 @@ const ProductsTableView: FC< ProductsTableViewProps > = ( { products } ) => { const { product } = item; const { slug } = product; - return ; + if ( isMobileViewport ) { + return ( + + ); + } + + return ( + + ); }, }, ]; @@ -201,7 +234,7 @@ const ProductsTableView: FC< ProductsTableViewProps > = ( { products } ) => { // and a 'jumping' of the CTA buttons. Having categories as a dependency here is unnecessary // and leaving it out doesn't cause the values to be incorrect. // eslint-disable-next-line react-hooks/exhaustive-deps - }, [] ); + }, [ isMobileViewport, navigateToInterstitial ] ); const [ view, setView ] = useState< View >( { type: 'list', diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/style.scss b/projects/packages/my-jetpack/_inc/components/products-table-view/style.scss index 85916a4eeecc5..6b64a9bb190e3 100644 --- a/projects/packages/my-jetpack/_inc/components/products-table-view/style.scss +++ b/projects/packages/my-jetpack/_inc/components/products-table-view/style.scss @@ -58,6 +58,7 @@ div.dataviews-wrapper { .dataviews-view-list__fields { justify-content: space-between; + flex-wrap: nowrap; } &:not(.is-selected).is-hovered, @@ -97,4 +98,16 @@ div.dataviews-filters__summary-chip-container div.dataviews-filters__summary-chi div.dataviews-filters__summary-chip-container div.dataviews-filters__summary-chip.has-values:hover, div.dataviews-filters__summary-chip-container button.dataviews-filters__summary-chip-remove.has-values:hover { background-color: var(--tag-color); -} \ No newline at end of file +} + +button.product-list-item-chevron { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + + cursor: pointer; + background: transparent; + border: none; + outline-color: var(--jp-green-40); +} diff --git a/projects/packages/my-jetpack/changelog/add-action-dropdown-to-mobile-view-of-unowned-list b/projects/packages/my-jetpack/changelog/add-action-dropdown-to-mobile-view-of-unowned-list new file mode 100644 index 0000000000000..2eeb497a5ed33 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/add-action-dropdown-to-mobile-view-of-unowned-list @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +Add mobile CTA to DataViews table