@instockng/storefront-ui 1.0.108 → 1.0.109

package/dist/index99.mjs

@@ -1,86 +1,90 @@
 'use client';
-import t from "./index89.mjs";
-import E from "./index100.mjs";
-function B(i) {
-  return t.isPlainObject(i) || t.isArray(i);
-}
-function h(i) {
-  return t.endsWith(i, "[]") ? i.slice(0, -2) : i;
-}
-function O(i, e, s) {
-  return i ? i.concat(e).map(function(o, d) {
-    return o = h(o), !s && d ? "[" + o + "]" : o;
-  }).join(s ? "." : "") : e;
-}
-function T(i) {
-  return t.isArray(i) && !i.some(B);
+import t from "./index95.mjs";
+import c from "./index106.mjs";
+import u from "./index159.mjs";
+import S from "./index105.mjs";
+import h from "./index160.mjs";
+import a from "./index161.mjs";
+import O from "./index100.mjs";
+function y(i, r, e) {
+  if (t.isString(i))
+    try {
+      return (r || JSON.parse)(i), t.trim(i);
+    } catch (n) {
+      if (n.name !== "SyntaxError")
+        throw n;
+    }
+  return (e || JSON.stringify)(i);
 }
-const S = t.toFlatObject(t, {}, null, function(e) {
-  return /^is[A-Z]/.test(e);
-});
-function W(i, e, s) {
-  if (!t.isObject(i))
-    throw new TypeError("target must be an object");
-  e = e || new FormData(), s = t.toFlatObject(s, {
-    metaTokens: !0,
-    dots: !1,
-    indexes: !1
-  }, !1, function(n, u) {
-    return !t.isUndefined(u[n]);
-  });
-  const p = s.metaTokens, o = s.visitor || j, d = s.dots, m = s.indexes, w = (s.Blob || typeof Blob < "u" && Blob) && t.isSpecCompliantForm(e);
-  if (!t.isFunction(o))
-    throw new TypeError("visitor must be a function");
-  function l(r) {
-    if (r === null) return "";
-    if (t.isDate(r))
-      return r.toISOString();
-    if (t.isBoolean(r))
-      return r.toString();
-    if (!w && t.isBlob(r))
-      throw new E("Blob is not supported. Use a Buffer instead.");
-    return t.isArrayBuffer(r) || t.isTypedArray(r) ? w && typeof Blob == "function" ? new Blob([r]) : Buffer.from(r) : r;
-  }
-  function j(r, n, u) {
-    let f = r;
-    if (r && !u && typeof r == "object") {
-      if (t.endsWith(n, "{}"))
-        n = p ? n : n.slice(0, -2), r = JSON.stringify(r);
-      else if (t.isArray(r) && T(r) || (t.isFileList(r) || t.endsWith(n, "[]")) && (f = t.toArray(r)))
-        return n = h(n), f.forEach(function(b, x) {
-          !(t.isUndefined(b) || b === null) && e.append(
-            // eslint-disable-next-line no-nested-ternary
-            m === !0 ? O([n], x, d) : m === null ? n : n + "[]",
-            l(b)
-          );
-        }), !1;
+const l = {
+  transitional: u,
+  adapter: ["xhr", "http", "fetch"],
+  transformRequest: [function(r, e) {
+    const n = e.getContentType() || "", s = n.indexOf("application/json") > -1, f = t.isObject(r);
+    if (f && t.isHTMLForm(r) && (r = new FormData(r)), t.isFormData(r))
+      return s ? JSON.stringify(O(r)) : r;
+    if (t.isArrayBuffer(r) || t.isBuffer(r) || t.isStream(r) || t.isFile(r) || t.isBlob(r) || t.isReadableStream(r))
+      return r;
+    if (t.isArrayBufferView(r))
+      return r.buffer;
+    if (t.isURLSearchParams(r))
+      return e.setContentType("application/x-www-form-urlencoded;charset=utf-8", !1), r.toString();
+    let o;
+    if (f) {
+      if (n.indexOf("application/x-www-form-urlencoded") > -1)
+        return h(r, this.formSerializer).toString();
+      if ((o = t.isFileList(r)) || n.indexOf("multipart/form-data") > -1) {
+        const p = this.env && this.env.FormData;
+        return S(
+          o ? { "files[]": r } : r,
+          p && new p(),
+          this.formSerializer
+        );
+      }
     }
-    return B(r) ? !0 : (e.append(O(u, n, d), l(r)), !1);
-  }
-  const a = [], F = Object.assign(S, {
-    defaultVisitor: j,
-    convertValue: l,
-    isVisitable: B
-  });
-  function A(r, n) {
-    if (!t.isUndefined(r)) {
-      if (a.indexOf(r) !== -1)
-        throw Error("Circular reference detected in " + n.join("."));
-      a.push(r), t.forEach(r, function(f, c) {
-        (!(t.isUndefined(f) || f === null) && o.call(
-          e,
-          f,
-          t.isString(c) ? c.trim() : c,
-          n,
-          F
-        )) === !0 && A(f, n ? n.concat(c) : [c]);
-      }), a.pop();
+    return f || s ? (e.setContentType("application/json", !1), y(r)) : r;
+  }],
+  transformResponse: [function(r) {
+    const e = this.transitional || l.transitional, n = e && e.forcedJSONParsing, s = this.responseType === "json";
+    if (t.isResponse(r) || t.isReadableStream(r))
+      return r;
+    if (r && t.isString(r) && (n && !this.responseType || s)) {
+      const m = !(e && e.silentJSONParsing) && s;
+      try {
+        return JSON.parse(r, this.parseReviver);
+      } catch (o) {
+        if (m)
+          throw o.name === "SyntaxError" ? c.from(o, c.ERR_BAD_RESPONSE, this, null, this.response) : o;
+      }
+    }
+    return r;
+  }],
+  /**
+   * A timeout in milliseconds to abort a request. If set to 0 (default) a
+   * timeout is not created.
+   */
+  timeout: 0,
+  xsrfCookieName: "XSRF-TOKEN",
+  xsrfHeaderName: "X-XSRF-TOKEN",
+  maxContentLength: -1,
+  maxBodyLength: -1,
+  env: {
+    FormData: a.classes.FormData,
+    Blob: a.classes.Blob
+  },
+  validateStatus: function(r) {
+    return r >= 200 && r < 300;
+  },
+  headers: {
+    common: {
+      Accept: "application/json, text/plain, */*",
+      "Content-Type": void 0
     }
   }
-  if (!t.isObject(i))
-    throw new TypeError("data must be an object");
-  return A(i), e;
-}
+};
+t.forEach(["delete", "get", "head", "post", "put", "patch"], (i) => {
+  l.headers[i] = {};
+});
 export {
-  W as default
+  l as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instockng/storefront-ui",
-  "version": "1.0.108",
+  "version": "1.0.109",
   "description": "Pre-built UI components for OMS e-commerce sites",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
     "type-check": "tsc --noEmit",
     "build": "vite build && vite build --config vite.config.css.ts && tsc --project tsconfig.build.json || true",
     "prepublishOnly": "npm run build",
-    "postpublish": "gh api repos/ola-wale/toyland/dispatches -f event_type=instockng-publish",
+    "postpublish": "sleep 15 && gh api repos/ola-wale/toyland/dispatches -f event_type=instockng-publish",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },

package/src/components/AssistantDrawer.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState, useCallback } from 'react';
 import { AssistantDrawer } from './AssistantDrawer';
 import { ProductAssistantChips } from './ProductAssistantChips';
+import { AssistantProvider } from '../contexts/AssistantContext';
 
 const meta = {
   title: 'Components/AssistantDrawer',
@@ -10,7 +10,6 @@ const meta = {
     layout: 'fullscreen',
   },
   decorators: [
-    // Override the default p-8 decorator — drawer needs full viewport
     (Story) => (
       <div style={{ position: 'relative', width: '100vw', height: '100vh', overflow: 'hidden' }}>
         <Story />
@@ -29,48 +28,28 @@ const mockFaqs = [
   { question: 'Can they be worn during workouts?', answer: 'Designed for high-intensity workouts.' },
 ];
 
-function ProductChipsDemo() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [question, setQuestion] = useState('');
-
-  const handleAsk = useCallback((q: string) => {
-    setQuestion(q);
-    setIsOpen(true);
-  }, []);
-
-  const handleClose = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
-  return (
-    <div className="p-8">
-      <h3 className="text-lg font-semibold mb-4">Product Page</h3>
-      <div className="max-w-md">
-        <div className="aspect-[4/3] bg-gray-100 rounded-lg mb-4 flex items-center justify-center text-gray-400">
-          Product Image
-        </div>
-        <ProductAssistantChips faqs={mockFaqs} onAsk={handleAsk} />
-      </div>
-
-      <AssistantDrawer
-        isOpen={isOpen}
-        onClose={handleClose}
-        apiUrl="https://oms-api.instock.ng"
-        brandSlug="demo-brand"
-        productSlug="maternity-leggings"
-        initialQuestion={question}
-        assistantName="AI Assistant"
-        disablePortal
-      />
-    </div>
-  );
-}
-
 /**
- * Interactive demo: FAQ chips → click → drawer opens with streaming answer
+ * Interactive demo: FAQ chips → click → drawer opens with streaming answer.
+ * Uses AssistantProvider (same as production) so ProductAssistantChips can call useAssistant().
  */
 export const WithProductChips: Story = {
-  render: () => <ProductChipsDemo />,
+  render: () => (
+    <AssistantProvider
+      apiUrl="https://oms-api.instock.ng"
+      brandSlug="demo-brand"
+      assistantName="AI Assistant"
+    >
+      <div className="p-8">
+        <h3 className="text-lg font-semibold mb-4">Product Page</h3>
+        <div className="max-w-md">
+          <div className="aspect-[4/3] bg-gray-100 rounded-lg mb-4 flex items-center justify-center text-gray-400">
+            Product Image
+          </div>
+          <ProductAssistantChips product={{ slug: 'maternity-leggings', faqs: mockFaqs }} />
+        </div>
+      </div>
+    </AssistantProvider>
+  ),
   args: {} as any,
 };
 

package/src/components/AssistantDrawer.tsx

@@ -116,7 +116,7 @@ export function AssistantDrawer({
     }
   }, []);
 
-  const sendMessageRef = useRef<(question: string) => Promise<void>>();
+  const sendMessageRef = useRef<(question: string) => Promise<void>>(null);
   const sendMessage = useCallback(
     async (question: string) => {
       if (!question.trim()) return;

package/src/components/ProductAssistantChips.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { ProductAssistantChips } from './ProductAssistantChips';
+import { AssistantProvider } from '../contexts/AssistantContext';
 
 const meta = {
   title: 'Components/ProductAssistantChips',
@@ -7,6 +8,13 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
+  decorators: [
+    (Story) => (
+      <AssistantProvider apiUrl="https://oms-api.instock.ng" brandSlug="demo-brand">
+        <Story />
+      </AssistantProvider>
+    ),
+  ],
   tags: ['autodocs'],
 } satisfies Meta<typeof ProductAssistantChips>;
 
@@ -22,21 +30,18 @@ const mockFaqs = [
 
 export const Default: Story = {
   args: {
-    faqs: mockFaqs,
-    onAsk: (question) => console.log('Asked:', question),
+    product: { slug: 'maternity-leggings', faqs: mockFaqs },
   },
 };
 
 export const FewQuestions: Story = {
   args: {
-    faqs: mockFaqs.slice(0, 2),
-    onAsk: (question) => console.log('Asked:', question),
+    product: { slug: 'maternity-leggings', faqs: mockFaqs.slice(0, 2) },
   },
 };
 
 export const NoFaqs: Story = {
   args: {
-    faqs: [],
-    onAsk: (question) => console.log('Asked:', question),
+    product: { slug: 'maternity-leggings', faqs: [] },
   },
 };

package/src/components/ProductAssistantChips.tsx

@@ -9,21 +9,26 @@
 
 import { Sparkles } from 'lucide-react';
 import { cn } from '../lib/utils';
+import { useAssistant } from '../contexts/AssistantContext';
 
 export interface ProductAssistantChipsProps {
-  /** FAQ questions to display as chips */
-  faqs?: Array<{ question: string; answer: string }>;
-  /** Callback when a chip is clicked — should open the drawer with this question */
-  onAsk: (question: string) => void;
+  /** Product with faqs and slug */
+  product: {
+    slug: string;
+    faqs?: Array<{ question: string; answer: string }> | null;
+  };
   /** Custom class name */
   className?: string;
 }
 
 export function ProductAssistantChips({
-  faqs = [],
-  onAsk,
+  product,
   className,
 }: ProductAssistantChipsProps) {
+  const { ask } = useAssistant();
+  const faqs = product.faqs || [];
+  const productSlug = product.slug;
+
   if (faqs.length === 0) return null;
 
   return (
@@ -37,7 +42,7 @@ export function ProductAssistantChips({
           <button
             key={i}
             type="button"
-            onClick={() => onAsk(faq.question)}
+            onClick={() => ask(faq.question, productSlug)}
             className={cn(
               'rounded-full border border-gray-200 bg-blue-50/60 px-3 py-1.5 text-sm text-gray-700',
               'hover:bg-blue-100 hover:border-blue-200 transition-colors',
@@ -49,7 +54,7 @@ export function ProductAssistantChips({
         ))}
         <button
           type="button"
-          onClick={() => onAsk('')}
+          onClick={() => ask('', productSlug)}
           className={cn(
             'rounded-full border border-gray-300 bg-gray-800 px-3 py-1.5 text-sm text-white font-medium',
             'hover:bg-gray-700 transition-colors',