rn-erxes-sdk 0.1.22 → 0.1.24

package/src/utils/messages.ts

@@ -0,0 +1,105 @@
+// Message list helpers ported from the web messenger SDK
+// (frontline-widgets conversation-details.tsx): date keys, friendly date
+// labels, and grouping messages by sender + a 5-minute time window so that only
+// the last message of a run shows an avatar/timestamp and the first shows the
+// sender name.
+import dayjs from 'dayjs';
+
+export const MESSAGE_GROUP_TIME_WINDOW = 5 * 60 * 1000;
+
+export const getDateKey = (date: any): string =>
+  dayjs(date).format('YYYY-MM-DD');
+
+export const formatMessageDate = (dateKey: string): string => {
+  const d = dayjs(dateKey);
+  if (d.isSame(dayjs(), 'day')) {
+    return 'Today';
+  }
+  if (d.isSame(dayjs().subtract(1, 'day'), 'day')) {
+    return 'Yesterday';
+  }
+  return d.format('MMM D, YYYY');
+};
+
+const isOutgoing = (m: any): boolean => Boolean(m?.customerId);
+
+// Two messages belong to the same visual group when they are from the same
+// side (customer vs operator), the same operator user, on the same day, and
+// within the grouping time window.
+const sameGroup = (a: any, b: any): boolean => {
+  if (isOutgoing(a) !== isOutgoing(b)) {
+    return false;
+  }
+  if (!isOutgoing(a) && (a?.user?._id || '') !== (b?.user?._id || '')) {
+    return false;
+  }
+  if (getDateKey(a?.createdAt) !== getDateKey(b?.createdAt)) {
+    return false;
+  }
+  return (
+    Math.abs(
+      new Date(b?.createdAt).getTime() - new Date(a?.createdAt).getTime()
+    ) <= MESSAGE_GROUP_TIME_WINDOW
+  );
+};
+
+export type ChatRow =
+  | { type: 'welcome'; id: string; content?: string }
+  | { type: 'date'; id: string; label: string }
+  | {
+      type: 'message';
+      id: string;
+      item: any;
+      isFirstInGroup: boolean;
+      isLastInGroup: boolean;
+    };
+
+/**
+ * Build the chronological row list (welcome → date separators → grouped
+ * messages) for the chat screen.
+ *
+ * @param chronological messages oldest-first
+ * @param welcomeContent optional welcome bubble shown at the very top
+ */
+export const buildChatRows = (
+  chronological: any[],
+  welcomeContent?: string
+): ChatRow[] => {
+  const rows: ChatRow[] = [];
+
+  // Hide internal notes; bot/welcome handled separately.
+  const visible = (chronological || []).filter((m) => !m?.internal);
+
+  let lastDateKey: string | null = null;
+
+  visible.forEach((m, i) => {
+    const dateKey = getDateKey(m?.createdAt);
+    if (dateKey !== lastDateKey) {
+      rows.push({
+        type: 'date',
+        id: `date-${dateKey}-${i}`,
+        label: formatMessageDate(dateKey),
+      });
+      lastDateKey = dateKey;
+    }
+
+    const prev = visible[i - 1];
+    const next = visible[i + 1];
+    const isFirstInGroup = !prev || !sameGroup(prev, m);
+    const isLastInGroup = !next || !sameGroup(m, next);
+
+    rows.push({
+      type: 'message',
+      id: m._id,
+      item: m,
+      isFirstInGroup,
+      isLastInGroup,
+    });
+  });
+
+  if (welcomeContent) {
+    rows.unshift({ type: 'welcome', id: 'welcome', content: welcomeContent });
+  }
+
+  return rows;
+};

package/src/utils/onlineHours.ts

