@socialgest/rn-widget 0.0.1

package/src/helpers/files.helper.ts

@@ -0,0 +1,66 @@
+// import { Platform } from "react-native";
+
+export const getIconPathForFileType = (fileType: string): string => {
+  if (fileType === 'application/pdf') {
+    return './pdf.js';
+  } else if (
+    fileType ===
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+  ) {
+    return './ppt.js';
+  } else if (
+    fileType ===
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+  ) {
+    return './doc.js';
+  } else if (
+    fileType ===
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+  ) {
+    return './xls.js';
+  } else if (fileType.match('audio/*')) {
+    return './audio.js';
+  } else if (fileType.match('video/*')) {
+    return './video.js';
+  }
+  return '';
+};
+
+export const mapFiles = (
+  files: Array<{ url: string; type: string }>
+): Array<{
+  url: string;
+  fileIcon: string | undefined;
+  type: string;
+}> => {
+  const f = files
+    .filter((file: any) => {
+      if (file.url && file.type) {
+        return file;
+      }
+    })
+    .map((file) => {
+      const fileIcon = file.type.match('image/*')
+        ? file.url
+        : getIconFile(file.type);
+
+      return { url: file.url, fileIcon, type: file.type };
+    });
+  return f;
+};
+
+export const getIconFile = (fileType: string): string | undefined => {
+  const path = getIconPathForFileType(fileType);
+  return path;
+};
+
+export const showImage = (url: string): void => {
+  const data = {
+    type: 'SHOW_IMAGE',
+    payload: {
+      url: url,
+    },
+  };
+  console.log(data);
+  //   Platform.OS === "web" && window.parent.postMessage(data, "*");
+};

package/src/helpers/form.helper.ts

@@ -0,0 +1,66 @@
+import { existProp } from './utils.helper';
+
+export const validateEmail = (valor: string): boolean => {
+  const pattern =
+    /^(([^<>()[\],;:\s@]+([^<>()[\],;:\s@]+)*)|(.+))@(([^<>()[\],;:\s@]+)+[^<>()[\],;:\s@]{2,})$/i;
+
+  if (pattern.test(valor)) {
+    return true;
+  } else {
+    return false;
+  }
+};
+
+export const makeObjFields = (
+  fieldsArr: any[]
+): { [key: string]: string | boolean } => {
+  const objFields: { [key: string]: string | boolean } = {};
+  fieldsArr.map((field) => {
+    objFields[field.id] = field.type === 'boolean' ? false : '';
+    if (existProp(field, 'value')) {
+      objFields[field.id] = field.value;
+    }
+  });
+  return objFields;
+};
+
+export const setAtributes = (type: string): object => {
+  if (type === 'string') {
+    return { type: 'text' };
+  } else if (type === 'email') {
+    return { type: 'email' };
+  } else if (type === 'number') {
+    return { type: 'number' };
+  } else if (type === 'boolean') {
+    return { type: 'checkbox' };
+  }
+  return { type: 'text' };
+};
+
+export const formDataVerification = (FormChat: any, user: any): any => {
+  if (user?.photo) {
+    delete user.photo;
+  }
+
+  if (user?.id) {
+    delete user.id;
+  }
+
+  const keyProps: string[] = Object.keys(user);
+  let isAllFields: boolean = true;
+
+  FormChat.fields = FormChat.fields.map((field: any) => {
+    if (keyProps.includes(field.id)) {
+      return { ...field, value: user[field.id] };
+    } else {
+      isAllFields = false;
+      return field;
+    }
+  });
+
+  return {
+    isAllFields,
+    FormChat,
+    user,
+  };
+};

package/src/helpers/operators.helper.ts

@@ -0,0 +1,87 @@
+import { existProp, getArrayOfRandomItems } from './utils.helper';
+
+export const getOperator = (operators: any[], messages: any[]): any => {
+  const operatorMessage = messages.filter((message) => {
+    return existProp(message, 'user_id');
+  });
+
+  if (operatorMessage.length === 0) {
+    return {};
+  }
+
+  return matchOperator(operators, operatorMessage[0].user_id)[0];
+};
+
+export const matchOperator = (operators: any[], operatorId: any): any[] => {
+  var op = operators.filter((operator) => {
+    return operator.userId === operatorId;
+  });
+
+  if (op.length === 0) {
+    op = [getDefaultOperator()];
+  }
+
+  return op;
+};
+
+export const getDefaultOperator = (): any => {
+  // const icons = getIcons();
+  return {
+    imgURL: '', //icons[12].file,
+    name: 'Operador',
+    userId: null,
+    active: false,
+  };
+};
+
+export const getRandomOperators = (operators: any[]): any[] => {
+  const RandonItems = getArrayOfRandomItems(operators, operators.length);
+  let randomOperators: any[] = [];
+  RandonItems.forEach((item: any) => {
+    return randomOperators.push(operators[item]);
+  });
+  return randomOperators;
+};
+
+export const mapOperators = (
+  operators: any[],
+  complete: string | boolean
+): any[] => {
+  if (complete) {
+    return operators.map((operator) => {
+      const imgURL = operator.user.photo;
+      const name = operator.user.name;
+      return {
+        userId: operator.user_id ? operator.user_id : null,
+        imgURL,
+        name,
+        active: operator.active ? operator.active : false,
+      };
+    });
+  } else {
+    return operators
+      .filter((operator) => operator.active)
+      .map((operator) => {
+        const imgURL = operator.user.photo;
+        const name = operator.user.name;
+        return {
+          userId: operator.user_id,
+          imgURL,
+          name,
+          active: operator.active ? operator.active : false,
+        };
+      });
+  }
+};
+
+export const asingOperator = (user_id: any, operators: any[]): any => {
+  if (typeof user_id === 'undefined') {
+    return getDefaultOperator();
+  } else {
+    const { userId, imgURL, name, active } = matchOperator(
+      operators,
+      user_id
+    )[0];
+    return { userId, imgURL, name, active };
+  }
+};

