@developer_tribe/react-native-comnyx 0.1.1 → 0.2.1

package/lib/module/components/MessageInput.js

@@ -0,0 +1,115 @@
+"use strict";
+
+import { StyleSheet, TextInput, View, Image, TouchableOpacity } from 'react-native';
+import { useAppStore } from "../store.js";
+import { useState } from 'react';
+import { sendCustomerMessage } from "../api/index.js";
+import { useThemeColors } from "../hooks/useThemeColors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sendDark = require('../assets/send.png');
+export function MessageInput({
+  scrollToBottom
+}) {
+  const [value, setValue] = useState('');
+  const customer = useAppStore(s => s.customer);
+  const themeColors = useThemeColors();
+  const sendMessage = () => {
+    if (value.trim()) {
+      const date = new Date();
+      useAppStore.getState().setData(data => [{
+        id: null,
+        approved: false,
+        content: value,
+        created_at: date,
+        user: {
+          name: customer.name,
+          profile_photo_url: null
+        }
+      }, ...(data ?? [])]);
+      sendCustomerMessage(customer.external_id, value, {
+        fake: useAppStore.getState().fake
+      }).then(res => {
+        const data = useAppStore.getState().data;
+        if (data) {
+          const itemIndex = data.findIndex(item => item.id === null && new Date(item.created_at).getTime() === date.getTime());
+          if (itemIndex === -1) {
+            //TODO:??
+          } else {
+            const alteredData = [...data];
+            alteredData[itemIndex] = {
+              id: res.message.id,
+              content: res.message.content,
+              user: res.message.user ?? alteredData[itemIndex]?.user,
+              created_at: new Date(res.message.created_at),
+              approved: true
+            };
+            useAppStore.setState({
+              data: alteredData
+            });
+            scrollToBottom(false);
+          }
+        } else {
+          //TODO: ??
+        }
+      });
+      setValue('');
+    }
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, {
+      backgroundColor: themeColors.background
+    }],
+    children: [/*#__PURE__*/_jsx(TextInput, {
+      value: value,
+      onChangeText: newValue => setValue(newValue),
+      onSubmitEditing: sendMessage,
+      returnKeyType: "send",
+      style: [styles.textInput, {
+        backgroundColor: themeColors.background,
+        color: themeColors.text,
+        borderColor: themeColors.border
+      }],
+      placeholder: "Type a message...",
+      placeholderTextColor: themeColors.text + '80'
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      style: [styles.sendButton, {
+        backgroundColor: themeColors.primary
+      }],
+      onPress: sendMessage,
+      children: /*#__PURE__*/_jsx(Image, {
+        style: [styles.sendIcon, {
+          tintColor: themeColors.text
+        }],
+        source: sendDark
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    padding: 10,
+    borderTopWidth: 1
+  },
+  textInput: {
+    flex: 1,
+    borderWidth: 1,
+    borderRadius: 20,
+    paddingHorizontal: 15,
+    paddingVertical: 8,
+    marginRight: 10,
+    fontSize: 16
+  },
+  sendButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  sendIcon: {
+    width: 20,
+    height: 20
+  }
+});
+//# sourceMappingURL=MessageInput.js.map

package/lib/module/components/MessageInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","TextInput","View","Image","TouchableOpacity","useAppStore","useState","sendCustomerMessage","useThemeColors","jsx","_jsx","jsxs","_jsxs","sendDark","require","MessageInput","scrollToBottom","value","setValue","customer","s","themeColors","sendMessage","trim","date","Date","getState","setData","data","id","approved","content","created_at","user","name","profile_photo_url","external_id","fake","then","res","itemIndex","findIndex","item","getTime","alteredData","message","setState","style","styles","container","backgroundColor","background","children","onChangeText","newValue","onSubmitEditing","returnKeyType","textInput","color","text","borderColor","border","placeholder","placeholderTextColor","sendButton","primary","onPress","sendIcon","tintColor","source","create","flexDirection","padding","borderTopWidth","flex","borderWidth","borderRadius","paddingHorizontal","paddingVertical","marginRight","fontSize","width","height","justifyContent","alignItems"],"sourceRoot":"../../../src","sources":["components/MessageInput.tsx"],"mappings":";;AAAA,SACEA,UAAU,EACVC,SAAS,EACTC,IAAI,EACJC,KAAK,EACLC,gBAAgB,QACX,cAAc;AACrB,SAASC,WAAW,QAAQ,aAAU;AACtC,SAASC,QAAQ,QAAQ,OAAO;AAChC,SAASC,mBAAmB,QAAQ,iBAAQ;AAC5C,SAASC,cAAc,QAAQ,4BAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEzD,MAAMC,QAAQ,GAAGC,OAAO,CAAC,oBAAoB,CAAC;AAE9C,OAAO,SAASC,YAAYA,CAAC;EAC3BC;AAGF,CAAC,EAAE;EACD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGZ,QAAQ,CAAC,EAAE,CAAC;EACtC,MAAMa,QAAQ,GAAGd,WAAW,CAAEe,CAAC,IAAKA,CAAC,CAACD,QAAS,CAAC;EAChD,MAAME,WAAW,GAAGb,cAAc,CAAC,CAAC;EAEpC,MAAMc,WAAW,GAAGA,CAAA,KAAM;IACxB,IAAIL,KAAK,CAACM,IAAI,CAAC,CAAC,EAAE;MAChB,MAAMC,IAAI,GAAG,IAAIC,IAAI,CAAC,CAAC;MACvBpB,WAAW,CAACqB,QAAQ,CAAC,CAAC,CAACC,OAAO,CAAEC,IAAI,IAAK,CACvC;QACEC,EAAE,EAAE,IAAI;QACRC,QAAQ,EAAE,KAAK;QACfC,OAAO,EAAEd,KAAK;QACde,UAAU,EAAER,IAAI;QAChBS,IAAI,EAAE;UACJC,IAAI,EAAEf,QAAQ,CAACe,IAAI;UACnBC,iBAAiB,EAAE;QACrB;MACF,CAAC,EACD,IAAIP,IAAI,IAAI,EAAE,CAAC,CAChB,CAAC;MACFrB,mBAAmB,CAACY,QAAQ,CAACiB,WAAW,EAAEnB,KAAK,EAAE;QAC/CoB,IAAI,EAAEhC,WAAW,CAACqB,QAAQ,CAAC,CAAC,CAACW;MAC/B,CAAC,CAAC,CAACC,IAAI,CAAEC,GAAG,IAAK;QACf,MAAMX,IAAI,GAAGvB,WAAW,CAACqB,QAAQ,CAAC,CAAC,CAACE,IAAI;QACxC,IAAIA,IAAI,EAAE;UACR,MAAMY,SAAS,GAAGZ,IAAI,CAACa,SAAS,CAC7BC,IAAI,IACHA,IAAI,CAACb,EAAE,KAAK,IAAI,IAChB,IAAIJ,IAAI,CAACiB,IAAI,CAACV,UAAU,CAAC,CAACW,OAAO,CAAC,CAAC,KAAKnB,IAAI,CAACmB,OAAO,CAAC,CACzD,CAAC;UACD,IAAIH,SAAS,KAAK,CAAC,CAAC,EAAE;YACpB;UAAA,CACD,MAAM;YACL,MAAMI,WAAW,GAAG,CAAC,GAAGhB,IAAI,CAAC;YAC7BgB,WAAW,CAACJ,SAAS,CAAC,GAAG;cACvBX,EAAE,EAAEU,GAAG,CAACM,OAAO,CAAChB,EAAE;cAClBE,OAAO,EAAEQ,GAAG,CAACM,OAAO,CAACd,OAAO;cAC5BE,IAAI,EAAEM,GAAG,CAACM,OAAO,CAACZ,IAAI,IAAIW,WAAW,CAACJ,SAAS,CAAC,EAAEP,IAAI;cACtDD,UAAU,EAAE,IAAIP,IAAI,CAACc,GAAG,CAACM,OAAO,CAACb,UAAU,CAAC;cAC5CF,QAAQ,EAAE;YACZ,CAAC;YACDzB,WAAW,CAACyC,QAAQ,CAAC;cACnBlB,IAAI,EAAEgB;YACR,CAAC,CAAC;YACF5B,cAAc,CAAC,KAAK,CAAC;UACvB;QACF,CAAC,MAAM;UACL;QAAA;MAEJ,CAAC,CAAC;MACFE,QAAQ,CAAC,EAAE,CAAC;IACd;EACF,CAAC;EAED,oBACEN,KAAA,CAACV,IAAI;IACH6C,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAE;MAAEC,eAAe,EAAE7B,WAAW,CAAC8B;IAAW,CAAC,CAAE;IAAAC,QAAA,gBAEvE1C,IAAA,CAACT,SAAS;MACRgB,KAAK,EAAEA,KAAM;MACboC,YAAY,EAAGC,QAAQ,IAAKpC,QAAQ,CAACoC,QAAQ,CAAE;MAC/CC,eAAe,EAAEjC,WAAY;MAC7BkC,aAAa,EAAC,MAAM;MACpBT,KAAK,EAAE,CACLC,MAAM,CAACS,SAAS,EAChB;QACEP,eAAe,EAAE7B,WAAW,CAAC8B,UAAU;QACvCO,KAAK,EAAErC,WAAW,CAACsC,IAAI;QACvBC,WAAW,EAAEvC,WAAW,CAACwC;MAC3B,CAAC,CACD;MACFC,WAAW,EAAC,mBAAmB;MAC/BC,oBAAoB,EAAE1C,WAAW,CAACsC,IAAI,GAAG;IAAK,CAC/C,CAAC,eACFjD,IAAA,CAACN,gBAAgB;MACf2C,KAAK,EAAE,CAACC,MAAM,CAACgB,UAAU,EAAE;QAAEd,eAAe,EAAE7B,WAAW,CAAC4C;MAAQ,CAAC,CAAE;MACrEC,OAAO,EAAE5C,WAAY;MAAA8B,QAAA,eAErB1C,IAAA,CAACP,KAAK;QACJ4C,KAAK,EAAE,CAACC,MAAM,CAACmB,QAAQ,EAAE;UAAEC,SAAS,EAAE/C,WAAW,CAACsC;QAAK,CAAC,CAAE;QAC1DU,MAAM,EAAExD;MAAS,CAClB;IAAC,CACc,CAAC;EAAA,CACf,CAAC;AAEX;AAEA,MAAMmC,MAAM,GAAGhD,UAAU,CAACsE,MAAM,CAAC;EAC/BrB,SAAS,EAAE;IACTsB,aAAa,EAAE,KAAK;IACpBC,OAAO,EAAE,EAAE;IACXC,cAAc,EAAE;EAClB,CAAC;EACDhB,SAAS,EAAE;IACTiB,IAAI,EAAE,CAAC;IACPC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,EAAE;IAChBC,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,CAAC;IAClBC,WAAW,EAAE,EAAE;IACfC,QAAQ,EAAE;EACZ,CAAC;EACDhB,UAAU,EAAE;IACViB,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVN,YAAY,EAAE,EAAE;IAChBO,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd,CAAC;EACDjB,QAAQ,EAAE;IACRc,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/MessageItem.js

@@ -0,0 +1,114 @@
+"use strict";
+
+import { View, Image } from 'react-native';
+import { AppText } from "./AppText.js";
+import { StyleSheet } from 'react-native';
+import { useThemeColors } from "../hooks/useThemeColors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const clockIcon = require('../assets/clock.png');
+const doubleCheckIcon = require('../assets/double-check.png');
+export function MessageItem({
+  item
+}) {
+  const themeColors = useThemeColors();
+  const isDeviceOwner = !!item.user;
+  const formattedDate = new Date(item.created_at).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.messageItem, isDeviceOwner ? styles.rightMessage : styles.leftMessage],
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.messageBubble, isDeviceOwner ? [styles.rightBubble, {
+        backgroundColor: themeColors.primary
+      }] : [styles.leftBubble, {
+        backgroundColor: themeColors.border
+      }]],
+      children: [/*#__PURE__*/_jsx(AppText, {
+        style: [styles.messageText, isDeviceOwner ? styles.rightMessageText : [styles.leftMessageText, {
+          color: themeColors.text
+        }]],
+        children: item.content
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.footer,
+        children: [/*#__PURE__*/_jsx(AppText, {
+          style: [styles.timestamp, isDeviceOwner ? styles.rightTimestamp : [styles.leftTimestamp, {
+            color: themeColors.text
+          }]],
+          children: formattedDate
+        }), !item.approved ? /*#__PURE__*/_jsx(Image, {
+          source: clockIcon,
+          style: [styles.clockIcon, isDeviceOwner ? styles.rightClockIcon : [styles.leftClockIcon, {
+            tintColor: themeColors.text
+          }]]
+        }) : /*#__PURE__*/_jsx(Image, {
+          source: doubleCheckIcon,
+          style: [styles.clockIcon, isDeviceOwner ? styles.rightClockIcon : [styles.leftClockIcon, {
+            tintColor: themeColors.text
+          }]]
+        })]
+      })]
+    })
+  }, item.id);
+}
+const styles = StyleSheet.create({
+  messageItem: {
+    marginVertical: 5,
+    maxWidth: '80%',
+    minHeight: 60,
+    minWidth: 100
+  },
+  leftMessage: {
+    alignSelf: 'flex-start'
+  },
+  rightMessage: {
+    alignSelf: 'flex-end'
+  },
+  messageBubble: {
+    padding: 12,
+    borderRadius: 20
+  },
+  leftBubble: {
+    borderTopLeftRadius: 4
+  },
+  rightBubble: {
+    borderTopRightRadius: 4
+  },
+  messageText: {
+    fontSize: 16
+  },
+  leftMessageText: {
+    color: '#000000'
+  },
+  rightMessageText: {
+    color: '#FFFFFF'
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 4
+  },
+  timestamp: {
+    fontSize: 12,
+    opacity: 0.7
+  },
+  leftTimestamp: {
+    color: '#666666'
+  },
+  rightTimestamp: {
+    color: '#FFFFFF'
+  },
+  clockIcon: {
+    width: 12,
+    height: 12,
+    marginLeft: 4
+  },
+  leftClockIcon: {
+    tintColor: '#666666'
+  },
+  rightClockIcon: {
+    tintColor: '#FFFFFF'
+  }
+});
+//# sourceMappingURL=MessageItem.js.map

package/lib/module/components/MessageItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Image","AppText","StyleSheet","useThemeColors","jsx","_jsx","jsxs","_jsxs","clockIcon","require","doubleCheckIcon","MessageItem","item","themeColors","isDeviceOwner","user","formattedDate","Date","created_at","toLocaleTimeString","hour","minute","style","styles","messageItem","rightMessage","leftMessage","children","messageBubble","rightBubble","backgroundColor","primary","leftBubble","border","messageText","rightMessageText","leftMessageText","color","text","content","footer","timestamp","rightTimestamp","leftTimestamp","approved","source","rightClockIcon","leftClockIcon","tintColor","id","create","marginVertical","maxWidth","minHeight","minWidth","alignSelf","padding","borderRadius","borderTopLeftRadius","borderTopRightRadius","fontSize","flexDirection","justifyContent","alignItems","marginTop","opacity","width","height","marginLeft"],"sourceRoot":"../../../src","sources":["components/MessageItem.tsx"],"mappings":"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","ignoreList":[]}