@strapi/i18n 0.0.0-next.e21fe90bf2ab9906267ea6e6ca620bdcc729906c → 0.0.0-next.e2e3ca14971ee768e1a227a209362264fd0132d4

package/dist/admin/components/CMHeaderActions.js

@@ -4,15 +4,19 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var query = require('@reduxjs/toolkit/query');
 var strapiAdmin = require('@strapi/admin/strapi-admin');
+var ee = require('@strapi/admin/strapi-admin/ee');
 var strapiAdmin$1 = require('@strapi/content-manager/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
 var styledComponents = require('styled-components');
+var useAILocalizationJobsPolling = require('../hooks/useAILocalizationJobsPolling.js');
 var useI18n = require('../hooks/useI18n.js');
+var aiLocalizationJobs = require('../services/aiLocalizationJobs.js');
 var locales = require('../services/locales.js');
 var relations = require('../services/relations.js');
+var settings = require('../services/settings.js');
 var clean = require('../utils/clean.js');
 var getTranslation = require('../utils/getTranslation.js');
 var strings = require('../utils/strings.js');
@@ -81,6 +85,18 @@ const LocaleOption = ({ isDraftAndPublishEnabled, locale, status, entryExists })
         ]
     });
 };
+const LocaleOptionStartIcon = ({ entryWithLocaleExists, translationStatus, index })=>{
+    const isAiAvailable = ee.useAIAvailability();
+    if (!entryWithLocaleExists) {
+        return /*#__PURE__*/ jsxRuntime.jsx(icons.Plus, {});
+    }
+    if (isAiAvailable && index !== 0 && translationStatus === 'failed') {
+        return /*#__PURE__*/ jsxRuntime.jsx(icons.WarningCircle, {
+            fill: "warning600"
+        });
+    }
+    return null;
+};
 const LocalePickerAction = ({ document, meta, model, collectionType, documentId })=>{
     const { formatMessage } = reactIntl.useIntl();
     const [{ query }, setQuery] = strapiAdmin.useQueryParams();
@@ -95,6 +111,14 @@ const LocalePickerAction = ({ document, meta, model, collectionType, documentId
             locale: currentDesiredLocale
         }
     });
+    const { data: jobData } = aiLocalizationJobs.useGetAILocalizationJobsByDocumentQuery({
+        documentId: documentId,
+        model: model,
+        collectionType: collectionType
+    });
+    const { data: settings$1 } = settings.useGetSettingsQuery();
+    const isAiAvailable = ee.useAIAvailability();
+    const setValues = strapiAdmin.useForm('LocalePickerAction', (state)=>state.setValues);
     const handleSelect = React__namespace.useCallback((value)=>{
         setQuery({
             plugins: {
@@ -103,11 +127,56 @@ const LocalePickerAction = ({ document, meta, model, collectionType, documentId
                     locale: value
                 }
             }
-        });
+        }, 'push', true);
     }, [
         query.plugins,
         setQuery
     ]);
