Merge pull request #2871 from Sidsector9/issue-2853

fix(notice): add ability to dismiss Give notices on front-end. #2853

assets/js/frontend/give.js

@@ -77,7 +77,7 @@ jQuery( function( $ ) {
 	} );
 
 	// Auto hide frontend notices.
-	var give_notices = jQuery( '.give_notice[data-dismissible="auto"]' );
+	var give_notices = jQuery( '.give_notice[data-dismiss-type="auto"]' );
 	if ( give_notices.length ) {
 		give_notices.each( function( index, $notice ) {
 			$notice = $( $notice );
@@ -92,6 +92,14 @@ jQuery( function( $ ) {
 		} );
 	}
 
+	// Button to close notices on front-end.
+	const give_notice_close = jQuery( '.give-notice-close' );
+	give_notice_close.on( 'click', function() {
+		$(this).hide();
+		const notice_container = $(this).closest( '.give_notices' );
+		notice_container.slideUp();
+	});
+
 	doc.on( 'change', '#give_profile_billing_address_wrap #give_address_country', update_profile_state_field );
 
 	// Reset Form Fields on clicking back button of browser.

assets/scss/frontend/alerts.scss

@@ -1,6 +1,45 @@
 /*---------------------------------
 Notices, Warnings & Errors
 -----------------------------------*/
+.give_notices {
+  position: relative;
+}
+
+.notice-dismiss {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate(0, -50%);
+  border: none;
+  margin: 0;
+  padding: 5px;
+  background: 0 0;
+  color: #72777c;
+  cursor: pointer;
+  max-width: 28px;
+
+  &:before {
+    background: 0 0;
+    color: #72777c;
+    content: "\f153";
+    display: block;
+    font: 400 16px/20px dashicons;
+    speak: none;
+    height: 20px;
+    text-align: center;
+    width: 20px;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0);
+
+    &:before {
+      color: #dc3232;
+    }
+  }
+}
+
 .give_error, .give_success {
   position: relative;
   margin: 15px 0;

includes/class-notices.php

@@ -606,30 +606,46 @@ public static function print_frontend_notice( $message, $echo = true, $notice_ty
 		 * @since 1.8.14
 		 */
 		$default_notice_args = array(
-			'dismissible'      => true,
+			'dismissible'      => false,
+			'dismiss_type'     => 'auto',
 			'dismiss_interval' => 5000,
 		);
 
 		$notice_args = wp_parse_args( $notice_args, $default_notice_args );
 
+		// Notice dismissible must be true for dismiss type.
+		$notice_args['dismiss_type'] = ! $notice_args['dismissible'] ? '' : $notice_args['dismiss_type'];
+
 		/**
 		 * Filter to modify Frontend notice args before notices is display.
 		 *
 		 * @since 1.8.14
 		 */
 		$notice_args = apply_filters( 'give_frontend_notice_args', $notice_args );
 
+		$close_icon = 'manual' === $notice_args['dismiss_type'] ?
+			sprintf(
+				'<img class="notice-dismiss give-notice-close" src="%s" />',
+				esc_url( GIVE_PLUGIN_URL . 'assets/images/svg/close.svg' )
+
+			) :
+			'';
+
 		// Note: we will remove give_errors class in future.
 		$error = sprintf(
 			'<div class="give_notices give_errors" id="give_error_%1$s">
-				<p class="give_error give_notice give_%1$s" data-dismissible="%2$s" data-dismiss-interval="%3$d">
-					%4$s
-				</p>
-			</div>',
+						<p class="give_error give_notice give_%1$s" data-dismissible="%2$s" data-dismiss-interval="%3$d" data-dismiss-type="%4$s">
+							%5$s
+						</p>
+						%6$s
+					</div>',
 			$notice_type,
 			give_clean( $notice_args['dismissible'] ),
 			absint( $notice_args['dismiss_interval'] ),
-			$message
+			give_clean( $notice_args['dismiss_type'] ),
+			$message,
+			$close_icon
+
 		);
 
 		if ( ! $echo ) {

templates/give-rtl.css

@@ -1639,6 +1639,37 @@ Form validation style
 /*---------------------------------
 Notices, Warnings & Errors
 -----------------------------------*/
+.give_notices {
+  position: relative; }
+
+.notice-dismiss {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+  border: none;
+  margin: 0;
+  padding: 5px;
+  background: 100% 0;
+  color: #72777c;
+  cursor: pointer;
+  max-width: 28px; }
+  .notice-dismiss:before {
+    background: 100% 0;
+    color: #72777c;
+    content: "\f153";
+    display: block;
+    font: 400 16px/20px dashicons;
+    speak: none;
+    height: 20px;
+    text-align: center;
+    width: 20px;
+    -webkit-font-smoothing: antialiased; }
+  .notice-dismiss:hover {
+    background-color: transparent; }
+    .notice-dismiss:hover:before {
+      color: #dc3232; }
+
 .give_error, .give_success {
   position: relative;
   margin: 15px 0;