@dropins/storefront-quick-order 0.1.2-alpha2 → 0.1.2-alpha3

package/containers/QuickOrderMultipleSku.js

@@ -1,4 +1,4 @@
 /*! Copyright 2026 Adobe
 All Rights Reserved. */
-import{jsxs as A,jsx as o}from"@dropins/tools/preact-jsx-runtime.js";import{TextArea as Q,Button as L}from"@dropins/tools/components.js";import{c as q,d as v,Q as M}from"../chunks/QuickOrderDisabledOverlay.js";import{Slot as I,classes as _}from"@dropins/tools/lib.js";import{useState as h,useRef as g,useEffect as p,useCallback as b,useMemo as C}from"@dropins/tools/preact-hooks.js";import{events as x}from"@dropins/tools/event-bus.js";import"@dropins/tools/preact-compat.js";import{c as N}from"../chunks/initialize.js";import{useText as B}from"@dropins/tools/i18n.js";import"@dropins/tools/fetch-graphql.js";const y=({t,onChange:i,textAreaValue:r,loading:l,disabled:u})=>A("div",{className:q(["b2b-quick-order-sku-list-input"]),children:[o("div",{className:"b2b-quick-order-sku-list-input__title",children:t.title}),o(Q,{id:"quick-order-sku-list-input",label:t.label,className:"b2b-quick-order-sku-list-input__textarea",placeholder:t.textAreaPlaceholder,onChange:i,value:r,disabled:l||u}),o("div",{className:"b2b-quick-order-sku-list-input__message",children:t.helperText})]}),R=({onChange:t})=>{const[i,r]=h(""),[l,u]=h(!1),m=g([]),a=g(!0);p(()=>()=>{a.current=!1},[]);const d=b(e=>{const n=e.split(/[\s,]+/).map(s=>s.trim()).filter(s=>s.length>0),c=new Map;n.forEach(s=>{c.set(s,(c.get(s)||0)+1)});const f=Array.from(c.entries()).map(([s,S])=>({sku:s,quantity:S}));return m.current=f,f},[]),k=C(()=>v(e=>{t&&a.current&&t(e)},300),[t]);p(()=>{k(d(i))},[i,k,d]),p(()=>{const e=x.on("quick-order/loading",n=>{a.current&&u(n)},{eager:!0});return()=>{e==null||e.off()}},[]);const O=b(e=>{const c=e.target.value;r(c)},[]),T=b(e=>{const n=m.current,c=e?[...n,...e]:n;x.emit("quick-order/add-items",c),r("")},[]);return{handleChange:O,textAreaValue:i,loading:l,handleAddToList:T}},H=({className:t,onChange:i,slots:r})=>{const l=N.getConfig().quickOrderActive,u=B({title:"QuickOrder.SkuListInput.title",helperText:"QuickOrder.SkuListInput.helperText",textAreaPlaceholder:"QuickOrder.SkuListInput.textArea.placeholder",buttonText:"QuickOrder.SkuListInput.button",label:"QuickOrder.SkuListInput.textArea.label",disabledMessage:"QuickOrder.QuickOrderItem.disabledMessage"}),{handleChange:m,textAreaValue:a,loading:d,handleAddToList:k}=R({onChange:i});return o("div",{className:_(["b2b-quick-order-quick-order-multiple-sku",t]),"data-testid":"storefrontQuickOrderTest",children:A(M,{isDisabled:!l,message:u.disabledMessage,children:[o(y,{loading:d,textAreaValue:a,onChange:m,t:u}),o(I,{"data-testid":"addToListButtonTest",name:"AddToListButton",slot:r==null?void 0:r.AddToListButton,context:{handleAddToList:k,loading:d,textAreaValue:a},children:o(L,{onClick:()=>k(),disabled:d||!a.length,children:u.buttonText})})]})})};export{H as QuickOrderMultipleSku,H as default};
+import{jsxs as A,jsx as c}from"@dropins/tools/preact-jsx-runtime.js";import{TextArea as Q,Button as L}from"@dropins/tools/components.js";import{c as q,d as v}from"../chunks/debounce.js";import{Q as M}from"../chunks/QuickOrderDisabledOverlay.js";import{Slot as I,classes as _}from"@dropins/tools/lib.js";import{useState as h,useRef as g,useEffect as p,useCallback as f,useMemo as C}from"@dropins/tools/preact-hooks.js";import{events as x}from"@dropins/tools/event-bus.js";import"@dropins/tools/preact-compat.js";import{c as N}from"../chunks/initialize.js";import{useText as B}from"@dropins/tools/i18n.js";import"@dropins/tools/fetch-graphql.js";const y=({t,onChange:i,textAreaValue:r,loading:l,disabled:u})=>A("div",{className:q(["b2b-quick-order-sku-list-input"]),children:[c("div",{className:"b2b-quick-order-sku-list-input__title",children:t.title}),c(Q,{id:"quick-order-sku-list-input",label:t.label,className:"b2b-quick-order-sku-list-input__textarea",placeholder:t.textAreaPlaceholder,onChange:i,value:r,disabled:l||u}),c("div",{className:"b2b-quick-order-sku-list-input__message",children:t.helperText})]}),R=({onChange:t})=>{const[i,r]=h(""),[l,u]=h(!1),m=g([]),a=g(!0);p(()=>()=>{a.current=!1},[]);const d=f(e=>{const o=e.split(/[\s,]+/).map(s=>s.trim()).filter(s=>s.length>0),n=new Map;o.forEach(s=>{n.set(s,(n.get(s)||0)+1)});const b=Array.from(n.entries()).map(([s,S])=>({sku:s,quantity:S}));return m.current=b,b},[]),k=C(()=>v(e=>{t&&a.current&&t(e)},300),[t]);p(()=>{k(d(i))},[i,k,d]),p(()=>{const e=x.on("quick-order/loading",o=>{a.current&&u(o)},{eager:!0});return()=>{e==null||e.off()}},[]);const O=f(e=>{const n=e.target.value;r(n)},[]),T=f(e=>{const o=m.current,n=e?[...o,...e]:o;x.emit("quick-order/add-items",n),r("")},[]);return{handleChange:O,textAreaValue:i,loading:l,handleAddToList:T}},J=({className:t,onChange:i,slots:r})=>{const l=N.getConfig().quickOrderActive,u=B({title:"QuickOrder.SkuListInput.title",helperText:"QuickOrder.SkuListInput.helperText",textAreaPlaceholder:"QuickOrder.SkuListInput.textArea.placeholder",buttonText:"QuickOrder.SkuListInput.button",label:"QuickOrder.SkuListInput.textArea.label",disabledMessage:"QuickOrder.QuickOrderItem.disabledMessage"}),{handleChange:m,textAreaValue:a,loading:d,handleAddToList:k}=R({onChange:i});return c("div",{className:_(["b2b-quick-order-quick-order-multiple-sku",t]),"data-testid":"storefrontQuickOrderTest",children:A(M,{isDisabled:!l,message:u.disabledMessage,children:[c(y,{loading:d,textAreaValue:a,onChange:m,t:u}),c(I,{"data-testid":"addToListButtonTest",name:"AddToListButton",slot:r==null?void 0:r.AddToListButton,context:{handleAddToList:k,loading:d,textAreaValue:a},children:c(L,{onClick:()=>k(),disabled:d||!a.length,children:u.buttonText})})]})})};export{J as QuickOrderMultipleSku,J as default};
 //# sourceMappingURL=QuickOrderMultipleSku.js.map

