Skip to content

OpenTable: Accept more embed options #14639

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Feb 18, 2020
Merged

OpenTable: Accept more embed options #14639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
40854ee
get the restaurant id from the URL if it's available
scruffian Feb 11, 2020
8fa3eaf
Accept URLs pasted into the editor
scruffian Feb 11, 2020
df90de8
Adds tests for getValidatedAttributes
scruffian Feb 13, 2020
66455cb
Change the regex to use \s for all whitespace
pablinos Feb 14, 2020
6c55fcb
Add tests for invalid embed codes and URLs
pablinos Feb 14, 2020
211c300
Converted spaces to tabs
pablinos Feb 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 3 additions & 35 deletions extensions/blocks/opentable/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import {
defaultAttributes,
} from './attributes';
import { getValidatedAttributes } from '../../shared/get-validated-attributes';
import { getAttributesFromEmbedCode } from './utils';

export default function OpenTableEdit( { attributes, setAttributes, className, clientId } ) {
const validatedAttributes = getValidatedAttributes( defaultAttributes, attributes );
Expand All @@ -64,44 +65,11 @@ export default function OpenTableEdit( { attributes, setAttributes, className, c
);

const parseEmbedCode = embedCode => {
if ( ! embedCode ) {
const newAttributes = getAttributesFromEmbedCode( embedCode );
if ( ! newAttributes ) {
setErrorNotice();
return;
}

const scriptTagAttributes = embedCode.match( /< *script[^>]*src *= *["']?([^"']*)/i );
if ( ! scriptTagAttributes || ! scriptTagAttributes[ 1 ] ) {
setErrorNotice();
return;
}

let src = '';
if ( scriptTagAttributes[ 1 ].indexOf( 'http' ) === 0 ) {
src = new URL( scriptTagAttributes[ 1 ] );
} else {
src = new URL( 'http:' + scriptTagAttributes[ 1 ] );
}

if ( ! src.search ) {
setErrorNotice();
return;
}

const searchParams = new URLSearchParams( src.search );
let styleSetting = searchParams.get( 'theme' );
if ( searchParams.get( 'type' ) === 'button' ) {
styleSetting = searchParams.get( 'type' );
}

const newAttributes = {
rid: searchParams.getAll( 'rid' ),
iframe: Boolean( searchParams.get( 'iframe' ) ),
domain: searchParams.get( 'domain' ),
lang: searchParams.get( 'lang' ),
newtab: Boolean( searchParams.get( 'newtab' ) ),
style: styleSetting,
};

const validatedNewAttributes = getValidatedAttributes( defaultAttributes, newAttributes );
setAttributes( validatedNewAttributes );
};
Expand Down
17 changes: 17 additions & 0 deletions extensions/blocks/opentable/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { createBlock } from '@wordpress/blocks';

/**
* Internal dependencies
Expand All @@ -18,6 +19,7 @@ import './view.scss';

export const name = 'opentable';
export const title = __( 'OpenTable', 'jetpack' );
import { getAttributesFromEmbedCode, restRefRegex, ridRegex } from './utils';

export const settings = {
title,
Expand Down Expand Up @@ -54,4 +56,19 @@ export const settings = {
newtab: false,
},
},
transforms: {
from: [
{
type: 'raw',
isMatch: node =>
node.nodeName === 'P' &&
node.textContent.indexOf( 'http' ) === 0 &&
( ridRegex.test( node.textContent ) || restRefRegex.test( node.textContent ) ),
transform: node => {
const newAttributes = getAttributesFromEmbedCode( node.textContent );
return createBlock( 'jetpack/opentable', newAttributes );
},
},
],
},
};
5 changes: 1 addition & 4 deletions extensions/blocks/opentable/restaurant-picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import { __, _n } from '@wordpress/i18n';
import useRestaurantSearch from './use-restaurant-search';

const MAX_SUGGESTIONS = 20;
const embedRegex = /<script type=\'text\/javascript\' src=\'\/\/www.opentable\.(\w{2,3}\.)?\w+\/widget\/reservation\/loader\?[^']+\'><\/script>/;

export default function RestaurantPicker( props ) {
const [ input, setInput ] = useState( '' );
Expand All @@ -42,9 +41,7 @@ export default function RestaurantPicker( props ) {

const onSubmit = event => {
event.preventDefault();
props.onSubmit(
isEmpty( selectedRestaurants ) && embedRegex.test( input ) ? input : selectedRestaurants
);
props.onSubmit( isEmpty( selectedRestaurants ) ? input : selectedRestaurants );
};

const formInput = (
Expand Down
94 changes: 94 additions & 0 deletions extensions/blocks/opentable/test/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
/**
* External dependencies
*/

/**
* Internal dependencies
*/
import { getAttributesFromEmbedCode } from '../utils';

const widgetEmbedCode = "<script type='text/javascript' src='//www.opentable.com/widget/reservation/loader?rid=1&type=standard&theme=standard&iframe=true&domain=com&lang=en-US&newtab=false&ot_source=Restaurant%20website'></script>";

const invalidEmbedCode = "<script type='text/javascript' src='https://www.widgets-r-us.com/widget/widgetygoddness?rid=1&type=standard&theme=standard&iframe=true&domain=com&lang=en-US&newtab=false&ot_source=Restaurant%20website'></script>";

const marketingUrl = "https://www.opentable.com/vongs-thai-kitchen-reservations-chicago?restref=1&lang=en-US&ot_source=Restaurant%20website";

const customUrl1 = "https://www.opentable.com/restref/client/?restref=412810&lang=en-US&ot_source=Restaurant%20website&corrid=e413926b-0352-46d6-a8d8-d1d525932310";

const customUrl2 = "https://www.opentable.com/restref/client/?restref=1&lang=es-MX&ot_source=Restaurant%20website&corrid=09f44cc6-f0cb-4e98-9298-f4ba8cc20183";

const customUrl3 = "https://www.opentable.com/restref/client/?rid=1&corrid=010a3136-569e-42a5-a381-e111887b4cf5";

const invalidUrl = "https://www.widgets-r-us.com/widget/widgetygoddness?rid=1&type=standard&theme=standard&iframe=true&domain=com&lang=en-US&newtab=false&ot_source=Restaurant%20website";

describe( 'getAttributesFromEmbedCode', () => {
test( 'Widget embed code', () => {
expect(
getAttributesFromEmbedCode( widgetEmbedCode )
).toEqual(
{
"domain": "com",
"iframe": 'true',
"lang": "en-US",
"newtab": 'false',
"rid": [ "1" ],
"style": "standard",
}
);
} );

test( 'Marketing URL', () => {
expect(
getAttributesFromEmbedCode( marketingUrl )
).toEqual(
{
"lang": "en-US",
"rid": [ "1" ],
}
);
} );

test( 'Custom URL 1', () => {
expect(
getAttributesFromEmbedCode( customUrl1 )
).toEqual(
{
"lang": "en-US",
"rid": [ "412810" ],
}
);
} );

test( 'Custom URL 2', () => {
expect(
getAttributesFromEmbedCode( customUrl2 )
).toEqual(
{
"lang": "es-MX",
"rid": [ "1" ],
}
);
} );

test( 'Custom URL 3', () => {
expect(
getAttributesFromEmbedCode( customUrl3 )
).toEqual(
{
"rid": [ "1" ],
}
);
} );

test( 'Invaild Embed Code', () => {
expect(
getAttributesFromEmbedCode( invalidEmbedCode )
).toBeUndefined();
} );

test( 'Invaild URL', () => {
expect(
getAttributesFromEmbedCode( invalidUrl )
).toBeUndefined();
} );
} );
80 changes: 80 additions & 0 deletions extensions/blocks/opentable/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
export const embedRegex = /<\s*script[^>]*src\s*=\s*["']?([^"']*)/i;
export const restRefRegex = /restref=([0-9]+)&/;
export const ridRegex = /rid=([0-9]+)&/;

const getAttributesFromUrl = url => {
let src = '';
if ( url.indexOf( 'http' ) === 0 ) {
src = new URL( url );
} else {
src = new URL( 'http:' + url );
}

if ( ! src.host || src.host.indexOf( 'opentable' ) === -1 || ! src.search ) {
return;
}

const searchParams = new URLSearchParams( src.search );
let styleSetting = searchParams.get( 'theme' );
if ( searchParams.get( 'type' ) === 'button' ) {
styleSetting = searchParams.get( 'type' );
}

let restaurantId = searchParams.getAll( 'rid' );
if ( ! restaurantId || restaurantId.length === 0 ) {
restaurantId = searchParams.getAll( 'restref' );
}
if ( ! restaurantId || restaurantId.length === 0 ) {
return;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this works, but should we add a negative test to make sure that we don't get any attributes with some other invalid URL/embed code? I think this is the point we would get to if someone was to paste in something silly like

<script
			  src="https://someotherservice.com/embed.js?params=4"
			  ></script>

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah we should probably, but I think that would be good for a different PR :)

}

const newAttributes = {};
if ( restaurantId ) {
newAttributes.rid = restaurantId;
}

const domain = searchParams.get( 'domain' );
if ( domain ) {
newAttributes.domain = domain;
}

const iframe = searchParams.get( 'iframe' );
if ( iframe ) {
newAttributes.iframe = iframe;
}

const lang = searchParams.get( 'lang' );
if ( lang ) {
newAttributes.lang = lang;
}

const newtab = searchParams.get( 'newtab' );
if ( newtab ) {
newAttributes.newtab = newtab;
}

if ( styleSetting ) {
newAttributes.style = styleSetting;
}

return newAttributes;
};

const getUrlFromEmbedCode = embedCode => {
const scriptTagAttributes = embedCode.match( embedRegex );
if ( scriptTagAttributes && scriptTagAttributes[ 1 ] ) {
return scriptTagAttributes[ 1 ];
}

if ( restRefRegex.test( embedCode ) || ridRegex.test( embedCode ) ) {
return embedCode;
}
};

export const getAttributesFromEmbedCode = embedCode => {
if ( ! embedCode ) {
return;
}

return getAttributesFromUrl( getUrlFromEmbedCode( embedCode ) );
};
2 changes: 1 addition & 1 deletion extensions/shared/get-validated-attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const getValidatedAttributes = ( attributeDetails, attributesToValidate )
attributeKey
];
if ( 'boolean' === type ) {
ret[ attributeKey ] = !! attribute;
ret[ attributeKey ] = attribute === 'false' ? false : !! attribute;
} else if ( validator ) {
ret[ attributeKey ] = validator( attribute ) ? attribute : defaultVal;
} else if ( validValues ) {
Expand Down
Loading