@nyris/nyris-webapp 0.3.45 → 0.3.47

package/build/static/media/call.c3c23966.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.3849 14H12.2933C1.71255 13.3915 0.210246 4.46385 0.000245939 1.73923C-0.0166751 1.52739 0.00837059 1.31429 0.0739478 1.11214C0.139525 0.909999 0.244345 0.722779 0.382401 0.561213C0.520458 0.399646 0.689038 0.266909 0.878482 0.170606C1.06793 0.0743029 1.27451 0.0163271 1.4864 5.04857e-07H4.45332C4.66901 -0.000208291 4.87979 0.0643519 5.05836 0.185318C5.23693 0.306285 5.37506 0.478084 5.45486 0.678462L6.27332 2.69231C6.35213 2.88806 6.37168 3.10266 6.32956 3.30943C6.28744 3.51621 6.1855 3.70605 6.0364 3.85539L4.88948 5.01308C5.06863 6.03117 5.55619 6.96967 6.28619 7.70159C7.01619 8.43352 7.9534 8.92355 8.97101 9.10538L10.1395 7.94769C10.2911 7.80024 10.4827 7.70067 10.6905 7.66141C10.8983 7.62215 11.113 7.64494 11.3079 7.72692L13.3379 8.54C13.5353 8.62232 13.7037 8.76153 13.8216 8.9399C13.9396 9.11827 14.0018 9.32771 14.0002 9.54154V12.3846C14.0002 12.813 13.8301 13.2239 13.5271 13.5269C13.2242 13.8298 12.8133 14 12.3849 14ZM1.61563 1.07692C1.47282 1.07692 1.33586 1.13365 1.23488 1.23464C1.1339 1.33562 1.07717 1.47258 1.07717 1.61539V1.65846C1.32486 4.84615 2.91332 12.3846 12.3526 12.9231C12.4233 12.9275 12.4942 12.9178 12.5612 12.8947C12.6282 12.8716 12.69 12.8355 12.743 12.7885C12.7961 12.7415 12.8393 12.6845 12.8702 12.6207C12.9012 12.5569 12.9192 12.4877 12.9233 12.4169V9.54154L10.8933 8.72846L9.34794 10.2631L9.08948 10.2308C4.40486 9.64385 3.76948 4.95923 3.76948 4.91077L3.73717 4.65231L5.2664 3.10692L4.45871 1.07692H1.61563Z" fill="currentColor"/>
+</svg>

package/build/static/media/icon_email.71b21005.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6888 0C16.0047 0 16.2931 0.192151 16.4241 0.489651C16.4738 0.593965 16.5 0.711618 16.5 0.830018V11.1561C16.5 11.2133 16.494 11.2703 16.4821 11.3256C16.4737 11.3686 16.462 11.4111 16.4474 11.4521C16.3285 11.7849 16.0308 12 15.6888 12H1.30961C0.967644 12 0.669889 11.7849 0.551024 11.4521C0.511476 11.3414 0.494785 11.2261 0.501415 11.1094V0.890625C0.494785 0.773926 0.511476 0.658628 0.551024 0.547891C0.669878 0.215062 0.967644 0 1.30961 0H15.6888ZM8.49921 6.90797L15.0048 1.10306H1.99367L8.49921 6.90797ZM5.8515 6L1.56406 9.8257V2.1743L5.8515 6ZM6.66657 6.72729L7.97182 7.89199C8.11913 8.02342 8.30643 8.0958 8.49921 8.0958C8.692 8.0958 8.87929 8.02342 9.02659 7.89199L10.3319 6.7273L15.0048 10.8969H1.99367L6.66657 6.72729ZM15.4374 9.82838L11.1469 6L15.4374 2.17162V9.82838Z" fill="currentColor"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.45",
+  "version": "0.3.47",
   "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.45",
-    "@nyris/nyris-react-components": "^0.3.45",
+    "@nyris/nyris-api": "^0.3.47",
+    "@nyris/nyris-react-components": "^0.3.47",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",
@@ -57,7 +57,7 @@
     "react-scripts": "^3.4.1",
     "react-select": "^5.2.2",
     "react-table": "^7.7.0",
-    "react-webcam": "^7.0.1",
+    "react-webcam": "^7.2.0",
     "redux": "^4.0.4",
     "redux-observable": "^1.1.0",
     "redux-thunk": "^2.4.1",

package/src/Store/constants.ts

@@ -24,7 +24,6 @@ export const defaultSettings: AppSettings = {
     '^https?://(www.)?dai.ly/',
   ],
   theme: {},
