Merge pull request #202 from awesomemotive/release/4.7.8

`release/4.7.8`

includes/core/assets/css/admin/admin.scss

@@ -352,6 +352,10 @@
 		position: relative;
 		flex: 0 0 25%;
 
+		@media screen and (min-width: 1400px) {
+			flex-basis: 22%;
+		}
+
 		@media screen and (max-width: 782px) {
 			flex-basis: 100%;
 			flex-grow: 1;
@@ -363,7 +367,7 @@
 			padding: 0;
 
 			&:first-child {
-				margin-top: -1px;
+				margin-top: 12px;
 			}
 
 			&:last-child {
@@ -430,7 +434,7 @@
 				align-items: center;
 				line-height: 20px;
 				margin: 0;
-				padding: 10px 10px 10px 14px;
+				padding: 8px 10px 8px 14px;
 				text-decoration: none;
 				transition: all 0.05s ease-in-out;
 
@@ -447,10 +451,11 @@
 					outline: 0;
 					position: relative;
 					z-index: 3;
-					box-shadow: inset 0 0 0 2px currentColor;
+					box-shadow: inset 0 0 0 1px currentColor, 0 0 0 1px currentColor;
 				}
 
-				&[href="#purchase-restrictions-settings-panel"] {
+				&[href="#purchase-restrictions-settings-panel"],
+				&[href="#payment-page-settings-panel"] {
 					margin-bottom: 20px;
 					position: relative;
 
@@ -465,6 +470,14 @@
 						background: #eaeaea;
 					}
 				}
+
+				span > span {
+					color: #f18500;
+					font-size: 12px;
+					font-weight: 600;
+					margin: 0 0 0 5px;
+					display: inline-block;
+				}
 			}
 
 			&:not(.active) {
@@ -490,6 +503,10 @@
 		flex: 0 0 75%;
 		display: flex;
 
+		@media screen and (min-width: 1400px) {
+			flex-basis: 78%;
+		}
+
 		@media screen and (max-width: 782px) {
 			flex-basis: 100%;
 		}
@@ -2277,6 +2294,72 @@ select.simpay-currency-symbol {
 	}
 }
 
+.simpay-form-builder-automations {
+
+	&__cta {
+		margin: 24px 0 6px;
+		text-align: center;
+	}
+}
+
+.simpay-form-builder-automator {
+	padding: 16px 4px 26px !important;
+
+	&,
+	* {
+		box-sizing: border-box;
+	}
+
+	input[type="search"] {
+		font-size: 15px;
+		padding: 2px 8px;
+	}
+
+	&__integrations {
+		display: grid;
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+		grid-column-gap: 16px;
+		grid-row-gap: 16px;
+		margin: 18px -18px 0;
+		padding: 0 18px 10px;
+		width: calc(100% + 36px);
+		max-height: 400px;
+		overflow-y: scroll;
+	}
+
+	&__integrations-integration {
+		color: initial;
+		text-align: center;
+		text-decoration: none;
+		background: #fff;
+		border: 1px solid #eee;
+		border-radius: 4px;
+		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03);
+		transition: all ease-in 0.15s;
+
+		img {
+			display: block;
+			margin: 16px auto;
+			height: 50px;
+		}
+
+		span {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			padding: 8px 16px;
+			display: block;
+			border-top: 1px solid #eee;
+		}
+
+		&:hover {
+			cursor: pointer;
+			border-color: #ddd;
+			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+		}
+	}
+}
+
 body.site-health #wpbody-content,
 body.post-type-simple-pay #wpbody-content {
 	padding-bottom: 200px;

