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

package/src/utils/constants.ts

@@ -0,0 +1,182 @@
+export const PROD_API_BASE_URL = 'https://qrforward.org/api/v1/sdk';
+export const DEMO_API_BASE_URL = 'https://demo.qrforward.org/api/v1/sdk';
+export const STAGE_API_BASE_URL = 'https://staging.qrforward.org/api/v1/sdk';
+export const LOCAL_API_BASE_URL = 'http://localhost:8089/api/v1/sdk';
+
+export const  LOCAL_S3_URL = 'http://localhost:8089/api/v1/download/s3/sdk-images';
+export const  STAGE_S3_URL = `https://staging.qrforward.org/api/v1/download/s3/sdk-images`;
+export const  DEMO_S3_URL = `https://demo.qrforward.org/api/v1/download/s3/sdk-images`;
+export const  PROD_S3_URL = `https://qrforward.org/api/v1/download/s3/sdk-images`;
+
+export const DEMO_PO_GENERATOR_URL = 'https://demo.offer-generator.com/property-offers';
+export const STAGE_PO_GENERATOR_URL = 'https://staging.offer-generator.com/property-offers';
+export const PROD_PO_GENERATOR_URL = 'https://offer-generator.com/property-offers';
+
+export const DPI: number = 96;
+
+export const BARCODE_IMAGE_URL: string = `/assets/preview/one-barcode.png`;
+export const GOOGLE_STREET_VIEW_IMAGE_URL: string = `/default_images/dummyGSV.png`;
+
+export const PRODUCT_LEARN_URL: string = "https://help.openletterconnect.com/draft-help-doc/product-and-order-guide/creating-a-template";
+
+export const multiPageLetters: string[] = [
+  "Postcards",
+  "Tri-Fold Self-Mailers",
+  "Bi-Fold Self-Mailers",
+  "Snap Pack Mailers",
+];
+
+//@ts-ignore
+export const emojiRegex = /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F700}-\u{1F77F}]|[\u{1F780}-\u{1F7FF}]|[\u{1F800}-\u{1F8FF}]|[\u{1F900}-\u{1F9FF}]|[\u{1FA00}-\u{1FA6F}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{2300}-\u{23FF}]|[\u{2B50}\u{2B55}]|[\u{1F004}\u{1F0CF}]/u;
+
+export const allowedImageTypes = ['image/jpeg', 'image/png', 'image/svg+xml'];
+
+interface TemplateTypes {
+  id: string;
+  label: string;
+  value: string;
+}
+
+export const defaultTemplateTypes: TemplateTypes [] = [
+  {
+    id: "1",
+    label: "My Templates",
+    value: "my_templates"
+  },
+  {
+    id: "2",
+    label: "Team Templates",
+    value: "team_templates"
+  }
+];
+
+export const sortOrderForTemplates: string[] = [
+  "Postcards",
+  "Bi-Fold Self-Mailers",
+  "Tri-Fold Self-Mailers",
+  "Personal Letters",
+  "Snap Pack Mailers",
+  "Professional Letters",
+  "Real Penned Letter",
+];
+
+export const sortOrderForTemplatesV2: string[] = [
+  "Postcards",
+  "Self Mailer",
+  "Personal Letters",
+  "Snap Pack Mailers",
+  "Professional Letters",
+  "Real Penned Letter",
+];
+
+export const EMAIL_REGEX = /^[a-z0-9](\.?[a-z0-9_\-\+])*@[a-z0-9](\.?[a-z0-9-])*\.[a-z]{2,}$/i;
+export const VIDEO_URL_REGEX = /[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
+
+export const DISALLOWED_DOMAINS = [
+  'qrforward.org',
+  'demo-qrforward.org',
+  'staging-qrforward.org',
+];
+
+export const MERGE_UTM_PARAMS = [
+  {
+    key: '{{C.FIRST_NAME}}',
+    value: 'firstname'
+  },
+  {
+    key: '{{C.LAST_NAME}}',
+    value: 'lastname'
+  },
+  {
+    key: '{{C.EMAIL}}',
+    value: 'email'
+  },
+  {
+    key: '{{C.PHONE_NUMBER}}',
+    value: 'phone'
+  }
+];
+
+export const DEFAULT_RESTRICTED_AREA_BG = '#FFFFFF';
+
+export const RESTRICTED_AREA_COLOR_PALETTE = [
+  // Row 1 (Grays)
+  { name: 'White', value: '#FFFFFF' },
+  { name: 'Very Light Gray', value: '#EFEFEF' },
+  { name: 'Light Gray', value: '#DFDFDF' },
+  { name: 'Medium Gray', value: '#CFCFCF' },
+  { name: 'Dark Gray', value: '#BFBFBF' },
+  { name: 'Darker Gray', value: '#AFAFAF' },
+
+  // Row 2 (Creams/Beiges)
+  { name: 'Light Cream', value: '#FAF7F0' },
+  { name: 'Cream', value: '#F4EFE1' },
+  { name: 'Light Beige', value: '#EEE6D2' },
+  { name: 'Beige', value: '#E8DEC4' },
+  { name: 'Medium Beige', value: '#E2D5B5' },
+  { name: 'Dark Beige', value: '#DCCCA7' },
+
+  // Row 3 (Pinks)
+  { name: 'Light Pink', value: '#FAE1E1' },
+  { name: 'Pink', value: '#F7D2D2' },
+  { name: 'Medium Pink', value: '#F2C4C4' },
+  { name: 'Rose Pink', value: '#EDB6B6' },
+  { name: 'Dark Pink', value: '#E8A7A7' },
+  { name: 'Deep Pink', value: '#E39A9A' },
+
+  // Row 4 (Oranges)
+  { name: 'Light Orange', value: '#FBE9D0' },
+  { name: 'Orange', value: '#F7DDBB' },
+  { name: 'Medium Orange', value: '#F4D2A6' },
+  { name: 'Dark Orange', value: '#F0C791' },
+  { name: 'Deep Orange', value: '#EDBB7C' },
+  { name: 'Burnt Orange', value: '#E9B067' },
+
+  // Row 5 (Yellows)
+  { name: 'Light Yellow', value: '#FCF5D9' },
+  { name: 'Yellow', value: '#F9EEBE' },
+  { name: 'Medium Yellow', value: '#F6E7A3' },
+  { name: 'Dark Yellow', value: '#F3E088' },
+  { name: 'Deep Yellow', value: '#F0D96D' },
+  { name: 'Golden Yellow', value: '#EDD252' },
+
+  // Row 6 (Light Greens)
+  { name: 'Light Green', value: '#E4F4E1' },
+  { name: 'Green', value: '#D5EDCF' },
+  { name: 'Medium Green', value: '#C6E6BD' },
+  { name: 'Dark Green', value: '#B7DFAA' },
+  { name: 'Deep Green', value: '#A8D899' },
+  { name: 'Forest Green', value: '#9AD187' },
+
+  // Row 7 (Dark Greens)
+  { name: 'Sage Green', value: '#DDEBDF' },
+  { name: 'Olive Green', value: '#C8DDCB' },
+  { name: 'Medium Olive', value: '#B3D0B7' },
+  { name: 'Dark Olive', value: '#9EC2A4' },
+  { name: 'Deep Olive', value: '#89B490' },
+  { name: 'Forest Olive', value: '#74A77D' },
+
+  // Row 8 (Light Blues)
+  { name: 'Light Blue', value: '#E3F0FA' },
+  { name: 'Sky Blue', value: '#D0E5F5' },
+  { name: 'Medium Sky', value: '#BDD9F0' },
+  { name: 'Dark Sky', value: '#AACEEB' },
+  { name: 'Deep Sky', value: '#98C2E6' },
+  { name: 'Ocean Blue', value: '#85B7E1' },
+
+  // Row 9 (Dark Blues)
+  { name: 'Navy Blue', value: '#D9E2F0' },
+  { name: 'Medium Navy', value: '#C2D0E5' },
+  { name: 'Dark Navy', value: '#ABBFD9' },
+  { name: 'Deep Navy', value: '#94ADCE' },
+  { name: 'Royal Blue', value: '#7D9CC3' },
+  { name: 'Midnight Blue', value: '#668AB8' },
+
+  // Row 10 (Purples)
+  { name: 'Light Purple', value: '#EBE5F9' },
+  { name: 'Purple', value: '#DED3F4' },
+  { name: 'Medium Purple', value: '#D1C1EF' },
+  { name: 'Dark Purple', value: '#C4AFE9' },
+  { name: 'Deep Purple', value: '#B89DE4' },
+  { name: 'Royal Purple', value: '#AB8BDF' },
+];

package/src/utils/customStyles.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+
+export interface CustomCSSProperties extends React.CSSProperties {
+  '--font-family'?: string;
+  '--scrollbar-thumb-color'?: string;
+  '--scrollbar-track-color'?: string;
+  '--primary-color'?: string;
+  '--secondary-color'?: string;
+  '--svg-color'?: string;
+  '--svg-color-not-active'?: string;
+  '--text-color'?: string;
+  '--modal-background-color'?: string;
+  '--notification-background-color'?: string;
+  '--notification-text-color'?: string;
+  '--border-color'?: string;
+  '--error-color'?: string;
+  '--primary-color-hover'?: string;
+  '--card-background-color'?: string;
+  '--modal-svg-bg'?: string;
+  '--primary-color-btn-hover'?: string;
+}
+
+export interface Styles {
+  root: CustomCSSProperties;
+}
+
+export const customStyles: Styles = {
+  root: {
+    '--font-family': 'Inter',
+    '--scrollbar-thumb-color': '#fb8500',
+    '--scrollbar-track-color': 'grey',
+    '--primary-color': '#fb8500',
+    '--secondary-color': 'red',
+    '--svg-color': '#ffb703',
+    '--svg-color-not-active': 'purple',
+    '--text-color': '#fff',
+    '--modal-background-color': '#fff',
+    '--notification-background-color': "#EF7820",
+    '--notification-text-color': "#fff",
+    '--border-color': 'rgba(0, 0, 0, 0.5)',
+    '--error-color': '#ff0000',
+    '--modal-svg-bg': 'grey',
+    '--primary-color-btn-hover': 'grey',
+  },
+};

package/src/utils/fetchWrapper.ts

@@ -0,0 +1,73 @@
+import { PROD_API_BASE_URL, DEMO_API_BASE_URL, LOCAL_API_BASE_URL, STAGE_API_BASE_URL } from "./constants";
+import { getPublicApiKey, getIsSandbox, getEnv } from "./helper";
+
+const getHeaders = (additionalHeaders: Record<string, string> = {}) => ({
+  'Content-Type': 'application/json',
+  'Accept': 'application/json',
+  'Authorization': `Bearer ${getPublicApiKey()}`,
+  ...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 baseUrl = (() => {
+    const env = getEnv();
+    if (env === 'local') return LOCAL_API_BASE_URL;
+    if (env === 'staging') return STAGE_API_BASE_URL;
+    return getIsSandbox() ? DEMO_API_BASE_URL : PROD_API_BASE_URL;
+  })();
+  const url = new URL(`${baseUrl}${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;