@openlettermarketing/olc-react-sdk 2.1.4 → 2.1.5-beta.2

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

@@ -0,0 +1,52 @@
+// Snakbar Actions
+export const SET_SUCCESS_SNACKBAR = 'SET_SUCCESS_SNACKBAR';
+export const SET_ERROR_SNACKBAR = 'SET_ERROR_SNACKBAR';
+export const CLEAR_SNACKBAR = 'CLEAR_SNACKBAR';
+
+// Templates Action
+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 SET_UPLOADED_IMAGES: string = 'SET_UPLOADED_IMAGES';
+export const SET_ROS_OFFER_PERCENTAGE = 'SET_ROS_OFFER_PERCENTAGE';
+export const CLEAR_ALL_TEMPLATE: string = 'CLEAR_ALL_TEMPLATE';
+export const CLEAR_TEMPLATE_FIELDS: string = 'CLEAR_TEMPLATE_FIELDS';
+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';
+export const SET_PRODUCTS: string = 'SET_PRODUCTS';
+
+// Custom Fields Actions
+export const SET_CUSTOM_FIELDS = 'SET_CUSTOM_FIELDS';
+export const SET_CUSTOM_FIELDS_V2 = 'SET_CUSTOM_FIELDS_V2';
+export const SET_PLATFORM_FIELDS = 'SET_PLATFORM_FIELDS';
+
+//Hire Designer Actions
+export const SET_HIRE_DESIGNER_FORM_FIELDS = 'SET_HIRE_DESIGNER_FORM_FIELDS';
+export const CLEAR_HIRE_DESIGNER_FORM_FIELDS =
+  'CLEAR_HIRE_DESIGNER_FORM_FIELDS';
+
+// QR Code Actions
+export const SET_QR_URL = 'SET_QR_URL';
+export const SET_UTM_SOURCE = 'SET_UTM_SOURCE';
+export const SET_UTM_MEDIUM = 'SET_UTM_MEDIUM';
+export const SET_UTM_CAMPAIGN_NAME = 'SET_UTM_CAMPAIGN_NAME';
+export const SET_CUSTOM_UTMS = 'SET_CUSTOM_UTMS';
+export const CLEAR_QR_FIELDS = 'CLEAR_QR_FIELDS';
+export const SET_IS_QR = 'SET_IS_QR';
+export const SET_QR_DIALOG = 'SET_QR_DIALOG';
+export const CLOSE_QR_DIALOG = 'CLOSE_QR_DIALOG';
+
+// Block Colors Actions
+export const SET_BLOCK_COLOR = 'SET_BLOCK_COLOR';
+
+// Page Management Actions
+export const SET_PAGE_COUNT = 'SET_PAGE_COUNT';
+
+// Clear Redux
+export const CLEAR_REDUX: string = 'CLEAR_REDUX';

package/src/redux/actions/customQRCodeActions.ts

@@ -0,0 +1,54 @@
+import {
+  SET_QR_URL,
+  SET_UTM_SOURCE,
+  SET_UTM_MEDIUM,
+  SET_UTM_CAMPAIGN_NAME,
+  SET_CUSTOM_UTMS,
+  CLEAR_QR_FIELDS,
+  SET_IS_QR,
+  SET_QR_DIALOG,
+  CLOSE_QR_DIALOG,
+} from '../actions/action-types';
+
+export const setIsQR = (isQR: boolean) => ({
+  type: SET_IS_QR,
+  payload: isQR,
+});
+
+export const setQrUrl = (url: string) => ({
+  type: SET_QR_URL,
+  payload: url,
+});
+
+export const setUtmSource = (utmSource: string) => ({
+  type: SET_UTM_SOURCE,
+  payload: utmSource,
+});
+
+export const setUtmMedium = (utmMedium: string) => ({
+  type: SET_UTM_MEDIUM,
+  payload: utmMedium,
+});
+
+export const setUtmCampaignName = (utmCampaignName: string) => ({
+  type: SET_UTM_CAMPAIGN_NAME,
+  payload: utmCampaignName,
+});
+
+export const setCustomUtms = (customUtms: Record<string, any>) => ({
+  type: SET_CUSTOM_UTMS,
+  payload: customUtms,
+});
+
+export const clearQrFields = () => ({
+  type: CLEAR_QR_FIELDS,
+});
+
+export const setQrDialog = (open: boolean, model: string = '') => ({
+  type: SET_QR_DIALOG,
+  payload: { open, model },
+});
+
+export const closeQrDialog = () => ({
+  type: CLOSE_QR_DIALOG,
+});

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 }

