@localazy/strapi-plugin 0.1.6 → 0.1.9

package/.github/workflows/.build.yml

@@ -10,20 +10,9 @@ jobs:
         run: pwd && sudo chown -R $USER:$USER ./
       - uses: actions/checkout@v2
       - name: Setup Node.js environment
-        uses: actions/setup-node@v1.4.4
+        uses: actions/setup-node@v3
         with:
-          node-version: 14.x
-      - name: Cache node modules
-        uses: actions/cache@v1
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
+          node-version: 14.x     
       - name: Install dependencies
         run: npm ci
       - name: Run unit tests

package/admin/src/modules/@common/components/PluginPageLoader/index.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Flex } from '@strapi/design-system/Flex';
+import { Loader } from "@strapi/design-system/Loader";
+import { useTranslation } from "react-i18next";
+
+import "../../../../i18n";
+
+function PluginPageLoader() {
+  const { t } = useTranslation();
+
+  return (
+    <Flex
+      marginTop={10}
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Loader>{t("common.loading_content")}</Loader>
+    </Flex>
+  )
+}
+
+export default PluginPageLoader;

package/admin/src/modules/@common/services/product-analytics-service.js

@@ -0,0 +1,67 @@
+import AnalyticsService from "../../../plugins/analytics-service";
+
+export default class ProductAnalyticsService {
+  static async trackAppConnected(userId, project, params = {}) {
+    try {
+      const data = this.buildData(userId, "Strapi Connected", project, params);
+      await AnalyticsService.trackEvent(data.event, {
+        ...data.data,
+        userId,
+        category: "Project",
+      });
+    } catch (e) {
+      console.warn(e);
+    }
+  }
+
+  static async trackAppDisconnected(userId, project, params = {}) {
+    try {
+      const data = this.buildData(userId, "Strapi Disconnected", project, params);
+      await AnalyticsService.trackEvent(data.event, {
+        ...data.data,
+        userId,
+        category: "Project",
+      });
+    } catch (e) {
+      console.warn(e);
+    }
+  }
+
+  static async trackUploadToLocalazy(userId, project, params = {}) {
+    try {
+      const data = this.buildData(userId, "Strapi Upload", project, params);
+      await AnalyticsService.trackEvent(data.event, {
+        ...data.data,
+        userId,
+        category: "Project",
+      });
+    } catch (e) {
+      console.warn(e);
+    }
+  }
+
+  static async trackDownloadToStrapi(userId, project, params = {}) {
+    try {
+      const data = this.buildData(userId, "Strapi Download", project, params);
+      await AnalyticsService.trackEvent(data.event, {
+        ...data.data,
+        userId,
+        category: "Project",
+      });
+    } catch (e) {
+      console.warn(e);
+    }
+  }
+
+  static buildData(userId, event, project, params) {
+    return {
+      event,
+      data: {
+        "User Id": userId,
+        "Project Id": project.id,
+        "Project Name": project.name,
+        ...params,
+      },
+    };
+  }
+}

package/admin/src/modules/@common/utils/__tests__/iso-locales-utils.test.js

@@ -0,0 +1,102 @@
+const { isoStrapiToLocalazy, isoLocalazyToStrapi } = require("../iso-locales-utils");
+
+describe("iso-locales-utils.js", () => {
+  describe("transform Strapi ISO to Localazy ISO", () => {
+    it("should transform codes containing lang only", () => {
+      // setup
+      const input = ["en", "fr", "de", "es", "it", "ja", "ko", "pt", "ru", "zh"];
+
+      // execute
+      const output = input.map((item) => isoStrapiToLocalazy(item));
+
+      // verify
+      const expected = input;
+      expect(output).toEqual(expected);
+    });
+
+    it("should transform codes containing lang-region", () => {
+      // setup
+      const input = ["en-US", "fr-CA", "de-DE", "es-ES", "it-IT", "ja-JP", "ko-KR", "pt-BR", "ru-RU", "zh-CN"];
+
+      // execute
+      const output = input.map((item) => isoStrapiToLocalazy(item));
+
+      // verify
+      const expected = ["en_US", "fr_CA", "de_DE", "es_ES", "it_IT", "ja_JP", "ko_KR", "pt_BR", "ru_RU", "zh_CN"];
+      expect(output).toEqual(expected);
+    });
+
+    it("should transform codes containing lang-script", () => {
+      // setup
+      const input = ["en-Latn", "fr-Latn", "de-Latn", "es-Latn", "it-Latn", "ja-Latn", "ko-Latn", "pt-Latn", "ru-Latn", "zh-Latn"];
+
+      // execute
+      const output = input.map((item) => isoStrapiToLocalazy(item));
+
+      // verify
+      const expected = ["en#Latn", "fr#Latn", "de#Latn", "es#Latn", "it#Latn", "ja#Latn", "ko#Latn", "pt#Latn", "ru#Latn", "zh#Latn"];
+      expect(output).toEqual(expected);
+    });
+
+    it("should transform codes containing lang-script-region", () => {
+      // setup
+      const input = ["en-Latn-US", "fr-Latn-CA", "de-Latn-DE", "es-Latn-ES", "it-Latn-IT", "ja-Latn-JP", "ko-Latn-KR", "pt-Latn-BR", "ru-Latn-RU", "zh-Hant-CN"];
+
+      // execute
+      const output = input.map((item) => isoStrapiToLocalazy(item));
+
+      // verify
+      const expected = ["en_US#Latn", "fr_CA#Latn", "de_DE#Latn", "es_ES#Latn", "it_IT#Latn", "ja_JP#Latn", "ko_KR#Latn", "pt_BR#Latn", "ru_RU#Latn", "zh_CN#Hant"];
+      expect(output).toEqual(expected);
+    });
+  });
+
+  describe("transform Strapi ISO to Localazy ISO", () => {
+    it("should transform codes containing lang only", () => {
+      // setup
+      const input = ["en", "fr", "de", "es", "it", "ja", "ko", "pt", "ru", "zh"];
+
+      // execute
+      const output = input.map((item) => isoLocalazyToStrapi(item));
+
+      // verify
+      const expected = input;
+      expect(output).toEqual(expected);
+    });
+
+    it("should transform codes containing lang-region", () => {
+      // setup
+      const input = ["en_US", "fr_CA", "de_DE", "es_ES", "it_IT", "ja_JP", "ko_KR", "pt_BR", "ru_RU", "zh_CN"];
+
+      // execute
+      const output = input.map((item) => isoLocalazyToStrapi(item));
+
+      // verify
+      const expected = ["en-US", "fr-CA", "de-DE", "es-ES", "it-IT", "ja-JP", "ko-KR", "pt-BR", "ru-RU", "zh-CN"];
+      expect(output).toEqual(expected);
+    });
+
+    it("should transform codes containing lang-script", () => {
+      // setup
+      const input = ["en#Latn", "fr#Latn", "de#Latn", "es#Latn", "it#Latn", "ja#Latn", "ko#Latn", "pt#Latn", "ru#Latn", "zh#Latn"];
+
+      // execute
+      const output = input.map((item) => isoLocalazyToStrapi(item));
+
+      // verify
+      const expected = ["en-Latn", "fr-Latn", "de-Latn", "es-Latn", "it-Latn", "ja-Latn", "ko-Latn", "pt-Latn", "ru-Latn", "zh-Latn"];
+      expect(output).toEqual(expected);
+    });
+
+    it("should transform codes containing lang-script-region", () => {
+      // setup
+      const input = ["en_US#Latn", "fr_CA#Latn", "de_DE#Latn", "es_ES#Latn", "it_IT#Latn", "ja_JP#Latn", "ko_KR#Latn", "pt_BR#Latn", "ru_RU#Latn", "zh_CN#Hant"];
+
+      // execute
+      const output = input.map((item) => isoLocalazyToStrapi(item));
+      // verify
+      const expected = ["en-Latn-US", "fr-Latn-CA", "de-Latn-DE", "es-Latn-ES", "it-Latn-IT", "ja-Latn-JP", "ko-Latn-KR", "pt-Latn-BR", "ru-Latn-RU", "zh-Hant-CN"];
+      expect(output).toEqual(expected);
+    });
+  });
+});

