diff --git a/libs/blocks/locui-create/img/alert-icon.svg b/libs/blocks/locui-create/img/alert-icon.svg new file mode 100644 index 0000000000..8e7093a167 --- /dev/null +++ b/libs/blocks/locui-create/img/alert-icon.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/libs/blocks/locui-create/input-actions/confirmationModal.js b/libs/blocks/locui-create/input-actions/confirmationModal.js new file mode 100644 index 0000000000..0a252c8734 --- /dev/null +++ b/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` +
+
+ Are you sure you want to proceed? +
+
+ + +
+
+ `; +} + +export default function renderModal(el, setApiError, projectCreatedModal) { + render(html`<${ConfirmationModal} setApiError=${setApiError} projectCreatedModal=${projectCreatedModal} />`, el); + return el; +} diff --git a/libs/blocks/locui-create/input-actions/index.js b/libs/blocks/locui-create/input-actions/index.js index fea2cbb1ae..345a49f1b1 100644 --- a/libs/blocks/locui-create/input-actions/index.js +++ b/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, }; } diff --git a/libs/blocks/locui-create/input-actions/modal.js b/libs/blocks/locui-create/input-actions/modal.js index 737c2ef7cd..b0f175e692 100644 --- a/libs/blocks/locui-create/input-actions/modal.js +++ b/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` -
-
- - Project "${project.value.name || 'n/a'}" Successfully Created -
-
- ${projectInfo.value.projectLink && html`View`} +
+
+ ${type === 'error' ? html` + error + Project "${project.value.name || 'n/a'}" Creation Failed! + ` : html` + + Project "${project.value.name || 'n/a'}" Successfully Created + `} +
+
+ ${type === 'success' ? projectInfo.value.projectLink + && html` + + View + + ` : html` + { e.preventDefault(); closeModal(); }} + > + Back + + `} +
-
`; } -export default function renderModal(el) { - render(html`<${Modal} />`, el); +export default function renderModal(el, type = 'success') { + render(html`<${Modal} type=${type} />`, el); return el; } diff --git a/libs/blocks/locui-create/input-actions/view.js b/libs/blocks/locui-create/input-actions/view.js index 7ab2cb4df0..c2a9ac48d8 100644 --- a/libs/blocks/locui-create/input-actions/view.js +++ b/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(); } }; diff --git a/libs/blocks/locui-create/input-urls/view.js b/libs/blocks/locui-create/input-urls/view.js index eddda8d6df..439a19bbcc 100644 --- a/libs/blocks/locui-create/input-urls/view.js +++ b/libs/blocks/locui-create/input-urls/view.js @@ -264,6 +264,7 @@ export default function InputUrls() { + ${errors.editBehavior && html`
diff --git a/libs/blocks/locui-create/locui-create.css b/libs/blocks/locui-create/locui-create.css index 0ae029bbff..abc65219ea 100644 --- a/libs/blocks/locui-create/locui-create.css +++ b/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,8 +681,8 @@ body { } .locui-project-created-modal { - width: 400px; - padding: 30px 0px; + width: 450px; + padding: 30px 10px; text-align: center; display: flex; flex-direction: column; @@ -683,6 +690,11 @@ body { 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; +} + diff --git a/libs/blocks/locui-create/store.js b/libs/blocks/locui-create/store.js index 6d512dedd2..9bc9ebb84e 100644 --- a/libs/blocks/locui-create/store.js +++ b/libs/blocks/locui-create/store.js @@ -200,7 +200,7 @@ export async function fetchDraftProject(projectKey) { 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,