package/containers/QuickOrderMultipleSku.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickOrderMultipleSku.js","sources":["/@dropins/storefront-quick-order/src/components/SkuListInput/SkuListInput.tsx","/@dropins/storefront-quick-order/src/hooks/useQuickOrderMultipleSku.tsx","/@dropins/storefront-quick-order/src/containers/QuickOrderMultipleSku/QuickOrderMultipleSku.tsx"],"sourcesContent":["/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n *  Copyright 2024 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { FunctionComponent } from 'preact/compat';\nimport { TextArea } from '@adobe-commerce/elsie/components';\nimport { classes } from '@adobe-commerce/elsie/lib/classes';\nimport { SkuListInputProps } from '@/b2b-quick-order/types';\nimport '@/b2b-quick-order/components/SkuListInput/SkuListInput.css';\n\nexport const SkuListInput: FunctionComponent<SkuListInputProps> = ({\n  t,\n  onChange,\n  textAreaValue,\n  loading,\n  disabled,\n}) => {\n  return (\n    <div className={classes(['b2b-quick-order-sku-list-input'])}>\n      <div className=\"b2b-quick-order-sku-list-input__title\">{t.title}</div>\n      <TextArea\n        id={'quick-order-sku-list-input'}\n        label={t.label}\n        className=\"b2b-quick-order-sku-list-input__textarea\"\n        placeholder={t.textAreaPlaceholder}\n        onChange={onChange}\n        value={textAreaValue}\n        disabled={loading || disabled}\n      />\n      <div className=\"b2b-quick-order-sku-list-input__message\">\n        {t.helperText}\n      </div>\n    </div>\n  );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n *  Copyright 2024 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  useRef,\n} from 'preact/hooks';\nimport {\n  SubmitSkuValue,\n  UseQuickOrderMultipleSkuProps,\n  UseQuickOrderMultipleSkuReturn,\n} from '@/b2b-quick-order/types';\nimport { debounce } from '@adobe-commerce/elsie/lib/debounce';\nimport { events } from '@adobe-commerce/event-bus';\n\nexport const useQuickOrderMultipleSku = ({\n  onChange,\n}: UseQuickOrderMultipleSkuProps): UseQuickOrderMultipleSkuReturn => {\n  const [textAreaValue, setTextAreaValue] = useState<string>('');\n  const [loading, setLoading] = useState(false);\n  // Store parsed SKU values without triggering re-renders (transient data for debounced callback)\n  const textAreaValueRef = useRef<SubmitSkuValue>([]);\n  // Track component mount status to prevent state updates after unmount\n  const isMountedRef = useRef(true);\n\n  useEffect(() => {\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, []);\n\n  const modifySkuString = useCallback((value: string) => {\n    const parsed = value\n      .split(/[\\s,]+/)\n      .map((item) => item.trim())\n      .filter((sku) => sku.length > 0);\n\n    // Deduplicate: sum quantities for duplicate SKUs\n    const skuMap = new Map<string, number>();\n    parsed.forEach((sku) => {\n      skuMap.set(sku, (skuMap.get(sku) || 0) + 1);\n    });\n\n    const result = Array.from(skuMap.entries()).map(([sku, quantity]) => ({\n      sku,\n      quantity,\n    }));\n\n    textAreaValueRef.current = result;\n\n    return result;\n  }, []);\n\n  const debouncedOnChange = useMemo(\n    () =>\n      debounce((skus: string[]) => {\n        if (onChange && isMountedRef.current) {\n          onChange(skus);\n        }\n      }, 300),\n    [onChange]\n  );\n\n  useEffect(() => {\n    debouncedOnChange(modifySkuString(textAreaValue));\n  }, [textAreaValue, debouncedOnChange, modifySkuString]);\n\n  useEffect(() => {\n    const loadingEvent = events.on(\n      'quick-order/loading',\n      (loading) => {\n        if (isMountedRef.current) {\n          setLoading(loading);\n        }\n      },\n      {\n        eager: true,\n      }\n    );\n    return () => {\n      loadingEvent?.off();\n    };\n  }, []);\n\n  const handleChange = useCallback((e: Event) => {\n    const target = e.target as HTMLTextAreaElement;\n    const value = target.value;\n    setTextAreaValue(value);\n  }, []);\n\n  const handleAddToList = useCallback(\n    (additionalValues?: Array<{ sku: string; quantity: number }>) => {\n      const textAreaSkus = textAreaValueRef.current;\n      const allSkus = additionalValues\n        ? [...textAreaSkus, ...additionalValues]\n        : textAreaSkus;\n      events.emit('quick-order/add-items', allSkus);\n      setTextAreaValue('');\n    },\n    []\n  );\n\n  return {\n    handleChange,\n    textAreaValue,\n    loading,\n    handleAddToList,\n  };\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n *  Copyright 2024 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport {\n  SkuListInput,\n  QuickOrderDisabledOverlay,\n} from '@/b2b-quick-order/components';\nimport { useQuickOrderMultipleSku } from '@/b2b-quick-order/hooks';\nimport { QuickOrderMultipleSkuProps } from '@/b2b-quick-order/types';\nimport { config } from '@/b2b-quick-order/api/initialize';\nimport { Button } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { classes, Container, Slot } from '@adobe-commerce/elsie/lib';\n\nexport const QuickOrderMultipleSku: Container<QuickOrderMultipleSkuProps> = ({\n  className,\n  onChange,\n  slots,\n}) => {\n  const isQuickOrderActive = config.getConfig().quickOrderActive;\n\n  const t = useText({\n    title: 'QuickOrder.SkuListInput.title',\n    helperText: 'QuickOrder.SkuListInput.helperText',\n    textAreaPlaceholder: 'QuickOrder.SkuListInput.textArea.placeholder',\n    buttonText: 'QuickOrder.SkuListInput.button',\n    label: 'QuickOrder.SkuListInput.textArea.label',\n    disabledMessage: 'QuickOrder.QuickOrderItem.disabledMessage',\n  });\n\n  const { handleChange, textAreaValue, loading, handleAddToList } =\n    useQuickOrderMultipleSku({\n      onChange,\n    });\n\n  return (\n    <div\n      className={classes([\n        'b2b-quick-order-quick-order-multiple-sku',\n        className,\n      ])}\n      data-testid=\"storefrontQuickOrderTest\"\n    >\n      <QuickOrderDisabledOverlay\n        isDisabled={!isQuickOrderActive}\n        message={t.disabledMessage}\n      >\n        <SkuListInput\n          loading={loading}\n          textAreaValue={textAreaValue}\n          onChange={handleChange}\n          t={t}\n        />\n        <Slot\n          data-testid=\"addToListButtonTest\"\n          name=\"AddToListButton\"\n          slot={slots?.AddToListButton}\n          context={{ handleAddToList, loading, textAreaValue }}\n        >\n          <Button\n            onClick={() => handleAddToList()}\n            disabled={loading || !textAreaValue.length}\n          >\n            {t.buttonText}\n          </Button>\n        </Slot>\n      </QuickOrderDisabledOverlay>\n    </div>\n  );\n};\n"],"names":["SkuListInput","onChange","textAreaValue","loading","disabled","classes","jsx","TextArea","useQuickOrderMultipleSku","setTextAreaValue","useState","setLoading","textAreaValueRef","useRef","isMountedRef","useEffect","modifySkuString","useCallback","value","parsed","item","sku","skuMap","result","quantity","debouncedOnChange","useMemo","debounce","skus","loadingEvent","events","handleChange","handleAddToList","additionalValues","textAreaSkus","allSkus","QuickOrderMultipleSku","className","slots","isQuickOrderActive","config","t","useText","jsxs","QuickOrderDisabledOverlay","Slot","Button"],"mappings":"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"}
+{"version":3,"file":"QuickOrderMultipleSku.js","sources":["/@dropins/storefront-quick-order/src/components/SkuListInput/SkuListInput.tsx","/@dropins/storefront-quick-order/src/hooks/useQuickOrderMultipleSku.tsx","/@dropins/storefront-quick-order/src/containers/QuickOrderMultipleSku/QuickOrderMultipleSku.tsx"],"sourcesContent":["/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n *  Copyright 2024 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { FunctionComponent } from 'preact/compat';\nimport { TextArea } from '@adobe-commerce/elsie/components';\nimport { classes } from '@adobe-commerce/elsie/lib/classes';\nimport { SkuListInputProps } from '@/b2b-quick-order/types';\nimport '@/b2b-quick-order/components/SkuListInput/SkuListInput.css';\n\nexport const SkuListInput: FunctionComponent<SkuListInputProps> = ({\n  t,\n  onChange,\n  textAreaValue,\n  loading,\n  disabled,\n}) => {\n  return (\n    <div className={classes(['b2b-quick-order-sku-list-input'])}>\n      <div className=\"b2b-quick-order-sku-list-input__title\">{t.title}</div>\n      <TextArea\n        id={'quick-order-sku-list-input'}\n        label={t.label}\n        className=\"b2b-quick-order-sku-list-input__textarea\"\n        placeholder={t.textAreaPlaceholder}\n        onChange={onChange}\n        value={textAreaValue}\n        disabled={loading || disabled}\n      />\n      <div className=\"b2b-quick-order-sku-list-input__message\">\n        {t.helperText}\n      </div>\n    </div>\n  );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n *  Copyright 2024 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  useRef,\n} from 'preact/hooks';\nimport {\n  SubmitSkuValue,\n  UseQuickOrderMultipleSkuProps,\n  UseQuickOrderMultipleSkuReturn,\n} from '@/b2b-quick-order/types';\nimport { debounce } from '@adobe-commerce/elsie/lib/debounce';\nimport { events } from '@adobe-commerce/event-bus';\n\nexport const useQuickOrderMultipleSku = ({\n  onChange,\n}: UseQuickOrderMultipleSkuProps): UseQuickOrderMultipleSkuReturn => {\n  const [textAreaValue, setTextAreaValue] = useState<string>('');\n  const [loading, setLoading] = useState(false);\n  // Store parsed SKU values without triggering re-renders (transient data for debounced callback)\n  const textAreaValueRef = useRef<SubmitSkuValue>([]);\n  // Track component mount status to prevent state updates after unmount\n  const isMountedRef = useRef(true);\n\n  useEffect(() => {\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, []);\n\n  const modifySkuString = useCallback((value: string) => {\n    const parsed = value\n      .split(/[\\s,]+/)\n      .map((item) => item.trim())\n      .filter((sku) => sku.length > 0);\n\n    // Deduplicate: sum quantities for duplicate SKUs\n    const skuMap = new Map<string, number>();\n    parsed.forEach((sku) => {\n      skuMap.set(sku, (skuMap.get(sku) || 0) + 1);\n    });\n\n    const result = Array.from(skuMap.entries()).map(([sku, quantity]) => ({\n      sku,\n      quantity,\n    }));\n\n    textAreaValueRef.current = result;\n\n    return result;\n  }, []);\n\n  const debouncedOnChange = useMemo(\n    () =>\n      debounce((skus: string[]) => {\n        if (onChange && isMountedRef.current) {\n          onChange(skus);\n        }\n      }, 300),\n    [onChange]\n  );\n\n  useEffect(() => {\n    debouncedOnChange(modifySkuString(textAreaValue));\n  }, [textAreaValue, debouncedOnChange, modifySkuString]);\n\n  useEffect(() => {\n    const loadingEvent = events.on(\n      'quick-order/loading',\n      (loading) => {\n        if (isMountedRef.current) {\n          setLoading(loading);\n        }\n      },\n      {\n        eager: true,\n      }\n    );\n    return () => {\n      loadingEvent?.off();\n    };\n  }, []);\n\n  const handleChange = useCallback((e: Event) => {\n    const target = e.target as HTMLTextAreaElement;\n    const value = target.value;\n    setTextAreaValue(value);\n  }, []);\n\n  const handleAddToList = useCallback(\n    (additionalValues?: Array<{ sku: string; quantity: number }>) => {\n      const textAreaSkus = textAreaValueRef.current;\n      const allSkus = additionalValues\n        ? [...textAreaSkus, ...additionalValues]\n        : textAreaSkus;\n      events.emit('quick-order/add-items', allSkus);\n      setTextAreaValue('');\n    },\n    []\n  );\n\n  return {\n    handleChange,\n    textAreaValue,\n    loading,\n    handleAddToList,\n  };\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n *  Copyright 2024 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport {\n  SkuListInput,\n  QuickOrderDisabledOverlay,\n} from '@/b2b-quick-order/components';\nimport { useQuickOrderMultipleSku } from '@/b2b-quick-order/hooks';\nimport { QuickOrderMultipleSkuProps } from '@/b2b-quick-order/types';\nimport { config } from '@/b2b-quick-order/api/initialize';\nimport { Button } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { classes, Container, Slot } from '@adobe-commerce/elsie/lib';\n\nexport const QuickOrderMultipleSku: Container<QuickOrderMultipleSkuProps> = ({\n  className,\n  onChange,\n  slots,\n}) => {\n  const isQuickOrderActive = config.getConfig().quickOrderActive;\n\n  const t = useText({\n    title: 'QuickOrder.SkuListInput.title',\n    helperText: 'QuickOrder.SkuListInput.helperText',\n    textAreaPlaceholder: 'QuickOrder.SkuListInput.textArea.placeholder',\n    buttonText: 'QuickOrder.SkuListInput.button',\n    label: 'QuickOrder.SkuListInput.textArea.label',\n    disabledMessage: 'QuickOrder.QuickOrderItem.disabledMessage',\n  });\n\n  const { handleChange, textAreaValue, loading, handleAddToList } =\n    useQuickOrderMultipleSku({\n      onChange,\n    });\n\n  return (\n    <div\n      className={classes([\n        'b2b-quick-order-quick-order-multiple-sku',\n        className,\n      ])}\n      data-testid=\"storefrontQuickOrderTest\"\n    >\n      <QuickOrderDisabledOverlay\n        isDisabled={!isQuickOrderActive}\n        message={t.disabledMessage}\n      >\n        <SkuListInput\n          loading={loading}\n          textAreaValue={textAreaValue}\n          onChange={handleChange}\n          t={t}\n        />\n        <Slot\n          data-testid=\"addToListButtonTest\"\n          name=\"AddToListButton\"\n          slot={slots?.AddToListButton}\n          context={{ handleAddToList, loading, textAreaValue }}\n        >\n          <Button\n            onClick={() => handleAddToList()}\n            disabled={loading || !textAreaValue.length}\n          >\n            {t.buttonText}\n          </Button>\n        </Slot>\n      </QuickOrderDisabledOverlay>\n    </div>\n  );\n};\n"],"names":["SkuListInput","onChange","textAreaValue","loading","disabled","classes","jsx","TextArea","useQuickOrderMultipleSku","setTextAreaValue","useState","setLoading","textAreaValueRef","useRef","isMountedRef","useEffect","modifySkuString","useCallback","value","parsed","item","sku","skuMap","result","quantity","debouncedOnChange","useMemo","debounce","skus","loadingEvent","events","handleChange","handleAddToList","additionalValues","textAreaSkus","allSkus","QuickOrderMultipleSku","className","slots","isQuickOrderActive","config","t","useText","jsxs","QuickOrderDisabledOverlay","Slot","Button"],"mappings":"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"}

