@eventlook/sdk 1.4.6 → 1.4.20

package/dist/esm/utils/gtm.js.map

@@ -1 +1 @@
-{"version":3,"file":"gtm.js","sources":["../../../src/utils/gtm.ts"],"sourcesContent":["import { isBrowser } from '@utils/isBrowser';\nimport Cookies from 'js-cookie';\nimport {\n  IPageView,\n  IPageType,\n  ISearchShow,\n  IViewItem,\n  IEcommerce,\n  ICheckout,\n  IEcommerceCartItems,\n  IAddPaymentInfo,\n  IPurchase,\n  IEcommercePurchase,\n  IUserData,\n  IPixels,\n  IViewItemList,\n  ISelectItem,\n  IAddToCart,\n  IRemoveFromCart,\n} from '@utils/types/gtm.type';\nimport { UserIpCookie } from '@utils/data/cookie';\nimport { IUser } from '@utils/types/user.type';\n\nexport const getGtmPageView = (url: string, userData?: IUserData) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IPageView = {\n    event: 'page_view',\n    page: url,\n    ip: userIp || '',\n    user_data: userData || null,\n  };\n\n  return pageEvent;\n};\n\nexport const gtmPageView = (url: string, userData?: IUserData) => {\n  const pageEvent = getGtmPageView(url, userData);\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const gtmPageType = (type: string) => {\n  const cookie = Cookies.get('_ga');\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IPageType = {\n    visitorType: cookie ? 'returning' : 'new',\n    clientID: cookie,\n    pageType: type,\n    ip: userIp || '',\n  };\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const gtmSearchShow = () => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: ISearchShow = {\n    event: 'search',\n    eventAction: 'showSearchWindow',\n    ip: userIp || '',\n  };\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const gtmSearchInSearchWindow = () => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: ISearchShow = {\n    event: 'search',\n    eventAction: 'userSearchInSearchWindow',\n    ip: userIp || '',\n  };\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const gtmViewItem = (item: IEcommerce, pixels?: IPixels, userData?: IUserData) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IViewItem & IPixels = {\n    event: 'view_item',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ecommerce: item,\n    ip: userIp || '',\n    user_data: userData || null,\n  };\n  if (isBrowser() && window.dataLayer) setTimeout(() => window.dataLayer.push(pageEvent), 500);\n  return pageEvent;\n};\n\nexport const gtmViewItemList = () => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IViewItemList = {\n    event: 'view_item_list',\n    ip: userIp || '',\n  };\n  if (isBrowser() && window.dataLayer) setTimeout(() => window.dataLayer.push(pageEvent), 500);\n  return pageEvent;\n};\n\nexport const gtmSelectItem = () => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: ISelectItem = {\n    event: 'select_item',\n    ip: userIp || '',\n  };\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const getGtmBeginCheckout = (item: IEcommerce, pixels?: IPixels, userData?: IUserData) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: ICheckout & IPixels = {\n    event: 'begin_checkout',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ecommerce: item,\n    ip: userIp || '',\n    user_data: userData || null,\n  };\n\n  return pageEvent;\n};\n\nexport const gtmBeginCheckout = (item: IEcommerce, pixels?: IPixels, userData?: IUserData) => {\n  const pageEvent = getGtmBeginCheckout(item, pixels, userData);\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const getGtmViewCart = (item: IEcommerce, pixels?: IPixels) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: ICheckout & IPixels = {\n    event: 'view_cart',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ecommerce: item,\n    ip: userIp || '',\n  };\n\n  return pageEvent;\n};\n\nexport const gtmViewCart = (item: IEcommerce, pixels?: IPixels) => {\n  const pageEvent = getGtmViewCart(item, pixels);\n  if (isBrowser() && window.dataLayer) setTimeout(() => window.dataLayer.push(pageEvent), 500);\n  return pageEvent;\n};\n\nexport const gtmAddToCart = (pixels?: IPixels, userData?: IUserData) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IAddToCart & IPixels = {\n    event: 'add_to_cart',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ip: userIp || '',\n    user_data: userData || null,\n  };\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const gtmRemoveFromCart = (item: IEcommerceCartItems, pixels?: IPixels) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IRemoveFromCart & IPixels = {\n    event: 'remove_from_cart',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ecommerce: item,\n    ip: userIp || '',\n  };\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const getGtmAddPaymentInfo = (\n  item: IEcommerceCartItems,\n  pixels?: IPixels,\n  userData?: IUserData\n) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IAddPaymentInfo & IPixels = {\n    event: 'add_payment_info',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ecommerce: item,\n    ip: userIp || '',\n    user_data: userData || null,\n  };\n\n  return pageEvent;\n};\n\nexport const gtmAddPaymentInfo = (item: IEcommerceCartItems, pixels?: IPixels) => {\n  const pageEvent = getGtmAddPaymentInfo(item, pixels);\n  if (isBrowser() && window.dataLayer) setTimeout(() => window.dataLayer.push(pageEvent), 500);\n  return pageEvent;\n};\n\nexport const getGtmPurchase = (\n  item: IEcommercePurchase | null,\n  pixels?: IPixels,\n  userData?: IUserData\n) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IPurchase & IPixels = {\n    event: 'purchase',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ecommerce: item,\n    user_data: userData || null,\n    ip: userIp || '',\n  };\n\n  return pageEvent;\n};\n\nexport const gtmPurchase = (\n  item: IEcommercePurchase | null,\n  pixels?: IPixels,\n  userData?: IUserData\n) => {\n  const pageEvent = getGtmPurchase(item, pixels, userData);\n  if (isBrowser() && window.dataLayer) setTimeout(() => window.dataLayer.push(pageEvent), 500);\n  return pageEvent;\n};\n\nexport const mapUserToUserData = (user: IUser) => ({\n  em: user.email,\n  ph: user.phone,\n  ln: user.lastName,\n  fn: user.firstName,\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"gtm.js","sources":["../../../src/utils/gtm.ts"],"sourcesContent":["import { isBrowser } from '@utils/isBrowser';\nimport Cookies from 'js-cookie';\nimport {\n  IPageView,\n  IPageType,\n  ISearchShow,\n  IViewItem,\n  IEcommerce,\n  ICheckout,\n  IEcommerceCartItems,\n  IAddPaymentInfo,\n  IPurchase,\n  IEcommercePurchase,\n  IUserData,\n  IPixels,\n  IViewItemList,\n  ISelectItem,\n  IAddToCart,\n  IRemoveFromCart,\n  IPurchasePaid,\n} from '@utils/types/gtm.type';\nimport { UserIpCookie } from '@utils/data/cookie';\nimport { IUser } from '@utils/types/user.type';\n\nexport const getGtmPageView = (url: string, userData?: IUserData) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IPageView = {\n    event: 'page_view',\n    page: url,\n    ip: userIp || '',\n    user_data: userData || null,\n  };\n\n  return pageEvent;\n};\n\nexport const gtmPageView = (url: string, userData?: IUserData) => {\n  const pageEvent = getGtmPageView(url, userData);\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const gtmPageType = (type: string) => {\n  const cookie = Cookies.get('_ga');\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IPageType = {\n    visitorType: cookie ? 'returning' : 'new',\n    clientID: cookie,\n    pageType: type,\n    ip: userIp || '',\n  };\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const gtmSearchShow = () => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: ISearchShow = {\n    event: 'search',\n    eventAction: 'showSearchWindow',\n    ip: userIp || '',\n  };\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const gtmSearchInSearchWindow = () => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: ISearchShow = {\n    event: 'search',\n    eventAction: 'userSearchInSearchWindow',\n    ip: userIp || '',\n  };\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const gtmViewItem = (item: IEcommerce, pixels?: IPixels, userData?: IUserData) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IViewItem & IPixels = {\n    event: 'view_item',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ecommerce: item,\n    ip: userIp || '',\n    user_data: userData || null,\n  };\n  if (isBrowser() && window.dataLayer) setTimeout(() => window.dataLayer.push(pageEvent), 500);\n  return pageEvent;\n};\n\nexport const gtmViewItemList = () => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IViewItemList = {\n    event: 'view_item_list',\n    ip: userIp || '',\n  };\n  if (isBrowser() && window.dataLayer) setTimeout(() => window.dataLayer.push(pageEvent), 500);\n  return pageEvent;\n};\n\nexport const gtmSelectItem = () => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: ISelectItem = {\n    event: 'select_item',\n    ip: userIp || '',\n  };\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const getGtmBeginCheckout = (item: IEcommerce, pixels?: IPixels, userData?: IUserData) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: ICheckout & IPixels = {\n    event: 'begin_checkout',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ecommerce: item,\n    ip: userIp || '',\n    user_data: userData || null,\n  };\n\n  return pageEvent;\n};\n\nexport const gtmBeginCheckout = (item: IEcommerce, pixels?: IPixels, userData?: IUserData) => {\n  const pageEvent = getGtmBeginCheckout(item, pixels, userData);\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const getGtmViewCart = (item: IEcommerce, pixels?: IPixels) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: ICheckout & IPixels = {\n    event: 'view_cart',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ecommerce: item,\n    ip: userIp || '',\n  };\n\n  return pageEvent;\n};\n\nexport const gtmViewCart = (item: IEcommerce, pixels?: IPixels) => {\n  const pageEvent = getGtmViewCart(item, pixels);\n  if (isBrowser() && window.dataLayer) setTimeout(() => window.dataLayer.push(pageEvent), 500);\n  return pageEvent;\n};\n\nexport const gtmAddToCart = (pixels?: IPixels, userData?: IUserData) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IAddToCart & IPixels = {\n    event: 'add_to_cart',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ip: userIp || '',\n    user_data: userData || null,\n  };\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const gtmRemoveFromCart = (item: IEcommerceCartItems, pixels?: IPixels) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IRemoveFromCart & IPixels = {\n    event: 'remove_from_cart',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ecommerce: item,\n    ip: userIp || '',\n  };\n  if (isBrowser() && window.dataLayer) window.dataLayer.push(pageEvent);\n  return pageEvent;\n};\n\nexport const getGtmAddPaymentInfo = (\n  item: IEcommerceCartItems,\n  pixels?: IPixels,\n  userData?: IUserData\n) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IAddPaymentInfo & IPixels = {\n    event: 'add_payment_info',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ecommerce: item,\n    ip: userIp || '',\n    user_data: userData || null,\n  };\n\n  return pageEvent;\n};\n\nexport const gtmAddPaymentInfo = (item: IEcommerceCartItems, pixels?: IPixels) => {\n  const pageEvent = getGtmAddPaymentInfo(item, pixels);\n  if (isBrowser() && window.dataLayer) setTimeout(() => window.dataLayer.push(pageEvent), 500);\n  return pageEvent;\n};\n\nexport const getGtmPurchase = (\n  item: IEcommercePurchase | null,\n  pixels?: IPixels,\n  userData?: IUserData\n) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IPurchase & IPixels = {\n    event: 'purchase',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ecommerce: item,\n    user_data: userData || null,\n    ip: userIp || '',\n  };\n\n  return pageEvent;\n};\n\nexport const gtmPurchase = (\n  item: IEcommercePurchase | null,\n  pixels?: IPixels,\n  userData?: IUserData\n) => {\n  const pageEvent = getGtmPurchase(item, pixels, userData);\n  if (isBrowser() && window.dataLayer) setTimeout(() => window.dataLayer.push(pageEvent), 500);\n  return pageEvent;\n};\n\nexport const getGtmPurchasePaid = (\n  item: IEcommercePurchase | null,\n  pixels?: IPixels,\n  userData?: IUserData\n) => {\n  const userIp = Cookies.get(UserIpCookie);\n  const pageEvent: IPurchasePaid & IPixels = {\n    event: 'purchase_paid',\n    fb_pixel_id: pixels?.fb_pixel_id || '',\n    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',\n    ecommerce: item,\n    user_data: userData || null,\n    ip: userIp || '',\n  };\n\n  return pageEvent;\n};\n\nexport const gtmPurchasePaid = (\n  item: IEcommercePurchase | null,\n  pixels?: IPixels,\n  userData?: IUserData\n) => {\n  const pageEvent = getGtmPurchasePaid(item, pixels, userData);\n  if (isBrowser() && window.dataLayer) setTimeout(() => window.dataLayer.push(pageEvent), 500);\n  return pageEvent;\n};\n\nexport const mapUserToUserData = (user: IUser) => ({\n  em: user.email,\n  ph: user.phone,\n  ln: user.lastName,\n  fn: user.firstName,\n});\n"],"names":[],"mappings":";;;;MAwBa,cAAc,GAAG,CAAC,GAAW,EAAE,QAAoB,KAAI;IAClE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC;AACxC,IAAA,MAAM,SAAS,GAAc;AAC3B,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,IAAI,EAAE,GAAG;QACT,EAAE,EAAE,MAAM,IAAI,EAAE;QAChB,SAAS,EAAE,QAAQ,IAAI,IAAI;KAC5B;AAED,IAAA,OAAO,SAAS;AAClB;AA6EO,MAAM,mBAAmB,GAAG,CAAC,IAAgB,EAAE,MAAgB,EAAE,QAAoB,KAAI;IAC9F,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC;AACxC,IAAA,MAAM,SAAS,GAAwB;AACrC,QAAA,KAAK,EAAE,gBAAgB;AACvB,QAAA,WAAW,EAAE,MAAM,EAAE,WAAW,IAAI,EAAE;AACtC,QAAA,eAAe,EAAE,MAAM,EAAE,eAAe,IAAI,EAAE;AAC9C,QAAA,SAAS,EAAE,IAAI;QACf,EAAE,EAAE,MAAM,IAAI,EAAE;QAChB,SAAS,EAAE,QAAQ,IAAI,IAAI;KAC5B;AAED,IAAA,OAAO,SAAS;AAClB;AAEO,MAAM,gBAAgB,GAAG,CAAC,IAAgB,EAAE,MAAgB,EAAE,QAAoB,KAAI;IAC3F,MAAM,SAAS,GAAG,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC;AAC7D,IAAA,IAAI,SAAS,EAAE,IAAI,MAAM,CAAC,SAAS;AAAE,QAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;AACrE,IAAA,OAAO,SAAS;AAClB;MAEa,cAAc,GAAG,CAAC,IAAgB,EAAE,MAAgB,KAAI;IACnE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC;AACxC,IAAA,MAAM,SAAS,GAAwB;AACrC,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,WAAW,EAAE,MAAM,EAAE,WAAW,IAAI,EAAE;AACtC,QAAA,eAAe,EAAE,MAAM,EAAE,eAAe,IAAI,EAAE;AAC9C,QAAA,SAAS,EAAE,IAAI;QACf,EAAE,EAAE,MAAM,IAAI,EAAE;KACjB;AAED,IAAA,OAAO,SAAS;AAClB;MAEa,WAAW,GAAG,CAAC,IAAgB,EAAE,MAAgB,KAAI;IAChE,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,EAAE,MAAM,CAAC;AAC9C,IAAA,IAAI,SAAS,EAAE,IAAI,MAAM,CAAC,SAAS;AAAE,QAAA,UAAU,CAAC,MAAM,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,GAAG,CAAC;AAC5F,IAAA,OAAO,SAAS;AAClB;AA4BO,MAAM,oBAAoB,GAAG,CAClC,IAAyB,EACzB,MAAgB,EAChB,QAAoB,KAClB;IACF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC;AACxC,IAAA,MAAM,SAAS,GAA8B;AAC3C,QAAA,KAAK,EAAE,kBAAkB;AACzB,QAAA,WAAW,EAAE,MAAM,EAAE,WAAW,IAAI,EAAE;AACtC,QAAA,eAAe,EAAE,MAAM,EAAE,eAAe,IAAI,EAAE;AAC9C,QAAA,SAAS,EAAE,IAAI;QACf,EAAE,EAAE,MAAM,IAAI,EAAE;QAChB,SAAS,EAAE,QAAQ,IAAI,IAAI;KAC5B;AAED,IAAA,OAAO,SAAS;AAClB;MAEa,iBAAiB,GAAG,CAAC,IAAyB,EAAE,MAAgB,KAAI;IAC/E,MAAM,SAAS,GAAG,oBAAoB,CAAC,IAAI,EAAE,MAAM,CAAC;AACpD,IAAA,IAAI,SAAS,EAAE,IAAI,MAAM,CAAC,SAAS;AAAE,QAAA,UAAU,CAAC,MAAM,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,GAAG,CAAC;AAC5F,IAAA,OAAO,SAAS;AAClB;AAEO,MAAM,cAAc,GAAG,CAC5B,IAA+B,EAC/B,MAAgB,EAChB,QAAoB,KAClB;IACF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC;AACxC,IAAA,MAAM,SAAS,GAAwB;AACrC,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,WAAW,EAAE,MAAM,EAAE,WAAW,IAAI,EAAE;AACtC,QAAA,eAAe,EAAE,MAAM,EAAE,eAAe,IAAI,EAAE;AAC9C,QAAA,SAAS,EAAE,IAAI;QACf,SAAS,EAAE,QAAQ,IAAI,IAAI;QAC3B,EAAE,EAAE,MAAM,IAAI,EAAE;KACjB;AAED,IAAA,OAAO,SAAS;AAClB;AAEO,MAAM,WAAW,GAAG,CACzB,IAA+B,EAC/B,MAAgB,EAChB,QAAoB,KAClB;IACF,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC;AACxD,IAAA,IAAI,SAAS,EAAE,IAAI,MAAM,CAAC,SAAS;AAAE,QAAA,UAAU,CAAC,MAAM,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,GAAG,CAAC;AAC5F,IAAA,OAAO,SAAS;AAClB;AAEO,MAAM,kBAAkB,GAAG,CAChC,IAA+B,EAC/B,MAAgB,EAChB,QAAoB,KAClB;IACF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC;AACxC,IAAA,MAAM,SAAS,GAA4B;AACzC,QAAA,KAAK,EAAE,eAAe;AACtB,QAAA,WAAW,EAAE,MAAM,EAAE,WAAW,IAAI,EAAE;AACtC,QAAA,eAAe,EAAE,MAAM,EAAE,eAAe,IAAI,EAAE;AAC9C,QAAA,SAAS,EAAE,IAAI;QACf,SAAS,EAAE,QAAQ,IAAI,IAAI;QAC3B,EAAE,EAAE,MAAM,IAAI,EAAE;KACjB;AAED,IAAA,OAAO,SAAS;AAClB;AAEO,MAAM,eAAe,GAAG,CAC7B,IAA+B,EAC/B,MAAgB,EAChB,QAAoB,KAClB;IACF,MAAM,SAAS,GAAG,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC;AAC5D,IAAA,IAAI,SAAS,EAAE,IAAI,MAAM,CAAC,SAAS;AAAE,QAAA,UAAU,CAAC,MAAM,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,GAAG,CAAC;AAC5F,IAAA,OAAO,SAAS;AAClB;MAEa,iBAAiB,GAAG,CAAC,IAAW,MAAM;IACjD,EAAE,EAAE,IAAI,CAAC,KAAK;IACd,EAAE,EAAE,IAAI,CAAC,KAAK;IACd,EAAE,EAAE,IAAI,CAAC,QAAQ;IACjB,EAAE,EAAE,IAAI,CAAC,SAAS;AACnB,CAAA;;;;"}

package/dist/types/context/GlobalContext.d.ts

@@ -10,6 +10,7 @@ type Props = {
     showSnackbar?: IGlobalContext['showSnackbar'];
     options?: IGlobalContext['options'];
     content?: IGlobalContext['content'];
+    seatingIframeUrl?: IGlobalContext['seatingIframeUrl'];
 };
-declare function GlobalProvider({ children, lang, showSnackbar, callbacks, links, options, content, }: Props): React.JSX.Element;
+declare function GlobalProvider({ children, lang, showSnackbar, callbacks, links, options, content, seatingIframeUrl, }: Props): React.JSX.Element;
 export { GlobalProvider, GlobalContext };

package/dist/types/form/PaymentSuccess.d.ts

@@ -1,7 +1,9 @@
 import React, { Dispatch, SetStateAction } from 'react';
+import { IPixels } from '@utils/types/gtm.type.ts';
 interface Props {
     setIsPaying: Dispatch<SetStateAction<boolean>>;
     isIframe?: boolean;
+    pixels?: IPixels;
 }
 declare const PaymentSuccess: React.FC<Props>;
 export default PaymentSuccess;

package/dist/types/form/TicketSelectionMap.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IEvent } from '@utils/types/event.type.ts';
+interface Props {
+    event: IEvent;
+}
+declare const TicketSelectionMap: React.FC<Props>;
+export default TicketSelectionMap;

package/dist/types/form/index.d.ts

@@ -11,6 +11,7 @@ import { IUser } from '@utils/types/user.type';
 export interface OrderFormProps {
     eventSlug: string;
     apiUrl: string;
+    seatingIframeUrl?: string;
     callbacks: IGlobalContext['callbacks'];
     links: IGlobalContext['links'];
     lang?: Languages;

package/dist/types/locales/cs.d.ts

@@ -48,6 +48,7 @@ declare const cs: {
             original_price: string;
             ticket: string;
             category: string;
+            open_map: string;
         };
         validation: {
             required: string;

package/dist/types/locales/en.d.ts

@@ -48,6 +48,7 @@ declare const en: {
             original_price: string;
             ticket: string;
             category: string;
+            open_map: string;
         };
         validation: {
             required: string;

package/dist/types/locales/es.d.ts

@@ -48,6 +48,7 @@ declare const es: {
             original_price: string;
             ticket: string;
             category: string;
+            open_map: string;
         };
         validation: {
             required: string;

package/dist/types/locales/pl.d.ts

@@ -48,6 +48,7 @@ declare const pl: {
             original_price: string;
             ticket: string;
             category: string;
+            open_map: string;
         };
         validation: {
             required: string;

package/dist/types/locales/sk.d.ts

@@ -48,6 +48,7 @@ declare const sk: {
             original_price: string;
             ticket: string;
             category: string;
+            open_map: string;
         };
         validation: {
             required: string;

package/dist/types/locales/uk.d.ts

@@ -48,6 +48,7 @@ declare const uk: {
             original_price: string;
             ticket: string;
             category: string;
+            open_map: string;
         };
         validation: {
             required: string;

package/dist/types/utils/gtm.d.ts

@@ -1,4 +1,4 @@
-import { IPageView, IPageType, ISearchShow, IViewItem, IEcommerce, ICheckout, IEcommerceCartItems, IAddPaymentInfo, IPurchase, IEcommercePurchase, IUserData, IPixels, IViewItemList, ISelectItem, IAddToCart, IRemoveFromCart } from '@utils/types/gtm.type';
+import { IPageView, IPageType, ISearchShow, IViewItem, IEcommerce, ICheckout, IEcommerceCartItems, IAddPaymentInfo, IPurchase, IEcommercePurchase, IUserData, IPixels, IViewItemList, ISelectItem, IAddToCart, IRemoveFromCart, IPurchasePaid } from '@utils/types/gtm.type';
 import { IUser } from '@utils/types/user.type';
 export declare const getGtmPageView: (url: string, userData?: IUserData) => IPageView;
 export declare const gtmPageView: (url: string, userData?: IUserData) => IPageView;
@@ -18,6 +18,8 @@ export declare const getGtmAddPaymentInfo: (item: IEcommerceCartItems, pixels?:
 export declare const gtmAddPaymentInfo: (item: IEcommerceCartItems, pixels?: IPixels) => IAddPaymentInfo & IPixels;
 export declare const getGtmPurchase: (item: IEcommercePurchase | null, pixels?: IPixels, userData?: IUserData) => IPurchase & IPixels;
 export declare const gtmPurchase: (item: IEcommercePurchase | null, pixels?: IPixels, userData?: IUserData) => IPurchase & IPixels;
+export declare const getGtmPurchasePaid: (item: IEcommercePurchase | null, pixels?: IPixels, userData?: IUserData) => IPurchasePaid & IPixels;
+export declare const gtmPurchasePaid: (item: IEcommercePurchase | null, pixels?: IPixels, userData?: IUserData) => IPurchasePaid & IPixels;
 export declare const mapUserToUserData: (user: IUser) => {
     em: string;
     ph: string;

package/dist/types/utils/types/event.type.d.ts

@@ -50,6 +50,7 @@ export interface IEvent extends IBase {
     type: EventType;
     parents: IEvent[];
     children: IEvent[];
+    mapId: string | null;
 }
 export interface IEventCategory extends IBase {
     translation: {

package/dist/types/utils/types/global.type.d.ts

@@ -16,6 +16,7 @@ export interface IGlobalContext {
     options?: IGlobalContextOptions;
     user?: IUser;
     content?: IContent;
+    seatingIframeUrl?: string;
 }
 export interface IGlobalContextCallbacks {
     homepage: () => void;

package/dist/types/utils/types/gtm.type.d.ts

@@ -78,6 +78,11 @@ export interface IPurchase extends IBase {
     ecommerce: IEcommercePurchase | null;
     user_data: IUserData | null;
 }
+export interface IPurchasePaid extends IBase {
+    event: 'purchase_paid';
+    ecommerce: IEcommercePurchase | null;
+    user_data: IUserData | null;
+}
 export interface IPixels {
     fb_pixel_id?: number | string;
     tiktok_pixel_id?: number | string;

package/dist/types/utils/types/order.type.d.ts

@@ -38,6 +38,7 @@ export interface IOrderPaid {
     products: IPaidProduct[];
     extraFee: number;
     currency: Currencies;
+    promoCodes: IPromoCode[] | null;
 }
 export interface IAllowedPaymentMethod {
     enabledPaymentInstruments: IPaymentInstrument[];

package/dist/types/utils/types/ticket.type.d.ts

@@ -31,13 +31,25 @@ export interface ITicketFormTicket {
     products: IEventProductForm[];
     extraFields: IExtraFieldForm[][];
     eventTimeslotId?: number | null;
+    location?: ITicketLocation | null;
 }
+export interface ITicketLocation {
+    id: string;
+    type: string;
+    locationDescription?: {
+        type: BaseLocationDescriptionType | 'custom';
+        label: string;
+        value: string;
+    }[] | null;
+}
+type BaseLocationDescriptionType = 'seatNumber' | 'rowNumber' | 'sectionName';
+export type EventTicketsType = {
+    [eventId: string]: ITicketFormTicket[];
+};
 export interface ITicketForm {
     uuid?: string | null;
     eventId: number;
-    tickets: {
-        [eventId: string]: ITicketFormTicket[];
-    };
+    tickets: EventTicketsType;
     total: number;
     originalPrice: number;
     firstName: string;
@@ -92,3 +104,4 @@ export interface ICreateTicket {
     price: number;
     number: string;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventlook/sdk",
-  "version": "1.4.6",
+  "version": "1.4.20",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -15,9 +15,13 @@
   "scripts": {
     "build": "rollup -c && tsc -p tsconfig.build.json",
     "prepare": "yarn run build",
+    "push": "yalc push --force",
+    "push:initial": "yarn build && yalc push --force",
     "watch:rollup": "rollup -c -w",
-    "watch:push": "chokidar 'dist/**/*' -c 'yalc push --changed'",
-    "dev": "concurrently \"yarn watch:rollup\" \"yarn watch:push\"",
+    "watch:types": "tsc -p tsconfig.build.json --watch",
+    "watch:push": "chokidar 'dist/**/*' -c 'yalc push --changed --force'",
+    "dev": "concurrently --kill-others-on-fail --kill-others \"yarn watch:rollup\" \"yarn watch:types\" \"yarn watch:push\"",
+    "dev:simple": "concurrently --kill-others-on-fail \"yarn watch:rollup\" \"yarn watch:types\"",
     "publish": "npm publish",
     "lint:fix": "eslint --fix --ext .ts,.tsx .",
     "prettier": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
@@ -61,6 +65,7 @@
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^11.0.0",
+    "@seat-picker/seat-picker-sdk": "^1.0.5",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.20",
     "@types/numeral": "^2.0.5",

package/rollup.config.mjs

@@ -52,5 +52,19 @@ export default {
       },
     }),
   ],
-  external: ['react', 'react-dom', 'fs', 'path', 'http', 'https', 'stream', 'swr', 'mui-tel-input'],
+  external: [
+    'react',
+    'react-dom',
+    'fs',
+    'path',
+    'http',
+    'https',
+    'stream',
+    'swr',
+    'mui-tel-input',
+    '@seat-picker/seat-picker-sdk',
+    '@mui/material',
+    '@emotion/react',
+    '@emotion/styled',
+  ],
 };

package/src/context/GlobalContext.tsx

@@ -30,6 +30,7 @@ type Props = {
   showSnackbar?: IGlobalContext['showSnackbar'];
   options?: IGlobalContext['options'];
   content?: IGlobalContext['content'];
+  seatingIframeUrl?: IGlobalContext['seatingIframeUrl'];
 };
 
 function GlobalProvider({
@@ -40,6 +41,7 @@ function GlobalProvider({
   links,
   options,
   content,
+  seatingIframeUrl,
 }: Props) {
   const [global, setGlobal] = useState<IGlobalContext>({
     ...initialState,
@@ -49,6 +51,7 @@ function GlobalProvider({
     links,
     options,
     content,
+    seatingIframeUrl,
   });
 
   const handleSetGlobal = (value: Partial<IGlobalContext>) => {

package/src/form/PaymentSuccess.tsx

@@ -9,20 +9,23 @@ import { PropsWithChildren } from '@utils/types/global.type';
 import { IPaidTicket } from '@utils/types/ticket.type';
 import useResponsive from '@hooks/useResponsive';
 import { getPlaceAsString } from '@utils/place';
-import { fCurrency, fData } from '@utils/formatNumber';
+import { fCurrency } from '@utils/formatNumber';
 import { useTheme } from '@mui/material/styles';
 import { IPaidProduct } from '@utils/types/product.type';
 import dayjs from 'dayjs';
 import useGlobal from '@hooks/useGlobal';
 import { Trans } from '@components/Trans';
+import { getGtmPurchasePaid, gtmPurchasePaid, mapUserToUserData } from '@utils/gtm.ts';
+import { IPixels } from '@utils/types/gtm.type.ts';
 
 interface Props {
   setIsPaying: Dispatch<SetStateAction<boolean>>;
   isIframe?: boolean;
+  pixels?: IPixels;
 }
 
-const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe }) => {
-  const { showSnackbar, t, lang, callbacks, content } = useGlobal();
+const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe, pixels }) => {
+  const { showSnackbar, t, lang, callbacks, content, user } = useGlobal();
   const theme = useTheme();
   const defaultState = 'PROCESSING';
   const errorState = 'ERROR';
@@ -53,9 +56,49 @@ const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe }) => {
       setProducts(products);
       setState(data.state);
       setGwUrl(data.gwUrl);
+
+      const items = [
+        ...data.tickets.map((ticket) => ({
+          item_id: ticket.number,
+          item_name: `${ticket.eventName} - ${ticket.releaseCategoryName} - ${ticket.releaseName}`,
+          price: ticket.price,
+          quantity: 1,
+        })),
+      ];
+      if (data.extraFee) {
+        items.push({
+          item_id: 'service_fee',
+          item_name: `Service fee`,
+          price: data.extraFee,
+          quantity: 1,
+        });
+      }
+      const item = {
+        currency: data.currency,
+        value: data.totalPrice,
+        tax: 0,
+        payment_type: data.paymentType,
+        transaction_id: String(data.orderNumber),
+        coupon: data?.promoCodes?.map((p) => p.code) || [],
+        items,
+      };
+
       switch (data.state) {
         case GopayState.PAID:
           setTitle('event.tickets.payment_success.paid.title');
+          if (isIframe) {
+            setTimeout(() => {
+              parent.postMessage(
+                {
+                  type: 'eventlookFrameGtm',
+                  item: getGtmPurchasePaid(item, pixels),
+                },
+                '*'
+              );
+            }, 1000);
+          } else {
+            gtmPurchasePaid(item, pixels, user ? mapUserToUserData(user) : undefined);
+          }
           break;
         default:
           setTitle('event.tickets.payment_success.unpaid');

package/src/form/TicketForm.tsx

@@ -3,6 +3,7 @@ import PaymentSuccess from '@form/PaymentSuccess';
 import FormProvider, { RHFCheckbox } from '@components/hook-form';
 import {
   Box,
+  Button,
   Grid,
   Link,
   LinkProps,
@@ -55,6 +56,7 @@ import useGlobal from '@hooks/useGlobal';
 import { Trans } from '@components/Trans';
 import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global.ts';
 import ChildEventSection from './ChildEvents';
+import TicketSelectionMap from '@form/TicketSelectionMap.tsx';
 
 interface Props {
   event: IEvent;
@@ -71,7 +73,8 @@ const TicketForm: React.FC<Props> = ({
   isIframe,
   isInline,
 }) => {
-  const { t, setGlobal, callbacks, links, user, options, showSnackbar, content } = useGlobal();
+  const { t, setGlobal, callbacks, links, user, options, showSnackbar, content, seatingIframeUrl } =
+    useGlobal();
   const { transformErrors } = useErrors(t('event.tickets.error.order'));
   const { data: eventProducts, isLoading } = useActiveEventProducts(event.id);
   const [paymentRedirect, setPaymentRedirect] = useState<string | null>(null);
@@ -333,6 +336,8 @@ const TicketForm: React.FC<Props> = ({
                 itemName: item.itemName,
                 products: item.products,
                 extraFields: item.extraFields,
+                eventTimeslotId: item.eventTimeslotId,
+                location: item.location,
               }));
             return acc;
           },
@@ -473,7 +478,7 @@ const TicketForm: React.FC<Props> = ({
   return (
     <Box id={EVENTLOOK_ORDER_FORM_ID}>
       {hasGopayId ? (
-        <PaymentSuccess setIsPaying={setIsPaying} isIframe={isIframe} />
+        <PaymentSuccess setIsPaying={setIsPaying} isIframe={isIframe} pixels={pixels} />
       ) : isPaying ? (
         <PaymentPending />
       ) : paymentRedirect ? (
@@ -510,7 +515,9 @@ const TicketForm: React.FC<Props> = ({
                 <Step active>
                   <StepLabel>{t('event.tickets.stepper.1.title')}</StepLabel>
                   <StepContent>
-                    {event.hasMerchandise ? (
+                    {event.mapId && seatingIframeUrl ? (
+                      <TicketSelectionMap event={event} />
+                    ) : event.hasMerchandise ? (
                       <TicketWithMerchandiseSelection event={event} />
                     ) : (
                       <TicketSelection event={event} />

package/src/form/TicketSelection.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import {
   Box,
+  Button,
   Divider,
   Grid,
   IconButton,

package/src/form/TicketSelectionMap.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import useGlobal from '@hooks/useGlobal.ts';
+import { IEvent } from '@utils/types/event.type.ts';
+import { Button } from '@mui/material';
+import { iframe, TicketSelection } from '@seat-picker/seat-picker-sdk';
+import { useFormContext } from 'react-hook-form';
+import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type.ts';
+
+interface Props {
+  event: IEvent;
+}
+
+const TicketSelectionMap: React.FC<Props> = ({ event }) => {
+  const { t, seatingIframeUrl } = useGlobal();
+  const { setValue } = useFormContext<ITicketForm>();
+
+  const onSelect = (seats: TicketSelection) => {
+    const tickets: ITicketFormTicket[] = [];
+    for(const seat of seats) {
+      tickets.push({
+        releaseId: seat.ticket.id,
+        price: seat.ticket.price,
+        quantity: 1,
+        itemName: `${seat.ticket.releaseCategoryName} - ${seat.ticket.name}`,
+        products: [],
+        extraFields: [],
+        location: {
+          id: seat.locationId || '',
+          type: 'zone',
+          locationDescription: seat.locationTypeDescription,
+        }
+      })
+    }
+
+    setValue(`tickets.${event.id}`, tickets);
+  };
+
+  if (!seatingIframeUrl) return null;
+
+  return (
+    <Button
+      variant="contained"
+      onClick={() =>
+        iframe.openPicker({
+          eventId: String(event.id),
+          onSelect,
+          baseUrl: seatingIframeUrl,
+        })
+      }
+    >
+      {t('form.labels.open_map')}
+    </Button>
+  );
+};
+
+export default TicketSelectionMap;

package/src/form/index.tsx

@@ -27,6 +27,7 @@ import { csCZ, enUS, ukUA, esES, deDE, skSK } from '@mui/x-date-pickers/locales'
 export interface OrderFormProps {
   eventSlug: string;
   apiUrl: string;
+  seatingIframeUrl?: string;
   callbacks: IGlobalContext['callbacks'];
   links: IGlobalContext['links'];
   lang?: Languages;
@@ -42,6 +43,7 @@ export interface OrderFormProps {
 const ClientRender: React.FC<OrderFormProps> = ({
   eventSlug,
   apiUrl,
+  seatingIframeUrl,
   lang,
   slots,
   options,
@@ -100,6 +102,7 @@ const ClientRender: React.FC<OrderFormProps> = ({
         links={links}
         options={options}
         content={content}
+        seatingIframeUrl={seatingIframeUrl}
       >
         {!data || !!error ? (
           <TicketFormSkeleton />

package/src/locales/cs.tsx

@@ -49,6 +49,7 @@ const cs = {
       original_price: 'Původní cena',
       ticket: 'Vstupenka',
       category: 'Kategorie',
+      open_map: 'Otevřít mapu',
     },
     validation: {
       required: 'Toto pole je povinné.',

package/src/locales/en.tsx

@@ -49,6 +49,7 @@ const en = {
       original_price: 'Original price',
       ticket: 'Ticket',
       category: 'Category',
+      open_map: 'Open map',
     },
     validation: {
       required: 'This field is required.',

package/src/locales/es.tsx

@@ -49,6 +49,7 @@ const es = {
       original_price: 'Precio original',
       ticket: 'Entrada',
       category: 'Categoría',
+      open_map: 'Abrir mapa',
     },
     validation: {
       required: 'Este campo es obligatorio.',

package/src/locales/pl.tsx

@@ -49,6 +49,7 @@ const pl = {
       original_price: 'Cena oryginalna',
       ticket: 'Bilet',
       category: 'Kategoria',
+      open_map: 'Otwórz mapę',
     },
     validation: {
       required: 'To pole jest wymagane.',

package/src/locales/sk.tsx

@@ -49,6 +49,7 @@ const sk = {
       original_price: 'Pôvodná cena',
       ticket: 'Vstupenka',
       category: 'Kategória',
+      open_map: 'Otvoriť mapu',
     },
     validation: {
       required: 'Toto pole je povinné.',

package/src/locales/uk.tsx

@@ -49,6 +49,7 @@ const uk = {
       original_price: 'Оригінальна ціна',
       ticket: 'Квиток',
       category: 'Категорія',
+      open_map: 'Відкрити карту',
     },
     validation: {
       required: "Це поле обов'язкове.",

package/src/utils/gtm.ts

@@ -17,6 +17,7 @@ import {
   ISelectItem,
   IAddToCart,
   IRemoveFromCart,
+  IPurchasePaid,
 } from '@utils/types/gtm.type';
 import { UserIpCookie } from '@utils/data/cookie';
 import { IUser } from '@utils/types/user.type';
@@ -225,6 +226,34 @@ export const gtmPurchase = (
   return pageEvent;
 };
 
+export const getGtmPurchasePaid = (
+  item: IEcommercePurchase | null,
+  pixels?: IPixels,
+  userData?: IUserData
+) => {
+  const userIp = Cookies.get(UserIpCookie);
+  const pageEvent: IPurchasePaid & IPixels = {
+    event: 'purchase_paid',
+    fb_pixel_id: pixels?.fb_pixel_id || '',
+    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',
+    ecommerce: item,
+    user_data: userData || null,
+    ip: userIp || '',
+  };
+
+  return pageEvent;
+};
+
+export const gtmPurchasePaid = (
+  item: IEcommercePurchase | null,
+  pixels?: IPixels,
+  userData?: IUserData
+) => {
+  const pageEvent = getGtmPurchasePaid(item, pixels, userData);
+  if (isBrowser() && window.dataLayer) setTimeout(() => window.dataLayer.push(pageEvent), 500);
+  return pageEvent;
+};
+
 export const mapUserToUserData = (user: IUser) => ({
   em: user.email,
   ph: user.phone,

package/src/utils/types/event.type.ts

@@ -51,6 +51,7 @@ export interface IEvent extends IBase {
   type: EventType;
   parents: IEvent[];
   children: IEvent[];
+  mapId: string | null;
 }
 
 export interface IEventCategory extends IBase {

package/src/utils/types/global.type.ts

@@ -14,6 +14,7 @@ export interface IGlobalContext {
   options?: IGlobalContextOptions;
   user?: IUser;
   content?: IContent;
+  seatingIframeUrl?: string;
 }
 
 export interface IGlobalContextCallbacks {