Fix Activity Panel on existing WooCommerce pages (https://github.com/woocommerce/woocommerce-admin/pull/1004)

* Fix Activity Panel on embedded pages

* Fix comment typo

plugins/woocommerce-admin/client/embedded.js

@@ -10,6 +10,8 @@ import { Provider as SlotFillProvider } from 'react-slot-fill';
  */
 import './stylesheets/_embedded.scss';
 import { EmbedLayout } from './layout';
+import 'store';
+import 'wc-api/wp-data-store';
 
 render(
 	<SlotFillProvider>

plugins/woocommerce-admin/client/header/activity-panel/panels/inbox.js

@@ -7,7 +7,7 @@ import { Button } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import Gridicon from 'gridicons';
-import { withSelect } from '@wordpress/data';
+import withSelect from 'wc-api/with-select';
 
 /**
  * Internal dependencies
@@ -89,7 +89,7 @@ class InboxPanel extends Component {
 
 export default compose(
 	withSelect( select => {
-		const { getNotes, isGetNotesError, isGetNotesRequesting } = select( 'wc-admin' );
+		const { getNotes, isGetNotesError, isGetNotesRequesting } = select( 'wc-api' );
 		const inboxQuery = {
 			page: 1,
 			per_page: QUERY_DEFAULTS.pageSize,

plugins/woocommerce-admin/client/header/style.scss

@@ -12,7 +12,7 @@
 	position: fixed;
 	width: 100%;
 	top: 32px;
-	z-index: 99999; /* component-popover is 99990 */
+	z-index: 99991; /* higher than component-popover (99990), lower than notification dropdown at 99999 */
 
 	&.is-scrolled {
 		box-shadow: 0 8px 8px 0 rgba(85, 93, 102, 0.3);

plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss

@@ -80,4 +80,16 @@
 			margin-top: 32px;
 		}
 	}
+
+	.woocommerce-layout__activity-panel-mobile-toggle {
+		@include breakpoint( '>782px' ) {
+			display: none;
+		}
+	}
+
+	.woocommerce-activity-card__actions {
+		a.components-button.is-button {
+			color: $gray-text;
+		}
+	}
 }

plugins/woocommerce-admin/client/wc-api/notes/index.js

@@ -0,0 +1,11 @@
+/** @format */
+/**
+ * Internal dependencies
+ */
+import operations from './operations';
+import selectors from './selectors';
+
+export default {
+	operations,
+	selectors,
+};

plugins/woocommerce-admin/client/wc-api/notes/operations.js

@@ -0,0 +1,76 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * WooCommerce dependencies
+ */
+import { stringifyQuery } from '@woocommerce/navigation';
+
+/**
+ * Internal dependencies
+ */
+import { isResourcePrefix, getResourceIdentifier, getResourceName } from '../utils';
+import { NAMESPACE } from '../constants';
+
+function read( resourceNames, fetch = apiFetch ) {
+	return [ ...readNotes( resourceNames, fetch ), ...readNoteQueries( resourceNames, fetch ) ];
+}
+
+function readNoteQueries( resourceNames, fetch ) {
+	const filteredNames = resourceNames.filter( name => isResourcePrefix( name, 'note-query' ) );
+
+	return filteredNames.map( async resourceName => {
+		const query = getResourceIdentifier( resourceName );
+		const url = `${ NAMESPACE }/admin/notes${ stringifyQuery( query ) }`;
+
+		try {
+			const response = await fetch( {
+				parse: false,
+				path: url,
+			} );
+
+			const notes = await response.json();
+			const totalCount = parseInt( response.headers.get( 'x-wp-total' ) );
+			const ids = notes.map( note => note.id );
+			const noteResources = notes.reduce( ( resources, note ) => {
+				resources[ getResourceName( 'note', note.id ) ] = { data: note };
+				return resources;
+			}, {} );
+
+			return {
+				[ resourceName ]: {
+					data: ids,
+					totalCount,
+				},
+				...noteResources,
+			};
+		} catch ( error ) {
+			return { [ resourceName ]: { error } };
+		}
+	} );
+}
+
+function readNotes( resourceNames, fetch ) {
+	const filteredNames = resourceNames.filter( name => isResourcePrefix( name, 'note' ) );
+	return filteredNames.map( resourceName => readNote( resourceName, fetch ) );
+}
+
+function readNote( resourceName, fetch ) {
+	const id = getResourceIdentifier( resourceName );
+	const url = `${ NAMESPACE }/admin/notes/${ id }`;
+
+	return fetch( { path: url } )
+		.then( note => {
+			return { [ resourceName ]: { data: note } };
+		} )
+		.catch( error => {
+			return { [ resourceName ]: { error } };
+		} );
+}
+
+export default {
+	read,
+};

plugins/woocommerce-admin/client/wc-api/notes/selectors.js

@@ -0,0 +1,48 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import { isNil } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { getResourceName } from '../utils';
+import { DEFAULT_REQUIREMENT } from '../constants';
+
+const getNotes = ( getResource, requireResource ) => (
+	query = {},
+	requirement = DEFAULT_REQUIREMENT
+) => {
+	const resourceName = getResourceName( 'note-query', query );
+	const ids = requireResource( requirement, resourceName ).data || [];
+	const notes = ids.map( id => getResource( getResourceName( 'note', id ) ).data || {} );
+	return notes;
+};
+
+const isGetNotesRequesting = getResource => ( query = {} ) => {
+	const resourceName = getResourceName( 'note-query', query );
+	const { lastRequested, lastReceived } = getResource( resourceName );
+
+	if ( isNil( lastRequested ) ) {
+		return false;
+	}
+
+	if ( isNil( lastReceived ) ) {
+		return true;
+	}
+
+	return lastRequested > lastReceived;
+};
+
+const isGetNotesError = getResource => ( query = {} ) => {
+	const resourceName = getResourceName( 'note-query', query );
+	return getResource( resourceName ).error;
+};
+
+export default {
+	getNotes,
+	isGetNotesRequesting,
+	isGetNotesError,
+};

plugins/woocommerce-admin/client/wc-api/wc-api-spec.js

@@ -3,16 +3,21 @@
 /**
  * Internal dependencies
  */
+import notes from './notes';
 import orders from './orders';
 
 function createWcApiSpec() {
 	return {
 		selectors: {
+			...notes.selectors,
 			...orders.selectors,
 		},
 		operations: {
 			read( resourceNames ) {
-				return [ ...orders.operations.read( resourceNames ) ];
+				return [
+					...notes.operations.read( resourceNames ),
+					...orders.operations.read( resourceNames ),
+				];
 			},
 		},
 	};

plugins/woocommerce-admin/lib/client-assets.php

@@ -96,11 +96,13 @@ function wc_admin_register_script() {
 	}
 
 	// Resets lodash to wp-admin's version of lodash.
-	wp_add_inline_script(
-		WC_ADMIN_APP,
-		'_.noConflict();',
-		'after'
-	);
+	if ( 'embedded' === $entry ) {
+		wp_add_inline_script(
+			WC_ADMIN_APP,
+			'_ = _.noConflict();',
+			'after'
+		);
+	}
 
 	wp_register_style(
 		'wc-components',

plugins/woocommerce-admin/webpack.config.js

@@ -64,6 +64,11 @@ const webpackConfig = {
 	externals,
 	module: {
 		rules: [
+			{
+				parser: {
+					amd: false,
+				},
+			},
 			{
 				test: /\.jsx?$/,
 				loader: 'babel-loader',