From dc7e135f930b9d9203db577b79ea17e92b04f955 Mon Sep 17 00:00:00 2001
From: Karina Sigartau <karina.sigartau0711@gmail.com>
Date: Mon, 14 Feb 2022 12:15:48 +0200
Subject: [PATCH] =?UTF-8?q?=EF=BB=BFfeat(AdaptiveCard):=20display=20fallba?=
 =?UTF-8?q?ck=20text=20if=20the=20version=20of=20the=20adaptive=20card=20i?=
 =?UTF-8?q?s=20not=20supported?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../adaptive-cards/AdaptiveCard/AdaptiveCard.jsx          | 5 +++++
 .../adaptive-cards/AdaptiveCard/AdaptiveCard.stories.js   | 3 ++-
 .../__snapshots__/AdaptiveCard.stories.storyshot          | 8 ++++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx
index fe7a6c519..22f39814d 100644
--- a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx
+++ b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx
@@ -4,6 +4,8 @@ import {Template} from 'adaptivecards-templating';
 import webexComponentClasses from '../../helpers';
 import AdaptiveCardContext from '../context/adaptive-card-context';
 import {mapValues} from '../../../util';
+import {formatDateTime} from '../util';
+import Markdown from '../Markdown/Markdown';
 
 import Component, {acPropTypes, registerComponent} from '../Component/Component';
 import '../ActionOpenURL/ActionOpenUrl';
@@ -42,6 +44,7 @@ function AdaptiveCardInternal({
   action, data, className, inherited, style,
 }) {
   const [cssClasses] = webexComponentClasses('adaptive-card', [className, 'wxc-ac-container--has-padding']);
+  let showFallbackText = false;
 
   if (data.$schema && data.$schema !== 'http://adaptivecards.io/schemas/adaptive-card.json') {
     console.warn('Unknown AdaptiveCard schema:', data.$schema);
@@ -54,11 +57,13 @@ function AdaptiveCardInternal({
       console.warn(`Invalid version ${data.version}`);
     } else if (version > 1.2) {
       console.warn(`Adaptive card requires version ${data.version}, this renderer only supports version 1.2`);
+      showFallbackText = true;
     }
   }
 
   return (
     <div className={cssClasses} {...action} style={style}>
+      {showFallbackText && <Markdown>{formatDateTime(data.fallbackText)}</Markdown>}
       {data.body?.map((item, index) => <Component data={item} inherited={inherited} key={index} />)}
       {data.actions && <Component data={{type: 'ActionSet', actions: data.actions}} inherited={inherited} />}
     </div>
diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories.js b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories.js
index d1f9f1211..1bee159db 100644
--- a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories.js
+++ b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories.js
@@ -17,7 +17,8 @@ const Template = (args) => (
 const exampleAdaptiveCard = {
   $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
   type: 'AdaptiveCard',
-  version: '1.2',
+  version: '1.5',
+  fallbackText: 'This card requires version **1.5** but your renderer does not support it.',
   body: [
     {
       type: 'ColumnSet',
diff --git a/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot b/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot
index be6552b28..cff9d7056 100644
--- a/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot
+++ b/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot
@@ -6,6 +6,14 @@ Array [
     className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
+    <div
+      className="wxc wxc-markdown"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "This card requires version <strong>1.5</strong> but your renderer does not support it.",
+        }
+      }
+    />
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={