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

package/src/utils/templateRestrictedArea/triFold.ts

@@ -0,0 +1,330 @@
+import { DPI } from "../constants";
+
+// Define the type for the element being added
+interface Element {
+    id: string;
+    type: string;
+    name: string;
+    opacity: number;
+    visible: boolean;
+    selectable: boolean;
+    removable: boolean;
+    alwaysOnTop: boolean;
+    showInExport: boolean;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    animations?: any[];
+    blurEnabled?: boolean;
+    blurRadius?: number;
+    brightnessEnabled?: boolean;
+    brightness?: number;
+    sepiaEnabled?: boolean;
+    grayscaleEnabled?: boolean;
+    shadowEnabled?: boolean;
+    shadowBlur?: number;
+    shadowOffsetX?: number;
+    shadowOffsetY?: number;
+    shadowColor?: string;
+    shadowOpacity?: number;
+    draggable?: boolean;
+    resizable?: boolean;
+    contentEditable: boolean;
+    styleEditable: boolean;
+    subType?: string;
+    fill?: string;
+    dash?: any[];
+    strokeWidth?: number;
+    stroke?: string;
+    cornerRadius?: number;
+    text?: string;
+    placeholder?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    fontStyle?: string;
+    fontWeight?: string;
+    textDecoration?: string;
+    align?: string;
+    verticalAlign?: string;
+    lineHeight?: number;
+    letterSpacing?: number;
+    backgroundEnabled?: boolean;
+    backgroundColor?: string;
+    backgroundOpacity?: number;
+    backgroundCornerRadius?: number;
+    backgroundPadding?: number;
+    src?: string;
+    cropX?: number;
+    cropY?: number;
+    cropWidth?: number;
+    cropHeight?: number;
+    flipX?: boolean;
+    flipY?: boolean;
+    clipSrc?: string;
+    borderSize?: number;
+    keepRatio?: boolean;
+}
+
+// Define the type for the page
+interface Page {
+    addElement: (element: Element) => void;
+}
+
+// Define the type for the store
+interface Store {
+    width: number;
+    height: number;
+    pages: Page[];
+    history: {
+        clear: () => void;
+    };
+}
+
+
+export const addRestrictedAreaToTriFold = (store: Store, size: [number, number], barcodeSrc: string): void => {
+    const page = store.pages[0];
+
+    const elements: Element[] = [
+        {
+            id: 'figure-1',
+            type: 'figure',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: store.width - size[0] * DPI - 0.15 * DPI,
+            y: store.height - size[1] * DPI - 0.125 * DPI - 4 * DPI,
+            width: size[0] * DPI,
+            height: size[1] * DPI,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            subType: 'rect',
+            fill: 'white',
+            dash: [],
+            strokeWidth: 0,
+            stroke: '#0c0c0c',
+            cornerRadius: 0,
+        },
+        {
+            id: 'return-address',
+            type: 'text',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            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,
+            width: 240,
+            height: 20,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            text: 'YOUR RETURN ADDRESS \nWILL AUTOMATICALLY \nBE PRINTED IN THIS \nPOSITION',
+            placeholder: '',
+            fontSize: 8,
+            fontFamily: 'Roboto',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            textDecoration: '',
+            fill: 'black',
+            align: 'start',
+            verticalAlign: 'top',
+            strokeWidth: 0,
+            stroke: 'black',
+            lineHeight: 1.2,
+            letterSpacing: 0,
+            backgroundEnabled: false,
+            backgroundColor: '#7ED321',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        },
+        {
+            id: 'indicia',
+            type: 'text',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: store.width - 111 - 0.15 * DPI,
+            y: store.height - size[1] * DPI + 10 - 4 * DPI,
+            width: 111,
+            height: 40,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            text: `POSTAGE\nINDICIA`,
+            placeholder: '',
+            fontSize: 18,
+            fontFamily: 'Roboto',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            textDecoration: '',
+            fill: 'black',
+            align: 'center',
+            verticalAlign: 'top',
+            strokeWidth: 0,
+            stroke: 'black',
+            lineHeight: 1.2,
+            letterSpacing: 0,
+            backgroundEnabled: false,
+            backgroundColor: '#7ED321',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        },
+        {
+            id: 'barcode',
+            type: 'image',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            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,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            src: barcodeSrc,
+            cropX: 0,
+            cropY: 0,
+            cropWidth: 1,
+            cropHeight: 1,
+            cornerRadius: 0,
+            flipX: false,
+            flipY: false,
+            clipSrc: '',
+            borderSize: 0,
+            keepRatio: false,
+        },
+        {
+            id: 'recipient-address',
+            type: 'text',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            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,
+            width: 240,
+            height: 20,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            text: 'RECIPIENT ADDRESS \nWILL AUTOMATICALLY \nBE PRINTED IN THIS \nPOSITION',
+            placeholder: '',
+            fontSize: 13,
+            fontFamily: 'Roboto',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            textDecoration: '',
+            fill: 'black',
+            align: 'start',
+            verticalAlign: 'top',
+            strokeWidth: 0,
+            stroke: 'black',
+            lineHeight: 1.2,
+            letterSpacing: 0,
+            backgroundEnabled: false,
+            backgroundColor: '#7ED321',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        },
+    ];
+
+    elements.forEach(element => page.addElement(element));
+    store.history.clear();
+};

