Feature/capture premium features

src/components/Analytics/Analytics.container.js

@@ -11,6 +11,7 @@ import { showNotification } from '../Notifications/Notifications.actions';
 import API from '../../api';
 import messages from './Analytics.messages';
 import { isCordova } from '../../cordova-util';
+import PremiumFeature from '../PremiumFeature';
 
 export class AnalyticsContainer extends Component {
   static propTypes = {
@@ -405,17 +406,19 @@ export class AnalyticsContainer extends Component {
 
   render() {
     return (
-      <AnalyticsComponent
-        onDaysChange={this.onDaysChange}
-        symbolSources={this.getSymbolSources()}
-        days={this.state.days}
-        totals={this.state.totals}
-        categoryTotals={this.state.categoryTotals}
-        usage={this.state.usage}
-        topUsed={this.state.topUsed}
-        isFetching={this.state.isFetching}
-        {...this.props}
-      />
+      <PremiumFeature>
+        <AnalyticsComponent
+          onDaysChange={this.onDaysChange}
+          symbolSources={this.getSymbolSources()}
+          days={this.state.days}
+          totals={this.state.totals}
+          categoryTotals={this.state.categoryTotals}
+          usage={this.state.usage}
+          topUsed={this.state.topUsed}
+          isFetching={this.state.isFetching}
+          {...this.props}
+        />
+      </PremiumFeature>
     );
   }
 }

src/components/App/App.component.js

@@ -62,7 +62,6 @@ export class App extends Component {
         </Helmet>
 
         <Notifications />
-        <PremiumRequiredModal />
         <Switch>
           <RedirectIfLogged
             component={AuthScreen}
@@ -90,6 +89,7 @@ export class App extends Component {
           />
           <Route component={NotFound} />
         </Switch>
+        <PremiumRequiredModal />
       </div>
     );
   }

src/components/Board/Board.container.js

@@ -66,6 +66,7 @@ import {
 import { NOTIFICATION_DELAY } from '../Notifications/Notifications.constants';
 import { EMPTY_VOICES } from '../../providers/SpeechProvider/SpeechProvider.constants';
 import { DEFAULT_ROWS_NUMBER, DEFAULT_COLUMNS_NUMBER } from './Board.constants';
+import PremiumFeature from '../PremiumFeature';
 //import { isAndroid } from '../../cordova-util';
 
 const Transition = React.forwardRef(function Transition(props, ref) {
@@ -1525,7 +1526,12 @@ export class BoardContainer extends Component {
   };
 
   render() {
-    const { navHistory, board, focusTile } = this.props;
+    const {
+      navHistory,
+      board,
+      focusTile,
+      isPremiumRequiredModalOpen
+    } = this.props;
 
     if (!this.state.translatedBoard) {
       return (
@@ -1600,7 +1606,7 @@ export class BoardContainer extends Component {
           changeDefaultBoard={this.props.changeDefaultBoard}
         />
         <Dialog
-          open={!!this.state.copyPublicBoard}
+          open={!!this.state.copyPublicBoard && !isPremiumRequiredModalOpen}
           TransitionComponent={Transition}
           keepMounted
           onClose={this.handleCloseDialog}
@@ -1619,13 +1625,15 @@ export class BoardContainer extends Component {
             <Button onClick={this.handleCloseDialog} color="primary">
               {this.props.intl.formatMessage(messages.boardCopyCancel)}
             </Button>
-            <Button
-              onClick={this.handleCopyRemoteBoard}
-              color="primary"
-              variant="contained"
-            >
-              {this.props.intl.formatMessage(messages.boardCopyAccept)}
-            </Button>
+            <PremiumFeature>
+              <Button
+                onClick={this.handleCopyRemoteBoard}
+                color="primary"
+                variant="contained"
+              >
+                {this.props.intl.formatMessage(messages.boardCopyAccept)}
+              </Button>
+            </PremiumFeature>
           </DialogActions>
         </Dialog>
         <Dialog
@@ -1680,7 +1688,8 @@ const mapStateToProps = ({
   speech,
   scanner,
   app: { displaySettings, navigationSettings, userData, isConnected, liveHelp },
-  language: { lang }
+  language: { lang },
+  subscription: { premiumRequiredModalState }
 }) => {
   const activeCommunicatorId = communicator.activeCommunicatorId;
   const currentCommunicator = communicator.communicators.find(
@@ -1707,7 +1716,8 @@ const mapStateToProps = ({
     lang,
     offlineVoiceAlert,
     isRootBoardTourEnabled: liveHelp.isRootBoardTourEnabled,
-    isUnlockedTourEnabled: liveHelp.isUnlockedTourEnabled
+    isUnlockedTourEnabled: liveHelp.isUnlockedTourEnabled,
+    isPremiumRequiredModalOpen: premiumRequiredModalState?.open
   };
 };
 

src/components/Board/BoardShare/BoardShare.component.js

@@ -28,6 +28,7 @@ import messages from './BoardShare.messages';
 
 import './BoardShare.css';
 import { isAndroid } from '../../../cordova-util';
+import PremiumFeature from '../../PremiumFeature';
 
 function shareBoardOnFacebook(url, intl) {
   const shareData = {
@@ -105,17 +106,19 @@ const BoardShare = ({
       <DialogContent className="ShareDialog__content">
         <div className="ShareDialog__content__publish">
           {isLogged ? (
-            <Button
-              color="primary"
-              variant={isPublic ? 'outlined' : 'contained'}
-              onClick={publishBoard}
-            >
-              {!isPublic ? (
-                <FormattedMessage {...messages.publishBoard} />
-              ) : (
-                <FormattedMessage {...messages.unpublishBoard} />
-              )}
-            </Button>
+            <PremiumFeature>
+              <Button
+                color="primary"
+                variant={isPublic ? 'outlined' : 'contained'}
+                onClick={publishBoard}
+              >
+                {!isPublic ? (
+                  <FormattedMessage {...messages.publishBoard} />
+                ) : (
+                  <FormattedMessage {...messages.unpublishBoard} />
+                )}
+              </Button>
+            </PremiumFeature>
           ) : (
             <React.Fragment>
               <Alert severity="warning">
@@ -134,75 +137,77 @@ const BoardShare = ({
         </div>
         {isLogged && (
           <div className="ShareDialog__socialIcons">
-            <Button disabled={!isPublic} onClick={onCopyLink} color="primary">
-              <div className="ShareDialog__socialIcons__copyAction">
-                <div>
-                  <CopyIcon />
+            <PremiumFeature>
+              <Button disabled={!isPublic} onClick={onCopyLink} color="primary">
+                <div className="ShareDialog__socialIcons__copyAction">
+                  <div>
+                    <CopyIcon />
+                  </div>
+                  <FormattedMessage {...messages.copyLink} />
                 </div>
-                <FormattedMessage {...messages.copyLink} />
-              </div>
-            </Button>
-            <Button disabled={!isPublic}>
-              <EmailShareButton
-                subject={intl.formatMessage(messages.subject)}
-                body={intl.formatMessage(messages.body, { url: url })}
-                url={url}
-              >
-                <EmailIcon round />
-                <FormattedMessage id="email" {...messages.email} />
-              </EmailShareButton>
-            </Button>
+              </Button>
+              <Button disabled={!isPublic}>
+                <EmailShareButton
+                  subject={intl.formatMessage(messages.subject)}
+                  body={intl.formatMessage(messages.body, { url: url })}
+                  url={url}
+                >
+                  <EmailIcon round />
+                  <FormattedMessage id="email" {...messages.email} />
+                </EmailShareButton>
+              </Button>
+
+              {!isAndroid() ? (
+                <Button disabled={!isPublic}>
+                  <FacebookShareButton
+                    quote={intl.formatMessage(messages.subject)}
+                    url={url}
+                  >
+                    <FacebookIcon round />
+                    <FormattedMessage id="facebook" {...messages.facebook} />
+                  </FacebookShareButton>
+                </Button>
+              ) : (
+                <Button
+                  disabled={!isPublic}
+                  onClick={() => shareBoardOnFacebook(url, intl)}
+                >
+                  <div>
+                    <FacebookIcon round />
+                    <FormattedMessage id="facebook" {...messages.facebook} />
+                  </div>
+                </Button>
+              )}
 
-            {!isAndroid() ? (
               <Button disabled={!isPublic}>
-                <FacebookShareButton
-                  quote={intl.formatMessage(messages.subject)}
+                <TwitterShareButton
+                  title={intl.formatMessage(messages.subject)}
+                  hashtags={['cboard', 'AAC']}
                   url={url}
                 >
-                  <FacebookIcon round />
-                  <FormattedMessage id="facebook" {...messages.facebook} />
-                </FacebookShareButton>
+                  <TwitterIcon round />
+                  <FormattedMessage id="twitter" {...messages.twitter} />
+                </TwitterShareButton>
               </Button>
-            ) : (
-              <Button
-                disabled={!isPublic}
-                onClick={() => shareBoardOnFacebook(url, intl)}
-              >
-                <div>
-                  <FacebookIcon round />
-                  <FormattedMessage id="facebook" {...messages.facebook} />
-                </div>
+              <Button disabled={!isPublic}>
+                <WhatsappShareButton
+                  title={intl.formatMessage(messages.subject)}
+                  url={url}
+                >
+                  <WhatsappIcon round />
+                  <FormattedMessage id="whatsapp" {...messages.whatsapp} />
+                </WhatsappShareButton>
               </Button>
-            )}
-
-            <Button disabled={!isPublic}>
-              <TwitterShareButton
-                title={intl.formatMessage(messages.subject)}
-                hashtags={['cboard', 'AAC']}
-                url={url}
-              >
-                <TwitterIcon round />
-                <FormattedMessage id="twitter" {...messages.twitter} />
-              </TwitterShareButton>
-            </Button>
-            <Button disabled={!isPublic}>
-              <WhatsappShareButton
-                title={intl.formatMessage(messages.subject)}
-                url={url}
-              >
-                <WhatsappIcon round />
-                <FormattedMessage id="whatsapp" {...messages.whatsapp} />
-              </WhatsappShareButton>
-            </Button>
-            <Button disabled={!isPublic}>
-              <RedditShareButton
-                title={intl.formatMessage(messages.subject)}
-                url={url}
-              >
-                <RedditIcon round />
-                <FormattedMessage id="reddit" {...messages.reddit} />
-              </RedditShareButton>
-            </Button>
+              <Button disabled={!isPublic}>
+                <RedditShareButton
+                  title={intl.formatMessage(messages.subject)}
+                  url={url}
+                >
+                  <RedditIcon round />
+                  <FormattedMessage id="reddit" {...messages.reddit} />
+                </RedditShareButton>
+              </Button>
+            </PremiumFeature>
           </div>
         )}
       </DialogContent>

src/components/Board/EditToolbar/EditToolbar.component.js

@@ -19,6 +19,7 @@ import IconButton from '../../UI/IconButton';
 import messages from './EditToolbar.messages';
 import './EditToolbar.css';
 import { FormControlLabel } from '@material-ui/core';
+import PremiumFeature from '../../PremiumFeature';
 
 EditToolbar.propTypes = {
   /**
@@ -178,20 +179,22 @@ function EditToolbar({
             >
               <DeleteIcon />
             </IconButton>
-            <IconButton
-              label={intl.formatMessage(messages.copyTiles)}
-              disabled={!isItemsSelected}
-              onClick={onCopyTiles}
-            >
-              <MdContentCopy />
-            </IconButton>
-            <IconButton
-              label={intl.formatMessage(messages.pasteTiles)}
-              disabled={!copiedTiles.length}
-              onClick={onPasteTiles}
-            >
-              <MdContentPaste />
-            </IconButton>
+            <PremiumFeature>
+              <IconButton
+                label={intl.formatMessage(messages.copyTiles)}
+                disabled={!isItemsSelected}
+                onClick={onCopyTiles}
+              >
+                <MdContentCopy />
+              </IconButton>
+              <IconButton
+                label={intl.formatMessage(messages.pasteTiles)}
+                disabled={!copiedTiles.length}
+                onClick={onPasteTiles}
+              >
+                <MdContentPaste />
+              </IconButton>
+            </PremiumFeature>
             <IconButton
               label={intl.formatMessage(messages.editTiles)}
               disabled={!isItemsSelected}

src/components/Board/Navbar/Navbar.js

@@ -160,22 +160,20 @@ export class Navbar extends React.Component {
                 </PremiumFeature>
               )}
               <SettingsButton component={Link} to="/settings" />
-              <PremiumFeature>
-                <BoardShare
-                  label={intl.formatMessage(messages.share)}
-                  intl={this.props.intl}
-                  isPublic={isPublic}
-                  isOwnBoard={isOwnBoard}
-                  isLogged={isLogged}
-                  onShareClick={this.onShareClick}
-                  onShareClose={this.onShareClose}
-                  publishBoard={this.publishBoard}
-                  onCopyLink={this.handleCopyLink}
-                  open={this.state.openShareDialog}
-                  url={this.getBoardToShare()}
-                  fullScreen={false}
-                />
-              </PremiumFeature>
+              <BoardShare
+                label={intl.formatMessage(messages.share)}
+                intl={this.props.intl}
+                isPublic={isPublic}
+                isOwnBoard={isOwnBoard}
+                isLogged={isLogged}
+                onShareClick={this.onShareClick}
+                onShareClose={this.onShareClose}
+                publishBoard={this.publishBoard}
+                onCopyLink={this.handleCopyLink}
+                open={this.state.openShareDialog}
+                url={this.getBoardToShare()}
+                fullScreen={false}
+              />
             </React.Fragment>
           )}
           <div className={'personal__account'}>