[#1281] Added RichCard and RichCardCarousel to google (#1288)

closes #1281
airyhq · Mar 18, 2021 · b4d42a3 · b4d42a3
1 parent 38f0146
commit b4d42a3
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 2 deletions.
diff --git a/lib/typescript/render/providers/google/GoogleRender.tsx b/lib/typescript/render/providers/google/GoogleRender.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import {getDefaultMessageRenderingProps, MessageRenderProps} from '../../shared';
 import {Suggestions} from './components/Suggestions';
 import {Text} from '../../components/Text';
+import {RichCard} from '../../components/RichCard';
+import {RichCardCarousel} from '../../components/RichCardCarousel';
 import {ContentUnion} from './googleModel';
 import {RenderedContent, isFromContact} from 'httpclient';
 import {Image} from '../../components/Image';
@@ -30,12 +32,56 @@ function render(content: ContentUnion, props: MessageRenderProps) {
           suggestions={content.suggestions}
         />
       );
+
+    case 'richCard':
+      return (
+        <RichCard
+          {...getDefaultMessageRenderingProps(props)}
+          title={content.title}
+          description={content.description}
+          media={content.media}
+          suggestions={content.suggestions}
+        />
+      );
+
+    case 'richCardCarousel':
+      return (
+        <RichCardCarousel
+          {...getDefaultMessageRenderingProps(props)}
+          cardWidth={content.cardWidth}
+          cardContents={content.cardContents}
+        />
+      );
   }
 }
 
 function googleInbound(message: RenderedContent): ContentUnion {
   const messageJson = message.content.message;
 
+  if (messageJson.richCard?.standaloneCard) {
+    const {
+      richCard: {
+        standaloneCard: {cardContent},
+      },
+    } = messageJson;
+
+    return {
+      type: 'richCard',
+      ...(cardContent.title && {title: cardContent.title}),
+      ...(cardContent.description && {description: cardContent.description}),
+      media: cardContent.media,
+      suggestions: cardContent.suggestions,
+    };
+  }
+
+  if (messageJson.richCard?.carouselCard) {
+    return {
+      type: 'richCardCarousel',
+      cardWidth: messageJson.richCard.carouselCard.cardWidth,
+      cardContents: messageJson.richCard.carouselCard.cardContents,
+    };
+  }
+
   if (messageJson.suggestionResponse) {
     return {
       type: 'text',
@@ -88,6 +134,30 @@ function googleOutbound(message: RenderedContent): ContentUnion {
   const messageJson = message.content.message ?? message.content;
   const maxNumberOfSuggestions = 13;
 
+  if (messageJson.richCard?.standaloneCard) {
+    const {
+      richCard: {
+        standaloneCard: {cardContent},
+      },
+    } = messageJson;
+
+    return {
+      type: 'richCard',
+      ...(cardContent.title && {title: cardContent.title}),
+      ...(cardContent.description && {description: cardContent.description}),
+      media: cardContent.media,
+      suggestions: cardContent.suggestions,
+    };
+  }
+
+  if (messageJson.richCard?.carouselCard) {
+    return {
+      type: 'richCardCarousel',
+      cardWidth: messageJson.richCard.carouselCard.cardWidth,
+      cardContents: messageJson.richCard.carouselCard.cardContents,
+    };
+  }
+
   if (messageJson.suggestions) {
     if (messageJson.suggestions.length > maxNumberOfSuggestions) {
       messageJson.suggestions = messageJson.suggestions.slice(0, 13);

diff --git a/lib/typescript/render/providers/google/googleModel.ts b/lib/typescript/render/providers/google/googleModel.ts
@@ -1,5 +1,12 @@
+import {Suggestion} from '../../components/RichCard';
+
+export enum MediaHeight {
+  short = 'SHORT',
+  medium = 'MEDIUM',
+  tall = 'TALL',
+}
 export interface Content {
-  type: 'text' | 'image' | 'suggestions';
+  type: 'text' | 'image' | 'suggestions' | 'richCard' | 'richCardCarousel';
 }
 
 export interface TextContent extends Content {
@@ -12,6 +19,26 @@ export interface ImageContent extends Content {
   imageUrl: string;
   altText?: string;
 }
+export interface RichCardContent extends Content {
+  type: 'richCard';
+  title?: string;
+  description?: string;
+  media: {
+    height: MediaHeight;
+    contentInfo: {
+      altText?: string;
+      fileUrl: string;
+      forceRefresh: boolean;
+    };
+  };
+  suggestions: Suggestion[];
+}
+
+export interface RichCardCarouselContent extends Content {
+  type: 'richCardCarousel';
+  cardWidth: string;
+  cardContents: [RichCardContent];
+}
 
 interface SuggestedReplies {
   reply: {
@@ -64,4 +91,4 @@ export interface SuggestionsContent extends Content {
   suggestions: SuggestionsUnion[];
 }
 
-export type ContentUnion = TextContent | ImageContent | SuggestionsContent;
+export type ContentUnion = TextContent | ImageContent | SuggestionsContent | RichCardContent | RichCardCarouselContent;