@openlettermarketing/olc-react-sdk 2.1.6-beta.2 → 2.1.6-beta.4

package/src/utils/template-builder.ts

@@ -84,10 +84,10 @@ export const selfMailerProduct = {
       ],
     },
     {
-      id: "11", defaultSize: "11x8.5", title: "Self Mailer", productType: "Tri-Fold Self-Mailers", hasEnvelope: false, paper: '80# text', label: '8.5x11',
+      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: "11x8.5",
+        size: "12x9",
         label: "8.5x11"
       }]
     },
@@ -325,4 +325,106 @@ export const isValidQR = (pages: any) => {
     }
   }
   return true;
-}
+}
+
+/**
+ * Interface for invalid field validation results
+ */
+export interface InvalidField {
+  field: string;
+  issue: 'INVALID_FORMAT' | 'NOT_UPPERCASE';
+  pageIndex: number;
+}
+
+/**
+ * Validates template fields for correct format and capitalization
+ * Returns array of invalid fields found in the template
+ * 
+ * @param pages - Template pages array from store.toJSON()
+ * @returns Array of objects containing invalid fields and their issues
+ */
+export const validateTemplateFields = (pages: any): InvalidField[] => {
+  const invalidFields: InvalidField[] = [];
+  
+  pages.forEach((page: any, pageIndex: number) => {
+    page.children?.forEach((child: any) => {
+      if (child.type === 'text' && child.text) {
+        const text = child.text;
+
+        // ── Step 1 - Find ALL complete brace expressions: anything from the first { to the last } on the same "group", including spaces inside.
+        const completePattern = /\{+[^{}]*\}+/g;
+        let match: RegExpExecArray | null;
+
+        // Track which character ranges are already covered so Steps 2 & 3 -  don't double-report sub-strings of a complete match.
+        const coveredRanges: Array<[number, number]> = [];
+
+        const completeExec = new RegExp(completePattern.source, 'g');
+        while ((match = completeExec.exec(text)) !== null) {
+          coveredRanges.push([match.index, match.index + match[0].length]);
+          const token = match[0];
+          // Valid: EXACTLY {{UPPERCASE_CONTENT}} — no spaces, no lowercase
+          const isValidFormat = /^\{\{[A-Z0-9._]+\}\}$/.test(token);
+
+          if (!isValidFormat) {
+            const content = token.replace(/^\{+|\}+$/g, '');
+            const isDoubleBrace = /^\{\{[\s\S]+\}\}$/.test(token);
+            const hasOnlyValidChars = /^[A-Za-z0-9._]+$/.test(content);
+            if (isDoubleBrace && hasOnlyValidChars && content !== content.toUpperCase()) {
+              // e.g. {{c.last_name}} — correct braces but lowercase content
+              invalidFields.push({ field: token, issue: 'NOT_UPPERCASE', pageIndex });
+            } else {
+              invalidFields.push({ field: token, issue: 'INVALID_FORMAT', pageIndex });
+            }
+          }
+        }
+
+        // Helper: returns true if the character at `idx` is inside a covered range
+        const isCovered = (idx: number): boolean =>
+          coveredRanges.some(([s, e]) => idx >= s && idx < e);
+
+        // ── Step 2 ─ Find incomplete patterns that have opening brace(s) but NO closing brace.e.g. "{C.LAST_NAME" or "{{C.LAST_NAME" at end of text.
+        const missingClosingExec = /\{+[^{}]*/g;
+        while ((match = missingClosingExec.exec(text)) !== null) {
+          if (!isCovered(match.index) && match[0].trim().length > 0) {
+            invalidFields.push({ field: match[0], issue: 'INVALID_FORMAT', pageIndex });
+          }
+        }
+
+        // ── Step 3 ─ Find incomplete patterns that have closing brace(s) but NO opening brace. e.g. "C.LAST_NAME}" or "C.LAST_NAME}}".
+        const missingOpeningExec = /(?<!\{)[A-Z0-9][A-Z0-9._\s]*\}+/g;
+        while ((match = missingOpeningExec.exec(text)) !== null) {
+          if (!isCovered(match.index) && match[0].trim().length > 0) {
+            invalidFields.push({ field: match[0].trim(), issue: 'INVALID_FORMAT', pageIndex });
+          }
+        }
+      }
+    });
+  });
+  
+  // Remove duplicates
+  const uniqueFields = invalidFields.filter((item: InvalidField, index: number, self: InvalidField[]) =>
+    index === self.findIndex((t: InvalidField) => t.field === item.field && t.issue === item.issue)
+  );
+  
+  return uniqueFields;
+};
+
+/**
+ * Validates that all dynamic field tokens used in the template exist in the allowed keys list.
+ * Scans the entire serialized template JSON for {{...}} patterns and returns any tokens
+ * that are not present in the provided allowedKeys list.
+ *
+ * @param templateJSON - Full template JSON object from store.toJSON()
+ * @param allowedKeys - Array of allowed {{...}} token strings (predefined + custom fields)
+ * @returns Array of unrecognized token strings; empty array means all fields are valid
+ */
+export const validateAllowedTemplateFields = (
+  templateJSON: any,
+  allowedKeys: string[]
+): string[] => {
+  const templateStr = JSON.stringify(templateJSON);
+  const pattern = /\{\{[^{}]+\}\}/g;
+  const matches = templateStr.match(pattern) || [];
+  const unique = Array.from(new Set(matches));
+  return unique.filter(token => !allowedKeys.includes(token));
+};

package/src/utils/templateIdentifierArea/triFold.ts

@@ -1,5 +1,3 @@
-import { DPI } from "../constants";
-
 // Define the type for the element being added
 interface Element {
     id: string;
@@ -45,8 +43,6 @@ interface Page {
 
 // Define the type for the store
 interface Store {
-    width: number;
-    height: number;
     pages: Page[];
     history: {
         clear: () => void;
@@ -94,30 +90,16 @@ const createTextElement = (
 
 export const addIdentifierAreaToTriFold = (store: Store): void => {
     const page = store.pages[0];
-    const foldSectionHeight = store.height / 3;
-    const restrictedAreaHeight = 2.375 * DPI;
-    const restrictedAreaY = store.height - restrictedAreaHeight - 0.125 * DPI - foldSectionHeight;
-    const identifierY = restrictedAreaY + restrictedAreaHeight - 12;
-
-    // Keep the original right-side alignment behavior, but make it responsive to page width.
-    const contPlaceholderX = store.width - 185;
-    const contIdX = store.width - 177;
-    const sequencePlaceholderX = store.width - 149;
-    const sequenceX = store.width - 140;
-    const templatePlaceholderX = store.width - 114;
-    const templateIdX = store.width - 101.4;
-    const orderPlaceholderX = store.width - 72.4;
-    const orderIdX = store.width - 61.4;
 
     const elements: Element[] = [
-        createTextElement("cont-id-placeholder", "C:", contPlaceholderX, identifierY, 11),
-        createTextElement("contId", "0000001", contIdX, identifierY, 30),
-        createTextElement("sequence-id-placeholder", "| S:", sequencePlaceholderX, identifierY, 12),
-        createTextElement("sequence", "0000001", sequenceX, identifierY, 29),
-        createTextElement("template-id-placeholder", "| T:", templatePlaceholderX, identifierY, 14),
-        createTextElement("templateId", "0001034", templateIdX, identifierY, 29),
-        createTextElement("order-id-placeholder", "| O:", orderPlaceholderX, identifierY, 11),
-        createTextElement("orderId", "0000127", orderIdX, identifierY, 29),
+        createTextElement("cont-id-placeholder", "C:", 679, 739, 11),
+        createTextElement("contId", "0000001", 687, 739, 30),
+        createTextElement("sequence-id-placeholder", "| S:", 715, 739, 12),
+        createTextElement("sequence", "0000001", 724, 739, 29),
+        createTextElement("template-id-placeholder", "| T:", 750, 739, 14),
+        createTextElement("templateId", "0001034", 762.6, 739, 29),
+        createTextElement("order-id-placeholder", "| O:", 791.6, 739, 11),
+        createTextElement("orderId", "0000127", 802.6, 739, 29),
     ];
 
     elements.forEach(element => page.addElement(element));

package/src/utils/templateRestrictedArea/triFold.ts

@@ -85,8 +85,6 @@ interface Store {
 
 export const addRestrictedAreaToTriFold = (store: Store, size: [number, number], barcodeSrc: string): void => {
     const page = store.pages[0];
-    const foldSectionHeight = store.height / 3;
-    const indiciaLeftShift = 8;
 
     const elements: Element[] = [
         {
@@ -100,7 +98,7 @@ export const addRestrictedAreaToTriFold = (store: Store, size: [number, number],
             alwaysOnTop: true,
             showInExport: true,
             x: store.width - size[0] * DPI - 0.15 * DPI,
-            y: store.height - size[1] * DPI - 0.125 * DPI - foldSectionHeight,
+            y: store.height - size[1] * DPI - 0.125 * DPI - 4 * DPI,
             width: size[0] * DPI,
             height: size[1] * DPI,
             rotation: 0,
@@ -139,7 +137,7 @@ export const addRestrictedAreaToTriFold = (store: Store, size: [number, number],
             alwaysOnTop: true,
             showInExport: true,
             x: store.width - size[0] * DPI - 0.15 * DPI + 5,
-            y: store.height - size[1] * DPI - 0.125 * DPI + 20 - foldSectionHeight,
+            y: store.height - size[1] * DPI - 0.125 * DPI + 20 - 4 * DPI,
             width: 240,
             height: 20,
             rotation: 0,
@@ -190,8 +188,8 @@ export const addRestrictedAreaToTriFold = (store: Store, size: [number, number],
             removable: false,
             alwaysOnTop: true,
             showInExport: true,
-            x: store.width - 111 - 0.15 * DPI - indiciaLeftShift,
-            y: store.height - size[1] * DPI + 10 - foldSectionHeight,
+            x: store.width - 111 - 0.15 * DPI,
+            y: store.height - size[1] * DPI + 10 - 4 * DPI,
             width: 111,
             height: 40,
             rotation: 0,
@@ -242,7 +240,7 @@ export const addRestrictedAreaToTriFold = (store: Store, size: [number, number],
             removable: false,
             alwaysOnTop: true,
             showInExport: true,
-            y: store.height - 28 - size[1] * DPI + 100 - foldSectionHeight,
+            y: store.height - 28 - size[1] * DPI + 100 - 4 * DPI,
             x: store.width - size[0] * DPI - 0.15 * DPI + 5,
             width: size[0] * DPI - 23,
             height: 15,
@@ -284,7 +282,7 @@ export const addRestrictedAreaToTriFold = (store: Store, size: [number, number],
             alwaysOnTop: true,
             showInExport: true,
             x: store.width - size[0] * DPI - 0.15 * DPI + 5,
-            y: store.height - size[1] * DPI - 0.125 * DPI + 120 - foldSectionHeight,
+            y: store.height - size[1] * DPI - 0.125 * DPI + 120 - 4 * DPI,
             width: 240,
             height: 20,
             rotation: 0,

package/src/utils/templateSafetyBorders/triFold.ts

@@ -3,13 +3,6 @@ import { Element, Store } from "./types"
 
 export const addSafetyBordersToTriFold = (store: Store): void => {
     const randomizedId = Math.random().toString(36).substring(2, 7);
-    const borderWidth = store.width + 2;
-    const borderHeight = store.height - 52;
-    const foldSectionHeight = store.height / 3;
-    const foldLineOneY = foldSectionHeight;
-    const foldLineTwoY = foldSectionHeight * 2 - 5;
-    const borderBottomY = store.height - 28.4;
-    const rightBorderX = store.width - 29;
 
     const safetyBordersTextFirst = createSafetyTextElement(
         `safety-text-1-${randomizedId}`,
@@ -22,8 +15,8 @@ export const addSafetyBordersToTriFold = (store: Store): void => {
     const safetyLineTextFirst = createSafetyTextElement(
         `safety-line-1-${randomizedId}`,
         -2,
-        foldLineOneY - 18,
-        borderWidth,
+        366,
+        866,
         "Fold Line",
         0
     );
@@ -31,8 +24,8 @@ export const addSafetyBordersToTriFold = (store: Store): void => {
     const safetySecondLineTextFirst = createSafetyTextElement(
         `safety-line-2-${randomizedId}`,
         -2,
-        foldLineTwoY - 19,
-        borderWidth,
+        744,
+        866,
         "Fold Line",
         0
     );
@@ -47,12 +40,12 @@ export const addSafetyBordersToTriFold = (store: Store): void => {
         alwaysOnTop: true,
         showInExport: false,
         children: [
-            createBorder(`top-1-${randomizedId}`, 26, 23.5, borderWidth - 55, 4, 0),
-            createBorder(`bottom-1-${randomizedId}`, 26, borderBottomY, borderWidth - 55, 4, 0),
-            createBorder(`left-1-${randomizedId}`, 24.16, borderBottomY + 1.4, borderHeight, 4, -90),
-            createBorder(`right-1-${randomizedId}`, rightBorderX, borderBottomY + 1.4, borderHeight, 4, -90),
-            createBorder(`fold-line-1-${randomizedId}`, borderWidth, foldLineOneY, borderWidth, 2, 180, 'rgba(208,2,27,1)'),
-            createBorder(`fold-line-2-${randomizedId}`, borderWidth, foldLineTwoY, borderWidth, 2, 180, 'rgba(208,2,27,1)'),
+            createBorder(`top-1-${randomizedId}`, 26, 23.5, 811, 4, 0),
+            createBorder(`bottom-1-${randomizedId}`, 26, 1123.6, 811, 4, 0),
+            createBorder(`left-1-${randomizedId}`, 24.16, 1125, 1100, 4, -90),
+            createBorder(`right-1-${randomizedId}`, 835, 1125, 1100, 4, -90),
+            createBorder(`fold-line-1-${randomizedId}`, 866, 384, 866, 2, 180, 'rgba(208,2,27,1)'),
+            createBorder(`fold-line-2-${randomizedId}`, 866, 763, 866, 2, 180, 'rgba(208,2,27,1)'),
         ],
     };
 
@@ -67,8 +60,8 @@ export const addSafetyBordersToTriFold = (store: Store): void => {
     const safetyLineTextSecond = createSafetyTextElement(
         `safety-line-2-1-${randomizedId}`,
         -2,
-        foldLineOneY - 18,
-        borderWidth,
+        366,
+        866,
         "Fold Line",
         0
     );
@@ -76,8 +69,8 @@ export const addSafetyBordersToTriFold = (store: Store): void => {
     const safetySecondLineTextSecond = createSafetyTextElement(
         `safety-line-2-2-${randomizedId}`,
         -2,
-        foldLineTwoY - 19,
-        borderWidth,
+        744,
+        866,
         "Fold Line",
         0
     );
@@ -93,12 +86,12 @@ export const addSafetyBordersToTriFold = (store: Store): void => {
         alwaysOnTop: true,
         showInExport: false,
         children: [
-            createBorder(`top-2-${randomizedId}`, 26, 23.5, borderWidth - 55, 4, 0),
-            createBorder(`bottom-2-${randomizedId}`, 26, borderBottomY, borderWidth - 55, 4, 0),
-            createBorder(`left-2-${randomizedId}`, 24.16, borderBottomY + 1.4, borderHeight, 4, -90),
-            createBorder(`right-2-${randomizedId}`, rightBorderX, borderBottomY + 1.4, borderHeight, 4, -90),
-            createBorder(`fold-line-2-1-${randomizedId}`, borderWidth, foldLineOneY, borderWidth, 2, 180, 'rgba(208,2,27,1)'),
-            createBorder(`fold-line-2-2-${randomizedId}`, borderWidth, foldLineTwoY, borderWidth, 2, 180, 'rgba(208,2,27,1)'),
+            createBorder(`top-2-${randomizedId}`, 26, 23.5, 811, 4, 0),
+            createBorder(`bottom-2-${randomizedId}`, 26, 1123.6, 811, 4, 0),
+            createBorder(`left-2-${randomizedId}`, 24.16, 1125, 1100, 4, -90),
+            createBorder(`right-2-${randomizedId}`, 835, 1125, 1100, 4, -90),
+            createBorder(`fold-line-2-1-${randomizedId}`, 866, 384, 866, 2, 180, 'rgba(208,2,27,1)'),
+            createBorder(`fold-line-2-2-${randomizedId}`, 866, 763, 866, 2, 180, 'rgba(208,2,27,1)'),
         ],
     };
 

package/version.js

@@ -1 +1 @@
-export const SDK_VERSION = '2.1.6-beta.2';
+export const SDK_VERSION = '2.1.6-beta.4';