Merge pull request #199 from moderntribe/release/3.13.0

packaged version 3.13.0

Author: becomevocal

CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [3.13.0]
+
+### Added
+
+- Added category and product view limitations to customers that are members of a
+  group with product category visibility limitations.
+- Added a filter to modify the cache time of user group category visibility.
+  `bigcommerce/product_category/group_filter_terms_user_cache_time` accepts a value,
+  in seconds, for how long to cache the local list of terms by user.
+- Added a new tab to the Resources section in the plugin admin area. The
+  new section, Tutorials, contains video tutorial links from BigCommerce's YouTube channel.
+
+### Changed
+
+- Added a feature that scrolls the browser to the top of the embedded checkout iframe
+  upon completion of the order. This resolves an issue on smaller screens where
+  the window would be stuck at the bottom of the page.
+
+### Fixed
+
+
 ## [3.12.0]
 
 ### Added

assets/css/bc-admin.css

@@ -6,7 +6,7 @@
 import delegate from 'delegate';
 import _ from 'lodash';
 import * as tools from '../../utils/tools';
-import { resourceCard, tabButton, tabCardsContent, tabContentContainer, paginationLink, noDataAvailable } from '../templates/resources';
+import { resourceCard, resourceVideoCard, tabButton, tabCardsContent, tabVideoCardsContent, tabContentContainer, paginationLink, noDataAvailable, videoPlaylist } from '../templates/resources';
 import { ADMIN_IMAGES } from '../config/wp-settings';
 import { on, trigger } from '../../utils/events';
 import scrollTo from '../../utils/dom/scroll-to';
@@ -20,6 +20,7 @@ const el = {
 const tabInstances = {
 	tabs: [],
 	cards: [],
+	videos: [],
 	cards_per_page: 12,
 };
 
@@ -58,6 +59,41 @@ const createCards = (cards, label) => {
 	});
 };
 
+/**
+ * @function createVideoCards
+ * @description Build the HTML elements for each video card data available in the bigcommerce_resources_json JSON.
+ * @param videos
+ * @param label
+ * @param playlistLabel
+ */
+const createVideoCards = (videos = {}, label = '', playlistLabel = '') => {
+	Object.values(videos).forEach((card) => {
+		const smallThumb = _.get(card, 'thumbnail.small');
+		const largeThumb = _.get(card, 'thumbnail.large');
+		// If we have images, use them. Otherwise, we'll use the BigCommerce logo thumbnail placeholder.
+		const image1 = smallThumb ? `${smallThumb} 1x,` : `${ADMIN_IMAGES}bigcommerce-resource-thumbnail.png 1x,`;
+		const image2 = largeThumb ? `${largeThumb} 2x,` : `${ADMIN_IMAGES}bigcommerce-resource-thumbnail-2x.png 2x`;
+		// Create a card and push it as a new indexed item in the cards array.
+		tabInstances.videos[playlistLabel].push(resourceVideoCard(image1, image2, card.name, card.video_length, card.description, card.url));
+	});
+};
+
+/**
+ * @function createVideoPlaylists
+ * @description Creates an array of playlists with completed markup.
+ * @param playlists
+ * @param label
+ */
+const createVideoPlaylists = (playlists = {}, label = '') => {
+	Object.values(playlists).forEach((playlist) => {
+		const playlistLabel = playlist.playlist_label;
+		tabInstances.videos[playlistLabel] = [];
+
+		tabInstances.videos[playlistLabel].push(createVideoCards(playlist.videos, label, playlistLabel));
+		tabInstances.cards[label].push(videoPlaylist(playlistLabel, playlist.playlist, tabInstances.videos[playlistLabel].join(''), tabInstances.videos[playlistLabel].length - 1));
+	});
+};
+
 /**
  * @function createTabs
  * @description Create a new tab button for each available tabInstances.tabs;
@@ -104,7 +140,6 @@ const createTabContentContainers = () => {
 	// Create a wrapper element to attach the containers to.
 	const contentWrapper = document.createElement('div');
 	tools.addClass(contentWrapper, 'bc-resources-tabs__content');
-	tools.addClass(contentWrapper, 'bc-resources-tabs__max-width');
 	el.contentContainer.appendChild(contentWrapper);
 
 	// Loop through the available keys and create the parent container tied to the tab button.
@@ -223,7 +258,12 @@ const getPaginatedItems = (e, cardKey = '', currentPage = 1) => {
 	const offset = (currentPage - 1) * tabInstances.cards_per_page;
 	const paginatedItems = tabInstances.cards[key].slice(offset, offset + tabInstances.cards_per_page);
 
-	cardPageWrapper.insertAdjacentHTML('beforeend', tabCardsContent(key, paginatedItems.join(''), currentPage));
+	if (key === 'Tutorials') {
+		cardPageWrapper.insertAdjacentHTML('beforeend', tabVideoCardsContent(key, paginatedItems.join(''), currentPage));
+	} else {
+		cardPageWrapper.insertAdjacentHTML('beforeend', tabCardsContent(key, paginatedItems.join(''), currentPage));
+	}
+
 	focusFirstPagedCard(key, currentPage);
 };
 
@@ -274,7 +314,12 @@ const initResourceCards = () => {
 
 		tabInstances.tabs.push(tabButton(section.label));
 		tabInstances.cards[section.label] = [];
-		createCards(section.resources, section.label);
+
+		if (section.label === 'Tutorials') {
+			createVideoPlaylists(section.resources, section.label);
+		} else {
+			createCards(section.resources, section.label);
+		}
 	});
 
 	createTabs();