@@ -0,0 +1,167 @@
+type OnlineHour = {
+  day: string;
+  from: string;
+  to: string;
+};
+
+type FormatOnlineHoursOptions = {
+  onlineHours?: OnlineHour[];
+  timezone?: string;
+  showTimezone?: boolean;
+};
+
+export const AVAILABILITY_MESSAGE =
+  "We're available between 9.00 am and 6.00 pm (GMT +8). We'll get back to you as soon as possible.";
+
+const parseTime = (timeString: string): { hour: number; minute: number } => {
+  const normalized = timeString.toLowerCase().trim();
+  const colonIndex = normalized.indexOf(':');
+
+  if (colonIndex === -1) {
+    throw new Error(`Invalid time format: ${timeString}`);
+  }
+
+  let hour = Number.parseInt(normalized.substring(0, colonIndex), 10);
+  const minute = Number.parseInt(
+    normalized.substring(colonIndex + 1, colonIndex + 3),
+    10
+  );
+
+  const isPM = normalized.includes('pm');
+  const isAM = normalized.includes('am');
+
+  if (isPM && hour !== 12) {
+    hour += 12;
+  } else if (isAM && hour === 12) {
+    hour = 0;
+  }
+
+  return { hour, minute };
+};
+
+const formatTimeTo12Hour = (timeString: string): string => {
+  const { hour, minute } = parseTime(timeString);
+  const hour12 = hour > 12 ? hour - 12 : hour || 12;
+  const period = hour < 12 ? 'am' : 'pm';
+  const minuteStr = minute.toString().padStart(2, '0');
+
+  return `${hour12}.${minuteStr} ${period}`;
+};
+
+const formatTimeZoneLabel = (timezone: string): string => {
+  try {
+    const parts = new Intl.DateTimeFormat('en-US', {
+      timeZone: timezone,
+      timeZoneName: 'shortOffset',
+    }).formatToParts(new Date());
+    const value = parts.find((part) => part.type === 'timeZoneName')?.value;
+
+    return value || timezone;
+  } catch {
+    return timezone;
+  }
+};
+
+const formatTimezone = (timezone?: string, showTimezone?: boolean): string => {
+  if (!showTimezone || !timezone) {
+    return '';
+  }
+
+  const timezoneLabel = formatTimeZoneLabel(timezone);
+  const gmtMatch = timezoneLabel.match(/GMT([+-])(\d{1,2}):?(\d{0,2})/);
+
+  if (!gmtMatch) {
+    return ` (${timezoneLabel})`;
+  }
+
+  const signPart = gmtMatch[1];
+  const hourPart = gmtMatch[2];
+
+  if (!signPart || !hourPart) {
+    return ` (${timezoneLabel})`;
+  }
+
+  const sign = signPart === '+' ? '+' : '-';
+  const hours = Number.parseInt(hourPart, 10);
+  const minutes = gmtMatch[3] ? Number.parseInt(gmtMatch[3], 10) : 0;
+
+  return minutes === 0
+    ? ` (GMT ${sign}${hours})`
+    : ` (GMT ${sign}${hours}:${minutes.toString().padStart(2, '0')})`;
+};
+
+export const formatOnlineHours = ({
+  onlineHours,
+  timezone,
+  showTimezone,
+}: FormatOnlineHoursOptions): {
+  workHours: string;
+  formattedTimeZone: string;
+  onlineDays: string;
+} | null => {
+  const firstHour = onlineHours?.[0];
+
+  if (!firstHour?.from || !firstHour?.to) {
+    return null;
+  }
+
+  try {
+    return {
+      workHours: `${formatTimeTo12Hour(
+        firstHour.from
+      )} and ${formatTimeTo12Hour(firstHour.to)}`,
+      formattedTimeZone: formatTimezone(timezone, showTimezone).trim(),
+      onlineDays: onlineHours?.map((item) => item.day).join(', ') || '',
+    };
+  } catch {
+    return {
+      workHours: `${firstHour.from} and ${firstHour.to}`,
+      formattedTimeZone: formatTimezone(timezone, showTimezone).trim(),
+      onlineDays: onlineHours?.map((item) => item.day).join(', ') || '',
+    };
+  }
+};
+
+export const formatOnlineHoursShort = ({
+  onlineHours,
+  timezone,
+  showTimezone,
+}: FormatOnlineHoursOptions): string => {
+  const firstHour = onlineHours?.[0];
+
+  if (!firstHour?.from || !firstHour?.to) {
+    return '';
+  }
+
+  try {
+    const from = formatTimeTo12Hour(firstHour.from)
+      .replace(/\s+/g, '')
+      .replace('.00', '');
+    const to = formatTimeTo12Hour(firstHour.to)
+      .replace(/\s+/g, '')
+      .replace('.00', '');
+
+    let timezoneSuffix = '';
+
+    if (showTimezone && timezone) {
+      const timezoneLabel = formatTimeZoneLabel(timezone);
+      const gmtMatch = timezoneLabel.match(
+        /(?:\()?GMT([+-])(\d{1,2}):?(\d{0,2})(?:\))?/
+      );
+
+      if (gmtMatch?.[1] && gmtMatch[2]) {
+        const sign = gmtMatch[1];
+        const hours = Number.parseInt(gmtMatch[2], 10);
+        const minutes = gmtMatch[3] ? Number.parseInt(gmtMatch[3], 10) : 0;
+        const minutePart =
+          minutes === 0 ? '' : `:${minutes.toString().padStart(2, '0')}`;
+
+        timezoneSuffix = ` (GMT${sign}${hours}${minutePart})`;
+      }
+    }
+
+    return `${from}-${to}${timezoneSuffix}`;
+  } catch {
+    return `${firstHour.from}-${firstHour.to}`;
+  }
+};

