Added feedback links for admins and Turku employees

app/i18n/messages/en.json

@@ -142,6 +142,7 @@
   "HomePage.contentSubTitle": "Reserve Turku’s premises, equipment and specialist services",
   "HomePage.bannersTitle": "What do you want to do?",
   "HomePage.buttonText": "Search",
+  "HomePage.feedbackLinkText": "Please give us feedback on how to improve the service!",
   "HomeSearchBox.buttonText": "Search",
   "HomeSearchBox.searchPlaceholder": "Search premises, equipment or services",
   "Logo.espooAlt": "City of Espoo",
@@ -212,6 +213,7 @@
   "Navbar.aria.topNavbar.mobileLocale": "Change language",
   "Navbar.aria.topNavbar.mobileToggle": "Site navigator",
   "Navbar.aria.mainNavbar.title": "Site navigator",
+  "Navbar.feedback": "Feedback",
   "Navbar.userFavorites": "Favorites",
   "Navbar.header": "Welcome",
   "Navbar.homeLink": "Welcome",

app/i18n/messages/fi.json

@@ -142,6 +142,7 @@
   "HomePage.contentSubTitle": "Turun vuokrattavat tilat, laitteet ja asiantuntijapalvelut varattavana",
   "HomePage.bannersTitle": "Mitä haluat tehdä?",
   "HomePage.buttonText": "Hae",
+  "HomePage.feedbackLinkText": "Kerro meille, miten tätä palvelua pitäisi kehittää!",
   "HomeSearchBox.buttonText": "Hae",
   "HomeSearchBox.searchPlaceholder": "Etsi tilaa, laitetta tai palvelua",
   "Logo.espooAlt": "Espoon kaupunki",
@@ -212,6 +213,7 @@
   "Navbar.aria.topNavbar.mobileLocale": "Vaihda kieltä",
   "Navbar.aria.topNavbar.mobileToggle": "Sivunavigaatio",
   "Navbar.aria.mainNavbar.title": "Sivunavigaatio",
+  "Navbar.feedback": "Palaute",
   "Navbar.userFavorites": "Suosikit",
   "Navbar.header": "Tervetuloa",
   "Navbar.homeLink": "Tervetuloa",

app/i18n/messages/sv.json

@@ -144,6 +144,7 @@
   "HomePage.contentSubTitle": "Boka utrymmen, apparater och sakkunnigtjänster i Åbo",
   "HomePage.bannersTitle": "Vad vill du göra?",
   "HomePage.buttonText": "Sök",
+  "HomePage.feedbackLinkText": "Berätta för oss hur den här tjänsten borde utvecklas!",
   "HomeSearchBox.buttonText": "Sök",
   "HomeSearchBox.searchPlaceholder": "Sök utrymme, apparat eller tjänster",
   "Logo.espooAlt": "Esbo stad",
@@ -214,6 +215,7 @@
   "Navbar.aria.topNavbar.mobileAccessibility": "Tillgänglighet",
   "Navbar.aria.topNavbar.mobileToggle": "Navigation",
   "Navbar.aria.mainNavbar.title": "Navigation",
+  "Navbar.feedback": "Feedback",
   "Navbar.userFavorites": "Favoriter",
   "Navbar.header": "Välkommen",
   "Navbar.homeLink": "Välkommen",

app/pages/home/HomePage.js

@@ -9,6 +9,7 @@ import { bindActionCreators } from 'redux';
 import Link from 'react-router-dom/Link';
 import { FormattedHTMLMessage } from 'react-intl';
 import classNames from 'classnames';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 
 import { fetchPurposes } from 'actions/purposeActions';
 import { injectT } from 'i18n';
