@transferwise/components 46.112.1 → 46.113.0

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -1,12 +1,14 @@
 import { Sentiment } from '../../common';
-import { BackslashCircle } from '@transferwise/icons';
+import { BackslashCircle, GiftBox } from '@transferwise/icons';
 import ProcessIndicator from '../../processIndicator';
 import StatusIcon from '../../statusIcon';
 import { clsx } from 'clsx';
 import Body from '../../body';
 
 export type InlinePromptProps = {
-  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;
+  sentiment?:
+    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
+    | 'proposition';
   loading?: boolean;
   /**
    * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)
@@ -16,6 +18,7 @@ export type InlinePromptProps = {
   className?: string;
   'data-testid'?: string;
   children: React.ReactNode;
+  media?: React.ReactNode;
 };
 
 export const InlinePrompt = ({
@@ -24,9 +27,16 @@ export const InlinePrompt = ({
   loading = false,
   className,
   children,
+  media = null,
   ...rest
 }: InlinePromptProps) => {
   const renderMedia = () => {
+    if (media && ['proposition', 'positive'].includes(sentiment)) {
+      return media;
+    }
+    if (sentiment === 'proposition') {
+      return <GiftBox />;
+    }
     if (muted) {
       return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" />;
     }

package/src/ssr.spec.tsx

@@ -92,6 +92,7 @@ describe('Server side rendering', () => {
   // stick all possible properties we might need to render all components in here
   const allProps: Record<string, unknown> = {
     currencies: [],
+    currencySelector: { options: [] },
     steps: [],
     stepper: {
       steps: [],