| 1 |
import React, { Fragment } from 'react'; |
| 2 |
import ReactDOM from 'react-dom'; |
| 3 |
import { domElements } from '../constants/selectors'; |
| 4 |
import useAppEmbedder from './useAppEmbedder'; |
| 5 |
import { App } from './constants'; |
| 6 |
import { IframeErrorPage } from './IframeErrorPage'; |
| 7 |
|
| 8 |
interface PortalProps extends React.PropsWithChildren { |
| 9 |
app: App; |
| 10 |
createRoute: boolean; |
| 11 |
} |
| 12 |
|
| 13 |
const IntegratedIframePortal = (props: PortalProps) => { |
| 14 |
const container = document.getElementById(domElements.leadinIframeContainer); |
| 15 |
const iframeNotRendered = useAppEmbedder( |
| 16 |
props.app, |
| 17 |
props.createRoute, |
| 18 |
container |
| 19 |
); |
| 20 |
|
| 21 |
if (container && !iframeNotRendered) { |
| 22 |
return ReactDOM.createPortal(props.children, container); |
| 23 |
} |
| 24 |
|
| 25 |
return ( |
| 26 |
<Fragment> |
| 27 |
{(!container || iframeNotRendered) && <IframeErrorPage />} |
| 28 |
</Fragment> |
| 29 |
); |
| 30 |
}; |
| 31 |
|
| 32 |
const renderIframeApp = () => { |
| 33 |
const iframeFallbackContainer = document.getElementById( |
| 34 |
domElements.leadinIframeContainer |
| 35 |
); |
| 36 |
|
| 37 |
let app: App; |
| 38 |
const queryParams = new URLSearchParams(location.search); |
| 39 |
const page = queryParams.get('page'); |
| 40 |
const createRoute = queryParams.get('leadin_route[0]') === 'create'; |
| 41 |
|
| 42 |
switch (page) { |
| 43 |
case 'leadin_forms': |
| 44 |
app = App.Forms; |
| 45 |
break; |
| 46 |
case 'leadin_chatflows': |
| 47 |
app = App.LiveChat; |
| 48 |
break; |
| 49 |
case 'leadin_settings': |
| 50 |
app = App.PluginSettings; |
| 51 |
break; |
| 52 |
case 'leadin_user_guide': |
| 53 |
default: |
| 54 |
app = App.Plugin; |
| 55 |
break; |
| 56 |
} |
| 57 |
|
| 58 |
ReactDOM.render( |
| 59 |
<IntegratedIframePortal app={app} createRoute={createRoute} />, |
| 60 |
iframeFallbackContainer |
| 61 |
); |
| 62 |
}; |
| 63 |
|
| 64 |
export default renderIframeApp; |
| 65 |
|
