@socialgest/rn-widget 0.0.7 → 0.0.8

package/src/assets/languaje.ts

@@ -3,8 +3,11 @@
 export const english: { [key: string]: string } = {
   conversations_label: 'Start a new conversation',
   label_time: 'We usually respond in ',
-  time_answer: 'A few minutes',
+  time_answer: 'Few minutes',
   see_all_link: 'View all chats',
+  expand_chat: 'Expand chat',
+  close_chat: 'Close chat',
+  close_msj_welcome: 'Close',
   new_chat_button: 'Star new chat',
   main_init_chat_label: 'Write us a message',
   footer_label: 'Powered by Tikket',
@@ -20,8 +23,9 @@ export const english: { [key: string]: string } = {
   close_paragraph_link: 'here',
   no_form_sent_message: 'Fill out the form to continue',
   option: 'Select an option',
-  help_center_label: 'Find answer',
-  help_center_search: 'Search our help center',
+  help_center_label2: "Find answers",
+  help_center_label: "Find answers to your questions",
+  help_center_search: "Search our help center",
   other_channels: 'Contact us through any of these other channels',
   time_ago: 'a few seconds ago',
   minute: 'minute',
@@ -31,7 +35,8 @@ export const english: { [key: string]: string } = {
   hours: 'hours',
   days: 'day',
   day: 'day',
-  not_articles: 'Por los momentos no hay contenido para mostrar',
+  not_articles: 'There is currently no content to display',
+  not_valid_text: 'Character not allowed',
   reconnect: 'Reconnect',
   not_conection: 'Connection lost with the server',
   operador: 'Operator',
@@ -43,18 +48,26 @@ export const english: { [key: string]: string } = {
   retry_message: 'Retry',
   cancel: 'Cancel',
   error_send_message: 'This message could not be sent. Please try again',
-  operator: 'Operator',
+  view_home: 'Home',
+  view_message: 'Messages',
+  view_help: 'Help',
+  title_messages: 'Messages',
+  customer_block: 'At this time, it is not possible to communicate through this channel.',
+  not_list_converstions: 'There are no conversations for this contact',
 };
 
 export const spanish: { [key: string]: string } = {
   conversations_label: 'Iniciar una nueva conversación',
   label_time: 'Solemos responder habitualmente en',
-  time_answer: 'Unos minutos',
+  time_answer: 'Pocos minutos',
+  expand_chat: 'Expandir chat',
+  close_chat: 'Cerrar chat',
+  close_msj_welcome: 'Cerrar',
   see_all_link: 'Ver todas las conversaciones',
-  new_chat_button: 'Iniciar nueva conversacion',
+  new_chat_button: 'Iniciar nueva conversación',
   main_init_chat_label: 'Escríbenos un mensaje',
   footer_label: 'Powered by Tikket',
-  chat_placeholder: 'Escribe un mensaje',
+  chat_placeholder: 'Escríbenos un mensaje',
   form_policy_label: 'Al proceder aceptas nuestra',
   form_policy_link: 'Política de privacidad',
   form_policy_button: 'Empezar',
@@ -66,8 +79,9 @@ export const spanish: { [key: string]: string } = {
   close_paragraph_link: 'click aquí',
   no_form_sent_message: 'Llene el formulario para poder continuar',
   option: 'Seleccione una opción',
-  help_center_label: 'Encuentra respuesta',
-  help_center_search: 'Busca en nuestro centro de ayuda',
+  help_center_label2: 'Encuentra respuesta',
+  help_center_label: "Encuentra respuesta a tus dudas",
+  help_center_search: "Busca en nuestro centro de ayuda",
   other_channels: 'Comunícate con nosotros por alguno de estos otros canales',
   time_ago: 'hace unos segundos',
   minute: 'minuto',
@@ -78,6 +92,7 @@ export const spanish: { [key: string]: string } = {
   days: 'días',
   day: 'día',
   not_articles: 'Por los momentos no hay contenido para mostrar',
+  not_valid_text: 'Carácter no permitido',
   reconnect: 'Reconectar',
   not_conection: 'Conexión perdida con el servidor',
   operador: 'Operador',
@@ -88,15 +103,22 @@ export const spanish: { [key: string]: string } = {
   attached_file: 'archivo adjunto',
   retry_message: 'Reintentar',
   cancel: 'Cancelar',
-  error_send_message:
-    'Este mensaje no pudo ser enviado. Por favor, reintente de nuevo',
-  operator: 'Operador',
+  error_send_message: 'Este mensaje no pudo ser enviado. Por favor, reintente de nuevo',
+  view_home: 'Inicio',
+  view_message: 'Mensajes',
+  view_help: 'Ayuda',
+  title_messages: 'Mensajes',
+  customer_block: 'En este momento, no es posible comunicarse a través de este canal.',
+  not_list_converstions: 'No existen conversaciones para este contacto',
 };
 
 export const portuguese: { [key: string]: string } = {
   conversations_label: 'Iniciar uma nova conversa',
   label_time: 'Costumamos responder em',
-  time_answer: 'alguns minutos',
+  time_answer: 'Poucos minutos',
+  expand_chat: 'Expandir o chat',
+  close_chat: 'Fechar o chat',
+  close_msj_welcome: 'Fechar',
   see_all_link: 'Ver todas as conversas',
   new_chat_button: 'Iniciar nova conversa',
   main_init_chat_label: 'Escreva-nos uma mensagem',
@@ -113,8 +135,9 @@ export const portuguese: { [key: string]: string } = {
   close_paragraph_link: 'aqui',
   no_form_sent_message: 'Preencha o formulário para continuar',
   option: 'Selecione uma opção',
-  help_center_label: 'Encontre resposta',
-  help_center_search: 'Pesquise no nosso centro de ajuda',
+  help_center_label2: 'Encontre resposta',
+  help_center_label: "Encontrar respostas para as suas perguntas",
+  help_center_search: "Pesquise no nosso centro de ajuda",
   other_channels: 'Entre em contato conosco por algum desses outros canais',
   time_ago: 'alguns segundos atrás',
   minute: 'minutos',
@@ -125,6 +148,7 @@ export const portuguese: { [key: string]: string } = {
   days: 'dias',
   day: 'dia',
   not_articles: 'Não há atualmente nenhum conteúdo para exibir',
+  not_valid_text: 'Carácter não permitido',
   reconnect: 'Reconecte',
   not_conection: 'Conexão perdida com o servidor',
   operador: 'Operador',
@@ -135,15 +159,22 @@ export const portuguese: { [key: string]: string } = {
   attached_file: 'ficheiro anexo',
   retry_message: 'Repetir',
   cancel: 'Repetir',
-  error_send_message:
-    'Esta mensagem não pôde ser enviada. Por favor, tente novamente',
-  operator: 'Operador',
+  error_send_message: 'Esta mensagem não pôde ser enviada. Por favor, tente novamente',
+  view_home: 'Início',
+  view_message: 'Mensagens',
+  view_help: 'Ajuda',
+  title_messages: 'Mensagens',
+  customer_block: 'Neste momento, não é possível comunicar através deste canal.',
+  not_list_converstions: 'Não existem conversas para este contacto',
 };
 
 export const italian: { [key: string]: string } = {
   conversations_label: 'Inizia una nuova conversazione',
   label_time: 'Solitamente rispondiamo entro',
-  time_answer: 'alcuni minuti',
+  time_answer: 'Pochi minuti',
+  expand_chat: 'Espandi la chat',
+  close_chat: 'Chiudere la chat',
+  close_msj_welcome: 'Chiudere',
   see_all_link: 'Visualizza tutte le conversazioni',
   new_chat_button: 'Inizia una nuova conversazione',
   main_init_chat_label: 'Scrivici un messaggio',
@@ -160,8 +191,9 @@ export const italian: { [key: string]: string } = {
   close_paragraph_link: 'clic qui',
   no_form_sent_message: 'Compila il modulo per continuare',
   option: 'Seleziona una opzione',
-  help_center_label: 'Trova risposta',
-  help_center_search: 'Cerca nel nostro centro assistenza',
+  help_center_label2: 'Trova risposta',
+  help_center_label: "Trova le risposte alle tue domande",
+  help_center_search: "Cerca nel nostro centro assistenza",
   other_channels: 'Contattaci attraverso questi altri canali',
   time_ago: 'pochi secondi fa',
   minute: 'minuto',
@@ -172,6 +204,7 @@ export const italian: { [key: string]: string } = {
   days: 'giorni',
   day: 'giorno',
   not_articles: 'Al momento non ci sono contenuti da visualizzare',
+  not_valid_text: 'Carattere non consentito',
   reconnect: 'Ricollegarsi',
   not_conection: 'Connessione persa con il server',
   operador: 'Operatore',
@@ -182,18 +215,25 @@ export const italian: { [key: string]: string } = {
   attached_file: 'file allegato',
   retry_message: 'Riprova',
   cancel: 'Annullamento',
-  error_send_message:
-    'Non è stato possibile inviare questo messaggio. Riprovare',
-  operator: 'Operatore',
+  error_send_message: 'Non è stato possibile inviare questo messaggio. Riprovare',
+  view_home: 'Casa',
+  view_message: 'Messaggi',
+  view_help: 'Aiuto',
+  title_messages: 'Messaggi',
+  customer_block: 'Al momento non è possibile comunicare attraverso questo canale.',
+  not_list_converstions: 'Non ci sono conversazioni per questo contatto',
 };
 
 export const french: { [key: string]: string } = {
   conversations_label: 'Commencer une nouvelle conversation',
   label_time: 'Nous répondons habituellement en',
-  time_answer: 'quelques minutes',
+  time_answer: 'Quelques minutes',
+  expand_chat: 'Développer le chat',
+  close_chat: 'Fermer le chat',
+  close_msj_welcome: 'Fermer',
   see_all_link: 'Voir toutes les conversations',
   new_chat_button: 'Commencer une nouvelle conversation',
-  main_init_chat_label: 'Écrivez-nous un message',
+  main_init_chat_label: 'Ecrivez-nous un message',
   footer_label: 'Propulsé par Tikket',
   chat_placeholder: 'Écrire un message',
   form_policy_label: 'En poursuivant, vous acceptez notre',
@@ -207,7 +247,8 @@ export const french: { [key: string]: string } = {
   close_paragraph_link: 'ici',
   no_form_sent_message: 'Remplissez le formulaire pour continuer',
   option: 'Sélectionnez une option',
-  help_center_label: 'Trouver une réponse',
+  help_center_label2: 'Trouvez une réponse',
+  help_center_label: "Trouvez des réponses à vos questions",
   help_center_search: "Recherchez dans notre centre d'aide",
   other_channels: "Contactez-nous par l'un de ces autres canaux",
   time_ago: 'il y a quelques secondes',
@@ -219,6 +260,7 @@ export const french: { [key: string]: string } = {
   day: 'jour',
   days: 'jours',
   not_articles: "Il n'y a actuellement aucun contenu à afficher",
+  not_valid_text: 'Caractère non autorisé',
   reconnect: 'Se reconnecter',
   not_conection: 'Perte de connexion au serveur',
   operador: 'Opérateur',
@@ -230,5 +272,10 @@ export const french: { [key: string]: string } = {
   error_send_message: "Ce message n'a pas pu être envoyé.Veuillez réessayer",
   retry_message: 'Réessayer',
   cancel: 'Annuler',
-  operator: 'Opérateur',
+  view_home: 'Accueil',
+  view_message: 'Messages',
+  view_help: 'Aide',
+  title_messages: 'Messages',
+  customer_block: "Pour l'instant, il n'est pas possible de communiquer par ce canal.",
+  not_list_converstions: "Il n'y a pas de conversations pour ce contact",
 };

package/src/assets/svg/close.tsx

@@ -8,10 +8,10 @@ interface CloseIconProps {
 }
 
 const CloseIcon: FC<CloseIconProps> = ({ color, width, height }) => (
-  <Svg viewBox="0 0 320 512" width={width} height={height}>
+  <Svg viewBox="0 0 11 20" width={width} height={height}>
     <Path
       fill={color}
-      d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25-6.2 6.25-14.4 9.35-22.6 9.35s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416s-16.37-3.1-22.625-9.4c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"
+      d="M2.25 10c.65.63 1.32 1.23 2 1.87 2 2 4.027 4.03 6.08 6.09.138.134.26.285.36.45a.59.59 0 0 1-.14.76.59.59 0 0 1-.79.14 1.3 1.3 0 0 1-.34-.28L.93 10.54c-.48-.48-.49-.81 0-1.3L9.39.77c.41-.41.74-.47 1.09-.2a.65.65 0 0 1 .17.87c-.092.144-.2.278-.32.4l-7.7 7.72a2.31 2.31 0 0 1-.36.25l-.02.19Z"
     />
   </Svg>
 );

package/src/assets/svg/close2.tsx

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react';
+import Svg, { Path } from "react-native-svg"
+
+interface CloseIconProps {
+  color: string;
+  width: number;
+  height: number;
+}
+
+const CloseIcon2: FC<CloseIconProps> = ({ color, width, height }) => (
+  <Svg viewBox="0 0 352 512" width={width} height={height}>
+    <Path
+      fill={color}
+      d="m242.72 256 100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+    />
+  </Svg>
+)
+export default CloseIcon2;

package/src/assets/svg/help.tsx

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react';
+import Svg, { Path } from "react-native-svg"
+
+interface HelpIconProps {
+  color: string;
+  width: number;
+  height: number;
+}
+
+const HelpIcon: FC<HelpIconProps> = ({ color, width, height }) => (
+  <Svg viewBox="0 0 512 512" width={width} height={height}>
+    <Path
+      fill={color}
+      d="M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z"
+    />
+  </Svg>
+)
+export default HelpIcon;

package/src/assets/svg/home.tsx

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react';
+import Svg, { Path } from "react-native-svg"
+
+interface HomeIconProps {
+  color: string;
+  width: number;
+  height: number;
+}
+
+const HomeIcon: FC<HomeIconProps> = ({ color, width, height }) => (
+  <Svg viewBox="0 0 576 512" width={width} height={height}>
+    <Path
+      fill={color}
+      d="M280.37 148.26 96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47 488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"
+    />
+  </Svg>
+)
+export default HomeIcon;

package/src/assets/svg/messages.tsx

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react';
+import Svg, { Path } from "react-native-svg"
+
+interface MessagesIconProps {
+  color: string;
+  width: number;
+  height: number;
+}
+
+const MessagesIcon: FC<MessagesIconProps> = ({ color, width, height }) => (
+  <Svg viewBox="0 0 512 512" width={width} height={height}>
+    <Path
+      fill={color}
+      d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z"
+    />
+  </Svg>
+)
+export default MessagesIcon;

package/src/assets/svg/telegram.tsx

@@ -8,10 +8,10 @@ interface TelegramIconProps {
 }
 
 const TelegramIcon: FC<TelegramIconProps> = ({ color, width, height }) => (
-  <Svg viewBox="0 0 496 512" width={width} height={height}>
+  <Svg width={width} height={height} viewBox="0 0 448 512">
     <Path
       fill={color}
-      d="M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248 248-111.033 248-248S384.967 8 248 8Zm114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3-3.476 18.584-10.322 24.816-16.948 25.425-14.4 1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25 5.342-39.5 3.652-3.793 67.107-61.51 68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7 108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789 2.052-.034 6.639.474 9.61 2.885a10.452 10.452 0 0 1 3.53 6.716 43.765 43.765 0 0 1 .417 9.769Z"
+      d="m446.7 98.6-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"
     />
   </Svg>
 );

package/src/assets/svg/twitter.tsx

@@ -8,10 +8,10 @@ interface TwitterIconProps {
 }
 
 const TwitterIcon: FC<TwitterIconProps> = ({ color, width, height }) => (
-  <Svg viewBox="0 0 1024 1024" width={width} height={height}>
-    <Path
+  <Svg viewBox="0 0 512 512" width={width} height={height}>
+     <Path
       fill={color}
-      d="M928 254.3c-30.6 13.2-63.9 22.7-98.2 26.4a170.1 170.1 0 0 0 75-94 336.64 336.64 0 0 1-108.2 41.2A170.1 170.1 0 0 0 672 174c-94.5 0-170.5 76.6-170.5 170.6 0 13.2 1.6 26.4 4.2 39.1-141.5-7.4-267.7-75-351.6-178.5a169.32 169.32 0 0 0-23.2 86.1c0 59.2 30.1 111.4 76 142.1a172 172 0 0 1-77.1-21.7v2.1c0 82.9 58.6 151.6 136.7 167.4a180.6 180.6 0 0 1-44.9 5.8c-11.1 0-21.6-1.1-32.2-2.6C211 652 273.9 701.1 348.8 702.7c-58.6 45.9-132 72.9-211.7 72.9-14.3 0-27.5-.5-41.2-2.1C171.5 822 261.2 850 357.8 850 671.4 850 843 590.2 843 364.7c0-7.4 0-14.8-.5-22.2 33.2-24.3 62.3-54.4 85.5-88.2z"
+      d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9L389.2 48zm-24.8 373.8h39.1L151.1 88h-42l255.3 333.8z"
     />
   </Svg>
 );

package/src/helpers/render.helper.tsx

@@ -53,6 +53,7 @@ export function shadow({
       },
     },
     android: {
+      shadowColor: color,
       elevation,
     },
     web: {
@@ -74,13 +75,11 @@ const styles = StyleSheet.create({
   },
   input2: {
     height: 35,
-    borderRadius: 3,
-    borderWidth: 1,
-    borderColor: '#cccccc',
+    borderRadius: 5,
     width: '100%',
     backgroundColor: '#fff',
-    fontSize: 12,
-    padding: 3,
+    fontSize: 14,
+    padding: 5,
   },
   image: {
     width: 150,
@@ -89,10 +88,14 @@ const styles = StyleSheet.create({
   },
   textinput: {
     color: '#000',
-    fontSize: 11,
+    fontSize: 14,
   },
   view: {
     margin: 10,
+    backgroundColor: '#f2f2f2',
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    borderRadius: 10
   },
   border: {
     borderRadius: 5,
@@ -188,7 +191,7 @@ export const chatItemHandler = (element: any, lang: any) => {
 const renderMessages = (messages: any) => {
   return messages.map((value: any, index: any) => (
     <View key={index}>
-      <MessageItem data={value} />
+      <MessageItem data={value} key={index} index={index} length={messages.length} />
     </View>
   ));
 };

package/src/helpers/socket.helper.ts

@@ -4,21 +4,20 @@ import {
   typingOff,
 } from '../redux/actions/chat.actions';
 import { updateTikket } from '../redux/actions/chat.actions';
-import store from '../store';
 
-export const dispathSocketAction = (action: any) => {
+export const dispathSocketAction = (action: any, dispatch: any) => {
   switch (action.data.type) {
     case 'new_message':
-      store.dispatch(searchIncomingMessage(action.data.data));
+      dispatch(searchIncomingMessage(action.data.data));
       break;
     case 'typing_user':
-      store.dispatch(typing(action.data));
+      dispatch(typing(action.data));
       setTimeout(() => {
-        store.dispatch(typingOff());
+        dispatch(typingOff());
       }, 5000);
       break;
     case 'update_tikket':
-      store.dispatch(updateTikket(action.data));
+      dispatch(updateTikket(action.data));
       break;
     default:
       return;

package/src/models/app.models.ts

@@ -27,6 +27,7 @@ export interface InitProperties {
   showOperatorsInfo: null | boolean;
   showOperatorName: null | boolean;
   url_helpcenter: string;
+  layout?: string | null;
 }
 
 export interface Labels {

package/src/redux/actions/app.actions.ts

@@ -1,7 +1,6 @@
 /** @format */
 
 import { createAction } from '@reduxjs/toolkit';
-import base64 from 'react-native-base64';
 import {
   auth,
   sendinputs,
@@ -11,6 +10,7 @@ import {
 } from '../../services/app.services';
 import { getTikets } from '../actions/chatHistory.actions';
 import { setOperators } from './operators.actions';
+import { listenSocket } from '../../services/socket.service';
 import { setInitProps } from '../actions/chatBoard.actions';
 import { RenderChat, sendMessageHandler } from '../actions/chat.actions';
 import {
@@ -21,7 +21,6 @@ import {
   french,
 } from '../../assets/languaje';
 import { changeLoading } from '../actions/chatBoard.actions';
-import { initiateSocketConnection, listenSocket } from '../../services/socket.service';
 import {
   setLanguage,
   setChat,
@@ -32,6 +31,7 @@ import {
 } from '../actions/storage.actions';
 import { existProp, setSince } from '../../helpers/utils.helper';
 import type { User } from '../../models/app.models';
+import { initiateSocketConnection } from '../../services/socket';
 
 export const responseToClient = createAction<any>('RESPONSE_TO_CLIENT');
 export const createNewChat = createAction<any>('CREATE_NEW_CHAT');
@@ -253,10 +253,10 @@ export const initChat =
         let token = resp.data.token;
 
         var decodedStringUser = JSON.stringify(payload.user);
-        var encodedStringUser = base64.encode(decodedStringUser);
+        var encodedStringUser = btoa(decodedStringUser);
 
-        initiateSocketConnection(token, channel_id, encodedStringUser);
-        listenSocket(channel_id, token);
+        initiateSocketConnection(token, channel_id, encodedStringUser, dispatch);
+        listenSocket(channel_id, token, dispatch);
 
         if (init.initProps.save_chats && !message) {
           dispatch(getTikets(data));
@@ -278,11 +278,10 @@ export const reconectSocket = () => async (dispatch: any, getState: any) => {
   const { channelId, token, user } = getState().app;
 
   var decodedStringUser = JSON.stringify(user);
-  var encodedStringUser = base64.encode(decodedStringUser);
-
-  initiateSocketConnection(token, channelId, encodedStringUser);
-  listenSocket(channelId, token);
+  var encodedStringUser = btoa(decodedStringUser);
 
+  initiateSocketConnection(token, channelId, encodedStringUser, dispatch);
+  listenSocket(channelId, token, dispatch);
   dispatch(changeLoading());
 };
 

package/src/services/socket.service.ts

@@ -1,67 +1,23 @@
-import io, { Socket } from 'socket.io-client';
-import { filter, map, throttleTime } from 'rxjs/operators';
-import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
-
-import store from '../store';
 import { dispathSocketAction } from '../helpers/socket.helper';
 import { setSocketStatus } from '../redux/actions/app.actions';
-import { socket as socketUrl, stage, socketOld } from './env';
 
-let socket: Socket;
+import { socket } from './env';
+
+import { filter, map, throttleTime } from 'rxjs/operators';
+import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
 
-export const initiateSocketConnection = (
+export const listenSocket = (
+  channelId: string,
   token: string,
-  channel_id: string,
-  user: any
+  dispatch: any
 ): void => {
-  socket = io(socketUrl, {
-    transports: ['websocket'],
-    query: {
-      channel_id,
-      stage: stage,
-      chat: true,
-      user,
-      token,
-    },
-  });
-
-  socket.on('connect', () => {
-    if (socket.connected) {
-      store.dispatch(setSocketStatus('open'));
-    }
-    socket.on('login_chat_user', (data: any) => {
-      console.log('login_chat_user', data);
-    });
-
-    socket.on('new_message', (data: any) => {
-      console.log('new_message', data);
-      dispathSocketAction({ data: { type: 'new_message', data } });
-    });
-    socket.on('typing_user', (data: any) => {
-      dispathSocketAction({ data: { type: 'typing_user', data } });
-    });
-    socket.on('update_tikket', (data: any) => {
-      console.log('update_tikket', data);
-      dispathSocketAction({ data: { type: 'update_tikket', data } });
-    });
-
-    socket.on('disconnect', () => {
-      console.log('hereeee');
-
-      store.dispatch(setSocketStatus('closed'));
-      socket.disconnect();
-    });
-  });
-};
-
-export const listenSocket = (channelId: string, token: string): void => {
   let socketConnect = 0;
   const webSocketSubject: WebSocketSubject<any> = webSocket({
-    url: `${socketOld}?channel_id=${channelId}&token=${token}`,
+    url: `${socket}?channel_id=${channelId}&token=${token}`,
     openObserver: {
       next: () => {
         webSocketSubject.next({ action: 'subscribe_network' });
-        store.dispatch(setSocketStatus('open'));
+        dispatch(setSocketStatus('open'));
         setInterval(() => {
           webSocketSubject.next({ action: 'ping', data: 'ping' });
         }, 60000);
@@ -71,20 +27,23 @@ export const listenSocket = (channelId: string, token: string): void => {
       next: () => {
         if (socketConnect <= 1) {
           setTimeout(() => {
-            subscribeSocket(webSocketSubject);
+            subscribeSocket(webSocketSubject, dispatch);
           }, 5000);
         } else {
-          store.dispatch(setSocketStatus('closed'));
+          dispatch(setSocketStatus('closed'));
         }
         socketConnect++;
       },
     },
   });
 
-  subscribeSocket(webSocketSubject);
+  subscribeSocket(webSocketSubject, dispatch);
 };
 
-const subscribeSocket = (webSocketSubject: WebSocketSubject<any>): void => {
+const subscribeSocket = (
+  webSocketSubject: WebSocketSubject<any>,
+  dispatch: any
+): void => {
   webSocketSubject
     .pipe(
       filter((data: any) => {
@@ -92,7 +51,7 @@ const subscribeSocket = (webSocketSubject: WebSocketSubject<any>): void => {
       }),
       map((data: any) => {
         if (data.data.type !== 'new_message') {
-          dispathSocketAction(data);
+          dispathSocketAction(data, dispatch);
         }
         return data;
       }),
@@ -101,15 +60,7 @@ const subscribeSocket = (webSocketSubject: WebSocketSubject<any>): void => {
       }),
       throttleTime(1000)
     )
-    .subscribe(
-      (data: any) => {
-        dispathSocketAction(data);
-      },
-      (err: any) => {
-        console.log(err, 'Error en el subscribeSocket');
-      },
-      () => {
-        // sessionStorage.setItem('socket', 'closed');
-      }
-    );
+    .subscribe((data: any) => {
+      dispathSocketAction(data, dispatch);
+    });
 };