underpost 2.8.87 → 2.8.88

package/src/client/components/default/MenuDefault.js

@@ -17,10 +17,11 @@ import { LogOut } from '../core/LogOut.js';
 import { buildBadgeToolTipMenuOption, Modal, renderMenuLabel, renderViewTitle } from '../core/Modal.js';
 import { SignUp } from '../core/SignUp.js';
 import { Translate } from '../core/Translate.js';
-import { getProxyPath, htmls, s } from '../core/VanillaJs.js';
+import { htmls, s } from '../core/VanillaJs.js';
+import { getProxyPath } from '../core/Router.js';
 import { ElementsDefault } from './ElementsDefault.js';
 import Sortable from 'sortablejs';
-import { RouterDefault } from './RoutesDefault.js';
+import { RouterDefault, BannerAppTemplate } from './RoutesDefault.js';
 import { SettingsDefault } from './SettingsDefault.js';
 import { Badge } from '../core/Badge.js';
 import { Docs } from '../core/Docs.js';
@@ -28,6 +29,8 @@ import { Recover } from '../core/Recover.js';
 import { DefaultManagement } from '../../services/default/default.management.js';
 import { Page500 } from '../core/500.js';
 import { Page404 } from '../core/404.js';
+import { PanelForm } from '../core/PanelForm.js';
+import { Chat } from '../core/Chat.js';
 
 const MenuDefault = {
   Data: {},
@@ -35,7 +38,7 @@ const MenuDefault = {
     const id = getId(this.Data, 'menu-');
     this.Data[id] = {};
     const RouterInstance = RouterDefault();
-    const { BannerAppTemplate } = RouterInstance;
+
     const { barConfig } = await Themes[Css.currentTheme]();
     const heightTopBar = 50;
     const heightBottomBar = 50;
@@ -159,6 +162,34 @@ const MenuDefault = {
             handleContainerClass: 'handle-btn-container',
             tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('500')),
           })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-blog',
+            label: renderMenuLabel({
+              icon: html`<i class="fa-solid fa-file-invoice"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('blog')}</span>`,
+            }),
+            attrs: `data-id="blog"`,
+            tabHref: `${getProxyPath()}blog`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('blog')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-chat',
+            label: html`${renderMenuLabel({
+              icon: html`<i class="far fa-comments"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('chat')}</span>`,
+            })}
+            ${await Badge.Render({
+              id: 'main-btn-chat',
+              type: 'circle-red',
+              style: badgeNotificationMenuStyle,
+              classList: 'hide',
+            })}`,
+            attrs: `data-id="chat"`,
+            tabHref: `${getProxyPath()}chat`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('chat')),
+          })}
         </div>
       `,
       barConfig: newInstance(barConfig),
@@ -180,47 +211,7 @@ const MenuDefault = {
       RouterInstance,
       heightTopBar,
       heightBottomBar,
-      htmlMainBody: async () => {
-        setTimeout(() => {
-          EventsUI.onClick('.get-started-button', (e) => {
-            e.preventDefault();
-            location.href = `https://www.nexodev.org/docs/?cid=src`;
-          });
-        });
-        return html`
-          <div class="landing-container">
-            <div class="content-wrapper">
-              <h1 class="animated-text">
-                <span class="greeting">Hello, World!</span>
-                <span class="subtitle">Welcome to Our Platform</span>
-              </h1>
-
-              <div class="features">
-                <div class="feature-card">
-                  <i class="icon">🚀</i>
-                  <h3>Fast & Reliable</h3>
-                  <p>Lightning-fast performance with 99.9% uptime</p>
-                </div>
-                <div class="feature-card">
-                  <i class="icon">🎨</i>
-                  <h3>Beautiful UI</h3>
-                  <p>Modern and intuitive user interface</p>
-                </div>
-                <div class="feature-card">
-                  <i class="icon">⚡</i>
-                  <h3>Powerful Features</h3>
-                  <p>Everything you need in one place</p>
-                </div>
-              </div>
-
-              <button class="cta-button get-started-button">
-                Get Started
-                <span class="button-icon">→</span>
-              </button>
-            </div>
-          </div>
-        `;
-      },
+      htmlMainBody: options.htmlMainBody,
     });
 
     ThemeEvents['main-theme-handler'] = () => {
@@ -671,6 +662,68 @@ const MenuDefault = {
         observer: true,
       });
     });
