Update Intercom component to accept style-related props #101

myleslinder · 2021-09-05T02:16:45Z

The supported props are the same as what intercom supports
as messenger attributes.

What does this PR introduce?

In a few bullet points, please describe the changes this Pull Request makes. e.g.:

Updates the Intercom component to accept alignment, verticalPadding, and horizontalPadding props
Resolves feature request [Feature Request] Ability to style components #92
updates README.md with a better description for contributions

Related issues

Resolves feature request [Feature Request] Ability to style components #92

The supported props are the same as what intercom supports as messenger attributes.

Intercoms attributes are snake_case but the props to the component are camelCase to remain inline with the rest of the project.

vercel · 2021-09-05T02:16:49Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/calibreapp/react-live-chat-loader/WJiRbhiEwUs2bwHuv5ibwc4yJhcX
✅ Preview: https://react-live-chat-loader-git-fork-myleslinder-f-a88a56-calibreapp.vercel.app

mikedijkstra · 2021-09-07T00:33:34Z

src/components/Intercom/index.tsx

@@ -154,7 +170,10 @@ const Intercom = ({ color }: Props): JSX.Element | null => {
 }

 Intercom.defaultProps = {
-  color: '#333333'
+  color: '#333333',
+  alignment: 'left',


Should this be right to maintain existing implementations?

mikedijkstra · 2021-09-07T03:01:02Z

@myleslinder I found this in the Intercom Docs:

Messenger will revert to the default padding setting (20 / 20) on mobile

Therefore we need to ensure that on mobile the padding values are set to 20 and only set them to those specified by the props after the breakpoint.

Also, these values need to be added into window.intercomSettings to apply to the actual widget. We could leave this up to the implementor and just make a note in the README?

All props provided to the Intercom component are deemed to be the source of truth for styling those aspects of the widget. This ensures there's no style mismatch between the facade and the loaded widget. A styling mismatch can still occur if a custom icon is set in Intercom. To mirror the default Intercom widget behavior padding props are only applied on screen sizes with a width greater than 900px. For smaller screen sizes the default padding of 20px is used. Fix incorrect alignment proptypes default prop value

myleslinder · 2021-09-07T23:40:47Z

I've addressed the issue with the incorrect alignment value being set on default props for proptypes.

I've also added the changes for the mobile padding and forwarding the provided props to window.intercomSettings. Re: intercom settings, I've forwarded all the provided props, as opposed to just the ones for padding, so that it's consistent that the values you provide to the Intercom component are all the source of truth for the facade and the loaded widget.

Let me know your thoughts on the changes.

mikedijkstra · 2021-09-08T01:44:54Z

@myleslinder We're getting an issue building the Intercom component due to window.intercomSettings ?? {}. You probably can't see the logs so I'll paste them here:

09:37:50.930 | Failed to compile.
-- | --
09:37:50.938 | ../module/components/Intercom/index.js 108:87
09:37:50.938 | Module parse failed: Unexpected token (108:87)
09:37:50.939 | You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
09:37:50.939 | \|   const windowWidth = useWindowWidth();
09:37:50.939 | \|   useEffect(() => {
09:37:50.939 | >     window.intercomSettings = _objectSpread(_objectSpread({}, window.intercomSettings ?? {}), {}, {
09:37:50.939 | \|       alignment,
09:37:50.939 | \|       background_color: color,
09:37:50.940 | > Build error occurred
09:37:50.943 | Error: > Build failed because of webpack errors
09:37:50.943 | at build (/vercel/path0/website/node_modules/next/dist/build/index.js:13:900)
09:37:50.961 | npm ERR! code ELIFECYCLE
09:37:50.961 | npm ERR! errno 1
09:37:50.965 | npm ERR! react-live-chat-loader-example-app@0.0.1 build: `next build`
09:37:50.966 | npm ERR! Exit status 1
09:37:50.966 | npm ERR!
09:37:50.966 | npm ERR! Failed at the react-live-chat-loader-example-app@0.0.1 build script.
09:37:50.966 | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
09:37:50.971 | npm ERR! A complete log of this run can be found in:
09:37:50.972 | npm ERR!     /vercel/.npm/_logs/2021-09-07T23_37_50_966Z-debug.log
09:37:50.987 | Error: Command "cd .. && npm run build && npm link website/node_modules/react && cd website && npm run build" exited with 1

README.md

benschwarz · 2021-09-13T22:46:56Z

Thanks so much for getting this over the line @myleslinder.

I'm happy with docs on review, is there anything else outstanding for you @mikedijkstra?

mikedijkstra · 2021-09-14T01:17:51Z

@myleslinder Build is now passing 👍

I tested the responsive behaviour locally and it seems Intercom isn't using the browser width alone. When I emulate a mobile device the real widget is locked at 20px and 20px, however when I resize the browser it's at the position set by the updated settings:

Therefore as it is now, we'll have mismatched positions on browser sizes < 900px as it's loading:

mikedijkstra · 2022-01-06T23:17:42Z

Hi @myleslinder — Were you able to replicate the issue I saw above? Are you still interested in getting this wrapped up and over the line?

benschwarz · 2022-05-04T04:25:43Z

Hey @myleslinder, we'd love to merge these improvements you've made. Did you get a chance to review the feedback?

myleslinder · 2022-05-04T15:03:16Z

Hey, really sorry this slipped through the cracks. I'll get this over the line this week.

myleslinder added 4 commits September 4, 2021 19:02

Update Intercom provider to accept style-related props

6aad27a

The supported props are the same as what intercom supports as messenger attributes.

Rename intercom component style props to camelCase

f8461a4

Intercoms attributes are snake_case but the props to the component are camelCase to remain inline with the rest of the project.

Ensure padding for Intercom component is > 20

be692fb

Update README to reflect new intercom component props

152e0f5

vercel bot deployed to Preview September 5, 2021 02:16 View deployment

mikedijkstra reviewed Sep 7, 2021

View reviewed changes

vercel bot had a problem deploying to Preview September 7, 2021 23:28 Failure

vercel bot had a problem deploying to Preview September 7, 2021 23:33 Failure

Update README to describe new Intercom component props

7716633

vercel bot had a problem deploying to Preview September 7, 2021 23:36 Failure

Swap nullish operator for OR to fix the build

cdf4eda

vercel bot deployed to Preview September 8, 2021 01:46 View deployment

Merge branch 'main' into feat/intercom-positioning

9a0cf0b

vercel bot deployed to Preview September 13, 2021 22:44 View deployment

benschwarz reviewed Sep 13, 2021

View reviewed changes

README.md Outdated Show resolved Hide resolved

Update README.md

9a86466

vercel bot deployed to Preview September 13, 2021 22:45 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Intercom component to accept style-related props #101

Update Intercom component to accept style-related props #101

myleslinder commented Sep 5, 2021

vercel bot commented Sep 5, 2021 •

edited

mikedijkstra Sep 7, 2021

mikedijkstra commented Sep 7, 2021

myleslinder commented Sep 7, 2021

mikedijkstra commented Sep 8, 2021

benschwarz commented Sep 13, 2021

mikedijkstra commented Sep 14, 2021 •

edited

mikedijkstra commented Jan 6, 2022

benschwarz commented May 4, 2022

myleslinder commented May 4, 2022

Update Intercom component to accept style-related props #101

Are you sure you want to change the base?

Update Intercom component to accept style-related props #101

Conversation

myleslinder commented Sep 5, 2021

What does this PR introduce?

Related issues

vercel bot commented Sep 5, 2021 • edited

mikedijkstra Sep 7, 2021

Choose a reason for hiding this comment

mikedijkstra commented Sep 7, 2021

myleslinder commented Sep 7, 2021

mikedijkstra commented Sep 8, 2021

benschwarz commented Sep 13, 2021

mikedijkstra commented Sep 14, 2021 • edited

mikedijkstra commented Jan 6, 2022

benschwarz commented May 4, 2022

myleslinder commented May 4, 2022

vercel bot commented Sep 5, 2021 •

edited

mikedijkstra commented Sep 14, 2021 •

edited