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;
  }