Replace debug error on StudioFollow

src/views/studio/l10n.json

@@ -18,6 +18,9 @@
     "studio.updateErrors.thumbnailTooLarge": "Maximum file size is 512 KB and less than 500x500 pixels.",
     "studio.updateErrors.thumbnailInvalid": "Upload a valid image. The file you uploaded was either not an image or a corrupted image.",
 
+    "studio.followErrors.confirmEmail": "Please confirm your email address first",
+    "studio.followErrors.generic": "Something went wrong following the studio",
+
     "studio.projectsHeader": "Projects",
     "studio.addProjectsHeader": "Add Projects",
     "studio.addProject": "Add",

src/views/studio/studio-follow.jsx

 /* eslint-disable react/jsx-no-bind */
-import React from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {FormattedMessage} from 'react-intl';
+import onClickOutside from 'react-onclickoutside';
 
 import {selectIsFollowing} from '../../redux/studio';
 import {selectCanFollowStudio} from '../../redux/studio-permissions';
 import {
-    mutateFollowingStudio, selectIsMutatingFollowing, selectFollowingMutationError
+    mutateFollowingStudio, selectIsMutatingFollowing, selectFollowingMutationError, Errors
 } from '../../redux/studio-mutations';
 import classNames from 'classnames';
+import ValidationMessage from '../../components/forms/validation-message.jsx';
+
+const errorToMessageId = error => {
+    switch (error) {
+    case Errors.PERMISSION: return 'studio.followErrors.confirmEmail';
+    default: return 'studio.followErrors.generic';
+    }
+};
 
 const StudioFollow = ({
     canFollow,
@@ -18,16 +27,24 @@ const StudioFollow = ({
     followingError,
     handleFollow
 }) => {
-    if (!canFollow) return null;
     const fieldClassName = classNames('button', 'studio-follow-button', {
         'mod-mutating': isMutating
     });
+    const [hideValidationMessage, setHideValidationMessage] = useState(false);
+
+    StudioFollow.handleClickOutside = () => {
+        setHideValidationMessage(true);
+    };
+    if (!canFollow) return null;
     return (
-        <React.Fragment>
+        <div className="studio-info-section">
             <button
                 className={fieldClassName}
                 disabled={isMutating}
-                onClick={() => handleFollow(!isFollowing)}
+                onClick={() => {
+                    setHideValidationMessage(false);
+                    handleFollow(!isFollowing);
+                }}
             >
                 {isMutating ? '...' : (
                     isFollowing ?
@@ -35,8 +52,11 @@ const StudioFollow = ({
                         <FormattedMessage id="studio.followStudio" />
                 )}
             </button>
-            {followingError && <div>Error mutating following: {followingError}</div>}
-        </React.Fragment >
+            {followingError && !hideValidationMessage && <ValidationMessage
+                mode="error"
+                message={<FormattedMessage id={errorToMessageId(followingError)} />}
+            />}
+        </div>
     );
 };
 
@@ -48,6 +68,10 @@ StudioFollow.propTypes = {
     handleFollow: PropTypes.func
 };
 
+const clickOutsideConfig = {
+    handleClickOutside: () => StudioFollow.handleClickOutside
+};
+
 export default connect(
     state => ({
         canFollow: selectCanFollowStudio(state),
@@ -58,4 +82,4 @@ export default connect(
     {
         handleFollow: mutateFollowingStudio
     }
-)(StudioFollow);
+)(onClickOutside(StudioFollow, clickOutsideConfig));

src/views/studio/studio.scss

@@ -169,6 +169,8 @@ $radius: 8px;
         padding-bottom: 14px;
         font-size: 14px;
         margin: 0;
+        width: 100%;
+        box-sizing: border-box;
     }
 }