@nyris/nyris-webapp 0.3.89 → 0.3.90

package/src/pages/Result.tsx

@@ -19,13 +19,15 @@ import TextSearch from 'components/TextSearch';
 import { Icon } from '@nyris/nyris-react-components';
 import PostFilterDrawer from 'components/PostFilter/PostFilterDrawer';
 import ImagePreview from 'components/ImagePreview';
-import Footer from 'components/Footer';
+import PoweredBy from 'components/PoweredBy';
 import CurrentRefinements from 'components/CurrentRefinements';
 import { GoBackButton } from 'components/GoBackButton';
 import { useCurrentRefinements } from 'react-instantsearch';
 import CustomCamera from 'components/CustomCameraDrawer';
 import { useTranslation } from 'react-i18next';
 import { useImageSearch } from 'hooks/useImageSearch';
+import ItemSpecification from 'components/ItemSpecification';
+import MatchNotificationBanner from 'components/MatchNotificationBanner';
 
 function Results() {
   const settings = window.settings;
@@ -114,6 +116,7 @@ function Results() {
         image: file,
         settings: window.settings,
         showFeedback: true,
+        clearPostFilter: true,
       }).then(() => {});
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -189,350 +192,339 @@ function Results() {
             'justify-between',
             'relative',
             'h-full',
-            'overflow-y-auto',
           ])}
         >
           <SidePanel className="hidden desktop:flex" />
 
