[Loc] MWPW-163947: Added confirmation modal

libs/blocks/locui-create/input-actions/confirmationModal.js

@@ -0,0 +1,35 @@
+import { html, render } from '../../../deps/htm-preact.js';
+import { updateDraftProject } from '../store.js';
+
+function ConfirmationModal({ setApiError, projectCreatedModal }) {
+  const closeConfirmationModal = () => {
+    document.querySelector('.dialog-modal').dispatchEvent(new Event('closeConfirmationModal'));
+  };
+  const onConfirm = async () => {
+    closeConfirmationModal();
+    const error = await updateDraftProject(true);
+    if (error) {
+      setApiError(error);
+      projectCreatedModal('error');
+    } else {
+      projectCreatedModal();
+    }
+  };
+
+  return html`
+  <div class="locui-project-confirmation-modal">
+    <div class="confirmation-header">
+      <strong>Are you sure you want to proceed?</strong>
+    </div>
+    <div class="confirmation-buttons">
+     <button class="s2-btn accent" onClick=${onConfirm}>Yes</button>
+     <button class="s2-btn secondary" onClick=${closeConfirmationModal}>No</button>
+    </div>
+  </div>
+  `;
+}
+
+export default function renderModal(el, setApiError, projectCreatedModal) {
+  render(html`<${ConfirmationModal} setApiError=${setApiError} projectCreatedModal=${projectCreatedModal} />`, el);
+  return el;
+}

libs/blocks/locui-create/input-actions/index.js

@@ -1,5 +1,6 @@
 import { getModal } from '../../modal/modal.js';
 import Modal from './modal.js';
+import ConfirmationModal from './confirmationModal.js';
 import { createTag } from '../../../utils/utils.js';
 import { useState, useEffect } from '../../../deps/htm-preact.js';
 import { project } from '../store.js';
