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

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

@@ -140,6 +140,7 @@ export declare const MESSAGES: {
             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 LIST_REGION_LABEL: "Unrecognized template fields";
             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";

package/build/types/version.d.ts

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

package/package.json

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

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

@@ -59,11 +59,20 @@ const FieldValidationModal: React.FC<FieldValidationModalProps> = ({
       <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>
+      <div
+        className="field-validation-list-scroll"
+        role="region"
+        aria-label={MESSAGES.TEMPLATE.FIELD_VALIDATION.LIST_REGION_LABEL}
+      >
+        <ul className="field-validation-list">
+          {invalidFields.map((field, index) => (
+            <li key={`${field}-${index}`}>
+              <span className="field-validation-list-index">{index + 1}.</span>
+              <span className="field-validation-list-text">{field}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
       <label
         className="field-validation-acknowledge"
         onClick={() => setAcknowledged((prev) => !prev)}

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

@@ -14,21 +14,67 @@
   padding: 0;
 }
 
-.field-validation-list {
+// Scroll only the list; keep markers visible for 10+ (outside markers need horizontal room —
+// overflow-x: hidden was clipping two-digit list numbers to "0", "1", "2").
+.field-validation-list-scroll {
+  max-height: min(40vh, 280px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
   margin: 0 0 16px 0;
-  padding-left: 20px;
+  padding-right: 6px;
+  padding-left: 4px;
+  box-sizing: border-box;
+
+  // Match the SDK-wide scrollbar (same variables used in .builder-wrapper and Polotno panels)
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-color);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb-color);
+    border-radius: 3px;
+  }
+}
+
+.field-validation-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 
   li {
+    display: flex;
+    gap: 6px;
+    align-items: flex-start;
     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-list-index {
+  flex-shrink: 0;
+  min-width: 1.75rem;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.field-validation-list-text {
+  flex: 1;
+  min-width: 0;
+  word-break: break-all;
+}
+
 .field-validation-acknowledge {
   display: flex;
   align-items: flex-start;

package/src/components/TopNavigation/index.tsx

@@ -430,10 +430,14 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
     }
   };
 
-  const handleSave = async (invalidFieldsAcknowledged: boolean = false) => {
+  const handleSave = async (
+    hasFieldsWarnings: boolean = false,
+    fieldsWarningsAccepted: boolean = false
+  ) => {
     try {
       const formData = new FormData();
-      formData.append('invalidFieldsAcknowledged', String(invalidFieldsAcknowledged));
+      formData.append('has_fields_warnings', String(hasFieldsWarnings));
+      formData.append('fields_warnings_accepted', String(fieldsWarningsAccepted));
       const allFields = [
         ...defaultFields,
         ...customFields,
@@ -579,7 +583,7 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
 
   const handleContinueAnyway = (acknowledged: boolean) => {
     setIsShowModel((prev) => ({ ...prev, loading: true }));
-    handleSave(acknowledged);
+    handleSave(true, acknowledged);
   };
 
   const handleChangeModel = (

package/src/utils/message.ts

@@ -147,6 +147,7 @@ export const MESSAGES = {
       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.",
+      LIST_REGION_LABEL: "Unrecognized template fields",
       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",

package/version.js

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