package/admin/src/modules/@common/utils/format-number.js

@@ -0,0 +1 @@
+export default (value, options = undefined) => new Intl.NumberFormat("en-GB", options).format(value);

package/admin/src/modules/@common/utils/iso-locales-utils.js

@@ -3,7 +3,31 @@ export const isoStrapiToLocalazy = (isoStrapi) => {
     return null;
   }
 
-  return isoStrapi.replace("_", "-");
+  const split = isoStrapi.split("-");
+  const language = split[0];
+
+  const hasRegionAndScript = split.length === 3;
+
+  if (hasRegionAndScript) {
+    const script = split[1];
+    const region = split[2];
+
+    return `${language}_${region}#${script}`;
+  }
+
+  const hasPossiblyRegion = split.length === 2;
+
+  if (hasPossiblyRegion) {
+    const regionOrScript = split[1];
+
+    // is it script - the way Strapi resolves that
+    const isItRegion = regionOrScript.toUpperCase() === regionOrScript;
+
+    // it is region; otherwise it is script
+    return isItRegion ? `${language}_${regionOrScript}` : `${language}#${regionOrScript}`;
+  }
+
+  return isoStrapi.replace("-", "_");
 };
 
 export const isoLocalazyToStrapi = (isoLocalazy) => {
@@ -11,5 +35,24 @@ export const isoLocalazyToStrapi = (isoLocalazy) => {
     return null;
   }
 
-  return isoLocalazy.replace("-", "_");
+  const scriptIndex = isoLocalazy.indexOf("#");
+  const hasScript = scriptIndex > -1;
+
+  if (hasScript) {
+    const script = isoLocalazy.substring(scriptIndex + 1);
+    const isoLocalazyWithoutScript = isoLocalazy.substring(0, scriptIndex);
+    const split = isoLocalazyWithoutScript.split("_");
+    const language = split[0];
+    const region = split[1];
+
+    if (!region) {
+      return `${language}-${script}`;
+    }
+
+    const isoStrapi = `${language}-${script}-${region.toUpperCase()}`;
+
+    return isoStrapi;
+  }
+
+  return isoLocalazy.replace("_", "-");
 };

package/admin/src/modules/plugin-settings/components/ContentTransferSetup/index.js

@@ -21,6 +21,7 @@ import hasModelChanged from "../../functions/has-model-changed";
 import buildContentTransferSetupSchema from "../../functions/build-content-transfer-setup-schema";
 import { getLocalazyIdentity } from "../../../../state/localazy-identity";
 import Tree from "../Tree";
+import ContentTransferSetupEmpty from "../ContentTransferSetupEmpty";
 
 import "../../../../i18n";
 
