@openlettermarketing/olc-react-sdk 0.0.2

package/build/types/redux/reducers/templateReducer.d.ts

@@ -0,0 +1,58 @@
+export interface DynamicField {
+    value: string;
+    key: string;
+    defaultValue: string;
+}
+export interface Template {
+    title: string;
+    product: Product | null;
+    templateType: string;
+}
+export interface Product {
+    size: Array<{
+        size: string;
+    }>;
+    productType: string;
+}
+export interface TemplatesState {
+    count: number;
+    rows: any[];
+    currentPage: number;
+    lastPage: number;
+    from: number;
+    to: number;
+    perPage: number;
+    total: number;
+    loading: boolean;
+    totalRecordsInDB: number | null;
+}
+export interface PaginationState {
+    page: number;
+    pageSize: number;
+    loading: boolean;
+}
+export interface TemplateState {
+    title: string;
+    product: Product | null;
+    dynamicField: string;
+    dynamicFields: Record<string, DynamicField>;
+    defaultDynamicFieldsHashMap: Record<string, DynamicField>;
+    defaultDynamicFields: DynamicField[];
+    products: any[];
+    productDetailByTemplate: any[];
+    templates: TemplatesState;
+    templatesPagination: PaginationState;
+    template: Template | null;
+    totalRecordsInDB: number | null;
+    search: string;
+    searchProductIds: string;
+    searchCreator: string;
+    templateType: string;
+    envelopeType: string;
+    templateLoading: boolean | null;
+}
+declare const templateReducer: (state: TemplateState | undefined, { type, payload }: {
+    type: any;
+    payload: any;
+}) => TemplateState;
+export { templateReducer };

package/build/types/redux/store.d.ts

@@ -0,0 +1,10 @@
+declare const store: import("@reduxjs/toolkit/dist/configureStore").ToolkitStore<{
+    templates: import("./reducers/templateReducer").TemplateState;
+    customFields: import("./reducers/customFieldReducer").CustomFieldState;
+    snackbarReducers: {
+        snackbar: any;
+    };
+}, any, any>;
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+export default store;

package/build/types/utils/api.d.ts

@@ -0,0 +1,5 @@
+export declare const get: (endpoint: string, params?: any) => Promise<unknown>;
+export declare const post: (endpoint: string, body: any) => Promise<unknown>;
+export declare const put: (endpoint: string, body: any) => Promise<unknown>;
+export declare const patch: (endpoint: string, body: any) => Promise<unknown>;
+export declare const del: (endpoint: string, params?: Record<string, string>) => Promise<unknown>;

package/build/types/utils/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const DPI: number;
+export declare const Barcode: string;
+export declare const PRODUCT_LEARN_URL: string;
+export declare const multiPageLetters: string[];
+export declare const templateTypes: {
+    id: string;
+    label: string;
+}[];
+export declare const sortOrderForTemplates: string[];

package/build/types/utils/fetchWrapper.d.ts

@@ -0,0 +1,8 @@
+export interface RequestOptions {
+    method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+    headers?: Record<string, string>;
+    body?: any;
+    params?: Record<string, string>;
+}
+declare const fetchWrapper: (endpoint: string, options: RequestOptions) => Promise<unknown>;
+export default fetchWrapper;

package/build/types/utils/helper.d.ts

@@ -0,0 +1,5 @@
+export declare let apiKey: string | null;
+export declare let appMode: string;
+export declare const copyToClipboard: (text: string) => void;
+export declare const setApiKey: (key: string) => void;
+export declare const setMode: (mode: string) => void;

package/build/types/utils/local-storage.d.ts

@@ -0,0 +1,4 @@
+export declare const setItem: (key: string, value: string) => void;
+export declare const getItem: (key: string) => string | null;
+export declare const removeItem: (key: string) => void;
+export declare const clearStorage: () => void;

package/build/types/utils/message.d.ts

