Skip to content

Commit 869f85a

Browse files
marcbonmarcbon
authored
Merge pull request #554 from AppQuality/UN-266-react-blocking-notifications-modal
UN-266-react-blocking-notifications-modal
2 parents 3bdc5e9 + a3a1c48 commit 869f85a

File tree

9 files changed

+365
-208
lines changed

9 files changed

+365
-208
lines changed

‎src/assets/icons/alert-icon.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/locales/en/translation.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -461,8 +461,14 @@
461461
"__EXPRESS_LABEL": "Express",
462462
"__EXPRESS_WIZARD_BACK_BUTTON_LABEL": "Back",
463463
"__EXPRESS_WIZARD_CONFIRM_BUTTON_LABEL": "Launch",
464-
"__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE": "The campaign will be discarded.",
464+
"__EXPRESS_WIZARD_CONFIRM_CLOSE_HEADER": "Discard the changes?",
465+
"__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE": "Exiting the changes will delete the campaign forever.",
466+
"__EXPRESS_WIZARD_CONFIRM_CLOSE_CANCEL_BUTTON_TEXT": "Quit & Delete",
467+
"__EXPRESS_WIZARD_CONFIRM_CLOSE_CONTINUE_BUTTON_TEXT": "Continue editing",
468+
"__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_HEADER": "Are you sure to delete?",
465469
"__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE": "If you delete it, you will lose all the informations you have entered.",
470+
"__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_BUTTON_DELETE": "Delete",
471+
"__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_BUTTON_CONTINUE": "Continue",
466472
"__EXPRESS_WIZARD_CONFIRM_PLANNING_BUTTON_LABEL": "Plan",
467473
"__EXPRESS_WIZARD_NEXT_BUTTON_LABEL": "Next",
468474
"__EXPRESS_WIZARD_STEP_APP_WHERE_OS_ANDROID_LABEL": "Android",

‎src/locales/it/translation.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -461,8 +461,14 @@
461461
"__EXPRESS_LABEL": "Express",
462462
"__EXPRESS_WIZARD_BACK_BUTTON_LABEL": "Indietro",
463463
"__EXPRESS_WIZARD_CONFIRM_BUTTON_LABEL": "Lancia",
464-
"__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE": "La campagna verrà eliminata per sempre.",
464+
"__EXPRESS_WIZARD_CONFIRM_CLOSE_HEADER": "Uscire dalle modifiche?",
465+
"__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE": "Uscendo dalle modifiche la campagna verrà eliminata per sempre.",
466+
"__EXPRESS_WIZARD_CONFIRM_CLOSE_CANCEL_BUTTON_TEXT": "Esci & Elimina",
467+
"__EXPRESS_WIZARD_CONFIRM_CLOSE_CONTINUE_BUTTON_TEXT": "Continua a modificare",
468+
"__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_HEADER": "Sei sicuro di eliminare?",
465469
"__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE": "Se lo elimini, perderai tutte le informazioni inserite.",
470+
"__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_BUTTON_DELETE": "Eliminare",
471+
"__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_BUTTON_CONTINUE": "Continuare",
466472
"__EXPRESS_WIZARD_CONFIRM_PLANNING_BUTTON_LABEL": "Pianifica",
467473
"__EXPRESS_WIZARD_NEXT_BUTTON_LABEL": "Avanti",
468474
"__EXPRESS_WIZARD_STEP_APP_WHERE_OS_ANDROID_LABEL": "Android",

