@remoteoss/remote-flows 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -461
- package/dist/chunk-DARQDP44.js +2 -0
- package/dist/chunk-DARQDP44.js.map +1 -0
- package/dist/chunk-DYB3RWP7.js +20 -0
- package/dist/chunk-DYB3RWP7.js.map +1 -0
- package/dist/chunk-EEWCEZ3D.js +2 -0
- package/dist/chunk-EEWCEZ3D.js.map +1 -0
- package/dist/chunk-FGBEOUQK.js +1 -0
- package/dist/{chunk-DHJSRW7Y.js → chunk-LT4TLUWZ.js} +2 -2
- package/dist/chunk-MVGVWXNH.js +2 -0
- package/dist/chunk-MVGVWXNH.js.map +1 -0
- package/dist/chunk-OLJ2S6A6.js +2 -0
- package/dist/chunk-OLJ2S6A6.js.map +1 -0
- package/dist/chunk-P5PQMJ4T.js +2 -0
- package/dist/chunk-P5PQMJ4T.js.map +1 -0
- package/dist/chunk-VWM3PP54.js +2 -0
- package/dist/chunk-VWM3PP54.js.map +1 -0
- package/dist/chunk-ZEGD25G2.js +2 -0
- package/dist/chunk-ZEGD25G2.js.map +1 -0
- package/dist/chunk-ZG4MN7OJ.js +2 -0
- package/dist/chunk-ZG4MN7OJ.js.map +1 -0
- package/dist/flows/CostCalculator/CostCalculatorDisclaimer.d.ts +8 -0
- package/dist/flows/CostCalculator/CostCalculatorDisclaimer.js +2 -0
- package/dist/flows/CostCalculator/CostCalculatorFlow.d.ts +39 -0
- package/dist/flows/CostCalculator/CostCalculatorFlow.js +2 -0
- package/dist/flows/CostCalculator/CostCalculatorForm.d.ts +29 -0
- package/dist/flows/CostCalculator/CostCalculatorForm.js +2 -0
- package/dist/flows/CostCalculator/CostCalculatorResetButton.d.ts +5 -0
- package/dist/flows/CostCalculator/CostCalculatorResetButton.js +2 -0
- package/dist/flows/CostCalculator/CostCalculatorSubmitButton.d.ts +5 -0
- package/dist/flows/CostCalculator/CostCalculatorSubmitButton.js +2 -0
- package/dist/flows/CostCalculator/Results/CostCalculatorBenefitsBreakdown.d.ts +2 -2
- package/dist/flows/CostCalculator/Results/CostCalculatorContributionsBreakdown.d.ts +2 -2
- package/dist/flows/CostCalculator/Results/CostCalculatorGrossSalary.d.ts +2 -2
- package/dist/flows/CostCalculator/Results/CostCalculatorResults.d.ts +2 -2
- package/dist/flows/CostCalculator/Results/CostCalculatorResults.js +1 -1
- package/dist/flows/CostCalculator/Results/CostCalculatorResultsChart.d.ts +2 -2
- package/dist/flows/CostCalculator/Results/CostCalculatorTotalCost.d.ts +2 -2
- package/dist/flows/CostCalculator/context.d.ts +38 -0
- package/dist/flows/CostCalculator/context.js +2 -0
- package/dist/flows/CostCalculator/context.js.map +1 -0
- package/dist/flows/CostCalculator/disclaimerUtils.d.ts +10 -0
- package/dist/flows/CostCalculator/disclaimerUtils.js +2 -0
- package/dist/flows/CostCalculator/disclaimerUtils.js.map +1 -0
- package/dist/flows/CostCalculator/hooks.d.ts +8 -20
- package/dist/flows/CostCalculator/hooks.js +1 -1
- package/dist/flows/CostCalculator/index.d.ts +9 -4
- package/dist/flows/CostCalculator/index.js +1 -1
- package/dist/flows/CostCalculator/jsonSchema.d.ts +54 -0
- package/dist/flows/CostCalculator/jsonSchema.js +2 -0
- package/dist/flows/CostCalculator/jsonSchema.js.map +1 -0
- package/dist/flows/CostCalculator/types.d.ts +3 -24
- package/dist/flows/CostCalculator/utils.d.ts +3 -2
- package/dist/flows/CostCalculator/utils.js +1 -1
- package/dist/index.d.ts +10 -5
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-2AGPO366.js +0 -2
- package/dist/chunk-2AGPO366.js.map +0 -1
- package/dist/chunk-32G7XF2D.js +0 -2
- package/dist/chunk-32G7XF2D.js.map +0 -1
- package/dist/chunk-56PULCHS.js +0 -2
- package/dist/chunk-56PULCHS.js.map +0 -1
- package/dist/chunk-FX6BYIQS.js +0 -1
- package/dist/chunk-HMDVBCX2.js +0 -1
- package/dist/chunk-K44YP7ZG.js +0 -20
- package/dist/chunk-K44YP7ZG.js.map +0 -1
- package/dist/flows/CostCalculator/CostCalculator.d.ts +0 -65
- package/dist/flows/CostCalculator/CostCalculator.js +0 -2
- package/dist/flows/CostCalculator/Disclaimer/Disclaimer.d.ts +0 -8
- package/dist/flows/CostCalculator/Disclaimer/Disclaimer.js +0 -2
- package/dist/flows/CostCalculator/Disclaimer/index.d.ts +0 -2
- package/dist/flows/CostCalculator/Disclaimer/index.js +0 -2
- package/dist/flows/CostCalculator/fields.d.ts +0 -6
- package/dist/flows/CostCalculator/fields.js +0 -2
- /package/dist/{chunk-FX6BYIQS.js.map → chunk-FGBEOUQK.js.map} +0 -0
- /package/dist/{chunk-DHJSRW7Y.js.map → chunk-LT4TLUWZ.js.map} +0 -0
- /package/dist/{chunk-HMDVBCX2.js.map → flows/CostCalculator/CostCalculatorDisclaimer.js.map} +0 -0
- /package/dist/flows/CostCalculator/{CostCalculator.js.map → CostCalculatorFlow.js.map} +0 -0
- /package/dist/flows/CostCalculator/{Disclaimer/Disclaimer.js.map → CostCalculatorForm.js.map} +0 -0
- /package/dist/flows/CostCalculator/{Disclaimer/index.js.map → CostCalculatorResetButton.js.map} +0 -0
- /package/dist/flows/CostCalculator/{fields.js.map → CostCalculatorSubmitButton.js.map} +0 -0
package/README.md
CHANGED
|
@@ -8,16 +8,9 @@ Welcome to the `@remoteoss/remote-flows` package, a React library that provides
|
|
|
8
8
|
|
|
9
9
|
- [Overview](#overview)
|
|
10
10
|
- [Installation](#installation)
|
|
11
|
-
- [Getting Started](#getting-started)
|
|
12
|
-
- [Basic Setup](#basic-setup)
|
|
13
|
-
- [Simple Cost calculator](#simple-cost-calculator)
|
|
14
|
-
- [Cost Calculator with default values and a custom disclaimer label](#cost-calculator-with-default-values-and-a-custom-disclaimer-label)
|
|
15
|
-
- [Cost calculator with results](#cost-calculator-with-results)
|
|
16
|
-
- [Cost calculator with button that exports results to pdf](#cost-calculator-with-button-that-exports-results-to-pdf)
|
|
17
11
|
- [Components API](#components-api)
|
|
18
12
|
- [RemoteFlows](#remoteflows)
|
|
19
|
-
|
|
20
|
-
- [CostCalculatorResults](#costcalculatorresults)
|
|
13
|
+
- [Docs](#docs)
|
|
21
14
|
- [Authentication](#authentication)
|
|
22
15
|
- [Styling Options](#styling-options)
|
|
23
16
|
- [Using Default Styles](#using-default-styles)
|
|
@@ -33,393 +26,6 @@ Welcome to the `@remoteoss/remote-flows` package, a React library that provides
|
|
|
33
26
|
npm install @remoteoss/remote-flows
|
|
34
27
|
```
|
|
35
28
|
|
|
36
|
-
## Getting Started
|
|
37
|
-
|
|
38
|
-
After installation, import the main CSS file in your application:
|
|
39
|
-
|
|
40
|
-
```css
|
|
41
|
-
@import '@remoteoss/remote-flows/index.css';
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
### Basic Setup
|
|
45
|
-
|
|
46
|
-
#### Simple Cost calculator
|
|
47
|
-
|
|
48
|
-
```tsx
|
|
49
|
-
import { CostCalculator, RemoteFlows } from '@remoteoss/remote-flows';
|
|
50
|
-
import './App.css';
|
|
51
|
-
|
|
52
|
-
const estimationOptions = {
|
|
53
|
-
title: 'Estimate for a new company',
|
|
54
|
-
includeBenefits: true,
|
|
55
|
-
includeCostBreakdowns: true,
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
function CostCalculatorForm() {
|
|
59
|
-
return (
|
|
60
|
-
<CostCalculator
|
|
61
|
-
estimationOptions={estimationOptions}
|
|
62
|
-
defaultValues={{
|
|
63
|
-
countryRegionSlug: 'a1aea868-0e0a-4cd7-9b73-9941d92e5bbe',
|
|
64
|
-
currencySlug: 'eur-acf7d6b5-654a-449f-873f-aca61a280eba',
|
|
65
|
-
salary: '50000',
|
|
66
|
-
}}
|
|
67
|
-
params={{
|
|
68
|
-
disclaimer: {
|
|
69
|
-
label: 'Remote Disclaimer',
|
|
70
|
-
},
|
|
71
|
-
}}
|
|
72
|
-
onSuccess={(response) => console.log({ response })}
|
|
73
|
-
/>
|
|
74
|
-
);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
export function BasicCostCalculator() {
|
|
78
|
-
const fetchToken = () => {
|
|
79
|
-
return fetch('/api/token')
|
|
80
|
-
.then((res) => res.json())
|
|
81
|
-
.then((data) => ({
|
|
82
|
-
accessToken: data.access_token,
|
|
83
|
-
expiresIn: data.expires_in,
|
|
84
|
-
}))
|
|
85
|
-
.catch((error) => {
|
|
86
|
-
console.error({ error });
|
|
87
|
-
throw error;
|
|
88
|
-
});
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
return (
|
|
92
|
-
<RemoteFlows auth={() => fetchToken()}>
|
|
93
|
-
<CostCalculatorForm />
|
|
94
|
-
</RemoteFlows>
|
|
95
|
-
);
|
|
96
|
-
}
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
#### Cost Calculator with default values and a custom disclaimer label
|
|
100
|
-
|
|
101
|
-
```tsx
|
|
102
|
-
import { CostCalculator, RemoteFlows } from '@remoteoss/remote-flows';
|
|
103
|
-
import './App.css';
|
|
104
|
-
|
|
105
|
-
const estimationOptions = {
|
|
106
|
-
title: 'Estimate for a new company',
|
|
107
|
-
includeBenefits: true,
|
|
108
|
-
includeCostBreakdowns: true,
|
|
109
|
-
};
|
|
110
|
-
|
|
111
|
-
function CostCalculatorForm() {
|
|
112
|
-
return (
|
|
113
|
-
<CostCalculator
|
|
114
|
-
defaultValues={{
|
|
115
|
-
countryRegionSlug: 'a1aea868-0e0a-4cd7-9b73-9941d92e5bbe',
|
|
116
|
-
currencySlug: 'eur-acf7d6b5-654a-449f-873f-aca61a280eba',
|
|
117
|
-
salary: '50000',
|
|
118
|
-
}}
|
|
119
|
-
params={{
|
|
120
|
-
disclaimer: {
|
|
121
|
-
label: 'Remote Disclaimer',
|
|
122
|
-
},
|
|
123
|
-
}}
|
|
124
|
-
estimationOptions={estimationOptions}
|
|
125
|
-
onSuccess={(response) => console.log({ response })}
|
|
126
|
-
/>
|
|
127
|
-
);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
export function BasicCostCalculatorWithDefaultValues() {
|
|
131
|
-
const fetchToken = () => {
|
|
132
|
-
return fetch('/api/token')
|
|
133
|
-
.then((res) => res.json())
|
|
134
|
-
.then((data) => ({
|
|
135
|
-
accessToken: data.access_token,
|
|
136
|
-
expiresIn: data.expires_in,
|
|
137
|
-
}))
|
|
138
|
-
.catch((error) => {
|
|
139
|
-
console.error({ error });
|
|
140
|
-
throw error;
|
|
141
|
-
});
|
|
142
|
-
};
|
|
143
|
-
|
|
144
|
-
return (
|
|
145
|
-
<RemoteFlows auth={() => fetchToken()}>
|
|
146
|
-
<CostCalculatorForm />
|
|
147
|
-
</RemoteFlows>
|
|
148
|
-
);
|
|
149
|
-
}
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
#### Cost calculator with results
|
|
153
|
-
|
|
154
|
-
```tsx
|
|
155
|
-
import type { CostCalculatorEstimateResponse } from '@remoteoss/remote-flows';
|
|
156
|
-
import {
|
|
157
|
-
CostCalculator,
|
|
158
|
-
CostCalculatorResults,
|
|
159
|
-
RemoteFlows,
|
|
160
|
-
} from '@remoteoss/remote-flows';
|
|
161
|
-
import { useState } from 'react';
|
|
162
|
-
import './App.css';
|
|
163
|
-
|
|
164
|
-
function CostCalculatorForm() {
|
|
165
|
-
const [estimations, setEstimations] =
|
|
166
|
-
useState<CostCalculatorEstimateResponse | null>(null);
|
|
167
|
-
|
|
168
|
-
const estimationOptions = {
|
|
169
|
-
title: 'Estimate for a new company',
|
|
170
|
-
includeBenefits: true,
|
|
171
|
-
includeCostBreakdowns: true,
|
|
172
|
-
};
|
|
173
|
-
|
|
174
|
-
return (
|
|
175
|
-
<>
|
|
176
|
-
<CostCalculator
|
|
177
|
-
estimationOptions={estimationOptions}
|
|
178
|
-
defaultValues={{
|
|
179
|
-
countryRegionSlug: 'bf098ccf-7457-4556-b2a8-80c48f67cca4',
|
|
180
|
-
currencySlug: 'eur-acf7d6b5-654a-449f-873f-aca61a280eba',
|
|
181
|
-
salary: '50000',
|
|
182
|
-
}}
|
|
183
|
-
params={{
|
|
184
|
-
disclaimer: {
|
|
185
|
-
label: 'Remote Disclaimer',
|
|
186
|
-
},
|
|
187
|
-
}}
|
|
188
|
-
onSuccess={(response) => {
|
|
189
|
-
setEstimations(response);
|
|
190
|
-
}}
|
|
191
|
-
/>
|
|
192
|
-
{estimations && (
|
|
193
|
-
<CostCalculatorResults employmentData={estimations.data} />
|
|
194
|
-
)}
|
|
195
|
-
</>
|
|
196
|
-
);
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
export function CostCalculatoWithResults() {
|
|
200
|
-
const fetchToken = () => {
|
|
201
|
-
return fetch('/api/token')
|
|
202
|
-
.then((res) => res.json())
|
|
203
|
-
.then((data) => ({
|
|
204
|
-
accessToken: data.access_token,
|
|
205
|
-
expiresIn: data.expires_in,
|
|
206
|
-
}))
|
|
207
|
-
.catch((error) => {
|
|
208
|
-
console.error({ error });
|
|
209
|
-
throw error;
|
|
210
|
-
});
|
|
211
|
-
};
|
|
212
|
-
|
|
213
|
-
return (
|
|
214
|
-
<RemoteFlows auth={() => fetchToken()}>
|
|
215
|
-
<CostCalculatorForm />
|
|
216
|
-
</RemoteFlows>
|
|
217
|
-
);
|
|
218
|
-
}
|
|
219
|
-
```
|
|
220
|
-
|
|
221
|
-
#### Cost calculator with button that exports results to pdf
|
|
222
|
-
|
|
223
|
-
```tsx
|
|
224
|
-
import type {
|
|
225
|
-
CostCalculatorEstimateResponse,
|
|
226
|
-
CostCalculatorEstimationFormValues,
|
|
227
|
-
} from '@remoteoss/remote-flows';
|
|
228
|
-
import {
|
|
229
|
-
buildCostCalculatorEstimationPayload,
|
|
230
|
-
CostCalculator,
|
|
231
|
-
RemoteFlows,
|
|
232
|
-
useCostCalculatorEstimationPdf,
|
|
233
|
-
} from '@remoteoss/remote-flows';
|
|
234
|
-
import { useState } from 'react';
|
|
235
|
-
import './App.css';
|
|
236
|
-
|
|
237
|
-
function CostCalculatorForm() {
|
|
238
|
-
const [estimations, setEstimations] =
|
|
239
|
-
useState<CostCalculatorEstimateResponse | null>(null);
|
|
240
|
-
const [payload, setPayload] =
|
|
241
|
-
useState<CostCalculatorEstimationFormValues | null>(null);
|
|
242
|
-
|
|
243
|
-
const estimationOptions = {
|
|
244
|
-
title: 'Estimate for a new company',
|
|
245
|
-
includeBenefits: true,
|
|
246
|
-
includeCostBreakdowns: true,
|
|
247
|
-
};
|
|
248
|
-
|
|
249
|
-
const exportPdfMutation = useCostCalculatorEstimationPdf();
|
|
250
|
-
|
|
251
|
-
const handleExportPdf = () => {
|
|
252
|
-
if (payload) {
|
|
253
|
-
exportPdfMutation.mutate(buildCostCalculatorEstimationPayload(payload), {
|
|
254
|
-
onSuccess: (response) => {
|
|
255
|
-
if (response?.data?.data?.content !== undefined) {
|
|
256
|
-
const a = document.createElement('a');
|
|
257
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
258
|
-
a.href = response.data.data.content as any;
|
|
259
|
-
a.download = 'estimation.pdf';
|
|
260
|
-
document.body.appendChild(a);
|
|
261
|
-
a.click();
|
|
262
|
-
document.body.removeChild(a);
|
|
263
|
-
}
|
|
264
|
-
},
|
|
265
|
-
onError: (error) => {
|
|
266
|
-
console.error({ error });
|
|
267
|
-
},
|
|
268
|
-
});
|
|
269
|
-
}
|
|
270
|
-
};
|
|
271
|
-
|
|
272
|
-
return (
|
|
273
|
-
<>
|
|
274
|
-
<CostCalculator
|
|
275
|
-
estimationOptions={estimationOptions}
|
|
276
|
-
defaultValues={{
|
|
277
|
-
countryRegionSlug: 'bf098ccf-7457-4556-b2a8-80c48f67cca4',
|
|
278
|
-
currencySlug: 'eur-acf7d6b5-654a-449f-873f-aca61a280eba',
|
|
279
|
-
salary: '50000',
|
|
280
|
-
}}
|
|
281
|
-
params={{
|
|
282
|
-
disclaimer: {
|
|
283
|
-
label: 'Remote Disclaimer',
|
|
284
|
-
},
|
|
285
|
-
}}
|
|
286
|
-
onSubmit={(payload) => setPayload(payload)}
|
|
287
|
-
onSuccess={(response) => {
|
|
288
|
-
setEstimations(response);
|
|
289
|
-
}}
|
|
290
|
-
/>
|
|
291
|
-
{estimations && <button onClick={handleExportPdf}>Export as PDF</button>}
|
|
292
|
-
</>
|
|
293
|
-
);
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
export function CostCalculatorWithExportPdf() {
|
|
297
|
-
const fetchToken = () => {
|
|
298
|
-
return fetch('/api/token')
|
|
299
|
-
.then((res) => res.json())
|
|
300
|
-
.then((data) => ({
|
|
301
|
-
accessToken: data.access_token,
|
|
302
|
-
expiresIn: data.expires_in,
|
|
303
|
-
}))
|
|
304
|
-
.catch((error) => {
|
|
305
|
-
console.error({ error });
|
|
306
|
-
throw error;
|
|
307
|
-
});
|
|
308
|
-
};
|
|
309
|
-
|
|
310
|
-
return (
|
|
311
|
-
<RemoteFlows auth={() => fetchToken()}>
|
|
312
|
-
<CostCalculatorForm />
|
|
313
|
-
</RemoteFlows>
|
|
314
|
-
);
|
|
315
|
-
}
|
|
316
|
-
```
|
|
317
|
-
|
|
318
|
-
#### Cost Calculator with premium benefits
|
|
319
|
-
|
|
320
|
-
```tsx
|
|
321
|
-
import type {
|
|
322
|
-
CostCalculatorEstimateResponse,
|
|
323
|
-
CostCalculatorEstimationFormValues,
|
|
324
|
-
} from '@remoteoss/remote-flows';
|
|
325
|
-
import {
|
|
326
|
-
buildCostCalculatorEstimationPayload,
|
|
327
|
-
CostCalculator,
|
|
328
|
-
CostCalculatorResults,
|
|
329
|
-
RemoteFlows,
|
|
330
|
-
useCostCalculatorEstimationPdf,
|
|
331
|
-
} from '@remoteoss/remote-flows';
|
|
332
|
-
import { useState } from 'react';
|
|
333
|
-
import './App.css';
|
|
334
|
-
|
|
335
|
-
function CostCalculatorForm() {
|
|
336
|
-
const [estimations, setEstimations] =
|
|
337
|
-
useState<CostCalculatorEstimateResponse | null>(null);
|
|
338
|
-
const [payload, setPayload] =
|
|
339
|
-
useState<CostCalculatorEstimationFormValues | null>(null);
|
|
340
|
-
|
|
341
|
-
const estimationOptions = {
|
|
342
|
-
title: 'Estimate for a new company',
|
|
343
|
-
includeBenefits: true,
|
|
344
|
-
includeCostBreakdowns: true,
|
|
345
|
-
includePremiumBenefits: true,
|
|
346
|
-
};
|
|
347
|
-
|
|
348
|
-
const exportPdfMutation = useCostCalculatorEstimationPdf();
|
|
349
|
-
|
|
350
|
-
const handleExportPdf = () => {
|
|
351
|
-
if (payload) {
|
|
352
|
-
exportPdfMutation.mutate(
|
|
353
|
-
buildCostCalculatorEstimationPayload(payload, estimationOptions),
|
|
354
|
-
{
|
|
355
|
-
onSuccess: (response) => {
|
|
356
|
-
if (response?.data?.data?.content !== undefined) {
|
|
357
|
-
const a = document.createElement('a');
|
|
358
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
359
|
-
a.href = response.data.data.content as any;
|
|
360
|
-
a.download = 'estimation.pdf';
|
|
361
|
-
document.body.appendChild(a);
|
|
362
|
-
a.click();
|
|
363
|
-
document.body.removeChild(a);
|
|
364
|
-
}
|
|
365
|
-
},
|
|
366
|
-
onError: (error) => {
|
|
367
|
-
console.error({ error });
|
|
368
|
-
},
|
|
369
|
-
},
|
|
370
|
-
);
|
|
371
|
-
}
|
|
372
|
-
};
|
|
373
|
-
|
|
374
|
-
return (
|
|
375
|
-
<>
|
|
376
|
-
<CostCalculator
|
|
377
|
-
estimationOptions={estimationOptions}
|
|
378
|
-
options={{
|
|
379
|
-
disclaimer: {
|
|
380
|
-
label: 'Remote Disclaimer',
|
|
381
|
-
},
|
|
382
|
-
}}
|
|
383
|
-
onSubmit={(payload) => setPayload(payload)}
|
|
384
|
-
onError={(error) => console.error({ error })}
|
|
385
|
-
onSuccess={(response) => {
|
|
386
|
-
setEstimations(response);
|
|
387
|
-
}}
|
|
388
|
-
/>
|
|
389
|
-
{estimations && (
|
|
390
|
-
<div className="cost-calculator__results">
|
|
391
|
-
<CostCalculatorResults employmentData={estimations.data} />
|
|
392
|
-
</div>
|
|
393
|
-
)}
|
|
394
|
-
{estimations && <button onClick={handleExportPdf}>Export as PDF</button>}
|
|
395
|
-
</>
|
|
396
|
-
);
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
function CostCalculatorWithPremiumBenefits() {
|
|
400
|
-
const fetchToken = () => {
|
|
401
|
-
return fetch('/api/token')
|
|
402
|
-
.then((res) => res.json())
|
|
403
|
-
.then((data) => ({
|
|
404
|
-
accessToken: data.access_token,
|
|
405
|
-
expiresIn: data.expires_in,
|
|
406
|
-
}))
|
|
407
|
-
.catch((error) => {
|
|
408
|
-
console.error({ error });
|
|
409
|
-
throw error;
|
|
410
|
-
});
|
|
411
|
-
};
|
|
412
|
-
|
|
413
|
-
return (
|
|
414
|
-
<div className="cost-calculator__container">
|
|
415
|
-
<RemoteFlows auth={() => fetchToken()}>
|
|
416
|
-
<CostCalculatorForm />
|
|
417
|
-
</RemoteFlows>
|
|
418
|
-
</div>
|
|
419
|
-
);
|
|
420
|
-
}
|
|
421
|
-
```
|
|
422
|
-
|
|
423
29
|
## Components API
|
|
424
30
|
|
|
425
31
|
### RemoteFlows
|
|
@@ -429,76 +35,14 @@ The `RemoteFlows` component serves as a provider for authentication and theming.
|
|
|
429
35
|
| Prop | Type | Required | Description |
|
|
430
36
|
| --------------- | ----------------------------------------------------------- | -------- | ------------------------------------------------------------------ |
|
|
431
37
|
| `auth` | `() => Promise<{ accessToken: string, expiresIn: number }>` | Yes | Function to fetch authentication token |
|
|
432
|
-
| `
|
|
38
|
+
| `isTestingMode` | `boolean` | No | When `true`, connects to sandbox environment instead of production |
|
|
433
39
|
| `theme` | `ThemeOptions` | No | Custom theme configuration |
|
|
434
40
|
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
The `CostCalculator` component renders a form for calculating employment costs.
|
|
438
|
-
|
|
439
|
-
| Prop | Type | Required | Description |
|
|
440
|
-
| ------------------ | ---------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------- |
|
|
441
|
-
| `estimationParams` | object | No | Customization for the estimation response (see table below) |
|
|
442
|
-
| `defaultValues` | object | No | Predefined form values (see table below) |
|
|
443
|
-
| `params` | `{ disclaimer?: { label?: string } }` | No | Additional configuration parameters |
|
|
444
|
-
| `onSubmit` | `(payload: CostCalculatorEstimateParams) => void` | No | Callback with the form payload sent to Remote API. Runs before submitting the form to Remote |
|
|
445
|
-
| `onSuccess` | `(response: CostCalculatorEstimateResponse) => void` | No | Callback with the successful estimation data |
|
|
446
|
-
| `onError` | `(error: Error) => void` | No | Error handling callback |
|
|
447
|
-
|
|
448
|
-
#### estimationParams Properties
|
|
449
|
-
|
|
450
|
-
| Property | Type | Description |
|
|
451
|
-
| ----------------------- | --------- | ------------------------------------------------------------ |
|
|
452
|
-
| `title` | `string` | Custom title for the estimation report |
|
|
453
|
-
| `includeBenefits` | `boolean` | If `true`, includes benefits information in the response |
|
|
454
|
-
| `includeCostBreakdowns` | `boolean` | If `true`, includes detailed cost breakdowns in the response |
|
|
455
|
-
|
|
456
|
-
#### defaultValues Properties
|
|
457
|
-
|
|
458
|
-
| Property | Type | Description |
|
|
459
|
-
| ------------------- | -------- | --------------------------- |
|
|
460
|
-
| `countryRegionSlug` | `string` | Pre-selected country/region |
|
|
461
|
-
| `currencySlug` | `string` | Pre-selected currency |
|
|
462
|
-
| `salary` | `string` | Pre-filled salary amount |
|
|
463
|
-
|
|
464
|
-
### CostCalculatorResults
|
|
465
|
-
|
|
466
|
-
A component to display cost calculation results.
|
|
467
|
-
|
|
468
|
-
| Prop | Type | Required | Description |
|
|
469
|
-
| ---------------- | ------------------------------------ | -------- | ---------------------------- |
|
|
470
|
-
| `employmentData` | `CostCalculatorEstimateResponseData` | Yes | The estimation response data |
|
|
471
|
-
|
|
472
|
-
### useCostCalculator
|
|
473
|
-
|
|
474
|
-
The `useCostCalculator` hook provides access to the underlying functionality of the cost calculator, allowing for custom implementations.
|
|
475
|
-
|
|
476
|
-
| Property | Type | Description |
|
|
477
|
-
| ------------------ | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
|
|
478
|
-
| `stepState` | `{ current: number; total: number; isLastStep: boolean }` | Information about the current step in multi-step forms |
|
|
479
|
-
| `fields` | `Field[]` | Array of form field definitions with metadata ([json-schema-form](https://github.com/remoteoss/json-schema-form) format) |
|
|
480
|
-
| `validationSchema` | `yup.Schema` | Yup validation schema for the form |
|
|
481
|
-
| `handleValidation` | `Function` | Function to handle custom field validation |
|
|
482
|
-
| `isSubmitting` | `boolean` | Whether the form is currently submitting |
|
|
483
|
-
| `isLoading` | `boolean` | Whether any required data is still loading |
|
|
484
|
-
| `onSubmit` | `(values: CostCalculatorEstimationFormValues) => Promise<Result<CostCalculatorEstimateResponse, EstimationError>>` | Function to submit the form data to the Remote API |
|
|
485
|
-
| `resetForm` | `Function` | Function that clears country and region selection state |
|
|
486
|
-
|
|
487
|
-
#### Parameters
|
|
488
|
-
|
|
489
|
-
| Parameter | Type | Required | Description |
|
|
490
|
-
| ------------------- | --------------------------------- | -------- | ---------------------------------------------------------------------------------------------- |
|
|
491
|
-
| `defaultRegion` | `string` | No | Pre-selected region slug |
|
|
492
|
-
| `estimationOptions` | `CostCalculatorEstimationOptions` | Yes | Options for the cost estimation (same as `estimationParams` in the `CostCalculator` component) |
|
|
41
|
+
## Docs
|
|
493
42
|
|
|
494
|
-
|
|
43
|
+
Visit the different different docs for each flow
|
|
495
44
|
|
|
496
|
-
|
|
497
|
-
| ------------------------ | --------- | -------------------------------------------------------------------------------------------------------------------------- |
|
|
498
|
-
| `title` | `string` | Custom title for the estimation report |
|
|
499
|
-
| `includeBenefits` | `boolean` | If `true`, includes benefits information in the response |
|
|
500
|
-
| `includeCostBreakdowns` | `boolean` | If `true`, includes detailed cost breakdowns in the response |
|
|
501
|
-
| `includePremiumBenefits` | `boolean` | If `true`, includes premium benefits in the response, if there are no premium benefits available, we'll show core benefits |
|
|
45
|
+
- [Cost Calculator Flow](./src/flows/CostCalculator/README.md)
|
|
502
46
|
|
|
503
47
|
## Authentication
|
|
504
48
|
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{b as n}from"./chunk-HHNKZK2V.js";import{a as e}from"./chunk-ATKR5HCM.js";import{b as r}from"./chunk-OLJ2S6A6.js";import{a as o}from"./chunk-AYDF3IFZ.js";import i from"react";function d(t){let{form:l,formId:m,costCalculatorBag:s}=r();return i.createElement(n,{type:"reset",className:e("RemoteFlows__CostCalculatorForm__ResetButton",t.className),form:m,onClick:u=>{s?.resetForm(),l.reset(),t.onClick?.(u)},...t},t.children)}o(d,"CostCalculatorResetButton");export{d as a};
|
|
2
|
+
//# sourceMappingURL=chunk-DARQDP44.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/flows/CostCalculator/CostCalculatorResetButton.tsx"],"sourcesContent":["import { Button } from '@/src/components/ui/button';\nimport React, { ButtonHTMLAttributes, PropsWithChildren } from 'react';\nimport { useCostCalculatorContext } from './context';\nimport { cn } from '@/src/lib/utils';\n\nexport function CostCalculatorResetButton(\n props: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n) {\n const { form, formId, costCalculatorBag } = useCostCalculatorContext();\n\n return (\n <Button\n type=\"reset\"\n className={cn(\n 'RemoteFlows__CostCalculatorForm__ResetButton',\n props.className,\n )}\n form={formId}\n onClick={(evt) => {\n costCalculatorBag?.resetForm();\n form.reset();\n props.onClick?.(evt);\n }}\n {...props}\n >\n {props.children}\n </Button>\n );\n}\n"],"mappings":"gKACA,OAAOA,MAAwD,QAIxD,SAASC,EACdC,EACA,CACA,GAAM,CAAE,KAAAC,EAAM,OAAAC,EAAQ,kBAAAC,CAAkB,EAAIC,EAAyB,EAErE,OACEC,EAAA,cAACC,EAAA,CACC,KAAK,QACL,UAAWC,EACT,+CACAP,EAAM,SACR,EACA,KAAME,EACN,QAAUM,GAAQ,CAChBL,GAAmB,UAAU,EAC7BF,EAAK,MAAM,EACXD,EAAM,UAAUQ,CAAG,CACrB,EACC,GAAGR,GAEHA,EAAM,QACT,CAEJ,CAvBgBS,EAAAV,EAAA","names":["React","CostCalculatorResetButton","props","form","formId","costCalculatorBag","useCostCalculatorContext","React","Button","cn","evt","__name"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
var e={data:{id:4668194326797,title:"Disclaimer information on Cost of Employment calculations",body:`<h3 id="h_01HHJFVR5Q4F8A52F06EVG289R">Remote disclaimer</h3>
|
|
2
|
+
<p>The estimate provides a transparent detailed breakdown for in-country statutory social contributions, statutory benefits, and other benefits that may be required. Estimates do not take into account additional costs that may be incurred for relocation, visa, right-to-work requirements, or other activities.\xA0</p>
|
|
3
|
+
<p><strong>See also:</strong> <a href="https://support.remote.com/hc/en-us/articles/22329255813133">What other type of costs does the Cost Calculator not include?</a></p>
|
|
4
|
+
<h3 id="h_01HHJFVYRAAGDKJ36EZS8W6P5N">EOR services</h3>
|
|
5
|
+
<p>Our EOR services allow you to retain ownership of your employees' IP and inventions. Compliance, taxes, and payroll are handled by our local teams for a seamless end-to-end experience.</p>
|
|
6
|
+
<h3 id="h_01HHJFW4FQPGPK14FSM4XCY5MR">Pricing and payroll</h3>
|
|
7
|
+
<p>When it comes to payroll, legal and operational complexities are reduced to a single invoice for all of your Remote employees across every country you hire in \u2013 no hidden costs and no long-term commitments needed. Just a simple pricing structure that includes a fixed hiring fee for each EOR employee.</p>
|
|
8
|
+
<h3 id="01JMCR2YZ0GVTCXNPY88TADWQ1">Currency conversions</h3>
|
|
9
|
+
<p>When the employee currency differs from the billing currency, we use market rates to convert. The rate figures on this quote are a rough estimate. When the employee currency differs from the billing currency, we use market rates to convert. The rate figures on this quote are a rough estimated.</p>
|
|
10
|
+
<h3 id="h_01HHJFWD1TFB5DQ6B4WD5F1GY6">Employee off-boarding related costs</h3>
|
|
11
|
+
<p>The estimate here does not include any costs related to off-boarding of employees. Whilst we do not charge any processing fees when you want to off-board an employee, any other costs such as severance pay, covering remaining vacation days and etc will be charged back to you.<br><strong>See also:\xA0</strong><a href="https://support.remote.com/hc/en-us/articles/22329371247885">Are the costs of employee off-boarding included in the Cost Calculator?</a></p>
|
|
12
|
+
<p>Please note the \u2018employee net income estimate\u2019 section (if available for the country) is intended for informational purposes only and should not be used as a substitute for professional financial advice.</p>
|
|
13
|
+
<p>Additionally, tax laws and rates can vary by location and are subject to change, which may not be immediately reflected in the calculator.</p>
|
|
14
|
+
<p>For a detailed and accurate assessment of your take-home pay, please consult with a qualified tax professional or financial advisor.</p>
|
|
15
|
+
<p><strong>See also</strong>: <a href="https://support.remote.com/hc/en-us/articles/25196498469773">How to use the \u2018employee net income estimate\u2019 section in the Cost Calculator?</a></p>
|
|
16
|
+
<p><!-- notionvc: 04d0e276-e0d7-4793-93ee-d4ad14600217 --></p>
|
|
17
|
+
<h3 id="h_01HHJFWTHJ58YAZ87M3E090H4J">Note</h3>
|
|
18
|
+
<p>This estimate is for guidance only and may not constitute accurate financial advice. Information contained in this document is subject to changes in laws in different jurisdictions, which can change without notice. This document is the property of Remote, is confidential, cannot be reproduced without permission, and cannot be disclosed to any third parties.</p>
|
|
19
|
+
<p><!-- notionvc: 09e777b4-c10c-438e-bb95-ce1f3fb86c9a --></p>`,html_url:"https://support.remote.com/hc/en-us/articles/4668194326797-Disclaimer-information-on-Cost-of-Employment-calculations"}};export{e as a};
|
|
20
|
+
//# sourceMappingURL=chunk-DYB3RWP7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/flows/CostCalculator/disclaimerUtils.ts"],"sourcesContent":["export const disclaimerData = {\n data: {\n id: 4668194326797,\n title: 'Disclaimer information on Cost of Employment calculations',\n body: '<h3 id=\"h_01HHJFVR5Q4F8A52F06EVG289R\">Remote disclaimer</h3>\\n<p>The estimate provides a transparent detailed breakdown for in-country statutory social contributions, statutory benefits, and other benefits that may be required. Estimates do not take into account additional costs that may be incurred for relocation, visa, right-to-work requirements, or other activities. </p>\\n<p><strong>See also:</strong> <a href=\"https://support.remote.com/hc/en-us/articles/22329255813133\">What other type of costs does the Cost Calculator not include?</a></p>\\n<h3 id=\"h_01HHJFVYRAAGDKJ36EZS8W6P5N\">EOR services</h3>\\n<p>Our EOR services allow you to retain ownership of your employees\\' IP and inventions. Compliance, taxes, and payroll are handled by our local teams for a seamless end-to-end experience.</p>\\n<h3 id=\"h_01HHJFW4FQPGPK14FSM4XCY5MR\">Pricing and payroll</h3>\\n<p>When it comes to payroll, legal and operational complexities are reduced to a single invoice for all of your Remote employees across every country you hire in – no hidden costs and no long-term commitments needed. Just a simple pricing structure that includes a fixed hiring fee for each EOR employee.</p>\\n<h3 id=\"01JMCR2YZ0GVTCXNPY88TADWQ1\">Currency conversions</h3>\\n<p>When the employee currency differs from the billing currency, we use market rates to convert. The rate figures on this quote are a rough estimate. When the employee currency differs from the billing currency, we use market rates to convert. The rate figures on this quote are a rough estimated.</p>\\n<h3 id=\"h_01HHJFWD1TFB5DQ6B4WD5F1GY6\">Employee off-boarding related costs</h3>\\n<p>The estimate here does not include any costs related to off-boarding of employees. Whilst we do not charge any processing fees when you want to off-board an employee, any other costs such as severance pay, covering remaining vacation days and etc will be charged back to you.<br><strong>See also: </strong><a href=\"https://support.remote.com/hc/en-us/articles/22329371247885\">Are the costs of employee off-boarding included in the Cost Calculator?</a></p>\\n<p>Please note the ‘employee net income estimate’ section (if available for the country) is intended for informational purposes only and should not be used as a substitute for professional financial advice.</p>\\n<p>Additionally, tax laws and rates can vary by location and are subject to change, which may not be immediately reflected in the calculator.</p>\\n<p>For a detailed and accurate assessment of your take-home pay, please consult with a qualified tax professional or financial advisor.</p>\\n<p><strong>See also</strong>: <a href=\"https://support.remote.com/hc/en-us/articles/25196498469773\">How to use the ‘employee net income estimate’ section in the Cost Calculator?</a></p>\\n<p><!-- notionvc: 04d0e276-e0d7-4793-93ee-d4ad14600217 --></p>\\n<h3 id=\"h_01HHJFWTHJ58YAZ87M3E090H4J\">Note</h3>\\n<p>This estimate is for guidance only and may not constitute accurate financial advice. Information contained in this document is subject to changes in laws in different jurisdictions, which can change without notice. This document is the property of Remote, is confidential, cannot be reproduced without permission, and cannot be disclosed to any third parties.</p>\\n<p><!-- notionvc: 09e777b4-c10c-438e-bb95-ce1f3fb86c9a --></p>',\n html_url:\n 'https://support.remote.com/hc/en-us/articles/4668194326797-Disclaimer-information-on-Cost-of-Employment-calculations',\n },\n};\n"],"mappings":"AAAO,IAAMA,EAAiB,CAC5B,KAAM,CACJ,GAAI,cACJ,MAAO,4DACP,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gEACN,SACE,sHACJ,CACF","names":["disclaimerData"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as H,b as V}from"./chunk-HHNKZK2V.js";import{a}from"./chunk-ATKR5HCM.js";import{b as q}from"./chunk-OLJ2S6A6.js";import{a as r}from"./chunk-AYDF3IFZ.js";import $ from"react";import tt from"react";import{CalendarIcon as Ve}from"lucide-react";import*as f from"react";import{useFormContext as Me}from"react-hook-form";import*as A from"react";import{ChevronLeft as Se,ChevronRight as Ne}from"lucide-react";import{DayPicker as we}from"react-day-picker";function K({className:e,classNames:t,showOutsideDays:o=!0,...n}){return A.createElement(we,{showOutsideDays:o,className:a("p-3",e),classNames:{months:"flex flex-col sm:flex-row gap-2",month:"flex flex-col gap-4",caption:"flex justify-center pt-1 relative items-center w-full",caption_label:"text-sm font-medium",nav:"flex items-center gap-1",nav_button:a(H({variant:"outline"}),"size-7 bg-transparent p-0 opacity-50 hover:opacity-100"),nav_button_previous:"absolute left-1",nav_button_next:"absolute right-1",table:"w-full border-collapse space-x-1",head_row:"flex",head_cell:"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",row:"flex w-full mt-2",cell:a("relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",n.mode==="range"?"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md":"[&:has([aria-selected])]:rounded-md"),day:a(H({variant:"ghost"}),"size-8 p-0 font-normal aria-selected:opacity-100"),day_range_start:"day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",day_range_end:"day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",day_selected:"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",day_today:"bg-accent text-accent-foreground",day_outside:"day-outside text-muted-foreground aria-selected:text-muted-foreground",day_disabled:"text-muted-foreground opacity-50",day_range_middle:"aria-selected:bg-accent aria-selected:text-accent-foreground",day_hidden:"invisible",...t},components:{IconLeft:r(({className:i,...l})=>A.createElement(Se,{className:a("size-4",i),...l}),"IconLeft"),IconRight:r(({className:i,...l})=>A.createElement(Ne,{className:a("size-4",i),...l}),"IconRight")},...n})}r(K,"Calendar");import*as u from"react";import{Slot as Ie}from"@radix-ui/react-slot";import{Controller as Te,FormProvider as ke,useFormContext as Le,useFormState as De}from"react-hook-form";import*as X from"react";import*as Y from"@radix-ui/react-label";function Q({className:e,...t}){return X.createElement(Y.Root,{"data-slot":"label",className:a("flex items-center gap-2 text-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",e),...t})}r(Q,"Label");var Z=ke,ee=u.createContext({}),b=r(({...e})=>u.createElement(ee.Provider,{value:{name:e.name}},u.createElement(Te,{...e})),"FormField"),G=r(()=>{let e=u.useContext(ee),t=u.useContext(te),{getFieldState:o}=Le(),n=De({name:e.name}),i=o(e.name,n);if(!e)throw new Error("useFormField should be used within <FormField>");let{id:l}=t;return{id:l,name:e.name,formItemId:`${l}-form-item`,formDescriptionId:`${l}-form-item-description`,formMessageId:`${l}-form-item-message`,...i}},"useFormField"),te=u.createContext({});function v({className:e,...t}){let o=u.useId();return u.createElement(te.Provider,{value:{id:o}},u.createElement("div",{"data-slot":"form-item",className:a("grid gap-2",e),...t}))}r(v,"FormItem");function x({className:e,...t}){let{error:o,formItemId:n}=G();return u.createElement(Q,{"data-slot":"form-label","data-error":!!o,className:a("text-base-color mb-1 data-[error=true]:text-destructive",e),htmlFor:n,...t})}r(x,"FormLabel");var g=u.forwardRef(({...e},t)=>{let{error:o,formItemId:n,formDescriptionId:i,formMessageId:l}=G();return u.createElement(Ie,{"data-slot":"form-control",ref:t,id:n,"aria-describedby":o?`${i} ${l}`:`${i}`,"aria-invalid":!!o,...e})});g.displayName="FormControl";function C({className:e,...t}){let{formDescriptionId:o}=G();return u.createElement("p",{"data-slot":"form-description",id:o,className:a("text-base-color text-sm",e),...t})}r(C,"FormDescription");function P({className:e,...t}){let{error:o,formMessageId:n}=G(),i=o?String(o?.message??""):t.children;return i?u.createElement("p",{"data-slot":"form-message",id:n,className:a("text-destructive text-sm",e),...t},i):null}r(P,"FormMessage");import*as M from"react";import*as S from"@radix-ui/react-popover";function oe({...e}){return M.createElement(S.Root,{"data-slot":"popover",...e})}r(oe,"Popover");function re({...e}){return M.createElement(S.Trigger,{"data-slot":"popover-trigger",...e})}r(re,"PopoverTrigger");function ae({className:e,align:t="center",sideOffset:o=4,...n}){return M.createElement(S.Portal,null,M.createElement(S.Content,{"data-slot":"popover-content",align:t,sideOffset:o,className:a("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",e),...n}))}r(ae,"PopoverContent");import{PopoverClose as Ee}from"@radix-ui/react-popover";import{format as Be}from"date-fns";function ie({description:e,label:t,name:o}){let{control:n}=Me();return f.createElement(b,{control:n,name:o,render:({field:i})=>f.createElement(v,{className:`flex flex-col RemoteFlows__DatePickerField__Item__${o}`},f.createElement(x,{className:"RemoteFlows__DatePickerField__Label"},t),f.createElement(oe,null,f.createElement(re,{asChild:!0},f.createElement(g,null,f.createElement("div",null,f.createElement(V,{variant:"outline",className:a("w-full pl-3 text-left font-normal",!i.value&&"text-muted-foreground")},i.value?f.createElement(f.Fragment,null,Be(i.value,"yyyy-MM-dd")):f.createElement("span",null,"Pick a date"),f.createElement(Ve,{className:"ml-auto h-4 w-4 opacity-50"}))))),f.createElement(ae,{className:"w-auto p-0 RemoteFlows__DatepickerField__PopoverContent",align:"start"},f.createElement(K,{mode:"single",className:"RemoteFlows__DatepickerField__Calendar",selected:i.value,onSelect:i.onChange,components:{DayContent:r(l=>f.createElement(Ee,null,l.date.getDate()),"DayContent")},disabled:l=>l<new Date("1900-01-01")}))),e?f.createElement(C,null,e):null,f.createElement(P,null))})}r(ie,"DatePickerField");import*as k from"react";function ne({label:e,name:t,fields:o,description:n}){return k.createElement("fieldset",{className:a("border-1 border-input p-4 rounded-xl",`RemoteFlows__FieldSetField__${t}`)},k.createElement("legend",{className:"text-sm font-semibold px-2"},e),n?k.createElement("div",{className:"mb-5 RemoteFlows__FieldSetField__Description",dangerouslySetInnerHTML:{__html:n}}):null,k.createElement("div",{className:"grid gap-4"},o.map(i=>{let l=z[i.type];return k.createElement(l,{...i,key:i.name,name:`${t}.${i.name}`})})))}r(ne,"FieldSetField");import*as N from"react";import{useFormContext as $e}from"react-hook-form";import y,{useState as Ae,useRef as Ge}from"react";import{Upload as ze,X as Ue}from"lucide-react";function le({onChange:e,className:t,multiple:o}){let[n,i]=Ae([]),l=Ge(null),p=r(()=>{l.current?.click()},"handleClick"),F=r(c=>{if(c.target.files&&c.target.files.length>0){let I=Array.from(c.target.files);i(I),e(c)}},"handleChange"),m=r(c=>{i(I=>I.filter(Re=>Re!==c))},"onRemoveFile");return y.createElement("div",{className:a("flex flex-col items-start gap-4",t)},y.createElement("input",{type:"file",ref:l,onChange:F,className:"hidden","aria-label":"File upload",multiple:o}),y.createElement(V,{onClick:p,className:"gap-2"},y.createElement(ze,{className:"h-4 w-4"}),"Choose File"),n.length===0&&y.createElement("div",{className:"text-sm"},o?y.createElement("span",{className:"font-medium"},"No files selected. You can select multiple files"):y.createElement("span",{className:"font-medium"},"No file selected.")),n.length>0&&n.map((c,I)=>y.createElement("div",{key:I,className:"text-sm flex items-center gap-2"},"Selected file: ",y.createElement("span",{className:"font-medium"},c.name)," (",Math.round(c.size/1024)," KB)",y.createElement(V,{variant:"ghost",onClick:()=>m(c)},y.createElement(Ue,null)))))}r(le,"FileUploader");function se({name:e,description:t,label:o,multiple:n,onChange:i}){let{control:l}=$e();return N.createElement(b,{control:l,name:e,render:({field:p,fieldState:F})=>N.createElement(v,{className:`RemoteFlows__FileUpload__Item__${e}`},N.createElement(x,{className:"RemoteFlows__FileUpload__Label"},o),N.createElement(g,null,N.createElement(le,{...p,onChange:m=>{p.onChange(m),i?.(m)},multiple:n,className:a("RemoteFlows__FileUpload__Input")})),t&&N.createElement("div",{className:"flex items-center justify-between"},N.createElement(C,{className:"RemoteFlows__FileUpload__Description"},t)),F.error&&N.createElement(P,{className:"RemoteFlows__FileUpload__Error"}))})}r(se,"FileUploadField");import*as L from"@radix-ui/react-radio-group";import{CircleIcon as He}from"lucide-react";import*as E from"react";function me({className:e,...t}){return E.createElement(L.Root,{"data-slot":"radio-group",className:a("grid gap-3",e),...t})}r(me,"RadioGroup");function ce({className:e,...t}){return E.createElement(L.Item,{"data-slot":"radio-group-item",className:a("border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",e),...t},E.createElement(L.Indicator,{"data-slot":"radio-group-indicator",className:"relative flex items-center justify-center"},E.createElement(He,{className:"fill-radio absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2"})))}r(ce,"RadioGroupItem");import*as h from"react";import{useFormContext as je}from"react-hook-form";function de({name:e,defaultValue:t,description:o,label:n,options:i}){let{control:l}=je();return h.createElement(b,{control:l,name:e,defaultValue:t,render:({field:p,fieldState:F})=>h.createElement(v,{className:a("space-y-3",`RemoteFlows__RadioGroupField__Item__${e}`)},h.createElement(x,null,n),h.createElement(g,null,h.createElement(me,{onValueChange:p.onChange,defaultValue:p.value,className:"flex flex-col space-y-1"},i.map(m=>h.createElement(v,{key:m.value,className:"flex items-center space-x-3 space-y-0 gap-0 RemoteFlows__RadioField__Item"},h.createElement(g,null,h.createElement(ce,{value:m.value,className:"RemoteFlows__RadioField__Input"})),h.createElement(x,{className:"font-normal mb-0 RemoteFlows__RadioField__Label"},m.label))))),o&&h.createElement(C,null,o),F.error&&h.createElement(P,null))})}r(de,"RadioGroupField");import*as _ from"react";import*as d from"react";import*as s from"@radix-ui/react-select";import{CheckIcon as Oe,ChevronDownIcon as pe,ChevronUpIcon as We}from"lucide-react";function ue({...e}){return d.createElement(s.Root,{"data-slot":"select",...e})}r(ue,"Select");function fe({...e}){return d.createElement(s.Group,{"data-slot":"select-group",...e})}r(fe,"SelectGroup");function Fe({...e}){return d.createElement(s.Value,{"data-slot":"select-value",...e})}r(Fe,"SelectValue");function ge({className:e,children:t,...o}){return d.createElement(s.Trigger,{"data-slot":"select-trigger",className:a("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-full items-center justify-between rounded-xl border bg-transparent px-4 py-7 text-sm whitespace-nowrap transition-[color] outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4","focus-visible:border-focused",e),...o},t,d.createElement(s.Icon,{asChild:!0,className:"absolute right-4"},d.createElement(pe,{className:"size-4"})))}r(ge,"SelectTrigger");function ve({className:e,children:t,position:o="popper",...n}){return d.createElement(s.Portal,null,d.createElement(s.Content,{"data-slot":"select-content",className:a("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border",o==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",e),position:o,...n},d.createElement(Je,null),d.createElement(s.Viewport,{className:a(o==="popper"&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1")},t),d.createElement(qe,null)))}r(ve,"SelectContent");function xe({className:e,children:t,...o}){return d.createElement(s.Item,{"data-slot":"select-item",className:a("focus:bg-accent focus:text-accent-foreground min-h-11 justify-between [&_svg:not([class*='text-'])]:text-muted-foreground flex w-full cursor-default items-center gap-2 py-2 px-4 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",e),...o},d.createElement(s.ItemText,null,t),d.createElement("span",{className:"flex size-3.5 items-center justify-center"},d.createElement(s.ItemIndicator,null,d.createElement(Oe,{className:"size-4"}))))}r(xe,"SelectItem");function Je({className:e,...t}){return d.createElement(s.ScrollUpButton,{"data-slot":"select-scroll-up-button",className:a("flex cursor-default items-center justify-center py-1",e),...t},d.createElement(We,{className:"size-4"}))}r(Je,"SelectScrollUpButton");function qe({className:e,...t}){return d.createElement(s.ScrollDownButton,{"data-slot":"select-scroll-down-button",className:a("flex cursor-default items-center justify-center py-1",e),...t},d.createElement(pe,{className:"size-4"}))}r(qe,"SelectScrollDownButton");import{useFormContext as Ke}from"react-hook-form";function _e({label:e,name:t,options:o,defaultValue:n,description:i,onChange:l}){let{control:p}=Ke();return _.createElement(b,{defaultValue:n,control:p,name:t,render:({field:F,fieldState:m})=>_.createElement(v,{className:`RemoteFlows__SelectField__Item__${t}`},_.createElement(x,{className:"RemoteFlows__SelectField__Label"},e),_.createElement(g,{"aria-label":e},_.createElement("div",{className:"relative"},_.createElement(ue,{value:F.value||"",onValueChange:c=>{F.onChange(c),l?.(c)}},_.createElement(ge,{className:"RemoteFlows__SelectField__Trigger","aria-invalid":!!m.error},_.createElement("span",{className:"absolute"},_.createElement(Fe,{placeholder:e}))),_.createElement(ve,{className:"RemoteFlows__SelectField__Content"},_.createElement(fe,{className:"RemoteFlows__SelectField__Group"},o.map(c=>_.createElement(xe,{key:c.value,value:c.value,className:"RemoteFlows__SelectField__SelectItem"},c.label))))))),i&&_.createElement(C,null,i),m.error&&_.createElement(P,null))})}r(_e,"SelectField");import*as T from"react";import{useFormContext as Xe}from"react-hook-form";import*as be from"react";function Ce({className:e,type:t,...o}){return be.createElement("input",{type:t,"data-slot":"input",className:a("shadow-xs border-input file:text-foreground placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-xl border bg-transparent px-4 py-7 text-sm transition-[color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm","focus-visible:border-focused","aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",e),...o})}r(Ce,"Input");var Ye={type:"text",inputMode:"decimal",pattern:"^[0-9.]*$"};function j({name:e,description:t,label:o,type:n,onChange:i}){let{control:l}=Xe(),F=n==="number"?Ye:{type:n};return T.createElement(b,{control:l,name:e,render:({field:m,fieldState:c})=>T.createElement(v,{className:`RemoteFlows__TextField__Item__${e}`},T.createElement(x,{className:"RemoteFlows__TextField__Label"},o),T.createElement(g,null,T.createElement(Ce,{...m,value:m.value??"",onChange:I=>{m.onChange(I),i?.(I)},...F,className:"RemoteFlows__TextField__Input",placeholder:o})),t&&T.createElement(C,{className:"RemoteFlows__TextField__Description"},t),c.error&&T.createElement(P,{className:"RemoteFlows__TextField__Error"}))})}r(j,"TextField");import*as D from"react";import*as B from"@radix-ui/react-checkbox";import{Check as Qe}from"lucide-react";var O=D.forwardRef(({className:e,...t},o)=>D.createElement(B.Root,{ref:o,className:a("peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-checkbox data-[state=checked]:text-primary",e),...t},D.createElement(B.Indicator,{className:a("flex items-center justify-center text-current")},D.createElement(Qe,{className:"h-4 w-4"}))));O.displayName=B.Root.displayName;import*as w from"react";import{useFormContext as Ze}from"react-hook-form";function Pe({name:e,defaultValue:t,description:o,label:n}){let{control:i}=Ze();return w.createElement(b,{control:i,name:e,defaultValue:t,render:({field:l,fieldState:p})=>w.createElement(v,{className:a(`RemoteFlows__CheckBoxField__Item__${e}`)},w.createElement(g,null,w.createElement("div",{className:"flex space-x-2"},w.createElement(O,{id:e,onCheckedChange:l.onChange,checked:l.value,className:"RemoteFlows__CheckBox__Input"}),w.createElement(x,{htmlFor:e,className:"mb-0 RemoteFlows__CheckBox__Label"},n))),o&&w.createElement(C,null,o),p.error&&w.createElement(P,null))})}r(Pe,"CheckBoxField");import*as R from"react";import{useFormContext as et}from"react-hook-form";import*as U from"react";var W=U.forwardRef(({className:e,...t},o)=>U.createElement("textarea",{className:a("flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",e),ref:o,...t}));W.displayName="Textarea";function he({name:e,description:t,label:o,onChange:n,maxLength:i}){let{control:l}=et();return R.createElement(b,{control:l,name:e,render:({field:p,fieldState:F})=>{let m=p.value?.length??0;return R.createElement(v,{className:`RemoteFlows__TextArea__Item__${e}`},R.createElement(x,{className:"RemoteFlows__TextArea__Label"},o),R.createElement(g,null,R.createElement(W,{...p,value:p.value??"",onChange:c=>{p.onChange(c),n?.(c)},className:a(F.error&&"border-red-500 focus-visible:ring-red-500","RemoteFlows__TextArea__Input"),placeholder:o})),(t||i)&&R.createElement("div",{className:"flex items-center justify-between"},t&&R.createElement(C,{className:"RemoteFlows__TextArea__Description"},t),i&&R.createElement("span",{className:"text-sm ml-auto RemoteFlows__TextArea__MaxLength"},m,"/",i)),F.error&&R.createElement(P,{className:"RemoteFlows__TextArea__Error"}))}})}r(he,"TextAreaField");var z={checkbox:Pe,text:j,select:_e,radio:de,number:r(e=>tt.createElement(j,{...e,type:"text"}),"number"),file:se,fieldset:ne,date:ie,textarea:he};var ye=r(({fields:e})=>!e||e.length===0?null:$.createElement($.Fragment,null,e.map(t=>{if(t.isVisible===!1||t.deprecated)return null;let o=z[t.inputType];return o?$.createElement(o,{key:t.name,...t}):$.createElement("p",{className:"error"},"Field type ",t.inputType," not supported")})),"JSONSchemaFormFields");import J from"react";function nr({onSubmit:e,onError:t,onSuccess:o}){let{form:n,formId:i,costCalculatorBag:l}=q(),p=r(async F=>{let m=await l?.onSubmit(F);await e?.(F),m?.error?t?.(m.error):m?.data&&o?.(m?.data)},"handleSubmit");return J.createElement(Z,{...n},J.createElement("form",{id:i,onSubmit:n.handleSubmit(p),className:"space-y-4 RemoteFlows__CostCalculatorForm"},J.createElement(ye,{fields:l?.fields??[]})))}r(nr,"CostCalculatorForm");export{nr as a};
|
|
2
|
+
//# sourceMappingURL=chunk-EEWCEZ3D.js.map
|