@nyris/nyris-webapp 0.3.48 → 0.3.49

package/build/static/media/settings.e3c8138b.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3007 8.43552V8V7.55875L15.4009 6.59603C15.8197 6.22695 15.9116 5.60988 15.6187 5.13475L14.2663 2.84254C14.0618 2.4883 13.684 2.26991 13.2749 2.26949C13.1504 2.26854 13.0265 2.28789 12.9082 2.3268L11.5157 2.7967C11.2752 2.63694 11.0244 2.49336 10.765 2.36691L10.4727 0.922825C10.3645 0.378294 9.88166 -0.0104241 9.3266 0.000213077H6.64472C6.08966 -0.0104241 5.60678 0.378294 5.49862 0.922825L5.20636 2.36691C4.94501 2.49333 4.69232 2.6369 4.44994 2.7967L3.08608 2.30388C2.96648 2.27272 2.84263 2.26111 2.71932 2.26949C2.31028 2.26991 1.93247 2.4883 1.72795 2.84254L0.375548 5.13475C0.0996813 5.60867 0.198168 6.2116 0.610498 6.5731L1.69356 7.56448V8V8.44125L0.610498 9.40397C0.186011 9.76843 0.0866989 10.3861 0.375548 10.8653L1.72795 13.1575C1.93247 13.5117 2.31028 13.7301 2.71932 13.7305C2.84388 13.7315 2.96775 13.7121 3.08608 13.6732L4.47859 13.2033C4.71901 13.3631 4.96979 13.5066 5.22929 13.6331L5.52154 15.0772C5.6297 15.6217 6.11258 16.0104 6.66764 15.9998H9.37244C9.92751 16.0104 10.4104 15.6217 10.5185 15.0772L10.8108 13.6331C11.0721 13.5067 11.3248 13.3631 11.5672 13.2033L12.954 13.6732C13.0723 13.7121 13.1962 13.7315 13.3208 13.7305C13.7298 13.7301 14.1076 13.5117 14.3121 13.1575L15.6187 10.8653C15.8946 10.3913 15.7961 9.7884 15.3837 9.4269L14.3007 8.43552ZM13.2749 12.5844L11.3094 11.9197C10.8492 12.3094 10.3234 12.6141 9.75639 12.8194L9.34952 14.8766H6.64472L6.23786 12.8423C5.67536 12.6312 5.15234 12.327 4.69062 11.9426L2.71932 12.5844L1.36693 10.2922L2.92562 8.91688C2.81966 8.32369 2.81966 7.71642 2.92562 7.12323L1.36693 5.7078L2.71932 3.41559L4.68489 4.08033C5.14501 3.6906 5.67088 3.38594 6.23786 3.18064L6.64472 1.12339H9.34952L9.75639 3.15772C10.3189 3.36885 10.8419 3.67298 11.3036 4.05741L13.2749 3.41559L14.6273 5.7078L13.0686 7.08312C13.1746 7.67631 13.1746 8.28358 13.0686 8.87677L14.6273 10.2922L13.2749 12.5844ZM7.99712 11.4383C6.0982 11.4383 4.55882 9.89892 4.55882 8C4.55882 6.10108 6.0982 4.5617 7.99712 4.5617C9.89604 4.5617 11.4354 6.10108 11.4354 8C11.4447 8.91471 11.0854 9.79466 10.4386 10.4415C9.79178 11.0883 8.91183 11.4476 7.99712 11.4383ZM7.99712 5.7078C7.38493 5.69354 6.79358 5.93045 6.36058 6.36345C5.92757 6.79646 5.69066 7.38781 5.70492 8C5.69066 8.61219 5.92757 9.20354 6.36058 9.63655C6.79358 10.0695 7.38493 10.3065 7.99712 10.2922C8.60931 10.3065 9.20066 10.0695 9.63367 9.63655C10.0667 9.20354 10.3036 8.61219 10.2893 8C10.3036 7.38781 10.0667 6.79646 9.63367 6.36345C9.20066 5.93045 8.60931 5.69354 7.99712 5.7078Z" fill="currentColor"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.48",
+  "version": "0.3.49",
   "homepage": "./",
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
@@ -13,8 +13,8 @@
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "^0.3.48",
-    "@nyris/nyris-react-components": "^0.3.48",
+    "@nyris/nyris-api": "^0.3.49",
+    "@nyris/nyris-react-components": "^0.3.49",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",

