npm - @messenger-box/platform-mobile - Versions diffs - 10.0.3-alpha.135 → 10.0.3-alpha.138 - Mend

@messenger-box/platform-mobile 10.0.3-alpha.135 → 10.0.3-alpha.138

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [10.0.3-alpha.138](https://github.com/CDEBase/messenger-box/compare/v10.0.3-alpha.137...v10.0.3-alpha.138) (2025-12-05)
+**Note:** Version bump only for package @messenger-box/platform-mobile
+## [10.0.3-alpha.136](https://github.com/CDEBase/messenger-box/compare/v10.0.3-alpha.135...v10.0.3-alpha.136) (2025-12-02)
+**Note:** Version bump only for package @messenger-box/platform-mobile
 ## [10.0.3-alpha.135](https://github.com/CDEBase/messenger-box/compare/v10.0.3-alpha.134...v10.0.3-alpha.135) (2025-11-28)
 **Note:** Version bump only for package @messenger-box/platform-mobile

package/lib/screens/inbox/DialogMessages.js CHANGED Viewed

@@ -33,13 +33,15 @@ function DialogMessages(_a) {
   var _b = _a, {
     channelId,
     role,
-    isShowThreadMessage = true
+    isShowThreadMessage = true,
+    isPaymentChatUI = false
   } = _b, rest = __objRest(_b, [
     "channelId",
     "role",
-    "isShowThreadMessage"
+    "isShowThreadMessage",
+    "isPaymentChatUI"
   ]);
   var _a2, _b2, _c;
   const currentRoute = navigationRef.isReady() ? (_a2 = navigationRef) == null ? void 0 : _a2.getCurrentRoute() : null;
-  return /* @__PURE__ */ React.createElement(Box, { className: "bg-white flex-1" }, /* @__PURE__ */ React.createElement(ConversationView, __spreadProps(__spreadValues({}, rest), { channelId: (_c = (_b2 = currentRoute == null ? void 0 : currentRoute.params) == null ? void 0 : _b2.channelId) != null ? _c : channelId, role, isShowThreadMessage })));
+  return /* @__PURE__ */ React.createElement(Box, { className: "bg-white flex-1" }, /* @__PURE__ */ React.createElement(ConversationView, __spreadProps(__spreadValues({}, rest), { channelId: (_c = (_b2 = currentRoute == null ? void 0 : currentRoute.params) == null ? void 0 : _b2.channelId) != null ? _c : channelId, role, isShowThreadMessage, isPaymentChatUI })));
 }export{DialogMessages,DialogMessages as default};//# sourceMappingURL=DialogMessages.js.map

package/lib/screens/inbox/DialogMessages.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialogMessages.js","sources":["../../../src/screens/inbox/DialogMessages.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Box } from '@admin-layout/gluestack-ui-mobile';\nimport { ConversationView } from './containers/ConversationView';\nimport { navigationRef } from '@common-stack/client-react';\n\nexport function DialogMessages({ channelId, role, isShowThreadMessage = true, ...rest }) {\n const currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;\n return (\n // <Box bg={'white'} flex={1} pt={5}>\n <Box className=\"bg-white flex-1\">\n <ConversationView\n {...rest}\n channelId={currentRoute?.params?.channelId ?? channelId}\n role={role}\n isShowThreadMessage={isShowThreadMessage}\n />\n </Box>\n );\n}\n\nexport default DialogMessages;\n"],"names":["_a","_b"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,SAAS,eAAe,EAAA,~~EAK5B~~;~~AAL4B~~,EAAA,IAAA,EAAA,GAAA,EAAA,EAC7B;AAAA,IAAA,SAAA;AAAA,IACA,IAAA;AAAA,IACA,mBAAA,GAAsB;AAAA,~~GAPxB~~,GAI+B,EAAA,~~EAI1B~~,IAAA,GAAA,SAAA,~~CAJ0B~~,EAAA,~~EAI1B~~;AAAA,~~IAHH~~,WAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GAAA,CAAA;~~AAPF~~,EAAA,IAAAA,KAAAC,GAAAA,EAAA,EAAA;~~AAUE~~,EAAA,MAAM,eAAe,aAAA,CAAc,OAAA,MAAYD,GAAAA,GAAA,aAAA,KAAA,IAAA,GAAA,MAAA,GAAAA,IAAe,eAAA,EAAA,GAAoB,IAAA;AAClF,EAAA,uBAEE,KAAA,CAAA,aAAA,CAAC,OAAI,SAAA,EAAU,iBAAA,EAAA,sCACN,gBAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAqB,IAAA,CAAA,EAArB,EAA2B,SAAA,EAAA,CAAW,EAAA,GAAA,CAAAC,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,MAAA,KAAd,gBAAAA,GAAAA,CAAsB,SAAA,KAAtB,YAAmC,SAAA,EAAW,IAAA,EAAY,~~sBAA0C~~,~~CAC/I~~,CAAA;AAER"}
1	+ {"version":3,"file":"DialogMessages.js","sources":["../../../src/screens/inbox/DialogMessages.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Box } from '@admin-layout/gluestack-ui-mobile';\nimport { ConversationView } from './containers/ConversationView';\nimport { navigationRef } from '@common-stack/client-react';\n\nexport function DialogMessages({ channelId, role, isShowThreadMessage = true, isPaymentChatUI = false, ...rest }) {\n const currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;\n return (\n // <Box bg={'white'} flex={1} pt={5}>\n <Box className=\"bg-white flex-1\">\n <ConversationView\n {...rest}\n channelId={currentRoute?.params?.channelId ?? channelId}\n role={role}\n isShowThreadMessage={isShowThreadMessage}\n isPaymentChatUI={isPaymentChatUI}\n />\n </Box>\n );\n}\n\nexport default DialogMessages;\n"],"names":["_a","_b"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,SAAS,eAAe,EAAA,EAM5B;AAN4B,EAAA,IAAA,EAAA,GAAA,EAAA,EAC7B;AAAA,IAAA,SAAA;AAAA,IACA,IAAA;AAAA,IACA,mBAAA,GAAsB,IAAA;AAAA,IACtB,eAAA,GAAkB;AAAA,GARpB,GAI+B,EAAA,EAK1B,IAAA,GAAA,SAAA,CAL0B,EAAA,EAK1B;AAAA,IAJH,WAAA;AAAA,IACA,MAAA;AAAA,IACA,qBAAA;AAAA,IACA;AAAA,GAAA,CAAA;AARF,EAAA,IAAAA,KAAAC,GAAAA,EAAA,EAAA;AAWE,EAAA,MAAM,eAAe,aAAA,CAAc,OAAA,MAAYD,GAAAA,GAAA,aAAA,KAAA,IAAA,GAAA,MAAA,GAAAA,IAAe,eAAA,EAAA,GAAoB,IAAA;AAClF,EAAA,uBAEE,KAAA,CAAA,aAAA,CAAC,OAAI,SAAA,EAAU,iBAAA,EAAA,sCACN,gBAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAqB,IAAA,CAAA,EAArB,EAA2B,SAAA,EAAA,CAAW,EAAA,GAAA,CAAAC,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,MAAA,KAAd,gBAAAA,GAAAA,CAAsB,SAAA,KAAtB,YAAmC,SAAA,EAAW,IAAA,EAAY,mBAAA,EAA0C,eAAA,EAAA,CAAkC,CACjL,CAAA;AAER"}

package/lib/screens/inbox/components/SlackMessageContainer/PaymentMessage.js ADDED Viewed

@@ -0,0 +1,197 @@
+import React__default from'react';import {TouchableOpacity,StyleSheet,View}from'react-native';import {Day,utils}from'react-native-gifted-chat';import {Avatar,AvatarFallbackText,AvatarImage,Text}from'@admin-layout/gluestack-ui-mobile';import {MaterialCommunityIcons}from'@expo/vector-icons';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, key + "" , value);
+  return value;
+};
+const {
+  isSameUser,
+  isSameDay
+} = utils;
+class PaymentMessage extends React__default.Component {
+  getInnerComponentProps() {
+    const _a = this.props, {
+      containerStyle
+    } = _a, props = __objRest(_a, [
+      "containerStyle"
+    ]);
+    return __spreadProps(__spreadValues({}, props), {
+      position: "left",
+      isSameUser,
+      isSameDay
+    });
+  }
+  renderDay() {
+    if (this.props.currentMessage.createdAt) {
+      const dayProps = this.getInnerComponentProps();
+      if (this.props.renderDay) {
+        return this.props.renderDay(dayProps);
+      }
+      return /* @__PURE__ */ React__default.createElement(Day, __spreadValues({}, dayProps));
+    }
+    return null;
+  }
+  renderAvatar(isRight) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    let isSameUserAndSameDay = false;
+    if (isSameUser(this.props.currentMessage, this.props.previousMessage) && isSameDay(this.props.currentMessage, this.props.previousMessage)) {
+      isSameUserAndSameDay = true;
+    }
+    const avatarProps = this.getInnerComponentProps();
+    return /* @__PURE__ */ React__default.createElement(Avatar, { size: "sm", className: "bg-transparent rounded-none", style: [isRight ? {
+      marginLeft: 8
+    } : {
+      marginRight: 8
+    }] }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, isSameUserAndSameDay ? "" : (_c = (_b = (_a = avatarProps == null ? void 0 : avatarProps.currentMessage) == null ? void 0 : _a.user) == null ? void 0 : _b.name) == null ? void 0 : _c[0]), !isSameUserAndSameDay && ((_e = (_d = avatarProps == null ? void 0 : avatarProps.currentMessage) == null ? void 0 : _d.user) == null ? void 0 : _e.avatar) && /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "image", style: {
+      height: 40,
+      width: 40,
+      borderRadius: 3,
+      marginTop: 1
+    }, source: {
+      uri: (_g = (_f = avatarProps == null ? void 0 : avatarProps.currentMessage) == null ? void 0 : _f.user) == null ? void 0 : _g.avatar
+    } }));
+  }
+  renderPaymentBubble(isRight) {
+    var _a;
+    const {
+      currentMessage
+    } = this.props;
+    const paymentDetails = ((_a = currentMessage == null ? void 0 : currentMessage.propsConfiguration) == null ? void 0 : _a.payment) || {};
+    const amount = paymentDetails.amount || (currentMessage == null ? void 0 : currentMessage.amount);
+    const currency = paymentDetails.currency || (currentMessage == null ? void 0 : currentMessage.currency) || "\u20B9";
+    const status = paymentDetails.status || (currentMessage == null ? void 0 : currentMessage.status) || "Sent Securely";
+    const paymentNote = paymentDetails.note || (currentMessage == null ? void 0 : currentMessage.text);
+    const time = (currentMessage == null ? void 0 : currentMessage.createdAt) ? new Date(currentMessage.createdAt).toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit"
+    }) : "";
+    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { activeOpacity: 0.85, style: [styles.bubble, isRight ? styles.bubbleRight : styles.bubbleLeft, {
+      alignSelf: isRight ? "flex-end" : "flex-start"
+    }] }, /* @__PURE__ */ React__default.createElement(Text, { style: styles.amount }, currency, amount), /* @__PURE__ */ React__default.createElement(View, { style: styles.secureRow }, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "check-circle-outline", size: 20, color: "#4caf50", style: {
+      marginRight: 4
+    } }), /* @__PURE__ */ React__default.createElement(Text, { style: styles.secureText }, status), /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "chevron-right", size: 22, color: "#7c3aed", style: {
+      marginLeft: 4
+    } })), paymentNote && paymentNote !== status && /* @__PURE__ */ React__default.createElement(Text, { style: styles.note }, paymentNote), /* @__PURE__ */ React__default.createElement(Text, { style: [styles.time, {
+      textAlign: isRight ? "right" : "left"
+    }] }, time));
+  }
+  render() {
+    var _a;
+    const {
+      currentMessage,
+      user
+    } = this.props;
+    const isRight = ((_a = currentMessage == null ? void 0 : currentMessage.user) == null ? void 0 : _a._id) === (user == null ? void 0 : user._id);
+    const marginBottom = isSameUser(currentMessage, this.props.nextMessage) ? 2 : 10;
+    return /* @__PURE__ */ React__default.createElement(View, null, this.renderDay(), /* @__PURE__ */ React__default.createElement(View, { style: [styles.container, {
+      marginBottom
+    }, isRight ? styles.containerRight : styles.containerLeft] }, isRight ? null : this.renderAvatar(false), this.renderPaymentBubble(isRight), isRight ? this.renderAvatar(true) : null));
+  }
+}
+__publicField(PaymentMessage, "defaultProps", {
+  renderAvatar: void 0,
+  renderBubble: null,
+  renderDay: null,
+  currentMessage: {},
+  nextMessage: {},
+  previousMessage: {},
+  user: {},
+  containerStyle: {},
+  isShowImageViewer: false,
+  setImageViewer: (obj, v) => null
+});
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    width: "100%"
+  },
+  containerLeft: {
+    justifyContent: "flex-start"
+  },
+  containerRight: {
+    flexDirection: "row-reverse",
+    justifyContent: "flex-end"
+  },
+  bubble: {
+    backgroundColor: "#f3e8ff",
+    borderRadius: 16,
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    minWidth: 160,
+    maxWidth: 320,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    elevation: 2,
+    marginBottom: 2
+  },
+  bubbleLeft: {
+    marginLeft: 0,
+    marginRight: 32
+  },
+  bubbleRight: {
+    marginRight: 0,
+    marginLeft: 32
+  },
+  amount: {
+    fontSize: 26,
+    fontWeight: "bold",
+    color: "#18181b",
+    marginBottom: 8
+  },
+  secureRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 4
+  },
+  secureText: {
+    fontSize: 16,
+    color: "#18181b",
+    fontWeight: "500"
+  },
+  note: {
+    fontSize: 14,
+    color: "#6b7280",
+    marginTop: 2,
+    marginBottom: 2
+  },
+  time: {
+    fontSize: 12,
+    color: "#a1a1aa",
+    marginTop: 6
+  }
+});export{PaymentMessage as default};//# sourceMappingURL=PaymentMessage.js.map

