feat(AdaptiveCards): notify when a show card or open url action was p…

…erformed

src/components/WebexAdaptiveCard/WebexAdaptiveCard.jsx

@@ -7,11 +7,26 @@ import {useAdaptiveCard} from '../hooks';
 import AdaptiveCard from '../adaptive-cards/AdaptiveCard/AdaptiveCard';
 
 /**
- * Action to perform when submitting a card
+ * Called when an open url action was performed
+ *
+ * @callback openUrlCallback
+ * @param {string} url  Opened url
+ */
+
+/**
+ * Called when a show card action was performed
+ *
+ * @callback showCardCallback
+ * @param {boolean} shown  Flag to indicate whether the card is shown or hidden
+ * @param {object} card  Card
+ */
+
+/**
+ * Called when a submit action was performed
  *
  * @callback submitCallback
- * @param {object} inputs  Data to submit
  * @param {Promise<object>} submitPromise  Promise that resolves to the submitted action
+ * @param {object} inputs  Data to submit
  */
 
 /**
@@ -24,7 +39,9 @@ import AdaptiveCard from '../adaptive-cards/AdaptiveCard/AdaptiveCard';
  * @param {string} [props.msgSubmitStarted]  Message to display while submitting user input
  * @param {string} [props.msgSubmitSuccess]  Message to display when submit finished with success
  * @param {string} [props.msgSubmitFail]  Message to display when submit failed
- * @param {submitCallback} [props.onSubmit]  Action to perform when submitting a card
+ * @param {openUrlCallback} [props.onOpenUrl]  Called when an open url action was performed
+ * @param {showCardCallback} [props.onShowCard]  Called when a show card action was performed
+ * @param {submitCallback} [props.onSubmit]  Called when a submit action was performed
  * @param {object} [props.style]  Custom style to apply
  * @returns {object} JSX of the component
  */
