@openlettermarketing/olc-react-sdk 0.0.15 → 0.0.17

package/package.json

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

package/src/App.tsx

@@ -5,7 +5,6 @@ import {Routes, Route} from 'react-router-dom';
 import {createStore, StoreType} from 'polotno/model/store';
 
 // components
-// import GenericSnackbar from './components/GenericUIBlocks/GenericSnackbar';
 import CreateTemplate from './components/CreateTemplate';
 import TemplateBuilder from './components/TemplateBuilder';
 import {createGlobalStyle} from 'styled-components';
@@ -66,9 +65,6 @@ const App: React.FC<AppProps> = ({secretKey, returnRoute, styles}) => {
           element={<TemplateBuilder store={store} returnRoute={returnRoute} />}
         />
       </Routes>
-
-      {/* SNACKBAR FOR NOTIFICATIONS */}
-      {/* <GenericSnackbar /> */}
     </>
   );
 };

package/src/components/GenericUIBlocks/Button/styles.scss

@@ -11,5 +11,5 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-weight: 500;
+  font-weight: 600;
 }

package/src/components/GenericUIBlocks/GeneralSelect/styles.scss

@@ -18,7 +18,7 @@
   .generic-select-container {
     width: 100%;
     cursor: pointer;
-    font-size: 14px;
+    font-size: 16px;
     line-height: 21px;
     .generic-select__control {
       height: 100%;

package/src/components/SidePanel/templates/customTemplateSection.tsx

@@ -1,39 +1,39 @@
-import React, { useEffect , useState} from 'react';
-import { observer } from 'mobx-react-lite';
-import { SectionTab, } from 'polotno/side-panel';
-import { useDispatch, useSelector } from 'react-redux';
-import type { StoreType } from 'polotno/model/store';
-import type { TemplatesSection } from 'polotno/side-panel';
+import React, {useEffect, useState} from 'react';
+import {observer} from 'mobx-react-lite';
+import {SectionTab} from 'polotno/side-panel';
+import {useDispatch, useSelector} from 'react-redux';
+import type {StoreType} from 'polotno/model/store';
+import type {TemplatesSection} from 'polotno/side-panel';
 import {
   clearAllTemplates,
   getOneTemplate,
   getAllTemplateCategories,
   getAllTemplatesByTab,
 } from '../../../../src/redux/actions/templateActions';
-import { AppDispatch, RootState } from '../../../redux/store';
+import {AppDispatch, RootState} from '../../../redux/store';
 // @ts-ignore
-import DesignIcon from '../../../assets/images/templates/template-default-design.tsx'
+import DesignIcon from '../../../assets/images/templates/template-default-design.tsx';
 // @ts-ignore
-import dummyTemplateIcon from "../../../assets/images/templates/dummy-template.svg";
+import dummyTemplateIcon from '../../../assets/images/templates/dummy-template.svg';
 // @ts-ignore
 import CustomTemplate from '../../../assets/images/templates/custom-template';
 import Typography from '../../GenericUIBlocks/Typography';
 import './styles.scss';
 import Dialog from '../../GenericUIBlocks/Dialog';
-import { multiPageLetters, templateTypes, DPI } from '../../../utils/constants';
-import { drawRestrictedAreaOnPage } from "../../../utils/template-builder";
-import GeneralSelect from '../../GenericUIBlocks/GeneralSelect'
-import Input from '../../GenericUIBlocks/Input'
+import {multiPageLetters, templateTypes, DPI} from '../../../utils/constants';
+import {drawRestrictedAreaOnPage} from '../../../utils/template-builder';
+import GeneralSelect from '../../GenericUIBlocks/GeneralSelect';
+import Input from '../../GenericUIBlocks/Input';
 import ModalCross from '../../../assets/images/modal-icons/modal-cross';
-import { MESSAGES } from '../../../utils/message';
-import { TEMPLATE_LOADING } from '../../../redux/actions/action-types'
+import {MESSAGES} from '../../../utils/message';
+import {TEMPLATE_LOADING} from '../../../redux/actions/action-types';
 
 type SideSection = typeof TemplatesSection;
 
 const designDialogStyles = {
-  maxWidth: "600px",
-  minHeight: "270px"
-}
+  maxWidth: '600px',
+  minHeight: '270px',
+};
 
 const templateTextStyles: React.CSSProperties = {
   color: `var(--textColor)`,
@@ -44,7 +44,6 @@ const templateTextStyles: React.CSSProperties = {
   marginBottom: `16px`,
 };
 
-
 export type Payload = {
   tab: string;
   page: number;
@@ -133,8 +132,8 @@ const customTemplateSection: SideSection = {
           currentTemplateType?.id === '1'
             ? 'my-templates'
             : currentTemplateType?.id === '2'
-            ? 'team-templates'
-            : 'olc-templates',
+              ? 'team-templates'
+              : 'olc-templates',
         page: 1,
         pageSize: 500,
         productId: product?.id,
@@ -326,7 +325,7 @@ const customTemplateSection: SideSection = {
       <div className="custom-template-section">
         {isShowDialog.open && isShowDialog.model === 'design-own' && (
           <Dialog
-            icon={<ModalCross fill="var(--primaryColor)"/>}
+            icon={<ModalCross fill="var(--primaryColor)" />}
             title={MESSAGES.TEMPLATE.DESIGN_YOUR_OWN.TITLE}
             subHeading={MESSAGES.TEMPLATE.DESIGN_YOUR_OWN.HEADING}
             description={MESSAGES.TEMPLATE.DESIGN_YOUR_OWN.PARAGRAPH}
@@ -413,7 +412,7 @@ const customTemplateSection: SideSection = {
                 className="default-design"
                 onClick={() => handleDialogChange('design-own')}
               >
-                <DesignIcon fill="var(--svgColor)" />
+                <DesignIcon fill="var(--svgColorSecondary)" />
                 <Typography style={templateTextStyles}>
                   Design Your Own
                 </Typography>
@@ -502,4 +501,3 @@ const customTemplateSection: SideSection = {
 };
 
 export default customTemplateSection;
-

package/src/components/TemplateBuilder/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useLayoutEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 // Import Polotno and third-party libraries
 import { PolotnoContainer, WorkspaceWrap } from 'polotno';

package/src/index.scss

@@ -5,6 +5,9 @@
   // primary color
   --primaryColor: #ed5c2f;
   --svgColor: #fdb515;
+  --svgColorSecondary: #ed5c2f;
+  // main background color
+  --mainBackgroundColor: #ffffff;
   // text colors
   --textColor: #000;
   // product Card Background color
@@ -31,7 +34,7 @@
   --selectOptionFocusedTextColor: #000;
   --selectOptionSelectedColor: #fff8ee;
   --selectOptionSelectedTextColor: #000;
-  --selectOptionSelectedBg: #FFF8EE;
+  --selectOptionSelectedBg: #fff8ee;
   // template builder colors
   --topbarBgColor: #fff;
   --sidepanelBgColor: #fff;
@@ -39,6 +42,7 @@
   --sidepanelSVGColor: #303030;
   --sidepanelSVGColorActive: #ed5c2f;
   --sidepanelOptionHoverColor: #fff8ee;
+  --sidepanelTextColorHover: #ed5c2f;
   // custom fields colors
   --customFieldBorderColor: #303030;
   --customFieldTextColor: #303030;
@@ -91,20 +95,23 @@
     }
 
     .bp5-navbar {
-      z-index: auto !important;
+      z-index: 10;
       color: var(--textColor);
       background-color: var(--mainBackgroundColor);
       .bp5-card {
         color: var(--cardTextColor);
         background-color: var(--cardBgColor);
       }
-      .bp5-button-text {
+      .polotno-close-panel .bp5-button-text {
         color: var(--textColor);
       }
     }
 
     .go4160152499,
     .polotno-workspace-inner,
+    .polotno-panel-container,
+    .polotno-panel-container > div,
+    .polotno-panel-container > div > div,
     .polotno-panel-container > div > div > div {
       &::-webkit-scrollbar {
         width: 10px;

package/src/index.tsx

@@ -5,7 +5,6 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import store from './redux/store';
 import App from './App';
-
 import './index.scss';
 
 // fonts
@@ -64,17 +63,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;