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

package/src/utils/templateSafetyBorders/postCards.ts

@@ -0,0 +1,259 @@
+import { createBorder, createSafetyTextElement } from "../helper";
+import { Element, Store } from "./types"
+
+export const addSafetyBordersTo4x6PostCard = (store: Store): void => {
+    const randomizedId = Math.random().toString(36).substring(2, 7);
+
+    const safetyBordersTextFirst = createSafetyTextElement(
+        `safety-text-1-${randomizedId}`,
+        -21,
+        3.6,
+        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}`, 18.19, 14.7, 539.61, 1.97, 0),
+            createBorder(`bottom-1-${randomizedId}`, 18.19, 367.32, 539.61, 1.97, 0),
+            createBorder(`left-1-${randomizedId}`, 17.21, 368.31, 352.62, 1.97, -90),
+            createBorder(`right-1-${randomizedId}`, 556.82, 368.31, 352.62, 1.97, -90),
+        ],
+    };
+
+
+    const safetyBordersTextSecond = createSafetyTextElement(
+        `safety-text-2-${randomizedId}`,
+        -21,
+        3.6,
+        543,
+        "Keep important text/images inside the green line. Content beyond this line may be trimmed during production."
+    );
+
+    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}`, 18.19, 14.7, 539.61, 1.97, 0),
+            createBorder(`bottom-2-${randomizedId}`, 18.19, 367.32, 539.61, 1.97, 0),
+            createBorder(`left-2-${randomizedId}`, 17.21, 368.31, 352.62, 1.97, -90),
+            createBorder(`right-2-${randomizedId}`, 556.82, 368.31, 352.62, 1.97, -90),
+        ],
+    };
+
+    // Add elements to the pages
+    store.pages[0]?.addElement(firstPageBorders);
+    store?.pages[0]?.addElement(safetyBordersTextFirst);
+
+    store.pages[1]?.addElement(secondPageBorders);
+    store.pages[1]?.addElement(safetyBordersTextSecond);
+
+    // Clear history
+    store.history.clear();
+};
+
+export const addSafetyBordersTo6x9PostCard = (store: Store): void => {
+    const randomizedId = Math.random().toString(36).substring(2, 7);
+
+    const safetyBordersTextFirst = createSafetyTextElement(
+        `safety-text-1-${randomizedId}`,
+        -8.29,
+        5.8,
+        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}`, 28, 22.5, 808, 2.94, 0),
+            createBorder(`bottom-1-${randomizedId}`, 28, 550, 808, 2.94, 0),
+            createBorder(`left-1-${randomizedId}`, 26.5, 552, 528, 2.94, -90),
+            createBorder(`right-1-${randomizedId}`, 834.5, 552, 528, 2.94, -90),
+        ],
+    };
+
+    const safetyBordersTextSecond = createSafetyTextElement(
+        `safety-text-2-${randomizedId}`,
+        -8.6,
+        5.09,
+        543,
+        "Keep important text/images inside the green line. Content beyond this line may be trimmed during production."
+    );
+
+    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}`, 28, 22.5, 808, 2.94, 0),
+            createBorder(`bottom-2-${randomizedId}`, 28, 550, 808, 2.94, 0),
+            createBorder(`left-2-${randomizedId}`, 26.5, 552, 528, 2.94, -90),
+            createBorder(`right-2-${randomizedId}`, 834.5, 552, 528, 2.94, -90),
+        ],
+    };
+
+    // Add elements to the pages
+    store.pages[0]?.addElement(firstPageBorders);
+    store?.pages[0]?.addElement(safetyBordersTextFirst);
+
+    store.pages[1]?.addElement(secondPageBorders);
+    store.pages[1]?.addElement(safetyBordersTextSecond);
+
+    // Clear history
+    store.history.clear();
+};
+
+export const addSafetyBordersTo6x11PostCard = (store: Store): void => {
+    const randomizedId = Math.random().toString(36).substring(2, 7);
+
+    const safetyBordersTextFirst = createSafetyTextElement(
+        `safety-text-1-${randomizedId}`,
+        -8.29,
+        5.8,
+        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}`, 25.5, 23.8, 1005, 2.94, 0),
+            createBorder(`bottom-1-${randomizedId}`, 25.5, 549, 1005, 2.94, 0),
+            createBorder(`left-1-${randomizedId}`, 24, 550, 525, 2.94, -90),
+            createBorder(`right-1-${randomizedId}`, 1028, 550, 525, 2.94, -90),
+        ],
+    };
+
+    const safetyBordersTextSecond = createSafetyTextElement(
+        `safety-text-2-${randomizedId}`,
+        -8.6,
+        5.09,
+        543,
+        "Keep important text/images inside the green line. Content beyond this line may be trimmed during production."
+    );
+
+    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.5, 23.8, 1005, 2.94, 0),
+            createBorder(`bottom-2-${randomizedId}`, 25.5, 549, 1005, 2.94, 0),
+            createBorder(`left-2-${randomizedId}`, 24, 550, 525, 2.94, -90),
+            createBorder(`right-2-${randomizedId}`, 1028, 550, 525, 2.94, -90),
+        ],
+    };
+
+    // Add elements to the pages
+    store.pages[0]?.addElement(firstPageBorders);
+    store?.pages[0]?.addElement(safetyBordersTextFirst);
+
+    store.pages[1]?.addElement(secondPageBorders);
+    store.pages[1]?.addElement(safetyBordersTextSecond);
+
+    // Clear history
+    store.history.clear();
+};
+
+export const addSafetyBordersTo12x9PostCard = (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 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}`, 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),
+        ],
+    };
+
+    const safetyBordersTextSecond = createSafetyTextElement(
+        `safety-text-2-${randomizedId}`,
+        -8.29,
+        5.81,
+        543,
+        "Keep important text/images inside the green line. Content beyond this line may be trimmed during production."
+    );
+
+    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}`, 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),
+        ],
+    };
+
+    // Add elements to the pages
+    store.pages[0]?.addElement(firstPageBorders);
+    store?.pages[0]?.addElement(safetyBordersTextFirst);
+
+    store.pages[1]?.addElement(secondPageBorders);
+    store.pages[1]?.addElement(safetyBordersTextSecond);
+
+    // Clear history
+    store.history.clear();
+}

package/src/utils/templateSafetyBorders/professional.ts

@@ -0,0 +1,78 @@
+import { createBorder, createSafetyTextElement } from "../helper";
+import { Element, Store } from "./types"
+
+export const addSafetyBordersToNonWindowProfessioanl = (store: Store, pageIndex: number = 0): 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, 768, 3.85, 0),
+            createBorder(`bottom-1-${randomizedId}`, 24, 1028, 768, 3.85, 0),
+            createBorder(`left-1-${randomizedId}`, 22, 1030, 1006, 3.85, -90),
+            createBorder(`right-1-${randomizedId}`, 790, 1030, 1006, 3.85, -90),
+        ],
+    };
+
+    // Add elements to the pages
+    store.pages[pageIndex]?.addElement(firstPageBorders);
+    store?.pages[pageIndex]?.addElement(safetyBordersTextFirst);
+
+
+    // Clear history
+    store.history.clear();
+};
+
+
+export const addSafetyBordersToWindowProfessioanl = (store: Store, pageIndex: number = 0): 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, 23, 768, 3.85, 0),
+            createBorder(`bottom-1-${randomizedId}`, 24, 1030, 768, 3.85, 0),
+            createBorder(`left-1-${randomizedId}`, 22, 1030, 1006, 3.85, -90),
+            createBorder(`right-1-${randomizedId}`, 790, 1030, 1006, 3.85, -90),
+        ],
+    };
+
+    // Add elements to the pages
+    store.pages[pageIndex]?.addElement(firstPageBorders);
+    store?.pages[pageIndex]?.addElement(safetyBordersTextFirst);
+
+
+    // Clear history
+    store.history.clear();
+};

package/src/utils/templateSafetyBorders/snapPack.ts

@@ -0,0 +1,165 @@
+import { createBorder, createSafetyTextElement } from "../helper";
+import { Element, Store } from "./types";
+
+export const addSafetyBordersToSnapPackMailer = (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 safetyBordersInsidePanel = createSafetyTextElement(
+        `inside-panel-${randomizedId}`,
+        817,
+        663.72,
+        410,
+        "Inside Panel",
+        90,
+        18
+    );
+
+    const safetyBordersOutsideFrontPanel = createSafetyTextElement(
+        `outside-front-panel-${randomizedId}`,
+        817,
+        321,
+        410,
+        "Outside Front Panel",
+        90,
+        18
+    );
+
+    const safetyBordersOutsideBackPanel = createSafetyTextElement(
+        `outside-back-panel-${randomizedId}`,
+        817,
+        20.2,
+        410,
+        "Outside Back Panel",
+        90,
+        18
+    );
+
+    const safetyLineTextFirst = createSafetyTextElement(
+        `safety-line-4-${randomizedId}`,
+        -25.2,
+        334.9,
+        866,
+        "Fold Line",
+        0,
+        14
+    );
+
+    const safetyLineTextSecond = createSafetyTextElement(
+        `safety-line-5-${randomizedId}`,
+        -25.2,
+        685,
+        866,
+        "Fold Line",
+        0,
+        14
+    );
+
+    const safetyLineTextThird = createSafetyTextElement(
+        `safety-line-6-${randomizedId}`,
+        -25.2,
+        745,
+        866,
+        "Perforated Fold Line (Detachable Section)",
+        0,
+        14
+    );
+
+    const safetyLineTextFourth = createSafetyTextElement(
+        `safety-line-1-${randomizedId}`,
+        840,
+        783,
+        866,
+        "Perforated Fold Line (Detachable Section)",
+        180,
+        14
+    );
+
+    const safetyLineTextFifth = createSafetyTextElement(
+        `safety-line-2-${randomizedId}`,
+        840,
+        721,
+        866,
+        "Fold Line",
+        180,
+        14
+    );
+
+    const safetyLineTextSixth = createSafetyTextElement(
+        `safety-line-3-${randomizedId}`,
+        840,
+        365,
+        866,
+        "Fold Line",
+        180,
+        14
+    );
+
+    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, 768, 3.85, 0),
+            createBorder(`bottom-1-${randomizedId}`, 24, 1028, 768, 3.85, 0),
+            createBorder(`left-1-${randomizedId}`, 22, 1030, 1006, 3.85, -90),
+            createBorder(`right-1-${randomizedId}`, 790, 1030, 1006, 3.85, -90),
+            createBorder(`fold-line-1-${randomizedId}`, 840.8, 353.92, 866, 2, 180, 'rgba(208,2,27,1)'),
+            createBorder(`fold-line-2-${randomizedId}`, 840.8, 703, 866, 2, 180, 'rgba(208,2,27,1)'),
+            createBorder(`fold-line-3-${randomizedId}`, 840.8, 765.4, 866, 2, 180, 'rgba(208,2,27,1)'),
+        ],
+    };
+
+    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}`, 24, 22, 768, 3.85, 0),
+            createBorder(`bottom-2-${randomizedId}`, 24, 1028, 768, 3.85, 0),
+            createBorder(`left-2-${randomizedId}`, 22, 1030, 1006, 3.85, -90),
+            createBorder(`right-2-${randomizedId}`, 790, 1030, 1006, 3.85, -90),
+            createBorder(`fold-line-4-${randomizedId}`, -25, 765.4, 866, 2, 0, 'rgba(208,2,27,1)'),
+            createBorder(`fold-line-5-${randomizedId}`, -25, 703, 866, 2, 0, 'rgba(208,2,27,1)'),
+            createBorder(`fold-line-6-${randomizedId}`, -25, 347, 866, 2, 0, '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[0]?.addElement(safetyLineTextSecond);
+    store?.pages[0]?.addElement(safetyLineTextThird);
+
+
+    store.pages[1]?.addElement(secondPageBorders);
+    store?.pages[1]?.addElement(safetyBordersTextFirst);
+    store?.pages[1]?.addElement(safetyBordersInsidePanel);
+    store?.pages[1]?.addElement(safetyBordersOutsideFrontPanel);
+    store?.pages[1]?.addElement(safetyBordersOutsideBackPanel);
+    store?.pages[1]?.addElement(safetyLineTextFourth);
+    store?.pages[1]?.addElement(safetyLineTextFifth);
+    store?.pages[1]?.addElement(safetyLineTextSixth);
+
+    // Clear history
+    store.history.clear();
+};

