@tactics/toddle-styleguide 1.2.6 → 1.2.7

package/src/components/molecules/send-bubble/__snapshots__/send-text-bubble.test.js.snap

@@ -110,6 +110,7 @@ exports[`Failed text bubble test shows a DEFAULT RECEIVED text bubble that is sw
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="edit-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -210,6 +211,7 @@ exports[`Failed text bubble test shows a DEFAULT RECEIVED text bubble that is sw
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="delete-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -440,6 +442,7 @@ exports[`Failed text bubble test shows a DEFAULT SENT text bubble that is swipea
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="edit-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -540,6 +543,7 @@ exports[`Failed text bubble test shows a DEFAULT SENT text bubble that is swipea
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="delete-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -770,6 +774,7 @@ exports[`Failed text bubble test shows a WARNING RECEIVED text bubble that is sw
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="edit-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -870,6 +875,7 @@ exports[`Failed text bubble test shows a WARNING RECEIVED text bubble that is sw
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="delete-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -1100,6 +1106,7 @@ exports[`Failed text bubble test shows a WARNING SENT text bubble that is swipea
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="edit-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -1200,6 +1207,7 @@ exports[`Failed text bubble test shows a WARNING SENT text bubble that is swipea
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="delete-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -1430,6 +1438,7 @@ exports[`Failed text bubble test shows an ERROR RECEIVED text bubble that is swi
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="edit-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -1530,6 +1539,7 @@ exports[`Failed text bubble test shows an ERROR RECEIVED text bubble that is swi
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="delete-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -1760,6 +1770,7 @@ exports[`Failed text bubble test shows an ERROR SENT text bubble that is swipeab
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="edit-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -1860,6 +1871,7 @@ exports[`Failed text bubble test shows an ERROR SENT text bubble that is swipeab
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="delete-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"

package/src/components/molecules/send-bubble/send-text-bubble.component.d.ts

@@ -1,11 +1,12 @@
 import { BubbleAlignment } from '../../../types/bubble-alignment.enum';
 import { VisualState } from '../../../types/visual-state.enum';
 type FailedBubbleProps = {
+    id: string;
     text: string;
     visualState: VisualState;
     bubbleAlignment: BubbleAlignment;
-    onPressEdit: () => void;
-    onPressDelete: () => void;
+    onPressEdit: (id: string) => void;
+    onPressDelete: (id: string) => void;
 };
-declare const SendTextBubble: ({ text, visualState, bubbleAlignment, onPressEdit, onPressDelete, }: FailedBubbleProps) => JSX.Element;
+declare const SendTextBubble: ({ id, text, visualState, bubbleAlignment, onPressEdit, onPressDelete, }: FailedBubbleProps) => JSX.Element;
 export { SendTextBubble };

package/src/components/molecules/send-bubble/send-text-bubble.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useContext} from 'react';
+import {useContext, useEffect, useRef} from 'react';
 
 import {Animated, Pressable, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
@@ -12,14 +12,16 @@ import {VisualState} from '../../../types/visual-state.enum';
 import {SmallText} from '../../atoms/paragraph-components';
 
 type FailedBubbleProps = {
+  id: string;
   text: string;
   visualState: VisualState;
   bubbleAlignment: BubbleAlignment;
-  onPressEdit: () => void;
-  onPressDelete: () => void;
+  onPressEdit: (id: string) => void;
+  onPressDelete: (id: string) => void;
 };
 
 const SendTextBubble = ({
+  id,
   text,
   visualState,
   bubbleAlignment,
@@ -29,6 +31,12 @@ const SendTextBubble = ({
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context, visualState, bubbleAlignment);
 
+  const swipeableRef = useRef<Swipeable>(null);
+
+  useEffect(() => {
+    swipeableRef.current?.close();
+  }, [text]);
+
   function iconColorCheck() {
     return visualState === VisualState.DEFAULT
       ? context.colors.main['0']
@@ -59,12 +67,12 @@ const SendTextBubble = ({
     return (
       <View style={styles.swipedRow}>
         <Animated.View style={[styles.swipedIcon, {opacity}]}>
-          <Pressable onPress={onPressEdit}>
+          <Pressable onPress={() => onPressEdit(id)} testID="edit-button">
             <Icon style={'regular'} name={'pencil'} color={iconColorCheck()} />
           </Pressable>
         </Animated.View>
         <Animated.View style={[styles.swipedIcon, {opacity}]}>
-          <Pressable onPress={onPressDelete}>
+          <Pressable onPress={() => onPressDelete(id)} testID="delete-button">
             <Icon style={'regular'} name={'trash'} color={iconColorCheck()} />
           </Pressable>
         </Animated.View>
@@ -75,7 +83,10 @@ const SendTextBubble = ({
   return (
     <GestureHandlerRootView>
       <View style={styles.textBubbleContainer}>
-        <Swipeable renderRightActions={RenderEditDeleteAction}>
+        <Swipeable
+          ref={swipeableRef}
+          renderRightActions={RenderEditDeleteAction}
+        >
           <SmallText
             textColor={textColorCheck(visualState)}
             addStyle={styles.text}

package/src/components/molecules/send-bubble/send-text-bubble.test.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import {SendTextBubble} from './send-text-bubble.component';
+import {fireEvent, render} from '@testing-library/react-native';
+import {VisualState} from '../../../types/visual-state.enum';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
 
 describe('Failed text bubble test', () => {
   it('shows a DEFAULT SENT text bubble that is swipeable with edit and trash icon, which if we press them we can edit or delete the message', () => {
     const tree = renderer
       .create(
         <SendTextBubble
+          id={'1'}
           text={'This is a test'}
           visualState="DEFAULT"
           bubbleAlignment="SENT"
@@ -22,6 +26,7 @@ describe('Failed text bubble test', () => {
     const tree = renderer
       .create(
         <SendTextBubble
+          id={'2'}
           text={'This is a test'}
           visualState="DEFAULT"
           bubbleAlignment="RECEIVE"
@@ -37,6 +42,7 @@ describe('Failed text bubble test', () => {
     const tree = renderer
       .create(
         <SendTextBubble
+          id={'3'}
           text={'This is a test'}
           visualState="WARNING"
           bubbleAlignment="SENT"
@@ -52,6 +58,7 @@ describe('Failed text bubble test', () => {
     const tree = renderer
       .create(
         <SendTextBubble
+          id={'4'}
           text={'This is a test'}
           visualState="WARNING"
           bubbleAlignment="RECEIVE"
@@ -67,6 +74,7 @@ describe('Failed text bubble test', () => {
     const tree = renderer
       .create(
         <SendTextBubble
+          id={'4'}
           text={'This is a test'}
           visualState="ERROR"
           bubbleAlignment="SENT"
@@ -82,6 +90,7 @@ describe('Failed text bubble test', () => {
     const tree = renderer
       .create(
         <SendTextBubble
+          id={'5'}
           text={'This is a test'}
           visualState="ERROR"
           bubbleAlignment="RECEIVE"
@@ -94,3 +103,65 @@ describe('Failed text bubble test', () => {
     expect(tree).toMatchSnapshot();
   });
 });
+
+describe('SendTextBubble', () => {
+  const mockId = '123';
+  const mockText = 'Hello, world!';
+  const mockVisualState = VisualState.DEFAULT;
+  const mockBubbleAlignment = BubbleAlignment.SENT;
+  const mockOnPressEdit = jest.fn();
+  const mockOnPressDelete = jest.fn();
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the component correctly', () => {
+    const {getByText} = render(
+      <SendTextBubble
+        id={mockId}
+        text={mockText}
+        visualState={mockVisualState}
+        bubbleAlignment={mockBubbleAlignment}
+        onPressEdit={mockOnPressEdit}
+        onPressDelete={mockOnPressDelete}
+      />
+    );
+
+    expect(getByText(mockText)).toBeDefined();
+  });
+
+  it('should call onPressEdit when the edit button is pressed', () => {
+    const {getByTestId} = render(
+      <SendTextBubble
+        id={mockId}
+        text={mockText}
+        visualState={mockVisualState}
+        bubbleAlignment={mockBubbleAlignment}
+        onPressEdit={mockOnPressEdit}
+        onPressDelete={mockOnPressDelete}
+      />
+    );
+
+    fireEvent.press(getByTestId('edit-button'));
+
+    expect(mockOnPressEdit).toHaveBeenCalledWith(mockId);
+  });
+
+  it('should call onPressDelete when the delete button is pressed', () => {
+    const {getByTestId} = render(
+      <SendTextBubble
+        id={mockId}
+        text={mockText}
+        visualState={mockVisualState}
+        bubbleAlignment={mockBubbleAlignment}
+        onPressEdit={mockOnPressEdit}
+        onPressDelete={mockOnPressDelete}
+      />
+    );
+
+    fireEvent.press(getByTestId('delete-button'));
+
+    expect(mockOnPressDelete).toHaveBeenCalledWith(mockId);
+  });
+});

package/src/components/molecules/tag/tag.component.d.ts

@@ -1,7 +1,8 @@
 type TagProps = {
     value: string;
     label: string;
-    onPress: (event: string) => void;
+    onPress: (value: string, isSelected: boolean) => void;
+    isSelected: boolean;
 };
-declare const Tag: ({ label, onPress, value }: TagProps) => JSX.Element;
+declare const Tag: ({ label, onPress, value, isSelected }: TagProps) => JSX.Element;
 export { Tag as Tag };

package/src/components/organisms/day-select/day-select.component.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import {
   Directions,
   Gesture,
@@ -34,6 +34,10 @@ const DaySelect = ({onSelectDate, selectedDate, startDate}: DaySelectProps) => {
     createWeekDays(startDate.startOf('week'))
   );
 
+  useEffect(() => {
+    setWeekData(createWeekDays(startDate.startOf('week')));
+  }, [startDate]);
+
   const onSwipeLeft = () => {
     let firstDayOfWeek = weekData.shift();
     if (!firstDayOfWeek) return;

package/src/components/organisms/text-bubble/__snapshots__/text-bubble.test.js.snap

@@ -15,6 +15,7 @@ exports[`test text-bubble given the bubbleAlignment is SENT return a text-bubble
       [
         {
           "maxWidth": "80%",
+          "minWidth": "50%",
         },
         {
           "alignSelf": "flex-end",
@@ -131,6 +132,7 @@ exports[`test text-bubble given the bubbleAlignment is SENT return a text-bubble
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  testID="edit-button"
                 >
                   <RNSVGSvgView
                     align="xMidYMid"
@@ -231,6 +233,7 @@ exports[`test text-bubble given the bubbleAlignment is SENT return a text-bubble
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  testID="delete-button"
                 >
                   <RNSVGSvgView
                     align="xMidYMid"
@@ -404,6 +407,7 @@ exports[`test text-bubble given the visualState is DEFAULT return a light-blue c
       [
         {
           "maxWidth": "80%",
+          "minWidth": "50%",
         },
         {
           "alignSelf": "flex-end",
@@ -520,6 +524,7 @@ exports[`test text-bubble given the visualState is DEFAULT return a light-blue c
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  testID="edit-button"
                 >
                   <RNSVGSvgView
                     align="xMidYMid"
@@ -620,6 +625,7 @@ exports[`test text-bubble given the visualState is DEFAULT return a light-blue c
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  testID="delete-button"
                 >
                   <RNSVGSvgView
                     align="xMidYMid"
@@ -793,6 +799,7 @@ exports[`test text-bubble given the visualState is ERROR return a red colored te
       [
         {
           "maxWidth": "80%",
+          "minWidth": "50%",
         },
         {
           "alignSelf": "flex-end",
@@ -909,6 +916,7 @@ exports[`test text-bubble given the visualState is ERROR return a red colored te
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  testID="edit-button"
                 >
                   <RNSVGSvgView
                     align="xMidYMid"
@@ -1009,6 +1017,7 @@ exports[`test text-bubble given the visualState is ERROR return a red colored te
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  testID="delete-button"
                 >
                   <RNSVGSvgView
                     align="xMidYMid"
@@ -1182,6 +1191,7 @@ exports[`test text-bubble given the visualState is RECEIVE return a text-bubble
       [
         {
           "maxWidth": "80%",
+          "minWidth": "50%",
         },
         false,
       ]
@@ -1296,6 +1306,7 @@ exports[`test text-bubble given the visualState is RECEIVE return a text-bubble
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  testID="edit-button"
                 >
                   <RNSVGSvgView
                     align="xMidYMid"
@@ -1396,6 +1407,7 @@ exports[`test text-bubble given the visualState is RECEIVE return a text-bubble
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  testID="delete-button"
                 >
                   <RNSVGSvgView
                     align="xMidYMid"
@@ -1567,6 +1579,7 @@ exports[`test text-bubble given the visualState is RECEIVE return a textBubble w
       [
         {
           "maxWidth": "80%",
+          "minWidth": "50%",
         },
         false,
       ]
@@ -1681,6 +1694,7 @@ exports[`test text-bubble given the visualState is RECEIVE return a textBubble w
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  testID="edit-button"
                 >
                   <RNSVGSvgView
                     align="xMidYMid"
@@ -1781,6 +1795,7 @@ exports[`test text-bubble given the visualState is RECEIVE return a textBubble w
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  testID="delete-button"
                 >
                   <RNSVGSvgView
                     align="xMidYMid"
@@ -1952,6 +1967,7 @@ exports[`test text-bubble given the visualState is WARNING return an orange colo
       [
         {
           "maxWidth": "80%",
+          "minWidth": "50%",
         },
         {
           "alignSelf": "flex-end",
@@ -2068,6 +2084,7 @@ exports[`test text-bubble given the visualState is WARNING return an orange colo
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  testID="edit-button"
                 >
                   <RNSVGSvgView
                     align="xMidYMid"
@@ -2168,6 +2185,7 @@ exports[`test text-bubble given the visualState is WARNING return an orange colo
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  testID="delete-button"
                 >
                   <RNSVGSvgView
                     align="xMidYMid"
@@ -2341,6 +2359,7 @@ exports[`test text-bubble return a text bubble, that will be send, but does not
       [
         {
           "maxWidth": "80%",
+          "minWidth": "50%",
         },
         {
           "alignSelf": "flex-end",
@@ -2521,6 +2540,7 @@ exports[`test text-bubble return a text bubble, that will be send, but does not
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  testID="refresh-button"
                 >
                   <RNSVGSvgView
                     align="xMidYMid"
@@ -2621,6 +2641,7 @@ exports[`test text-bubble return a text bubble, that will be send, but does not
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  testID="delete-button"
                 >
                   <RNSVGSvgView
                     align="xMidYMid"

package/src/components/organisms/text-bubble/text-bubble.component.d.ts

@@ -2,14 +2,15 @@ import { VisualState } from '../../../types/visual-state.enum';
 import { BubbleAlignment } from '../../../types/bubble-alignment.enum';
 import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type TextBubbleProps = {
+    id: string;
     text: string;
     visualState: VisualState;
     bubbleAlignment: BubbleAlignment;
     timestamp: ToddleDateTime;
     send: boolean;
-    onFail: () => void;
-    onEdit: () => void;
-    onDelete: () => void;
+    onFail: (id: string) => void;
+    onEdit: (id: string) => void;
+    onDelete: (id: string) => void;
 };
-declare const TextBubble: ({ text, visualState, bubbleAlignment, timestamp, send, onFail, onEdit, onDelete, }: TextBubbleProps) => JSX.Element;
+declare const TextBubble: ({ id, text, visualState, bubbleAlignment, timestamp, send, onFail, onEdit, onDelete, }: TextBubbleProps) => JSX.Element;
 export { TextBubble as TextBubble };

package/src/components/organisms/text-bubble/text-bubble.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useContext} from 'react';
+import {useContext, useEffect, useState} from 'react';
 
 import {View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
@@ -13,17 +13,19 @@ import {FailedTextBubble} from '../../molecules/failed-to-send/failed-bubble.com
 import {SendTextBubble} from '../../molecules/send-bubble/send-text-bubble.component';
 
 type TextBubbleProps = {
+  id: string;
   text: string;
   visualState: VisualState;
   bubbleAlignment: BubbleAlignment;
   timestamp: ToddleDateTime;
   send: boolean;
-  onFail: () => void;
-  onEdit: () => void;
-  onDelete: () => void;
+  onFail: (id: string) => void;
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
 };
 
 const TextBubble = ({
+  id,
   text,
   visualState,
   bubbleAlignment,
@@ -36,13 +38,20 @@ const TextBubble = ({
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context, bubbleAlignment);
 
+  const [internalVisualState, setInternalVisualState] = useState(visualState);
+
+  useEffect(() => {
+    setInternalVisualState(visualState);
+  }, [visualState]);
+
   return (
     <View style={styles.rootContainer}>
       {send ? (
         <View style={styles.textBubbleRootContainer}>
           <SendTextBubble
+            id={id}
             text={text}
-            visualState={visualState}
+            visualState={internalVisualState}
             bubbleAlignment={bubbleAlignment}
             onPressEdit={onEdit}
             onPressDelete={onDelete}
@@ -51,6 +60,7 @@ const TextBubble = ({
       ) : (
         <View style={styles.failedBubbleRootContainer}>
           <FailedTextBubble
+            id={id}
             text={text}
             onPressRefresh={onFail}
             onPressDelete={onDelete}

package/src/components/organisms/text-bubble/text-bubble.preview.tsx

@@ -12,13 +12,13 @@ export const TextBubblePreview = ({}: {}) => {
   return (
     <View
       style={{
-        flex: 1,
         justifyContent: 'flex-start',
         alignItems: 'stretch',
         padding: 16,
       }}
     >
       <TextBubble
+        id={'1'}
         text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit velit in nibh varius, quis accumsan tellus maximus."
         bubbleAlignment={BubbleAlignment.SENT}
         visualState={VisualState.DEFAULT}
@@ -29,6 +29,7 @@ export const TextBubblePreview = ({}: {}) => {
         onDelete={() => alert('Delete the message')}
       />
       <TextBubble
+        id={'2'}
         text="Test."
         bubbleAlignment={BubbleAlignment.RECEIVE}
         visualState={VisualState.WARNING}
@@ -39,6 +40,7 @@ export const TextBubblePreview = ({}: {}) => {
         onDelete={() => alert('Delete the message')}
       />
       <TextBubble
+        id={'3'}
         text={`"I don't like sand... it's rough, and course, and irritating, and it gets everywhere."`}
         bubbleAlignment={BubbleAlignment.RECEIVE}
         visualState={VisualState.DEFAULT}
@@ -49,6 +51,7 @@ export const TextBubblePreview = ({}: {}) => {
         onDelete={() => alert('Delete the message')}
       />
       <TextBubble
+        id={'4'}
         text="Error!"
         bubbleAlignment={BubbleAlignment.SENT}
         visualState={VisualState.ERROR}
@@ -59,6 +62,7 @@ export const TextBubblePreview = ({}: {}) => {
         onDelete={() => alert('Delete the message')}
       />
       <TextBubble
+        id={'5'}
         text="Niet verzonden! Probeer het opnieuw aub! Swipe en refresh!"
         bubbleAlignment={BubbleAlignment.SENT}
         visualState={VisualState.ERROR}
@@ -69,6 +73,7 @@ export const TextBubblePreview = ({}: {}) => {
         onDelete={() => alert('Delete the message')}
       />
       <TextBubble
+        id={'6'}
         text="We hebben uw betaling van vorige maand nog niet ontvangen!"
         bubbleAlignment={BubbleAlignment.RECEIVE}
         visualState={VisualState.ERROR}