-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Odyssey: Add opt-out notice for odyssey (#72937)
* add NoticeBanner component * add opt out notice to traffice highlight section * dismiss opt out notice * merge same style * replace stats setting link with search stats term * changed key to has_opt_out_new_stats_notice * revert unnecessary change * notice id set to opt-out-new-stats * rename dismissJITMDirectCall to dismissJITMDirect * use isOdyssey to conditionally show notice * use an array for notices * add comment for doDismissJITMDirect
- Loading branch information
Showing
11 changed files
with
423 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
client/state/sites/selectors/has-opt-out-new-stats-notice.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import 'calypso/state/ui/init'; | ||
| import getRawSite from 'calypso/state/selectors/get-raw-site'; | ||
|
|
||
| /** | ||
| * Returns whether the opt-out notice should be shown. | ||
| * | ||
| * @param {Object} state Global state tree | ||
| * @param siteId The site ID. | ||
| * @returns {?boolean} hasOptOutNotice | ||
| */ | ||
| export default function hasOptOutNewStatsNotice( state, siteId ) { | ||
| if ( ! siteId ) { | ||
| return null; | ||
| } | ||
| const site = getRawSite( state, siteId ); | ||
|
|
||
| return site?.stats_notices?.opt_out_new_stats; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { Icon, warning, info, check, close } from '@wordpress/icons'; | ||
| import classNames from 'classnames'; | ||
| import React from 'react'; | ||
| import './style.scss'; | ||
|
|
||
| type NoticeBannerProps = { | ||
| /** The severity of the alert. */ | ||
| level: 'error' | 'warning' | 'info' | 'success'; | ||
|
|
||
| /** The title of the NoticeBanner */ | ||
| title: string; | ||
|
|
||
| /** A list of action elements to show across the bottom */ | ||
| actions?: React.ReactNode[]; | ||
|
|
||
| /** Hide close button */ | ||
| hideCloseButton?: boolean; | ||
|
|
||
| /** Method to call when the close button is clicked */ | ||
| onClose?: () => void; | ||
|
|
||
| /** Children to be rendered inside the alert. */ | ||
| children: React.ReactNode; | ||
| }; | ||
|
|
||
| const getIconByLevel = ( level: NoticeBannerProps[ 'level' ] ) => { | ||
| switch ( level ) { | ||
| case 'error': | ||
| return warning; | ||
| case 'warning': | ||
| return warning; | ||
| case 'info': | ||
| return info; | ||
| case 'success': | ||
| return check; | ||
| default: | ||
| return warning; | ||
| } | ||
| }; | ||
|
|
||
| /** | ||
| * NoticeBanner component | ||
| * | ||
| * @param {Object} props - The component properties. | ||
| * @param {string} props.level - The notice level: error, warning, info, success. | ||
| * @param {boolean} props.hideCloseButton - Whether to hide the close button. | ||
| * @param {Function} props.onClose - The function to call when the close button is clicked. | ||
| * @param {string} props.title - The title of the notice. | ||
| * @param {React.ReactNode[]} props.actions - Actions to show across the bottom of the bar. | ||
| * @param {React.Component} props.children - The notice content. | ||
| * @returns {React.ReactElement} The `NoticeBanner` component. | ||
| */ | ||
| const NoticeBanner: React.FC< NoticeBannerProps > = ( { | ||
| level, | ||
| title, | ||
| children, | ||
| actions, | ||
| hideCloseButton, | ||
| onClose, | ||
| } ) => { | ||
| const classes = classNames( 'notice-banner', `is-${ level }` ); | ||
|
|
||
| return ( | ||
| <div className={ classes }> | ||
| <div className="notice-banner__icon-wrapper"> | ||
| <Icon icon={ getIconByLevel( level ) } className="notice-banner__icon" /> | ||
| </div> | ||
|
|
||
| <div className="notice-banner__main-content"> | ||
| <div className="notice-banner__title">{ title }</div> | ||
| { children } | ||
|
|
||
| { actions && actions.length > 0 && ( | ||
| <div className="notice-banner__action-bar"> | ||
| { actions.map( ( action, index ) => ( | ||
| <div key={ index }>{ action }</div> | ||
| ) ) } | ||
| </div> | ||
| ) } | ||
| </div> | ||
|
|
||
| { ! hideCloseButton && ( | ||
| <button aria-label="close" className="notice-banner__close-button" onClick={ onClose }> | ||
| <Icon icon={ close } /> | ||
| </button> | ||
| ) } | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| NoticeBanner.defaultProps = { | ||
| level: 'info', | ||
| hideCloseButton: false, | ||
| }; | ||
|
|
||
| export default NoticeBanner; |
Oops, something went wrong.