feat widget modal visibility improvements (#407)

implerhq · Oct 27, 2023 · 7fafb19 · 7fafb19
2 parents a7c088a + 02f0e59
commit 7fafb19
Show file tree

Hide file tree

Showing 17 changed files with 5,892 additions and 8,892 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -21,14 +21,14 @@
     "@emotion/server": "^11.10.0",
     "@impler/react": "workspace:^0.11.3",
     "@impler/shared": "workspace:^0.11.3",
-    "@mantine/carousel": "6.0.6",
-    "@mantine/core": "6.0.6",
-    "@mantine/dates": "6.0.6",
-    "@mantine/hooks": "6.0.6",
-    "@mantine/modals": "6.0.6",
-    "@mantine/next": "6.0.6",
-    "@mantine/notifications": "6.0.6",
-    "@mantine/prism": "6.0.6",
+    "@mantine/carousel": "6.0.21",
+    "@mantine/core": "6.0.21",
+    "@mantine/dates": "6.0.21",
+    "@mantine/hooks": "6.0.21",
+    "@mantine/modals": "6.0.21",
+    "@mantine/next": "6.0.21",
+    "@mantine/notifications": "6.0.21",
+    "@mantine/prism": "6.0.21",
     "@next/font": "13.1.1",
     "@openreplay/tracker": "^9.0.9",
     "@tanstack/react-query": "^4.14.5",

diff --git a/apps/widget/package.json b/apps/widget/package.json
@@ -41,10 +41,10 @@
     "@emotion/react": "^11.10.5",
     "@impler/client": "^0.11.3",
     "@impler/shared": "^0.11.3",
-    "@mantine/core": "^5.6.3",
-    "@mantine/dropzone": "^5.6.3",
-    "@mantine/hooks": "^6.0.19",
-    "@mantine/notifications": "5.6.3",
+    "@mantine/core": "6.0.21",
+    "@mantine/dropzone": "6.0.21",
+    "@mantine/hooks": "6.0.21",
+    "@mantine/notifications": "6.0.21",
     "@sentry/react": "^7.19.0",
     "@sentry/tracing": "^7.19.0",
     "@storybook/addon-essentials": "^6.5.13",

diff --git a/apps/widget/src/components/Common/Container/Container.tsx b/apps/widget/src/components/Common/Container/Container.tsx
@@ -1,11 +1,11 @@
-import { useEffect, useState, PropsWithChildren } from 'react';
 import * as WebFont from 'webfontloader';
-import { useParams } from 'react-router-dom';
 import { Global } from '@emotion/react';
-import { useQueryClient } from '@tanstack/react-query';
-import { NotificationsProvider } from '@mantine/notifications';
-import { MantineProvider } from '@mantine/core';
+import { useParams } from 'react-router-dom';
 import { logAmplitudeEvent } from '@amplitude';
+import { MantineProvider } from '@mantine/core';
+import { useQueryClient } from '@tanstack/react-query';
+import { Notifications } from '@mantine/notifications';
+import { useEffect, useState, PropsWithChildren } from 'react';
 
 import { Provider } from '../Provider';
 import { ApiService } from '@impler/client';
@@ -68,7 +68,7 @@ export function Container({ children }: PropsWithChildren<{}>) {
     }
   }
 
-  if (!(isAuthenticated && showWidget)) return null;
+  if (!isAuthenticated) return null;
 
   return (
     <>
@@ -106,46 +106,44 @@ export function Container({ children }: PropsWithChildren<{}>) {
           }),
         }}
       />
-      {primaryPayload ? (
-        <MantineProvider
-          withGlobalStyles
-          withNormalizeCSS
-          theme={{
-            ...mantineConfig,
-            colors: {
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              primary: generateShades(secondaryPayload.primaryColor),
-            },
-            primaryColor: 'primary',
+      <MantineProvider
+        withGlobalStyles
+        withNormalizeCSS
+        theme={{
+          ...mantineConfig,
+          colors: {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            primaryShade: variables.colorIndex,
-          }}
+            primary: generateShades(secondaryPayload.primaryColor),
+          },
+          primaryColor: 'primary',
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          primaryShade: variables.colorIndex,
+        }}
+      >
+        <Notifications />
+        <Provider
+          showWidget={showWidget}
+          host={secondaryPayload.host}
+          setShowWidget={setShowWidget}
+          output={secondaryPayload?.output}
+          schema={secondaryPayload?.schema}
+          title={secondaryPayload?.title}
+          // api
+          api={api}
+          // impler-context
+          projectId={projectId}
+          data={secondaryPayload.data}
+          templateId={secondaryPayload.templateId}
+          authHeaderValue={secondaryPayload?.authHeaderValue}
+          extra={secondaryPayload?.extra}
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          primaryColor={secondaryPayload.primaryColor!}
         >
-          <NotificationsProvider>
-            <Provider
-              host={secondaryPayload.host}
-              output={secondaryPayload?.output}
-              schema={secondaryPayload?.schema}
-              title={secondaryPayload?.title}
-              // api
-              api={api}
-              // impler-context
-              projectId={projectId}
-              data={secondaryPayload.data}
-              templateId={secondaryPayload.templateId}
-              accessToken={primaryPayload.accessToken}
-              authHeaderValue={secondaryPayload?.authHeaderValue}
-              extra={secondaryPayload?.extra}
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              primaryColor={secondaryPayload.primaryColor!}
-            >
-              {children}
-            </Provider>
-          </NotificationsProvider>
-        </MantineProvider>
-      ) : null}
+          {children}
+        </Provider>
+      </MantineProvider>
     </>
   );
 }