@@ -69,7 +70,7 @@ class UnconnectedHomePage extends Component {
 
   render() {
     const {
-      isFetchingPurposes, purposes, t, contrast
+      isFetchingPurposes, purposes, t, contrast, authUserAmr, isAdmin, currentLanguage
     } = this.props;
     return (
       <div className="app-HomePage">
@@ -87,6 +88,18 @@ class UnconnectedHomePage extends Component {
               </Row>
             </div>
           </Loader>
+          {(isAdmin || authUserAmr === 'turku_adfs') && (
+            <div className={`${contrast}`} id="home-feedback-link">
+              <a
+                href={`https://opaskartta.turku.fi/eFeedback/${currentLanguage}/Feedback/30/1039`}
+                rel="noreferrer"
+                target="_blank"
+              >
+                {t('HomePage.feedbackLinkText')}
+                <FAIcon icon={faExternalLinkAlt} />
+              </a>
+            </div>
+          )}
         </PageWrapper>
       </div>
     );
@@ -101,7 +114,9 @@ UnconnectedHomePage.propTypes = {
   history: PropTypes.object.isRequired,
   t: PropTypes.func.isRequired,
   contrast: PropTypes.string,
-
+  authUserAmr: PropTypes.string.isRequired,
+  isAdmin: PropTypes.bool.isRequired,
+  currentLanguage: PropTypes.string.isRequired,
 };
 
 UnconnectedHomePage = injectT(UnconnectedHomePage); // eslint-disable-line

app/pages/home/HomePage.spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Loader from 'react-loader';
 import simple from 'simple-mock';
 import Link from 'react-router-dom/Link';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 
 import PageWrapper from 'pages/PageWrapper';
 import { shallowWithIntl } from 'utils/testUtils';
@@ -21,6 +22,9 @@ describe('pages/home/HomePage', () => {
     },
     isFetchingPurposes: false,
     isLargerFontSize: false,
+    authUserAmr: '',
+    isAdmin: false,
+    currentLanguage: 'fi',
     purposes: [
       {
         label: 'Purpose 1',
@@ -147,6 +151,51 @@ describe('pages/home/HomePage', () => {
         });
       });
     });
+
+    describe('Feedback link', () => {
+      describe('when user is admin', () => {
+        test('is visible', () => {
+          const wrapper = getWrapper({ isAdmin: true });
+          expect(wrapper.find('#home-feedback-link')).toHaveLength(1);
+        });
+      });
+
+      describe('when user login method is turku_adfs', () => {
+        test('is visible', () => {
+          const wrapper = getWrapper({ authUserAmr: 'turku_adfs' });
+          expect(wrapper.find('#home-feedback-link')).toHaveLength(1);
+        });
+      });
+
+      describe('when visible', () => {
+        const wrapper = getWrapper({ authUserAmr: 'turku_adfs', isAdmin: true, contrast: 'test' });
+
+        test('wrapper div is rendered correctly', () => {
+          const div = wrapper.find('div#home-feedback-link');
+          expect(div.prop('className')).toBe('test');
+        });
+
+        test('link is rendered correctly', () => {
+          const link = wrapper.find('#home-feedback-link').find('a');
+          expect(link.prop('href')).toBe(`https://opaskartta.turku.fi/eFeedback/${defaultProps.currentLanguage}/Feedback/30/1039`);
+          expect(link.prop('target')).toBe('_blank');
+          expect(link.prop('rel')).toBe('noreferrer');
+          expect(link.text()).toContain('HomePage.feedbackLinkText');
+        });
+
+        test('link icon is rendered correctly', () => {
+          const icon = wrapper.find('#home-feedback-link').find('FAIcon');
+          expect(icon.prop('icon')).toBe(faExternalLinkAlt);
+        });
+      });
+
+      describe('when user login method is not turku_adfs and user is not admin', () => {
+        test('is not visible', () => {
+          const wrapper = getWrapper({ authUserAmr: 'something', isAdmin: false });
+          expect(wrapper.find('#home-feedback-link')).toHaveLength(0);
+        });
+      });
+    });
   });
 
   describe('componentDidMount', () => {

app/pages/home/_home-page.scss

@@ -13,7 +13,7 @@ $purposeCellHeight: 350px;
 
 
   .app-PageWrapper {
-    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 99.5%, rgba(255,255,255,0) 100%);
+    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 99.5%, rgba(255, 255, 255, 0) 100%);
 
   }
 
@@ -22,11 +22,13 @@ $purposeCellHeight: 350px;
     padding-top: 30px;
     padding-bottom: 30px;
     text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
+
     h1 {
       margin: 2px 0;
     }
+
     &.container {
-      background-color: rgba(0,55,94,0.2);
+      background-color: rgba(0, 55, 94, 0.2);
     }
   }
 
@@ -35,7 +37,7 @@ $purposeCellHeight: 350px;
     display: flex;
     flex-direction: row;
 
-    @media(min-width: $screen-md-min) and (max-width:$screen-md-max){
+    @media(min-width: $screen-md-min) and (max-width:$screen-md-max) {
       padding: 10px 0 0 0;
     }
 
@@ -51,12 +53,13 @@ $purposeCellHeight: 350px;
         max-width: 300px;
       }
     }
+
     button {
       display: inline-block;
       margin-left: 12px;
       text-transform: uppercase;
 
-      @include add-focus($color: white){}
+      @include add-focus($color: white) {}
     }
   }
 
@@ -87,6 +90,7 @@ $purposeCellHeight: 350px;
 
       @media (max-width: $screen-xs-min) {
         height: 130px;
+
         &.large-font {
           height: 150px;
         }
@@ -119,11 +123,15 @@ $purposeCellHeight: 350px;
           flex-direction: row;
         }
 
