Scale the use of hand raise lead modal
Currently the hand raise lead button and modal are included in the same vue component. This presents a few issues as we scale its use:
- If used inside a popover, currently the only way to have the
hide
event of the popover to not close the hand raise lead modal that is launched inside it is to invoke another vue component through plain html so that it becomes a sibling as discussed/seen in this thread - If we need the hand raise lead modal in a page to be triggered in more than one place, i.e. separate buttons maybe in sidebar and in the page itself on the billings page, we are including the modal multiple times. @rliu-gl pointed this out.
Plan
Implement a solution similar to the invite members modal where we separated the button from the modal which then allows us to load the modal as a sibling, solving the popover issue and also control/detect loading of the modal more than once with methodology like this. We'll plan to use eventHub to control communication between the button and modal.
-
Move the modal and button into separate components so they can be used independently -
Modal !149431 (merged) -
Button !149908 (merged)
-
-
Add eventhub integration !151089 (merged) -
Use the new implementation for the trial status popover use -
De-duplicate/refactor remaining code.
original description
The following discussion from !146049 (merged) should be addressed:
-
@rhardarson started a discussion: (+2 comments) suggestion (non-blocking) follow the pattern of using
trackingEvents
fromPOPOVER
as the otherdata-track-*
fields are doingIt's not a big deal, but if we have a mix of constants and hard coded strings it becomes a bit more difficult to maintain in the long run
So I had a look at this more and this
div
has the classjs-hand-raise-lead-button
which is just initialising a vue.js component. I understand this is used elsewhere in haml but we should just be using the vue.js component here directly. - @robyrne