@instockng/storefront-ui 1.0.105 → 1.0.107

package/src/components/SearchAssistantTrigger.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchAssistantTrigger } from './SearchAssistantTrigger';
+
+const meta = {
+  title: 'Components/SearchAssistantTrigger',
+  component: SearchAssistantTrigger,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof SearchAssistantTrigger>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    searchQuery: 'toys for babies',
+    onAsk: (question) => console.log('Asked:', question),
+  },
+};
+
+export const CustomLabel: Story = {
+  args: {
+    searchQuery: 'maternity leggings',
+    onAsk: (question) => console.log('Asked:', question),
+    label: 'Ask AI about "maternity leggings"',
+  },
+};
+
+export const EmptyQuery: Story = {
+  args: {
+    onAsk: (question) => console.log('Asked:', question),
+  },
+};

package/src/components/SearchAssistantTrigger.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+/**
+ * SearchAssistantTrigger Component
+ *
+ * "Ask AI" button shown in search results (e.g., when search returns no results).
+ * Clicking opens the AssistantDrawer with the search query as the question.
+ */
+
+import { Sparkles } from 'lucide-react';
+import { Button } from './ui/button';
+import { cn } from '../lib/utils';
+
+export interface SearchAssistantTriggerProps {
+  /** The search query to pre-fill */
+  searchQuery?: string;
+  /** Callback to open the drawer with a question */
+  onAsk: (question: string) => void;
+  /** Custom class name */
+  className?: string;
+  /** Custom label */
+  label?: string;
+}
+
+export function SearchAssistantTrigger({
+  searchQuery = '',
+  onAsk,
+  className,
+  label = 'Ask AI',
+}: SearchAssistantTriggerProps) {
+  return (
+    <Button
+      variant="outline"
+      onClick={() => onAsk(searchQuery)}
+      className={cn('gap-2', className)}
+    >
+      <Sparkles className="h-4 w-4 text-orange-500" />
+      {label}
+    </Button>
+  );
+}

package/src/hooks/usePaystackPayment.ts

@@ -23,6 +23,7 @@ declare global {
 export interface PaystackConfig {
   key: string;
   email: string;
+  phone?: string;
   amount: number; // Amount in kobo (smallest currency unit)
   currency?: string;
   ref?: string;

package/src/index.ts

@@ -64,6 +64,16 @@ export type { DiscountCodeInputProps } from './components/DiscountCodeInput';
 export { Checkout } from './components/Checkout';
 export type { CheckoutProps, CheckoutFormData } from './components/Checkout';
 
+// AI Assistant components
+export { AssistantDrawer } from './components/AssistantDrawer';
+export type { AssistantDrawerProps } from './components/AssistantDrawer';
+
+export { ProductAssistantChips } from './components/ProductAssistantChips';
+export type { ProductAssistantChipsProps } from './components/ProductAssistantChips';
+
+export { SearchAssistantTrigger } from './components/SearchAssistantTrigger';
+export type { SearchAssistantTriggerProps } from './components/SearchAssistantTrigger';
+
 // Export UI primitives (for customization)
 export { Button } from './components/ui/button';
 export { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from './components/ui/card';