-
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.
Stats: Add new floating feedback panel (#94129)
* Add FeedbackPanel component * Extract content UI to new component * Reconnect button handler * Fix typo * Add shared content to floating panel * Add shared interface for props * Remove logging * Move modal component up a level * Factor out the card from the wrapper * Rename top-level component * Support feedback actions per button * Update card-specific styles * Add panel-specific styles * Refactor shared styles * Add close button to panel * Add styles for close button * Wire up the close button * Add state for panel visibility * Moving code around * Fix panel positioning * Update client/my-sites/stats/feedback/style.scss Co-authored-by: Dognose <[email protected]> * Update client/my-sites/stats/feedback/style.scss Co-authored-by: Dognose <[email protected]> * Update client/my-sites/stats/feedback/style.scss Co-authored-by: Dognose <[email protected]> * Update client/my-sites/stats/feedback/style.scss Co-authored-by: Dognose <[email protected]> * Update client/my-sites/stats/feedback/style.scss Co-authored-by: Dognose <[email protected]> * Update client/my-sites/stats/feedback/style.scss Co-authored-by: Dognose <[email protected]> * Update client/my-sites/stats/feedback/style.scss Co-authored-by: Dognose <[email protected]> * Apply suggestions from code review Co-authored-by: Dognose <[email protected]> * formatting * minor margin adjustment --------- Co-authored-by: Jasper Kang <[email protected]> Co-authored-by: Dognose <[email protected]>
- Loading branch information
3 people
authored
Sep 3, 2024
1 parent
341ba1a
commit 49c2e2e
Showing
3 changed files
with
164 additions
and
55 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,108 @@ | ||
| import { Button } from '@wordpress/components'; | ||
| import { close } from '@wordpress/icons'; | ||
| import { useTranslate } from 'i18n-calypso'; | ||
| import { useState } from 'react'; | ||
| import FeedbackModal from './modal'; | ||
|
|
||
| import './style.scss'; | ||
|
|
||
| function StatsFeedbackCard() { | ||
| const FEEDBACK_ACTION_LEAVE_REVIEW = 'feedback-action-leave-review'; | ||
| const FEEDBACK_ACTION_SEND_FEEDBACK = 'feedback-action-send-feedback'; | ||
| const FEEDBACK_ACTION_DISMISS_FLOATING_PANEL = 'feedback-action-dismiss-floating-panel'; | ||
|
|
||
| interface FeedbackProps { | ||
| clickHandler: ( action: string ) => void; | ||
| } | ||
|
|
||
| interface FeedbackPanelProps { | ||
| clickHandler: ( action: string ) => void; | ||
| isOpen: boolean; | ||
| } | ||
|
|
||
| function FeedbackContent( { clickHandler }: FeedbackProps ) { | ||
| const translate = useTranslate(); | ||
| const [ isOpen, setIsOpen ] = useState( false ); | ||
|
|
||
| const ctaText = translate( 'How do you rate your overall experience with Jetpack Stats?' ); | ||
| const primaryButtonText = translate( 'Love it? Leave a review' ); | ||
| const secondaryButtonText = translate( 'Not a fan? Help us improve' ); | ||
|
|
||
| const handleClickWriteReview = () => {}; | ||
| const handleLeaveReview = () => { | ||
| clickHandler( FEEDBACK_ACTION_LEAVE_REVIEW ); | ||
| }; | ||
|
|
||
| const handleClickSendFeedback = () => { | ||
| setIsOpen( true ); | ||
| const handleSendFeedback = () => { | ||
| clickHandler( FEEDBACK_ACTION_SEND_FEEDBACK ); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="stats-feedback-container"> | ||
| <div className="stats-feedback-card"> | ||
| <div className="stats-feedback-card__cta">{ ctaText }</div> | ||
| <div className="stats-feedback-card__actions"> | ||
| <Button variant="secondary" onClick={ handleClickWriteReview }> | ||
| <span className="stats-feedback-card__emoji">😍</span> | ||
| { primaryButtonText } | ||
| </Button> | ||
| <Button variant="secondary" onClick={ handleClickSendFeedback }> | ||
| <span className="stats-feedback-card__emoji">😠</span> | ||
| { secondaryButtonText } | ||
| </Button> | ||
| </div> | ||
| <FeedbackModal isOpen={ isOpen } onClose={ () => setIsOpen( false ) } /> | ||
| <div className="stats-feedback-content"> | ||
| <div className="stats-feedback-content__cta">{ ctaText }</div> | ||
| <div className="stats-feedback-content__actions"> | ||
| <Button variant="secondary" onClick={ handleLeaveReview }> | ||
| <span className="stats-feedback-content__emoji">😍</span> | ||
| { primaryButtonText } | ||
| </Button> | ||
| <Button variant="secondary" onClick={ handleSendFeedback }> | ||
| <span className="stats-feedback-content__emoji">😠</span> | ||
| { secondaryButtonText } | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default StatsFeedbackCard; | ||
| function FeedbackPanel( { isOpen, clickHandler }: FeedbackPanelProps ) { | ||
| const translate = useTranslate(); | ||
|
|
||
| const handleCloseButtonClicked = () => { | ||
| clickHandler( FEEDBACK_ACTION_DISMISS_FLOATING_PANEL ); | ||
| }; | ||
|
|
||
| if ( ! isOpen ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="stats-feedback-panel"> | ||
| <Button | ||
| className="stats-feedback-panel__close-button" | ||
| onClick={ handleCloseButtonClicked } | ||
| icon={ close } | ||
| label={ translate( 'Close' ) } | ||
| /> | ||
| <FeedbackContent clickHandler={ clickHandler } /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function FeedbackCard( { clickHandler }: FeedbackProps ) { | ||
| return ( | ||
| <div className="stats-feedback-card"> | ||
| <FeedbackContent clickHandler={ clickHandler } /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function StatsFeedbackController() { | ||
| const [ isOpen, setIsOpen ] = useState( false ); | ||
| const [ isFloatingPanelOpen, setIsFloatingPanelOpen ] = useState( true ); | ||
|
|
||
| const handleButtonClick = ( action: string ) => { | ||
| if ( action === FEEDBACK_ACTION_SEND_FEEDBACK ) { | ||
| setIsOpen( true ); | ||
| } | ||
| if ( action === FEEDBACK_ACTION_DISMISS_FLOATING_PANEL ) { | ||
| setIsFloatingPanelOpen( false ); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="stats-feedback-container"> | ||
| <FeedbackCard clickHandler={ handleButtonClick } /> | ||
| <FeedbackPanel isOpen={ isFloatingPanelOpen } clickHandler={ handleButtonClick } /> | ||
| <FeedbackModal isOpen={ isOpen } onClose={ () => setIsOpen( false ) } /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default StatsFeedbackController; |
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