@openlettermarketing/olc-react-sdk 0.0.14 → 0.0.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openlettermarketing/olc-react-sdk",
   "private": false,
-  "version": "0.0.14",
+  "version": "0.0.15",
   "type": "module",
   "description": "Simplify template builder integration for any product.",
   "main": "build/index.js",

package/src/components/TemplateBuilder/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useLayoutEffect } from 'react';
 
 // Import Polotno and third-party libraries
 import { PolotnoContainer, WorkspaceWrap } from 'polotno';
@@ -37,6 +37,7 @@ import LexiRegularFont from "../../assets/Fonts/Lexi-Regular.ttf";
 // Components
 import TopNavigation from '../TopNavigation';
 import SidePanel from '../SidePanel';
+import GenericSnackbar from '../GenericUIBlocks/GenericSnackbar';
 
 import './styles.scss';
 
@@ -112,31 +113,37 @@ const TemplateBuilder: React.FC<TemplateBuilderProps> = ({ store, styles, return
     if (!product) {
       navigate('/create-template');
     }
+  }, []);
 
-    setGoogleFonts(fonts);
-    // remove this component from the history stack
 
-    if (id) {
-      // @ts-ignore
-      dispatch(getOneTemplate(id));
-    } else if (store.pages.length === 0) {
-      createInitialPage();
-      
-    }
-    dispatch(getAllCustomFields());
-    const handleChange = () => {
-      if (!isStoreUpdated) {
-        setIsStoreUpdated(true);
+  useEffect(() => {
+    if (product) {
+      setGoogleFonts(fonts);
+      // remove this component from the history stack
+
+      if (id) {
+        // @ts-ignore
+        dispatch(getOneTemplate(id));
+      } else if (store.pages.length === 0) {
+        createInitialPage();
+
       }
-    };
+      dispatch(getAllCustomFields());
 
-    const off = store.on("change", handleChange);
+      const handleChange = () => {
+        if (!isStoreUpdated) {
+          setIsStoreUpdated(true);
+        }
+      };
 
-    return () => {
-      store.history.clear();
-      store.clear();
-      off();
-    };
+      const off = store.on("change", handleChange);
+
+      return () => {
+        store.history.clear();
+        store.clear();
+        off();
+      };
+    }
   }, []);
 
   useEffect(() => {
@@ -284,6 +291,7 @@ const TemplateBuilder: React.FC<TemplateBuilderProps> = ({ store, styles, return
               <ZoomButtons store={store} />
             </WorkspaceWrap>
           </PolotnoContainer>
+          <GenericSnackbar />
         </div>
       )}
     </div>

package/src/index.tsx

@@ -64,17 +64,17 @@ const TemplateBuilder = ({
 
 // Example to run the project locally for development. Comment out these lines when building the application
 
-// const rootElement = document.getElementById('root');
-// if (rootElement) {
-//   TemplateBuilder({
-//     container: rootElement,
-//     apiKey: import.meta.env.VITE_APP_ACCESS_TOKEN,
-//     mode: 'live',
-//     secretKey: import.meta.env.VITE_APP_PLOTNO_API_KEY,
-//     styles: {}
-//   });
-// } else {
-//   console.error("Root element '#root' not found in the document.");
-// }
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  TemplateBuilder({
+    container: rootElement,
+    apiKey: import.meta.env.VITE_APP_ACCESS_TOKEN,
+    mode: 'live',
+    secretKey: import.meta.env.VITE_APP_PLOTNO_API_KEY,
+    styles: {}
+  });
+} else {
+  console.error("Root element '#root' not found in the document.");
+}
 
 export default TemplateBuilder;