adilallo
116 lines
3.7 KiB
TypeScript
116 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { CreateFlowBackendSync } from "./context/CreateFlowBackendSync";
|
|
import {
|
|
CreateFlowProvider,
|
|
useCreateFlow,
|
|
saveCreateFlowDraft,
|
|
} from "./context/CreateFlowContext";
|
|
import { useCreateFlowNavigation } from "./hooks/useCreateFlowNavigation";
|
|
import CreateFlowTopNav from "../components/utility/CreateFlowTopNav";
|
|
import CreateFlowFooter from "../components/utility/CreateFlowFooter";
|
|
import Button from "../components/buttons/Button";
|
|
|
|
/**
|
|
* Layout for the Create Rule Flow
|
|
*
|
|
* Provides a full-screen layout without the root layout's TopNav/Footer.
|
|
* This layout wraps all create flow pages and provides the CreateFlowContext.
|
|
* Includes the create flow-specific TopNav and Footer components.
|
|
*/
|
|
function CreateFlowLayoutContent({ children }: { children: ReactNode }) {
|
|
const router = useRouter();
|
|
const {
|
|
currentStep,
|
|
nextStep,
|
|
previousStep,
|
|
goToNextStep,
|
|
goToPreviousStep,
|
|
} = useCreateFlowNavigation();
|
|
const { state, clearState } = useCreateFlow();
|
|
|
|
const handleExit = (options?: { saveDraft?: boolean }) => {
|
|
const saveDraft = options?.saveDraft ?? false;
|
|
if (!saveDraft && typeof window !== "undefined") {
|
|
const confirmed = window.confirm(
|
|
"Leave create flow? Your progress will be lost.",
|
|
);
|
|
if (!confirmed) return;
|
|
}
|
|
if (saveDraft) {
|
|
saveCreateFlowDraft(state);
|
|
}
|
|
clearState();
|
|
router.push("/");
|
|
};
|
|
|
|
const isCompletedStep = currentStep === "completed";
|
|
const isRightRailStep = currentStep === "right-rail";
|
|
const useFullHeightMain = isCompletedStep || isRightRailStep;
|
|
|
|
return (
|
|
<div
|
|
className={`bg-black flex flex-col ${useFullHeightMain ? "h-screen overflow-hidden" : "min-h-screen"}`}
|
|
>
|
|
<CreateFlowTopNav
|
|
hasShare={isCompletedStep}
|
|
hasExport={isCompletedStep}
|
|
hasEdit={isCompletedStep}
|
|
loggedIn={isCompletedStep}
|
|
onEdit={
|
|
isCompletedStep
|
|
? () => router.push("/create/final-review")
|
|
: undefined
|
|
}
|
|
onExit={handleExit}
|
|
buttonPalette={isCompletedStep ? "inverse" : undefined}
|
|
className={
|
|
isCompletedStep ? "!bg-[var(--color-teal-teal50,#c9fef9)]" : undefined
|
|
}
|
|
/>
|
|
<main
|
|
className={`flex-1 flex min-h-0 justify-center ${useFullHeightMain ? "items-stretch overflow-hidden" : "items-center overflow-auto"}`}
|
|
>
|
|
{children}
|
|
</main>
|
|
{!isCompletedStep && (
|
|
<CreateFlowFooter
|
|
secondButton={
|
|
nextStep ? (
|
|
<Button
|
|
buttonType="filled"
|
|
palette="default"
|
|
size="xsmall"
|
|
className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
|
|
onClick={goToNextStep}
|
|
>
|
|
{currentStep === "final-review"
|
|
? "Finalize CommunityRule"
|
|
: currentStep === "confirm-stakeholders"
|
|
? "Confirm Stakeholders"
|
|
: "Next"}
|
|
</Button>
|
|
) : null
|
|
}
|
|
onBackClick={previousStep ? goToPreviousStep : undefined}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function CreateFlowLayout({
|
|
children,
|
|
}: {
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<CreateFlowProvider>
|
|
<CreateFlowBackendSync />
|
|
<CreateFlowLayoutContent>{children}</CreateFlowLayoutContent>
|
|
</CreateFlowProvider>
|
|
);
|
|
}
|