shopify-chatbot-widget 0.7.9 → 0.8.0

package/src/Chatbot/components/Messages/Carousel/TryOn.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { Button, Spin } from 'antd';
+import { LoadingOutlined, CloudUploadOutlined } from '@ant-design/icons';
+import config from '../../../../hooks/config';
+
+interface TryOnProps {
+  productImage: string; // product variant image URL
+}
+
+const TryOnBox: React.FC<TryOnProps> = ({ productImage }) => {
+  const [userImage, setUserImage] = useState<string | null>(null);
+  const [resultImage, setResultImage] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // Call your Django Ark API
+  const sendToArk = async (file: File) => {
+    setLoading(true);
+    setResultImage(null);
+
+    const reader = new FileReader();
+    reader.onload = async () => {
+      const base64UserImage = reader.result as string;
+
+      try {
+        const response = await fetch(`${config.apiUrl}ark-tryon/`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            userImageUrl: base64UserImage, // can also be a hosted URL
+            productImageUrl: productImage, // product image URL
+          }),
+        });
+
+        const data = await response.json();
+
+        if (data.resultImage) {
+          setResultImage(data.resultImage); // base64 string or URL from backend
+        } else {
+          console.error('Ark API error:', data);
+        }
+      } catch (err) {
+        console.error('Error calling Ark API:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setUserImage(URL.createObjectURL(e.target.files[0]));
+      sendToArk(e.target.files[0]);
+    }
+  };
+
+  return (
+    <div className="mt-4 border rounded-lg p-4 bg-gray-50">
+      {/* Upload prompt */}
+      {!userImage && !resultImage && !loading && (
+        <label className="flex flex-col items-center justify-center border-2 border-dashed border-gray-400 rounded-lg w-full h-40 cursor-pointer hover:bg-gray-100 transition">
+          <CloudUploadOutlined style={{ fontSize: 28, marginBottom: 8 }} />
+          <span className="text-gray-500">Click or Drop your photo here</span>
+          <input
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={handleFileChange}
+          />
+        </label>
+      )}
+
+      {/* Loader */}
+      {loading && (
+        <div className="flex flex-col items-center justify-center h-40">
+          <Spin indicator={<LoadingOutlined style={{ fontSize: 32 }} spin />} />
+          <p className="mt-2 text-gray-600">Generating your try-on...</p>
+        </div>
+      )}
+
+      {/* Result Preview */}
+      {!loading && resultImage && (
+        <div className="flex flex-col items-center">
+          <p className="mb-2 text-sm font-medium">✨ Try-On Result</p>
+          <img
+            src={resultImage}
+            alt="Result"
+            className="max-h-64 object-contain rounded-md border"
+          />
+
+          <Button
+          style={{margin:'4px'}}
+            type="default"
+            className="mt-3"
+            onClick={() => {
+              setUserImage(null);
+              setResultImage(null);
+            }}
+          >
+            Try Another
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TryOnBox;

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

@@ -0,0 +1,151 @@
+import { useState, useRef, useEffect } from 'react';
+import type { CartItem } from '../../../hooks/useCart';
+import { ShoppingCartOutlined, CloseOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import './CartWidget.css'; // import the encapsulated styles
+import config from '../../../hooks/config';
+
+interface Props {
+  items: CartItem[];
+  colorCode: string;
+  loading: boolean;
+  onRefresh: () => void;
+  onRemove: (variantId: string, qty: number) => void;
+  sendMessage: (message: string) => Promise<void>;
+  sessionId: string;
+}
+
+export default function CartWidget({
+  items,
+  loading,
+  colorCode,
+  sessionId,
+  onRefresh,
+  onRemove,
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [isLoading,setIsLoading]=useState(false)
+
+  const checkOut = async () => {
+  
+    setIsLoading(true);
+    try {
+      const response = await fetch(`${config.apiUrl}checkout/shopify`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          sessionId,
+          company_username: localStorage.getItem('company_username'),
+        }),
+      });
+  
+      if (!response.ok) throw new Error('Failed to initiate checkout.');
+  
+      const data = await response.json();
+  
+      if (data?.checkoutUrl) {
+       
+        window.parent?.postMessage(
+          { type: 'JAWEB_CHAT', action: 'navigate', target: '_blank', url: data.checkoutUrl },
+          '*'
+        );
+        
+
+
+      } else {
+        alert('No checkout URL returned.');
+      }
+    } catch (err) {
+
+      console.error('Checkout error:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const totalCount = items.reduce((sum, i) => sum + i.quantity, 0);
+
+  return (
+    <div className="jawebchatbotcss-cart-widget" ref={containerRef}>
+      <button
+        onClick={() => setOpen(o => !o)}
+        className="jawebchatbotcss-cart-button"
+      >
+        <ShoppingCartOutlined className="jawebchatbotcss-cart-icon" />
+        <span className="jawebchatbotcss-cart-label">Cart ({totalCount})</span>
+      </button>
+
+      {open && (
+        <div className="jawebchatbotcss-cart-dropdown">
+          <div className="jawebchatbotcss-cart-header">
+            <span className="jawebchatbotcss-cart-title">Your Cart</span>
+            <button
+              onClick={onRefresh}
+              disabled={loading}
+              className="jawebchatbotcss-refresh-button"
+            >
+              {loading ? 'Refreshing…' : 'Refresh'}
+            </button>
+          </div>
+
+          {items.length === 0 ? (
+            <div className="jawebchatbotcss-cart-empty">
+              Your cart is empty.
+            </div>
+          ) : (
+            <ul className="jawebchatbotcss-cart-list">
+              {items.map(i => (
+                <li key={i.variantId} className="jawebchatbotcss-cart-item">
+                  <span className="jawebchatbotcss-item-name">{i.name}</span>
+                  <div className="jawebchatbotcss-item-controls">
+                    <span className="jawebchatbotcss-item-qty">×{i.quantity}</span>
+                    <CloseOutlined
+                      onClick={() => onRemove(i.variantId, i.quantity)}
+                      className="jawebchatbotcss-remove-icon"
+                    />
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {items.length > 0 && (
+            <div className="jawebchatbotcss-cart-footer">
+              <Button
+                type="primary"
+                style={{ backgroundColor: colorCode }}
+                block
+                disabled={totalCount === 0}
+                loading={isLoading}
+                onClick={() => {
+                  checkOut()
+                  // Define `checkOut()` or pass it via props
+                }}
+              >
+                Checkout ({totalCount})
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+
+type MessagePart = {
+  type: string;
+  text?: string;
+  image_url?: {
+    url?: string;
+  };
+};
+
+type ChatImageProps = {
+  message: MessagePart[] & { isBusiness?: boolean };
+
+};
+
+const ChatImage: React.FC<ChatImageProps> = ({ message }) => {
+  const imgPart = message.find(part => part.type === 'image_url')?.image_url?.url;
+  const isBusiness = (message as any)?.isBusiness;
+
+
+  return (
+    <div>
+    <div>
+      {imgPart && (
+        <div className="mb-2 bg-transparent text-white ">
+          <img
+            src={imgPart}
+            alt="Chat image"
+            style={{ width: 200 }}
+            className={`rounded-md bg-transparent mt-2 max-w-xs ${
+              isBusiness ? 'border border-gray-300 shadow-sm' : ''
+            }`}
+          />
+        </div>
+      )}
+
+     
+    </div>
+
+</div>
+
+
+  );
+};
+
+export default ChatImage;

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

@@ -0,0 +1,74 @@
+import React from 'react';
+
+type MessagePart = {
+  type: string;
+  text?: string;
+  image_url?: {
+    url?: string;
+  };
+};
+
+type ChatImageProps = {
+  message: MessagePart[] & { isBusiness?: boolean };
+  colorCode:string;
+};
+
+const ChatImageText: React.FC<ChatImageProps> = ({ message ,colorCode}) => {
+  const textPart = message.find(part => part.type === 'text')?.text;
+
+
+  const formatTextWithLinks = (text: string): React.ReactNode[] => {
+    const urlRegex = /(https?:\/\/[^\s]+)/g;
+    return text.split(urlRegex).map((part, i) =>
+      urlRegex.test(part) ? (
+        <a
+          key={i}
+          href={part.trim()}
+          style={{ color: colorCode }}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline break-words"
+        >
+          {part}
+        </a>
+      ) : (
+        <span key={i}>{part}</span>
+      )
+    );
+  };
+
+  return (
+    <>
+     {textPart && (
+     <div 
+    style={{
+      color:'white',
+      border:1,
+      backgroundColor:colorCode,
+      paddingTop:10,
+      paddingBottom:10,
+      paddingInline:14,
+      maxWidth:'85%',
+      lineHeight:1.4,
+      borderRadius:'16px'
+      ,wordBreak:'break-word'
+      
+    }}
+    >
+   
+          <p >
+          {formatTextWithLinks(textPart)}
+          </p>
+     
+    </div>
+       )}
+    </>
+   
+   
+
+
+
+  );
+};
+
+export default ChatImageText;

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

@@ -0,0 +1,72 @@
+import React from 'react';
+
+type MessagePart = {
+  type: string;
+  text?: string;
+  image_url?: {
+    url?: string;
+  };
+};
+
+type ChatImageProps = {
+  message: MessagePart[] & { isBusiness?: boolean };
+};
+
+const ChatImageTextAssist: React.FC<ChatImageProps> = ({ message }) => {
+  const textPart = message.find(part => part.type === 'text')?.text;
+
+
+  const formatTextWithLinks = (text: string): React.ReactNode[] => {
+    const urlRegex = /(https?:\/\/[^\s]+)/g;
+    return text.split(urlRegex).map((part, i) =>
+      urlRegex.test(part) ? (
+        <a
+          key={i}
+          href={part.trim()}
+          style={{ color: 'black' }}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline break-words"
+        >
+          {part}
+        </a>
+      ) : (
+        <span key={i}>{part}</span>
+      )
+    );
+  };
+
+  return (
+    <>
+     {textPart && (
+     <div 
+    style={{
+      color:'black',
+      border:1,
+      paddingTop:10,
+      paddingBottom:10,
+      paddingInline:14,
+      maxWidth:'85%',
+      lineHeight:1.4,
+      borderRadius:'16px'
+      ,wordBreak:'break-word',
+      backgroundColor:'#f0f0f0'
+    }}
+    >
+   
+          <p >
+          {formatTextWithLinks(textPart)}
+          </p>
+     
+    </div>
+       )}
+    </>
+   
+   
+
+
+
+  );
+};
+
+export default ChatImageTextAssist;

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

@@ -0,0 +1,31 @@
+.chat-image-wrapper {
+    padding: 4px 12px;
+
+  }
+  
+  .box-loader {
+    width: 6px;
+    height: 10px;
+    border-radius: 3px;
+    animation: pulseBox 0.8s infinite alternate;
+  }
+  
+  .box-loader:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  
+  .box-loader:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+  
+  @keyframes pulseBox {
+    from {
+      transform: scale(1);
+      opacity: 0.6;
+    }
+    to {
+      transform: scale(1.3);
+      opacity: 1;
+    }
+  }
+