UN-266-react-blocking-notifications-modal

src/locales/en/translation.json

@@ -461,8 +461,14 @@
   "__EXPRESS_LABEL": "Express",
   "__EXPRESS_WIZARD_BACK_BUTTON_LABEL": "Back",
   "__EXPRESS_WIZARD_CONFIRM_BUTTON_LABEL": "Launch",
-  "__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE": "The campaign will be discarded.",
+  "__EXPRESS_WIZARD_CONFIRM_CLOSE_HEADER": "Discard the changes?",
+  "__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE": "Exiting the changes will delete the campaign forever.",
+  "__EXPRESS_WIZARD_CONFIRM_CLOSE_CANCEL_BUTTON_TEXT": "Quit & Delete",
+  "__EXPRESS_WIZARD_CONFIRM_CLOSE_CONTINUE_BUTTON_TEXT": "Continue editing",
+  "__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_HEADER": "Are you sure to delete?",
   "__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE": "If you delete it, you will lose all the informations you have entered.",
+  "__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_BUTTON_DELETE": "Delete",
+  "__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_BUTTON_CONTINUE": "Continue",
   "__EXPRESS_WIZARD_CONFIRM_PLANNING_BUTTON_LABEL": "Plan",
   "__EXPRESS_WIZARD_NEXT_BUTTON_LABEL": "Next",
   "__EXPRESS_WIZARD_STEP_APP_WHERE_OS_ANDROID_LABEL": "Android",

src/locales/it/translation.json

@@ -461,8 +461,14 @@
   "__EXPRESS_LABEL": "Express",
   "__EXPRESS_WIZARD_BACK_BUTTON_LABEL": "Indietro",
   "__EXPRESS_WIZARD_CONFIRM_BUTTON_LABEL": "Lancia",
-  "__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE": "La campagna verrà eliminata per sempre.",
+  "__EXPRESS_WIZARD_CONFIRM_CLOSE_HEADER": "Uscire dalle modifiche?",
+  "__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE": "Uscendo dalle modifiche la campagna verrà eliminata per sempre.",
+  "__EXPRESS_WIZARD_CONFIRM_CLOSE_CANCEL_BUTTON_TEXT": "Esci & Elimina",
+  "__EXPRESS_WIZARD_CONFIRM_CLOSE_CONTINUE_BUTTON_TEXT": "Continua a modificare",
+  "__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_HEADER": "Sei sicuro di eliminare?",
   "__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE": "Se lo elimini, perderai tutte le informazioni inserite.",
+  "__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_BUTTON_DELETE": "Eliminare",
+  "__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_BUTTON_CONTINUE": "Continuare",
   "__EXPRESS_WIZARD_CONFIRM_PLANNING_BUTTON_LABEL": "Pianifica",
   "__EXPRESS_WIZARD_NEXT_BUTTON_LABEL": "Avanti",
   "__EXPRESS_WIZARD_STEP_APP_WHERE_OS_ANDROID_LABEL": "Android",

src/pages/ExpressWizard/ActionModals/DiscardChangesModal.tsx

@@ -0,0 +1,54 @@
+import {
+  Modal,
+  FooterItem,
+  Button,
+  ModalClose,
+} from '@appquality/unguess-design-system';
+import styled from 'styled-components';
+import { ReactComponent as AlertIcon } from 'src/assets/icons/alert-icon.svg';
+import { useTranslation } from 'react-i18next';
+import { WaterButton } from 'src/common/components/waterButton';
+
+const DangerHeader = styled(Modal.Header)`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-left: ${({ theme }) => theme.space.xs};
+  padding-left: ${({ theme }) => theme.space.xs};
+  gap: ${({ theme }) => theme.space.xs};
+  color: ${({ theme }) => theme.colors.dangerHue};
+`;
+
+const DiscardChangesModal = ({
+  handleCancel,
+  onClose,
+}: {
+  handleCancel: () => void;
+  onClose?: () => void;
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Modal onClose={handleCancel}>
+      <DangerHeader>
+        <AlertIcon />
+        {t('__EXPRESS_WIZARD_CONFIRM_CLOSE_HEADER')}
+      </DangerHeader>
+      <Modal.Body>{t('__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE')}</Modal.Body>
+      <Modal.Footer>
+        <FooterItem>
+          <Button isDanger isPill isBasic onClick={onClose}>
+            {t('__EXPRESS_WIZARD_CONFIRM_CLOSE_CANCEL_BUTTON_TEXT')}
+          </Button>
+        </FooterItem>
+        <FooterItem>
+          <WaterButton isPrimary isPill onClick={handleCancel}>
+            {t('__EXPRESS_WIZARD_CONFIRM_CLOSE_CONTINUE_BUTTON_TEXT')}
+          </WaterButton>
+        </FooterItem>
+      </Modal.Footer>
+      <ModalClose aria-label="Close modal" />
+    </Modal>
+  );
+};
+
+export default DiscardChangesModal;

