{"version":3,"file":"static/js/3654.d28a4007.js","sources":["webpack://@jotforminc/portal/./src/modules/Builder/components/HomePage/MobileView/components/headers/PhoneStatusBar.js","webpack://@jotforminc/portal/./src/modules/Builder/components/HomePage/MobileView/components/devices/Phone.js","webpack://@jotforminc/portal/./src/modules/Builder/components/HomePage/MobileView/components/popovers/QuickQrPopover.js","webpack://@jotforminc/portal/../../libs/common/src/utils/api/index.js","webpack://@jotforminc/portal/../../libs/common/src/components/ProductQRImage/scProductQrImage.js","webpack://@jotforminc/portal/../../libs/common/src/components/ProductQRImage/index.js","webpack://@jotforminc/portal/../../libs/styled-copy-button/src/index.js","webpack://@jotforminc/portal/../../../../src/icons/media/qr.svg"],"sourcesContent":["/* eslint-disable max-len */\nimport React from 'react';\n\n/* eslint-disable */\nconst PhoneStatusBar = () => {\n const date = new Date();\n const time = `${date.getHours()}:${date\n .getMinutes()\n .toString()\n .padStart(2, \"0\")}`;\n\n return (\n \n );\n};\n\nexport default PhoneStatusBar;\n","import React, {\n memo, useCallback, useEffect, useRef, useState\n} from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useDebounce } from '@jotforminc/hooks';\nimport { object, string } from 'prop-types';\nimport { prepareAppURL } from '../../../../../../PublicApp/utils';\nimport selectors from '../../../../../../../store/selectors';\nimport PublicAppLoading from '../../../../../../../components/PublicAppLoading';\nimport PhoneStatusBar from '../headers/PhoneStatusBar';\nimport { APP_PREVIEW_STATES } from '../../../../../../../constants';\nimport { setLivePreviewStatus } from '../../../../../../../store/actionCreators';\nimport { DESTINATION_TYPES } from '../../../../../../../constants/navigation';\n\nconst Phone = ({ itemRef, orientation }) => {\n const dispatch = useDispatch();\n const lastInteractedPageID = useSelector(selectors.getLastInteractedPageID);\n const selectedItemID = useSelector(selectors.getSelectedPortalItem);\n const livePreviewStatus = useSelector(selectors.livePreviewStatusSelector);\n const updatedAt = useSelector(selectors.getAppUpdatedAt);\n const iframeRef = useRef(null);\n const isAppReady = useSelector(selectors.isAppReadySelector);\n const scope = useSelector(selectors.getScope);\n const [appURL] = useState(prepareAppURL(scope, isAppReady));\n const [reloadIframe, setReloadIframe] = useState(true);\n const { appHeaderBgColor } = useSelector(selectors.getAppHeaderProperties);\n\n useEffect(() => {\n if (livePreviewStatus === APP_PREVIEW_STATES.LOADING) {\n setReloadIframe(!reloadIframe);\n }\n }, [livePreviewStatus]);\n\n const sendMessage = action => {\n const iframe = iframeRef.current;\n if (iframe && iframe.contentWindow) {\n iframe.contentWindow.postMessage({\n action\n }, '*');\n }\n };\n\n const debouncedPostMessage = useDebounce(sendMessage, 100);\n const debouncedUpdateCallback = useDebounce(sendMessage, 1000);\n\n useEffect(() => {\n sendMessage({\n name: 'UPDATE_APP'\n });\n debouncedUpdateCallback({\n name: 'UPDATE_APP'\n });\n }, [updatedAt]);\n\n useEffect(() => {\n if (lastInteractedPageID) {\n sendMessage({\n name: 'NAVIGATE_TO_PAGE',\n payload: {\n destinationType: DESTINATION_TYPES.PAGE,\n pageID: lastInteractedPageID\n }\n });\n }\n }, [lastInteractedPageID]);\n\n useEffect(() => {\n if (selectedItemID === 'contactInformationItem') {\n debouncedPostMessage({\n name: 'NAVIGATE_TO_PAGE',\n payload: {\n destinationType: DESTINATION_TYPES.SPECIAL_PAGE,\n pageID: 'checkout'\n }\n });\n } else {\n debouncedPostMessage({\n name: 'SELECT_ITEM',\n payload: {\n itemID: selectedItemID\n }\n });\n }\n }, [selectedItemID]);\n\n const handleOnLoad = useCallback(() => {\n dispatch(setLivePreviewStatus(APP_PREVIEW_STATES.READY));\n }, []);\n\n return (\n
\n Use your camera to scan the QR code and preview the app on your device.\n
\n