@openlettermarketing/olc-react-sdk 0.0.16 → 0.0.18

package/build/types/components/SidePanel/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { StoreType } from 'polotno/model/store';
 interface Props {
     store: StoreType;
+    currentTemplateType: string;
 }
 declare const SidePanel: React.FC<Props>;
 export default SidePanel;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openlettermarketing/olc-react-sdk",
   "private": false,
-  "version": "0.0.16",
+  "version": "0.0.18",
   "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/customFields/customFieldSection.tsx

@@ -52,12 +52,23 @@ const customFieldSection: SideSection = {
       dispatch(fetchCustomFields());
     }, [dispatch]);
 
-    const handleAddElementOnScreen = (event: any, value: any, type: any) => {
-      event.preventDefault();
 
-      if (currentTemplateType === 'Real Penned Letter') {
+    const copyCustomFieldText = (value: string) => {
+      if (currentTemplateType === "Real Penned Letter") {
+        let modifiedString = value.replace(/{{/g, "((").replace(/}}/g, "))");
+        copyToClipboard(modifiedString);
+        dispatch(success(`${modifiedString} Copied`));
+      } else {
         copyToClipboard(value);
         dispatch(success(`${value} Copied`));
+      }
+    };
+
+    const handleAddElementOnScreen = (event: any, value: any, type: any) => {
+      event.preventDefault();
+
+      if (currentTemplateType === "Real Penned Letter") {
+        copyCustomFieldText(value);
         return;
       }
 
@@ -111,7 +122,7 @@ const customFieldSection: SideSection = {
               </span>
               <Button
                 style={iconButtonStyles}
-                onClick={() => copyToClipboard(key)}
+                onClick={() => copyCustomFieldText(key)}
               >
                 <ContentCopyIcon className="copy" />
               </Button>
@@ -132,7 +143,7 @@ const customFieldSection: SideSection = {
           </div>
           <Button onClick={handleShowDialog}></Button>
         </div>
-        {customFields.data?.map(
+        {customFields?.data?.map(
           ({key, value}: {key: string; value: string}, i: number) => (
             <div style={{display: 'flex', alignItems: 'center'}} key={i}>
               <span
@@ -145,7 +156,7 @@ const customFieldSection: SideSection = {
               </span>
               <Button
                 style={iconButtonStyles}
-                onClick={() => copyToClipboard(key)}
+                onClick={() => copyCustomFieldText(key)}
               >
                 <ContentCopyIcon
                   className="copy"

package/src/components/SidePanel/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 // Polotno Imports
 import { SidePanelWrap } from 'polotno';
 import type { StoreType } from 'polotno/model/store';
-import {SidePanel as PolotnoSidePanel, DEFAULT_SECTIONS} from 'polotno/side-panel';
+import { SidePanel as PolotnoSidePanel, DEFAULT_SECTIONS } from 'polotno/side-panel';
 
 // Custom Sections
 import customTemplateSection from './templates/customTemplateSection';
@@ -12,16 +12,28 @@ import customFieldSection from './customFields/customFieldSection';
 
 interface Props {
   store: StoreType;
+  currentTemplateType: string;
 }
 
 const SidePanel: React.FC<Props> = (props) => {
-    const sections = DEFAULT_SECTIONS.filter(
-      (section) => !['photos', 'size', 'templates'].includes(section.name)
-  );
-  
+  const sections =
+    props.currentTemplateType === "Real Penned Letter"
+      ? DEFAULT_SECTIONS.filter((section) => section.name === "")
+      : DEFAULT_SECTIONS.filter(
+        (section) => !["photos", "size", "templates"].includes(section.name)
+      );
+
   return (
     <SidePanelWrap>
-      <PolotnoSidePanel store={props.store} sections={[customTemplateSection, ...sections, customFieldSection]} defaultSection="text" />
+      <PolotnoSidePanel store={props.store}
+        sections={[
+          ...(props.currentTemplateType !== "Real Penned Letter"
+            ? [customTemplateSection]
+            : []),
+          ...sections,
+          customFieldSection,
+        ]}
+        defaultSection="text" />
     </SidePanelWrap>
   );
 };

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';
@@ -272,9 +272,7 @@ const TemplateBuilder: React.FC<TemplateBuilderProps> = ({ store, styles, return
           <PolotnoContainer
             style={containerStyle}
           >
-            {currentTemplateType !== "Real Penned Letter" &&
-              <SidePanel store={store} />
-            }
+            <SidePanel store={store} currentTemplateType={currentTemplateType} />
             <WorkspaceWrap>
               {currentTemplateType !== "Real Penned Letter" && (
                 <Toolbar store={store} downloadButtonEnabled={false} />

package/src/components/TopNavigation/index.tsx

@@ -130,7 +130,7 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
     setItem('formData', JSON.stringify(data));
   };
 
-  const handleBackPress = () => { 
+  const handleBackPress = () => {
     if (isStoreUpdated) {
       setShowNavigateDialog(!showNavigateDialog);
     } else {
@@ -140,7 +140,7 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
 
   const handleNavigation = async (route = '/') => {
     handleClearFilters();
-    if (templateType === 'json') {
+    if (templateType === 'json' && product?.productType !== 'Real Penned Letter') {
       await store.history.clear();
     }
     navigate(route);
@@ -152,7 +152,13 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
     try {
       setDownloaingProof(true);
       const fields = [...defaultFields, ...Object.values(dynamicFields)];
-      const json = store.toJSON();
+      let json = store.toJSON();
+      if (product?.productType === "Real Penned Letter") {
+        let clonedJson = JSON.stringify(json)
+          .replace(/\(\(/g, "{{")
+          .replace(/\)\)/g, "}}");
+        json = JSON.parse(clonedJson);
+      }
       let jsonString = JSON.stringify(json);
       fields.forEach(({ key, defaultValue, value }) => {
         const regex = new RegExp(key, 'g');
@@ -200,7 +206,14 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
       let selectedFields: typeof allFields = [];
       if (templateType === 'json') {
         const blob = await store.toBlob();
-        const jsonData = store.toJSON();
+        let jsonData = store.toJSON();
+
+        if (product?.productType === "Real Penned Letter") {
+          let clonedJson = JSON.stringify(jsonData)
+            .replace(/\(\(/g, "{{")
+            .replace(/\)\)/g, "}}");
+          jsonData = JSON.parse(clonedJson);
+        }
 
         // get all fonts family from json
         const fontFamilies = extractFontFamilies(jsonData?.pages);
@@ -270,7 +283,9 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
       });
       if (response.status === 200) {
         dispatch(success(response.data.message));
-        handleNavigation();
+        setTimeout(() => {
+          handleNavigation();
+        }, 2000);
       } else if (response.status == 418) {
         // nothing to do
       } else {
@@ -279,7 +294,9 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
     } catch (error) {
       handleChangeModel('', 'false');
     } finally {
-      setIsShowModel((prev) => ({ ...prev, loading: false }));
+      setTimeout(() => {
+        setIsShowModel((prev) => ({ ...prev, loading: false }));
+      }, 2000);
     }
   };
 
@@ -335,7 +352,7 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
           handleSave={handleSave}
         />
       )}
-      <GridContainer style={{alignItems: 'center'}}>
+      <GridContainer style={{ alignItems: 'center' }}>
         <GridItem lg={4} md={4} sm={2} xs={12}></GridItem>
         <GridItem lg={4} md={2} sm={2} xs={12}>
           <div className="middle">
@@ -348,7 +365,7 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
         <GridItem lg={4} md={6} sm={8} xs={12}>
           <div className="actionsBtnWrapper right">
             <Button
-              style={{...buttonStyles, maxWidth: 'auto', minWidth: '100px'}}
+              style={{ ...buttonStyles, maxWidth: 'auto', minWidth: '100px' }}
               onClick={handleViewProofWithLamda}
             >
               {downloadingProof ? (

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
@@ -49,16 +48,17 @@ const TemplateBuilder = ({
   setMode(mode);
   const root = ReactDOM.createRoot(container);
   root.render(
-    <React.StrictMode>
-      <Router>
-        <Provider store={store}>
+    <>
+      <Provider store={store}>
+        <Router>
+
           <App
             secretKey={secretKey}
             styles={styles}
             returnRoute={returnRoute} />
-        </Provider>
-      </Router>
-    </React.StrictMode>
+        </Router>
+      </Provider>
+    </>
   );
 };
 

package/src/utils/templateRestrictedArea/realPenned.ts

@@ -84,45 +84,6 @@ export const addElementsforRealPennedLetters = (store: Store): void => {
   const page = store.pages[0];
 
   const elements: Element[] = [
-    {
-      id: "blocked",
-      type: "figure",
-      name: "",
-      opacity: 1,
-      visible: true,
-      selectable: false,
-      removable: false,
-      alwaysOnTop: true,
-      showInExport: true,
-      x: -1.850472230905276e-12,
-      y: -2.9487523534043754e-13,
-      width: 528,
-      height: 80.739,
-      rotation: 0,
-      animations: [],
-      blurEnabled: false,
-      blurRadius: 10,
-      brightnessEnabled: false,
-      brightness: 0,
-      sepiaEnabled: false,
-      grayscaleEnabled: false,
-      shadowEnabled: false,
-      shadowBlur: 5,
-      shadowOffsetX: 0,
-      shadowOffsetY: 0,
-      shadowColor: "black",
-      shadowOpacity: 1,
-      draggable: false,
-      resizable: false,
-      contentEditable: false,
-      styleEditable: true,
-      subType: "rect",
-      fill: "rgba(208,0,0,1)",
-      dash: [],
-      strokeWidth: 0,
-      stroke: "#0c0c0c",
-      cornerRadius: 0,
-    },
     {
       id: 'header',
       type: 'text',
@@ -135,7 +96,7 @@ export const addElementsforRealPennedLetters = (store: Store): void => {
       showInExport: true,
       x: 25,
       y: 130,
-      width: 300,
+      width: 480,
       height: 40,
       rotation: 0,
       animations: [],
@@ -155,7 +116,7 @@ export const addElementsforRealPennedLetters = (store: Store): void => {
       resizable: false,
       contentEditable: true,
       styleEditable: false,
-      text: "Hi FirstNaame,",
+      text: "Hi ((C.FIRST_NAME)),",
       fontSize: 20,
       fontFamily: 'lexi Regular',
       fontStyle: 'normal',
@@ -235,9 +196,9 @@ export const addElementsforRealPennedLetters = (store: Store): void => {
       removable: false,
       alwaysOnTop: true,
       showInExport: true,
-      x: 322.49999999499846,
+      x: 165.49999999499846,
       y: 651.7346179851188,
-      width: 180,
+      width: 335,
       height: 75,
       rotation: 0,
       animations: [],
@@ -275,7 +236,7 @@ export const addElementsforRealPennedLetters = (store: Store): void => {
       backgroundOpacity: 1,
       backgroundCornerRadius: 0.5,
       backgroundPadding: 0.5,
-    }
+    },
   ]
 
   elements.forEach(element => page.addElement(element));