development: strapi-google-translate

.gitignore

@@ -0,0 +1,106 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+.tmp

.npmignore

@@ -0,0 +1,19 @@
+.github
+
+cypress
+
+copy.sh
+
+cypress.json
+README.md
+
+Dockerfile
+
+static
+
+.eslintignore
+.eslintrc.back.js
+.eslintrc.front.js
+.eslintrc.js
+.prettierignore
+.prettierrc.js

README.md

@@ -0,0 +1,123 @@
+<h1 align="center">Translator</h1>
+<p align="center">Translator plugin to easily translate your Strapi content into multiple languages.</p>
+
+<br />
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/strapi-google-translate">
+<img alt="GitHub package.json version" src="https://img.shields.io/github/package-json/v/manishkatyan/strapi-google-translate?label=npm&logo=npm">
+</a>
+<a href="https://www.npmjs.org/package/strapi-google-translate">
+<img src="https://img.shields.io/npm/dm/strapi-google-translate.svg" alt="Monthly download on NPM" />
+</a>
+
+</p>
+
+<br>
+
+<img style="width: 100%; height: auto;" src="./static/translator-overview.gif" alt="Translator-gif" /> <br/>
+
+<br/><br/>
+
+## Translator plugin for Strapi
+
+[Google Cloud Translate](https://cloud.google.com/translate) Make your content and apps multilingual with fast, dynamic machine translation.
+
+[Strapi](https://strapi.io/) is the leading open-source headless Content Management System. It’s 100% JavaScript, fully customizable and developer-first.
+
+## Overview: Start your Content Translation
+
+Translator plugin enables you to translate your Strapi content into multiple languages.
+
+Setting up the plugin is super easy and can be completed within 10 minutes.
+
+1. Enter your enviornment variables in `.env` file.
+2. Add the list of languages you want in strapi setting.
+3. Enable localization for the content type you want to translate.
+4. Go to content manager select the collection type you want to translate,select language and click on translate.
+
+<br/><br/>
+
+## ✨ Features
+
+1. Quick installation and setup.
+1. Easily translate your content to other languages.
+1. Able to configure translation strategy schema for each field of the particular content type.
+
+<br/><br/>
+
+## 🖐 Requirements
+
+The requirements to install the Stripe Payments plugin is the same as those to install Strapi.
+
+Please refer to the official Strapi installation requirement doc here: [Installation Requirements](https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html).
+
+**Minimum environment requirements**
+
+- Node.js `>=14.x.x <=18.x.x`
+- NPM `>=6.x.x`
+
+We are following the [official Node.js releases timelines](https://nodejs.org/en/about/releases/).
+
+**Supported Strapi versions**:
+
+- Strapi V4.4.5 (recently tested)
+
+> The Stripe Payments plugin is designed for **Strapi v4.x**. It won't work with Strapi v3.x.
+
+<br/><br/>
+
+## ⏳ Installation
+
+Use **npm** to install this plugin within your Strapi project.
+
+[Refer to this doc to install npm](https://docs.npmjs.com/cli/v6/commands/npm-install)
+
+```bash
+npm i strapi
+```
+
+After successful installation please add the below enviornment variables in `.env` files
+
+```bash
+STRAPI_BACKEND_URL=http://localhost:1337
+STRAPI_GOOGLE_TRANSLATE_API_TOKEN=your strapi api token
+GOOGLE_TRANSLATE_JSON={"type":"service_account","project_id":"your project_id","private_key_id":"your private key id","private_key":"-----BEGIN PRIVATE KEY-----\your private key\n-----END PRIVATE KEY-----\n","client_email": "your client email","client_id": "your client id","auth_uri": "your auth uri","token_uri": "your token uri","auth_provider_x509_cert_url": "your provider secret","client_x509_cert_url": "your client"}
+```
+
+> Please make sure to add your google translate json in one line as shown above.
+
+> Also to create strapi api token, Go to settingd &gt; API Tokens &gt; Create new Api Tokens &gt; enter api name, select token duration `Unlimited` , select Token type `Full Access` &gt; save &gt; copy the api token and add in your `.env` file.
+
+After you would need to build a fresh package that includes the Google Translate plugin UI. Execute the commands below:
+
+```bash
+# with npm (option 1)
+$ npm run build
+$ npm run develop
+
+# with npx (option 2)
+$ npx strapi  build
+$ npx strapi  develop
+```
+
+The ** Translator** plugin should appear in the **Plugins** section of the Strapi sidebar after you run the app again.
+
+Now you are ready to accept online payments via Stripe on your Strapi website 🎉
+
+<br/><br/>
+
+## 🔧 Configuration
+
+You can easily configure the Stripe Payments plugin to connect with your Stripe Account.
+
+- Go to `setting -> Translator -> Configuration`.
+- On the configuration page, you can select translation strategy for each field.
+- Click on Save to save the Translator confiiguration.
+
+<br/>
+## 📝 License
+
+[MIT License](LICENSE.md)
+
+Copyright (c) AsyncWeb Technology.

admin/src/components/CMEditViewTranslateLocale/ConfirmDialog.js

@@ -0,0 +1,122 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Dialog, DialogBody, DialogFooter } from "@strapi/design-system/Dialog";
+import ExclamationMarkCircle from "@strapi/icons/ExclamationMarkCircle";
+import FileError from "@strapi/icons/FileError";
+import Cross from "@strapi/icons/Cross";
+import { Flex } from "@strapi/design-system/Flex";
+import { Stack } from "@strapi/design-system/Stack";
+import { Typography } from "@strapi/design-system/Typography";
+import { Button } from "@strapi/design-system/Button";
+import Check from "@strapi/icons/Check";
+import { Loader } from "@strapi/design-system/Loader";
+
+const ConfirmDialog = ({
+  dialogId,
+  isVisible,
+  handleClose,
+  handleConfirm,
+  message,
+  heading,
+  state,
+  loading,
+}) => {
+  const getDialogFooter = () => {
+    let footer;
+    if (state === "CONFIRMATION") {
+      footer = (
+        <DialogFooter
+          startAction={
+            <Button onClick={handleClose} variant="tertiary">
+              Cancel
+            </Button>
+          }
+          endAction={
+            <Button
+              variant="secondary"
+              startIcon={<Check />}
+              onClick={handleConfirm}
+            >
+              Confirm
+            </Button>
+          }
+        />
+      );
+    } else if (state === "ERROR") {
+      footer = (
+        <DialogFooter
+          startAction={
+            <Button
+              variant="danger-light"
+              startIcon={<Cross />}
+              onClick={handleClose}
+            >
+              Close
+            </Button>
+          }
+          endAction={<></>}
+        />
+      );
+    } else if (state === "SUCCESS") {
+      footer = (
+        <DialogFooter
+          startAction={
+            <Button
+              variant="success"
+              startIcon={<check />}
+              onClick={handleClose}
+            >
+              Close
+            </Button>
+          }
+          endAction={<></>}
+        />
+      );
+    }
+    return footer;
+  };
+
+  const getBodyIcon = () => {
+    let icon;
+    if (state === "CONFIRMATION") {
+      icon = loading ? "" : <ExclamationMarkCircle />;
+    } else if (state === "ERROR") {
+      icon = loading ? "" : <FileError />;
+    } else if (state === "SUCCESS") {
+      icon = "";
+    }
+    return icon;
+  };
+  return (
+    <div>
+      <Dialog
+        id={dialogId}
+        onClose={handleClose}
+        title={heading}
+        isOpen={isVisible}
+      >
+        <DialogBody icon={getBodyIcon()}>
+          <Stack size={2}>
+            <Flex justifyContent="center">
+              {loading ? (
+                <Loader>Waiting for response...</Loader>
+              ) : (
+                <Typography id="confirm-description">{message}</Typography>
+              )}
+            </Flex>
+          </Stack>
+        </DialogBody>
+        {loading ? "" : getDialogFooter()}
+      </Dialog>
+    </div>
+  );
+};
+
+ConfirmDialog.propTypes = {
+  dialogId: PropTypes.string.isRequired,
+  isVisible: PropTypes.bool.isRequired,
+  handleClose: PropTypes.func.isRequired,
+  handleDelete: PropTypes.func.isRequired,
+};
+
+export default ConfirmDialog;