@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
|
@@ -241,13 +241,13 @@ function ItemResult(props: Props) {
|
|
|
241
241
|
display: 'flex',
|
|
242
242
|
justifyContent: 'space-between',
|
|
243
243
|
flexDirection: 'column',
|
|
244
|
-
color:
|
|
244
|
+
color: '#2B2C46',
|
|
245
245
|
}}
|
|
246
246
|
>
|
|
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] && (
|
|
@@ -259,7 +259,7 @@ function ItemResult(props: Props) {
|
|
|
259
259
|
<Typography
|
|
260
260
|
className="text-f12 max-line-1 fw-700"
|
|
261
261
|
style={{
|
|
262
|
-
color:
|
|
262
|
+
color: '#2B2C46',
|
|
263
263
|
marginBottom: 4,
|
|
264
264
|
marginLeft: 8,
|
|
265
265
|
}}
|
|
@@ -274,87 +274,115 @@ function ItemResult(props: Props) {
|
|
|
274
274
|
display: 'flex',
|
|
275
275
|
justifyContent: 'space-between',
|
|
276
276
|
flexDirection: 'row',
|
|
277
|
-
color:
|
|
277
|
+
color: '#2B2C46',
|
|
278
278
|
}}
|
|
279
279
|
>
|
|
280
280
|
<Tooltip
|
|
281
281
|
title={dataItem[settings.secondaryTitle]}
|
|
282
282
|
placement="top"
|
|
283
283
|
arrow={true}
|
|
284
|
-
disableHoverListener={
|
|
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"
|
|
288
291
|
style={{
|
|
289
|
-
color:
|
|
292
|
+
color: '#2B2C46',
|
|
290
293
|
marginBottom: 8,
|
|
291
294
|
marginLeft: 8,
|
|
292
295
|
}}
|
|
293
296
|
>
|
|
294
297
|
{truncateString(
|
|
295
298
|
dataItem[settings.secondaryTitle],
|
|
296
|
-
|
|
299
|
+
isMobile ? 30 : 40,
|
|
297
300
|
)}
|
|
298
301
|
</Typography>
|
|
299
302
|
</Tooltip>
|
|
300
303
|
</div>
|
|
301
304
|
)}
|
|
302
305
|
</div>
|
|
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
|
-
|
|
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 ||
|
|
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
|
|
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(
|
|
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={
|
|
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:
|
|
446
|
+
color:
|
|
447
|
+
settings.secondaryCTAButton
|
|
448
|
+
.secondaryCTAButtonTextColor || '#FFFFFF',
|
|
408
449
|
maxWidth:
|
|
409
|
-
!isMobile &&
|
|
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
|
|
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(
|
|
499
|
+
window.open(
|
|
500
|
+
`${get(dataItem, settings.CTAButton?.CTALinkField)}`,
|
|
501
|
+
'_blank',
|
|
502
|
+
);
|
|
454
503
|
}
|
|
455
504
|
}}
|
|
456
505
|
>
|
|
457
506
|
<Tooltip
|
|
458
|
-
title={
|
|
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:
|
|
521
|
+
color:
|
|
522
|
+
settings.CTAButton?.CTAButtonTextColor || '#FFFFFF',
|
|
469
523
|
fontSize: '12px',
|
|
470
524
|
letterSpacing: '0.27px',
|
|
471
525
|
wordBreak: 'break-all',
|
|
472
|
-
maxWidth:
|
|
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 || '') ||
|
|
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={
|
|
543
|
+
fill={
|
|
544
|
+
settings.CTAButton?.CTAButtonTextColor || '#FFFFFF'
|
|
545
|
+
}
|
|
485
546
|
width={16}
|
|
486
547
|
/>
|
|
487
548
|
</div>
|
package/src/types.ts
CHANGED
|
@@ -55,7 +55,6 @@ interface SecondaryCTAButton {
|
|
|
55
55
|
|
|
56
56
|
interface Attributes {
|
|
57
57
|
productAttributes?: boolean,
|
|
58
|
-
labelsAttributes?: boolean,
|
|
59
58
|
attributeOneLabelValue?: string,
|
|
60
59
|
attributeOneValue?: string,
|
|
61
60
|
attributeTwoLabelValue?: string,
|
|
@@ -75,13 +74,13 @@ export interface AppSettings extends NyrisAPISettings {
|
|
|
75
74
|
cadenas?: Cadenas;
|
|
76
75
|
clarityId?: string;
|
|
77
76
|
mainTitle: string,
|
|
77
|
+
productDetails: string;
|
|
78
78
|
secondaryTitle: string,
|
|
79
79
|
CTAButton?: CTAButtonSettings;
|
|
80
80
|
secondaryCTAButton?: SecondaryCTAButton;
|
|
81
81
|
attributes?: Attributes;
|
|
82
82
|
experienceVisualSearch?: boolean;
|
|
83
83
|
experienceVisualSearchImages?: string[];
|
|
84
|
-
field: Field;
|
|
85
84
|
headerText?: string;
|
|
86
85
|
instantRedirectPatterns: string[];
|
|
87
86
|
isBrandNameTitleVisible?: boolean;
|
|
@@ -117,9 +116,6 @@ export interface SearchSuiteSettings {
|
|
|
117
116
|
mobileFooterImageColor?: string;
|
|
118
117
|
primaryColor?: string;
|
|
119
118
|
secondaryColor?: string;
|
|
120
|
-
mainTextColor?: string;
|
|
121
|
-
brandFieldBackground?: string;
|
|
122
|
-
brandFieldPadding?: string;
|
|
123
119
|
}
|
|
124
120
|
|
|
125
121
|
export type AppState = {
|
|
File without changes
|