Td 2500 render results

package.json

@@ -1,6 +1,6 @@
 {
   "name": "traitify-widgets",
-  "version": "3.8.1",
+  "version": "3.9.0",
   "description": "Traitiy Widgets",
   "repository": {
     "type": "git",

public/index.js

@@ -144,6 +144,7 @@ function createAssessment() {
   if(cache.get("surveyType") === "benchmark") { return createWidget(); }
   if(cache.get("surveyType") === "cognitive") { return createCognitiveAssessment(); }
   if(cache.get("surveyType") === "order") { return createWidget(); }
+  if(cache.get("surveyType") === "generic") { return createGenericAssessment(); }
 
   const params = {
     deck_id: cache.get("deckID"),
@@ -240,6 +241,24 @@ function createElement(options = {}) {
   return element;
 }
 
+function createGenericAssessment() {
+  const query = Traitify.GraphQL.generic.create;
+  const variables = {
+    surveyID: cache.get("surveyID"),
+    profileID: cache.get("profileID")
+  };
+
+  Traitify.http.post(Traitify.GraphQL.generic.path, {query, variables}).then((response) => {
+    try {
+      const id = response.data.getOrCreateGenericAssessment.id;
+      cache.set("assessmentID", id);
+    } catch(error) {
+      console.log(error);
+    }
+    setTimeout(createWidget, 500);
+  });
+}
+
 function destroyWidget() { Traitify.destroy(); }
 
 function setupTargets() {
@@ -369,6 +388,7 @@ function setupDom() {
     options: [
       {text: "Benchmark", value: "benchmark"},
       {text: "Cognitive", value: "cognitive"},
+      {text: "Generic", value: "generic"},
       {text: "Order", value: "order"},
       {text: "Personality", value: "personality"}
     ],
@@ -404,6 +424,9 @@ function setupDom() {
   row.appendChild(createOption({name: "orderID", text: "Order ID:"}));
   group.appendChild(row)
 
+  row = createElement({className: surveyType !== "generic" ? "hide" : "", id: "generic-options"});
+  row.appendChild(createOption({name: "profileID", text: "Profile ID:"}));
+  group.appendChild(row);
   row = createElement({className: "row"});
   row.appendChild(createElement({onClick: createAssessment, tag: "button", text: "Create / Load"}));
   group.appendChild(row);
@@ -427,6 +450,29 @@ function setupCognitive() {
   });
 }
 
+function setupGeneric() {
+  const query = Traitify.GraphQL.generic.surveys;
+  const variables = {localeKey: cache.get("locale")};
+
+  Traitify.http.post(Traitify.GraphQL.generic.path, {query, variables}).then((response) => {
+    try {
+      const options = response.data.genericSurveys
+        .map(({id, name}) => ({text: name, value: id}))
+        .sort((a, b) => a.text.localeCompare(b.text));
+
+      document.querySelector("#generic-options").appendChild(createOption({
+        name: "surveyID",
+        onChange: onInputChange,
+        options,
+        text: "Survey:"
+      }));
+    } catch(error) {
+      console.log(error);
+    }
+  });
+
+}
+
 function setupTraitify() {
   const environment = cache.get("environment");
 
@@ -455,7 +501,7 @@ function onSurveyTypeChange(e) {
   const name = e.target.name;
   const value = e.target.value;
   const assessmentID = cache.get(`${value}AssessmentID`);
-  const otherValues = ["benchmark", "cognitive", "order", "personality"].filter((type) => type !== value);
+  const otherValues = ["benchmark", "cognitive", "generic", "order", "personality"].filter((type) => type !== value);
 
   cache.set("assessmentID", assessmentID);
 
@@ -468,4 +514,5 @@ function onSurveyTypeChange(e) {
 setupTraitify();
 setupDom();
 setupCognitive();
+setupGeneric();
 createWidget();

src/components/common/modal/index.js

@@ -4,11 +4,12 @@ import Icon from "components/common/icon";
 import useTranslate from "lib/hooks/use-translate";
 import style from "./style.scss";
 
-export default function Modal({children, onClose, title}) {
+export default function Modal({children, containerClass = null, onClose, title}) {
   const translate = useTranslate();
+  const sectionClass = [style.modalContainer, containerClass].filter(Boolean).join(" ");
   return (
     <div className={`${style.modal} ${style.container}`}>
-      <section className={style.modalContainer}>
+      <section className={sectionClass}>
         <div className={style.modalContent}>
           <div className={style.header}>
             <div>{title}</div>
@@ -34,6 +35,7 @@ export default function Modal({children, onClose, title}) {
 
 Modal.propTypes = {
   children: PropTypes.node.isRequired,
+  containerClass: PropTypes.string,
   onClose: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired
 };

src/components/container/hooks/use-order-effect.js

@@ -35,6 +35,12 @@ export default function useOrderEffect() {
       if(nextAssessment) { setActive({...nextAssessment}); }
 
       return;
+    } else {
+      // Update base active assessment from baseAssessmentState with loaded assessment
+      if(active.completed === undefined) {
+        const currentAssessment = order.assessments.find(({id}) => id === active.id);
+        setActive({...currentAssessment});
+      }
     }
 
     // NOTE: Show personality results

src/components/index.js

@@ -30,6 +30,7 @@ import RecommendationChart from "./results/recommendation/chart";
 import Status from "./status";
 import Survey from "./survey";
 import CognitiveSurvey from "./survey/cognitive";
+import Generic from "./survey/generic";
 import PersonalitySurvey from "./survey/personality";
 
 export default {
@@ -90,6 +91,7 @@ export default {
   Survey: {
     Cognitive: CognitiveSurvey,
     Container: Survey,
+    Generic,
     Personality: PersonalitySurvey
   }
 };

src/components/results/generic/breakdown.js

@@ -0,0 +1,59 @@
+import PropTypes from "prop-types";
+import {useState} from "react";
+import useTranslate from "lib/hooks/use-translate";
+import Question from "./question";
+import style from "./style.scss";
+
+export default function Breakdown({assessmentResult}) {
+  const [showAll, setShowAll] = useState(false);
+  const translate = useTranslate();
+  const showHideAll = () => {
+    setShowAll(!showAll);
+  };
+
+  return (
+    <div className={style.breakdown}>
+      <div className={style.description}>
+        <div>
+          <div className={style.title}>{translate("results.generic.breakdown")}</div>
+          <span>{translate("results.generic.breakdown_description")}</span>
+        </div>
+        <div>
+          <button className={style.toggleButton} type="button" onClick={showHideAll}>
+            {translate("show_hide_all")}
+          </button>
+        </div>
+      </div>
+      <div className={style.questions}>
+        {assessmentResult.responses.map((question, index) => (
+          <Question
+            key={question.questionId}
+            question={question}
+            index={index}
+            showState={showAll}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+Breakdown.propTypes = {
+  assessmentResult: PropTypes.shape({
+    responses: PropTypes.arrayOf(
+      PropTypes.shape({
+        questionId: PropTypes.string.isRequired,
+        questionText: PropTypes.string,
+        isCorrect: PropTypes.bool.isRequired,
+        selectedResponseOptionId: PropTypes.string,
+        responseOptions: PropTypes.arrayOf(
+          PropTypes.shape({
+            responseOptionId: PropTypes.string.isRequired,
+            responseOptionText: PropTypes.string.isRequired,
+            isCorrect: PropTypes.bool
+          })
+        ).isRequired
+      })
+    ).isRequired
+  }).isRequired
+};

src/components/results/generic/index.js

@@ -0,0 +1,43 @@
+import {useState, useEffect} from "react";
+import useGraphql from "lib/hooks/use-graphql";
+import useHttp from "lib/hooks/use-http";
+import useResults from "lib/hooks/use-results";
+import Breakdown from "./breakdown";
+import Score from "./score";
+import style from "./style.scss";
+
+export default function Generic() {
+  const [result, setResult] = useState(null);
+  const assessment = useResults({surveyType: "generic"});
+  const assessmentResult = result ? result.assessment : {};
+
+  const graphQL = useGraphql();
+  const http = useHttp();
+
+  useEffect(() => {
+    if(assessment === null) return;
+    const query = graphQL.generic.result;
+    const variables = {assessmentID: assessment.id};
+
+    http.post(graphQL.generic.path, {query, variables}).then(({data, errors}) => {
+      if(!errors && data.genericAssessmentResult) {
+        setResult(data.genericAssessmentResult);
+      } else {
+        console.warn(errors || data); // eslint-disable-line no-console
+      }
+    });
+  }, [assessment]);
+
+  return (
+    <div>
+      {result && (
+        <div className={style.container}>
+          <div className={style.contentBody}>
+            <Score assessmentResult={assessmentResult} />
+            <Breakdown assessmentResult={assessmentResult} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/results/generic/question.js

@@ -0,0 +1,98 @@
+import {faCheck, faXmark, faChevronDown, faChevronUp} from "@fortawesome/free-solid-svg-icons";
+import PropTypes from "prop-types";
+import {useState, useEffect} from "react";
+import Icon from "components/common/icon";
+import useTranslate from "lib/hooks/use-translate";
+import style from "./style.scss";
+
+export default function Question({question, index, showState}) {
+  const translate = useTranslate();
+  const [showContent, setShowContent] = useState(false);
+  const responsesClassName = question.setImage
+    ? style.responsesWithImage
+    : style.responsesWithoutImage;
+  const longTextCondition = (option) => option.responseOptionText.length > 20;
+  const longTextResponses = question.responseOptions.some(longTextCondition);
+  const optionsDirection = (longTextResponses || responsesClassName === style.responsesWithImage)
+    ? "column"
+    : "row";
+
+  useEffect(() => {
+    setShowContent(showState);
+  }, [showState]);
+
+  const toggleContent = () => {
+    setShowContent(!showContent);
+  };
+
+  const optionClassName = (option) => {
+    let className = "";
+    if(question.isCorrect) {
+      className = option.isCorrect ? style.correctResponse : "";
+    } else {
+      if(option.isCorrect) {
+        className = style.correctOption;
+      } else if(option.responseOptionId === question.selectedResponseOptionId) {
+        className = style.incorrectResponse;
+      }
+    }
+    return className;
+  };
+
+  return (
+    <div key={question.questionId} className={style.question}>
+      <div className={style.questionTitle}>
+        <div>
+          {question.isCorrect
+            ? <Icon className={style.iconCorrect} alt="Checked" icon={faCheck} />
+            : <Icon className={style.iconIncorrect} alt="X Mark" icon={faXmark} />}
+        </div>
+        <div> {translate("cognitive_question_alt_text")} {index + 1}</div>
+        <div>
+          <button type="button" onClick={toggleContent} className={style.toggleButton}>
+            <Icon className={style.icon} alt="Expand" icon={showContent ? faChevronUp : faChevronDown} />
+          </button>
+        </div>
+      </div>
+      {showContent && (
+        <div className={style.questionContent}>
+          <div className={style.responseOptions}>
+            <div className={style.questionText}>{question.questionText}</div>
+            <div className={responsesClassName} style={{flexDirection: optionsDirection}}>
+              {question.responseOptions.map((option) => (
+                <div
+                  key={option.responseOptionId}
+                  className={`${optionClassName(option)} ${style.responseOption}`}
+                >
+                  {option.responseOptionText}
+                </div>
+              ))}
+            </div>
+          </div>
+          {question.setImage && (
+            <div className={style.questionImage}>
+              <img src={question.setImage} alt={question.questionText} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+Question.propTypes = {
+  question: PropTypes.shape({
+    questionText: PropTypes.string,
+    questionId: PropTypes.string.isRequired,
+    isCorrect: PropTypes.bool.isRequired,
+    selectedResponseOptionId: PropTypes.string,
+    setImage: PropTypes.string,
+    responseOptions: PropTypes.arrayOf(PropTypes.shape({
+      responseOptionId: PropTypes.string.isRequired,
+      responseOptionText: PropTypes.string.isRequired,
+      isCorrect: PropTypes.bool.isRequired
+    })).isRequired
+  }).isRequired,
+  index: PropTypes.number.isRequired,
+  showState: PropTypes.bool.isRequired
+};