Reuse Happychat in Calypso

[oandregal]

These are the approaches I was thinking of:

Use the available dist target

We could take the target/dist/happychat.js and use it in Calypso by building a React/Redux wrapper on top of that. This is the approach we've followed to integrate the directly library in Calypso see.

Create a new target that reuses the full library

This is the approach followed by the notifications-panel component in Calypso. See calypso and notifications-panel.

This approach requires some tweaks to integrate the CSS and teach webpack to process the React components from the npm package.

The component initializes its own internal store that is separated from the target (Calypso). But it also uses the Calypso Redux store to pass some props and action dispatchers.

Create a new target that imports the separate components

The way this may work is:

• the npm package will export the React UI components (from ui/) and the Redux state reducer & middleware (from state/). They won't be connected together (we won't export src/index or src/form).
• the target (Calypso) will import them and connect them as necessary.

This may have the advantage to only import the components needed (no pulling of the contact form, for example).

[oandregal]

For the record, this thread p7OimR-wc-p2 contains some valuable conversations.

[oandregal]

cc @unDemian and @mattwondra

[mattwondra]

@nosolosw In p7OimR-m0-p2 we expected to see "Happychat in a panel" by about now — I just wanted to confirm whether work on this has been started or not? That's really what we need to make this work in Calypso, so if work hasn't been started on that yet, that's likely where we'll need to begin.

[oandregal]

@mattwondra that changed mid-project: although that was scheduled for v2, it wasn't a priority for woo and they preferred v2 to be focused on other things (tickets and so).

[oandregal]

An issue that's relevant to this: https://github.com/Automattic/happychat-client/issues/50