package/src/utils/templateSafetyBorders/triFold.ts

@@ -0,0 +1,114 @@
+import { createBorder, createSafetyTextElement } from "../helper";
+import { Element, Store } from "./types"
+
+export const addSafetyBordersToTriFold = (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}`,
+        -2,
+        366,
+        866,
+        "Fold Line",
+        0
+    );
+
+    const safetySecondLineTextFirst = createSafetyTextElement(
+        `safety-line-2-${randomizedId}`,
+        -2,
+        744,
+        866,
+        "Fold Line",
+        0
+    );
+
+    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}`, 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)'),
+        ],
+    };
+
+    const safetyBordersTextSecond = createSafetyTextElement(
+        `safety-text-2-${randomizedId}`,
+        -8.29,
+        5.81,
+        543,
+        "Keep important text/images inside the green line. Content beyond this line may be trimmed during production."
+    );
+
+    const safetyLineTextSecond = createSafetyTextElement(
+        `safety-line-2-1-${randomizedId}`,
+        -2,
+        366,
+        866,
+        "Fold Line",
+        0
+    );
+
+    const safetySecondLineTextSecond = createSafetyTextElement(
+        `safety-line-2-2-${randomizedId}`,
+        -2,
+        744,
+        866,
+        "Fold Line",
+        0
+    );
+
+
+    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}`, 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)'),
+        ],
+    };
+
+    // Add elements to the pages
+    store.pages[0]?.addElement(firstPageBorders);
+    store?.pages[0]?.addElement(safetyBordersTextFirst);
+    store?.pages[0]?.addElement(safetyLineTextFirst);
+    store?.pages[0]?.addElement(safetySecondLineTextFirst);
+
+    store.pages[1]?.addElement(secondPageBorders);
+    store.pages[1]?.addElement(safetyBordersTextSecond);
+    store.pages[1]?.addElement(safetyLineTextSecond);
+    store.pages[1]?.addElement(safetySecondLineTextSecond);
+
+
+    // Clear history
+    store.history.clear();
+};
+
+

package/src/utils/templateSafetyBorders/types.d.ts

@@ -0,0 +1,68 @@
+export 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;
+    text?: string;
+    fontWeight?: string;
+    fill?: string;
+    align?: string;
+    verticalAlign?: string;
+    strokeWidth?: number;
+    stroke?: string;
+    lineHeight?: number;
+    letterSpacing?: number;
+    backgroundEnabled?: boolean;
+    backgroundColor?: string;
+    backgroundOpacity?: number;
+    backgroundCornerRadius?: number;
+    backgroundPadding?: number;
+    fontSize?: number;
+    fontFamily?: string;
+    fontStyle?: string;
+    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;
+    color?: string;
+    dash?: number[];
+    startHead?: string;
+    endHead?: string;
+    children?: Element[];
+}
+
+export interface Page {
+    addElement: (element: Element) => void;
+}
+
+export interface Store {
+    width: number;
+    height: number;
+    pages: Page[];
+    history: {
+        clear: () => void;
+    };
+}

package/src/utils/types.ts

@@ -0,0 +1,12 @@
+// Define a union type for the allowed add-on values
+export type AddOnValue = 'gsv' | 'property_offer' | 'custom_property_offer';
+export type TemplateTypesValue = 'my_templates' | 'team_templates' | 'olc-templates';
+
+
+export type AddOnTypes = {
+    [key in AddOnValue]?: string;
+};
+
+export type TemplateTypes = {
+    [key in TemplateTypesValue]?: string;
+};