+    const nonTranslatedFields = React__namespace.useMemo(()=>{
+        if (!schema?.attributes) return [];
+        return Object.keys(schema.attributes).filter((field)=>{
+            const attribute = schema.attributes[field];
+            return attribute?.pluginOptions?.i18n?.localized === false;
+        });
+    }, [
+        schema?.attributes
+    ]);
+    const sourceLocaleData = React__namespace.useMemo(()=>{
+        if (!Array.isArray(locales$1) || !meta?.availableLocales) return null;
+        const defaultLocale = locales$1.find((locale)=>locale.isDefault);
+        const existingLocales = meta.availableLocales.map((loc)=>loc.locale);
+        const sourceLocaleCode = defaultLocale && existingLocales.includes(defaultLocale.code) && defaultLocale.code !== currentDesiredLocale ? defaultLocale.code : existingLocales.find((locale)=>locale !== currentDesiredLocale);
+        if (!sourceLocaleCode) return null;
+        // Find the document data from availableLocales (now includes non-translatable fields)
+        const sourceLocaleDoc = meta.availableLocales.find((loc)=>loc.locale === sourceLocaleCode);
+        return sourceLocaleDoc ? {
+            locale: sourceLocaleCode,
+            data: sourceLocaleDoc
+        } : null;
+    }, [
+        locales$1,
+        meta?.availableLocales,
+        currentDesiredLocale
+    ]);
+    /**
+   * Prefilling form with non-translatable fields from already existing locale
+   */ React__namespace.useEffect(()=>{
+        // Only run when creating a new locale (no document ID yet) and when we have non-translatable fields
+        if (!document?.id && nonTranslatedFields.length > 0 && sourceLocaleData?.data) {
+            const dataToSet = nonTranslatedFields.reduce((acc, field)=>{
+                acc[field] = sourceLocaleData.data[field];
+                return acc;
+            }, {});
+            if (Object.keys(dataToSet).length > 0) {
+                setValues(dataToSet);
+            }
+        }
+    }, [
+        document?.id,
+        nonTranslatedFields,
+        sourceLocaleData?.data,
+        setValues
+    ]);
     React__namespace.useEffect(()=>{
         if (!Array.isArray(locales$1) || !hasI18n) {
             return;
@@ -127,12 +196,18 @@ const LocalePickerAction = ({ document, meta, model, collectionType, documentId
         currentDesiredLocale
     ]);
     const currentLocale = Array.isArray(locales$1) ? locales$1.find((locale)=>locale.code === currentDesiredLocale) : undefined;
+    // Use meta.availableLocales instead of document.localizations
+    // meta.availableLocales contains all locales for the document, even when creating new locales
+    const availableLocales = meta?.availableLocales ?? [];
+    const documentLocalizations = document?.localizations ?? [];
+    // Prefer meta.availableLocales as it's more reliable, fallback to document.localizations
+    const allLocalizations = availableLocales.length > 0 ? availableLocales : documentLocalizations;
     const allCurrentLocales = [
         {
             status: getDocumentStatus(document, meta),
             locale: currentLocale?.code
         },
-        ...document?.localizations ?? []
+        ...allLocalizations
     ];
     if (!hasI18n || !Array.isArray(locales$1) || locales$1.length === 0) {
         return null;
@@ -143,15 +218,52 @@ const LocalePickerAction = ({ document, meta, model, collectionType, documentId
      * otherwise the locale is hidden.
      */ return canRead.includes(locale.code);
     });
+    const localesSortingDefaultFirst = displayedLocales.sort((a, b)=>a.isDefault ? -1 : b.isDefault ? 1 : 0);
     return {
         label: formatMessage({
             id: getTranslation.getTranslation('Settings.locales.modal.locales.label'),
             defaultMessage: 'Locales'
         }),
-        options: displayedLocales.map((locale)=>{
+        options: localesSortingDefaultFirst.map((locale, index)=>{
             const entryWithLocaleExists = allCurrentLocales.some((doc)=>doc.locale === locale.code);
             const currentLocaleDoc = allCurrentLocales.find((doc)=>'locale' in doc ? doc.locale === locale.code : false);
             const permissionsToCheck = currentLocaleDoc ? canRead : canCreate;
+            if (isAiAvailable && settings$1?.data?.aiLocalizations) {
+                return {
+                    _render: ()=>/*#__PURE__*/ jsxRuntime.jsxs(React__namespace.Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                    disabled: !permissionsToCheck.includes(locale.code),
+                                    startIcon: /*#__PURE__*/ jsxRuntime.jsx(LocaleOptionStartIcon, {
+                                        entryWithLocaleExists: entryWithLocaleExists,
+                                        translationStatus: jobData?.data?.status,
+                                        index: index
+                                    }),
+                                    value: locale.code,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(LocaleOption, {
+                                        isDraftAndPublishEnabled: !!schema?.options?.draftAndPublish,
+                                        locale: locale,
+                                        status: currentLocaleDoc?.status,
+                                        entryExists: entryWithLocaleExists
+                                    })
+                                }, locale.code),
+                                localesSortingDefaultFirst.length > 1 && index === 0 && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                    paddingRight: 4,
+                                    paddingLeft: 4,
+                                    paddingTop: 2,
+                                    paddingBottom: 2,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        variant: "sigma",
+                                        children: formatMessage({
+                                            id: getTranslation.getTranslation('CMEditViewLocalePicker.locale.ai-translations'),
+                                            defaultMessage: 'AI Translations'
+                                        })
+                                    })
+                                })
+                            ]
+                        }, index)
+                };
+            }
             return {
                 disabled: !permissionsToCheck.includes(locale.code),
                 value: locale.code,
@@ -159,9 +271,12 @@ const LocalePickerAction = ({ document, meta, model, collectionType, documentId
                     isDraftAndPublishEnabled: !!schema?.options?.draftAndPublish,
                     locale: locale,
                     status: currentLocaleDoc?.status,
-                    entryExists: entryWithLocaleExists
+                    entryExists: entryWithLocaleExists,
+                    translationStatus: jobData?.data?.status
                 }),
-                startIcon: !entryWithLocaleExists ? /*#__PURE__*/ jsxRuntime.jsx(icons.Plus, {}) : null
+                startIcon: /*#__PURE__*/ jsxRuntime.jsx(LocaleOptionStartIcon, {
+                    entryWithLocaleExists: entryWithLocaleExists
+                })
             };
         }),
         customizeContent: ()=>currentLocale?.name,
