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

package/build/types/src/assets/images/modal-icons/checkbox-checked.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CheckboxChecked: (props: any) => React.JSX.Element;
+export default CheckboxChecked;

package/build/types/src/assets/images/modal-icons/checkbox-unchecked.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CheckboxUnchecked: (props: any) => React.JSX.Element;
+export default CheckboxUnchecked;

package/build/types/src/assets/images/modal-icons/warning.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const WarningIcon: (props: any) => React.JSX.Element;
+export default WarningIcon;

package/build/types/src/components/GenericUIBlocks/Dialog/V2/index.d.ts

@@ -17,6 +17,8 @@ interface DialogProps {
     isGallery?: boolean;
     currentTheme?: string | null | undefined;
     isQRCode?: boolean;
+    hideButtons?: boolean;
+    submitDisabled?: boolean;
 }
 declare const DialogV2: React.FC<DialogProps>;
 export default DialogV2;

package/build/types/src/components/GenericUIBlocks/Dialog/index.d.ts

@@ -16,6 +16,7 @@ interface DialogProps {
     children?: ReactNode;
     isGallery?: boolean;
     currentTheme?: string | null | undefined;
+    submitDisabled?: boolean;
 }
 declare const Dialog: React.FC<DialogProps>;
 export default Dialog;

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

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

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