package/public/js/settings.example.js

@@ -69,10 +69,13 @@ var settings = {
   headerText: '',
   itemIdLabel: 'SKU',
   preFilterTitle: '',
-  CTAButtonText: '',
+  CTAButtonText: 'View More',
+  secondaryCTAButtonText: 'Configure Now',
+
   //field mappins
   field: {
     ctaLinkField: 'main_offer_link',
+    secondaryCTALinkField: 'main_offer_link',
     productName: 'title',
     productDetails: 'keyword_1',
     manufacturerNumber: 'keyword_0',

package/src/common/assets/icons/settings.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3007 8.43552V8V7.55875L15.4009 6.59603C15.8197 6.22695 15.9116 5.60988 15.6187 5.13475L14.2663 2.84254C14.0618 2.4883 13.684 2.26991 13.2749 2.26949C13.1504 2.26854 13.0265 2.28789 12.9082 2.3268L11.5157 2.7967C11.2752 2.63694 11.0244 2.49336 10.765 2.36691L10.4727 0.922825C10.3645 0.378294 9.88166 -0.0104241 9.3266 0.000213077H6.64472C6.08966 -0.0104241 5.60678 0.378294 5.49862 0.922825L5.20636 2.36691C4.94501 2.49333 4.69232 2.6369 4.44994 2.7967L3.08608 2.30388C2.96648 2.27272 2.84263 2.26111 2.71932 2.26949C2.31028 2.26991 1.93247 2.4883 1.72795 2.84254L0.375548 5.13475C0.0996813 5.60867 0.198168 6.2116 0.610498 6.5731L1.69356 7.56448V8V8.44125L0.610498 9.40397C0.186011 9.76843 0.0866989 10.3861 0.375548 10.8653L1.72795 13.1575C1.93247 13.5117 2.31028 13.7301 2.71932 13.7305C2.84388 13.7315 2.96775 13.7121 3.08608 13.6732L4.47859 13.2033C4.71901 13.3631 4.96979 13.5066 5.22929 13.6331L5.52154 15.0772C5.6297 15.6217 6.11258 16.0104 6.66764 15.9998H9.37244C9.92751 16.0104 10.4104 15.6217 10.5185 15.0772L10.8108 13.6331C11.0721 13.5067 11.3248 13.3631 11.5672 13.2033L12.954 13.6732C13.0723 13.7121 13.1962 13.7315 13.3208 13.7305C13.7298 13.7301 14.1076 13.5117 14.3121 13.1575L15.6187 10.8653C15.8946 10.3913 15.7961 9.7884 15.3837 9.4269L14.3007 8.43552ZM13.2749 12.5844L11.3094 11.9197C10.8492 12.3094 10.3234 12.6141 9.75639 12.8194L9.34952 14.8766H6.64472L6.23786 12.8423C5.67536 12.6312 5.15234 12.327 4.69062 11.9426L2.71932 12.5844L1.36693 10.2922L2.92562 8.91688C2.81966 8.32369 2.81966 7.71642 2.92562 7.12323L1.36693 5.7078L2.71932 3.41559L4.68489 4.08033C5.14501 3.6906 5.67088 3.38594 6.23786 3.18064L6.64472 1.12339H9.34952L9.75639 3.15772C10.3189 3.36885 10.8419 3.67298 11.3036 4.05741L13.2749 3.41559L14.6273 5.7078L13.0686 7.08312C13.1746 7.67631 13.1746 8.28358 13.0686 8.87677L14.6273 10.2922L13.2749 12.5844ZM7.99712 11.4383C6.0982 11.4383 4.55882 9.89892 4.55882 8C4.55882 6.10108 6.0982 4.5617 7.99712 4.5617C9.89604 4.5617 11.4354 6.10108 11.4354 8C11.4447 8.91471 11.0854 9.79466 10.4386 10.4415C9.79178 11.0883 8.91183 11.4476 7.99712 11.4383ZM7.99712 5.7078C7.38493 5.69354 6.79358 5.93045 6.36058 6.36345C5.92757 6.79646 5.69066 7.38781 5.70492 8C5.69066 8.61219 5.92757 9.20354 6.36058 9.63655C6.79358 10.0695 7.38493 10.3065 7.99712 10.2922C8.60931 10.3065 9.20066 10.0695 9.63367 9.63655C10.0667 9.20354 10.3036 8.61219 10.2893 8C10.3036 7.38781 10.0667 6.79646 9.63367 6.36345C9.20066 5.93045 8.60931 5.69354 7.99712 5.7078Z" fill="currentColor"/>
+</svg>

package/src/components/HeaderMobile.tsx

@@ -88,7 +88,15 @@ function HeaderMobileComponent(props: Props): JSX.Element {
         dispatch(updateQueryText(''));
         setValueInput('');
       }
+    } else {
+      if (settings.algolia?.enabled) {
+        // not an ideal solution: fixes text search not working after removing image
+        setTimeout(() => {
+          refine(searchQuery);
+        }, 100);
+      }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imageThumbSearchInput, dispatch, refine, history, settings.algolia]);
 
   useEffect(() => {

package/src/components/ImagePreviewMobile.tsx

@@ -16,14 +16,12 @@ import {
   updateStatusLoading,
 } from 'Store/search/Search';
 import { useHistory } from 'react-router-dom';
-import { connectSearchBox } from 'react-instantsearch-dom';
 import { find } from 'services/image';
 import { isEmpty } from 'lodash';
 
 function ImagePreviewMobileComponent({
   requestImage,
   imageSelection,
-  setImageSelection,
   debouncedOnImageSelectionChange,
   filteredRegions,
   showAdjustInfo,
@@ -32,14 +30,13 @@ function ImagePreviewMobileComponent({
 }: {
   requestImage: any;
   imageSelection: any;
-  setImageSelection: any;
+
   debouncedOnImageSelectionChange: any;
   filteredRegions: any;
   showAdjustInfoBasedOnConfidence: any;
   showAdjustInfo: any;
 }) {
   const { t } = useTranslation();
-  const { refine }: any = rest;
   const [editActive, setEditActive] = useState(false);
   const settings = useAppSelector(state => state.settings);
   const { preFilter } = useAppSelector(state => state.search);
@@ -60,12 +57,7 @@ function ImagePreviewMobileComponent({
       history.push('/');
     }
     dispatch(reset(''));
-    if (isAlgoliaEnabled) {
-      // not an ideal solution: fixes text search not working after removing image
-      setTimeout(() => {
-        refine(searchQuery);
-      }, 100);
-    }
+
     if (!isAlgoliaEnabled) {
       let payload: any;
       let filters: any[] = [];
@@ -127,7 +119,6 @@ function ImagePreviewMobileComponent({
               <Preview
                 key={requestImage?.id}
                 onSelectionChange={(r: RectCoords) => {
-                  setImageSelection(r);
                   debouncedOnImageSelectionChange(r);
                 }}
                 image={requestImage?.canvas}
@@ -235,7 +226,5 @@ function ImagePreviewMobileComponent({
     </Box>
   );
 }
-const ImagePreviewMobile = connectSearchBox<any>(
-  memo(ImagePreviewMobileComponent),
-);
+const ImagePreviewMobile = memo(ImagePreviewMobileComponent);
 export default ImagePreviewMobile;

package/src/components/ProductDetailView.tsx

@@ -9,6 +9,8 @@ import { ReactComponent as IconSearchImage } from 'common/assets/icons/icon_sear
 import { ReactComponent as IconShare } from 'common/assets/icons/Fill.svg';
 import { ReactComponent as IconDisLike } from 'common/assets/icons/icon_dislike.svg';
 import { ReactComponent as IconLike } from 'common/assets/icons/icon_like.svg';
+import { ReactComponent as IconSettings } from 'common/assets/icons/settings.svg';
+
 import { AppState } from 'types';
 import { useAppSelector } from 'Store/Store';
 import { prepareImageList } from '../helpers/CommonHelper';
@@ -76,6 +78,13 @@ function ProductDetailView(props: Props) {
     settings.field?.ctaLinkField ? settings.field?.ctaLinkField : 'links.main',
   );
 
+  const secondaryCTALink = get(
+    dataItem,
+    settings.field?.secondaryCTALinkField
+      ? settings.field?.secondaryCTALinkField
+      : '',
+  );
+
   useEffect(() => {
     if (dataItem) {
       checkDataItemResult(dataItem);
@@ -446,6 +455,51 @@ function ProductDetailView(props: Props) {
                   backgroundColor: '#F3F3F5',
                 }}
               >
+                {settings.secondaryCTAButtonText && (
+                  <Box
+                    style={{
+                      background: '#2B2C46',
+                      boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+                      borderRadius: 4,
+                      marginTop: 8,
+                    }}
+                    display={'flex'}
+                    justifyContent={'space-between'}
+                    alignItems={'center'}
+                    className="btn-detail-item"
+                  >
+                    <Box
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        width: '100%',
+                        padding: '0px 12px',
+                        minHeight: 64,
+                        cursor: secondaryCTALink ? 'pointer' : 'normal',
+                      }}
+                      onClick={() => {
+                        if (secondaryCTALink) {
+                          window.open(`${secondaryCTALink}`, '_blank');
+                        }
+                      }}
+                    >
+                      <Typography
+                        className="text-f18 fw-700 text-white max-line-2"
+                        align="left"
+                        style={{
+                          letterSpacing: '0.55px',
+                          maxWidth: '500px',
+                          paddingRight: '4px',
+                        }}
+                      >
+                        {settings.secondaryCTAButtonText}
+                      </Typography>
+                      {secondaryCTALink && <IconSettings color="white" />}
+                    </Box>
+                  </Box>
+                )}
+
                 <Box
                   style={{
                     background: settings.theme?.primaryColor,
@@ -496,6 +550,7 @@ function ProductDetailView(props: Props) {
                     )}
                   </Box>
                 </Box>
+
                 {productDetails && (
                   <Box className="w-100">
                     <Button

package/src/components/SidePanel.tsx

@@ -102,7 +102,6 @@ function SidePanel({
                     <Preview
                       key={requestImage?.id}
                       onSelectionChange={(r: RectCoords) => {
-                        setImageSelection(r);
                         debouncedOnImageSelectionChange(r);
                       }}
                       image={requestImage?.canvas}

package/src/components/results/ItemResult.tsx

@@ -6,6 +6,7 @@ import { ReactComponent as IconDisLike } from 'common/assets/icons/icon_dislike.
 import { ReactComponent as IconLike } from 'common/assets/icons/icon_like.svg';
 import { ReactComponent as IconSearchImage } from 'common/assets/icons/icon_search_image2.svg';
 import { ReactComponent as Box3dIcon } from 'common/assets/icons/3d.svg';
+import { ReactComponent as IconSettings } from 'common/assets/icons/settings.svg';
 
 import React, { memo, useEffect, useState } from 'react';
 import NoImage from 'common/assets/images/no-image.svg';
@@ -115,6 +116,13 @@ function ItemResult(props: Props) {
     dataItem,
     settings.field?.ctaLinkField ? settings.field?.ctaLinkField : 'links.main',
   );
+  const secondaryCTALink = get(
+    dataItem,
+    settings.field?.secondaryCTALinkField
+      ? settings.field?.secondaryCTALinkField
+      : '',
+  );
+
   const manufacturerNumber = get(dataItem, settings.field.manufacturerNumber);
   return (
     <Box className="wrap-main-item-result">
@@ -234,7 +242,7 @@ function ItemResult(props: Props) {
             justifyContent={'space-between'}
             flexDirection={'column'}
             style={{ color: '#2B2C46' }}
-            gridGap={8}
+            gridGap={6}
           >
             {settings.CTAButtonText && (
               <Typography
@@ -251,7 +259,10 @@ function ItemResult(props: Props) {
               display="flex"
               justifyContent={'space-between'}
               flexDirection={'row'}
-              style={{ color: '#2B2C46', marginTop: 8 }}
+              style={{
+                color: '#2B2C46',
+                marginTop: !settings.CTAButtonText ? 8 : -6,
+              }}
               gridGap={8}
             >
               <Tooltip
@@ -361,6 +372,59 @@ function ItemResult(props: Props) {
           </Box>
         )}
         <div>
+          {settings.secondaryCTAButtonText && (
+            <Box
+              style={{
+                boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
+                // marginBottom: 22,
+                height: 40,
+                background: '#2B2C46',
+                borderRadius: 4,
+                padding: '0px 8px',
+                marginTop: '8px',
+              }}
+              display={'flex'}
+              justifyItems={'center'}
+              alignItems={'center'}
+              justifyContent={'space-between'}
+            >
+              <Box
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  width: '100%',
+                  padding: 0,
+                  cursor: secondaryCTALink ? 'pointer' : 'normal',
+                }}
+                onClick={() => {
+                  if (secondaryCTALink) {
+                    feedbackConversionEpic(state, indexItem, dataItem.sku);
+                    window.open(`${secondaryCTALink}`, '_blank');
+                  }
+                }}
+              >
+                <Typography
+                  className="text-white max-line-2"
+                  style={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    fontWeight: 500,
+                    fontSize: '12px',
+                    letterSpacing: '0.27px',
+                    wordBreak: 'break-all',
+                    maxWidth: !isMobile && secondaryCTALink ? '136px' : '164x',
+                    paddingRight: '8px',
+                  }}
+                  align="left"
+                >
+                  {settings.secondaryCTAButtonText}
+                </Typography>
+                {!isMobile && secondaryCTALink && (
+                  <IconSettings color="white" />
+                )}
+              </Box>
+            </Box>
+          )}
           {!settings.CTAButtonText ? (
             <Tooltip
               title={dataItem[settings.field.productName]}

package/src/page/result/index.tsx

@@ -300,10 +300,11 @@ function ResultComponent(props: Props) {
 
   const debouncedOnImageSelectionChange = useCallback(
     debounce((r: RectCoords) => {
+      setImageSelection(r);
       feedbackRegionEpic(stateGlobal, r);
       dispatch(selectionChanged(r));
       findItemsInSelection(r);
-    }, 500),
+    }, 50),
     [findItemsInSelection, stateGlobal.search],
   );
 
@@ -441,7 +442,6 @@ function ResultComponent(props: Props) {
                   <ImagePreviewMobile
                     requestImage={requestImage}
                     imageSelection={imageSelection}
-                    setImageSelection={setImageSelection}
                     debouncedOnImageSelectionChange={
                       debouncedOnImageSelectionChange
                     }

package/src/types.ts

@@ -34,6 +34,7 @@ export interface Cadenas {
 }
 export interface Field {
   ctaLinkField: string;
+  secondaryCTALinkField?: string;
   productName: string;
   productDetails: string;
   manufacturerNumber: string;
@@ -54,6 +55,7 @@ export interface AppSettings extends NyrisAPISettings {
   brandName?: string;
   cadenas?: Cadenas;
   CTAButtonText?: string;
+  secondaryCTAButtonText?: string;
   field: Field;
   headerText?: string;
   instantRedirectPatterns: string[];