oa-componentbook 1.0.1-stage.347 → 1.0.1-stage.349

package/build/widgets/oa-widget-progressive-steps/ProgressiveStepsWidget.js

@@ -37,7 +37,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 /**
  * ProgressiveStepsWidget: Advanced progressive question stepper with answer capturing
  * - Shows questions progressively as user answers previous ones
- * - Handles different answer types (buttons, text, upload, etc.)
+ * - Handles different answer types (singleSelect, text, upload, etc.)
  * - Manages internal state and emits complete answers
  * - Uses the original CustomSteps component for step display
  */
@@ -73,13 +73,15 @@ function ProgressiveStepsWidget(_ref) {
 
   // Calculate visible steps based on current step
   (0, _react.useEffect)(() => {
-    // When starting from a later step, show all steps up to current + 1
+    // Show current step + 1 (for the disabled next step)
     const maxVisible = Math.min(currentStep + 2, steps.length);
     setVisibleSteps(maxVisible);
   }, [currentStep, steps.length]);
   const handleAnswer = (stepIndex, answer) => {
+    const step = steps[stepIndex];
+    const stepId = step.key || stepIndex;
     const newAnswers = _objectSpread(_objectSpread({}, answers), {}, {
-      [stepIndex]: answer
+      [stepId]: answer
     });
     setAnswers(newAnswers);
 
@@ -88,11 +90,11 @@ function ProgressiveStepsWidget(_ref) {
       const nextStep = stepIndex + 1;
       setCurrentStep(nextStep);
       if (onStepChange) {
-        onStepChange(nextStep, newAnswers);
+        onStepChange(nextStep, newAnswers, stepId);
       }
     } else if (onStepChange) {
       // For editing previous answers, just notify about the change
-      onStepChange(currentStep, newAnswers);
+      onStepChange(currentStep, newAnswers, stepId);
     }
   };
   const handleSubmit = () => {
@@ -103,7 +105,10 @@ function ProgressiveStepsWidget(_ref) {
 
   // Check if all steps are completed (including pre-populated ones)
   const isAllStepsCompleted = () => {
-    return steps.every((_, index) => answers[index] !== undefined);
+    return steps.every((step, index) => {
+      const stepId = step.key || index;
+      return answers[stepId] !== undefined;
+    });
   };
   const renderAnswerInput = (step, stepIndex) => {
     const {
@@ -112,9 +117,10 @@ function ProgressiveStepsWidget(_ref) {
       placeholder,
       customComponent
     } = step;
-    const currentAnswer = answers[stepIndex];
+    const stepId = step.key || stepIndex;
+    const currentAnswer = answers[stepId];
     switch (answerType) {
-      case 'buttons':
+      case 'singleSelect':
         return /*#__PURE__*/_react.default.createElement("div", {
           style: {
             display: 'flex',
@@ -128,6 +134,24 @@ function ProgressiveStepsWidget(_ref) {
           label: option.label || option,
           "data-test": dataTest ? "".concat(dataTest, "--button-").concat(stepIndex, "-").concat(idx) : undefined
         })));
+      case 'button':
+        return /*#__PURE__*/_react.default.createElement("div", null, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+          key: idx,
+          type: option.type || 'primary',
+          onClick: () => {
+            // Execute custom click function if provided
+            if (option.onClick) {
+              option.onClick(option.value || option, stepIndex, answers);
+            }
+            // Optionally also save the answer if needed
+            if (option.saveAnswer !== false) {
+              handleAnswer(stepIndex, option.value || option);
+            }
+          },
+          label: option.label || option,
+          size: option.size || 'default',
+          "data-test": dataTest ? "".concat(dataTest, "--button-").concat(stepIndex, "-").concat(idx) : undefined
+        })));
       case 'custom':
         // Render custom component with props for integration
         if (customComponent) {
@@ -257,11 +281,12 @@ function ProgressiveStepsWidget(_ref) {
   // Prepare steps data for CustomSteps component
   const prepareStepsForCustomSteps = () => {
     return steps.map((step, stepIndex) => {
+      const stepId = step.key || stepIndex;
       const isActive = stepIndex === currentStep;
-      const isCompleted = stepIndex < currentStep || answers[stepIndex] !== undefined;
+      const isCompleted = stepIndex < currentStep && answers[stepId] !== undefined;
       const isDisabled = stepIndex > currentStep;
       const isVisible = stepIndex < visibleSteps;
-      const hasAnswer = answers[stepIndex] !== undefined;
+      const hasAnswer = answers[stepId] !== undefined;
       if (!isVisible) return null;
 
       // Get dynamic content based on answer state
@@ -270,11 +295,11 @@ function ProgressiveStepsWidget(_ref) {
         const dynamicContent = step.dynamicContent;
 
         // Check if we should show dynamic content for this answer
-        const shouldShowDynamic = typeof dynamicContent.showFor === 'function' ? dynamicContent.showFor(answers[stepIndex]) : dynamicContent.showFor === answers[stepIndex] || dynamicContent.showFor === true;
+        const shouldShowDynamic = typeof dynamicContent.showFor === 'function' ? dynamicContent.showFor(answers[stepId]) : dynamicContent.showFor === answers[stepId] || dynamicContent.showFor === true;
         if (!shouldShowDynamic) return null;
         return {
           title: dynamicContent.title || step.title,
-          description: typeof dynamicContent.description === 'function' ? dynamicContent.description(answers[stepIndex]) : dynamicContent.description,
+          description: typeof dynamicContent.description === 'function' ? dynamicContent.description(answers[stepId]) : dynamicContent.description,
           descriptionStyle: dynamicContent.descriptionStyle,
           hideAnswerInput: dynamicContent.hideAnswerInput || false
         };
@@ -309,7 +334,6 @@ function ProgressiveStepsWidget(_ref) {
       return {
         key: step.key || stepIndex,
         title: stepContent,
-        status: isCompleted ? 'finish' : isActive ? 'process' : isDisabled ? 'wait' : 'wait',
         disabled: isDisabled
       };
     }).filter(Boolean); // Remove null entries
@@ -337,7 +361,7 @@ ProgressiveStepsWidget.propTypes = {
       key: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
       title: _propTypes.default.node,
       description: _propTypes.default.node,
-      answerType: _propTypes.default.oneOf(['buttons', 'paymentOptions', 'text', 'textarea', 'upload', 'radio', 'checkbox', 'select', 'custom']),
+      answerType: _propTypes.default.oneOf(['singleSelect', 'button', 'paymentOptions', 'text', 'textarea', 'upload', 'radio', 'checkbox', 'select', 'custom']),
       answerOptions: _propTypes.default.array,
       placeholder: _propTypes.default.string,
       customComponent: _propTypes.default.elementType,
@@ -356,8 +380,6 @@ ProgressiveStepsWidget.propTypes = {
   initialAnswers: _propTypes.default.object,
   onComplete: _propTypes.default.func,
   onStepChange: _propTypes.default.func,
-  showBackButton: _propTypes.default.bool,
-  onBack: _propTypes.default.func,
   style: _propTypes.default.object
 };
 ProgressiveStepsWidget.defaultProps = {
@@ -369,8 +391,6 @@ ProgressiveStepsWidget.defaultProps = {
   initialAnswers: {},
   onComplete: undefined,
   onStepChange: undefined,
-  showBackButton: false,
-  onBack: undefined,
   style: {}
 };
 var _default = exports.default = ProgressiveStepsWidget;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "1.0.1-stage.347",
+  "version": "1.0.1-stage.349",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",