package/containers/QuickOrderVariantsGrid/QuickOrderVariantsGrid.d.ts

@@ -0,0 +1,5 @@
+import { Container } from '@dropins/tools/types/elsie/src/lib';
+import { QuickOrderVariantsGridProps } from '../../types/quickOrderVariantsGrid.types';
+
+export declare const QuickOrderVariantsGrid: Container<QuickOrderVariantsGridProps>;
+//# sourceMappingURL=QuickOrderVariantsGrid.d.ts.map

package/containers/QuickOrderVariantsGrid/index.d.ts

@@ -0,0 +1,19 @@
+/********************************************************************
+ * ADOBE CONFIDENTIAL
+ * __________________
+ *
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ *******************************************************************/
+export * from './QuickOrderVariantsGrid';
+export { QuickOrderVariantsGrid as default } from './QuickOrderVariantsGrid';
+//# sourceMappingURL=index.d.ts.map

package/containers/QuickOrderVariantsGrid.d.ts

@@ -0,0 +1,3 @@
+export * from './QuickOrderVariantsGrid/index'
+import _default from './QuickOrderVariantsGrid/index'
+export default _default

package/containers/QuickOrderVariantsGrid.js

@@ -0,0 +1,6 @@
+/*! Copyright 2026 Adobe
+All Rights Reserved. */
+import{jsx as h,jsxs as W}from"@dropins/tools/preact-jsx-runtime.js";import{classes as A}from"@dropins/tools/lib.js";import{d as $,Q as N,a as M}from"../chunks/debounce.js";import{useState as D,useRef as _,useCallback as f,useEffect as B,useMemo as R}from"@dropins/tools/preact-hooks.js";import{events as T}from"@dropins/tools/event-bus.js";import{useText as F}from"@dropins/tools/i18n.js";import"@dropins/tools/preact-compat.js";import"@dropins/tools/components.js";const H=({initialVariants:m,fetchVariants:b,onVariantsLoaded:a,onTableDataChange:y,debounceMs:v=300,initialLoading:O=!0}={})=>{const[o,l]=D([]),u=_([]),[g,s]=D(O),[Q,p]=D(null),d=f(async()=>{if(m){const e=m.map(r=>({...r,quantity:0}));l(e),u.current=e,s(!1),a==null||a(e);return}if(!b){s(!1);return}s(!0),p(null);try{const r=(await b()).map(t=>({...t,quantity:0}));l(r),u.current=r,a==null||a(r)}catch(e){const r=e instanceof Error?e.message:"Failed to load variants";p(r),console.error("Error fetching variants:",e)}finally{s(!1)}},[m,b,a]);B(()=>{d()},[d]),B(()=>{const e=T.on("quick-order/grid-ordering-variants",r=>{const t=(r==null?void 0:r.variants)||[];if(t.length===0)l([]),u.current=[],s(!1);else{const i=t.map(n=>({...n,quantity:0}));l(i),u.current=i,s(!1),a==null||a(i)}},{eager:!0});return()=>{e==null||e.off()}},[a]);const q=R(()=>$(e=>{const r=e.filter(t=>t.quantity>0).map(t=>{var i;return{sku:t.product.sku,name:t.product.name,inStock:t.product.inStock,attributes:t.product.attributes.reduce((n,c)=>(c.value&&(n[c.name]={label:c.label,value:c.value}),n),{}),price:t.product.price.final.amount.value,quantity:t.quantity,subtotal:t.product.price.final.amount.value*t.quantity,image:((i=t.product.images[0])==null?void 0:i.url)||""}});y&&y(r),T.emit("quick-order/grid-ordering-updated",{variants:r})},v),[y,v]),G=f((e,r)=>{l(t=>{const i=t.map(n=>n.product.sku===e?n.product.inStock?{...n,quantity:Math.max(0,r)}:{...n,quantity:0}:n);return u.current=i,q(i),i})},[q]),S=f(()=>{l(e=>{const r=e.map(t=>({...t,quantity:0}));return u.current=r,r}),T.emit("quick-order/grid-ordering-list-updated",[])},[]),w=f(()=>{const r=(u.current.length>0?u.current:o).filter(C=>C.quantity>0);if(r.length===0){console.warn("No variants with quantity to export");return}const t=`SKU,Quantity
+`,i=r.map(C=>`${C.product.sku},${C.quantity}`).join(`
+`),n=t+i,c=new Blob([n],{type:"text/csv;charset=utf-8;"}),k=document.createElement("a"),V=URL.createObjectURL(c),U=new Date().toISOString().split("T")[0];k.setAttribute("href",V),k.setAttribute("download",`product-variants-${U}.csv`),k.style.visibility="hidden",document.body.appendChild(k),k.click(),document.body.removeChild(k),URL.revokeObjectURL(V)},[o]),x=f(async()=>{await d()},[d]),j=f(()=>(u.current.length>0?u.current:o).filter(t=>t.quantity>0).map(t=>{var i;return{sku:t.product.sku,name:t.product.name,inStock:t.product.inStock,attributes:t.product.attributes.reduce((n,c)=>(c.value&&c.value!==""&&(n[c.name]={label:c.label,value:c.value}),n),{}),price:t.product.price.final.amount.value,quantity:t.quantity,subtotal:t.product.price.final.amount.value*t.quantity,image:((i=t.product.images[0])==null?void 0:i.url)||""}}),[o]),E=R(()=>o.filter(e=>e.quantity>0).length,[o]);return{variants:o,loading:g,error:Q,updateQuantity:G,clearAllQuantities:S,exportToCsv:w,refetchVariants:x,collectTableData:j,variantsWithQuantity:E}},L=({className:m,variants:b,fetchVariants:a,onVariantsLoaded:y,onTableDataChange:v,debounceMs:O,initialLoading:o,initialVisibleVariantsCount:l=10,columns:u,slots:g})=>{const s=F({imageColumn:"QuickOrder.VariantsGrid.imageColumn",variantColumn:"QuickOrder.VariantsGrid.variantColumn",skuColumn:"QuickOrder.VariantsGrid.skuColumn",availabilityColumn:"QuickOrder.VariantsGrid.availabilityColumn",priceColumn:"QuickOrder.VariantsGrid.priceColumn",quantityColumn:"QuickOrder.VariantsGrid.quantityColumn",subtotalColumn:"QuickOrder.VariantsGrid.subtotalColumn",clearButton:"QuickOrder.VariantsGrid.clearButton",saveToCsvButton:"QuickOrder.VariantsGrid.saveToCsvButton",collectDataButton:"QuickOrder.VariantsGrid.collectDataButton",inStock:"QuickOrder.VariantsGrid.inStock",outOfStock:"QuickOrder.VariantsGrid.outOfStock",tableCaption:"QuickOrder.VariantsGrid.tableCaption",quantityLabel:"QuickOrder.VariantsGrid.quantityLabel",showAll:"QuickOrder.VariantsGrid.showAll",showLess:"QuickOrder.VariantsGrid.showLess"}),{variants:Q,loading:p,error:d,updateQuantity:q,clearAllQuantities:G,exportToCsv:S,collectTableData:w,variantsWithQuantity:x}=H({initialVariants:b,fetchVariants:a,onVariantsLoaded:y,onTableDataChange:v,debounceMs:O,initialLoading:o});return d?h("div",{className:A(["b2b-quick-order-variants-grid-container","b2b-quick-order-variants-grid-container--error",m]),"data-testid":"variants-grid-container-error",children:h("p",{className:"b2b-quick-order-variants-grid-container__error-message",children:d})}):Q.length===0&&!p?null:W("div",{className:A(["b2b-quick-order-variants-grid-container",m]),"data-testid":"variants-grid-container",children:[h(N,{t:s,onClear:G,onSaveToCsv:S,onCollectData:w,isDisabled:p,variantsCount:x,slots:g}),h(M,{t:s,variants:Q,loading:p,onQuantityChange:q,initialVisibleVariantsCount:l,columns:u,slots:g})]})};export{L as QuickOrderVariantsGrid,L as default};
+//# sourceMappingURL=QuickOrderVariantsGrid.js.map

