@localazy/strapi-plugin 0.1.0

package/admin/src/modules/settings/components/OverviewItem/index.js

@@ -0,0 +1,44 @@
+/*
+ *
+ * OverviewItem
+ *
+ */
+
+import React from "react";
+import { GridItem } from '@strapi/design-system/Grid';
+import { Box } from "@strapi/design-system/Box";
+import { Typography } from "@strapi/design-system/Typography";
+import PropTypes from "prop-types";
+
+function OverviewItem(props) {
+
+  return (
+    <GridItem padding={1} col={6} s={12}>
+      <Box>
+        <Typography
+          variant="sigma"
+          textColor="neutral600"
+          textTransform="uppercase"
+        >
+          {props.label}
+        </Typography>
+      </Box>
+      <Box>
+        <Typography
+          variant="omega"
+          textColor="neutral800"
+          fontWeight="semiBold"
+        >
+          {props.value}
+        </Typography>
+      </Box>
+    </GridItem>
+  );
+}
+
+OverviewItem.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export default OverviewItem;

package/admin/src/modules/settings/components/OverviewItemLink/index.js

@@ -0,0 +1,34 @@
+/*
+ *
+ * OpenProjectInLocalalazy
+ *
+ */
+
+import React from "react";
+import { GridItem } from '@strapi/design-system/Grid';
+import { Typography } from "@strapi/design-system/Typography";
+import { Link } from "@strapi/design-system/Link";
+import PropTypes from "prop-types";
+
+function OverviewItemLink(props) {
+  return (
+    <GridItem padding={1} col={6} s={12}>
+      <Link href={props.to} isExternal>
+        <Typography
+          variant="sigma"
+          textColor="primary600"
+          textTransform="uppercase"
+        >
+          {props.label}
+        </Typography>
+      </Link>
+    </GridItem>
+  );
+}
+
+OverviewItemLink.propTypes = {
+  label: PropTypes.string.isRequired,
+  to: PropTypes.string.isRequired,
+};
+
+export default OverviewItemLink;

package/admin/src/modules/settings/components/PrerequisitiesInfo/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Box } from "@strapi/design-system/Box";
+import { useTranslation } from "react-i18next";
+import { Typography } from "@strapi/design-system/Typography";
+
+import "../../../../i18n";
+
+function PrerequisitiesInfo() {
+  const { t } = useTranslation();
+
+  return (
+    <Box>
+      <Typography variant="omega" fontWeight="semiBold">
+        {t("settings.internationalization_plugin")}
+      </Typography>
+      <Typography variant="omega">
+        {t("settings.has_to_be_installed")}
+      </Typography>
+      <br />
+      <Typography variant="omega">
+        {t("settings.transfer_setup_message_a")}
+      </Typography>
+      <Typography variant="omega" fontWeight="semiBold">
+        {t("settings.transfer_setup_message_b")}
+      </Typography>
+    </Box>
+  );
+}
+
+export default PrerequisitiesInfo;

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

@@ -0,0 +1,13 @@
+export default {
+  description: "Overview of the connected Localazy account and project.",
+  localazy_account_details: "Localazy Account Details",
+  connected_user: "Connected User",
+  connected_project: "Connected Project",
+  connected_organization: "Connected Organization",
+  remaining_organization_keys: "Remaining Organization Keys",
+  open_project_in_localazy: "Open project in Localazy",
+  internationalization_plugin: "Internationalization Plugin ",
+  has_to_be_installed: "has to be installed.",
+  transfer_setup_message_a: "Select which parts of your project you want to upload in ",
+  transfer_setup_message_b: "Settings > Localazy Settings > Content Transfer Setup."
+}

package/admin/src/modules/user/model/localazy-identity.js

@@ -0,0 +1,14 @@
+export const emptyIdentity = {
+  accessToken: '',
+  project: {
+      id: '',
+      image: '',
+      name: '',
+      url: '',
+  },
+  scope: '',
+  user: {
+      id: '',
+      name: '',
+  },
+};

package/admin/src/modules/user/services/localazy-user-service.js

