@openlettermarketing/olc-react-sdk 0.0.17 → 0.0.19

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.17",
+  "version": "0.0.19",
   "type": "module",
   "description": "Simplify template builder integration for any product.",
   "main": "build/index.js",

package/src/components/CreateTemplate/index.tsx

@@ -55,7 +55,7 @@ const templateHeadingStyles: React.CSSProperties = {
   color: `var(--primaryColor)`,
   fontSize: `24px`,
   fontStyle: `normal`,
-  fontWeight: `700`,
+  fontWeight: `600`,
   lineHeight: `normal`,
   marginBottom: `20px`,
 };
@@ -64,7 +64,7 @@ const templateTextStyles: React.CSSProperties = {
   color: `var(--textColor)`,
   fontSize: `14px`,
   fontStyle: `normal`,
-  fontWeight: `500`,
+  fontWeight: `400`,
   lineHeight: `normal`,
   marginBottom: `16px`,
 };
@@ -78,6 +78,8 @@ const footerButtonStyles: React.CSSProperties = {
   borderRadius: '3px',
   backgroundColor: 'var(--secondaryButtonBgColor)',
   color: `var(--secondaryButtonTextColor)`,
+  fontSize: `14px`,
+  fontWeight: `500`,
 };
 
 const Images: Record<string, ReactElement> = {

package/src/components/CreateTemplate/styles.scss

@@ -172,7 +172,7 @@
           color: var(--primaryColor);
           font-size: 16px;
           font-style: normal;
-          font-weight: 600;
+          font-weight: 500;
           line-height: normal;
           margin: 0;
         }
@@ -273,7 +273,7 @@
           color: var(--primaryColor);
           font-size: 16px;
           font-style: normal;
-          font-weight: 600;
+          font-weight: 500;
           line-height: normal;
           margin: 0;
         }

package/src/components/GenericUIBlocks/Dialog/index.tsx

@@ -36,13 +36,13 @@ const buttonStyles: CSSProperties = {
 const heading: CSSProperties = {
   fontSize: '22px',
   color: 'var(--dialogModalHeadingColor)',
-  fontWeight: '700',
+  fontWeight: '600',
 };
 
 const subHeadingStyle: CSSProperties = {
   fontSize: '16px',
-  color: 'var(--dialogModalTextColor',
-  fontWeight: '700',
+  color: 'var(--dialogModalTextColor)',
+  fontWeight: '600',
   textAlign: 'center',
 };
 
@@ -94,7 +94,7 @@ const Dialog: React.FC<DialogProps> = ({
           {description && (
             <Typography
               variant="p"
-              style={{...subHeadingStyle, fontWeight: '400'}}
+              style={{...subHeadingStyle, fontWeight: '400', fontSize: '14px'}}
             >
               {description}
             </Typography>

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

@@ -27,8 +27,8 @@
       padding: 5px 20px;
       background: transparent;
       font-size: 14px;
-      font-family: 'Inter', sans-serif !important;
-      font-weight: 500;
+      font-family: 'Inter' !important;
+      font-weight: 400;
       line-height: 24px;
       color: var(--inputTextColor);
       border: none;

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/TemplateBuilder/index.tsx

@@ -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/SaveTemplateModel/index.tsx

@@ -23,7 +23,7 @@ import './styles.scss';
 
 const saveDialogStyles = {
   maxWidth: '433px',
-  minHeight: '290px',
+  minHeight: '280px',
 };
 
 interface SaveTemplateModelProps {

package/src/components/TopNavigation/index.tsx

@@ -61,6 +61,7 @@ const buttonStyles: React.CSSProperties = {
   color: 'var(--secondaryButtonTextColor)',
   border: '0.5px solid var(--borderColor)',
   fontSize: '15px',
+  fontWeight: '500'
 };
 
 const progressStyles: React.CSSProperties = {
@@ -130,7 +131,7 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
     setItem('formData', JSON.stringify(data));
   };
 
-  const handleBackPress = () => { 
+  const handleBackPress = () => {
     if (isStoreUpdated) {
       setShowNavigateDialog(!showNavigateDialog);
     } else {
@@ -140,7 +141,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 +153,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 +207,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 +284,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 +295,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 +353,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 +366,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/components/TopNavigation/styles.scss

@@ -22,7 +22,7 @@
       text-align: center;
       margin-bottom: 0px;
       font-size: 16px;
-      font-weight: 500;
+      font-weight: 400;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;

package/src/index.scss

@@ -70,7 +70,7 @@
   --red: #ff0000;
 
   body {
-    font-family: 'Inter', sans-serif !important;
+    font-family: "Inter" !important;
     padding: 70px 0 0;
     margin: 0;
 

package/src/index.tsx

@@ -48,16 +48,16 @@ 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));