package/src/utils/upload.ts

@@ -0,0 +1,326 @@
+// File-upload pipeline for the chat composer.
+//
+// Supports BOTH picker libraries so the SDK works in either setup:
+//   - Expo (managed / Expo Go) -> `expo-image-picker`
+//   - bare React Native         -> `react-native-image-picker`
+// Both are optional and resolved lazily, so the composer degrades gracefully
+// (the attach button hides) when neither is installed. The uploaded file key is
+// returned and sent as a message attachment via the existing
+// `widgetsInsertMessage` mutation (which already accepts attachments).
+//
+// NOTE: the upload endpoint mirrors the web uploader:
+// `POST /upload-file?kind=main&maxHeight=0&maxWidth=0`.
+
+export type PickedFile = {
+  uri: string;
+  name: string;
+  type: string;
+  size?: number;
+};
+
+export type UploadedAttachment = {
+  url: string;
+  name: string;
+  type: string;
+  size?: number;
+};
+
+export type UploadResponseType = 'text' | 'json';
+
+export type UploadOptions = {
+  url?: string;
+  kind?: string;
+  userId?: string;
+  responseType?: UploadResponseType;
+  maxHeight?: number;
+  maxWidth?: number;
+  extraFormData?: Array<{ key: string; value: string }>;
+};
+
+const ALLOWED_IMAGE_MIME_TYPES = ['image/jpeg', 'image/png'];
+const ALLOWED_IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png'];
+
+export const unsupportedImageUploadMessage =
+  'Only PNG and JPG images can be uploaded.';
+
+const getCleanPath = (value?: string | null): string => {
+  const withoutQuery = (value || '').split('?')[0] || '';
+
+  return withoutQuery.split('#')[0] || '';
+};
+
+const getExtension = (value?: string | null): string => {
+  const match = getCleanPath(value).match(/\.([a-zA-Z0-9]+)$/);
+
+  return match && match[1] ? match[1].toLowerCase() : '';
+};
+
+const normalizeMimeType = (type?: string | null): string => {
+  if (!type) {
+    return '';
+  }
+
+  return type === 'image/jpg' ? 'image/jpeg' : type.toLowerCase();
+};
+
+const getMimeTypeFromExtension = (extension: string): string => {
+  if (extension === 'jpg' || extension === 'jpeg') {
+    return 'image/jpeg';
+  }
+
+  if (extension === 'png') {
+    return 'image/png';
+  }
+
+  return '';
+};
+
+const getFileNameFromUri = (uri?: string | null): string => {
+  const fileName = getCleanPath(uri).split('/').pop() || '';
+
+  return getExtension(fileName) ? fileName : '';
+};
+
+const getImageFileName = (
+  fileName?: string | null,
+  uri?: string | null,
+  type?: string | null
+): string => {
+  if (fileName && getExtension(fileName)) {
+    return fileName;
+  }
+
+  const uriFileName = getFileNameFromUri(uri);
+  if (uriFileName) {
+    return uriFileName;
+  }
+
+  const normalizedType = normalizeMimeType(type);
+  let extension = 'unsupported';
+
+  if (normalizedType === 'image/png') {
+    extension = 'png';
+  }
+
+  if (normalizedType === 'image/jpeg') {
+    extension = 'jpg';
+  }
+
+  return `image-${Date.now()}.${extension}`;
+};
+
+const getImageMimeType = (
+  type?: string | null,
+  fileName?: string | null,
+  uri?: string | null
+): string => {
+  const normalizedType = normalizeMimeType(type);
+
+  return (
+    normalizedType ||
+    getMimeTypeFromExtension(getExtension(fileName)) ||
+    getMimeTypeFromExtension(getExtension(uri))
+  );
+};
+
+export const isAllowedImageFile = (file: PickedFile): boolean => {
+  const type = normalizeMimeType(file.type);
+
+  if (type) {
+    return ALLOWED_IMAGE_MIME_TYPES.includes(type);
+  }
+
+  const extension = getExtension(file.name) || getExtension(file.uri);
+
+  return ALLOWED_IMAGE_EXTENSIONS.includes(extension);
+};
+
+// NOTE: each require must be a LITERAL string inside try/catch so Metro treats
+// it as an OPTIONAL dependency — it is bundled when installed and skipped
+// (without failing the build) when absent. A variable require would never be
+// bundled. Expo is preferred when present (works in Expo Go without a rebuild).
+const getExpoPicker = (): any | null => {
+  try {
+    return require('expo-image-picker');
+  } catch {
+    return null;
+  }
+};
+
+const getRNPicker = (): any | null => {
+  try {
+    return require('react-native-image-picker');
+  } catch {
+    return null;
+  }
+};
+
+export const isImagePickerAvailable = (): boolean =>
+  !!(
+    getExpoPicker()?.launchImageLibraryAsync ||
+    getRNPicker()?.launchImageLibrary
+  );
+
+export const pickImage = async (): Promise<PickedFile | null> => {
+  const expo = getExpoPicker();
+  if (expo?.launchImageLibraryAsync) {
+    if (expo.requestMediaLibraryPermissionsAsync) {
+      const perm = await expo.requestMediaLibraryPermissionsAsync();
+      if (perm && perm.granted === false) {
+        return null;
+      }
+    }
+    // `MediaType` is a TS-only type in expo-image-picker v16+; the runtime value
+    // is the string-array form. Using it avoids the deprecated
+    // `MediaTypeOptions` (and its warning).
+    const result = await expo.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      preferredAssetRepresentationMode:
+        expo.UIImagePickerPreferredAssetRepresentationMode?.Compatible ||
+        'compatible',
+      quality: 0.8,
+    });
+    if (result?.canceled || !result?.assets || result.assets.length === 0) {
+      return null;
+    }
+    const asset = result.assets[0];
+    const name = getImageFileName(asset.fileName, asset.uri, asset.mimeType);
+    return {
+      uri: asset.uri,
+      name,
+      type: getImageMimeType(asset.mimeType, name, asset.uri),
+      size: asset.fileSize,
+    };
+  }
+
+  const rn = getRNPicker();
+  if (rn?.launchImageLibrary) {
+    const result = await rn.launchImageLibrary({
+      mediaType: 'photo',
+      selectionLimit: 1,
+      assetRepresentationMode: 'compatible',
+      quality: 0.8,
+    });
+    if (result?.didCancel || !result?.assets || result.assets.length === 0) {
+      return null;
+    }
+    const asset = result.assets[0];
+    const name = getImageFileName(asset.fileName, asset.uri, asset.type);
+    return {
+      uri: asset.uri,
+      name,
+      type: getImageMimeType(asset.type, name, asset.uri),
+      size: asset.fileSize,
+    };
+  }
+
+  return null;
+};
+
+const getFileType = (file: PickedFile): string => {
+  return getImageMimeType(file.type, file.name, file.uri);
+};
+
+const normalizeUploadResponse = (
+  response: unknown,
+  responseType: UploadResponseType
+): string => {
+  if (responseType === 'text') {
+    return String(response).trim();
+  }
+
+  if (typeof response === 'string') {
+    return response.trim();
+  }
+
+  if (response && typeof response === 'object') {
+    const body = response as Record<string, any>;
+    return String(
+      body.url || body.key || body.name || body.response || body.file || ''
+    ).trim();
+  }
+
+  return '';
+};
+
+// erxes gateway upload endpoint. erxes core serves file routes at the gateway
+// root: `GET /read-file` (download, see getAttachmentUrl) and `POST
+// /upload-file` (upload), which returns the stored file key as plain text.
+export const getUploadUrl = (
+  subDomain: string,
+  options: UploadOptions = {}
+): string => {
+  const {
+    url = `https://${subDomain}/gateway/upload-file`,
+    kind = 'main',
+    maxHeight = 0,
+    maxWidth = 0,
+  } = options;
+
+  const separator = url.includes('?') ? '&' : '?';
+
+  return `${url}${separator}kind=${encodeURIComponent(
+    kind
+  )}&maxHeight=${maxHeight}&maxWidth=${maxWidth}`;
+};
+
+export const uploadFile = async (
+  file: PickedFile,
+  subDomain: string,
+  options: UploadOptions = {}
+): Promise<UploadedAttachment> => {
+  const type = getFileType(file);
+  const uploadFileInfo = {
+    ...file,
+    name: getImageFileName(file.name, file.uri, type),
+    type,
+  };
+
+  if (!isAllowedImageFile(uploadFileInfo)) {
+    throw new Error(unsupportedImageUploadMessage);
+  }
+
+  const form = new FormData();
+  form.append('file', {
+    uri: uploadFileInfo.uri,
+    name: uploadFileInfo.name,
+    type: uploadFileInfo.type,
+  } as any);
+
+  if (options.extraFormData) {
+    options.extraFormData.forEach(({ key, value }) => {
+      form.append(key, value);
+    });
+  }
+
+  const responseType = options.responseType || 'text';
+  const response = await fetch(getUploadUrl(subDomain, options), {
+    method: 'POST',
+    body: form,
+    credentials: 'include',
+    ...(options.userId ? { headers: { userId: options.userId } } : {}),
+  });
+
+  const responseBody = await response[responseType]();
+
+  if (!response.ok) {
+    const detail =
+      typeof responseBody === 'string'
+        ? responseBody.slice(0, 200)
+        : JSON.stringify(responseBody).slice(0, 200);
+    throw new Error(`Upload failed (${response.status}) ${detail}`.trim());
+  }
+
+  const key = normalizeUploadResponse(responseBody, responseType);
+
+  if (!key) {
+    throw new Error('Upload failed: empty file key');
+  }
+
+  return {
+    url: key,
+    name: uploadFileInfo.name,
+    type: uploadFileInfo.type,
+    size: uploadFileInfo.size,
+  };
+};

