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

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,7 @@ 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/components/TopNavigation/FieldValidationModal/index.d.ts

@@ -0,0 +1,11 @@
+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/build/types/src/utils/message.d.ts

@@ -136,6 +136,13 @@ 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,3 +72,19 @@ 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/version.d.ts

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

package/package.json

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

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/CreateTemplate/V2/index.tsx

@@ -407,7 +407,9 @@ const CreateTemplateV2: React.FC<CreateTemplateV2Props> = ({
                         <div className='size-selection-container'>
                             <Typography style={descriptionStyles}>Design Format</Typography>
                             <div className='radio-buttons-container'>
-                                {product?.size?.map((type: any) => (
+                                {product?.size
+                                    ?.filter((type: any) => !restrictedSet.has(String(type.id)))
+                                    .map((type: any) => (
                                     <label key={type.id} className={`radio-button-wrapper ${selectedRPLType === type.id ? 'selected' : ''}`}>
                                         <input type="radio" name="postcardSize" value={type.id} checked={selectedRPLType === type.id} onChange={() => handleRealPennedLetter(type, product)} className="radio-input" />
                                         <span className="radio-button"></span>

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

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

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;

package/src/components/SidePanel/CustomQRCode/index.tsx

@@ -625,11 +625,11 @@ const CustomQRCode = {
       const handleEditQRCode = async (qrCode: any) => {
         setIsEditing(true);
         setSelectedQR(qrCode);
-        dispatch(setQrUrl(qrCode.url));
-        dispatch(setUtmSource(qrCode.utmSource || 'direct mail'));
-        dispatch(setUtmMedium(qrCode.utmMedium || 'QR Code'));
-        dispatch(setUtmCampaignName(qrCode.utm_campaign_name || ''));
-        dispatch(setCustomUtms(qrCode.custom_utms || {}));
+        dispatch(setQrUrl(qrCode.url ?? ''));
+        dispatch(setUtmSource(qrCode.utm_source ?? ''));
+        dispatch(setUtmMedium(qrCode.utm_medium ?? ''));
+        dispatch(setUtmCampaignName(qrCode.utm_campaign_name ?? ''));
+        dispatch(setCustomUtms(qrCode.custom_utms ?? {}));
 
         handleDialogChange('qr-modal');
         setIsActionsOpen(null);
@@ -678,8 +678,8 @@ const CustomQRCode = {
                   name: utmCampaignName,
                   url: url,
                   qrImagePath: uploadedFile,
-                  utm_source: utmSource,
-                  utm_medium: utmMedium,
+                  utm_source: utmSource || null,
+                  utm_medium: utmMedium || null,
                   utm_campaign_name: utmCampaignName,
                   custom_utms: customUtms,
                 },

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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,39 @@
+.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;
+  }
+}

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,
+  InvalidField,
 } 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<InvalidField[]>([]);
 
   const { id } = useParams<{ id: string }>();
 
@@ -447,6 +451,19 @@ 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) {
@@ -576,6 +593,24 @@ 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,
@@ -913,6 +948,15 @@ 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,7 +142,14 @@ 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: "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",
+    },
   },
   QR_CODE_MODAL: {
     CREATE_TITLE: "Create New QR Code",

package/src/utils/template-builder.ts

@@ -325,4 +325,67 @@ 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/version.js

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