extracting active CTA state from header component into global

[ParkerGits]

Building off of #826 and #824, this pitch aims to outline approaches for extracting CTA state to the global level.

From recent related discussions, I can discern two high-level goals for CTA's on egghead:

1. Personalize what CTA the learner sees based on that learner's activity. "What should we show the learner right now?"
2. Be able to display the appropriate CTA anywhere (i.e. Add polite CTA to articles #824), not just in the header.

Regarding personalized CTAs

The data sources that I can clearly see being utilized for the personalization of CTAs are

1. "scores" for technologies in customer-io (mentioned by @joelhooks in the "active cta" should be global state and not isolated to the header button #826)
2. answers from the sorting hat survey
3. a localstorage database for anon users

My mention of the sorting hat survey is related to @MaggieAppleton's comment in #824.

Re: plinko component. If we're going to build this as a reusable component and already getting the user to answer questions on an in-app pop-up, we may as well create the in the functionality to ask them multiple questions before delivering a CTA.
Eg. Do you want to improve you frontend skills? Yes / no --> What level are you at in your career? Just starting out / Junior / Mid-level / Senior --> Want our {introductory/advanced} series on {React/JavaScript}?

If the existing sorting hat survey questions are insufficient for determining what CTA to present, we could either iterate on the existing survey questions or offer a new survey related solely to personalizing CTAs.

Concerning the data in customer-io and convertkit: I have little knowledge about how that data is stored; I'm likely due for a tour of these tools before I get going here.

Regarding global access to CTA state

I'm envisioning either

1. a reducer whose input is data that is already made globally available (useViewer(), useCio(), localstorage...) and whose output is the appropriate Active CTA state
2. a global Active CTA state machine that initializes to the appropriate CTA based on customer-io, convertkit, localstorage, etc., and transitions according to user activity.

At the moment, the Active CTA state is local to the Header component and controlled within a switch statement. As a short-term solution, this logic can easily be extracted into an "Active CTA" state machine where the state can then be provided globally.

(link to machine gist)

However, I have little insight into whether this option is preferable to the reducer in the long run. Again, I should become more familiar with the data provided by customer-io and convertkit before I take this any further.

Recap & Looking Forward

• "What should we show the learner right now?"
• We seem to have a lot of data that can help us answer this question.
  • customer-io, sorting hat survey, convertkit, localstorage
  • I'm going to need a tour of customer-io and convertkit data before I can help utilize it.
• How should we provide Active CTA state globally?
  • reducer that utilizes data already made globally available
  • ... or a global "Active CTA" state machine
  • leaning toward using a state machine if there are no clear downsides

[joelhooks]

https://github.com/skillrecordings/products/blob/main/packages/player/src/context/video-context.tsx

some of the state machine as context work here in the player makes sense to me to use here

I have not added persisting state to this yet, but it's something xState supports so you can load the state of a machine from local storage (or API)

the "sorting hat" is poorly named because it's a generic data-driven survey mechanism that can be used for asking any sequence of questions in a branching fashion.

You can configure a survey to ask any number of questions before reaching a "final" state that is some CTA or message.