@adatechnology/conversations-ui 0.1.0-rc.0 → 0.1.0-rc.10

package/src/ConversationHeader.tsx

@@ -0,0 +1,257 @@
+/**
+ * Cabeçalho do painel de conversa: quem é o cliente, quem está conduzindo (bot ou humano) e as
+ * ações de atendimento.
+ *
+ * Presentacional por decisão de arquitetura: `ConversationsApi` não tem takeover/release, e não é
+ * papel do pacote saber a rota de cada host. Quem passa os handlers é o produto.
+ */
+
+import { useState } from 'react'
+
+import type { ConversationSummary } from './providers/types'
+import { capabilitiesOf, contactFlag, formatContactHandle } from './conversationChannel'
+import { cn } from './lib/cn'
+import { Avatar } from './Avatar'
+import { ChannelIcon } from './ChannelIcon'
+
+export interface ConversationHeaderLabels {
+  botMode: string
+  humanMode: string
+  returnToBot: string
+  finish: string
+  takeover: string
+  download: string
+  documents: string
+  back: string
+  moreActions: string
+}
+
+export const DEFAULT_CONVERSATION_HEADER_LABELS: ConversationHeaderLabels = {
+  botMode: '🤖 atendimento automático',
+  humanMode: '🧑‍💼 atendimento humano',
+  returnToBot: 'Devolver ao bot',
+  finish: 'Finalizar',
+  takeover: 'Assumir atendimento',
+  download: 'Baixar conversa',
+  documents: 'Arquivos da conversa',
+  back: 'Voltar para a lista',
+  moreActions: 'Mais ações',
+}
+
+/**
+ * Partes estilizáveis do cabeçalho. Cada chave recebe classes que o `cn` funde por cima da base, e
+ * conflito de utilitário (padding, gap, borda) fica com o valor do produto.
+ */
+export interface ConversationHeaderClassNames {
+  root: string
+  identity: string
+  name: string
+  meta: string
+  actions: string
+  desktopActions: string
+  mobileMenu: string
+}
+
+/**
+ * Utilitário extra que o host pendura no cabeçalho — ícone no desktop, item de menu no celular,
+ * como os nativos. Entra por aqui, e não por um slot de ReactNode, porque é isso que preserva o
+ * comportamento responsivo: um nó solto viraria um quarto ícone em 375px, sem área de toque.
+ */
+export interface ConversationHeaderUtility {
+  key: string
+  /** Emoji, para casar com os utilitários nativos do cabeçalho. */
+  icon: string
+  label: string
+  run: () => void
+  active?: boolean
+}
+
+export interface ConversationHeaderProps {
+  conversation: ConversationSummary
+  busy?: boolean
+  onTakeover?: () => void
+  onReturnToBot?: () => void
+  onFinish?: () => void
+  onDownload?: () => void
+  onOpenDocuments?: () => void
+  documentsOpen?: boolean
+  /** Ações do produto que não existem no contrato do pacote (ex.: ferramentas de dev). */
+  extraUtilities?: readonly ConversationHeaderUtility[]
+  onBack?: () => void
+  labels?: Partial<ConversationHeaderLabels>
+  className?: string
+  classNames?: Partial<ConversationHeaderClassNames>
+}
+
+export function ConversationHeader({
+  conversation,
+  busy = false,
+  onTakeover,
+  onReturnToBot,
+  onFinish,
+  onDownload,
+  onOpenDocuments,
+  documentsOpen = false,
+  extraUtilities,
+  onBack,
+  labels: labelsOverride,
+  className,
+  classNames,
+}: ConversationHeaderProps) {
+  const labels = { ...DEFAULT_CONVERSATION_HEADER_LABELS, ...labelsOverride }
+  const isHuman = conversation.mode === 'human'
+  const handle = conversation.contactId ?? conversation.whatsappNumber
+  const displayHandle = formatContactHandle({ handle, channel: conversation.channel })
+  const flag = contactFlag({ handle, channel: conversation.channel })
+  const capabilities = capabilitiesOf(conversation.channel)
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  // Utilitários: ícone no desktop, item de menu no celular. Três ícones lado a lado em 375px não
+  // caberiam com área de toque decente, e nenhum deles é a ação principal do atendimento.
+  const utilities = [
+    onOpenDocuments
+      ? { key: 'documents', icon: '📄', label: labels.documents, run: onOpenDocuments, active: documentsOpen }
+      : undefined,
+    onDownload ? { key: 'download', icon: '⬇️', label: labels.download, run: onDownload, active: false } : undefined,
+    ...(extraUtilities ?? []).map((utility) => ({ ...utility, active: utility.active ?? false })),
+  ].filter(
+    (utility): utility is { key: string; icon: string; label: string; run: () => void; active: boolean } =>
+      Boolean(utility),
+  )
+
+  // Lista única de ações: alimenta os botões do desktop e o menu do celular, para as duas
+  // superfícies nunca divergirem sobre o que está disponível.
+  const actions = [
+    !isHuman && onTakeover
+      ? { key: 'takeover', label: labels.takeover, run: onTakeover, className: 'cv-header-action--primary' }
+      : undefined,
+    isHuman && onReturnToBot ? { key: 'release', label: labels.returnToBot, run: onReturnToBot, className: '' } : undefined,
+    isHuman && onFinish
+      ? { key: 'finish', label: `✕ ${labels.finish}`, run: onFinish, className: 'cv-header-action--danger' }
+      : undefined,
+  ].filter((action): action is { key: string; label: string; run: () => void; className: string } => Boolean(action))
+
+  // No celular utilitários e ações moram no mesmo menu: utilitários primeiro, porque são consulta e
+  // não alteram estado da conversa.
+  const menuItems = [
+    ...utilities.map((utility) => ({
+      key: utility.key,
+      label: `${utility.icon} ${utility.label}`,
+      run: utility.run,
+      className: '',
+    })),
+    ...actions,
+  ]
+
+  // `flex-nowrap` no cabeçalho: com wrap, o nome do cliente ocupava a largura toda em 375px e
+  // empurrava as ações para uma segunda linha — e o menu, ancorado ao próprio botão, passava a abrir
+  // fora da tela. O bloco de identificação encurta (truncate) em vez de empurrar.
+  return (
+    <header
+      className={cn(
+        'flex flex-nowrap items-center justify-between gap-3 border-b px-4 py-3',
+        classNames?.root,
+        className,
+      )}
+    >
+      <div className={cn('flex min-w-0 flex-1 items-center gap-3', classNames?.identity)}>
+        {/* Voltar existe só em tela estreita, onde lista e conversa não cabem juntas: sem ele, abrir
+            uma conversa no celular é um beco sem saída. A classe some acima de 1024px. */}
+        {onBack ? (
+          <button type="button" onClick={onBack} className="cv-back cv-touch" aria-label={labels.back} title={labels.back}>
+            ←
+          </button>
+        ) : null}
+        {/* Sem nome, o Avatar cai na silhueta — melhor que dois dígitos do telefone como iniciais. */}
+        <Avatar name={conversation.clientName} size="md" />
+        <div className="min-w-0">
+          <p className={cn('truncate font-medium', classNames?.name)}>{conversation.clientName ?? displayHandle}</p>
+          <p className={cn('truncate text-xs text-gray-500', classNames?.meta)}>
+            {/* Bandeira derivada do DDI e só quando o identificador é telefone. Estava fixa em 🇧🇷,
+                o que rotulava qualquer contato como brasileiro. */}
+            {flag ? `${flag} ` : ''}
+            {displayHandle}
+            {/* Em tela estreita sobra o ícone do canal e o emoji do modo: o rótulo escrito empurra o
+                telefone para fora e não diz nada que o ícone já não diga. */}
+            <span className="ml-2 inline-flex items-center gap-1">
+              <ChannelIcon channel={conversation.channel} />
+              <span className="cv-only-wide">{capabilities.label}</span>
+            </span>
+            <span className="ml-2 cv-only-wide">{isHuman ? labels.humanMode : labels.botMode}</span>
+            <span className="ml-1 cv-only-narrow" title={isHuman ? labels.humanMode : labels.botMode}>
+              {isHuman ? '🧑‍💼' : '🤖'}
+            </span>
+          </p>
+        </div>
+      </div>
+
+      <div className={cn('flex shrink-0 items-center gap-2', classNames?.actions)}>
+        {/* Desktop: utilitários como ícone e ações como botão, tudo visível de uma vez. */}
+        <div className={cn('hidden items-center gap-2 lg:flex', classNames?.desktopActions)}>
+          {utilities.map((utility) => (
+            <button
+              key={utility.key}
+              type="button"
+              onClick={utility.run}
+              disabled={busy}
+              aria-pressed={utility.active}
+              title={utility.label}
+              aria-label={utility.label}
+              className={`cv-header-icon ${utility.active ? 'cv-header-icon--active' : ''}`}
+            >
+              {utility.icon}
+            </button>
+          ))}
+          {actions.map((action) => (
+            <button
+              key={action.key}
+              type="button"
+              onClick={action.run}
+              disabled={busy}
+              className={`cv-header-action ${action.className}`}
+            >
+              {action.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Celular: um único ⋮ com tudo dentro. Três ícones de 30px lado a lado violavam o mínimo
+            de 44px de área de toque e disputavam espaço com o nome do cliente. */}
+        {menuItems.length > 0 ? (
+          <div className={cn('cv-menu lg:hidden', classNames?.mobileMenu)}>
+            <button
+              type="button"
+              onClick={() => setMenuOpen(!menuOpen)}
+              aria-expanded={menuOpen}
+              aria-label={labels.moreActions}
+              title={labels.moreActions}
+              className="cv-header-icon cv-touch"
+            >
+              ⋮
+            </button>
+
+            {menuOpen ? (
+              <div className="cv-menu-panel" role="menu">
+                {menuItems.map((item) => (
+                  <button
+                    key={item.key}
+                    type="button"
+                    role="menuitem"
+                    onClick={() => {
+                      setMenuOpen(false)
+                      item.run()
+                    }}
+                    disabled={busy}
+                    className={`cv-header-action cv-touch ${item.className}`}
+                  >
+                    {item.label}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </header>
+  )
+}

package/src/ConversationListItem.tsx

@@ -1,14 +1,38 @@
 import { useMemo } from 'react'
 import { Avatar } from './Avatar'
-import { formatPhone } from './lib/phone'
+import { contactFlag, formatContactHandle } from './conversationChannel'
 import type { ConversationSummary } from './providers/types'
 
+export interface ConversationListItemLabels {
+  /** Tooltip do ponto vermelho: a janela de atendimento de 24h já fechou. */
+  expiredWindow: string
+  /** Tooltip do ponto laranja: a janela de atendimento está perto de fechar. */
+  warningWindow: string
+}
+
+export const DEFAULT_CONVERSATION_LIST_ITEM_LABELS: ConversationListItemLabels = {
+  expiredWindow: 'Janela expirada',
+  warningWindow: 'Janela próxima do fim',
+}
+
 export interface ConversationListItemProps {
   conversation: ConversationSummary
+  labels?: Partial<ConversationListItemLabels>
   active?: boolean
   selected?: boolean
   onClick?: () => void
   onSelect?: (id: string) => void
+  /**
+   * Desliga a borda inferior quando o item é composto dentro de outra linha (ver `ConversationRow`):
+   * com ela ligada, a borda corta a própria linha ao meio, separando o item do rodapé de status.
+   */
+  showDivider?: boolean
+  /**
+   * Desliga o fundo de selecionado. Par do `showDivider`: quando o item é composto dentro de uma
+   * linha maior, quem pinta o realce é a linha — senão só o bloco do item fica cinza e o resto
+   * (checkbox, pills, barra lateral) continua branco, como se metade da linha estivesse selecionada.
+   */
+  highlightActive?: boolean
 }
 
 function formatRelativeTime(dateStr: string): string {
@@ -79,12 +103,22 @@ export const ConversationListItem = ({
   selected = false,
   onClick,
   onSelect,
+  showDivider = true,
+  highlightActive = true,
+  labels,
 }: ConversationListItemProps) => {
+  const expiredWindowLabel = labels?.expiredWindow ?? DEFAULT_CONVERSATION_LIST_ITEM_LABELS.expiredWindow
+  const warningWindowLabel = labels?.warningWindow ?? DEFAULT_CONVERSATION_LIST_ITEM_LABELS.warningWindow
   const isActive = active || selected
   const windowStatus = useMemo(() => getWindowStatus(conversation.lastInboundAt), [conversation.lastInboundAt])
   const preview = useMemo(() => lastMessagePreview(conversation), [conversation.lastContent])
-  const name = conversation.clientName || formatPhone(conversation.whatsappNumber) || conversation.whatsappNumber
+  // `contactId` é o identificador neutro; `whatsappNumber` fica como fallback enquanto o backend
+  // não informa canal.
+  const handle = conversation.contactId ?? conversation.whatsappNumber
+  const displayHandle = formatContactHandle({ handle, channel: conversation.channel })
+  const name = conversation.clientName || displayHandle || handle
   const timestamp = formatRelativeTime(conversation.lastAt)
+  const flag = contactFlag({ handle, channel: conversation.channel })
   const isInbound = conversation.lastDirection === 'inbound'
 
   const handleClick = () => {
@@ -95,13 +129,15 @@ export const ConversationListItem = ({
   return (
     <button
       onClick={handleClick}
-      className="w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-[#f0f2f5] border-b border-[#e9edef]"
+      className={`w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors ${highlightActive ? "hover:bg-[#f0f2f5]" : ""} ${showDivider ? "border-b border-[#e9edef]" : ""}`}
       style={{
-        backgroundColor: isActive ? '#f0f2f5' : 'transparent',
+        backgroundColor: isActive && highlightActive ? '#f0f2f5' : 'transparent',
       }}
     >
       <div className="relative flex-shrink-0">
-        <Avatar name={name} size="lg" />
+        {/* Só o nome do cliente: passar o telefone faria o avatar exibir dígitos soltos em vez da
+            silhueta de contato sem nome. */}
+        <Avatar name={conversation.clientName} size="lg" />
         {conversation.waitingHuman && (
           <div className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-amber-400 rounded-full border-2 border-white" />
         )}
@@ -110,18 +146,29 @@ export const ConversationListItem = ({
       <div className="flex-1 min-w-0">
         <div className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-1.5 min-w-0">
+            {/* Sem nome, o título já é o telefone — a bandeira vai nele. */}
+            {!conversation.clientName && flag ? <span aria-hidden>{flag}</span> : null}
             <span className="text-[16px] text-[#111b21] truncate">{name}</span>
             {windowStatus && windowStatus.label === 'expired' && (
-              <span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" title="Janela expirada" />
+              <span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" title={expiredWindowLabel} />
             )}
             {windowStatus && windowStatus.label === 'warning' && (
-              <span className="w-2 h-2 rounded-full bg-orange-500 flex-shrink-0" title="Janela próxima do fim" />
+              <span className="w-2 h-2 rounded-full bg-orange-500 flex-shrink-0" title={warningWindowLabel} />
             )}
           </div>
           {timestamp && (
             <span className="text-xs text-[#667781] flex-shrink-0">{timestamp}</span>
           )}
         </div>
+        {/* Telefone só como subtítulo quando o título é o nome — repetir o número embaixo dele
+            mesmo gastaria uma linha para dizer duas vezes a mesma coisa. */}
+        {conversation.clientName ? (
+          <div className="flex items-center gap-1 text-xs text-[#667781]">
+            {flag ? <span aria-hidden>{flag}</span> : null}
+            <span className="truncate">{displayHandle}</span>
+          </div>
+        ) : null}
+
         <div className="flex items-center justify-between mt-0.5">
           <span className="text-sm text-[#667781] truncate max-w-[180px]">
             {preview.icon && <span className="mr-1">{preview.icon}</span>}

package/src/ConversationLocalesProvider.tsx

@@ -13,6 +13,14 @@ export interface ConversationLocales {
     viewImage: string
     listenAudio: string
     viewVideo: string
+    moderationFlagged: string
+    mediaLoading: string
+    mediaRetry: string
+    mediaError: string
+    mediaUnavailable: string
+    imageAlt: string
+    untitledDocument: string
+    downloadFile: string
   }
   selection: {
     select: string
@@ -36,6 +44,14 @@ const DEFAULT_LOCALES: ConversationLocales = {
     viewImage: 'Ver imagem',
     listenAudio: 'Ouvir áudio',
     viewVideo: 'Ver vídeo',
+    moderationFlagged: 'Linguagem ofensiva',
+    mediaLoading: 'Carregando...',
+    mediaRetry: 'Erro — tentar novamente',
+    mediaError: 'Erro',
+    mediaUnavailable: 'Mídia indisponível',
+    imageAlt: 'Imagem',
+    untitledDocument: 'Documento',
+    downloadFile: 'Baixar',
   },
   selection: {
     select: 'Selecionar',

package/src/ConversationRow.tsx

@@ -0,0 +1,137 @@
+/**
+ * Linha da inbox operacional: o `ConversationListItem` cuida do visual padrão (avatar, prévia,
+ * hora, não lidas) e aqui em volta ficam as affordances de trabalho — seleção em massa, sinal da
+ * janela de 24h, tempo parada e retomada de atendimento.
+ *
+ * Fica no pacote, e não em cada produto, porque nada disto é regra de um negócio específico: é
+ * como se opera uma fila de atendimento no WhatsApp.
+ */
+
+import { ConversationListItem } from './ConversationListItem'
+import { capabilitiesOf } from './conversationChannel'
+import { cn } from './lib/cn'
+import { ChannelIcon } from './ChannelIcon'
+import type { ConversationSummary } from './providers/types'
+import {
+  CONVERSATION_WINDOW,
+  formatStalledFor,
+  windowOf,
+  type ConversationWindow,
+} from './conversationWindow'
+
+
+const WINDOW_TITLE: Record<ConversationWindow, string> = {
+  [CONVERSATION_WINDOW.ALL]: '',
+  [CONVERSATION_WINDOW.FRESH]: 'Janela de 24h aberta (menos de 12h)',
+  [CONVERSATION_WINDOW.WARNING]: 'Janela de 24h fechando (12-21h)',
+  [CONVERSATION_WINDOW.CRITICAL]: 'Janela de 24h quase expirada (21-24h)',
+  [CONVERSATION_WINDOW.EXPIRED]: 'Janela de 24h expirada — só template',
+}
+
+// Abaixo disto a conversa é recente e o aviso de "parada" só faria ruído.
+const STALLED_THRESHOLD_MS = 60 * 60 * 1000
+
+const WINDOW_BAR_CLASS: Record<ConversationWindow, string> = {
+  [CONVERSATION_WINDOW.ALL]: 'bg-transparent',
+  [CONVERSATION_WINDOW.FRESH]: 'bg-green-500',
+  [CONVERSATION_WINDOW.WARNING]: 'bg-yellow-500',
+  [CONVERSATION_WINDOW.CRITICAL]: 'bg-red-500',
+  [CONVERSATION_WINDOW.EXPIRED]: 'bg-gray-300',
+}
+
+export type ConversationRowClassNames = {
+  root: string
+  windowBar: string
+}
+
+export type ConversationRowProps = {
+  conversation: ConversationSummary
+  active: boolean
+  selected: boolean
+  now: number
+  busy: boolean
+  onOpen: () => void
+  onToggleSelected: () => void
+  onTakeover: () => void
+  className?: string
+  classNames?: Partial<ConversationRowClassNames>
+}
+
+export function ConversationRow({
+  conversation,
+  active,
+  selected,
+  now,
+  busy,
+  onOpen,
+  onToggleSelected,
+  onTakeover,
+  className,
+  classNames,
+}: ConversationRowProps) {
+  const capabilities = capabilitiesOf(conversation.channel)
+  const window = windowOf({ lastInboundAt: conversation.lastInboundAt, now, channel: conversation.channel })
+  const stalledMs = now - new Date(conversation.lastAt).getTime()
+  // "Parada" é sobre a conversa estar sem resposta há tempo, independente de quem conduz. Amarrar
+  // ao `waitingHuman` escondia justamente o caso ruim: conversa assumida e esquecida.
+  const isStalled = stalledMs > STALLED_THRESHOLD_MS
+  const isWaiting = conversation.mode === 'bot' && conversation.waitingHuman
+
+  // Realce e hover ficam na linha inteira: com eles no item, só o bloco dele ficava cinza enquanto
+  // checkbox, barra lateral e pills continuavam brancos — parecia meia linha selecionada.
+  return (
+    <div className={cn('cv-row flex border-b', active && 'cv-row--active', classNames?.root, className)}>
+      {/* Barra lateral com a cor da janela: informa sem competir por espaço com o conteúdo, e não
+          duplica as bolinhas que o próprio ConversationListItem já desenha. */}
+      <span
+        className={cn('w-1 shrink-0', WINDOW_BAR_CLASS[window], classNames?.windowBar)}
+        title={WINDOW_TITLE[window]}
+        aria-label={WINDOW_TITLE[window]}
+      />
+
+      <div className="min-w-0 flex-1">
+        <div className="flex items-start gap-2 px-2 pt-2">
+          <input
+            type="checkbox"
+            checked={selected}
+            onChange={onToggleSelected}
+            aria-label={`Selecionar conversa ${conversation.whatsappNumber}`}
+            className="mt-3"
+          />
+          <div className="min-w-0 flex-1">
+            {/* Sem divisória: a borda do item cortaria esta linha ao meio, separando-o do rodapé
+                de status que pertence à mesma conversa. */}
+            <ConversationListItem
+              conversation={conversation}
+              active={active}
+              onClick={onOpen}
+              showDivider={false}
+              highlightActive={false}
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-1.5 px-4 pb-2 pl-8">
+          {/* Canal na linha: numa inbox multicanal, saber de onde a conversa veio muda o que o
+              atendente pode fazer nela. */}
+          <span className="cv-pill">
+            <ChannelIcon channel={conversation.channel} /> {capabilities.label}
+          </span>
+          {conversation.mode === 'human' ? (
+            <span className="cv-pill cv-pill--success">🧑‍💼 em atendimento</span>
+          ) : null}
+          {isWaiting ? <span className="cv-pill cv-pill--warning">⏳ aguardando atendimento</span> : null}
+          {!isWaiting && conversation.mode === 'bot' ? <span className="cv-pill">🤖 bot ativo</span> : null}
+          {isStalled ? (
+            <span className="cv-pill cv-pill--danger">⏱️ parada há {formatStalledFor(conversation.lastAt, now)}</span>
+          ) : null}
+          {isWaiting ? (
+            <button type="button" onClick={onTakeover} disabled={busy} className="cv-header-action">
+              ▶️ Continuar Atendimento
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/DateDivider.tsx

@@ -1,18 +1,31 @@
 import { useConversationLocales } from './ConversationLocalesProvider'
 import { isSameDay } from './lib/format'
+import { cn } from './lib/cn'
+
+export interface DateDividerClassNames {
+  root: string
+  label: string
+}
 
 export interface DateDividerProps {
   iso: string
+  className?: string
+  classNames?: Partial<DateDividerClassNames>
 }
 
 // Paridade com financiamento-imobiliario-bot/apps/web/src/components/DateDivider.tsx —
 // sticky no topo do scroll, "Hoje"/"Ontem" localizados, senão data completa pt-BR.
-export function DateDivider({ iso }: DateDividerProps) {
+export function DateDivider({ iso, className, classNames }: DateDividerProps) {
   const { dateDivider } = useConversationLocales()
 
   return (
-    <div className="flex justify-center sticky top-0 z-10 my-2 pointer-events-none">
-      <span className="bg-white/95 dark:bg-gray-800/95 text-gray-600 dark:text-gray-300 text-xs font-medium px-3 py-1 rounded-lg shadow-sm">
+    <div className={cn('flex justify-center sticky top-0 z-10 my-2 pointer-events-none', classNames?.root, className)}>
+      <span
+        className={cn(
+          'bg-white/95 dark:bg-gray-800/95 text-gray-600 dark:text-gray-300 text-xs font-medium px-3 py-1 rounded-lg shadow-sm',
+          classNames?.label,
+        )}
+      >
         {formatDividerLabel(iso, dateDivider)}
       </span>
     </div>