Merge pull request #66 from UNICEFECAR/fix/issue_111

Fix/issue 111

src/blocks/SafetyFeedback/SafetyFeedback.jsx

@@ -10,6 +10,8 @@ import {
   Icon,
   RadioButtonSelector,
   Textarea,
+  Emoticon,
+  Slider,
 } from "@USupport-components-library/src";
 import { ThemeContext } from "@USupport-components-library/utils";
 
@@ -32,9 +34,17 @@ export const SafetyFeedback = ({ consultationId, answers = {} }) => {
   const { t } = useTranslation("safety-feedback-block");
   const navigate = useNavigate();
   const hasAnsweredBefore =
-    Object.values(answers).filter((x) => x !== undefined).length === 5;
+    Object.values(answers).filter((x) => x !== undefined).length === 11;
 
   const [questions, setQuestions] = useState([
+    {
+      label: t("q0"),
+      field: "providerAttend",
+      value: answers.hasOwnProperty("providerAttend")
+        ? answers.providerAttend
+        : null,
+      id: 0,
+    },
     {
       label: t("q1"),
       field: "contactsDisclosure",
@@ -66,6 +76,48 @@ export const SafetyFeedback = ({ consultationId, answers = {} }) => {
         ? answers.unsafeFeeling
         : null,
       id: 4,
+      showInput: true,
+    },
+    {
+      label: t("q5"),
+      field: "feeling",
+      value: answers.hasOwnProperty("feeling") ? answers.feeling : null,
+      id: 5,
+      type: "emoji",
+    },
+    {
+      label: t("q6"),
+      field: "addressedNeeds",
+      value: answers.hasOwnProperty("addressedNeeds")
+        ? answers.addressedNeeds
+        : 10,
+      id: 6,
+      type: "slider",
+    },
+    {
+      label: t("q7"),
+      field: "improveWellbeing",
+      value: answers.hasOwnProperty("improveWellbeing")
+        ? answers.improveWellbeing
+        : 10,
+      id: 7,
+      type: "slider",
+    },
+    {
+      label: t("q8"),
+      field: "feelingsNow",
+      value: answers.hasOwnProperty("feelingsNow") ? answers.feelingsNow : 10,
+      id: 8,
+      type: "slider",
+    },
+    {
+      label: t("q9"),
+      field: "additionalComment",
+      value: answers.hasOwnProperty("additionalComment")
+        ? answers.additionalComment
+        : null,
+      id: 9,
+      type: "textarea",
     },
   ]);
 
@@ -105,14 +157,22 @@ export const SafetyFeedback = ({ consultationId, answers = {} }) => {
   };
 
   const canSubmit = useMemo(() => {
+    const questionsExcludingLast = questions.slice(0, -1);
+
     return (
-      questions.filter((x) => x.value !== null && x.value !== undefined)
-        .length === questions.length
+      questionsExcludingLast.filter(
+        (x) => x.value !== null && x.value !== undefined
+      ).length === questionsExcludingLast.length
     );
   }, [questions]);
 
   return (
-    <Block classes={["safety-feedback", "safety-feedback--dark"].join(" ")}>
+    <Block
+      classes={[
+        "safety-feedback",
+        theme === "dark" && "safety-feedback--dark",
+      ].join(" ")}
+    >
       <Grid classes="safety-feedback__grid">
         <GridItem md={8} lg={12} classes="safety-feedback__grid__headings-item">
           <h4>{t("heading")}</h4>
@@ -127,25 +187,51 @@ export const SafetyFeedback = ({ consultationId, answers = {} }) => {
           <p className="small-text">{t("warning")}</p>
         </GridItem>
         {questions.map((question) => (
-          <GridItem md={8} lg={12} key={question.id}>
-            <Question
-              question={question}
-              handleAnswerSelect={handleAnswerSelect}
-              t={t}
-            />
-          </GridItem>
+          <>
+            <GridItem
+              md={8}
+              lg={12}
+              key={question.id}
+              classes="safety-feedback__question-item"
+            >
+              {question?.type === "emoji" ? (
+                <QuestionEmoji
+                  question={question}
+                  handleAnswerSelect={handleAnswerSelect}
+                  t={t}
+                  theme={theme}
+                />
+              ) : question?.type === "slider" ? (
+                <QuestionSlider
+                  question={question}
+                  handleAnswerSelect={handleAnswerSelect}
+                />
+              ) : question?.type === "textarea" ? (
+                <QuestionTextarea
+                  question={question}
+                  handleAnswerSelect={handleAnswerSelect}
+                  t={t}
+                />
+              ) : (
+                <Question
+                  question={question}
+                  handleAnswerSelect={handleAnswerSelect}
+                  t={t}
+                />
+              )}
+            </GridItem>
+            {question.id === 4 && questions[4].value === true && (
+              <GridItem md={8} lg={12}>
+                <Textarea
+                  label={t("more_details_label")}
+                  value={moreDetails}
+                  onChange={setMoreDetails}
+                  placeholder={t("more_details_placeholder")}
+                />
+              </GridItem>
+            )}
+          </>
         ))}
-
-        {questions[3].value === true && (
-          <GridItem md={8} lg={12}>
-            <Textarea
-              label={t("more_details_label")}
-              value={moreDetails}
-              onChange={setMoreDetails}
-              placeholder={t("more_details_placeholder")}
-            />
-          </GridItem>
-        )}
         <GridItem md={8} lg={12} classes="safety-feedback__grid__button">
           <Button
             label={t("button")}
@@ -193,3 +279,114 @@ const Question = ({ question, handleAnswerSelect, t }) => {
     </div>
   );
 };
+
+const QuestionTextarea = ({ question, handleAnswerSelect, t }) => {
+  return (
+    <div className="safety-feedback__question">
+      <p className="text">{question.label}</p>
+      <div className="safety-feedback__question__answers">
+        <Textarea
+          value={question.value}
+          onChange={(value) => handleAnswerSelect(question.id, value)}
+          placeholder={t("more_details_placeholder")}
+        />
+      </div>
+    </div>
+  );
+};
+
+const QuestionEmoji = ({ question, handleAnswerSelect, t, theme }) => {
+  const emoticonsArray = [
+    {
+      value: "very_satisfied",
+      label: t("very_satisfied"),
+      emoji: "happy",
+      isSelected: question.value === "very_satisfied",
+    },
+    {
+      value: "satisfied",
+      label: t("satisfied"),
+      emoji: "good",
+      isSelected: question.value === "satisfied",
+    },
+    {
+      value: "neutral",
+      label: t("neutral"),
+      emoji: "sad",
+      isSelected: question.value === "neutral",
+    },
+    {
+      value: "dissatisfied",
+      label: t("dissatisfied"),
+      emoji: "depressed",
+      isSelected: question.value === "dissatisfied",
+    },
+    {
+      value: "very Dissatisfied",
+      label: t("very_dissatisfied"),
+      emoji: "worried",
+      isSelected: question.value === "very_dissatisfied",
+    },
+  ];
+  const [emoticons, setEmoticons] = useState(emoticonsArray);
+
+  const handleSelect = (value) => {
+    const newEmoticons = emoticons.map((emoticon) => {
+      if (emoticon.value === value) {
+        return { ...emoticon, isSelected: true };
+      }
+      return { ...emoticon, isSelected: false };
+    });
+    setEmoticons(newEmoticons);
+    handleAnswerSelect(question.id, value);
+  };
+
+  return (
+    <div className="safety-feedback__question">
+      <p className="text">{question.label}</p>
+      <div className="safety-feedback__question__answers">
+        {emoticons.map((emoticon, index) => (
+          <div
+            className={[
+              "mood-tracker__rating__emoticon-container",
+              !emoticon.isSelected &&
+                "mood-tracker__rating__emoticon-container--not-selected",
+              "safety-feedback__question__answers__emoticon-container",
+            ].join(" ")}
+            key={index}
+            onClick={() => handleSelect(emoticon.value)}
+          >
+            <Emoticon
+              name={`emoticon-${emoticon.emoji}`}
+              size={emoticon.isSelected ? "lg" : "sm"}
+            />
+            <p
+              className={[
+                "small-text",
+                emoticon.isSelected &&
+                  theme !== "dark" &&
+                  "mood-tracker__rating__emoticon-container__text--selected",
+              ].join(" ")}
+            >
+              {emoticon.label}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const QuestionSlider = ({ question, handleAnswerSelect }) => {
+  return (
+    <div className="safety-feedback__question">
+      <p className="text">{question.label}</p>
+      <div className="safety-feedback__question__slider">
+        <Slider
+          value={question.value}
+          onChange={(value) => handleAnswerSelect(question.id, value)}
+        />
+      </div>
+    </div>
+  );
+};

src/blocks/SafetyFeedback/locales/en.json

@@ -2,14 +2,26 @@
   "heading": "This is important. Please read and complete",
   "subheading": "Please answer all questions that apply truthfully.",
   "warning": "With answering you declare that this declaration is true and you make it knowing that making a declaration that you know is untrue is an offence.",
+  "q0": "Did the provider attend the consultation session?",
   "q1": "Did the provider ask you to disclose your address and contact details? ",
   "q2": "Did the provider ask you to meet them outside of the system (in person or in other application)?",
   "q3": "Did the provider ask you to send them any photos of yourself or turn on your video even if you did not want to?",
   "q4": "Did you feel unsafe in any way during the session? ",
+  "q5": "How are you feeling about the last consultation session?",
+  "q6": "Have your needs been addressed properly? 1-10 (No, not at all – Yes, all of them)",
+  "q7": "Do you understand how you can improve your wellbeing? 1-10 (No, not at all – Yes, all is clear)",
+  "q8": "Compare your current feeling to how you felt before the session started. How is it? 1-10 (No, it’s much worse – Can’t be better)",
+  "q9": "Any other thing to add? (optional)",
   "more_details_label": "If so, please explain why",
   "more_details_placeholder": "Give us more details here.",
   "yes": "Yes",
   "no": "No",
   "button": "Send feedback",
-  "continue_button": "Keep answers"
+  "continue_button": "Keep answers",
+
+  "very_satisfied": "Very Satisfied",
+  "satisfied": "Satisfied",
+  "neutral": "Neutral",
+  "dissatisfied": "Dissatisfied",
+  "very_dissatisfied": "Very Dissatisfied"
 }

src/blocks/SafetyFeedback/locales/kk.json

@@ -2,14 +2,26 @@
   "heading": "Бұл маңызды. Өтінеміз, оқып шығып, толтырыңыз",
   "subheading": "Өтінеміз, барлық қатысы бар сұрақтарға шынайы жауап беріңіз.",
   "warning": "Жауап бере отырып, Сіз бұл мәлімдеменің шынайы екенін мәлімдейсіз және шындыққа сәйкес келмейтін мәлімдеме қылмыс екенін біле отырып мәлімдейсіз.",
+  "q0": "Did the provider attend the consultation session?",
   "q1": "Консультант Сізден мекен-жайыңызды және байланыс деректеріңізді сұрады ма?",
   "q2": "Консультант жүйеден тыс (көзбе-көз немесе басқа қосымшада) кездесуді сұрады ма?",
   "q3": "Консультант Сіз қаламасаңыз да, фотосуреттеріңізді жіберуіңізді немесе бейнені қосуды өтінді ме?",
   "q4": "Сеанс кезінде өзіңізді қауіпсіздікте сезінген жоқсыз ба?",
+  "q5": "How are you feeling about the last consultation session?",
+  "q6": "Have your needs been addressed properly? 1-10 (No, not at all – Yes, all of them)",
+  "q7": "Do you understand how you can improve your wellbeing? 1-10 (No, not at all – Yes, all is clear)",
+  "q8": "Compare your current feeling to how you felt before the session started. How is it? 1-10 (No, it’s much worse – Can’t be better)",
+  "q9": "Any other thing to add? (optional)",
   "more_details_label": "Солай болса, себебін түсіндіріңіз",
   "more_details_placeholder": "Бізге осы жерде қосымша ақпарат беріңіз.",
   "yes": "Иә",
   "no": "Жоқ",
   "button": "Пікір жіберу",
-  "continue_button": "Жауаптарды сақтау"
+  "continue_button": "Жауаптарды сақтау",
+
+  "very_satisfied": "Very Satisfied",
+  "satisfied": "Satisfied",
+  "neutral": "Neutral",
+  "dissatisfied": "Dissatisfied",
+  "very_dissatisfied": "Very Dissatisfied"
 }

src/blocks/SafetyFeedback/locales/ru.json

@@ -2,14 +2,26 @@
   "heading": "Это важно. Пожалуйста, прочитайте и заполните",
   "subheading": "Пожалуйста, честно ответьте на все вопросы, которые имеют отношение.",
   "warning": "Отвечая, Вы заявляете, что настоящее заявление соответствует действительности, и Вы делаете это, зная, что заявление, которое, как Вы знаете, не соответствует действительности, является преступлением.",
+  "q0": "Did the provider attend the consultation session?",
   "q1": "Просил ли консультант сообщить Ваш адрес и контактные данные?",
   "q2": "Просил ли консультант Вас встретиться с ним вне системы (лично или в другом приложении)?",
   "q3": "Просил ли консультант прислать ему Ваши фотографии или включить видео, даже если Вы этого не хотели?",
   "q4": "Вы не чувствовали себя в безопасности во время сеанса?",
+  "q5": "How are you feeling about the last consultation session?",
+  "q6": "Have your needs been addressed properly? 1-10 (No, not at all – Yes, all of them)",
+  "q7": "Do you understand how you can improve your wellbeing? 1-10 (No, not at all – Yes, all is clear)",
+  "q8": "Compare your current feeling to how you felt before the session started. How is it? 1-10 (No, it’s much worse – Can’t be better)",
+  "q9": "Any other thing to add? (optional)",
   "more_details_label": "Если так, объясните, почему",
   "more_details_placeholder": "Дайте нам больше сведений здесь.",
   "yes": "Да",
   "no": "Нет",
   "button": "Отправить отзыв",
-  "continue_button": "Сохранить ответы"
+  "continue_button": "Сохранить ответы",
+
+  "very_satisfied": "Very Satisfied",
+  "satisfied": "Satisfied",
+  "neutral": "Neutral",
+  "dissatisfied": "Dissatisfied",
+  "very_dissatisfied": "Very Dissatisfied"
 }