Merge pull request #19 from shutterstock/version-1.3.7

Release 1.3.7

shutterstock/README.txt

@@ -3,7 +3,7 @@ Contributors: shutterstockplugins
 Tags: shutterstock, stock photography, images, editorial images, licensing, media library, stock
 Requires at least: 5.5
 Tested up to: 5.7
-Stable tag: 1.3.6
+Stable tag: 1.3.7
 Requires PHP: 7.1
 License: MIT
 License URI: http://opensource.org/licenses/mit-license.html
@@ -111,6 +111,9 @@ You can click **View recommendations** to see suggested images based on the text
 1. Publish the page as usual. The image appears on the page just like any other image that you add to a page.
 
 == Changelog ==
+= 1.3.7 =
+* Update to Shutterstock UI 2.0 & Bug fixes
+
 = 1.3.6 =
 * Bug fixes related to WP VIP
 

shutterstock/admin/shutterstock-media-page/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-dom', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'ad1fbcbe1ae62bfc0fe883dd43a5fba6');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-dom', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'a6bf67079b9aa9bd04b1e92f732bc4c3');

shutterstock/includes/class-shutterstock-api.php

@@ -148,13 +148,22 @@ public function license_image($request) {
 		$image_description = sanitize_text_field($req_body['description']);
 		$contributor_name = sanitize_text_field($req_body['contributorName']);
 		$media_type = sanitize_text_field($req_body['mediaType']);
-		$search_id = sanitize_text_field($req_body['search_id']);
 		$is_editorial = $media_type === 'editorial';
 
 		$width = sanitize_text_field($req_body['width']);
 		$height = sanitize_text_field($req_body['height']);
 
-		$metadata = array_map('sanitize_text_field', $req_body['metadata']);
+		$search_id = isset($req_body['search_id'])
+			? sanitize_text_field($req_body['search_id'])
+			: null;
+
+		$metadata = isset($req_body['metadata'])
+			? array_map('sanitize_text_field', $req_body['metadata'])
+			: null;
+
+ 		$local_amount = isset($req_body['pricePerDownload']['local_amount'])
+ 			? sanitize_text_field($req_body['pricePerDownload']['local_amount'])
+ 			: 0;
 
 		$local_amount = isset($req_body['pricePerDownload']['local_amount'])
 			? sanitize_text_field($req_body['pricePerDownload']['local_amount'])
@@ -167,7 +176,6 @@ public function license_image($request) {
 			: $this->api_url. '/images/licenses?subscription_id='. $subscription_id;
 
 		$body_key = $is_editorial ? 'editorial' : 'images';
-		$body = [];
 
 		if ($is_editorial) {
 			$country = $this->shutterstock_helper->get_editorial_country();

shutterstock/includes/class-shutterstock.php

@@ -70,12 +70,12 @@ public function __construct() {
 		if ( defined( 'SHUTTERSTOCK_VERSION' ) ) {
 			$this->version = SHUTTERSTOCK_VERSION;
 		} else {
-			$this->version = '1.3.6';
+			$this->version = '1.3.7';
 		}
 		$this->shutterstock = 'shutterstock';
 		$this->shutterstock_ui = [
-			'js' => 'https://api-cdn.shutterstock.com/0.1.33/static/js/sstk-widget.js',
-			'css' => 'https://api-cdn.shutterstock.com/0.1.33/static/css/sstk-widget.css',
+			'js' => 'https://api-cdn.shutterstock.com/2.0.2/static/js/sstk-widget.js',
+			'css' => 'https://api-cdn.shutterstock.com/2.0.2/static/css/sstk-widget.css',
 		];
 
 		$this->load_dependencies();

shutterstock/public/shutterstock-block/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-blocks', 'wp-components', 'wp-data', 'wp-dom', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'f82a7a3f573966b77006471e908ebd58');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-blocks', 'wp-components', 'wp-data', 'wp-dom', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'e806a75149c5c4819c99a6f2953375d6');

shutterstock/public/shutterstock-block/src/components/ShutterstockMediaPage/index.js

@@ -5,14 +5,28 @@ import ShutterstockLogo from '../ShutterstockLogo/ShutterstockLogo.js';
 import './ShutterstockMediaPage.scss';
 
 window.onload = () => {
+    const { permissions = {} } = shutterstock;
+	const userIsAbleToLicenseAllImages = permissions.includes('can_user_license_all_shutterstock_images');
+	const userIsAbleToLicenseEditorial = permissions.includes('can_user_license_shutterstock_editorial_image');
+	const userIsAbleToLicensePhotos = permissions.includes('can_user_license_shutterstock_photos');
+	let canLicense = false;
+
+	if (
+		userIsAbleToLicenseAllImages ||
+		(userIsAbleToLicenseEditorial) || 
+		(userIsAbleToLicensePhotos)
+	) {
+		canLicense = true;
+	}
+
     render(
         <>
             <div className="components-shutterstock-media-page__logo">
                 <ShutterstockLogo />
             </div>
             <ShutterstockUI
                 isMediaPage
-                canLicense
+                canLicense={canLicense}
             />
         </>
         , document.getElementById('shutterstock-widget')

shutterstock/public/shutterstock-block/src/components/ShutterstockUI/ShutterstockUI.js

@@ -13,6 +13,7 @@ import {
   imageDetailsPageRoute,
   licenseHistoryPageRoute,
   licensingPageRoute,
+  searchPage,
 } from './routes';
 
 const regex = {
@@ -24,7 +25,7 @@ const ShutterstockUI = ({
   setAttributes,
   closeModal,
   canLicense = false,
-  assetInfo = {},
+  item = {},
   licenseImage = false,
   subscriptions = [],
   isMediaPage = false,
@@ -75,9 +76,13 @@ const ShutterstockUI = ({
     : [{ ...commonInsertPreviewProps, icon: insertPreviewSvg }];
 
   const routesConfig = [
-    imageDetailsPageRoute({ assetInfo, commonInsertPreviewProps, isMediaPage }),
+    imageDetailsPageRoute({ item, commonInsertPreviewProps, isMediaPage }),
   ];
 
+  const imageDetailsPage = imageDetailsPageRoute({ item, commonInsertPreviewProps, isMediaPage });
+  let licensingPage;
+  let licenseHistoryPage;
+
   if (canLicense) {
     const commonLicensingProps = {
       label: __('wordpress:text_license', 'shutterstock'),
@@ -92,23 +97,13 @@ const ShutterstockUI = ({
           const subscriptionsWithImageDetails = await getSubscriptionWithDetails(item.id, mediaType);
 
           // Adding subscription + search id to the route
-          routesConfig[1].props = {
-            ...routesConfig[1].props,
-            assetInfo: item,
+          widgetRef.current.navigateTo('imageLicensingPage', {
+            item,
             subscriptions: subscriptionsWithImageDetails,
-            searchId: item.searchId
-          }
-
-          widgetRef.current.updateRoutes({
-            routesConfig,
-          });
-
-          widgetRef.current.toggleLoadingIndicator(false);
+            searchId: item.searchId,
+          })
           toggleOverlay(false);
-
-          options.history.push(`/license/images/${item.id}`);
         } catch(error) {
-          widgetRef.current.toggleLoadingIndicator(false);
           toggleOverlay(false);
           handleError(error);
         }
@@ -120,34 +115,34 @@ const ShutterstockUI = ({
     });
 
     // Adding Licensing Button to the Image details page.
-    routesConfig[0].props.buttons.push({
+    imageDetailsPage.props.buttons.push({
       ...commonLicensingProps,
     });
 
     // Adding Licensing Route
-    routesConfig.push(
-      licensingPageRoute({
-        assetInfo,
-        closeModal,
-        commonLicensingProps,
-        handleError,
-        isMediaPage,
-        setAttributes,
-        showSnackbar,
-        subscriptions,
-        toggleOverlay,
-      }),
-      licenseHistoryPageRoute({
-        closeModal,
-        handleError,
-        isMediaPage,
-        routesConfig,
-        setAttributes,
-        showSnackbar,
-        toggleOverlay,
-        widgetRef,
-      }),
-    );
+    licensingPage = licensingPageRoute({
+      item,
+      closeModal,
+      commonLicensingProps,
+      handleError,
+      isMediaPage,
+      licenseImage,
+      setAttributes,
+      showSnackbar,
+      subscriptions,
+      toggleOverlay,
+    });
+
+    licenseHistoryPage = licenseHistoryPageRoute({
+      closeModal,
+      handleError,
+      isMediaPage,
+      routesConfig,
+      setAttributes,
+      showSnackbar,
+      toggleOverlay,
+      widgetRef,
+    })
   }
 
   useEffect(() => {
@@ -163,89 +158,43 @@ const ShutterstockUI = ({
       },
     ];
 
+    const searchImagePage = searchPage({
+      isMediaPage,
+      overlayActions,
+      shutterstock,
+      searchBarDropdownFilters,
+      userIsAbleToSearchEditorial,
+      widgetRef,
+    })
+    /**
+     * We have to show licensingPage & licenseHistoryPage only for users who have access to it
+     * so we do ...() and all.
+     * The condition on line 176 is specific to a case where a user already inserted an image in wordpress post
+     * and then clicks on `License Image` button. In that case we want to display licensingPage first to user.
+     */
+    const pages = [
+      ...((licenseImage && licensingPage) ? [licensingPage] : []),
+      searchImagePage,
+      imageDetailsPage,
+      ...((!licenseImage && licensingPage) ? [licensingPage] : []),
+      ...((licenseHistoryPage) ? [licenseHistoryPage] : []),
+    ];
+
     const widgetConfig = {
-      mediaType: 'images',
-      imageType: ['photo'],
-      subtitle: '',
       container: widgetRef.current,
-      showMore: true,
       key: shutterstock?.api_key,
       languageCode: shutterstock?.language,
-      dynamicTitle: true,
-      dynamicSubtitle: true,
-      showSearchBar: true,
-      assetsPerPage: 26,
-      onItemClick: (e, item, options) => {
-        e.preventDefault();
-        routesConfig[0].props = {
-          ...routesConfig[0].props,
-          assetInfo: item,
-        }
-
-        widgetRef.current.updateRoutes({
-          routesConfig,
-        });
-
-        widgetRef.current.toggleLoadingIndicator(false);
-        options.history.push(`/images/${item.id}`)
-      },
-      theme: {
-        searchBar: {
-          searchForm: 'components-shutterstock-ui__searchForm',
-          searchContainer: 'components-shutterstock-ui__searchContainer',
-          inputGroup: 'components-shutterstock-ui__inputgroup',
-          formControlInput: 'components-shutterstock-ui__input',
-          filterDrawer: {
-            filterDrawerContainer: 'components-shutterstock-ui__filterDrawerContainer',
-            overlay: 'components-shutterstock-ui__widget-drawer-position-fixed',
-            filterDrawer: 'components-shutterstock-ui__widget-drawer-position-fixed',
-            filterButtonWrapper: 'components-shutterstock-ui__filterButtonWrapper'
-          }
-        },
-      },
-      extraRoutes: {
-        ...(licenseImage ? { initialRoute: `/license/images/${assetInfo.id}` } : { } ),
-        routesConfig,
-        excludeSearchBarRoutes: ['^\/license-history$']
-      },
-      overlayActions,
       customHeaders: {
         'x-shutterstock-application': `Wordpress/${shutterstock?.version}`,
       },
-      editorialCountry: shutterstock?.country,
-      searchFilters: {
-        showFilterDrawer: true,
-        images: {
-          orientationFilter: true,
-        },
-        ...(userIsAbleToSearchEditorial ? { searchBarDropdownFilters } : {})
-      },
-      ...(isMediaPage ? {} : {
-        searchSuggestions: {
-          enable: true,
-          textProvider: () => {
-            const postTitle = wp.data.select('core/editor').getEditedPostAttribute('title') || '';
-            const postContent = wp.data.select('core/editor').getEditedPostContent() || '';
-
-            const text = stripHTML(`${postTitle} ${postContent}`)
-              .replace(regex.HTMLRegExp, '')
-              .replace(regex.NewLineRegExp, '')
-              .trim();
-
-            return text;
-          }
-        },
-        title: __('wordpress:text_add_shuttersock_content_to_post', 'shutterstock'),
-      }),
+      pages,
     };
 
     // eslint-disable-next-line no-undef
     if (typeof window === 'object' && window.ShutterstockWidget) {
       // eslint-disable-next-line no-undef
       const widgetInstance = new window.ShutterstockWidget(widgetConfig);
-      widgetInstance.search({
-        query: '',
-      });
+      widgetInstance.render({});
 
       widgetRef.current = widgetInstance;
     }
@@ -260,7 +209,7 @@ const ShutterstockUI = ({
         <div className={`components-shutterstock-ui__navigation ${overlay.show ? 'disabled' : ''} ${mediaPageClass}`}>
           <a
             onClick={(e, options) => {
-              widgetRef.current.getHistory().push(`/`);
+              widgetRef.current.navigateTo('searchPage')
             }}
           >
             {__('wordpress:text_home', 'shutterstock')}
@@ -272,20 +221,12 @@ const ShutterstockUI = ({
                 toggleOverlay(true, __('wordpress:text_loading_please_wait', 'shutterstock'));
                 const licenseHistory = await getLicenseHistory('images');
 
-                routesConfig[2].props = {
-                  ...routesConfig[2].props,
-                  licenseHistory,
-                }
-                widgetRef.current.updateRoutes({
-                  routesConfig,
-                });
-
-                widgetRef.current.toggleLoadingIndicator(false);
+                widgetRef.current.navigateTo('imageLicenseHistoryPage', {
+                  licenseHistory
+                })
                 toggleOverlay(false);
-                widgetRef.current.getHistory().push(`/license-history`);
 
               } catch(error) {
-                widgetRef.current.toggleLoadingIndicator(false);
                 toggleOverlay(false);
                 handleError(error);
               }

shutterstock/public/shutterstock-block/src/components/ShutterstockUI/routes/imageDetailsPageRoute.js

@@ -1,19 +1,19 @@
 import insertPreviewDarkSvg from '../../../images/insert-preview-dark.svg';
 
 const imageDetailsPageRoute = ({
-  assetInfo,
+  item,
   isMediaPage,
   commonInsertPreviewProps,
 }) => ({
   name: 'imageDetailsPage',
-  path: '/images/:id',
   component: ShutterstockWidget.components.ImageDetailsPage,
   props: {
+    showSearchBar: true,
     buttons: isMediaPage ? [] : [{
       ...commonInsertPreviewProps,
       icon: insertPreviewDarkSvg,
     }],
-    assetInfo,
+    item,
   }
 });