Property to hide Answers and some other tweaking

package.json

@@ -11,7 +11,8 @@
     "now-build": "NODE_ENV=production rollup -c && cd test && next build",
     "heroku-postbuild": "NODE_ENV=production rollup -c && cd test && next build",
     "start": "NODE_ENV=production cd test && node server.js",
-    "deploy": "s3cmd sync --exclude '.DS_Store' --verbose --acl-public build/ s3://republik-assets/dynamic-components/questionnaire/"
+    "deploy": "s3cmd sync --exclude '.DS_Store' --verbose --acl-public build/ s3://republik-assets/dynamic-components/questionnaire/",
+    "deploy:love": "s3cmd sync --exclude '.DS_Store' --verbose --acl-public build/ s3://republik-assets/dynamic-components/questionnaire/love/"
   },
   "repository": {
     "type": "git",

src/components/Auth/withMe.js

@@ -11,6 +11,6 @@ export const meQuery = gql`
 
 export default graphql(meQuery, {
   props: ({ data }) => ({
-    me: data.me
-  })
+    me: data.me,
+  }),
 })

src/components/MessageBox.js

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { css } from 'glamor'
+
+import {
+  useColorContext,
+  fontStyles,
+  mediaQueries,
+} from '@project-r/styleguide'
+
+const styles = {
+  box: css({
+    display: 'block',
+    margin: '10px 0',
+    padding: 20,
+    textAlign: 'center',
+  }),
+  text: css({
+    ...fontStyles.sansSerifRegular17,
+    [mediaQueries.mUp]: {
+      ...fontStyles.sansSerifRegular21,
+    },
+  }),
+}
+
+const MessageBox = ({ children }) => {
+  const [colorScheme] = useColorContext()
+  return (
+    <div
+      {...styles.box}
+      {...styles.text}
+      {...colorScheme.set('backgroundColor', 'alert')}
+      {...colorScheme.set('color', 'text')}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default MessageBox

src/components/QuestionTypeChoice.js

@@ -2,20 +2,17 @@ import React, { Component } from 'react'
 import { css } from 'glamor'
 import uuid from '../lib/uuid'
 
-import {
-  Interaction,
-  Button,
-  mediaQueries
-} from '@project-r/styleguide'
+import { Interaction, Button, mediaQueries } from '@project-r/styleguide'
 const { P } = Interaction
 
 import { withTranslations } from '../lib/TranslationsContext'
 
 import Chart from './QuestionTypeChoiceChart'
+import MessageBox from './MessageBox'
 
 const styles = {
   container: css({
-    margin: '50px 0 10px 0'
+    margin: '50px 0 10px 0',
   }),
   question: css({
     margin: '0px 0 10px 0',
@@ -28,27 +25,36 @@ const styles = {
   }),
   mobileBorder: css({
     [mediaQueries.onlyS]: {
-      margin: '0px 10px'
-    }
+      margin: '0px 10px',
+    },
+  }),
+  mobileBox: css({
+    [mediaQueries.onlyS]: {
+      margin: '20px 0',
+    },
   }),
   buttons: css({
     width: '100%',
     display: 'flex',
-    justifyContent: 'space-evenly'
+    justifyContent: 'space-evenly',
   }),
 }
 
 class QuestionTypeChoice extends Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
     this.state = {
-      answerId: (props.question.userAnswer && props.question.userAnswer.id) || uuid(),
+      answerId:
+        (props.question.userAnswer && props.question.userAnswer.id) || uuid(),
     }
   }
-  render () {
-
+  render() {
     this.handleChange = (value) => {
-      const { onChange, questionnaire, question: { userAnswer, cardinality } } = this.props
+      const {
+        onChange,
+        questionnaire,
+        question: { userAnswer, cardinality },
+      } = this.props
       const nextValue = new Set(userAnswer ? userAnswer.payload.value : [])
 
       if (cardinality === 0 || cardinality > 1) {
@@ -67,31 +73,46 @@ class QuestionTypeChoice extends Component {
       onChange(answerId, Array.from(nextValue))
     }
 
-    const { questionnaire, question: { id, text, userAnswer, options, choiceResults: results }, showResults } = this.props
+    const {
+      t,
+      questionnaire,
+      question: { id, text, userAnswer, options, choiceResults: results },
+      showResults,
+      hideAnswers,
+    } = this.props
     const { question } = this.props
-	  const { userHasSubmitted } = questionnaire
+    const { userHasSubmitted } = questionnaire
 
     return (
       <div {...styles.container}>
         <P {...styles.question}>{text}</P>
-        <div {...styles.content}>
-          { (userAnswer || userHasSubmitted || showResults) &&
+        {hideAnswers && (userAnswer || userHasSubmitted || showResults) && (
+          <div {...styles.message}>
+            <div {...styles.mobileBox}>
+              <MessageBox>{t('questionnaire/hideAnswers/thankyou')}</MessageBox>
+            </div>
+          </div>
+        )}
+        {!hideAnswers && (userAnswer || userHasSubmitted || showResults) && (
+          <div {...styles.content}>
             <div {...styles.mobileBorder}>
               <Chart question={question} />
             </div>
-          }
-          { (!userAnswer && !userHasSubmitted && !showResults) &&
+          </div>
+        )}
+        {!userAnswer && !userHasSubmitted && !showResults && (
+          <div {...styles.content}>
             <div {...styles.buttons}>
-              { options.map(option =>
+              {options.map((option) => (
                 <div key={`${id}-${option.value}`}>
-                  <Button onClick={() => this.handleChange(option.value)} >
+                  <Button onClick={() => this.handleChange(option.value)}>
                     {option.label}
                   </Button>
                 </div>
-              )}
+              ))}
             </div>
-          }
-        </div>
+          </div>
+        )}
       </div>
     )
   }

src/components/QuestionTypeRange.js

@@ -10,6 +10,7 @@ import uuid from '../lib/uuid'
 import { withTranslations } from '../lib/TranslationsContext'
 
 import Chart, { TicksLabels } from './QuestionTypeRangeChart'
+import MessageBox from './MessageBox'
 
 const styles = {
   question: css({
@@ -83,6 +84,7 @@ class QuestionTypeRange extends Component {
       questionnaire,
       question,
       showResults,
+      hideAnswers,
       augments,
       t,
       colors,
@@ -167,14 +169,17 @@ class QuestionTypeRange extends Component {
               </Button>
             </>
           )}
-          {(submitted || showResults) && (
+          {!hideAnswers && (submitted || showResults) && (
             <Chart
               question={question}
               augmentedBins={augmentedBins}
               colors={colors}
               colorsDark={colorsDark}
             />
           )}
+          {hideAnswers && (submitted || showResults) && (
+            <MessageBox>{t('questionnaire/hideAnswers/thankyou')}</MessageBox>
+          )}
         </div>
       </div>
     )

src/components/Questionnaire.js

@@ -25,6 +25,7 @@ import { withTranslations } from '../lib/TranslationsContext'
 
 import QuestionTypeChoice from './QuestionTypeChoice'
 import QuestionTypeRange from './QuestionTypeRange'
+import MessageBox from './MessageBox'
 
 const questionTypes = {
   QuestionTypeChoice,
@@ -96,6 +97,7 @@ const Questionnaire = (props) => {
     me,
     t,
     hideAnonymize,
+    hideAnswers,
     settings,
     submitAnswer,
     submitAnswerUnattributed,
@@ -224,12 +226,40 @@ const Questionnaire = (props) => {
           return <P {...styles.error}>{t('questionnaire/notFound')}</P>
         }
 
-        const { unattributedAnswers, questions, userHasSubmitted } =
-          questionnaire
+        const {
+          unattributedAnswers,
+          questions,
+          userIsEligible,
+          userHasSubmitted,
+          endDate,
+        } = questionnaire
 
-        if ((!me || !me.id) && !unattributedAnswers) {
+        if (new Date(endDate) < now) {
           return (
-            <P {...styles.signIn}>{t('questionnaire/noUnattributedAnswers')}</P>
+            <div>
+              <MessageBox>{t('questionnaire/ended')}</MessageBox>
+            </div>
+          )
+        }
+        if ((!me || !me.id) && unattributedAnswers) {
+          return (
+            <div>
+              <MessageBox>
+                {t('questionnaire/noUnattributedAnswers')}
+              </MessageBox>
+            </div>
+          )
+        } else if (!me || !me.id) {
+          return (
+            <div>
+              <MessageBox>{t('questionnaire/notSignedIn')}</MessageBox>
+            </div>
+          )
+        } else if (!userIsEligible) {
+          return (
+            <div>
+              <MessageBox>{t('questionnaire/notEligible')}</MessageBox>
+            </div>
           )
         }
 
@@ -255,6 +285,7 @@ const Questionnaire = (props) => {
               React.createElement(questionTypes[question.__typename], {
                 unattributed: !me,
                 showResults: answersSubmitted || showResults,
+                hideAnswers,
                 ...(settings &&
                   settings.find((s) => s.order === question.order)),
                 onChange: createHandleChange(questionnaire, question),
@@ -279,7 +310,7 @@ const Questionnaire = (props) => {
                 </P>
               )}
               <div {...styles.actions}>
-                {!showResults && !answersSubmitted && (
+                {!hideAnswers && !showResults && !answersSubmitted && (
                   <div {...styles.action}>
                     <A
                       href='#'
@@ -433,6 +464,7 @@ const query = gql`
       id
       slug
       beginDate
+      endDate
       userIsEligible
       userHasSubmitted
       unattributedAnswers

src/lib/translations.json

@@ -3,9 +3,21 @@
     "key": "questionnaire/notFound",
     "value": "Der Fragebogen konnte nicht gefunden werden."
   },
