Confirmation Prompt

apps/widget/src/components/widget/Container/Container.tsx

@@ -14,11 +14,12 @@ import { IInitPayload, IShowPayload } from '@impler/shared';
 
 interface IContainerProps {
   phase: number;
+  onClose: () => void;
 }
 
 let api: ApiService;
 
-export function Container({ children, phase }: PropsWithChildren<IContainerProps>) {
+export function Container({ children, phase, onClose }: PropsWithChildren<IContainerProps>) {
   if (!api) api = new ApiService(API_URL);
   const { projectId = '' } = useParams<{ projectId: string }>();
   const [primaryPayload, setPrimaryPayload] = useState<IInitPayload>();
@@ -59,10 +60,6 @@ export function Container({ children, phase }: PropsWithChildren<IContainerProps
     }
   }
 
-  const onClose = () => {
-    ParentWindow.Close();
-  };
-
   if (!isAuthenticated) return null;
 
   return (

apps/widget/src/components/widget/Phases/PromptModal/PromptModal.tsx

@@ -0,0 +1,43 @@
+import { Warning } from '@icons';
+import { colors, TEXTS } from '@config';
+import { Button } from '@ui/Button';
+import { Group, Modal as MantineModal, Text, Title } from '@mantine/core';
+import { PromptModalTypesEnum } from '@types';
+
+interface IPromptModalProps {
+  opened: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+  action?: PromptModalTypesEnum;
+}
+
+export function PromptModal(props: IPromptModalProps) {
+  const { opened, onCancel, onConfirm, action } = props;
+  const subTitle = {
+    [PromptModalTypesEnum.CLOSE]: TEXTS.PROMPT.SUBTITLE_CLOSE,
+    [PromptModalTypesEnum.UPLOAD_AGAIN]: TEXTS.PROMPT.SUBTITLE_RESET,
+    '': '',
+  };
+
+  return (
+    <MantineModal centered opened={opened} onClose={onCancel} withCloseButton={false} padding="xl" size="lg">
+      <Group spacing={0} style={{ flexDirection: 'column', textAlign: 'center' }}>
+        <Warning fill={colors.red} styles={{ width: 40, height: 40 }} />
+        <Title color={colors.red} order={3} mt="sm">
+          {TEXTS.PROMPT.title}
+        </Title>
+        <Text color="dimmed" mb="sm">
+          {subTitle[action || '']}
+        </Text>
+        <Group spacing="sm" style={{ flexDirection: 'row' }}>
+          <Button onClick={onCancel} color="gray" variant="outline">
+            {TEXTS.PROMPT.NO}
+          </Button>
+          <Button color="red" onClick={onConfirm}>
+            {TEXTS.PROMPT.YES}
+          </Button>
+        </Group>
+      </Group>
+    </MantineModal>
+  );
+}

apps/widget/src/components/widget/Phases/PromptModal/index.ts

@@ -0,0 +1 @@
+export * from './PromptModal';

apps/widget/src/components/widget/Widget.tsx

@@ -4,23 +4,45 @@ import { Phase1 } from './Phases/Phase1';
 import { Phase2 } from './Phases/Phase2';
 import { Phase3 } from './Phases/Phase3';
 import { ConfirmModal } from './Phases/ConfirmModal';
+import { PromptModal } from './Phases/PromptModal';
 import { Phase4 } from './Phases/Phase4';
+import { ParentWindow } from '@util';
+import { PromptModalTypesEnum } from '@types';
 
 export function Widget() {
   const [phase, setPhase] = useState<number>(1);
   const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [promptContinueAction, setPromptContinueAction] = useState<PromptModalTypesEnum>();
 
   const onConfirm = () => {
     setShowConfirmModal(false);
     setPhase(4);
   };
+  const onUploadResetClick = () => {
+    setPromptContinueAction(PromptModalTypesEnum.UPLOAD_AGAIN);
+  };
+  const onPromptConfirm = () => {
+    setPromptContinueAction(undefined);
+    if (promptContinueAction === PromptModalTypesEnum.CLOSE) closeWidget();
+    else if (promptContinueAction === PromptModalTypesEnum.UPLOAD_AGAIN) setPhase(1);
+  };
+  const onPromptCancel = () => {
+    setPromptContinueAction(undefined);
+  };
+  const onClose = () => {
+    if (phase !== 1) setPromptContinueAction(PromptModalTypesEnum.CLOSE);
+    else closeWidget();
+  };
+  const closeWidget = () => {
+    ParentWindow.Close();
+  };
 
   return (
-    <Container phase={phase}>
+    <Container phase={phase} onClose={onClose}>
       {phase === 1 ? (
         <Phase1 onNextClick={() => setPhase(2)} />
       ) : phase === 2 ? (
-        <Phase2 onNextClick={() => setPhase(3)} onPrevClick={() => setPhase(1)} />
+        <Phase2 onNextClick={() => setPhase(3)} onPrevClick={onUploadResetClick} />
       ) : phase === 3 ? (
         <Phase3 onNextClick={() => setShowConfirmModal(true)} onPrevClick={() => setPhase(2)} />
       ) : phase === 4 ? (
@@ -32,6 +54,12 @@ export function Widget() {
         opened={showConfirmModal}
         wrongDataCount={8}
       />
+      <PromptModal
+        onCancel={onPromptCancel}
+        onConfirm={onPromptConfirm}
+        opened={!!promptContinueAction}
+        action={promptContinueAction}
+      />
     </Container>
   );
 }

apps/widget/src/config/colors.config.ts

@@ -5,7 +5,7 @@ export const colors = {
   lightDeem: '#CCCCCC',
   lightGray: '#F8F8F8',
   black: '#000000',
-  red: '#E40000',
+  red: '#f03e3e',
   danger: '#AB3022',
   lightDanger: '#FDEBEB',
   light: '#F2F9FE',

apps/widget/src/config/texts.config.ts

@@ -49,4 +49,11 @@ export const TEXTS = {
     subTitle: '700 rows have been uploaded successfully, and currently is in process, it will be ready shortly.',
     UPLOAD_AGAIN: 'Upload new File',
   },
+  PROMPT: {
+    title: `Are You sure? You'll lost your progress`,
+    SUBTITLE_CLOSE: 'Your Import is in progress, Clicking Yes will close the widget',
+    SUBTITLE_RESET: 'Your Import is in progress, Clicking Yes will reset your import',
+    YES: 'Yes',
+    NO: 'No',
+  },
 };

apps/widget/src/design-system/Button/Button.tsx

@@ -7,7 +7,7 @@ interface IButtonProps {
   loading?: boolean;
   onClick?: () => void;
   size?: MantineSize;
-  color?: 'blue' | 'red';
+  color?: 'blue' | 'red' | 'gray' | string;
   leftIcon?: ReactNode;
 }
 

apps/widget/src/types/component.types.ts

@@ -10,3 +10,7 @@ export type MessageHandlerDataType =
       type: EventTypesEnum.SHOW_WIDGET;
       value: IShowPayload;
     };
+export enum PromptModalTypesEnum {
+  'CLOSE' = 'CLOSE',
+  'UPLOAD_AGAIN' = 'UPLOAD_AGAIN',
+}

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "clean": "pnpm run prebuild",
     "lint": "nx run-many --target=lint --all",
-    "start:dev": "cross-env TZ=UTC nx run-many --target=start --parallel --projects=@impler/api,@impler/dal,@impler/queue-manager",
+    "start:dev": "cross-env TZ=UTC nx run-many --target=start --parallel --projects=@impler/api,@impler/widget,@impler/embed,@impler/queue-manager",
     "start:widget-dev": "cross-env TZ=UTC nx run-many --target=start --parallel --projects=@impler/widget,@impler/embed",
     "start:dal": "cross-env nx run @impler/dal:start",
     "start:api": "cross-env nx run @impler/api:start",