package/containers/QuickOrderVariantsGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickOrderVariantsGrid.js","sources":["/@dropins/storefront-quick-order/src/hooks/useQuickOrderVariantsData.tsx","/@dropins/storefront-quick-order/src/containers/QuickOrderVariantsGrid/QuickOrderVariantsGrid.tsx"],"sourcesContent":["/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n *  Copyright 2024 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'preact/hooks';\nimport {\n  VariantWithQuantity,\n  ProductVariant,\n  UseQuickOrderVariantsDataProps,\n  UseQuickOrderVariantsDataReturn,\n} from '@/b2b-quick-order/types';\nimport { debounce } from '@adobe-commerce/elsie/lib/debounce';\nimport { events } from '@adobe-commerce/event-bus';\n\nexport const useQuickOrderVariantsData = ({\n  initialVariants,\n  fetchVariants,\n  onVariantsLoaded,\n  onTableDataChange,\n  debounceMs = 300,\n  initialLoading = true,\n}: UseQuickOrderVariantsDataProps = {}): UseQuickOrderVariantsDataReturn => {\n  const [variants, setVariants] = useState<VariantWithQuantity[]>([]);\n  const variantsRef = useRef<VariantWithQuantity[]>([]);\n  const [loading, setLoading] = useState(initialLoading);\n  const [error, setError] = useState<string | null>(null);\n\n  const loadVariants = useCallback(async () => {\n    if (initialVariants) {\n      const variantsWithQuantity: VariantWithQuantity[] = initialVariants.map(\n        (variant) => ({\n          ...variant,\n          quantity: 0,\n        })\n      );\n      setVariants(variantsWithQuantity);\n      variantsRef.current = variantsWithQuantity;\n      setLoading(false);\n      onVariantsLoaded?.(variantsWithQuantity);\n      return;\n    }\n\n    if (!fetchVariants) {\n      setLoading(false);\n      return;\n    }\n\n    setLoading(true);\n    setError(null);\n\n    try {\n      const data = await fetchVariants();\n      const variantsWithQuantity: VariantWithQuantity[] = data.map(\n        (variant) => ({\n          ...variant,\n          quantity: 0,\n        })\n      );\n\n      setVariants(variantsWithQuantity);\n      variantsRef.current = variantsWithQuantity;\n      onVariantsLoaded?.(variantsWithQuantity);\n    } catch (err) {\n      const errorMessage =\n        err instanceof Error ? err.message : 'Failed to load variants';\n      setError(errorMessage);\n      console.error('Error fetching variants:', err);\n    } finally {\n      setLoading(false);\n    }\n  }, [initialVariants, fetchVariants, onVariantsLoaded]);\n\n  useEffect(() => {\n    loadVariants();\n  }, [loadVariants]);\n\n  useEffect(() => {\n    const variantsEvent = events.on(\n      'quick-order/grid-ordering-variants',\n      (data: { variants: ProductVariant[] }) => {\n        const incomingVariants = data?.variants || [];\n\n        if (incomingVariants.length === 0) {\n          setVariants([]);\n          variantsRef.current = [];\n          setLoading(false);\n        } else {\n          const variantsWithQuantity: VariantWithQuantity[] =\n            incomingVariants.map((variant) => ({\n              ...variant,\n              quantity: 0,\n            }));\n          setVariants(variantsWithQuantity);\n          variantsRef.current = variantsWithQuantity;\n          setLoading(false);\n          onVariantsLoaded?.(variantsWithQuantity);\n        }\n      },\n      {\n        eager: true,\n      }\n    );\n\n    return () => {\n      variantsEvent?.off();\n    };\n  }, [onVariantsLoaded]);\n\n  const debouncedTableDataChange = useMemo(\n    () =>\n      debounce((updatedVariants: VariantWithQuantity[]) => {\n        const collectedData = updatedVariants\n          .filter((v) => v.quantity > 0)\n          .map((v) => ({\n            sku: v.product.sku,\n            name: v.product.name,\n            inStock: v.product.inStock,\n            attributes: v.product.attributes.reduce((acc, attr) => {\n              if (attr.value) {\n                acc[attr.name] = {\n                  label: attr.label,\n                  value: attr.value,\n                };\n              }\n              return acc;\n            }, {} as Record<string, { label: string; value: string | number }>),\n            price: v.product.price.final.amount.value,\n            quantity: v.quantity,\n            subtotal: v.product.price.final.amount.value * v.quantity,\n            image: v.product.images[0]?.url || '',\n          }));\n\n        if (onTableDataChange) {\n          onTableDataChange(collectedData);\n        }\n\n        events.emit('quick-order/grid-ordering-updated', {\n          variants: collectedData,\n        });\n      }, debounceMs),\n    [onTableDataChange, debounceMs]\n  );\n\n  const updateQuantity = useCallback(\n    (sku: string, quantity: number) => {\n      setVariants((prevVariants) => {\n        const updated = prevVariants.map((variant) => {\n          if (variant.product.sku === sku) {\n            if (!variant.product.inStock) {\n              return { ...variant, quantity: 0 };\n            }\n            return { ...variant, quantity: Math.max(0, quantity) };\n          }\n          return variant;\n        });\n\n        variantsRef.current = updated;\n        debouncedTableDataChange(updated);\n\n        return updated;\n      });\n    },\n    [debouncedTableDataChange]\n  );\n\n  const clearAllQuantities = useCallback(() => {\n    setVariants((prevVariants) => {\n      const cleared = prevVariants.map((variant) => ({\n        ...variant,\n        quantity: 0,\n      }));\n\n      variantsRef.current = cleared;\n      return cleared;\n    });\n    events.emit('quick-order/grid-ordering-list-updated', []);\n  }, []);\n\n  const exportToCsv = useCallback(() => {\n    const currentVariants =\n      variantsRef.current.length > 0 ? variantsRef.current : variants;\n    const variantsToExport = currentVariants.filter((v) => v.quantity > 0);\n\n    if (variantsToExport.length === 0) {\n      console.warn('No variants with quantity to export');\n      return;\n    }\n\n    const csvHeader = 'SKU,Quantity\\n';\n    const csvRows = variantsToExport\n      .map((v) => `${v.product.sku},${v.quantity}`)\n      .join('\\n');\n    const csvContent = csvHeader + csvRows;\n\n    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });\n    const link = document.createElement('a');\n    const url = URL.createObjectURL(blob);\n\n    const timestamp = new Date().toISOString().split('T')[0];\n    link.setAttribute('href', url);\n    link.setAttribute('download', `product-variants-${timestamp}.csv`);\n    link.style.visibility = 'hidden';\n\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n\n    URL.revokeObjectURL(url);\n  }, [variants]);\n\n  const refetchVariants = useCallback(async () => {\n    await loadVariants();\n  }, [loadVariants]);\n\n  const collectTableData = useCallback(() => {\n    const currentVariants =\n      variantsRef.current.length > 0 ? variantsRef.current : variants;\n    const tableData = currentVariants\n      .filter((v) => v.quantity > 0)\n      .map((variant) => ({\n        sku: variant.product.sku,\n        name: variant.product.name,\n        inStock: variant.product.inStock,\n        attributes: variant.product.attributes.reduce((acc, attr) => {\n          if (attr.value && attr.value !== '') {\n            acc[attr.name] = {\n              label: attr.label,\n              value: attr.value,\n            };\n          }\n          return acc;\n        }, {} as Record<string, { label: string; value: string | number }>),\n        price: variant.product.price.final.amount.value,\n        quantity: variant.quantity,\n        subtotal: variant.product.price.final.amount.value * variant.quantity,\n        image: variant.product.images[0]?.url || '',\n      }));\n\n    return tableData;\n  }, [variants]);\n\n  const variantsWithQuantity = useMemo(\n    () => variants.filter((v) => v.quantity > 0).length,\n    [variants]\n  );\n\n  return {\n    variants,\n    loading,\n    error,\n    updateQuantity,\n    clearAllQuantities,\n    exportToCsv,\n    refetchVariants,\n    collectTableData,\n    variantsWithQuantity,\n  };\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n *  Copyright 2024 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { classes, Container } from '@adobe-commerce/elsie/lib';\nimport { QuickOrderVariantsGrid as QuickOrderVariantsGridComponent } from '@/b2b-quick-order/components/QuickOrderVariantsGrid/QuickOrderVariantsGrid';\nimport { QuickOrderVariantsActions } from '@/b2b-quick-order/components/QuickOrderVariantsActions/QuickOrderVariantsActions';\nimport { useQuickOrderVariantsData } from '@/b2b-quick-order/hooks/useQuickOrderVariantsData';\nimport { QuickOrderVariantsGridProps } from '@/b2b-quick-order/types/quickOrderVariantsGrid.types';\n\nexport const QuickOrderVariantsGrid: Container<QuickOrderVariantsGridProps> = ({\n  className,\n  variants: initialVariants,\n  fetchVariants,\n  onVariantsLoaded,\n  onTableDataChange,\n  debounceMs,\n  initialLoading,\n  initialVisibleVariantsCount = 10,\n  columns,\n  slots,\n}) => {\n  const t = useText({\n    imageColumn: 'QuickOrder.VariantsGrid.imageColumn',\n    variantColumn: 'QuickOrder.VariantsGrid.variantColumn',\n    skuColumn: 'QuickOrder.VariantsGrid.skuColumn',\n    availabilityColumn: 'QuickOrder.VariantsGrid.availabilityColumn',\n    priceColumn: 'QuickOrder.VariantsGrid.priceColumn',\n    quantityColumn: 'QuickOrder.VariantsGrid.quantityColumn',\n    subtotalColumn: 'QuickOrder.VariantsGrid.subtotalColumn',\n    clearButton: 'QuickOrder.VariantsGrid.clearButton',\n    saveToCsvButton: 'QuickOrder.VariantsGrid.saveToCsvButton',\n    collectDataButton: 'QuickOrder.VariantsGrid.collectDataButton',\n    inStock: 'QuickOrder.VariantsGrid.inStock',\n    outOfStock: 'QuickOrder.VariantsGrid.outOfStock',\n    tableCaption: 'QuickOrder.VariantsGrid.tableCaption',\n    quantityLabel: 'QuickOrder.VariantsGrid.quantityLabel',\n    showAll: 'QuickOrder.VariantsGrid.showAll',\n    showLess: 'QuickOrder.VariantsGrid.showLess',\n  });\n\n  const {\n    variants,\n    loading,\n    error,\n    updateQuantity,\n    clearAllQuantities,\n    exportToCsv,\n    collectTableData,\n    variantsWithQuantity,\n  } = useQuickOrderVariantsData({\n    initialVariants,\n    fetchVariants,\n    onVariantsLoaded,\n    onTableDataChange,\n    debounceMs,\n    initialLoading,\n  });\n\n  if (error) {\n    return (\n      <div\n        className={classes([\n          'b2b-quick-order-variants-grid-container',\n          'b2b-quick-order-variants-grid-container--error',\n          className,\n        ])}\n        data-testid=\"variants-grid-container-error\"\n      >\n        <p className=\"b2b-quick-order-variants-grid-container__error-message\">\n          {error}\n        </p>\n      </div>\n    );\n  }\n\n  if (variants.length === 0 && !loading) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classes([\n        'b2b-quick-order-variants-grid-container',\n        className,\n      ])}\n      data-testid=\"variants-grid-container\"\n    >\n      <QuickOrderVariantsActions\n        t={t}\n        onClear={clearAllQuantities}\n        onSaveToCsv={exportToCsv}\n        onCollectData={collectTableData}\n        isDisabled={loading}\n        variantsCount={variantsWithQuantity}\n        slots={slots}\n      />\n\n      <QuickOrderVariantsGridComponent\n        t={t}\n        variants={variants}\n        loading={loading}\n        onQuantityChange={updateQuantity}\n        initialVisibleVariantsCount={initialVisibleVariantsCount}\n        columns={columns}\n        slots={slots}\n      />\n    </div>\n  );\n};\n"],"names":["useQuickOrderVariantsData","initialVariants","fetchVariants","onVariantsLoaded","onTableDataChange","debounceMs","initialLoading","variants","setVariants","useState","variantsRef","useRef","loading","setLoading","error","setError","loadVariants","useCallback","variantsWithQuantity","variant","err","errorMessage","useEffect","variantsEvent","events","data","incomingVariants","debouncedTableDataChange","useMemo","debounce","updatedVariants","collectedData","v","acc","attr","_a","updateQuantity","sku","quantity","prevVariants","updated","clearAllQuantities","cleared","exportToCsv","variantsToExport","csvHeader","csvRows","csvContent","blob","link","url","timestamp","refetchVariants","collectTableData","QuickOrderVariantsGrid","className","initialVisibleVariantsCount","columns","slots","t","useText","jsx","classes","jsxs","QuickOrderVariantsActions","QuickOrderVariantsGridComponent"],"mappings":"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"}

package/containers/index.d.ts

@@ -17,4 +17,5 @@
 export * from './QuickOrderMultipleSku/QuickOrderMultipleSku';
 export * from './QuickOrderCsvUpload/QuickOrderCsvUpload';
 export * from './QuickOrderItems/QuickOrderItems';
+export * from './QuickOrderVariantsGrid/QuickOrderVariantsGrid';
 //# sourceMappingURL=index.d.ts.map

package/hooks/index.d.ts

@@ -19,4 +19,5 @@ export * from './useQuickOrderCsvUpload';
 export * from './useQuickOrderItems';
 export * from './useItemSearch';
 export * from './useSearch';
+export * from './useQuickOrderVariantsData';
 //# sourceMappingURL=index.d.ts.map

package/hooks/useQuickOrderVariantsData.d.ts

@@ -0,0 +1,4 @@
+import { UseQuickOrderVariantsDataProps, UseQuickOrderVariantsDataReturn } from '../types';
+
+export declare const useQuickOrderVariantsData: ({ initialVariants, fetchVariants, onVariantsLoaded, onTableDataChange, debounceMs, initialLoading, }?: UseQuickOrderVariantsDataProps) => UseQuickOrderVariantsDataReturn;
+//# sourceMappingURL=useQuickOrderVariantsData.d.ts.map

package/i18n/en_US.json.d.ts

@@ -67,6 +67,26 @@ declare const _default: {
                 "partialSuccess": "{count} of {total} products were added to the cart. Some products could not be added",
                 "unexpectedError": "An unexpected error has occurred"
             }
+        },
+        "VariantsGrid": {
+            "imageColumn": "Image",
+            "attributesColumn": "Attributes",
+            "variantColumn": "Variant",
+            "skuColumn": "SKU",
+            "availabilityColumn": "Availability",
+            "priceColumn": "Price",
+            "minOrderColumn": "Min Order / Pack Size",
+            "quantityColumn": "Quantity",
+            "subtotalColumn": "Subtotal",
+            "clearButton": "Clear",
+            "saveToCsvButton": "Save to CSV",
+            "collectDataButton": "Collect Data",
+            "inStock": "In Stock",
+            "outOfStock": "Out of Stock",
+            "tableCaption": "Product Variants Grid",
+            "quantityLabel": "Quantity for",
+            "showAll": "Show All Items",
+            "showLess": "Show Less"
         }
     }
 };

