@openlettermarketing/olc-react-sdk 0.0.8 → 0.0.10

package/src/components/TopNavigation/styles.scss

@@ -0,0 +1,83 @@
+.top-navigation-container {
+  position: absolute;
+  width: 100%;
+  padding: 23px 20px;
+  height: 100%;
+  max-height: 70px;
+  background: var(--topbarBgColor);
+  margin: 0;
+  top: 0;
+  // z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 0.5px solid var(--borderColor);
+
+  .middle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    p {
+      text-align: center;
+      margin-bottom: 0px;
+      font-size: 16px;
+      font-weight: 500;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      color: var(--textColor);
+    }
+    div{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+        cursor: pointer;
+        border-radius: 50%;
+        padding: 5px;
+        transition: 0.1s ease-in-out all;
+        &:hover {
+          background-color: var(--iconHoverBgColor);
+        }
+        svg{
+          fill: var(--textColor);
+        }
+    }
+  }
+
+  & button {
+    max-width: 120px !important;
+    text-transform: capitalize;
+    color: var(--textColor);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+  }
+
+  & .MuiGrid-item {
+    padding-top: 0 !important;
+  }
+
+  & .left {
+    justify-content: flex-start !important;
+  }
+
+  & .right {
+    gap: 10px !important;
+  }
+
+  .actionsBtnWrapper {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .templateCreateBtn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+  }
+}

package/src/importMeta.d.ts

@@ -0,0 +1,9 @@
+interface ImportMetaEnv {
+    readonly VITE_APP_ACCESS_TOKEN: string;
+    readonly VITE_APP_PLOTNO_API_KEY: string;
+    // Add other environment variables here if needed
+  }
+  
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+  }

package/src/index.scss

@@ -0,0 +1,130 @@
+:root {
+  // scroll bars colors
+  --sb-track-color: #fff8ee;
+  --sb-thumb-color: hsl(29, 100%, 88%);
+  // primary color
+  --primaryColor: #ed5c2f;
+  --svgColor: #fdb515;
+  // text colors
+  --textColor: #000;
+  // product Card Background color
+  --productCardBgColor: #fff;
+  --productCardBackgroundColorActive: #fff8ee;
+  // post Card Background colors
+  --postCardBgColor: #fff;
+  --postCardBackgroundColorActive: #fff8ee;
+  --postCardSVGColor: #fdecd3;
+  // input colors
+  --inputBgColor: #fff;
+  --inputTextColor: #000;
+  --inputBorderColor: #303030;
+  --inputSearchAppliedBg: #fff8ee;
+  --inputSearchIcon: #303030;
+  // select input & option colors
+  --selectBgColor: transparent;
+  --selectTextColor: #000;
+  --selectBorderColor: #303030;
+  --selectMenuBgColor: #fff;
+  --selectOptionTextColor: #000;
+  --selectOptionBorderColor: #5454544d;
+  --selectOptionFocusedColor: #fff8ee;
+  --selectOptionFocusedTextColor: #000;
+  --selectOptionSelectedColor: #fff8ee;
+  --selectOptionSelectedTextColor: #000;
+  --selectOptionSelectedBg: #FFF8EE;
+  // template builder colors
+  --topbarBgColor: #fff;
+  --sidepanelBgColor: #fff;
+  --sidepanelTextColor: #303030;
+  --sidepanelSVGColor: #303030;
+  --sidepanelSVGColorActive: #ed5c2f;
+  --sidepanelOptionHoverColor: #fff8ee;
+  // custom fields colors
+  --customFieldBorderColor: #303030;
+  --customFieldTextColor: #303030;
+  --customFieldCopySVGColor: #303030;
+  // builder Layer colors
+  --cardBgColor: transparent;
+  --cardTextColor: #000;
+  // dialog Modal colors
+  --dialogModalBgColor: #fff8ee;
+  --dialogModalHeadingColor: #ed5c2f;
+  --dialogModalTextColor: #000;
+  --dialogModalSVGColor: #ed5c2f;
+  // border colors
+  --borderColor: rgba(0, 0, 0, 0.5);
+  // button colors
+  --secondaryButtonBgColor: #fff;
+  --secondaryButtonTextColor: #000;
+  --primaryButtonBgColor: #ed5c2f;
+  --primaryButtonTextColor: #fff;
+  // topbar colors
+  --iconHoverBgColor: rgba(0, 0, 0, 0.076);
+  // footer bg color
+  --footerBgColor: #fff;
+  // red shades
+  --red: #ff0000;
+
+  body {
+    font-family: 'Inter', sans-serif !important;
+    padding: 70px 0 0;
+    margin: 0;
+
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--sb-track-color) !important;
+      border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--sb-thumb-color) !important;
+      border-radius: 3px;
+    }
+
+    @supports not selector(::-webkit-scrollbar) {
+      body {
+        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
+      }
+    }
+
+    .bp5-navbar {
+      z-index: auto !important;
+      color: var(--textColor);
+      background-color: var(--mainBackgroundColor);
+      .bp5-card {
+        color: var(--cardTextColor);
+        background-color: var(--cardBgColor);
+      }
+      .bp5-button-text {
+        color: var(--textColor);
+      }
+    }
+
+    .go4160152499,
+    .polotno-workspace-inner,
+    .polotno-panel-container > div > div > div {
+      &::-webkit-scrollbar {
+        width: 10px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: var(--sb-track-color) !important;
+        border-radius: 3px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: var(--sb-thumb-color) !important;
+        border-radius: 3px;
+      }
+
+      @supports not selector(::-webkit-scrollbar) {
+        body {
+          scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
+        }
+      }
+    }
+  }
+}

