Custom add and create flow polish

app/(app)/create/components/methodEditFields/CommunicationMethodEditFields.tsx

@@ -15,6 +15,8 @@ import type { CommunicationMethodDetailEntry } from "../../types";
 export interface CommunicationMethodEditFieldsProps {
   value: CommunicationMethodDetailEntry;
   onChange: (_next: CommunicationMethodDetailEntry) => void;
+  /** When true, fields are not editable (view mode). */
+  readOnly?: boolean;
 }
 
 const FIELDS: ReadonlyArray<keyof CommunicationMethodDetailEntry> = [
@@ -26,6 +28,7 @@ const FIELDS: ReadonlyArray<keyof CommunicationMethodDetailEntry> = [
 function CommunicationMethodEditFieldsComponent({
   value,
   onChange,
+  readOnly = false,
 }: CommunicationMethodEditFieldsProps) {
   const m = useMessages();
   const t = m.create.customRule.communication;
@@ -49,6 +52,7 @@ function CommunicationMethodEditFieldsComponent({
           rows={6}
           value={value[field]}
           onChange={(v) => patch(field, v)}
+          disabled={readOnly}
         />
       ))}
     </div>

app/(app)/create/components/methodEditFields/ConflictManagementEditFields.tsx

@@ -37,11 +37,13 @@ function conflictDetailWithScopeTextarea(
 export interface ConflictManagementEditFieldsProps {
   value: ConflictManagementDetailEntry;
   onChange: (_next: ConflictManagementDetailEntry) => void;
+  readOnly?: boolean;
 }
 
 function ConflictManagementEditFieldsComponent({
   value,
   onChange,
+  readOnly = false,
 }: ConflictManagementEditFieldsProps) {
   const m = useMessages();
   const t = m.create.customRule.conflictManagement;
@@ -62,6 +64,7 @@ function ConflictManagementEditFieldsComponent({
         label={t.sectionHeadings.corePrinciple}
         value={value.corePrinciple}
         onChange={(v) => patch("corePrinciple", v)}
+        disabled={readOnly}
       />
       <ModalTextAreaField
         label={t.sectionHeadings.applicableScope}
@@ -69,16 +72,19 @@ function ConflictManagementEditFieldsComponent({
         placeholder={t.applicableScopePlaceholder}
         onChange={(v) => onChange(conflictDetailWithScopeTextarea(value, v))}
         rows={4}
+        disabled={readOnly}
       />
       <ModalTextAreaField
         label={t.sectionHeadings.processProtocol}
         value={value.processProtocol}
         onChange={(v) => patch("processProtocol", v)}
+        disabled={readOnly}
       />
       <ModalTextAreaField
         label={t.sectionHeadings.restorationFallbacks}
         value={value.restorationFallbacks}
         onChange={(v) => patch("restorationFallbacks", v)}
+        disabled={readOnly}
       />
     </div>
   );

app/(app)/create/components/methodEditFields/CoreValueEditFields.tsx

@@ -15,11 +15,14 @@ import type { CoreValueDetailEntry } from "../../types";
 export interface CoreValueEditFieldsProps {
   value: CoreValueDetailEntry;
   onChange: (_next: CoreValueDetailEntry) => void;
+  /** View mode until the user taps **Customize**. */
+  readOnly?: boolean;
 }
 
 function CoreValueEditFieldsComponent({
   value,
   onChange,
+  readOnly = false,
 }: CoreValueEditFieldsProps) {
   const m = useMessages();
   const t = m.create.customRule.coreValues.detailModal;
@@ -41,12 +44,14 @@ function CoreValueEditFieldsComponent({
         value={value.meaning}
         onChange={(v) => patch("meaning", v)}
         rows={4}
+        disabled={readOnly}
       />
       <ModalTextAreaField
         label={t.signalsLabel}
         value={value.signals}
         onChange={(v) => patch("signals", v)}
         rows={4}
+        disabled={readOnly}
       />
     </div>
   );

app/(app)/create/components/methodEditFields/DecisionApproachEditFields.tsx

@@ -17,6 +17,7 @@ import type { DecisionApproachDetailEntry } from "../../types";
 export interface DecisionApproachEditFieldsProps {
   value: DecisionApproachDetailEntry;
   onChange: (_next: DecisionApproachDetailEntry) => void;
+  readOnly?: boolean;
 }
 
 const CONSENSUS_LEVEL_MIN = 0;
@@ -26,6 +27,7 @@ const CONSENSUS_LEVEL_STEP = 5;
 function DecisionApproachEditFieldsComponent({
   value,
   onChange,
+  readOnly = false,
 }: DecisionApproachEditFieldsProps) {
   const m = useMessages();
   const t = m.create.customRule.decisionApproaches;
@@ -46,12 +48,14 @@ function DecisionApproachEditFieldsComponent({
         label={t.sectionHeadings.corePrinciple}
         value={value.corePrinciple}
         onChange={(v) => patch("corePrinciple", v)}
+        disabled={readOnly}
       />
       <ApplicableScopeField
         label={t.sectionHeadings.applicableScope}
         addLabel={t.scopeAddButtonLabel}
         scopes={value.applicableScope}
         selectedScopes={value.selectedApplicableScope}
+        readOnly={readOnly}
         onToggleScope={(scope) =>
           patch(
             "selectedApplicableScope",
@@ -68,6 +72,7 @@ function DecisionApproachEditFieldsComponent({
         label={t.sectionHeadings.stepByStepInstructions}
         value={value.stepByStepInstructions}
         onChange={(v) => patch("stepByStepInstructions", v)}
+        disabled={readOnly}
       />
       <IncrementerBlock
         label={t.sectionHeadings.consensusLevel}
@@ -79,11 +84,13 @@ function DecisionApproachEditFieldsComponent({
         formatValue={(v) => `${v}%`}
         decrementAriaLabel="Decrease consensus level"
         incrementAriaLabel="Increase consensus level"
+        disabled={readOnly}
       />
       <ModalTextAreaField
         label={t.sectionHeadings.objectionsDeadlocks}
         value={value.objectionsDeadlocks}
         onChange={(v) => patch("objectionsDeadlocks", v)}
+        disabled={readOnly}
       />
     </div>
   );

app/(app)/create/components/methodEditFields/MembershipMethodEditFields.tsx

@@ -15,6 +15,7 @@ import type { MembershipMethodDetailEntry } from "../../types";
 export interface MembershipMethodEditFieldsProps {
   value: MembershipMethodDetailEntry;
   onChange: (_next: MembershipMethodDetailEntry) => void;
+  readOnly?: boolean;
 }
 
 const FIELDS: ReadonlyArray<keyof MembershipMethodDetailEntry> = [
@@ -26,6 +27,7 @@ const FIELDS: ReadonlyArray<keyof MembershipMethodDetailEntry> = [
 function MembershipMethodEditFieldsComponent({
   value,
   onChange,
+  readOnly = false,
 }: MembershipMethodEditFieldsProps) {
   const m = useMessages();
   const t = m.create.customRule.membership;
@@ -49,6 +51,7 @@ function MembershipMethodEditFieldsComponent({
           rows={6}
           value={value[field]}
           onChange={(v) => patch(field, v)}
+          disabled={readOnly}
         />
       ))}
     </div>