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