diff --git a/apps/widget/src/components/Common/Provider/Provider.tsx b/apps/widget/src/components/Common/Provider/Provider.tsx
@@ -12,12 +12,13 @@ interface IProviderProps {
   schema?: string;
   data?: Record<string, string | number>[];
   host: string;
+  showWidget: boolean;
+  setShowWidget: (status: boolean) => void;
   // api-context
   api: ApiService;
   // impler-context
   projectId: string;
   templateId?: string;
-  accessToken?: string;
   extra?: string;
   authHeaderValue?: string;
 }
@@ -30,8 +31,9 @@ export function Provider(props: PropsWithChildren<IProviderProps>) {
     output,
     projectId,
     templateId,
-    accessToken,
     extra,
+    showWidget,
+    setShowWidget,
     authHeaderValue,
     children,
     primaryColor,
@@ -43,18 +45,19 @@ export function Provider(props: PropsWithChildren<IProviderProps>) {
     <ImplerContextProvider
       projectId={projectId}
       templateId={templateId}
-      accessToken={accessToken}
       extra={extra}
       authHeaderValue={authHeaderValue}
     >
       <APIContextProvider api={api}>
         <AppContextProvider
           host={host}
-          output={output}
-          title={title}
-          primaryColor={primaryColor}
           data={data}
+          title={title}
+          output={output}
           schema={schema}
+          showWidget={showWidget}
+          primaryColor={primaryColor}
+          setShowWidget={setShowWidget}
         >
           {children}
         </AppContextProvider>

diff --git a/apps/widget/src/components/widget/Widget.tsx b/apps/widget/src/components/widget/Widget.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import { Modal } from '@ui/Modal';
+import { variables } from '@config';
 import { ParentWindow } from '@util';
 import { IUpload } from '@impler/shared';
 import { Phase1 } from './Phases/Phase1';
@@ -15,7 +16,7 @@ import { logAmplitudeEvent, resetAmplitude } from '@amplitude';
 
 export function Widget() {
   const defaultDataCount = 0;
-  const { reset: resetAppState, uploadInfo, templateInfo, title } = useAppState();
+  const { showWidget, setShowWidget, reset: resetAppState, uploadInfo, templateInfo, title } = useAppState();
   const [phase, setPhase] = useState<PhasesEum>(PhasesEum.UPLOAD);
   const [dataCount, setDataCount] = useState<number>(defaultDataCount);
   const [promptContinueAction, setPromptContinueAction] = useState<PromptModalTypesEnum>();
@@ -38,9 +39,12 @@ export function Widget() {
     else setPromptContinueAction(PromptModalTypesEnum.CLOSE);
   };
   const closeWidget = () => {
+    setShowWidget(false);
     resetAmplitude();
-    ParentWindow.Close();
     resetProgress();
+    setTimeout(() => {
+      ParentWindow.Close();
+    }, variables.closeDelayInMS);
   };
   const resetProgress = () => {
     resetAppState();
@@ -60,7 +64,7 @@ export function Widget() {
   };
 
   return (
-    <Modal title={title || templateInfo?.name} opened onClose={onClose}>
+    <Modal title={title || templateInfo?.name} opened={showWidget} onClose={onClose}>
       <Layout active={phase} title={title || templateInfo?.name}>
         {PhaseView[phase]}
         <PromptModal

diff --git a/apps/widget/src/config/theme.config.ts b/apps/widget/src/config/theme.config.ts
@@ -8,10 +8,10 @@ export const mantineConfig: MantineThemeOverride = {
     fontFamily: "'Poppins', sans serif",
   },
   breakpoints: {
-    xs: 0,
-    sm: 768,
-    md: 992,
-    lg: 1200,
-    xl: 1440,
+    xs: '0',
+    sm: '768',
+    md: '992',
+    lg: '1200',
+    xl: '1440',
   },
 };
diff --git a/apps/widget/src/config/variable.config.ts b/apps/widget/src/config/variable.config.ts
@@ -16,6 +16,7 @@ export const variables = {
   defaultAlpha: 1,
   shadesMultipler: 2,
   maxColorNumber: 255,
+  closeDelayInMS: 100,
   implerWebsite: 'https://impler.io?utm_source=widget',
 };
 

diff --git a/apps/widget/src/design-system/Modal/Modal.style.ts b/apps/widget/src/design-system/Modal/Modal.style.ts
@@ -8,7 +8,7 @@ export const getHeaderStyles = (theme: MantineTheme): React.CSSProperties => ({
 });
 
 export const getModalStyles = (theme: MantineTheme): React.CSSProperties => ({
-  padding: '100px',
+  flex: 'unset',
   height: 'calc(100vh - 20%)',
   width: 'calc(100vw - 20%)',
   display: 'flex',
@@ -30,7 +30,7 @@ export default createStyles((theme: MantineTheme, params, getRef): Record<string
   return {
     title: getTitleStyles(theme),
     header: getHeaderStyles(theme),
-    modal: getModalStyles(theme),
+    content: getModalStyles(theme),
     body: getModalBodyStyles(theme),
   };
 });
diff --git a/apps/widget/src/design-system/Modal/Modal.tsx b/apps/widget/src/design-system/Modal/Modal.tsx
@@ -1,7 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { Modal as MantineModal } from '@mantine/core';
 import useStyles from './Modal.style';
-
+import { Modal as MantineModal } from '@mantine/core';
 interface IModalProps extends JSX.ElementChildrenAttribute {
   title?: string;
   opened: boolean;
@@ -17,13 +16,13 @@ export function Modal(props: PropsWithChildren<IModalProps>) {
 
   return (
     <MantineModal
+      trapFocus
       onClose={onClose}
       opened={opened}
-      transitionDuration={1000}
-      transitionTimingFunction="ease"
-      transition="scale"
-      overlayOpacity={0.4}
-      overlayBlur={0.8}
+      overlayProps={{
+        opacity: 0.4,
+        blur: 0.8,
+      }}
       centered={centered}
       title={title}
       classNames={classes}

diff --git a/apps/widget/src/design-system/Pagination/Pagination.tsx b/apps/widget/src/design-system/Pagination/Pagination.tsx
@@ -24,7 +24,7 @@ export function Pagination(props: IPaginationProps) {
         boundaries={isLessThanMd ? variables.baseIndex : variables.firstIndex}
         classNames={classes}
         total={total}
-        page={page}
+        value={page}
         size={size}
         onChange={onChange}
       />

diff --git a/apps/widget/src/hooks/useAuthentication.ts b/apps/widget/src/hooks/useAuthentication.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { ApiService } from '@impler/client';
 import { IErrorObject } from '@impler/shared';
 import { logger, ParentWindow } from '@util';
@@ -10,32 +10,25 @@ interface IUseAuthenticationProps {
 }
 export function useAuthentication({ api, projectId }: IUseAuthenticationProps) {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const { data, refetch, error } = useQuery<Boolean, IErrorObject, any, string[]>(
+  const { refetch } = useQuery<Boolean, IErrorObject, any, string[]>(
     ['valid'],
     () => api.checkIsRequestvalid(projectId) as Promise<boolean>,
     {
       enabled: false,
       retry: 0,
+      onSuccess(isValid) {
+        if (isValid) {
+          setIsAuthenticated(true);
+          ParentWindow.AuthenticationValid();
+        }
+      },
+      onError(err) {
+        logger.logError(logger.ErrorTypesEnum.INVALID_PROPS, err.message);
+        ParentWindow.AuthenticationError(err.message);
+      },
     }
   );
 
-  useEffect(() => {
-    if (data) setIsValidAuthenticated();
-    else if (error) {
-      setAuthenticationError(error.message);
-    }
-  }, [error, data]);
-
-  function setIsValidAuthenticated() {
-    setIsAuthenticated(true);
-    ParentWindow.AuthenticationValid();
-  }
-
-  function setAuthenticationError(message: string) {
-    logger.logError(logger.ErrorTypesEnum.INVALID_PROPS, message);
-    ParentWindow.AuthenticationError(message);
-  }
-
   return {
     isAuthenticated,
     refetch,