@@ -136,6 +136,14 @@ export declare const MESSAGES: {
         readonly DOWNLOAD_ENVELOPE_BUTTON: "Download Envelope Proof";
         readonly CANCEL_BUTTON: "Cancel";
         readonly SUBMIT_BUTTON: "Save";
+        readonly FIELD_VALIDATION: {
+            readonly TITLE: "Invalid Fields";
+            readonly HEADING: "The following fields are not recognized";
+            readonly DESCRIPTION: "The following field(s) used in this template are not recognized by the system. You can save the template as is, but these fields will not populate with data. To resolve this, remove or replace them with valid field names.";
+            readonly ACKNOWLEDGE_LABEL: "I understand that saving now will preserve these invalid fields, but they will not be populated with data.";
+            readonly CONTINUE_BUTTON: "Continue Saving";
+            readonly CANCEL_BUTTON: "Cancel";
+        };
     };
     readonly QR_CODE_MODAL: {
         readonly CREATE_TITLE: "Create New QR Code";

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

@@ -72,3 +72,29 @@ export declare const extractCustomRistrictedBoxColor: (jsonData: any) => null;
 export declare const validateGSV: (pages: any) => boolean;
 export declare const validateEmoji: (pages: any) => boolean;
 export declare const isValidQR: (pages: any) => boolean;
+/**
+ * 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 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/src/utils/templateIdentifierArea/triFold.d.ts

@@ -38,8 +38,6 @@ interface Page {
     addElement: (element: Element) => void;
 }
 interface Store {
-    width: number;
-    height: number;
     pages: Page[];
     history: {
         clear: () => void;

package/build/types/version.d.ts

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

package/package.json

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

package/src/assets/images/modal-icons/checkbox-checked.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const CheckboxChecked = (props: any) => {
+  const { fill = 'var(--primary-color)' } = props;
+
+  return (
+    <svg width="18" height="18" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect y="0.5" width="14" height="14" rx="2" fill={fill} />
+      <g clipPath="url(#clip0_checkbox_checked)">
+        <path
+          d="M11.7909 4.97078C11.5124 4.69194 11.0602 4.69212 10.7814 4.97078L6.23808 9.51428L4.21877 7.49498C3.93994 7.21615 3.48796 7.21615 3.20912 7.49498C2.93029 7.77381 2.93029 8.2258 3.20912 8.50463L5.73315 11.0287C5.87248 11.168 6.05518 11.2378 6.23789 11.2378C6.4206 11.2378 6.60347 11.1682 6.7428 11.0287L11.7909 5.98041C12.0697 5.70177 12.0697 5.24959 11.7909 4.97078Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_checkbox_checked">
+          <rect width="9" height="9" fill="white" transform="translate(3 3.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default CheckboxChecked;

package/src/assets/images/modal-icons/checkbox-unchecked.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const CheckboxUnchecked = (props: any) => {
+  const { stroke = '#303030' } = props;
+
+  return (
+    <svg width="18" height="18" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="0.25" y="0.75" width="13.5" height="13.5" rx="1.75" stroke={stroke} strokeWidth="0.5" />
+    </svg>
+  );
+};
+
+export default CheckboxUnchecked;

package/src/assets/images/modal-icons/warning.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const WarningIcon = (props: any) => {
+  const { fill = 'var(--primary-color)' } = props;
+  
+  return (
+    <svg width="34" height="34" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M24 4L4 44H44L24 4Z" stroke={fill} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M24 18V28" stroke={fill} strokeWidth="2" strokeLinecap="round"/>
+      <circle cx="24" cy="36" r="2" fill={fill}/>
+    </svg>
+  );
+};
+
+export default WarningIcon;

package/src/components/GenericUIBlocks/Dialog/V2/index.tsx

@@ -27,6 +27,8 @@ interface DialogProps {
   isGallery?: boolean;
   currentTheme?: string | null | undefined;
   isQRCode?: boolean;
+  hideButtons?: boolean;
+  submitDisabled?: boolean;
 }
 
 const buttonStyles: CSSProperties = {
@@ -80,7 +82,9 @@ const DialogV2: React.FC<DialogProps> = ({
   children = [],
   isGallery = false,
   currentTheme = "default",
-  isQRCode = false
+  isQRCode = false,
+  hideButtons = false,
+  submitDisabled = false,
 }) => {
   const contentAdjust = submitText.length > 6 ? "fit-content" : "100px";
 
@@ -162,7 +166,7 @@ const DialogV2: React.FC<DialogProps> = ({
                 <div className="modal-footer">
                   {(!isGallery || isQRCode) &&
                     <>
-                      <button onClick={onSubmit} disabled={loading}>
+                      <button onClick={onSubmit} disabled={loading || submitDisabled}>
                         {loading ? <CircularProgress style={progressStyles} /> : submitText}
                       </button>
                       <button onClick={onCancel}>
@@ -204,9 +208,9 @@ const DialogV2: React.FC<DialogProps> = ({
                 )}
                 {children}
                 <div className="confirm-modal-footer">
-                  {!isGallery &&
+                  {!isGallery && !hideButtons &&
                     <>
-                      <button onClick={onSubmit} disabled={loading}>
+                      <button onClick={onSubmit} disabled={loading || submitDisabled}>
                         {loading ? <CircularProgress style={progressStyles} /> : submitText}
                       </button>
                       <button onClick={onCancel}>

package/src/components/GenericUIBlocks/Dialog/V2/styles.scss

@@ -223,6 +223,10 @@
         gap: 12px;
         margin-top: 16px;
 
+        &:empty {
+          margin-top: 0;
+        }
+
         button{
           min-height: 50px;
           font-size: 16px;
@@ -245,9 +249,14 @@
             justify-content: center;
             align-items: center;
             
-            &:hover{
+            &:hover:not(:disabled){
               background-color: var(--primary-color-btn-hover);
             }
+
+            &:disabled{
+              opacity: 0.45;
+              cursor: not-allowed;
+            }
           }
           
           &:last-child{

package/src/components/GenericUIBlocks/Dialog/index.tsx

@@ -28,6 +28,7 @@ interface DialogProps {
   children?: ReactNode;
   isGallery?: boolean;
   currentTheme?: string | null | undefined;
+  submitDisabled?: boolean;
 }
 
 const buttonStyles: CSSProperties = {
@@ -73,7 +74,8 @@ const Dialog: React.FC<DialogProps> = ({
   submitText = "",
   children = [],
   isGallery = false,
-  currentTheme = "default"
+  currentTheme = "default",
+  submitDisabled = false,
 }) => {
   const contentAdjust = submitText.length > 6 ? "fit-content" : "100px";
 
@@ -170,7 +172,7 @@ const Dialog: React.FC<DialogProps> = ({
               <Button
                 style={{ ...buttonStyles, border: 'none', maxWidth: contentAdjust }}
                 onClick={onSubmit}
-                disabled={loading}
+                disabled={loading || submitDisabled}
               >
                 {loading ? <CircularProgress style={progressStyles} /> : submitText}
               </Button>

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

@@ -0,0 +1,116 @@
+import React, { useState, useEffect } from 'react';
+
+// Utils
+import { MESSAGES } from '../../../utils/message';
+
+// Components
+import Dialog from '../../GenericUIBlocks/Dialog';
+import DialogV2 from '../../GenericUIBlocks/Dialog/V2';
+
+// Icons
+import Warning from '../../../assets/images/modal-icons/warning';
+// @ts-ignore
+import CheckboxChecked from '../../../assets/images/modal-icons/checkbox-checked';
+// @ts-ignore
+import CheckboxUnchecked from '../../../assets/images/modal-icons/checkbox-unchecked';
+
+// Styles
+import './styles.scss';
+
+interface FieldValidationModalProps {
+  open: boolean;
+  invalidFields: string[];
+  currentTheme?: string | null | undefined;
+  loading?: boolean;
+  handleClose: () => void;
+  handleContinue: (acknowledged: boolean) => void;
+}
+
+const modalStyles = {
+  maxWidth: '600px',
+  minHeight: '300px',
+};
+
+const modalStylesV2 = {
+  maxWidth: '600px',
+  minHeight: '300px',
+  padding: '40px',
+};
+
+const FieldValidationModal: React.FC<FieldValidationModalProps> = ({
+  open,
+  invalidFields,
+  currentTheme,
+  loading = false,
+  handleClose,
+  handleContinue,
+}) => {
+  const [acknowledged, setAcknowledged] = useState(false);
+
+  // Reset checkbox whenever the modal opens with a new set of fields
+  useEffect(() => {
+    if (open) {
+      setAcknowledged(false);
+    }
+  }, [open]);
+
+  const content = (
+    <div className="field-validation-content">
+      <p className="field-validation-description">
+        {MESSAGES.TEMPLATE.FIELD_VALIDATION.DESCRIPTION}
+      </p>
+      <ol className="field-validation-list">
+        {invalidFields.map((field, index) => (
+          <li key={index}>{field}</li>
+        ))}
+      </ol>
+      <label
+        className="field-validation-acknowledge"
+        onClick={() => setAcknowledged((prev) => !prev)}
+      >
+        {acknowledged ? <CheckboxChecked /> : <CheckboxUnchecked />}
+        {MESSAGES.TEMPLATE.FIELD_VALIDATION.ACKNOWLEDGE_LABEL}
+      </label>
+    </div>
+  );
+
+  return currentTheme === 'v2' ? (
+    <DialogV2
+      icon={<Warning fill="var(--primary-color)" />}
+      customStyles={modalStylesV2}
+      open={open}
+      loading={loading}
+      handleClose={handleClose}
+      title={MESSAGES.TEMPLATE.FIELD_VALIDATION.TITLE}
+      subHeading=""
+      currentTheme="v2"
+      isGallery={false}
+      onSubmit={() => handleContinue(acknowledged)}
+      submitText={MESSAGES.TEMPLATE.FIELD_VALIDATION.CONTINUE_BUTTON}
+      submitDisabled={!acknowledged}
+      onCancel={handleClose}
+      cancelText={MESSAGES.TEMPLATE.FIELD_VALIDATION.CANCEL_BUTTON}
+    >
+      {content}
+    </DialogV2>
+  ) : (
+    <Dialog
+      icon={<Warning fill="var(--primary-color)" />}
+      customStyles={modalStyles}
+      open={open}
+      loading={loading}
+      handleClose={handleClose}
+      title={MESSAGES.TEMPLATE.FIELD_VALIDATION.TITLE}
+      subHeading=""
+      onSubmit={() => handleContinue(acknowledged)}
+      submitText={MESSAGES.TEMPLATE.FIELD_VALIDATION.CONTINUE_BUTTON}
+      submitDisabled={!acknowledged}
+      onCancel={handleClose}
+      cancelText={MESSAGES.TEMPLATE.FIELD_VALIDATION.CANCEL_BUTTON}
+    >
+      {content}
+    </Dialog>
+  );
+};
+
+export default FieldValidationModal;

package/src/components/TopNavigation/FieldValidationModal/styles.scss

@@ -0,0 +1,48 @@
+.field-validation-content {
+  width: 100%;
+  margin-top: 12px;
+  text-align: left;
+}
+
+.field-validation-description {
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--text-color);
+  line-height: 20px;
+  font-family: var(--font-family);
+  margin: 0 0 12px 0;
+  padding: 0;
+}
+
+.field-validation-list {
+  margin: 0 0 16px 0;
+  padding-left: 20px;
+
+  li {
+    font-size: 16px;
+    font-weight: 400;
+    color: var(--text-color);
+    line-height: 20px;
+    margin-bottom: 6px;
+    word-break: break-all;
+    font-family: var(--font-family);
+  }
+}
+
+.field-validation-acknowledge {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--text-color);
+  line-height: 20px;
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--font-family);
+
+  svg {
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+}

package/src/components/TopNavigation/index.tsx

@@ -20,6 +20,7 @@ import { searchAndAdvanceChange } from '../../redux/actions/templateActions';
 import SaveTemplateModel from './SaveTemplateModel';
 import ConfirmNavigateDialog from './ConfirmNavigateDialog';
 import EditTemplateNameModel from './EditTemplateNameModel';
+import FieldValidationModal from './FieldValidationModal';
 
 // Utils
 import {
@@ -31,6 +32,8 @@ import {
   removeBracketsFromRPL,
   validateEmoji,
   validateGSV,
+  validateTemplateFields,
+  validateAllowedTemplateFields,
 } from '../../utils/template-builder';
 import { addSafetyBordersToNonWindowProfessioanl } from '../../utils/templateSafetyBorders/professional';
 import { addIdentifierAreaToProfessionalNonWindow } from '../../utils/templateIdentifierArea/professional';
@@ -142,6 +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<string[]>([]);
 
   const { id } = useParams<{ id: string }>();
 
@@ -426,9 +430,10 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
     }
   };
 
-  const handleSave = async () => {
+  const handleSave = async (invalidFieldsAcknowledged: boolean = false) => {
     try {
       const formData = new FormData();
+      formData.append('invalidFieldsAcknowledged', String(invalidFieldsAcknowledged));
       const allFields = [
         ...defaultFields,
         ...customFields,
@@ -572,10 +577,61 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
     }
   };
 
+  const handleContinueAnyway = (acknowledged: boolean) => {
+    setIsShowModel((prev) => ({ ...prev, loading: true }));
+    handleSave(acknowledged);
+  };
+
   const handleChangeModel = (
     model: string = '',
     loading: string | null = null
   ) => {
+    // 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();
+
+      // 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,
+        });
+        return;
+      }
+    }
+
     setIsShowModel((prev) => ({
       ...prev,
       open: !prev.open,
@@ -913,6 +969,17 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
           currentTheme={currentTheme}
         />
       )}
+      {/* Field Validation Modal */}
+      {isShowModel.open && isShowModel.model === 'field-validation' && (
+        <FieldValidationModal
+          open={isShowModel.open}
+          invalidFields={invalidFields}
+          loading={isShowModel.loading}
+          currentTheme={currentTheme}
+          handleClose={() => handleChangeModel()}
+          handleContinue={handleContinueAnyway}
+        />
+      )}
       {/* Duplicate Template Modal */}
       <DuplicateTemplateModal
         open={isShowModel.open && isShowModel.model === 'duplicate'}

