(our hidden element)\n // react-dom in dev mode will warn about this. There doesn't seem to be a way to render arbitrary\n // user Head without hitting this issue (our hidden element could be just \"new Document()\", but\n // this can only have 1 child, and we don't control what is being rendered so that's not an option)\n // instead we continue to render to \n {product.title}\n \n {hoveredProduct === product.id && ScreenSize.isDesktop() && (\n setHoveredProduct(product.id)}\n onMouseLeave={() => setHoveredProduct(null)}\n style={{\n textDecoration: \"none\",\n color: \"inherit\",\n display: \"flex\",\n padding: \"0 10px\",\n borderRadius: \"10px\",\n background: \"rgba(255,255,255,0.8)\",\n height: \"70px\",\n width: \"100%\",\n gap: \"1.4rem\",\n flexDirection: \"row\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n cursor: \"pointer\",\n position: \"relative\",\n }}\n >\n \n
\n\n , and just silence warnings for and elements\n // https://github.com/facebook/react/blob/e2424f33b3ad727321fc12e75c5e94838e84c2b5/packages/react-dom-bindings/src/client/validateDOMNesting.js#L498-L520\n const originalConsoleError = console.error.bind(console)\n console.error = (...args) => {\n if (\n Array.isArray(args) &&\n args.length >= 2 &&\n args[0]?.includes?.(`validateDOMNesting(...): %s cannot appear as`) &&\n (args[1] === `` || args[1] === ``)\n ) {\n return undefined\n }\n return originalConsoleError(...args)\n }\n\n /* We set up observer to be able to regenerate after react-refresh\n updates our hidden element.\n */\n const observer = new MutationObserver(onHeadRendered)\n observer.observe(hiddenRoot, {\n attributes: true,\n childList: true,\n characterData: true,\n subtree: true,\n })\n}\n\nexport function headHandlerForBrowser({\n pageComponent,\n staticQueryResults,\n pageComponentProps,\n}) {\n useEffect(() => {\n if (pageComponent?.Head) {\n headExportValidator(pageComponent.Head)\n\n const { render } = reactDOMUtils()\n\n const HeadElement = (\n \n \n {WrapHeadElement} \n \n ,\n hiddenRoot\n )\n }\n\n return () => {\n removePrevHeadElements()\n removeHtmlAndBodyAttributes(keysOfHtmlAndBodyAttributes)\n }\n })\n}\n","import React, { Suspense, createElement } from \"react\"\nimport PropTypes from \"prop-types\"\nimport { apiRunner } from \"./api-runner-browser\"\nimport { grabMatchParams } from \"./find-path\"\nimport { headHandlerForBrowser } from \"./head/head-export-handler-for-browser\"\n\n// Renders page\nfunction PageRenderer(props) {\n const pageComponentProps = {\n ...props,\n params: {\n ...grabMatchParams(props.location.pathname),\n ...props.pageResources.json.pageContext.__params,\n },\n }\n\n const preferDefault = m => (m && m.default) || m\n\n let pageElement\n if (props.pageResources.partialHydration) {\n pageElement = props.pageResources.partialHydration\n } else {\n pageElement = createElement(preferDefault(props.pageResources.component), {\n ...pageComponentProps,\n key: props.path || props.pageResources.page.path,\n })\n }\n\n const pageComponent = props.pageResources.head\n\n headHandlerForBrowser({\n pageComponent,\n staticQueryResults: props.pageResources.staticQueryResults,\n pageComponentProps,\n })\n\n const wrappedPage = apiRunner(\n `wrapPageElement`,\n {\n element: pageElement,\n props: pageComponentProps,\n },\n pageElement,\n ({ result }) => {\n return { element: result, props: pageComponentProps }\n }\n ).pop()\n\n return wrappedPage\n}\n\nPageRenderer.propTypes = {\n location: PropTypes.object.isRequired,\n pageResources: PropTypes.object.isRequired,\n data: PropTypes.object,\n pageContext: PropTypes.object.isRequired,\n}\n\nexport default PageRenderer\n","// This is extracted to separate module because it's shared\n// between browser and SSR code\nexport const RouteAnnouncerProps = {\n id: `gatsby-announcer`,\n style: {\n position: `absolute`,\n top: 0,\n width: 1,\n height: 1,\n padding: 0,\n overflow: `hidden`,\n clip: `rect(0, 0, 0, 0)`,\n whiteSpace: `nowrap`,\n border: 0,\n },\n \"aria-live\": `assertive`,\n \"aria-atomic\": `true`,\n}\n","import React from \"react\"\nimport PropTypes from \"prop-types\"\nimport loader, { PageResourceStatus } from \"./loader\"\nimport { maybeGetBrowserRedirect } from \"./redirect-utils.js\"\nimport { apiRunner } from \"./api-runner-browser\"\nimport emitter from \"./emitter\"\nimport { RouteAnnouncerProps } from \"./route-announcer-props\"\nimport {\n navigate as reachNavigate,\n globalHistory,\n} from \"@gatsbyjs/reach-router\"\nimport { parsePath } from \"gatsby-link\"\n\nfunction maybeRedirect(pathname) {\n const redirect = maybeGetBrowserRedirect(pathname)\n const { hash, search } = window.location\n\n if (redirect != null) {\n window.___replace(redirect.toPath + search + hash)\n return true\n } else {\n return false\n }\n}\n\n// Catch unhandled chunk loading errors and force a restart of the app.\nlet nextRoute = ``\n\nwindow.addEventListener(`unhandledrejection`, event => {\n if (/loading chunk \\d* failed./i.test(event.reason)) {\n if (nextRoute) {\n window.location.pathname = nextRoute\n }\n }\n})\n\nconst onPreRouteUpdate = (location, prevLocation) => {\n if (!maybeRedirect(location.pathname)) {\n nextRoute = location.pathname\n apiRunner(`onPreRouteUpdate`, { location, prevLocation })\n }\n}\n\nconst onRouteUpdate = (location, prevLocation) => {\n if (!maybeRedirect(location.pathname)) {\n apiRunner(`onRouteUpdate`, { location, prevLocation })\n if (\n process.env.GATSBY_QUERY_ON_DEMAND &&\n process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR === `true`\n ) {\n emitter.emit(`onRouteUpdate`, { location, prevLocation })\n }\n }\n}\n\nconst navigate = (to, options = {}) => {\n // Support forward/backward navigation with numbers\n // navigate(-2) (jumps back 2 history steps)\n // navigate(2) (jumps forward 2 history steps)\n if (typeof to === `number`) {\n globalHistory.navigate(to)\n return\n }\n\n const { pathname, search, hash } = parsePath(to)\n const redirect = maybeGetBrowserRedirect(pathname)\n\n // If we're redirecting, just replace the passed in pathname\n // to the one we want to redirect to.\n if (redirect) {\n to = redirect.toPath + search + hash\n }\n\n // If we had a service worker update, no matter the path, reload window and\n // reset the pathname whitelist\n if (window.___swUpdated) {\n window.location = pathname + search + hash\n return\n }\n\n // Start a timer to wait for a second before transitioning and showing a\n // loader in case resources aren't around yet.\n const timeoutId = setTimeout(() => {\n emitter.emit(`onDelayedLoadPageResources`, { pathname })\n apiRunner(`onRouteUpdateDelayed`, {\n location: window.location,\n })\n }, 1000)\n\n loader.loadPage(pathname + search).then(pageResources => {\n // If no page resources, then refresh the page\n // Do this, rather than simply `window.location.reload()`, so that\n // pressing the back/forward buttons work - otherwise when pressing\n // back, the browser will just change the URL and expect JS to handle\n // the change, which won't always work since it might not be a Gatsby\n // page.\n if (!pageResources || pageResources.status === PageResourceStatus.Error) {\n window.history.replaceState({}, ``, location.href)\n window.location = pathname\n clearTimeout(timeoutId)\n return\n }\n\n // If the loaded page has a different compilation hash to the\n // window, then a rebuild has occurred on the server. Reload.\n if (process.env.NODE_ENV === `production` && pageResources) {\n if (\n pageResources.page.webpackCompilationHash !==\n window.___webpackCompilationHash\n ) {\n // Purge plugin-offline cache\n if (\n `serviceWorker` in navigator &&\n navigator.serviceWorker.controller !== null &&\n navigator.serviceWorker.controller.state === `activated`\n ) {\n navigator.serviceWorker.controller.postMessage({\n gatsbyApi: `clearPathResources`,\n })\n }\n\n window.location = pathname + search + hash\n }\n }\n reachNavigate(to, options)\n clearTimeout(timeoutId)\n })\n}\n\nfunction shouldUpdateScroll(prevRouterProps, { location }) {\n const { pathname, hash } = location\n const results = apiRunner(`shouldUpdateScroll`, {\n prevRouterProps,\n // `pathname` for backwards compatibility\n pathname,\n routerProps: { location },\n getSavedScrollPosition: args => [\n 0,\n // FIXME this is actually a big code smell, we should fix this\n // eslint-disable-next-line @babel/no-invalid-this\n this._stateStorage.read(args, args.key),\n ],\n })\n if (results.length > 0) {\n // Use the latest registered shouldUpdateScroll result, this allows users to override plugin's configuration\n // @see https://github.com/gatsbyjs/gatsby/issues/12038\n return results[results.length - 1]\n }\n\n if (prevRouterProps) {\n const {\n location: { pathname: oldPathname },\n } = prevRouterProps\n if (oldPathname === pathname) {\n // Scroll to element if it exists, if it doesn't, or no hash is provided,\n // scroll to top.\n return hash ? decodeURI(hash.slice(1)) : [0, 0]\n }\n }\n return true\n}\n\nfunction init() {\n // The \"scroll-behavior\" package expects the \"action\" to be on the location\n // object so let's copy it over.\n globalHistory.listen(args => {\n args.location.action = args.action\n })\n\n window.___push = to => navigate(to, { replace: false })\n window.___replace = to => navigate(to, { replace: true })\n window.___navigate = (to, options) => navigate(to, options)\n}\n\nclass RouteAnnouncer extends React.Component {\n constructor(props) {\n super(props)\n this.announcementRef = React.createRef()\n }\n\n componentDidUpdate(prevProps, nextProps) {\n requestAnimationFrame(() => {\n let pageName = `new page at ${this.props.location.pathname}`\n if (document.title) {\n pageName = document.title\n }\n const pageHeadings = document.querySelectorAll(`#gatsby-focus-wrapper h1`)\n if (pageHeadings && pageHeadings.length) {\n pageName = pageHeadings[0].textContent\n }\n const newAnnouncement = `Navigated to ${pageName}`\n if (this.announcementRef.current) {\n const oldAnnouncement = this.announcementRef.current.innerText\n if (oldAnnouncement !== newAnnouncement) {\n this.announcementRef.current.innerText = newAnnouncement\n }\n }\n })\n }\n\n render() {\n return \n }\n}\n\nconst compareLocationProps = (prevLocation, nextLocation) => {\n if (prevLocation.href !== nextLocation.href) {\n return true\n }\n\n if (prevLocation?.state?.key !== nextLocation?.state?.key) {\n return true\n }\n\n return false\n}\n\n// Fire on(Pre)RouteUpdate APIs\nclass RouteUpdates extends React.Component {\n constructor(props) {\n super(props)\n onPreRouteUpdate(props.location, null)\n }\n\n componentDidMount() {\n onRouteUpdate(this.props.location, null)\n }\n\n shouldComponentUpdate(nextProps) {\n if (compareLocationProps(this.props.location, nextProps.location)) {\n onPreRouteUpdate(nextProps.location, this.props.location)\n return true\n }\n return false\n }\n\n componentDidUpdate(prevProps) {\n if (compareLocationProps(prevProps.location, this.props.location)) {\n onRouteUpdate(this.props.location, prevProps.location)\n }\n }\n\n render() {\n return (\n \n {this.props.children}\n \n )\n }\n}\n\nRouteUpdates.propTypes = {\n location: PropTypes.object.isRequired,\n}\n\nexport { init, shouldUpdateScroll, RouteUpdates, maybeGetBrowserRedirect }\n","// Pulled from react-compat\n// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349\nfunction shallowDiffers(a, b) {\n for (var i in a) {\n if (!(i in b)) return true;\n }for (var _i in b) {\n if (a[_i] !== b[_i]) return true;\n }return false;\n}\n\nexport default (function (instance, nextProps, nextState) {\n return shallowDiffers(instance.props, nextProps) || shallowDiffers(instance.state, nextState);\n});","import React from \"react\"\nimport loader, { PageResourceStatus } from \"./loader\"\nimport shallowCompare from \"shallow-compare\"\n\nclass EnsureResources extends React.Component {\n constructor(props) {\n super()\n const { location, pageResources } = props\n this.state = {\n location: { ...location },\n pageResources:\n pageResources ||\n loader.loadPageSync(location.pathname + location.search, {\n withErrorDetails: true,\n }),\n }\n }\n\n static getDerivedStateFromProps({ location }, prevState) {\n if (prevState.location.href !== location.href) {\n const pageResources = loader.loadPageSync(\n location.pathname + location.search,\n {\n withErrorDetails: true,\n }\n )\n\n return {\n pageResources,\n location: { ...location },\n }\n }\n\n return {\n location: { ...location },\n }\n }\n\n loadResources(rawPath) {\n loader.loadPage(rawPath).then(pageResources => {\n if (pageResources && pageResources.status !== PageResourceStatus.Error) {\n this.setState({\n location: { ...window.location },\n pageResources,\n })\n } else {\n window.history.replaceState({}, ``, location.href)\n window.location = rawPath\n }\n })\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n // Always return false if we're missing resources.\n if (!nextState.pageResources) {\n this.loadResources(\n nextProps.location.pathname + nextProps.location.search\n )\n return false\n }\n\n if (\n process.env.BUILD_STAGE === `develop` &&\n nextState.pageResources.stale\n ) {\n this.loadResources(\n nextProps.location.pathname + nextProps.location.search\n )\n return false\n }\n\n // Check if the component or json have changed.\n if (this.state.pageResources !== nextState.pageResources) {\n return true\n }\n if (\n this.state.pageResources.component !== nextState.pageResources.component\n ) {\n return true\n }\n\n if (this.state.pageResources.json !== nextState.pageResources.json) {\n return true\n }\n // Check if location has changed on a page using internal routing\n // via matchPath configuration.\n if (\n this.state.location.key !== nextState.location.key &&\n nextState.pageResources.page &&\n (nextState.pageResources.page.matchPath ||\n nextState.pageResources.page.path)\n ) {\n return true\n }\n return shallowCompare(this, nextProps, nextState)\n }\n\n render() {\n if (\n process.env.NODE_ENV !== `production` &&\n (!this.state.pageResources ||\n this.state.pageResources.status === PageResourceStatus.Error)\n ) {\n const message = `EnsureResources was not able to find resources for path: \"${this.props.location.pathname}\"\nThis typically means that an issue occurred building components for that path.\nRun \\`gatsby clean\\` to remove any cached elements.`\n if (this.state.pageResources?.error) {\n console.error(message)\n throw this.state.pageResources.error\n }\n\n throw new Error(message)\n }\n\n return this.props.children(this.state)\n }\n}\n\nexport default EnsureResources\n","import { apiRunner, apiRunnerAsync } from \"./api-runner-browser\"\nimport React from \"react\"\nimport { Router, navigate, Location, BaseContext } from \"@gatsbyjs/reach-router\"\nimport { ScrollContext } from \"gatsby-react-router-scroll\"\nimport { StaticQueryContext } from \"./static-query\"\nimport {\n SlicesMapContext,\n SlicesContext,\n SlicesResultsContext,\n} from \"./slice/context\"\nimport {\n shouldUpdateScroll,\n init as navigationInit,\n RouteUpdates,\n} from \"./navigation\"\nimport emitter from \"./emitter\"\nimport PageRenderer from \"./page-renderer\"\nimport asyncRequires from \"$virtual/async-requires\"\nimport {\n setLoader,\n ProdLoader,\n publicLoader,\n PageResourceStatus,\n getStaticQueryResults,\n getSliceResults,\n} from \"./loader\"\nimport EnsureResources from \"./ensure-resources\"\nimport stripPrefix from \"./strip-prefix\"\n\n// Generated during bootstrap\nimport matchPaths from \"$virtual/match-paths.json\"\nimport { reactDOMUtils } from \"./react-dom-utils\"\n\nconst loader = new ProdLoader(asyncRequires, matchPaths, window.pageData)\nsetLoader(loader)\nloader.setApiRunner(apiRunner)\n\nconst { render, hydrate } = reactDOMUtils()\n\nwindow.asyncRequires = asyncRequires\nwindow.___emitter = emitter\nwindow.___loader = publicLoader\n\nnavigationInit()\n\nconst reloadStorageKey = `gatsby-reload-compilation-hash-match`\n\napiRunnerAsync(`onClientEntry`).then(() => {\n // Let plugins register a service worker. The plugin just needs\n // to return true.\n if (apiRunner(`registerServiceWorker`).filter(Boolean).length > 0) {\n require(`./register-service-worker`)\n }\n\n // In gatsby v2 if Router is used in page using matchPaths\n // paths need to contain full path.\n // For example:\n // - page have `/app/*` matchPath\n // - inside template user needs to use `/app/xyz` as path\n // Resetting `basepath`/`baseuri` keeps current behaviour\n // to not introduce breaking change.\n // Remove this in v3\n const RouteHandler = props => (\n \n \n {({ location }) => (\n \n {({ pageResources, location }) => {\n const staticQueryResults = getStaticQueryResults()\n const sliceResults = getSliceResults()\n\n return (\n \n \n \n \n \n {children}\n \n \n \n \n \n )\n }}\n \n )}\n \n )\n }\n }\n\n class LocationHandler extends React.Component {\n render() {\n return (\n \n {({ pageResources, location }) => (\n \n \n \n \n )}\n \n )\n }\n }\n\n const { pagePath, location: browserLoc } = window\n\n // Explicitly call navigate if the canonical path (window.pagePath)\n // is different to the browser path (window.location.pathname). SSR\n // page paths might include search params, while SSG and DSG won't.\n // If page path include search params we also compare query params.\n // But only if NONE of the following conditions hold:\n //\n // - The url matches a client side route (page.matchPath)\n // - it's a 404 page\n // - it's the offline plugin shell (/offline-plugin-app-shell-fallback/)\n if (\n pagePath &&\n __BASE_PATH__ + pagePath !==\n browserLoc.pathname + (pagePath.includes(`?`) ? browserLoc.search : ``) &&\n !(\n loader.findMatchPath(stripPrefix(browserLoc.pathname, __BASE_PATH__)) ||\n pagePath.match(/^\\/(404|500)(\\/?|.html)$/) ||\n pagePath.match(/^\\/offline-plugin-app-shell-fallback\\/?$/)\n )\n ) {\n navigate(\n __BASE_PATH__ +\n pagePath +\n (!pagePath.includes(`?`) ? browserLoc.search : ``) +\n browserLoc.hash,\n {\n replace: true,\n }\n )\n }\n\n // It's possible that sessionStorage can throw an exception if access is not granted, see https://github.com/gatsbyjs/gatsby/issues/34512\n const getSessionStorage = () => {\n try {\n return sessionStorage\n } catch {\n return null\n }\n }\n\n publicLoader.loadPage(browserLoc.pathname + browserLoc.search).then(page => {\n const sessionStorage = getSessionStorage()\n\n if (\n page?.page?.webpackCompilationHash &&\n page.page.webpackCompilationHash !== window.___webpackCompilationHash\n ) {\n // Purge plugin-offline cache\n if (\n `serviceWorker` in navigator &&\n navigator.serviceWorker.controller !== null &&\n navigator.serviceWorker.controller.state === `activated`\n ) {\n navigator.serviceWorker.controller.postMessage({\n gatsbyApi: `clearPathResources`,\n })\n }\n\n // We have not matching html + js (inlined `window.___webpackCompilationHash`)\n // with our data (coming from `app-data.json` file). This can cause issues such as\n // errors trying to load static queries (as list of static queries is inside `page-data`\n // which might not match to currently loaded `.js` scripts).\n // We are making attempt to reload if hashes don't match, but we also have to handle case\n // when reload doesn't fix it (possibly broken deploy) so we don't end up in infinite reload loop\n if (sessionStorage) {\n const isReloaded = sessionStorage.getItem(reloadStorageKey) === `1`\n\n if (!isReloaded) {\n sessionStorage.setItem(reloadStorageKey, `1`)\n window.location.reload(true)\n return\n }\n }\n }\n\n if (sessionStorage) {\n sessionStorage.removeItem(reloadStorageKey)\n }\n\n if (!page || page.status === PageResourceStatus.Error) {\n const message = `page resources for ${browserLoc.pathname} not found. Not rendering React`\n\n // if the chunk throws an error we want to capture the real error\n // This should help with https://github.com/gatsbyjs/gatsby/issues/19618\n if (page && page.error) {\n console.error(message)\n throw page.error\n }\n\n throw new Error(message)\n }\n\n const SiteRoot = apiRunner(\n `wrapRootElement`,\n { element: {SiteRoot} \n }\n\n const focusEl = document.getElementById(`gatsby-focus-wrapper`)\n\n // Client only pages have any empty body so we just do a normal\n // render to avoid React complaining about hydration mis-matches.\n let defaultRenderer = render\n if (focusEl && focusEl.children.length) {\n defaultRenderer = hydrate\n }\n\n const renderer = apiRunner(\n `replaceHydrateFunction`,\n undefined,\n defaultRenderer\n )[0]\n\n function runRender() {\n const rootElement =\n typeof window !== `undefined`\n ? document.getElementById(`___gatsby`)\n : null\n\n renderer(\n {finalData && render(finalData)}\n {!finalData && \n )\n}\n\nlet warnedAboutStaticQuery = false\n\n// TODO(v6): Remove completely\nconst StaticQuery = props => {\n const { data, query, render, children } = props\n\n if (process.env.NODE_ENV === `development` && !warnedAboutStaticQuery) {\n console.warn(\n `The \n {staticQueryData => (\n \n )\n}\n\nStaticQuery.propTypes = {\n data: PropTypes.object,\n query: PropTypes.string.isRequired,\n render: PropTypes.func,\n children: PropTypes.func,\n}\n\nconst useStaticQuery = query => {\n if (\n typeof React.useContext !== `function` &&\n process.env.NODE_ENV === `development`\n ) {\n // TODO(v5): Remove since we require React >= 18\n throw new Error(\n `You're likely using a version of React that doesn't support Hooks\\n` +\n `Please update React and ReactDOM to 16.8.0 or later to use the useStaticQuery hook.`\n )\n }\n\n const context = React.useContext(StaticQueryContext)\n\n // query is a stringified number like `3303882` when wrapped with graphql, If a user forgets\n // to wrap the query in a grqphql, then casting it to a Number results in `NaN` allowing us to\n // catch the misuse of the API and give proper direction\n if (isNaN(Number(query))) {\n throw new Error(`useStaticQuery was called with a string but expects to be called using \\`graphql\\`. Try this:\n\nimport { useStaticQuery, graphql } from 'gatsby';\n\nuseStaticQuery(graphql\\`${query}\\`);\n`)\n }\n\n if (context[query]?.data) {\n return context[query].data\n } else {\n throw new Error(\n `The result of this StaticQuery could not be fetched.\\n\\n` +\n `This is likely a bug in Gatsby and if refreshing the page does not fix it, ` +\n `please open an issue in https://github.com/gatsbyjs/gatsby/issues`\n )\n }\n}\n\nexport { StaticQuery, StaticQueryContext, useStaticQuery }\n","import React from \"react\"\n\n// Ensure serverContext is not created more than once as React will throw when creating it more than once\n// https://github.com/facebook/react/blob/dd2d6522754f52c70d02c51db25eb7cbd5d1c8eb/packages/react/src/ReactServerContext.js#L101\nconst createServerContext = (name, defaultValue = null) => {\n /* eslint-disable no-undef */\n if (!globalThis.__SERVER_CONTEXT) {\n globalThis.__SERVER_CONTEXT = {}\n }\n\n if (!globalThis.__SERVER_CONTEXT[name]) {\n globalThis.__SERVER_CONTEXT[name] = React.createServerContext(\n name,\n defaultValue\n )\n }\n\n return globalThis.__SERVER_CONTEXT[name]\n}\n\nfunction createServerOrClientContext(name, defaultValue) {\n if (React.createServerContext) {\n return createServerContext(name, defaultValue)\n }\n\n return React.createContext(defaultValue)\n}\n\nexport { createServerOrClientContext }\n","/**\n * Remove a prefix from a string. Return the input string if the given prefix\n * isn't found.\n */\n\nexport default function stripPrefix(str, prefix = ``) {\n if (!prefix) {\n return str\n }\n\n if (str === prefix) {\n return `/`\n }\n\n if (str.startsWith(`${prefix}/`)) {\n return str.slice(prefix.length)\n }\n\n return str\n}\n","// extracted by mini-css-extract-plugin\nexport var CompanyMenuLogo = \"Header-module--CompanyMenuLogo--675b0\";\nexport var HeaderBtnSection = \"Header-module--HeaderBtnSection--dc592\";\nexport var HideHeader = \"Header-module--HideHeader--7ff6f\";\nexport var HomeLinkNav = \"Header-module--HomeLinkNav--ba3d3\";\nexport var MenuActive = \"Header-module--MenuActive--0a669\";\nexport var MenuContainer = \"Header-module--MenuContainer--89e30\";\nexport var MenuOpen = \"Header-module--MenuOpen--59e69\";\nexport var NavVisited = \"Header-module--NavVisited--94b32\";\nexport var SocialMediaLinks = \"Header-module--SocialMediaLinks--df286\";\nexport var copyrights = \"Header-module--copyrights--118b9\";\nexport var dot = \"Header-module--dot--52d28\";\nexport var dotWrap = \"Header-module--dotWrap--306ff\";\nexport var headerConnectBtn = \"Header-module--headerConnectBtn--14f6d\";\nexport var headerContainer = \"Header-module--headerContainer--69d29\";\nexport var headerWrapper = \"Header-module--headerWrapper--b4bef\";\nexport var hiddenActive = \"Header-module--hiddenActive--e885d\";\nexport var hover = \"Header-module--hover--3decd\";\nexport var logo = \"Header-module--logo--79f8a\";\nexport var mobileMenuRules = \"Header-module--mobileMenuRules--1d86f\";\nexport var mobileMenuWrap = \"Header-module--mobileMenuWrap--f6837\";\nexport var navMenuLinks = \"Header-module--navMenuLinks--2999d\";\nexport var navbar = \"Header-module--navbar--89582\";\nexport var pageLink = \"Header-module--pageLink--3bbb2\";\nexport var policyTerms = \"Header-module--policyTerms--6cb75\";\nexport var rightSection = \"Header-module--rightSection--f03ac\";","import { Link } from \"gatsby\";\nimport React from \"react\";\nimport { RenderSvg } from \"../../helpers/helper\";\n\nconst MenuBar = ({\n headermenu,\n polics_terms,\n companylogo,\n handleMenu,\n styles,\n copyRights,\n companyLogoMenu,\n SocialMediaLinks,\n handleProductsClick,\n}) => {\n const handleProducts = () => {\n handleProductsClick(true);\n };\n\n //usecase will be removed and products component will come\n const componentOrder = [\n \"home\",\n \"usecases\",\n \"platform\",\n // \"ai-at-kpoint\",\n \"content-center\",\n \"about\",\n \"resources\",\n \"careers\",\n \"contact-us\",\n ];\n\n const sortedContent = [...headermenu?.items].sort((a, b) => {\n return componentOrder.indexOf(a.slug) - componentOrder.indexOf(b.slug);\n });\n\n return (\n \n \n {productLinks.map((product) =>\n product.isExternal ? (\n setHoveredProduct(product.id)}\n onMouseLeave={() => setHoveredProduct(null)}\n style={{\n textDecoration: \"none\",\n color: \"inherit\",\n display: \"flex\",\n padding: \"0 10px\",\n borderRadius: \"10px\",\n background: \"rgba(255,255,255,0.8)\",\n height: \"70px\",\n width: \"100%\",\n gap: \"1.4rem\",\n flexDirection: \"row\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n cursor: \"pointer\",\n position: \"relative\",\n }}\n >\n \n
\n\n Loading (StaticQuery)
}\n \n
\n );\n};\n\nexport default MenuBar;\n","import React, { useRef, useEffect, useState, useCallback } from \"react\";\nimport { RenderSvg } from \"../utils/helpers/helper\";\nimport { ScreenSize } from \"../utils/helpers/helper\";\nimport { Link } from \"gatsby\";\nimport { GatsbyImage } from \"gatsby-plugin-image\";\nimport { graphql, useStaticQuery } from \"gatsby\";\nimport { getImage } from \"gatsby-plugin-image\";\n\nexport const ProductsPopup = ({\n openProductsPopup,\n setOpenProductsPopup,\n header,\n isMobile,\n contact,\n share,\n}) => {\n const data = useStaticQuery(graphql`\n query {\n allFile(filter: { relativeDirectory: { eq: \"productLogos\" } }) {\n edges {\n node {\n relativePath\n childImageSharp {\n gatsbyImageData(\n width: 200\n placeholder: BLURRED\n formats: [AUTO, WEBP, AVIF]\n )\n }\n }\n }\n }\n }\n `);\n\n // Extracting image nodes\n const images = data.allFile.edges;\n const findImageByRelativePath = (relativePath) => {\n const imageNode = images.find(\n (image) => image.node.relativePath === relativePath\n ).node;\n return getImage(imageNode);\n };\n\n const popupRef = useRef(null);\n const excludedRef = useRef(null);\n const [hoveredProduct, setHoveredProduct] = useState(null);\n\n const productLinks = [\n {\n id: \"tube\",\n title: \"One Video Platform. All Videos\",\n image: \"productLogos/tubeMiniLogo.png\",\n link: \"/products/tube\",\n isExternal: false,\n },\n {\n id: \"xpresso\",\n title: \"An Enterprise social video experiences app\",\n\n image: \"productLogos/xpressoMiniLogo.png\",\n link: \"/products/xpresso\",\n isExternal: false,\n },\n {\n id: \"play\",\n title: \"DIY interactivity for videos\",\n image: \"productLogos/playMiniLogo.png\",\n link: \"/products/play\",\n isExternal: false,\n },\n {\n id: \"fab\",\n title: \"Social experiences for your digital channels\",\n image: \"productLogos/fabMiniLogo.png\",\n link: \"https://www.getfab.app/\",\n isExternal: true,\n },\n {\n id: \"koel\",\n title: \"The multilingual AI voice personalization tool for Enterprises\",\n image: \"productLogos/koelMiniLogo.png\",\n link: \"/products/koel\",\n isExternal: false,\n },\n ];\n\n const closePopup = useCallback(() => {\n setOpenProductsPopup(null);\n }, [setOpenProductsPopup]);\n\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (\n popupRef.current &&\n !popupRef.current.contains(event.target) &&\n !excludedRef.current?.contains(event.target)\n ) {\n closePopup();\n }\n };\n\n const handleEscKey = (event) => {\n if (event.key === \"Escape\") {\n closePopup();\n }\n };\n\n if (openProductsPopup) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n document.addEventListener(\"keydown\", handleEscKey);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n document.removeEventListener(\"keydown\", handleEscKey);\n };\n }, [openProductsPopup, closePopup]);\n\n if (!openProductsPopup) return null;\n\n return (\n \n
\n - \n {sortedContent?.map((data, index) => {\n const { slug: pageName, page } = data;\n\n const linkPath =\n pageName === \"privacy\" || pageName === \"compilance\"\n ? null\n : `/${pageName}`;\n\n let displayTitle = page?.Title || pageName;\n if (displayTitle === \"usecases\" || displayTitle === \"Use Cases\") {\n displayTitle = \"products\";\n }\n\n if (displayTitle.toLowerCase() === \"products\") {\n return (\n
- \n \n {displayTitle}\n
- \n handleMenu()}>\n {displayTitle}\n \n \n )}\n
\n {SocialMediaLinks?.map((e, i) => {\n const { url, label, OpenInNewTab } = e;\n return (\n handleMenu()}\n href={url}\n target={OpenInNewTab ? \"_blank\" : \"_self\"}\n rel=\"noopener noreferrer\"\n >\n
\n \n
\n \n
\n {copyRights}
\n\n {polics_terms?.map((data, index) => {\n const { label, OpenInNewTab } = data;\n\n return (\n \n handleMenu()}\n style={{ textTransform: \"capitalize\" }}\n target={OpenInNewTab ? \"_blank\" : \"_self\"}\n to={\"/\" + label}\n rel=\"noopener noreferrer\"\n >\n {label === \"privacy-policy\"\n ? \"Privacy Policy\"\n : label === \"terms-of-use\"\n ? \"Terms & Conditions\"\n : label}\n \n \n );\n })}\n
\n \n
\n \n {\n setOpenPopup(true);\n }}\n className={`${styles?.headerConnectBtn} body-sm`}\n >\n {headerButton?.label}\n
\n handleMenu()}>\n \n
\n \n )}\n \n {section.heading}\n
\n );\n }\n return (\n onToggle(index)} className={styles.dropDownTab}>\n
\n\n {isOpen && (\n {section.heading}
\n- \n {section.items.map((link, linkIndex) => (\n
\n
\n );\n };\n\n const Locations = ({ item }) => {\n const items = item.items || [];\n return (\n <>\n {section.heading}
\n- \n {section.items.map((item, index) => (\n
- \n {item.label}\n \n ))}\n
\n {ScreenSize.isMobile && (\n
\n {item.heading}
\n )}\n\n\n {items.map((city, cityIndex) => (\n
\n \n {city.label}\n
\n ))}\n \n {socialLinks?.map((e, i) => {\n const { url, label } = e;\n return (\n \n
\n \n );\n };\n\n return (\n \n );\n}\n","import React, { useRef, useState } from \"react\";\nimport { KpointPlayerContext } from \"./KpointPlayerContext\";\n\nconst KpointPlayerProvider = ({ children }) => {\n const [players, setPlayers] = useState([]);\n const isMuteRef = useRef(true);\n const bindEvents = (player) => {\n player?.addEventListener(\"muted\", () => {\n if (isMuteRef.current) return;\n muteAll();\n isMuteRef.current = true;\n });\n player?.addEventListener(\"unmuted\", () => {\n if (!isMuteRef.current) return;\n unMuteAll();\n isMuteRef.current = false;\n });\n };\n\n const addPlayer = (player) => {\n setPlayers((prevPlayers) => {\n const newPlayers = [...prevPlayers, player];\n return newPlayers;\n });\n\n bindEvents(player);\n };\n\n const removePlayer = (player) => {\n setPlayers((prevPlayers) => {\n const newPlayers = prevPlayers.filter((p) => p !== player);\n return newPlayers;\n });\n };\n\n const muteAll = () => {\n setPlayers((prevPlayers) => {\n prevPlayers.forEach((player) => {\n player?.mute();\n });\n return [...prevPlayers];\n });\n };\n\n const unMuteAll = () => {\n setPlayers((prevPlayers) => {\n prevPlayers.forEach((player) => {\n player?.unmute();\n });\n return [...prevPlayers];\n });\n };\n return (\n \n {!isConnectPage && {children} \n {!isConnectPage && }\n
\n \n \n
\n )\n }\n\n return null\n}\n\nexport const LayoutWrapper: FunctionComponent<\n PropsWithChildren\n
\n ) : (\n \n {rest?.readTime}\n
\n \n \n );\n }\n);\n\nexport const PrimaryCradTitleText = ({ Text, ...rest }) => {\n return (\n\n {Text}\n
\n );\n};\n\nexport const SecondaryCard = ({\n Text,\n image,\n video,\n CardActive,\n embedCode,\n media,\n ...rest\n}) => {\n return (\n\n {embedCode ? (\n \n loadingEmbed\n
\n ) : image ? (\n image.gatsbyImageData ? (\n \n
\n ) : (\n \n
\n ) : (\n \n {\n
\n \n )}\n \n
\n }\n \n \n {description?.substring(0, 80)}\n \n )}\n
\n {title}
\n {!ScreenSize.isMobile() && (\n\n
\n ) : (\n \n
\n \n );\n};\n\nexport const SecondarySquareCard = ({ image, video, embedCode, ...rest }) => {\n const RenderData = rest?.to ? Link : \"div\";\n\n return (\n {title}
\n\n
\n {showMinute}
}\n\n
\n ) : (\n \n
\n );\n};\n\nexport const PeopleCard = ({ embedCode, image, video, ...rest }) => {\n const RenderDiv = rest?.to ? Link : \"div\";\n\n return (\n {title}
\n{description}
\n {image.gatsbyImageData ? (\n\n
\n ) : (\n \n
\n \n loadingEmbed\n
\n ) : image ? (\n \n
\n \n );\n};\n\nexport const CaseStudyCard = ({\n Text,\n subTitle,\n circleCard,\n image,\n video,\n CardActive,\n embedCode,\n className,\n bgColor,\n CaseStudyCard,\n iconName,\n ...rest\n}) => {\n const RenderData = rest?.to ? Link : \"div\";\n\n const iconSize = ScreenSize.isDesktop() ? \"50px\" : \"30px\";\n const knowmoreIcon = ScreenSize.isDesktop() ? \"30px\" : \"20px\";\n\n const maxHeight = rest.content\n ? ScreenSize.isDesktop()\n ? \"380px\"\n : \"280px\"\n : \"none\";\n\n const maxWidth = rest.content\n ? ScreenSize.isDesktop()\n ? \"100%\"\n : \"100%\"\n : \"none\";\n\n return (\n \n
\n \n {image && image.gatsbyImageData ? (\n 
\n )}\n
\n {social && (\n \n \n
\n )}\n \n
\n )}\n \n
\n {Text}
\n{subTitle}
\n{rest?.readTime}
\n Explore
\n\n {!header && (\n {\n closeForm();\n }}\n >\n
\n )}\n \n \n {success}\n
\n )}\n \n \n \n
\n {success && (\n \n \n Send\n \n
\n \n
\n\n {ConfirmationPopUpComponent}
\n \n \n );\n },\n (prevProps, nextProps) =>\n prevProps.isMobile === nextProps.isMobile &&\n prevProps.formIsFilled === nextProps.formIsFilled &&\n prevProps.header === nextProps.header &&\n prevProps.openPopup === nextProps.openPopup\n);\n\nexport default ContactForm;\n","import React from \"react\";\nimport * as styles from \"./css/ConfirmationPopUp.module.css\";\n\nconst ConfirmationPopUp = ({ handelPop }) => {\n const handelPopUp = (state) => {\n handelPop(state);\n };\n return (\n <>\n \n
\n \n );\n};\n\nexport default ConfirmationPopUp;\n","// extracted by mini-css-extract-plugin\nexport var confirmationBtns = \"ConfirmationPopUp-module--confirmationBtns--63138\";\nexport var container = \"ConfirmationPopUp-module--container--d75f9\";\nexport var heading = \"ConfirmationPopUp-module--heading--9cd5f\";\nexport var mainContainer = \"ConfirmationPopUp-module--mainContainer--cb065\";\nexport var message = \"ConfirmationPopUp-module--message--b3850\";","import React, { useState, useCallback } from \"react\";\nimport ConfirmationPopUp from \"./ConfirmationPopUp\";\n\nconst useConfirmationPopup = () => {\n const [isVisible, setIsVisible] = useState(false);\n const [resolver, setResolver] = useState({ resolve: null, reject: null });\n\n const showConfirmation = useCallback(() => {\n setIsVisible(true);\n return new Promise((resolve, reject) => {\n setResolver({ resolve, reject });\n });\n }, []);\n\n const handlePop = (response) => {\n if (response === \"yes\") {\n resolver.resolve(true);\n } else {\n resolver.reject(false);\n }\n setIsVisible(false);\n setResolver({ resolve: null, reject: null });\n };\n\n const ConfirmationPopUpComponent = isVisible ? (\n \n
\n \n Are you sure you want to close?
Your data will be lost\n
\n Your data will be lost\n
\n {\n e.preventDefault();\n e.stopPropagation();\n handelPopUp(\"yes\");\n }}\n >\n Yes\n \n {\n e.preventDefault();\n e.stopPropagation();\n handelPopUp(\"no\");\n }}\n >\n No\n \n
\n \n
\n \n );\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport * as styles from \"./sectionLayout.module.css\";\nimport { getPublicUrl } from \"../FetchImage\";\nimport {\n SecondaryCard,\n SecondaryCircleCard,\n SecondarySquareCard,\n} from \"../cards/Cards\";\nimport { KpointPlayerFromEmbedCode } from \"../../lib/kpoint/KpointPlayerFromEmbedCode\";\nimport { PopupButton } from \"../buttons/Buttons\";\nimport { Link } from \"gatsby\";\nimport BackgroundWave from \"./BackgroundWave\";\nimport RenderMedia from \"../Images\";\nimport {\n RenderSvg,\n isAllowedDomain,\n scheduleDemo,\n} from \"../../utils/helpers/helper\";\nimport { PlatformTitleDesc } from \"./TitleDescription\";\nimport CheckedIcon from \"../../fontAwasome/svgs/light/check.svg\";\nimport CopyIcon from \"../../fontAwasome/svgs/light/copy.svg\";\nimport { socialMediaShare } from \"../../utils/GA4Tracking\";\n\nexport default function SectionLayout({\n children,\n bgColor,\n About,\n Platform,\n People,\n myStory,\n IsEmbedded,\n usecases,\n careers,\n className,\n lifeatkpoint,\n ...rest\n}) {\n return (\n \n \n \n \n \n \n \n \n \n \n
\n {children}
;\n};\n\nexport const BannerVideo = ({ mediaName, folder }) => {\n return (\n \n
\n {title}
\n\n {showMinute && (\n
\n {showMinute} read
\n )}\n\n {bgvideo && (\n \n
\n );\n};\n\nexport const ScheduleADemo = ({\n header,\n openPopup,\n setOpenPopup,\n isMobile,\n}) => {\n const [isFormSuccess, setIsFormSuccess] = useState(false);\n const [error, setError] = useState(false);\n const emailError = useRef(null);\n const submitButtonRef = useRef(null);\n const formRef = useRef(null);\n\n const handleEmailValid = (e) => {\n const { value } = e ? e.target : {};\n\n if (!value) return;\n if (\n value.includes(\"@\") &&\n value.split(\"@\")[1] &&\n value.split(\"@\")[1].split(\".\")[1] &&\n value.split(\"@\")[1].split(\".\")[1]?.length > 1\n ) {\n if (!isAllowedDomain(value)) {\n emailError.current.innerHTML = \"Please enter a valid business email Id\";\n emailError.current.style.display = \"block\";\n submitButtonRef.current.disabled = true;\n } else {\n emailError.current.style.display = \"none\";\n submitButtonRef.current.disabled = false;\n }\n } else {\n emailError.current.style.display = \"none\";\n submitButtonRef.current.disabled = false;\n }\n };\n\n const handleSubmit = async (event) => {\n event.preventDefault();\n const { email, phone, name } = event.target || {};\n if (\n (email?.value || phone?.value || name?.value) &&\n isAllowedDomain(email?.value)\n ) {\n submitButtonRef.current.disabled = true;\n const data = {\n FullName: name?.value,\n PhoneNumber: phone?.value,\n Email: email?.value,\n };\n scheduleDemo({\n data,\n formError: setError,\n fromSuccess: setIsFormSuccess,\n });\n setIsFormSuccess(\"success\");\n } else {\n emailError.current.innerHTML = \"Please enter a valid business email Id\";\n emailError.current.style.display = \"block\";\n submitButtonRef.current.disabled = true;\n }\n };\n useEffect(() => {\n if (openPopup) {\n setIsFormSuccess(false);\n if (emailError.current) emailError.current.style.display = \"none\";\n if (formRef.current) formRef.current.reset();\n }\n }, [openPopup]);\n\n useEffect(() => {\n let setTimeoutId;\n if (isFormSuccess) {\n if (header && isMobile) {\n setTimeoutId = setTimeout(() => {\n setOpenPopup(null);\n if (submitButtonRef.current) submitButtonRef.current.disabled = true;\n //trigger a post message to parent window to close the iframe popup\n window.parent.postMessage({ eventName: \"formSubmitted\" }, \"*\");\n }, 1500);\n } else {\n setTimeoutId = setTimeout(() => {\n setOpenPopup(null);\n if (submitButtonRef.current) submitButtonRef.current.disabled = false;\n window.parent.postMessage({ eventName: \"formSubmitted\" }, \"*\");\n }, 5000);\n }\n }\n return () => clearTimeout(setTimeoutId);\n }, [isFormSuccess]);\n return (\n \n {header && (\n <>\n \n Schedule a demo\n \n handleSubmit(e)}\n >\n {!header && (\n <>\n handleEmailValid(e)}\n required\n autoFocus\n />\n )}\n \n )}\n\n {isMobile ? (\n <>\n handleEmailValid(e)}\n required\n autoFocus\n />\n {isFormSuccess && (\n
\n {(!header || (header && isMobile)) && (\n Contact Us
\n \n )}\n {isFormSuccess && !header ? (\n\n \n Any queries? Please contact{\" \"}\n queries@kpoint.com\n \n
\n ) : (\n <>\n {!header && (\n <>\n \n
\n \n Thank you for reaching us out!\n
\n\n We will get back to you soon.\n
\n\n Welcome to KPOINT, where we revolutionized business\n communications through interactive business.\n
{\" \"}\n \n )}\n\n\n Thank you ! We will get back soon.\n
\n )}\n \n ) : (\n header && (\n <>\n\n handleEmailValid(e)}\n required\n autoFocus\n />\n
\n {isFormSuccess && (\n \n Thank you ! We will get back soon.\n
\n )}\n \n )\n )}\n\n\n Thank you for reaching out! We will revert shortly.\n
\n )} */}\n \n \n )}\n \n );\n};\n\nexport const Share = ({ link }) => {\n const socialLinks = [\n {\n label: \"linkedIn\",\n url: \"https://www.linkedin.com/sharing/share-offsite/?url=\",\n },\n {\n label: \"whatsApp\",\n url: \"https://wa.me/?text=\", //${+919100345880}\n },\n {\n label: \"twitter\",\n url: \"https://twitter.com/intent/tweet?url=\",\n },\n {\n label: \"facebook\",\n url: \"https://www.facebook.com/sharer/sharer.php?u=\",\n },\n ];\n const handleShare = (e) => {\n navigator.clipboard\n .writeText(link || window.location.href)\n .then(() => {\n if (link) {\n let url = e?.url + link;\n socialMediaShare(e.label, url); //social share\n window.open(url, \"_blank\");\n } else if (e?.url) {\n socialMediaShare(e.label, e?.url);\n window.open(e.url + window.location.href, \"_blank\");\n }\n })\n .catch((error) => {\n console.error(\"Error writing to clipboard:\", error);\n });\n };\n\n const [copied, setCopied] = useState(false);\n\n const handleCopy = (text) => {\n navigator.clipboard\n .writeText(text)\n .then(() => {\n setCopied(true);\n setTimeout(() => setCopied(false), 15000); // Reset copied state after 1.5 seconds\n })\n .catch((error) => {\n console.error(\"Error copying to clipboard:\", error);\n });\n };\n\n return (\n\n
\n Share
\n\n {socialLinks?.map((e, index) => {\n return (\n handleShare(e)}\n key={index}\n className={styles?.shareSocialLink}\n >\n
\n );\n })}\n \n
\n \n );\n};\n\nexport const CaseStudyLinkUseCaseSection = ({\n layoutHashLinkId,\n bgcolor,\n title,\n description,\n caseStudies,\n embedCode,\n personalizationInfo,\n media,\n}) => {\n return (\n <>\n \n {\n e.stopPropagation();\n handleCopy(link || window.location.href);\n }}\n >\n {copied ? (\n
\n \n
\n ) : (\n \n//
\n// );\n// }\n\nexport default function TitleDescription({\n Title,\n Description,\n isPlatForm,\n fontColor = \"black\",\n}) {\n const fontColorClass =\n fontColor === \"white\" ? styles.whiteText : styles.blackText;\n\n return (\n {Title}
\n// {isPlatForm ? (\n//\n// {Description?.substring(0, ScreenSize.isMobile() ? 70 : 100)}...\n// \n// Read More\n// \n//
\n// ) : (\n//{Description}
\n// )}\n//{Title}
\n {isPlatForm ? (\n\n {Description}\n
\n )}\n \n );\n}\n\nexport const DesignationDescription = ({\n name,\n company,\n designation,\n Description,\n socialIconElement,\n}) => {\n // const [isVisible, setIsVisible] = useState(false);\n // useEffect(() => {\n // let setTimeoutId;\n // setIsVisible(false);\n // setTimeoutId = setTimeout(() => {\n // setIsVisible(true); // Reset visibility to trigger fade-in\n // }, 500);\n // return () => {\n // clearTimeout(setTimeoutId);\n // };\n // }, [name, company, designation, Description, socialIconElement]);\n return (\n\n
\n {name}
\n\n {designation}\n {company ? \",\" + company : \"\"}\n
\n{company ? company : \"\"}
\n{socialIconElement}
\n \n
\n \n );\n};\n\nexport function CircleDescriptionTitle({ title, description }) {\n return (\n {Description}
\n\n
\n );\n}\n\nexport const MisionVisonTitleDesc = ({ title, description, LifeAtKpoint }) => {\n return (\n {title}
\n\n {description}\n
\n\n \n {title}\n \n
\n );\n};\n\nexport const PlatformTitleDesc = ({ title, description }) => {\n return (\n {description}
\n\n
\n );\n};\n\nexport const UseCaseTitleDesc = ({ title, description }) => {\n return (\n {title}
\n{description}
\n\n
\n );\n};\n\nexport const ClientsNameDesignation = ({ name, designation, company }) => {\n return (\n {title}
\n{description}
\n\n
\n );\n};\n\nexport const ClientsDescription = ({ Description }) => {\n return (\n \n {name}\n
\n |\n\n {designation} {company}\n
\n\n
\n );\n};\n","import React, { useEffect, useState } from \"react\";\nimport { ScheduleADemo, Share } from \"./layoutSections/LayoutSection\";\nimport ContactForm from \"../components/forms/ContactForm\";\nimport { RenderSvg, ScreenSize } from \"../utils/helpers/helper\";\nexport const Popup = ({\n openPopup,\n setOpenPopup,\n scheduleDemo,\n header,\n IsEmbedded,\n isMobile,\n isVertical,\n contact,\n shareLink,\n share,\n}) => {\n const [isLargeScreen, setIsLargeScreen] = useState(false);\n\n useEffect(() => {\n const checkScreenSize = () => {\n setIsLargeScreen(ScreenSize.isLargeScreen());\n };\n\n checkScreenSize();\n }, []);\n\n return (\n <>\n {Description}
\n\n {\n onClose();\n trackContactFormClosed(\n playerRef.current?.info?.personalizedData?.videoTitle\n );\n }}\n aria-label=\"Close\"\n >\n ×\n \n
\n \n );\n};\n\nexport default EmailGate;\n","// extracted by mini-css-extract-plugin\nexport var closeButton = \"EmailGate-module--closeButton--2f220\";\nexport var container = \"EmailGate-module--container--49e30\";\nexport var content = \"EmailGate-module--content--ff40b\";\nexport var emailForm = \"EmailGate-module--emailForm--c7d52\";\nexport var emailInput = \"EmailGate-module--emailInput--fcf0d\";\nexport var error = \"EmailGate-module--error--81e1f\";\nexport var messageContainer = \"EmailGate-module--messageContainer--282b6\";\nexport var submitButton = \"EmailGate-module--submitButton--ee931\";\nexport var success = \"EmailGate-module--success--c41bc\";\nexport var title = \"EmailGate-module--title--cc33b\";","import React, {\n useState,\n useEffect,\n useRef,\n forwardRef,\n useImperativeHandle,\n useCallback,\n useContext,\n useMemo,\n} from \"react\";\nimport * as styles from \"./KpointPlayer.module.css\";\nimport { useInView } from \"react-intersection-observer\";\nimport { KpointPlayerContext } from \"../../context/KpointPlayerContext\";\nimport { graphql, useStaticQuery } from \"gatsby\";\nimport EmailGate from \"./EmailGate\";\nimport { GatsbyImage, getImage } from \"gatsby-plugin-image\";\nimport { useObserver } from \"../../context/ObserverContext\";\nimport {\n sendVideoLoadedEvent,\n sendVideoPauseEvent,\n sendVideoPlayEvent,\n sendVideoProgressEvent,\n} from \"../../utils/GA4Tracking\";\n\n/**\n * Merges two widget configuration objects. It combines the configurations of widgets,\n * concatenating lists within widgets if present, or otherwise merging widget properties.\n * This helps in dynamically configuring the player widgets based on different inputs.\n *\n * @param {Object} config1 - The first configuration object.\n * @param {Object} config2 - The second configuration object.\n * @returns {Object} - The merged configuration object.\n */\nconst mergeWidgetConfig = function (config1 = {}, config2 = {}) {\n let mergedConfig = { ...config1 };\n for (let widgetName in config2) {\n let widgetConfig = mergedConfig[widgetName];\n if (!widgetConfig) {\n mergedConfig[widgetName] = config2[widgetName];\n } else if (\n typeof widgetConfig === \"object\" &&\n Array.isArray(widgetConfig.list)\n ) {\n widgetConfig.list = [...widgetConfig.list, ...config2[widgetName].list];\n } else {\n mergedConfig[widgetName] = { ...widgetConfig, ...config2[widgetName] };\n }\n }\n return mergedConfig;\n};\n\n/**\n * The KpointPlayer component provides a customizable video player using kPoint library.\n * It supports dynamic video IDs based on device orientation and merges external widget configurations.\n *\n * @param {Object} props - Props for configuring the video player.\n * @param {React.Ref} ref - Ref forwarded for external control of the video player.\n */\nconst KpointPlayer = forwardRef((props, ref) => {\n const {\n videoId,\n fakeVideoId,\n horizontalVideoId,\n verticalVideoId,\n fakeHorizontalVideoId,\n fakeVerticalVideoId,\n host,\n params = {},\n externalWidgetsConfig = {},\n packageId,\n personalizationInfo,\n thumbnailPath,\n isVerticalVideo,\n containerClassNames = \"\",\n videoClassNames = \"\",\n state = \"PUBLISHED\",\n playWhenInViewOnly = true,\n children,\n onVideoLoad = () => {},\n onVideoRemove = () => {},\n onVideoEnd = () => {},\n } = props;\n\n const { isMuteRef, addPlayer, removePlayer } =\n useContext(KpointPlayerContext);\n const childRef = useRef();\n // const [customformOpened, setCustomformOpened] = useState(false);\n const customformOpenRef = useRef(false);\n const [emailGateOpened, setEmailGateOpened] = useState(false);\n const playerRef = useRef(null);\n\n const playerIsPlayingTimeout = useRef(null);\n\n const { observe, unobserve } = useObserver();\n\n const [videoState, setVideoState] = useState(null);\n\n const isVisibleRef = useRef(false);\n // const { ref: inLoadedViewRef, inView: inLoadedView } = useInView({\n // threshold: 0.1,\n // rootMargin: ` ${\n // typeof window !== \"undefined\" ? window.innerHeight : 0\n // }px 0px ${typeof window !== \"undefined\" ? window.innerHeight : 0}px 0px`,\n // triggerOnce: true,\n // });\n\n // const setRefs = useCallback(\n // (node) => {\n // childRef.current = node;\n // inViewRef(node);\n // // setLoadedViewRef(node);\n // },\n // [inViewRef]\n // );\n\n // const setLoadedViewRef = useCallback(\n // (node) => {\n // inLoadedViewRef(node);\n // },\n // [inLoadedViewRef]\n // );\n /**\n * Initializes the video player with the provided configuration.\n * It fetches additional package details if a packageId is provided and merges widget configurations.\n */\n\n useEffect(() => {\n const handelStateChange = (event) => {\n if (\n playerRef.current &&\n event.data === playerRef.current.playStates.ENDED\n ) {\n onVideoEnd();\n }\n };\n\n if (playerRef.current) {\n playerRef.current.addEventListener(\"onStateChange\", handelStateChange);\n }\n\n return () => {\n if (playerRef.current) {\n playerRef.current.removeEventListener(\n \"onStateChange\",\n handelStateChange\n );\n }\n };\n }, [onVideoEnd]);\n\n const skipNextMuteEventRef = useRef(false);\n const previousMuteStateRef = useRef(null);\n\n const initPlayer = async () => {\n try {\n const options = {\n kvideoId: isSmartPlayer()\n ? isMobile()\n ? verticalVideoId\n : horizontalVideoId\n : videoId,\n videoHost: host,\n params,\n externalWidgetsConfig,\n };\n\n if (packageId) {\n let packageVideoId = isSmartPlayer()\n ? isMobile()\n ? fakeVerticalVideoId ?? verticalVideoId\n : fakeHorizontalVideoId ?? horizontalVideoId\n : fakeVideoId ?? videoId;\n\n let packageDetails = await fetch(\n `https://${host}/api/v3/videos/${packageVideoId}/dyn/embed?id=${packageId}&state=${state}`\n );\n packageDetails = await packageDetails.json();\n const embedCode = packageDetails.videoEmbedcode;\n\n const parser = new DOMParser();\n const doc = parser.parseFromString(embedCode, \"text/html\");\n\n const embedCodeDiv = doc.querySelector(\"div\");\n\n //expect divElement other than elements in the body\n\n if (embedCodeDiv) {\n const body = doc.querySelector(\"body\");\n const head = doc.querySelector(\"head\");\n const bodyElements = Array.from(body.children).filter(\n (element) => element !== embedCodeDiv\n );\n\n let scripts = [];\n bodyElements.forEach((element) => {\n if (element.tagName === \"SCRIPT\") {\n scripts.push(element);\n }\n });\n Array.from(head.children).forEach((element) => {\n if (element.tagName === \"SCRIPT\") {\n scripts.push(element);\n }\n });\n\n scripts.forEach((script) => {\n const newScript = document.createElement(\"script\");\n if (script.src) {\n if (script.src.includes(\"videofront-vega\")) {\n return;\n }\n newScript.src = script.src;\n } else {\n newScript.textContent = script.innerHTML;\n }\n if (script.type === \"module\") {\n newScript.type = \"module\";\n }\n document.body.appendChild(newScript);\n });\n\n let markup = Array.from(head.children)\n .map((element) => element.outerHTML)\n .join(\"\");\n markup += bodyElements.map((element) => element.outerHTML).join(\"\");\n childRef.current.parentElement.querySelector(\n `.${styles?.markupTemplateContainer}`\n ).innerHTML = markup;\n\n const videoParams = JSON.parse(\n embedCodeDiv.dataset.videoParams || \"{}\"\n );\n options.params = { ...options.params, ...videoParams };\n\n if (params[\"add-widgets\"]) {\n options.params[\"add-widgets\"] += `,${videoParams[\"add-widgets\"]}`;\n }\n options.externalWidgetsConfig = mergeWidgetConfig(\n externalWidgetsConfig,\n JSON.parse(embedCodeDiv.dataset.widgetsConfig || \"{}\")\n );\n options.personalizationInfo =\n embedCodeDiv.dataset.personalizationInfo || personalizationInfo;\n options.thumbnailPath =\n embedCodeDiv.dataset.thumbnailPath || thumbnailPath;\n }\n }\n\n //Add the local muted state to the player\n options.params.muted = isMuteRef.current;\n\n if (playWhenInViewOnly) {\n options.params.autoplay = false;\n }\n\n // Initialize the player with the provided configuration\n const playerInstance = window.kPoint.Player(childRef.current, options);\n playerRef.current = playerInstance;\n\n // Show the player once it is loaded\n playerInstance.addEventListener(\"loaded\", () => {\n addPlayer(playerInstance);\n childRef.current.classList.remove(styles?.notLoaded);\n childRef.current.parentElement\n .querySelector(`.${styles?.playerOverlay}`)\n .classList.remove(styles?.notLoaded);\n childRef.current.parentElement\n .querySelector(`.${styles?.thumbnail}`)\n ?.classList.remove(styles?.notLoaded);\n\n // Play the video if it should play when in view and is currently in 70% is visible\n if (playWhenInViewOnly && isVisibleRef.current) {\n playerInstance.playVideo();\n }\n\n if (window.gtag) {\n sendVideoLoadedEvent(playerInstance.info.personalizedData.videoTitle);\n }\n\n if (previousMuteStateRef.current === false) {\n setTimeout(() => {\n playerInstance?.unmute();\n playerInstance?.setVolume(1);\n }, 100);\n }\n });\n\n playerInstance?.addEventListener(\"timeupdate\", () => {\n varifyCorrectVideoPlaying(playerInstance);\n });\n playerInstance.addEventListener(\"customformOpen\", () => {\n customformOpenRef.current = true;\n });\n\n playerInstance.addEventListener(\"customformClose\", () => {\n customformOpenRef.current = false;\n });\n\n playerInstance.addEventListener(\"muted\", () => {\n if (skipNextMuteEventRef.current) {\n skipNextMuteEventRef.current = false;\n return;\n }\n isMuteRef.current = true;\n });\n\n onVideoEnd(playerInstance);\n onVideoLoad(playerInstance);\n } catch (error) {\n console.error(\"Failed to initialize the KpointPlayer:\", error);\n // Handle initialization failure (e.g., show a fallback UI)\n }\n };\n\n /**\n * Determines if the current device is mobile based on the user agent.\n * @returns {boolean} - True if the device is mobile, false otherwise.\n */\n const isMobile = () =>\n typeof window !== \"undefined\" &&\n /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(\n navigator.userAgent\n );\n\n /**\n * Checks if the player should use smart logic for video IDs based on device orientation.\n * @returns {boolean} - True if both horizontal and vertical video IDs are provided, false otherwise.\n */\n const isSmartPlayer = () => horizontalVideoId && verticalVideoId;\n const [gccId, setGccId] = useState(\n isSmartPlayer()\n ? isMobile()\n ? verticalVideoId\n : horizontalVideoId\n : videoId\n );\n\n const data = useStaticQuery(graphql`\n query StrapiVideo {\n allStrapiVideo {\n edges {\n node {\n id\n videoId\n host\n title\n thumbnail {\n name\n localFile {\n childImageSharp {\n gatsbyImageData(layout: FULL_WIDTH)\n }\n }\n }\n }\n }\n }\n }\n `);\n\n const videoDetails = useMemo(() => {\n return data.allStrapiVideo.edges.find((video) => {\n return video.node.videoId === gccId;\n });\n }, [gccId]);\n\n const image = getImage(\n videoDetails?.node?.thumbnail?.localFile?.childImageSharp?.gatsbyImageData\n );\n\n const varifyCorrectVideoPlaying = (playerInstance) => {\n if (!isVisibleRef?.current && playWhenInViewOnly && playerInstance) {\n playerInstance?.pauseVideo();\n }\n };\n\n const varifyPlayerIsPlaying = () => {\n const player = playerRef.current;\n if (!player) return;\n if (\n player.getPlayState() === player.playStates.UNSTARTED &&\n isVisibleRef.current\n ) {\n player.playVideo();\n playerIsPlayingTimeout.current = setTimeout(() => {\n varifyPlayerIsPlaying();\n }, 200);\n } else {\n clearTimeout(playerIsPlayingTimeout.current);\n }\n };\n\n useImperativeHandle(ref, () => ({\n playVideo: () => playerRef.current?.playVideo(),\n rePlayVideo: () => {\n playerRef.current.rePlayVideo();\n },\n pauseVideo: () => {\n playerRef.current?.pauseVideo();\n },\n mute: () => {\n playerRef.current?.mute();\n playerRef.current?.setVolume(0);\n },\n unmute: () => {\n playerRef.current?.unmute();\n playerRef.current?.setVolume(1);\n },\n seekTo: (time) => {\n playerRef.current.seekTo(time);\n },\n getCurrentTime: () => {\n return playerRef.current.getCurrentTime();\n },\n getDuration: () => {\n return playerRef.current.getDuration();\n },\n getVolume: () => {\n return playerRef.current.getVolume();\n },\n setVolume: (volume) => {\n playerRef.current.setVolume(volume);\n },\n setWidgetsConfig: (widgetsConfig) => {\n playerRef.current.setWidgetsConfig(widgetsConfig);\n },\n setWidgetConfig: (widgetsConfig, widgetName) => {\n playerRef.current.setWidgetsConfig({\n [widgetName]: widgetsConfig[widgetName],\n });\n },\n\n togglePlayPauseVideo: () => {\n if (!playerRef.current) {\n return;\n }\n if (\n playerRef.current.getPlayState() ===\n playerRef.current.playStates.PLAYING\n ) {\n playerRef.current.pauseVideo();\n } else {\n playerRef.current.playVideo();\n }\n },\n\n loadVideoById: (newVideoId) => {\n if (playerRef.current && playerRef.current.loadVideoById) {\n // Store current mute state before loading new video\n previousMuteStateRef.current = isMuteRef.current;\n skipNextMuteEventRef.current = true;\n\n playerRef.current.loadVideoById(newVideoId);\n setGccId(newVideoId);\n } else {\n console.log(\"loadVideoById is not available\");\n }\n },\n\n playStates: () => {\n if (playerRef.current && playerRef.current.playStates.ENDED) {\n console.log(\"video ended\");\n }\n },\n\n isVideoEnded: () => {\n return (\n playerRef.current &&\n playerRef.current.getPlayState() === playerRef.current.playStates.ENDED\n );\n },\n\n inView: isVisibleRef.current,\n playWhenInViewOnly: playWhenInViewOnly,\n\n postCustomEvent: (eventName, args = {}) => {\n playerRef?.current?.postCustomEvent(eventName, args);\n },\n }));\n\n //\n useEffect(() => {\n const element = childRef.current;\n\n if (element) {\n // Define callbacks\n //todo: add it in useCallback\n\n element.addEventListener(\"click\", () => {\n const isPlaying = playerRef.current.getPlayState() == 2;\n if (window.gtag && isPlaying) {\n const videoTitle = playerRef.current.info.personalizedData.videoTitle; // Get the video title dynamically\n sendVideoPlayEvent(videoTitle);\n } else if (window.gtag && !isPlaying) {\n const videoTitle = playerRef.current.info.personalizedData.videoTitle; // Get the video title dynamically\n sendVideoPauseEvent(videoTitle);\n }\n });\n\n const inViewCallback = (inView) => {\n isVisibleRef.current = inView;\n if (!playWhenInViewOnly || customformOpenRef.current) {\n return;\n }\n if (inView) {\n playerRef.current?.playVideo?.();\n playerIsPlayingTimeout.current = setTimeout(() => {\n varifyPlayerIsPlaying();\n }, 200);\n } else {\n playerRef.current?.pauseVideo?.();\n clearTimeout(playerIsPlayingTimeout.current);\n }\n };\n\n const loadCallback = (shouldLoad) => {\n if (shouldLoad) {\n if (window.kPoint) {\n initPlayer();\n } else {\n document.addEventListener(\"playerSilkLoaded\", initPlayer);\n }\n }\n };\n\n observe(element, inViewCallback, loadCallback);\n }\n function handleOnClickButton(event) {\n const { p0, p1 } = event.detail;\n if (p0 !== gccId) {\n return;\n }\n\n if (p1 === \"emailgate\") {\n customformOpenRef.current = true;\n\n setEmailGateOpened(true);\n playerRef?.current?.pauseVideo();\n }\n }\n\n document.addEventListener(\"kpw-onclick-button\", handleOnClickButton);\n return () => {\n document.removeEventListener(\"kpw-onclick-button\", handleOnClickButton);\n onVideoRemove(playerRef.current);\n removePlayer(playerRef.current);\n unobserve(element);\n };\n }, []);\n\n return (\n <>\n Contact Us
\n \n\n
\n \n {children}\n {emailGateOpened && (\n {\n setEmailGateOpened(false);\n customformOpenRef.current = false;\n\n playerRef.current.playVideo();\n }}\n playerRef={playerRef}\n />\n )}\n
\n \n {image && (\n <>\n
\n \n
\n