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

package/src/utils/templateRestrictedArea/snapPack.ts

@@ -0,0 +1,1009 @@
+// 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[];
+    custom?: 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 addRestrictedAreaToSnapPackMailer = (store: Store, barcodeSrc: string): void => {
+    const page = store.pages[0];
+    const pageTwo = store.pages[1];
+
+    const elements: Element[] = [
+        {
+            id: "left-p1",
+            type: "figure",
+            name: "left-p1",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 2.930e-14,
+            y: -1.42e-14,
+            width: 23.83,
+            height: 1062.31,
+            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: "rgba(255,255,255,1)",
+            dash: [],
+            strokeWidth: 0,
+            stroke: "#0c0c0c",
+            cornerRadius: 0
+        },
+        {
+            id: "right-p1",
+            type: "figure",
+            name: "right-p1",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 792.166,
+            y: 11.809,
+            width: 23.83,
+            height: 1062.31,
+            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: "rgba(255,255,255,1)",
+            dash: [],
+            strokeWidth: 0,
+            stroke: "#0c0c0c",
+            cornerRadius: 0
+        },
+        {
+            id: "top-p1",
+            type: "figure",
+            name: "top-p1",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 938.95,
+            y: -0.1065,
+            width: 23.833,
+            height: 1062.31,
+            rotation: 90,
+            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: "rgba(255,255,255,1)",
+            dash: [],
+            strokeWidth: 0,
+            stroke: "#0c0c0c",
+            cornerRadius: 0
+        },
+        {
+            id: "bottom-p1",
+            type: "figure",
+            name: "bottom-p1",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 920.867,
+            y: 1031.583,
+            width: 23.83,
+            height: 1062.31,
+            rotation: 90,
+            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: "rgba(255,255,255,1)",
+            dash: [],
+            strokeWidth: 0,
+            stroke: "#0c0c0c",
+            cornerRadius: 0
+        },
+        {
+            id: "mailing-address-window-box-1",
+            type: "figure",
+            name: "mailing-address-window-box-1",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 60,
+            y: 375,
+            width: 360,
+            height: 185,
+            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: "rgba(233,233,233,1)",
+            dash: [],
+            strokeWidth: 0,
+            stroke: "#0c0c0c",
+            cornerRadius: 16,
+            custom: {
+                replaceBg: true,
+                preFill: "rgba(233,233,233,1)",
+                postFill: "white"
+            },
+        },
+        {
+            id: "mailing-address-window-text-1",
+            type: "text",
+            name: "mailing-address",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: false,
+            x: 35,
+            y: 455,
+            width: 408,
+            height: 31,
+            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: "Mailing Address Window",
+            placeholder: "",
+            fontSize: 25,
+            fontFamily: "Roboto",
+            fontStyle: "italic",
+            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: "recipient-address-area",
+            type: "figure",
+            name: "recipient-address-area",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            custom: {
+                replaceBg: true,
+                preFill: 'rgba(193,193,193,1)'
+            },
+            x: 96.48,
+            y: 893.82,
+            width: 286.86,
+            height: 97.13,
+            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: true,
+            resizable: true,
+            contentEditable: true,
+            styleEditable: true,
+            subType: "rect",
+            fill: "rgba(193,193,193,1)",
+            dash: [],
+            strokeWidth: 1,
+            stroke: "#0c0c0c",
+            cornerRadius: 16
+        },
+        {
+            id: 'recipient-address-box',
+            type: 'figure',
+            name: 'recipient-address-box',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 107,
+            y: 917,
+            width: 255,
+            height: 63,
+            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: 'recipient-address',
+            type: 'text',
+            name: 'recipient-address-text',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 112,
+            y: 920.08,
+            width: 250,
+            height: 63,
+            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: true,
+            styleEditable: true,
+            text: 'RECIPIENT ADDRESS \nWILL AUTOMATICALLY \nBE PRINTED IN THIS \nPOSITION',
+            placeholder: '',
+            fontSize: 12,
+            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: '#FFFFFF',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        },
+    ];
+
+    const elementsForSecondPage: Element[] = [
+        {
+            id: "left-p2",
+            type: "figure",
+            name: "left-p2",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 1,
+            y: -6.3,
+            width: 21.83,
+            height: 1062.31,
+            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: "rgba(255,255,255,1)",
+            dash: [],
+            strokeWidth: 0,
+            stroke: "#0c0c0c",
+            cornerRadius: 0
+        },
+        {
+            id: "right-p2",
+            type: "figure",
+            name: "right-p2",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 792.16,
+            y: -1.421e-14,
+            width: 23.83,
+            height: 1062.31,
+            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: "rgba(255,255,255,1)",
+            dash: [],
+            strokeWidth: 0,
+            stroke: "#0c0c0c",
+            cornerRadius: 0
+        },
+        {
+            id: "top-p2",
+            type: "figure",
+            name: "top-p2",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 913.84,
+            y: -0.1065,
+            width: 23.83,
+            height: 1062.31,
+            rotation: 90,
+            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: "rgba(255,255,255,1)",
+            dash: [],
+            strokeWidth: 0,
+            stroke: "#0c0c0c",
+            cornerRadius: 0
+        },
+        {
+            id: "bottom-p2",
+            type: "figure",
+            name: "bottom-p2",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 895.68,
+            y: 1030,
+            width: 25.99,
+            height: 1062.31,
+            rotation: 90,
+            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: "rgba(255,255,255,1)",
+            dash: [],
+            strokeWidth: 0,
+            stroke: "#0c0c0c",
+            cornerRadius: 0
+        },
+        {
+            id: "return-address-box",
+            type: "figure",
+            name: "return-address-box",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            custom: {
+                replaceBg: true,
+                preFill: 'rgba(242,242,242,1)'
+            },
+            x: 720,
+            y: 690,
+            width: 284.86,
+            height: 76.09,
+            rotation: 180,
+            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: "rgba(242,242,242,1)",
+            dash: [],
+            strokeWidth: 0,
+            stroke: "#0c0c0c",
+            cornerRadius: 12
+        },
+        {
+            id: 'return-address',
+            type: 'text',
+            name: 'return-address',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 710,
+            y: 680,
+            width: 250,
+            height: 63,
+            rotation: 180,
+            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: 10,
+            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: '#FFFFFF',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        },
+        {
+            id: "postage-indicia-box",
+            type: "figure",
+            name: "postage-indicia-box",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            custom: {
+                replaceBg: true,
+                preFill: 'rgba(243,243,243,1)'
+            },
+            x: 192,
+            y: 685,
+            width: 137,
+            height: 74.8,
+            rotation: 180,
+            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: "rgba(243,243,243,1)",
+            dash: [],
+            strokeWidth: 0,
+            stroke: "#0c0c0c",
+            cornerRadius: 12
+        },
+        {
+            id: 'indicia',
+            type: 'text',
+            name: 'indicia',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 175,
+            y: 668,
+            width: 111,
+            height: 40,
+            rotation: 180,
+            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: "mailing-address-window-box-2",
+            type: "figure",
+            name: "mailing-address-window-box-2",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 400,
+            y: 365,
+            width: 360,
+            height: 185,
+            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: "rgba(240,240,240,1)",
+            dash: [],
+            strokeWidth: 0,
+            stroke: "#0c0c0c",
+            cornerRadius: 16,
+            custom: {
+                replaceBg: true,
+                preFill: "rgba(233,233,233,1)",
+                postFill: "white"
+            },
+        },
+        {
+            id: "mailing-address-window-text-2",
+            type: "text",
+            name: "mailing-address",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: false,
+            x: 780,
+            y: 475,
+            width: 408,
+            height: 31,
+            rotation: 180,
+            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: "Mailing Address Window",
+            placeholder: "",
+            fontSize: 25,
+            fontFamily: "Roboto",
+            fontStyle: "italic",
+            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-box",
+            type: "figure",
+            name: "barcode-box",
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            custom: {
+                replaceBg: true,
+                preFill: 'rgba(244,244,244,1)'
+            },
+            x: 375,
+            y: 435,
+            width: 319,
+            height: 65,
+            rotation: 180,
+            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: "rgba(244,244,244,1)",
+            dash: [],
+            strokeWidth: 0,
+            stroke: "#0c0c0c",
+            cornerRadius: 12
+        },
+        {
+            id: 'barcode',
+            type: 'image',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: 375,
+            y: 410,
+            width: 315,
+            height: 15,
+            rotation: 180,
+            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,
+        },
+    ];
+
+    elements.forEach(element => page.addElement(element));
+    elementsForSecondPage.forEach(element => pageTwo.addElement(element));
+    store.history.clear();
+};