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

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

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

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

@@ -136,13 +136,6 @@ 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: "Please fix the following field errors";
-            readonly DESCRIPTION: (fieldNames: string) => string;
-            readonly INVALID_FORMAT: "is incorrect";
-            readonly NOT_UPPERCASE: "is incorrect";
-        };
     };
     readonly QR_CODE_MODAL: {
         readonly CREATE_TITLE: "Create New QR Code";

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

@@ -72,19 +72,3 @@ 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[];

package/build/types/src/utils/templateIdentifierArea/triFold.d.ts

@@ -38,6 +38,8 @@ 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.1";
+export const SDK_VERSION: "2.1.6-beta.2";

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.2",
   "type": "module",
   "description": "Simplify template builder integration for any product.",
   "main": "build/index.js",

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

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

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

@@ -223,10 +223,6 @@
         gap: 12px;
         margin-top: 16px;
 
-        &:empty {
-          margin-top: 0;
-        }
-
         button{
           min-height: 50px;
           font-size: 16px;

package/src/components/TopNavigation/index.tsx

@@ -20,7 +20,6 @@ import { searchAndAdvanceChange } from '../../redux/actions/templateActions';
 import SaveTemplateModel from './SaveTemplateModel';
 import ConfirmNavigateDialog from './ConfirmNavigateDialog';
 import EditTemplateNameModel from './EditTemplateNameModel';
-import FieldValidationModal from './FieldValidationModal';
 
 // Utils
 import {
@@ -32,8 +31,6 @@ import {
   removeBracketsFromRPL,
   validateEmoji,
   validateGSV,
-  validateTemplateFields,
-  InvalidField,
 } from '../../utils/template-builder';
 import { addSafetyBordersToNonWindowProfessioanl } from '../../utils/templateSafetyBorders/professional';
 import { addIdentifierAreaToProfessionalNonWindow } from '../../utils/templateIdentifierArea/professional';
@@ -145,7 +142,6 @@ 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 { id } = useParams<{ id: string }>();
 
@@ -451,19 +447,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) {
@@ -593,24 +576,6 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
     model: string = '',
     loading: string | null = null
   ) => {
-    // If trying to open save modal, validate fields first
-    if (model === 'save' && templateType === 'json') {
-      const jsonData = store.toJSON();
-      const fieldValidationResult = validateTemplateFields(jsonData.pages);
-      
-      if (fieldValidationResult.length > 0) {
-        // Show validation modal instead of save modal
-        setInvalidFields(fieldValidationResult);
-        setIsShowModel({
-          open: true,
-          model: 'field-validation',
-          loading: false
-        });
-        return; // Don't open save modal
-      }
-    }
-    
-    // If validation passed or not save modal, proceed normally
     setIsShowModel((prev) => ({
       ...prev,
       open: !prev.open,
@@ -948,15 +913,6 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
           currentTheme={currentTheme}
         />
       )}
-      {/* Field Validation Modal */}
-      {isShowModel.open && isShowModel.model === 'field-validation' && (
-        <FieldValidationModal
-          open={isShowModel.open}
-          invalidFields={invalidFields}
-          currentTheme={currentTheme}
-          handleClose={() => handleChangeModel()}
-        />
-      )}
       {/* Duplicate Template Modal */}
       <DuplicateTemplateModal
         open={isShowModel.open && isShowModel.model === 'duplicate'}

package/src/utils/message.ts

@@ -142,14 +142,7 @@ export const MESSAGES = {
     DOWNLOAD_PROOF_BUTTON: "Download Mailer Proof",
     DOWNLOAD_ENVELOPE_BUTTON: "Download Envelope Proof",
     CANCEL_BUTTON: "Cancel",
-    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",
-    },
+    SUBMIT_BUTTON: "Save"
   },
   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: "12x9",
+                size: "11x8.5",
                 label: "8.5x11"
             }
         ]

package/src/utils/template-builder.ts

@@ -84,10 +84,10 @@ export const selfMailerProduct = {
       ],
     },
     {
-      id: "11", defaultSize: "12x9", title: "Self Mailer", productType: "Tri-Fold Self-Mailers", hasEnvelope: false, paper: '80# text', label: '8.5x11',
+      id: "11", defaultSize: "11x8.5", title: "Self Mailer", productType: "Tri-Fold Self-Mailers", hasEnvelope: false, paper: '80# text', label: '8.5x11',
       finish: 'Glass Coated', size: [{
         id: "11",
-        size: "12x9",
+        size: "11x8.5",
         label: "8.5x11"
       }]
     },
