From 3a51004f857d573b870de6cb06d27a95c803c416 Mon Sep 17 00:00:00 2001
From: Gabriel Garcia <ggarciaseco@gmail.com>
Date: Fri, 17 Oct 2025 13:19:50 +0200
Subject: [PATCH 1/2] feat(termination) - add form to modify employmentId

---
 example/src/App.tsx         |  4 +--
 example/src/Termination.tsx | 53 +++++++++++++++++++++++++++++++++----
 2 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index e035c0c2..82103e6d 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -26,7 +26,7 @@ import { BasicCostCalculatorLabels } from './BasicCostCalculatorLabels';
 import { CostCalculatorWithResults } from './CostCalculatorWithResults';
 import { CostCalculatorWithExportPdf } from './CostCalculatorWithExportPdf';
 import { CostCalculatorWithPremiumBenefits } from './CostCalculatorWithPremiumBenefits';
-import { Termination } from './Termination';
+import { TerminationForm } from './Termination';
 import { ContractAmendment } from './ContractAmendment';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
@@ -103,7 +103,7 @@ const additionalDemos = [
     id: 'termination',
     title: 'Termination Flow',
     description: 'Process for terminating employments',
-    component: Termination,
+    component: TerminationForm,
     sourceCode: TerminationCode,
   },
   {
diff --git a/example/src/Termination.tsx b/example/src/Termination.tsx
index 2b2a8784..abf1c7c2 100644
--- a/example/src/Termination.tsx
+++ b/example/src/Termination.tsx
@@ -9,6 +9,7 @@ import { RemoteFlows } from './RemoteFlows';
 import { ZendeskTriggerButton } from '@remoteoss/remote-flows/internals';
 import { OffboardingRequestModal } from './OffboardingRequestModal';
 import './css/main.css';
+import { useState } from 'react';
 
 const STEPS = [
   'Employee Communication',
@@ -127,7 +128,7 @@ const MultiStepForm = ({
   }
 };
 
-const TerminationForm = ({
+const TerminationRender = ({
   terminationBag,
   components,
 }: TerminationRenderProps) => {
@@ -178,14 +179,17 @@ const TerminationForm = ({
   );
 };
 
-export const Termination = () => {
-  const EMPLOYMENT_ID = '7df92706-59ef-44a1-91f6-a275b9149994'; // Replace with your actual employment ID
+export const TerminationWithProps = ({
+  employmentId,
+}: {
+  employmentId: string;
+}) => {
   const proxyURL = window.location.origin;
   return (
     <RemoteFlows proxy={{ url: proxyURL }}>
       <TerminationFlow
-        employmentId={EMPLOYMENT_ID}
-        render={TerminationForm}
+        employmentId={employmentId}
+        render={TerminationRender}
         options={{
           jsfModify: {
             // fields for the termination flow are defined here https://github.com/remoteoss/remote-flows/blob/main/src/flows/Termination/json-schemas/jsonSchema.ts#L108
@@ -201,3 +205,42 @@ export const Termination = () => {
     </RemoteFlows>
   );
 };
+
+export const TerminationForm = () => {
+  const [formData, setFormData] = useState<{ employmentId: string }>({
+    employmentId: '', // use your own employment ID
+  });
+  const [showOnboarding, setShowOnboarding] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setShowOnboarding(true);
+  };
+
+  if (showOnboarding) {
+    return <TerminationWithProps {...formData} />;
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className='onboarding-form-container'>
+      <div className='onboarding-form-group'>
+        <label htmlFor='employmentId' className='onboarding-form-label'>
+          Employment ID:
+        </label>
+        <input
+          id='employmentId'
+          type='text'
+          value={formData.employmentId}
+          onChange={(e) =>
+            setFormData((prev) => ({ ...prev, employmentId: e.target.value }))
+          }
+          placeholder='Enter employment ID'
+          className='onboarding-form-input'
+        />
+      </div>
+      <button type='submit' className='onboarding-form-button'>
+        Start Termination
+      </button>
+    </form>
+  );
+};

From 3942bbd5d99dd7e2a70532c9c017bf5898f2833b Mon Sep 17 00:00:00 2001
From: Gabriel Garcia <ggarciaseco@gmail.com>
Date: Fri, 17 Oct 2025 15:20:17 +0200
Subject: [PATCH 2/2] fix termination id

---
 example/src/Termination.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/src/Termination.tsx b/example/src/Termination.tsx
index abf1c7c2..425d01e5 100644
--- a/example/src/Termination.tsx
+++ b/example/src/Termination.tsx
@@ -208,7 +208,7 @@ export const TerminationWithProps = ({
 
 export const TerminationForm = () => {
   const [formData, setFormData] = useState<{ employmentId: string }>({
-    employmentId: '', // use your own employment ID
+    employmentId: '765e8c80-bd4c-4335-8e83-ac5de37652ea', // use your own employment ID
   });
   const [showOnboarding, setShowOnboarding] = useState(false);