@nyris/nyris-webapp 0.3.45 → 0.3.47

package/src/components/results/ItemResult.tsx

@@ -116,7 +116,7 @@ function ItemResult(props: Props) {
     dataItem,
     settings.field?.ctaLinkField ? settings.field?.ctaLinkField : 'links.main',
   );
-
+  const manufacturerNumber = get(dataItem, settings.field.manufacturerNumber);
   return (
     <Box className="wrap-main-item-result">
       <DefaultModal
@@ -174,7 +174,7 @@ function ItemResult(props: Props) {
             <IconSearchImage width={16} height={16} color={'#AAABB5'} />
           </Box>
         )}
-        {settings.cadenas3dWebView && (
+        {settings.cadenas?.cadenas3dWebView && (
           <Box
             className="box-icon-modal-3d"
             onClick={() => {
@@ -237,19 +237,17 @@ function ItemResult(props: Props) {
             style={{ color: '#2B2C46' }}
             gridGap={8}
           >
-            {
-              settings.CTAButtonText && (
-                <Typography
-                  className="text-f12 max-line-1 fw-700"
-                  style={{
-                    color: '#2B2C46',
-                    marginTop: 8
-                  }}
-                >
-                  {truncateString(dataItem[settings.field.productName], 45)}
-                </Typography>
-              )
-            }
+            {settings.CTAButtonText && (
+              <Typography
+                className="text-f12 max-line-1 fw-700"
+                style={{
+                  color: '#2B2C46',
+                  marginTop: 8,
+                }}
+              >
+                {truncateString(dataItem[settings.field.productName], 45)}
+              </Typography>
+            )}
             <Box
               display="flex"
               justifyContent={'space-between'}
@@ -312,10 +310,10 @@ function ItemResult(props: Props) {
                 />
               )}
 
-              {dataItem[settings.field.manufacturerNumber] && (
+              {manufacturerNumber && (
                 <ProductAttribute
                   title={t('Mfr. No.')}
-                  value={dataItem[settings.field.manufacturerNumber]}
+                  value={manufacturerNumber}
                   padding="4px 8px"
                   width={{ xs: '49%' }}
                 />
@@ -352,124 +350,121 @@ function ItemResult(props: Props) {
           </Box>
         )}
         <div>
-          {
-            !settings.CTAButtonText
-            ? (
-              <Tooltip
-                title={dataItem[settings.field.productName]}
-                placement="top"
-                arrow={true}
-                disableHoverListener={
-                  dataItem[settings.field.productName]?.length < 45
-                }
+          {!settings.CTAButtonText ? (
+            <Tooltip
+              title={dataItem[settings.field.productName]}
+              placement="top"
+              arrow={true}
+              disableHoverListener={
+                dataItem[settings.field.productName]?.length < 45
+              }
+            >
+              <Box
+                style={{
+                  boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
+                  // marginBottom: 22,
+                  height: 40,
+                  background: settings.theme?.primaryColor,
+                  borderRadius: 4,
+                  padding: '0px 8px',
+                  marginTop: '8px',
+                }}
+                display={'flex'}
+                justifyItems={'center'}
+                alignItems={'center'}
+                justifyContent={'space-between'}
               >
                 <Box
                   style={{
-                    boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
-                    // marginBottom: 22,
-                    height: 40,
-                    background: settings.theme?.primaryColor,
-                    borderRadius: 4,
-                    padding: '0px 8px',
-                    marginTop: '8px',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    width: '100%',
+                    padding: 0,
+                    cursor: ctaLink ? 'pointer' : 'normal',
+                  }}
+                  onClick={() => {
+                    if (ctaLink) {
+                      feedbackConversionEpic(state, indexItem, dataItem.sku);
+                      window.open(`${ctaLink}`, '_blank');
+                    }
                   }}
-                  display={'flex'}
-                  justifyItems={'center'}
-                  alignItems={'center'}
-                  justifyContent={'space-between'}
                 >
-                  <Box
+                  <Typography
+                    className="text-white max-line-2"
                     style={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      width: '100%',
-                      padding: 0,
-                      cursor: ctaLink ? 'pointer' : 'normal',
-                    }}
-                    onClick={() => {
-                      if (ctaLink) {
-                        feedbackConversionEpic(state, indexItem, dataItem.sku);
-                        window.open(`${ctaLink}`, '_blank');
-                      }
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      fontWeight: 500,
+                      fontSize: '12px',
+                      letterSpacing: '0.27px',
+                      wordBreak: 'break-all',
+                      maxWidth: !isMobile && ctaLink ? '136px' : '164x',
+                      paddingRight: '8px',
                     }}
+                    align="left"
                   >
-                    <Typography
-                      className="text-white max-line-2"
-                      style={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        fontWeight: 500,
-                        fontSize: '12px',
-                        letterSpacing: '0.27px',
-                        wordBreak: 'break-all',
-                        maxWidth: !isMobile && ctaLink ? '136px' : '164x',
-                        paddingRight: '8px',
-                      }}
-                      align="left"
-                    >
-                      {truncateString(dataItem[settings.field.productName], 45)}
-                    </Typography>
-                    {!isMobile && ctaLink && (
-                      <img src={IconOpenLink} alt="more-info" width={16} />
-                    )}
-                  </Box>
+                    {truncateString(dataItem[settings.field.productName], 45)}
+                  </Typography>
+                  {!isMobile && ctaLink && (
+                    <img src={IconOpenLink} alt="more-info" width={16} />
+                  )}
                 </Box>
-              </Tooltip>
-              ) : (
-                <Box
+              </Box>
+            </Tooltip>
+          ) : (
+            <Box
+              style={{
+                boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
+                // marginBottom: 22,
+                height: 40,
+                background: settings.theme?.primaryColor,
+                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: ctaLink ? 'pointer' : 'normal',
+                }}
+                onClick={() => {
+                  if (ctaLink) {
+                    feedbackConversionEpic(state, indexItem, dataItem.sku);
+                    window.open(`${ctaLink}`, '_blank');
+                  }
+                }}
+              >
+                <Typography
+                  className="text-white max-line-2"
                   style={{
-                    boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
-                    // marginBottom: 22,
-                    height: 40,
-                    background: settings.theme?.primaryColor,
-                    borderRadius: 4,
-                    padding: '0px 8px',
-                    marginTop: '8px',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    fontWeight: 500,
+                    fontSize: '12px',
+                    letterSpacing: '0.27px',
+                    wordBreak: 'break-all',
+                    maxWidth: !isMobile && ctaLink ? '136px' : '164x',
+                    paddingRight: '8px',
                   }}
-                  display={'flex'}
-                  justifyItems={'center'}
-                  alignItems={'center'}
-                  justifyContent={'space-between'}
+                  align="left"
                 >
-                  <Box
-                    style={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      width: '100%',
-                      padding: 0,
-                      cursor: ctaLink ? 'pointer' : 'normal',
-                    }}
-                    onClick={() => {
-                      if (ctaLink) {
-                        feedbackConversionEpic(state, indexItem, dataItem.sku);
-                        window.open(`${ctaLink}`, '_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 && ctaLink ? '136px' : '164x',
-                        paddingRight: '8px',
-                      }}
-                      align="left"
-                    >
-                      {settings.CTAButtonText}
-                    </Typography>
-                    {!isMobile && ctaLink && (
-                      <img src={IconOpenLink} alt="more-info" width={16} />
-                    )}
-                  </Box>
-                </Box>
-              )
-          }
-          
+                  {settings.CTAButtonText}
+                </Typography>
+                {!isMobile && ctaLink && (
+                  <img src={IconOpenLink} alt="more-info" width={16} />
+                )}
+              </Box>
+            </Box>
+          )}
+
           {settings.showFeedbackAndShare && (
             <Box
               className="box-bottom"

package/src/components/rfq/RfqModal.tsx

@@ -65,10 +65,12 @@ export default function RfqModal({
     const croppedImage = getCroppedCanvas(canvas, selectedRegion);
     const serviceId = 'service_zfsxshi';
     setIsRfqModalOpen(false);
-    if (settings.templateId) {
+    const templateId = settings.rfq?.emailTemplateId;
+
+    if (templateId) {
       try {
         setRfqStatus('loading');
-        await emailjs.send(serviceId, settings.templateId, {
+        await emailjs.send(serviceId, templateId, {
           email_id: email.trim(),
           information_text: information,
           request_image: croppedImage?.toDataURL(),
@@ -89,7 +91,7 @@ export default function RfqModal({
                   width: '294px',
                 }}
               >
-                <span style={{fontWeight: 'bold'}}>Email not sent</span>
+                <span style={{ fontWeight: 'bold' }}>Email not sent</span>
                 <span>{getErrorMessage(error)}</span>
                 <a
                   href={`mailto:support@nyris.io?subject=Request for quotation&body=${information}`}
@@ -116,8 +118,8 @@ export default function RfqModal({
               maxWidth: '400px',
             },
             icon: (
-              <div style={{minWidth: '20px', minHeight: '20px'}}>
-                <ErrorIcon/>
+              <div style={{ minWidth: '20px', minHeight: '20px' }}>
+                <ErrorIcon />
               </div>
             ),
           },

package/src/index.css

@@ -427,7 +427,7 @@ strong {
 }
 
 body {
-  background: #e7eaee;
+  background: #fafafa;
 }
 
 h1,

package/src/page/landingPage/common.scss

@@ -21,9 +21,7 @@
 }
 a {
   text-decoration: none !important;
-  &:hover {
-    color: #3e36dc !important;
-  }
+  
 }
 .text-gray2 {
   color: #55566b !important;
@@ -599,7 +597,7 @@ button {
     background-color: #e9e9ec;
     padding-left: 8px;
     padding-right: 8px;
-    padding-bottom: 8px;
+    padding-bottom: 12px;
     min-height: 82px;
     justify-content: space-between;
     .box-top {
@@ -1082,6 +1080,7 @@ button {
       border-left: 1px solid #e9e9ec;
     }
     .box-change-hit-items {
+      z-index: 500;
       font-family: 'Source Sans 3';
       font-style: normal;
       font-weight: 500;

package/src/page/result/index.tsx

@@ -49,6 +49,7 @@ import RfqBanner from 'components/rfq/RfqBanner';
 import InquiryBanner from 'components/Inquiry/InquiryBanner';
 import { useQuery } from 'hooks/useQuery';
 import { ReactComponent as PoweredByNyrisImage } from 'common/assets/images/powered_by_nyris.svg';
+import Feedback from 'components/Feedback';
 
 interface Props {
   allSearchResults: any;
@@ -89,6 +90,11 @@ function ResultComponent(props: Props) {
     'not-scrolled' | 'scrolled' | 'user-scrolled'
   >('not-scrolled');
 
+  const [showFeedback, setShowFeedback] = useState<
+    'not-scrolled' | 'scrolled' | 'user-scrolled'
+  >('not-scrolled');
+
+  const [showFeedbackSuccess, setShowFeedbackSuccess] = useState(false);
   const query = useQuery();
   const searchQuery = query.get('query') || search.valueTextSearch.query;
   const isAlgoliaEnabled = settings.algolia?.enabled;
@@ -118,12 +124,14 @@ function ResultComponent(props: Props) {
       setImageSelection(selectedRegion);
       setRfqStatus('inactive');
       setIsScrolled('not-scrolled');
+      setShowFeedback('not-scrolled');
     }
   }, [selectedRegion]);
 
   useEffect(() => {
     if (requestImage) {
       setIsScrolled('not-scrolled');
+      setShowFeedback('not-scrolled');
       executeScroll();
       setImageSelection(DEFAULT_REGION);
     }
@@ -330,6 +338,35 @@ function ResultComponent(props: Props) {
     };
   }, [requestImage]);
 
+  useEffect(() => {
+    if (!requestImage || !settings.showFeedback) return;
+
+    setTimeout(() => {
+      setShowFeedback(s => (s === 'not-scrolled' ? 'scrolled' : s));
+    }, 5000);
+
+    const handleScroll = () => {
+      setTimeout(() => {
+        setShowFeedback(s => (s === 'not-scrolled' ? 'scrolled' : s));
+      }, 100);
+    };
+
+    window.addEventListener('scroll', handleScroll, { capture: true });
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [requestImage, selectedRegion, settings.showFeedback]);
+
+  const submitFeedback = async (data: boolean) => {
+    setShowFeedbackSuccess(true);
+    setTimeout(() => {
+      setShowFeedbackSuccess(false);
+    }, 3000);
+    setShowFeedback('user-scrolled');
+    feedbackSuccessEpic(stateGlobal, data);
+  };
+
   return (
     <>
       <div
@@ -428,6 +465,23 @@ function ResultComponent(props: Props) {
                     className={'box-item-result ml-auto mr-auto'}
                     style={{ height: '100%', paddingLeft: isMobile ? 0 : 16 }}
                   >
+                    {showFeedbackSuccess && (
+                      <div className={'box-item-result feedback-floating'}>
+                        <div className="feedback-success">
+                          Thanks for your feedback!
+                        </div>
+                      </div>
+                    )}
+                    {showFeedback === 'scrolled' && !showFeedbackSuccess && (
+                      <div className={'box-item-result feedback-floating'}>
+                        <Feedback
+                          submitFeedback={submitFeedback}
+                          onFeedbackClose={() => {
+                            setShowFeedback('user-scrolled');
+                          }}
+                        />
+                      </div>
+                    )}
                     <ProductList
                       getUrlToCanvasFile={getUrlToCanvasFile}
                       setLoading={false}
@@ -466,7 +520,8 @@ function ResultComponent(props: Props) {
                     {requestImage &&
                       !loadingSearchAlgolia &&
                       !props.isSearchStalled &&
-                      settings.rfq && (
+                      settings.rfq &&
+                      settings.rfq.enabled && (
                         <RfqBanner
                           rfqRef={rfqRef}
                           rfqStatus={rfqStatus}
@@ -477,7 +532,8 @@ function ResultComponent(props: Props) {
                       )}
                     {!loadingSearchAlgolia &&
                       !props.isSearchStalled &&
-                      settings.inquiry &&
+                      settings.support &&
+                      settings.support.enabled &&
                       (searchQuery || requestImage) && (
                         <InquiryBanner
                           requestImage={requestImage}
@@ -537,7 +593,8 @@ function ResultComponent(props: Props) {
         requestImage &&
         isMobile &&
         props.allSearchResults.hits.length > 0 &&
-        settings.rfq && (
+        settings.rfq &&
+        settings.rfq.enabled && (
           <div
             style={{
               fontSize: '14px',

package/src/services/Feedback.ts

@@ -4,8 +4,6 @@ import NyrisAPI, {
   RectCoords,
 } from '@nyris/nyris-api';
 import { RootState } from '../Store/Store';
-import { ToastHelper } from '../helpers/ToastHelper';
-import { toast } from 'react-hot-toast';
 
 export const feedbackSuccessEpic = async (
   state: RootState,
@@ -15,17 +13,10 @@ export const feedbackSuccessEpic = async (
   const sessionId = search.sessionId;
   const requestId = search.requestId || search.sessionId;
 
-  try {
-    const res = await sendFeedbackByApi(settings, sessionId, requestId, {
-      event: 'feedback',
-      data: { success },
-    });
-    toast.dismiss();
-    ToastHelper.success('Thank you for your feedback.');
-    return res;
-  } catch (err: any) {
-    console.log(err);
-  }
+  return await sendFeedbackByApi(settings, sessionId, requestId, {
+    event: 'feedback',
+    data: { success },
+  });
 };
 
 export const feedbackClickEpic = async (

package/src/translations.ts

@@ -25,6 +25,8 @@ export const translations = {
         'No products were found matching your search criteria.',
       'Please upload an image or enter a keyword to search.':
         'Please upload an image or enter a keyword to search.',
+      'No matches found': 'No matches found',
+      'No matches found for your request': 'No matches found for your request',
     },
   },
   de: {
@@ -53,6 +55,9 @@ export const translations = {
         'Keine Produkte entsprechen Ihren Suchkriterien.',
       'Please upload an image or enter a keyword to search.':
         'Für die Suche bitte Bild hochladen oder Stichwort eingeben.',
+      'No matches found': 'Keine Treffer für Ihre Anfrage gefunden',
+      'No matches found for your request':
+        'Keine Treffer für Ihre Anfrage gefunden',
     },
   },
   pt: {
@@ -82,6 +87,8 @@ export const translations = {
         'Nenhum produto foi encontrado com estes critérios ',
       'Please upload an image or enter a keyword to search.':
         'Faça o upload de uma imagem ou busque via texto',
+      'No matches found': 'No matches found',
+      'No matches found for your request': 'No matches found for your request',
     },
   },
 };

package/src/types.ts

@@ -15,6 +15,23 @@ export interface Auth0Settings {
   supportEmail?: string;
 }
 
+export interface Support {
+  enabled?: boolean;
+  description?: string;
+  emailInquiry?: boolean;
+  supportNumber?: string;
+  emailTemplateId?: string;
+}
+
+export interface Rfq {
+  enabled?: boolean;
+  emailTemplateId?: string;
+}
+export interface Cadenas {
+  cadenas3dWebView?: boolean;
+  cadenasAPIKey?: string;
+  catalog?: string;
+}
 export interface Field {
   ctaLinkField: string;
   productName: string;
@@ -35,14 +52,11 @@ export interface AppSettings extends NyrisAPISettings {
   appTitle?: string;
   auth0: Auth0Settings;
   brandName?: string;
-  cadenas3dWebView?: boolean;
-  cadenasAPIKey?: string;
+  cadenas?: Cadenas;
   cadSearch?: boolean;
-  catalog?: string;
   exampleImages?: string[]; // deprecated
   field: Field;
   headerText?: string;
-  inquiry?: boolean;
   instantRedirectPatterns: string[];
   itemIdLabel?: string;
   language?: string;
@@ -54,13 +68,14 @@ export interface AppSettings extends NyrisAPISettings {
   productCtaText?: string;
   refinements?: any;
   regions: boolean;
-  rfq?: boolean;
+  rfq?: Rfq;
   shareOption?: boolean;
+  showFeedback?: boolean;
   showFeedbackAndShare?: boolean;
   showGroup?: boolean;
   showMoreInfo?: boolean; // deprecated
   showPoweredByNyris?: boolean;
-  templateId?: string;
+  support?: Support;
   theme: SearchSuiteSettings;
   visualSearchFilterKey?: string;
   warehouseVariant?: boolean;