[WIP] HelpScout enhancements #830
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,72 @@ | ||
| import React, { useCallback, useEffect, useState } from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import { GU } from '../../utils' | ||
| import { createGlobalStyle } from 'styled-components' | ||
|
|
||
| const BEACON_EMBED = | ||
| '!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});' | ||
| const HELPSCOUT_ID = '163e0284-762b-4e2d-b3b3-70a73a7e6c9f' | ||
|
|
||
| function useHelpScoutBeacon(optedIn) { | ||
| const [beaconInit, setBeaconInit] = useState(false) | ||
|
|
||
| // Load the script if it doesn’t exist yet and optedIn | ||
| // is true, then set the value of Beacon. | ||
| useEffect(() => { | ||
| let script | ||
|
|
||
| if (optedIn && !beaconInit) { | ||
| if (!window.Beacon) { | ||
| script = document.createElement('script') | ||
| script.innerHTML = BEACON_EMBED | ||
| document.body.appendChild(script) | ||
| } | ||
| window.Beacon('init', HELPSCOUT_ID) | ||
| setBeaconInit(true) | ||
| } | ||
|
|
||
| return () => script.remove() | ||
| }, [optedIn, beaconInit]) | ||
|
|
||
| const beacon = useCallback( | ||
| (...params) => { | ||
| if (window.Beacon && optedIn && beaconInit) { | ||
|
There was a problem hiding this comment. What happens when this function is called but There was a problem hiding this comment. I need to check again, but IIRC this The
As a note, the reason why it there is a wrapping function here (instead of exposing There was a problem hiding this comment.
This is not in synch right? So, maybe there is some delay before the |
||
| window.Beacon(...params) | ||
| } | ||
| }, | ||
| [optedIn, beaconInit] | ||
| ) | ||
|
|
||
| return beacon | ||
| } | ||
|
|
||
| const BeaconHeadScripts = ({ optedIn }) => { | ||
| return optedIn ? <HelpscoutStyle /> : null | ||
| } | ||
|
|
||
| BeaconHeadScripts.propTypes = { | ||
| optedIn: PropTypes.bool, | ||
| } | ||
|
|
||
| BeaconHeadScripts.defaultProps = { | ||
| optedIn: false, | ||
| } | ||
|
|
||
| const HelpscoutStyle = createGlobalStyle` | ||
| .BeaconFabButtonFrame, | ||
| #beacon-container .Beacon div:first-of-type { | ||
| display: none !important; | ||
| } | ||
| @media (min-width: 768px) { | ||
| #beacon-container .BeaconContainer { | ||
| height: 600px !important; | ||
| width: 350px !important; | ||
| top: unset !important; | ||
| left: unset !important; | ||
| bottom: 80px !important; | ||
| right: ${3 * GU}px !important; | ||
| } | ||
| } | ||
| ` | ||
| export { useHelpScoutBeacon } | ||
| export default BeaconHeadScripts | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,12 @@ | ||
| import React from 'react' | ||
|
|
||
| const IconQuestion = props => ( | ||
| <svg width={15} height={26} fill="none" viewBox="0 0 15 26" {...props}> | ||
| <path | ||
| d="M9.006 25.2H5.87v-3.05h3.137v3.05zm.55-9.684l-.275.229c-.158.115-.275.381-.275.61v2.783H5.87v-2.783c0-1.182.549-2.287 1.451-3.012l.275-.229c2.744-2.135 4.077-3.24 4.077-5.147a4.043 4.043 0 0 0-1.235-2.916 4.28 4.28 0 0 0-3-1.2c-2.43 0-4.234 1.753-4.234 4.116H.066C.066 3.964 3.32.8 7.438.8a7.471 7.471 0 0 1 5.215 2.097 7.06 7.06 0 0 1 2.156 5.07c0 3.47-2.43 5.376-5.254 7.549z" | ||
| fill="#fff" | ||
| /> | ||
| </svg> | ||
| ) | ||
|
|
||
| export default IconQuestion |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Super how this works!
I think this 2 actions (
initandsetBeaconInit) should be triggered in theonloadmethod from script no?Maybe attach the script to the head instead to the body?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
On another note, by removing the
beaconReadyprop the loader is no longer shown while the script is loading, you can test this by throttling thenetworkspeed in chrome, let's figure a way to show theLoadingRingto avoid the modal from disappearing and reappearing.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Beacon.init()gets queued and it’s probably a good idea to keep it first, as the script will probably refuse to execute the other methods if they are called before.beaconInitis used to know that the script is being initialized, so that we don’t inject the script twice.