@nyris/nyris-webapp 0.3.62 → 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.
- package/README.md +3 -32
- package/build/asset-manifest.json +4 -4
- package/build/index.html +1 -1
- package/build/js/settings.example.js +5 -20
- package/build/static/js/{main.175f27e1.js → main.5fd57b22.js} +3 -3
- package/build/static/js/{main.175f27e1.js.map → main.5fd57b22.js.map} +1 -1
- package/package.json +3 -3
- package/public/index.html +0 -18
- package/public/js/settings.example.js +5 -20
- package/src/Store/constants.ts +1 -3
- package/src/components/ProductAttribute.tsx +6 -3
- package/src/components/ProductDetailView.tsx +116 -48
- package/src/components/results/ItemResult.tsx +137 -76
- package/src/types.ts +1 -5
- /package/build/static/js/{main.175f27e1.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.
|
|
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.
|
|
11
|
-
"@nyris/nyris-react-components": "^0.3.
|
|
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/public/index.html
CHANGED
|
@@ -21,24 +21,6 @@
|
|
|
21
21
|
/>
|
|
22
22
|
|
|
23
23
|
<script src="js/settings.js?CI_COMMIT_SHA"></script>
|
|
24
|
-
<link
|
|
25
|
-
rel="stylesheet"
|
|
26
|
-
href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic"
|
|
27
|
-
/>
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<!-- Piwik Analytics -->
|
|
31
|
-
<script type="text/javascript">
|
|
32
|
-
(function(window, document, dataLayerName, id) {
|
|
33
|
-
window[dataLayerName]=window[dataLayerName]||[],window[dataLayerName].push({start:(new Date).getTime(),event:"stg.start"});var scripts=document.getElementsByTagName('script')[0],tags=document.createElement('script');
|
|
34
|
-
function stgCreateCookie(a,b,c){var d="";if(c){var e=new Date;e.setTime(e.getTime()+24*c*60*60*1e3),d="; expires="+e.toUTCString();f="; SameSite=Strict"}document.cookie=a+"="+b+d+f+"; path=/"}
|
|
35
|
-
var isStgDebug=(window.location.href.match("stg_debug")||document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?14:-1);
|
|
36
|
-
var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName),isStgDebug&&qP.push("stg_debug");var qPString=qP.length>0?("?"+qP.join("&")):"";
|
|
37
|
-
tags.async=!0,tags.src="https://nyris.containers.piwik.pro/"+id+".js"+qPString,scripts.parentNode.insertBefore(tags,scripts);
|
|
38
|
-
!function(a,n,i){a[n]=a[n]||{};for(var c=0;c<i.length;c++)!function(i){a[n][i]=a[n][i]||{},a[n][i].api=a[n][i].api||function(){var a=[].slice.call(arguments,0);"string"==typeof a[0]&&window[dataLayerName].push({event:n+"."+i+":"+a[0],parameters:[].slice.call(arguments,1)})}}(i[c])}(window,"ppms",["tm","cm"]);
|
|
39
|
-
})(window, document, 'dataLayer', 'ace6a922-26e4-44b2-becf-ac94e9e5ecb4');
|
|
40
|
-
</script>
|
|
41
|
-
<!-- End Piwik Analytics -->
|
|
42
24
|
|
|
43
25
|
<script>
|
|
44
26
|
let vh = window.innerHeight * 0.01;
|
|
@@ -39,19 +39,12 @@ var settings = {
|
|
|
39
39
|
logoWidth: '',
|
|
40
40
|
primaryColor: '',
|
|
41
41
|
secondaryColor: '',
|
|
42
|
-
CTAButtonColor: '',
|
|
43
|
-
CTAButtonTextColor: '',
|
|
44
|
-
secondaryCTAButtonColor: '',
|
|
45
|
-
mainTextColor: '',
|
|
46
|
-
brandFieldBackground: '',
|
|
47
|
-
brandFieldPadding: '',
|
|
48
42
|
},
|
|
49
43
|
// Card Results
|
|
50
44
|
mainTitle: '',
|
|
51
45
|
secondaryTitle: '',
|
|
46
|
+
productDetails: 'keyword_1',
|
|
52
47
|
attributes: {
|
|
53
|
-
productAttributes: true,
|
|
54
|
-
labelsAttributes: true,
|
|
55
48
|
attributeOneLabelValue: '',
|
|
56
49
|
attributeOneValue: '',
|
|
57
50
|
attributeTwoLabelValue: '',
|
|
@@ -67,7 +60,6 @@ var settings = {
|
|
|
67
60
|
secondaryCTAButtonTextColor: '',
|
|
68
61
|
secondaryCTAButtonColor: '',
|
|
69
62
|
secondaryCTAIcon: '',
|
|
70
|
-
secondaryCTAIconSource: '',
|
|
71
63
|
secondaryCTALinkField: '',
|
|
72
64
|
},
|
|
73
65
|
CTAButton: {
|
|
@@ -76,13 +68,8 @@ var settings = {
|
|
|
76
68
|
CTAButtonTextColor: '',
|
|
77
69
|
CTAButtonColor: '',
|
|
78
70
|
CTAIcon: '',
|
|
79
|
-
CTAIconSource: '',
|
|
80
71
|
CTALinkField: '',
|
|
81
72
|
},
|
|
82
|
-
//field mappins
|
|
83
|
-
field: {
|
|
84
|
-
productDetails: 'keyword_1',
|
|
85
|
-
},
|
|
86
73
|
language: 'en',
|
|
87
74
|
// features
|
|
88
75
|
showPoweredByNyris: '',
|
|
@@ -90,6 +77,10 @@ var settings = {
|
|
|
90
77
|
preFilterOption: '',
|
|
91
78
|
experienceVisualSearch: false,
|
|
92
79
|
experienceVisualSearchImages: [],
|
|
80
|
+
simpleCardView: false,
|
|
81
|
+
clarityId: '',
|
|
82
|
+
noSimilarSearch: false,
|
|
83
|
+
showFeedback: false,
|
|
93
84
|
rfq: {
|
|
94
85
|
enabled: '',
|
|
95
86
|
emailTemplateId: '',
|
|
@@ -108,14 +99,8 @@ var settings = {
|
|
|
108
99
|
},
|
|
109
100
|
//UI - labels
|
|
110
101
|
appTitle: '',
|
|
111
|
-
brandName: '',
|
|
112
102
|
headerText: '',
|
|
113
103
|
preFilterTitle: '',
|
|
114
|
-
CTAButtonText: 'View More',
|
|
115
|
-
simpleCardView: false,
|
|
116
|
-
secondaryCTAButtonText: 'Configure Now',
|
|
117
|
-
clarityId: '',
|
|
118
|
-
noSimilarSearch: false,
|
|
119
104
|
};
|
|
120
105
|
settings['customSearchRequest'] = null;
|
|
121
106
|
settings['responseHook'] = null;
|
package/src/Store/constants.ts
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'
|
|
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>
|
|
@@ -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);
|
|
@@ -98,13 +93,13 @@ function ProductDetailView(props: Props) {
|
|
|
98
93
|
setDataImageCarouSel(valueKey);
|
|
99
94
|
};
|
|
100
95
|
const productDetails = useMemo(() => {
|
|
101
|
-
const details = get(dataItem, settings.
|
|
96
|
+
const details = get(dataItem, settings.productDetails);
|
|
102
97
|
try {
|
|
103
98
|
return details.join(', ');
|
|
104
99
|
} catch (e) {
|
|
105
100
|
return details;
|
|
106
101
|
}
|
|
107
|
-
}, [dataItem, settings.
|
|
102
|
+
}, [dataItem, settings.productDetails]);
|
|
108
103
|
|
|
109
104
|
return (
|
|
110
105
|
<div
|
|
@@ -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">
|
|
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
|
|
@@ -316,7 +315,7 @@ function ProductDetailView(props: Props) {
|
|
|
316
315
|
<Typography
|
|
317
316
|
className="text-f16 max-line-1 fw-700"
|
|
318
317
|
style={{
|
|
319
|
-
color:
|
|
318
|
+
color: '#2B2C46',
|
|
320
319
|
fontFamily: 'Source Sans 3',
|
|
321
320
|
fontSize: '16px',
|
|
322
321
|
lineHeight: '22.78px',
|
|
@@ -337,7 +336,7 @@ function ProductDetailView(props: Props) {
|
|
|
337
336
|
<Typography
|
|
338
337
|
className="text-f14 max-line-1 fw-400"
|
|
339
338
|
style={{
|
|
340
|
-
color:
|
|
339
|
+
color: '#2B2C46',
|
|
341
340
|
width: 'fit-content',
|
|
342
341
|
marginLeft: 8,
|
|
343
342
|
fontSize: 14,
|
|
@@ -353,40 +352,60 @@ function ProductDetailView(props: Props) {
|
|
|
353
352
|
</div>
|
|
354
353
|
{settings.attributes?.productAttributes && (
|
|
355
354
|
<div className="attribute-container">
|
|
356
|
-
{
|
|
355
|
+
{settings.attributes?.attributeOneValue && (
|
|
357
356
|
<ProductAttribute
|
|
358
357
|
title={settings.attributes?.attributeOneLabelValue}
|
|
359
|
-
value={get(
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
358
|
+
value={get(
|
|
359
|
+
dataItem,
|
|
360
|
+
settings.attributes?.attributeOneValue || '',
|
|
361
|
+
)}
|
|
362
|
+
padding={'4px 8px'}
|
|
363
|
+
backgroundColor={'#E0E0E0'}
|
|
364
|
+
isTitleVisible={
|
|
365
|
+
!!settings.attributes?.attributeOneLabelValue
|
|
366
|
+
}
|
|
363
367
|
/>
|
|
364
368
|
)}
|
|
365
|
-
{
|
|
369
|
+
{settings.attributes?.attributeTwoValue && (
|
|
366
370
|
<ProductAttribute
|
|
367
371
|
title={settings.attributes?.attributeTwoLabelValue}
|
|
368
|
-
value={get(
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
+
value={get(
|
|
373
|
+
dataItem,
|
|
374
|
+
settings.attributes?.attributeTwoValue || '',
|
|
375
|
+
)}
|
|
376
|
+
padding={'4px 8px'}
|
|
377
|
+
backgroundColor={'#E0E0E0'}
|
|
378
|
+
isTitleVisible={
|
|
379
|
+
!!settings.attributes?.attributeTwoLabelValue
|
|
380
|
+
}
|
|
372
381
|
/>
|
|
373
382
|
)}
|
|
374
|
-
{
|
|
383
|
+
{settings.attributes?.attributeThreeValue && (
|
|
375
384
|
<ProductAttribute
|
|
376
385
|
title={settings.attributes?.attributeThreeLabelValue}
|
|
377
|
-
value={get(
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
386
|
+
value={get(
|
|
387
|
+
dataItem,
|
|
388
|
+
settings.attributes?.attributeThreeValue || '',
|
|
389
|
+
)}
|
|
390
|
+
padding={'4px 8px'}
|
|
391
|
+
backgroundColor={'#E0E0E0'}
|
|
392
|
+
isTitleVisible={
|
|
393
|
+
!!settings.attributes?.attributeThreeLabelValue
|
|
394
|
+
}
|
|
381
395
|
/>
|
|
382
396
|
)}
|
|
383
|
-
{
|
|
397
|
+
{settings.attributes?.attributeFourValue && (
|
|
384
398
|
<ProductAttribute
|
|
385
399
|
title={settings.attributes?.attributeFourLabelValue}
|
|
386
|
-
value={get(
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
400
|
+
value={get(
|
|
401
|
+
dataItem,
|
|
402
|
+
settings.attributes?.attributeFourValue || '',
|
|
403
|
+
)}
|
|
404
|
+
padding={'4px 8px'}
|
|
405
|
+
backgroundColor={'#E0E0E0'}
|
|
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:
|
|
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
|
|
455
|
+
cursor: settings.secondaryCTAButton
|
|
456
|
+
?.secondaryCTALinkField
|
|
457
|
+
? 'pointer'
|
|
458
|
+
: 'normal',
|
|
435
459
|
}}
|
|
436
460
|
onClick={() => {
|
|
437
|
-
if (
|
|
438
|
-
|
|
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={
|
|
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:
|
|
490
|
+
color:
|
|
491
|
+
settings.secondaryCTAButton
|
|
492
|
+
.secondaryCTAButtonTextColor || '#FFFFFF',
|
|
455
493
|
}}
|
|
456
494
|
>
|
|
457
|
-
{
|
|
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:
|
|
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
|
|
532
|
+
cursor: settings.CTAButton?.CTALinkField
|
|
533
|
+
? 'pointer'
|
|
534
|
+
: 'normal',
|
|
490
535
|
}}
|
|
491
536
|
onClick={() => {
|
|
492
537
|
if (settings.CTAButton?.CTALinkField) {
|
|
493
|
-
window.open(
|
|
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={
|
|
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:
|
|
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(
|
|
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={
|
|
583
|
+
fill={
|
|
584
|
+
settings.CTAButton?.CTAButtonTextColor ||
|
|
585
|
+
'#FFFFFF'
|
|
586
|
+
}
|
|
519
587
|
width={16}
|
|
520
588
|
/>
|
|
521
589
|
)}
|
|
@@ -523,14 +591,14 @@ 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
|
|
530
598
|
className="w-100 button-hover"
|
|
531
599
|
style={{
|
|
532
600
|
backgroundColor: '#F3F3F5',
|
|
533
|
-
color:
|
|
601
|
+
color: '#2b2c46',
|
|
534
602
|
display: 'flex',
|
|
535
603
|
fontSize: 14,
|
|
536
604
|
justifyContent: 'space-between',
|
|
@@ -559,7 +627,7 @@ function ProductDetailView(props: Props) {
|
|
|
559
627
|
padding: 5,
|
|
560
628
|
paddingLeft: 15,
|
|
561
629
|
paddingRight: 15,
|
|
562
|
-
color:
|
|
630
|
+
color: '#2b2c46',
|
|
563
631
|
}}
|
|
564
632
|
>
|
|
565
633
|
{productDetails}
|