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

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

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/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/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"
       }]
     },

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.5';
+export const SDK_VERSION = '2.1.6-beta.2';