-        &:hover, &:active, &:focus {
+        &:hover,
+        &:active,
+        &:focus {
           color: $black;
           background-color: $varaamo-secondary;
         }
+
         @include add-focus(4px);
+
         img {
           height: 100%;
           width: 100%;
@@ -169,6 +177,7 @@ $purposeCellHeight: 350px;
           }
         }
       }
+
       &-action {
         @media (max-width: $screen-xs-min) {
           display: flex;
@@ -183,6 +192,7 @@ $purposeCellHeight: 350px;
         @media (max-width: $screen-xs-min) {
           margin-top: 16px;
           margin-bottom: 16px;
+
           &.large-font {
             margin-top: 24px;
             margin-bottom: 24px;
@@ -191,22 +201,54 @@ $purposeCellHeight: 350px;
       }
     }
   }
+
+  #home-feedback-link {
+    margin-top: 42px;
+
+    a {
+      display: inline-block;
+      font-size: 1.2em;
+      background-color: $varaamo-secondary;
+      padding: 4px 24px;
+
+      @include box-shadow;
+
+      @include add-focus($color: $black) {}
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: $black;
+      }
+
+      .app-fontAwesome {
+        margin-left: 4px;
+      }
+    }
+
+    &.high-contrast {
+      a {
+        background-color: $white;
+      }
+    }
+  }
 }
 
 .app-HomePage {
   &__content {
     &.container.high-contrast {
       background-color: $white;
-      color:$black;
+      color: $black;
       text-shadow: none;
 
     }
   }
+
   .app-HomePageContent {
     &__banner {
       &__linkWrapper.high-contrast {
         background-color: $white;
       }
     }
   }
-}
+}

app/pages/home/homePageSelector.js

@@ -7,6 +7,8 @@ import ActionTypes from 'constants/ActionTypes';
 import { contrastSelector, isLargerFontSizeSelector } from 'state/selectors/accessibilitySelectors';
 import { purposesSelector } from 'state/selectors/dataSelectors';
 import requestIsActiveSelectorFactory from 'state/selectors/factories/requestIsActiveSelectorFactory';
+import { authUserAmrSelector, isAdminSelector } from '../../state/selectors/authSelectors';
+import { currentLanguageSelector } from '../../state/selectors/translationSelectors';
 
 const contrastOptionsSelector = state => contrastSelector(state);
 const purposeOptionsSelector = createSelector(
@@ -28,6 +30,9 @@ const homePageSelector = createStructuredSelector({
   isLargerFontSize: isLargerFontSizeSelector,
   purposes: purposeOptionsSelector,
   contrast: contrastOptionsSelector,
+  authUserAmr: authUserAmrSelector,
+  isAdmin: isAdminSelector,
+  currentLanguage: currentLanguageSelector,
 });
 
 export default homePageSelector;

app/pages/home/homePageSelector.spec.js

@@ -19,6 +19,18 @@ describe('pages/home/homePageSelector', () => {
     expect(getSelected().isLargerFontSize).toBeDefined();
   });
 
+  test('returns authUserAmr', () => {
+    expect(getSelected().authUserAmr).toBeDefined();
+  });
+
+  test('returns isAdmin', () => {
+    expect(getSelected().isAdmin).toBeDefined();
+  });
+
+  test('returns currentLanguage', () => {
+    expect(getSelected().currentLanguage).toBeDefined();
+  });
+
   describe('purposes', () => {
     function getPurposes(purposes) {
       return getSelected({

app/shared/main-navbar/MainNavbar.js

@@ -39,6 +39,7 @@ class MainNavbar extends React.Component {
       t,
       contrast,
       currentLanguage,
+      authUserAmr,
     } = this.props;
 
     const gitbookURL = currentLanguage === 'sv' ? constants.NAV_ADMIN_URLS.gitbook_sv : constants.NAV_ADMIN_URLS.gitbook;
@@ -107,6 +108,17 @@ class MainNavbar extends React.Component {
                 </Fragment>
               )
             }
+            {(isAdmin || authUserAmr === 'turku_adfs') && (
+              <NavItem
+                eventKey="feedback"
+                href={`https://opaskartta.turku.fi/eFeedback/${currentLanguage}/Feedback/30/1039`}
+                rel="noreferrer"
+                target="_blank"
+              >
+                {t('Navbar.feedback')}
+                <FAIcon icon={faExternalLinkAlt} />
+              </NavItem>
+            )}
             <LinkContainer to="/about">
               <NavItem eventKey="about" onClick={() => this.collapseItem()}>
                 {t('Navbar.aboutLink')}
@@ -127,6 +139,7 @@ MainNavbar.propTypes = {
   t: PropTypes.func.isRequired,
   contrast: PropTypes.string,
   currentLanguage: PropTypes.string,
+  authUserAmr: PropTypes.string.isRequired,
 };
 
 export default injectT(MainNavbar);