@openlettermarketing/olc-react-sdk 0.0.8 → 0.0.10

package/src/utils/customStyles.ts

@@ -0,0 +1,135 @@
+import React from 'react';
+
+export interface CustomCSSProperties extends React.CSSProperties {
+  '--sb-track-color'?: string;
+  '--sb-thumb-color'?: string;
+  '--primaryColor'?: string;
+  '--svgColor'?: string;
+  '--textColor'?: string;
+  '--productCardBgColor'?: string;
+  '--productCardBackgroundColorActive'?: string;
+  '--postCardBgColor'?: string;
+  '--postCardBackgroundColorActive'?: string;
+  '--postCardSVGColor'?: string;
+  '--inputBgColor'?: string;
+  '--inputTextColor'?: string;
+  '--inputBorderColor'?: string;
+  '--inputSearchAppliedBg'?: string;
+  '--inputSearchIcon'?: string;
+  '--selectBgColor'?: string;
+  '--selectTextColor'?: string;
+  '--selectBorderColor'?: string;
+  '--selectMenuBgColor'?: string;
+  '--selectOptionTextColor'?: string;
+  '--selectOptionBorderColor'?: string;
+  '--selectOptionFocusedColor'?: string;
+  '--selectOptionFocusedTextColor'?: string;
+  '--selectOptionSelectedColor'?: string;
+  '--selectOptionSelectedTextColor'?: string;
+  '--selectOptionSelectedBg'?: string;
+  '--topbarBgColor'?: string;
+  '--sidepanelBgColor'?: string;
+  '--sidepanelTextColor'?: string;
+  '--sidepanelTextColorHover'?: string;
+  '--sidepanelSVGColor'?: string;
+  '--sidepanelSVGColorActive'?: string;
+  '--sidepanelOptionHoverColor'?: string;
+  '--customFieldBorderColor'?: string;
+  '--customFieldTextColor'?: string;
+  '--customFieldCopySVGColor'?: string;
+  '--cardBgColor'?: string;
+  '--cardTextColor'?: string;
+  '--dialogModalBgColor'?: string;
+  '--dialogModalHeadingColor'?: string;
+  '--dialogModalTextColor'?: string;
+  '--dialogModalSVGColor'?: string;
+  '--borderColor'?: string;
+  '--secondaryButtonBgColor'?: string;
+  '--secondaryButtonTextColor'?: string;
+  '--primaryButtonBgColor'?: string;
+  '--primaryButtonTextColor'?: string;
+  '--iconHoverBgColor'?: string;
+  '--mainBackgroundColor'?: string;
+  '--footerBgColor'?: string;
+  '--red'?: string;
+}
+
+export interface Styles {
+  root: CustomCSSProperties;
+}
+
+export const customStyles: Styles = {
+  root: {
+    // scroll bars colors
+    '--sb-track-color': '#232e33',
+    '--sb-thumb-color': '#fb8500',
+    // core colors
+    '--primaryColor': '#fb8500',
+    '--svgColor': '#ffb703',
+    // text colors
+    '--textColor': '#fff',
+    // product Card Background colors
+    '--productCardBgColor': '#2C394B',
+    '--productCardBackgroundColorActive': '#fff8ee',
+    // post Card Background colors
+    '--postCardBgColor': '#2C394B',
+    '--postCardBackgroundColorActive': '#fff8ee',
+    '--postCardSVGColor': '#FDECD3',
+    // input colors
+    '--inputBgColor': 'transparent',
+    '--inputTextColor': '#fff',
+    '--inputBorderColor': '#fff',
+    '--inputSearchAppliedBg': 'transparent',
+    '--inputSearchIcon': '#fff8ee',
+    // select input & option colors
+    '--selectBgColor': 'transparent',
+    '--selectTextColor': '#fff',
+    '--selectBorderColor': '#fff',
+    '--selectMenuBgColor': '#ffb703',
+    '--selectOptionTextColor': '#fff',
+    '--selectOptionBorderColor': '#5454544d',
+    '--selectOptionFocusedColor': '#ffb703',
+    '--selectOptionFocusedTextColor': '#023047',
+    '--selectOptionSelectedColor': '#ffb703',
+    '--selectOptionSelectedTextColor': '#023047',
+     '--selectOptionSelectedBg': '#FFF8EE',
+    // template builder colors
+    '--topbarBgColor': '#023047',
+    '--sidepanelBgColor': '#023047',
+    '--sidepanelTextColor': '#fff',
+    '--sidepanelTextColorHover': '#fff',
+    '--sidepanelSVGColor': '#fff',
+    '--sidepanelSVGColorActive': '#fff',
+    '--sidepanelOptionHoverColor': '#000',
+    // custom fields colors
+    '--customFieldBorderColor': '#fff',
+    '--customFieldTextColor': '#fff',
+    '--customFieldCopySVGColor': '#fff',
+    // builder Layer colors
+    '--cardBgColor': '#fff',
+    '--cardTextColor': '#000',
+    // Dialog Modal colors
+    '--dialogModalBgColor': '#023047',
+    '--dialogModalHeadingColor': '#fb8500',
+    '--dialogModalTextColor': '#fff',
+    '--dialogModalSVGColor': '#ffb703',
+    // border colors
+    '--borderColor': 'rgba(0, 0, 0, 0.5)',
+    // button colors
+    '--secondaryButtonBgColor': '#fff',
+    '--secondaryButtonTextColor': '#000',
+    '--primaryButtonBgColor': '#fb8500',
+    '--primaryButtonTextColor': '#fff',
+    // topbar colors
+    '--iconHoverBgColor': 'rgba(0, 0, 0, 0.076)',
+
+    // background colors
+    '--mainBackgroundColor': '#023047',
+
+    // footer bg color
+    '--footerBgColor': '#023047',
+
+    // red shades
+    '--red': '#ff0000',
+  },
+};