package/src/index.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { setApiKey, setMode } from './utils/helper';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import store from './redux/store';
+import App from './App';
+import GenericSnackbar from './components/GenericUIBlocks/GenericSnackbar';
+
+import './index.scss';
+
+// fonts
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/700.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/500.css';
+
+// utils
+import { CustomCSSProperties } from './utils/customStyles';
+
+interface TemplateBuilderProps {
+  container: HTMLElement | null;
+  apiKey: string;
+  mode: 'test' | 'live';
+  secretKey: string;
+  returnRoute?: string | null;
+  styles?: {
+    root?: CustomCSSProperties;
+  };
+}
+
+const TemplateBuilder = ({
+  container,
+  apiKey,
+  secretKey,
+  mode,
+  returnRoute,
+  styles,
+}: TemplateBuilderProps): void => {
+  if (!container) {
+    throw new Error('Root element not found');
+  }
+  if (!apiKey) {
+    throw new Error('apiKey not found');
+  }
+  if (!secretKey) {
+    throw new Error('secretKey not found');
+  }
+  setApiKey(apiKey);
+  setMode(mode);
+  const root = ReactDOM.createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <Router>
+        <Provider store={store}>
+          <App
+            secretKey={secretKey}
+            styles={styles}
+            returnRoute={returnRoute} />
+          <GenericSnackbar />
+        </Provider>
+      </Router>
+    </React.StrictMode>
+  );
+};
+
+// 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.");
+// }
+
+export default TemplateBuilder;

package/src/libs/test.ts

@@ -0,0 +1,7 @@
+/**
+ * Add two numbers.
+ * @param a - The first number
+ * @param b - The second number
+ * @returns Returns the sum of the two numbers.
+ */
+export const addTwoNumbers = (a: number, b: number): number => a + b;

package/src/redux/actions/action-types.ts

