Init payments message types

ts/components/conversation/Quote.tsx

@@ -22,10 +22,14 @@ import { TextAttachment } from '../TextAttachment';
 import { getTextWithMentions } from '../../util/getTextWithMentions';
 import { getClassNamesFor } from '../../util/getClassNamesFor';
 import { getCustomColorStyle } from '../../util/getCustomColorStyle';
+import type { AnyPaymentEvent } from '../../types/Payment';
+import { PaymentEventKind } from '../../types/Payment';
+import { getPaymentEventNotificationText } from '../../messages/helpers';
 
 export type Props = {
   authorTitle: string;
   conversationColor: ConversationColorType;
+  conversationTitle: string;
   customColor?: CustomColorType;
   bodyRanges?: HydratedBodyRangesType;
   i18n: LocalizerType;
@@ -38,6 +42,7 @@ export type Props = {
   onClose?: () => void;
   text: string;
   rawAttachment?: QuotedAttachmentType;
+  payment?: AnyPaymentEvent;
   isGiftBadge: boolean;
   isViewOnce: boolean;
   reactionEmoji?: string;
@@ -74,6 +79,10 @@ function validateQuote(quote: Props): boolean {
     return true;
   }
 
+  if (quote.payment?.kind === PaymentEventKind.Notification) {
+    return true;
+  }
+
   return false;
 }
 
@@ -274,6 +283,28 @@ export class Quote extends React.Component<Props, State> {
     );
   }
 
+  public renderPayment(): JSX.Element | null {
+    const { payment, authorTitle, conversationTitle, isFromMe, i18n } =
+      this.props;
+
+    if (payment == null) {
+      return null;
+    }
+
+    return (
+      <>
+        <Emojify text="💳" />
+        {getPaymentEventNotificationText(
+          payment,
+          authorTitle,
+          conversationTitle,
+          isFromMe,
+          i18n
+        )}
+      </>
+    );
+  }
+
   public renderIconContainer(): JSX.Element | null {
     const { isGiftBadge, isViewOnce, i18n, rawAttachment } = this.props;
     const { imageBroken } = this.state;
@@ -550,6 +581,7 @@ export class Quote extends React.Component<Props, State> {
           <div className={this.getClassName('__primary')}>
             {this.renderAuthor()}
             {this.renderGenericFile()}
+            {this.renderPayment()}
             {this.renderText()}
           </div>
           {reactionEmoji && (