-          <div className="block desktop:hidden mb-4 desktop:mb-0">
-            {requestImages[0] && <ImagePreview />}
-            {window.settings.showImageDetails && (imageAnalysis?.imageDescription ||
-              Object.keys(imageAnalysis?.specification || {}).length > 0) && (
-              <div className="p-2">
-                <div className="self-stretch p-4 bg-[#f3f3f5] rounded flex justify-start flex-col items-start gap-2 flex-wrap content-start w-full">
-                  {imageAnalysis?.imageDescription !==
-                    'No description available' && (
-                    <div className="self-stretch flex flex-col justify-start items-start">
-                      <div className="justify-start text-black text-base font-semibold">
-                        Image description
-                      </div>
-                      <div className="self-stretch justify-start text-black text-sm font-normal">
-                        {imageAnalysis?.imageDescription || ''}
-                      </div>
-                    </div>
-                  )}
-
-                  <div className="justify-start text-[#2b2c46] text-base font-semibold mt-1">
-                    Identified Attributes
-                  </div>
-                  <div className="flex justify-start items-start gap-4 flex-wrap content-start">
-                    {Object.keys(imageAnalysis?.specification || {})
-                      .filter((key) => (key !== 'is_nameplate' && key !== 'prefilter_value'))
-                      .map(
-                        key => {
-                          const value = imageAnalysis?.specification[key];
-                          if (!value) {
-                            return null;
-                          }
-                          return (
-                            <>
-                              <div
-                                className="inline-flex flex-col justify-center items-start "
-                                key={key}
-                              >
-                                <div className="pl-1 inline-flex justify-center items-center gap-2.5">
-                                  <div className="justify-start text-[#2b2c46] text-sm font-semibold">
-                                    {key}
-                                  </div>
-                                </div>
-                                <div
-                                  className={twMerge(
-                                    `p-3 bg-[#e4e3ff] rounded-lg  inline-flex justify-center items-center gap-1.5`,
-                                    'text-[#3e36dc]',
-                                    specificationFilter[key]
-                                      ? 'border-[#3E36DC] bg-[#3E36DC] text-white'
-                                      : '',
-                                  )}
-                                  onClick={() => {
-                                    if (!value) {
-                                      return;
-                                    }
-                                    const setSpecificationFilter =
-                                      useRequestStore.getState()
-                                        .setSpecificationFilter;
-  
-                                    const setSpecificationFilteredProducts =
-                                      useResultStore.getState()
-                                        .setSpecificationFilteredProducts;
-  
-                                    if (specificationFilter[key]) {
-                                      setSpecificationFilter({});
-                                      setSpecificationFilteredProducts([]);
-                                      // setProducts(results);
-                                    } else {
-                                      setSpecificationFilter({
-                                        [key]: value,
-                                      });
-                                    }
-                                  }}
-                                >
-                                  <div className="justify-start text-sm font-medium leading-none flex gap-2">
-                                    {imageAnalysis?.specification[key] || 'N/A'}
-                                    <div>
-                                      <Icon
-                                        name="close"
-                                        className={twMerge(
-                                          'w-3 h-3 text-white',
-                                          specificationFilter[key]
-                                            ? 'block'
-                                            : 'hidden',
-                                        )}
-                                      />
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </>
-                          );
-                        },
-                      )}
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-          <div
-            className={twMerge([
-              requestImages[0] ? 'pt-0' : 'pt-3',
-              'desktop:pt-10',
-              'desktop:overflow-hidden',
-              'desktop:overflow-y-auto',
-              'flex',
-              'flex-col',
-              'relative',
-              'w-full',
-              'mr-auto',
-              'ml-auto',
-              'h-full',
-            ])}
-          >
+          <div className="w-full h-full flex flex-col">
             <div
               className={twMerge([
+                requestImages[0] ? 'pt-0' : 'pt-3',
+                'desktop:pt-0',
+                'desktop:mt-0',
                 'flex',
                 'flex-col',
-                'flex-grow',
-                'desktop:mt-0',
+                'relative',
+                'w-full',
+                'mr-auto',
+                'ml-auto',
+                'max-h-full',
+                'flex-1',
+                'overflow-y-auto',
               ])}
             >
-              <div
-                style={{
-                  fontWeight: 700,
-                  fontSize: 16,
-                  marginLeft: 16,
-                  marginBottom: 16,
-                }}
-              >
-                {!specifications?.specificationPrefilter
-                  && specifications?.prefilter_value
-                  && t('Showing results for machine', { prefilter_title: window.settings.preFilterTitle?.toLocaleLowerCase(), prefilter_value: specifications.prefilter_value })
-                }
-                {specifications?.is_nameplate && specifications?.specificationPrefilter
-                  && t('No matches found for', { prefilter_title: window.settings.preFilterTitle?.toLocaleLowerCase(), prefilter_value: specifications.specificationPrefilter })
-                }
+              <div className="block desktop:hidden desktop:mb-0">
+                {requestImages[0] && <ImagePreview />}
+                {window.settings.showImageDetails &&
+                  (imageAnalysis?.imageDescription ||
+                    Object.keys(imageAnalysis?.specification || {}).length >
+                      0) && (
+                    <div className="p-2">
+                      <div className="self-stretch p-4 bg-[#f3f3f5] rounded flex justify-start flex-col items-start gap-2 flex-wrap content-start w-full">
+                        {imageAnalysis?.imageDescription !==
+                          'No description available' && (
+                          <div className="self-stretch flex flex-col justify-start items-start">
+                            <div className="justify-start text-black text-base font-semibold">
+                              Image description
+                            </div>
+                            <div className="self-stretch justify-start text-black text-sm font-normal">
+                              {imageAnalysis?.imageDescription || ''}
+                            </div>
+                          </div>
+                        )}
+
+                        {Object.keys(imageAnalysis?.specification || {})
+                          .filter(
+                            key =>
+                              key !== 'is_nameplate' &&
+                              key !== 'prefilter_value',
+                          )
+                          .some(key => !!imageAnalysis?.specification[key]) && (
+                          <div className="justify-start text-[#2b2c46] text-base font-semibold mt-1">
+                            Identified Attributes
+                          </div>
+                        )}
+                        <div className="flex justify-start items-start gap-4 flex-wrap content-start">
+                          {Object.keys(imageAnalysis?.specification || {})
+                            .filter(
+                              key =>
+                                key !== 'is_nameplate' &&
+                                key !== 'prefilter_value',
+                            )
+                            .map(key => {
+                              const value = imageAnalysis?.specification[key];
+                              if (!value) {
+                                return null;
+                              }
+                              return (
+                                <ItemSpecification
+                                  attr={key}
+                                  value={value}
+                                  specificationFilter={specificationFilter}
+                                  imageAnalysis={imageAnalysis}
+                                />
+                              );
+                            })}
+                        </div>
+                      </div>
+                    </div>
+                  )}
               </div>
               <div
                 className={twMerge([
-                  'h-full',
-                  'relative',
+                  requestImages[0] ? 'pt-0' : 'pt-3',
+                  'desktop:pt-4',
+                  'desktop:overflow-hidden',
+                  'desktop:overflow-y-auto',
                   'flex',
-                  'justify-center',
-                  'mx-0.5',
-                  'mobile-md:mx-2',
-                  'desktop:mx-4',
+                  'flex-col',
+                  'relative',
+                  'w-full',
+                  'mr-auto',
+                  'ml-auto',
+                  'h-full',
                 ])}
               >
-                <div className="max-w-[840px] w-full relative flex flex-col justify-between mb-20 desktop:mb-0">
+                <div
+                  className={twMerge([
+                    'flex',
+                    'flex-col',
+                    'flex-grow',
+                    'desktop:mt-0',
+                  ])}
+                >
                   <div
-                    className={twMerge(
-                      'grid grid-cols-[repeat(auto-fit,_minmax(180px,_0px))] desktop:grid-cols-[repeat(auto-fit,_minmax(190px,_0px))]',
-                      'gap-2 desktop:gap-6 justify-center max-w-[100%] mx-auto',
-                      'w-full',
-                    )}
+                    style={{
+                      fontWeight: 700,
+                      fontSize: 16,
+                      marginLeft: 16,
+                      marginBottom: 16,
+                    }}
                   >
-                    <GoBackButton className="col-span-full mb-2 desktop:mb-0" />
-                    <CurrentRefinements className="col-span-full" />
-                    <ProductList />
+                    {!specifications?.specificationPrefilter &&
+                      specifications?.prefilter_value &&
+                      window.settings.algolia.enabled &&
+                      t('Showing results for machine', {
+                        prefilter_title:
+                          window.settings.preFilterTitle?.toLocaleLowerCase(),
+                        prefilter_value: specifications.prefilter_value,
+                      })}
                   </div>
-
-                  {showFeedbackSuccess && (
-                    <div className={'feedback-floating'}>
-                      <div className="feedback-section">
-                        <div className="feedback-success">
-                          {t('Thank you for your feedback')}
-                        </div>
+                  <div
+                    className={twMerge([
+                      'h-full',
+                      'relative',
+                      'flex',
+                      'justify-center',
+                      'mx-0.5',
+                      'mobile-md:mx-2',
+                      'desktop:mx-4',
+                    ])}
+                  >
+                    <div className="max-w-[840px] w-full relative flex flex-col justify-between mb-20 desktop:mb-0">
+                      <div
+                        className={twMerge(
+                          'grid grid-cols-[repeat(auto-fit,_minmax(180px,_0px))] desktop:grid-cols-[repeat(auto-fit,_minmax(190px,_0px))]',
+                          'gap-2 desktop:gap-6 justify-center max-w-[100%] mx-auto',
+                          'w-full',
+                        )}
+                      >
+                        <GoBackButton className="col-span-full mb-2 desktop:mb-0" />
+                        <CurrentRefinements className="col-span-full" />
+                        <MatchNotificationBanner className="col-span-full" />
+                        <ProductList />
                       </div>
-                    </div>
-                  )}
 
-                  {feedbackStatus === 'visible' &&
-                    !showFeedbackSuccess &&
-                    productsFromAlgolia.length > 0 && (
-                      <div className={'feedback-floating'}>
-                        <div className="feedback-section feedback-backdrop-blur" />
-
-                        <div className="feedback-section">
-                          <Feedback
-                            submitFeedback={submitFeedback}
-                            onFeedbackClose={() => {
-                              setFeedbackStatus('submitted');
-                              setShowFeedback(false);
-                            }}
-                          />
+                      {showFeedbackSuccess && (
+                        <div className={'feedback-floating'}>
+                          <div className="feedback-section">
+                            <div className="feedback-success">
+                              {t('Thank you for your feedback')}
+                            </div>
+                          </div>
                         </div>
-                      </div>
-                    )}
-                  <div>
-                    <Pagination
-                      isLoading={isFindApiLoading || isAlgoliaLoading}
-                      className={
-                        productsFromAlgolia.length === 0 && !isAlgoliaLoading
-                          ? 'opacity-0'
-                          : ''
-                      }
-                    />
-                    <div
-                      style={{
-                        display: 'flex',
-                        flexGrow: 1,
-                      }}
-                    >
-                      {requestImages.length > 0 &&
-                        !isAlgoliaLoading &&
-                        !isFindApiLoading &&
-                        window.settings.rfq &&
-                        window.settings.rfq.enabled && (
-                          <RfqBanner
-                            requestImage={requestImages[0]}
-                            selectedRegion={regions[0]}
-                          />
+                      )}
+
+                      {feedbackStatus === 'visible' &&
+                        !showFeedbackSuccess &&
+                        productsFromAlgolia.length > 0 && (
+                          <div className={'feedback-floating'}>
+                            <div className="feedback-section feedback-backdrop-blur" />
+
+                            <div className="feedback-section">
+                              <Feedback
+                                submitFeedback={submitFeedback}
+                                onFeedbackClose={() => {
+                                  setFeedbackStatus('submitted');
+                                  setShowFeedback(false);
+                                }}
+                              />
+                            </div>
+                          </div>
                         )}
-                      {!isFindApiLoading &&
-                        window.settings.support &&
-                        window.settings.support.enabled &&
-                        (query || requestImages[0] || specifications) && (
-                          <InquiryBanner
-                            requestImage={requestImages[0]}
-                            selectedRegion={regions[0]}
-                            query={query}
+                      <div>
+                        <Pagination
+                          isLoading={isFindApiLoading || isAlgoliaLoading}
+                          className={
+                            productsFromAlgolia.length === 0 &&
+                            !isAlgoliaLoading
+                              ? 'opacity-0'
+                              : ''
+                          }
+                        />
+                        <div
+                          style={{
+                            display: 'flex',
+                            flexGrow: 1,
+                          }}
+                        >
+                          {requestImages.length > 0 &&
+                            !isAlgoliaLoading &&
+                            !isFindApiLoading &&
+                            window.settings.rfq &&
+                            window.settings.rfq.enabled && (
+                              <RfqBanner
+                                requestImage={requestImages[0]}
+                                selectedRegion={regions[0]}
+                              />
+                            )}
+                          {!isFindApiLoading &&
+                            window.settings.support &&
+                            window.settings.support.enabled &&
+                            (query || requestImages[0] || specifications) && (
+                              <InquiryBanner
+                                requestImage={requestImages[0]}
+                                selectedRegion={regions[0]}
+                                query={query}
+                              />
+                            )}
+                        </div>
+                        {settings.showPoweredByNyris && (
+                          <PoweredBy
+                            className={
+                              'flex desktop:w-0 desktop:h-0 w-full justify-center items-center mb-2'
+                            }
                           />
                         )}
+                      </div>
                     </div>
-                    <Footer className="bg-[#fafafa] desktop:hidden" />
                   </div>
                 </div>
               </div>
+              <div className="mt-[6px]">
+                <HitsPerPage
+                  items={[
+                    { label: '10', value: 10 },
+                    { label: '20', value: 20, default: true },
+                    { label: '30', value: 30 },
+                    { label: '40', value: 40 },
+                    { label: '50', value: 50 },
+                  ]}
+                />
+              </div>
             </div>
-
-            <HitsPerPage
-              items={[
-                { label: '10', value: 10 },
-                { label: '20', value: 20, default: true },
-                { label: '30', value: 30 },
-                { label: '40', value: 40 },
-                { label: '50', value: 50 },
-              ]}
-            />
           </div>
         </div>
-      </div>
 
-      <div className="flex desktop:hidden w-full fixed bottom-4 z-50 px-3 gap-2">
-        <TextSearch
-          className="flex desktop:hidden w-full gap-2"
-          onCameraClick={() => setOpenModalCamera(true)}
-        />
-        {isShowFilter && settings.postFilterOption && (
-          <div
-            style={{
-              position: 'relative',
-              width: '48px',
-              height: '48px',
-              padding: ' 8px',
-              flexShrink: 0,
-              borderRadius: '32px',
-              background: '#FAFAFA',
-              boxShadow: ' 0px 0px 8px 0px rgba(0, 0, 0, 0.15)',
-            }}
-            onClick={() => {
-              if (disablePostFilter && !isPostFilterApplied) return;
-              setShowPostFilter(true);
-
-              // setPreFilterDropdown(false);
-            }}
-          >
+        <div className="flex desktop:hidden w-full fixed bottom-4 z-50 px-3 pr-5 gap-2">
+          <TextSearch
+            className="flex desktop:hidden w-full gap-2"
+            onCameraClick={() => setOpenModalCamera(true)}
+          />
+          {/* <ImageUpload onCameraClick={() => setOpenModalCamera(true)} /> */}
+          {isShowFilter && settings.postFilterOption && (
             <div
               style={{
-                display: 'flex',
-                background: `${
-                  disablePostFilter
-                    ? '#F3F3F5'
-                    : isPostFilterApplied
-                    ? '#F0EFFF'
-                    : '#F3F3F5'
-                }`,
-                borderRadius: '40px',
-                width: '32px',
-                height: '32px',
-                justifyContent: 'center',
-                alignItems: 'center',
+                position: 'relative',
+                width: '48px',
+                height: '48px',
+                padding: ' 8px',
+                flexShrink: 0,
+                borderRadius: '32px',
+                background: '#FAFAFA',
+                boxShadow: ' 0px 0px 8px 0px rgba(0, 0, 0, 0.15)',
               }}
-            >
-              <Icon
-                name="filter"
-                className={twMerge([
-                  isPostFilterApplied
-                    ? 'text-[#3E36DC]'
-                    : disablePostFilter
-                    ? 'text-[#E0E0E0]'
-                    : 'text-[#2B2C46]',
-                ])}
-              />
-            </div>
+              onClick={() => {
+                if (disablePostFilter && !isPostFilterApplied) return;
+                setShowPostFilter(true);
 
-            {isPostFilterApplied && (
+                // setPreFilterDropdown(false);
+              }}
+            >
               <div
                 style={{
-                  position: 'absolute',
-                  top: '8px',
-                  left: '35px',
                   display: 'flex',
+                  background: `${
+                    disablePostFilter
+                      ? '#F3F3F5'
+                      : isPostFilterApplied
+                        ? '#F0EFFF'
+                        : '#F3F3F5'
+                  }`,
+                  borderRadius: '40px',
+                  width: '32px',
+                  height: '32px',
                   justifyContent: 'center',
                   alignItems: 'center',
-                  background: 'white',
-                  width: '10px',
-                  height: '10px',
-                  borderRadius: '100%',
                 }}
               >
-                <div
-                  style={{
-                    width: '8px',
-                    height: '8px',
-                    borderRadius: '100%',
-                  }}
+                <Icon
+                  name="filter"
                   className={twMerge([
                     isPostFilterApplied
-                      ? 'bg-[#3E36DC]'
+                      ? 'text-[#3E36DC]'
                       : disablePostFilter
-                      ? 'bg-[#E0E0E0]'
-                      : 'bg-[#2B2C46]',
+                        ? 'text-[#E0E0E0]'
+                        : 'text-[#2B2C46]',
                   ])}
-                ></div>
+                />
               </div>
-            )}
-          </div>
-        )}
+
+              {isPostFilterApplied && (
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: '8px',
+                    left: '35px',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    background: 'white',
+                    width: '10px',
+                    height: '10px',
+                    borderRadius: '100%',
+                  }}
+                >
+                  <div
+                    style={{
+                      width: '8px',
+                      height: '8px',
+                      borderRadius: '100%',
+                    }}
+                    className={twMerge([
+                      isPostFilterApplied
+                        ? 'bg-[#3E36DC]'
+                        : disablePostFilter
+                          ? 'bg-[#E0E0E0]'
+                          : 'bg-[#2B2C46]',
+                    ])}
+                  ></div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        <PostFilterDrawer
+          openModal={showPostFilter}
+          handleClose={() => setShowPostFilter(false)}
+        />
+        <CustomCamera
+          show={isOpenModalCamera}
+          onClose={() => {
+            setOpenModalCamera(s => !s);
+          }}
+        />
       </div>
-      <PostFilterDrawer
-        openModal={showPostFilter}
-        handleClose={() => setShowPostFilter(false)}
-      />
-      <CustomCamera
-        show={isOpenModalCamera}
-        onClose={() => {
-          setOpenModalCamera(s => !s);
-        }}
-      />
     </>
   );
 }