src/pages/ExpressWizard/ActionModals/ModalDeleteItem.tsx

@@ -0,0 +1,54 @@
+import {
+  Modal,
+  FooterItem,
+  Button,
+  ModalClose,
+} from '@appquality/unguess-design-system';
+import styled from 'styled-components';
+import { ReactComponent as AlertIcon } from 'src/assets/icons/alert-icon.svg';
+import { useTranslation } from 'react-i18next';
+import { WaterButton } from 'src/common/components/waterButton';
+
+const DangerHeader = styled(Modal.Header)`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-left: ${({ theme }) => theme.space.xs};
+  padding-left: ${({ theme }) => theme.space.xs};
+  gap: ${({ theme }) => theme.space.xs};
+  color: ${({ theme }) => theme.colors.dangerHue};
+`;
+
+const ModalDeleteItem = ({
+  handleCancel,
+  onClose,
+}: {
+  handleCancel: () => void;
+  onClose?: () => void;
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Modal onClose={handleCancel}>
+      <DangerHeader>
+        <AlertIcon />
+        {t('__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_HEADER')}
+      </DangerHeader>
+      <Modal.Body>{t('__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE')}</Modal.Body>
+      <Modal.Footer>
+        <FooterItem>
+          <Button isDanger isPill isBasic onClick={onClose}>
+            {t('__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_BUTTON_DELETE')}
+          </Button>
+        </FooterItem>
+        <FooterItem>
+          <WaterButton isPrimary isPill onClick={handleCancel}>
+            {t('__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_BUTTON_CONTINUE')}
+          </WaterButton>
+        </FooterItem>
+      </Modal.Footer>
+      <ModalClose aria-label="Close modal" />
+    </Modal>
+  );
+};
+
+export default ModalDeleteItem;

src/pages/ExpressWizard/index.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   Col,
   ContainerCard,
@@ -15,7 +16,6 @@ import {
   FormikProps,
   setNestedObjectValues,
 } from 'formik';
-import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppDispatch, useAppSelector } from 'src/app/hooks';
 import {
@@ -53,6 +53,7 @@ import { extractStrapiData } from 'src/common/getStrapiData';
 import { useGeti18nExpressTypesByIdQuery } from 'src/features/backoffice/strapi';
 import { useSendGTMevent } from 'src/hooks/useGTMevent';
 import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
+import DiscardChangesModal from './ActionModals/DiscardChangesModal';
 import { ThankYouStep } from './steps/thankYou';
 import { WizardHeader } from './wizardHeader';
 import { WizardModel } from './wizardModel';
@@ -347,116 +348,126 @@ export const ExpressWizardContainer = () => {
     }
   };
 