package/src/utils/fetchWrapper.ts

@@ -0,0 +1,68 @@
+import { apiKey, appMode } from './helper'
+
+const API_BASE_URL = appMode === 'test' ? 'https://stageapi.openletterconnect.com/api/v1' : 'https://stageapi.openletterconnect.com/api/v1';
+
+const getHeaders = (additionalHeaders: Record<string, string> = {}) => ({
+  'Authorization': `Bearer ${apiKey}`,
+  'Content-Type': 'application/json',
+  'Accept': 'application/json',
+  ...additionalHeaders,
+});
+
+export interface RequestOptions {
+  method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+  headers?: Record<string, string>;
+  body?: any;
+  params?: Record<string, string>;
+}
+
+
+const fetchWrapper = async (endpoint: string, options: RequestOptions) => {
+  const url = new URL(`${API_BASE_URL}/${endpoint}`);
+  if (options.method === 'GET' && options.params) {
+    Object.entries(options.params).forEach(([key, value]) => {
+      url.searchParams.append(key, value);
+    });
+  }
+
+  const fetchOptions: RequestInit = {
+    method: options.method,
+    headers: getHeaders(options.headers),
+  };
+
+  if (options.method !== 'GET' && options.body) {
+    fetchOptions.body = JSON.stringify(options.body);
+  }
+
+  // Add body to fetchOptions if present
+  if (options.body) {
+    if (options.body instanceof FormData) {
+      fetchOptions.body = options.body;
+      // @ts-ignore
+      delete fetchOptions?.headers['Content-Type'];
+    } else {
+      fetchOptions.headers = getHeaders(options.headers);
+    }
+  }
+
+  try {
+    const response = await fetch(url.toString(), fetchOptions);
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.message || 'An error occurred');
+    }
+
+    if (response.status === 204) {
+      return null;
+    }
+
+    const data = await response.json();
+    return { status: response.status, data };
+
+  } catch (error) {
+    return error
+  }
+};
+
+export default fetchWrapper;