package/src/utils/templateSafetyBorders/biFold.ts

@@ -0,0 +1,91 @@
+import { createBorder, createSafetyTextElement } from "../helper";
+import { Element, Store } from "./types"
+
+export const addSafetyBordersToBiFold = (store: Store): void => {
+    const randomizedId = Math.random().toString(36).substring(2, 7);
+
+    const safetyBordersTextFirst = createSafetyTextElement(
+        `safety-text-1-${randomizedId}`,
+        -8.29,
+        5.81,
+        543,
+        "Keep important text/images inside the green line. Content beyond this line may be trimmed during production."
+    );
+
+    const safetyLineTextFirst = createSafetyTextElement(
+        `safety-line-1-${randomizedId}`,
+        880,
+        -10.5,
+        600,
+        "Fold Line",
+        90
+    );
+    
+
+    const firstPageBorders: Element = {
+        id: `safety-border-1-${randomizedId}`,
+        type: "group",
+        opacity: 1,
+        visible: true,
+        selectable: false,
+        removable: false,
+        alwaysOnTop: true,
+        showInExport: false,
+        children: [
+            createBorder(`top-1-${randomizedId}`, 25.96, 24.58, 1676, 2.94, 0),
+            createBorder(`bottom-1-${randomizedId}`, 25.96, 551.74, 1676, 2.94, 0),
+            createBorder(`left-1-${randomizedId}`, 24.5, 553.349, 527.167, 2.94, -90),
+            createBorder(`right-1-${randomizedId}`, 1700.5, 555.22, 528, 2.94, -90),
+            createBorder(`fold-line-1-${randomizedId}`, 863, 580, 580, 2, -90, 'rgba(208,2,27,1)'),
+        ],
+    };
+
+    const safetyBordersTextSecond = createSafetyTextElement(
+        `safety-text-2-${randomizedId}`,
+        -8.616,
+        5.09,
+        543,
+        "Keep important text/images inside the green line. Content beyond this line may be trimmed during production."
+    );
+
+    const safetyLineTextSecond = createSafetyTextElement(
+        `safety-line-2-${randomizedId}`,
+        880,
+        -10.5,
+        600,
+        "Fold Line",
+        90
+    );
+
+    const secondPageBorders: Element = {
+        id: `safety-border-2-${randomizedId}`,
+        type: "group",
+        opacity: 1,
+        visible: true,
+        selectable: false,
+        removable: false,
+        alwaysOnTop: true,
+        showInExport: false,
+        children: [
+            createBorder(`top-2-${randomizedId}`, 25.96, 24.58, 1676, 2.94, 0),
+            createBorder(`bottom-2-${randomizedId}`, 25.96, 551.74, 1676, 2.94, 0),
+            createBorder(`left-2-${randomizedId}`, 24.5, 553.349, 527.167, 2.94, -90),
+            createBorder(`right-2-${randomizedId}`, 1700.5, 555.22, 528, 2.94, -90),
+            createBorder(`fold-line-2-${randomizedId}`, 863, 580, 580, 2, -90, 'rgba(208,2,27,1)'),
+        ],
+    };
+
+    // Add elements to the pages
+    store.pages[0]?.addElement(firstPageBorders);
+    store?.pages[0]?.addElement(safetyBordersTextFirst);
+    store?.pages[0]?.addElement(safetyLineTextFirst);
+
+    store.pages[1]?.addElement(secondPageBorders);
+    store.pages[1]?.addElement(safetyBordersTextSecond);
+    store?.pages[1]?.addElement(safetyLineTextSecond);
+
+    // Clear history
+    store.history.clear();
+};
+
+

