@explorer02/cfm-survey-sdk 0.2.1 → 0.2.3

package/templates/docs/templates/Question.tsx

@@ -2,52 +2,118 @@
  * CANONICAL QUESTION DISPATCHER TEMPLATE
  *
  * Agents: copy this file to your project's components folder (e.g. src/components/Question.tsx).
- * Then create EVERY imported scale component listed below — see:
- *   docs/00-integration/component-checklist.md
- *   docs/03-ui-specs/00-question-shell.md
- *
- * RULES:
- * - Do NOT add a default/fallback branch that renders "not yet implemented" or similar stub text.
- * - matrix MUST route by question.subType — type alone is NOT enough.
- * - If a question type appears in the fetched survey, its branch MUST render a real interactive component.
+ * Covers all 11 QUESTION_TYPE literals — see question-type-sdk-matrix.md for per-type wiring.
+ * Route on `question.type` / `QUESTION_TYPE` only — no subType.
  *
  * Replace @explorer02/cfm-survey-sdk with your package.json import name if different.
  */
 'use client';
 
-import React from 'react';
-import type { SurveyQuestion, AnswerValue } from '@explorer02/cfm-survey-sdk';
-import { CsatScale } from './CsatScale';
+import React, { useMemo } from 'react';
+import type { SurveyQuestion, AnswerValue, SurveyAnswers, CustomFieldValueMap, HeatmapAnswer, HeatmapQuestion } from '@explorer02/cfm-survey-sdk';
+import { QUESTION_TYPE, resolveSurveyQuestionPlaceholders, getVisibleMatrixItemsForAnswers, getVisibleMcqOptionsForAnswers, getVisibleRankOrderOptionsForAnswers } from '@explorer02/cfm-survey-sdk';
 import { CsatMatrixScale } from './CsatMatrixScale';
 import { SliderMatrixScale } from './SliderMatrixScale';
 import { LikertMatrixScale } from './LikertMatrixScale';
 import { FileUploadScale } from './FileUploadScale';
+import { HeatmapScale } from './HeatmapScale';
+import { RankOrderScale } from './RankOrderScale';
 import RatingScale from './RatingScale';
-// rating_scale / slider gaps — create these if survey contains those types:
-// import { CustomSliderTrack } from './CustomSliderTrack';
 
 type QuestionProps = {
   question: SurveyQuestion;
   selectedValue?: AnswerValue;
   validationError?: string;
-  onSelect: (value: AnswerValue) => void;
+  allAnswers: SurveyAnswers;
+  allQuestions: SurveyQuestion[];
+  customFieldValues?: CustomFieldValueMap;
+  onSelect: (answerValue: AnswerValue) => void;
 };
 
