OpenTable block: use only restaurant IDs and remove searching for name (#41162)

* Remove the name search feature for restaurants and use only restaurant IDs

* changelog

* Clarify restaurant => restaurant id in the block settings

* Fix Embed button height

* Update changelog

---------

Co-authored-by: Ashar Fuadi <[email protected]>

Author: draganescu

projects/plugins/jetpack/changelog/fix-open-table-picker

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+OpenTable block: removed the ability to search restaurants by name

projects/plugins/jetpack/extensions/blocks/opentable/edit.js

@@ -235,7 +235,7 @@ function OpenTableEdit( {
 			label={ __( 'OpenTable Reservation', 'jetpack' ) }
 			icon={ icon }
 			instructions={ __(
-				'Enter your restaurant name, or paste an OpenTable Reservation Widget embed code.',
+				'Enter your restaurants IDs, separated by comma, or paste an OpenTable Reservation Widget embed code.',
 				'jetpack'
 			) }
 			notices={ noticeUI }

projects/plugins/jetpack/extensions/blocks/opentable/editor.scss

@@ -57,7 +57,7 @@
 				padding-top: 0px;
 				padding-right: 8px;
 				padding-left: 8px;
-				height: 42px;
+				height: 38px;
 				align-items: center;
 				line-height: normal;
 

projects/plugins/jetpack/extensions/blocks/opentable/restaurant-picker.js

@@ -1,46 +1,45 @@
-import { Button, FormTokenField, Notice } from '@wordpress/components';
+import { Button, FormTokenField } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __, _n } from '@wordpress/i18n';
 import { isEmpty } from 'lodash';
-import useRestaurantSearch, { possibleEmbed } from './use-restaurant-search';
 
-const MAX_SUGGESTIONS = 20;
+export const possibleEmbed = /^\s*(http[s]?:\/\/|<script)/;
 
 export default function RestaurantPicker( props ) {
 	const [ input, setInput ] = useState( '' );
-	const { restaurants, hasRequestFailed } = useRestaurantSearch( input, MAX_SUGGESTIONS );
 	const [ selectedRestaurants, setSelectedRestaurants ] = useState( props.rids || [] );
 
 	const idRegex = /^(\d+)$|\(#(\d+)\)$/;
 
 	const onChange = selected => {
+		// we try to parse the restaurant id
 		const selectedIds = selected.map( restaurant => {
 			const parsed = idRegex.exec( restaurant );
-			const selectedId = parsed[ 1 ] || parsed[ 2 ];
-
-			return selectedId;
+			if ( parsed ) {
+				const selectedId = parsed[ 1 ] || parsed[ 2 ];
+				return selectedId;
+			}
+			// and default we to user entry
+			return restaurant;
 		} );
 		setSelectedRestaurants( selectedIds );
 		props.onChange && props.onChange( selectedIds );
 	};
 
-	const restaurantNames = restaurants
-		.filter( restaurant => selectedRestaurants.indexOf( restaurant.rid.toString() ) < 0 )
-		.map( restaurant => restaurant.name + ` (#${ restaurant.rid })` );
-
 	const onSubmit = event => {
 		event.preventDefault();
 		props.onSubmit( isEmpty( selectedRestaurants ) ? input : selectedRestaurants );
 	};
 
+	// Even though we don't search the OpenTable API
+	// we still allow for multiple restaurants, hence
+	// still use the token field
 	const formInput = (
 		<FormTokenField
 			value={ selectedRestaurants }
-			suggestions={ restaurantNames }
 			saveTransform={ token => ( possibleEmbed.test( token ) ? '' : token.trim() ) }
 			onInputChange={ setInput }
-			maxSuggestions={ MAX_SUGGESTIONS }
-			label={ _n( 'Restaurant', 'Restaurants', selectedRestaurants.length, 'jetpack' ) }
+			label={ _n( 'Restaurant ID', 'Restaurant IDs', selectedRestaurants.length, 'jetpack' ) }
 			{ ...props }
 			onChange={ onChange }
 			__nextHasNoMarginBottom={ true }
@@ -59,14 +58,6 @@ export default function RestaurantPicker( props ) {
 			) : (
 				formInput
 			) }
-			{ hasRequestFailed && (
-				<Notice status="error" isDismissible={ false }>
-					{ __(
-						"OpenTable can't find this restaurant right now. Please try again later.",
-						'jetpack'
-					) }
-				</Notice>
-			) }
 		</div>
 	);
 }