@bytebrand/fe-ui-core-autobahn 1.0.44 → 1.0.45
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/package.json +1 -1
- package/theme/md3.css +12 -8
- package/vdp/FinanceCalculator.tsx +622 -599
- package/vdp/VdpModules.tsx +42 -16
|
@@ -1,599 +1,622 @@
|
|
|
1
|
-
// Autobahn (auto.de redesign) — VDP offer / finance card (Finanzierung / Leasing /
|
|
2
|
-
// Barzahlung).
|
|
3
|
-
//
|
|
4
|
-
// Structure (desktop rethink, tabs-on-top): payment-type TABS at the top (MD3 underline tabs),
|
|
5
|
-
// then the rate (with any discount), then the "Rate anpassen" rate-editor, then the primary
|
|
6
|
-
// "Angebot sichern" request CTA, and finally the Finanzierungs-/Leasingdetails info + popup link
|
|
7
|
-
// at the foot. Laufzeit is chosen via chips (discrete terms), not a slider.
|
|
8
|
-
//
|
|
9
|
-
// CONTROLLED / PRESENTATIONAL — computes NOTHING financial: `mode`, `monthly`, `down`, `term` and
|
|
10
|
-
// the slider/chip bounds all arrive as props; segment/slider/chip changes are reported back via
|
|
11
|
-
// `onModeChange` / `onDownChange` / `onTermChange`. The real numbers come from `financingStore`.
|
|
12
|
-
// The only local state is the `adjust` expander (pure view state).
|
|
13
|
-
//
|
|
14
|
-
// Renders correctly only inside a `<div className="md3">` subtree.
|
|
15
|
-
|
|
16
|
-
import React, { useState } from 'react';
|
|
17
|
-
import { TranslationFunction } from '../types';
|
|
18
|
-
|
|
19
|
-
import { Button, Icon } from '../ui';
|
|
20
|
-
import { TIER_LABELS, TIER_KEYS, TIER_COLORS } from '../constants';
|
|
21
|
-
|
|
22
|
-
/** Payment mode segment keys. Mirrors the design's ['fin','leasing','cash']. */
|
|
23
|
-
export type FinanceMode = 'fin' | 'leasing' | 'cash';
|
|
24
|
-
|
|
25
|
-
export interface SliderProps {
|
|
26
|
-
min: number;
|
|
27
|
-
max: number;
|
|
28
|
-
step?: number;
|
|
29
|
-
value: number;
|
|
30
|
-
onChange: (value: number) => void;
|
|
31
|
-
/** formats the min/max end labels (and is reused by callers for the value). */
|
|
32
|
-
fmt?: (v: number) => React.ReactNode;
|
|
33
|
-
/** render the current value in a floating bubble above the thumb (Figma sheet sliders). */
|
|
34
|
-
bubble?: boolean;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* Range slider with a filled track and min/max end labels. The track fill is a
|
|
39
|
-
* linear-gradient driven by the value's position; the design's `.mslider` class
|
|
40
|
-
* styles the thumb/rail. With `bubble` the current value floats above the thumb
|
|
41
|
-
* (mockup "Rate anpassen" sliders) instead of the caller printing it elsewhere.
|
|
42
|
-
*/
|
|
43
|
-
export const Slider: React.FunctionComponent<SliderProps> = ({ min, max, step = 1, value, onChange, fmt = (v) => v, bubble }) => {
|
|
44
|
-
const span = max - min;
|
|
45
|
-
const pct = span > 0 ? ((value - min) / span) * 100 : 0;
|
|
46
|
-
return (
|
|
47
|
-
<div>
|
|
48
|
-
<div style={{ position: 'relative', paddingTop: bubble ? 38 : 0 }}>
|
|
49
|
-
{bubble && (
|
|
50
|
-
// thumb is 22px wide: interpolate the bubble anchor between half-thumb insets so it
|
|
51
|
-
// tracks the thumb center (a plain pct% drifts at the rail ends)
|
|
52
|
-
<span className="slider-bubble num" style={{ left: `calc(11px + (100% - 22px) * ${pct / 100})` }}>
|
|
53
|
-
{fmt(value)}
|
|
54
|
-
</span>
|
|
55
|
-
)}
|
|
56
|
-
<input
|
|
57
|
-
type="range"
|
|
58
|
-
className="mslider"
|
|
59
|
-
min={min}
|
|
60
|
-
max={max}
|
|
61
|
-
step={step}
|
|
62
|
-
value={value}
|
|
63
|
-
onChange={(e) => onChange(Number(e.target.value))}
|
|
64
|
-
style={{ background: `linear-gradient(90deg, var(--md-primary) ${pct}%, var(--md-sc-highest) ${pct}%)` }}
|
|
65
|
-
/>
|
|
66
|
-
</div>
|
|
67
|
-
{!bubble && (
|
|
68
|
-
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
|
|
69
|
-
<span className="md-label-sm">{fmt(min)}</span>
|
|
70
|
-
<span className="md-label-sm">{fmt(max)}</span>
|
|
71
|
-
</div>
|
|
72
|
-
)}
|
|
73
|
-
</div>
|
|
74
|
-
);
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
/**
|
|
78
|
-
* Segmented price-evaluation bar (Figma: 5 discrete tier segments, NOT a gradient) with a
|
|
79
|
-
* white ring marker. `leftPct` overrides the marker position (the Marktwert gauge positions
|
|
80
|
-
* it continuously); default = centered on the tier segment.
|
|
81
|
-
*/
|
|
82
|
-
export const EvalBar: React.FunctionComponent<{ tier: number; leftPct?: number }> = ({ tier, leftPct }) => (
|
|
83
|
-
<div className="fin-eval-bar">
|
|
84
|
-
{TIER_COLORS.map((c, i) => (
|
|
85
|
-
<span key={i} className="fin-eval-seg" style={{ background: c }} />
|
|
86
|
-
))}
|
|
87
|
-
<div
|
|
88
|
-
className="fin-eval-thumb"
|
|
89
|
-
style={{ left: `${leftPct != null ? leftPct : (tier + 0.5) * 20}%`, borderColor: TIER_COLORS[Math.max(0, Math.min(4, tier))] }}
|
|
90
|
-
/>
|
|
91
|
-
</div>
|
|
92
|
-
);
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
}
|
|
140
|
-
>
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
/**
|
|
174
|
-
|
|
175
|
-
/**
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
/**
|
|
189
|
-
|
|
190
|
-
/**
|
|
191
|
-
|
|
192
|
-
/**
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
/**
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
)
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
) : (
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
</
|
|
452
|
-
{
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
<
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
{/*
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
<Icon name=
|
|
589
|
-
{
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
}
|
|
598
|
-
|
|
599
|
-
|
|
1
|
+
// Autobahn (auto.de redesign) — VDP offer / finance card (Finanzierung / Leasing /
|
|
2
|
+
// Barzahlung).
|
|
3
|
+
//
|
|
4
|
+
// Structure (desktop rethink, tabs-on-top): payment-type TABS at the top (MD3 underline tabs),
|
|
5
|
+
// then the rate (with any discount), then the "Rate anpassen" rate-editor, then the primary
|
|
6
|
+
// "Angebot sichern" request CTA, and finally the Finanzierungs-/Leasingdetails info + popup link
|
|
7
|
+
// at the foot. Laufzeit is chosen via chips (discrete terms), not a slider.
|
|
8
|
+
//
|
|
9
|
+
// CONTROLLED / PRESENTATIONAL — computes NOTHING financial: `mode`, `monthly`, `down`, `term` and
|
|
10
|
+
// the slider/chip bounds all arrive as props; segment/slider/chip changes are reported back via
|
|
11
|
+
// `onModeChange` / `onDownChange` / `onTermChange`. The real numbers come from `financingStore`.
|
|
12
|
+
// The only local state is the `adjust` expander (pure view state).
|
|
13
|
+
//
|
|
14
|
+
// Renders correctly only inside a `<div className="md3">` subtree.
|
|
15
|
+
|
|
16
|
+
import React, { useState } from 'react';
|
|
17
|
+
import { TranslationFunction } from '../types';
|
|
18
|
+
|
|
19
|
+
import { Button, Icon } from '../ui';
|
|
20
|
+
import { TIER_LABELS, TIER_KEYS, TIER_COLORS } from '../constants';
|
|
21
|
+
|
|
22
|
+
/** Payment mode segment keys. Mirrors the design's ['fin','leasing','cash']. */
|
|
23
|
+
export type FinanceMode = 'fin' | 'leasing' | 'cash';
|
|
24
|
+
|
|
25
|
+
export interface SliderProps {
|
|
26
|
+
min: number;
|
|
27
|
+
max: number;
|
|
28
|
+
step?: number;
|
|
29
|
+
value: number;
|
|
30
|
+
onChange: (value: number) => void;
|
|
31
|
+
/** formats the min/max end labels (and is reused by callers for the value). */
|
|
32
|
+
fmt?: (v: number) => React.ReactNode;
|
|
33
|
+
/** render the current value in a floating bubble above the thumb (Figma sheet sliders). */
|
|
34
|
+
bubble?: boolean;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Range slider with a filled track and min/max end labels. The track fill is a
|
|
39
|
+
* linear-gradient driven by the value's position; the design's `.mslider` class
|
|
40
|
+
* styles the thumb/rail. With `bubble` the current value floats above the thumb
|
|
41
|
+
* (mockup "Rate anpassen" sliders) instead of the caller printing it elsewhere.
|
|
42
|
+
*/
|
|
43
|
+
export const Slider: React.FunctionComponent<SliderProps> = ({ min, max, step = 1, value, onChange, fmt = (v) => v, bubble }) => {
|
|
44
|
+
const span = max - min;
|
|
45
|
+
const pct = span > 0 ? ((value - min) / span) * 100 : 0;
|
|
46
|
+
return (
|
|
47
|
+
<div>
|
|
48
|
+
<div style={{ position: 'relative', paddingTop: bubble ? 38 : 0 }}>
|
|
49
|
+
{bubble && (
|
|
50
|
+
// thumb is 22px wide: interpolate the bubble anchor between half-thumb insets so it
|
|
51
|
+
// tracks the thumb center (a plain pct% drifts at the rail ends)
|
|
52
|
+
<span className="slider-bubble num" style={{ left: `calc(11px + (100% - 22px) * ${pct / 100})` }}>
|
|
53
|
+
{fmt(value)}
|
|
54
|
+
</span>
|
|
55
|
+
)}
|
|
56
|
+
<input
|
|
57
|
+
type="range"
|
|
58
|
+
className="mslider"
|
|
59
|
+
min={min}
|
|
60
|
+
max={max}
|
|
61
|
+
step={step}
|
|
62
|
+
value={value}
|
|
63
|
+
onChange={(e) => onChange(Number(e.target.value))}
|
|
64
|
+
style={{ background: `linear-gradient(90deg, var(--md-primary) ${pct}%, var(--md-sc-highest) ${pct}%)` }}
|
|
65
|
+
/>
|
|
66
|
+
</div>
|
|
67
|
+
{!bubble && (
|
|
68
|
+
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
|
|
69
|
+
<span className="md-label-sm">{fmt(min)}</span>
|
|
70
|
+
<span className="md-label-sm">{fmt(max)}</span>
|
|
71
|
+
</div>
|
|
72
|
+
)}
|
|
73
|
+
</div>
|
|
74
|
+
);
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Segmented price-evaluation bar (Figma: 5 discrete tier segments, NOT a gradient) with a
|
|
79
|
+
* white ring marker. `leftPct` overrides the marker position (the Marktwert gauge positions
|
|
80
|
+
* it continuously); default = centered on the tier segment.
|
|
81
|
+
*/
|
|
82
|
+
export const EvalBar: React.FunctionComponent<{ tier: number; leftPct?: number }> = ({ tier, leftPct }) => (
|
|
83
|
+
<div className="fin-eval-bar">
|
|
84
|
+
{TIER_COLORS.map((c, i) => (
|
|
85
|
+
<span key={i} className="fin-eval-seg" style={{ background: c }} />
|
|
86
|
+
))}
|
|
87
|
+
<div
|
|
88
|
+
className="fin-eval-thumb"
|
|
89
|
+
style={{ left: `${leftPct != null ? leftPct : (tier + 0.5) * 20}%`, borderColor: TIER_COLORS[Math.max(0, Math.min(4, tier))] }}
|
|
90
|
+
/>
|
|
91
|
+
</div>
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
/** Figma CTA icon — document with a check-in-circle badge over its bottom-right corner
|
|
95
|
+
* (no single lucide glyph matches; composed from file-text + a knocked-out check-circle).
|
|
96
|
+
* The badge backdrop assumes a filled (primary) button. */
|
|
97
|
+
export const DocCheckIcon: React.FunctionComponent<{ size?: number }> = ({ size = 18 }) => (
|
|
98
|
+
<span style={{ position: 'relative', display: 'inline-flex', flex: 'none' }}>
|
|
99
|
+
<Icon name="file-text" size={size} stroke={2} />
|
|
100
|
+
<span
|
|
101
|
+
style={{
|
|
102
|
+
position: 'absolute',
|
|
103
|
+
right: -4,
|
|
104
|
+
bottom: -3,
|
|
105
|
+
display: 'flex',
|
|
106
|
+
borderRadius: '50%',
|
|
107
|
+
background: 'var(--md-primary)',
|
|
108
|
+
padding: 1,
|
|
109
|
+
}}
|
|
110
|
+
>
|
|
111
|
+
<Icon name="check-circle" size={Math.round(size * 0.62)} stroke={2.6} />
|
|
112
|
+
</span>
|
|
113
|
+
</span>
|
|
114
|
+
);
|
|
115
|
+
|
|
116
|
+
export interface TermChipsProps {
|
|
117
|
+
/** the selectable term values (months), e.g. [12,24,36,48,60,72]. */
|
|
118
|
+
options: number[];
|
|
119
|
+
value: number;
|
|
120
|
+
onChange: (term: number) => void;
|
|
121
|
+
/** i18n function (drilled from the page). */
|
|
122
|
+
t: TranslationFunction;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/** Laufzeit selector — discrete term values as tappable chips (replaces the fiddly slider). */
|
|
126
|
+
export const TermChips: React.FunctionComponent<TermChipsProps> = ({ options, value, onChange, t }) => (
|
|
127
|
+
<div className="term-chips" role="group" aria-label={t('autobahn:finance.termSelection')}>
|
|
128
|
+
{options.map((m) => (
|
|
129
|
+
<button
|
|
130
|
+
key={m}
|
|
131
|
+
type="button"
|
|
132
|
+
aria-pressed={m === value}
|
|
133
|
+
className={'term-chip' + (m === value ? ' on' : '')}
|
|
134
|
+
onClick={() => onChange(m)}
|
|
135
|
+
>
|
|
136
|
+
{m}
|
|
137
|
+
<span className="tc-unit">{t('autobahn:finance.monthUnit')}</span>
|
|
138
|
+
</button>
|
|
139
|
+
))}
|
|
140
|
+
</div>
|
|
141
|
+
);
|
|
142
|
+
|
|
143
|
+
export interface CalcRowProps {
|
|
144
|
+
label: React.ReactNode;
|
|
145
|
+
/** when true, drops the bottom hairline (last row). */
|
|
146
|
+
last?: boolean;
|
|
147
|
+
children?: React.ReactNode;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/** One label/value row inside the "Rate anpassen" / "Details" expander. */
|
|
151
|
+
export const CalcRow: React.FunctionComponent<CalcRowProps> = ({ label, last, children }) => (
|
|
152
|
+
<div
|
|
153
|
+
className="calcrow"
|
|
154
|
+
style={{
|
|
155
|
+
display: 'flex',
|
|
156
|
+
justifyContent: 'space-between',
|
|
157
|
+
alignItems: 'baseline',
|
|
158
|
+
gap: 12,
|
|
159
|
+
padding: '8px 0',
|
|
160
|
+
borderBottom: last ? 0 : '1px solid var(--md-outline-variant)',
|
|
161
|
+
}}
|
|
162
|
+
>
|
|
163
|
+
<span className="md-label-sm calcrow-label">{label}</span>
|
|
164
|
+
<span className="num calcrow-value" style={{ fontSize: 13.5, fontWeight: 600 }}>
|
|
165
|
+
{children}
|
|
166
|
+
</span>
|
|
167
|
+
</div>
|
|
168
|
+
);
|
|
169
|
+
|
|
170
|
+
export interface FinanceCalculatorProps {
|
|
171
|
+
/** active payment mode (controlled). */
|
|
172
|
+
mode: FinanceMode;
|
|
173
|
+
/** purchase price in EUR (the cash mode hero). */
|
|
174
|
+
price: number;
|
|
175
|
+
/** previous/list price — when > price, shown struck through as the UVP in cash mode (real discount). */
|
|
176
|
+
listPrice?: number;
|
|
177
|
+
/** auto.de-ID reference code — shown with the financing/leasing condition line. */
|
|
178
|
+
autoDeId?: string;
|
|
179
|
+
/** price-rating label, e.g. 'Guter Preis' — drives the Preisbewertung indicator. */
|
|
180
|
+
ratingLabel?: string;
|
|
181
|
+
/** computed monthly rate in EUR for the current mode — supplied, NOT computed here. */
|
|
182
|
+
monthly: number;
|
|
183
|
+
/** struck old monthly rate (fe-financing oldMonthlyInstallment, isStrikeShown-gated) —
|
|
184
|
+
* rendered as the red line-through figure next to the hero rate (fin/leasing only). */
|
|
185
|
+
oldMonthly?: number;
|
|
186
|
+
/** effective annual rate (%) for the current mode — supplied, NOT computed here. */
|
|
187
|
+
apr: number;
|
|
188
|
+
/** current down payment in EUR (controlled). */
|
|
189
|
+
down: number;
|
|
190
|
+
/** current term in months (controlled). */
|
|
191
|
+
term: number;
|
|
192
|
+
/** down-payment slider bounds. */
|
|
193
|
+
downMin: number;
|
|
194
|
+
downMax: number;
|
|
195
|
+
/** down-payment slider step (EUR). */
|
|
196
|
+
downStep?: number;
|
|
197
|
+
/** term slider bounds (months) — used to derive chip options when termOptions is absent. */
|
|
198
|
+
termMin: number;
|
|
199
|
+
termMax: number;
|
|
200
|
+
/** term slider step (months). */
|
|
201
|
+
termStep?: number;
|
|
202
|
+
/** the discrete selectable terms (months) for the Laufzeit chips. */
|
|
203
|
+
termOptions?: number[];
|
|
204
|
+
/** annual mileage in km (controlled) — leasing/financing Laufleistung/Jahr. Omit to hide the slider. */
|
|
205
|
+
annualMileage?: number;
|
|
206
|
+
/** annual-mileage slider bounds + step (km). */
|
|
207
|
+
annualMileageMin?: number;
|
|
208
|
+
annualMileageMax?: number;
|
|
209
|
+
annualMileageStep?: number;
|
|
210
|
+
/** annual-mileage slider changed. */
|
|
211
|
+
onAnnualMileageChange?: (km: number) => void;
|
|
212
|
+
/** phone number shown on the secondary CTA (touch only). */
|
|
213
|
+
phone?: string;
|
|
214
|
+
/** primary CTA click (Angebot sichern). */
|
|
215
|
+
onSecure?: () => void;
|
|
216
|
+
/** secondary CTA click (phone). */
|
|
217
|
+
onCall?: () => void;
|
|
218
|
+
/** open the Finanzierungs-/Leasingdetails popup (full breakdown + legal, expanded). Omit to hide the link. */
|
|
219
|
+
onShowDetails?: () => void;
|
|
220
|
+
/** mobile only: open the "Rate anpassen" / "Details anzeigen" sheet (collapsed/default view).
|
|
221
|
+
* Omit to hide the trigger row (falls back to the desktop inline expander). */
|
|
222
|
+
onOpenAdjust?: () => void;
|
|
223
|
+
/** mode segment changed. */
|
|
224
|
+
onModeChange: (mode: FinanceMode) => void;
|
|
225
|
+
/** down-payment slider changed. */
|
|
226
|
+
onDownChange: (down: number) => void;
|
|
227
|
+
/** term changed. */
|
|
228
|
+
onTermChange: (term: number) => void;
|
|
229
|
+
/** i18n function (drilled from the page). */
|
|
230
|
+
t: TranslationFunction;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
const eur = (n: number): string => n.toLocaleString('de-DE');
|
|
234
|
+
|
|
235
|
+
/** build a [min..max] step range (fallback term options when none are supplied). */
|
|
236
|
+
const range = (min: number, max: number, step: number): number[] => {
|
|
237
|
+
const out: number[] = [];
|
|
238
|
+
for (let v = min; v <= max; v += step || 12) out.push(v);
|
|
239
|
+
return out.length ? out : [min];
|
|
240
|
+
};
|
|
241
|
+
|
|
242
|
+
/** quiet primary-colored text link (Finanzierungsdetails / Details anzeigen). */
|
|
243
|
+
const DetailsLink: React.FunctionComponent<{ label: string; onClick: () => void }> = ({ label, onClick }) => (
|
|
244
|
+
<button
|
|
245
|
+
type="button"
|
|
246
|
+
onClick={onClick}
|
|
247
|
+
style={{
|
|
248
|
+
display: 'inline-flex',
|
|
249
|
+
alignItems: 'center',
|
|
250
|
+
gap: 5,
|
|
251
|
+
background: 'none',
|
|
252
|
+
border: 0,
|
|
253
|
+
padding: 0,
|
|
254
|
+
cursor: 'pointer',
|
|
255
|
+
color: 'var(--md-primary)',
|
|
256
|
+
font: 'inherit',
|
|
257
|
+
fontSize: 13,
|
|
258
|
+
fontWeight: 600,
|
|
259
|
+
}}
|
|
260
|
+
>
|
|
261
|
+
<Icon name="info" size={15} color="var(--md-primary)" />
|
|
262
|
+
{label}
|
|
263
|
+
</button>
|
|
264
|
+
);
|
|
265
|
+
|
|
266
|
+
/** "Rate anpassen" / "Details anzeigen" expander toggle button. */
|
|
267
|
+
export const expanderBtnStyle: React.CSSProperties = {
|
|
268
|
+
width: '100%',
|
|
269
|
+
background: 'none',
|
|
270
|
+
border: 0,
|
|
271
|
+
cursor: 'pointer',
|
|
272
|
+
display: 'flex',
|
|
273
|
+
alignItems: 'center',
|
|
274
|
+
justifyContent: 'space-between',
|
|
275
|
+
padding: '10px 0 2px',
|
|
276
|
+
color: 'var(--md-primary)',
|
|
277
|
+
fontWeight: 600,
|
|
278
|
+
fontSize: 14,
|
|
279
|
+
};
|
|
280
|
+
|
|
281
|
+
const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
|
|
282
|
+
mode,
|
|
283
|
+
price,
|
|
284
|
+
listPrice,
|
|
285
|
+
autoDeId,
|
|
286
|
+
ratingLabel,
|
|
287
|
+
monthly,
|
|
288
|
+
oldMonthly,
|
|
289
|
+
down,
|
|
290
|
+
term,
|
|
291
|
+
downMin,
|
|
292
|
+
downMax,
|
|
293
|
+
downStep = 500,
|
|
294
|
+
termMin,
|
|
295
|
+
termMax,
|
|
296
|
+
termStep = 6,
|
|
297
|
+
termOptions,
|
|
298
|
+
annualMileage,
|
|
299
|
+
annualMileageMin = 5000,
|
|
300
|
+
annualMileageMax = 60000,
|
|
301
|
+
annualMileageStep = 5000,
|
|
302
|
+
onAnnualMileageChange,
|
|
303
|
+
phone = '0800 40 30 182',
|
|
304
|
+
onSecure,
|
|
305
|
+
onCall,
|
|
306
|
+
onShowDetails,
|
|
307
|
+
onOpenAdjust,
|
|
308
|
+
onModeChange,
|
|
309
|
+
onDownChange,
|
|
310
|
+
onTermChange,
|
|
311
|
+
t,
|
|
312
|
+
}) => {
|
|
313
|
+
// Pure view state only — whether the adjust/details expander is open.
|
|
314
|
+
const [adjust, setAdjust] = useState(false);
|
|
315
|
+
const isCash = mode === 'cash';
|
|
316
|
+
const terms = termOptions && termOptions.length ? termOptions : range(termMin, termMax, termStep);
|
|
317
|
+
const showStrike = listPrice != null && listPrice > price;
|
|
318
|
+
// price-evaluation tier from the rating label (defaults to 'Guter Preis' tier when unmapped).
|
|
319
|
+
const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
|
|
320
|
+
const evalTier = tierIdx >= 0 ? tierIdx : 1;
|
|
321
|
+
const evalTierLabel = t('autobahn:tier.' + TIER_KEYS[evalTier]);
|
|
322
|
+
// condition summary (current selection) — the auto.de-ID lives with the details link, not here.
|
|
323
|
+
const condParts: string[] = [];
|
|
324
|
+
if (!isCash) {
|
|
325
|
+
condParts.push(
|
|
326
|
+
mode === 'leasing' && annualMileage != null
|
|
327
|
+
? t('autobahn:finance.kmPerYear', { value: eur(annualMileage) })
|
|
328
|
+
: t('autobahn:finance.downPaymentLabel', { value: eur(down) }),
|
|
329
|
+
);
|
|
330
|
+
condParts.push(t('autobahn:finance.monthsLabel', { months: term, count: term }));
|
|
331
|
+
}
|
|
332
|
+
const condLine = condParts.length ? `${t('autobahn:finance.exampleLabel')} ${condParts.join(' · ')}` : '';
|
|
333
|
+
|
|
334
|
+
return (
|
|
335
|
+
<div className="mcard mcard--elevated" style={{ padding: 20 }}>
|
|
336
|
+
{/* header — desktop only; mobile goes straight into the tabs (see mockup: no card
|
|
337
|
+
title above Finanzierung/Leasing/Kaufen on phone). */}
|
|
338
|
+
<div className="fin-card-header hide-mobile" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
|
|
339
|
+
<span
|
|
340
|
+
style={{
|
|
341
|
+
width: 34,
|
|
342
|
+
height: 34,
|
|
343
|
+
borderRadius: 'var(--md-r-full)',
|
|
344
|
+
background: 'var(--md-primary-container)',
|
|
345
|
+
display: 'flex',
|
|
346
|
+
alignItems: 'center',
|
|
347
|
+
justifyContent: 'center',
|
|
348
|
+
flex: 'none',
|
|
349
|
+
}}
|
|
350
|
+
>
|
|
351
|
+
<Icon name="tag" size={18} color="var(--md-on-primary-container)" />
|
|
352
|
+
</span>
|
|
353
|
+
<div style={{ fontFamily: 'var(--md-font-display)', fontSize: 18, fontWeight: 700 }}>{t('autobahn:finance.headerTitle')}</div>
|
|
354
|
+
</div>
|
|
355
|
+
|
|
356
|
+
{/* payment-type TABS on top */}
|
|
357
|
+
<div className="fin-tabs" role="tablist">
|
|
358
|
+
{(
|
|
359
|
+
[
|
|
360
|
+
['fin', 'autobahn:finance.mode.financing'],
|
|
361
|
+
['leasing', 'autobahn:finance.mode.leasing'],
|
|
362
|
+
['cash', 'autobahn:finance.mode.cash'],
|
|
363
|
+
] as Array<[FinanceMode, string]>
|
|
364
|
+
).map(([k, labelKey]) => (
|
|
365
|
+
<button
|
|
366
|
+
key={k}
|
|
367
|
+
type="button"
|
|
368
|
+
role="tab"
|
|
369
|
+
aria-selected={mode === k}
|
|
370
|
+
className={'fin-tab' + (mode === k ? ' on' : '')}
|
|
371
|
+
onClick={() => onModeChange(k)}
|
|
372
|
+
>
|
|
373
|
+
{k === 'cash' ? (
|
|
374
|
+
<>
|
|
375
|
+
{/* mockup names the cash tab "Kaufen" on phone; desktop keeps "Barzahlung" */}
|
|
376
|
+
<span className="hide-mobile">{t(labelKey)}</span>
|
|
377
|
+
<span className="show-mobile" style={{ justifyContent: 'center' }}>
|
|
378
|
+
{t('autobahn:card.price.buy')}
|
|
379
|
+
</span>
|
|
380
|
+
</>
|
|
381
|
+
) : (
|
|
382
|
+
t(labelKey)
|
|
383
|
+
)}
|
|
384
|
+
</button>
|
|
385
|
+
))}
|
|
386
|
+
</div>
|
|
387
|
+
|
|
388
|
+
{/* 2-col grid: rate|pill (row 1) + condLine|bar (row 2) — fixed right column prevents wrapping */}
|
|
389
|
+
<div className="fin-price-grid">
|
|
390
|
+
{/* col 1 row 1: hero rate — Figma: "329 €" all-big, then a small stacked column with
|
|
391
|
+
the struck old rate ABOVE "/mtl." (round 11; was a single baseline row) */}
|
|
392
|
+
<div className="fin-rate-main">
|
|
393
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
394
|
+
<span
|
|
395
|
+
className="num"
|
|
396
|
+
style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
|
|
397
|
+
>
|
|
398
|
+
{/* cash keeps the long price number-only (a big "13.249 €" overflows the grid cell) */}
|
|
399
|
+
{isCash ? eur(price) : `${eur(Math.round(monthly))} €`}
|
|
400
|
+
</span>
|
|
401
|
+
{isCash ? (
|
|
402
|
+
<span className="md-body-sm" style={{ fontWeight: 600 }}>€</span>
|
|
403
|
+
) : (
|
|
404
|
+
<span className="fin-rate-unit">
|
|
405
|
+
{/* struck old rate (REAL oldMonthlyInstallment; SRP strikes the same source) */}
|
|
406
|
+
{oldMonthly != null && <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>}
|
|
407
|
+
<span>{t('autobahn:finance.perMonth')}</span>
|
|
408
|
+
</span>
|
|
409
|
+
)}
|
|
410
|
+
</div>
|
|
411
|
+
{isCash && <div className="md-label-sm">{t('autobahn:finance.fixedPrice')}</div>}
|
|
412
|
+
{isCash && showStrike && (
|
|
413
|
+
<div className="fin-kauf">
|
|
414
|
+
{t('autobahn:finance.uvp')} <s>{eur(listPrice as number)} €</s>
|
|
415
|
+
</div>
|
|
416
|
+
)}
|
|
417
|
+
</div>
|
|
418
|
+
{/* col 2 row 1: price-rating pill (Figma: bold colored label, NO icon) */}
|
|
419
|
+
<div>
|
|
420
|
+
{ratingLabel && (
|
|
421
|
+
<span
|
|
422
|
+
className="fin-eval-pill"
|
|
423
|
+
style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
|
|
424
|
+
aria-label={t('autobahn:finance.priceRatingAria', { rating: evalTierLabel })}
|
|
425
|
+
>
|
|
426
|
+
{evalTierLabel}
|
|
427
|
+
</span>
|
|
428
|
+
)}
|
|
429
|
+
</div>
|
|
430
|
+
{/* col 1 row 2: condition line */}
|
|
431
|
+
<div className="fin-cond">{condLine}</div>
|
|
432
|
+
{/* col 2 row 2: segmented evaluation bar (Figma: discrete tiers, not a gradient) */}
|
|
433
|
+
<div>{ratingLabel && <EvalBar tier={evalTier} />}</div>
|
|
434
|
+
</div>
|
|
435
|
+
|
|
436
|
+
{/* ============================== DESKTOP (≥601px) — unchanged ============================== */}
|
|
437
|
+
<div className="hide-mobile">
|
|
438
|
+
{/* RATE EDIT (Rate anpassen) — between the rate and the request CTA */}
|
|
439
|
+
<div className="fin-adjust">
|
|
440
|
+
<button onClick={() => setAdjust((a) => !a)} style={expanderBtnStyle}>
|
|
441
|
+
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
|
|
442
|
+
<Icon name={isCash ? 'list' : 'sliders-horizontal'} size={16} color="var(--md-primary)" />
|
|
443
|
+
{isCash ? t('autobahn:finance.detailsShow') : t('autobahn:finance.adjustRate')}
|
|
444
|
+
</span>
|
|
445
|
+
<Icon name={adjust ? 'chevron-up' : 'chevron-down'} size={18} color="var(--md-primary)" />
|
|
446
|
+
</button>
|
|
447
|
+
{adjust &&
|
|
448
|
+
(isCash ? (
|
|
449
|
+
<div style={{ marginTop: 4 }}>
|
|
450
|
+
<CalcRow label={t('autobahn:finance.paymentLabel')}>{t('autobahn:finance.paymentValue')}</CalcRow>
|
|
451
|
+
<CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
|
|
452
|
+
<CalcRow label={t('autobahn:finance.deliveryLabel')} last>
|
|
453
|
+
{t('autobahn:finance.deliveryValue')}
|
|
454
|
+
</CalcRow>
|
|
455
|
+
</div>
|
|
456
|
+
) : (
|
|
457
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 8 }}>
|
|
458
|
+
<div>
|
|
459
|
+
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
|
|
460
|
+
<span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
|
|
461
|
+
<span className="num" style={{ fontWeight: 700 }}>
|
|
462
|
+
{eur(down)} €
|
|
463
|
+
</span>
|
|
464
|
+
</div>
|
|
465
|
+
<Slider
|
|
466
|
+
min={downMin}
|
|
467
|
+
max={downMax}
|
|
468
|
+
step={downStep}
|
|
469
|
+
value={down}
|
|
470
|
+
onChange={onDownChange}
|
|
471
|
+
fmt={(v) => `${eur(Number(v))} €`}
|
|
472
|
+
/>
|
|
473
|
+
</div>
|
|
474
|
+
{annualMileage != null && onAnnualMileageChange && (
|
|
475
|
+
<div>
|
|
476
|
+
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
|
|
477
|
+
<span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
|
|
478
|
+
<span className="num" style={{ fontWeight: 700 }}>
|
|
479
|
+
{eur(annualMileage)} km
|
|
480
|
+
</span>
|
|
481
|
+
</div>
|
|
482
|
+
<Slider
|
|
483
|
+
min={annualMileageMin}
|
|
484
|
+
max={annualMileageMax}
|
|
485
|
+
step={annualMileageStep}
|
|
486
|
+
value={annualMileage}
|
|
487
|
+
onChange={onAnnualMileageChange}
|
|
488
|
+
fmt={(v) => `${eur(Number(v))} km`}
|
|
489
|
+
/>
|
|
490
|
+
</div>
|
|
491
|
+
)}
|
|
492
|
+
<div>
|
|
493
|
+
<div className="md-title-sm" style={{ marginBottom: 8 }}>
|
|
494
|
+
{t('autobahn:finance.termSelection')}
|
|
495
|
+
</div>
|
|
496
|
+
<TermChips options={terms} value={term} onChange={onTermChange} t={t} />
|
|
497
|
+
</div>
|
|
498
|
+
<div>
|
|
499
|
+
<CalcRow label={t('autobahn:finance.purchasePrice')}>{eur(price)} €</CalcRow>
|
|
500
|
+
<CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
|
|
501
|
+
<CalcRow label={t('autobahn:finance.deliveryLabel')} last>
|
|
502
|
+
{t('autobahn:finance.deliveryValue')}
|
|
503
|
+
</CalcRow>
|
|
504
|
+
</div>
|
|
505
|
+
</div>
|
|
506
|
+
))}
|
|
507
|
+
</div>
|
|
508
|
+
|
|
509
|
+
{/* REQUEST CTA */}
|
|
510
|
+
<Button variant="filled" block size="lg" icon="shield-check" style={{ marginTop: 14 }} onClick={onSecure}>
|
|
511
|
+
{t('autobahn:finance.secureOffer')}
|
|
512
|
+
</Button>
|
|
513
|
+
{/* phone CTA — touch only (hidden on desktop via .fin-call) */}
|
|
514
|
+
<div className="fin-call">
|
|
515
|
+
<Button variant="outlined" block icon="phone" onClick={onCall}>
|
|
516
|
+
{phone}
|
|
517
|
+
</Button>
|
|
518
|
+
</div>
|
|
519
|
+
|
|
520
|
+
{/* auto.de-ID in front of the Finanzierungs-/Leasingdetails link — one row, under everything */}
|
|
521
|
+
{(autoDeId || (!isCash && onShowDetails)) && (
|
|
522
|
+
<div className="fin-info">
|
|
523
|
+
{autoDeId && <span className="fin-id">auto.de-ID {autoDeId}</span>}
|
|
524
|
+
{!isCash && onShowDetails && (
|
|
525
|
+
<DetailsLink
|
|
526
|
+
label={mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
|
|
527
|
+
onClick={onShowDetails}
|
|
528
|
+
/>
|
|
529
|
+
)}
|
|
530
|
+
</div>
|
|
531
|
+
)}
|
|
532
|
+
</div>
|
|
533
|
+
|
|
534
|
+
{/* ============================== MOBILE (≤600px) — new layout ============================== */}
|
|
535
|
+
<div className="show-mobile" style={{ flexDirection: 'column' }}>
|
|
536
|
+
{/* side-by-side CTAs — mockup ratio ~2:1, with the tiny auto.de-ID sitting
|
|
537
|
+
directly under the Anrufen button (not in its own full-width row). */}
|
|
538
|
+
<div className="fin-cta-row" style={{ display: 'flex', gap: 10, marginTop: 14, alignItems: 'flex-start' }}>
|
|
539
|
+
{/* Figma CTA icon: document + check badge (composed — no single lucide glyph) */}
|
|
540
|
+
<Button variant="filled" size="lg" style={{ flex: 2 }} onClick={onSecure}>
|
|
541
|
+
<DocCheckIcon />
|
|
542
|
+
{t('autobahn:finance.secureOffer')}
|
|
543
|
+
</Button>
|
|
544
|
+
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
|
|
545
|
+
<Button variant="outlined" size="lg" icon="phone" block onClick={onCall}>
|
|
546
|
+
{t('autobahn:finance.callCta')}
|
|
547
|
+
</Button>
|
|
548
|
+
{autoDeId && (
|
|
549
|
+
<span
|
|
550
|
+
className="num"
|
|
551
|
+
style={{ fontSize: 10, fontWeight: 700, color: 'var(--md-primary)', textAlign: 'center', whiteSpace: 'nowrap' }}
|
|
552
|
+
>
|
|
553
|
+
auto.de ID: {autoDeId}
|
|
554
|
+
</span>
|
|
555
|
+
)}
|
|
556
|
+
</div>
|
|
557
|
+
</div>
|
|
558
|
+
|
|
559
|
+
{/* Persönliche Beratung (left) · divider · Finanzierungs-/Leasingdetails or hint (right) */}
|
|
560
|
+
<div className="fin-info">
|
|
561
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0, flex: 1 }}>
|
|
562
|
+
<Icon name="user" size={18} color="var(--md-on-surface-variant)" style={{ flex: 'none' }} />
|
|
563
|
+
<div style={{ minWidth: 0 }}>
|
|
564
|
+
<div className="md-label-sm" style={{ fontWeight: 700, color: 'var(--md-on-surface)' }}>
|
|
565
|
+
{t('autobahn:finance.personalConsultation')}
|
|
566
|
+
</div>
|
|
567
|
+
<div className="md-label-sm">{t('autobahn:finance.personalConsultationSub')}</div>
|
|
568
|
+
</div>
|
|
569
|
+
</div>
|
|
570
|
+
<span style={{ width: 1, alignSelf: 'stretch', background: 'var(--md-outline-variant)', flex: 'none' }} />
|
|
571
|
+
{!isCash && onShowDetails ? (
|
|
572
|
+
<button
|
|
573
|
+
type="button"
|
|
574
|
+
onClick={onShowDetails}
|
|
575
|
+
style={{
|
|
576
|
+
display: 'flex',
|
|
577
|
+
alignItems: 'center',
|
|
578
|
+
gap: 8,
|
|
579
|
+
background: 'none',
|
|
580
|
+
border: 0,
|
|
581
|
+
padding: 0,
|
|
582
|
+
cursor: 'pointer',
|
|
583
|
+
font: 'inherit',
|
|
584
|
+
color: 'var(--md-on-surface)',
|
|
585
|
+
textAlign: 'left',
|
|
586
|
+
}}
|
|
587
|
+
>
|
|
588
|
+
<Icon name="info" size={18} color="var(--md-on-surface-variant)" style={{ flex: 'none' }} />
|
|
589
|
+
{/* no max-width: "Finanzierungsdetails" is one unbreakable word — capping the
|
|
590
|
+
span clipped it mid-word instead of wrapping */}
|
|
591
|
+
<span className="md-label-sm" style={{ lineHeight: 1.5 }}>
|
|
592
|
+
{mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
|
|
593
|
+
</span>
|
|
594
|
+
</button>
|
|
595
|
+
) : (
|
|
596
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--md-on-surface-variant)' }}>
|
|
597
|
+
<Icon name="info" size={15} />
|
|
598
|
+
<span className="md-label-sm">{t('autobahn:finance.financingLeasingPossible')}</span>
|
|
599
|
+
</div>
|
|
600
|
+
)}
|
|
601
|
+
</div>
|
|
602
|
+
|
|
603
|
+
{/* "Rate anpassen" / "Details anzeigen" — opens the full bottom sheet (not an inline expander) */}
|
|
604
|
+
{onOpenAdjust && (
|
|
605
|
+
<button
|
|
606
|
+
type="button"
|
|
607
|
+
onClick={onOpenAdjust}
|
|
608
|
+
style={{ ...expanderBtnStyle, borderTop: '1px solid var(--md-outline-variant)', marginTop: 4, padding: '14px 0 2px' }}
|
|
609
|
+
>
|
|
610
|
+
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
|
|
611
|
+
<Icon name={isCash ? 'list' : 'sliders-horizontal'} size={16} color="var(--md-primary)" />
|
|
612
|
+
{isCash ? t('autobahn:finance.detailsShow') : t('autobahn:finance.adjustRate')}
|
|
613
|
+
</span>
|
|
614
|
+
<Icon name="chevron-right" size={18} color="var(--md-primary)" />
|
|
615
|
+
</button>
|
|
616
|
+
)}
|
|
617
|
+
</div>
|
|
618
|
+
</div>
|
|
619
|
+
);
|
|
620
|
+
};
|
|
621
|
+
|
|
622
|
+
export default FinanceCalculator;
|