-export default function Question({ question, selectedValue, validationError, onSelect }: QuestionProps) {
+export default function Question({
+  question,
+  selectedValue,
+  validationError,
+  allAnswers,
+  allQuestions,
+  customFieldValues = {},
+  onSelect,
+}: QuestionProps) {
+  const questionsById = useMemo(
+    () => new Map(allQuestions.map(q => [q.id, q])),
+    [allQuestions]
+  );
+
+  const displayQuestionText = useMemo(
+    () => resolveSurveyQuestionPlaceholders(question.questionText, allAnswers, questionsById),
+    [question.questionText, allAnswers, questionsById]
+  );
+
+  const displayQuestionDescription = useMemo(
+    () =>
+      question.questionDescription
+        ? resolveSurveyQuestionPlaceholders(question.questionDescription, allAnswers, questionsById)
+        : undefined,
+    [question.questionDescription, allAnswers, questionsById]
+  );
+
+  const matrixQuestion = useMemo(() => {
+    const isMatrix =
+      question.type === QUESTION_TYPE.CFM_MATRIX ||
+      question.type === QUESTION_TYPE.CSAT_MATRIX ||
+      question.type === QUESTION_TYPE.RATING_MATRIX ||
+      question.type === QUESTION_TYPE.SLIDER_MATRIX;
+
+    if (!isMatrix) return question;
+
+    const { statementRows, scaleColumns } = getVisibleMatrixItemsForAnswers(
+      question,
+      allAnswers,
+      allQuestions,
+      customFieldValues
+    );
+
+    return {
+      ...question,
+      statementRows,
+      ...(question.type === QUESTION_TYPE.CSAT_MATRIX || question.type === QUESTION_TYPE.CFM_MATRIX
+        ? { scaleColumns }
+        : {}),
+    };
+  }, [question, allAnswers, allQuestions, customFieldValues]);
+
+  const visibleMcqOptions = useMemo(() => {
+    if (question.type !== QUESTION_TYPE.MCQ) return [];
+    return getVisibleMcqOptionsForAnswers(question, allAnswers, allQuestions, customFieldValues);
+  }, [question, allAnswers, allQuestions, customFieldValues]);
+
+  const rankOrderQuestion = useMemo(() => {
+    if (question.type !== QUESTION_TYPE.RANK_ORDER) return null;
+    return {
+      ...question,
+      options: getVisibleRankOrderOptionsForAnswers(
+        question,
+        allAnswers,
+        allQuestions,
+        customFieldValues
+      ),
+    };
+  }, [question, allAnswers, allQuestions, customFieldValues]);
+
   return (
     <section id={question.id} className="space-y-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
       <h2 className="text-lg font-medium leading-relaxed text-gray-900">
-        <span dangerouslySetInnerHTML={{ __html: question.text }} />
+        <span dangerouslySetInnerHTML={{ __html: displayQuestionText }} />
         {question.required && <span className="text-red-500 ml-1">*</span>}
       </h2>
-      {question.description && (
+      {displayQuestionDescription && (
         <div
           className="text-sm text-gray-600 mt-2 leading-relaxed"
-          dangerouslySetInnerHTML={{ __html: question.description }}
+          dangerouslySetInnerHTML={{ __html: displayQuestionDescription }}
         />
       )}
 
-      {question.type === 'rating' && (
+      {question.type === QUESTION_TYPE.NPS_SCALE && (
         <div className="space-y-3">
           {(question.minLabel || question.midLabel || question.maxLabel) && (
             <div className="relative w-full h-6 text-xs font-semibold text-gray-500">
@@ -60,9 +126,8 @@ export default function Question({ question, selectedValue, validationError, onS
                   className="absolute top-0 -translate-x-1/2 text-center max-w-[40%] leading-tight"
                   style={{
                     left: `${question.midLabelIndex !== undefined && question.options.length > 1
-                        ? (question.midLabelIndex / (question.options.length - 1)) * 100
-                        : 50
-                      }%`,
+                      ? (question.midLabelIndex / (question.options.length - 1)) * 100
+                      : 50}%`,
                   }}
                   dangerouslySetInnerHTML={{ __html: question.midLabel }}
                 />
@@ -78,164 +143,166 @@ export default function Question({ question, selectedValue, validationError, onS
             options={question.options}
             selectedValue={selectedValue}
             onSelect={onSelect}
+            variant="nps"
+            buttonStyle={question.buttonStyle}
           />
         </div>
       )}
 
-      {question.type === 'radio' && (
-        <div className="space-y-3">
-          {question.options.map(option => {
-            const isSelected = selectedValue === option.value;
-            return (
-              <label
-                key={String(option.value)}
-                className={`flex items-center gap-4 rounded-lg border py-4 px-5 cursor-pointer transition-all ${isSelected ? 'border-[#e20074] bg-[#fdf2f8]' : 'border-[#e5e5e5] bg-white hover:bg-gray-50/50'
-                  }`}
-              >
-                <input
-                  type="radio"
-                  name={question.id}
-                  value={option.value === null ? '' : option.value}
-                  checked={isSelected}
-                  onChange={() => onSelect(option.value)}
-                  className="sr-only"
-                />
-                <div
-                  className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full border transition-all ${isSelected ? 'border-2 border-[#e20074] bg-white' : 'border-gray-400 bg-white'
-                    }`}
+      {question.type === QUESTION_TYPE.MCQ && (() => {
+        const effectiveValue =
+          selectedValue ??
+          (question.selectionMode === 'single'
+            ? question.defaultOptionIds?.[0]
+            : question.defaultOptionIds);
+
+        if (question.selectionMode === 'multiple') {
+          const selectedIds: string[] = Array.isArray(effectiveValue)
+            ? effectiveValue.filter((id): id is string => typeof id === 'string')
+            : typeof effectiveValue === 'string'
+              ? [effectiveValue]
+              : [];
+
+          const handleToggle = (optionId: string) => {
+            const next = selectedIds.includes(optionId)
+              ? selectedIds.filter(id => id !== optionId)
+              : question.maxSelections && selectedIds.length >= question.maxSelections
+                ? selectedIds
+                : [...selectedIds, optionId];
+            onSelect(next);
+          };
+
+          return (
+            <div className="space-y-3">
+              {visibleMcqOptions.map(option => {
+                const isSelected = selectedIds.includes(option.id);
+                return (
+                  <label
+                    key={option.id}
+                    className={`flex items-center gap-4 rounded-lg border py-4 px-5 cursor-pointer transition-all ${isSelected ? 'border-[#e20074] bg-[#fdf2f8]' : 'border-[#e5e5e5] bg-white hover:bg-gray-50/50'}`}
+                  >
+                    <input
+                      type="checkbox"
+                      name={question.id}
+                      checked={isSelected}
+                      onChange={() => handleToggle(option.id)}
+                      className="sr-only"
+                    />
+                    <span
+                      className="text-[15px] font-medium text-gray-900 leading-tight"
+                      dangerouslySetInnerHTML={{ __html: option.optionLabel }}
+                    />
+                  </label>
+                );
+              })}
+            </div>
+          );
+        }
+
+        const singleSelected = typeof effectiveValue === 'string' ? effectiveValue : undefined;
+
+        return (
+          <div className="space-y-3">
+            {visibleMcqOptions.map(option => {
+              const isSelected = singleSelected === option.id;
+              return (
+                <label
+                  key={option.id}
+                  className={`flex items-center gap-4 rounded-lg border py-4 px-5 cursor-pointer transition-all ${isSelected ? 'border-[#e20074] bg-[#fdf2f8]' : 'border-[#e5e5e5] bg-white hover:bg-gray-50/50'}`}
                 >
-                  {isSelected && <div className="h-2.5 w-2.5 rounded-full bg-[#e20074]" />}
-                </div>
-                <span
-                  className="text-[15px] font-medium text-gray-900 leading-tight"
-                  dangerouslySetInnerHTML={{ __html: option.label }}
-                />
-              </label>
-            );
-          })}
-        </div>
+                  <input
+                    type="radio"
+                    name={question.id}
+                    checked={isSelected}
+                    onChange={() => onSelect(option.id)}
+                    className="sr-only"
+                  />
+                  <span
+                    className="text-[15px] font-medium text-gray-900 leading-tight"
+                    dangerouslySetInnerHTML={{ __html: option.optionLabel }}
+                  />
+                </label>
+              );
+            })}
+          </div>
+        );
+      })()}
+
+      {question.type === QUESTION_TYPE.RANK_ORDER && rankOrderQuestion && (
+        <RankOrderScale
+          question={rankOrderQuestion}
+          selectedValue={
+            typeof selectedValue === 'object' && selectedValue !== null && !Array.isArray(selectedValue)
+              ? selectedValue
+              : undefined
+          }
+          onSelect={onSelect}
+        />
       )}
 
-      {question.type === 'text' && (
-        <div className="space-y-1.5">
-          <textarea
-            rows={4}
-            value={(selectedValue as string | number | null) ?? ''}
-            onChange={e => onSelect(e.target.value)}
-            placeholder={question.placeholder || 'Type your response here...'}
-            className="w-full rounded-[4px] border border-gray-300 p-4 text-sm outline-none transition-colors focus:border-[#e20074] focus:ring-1 focus:ring-[#e20074]"
-          />
-          <div className="text-right text-xs text-gray-500 pr-1">
-            {Math.max(
-              0,
-              (question.maxCharacterCount ?? 1000) - (typeof selectedValue === 'string' ? selectedValue.length : 0)
-            )}{' '}
-            Zeichen verbleiben.
-          </div>
-        </div>
+      {question.type === QUESTION_TYPE.TEXTFIELD && (
+        <textarea
+          rows={question.inputVariant === 'long' ? 4 : 1}
+          value={(selectedValue as string) ?? ''}
+          onChange={e => onSelect(e.target.value)}
+          placeholder={question.placeholder || 'Type your response here...'}
+          className="w-full rounded border border-gray-300 p-4 text-sm outline-none focus:border-[#e20074]"
+        />
       )}
 
-      {question.type === 'csat' && (
-        <div className="space-y-3">
-          {(question.minLabel || question.maxLabel) && (
-            <div className="flex w-full justify-between text-xs font-semibold text-gray-500">
-              {question.minLabel && <span dangerouslySetInnerHTML={{ __html: question.minLabel }} />}
-              {question.maxLabel && <span dangerouslySetInnerHTML={{ __html: question.maxLabel }} />}
-            </div>
-          )}
-          <CsatScale
-            question={question}
-            selectedValue={selectedValue as string | number | null}
-            onSelect={onSelect}
-          />
-        </div>
+      {question.type === QUESTION_TYPE.CFM_MATRIX && (
+        <LikertMatrixScale
+          question={matrixQuestion as typeof question & { type: typeof QUESTION_TYPE.CFM_MATRIX }}
+          selectedValue={typeof selectedValue === 'object' && selectedValue !== null && !Array.isArray(selectedValue) ? selectedValue : {}}
+          onSelect={onSelect}
+        />
       )}
 
-      {/* matrix: subType is REQUIRED — never route on type alone */}
-      {question.type === 'matrix' && (question.subType === 'CSAT_MATRIX' || question.subType === 'RATING_MATRIX') && (
-        <div className="space-y-3">
-          <CsatMatrixScale
-            question={question}
-            selectedValue={typeof selectedValue === 'object' && selectedValue !== null && !Array.isArray(selectedValue) ? selectedValue : {}}
-            onSelect={onSelect}
-          />
-        </div>
+      {(question.type === QUESTION_TYPE.CSAT_MATRIX ||
+        question.type === QUESTION_TYPE.RATING_MATRIX) && (
+        <CsatMatrixScale
+          question={matrixQuestion as Extract<SurveyQuestion, { type: typeof QUESTION_TYPE.CSAT_MATRIX | typeof QUESTION_TYPE.RATING_MATRIX }>}
+          selectedValue={typeof selectedValue === 'object' && selectedValue !== null && !Array.isArray(selectedValue) ? selectedValue : {}}
+          onSelect={onSelect}
+        />
       )}
 
-      {question.type === 'matrix' && question.subType === 'CFM_MATRIX' && (
-        <div className="space-y-3">
-          <LikertMatrixScale
-            question={question}
-            selectedValue={typeof selectedValue === 'object' && selectedValue !== null && !Array.isArray(selectedValue) ? selectedValue : {}}
-            onSelect={onSelect}
-          />
-        </div>
+      {question.type === QUESTION_TYPE.SLIDER_MATRIX && (
+        <SliderMatrixScale
+          question={matrixQuestion as typeof question & { type: typeof QUESTION_TYPE.SLIDER_MATRIX }}
+          selectedValue={typeof selectedValue === 'object' && selectedValue !== null && !Array.isArray(selectedValue) ? selectedValue : {}}
+          onSelect={onSelect}
+        />
       )}
 
-      {question.type === 'slider_matrix' && (
-        <div className="space-y-3">
-          <SliderMatrixScale
-            question={question}
-            selectedValue={typeof selectedValue === 'object' && selectedValue !== null && !Array.isArray(selectedValue) ? selectedValue : {}}
-            onSelect={onSelect}
-          />
-        </div>
+      {question.type === QUESTION_TYPE.FILE_UPLOAD && (
+        <FileUploadScale question={question} selectedValue={selectedValue} onSelect={onSelect} />
       )}
 
-      {question.type === 'file_upload' && (
-        <div className="space-y-3">
-          <FileUploadScale
-            question={question}
-            selectedValue={selectedValue}
-            onSelect={onSelect}
-          />
-        </div>
+      {question.type === QUESTION_TYPE.HEATMAP && (
+        <HeatmapScale
+          question={question as HeatmapQuestion}
+          selectedValue={Array.isArray(selectedValue) ? (selectedValue as HeatmapAnswer) : undefined}
+          onSelect={onSelect}
+        />
       )}
 
-      {question.type === 'text_and_media' && question.mediaUrl && (
-        <div className={`mt-4 flex w-full ${
-          question.mediaAlignment === 'TOP_CENTER' || question.mediaAlignment === 'BOTTOM_CENTER'
-            ? 'justify-center'
-            : question.mediaAlignment === 'TOP_RIGHT' || question.mediaAlignment === 'BOTTOM_RIGHT'
-              ? 'justify-end'
-              : 'justify-start'
-        }`}>
-          <div
-            style={{ width: question.mediaSize ? `${question.mediaSize}%` : '100%' }}
-            className="flex flex-col gap-2"
-          >
-            {question.mediaMimeType?.startsWith('video/') || question.mediaMimeType === 'VIDEO' ? (
-              <video controls src={question.mediaUrl} className="max-w-full rounded-md shadow-sm" />
+      {question.type === QUESTION_TYPE.TEXT_AND_MEDIA && question.media?.url && (
+        <div className={`mt-4 flex w-full ${question.media.alignment?.includes('CENTER') ? 'justify-center' : question.media.alignment?.includes('RIGHT') ? 'justify-end' : 'justify-start'}`}>
+          <div style={{ width: question.media.size ? `${question.media.size}%` : '100%' }}>
+            {question.media.mimeType?.startsWith('video/') || question.media.mimeType === 'VIDEO' ? (
+              <video controls src={question.media.url} className="max-w-full rounded-md" />
             ) : (
-              <img src={question.mediaUrl} alt={question.mediaTitle || ''} className="max-w-full rounded-md shadow-sm" />
-            )}
-            {question.mediaTitle && (
-              <p className="text-sm text-gray-500 text-center">{question.mediaTitle}</p>
+              <img src={question.media.url} alt={question.media.title || ''} className="max-w-full rounded-md" />
             )}
+            {question.media.title && <p className="text-sm text-gray-500 text-center mt-2">{question.media.title}</p>}
           </div>
         </div>
       )}
 
-      {/* rating_scale / slider: implement per 03-ui-specs/05-rating-scale.md and 06-slider.md if present in survey */}
-      {question.type === 'rating_scale' && (
-        <div className="space-y-3">
-          <CsatScale
-            question={{ ...question, type: 'csat', buttonType: question.scaleStyle === 'star' ? 'star' : 'emoji' }}
-            selectedValue={selectedValue as number | null}
-            onSelect={onSelect}
-          />
-        </div>
-      )}
-
-      {question.type === 'slider' && (
-        <div className="space-y-3">
-          {/* Wire CustomSliderTrack — min/max/step from question; see 03-ui-specs/06-slider.md */}
-        </div>
-      )}
-
       {validationError && (
-        <div className="mt-4 rounded-[4px] border border-[#333333] bg-[#d9d9d9] py-3.5 px-4 text-left">
-          <p className="text-[13px] sm:text-sm font-bold text-gray-900 leading-tight">{validationError}</p>
+        <div className="mt-4 rounded border border-gray-800 bg-gray-200 py-3 px-4">
+          <p className="text-sm font-bold text-gray-900">{validationError}</p>
         </div>
       )}
     </section>