chore: resolved conflicts

adobecom · Dec 16, 2024 · c9d7c84 · c9d7c84
2 parents 48606f3 + 95f8991
commit c9d7c84
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 62 deletions.
diff --git a/libs/blocks/locui-create/input-actions/view.js b/libs/blocks/locui-create/input-actions/view.js
@@ -2,7 +2,7 @@ import { html } from '../../../deps/htm-preact.js';
 import StepControls from '../components/stepControls.js';
 import useInputActions from './index.js';
 import { prevStep, project } from '../store.js';
-import { LOCALIZATION_TYPES } from '../utils/constant.js';
+import { PROJECT_TYPES, PROJECT_TYPE_LABELS } from '../utils/constant.js';
 import Toast from '../components/toast.js';
 
 function TranslateActions({ languageCount, handleActionSelect, handleWorkflowSelect }) {
@@ -101,11 +101,11 @@ export default function InputActionsView() {
   return html`
   <div class="locui-form-container">
     <div class="locui-table">
-      <h2 class="locui-project-type">${project.value.type === LOCALIZATION_TYPES.translation ? 'Translate' : 'Rollout'}</p>
+      <h2 class="locui-project-type">${PROJECT_TYPE_LABELS[project.value.type]}</p>
       <p class="locui-project-name">
         Project Name: <strong>${project.value.name || 'n/a'}</strong>
       </p>
-      ${project.value.type === LOCALIZATION_TYPES.translation ? html`<${TranslateActions} languageCount=${languageCount} handleActionSelect=${handleActionSelect} handleWorkflowSelect=${handleWorkflowSelect} />`
+      ${project.value.type === PROJECT_TYPES.translation ? html`<${TranslateActions} languageCount=${languageCount} handleActionSelect=${handleActionSelect} handleWorkflowSelect=${handleWorkflowSelect} />`
     : html`<${RolloutActions} languageCount=${languageCount} />`}
      
     </div>

diff --git a/libs/blocks/locui-create/input-locale/index.js b/libs/blocks/locui-create/input-locale/index.js
@@ -10,7 +10,7 @@ import {
   setLocale,
   updateDraftProject,
 } from '../store.js';
-import { LOCALIZATION_TYPES } from '../utils/constant.js';
+import { PROJECT_TYPES } from '../utils/constant.js';
 
 export default function useInputLocale() {
   const [selectedRegion, setSelectedRegion] = useState(
@@ -26,8 +26,8 @@ export default function useInputLocale() {
   const [apiError, setApiError] = useState('');
 
   useEffect(() => {
-    if (project.value.type === LOCALIZATION_TYPES.rollout
-      || project.value.type === LOCALIZATION_TYPES.translation) {
+    if (project.value.type === PROJECT_TYPES.rollout
+      || project.value.type === PROJECT_TYPES.translation) {
       locales.value = locales.value.filter((locItem) => locItem.workflow !== 'Transcreation' && locItem.livecopies !== '');
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -51,7 +51,7 @@ export default function useInputLocale() {
     return Object.entries(groupedLocales).map(([language, localeList]) => {
       const languageItem = {
         language,
-        locales: project.value.type === LOCALIZATION_TYPES.translation ? [] : localeList,
+        locales: project.value.type === PROJECT_TYPES.translation ? [] : localeList,
         langCode: languageCodes[language],
       };
       return languageItem;
@@ -154,7 +154,7 @@ export default function useInputLocale() {
   const prefillActionAndWorkflow = (languages) => {
     const storedLanguages = project.value?.languages ?? [];
     if (storedLanguages.length < 1) {
-      return languages.map((lang) => ({ ...lang, action: project.value.type === LOCALIZATION_TYPES.translation ? 'Translate' : 'Rollout', workflow: '' }));
+      return languages.map((lang) => ({ ...lang, action: project.value.type === PROJECT_TYPES.translation ? 'Translate' : 'Rollout', workflow: '' }));
     }
     let iteratorIndex = 0;
     const prefilledLanguages = [];
@@ -167,7 +167,7 @@ export default function useInputLocale() {
         workflow: workflow || '',
       };
       if (!action) {
-        prefillLanguage.action = project.value.type === LOCALIZATION_TYPES.translation ? 'Translate' : 'Rollout';
+        prefillLanguage.action = project.value.type === PROJECT_TYPES.translation ? 'Translate' : 'Rollout';
       }
       prefilledLanguages.push(prefillLanguage);
       iteratorIndex += 1;

diff --git a/libs/blocks/locui-create/input-locale/view.js b/libs/blocks/locui-create/input-locale/view.js
@@ -1,7 +1,7 @@
 import { html } from '../../../deps/htm-preact.js';
 import useInputLocale from './index.js';
 import StepControls from '../components/stepControls.js';
-import { LOCALIZATION_TYPES } from '../utils/constant.js';
+import { PROJECT_TYPES } from '../utils/constant.js';
 import Toast from '../components/toast.js';
 
 export default function InputLocales() {
@@ -118,13 +118,13 @@ export default function InputLocales() {
     <div class="locui-input-form-area ">
     <div class="locui-form-body">
         <div>
-          <h2 class="locui-project-type">${project.value.type === LOCALIZATION_TYPES.translation ? 'Translate' : 'Rollout'}</h2>
+          <h2 class="locui-project-type">${project.value.type === PROJECT_TYPES.translation ? 'Translate' : 'Rollout'}</h2>
           <p class="locui-project-name"><strong>Project Name:</strong> ${project.value.name || 'n/a'}</p>
         </div>
         <${RenderRegion} />
         <div class="language-locale-container">
           <${RenderLanguage} />
-          ${project.value.type !== LOCALIZATION_TYPES.translation && selectedLocale.length > 0
+          ${project.value.type !== PROJECT_TYPES.translation && selectedLocale.length > 0
           && html`
             <div class="locale-grid">
               <h5 class="section-header">Selected Locales</h5>

diff --git a/libs/blocks/locui-create/input-urls/index.js b/libs/blocks/locui-create/input-urls/index.js
@@ -1,7 +1,7 @@
 import { findDeepFragments } from '../../locui/actions/index.js';
 import { validateUrlsFormat } from '../../locui/loc/index.js';
 import { origin } from '../../locui/utils/franklin.js';
-import { LOCALIZATION_TYPES } from '../utils/constant.js';
+import { PROJECT_TYPES } from '../utils/constant.js';
 
 export function validateProjectName(name) {
   if (name && !/^[a-zA-Z0-9-]+$/.test(name)) {
@@ -86,7 +86,7 @@ export async function findFragments(urls) {
   return validateUrlsFormat(foundFragments, true);
 }
 export function getInitialName(type) {
-  const prefix = type === LOCALIZATION_TYPES.rollout ? 'rollout' : 'translate';
+  const prefix = type === PROJECT_TYPES.rollout ? 'rollout' : 'translate';
   let date = new Date().toISOString();
   if (date.indexOf('.') > -1) {
     date = date.slice(0, date.indexOf('.'));

diff --git a/libs/blocks/locui-create/input-urls/view.js b/libs/blocks/locui-create/input-urls/view.js
@@ -6,6 +6,7 @@ import {
 } from '../../../deps/htm-preact.js';
 import FragmentsSection from '../fragments/view.js';
 import {
+  authenticated,
   createDraftProject,
   nextStep,
   project,
@@ -25,13 +26,13 @@ import {
   getInitialName,
 } from './index.js';
 import { getUrls } from '../../locui/loc/index.js';
-import { URL_SEPARATOR_PATTERN } from '../utils/constant.js';
+import { PROJECT_TYPES, PROJECT_TYPE_LABELS, URL_SEPARATOR_PATTERN } from '../utils/constant.js';
 import Toast from '../components/toast.js';
 
 export default function InputUrls() {
-  const [type, setType] = useState('translation');
-  const [name, setName] = useState('');
-  const [htmlFlow, setHtmlFlow] = useState(false);
+  const [type, setType] = useState(PROJECT_TYPES.translation);
+  const [name, setName] = useState(getInitialName(type));
+  const [htmlFlow, setHtmlFlow] = useState(true);
   const [editBehavior, setEditBehavior] = useState('');
   const [urlsStr, setUrlsStr] = useState('');
   const [fragmentsEnabled, setFragmentsEnabled] = useState(false);
@@ -144,8 +145,8 @@ export default function InputUrls() {
     setProject({
       type,
       name,
-      htmlFlow: type === 'translation' ? htmlFlow : false,
-      editBehavior: type === 'rollout' ? editBehavior : '',
+      htmlFlow: type === PROJECT_TYPES.translation ? htmlFlow : false,
+      editBehavior: type === PROJECT_TYPES.rollout ? editBehavior : '',
       urls: urlsStr.split(/,|\n/),
       fragments,
     });
@@ -163,21 +164,23 @@ export default function InputUrls() {
   }
 
   useEffect(() => {
-    setType(project.value?.type || 'translation');
-    setName(project.value?.name || getInitialName('translation'));
-    setHtmlFlow(project.value?.htmlFlow || false);
-    setEditBehavior(project.value?.editBehavior || '');
-    setUrlsStr(project.value?.urls?.join('\n') || '');
-    setFragmentsEnabled(project.value?.fragments?.length > 0);
-    setFragments(project.value?.fragments || []);
-    if (
-      project.value?.fragments?.length > 0
-      && project.value?.urls.length > 0
-    ) {
-      fetchFragments(project.value?.urls?.join('\n'));
+    if (project.value) {
+      setType(project.value?.type);
+      setName(project.value?.name);
+      setHtmlFlow(project.value?.htmlFlow || true);
+      setEditBehavior(project.value?.editBehavior || '');
+      setUrlsStr(project.value?.urls?.join('\n'));
+      setFragmentsEnabled(project.value?.fragments?.length > 0);
+      setFragments(project.value?.fragments);
+      if (
+        project.value?.fragments?.length > 0
+        && project.value?.urls.length > 0
+      ) {
+        fetchFragments(project.value?.urls?.join('\n'));
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [project.value]);
 
   const handleUrlsBlur = () => {
     if (urlsStr && !errors.urlsStr) {
@@ -203,23 +206,23 @@ export default function InputUrls() {
       <div class="locui-input-form-area">
         <div class="locui-title-bar">
           Localization${' '}
-          <span>- ${type.substring(0, 1).toUpperCase() + type.substring(1)}</span>
+          <span>- ${PROJECT_TYPE_LABELS[type]}</span>
         </div>
         <div class="locui-form-body">
-          <div class="segment-ctrl pb-12">
-            <div
-              class=${`${type === 'translation' && 'active'}`}
-              onclick=${() => handleTypeChange('translation')}
-            >
-              Translation
-            </div>
-            <div
-              class=${`${type === 'rollout' && 'active'}`}
-              onclick=${() => handleTypeChange('rollout')}
-            >
-              Rollout
+          ${!projectCreated.value && html`
+            <div class="segment-ctrl pb-12">
+              ${[PROJECT_TYPES.translation, PROJECT_TYPES.rollout].map((pType) => html`
+                <div
+                  key=${pType}
+                  class=${`${type === pType && 'active'}`}
+                  onclick=${() => handleTypeChange(pType)}
+                >
+                  ${PROJECT_TYPE_LABELS[pType]}
+                </div>
+              `)}
             </div>
-          </div>
+          `}  
+
           <div class="form-field">
             <div class="form-field-label">* Enter Project Name</div>
             <div>
@@ -235,7 +238,7 @@ export default function InputUrls() {
             </div>
           </div>
 
-          ${type === 'translation'
+          ${type === PROJECT_TYPES.translation
           && html`
             <div class="form-field">
               <div class="form-field-label">HTML Localization Flow</div>
@@ -247,7 +250,7 @@ export default function InputUrls() {
               />
             </div>
           `}
-          ${type === 'rollout'
+          ${type === PROJECT_TYPES.rollout
           && html`
             <div class="form-field">
               <div class="form-field-label">* Regional Edit Behavior</div>
@@ -260,7 +263,7 @@ export default function InputUrls() {
                   <option value="" disabled selected hidden>Select</option>
                   <option value="skip">Skip</option>
                   <option value="merge">Merge</option>
-                  <option value="override">Override</option>
+                  <option value="overwrite">Overwrite</option>
                 </select>
                 ${errors.editBehavior
                 && html`<div class="form-field-error">
@@ -329,7 +332,10 @@ export default function InputUrls() {
       />`}
 
       <div>
-        <${StepControls} nextDisabled=${errorPresent} onNext=${handleNext} />
+        <${StepControls}
+          nextDisabled=${!authenticated.value || errorPresent}
+          onNext=${handleNext}
+        />
       </div>
     </div>
   `;

diff --git a/libs/blocks/locui-create/locui-create.css b/libs/blocks/locui-create/locui-create.css
@@ -358,7 +358,6 @@ body {
   height: 100%;
   z-index: 100;
   background: rgba(0, 0, 0, 0.1);
-  pointer-events: none;
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/libs/blocks/locui-create/locui-create.js b/libs/blocks/locui-create/locui-create.js
@@ -1,21 +1,47 @@
-import { html, render, useEffect } from '../../deps/htm-preact.js';
+import { html, render, useEffect, useState } from '../../deps/htm-preact.js';
 import InputLocales from './input-locale/view.js';
 import InputUrls from './input-urls/view.js';
-import { currentStep, env, fetchLocaleDetails, getUserToken, loading } from './store.js';
+import {
+  currentStep,
+  env,
+  fetchDraftProject,
+  fetchLocaleDetails,
+  getUserToken,
+  loading,
+  project,
+} from './store.js';
 import StepTracker from './components/stepTracker.js';
 import InputActions from './input-actions/view.js';
 import Header from '../milostudio-header/milostudio-header.js';
 import Sidenav from '../milostudio-sidenav/sidenav.js';
 import { getConfig, loadStyle } from '../../utils/utils.js';
 import { getEnvQueryParam } from './utils/utils.js';
+import Toast from './components/toast.js';
 
 function Create() {
+  const [toast, setToast] = useState({ type: '', message: '' });
+
   useEffect(() => {
     const setup = async () => {
       try {
         await fetchLocaleDetails();
         await getUserToken();
         env.value = getEnvQueryParam();
+
+        /* Fetch draft project if project key is found in url params */
+        const searchParams = new URLSearchParams(window.location.search);
+        const projectKey = searchParams.get('projectKey');
+        if (projectKey) {
+          const error = await fetchDraftProject(projectKey);
+          if (error) {
+            setToast({ type: 'error', message: error });
+          } else {
+            setToast({
+              type: 'info',
+              message: `Project ${project.value.name} fetched succesfully.`,
+            });
+          }
+        }
       } catch (error) {
         // console.error('Error fetching locale details:', error);
       }
@@ -44,6 +70,15 @@ function Create() {
       && html`<div class="fullscreen-loader">
         <div class="locui-create-loader" />
       </div>`}
+      
+      ${toast.message
+      && html`
+        <${Toast}
+          message=${toast.message}
+          type=${toast.type}
+          onClose=${() => setToast({ ...toast, message: '' })}
+        />
+      `}
     </div>
   `;
 }