@@ -184,6 +299,130 @@ const getDocumentStatus = (document, meta)=>{
     }
     return docStatus;
 };
+/* -------------------------------------------------------------------------------------------------
+ * AISettingsStatusAction
+ * -----------------------------------------------------------------------------------------------*/ const AITranslationStatusIcon = styledComponents.styled(designSystem.Status)`
+  display: flex;
+  gap: ${({ theme })=>theme.spaces[1]};
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+
+  // Disabled state
+  ${({ $isAISettingEnabled, theme })=>!$isAISettingEnabled && `
+    background-color: ${theme.colors.neutral150};
+  `}
+
+  svg {
+    ${({ $isAISettingEnabled, theme })=>!$isAISettingEnabled && `
+        fill: ${theme.colors.neutral300};
+      `}
+  }
+`;
+const SpinningLoader = styledComponents.styled(icons.Loader)`
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  animation: spin 2s linear infinite;
+`;
+const AITranslationStatusAction = ({ documentId, model, collectionType })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const isAIAvailable = ee.useAIAvailability();
+    const { data: settings$1 } = settings.useGetSettingsQuery();
+    const isAISettingEnabled = settings$1?.data?.aiLocalizations;
+    const { hasI18n } = useI18n.useI18n();
+    // Poll for AI localizations jobs when AI is enabled and we have a documentId
+    const { status } = useAILocalizationJobsPolling.useAILocalizationJobsPolling({
+        documentId,
+        model,
+        collectionType
+    });
+    const statusVariant = (()=>{
+        if (status === 'failed') {
+            return 'warning';
+        }
+        if (isAISettingEnabled) {
+            return 'alternative';
+        }
+        return 'neutral';
+    })();
+    // Do not display this action when i18n is not available
+    if (!hasI18n) {
+        return null;
+    }
+    // Do not display this action when AI is not available
+    if (!isAIAvailable) {
+        return null;
+    }
+    return {
+        _status: {
+            message: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                height: "100%",
+                "aria-label": formatMessage({
+                    id: getTranslation.getTranslation('CMEditViewAITranslation.status-aria-label'),
+                    defaultMessage: 'AI Translation Status'
+                }),
+                children: /*#__PURE__*/ jsxRuntime.jsx(AITranslationStatusIcon, {
+                    $isAISettingEnabled: Boolean(isAISettingEnabled),
+                    variant: statusVariant,
+                    size: "S",
+                    children: status === 'processing' ? /*#__PURE__*/ jsxRuntime.jsx(SpinningLoader, {}) : /*#__PURE__*/ jsxRuntime.jsx(icons.Sparkle, {})
+                })
+            }),
+            tooltip: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                direction: "column",
+                padding: 4,
+                alignItems: "flex-start",
+                width: "25rem",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        variant: "pi",
+                        fontWeight: "600",
+                        children: formatMessage({
+                            id: getTranslation.getTranslation('CMEditViewAITranslation.status-title'),
+                            defaultMessage: '{enabled, select, true {AI translation enabled} false {AI translation disabled} other {AI translation disabled}}'
+                        }, {
+                            enabled: isAISettingEnabled
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        variant: "pi",
+                        paddingTop: 1,
+                        paddingBottom: 3,
+                        children: formatMessage({
+                            id: getTranslation.getTranslation('CMEditViewAITranslation.status-description'),
+                            defaultMessage: 'Our AI translates content in all locales each time you save a modification in the default locale.'
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Link, {
+                        fontSize: "inherit",
+                        tag: reactRouterDom.NavLink,
+                        to: "/settings/internationalization",
+                        style: {
+                            alignSelf: 'flex-end'
+                        },
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            variant: "pi",
+                            textAlign: "right",
+                            children: formatMessage({
+                                id: getTranslation.getTranslation('CMEditViewAITranslation.settings-link'),
+                                defaultMessage: '{enabled, select, true {Disable it in settings} false {Enable it in settings} other {Enable it in settings}}'
+                            }, {
+                                enabled: isAISettingEnabled
+                            })
+                        })
+                    })
+                ]
+            })
+        }
+    };
+};
 /* -------------------------------------------------------------------------------------------------
  * FillFromAnotherLocaleAction
  * -----------------------------------------------------------------------------------------------*/ const FillFromAnotherLocaleAction = ({ documentId, meta, model, collectionType })=>{
@@ -203,6 +442,9 @@ const getDocumentStatus = (document, meta)=>{
         }
     });
     const { data: locales$1 = [] } = locales.useGetLocalesQuery();
