adding message for ToastBody

trycourier · Jun 28, 2024 · 69b2afb · 69b2afb
1 parent f7d982b
commit 69b2afb
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 28 deletions.
diff --git a/packages/react-toast/src/components/index.tsx b/packages/react-toast/src/components/index.tsx
@@ -14,17 +14,16 @@ import { Brand, IInboxMessagePreview } from "@trycourier/core";
 const Styled = styled.div(toastStyles);
 const GlobalStyle = createGlobalStyle`${toastCss}`;
 
-export const ToastBody: React.FunctionComponent<
-  Partial<Omit<IInboxMessagePreview, "title" | "preview">> & {
-    theme?: Theme;
-    brand?: Brand;
-    title?: IInboxMessagePreview["title"] | ReactElement;
-    preview?: IInboxMessagePreview["preview"] | ReactElement;
-  }
-> = ({ theme, ...props }) => {
+export const ToastBody: React.FunctionComponent<{
+  message: IInboxMessagePreview;
+  theme?: Theme;
+  brand?: Brand;
+  title?: IInboxMessagePreview["title"] | ReactElement;
+  preview?: IInboxMessagePreview["preview"] | ReactElement;
+}> = ({ theme, message, ...props }) => {
   const { brand: remoteBrand } = useCourier();
   props.brand = props.brand ?? remoteBrand;
-  props.icon = props.icon ?? props?.brand?.inapp?.icons?.message;
+  message.icon = message.icon ?? props?.brand?.inapp?.icons?.message;
 
   theme = useMemo(() => {
     return {
@@ -46,7 +45,7 @@ export const ToastBody: React.FunctionComponent<
         >
           <div className="Toastify__toast Toastify__toast--default">
             <div className="Toastify__toast-body">
-              <Body {...props} additional_data={props.data || {}} />
+              <Body message={message} icon={message.icon} {...props} />
             </div>
             <div
               className="Toastify__progress-bar Toastify__progress-bar--animated Toastify__progress-bar--default"

diff --git a/packages/storybook/stories/toast/examples.stories.tsx b/packages/storybook/stories/toast/examples.stories.tsx
@@ -19,6 +19,7 @@ export function Default({
   return (
     <CourierProvider clientKey="abc" userId="123">
       <ToastBody
+        message={{} as any}
         preview={bodyText}
         title="Title"
         brand={{
@@ -43,6 +44,7 @@ export function CustomTitleAndBody(): React.ReactElement {
   return (
     <CourierProvider clientKey="abc" userId="123">
       <ToastBody
+        message={{} as any}
         preview={<h3>Hello World</h3>}
         title={<h1>Title</h1>}
         brand={{
@@ -66,13 +68,17 @@ export function WithAction(): React.ReactElement {
   return (
     <CourierProvider clientKey="abc" userId="123">
       <ToastBody
-        actions={[
+        message={
           {
-            type: "action",
-            content: "View Details",
-            href: "https://www.courier.com",
-          },
-        ]}
+            actions: [
+              {
+                type: "action",
+                content: "View Details",
+                href: "https://www.courier.com",
+              },
+            ],
+          } as any
+        }
         preview="hello world"
         title="This is a really long title lalalalalala"
       />
@@ -84,18 +90,22 @@ export function WithMultipleAction(): React.ReactElement {
   return (
     <CourierProvider clientKey="abc" userId="123">
       <ToastBody
-        actions={[
-          {
-            type: "action",
-            content: "Approve",
-            href: "https://www.courier.com",
-          },
+        message={
           {
-            type: "action",
-            content: "Deny",
-            href: "https://www.courier.com",
-          },
-        ]}
+            actions: [
+              {
+                type: "action",
+                content: "Approve",
+                href: "https://www.courier.com",
+              },
+              {
+                type: "action",
+                content: "Deny",
+                href: "https://www.courier.com",
+              },
+            ],
+          } as any
+        }
         preview="hello world"
         title="This is a really long title lalalalalala"
       />
@@ -107,6 +117,7 @@ export function MultiLineMessage(): React.ReactElement {
   return (
     <CourierProvider clientKey="abc" userId="123">
       <ToastBody
+        message={{} as any}
         preview="This is a really long message lalalalalalalalalalalala lalalalalala"
         title="This is a really long title lalalalalala lalalalalala lalalalalala"
       />

diff --git a/packages/storybook/stories/toast/index.stories.tsx b/packages/storybook/stories/toast/index.stories.tsx
@@ -104,7 +104,7 @@ export const Theme = () => {
         2
       )}\n\`\`\``}</ReactMarkdown>
       <CourierProvider>
-        <ToastBody title="Title" theme={theme} />
+        <ToastBody message={{} as any} title="Title" theme={theme} />
       </CourierProvider>
     </>
   );