robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(representations): decompose representation flow shell into form stage and timetable panel (Slice R4, behaviour-preserving)

Browse Source
This commit is contained in:
robbond
2026-04-20 13:27:53 +01:00
parent ebed61799e
commit d36a56c4c9
4 changed files with 134 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/case/representation/index.js
+17 -55
View File
@@ -33,6 +33,7 @@ import RepLPACapacitySelection from "./representationLPACapacitySelection";
import RepLandOwner from "./representationLandowner"; import RepLandOwner from "./representationLandowner";
import RepresentationProgress_enforcement from "./representationProgress/representationProgress_enforcement"; import RepresentationProgress_enforcement from "./representationProgress/representationProgress_enforcement";
import RepresentationProgress_s78 from "./representationProgress/representationProgress_s78"; import RepresentationProgress_s78 from "./representationProgress/representationProgress_s78";
import RepresentationFlowFormStage from "./shell/RepresentationFlowFormStage";
import { import {
getQuestionnaireNextSection, getQuestionnaireNextSection,
resolveJourneyStageFlags, resolveJourneyStageFlags,
@@ -1206,61 +1207,22 @@ let MakeRepresentation = (props) => {
docsOffline={docsOffline} docsOffline={docsOffline}
/> />
) : ( ) : (
<> <RepresentationFlowFormStage
<h1 className="govuk-heading-l"> t={t}
{appealIsConsultation appealIsConsultation={appealIsConsultation}
? t( currentReference={
"myrepresentations:make-a-consultation-on-label" currentView.caseReference.currentReference
) }
: t( whichControl={whichControl}
"myrepresentations:make-a-representation-on-label" appealIsLocalImpact={appealIsLocalImpact}
)}{" "} renderDueDate={renderDueDate}
{currentView.caseReference.currentReference}{" "} renderStatementsDue={renderStatementsDue}
</h1> renderMarineImpact={renderMarineImpact}
<div id="rep-form"> renderConsultationClose={renderConsultationClose}
<div className="govuk-grid-column-three-quarters wgForm"> renderFinalCommentsDue={renderFinalCommentsDue}
{whichControl()} isQuestionnaire={isQuestionnaire}
</div> whichProgress={whichProgress}
/>
<div className="govuk-grid-column-one-quarter">
<div className="card">
<div className="card-body">
<h2 className="govuk-heading-s">
{t(
"myrepresentations:timetable-title"
)}
</h2>
<div className="govuk-summary-list">
<div className="govuk-body-s">
{appealIsLocalImpact
? t(
"myrepresentations:local-impact-report"
)
: t(
"myrepresentations:questionnaire-due-label"
)}
:{" "}
<span className="govuk-body-s">
{renderDueDate()}
</span>
</div>
{!appealIsConsultation &&
renderStatementsDue()}
{renderMarineImpact()}
{renderConsultationClose()}
{renderFinalCommentsDue()}
</div>
</div>
</div>
{isQuestionnaire && whichProgress()}
</div>
</div>
</>
)} )}
</form> </form>
</div> </div>
components/case/representation/shell/RepresentationFlowFormStage.js
+50
View File
@@ -0,0 +1,50 @@
import RepresentationTimetablePanel from "./RepresentationTimetablePanel";
const RepresentationFlowFormStage = ({
t,
appealIsConsultation,
currentReference,
whichControl,
appealIsLocalImpact,
renderDueDate,
renderStatementsDue,
renderMarineImpact,
renderConsultationClose,
renderFinalCommentsDue,
isQuestionnaire,
whichProgress
}) => {
return (
<>
<h1 className="govuk-heading-l">
{appealIsConsultation
? t("myrepresentations:make-a-consultation-on-label")
: t(
"myrepresentations:make-a-representation-on-label"
)}{" "}
{currentReference}{" "}
</h1>
<div id="rep-form">
<div className="govuk-grid-column-three-quarters wgForm">
{whichControl()}
</div>
<RepresentationTimetablePanel
t={t}
appealIsConsultation={appealIsConsultation}
appealIsLocalImpact={appealIsLocalImpact}
renderDueDate={renderDueDate}
renderStatementsDue={renderStatementsDue}
renderMarineImpact={renderMarineImpact}
renderConsultationClose={renderConsultationClose}
renderFinalCommentsDue={renderFinalCommentsDue}
isQuestionnaire={isQuestionnaire}
whichProgress={whichProgress}
/>
</div>
</>
);
};
export default RepresentationFlowFormStage;
components/case/representation/shell/RepresentationTimetablePanel.js
+49
View File
@@ -0,0 +1,49 @@
const RepresentationTimetablePanel = ({
t,
appealIsConsultation,
appealIsLocalImpact,
renderDueDate,
renderStatementsDue,
renderMarineImpact,
renderConsultationClose,
renderFinalCommentsDue,
isQuestionnaire,
whichProgress
}) => {
return (
<div className="govuk-grid-column-one-quarter">
<div className="card">
<div className="card-body">
<h2 className="govuk-heading-s">
{t("myrepresentations:timetable-title")}
</h2>
<div className="govuk-summary-list">
<div className="govuk-body-s">
{appealIsLocalImpact
? t("myrepresentations:local-impact-report")
: t(
"myrepresentations:questionnaire-due-label"
)}
:{" "}
<span className="govuk-body-s">
{renderDueDate()}
</span>
</div>
{!appealIsConsultation && renderStatementsDue()}
{renderMarineImpact()}
{renderConsultationClose()}
{renderFinalCommentsDue()}
</div>
</div>
</div>
{isQuestionnaire && whichProgress()}
</div>
);
};
export default RepresentationTimetablePanel;
context/representations-refactor-tracker.md
+18
View File
@@ -45,6 +45,24 @@ Status: COMPLETE
Notes: Completed in prior refactor slice work; no additional changes required in this closeout. Notes: Completed in prior refactor slice work; no additional changes required in this closeout.
**Completion notes (this slice):**
- Implemented on feature branch created from `refactor`: `rep-slice-r4-flow-shell`.
- Extracted render-shell structure from `components/case/representation/index.js` into:
- `components/case/representation/shell/RepresentationFlowFormStage.js`
- `components/case/representation/shell/RepresentationTimetablePanel.js`
- Kept `index.js` as orchestration owner (no side-effect migration):
- `onHandleSubmit` unchanged in location/ownership
- `updateRepresentation` unchanged in location/ownership
- upload/PDF/email sequencing unchanged
- stage-resolution/questionnaire decisions remain in `index.js`
- Preserved explicit prop passing; no grouped-prop/view-model abstraction introduced in this slice.
- Validation evidence:
- `npm run lint` completed (warnings only, no new errors).
- `npm run test:reps` completed: **6 passed**.
- Manual APP/IP/Agent/LPA checks: **passed**.
- Manual EN/CY parity checks: **passed**.
--- ---
### Slice R5 — Representation Elements Normalisation ### Slice R5 — Representation Elements Normalisation