@@ -0,0 +1,64 @@
+export declare const MESSAGES: {
+    readonly GENERAL_ERROR: "Internal Server Error";
+    readonly TEMPLATE: {
+        readonly SEARCH_PLACE_HOLDER: "Search by template name or template ID";
+        readonly NAME_REQUIRED: "Template Name is required";
+        readonly TYPE_REQUIRED: "Template Type is required";
+        readonly PRODUCT_TYPE_REQUIRED: "Product Type is required";
+        readonly ENVELOPE_TYPE_REQUIRED: "Envelope Type is required";
+        readonly POSTCARD_SIZE_REQUIRED: "Postcard Size is required";
+        readonly NAME_LESS_50: "Template Name should be less than or equal to 50 characters";
+        readonly CREATE: {
+            readonly TITLE: "Create New Template";
+            readonly TEMPLATE_LABEL: "Template Name*";
+            readonly PRODUCT_LABEL: "Product Type*";
+            readonly LEARN_TEXT: "Learn More";
+            readonly CANCEL_BUTTON: "Cancel";
+            readonly SUBMIT_BUTTON: "Next";
+        };
+        readonly LIMIT_MODAL: {
+            readonly TITLE: "Limit Reached";
+            readonly HEADING: "You've reached your template limit";
+            readonly SUB_HEADING: "Please Upgrade your subscription to add more templates";
+            readonly CANCEL_BUTTON: "Cancel";
+            readonly SUBMIT_BUTTON: "View Plans";
+        };
+        readonly DELETE: {
+            readonly TITLE: "Delete Template";
+            readonly HEADING: "Are you sure you want to delete this Template?";
+            readonly PARAGRAPH: "This template will be deleted from your Templates list but will still be included in associated orders.";
+        };
+        readonly SAVE: {
+            readonly TITLE: "Confirm Save Template";
+            readonly HEADING: "Are you sure you want to save this template?";
+            readonly PARAGRAPH: "The updates provided will be used right away for any orders referencing this template.";
+            readonly CANCEL_BUTTON: "Cancel";
+            readonly SUBMIT_BUTTON: "Save";
+        };
+        readonly CANCEL: {
+            readonly TITLE: "Confirm Cancel Template";
+            readonly HEADING: "Are you sure you want to cancel this Template?";
+            readonly PARAGRAPH: "You will lose your changes after canceling.";
+            readonly BACK_BUTTON: "Go Back";
+            readonly CANCEL_BUTTON: "Cancel";
+        };
+        readonly DESIGN_YOUR_OWN: {
+            readonly TITLE: "Confirm";
+            readonly HEADING: "Are you sure you want to discard these changes?";
+            readonly PARAGRAPH: "You will lose your changes. Please save your changes or click ok to proceed.";
+        };
+        readonly SELECT_TEMPLATE: {
+            readonly TITLE: "Confirm";
+            readonly HEADING: "Are you sure you want to change current template with this one?";
+            readonly PARAGRAPH: "You will lose your changes. Please save your changes or click ok to proceed.";
+            readonly SUBMIT_BUTTON: "OK";
+            readonly CANCEL_BUTTON: "Cancel";
+        };
+        readonly DOWNLOAD_PROOF_BUTTON: "Download Proof";
+        readonly CANCEL_BUTTON: "Cancel";
+        readonly SUBMIT_BUTTON: "Save";
+    };
+    readonly SNACKBAR: {
+        readonly HEADING: "Notifications";
+    };
+};

package/build/types/utils/template-builder.d.ts

@@ -0,0 +1,18 @@
+export declare const addressPrinting: {
+    [key: string]: boolean;
+};
+export declare const multiPageTemplates: string[];
+export interface EnvelopeType {
+    id: number;
+    label: string;
+    type: string;
+}
+export declare const envelopeTypes: EnvelopeType[];
+export declare const getFileAsBlob: (url: string, returnType?: string) => Promise<any>;
+export declare const blobToString: (blob: Blob) => Promise<string>;
+export declare const downloadPDF: (title: string, url: string) => void;
+export interface Product {
+    productType: string;
+}
+export declare const drawRestrictedAreaOnPage: (store: any, product: Product, envelopeType: string) => void;
+export declare const extractFontFamilies: (jsonData: any[]) => string[];

package/build/types/utils/templateRestrictedArea/biFold.d.ts

@@ -0,0 +1,78 @@
+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;
+}
+interface Page {
+    addElement: (element: Element) => void;
+}
+interface Store {
+    width: number;
+    height: number;
+    pages: Page[];
+    history: {
+        clear: () => void;
+    };
+}
+export declare const addRestrictedAreaToBiFold: (store: Store, size: [number, number], barcodeSrc: string) => void;
+export {};