package/src/utils/message.ts

@@ -142,7 +142,15 @@ export const MESSAGES = {
     DOWNLOAD_PROOF_BUTTON: "Download Mailer Proof",
     DOWNLOAD_ENVELOPE_BUTTON: "Download Envelope Proof",
     CANCEL_BUTTON: "Cancel",
-    SUBMIT_BUTTON: "Save"
+    SUBMIT_BUTTON: "Save",
+    FIELD_VALIDATION: {
+      TITLE: "Invalid Fields",
+      HEADING: "The following fields are not recognized",
+      DESCRIPTION: "The following field(s) used in this template are not recognized by the system. You can save the template as is, but these fields will not populate with data. To resolve this, remove or replace them with valid field names.",
+      ACKNOWLEDGE_LABEL: "I understand that saving now will preserve these invalid fields, but they will not be populated with data.",
+      CONTINUE_BUTTON: "Continue Saving",
+      CANCEL_BUTTON: "Cancel",
+    },
   },
   QR_CODE_MODAL: {
     CREATE_TITLE: "Create New QR Code",

package/src/utils/products.ts

@@ -121,7 +121,7 @@ export const Products: Product[] = [
         size: [
             {
                 id: "11",
-                size: "11x8.5",
+                size: "12x9",
                 label: "8.5x11"
             }
         ]