@remoteoss/remote-flows 0.0.3 → 0.0.4
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 +4 -460
- package/dist/chunk-6RRSUL7Q.js +2 -0
- package/dist/{chunk-K44YP7ZG.js.map → chunk-6RRSUL7Q.js.map} +1 -1
- 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-KEV7VRZ5.js +2 -0
- package/dist/chunk-KEV7VRZ5.js.map +1 -0
- package/dist/{chunk-DHJSRW7Y.js → chunk-LT4TLUWZ.js} +2 -2
- 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-ZEGD25G2.js +2 -0
- package/dist/chunk-ZEGD25G2.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 +36 -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/CostCalculatorSubmitButton.js.map +1 -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 +2 -17
- 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/types.d.ts +1 -1
- package/dist/flows/CostCalculator/utils.js +1 -1
- package/dist/index.d.ts +9 -4
- package/dist/index.js +1 -1
- package/package.json +1 -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/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/{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/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
|
|
@@ -432,73 +38,11 @@ The `RemoteFlows` component serves as a provider for authentication and theming.
|
|
|
432
38
|
| `isTestingProp` | `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{a as u}from"./chunk-2AGPO366.js";import{c as T}from"./chunk-ATKR5HCM.js";import{a as t}from"./chunk-AYDF3IFZ.js";import{object as fe}from"yup";import{formDataBodySerializer as be}from"@hey-api/client-fetch";import{createClient as Q,createConfig as Y}from"@hey-api/client-fetch";var l=Q(Y({baseUrl:"https://gateway.remote.com/"}));var D=t(e=>(e.client??l).post({security:[{scheme:"bearer",type:"http"}],url:"/v1/cost-calculator/estimation",...e,headers:{"Content-Type":"application/json",...e?.headers}}),"postCreateEstimation");var G=t(e=>(e?.client??l).post({security:[{scheme:"bearer",type:"http"}],url:"/v1/cost-calculator/estimation-pdf",...e,headers:{"Content-Type":"application/json",...e?.headers}}),"postCreateEstimationPdf");var I=t(e=>(e.client??l).get({security:[{scheme:"bearer",type:"http"}],url:"/v1/cost-calculator/countries",...e}),"getIndexCountry");var v=t(e=>(e.client??l).get({security:[{scheme:"bearer",type:"http"}],url:"/v1/cost-calculator/regions/{slug}/fields",...e}),"getShowRegionField");var S=t(e=>(e?.client??l).get({security:[{scheme:"bearer",type:"http"}],url:"/v1/company-currencies",...e}),"getIndexCompanyCurrency");import{createClient as se}from"@hey-api/client-fetch";import{QueryClient as ie,QueryClientProvider as le,useQuery as pe}from"@tanstack/react-query";import C,{createContext as ce,useContext as he,useRef as q}from"react";var U={staging:"https://gateway.niceremote.com",partners:"https://gateway.partners.remote-sandbox.com",production:"https://gateway.remote.com"};function y(e){let r=document.documentElement;Object.keys(e).forEach(n=>{let o=e[n];o&&r.style.setProperty(n,o)})}t(y,"setCssProperties");function $(e){let r={};return Object.keys(e).forEach(n=>{r[`--${n}`]=e[n]}),r}t($,"mapThemeColors");function X(e){return{"--spacing":e}}t(X,"mapThemeSpacing");function Z(e){return{"--radius":e}}t(Z,"mapThemeBorderRadius");function ee(e){return{"--fontSizeBase":e.fontSizeBase}}t(ee,"mapThemeFont");function k(e){e?.colors&&y($(e.colors)),e?.spacing&&y(X(e.spacing)),e?.borderRadius&&y(Z(e.borderRadius)),e?.font&&y(ee(e.font))}t(k,"applyTheme");import te,{createContext as re,useEffect as oe,useMemo as ne}from"react";var ae=re({theme:{}});function B(e){oe(()=>{e.theme&&Object.keys(e.theme).length>0&&k(e.theme)},[e.theme]);let r=ne(()=>({theme:e.theme}),[e.theme]);return te.createElement(ae.Provider,{value:r},e.children)}t(B,"ThemeProvider");var de=new ie,A=ce({client:null}),h=t(()=>he(A),"useClient");function me({children:e,auth:r,isTestingMode:n}){let o=q(null),{refetch:d}=pe({queryKey:["auth"],queryFn:r,enabled:!1}),p=n?U.partners:"https://gateway.remote.com",m=q(se({...l.getConfig(),baseUrl:p,auth:t(async()=>{function w(i){return!i||Date.now()+6e4>i}if(t(w,"hasTokenExpired"),!o.current||w(o.current.expiresAt)){let{data:i}=await d();i&&(o.current={accessToken:i.accessToken,expiresAt:Date.now()+i.expiresIn*1e3})}return o.current?.accessToken},"auth")}));return C.createElement(A.Provider,{value:{client:m.current}},e)}t(me,"RemoteFlowContextWrapper");function Ne({auth:e,children:r,isTestingMode:n=!1,theme:o}){return C.createElement(le,{client:de},C.createElement(me,{isTestingMode:n,auth:e},C.createElement(B,{theme:o},r)))}t(Ne,"RemoteFlows");import{createHeadlessForm as ue}from"@remoteoss/json-schema-form";import{useMutation as j,useQuery as O}from"@tanstack/react-query";import{useState as F}from"react";import{string as _}from"yup";var Ee=t(({includePremiumBenefits:e})=>{let{client:r}=h();return O({queryKey:["cost-calculator-countries",e],queryFn:t(()=>I({client:r,headers:{Authorization:""},query:{include_premium_benefits:e}}),"queryFn"),select:t(n=>n.data?.data.map(o=>({value:o.region_slug,label:o.name,childRegions:o.child_regions,hasAdditionalFields:o.has_additional_fields,regionSlug:o.region_slug})),"select")})},"useCostCalculatorCountries"),ye=t(()=>{let{client:e}=h();return O({queryKey:["company-currencies"],queryFn:t(()=>S({client:e,headers:{Authorization:""}}),"queryFn"),select:t(r=>r.data?.data?.company_currencies.map(n=>({value:n.slug,label:n.code})),"select")})},"useCompanyCurrencies"),Ce=t(()=>{let{client:e}=h();return j({mutationFn:t(r=>D({client:e,headers:{Authorization:""},body:r}),"mutationFn")})},"useCostCalculatorEstimation"),it=t(()=>{let{client:e}=h();return j({mutationFn:t(r=>G({client:e,headers:{Authorization:""},body:r}),"mutationFn")})},"useCostCalculatorEstimationPdf"),we=t((e,{includePremiumBenefits:r})=>{let{client:n}=h();return O({queryKey:["cost-calculator-region-fields",e,r],queryFn:t(()=>v({client:n,headers:{Authorization:""},path:{slug:e},query:{include_premium_benefits:r}}),"queryFn"),enabled:!!e,select:t(({data:o})=>ue(o?.data?.schema||{},{strictInputType:!1}),"select")})},"useRegionFields"),x={title:"Estimation",includeBenefits:!1,includeCostBreakdowns:!1,includePremiumBenefits:!1},lt=t(({defaultRegion:e,estimationOptions:r}={estimationOptions:x})=>{let[n,o]=F(e),[d,p]=F(),{data:m,isLoading:w}=Ee({includePremiumBenefits:r.includePremiumBenefits}),{data:i,isLoading:W}=ye(),M=n||d?.value,{data:P,isLoading:z}=we(M,{includePremiumBenefits:r.includePremiumBenefits}),b=Ce();async function N(a){try{await g.validate(a,{abortEarly:!1})}catch(s){return{data:null,error:s}}return new Promise((s,f)=>{b.mutate(L(a,r),{onSuccess:t(E=>{E.data?s({data:E.data,error:null}):s({data:null,error:new Error("Something went wrong. Please try again later.")})},"onSuccess"),onError:t(E=>{f({data:null,error:E})},"onError")})})}t(N,"onSubmit");function H(a){let s=m?.find(({value:f})=>f===a);s&&s.childRegions.length===0&&s.hasAdditionalFields?o(s.regionSlug):o(void 0),p(s)}t(H,"onCountryChange");function K(a){o(a)}t(K,"onRegionChange");let c=u.find(a=>a.name==="region");if(c){let a=d?.childRegions.map(s=>({value:s.slug,label:s.name}))??[];c.options=a,c.isVisible=a.length>0,c.required=a.length>0,c.onChange=K,c.schema=a.length>0?_().required("Currency is required"):_()}if(i){let a=u.find(s=>s.name==="currency");a&&(a.options=i)}if(m){let a=u.find(s=>s.name==="country");a&&(a.options=m,a.onChange=H)}let J=t(()=>{p(void 0),o(e)},"resetForm"),R=[...u,...P?.fields||[]],g=V(R);return{stepState:{current:0,total:1,isLastStep:!0},fields:R,validationSchema:g,handleValidation:P?.handleValidation,isSubmitting:b.isPending,isLoading:w&&W&&z,onSubmit:N,resetForm:J}},"useCostCalculator");function V(e){let r=e.reduce((n,o)=>(n[o.name]=o.schema,n),{});return fe(r)}t(V,"buildValidationSchema");function Te(e){let r="benefit-";return Object.keys(e).reduce((n,o)=>{let p={benefit_group_slug:o.replace(r,""),benefit_tier_slug:e[o]};return[...n,p]},[])}t(Te,"formatBenefits");function L(e,r=x){return{employer_currency_slug:e.currency,include_benefits:r.includeBenefits,include_cost_breakdowns:r.includeCostBreakdowns,include_premium_benefits:r.includePremiumBenefits,employments:[{region_slug:e.region||e.country,annual_gross_salary:T(e.salary),annual_gross_salary_in_employer_currency:T(e.salary),employment_term:e.contract_duration_type??"fixed",title:r.title,regional_to_employer_exchange_rate:"1",age:e.age??void 0,...e.benefits&&{benefits:Te(e.benefits)}}]}}t(L,"buildPayload");export{Ne as a,V as b,L as c,it as d,x as e,lt as f};
|
|
2
|
+
//# sourceMappingURL=chunk-6RRSUL7Q.js.map
|