includes/core/assets/js/admin/payment-form/automations.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+
+/**
+ * Filters the integrations list based on a fuzzy search of data-name and
+ * data-description attributes on the integrations.
+ *
+ * @since 4.7.8
+ */
+domReady( () => {
+	const searchEl = document.getElementById( 'automations-search' );
+
+	if ( ! searchEl ) {
+		return;
+	}
+
+	const integrationEls = document.querySelectorAll(
+		'.simpay-form-builder-automator__integrations-integration'
+	);
+
+	searchEl.addEventListener( 'input', () => {
+		const search = searchEl.value.toLowerCase();
+
+		integrationEls.forEach( ( integrationEl ) => {
+			const fields = Object.values( integrationEl.dataset );
+
+			for ( let i = 0; i < fields.length; i++ ) {
+				const fieldValue = fields[ i ].toLowerCase();
+
+				if ( fieldValue.includes( search ) ) {
+					integrationEl.style.display = 'block';
+					return;
+				}
+
+				integrationEl.style.display = 'none';
+			}
+		} );
+
+		if ( '' === search ) {
+			integrationEls.forEach( ( integrationEl ) => {
+				if ( integrationEl.dataset.overflow === 'yes' ) {
+					integrationEl.style.display = 'none';
+				}
+			} );
+		}
+	} );
+} );

includes/core/assets/js/admin/payment-form/index.js

@@ -6,3 +6,4 @@ import './custom-fields.js';
 import './stripe-checkout.js';
 import './payment-page.js';
 import './purchase-restrictions.js';
+import './automations.js';

includes/core/assets/js/admin/payment-form/prices.js

@@ -265,14 +265,14 @@ function onToggleCanRecur( priceEl, checkbox ) {
  * Handles displaying the current price's custom amount settings.
  *
  * @param {HTMLElement} priceEl Price container element.
+ * @param {HTMLElement} checkbox Custom amount toggle element.
  */
-function onToggleCustomAmount( priceEl ) {
+function onToggleCustomAmount( priceEl, checkbox ) {
 	const customAmountSettings = priceEl.querySelector(
 		'.simpay-price-custom-amount'
 	);
 
-	customAmountSettings.style.display =
-		'none' === customAmountSettings.style.display ? 'block' : 'none';
+	customAmountSettings.style.display = checkbox.checked ? 'table' : 'none';
 }
 
 /**
@@ -610,8 +610,8 @@ function bindPriceOptions() {
 			'.simpay-price-enable-custom-amount'
 		);
 
-		customAmountToggle.addEventListener( 'click', () => {
-			onToggleCustomAmount( priceEl );
+		customAmountToggle.addEventListener( 'change', () => {
+			onToggleCustomAmount( priceEl, customAmountToggle );
 			onChangeLabel( priceEl );
 		} );
 

includes/core/assets/js/simpay-admin-page-setup-wizard.min.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-components', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => '9b527dabbf6325253c12ff2ddfdb65b3');
+<?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-components', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => '4aff03f69181385113accdc15b5e0c51');

includes/core/class-simplepay.php

@@ -217,6 +217,7 @@ public function load_admin() {
 		require_once( SIMPLE_PAY_INC . 'core/post-types/simple-pay/edit-form-custom-fields.php' );
 		require_once( SIMPLE_PAY_INC . 'core/post-types/simple-pay/edit-form-payment-page.php' );
 		require_once( SIMPLE_PAY_INC . 'core/post-types/simple-pay/edit-form-purchase-restrictions.php' );
+		require_once( SIMPLE_PAY_INC . 'core/post-types/simple-pay/edit-form-automations.php' );
 		require_once( SIMPLE_PAY_INC . 'core/post-types/simple-pay/actions.php' );
 
 		// Load core back-end only functions.

includes/core/functions/shared.php

@@ -1457,6 +1457,18 @@ function __unstable_simpay_get_payment_form_templates() {
 
 	$template_files = glob( SIMPLE_PAY_DIR . '/data/templates/*.json' );
 
+	/**
+	 * Filters the list of payment form templates.
+	 *
+	 * @since [--next--]
+	 *
+	 * @param array<string> $template_files List of template file paths.
+	 */
+	$template_files = apply_filters(
+		'__unstable__simpay_payment_form_templates',
+		$template_files
+	);
+
 	if ( false === $template_files ) {
 		return array();
 	}