Merge branch 'MWPW-163947-confirmation-dialog' of github.com:saurabhs…

…ircar11/milo into MWPW-163947-confirmation-dialog

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

@@ -10,6 +10,7 @@ function ConfirmationModal({ setApiError, projectCreatedModal }) {
     const error = await updateDraftProject(true);
     if (error) {
       setApiError(error);
+      projectCreatedModal('error');
     } else {
       projectCreatedModal();
     }

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

@@ -10,10 +10,11 @@ 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);
   };
 

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/locui-create.css

@@ -375,24 +375,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 {
@@ -672,15 +679,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;