+
+
+ {`#${orderNumber}`} {firstName} {lastName}
+
+ {emailAddress ? ({emailAddress}) : ''}
+
+
+
+ );
+};
diff --git a/assets/js/woocommerce/admin/orders/app/index.js b/assets/js/woocommerce/admin/orders/app/index.js
new file mode 100644
index 0000000000..ca57ab3664
--- /dev/null
+++ b/assets/js/woocommerce/admin/orders/app/index.js
@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies.
+ */
+import { useCallback, useEffect, useRef, WPElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import { useApiSearch } from '../../../../api-search';
+import { useDebounce } from '../hooks';
+import Listbox from './components/listbox';
+import ShopOrder from './components/shop-order';
+
+/**
+ * Autosuggest app.
+ *
+ * @param {object} props Component props.
+ * @param {string} props.adminUrl Admin URL.
+ * @param {string} props.input Input element.
+ * @returns {WPElement} Rendered component.
+ */
+export default ({ adminUrl, input }) => {
+ const { clearResults, searchFor, searchResults } = useApiSearch();
+
+ const searchResultsRef = useRef(searchResults);
+
+ searchResultsRef.current = searchResults;
+
+ /**
+ * Selection event handler.
+ *
+ * @param {number} index Selected option index.
+ */
+ const onSelect = useCallback(
+ (index) => {
+ const { post_id } = searchResultsRef.current[index]._source;
+
+ window.location = `${adminUrl}?post=${post_id}&action=edit`;
+ },
+ [adminUrl],
+ );
+
+ /**
+ * Dispatch the change, with debouncing.
+ */
+ const dispatchInput = useDebounce((value) => {
+ if (value) {
+ searchFor(value);
+ } else {
+ clearResults();
+ }
+ }, 300);
+
+ /**
+ * Callback for input keyup event.
+ *
+ * @param {Event} event keyupEvent
+ */
+ const onInput = useCallback(
+ (event) => {
+ dispatchInput(event.target.value);
+ },
+ [dispatchInput],
+ );
+
+ /**
+ * Handle initialization.
+ *
+ * @returns {Function} Cleanup function.
+ */
+ const handleInit = () => {
+ input.addEventListener('input', onInput);
+
+ return () => {
+ input.removeEventListener('input', onInput);
+ };
+ };
+
+ /**
+ * Effects.
+ */
+ useEffect(handleInit, [input, onInput]);
+
+ return (
+