InlineTip: Don't show confirmation if a tip has already been dismissed

docs/designers-developers/developers/data/data-core-nux.md

@@ -32,6 +32,18 @@ _Returns_
 
 -   `?NUX.GuideInfo`: Information about the associated guide.
 
+<a name="hasDismissedAnyTips" href="#hasDismissedAnyTips">#</a> **hasDismissedAnyTips**
+
+Returns whether or not any tips have been dismissed.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: Whether any tips have been dismissed.
+
 <a name="isTipVisible" href="#isTipVisible">#</a> **isTipVisible**
 
 Determines whether or not the given tip is showing. Tips are hidden if they

packages/nux/src/components/inline-tip/index.js

@@ -15,21 +15,31 @@ import { __ } from '@wordpress/i18n';
 export function InlineTip( {
 	children,
 	className,
+	hasDismissedAnyTips,
 	isTipVisible,
 	onDisableTips,
 	onDismissTip,
 } ) {
 	const [ isConfirmationVisible, setIsConfirmationVisible ] = useState( false );
 
-	const openConfirmation = () => setIsConfirmationVisible( true );
-	const closeConfirmation = () => setIsConfirmationVisible( false );
+	const dismissNotice = () => {
+		if ( hasDismissedAnyTips ) {
+			onDismissTip();
+		} else {
+			setIsConfirmationVisible( true );
+		}
+	};
+
+	const closeConfirmation = () => {
+		setIsConfirmationVisible( false );
+	};
 
-	const dismissTip = () => {
+	const dismissConfirmation = () => {
 		onDismissTip();
 		closeConfirmation();
 	};
 
-	const disableTips = () => {
+	const acceptConfirmation = () => {
 		onDisableTips();
 		closeConfirmation();
 	};
@@ -39,7 +49,7 @@ export function InlineTip( {
 			{ isTipVisible && (
 				<Notice
 					className={ classnames( 'nux-inline-tip', className ) }
-					onRemove={ openConfirmation }
+					onRemove={ dismissNotice }
 				>
 					{ children }
 				</Notice>
@@ -53,10 +63,10 @@ export function InlineTip( {
 				>
 					{ __( 'Would you like to disable tips like these in the future?' ) }
 					<div className="nux-hide-tips-confirmation__buttons">
-						<Button isDefault isLarge onClick={ dismissTip }>
+						<Button isDefault isLarge onClick={ dismissConfirmation }>
 							{ __( 'No' ) }
 						</Button>
-						<Button isPrimary isLarge onClick={ disableTips }>
+						<Button isPrimary isLarge onClick={ acceptConfirmation }>
 							{ __( 'Disable Tips' ) }
 						</Button>
 					</div>
@@ -67,9 +77,13 @@ export function InlineTip( {
 }
 
 export default compose(
-	withSelect( ( select, { tipId } ) => ( {
-		isTipVisible: select( 'core/nux' ).isTipVisible( tipId ),
-	} ) ),
+	withSelect( ( select, { tipId } ) => {
+		const { isTipVisible, hasDismissedAnyTips } = select( 'core/nux' );
+		return {
+			isTipVisible: isTipVisible( tipId ),
+			hasDismissedAnyTips: hasDismissedAnyTips(),
+		};
+	} ),
 	withDispatch( ( dispatch, { tipId } ) => {
 		const { disableTips, dismissTip } = dispatch( 'core/nux' );
 		return {

packages/nux/src/components/inline-tip/test/index.js

@@ -11,7 +11,7 @@ import { InlineTip } from '../';
 describe( 'InlineTip', () => {
 	it( 'should not render anything if invisible', () => {
 		const wrapper = shallow(
-			<InlineTip isTipVisible={ false }>
+			<InlineTip isTipVisible={ false } hasDismissedAnyTips={ false }>
 				It looks like you’re writing a letter. Would you like help?
 			</InlineTip>
 		);
@@ -20,17 +20,28 @@ describe( 'InlineTip', () => {
 
 	it( 'should render correctly', () => {
 		const wrapper = shallow(
-			<InlineTip isTipVisible>
+			<InlineTip isTipVisible hasDismissedAnyTips={ false }>
 				It looks like you’re writing a letter. Would you like help?
 			</InlineTip>
 		);
 		expect( wrapper ).toMatchSnapshot();
 	} );
 
+	it( 'calls `onDismissTip` when the tip is dismissed and a tip has already been dismissed', () => {
+		const onDismissTip = jest.fn();
+		const wrapper = mount(
+			<InlineTip isTipVisible onDismissTip={ onDismissTip } hasDismissedAnyTips>
+				It looks like you’re writing a letter. Would you like help?
+			</InlineTip>
+		);
+		wrapper.find( 'button[aria-label="Dismiss this notice"]' ).simulate( 'click' );
+		expect( onDismissTip ).toHaveBeenCalled();
+	} );
+
 	it( 'calls `onDismissTip` when the tip and confirmation are dismissed', () => {
 		const onDismissTip = jest.fn();
 		const wrapper = mount(
-			<InlineTip isTipVisible onDismissTip={ onDismissTip }>
+			<InlineTip isTipVisible onDismissTip={ onDismissTip } hasDismissedAnyTips={ false }>
 				It looks like you’re writing a letter. Would you like help?
 			</InlineTip>
 		);
@@ -42,7 +53,7 @@ describe( 'InlineTip', () => {
 	it( 'calls `onDisableTips` when the tip is dismissed and the confirmation is accepted', () => {
 		const onDisableTips = jest.fn();
 		const wrapper = mount(
-			<InlineTip isTipVisible onDisableTips={ onDisableTips }>
+			<InlineTip isTipVisible onDisableTips={ onDisableTips } hasDismissedAnyTips={ false }>
 				It looks like you’re writing a letter. Would you like help?
 			</InlineTip>
 		);

packages/nux/src/store/selectors.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import createSelector from 'rememo';
-import { includes, difference, keys, has } from 'lodash';
+import { includes, difference, keys, has, isEmpty } from 'lodash';
 
 /**
  * An object containing information about a guide.
@@ -77,3 +77,14 @@ export function isTipVisible( state, tipId ) {
 export function areTipsEnabled( state ) {
 	return state.preferences.areTipsEnabled;
 }
+
+/**
+ * Returns whether or not any tips have been dismissed.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether any tips have been dismissed.
+ */
+export function hasDismissedAnyTips( state ) {
+	return ! isEmpty( state.preferences.dismissedTips );
+}

packages/nux/src/store/test/selectors.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { getAssociatedGuide, isTipVisible, areTipsEnabled } from '../selectors';
+import { getAssociatedGuide, isTipVisible, areTipsEnabled, hasDismissedAnyTips } from '../selectors';
 
 describe( 'selectors', () => {
 	describe( 'getAssociatedGuide', () => {
@@ -145,4 +145,28 @@ describe( 'selectors', () => {
 			expect( areTipsEnabled( state ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'hasDismissedAnyTips', () => {
+		it( 'should return true if a tip has been dismissed', () => {
+			const state = {
+				guides: [],
+				preferences: {
+					dismissedTips: {
+						'test/tip': true,
+					},
+				},
+			};
+			expect( hasDismissedAnyTips( state ) ).toBe( true );
+		} );
+
+		it( 'should return false if tips are disabled', () => {
+			const state = {
+				guides: [],
+				preferences: {
+					dismissedTips: {},
+				},
+			};
+			expect( hasDismissedAnyTips( state ) ).toBe( false );
+		} );
+	} );
 } );