@@ -0,0 +1,42 @@
+// Snakbar Actions
+export const SET_SUCCESS_SNACKBAR = 'SET_SUCCESS_SNACKBAR';
+export const SET_ERROR_SNACKBAR = 'SET_ERROR_SNACKBAR';
+export const CLEAR_SNACKBAR = 'CLEAR_SNACKBAR';
+
+//Template Builder Actions
+export const SET_DYNAMIC_FIELD_VALUE: string = 'SET_DYNAMIC_FIELD_VALUE';
+export const SET_DYNAMIC_FIELDS: string = 'SET_DYNAMIC_FIELDS';
+export const UPDATE_DYNAMIC_FIELDS: string = 'UPDATE_DYNAMIC_FIELDS';
+export const UPDATE_CONTACT_FIELDS: string = 'UPDATE_CONTACT_FIELDS';
+export const REMOVE_FROM_DYNAMIC_FIELDS: string = 'REMOVE_FROM_DYNAMIC_FIELDS';
+export const GET_PRODUCTS: string = 'GET_PRODUCTS';
+export const CLEAR_DYNAMIC_FIELDS: string = 'CLEAR_DYNAMIC_FIELDS';
+export const CLEAR_FIELDS: string = 'CLEAR_FIELDS';
+
+// Templates Action
+export const GET_ALL_TEMPLATES: string = 'GET_ALL_TEMPLATES';
+export const GET_ONE_TEMPLATE: string = 'GET_ONE_TEMPLATE';
+export const TEMPLATE_LOADING: string = 'TEMPLATE_LOADING';
+export const TEMPLATE_PAGINATION_CHANGE: string = 'TEMPLATE_PAGINATION_CHANGE';
+export const TEMPLATE_SEARCH: string = 'TEMPLATE_SEARCH';
+export const CLEAR_ALL_TEMPLATE: string = 'CLEAR_ALL_TEMPLATE';
+export const CLEAR_TEMPLATE_FIELDS: string = 'CLEAR_TEMPLATE_FIELDS';
+export const GET_DYNAMIC_FIELDS_FROM_SERVER: string = 'GET_DYNAMIC_FIELDS_FROM_SERVER';
+export const LOAD_DATA_FROM_LOCAL_STORAGE: string = 'LOAD_DATA_FROM_LOCAL_STORAGE';
+export const CLEAR_TEMPLATE: string = 'CLEAR_TEMPLATE';
+
+//Product
+export const SELECT_PRODUCT: string = 'SELECT_PRODUCT';
+export const SELECT_POSTCARD: string = 'SELECT_POSTCARD';
+
+// Product Actions
+export const SET_PRODUCT_TYPES: string = 'SET_PRODUCT_TYPES';
+export const SET_PRODUCT_DETAILS: string = 'SET_PRODUCT_DETAILS';
+export const SET_PRODUCTS_DATA: string = 'SET_PRODUCTS_DATA';
+
+export const CLEAR_REDUX: string = 'CLEAR_REDUX';
+
+
+// TODO : Replace these with  current ones
+export const FETCH_TEMPLATES_REQUEST: string = 'FETCH_TEMPLATES_REQUEST';
+export const SET_TEMPLATES: string = 'SET_TEMPLATES';

package/src/redux/actions/customFieldAction.ts

@@ -0,0 +1,28 @@
+import { AppDispatch } from '../store';
+import { get } from '../../utils/api';
+
+export const FETCH_CUSTOM_FIELDS_REQUEST = 'FETCH_CUSTOM_FIELDS_REQUEST';
+export const SET_CUSTOM_FIELDS = 'SET_CUSTOM_FIELDS';
+
+const fetchCustomFieldsRequest = () => ({
+  type: FETCH_CUSTOM_FIELDS_REQUEST,
+});
+
+const fetchCustomFieldsSuccess = (fields: any[]) => ({
+  type: SET_CUSTOM_FIELDS,
+  payload: fields,
+});
+
+export const fetchCustomFields = () => {
+  return async (dispatch: AppDispatch) => {
+    dispatch(fetchCustomFieldsRequest());
+
+    try {
+      const response = await get('custom-fields');
+      // @ts-ignore
+      dispatch(fetchCustomFieldsSuccess(response?.data));
+    } catch (error: any) {
+      console.error('Failed to fetch custom fields:', error);
+    }
+  };
+};

package/src/redux/actions/snackbarActions.ts

@@ -0,0 +1,16 @@
+import { AppDispatch } from "../store";
+import { SET_SUCCESS_SNACKBAR, SET_ERROR_SNACKBAR, CLEAR_SNACKBAR } from "./action-types"
+
+const success = (message: string, heading: string = '') => (dispatch: AppDispatch) => {
+    dispatch({ type: SET_SUCCESS_SNACKBAR, payload: { message, heading } });
+}
+
+const failure = (message: string, heading: string = '') => (dispatch: AppDispatch) => {
+    dispatch({ type: SET_ERROR_SNACKBAR, payload: { message, heading } });
+}
+
+const closeSnackbar = () => (dispatch: AppDispatch) => {
+    dispatch({ type: CLEAR_SNACKBAR });
+}
+
+export { success, failure, closeSnackbar }