Skip to content

feat(termination) - add form to modify employmentId #508

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(termination) - add form to modify employmentId #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3a51004
feat(termination) - add form to modify employmentId
gabrielseco Oct 17, 2025
3942bbd
fix termination id
gabrielseco Oct 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions example/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -103,7 +103,7 @@ const additionalDemos = [
id: 'termination',
title: 'Termination Flow',
description: 'Process for terminating employments',
component: Termination,
component: TerminationForm,
sourceCode: TerminationCode,
},
{
Expand Down
53 changes: 48 additions & 5 deletions example/src/Termination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -127,7 +128,7 @@ const MultiStepForm = ({
}
};

const TerminationForm = ({
const TerminationRender = ({
terminationBag,
components,
}: TerminationRenderProps) => {
Expand Down Expand Up @@ -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
Expand All @@ -201,3 +205,42 @@ export const Termination = () => {
</RemoteFlows>
);
};

export const TerminationForm = () => {
const [formData, setFormData] = useState<{ employmentId: string }>({
employmentId: '765e8c80-bd4c-4335-8e83-ac5de37652ea', // 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>
);
};
Loading