@openlettermarketing/olc-react-sdk 0.0.18 → 0.0.20

package/src/components/TopNavigation/styles.scss

@@ -1,83 +0,0 @@
-.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

@@ -1,9 +0,0 @@
-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

@@ -1,137 +0,0 @@
-:root {
-  // scroll bars colors
-  --sb-track-color: #fff8ee;
-  --sb-thumb-color: hsl(29, 100%, 88%);
-  // primary color
-  --primaryColor: #ed5c2f;
-  --svgColor: #fdb515;
-  --svgColorSecondary: #ed5c2f;
-  // main background color
-  --mainBackgroundColor: #ffffff;
-  // 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;
-  --sidepanelTextColorHover: #ed5c2f;
-  // 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: 10;
-      color: var(--textColor);
-      background-color: var(--mainBackgroundColor);
-      .bp5-card {
-        color: var(--cardTextColor);
-        background-color: var(--cardBgColor);
-      }
-      .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;
-      }
-
-      &::-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

@@ -1,80 +0,0 @@
-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 './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(
-    <>
-      <Provider store={store}>
-        <Router>
-
-          <App
-            secretKey={secretKey}
-            styles={styles}
-            returnRoute={returnRoute} />
-        </Router>
-      </Provider>
-    </>
-  );
-};
-
-// 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

@@ -1,7 +0,0 @@
-/**
- * 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

@@ -1,42 +0,0 @@
-// 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

@@ -1,28 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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 }