chore: update logic for final steps

src/components/CollapsibleFeedback/CollapsibleFeedback.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Collapsible } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+const CollapsibleFeedback = ({ children, stepScore, stepLabel, defaultOpen }) => {
+  const { formatMessage } = useIntl();
+  const [open, setOpen] = React.useState(defaultOpen);
+
+  const toggle = () => setOpen(!open);
+
+  return (
+    <Collapsible
+      title={
+        <h3>
+          {formatMessage(messages.grade, { stepLabel })}
+          {stepScore && formatMessage(messages.gradePoints, stepScore)}
+        </h3>
+      }
+      open={open}
+      onToggle={toggle}
+    >
+      {children}
+    </Collapsible>
+  );
+};
+CollapsibleFeedback.defaultProps = {};
+CollapsibleFeedback.propTypes = {
+  stepLabel: PropTypes.string.isRequired,
+  stepScore: PropTypes.shape({
+    earned: PropTypes.number,
+    possible: PropTypes.number,
+  }),
+  children: PropTypes.node.isRequired,
+  defaultOpen: PropTypes.bool,
+};
+
+export default CollapsibleFeedback;

src/components/CollapsibleFeedback/MultipleAssessmentStep.jsx

@@ -0,0 +1,48 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import CollapsibleFeedback from './CollapsibleFeedback';
+import AssessmentCriterion from './AssessmentCriterion';
+
+const MultipleAssessmentStep = ({
+  stepLabel,
+  step,
+  stepScore,
+  assessments,
+  defaultOpen,
+}) => (
+  <div className='my-2' key='peer'>
+    <CollapsibleFeedback stepLabel={stepLabel} stepScore={stepScore} defaultOpen={defaultOpen}>
+      {assessments?.map((assessment, index) => (
+        <Fragment key={index}>
+          <p className='mb-0'>
+            {stepLabel} {index + 1}:
+          </p>
+          <AssessmentCriterion {...assessment} stepLabel={stepLabel} />
+          <hr className='my-4' />
+        </Fragment>
+      ))}
+    </CollapsibleFeedback>
+  </div>
+);
+
+MultipleAssessmentStep.defaultProps = {
+  defaultOpen: false,
+};
+MultipleAssessmentStep.propTypes = {
+  stepLabel: PropTypes.string.isRequired,
+  stepScore: PropTypes.shape({
+    earned: PropTypes.number,
+    possible: PropTypes.number,
+  }),
+  assessments: PropTypes.arrayOf(
+    PropTypes.shape({
+      selectedOption: PropTypes.number,
+      // selectedPoints: PropTypes.number,
+      feedback: PropTypes.string,
+    })
+  ),
+  defaultOpen: PropTypes.bool,
+};
+
+export default MultipleAssessmentStep;

src/components/CollapsibleFeedback/SingleAssessmentStep.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import CollapsibleFeedback from './CollapsibleFeedback';
+import AssessmentCriterion from './AssessmentCriterion';
+
+const SingleAssessmentStep = ({
+  stepLabel,
+  step,
+  stepScore,
+  assessment,
+  defaultOpen,
+}) => (
+  <CollapsibleFeedback
+    stepLabel={stepLabel}
+    stepScore={stepScore}
+    defaultOpen={defaultOpen}
+  >
+    <AssessmentCriterion {...assessment} stepLabel={stepLabel} />
+  </CollapsibleFeedback>
+);
+
+SingleAssessmentStep.defaultProps = {
+  defaultOpen: false,
+};
+SingleAssessmentStep.propTypes = {
+  stepLabel: PropTypes.string.isRequired,
+  stepScore: PropTypes.shape({
+    earned: PropTypes.number,
+    possible: PropTypes.number,
+  }),
+  assessment: PropTypes.shape({
+    selectedOption: PropTypes.number,
+    // selectedPoints: PropTypes.number,
+    feedback: PropTypes.string,
+  }),
+  defaultOpen: PropTypes.bool,
+};
+
+export default SingleAssessmentStep;

src/components/CollapsibleFeedback/index.jsx

@@ -1,40 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Collapsible } from '@edx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import messages from './messages';
-
-const CollapsibleFeedback = ({ children, stepScore, stepLabel, defaultOpen }) => {
-  const { formatMessage } = useIntl();
-  const [open, setOpen] = React.useState(defaultOpen);
-
-  const toggle = () => setOpen(!open);
-
-  return (
-    <Collapsible
-      title={
-        <h3>
-          {formatMessage(messages.grade, { stepLabel })}
-          {stepScore && formatMessage(messages.gradePoints, stepScore)}
-        </h3>
-      }
-      open={open}
-      onToggle={toggle}
-    >
-      {children}
-    </Collapsible>
-  );
-};
-CollapsibleFeedback.defaultProps = {};
-CollapsibleFeedback.propTypes = {
-  stepLabel: PropTypes.string.isRequired,
-  stepScore: PropTypes.shape({
-    earned: PropTypes.number,
-    possible: PropTypes.number,
-  }),
-  children: PropTypes.node.isRequired,
-  defaultOpen: PropTypes.bool,
-};
-
-export default CollapsibleFeedback;
+export { default as CollapsibleFeedback } from './CollapsibleFeedback';
+export { default as MultipleAssessmentStep } from './MultipleAssessmentStep';
+export { default as SingleAssessmentStep } from './SingleAssessmentStep';
+export { default as AssessmentCriterion } from './AssessmentCriterion';
+export { default as Feedback } from './Feedback';

src/data/services/lms/fakeData/pageData/assessments.js