‎src/pages/ExpressWizard/ActionModals/DiscardChangesModal.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import {
2+
Modal,
3+
FooterItem,
4+
Button,
5+
ModalClose,
6+
} from '@appquality/unguess-design-system';
7+
import styled from 'styled-components';
8+
import { ReactComponent as AlertIcon } from 'src/assets/icons/alert-icon.svg';
9+
import { useTranslation } from 'react-i18next';
10+
import { WaterButton } from 'src/common/components/waterButton';
11+
12+
const DangerHeader = styled(Modal.Header)`
13+
display: flex;
14+
justify-content: flex-start;
15+
align-items: center;
16+
margin-left: ${({ theme }) => theme.space.xs};
17+
padding-left: ${({ theme }) => theme.space.xs};
18+
gap: ${({ theme }) => theme.space.xs};
19+
color: ${({ theme }) => theme.colors.dangerHue};
20+
`;
21+
22+
const DiscardChangesModal = ({
23+
handleCancel,
24+
onClose,
25+
}: {
26+
handleCancel: () => void;
27+
onClose?: () => void;
28+
}) => {
29+
const { t } = useTranslation();
30+
return (
31+
<Modal onClose={handleCancel}>
32+
<DangerHeader>
33+
<AlertIcon />
34+
{t('__EXPRESS_WIZARD_CONFIRM_CLOSE_HEADER')}
35+
</DangerHeader>
36+
<Modal.Body>{t('__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE')}</Modal.Body>
37+
<Modal.Footer>
38+
<FooterItem>
39+
<Button isDanger isPill isBasic onClick={onClose}>
40+
{t('__EXPRESS_WIZARD_CONFIRM_CLOSE_CANCEL_BUTTON_TEXT')}
41+
</Button>
42+
</FooterItem>
43+
<FooterItem>
44+
<WaterButton isPrimary isPill onClick={handleCancel}>
45+
{t('__EXPRESS_WIZARD_CONFIRM_CLOSE_CONTINUE_BUTTON_TEXT')}
46+
</WaterButton>
47+
</FooterItem>
48+
</Modal.Footer>
49+
<ModalClose aria-label="Close modal" />
50+
</Modal>
51+
);
52+
};
53+
54+
export default DiscardChangesModal;

‎src/pages/ExpressWizard/ActionModals/ModalDeleteItem.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import {
2+
Modal,
3+
FooterItem,
4+
Button,
5+
ModalClose,
6+
} from '@appquality/unguess-design-system';
7+
import styled from 'styled-components';
8+
import { ReactComponent as AlertIcon } from 'src/assets/icons/alert-icon.svg';
9+
import { useTranslation } from 'react-i18next';
10+
import { WaterButton } from 'src/common/components/waterButton';
11+
12+
const DangerHeader = styled(Modal.Header)`
13+
display: flex;
14+
justify-content: flex-start;
15+
align-items: center;
16+
margin-left: ${({ theme }) => theme.space.xs};
17+
padding-left: ${({ theme }) => theme.space.xs};
18+
gap: ${({ theme }) => theme.space.xs};
19+
color: ${({ theme }) => theme.colors.dangerHue};
20+
`;
21+
22+
const ModalDeleteItem = ({
23+
handleCancel,
24+
onClose,
25+
}: {
26+
handleCancel: () => void;
27+
onClose?: () => void;
28+
}) => {
29+
const { t } = useTranslation();
30+
return (
31+
<Modal onClose={handleCancel}>
32+
<DangerHeader>
33+
<AlertIcon />
34+
{t('__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_HEADER')}
35+
</DangerHeader>
36+
<Modal.Body>{t('__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE')}</Modal.Body>
37+
<Modal.Footer>
38+
<FooterItem>
39+
<Button isDanger isPill isBasic onClick={onClose}>
40+
{t('__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_BUTTON_DELETE')}
41+
</Button>
42+
</FooterItem>
43+
<FooterItem>
44+
<WaterButton isPrimary isPill onClick={handleCancel}>
45+
{t('__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE_BUTTON_CONTINUE')}
46+
</WaterButton>
47+
</FooterItem>
48+
</Modal.Footer>
49+
<ModalClose aria-label="Close modal" />
50+
</Modal>
51+
);
52+
};
53+
54+
export default ModalDeleteItem;

‎src/pages/ExpressWizard/index.tsx‎