package/src/utils/templateSafetyBorders/index.ts

@@ -0,0 +1,43 @@
+import { StoreType } from "polotno/model/store";
+
+// Safety Border Files
+import { addSafetyBordersTo4x6PostCard, addSafetyBordersTo6x9PostCard, addSafetyBordersTo6x11PostCard, addSafetyBordersTo12x9PostCard } from './postCards'
+import { addSafetyBordersToPersonalLetter } from './personal'
+import { addSafetyBordersToNonWindowProfessioanl, addSafetyBordersToWindowProfessioanl } from './professional'
+import { addSafetyBordersToBiFold } from './biFold'
+import { addSafetyBordersToTriFold } from './triFold'
+import { addSafetyBordersToSnapPackMailer } from './snapPack'
+
+
+export const addSafetyBordersForTemplates = (productId: string, store: StoreType) => {
+
+    const jsonData = store?.toJSON();
+    const page: any = jsonData?.pages?.[0];
+    const borderExist = page?.children?.some(
+        (item: any) => item?.id?.includes('safety-border-')
+    );
+    if (borderExist || !productId) return;
+    if (+productId === 13) {
+        addSafetyBordersTo4x6PostCard(store);
+    } else if (+productId === 14) {
+        addSafetyBordersTo6x9PostCard(store);
+    } else if (+productId === 15) {
+        addSafetyBordersTo6x11PostCard(store);
+    } else if (+productId === 5) {
+        addSafetyBordersToPersonalLetter(store);
+    } else if (+productId === 4) {
+        addSafetyBordersToNonWindowProfessioanl(store);
+    } else if (+productId === 2) {
+        addSafetyBordersToWindowProfessioanl(store);
+    } else if (+productId === 9) {
+        addSafetyBordersToBiFold(store);
+    } else if (+productId === 11) {
+        addSafetyBordersToTriFold(store);
+    } else if (+productId === 18) {
+        addSafetyBordersToSnapPackMailer(store);
+    } else if (+productId === 21) {
+        addSafetyBordersTo12x9PostCard(store);
+    } else if (+productId === 38) {
+        addSafetyBordersToNonWindowProfessioanl(store);
+    }
+};

package/src/utils/templateSafetyBorders/personal.ts

@@ -0,0 +1,41 @@
+import { createBorder, createSafetyTextElement } from "../helper";
+import { Element, Store } from "./types"
+
+export const addSafetyBordersToPersonalLetter = (store: Store): void => {
+    const randomizedId = Math.random().toString(36).substring(2, 7);
+
+    const safetyBordersTextFirst = createSafetyTextElement(
+        `safety-text-1-${randomizedId}`,
+        -15,
+        5.81,
+        543,
+        "Keep important text/images inside the green line. Content beyond this line may be trimmed during production."
+    );
+
+    const firstPageBorders: Element = {
+        id: `safety-border-1-${randomizedId}`,
+        type: "group",
+        opacity: 1,
+        visible: true,
+        selectable: false,
+        removable: false,
+        alwaysOnTop: true,
+        showInExport: false,
+        children: [
+            createBorder(`top-1-${randomizedId}`, 24, 22, 480, 3, 0),
+            createBorder(`bottom-1-${randomizedId}`, 24, 792, 480, 3, 0),
+            createBorder(`left-1-${randomizedId}`, 22, 793, 770, 3, -90),
+            createBorder(`right-1-${randomizedId}`, 503, 793, 770, 3, -90),
+        ],
+    };
+
+    // Add elements to the pages
+    store.pages[0]?.addElement(firstPageBorders);
+    store?.pages[0]?.addElement(safetyBordersTextFirst);
+
+
+    // Clear history
+    store.history.clear();
+};
+
+