diff --git a/components/process-progress.tsx b/components/process-progress.tsx
index 126b7948..febd436e 100644
--- a/components/process-progress.tsx
+++ b/components/process-progress.tsx
@@ -8,6 +8,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
import {
CheckCircle2,
Circle,
+ GitBranch,
Loader2,
SkipForward,
Undo2,
@@ -134,6 +135,46 @@ function StepStatusBadge({ status }: { status: StepStatus }) {
);
}
+function BranchPicker({
+ children,
+ onPick,
+ onDismiss,
+}: {
+ children: PurchaseProcessStep[];
+ onPick: (step: PurchaseProcessStep) => void;
+ onDismiss: () => void;
+}) {
+ return (
+
+
+
+ Choose next step
+
+
+ {children.map((child) => (
+
+ ))}
+
+
+
+ );
+}
+
const PURCHASE_PROCESS_KEY = (purchaseId: string) => [
'purchase-process',
purchaseId,
@@ -149,6 +190,9 @@ export function ProcessProgress({
const queryClient = useQueryClient();
const [mutatingStepId, setMutatingStepId] = useState(null);
const [expandedStepId, setExpandedStepId] = useState(null);
+ const [branchPickerParentId, setBranchPickerParentId] = useState<
+ string | null
+ >(null);
const { data, isLoading } = useQuery({
queryKey: PURCHASE_PROCESS_KEY(purchaseId),
@@ -197,6 +241,11 @@ export function ProcessProgress({
),
});
setExpandedStepId(null);
+ const stepChildren = data.steps.filter(
+ (s) => s.parentStepId === step.id,
+ );
+ if (stepChildren.length === 1) setExpandedStepId(stepChildren[0].id);
+ else if (stepChildren.length > 1) setBranchPickerParentId(step.id);
},
},
);
@@ -221,6 +270,7 @@ export function ProcessProgress({
s.id === stepId ? { ...s, completion: null } : s,
),
});
+ setBranchPickerParentId(null);
},
});
void result;
@@ -325,6 +375,18 @@ export function ProcessProgress({
/>
)}
+ {branchPickerParentId === step.id && (
+ s.parentStepId === step.id,
+ )}
+ onPick={(child) => {
+ setBranchPickerParentId(null);
+ setExpandedStepId(child.id);
+ }}
+ onDismiss={() => setBranchPickerParentId(null)}
+ />
+ )}
);
})}