@@ -28,7 +29,6 @@ function ContentTransferSetup() {
   /**
    * Translation function
    */
-  // eslint-disable-next-line no-unused-vars
   const { t } = useTranslation();
 
   /**
@@ -250,6 +250,10 @@ function ContentTransferSetup() {
             shadow="tableShadow"
             hasRadius
           >
+            {!formModel.length && (
+              // empty state
+              <ContentTransferSetupEmpty />
+            )}
             {formModel.map((tree, index) => {
               return (
                 <Box
@@ -257,30 +261,37 @@ function ContentTransferSetup() {
                   key={`box_tree_${index}`}
                   marginBottom={3}
                 >
-                  <Tree onTreeItemClick={onTreeItemClick} objects={tree} />
+                  <Tree
+                    onTreeItemClick={onTreeItemClick}
+                    objects={tree}
+                    initiallyExpanded={index === 0} />
                 </Box>
               );
             })}
-            <Box
-              paddingTop={6}
-              paddingBottom={6}
-            >
-              <Divider />
-            </Box>
-            <Typography variant="omega">{t("plugin_settings.you_can_upload_download")}</Typography>
-            <Typography variant="omega" fontWeight="semiBold">{t("plugin_settings.only_text_based_content")}</Typography>
-            <br />
-            <br />
-            <Typography variant="omega">{t("plugin_settings.learn_more_in_docs_message_a")}</Typography>
-            <Typography
-              onClick={onReadDocumentationClick}
-              variant="omega"
-              fontWeight="semiBold"
-              textColor="primary600"
-              style={{ cursor: "pointer" }}
-            >
-              {t("plugin_settings.learn_more_in_docs_message_b")}
-            </Typography>
+            {!!formModel.length && (
+              <Box>
+                <Box
+                  paddingTop={6}
+                  paddingBottom={6}
+                >
+                  <Divider />
+                </Box>
+                <Typography variant="omega">{t("plugin_settings.you_can_upload_download")}</Typography>
+                <Typography variant="omega" fontWeight="semiBold">{t("plugin_settings.only_text_based_content")}</Typography>
+                <br />
+                <br />
+                <Typography variant="omega">{t("plugin_settings.learn_more_in_docs_message_a")}</Typography>
+                <Typography
+                  onClick={onReadDocumentationClick}
+                  variant="omega"
+                  fontWeight="semiBold"
+                  textColor="primary600"
+                  style={{ cursor: "pointer" }}
+                >
+                  {t("plugin_settings.learn_more_in_docs_message_b")}
+                </Typography>
+              </Box>
+            )}
           </Box>
         )
         }

package/admin/src/modules/plugin-settings/components/ContentTransferSetupEmpty/index.js

@@ -0,0 +1,86 @@
+import React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import styled from 'styled-components';
+import { Typography, Flex } from "@strapi/design-system";
+import Dot from '@strapi/icons/Dot';
+
+const CustomBullet = styled(Dot)`
+  width: ${12 / 16}rem;
+  height: ${4 / 16}rem;
+  margin-right: ${4 / 16}rem;
+  * {
+    fill: ${({ theme, $active }) => ($active ? theme.colors.primary600 : theme.colors.neutral600)};
+  }
+`;
+
+function ContentTransferSetupEmpty() {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <Typography
+        textColor="neutral600"
+        variant="beta"
+      >
+        {t("plugin_settings.there_is_nothing_to_transfer")}
+      </Typography>
+      <br />
+      <br />
+      <Typography
+        textColor="neutral600"
+        variant="omega"
+      >
+        {t("plugin_settings.please_check_that_you_have_entered_a_valid_collection")}
+      </Typography>
+      <br />
+      <Flex marginTop={1} alignItems="center">
+        <CustomBullet />
+        <Typography
+          textColor="neutral600"
+          variant="omega"
+        >
+          <Trans i18nKey="plugin_settings.step_1" components={{ 1: <Typography variant="omega" fontWeight="semiBold" /> }} />
+        </Typography>
+      </Flex>
+      <Flex marginTop={1} alignItems="center">
+        <CustomBullet />
+
+        <Typography
+          textColor="neutral600"
+          variant="omega"
+        >
+          <Trans i18nKey="plugin_settings.step_2" components={{ 1: <Typography variant="omega" fontWeight="semiBold" /> }} />
+        </Typography>
+      </Flex>
+      <Flex marginTop={1} alignItems="center">
+        <CustomBullet />
+        <Typography
+          textColor="neutral600"
+          variant="omega"
+        >
+          <Trans i18nKey="plugin_settings.step_3" components={{ 1: <Typography variant="omega" fontWeight="semiBold" /> }} />
+        </Typography>
+      </Flex>
+      <Flex marginTop={1} alignItems="center">
+        <CustomBullet />
+        <Typography
+          textColor="neutral600"
+          variant="omega"
+        >
+          <Trans i18nKey="plugin_settings.step_4" components={{ 1: <Typography variant="omega" fontWeight="semiBold" /> }} />
+        </Typography>
+      </Flex>
+      <Flex marginTop={1} alignItems="center">
+        <CustomBullet />
+        <Typography
+          textColor="neutral600"
+          variant="omega"
+        >
+          <Trans i18nKey="plugin_settings.step_5" components={{ 1: <Typography variant="omega" fontWeight="semiBold" /> }} />
+        </Typography>
+      </Flex>
+    </div >
+  );
+}
+
+export default ContentTransferSetupEmpty;

package/admin/src/modules/plugin-settings/components/Tree/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Box } from "@strapi/design-system/Box";
 import { Switch } from '@strapi/design-system/Switch';
@@ -13,6 +13,10 @@ function Tree(props) {
     props.onTreeItemClick(key, currentValue);
   };
 
+  useEffect(() => {
+    setIsExpanded(props.initiallyExpanded);
+  }, [props.initiallyExpanded]);
+
   const createTree = (name, branch, path = "") => {
     const isBranchObject = typeof branch === "object" && branch !== null;
 
@@ -115,6 +119,11 @@ function Tree(props) {
 Tree.propTypes = {
   objects: PropTypes.object.isRequired,
   onTreeItemClick: PropTypes.func.isRequired,
+  initiallyExpanded: PropTypes.bool,
+};
+
+Tree.defaultProps = {
+  initiallyExpanded: false,
 };
 
 export default Tree;

package/admin/src/modules/plugin-settings/locale/en.js

@@ -16,4 +16,11 @@ export default {
   only_text_based_content: "only text based content.",
   learn_more_in_docs_message_a: "If you want to learn more about how to setup your Content Transfer settings read the ",
   learn_more_in_docs_message_b: "Localazy documentation.",
+  there_is_nothing_to_transfer: "There is nothing to transfer.",
+  please_check_that_you_have_entered_a_valid_collection: "To finish the content transfer setup, you must enable localization for at least one Content-Type.",
+  step_1: "Go to the <1>Content-Type Builder</1>",
+  step_2: "Click on <1>Edit</1> and select the <1>Advanced Settings</1> tab",
+  step_3: "Check <1>Enable localization for this Content-Type</1>",
+  step_4: "Repeat for all Content-Types you want to translate",
+  step_5: "Return to this screen and finish the transfer setup",
 };

package/admin/src/modules/plugin-settings/services/plugin-settings-service.js

@@ -29,4 +29,27 @@ export default class PluginSettingsService {
       throw e;
     }
   }
+
+  static async getPluginSettings() {
+    try {
+      const result = await axiosInstance.get(`${BASE_PATH}/plugin-settings`);
+
+      return result.data;
+    } catch (e) {
+      throw e;
+    }
+  }
+
+  static async updatePluginSettings(data) {
+    try {
+      const result = await axiosInstance.put(
+        `${BASE_PATH}/plugin-settings`,
+        data
+      );
+
+      return result.data;
+    } catch (e) {
+      throw e;
+    }
+  }
 }

package/admin/src/pages/App/index.js

@@ -12,8 +12,8 @@ import { ThemeProvider } from "@strapi/design-system/ThemeProvider";
 import { lightTheme } from "@strapi/design-system/themes";
 import { Box } from "@strapi/design-system/Box";
 import { Layout } from "@strapi/design-system/Layout";
-import { Loader } from "@strapi/design-system/Loader";
 import { useTranslation } from "react-i18next";
+import Loader from "../../modules/@common/components/PluginPageLoader";
 import pluginId from "../../pluginId";
 import Download from "../Download";
 import Settings from "../Settings";
@@ -32,6 +32,7 @@ import {
   getLocalazyIdentity,
 } from "../../state/localazy-identity";
 import history from "../../modules/@common/utils/history";
+import PluginSettingsService from "../../modules/plugin-settings/services/plugin-settings-service";
 
 import "../../i18n";
 
@@ -89,7 +90,8 @@ function App() {
         if (!hasLocalazyIdentity()) {
           redirectToPluginRoute(PLUGIN_ROUTES.LOGIN);
         } else {
-          redirectToPluginRoute(PLUGIN_ROUTES.DOWNLOAD);
+          const lastRoute = (await PluginSettingsService.getPluginSettings()).defaultRoute || PLUGIN_ROUTES.UPLOAD;
+          redirectToPluginRoute(lastRoute);
         }
       }
     }

package/admin/src/pages/Download/index.js

@@ -5,11 +5,11 @@ import { Button } from "@strapi/design-system/Button";
 import DownloadIcon from "@strapi/icons/Download";
 import { Box } from "@strapi/design-system/Box";
 import { Alert } from "@strapi/design-system/Alert";
-import { Loader } from "@strapi/design-system/Loader";
 import { useTranslation } from "react-i18next";
 import { Flex } from '@strapi/design-system/Flex';
 import { Divider } from '@strapi/design-system/Divider';
 import { Typography } from "@strapi/design-system/Typography";
+import Loader from "../../modules/@common/components/PluginPageLoader";
 import LocalazyDownloadService from "../../modules/localazy-download/services/localazy-download-service";
 import areLocalesCompatible from "../../modules/@common/utils/are-locales-compatible";
 import hasModelChanged from "../../modules/plugin-settings/functions/has-model-changed";
@@ -17,6 +17,9 @@ import TransferReport from "../../modules/@common/components/TransferReport";
 import ReadDocsButton from "../../modules/localazy-upload/components/ReadDocsButton";
 import "../../i18n";
 import { getLocalazyIdentity } from "../../state/localazy-identity";
+import ProductAnalyticsService from "../../modules/@common/services/product-analytics-service";
+import PluginSettingsService from "../../modules/plugin-settings/services/plugin-settings-service";
+import { PLUGIN_ROUTES } from "../../modules/@common/utils/redirect-to-plugin-route";
 
 function Download(props) {
   const { t } = useTranslation();
@@ -44,6 +47,16 @@ function Download(props) {
     setIsDownloading(true);
     const result = await LocalazyDownloadService.download();
     setDownloadResult(result);
+
+    // track download
+    ProductAnalyticsService.trackDownloadToStrapi(
+      localazyIdentity.user.id,
+      localazyIdentity.project,
+      {
+        "Target Languages Codes": "all",
+      }
+    );
+
     setIsDownloading(false);
     setshowDownloadFinishedModal(true);
   };
@@ -58,6 +71,8 @@ function Download(props) {
       setModelChanged(await hasModelChanged());
       setLocalesIncompatible(!(await areLocalesCompatible()));
 
+      PluginSettingsService.updatePluginSettings({ defaultRoute: PLUGIN_ROUTES.DOWNLOAD });
+
       setIsLoading(false);
     }
     initComponent();

package/admin/src/pages/Login/index.js

@@ -6,19 +6,20 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { Loader } from "@strapi/design-system/Loader";
 import { Link } from "@strapi/design-system/Link";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { HeaderLayout } from "@strapi/design-system/Layout";
 import { Box } from "@strapi/design-system/Box";
 import { Typography } from "@strapi/design-system/Typography";
+import Loader from "../../modules/@common/components/PluginPageLoader";
 import { setLocalazyIdentity } from "../../state/localazy-identity";
 import LocalazyUserService from "../../modules/user/services/localazy-user-service";
 import LoginButton from "../../modules/login/components/LoginButton";
 import redirectToPluginRoute, {
   PLUGIN_ROUTES,
 } from "../../modules/@common/utils/redirect-to-plugin-route";
+import ProductAnalyticsService from "../../modules/@common/services/product-analytics-service";
 
 import "../../i18n";
 
@@ -40,6 +41,12 @@ function Login(props) {
     setLocalazyIdentity(result);
 
     if (result.accessToken) {
+      // track user login
+      ProductAnalyticsService.trackAppConnected(
+        result.user.id,
+        result.project,
+      );
+
       redirectToPluginRoute(PLUGIN_ROUTES.DOWNLOAD, history);
     }
   };

package/admin/src/pages/Settings/index.js

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { Loader } from "@strapi/design-system/Loader";
 import { HeaderLayout } from "@strapi/design-system/Layout";
 import { Box } from "@strapi/design-system/Box";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Grid } from '@strapi/design-system/Grid';
 import { Divider } from '@strapi/design-system/Divider';
+import Loader from "../../modules/@common/components/PluginPageLoader";
 import LogoutButton from "../../modules/login/components/LogoutButton";
 import redirectToPluginRoute, {
   PLUGIN_ROUTES,
@@ -16,6 +16,9 @@ import OverviewItem from "../../modules/settings/components/OverviewItem";
 import OverviewItemLink from "../../modules/settings/components/OverviewItemLink";
 import PrerequisitiesInfo from "../../modules/settings/components/PrerequisitiesInfo";
 import ProjectService from "../../modules/@common/services/project-service";
+import ProductAnalyticsService from "../../modules/@common/services/product-analytics-service";
+import formatNumber from "../../modules/@common/utils/format-number";
+import PluginSettingsService from "../../modules/plugin-settings/services/plugin-settings-service";
 
 import "../../i18n";
 
@@ -35,6 +38,9 @@ function Settings(props) {
       setIsLoading(true);
       const project = await ProjectService.getConnectedProject();
       setConnectedProject(project);
+
+      PluginSettingsService.updatePluginSettings({ defaultRoute: PLUGIN_ROUTES.SETTINGS });
+
       setIsLoading(false);
     }
 
@@ -45,6 +51,12 @@ function Settings(props) {
    * On logout action
    */
   const onLoggedOut = () => {
+    // track user logout
+    ProductAnalyticsService.trackAppDisconnected(
+      localazyIdentity.user.id,
+      localazyIdentity.project,
+    );
+
     redirectToPluginRoute(PLUGIN_ROUTES.LOGIN, history);
   };
 
@@ -56,7 +68,9 @@ function Settings(props) {
         primaryAction={<LogoutButton onResultFetched={onLoggedOut} />}
         as="h2"
       />
-      {(props.isLoading || isLoading) && (<Loader>{t("common.loading_content")}</Loader>)}
+      {(props.isLoading || isLoading) && (
+        <Loader>{t("common.loading_content")}</Loader>
+      )}
       {!(props.isLoading || isLoading) && (
         <Box paddingRight={10} paddingLeft={10}>
           <Box
@@ -86,7 +100,7 @@ function Settings(props) {
               <OverviewItem
                 label={t("settings.remaining_organization_keys")}
                 value={
-                  connectedProject.organization.availableKeys - connectedProject.organization.usedKeys
+                  formatNumber(connectedProject.organization.availableKeys - connectedProject.organization.usedKeys)
                 }
               />
               <OverviewItemLink

package/admin/src/pages/Upload/index.js

@@ -9,7 +9,7 @@ import { Button } from "@strapi/design-system/Button";
 import UploadIcon from "@strapi/icons/Upload";
 import { Box } from "@strapi/design-system/Box";
 import { Alert } from "@strapi/design-system/Alert";
-import { Loader } from "@strapi/design-system/Loader";
+import Loader from "../../modules/@common/components/PluginPageLoader";
 import LocalazyUploadService from "../../modules/localazy-upload/services/localazy-upload-service";
 import areLocalesCompatible from "../../modules/@common/utils/are-locales-compatible";
 import { getStrapiDefaultLocale, getLocalazySourceLanguage } from "../../modules/@common/utils/get-default-locale";
@@ -21,6 +21,9 @@ import ReadDocsButton from "../../modules/localazy-upload/components/ReadDocsBut
 import redirectToPluginRoute, {
   PLUGIN_ROUTES,
 } from "../../modules/@common/utils/redirect-to-plugin-route";
+import { getLocalazyIdentity } from "../../state/localazy-identity";
+import ProductAnalyticsService from "../../modules/@common/services/product-analytics-service";
+import PluginSettingsService from "../../modules/plugin-settings/services/plugin-settings-service";
 
 import "../../i18n";
 
@@ -38,6 +41,7 @@ function Upload(props) {
   const [isUploading, setIsUploading] = useState(false);
   const [strapiDefaultLocale, setStrapiDefaultLocale] = useState(null);
   const [localazySourceLanguage, setLocalazySourceLanguage] = useState(null);
+  const [localazyIdentity] = getLocalazyIdentity();
 
   const onChangeSettingsClick = () => {
     redirectToPluginRoute(PLUGIN_ROUTES.CONTENT_TRANSFER_SETUP);
@@ -49,6 +53,16 @@ function Upload(props) {
     setIsUploading(true);
     const result = await LocalazyUploadService.upload();
     setUploadResult(result);
+
+    // track upload
+    ProductAnalyticsService.trackUploadToLocalazy(
+      localazyIdentity.user.id,
+      localazyIdentity.project,
+      {
+        "Source Language Code": localazySourceLanguage.code,
+      }
+    );
+
     setIsUploading(false);
     setShowUploadFinishedModal(true);
   };
@@ -66,6 +80,8 @@ function Upload(props) {
       setModelChanged(await hasModelChanged());
       setLocalesIncompatible(!(await areLocalesCompatible(strapiDefaultLocale, localazySourceLanguage)));
 
+      PluginSettingsService.updatePluginSettings({ defaultRoute: PLUGIN_ROUTES.UPLOAD });
+
       setIsLoading(false);
     }
     initComponent();

package/admin/src/plugins/analytics-service.js

@@ -0,0 +1,14 @@
+import createPluginConnectorAxiosInstance from "../utils/createPluginConnectorAxiosInstance";
+
+const ANALYTICS_PATH = "/analytics";
+const axiosInstance = createPluginConnectorAxiosInstance();
+export default class AnalyticsService {
+  static async trackEvent(event, data) {
+    const result = await axiosInstance.post(`${ANALYTICS_PATH}/track`, {
+      event,
+      ...data,
+    });
+
+    return result.data;
+  }
+}

package/admin/src/utils/createPluginConnectorAxiosInstance.js

@@ -0,0 +1,45 @@
+/**
+ * axios with plugin connector config.
+ */
+
+import axios from "axios";
+import { config } from "../../../server";
+
+const BASE_PLUGIN_PATH = config.default.LOCALAZY_PLUGIN_CONNECTOR_API_URL;
+
+const createPluginConnectorAxiosInstance = (baseUrl = null) => {
+  if (baseUrl === null) {
+    baseUrl = `${BASE_PLUGIN_PATH}`;
+  }
+
+  const instance = axios.create({
+    baseURL: baseUrl,
+  });
+
+  instance.interceptors.request.use(
+    async (config) => {
+      config.headers = {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        // Strapi plugin id in terms of plugin connector
+        "X-Localazy-Plugin-Id": 1,
+      };
+
+      return config;
+    },
+    (error) => {
+      Promise.reject(error);
+    }
+  );
+
+  instance.interceptors.response.use(
+    (response) => response,
+    (error) => {
+      throw error;
+    }
+  );
+
+  return instance;
+};
+
+export default createPluginConnectorAxiosInstance;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@localazy/strapi-plugin",
-  "version": "0.1.6",
+  "version": "0.1.9",
   "description": "The official Strapi Plugin by Localazy.",
   "strapi": {
     "name": "localazy",
@@ -28,8 +28,6 @@
   },
   "dependencies": {
     "@localazy/ts-api": "^1.0.6",
-    "@strapi/design-system": "^1.0.0",
-    "@strapi/icons": "^1.0.0",
     "deep-keys": "^0.5.0",
     "i18next": "^21.6.13",
     "isomorphic-fetch": "^3.0.0",
@@ -41,7 +39,9 @@
     "styled-components": "^5.3.3"
   },
   "peerDependencies": {
-    "@strapi/strapi": "^4.0.0"
+    "@strapi/strapi": "^4.0.0",
+    "@strapi/design-system": "^1.0.0",
+    "@strapi/icons": "^1.0.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.17.7",

package/server/config/development/index.js

@@ -2,8 +2,8 @@
 
 module.exports = {
   LOCALAZY_OAUTH_URL: "https://testing.localazy.com/oauth/authorize",
-  LOCALAZY_OAUTH_APP_CLIENT_ID: "18503917571895066465",
-  LOCALAZY_PLUGIN_CONNECTOR_API_URL: "http://localhost:3000",
+  LOCALAZY_OAUTH_APP_CLIENT_ID: "18503917571895066466",
+  LOCALAZY_PLUGIN_CONNECTOR_API_URL: "https://testing.localazy.com/plugin-connector",
   LOCALAZY_PUBLIC_API_URL: "https://testing.localazy.com/pubapi",
   LOCALAZY_PLUGIN_ID: "1",
   LOCALAZY_DEFAULT_FILE_NAME: "strapi.json",

package/server/config/index.js

@@ -1,15 +1,20 @@
 "use strict";
 
 // depending on the STRAPI_ADMIN_LOCALAZY_ENV, use the correct config
-const config =
-  process.env.STRAPI_ADMIN_LOCALAZY_ENV === "development"
-    ? require("./development/index")
-    : require("./production/index");
+let config = require("./production/index");
+
+if (process.env.STRAPI_ADMIN_LOCALAZY_ENV === "local") {
+  config = require("./local/index");
+}
+
+if (process.env.STRAPI_ADMIN_LOCALAZY_ENV === "development") {
+  config = require("./development/index");
+}
 
 module.exports = {
   default: {
     // Default plugin configuration, merged with the user configuration
     ...(config || {}),
   },
-  validator() {},
+  validator() { },
 };

package/server/config/local/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+module.exports = {
+  LOCALAZY_OAUTH_URL: "https://testing.localazy.com/oauth/authorize",
+  LOCALAZY_OAUTH_APP_CLIENT_ID: "18503917571895066465",
+  LOCALAZY_PLUGIN_CONNECTOR_API_URL: "http://localhost:3000",
+  LOCALAZY_PUBLIC_API_URL: "https://testing.localazy.com/pubapi",
+  LOCALAZY_PLUGIN_ID: "1",
+  LOCALAZY_DEFAULT_FILE_NAME: "strapi.json",
+  LOCALAZY_DEFAULT_FILE_PATH: "",
+  LOCALAZY_DEFAULT_FILE_EXTENSION: "json",
+  LOCALAZY_DEFAULT_LOCALE: "en",
+  LOCALAZY_API_USER_JWT_COOKIE_NAME: "LOCALAZY-API-USER-JWT",
+  LOCALAZY_API_USER_COOKIE_EXPIRATION: 7,
+};

package/server/controllers/localazy-transfer-controller.js

@@ -25,7 +25,9 @@ module.exports = {
       const messageReport = [];
 
       // Strapi Service
-      const StrapiService = strapi.plugin("localazy").service("strapiService");
+      const StrapiService = strapi
+        .plugin("localazy")
+        .service("strapiService");
 
       // Strapi i18n Service
       const StrapiI18nService = strapi

package/server/controllers/plugin-settings-controller.js

@@ -14,4 +14,18 @@ module.exports = {
       .service("pluginSettingsService")
       .updateContentTransferSetup(ctx.request.body);
   },
+
+  async getPluginSettings(ctx) {
+    ctx.body = await strapi
+      .plugin("localazy")
+      .service("pluginSettingsService")
+      .getPluginSettings();
+  },
+
+  async updatePluginSettings(ctx) {
+    ctx.body = await strapi
+      .plugin("localazy")
+      .service("pluginSettingsService")
+      .updatePluginSettings(ctx.request.body);
+  }
 };

package/server/db/model/plugin-settings.js

@@ -0,0 +1,13 @@
+"use strict";
+
+const KEY = "plugin-settings";
+
+
+const emptyPluginSettings = {
+  defaultRoute: null,
+};
+
+module.exports = {
+  KEY,
+  emptyPluginSettings,
+};

package/server/routes/plugin-settings.js

@@ -19,4 +19,20 @@ module.exports = [
       policies: [],
     },
   },
+  {
+    method: "GET",
+    path: `${ROUTE_PREFIX}/plugin-settings`,
+    handler: "pluginSettingsController.getPluginSettings",
+    config: {
+      policies: [],
+    },
+  },
+  {
+    method: "PUT",
+    path: `${ROUTE_PREFIX}/plugin-settings`,
+    handler: "pluginSettingsController.updatePluginSettings",
+    config: {
+      policies: [],
+    },
+  }
 ];

package/server/services/plugin-settings-service.js

@@ -1,17 +1,20 @@
 "use strict";
 
-const {
-  KEY,
-  emptyContentTransferSetup,
-} = require("../db/model/content-transfer-setup");
+const contentTransferSetupModel = require("../db/model/content-transfer-setup");
+
+const pluginSettingsModel = require("../db/model/plugin-settings");
+// {
+//   KEY,
+//   emptyPluginSettings,
+// } = require("../db/model/plugin-settings");
 const getStrapiStore = require("../db/model/utils/get-strapi-store");
 
 module.exports = ({ strapi }) => ({
   async getContentTransferSetup() {
     const pluginStore = getStrapiStore(strapi);
-    const setup = await pluginStore.get({ key: KEY });
+    const setup = await pluginStore.get({ key: contentTransferSetupModel.KEY });
 
-    return setup || emptyContentTransferSetup;
+    return setup || contentTransferSetupModel.emptyContentTransferSetup;
   },
 
   async updateContentTransferSetup(setup) {
@@ -21,10 +24,28 @@ module.exports = ({ strapi }) => ({
     };
     const pluginStore = getStrapiStore(strapi);
     await pluginStore.set({
-      key: KEY,
+      key: contentTransferSetupModel.KEY,
       value: newSetup,
     });
 
     return newSetup;
   },
+
+  async getPluginSettings() {
+    const pluginStore = getStrapiStore(strapi);
+    const settings = await pluginStore.get({ key: pluginSettingsModel.KEY });
+
+    return settings || pluginSettingsModel.emptyPluginSettings;
+  },
+
+  async updatePluginSettings(settings) {
+    const newSettings = settings;
+    const pluginStore = getStrapiStore(strapi);
+    await pluginStore.set({
+      key: pluginSettingsModel.KEY,
+      value: newSettings,
+    });
+
+    return newSettings;
+  },
 });

package/server/services/strapi-i18n-service.js

@@ -13,17 +13,18 @@ module.exports = ({ strapi }) => ({
   async createStrapiLocale(ctx, isoLocalazy) {
     try {
       const isoStrapi = isoLocalazyToStrapi(isoLocalazy);
-      const localeName = intlDisplayName(isoLocalazy);
+      let localeName = intlDisplayName(isoStrapi);
 
       if (!localeName || !isoStrapi) {
         throw new Error("Invalid locale");
       }
+      localeName = `${localeName} (${isoStrapi})`;
 
       const newLocaleCtx = { ...ctx };
       newLocaleCtx.request.body = {
         isDefault: false,
         code: isoStrapi,
-        name: localeName,
+        name: localeName.substring(0, 50), // limit name to 50 characters (given by Strapi)
       };
 
       await strapi
@@ -39,7 +40,6 @@ module.exports = ({ strapi }) => ({
   parseLocalazyKey(key) {
     const split = key.split(/\.|\[|\]/);
     const filteredSplit = split.filter((item) => item !== "");
-    // return split;
 
     return {
       uid: `${filteredSplit[0]}.${filteredSplit[1]}`,

package/server/utils/__tests__/iso-locales-utils.test.js

@@ -0,0 +1,104 @@
+"use strict";
+
+const { isoStrapiToLocalazy, isoLocalazyToStrapi } = require("../iso-locales-utils.js");
+
+describe("iso-locales-utils.js", () => {
+  describe("transform Strapi ISO to Localazy ISO", () => {
+    it("should transform codes containing lang only", () => {
+      // setup
+      const input = ["en", "fr", "de", "es", "it", "ja", "ko", "pt", "ru", "zh"];
+
+      // execute
+      const output = input.map((item) => isoStrapiToLocalazy(item));
+
+      // verify
+      const expected = input;
+      expect(output).toEqual(expected);
+    });
+
+    it("should transform codes containing lang-region", () => {
+      // setup
+      const input = ["en-US", "fr-CA", "de-DE", "es-ES", "it-IT", "ja-JP", "ko-KR", "pt-BR", "ru-RU", "zh-CN"];
+
+      // execute
+      const output = input.map((item) => isoStrapiToLocalazy(item));
+
+      // verify
+      const expected = ["en_US", "fr_CA", "de_DE", "es_ES", "it_IT", "ja_JP", "ko_KR", "pt_BR", "ru_RU", "zh_CN"];
+      expect(output).toEqual(expected);
+    });
+
+    it("should transform codes containing lang-script", () => {
+      // setup
+      const input = ["en-Latn", "fr-Latn", "de-Latn", "es-Latn", "it-Latn", "ja-Latn", "ko-Latn", "pt-Latn", "ru-Latn", "zh-Latn"];
+
+      // execute
+      const output = input.map((item) => isoStrapiToLocalazy(item));
+
+      // verify
+      const expected = ["en#Latn", "fr#Latn", "de#Latn", "es#Latn", "it#Latn", "ja#Latn", "ko#Latn", "pt#Latn", "ru#Latn", "zh#Latn"];
+      expect(output).toEqual(expected);
+    });
+
+    it("should transform codes containing lang-script-region", () => {
+      // setup
+      const input = ["en-Latn-US", "fr-Latn-CA", "de-Latn-DE", "es-Latn-ES", "it-Latn-IT", "ja-Latn-JP", "ko-Latn-KR", "pt-Latn-BR", "ru-Latn-RU", "zh-Hant-CN"];
+
+      // execute
+      const output = input.map((item) => isoStrapiToLocalazy(item));
+
+      // verify
+      const expected = ["en_US#Latn", "fr_CA#Latn", "de_DE#Latn", "es_ES#Latn", "it_IT#Latn", "ja_JP#Latn", "ko_KR#Latn", "pt_BR#Latn", "ru_RU#Latn", "zh_CN#Hant"];
+      expect(output).toEqual(expected);
+    });
+  });
+
+  describe("transform Strapi ISO to Localazy ISO", () => {
+    it("should transform codes containing lang only", () => {
+      // setup
+      const input = ["en", "fr", "de", "es", "it", "ja", "ko", "pt", "ru", "zh"];
+
+      // execute
+      const output = input.map((item) => isoLocalazyToStrapi(item));
+
+      // verify
+      const expected = input;
+      expect(output).toEqual(expected);
+    });
+
+    it("should transform codes containing lang-region", () => {
+      // setup
+      const input = ["en_US", "fr_CA", "de_DE", "es_ES", "it_IT", "ja_JP", "ko_KR", "pt_BR", "ru_RU", "zh_CN"];
+
+      // execute
+      const output = input.map((item) => isoLocalazyToStrapi(item));
+
+      // verify
+      const expected = ["en-US", "fr-CA", "de-DE", "es-ES", "it-IT", "ja-JP", "ko-KR", "pt-BR", "ru-RU", "zh-CN"];
+      expect(output).toEqual(expected);
+    });
+
+    it("should transform codes containing lang-script", () => {
+      // setup
+      const input = ["en#Latn", "fr#Latn", "de#Latn", "es#Latn", "it#Latn", "ja#Latn", "ko#Latn", "pt#Latn", "ru#Latn", "zh#Latn"];
+
+      // execute
+      const output = input.map((item) => isoLocalazyToStrapi(item));
+
+      // verify
+      const expected = ["en-Latn", "fr-Latn", "de-Latn", "es-Latn", "it-Latn", "ja-Latn", "ko-Latn", "pt-Latn", "ru-Latn", "zh-Latn"];
+      expect(output).toEqual(expected);
+    });
+
+    it("should transform codes containing lang-script-region", () => {
+      // setup
+      const input = ["en_US#Latn", "fr_CA#Latn", "de_DE#Latn", "es_ES#Latn", "it_IT#Latn", "ja_JP#Latn", "ko_KR#Latn", "pt_BR#Latn", "ru_RU#Latn", "zh_CN#Hant"];
+
+      // execute
+      const output = input.map((item) => isoLocalazyToStrapi(item));
+      // verify
+      const expected = ["en-Latn-US", "fr-Latn-CA", "de-Latn-DE", "es-Latn-ES", "it-Latn-IT", "ja-Latn-JP", "ko-Latn-KR", "pt-Latn-BR", "ru-Latn-RU", "zh-Hant-CN"];
+      expect(output).toEqual(expected);
+    });
+  });
+});

package/server/utils/intl-display-name.js

@@ -1,7 +1,4 @@
-const { isoStrapiToLocalazy } = require("./iso-locales-utils.js");
-
-module.exports = (isoCode) => {
-  const isoDashed = isoStrapiToLocalazy(isoCode);
+module.exports = (isoStrapi) => {
   let languageNames = new Intl.DisplayNames(["en"], { type: "language" });
-  return languageNames.of(isoDashed);
+  return languageNames.of(isoStrapi);
 };

package/server/utils/iso-locales-utils.js

@@ -5,7 +5,28 @@ const isoStrapiToLocalazy = (isoStrapi) => {
     return null;
   }
 
-  return isoStrapi.replace("_", "-");
+  const split = isoStrapi.split("-");
+  const language = split[0];
+
+  const hasRegionAndScript = split.length === 3;
+  if (hasRegionAndScript) {
+    const script = split[1];
+    const region = split[2];
+    return `${language}_${region}#${script}`;
+  }
+
+  const hasPossiblyRegion = split.length === 2;
+  if (hasPossiblyRegion) {
+    const regionOrScript = split[1];
+
+    // is it script - the way Strapi resolves that
+    const isItRegion = regionOrScript.toUpperCase() === regionOrScript;
+
+    // it is region; otherwise it is script
+    return isItRegion ? `${language}_${regionOrScript}` : `${language}#${regionOrScript}`;
+  }
+
+  return isoStrapi.replace("-", "_");
 };
 
 const isoLocalazyToStrapi = (isoLocalazy) => {
@@ -13,7 +34,24 @@ const isoLocalazyToStrapi = (isoLocalazy) => {
     return null;
   }
 
-  return isoLocalazy.replace("-", "_");
+  const scriptIndex = isoLocalazy.indexOf("#");
+  const hasScript = scriptIndex > -1;
+  if (hasScript) {
+    const script = isoLocalazy.substring(scriptIndex + 1);
+    const isoLocalazyWithoutScript = isoLocalazy.substring(0, scriptIndex);
+    const split = isoLocalazyWithoutScript.split("_");
+    const language = split[0];
+    const region = split[1];
+
+    if (!region) {
+      return `${language}-${script}`;
+    }
+
+    const isoStrapi = `${language}-${script}-${region.toUpperCase()}`;
+    return isoStrapi;
+  }
+
+  return isoLocalazy.replace("_", "-");
 };
 
 module.exports = {