@socialgest/rn-widget 0.0.9 → 0.0.11

package/lib/typescript/src/redux/reducers/storage.reducer.d.ts

@@ -1,4 +1,6 @@
 import type { StorageState } from '../../models/storage.models';
-declare const Storage: import("@reduxjs/toolkit/dist/createReducer").ReducerWithInitialState<StorageState>;
+declare const Storage: import("redux").Reducer<StorageState> & {
+    getInitialState: () => StorageState;
+};
 export default Storage;
 //# sourceMappingURL=storage.reducer.d.ts.map

package/lib/typescript/src/redux/reducers/storage.reducer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"storage.reducer.d.ts","sourceRoot":"","sources":["../../../../../src/redux/reducers/storage.reducer.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAgBhE,QAAA,MAAM,OAAO,qFA4CX,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"storage.reducer.d.ts","sourceRoot":"","sources":["../../../../../src/redux/reducers/storage.reducer.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAgBhE,QAAA,MAAM,OAAO;;CA4CX,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/lib/typescript/src/store/index.d.ts

@@ -1,4 +1,4 @@
-declare const store: import("@reduxjs/toolkit/dist/configureStore").ToolkitStore<{
+declare const store: import("@reduxjs/toolkit").EnhancedStore<{
     app: import("../models/app.models").AppState;
     articles: import("../models/articles.models").ArticlesState;
     chat: import("../models/chat.models").ChatState;
@@ -6,17 +6,17 @@ declare const store: import("@reduxjs/toolkit/dist/configureStore").ToolkitStore
     chatBoard: import("../models/chatBoard.models").ChatBoardState;
     chatHistory: import("../models/chatHistory.models").State;
     Operators: import("../models/operators.models").OperatorsState;
-}, import("redux").AnyAction, import("@reduxjs/toolkit").MiddlewareArray<[import("redux-thunk").ThunkMiddleware<{
-    app: import("../models/app.models").AppState;
-    articles: import("../models/articles.models").ArticlesState;
-    chat: import("../models/chat.models").ChatState;
-    Storage: import("../models/storage.models").StorageState;
-    chatBoard: import("../models/chatBoard.models").ChatBoardState;
-    chatHistory: import("../models/chatHistory.models").State;
-    Operators: import("../models/operators.models").OperatorsState;
-}, import("redux").AnyAction>, import("redux-thunk").ThunkMiddleware<any, import("redux").AnyAction, undefined> & {
-    withExtraArgument<ExtraThunkArg, State = any, BasicAction extends import("redux").Action<any> = import("redux").AnyAction>(extraArgument: ExtraThunkArg): import("redux-thunk").ThunkMiddleware<State, BasicAction, ExtraThunkArg>;
-}]>>;
+}, import("redux").UnknownAction, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
+    dispatch: import("redux-thunk").ThunkDispatch<{
+        app: import("../models/app.models").AppState;
+        articles: import("../models/articles.models").ArticlesState;
+        chat: import("../models/chat.models").ChatState;
+        Storage: import("../models/storage.models").StorageState;
+        chatBoard: import("../models/chatBoard.models").ChatBoardState;
+        chatHistory: import("../models/chatHistory.models").State;
+        Operators: import("../models/operators.models").OperatorsState;
+    }, undefined, import("redux").UnknownAction>;
+}>, import("redux").StoreEnhancer]>>;
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 export default store;

package/lib/typescript/src/store/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/store/index.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;IAcT,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAC,QAAQ,CAAC;AAEhD,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/store/index.tsx"],"names":[],"mappings":"AAUA,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;oCAcT,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAC,QAAQ,CAAC;AAEhD,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@socialgest/rn-widget",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Widget Tikket Sdk",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
-  "types": "lib/typescript/typings.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "react-native": "src/index",
   "source": "src/index",
   "files": [
@@ -51,21 +51,14 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.19.3",
-    "@reduxjs/toolkit": "^1.9.5",
-    "@types/react-native-htmlview": "^0.16.3",
-    "immutable": "^5.0.0-beta.4",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@reduxjs/toolkit": "^2.9.0",
     "moment": "^2.29.4",
-    "react-native-base64": "^0.2.1",
-    "react-native-datepicker": "^1.7.2",
     "react-native-document-picker": "^9.0.1",
-    "react-native-elements": "^3.4.3",
     "react-native-htmlview": "^0.17.0",
     "react-native-hyperlink": "^0.0.22",
-    "react-native-loader": "^1.3.1",
     "react-native-modal": "^13.0.1",
-    "react-redux": "^8.1.3",
-    "redux-thunk": "^2.4.2",
+    "react-redux": "^9.2.0",
     "rn-emoji-keyboard": "^1.5.1",
     "rxjs": "^7.8.1",
     "socket.io-client": "^4.7.5"
@@ -76,10 +69,8 @@
     "@react-native/eslint-config": "^0.72.2",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",
-    "@types/react": "~17.0.21",
-    "@types/react-native": "0.70.0",
-    "@types/react-native-base64": "^0.2.2",
-    "@types/react-native-datepicker": "^1.7.5",
+    "@react-native-community/datetimepicker": "^8.6.0",
+    "@types/react": "^19.0.0",
     "commitlint": "^17.0.2",
     "del-cli": "^5.0.0",
     "eslint": "^8.4.1",
@@ -87,25 +78,19 @@
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "^28.1.1",
     "prettier": "^2.0.5",
-    "react": "18.2.0",
-    "react-native": "0.72.6",
+    "react": "19.2.0",
+    "react-native": "0.83.0",
     "react-native-builder-bob": "^0.20.0",
     "react-native-svg": "^15.0.0",
     "release-it": "^15.0.0",
     "typescript": "^5.0.2"
   },
-  "resolutions": {
-    "@types/react": "17.0.21"
-  },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
-    "react-native-datepicker": "*",
-    "react-native-svg": "^15.0.0"
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0",
+    "@react-native-community/datetimepicker": ">=7.0.0",
+    "react-native-svg": ">=15.0.0"
   },
