@openlettermarketing/olc-react-sdk 2.1.6-beta.1 → 2.1.6-beta.3

package/build/types/src/components/TopNavigation/FieldValidationModal/index.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { InvalidField } from '../../../utils/template-builder';
 import './styles.scss';
 interface FieldValidationModalProps {
     open: boolean;
-    invalidFields: InvalidField[];
+    invalidFields: string[];
     currentTheme?: string | null | undefined;
+    loading?: boolean;
     handleClose: () => void;
+    handleContinue: () => void;
 }
 declare const FieldValidationModal: React.FC<FieldValidationModalProps>;
 export default FieldValidationModal;

package/build/types/src/utils/message.d.ts

@@ -138,10 +138,10 @@ export declare const MESSAGES: {
         readonly SUBMIT_BUTTON: "Save";
         readonly FIELD_VALIDATION: {
             readonly TITLE: "Invalid Fields";
-            readonly HEADING: "Please fix the following field errors";
+            readonly HEADING: "The following fields are not recognized";
             readonly DESCRIPTION: (fieldNames: string) => string;
-            readonly INVALID_FORMAT: "is incorrect";
-            readonly NOT_UPPERCASE: "is incorrect";
+            readonly CONTINUE_BUTTON: "Continue Saving";
+            readonly CANCEL_BUTTON: "Cancel";
         };
     };
     readonly QR_CODE_MODAL: {

package/build/types/src/utils/template-builder.d.ts

@@ -88,3 +88,13 @@ export interface InvalidField {
  * @returns Array of objects containing invalid fields and their issues
  */
 export declare const validateTemplateFields: (pages: any) => InvalidField[];
+/**
+ * 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 declare const validateAllowedTemplateFields: (templateJSON: any, allowedKeys: string[]) => string[];

package/build/types/version.d.ts

@@ -1 +1 @@
-export const SDK_VERSION: "2.1.6-beta.1";
+export const SDK_VERSION: "2.1.6-beta.3";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openlettermarketing/olc-react-sdk",
   "private": false,
-  "version": "2.1.6-beta.1",
+  "version": "2.1.6-beta.3",
   "type": "module",
   "description": "Simplify template builder integration for any product.",
   "main": "build/index.js",

package/src/components/TopNavigation/FieldValidationModal/index.tsx

@@ -10,17 +10,16 @@ import DialogV2 from '../../GenericUIBlocks/Dialog/V2';
 // Icons
 import Warning from '../../../assets/images/modal-icons/warning';
 
-// Types
-import { InvalidField } from '../../../utils/template-builder';
-
 // Styles
 import './styles.scss';
 
 interface FieldValidationModalProps {
   open: boolean;
-  invalidFields: InvalidField[];
+  invalidFields: string[];
   currentTheme?: string | null | undefined;
+  loading?: boolean;
   handleClose: () => void;
+  handleContinue: () => void;
 }
 
 const modalStyles = {
@@ -38,10 +37,11 @@ const FieldValidationModal: React.FC<FieldValidationModalProps> = ({
   open,
   invalidFields,
   currentTheme,
+  loading = false,
   handleClose,
+  handleContinue,
 }) => {
-  // Build the description with all field names (reversed so UI order matches template order)
-  const fieldNames = [...invalidFields].reverse().map(item => `"${item.field}"`).join(', ');
+  const fieldNames = [...invalidFields].map(item => `"${item}"`).join(', ');
   const description = MESSAGES.TEMPLATE.FIELD_VALIDATION.DESCRIPTION(fieldNames);
 
   return currentTheme === 'v2' ? (
@@ -49,23 +49,32 @@ const FieldValidationModal: React.FC<FieldValidationModalProps> = ({
       icon={<Warning fill="var(--primary-color)" />}
       customStyles={modalStylesV2}
       open={open}
+      loading={loading}
       handleClose={handleClose}
       title={MESSAGES.TEMPLATE.FIELD_VALIDATION.TITLE}
       subHeading=""
       description={description}
       currentTheme="v2"
       isGallery={false}
-      hideButtons={true}
+      onSubmit={handleContinue}
+      submitText={MESSAGES.TEMPLATE.FIELD_VALIDATION.CONTINUE_BUTTON}
+      onCancel={handleClose}
+      cancelText={MESSAGES.TEMPLATE.FIELD_VALIDATION.CANCEL_BUTTON}
     />
   ) : (
     <Dialog
       icon={<Warning fill="var(--primary-color)" />}
       customStyles={modalStyles}
       open={open}
+      loading={loading}
       handleClose={handleClose}
       title={MESSAGES.TEMPLATE.FIELD_VALIDATION.TITLE}
       subHeading=""
       description={description}
+      onSubmit={handleContinue}
+      submitText={MESSAGES.TEMPLATE.FIELD_VALIDATION.CONTINUE_BUTTON}
+      onCancel={handleClose}
+      cancelText={MESSAGES.TEMPLATE.FIELD_VALIDATION.CANCEL_BUTTON}
     />
   );
 };

package/src/components/TopNavigation/index.tsx

@@ -33,7 +33,7 @@ import {
   validateEmoji,
   validateGSV,
   validateTemplateFields,
-  InvalidField,
+  validateAllowedTemplateFields,
 } from '../../utils/template-builder';
 import { addSafetyBordersToNonWindowProfessioanl } from '../../utils/templateSafetyBorders/professional';
 import { addIdentifierAreaToProfessionalNonWindow } from '../../utils/templateIdentifierArea/professional';
@@ -145,7 +145,7 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
   const [downloadingProof, setDownloaingProof] = useState<boolean>(false);
   const [downloadingEnvelope, setDownloaingEnvelope] = useState<boolean>(false);
   const [templateTitle, setTemplateTitle] = useState('');
-  const [invalidFields, setInvalidFields] = useState<InvalidField[]>([]);
+  const [invalidFields, setInvalidFields] = useState<string[]>([]);
 
   const { id } = useParams<{ id: string }>();
 
@@ -451,19 +451,6 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
           return;
         }
 
-        // Validate fields FIRST - before other validations
-        const fieldValidationResult = validateTemplateFields(jsonData.pages);
-
-        if (fieldValidationResult.length > 0) {
-          setInvalidFields(fieldValidationResult);
-          setIsShowModel((prev) => ({ 
-            ...prev, 
-            open: true, 
-            model: 'field-validation' 
-          }));
-          return; // Stop save process
-        }
-
         const hasEmoji = validateEmoji(jsonData.pages);
 
         if (hasEmoji) {
@@ -589,28 +576,61 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
     }
   };
 
+  const handleContinueAnyway = () => {
+    setIsShowModel((prev) => ({ ...prev, loading: true }));
+    handleSave();
+  };
+
   const handleChangeModel = (
     model: string = '',
     loading: string | null = null
   ) => {
-    // If trying to open save modal, validate fields first
+    // When opening the save modal, validate all {{...}} tokens against the allowed list
+    // and also catch any malformed/incomplete brace patterns (e.g. {{C.ZIP_COD without closing }})
     if (model === 'save' && templateType === 'json') {
+      const tokenPattern = /\{\{[^{}]+\}\}/g;
+
+      // Flatten v2 custom field sections (each section has a .fields array)
+      const flattenedCustomFieldsV2 = (customFieldsV2 as any[]).length > 0
+        ? (customFieldsV2 as any[]).flatMap((section: { fields: any }) => section.fields)
+        : [];
+
+      const allAllowedFields = [
+        ...defaultFields,
+        ...customFields,          // v1 custom fields from API
+        ...flattenedCustomFieldsV2, // v2 custom fields from API (flattened)
+        ...Object.values(dynamicFields),
+        ...defaultSenderFields,
+        ...defaultPropertyFields,
+        ...defaultMiscFields,
+      ];
+      const allowedKeys = Array.from(new Set(
+        allAllowedFields.flatMap((field: any) =>
+          (field?.key || '').match(tokenPattern) || []
+        )
+      ));
+
       const jsonData = store.toJSON();
-      const fieldValidationResult = validateTemplateFields(jsonData.pages);
-      
-      if (fieldValidationResult.length > 0) {
-        // Show validation modal instead of save modal
-        setInvalidFields(fieldValidationResult);
+
+      // Catch complete tokens not in the allowed list
+      const unrecognizedFields = validateAllowedTemplateFields(jsonData, allowedKeys);
+
+      // Catch malformed/incomplete patterns (e.g. {{C.ZIP_COD with no closing }})
+      const formatErrors = validateTemplateFields(jsonData.pages).map((f) => f.field);
+
+      const allInvalid = Array.from(new Set([...unrecognizedFields, ...formatErrors]));
+
+      if (allInvalid.length > 0) {
+        setInvalidFields(allInvalid);
         setIsShowModel({
           open: true,
           model: 'field-validation',
-          loading: false
+          loading: false,
         });
-        return; // Don't open save modal
+        return;
       }
     }
-    
-    // If validation passed or not save modal, proceed normally
+
     setIsShowModel((prev) => ({
       ...prev,
       open: !prev.open,
@@ -953,8 +973,10 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
         <FieldValidationModal
           open={isShowModel.open}
           invalidFields={invalidFields}
+          loading={isShowModel.loading}
           currentTheme={currentTheme}
           handleClose={() => handleChangeModel()}
+          handleContinue={handleContinueAnyway}
         />
       )}
       {/* Duplicate Template Modal */}

package/src/utils/message.ts

@@ -145,10 +145,10 @@ export const MESSAGES = {
     SUBMIT_BUTTON: "Save",
     FIELD_VALIDATION: {
       TITLE: "Invalid Fields",
-      HEADING: "Please fix the following field errors",
-      DESCRIPTION: (fieldNames: string) => `Following fields ${fieldNames} are incorrect to proceed further. You need to fix those`,
-      INVALID_FORMAT: "is incorrect",
-      NOT_UPPERCASE: "is incorrect",
+      HEADING: "The following fields are not recognized",
+      DESCRIPTION: (fieldNames: string) => `The following field(s) ${fieldNames} are not recognized.`,
+      CONTINUE_BUTTON: "Continue Saving",
+      CANCEL_BUTTON: "Cancel",
     },
   },
   QR_CODE_MODAL: {

package/src/utils/template-builder.ts

@@ -350,34 +350,53 @@ export const validateTemplateFields = (pages: any): InvalidField[] => {
     page.children?.forEach((child: any) => {
       if (child.type === 'text' && child.text) {
         const text = child.text;
-        
-        // Find all potential field tokens/fields in the text.
-        // A tokentokens/fields  is any sequence that contains at least one brace character.
-        const tokens = text.split(/\s+/);
-        
-        tokens.forEach((token: string) => {
-          if (!token) return;
-          
-          // Only process tokens that contain at least one brace
-          if (!token.includes('{') && !token.includes('}')) return;
-          
-          // Valid format: must be EXACTLY {{UPPERCASE_CONTENT}} with no extra chars
+
+        // ── 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 = /^\{\{.+\}\}$/.test(token);
+            const isDoubleBrace = /^\{\{[\s\S]+\}\}$/.test(token);
             const hasOnlyValidChars = /^[A-Za-z0-9._]+$/.test(content);
-            
             if (isDoubleBrace && hasOnlyValidChars && content !== content.toUpperCase()) {
-              // Double brace but lowercase content
+              // e.g. {{c.last_name}} — correct braces but lowercase content
               invalidFields.push({ field: token, issue: 'NOT_UPPERCASE', pageIndex });
             } else {
-              // Any other invalid format
               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 });
+          }
+        }
       }
     });
   });
@@ -389,3 +408,23 @@ export const validateTemplateFields = (pages: any): InvalidField[] => {
   
   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/version.js

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