+  {
+    "key": "questionnaire/ended",
+    "value": "Der Fragebogen ist geschlossen, es können keine Antworten mehr abgegeben werden."
+  },
+  {
+    "key": "questionnaire/notSignedIn",
+    "value": "Sie müssen angemeldet sein, um den Fragebogen sehen zu können."
+  },
+  {
+    "key": "questionnaire/notEligible",
+    "value": "Sie benötigen ein aktives Abonnement für die Beantwortung des Fragebogens."
+  },
   {
     "key": "questionnaire/noUnattributedAnswers",
-    "value": "Damit wir Ihnen zeigen können wo Sie im Vergleich anderen stehen müssen Sie sich anmelden. Sie benötigen keine Mitgliedschaft. Um Ihre Privatsphäre müssen Sie sich keine Sorgen machen: Sie können Ihre Antworten jederzeit anonymisieren."
+    "value": "Damit wir Ihnen zeigen können, wo Sie im Vergleich zu anderen Antworten stehen, müssen Sie sich anmelden. Sie benötigen keine Mitgliedschaft. Um Ihre Privatsphäre müssen Sie sich keine Sorgen machen: Sie können Ihre Antworten jederzeit anonymisieren."
   },
   {
     "key": "questionnaire/header",
@@ -15,6 +27,10 @@
     "key": "questionnaire/invalid",
     "value": "Bitte beantworten Sie mindestens eine Frage."
   },
+  {
+    "key": "questionnaire/hideAnswers/thankyou",
+    "value": "Herzlichen Dank für Ihre Antwort."
+  },
   {
     "key": "questionnaire/submit/1",
     "value": "Ihre Antwort übermitteln"