Lines changed: 115 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useEffect, useRef, useState } from 'react';
12
import {
23
Col,
34
ContainerCard,
@@ -15,7 +16,6 @@ import {
1516
FormikProps,
1617
setNestedObjectValues,
1718
} from 'formik';
18-
import { useEffect, useRef, useState } from 'react';
1919
import { useTranslation } from 'react-i18next';
2020
import { useAppDispatch, useAppSelector } from 'src/app/hooks';
2121
import {
@@ -53,6 +53,7 @@ import { extractStrapiData } from 'src/common/getStrapiData';
5353
import { useGeti18nExpressTypesByIdQuery } from 'src/features/backoffice/strapi';
5454
import { useSendGTMevent } from 'src/hooks/useGTMevent';
5555
import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
56+
import DiscardChangesModal from './ActionModals/DiscardChangesModal';
5657
import { ThankYouStep } from './steps/thankYou';
5758
import { WizardHeader } from './wizardHeader';
5859
import { WizardModel } from './wizardModel';
@@ -347,116 +348,126 @@ export const ExpressWizardContainer = () => {
347348
}
348349
};
349350

350-
const closeExpressWizard = () => {
351-
// eslint-disable-next-line no-alert
352-
if (window.confirm(t('__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE'))) {
353-
dispatch(closeDrawer());
354-
dispatch(closeWizard());
355-
dispatch(resetWizard());
356-
setStep(0);
357-
setThankyou(false);
358-
if (formRef.current) {
359-
formRef.current?.resetForm();
360-
}
361-
toggleChat(true);
362-
}
363-
};
351+
const [showDiscardChangesModal, setShowDiscardChangesModal] = useState(false);
352+
const closeExpressWizard = () => setShowDiscardChangesModal(true);
364353

365354
return isWizardOpen ? (
366-
<StyledModal onClose={closeExpressWizard} focusOnMount={false}>
367-
{!isThankyou ? (
368-
<Formik
369-
innerRef={formRef}
370-
initialValues={initialValues}
371-
onSubmit={handleSubmit}
372-
validateOnChange={false}
373-
validateOnBlur={false}
374-
validationSchema={getValidationSchema(activeStep, steps)}
375-
>
376-
{(formProps: FormikProps<WizardModel>) => (
377-
<>
378-
<StyledModal.Header
379-
style={{ backgroundColor: globalTheme.palette.white }}
380-
>
381-
<LayoutWrapper>
382-
<ModalHeaderContent>
383-
<WizardHeader {...formProps} onClose={closeExpressWizard} />
384-
<StyledModal.Close
385-
id="express-wizard-close-button"
386-
aria-label="Close modal"
387-
/>
388-
</ModalHeaderContent>
389-
</LayoutWrapper>
390-
</StyledModal.Header>
391-
<ModalFullScreen.Body>
392-
<LayoutWrapper>
393-
<Form onSubmit={formProps.handleSubmit}>
355+
<>
356+
<StyledModal onClose={closeExpressWizard} focusOnMount={false}>
357+
{!isThankyou ? (
358+
<Formik
359+
innerRef={formRef}
360+
initialValues={initialValues}
361+
onSubmit={handleSubmit}
362+
validateOnChange={false}
363+
validateOnBlur={false}
364+
validationSchema={getValidationSchema(activeStep, steps)}
365+
>
366+
{(formProps: FormikProps<WizardModel>) => (
367+
<>
368+
<StyledModal.Header
369+
style={{ backgroundColor: globalTheme.palette.white }}
370+
>
371+
<LayoutWrapper>
372+
<ModalHeaderContent>
373+
<WizardHeader
374+
{...formProps}
375+
onClose={closeExpressWizard}
376+
/>
377+
<StyledModal.Close
378+
id="express-wizard-close-button"
379+
aria-label="Close modal"
380+
/>
381+
</ModalHeaderContent>
382+
</LayoutWrapper>
383+
</StyledModal.Header>
384+
<ModalFullScreen.Body>
385+
<LayoutWrapper>
386+
<Form onSubmit={formProps.handleSubmit}>
387+
<Grid>
388+
<Row>
389+
<Col xs={12} lg={3}>
390+
<StyledContainer>
391+
<Stepper
392+
activeIndex={activeStep}
393+
accordionTitle={stepperTitle}
394+
>
395+
{steps.map((item) => (
396+
<Stepper.Step key={item.label}>
397+
<Stepper.Label>{item.label}</Stepper.Label>
398+
<Stepper.Content>
399+
{item.content}
400+
</Stepper.Content>
401+
</Stepper.Step>
402+
))}
403+
</Stepper>
404+
</StyledContainer>
405+
</Col>
406+
<Col xs={12} lg={9} xl={7}>
407+
{steps[activeStep as number].form(formProps)}
408+
</Col>
409+
</Row>
410+
</Grid>
411+
</Form>
412+
</LayoutWrapper>
413+
</ModalFullScreen.Body>
414+
<ModalFooter>
415+
<LayoutWrapper>
394416
<Grid>
395417
<Row>
396-
<Col xs={12} lg={3}>
397-
<StyledContainer>
398-
<Stepper
399-
activeIndex={activeStep}
400-
accordionTitle={stepperTitle}
401-
>
402-
{steps.map((item) => (
403-
<Stepper.Step key={item.label}>
404-
<Stepper.Label>{item.label}</Stepper.Label>
405-
<Stepper.Content>
406-
{item.content}
407-
</Stepper.Content>
408-
</Stepper.Step>
409-
))}
410-
</Stepper>
411-
</StyledContainer>
412-
</Col>
413-
<Col xs={12} lg={9} xl={7}>
414-
{steps[activeStep as number].form(formProps)}
418+
<Col
419+
xs={12}
420+
lg={9}
421+
xl={7}
422+
offsetLg={3}
423+
style={{ marginBottom: 0 }}
424+
>
425+
<PullRight>
426+
<StyledFooterItem>
427+
{formProps.status &&
428+
formProps.status.submitError && (
429+
<Message validation="error">
430+
{t('__EXPRESS_WIZARD_SUBMIT_ERROR')}
431+
</Message>
432+
)}
433+
</StyledFooterItem>
434+
<StyledFooterItem>
435+
{steps[activeStep as number].buttons({
436+
formikArgs: formProps,
437+
onBackClick: onBack,
438+
onNextClick: onNext,
439+
})}
440+
</StyledFooterItem>
441+
</PullRight>
415442
</Col>
416443
</Row>
417444
</Grid>
418-
</Form>
419-
</LayoutWrapper>
420-
</ModalFullScreen.Body>
421-
<ModalFooter>
422-
<LayoutWrapper>
423-
<Grid>
424-
<Row>
425-
<Col
426-
xs={12}
427-
lg={9}
428-
xl={7}
429-
offsetLg={3}
430-
style={{ marginBottom: 0 }}
431-
>
432-
<PullRight>
433-
<StyledFooterItem>
434-
{formProps.status &&
435-
formProps.status.submitError && (
436-
<Message validation="error">
437-
{t('__EXPRESS_WIZARD_SUBMIT_ERROR')}
438-
</Message>
439-
)}
440-
</StyledFooterItem>
441-
<StyledFooterItem>
442-
{steps[activeStep as number].buttons({
443-
formikArgs: formProps,
444-
onBackClick: onBack,
445-
onNextClick: onNext,
446-
})}
447-
</StyledFooterItem>
448-
</PullRight>
449-
</Col>
450-
</Row>
451-
</Grid>
452-
</LayoutWrapper>
453-
</ModalFooter>
454-
</>
455-
)}
456-
</Formik>
457-
) : (
458-
<ThankYouStep values={formValues} />
445+
</LayoutWrapper>
446+
</ModalFooter>
447+
</>
448+
)}
449+
</Formik>
450+
) : (
451+
<ThankYouStep values={formValues} />
452+
)}
453+
</StyledModal>
454+
{showDiscardChangesModal && (
455+
<DiscardChangesModal
456+
handleCancel={() => setShowDiscardChangesModal(false)}
457+
onClose={() => {
458+
setShowDiscardChangesModal(false);
459+
dispatch(closeDrawer());
460+
dispatch(closeWizard());
461+
dispatch(resetWizard());
462+
setStep(0);
463+
setThankyou(false);
464+
if (formRef.current) {
465+
formRef.current?.resetForm();
466+
}
467+
toggleChat(true);
468+
}}
469+
/>
459470
)}
460-
</StyledModal>
471+
</>
461472
) : null;
462473
};

0 commit comments

Comments
 (0)