@nyris/nyris-webapp 0.3.63 → 0.3.64

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.
Files changed (9) hide show
  1. package/build/asset-manifest.json +3 -3
  2. package/build/index.html +1 -1
  3. package/build/static/js/{main.8813b740.js → main.5fd57b22.js} +3 -3
  4. package/build/static/js/{main.8813b740.js.map → main.5fd57b22.js.map} +1 -1
  5. package/package.json +3 -3
  6. package/src/components/ProductAttribute.tsx +6 -3
  7. package/src/components/ProductDetailView.tsx +102 -34
  8. package/src/components/results/ItemResult.tsx +133 -72
  9. /package/build/static/js/{main.8813b740.js.LICENSE.txt → main.5fd57b22.js.LICENSE.txt} +0 -0
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@nyris/nyris-webapp",
3
- "version": "0.3.63",
3
+ "version": "0.3.64",
4
4
  "dependencies": {
5
5
  "@auth0/auth0-react": "^2.2.4",
6
6
  "@emailjs/browser": "^4.3.3",
7
7
  "@material-ui/core": "^4.12.4",
8
8
  "@material-ui/icons": "^4.11.3",
9
9
  "@material-ui/lab": "^4.0.0-alpha.61",
10
- "@nyris/nyris-api": "^0.3.63",
11
- "@nyris/nyris-react-components": "^0.3.63",
10
+ "@nyris/nyris-api": "^0.3.64",
11
+ "@nyris/nyris-react-components": "^0.3.64",
12
12
  "@reduxjs/toolkit": "^2.2.1",
13
13
  "@splidejs/react-splide": "^0.7.12",
14
14
  "@testing-library/jest-dom": "^5.17.0",
package/src/components/ProductAttribute.tsx CHANGED
@@ -14,7 +14,9 @@ function ProductAttribute(props: Props) {
14
14
  title,
15
15
  value,
16
16
  padding = props.padding || '4px 16px',
17
- isTitleVisible = typeof props.isTitleVisible === 'boolean' ? props.isTitleVisible : true,
17
+ isTitleVisible = typeof props.isTitleVisible === 'boolean'
18
+ ? props.isTitleVisible
19
+ : true,
18
20
  } = props;
19
21
 
20
22
  return (
@@ -43,12 +45,13 @@ function ProductAttribute(props: Props) {
43
45
  {title}
44
46
  </Typography>
45
47
  ) : (
46
- ''
48
+ ''
47
49
  )}
48
50
  <Tooltip
49
51
  title={value}
50
52
  placement="top"
51
53
  arrow={true}
54
+ disableHoverListener={!value}
52
55
  >
53
56
  <Typography
54
57
  style={{
@@ -59,7 +62,7 @@ function ProductAttribute(props: Props) {
59
62
  }}
60
63
  className="text-f12 fw-400"
61
64
  >
62
- {value}
65
+ {value || '-'}
63
66
  </Typography>
64
67
  </Tooltip>
65
68
  </div>
package/src/components/ProductDetailView.tsx CHANGED
@@ -42,12 +42,7 @@ interface Props {
42
42
  }
43
43
 
44
44
  function ProductDetailView(props: Props) {
45
- const {
46
- dataItem,
47
- handleClose,
48
- show3dView = false,
49
- onSearchImage,
50
- } = props;
45
+ const { dataItem, handleClose, show3dView = false, onSearchImage } = props;
51
46
  const { sku } = dataItem;
52
47
  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
53
48
  const { settings } = useAppSelector<AppState>((state: any) => state);
@@ -279,7 +274,11 @@ function ProductDetailView(props: Props) {
279
274
  <div className="info-container">
280
275
  <div className="info-sku">{dataItem.sku}</div>
281
276
  <div className="info-marking">{dataItem.Bezeichnung}</div>
282
- <div className="info-description">{settings.language === 'en' ? dataItem.VK_Text_Englisch : dataItem.VK_Text_Deutsch}</div>
277
+ <div className="info-description">
278
+ {settings.language === 'en'
279
+ ? dataItem.VK_Text_Englisch
280
+ : dataItem.VK_Text_Deutsch}
281
+ </div>
283
282
  </div>
284
283
  ) : (
285
284
  <div
@@ -353,40 +352,60 @@ function ProductDetailView(props: Props) {
353
352
  </div>
354
353
  {settings.attributes?.productAttributes && (
355
354
  <div className="attribute-container">
356
- {!!get(dataItem, settings.attributes?.attributeOneValue || '') && (
355
+ {settings.attributes?.attributeOneValue && (
357
356
  <ProductAttribute
358
357
  title={settings.attributes?.attributeOneLabelValue}
359
- value={get(dataItem, settings.attributes?.attributeOneValue || '')}
358
+ value={get(
359
+ dataItem,
360
+ settings.attributes?.attributeOneValue || '',
361
+ )}
360
362
  padding={'4px 8px'}
361
363
  backgroundColor={'#E0E0E0'}
362
- isTitleVisible={!!settings.attributes?.attributeOneLabelValue}
364
+ isTitleVisible={
365
+ !!settings.attributes?.attributeOneLabelValue
366
+ }
363
367
  />
364
368
  )}
365
- {!!get(dataItem, settings.attributes?.attributeTwoValue || '') && (
369
+ {settings.attributes?.attributeTwoValue && (
366
370
  <ProductAttribute
367
371
  title={settings.attributes?.attributeTwoLabelValue}
368
- value={get(dataItem, settings.attributes?.attributeTwoValue || '')}
372
+ value={get(
373
+ dataItem,
374
+ settings.attributes?.attributeTwoValue || '',
375
+ )}
369
376
  padding={'4px 8px'}
370
377
  backgroundColor={'#E0E0E0'}
371
- isTitleVisible={!!settings.attributes?.attributeTwoLabelValue}
378
+ isTitleVisible={
379
+ !!settings.attributes?.attributeTwoLabelValue
380
+ }
372
381
  />
373
382
  )}
374
- {!!get(dataItem, settings.attributes?.attributeThreeValue || '') && (
383
+ {settings.attributes?.attributeThreeValue && (
375
384
  <ProductAttribute
376
385
  title={settings.attributes?.attributeThreeLabelValue}
377
- value={get(dataItem, settings.attributes?.attributeThreeValue || '')}
386
+ value={get(
387
+ dataItem,
388
+ settings.attributes?.attributeThreeValue || '',
389
+ )}
378
390
  padding={'4px 8px'}
379
391
  backgroundColor={'#E0E0E0'}
380
- isTitleVisible={!!settings.attributes?.attributeThreeLabelValue}
392
+ isTitleVisible={
393
+ !!settings.attributes?.attributeThreeLabelValue
394
+ }
381
395
  />
382
396
  )}
383
- {!!get(dataItem, settings.attributes?.attributeFourValue || '') && (
397
+ {settings.attributes?.attributeFourValue && (
384
398
  <ProductAttribute
385
399
  title={settings.attributes?.attributeFourLabelValue}
386
- value={get(dataItem, settings.attributes?.attributeFourValue || '')}
400
+ value={get(
401
+ dataItem,
402
+ settings.attributes?.attributeFourValue || '',
403
+ )}
387
404
  padding={'4px 8px'}
388
405
  backgroundColor={'#E0E0E0'}
389
- isTitleVisible={!!settings.attributes?.attributeFourLabelValue}
406
+ isTitleVisible={
407
+ !!settings.attributes?.attributeFourLabelValue
408
+ }
390
409
  />
391
410
  )}
392
411
  </div>
@@ -411,7 +430,9 @@ function ProductDetailView(props: Props) {
411
430
  {settings.secondaryCTAButton?.secondaryCTAButton && (
412
431
  <div
413
432
  style={{
414
- background: settings.secondaryCTAButton?.secondaryCTAButtonColor || '#2B2C46',
433
+ background:
434
+ settings.secondaryCTAButton
435
+ ?.secondaryCTAButtonColor || '#2B2C46',
415
436
  borderRadius: 2,
416
437
  marginTop: 8,
417
438
  flex: 1,
@@ -431,16 +452,31 @@ function ProductDetailView(props: Props) {
431
452
  width: '100%',
432
453
  padding: '0px 12px',
433
454
  minHeight: 34,
434
- cursor: settings.secondaryCTAButton?.secondaryCTALinkField ? 'pointer' : 'normal',
455
+ cursor: settings.secondaryCTAButton
456
+ ?.secondaryCTALinkField
457
+ ? 'pointer'
458
+ : 'normal',
435
459
  }}
436
460
  onClick={() => {
437
- if (settings.secondaryCTAButton?.secondaryCTALinkField) {
438
- window.open(`${get(dataItem, settings.secondaryCTAButton?.secondaryCTALinkField)}`, '_blank');
461
+ if (
462
+ settings.secondaryCTAButton?.secondaryCTALinkField
463
+ ) {
464
+ window.open(
465
+ `${get(
466
+ dataItem,
467
+ settings.secondaryCTAButton
468
+ ?.secondaryCTALinkField,
469
+ )}`,
470
+ '_blank',
471
+ );
439
472
  }
440
473
  }}
441
474
  >
442
475
  <Tooltip
443
- title={settings.secondaryCTAButton?.secondaryCTAButtonText || ''}
476
+ title={
477
+ settings.secondaryCTAButton
478
+ ?.secondaryCTAButtonText || ''
479
+ }
444
480
  placement="top"
445
481
  arrow={true}
446
482
  >
@@ -451,10 +487,15 @@ function ProductDetailView(props: Props) {
451
487
  letterSpacing: '0.55px',
452
488
  maxWidth: '220px',
453
489
  paddingRight: '4px',
454
- color: settings.secondaryCTAButton.secondaryCTAButtonTextColor || '#FFFFFF',
490
+ color:
491
+ settings.secondaryCTAButton
492
+ .secondaryCTAButtonTextColor || '#FFFFFF',
455
493
  }}
456
494
  >
457
- {settings.secondaryCTAButton?.secondaryCTAButtonText}
495
+ {
496
+ settings.secondaryCTAButton
497
+ ?.secondaryCTAButtonText
498
+ }
458
499
  </Typography>
459
500
  </Tooltip>
460
501
  {settings.secondaryCTAButton.secondaryCTAIcon && (
@@ -466,7 +507,9 @@ function ProductDetailView(props: Props) {
466
507
  {settings.CTAButton?.CTAButton && (
467
508
  <div
468
509
  style={{
469
- background: settings.CTAButton?.CTAButtonColor || settings.theme?.primaryColor,
510
+ background:
511
+ settings.CTAButton?.CTAButtonColor ||
512
+ settings.theme?.primaryColor,
470
513
  borderRadius: 2,
471
514
  marginTop: 8,
472
515
  flex: 1,
@@ -486,16 +529,31 @@ function ProductDetailView(props: Props) {
486
529
  width: '100%',
487
530
  padding: '0px 12px',
488
531
  minHeight: 34,
489
- cursor: settings.CTAButton?.CTALinkField ? 'pointer' : 'normal',
532
+ cursor: settings.CTAButton?.CTALinkField
533
+ ? 'pointer'
534
+ : 'normal',
490
535
  }}
491
536
  onClick={() => {
492
537
  if (settings.CTAButton?.CTALinkField) {
493
- window.open(`${get(dataItem, settings.CTAButton?.CTALinkField)}`, '_blank');
538
+ window.open(
539
+ `${get(
540
+ dataItem,
541
+ settings.CTAButton?.CTALinkField,
542
+ )}`,
543
+ '_blank',
544
+ );
494
545
  }
495
546
  }}
496
547
  >
497
548
  <Tooltip
498
- title={get(dataItem, settings.CTAButton?.CTAButtonText || '') || settings.CTAButton?.CTAButtonText || ''}
549
+ title={
550
+ get(
551
+ dataItem,
552
+ settings.CTAButton?.CTAButtonText || '',
553
+ ) ||
554
+ settings.CTAButton?.CTAButtonText ||
555
+ ''
556
+ }
499
557
  placement="top"
500
558
  arrow={true}
501
559
  >
@@ -503,19 +561,29 @@ function ProductDetailView(props: Props) {
503
561
  className="text-f16 fw-600 max-line-1"
504
562
  align="left"
505
563
  style={{
506
- color: settings.CTAButton?.CTAButtonTextColor || '#FFFFFF',
564
+ color:
565
+ settings.CTAButton?.CTAButtonTextColor ||
566
+ '#FFFFFF',
507
567
  letterSpacing: '0.55px',
508
568
  maxWidth: '220px',
509
569
  paddingRight: '4px',
510
570
  }}
511
571
  >
512
- {get(dataItem, settings.CTAButton?.CTAButtonText || '') || settings.CTAButton?.CTAButtonText || ''}
572
+ {get(
573
+ dataItem,
574
+ settings.CTAButton?.CTAButtonText || '',
575
+ ) ||
576
+ settings.CTAButton?.CTAButtonText ||
577
+ ''}
513
578
  </Typography>
514
579
  </Tooltip>
515
580
  {settings.CTAButton?.CTAIcon && (
516
581
  <Icon
517
582
  name="link"
518
- fill={settings.CTAButton?.CTAButtonTextColor || '#FFFFFF'}
583
+ fill={
584
+ settings.CTAButton?.CTAButtonTextColor ||
585
+ '#FFFFFF'
586
+ }
519
587
  width={16}
520
588
  />
521
589
  )}
@@ -523,7 +591,7 @@ function ProductDetailView(props: Props) {
523
591
  </div>
524
592
  )}
525
593
  </div>
526
-
594
+
527
595
  {productDetails && (
528
596
  <div className="w-100">
529
597
  <Button
package/src/components/results/ItemResult.tsx CHANGED
@@ -247,7 +247,7 @@ function ItemResult(props: Props) {
247
247
  <div
248
248
  style={{
249
249
  maxHeight: '38px',
250
- height: 'fit-content'
250
+ height: 'fit-content',
251
251
  }}
252
252
  >
253
253
  {dataItem[settings.mainTitle] && (
@@ -281,7 +281,10 @@ function ItemResult(props: Props) {
281
281
  title={dataItem[settings.secondaryTitle]}
282
282
  placement="top"
283
283
  arrow={true}
284
- disableHoverListener={dataItem[settings.secondaryTitle]?.length < 19 || !dataItem[settings.secondaryTitle]}
284
+ disableHoverListener={
285
+ dataItem[settings.secondaryTitle]?.length < 19 ||
286
+ !dataItem[settings.secondaryTitle]
287
+ }
285
288
  >
286
289
  <Typography
287
290
  className="text-f10 max-line-1 fw-400"
@@ -293,68 +296,93 @@ function ItemResult(props: Props) {
293
296
  >
294
297
  {truncateString(
295
298
  dataItem[settings.secondaryTitle],
296
- isMobile ? 30 : 40,
299
+ isMobile ? 30 : 40,
297
300
  )}
298
301
  </Typography>
299
302
  </Tooltip>
300
303
  </div>
301
304
  )}
302
305
  </div>
303
- {(settings.attributes?.productAttributes
304
- && (settings.attributes?.attributeOneValue
305
- || settings.attributes?.attributeTwoValue
306
- || settings.attributes?.attributeThreeValue
307
- || settings.attributes?.attributeFourValue)) && (
308
- <div
309
- className="attribute-container"
310
- style={{
311
- display: 'flex',
312
- justifyContent: 'space-between',
313
- flexDirection: 'row',
314
- flexWrap: 'wrap',
315
- marginBottom: settings.CTAButton?.CTAButton || settings.secondaryCTAButton?.secondaryCTAButton ? 8 : 0,
316
- gridGap: 8,
317
- color: '#2B2C46',
318
- }}
319
- >
320
- {!!get(dataItem, settings.attributes?.attributeOneValue || '') && (
321
- <ProductAttribute
322
- title={settings.attributes?.attributeOneLabelValue}
323
- value={get(dataItem, settings.attributes?.attributeOneValue || '')}
324
- padding={'4px 8px'}
325
- backgroundColor={'#E0E0E0'}
326
- isTitleVisible={!!settings.attributes?.attributeOneLabelValue}
327
- />
328
- )}
329
- {!!get(dataItem, settings.attributes?.attributeTwoValue || '') && (
330
- <ProductAttribute
331
- title={settings.attributes?.attributeTwoLabelValue}
332
- value={get(dataItem, settings.attributes?.attributeTwoValue || '')}
333
- padding={'4px 8px'}
334
- backgroundColor={'#E0E0E0'}
335
- isTitleVisible={!!settings.attributes?.attributeTwoLabelValue}
336
- />
337
- )}
338
- {!!get(dataItem, settings.attributes?.attributeThreeValue || '') && (
339
- <ProductAttribute
340
- title={settings.attributes?.attributeThreeLabelValue}
341
- value={get(dataItem, settings.attributes?.attributeThreeValue || '')}
342
- padding={'4px 8px'}
343
- backgroundColor={'#E0E0E0'}
344
- isTitleVisible={!!settings.attributes?.attributeThreeLabelValue}
345
- />
346
- )}
347
- {!!get(dataItem, settings.attributes?.attributeFourValue || '') && (
348
- <ProductAttribute
349
- title={settings.attributes?.attributeFourLabelValue}
350
- value={get(dataItem, settings.attributes?.attributeFourValue || '')}
351
- padding={'4px 8px'}
352
- backgroundColor={'#E0E0E0'}
353
- isTitleVisible={!!settings.attributes?.attributeFourLabelValue}
354
- />
355
- )}
356
- </div>
357
- )}
306
+ {settings.attributes?.productAttributes &&
307
+ (settings.attributes?.attributeOneValue ||
308
+ settings.attributes?.attributeTwoValue ||
309
+ settings.attributes?.attributeThreeValue ||
310
+ settings.attributes?.attributeFourValue) && (
311
+ <div
312
+ className="attribute-container"
313
+ style={{
314
+ display: 'flex',
315
+ justifyContent: 'space-between',
316
+ flexDirection: 'row',
317
+ flexWrap: 'wrap',
318
+ marginBottom:
319
+ settings.CTAButton?.CTAButton ||
320
+ settings.secondaryCTAButton?.secondaryCTAButton
321
+ ? 8
322
+ : 0,
323
+ gridGap: 8,
324
+ color: '#2B2C46',
325
+ }}
326
+ >
327
+ {settings.attributes?.attributeOneValue && (
328
+ <ProductAttribute
329
+ title={settings.attributes?.attributeOneLabelValue}
330
+ value={get(
331
+ dataItem,
332
+ settings.attributes?.attributeOneValue || '',
333
+ )}
334
+ padding={'4px 8px'}
335
+ backgroundColor={'#E0E0E0'}
336
+ isTitleVisible={
337
+ !!settings.attributes?.attributeOneLabelValue
338
+ }
339
+ />
340
+ )}
341
+ {settings.attributes?.attributeTwoValue && (
342
+ <ProductAttribute
343
+ title={settings.attributes?.attributeTwoLabelValue}
344
+ value={get(
345
+ dataItem,
346
+ settings.attributes?.attributeTwoValue || '',
347
+ )}
348
+ padding={'4px 8px'}
349
+ backgroundColor={'#E0E0E0'}
350
+ isTitleVisible={
351
+ !!settings.attributes?.attributeTwoLabelValue
352
+ }
353
+ />
354
+ )}
355
+ {settings.attributes?.attributeThreeValue && (
356
+ <ProductAttribute
357
+ title={settings.attributes?.attributeThreeLabelValue}
358
+ value={get(
359
+ dataItem,
360
+ settings.attributes?.attributeThreeValue || '',
361
+ )}
362
+ padding={'4px 8px'}
363
+ backgroundColor={'#E0E0E0'}
364
+ isTitleVisible={
365
+ !!settings.attributes?.attributeThreeLabelValue
366
+ }
367
+ />
368
+ )}
369
+
370
+ {settings.attributes?.attributeFourValue && (
371
+ <ProductAttribute
372
+ title={settings.attributes?.attributeFourLabelValue}
373
+ value={get(
374
+ dataItem,
375
+ settings.attributes?.attributeFourValue || '',
376
+ )}
377
+ padding={'4px 8px'}
378
+ backgroundColor={'#E0E0E0'}
379
+ isTitleVisible={
380
+ !!settings.attributes?.attributeFourLabelValue
381
+ }
382
+ />
383
+ )}
384
+ </div>
385
+ )}
358
386
  </div>
359
387
  </div>
360
388
  <div>
@@ -364,7 +392,8 @@ function ItemResult(props: Props) {
364
392
  boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
365
393
  minHeight: 28,
366
394
  background:
367
- settings.secondaryCTAButton?.secondaryCTAButtonColor || '#2B2C46',
395
+ settings.secondaryCTAButton?.secondaryCTAButtonColor ||
396
+ '#2B2C46',
368
397
  borderRadius: 2,
369
398
  padding: '0px 8px',
370
399
  marginBottom: settings.CTAButton?.CTAButton ? 8 : 0,
@@ -381,17 +410,27 @@ function ItemResult(props: Props) {
381
410
  alignItems: 'center',
382
411
  width: '100%',
383
412
  padding: 0,
384
- cursor: settings.secondaryCTAButton.secondaryCTALinkField ? 'pointer' : 'normal',
413
+ cursor: settings.secondaryCTAButton.secondaryCTALinkField
414
+ ? 'pointer'
415
+ : 'normal',
385
416
  }}
386
417
  onClick={() => {
387
418
  if (settings.secondaryCTAButton?.secondaryCTALinkField) {
388
419
  feedbackConversionEpic(state, indexItem, dataItem.sku);
389
- window.open(`${get(dataItem, settings.secondaryCTAButton?.secondaryCTALinkField)}`, '_blank');
420
+ window.open(
421
+ `${get(
422
+ dataItem,
423
+ settings.secondaryCTAButton?.secondaryCTALinkField,
424
+ )}`,
425
+ '_blank',
426
+ );
390
427
  }
391
428
  }}
392
429
  >
393
430
  <Tooltip
394
- title={settings.secondaryCTAButton?.secondaryCTAButtonText || ''}
431
+ title={
432
+ settings.secondaryCTAButton?.secondaryCTAButtonText || ''
433
+ }
395
434
  placement="top"
396
435
  arrow={true}
397
436
  >
@@ -404,9 +443,14 @@ function ItemResult(props: Props) {
404
443
  fontSize: '12px',
405
444
  letterSpacing: '0.27px',
406
445
  wordBreak: 'break-all',
407
- color: settings.secondaryCTAButton.secondaryCTAButtonTextColor || '#FFFFFF',
446
+ color:
447
+ settings.secondaryCTAButton
448
+ .secondaryCTAButtonTextColor || '#FFFFFF',
408
449
  maxWidth:
409
- !isMobile && settings.secondaryCTAButton.secondaryCTALinkField ? '136px' : '164x',
450
+ !isMobile &&
451
+ settings.secondaryCTAButton.secondaryCTALinkField
452
+ ? '136px'
453
+ : '164x',
410
454
  paddingRight: '8px',
411
455
  }}
412
456
  align="left"
@@ -418,7 +462,7 @@ function ItemResult(props: Props) {
418
462
  <div style={{ width: '16px' }}>
419
463
  <Icon name="settings" color="white" />
420
464
  </div>
421
- )}
465
+ )}
422
466
  </div>
423
467
  </div>
424
468
  )}
@@ -445,17 +489,26 @@ function ItemResult(props: Props) {
445
489
  alignItems: 'center',
446
490
  width: '100%',
447
491
  padding: 0,
448
- cursor: settings.CTAButton?.CTALinkField ? 'pointer' : 'normal',
492
+ cursor: settings.CTAButton?.CTALinkField
493
+ ? 'pointer'
494
+ : 'normal',
449
495
  }}
450
496
  onClick={() => {
451
497
  if (settings.CTAButton?.CTALinkField) {
452
498
  feedbackConversionEpic(state, indexItem, dataItem.sku);
453
- window.open(`${get(dataItem, settings.CTAButton?.CTALinkField)}`, '_blank');
499
+ window.open(
500
+ `${get(dataItem, settings.CTAButton?.CTALinkField)}`,
501
+ '_blank',
502
+ );
454
503
  }
455
504
  }}
456
505
  >
457
506
  <Tooltip
458
- title={get(dataItem, settings.CTAButton?.CTAButtonText || '') || settings.CTAButton?.CTAButtonText || ''}
507
+ title={
508
+ get(dataItem, settings.CTAButton?.CTAButtonText || '') ||
509
+ settings.CTAButton?.CTAButtonText ||
510
+ ''
511
+ }
459
512
  placement="top"
460
513
  arrow={true}
461
514
  >
@@ -465,23 +518,31 @@ function ItemResult(props: Props) {
465
518
  overflow: 'hidden',
466
519
  textOverflow: 'ellipsis',
467
520
  fontWeight: 600,
468
- color: settings.CTAButton?.CTAButtonTextColor || '#FFFFFF',
521
+ color:
522
+ settings.CTAButton?.CTAButtonTextColor || '#FFFFFF',
469
523
  fontSize: '12px',
470
524
  letterSpacing: '0.27px',
471
525
  wordBreak: 'break-all',
472
- maxWidth: !isMobile && settings.CTAButton?.CTALinkField ? '136px' : '164x',
526
+ maxWidth:
527
+ !isMobile && settings.CTAButton?.CTALinkField
528
+ ? '136px'
529
+ : '164x',
473
530
  paddingRight: '8px',
474
531
  }}
475
532
  align="left"
476
533
  >
477
- {get(dataItem, settings.CTAButton?.CTAButtonText || '') || settings.CTAButton?.CTAButtonText || ''}
534
+ {get(dataItem, settings.CTAButton?.CTAButtonText || '') ||
535
+ settings.CTAButton?.CTAButtonText ||
536
+ ''}
478
537
  </Typography>
479
538
  </Tooltip>
480
539
  {settings.CTAButton?.CTAIcon && (
481
540
  <div style={{ width: '16px' }}>
482
541
  <Icon
483
542
  name="link"
484
- fill={settings.CTAButton?.CTAButtonTextColor || '#FFFFFF'}
543
+ fill={
544
+ settings.CTAButton?.CTAButtonTextColor || '#FFFFFF'
545
+ }
485
546
  width={16}
486
547
  />
487
548
  </div>