@nyris/nyris-webapp 0.3.44 → 0.3.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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nyris/nyris-webapp",
3
- "version": "0.3.44",
3
+ "version": "0.3.45",
4
4
  "homepage": "./",
5
5
  "dependencies": {
6
6
  "@algolia/autocomplete-js": "^1.7.1",
@@ -13,8 +13,8 @@
13
13
  "@material-ui/data-grid": "^4.0.0-alpha.37",
14
14
  "@material-ui/icons": "^4.4.1",
15
15
  "@material-ui/lab": "^4.0.0-alpha.60",
16
- "@nyris/nyris-api": "^0.3.44",
17
- "@nyris/nyris-react-components": "^0.3.44",
16
+ "@nyris/nyris-api": "^0.3.45",
17
+ "@nyris/nyris-react-components": "^0.3.45",
18
18
  "@reduxjs/toolkit": "^1.6.1",
19
19
  "@splidejs/react-splide": "^0.7.12",
20
20
  "@types/blueimp-load-image": "^2.23.4",
@@ -55,7 +55,7 @@ function ProductDetailView(props: Props) {
55
55
  show3dView = false,
56
56
  onSearchImage,
57
57
  } = props;
58
- const { sku } = dataItem;
58
+ const { sku, title } = dataItem;
59
59
  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
60
60
  const { settings } = useAppSelector<AppState>((state: any) => state);
61
61
  const brand = dataItem[settings.field.productTag];
@@ -347,6 +347,17 @@ function ProductDetailView(props: Props) {
347
347
  style={{ gap: 6 }}
348
348
  width={'100%'}
349
349
  >
350
+ {!settings.warehouseVariant && settings.CTAButtonText && (
351
+ <ProductAttribute
352
+ title={'Produktname'}
353
+ value={title}
354
+ width={
355
+ settings.warehouseVariant
356
+ ? { xs: '49%', md: 'fit-content' }
357
+ : { xs: '100%', md: 'fit-content' }
358
+ }
359
+ />
360
+ )}
350
361
  {!settings.warehouseVariant && (
351
362
  <ProductAttribute
352
363
  title={settings.itemIdLabel || 'SKU'}
@@ -449,7 +460,7 @@ function ProductDetailView(props: Props) {
449
460
  paddingRight: '4px',
450
461
  }}
451
462
  >
452
- {dataItem[settings.field.productName]}
463
+ {settings.CTAButtonText ? settings.CTAButtonText : dataItem[settings.field.productName]}
453
464
  </Typography>
454
465
  {ctaLink && (
455
466
  <img
@@ -237,11 +237,24 @@ function ItemResult(props: Props) {
237
237
  style={{ color: '#2B2C46' }}
238
238
  gridGap={8}
239
239
  >
240
+ {
241
+ settings.CTAButtonText && (
242
+ <Typography
243
+ className="text-f12 max-line-1 fw-700"
244
+ style={{
245
+ color: '#2B2C46',
246
+ marginTop: 8
247
+ }}
248
+ >
249
+ {truncateString(dataItem[settings.field.productName], 45)}
250
+ </Typography>
251
+ )
252
+ }
240
253
  <Box
241
254
  display="flex"
242
255
  justifyContent={'space-between'}
243
256
  flexDirection={'row'}
244
- style={{ color: '#2B2C46', marginTop: 12 }}
257
+ style={{ color: '#2B2C46', marginTop: 8 }}
245
258
  gridGap={8}
246
259
  >
247
260
  <Tooltip
@@ -339,67 +352,124 @@ function ItemResult(props: Props) {
339
352
  </Box>
340
353
  )}
341
354
  <div>
342
- <Tooltip
343
- title={dataItem[settings.field.productName]}
344
- placement="top"
345
- arrow={true}
346
- disableHoverListener={
347
- dataItem[settings.field.productName]?.length < 45
348
- }
349
- >
350
- <Box
351
- style={{
352
- boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
353
- // marginBottom: 22,
354
- height: 40,
355
- background: settings.theme?.primaryColor,
356
- borderRadius: 4,
357
- padding: '0px 8px',
358
- marginTop: '8px',
359
- }}
360
- display={'flex'}
361
- justifyItems={'center'}
362
- alignItems={'center'}
363
- justifyContent={'space-between'}
364
- >
365
- <Box
366
- style={{
367
- display: 'flex',
368
- justifyContent: 'space-between',
369
- width: '100%',
370
- padding: 0,
371
- cursor: ctaLink ? 'pointer' : 'normal',
372
- }}
373
- onClick={() => {
374
- if (ctaLink) {
375
- feedbackConversionEpic(state, indexItem, dataItem.sku);
376
- window.open(`${ctaLink}`, '_blank');
377
- }
378
- }}
355
+ {
356
+ !settings.CTAButtonText
357
+ ? (
358
+ <Tooltip
359
+ title={dataItem[settings.field.productName]}
360
+ placement="top"
361
+ arrow={true}
362
+ disableHoverListener={
363
+ dataItem[settings.field.productName]?.length < 45
364
+ }
379
365
  >
380
- <Typography
381
- className="text-white max-line-2"
366
+ <Box
382
367
  style={{
383
- overflow: 'hidden',
384
- textOverflow: 'ellipsis',
385
- fontWeight: 500,
386
- fontSize: '12px',
387
- letterSpacing: '0.27px',
388
- wordBreak: 'break-all',
389
- maxWidth: !isMobile && ctaLink ? '136px' : '164x',
390
- paddingRight: '8px',
368
+ boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
369
+ // marginBottom: 22,
370
+ height: 40,
371
+ background: settings.theme?.primaryColor,
372
+ borderRadius: 4,
373
+ padding: '0px 8px',
374
+ marginTop: '8px',
391
375
  }}
392
- align="left"
376
+ display={'flex'}
377
+ justifyItems={'center'}
378
+ alignItems={'center'}
379
+ justifyContent={'space-between'}
393
380
  >
394
- {truncateString(dataItem[settings.field.productName], 45)}
395
- </Typography>
396
- {!isMobile && ctaLink && (
397
- <img src={IconOpenLink} alt="more-info" width={16} />
398
- )}
399
- </Box>
400
- </Box>
401
- </Tooltip>
402
-
381
+ <Box
382
+ style={{
383
+ display: 'flex',
384
+ justifyContent: 'space-between',
385
+ width: '100%',
386
+ padding: 0,
387
+ cursor: ctaLink ? 'pointer' : 'normal',
388
+ }}
389
+ onClick={() => {
390
+ if (ctaLink) {
391
+ feedbackConversionEpic(state, indexItem, dataItem.sku);
392
+ window.open(`${ctaLink}`, '_blank');
393
+ }
394
+ }}
395
+ >
396
+ <Typography
397
+ className="text-white max-line-2"
398
+ style={{
399
+ overflow: 'hidden',
400
+ textOverflow: 'ellipsis',
401
+ fontWeight: 500,
402
+ fontSize: '12px',
403
+ letterSpacing: '0.27px',
404
+ wordBreak: 'break-all',
405
+ maxWidth: !isMobile && ctaLink ? '136px' : '164x',
406
+ paddingRight: '8px',
407
+ }}
408
+ align="left"
409
+ >
410
+ {truncateString(dataItem[settings.field.productName], 45)}
411
+ </Typography>
412
+ {!isMobile && ctaLink && (
413
+ <img src={IconOpenLink} alt="more-info" width={16} />
414
+ )}
415
+ </Box>
416
+ </Box>
417
+ </Tooltip>
418
+ ) : (
419
+ <Box
420
+ style={{
421
+ boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
422
+ // marginBottom: 22,
423
+ height: 40,
424
+ background: settings.theme?.primaryColor,
425
+ borderRadius: 4,
426
+ padding: '0px 8px',
427
+ marginTop: '8px',
428
+ }}
429
+ display={'flex'}
430
+ justifyItems={'center'}
431
+ alignItems={'center'}
432
+ justifyContent={'space-between'}
433
+ >
434
+ <Box
435
+ style={{
436
+ display: 'flex',
437
+ justifyContent: 'space-between',
438
+ width: '100%',
439
+ padding: 0,
440
+ cursor: ctaLink ? 'pointer' : 'normal',
441
+ }}
442
+ onClick={() => {
443
+ if (ctaLink) {
444
+ feedbackConversionEpic(state, indexItem, dataItem.sku);
445
+ window.open(`${ctaLink}`, '_blank');
446
+ }
447
+ }}
448
+ >
449
+ <Typography
450
+ className="text-white max-line-2"
451
+ style={{
452
+ overflow: 'hidden',
453
+ textOverflow: 'ellipsis',
454
+ fontWeight: 500,
455
+ fontSize: '12px',
456
+ letterSpacing: '0.27px',
457
+ wordBreak: 'break-all',
458
+ maxWidth: !isMobile && ctaLink ? '136px' : '164x',
459
+ paddingRight: '8px',
460
+ }}
461
+ align="left"
462
+ >
463
+ {settings.CTAButtonText}
464
+ </Typography>
465
+ {!isMobile && ctaLink && (
466
+ <img src={IconOpenLink} alt="more-info" width={16} />
467
+ )}
468
+ </Box>
469
+ </Box>
470
+ )
471
+ }
472
+
403
473
  {settings.showFeedbackAndShare && (
404
474
  <Box
405
475
  className="box-bottom"
package/src/types.ts CHANGED
@@ -64,6 +64,7 @@ export interface AppSettings extends NyrisAPISettings {
64
64
  theme: SearchSuiteSettings;
65
65
  visualSearchFilterKey?: string;
66
66
  warehouseVariant?: boolean;
67
+ CTAButtonText?: string;
67
68
  }
68
69
 
69
70
  export interface SearchSuiteSettings {