@@ -35,6 +52,8 @@ export default function WebexAdaptiveCard({
   msgSubmitFail,
   msgSubmitStarted,
   msgSubmitSuccess,
+  onOpenUrl,
+  onShowCard,
   onSubmit,
   style,
 }) {
@@ -64,6 +83,8 @@ export default function WebexAdaptiveCard({
       <AdaptiveCard
         className={sc('card')}
         template={card}
+        onOpenUrl={onOpenUrl}
+        onShowCard={onShowCard}
         onSubmit={handleSubmit}
       />
       {submitStatus.message && (
@@ -80,6 +101,8 @@ WebexAdaptiveCard.propTypes = {
   msgSubmitFail: PropTypes.string,
   msgSubmitStarted: PropTypes.string,
   msgSubmitSuccess: PropTypes.string,
+  onOpenUrl: PropTypes.func,
+  onShowCard: PropTypes.func,
   onSubmit: PropTypes.func,
   style: PropTypes.shape(),
 };
@@ -89,6 +112,8 @@ WebexAdaptiveCard.defaultProps = {
   msgSubmitFail: 'Error',
   msgSubmitStarted: 'Sending...',
   msgSubmitSuccess: 'Sent',
+  onOpenUrl: () => {},
+  onShowCard: () => {},
   onSubmit: () => {},
   style: undefined,
 };

src/components/WebexAdaptiveCards/WebexAdaptiveCards.jsx

@@ -6,11 +6,29 @@ import {useActivity} from '../hooks';
 import WebexAdaptiveCard from '../WebexAdaptiveCard/WebexAdaptiveCard';
 
 /**
- * Action to perform when submitting a card
+ * Called when an open url action was performed
+ *
+ * @callback openUrlCallback
+ * @param {number} index  Card index
+ * @param {string} url  Opened url
+ */
+
+/**
+ * Called when a show card action was performed
+ *
+ * @callback showCardCallback
+ * @param {number} index  Card index
+ * @param {boolean} shown  Flag to indicate whether the card is shown or hidden
+ * @param {object} card  Card
+ */
+
+/**
+ * Called when a submit action was performed
  *
  * @callback submitCallback
- * @param {object} inputs  Data to submit
+ * @param {number} index  Card index
  * @param {Promise<object>} submitPromise  Promise that resolves to the submitted action
+ * @param {object} inputs  Data to submit
  */
 
 /**
@@ -19,13 +37,17 @@ import WebexAdaptiveCard from '../WebexAdaptiveCard/WebexAdaptiveCard';
  * @param {object} props  Data passed to the component
  * @param {string} props.activityID  ID of the activity corresponding to this cards
  * @param {string} [props.className]  Custom CSS class to apply
- * @param {submitCallback} [props.onSubmit]  Action to perform when submitting a card
+ * @param {openUrlCallback} [props.onOpenUrl]  Called when an open url action was performed
+ * @param {showCardCallback} [props.onShowCard]  Called when a show card action was performed
+ * @param {submitCallback} [props.onSubmit]  Called when a submit action was performed
  * @param {object} [props.style]  Custom style to apply
  * @returns {object} JSX of the component
  */
 export default function WebexAdaptiveCards({
   activityID,
   className,
+  onOpenUrl,
+  onShowCard,
   onSubmit,
   style,
 }) {
@@ -41,6 +63,8 @@ export default function WebexAdaptiveCards({
           activityID={activityID}
           className={sc('card')}
           cardIndex={index}
+          onOpenUrl={(url) => onOpenUrl(index, url)}
+          onShowCard={(shown, card) => onShowCard(index, shown, card)}
           onSubmit={(submitPromise, inputs) => onSubmit(index, submitPromise, inputs)}
         />
       ))}
@@ -51,12 +75,16 @@ export default function WebexAdaptiveCards({
 WebexAdaptiveCards.propTypes = {
   activityID: PropTypes.string.isRequired,
   className: PropTypes.string,
-  style: PropTypes.shape(),
+  onOpenUrl: PropTypes.func,
+  onShowCard: PropTypes.func,
   onSubmit: PropTypes.func,
+  style: PropTypes.shape(),
 };
 
 WebexAdaptiveCards.defaultProps = {
   className: undefined,
-  style: undefined,
+  onOpenUrl: () => {},
+  onShowCard: () => {},
   onSubmit: () => {},
+  style: undefined,
 };

src/components/adaptive-cards/ActionSet/ActionSet.jsx

@@ -1,7 +1,8 @@
-import React, {useState} from 'react';
+import React, {useContext, useState} from 'react';
 import PropTypes from 'prop-types';
 import webexComponentClasses from '../../helpers';
 import Component, {acPropTypes, registerComponent} from '../Component/Component';
+import AdaptiveCardContext from '../context/adaptive-card-context';
 
 /**
  * Adaptive Cards ActionSet component
@@ -17,11 +18,15 @@ import Component, {acPropTypes, registerComponent} from '../Component/Component'
 export default function ActionSet({
   data, className, inherited, style,
 }) {
+  const {onShowCard} = useContext(AdaptiveCardContext);
   const [cssClasses] = webexComponentClasses('adaptive-cards-action-set', className);
   const [shownCards, setShownCards] = useState({});
 
   const toggleCard = (index) => {
-    setShownCards({...shownCards, [index]: !shownCards[index]});
+    const shown = !shownCards[index];
+
+    setShownCards({...shownCards, [index]: shown});
+    onShowCard(shown, data.actions[index]?.card);
   };
 
   return (

src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx

@@ -107,6 +107,8 @@ registerComponent('AdaptiveCard', AdaptiveCardInternal, 'vertical');
  * @param {object} [props.context]  Provided data for binding to Adaptive Card
  * @param {string} [props.className]  Custom CSS class to apply
  * @param {object} [props.style]  Custom style to apply
+ * @param {Function} [props.onOpenUrl]  Called when an open url action was performed
+ * @param {Function} [props.onShowCard]  Called when a show card action was performed
  * @param {Function} [props.onSubmit]  Action to perform on submit
  * @param {Function} [props.onInvalidSubmit]  Action to perform on invalid submit
  * @returns {object} JSX of the component
@@ -116,6 +118,8 @@ export default function AdaptiveCard({
   context,
   className,
   style,
+  onOpenUrl,
+  onShowCard,
   onSubmit,
   onInvalidSubmit,
 }) {
@@ -220,6 +224,8 @@ export default function AdaptiveCard({
         setElement,
         setIsVisible,
         getIsVisible,
+        onOpenUrl,
+        onShowCard,
       }}
     >
       <Component data={data} className={className} inherited={inherited} style={style} />
@@ -232,6 +238,8 @@ AdaptiveCard.propTypes = {
   context: PropTypes.shape(),
   className: PropTypes.string,
   style: PropTypes.shape(),
+  onOpenUrl: PropTypes.func,
+  onShowCard: PropTypes.func,
   onSubmit: PropTypes.func,
   onInvalidSubmit: PropTypes.func,
 };
@@ -240,6 +248,8 @@ AdaptiveCard.defaultProps = {
   className: undefined,
   context: undefined,
   style: undefined,
+  onOpenUrl: undefined,
+  onShowCard: undefined,
   onSubmit: undefined,
   onInvalidSubmit: undefined,
 };

src/components/adaptive-cards/hooks/useActionOpenUrl.js

@@ -1,4 +1,6 @@
+import {useContext} from 'react';
 import {isValidUrl} from '../../../util';
+import AdaptiveCardContext from '../context/adaptive-card-context';
 
 /**
  * HTML attributes for the action target element.
@@ -17,14 +19,19 @@ import {isValidUrl} from '../../../util';
  * @param {object} data  Action properties
  * @returns {ActionAttributes|undefined} Action attributes
  */
-export default function useActionSubmit(data) {
+export default function useActionOpenUrl(data) {
+  const {onOpenUrl} = useContext(AdaptiveCardContext);
+
   let handleAction;
 
   if (data?.type === 'Action.OpenUrl') {
     const isValidHttpUrl = isValidUrl(data.url, ['https:', 'http:']);
 
     if (isValidHttpUrl) {
-      handleAction = () => window.open(data.url, '_blank');
+      handleAction = () => {
+        window.open(data.url, '_blank');
+        onOpenUrl(data.url);
+      };
     }
   }