@instockng/storefront-ui 1.0.50 → 1.0.52

package/src/components/PostPurchaseUpsell.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+/**
+ * PostPurchaseUpsell Component
+ *
+ * Displays recommended products after a successful checkout.
+ * Allows customers to add items to a new cart for a follow-up order.
+ */
+
+import { useState } from 'react';
+import { useGetOrderRecommendations } from '@instockng/api-client';
+import { formatCurrency, cn } from '../lib/utils';
+import { Button } from './ui/button';
+import { ShoppingCart, Loader2, Package, ExternalLink } from 'lucide-react';
+
+export interface PostPurchaseUpsellProps {
+  /** Order ID for fetching recommendations */
+  orderId: string;
+  /** User action token for order access */
+  token: string;
+  /** Number of recommendations to show */
+  limit?: number;
+  /** Custom class name */
+  className?: string;
+  /** Brand site URL for product links */
+  brandSiteUrl?: string;
+}
+
+export function PostPurchaseUpsell({
+  orderId,
+  token,
+  limit = 4,
+  className,
+  brandSiteUrl,
+}: PostPurchaseUpsellProps) {
+  const { data: recommendations, isLoading } = useGetOrderRecommendations(
+    orderId,
+    token,
+    limit
+  );
+  const [viewedProducts, setViewedProducts] = useState<Set<string>>(new Set());
+
+  // Don't render while loading
+  if (isLoading) {
+    return (
+      <div className="py-4">
+        <div className="flex items-center justify-center">
+          <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
+        </div>
+      </div>
+    );
+  }
+
+  // Don't render if no recommendations
+  if (!recommendations || recommendations.length === 0) {
+    return null;
+  }
+
+  const handleProductClick = (productId: string) => {
+    setViewedProducts(prev => new Set(prev).add(productId));
+  };
+
+  const getProductUrl = (slug: string) => {
+    if (brandSiteUrl) {
+      return `${brandSiteUrl}/product/${slug}`;
+    }
+    return `/product/${slug}`;
+  };
+
+  return (
+    <div className={cn('mt-4', className)}>
+      {/* Heading */}
+      <div className="text-center mb-4">
+        <h4 className="text-lg font-semibold text-gray-900">
+          You might also like
+        </h4>
+        <p className="text-sm text-gray-500 mt-1">
+          Check out these other great products
+        </p>
+      </div>
+
+      {/* Product Grid */}
+      <div className="grid grid-cols-2 gap-3">
+        {recommendations.map((product) => {
+          const firstVariant = product.variants[0];
+          if (!firstVariant) return null;
+
+          const isViewed = viewedProducts.has(product.id);
+          const productUrl = getProductUrl(product.slug);
+
+          return (
+            <a
+              key={product.id}
+              href={productUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() => handleProductClick(product.id)}
+              className={cn(
+                'group flex flex-col bg-white border border-gray-200 rounded-lg overflow-hidden transition-all duration-200 hover:shadow-md hover:border-accent-300',
+                isViewed && 'border-accent-200 bg-accent-50/30'
+              )}
+            >
+              {/* Product Image */}
+              <div className="relative aspect-square bg-gray-100">
+                {product.thumbnailUrl ? (
+                  <img
+                    src={product.thumbnailUrl}
+                    alt={product.name}
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center">
+                    <Package className="h-8 w-8 text-gray-300" />
+                  </div>
+                )}
+
+                {/* External link indicator */}
+                <div className="absolute top-2 right-2 bg-white/90 rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <ExternalLink className="h-3 w-3 text-gray-600" />
+                </div>
+              </div>
+
+              {/* Product Info */}
+              <div className="p-3 flex flex-col flex-1">
+                <h5 className="text-sm font-medium text-gray-900 line-clamp-2 leading-tight mb-1">
+                  {product.name}
+                </h5>
+                <p className="text-sm font-bold text-accent-600 mt-auto">
+                  {formatCurrency(firstVariant.price)}
+                </p>
+              </div>
+            </a>
+          );
+        })}
+      </div>
+
+      {/* Browse More CTA */}
+      {/* {brandSiteUrl && (
+        <div className="mt-4 text-center">
+          <a
+            href={brandSiteUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 text-sm text-accent-600 hover:text-accent-700 font-medium"
+          >
+            <ShoppingCart className="h-4 w-4" />
+            Browse all products
+            <ExternalLink className="h-3 w-3" />
+          </a>
+        </div>
+      )} */}
+    </div>
+  );
+}

package/src/components/ui/modal.tsx

@@ -108,7 +108,7 @@ export function Modal({
   const modalContent = (
     <div
       className={cn(
-        'fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4 bg-black/50 backdrop-blur-sm transition-opacity duration-200',
+        'fixed inset-0 z-50 flex items-center justify-center sm:p-4 bg-black/50 backdrop-blur-sm transition-opacity duration-200',
         isAnimating ? 'opacity-100' : 'opacity-0'
       )}
       onClick={handleOverlayClick}
@@ -116,7 +116,7 @@ export function Modal({
       <div
         ref={modalRef}
         className={cn(
-          'relative w-full bg-white rounded-xl shadow-xl flex flex-col max-h-[90vh] transition-all duration-200',
+          'relative w-full bg-white rounded-xl shadow-xl flex flex-col h-[100vh] sm:h-auto sm:max-h-[90vh] transition-all duration-200',
           isAnimating ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
           sizeClasses[size],
           className
@@ -131,7 +131,7 @@ export function Modal({
               {title && (
                 <h2
                   id="modal-title"
-                  className="text-xl font-semibold text-gray-900"
+                  className="text-md font-semibold text-gray-900"
                 >
                   {title}
                 </h2>