@schandlergarcia/sf-web-components 2.3.16 → 2.4.0

package/brands/engine/app/api/graphqlClient.ts

@@ -1,25 +0,0 @@
-/**
- * Thin GraphQL client: createDataSDK + data.graphql with centralized error handling.
- * Use with gql-tagged queries and generated operation types for type-safe calls.
- */
-import { createDataSDK } from '@salesforce/sdk-data';
-
-export async function executeGraphQL<TData, TVariables>(
-  query: string,
-  variables?: TVariables
-): Promise<TData> {
-  const data = await createDataSDK();
-  // SDK types graphql() first param as string; at runtime it may accept gql DocumentNode too
-  const response = await data.graphql?.<TData, TVariables>(query, variables);
-
-  if (!response) {
-    throw new Error('GraphQL response is undefined');
-  }
-
-  if (response?.errors?.length) {
-    const msg = response.errors.map(e => e.message).join('; ');
-    throw new Error(`GraphQL Error: ${msg}`);
-  }
-
-  return response.data;
-}

package/brands/engine/app/api/partnerQueries.ts

@@ -1,212 +0,0 @@
-import { gql } from "@salesforce/sdk-data";
-
-/**
- * Partner Hub GraphQL Queries
- *
- * These queries fetch partner dashboard data from Salesforce using UI API GraphQL.
- * All custom fields use @optional to handle null values gracefully.
- */
-
-// Get current user
-export const GET_CURRENT_USER = gql`
-  query GetCurrentUser {
-    uiapi {
-      currentUser {
-        Id
-        Name @optional { value }
-        Email @optional { value }
-      }
-    }
-  }
-`;
-
-// Get partner Account with custom fields
-export const GET_PARTNER_ACCOUNT = gql`
-  query GetPartnerAccount($accountId: ID!) {
-    uiapi {
-      query {
-        Account(where: { Id: { eq: $accountId } }, first: 1) {
-          edges {
-            node {
-              Id
-              Name @optional { value }
-              Type @optional { value }
-              Partner_Tier__c @optional { value }
-              Commission_Rate__c @optional { value }
-              Partner_Status__c @optional { value }
-              Total_Properties__c @optional { value }
-              Total_Reservations__c @optional { value }
-              Total_Revenue__c @optional { value }
-              Contract_Start_Date__c @optional { value }
-              Contract_End_Date__c @optional { value }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
-// Find first Partner account (when no partnerId provided)
-export const FIND_PARTNER_ACCOUNT = gql`
-  query FindPartnerAccount {
-    uiapi {
-      query {
-        Account(where: { Type: { eq: "Partner" } }, first: 1) {
-          edges {
-            node {
-              Id
-              Name @optional { value }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
-// Get contracts for partner
-export const GET_CONTRACTS = gql`
-  query GetContracts($accountId: ID!) {
-    uiapi {
-      query {
-        Contract__c(where: { Hotel_Partner__c: { eq: $accountId } }, first: 50) {
-          edges {
-            node {
-              Id
-              Name @optional { value }
-              Contract_Status__c @optional { value }
-              Attrition_Calculation_Method__c @optional { value }
-              Attrition_Threshold_Percentage__c @optional { value }
-              Resale_Credit_Policy__c @optional { value }
-              Resale_Credit_Percentage__c @optional { value }
-              Commission_Rate__c @optional { value }
-              Start_Date__c @optional { value }
-              End_Date__c @optional { value }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
-// Get invoices for partner
-export const GET_INVOICES = gql`
-  query GetInvoices($accountId: ID!) {
-    uiapi {
-      query {
-        Invoice__c(where: { Hotel_Partner__c: { eq: $accountId } }, first: 50, orderBy: { Invoice_Date__c: { order: DESC } }) {
-          edges {
-            node {
-              Id
-              Name @optional { value }
-              Invoice_Status__c @optional { value }
-              Invoice_Date__c @optional { value }
-              Due_Date__c @optional { value }
-              Invoice_Period_Start__c @optional { value }
-              Invoice_Period_End__c @optional { value }
-              Invoice_Total__c @optional { value }
-              Total_Commission__c @optional { value }
-              Total_Attrition_Penalties__c @optional { value }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
-// Get attrition penalties for partner (via Contract relationship)
-export const GET_PENALTIES = gql`
-  query GetPenalties($accountId: ID!) {
-    uiapi {
-      query {
-        Attrition_Penalty__c(
-          where: {
-            Contract__r: { Hotel_Partner__c: { eq: $accountId } }
-          }
-          first: 50
-        ) {
-          edges {
-            node {
-              Id
-              Name @optional { value }
-              Penalty_Status__c @optional { value }
-              Original_Room_Block__c @optional { value }
-              Actual_Rooms_Used__c @optional { value }
-              Unused_Rooms__c @optional { value }
-              Room_Rate__c @optional { value }
-              Number_of_Nights__c @optional { value }
-              Rooms_Resold__c @optional { value }
-              Penalty_Amount_Calculated__c @optional { value }
-              Resale_Credit_Applied__c @optional { value }
-              Final_Penalty_Amount__c @optional { value }
-              Penalty_Date__c @optional { value }
-              Contract__c @optional { value }
-              Property__r @optional {
-                Name @optional { value }
-                Property_Name__c @optional { value }
-              }
-              Customer_Company__r @optional {
-                Name @optional { value }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
-// Get disputes (Cases with Partner_Dispute RecordType)
-export const GET_DISPUTES = gql`
-  query GetDisputes($accountId: ID!) {
-    uiapi {
-      query {
-        Case(where: { AccountId: { eq: $accountId }, RecordType: { DeveloperName: { eq: "Partner_Dispute" } } }, first: 50) {
-          edges {
-            node {
-              Id
-              CaseNumber @optional { value }
-              Subject @optional { value }
-              Status @optional { value }
-              Priority @optional { value }
-              Dispute_Type__c @optional { value }
-              Disputed_Amount__c @optional { value }
-              Agent_Handled__c @optional { value }
-              Escalation_Reason__c @optional { value }
-              CreatedDate @optional { value }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
-// Get properties for partner
-export const GET_PROPERTIES = gql`
-  query GetProperties($accountId: ID!) {
-    uiapi {
-      query {
-        Property__c(where: { Hotel_Partner__c: { eq: $accountId } }, first: 50) {
-          edges {
-            node {
-              Id
-              Name @optional { value }
-              Property_Name__c @optional { value }
-              Property_Type__c @optional { value }
-              City__c @optional { value }
-              State__c @optional { value }
-              Country__c @optional { value }
-              Star_Rating__c @optional { value }
-              Total_Rooms__c @optional { value }
-              Active__c @optional { value }
-            }
-          }
-        }
-      }
-    }
-  }
-`;

package/brands/engine/app/appLayout.tsx

@@ -1,5 +0,0 @@
-import { Outlet } from "react-router";
-
-export default function AppLayout() {
-	return <Outlet />;
-}

package/brands/engine/app/components/AgentPanel.tsx

@@ -1,402 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
-import { createPortal } from "react-dom";
-import { SparklesIcon } from "@heroicons/react/24/solid";
-import {
-  PaperAirplaneIcon,
-  ChevronDownIcon,
-} from "@heroicons/react/24/outline";
-
-interface Message {
-  id: string;
-  role: "user" | "agent";
-  text: string;
-  timestamp: string;
-}
-
-interface ScriptStep {
-  role: "user" | "agent";
-  text: string;
-}
-
-const SCRIPT: ScriptStep[] = [
-  // --- Auto-play greeting ---
-  {
-    role: "agent",
-    text: "Hi Jamie! 👋 I'm your Partner Hub assistant. How can I help you today?",
-  },
-
-  // --- Prompt 1: Ask about the canceled booking ---
-  {
-    role: "user",
-    text: "I just got an alert that a block booking was canceled at our Austin Convention Center for next week. What happened?",
-  },
-  {
-    role: "agent",
-    text: "Let me pull up that reservation for you...",
-  },
-  {
-    role: "agent",
-    text: "🔴 CANCELED BOOKING\n\n🏨 Summit Austin Convention Center\n🏢 Client: TechCorp Inc.\n\n📋 Details:\n• Original block: 40 rooms\n• Dates: May 19 – 21 (3 nights)\n• Room rate: $200/night\n• Lost revenue: $24,000\n\n📅 Canceled: Apr 11, 2026\n⚠️ Status: Within penalty window",
-  },
-  {
-    role: "agent",
-    text: "TechCorp canceled their 40-room block for May 19–21. The reason given was that their annual conference is moving to a virtual format this year. This was within the attrition penalty window, so a penalty may apply — but that still leaves 40 rooms open for next week.",
-  },
-
-  // --- Prompt 2: What can be done ---
-  {
-    role: "user",
-    text: "That's a lot of empty rooms. Is there anything we can do to fill them on short notice?",
-  },
-  {
-    role: "agent",
-    text: "Actually, yes — I have an idea. Let me put together an option for you.",
-  },
-  {
-    role: "agent",
-    text: "⚡ ENGINE NETWORK PROMOTION\nFill your open rooms through Engine's network\n\n━━━━━━━━━━━━━━━━━━━━━━━━━\nSummit Austin Convention Center\n40 rooms · May 19–21 · 3 nights\n━━━━━━━━━━━━━━━━━━━━━━━━━\n\n💰 YOUR RATE\n$159/night (20% off rack rate)\n\n📡 ENGINE PROMOTES TO\n2,400+ corporate travel managers\n\n📉 COMMISSION\n12% standard → 8% promotional\nYou save $1,526 vs. standard bookings\n\n━━━━━━━━━━━━━━━━━━━━━━━━━\n📈 PROJECTED OUTCOME\n• Est. fill: 28 rooms (70%)\n• Revenue: $13,356\n• Net after commission: $12,287\n━━━━━━━━━━━━━━━━━━━━━━━━━",
-  },
-  {
-    role: "agent",
-    text: "Here's the play: we run a targeted promotion across Engine's corporate travel network — 2,400+ travel managers get notified about discounted rates at Summit Austin for May 19–21.\n\nWe'd list the rooms at $159/night, and your commission drops from 12% to 8% for promo bookings. On a projected 70% fill, that's $12,287 net — versus $0 if the rooms sit empty.\n\nWant to launch it?",
-  },
-
-  // --- Prompt 3: Accept the offer ---
-  {
-    role: "user",
-    text: "That makes sense — empty rooms earn nothing. Let's launch it.",
-  },
-  {
-    role: "agent",
-    text: "Launching your promotion now...",
-  },
-  {
-    role: "agent",
-    text: "✅ PROMOTION LIVE\n\n🆔 PROMO-SUM-0519\n🏨 Summit Austin Convention Center\n📅 May 19–21 (3 nights)\n💰 Rate: $159/night\n📉 Commission: 8% (promotional)\n📡 Distribution: Engine corporate travel network\n\nYour promotion is live and going out to 2,400+ travel managers now. I'll send you a fill-rate update in 48 hours.",
-  },
-];
-
-function typingDelay(text: string): number {
-  const base = 900;
-  const perChar = 10;
-  const jitter = Math.random() * 500;
-  return Math.min(base + text.length * perChar + jitter, 5500);
-}
-
-function now() {
-  return new Date().toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
-}
-
-function TypingIndicator() {
-  return (
-    <div className="flex items-center gap-1 px-4 py-1.5">
-      <div className="flex items-end gap-3">
-        <div className="flex-shrink-0 h-7 w-7 rounded-full bg-[var(--color-dash-dark)] flex items-center justify-center">
-          <SparklesIcon className="h-3.5 w-3.5 text-white" />
-        </div>
-        <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/20 rounded-2xl rounded-bl-md px-4 py-3">
-          <div className="flex items-center gap-1.5">
-            <span className="h-2 w-2 rounded-full bg-[var(--color-dash-label)] animate-bounce" style={{ animationDelay: "0ms" }} />
-            <span className="h-2 w-2 rounded-full bg-[var(--color-dash-label)] animate-bounce" style={{ animationDelay: "150ms" }} />
-            <span className="h-2 w-2 rounded-full bg-[var(--color-dash-label)] animate-bounce" style={{ animationDelay: "300ms" }} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function AgentMessage({ text, timestamp }: { text: string; timestamp: string }) {
-  return (
-    <div className="px-4 py-1.5">
-      <div className="flex items-end gap-3">
-        <div className="flex-shrink-0 h-7 w-7 rounded-full bg-[var(--color-dash-dark)] flex items-center justify-center">
-          <SparklesIcon className="h-3.5 w-3.5 text-white" />
-        </div>
-        <div className="max-w-[80%]">
-          <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/20 rounded-2xl rounded-bl-md px-4 py-3 border border-[var(--color-dash-border)]/30 dark:border-[var(--color-dash-muted)]/30">
-            <p className="text-sm text-[var(--color-dash-text)] dark:text-white leading-relaxed whitespace-pre-wrap">
-              {text}
-            </p>
-          </div>
-          <p className="text-[10px] text-[var(--color-dash-label)] mt-1 ml-1">{timestamp}</p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function UserMessage({ text, timestamp }: { text: string; timestamp: string }) {
-  return (
-    <div className="px-4 py-1.5">
-      <div className="flex items-end justify-end gap-3">
-        <div className="max-w-[80%]">
-          <div className="bg-[var(--color-dash-accent)] rounded-2xl rounded-br-md px-4 py-3">
-            <p className="text-sm text-white leading-relaxed">{text}</p>
-          </div>
-          <p className="text-[10px] text-[var(--color-dash-label)] mt-1 text-right mr-1">{timestamp}</p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default function AgentPanel() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [isTyping, setIsTyping] = useState(false);
-  const [inputValue, setInputValue] = useState("");
-  const [scriptIndex, setScriptIndex] = useState(0);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const hasStartedRef = useRef(false);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, isTyping]);
-
-  useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => inputRef.current?.focus(), 300);
-    }
-  }, [isOpen]);
-
-  // Auto-play the first agent message when panel opens
-  useEffect(() => {
-    if (isOpen && !hasStartedRef.current && scriptIndex === 0) {
-      hasStartedRef.current = true;
-      playNextStep();
-    }
-  }, [isOpen]);
-
-  const playNextStep = useCallback(async () => {
-    if (scriptIndex >= SCRIPT.length || isAnimating) return;
-
-    const step = SCRIPT[scriptIndex];
-    setIsAnimating(true);
-
-    if (step.role === "agent") {
-      setIsTyping(true);
-      await delay(typingDelay(step.text));
-      setIsTyping(false);
-    }
-
-    const msg: Message = {
-      id: `msg-${Date.now()}`,
-      role: step.role,
-      text: step.text,
-      timestamp: now(),
-    };
-    setMessages((prev) => [...prev, msg]);
-    setScriptIndex((prev) => prev + 1);
-    setIsAnimating(false);
-
-    // If we just played a user message, auto-play all following agent messages
-    const nextIndex = scriptIndex + 1;
-    if (step.role === "user" && nextIndex < SCRIPT.length && SCRIPT[nextIndex].role === "agent") {
-      await delay(400);
-      await playAgentChain(nextIndex);
-    }
-  }, [scriptIndex, isAnimating]);
-
-  async function playAgentChain(startIndex: number) {
-    let idx = startIndex;
-    setIsAnimating(true);
-    while (idx < SCRIPT.length && SCRIPT[idx].role === "agent") {
-      const step = SCRIPT[idx];
-      setIsTyping(true);
-      await delay(typingDelay(step.text));
-      setIsTyping(false);
-
-      const msg: Message = {
-        id: `msg-${Date.now()}-${idx}`,
-        role: "agent",
-        text: step.text,
-        timestamp: now(),
-      };
-      setMessages((prev) => [...prev, msg]);
-      setScriptIndex(idx + 1);
-      idx++;
-      if (idx < SCRIPT.length && SCRIPT[idx].role === "agent") {
-        await delay(500);
-      }
-    }
-    setIsAnimating(false);
-  }
-
-  // Right arrow key stages the next user message into the input
-  useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      if (e.key === "ArrowRight" && isOpen && !isAnimating && scriptIndex < SCRIPT.length) {
-        e.preventDefault();
-        const next = SCRIPT[scriptIndex];
-        if (next.role === "user") {
-          setInputValue(next.text);
-          inputRef.current?.focus();
-        }
-      }
-    }
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [isOpen, scriptIndex, isAnimating]);
-
-  function handleSend() {
-    const text = inputValue.trim();
-    if (!text) return;
-    setInputValue("");
-
-    // Check if this matches the next scripted user message
-    if (scriptIndex < SCRIPT.length && SCRIPT[scriptIndex].role === "user" && text === SCRIPT[scriptIndex].text) {
-      playNextStep();
-      return;
-    }
-
-    const userMsg: Message = {
-      id: `u-${Date.now()}`,
-      role: "user",
-      text,
-      timestamp: now(),
-    };
-    setMessages((prev) => [...prev, userMsg]);
-
-    setIsTyping(true);
-    setTimeout(() => {
-      setIsTyping(false);
-      const agentMsg: Message = {
-        id: `a-${Date.now()}`,
-        role: "agent",
-        text: "I'm looking into that for you — one moment please.",
-        timestamp: now(),
-      };
-      setMessages((prev) => [...prev, agentMsg]);
-    }, 1500);
-  }
-
-  const scriptDone = scriptIndex >= SCRIPT.length;
-
-  const panel = isOpen
-    ? createPortal(
-        <>
-          <div
-            className="fixed inset-0 z-[9998] bg-black/20 backdrop-blur-sm lg:hidden"
-            onClick={() => setIsOpen(false)}
-          />
-          <div
-            className="fixed z-[9999] bottom-6 right-6 w-[380px] h-[520px] flex flex-col rounded-2xl shadow-2xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 overflow-hidden"
-            style={{
-              animation: "agent-panel-in 0.25s cubic-bezier(0.16, 1, 0.3, 1)",
-            }}
-          >
-            {/* Header */}
-            <div className="bg-[var(--color-dash-dark)] px-5 py-4 flex items-center justify-between flex-shrink-0">
-              <div className="flex items-center gap-3">
-                <div className="h-8 w-8 rounded-full bg-white/10 flex items-center justify-center">
-                  <SparklesIcon className="h-4 w-4 text-white" />
-                </div>
-                <div>
-                  <h3 className="text-sm font-semibold text-white">
-                    Partner Hub Agent
-                  </h3>
-                  <p className="text-xs text-white/60">Agentforce · Online</p>
-                </div>
-              </div>
-              <button
-                onClick={() => setIsOpen(false)}
-                className="rounded-lg p-1.5 text-white/60 hover:text-white hover:bg-white/10 transition-colors"
-              >
-                <ChevronDownIcon className="h-5 w-5" />
-              </button>
-            </div>
-
-            {/* Messages */}
-            <div className="flex-1 overflow-y-auto bg-white dark:bg-[var(--color-dash-text)] py-4">
-              {messages.length === 0 && !isTyping && (
-                <div className="flex flex-col items-center justify-center h-full gap-3 px-6 text-center">
-                  <div className="h-12 w-12 rounded-full bg-[var(--color-dash-accent)]/10 flex items-center justify-center">
-                    <SparklesIcon className="h-6 w-6 text-[var(--color-dash-accent)]" />
-                  </div>
-                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                    Eva is connecting...
-                  </p>
-                </div>
-              )}
-              {messages.map((msg) =>
-                msg.role === "agent" ? (
-                  <AgentMessage key={msg.id} text={msg.text} timestamp={msg.timestamp} />
-                ) : (
-                  <UserMessage key={msg.id} text={msg.text} timestamp={msg.timestamp} />
-                )
-              )}
-              {isTyping && <TypingIndicator />}
-              <div ref={messagesEndRef} />
-            </div>
-
-            {/* Input */}
-            <div className="flex-shrink-0 bg-white dark:bg-[var(--color-dash-text)] border-t border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 px-4 py-3">
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  handleSend();
-                }}
-                className="flex items-center gap-2"
-              >
-                <input
-                  ref={inputRef}
-                  type="text"
-                  value={inputValue}
-                  onChange={(e) => setInputValue(e.target.value)}
-                  placeholder="Type your message..."
-                  className="flex-1 bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl px-4 py-2.5 text-sm text-[var(--color-dash-text)] dark:text-white placeholder:text-[var(--color-dash-label)] focus:outline-none focus:ring-2 focus:ring-[var(--color-dash-accent)]/30 focus:border-[var(--color-dash-accent)] transition-all"
-                />
-                <button
-                  type="submit"
-                  disabled={!inputValue.trim()}
-                  className="flex-shrink-0 h-10 w-10 rounded-xl bg-[var(--color-dash-accent)] hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center transition-all"
-                >
-                  <PaperAirplaneIcon className="h-4 w-4 text-white" />
-                </button>
-              </form>
-              <p className="text-[10px] text-[var(--color-dash-label)] text-center mt-2">
-                Powered by Agentforce
-              </p>
-            </div>
-          </div>
-        </>,
-        document.body
-      )
-    : null;
-
-  return (
-    <>
-      {panel}
-
-      {!isOpen && (
-        <button
-          onClick={() => setIsOpen(true)}
-          className="fixed z-[9999] bottom-6 right-6 h-14 w-14 rounded-full bg-[var(--color-dash-dark)] hover:scale-110 shadow-xl hover:shadow-2xl flex items-center justify-center transition-all duration-200"
-          style={{
-            animation: "agent-bubble-in 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
-          }}
-        >
-          <SparklesIcon className="h-6 w-6 text-white" />
-        </button>
-      )}
-
-      <style>{`
-        @keyframes agent-panel-in {
-          from { opacity: 0; transform: translateY(20px) scale(0.95); }
-          to { opacity: 1; transform: translateY(0) scale(1); }
-        }
-        @keyframes agent-bubble-in {
-          from { opacity: 0; transform: scale(0.5); }
-          to { opacity: 1; transform: scale(1); }
-        }
-      `}</style>
-    </>
-  );
-}
-
-function delay(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}