@inorain_development/hotel-smarters-chat-ui 1.2.2 → 1.3.1

package/src/features/chat/components/info/info.native.tsx

@@ -1,24 +1,60 @@
-import { Text, View } from 'react-native';
+import { Image, Pressable, Text, View } from 'react-native';
 import { getThemeClasses } from '../../../../utils/theme.utils';
 import { resolveText } from '../../../../utils/i18n.utils';
+import { ChevronIcon } from '../common/chevron-icon.native';
 import { Theme } from '../../model/chat.model';
 import type { ChatComponentProps } from '../../model/chat.model';
 import type { InfoItem } from './info.model';
 
-export function Info({ data, theme = Theme.Dark, language }: ChatComponentProps<InfoItem>) {
+export function Info({ data, theme = Theme.Dark, language, onSelect }: ChatComponentProps<InfoItem>) {
   const c = getThemeClasses(theme);
-  const item = Array.isArray(data) ? data[0] : data;
-  if (!item) return null;
+  const items = Array.isArray(data) ? data : [data];
 
-  const name = resolveText(item.name, language);
-  const description = resolveText(item.description, language);
+  const renderCard = (item: InfoItem, index: number) => {
+    const name = resolveText(item.name, language);
+    const description = resolveText(item.description, language);
+    const kicker = item.kicker ? resolveText(item.kicker, language) : undefined;
+    const actionLabel = item.actionLabel ? resolveText(item.actionLabel, language) : undefined;
+
+    return (
+      <View key={index} className={`overflow-hidden rounded-2xl border ${c.surface} ${c.border}`}>
+        {item.image ? (
+          <Image
+            accessibilityLabel={name}
+            source={{ uri: item.image }}
+            className="h-32 w-full down-sm:h-24"
+          />
+        ) : null}
+
+        <View className="flex flex-col gap-2 p-4">
+          {kicker ? (
+            <Text
+              className={`w-fit rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wide ${c.actionBorder} ${c.iconText}`}
+            >
+              {kicker}
+            </Text>
+          ) : null}
+
+          <Text className={`text-base font-bold down-sm:text-sm ${c.title}`}>{name}</Text>
+          <Text className={`text-sm leading-relaxed down-sm:text-xs ${c.subtitle}`}>{description}</Text>
+
+          {actionLabel ? (
+            <Pressable
+              onPress={() => onSelect?.(item)}
+              className="mt-1 flex-row items-center gap-1"
+            >
+              <Text className={`text-sm font-semibold ${c.iconText}`}>{actionLabel}</Text>
+              <ChevronIcon size={14} color={c.iconColor} />
+            </Pressable>
+          ) : null}
+        </View>
+      </View>
+    );
+  };
 
   return (
-    <View className={`rounded-2xl border p-4 ${c.surface} ${c.border}`}>
-      <Text className={`text-base font-bold down-sm:text-sm ${c.title}`}>{name}</Text>
-      <Text className={`mt-1 text-sm leading-relaxed down-sm:text-xs ${c.subtitle}`}>
-        {description}
-      </Text>
+    <View className="flex flex-col gap-3">
+      {items.map((item, index) => renderCard(item, index))}
     </View>
   );
 }

package/src/features/chat/components/info/info.tsx

@@ -1,23 +1,56 @@
 import { getThemeClasses } from '../../../../utils/theme.utils';
 import { resolveText } from '../../../../utils/i18n.utils';
+import { ChevronIcon } from '../common/chevron-icon';
 import { Theme } from '../../model/chat.model';
 import type { ChatComponentProps } from '../../model/chat.model';
 import type { InfoItem } from './info.model';
 
-export function Info({ data, theme = Theme.Dark, language }: ChatComponentProps<InfoItem>) {
+export function Info({ data, theme = Theme.Dark, language, onSelect }: ChatComponentProps<InfoItem>) {
   const c = getThemeClasses(theme);
-  const item = Array.isArray(data) ? data[0] : data;
-  if (!item) return null;
+  const items = Array.isArray(data) ? data : [data];
 
-  const name = resolveText(item.name, language);
-  const description = resolveText(item.description, language);
+  const renderCard = (item: InfoItem, index: number) => {
+    const name = resolveText(item.name, language);
+    const description = resolveText(item.description, language);
+    const kicker = item.kicker ? resolveText(item.kicker, language) : undefined;
+    const actionLabel = item.actionLabel ? resolveText(item.actionLabel, language) : undefined;
+
+    return (
+      <div key={index} className={`overflow-hidden rounded-2xl border ${c.surface} ${c.border}`}>
+        {item.image ? (
+          <img src={item.image} alt={name} className="h-32 w-full object-cover down-sm:h-24" />
+        ) : null}
+
+        <div className="flex flex-col gap-2 p-4">
+          {kicker ? (
+            <span
+              className={`w-fit rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wide ${c.actionBorder} ${c.iconText}`}
+            >
+              {kicker}
+            </span>
+          ) : null}
+
+          <span className={`text-base font-bold down-sm:text-sm ${c.title}`}>{name}</span>
+          <span className={`text-sm leading-relaxed down-sm:text-xs ${c.subtitle}`}>{description}</span>
+
+          {actionLabel ? (
+            <button
+              type="button"
+              onClick={() => onSelect?.(item)}
+              className={`mt-1 flex w-fit items-center gap-1 text-sm font-semibold ${c.iconText}`}
+            >
+              {actionLabel}
+              <ChevronIcon size={14} color="currentColor" />
+            </button>
+          ) : null}
+        </div>
+      </div>
+    );
+  };
 
   return (
-    <div className={`rounded-2xl border p-4 ${c.surface} ${c.border}`}>
-      <span className={`block text-base font-bold down-sm:text-sm ${c.title}`}>{name}</span>
-      <span className={`mt-1 block text-sm leading-relaxed down-sm:text-xs ${c.subtitle}`}>
-        {description}
-      </span>
+    <div className="flex flex-col gap-3">
+      {items.map((item, index) => renderCard(item, index))}
     </div>
   );
 }

package/src/features/chat/components/order/index.ts

@@ -0,0 +1,3 @@
+export { Order } from './order';
+export { OrderStatus } from './order.model';
+export type { OrderListItem, OrderRow } from './order.model';

package/src/features/chat/components/order/order.model.ts

@@ -0,0 +1,32 @@
+import type { LocalizedText } from '../../model/chat.model';
+
+export enum OrderStatus {
+  Pending = 'pending',
+  Preparing = 'preparing',
+  Accepted = 'accepted',
+  Rejected = 'rejected',
+  Delivered = 'delivered',
+}
+
+export interface OrderRow {
+  id: number;
+  image?: string;
+  name: LocalizedText;
+  quantity: number;
+  unitPrice?: string;
+  duration?: string;
+  price: string;
+  status?: OrderStatus;
+  statusLabel?: LocalizedText;
+}
+
+export interface OrderListItem {
+  orderNumber: string;
+  location?: LocalizedText;
+  status?: OrderStatus;
+  statusLabel?: LocalizedText;
+  items: OrderRow[];
+  totalLabel?: LocalizedText;
+  total?: string;
+  actionLabel?: LocalizedText;
+}

package/src/features/chat/components/order/order.native.tsx

@@ -0,0 +1,172 @@
+import { Fragment } from 'react';
+import { Image, Pressable, Text, View } from 'react-native';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { getOrderStatusStyle } from '../../../../utils/order.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { useExpandableList } from '../../../../utils/use-expandable-list';
+import { Collapsible } from '../common/collapsible.native';
+import { CartIcon } from '../common/cart-icon.native';
+import { ChevronIcon } from '../common/chevron-icon.native';
+import { OrderStatus } from './order.model';
+import { ItemAction, Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { OrderListItem, OrderRow } from './order.model';
+
+export function Order({
+  data,
+  theme = Theme.Dark,
+  language,
+  actionLabel,
+  onAction,
+  onSelect,
+}: ChatComponentProps<OrderListItem>) {
+  const c = getThemeClasses(theme);
+  const order = Array.isArray(data) ? data[0] : data;
+  const items = order?.items ?? [];
+  const { head, rest, expanded, hasMore, toggle } = useExpandableList(items);
+
+  if (!order) return null;
+
+  const onSelectRow = onSelect as ((row: OrderRow) => void) | undefined;
+  const location = order.location ? resolveText(order.location, language) : undefined;
+  const totalLabel = order.totalLabel ? resolveText(order.totalLabel, language) : undefined;
+  const action = order.actionLabel
+    ? resolveText(order.actionLabel, language)
+    : typeof actionLabel === 'function'
+      ? actionLabel(order)
+      : actionLabel;
+  const headerStyle = getOrderStatusStyle(order.status, theme);
+  const headerStatusLabel = order.statusLabel ? resolveText(order.statusLabel, language) : headerStyle.label;
+
+  const renderRow = (row: OrderRow) => {
+    const name = resolveText(row.name, language);
+    const isRejected = row.status === OrderStatus.Rejected;
+    const s = getOrderStatusStyle(row.status, theme);
+    const statusLabel = row.statusLabel ? resolveText(row.statusLabel, language) : s.label;
+
+    return (
+      <Pressable className="flex-row items-center gap-3 py-2.5" onPress={() => onSelectRow?.(row)}>
+        <View className="relative">
+          {row.image ? (
+            <Image accessibilityLabel={name} source={{ uri: row.image }} className={`h-11 w-11 rounded-lg ${c.iconBg}`} />
+          ) : (
+            <View className={`h-11 w-11 rounded-lg ${c.iconBg}`} />
+          )}
+          {row.quantity > 1 ? (
+            <View className="absolute -right-1.5 -top-1.5 h-5 w-5 items-center justify-center rounded-full bg-indigo-500">
+              <Text className="text-[10px] font-bold text-white">{row.quantity}</Text>
+            </View>
+          ) : null}
+        </View>
+
+        <View className="flex-1 gap-1">
+          <View className="flex-row items-center justify-between gap-2">
+            <Text
+              className={`flex-1 text-sm font-semibold ${isRejected ? 'line-through opacity-60' : ''} ${c.title}`}
+              numberOfLines={1}
+            >
+              {name}
+            </Text>
+            <Text className={`text-sm font-bold ${isRejected ? 'line-through opacity-60' : ''} ${c.price}`}>
+              {row.price}
+            </Text>
+          </View>
+          <View className="flex-row items-center justify-between gap-2">
+            <Text className={`flex-1 text-xs ${c.subtitle}`} numberOfLines={1}>
+              {row.unitPrice ? `${row.unitPrice} each` : ''}
+              {row.unitPrice && row.duration ? ' · ' : ''}
+              {row.duration ?? ''}
+            </Text>
+            {row.status ? (
+              <View className={`rounded-full px-2 py-0.5 ${s.badgeBg}`}>
+                <Text className={`text-[11px] font-semibold ${s.badgeText}`}>{statusLabel}</Text>
+              </View>
+            ) : null}
+          </View>
+        </View>
+      </Pressable>
+    );
+  };
+
+  return (
+    <View className={`rounded-2xl border p-3.5 ${c.surface} ${c.border}`}>
+      <View className="flex-row items-center gap-3">
+        <View className={`h-11 w-11 items-center justify-center rounded-xl ${c.iconBg}`}>
+          <CartIcon size={20} color={c.iconColor} />
+        </View>
+
+        <View className="flex-1">
+          <Text className={`text-base font-bold ${c.title}`} numberOfLines={1}>
+            Order #{order.orderNumber}
+          </Text>
+          {location ? (
+            <Text className={`text-xs ${c.subtitle}`} numberOfLines={1}>
+              {location}
+            </Text>
+          ) : null}
+        </View>
+
+        <View className={`rounded-full px-2.5 py-1 ${headerStyle.badgeBg}`}>
+          <Text className={`text-xs font-semibold ${headerStyle.badgeText}`}>{headerStatusLabel}</Text>
+        </View>
+      </View>
+
+      <View className={`my-3 h-px ${c.divider}`} />
+
+      {head.map((row, index) => (
+        <Fragment key={row.id}>
+          {index > 0 ? <View className={`h-px ${c.divider}`} /> : null}
+          {renderRow(row)}
+        </Fragment>
+      ))}
+
+      {hasMore ? (
+        <Collapsible expanded={expanded}>
+          {rest.map((row) => (
+            <Fragment key={row.id}>
+              <View className={`h-px ${c.divider}`} />
+              {renderRow(row)}
+            </Fragment>
+          ))}
+        </Collapsible>
+      ) : null}
+
+      {hasMore ? (
+        <Pressable onPress={toggle} className="mt-1 flex-row items-center justify-between gap-2 py-2">
+          <View className="flex-row items-center gap-2">
+            <Text className={`text-sm ${c.subtitle}`}>
+              {expanded ? `Showing all ${items.length} items` : `Showing ${head.length} of ${items.length} items`}
+            </Text>
+          </View>
+          <View className="flex-row items-center gap-1">
+            <Text className={`text-sm font-semibold ${c.iconText}`}>{expanded ? 'Show less' : 'View all'}</Text>
+            <View className={expanded ? 'rotate-180' : undefined}>
+              <ChevronIcon size={14} color={c.iconColor} />
+            </View>
+          </View>
+        </Pressable>
+      ) : null}
+
+      {order.total || action ? (
+        <>
+          <View className={`my-3 h-px ${c.divider}`} />
+          <View className="flex-row items-center justify-between gap-3">
+            <View>
+              {totalLabel ? <Text className={`text-xs ${c.subtitle}`}>{totalLabel}</Text> : null}
+              {order.total ? <Text className={`text-lg font-bold ${c.title}`}>{order.total}</Text> : null}
+            </View>
+
+            {action ? (
+              <Pressable
+                onPress={() => onAction?.(order, ItemAction.Track)}
+                className="rounded-xl bg-indigo-500 px-4 py-2"
+              >
+                <Text className="text-sm font-semibold text-white">{action}</Text>
+              </Pressable>
+            ) : null}
+          </View>
+        </>
+      ) : null}
+    </View>
+  );
+}

package/src/features/chat/components/order/order.tsx

@@ -0,0 +1,173 @@
+import { Fragment } from 'react';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { getOrderStatusStyle } from '../../../../utils/order.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { useExpandableList } from '../../../../utils/use-expandable-list';
+import { Collapsible } from '../common/collapsible';
+import { CartIcon } from '../common/cart-icon';
+import { ChevronIcon } from '../common/chevron-icon';
+import { OrderStatus } from './order.model';
+import { ItemAction, Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { OrderListItem, OrderRow } from './order.model';
+
+export function Order({
+  data,
+  theme = Theme.Dark,
+  language,
+  actionLabel,
+  onAction,
+  onSelect,
+}: ChatComponentProps<OrderListItem>) {
+  const c = getThemeClasses(theme);
+  const order = Array.isArray(data) ? data[0] : data;
+  const items = order?.items ?? [];
+  const { head, rest, expanded, hasMore, toggle } = useExpandableList(items);
+
+  if (!order) return null;
+
+  const onSelectRow = onSelect as ((row: OrderRow) => void) | undefined;
+  const location = order.location ? resolveText(order.location, language) : undefined;
+  const totalLabel = order.totalLabel ? resolveText(order.totalLabel, language) : undefined;
+  const action = order.actionLabel
+    ? resolveText(order.actionLabel, language)
+    : typeof actionLabel === 'function'
+      ? actionLabel(order)
+      : actionLabel;
+  const headerStyle = getOrderStatusStyle(order.status, theme);
+  const headerStatusLabel = order.statusLabel ? resolveText(order.statusLabel, language) : headerStyle.label;
+
+  const renderRow = (row: OrderRow) => {
+    const name = resolveText(row.name, language);
+    const isRejected = row.status === OrderStatus.Rejected;
+    const s = getOrderStatusStyle(row.status, theme);
+    const statusLabel = row.statusLabel ? resolveText(row.statusLabel, language) : s.label;
+
+    return (
+      <button
+        type="button"
+        className="flex w-full items-center gap-3 py-2.5 text-left"
+        onClick={() => onSelectRow?.(row)}
+      >
+        <div className="relative shrink-0">
+          {row.image ? (
+            <img src={row.image} alt={name} className={`h-11 w-11 rounded-lg object-cover ${c.iconBg}`} />
+          ) : (
+            <div className={`h-11 w-11 rounded-lg ${c.iconBg}`} />
+          )}
+          {row.quantity > 1 ? (
+            <span className="absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-indigo-500 text-[10px] font-bold text-white">
+              {row.quantity}
+            </span>
+          ) : null}
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <div className="flex items-center justify-between gap-2">
+            <span className={`truncate text-sm font-semibold ${isRejected ? 'line-through opacity-60' : ''} ${c.title}`}>
+              {name}
+            </span>
+            <span className={`shrink-0 text-sm font-bold ${isRejected ? 'line-through opacity-60' : ''} ${c.price}`}>
+              {row.price}
+            </span>
+          </div>
+          <div className="flex items-center justify-between gap-2">
+            <span className={`truncate text-xs ${c.subtitle}`}>
+              {row.unitPrice ? `${row.unitPrice} each` : ''}
+              {row.unitPrice && row.duration ? ' · ' : ''}
+              {row.duration ?? ''}
+            </span>
+            {row.status ? (
+              <span className={`shrink-0 rounded-full px-2 py-0.5 text-[11px] font-semibold ${s.badgeBg} ${s.badgeText}`}>
+                {statusLabel}
+              </span>
+            ) : null}
+          </div>
+        </div>
+      </button>
+    );
+  };
+
+  return (
+    <div className={`rounded-2xl border p-3.5 ${c.surface} ${c.border}`}>
+      <div className="flex items-center gap-3">
+        <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-xl ${c.iconBg}`}>
+          <CartIcon size={20} color={c.iconColor} />
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <span className={`truncate text-base font-bold ${c.title}`}>Order #{order.orderNumber}</span>
+          {location ? <span className={`truncate text-xs ${c.subtitle}`}>{location}</span> : null}
+        </div>
+
+        <span
+          className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-semibold ${headerStyle.badgeBg} ${headerStyle.badgeText}`}
+        >
+          {headerStatusLabel}
+        </span>
+      </div>
+
+      <div className={`my-3 h-px ${c.divider}`} />
+
+      {head.map((row, index) => (
+        <Fragment key={row.id}>
+          {index > 0 ? <div className={`h-px ${c.divider}`} /> : null}
+          {renderRow(row)}
+        </Fragment>
+      ))}
+
+      {hasMore ? (
+        <Collapsible expanded={expanded}>
+          {rest.map((row) => (
+            <Fragment key={row.id}>
+              <div className={`h-px ${c.divider}`} />
+              {renderRow(row)}
+            </Fragment>
+          ))}
+        </Collapsible>
+      ) : null}
+
+      {hasMore ? (
+        <button
+          type="button"
+          onClick={toggle}
+          className="mt-1 flex w-full items-center justify-between gap-2 rounded-xl py-2"
+        >
+          <div className="flex items-center gap-2">
+            <span className={`text-sm ${c.subtitle}`}>
+              {expanded ? `Showing all ${items.length} items` : `Showing ${head.length} of ${items.length} items`}
+            </span>
+          </div>
+          <span className={`flex shrink-0 items-center gap-1 text-sm font-semibold ${c.iconText}`}>
+            {expanded ? 'Show less' : 'View all'}
+            <span className={`transition-transform ${expanded ? 'rotate-180' : ''}`}>
+              <ChevronIcon size={14} color="currentColor" />
+            </span>
+          </span>
+        </button>
+      ) : null}
+
+      {order.total || action ? (
+        <>
+          <div className={`my-3 h-px ${c.divider}`} />
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex flex-col">
+              {totalLabel ? <span className={`text-xs ${c.subtitle}`}>{totalLabel}</span> : null}
+              {order.total ? <span className={`text-lg font-bold ${c.title}`}>{order.total}</span> : null}
+            </div>
+
+            {action ? (
+              <button
+                type="button"
+                onClick={() => onAction?.(order, ItemAction.Track)}
+                className="rounded-xl bg-indigo-500 px-4 py-2 text-sm font-semibold text-white"
+              >
+                {action}
+              </button>
+            ) : null}
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/src/features/chat/components/reservation/index.ts

@@ -0,0 +1,3 @@
+export { Reservation } from './reservation';
+export { ReservationStatus } from './reservation.model';
+export type { ReservationListItem, ReservationRow } from './reservation.model';

package/src/features/chat/components/reservation/reservation.model.ts

@@ -0,0 +1,30 @@
+import type { LocalizedText } from '../../model/chat.model';
+
+export enum ReservationStatus {
+  Pending = 'pending',
+  Confirmed = 'confirmed',
+  Cancelled = 'cancelled',
+}
+
+export interface ReservationRow {
+  id: number;
+  image?: string;
+  name: LocalizedText;
+  date: string;
+  time: string;
+  duration?: string;
+  price: string;
+  status: ReservationStatus;
+  statusLabel?: LocalizedText;
+}
+
+export interface ReservationListItem {
+  title: LocalizedText;
+  subtitle?: LocalizedText;
+  status?: ReservationStatus;
+  statusLabel?: LocalizedText;
+  reservations: ReservationRow[];
+  totalLabel?: LocalizedText;
+  total?: string;
+  actionLabel?: LocalizedText;
+}