feat(author-confirm): show notification bar untill author has confirmed

packages/component-faraday-selectors/src/index.js

@@ -97,3 +97,7 @@ export const getUserPermissions = ({ currentUser }) =>
     objectType: t.object.type,
     role: t.teamType.permissions,
   }))
+
+export const isAuthorConfirmed = ({ currentUser }) =>
+  !currentUserIs({ currentUser }, 'staff') &&
+  get(currentUser, 'user.isConfirmed')

packages/components-faraday/src/components/AppBar/AppBar.js

@@ -4,65 +4,112 @@ import { connect } from 'react-redux'
 import { Icon, th } from '@pubsweet/ui'
 import { withRouter } from 'react-router-dom'
 import styled, { withTheme } from 'styled-components'
-import { withState, withHandlers, compose } from 'recompose'
+import { withState, withHandlers, withProps, compose } from 'recompose'
+
+import { currentUserIs } from '../../../../component-faraday-selectors/src'
 
 const AppBar = ({
+  goTo,
+  user,
+  brand,
+  theme,
   expanded,
   toggleMenu,
-  brand,
-  user,
-  goTo,
   currentUser,
   onLogoutClick,
-  theme,
+  shouldShowConfirmation,
 }) => (
-  <Root>
-    <Brand>
-      {React.cloneElement(brand, {
-        onClick: goTo('/'),
-      })}
-    </Brand>
-    {user && (
-      <User>
-        <div onClick={toggleMenu}>
-          <Icon color={theme.colorText}>user</Icon>
-          <span>
-            {get(user, 'firstName') || get(user, 'username') || 'User'}
-          </span>
-          <Icon color={theme.colorText}>chevron-down</Icon>
-        </div>
-        {expanded && (
-          <Dropdown>
-            <DropdownOption>Settings</DropdownOption>
-            {currentUser.admin && (
-              <DropdownOption onClick={goTo('/admin')}>
-                Admin dashboard
-              </DropdownOption>
-            )}
-            <DropdownOption onClick={onLogoutClick}>Logout</DropdownOption>
-          </Dropdown>
-        )}
-      </User>
+  <Root className="appbar">
+    <Row bordered className="row">
+      <Brand>
+        {React.cloneElement(brand, {
+          onClick: goTo('/'),
+        })}
+      </Brand>
+      {user && (
+        <User>
+          <div onClick={toggleMenu}>
+            <Icon color={theme.colorText}>user</Icon>
+            <span>
+              {get(user, 'firstName') || get(user, 'username') || 'User'}
+            </span>
+            <Icon color={theme.colorText}>chevron-down</Icon>
+          </div>
+          {expanded && (
+            <Dropdown>
+              <DropdownOption>Settings</DropdownOption>
+              {currentUser.admin && (
+                <DropdownOption onClick={goTo('/admin')}>
+                  Admin dashboard
+                </DropdownOption>
+              )}
+              <DropdownOption onClick={onLogoutClick}>Logout</DropdownOption>
+            </Dropdown>
+          )}
+        </User>
+      )}
+    </Row>
+    {shouldShowConfirmation && (
+      <Row bgColor="salmon" centered className="row">
+        <ConfirmationText>
+          Your author account is not confirmed. Check your email.
+        </ConfirmationText>
+      </Row>
     )}
     {expanded && <ToggleOverlay onClick={toggleMenu} />}
   </Root>
 )
 
+export default compose(
+  withRouter,
+  withTheme,
+  connect(state => ({
+    currentUser: get(state, 'currentUser.user'),
+    isStaff: currentUserIs(state, 'staff'),
+  })),
+  withState('expanded', 'setExpanded', false),
+  withHandlers({
+    toggleMenu: ({ setExpanded }) => () => {
+      setExpanded(v => !v)
+    },
+    goTo: ({ setExpanded, history }) => path => () => {
+      setExpanded(v => false)
+      history.push(path)
+    },
+  }),
+  withProps(({ isStaff, currentUser }) => ({
+    shouldShowConfirmation: !isStaff && !get(currentUser, 'isConfirmed'),
+  })),
+)(AppBar)
+
 // #region styled-components
 const Root = styled.div`
   align-items: center;
-  box-shadow: ${th('dropShadow')};
+  background-color: #ffffff;
   font-family: ${th('fontInterface')};
   display: flex;
-  justify-content: space-between;
-  height: 60px;
+  flex-direction: column;
   flex-grow: 1;
+  width: 100vw;
+
   position: fixed;
-  width: 100%;
+  top: 0;
   z-index: 10;
-  background-color: #ffffff;
 `
 
+const Row = styled.div`
+  align-items: center;
+  align-self: stretch;
+  background-color: ${({ bgColor }) => bgColor || 'transparent'};
+  box-shadow: ${({ bordered }) => (bordered ? th('dropShadow') : 'none')};
+  display: flex;
+  justify-content: ${({ centered }) =>
+    centered ? 'center' : 'space-between;'};
+`
+
+const ConfirmationText = styled.span`
+  font-size: ${th('fontSizeBaseSmall')};
+`
 const Brand = styled.div`
   padding: 10px 20px;
   cursor: pointer;
@@ -126,21 +173,3 @@ const ToggleOverlay = styled.div`
   opacity: 0;
 `
 // #endregion
-
-export default compose(
-  withRouter,
-  withTheme,
-  connect(state => ({
-    currentUser: get(state, 'currentUser.user'),
-  })),
-  withState('expanded', 'setExpanded', false),
-  withHandlers({
-    toggleMenu: ({ setExpanded }) => () => {
-      setExpanded(v => !v)
-    },
-    goTo: ({ setExpanded, history }) => path => () => {
-      setExpanded(v => false)
-      history.push(path)
-    },
-  }),
-)(AppBar)

packages/components-faraday/src/components/Dashboard/Dashboard.js

@@ -7,6 +7,7 @@ import { DashboardItems, DashboardFilters } from './'
 
 const Dashboard = ({
   dashboard,
+  currentUser,
   filterItems,
   filterValues,
   deleteProject,
@@ -16,7 +17,7 @@ const Dashboard = ({
   getDefaultFilterValue,
   createDraftSubmission,
 }) => (
-  <Root>
+  <Root className="dashboard">
     <Header>
       <Heading>Manuscripts</Heading>
       <HeaderButtons>
@@ -50,6 +51,7 @@ const Root = styled.div`
   flex-direction: column;
   margin: auto;
   max-width: 60em;
+  overflow: auto;
 `
 
 const Header = styled.div`

packages/components-faraday/src/components/Dashboard/DashboardPage.js

@@ -37,6 +37,7 @@ export default compose(
               reviewer => reviewer && reviewer.user === currentUser.id,
             ),
         ),
+
         all: sortedCollections,
       }
       const userPermissions = getUserPermissions(state)

packages/xpub-faraday/app/FaradayApp.js

@@ -7,13 +7,13 @@ import { withJournal } from 'xpub-journal'
 import { AppBar } from 'pubsweet-components-faraday/src/components'
 
 const App = ({ children, currentUser, journal, logoutUser }) => (
-  <Root>
+  <Root className="faraday-root">
     <AppBar
       brand={journal.metadata.name}
       onLogoutClick={logoutUser}
       user={currentUser}
     />
-    <MainContainer>{children}</MainContainer>
+    <MainContainer className="faraday-main">{children}</MainContainer>
   </Root>
 )
 
@@ -35,7 +35,7 @@ const Root = styled.div`
 `
 
 const MainContainer = styled.div`
-  padding: 90px 10px 40px;
-  min-height: 100vh;
   background-color: ${props => props.theme.backgroundColor || '#fff'};
+  padding: 110px 10px 0 10px;
+  height: 100vh;
 `