package/package.json

@@ -1 +1 @@
-{"name": "@dropins/storefront-quick-order", "version": "0.1.2-alpha2", "@dropins/tools": "~1.7.0", "license": "SEE LICENSE IN LICENSE.md"}
+{"name": "@dropins/storefront-quick-order", "version": "0.1.2-alpha3", "@dropins/tools": "~1.7.0", "license": "SEE LICENSE IN LICENSE.md"}

package/render.js

@@ -1,5 +1,6 @@
 /*! Copyright 2026 Adobe
 All Rights Reserved. */
-(function(i,o){try{if(typeof document<"u"){const r=document.createElement("style"),a=o.styleId;for(const e in o.attributes)r.setAttribute(e,o.attributes[e]);r.setAttribute("data-dropin",a),r.appendChild(document.createTextNode(i));const t=document.querySelector('style[data-dropin="sdk"]');if(t)t.after(r);else{const e=document.querySelector('link[rel="stylesheet"], style');e?e.before(r):document.head.append(r)}}}catch(r){console.error("dropin-styles (injectCodeFunction)",r)}})(".b2b-quick-order-quick-order-multiple-sku{display:flex;flex-direction:column;gap:var(--grid-1-gutters)}.b2b-quick-order-sku-list-input__title{color:var(--color-neutral-800);font:var(--type-headline-2-font);letter-spacing:var(--type-headline-2-letter-spacing);margin-bottom:var(--spacing-small)}.b2b-quick-order-sku-list-input__textarea{margin-bottom:var(--spacing-xsmall)}.b2b-quick-order-sku-list-input__message{font:var(--type-details-caption-2-font);letter-spacing:var(--type-details-caption-2-letter-spacing);margin-bottom:var(--spacing-xsmall);text-align:left}.b2b-quick-order-csv-file-input{display:flex;flex-direction:column;gap:var(--grid-1-gutters)}.b2b-quick-order-csv-file-input__title{color:var(--color-neutral-800);font:var(--type-headline-2-font);letter-spacing:var(--type-headline-2-letter-spacing)}.b2b-quick-order-csv-file-input__helper{font:var(--type-details-caption-2-font);letter-spacing:var(--type-details-caption-2-letter-spacing);text-align:left}.b2b-quick-order-csv-file-input__download-link{color:var(--color-informational-800);text-decoration:underline;background:none;border:none;padding:0;cursor:pointer;font-size:inherit}.b2b-quick-order-csv-file-input__download-link:hover{color:var(--color-informational-500)}.b2b-quick-order-csv-file-input__input-wrapper{margin-top:var(--spacing-xsmall);width:max-content}.b2b-quick-order-csv-file-input__input{width:100%}.b2b-quick-order-csv-file-input__input-wrapper--disabled button,.b2b-quick-order-csv-file-input__input-wrapper--disabled label,.b2b-quick-order-csv-file-input__input-wrapper--disabled .dropin-button{background:var(--color-neutral-300) 0 0% no-repeat padding-box!important;color:var(--color-neutral-500)!important;fill:var(--color-neutral-300)!important;pointer-events:none;-webkit-user-select:none;user-select:none;cursor:not-allowed!important}.b2b-quick-order-csv-file-input__input:has(input:disabled) button,.b2b-quick-order-csv-file-input__input:has(input:disabled) label{background:var(--color-neutral-300) 0 0% no-repeat padding-box;color:var(--color-neutral-500);fill:var(--color-neutral-300);pointer-events:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.b2b-quick-order-csv-file-input__input--loading{cursor:not-allowed;opacity:.3}.b2b-quick-order-csv-file-input__file-name{font:var(--type-body-2-default-font);letter-spacing:var(--type-body-2-default-letter-spacing)}.b2b-quick-order-csv-file-input__error{font:var(--type-details-caption-2-font);letter-spacing:var(--type-details-caption-2-letter-spacing);padding-top:var(--spacing-xsmall);text-align:left;color:var(--color-alert-800)}.b2b-quick-order-form-quick-order-items-list{width:100%}.b2b-quick-order-form-quick-order-items-list__title{color:var(--color-neutral-800);font:var(--type-headline-2-font);letter-spacing:var(--type-headline-2-letter-spacing);margin-bottom:var(--spacing-small)}.b2b-quick-order-form-quick-order-items-list__empty{color:var(--color-neutral-600);font:var(--type-body-1-font);letter-spacing:var(--type-body-1-letter-spacing);text-align:center;padding:var(--spacing-large)}.b2b-quick-order-form-quick-order-items-list__actions{display:flex;justify-content:flex-start;margin-top:var(--spacing-medium)}.b2b-quick-order-form-quick-order-items-list__warning{background-color:var(--color-warning-200, #fef3cd);border:1px solid var(--color-warning-500, #ff9800);border-radius:var(--shape-border-radius-2);padding:var(--spacing-medium);margin-bottom:var(--spacing-medium)}.b2b-quick-order-form-quick-order-items-list__warning-title{color:var(--color-warning-800, #e65100);font:var(--type-body-1-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing);margin-bottom:var(--spacing-xsmall)}.b2b-quick-order-form-quick-order-items-list__warning-description{color:var(--color-warning-700, #f57c00);font:var(--type-body-2-font);letter-spacing:var(--type-body-2-letter-spacing)}.b2b-quick-order-form-quick-order-items-list .dropin-divider--secondary{border-width:var(--shape-border-width-3);margin-top:0}@media screen and (max-width: 1285px){.b2b-quick-order-form-quick-order-items-list .dropin-divider--secondary{display:none}}.b2b-quick-order-form-quick-order-items-list__actions--disabled{background-color:red}.b2b-quick-order-form-quick-order-items__item-form{min-height:170px}.b2b-quick-order-form-quick-order-items__item-form .dropin-accordion-section__content-container{margin-bottom:0}.b2b-quick-order-form-quick-order-items__item-form:last-child{margin-bottom:var(--spacing-medium)}.b2b-quick-order-list-item__accordion .dropin-accordion-section__title{color:var(--color-neutral-800);font:var(--type-body-2-default-font);letter-spacing:var(--type-body-2-default-letter-spacing)}.b2b-quick-order-items__error{color:var(--color-alert-800);font:var(--type-details-caption-2-font);letter-spacing:var(--type-details-caption-2-letter-spacing)}.b2b-quick-order-form-quick-order-items__item-search{margin-bottom:var(--spacing-big)}.b2b-quick-order-items__configurable-error{color:var(--color-alert-500);font:var(--type-details-caption-2-font);letter-spacing:var(--type-details-caption-2-letter-spacing)}.b2b-quick-order-search{position:relative;width:100%}.b2b-quick-order-search__input{width:100%}.b2b-quick-order-search__results{position:absolute;top:100%;left:0;right:0;background-color:var(--color-neutral-50);border:var(--shape-border-width-1) solid var(--color-neutral-300);border-radius:var(--spacing-xxsmall);margin-top:var(--spacing-xxsmall);max-height:300px;overflow-y:auto;z-index:10;box-shadow:0 2px 8px #0000001a}.b2b-quick-order-search__result-item{padding:var(--spacing-xsmall) var(--spacing-small);cursor:pointer;transition:background-color .2s,outline .2s}.b2b-quick-order-search__result-item:hover{background-color:var(--color-neutral-100)}.b2b-quick-order-search__result-item--active,.b2b-quick-order-search__result-item[aria-selected=true]{background-color:var(--color-neutral-100);outline:2px solid var(--color-brand-500);outline-offset:-2px}.b2b-quick-order-search__result-item:not(:last-child){border-bottom:var(--shape-border-width-1) solid var(--color-neutral-200)}.b2b-quick-order-search__empty-state{position:absolute;top:100%;left:0;right:0;z-index:10;text-align:center;background-color:var(--color-neutral-50);border:var(--shape-border-width-1) solid var(--color-neutral-300);border-radius:var(--shape-border-radius-1);margin-top:var(--spacing-xxsmall);padding:var(--spacing-small);color:var(--color-neutral-600);box-shadow:0 2px 8px #0000001a}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.b2b-quick-order-notification-banner{margin-bottom:20px}.b2b-quick-order-notification-banner .dropin-alert-banner__message{max-width:500px}.b2b-quick-order-notification-banner--warning .dropin-alert-banner{background-color:var(--color-warning-500)}.b2b-quick-order-notification-banner--success .dropin-alert-banner{background-color:var(--color-positive-500)}.b2b-quick-order-notification-banner--neutral .dropin-alert-banner{background-color:var(--color-neutral-600)}.b2b-quick-order-notification-banner--brand .dropin-alert-banner{background-color:var(--color-brand-500)}.b2b-quick-order-disabled-overlay{position:relative}.b2b-quick-order-disabled-overlay__blur{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#ffffffb3;z-index:1}.b2b-quick-order-disabled-overlay__message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;font-size:16px;font-weight:500;color:#666;text-align:center;padding:20px}",{styleId:"b2b-quick-order"});
-import{jsx as o}from"@dropins/tools/preact-jsx-runtime.js";import{Render as n}from"@dropins/tools/lib.js";import{useState as d,useEffect as s}from"@dropins/tools/preact-hooks.js";import{UIProvider as l}from"@dropins/tools/components.js";import{events as u}from"@dropins/tools/event-bus.js";const c={Search:{placeholder:"Search by SKU...",ariaLabel:"Search for products by SKU",emptyState:"No results found",resultsAvailable:"results available",resultAvailable:"result available",srInstructions:"Use arrow keys or Tab to navigate, Enter or Space to select, Escape to close."},SkuListInput:{title:"Add Products by SKU",helperText:"Use commas or paragraphs to separate SKUs.",textArea:{label:"Enter Multiple SKUs",placeholder:"Enter SKUs here..."},button:"Add to List"},CsvFileInput:{title:"Add from File",helperText:'File must be in .csv format and include "SKU" and "QTY" columns ',downloadSample:"Download sample",inputLabel:"Choose File",selectedFile:"Selected file",uploadCSVErrors:{invalidFile:"Invalid CSV file",emptyFile:"File is empty",missingColumns:'Must contain "SKU" and "QTY" columns',extraColumns:'Must contain only "SKU" and "QTY" columns',maxRowsExceeded:"File exceeds maximum of {maxRows} rows",skuRequired:"Row {rowNumber}: SKU is required",invalidQuantity:"Row {rowNumber}: QTY must be a positive integer",noValidData:"File contains no valid data rows",onlyCSV:"Only CSV files are allowed",failedToRead:"Failed to read file",failedToParse:"Failed to parse CSV file"}},QuickOrderItem:{title:"Enter SKU or search by Product Name",quantity:"Quantity: ",price:"Price: ",sku:"SKU",remove:"Remove",removeItem:"Remove item",showOptions:"Show additional options",hideOptions:"Hide additional options",additionalOptions:"Additional options",noAdditionalOptions:"No additional options available",emptyList:"No products in the list",loading:"Loading...",productNotFound:"Product not found",productNotFoundDescription:"The product with SKU {sku} could not be found",configurableProductError:"Configuration required",configurableProductErrorDescription:"Use ProductOptions Slot in QuickOrderItems container to enable configurable product options.",configurableOptionsWarning:"Product configuration required",configurableOptionsWarningDescription:"Please select all required product options before adding to cart",productOptions:"Product Options",outOfStock:"Out of Stock",addAllToCart:"Add to Cart",disabledMessage:"Quick Order feature disabled",notification:{validationError:"Product(s) require(s) your attention",backendError:"An error occurred while adding products to the cart",success:"{count} product(s) successfully added to the cart",partialSuccess:"{count} of {total} products were added to the cart. Some products could not be added",unexpectedError:"An unexpected error has occurred"}}},p={QuickOrder:c},m={default:p},f=({children:t})=>{const[r,i]=d("en_US");return s(()=>{const e=u.on("locale",a=>{i(a)},{eager:!0});return()=>{e==null||e.off()}},[]),o(l,{lang:r,langDefinitions:m,children:t})},U=new n(o(f,{}));export{U as render};
+(function(t,i){try{if(typeof document<"u"){const r=document.createElement("style"),a=i.styleId;for(const e in i.attributes)r.setAttribute(e,i.attributes[e]);r.setAttribute("data-dropin",a),r.appendChild(document.createTextNode(t));const o=document.querySelector('style[data-dropin="sdk"]');if(o)o.after(r);else{const e=document.querySelector('link[rel="stylesheet"], style');e?e.before(r):document.head.append(r)}}}catch(r){console.error("dropin-styles (injectCodeFunction)",r)}})(`.b2b-quick-order-variants-grid{width:100%}.b2b-quick-order-variants-grid .dropin-table__header__row th{padding:var(--spacing-small) var(--spacing-xsmall)}.b2b-quick-order-variants-grid .dropin-table__body__cell{padding:var(--spacing-xsmall) var(--spacing-xsmall)}.b2b-quick-order-variants-grid__table{width:100%}.b2b-quick-order-variants-grid__image{width:64px;height:64px;object-fit:cover;border-radius:var(--border-radius-small, 4px);display:block}.b2b-quick-order-variants-grid__variant{display:flex;flex-direction:column;gap:4px}.b2b-quick-order-variants-grid__attribute{font-size:14px;line-height:1.4}.b2b-quick-order-variants-grid__attribute strong{font-weight:600;margin-right:4px}.b2b-quick-order-variants-grid__availability{font-size:14px;font-weight:500;padding:4px 8px;border-radius:var(--border-radius-small, 4px)}.b2b-quick-order-variants-grid__availability--in-stock{color:var(--color-success-text, #1a7f37);background-color:var(--color-success-bg, #d1f4dd)}.b2b-quick-order-variants-grid__availability--in-stock .dropin-tag-container__label{color:var(--color-success-text, #1a7f37)}.b2b-quick-order-variants-grid__availability--out-of-stock{color:var(--color-error-text, #d1242f);background-color:var(--color-error-bg, #ffe0e0)}.b2b-quick-order-variants-grid__availability--out-of-stock .dropin-tag-container__label{color:var(--color-error-text, #d1242f)}.b2b-quick-order-variants-grid__quantity-input{width:min-content;padding:8px;border-radius:var(--border-radius-small, 4px);font-size:14px;text-align:center}.b2b-quick-order-variants-grid__quantity-input:focus{outline:2px solid var(--color-primary, #0066cc);outline-offset:2px}.b2b-quick-order-variants-grid__quantity-input:disabled{background-color:var(--color-disabled-bg, #f5f5f5);color:var(--color-disabled-text, #999);cursor:not-allowed;opacity:.6;border-color:var(--color-border-disabled, #e0e0e0)}.b2b-quick-order-variants-grid__footer{display:flex;justify-content:center;margin-top:var(--spacing-medium, 16px);padding-top:var(--spacing-medium, 16px);border-top:1px solid var(--color-border, #e0e0e0)}.b2b-quick-order-variants-grid__toggle-button{min-width:200px}@media (max-width: 600px){.b2b-quick-order-variants-grid__image{width:48px;height:48px}.b2b-quick-order-variants-grid__quantity-input{width:100%}.b2b-quick-order-variants-grid__attribute{font-size:12px}}.b2b-quick-order-variants-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--spacing-medium, 16px);gap:var(--spacing-small, 8px)}.b2b-quick-order-variants-actions__buttons{display:flex;gap:var(--spacing-small, 8px)}@media (max-width: 600px){.b2b-quick-order-variants-actions{flex-direction:column;align-items:stretch}.b2b-quick-order-variants-actions__buttons{flex-direction:column;width:100%}}
+.b2b-quick-order-quick-order-multiple-sku{display:flex;flex-direction:column;gap:var(--grid-1-gutters)}.b2b-quick-order-sku-list-input__title{color:var(--color-neutral-800);font:var(--type-headline-2-font);letter-spacing:var(--type-headline-2-letter-spacing);margin-bottom:var(--spacing-small)}.b2b-quick-order-sku-list-input__textarea{margin-bottom:var(--spacing-xsmall)}.b2b-quick-order-sku-list-input__message{font:var(--type-details-caption-2-font);letter-spacing:var(--type-details-caption-2-letter-spacing);margin-bottom:var(--spacing-xsmall);text-align:left}.b2b-quick-order-csv-file-input{display:flex;flex-direction:column;gap:var(--grid-1-gutters)}.b2b-quick-order-csv-file-input__title{color:var(--color-neutral-800);font:var(--type-headline-2-font);letter-spacing:var(--type-headline-2-letter-spacing)}.b2b-quick-order-csv-file-input__helper{font:var(--type-details-caption-2-font);letter-spacing:var(--type-details-caption-2-letter-spacing);text-align:left}.b2b-quick-order-csv-file-input__download-link{color:var(--color-informational-800);text-decoration:underline;background:none;border:none;padding:0;cursor:pointer;font-size:inherit}.b2b-quick-order-csv-file-input__download-link:hover{color:var(--color-informational-500)}.b2b-quick-order-csv-file-input__input-wrapper{margin-top:var(--spacing-xsmall);width:max-content}.b2b-quick-order-csv-file-input__input{width:100%}.b2b-quick-order-csv-file-input__input-wrapper--disabled button,.b2b-quick-order-csv-file-input__input-wrapper--disabled label,.b2b-quick-order-csv-file-input__input-wrapper--disabled .dropin-button{background:var(--color-neutral-300) 0 0% no-repeat padding-box!important;color:var(--color-neutral-500)!important;fill:var(--color-neutral-300)!important;pointer-events:none;-webkit-user-select:none;user-select:none;cursor:not-allowed!important}.b2b-quick-order-csv-file-input__input:has(input:disabled) button,.b2b-quick-order-csv-file-input__input:has(input:disabled) label{background:var(--color-neutral-300) 0 0% no-repeat padding-box;color:var(--color-neutral-500);fill:var(--color-neutral-300);pointer-events:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.b2b-quick-order-csv-file-input__input--loading{cursor:not-allowed;opacity:.3}.b2b-quick-order-csv-file-input__file-name{font:var(--type-body-2-default-font);letter-spacing:var(--type-body-2-default-letter-spacing)}.b2b-quick-order-csv-file-input__error{font:var(--type-details-caption-2-font);letter-spacing:var(--type-details-caption-2-letter-spacing);padding-top:var(--spacing-xsmall);text-align:left;color:var(--color-alert-800)}.b2b-quick-order-form-quick-order-items-list{width:100%}.b2b-quick-order-form-quick-order-items-list__title{color:var(--color-neutral-800);font:var(--type-headline-2-font);letter-spacing:var(--type-headline-2-letter-spacing);margin-bottom:var(--spacing-small)}.b2b-quick-order-form-quick-order-items-list__empty{color:var(--color-neutral-600);font:var(--type-body-1-font);letter-spacing:var(--type-body-1-letter-spacing);text-align:center;padding:var(--spacing-large)}.b2b-quick-order-form-quick-order-items-list__actions{display:flex;justify-content:flex-start;margin-top:var(--spacing-medium)}.b2b-quick-order-form-quick-order-items-list__warning{background-color:var(--color-warning-200, #fef3cd);border:1px solid var(--color-warning-500, #ff9800);border-radius:var(--shape-border-radius-2);padding:var(--spacing-medium);margin-bottom:var(--spacing-medium)}.b2b-quick-order-form-quick-order-items-list__warning-title{color:var(--color-warning-800, #e65100);font:var(--type-body-1-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing);margin-bottom:var(--spacing-xsmall)}.b2b-quick-order-form-quick-order-items-list__warning-description{color:var(--color-warning-700, #f57c00);font:var(--type-body-2-font);letter-spacing:var(--type-body-2-letter-spacing)}.b2b-quick-order-form-quick-order-items-list .dropin-divider--secondary{border-width:var(--shape-border-width-3);margin-top:0}@media screen and (max-width: 1285px){.b2b-quick-order-form-quick-order-items-list .dropin-divider--secondary{display:none}}.b2b-quick-order-form-quick-order-items-list__actions--disabled{background-color:red}.b2b-quick-order-form-quick-order-items__item-form{min-height:170px}.b2b-quick-order-form-quick-order-items__item-form .dropin-accordion-section__content-container{margin-bottom:0}.b2b-quick-order-form-quick-order-items__item-form:last-child{margin-bottom:var(--spacing-medium)}.b2b-quick-order-list-item__accordion .dropin-accordion-section__title{color:var(--color-neutral-800);font:var(--type-body-2-default-font);letter-spacing:var(--type-body-2-default-letter-spacing)}.b2b-quick-order-items__error{color:var(--color-alert-800);font:var(--type-details-caption-2-font);letter-spacing:var(--type-details-caption-2-letter-spacing)}.b2b-quick-order-form-quick-order-items__item-search{margin-bottom:var(--spacing-big)}.b2b-quick-order-items__configurable-error{color:var(--color-alert-500);font:var(--type-details-caption-2-font);letter-spacing:var(--type-details-caption-2-letter-spacing)}.b2b-quick-order-search{position:relative;width:100%}.b2b-quick-order-search__input{width:100%}.b2b-quick-order-search__results{position:absolute;top:100%;left:0;right:0;background-color:var(--color-neutral-50);border:var(--shape-border-width-1) solid var(--color-neutral-300);border-radius:var(--spacing-xxsmall);margin-top:var(--spacing-xxsmall);max-height:300px;overflow-y:auto;z-index:10;box-shadow:0 2px 8px #0000001a}.b2b-quick-order-search__result-item{padding:var(--spacing-xsmall) var(--spacing-small);cursor:pointer;transition:background-color .2s,outline .2s}.b2b-quick-order-search__result-item:hover{background-color:var(--color-neutral-100)}.b2b-quick-order-search__result-item--active,.b2b-quick-order-search__result-item[aria-selected=true]{background-color:var(--color-neutral-100);outline:2px solid var(--color-brand-500);outline-offset:-2px}.b2b-quick-order-search__result-item:not(:last-child){border-bottom:var(--shape-border-width-1) solid var(--color-neutral-200)}.b2b-quick-order-search__empty-state{position:absolute;top:100%;left:0;right:0;z-index:10;text-align:center;background-color:var(--color-neutral-50);border:var(--shape-border-width-1) solid var(--color-neutral-300);border-radius:var(--shape-border-radius-1);margin-top:var(--spacing-xxsmall);padding:var(--spacing-small);color:var(--color-neutral-600);box-shadow:0 2px 8px #0000001a}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.b2b-quick-order-notification-banner{margin-bottom:20px}.b2b-quick-order-notification-banner .dropin-alert-banner__message{max-width:500px}.b2b-quick-order-notification-banner--warning .dropin-alert-banner{background-color:var(--color-warning-500)}.b2b-quick-order-notification-banner--success .dropin-alert-banner{background-color:var(--color-positive-500)}.b2b-quick-order-notification-banner--neutral .dropin-alert-banner{background-color:var(--color-neutral-600)}.b2b-quick-order-notification-banner--brand .dropin-alert-banner{background-color:var(--color-brand-500)}.b2b-quick-order-disabled-overlay{position:relative}.b2b-quick-order-disabled-overlay__blur{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#ffffffb3;z-index:1}.b2b-quick-order-disabled-overlay__message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;font-size:16px;font-weight:500;color:#666;text-align:center;padding:20px}`,{styleId:"b2b-quick-order"});
+import{jsx as t}from"@dropins/tools/preact-jsx-runtime.js";import{Render as n}from"@dropins/tools/lib.js";import{useState as l,useEffect as s}from"@dropins/tools/preact-hooks.js";import{UIProvider as d}from"@dropins/tools/components.js";import{events as u}from"@dropins/tools/event-bus.js";const c={Search:{placeholder:"Search by SKU...",ariaLabel:"Search for products by SKU",emptyState:"No results found",resultsAvailable:"results available",resultAvailable:"result available",srInstructions:"Use arrow keys or Tab to navigate, Enter or Space to select, Escape to close."},SkuListInput:{title:"Add Products by SKU",helperText:"Use commas or paragraphs to separate SKUs.",textArea:{label:"Enter Multiple SKUs",placeholder:"Enter SKUs here..."},button:"Add to List"},CsvFileInput:{title:"Add from File",helperText:'File must be in .csv format and include "SKU" and "QTY" columns ',downloadSample:"Download sample",inputLabel:"Choose File",selectedFile:"Selected file",uploadCSVErrors:{invalidFile:"Invalid CSV file",emptyFile:"File is empty",missingColumns:'Must contain "SKU" and "QTY" columns',extraColumns:'Must contain only "SKU" and "QTY" columns',maxRowsExceeded:"File exceeds maximum of {maxRows} rows",skuRequired:"Row {rowNumber}: SKU is required",invalidQuantity:"Row {rowNumber}: QTY must be a positive integer",noValidData:"File contains no valid data rows",onlyCSV:"Only CSV files are allowed",failedToRead:"Failed to read file",failedToParse:"Failed to parse CSV file"}},QuickOrderItem:{title:"Enter SKU or search by Product Name",quantity:"Quantity: ",price:"Price: ",sku:"SKU",remove:"Remove",removeItem:"Remove item",showOptions:"Show additional options",hideOptions:"Hide additional options",additionalOptions:"Additional options",noAdditionalOptions:"No additional options available",emptyList:"No products in the list",loading:"Loading...",productNotFound:"Product not found",productNotFoundDescription:"The product with SKU {sku} could not be found",configurableProductError:"Configuration required",configurableProductErrorDescription:"Use ProductOptions Slot in QuickOrderItems container to enable configurable product options.",configurableOptionsWarning:"Product configuration required",configurableOptionsWarningDescription:"Please select all required product options before adding to cart",productOptions:"Product Options",outOfStock:"Out of Stock",addAllToCart:"Add to Cart",disabledMessage:"Quick Order feature disabled",notification:{validationError:"Product(s) require(s) your attention",backendError:"An error occurred while adding products to the cart",success:"{count} product(s) successfully added to the cart",partialSuccess:"{count} of {total} products were added to the cart. Some products could not be added",unexpectedError:"An unexpected error has occurred"}},VariantsGrid:{imageColumn:"Image",attributesColumn:"Attributes",variantColumn:"Variant",skuColumn:"SKU",availabilityColumn:"Availability",priceColumn:"Price",minOrderColumn:"Min Order / Pack Size",quantityColumn:"Quantity",subtotalColumn:"Subtotal",clearButton:"Clear",saveToCsvButton:"Save to CSV",collectDataButton:"Collect Data",inStock:"In Stock",outOfStock:"Out of Stock",tableCaption:"Product Variants Grid",quantityLabel:"Quantity for",showAll:"Show All Items",showLess:"Show Less"}},p={QuickOrder:c},m={default:p},S=({children:o})=>{const[r,i]=l("en_US");return s(()=>{const e=u.on("locale",a=>{i(a)},{eager:!0});return()=>{e==null||e.off()}},[]),t(d,{lang:r,langDefinitions:m,children:o})},g=new n(t(S,{}));export{g as render};
 //# sourceMappingURL=render.js.map

