Flow Exit Implementation

import * as React from 'react';
import useConfirmBeforeLeave from 'app/core/components/useConfirmBeforeLeave.hook';
import { Navigate } from 'app/routes/routerV6/reactRouterDom';
import Flow from '../../../Flow';
import type { FlowRoutesConfig } from '../../../flow.types';
import Page1 from './page1';
import Page2 from './page2';
import Page3 from './page3';

export const flowRoutesConfig: FlowRoutesConfig[] = [
  {
    element: <Navigate to="page1" replace />,
    index: true,
  },
  {
    path: 'page1',
    element: <Page1 />,
    flowProps: {
      label: 'page1',
      description: "Learn about Rippling's most powerful feature",
    },
  },
  {
    path: 'page2',
    element: <Page2 />,
    flowProps: {
      label: 'page2',
      description: "Learn about Rippling's most powerful feature",
    },
  },
  {
    path: 'page3',
    element: <Page3 />,
    flowProps: {
      label: 'page3',
      description: "Learn about Rippling's most powerful feature",
    },
  },
];

const ConfirmBeforeLeaveComponent = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const [draft, setDraft] = React.useState(false);

  useConfirmBeforeLeave(
    nextLocation => {
      console.log({ nextLocation });
      return draft;
    }, // Simplified - always block navigation
    {
      title: 'Are you sure you want to leave?',
      message: 'You have unsaved changes.',
      cancelButtonLabel: 'Cancel',
      proceedButtonLabel: 'Leave',
    }
  );

  React.useEffect(() => {
    setTimeout(() => {
      setDraft(true);
    }, 7000);
  }, []);

  console.log({ children, draft });

  return children;
};

export default {
  path: 'basic/*',
  element: (
    <ConfirmBeforeLeaveComponent>
      <Flow
        path="basic"
        version={21}
        label="Sample Flow"
        resumable
        supportEmail="implementation@rippling.com"
        baseUrlPrefix="/docs/core/flow/demos"
        onFlowFinishUrl="/docs/core/flow"
        onSaveAndExit={{
          label: 'Save',
          onClick: () => {
            appNavigator.push('/docs/core/flow');
          },
        }}
        routesConfig={flowRoutesConfig}
      />
    </ConfirmBeforeLeaveComponent>
  ),
};