diff --git a/libs/blocks/locui-create/input-locale/index.js b/libs/blocks/locui-create/input-locale/index.js index 38abc2e664..5383486877 100644 --- 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 { ENG_LANG_CODE, PROJECT_TYPES } from '../utils/constant.js'; +import { ENG_LANG_CODE, PROJECT_ACTION, PROJECT_TYPES } from '../utils/constant.js'; function initialLanguageList() { if ( @@ -22,8 +22,8 @@ function initialLanguageList() { function initialRegions() { if (project.value.type === PROJECT_TYPES.translation) { - const englishLocale = locales.value.filter((locItem) => locItem.languagecode === ENG_LANG_CODE); - const { livecopies = '' } = englishLocale[0] || {}; + const englishLocale = locales.value.find((locItem) => locItem.languagecode === ENG_LANG_CODE); + const { livecopies = '' } = englishLocale || {}; return localeRegion.value.reduce((acc, curr) => { const { key, value } = curr; const valueList = value.split(','); @@ -45,6 +45,41 @@ function initialRegions() { return localeRegion.value; } +function prefillActionAndWorkflow(languages) { + const storedLanguages = project.value?.languages ?? []; + if (storedLanguages.length < 1) { + return languages.map((lang) => ({ + ...lang, + action: project.value.type === PROJECT_TYPES.translation + ? PROJECT_ACTION.translate : PROJECT_ACTION.rollout, + workflow: '', + })); + } + + const languageByCode = storedLanguages.reduce((acc, curr) => { + const { langCode } = curr; + acc[langCode] = curr; + return acc; + }, {}); + + const prefilledLanguages = languages.map((lang) => { + const { langCode } = lang; + const { action, workflow = '' } = languageByCode[langCode] || {}; + const prefillLanguage = { + ...lang, + action, + workflow, + }; + if (!action) { + prefillLanguage.action = project.value.type === PROJECT_TYPES.translation + ? PROJECT_ACTION.translate : PROJECT_ACTION.rollout; + } + return prefillLanguage; + }); + + return prefilledLanguages; +} + export default function useInputLocale() { const [selectedRegion, setSelectedRegion] = useState( locSelected.value?.selectedRegion || {}, @@ -179,30 +214,6 @@ export default function useInputLocale() { const errorPresent = () => Object.keys(activeLocales).length > 0; - const prefillActionAndWorkflow = (languages) => { - const storedLanguages = project.value?.languages ?? []; - if (storedLanguages.length < 1) { - return languages.map((lang) => ({ ...lang, action: project.value.type === PROJECT_TYPES.translation ? 'Translate' : 'Rollout', workflow: '' })); - } - let iteratorIndex = 0; - const prefilledLanguages = []; - - while (iteratorIndex < languages.length) { - const { action, workflow } = storedLanguages[iteratorIndex] ?? {}; - const prefillLanguage = { - ...languages[iteratorIndex], - action, - workflow: workflow || '', - }; - if (!action) { - prefillLanguage.action = project.value.type === PROJECT_TYPES.translation ? 'Translate' : 'Rollout'; - } - prefilledLanguages.push(prefillLanguage); - iteratorIndex += 1; - } - return prefilledLanguages; - }; - const handleNext = async () => { if (!errorPresent()) return; const sortedLanguages = transformActiveLocales() diff --git a/libs/blocks/locui-create/input-locale/view.js b/libs/blocks/locui-create/input-locale/view.js index 8faca0b0a5..4a3e9839df 100644 --- a/libs/blocks/locui-create/input-locale/view.js +++ b/libs/blocks/locui-create/input-locale/view.js @@ -3,6 +3,7 @@ import useInputLocale from './index.js'; import StepControls from '../components/stepControls.js'; import { PROJECT_TYPES } from '../utils/constant.js'; import Toast from '../components/toast.js'; +import { initByParams } from '../store.js'; export default function InputLocales() { const { @@ -24,23 +25,25 @@ export default function InputLocales() { setApiError, } = useInputLocale(); - const RenderRegion = () => html` + const RenderRegion = () => { + if (!initByParams.value?.languages) { + return (html`
Quick Select for Language/Locale
${localeRegionList.map( - (region) => html` + (region) => html` `, - )} + )}
- `; + `); + } return null; + }; - const RenderLanguage = () => html` + const RenderLanguage = () => { + if (!initByParams.value?.languages) { + return (html`
Select the Language(s)
${languagesList.map( - (language) => language.livecopies.length > 0 + (language) => language.livecopies.length > 0 && html` `, - )} + )}
- `; + `); + } + return null; + }; const RenderLocales = () => { const groupedLocales = selectedLocale.reduce((acc, locale) => { diff --git a/libs/blocks/locui-create/input-urls/view.js b/libs/blocks/locui-create/input-urls/view.js index 088294dc97..7762dadaa6 100644 --- a/libs/blocks/locui-create/input-urls/view.js +++ b/libs/blocks/locui-create/input-urls/view.js @@ -8,6 +8,7 @@ import FragmentsSection from '../fragments/view.js'; import { authenticated, createDraftProject, + initByParams, nextStep, project, projectCreated, @@ -171,7 +172,7 @@ export default function InputUrls() { setEditBehavior(project.value?.editBehavior || ''); setUrlsStr(project.value?.urls?.join('\n')); setFragmentsEnabled(project.value?.fragments?.length > 0); - setFragments(project.value?.fragments); + setFragments(project.value?.fragments ?? []); if ( project.value?.fragments?.length > 0 && project.value?.urls.length > 0 @@ -209,7 +210,7 @@ export default function InputUrls() { - ${PROJECT_TYPE_LABELS[type]}
- ${!projectCreated.value && html` + ${(!projectCreated.value && !initByParams.value?.type) && html`
${[PROJECT_TYPES.translation, PROJECT_TYPES.rollout].map((pType) => html`
${errors.urlsStr && html`
${errors.urlsStr}
`} diff --git a/libs/blocks/locui-create/locui-create.css b/libs/blocks/locui-create/locui-create.css index d12357cef6..fd5c596268 100644 --- a/libs/blocks/locui-create/locui-create.css +++ b/libs/blocks/locui-create/locui-create.css @@ -235,6 +235,13 @@ body { border-color: #d73220; } +.form-field-textarea:disabled { + background-color: #fff; + border-color: #dadada; + color: #c6c6c6; + cursor: not-allowed; +} + .form-field-switch { display: none; } diff --git a/libs/blocks/locui-create/locui-create.js b/libs/blocks/locui-create/locui-create.js index ae5e0d9133..bf7d2900cf 100644 --- a/libs/blocks/locui-create/locui-create.js +++ b/libs/blocks/locui-create/locui-create.js @@ -9,13 +9,15 @@ import { getUserToken, loading, project, + setInitByParams, + setProject, } 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, setSelectedLocalesAndRegions } from './utils/utils.js'; +import { getEnvQueryParam, getProjectByParams, setSelectedLocalesAndRegions } from './utils/utils.js'; import Toast from './components/toast.js'; function Create() { @@ -24,13 +26,14 @@ function Create() { useEffect(() => { const setup = async () => { try { - await fetchLocaleDetails(); await getUserToken(); + await fetchLocaleDetails(); 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'); + const projectInitByUrl = getProjectByParams(searchParams); + + /* Fetch draft project if project key is found in url params */ if (projectKey) { const error = await fetchDraftProject(projectKey); if (error) { @@ -43,6 +46,11 @@ function Create() { setSelectedLocalesAndRegions(); } } + if (projectInitByUrl && !projectKey) { + setProject(projectInitByUrl); + setInitByParams(projectInitByUrl); + setSelectedLocalesAndRegions(); + } } catch (error) { // console.error('Error fetching locale details:', error); } diff --git a/libs/blocks/locui-create/store.js b/libs/blocks/locui-create/store.js index 8598160576..327941952b 100644 --- a/libs/blocks/locui-create/store.js +++ b/libs/blocks/locui-create/store.js @@ -21,6 +21,7 @@ export const locales = signal([]); export const localeRegion = signal([]); export const locSelected = signal(null); export const projectType = signal('rollout'); +export const initByParams = signal(null); export const env = signal('dev'); export function nextStep() { @@ -38,6 +39,13 @@ export function setProject(_project) { }; } +export function setInitByParams(params) { + initByParams.value = { + ...initByParams.value, + ...params, + }; +} + export function setLocale(_locale) { locSelected.value = { ...locSelected.value, @@ -71,6 +79,7 @@ export async function getUserToken() { export async function fetchLocaleDetails() { try { + loading.value = true; const tenantName = getTenantName(); if (!tenantName) { // console.warn('Tenant name is missing, skipping fetchLocaleDetails.'); @@ -99,6 +108,7 @@ export async function fetchLocaleDetails() { console.error('Error during fetchLocaleDetails:', error.message); throw error; } + loading.value = false; } export async function createDraftProject() { diff --git a/libs/blocks/locui-create/utils/constant.js b/libs/blocks/locui-create/utils/constant.js index b2c5163b95..38cce0b0f8 100644 --- a/libs/blocks/locui-create/utils/constant.js +++ b/libs/blocks/locui-create/utils/constant.js @@ -11,6 +11,12 @@ export const PROJECT_TYPE_LABELS = { rollout: 'Rollout', }; +export const PROJECT_ACTION = { + translate: 'Translate', + rollout: 'Rollout', + english_copy: 'English Copy', +}; + export const TRANSLATE_ONLY_LANGS = ['en-GB']; export const ENG_LANG_CODE = 'en'; export const TRANSCREATION_WORKFLOW = 'Transcreation'; diff --git a/libs/blocks/locui-create/utils/utils.js b/libs/blocks/locui-create/utils/utils.js index 46c4382304..3d1efb95b7 100644 --- a/libs/blocks/locui-create/utils/utils.js +++ b/libs/blocks/locui-create/utils/utils.js @@ -1,5 +1,6 @@ import getServiceConfig from '../../../utils/service-config.js'; import { origin } from '../../locui/utils/franklin.js'; +import { getInitialName } from '../input-urls/index.js'; import { env, locSelected, locales as stLocales, project as stProject } from '../store.js'; export function getTenantName() { @@ -104,3 +105,35 @@ export function setSelectedLocalesAndRegions() { selectedLocale.sort((a, b) => a.localeCompare(b)); locSelected.value = { selectedLocale, activeLocales }; } + +export function getLanguageDetails(lang) { + const langDetails = stLocales.value?.find(({ languagecode }) => languagecode === lang) ?? {}; + return [{ + action: 'Rollout', + langCode: langDetails.languagecode, + language: langDetails.language, + locales: langDetails.livecopies.split(','), + workflow: '', + }]; +} + +export function getProjectByParams(searchParams) { + const encodedUrls = searchParams.get('encodedUrls'); + const type = searchParams.get('type'); + const decodedUrls = encodedUrls?.split(',')?.map((url) => decodeURI(url)); + const language = searchParams.get('language'); + + const projectInfo = {}; + if (type) { + projectInfo.type = type; + projectInfo.name = getInitialName(type); + } + if (decodedUrls?.length > 0) { + projectInfo.urls = decodedUrls; + } + if (language) { + projectInfo.languages = getLanguageDetails(language); + } + + return Object.keys(projectInfo).length > 0 ? projectInfo : null; +}