feat: Disabling buttons components once clicked

[vanbasten17]

Description

• Disabling buttons once clicked.
• As discussed, the properties are autodisable and disabledstyle (they are in lowercase to avoid annoying warnings, as these props will be rendered in the server side also).
• Created a class ButtonsDisabler with static methods inside /util/webchat.js to handle all the related logic of this new feature
• Added unit tests

Context

We need a way to disable buttons in webchat once they are clicked for some customers

Approach taken / Explain the design

In this case, each button receives a parentId which is used to know what is the parent needed to have their buttons disabled. Once clicked, the message is updated with its buttons set with the property disabled: {true|false}. On next renders, the button will be rendered depending on this property.

To document / Usage example

export const webchat = {
  theme: {
    style: {
      width: 500,
    },
    button: {
      disabledstyle: {
        opacity: 0.5,
        cursor: 'auto',
        pointerEvents: 'none',
        backgroundColor: 'green',
      },
      autodisable: true,
    },
  },
}

Buttons

<Text>
    Here I display two types of buttons, the first one is a URL button and the second is a payload button:
     <Button payload='https://botonic.io' autodisable={false}>Visit botonic.io</Button>
     <Button payload='carousel'>Show me a carousel</Button>
</Text>

Carousel

<Carousel>
          {movies.map((e, i) => (
            <Element key={e.name}>
              <Pic src={e.pic} />
              <Title>{e.name}</Title>
              <Subtitle>{e.desc}</Subtitle>
              {i === 0 ? (
                <Button payload={e.url}>Visit website</Button>
              ) : (
                <Button
                  payload={e.url}
                  autodisable={true}
                  disabledstyle={{ backgroundColor: 'red' }}
                >
                  KAKA
                </Button>
              )}
            </Element>
          ))}
        </Carousel>

As you can observe, properties defined at component level, overwrite the ones defined in the webchat theme. If autodisable is set in webchat.theme, then the components that do not have disabling properties will have the defined ones in the theme (appended in their props).

Testing

• Has unit tests

[asastre]

Looking good! Some things to take into account.

[vanbasten17]

Nice! I agree with both of you so next points will be:

• generic property to enable/disable feature
• specific prop: disabledStyle to enable/disable button specifically (it should take preference over the generic property in case it is defined)
• Not using DOM operations but directly props that updates the state component with useEffect.
• Using providers to expose host in case that shadowDOM is enabled.
• Implementation working with Custom Messages.

[codecov]

Codecov Report

Merging #1245 (63ec07d) into master (eccc26a) will increase coverage by 0.77%.
The diff coverage is 76.56%.

@@            Coverage Diff             @@
##           master    #1245      +/-   ##
==========================================
+ Coverage   64.73%   65.51%   +0.77%     
==========================================
  Files         236      237       +1     
  Lines        6471     6518      +47     
  Branches     1118     1116       -2     
==========================================
+ Hits         4189     4270      +81     
+ Misses       1968     1923      -45     
- Partials      314      325      +11     

Flag	Coverage Δ
botonic-react	58.14% <76.56%> (+2.85%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...react/src/components/multichannel/multichannel.jsx	65.38% <ø> (ø)
packages/botonic-react/src/webchat/webchat.jsx	49.56% <ø> (-1.16%)	⬇️
packages/botonic-react/src/components/button.jsx	31.25% <27.27%> (+3.97%)	⬆️
...s/botonic-react/src/components/buttons-disabler.js	81.25% <81.25%> (ø)
packages/botonic-react/src/util/webchat.js	88.88% <88.88%> (ø)
packages/botonic-react/src/components/carousel.jsx	47.16% <100.00%> (+33.70%)	⬆️
packages/botonic-react/src/components/message.jsx	38.18% <100.00%> (+1.14%)	⬆️
packages/botonic-react/src/msg-to-botonic.jsx	47.14% <100.00%> (+6.56%)	⬆️
packages/botonic-react/src/util/objects.js	100.00% <100.00%> (ø)
packages/botonic-react/src/util/react.js	94.73% <100.00%> (+1.87%)	⬆️
... and 9 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update eccc26a...63ec07d. Read the comment docs.

[github-actions]

Unit Test Results

  1 files    5 suites   15s ⏱️
20 tests 20 ✔️ 0 💤 0 ❌

Results for commit 5f69e54.

[asastre]

Great work!! Just a few small comments/suggestions

[asastre]

🚀