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

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,12 @@
+import React from 'react';
+import './styles.scss';
+interface FieldValidationModalProps {
+    open: boolean;
+    invalidFields: string[];
+    currentTheme?: string | null | undefined;
+    loading?: boolean;
+    handleClose: () => void;
+    handleContinue: () => 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: "The following fields are not recognized";
+            readonly DESCRIPTION: (fieldNames: string) => string;
+            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.3";

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.3",
   "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/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/TopNavigation/FieldValidationModal/index.tsx

@@ -0,0 +1,82 @@
+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';
+
+// Styles
+import './styles.scss';
+
+interface FieldValidationModalProps {
+  open: boolean;
+  invalidFields: string[];
+  currentTheme?: string | null | undefined;
+  loading?: boolean;
+  handleClose: () => void;
+  handleContinue: () => 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 fieldNames = [...invalidFields].map(item => `"${item}"`).join(', ');
+  const description = MESSAGES.TEMPLATE.FIELD_VALIDATION.DESCRIPTION(fieldNames);
+
+  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=""
+      description={description}
+      currentTheme="v2"
+      isGallery={false}
+      onSubmit={handleContinue}
+      submitText={MESSAGES.TEMPLATE.FIELD_VALIDATION.CONTINUE_BUTTON}
+      onCancel={handleClose}
+      cancelText={MESSAGES.TEMPLATE.FIELD_VALIDATION.CANCEL_BUTTON}
+    />
+  ) : (
+    <Dialog
+      icon={<Warning fill="var(--primary-color)" />}
+      customStyles={modalStyles}
+      open={open}
+      loading={loading}
+      handleClose={handleClose}
+      title={MESSAGES.TEMPLATE.FIELD_VALIDATION.TITLE}
+      subHeading=""
+      description={description}
+      onSubmit={handleContinue}
+      submitText={MESSAGES.TEMPLATE.FIELD_VALIDATION.CONTINUE_BUTTON}
+      onCancel={handleClose}
+      cancelText={MESSAGES.TEMPLATE.FIELD_VALIDATION.CANCEL_BUTTON}
+    />
+  );
+};
+
+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,
+  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 }>();
 
@@ -572,10 +576,61 @@ const TopNavigation: React.FC<TopNavigationProps> = ({
     }
   };
 
+  const handleContinueAnyway = () => {
+    setIsShowModel((prev) => ({ ...prev, loading: true }));
+    handleSave();
+  };
+
   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 +968,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,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: "The following fields are not recognized",
+      DESCRIPTION: (fieldNames: string) => `The following field(s) ${fieldNames} are not recognized.`,
+      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"
             }
         ]

package/src/utils/template-builder.ts

@@ -84,10 +84,10 @@ export const selfMailerProduct = {
       ],
     },
     {
-      id: "11", defaultSize: "11x8.5", title: "Self Mailer", productType: "Tri-Fold Self-Mailers", hasEnvelope: false, paper: '80# text', label: '8.5x11',
+      id: "11", defaultSize: "12x9", title: "Self Mailer", productType: "Tri-Fold Self-Mailers", hasEnvelope: false, paper: '80# text', label: '8.5x11',
       finish: 'Glass Coated', size: [{
         id: "11",
-        size: "11x8.5",
+        size: "12x9",
         label: "8.5x11"
       }]
     },
@@ -325,4 +325,106 @@ 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;
+
+        // ── Step 1 - Find ALL complete brace expressions: anything from the first { to the last } on the same "group", including spaces inside.
+        const completePattern = /\{+[^{}]*\}+/g;
+        let match: RegExpExecArray | null;
+
+        // Track which character ranges are already covered so Steps 2 & 3 -  don't double-report sub-strings of a complete match.
+        const coveredRanges: Array<[number, number]> = [];
+
+        const completeExec = new RegExp(completePattern.source, 'g');
+        while ((match = completeExec.exec(text)) !== null) {
+          coveredRanges.push([match.index, match.index + match[0].length]);
+          const token = match[0];
+          // Valid: EXACTLY {{UPPERCASE_CONTENT}} — no spaces, no lowercase
+          const isValidFormat = /^\{\{[A-Z0-9._]+\}\}$/.test(token);
+
+          if (!isValidFormat) {
+            const content = token.replace(/^\{+|\}+$/g, '');
+            const isDoubleBrace = /^\{\{[\s\S]+\}\}$/.test(token);
+            const hasOnlyValidChars = /^[A-Za-z0-9._]+$/.test(content);
+            if (isDoubleBrace && hasOnlyValidChars && content !== content.toUpperCase()) {
+              // e.g. {{c.last_name}} — correct braces but lowercase content
+              invalidFields.push({ field: token, issue: 'NOT_UPPERCASE', pageIndex });
+            } else {
+              invalidFields.push({ field: token, issue: 'INVALID_FORMAT', pageIndex });
+            }
+          }
+        }
+
+        // Helper: returns true if the character at `idx` is inside a covered range
+        const isCovered = (idx: number): boolean =>
+          coveredRanges.some(([s, e]) => idx >= s && idx < e);
+
+        // ── Step 2 ─ Find incomplete patterns that have opening brace(s) but NO closing brace.e.g. "{C.LAST_NAME" or "{{C.LAST_NAME" at end of text.
+        const missingClosingExec = /\{+[^{}]*/g;
+        while ((match = missingClosingExec.exec(text)) !== null) {
+          if (!isCovered(match.index) && match[0].trim().length > 0) {
+            invalidFields.push({ field: match[0], issue: 'INVALID_FORMAT', pageIndex });
+          }
+        }
+
+        // ── Step 3 ─ Find incomplete patterns that have closing brace(s) but NO opening brace. e.g. "C.LAST_NAME}" or "C.LAST_NAME}}".
+        const missingOpeningExec = /(?<!\{)[A-Z0-9][A-Z0-9._\s]*\}+/g;
+        while ((match = missingOpeningExec.exec(text)) !== null) {
+          if (!isCovered(match.index) && match[0].trim().length > 0) {
+            invalidFields.push({ field: match[0].trim(), 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;
+};
+
+/**
+ * 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 const validateAllowedTemplateFields = (
+  templateJSON: any,
+  allowedKeys: string[]
+): string[] => {
+  const templateStr = JSON.stringify(templateJSON);
+  const pattern = /\{\{[^{}]+\}\}/g;
+  const matches = templateStr.match(pattern) || [];
+  const unique = Array.from(new Set(matches));
+  return unique.filter(token => !allowedKeys.includes(token));
+};

package/src/utils/templateIdentifierArea/triFold.ts

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

package/src/utils/templateRestrictedArea/triFold.ts

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