@openlettermarketing/olc-react-sdk 0.0.8 → 0.0.10

package/src/utils/helper.ts

@@ -0,0 +1,19 @@
+export let apiKey: string | null = null;
+export let appMode: string = 'test';
+
+export const copyToClipboard = (text: string): void => {
+  navigator.clipboard
+    .writeText(text)
+    .then(() => { })
+    .catch((err) => {
+      console.error('Failed to copy text: ', err);
+    });
+};
+
+export const setApiKey = (key: string) => {
+  apiKey = key
+};
+
+export const setMode = (mode: string) => {
+  appMode = mode
+};

package/src/utils/local-storage.ts

@@ -0,0 +1,15 @@
+export const setItem = (key: string, value: string): void => {
+  localStorage.setItem(key, value);
+};
+
+export const getItem = (key: string): string | null => {
+  return localStorage.getItem(key);
+};
+
+export const removeItem = (key: string): void => {
+  localStorage.removeItem(key);
+};
+
+export const clearStorage = (): void => {
+  localStorage.clear();
+};

package/src/utils/message.ts

@@ -0,0 +1,71 @@
+// Default messages and Typography
+
+export const MESSAGES = {
+  GENERAL_ERROR: "Internal Server Error",
+  TEMPLATE: {
+    SEARCH_PLACE_HOLDER: "Search by template name or template ID",
+    NAME_REQUIRED: "Template Name is required",
+    TYPE_REQUIRED: "Template Type is required",
+    PRODUCT_TYPE_REQUIRED: "Product Type is required",
+    ENVELOPE_TYPE_REQUIRED: "Envelope Type is required",
+    POSTCARD_SIZE_REQUIRED: "Postcard Size is required",
+    NAME_LESS_50: "Template Name should be less than or equal to 50 characters",
+    CREATE: {
+      TITLE: 'Create New Template',
+      TEMPLATE_LABEL: 'Template Name*',
+      PRODUCT_LABEL : 'Product Type*',
+      LEARN_TEXT: 'Learn More',
+      CANCEL_BUTTON: "Cancel",
+      SUBMIT_BUTTON: "Next",
+    },
+    LIMIT_MODAL: {
+      TITLE: "Limit Reached",
+      HEADING: "You've reached your template limit",
+      SUB_HEADING: "Please Upgrade your subscription to add more templates",
+      CANCEL_BUTTON: "Cancel",
+      SUBMIT_BUTTON: "View Plans",
+    },
+    DELETE: {
+      TITLE: "Delete Template",
+      HEADING: "Are you sure you want to delete this Template?",
+      PARAGRAPH:
+        "This template will be deleted from your Templates list but will still be included in associated orders.",
+    },
+    SAVE: {
+      TITLE: "Confirm Save Template",
+      HEADING: "Are you sure you want to save this template?",
+      PARAGRAPH:
+        "The updates provided will be used right away for any orders referencing this template.",
+      CANCEL_BUTTON: "Cancel",
+      SUBMIT_BUTTON: "Save"
+    },
+    CANCEL: {
+      TITLE: "Confirm Cancel Template",
+      HEADING: "Are you sure you want to cancel this Template?",
+      PARAGRAPH: "You will lose your changes after canceling.",
+      BACK_BUTTON: "Go Back",
+      CANCEL_BUTTON: "Cancel Template",
+    },
+    DESIGN_YOUR_OWN: {
+      TITLE: "Confirm",
+      HEADING: "Are you sure you want to discard these changes?",
+      PARAGRAPH:
+        "You will lose your changes. Please save your changes or click ok to proceed.",
+    },
+    SELECT_TEMPLATE: {
+      TITLE: "Confirm",
+      HEADING:
+        "Are you sure you want to change current template with this one?",
+      PARAGRAPH:
+        "You will lose your changes. Please save your changes or click ok to proceed.",
+      SUBMIT_BUTTON: "OK",
+      CANCEL_BUTTON: "Cancel",
+    },
+    DOWNLOAD_PROOF_BUTTON: "Download Proof",
+    CANCEL_BUTTON: "Cancel",
+    SUBMIT_BUTTON: "Save"
+  },
+  SNACKBAR: {
+    HEADING: "Notifications",
+  },
+} as const;

