Merge pull request #934 from OpenSignLabs/raktima-opensignlabs-patch-11

fix: tailwind css not applied on production mode after load public-sign script in public profile

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -293,14 +293,14 @@ function PdfRequestFiles(props) {
 
       if (documentData && documentData.length > 0) {
         setIsPublicTemplate(true);
-        const getPublicRole = documentData[0].PublicRole[0];
-        const getUniqueIdDetails = documentData[0].Placeholders.find(
+        const getPublicRole = documentData[0]?.PublicRole[0];
+        const getUniqueIdDetails = documentData[0]?.Placeholders.find(
           (x) => x.Role === getPublicRole
         );
         if (getUniqueIdDetails) {
           setUniqueId(getUniqueIdDetails.Id);
         }
-        setSignerPos(documentData[0].Placeholders);
+        setSignerPos(documentData[0]?.Placeholders);
         let placeholdersOrSigners = [];
         // const placeholder = documentData[0]?.Placeholders;
         for (const placeholder of documentData[0].Placeholders) {

apps/OpenSign/src/script/PublicTemplate.js

@@ -37,6 +37,12 @@ link.href = "https://staging-app.opensignlabs.com/css/fonts.css";
 link.rel = "stylesheet";
 document.head.appendChild(link);
 
+//add the Tailwind CSS file
+const tailwindCssLink = document.createElement("link");
+tailwindCssLink.href =
+  "https://staging-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"));
 root.render(

apps/OpenSign/tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  content: ["./src/**/*.{js,jsx,ts,tsx}", "./src/script/PublicTemplate.js"],
   theme: {
     extend: {}
   },

apps/OpenSign/webpack.config.js

@@ -58,7 +58,7 @@ module.exports = {
     ...(isProduction
       ? [
           new MiniCssExtractPlugin({
-            filename: "[name].[contenthash].css"
+            filename: "public-template.bundle.css"
           })
         ]
       : [])