@nyris/nyris-webapp 0.3.45 → 0.3.46

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.46",
   "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.46",
+    "@nyris/nyris-react-components": "^0.3.46",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",

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/Inquiry/InquiryBanner.tsx

@@ -3,6 +3,9 @@ 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';
 
 function InquiryBanner({
   requestImage,
@@ -23,6 +26,11 @@ function InquiryBanner({
     setInquiryStatus('inactive');
   }, [selectedRegion, query]);
 
+  const { description, emailInquiry, supportNumber } =
+    useAppSelector(state => state.settings.support) || {};
+  const { secondaryColor } =
+    useAppSelector(state => state.settings.theme) || {};
+
   return (
     <>
       {isInquiryModalOpen && (
@@ -31,18 +39,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 +57,8 @@ function InquiryBanner({
           style={{
             width: '100%',
             display: 'flex',
-            columnGap: !isMobile ? '26px' : '8px',
+            columnGap: !isMobile ? '26px' : '16px',
             alignItems: 'center',
-            justifyContent: 'space-between',
           }}
         >
           {requestImage && (
@@ -64,8 +70,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 +79,10 @@ function InquiryBanner({
             </div>
           )}
 
-          <Box>
+          <Box style={{ width: '100%' }}>
             <Box
               style={{
-                paddingBottom: '12px',
+                paddingBottom: '8px',
                 paddingLeft: '16px',
               }}
             >
@@ -94,42 +99,102 @@ function InquiryBanner({
               </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 (

package/src/components/Layout.tsx

@@ -41,6 +41,11 @@ jQuery(document).ready(function () {
     email: 'info@cadenas.de',
   });
   psol.core.setServiceBaseUrl('https://webapi.partcommunity.com');
+  window.onpageshow = function(event: any) {
+    if (event.persisted) {
+      window.location.reload();
+    }
+  };
 });
 
 i18n.use(initReactI18next).init({

package/src/components/ProductDetailView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';
 import CloseOutlinedIcon from '@material-ui/icons/CloseOutlined';
 import IconOpenLink from 'common/assets/icons/Union.svg';
@@ -111,7 +111,15 @@ function ProductDetailView(props: Props) {
 
     setDataImageCarouSel(valueKey);
   };
-
+  const productDetails = useMemo(() => {
+    const details = get(dataItem, settings.field.productDetails);
+    try {
+      return details.join(', ');
+    } catch (e) {
+      return details;
+    }
+  }, [dataItem, settings.field.productDetails]);
+  const manufacturerNumber = get(dataItem, settings.field.manufacturerNumber);
   return (
     <Box
       className="box-modal-default"
@@ -143,7 +151,7 @@ function ProductDetailView(props: Props) {
           position: 'relative',
         }}
       >
-        {settings.cadenas3dWebView && (
+        {settings.cadenas?.cadenas3dWebView && (
           <CadenasWebViewer
             is3dView={is3dView}
             sku={sku}
@@ -229,7 +237,7 @@ function ProductDetailView(props: Props) {
         >
           {!is3dView &&
             status3dView !== 'not-found' &&
-            settings.cadenas3dWebView && (
+            settings.cadenas?.cadenas3dWebView && (
               <Box
                 style={{
                   background: '#E9E9EC',
@@ -347,7 +355,7 @@ function ProductDetailView(props: Props) {
                 style={{ gap: 6 }}
                 width={'100%'}
               >
-                {!settings.warehouseVariant && settings.CTAButtonText  && (
+                {!settings.warehouseVariant && settings.CTAButtonText && (
                   <ProductAttribute
                     title={'Produktname'}
                     value={title}
@@ -374,16 +382,16 @@ function ProductDetailView(props: Props) {
                     title={t('Brand')}
                     value={brand || settings.brandName}
                     width={
-                      dataItem[settings.field.manufacturerNumber]
+                      manufacturerNumber
                         ? { xs: '49%', md: 'fit-content' }
                         : { xs: '100%', md: 'fit-content' }
                     }
                   />
                 )}
-                {dataItem[settings.field.manufacturerNumber] && (
+                {manufacturerNumber && (
                   <ProductAttribute
                     title={t('Manufacturer Number')}
-                    value={dataItem[settings.field.manufacturerNumber]}
+                    value={manufacturerNumber}
                     width={
                       brand || settings.brandName
                         ? { xs: '49%', md: 'fit-content' }
@@ -460,7 +468,9 @@ function ProductDetailView(props: Props) {
                         paddingRight: '4px',
                       }}
                     >
-                      {settings.CTAButtonText ? settings.CTAButtonText : dataItem[settings.field.productName]}
+                      {settings.CTAButtonText
+                        ? settings.CTAButtonText
+                        : dataItem[settings.field.productName]}
                     </Typography>
                     {ctaLink && (
                       <img
@@ -471,7 +481,7 @@ function ProductDetailView(props: Props) {
                     )}
                   </Box>
                 </Box>
-                {dataItem[settings.field.productDetails] && (
+                {productDetails && (
                   <Box className="w-100">
                     <Button
                       className="w-100 button-hover"
@@ -509,7 +519,7 @@ function ProductDetailView(props: Props) {
                           color: '#2b2c46',
                         }}
                       >
-                        {dataItem[settings.field.productDetails]}
+                        {productDetails}
                       </Typography>
                     </Collapse>
                   </Box>

package/src/components/common.scss

@@ -64,6 +64,10 @@
   .box-body-newVersion-wrap-main {
     height: calc(100% - 50px);
     // overflow: auto;
+    .box-content-main {
+      height: auto;
+      margin-top: calc(50vh - 75px);
+    }
   }
 }
 
@@ -135,4 +139,134 @@
     background-color:#F0EFFF,
 
   }
+}
+
+.feedback-floating {
+  margin-left: -24px;
+  height: fit-content;
+  bottom: 35px;
+  position: fixed;
+  z-index: 201;
+  display: flex;
+  justify-content: flex-end;
+
+  @media screen and (max-width: 776px) {
+    margin-left: 0px;
+    height: fit-content !important;
+    bottom: 105px;
+    justify-content: center !important;
+  }
+}
+
+.feedback-wrapper {
+  background-color: #e4e3fff7;
+  mix-blend-mode: multiply;
+  border-radius: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: 30px;
+  padding-right: 30px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  width: fit-content;
+  height: fit-content;
+
+  column-gap: 22px;
+
+  flex-shrink: 0;
+  color: #2B2C46;
+
+  &:hover{
+    background-color: rgb(211, 209, 255, 0.97);
+
+  }
+
+  @media screen and (max-width: 776px) {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  p{
+    font-size: 14px;
+    font-weight: 600;
+    @media screen and (max-width: 776px) {
+      font-size: 12px;
+    }
+  }
+
+  .feedback-icon-wrapper {
+    width: 34px;
+    height: 34px;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      background-color: #FFF;
+      box-shadow: 0px 0px 7.04px 0px rgba(0, 0, 0, 0.10);
+      cursor: pointer;
+
+    }
+
+    svg{
+      width: 16px;
+      height: 16px;
+
+      @media screen and (max-width: 776px) {
+        width: 14px;
+        height: 14px;
+      }
+
+    }
+
+    @media screen and (max-width: 776px) {
+      width: 25px;
+      height: 25px;
+    }
+  }
+}
+
+.feedback-success {
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  background-color: #2B2C46;
+  width: 282px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  text-align: center;
+  border-radius: 26px;
+
+  @media screen and (max-width: 776px) {
+    font-size: 12px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    width: 264px;
+  }
+}
+
+.rfq-box{
+  padding: 24px 40px 24px 40px;
+
+  @media screen and (max-width: 776px) {
+    padding: 16px 16px 16px 16px;
+  
+  }
+
+  @media screen and (max-width: 820px) {
+    padding: 16px 16px 16px 16px;
+  
+  }
+
+  .support-button-wrapper {
+    flex-wrap: nowrap;
+
+    @media screen and (max-width: 820px) {
+      gap: 8px;
+    }
+  }
+
+  
 }