@openlettermarketing/olc-react-sdk 1.6.8-beta.0 → 1.6.8-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openlettermarketing/olc-react-sdk",
   "private": false,
-  "version": "1.6.8-beta.0",
+  "version": "1.6.8-beta.2",
   "type": "module",
   "description": "Simplify template builder integration for any product.",
   "main": "build/index.js",
@@ -14,6 +14,7 @@
     "test": "jest --silent",
     "coverage": "npm run test -- --coverage",
     "prepare": "npm run build",
+    "publish:beta": "npm publish --access public --beta",
     "publish": "npm publish --access public"
   },
   "publishConfig": {

package/src/assets/images/modal-icons/add.tsx

@@ -13,20 +13,20 @@ const Add = () => {
         <path
           d="M12.5 25.4727C19.1274 25.4727 24.5 20.1001 24.5 13.4727C24.5 6.84524 19.1274 1.47266 12.5 1.47266C5.87258 1.47266 0.5 6.84524 0.5 13.4727C0.5 20.1001 5.87258 25.4727 12.5 25.4727Z"
           stroke="#ED5C2F"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
         <path
           d="M7.35547 13.4727H17.6412"
           stroke="#ED5C2F"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
         <path
           d="M12.5 8.33008V18.6158"
           stroke="#ED5C2F"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
       </svg>
     </>

package/src/components/SidePanel/Templates/ModalGallery/HireDesigner/index.tsx

@@ -21,6 +21,7 @@ import Add from '../../../../../assets/images/modal-icons/add';
 
 // styles
 import './styles.scss';
+import {post} from '../../../../../utils/api';
 
 const hireModalStyles = {
   maxWidth: '725px',
@@ -34,6 +35,13 @@ const hireModalButtonStyles = {
   minHeight: '55px',
 };
 
+const errorStyles = {
+  color: 'var(--error-color)',
+  fontWeight: '400',
+  fontSize: '14px',
+  margin: '0',
+};
+
 const HireDesigner = (props: any) => {
   const {open, onClose, onCreateCustomTemplateQuery, productId} = props;
   const [queryTitle, setQueryTitle] = useState('');
@@ -45,6 +53,7 @@ const HireDesigner = (props: any) => {
   const [formErrors, setFormErrors] = useState({
     title: '',
     email: '',
+    files: '',
     videoUrl: '',
     comments: '',
   });
@@ -99,6 +108,10 @@ const HireDesigner = (props: any) => {
       errors.title = 'Title is required';
     }
 
+    if (formData.queryFile.length > 5) {
+      errors.files = 'You can only upload up to 5 files.';
+    }
+
     if (!formData.queryVideoUrl.trim()) {
       errors.videoUrl = 'Video URL is required';
     }
@@ -129,6 +142,7 @@ const HireDesigner = (props: any) => {
     setFormErrors({
       title: '',
       email: '',
+      files: '',
       videoUrl: '',
       comments: '',
     });
@@ -161,27 +175,12 @@ const HireDesigner = (props: any) => {
         form.append('files', file);
       });
 
-      const response = await fetch(
-        'https://demoapi.openletterconnect.com/api/v1/sdk/custom-template-queries/create',
-        {
-          method: 'POST',
-          headers: {
-            Authorization:
-              'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjMiLCJlbWFpbCI6InVzbWFuK2FkbWluQG9wZW5sZXR0ZXJjb25uZWN0LmNvbSIsImlhdCI6MTczNTMwODE3NywiZXhwIjoxNzM1MzIyNTc3fQ.YgO8wC2ZkEa2YWDZ1GEqbIU1bDlUKKXQ9aaHWeZw0PU',
-          },
-          body: form,
-        }
-      );
-      if (response.status === 200) {
+      const response: any = await post('/custom-template-queries/create', form);
+      if (response && response.status === 200) {
         setIsLoading(false);
-        const data = await response.json();
-        console.log(data, 'data');
-        console.log(response, 'response');
-
-        onCreateCustomTemplateQuery(data);
+        onCreateCustomTemplateQuery(response.data);
         resetForm();
         onClose();
-        console.log('closed');
       } else {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
@@ -233,6 +232,11 @@ const HireDesigner = (props: any) => {
                 </div>
               </div>
             </div>
+            {formErrors.files && (
+              <Typography variant="p" style={errorStyles}>
+                {formErrors.files}
+              </Typography>
+            )}
           </div>
           {queryFile.length > 0 && (
             <div className="uploaded-files">

package/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { Provider } from 'react-redux';
+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';
@@ -13,8 +13,8 @@ import '@fontsource/inter/600.css';
 import '@fontsource/inter/700.css';
 
 // utils
-import { CustomCSSProperties } from './utils/customStyles';
-import { setIsSandbox, setPublicApiKey } from './utils/helper';
+import {CustomCSSProperties} from './utils/customStyles';
+import {setIsSandbox, setPublicApiKey} from './utils/helper';
 
 interface TemplateBuilderProps {
   container: HTMLElement | null;
@@ -105,34 +105,34 @@ const TemplateBuilder = ({
   //@ts-ignore
   return {
     destroy() {
-      console.log("React template builder destroyed");
+      console.log('React template builder destroyed');
       root.unmount();
-    }
-  }
+    },
+  };
 };
 
 // Example to run the project locally for development. Comment out these lines when building the application
 
-const rootElement = document.getElementById('root');
-if (rootElement) {
-  console.log("React SDK Loaded");
-  TemplateBuilder({
-    container: rootElement,
-    secretKey: import.meta.env.VITE_APP_PLOTNO_API_KEY,
-    publicApiKey: import.meta.env.VITE_APP_PUBLIC_API_KEY,
-    sandbox: true,
-    allowSenderFields: true,
-    allowPropertyFields: true,
-    templateGalleryModal: false,
-    excludedFields: ['{{C.FIRST_NAME}}', '{{C.ADDRESS_1}}', '{{SPF.FIRST_NAME}}'],
-    // onGetOneTemplate: getOneTemplate,
-    // olcTemplate: olcTemplateData,
-    // onGetTemplates: getAllTemplatesByTab,
-    // onSubmit: createTemplate,
-    styles: {}
-  });
-} else {
-  console.error("Root element '#root' not found in the document.");
-}
+// const rootElement = document.getElementById('root');
+// if (rootElement) {
+//   console.log("React SDK Loaded");
+//   TemplateBuilder({
+//     container: rootElement,
+//     secretKey: import.meta.env.VITE_APP_PLOTNO_API_KEY,
+//     publicApiKey: import.meta.env.VITE_APP_PUBLIC_API_KEY,
+//     sandbox: true,
+//     allowSenderFields: true,
+//     allowPropertyFields: true,
+//     templateGalleryModal: false,
+//     excludedFields: ['{{C.FIRST_NAME}}', '{{C.ADDRESS_1}}', '{{SPF.FIRST_NAME}}'],
+//     // onGetOneTemplate: getOneTemplate,
+//     // olcTemplate: olcTemplateData,
+//     // onGetTemplates: getAllTemplatesByTab,
+//     // onSubmit: createTemplate,
+//     styles: {}
+//   });
+// } else {
+//   console.error("Root element '#root' not found in the document.");
+// }
 
 export default TemplateBuilder;