From 50b0a3ea170ad1422190c6cecc0801749ae36555 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 9 Aug 2024 15:03:56 +0530 Subject: [PATCH] fix: resolve issue of support multi-language in public script file --- .../public/locales/en/translation.json | 2 ++ .../public/locales/fr/translation.json | 2 ++ apps/OpenSign/src/constant/const.js | 5 ++++ apps/OpenSign/src/i18n.js | 11 ++++++++ apps/OpenSign/src/pages/PdfRequestFiles.js | 18 ++++++------- apps/OpenSign/src/script/PublicTemplate.js | 26 ++++++++++++------- apps/OpenSign/webpack.config.js | 2 +- 7 files changed, 47 insertions(+), 19 deletions(-) diff --git a/apps/OpenSign/public/locales/en/translation.json b/apps/OpenSign/public/locales/en/translation.json index 094e63336..11417711a 100644 --- a/apps/OpenSign/public/locales/en/translation.json +++ b/apps/OpenSign/public/locales/en/translation.json @@ -303,7 +303,9 @@ "otp-verification":"OTP verification", "enter-otp":"Enter OTP", "verify":"Verify", + "verify-email-1":"Verify email", "resend":"Resend", + "contact-details":"Contact Details", "verify-email":"Please verify your email !", "send-otp":" Send OTP", "otp-placeholder":"Enter OTP received over email", diff --git a/apps/OpenSign/public/locales/fr/translation.json b/apps/OpenSign/public/locales/fr/translation.json index 3630388ea..c79e0f9bc 100644 --- a/apps/OpenSign/public/locales/fr/translation.json +++ b/apps/OpenSign/public/locales/fr/translation.json @@ -302,7 +302,9 @@ "otp-verification":"Vérification OTP", "enter-otp":"Entrez OTP", "verify":"Vérifier", + "verify-email-1":"Vérifier l'e-mail", "resend":"Renvoyer", + "contact-details" :"Coordonnées", "verify-email":"Veuillez vérifier votre email!", "send-otp":"envoyer un code à usage unique", "otp-placeholder":"Saisissez l'OTP reçu par e-mail", diff --git a/apps/OpenSign/src/constant/const.js b/apps/OpenSign/src/constant/const.js index 4ac828514..850980ece 100644 --- a/apps/OpenSign/src/constant/const.js +++ b/apps/OpenSign/src/constant/const.js @@ -11,3 +11,8 @@ export const isEnableSubscription = : false; export const isStaging = window.location.origin === "https://staging-app.opensignlabs.com"; +export const isPublic = + window.location.origin === "https://opensign.me" || + window.location.origin === "https://staging.opensign.me"; +export const isPublicStaging = + window.location.origin === "https://staging.opensign.me"; diff --git a/apps/OpenSign/src/i18n.js b/apps/OpenSign/src/i18n.js index e82bfc4ce..0cd8692f8 100644 --- a/apps/OpenSign/src/i18n.js +++ b/apps/OpenSign/src/i18n.js @@ -2,12 +2,21 @@ import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import Backend from "i18next-http-backend"; import LanguageDetector from "i18next-browser-languagedetector"; +import { isPublic } from "./constant/const"; + +//handle path to support language on public profile +const backendPath = isPublic + ? "https://staging-app.opensignlabs.com/locales/{{lng}}/{{ns}}.json" + : "/locales/{{lng}}/{{ns}}.json"; i18n .use(Backend) .use(LanguageDetector) // Use LanguageDetector directly without creating an instance .use(initReactI18next) .init({ + backend: { + loadPath: backendPath + }, fallbackLng: "en", // Fallback to English if no other language is detected detection: { // Specifies the default language to fall back to if the detected language is not available. @@ -15,6 +24,8 @@ i18n // Defines where the detected language should be cached. caches: ["localStorage"] }, + ns: ["translation"], // default namespace + defaultNS: "translation", // default namespace //Enables debug mode, which outputs detailed logs to the console about the translation process. debug: false, interpolation: { diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index fbded6bce..f72b098f5 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/apps/OpenSign/src/pages/PdfRequestFiles.js @@ -1701,7 +1701,7 @@ function PdfRequestFiles(props) { { handleCloseOtp(); }} @@ -1716,7 +1716,7 @@ function PdfRequestFiles(props) { type="number" name="otp" className="grow" - placeholder="Enter Verification Code" + placeholder={t("otp-placeholder")} onInvalid={(e) => e.target.setCustomValidity(t("input-required")) } @@ -1736,13 +1736,13 @@ function PdfRequestFiles(props) { handleCloseOtp(); }} > - Cancel + {t("cancel")} @@ -1765,7 +1765,7 @@ function PdfRequestFiles(props) { name="name" value={contact.name} onChange={handleInputChange} - placeholder="name" + placeholder={t("name")} onInvalid={(e) => e.target.setCustomValidity(t("input-required")) } @@ -1790,7 +1790,7 @@ function PdfRequestFiles(props) { name="email" value={contact.email} onChange={handleInputChange} - placeholder="Email" + placeholder={t("email")} onInvalid={(e) => e.target.setCustomValidity(t("input-required")) } @@ -1815,7 +1815,7 @@ function PdfRequestFiles(props) { type="text" name="phone" className="grow" - placeholder="phone" + placeholder={t("phone")} disabled={loading} /> @@ -1828,13 +1828,13 @@ function PdfRequestFiles(props) { handleCloseOtp(); }} > - Close + {t("close")} diff --git a/apps/OpenSign/src/script/PublicTemplate.js b/apps/OpenSign/src/script/PublicTemplate.js index 3ef08df4c..b512e2670 100644 --- a/apps/OpenSign/src/script/PublicTemplate.js +++ b/apps/OpenSign/src/script/PublicTemplate.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import Parse from "parse"; import ReactDOM from "react-dom/client"; import PdfRequestFiles from "../pages/PdfRequestFiles"; @@ -6,6 +6,8 @@ import { pdfjs } from "react-pdf"; import { Provider } from "react-redux"; import { store } from "../redux/store"; import "../index.css"; +import "../i18n"; +import { isPublicStaging } from "../constant/const"; pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.mjs`; // Wrapper component to manage props @@ -13,15 +15,22 @@ const PublicScriptFileWrapper = ({ initialProps }) => { const [props, setProps] = useState(initialProps); // Make the setProps function globally accessible - window.updatePublicTemplateProps = setProps; + useEffect(() => { + window.updatePublicTemplateProps = setProps; + + return () => { + window.updatePublicTemplateProps = undefined; + }; + }, []); return ; }; -const appId = "legadranaxn"; -// "opensign"; -const serverUrl = "https://app.opensignlabs.com/api/app"; -// "https://staging-app.opensignlabs.com/api/app"; +const appId = isPublicStaging ? "opensign" : "legadranaxn"; +const serverUrl = isPublicStaging + ? "https://staging-app.opensignlabs.com/api/app" + : "https://app.opensignlabs.com/api/app"; + localStorage.setItem("baseUrl", `${serverUrl}/`); localStorage.setItem("parseAppId", appId); Parse.initialize(appId); @@ -38,9 +47,8 @@ document.head.appendChild(link); //add the Tailwind CSS file const tailwindCssLink = document.createElement("link"); tailwindCssLink.href = - "https://app.opensignlabs.com/static/js/public-template.bundle.css"; // css bundle file -// "https://staging-app.opensignlabs.com/static/js/public-template.bundle.css"; // css bundle file -tailwindCssLink.rel = "stylesheet"; + // "https://app.opensignlabs.com/static/js/public-template.bundle.css"; // css bundle file + tailwindCssLink.rel = "stylesheet"; document.head.appendChild(tailwindCssLink); // Create a root and render the wrapper component with initial props const root = ReactDOM.createRoot(document.getElementById("script-component")); diff --git a/apps/OpenSign/webpack.config.js b/apps/OpenSign/webpack.config.js index 54967737e..f4c76810f 100644 --- a/apps/OpenSign/webpack.config.js +++ b/apps/OpenSign/webpack.config.js @@ -50,7 +50,7 @@ module.exports = { ] }, resolve: { - extensions: [".js", ".jsx"] + extensions: [".js", ".jsx", ".json"] }, plugins: [ new Dotenv(),