package/src/redux/actions/templateActions.ts

@@ -0,0 +1,236 @@
+import { AppDispatch } from '../store';
+
+// Utils
+import { get, post, patch } from '../../utils/api';
+
+// Action Types
+import {
+  TEMPLATE_SEARCH,
+  CLEAR_ALL_TEMPLATE,
+  SELECT_PRODUCT,
+  SELECT_POSTCARD,
+  CLEAR_TEMPLATE_FIELDS,
+  LOAD_DATA_FROM_LOCAL_STORAGE,
+  SET_PAGE_COUNT,
+  SET_PRODUCTS,
+} from './action-types';
+
+/**
+ * Uploads a template using the provided template form data.
+ *
+ * @param {FormData} templateFormData - The form data containing the template files to upload.
+ * @returns {Promise<any>} - A promise that resolves with the response from the server.
+ * @throws {Error} - If an error occurs during the upload process.
+ */
+const uploadTemplate = async (templateFormData: FormData): Promise<unknown> => {
+  try {
+    const response = await post('/templates/upload', templateFormData);
+    return response;
+  } catch (error: any) {
+    return error.response;
+  }
+};
+
+
+const getAllTemplatesByTab = async (payload: any) => {
+  try {
+    const response: any = await post('/templates/by-tab', payload);
+    return response?.data?.data;
+  } catch (error: any) {
+    return error.response;
+  }
+}
+
+/**
+ * Loads form data to the store.
+ *
+ * @param {string} data - The form data in JSON format.
+ * @returns {void} - Dispatches an action to the Redux store.
+ */
+const loadFormDataToStore = (data: string) => (dispatch: AppDispatch): void => {
+  try {
+    const parsedData = JSON.parse(data);
+    dispatch({
+      type: LOAD_DATA_FROM_LOCAL_STORAGE,
+      payload: { data: parsedData },
+    });
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+/**
+ * Downloads the proof for the provided data.
+ *
+ * @param {object} data - The data for which the proof is requested.
+ * @returns {Promise<any>} - The response object from the POST request.
+ * @throws {object} - The error response if there is an error.
+ */
+const downloadProof = async (data: object): Promise<unknown> => {
+  try {
+    const response = await post('/view-proof-cloud', data);
+    return response;
+  } catch (error: any) {
+    return error.response;
+  }
+};
+
+
+/**
+ * Downloads the envelope for the provided data.
+ *
+ * @param {object} data - The data for which the proof is requested.
+ * @returns {Promise<any>} - The response object from the POST request.
+ * @throws {object} - The error response if there is an error.
+ */
+const envelopeProof = async (data: object): Promise<unknown> => {
+  try {
+    const response = await post('/download-envelope-proof', data);
+    return response;
+  } catch (error: any) {
+    return error.response;
+  }
+};
+
+
+/**
+ * Uploads a file.
+ *
+ * @param {File} file - The file to upload.
+ * @returns {Promise<string>} - The file path of the uploaded file.
+ * @throws {object} - The error response if there is an error.
+ */
+const uploadFile = async (file: File): Promise<any> => {
+  try {
+    const formData = new FormData();
+    formData.append('image', file);
+    const response = await post('/uploadFile', formData) as Record<string, any>;
+
+    if (response?.data?.data?.filePath) {
+      return response?.data?.data?.filePath;
+    } else {
+      return false;
+    }
+  } catch (error: any) {
+    return error?.response;
+  }
+};
+
+
+/**
+ * Clears template fields.
+ *
+ * @returns {Function} - The thunk function.
+ */
+const clearTemplateFields = () => (dispatch: AppDispatch) => {
+  dispatch({ type: CLEAR_TEMPLATE_FIELDS });
+};
+
+
+/**
+ * Selects a product.
+ *
+ * @param {any} product - The selected product.
+ * @param {string} [productType=''] - The type of the selected product.
+ * @returns {Function} - The thunk function.
+ */
+const selectProduct =
+  (product: any, productType = '') =>
+    (dispatch: AppDispatch) => {
+      dispatch({ type: SELECT_PRODUCT, payload: { product, productType } });
+    };
+
+
+/**
+ * Selects a postcard.
+ *
+ * @param {any} product - The selected product.
+ * @param {string} productType - The type of the selected product.
+ * @returns {Function} - The thunk function.
+ */
+const selectPostCard = (product: any, productType: string) => (dispatch: AppDispatch) => {
+  dispatch({ type: SELECT_POSTCARD, payload: { product, productType } });
+};
+
+/**
+ * Clears all templates.
+ *
+ * @returns {Function} - The thunk function.
+ */
+const clearAllTemplates = () => (dispatch: AppDispatch) => {
+  dispatch({ type: CLEAR_ALL_TEMPLATE });
+};
+
+/**
+ * Searches and advances change.
+ *
+ * @param {string} name - The name of the field.
+ * @param {any} value - The value of the field.
+ * @returns {Function} - The thunk function.
+ */
+const searchAndAdvanceChange = (name: string, value: any) => (dispatch: AppDispatch) => {
+  dispatch({ type: TEMPLATE_SEARCH, payload: { name, value } });
+};
+
+/**
+ * Retrieves all template categories from the server using an HTTP GET request.
+ *
+ * @returns {Promise<any>} - A promise that resolves with the response from the server.
+ * @throws {object} - The error response if there is an error.
+ */
+const getAllTemplateCategories = async (): Promise<any> => {
+  try {
+    const response = await get('/categories');
+    return response;
+  } catch (error: any) {
+    return error.response;
+  }
+};
+
+/**
+ * Sets the page count for the current template.
+ *
+ * @param {number} count - The number of pages.
+ * @returns {Function} - The thunk function.
+ */
+const setPageCount = (count: number) => (dispatch: AppDispatch) => {
+  dispatch({ type: SET_PAGE_COUNT, payload: count });
+};
+
+/**
+ * Fetches products from the API and updates the store.
+ *
+ * @returns {Function} - The thunk function.
+ */
+const fetchProducts = () => async (dispatch: AppDispatch) => {
+  try {
+    const response: any = await get('/products');
+    if (response?.data?.data) {
+      dispatch({ type: SET_PRODUCTS, payload: response.data.data });
+    } else {
+      dispatch({ type: SET_PRODUCTS, payload: [] });
+    }
+    return response;
+  } catch (error: any) {
+    console.error('Error fetching products:', error);
+    return error;
+  }
+};
+
+export {
+  uploadTemplate,
+  getAllTemplatesByTab,
+  searchAndAdvanceChange,
+  clearAllTemplates,
+  selectProduct,
+  selectPostCard,
+  clearTemplateFields,
+  loadFormDataToStore,
+  uploadFile,
+  downloadProof,
+  envelopeProof,
+  getAllTemplateCategories,
+  setPageCount,
+  fetchProducts
+};
+

package/src/redux/reducers/customFieldReducer.ts

@@ -0,0 +1,99 @@
+import {
+  SET_CUSTOM_FIELDS,
+  SET_PLATFORM_FIELDS,
+  SET_CUSTOM_FIELDS_V2,
+} from '../actions/action-types';
+
+export interface CustomFieldState {
+  customFields: any[];
+  customFieldsV2: any[];
+  platformFields: any[];
+  defaultDynamicFields: any[];
+}
+
+const initialState: CustomFieldState = {
+  customFields: [],
+  customFieldsV2: [],
+  platformFields: [],
+  defaultDynamicFields: [
+    {
+      value: "First Name",
+      key: "{{C.FIRST_NAME}}",
+      defaultValue: "John",
+    },
+    {
+      value: "Last Name",
+      key: "{{C.LAST_NAME}}",
+      defaultValue: "Doe",
+    },
+    {
+      value: "Full Name",
+      key: "{{C.FIRST_NAME}} {{C.LAST_NAME}}",
+      defaultValue: "John Doe",
+    },
+    {
+      value: "Company Name",
+      key: "{{C.COMPANY_NAME}}",
+      defaultValue: "ABC Company, Inc.",
+    },
+    {
+      value: "Mailing Address 1",
+      key: "{{C.ADDRESS_1}}",
+      defaultValue: "123 Main Street",
+    },
+    {
+      value: "Mailing Address 2",
+      key: "{{C.ADDRESS_2}}",
+      defaultValue: "Suite 2",
+    },
+    {
+      value: "Mailing City",
+      key: "{{C.CITY}}",
+      defaultValue: "Lawrence",
+    },
+    {
+      value: "Mailing State",
+      key: "{{C.STATE}}",
+      defaultValue: "MA",
+    },
+    {
+      value: "Mailing Zip Code",
+      key: "{{C.ZIP_CODE}}",
+      defaultValue: "01843",
+    },
+    {
+      value: "Contact Phone Number",
+      key: "{{C.PHONE_NUMBER}}",
+      defaultValue: "(555) 278-9389",
+    },
+    {
+      value: "Contact Email",
+      key: "{{C.EMAIL}}",
+      defaultValue: "johndoe@gmail.com",
+    },
+  ],
+};
+
+const customFieldReducer = (state = initialState, action: any): CustomFieldState => {
+  switch (action.type) {
+    case SET_CUSTOM_FIELDS:
+      return {
+        ...state,
+        customFields: action.payload,
+      };
+    case SET_CUSTOM_FIELDS_V2:
+      return {
+        ...state,
+        customFieldsV2: action.payload,
+      };
+    case SET_PLATFORM_FIELDS:
+      return {
+        ...state,
+        platformFields: action.payload,
+      };
+    default:
+      return state;
+  }
+};
+
+export { customFieldReducer };

package/src/redux/reducers/customQRCodeReducer.ts

@@ -0,0 +1,58 @@
+import { SET_QR_URL, SET_UTM_SOURCE, SET_UTM_MEDIUM, SET_UTM_CAMPAIGN_NAME, SET_CUSTOM_UTMS, CLEAR_QR_FIELDS, SET_IS_QR, SET_QR_DIALOG, CLOSE_QR_DIALOG } from '../actions/action-types';
+
+export interface CustomQRCodeState {
+  url: string;
+  utmSource: string;
+  utmMedium: string;
+  utmCampaignName: string;
+  customUtms: Record<string, any>;
+  isQR: boolean;
+  dialog: {
+    open: boolean;
+    model: string;
+  };
+}
+
+const initialState: CustomQRCodeState = {
+  url: '',
+  utmSource: 'direct mail',
+  utmMedium: 'QR Code',
+  utmCampaignName: '',
+  customUtms: {},
+  isQR: false,
+  dialog: {
+    open: false,
+    model: '',
+  },
+};
+
+
+const customQRCodeReducer = (
+  state = initialState,
+  action: any
+): CustomQRCodeState => {
+  switch (action.type) {
+    case SET_QR_URL:
+      return { ...state, url: action.payload };
+    case SET_UTM_SOURCE:
+      return { ...state, utmSource: action.payload };
+    case SET_UTM_MEDIUM:
+      return { ...state, utmMedium: action.payload };
+    case SET_UTM_CAMPAIGN_NAME:
+      return { ...state, utmCampaignName: action.payload };
+    case SET_CUSTOM_UTMS:
+      return { ...state, customUtms: action.payload };
+    case SET_IS_QR:
+      return { ...state, isQR: action.payload };
+    case SET_QR_DIALOG:
+      return { ...state, dialog: action.payload };
+    case CLOSE_QR_DIALOG:
+      return { ...state, dialog: { open: false, model: '' } };
+    case CLEAR_QR_FIELDS:
+      return { ...initialState };
+    default:
+      return state;
+  }
+}
+
+export { customQRCodeReducer };

package/src/redux/reducers/index.ts

@@ -0,0 +1,15 @@
+import { combineReducers } from 'redux';
+import { templateReducer } from './templateReducer';
+import { customFieldReducer } from './customFieldReducer';
+import { snackbarReducers } from './snackbarReducer';
+import { customQRCodeReducer } from './customQRCodeReducer';
+
+const rootReducer = combineReducers({
+  templates: templateReducer,
+  customFields: customFieldReducer,
+  snackbarReducers,
+  customQRCode: customQRCodeReducer,
+});
+
+export type RootState = ReturnType<typeof rootReducer>;
+export default rootReducer;

package/src/redux/reducers/snackbarReducer.ts

@@ -0,0 +1,40 @@
+//Actions
+import { SET_SUCCESS_SNACKBAR, SET_ERROR_SNACKBAR, CLEAR_SNACKBAR } from "../actions/action-types"
+
+// Define the initial state type
+interface SnackbarState {
+    snackbar: {
+        open: boolean;
+        status: 'success' | 'error';
+        heading: string;
+        message: string;
+    };
+}
+
+const initialState: SnackbarState = {
+    snackbar: {
+        open: false,
+        status: 'success',
+        heading: '',
+        message: '',
+    },
+};
+export type ActionPayload = {
+    type: string; 
+    payload: any;
+}
+
+const snackbarReducers = (state: SnackbarState = initialState, { type, payload } : ActionPayload)  => {
+    switch (type) {
+        case SET_SUCCESS_SNACKBAR:
+            return { ...state, snackbar: { ...state.snackbar, ...payload, open: true, status: 'success' } };
+        case SET_ERROR_SNACKBAR:
+            return { ...state, snackbar: { ...state.snackbar, ...payload, open: true, status: 'error' } };
+        case CLEAR_SNACKBAR:
+            return { ...state, snackbar: { ...state.snackbar, open: false, status: 'success', message: '', heading: '' } };
+        default:
+            return state;
+    }
+};
+
+export { snackbarReducers };