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

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/components/GenericUIBlocks/Dialog/V2/index.d.ts

@@ -18,6 +18,7 @@ interface DialogProps {
     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

@@ -6,7 +6,7 @@ interface FieldValidationModalProps {
     currentTheme?: string | null | undefined;
     loading?: boolean;
     handleClose: () => void;
-    handleContinue: () => void;
+    handleContinue: (acknowledged: boolean) => void;
 }
 declare const FieldValidationModal: React.FC<FieldValidationModalProps>;
 export default FieldValidationModal;

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

@@ -139,7 +139,9 @@ export declare const MESSAGES: {
         readonly FIELD_VALIDATION: {
             readonly TITLE: "Invalid Fields";
             readonly HEADING: "The following fields are not recognized";
-            readonly DESCRIPTION: (fieldNames: string) => string;
+            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.3";
+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.3",
+  "version": "2.1.6-beta.5",
   "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/components/GenericUIBlocks/Dialog/V2/index.tsx

@@ -28,6 +28,7 @@ interface DialogProps {
   currentTheme?: string | null | undefined;
   isQRCode?: boolean;
   hideButtons?: boolean;
+  submitDisabled?: boolean;
 }
 
 const buttonStyles: CSSProperties = {
@@ -82,7 +83,8 @@ const DialogV2: React.FC<DialogProps> = ({
   isGallery = false,
   currentTheme = "default",
   isQRCode = false,
-  hideButtons = false
+  hideButtons = false,
+  submitDisabled = false,
 }) => {
   const contentAdjust = submitText.length > 6 ? "fit-content" : "100px";
 
@@ -164,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}>
@@ -208,7 +210,7 @@ const DialogV2: React.FC<DialogProps> = ({
                 <div className="confirm-modal-footer">
                   {!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

@@ -249,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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 // Utils
 import { MESSAGES } from '../../../utils/message';
@@ -9,6 +9,10 @@ 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';
@@ -19,7 +23,7 @@ interface FieldValidationModalProps {
   currentTheme?: string | null | undefined;
   loading?: boolean;
   handleClose: () => void;
-  handleContinue: () => void;
+  handleContinue: (acknowledged: boolean) => void;
 }
 
 const modalStyles = {
@@ -41,8 +45,43 @@ const FieldValidationModal: React.FC<FieldValidationModalProps> = ({
   handleClose,
   handleContinue,
 }) => {
-  const fieldNames = [...invalidFields].map(item => `"${item}"`).join(', ');
-  const description = MESSAGES.TEMPLATE.FIELD_VALIDATION.DESCRIPTION(fieldNames);
+  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>
+      <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)}
+      >
+        {acknowledged ? <CheckboxChecked /> : <CheckboxUnchecked />}
+        {MESSAGES.TEMPLATE.FIELD_VALIDATION.ACKNOWLEDGE_LABEL}
+      </label>
+    </div>
+  );
 
   return currentTheme === 'v2' ? (
     <DialogV2
@@ -53,14 +92,16 @@ const FieldValidationModal: React.FC<FieldValidationModalProps> = ({
       handleClose={handleClose}
       title={MESSAGES.TEMPLATE.FIELD_VALIDATION.TITLE}
       subHeading=""
-      description={description}
       currentTheme="v2"
       isGallery={false}
-      onSubmit={handleContinue}
+      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)" />}
@@ -70,12 +111,14 @@ const FieldValidationModal: React.FC<FieldValidationModalProps> = ({
       handleClose={handleClose}
       title={MESSAGES.TEMPLATE.FIELD_VALIDATION.TITLE}
       subHeading=""
-      description={description}
-      onSubmit={handleContinue}
+      onSubmit={() => handleContinue(acknowledged)}
       submitText={MESSAGES.TEMPLATE.FIELD_VALIDATION.CONTINUE_BUTTON}
+      submitDisabled={!acknowledged}
       onCancel={handleClose}
       cancelText={MESSAGES.TEMPLATE.FIELD_VALIDATION.CANCEL_BUTTON}
-    />
+    >
+      {content}
+    </Dialog>
   );
 };
 

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

@@ -1,39 +1,94 @@
 .field-validation-content {
-  margin-top: 20px;
+  width: 100%;
+  margin-top: 12px;
+  text-align: left;
 }
 
-.field-validation-list {
-  max-height: 300px;
-  overflow-y: auto;
-  padding: 10px;
-  background-color: #f9f9f9;
-  border-radius: 4px;
+.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-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;
+// 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-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;
   }
-  
-  .field-error {
-    color: #666;
-    font-size: 13px;
-    margin-bottom: 4px;
+
+  &::-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;
+    font-family: var(--font-family);
   }
-  
-  .field-location {
-    color: #999;
-    font-size: 12px;
-    font-style: italic;
+}
+
+.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;
+  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

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

package/src/utils/message.ts

@@ -146,7 +146,9 @@ export const MESSAGES = {
     FIELD_VALIDATION: {
       TITLE: "Invalid Fields",
       HEADING: "The following fields are not recognized",
-      DESCRIPTION: (fieldNames: string) => `The following field(s) ${fieldNames} 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.3';
+export const SDK_VERSION = '2.1.6-beta.5';