@@ -325,67 +325,4 @@ 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;
-        
-        // 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
-          const isValidFormat = /^\{\{[A-Z0-9._]+\}\}$/.test(token);
-          
-          if (!isValidFormat) {
-            const content = token.replace(/^\{+|\}+$/g, '');
-            const isDoubleBrace = /^\{\{.+\}\}$/.test(token);
-            const hasOnlyValidChars = /^[A-Za-z0-9._]+$/.test(content);
-            
-            if (isDoubleBrace && hasOnlyValidChars && content !== content.toUpperCase()) {
-              // Double brace but lowercase content
-              invalidFields.push({ field: token, issue: 'NOT_UPPERCASE', pageIndex });
-            } else {
-              // Any other invalid format
-              invalidFields.push({ field: token, 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;
-};
+}

package/src/utils/templateIdentifierArea/triFold.ts

@@ -1,3 +1,5 @@
+import { DPI } from "../constants";
+
 // Define the type for the element being added
 interface Element {
     id: string;
@@ -43,6 +45,8 @@ interface Page {
 
 // Define the type for the store
 interface Store {
+    width: number;
+    height: number;
     pages: Page[];
     history: {
         clear: () => void;
@@ -90,16 +94,30 @@ 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:", 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),
+        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),
     ];
 
     elements.forEach(element => page.addElement(element));

package/src/utils/templateRestrictedArea/triFold.ts

@@ -85,6 +85,8 @@ 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[] = [
         {
@@ -98,7 +100,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 - 4 * DPI,
+            y: store.height - size[1] * DPI - 0.125 * DPI - foldSectionHeight,
             width: size[0] * DPI,
             height: size[1] * DPI,
             rotation: 0,
@@ -137,7 +139,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 - 4 * DPI,
+            y: store.height - size[1] * DPI - 0.125 * DPI + 20 - foldSectionHeight,
             width: 240,
             height: 20,
             rotation: 0,
@@ -188,8 +190,8 @@ export const addRestrictedAreaToTriFold = (store: Store, size: [number, number],
             removable: false,
             alwaysOnTop: true,
             showInExport: true,
-            x: store.width - 111 - 0.15 * DPI,
-            y: store.height - size[1] * DPI + 10 - 4 * DPI,
+            x: store.width - 111 - 0.15 * DPI - indiciaLeftShift,
+            y: store.height - size[1] * DPI + 10 - foldSectionHeight,
             width: 111,
             height: 40,
             rotation: 0,
@@ -240,7 +242,7 @@ export const addRestrictedAreaToTriFold = (store: Store, size: [number, number],
             removable: false,
             alwaysOnTop: true,
             showInExport: true,
-            y: store.height - 28 - size[1] * DPI + 100 - 4 * DPI,
+            y: store.height - 28 - size[1] * DPI + 100 - foldSectionHeight,
             x: store.width - size[0] * DPI - 0.15 * DPI + 5,
             width: size[0] * DPI - 23,
             height: 15,
@@ -282,7 +284,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 - 4 * DPI,
+            y: store.height - size[1] * DPI - 0.125 * DPI + 120 - foldSectionHeight,
             width: 240,
             height: 20,
             rotation: 0,

package/src/utils/templateSafetyBorders/triFold.ts

@@ -3,6 +3,13 @@ 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}`,
@@ -15,8 +22,8 @@ export const addSafetyBordersToTriFold = (store: Store): void => {
     const safetyLineTextFirst = createSafetyTextElement(
         `safety-line-1-${randomizedId}`,
         -2,
-        366,
-        866,
+        foldLineOneY - 18,
+        borderWidth,
         "Fold Line",
         0
     );
@@ -24,8 +31,8 @@ export const addSafetyBordersToTriFold = (store: Store): void => {
     const safetySecondLineTextFirst = createSafetyTextElement(
         `safety-line-2-${randomizedId}`,
         -2,
-        744,
-        866,
+        foldLineTwoY - 19,
+        borderWidth,
         "Fold Line",
         0
     );
@@ -40,12 +47,12 @@ export const addSafetyBordersToTriFold = (store: Store): void => {
         alwaysOnTop: true,
         showInExport: false,
         children: [
-            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)'),
+            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)'),
         ],
     };
 
@@ -60,8 +67,8 @@ export const addSafetyBordersToTriFold = (store: Store): void => {
     const safetyLineTextSecond = createSafetyTextElement(
         `safety-line-2-1-${randomizedId}`,
         -2,
-        366,
-        866,
+        foldLineOneY - 18,
+        borderWidth,
         "Fold Line",
         0
     );
@@ -69,8 +76,8 @@ export const addSafetyBordersToTriFold = (store: Store): void => {
     const safetySecondLineTextSecond = createSafetyTextElement(
         `safety-line-2-2-${randomizedId}`,
         -2,
-        744,
-        866,
+        foldLineTwoY - 19,
+        borderWidth,
         "Fold Line",
         0
     );
@@ -86,12 +93,12 @@ export const addSafetyBordersToTriFold = (store: Store): void => {
         alwaysOnTop: true,
         showInExport: false,
         children: [
-            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)'),
+            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)'),
         ],
     };
 

package/version.js

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

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

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

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

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

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

@@ -1,15 +0,0 @@
-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/TopNavigation/FieldValidationModal/index.tsx

@@ -1,73 +0,0 @@
-import React 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';
-
-// Types
-import { InvalidField } from '../../../utils/template-builder';
-
-// Styles
-import './styles.scss';
-
-interface FieldValidationModalProps {
-  open: boolean;
-  invalidFields: InvalidField[];
-  currentTheme?: string | null | undefined;
-  handleClose: () => void;
-}
-
-const modalStyles = {
-  maxWidth: '600px',
-  minHeight: '300px',
-};
-
-const modalStylesV2 = {
-  maxWidth: '600px',
-  minHeight: '300px',
-  padding: '40px',
-};
-
-const FieldValidationModal: React.FC<FieldValidationModalProps> = ({
-  open,
-  invalidFields,
-  currentTheme,
-  handleClose,
-}) => {
-  // Build the description with all field names (reversed so UI order matches template order)
-  const fieldNames = [...invalidFields].reverse().map(item => `"${item.field}"`).join(', ');
-  const description = MESSAGES.TEMPLATE.FIELD_VALIDATION.DESCRIPTION(fieldNames);
-
-  return currentTheme === 'v2' ? (
-    <DialogV2
-      icon={<Warning fill="var(--primary-color)" />}
-      customStyles={modalStylesV2}
-      open={open}
-      handleClose={handleClose}
-      title={MESSAGES.TEMPLATE.FIELD_VALIDATION.TITLE}
-      subHeading=""
-      description={description}
-      currentTheme="v2"
-      isGallery={false}
-      hideButtons={true}
-    />
-  ) : (
-    <Dialog
-      icon={<Warning fill="var(--primary-color)" />}
-      customStyles={modalStyles}
-      open={open}
-      handleClose={handleClose}
-      title={MESSAGES.TEMPLATE.FIELD_VALIDATION.TITLE}
-      subHeading=""
-      description={description}
-    />
-  );
-};
-
-export default FieldValidationModal;

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

@@ -1,39 +0,0 @@
-.field-validation-content {
-  margin-top: 20px;
-}
-
-.field-validation-list {
-  max-height: 300px;
-  overflow-y: auto;
-  padding: 10px;
-  background-color: #f9f9f9;
-  border-radius: 4px;
-}
-
-.field-validation-item {
-  margin-bottom: 15px;
-  padding: 12px;
-  background-color: #fff;
-  border-left: 3px solid #ff9800;
-  border-radius: 4px;
-  
-  .field-name {
-    font-weight: 600;
-    color: #333;
-    margin-bottom: 5px;
-    font-family: 'Courier New', monospace;
-    font-size: 14px;
-  }
-  
-  .field-error {
-    color: #666;
-    font-size: 13px;
-    margin-bottom: 4px;
-  }
-  
-  .field-location {
-    color: #999;
-    font-size: 12px;
-    font-style: italic;
-  }
-}