package/src/helpers/render.helper.tsx

@@ -0,0 +1,307 @@
+/** @format */
+
+import React from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  View,
+  Text,
+  Platform,
+  TouchableOpacity,
+  Image,
+  Linking,
+} from 'react-native';
+import ArticleItem from '../components/articles/articleItem/ArticleItem';
+import MessageItem from '../components/chat/messageItem/MessageItem';
+import ConversationItem from '../components/conversations/conversationItem/ConversationItem';
+import ChatDate from '../components/chatDate/ChatDate';
+import { groupMessagesByDate, orderAllmessages } from './utils.helper';
+import { setAtributes } from '../helpers/form.helper';
+// import IconAudio from '../assets/svg/audio';
+import IconPdf from '../assets/svg/pdf';
+import IconPPT from '../assets/svg/ppt';
+import VideoIcon from '../assets/svg/video';
+import IconDoc from '../assets/svg/doc';
+import XlsIcon from '../assets/svg/xls';
+import IconAudio from '../assets/svg/audio';
+
+// import {CheckBoxWeb, DatePickerWeb, DateTimePickerWeb} from './inpustHelper';
+import CheckBoxComponent from './CheckBox';
+import DateTimePickerComponent from './DateTime';
+import DatePickerComponent from './Date';
+// import AudioComponent from './Audio';
+
+import store from '../store';
+import { setModalImagen } from '../redux/actions/storage.actions';
+
+import type { ShadowParams } from '../components/helpCenter/HelpCenterCard';
+export function shadow({
+  color,
+  radius,
+  offsetWidth,
+  offsetHeight,
+  elevation,
+}: ShadowParams) {
+  return Platform.select({
+    ios: {
+      shadowColor: color,
+      shadowOpacity: 0.2,
+      shadowRadius: radius,
+      shadowOffset: {
+        width: offsetWidth,
+        height: 1,
+      },
+    },
+    android: {
+      elevation,
+    },
+    web: {
+      boxShadow: `${offsetWidth}px ${offsetHeight}px ${radius}px rgba(0,0,0,0.12)`,
+    },
+  });
+}
+
+const styles = StyleSheet.create({
+  input: {
+    width: 'auto',
+    margin: 0,
+  },
+  divP: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 10,
+    justifyContent: 'space-between',
+  },
+  input2: {
+    height: 35,
+    borderRadius: 3,
+    borderWidth: 1,
+    borderColor: '#cccccc',
+    width: '100%',
+    backgroundColor: '#fff',
+    fontSize: 12,
+    padding: 3,
+  },
+  image: {
+    width: 150,
+    height: 150,
+    borderRadius: 5,
+  },
+  textinput: {
+    color: '#000',
+    fontSize: 11,
+  },
+  view: {
+    margin: 10,
+  },
+  border: {
+    borderRadius: 5,
+  },
+  file: {
+    width: 50,
+    height: 50,
+    borderRadius: 5,
+  },
+});
+
+export const conversationsItemHandler = (element: any) => {
+  let converstationItem: any[] = [];
+
+  element.forEach((data: any) => {
+    converstationItem.push(
+      <ConversationItem key={data.tikketId} data={data} />
+    );
+  });
+  return converstationItem;
+};
+
+export const articlesItemHandler = (element: any) => {
+  let articleItem: any[] = [];
+  element.forEach((data: any) => {
+    articleItem.push(<ArticleItem key={data.id} data={data} />);
+  });
+  return articleItem;
+};
+
+export const docItemsHandler = (element: any) => {
+  let articleItem: any[] = [];
+  element.forEach((data: any, index: any) => {
+    articleItem.push(chooseImage(data, index));
+  });
+  return articleItem;
+};
+
+const chooseImage = (data: any, index: any) => {
+  if (data.type.match('image/*')) {
+    return (
+      <TouchableOpacity
+        key={index}
+        onPress={() => {
+          store.dispatch(setModalImagen({ show: true, file: data.url }));
+        }}
+      >
+        <Image style={styles.image} source={{ uri: data.url }} />
+      </TouchableOpacity>
+    );
+  } else {
+    return (
+      <TouchableOpacity
+        key={index}
+        style={styles.border}
+        onPress={async () => {
+          const supported = await Linking.canOpenURL(data.url);
+          if (supported) {
+            await Linking.openURL(data.url);
+          }
+        }}
+      >
+        {data.type.includes('audio') ? (
+          <IconAudio width={50} height={50} />
+        ) : data.type.includes('pdf') ? (
+          <IconPdf width={50} height={50} />
+        ) : data.type.includes('ppt') ? (
+          <IconPPT width={50} height={50} />
+        ) : data.type.includes('video') ? (
+          <VideoIcon width={50} height={50} />
+        ) : data.type.includes('doc') ? (
+          <IconDoc width={50} height={50} />
+        ) : (
+          data.type.includes('xls') && <XlsIcon width={50} height={50} />
+        )}
+      </TouchableOpacity>
+    );
+  }
+};
+
+export const chatItemHandler = (element: any, lang: any) => {
+  let messages = groupMessagesByDate(element);
+  messages = orderAllmessages(messages);
+
+  return messages.map((value, index) => (
+    <View key={index} style={{ width: '100%' }}>
+      <ChatDate date={value.date} lang={lang} />
+      {renderMessages(value.messages)}
+    </View>
+  ));
+};
+
+const renderMessages = (messages: any) => {
+  return messages.map((value: any, index: any) => (
+    <View key={index}>
+      <MessageItem data={value} />
+    </View>
+  ));
+};
+
+export const makeInput = (
+  formChat: any,
+  initFormHandler: any,
+  setInitForm: any,
+  initForm: any
+) => {
+  let inputs: any[] = [];
+
+  formChat.fields.forEach((field: any, index: any) => {
+    const type = field.type;
+    const atr = setAtributes(type);
+
+    if (type === 'string' || type === 'email') {
+      inputs.push(
+        <View style={styles.view} key={index}>
+          <Text style={styles.textinput}>
+            {field.name}
+            {field.required ? ' *' : ''}
+          </Text>
+          <TextInput
+            style={styles.input2}
+            defaultValue={initForm[field.id]}
+            value={formChat.fields[index].value}
+            keyboardType={type === 'email' ? 'email-address' : 'default'}
+            onChange={(e) => {
+              initFormHandler(e, setInitForm, initForm, undefined, field.id);
+            }}
+            {...atr}
+          />
+        </View>
+      );
+    } else if (type === 'number') {
+      inputs.push(
+        <View style={styles.view} key={index}>
+          <Text style={styles.textinput}>
+            {field.name}
+            {field.required ? ' *' : ''}
+          </Text>
+          <TextInput
+            style={styles.input2}
+            defaultValue={initForm[field.id]}
+            value={formChat.fields[index].value}
+            keyboardType={'numeric'}
+            onChange={(e) => {
+              initFormHandler(e, setInitForm, initForm, undefined, field.id);
+            }}
+            {...atr}
+          />
+        </View>
+      );
+    } else if (type === 'boolean') {
+      inputs.push(
+        <View key={index} style={styles.divP}>
+          <Text style={styles.textinput}>
+            {field.name}
+            {field.required ? ' *' : ''}
+          </Text>
+
+          <CheckBoxComponent
+            value={initForm[field.id]}
+            onChange={(e) => {
+              // if (Platform.OS === 'web') {
+              // if (e.target.value === 'on') {
+              //     e.target.value = true;
+              // } else {
+              //     e.target.value = e.target.value === 'false';
+              // }
+              // }
+              console.log(e);
+              // initFormHandler(e, setInitForm, initForm, undefined, field.id);
+            }}
+            color={'#fff'}
+          />
+        </View>
+      );
+    } else if (type === 'date') {
+      inputs.push(
+        <View key={index} style={styles.divP}>
+          <Text style={styles.textinput}>
+            {field.name}
+            {field.required ? ' *' : ''}
+          </Text>
+          {/* <TextInput
+            type="date"
+            name={field.id}
+            onChange={e => {
+              initFormHandler(e, setInitForm, initForm, field.type, field.id);
+            }}
+          /> */}
+          <DatePickerComponent value={field.value} />
+        </View>
+      );
+    } else if (type === 'datetime') {
+      inputs.push(
+        <View key={index} style={styles.divP}>
+          <Text style={styles.textinput}>
+            {field.name}
+            {field.required ? ' *' : ''}
+          </Text>
+
+          <DateTimePickerComponent
+            value={field.value}
+            // onChange={(e) => {
+            //   // initFormHandler(e, setInitForm, initForm, field.type, field.id);
+            // }}
+          />
+        </View>
+      );
+    }
+  });
+  return inputs;
+};

package/src/helpers/socket.helper.ts

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

package/src/helpers/timeAgo.helper.tsx

@@ -0,0 +1,19 @@
+import React, { type FC, useEffect } from 'react';
+import { Text } from 'react-native';
+import moment from 'moment';
+
+interface TimeAgoProps {
+  time: any;
+  style?: object;
+}
+
+const TimeAgo: FC<TimeAgoProps> = (props) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {}, 1000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return <Text style={props.style}>{moment(props.time).fromNow(false)}</Text>;
+};
+
+export default TimeAgo;