Fix typing for usePerformCardAction hook

CHANGELOG.md

@@ -22,6 +22,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+-  Fixes [#3968](https://github.com/microsoft/BotFramework-WebChat/issues/3968). Fix typing for `usePerformCardAction` hook, by [@compulim](https://github.com/compulim), in PR [#3969](https://github.com/microsoft/BotFramework-WebChat/pull/3969)
+
 ### Changed
 
 -  Resolves [#4017](https://github.com/microsoft/BotFramework-WebChat/issues/4017). In samples, moved [`react-scripts`](https://npmjs.com/package/react-scripts`) to `devDependencies`, in PR [#4023](https://github.com/microsoft/BotFramework-WebChat/pull/4023)

packages/api/src/hooks/middleware/createDefaultCardActionMiddleware.ts

@@ -6,11 +6,13 @@ export default function createDefaultCardActionMiddleware(): CardActionMiddlewar
   return ({ dispatch }) => next => (...args) => {
     const [
       {
-        cardAction: { displayText, text, type, value }
+        cardAction,
+        cardAction: { value }
       }
     ] = args;
 
-    switch (type) {
+    // We cannot use destructured "type" here because TypeScript don't recognize "messageBack" is "MessageBackCardAction".
+    switch (cardAction.type) {
       case 'imBack':
         if (typeof value === 'string') {
           // TODO: [P4] Instead of calling dispatch, we should move to dispatchers instead for completeness
@@ -22,7 +24,7 @@ export default function createDefaultCardActionMiddleware(): CardActionMiddlewar
         break;
 
       case 'messageBack':
-        dispatch(sendMessageBack(value, text, displayText));
+        dispatch(sendMessageBack(value, cardAction.text, cardAction.displayText));
 
         break;
 

packages/api/src/hooks/usePerformCardAction.ts

@@ -1,6 +1,7 @@
-import { PerformCardAction } from '../types/CardActionMiddleware';
+import { DirectLineCardAction } from 'botframework-webchat-core';
+
 import useWebChatAPIContext from './internal/useWebChatAPIContext';
 
-export default function usePerformCardAction(): PerformCardAction {
+export default function usePerformCardAction(): (cardAction: DirectLineCardAction) => void {
   return useWebChatAPIContext().onCardAction;
 }

packages/api/src/types/CardActionMiddleware.ts

@@ -1,20 +1,20 @@
 import { DirectLineCardAction } from 'botframework-webchat-core';
 
-import FunctionMiddleware, { CallFunction } from './FunctionMiddleware';
+import FunctionMiddleware from './FunctionMiddleware';
 
-type PerformCardActionParameter = {
-  cardAction?: DirectLineCardAction;
-  displayText?: string;
-  getSignInUrl?: () => string;
-  target?: any;
-  text?: string;
-  type?: string;
-  value?: any;
-};
+type PerformCardAction = (cardAction: DirectLineCardAction) => void;
 
-type PerformCardAction = CallFunction<[PerformCardActionParameter], void>;
-
-type CardActionMiddleware = FunctionMiddleware<[{ dispatch: (action: any) => void }], [PerformCardActionParameter], {}>;
+type CardActionMiddleware = FunctionMiddleware<
+  [{ dispatch: (action: any) => void }],
+  [
+    {
+      cardAction: DirectLineCardAction;
+      getSignInUrl?: () => string;
+      target: any;
+    }
+  ],
+  {}
+>;
 
 export default CardActionMiddleware;
 

packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardBuilder.ts

@@ -16,16 +16,16 @@ import {
   TextWeight
 } from 'adaptivecards';
 
-import { CardAction } from 'botframework-directlinejs';
+import { DirectLineCardAction } from 'botframework-webchat-core';
 import AdaptiveCardsPackage from '../../types/AdaptiveCardsPackage';
 import AdaptiveCardsStyleOptions from '../AdaptiveCardsStyleOptions';
 
 export interface BotFrameworkCardAction {
-  __isBotFrameworkCardAction: boolean;
-  cardAction: CardAction;
+  __isBotFrameworkCardAction: true;
+  cardAction: DirectLineCardAction;
 }
 
-function addCardAction(cardAction: CardAction, includesOAuthButtons?: boolean) {
+function addCardAction(cardAction: DirectLineCardAction, includesOAuthButtons?: boolean) {
   const { type } = cardAction;
   let action;
 
@@ -42,11 +42,11 @@ function addCardAction(cardAction: CardAction, includesOAuthButtons?: boolean) {
       cardAction
     };
 
-    action.title = cardAction.title;
+    action.title = (cardAction as { title: string }).title;
   } else {
     action = new OpenUrlAction();
 
-    action.title = cardAction.title;
+    action.title = (cardAction as { title: string }).title;
     action.url = cardAction.type === 'call' ? `tel:${cardAction.value}` : cardAction.value;
   }
 
@@ -71,7 +71,7 @@ export default class AdaptiveCardBuilder {
     this.card.addItem(this.container);
   }
 
-  addColumnSet(sizes: number[], container: Container = this.container, selectAction?: CardAction) {
+  addColumnSet(sizes: number[], container: Container = this.container, selectAction?: DirectLineCardAction) {
     const columnSet = new ColumnSet();
 
     columnSet.selectAction = selectAction && addCardAction(selectAction);
@@ -107,7 +107,7 @@ export default class AdaptiveCardBuilder {
     }
   }
 
-  addButtons(cardActions: CardAction[], includesOAuthButtons?: boolean) {
+  addButtons(cardActions: DirectLineCardAction[], includesOAuthButtons?: boolean) {
     cardActions &&
       cardActions.forEach(cardAction => {
         this.card.addAction(addCardAction(cardAction, includesOAuthButtons));
@@ -131,7 +131,7 @@ export default class AdaptiveCardBuilder {
     this.addButtons(content.buttons);
   }
 
-  addImage(url: string, container?: Container, selectAction?: CardAction, altText?: string) {
+  addImage(url: string, container?: Container, selectAction?: DirectLineCardAction, altText?: string) {
     container = container || this.container;
 
     const image = new Image();
@@ -146,7 +146,7 @@ export default class AdaptiveCardBuilder {
 }
 
 export interface ICommonContent {
-  buttons?: CardAction[];
+  buttons?: DirectLineCardAction[];
   subtitle?: string;
   text?: string;
   title?: string;

packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardRenderer.tsx

@@ -1,12 +1,15 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 2] }] */
 
+import { Action, OpenUrlAction, SubmitAction } from 'adaptivecards';
 import { Components, getTabIndex, hooks } from 'botframework-webchat-component';
+import { DirectLineCardAction } from 'botframework-webchat-core';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState, VFC } from 'react';
 
 import useAdaptiveCardsHostConfig from '../hooks/useAdaptiveCardsHostConfig';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import { BotFrameworkCardAction } from './AdaptiveCardBuilder';
 
 const { ErrorBox } = Components;
 const { useDisabled, useLocalizer, usePerformCardAction, useRenderMarkdownAsHTML, useScrollToEnd, useStyleSet } = hooks;
@@ -384,7 +387,19 @@ function saveInputValues(element) {
   });
 }
 
-const AdaptiveCardRenderer = ({ actionPerformedClassName, adaptiveCard, disabled: disabledFromProps, tapAction }) => {
+type AdaptiveCardRendererProps = {
+  actionPerformedClassName?: string;
+  adaptiveCard: any;
+  disabled?: boolean;
+  tapAction?: DirectLineCardAction;
+};
+
+const AdaptiveCardRenderer: VFC<AdaptiveCardRendererProps> = ({
+  actionPerformedClassName,
+  adaptiveCard,
+  disabled: disabledFromProps,
+  tapAction
+}) => {
   const [{ adaptiveCardRenderer: adaptiveCardRendererStyleSet }] = useStyleSet();
   const [{ GlobalSettings, HostConfig }] = useAdaptiveCardsPackage();
   const [actionsPerformed, setActionsPerformed] = useState([]);
@@ -456,7 +471,7 @@ const AdaptiveCardRenderer = ({ actionPerformedClassName, adaptiveCard, disabled
   );
 
   const handleExecuteAction = useCallback(
-    action => {
+    (action: Action) => {
       // Some items, e.g. tappable image, cannot be disabled thru DOM attributes
       if (disabled) {
         return;
@@ -465,25 +480,40 @@ const AdaptiveCardRenderer = ({ actionPerformedClassName, adaptiveCard, disabled
       addActionsPerformed(action);
 
       const actionTypeName = action.getJsonTypeName();
+      const { iconUrl: image, title } = action;
 
+      // We cannot use "instanceof" check here, because web devs may bring their own version of Adaptive Cards package.
+      // We need to check using "getJsonTypeName()" instead.
       if (actionTypeName === 'Action.OpenUrl') {
+        const { url: value } = action as OpenUrlAction;
+
         performCardAction({
+          image,
+          title,
           type: 'openUrl',
-          value: action.url
+          value
         });
       } else if (actionTypeName === 'Action.Submit') {
-        if (typeof action.data !== 'undefined') {
-          const { data: actionData } = action;
-
-          if (actionData && actionData.__isBotFrameworkCardAction) {
-            const { cardAction } = actionData;
-            const { displayText, text, type, value } = cardAction;
+        const { data } = action as SubmitAction as {
+          data: string | BotFrameworkCardAction;
+        };
 
-            performCardAction({ displayText, text, type, value });
+        if (typeof data !== 'undefined') {
+          if (typeof data === 'string') {
+            performCardAction({
+              image,
+              title,
+              type: 'imBack',
+              value: data
+            });
+          } else if (data.__isBotFrameworkCardAction) {
+            performCardAction(data.cardAction);
           } else {
             performCardAction({
-              type: typeof action.data === 'string' ? 'imBack' : 'postBack',
-              value: action.data
+              image,
+              title,
+              type: 'postBack',
+              value: data
             });
           }
         }
@@ -629,7 +659,13 @@ AdaptiveCardRenderer.propTypes = {
   actionPerformedClassName: PropTypes.string,
   adaptiveCard: PropTypes.any.isRequired,
   disabled: PropTypes.bool,
+
+  // TypeScript class is not mappable to PropTypes.func
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   tapAction: PropTypes.shape({
+    image: PropTypes.string,
+    title: PropTypes.string,
     type: PropTypes.string.isRequired,
     value: PropTypes.string
   })

packages/component/src/SendBox/SuggestedActions.tsx

@@ -209,7 +209,7 @@ SuggestedActionStackedContainer.propTypes = {
 
 type SuggestedActionsProps = {
   className?: string;
-  suggestedActions?: DirectLineCardAction;
+  suggestedActions?: DirectLineCardAction[];
 };
 
 const SuggestedActions: FC<SuggestedActionsProps> = ({ className, suggestedActions = [] }) => {
@@ -227,24 +227,36 @@ const SuggestedActions: FC<SuggestedActionsProps> = ({ className, suggestedActio
       : localize('SUGGESTED_ACTIONS_ALT_NO_CONTENT')
   );
 
-  const children = suggestedActions.map(({ displayText, image, imageAltText, text, title, type, value }, index) => (
-    <SuggestedAction
-      buttonText={suggestedActionText({ displayText, title, type, value })}
-      className="webchat__suggested-actions__button"
-      displayText={displayText}
-      image={image}
-      imageAlt={imageAltText}
-      key={index}
-      text={text}
-      textClassName={
-        suggestedActionLayout === 'stacked' && suggestedActionsStackedLayoutButtonTextWrap
-          ? 'webchat__suggested-actions__button-text-stacked-text-wrap'
-          : 'webchat__suggested-actions__button-text'
-      }
-      type={type}
-      value={value}
-    />
-  ));
+  const children = suggestedActions.map((cardAction, index) => {
+    const { displayText, image, imageAltText, text, title, type, value } = cardAction as {
+      displayText?: string;
+      image?: string;
+      imageAltText?: string;
+      text?: string;
+      title?: string;
+      type: string;
+      value?: { [key: string]: any } | string;
+    };
+
+    return (
+      <SuggestedAction
+        buttonText={suggestedActionText({ displayText, title, type, value })}
+        className="webchat__suggested-actions__button"
+        displayText={displayText}
+        image={image}
+        imageAlt={imageAltText}
+        key={index}
+        text={text}
+        textClassName={
+          suggestedActionLayout === 'stacked' && suggestedActionsStackedLayoutButtonTextWrap
+            ? 'webchat__suggested-actions__button-text-stacked-text-wrap'
+            : 'webchat__suggested-actions__button-text'
+        }
+        type={type}
+        value={value}
+      />
+    );
+  });
 
   if (suggestedActionLayout === 'flow') {
     return (
@@ -273,6 +285,10 @@ SuggestedActions.defaultProps = {
 
 SuggestedActions.propTypes = {
   className: PropTypes.string,
+
+  // TypeScript class is not mappable to PropTypes.func
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   suggestedActions: PropTypes.arrayOf(
     PropTypes.shape({
       displayText: PropTypes.string,

packages/core/src/types/external/DirectLineActivity.ts

@@ -1,5 +1,6 @@
 // TODO: [P1] #3953 We should fully type it out.
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type DirectLineActivity = any;
 
 export default DirectLineActivity;

packages/core/src/types/external/DirectLineAnimationCard.ts

@@ -1,5 +1,6 @@
 // TODO: [P1] #3953 We should fully type it out.
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type DirectLineAnimationCard = any;
 
 export default DirectLineAnimationCard;

packages/core/src/types/external/DirectLineAttachment.ts

@@ -1,5 +1,6 @@
 // TODO: [P1] #3953 We should fully type it out.
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type DirectLineAttachment = any;
 
 export default DirectLineAttachment;

packages/core/src/types/external/DirectLineAudioCard.ts

@@ -1,5 +1,6 @@
 // TODO: [P1] #3953 We should fully type it out.
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type DirectLineAudioCard = any;
 
 export default DirectLineAudioCard;