@nyris/nyris-webapp 0.3.57 → 0.3.59

package/src/page/landingPage/Home.tsx

@@ -0,0 +1,49 @@
+import 'react-app-polyfill/ie11';
+import 'react-app-polyfill/stable';
+import React, { useEffect } from 'react';
+import 'typeface-roboto';
+import 'index.css';
+
+import AppMD from 'page/landingPage/HomeDesktop';
+import AppMobile from 'page/landingPage/HomeMobile';
+import { useAppSelector } from 'Store/Store';
+
+function Home(): JSX.Element {
+  const clarityId = useAppSelector(state => state.settings.clarityId);
+
+  useEffect(() => {
+    if (clarityId) {
+      clarify(window, document, 'clarity', 'script', clarityId);
+    }
+  }, [clarityId]);
+
+  const clarify = function (
+    c: any,
+    l: Document,
+    a: string,
+    r: string,
+    i: string,
+  ) {
+    c[a] =
+      c[a] ||
+      function () {
+        (c[a].q = c[a].q || []).push(arguments);
+      };
+    const t: any = l.createElement(r);
+    t.async = true;
+    t.src = `https://www.clarity.ms/tag/${i}`;
+    const y = l.getElementsByTagName(r)[0];
+    if (y.parentNode) {
+      y.parentNode.insertBefore(t, y);
+    }
+  };
+
+  return (
+    <>
+      <AppMobile />
+      <AppMD />
+    </>
+  );
+}
+
+export default Home;

package/src/page/landingPage/{AppMD.tsx → HomeDesktop.tsx}

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import './common.scss';
 import algoliasearch from 'algoliasearch/lite';
 import DragDropFile from 'components/DragDropFile';
@@ -15,38 +15,11 @@ function AppMD() {
   const searchClient = algoliasearch(appId, apiKey);
   searchClient.initIndex(indexName);
 
-    useEffect(() => {
-      if (settings.clarityId) {
-        clarify(window, document, 'clarity', 'script', settings.clarityId); 
-      }
-    }, [settings.clarityId]);
-
   const acceptTypes = ['image/*'];
   const InfiniteHits = ({ hits }: any) => {
     return <div></div>;
   };
 
-  const clarify = function (
-    c: any,
-    l: Document,
-    a: string,
-    r: string,
-    i: string
-  ) {
-    c[a] =
-      c[a] ||
-      function () {
-      (c[a].q = c[a].q || []).push(arguments);
-    };
-    const t: any = l.createElement(r);
-    t.async = true;
-    t.src = `https://www.clarity.ms/tag/${i}`;
-    const y = l.getElementsByTagName(r)[0];
-    if (y.parentNode) {
-      y.parentNode.insertBefore(t, y);
-    }
-  };
-
   const onChangeLoading = (value: boolean) => {
     setLoading(value);
   };
@@ -54,7 +27,11 @@ function AppMD() {
   const CustomInfiniteHits = connectInfiniteHits(InfiniteHits);
 
   return (
-    <div className={`box-content-main ${isLoading ? 'loading' : ''}`}>
+    <div
+      className={`box-content-main ${
+        isLoading ? 'loading' : ''
+      } hidden desktop:flex`}
+    >
       <div className="box-content_top" style={{ position: 'relative' }}>
         {settings.headerText && (
           <div
@@ -77,11 +54,7 @@ function AppMD() {
           isLoading={isLoading}
           onChangeLoading={onChangeLoading}
         />
-        {settings.experienceVisualSearch ? (
-          <ExperienceVisualSearch />
-        ) : (
-         '' 
-        )}
+        {settings.experienceVisualSearch ? <ExperienceVisualSearch /> : ''}
       </div>
     </div>
   );

package/src/page/landingPage/{AppMobile.tsx → HomeMobile.tsx}

@@ -1,50 +1,25 @@
+import { useState } from 'react';
+
 import CameraCustom from 'components/drawer/cameraCustom';
-import React, { useEffect, useState } from 'react';
-import { useAppSelector } from 'Store/Store';
 import { ReactComponent as CameraIcon } from 'common/assets/icons/take_photo.svg';
+
+import { useAppSelector } from 'Store/Store';
 import ExperienceVisualSearch from '../../components/Experience-visual-search/ExperienceVisualSearch';
 
 function AppMobile(): JSX.Element {
   const { settings } = useAppSelector(state => state);
   const [isOpenModalCamera, setOpenModalCamera] = useState<boolean>(false);
 
-  useEffect(() => {
-    if (settings.clarityId) {
-      clarify(window, document, 'clarity', 'script', settings.clarityId);
-    }
-  }, [settings.clarityId]);
-
-  const clarify = function (
-    c: any,
-    l: Document,
-    a: string,
-    r: string,
-    i: string
-  ) {
-    c[a] =
-      c[a] ||
-      function () {
-        (c[a].q = c[a].q || []).push(arguments);
-      };
-    const t: any = l.createElement(r);
-    t.async = true;
-    t.src = `https://www.clarity.ms/tag/${i}`;
-    const y = l.getElementsByTagName(r)[0];
-    if (y.parentNode) {
-      y.parentNode.insertBefore(t, y);
-    }
-  };
-
   return (
     <div
       style={{
-        display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',
         alignItems: 'center',
         width: '100%',
         height: '100%',
       }}
+      className="flex desktop:hidden"
     >
       <div className="take-photo">
         <div
@@ -67,17 +42,13 @@ function AppMobile(): JSX.Element {
       </div>
       <div className="box-screenshot-camera">
         <CameraCustom
-          isToggle={isOpenModalCamera}
-          onToggleModal={() => {
+          show={isOpenModalCamera}
+          onClose={() => {
             setOpenModalCamera(!isOpenModalCamera);
           }}
         />
       </div>
-      {settings.experienceVisualSearch ? (
-        <ExperienceVisualSearch />
-      ) : (
-        ''
-      )}
+      {settings.experienceVisualSearch ? <ExperienceVisualSearch /> : ''}
     </div>
   );
 }

package/src/page/landingPage/common.scss

@@ -740,7 +740,6 @@ button {
     line-height: 21px;
     color: #ffffff;
   }
-  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -2327,3 +2326,12 @@ button {
     max-width: 1300px;
   }
 }
+
+
+.MuiPaper-root {
+  background-color: inherit !important;
+}
+
+.MuiDrawer-paperAnchorBottom {
+  height: 100% !important;
+}