package/lib/commonjs/components/FAB.js

@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/* eslint-disable react-native/no-inline-styles */
-
-const FAB = props => {
-  const {
-    icon,
-    onPress,
-    backgroundColor = '#2F1F69',
-    style,
-    bottom = 20
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    onPress: onPress,
-    style: [styles.default, {
-      backgroundColor: backgroundColor ? backgroundColor : '#2F1F69',
-      bottom: bottom
-    }, style]
-  }, icon);
-};
-const styles = _reactNative.StyleSheet.create({
-  default: {
-    position: 'absolute',
-    right: 20,
-    bottom: 20,
-    height: 60,
-    width: 60,
-    borderRadius: 50,
-    justifyContent: 'center',
-    alignItems: 'center',
-    elevation: 3,
-    zIndex: 3,
-    shadowColor: '#2F1F69',
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.5,
-    shadowRadius: 3
-  }
-});
-var _default = FAB;
-exports.default = _default;
-//# sourceMappingURL=FAB.js.map

package/lib/commonjs/components/FAB.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","obj","__esModule","default","FAB","props","icon","onPress","backgroundColor","style","bottom","createElement","TouchableOpacity","styles","StyleSheet","create","position","right","height","width","borderRadius","justifyContent","alignItems","elevation","zIndex","shadowColor","shadowOffset","shadowOpacity","shadowRadius","_default","exports"],"sourceRoot":"../../../src","sources":["components/FAB.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAKsB,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAPtB;;AAqBA,MAAMG,GAAG,GAAIC,KAAY,IAAK;EAC5B,MAAM;IACJC,IAAI;IACJC,OAAO;IACPC,eAAe,GAAG,SAAS;IAC3BC,KAAK;IACLC,MAAM,GAAG;EACX,CAAC,GAAGL,KAAK;EACT,oBACER,MAAA,CAAAM,OAAA,CAAAQ,aAAA,CAACX,YAAA,CAAAY,gBAAgB;IACfL,OAAO,EAAEA,OAAQ;IACjBE,KAAK,EAAE,CACLI,MAAM,CAACV,OAAO,EACd;MACEK,eAAe,EAAEA,eAAe,GAAGA,eAAe,GAAG,SAAS;MAC9DE,MAAM,EAAEA;IACV,CAAC,EACDD,KAAK;EACL,GAEDH,IACe,CAAC;AAEvB,CAAC;AAED,MAAMO,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;EAC/BZ,OAAO,EAAE;IACPa,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,EAAE;IACTP,MAAM,EAAE,EAAE;IACVQ,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE,EAAE;IACTC,YAAY,EAAE,EAAE;IAChBC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,SAAS,EAAE,CAAC;IACZC,MAAM,EAAE,CAAC;IACTC,WAAW,EAAE,SAAS;IACtBC,YAAY,EAAE;MACZP,KAAK,EAAE,CAAC;MACRD,MAAM,EAAE;IACV,CAAC;IACDS,aAAa,EAAE,GAAG;IAClBC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAAC,IAAAC,QAAA,GAEYzB,GAAG;AAAA0B,OAAA,CAAA3B,OAAA,GAAA0B,QAAA"}