-  templateId: '',
   field: {
     ctaLinkField: '',
     productName: '',

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

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.3849 14H12.2933C1.71255 13.3915 0.210246 4.46385 0.000245939 1.73923C-0.0166751 1.52739 0.00837059 1.31429 0.0739478 1.11214C0.139525 0.909999 0.244345 0.722779 0.382401 0.561213C0.520458 0.399646 0.689038 0.266909 0.878482 0.170606C1.06793 0.0743029 1.27451 0.0163271 1.4864 5.04857e-07H4.45332C4.66901 -0.000208291 4.87979 0.0643519 5.05836 0.185318C5.23693 0.306285 5.37506 0.478084 5.45486 0.678462L6.27332 2.69231C6.35213 2.88806 6.37168 3.10266 6.32956 3.30943C6.28744 3.51621 6.1855 3.70605 6.0364 3.85539L4.88948 5.01308C5.06863 6.03117 5.55619 6.96967 6.28619 7.70159C7.01619 8.43352 7.9534 8.92355 8.97101 9.10538L10.1395 7.94769C10.2911 7.80024 10.4827 7.70067 10.6905 7.66141C10.8983 7.62215 11.113 7.64494 11.3079 7.72692L13.3379 8.54C13.5353 8.62232 13.7037 8.76153 13.8216 8.9399C13.9396 9.11827 14.0018 9.32771 14.0002 9.54154V12.3846C14.0002 12.813 13.8301 13.2239 13.5271 13.5269C13.2242 13.8298 12.8133 14 12.3849 14ZM1.61563 1.07692C1.47282 1.07692 1.33586 1.13365 1.23488 1.23464C1.1339 1.33562 1.07717 1.47258 1.07717 1.61539V1.65846C1.32486 4.84615 2.91332 12.3846 12.3526 12.9231C12.4233 12.9275 12.4942 12.9178 12.5612 12.8947C12.6282 12.8716 12.69 12.8355 12.743 12.7885C12.7961 12.7415 12.8393 12.6845 12.8702 12.6207C12.9012 12.5569 12.9192 12.4877 12.9233 12.4169V9.54154L10.8933 8.72846L9.34794 10.2631L9.08948 10.2308C4.40486 9.64385 3.76948 4.95923 3.76948 4.91077L3.73717 4.65231L5.2664 3.10692L4.45871 1.07692H1.61563Z" fill="currentColor"/>
+</svg>

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

@@ -1,3 +1,3 @@
-<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.1429 0H0.857143C0.629814 0 0.411797 0.0903058 0.251051 0.251051C0.0903058 0.411797 0 0.629814 0 0.857143V7.71429C0 7.94161 0.0903058 8.15963 0.251051 8.32038C0.411797 8.48112 0.629814 8.57143 0.857143 8.57143H11.1429C11.3702 8.57143 11.5882 8.48112 11.7489 8.32038C11.9097 8.15963 12 7.94161 12 7.71429V0.857143C12 0.629814 11.9097 0.411797 11.7489 0.251051C11.5882 0.0903058 11.3702 0 11.1429 0ZM10.2 0.857143L6 3.76286L1.8 0.857143H10.2ZM0.857143 7.71429V1.24714L5.75571 4.63714C5.82746 4.68691 5.91269 4.71358 6 4.71358C6.08731 4.71358 6.17254 4.68691 6.24429 4.63714L11.1429 1.24714V7.71429H0.857143Z" fill="#55566B"/>
+<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6888 0C16.0047 0 16.2931 0.192151 16.4241 0.489651C16.4738 0.593965 16.5 0.711618 16.5 0.830018V11.1561C16.5 11.2133 16.494 11.2703 16.4821 11.3256C16.4737 11.3686 16.462 11.4111 16.4474 11.4521C16.3285 11.7849 16.0308 12 15.6888 12H1.30961C0.967644 12 0.669889 11.7849 0.551024 11.4521C0.511476 11.3414 0.494785 11.2261 0.501415 11.1094V0.890625C0.494785 0.773926 0.511476 0.658628 0.551024 0.547891C0.669878 0.215062 0.967644 0 1.30961 0H15.6888ZM8.49921 6.90797L15.0048 1.10306H1.99367L8.49921 6.90797ZM5.8515 6L1.56406 9.8257V2.1743L5.8515 6ZM6.66657 6.72729L7.97182 7.89199C8.11913 8.02342 8.30643 8.0958 8.49921 8.0958C8.692 8.0958 8.87929 8.02342 9.02659 7.89199L10.3319 6.7273L15.0048 10.8969H1.99367L6.66657 6.72729ZM15.4374 9.82838L11.1469 6L15.4374 2.17162V9.82838Z" fill="currentColor"/>
 </svg>

package/src/components/CadenasWebViewer.tsx

@@ -74,14 +74,14 @@ function CadenasWebViewer({
 
     // initialize 3d viewer
     let webviewer3d = new psol.components.WebViewer3D(webViewer3DSettings);
-    psol.core.setApiKey(settings.cadenasAPIKey);
+    psol.core.setApiKey(settings.cadenas?.cadenasAPIKey);
     setStatus3dView('loading');
     // run search and display result in 3D viewer.
     psol.core
       .ajaxGetOrPost({
         url: psol.core.getServiceBaseUrl() + '/service/reversemap',
         data: {
-          catalog: settings.catalog,
+          catalog: settings.cadenas?.catalog,
           part: sku,
           exact: '0',
         },

package/src/components/Feedback.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ReactComponent as IconLike } from 'common/assets/icons/icon_like.svg';
+import { ReactComponent as IconDislike } from 'common/assets/icons/icon_dislike.svg';
+import { ReactComponent as IconClose } from 'common/assets/icons/close.svg';
+
+function Feedback({
+  submitFeedback,
+  onFeedbackClose,
+}: {
+  submitFeedback: any;
+  onFeedbackClose: any;
+}) {
+  return (
+    <div className="feedback-wrapper">
+      <p>Are these results useful?</p>
+      <div
+        className="feedback-icon-wrapper"
+        onClick={() => submitFeedback(false)}
+      >
+        <IconDislike />
+      </div>
+      <div
+        className="feedback-icon-wrapper"
+        onClick={() => submitFeedback(true)}
+      >
+        <IconLike />
+      </div>
+
+      <div className="feedback-icon-wrapper" onClick={() => onFeedbackClose()}>
+        <IconClose />
+      </div>
+    </div>
+  );
+}
+
+export default Feedback;

package/src/components/Header.tsx

@@ -1,6 +1,5 @@
 import { Box, Menu, MenuProps, withStyles } from '@material-ui/core';
 import React from 'react';
-import { NavLink } from 'react-router-dom';
 import './common.scss';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { reset, setPreFilter } from 'Store/search/Search';
@@ -62,8 +61,8 @@ function Header(): JSX.Element {
 
   return (
     <Box className="box-content" display={'flex'}>
-      <NavLink
-        to="/"
+      <a
+        href={window.location.origin}
         style={{ lineHeight: 0, paddingLeft: '10px' }}
         onClick={() => {
           dispatch(reset(''));
@@ -79,7 +78,7 @@ function Header(): JSX.Element {
             height: settings.theme?.logoHeight,
           }}
         />
-      </NavLink>
+      </a>
 
       {auth0.enabled && isAuthenticated && (
         <div style={{ position: 'relative' }}>

package/src/components/ImagePreviewMobile.tsx

@@ -41,7 +41,6 @@ function ImagePreviewMobileComponent({
   const { t } = useTranslation();
   const { refine }: any = rest;
   const [editActive, setEditActive] = useState(false);
-  const [showShrinkAnimation, setShrinkAnimation] = useState(false);
   const settings = useAppSelector(state => state.settings);
   const { preFilter } = useAppSelector(state => state.search);
   const isAlgoliaEnabled = settings.algolia?.enabled;
@@ -51,7 +50,6 @@ function ImagePreviewMobileComponent({
 
   const handleArrowClick = () => {
     setEditActive(s => !s);
-    setShrinkAnimation(true);
   };
 
   const searchQuery = query.get('query') || '';
@@ -117,12 +115,14 @@ function ImagePreviewMobileComponent({
         marginBottom: '15px',
       }}
     >
-      {editActive && (
-        <div>
-          <Box className="box-preview">
-            <Box
-              className="preview-item expand-animation"
-              style={{ backgroundColor: 'transparent' }}
+      <div>
+        <Box className="box-preview">
+          <Box>
+            <div
+              className="preview-item"
+              style={{
+                backgroundColor: 'transparent',
+              }}
             >
               <Preview
                 key={requestImage?.id}
@@ -133,104 +133,51 @@ function ImagePreviewMobileComponent({
                 image={requestImage?.canvas}
                 selection={imageSelection || DEFAULT_REGION}
                 regions={filteredRegions}
-                maxWidth={240}
-                maxHeight={240}
-                dotColor={'#FBD914'}
-                minCropWidth={60}
-                minCropHeight={60}
+                minWidth={80}
+                minHeight={80}
+                maxWidth={255}
+                maxHeight={255}
+                dotColor={editActive ? '#FBD914' : ''}
+                minCropWidth={editActive ? 60 : 5}
+                minCropHeight={editActive ? 60 : 5}
                 rounded={false}
-                expandAnimation={true}
-              />
-            </Box>
-            {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
-              <Box
-                className="box-title_col-left"
-                alignItems="center"
-                style={{
-                  backgroundColor: '#3E36DC',
-                  display: 'flex',
-                  columnGap: '6px',
-                  padding: '5px',
-                  width: 'fit-content',
+                expandAnimation={editActive}
+                shrinkAnimation={!editActive}
+                onExpand={() => {
+                  setEditActive(true);
                 }}
-              >
-                <IconInfo color="white" />
-                <Typography
-                  style={{
-                    fontSize: 10,
-                    color: '#fff',
-                  }}
-                >
-                  {showAdjustInfo
-                    ? t('Crop the image for better results')
-                    : 'Crop the image for better results'}
-                </Typography>
-              </Box>
-            )}
+                showGrip={editActive}
+              />
+            </div>
           </Box>
-          <Hidden>
-            <Box
-              sx={{
-                position: 'absolute',
-                left: '15px',
-                top: '25px',
-                padding: '4px',
-              }}
-              onClick={onImageRemove}
-            >
-              <Box
-                sx={{
-                  width: '24px',
-                  height: '24px',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  display: 'flex',
-                  borderRadius: '100%',
-                }}
-              >
-                <Trash color="white" fill="white" />
-              </Box>
-            </Box>
-          </Hidden>
-
-          <Hidden mdUp>
+          {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
             <Box
-              className="slideDown"
-              sx={{
-                position: 'absolute',
-                bottom: '25px',
-                right: '20px',
+              className="box-title_col-left"
+              alignItems="center"
+              style={{
+                backgroundColor: '#3E36DC',
+                display: 'flex',
+                columnGap: '6px',
+                padding: '5px',
+                width: 'fit-content',
+                minWidth: '180px',
               }}
-              onClick={handleArrowClick}
             >
-              <Box
-                bgcolor={'white'}
-                sx={{
-                  width: '24px',
-                  height: '24px',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  display: 'flex',
-                  borderRadius: '100%',
+              <IconInfo color="white" />
+              <Typography
+                style={{
+                  fontSize: 10,
+                  color: '#fff',
                 }}
               >
-                <ArrowUp color="black" />
-              </Box>
+                {showAdjustInfo
+                  ? t('Crop the image for better results')
+                  : 'Crop the image for better results'}
+              </Typography>
             </Box>
-          </Hidden>
-        </div>
-      )}
-      {!editActive && (
-        <Box
-          className={showShrinkAnimation ? 'shrink-animation' : ''}
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: 80,
-            width: '100%',
-          }}
-        >
+          )}
+        </Box>
+        <>
           <Hidden>
             <Box
               sx={{
@@ -242,7 +189,6 @@ function ImagePreviewMobileComponent({
               onClick={onImageRemove}
             >
               <Box
-                // className={showShrinkAnimation ? 'slideUp' : ''}
                 sx={{
                   width: '24px',
                   height: '24px',
@@ -256,49 +202,19 @@ function ImagePreviewMobileComponent({
               </Box>
             </Box>
           </Hidden>
-          <Box
-            sx={{
-              display: 'flex',
-              height: '100%',
-              width: '100%',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-            onClick={handleArrowClick}
-          >
-            {requestImage && requestImage?.canvas?.toDataURL && (
-              <img
-                src={requestImage?.canvas?.toDataURL()}
-                style={{
-                  width: '80px',
-                  height: '80px',
-                  objectFit: 'contain',
-                  background: 'white',
-                }}
-                alt="preview"
-              />
-            )}
 
-            <div
-              className={
-                showShrinkAnimation
-                  ? 'shrink-animation circle-layer'
-                  : 'circle-layer'
-              }
-            ></div>
-          </Box>
           <Hidden mdUp>
             <Box
+              className="slideDown"
               sx={{
                 position: 'absolute',
-                right: '25px',
-                padding: '4px',
+                bottom: '25px',
+                right: '20px',
               }}
               onClick={handleArrowClick}
             >
               <Box
                 bgcolor={'white'}
-                className={showShrinkAnimation ? 'slideUp' : ''}
                 sx={{
                   width: '24px',
                   height: '24px',
@@ -308,12 +224,13 @@ function ImagePreviewMobileComponent({
                   borderRadius: '100%',
                 }}
               >
-                <ArrowDown color="black" fill="black" />
+                {editActive && <ArrowUp color="black" />}
+                {!editActive && <ArrowDown color="black" fill="black" />}
               </Box>
             </Box>
           </Hidden>
-        </Box>
-      )}
+        </>
+      </div>
     </Box>
   );
 }

package/src/components/Inquiry/InquiryBanner.tsx

@@ -3,6 +3,10 @@ import { getCroppedCanvas } from 'helpers/getCroppedCanvas';
 import React, { useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import InquiryModal from './InquiryModal';
+import { useAppSelector } from 'Store/Store';
+import { ReactComponent as EmailIcon } from 'common/assets/icons/icon_email.svg';
+import { ReactComponent as CallIcon } from 'common/assets/icons/call.svg';
+import { useTranslation } from 'react-i18next';
 
 function InquiryBanner({
   requestImage,
@@ -23,6 +27,13 @@ function InquiryBanner({
     setInquiryStatus('inactive');
   }, [selectedRegion, query]);
 
+  const { description, emailInquiry, supportNumber } =
+    useAppSelector(state => state.settings.support) || {};
+  const { secondaryColor } =
+    useAppSelector(state => state.settings.theme) || {};
+
+  const { t } = useTranslation();
+
   return (
     <>
       {isInquiryModalOpen && (
@@ -31,18 +42,17 @@ function InquiryBanner({
           selectedRegion={selectedRegion}
           setIsInquiryModalOpen={setIsInquiryModalOpen}
           isInquiryModalOpen={isInquiryModalOpen}
-          setInquiryStatus={setInquiryStatus}
         />
       )}
       <Box
         style={{
-          padding: !isMobile ? '24px 40px 24px 40px' : '16px 16px 16px 16px',
           backgroundColor: '#F3F3F5',
           width: '100%',
           marginBottom: '32px',
           alignSelf: 'end',
           display: 'flex',
           alignItems: 'center',
+          marginRight: '12px',
         }}
         className="rfq-box"
       >
@@ -50,9 +60,8 @@ function InquiryBanner({
           style={{
             width: '100%',
             display: 'flex',
-            columnGap: !isMobile ? '26px' : '8px',
+            columnGap: !isMobile ? '26px' : '16px',
             alignItems: 'center',
-            justifyContent: 'space-between',
           }}
         >
           {requestImage && (
@@ -64,8 +73,7 @@ function InquiryBanner({
                 )?.toDataURL()}
                 alt="request_image"
                 style={{
-                  mixBlendMode:
-                    inquiryStatus !== 'inactive' ? 'overlay' : 'unset',
+                  mixBlendMode: 'unset',
                   maxHeight: !isMobile ? '181px' : '120px',
                   maxWidth: !isMobile ? '181px' : '120px',
                   borderRadius: '2px',
@@ -74,10 +82,10 @@ function InquiryBanner({
             </div>
           )}
 
-          <Box>
+          <Box style={{ width: '100%' }}>
             <Box
               style={{
-                paddingBottom: '12px',
+                paddingBottom: '8px',
                 paddingLeft: '16px',
               }}
             >
@@ -89,47 +97,107 @@ function InquiryBanner({
                 }}
               >
                 {isMobile
-                  ? 'No matches found?'
-                  : 'No matches found for your request?'}
+                  ? `${t('No matches found')}?`
+                  : `${t('No matches found for your request')}?`}
               </Box>
               <Box
                 style={{
-                  fontSize: '12px',
+                  fontSize: '14px',
                   maxWidth: '320x',
-                  lineHeight: '14.1px',
+                  lineHeight: '16px',
                   color: inquiryStatus === 'inactive' ? '#4B4B4A' : '#2B2C46',
                   fontWeight: 'normal',
                 }}
               >
-                Get personalised help from our team of product experts.
+                {description}
               </Box>
             </Box>
-            <button
+            <div
               style={{
-                width: '200px',
-                background:
-                  inquiryStatus === 'inactive' ? '#2B2C46' : '#E9E9EC',
-                boxShadow:
-                  inquiryStatus === 'inactive'
-                    ? '0px 0px 4px 0px rgba(0, 0, 0, 0.25)'
-                    : '',
-                borderRadius: '2px',
-                padding: '16px 16px 16px 16px',
                 display: 'flex',
-                alignItems: 'center',
-                color: inquiryStatus === 'inactive' ? '#fff' : '#CACAD1',
-                fontSize: '14px',
-                height: '48px',
-                cursor: inquiryStatus === 'inactive' ? 'pointer' : 'default',
-                border: 'none',
-              }}
-              disabled={inquiryStatus !== 'inactive'}
-              onClick={() => {
-                setIsInquiryModalOpen(true);
+                gap: isMobile ? '8px' : '16px',
+                width: isMobile ? '100%' : '100%',
+                maxWidth: '400px',
               }}
+              className="support-button-wrapper"
             >
-              Submit an Inquiry
-            </button>
+              {emailInquiry && (
+                <div
+                  style={{
+                    width: emailInquiry && supportNumber ? '50%' : '100%',
+                    maxWidth: '170px',
+                    minWidth: '86px',
+                    background:
+                      inquiryStatus === 'inactive' ? secondaryColor : '#E9E9EC',
+                    boxShadow:
+                      inquiryStatus === 'inactive'
+                        ? '0px 0px 4px 0px rgba(0, 0, 0, 0.25)'
+                        : '',
+                    borderRadius: '2px',
+                    padding: !isMobile
+                      ? '8px 16px 8px 16px'
+                      : '8px 8px 8px 8px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    color: inquiryStatus === 'inactive' ? '#fff' : '#CACAD1',
+                    fontSize: '13px',
+                    cursor:
+                      inquiryStatus === 'inactive' ? 'pointer' : 'default',
+                    border: 'none',
+                  }}
+                  onClick={() => {
+                    setIsInquiryModalOpen(true);
+                  }}
+                >
+                  <div
+                    style={{
+                      width: '100%',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                    }}
+                  >
+                    <p>Inquiry</p>
+                    <EmailIcon color="#fff" width={16} height={16} />
+                  </div>
+                </div>
+              )}
+              {supportNumber && (
+                <a
+                  style={{
+                    width: emailInquiry && supportNumber ? '50%' : '100%',
+                    maxWidth: '170px',
+                    minWidth: '86px',
+                    background: secondaryColor,
+                    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.25)',
+                    borderRadius: '2px',
+                    padding: !isMobile
+                      ? '8px 16px 8px 16px'
+                      : '8px 8px 8px 8px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    color: '#fff',
+                    fontSize: '13px',
+                    cursor: 'pointer',
+                    border: 'none',
+                    fontWeight: 500,
+                  }}
+                  href={`tel:${supportNumber}`}
+                >
+                  <div
+                    style={{
+                      width: '100%',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                    }}
+                  >
+                    <p> Call us</p>
+                    <CallIcon color="#fff" width={16} height={16} />
+                  </div>
+                </a>
+              )}
+            </div>
           </Box>
         </Box>
       </Box>

package/src/components/Inquiry/InquiryModal.tsx

@@ -17,7 +17,6 @@ interface Props {
   selectedRegion: any;
   setIsInquiryModalOpen: any;
   isInquiryModalOpen?: any;
-  setInquiryStatus: any;
 }
 // eslint-disable-next-line
 const emailRegex = /.+\@.+\..+$/;
@@ -41,7 +40,6 @@ export default function InquiryModal({
   selectedRegion,
   setIsInquiryModalOpen,
   isInquiryModalOpen,
-  setInquiryStatus,
 }: Props) {
   const stateGlobal = useAppSelector(state => state);
   const {
@@ -78,20 +76,19 @@ export default function InquiryModal({
       : null;
     const serviceId = 'service_zfsxshi';
     setIsInquiryModalOpen(false);
-    if (settings.templateId) {
+    const templateId = settings.support?.emailTemplateId;
+    if (templateId) {
       try {
-        setInquiryStatus('loading');
-        await emailjs.send(serviceId, settings.templateId, {
+        await emailjs.send(serviceId, templateId, {
           email_id: email.trim(),
-          information_text: information,
+          information_text: information ? information : '<not specified>',
           request_image: croppedImage?.toDataURL(),
-          prefilter_values: preFilterValues.join(', '),
+          prefilter_values: preFilterValues?.length
+            ? preFilterValues.join(', ')
+            : '<not specified>',
         });
-        setInquiryStatus('sent');
         ToastHelper.success('Request sent successfully');
       } catch (error) {
-        setInquiryStatus('inactive');
-
         toast(
           t => {
             return (