+
+    EventsUI.onClick(`.main-btn-blog`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      const idModal = 'modal-blog';
+      const routeModal = 'blog';
+      const idEvent = `form-panel-${idModal}`;
+      await Modal.Render({
+        id: idModal,
+        route: routeModal,
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fa-solid fa-file-invoice"></i>`,
+          text: Translate.Render('blog'),
+        }),
+        observer: true,
+        html: async () => {
+          setTimeout(async () => {
+            await PanelForm.instance({
+              idPanel: 'default-blog',
+              heightTopBar,
+              heightBottomBar,
+              defaultUrlImage: `${getProxyPath()}android-chrome-96x96.png`,
+              Elements: ElementsDefault,
+              parentIdModal: idModal,
+              scrollClassContainer: `html-${idModal}`,
+              route: routeModal,
+            });
+          });
+        },
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+        barMode,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-chat`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-chat',
+        route: 'chat',
+        barConfig,
+        title: renderViewTitle({
+          icon: html` <i class="far fa-comments"></i>`,
+          text: Translate.Render('chat'),
+        }),
+        html: async () => await Chat.Render({ idModal: 'modal-chat' }),
+        handleType: 'bar',
+        maximize: true,
+        observer: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+        barMode,
+      });
+    });
   },
 };
 

package/src/client/components/default/RoutesDefault.js

@@ -1,6 +1,7 @@
 import { loggerFactory } from '../core/Logger.js';
 import { Modal } from '../core/Modal.js';
-import { getProxyPath, s } from '../core/VanillaJs.js';
+import { s } from '../core/VanillaJs.js';
+import { getProxyPath } from '../core/Router.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -26,6 +27,8 @@ const RoutesDefault = () => {
       render: () => s(`.main-btn-account`).click(),
     },
     '/docs': { title: 'docs', render: () => s(`.main-btn-docs`).click() },
+    '/chat': { title: 'docs', render: () => s(`.main-btn-chat`).click() },
+    '/blog': { title: 'docs', render: () => s(`.main-btn-blog`).click() },
     '/recover': { title: 'recover', render: () => s(`.main-btn-recover`).click() },
     '/default-management': {
       title: 'default-management',
@@ -39,7 +42,7 @@ const RoutesDefault = () => {
 window.Routes = RoutesDefault;
 
 const RouterDefault = () => {
-  return { Routes: RoutesDefault, BannerAppTemplate };
+  return { Routes: RoutesDefault };
 };
 
 export { RoutesDefault, RouterDefault, BannerAppTemplate };

package/src/client/services/core/core.service.js

@@ -1,6 +1,6 @@
 import { Auth } from '../../components/core/Auth.js';
 import { loggerFactory } from '../../components/core/Logger.js';
-import { getProxyPath } from '../../components/core/VanillaJs.js';
+import { getProxyPath } from '../../components/core/Router.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -33,7 +33,9 @@ const getWsBaseUrl = (options = { id: '', endpoint: '', wsBasePath: '' }) =>
   }${options?.endpoint ? options.endpoint : ''}${options?.id ? `/${options.id}` : ''}`;
 
 const headersFactory = (headerId = '') => {
-  const headers = { Authorization: Auth.getJWT() }; // , mode: 'no-cors'
+  const headers = {
+    Authorization: Auth.getJWT(),
+  };
   switch (headerId) {
     case 'file':
       return headers;
@@ -67,29 +69,12 @@ const CoreService = {
           return reject(error);
         }),
     ),
-  getRandomImage: (options = { category: ['city'], mimetype: 'image/jpg' }) => {
-    const src = `https://api.api-ninjas.com/v1/randomimage?category=${options.category[0]}`;
-    return new Promise((resolve) => {
-      fetch(src, {
-        headers: { 'X-Api-Key': 'FyITmcxRXkCaUehbX6K0/g==uxZcFKL0dZUUg48G', Accept: options.mimetype },
-      })
-        .then((res) => res.blob())
-        .then(async (blob) => {
-          return resolve({
-            file: {
-              mimetype: 'image/jpg',
-              name: 'image.jpg',
-            },
-            url: URL.createObjectURL(blob),
-          });
-        });
-    });
-  },
   post: (options = { id: '', body: {} }) =>
     new Promise((resolve, reject) =>
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'POST',
         headers: headersFactory(),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {
@@ -109,6 +94,7 @@ const CoreService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'PUT',
         headers: headersFactory(),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {
@@ -128,6 +114,7 @@ const CoreService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'GET',
         headers: headersFactory(),
+        credentials: 'include',
       })
         .then(async (res) => {
           return await res.json();
@@ -146,6 +133,7 @@ const CoreService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'DELETE',
         headers: headersFactory(),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {

package/src/client/services/default/default.management.js

@@ -7,6 +7,7 @@ import { loggerFactory } from '../../components/core/Logger.js';
 import { Modal } from '../../components/core/Modal.js';
 import { NotificationManager } from '../../components/core/NotificationManager.js';
 import { Translate } from '../../components/core/Translate.js';
+import { getQueryParams, RouterEvents, setQueryParams } from '../../components/core/Router.js';
 import { s } from '../../components/core/VanillaJs.js';
 import { DefaultService } from './default.service.js';
 
@@ -47,19 +48,48 @@ const columnDefFormatter = (obj, columnDefs, customFormat) => {
 
 const DefaultManagement = {
   Tokens: {},
+  loadTable: async function (id, options = { reload: true }) {
+    const { serviceId, columnDefs, customFormat } = this.Tokens[id];
+    const result = await this.Tokens[id].ServiceProvider.get({
+      page: this.Tokens[id].page,
+      limit: this.Tokens[id].limit,
+      id: this.Tokens[id].serviceOptions?.get?.id ?? undefined,
+    });
+    if (result.status === 'success') {
+      const { data, total, page, totalPages } = result.data;
+      this.Tokens[id].total = total;
+      this.Tokens[id].page = page;
+      this.Tokens[id].totalPages = totalPages;
+      const rowDataScope = data.map((row) => columnDefFormatter(row, columnDefs, customFormat));
+      if (options.reload) AgGrid.grids[this.Tokens[id].gridId].setGridOption('rowData', rowDataScope);
+      const paginationComp = s(`#ag-pagination-${this.Tokens[id].gridId}`);
+      paginationComp.setAttribute('current-page', this.Tokens[id].page);
+      paginationComp.setAttribute('total-pages', this.Tokens[id].totalPages);
+      paginationComp.setAttribute('total-items', this.Tokens[id].total);
+    }
+  },
   RenderTable: async function (options = DefaultOptions) {
     if (!options) options = DefaultOptions;
     const { serviceId, columnDefs, entity, defaultColKeyFocus, ServiceProvider, permissions } = options;
     logger.info('DefaultManagement RenderTable', options);
     const id = options?.idModal ? options.idModal : getId(this.Tokens, `${serviceId}-`);
     const gridId = `${serviceId}-grid-${id}`;
-    this.Tokens[id] = { gridId };
+    const queryParams = getQueryParams();
+    const page = parseInt(queryParams.page) || 1;
+    const limit = parseInt(queryParams.limit) || 10;
+    this.Tokens[id] = {
+      ...options,
+      gridId,
+      page,
+      limit,
+      total: 0,
+      totalPages: 1,
+    };
 
+    setQueryParams({ page, limit });
     setTimeout(async () => {
       // https://www.ag-grid.com/javascript-data-grid/data-update-transactions/
 
-      let rowDataScope = [];
-
       class RemoveActionGridRenderer {
         eGui;
         tokens;
@@ -110,6 +140,16 @@ const DefaultManagement = {
                 });
                 if (result.status === 'success') {
                   AgGrid.grids[gridId].applyTransaction({ remove: [params.data] });
+                  const token = DefaultManagement.Tokens[id];
+                  // if we are on the last page and we delete the last item, go to the previous page
+                  const newTotal = token.total - 1;
+                  const newTotalPages = Math.ceil(newTotal / token.limit);
+                  if (token.page > newTotalPages && newTotalPages > 0) {
+                    token.page = newTotalPages;
+                  }
+
+                  // reload the current page
+                  await DefaultManagement.loadTable(id, { reload: false });
                 }
               },
               { context: 'modal' },
@@ -142,13 +182,14 @@ const DefaultManagement = {
             : [],
         ),
       );
-      {
-        const result = await ServiceProvider.get();
-        if (result.status === 'success') {
-          rowDataScope = result.data.map((row) => columnDefFormatter(row, columnDefs, options.customFormat));
-          AgGrid.grids[gridId].setGridOption('rowData', rowDataScope);
-        }
-      }
+      DefaultManagement.loadTable(id);
+      // {
+      //   const result = await ServiceProvider.get();
+      //   if (result.status === 'success') {
+      //     rowDataScope = result.data.map((row) => columnDefFormatter(row, columnDefs, options.customFormat));
+      //     AgGrid.grids[gridId].setGridOption('rowData', rowDataScope);
+      //   }
+      // }
       s(`.management-table-btn-save-${id}`).onclick = () => {
         AgGrid.grids[gridId].stopEditing();
       };
@@ -168,9 +209,13 @@ const DefaultManagement = {
         // });
         if (result.status === 'success') {
           AgGrid.grids[gridId].applyTransaction({
-            add: [columnDefFormatter(result.data, columnDefs, options.customFormat)],
+            add: [columnDefFormatter(rowObj, columnDefs, options.customFormat)],
             addIndex: 0,
           });
+          // AgGrid.grids[gridId].applyTransaction({
+          //   add: [columnDefFormatter(result.data, columnDefs, options.customFormat)],
+          //   addIndex: 0,
+          // });
           // AgGrid.grids[gridId].applyColumnState({
           //   state: [
           //     // { colId: 'country', sort: 'asc', sortIndex: 1 },
@@ -244,9 +289,34 @@ const DefaultManagement = {
           status: result.status,
         });
         if (result.status === 'success') {
-          AgGrid.grids[gridId].setGridOption('rowData', []);
+          DefaultManagement.loadTable(id);
         }
       });
+      s(`#ag-pagination-${gridId}`).addEventListener('page-change', async (event) => {
+        const token = DefaultManagement.Tokens[id];
+        token.page = event.detail.page;
+        await DefaultManagement.loadTable(id);
+      });
+      s(`#ag-pagination-${gridId}`).addEventListener('limit-change', async (event) => {
+        const token = DefaultManagement.Tokens[id];
+        token.limit = event.detail.limit;
+        token.page = 1; // Reset to first page
+        await DefaultManagement.loadTable(id);
+      });
+      RouterEvents[id] = async (...args) => {
+        const queryParams = getQueryParams();
+        const page = parseInt(queryParams.page) || 1;
+        const limit = parseInt(queryParams.limit) || 10;
+        const token = DefaultManagement.Tokens[id];
+
+        // Check if the pagination state in the URL is different from the current state
+        if (token.page !== page || token.limit !== limit) {
+          token.page = page;
+          token.limit = limit;
+          // Reload the table with the new pagination state from the URL
+          await DefaultManagement.loadTable(id);
+        }
+      };
     }, 1);
     return html`<div class="fl">
         ${await BtnIcon.Render({
@@ -274,6 +344,7 @@ const DefaultManagement = {
       <div class="in section-mp">
         ${await AgGrid.Render({
           id: gridId,
+          usePagination: true,
           darkTheme,
           gridOptions: {
             defaultColDef: {
@@ -327,7 +398,32 @@ const DefaultManagement = {
                   status: result.status,
                 });
                 if (result.status === 'success') {
-                  event.data._id = result.data[entity] ? result.data[entity]._id : result.data._id;
+                  this.Tokens[id].page = 1;
+                  await DefaultManagement.loadTable(id);
+                  // const newItemId = result.data?.[entity]?._id || result.data?._id;
+                  // The `event.node.id` is the temporary ID assigned by AG Grid.
+                  // const rowNode = AgGrid.grids[gridId].getRowNode(event.node.id);
+                  setQueryParams({ page: 1, limit: this.Tokens[id].limit });
+
+                  let rowNode;
+                  AgGrid.grids[gridId].forEachLeafNode((_rowNode) => {
+                    if (_rowNode.data._id === result.data._id) {
+                      rowNode = _rowNode;
+                    }
+                  });
+                  if (rowNode) {
+                    const newRow = columnDefFormatter(result.data, columnDefs, options.customFormat);
+                    // Add a temporary flag to the new row data.
+                    newRow._new = true;
+                    // Update the row data with the data from the server, which includes the new permanent `_id`.
+                    rowNode.setData(newRow);
+                    // The `rowClassRules` will automatically apply the 'row-new-highlight' class.
+                    // Now, remove the flag after a delay to remove the highlight.
+                    // setTimeout(() => {
+                    //   delete newRow._new;
+                    //   rowNode.setData(newRow);
+                    // }, 2000);
+                  }
                 }
               } else {
                 const body = event.data ? event.data : {};
@@ -336,11 +432,12 @@ const DefaultManagement = {
                   html: result.status === 'error' ? result.message : `${Translate.Render('success-update-item')}`,
                   status: result.status,
                 });
-              }
-              if (result.status === 'success') {
-                AgGrid.grids[gridId].applyTransaction({
-                  update: [event.data],
-                });
+                if (result.status === 'success') {
+                  AgGrid.grids[gridId].applyTransaction({
+                    update: [event.data],
+                  });
+                  DefaultManagement.loadTable(id, { reload: false });
+                }
               }
             },
           },

package/src/client/services/default/default.service.js

@@ -14,6 +14,7 @@ const DefaultService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'POST',
         headers: headersFactory(),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {
@@ -33,6 +34,7 @@ const DefaultService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'PUT',
         headers: headersFactory(),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {
@@ -47,11 +49,16 @@ const DefaultService = {
           return reject(error);
         }),
     ),
-  get: (options = { id: '', body: {} }) =>
-    new Promise((resolve, reject) =>
-      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+  get: (options = { id: '', body: {}, page: 1, limit: 10 }) => {
+    const { id, page, limit } = options;
+    const url = new URL(getApiBaseUrl({ id, endpoint }));
+    url.searchParams.append('page', page);
+    url.searchParams.append('limit', limit);
+    return new Promise((resolve, reject) =>
+      fetch(url.toString(), {
         method: 'GET',
         headers: headersFactory(),
+        credentials: 'include',
       })
         .then(async (res) => {
           return await res.json();
@@ -64,12 +71,14 @@ const DefaultService = {
           logger.error(error);
           return reject(error);
         }),
-    ),
+    );
+  },
   delete: (options = { id: '', body: {} }) =>
     new Promise((resolve, reject) =>
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'DELETE',
         headers: headersFactory(),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {

package/src/client/services/document/document.service.js

@@ -0,0 +1,97 @@
+import { Auth } from '../../components/core/Auth.js';
+import { loggerFactory } from '../../components/core/Logger.js';
+import { getApiBaseUrl, headersFactory, payloadFactory } from '../core/core.service.js';
+
+const logger = loggerFactory(import.meta);
+
+logger.info('Load service');
+
+const endpoint = 'document';
+
+const DocumentService = {
+  post: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'POST',
+        headers: headersFactory(),
+        credentials: 'include',
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  get: (options = { id: '' }) =>
+    new Promise((resolve, reject) => {
+      const url = new URL(getApiBaseUrl({ id: options.id, endpoint }));
+      if (options.params) {
+        Object.keys(options.params).forEach((key) => url.searchParams.append(key, options.params[key]));
+      }
+      fetch(url, {
+        method: 'GET',
+        headers: headersFactory(),
+        credentials: 'include',
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        });
+    }),
+  delete: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'DELETE',
+        headers: headersFactory(),
+        credentials: 'include',
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  put: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'PUT',
+        headers: headersFactory(),
+        credentials: 'include',
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+};
+
+export { DocumentService };

package/src/client/services/file/file.service.js

@@ -33,6 +33,7 @@ const FileService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'GET',
         headers: headersFactory(),
+        credentials: 'include',
       })
         .then(async (res) => {
           return await res.json();
@@ -51,6 +52,7 @@ const FileService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'DELETE',
         headers: headersFactory(),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {

package/src/client/services/test/test.service.js

@@ -14,6 +14,7 @@ const TestService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'POST',
         headers: headersFactory(),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {
@@ -33,6 +34,7 @@ const TestService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'GET',
         headers: headersFactory(),
+        credentials: 'include',
       })
         .then(async (res) => {
           return await res.json();
@@ -51,6 +53,7 @@ const TestService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'DELETE',
         headers: headersFactory(),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {