shopify-chatbot-widget 1.0.9 → 1.0.10

package/src/Chatbot/components/Messages/ChatMessages.css

@@ -44,4 +44,35 @@
   
   .first-message {
     animation: fadeSlideIn 0.5s ease-out;
-  }
+  }
+/* Support handoff — mini equalizer bars (matches voice mode) */
+.jwbS-bars {
+  --jwbS-accent: #111827;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+.jwbS-bars span {
+  width: 4px;
+  height: 16px;
+  border-radius: 3px;
+  background: var(--jwbS-accent);
+  animation: jwbS-wave 1.1s ease-in-out infinite;
+  transform-origin: center;
+}
+
+.jwbS-bars span:nth-child(2) {
+  animation-delay: 0.18s;
+}
+
+.jwbS-bars span:nth-child(3) {
+  animation-delay: 0.36s;
+}
+
+@keyframes jwbS-wave {
+  0%, 100% { transform: scaleY(0.4); opacity: 0.6; }
+  50% { transform: scaleY(1); opacity: 1; }
+}

package/src/Chatbot/components/Messages/ChatMessages.tsx

@@ -11,8 +11,6 @@ import AgentStatusBanner from './AgentStatus';
 import AddToCartConfirmation from './Addcart';
 import SupportConnect from './Support';
 import ChatImageTextAssist from './ChatImageTextAssis';
-import ZidAssistantChatMessage from './ZidAssistantMesage';
-import SallaAsssiatnt from './SallaAssistantMessage';
 import CalendlyEmbeds from './CalendlyEmbeds';
 
 
@@ -50,7 +48,6 @@ interface ChatMessagesProps {
     status?: string;
     user?: string;
   };
-  userType: string;
   calendly: string;
   disableCheckout: boolean;
   isfetchingMessage: boolean;
@@ -117,7 +114,6 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
   isLoading,
   agentStatus,
   sessionId,
-  userType,
   calendly,
   disableCheckout,
   isfetchingMessage,
@@ -188,7 +184,18 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
         }
 
         if (msg.isConnect) {
-          return <SupportConnect key={i} sessionId={sessionId} />;
+          // Escalations carry their ticket in the message content
+          let ticket = null;
+          const rawContent = typeof msg.content === 'string' ? msg.content : '';
+          const tm = rawContent.match(/\[\[SUPPORT_TICKET\]\]([\s\S]*?)\[\[\/SUPPORT_TICKET\]\]/);
+          if (tm) {
+            try {
+              ticket = JSON.parse(tm[1]);
+            } catch { /* no ticket card, stage card still shows */ }
+          }
+          return (
+            <SupportConnect key={i} sessionId={sessionId} colorCode={colorCode} ticket={ticket} />
+          );
         }
 
         if (msg.isBookings) {
@@ -254,39 +261,15 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
                   />
                 )}
 
-                {userType === "shopify" ? (
-                  <AssistantMessage
-                    message={msg.content || msg.text || ""}
-                    colorCode={colorCode}
-                    disableCheckout={disableCheckout}
-                    handleAddToCart={handleAddToCart}
-                    handleRemoveFromCart={handleRemoveFromCart}
-                    onTryOnSelect={onTryOnSelect}
-                    enableTry={enableTry}
-                  />
-                ) : userType === "salla" ? (
-                  <SallaAsssiatnt
-                    message={msg.content || msg.text || ""}
-                    colorCode={colorCode}
-                    handleAddToCart={handleAddToCart}
-                    handleRemoveFromCart={handleRemoveFromCart}
-                              onTryOnSelect={onTryOnSelect}
-                    enableTry={enableTry}
-                    // enableTry={enableTry}
-
-                    />
-                ) : (
-                  <ZidAssistantChatMessage
-                    message={msg.content || msg.text || ""}
-                    colorCode={colorCode}
-                    handleAddToCart={handleAddToCart}
-                    handleRemoveFromCart={handleRemoveFromCart}
-                              onTryOnSelect={onTryOnSelect}
-                    enableTry={enableTry}
-                    // enableTry={enableTry}
-
-                  />
-                )}
+                <AssistantMessage
+                  message={msg.content || msg.text || ""}
+                  colorCode={colorCode}
+                  disableCheckout={disableCheckout}
+                  handleAddToCart={handleAddToCart}
+                  handleRemoveFromCart={handleRemoveFromCart}
+                  onTryOnSelect={onTryOnSelect}
+                  enableTry={enableTry}
+                />
               </div>
 
               {/* ADD suggestions here - MOVED OUTSIDE the chat-msg div */}

package/src/Chatbot/components/Messages/OrderCard.css