package/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","sources":["/@dropins/storefront-quick-order/src/render/Provider.tsx","/@dropins/storefront-quick-order/src/render/render.tsx"],"sourcesContent":["import { FunctionComponent } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport { UIProvider } from '@adobe-commerce/elsie/components';\nimport { Lang } from '@adobe-commerce/elsie/i18n';\nimport { events } from '@adobe-commerce/event-bus';\n\nimport en_US from '../i18n/en_US.json';\n\n// Langs\nconst langDefinitions = {\n  default: en_US,\n};\n\ninterface CartProviderProps {\n  children?: any;\n}\n\nexport const Provider: FunctionComponent<CartProviderProps> = ({\n  children,\n}) => {\n  const [lang, setLang] = useState<Lang>('en_US');\n\n  //   Events\n  useEffect(() => {\n    const localeEvent = events.on(\n      'locale',\n      (locale: string) => {\n        setLang(locale as Lang);\n      },\n      { eager: true }\n    );\n    return () => {\n      localeEvent?.off();\n    };\n  }, []);\n\n  return (\n    <UIProvider lang={lang} langDefinitions={langDefinitions}>\n      {children}\n    </UIProvider>\n  );\n};\n","import { Render } from '@adobe-commerce/elsie/lib';\nimport { Provider } from './Provider';\n\nexport const render = new Render(<Provider />);\n"],"names":["langDefinitions","en_US","Provider","children","lang","setLang","useState","useEffect","localeEvent","events","locale","jsx","UIProvider","render","Render"],"mappings":"mwFASMA,EAAkB,CACtB,QAASC,CACX,EAMaC,EAAiD,CAAC,CAC7D,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAe,OAAO,EAG9C,OAAAC,EAAU,IAAM,CACd,MAAMC,EAAcC,EAAO,GACzB,SACCC,GAAmB,CAClBL,EAAQK,CAAc,CACxB,EACA,CAAE,MAAO,EAAA,CAAK,EAEhB,MAAO,IAAM,CACXF,GAAA,MAAAA,EAAa,KACf,CACF,EAAG,CAAA,CAAE,EAGHG,EAACC,EAAA,CAAW,KAAAR,EAAY,gBAAAJ,EACrB,SAAAG,CAAA,CACH,CAEJ,ECtCaU,EAAS,IAAIC,EAAOH,EAACT,IAAS,CAAE"}
+{"version":3,"file":"render.js","sources":["/@dropins/storefront-quick-order/src/render/Provider.tsx","/@dropins/storefront-quick-order/src/render/render.tsx"],"sourcesContent":["import { FunctionComponent } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport { UIProvider } from '@adobe-commerce/elsie/components';\nimport { Lang } from '@adobe-commerce/elsie/i18n';\nimport { events } from '@adobe-commerce/event-bus';\n\nimport en_US from '../i18n/en_US.json';\n\n// Langs\nconst langDefinitions = {\n  default: en_US,\n};\n\ninterface CartProviderProps {\n  children?: any;\n}\n\nexport const Provider: FunctionComponent<CartProviderProps> = ({\n  children,\n}) => {\n  const [lang, setLang] = useState<Lang>('en_US');\n\n  //   Events\n  useEffect(() => {\n    const localeEvent = events.on(\n      'locale',\n      (locale: string) => {\n        setLang(locale as Lang);\n      },\n      { eager: true }\n    );\n    return () => {\n      localeEvent?.off();\n    };\n  }, []);\n\n  return (\n    <UIProvider lang={lang} langDefinitions={langDefinitions}>\n      {children}\n    </UIProvider>\n  );\n};\n","import { Render } from '@adobe-commerce/elsie/lib';\nimport { Provider } from './Provider';\n\nexport const render = new Render(<Provider />);\n"],"names":["langDefinitions","en_US","Provider","children","lang","setLang","useState","useEffect","localeEvent","events","locale","jsx","UIProvider","render","Render"],"mappings":"6uGASMA,EAAkB,CACtB,QAASC,CACX,EAMaC,EAAiD,CAAC,CAC7D,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAe,OAAO,EAG9C,OAAAC,EAAU,IAAM,CACd,MAAMC,EAAcC,EAAO,GACzB,SACCC,GAAmB,CAClBL,EAAQK,CAAc,CACxB,EACA,CAAE,MAAO,EAAA,CAAK,EAEhB,MAAO,IAAM,CACXF,GAAA,MAAAA,EAAa,KACf,CACF,EAAG,CAAA,CAAE,EAGHG,EAACC,EAAA,CAAW,KAAAR,EAAY,gBAAAJ,EACrB,SAAAG,CAAA,CACH,CAEJ,ECtCaU,EAAS,IAAIC,EAAOH,EAACT,IAAS,CAAE"}

