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();

assets/css/bc-admin.min.css

@@ -1,5 +1,7 @@
 import { I18N } from '../config/i18n';
 
+const { _n, sprintf } = wp.i18n;
+
 export const noDataAvailable = (
 	`
 	<div class="bc-resources-no-data">
@@ -18,20 +20,42 @@ export const tabButton = tabName => (
 
 export const tabContentContainer = tabName => (
 	`
-	<div class="bc-resources-tabs__tab-content-container" data-js="bc-resource-tab-content" data-tab-name="${tabName}" aria-hidden="true">
+	<div class="bc-resources-tabs__tab-content-container bc-resources-container-${tabName.toLowerCase()}" data-js="bc-resource-tab-content" data-tab-name="${tabName}" aria-hidden="true">
 		<div class="bc-resources-pagination-wrapper" role="navigation" aria-label="${tabName} Pagination Navigation"></div>
 	</div>
 	`
 );
 
 export const tabCardsContent = (tabName, cards, pageNumber) => (
 	`
-	<div class="bc-resources-tabs__paged-cards bc-cards-page-active" data-js="bc-resource-tab-cards" data-resource-page-name="${tabName}" data-resource-page-number="${pageNumber}" aria-hidden="false">
+	<div class="bc-resources-tabs__paged-cards bc-resources-tabs__max-width bc-cards-page-active" data-js="bc-resource-tab-cards" data-resource-page-name="${tabName}" data-resource-page-number="${pageNumber}" aria-hidden="false">
 		${cards}
 	</div>
 	`
 );
 
+export const videoPlaylist = (playlistName, playlistNumber, cards, videoCount) => (
+	`
+	<div class="bc-resource-tab-playlist bc-resource-tab-playlist--${playlistNumber}">
+		<h3 class="bc-resources-tabs__max-width bc-resource-tab-playlist-name">
+			${playlistNumber !== '00' ? `<strong>${playlistNumber}</strong> ` : ''}${playlistName} 
+			<span class="bc-playlist-count">${sprintf(_n('%s Video', '%s Videos', videoCount, 'bigcommerce'), videoCount)}</span>
+		</h3>
+		<div class="bc-resource-tab-playlist-cards">
+			${cards}
+		</div>
+	</div>
+	`
+);
+
+export const tabVideoCardsContent = (tabName, playlists, pageNumber) => (
+	`
+	<div class="bc-resources-tabs__paged-cards bc-resources-content-${tabName.toLowerCase()} bc-cards-page-active" data-js="bc-resource-tab-cards" data-resource-page-name="${tabName}" data-resource-page-number="${pageNumber}" aria-hidden="false">
+		${playlists}
+	</div>
+	`
+);
+
 export const resourceCard = (image, image2x, title, description, link) => (
 	`
 	<div class="bc-resource-card" data-js="bc-resource-card">
@@ -52,6 +76,32 @@ export const resourceCard = (image, image2x, title, description, link) => (
 	`
 );
 
+export const resourceVideoCard = (image, image2x, title, length, description, link) => (
+	`
+	<div class="bc-resource-card--video" data-js="bc-resource-card">
+		<a href="${link}" class="bc-resource-card__video-link" target="_blank" rel="noopener" title="${title}" tabindex="699">
+			<div class="bc-resource-card__image">
+				<div class="bc-resource-card__img-overlay"></div>
+				<img
+				srcset="${image}${image2x}"
+				alt="${title} ${description}"
+				>
+			</div>
+		</a>
+		<div class="bc-resource-card__content">
+			<h4 class="bc-resource-card__title">
+				<a href="${link}" class="bc-resource-card__video-link" target="_blank" rel="noopener" title="${title}" tabindex="699">${title}</a>
+			</h4>
+			<span class="bc-resource-card__video-length">${length}</span>
+			${description.length > 0 ?
+			`<p class="bc-resource-card__video-description">${description}</p>`
+			:
+			''}
+		</div>
+	</div>
+	`
+);
+
 export const paginationLink = (pageNumber, pageName) => (
 	`
 	<button

assets/js/dist/admin/scripts.js

@@ -4,8 +4,10 @@
  */
 
 import Cookie from 'js-cookie';
+import _ from 'lodash';
 import { embedCheckout } from '@bigcommerce/checkout-sdk';
 import * as tools from 'utils/tools';
+import scrollTo from 'utils/dom/scroll-to';
 import { CART_ID_COOKIE_NAME, CART_ITEM_COUNT_COOKIE } from 'bcConstants/cookies';
 import { cartEmpty } from '../cart/cart-templates';
 
@@ -23,11 +25,31 @@ const clearCartData = () => {
 		return;
 	}
 
-	const cartMenuCount = tools.getNodes('.bigcommerce-cart__item-count', false, document, true)[0];
-	Cookie.remove(CART_ITEM_COUNT_COOKIE);
-	tools.removeClass(cartMenuCount, 'full');
-	cartMenuCount.textContent = '';
-	Cookie.remove(CART_ID_COOKIE_NAME);
+	const cartMenuCount = tools.getNodes('.bigcommerce-cart__item-count', true, document, true);
+
+	_.delay(() => {
+		Cookie.remove(CART_ITEM_COUNT_COOKIE);
+		Cookie.remove(CART_ID_COOKIE_NAME);
+
+		cartMenuCount.forEach((menuItem) => {
+			tools.removeClass(menuItem, 'full');
+			menuItem.textContent = '';
+		});
+	}, 250);
+};
+
+/**
+ * @function scrollIframe
+ * @description After completing the checkout process, ensure the top of the embedded checkout is visible using scrollTo.
+ */
+const scrollIframe = () => {
+	const options = {
+		offset: -80,
+		duration: 750,
+		$target: jQuery(el.container),
+	};
+
+	_.delay(() => scrollTo(options), 1000);
 };
 
 /**
@@ -46,6 +68,7 @@ const loadEmbeddedCheckout = () => {
 
 	// Set the onComplete callback to use the clearCartData function.
 	config.onComplete = clearCartData;
+	config.onComplete = scrollIframe;
 
 	// Embed the checkout.
 	embedCheckout(config);

assets/js/dist/admin/scripts.min.js

@@ -35,6 +35,7 @@
 @import './pages/settings/plugin-complete';
 @import './pages/resources/tabs';
 @import './pages/resources/cards';
+@import './pages/resources/tutorials';
 
 /* Admin UI Styles */
 @import './shortcode-ui/dialog-ui';

assets/js/dist/scripts.js

@@ -9,6 +9,10 @@
 			margin-top: 86px;
 		}
 	}
+
+	#wpcontent {
+		padding-left: 0;
+	}
 }
 
 .bc-resources-content {
@@ -17,11 +21,11 @@
 }
 
 .bc-resources {
-	margin: 10px 20px 10px 10px;
+	margin: 10px 0;
 	font-size: 16px;
 
-	@media (--viewport-wpadmin) {
-		margin: 10px 20px 0 0;
+	@media (--viewport-xlarge) {
+		margin: 10px 0 0;
 	}
 }
 
@@ -33,8 +37,10 @@
 
 .bc-resources-header {
 	position: relative;
+	box-sizing: border-box;
 	min-height: 276px;
-	margin-top: 0;
+	margin: 0 20px;
+	width: calc(100% - 40px);
 	display: flex;
 	flex-direction: row;
 
@@ -157,13 +163,13 @@
 	position: absolute;
 	top: 0;
 	left: 0;
-	width: 100%;
+	width: calc(100% - 40px);
 	height: 100%;
 	opacity: 0;
 	z-index: 0;
 	background-color: var(--color-white);
 	transition: var(--transition-opacity);
-	padding-top: 58px;
+	padding: 58px 20px 0;
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-start;