+    const isAIAvailable = ee.useAIAvailability();
+    const { data: settings$1 } = settings.useGetSettingsQuery();
+    const isAISettingEnabled = settings$1?.data?.aiLocalizations;
     const availableLocales = Array.isArray(locales$1) ? locales$1.filter((locale)=>meta?.availableLocales.some((l)=>l.locale === locale.code)) : [];
     const fillFromLocale = (onClose)=>async ()=>{
             const response = await getDocument({
@@ -224,6 +466,10 @@ const getDocumentStatus = (document, meta)=>{
     if (!hasI18n) {
         return null;
     }
+    // Do not display this action when AI is available and AI translations are enabled
+    if (isAIAvailable && isAISettingEnabled) {
+        return null;
+    }
     return {
         type: 'icon',
         icon: /*#__PURE__*/ jsxRuntime.jsx(icons.Earth, {}),
@@ -410,7 +656,7 @@ const getDocumentStatus = (document, meta)=>{
  * BulkLocaleAction
  *
  * This component is used to handle bulk publish and unpublish actions on locales.
- * -----------------------------------------------------------------------------------------------*/ const BulkLocaleAction = ({ document, documentId, model, collectionType, action })=>{
+ * -----------------------------------------------------------------------------------------------*/ const BulkLocaleAction = ({ document, documentId, model, collectionType, action, meta })=>{
     const locale = document?.locale ?? null;
     const [{ query: query$1 }] = strapiAdmin.useQueryParams();
     const params = React__namespace.useMemo(()=>strapiAdmin$1.buildValidParams(query$1), [
@@ -468,25 +714,51 @@ const getDocumentStatus = (document, meta)=>{
                 {}
             ];
         }
-        const localizations = document.localizations ?? [];
-        // Build the rows for the bulk locale publish modal by combining the current
-        // document with all the available locales from the document meta
-        const locales = localizations.map((doc)=>{
-            const { locale, status } = doc;
-            return {
-                locale,
-                status
-            };
+        const metaLocalizations = (meta?.availableLocales ?? []).map((locale)=>({
+                locale: locale.locale,
+                status: locale.status ?? 'draft'
+            }));
+        const documentLocalizations = (document.localizations ?? []).map((doc)=>({
+                locale: doc.locale ?? undefined,
+                status: doc.status ?? 'draft'
+            }));
+        const localesMap = new Map();
+        metaLocalizations.forEach(({ locale, status })=>{
+            if (locale) {
+                localesMap.set(locale, {
+                    locale,
+                    status
+                });
+            }
         });
-        // Add the current document locale
-        locales.unshift({
-            locale: document.locale,
-            status: document.status
+        documentLocalizations.forEach(({ locale, status })=>{
+            if (locale) {
+                localesMap.set(locale, {
+                    locale,
+                    status
+                });
+            }
         });
+        // Build the rows for the bulk locale publish modal by combining the current
+        // document with all the available locales from the document meta
+        const locales = [];
+        if (document?.locale) {
+            locales.push({
+                locale: document.locale,
+                status: document.status ?? 'draft'
+            });
+        }
+        locales.push(...Array.from(localesMap.entries()).filter(([locale])=>locale !== document?.locale).map(([, value])=>value));
+        if (locales.length === 0 && document?.locale) {
+            locales.push({
+                locale: document.locale,
+                status: document.status ?? 'draft'
+            });
+        }
         // Build the validation errors for each locale.
         const allDocuments = [
             document,
-            ...localizations
+            ...document.localizations ?? []
         ];
         const errors = allDocuments.reduce((errs, document)=>{
             if (!document) {
@@ -505,6 +777,7 @@ const getDocumentStatus = (document, meta)=>{
         ];
     }, [
         document,
+        meta?.availableLocales,
         validate
     ]);
     const isBulkPublish = action === 'bulk-publish';
@@ -713,6 +986,7 @@ const getDocumentStatus = (document, meta)=>{
   }
 `;
 
+exports.AITranslationStatusAction = AITranslationStatusAction;
 exports.BulkLocalePublishAction = BulkLocalePublishAction;
 exports.BulkLocaleUnpublishAction = BulkLocaleUnpublishAction;
 exports.DeleteLocaleAction = DeleteLocaleAction;