adobecom · nkthakur48 · May 19, 2025 · May 19, 2025
diff --git a/libs/blocks/locui-create/components/dateTimePicker.js b/libs/blocks/locui-create/components/dateTimePicker.js
@@ -0,0 +1,22 @@
+import { html } from '../../../deps/htm-preact.js';
+
+export default function DateTimePicker({ value, onInput, error }) {
+  const nowGMT = new Date().toISOString().slice(0, 16);
+  return html`
+    <div class='locui-date-picker-container'>
+      <input
+        class='form-field-input'
+        type="datetime-local"
+        id="due-date"
+        name="due-date"
+        value=${value}
+        min=${nowGMT}
+        >
+      />
+      <span class='form-field-desc'>
+        (All times are in GMT timezone.)
+      </span>
+      ${error && html`<div class='form-field-error'>${error}</div>`}
+    </div>
+  `;
+}
diff --git a/libs/blocks/locui-create/input-urls/index.js b/libs/blocks/locui-create/input-urls/index.js
@@ -45,8 +45,9 @@ export function validateForm({
   fragmentsEnabled,
   fragments,
   noOfValidFrag,
+  dueDate,
 }) {
-  const errors = { name: '', editBehavior: '', urlsStr: '', fragments: '' };
+  const errors = { name: '', editBehavior: '', urlsStr: '', fragments: '', dueDate: '' };
   if (name === '') {
     errors.name = 'Project name is required';
   }
@@ -62,12 +63,15 @@ export function validateForm({
   if (fragmentsEnabled && noOfValidFrag > 0 && fragments.length === 0) {
     errors.fragments = 'Select atleast one fragment to proceed further';
   }
+  if (new Date(`${dueDate}Z`) < new Date()) {
+    errors.dueDate = 'Please select a future date and time';
+  }
   return errors;
 }
 
 export function checkForErrors(errors) {
   return (
-    errors.name || errors.editBehavior || errors.urlsStr || errors.fragments
+    errors.name || errors.editBehavior || errors.urlsStr || errors.fragments || errors.dueDate
   );
 }
 
@@ -104,3 +108,14 @@ export function getInitialName(type) {
   const formattedDate = date.replace(/[-:]/g, '').replace(/T/g, '-');
   return `${prefix}-${formattedDate}`;
 }
+
+export function formatDateTime(dueDate) {
+  const date = new Date(dueDate);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
diff --git a/libs/blocks/locui-create/input-urls/view.js b/libs/blocks/locui-create/input-urls/view.js
@@ -25,14 +25,17 @@ import {
   findFragments,
   validateFragments,
   getInitialName,
+  formatDateTime,
 } from './index.js';
 import { getUrls } from '../../locui/loc/index.js';
 import { PROJECT_TYPES, PROJECT_TYPE_LABELS, URL_SEPARATOR_PATTERN, WORKFLOW } from '../utils/constant.js';
 import Toast from '../components/toast.js';
+import DateTimePicker from '../components/dateTimePicker.js';
 
 export default function InputUrls() {
   const [type, setType] = useState(PROJECT_TYPES.translation);
   const [name, setName] = useState(getInitialName(type));
+  const [dueDate, setDueDate] = useState('');
   const [htmlFlow, setHtmlFlow] = useState(true);
   const [editBehavior, setEditBehavior] = useState('');
   const [urlsStr, setUrlsStr] = useState('');
@@ -46,6 +49,7 @@ export default function InputUrls() {
     editBehavior: '',
     urlsStr: '',
     fragments: '',
+    dueDate: '',
   });
   const [apiError, setApiError] = useState('');
 
@@ -112,6 +116,11 @@ export default function InputUrls() {
     }
   }
 
+  function handleDueDateChange(ev) {
+    setDueDate(ev.target.value);
+    setErrors({ ...errors, dueDate: '' });
+  }
+
   const handleFragmentsChange = useCallback(
     (_fragments) => {
       setFragments(_fragments);
@@ -137,6 +146,7 @@ export default function InputUrls() {
       fragmentsEnabled,
       fragments,
       noOfValidFrag,
+      dueDate,
     });
     setErrors(formErrors);
     if (checkForErrors(formErrors)) {
@@ -150,6 +160,7 @@ export default function InputUrls() {
       editBehavior: type === PROJECT_TYPES.rollout ? editBehavior : '',
       urls: urlsStr.split(/,|\n/),
       fragments,
+      dueDate: type === PROJECT_TYPES.translation ? formatDateTime(dueDate) : '',
     });
     let error = '';
     if (!projectCreated.value) {
@@ -173,6 +184,7 @@ export default function InputUrls() {
       setUrlsStr(project.value?.urls?.join('\n'));
       setFragmentsEnabled(project.value?.fragments?.length > 0);
       setFragments(project.value?.fragments ?? []);
+      setDueDate(project.value?.dueDate ?? '');
       if (
         project.value?.fragments?.length > 0
         && project.value?.urls.length > 0
@@ -239,6 +251,18 @@ export default function InputUrls() {
             </div>
           </div>
 
+          ${type === PROJECT_TYPES.translation
+          && html`
+            <div class="form-field">
+              <div class="form-field-label">Due Date</div>
+              <${DateTimePicker} 
+                value=${dueDate}
+                >
+                error=${errors.dueDate}
+              />
+            </div>
+          `}
+
           ${type === PROJECT_TYPES.translation
           && html`
             <div class="form-field">

diff --git a/libs/blocks/locui-create/locui-create.css b/libs/blocks/locui-create/locui-create.css
@@ -944,3 +944,15 @@ div.locui-create .nav-label {
   width: 70px;
 }
 
+.locui-date-picker-container > span {
+  padding-left: 10px;
+}
+
+.locui-date-picker-container > input {
+  min-width: 212px;
+  padding: 4px 8px;
+  font-size: 14px;
+  border: 2px solid #c6c6c6;
+  border-radius: 8px;
+  outline: none;
+}
diff --git a/libs/blocks/locui-create/utils/utils.js b/libs/blocks/locui-create/utils/utils.js
@@ -52,6 +52,7 @@ export const createPayload = (project) => {
       env: env.value,
       regionalEditBehaviour: project.value.editBehavior,
       useHtmlFlow: project.value.htmlFlow,
+      dueDate: project.value.dueDate,
     },
   };
 };