@@ -23,7 +23,7 @@ export const getAssessmentState = ({ progressKey, stepConfig }) => {
     return null;
   }
   const out = {};
-  out.effectiveAssessmentType = 'staff';
+  out.effectiveAssessmentType = 'peer';
   if (stepConfig.includes(stepNames.staff)) {
     out.staff = {
       stepScore: { earned: 10, possible: 10 },

src/views/GradeView/FinalGrade.jsx

@@ -1,94 +1,49 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import CollapsibleFeedback from 'components/CollapsibleFeedback';
 import { useAssessmentsData } from 'data/services/lms/hooks/selectors';
 import messages from './messages';
-import AssessmentCriterion from 'components/CollapsibleFeedback/AssessmentCriterion';
 import InfoPopover from 'components/InfoPopover';
+import {
+  SingleAssessmentStep,
+  MultipleAssessmentStep,
+} from 'components/CollapsibleFeedback';
 
 const FinalGrade = () => {
   const { formatMessage } = useIntl();
-  const assessments = useAssessmentsData();
-  const effectiveStep = assessments.effectiveAssessmentType;
+  const { effectiveAssessmentType, ...steps } = useAssessmentsData();
 
-  const finalStepScore = assessments[effectiveStep]?.stepScore;
+  const finalStepScore = steps[effectiveAssessmentType]?.stepScore;
 
-  const result = [];
-  if (assessments.staff) {
-    const stepLabel = formatMessage(messages.staffStepLabel);
-    result.push(
-      <CollapsibleFeedback
-        stepLabel={stepLabel}
-        stepScore={assessments.staff.stepScore}
-        key='staff'
-        defaultOpen
-      >
-        <AssessmentCriterion
-          {...assessments.staff.assessment}
+  let result = [];
+  Object.keys(steps).forEach((step) => {
+    const stepLabel = formatMessage(messages[`${step}StepLabel`]);
+    const StepComponent = ['staff', 'self'].includes(step)
+      ? SingleAssessmentStep
+      : MultipleAssessmentStep;
+    if (step === effectiveAssessmentType) {
+      result = [
+        <StepComponent
+          {...steps[step]}
           stepLabel={stepLabel}
-        />
-      </CollapsibleFeedback>
-    );
-  }
-  if (assessments.peer) {
-    const stepLabel = formatMessage(messages.peerStepLabel);
-    result.push(
-      <div className='my-2' key='peer'>
-        <CollapsibleFeedback
-          stepLabel={stepLabel}
-          stepScore={assessments.peer.stepScore}
-        >
-          {assessments.peer.assessments?.map((peer, index) => (
-            <Fragment key={index}>
-              <p className='mb-0'>
-                {stepLabel} {index + 1}:
-              </p>
-              <AssessmentCriterion {...peer} stepLabel={stepLabel} />
-              <hr className='my-4' />
-            </Fragment>
-          ))}
-        </CollapsibleFeedback>
-      </div>
-    );
-  }
-  if (assessments.peerUnweighted) {
-    const stepLabel = formatMessage(messages.unweightedPeerStepLabel);
-    result.push(
-      <div className='my-2' key='peerUnweighted'>
-        <CollapsibleFeedback
-          stepLabel={stepLabel}
-          stepScore={assessments.peerUnweighted.stepScore}
-        >
-          {assessments.peerUnweighted.assessments?.map((peer, index) => (
-            <Fragment key={index}>
-              <p className='mb-0'>
-                {stepLabel} {index + 1}:
-              </p>
-              <AssessmentCriterion {...peer} stepLabel={stepLabel} />
-              <hr className='my-4' />
-            </Fragment>
-          ))}
-        </CollapsibleFeedback>
-      </div>
-    );
-  }
-  if (assessments.self) {
-    const stepLabel = formatMessage(messages.selfStepLabel);
-    result.push(
-      <CollapsibleFeedback
-        stepLabel={stepLabel}
-        stepScore={assessments.self.stepScore}
-        key='self'
-      >
-        <AssessmentCriterion
-          {...assessments.self.assessment}
+          step={step}
+          key={step}
+          defaultOpen
+        />,
+        ...result,
+      ];
+    } else {
+      result.push(
+        <StepComponent
+          {...steps[step]}
           stepLabel={stepLabel}
+          step={step}
+          key={step}
         />
-      </CollapsibleFeedback>
-    );
-  }
+      );
+    }
+  });
 
   const [finalGrade, ...rest] = result;
 
@@ -97,7 +52,13 @@ const FinalGrade = () => {
       <h3>
         {formatMessage(messages.yourFinalGrade, finalStepScore)}
         <InfoPopover onClick={() => {}}>
-          <p>{formatMessage(effectiveStep === 'peer' ? messages.peerAsFinalGradeInfo :messages.finalGradeInfo)}</p>
+          <p>
+            {effectiveAssessmentType === 'peer'
+              ? formatMessage(messages.peerAsFinalGradeInfo)
+              : formatMessage(messages.finalGradeInfo, {
+                  step: effectiveAssessmentType,
+                })}
+          </p>
         </InfoPopover>
       </h3>
       {finalGrade}

src/views/GradeView/messages.js

@@ -46,7 +46,7 @@ const messages = defineMessages({
     defaultMessage: 'Staff',
     description: 'Staff step label',
   },
-  unweightedPeerStepLabel: {
+  peerUnweightedStepLabel: {
     id: 'ora-grade-view.unweightedPeerStepLabel',
     defaultMessage: 'Unweighted Peer',
     description: 'Unweighted peer step label',