@@ -9,10 +10,18 @@ export default function useInputActions() {
   const [isFormValid, setIsFormValid] = useState(false);
   const [apiError, setApiError] = useState('');
 
-  const projectCreatedModal = () => {
+  const projectCreatedModal = (type) => {
     const div = createTag('div');
-    const content = Modal(div);
-    const modalOpts = { content };
+    const content = Modal(div, type);
+    const modalOpts = { id: 'projectCreate-modal', content, closeEvent: 'closeModal' };
+
+    return getModal(null, modalOpts);
+  };
+
+  const projectConfirmationModal = () => {
+    const div = createTag('div');
+    const content = ConfirmationModal(div, setApiError, projectCreatedModal);
+    const modalOpts = { id: 'confirmation-modal', content, closeEvent: 'closeConfirmationModal' };
     return getModal(null, modalOpts);
   };
 
@@ -50,5 +59,6 @@ export default function useInputActions() {
     projectCreatedModal,
     apiError,
     setApiError,
+    projectConfirmationModal,
   };
 }

libs/blocks/locui-create/input-actions/modal.js

@@ -1,21 +1,48 @@
 import { html, render } from '../../../deps/htm-preact.js';
 import { project, projectInfo } from '../store.js';
 
-function Modal() {
+function Modal({ type }) {
+  const closeModal = () => {
+    document.querySelector('.dialog-modal').dispatchEvent(new Event('closeModal'));
+  };
+
   return html`
-  <div class="locui-project-created-modal">
-    <div class="modal-header">
-      <a class="check-mark-logo">tick</a>
-      <strong>Project "${project.value.name || 'n/a'}" Successfully Created</strong>
-    </div>
-    <div class="create-project-view">
-    ${projectInfo.value.projectLink && html`<a class="s2-btn accent" href="${projectInfo.value.projectLink}" target="_blank" rel="noreferrer noopener">View</a>`}
+    <div class="locui-project-created-modal">
+      <div class="modal-header">
+        ${type === 'error' ? html`
+              <a class="alert-icon">error</a>
+              <strong>Project "${project.value.name || 'n/a'}" Creation Failed!</strong>
+            ` : html`
+              <a class="check-mark-logo">tick</a>
+              <strong>Project "${project.value.name || 'n/a'}" Successfully Created</strong>
+            `}
+      </div>
+      <div class="create-project-view">
+        ${type === 'success' ? projectInfo.value.projectLink
+          && html`
+              <a
+                class="s2-btn accent"
+                href="${projectInfo.value.projectLink}"
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                View
+              </a>
+            ` : html`
+              <a
+                class="s2-btn accent"
+                href="#"
+                onclick=${(e) => { e.preventDefault(); closeModal(); }}
+              >
+                Back
+              </a>
+            `}
+      </div>
     </div>
-  </div>
   `;
 }
 
-export default function renderModal(el) {
-  render(html`<${Modal} />`, el);
+export default function renderModal(el, type = 'success') {
+  render(html`<${Modal} type=${type} />`, el);
   return el;
 }

libs/blocks/locui-create/input-actions/view.js

@@ -1,7 +1,7 @@
 import { html } from '../../../deps/htm-preact.js';
 import StepControls from '../components/stepControls.js';
 import useInputActions from './index.js';
-import { prevStep, project, updateDraftProject } from '../store.js';
+import { prevStep, project } from '../store.js';
 import { PROJECT_TYPES, PROJECT_TYPE_LABELS } from '../utils/constant.js';
 import Toast from '../components/toast.js';
 
@@ -87,17 +87,14 @@ export default function InputActionsView() {
     isFormValid,
     handleActionSelect,
     handleWorkflowSelect,
-    projectCreatedModal,
     apiError,
+    projectConfirmationModal,
     setApiError,
   } = useInputActions();
 
   const handleNext = async () => {
     if (isFormValid) {
-      const error = await updateDraftProject(true);
-      if (error) {
-        setApiError(error);
-      } else { projectCreatedModal(); }
+      projectConfirmationModal();
     }
   };
 

libs/blocks/locui-create/input-urls/view.js

@@ -264,6 +264,7 @@ export default function InputUrls() {
                   <option value="skip">Skip</option>
                   <option value="merge">Merge</option>
                   <option value="overwrite">Overwrite</option>
+                  <option value="custom-merge">Custom Merge</option>
                 </select>
                 ${errors.editBehavior
                 && html`<div class="form-field-error">

libs/blocks/locui-create/locui-create.css

@@ -376,24 +376,31 @@ body {
   align-items: center;
   justify-content: center;
   gap: 10px;
-  width: 80%;
 }
 
 .modal-header strong {
   font-size: 16px;
   color: #000;
   text-align: left;
-  flex: 0 0 90%;
 }
 
-.check-mark-logo {
-  background: url('./img/check-mark.svg');
+.check-mark-logo, .alert-icon {
   text-indent: -1000px;
-  width: 20px;
+  min-width: 20px;
   height: 20px;
+  display: inline-block;
+}
+
+.check-mark-logo {
+  background: url('./img/check-mark.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.alert-icon {
+  background: url('./img/alert-icon.svg');
   background-size: contain;
   background-repeat: no-repeat;
-  display: inline-block;
 }
 
 .locui-header-title {
@@ -674,15 +681,20 @@ body {
 }
 
 .locui-project-created-modal {
-  width: 400px;
-  padding: 30px 0px;
+  width: 450px;
+  padding: 30px 10px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
 }
 
+.locui-project-created-modal .create-project-view {
+  align-self: flex-end;
+}
+
+
 .locui-project-created-modal .create-project-view a {
   width: 70px;
   margin-top: 20px;
@@ -875,3 +887,31 @@ body {
 .pl-14 {
   padding-left: 14px;
 }
+
+/* Confirmation Modal */
+.locui-project-confirmation-modal {
+  width: 400px;
+  padding: 30px 0;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.locui-project-confirmation-modal .confirmation-header {
+  width: 80%;
+  display: flex;
+  justify-content: end;
+}
+
+.locui-project-confirmation-modal .confirmation-buttons {
+  width: 80%;
+  display: flex;
+  justify-content: end;
+  gap: 1rem;
+}
+
+.locui-project-confirmation-modal .confirmation-buttons button {
+  width: 70px;
+}
+

libs/blocks/locui-create/store.js

@@ -62,7 +62,7 @@
     userToken = accessToken.value;
     authenticated.value = true;
   } catch {
     console.error('Sharepoint login failed. Unable to get User-Token!');
     authenticated.value = false;
   }
   loading.value = false;
@@ -96,7 +96,7 @@
     locales.value = processedLocales;
     localeRegion.value = processedLocaleRegion;
   } catch (error) {
     console.error('Error during fetchLocaleDetails:', error.message);
     throw error;
   }
 }
@@ -200,7 +200,7 @@
     const resJson = await response.json();
     if (response.ok) {
       setProject({
-        type: resJson.projectType === 'rollout' ? 'rollout' : 'translation',
+        type: resJson.projectType === 'rollout' ? 'rollout' : 'localization',
         name: resJson.projectName,
         htmlFlow: resJson.settings?.useHtmlFlow,
         editBehavior: resJson.settings?.regionalEditBehaviour,