fix: resolve issue of support multi-language in public script file

This commit is contained in:
RaktimaNXG
2024-08-09 15:03:56 +05:30
parent 0072e3e5ba
commit 50b0a3ea17
7 changed files with 47 additions and 19 deletions
@@ -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",
@@ -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",
+5
View File
@@ -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";
+11
View File
@@ -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: {
+9 -9
View File
@@ -1701,7 +1701,7 @@ function PdfRequestFiles(props) {
<ModalUi
isOpen={isPublicContact}
title={isOtp ? "Verify email" : "Contact Details"}
title={isOtp ? t("verify-email-1") : t("contact-details")}
handleClose={() => {
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")}
</button>
<button
className="op-btn op-btn-primary"
disabled={loading}
>
{loading ? "Loading..." : "Verify"}
{loading ? t("loading") : t("verify")}
</button>
</div>
</div>
@@ -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}
/>
</label>
@@ -1828,13 +1828,13 @@ function PdfRequestFiles(props) {
handleCloseOtp();
}}
>
Close
{t("close")}
</button>
<button
className="op-btn op-btn-primary"
disabled={loading}
>
{loading ? "Loading..." : "Submit"}
{loading ? t("loading") : t("submit")}
</button>
</div>
</div>
+17 -9
View File
@@ -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 <PdfRequestFiles {...props} />;
};
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"));
+1 -1
View File
@@ -50,7 +50,7 @@ module.exports = {
]
},
resolve: {
extensions: [".js", ".jsx"]
extensions: [".js", ".jsx", ".json"]
},
plugins: [
new Dotenv(),