package/src/utils/template-builder.ts

@@ -0,0 +1,147 @@
+/* eslint-disable no-useless-catch */
+import { get } from '../utils/api';
+
+// Utils
+import { multiPageLetters, Barcode } from './constants';
+
+// Restricted Area Files
+import { addRestrictedAreaToBiFold } from './templateRestrictedArea/biFold';
+import { addRestrictedAreaToPostCard } from './templateRestrictedArea/postCard';
+import { addAreaToProfessionalLetters } from './templateRestrictedArea/professional';
+import { addRestrictedAreaToTriFold } from './templateRestrictedArea/triFold';
+
+
+export const addressPrinting: { [key: string]: boolean } = {
+  'Postcards-': true,
+  'Tri-Fold Self-Mailers-': true,
+  'Bi-Fold Self-Mailers-': true,
+  'Professional Letters-#10 Double-Window': true,
+};
+
+export const multiPageTemplates: string[] = [
+  'Postcards',
+  'Tri-Fold Self-Mailers',
+  'Bi-Fold Self-Mailers',
+];
+
+export interface EnvelopeType {
+  id: number,
+  label: string,
+  type: string
+}
+
+export const envelopeTypes: EnvelopeType[] = [
+  { id: 1, label: 'Windowed Envelope', type: '#10 Double-Window' },
+  { id: 2, label: 'Non-Windowed Envelope', type: '#10 Grey' },
+];
+
+export const getFileAsBlob = async (url: string, returnType: string = 'json'): Promise<any> => {
+  try {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return returnType === 'json'
+      ? blobToJSON(blob)
+      : blobToString(blob);
+  } catch (error) {
+    throw error; // Optionally rethrow the error for further handling
+  }
+};
+
+const blobToJSON = (jsonBlob: Blob): Promise<any> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = function () {
+      try {
+        // Parse the result as JSON
+        const parsedData = JSON.parse(reader.result as string);
+
+        // Resolve the promise with the parsed JSON data
+        resolve(parsedData);
+      } catch (error) {
+        reject(error);
+      }
+    };
+
+    reader.onerror = function (error) {
+      reject(error);
+    };
+
+    reader.readAsText(jsonBlob);
+  });
+};
+
+export const blobToString = (blob: Blob): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onloadend = function () {
+      // The result property contains the data as a string
+      const blobString = reader.result as string;
+
+      // Resolve the Promise with the blobString
+      resolve(blobString);
+    };
+
+    reader.onerror = function (error) {
+      reject(error);
+    };
+
+    reader.readAsText(blob);
+  });
+};
+
+export const downloadPDF = (title: string, url: string): void => {
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = title + '.pdf';
+
+  // Append the link to the document
+  document.body.appendChild(link);
+
+  // Trigger a click on the link
+  link.click();
+
+  // Remove the link from the document
+  document.body.removeChild(link);
+};
+
+export interface Product {
+  productType: string;
+}
+
+export const drawRestrictedAreaOnPage = (store: any, product: Product, envelopeType: string) => {
+  if (addressPrinting[`${product.productType}-${envelopeType}`]) {
+    if (product.productType === 'Professional Letters') {
+      addAreaToProfessionalLetters(store, Barcode);
+    } else if (product.productType === multiPageLetters[0]) {
+      addRestrictedAreaToPostCard(
+        store,
+        [3.2835, 2.375],
+        Barcode
+      );
+    } else if (product.productType === multiPageLetters[1]) {
+      addRestrictedAreaToTriFold(store, [3.2835, 2.375], Barcode);
+    } else if (product.productType === multiPageLetters[2]) {
+      addRestrictedAreaToBiFold(store, [3.2835, 2.375], Barcode);
+    }
+  }
+};
+
+export const extractFontFamilies = (jsonData: any[]): string[] => {
+  const fontFamilies: string[] = [];
+
+  // Iterate through each object in the JSON data
+  jsonData.forEach((obj) => {
+    if (obj.children) {
+      // Iterate through each child object
+      obj.children.forEach((child: any) => {
+        if (child.type === 'text' && child.fontFamily) {
+          // Extract font family from text objects
+          fontFamilies.push(child.fontFamily);
+        }
+      });
+    }
+  });
+  return fontFamilies;
+};

