use selectIsMuted to determine whether to show error

src/views/preview/subactions.jsx

@@ -8,19 +8,47 @@ const Button = require('../../components/forms/button.jsx');
 const AddToStudioModal = require('./add-to-studio.jsx');
 const SocialModal = require('../../components/modal/social/container.jsx');
 const ReportModal = require('../../components/modal/report/modal.jsx');
+const {connect} = require('react-redux');
+const {useState} = require('react');
 const projectShape = require('./projectshape.jsx').projectShape;
 
+import {selectIsMuted, selectNewStudiosLaunched} from '../../redux/session.js';
+import StudioMuteEditMessage from '../studio/studio-mute-edit-message.jsx';
+
 require('./subactions.scss');
 
-const Subactions = props => (
+const Subactions = ({
+    addToStudioOpen,
+    canAddToStudio,
+    canReport,
+    isAdmin,
+    isShared,
+    onAddToStudioClicked,
+    onAddToStudioClosed,
+    onReportClicked,
+    onReportClose,
+    onReportSubmit,
+    onSocialClicked,
+    onSocialClosed,
+    onToggleStudio,
+    projectInfo,
+    reportOpen,
+    shareDate,
+    showAddToStudioMuteError,
+    socialOpen,
+    userOwnsProject
+}) => {
+    const [showMuteMessage, setShowMuteMessage] = useState(false);
+    
+    return (
         <FlexRow className="subactions">
             <div className="share-date">
                 <div className="copyleft">&copy;</div>
                 {' '}
                 {/*  eslint-disable react/jsx-sort-props */}
-            {props.shareDate ? (
+                {shareDate ? (
                     <FormattedDate
-                    value={Date.parse(props.shareDate)}
+                        value={Date.parse(shareDate)}
                         day="2-digit"
                         month="short"
                         year="numeric"
@@ -29,69 +57,83 @@ const Subactions = props => (
                 {/*  eslint-enable react/jsx-sort-props */}
             </div>
             <FlexRow className="action-buttons">
-            {(props.canReport) &&
+                {(canReport) &&
                     <React.Fragment>
                         <Button
                             className="action-button report-button"
                             key="report-button"
-                        onClick={props.onReportClicked}
+                            onClick={onReportClicked}
                         >
                             <FormattedMessage id="general.report" />
                         </Button>
-                    {props.reportOpen && (
+                        {reportOpen && (
                             <ReportModal
                                 isOpen
                                 key="report-modal"
                                 type="project"
-                            onReport={props.onReportSubmit}
-                            onRequestClose={props.onReportClose}
+                                onReport={onReportSubmit}
+                                onRequestClose={onReportClose}
                             />
                         )}
                     </React.Fragment>
                 }
-            {props.canAddToStudio &&
+                {canAddToStudio &&
                     <React.Fragment>
+                        <div
+                            style={{position: 'relative'}}
+                            /* eslint-disable react/jsx-no-bind */
+                            onMouseEnter={() => showAddToStudioMuteError && setShowMuteMessage(true)}
+                            onMouseLeave={() => showAddToStudioMuteError && setShowMuteMessage(false)}
+                            /* eslint-enable react/jsx-no-bind */
+                        >
                             <Button
                                 className="action-button studio-button"
+                                disabled={showAddToStudioMuteError}
                                 key="add-to-studio-button"
-                        onClick={props.onAddToStudioClicked}
+                                onClick={showMuteMessage ? null : onAddToStudioClicked}
                             >
                                 <FormattedMessage id="addToStudio.title" />
                             </Button>
-                    {props.addToStudioOpen && (
+                            {showMuteMessage && <StudioMuteEditMessage
+                                className="studio-button-error"
+                                messageId="project.mutedAddToStudio"
+                            />}
+                        </div>
+                        {addToStudioOpen && (
                             <AddToStudioModal
                                 isOpen
-                            isAdmin={props.isAdmin}
+                                isAdmin={isAdmin}
                                 key="add-to-studio-modal"
-                            userOwnsProject={props.userOwnsProject}
-                            onRequestClose={props.onAddToStudioClosed}
-                            onToggleStudio={props.onToggleStudio}
+                                userOwnsProject={userOwnsProject}
+                                onRequestClose={onAddToStudioClosed}
+                                onToggleStudio={onToggleStudio}
                             />
                         )}
                     </React.Fragment>
                 }
                 {/* only show copy link button, modal if project is shared */}
-            {props.isShared && props.projectInfo && props.projectInfo.id && (
+                {isShared && projectInfo && projectInfo.id && (
                     <React.Fragment>
                         <Button
                             className="action-button copy-link-button"
-                        onClick={props.onSocialClicked}
+                            onClick={onSocialClicked}
                         >
                             <FormattedMessage id="general.copyLink" />
                         </Button>
-                    {props.socialOpen && (
+                        {socialOpen && (
                             <SocialModal
                                 isOpen
                                 key="social-modal"
-                            projectId={props.projectInfo && props.projectInfo.id}
-                            onRequestClose={props.onSocialClosed}
+                                projectId={projectInfo && projectInfo.id}
+                                onRequestClose={onSocialClosed}
                             />
                         )}
                     </React.Fragment>
                 )}
             </FlexRow>
         </FlexRow>
-);
+    );
+};
 
 Subactions.propTypes = {
     addToStudioOpen: PropTypes.bool,
@@ -110,8 +152,13 @@ Subactions.propTypes = {
     projectInfo: projectShape,
     reportOpen: PropTypes.bool,
     shareDate: PropTypes.string,
+    showAddToStudioMuteError: PropTypes.bool,
     socialOpen: PropTypes.bool,
     userOwnsProject: PropTypes.bool
 };
 
-module.exports = Subactions;
+module.exports = connect(
+    state => ({
+        showAddToStudioMuteError: selectNewStudiosLaunched(state) && selectIsMuted(state)
+    })
+)(Subactions);