@@ -0,0 +1,38 @@
+/* eslint-disable no-useless-catch */
+import createAxiosInstance from "../../../utils/createAxiosInstance";
+
+const BASE_PATH = "/user";
+const axiosInstance = createAxiosInstance();
+
+export default class LocalazyUserService {
+  static async getIdentity() {
+    try {
+      const result = await axiosInstance.get(`${BASE_PATH}`);
+
+      return result.data;
+    } catch (e) {
+      throw e;
+    }
+  }
+
+  static async updateIdentity(localazyIdentity) {
+    try {
+      // store in DB plugin settings
+      const result = await axiosInstance.put(`${BASE_PATH}`, localazyIdentity);
+
+      return result.data;
+    } catch (e) {
+      throw e;
+    }
+  }
+
+  static async deleteIdentity() {
+    try {
+      const result = await axiosInstance.delete(`${BASE_PATH}`);
+
+      return result.data;
+    } catch (e) {
+      throw e;
+    }
+  }
+}

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

@@ -0,0 +1,152 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+import React, { useEffect, useState } from "react";
+import { Switch, Router, Route, useLocation } from "react-router-dom";
+import { NotFound } from "@strapi/helper-plugin";
+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 pluginId from "../../pluginId";
+import Download from "../Download";
+import Settings from "../Settings";
+import Upload from "../Upload";
+import Login from "../Login";
+import SideNav from "../../modules/@common/components/SideNav";
+import isPluginRoute from "../../modules/@common/utils/is-plugin-route";
+import redirectToPluginRoute, {
+  PLUGIN_ROUTES,
+} from "../../modules/@common/utils/redirect-to-plugin-route";
+import getHeaderTitle from "../../modules/@common/utils/get-header-title";
+import getHeaderSubtitle from "../../modules/@common/utils/get-header-subtitle";
+import LocalazyUserService from "../../modules/user/services/localazy-user-service";
+import {
+  setLocalazyIdentity,
+  getLocalazyIdentity,
+} from "../../state/localazy-identity";
+import history from "../../modules/@common/utils/history";
+
+import "../../i18n";
+
+function App() {
+  const location = useLocation();
+  const { t } = useTranslation();
+
+  /**
+   * is processing app loading
+   */
+  const [isLoadingApp, setIsLoadingApp] = useState(true);
+
+  /**
+   * is user logged in
+   */
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  /**
+   * side navigation component apperance and title
+   */
+  const [renderSideNav, setRenderSideNav] = useState(false);
+  const [headerTitle, setHeaderTitle] = useState(getHeaderTitle(location));
+  const [headerSubtitle, setHeaderSubtitle] = useState(getHeaderSubtitle(location));
+
+  /**
+   * localazy identity / access token
+   */
+  const [localazyIdentity] = getLocalazyIdentity();
+  const hasLocalazyIdentity = () => !!localazyIdentity.accessToken;
+
+
+
+  useEffect(() => {
+    const unlisten = history.listen((location) => {
+      setHeaderTitle(getHeaderTitle(location));
+      setHeaderSubtitle(getHeaderSubtitle(location));
+    });
+
+    return unlisten;
+  }, []);
+
+  useEffect(() => {
+    async function fetchData() {
+      setIsLoadingApp(true);
+
+      const identity = await LocalazyUserService.getIdentity();
+      setLocalazyIdentity(identity);
+      setIsLoggedIn(hasLocalazyIdentity());
+      setRenderSideNav(hasLocalazyIdentity());
+
+      setIsLoadingApp(false);
+
+      // is root route
+      if (isPluginRoute(location)) {
+        if (!hasLocalazyIdentity()) {
+          redirectToPluginRoute(PLUGIN_ROUTES.LOGIN);
+        } else {
+          redirectToPluginRoute(PLUGIN_ROUTES.DOWNLOAD);
+        }
+      }
+    }
+    fetchData();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [localazyIdentity.accessToken]);
+
+  return (
+    <Router history={history}>
+      <ThemeProvider theme={lightTheme}>
+        <Box background="neutral100">
+          <Layout sideNav={renderSideNav && <SideNav />}>
+            {isLoadingApp && <Loader>{t("common.loading_content")}</Loader>}
+            {!isLoadingApp && (
+              <>
+                {!isLoggedIn && (
+                  <Switch>
+                    <Route path={`/admin/plugins/${pluginId}/login`} exact>
+                      <Login
+                        title={headerTitle}
+                        subtitle={headerSubtitle}
+                      />
+                    </Route>
+                  </Switch>
+                )}
+
+                {isLoggedIn && (
+                  <Switch>
+                    <Route path={`/admin/plugins/${pluginId}/download`} exact>
+                      <Download
+                        title={headerTitle}
+                        subtitle={headerSubtitle}
+                      />
+                    </Route>
+                    <Route path={`/admin/plugins/${pluginId}/upload`} exact>
+                      <Upload
+                        title={headerTitle}
+                        subtitle={headerSubtitle}
+                      />
+                    </Route>
+                    <Route path={`/admin/plugins/${pluginId}/settings`} exact>
+                      <Settings
+                        title={headerTitle}
+                        subtitle={headerSubtitle}
+                      />
+                    </Route>
+                    <Route component={NotFound} />
+                  </Switch>
+                )}
+              </>
+            )}
+          </Layout>
+        </Box>
+      </ThemeProvider>
+    </Router>
+  );
+}
+
+export default App;

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

@@ -0,0 +1,179 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { HeaderLayout } from "@strapi/design-system/Layout";
+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 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";
+import TransferReport from "../../modules/@common/components/TransferReport";
+import ReadDocsButton from "../../modules/localazy-upload/components/ReadDocsButton";
+import "../../i18n";
+import { getLocalazyIdentity } from "../../state/localazy-identity";
+
+function Download(props) {
+  const { t } = useTranslation();
+
+  /**
+   * Component state
+   */
+  const [isLoading, setIsLoading] = useState(true);
+  const [modelChanged, setModelChanged] = useState(false);
+  const [localesIncompatible, setLocalesIncompatible] = useState(false);
+  const [showDownloadFinishedModal, setshowDownloadFinishedModal] =
+    useState(false);
+  const [downloadResult, setDownloadResult] = useState({});
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  /**
+     * localazy identity / access token
+     */
+  const [localazyIdentity] = getLocalazyIdentity();
+  const onTranslateInLocalazyClick = () => {
+    window.open(localazyIdentity.project.url, "_blank");
+  }
+
+  const onDownloadClick = async () => {
+    setIsDownloading(true);
+    const result = await LocalazyDownloadService.download();
+    setDownloadResult(result);
+    setIsDownloading(false);
+    setshowDownloadFinishedModal(true);
+  };
+
+  useEffect(() => {
+    async function initComponent() {
+      setIsLoading(true);
+
+      /**
+       * Handle alerts onload apperance
+       */
+      setModelChanged(await hasModelChanged());
+      setLocalesIncompatible(!(await areLocalesCompatible()));
+
+      setIsLoading(false);
+    }
+    initComponent();
+  }, []);
+
+  return (
+    <>
+      <HeaderLayout
+        title={props.title}
+        subtitle={props.subtitle}
+        primaryAction={
+          <Button
+            startIcon={<DownloadIcon />}
+            disabled={isLoading || modelChanged || localesIncompatible}
+            loading={isDownloading}
+            onClick={onDownloadClick}
+          >
+            {t("download.download_to_strapi")}
+          </Button>
+        }
+        as="h2"
+      />
+      {isLoading && <Loader>{t("common.loading_content")}</Loader>}
+      {!isLoading && (
+        <Box paddingRight={10} paddingLeft={10}>
+          <Box
+            background="neutral0"
+            paddingTop={6}
+            paddingRight={7}
+            paddingBottom={6}
+            paddingLeft={7}
+            hasRadius
+            shadow="tableShadow"
+          >
+            <Typography variant="omega">
+              {t("download.download_note_a")}
+            </Typography>
+            <Typography variant="omega" fontWeight="semiBold">
+              {t("download.download_note_b")}
+            </Typography>
+            <br />
+            <br />
+            <Typography variant="omega">
+              {t("download.make_sure_note_a")}
+            </Typography>
+            <Typography variant="omega" fontWeight="semiBold">
+              {t("download.make_sure_note_b")}
+            </Typography>
+            <Typography variant="omega">
+              {t("download.make_sure_note_c")}
+            </Typography>
+            <Box
+              paddingTop={4}
+              paddingBottom={4}
+            >
+              <Divider />
+            </Box>
+            <Box marginTop={4}>
+              <Flex gap="2">
+                <Button variant="secondary" onClick={onTranslateInLocalazyClick}>
+                  {t("download.translate_in_localazy")}
+                </Button>
+                <ReadDocsButton />
+              </Flex>
+            </Box>
+          </Box>
+          {showDownloadFinishedModal && (
+            <Box marginTop={4} marginBottom={4}>
+              <Alert
+                onClose={() => setshowDownloadFinishedModal(false)}
+                closeLabel={t("download.close")}
+                title={t("download.download_result")}
+                variant={downloadResult.success ? "success" : "danger"}
+              >
+                {downloadResult.success
+                  ? t("download.download_success")
+                  : t("download.download_failed")}
+              </Alert>
+            </Box>
+          )}
+          {localesIncompatible && (
+            <Box marginTop={4} marginBottom={4}>
+              <Alert
+                onClose={() => setLocalesIncompatible(false)}
+                closeLabel={t("download.close")}
+                title={t("download.languages_incompatible")}
+                variant="danger"
+              >
+                {t("download.languages_incompatible_message")}
+              </Alert>
+            </Box>
+          )}
+          {modelChanged && (
+            <Box marginTop={4} marginBottom={4}>
+              <Alert
+                onClose={() => setModelChanged(false)}
+                closeLabel={t("download.close")}
+                title={t("download.content_types_model_changed")}
+                variant="default"
+              >
+                {t("download.please_update_your_content")}
+              </Alert>
+            </Box>
+          )}
+          {downloadResult.report && downloadResult.report.length > 0 && (
+            <TransferReport report={downloadResult.report} />
+          )}
+        </Box>
+      )}
+    </>
+  );
+}
+
+Download.propTypes = {
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+};
+
+export default Download;

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

@@ -0,0 +1,8 @@
+import React from "react";
+import App from "../App";
+
+function Index() {
+  return <App />;
+}
+
+export default Index;

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

@@ -0,0 +1,94 @@
+/*
+ *
+ * Login
+ *
+ */
+
+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 { 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 "../../i18n";
+
+function Login(props) {
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  /**
+   * Localazy Strapi documentation link
+   */
+  const localazyStrapiDocsLink = "https://localazy.com/docs/strapi";
+
+  /**
+   * Handle fetched identity on login
+   * @param result fetched identity
+   */
+  const onLoginResultFetched = async (result) => {
+    await LocalazyUserService.updateIdentity(result);
+    setLocalazyIdentity(result);
+
+    if (result.accessToken) {
+      redirectToPluginRoute(PLUGIN_ROUTES.DOWNLOAD, history);
+    }
+  };
+
+  return (
+    <>
+      <HeaderLayout
+        title={props.title}
+        subtitle={props.subtitle}
+        as="h2"
+      />
+      {props.isLoading && (<Loader>{t("common.loading_content")}</Loader>)}
+      {!props.isLoading && (
+        <Box paddingLeft={10}>
+          <Box>
+            <Typography variant="epsilon" textColor="neutral600">
+              {t("common.localazy_plugin_description")}
+              <br />
+              {t("login.login_and_start_translating_your_project")}
+              <br />
+              <br />
+              {t("login.you_have_to_own_account_for_the_plugin_to_work_properly")}
+            </Typography>
+          </Box>
+          <Box paddingTop={6}>
+            <LoginButton onResultFetched={onLoginResultFetched} />
+          </Box>
+          <Box paddingTop={6}>
+            <Link href={localazyStrapiDocsLink} isExternal>
+              <Typography variant="sigma" textColor="primary600">
+                {t("login.read_the_documentation")}
+              </Typography>
+            </Link>
+          </Box>
+        </Box>
+      )
+      }
+    </>
+  );
+}
+
+Login.propTypes = {
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+  isLoading: PropTypes.bool,
+};
+
+Login.defaultProps = {
+  isLoading: false,
+};
+
+export default Login;

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

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from "react";
+import { Box } from "@strapi/design-system/Box";
+import { Switch, Route } from "react-router-dom";
+import { ThemeProvider } from "@strapi/design-system/ThemeProvider";
+import { lightTheme } from "@strapi/design-system/themes";
+import pluginId from "../../pluginId";
+import ContentTransferSetup from "../../modules/plugin-settings/components/ContentTransferSetup";
+import LocalazyUserService from "../../modules/user/services/localazy-user-service";
+import { setLocalazyIdentity } from "../../state/localazy-identity";
+
+function PluginSettings() {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchData() {
+      setIsLoading(true);
+
+      const identity = await LocalazyUserService.getIdentity();
+      setLocalazyIdentity(identity);
+
+      setIsLoading(false);
+    }
+
+    fetchData();
+  }, []);
+
+  return (
+    !isLoading && (
+      <ThemeProvider theme={lightTheme}>
+        <Box padding={8}>
+          <Switch>
+            <Route path={`/settings/${pluginId}/content-transfer-setup`} exact>
+              <ContentTransferSetup />
+            </Route>
+          </Switch>
+        </Box>
+      </ThemeProvider>
+    )
+  );
+}
+
+export default PluginSettings;