package/lib/screens/inbox/components/SlackMessageContainer/PaymentMessage.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PaymentMessage.js","sources":["../../../../../src/screens/inbox/components/SlackMessageContainer/PaymentMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { View, StyleSheet, TouchableOpacity } from 'react-native';\nimport { Day, utils } from 'react-native-gifted-chat';\nimport { Avatar, AvatarFallbackText, AvatarImage, Text } from '@admin-layout/gluestack-ui-mobile';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\n\nconst { isSameUser, isSameDay } = utils;\n\nexport default class PaymentMessage extends React.Component<any> {\n static defaultProps = {\n renderAvatar: undefined,\n renderBubble: null,\n renderDay: null,\n currentMessage: {},\n nextMessage: {},\n previousMessage: {},\n user: {},\n containerStyle: {},\n isShowImageViewer: false,\n setImageViewer: (obj: any, v: boolean) => null,\n };\n\n getInnerComponentProps() {\n const { containerStyle, ...props } = this.props;\n return {\n ...props,\n position: 'left',\n isSameUser,\n isSameDay,\n };\n }\n\n renderDay() {\n if (this.props.currentMessage.createdAt) {\n const dayProps = this.getInnerComponentProps();\n if (this.props.renderDay) {\n return this.props.renderDay(dayProps);\n }\n return <Day {...dayProps} />;\n }\n return null;\n }\n\n renderAvatar(isRight: boolean) {\n let extraStyle: any;\n let isSameUserAndSameDay: boolean = false;\n if (\n isSameUser(this.props.currentMessage, this.props.previousMessage) &&\n isSameDay(this.props.currentMessage, this.props.previousMessage)\n ) {\n extraStyle = { height: 0 };\n isSameUserAndSameDay = true;\n }\n const avatarProps: any = this.getInnerComponentProps();\n return (\n <Avatar\n size={'sm'}\n className=\"bg-transparent rounded-none\"\n style={[isRight ? { marginLeft: 8 } : { marginRight: 8 }]}\n >\n <AvatarFallbackText>\n {isSameUserAndSameDay ? '' : avatarProps?.currentMessage?.user?.name?.[0]}\n </AvatarFallbackText>\n {!isSameUserAndSameDay && avatarProps?.currentMessage?.user?.avatar && (\n <AvatarImage\n alt=\"image\"\n style={{ height: 40, width: 40, borderRadius: 3, marginTop: 1 }}\n source={{\n uri: avatarProps?.currentMessage?.user?.avatar,\n }}\n />\n )}\n </Avatar>\n );\n }\n\n renderPaymentBubble(isRight: boolean) {\n const { currentMessage } = this.props;\n // Extract payment details\n const paymentDetails = currentMessage?.propsConfiguration?.payment || {};\n const amount = paymentDetails.amount || currentMessage?.amount;\n const currency = paymentDetails.currency || currentMessage?.currency || '₹';\n const status = paymentDetails.status || currentMessage?.status || 'Sent Securely';\n const paymentNote = paymentDetails.note || currentMessage?.text;\n const time = currentMessage?.createdAt\n ? new Date(currentMessage.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })\n : '';\n\n return (\n <TouchableOpacity\n activeOpacity={0.85}\n style={[\n styles.bubble,\n isRight ? styles.bubbleRight : styles.bubbleLeft,\n { alignSelf: isRight ? 'flex-end' : 'flex-start' },\n ]}\n >\n <Text style={styles.amount}>\n {currency}\n {amount}\n </Text>\n <View style={styles.secureRow}>\n <MaterialCommunityIcons\n name=\"check-circle-outline\"\n size={20}\n color=\"#4caf50\"\n style={{ marginRight: 4 }}\n />\n <Text style={styles.secureText}>{status}</Text>\n <MaterialCommunityIcons name=\"chevron-right\" size={22} color=\"#7c3aed\" style={{ marginLeft: 4 }} />\n </View>\n {paymentNote && paymentNote !== status && <Text style={styles.note}>{paymentNote}</Text>}\n <Text style={[styles.time, { textAlign: isRight ? 'right' : 'left' }]}>{time}</Text>\n </TouchableOpacity>\n );\n }\n\n render() {\n const { currentMessage, user } = this.props;\n const isRight = currentMessage?.user?._id === user?._id;\n const marginBottom = isSameUser(currentMessage, this.props.nextMessage) ? 2 : 10;\n return (\n <View>\n {this.renderDay()}\n <View\n style={[styles.container, { marginBottom }, isRight ? styles.containerRight : styles.containerLeft]}\n >\n {isRight ? null : this.renderAvatar(false)}\n {this.renderPaymentBubble(isRight)}\n {isRight ? this.renderAvatar(true) : null}\n </View>\n </View>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: 'row',\n alignItems: 'flex-end',\n width: '100%',\n },\n containerLeft: {\n justifyContent: 'flex-start',\n },\n containerRight: {\n flexDirection: 'row-reverse',\n justifyContent: 'flex-end',\n },\n bubble: {\n backgroundColor: '#f3e8ff',\n borderRadius: 16,\n paddingVertical: 16,\n paddingHorizontal: 20,\n minWidth: 160,\n maxWidth: 320,\n shadowColor: '#000',\n shadowOffset: { width: 0, height: 1 },\n shadowOpacity: 0.08,\n shadowRadius: 4,\n elevation: 2,\n marginBottom: 2,\n },\n bubbleLeft: {\n marginLeft: 0,\n marginRight: 32,\n },\n bubbleRight: {\n marginRight: 0,\n marginLeft: 32,\n },\n amount: {\n fontSize: 26,\n fontWeight: 'bold',\n color: '#18181b',\n marginBottom: 8,\n },\n secureRow: {\n flexDirection: 'row',\n alignItems: 'center',\n marginBottom: 4,\n },\n secureText: {\n fontSize: 16,\n color: '#18181b',\n fontWeight: '500',\n },\n note: {\n fontSize: 14,\n color: '#6b7280',\n marginTop: 2,\n marginBottom: 2,\n },\n time: {\n fontSize: 12,\n color: '#a1a1aa',\n marginTop: 6,\n },\n});\n"],"names":["React"],"mappings":"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"}

package/lib/screens/inbox/containers/ConversationView.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React__default,{useState,useRef,useMemo,useEffect,useCallback}from'react';import {useToast,Box,Button,ButtonText,HStack,Avatar,AvatarFallbackText,AvatarImage,Text,ScrollView,Image,Spinner}from'@admin-layout/gluestack-ui-mobile';import {Platform,View,TouchableHighlight,TouchableOpacity,TextInput,KeyboardAvoidingView,Animated}from'react-native';import {useRoute,useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native';import {navigationRef}from'@common-stack/client-react';import {useSelector,shallowEqual}from'react-redux';import {uniqBy,orderBy,startCase}from'lodash-es';import*as ImagePicker from'expo-image-picker';import {MaterialCommunityIcons,Ionicons,MaterialIcons}from'@expo/vector-icons';import {Send,MessageText}from'react-native-gifted-chat';import {PostTypeEnum,FileRefType,RoomType,PreDefinedRole}from'common';import {useAddDirectChannel,useSendChannelMessage,useSendExpoNotification,MESSAGES_DOCUMENT,CHAT_MESSAGE_ADDED,useChannelMessagesQuery}from'../../../queries/inboxQueries.js';import {useUploadFilesNative}from'@messenger-box/platform-client';import {objectId}from'@messenger-box/core';import {userSelector}from'@adminide-stack/user-auth0-client';import {isToday,isYesterday,format}from'date-fns';import Message from'../components/SlackMessageContainer/SlackMessage.js';import ImageViewerModal from'../components/SlackMessageContainer/ImageViewerModal.js';import CachedImage from'../components/CachedImage/index.js';import {config}from'../config/config.js';import colors from'tailwindcss/colors';import {SubscriptionHandler}from'../components/SubscriptionHandler.js';import {useInboxMessages}from'../hooks/useInboxMessages.js';import'react-native-reanimated';import'expo-constants';import {GiftedChatInboxComponent}from'../components/GiftedChatInboxComponent.js';var __defProp = Object.defineProperty;
+import React__default,{useState,useRef,useMemo,useEffect,useCallback}from'react';import {useToast,Box,Button,ButtonText,HStack,Avatar,AvatarFallbackText,AvatarImage,Text,ScrollView,Image,VStack,Spinner}from'@admin-layout/gluestack-ui-mobile';import {Platform,View,TouchableHighlight,TouchableOpacity,TextInput,KeyboardAvoidingView,Animated}from'react-native';import {useRoute,useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native';import {navigationRef}from'@common-stack/client-react';import {useSelector,shallowEqual}from'react-redux';import {uniqBy,orderBy,startCase}from'lodash-es';import*as ImagePicker from'expo-image-picker';import {MaterialCommunityIcons,Ionicons,MaterialIcons}from'@expo/vector-icons';import {Send,MessageText}from'react-native-gifted-chat';import {PostTypeEnum,FileRefType,RoomType,PreDefinedRole}from'common';import {useAddDirectChannel,useSendChannelMessage,useSendExpoNotification,MESSAGES_DOCUMENT,CHAT_MESSAGE_ADDED,useChannelMessagesQuery}from'../../../queries/inboxQueries.js';import {useUploadFilesNative}from'@messenger-box/platform-client';import {objectId}from'@messenger-box/core';import {userSelector}from'@adminide-stack/user-auth0-client';import {isToday,isYesterday,format}from'date-fns';import Message from'../components/SlackMessageContainer/SlackMessage.js';import ImageViewerModal from'../components/SlackMessageContainer/ImageViewerModal.js';import CachedImage from'../components/CachedImage/index.js';import {config}from'../config/config.js';import colors from'tailwindcss/colors';import {SubscriptionHandler}from'../components/SubscriptionHandler.js';import {useInboxMessages}from'../hooks/useInboxMessages.js';import'react-native-reanimated';import'expo-constants';import {GiftedChatInboxComponent}from'../components/GiftedChatInboxComponent.js';import PaymentMessage from'../components/SlackMessageContainer/PaymentMessage.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -100,11 +100,13 @@ const ConversationViewComponent = (_a) => {
   var _b = _a, {
     channelId: initialChannelId,
     role,
-    isShowThreadMessage
+    isShowThreadMessage,
+    isPaymentChatUI
   } = _b, rest = __objRest(_b, [
     "channelId",
     "role",
-    "isShowThreadMessage"
+    "isShowThreadMessage",
+    "isPaymentChatUI"
   ]);
   var _a2, _b2, _c, _d;
   const {
@@ -1161,6 +1163,100 @@ const ConversationViewComponent = (_a) => {
   const renderMessage = useCallback((props) => {
     return /* @__PURE__ */ React__default.createElement(Message, __spreadProps(__spreadValues({}, props), { isShowImageViewer, setImageViewer: setImageViewerObject }));
   }, [isShowImageViewer]);
+  const renderPaymentMessageText = useCallback((props) => {
+    var _a3, _b3, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+    const {
+      currentMessage
+    } = props;
+    const lastReply = ((_b3 = (_a3 = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _a3.data) == null ? void 0 : _b3.length) > 0 ? (_d2 = (_c2 = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _c2.data) == null ? void 0 : _d2[0] : null;
+    if (!(currentMessage == null ? void 0 : currentMessage.text) || currentMessage.text.trim() === "") {
+      return null;
+    }
+    if (currentMessage.type === "PAYMENT") {
+      const paymentDetails = ((_e = currentMessage == null ? void 0 : currentMessage.propsConfiguration) == null ? void 0 : _e.payment) || {};
+      const amount = paymentDetails.amount || (currentMessage == null ? void 0 : currentMessage.amount);
+      const currency = paymentDetails.currency || (currentMessage == null ? void 0 : currentMessage.currency) || "$";
+      const status = paymentDetails.status || (currentMessage == null ? void 0 : currentMessage.status) || "Completed";
+      const paymentNote = paymentDetails.note || (currentMessage == null ? void 0 : currentMessage.text);
+      return /* @__PURE__ */ React__default.createElement(TouchableHighlight, { underlayColor: "#e0f7fa", style: {
+        width: "100%"
+      }, onPress: () => {
+        if (currentMessage == null ? void 0 : currentMessage.isShowThreadMessage)
+          navigation.navigate(config.THREAD_MESSEGE_PATH, {
+            channelId,
+            title: "Message",
+            postParentId: currentMessage == null ? void 0 : currentMessage._id,
+            isPostParentIdThread: true
+          });
+      } }, /* @__PURE__ */ React__default.createElement(Box, { style: {
+        backgroundColor: "#e0f7fa",
+        borderRadius: 16,
+        padding: 12,
+        marginVertical: 2,
+        borderWidth: 1,
+        borderColor: "#26c6da",
+        flexDirection: "row",
+        alignItems: "center"
+      } }, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "credit-card-check", size: 28, color: "#00838f", style: {
+        marginRight: 10
+      } }), /* @__PURE__ */ React__default.createElement(VStack, { style: {
+        flex: 1
+      } }, /* @__PURE__ */ React__default.createElement(Text, { style: {
+        fontWeight: "bold",
+        color: "#00838f",
+        fontSize: 16
+      } }, amount ? `${currency}${amount}` : "Payment"), /* @__PURE__ */ React__default.createElement(Text, { style: {
+        color: "#00838f",
+        fontSize: 13,
+        marginTop: 2
+      } }, status), paymentNote && /* @__PURE__ */ React__default.createElement(Text, { style: {
+        color: "#444",
+        fontSize: 13,
+        marginTop: 4
+      } }, paymentNote))));
+    } else {
+      return /* @__PURE__ */ React__default.createElement(TouchableHighlight, { underlayColor: "#c0c0c0", style: {
+        width: "100%"
+      }, onPress: () => {
+        if (currentMessage == null ? void 0 : currentMessage.isShowThreadMessage)
+          navigation.navigate(config.THREAD_MESSEGE_PATH, {
+            channelId,
+            title: "Message",
+            postParentId: currentMessage == null ? void 0 : currentMessage._id,
+            isPostParentIdThread: true
+          });
+      } }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
+        left: {
+          marginLeft: 5
+        }
+      } })), ((_g = (_f = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _f.data) == null ? void 0 : _g.length) > 0 && /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "px-1 items-center" }, /* @__PURE__ */ React__default.createElement(HStack, null, (_l = (_k = (_j = (_i = (_h = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _h.data) == null ? void 0 : _i.filter((v, i, a) => a.findIndex((t) => {
+        var _a4, _b4;
+        return ((_a4 = t == null ? void 0 : t.author) == null ? void 0 : _a4.id) === ((_b4 = v == null ? void 0 : v.author) == null ? void 0 : _b4.id);
+      }) === i)) == null ? void 0 : _j.slice(0, 2)) == null ? void 0 : _k.reverse()) == null ? void 0 : _l.map((p, i) => {
+        var _a4, _b4, _c3;
+        return /* @__PURE__ */ React__default.createElement(Avatar, { key: "conversation-replies-key-" + i, className: "bg-transparent", size: "sm" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_b4 = (_a4 = p == null ? void 0 : p.author) == null ? void 0 : _a4.username) == null ? void 0 : _b4.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "user image", style: {
+          borderRadius: 6,
+          borderWidth: 2,
+          borderColor: "#fff"
+        }, source: {
+          uri: (_c3 = p == null ? void 0 : p.author) == null ? void 0 : _c3.picture
+        } }));
+      })), /* @__PURE__ */ React__default.createElement(Text, { style: {
+        fontSize: 12
+      }, className: "font-bold color-blue-800" }, (_m = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _m.totalCount, " ", ((_n = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _n.totalCount) == 1 ? "reply" : "replies"), /* @__PURE__ */ React__default.createElement(Text, { style: {
+        fontSize: 12
+      }, className: "font-bold color-gray-500" }, lastReply ? createdAtText(lastReply == null ? void 0 : lastReply.createdAt) : ""))));
+    }
+  }, [navigation, channelId, role]);
+  const renderPaymentMessage = useCallback((props) => {
+    const {
+      currentMessage
+    } = props;
+    if ((currentMessage == null ? void 0 : currentMessage.type) === "PAYMENT") {
+      return /* @__PURE__ */ React__default.createElement(PaymentMessage, __spreadProps(__spreadValues({}, props), { navigation, channelId, config }));
+    }
+    return /* @__PURE__ */ React__default.createElement(Message, __spreadProps(__spreadValues({}, props), { isShowImageViewer, setImageViewer: setImageViewerObject }));
+  }, [isShowImageViewer, channelId, navigation]);
   let onScroll = false;
   const onMomentumScrollBegin = async ({
     nativeEvent
@@ -1333,8 +1429,8 @@ const ConversationViewComponent = (_a) => {
         _id: (auth == null ? void 0 : auth.id) || ""
       },
       renderSend,
-      renderMessageText,
-      renderMessage,
+      renderMessageText: isPaymentChatUI ? renderPaymentMessageText : renderMessageText,
+      renderMessage: isPaymentChatUI ? renderPaymentMessage : renderMessage,
       renderChatFooter,
       renderLoadEarlier,
       loadEarlier: totalCount > channelMessages.length,
@@ -1345,5 +1441,5 @@ const ConversationViewComponent = (_a) => {
   )));
 };
 const ConversationView = React__default.memo(ConversationViewComponent, (prevProps, nextProps) => {
-  return prevProps.channelId === nextProps.channelId && prevProps.role === nextProps.role && prevProps.isShowThreadMessage === nextProps.isShowThreadMessage;
+  return prevProps.channelId === nextProps.channelId && prevProps.role === nextProps.role && prevProps.isShowThreadMessage === nextProps.isShowThreadMessage && prevProps.isPaymentChatUI === nextProps.isPaymentChatUI;
 });export{ConversationView};//# sourceMappingURL=ConversationView.js.map