-  "workspaces": [
-    "example"
-  ],
   "packageManager": "yarn@3.6.1",
   "engines": {
     "node": ">= 18.0.0"

package/src/components/channelsCard/ChannelsCard.tsx

@@ -26,7 +26,7 @@ interface Channel {
   id: number;
   name: string;
   color: string;
-  icon: FC<{ color: string }>;
+  icon: (props: { color: string }) => React.ReactNode;
 }
 
 interface ChannelsCardProps {}

package/src/components/chat/Chat.tsx

@@ -80,7 +80,7 @@ const Chat: React.FC<ChatProps> = ({ selectFile }) => {
   const { previews, history } = useAppSelector((state) => state.chatHistory);
   const { operators } = useAppSelector((state) => state.Operators);
 
-  var props = {
+  const props = {
     app,
     operators,
     chatHistory: history,
@@ -162,7 +162,7 @@ const Chat: React.FC<ChatProps> = ({ selectFile }) => {
   };
 
   const colorBackground = (index: number | null, i: number) => {
-    var color = '#ffffff';
+    let color = '#ffffff';
     if (index !== i) {
       color = initProps.primaryColor;
     }
@@ -170,7 +170,7 @@ const Chat: React.FC<ChatProps> = ({ selectFile }) => {
   };
 
   const colorBackgroundAndBorde = (index: number | null, i: number) => {
-    var color =
+    const color =
       initProps.textColor.toLowerCase() === '#ffffff' &&
       colorBackground(index, i) === '#ffffff'
         ? initProps.primaryColor
@@ -182,7 +182,7 @@ const Chat: React.FC<ChatProps> = ({ selectFile }) => {
   };
 
   const colorBackgroundAndBorde2 = (index: number | null, i: number) => {
-    var color =
+    const color =
       colorBackground(index, i) !== '#ffffff'
         ? initProps.primaryColor
         : !wc_hex_is_light(initProps.primaryColor) &&

package/src/helpers/CheckBox.tsx

@@ -1,5 +1,5 @@
 import React, { type FC, useState, useEffect } from 'react';
-import { CheckBox } from 'react-native-elements';
+import { TouchableOpacity, View, StyleSheet } from 'react-native';
 
 interface CheckBoxComponentProps {
   value: boolean;
@@ -21,15 +21,37 @@ const CheckBoxComponent: FC<CheckBoxComponentProps> = ({
   }, [value]);
 
   return (
-    <CheckBox
-      checked={value}
-      checkedColor={color}
+    <TouchableOpacity
       onPress={() => {
         onChange(!check);
         setCheck(!check);
       }}
-    />
+      style={[
+        styles.box,
+        { borderColor: color || '#007AFF' },
+        check && { backgroundColor: color || '#007AFF' },
+      ]}
+    >
+      {check && <View style={styles.checkmark} />}
+    </TouchableOpacity>
   );
 };
 
+const styles = StyleSheet.create({
+  box: {
+    width: 24,
+    height: 24,
+    borderWidth: 2,
+    borderRadius: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  checkmark: {
+    width: 12,
+    height: 12,
+    backgroundColor: '#fff',
+    borderRadius: 2,
+  },
+});
+
 export default CheckBoxComponent;

package/src/helpers/Date.tsx

@@ -1,42 +1,63 @@
 import React, { type FC, useState } from 'react';
-import DatePicker from 'react-native-datepicker';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Platform,
+  StyleSheet,
+} from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+
 interface DatePickerComponentProps {
   value: Date;
 }
 
 const DatePickerComponent: FC<DatePickerComponentProps> = ({ value }) => {
-  const [date, setDate] = useState(new Date());
+  const [date, setDate] = useState(value || new Date());
+  const [show, setShow] = useState(false);
+
+  const onChange = (_event: any, selectedDate?: Date) => {
+    if (Platform.OS === 'android') {
+      setShow(false);
+    }
+    if (selectedDate) {
+      setDate(selectedDate);
+    }
+  };
 
-  const onChangeTime = (event: any) => {
-    console.log(event, value);
-    setDate(event);
+  const formatDate = (d: Date) => {
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
   };
 
   return (
-    <DatePicker
-      style={{ width: 200 }}
-      date={date}
-      mode="date"
-      placeholder="select date"
-      format="YYYY-MM-DD"
-      confirmBtnText="Confirm"
-      cancelBtnText="Cancel"
-      customStyles={{
-        dateIcon: {
-          position: 'absolute',
-          left: 0,
-          top: 4,
-          marginLeft: 0,
-        },
-        dateInput: {
-          marginLeft: 36,
-        },
-      }}
-      onDateChange={(a: any) => {
-        onChangeTime(a);
-      }}
-    />
+    <View style={styles.container}>
+      <TouchableOpacity onPress={() => setShow(true)}>
+        <Text style={styles.text}>{formatDate(date)}</Text>
+      </TouchableOpacity>
+      {show && (
+        <DateTimePicker
+          value={date}
+          mode="date"
+          display="default"
+          onChange={onChange}
+        />
+      )}
+    </View>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    width: 200,
+  },
+  text: {
+    fontSize: 14,
+    color: '#000',
+    padding: 8,
+  },
+});
+
 export default DatePickerComponent;

package/src/helpers/DateTime.tsx

@@ -1,5 +1,12 @@
 import React, { type FC, useState } from 'react';
-import DatePicker from 'react-native-datepicker';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Platform,
+  StyleSheet,
+} from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
 
 interface DateTimePickerComponentProps {
   value: Date;
@@ -8,38 +15,65 @@ interface DateTimePickerComponentProps {
 const DateTimePickerComponent: FC<DateTimePickerComponentProps> = ({
   value,
 }) => {
-  const [date, setDate] = useState(new Date());
+  const [date, setDate] = useState(value || new Date());
+  const [show, setShow] = useState(false);
+  const [mode, setMode] = useState<'date' | 'time'>('date');
 
-  const onChangeTime = (event: any) => {
-    console.log(event, value);
-    setDate(event);
+  const onChange = (_event: any, selectedDate?: Date) => {
+    if (Platform.OS === 'android') {
+      setShow(false);
+    }
+    if (selectedDate) {
+      setDate(selectedDate);
+      if (Platform.OS === 'android' && mode === 'date') {
+        setMode('time');
+        setShow(true);
+      }
+    }
+  };
+
+  const formatDateTime = (d: Date) => {
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    let hours = d.getHours();
+    const minutes = String(d.getMinutes()).padStart(2, '0');
+    const ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12 || 12;
+    return `${year}-${month}-${day} ${hours}:${minutes} ${ampm}`;
+  };
+
+  const showPicker = () => {
+    setMode('date');
+    setShow(true);
   };
 
   return (
-    <DatePicker
-      style={{ width: 200 }}
-      date={date}
-      mode="datetime"
-      placeholder="select date"
-      format="YYYY-MM-DD hh:mm a"
-      confirmBtnText="Confirm"
-      cancelBtnText="Cancel"
-      customStyles={{
-        dateIcon: {
-          position: 'absolute',
-          left: 0,
-          top: 4,
-          marginLeft: 0,
-        },
-        dateInput: {
-          marginLeft: 36,
-        },
-      }}
-      onDateChange={(a: any) => {
-        onChangeTime(a);
-      }}
-    />
+    <View style={styles.container}>
+      <TouchableOpacity onPress={showPicker}>
+        <Text style={styles.text}>{formatDateTime(date)}</Text>
+      </TouchableOpacity>
+      {show && (
+        <DateTimePicker
+          value={date}
+          mode={Platform.OS === 'ios' ? 'datetime' : mode}
+          display="default"
+          onChange={onChange}
+        />
+      )}
+    </View>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    width: 200,
+  },
+  text: {
+    fontSize: 14,
+    color: '#000',
+    padding: 8,
+  },
+});
+
 export default DateTimePickerComponent;

package/src/helpers/utils.helper.ts

@@ -84,11 +84,6 @@ export const cutLongText = (text: string, lettersCuantity: number): string => {
   return `${text.split('').slice(0, lettersCuantity).join('')}...`;
 };
 
-// export const setSessionData = (channelId: string, token: string): void => {
-//   // sessionStorage.setItem("token", token);
-//   // sessionStorage.setItem("channelId", channelId);
-// };
-
 export const setSince = (chat: number | string | null = null): number => {
   if (typeof chat === 'string') {
     chat = new Date(chat).getTime();
@@ -104,8 +99,7 @@ export const getArrayOfRandomItems = (
 ): number[] => {
   let array: number[] = [];
   if (arrayItems.length <= count) {
-    // @ts-ignore
-    arrayItems.forEach((data, index) => {
+    arrayItems.forEach((_data, index) => {
       array.push(index);
     });
     return array;
@@ -122,27 +116,6 @@ export const getArrayOfRandomItems = (
   return array;
 };
 
-// export const getIcon = (file: string, arrayIcons: any[]): any[] => {
-//   return arrayIcons.filter((icon) => {
-//     return icon.path === file;
-//   });
-// };
-
-// export const getIcons = (): any[] => {
-//   const reqSvgs = require("../assets/svg");
-//   return reqSvgs.keys().map((path: any) => ({ path, file: reqSvgs(path) }));
-// };
-
-// export const getIconByName = (iconName: string): any => {
-//   const icons = getIcons();
-//   return icons.filter((icon) => icon.path === `./${iconName}.js`)[0].file;
-// };
-
-// export const getImages = (): any[] => {
-//   const reqSvgs = require.context("../assets/images", true, /\.png$/);
-//   return reqSvgs.keys().map((path) => ({ path, file: reqSvgs(path) }));
-// };
-
 export const makeObjFields = (fieldsArr: any[]): Record<string, string> => {
   const objFields: Record<string, string> = {};
   fieldsArr.forEach((field) => {
@@ -152,7 +125,7 @@ export const makeObjFields = (fieldsArr: any[]): Record<string, string> => {
 };
 
 export const isObjEmpty = (obj: object): boolean => {
-  for (var prop in obj) {
+  for (const prop in obj) {
     if (obj.hasOwnProperty(prop)) {
       return false;
     }

package/src/index.ts

@@ -23,8 +23,8 @@ export function getToken(): Promise<string> {
   return Promise.resolve(token);
 }
 
-export function init(props: any) {
-  store.dispatch(initChat(props)).catch((error: any) => {
+export function init(props: any): Promise<any> {
+  return store.dispatch(initChat(props)).catch((error: any) => {
     console.error(
       '[rn-widget] init dispatch error:',
       error instanceof Error ? error.message : error
@@ -37,7 +37,12 @@ export function openOrClosedChat(props: any) {
 }
 
 export function updateUser(props: any) {
-  store.dispatch(updateFormUser(props));
+  store.dispatch(updateFormUser(props)).catch((error: any) => {
+    console.error(
+      '[rn-widget] updateUser dispatch error:',
+      error instanceof Error ? error.message : error
+    );
+  });
 }
 
 export function setTextBox(props: any) {