feat(WebexAdaptiveCard): add submit status message

webex · Mar 24, 2022 · 38c64a5 · 38c64a5
1 parent 549ea14
commit 38c64a5
Show file tree

Hide file tree

Showing 11 changed files with 657 additions and 597 deletions.
diff --git a/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot b/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
diff --git a/src/components/WebexAdaptiveCard/WebexAdaptiveCard.jsx b/src/components/WebexAdaptiveCard/WebexAdaptiveCard.jsx
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 import webexComponentClasses from '../helpers';
 import {useAdaptiveCard} from '../hooks';
@@ -19,44 +20,72 @@ import AdaptiveCard from '../adaptive-cards/AdaptiveCard/AdaptiveCard';
  * @param {object} props  Data passed to the component
  * @param {string} props.activityID  ID of the activity corresponding to this card
  * @param {string} [props.className]  Custom CSS class to apply
+ * @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 {object} [props.style]  Custom style to apply
  * @returns {object} JSX of the component
  */
 export default function WebexAdaptiveCard({
   activityID,
   className,
+  msgSubmitFail,
+  msgSubmitStarted,
+  msgSubmitSuccess,
   onSubmit,
   style,
 }) {
   const [card, submit] = useAdaptiveCard(activityID);
-  const [cssClasses] = webexComponentClasses('adaptive-card', className);
+  const [cssClasses, sc] = webexComponentClasses('adaptive-card', className);
+  const [submitStatus, setSubmitStatus] = useState({});
 
   const handleSubmit = (inputs) => {
+    setSubmitStatus({message: msgSubmitStarted});
     const submitPromise = submit(inputs).toPromise();
 
+    submitPromise.then(
+      () => setSubmitStatus({message: msgSubmitSuccess}),
+      () => setSubmitStatus({message: msgSubmitFail, isError: true}),
+    ).finally(
+      setTimeout(() => setSubmitStatus({}), 2000),
+    );
+
     onSubmit(submitPromise, inputs);
   };
 
   return (
-    <AdaptiveCard
+    <div
       className={cssClasses}
-      template={card}
-      onSubmit={handleSubmit}
       style={style}
-    />
+    >
+      <AdaptiveCard
+        className={sc('card')}
+        template={card}
+        onSubmit={handleSubmit}
+      />
+      {submitStatus.message && (
+        <div className={classnames(sc('status'), {[sc('status--error')]: submitStatus.isError})}>{submitStatus.message}</div>
+      )}
+    </div>
   );
 }
 
 WebexAdaptiveCard.propTypes = {
   activityID: PropTypes.string.isRequired,
   className: PropTypes.string,
-  style: PropTypes.shape(),
+  msgSubmitFail: PropTypes.string,
+  msgSubmitStarted: PropTypes.string,
+  msgSubmitSuccess: PropTypes.string,
   onSubmit: PropTypes.func,
+  style: PropTypes.shape(),
 };
 
 WebexAdaptiveCard.defaultProps = {
   className: undefined,
-  style: undefined,
+  msgSubmitFail: 'Error',
+  msgSubmitStarted: 'Sending...',
+  msgSubmitSuccess: 'Sent',
   onSubmit: () => {},
+  style: undefined,
 };
diff --git a/src/components/WebexAdaptiveCard/WebexAdaptiveCard.scss b/src/components/WebexAdaptiveCard/WebexAdaptiveCard.scss
@@ -0,0 +1,26 @@
+$C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-adaptive-card;
+
+.#{$C} {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  .#{$C}__card {
+    flex: 1;
+  }
+
+  .#{$C}__status {
+    display: flex;
+    font-size: 0.75rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+    padding-left: 1rem;
+    color: var(--wxc-adaptive-cards--color--light);
+
+    &--error {
+      color: var(--wxc-adaptive-cards--color--attention);
+      background-color: var(--wxc-adaptive-cards--background--attention);
+      border-radius: 0.5rem;
+    }
+  }
+}
diff --git a/src/components/_components.scss b/src/components/_components.scss
@@ -5,6 +5,7 @@
 
 @import 'WebexActivity/WebexActivity';
 @import 'WebexActivityStream/WebexActivityStream';
+@import 'WebexAdaptiveCard/WebexAdaptiveCard';
 @import 'WebexAudioSettings/WebexAudioSettings';
 @import 'WebexAvatar/WebexAvatar';
 @import 'WebexInMeeting/WebexInMeeting';

diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx
@@ -43,7 +43,7 @@ import '../TextRun/TextRun';
 function AdaptiveCardInternal({
   action, data, className, inherited, style,
 }) {
-  const [cssClasses] = webexComponentClasses('adaptive-card', [className, 'wxc-ac-container--has-padding']);
+  const [cssClasses] = webexComponentClasses('ac-adaptive-card', [className, 'wxc-ac-container--has-padding']);
   let showFallbackText = false;
 
   if (data.$schema && data.$schema !== 'http://adaptivecards.io/schemas/adaptive-card.json') {

diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.scss b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.scss
@@ -1,4 +1,4 @@
-.#{$WEBEX_COMPONENTS_CLASS_PREFIX}-adaptive-card {
+.#{$WEBEX_COMPONENTS_CLASS_PREFIX}-ac-adaptive-card {
   background: var(--wxc-primary-background);
   color: var(--wxc-text-color);
   overflow: auto;

diff --git a/.../adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot b/.../adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot
@@ -3,7 +3,7 @@
 exports[`Storyshots Messaging/AdaptiveCard/Actions Action Execute 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -195,7 +195,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/Actions Action Open URL 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -337,7 +337,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/Actions Action Show Card 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -464,7 +464,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/Actions Action Submit 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -759,7 +759,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/Actions Action Toggle Visibility 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div

diff --git a/...tive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/CardElements.stories.storyshot b/...tive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/CardElements.stories.storyshot
@@ -3,7 +3,7 @@
 exports[`Storyshots Messaging/AdaptiveCard/CardElements Image 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -106,7 +106,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/CardElements Rich Text Block 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -334,7 +334,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/CardElements Text Block 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div

diff --git a/...aptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Containers.stories.storyshot b/...aptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Containers.stories.storyshot
@@ -3,7 +3,7 @@
 exports[`Storyshots Messaging/AdaptiveCard/Containers Action Set 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -203,7 +203,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/Containers Column 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -2706,7 +2706,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/Containers Column Set 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -3153,7 +3153,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/Containers Container 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -4054,7 +4054,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/Containers Fact Set 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -4140,7 +4140,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/Containers Image Set 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div

diff --git a/...s/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot b/...s/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot
@@ -3,7 +3,7 @@
 exports[`Storyshots Messaging/AdaptiveCard/Inputs Input Choice Set 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -533,7 +533,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/Inputs Input Date 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -653,7 +653,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/Inputs Input Number 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -856,7 +856,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/Inputs Input Text 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -1315,7 +1315,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/Inputs Input Time 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div
@@ -1516,7 +1516,7 @@ Array [
 exports[`Storyshots Messaging/AdaptiveCard/Inputs Input Toggle 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div

diff --git a/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot b/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot
@@ -3,7 +3,7 @@
 exports[`Storyshots Messaging/AdaptiveCard Card 1`] = `
 Array [
   <div
-    className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
+    className="wxc wxc-ac-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
     <div