package/build/types/utils/templateRestrictedArea/postCard.d.ts

@@ -0,0 +1,78 @@
+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;
+}
+interface Page {
+    addElement: (element: Element) => void;
+}
+interface Store {
+    width: number;
+    height: number;
+    pages: Page[];
+    history: {
+        clear: () => void;
+    };
+}
+export declare const addRestrictedAreaToPostCard: (store: Store, size: [number, number], barcodeSrc: string) => void;
+export {};

package/build/types/utils/templateRestrictedArea/professional.d.ts

@@ -0,0 +1,78 @@
+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;
+}
+interface Page {
+    addElement: (element: Element) => void;
+}
+interface Store {
+    width: number;
+    height: number;
+    pages: Page[];
+    history: {
+        clear: () => void;
+    };
+}
+export declare const addAreaToProfessionalLetters: (store: Store, barcodeSrc: string) => void;
+export {};

package/build/types/utils/templateRestrictedArea/realPenned.d.ts

@@ -0,0 +1,78 @@
+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;
+}
+interface Page {
+    addElement: (element: Element) => void;
+}
+interface Store {
+    width: number;
+    height: number;
+    pages: Page[];
+    history: {
+        clear: () => void;
+    };
+}
+export declare const addElementsforRealPennedLetters: (store: Store) => void;
+export {};

package/build/types/utils/templateRestrictedArea/triFold.d.ts

@@ -0,0 +1,78 @@
+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;
+}
+interface Page {
+    addElement: (element: Element) => void;
+}
+interface Store {
+    width: number;
+    height: number;
+    pages: Page[];
+    history: {
+        clear: () => void;
+    };
+}
+export declare const addRestrictedAreaToTriFold: (store: Store, size: [number, number], barcodeSrc: string) => void;
+export {};

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@openlettermarketing/olc-react-sdk",
+  "private": false,
+  "version": "0.0.2",
+  "type": "module",
+  "description": "Simplify template builder integration for any product.",
+  "main": "build/index.js",
+  "types": "build/types/index.d.ts",
+  "author": "Open Letter Marketing",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "webpack && tsc",
+    "test": "jest --silent",
+    "coverage": "npm run test -- --coverage",
+    "prepare": "npm run build",
+    "publish": "npm publish --access public"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Open-Letter-Marketing/olc-react-sdk.git"
+  },
+  "keywords": [
+    "olc",
+    "olm",
+    "open-letter-connect",
+    "open-letter-marketing",
+    "openlettermarketing",
+    "react",
+    "sdk",
+    "react-sdk",
+    "template",
+    "builder",
+    "template-builder",
+    "olc-integration",
+    "olcintegration"
+  ],
+  "dependencies": {
+    "@fontsource/inter": "^5.0.18",
+    "deepmerge": "^4.3.1",
+    "mobx-react-lite": "^4.0.7",
+    "polotno": "^2.4.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^9.1.2",
+    "redux": "^5.0.1",
+    "@reduxjs/toolkit": "^1.9.7",
+    "react-router-dom": "^6.18.0",
+    "react-select": "^5.8.0",
+    "react-toastify": "^10.0.5",
+    "react-tooltip": "^5.26.4",
+    "styled-components": "^6.1.11"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.24.7",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/plugin-transform-typescript": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@parcel/packager-ts": "2.12.0",
+    "@parcel/transformer-sass": "2.12.0",
+    "@parcel/transformer-typescript-types": "2.12.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.1.1",
+    "@tsconfig/node16": "^16.1.1",
+    "@types/sortablejs": "1",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^7.1.2",
+    "eslint": "^8.56.0",
+    "sass": "^1.77.4",
+    "eslint-config-prettier": "~9.1.0",
+    "eslint-plugin-jest": "~27.6.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "file-loader": "^6.2.0",
+    "jest": "^29.7.0",
+    "parcel": "^2.12.0",
+    "prettier": "^3.1.1",
+    "sass-loader": "^14.2.1",
+    "style-loader": "^4.0.0",
+    "svg-url-loader": "^8.0.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "typescript": "^5.3.3",
+    "vite": "^5.2.0",
+    "webpack": "^5.92.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "4.13.3"
+  }
+}