package/src/utils/templateRestrictedArea/biFold.ts

@@ -0,0 +1,433 @@
+import { DPI } from "../constants";
+
+// Define the type for the element being added
+interface Element {
+    id: string;
+    type: string;
+    name: string;
+    opacity: number;
+    visible: boolean;
+    selectable: boolean;
+    removable: boolean;
+    alwaysOnTop: boolean;
+    showInExport: boolean;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    animations?: any[];
+    blurEnabled?: boolean;
+    blurRadius?: number;
+    brightnessEnabled?: boolean;
+    brightness?: number;
+    sepiaEnabled?: boolean;
+    grayscaleEnabled?: boolean;
+    shadowEnabled?: boolean;
+    shadowBlur?: number;
+    shadowOffsetX?: number;
+    shadowOffsetY?: number;
+    shadowColor?: string;
+    shadowOpacity?: number;
+    draggable?: boolean;
+    resizable?: boolean;
+    contentEditable: boolean;
+    styleEditable: boolean;
+    subType?: string;
+    fill?: string;
+    dash?: any[];
+    strokeWidth?: number;
+    stroke?: string;
+    cornerRadius?: number;
+    text?: string;
+    placeholder?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    fontStyle?: string;
+    fontWeight?: string;
+    textDecoration?: string;
+    align?: string;
+    verticalAlign?: string;
+    lineHeight?: number;
+    letterSpacing?: number;
+    backgroundEnabled?: boolean;
+    backgroundColor?: string;
+    backgroundOpacity?: number;
+    backgroundCornerRadius?: number;
+    backgroundPadding?: number;
+    src?: string;
+    cropX?: number;
+    cropY?: number;
+    cropWidth?: number;
+    cropHeight?: number;
+    flipX?: boolean;
+    flipY?: boolean;
+    clipSrc?: string;
+    borderSize?: number;
+    keepRatio?: boolean;
+}
+
+// Define the type for the page
+interface Page {
+    addElement: (element: Element) => void;
+}
+
+// Define the type for the store
+interface Store {
+    width: number;
+    height: number;
+    pages: Page[];
+    history: {
+        clear: () => void;
+    };
+}
+
+export const addRestrictedAreaToBiFold = (store: Store, size: [number, number], barcodeSrc: string) : void =>  {
+    const page = store.pages[0];
+
+    const elements: Element[] = [
+        {
+            id: 'figure-1',
+            type: 'figure',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: store.width - size[0] * DPI - 0.15 * DPI - 9 * DPI,
+            y: store.height - size[1] * DPI - 0.125 * DPI,
+            width: size[0] * DPI,
+            height: size[1] * DPI,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            subType: 'rect',
+            fill: 'white',
+            dash: [],
+            strokeWidth: 0,
+            stroke: '#0c0c0c',
+            cornerRadius: 0,
+        },
+        {
+            id: 'return-address',
+            type: 'text',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: store.width - size[0] * DPI - 0.15 * DPI + 10 - 9 * DPI,
+            y: store.height - size[1] * DPI - 0.125 * DPI + 20,
+            width: 240,
+            height: 20,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            text: 'YOUR RETURN ADDRESS \nWILL AUTOMATICALLY \nBE PRINTED IN THIS \nPOSITION',
+            placeholder: '',
+            fontSize: 12,
+            fontFamily: 'Roboto',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            textDecoration: '',
+            fill: 'black',
+            align: 'start',
+            verticalAlign: 'top',
+            strokeWidth: 0,
+            stroke: 'black',
+            lineHeight: 1.2,
+            letterSpacing: 0,
+            backgroundEnabled: false,
+            backgroundColor: '#7ED321',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        },
+        {
+            id: 'indicia',
+            type: 'text',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: store.width - 111 - 0.15 * DPI - 9 * DPI,
+            y: store.height - size[1] * DPI + 10,
+            width: 111,
+            height: 40,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            text: `POSTAGE\nINDICIA`,
+            placeholder: '',
+            fontSize: 12,
+            fontFamily: 'Roboto',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            textDecoration: '',
+            fill: 'black',
+            align: 'center',
+            verticalAlign: 'top',
+            strokeWidth: 0,
+            stroke: 'black',
+            lineHeight: 1.2,
+            letterSpacing: 0,
+            backgroundEnabled: false,
+            backgroundColor: '#7ED321',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        },
+        {
+            id: 'barcode',
+            type: 'image',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            y: store.height - 12 - size[1] * DPI + 110,
+            x: store.width - size[0] * DPI - 0.15 * DPI - 9 * DPI + 40,
+            width: size[0] * DPI - 80,
+            height: 12,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            src: barcodeSrc,
+            cropX: 0,
+            cropY: 0,
+            cropWidth: 1,
+            cropHeight: 1,
+            cornerRadius: 0,
+            flipX: false,
+            flipY: false,
+            clipSrc: '',
+            borderSize: 0,
+            keepRatio: false,
+        },
+        {
+            id: 'recipient-address',
+            type: 'text',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: store.width - size[0] * DPI - 0.15 * DPI + 10 - 9 * DPI,
+            y: store.height - size[1] * DPI - 0.125 * DPI + 150,
+            width: 240,
+            height: 20,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            text: 'RECIPIENT ADDRESS \nWILL AUTOMATICALLY \nBE PRINTED IN THIS \nPOSITION',
+            placeholder: '',
+            fontSize: 12,
+            fontFamily: 'Roboto',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            textDecoration: '',
+            fill: 'black',
+            align: 'start',
+            verticalAlign: 'top',
+            strokeWidth: 0,
+            stroke: 'black',
+            lineHeight: 1.2,
+            letterSpacing: 0,
+            backgroundEnabled: false,
+            backgroundColor: '#7ED321',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        },
+        {
+            id: 'sequence',
+            type: 'text',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: store.width - 111 - 0.15 * DPI - 9 * DPI,
+            y: store.height - size[1] * DPI + 170,
+            width: 111,
+            height: 40,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            text: `Sequence`,
+            placeholder: '',
+            fontSize: 8,
+            fontFamily: 'Roboto',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            textDecoration: '',
+            fill: 'black',
+            align: 'center',
+            verticalAlign: 'top',
+            strokeWidth: 0,
+            stroke: 'black',
+            lineHeight: 1.2,
+            letterSpacing: 0,
+            backgroundEnabled: false,
+            backgroundColor: '#7ED321',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        },
+        {
+            id: 'contId',
+            type: 'text',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: store.width - 111 - 0.15 * DPI - 9 * DPI,
+            y: store.height - size[1] * DPI + 180,
+            width: 111,
+            height: 40,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            text: `Cont ID`,
+            placeholder: '',
+            fontSize: 8,
+            fontFamily: 'Roboto',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            textDecoration: '',
+            fill: 'black',
+            align: 'center',
+            verticalAlign: 'top',
+            strokeWidth: 0,
+            stroke: 'black',
+            lineHeight: 1.2,
+            letterSpacing: 0,
+            backgroundEnabled: false,
+            backgroundColor: '#7ED321',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        }
+    ]
+
+    elements.forEach(element => page.addElement(element));
+    store.history.clear();
+};