@dropins/storefront-pdp 3.0.3-beta2 → 3.0.3-beta3

package/containers/ProductAttributes/ProductAttributes.d.ts

@@ -7,6 +7,7 @@ type DefaultSlotContext = {
 };
 export interface ProductAttributesProps extends HTMLAttributes<HTMLDivElement> {
     scope?: string;
+    formatValue?: (value: string, id: string, label: string) => string;
     slots?: {
         Attributes?: SlotProps<DefaultSlotContext>;
     };

package/containers/ProductAttributes.js

@@ -1,4 +1,4 @@
 /*! Copyright 2026 Adobe
 All Rights Reserved. */
-import{jsxs as l,jsx as i}from"@dropins/tools/preact-jsx-runtime.js";import{useState as s,useMemo as P,useEffect as A}from"@dropins/tools/preact-compat.js";import{classes as L,Slot as _}from"@dropins/tools/lib.js";import{events as u}from"@dropins/tools/event-bus.js";import{i as j,t as C}from"../chunks/date.js";import{g as I}from"../chunks/getFetchedProductData.js";import{useText as M}from"@dropins/tools/i18n.js";import{c as N}from"../chunks/fetchProductData.js";import"../fragments.js";import"@dropins/tools/fetch-graphql.js";import"../chunks/getProductConfigurationValues.js";import"../chunks/isProductConfigurationValid.js";const T=({initialData:f=null,scope:n,children:y,slots:e,...c})=>{var m;const p=M("PDP.Product.Details.label").label,{globalLocale:b="en-US"}=N.getConfig(),[d,g]=s(b),[r,D]=s(f),h=P(()=>({data:r}),[r]);return A(()=>{const t=u.on("pdp/data",D,{scope:n}),o=u.on("locale",g);return()=>{t==null||t.off(),o==null||o.off()}},[n]),r?l("div",{...c,className:L(["pdp-attributes",c.className]),children:[p,e!=null&&e.Attributes?i(_,{name:"Attributes",slot:e==null?void 0:e.Attributes,context:{...h}}):i("ul",{children:(m=r==null?void 0:r.attributes)==null?void 0:m.map(({id:t,label:o,value:a},S)=>{if(t!=null&&t.startsWith("ac_")||!a)return null;const x=j(a)?C(a,d):a.toString();return l("li",{children:[o,": ",i("span",{dangerouslySetInnerHTML:{__html:x}})]},`attribute-${S}`)})})]}):null};T.getInitialData=I;export{T as ProductAttributes,T as default};
+import{jsxs as u,jsx as a}from"@dropins/tools/preact-jsx-runtime.js";import{useState as f,useMemo as L,useEffect as _}from"@dropins/tools/preact-compat.js";import{classes as j,Slot as C}from"@dropins/tools/lib.js";import{events as p}from"@dropins/tools/event-bus.js";import{i as I,t as M}from"../chunks/date.js";import{g as N}from"../chunks/getFetchedProductData.js";import{useText as T}from"@dropins/tools/i18n.js";import{c as y}from"../chunks/fetchProductData.js";import"../fragments.js";import"@dropins/tools/fetch-graphql.js";import"../chunks/getProductConfigurationValues.js";import"../chunks/isProductConfigurationValid.js";const F=({initialData:b=null,scope:i,children:H,slots:e,formatValue:c,...m})=>{var s;const d=T("PDP.Product.Details.label").label,{globalLocale:g="en-US"}=y.getConfig(),[D,h]=f(g),[r,S]=f(b),x=L(()=>({data:r}),[r]);return _(()=>{const t=p.on("pdp/data",S,{scope:i}),o=p.on("locale",h);return()=>{t==null||t.off(),o==null||o.off()}},[i]),r?u("div",{...m,className:j(["pdp-attributes",m.className]),children:[d,e!=null&&e.Attributes?a(C,{name:"Attributes",slot:e==null?void 0:e.Attributes,context:{...x}}):a("ul",{children:(s=r==null?void 0:r.attributes)==null?void 0:s.map(({id:t,label:o,value:n},P)=>{if(t!=null&&t.startsWith("ac_")||!n)return null;const l=I(n)?M(n,D):n.toString(),A=c?c(l,t,o):l;return u("li",{children:[o,": ",a("span",{dangerouslySetInnerHTML:{__html:A}})]},`attribute-${P}`)})})]}):null};F.getInitialData=N;export{F as ProductAttributes,F as default};
 //# sourceMappingURL=ProductAttributes.js.map

package/containers/ProductAttributes.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductAttributes.js","sources":["/@dropins/storefront-pdp/src/containers/ProductAttributes/ProductAttributes.tsx"],"sourcesContent":["/**\n * ADOBE CONFIDENTIAL\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 { HTMLAttributes, useEffect, useState, useMemo } from 'preact/compat';\nimport { classes, Container, Slot, SlotProps } from '@adobe-commerce/elsie/lib';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { events } from '@adobe-commerce/event-bus';\nimport { ProductModel } from '@/pdp/data/models';\nimport { isDateValid, toDateString } from '@/pdp/lib/date';\nimport { config, getFetchedProductData } from '@/pdp/api';\n\ntype DefaultSlotContext = {\n  data: ProductModel | null;\n};\n\nexport interface ProductAttributesProps extends HTMLAttributes<HTMLDivElement> {\n  scope?: string;\n  slots?: {\n    Attributes?: SlotProps<DefaultSlotContext>;\n  };\n}\n\nexport const ProductAttributes: Container<\n  ProductAttributesProps,\n  ProductModel | null\n> = ({ initialData = null, scope, children, slots, ...props }) => {\n  const DetailsLabel = useText('PDP.Product.Details.label').label;\n  const { globalLocale = 'en-US' } = config.getConfig();\n\n  const [locale, setLocale] = useState<string>(globalLocale);\n  const [data, setData] = useState<ProductModel | null>(initialData);\n\n  const defaultSlotContext: DefaultSlotContext = useMemo(\n    () => ({ data }),\n    [data]\n  );\n\n  // Listen for events\n  useEffect(() => {\n    const dataEvent = events.on('pdp/data', setData, { scope });\n    const localeEvent = events.on('locale', setLocale);\n\n    return () => {\n      dataEvent?.off();\n      localeEvent?.off();\n    };\n  }, [scope]);\n\n  if (!data) return null;\n\n  return (\n    <div {...props} className={classes(['pdp-attributes', props.className])}>\n      {DetailsLabel}\n      {slots?.Attributes ? (\n        <Slot\n          name=\"Attributes\"\n          slot={slots?.Attributes}\n          context={{ ...defaultSlotContext }}\n        />\n      ) : (\n        <ul>\n          {data?.attributes?.map(\n            (\n              { id, label, value }: { id: string; label: string; value: any },\n              index: number\n            ) => {\n              if (id?.startsWith('ac_') || !value) {\n                return null;\n              }\n\n              const __html = isDateValid(value)\n                ? toDateString(value, locale)\n                : value.toString();\n\n              return (\n                <li key={`attribute-${index}`}>\n                  {/* eslint-disable-next-line react/no-danger */}\n                  {label}: <span dangerouslySetInnerHTML={{ __html }} />\n                </li>\n              );\n            }\n          )}\n        </ul>\n      )}\n    </div>\n  );\n};\n\nProductAttributes.getInitialData = getFetchedProductData;\n"],"names":["ProductAttributes","initialData","scope","children","slots","props","DetailsLabel","useText","globalLocale","config","locale","setLocale","useState","data","setData","defaultSlotContext","useMemo","useEffect","dataEvent","events","localeEvent","jsxs","classes","jsx","Slot","_a","id","label","value","index","__html","isDateValid","toDateString","getFetchedProductData"],"mappings":"snBAmCa,MAAAA,EAGT,CAAC,CAAE,YAAAC,EAAc,KAAM,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAO,GAAGC,KAAY,OAC1D,MAAAC,EAAeC,EAAQ,2BAA2B,EAAE,MACpD,CAAE,aAAAC,EAAe,SAAYC,EAAO,UAAU,EAE9C,CAACC,EAAQC,CAAS,EAAIC,EAAiBJ,CAAY,EACnD,CAACK,EAAMC,CAAO,EAAIF,EAA8BX,CAAW,EAE3Dc,EAAyCC,EAC7C,KAAO,CAAE,KAAAH,CAAK,GACd,CAACA,CAAI,CACP,EAaI,OAVJI,EAAU,IAAM,CACd,MAAMC,EAAYC,EAAO,GAAG,WAAYL,EAAS,CAAE,MAAAZ,EAAO,EACpDkB,EAAcD,EAAO,GAAG,SAAUR,CAAS,EAEjD,MAAO,IAAM,CACXO,GAAA,MAAAA,EAAW,MACXE,GAAA,MAAAA,EAAa,KACf,CAAA,EACC,CAAClB,CAAK,CAAC,EAELW,EAGHQ,EAAC,MAAK,CAAA,GAAGhB,EAAO,UAAWiB,EAAQ,CAAC,iBAAkBjB,EAAM,SAAS,CAAC,EACnE,SAAA,CAAAC,EACAF,GAAA,MAAAA,EAAO,WACNmB,EAACC,EAAA,CACC,KAAK,aACL,KAAMpB,GAAA,YAAAA,EAAO,WACb,QAAS,CAAE,GAAGW,CAAmB,CAAA,CAAA,EAGnCQ,EAAC,KACE,CAAA,UAAAE,EAAAZ,GAAA,YAAAA,EAAM,aAAN,YAAAY,EAAkB,IACjB,CACE,CAAE,GAAAC,EAAI,MAAAC,EAAO,MAAAC,CAAA,EACbC,IACG,CACH,GAAIH,GAAA,MAAAA,EAAI,WAAW,QAAU,CAACE,EACrB,OAAA,KAGH,MAAAE,EAASC,EAAYH,CAAK,EAC5BI,EAAaJ,EAAOlB,CAAM,EAC1BkB,EAAM,SAAS,EAEnB,SACG,KAEE,CAAA,SAAA,CAAAD,EAAM,KAAGJ,EAAA,OAAA,CAAK,wBAAyB,CAAE,OAAAO,EAAU,CAAA,CAF7C,CAAA,EAAA,aAAaD,CAAK,EAG3B,CAAA,EAIR,CAAA,CAAA,EAEJ,EApCgB,IAsCpB,EAEA7B,EAAkB,eAAiBiC"}
+{"version":3,"file":"ProductAttributes.js","sources":["/@dropins/storefront-pdp/src/containers/ProductAttributes/ProductAttributes.tsx"],"sourcesContent":["/**\n * ADOBE CONFIDENTIAL\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 { HTMLAttributes, useEffect, useState, useMemo } from 'preact/compat';\nimport { classes, Container, Slot, SlotProps } from '@adobe-commerce/elsie/lib';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { events } from '@adobe-commerce/event-bus';\nimport { ProductModel } from '@/pdp/data/models';\nimport { isDateValid, toDateString } from '@/pdp/lib/date';\nimport { config, getFetchedProductData } from '@/pdp/api';\n\ntype DefaultSlotContext = {\n  data: ProductModel | null;\n};\n\nexport interface ProductAttributesProps extends HTMLAttributes<HTMLDivElement> {\n  scope?: string;\n  formatValue?: (value: string, id: string, label: string) => string;\n  slots?: {\n    Attributes?: SlotProps<DefaultSlotContext>;\n  };\n}\n\nexport const ProductAttributes: Container<\n  ProductAttributesProps,\n  ProductModel | null\n> = ({ initialData = null, scope, children, slots, formatValue, ...props }) => {\n  const DetailsLabel = useText('PDP.Product.Details.label').label;\n  const { globalLocale = 'en-US' } = config.getConfig();\n\n  const [locale, setLocale] = useState<string>(globalLocale);\n  const [data, setData] = useState<ProductModel | null>(initialData);\n\n  const defaultSlotContext: DefaultSlotContext = useMemo(\n    () => ({ data }),\n    [data]\n  );\n\n  // Listen for events\n  useEffect(() => {\n    const dataEvent = events.on('pdp/data', setData, { scope });\n    const localeEvent = events.on('locale', setLocale);\n\n    return () => {\n      dataEvent?.off();\n      localeEvent?.off();\n    };\n  }, [scope]);\n\n  if (!data) return null;\n\n  return (\n    <div {...props} className={classes(['pdp-attributes', props.className])}>\n      {DetailsLabel}\n      {slots?.Attributes ? (\n        <Slot\n          name=\"Attributes\"\n          slot={slots?.Attributes}\n          context={{ ...defaultSlotContext }}\n        />\n      ) : (\n        <ul>\n          {data?.attributes?.map(\n            (\n              { id, label, value }: { id: string; label: string; value: any },\n              index: number\n            ) => {\n              if (id?.startsWith('ac_') || !value) {\n                return null;\n              }\n\n              const formatted = isDateValid(value)\n                ? toDateString(value, locale)\n                : value.toString();\n\n              const __html = formatValue\n                ? formatValue(formatted, id, label)\n                : formatted;\n\n              return (\n                <li key={`attribute-${index}`}>\n                  {/* eslint-disable-next-line react/no-danger */}\n                  {label}: <span dangerouslySetInnerHTML={{ __html }} />\n                </li>\n              );\n            }\n          )}\n        </ul>\n      )}\n    </div>\n  );\n};\n\nProductAttributes.getInitialData = getFetchedProductData;\n"],"names":["ProductAttributes","initialData","scope","children","slots","formatValue","props","DetailsLabel","useText","globalLocale","config","locale","setLocale","useState","data","setData","defaultSlotContext","useMemo","useEffect","dataEvent","events","localeEvent","jsxs","classes","jsx","Slot","_a","id","label","value","index","formatted","isDateValid","toDateString","__html","getFetchedProductData"],"mappings":"snBAoCa,MAAAA,EAGT,CAAC,CAAE,YAAAC,EAAc,KAAM,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAO,YAAAC,EAAa,GAAGC,KAAY,OACvE,MAAAC,EAAeC,EAAQ,2BAA2B,EAAE,MACpD,CAAE,aAAAC,EAAe,SAAYC,EAAO,UAAU,EAE9C,CAACC,EAAQC,CAAS,EAAIC,EAAiBJ,CAAY,EACnD,CAACK,EAAMC,CAAO,EAAIF,EAA8BZ,CAAW,EAE3De,EAAyCC,EAC7C,KAAO,CAAE,KAAAH,CAAK,GACd,CAACA,CAAI,CACP,EAaI,OAVJI,EAAU,IAAM,CACd,MAAMC,EAAYC,EAAO,GAAG,WAAYL,EAAS,CAAE,MAAAb,EAAO,EACpDmB,EAAcD,EAAO,GAAG,SAAUR,CAAS,EAEjD,MAAO,IAAM,CACXO,GAAA,MAAAA,EAAW,MACXE,GAAA,MAAAA,EAAa,KACf,CAAA,EACC,CAACnB,CAAK,CAAC,EAELY,EAGHQ,EAAC,MAAK,CAAA,GAAGhB,EAAO,UAAWiB,EAAQ,CAAC,iBAAkBjB,EAAM,SAAS,CAAC,EACnE,SAAA,CAAAC,EACAH,GAAA,MAAAA,EAAO,WACNoB,EAACC,EAAA,CACC,KAAK,aACL,KAAMrB,GAAA,YAAAA,EAAO,WACb,QAAS,CAAE,GAAGY,CAAmB,CAAA,CAAA,EAGnCQ,EAAC,KACE,CAAA,UAAAE,EAAAZ,GAAA,YAAAA,EAAM,aAAN,YAAAY,EAAkB,IACjB,CACE,CAAE,GAAAC,EAAI,MAAAC,EAAO,MAAAC,CAAA,EACbC,IACG,CACH,GAAIH,GAAA,MAAAA,EAAI,WAAW,QAAU,CAACE,EACrB,OAAA,KAGH,MAAAE,EAAYC,EAAYH,CAAK,EAC/BI,EAAaJ,EAAOlB,CAAM,EAC1BkB,EAAM,SAAS,EAEbK,EAAS7B,EACXA,EAAY0B,EAAWJ,EAAIC,CAAK,EAChCG,EAEJ,SACG,KAEE,CAAA,SAAA,CAAAH,EAAM,KAAGJ,EAAA,OAAA,CAAK,wBAAyB,CAAE,OAAAU,EAAU,CAAA,CAF7C,CAAA,EAAA,aAAaJ,CAAK,EAG3B,CAAA,EAIR,CAAA,CAAA,EAEJ,EAxCgB,IA0CpB,EAEA9B,EAAkB,eAAiBmC"}

package/lib/number.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2026 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 declare function isNumericValue(value: string): boolean;
+export declare function formatNumeric(value: string, locale?: string): string;
+//# sourceMappingURL=number.d.ts.map

package/package.json

@@ -1 +1 @@
-{"name": "@dropins/storefront-pdp", "version": "3.0.3-beta2", "@dropins/tools": "~1.5.0", "license": "SEE LICENSE IN LICENSE.md"}
+{"name": "@dropins/storefront-pdp", "version": "3.0.3-beta3", "@dropins/tools": "~1.5.0", "license": "SEE LICENSE IN LICENSE.md"}