@openlettermarketing/olc-vue-sdk 1.2.0 → 1.3.0

package/build/index.js

@@ -128696,7 +128696,7 @@ if (inBrowser) {
 
 
 
-;// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=template&id=ba857136
+;// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=template&id=e00aac82
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c
@@ -128706,7 +128706,7 @@ var staticRenderFns = []
 render._withStripped = true
 
 
-;// CONCATENATED MODULE: ./src/App.vue?vue&type=template&id=ba857136
+;// CONCATENATED MODULE: ./src/App.vue?vue&type=template&id=e00aac82
 
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
 var injectStylesIntoStyleTag = __webpack_require__(85072);
@@ -152633,6 +152633,38 @@ const $65bf2ecf319e656d$var$initialState = {
             defaultValue: "johndoe@gmail.com"
         }
     ],
+    defaultSenderFields: [
+        {
+            value: "Sender First Name",
+            key: "{{SPF.FIRST_NAME}}",
+            defaultValue: "John"
+        },
+        {
+            value: "Sender Last Name",
+            key: "{{SPF.LAST_NAME}}",
+            defaultValue: "Doe"
+        },
+        {
+            value: "Sender Company Name",
+            key: "{{SPF.COMPANY_NAME}}",
+            defaultValue: "ABC Company, Inc."
+        },
+        {
+            value: "Sender Phone Number",
+            key: "{{SPF.PHONE_NUMBER}}",
+            defaultValue: "(555) 278-9389"
+        },
+        {
+            value: "Sender Email",
+            key: "{{SPF.EMAIL}}",
+            defaultValue: "johndoe@gmail.com"
+        },
+        {
+            value: "Sender Website",
+            key: "{{SPF.WEBSITE}}",
+            defaultValue: "www.example.com"
+        }
+    ],
     products: (0, $d60d8816d76b2b02$export$92e44ea1079b9ec6),
     productDetailByTemplate: [],
     templates: {
@@ -152901,10 +152933,12 @@ var $ad568a7ac4136873$export$2e2bcd8739ae039 = $ad568a7ac4136873$var$store;
 
 const $7ad22e5ca6c288ca$export$fa671cbd439de11d = "https://api.openletterconnect.com/api/v1/sdk";
 const $7ad22e5ca6c288ca$export$9878c63741f482ec = "https://demoapi.openletterconnect.com/api/v1/sdk";
+const $7ad22e5ca6c288ca$export$31ebffddc71c8253 = `https://demoapi.openletterconnect.com/api/v1/download/s3/openletterconnect`;
+const $7ad22e5ca6c288ca$export$79361813a10e9e28 = `https://api.openletterconnect.com/api/v1/download/s3/openletterconnect`;
 const $7ad22e5ca6c288ca$export$6032165a31897610 = 96;
-const $7ad22e5ca6c288ca$export$882f44a34ce19ae0 = "https://api.openletterconnect.com/api/v1/download/s3/openletterconnect/assets/preview/one-barcode.png";
+const $7ad22e5ca6c288ca$export$7a42bc549c2355e6 = `/assets/preview/one-barcode.png`;
+const $7ad22e5ca6c288ca$export$75535718f1551e4f = `/default_images/dummyGSV.png`;
 const $7ad22e5ca6c288ca$export$b14103b5b94712c4 = "https://help.openletterconnect.com/getting-support/designing-your-mailers/wip-designing-mail-creatives/wip-mail-piece-design-specs";
-const $7ad22e5ca6c288ca$export$75535718f1551e4f = "https://api.openletterconnect.com/api/v1/download/s3/openletterconnect/default_images/dummyGSV.png";
 const $7ad22e5ca6c288ca$export$3e994a540f8ee57 = [
     "Postcards",
     "Tri-Fold Self-Mailers",
@@ -152930,29 +152964,22 @@ const $7ad22e5ca6c288ca$export$e75e577b199ead61 = [
 ];
 
 
-let $717432aee8737b76$export$4c3a79da664857a5 = "";
-let $717432aee8737b76$export$e484206ee977114e = "";
+let $717432aee8737b76$export$cf3b58100ed4cf89 = "";
 let $717432aee8737b76$export$897b44b3e27fa56d = false;
 const $717432aee8737b76$export$2cdf1b96a9f86d16 = (text)=>{
     navigator.clipboard.writeText(text).then(()=>{}).catch((err)=>{
         console.error("Failed to copy text: ", err);
     });
 };
-const $717432aee8737b76$export$8b5260d2c1269447 = ()=>{
-    return $717432aee8737b76$export$4c3a79da664857a5;
+const $717432aee8737b76$export$46af023db2483081 = ()=>{
+    return $717432aee8737b76$export$cf3b58100ed4cf89;
 };
-const $717432aee8737b76$export$750bdf4bac68fe69 = ()=>{
-    return $717432aee8737b76$export$e484206ee977114e;
+const $717432aee8737b76$export$527e3e4d00b88329 = (key)=>{
+    $717432aee8737b76$export$cf3b58100ed4cf89 = key;
 };
 const $717432aee8737b76$export$d97320b3491da14 = ()=>{
     return $717432aee8737b76$export$897b44b3e27fa56d;
 };
-const $717432aee8737b76$export$9d2510767fe266f9 = (name)=>{
-    $717432aee8737b76$export$4c3a79da664857a5 = name;
-};
-const $717432aee8737b76$export$4251d26568059eef = (password)=>{
-    $717432aee8737b76$export$e484206ee977114e = password;
-};
 const $717432aee8737b76$export$ba225133fb4a45c3 = (sandbox)=>{
     $717432aee8737b76$export$897b44b3e27fa56d = sandbox;
 };
@@ -152964,11 +152991,10 @@ const $717432aee8737b76$export$c5a6b7b1e4535d31 = (input)=>{
 };
 
 
-const $f081c02ac731d950$var$base64Credentials = ()=>btoa(`${(0, $717432aee8737b76$export$8b5260d2c1269447)()}:${(0, $717432aee8737b76$export$750bdf4bac68fe69)()}`);
 const $f081c02ac731d950$var$getHeaders = (additionalHeaders = {})=>({
         "Content-Type": "application/json",
         "Accept": "application/json",
-        "Authorization": `Basic ${$f081c02ac731d950$var$base64Credentials()}`,
+        "Authorization": `Bearer ${(0, $717432aee8737b76$export$46af023db2483081)()}`,
         ...additionalHeaders
     });
 const $f081c02ac731d950$var$fetchWrapper = async (endpoint, options)=>{
@@ -153283,6 +153309,7 @@ const $0b51cdcdcd2b1339$export$af7faffe10421f14 = {
 /* eslint-disable no-useless-catch */ // Utils
 
 
+
 const $9d201cd516e32817$export$5f13a51c7a156d51 = (store, size, barcodeSrc)=>{
     const page = store.pages[0];
     const elements = [
@@ -154755,20 +154782,21 @@ const $ad01ab85e9f42d02$export$3c4ee5ffa62bdd4b = (title, url)=>{
     document.body.removeChild(link);
 };
 const $ad01ab85e9f42d02$export$8029e38c28541a = (store, product, envelopeType)=>{
+    const barcodeSrc = ((0, $717432aee8737b76$export$d97320b3491da14)() ? (0, $7ad22e5ca6c288ca$export$31ebffddc71c8253) : (0, $7ad22e5ca6c288ca$export$79361813a10e9e28)) + (0, $7ad22e5ca6c288ca$export$7a42bc549c2355e6);
     if ($ad01ab85e9f42d02$export$c957b57e52c8dfb1[`${product.productType}-${envelopeType}`]) {
-        if (product.productType === "Professional Letters") (0, $11132e13d1f7bacf$export$fe83566325f1e1e8)(store, (0, $7ad22e5ca6c288ca$export$882f44a34ce19ae0));
+        if (product.productType === "Professional Letters") (0, $11132e13d1f7bacf$export$fe83566325f1e1e8)(store, barcodeSrc);
         else if (product.productType === (0, $7ad22e5ca6c288ca$export$3e994a540f8ee57)[0]) (0, $58150108dfd76800$export$485ca3438dfa1819)(store, [
             3.2835,
             2.375
-        ], (0, $7ad22e5ca6c288ca$export$882f44a34ce19ae0));
+        ], barcodeSrc);
         else if (product.productType === (0, $7ad22e5ca6c288ca$export$3e994a540f8ee57)[1]) (0, $61207d508899f18f$export$c3fe419eb223f4c8)(store, [
             3.2835,
             2.375
-        ], (0, $7ad22e5ca6c288ca$export$882f44a34ce19ae0));
+        ], barcodeSrc);
         else if (product.productType === (0, $7ad22e5ca6c288ca$export$3e994a540f8ee57)[2]) (0, $9d201cd516e32817$export$5f13a51c7a156d51)(store, [
             3.2835,
             2.375
-        ], (0, $7ad22e5ca6c288ca$export$882f44a34ce19ae0));
+        ], barcodeSrc);
     }
 };
 const $ad01ab85e9f42d02$export$464e4dcbf779d16c = (jsonData)=>{
@@ -156539,6 +156567,7 @@ const $d31b9bd88e5dcf67$var$TopNavigation = ({ store: store, createTemplateRoute
     const product = (0, useSelector)((state)=>state.templates.product);
     const dynamicFields = (0, useSelector)((state)=>state.templates.dynamicFields);
     const defaultFields = (0, useSelector)((state)=>state.templates.defaultDynamicFields);
+    const defaultSenderFields = (0, useSelector)((state)=>state.templates.defaultSenderFields);
     const templateType = (0, useSelector)((state)=>state.templates.templateType);
     const envelopeType = (0, useSelector)((state)=>state.templates.envelopeType);
     (0, react.useEffect)(()=>{
@@ -156574,7 +156603,8 @@ const $d31b9bd88e5dcf67$var$TopNavigation = ({ store: store, createTemplateRoute
             setDownloaingProof(true);
             const fields = [
                 ...defaultFields,
-                ...Object.values(dynamicFields)
+                ...Object.values(dynamicFields),
+                ...defaultSenderFields
             ];
             let json = store.toJSON();
             if (product?.productType === "Real Penned Letter") {
@@ -156617,7 +156647,8 @@ const $d31b9bd88e5dcf67$var$TopNavigation = ({ store: store, createTemplateRoute
             const formData = new FormData();
             const allFields = [
                 ...defaultFields,
-                ...Object.values(dynamicFields)
+                ...Object.values(dynamicFields),
+                ...defaultSenderFields
             ];
             let selectedFields = [];
             if (templateType === "json") {
@@ -157133,7 +157164,7 @@ const $e8f6665471b594e0$var$CustomTemplateSection = {
                 fill: "var(--text-color)"
             })
         })),
-    Panel: (0, es.observer)(({ store: store, platformName: platformName, defaultCategory: defaultCategory, selectedSection: selectedSection, onGetOneTemplate: onGetOneTemplate, onGetTemplates: onGetTemplates })=>{
+    Panel: (0, es.observer)(({ store: store, platformName: platformName, selectedSection: selectedSection, onGetOneTemplate: onGetOneTemplate, onGetTemplates: onGetTemplates })=>{
         const dispatch = (0, useDispatch)();
         const [openGalleryModal, setOpenGalleryModal] = (0, react.useState)(false);
         const [templateTypes, setTemplateTypes] = (0, react.useState)();
@@ -157220,33 +157251,14 @@ const $e8f6665471b594e0$var$CustomTemplateSection = {
         const getAllCategories = async ()=>{
             const categories = await dispatch((0, $dbaee5ca78364d67$export$202033b5492f87a7));
             if (categories?.status === 200) {
-                if (defaultCategory && categories?.data?.data) {
-                    const fetchedCategories = categories.data.data.filter((item)=>item.totalTemplates > 0).map((item)=>({
+                if (categories?.data?.data) {
+                    const allCategories = categories?.data?.data?.map((item)=>({
                             ...item,
-                            label: item.title.trim().toLowerCase()
+                            label: item.title
                         }));
-                    if (fetchedCategories.length > 0) {
-                        const normalizedDefaultCategories = defaultCategory.map((category)=>category.trim().toLowerCase());
-                        if (normalizedDefaultCategories.length === 1) {
-                            const findCategory = fetchedCategories.find((item)=>item.label === normalizedDefaultCategories[0]);
-                            if (findCategory) {
-                                setSelectedCategory(findCategory);
-                                return;
-                            }
-                        } else if (normalizedDefaultCategories.length > 1) {
-                            const filterCategory = fetchedCategories.filter((item)=>normalizedDefaultCategories.includes(item.label));
-                            if (filterCategory.length > 0) {
-                                setSelectedCategory(filterCategory[0]);
-                                setTemplateCategories(filterCategory);
-                                return;
-                            }
-                        }
-                    }
+                    if (allCategories.length === 1) setSelectedCategory(allCategories[0]);
+                    setTemplateCategories(allCategories.filter((item)=>item.totalTemplates > 0));
                 }
-                setTemplateCategories(categories?.data?.data.filter((item)=>item.totalTemplates > 0).map((item)=>({
-                        ...item,
-                        label: item.title
-                    })));
             }
         };
         const closeGalleryModal = ()=>{
@@ -157780,11 +157792,12 @@ const $d0a2370b36372b2d$var$customFieldSection = {
                 fill: "var(--text-color)"
             })
         })),
-    Panel: (0, es.observer)(({ store: store, onGetCustomFields: onGetCustomFields })=>{
+    Panel: (0, es.observer)(({ store: store, onGetCustomFields: onGetCustomFields, allowSenderFields: allowSenderFields })=>{
         const [isShowDialog, setIsShowDialog] = (0, react.useState)(false);
         const dispatch = (0, useDispatch)();
         const customFields = (0, useSelector)((state)=>state.customFields.customFields);
         const defaultDynamicFields = (0, useSelector)((state)=>state.customFields.defaultDynamicFields);
+        const defaultSenderFields = (0, useSelector)((state)=>state.templates.defaultSenderFields);
         const product = (0, useSelector)((state)=>state.templates.product);
         const currentTemplateType = product?.productType;
         const handleShowDialog = ()=>{
@@ -157884,7 +157897,52 @@ const $d0a2370b36372b2d$var$customFieldSection = {
                                 })
                             })
                         ]
-                    }, i)),
+                    }, i + "_contact")),
+                allowSenderFields && /*#__PURE__*/ (0, jsx_runtime.jsxs)((0, jsx_runtime.Fragment), {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
+                            className: "dynamic-content__top",
+                            children: /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime.jsx)("span", {
+                                        className: "title",
+                                        children: "Sender Fields"
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $10fe05b81a81fb3f$export$2e2bcd8739ae039), {
+                                        fill: "var(--primary-color)",
+                                        className: "sender"
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $7d1ce187c1ab3d01$export$2e2bcd8739ae039), {
+                                        anchorSelect: ".sender",
+                                        place: "bottom",
+                                        title: "You can add sender fields to your template."
+                                    })
+                                ]
+                            })
+                        }),
+                        defaultSenderFields?.map(({ key: key, value: value }, i)=>/*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
+                                style: {
+                                    display: "flex",
+                                    alignItems: "center"
+                                },
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime.jsx)("span", {
+                                        className: "contact-element",
+                                        onClick: (event)=>handleAddElementOnScreen(event, key, "click"),
+                                        children: value
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $468b2e43c10c77f3$export$2e2bcd8739ae039), {
+                                        style: $d0a2370b36372b2d$var$iconButtonStyles,
+                                        onClick: ()=>copyCustomFieldText(key),
+                                        backdrop: false,
+                                        children: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $e06bdfe75163a118$export$2e2bcd8739ae039), {
+                                            className: "copy"
+                                        })
+                                    })
+                                ]
+                            }, i + "_sender"))
+                    ]
+                }),
                 /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $7d1ce187c1ab3d01$export$2e2bcd8739ae039), {
                     anchorSelect: ".copy",
                     place: "bottom",
@@ -157939,7 +157997,7 @@ const $d0a2370b36372b2d$var$customFieldSection = {
                                         })
                                     })
                                 ]
-                            }, i))
+                            }, i + "_custom"))
                     ]
                 })
             ]
@@ -157961,6 +158019,7 @@ var $d0a2370b36372b2d$export$2e2bcd8739ae039 = $d0a2370b36372b2d$var$customField
 
 
 
+
 const $6b0ed1002bdc4a9f$var$CustomAddOnIcon = ()=>{
     return /*#__PURE__*/ (0, jsx_runtime.jsxs)("svg", {
         width: "20px",
@@ -158129,6 +158188,7 @@ const $52be5db9307c4332$var$CustomAddOns = {
     // we need observer to update component automatically on any store changes
     Panel: (0, es.observer)(({ store: store })=>{
         const dispatch = (0, useDispatch)();
+        const googleStreetViewSrc = ((0, $717432aee8737b76$export$d97320b3491da14)() ? (0, $7ad22e5ca6c288ca$export$31ebffddc71c8253) : (0, $7ad22e5ca6c288ca$export$79361813a10e9e28)) + (0, $7ad22e5ca6c288ca$export$75535718f1551e4f);
         const handleAddElementOnScreen = (event, value, type)=>{
             event.preventDefault();
             const currentPage = store.activePage.toJSON();
@@ -158139,7 +158199,7 @@ const $52be5db9307c4332$var$CustomAddOns = {
             if (type === "gsv") store.activePage?.addElement({
                 id: `gsv-image_${store.activePage.id}`,
                 type: "image",
-                src: (0, $7ad22e5ca6c288ca$export$75535718f1551e4f),
+                src: googleStreetViewSrc,
                 width: 287,
                 height: 188,
                 contentEditable: false,
@@ -158231,7 +158291,6 @@ const $d303f0b433a1814c$var$SidePanel = (props)=>{
                         Panel: (panelProps)=>/*#__PURE__*/ (0, jsx_runtime.jsx)((0, $e8f6665471b594e0$export$2e2bcd8739ae039).Panel, {
                                 ...panelProps,
                                 platformName: props.platformName,
-                                defaultCategory: props.defaultCategory,
                                 onGetTemplates: props.onGetTemplates,
                                 onGetOneTemplate: props.onGetOneTemplate,
                                 selectedSection: props.selectedSection
@@ -158243,7 +158302,8 @@ const $d303f0b433a1814c$var$SidePanel = (props)=>{
                     ...(0, $d0a2370b36372b2d$export$2e2bcd8739ae039),
                     Panel: (panelProps)=>/*#__PURE__*/ (0, jsx_runtime.jsx)((0, $d0a2370b36372b2d$export$2e2bcd8739ae039).Panel, {
                             ...panelProps,
-                            onGetCustomFields: props.onGetCustomFields
+                            onGetCustomFields: props.onGetCustomFields,
+                            allowSenderFields: props.allowSenderFields
                         })
                 },
                 ...props.currentTemplateType !== "Real Penned Letter" ? [
@@ -158267,7 +158327,7 @@ var $d303f0b433a1814c$export$2e2bcd8739ae039 = $d303f0b433a1814c$var$SidePanel;
 
 
 (0, polotno_config/* setUploadFunc */.Ut)((0, $dbaee5ca78364d67$export$a5575dbeeffdad98));
-const $6248df0c26b0b2d9$var$TemplateBuilder = ({ store: store, onReturnAndNavigate: onReturnAndNavigate, platformName: platformName, defaultCategory: defaultCategory, createTemplateRoute: createTemplateRoute, olcTemplate: olcTemplate, onGetOneTemplate: onGetOneTemplate, onGetCustomFields: onGetCustomFields, onGetTemplates: onGetTemplates, onSubmit: onSubmit })=>{
+const $6248df0c26b0b2d9$var$TemplateBuilder = ({ store: store, onReturnAndNavigate: onReturnAndNavigate, platformName: platformName, createTemplateRoute: createTemplateRoute, olcTemplate: olcTemplate, allowSenderFields: allowSenderFields, onGetOneTemplate: onGetOneTemplate, onGetCustomFields: onGetCustomFields, onGetTemplates: onGetTemplates, onSubmit: onSubmit })=>{
     const [isStoreUpdated, setIsStoreUpdated] = (0, react.useState)(false);
     const [switchTabCount, setSwitchTabCount] = (0, react.useState)(1);
     const [selectedSection, setSelectedSection] = (0, react.useState)("text");
@@ -158483,7 +158543,7 @@ const $6248df0c26b0b2d9$var$TemplateBuilder = ({ store: store, onReturnAndNaviga
                                     store: store,
                                     currentTemplateType: currentTemplateType,
                                     platformName: platformName,
-                                    defaultCategory: defaultCategory,
+                                    allowSenderFields: allowSenderFields,
                                     onGetTemplates: onGetTemplates,
                                     onGetOneTemplate: onGetOneTemplate,
                                     onGetCustomFields: onGetCustomFields,
@@ -158532,7 +158592,7 @@ const $edeafd00018ca857$var$initializeStore = (secretKey)=>{
         showCredit: false
     });
 };
-const $edeafd00018ca857$var$App = ({ secretKey: secretKey, onReturnAndNavigate: onReturnAndNavigate, platformName: platformName, defaultCategory: defaultCategory, createTemplateRoute: createTemplateRoute, templateBuilderRoute: templateBuilderRoute, styles: styles, olcTemplate: olcTemplate, onGetOneTemplate: onGetOneTemplate, onGetCustomFields: onGetCustomFields, onGetTemplates: onGetTemplates, onSubmit: onSubmit })=>{
+const $edeafd00018ca857$var$App = ({ secretKey: secretKey, platformName: platformName, createTemplateRoute: createTemplateRoute, templateBuilderRoute: templateBuilderRoute, olcTemplate: olcTemplate, allowSenderFields: allowSenderFields, styles: styles, onReturnAndNavigate: onReturnAndNavigate, onGetOneTemplate: onGetOneTemplate, onGetCustomFields: onGetCustomFields, onGetTemplates: onGetTemplates, onSubmit: onSubmit })=>{
     const [store, setStore] = (0, react.useState)($edeafd00018ca857$var$initializeStore(secretKey));
     const currentPath = window?.location?.pathname;
     (0, react.useEffect)(()=>{
@@ -158557,9 +158617,9 @@ const $edeafd00018ca857$var$App = ({ secretKey: secretKey, onReturnAndNavigate:
                     /*#__PURE__*/ (0, jsx_runtime.jsx)((0, Route), {
                         path: createTemplateRoute || "/create-template",
                         element: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $dd071d7635be500b$export$2e2bcd8739ae039), {
-                            onReturnAndNavigate: onReturnAndNavigate,
                             createTemplateRoute: createTemplateRoute,
-                            templateBuilderRoute: templateBuilderRoute
+                            templateBuilderRoute: templateBuilderRoute,
+                            onReturnAndNavigate: onReturnAndNavigate
                         })
                     }),
                     /*#__PURE__*/ (0, jsx_runtime.jsx)((0, Route), {
@@ -158568,9 +158628,9 @@ const $edeafd00018ca857$var$App = ({ secretKey: secretKey, onReturnAndNavigate:
                             store: store,
                             olcTemplate: olcTemplate,
                             platformName: platformName,
-                            defaultCategory: defaultCategory,
-                            onReturnAndNavigate: onReturnAndNavigate,
+                            allowSenderFields: allowSenderFields,
                             createTemplateRoute: createTemplateRoute,
+                            onReturnAndNavigate: onReturnAndNavigate,
                             onGetOneTemplate: onGetOneTemplate,
                             onGetTemplates: onGetTemplates,
                             onGetCustomFields: onGetCustomFields,
@@ -158591,14 +158651,12 @@ var $edeafd00018ca857$export$2e2bcd8739ae039 = $edeafd00018ca857$var$App;
 
 
 
-const $24075a5d702d64b3$var$TemplateBuilder = ({ container: container, secretKey: secretKey, basicAuthUsername: basicAuthUsername, basicAuthPassword: basicAuthPassword, platformName: platformName, createTemplateRoute: createTemplateRoute, templateBuilderRoute: templateBuilderRoute, olcTemplate: olcTemplate, defaultCategory: defaultCategory, sandbox: sandbox, onReturnAndNavigate: onReturnAndNavigate, onGetOneTemplate: onGetOneTemplate, onGetTemplates: onGetTemplates, onGetCustomFields: onGetCustomFields, onSubmit: onSubmit, styles: styles })=>{
+const $24075a5d702d64b3$var$TemplateBuilder = ({ container: container, secretKey: secretKey, publicApiKey: publicApiKey, platformName: platformName, createTemplateRoute: createTemplateRoute, templateBuilderRoute: templateBuilderRoute, olcTemplate: olcTemplate, sandbox: sandbox, allowSenderFields: allowSenderFields, onReturnAndNavigate: onReturnAndNavigate, onGetOneTemplate: onGetOneTemplate, onGetTemplates: onGetTemplates, onGetCustomFields: onGetCustomFields, onSubmit: onSubmit, styles: styles })=>{
     if (!container) throw new Error("Root element not found");
     if (!secretKey) throw new Error("secretKey not found");
-    if (!basicAuthUsername) throw new Error("basicAuthUsername not found");
-    if (!basicAuthPassword) throw new Error("basicAuthPassword not found");
+    if (!publicApiKey) throw new Error("publicApiKey not found");
     if (sandbox) (0, $717432aee8737b76$export$ba225133fb4a45c3)(sandbox);
-    (0, $717432aee8737b76$export$9d2510767fe266f9)(basicAuthUsername);
-    (0, $717432aee8737b76$export$4251d26568059eef)(basicAuthPassword);
+    (0, $717432aee8737b76$export$527e3e4d00b88329)(publicApiKey);
     const root = (0, client).createRoot(container);
     root.render(/*#__PURE__*/ (0, jsx_runtime.jsx)((0, jsx_runtime.Fragment), {
         children: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, Provider_default), {
@@ -158609,9 +158667,9 @@ const $24075a5d702d64b3$var$TemplateBuilder = ({ container: container, secretKey
                     styles: styles,
                     olcTemplate: olcTemplate,
                     platformName: platformName,
-                    defaultCategory: defaultCategory,
                     createTemplateRoute: createTemplateRoute,
                     templateBuilderRoute: templateBuilderRoute,
+                    allowSenderFields: allowSenderFields,
                     onReturnAndNavigate: onReturnAndNavigate,
                     onGetOneTemplate: onGetOneTemplate,
                     onGetTemplates: onGetTemplates,
@@ -158624,7 +158682,7 @@ const $24075a5d702d64b3$var$TemplateBuilder = ({ container: container, secretKey
     //@ts-ignore
     return {
         destroy () {
-            console.log("react destroy");
+            console.log("React destroyed");
             root.unmount();
         }
     };
@@ -158649,11 +158707,7 @@ var $24075a5d702d64b3$export$2e2bcd8739ae039 = $24075a5d702d64b3$var$TemplateBui
       type: String,
       required: true
     },
-    basicAuthUsername: {
-      type: String,
-      required: true
-    },
-    basicAuthPassword: {
+    publicApiKey: {
       type: String,
       required: true
     },
@@ -158661,10 +158715,6 @@ var $24075a5d702d64b3$export$2e2bcd8739ae039 = $24075a5d702d64b3$var$TemplateBui
       type: String,
       required: false
     },
-    onReturnAndNavigate: {
-      type: Function,
-      required: false
-    },
     createTemplateRoute: {
       type: String,
       required: false
@@ -158681,8 +158731,12 @@ var $24075a5d702d64b3$export$2e2bcd8739ae039 = $24075a5d702d64b3$var$TemplateBui
       type: Boolean,
       required: false
     },
-    defaultCategory: {
-      type: Array,
+    allowSenderFields: {
+      type: Boolean,
+      required: false
+    },
+    onReturnAndNavigate: {
+      type: Function,
       required: false
     },
     onGetOneTemplate: {
@@ -158726,15 +158780,14 @@ var $24075a5d702d64b3$export$2e2bcd8739ae039 = $24075a5d702d64b3$var$TemplateBui
       this.templateBuilderVueInstance = $24075a5d702d64b3$export$2e2bcd8739ae039({
         container: document.getElementById(props.container) || document.getElementById('builder'),
         secretKey: props.secretKey,
-        basicAuthUsername: props.basicAuthUsername,
-        basicAuthPassword: props.basicAuthPassword,
+        publicApiKey: props.publicApiKey,
         platformName: props.platformName,
         onReturnAndNavigate: props.onReturnAndNavigate,
         createTemplateRoute: props.createTemplateRoute,
         templateBuilderRoute: props.templateBuilderRoute,
         olcTemplate: props.olcTemplate,
         sandbox: props.sandbox,
-        defaultCategory: props.defaultCategory,
+        allowSenderFields: props.allowSenderFields,
         onGetOneTemplate: props.onGetOneTemplate,
         onGetTemplates: props.onGetTemplates,
         onGetCustomFields: props.onGetCustomFields,
@@ -158872,15 +158925,14 @@ var component = normalizeComponent(
 const src_TemplateBuilder = ({
   container,
   secretKey,
-  basicAuthUsername,
-  basicAuthPassword,
+  publicApiKey,
   platformName,
-  onReturnAndNavigate,
   createTemplateRoute,
   templateBuilderRoute,
   olcTemplate,
   sandbox,
-  defaultCategory,
+  allowSenderFields,
+  onReturnAndNavigate,
   onGetOneTemplate,
   onGetTemplates,
   onGetCustomFields,
@@ -158890,15 +158942,14 @@ const src_TemplateBuilder = ({
   const props = {
     container,
     secretKey,
-    basicAuthUsername,
-    basicAuthPassword,
+    publicApiKey,
     platformName,
-    onReturnAndNavigate,
     createTemplateRoute,
     templateBuilderRoute,
     olcTemplate,
     sandbox,
-    defaultCategory,
+    allowSenderFields,
+    onReturnAndNavigate,
     onGetOneTemplate,
     onGetTemplates,
     onGetCustomFields,