diff --git a/src/components/ContainerComponents/CozyBar/CozyBar.tsx b/src/components/ContainerComponents/CozyBar/CozyBar.tsx index c9232c0a656f3426593ade9b678e124738fccd3a..0a455f242226abb7fd038f2bb3a2dd014c47d0e0 100644 --- a/src/components/ContainerComponents/CozyBar/CozyBar.tsx +++ b/src/components/ContainerComponents/CozyBar/CozyBar.tsx @@ -19,12 +19,16 @@ const CozyBar = ({ t, }: CozyBarProps) => { const { BarLeft, BarCenter, BarRight } = cozy.bar - const { screenType } = useContext(AppContext) + const { screenType, setFeedbacksOpened } = useContext(AppContext) const handleClickBack = () => { history.goBack() } + const handleClickFeedbacks = () => { + setFeedbacksOpened(true) + } + const cozyBarCustom = (screen?: ScreenType) => { if (screen === ScreenType.MOBILE) { return ( @@ -48,7 +52,7 @@ const CozyBar = ({ className="cv-button" icon={FeedbacksIcon} size={40} - onClick={() => handleClickBack()} + onClick={() => handleClickFeedbacks()} /> </BarRight> </React.Fragment> diff --git a/src/components/ContainerComponents/Feedbacks/Feedbacks.tsx b/src/components/ContainerComponents/Feedbacks/Feedbacks.tsx new file mode 100644 index 0000000000000000000000000000000000000000..83075762f87ada9e10768871a3a1d422438e125e --- /dev/null +++ b/src/components/ContainerComponents/Feedbacks/Feedbacks.tsx @@ -0,0 +1,20 @@ +import React, { useContext } from 'react' +import { AppContext } from 'components/Contexts/AppContextProvider' +import FeedbacksModal from 'components/ContentComponents/FeedbacksModal/FeedbacksModal' + +const Feedbacks: React.FC = () => { + const { feedbacksIsOpened, setFeedbacksOpened } = useContext(AppContext) + + const handleCloseClick = () => { + setFeedbacksOpened(false) + } + + return ( + <FeedbacksModal + opened={feedbacksIsOpened} + handleCloseClick={handleCloseClick} + /> + ) +} + +export default Feedbacks diff --git a/src/components/ContainerComponents/Header/Header.tsx b/src/components/ContainerComponents/Header/Header.tsx index cad87eb1667138c74b278ea52230cd19ebd6f8d9..5d342bd660774133c2903e7a3a21fdbf17e04168 100644 --- a/src/components/ContainerComponents/Header/Header.tsx +++ b/src/components/ContainerComponents/Header/Header.tsx @@ -28,7 +28,7 @@ const Header: React.FC<HeaderProps> = ({ t, }: HeaderProps) => { const header = useRef(null) - const { screenType } = useContext(AppContext) + const { screenType, setFeedbacksOpened } = useContext(AppContext) const cozyBarHeight = 48 const headerBottomHeight = 8 @@ -36,6 +36,10 @@ const Header: React.FC<HeaderProps> = ({ history.goBack() } + const handleClickFeedbacks = () => { + setFeedbacksOpened(true) + } + useEffect(() => { if (screenType === ScreenType.MOBILE) { setHeaderHeight( @@ -88,7 +92,7 @@ const Header: React.FC<HeaderProps> = ({ className="header-feedbacks-button" icon={FeedbacksIcon} size={40} - onClick={() => handleClickBack()} + onClick={() => handleClickFeedbacks()} /> </div> {children} diff --git a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx index 500f05b0f2d9cb9c7d0e884b581581da88bd7002..9f0704db974ee13b09aa07ebf31bc8e5d2fb98ec 100644 --- a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx +++ b/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx @@ -19,6 +19,7 @@ import LockedChallengeDetailsViewContainer from './LockedChallengeDetailsViewCon import AvailableChallengeDetailsViewContainer from './AvailableChallengeDetailsViewContainer' import SplashContainer from 'components/ContainerComponents/SplashContainer/SplashContainer' import LegalNoticeViewContainer from './LegalNoticeViewContainer' +import Feedbacks from 'components/ContainerComponents/Feedbacks/Feedbacks' export const history = createBrowserHistory() @@ -29,6 +30,7 @@ export const ViewContainer = () => { <AppContextProvider> <Navbar /> <Main> + <Feedbacks /> <Content className="app-content"> <ScrollToTop> <Switch> diff --git a/src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx b/src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx new file mode 100644 index 0000000000000000000000000000000000000000..46bc1c2a66ff4651cc8a9247860f11bd64f2dc46 --- /dev/null +++ b/src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { translate } from 'cozy-ui/react/I18n' +import Modal from 'components/CommonKit/Modal/Modal' + +interface FeedbacksModalProps { + opened: boolean + t: Function + handleCloseClick: () => void +} + +const FeedbacksModal: React.FC<FeedbacksModalProps> = ({ + opened, + t, + handleCloseClick, +}: FeedbacksModalProps) => { + return ( + <Modal open={opened} handleCloseClick={handleCloseClick}> + <div>TEST</div> + </Modal> + ) +} + +export default translate()(FeedbacksModal) diff --git a/src/components/Contexts/AppContextProvider.tsx b/src/components/Contexts/AppContextProvider.tsx index 55efeda0ccf15c9ce2c9880d45aa3bf904a84ba7..45ea66fca259a836b1dd2cf6530c25b24bbec5fd 100644 --- a/src/components/Contexts/AppContextProvider.tsx +++ b/src/components/Contexts/AppContextProvider.tsx @@ -31,6 +31,8 @@ interface AppContextProps { setWelcomeModalViewed: Function chartIsLoaded: boolean setChartIsLoaded: Function + feedbacksIsOpened: boolean + setFeedbacksOpened: Function } export const AppContext = React.createContext<AppContextProps>({ @@ -56,6 +58,8 @@ export const AppContext = React.createContext<AppContextProps>({ setWelcomeModalViewed: () => null, chartIsLoaded: false, setChartIsLoaded: () => null, + feedbacksIsOpened: false, + setFeedbacksOpened: () => null, }) interface AppContextProviderProps { @@ -68,6 +72,7 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({ client, }: AppContextProviderProps) => { const [chartIsLoaded, setChartIsLoaded] = useState<boolean>(false) + const [feedbacksIsOpened, setFeedbacksOpened] = useState<boolean>(false) const [isIndexesLoading, setIndexesLoading] = useState<boolean>(false) const [isIndexesLoadingSuccess, setIndexesLoadingSuccess] = useState< boolean | null @@ -325,6 +330,8 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({ setWelcomeModalViewed, setChartIsLoaded, chartIsLoaded, + feedbacksIsOpened, + setFeedbacksOpened, }} > {children}