-  const closeExpressWizard = () => {
-    // eslint-disable-next-line no-alert
-    if (window.confirm(t('__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE'))) {
-      dispatch(closeDrawer());
-      dispatch(closeWizard());
-      dispatch(resetWizard());
-      setStep(0);
-      setThankyou(false);
-      if (formRef.current) {
-        formRef.current?.resetForm();
-      }
-      toggleChat(true);
-    }
-  };
+  const [showDiscardChangesModal, setShowDiscardChangesModal] = useState(false);
+  const closeExpressWizard = () => setShowDiscardChangesModal(true);
 
   return isWizardOpen ? (
-    <StyledModal onClose={closeExpressWizard} focusOnMount={false}>
-      {!isThankyou ? (
-        <Formik
-          innerRef={formRef}
-          initialValues={initialValues}
-          onSubmit={handleSubmit}
-          validateOnChange={false}
-          validateOnBlur={false}
-          validationSchema={getValidationSchema(activeStep, steps)}
-        >
-          {(formProps: FormikProps<WizardModel>) => (
-            <>
-              <StyledModal.Header
-                style={{ backgroundColor: globalTheme.palette.white }}
-              >
-                <LayoutWrapper>
-                  <ModalHeaderContent>
-                    <WizardHeader {...formProps} onClose={closeExpressWizard} />
-                    <StyledModal.Close
-                      id="express-wizard-close-button"
-                      aria-label="Close modal"
-                    />
-                  </ModalHeaderContent>
-                </LayoutWrapper>
-              </StyledModal.Header>
-              <ModalFullScreen.Body>
-                <LayoutWrapper>
-                  <Form onSubmit={formProps.handleSubmit}>
+    <>
+      <StyledModal onClose={closeExpressWizard} focusOnMount={false}>
+        {!isThankyou ? (
+          <Formik
+            innerRef={formRef}
+            initialValues={initialValues}
+            onSubmit={handleSubmit}
+            validateOnChange={false}
+            validateOnBlur={false}
+            validationSchema={getValidationSchema(activeStep, steps)}
+          >
+            {(formProps: FormikProps<WizardModel>) => (
+              <>
+                <StyledModal.Header
+                  style={{ backgroundColor: globalTheme.palette.white }}
+                >
+                  <LayoutWrapper>
+                    <ModalHeaderContent>
+                      <WizardHeader
+                        {...formProps}
+                        onClose={closeExpressWizard}
+                      />
+                      <StyledModal.Close
+                        id="express-wizard-close-button"
+                        aria-label="Close modal"
+                      />
+                    </ModalHeaderContent>
+                  </LayoutWrapper>
+                </StyledModal.Header>
+                <ModalFullScreen.Body>
+                  <LayoutWrapper>
+                    <Form onSubmit={formProps.handleSubmit}>
+                      <Grid>
+                        <Row>
+                          <Col xs={12} lg={3}>
+                            <StyledContainer>
+                              <Stepper
+                                activeIndex={activeStep}
+                                accordionTitle={stepperTitle}
+                              >
+                                {steps.map((item) => (
+                                  <Stepper.Step key={item.label}>
+                                    <Stepper.Label>{item.label}</Stepper.Label>
+                                    <Stepper.Content>
+                                      {item.content}
+                                    </Stepper.Content>
+                                  </Stepper.Step>
+                                ))}
+                              </Stepper>
+                            </StyledContainer>
+                          </Col>
+                          <Col xs={12} lg={9} xl={7}>
+                            {steps[activeStep as number].form(formProps)}
+                          </Col>
+                        </Row>
+                      </Grid>
+                    </Form>
+                  </LayoutWrapper>
+                </ModalFullScreen.Body>
+                <ModalFooter>
+                  <LayoutWrapper>
                     <Grid>
                       <Row>
-                        <Col xs={12} lg={3}>
-                          <StyledContainer>
-                            <Stepper
-                              activeIndex={activeStep}
-                              accordionTitle={stepperTitle}
-                            >
-                              {steps.map((item) => (
-                                <Stepper.Step key={item.label}>
-                                  <Stepper.Label>{item.label}</Stepper.Label>
-                                  <Stepper.Content>
-                                    {item.content}
-                                  </Stepper.Content>
-                                </Stepper.Step>
-                              ))}
-                            </Stepper>
-                          </StyledContainer>
-                        </Col>
-                        <Col xs={12} lg={9} xl={7}>
-                          {steps[activeStep as number].form(formProps)}
+                        <Col
+                          xs={12}
+                          lg={9}
+                          xl={7}
+                          offsetLg={3}
+                          style={{ marginBottom: 0 }}
+                        >
+                          <PullRight>
+                            <StyledFooterItem>
+                              {formProps.status &&
+                                formProps.status.submitError && (
+                                  <Message validation="error">
+                                    {t('__EXPRESS_WIZARD_SUBMIT_ERROR')}
+                                  </Message>
+                                )}
+                            </StyledFooterItem>
+                            <StyledFooterItem>
+                              {steps[activeStep as number].buttons({
+                                formikArgs: formProps,
+                                onBackClick: onBack,
+                                onNextClick: onNext,
+                              })}
+                            </StyledFooterItem>
+                          </PullRight>
                         </Col>
                       </Row>
                     </Grid>
-                  </Form>
-                </LayoutWrapper>
-              </ModalFullScreen.Body>
-              <ModalFooter>
-                <LayoutWrapper>
-                  <Grid>
-                    <Row>
-                      <Col
-                        xs={12}
-                        lg={9}
-                        xl={7}
-                        offsetLg={3}
-                        style={{ marginBottom: 0 }}
-                      >
-                        <PullRight>
-                          <StyledFooterItem>
-                            {formProps.status &&
-                              formProps.status.submitError && (
-                                <Message validation="error">
-                                  {t('__EXPRESS_WIZARD_SUBMIT_ERROR')}
-                                </Message>
-                              )}
-                          </StyledFooterItem>
-                          <StyledFooterItem>
-                            {steps[activeStep as number].buttons({
-                              formikArgs: formProps,
-                              onBackClick: onBack,
-                              onNextClick: onNext,
-                            })}
-                          </StyledFooterItem>
-                        </PullRight>
-                      </Col>
-                    </Row>
-                  </Grid>
-                </LayoutWrapper>
-              </ModalFooter>
-            </>
-          )}
-        </Formik>
-      ) : (
-        <ThankYouStep values={formValues} />
+                  </LayoutWrapper>
+                </ModalFooter>
+              </>
+            )}
+          </Formik>
+        ) : (
+          <ThankYouStep values={formValues} />
+        )}
+      </StyledModal>
+      {showDiscardChangesModal && (
+        <DiscardChangesModal
+          handleCancel={() => setShowDiscardChangesModal(false)}
+          onClose={() => {
+            setShowDiscardChangesModal(false);
+            dispatch(closeDrawer());
+            dispatch(closeWizard());
+            dispatch(resetWizard());
+            setStep(0);
+            setThankyou(false);
+            if (formRef.current) {
+              formRef.current?.resetForm();
+            }
+            toggleChat(true);
+          }}
+        />
       )}
-    </StyledModal>
+    </>
   ) : null;
 };