VKT(Frontend): Confirmation dialog before cancelling enrollment, take…

… updated DialogBox implmentation into use [deploy]
Opetushallitus · Dec 27, 2024 · b3d6f5b · b3d6f5b
1 parent 3732a29
commit b3d6f5b
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 18 deletions.
diff --git a/frontend/packages/vkt/package.json b/frontend/packages/vkt/package.json
@@ -25,6 +25,6 @@
   },
   "dependencies": {
     "reduxjs-toolkit-persist": "^7.2.1",
-    "shared": "npm:@opetushallitus/[email protected].10"
+    "shared": "npm:@opetushallitus/[email protected].11"
   }
 }
diff --git a/frontend/packages/vkt/public/i18n/fi-FI/public.json b/frontend/packages/vkt/public/i18n/fi-FI/public.json
@@ -334,6 +334,17 @@
         }
       },
       "publicEnrollmentContact": {
+        "cancelDialog": {
+          "actions": {
+            "cancelEnrollment": "Peru ja valitse toinen vastaanottaja",
+            "continueEnrollment": "En halua perua"
+          },
+          "description": {
+            "part1": "Haluatko perua tämän yhteydenoton?",
+            "part2": "Jo täyttämäsi tiedot tallentuvat selaimen muistiin. Jos haluat että ne pyyhitään pois, sulje selainikkuna."
+          },
+          "title": "Peru yhteydenotto"
+        },
         "controlButtons": {
           "submit": "Lähetä"
         },

diff --git a/...ages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactControlButtons.tsx b/...ages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactControlButtons.tsx
@@ -25,10 +25,7 @@ import {
   PublicEnrollmentContact,
   PublicEnrollmentContactRequestDetails,
 } from 'interfaces/publicEnrollment';
-import {
-  loadPublicEnrollmentSave,
-  resetPublicEnrollmentContact,
-} from 'redux/reducers/publicEnrollmentContact';
+import { loadPublicEnrollmentSave } from 'redux/reducers/publicEnrollmentContact';
 import { publicEnrollmentContactSelector } from 'redux/selectors/publicEnrollmentContact';
 import { RouteUtils } from 'utils/routes';
 
@@ -57,14 +54,34 @@ export const PublicEnrollmentContactControlButtons = ({
   );
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
+  const { showDialog } = useDialog();
 
   const handleCancelBtnClick = () => {
-    dispatch(resetPublicEnrollmentContact());
-    navigate(AppRoutes.PublicGoodAndSatisfactoryLevelLanding);
+    showDialog({
+      title: t('cancelDialog.title'),
+      content: (
+        <div className="rows gapped">
+          <Text>{t('cancelDialog.description.part1')}</Text>
+          <Text>{t('cancelDialog.description.part2')}</Text>
+        </div>
+      ),
+      severity: Severity.Info,
+      actions: [
+        {
+          title: t('cancelDialog.actions.cancelEnrollment'),
+          variant: Variant.Outlined,
+          action: () =>
+            navigate(AppRoutes.PublicGoodAndSatisfactoryLevelLanding),
+        },
+        {
+          title: t('cancelDialog.actions.continueEnrollment'),
+          variant: Variant.Contained,
+        },
+      ],
+      paperClassName: 'align-items-start',
+    });
   };
 
-  const { showDialog } = useDialog();
-
   useEffect(() => {
     if (submitStatus === APIResponseStatus.Success) {
       navigate(

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -2690,7 +2690,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared":
+"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/[email protected]":
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared"
   languageName: unknown
@@ -2701,7 +2701,7 @@ __metadata:
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.vkt@workspace:packages/vkt"
   dependencies:
     reduxjs-toolkit-persist: "npm:^7.2.1"
-    shared: "npm:@opetushallitus/[email protected].10"
+    shared: "npm:@opetushallitus/[email protected].11"
   languageName: unknown
   linkType: soft
 
@@ -11890,13 +11890,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shared@npm:@opetushallitus/[email protected]":
-  version: 1.11.10
-  resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@npm:1.11.10::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40Opetushallitus%2Fkieli-ja-kaantajatutkinnot.shared%2F1.11.10%2F80621fbbafc123d0cb5d80861674ec557227ba56"
-  checksum: 37b17f5dc92ea93b4c3bd3cbda9bb19468c697cdc25ab1050788485307ceb87ae0a0472c66e21c02c47ae015989e6b2705d6b120d5259152c3f0866d5b84fd77
-  languageName: node
-  linkType: hard
-
 "shared@npm:@opetushallitus/[email protected]":
   version: 1.11.4
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@npm:1.11.4::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40Opetushallitus%2Fkieli-ja-kaantajatutkinnot.shared%2F1.11.4%2Fe764b4b5403ca44fd6300537e31b30d03a371525"