Improve phrase to be allowed only by logged in users in free countries

src/components/Account/Login/Login.actions.js

@@ -10,7 +10,8 @@ import {
   disableTour,
   setUnloggedUserLocation,
   updateUnloggedUserLocation,
-  enableAllTours
+  enableAllTours,
+  updateNavigationSettings
 } from '../../App/App.actions';
 import { getVoiceURI } from '../../../i18n';
 import { isCordova, isElectron } from '../../../cordova-util';
@@ -48,6 +49,10 @@ export function logout() {
       console.error(err);
     }
   return async dispatch => {
+    dispatch(updateNavigationSettings({ improvePhraseActive: false }));
+    try {
+      await API.updateSettings({ navigation: { improvePhraseActive: false } });
+    } catch (e) {}
     dispatch(setUnloggedUserLocation(null));
     dispatch(updateUnloggedUserLocation());
     dispatch(logoutSuccess());

src/components/App/App.component.js

@@ -16,6 +16,7 @@ import Settings from '../Settings';
 import WelcomeScreen from '../WelcomeScreen';
 import Analytics from '../Analytics';
 import './App.css';
+import LoginRequiredModal from '../LoggedInFeature/LoginRequiredModal';
 
 export class App extends Component {
   static propTypes = {
@@ -90,6 +91,7 @@ export class App extends Component {
           <Route component={NotFound} />
         </Switch>
         <PremiumRequiredModal />
+        <LoginRequiredModal />
       </div>
     );
   }

src/components/LoggedInFeature/LoggedInFeature.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { isLogged } from '../App/App.selectors';
+import { showLoginRequired } from '../../providers/SubscriptionProvider/SubscriptionProvider.actions';
+
+function LoggedInFeature({
+  children,
+  isLogged,
+  isInFreeCountry,
+  showLoginRequired
+}) {
+  const captured = event => {
+    if (!isLogged && isInFreeCountry) {
+      event.stopPropagation();
+      event.preventDefault();
+      showLoginRequired();
+    }
+  };
+  return (
+    <>
+      <div onClickCapture={captured}>{children}</div>
+    </>
+  );
+}
+
+const mapStateToProps = state => ({
+  isLogged: isLogged(state),
+  isInFreeCountry: state.subscription.isInFreeCountry
+});
+
+const mapDispatchToProps = {
+  showLoginRequired
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(LoggedInFeature);

src/components/LoggedInFeature/LoginRequiredModal.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { hideLoginRequired } from '../../providers/SubscriptionProvider/SubscriptionProvider.actions';
+import { Dialog } from '@material-ui/core';
+import { Link } from 'react-router-dom';
+
+import Button from '@material-ui/core/Button';
+
+import WarningIcon from '@material-ui/icons/Warning';
+import DialogContent from '@material-ui/core/DialogContent';
+import { Typography } from '@material-ui/core';
+
+import messages from './LoginRequiredModal.messages';
+import { FormattedMessage } from 'react-intl';
+
+import style from './LoginRequiredModal.module.css';
+
+function LoginRequiredModal({ hideLoginRequired, loginRequiredModalState }) {
+  const { open } = loginRequiredModalState;
+
+  return (
+    <Dialog
+      open={open}
+      onClose={hideLoginRequired}
+      maxWidth="md"
+      aria-labelledby="dialog"
+    >
+      <DialogContent className={style.content}>
+        <WarningIcon fontSize="large" color="action" />
+        <Typography variant="h3">
+          <FormattedMessage {...messages.featureBlockedTitle} />
+        </Typography>
+        <Typography className={style.dialogText} variant="h6">
+          <FormattedMessage {...messages.featureBlockedText} />
+        </Typography>
+        <Button
+          onClick={hideLoginRequired}
+          color="primary"
+          variant="contained"
+          size="large"
+          component={Link}
+          to="/login-signup"
+        >
+          <FormattedMessage {...messages.loginSignupNow} />
+        </Button>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const mapStateToProps = ({ subscription: { loginRequiredModalState } }) => ({
+  loginRequiredModalState
+});
+
+const mapDispatchToProps = {
+  hideLoginRequired
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(LoginRequiredModal);

src/components/LoggedInFeature/LoginRequiredModal.messages.js

@@ -0,0 +1,17 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  featureBlockedTitle: {
+    id: 'cboard.components.LoginRequiredModal.featureBlockedTitle',
+    defaultMessage: 'This feature is blocked'
+  },
+  featureBlockedText: {
+    id: 'cboard.components.LoginRequiredModal.featureBlockedText',
+    defaultMessage:
+      'Cboard disabled this feature. To continue using it please sign up or login'
+  },
+  loginSignupNow: {
+    id: 'cboard.components.PremiumFeature.loginSignupNow',
+    defaultMessage: 'Login or Sign Up now'
+  }
+});

src/components/LoggedInFeature/LoginRequiredModal.module.css

@@ -0,0 +1,26 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin: 2em 3em;
+}
+
+.dialogText {
+  padding-bottom: 1em;
+}
+
+@media (max-width: 480px), (max-height: 400px) {
+  .content {
+    margin: 2em 1em;
+  }
+
+  .content h3 {
+    font-size: 2em;
+  }
+  .content h6 {
+    font-size: 1.2em;
+  }
+}

src/components/LoggedInFeature/index.js

@@ -0,0 +1 @@
+export { default } from './LoggedInFeature';

src/components/Settings/Navigation/Navigation.component.js

@@ -18,6 +18,7 @@ import { NAVIGATION_BUTTONS_STYLES } from './Navigation.constants';
 import './Navigation.css';
 import ResetToursItem from '../../UI/ResetToursItem';
 import PremiumFeature from '../../PremiumFeature';
+import LoggedInFeature from '../../LoggedInFeature';
 
 const propTypes = {
   /**
@@ -310,14 +311,16 @@ class Navigation extends React.Component {
                   }
                 />
                 <ListItemSecondaryAction>
-                  <PremiumFeature>
+                  <LoggedInFeature>
+                    {/* <PremiumFeature> */}
                     <Switch
                       checked={this.state.improvePhraseActive || false}
                       onChange={this.toggleImprovePhraseActive}
                       value="active"
                       color="secondary"
                     />
-                  </PremiumFeature>
+                    {/* </PremiumFeature> */}
+                  </LoggedInFeature>
                 </ListItemSecondaryAction>
               </ListItem>
             </List>

src/providers/SubscriptionProvider/SubscriptionProvider.actions.js

@@ -11,7 +11,9 @@ import {
   CANCELLED,
   IN_GRACE_PERIOD,
   EXPIRED,
-  PROCCESING
+  PROCCESING,
+  SHOW_LOGIN_REQUIRED,
+  HIDE_LOGIN_REQUIRED
 } from './SubscriptionProvider.constants';
 import API from '../../api';
 import { isLogged } from '../../components/App/App.selectors';
@@ -302,3 +304,15 @@ export function hidePremiumRequired() {
     type: HIDE_PREMIUM_REQUIRED
   };
 }
+
+export function showLoginRequired() {
+  return {
+    type: SHOW_LOGIN_REQUIRED
+  };
+}
+
+export function hideLoginRequired() {
+  return {
+    type: HIDE_LOGIN_REQUIRED
+  };
+}

src/providers/SubscriptionProvider/SubscriptionProvider.constants.js

@@ -6,6 +6,8 @@ export const SHOW_PREMIUM_REQUIRED =
   'cboard/subscription/SHOW_PREMIUM_REQUIRED';
 export const HIDE_PREMIUM_REQUIRED =
   'cboard/subscription/HIDE_PREMIUM_REQUIRED';
+export const SHOW_LOGIN_REQUIRED = 'cboard/subscription/SHOW_LOGIN_REQUIRED';
+export const HIDE_LOGIN_REQUIRED = 'cboard/subscription/HIDE_LOGIN_REQUIRED';
 
 export const NOT_SUBSCRIBED = 'not_subscribed';
 export const PROCCESING = 'proccesing';

src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js

@@ -4,7 +4,9 @@ import {
   UPDATE_SUBSCRIPTION_ERROR,
   SHOW_PREMIUM_REQUIRED,
   HIDE_PREMIUM_REQUIRED,
-  NOT_SUBSCRIBED
+  NOT_SUBSCRIBED,
+  SHOW_LOGIN_REQUIRED,
+  HIDE_LOGIN_REQUIRED
 } from './SubscriptionProvider.constants';
 import {
   LOGOUT,
@@ -27,6 +29,9 @@ const initialState = {
     open: false,
     showTryPeriodFinishedMessages: false
   },
+  loginRequiredModalState: {
+    open: false
+  },
   ownedProduct: '',
   products: [
     {
@@ -96,6 +101,21 @@ function subscriptionProviderReducer(state = initialState, action) {
             state.premiumRequiredModalState.showTryPeriodFinishedMessages
         }
       };
+
+    case SHOW_LOGIN_REQUIRED:
+      return {
+        ...state,
+        loginRequiredModalState: {
+          open: true
+        }
+      };
+    case HIDE_LOGIN_REQUIRED:
+      return {
+        ...state,
+        loginRequiredModalState: {
+          open: false
+        }
+      };
     default:
       return state;
   }