@@ -0,0 +1,177 @@
+/* Order tracking card — matches the product card design language */
+.jwbO-card {
+  --jwbO-accent: #111111;
+  background: #ffffff;
+  border: 1px solid #ececec;
+  border-radius: 16px;
+  padding: 14px;
+  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  color: #111827;
+  max-width: 340px;
+}
+
+.jwbO-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.jwbO-label {
+  display: block;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #9ca3af;
+}
+
+.jwbO-number {
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.jwbO-pill {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 5px 10px;
+  border-radius: 999px;
+  background: var(--jwbO-accent);
+  color: #ffffff;
+  white-space: nowrap;
+}
+
+.jwbO-pill--done {
+  background: #16a34a;
+}
+
+/* ===== Timeline ===== */
+.jwbO-timeline {
+  display: flex;
+  margin-bottom: 12px;
+}
+
+.jwbO-step {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
+}
+
+.jwbO-step:last-child {
+  flex: 0 0 auto;
+}
+
+.jwbO-track {
+  display: flex;
+  align-items: center;
+}
+
+.jwbO-dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid #e5e7eb;
+  background: #ffffff;
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.jwbO-dot--done {
+  background: var(--jwbO-accent);
+  border-color: var(--jwbO-accent);
+}
+
+.jwbO-line {
+  flex: 1;
+  height: 2px;
+  background: #e5e7eb;
+  margin: 0 3px;
+  min-width: 14px;
+}
+
+.jwbO-line--done {
+  background: var(--jwbO-accent);
+}
+
+.jwbO-stepLabel {
+  font-size: 10px;
+  font-weight: 600;
+  color: #9ca3af;
+}
+
+.jwbO-stepLabel--done {
+  color: #111827;
+}
+
+/* ===== Meta ===== */
+.jwbO-meta {
+  font-size: 12px;
+  color: #6b7280;
+  margin: 0 0 4px;
+}
+
+.jwbO-items {
+  font-size: 12px;
+  color: #6b7280;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ===== Tracking footer ===== */
+.jwbO-tracking {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+}
+
+.jwbO-trackingInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.jwbO-carrier {
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.jwbO-trackingNo {
+  font-size: 11px;
+  color: #6b7280;
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.jwbO-trackBtn {
+  flex-shrink: 0;
+  background: var(--jwbO-accent);
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 9px 14px;
+  border-radius: 10px;
+  text-decoration: none;
+  transition: opacity 0.15s ease;
+}
+
+.jwbO-trackBtn:hover {
+  opacity: 0.85;
+}

package/src/Chatbot/components/Messages/OrderCard.tsx

@@ -0,0 +1,120 @@
+import type { FC } from 'react';
+import './OrderCard.css';
+import { useTranslation } from 'react-i18next';
+
+export interface OrderStatusData {
+  order: string;
+  placed?: string;
+  payment?: string;
+  fulfillment?: string;
+  shipment_status?: string;
+  items?: string[];
+  tracking_company?: string | null;
+  tracking_number?: string | null;
+  tracking_url?: string | null;
+}
+
+interface Props {
+  data: OrderStatusData;
+  colorCode?: string;
+}
+
+const STEP_KEYS = ['order.stepPlaced', 'order.stepPaid', 'order.stepShipped', 'order.stepDelivered'] as const;
+
+const OrderCard: FC<Props> = ({ data, colorCode = '#111111' }) => {
+  const { t } = useTranslation();
+  const payment = (data.payment || '').toUpperCase();
+  const fulfillment = (data.fulfillment || '').toUpperCase();
+  const shipment = (data.shipment_status || '').toUpperCase();
+
+  const paid = payment.includes('PAID') || payment.includes('REFUND');
+  const shipped =
+    shipment !== '' ||
+    fulfillment === 'FULFILLED' ||
+    fulfillment === 'PARTIALLY_FULFILLED';
+  const delivered = shipment === 'DELIVERED';
+
+  const doneCount = delivered ? 4 : shipped ? 3 : paid ? 2 : 1;
+
+  const stageLabel = delivered
+    ? t('order.delivered')
+    : shipped
+    ? t('order.onItsWay')
+    : paid
+    ? t('order.preparing')
+    : t('order.awaitingPayment');
+
+  return (
+    <div
+      className="jwbO-card"
+      style={{ '--jwbO-accent': colorCode } as React.CSSProperties}
+    >
+      <div className="jwbO-head">
+        <div>
+          <span className="jwbO-label">{t('order.order')}</span>
+          <span className="jwbO-number">{data.order}</span>
+        </div>
+        <span className={`jwbO-pill ${delivered ? 'jwbO-pill--done' : ''}`}>
+          {stageLabel}
+        </span>
+      </div>
+
+      <div className="jwbO-timeline" role="list" aria-label={t('order.progress')}>
+        {STEP_KEYS.map((step, i) => {
+          const done = i < doneCount;
+          const isLast = i === STEP_KEYS.length - 1;
+          return (
+            <div key={step} className="jwbO-step" role="listitem">
+              <div className="jwbO-track">
+                <span className={`jwbO-dot ${done ? 'jwbO-dot--done' : ''}`}>
+                  {done ? '✓' : ''}
+                </span>
+                {!isLast && (
+                  <span
+                    className={`jwbO-line ${i < doneCount - 1 ? 'jwbO-line--done' : ''}`}
+                  />
+                )}
+              </div>
+              <span className={`jwbO-stepLabel ${done ? 'jwbO-stepLabel--done' : ''}`}>
+                {t(step)}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      {data.placed && <p className="jwbO-meta">{t('order.placedOn', { date: data.placed })}</p>}
+
+      {data.items && data.items.length > 0 && (
+        <p className="jwbO-items" title={data.items.join(', ')}>
+          {data.items.join(', ')}
+        </p>
+      )}
+
+      {(data.tracking_company || data.tracking_number || data.tracking_url) && (
+        <div className="jwbO-tracking">
+          <div className="jwbO-trackingInfo">
+            {data.tracking_company && (
+              <span className="jwbO-carrier">{data.tracking_company}</span>
+            )}
+            {data.tracking_number && (
+              <span className="jwbO-trackingNo">{data.tracking_number}</span>
+            )}
+          </div>
+          {data.tracking_url && (
+            <a
+              href={data.tracking_url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="jwbO-trackBtn"
+            >
+              {t('order.trackPackage')}
+            </a>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OrderCard;

package/src/Chatbot/components/Messages/ProductCard.css

@@ -113,7 +113,7 @@
   }
   
   .increment {
-    background-color: #7f28f8;
+    background-color: #111111;
     color: white;
   }