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

package/src/utils/template-builder.ts

@@ -0,0 +1,328 @@
+/* eslint-disable no-useless-catch */
+
+// Utils
+import { multiPageLetters, BARCODE_IMAGE_URL, DEMO_S3_URL, PROD_S3_URL, emojiRegex, STAGE_S3_URL, LOCAL_S3_URL } from './constants';
+import { cleanString, getEnv, getIsSandbox } from './helper';
+
+// Restricted Area Files
+import { addRestrictedAreaToBiFold } from './templateRestrictedArea/biFold';
+import { addRestrictedAreaToPostCard } from './templateRestrictedArea/postCard';
+import { addAreaToProfessionalLetters } from './templateRestrictedArea/professional';
+import { addAreaToNonWindowProfessionalLetters } from './templateRestrictedArea/nonWindowProfessional';
+import { addAreaToPersonalLetters } from './templateRestrictedArea/personal';
+import { addRestrictedAreaToTriFold } from './templateRestrictedArea/triFold';
+import { addRestrictedAreaToSnapPackMailer } from './templateRestrictedArea/snapPack';
+import { addRestrictedAreaToPostCardJumbo } from './templateRestrictedArea/postCardJumbo';
+
+// Safety Borders Files
+import { addSafetyBordersForTemplates } from './templateSafetyBorders';
+
+export const addressPrinting: { [key: string]: boolean } = {
+  'Postcards-': true,
+  'Tri-Fold Self-Mailers-': true,
+  'Bi-Fold Self-Mailers-': true,
+  'Personal Letters-': true,
+  'Snap Pack Mailers-': true,
+  'Professional Letters-#10 Double-Window': true,
+  'Professional Letters-#10 Grey': true,
+  'Real Penned Letter-': true
+};
+
+export const multiPageTemplates: string[] = [
+  'Postcards',
+  'Snap Pack Mailers',
+  'Tri-Fold Self-Mailers',
+  'Bi-Fold Self-Mailers',
+];
+
+export interface EnvelopeType {
+  id: number,
+  label: string,
+  type: string,
+  productId: number
+}
+
+export interface DesignType {
+  id: number,
+  type: string,
+  label: string,
+  productId: number
+}
+
+
+export const envelopeTypes: EnvelopeType[] = [
+  { id: 1, label: 'Windowed Envelope', type: '#10 Double-Window', productId: 2 },
+  { id: 2, label: 'Non-Windowed Envelope', type: '#10 Grey', productId: 4 },
+];
+
+export const designTypes: DesignType[] = [
+  { id: 0, type: "Bi-Fold Self-Mailers", label: "Bi-Fold Self Mailer", productId: 9 },
+  { id: 1, type: "Tri-Fold Self-Mailers", label: "Tri-Fold Self Mailer", productId: 11 },
+];
+
+export const selfMailerProduct = {
+  id: "9",
+  title: "Self Mailer",
+  productType: "Bi-Fold Self-Mailers",
+  hasEnvelope: false,
+  paper: '80# text',
+  finish: 'Glass Coated',
+  size: [
+    {
+      id: "9",
+      size: "6x18"
+    }
+  ],
+  types: [
+    {
+      id: "9", defaultSize: "6x18", title: "Self Mailer", productType: "Bi-Fold Self-Mailers", hasEnvelope: false, paper: '80# text',
+      finish: 'Glass Coated', size: [
+        {
+          id: "9",
+          size: "6x18"
+        }
+      ],
+    },
+    {
+      id: "11", defaultSize: "12x9", title: "Self Mailer", productType: "Tri-Fold Self-Mailers", hasEnvelope: false, paper: '80# text', label: '8.5x11',
+      finish: 'Glass Coated', size: [{
+        id: "11",
+        size: "12x9",
+        label: "8.5x11"
+      }]
+    },
+  ],
+}
+
+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 {
+  id: string;
+  productType: string;
+  selectedSize: string;
+}
+
+export const drawRestrictedAreaOnPage = (store: any, product: Product, envelopeType: string) => {
+  const barcodeSrc =
+    (getEnv() === 'local' || getEnv() === 'staging'
+      ? STAGE_S3_URL
+      : getIsSandbox()
+        ? DEMO_S3_URL
+        : PROD_S3_URL) + BARCODE_IMAGE_URL;
+  if (addressPrinting[`${product.productType}-${envelopeType}`]) {
+    if (
+      product.productType === "Professional Letters" &&
+      envelopeType === "#10 Double-Window"
+    ) {
+      addAreaToProfessionalLetters(store, barcodeSrc);
+    } else if (
+      product.productType === "Professional Letters" &&
+      envelopeType === "#10 Grey"
+    ) {
+      addAreaToNonWindowProfessionalLetters(store);
+    } else if (product.productType === "Personal Letters") {
+      addAreaToPersonalLetters(store);
+    } else if (product.productType === multiPageLetters[0] && +product.id !== 21) {
+      addRestrictedAreaToPostCard(
+        store,
+        [3.2835, 2.375],
+        barcodeSrc
+      );
+
+    } else if (product.productType === multiPageLetters[0] && +product.id === 21) {
+      addRestrictedAreaToPostCardJumbo(store, barcodeSrc);
+    }
+    else if (product.productType === multiPageLetters[1]) {
+      addRestrictedAreaToTriFold(store, [3.2835, 2.375], barcodeSrc);
+    } else if (product.productType === multiPageLetters[2]) {
+      addRestrictedAreaToBiFold(store, [3.2835, 2.375], barcodeSrc);
+    } else if (product.productType === multiPageLetters[3]) {
+      addRestrictedAreaToSnapPackMailer(store, barcodeSrc);
+    }
+    addSafetyBordersForTemplates(product?.id, store);
+  }
+};
+
+export const extractFontFamilies = (jsonData: any[]): string[] => {
+  const fontFamilies: string[] = [];
+
+  // Iterate through each object in the JSON data
+  jsonData.forEach((obj) => {
+    if (obj.children) {
+      obj.children.forEach((child: any) => {
+        if (child.type === 'text' && child.fontFamily) {
+          // Extract font family from text objects
+          fontFamilies.push(child.fontFamily);
+        }
+      });
+    }
+  });
+  return fontFamilies;
+};
+
+export const removeBracketsFromRPL = (jsonData: any[]) => {
+  let clonedData = JSON.parse(JSON.stringify(jsonData));
+  const updatedJson = clonedData.pages.map((obj: any) => {
+    if (obj.children) {
+      obj.children = obj.children.map((child: any) => {
+        if (child.type === 'text' && typeof child.text === 'string') {
+          const cleanedText = cleanString(child.text);
+          child.text = cleanedText.replace(/[{}\[\]]/g, '');
+        }
+        return child;
+      });
+    }
+    return obj;
+  });
+  clonedData.pages = updatedJson;
+  return clonedData;
+};
+
+export const changeColorOfBoxesForSnapPack = (jsonData: any[], preFill = false, isLoading = false) => {
+  let clonedData = JSON.parse(JSON.stringify(jsonData));
+  const updatedJson = clonedData.pages.map((obj: any) => {
+    if (obj.children) {
+      obj.children = obj.children.map((child: any) => {
+        if (child?.custom?.replaceBg) {
+          child.fill = child?.custom?.preFill || 'white';
+          child.strokeWidth = 0;
+        }
+        if ((child.id === "mailing-address-window-box-1" || child.id === "mailing-address-window-box-2")) {
+          child.fill = isLoading ? "rgba(233,233,233,1)" : "white",
+          child.custom.preFill = 'rgba(233,233,233,1)';
+          child.custom.postFill = 'white';
+        }
+        return child;
+      });
+    }
+    return obj;
+  });
+  clonedData.pages = updatedJson;
+  return clonedData;
+};
+
+export const extractCustomRistrictedBoxColor = (jsonData: any) => {
+  let boxColor = null;
+  jsonData?.pages?.forEach((page: any) => {
+    page.children.forEach((el: any) => {
+      if (el.id.includes("custom-")) {
+        return boxColor = el.fill;
+      }
+    });
+  });
+  return boxColor;
+};
+
+export const validateGSV = (pages: any) => {
+  const hasMultipleGSV = (children: any) =>
+    children.filter(
+      ({ custom }: any) => custom?.elementType === "GOOGLE_STREET_VIEW"
+    ).length > 1;
+
+  for (const page of pages) {
+    if (hasMultipleGSV(page.children)) {
+      return false;
+    }
+  }
+  return true;
+};
+
+
+export const validateEmoji = (pages: any) => {
+  const textElements = (children: any) =>
+    children.filter(
+      ({ type, text }: any) => type === "text" && emojiRegex.test(text)
+    );
+
+
+  for (const page of pages) {
+    if (textElements(page.children).length) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export const isValidQR = (pages: any) => {
+  const QRElements = (children: any) =>
+    children.filter(
+      ({ name, custom }: any) => name === "qr" && custom.value === ''
+    );
+
+
+  for (const page of pages) {
+    if (QRElements(page.children).length) {
+      return false;
+    }
+  }
+  return true;
+}

package/src/utils/templateIdentifierArea/biFold.ts

@@ -0,0 +1,107 @@
+// 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[];
+    draggable?: boolean;
+    resizable?: boolean;
+    contentEditable: boolean;
+    styleEditable: boolean;
+    text: string;
+    fontSize: number;
+    fontFamily: string;
+    fontStyle: string;
+    fontWeight: string;
+    fill: string;
+    align: string;
+    verticalAlign: string;
+    lineHeight: number;
+    letterSpacing: number;
+    backgroundEnabled?: boolean;
+    backgroundColor?: string;
+    backgroundOpacity?: number;
+    backgroundCornerRadius?: number;
+    backgroundPadding?: number;
+}
+
+// Define the type for the page
+interface Page {
+    addElement: (element: Element) => void;
+}
+
+// Define the type for the store
+interface Store {
+    pages: Page[];
+    history: {
+        clear: () => void;
+    };
+}
+
+// Reusable function to create text elements
+const createTextElement = (
+    id: string,
+    text: string,
+    x: number,
+    y: number,
+    width: number
+): Element => ({
+    id,
+    type: "text",
+    name: "",
+    opacity: 1,
+    visible: true,
+    selectable: false,
+    removable: false,
+    alwaysOnTop: true,
+    showInExport: true,
+    x,
+    y,
+    width,
+    height: 11,
+    rotation: 0,
+    draggable: true,
+    resizable: true,
+    contentEditable: true,
+    styleEditable: false,
+    text,
+    fontSize: 7,
+    fontFamily: "Roboto",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fill: "grey",
+    align: "center",
+    verticalAlign: "top",
+    lineHeight: 1.2,
+    letterSpacing: 0,
+});
+
+
+export const addIdentifierAreaToBiFold = (store: Store): void => {
+    const page = store.pages[0];
+
+    const elements: Element[] = [
+        createTextElement("cont-id-placeholder", "C:", 691, 541.5, 11),
+        createTextElement("contId", "0000001", 700, 541.5, 30),
+        createTextElement("sequence-id-placeholder", "| S:", 727, 541.5, 12),
+        createTextElement("sequence", "0000001", 739, 541.5, 29),
+        createTextElement("template-id-placeholder", "| T:", 765, 541.5, 14),
+        createTextElement("templateId", "0001034", 778, 541.5, 29),
+        createTextElement("order-id-placeholder", "| O:", 807, 541.5, 11),
+        createTextElement("orderId", "0000127", 818, 541.5, 29),
+    ];
+
+    elements.forEach(element => page.addElement(element));
+    store.history.clear();
+};

package/src/utils/templateIdentifierArea/index.ts

@@ -0,0 +1,35 @@
+import { StoreType } from "polotno/model/store";
+
+// Safety Border Files
+import { addIdentifierAreaTo4x6PostCard, addIdentifierAreaTo6x9PostCard, addIdentifierAreaTo6x11PostCard, addIdentifierAreaTo12x9PostCard } from './postCards'
+import { addIdentifierAreaToProfessionalWindow, addIdentifierAreaToProfessionalNonWindow } from './professional'
+import { addIdentifierAreaToPersonalLetter } from './personal'
+import { addIdentifierAreaToBiFold } from './biFold'
+import { addIdentifierAreaToTriFold } from './triFold'
+import { addIdentifierAreaToSnapPackMailer } from './snapPack'
+
+
+export const addIdentifiersForTemplates = (productId: string, store: StoreType) => {
+    if (!productId) return;
+    if (+productId === 13) {
+        addIdentifierAreaTo4x6PostCard(store);
+    } else if (+productId === 14) {
+        addIdentifierAreaTo6x9PostCard(store);
+    } else if (+productId === 15) {
+        addIdentifierAreaTo6x11PostCard(store);
+    } else if (+productId === 2) {
+        addIdentifierAreaToProfessionalWindow(store);
+    } else if (+productId === 4) {
+        addIdentifierAreaToProfessionalNonWindow(store);
+    } else if (+productId === 5) {
+        addIdentifierAreaToPersonalLetter(store);
+    } else if (+productId === 9) {
+        addIdentifierAreaToBiFold(store);
+    } else if (+productId === 11) {
+        addIdentifierAreaToTriFold(store);
+    } else if (+productId === 18) {
+        addIdentifierAreaToSnapPackMailer(store);
+    } else if (+productId === 21) {
+        addIdentifierAreaTo12x9PostCard(store);
+    }
+};

package/src/utils/templateIdentifierArea/personal.ts

@@ -0,0 +1,107 @@
+// 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[];
+    draggable?: boolean;
+    resizable?: boolean;
+    contentEditable: boolean;
+    styleEditable: boolean;
+    text: string;
+    fontSize: number;
+    fontFamily: string;
+    fontStyle: string;
+    fontWeight: string;
+    fill: string;
+    align: string;
+    verticalAlign: string;
+    lineHeight: number;
+    letterSpacing: number;
+    backgroundEnabled?: boolean;
+    backgroundColor?: string;
+    backgroundOpacity?: number;
+    backgroundCornerRadius?: number;
+    backgroundPadding?: number;
+}
+
+// Define the type for the page
+interface Page {
+    addElement: (element: Element) => void;
+}
+
+// Define the type for the store
+interface Store {
+    pages: Page[];
+    history: {
+        clear: () => void;
+    };
+}
+
+// Reusable function to create text elements
+const createTextElement = (
+    id: string,
+    text: string,
+    x: number,
+    y: number,
+    width: number
+): Element => ({
+    id,
+    type: "text",
+    name: "",
+    opacity: 1,
+    visible: true,
+    selectable: false,
+    removable: false,
+    alwaysOnTop: true,
+    showInExport: true,
+    x,
+    y,
+    width,
+    height: 11,
+    rotation: 0,
+    draggable: true,
+    resizable: true,
+    contentEditable: true,
+    styleEditable: false,
+    text,
+    fontSize: 7,
+    fontFamily: "Roboto",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fill: "grey",
+    align: "center",
+    verticalAlign: "top",
+    lineHeight: 1.2,
+    letterSpacing: 0,
+});
+
+
+export const addIdentifierAreaToPersonalLetter = (store: Store): void => {
+    const page = store.pages[0];
+
+    const elements: Element[] = [
+        createTextElement("cont-id-placeholder", "C:", 23.5, 796, 11),
+        createTextElement("contId", "0000001", 32, 796, 30),
+        createTextElement("sequence-id-placeholder", "| S:", 59.5, 796, 12),
+        createTextElement("sequence", "0000001", 69.8, 796, 29),
+        createTextElement("template-id-placeholder", "| T:", 95, 796, 14),
+        createTextElement("templateId", "0001034", 106.4, 796, 29),
+        createTextElement("order-id-placeholder", "| O:", 135.4, 796, 11),
+        createTextElement("orderId", "0000127", 146.4, 796, 29),
+    ];
+
+    elements.forEach(element => page.addElement(element));
+    store.history.clear();
+};