Feature/use premium required modal from app component

src/components/App/App.component.js

@@ -9,6 +9,7 @@ import ChangePassword from '../Account/ChangePassword';
 import OAuthLogin from '../Account/OAuthLogin';
 import AuthScreen, { RedirectIfLogged } from '../AuthScreen';
 import BoardContainer from '../Board';
+import PremiumRequiredModal from '../PremiumFeature/PremiumRequiredModal';
 import Notifications from '../Notifications';
 import NotFound from '../NotFound';
 import Settings from '../Settings';
@@ -61,6 +62,7 @@ export class App extends Component {
         </Helmet>
 
         <Notifications />
+        <PremiumRequiredModal />
         <Switch>
           <RedirectIfLogged
             component={AuthScreen}

src/components/PremiumFeature/PremiumFeature.js

@@ -1,27 +1,19 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
-import PremiumRequiredModal from './PremiumRequiredModal';
+import { showPremiumRequired } from '../../providers/SubscriptionProvider/SubscriptionProvider.actions';
 
 function PremiumFeature(props) {
-  const [openModal, setOpenModal] = useState(false);
   const captured = event => {
     if (!props.isSubscribed) {
       event.stopPropagation();
-      setOpenModal(true);
+      props.showPremiumRequired();
     }
   };
 
   console.log(props.children);
   return (
     <>
       <div onClickCapture={captured}>{props.children}</div>
-      {openModal && (
-        <PremiumRequiredModal
-          onClose={() => {
-            setOpenModal(false);
-          }}
-        />
-      )}
     </>
   );
 }
@@ -30,7 +22,7 @@ const mapStateToProps = state => ({
   isSubscribed: state.subscription.isSubscribed
 });
 
-const mapDispatchToProps = {};
+const mapDispatchToProps = { showPremiumRequired };
 
 export default connect(
   mapStateToProps,

src/components/PremiumFeature/PremiumRequiredModal.js

@@ -1,4 +1,8 @@
 import React from 'react';
+import { connect } from 'react-redux';
+
+import { hidePremiumRequired } from './../../providers/SubscriptionProvider/SubscriptionProvider.actions';
+
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 
@@ -12,9 +16,14 @@ import messages from './PremiumFeature.messages';
 
 import style from './PremiumRequiredModal.module.css';
 
-export default function PremiumRequiredModal({ onClose, isTryPeriodFinished }) {
+function PremiumRequiredModal({
+  hidePremiumRequired,
+  premiumRequiredModalState
+}) {
+  const { open, showTryPeriodFinishedMessages } = premiumRequiredModalState;
+
   const dialogText = {
-    tittle: isTryPeriodFinished ? (
+    tittle: showTryPeriodFinishedMessages ? (
       <FormattedMessage {...messages.tryPeriodFinishTittle} />
     ) : (
       <FormattedMessage {...messages.featureBlockedTittle} />
@@ -24,8 +33,8 @@ export default function PremiumRequiredModal({ onClose, isTryPeriodFinished }) {
 
   return (
     <Dialog
-      open={true}
-      onClose={onClose}
+      open={open}
+      onClose={hidePremiumRequired}
       maxWidth="md"
       aria-labelledby="dialog"
     >
@@ -36,7 +45,7 @@ export default function PremiumRequiredModal({ onClose, isTryPeriodFinished }) {
           {dialogText.body}
         </Typography>
         <Button
-          onClick={onClose}
+          onClick={hidePremiumRequired}
           color="primary"
           variant="contained"
           size="large"
@@ -49,3 +58,16 @@ export default function PremiumRequiredModal({ onClose, isTryPeriodFinished }) {
     </Dialog>
   );
 }
+
+const mapStateToProps = ({ subscription: { premiumRequiredModalState } }) => ({
+  premiumRequiredModalState
+});
+
+const mapDispatchToProps = {
+  hidePremiumRequired
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PremiumRequiredModal);

src/providers/SubscriptionProvider/SubscriptionProvider.actions.js

@@ -4,6 +4,8 @@ import {
   UPDATE_IS_SUBSCRIBED,
   UPDATE_SUBSCRIPTION,
   UPDATE_SUBSCRIPTION_ERROR,
+  SHOW_PREMIUM_REQUIRED,
+  HIDE_PREMIUM_REQUIRED,
   IN_GRACE_PERIOD,
   NOT_SUBSCRIBED,
   CANCELED,
@@ -99,3 +101,18 @@ export function comprobeSubscription(payload) {
     }
   };
 }
+
+export function showPremiumRequired(
+  { showTryPeriodFinishedMessages } = { showTryPeriodFinishedMessages: false }
+) {
+  return {
+    type: SHOW_PREMIUM_REQUIRED,
+    showTryPeriodFinishedMessages
+  };
+}
+
+export function hidePremiumRequired() {
+  return {
+    type: HIDE_PREMIUM_REQUIRED
+  };
+}

src/providers/SubscriptionProvider/SubscriptionProvider.constants.js

@@ -5,6 +5,10 @@ export const UPDATE_IS_SUBSCRIBED = 'cboard/subscription/UPDATE_IS_SUBSCRIBED';
 export const UPDATE_SUBSCRIPTION = 'cboard/subscription/UPDATE_SUBSCRIPTION';
 export const UPDATE_SUBSCRIPTION_ERROR =
   'cboard/subscription/UPDATE_SUBSCRIPTION_ERROR';
+export const SHOW_PREMIUM_REQUIRED =
+  'cboard/subscription/SHOW_PREMIUM_REQUIRED';
+export const HIDE_PREMIUM_REQUIRED =
+  'cboard/subscription/HIDE_PREMIUM_REQUIRED';
 
 export const NOT_SUBSCRIBED = 'not_subscribed';
 export const PROCCESING = 'proccesing';

src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js

@@ -4,6 +4,8 @@ import {
   UPDATE_IS_SUBSCRIBED,
   UPDATE_SUBSCRIPTION,
   UPDATE_SUBSCRIPTION_ERROR,
+  SHOW_PREMIUM_REQUIRED,
+  HIDE_PREMIUM_REQUIRED,
   NOT_SUBSCRIBED
 } from './SubscriptionProvider.constants';
 import { LOGOUT } from '../../components/Account/Login/Login.constants';
@@ -17,6 +19,10 @@ const initialState = {
     isError: false,
     code: '',
     message: ''
+  },
+  premiumRequiredModalState: {
+    open: false,
+    showTryPeriodFinishedMessages: false
   }
 };
 
@@ -61,6 +67,22 @@ function subscriptionProviderReducer(state = initialState, action) {
       };
     case LOGOUT:
       return initialState;
+    case SHOW_PREMIUM_REQUIRED:
+      return {
+        ...state,
+        premiumRequiredModalState: {
+          open: true,
+          showTryPeriodFinishedMessages: action.showTryPeriodFinishedMessages
+        }
+      };
+    case HIDE_PREMIUM_REQUIRED:
+      return {
+        ...state,
+        premiumRequiredModalState: {
+          open: false,
+          showTryPeriodFinishedMessages: false
+        }
+      };
     default:
       return state;
   }