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

package/src/utils/helper.ts

@@ -0,0 +1,205 @@
+export let publicApiKey: string = '';
+export let isSandbox: boolean = false;
+export let currentEnv: any = false;
+
+export const copyToClipboard = (text: string): void => {
+  navigator.clipboard
+    .writeText(text)
+    .then(() => { })
+    .catch((err) => {
+      console.error('Failed to copy text: ', err);
+    });
+};
+
+export const getPublicApiKey = () => {
+  return publicApiKey;
+};
+
+export const setPublicApiKey = (key: string) => {
+  publicApiKey = key;
+};
+
+export const getIsSandbox = () => {
+  return isSandbox;
+};
+
+export const getEnv = () => {
+  return currentEnv;
+};
+
+export const setIsSandbox = (sandbox: boolean) => {
+  isSandbox = sandbox;
+};
+
+export const setEnv = (env: string) => {
+  currentEnv = env;
+};
+
+export const removeSThroughOne = (input: string) => {
+  // Check if the string contains exactly one '0' or one '1'
+  const containsExactlyOneOne = /^.*\b1\b(?!\d).*$/g.test(input) && !input.match(/1\d/);
+
+  if (containsExactlyOneOne) {
+    return input.endsWith('s') ? input.slice(0, -1) : input;
+  }
+
+  return input;
+}
+
+export const validURL = (str: string) => {
+  var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
+    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
+    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
+    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
+    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
+    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
+  return !!pattern.test(str);
+}
+
+
+export const hexToRgba = (hex: any, opacity: any) => {
+  // Remove the hash at the start if it's there
+  hex = hex.replace(/^#/, '');
+
+  // Parse r, g, b values
+  let r = parseInt(hex.substring(0, 2), 16);
+  let g = parseInt(hex.substring(2, 4), 16);
+  let b = parseInt(hex.substring(4, 6), 16);
+
+  // Return the RGBA string
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+
+export const getType = (file: any) => {
+  const { type } = file;
+  if (type.indexOf('svg') >= 0) {
+    return 'svg';
+  }
+  if (type.indexOf('image') >= 0) {
+    return 'image';
+  }
+  if (type.indexOf('video') >= 0) {
+    return 'video';
+  }
+  return 'image';
+}
+
+export const cleanString = (input: string): string => {
+  var output = "";
+  for (var i = 0; i < input.length; i++) {
+    if (input.charCodeAt(i) <= 127) {
+      output += input.charAt(i);
+    }
+  }
+  return output;
+}
+
+export const createBorder = (
+  id: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  rotation: number,
+  color: string = "rgba(48,155,95,1)",
+) => ({
+  id,
+  type: "line",
+  opacity: 1,
+  visible: true,
+  selectable: false,
+  removable: false,
+  alwaysOnTop: true,
+  showInExport: false,
+  x,
+  y,
+  width,
+  height,
+  rotation,
+  color,
+  dash: [4, 1],
+  draggable: false,
+  resizable: false,
+});
+
+
+export const createSafetyTextElement = (
+  id: string,
+  x: number,
+  y: number,
+  width: number,
+  text: string,
+  rotation: number = 0,
+  fontSize: number = 9,
+) => {
+  return {
+    id,
+    type: "text",
+    name: "",
+    opacity: 1,
+    visible: true,
+    selectable: false,
+    removable: false,
+    alwaysOnTop: true,
+    showInExport: false,
+    x,
+    y,
+    width,
+    height: 12,
+    rotation,
+    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,
+    fontSize,
+    fontFamily: "Noto Sans JP",
+    fontStyle: "italic",
+    fontWeight: "normal",
+    fill: "rgba(74,74,74,1)",
+    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,
+  };
+}
+
+export const dataURLtoBlob = (dataURL: string, type: string): Blob => {
+  // Extract the Base64 data by removing the prefix
+  const base64Index = dataURL.indexOf(";base64,") + 8;
+  const base64String = dataURL.substring(base64Index);
+
+  try {
+    const byteString = atob(base64String);
+    const arrayBuffer = new Uint8Array(byteString.length);
+
+    for (let i = 0; i < byteString.length; i++) {
+      arrayBuffer[i] = byteString.charCodeAt(i);
+    }
+
+    return new Blob([arrayBuffer], { type });
+  } catch (error) {
+    console.error("Failed to decode Base64 string:", error);
+    throw new Error("Invalid Base64 string");
+  }
+};

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,162 @@
+// Default messages and Typography
+
+export const MESSAGES = {
+  TEMPLATE_MESSAGE_ON_SMALL_SCREEN: 'Template Builder is available on tablet and web view only.',
+  GENERAL_ERROR: "Internal Server Error",
+  DOWNLOAD_ERROR: 'Something went wrong. Please try again.',
+  CLONE_ERROR: 'We are currently unable to clone the template. Please try again later.',
+  TEMPLATE: {
+    SEARCH_PLACE_HOLDER: "Search by template name or template ID",
+    NAME_REQUIRED: "Template Name is required",
+    TYPE_REQUIRED: "Template Type is required",
+    DESIGN_NEW: "Design Your Own",
+    NO_MY_TEMPLATES: "No Templates to show",
+    LOADING_TEMPLATE: "Loading Templates...",
+    NO_TEAM_TEMPLATES: "No Team Templates to show",
+    NO_OLC_TEMPLATES: "No OLC Templates to show",
+    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",
+    GSV_RESTRICT_ONE_PER_PAGE: 'Only one GSV image is allowed per page.',
+    EMOJI_NOT_ALLOWED: 'Emojis are not allowed in the template. Please remove them before saving.',
+    EMPTY_QR_NOT_ALLOWED: 'Please add a URL to your QR code in order to save the template.',
+    SIZE_LIMIT_EXCEED: 'Template size should be less than 7MB. Please remove custom fonts or unnecessary assets.',
+    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",
+    },
+    CUSTOM_UPLOAD_SECTION: {
+      HEADING: 'Do you want to upload your own images?',
+      ACCEPTED_FORMATS: 'Accepted File Formats: JPEG, PNG, SVG',
+      MAX_SIZE: 'Max File Size Limits: 5MB',
+      NOTE: 'Please upload a high-resolution image to ensure better print quality for your mailer.',
+      UPLOAD_BTN_TEXT: 'Upload Image',
+      TYPE_VALIDATION: 'Only image files with extensions jpeg, png, or svg are allowed.',
+      SIZE_VALIDATION: 'File size must be under 5MB.',
+    },
+    QR_SECTION: {
+      EMPTY_QR: 'Please add a URL to your QR code.',
+      EMPTY_CAMPAIGN: 'Please add a Campaign Name to your QR code.',
+      QR_PLACEHOLDER: 'Enter QR URL',
+      INVALID_URL: 'Please add a valid URL to your QR code.',
+      FAILED_QR: 'Failed to create QR code',
+      SUBMIT_BUTTON: "Add new QR code",
+      UPDATE_BUTTON: "Update QR code",
+      QR_NOTE: 'Add a QR code to track engagement. Select a saved code or create a new one for this template.'
+    },
+    HIRE_DESIGNER: {
+      TITLE: 'Custom Design Form',
+      UPLOAD_HEADING: 'Upload Design Files',
+      UPLOADED_TEXT: 'Uploaded',
+      FILE_VALLIDATION: 'One or more files have unsupported formats. Please upload only .png, .jpg, .jpeg, .pdf, .doc, or .docx files.',
+      FILE_NUMBER: 'You can only upload up to 5 files.',
+      TITLE_REQUIRED: 'Template Name is required',
+      URL_REQUIRED: 'Video URL is required',
+      URL_VAIDATION: 'Video URL is not valid',
+      COMMENT_REQUIRED: 'Comments are required',
+      EMAIL_REQUIRED: 'Email is required',
+      EMAIL_VALIDATION: 'Email is not valid',
+      SUBMIT_BUTTON: "Next",
+    },
+    DUPLICATE_MODAL: {
+      TITLE: 'Clone Template',
+      NAME_PLACEHOLDER: 'Enter new template name',
+      CANCEL_BUTTON: 'Cancel',
+      SUBMIT_BUTTON: "Clone",
+      SUB_HEADING: 'Enter a New Name for Your Template',
+      DESCRIPTION: 'Create a clone of an existing template. Please provide a new name for the template to proceed.',
+      NOTE: " Note: Only saved changes will appear in the cloned template."
+    },
+    CUSTOM_ADD_ONS: {
+      TITLE: `Optional Add-On's`,
+      NO_RESULT: 'Add-ons are unavailable because the property address is excluded. Please update your settings to enable these features.',
+      DESCRIPTION: `Optional add-ons are additional services that user can choose to include with their template, enhancing their overall experience.`,
+      GSV: {
+        TITLE: 'Street View Property Image',
+        DESCRIPTION: '+$0.02 per mail piece',
+        CUSTOM_PRICE: ' per mail piece',
+      },
+      PROPERTY_OFFER : {
+        TITLE: 'Add an Offer',
+        DESCRIPTION: '(generated using Property Info)',
+        PRICE: '+$0.03 per mail piece',
+        CUSTOM_PRICE: ' per mail piece',
+        CUSTOM: {
+          TITLE: 'Add an Offer (+$0.03 per mail piece)',
+          DESCRIPTION: 'Unsure of your offer %?',
+          PRICE: '+$0.03 per mail piece',
+          CLICK: 'Click here',
+          CSV_IMPORT: 'to import a CSV to determine the best offer % for you!',
+          CUSTOM_PRICE: 'Enter Offer Percentage*'
+        }
+      }
+    },
+    DOWNLOAD_PROOF_BUTTON: "Download Mailer Proof",
+    DOWNLOAD_ENVELOPE_BUTTON: "Download Envelope Proof",
+    CANCEL_BUTTON: "Cancel",
+    SUBMIT_BUTTON: "Save"
+  },
+  QR_CODE_MODAL: {
+    CREATE_TITLE: "Create New QR Code",
+    UPDATE_TITLE: "Update QR Code",
+    INPUT: {
+      LABEL: "Campaign Name",
+      PLACEHOLDER: "Enter Campaign Name",
+      ERROR: {
+        REQUIRED: "QR Code URL is required",
+        INVALID: "QR Code URL is not valid",
+      }
+    }
+  },
+  SNACKBAR: {
+    HEADING: "Notifications",
+  },
+} as const;

package/src/utils/products.ts

@@ -0,0 +1,186 @@
+interface Size {
+    id: string;
+    size: string;
+    title?: string; 
+    label?: string;
+}
+
+interface Product {
+    id: string;
+    title: string;
+    productType: string;
+    size: Size[];
+    finish?: string;
+    label?: string;
+    envelopeOptions?: string;
+    hasEnvelope?: boolean;
+    paper?: string;
+    envelope?: any;
+    nonEnvelope?: any;
+    ink?: string;
+    windowed?: boolean; // optional property
+}
+
+
+export const Products: Product[] = [
+    {
+        id: "9",
+        title: "Bi-Fold Self-Mailers",
+        productType: "Bi-Fold Self-Mailers",
+        hasEnvelope: false,
+        paper: '80# text',
+        finish: 'Glass Coated',
+        size: [
+            {
+                id: "9",
+                size: "6x18"
+            }
+        ],
+    },
+    {
+        id: "5",
+        title: "Personal Letters",
+        productType: "Personal Letters",
+        hasEnvelope: true,
+        paper: '60# Statement',
+        finish: 'Uncoated',
+        label: "5.5x8.5",
+        envelopeOptions: '4 Options',
+        envelope: 'A6 White / A6 Grey Herringbone',
+        ink: 'Full color or black & white',
+        size: [
+            {
+                id: "5",
+                size: "8.5x5.5",
+                label: "5.5x8.5"
+            }
+        ]
+    },
+    {
+        id: "13",
+        title: "Postcards",
+        productType: "Postcards",
+        hasEnvelope: false,
+        paper: '100#-120# Cover',
+        finish:'Glossy Front/Uncoated Back', 
+        size: [
+            {
+                id: "13",
+                size: "4x6",
+                label: "4x6"
+            },
+            {
+                id: "14",
+                size: "6x9",
+                label: "6x9"
+            },
+            {
+                id: "15",
+                size: "6x11",
+                label: "6x11"
+            },
+            {
+                id: "21",
+                size: "12x9",
+                label: "9x12"
+            }
+        ]
+    },
+    {
+        id: "16",
+        title: "Real Penned Letter",
+        productType: "Real Penned Letter",
+        hasEnvelope: true,
+        paper: '60# Statement',
+        finish: 'Uncoated',
+        envelopeOptions: '5 Options',
+        envelope: 'A6 Lavender / A6 Navy Blue',
+        ink: 'Blue or black ink options',
+        size: [
+            {
+                id: "16",
+                size: "8.5x5.5",
+                title: "Personal Letter",
+                label: "5.5x8.5",
+            },
+            {
+                id: "38",
+                size: "11x8.5",
+                title: "Professional Letter",
+                label: "8.5x11"
+            }
+        ]
+    },
+    {
+        id: "11",
+        title: "Tri-Fold Self-Mailers",
+        productType: "Tri-Fold Self-Mailers",
+        hasEnvelope: false,
+        paper: '80# text',
+        finish: 'Glass Coated',
+        size: [
+            {
+                id: "11",
+                size: "12x9",
+                label: "8.5x11"
+            }
+        ]
+    },
+    {
+        id: "2",
+        title: "Professional Letters - Windowed Envelope",
+        productType: "Professional Letters",
+        hasEnvelope: true,
+        paper: '60# Statement',
+        envelope: '#10 Double-Window',
+        nonEnvelope: '#10 Grey',
+        envelopeOptions: '1 Option',
+        finish: 'Uncoated',
+        label: "8.5x11",
+        ink: 'Full color or black & white',
+        size: [
+            {
+                id: "2",
+                size: "11x8.5",
+                label: "8.5x11",
+            }
+        ],
+        windowed: true
+    },
+    {
+        id: "4",
+        title: "Professional Letters - Non-windowed Envelope",
+        productType: "Professional Letters",
+        hasEnvelope: true,
+        paper: '60# Statement',
+        envelopeOptions: '5 Options',
+        finish: 'Uncoated',
+        label: "8.5x11",
+        envelope: '#10 Grey',
+        ink: '',
+        size: [
+            {
+                id: "4",
+                size: "11x8.5",
+                label: "8.5x11",
+            }
+        ],
+        windowed: false
+    },
+    {
+        id: "18",
+        title: "Snap Pack Mailers",
+        productType: "Snap Pack Mailers",
+        hasEnvelope: false,
+        paper: '28# bond',
+        finish: 'Uncoated',
+        label: "8.5x11",
+        size: [
+            {
+                id: "18",
+                size: "11x8.5",
+                label: "8.5x11"
+            }
+        ]
+    }
+];