package/types/index.d.ts

@@ -20,4 +20,5 @@ export * from './quickOrderItems.types';
 export * from './search.types';
 export * from './quickOrderNotificationBanner.types';
 export * from './quickOrderDisabledOverlay.types';
+export * from './quickOrderVariantsGrid.types';
 //# sourceMappingURL=index.d.ts.map

package/types/quickOrderVariantsGrid.types.d.ts

@@ -0,0 +1,135 @@
+import { SlotProps } from '@dropins/tools/types/elsie/src/lib/slot';
+import { VNode } from 'preact';
+
+export interface ProductVariantAttribute {
+    name: string;
+    label: string;
+    value: string | number;
+    roles: string[];
+}
+export interface ProductVariantImage {
+    url: string;
+}
+export interface ProductVariantPrice {
+    final: {
+        amount: {
+            currency: string;
+            value: number;
+        };
+    };
+}
+export interface ProductVariant {
+    product: {
+        sku: string;
+        name: string;
+        inStock: boolean;
+        images: ProductVariantImage[];
+        attributes: ProductVariantAttribute[];
+        price: ProductVariantPrice;
+    };
+}
+export interface VariantRow {
+    id: string;
+    image: VNode | string;
+    variant: VNode | string;
+    sku: VNode | string;
+    availability: VNode | string;
+    price: VNode | string;
+    quantity: VNode | number;
+    subtotal: VNode | string;
+    [key: string]: VNode | string | number | undefined;
+}
+export interface VariantWithQuantity extends ProductVariant {
+    quantity: number;
+}
+export type VariantActionsContext = {
+    onClear: () => void;
+    onSaveToCsv: () => void;
+    onCollectData: () => any[];
+    isDisabled: boolean;
+    variantsCount: number;
+};
+export type VariantCellContext = {
+    variant: ProductVariant;
+    quantity: number;
+    onQuantityChange: (sku: string, quantity: number) => void;
+};
+export interface UseQuickOrderVariantsDataProps {
+    initialVariants?: ProductVariant[];
+    fetchVariants?: () => Promise<ProductVariant[]>;
+    onVariantsLoaded?: (variants: VariantWithQuantity[]) => void;
+    onTableDataChange?: (data: any[]) => void;
+    debounceMs?: number;
+    initialLoading?: boolean;
+}
+export interface UseQuickOrderVariantsDataReturn {
+    variants: VariantWithQuantity[];
+    loading: boolean;
+    error: string | null;
+    updateQuantity: (sku: string, quantity: number) => void;
+    clearAllQuantities: () => void;
+    exportToCsv: () => void;
+    refetchVariants: () => Promise<void>;
+    collectTableData: () => any[];
+    variantsWithQuantity: number;
+}
+export interface QuickOrderVariantsActionsProps {
+    t: Record<string, string>;
+    onClear: () => void;
+    onSaveToCsv: () => void;
+    onCollectData?: () => any[];
+    isDisabled?: boolean;
+    variantsCount?: number;
+    className?: string;
+    slots?: {
+        Actions?: SlotProps<VariantActionsContext>;
+    };
+}
+export interface QuickOrderVariantsGridComponentProps {
+    t: Record<string, string>;
+    variants: VariantWithQuantity[];
+    loading?: boolean;
+    className?: string;
+    onQuantityChange: (sku: string, quantity: number) => void;
+    initialVisibleVariantsCount?: number;
+    columns?: Array<{
+        key: string;
+        label: string;
+        sortBy?: 'asc' | 'desc' | true;
+    }>;
+    slots?: {
+        ImageCell?: SlotProps<VariantCellContext>;
+        VariantCell?: SlotProps<VariantCellContext>;
+        SKUCell?: SlotProps<VariantCellContext>;
+        AvailabilityCell?: SlotProps<VariantCellContext>;
+        PriceCell?: SlotProps<VariantCellContext>;
+        QuantityCell?: SlotProps<VariantCellContext>;
+        SubtotalCell?: SlotProps<VariantCellContext>;
+    } & Record<string, SlotProps<VariantCellContext> | undefined>;
+}
+export interface QuickOrderVariantsGridProps {
+    className?: string;
+    variants?: ProductVariant[];
+    fetchVariants?: () => Promise<ProductVariant[]>;
+    onVariantsLoaded?: (variants: VariantWithQuantity[]) => void;
+    onTableDataChange?: (data: any[]) => void;
+    debounceMs?: number;
+    initialLoading?: boolean;
+    initialVisibleVariantsCount?: number;
+    columns?: Array<{
+        key: string;
+        label: string;
+        sortBy?: 'asc' | 'desc' | true;
+    }>;
+    slots?: {
+        Actions?: SlotProps<VariantActionsContext>;
+        ImageCell?: SlotProps<VariantCellContext>;
+        VariantCell?: SlotProps<VariantCellContext>;
+        SKUCell?: SlotProps<VariantCellContext>;
+        AvailabilityCell?: SlotProps<VariantCellContext>;
+        PriceCell?: SlotProps<VariantCellContext>;
+        QuantityCell?: SlotProps<VariantCellContext>;
+        SubtotalCell?: SlotProps<VariantCellContext>;
+    } & Record<string, SlotProps<VariantActionsContext | VariantCellContext> | undefined>;
+}
+//# sourceMappingURL=quickOrderVariantsGrid.types.d.ts.map