@dropins/storefront-pdp 0.2.3-beta1 → 0.2.3-beta10

package/components/Swatches/Swatches.d.ts

@@ -24,14 +24,7 @@ type Selection = {
     };
 };
 export interface SwatchesProps extends HTMLAttributes<HTMLDivElement> {
-    options: Array<{
-        id: string;
-        type: (typeof supportedTypes)[number];
-        label: string;
-        required?: boolean;
-        multiple?: boolean;
-        items: OptionValue[];
-    }>;
+    options: Array<Option>;
     hideSelectedValue?: boolean;
     defaultOptions?: string[];
     selectionsToUpdate?: Option[];
@@ -39,6 +32,7 @@ export interface SwatchesProps extends HTMLAttributes<HTMLDivElement> {
     onErrors?: (errors: {
         [id: string]: string;
     }) => void;
+    selectedUIDs?: string[];
 }
 export declare const Swatches: FunctionComponent<SwatchesProps>;
 export {};

package/containers/ProductDetails/ProductDetails.d.ts

@@ -4,7 +4,7 @@ import { ButtonProps } from '@dropins/tools/types/elsie/src/components';
 import { ProductModel } from '../../data/models';
 
 type IconType = keyof typeof import('@dropins/tools/types/elsie/src/icons');
-type Values = {
+export type Values = {
     sku: string;
     quantity: number;
     optionsUIDs?: string[];
@@ -15,15 +15,13 @@ type DefaultSlotContext = {
     valid: boolean;
 };
 export type CarouselConfig = {
-    controls?: {
-        desktop?: 'thumbnailsRow' | 'thumbnailsColumn' | 'dots' | null;
-        mobile?: 'dots' | 'thumbnailsRow' | null;
-    };
+    mobile?: boolean;
+    controls?: 'thumbnailsRow' | 'thumbnailsColumn' | 'dots' | null;
     arrowsOnMainImage?: boolean;
     loopable?: boolean;
     peak?: {
-        desktop: boolean;
         mobile: boolean;
+        desktop: boolean;
     };
     gap?: 'small' | 'medium' | 'large' | null;
     thumbnailsLoadingMode?: 'lazy' | 'eager';

package/containers/ProductDetails.js

@@ -1 +1 @@
-import*as pe from"@dropins/tools/preact-compat.js";import{useState as J,Children as de,useRef as ye,useMemo as ve,useEffect as te,useCallback as Y}from"@dropins/tools/preact-compat.js";import{debounce as Le,classes as E,VComponent as H,toLanguageTag as Ne,Slot as G}from"@dropins/tools/lib.js";import{Button as we,Icon as be,Price as Se,Picker as We,ColorSwatch as Ue,ImageSwatch as He,TextSwatch as Ve,Incrementer as qe,Breadcrumbs as je,Image as De}from"@dropins/tools/components.js";import{jsxs as U,jsx as t,Fragment as Pe}from"@dropins/tools/preact-jsx-runtime.js";import{useText as z}from"@dropins/tools/i18n.js";import{c as xe,d as $e}from"../chunks/getRefinedProduct.js";import{events as Ge}from"@dropins/tools/event-bus.js";import{c as Oe}from"../chunks/initialize.js";import"@dropins/tools/fetch-graphql.js";const ze=e=>pe.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},pe.createElement("path",{d:"M7.74512 9.87701L12.0001 14.132L16.2551 9.87701",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"square",strokeLinejoin:"round"})),Fe=e=>pe.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},pe.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 5.64001L5.62988 18.37",stroke:"currentColor"}),pe.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 18.37L5.62988 5.64001",stroke:"currentColor"})),Ke=24,ge=16,_e=2,Qe="32";var Be=(e=>(e[e.small=16]="small",e[e.medium=24]="medium",e[e.large=64]="large",e))(Be||{});const me=({show:e=1,scrollbar:o=!1,peak:p=!1,arrows:_=!1,controls:s="dots",arrowsOnMainImage:y=!1,loop:h=!1,gap:P=null,direction:l="horizontal",width:le="100%",height:d="100%",defaultIndex:b=0,className:V,children:q,thumbnails:C=null,isZoomed:S,...f})=>{const u=z("PDP.Carousel.label").label,n=z("PDP.Carousel.Slide.label").label,L=z("PDP.Carousel.Previous.label").label,M=z("PDP.Carousel.Next.label").label,A=z("PDP.Carousel.Controls.Button.label").label,[g,r]=J(()=>ke(e)),O=Math.ceil(de.count(q)/g),R=p?Ke:0,j=P?Be[P]:0,X=de.count(q)%g,[k,B]=J(h?b+1:b),ne=ye([]),[ce,he]=J(0),[ie,re]=J(0),oe=ve(()=>de.toArray(C),[C]),$=ve(()=>{const c=de.toArray(q).reduce((i,N,D)=>D%g===0?[...i,[N]]:[...i.slice(0,-1),[...i[i.length-1],N]],[]);return!h||c.length===1?c:h&&de.count(q)%g===0?[c[O-1]].concat(c).concat([c[0],c[1]]):[de.toArray(q).slice(-g)].concat(c).concat([c[0],c[1]])},[q,g,O,h]),F=ye(null),K=ye(null),I=s==="thumbnailsRow"||s==="thumbnailsColumn";te(()=>{const c=document.body,i=Le(()=>{var T,ee;he(((T=F.current)==null?void 0:T.offsetWidth)??0),re(((ee=F.current)==null?void 0:ee.offsetHeight)??0);const D=window.innerWidth,W=ke(e,D);W!==g&&r(W)},50),N=new ResizeObserver(i);return N.observe(c),()=>{N.unobserve(c)}},[g,e]);const ae=Y(c=>{const i=h?c-1:c,N=ne==null?void 0:ne.current[0],D=(N==null?void 0:N.offsetWidth)+ge,W=(N==null?void 0:N.offsetHeight)+ge,T=K.current,ee=s==="thumbnailsRow",Ae=s==="thumbnailsColumn",se=ee?T==null?void 0:T.offsetWidth:T==null?void 0:T.offsetHeight,Q=ee?D:W;(ee||Ae)&&se&&(Q*(i+1)>se&&(T.style.scrollBehavior="smooth",ee?T.scrollLeft=(i+_e)*Q:T.scrollTop=(i+_e)*Q),(ee?T.scrollLeft:T.scrollTop)>Q*i&&(T.style.scrollBehavior="smooth",ee?T.scrollLeft=(i-_e)*Q:T.scrollTop=(i-_e)*Q))},[s,h]);te(()=>{ae(k)},[k,ae]);const a=Y((c,i,N)=>{I&&ae(c);const D=F.current,W=R?D.offsetWidth-R:D.offsetWidth-R+j;if(!Array.from(D.querySelectorAll("[data-index]")).filter(se=>{const Q=Number(se.getAttribute("data-index"));return!isNaN(Q)&&Q>-1})[c])return;if(N){const se=c===0?O:0,Q=W*(O+(X||g)/g);if(D.scrollLeft>=0&&D.scrollLeft<W-5){a(1,!0);return}if(D.scrollLeft>Q-W&&D.scrollLeft<=Q){a(O,!0);return}D.style.scrollBehavior="auto",D.scrollLeft=se===0?0:Q,a(se===0?1:O,!0);return}const Ae=(D.offsetWidth-j)/g*$[c].length-R;D.style.scrollBehavior=i?"smooth":"auto",D.scrollLeft=$[c].length===g?W*c:W*(c-1)+Ae},[j,O,R,g,X,$,ae,s]),m=Y(()=>{if(h){const i=k-1;a(i,!0,k===1);return}const c=k<=0?0:k-1;a(c,!0)},[k,a,h]),v=Y(()=>{const c=$.length-1;if(h){const N=k+1;a(N,!0,k===O);return}const i=k>=c?c:k+1;a(i,!0)},[$.length,h,k,a,O]);te(()=>{const c=i=>{i.key==="ArrowLeft"&&(i.preventDefault(),m()),i.key==="ArrowRight"&&(i.preventDefault(),v())};return window.addEventListener("keydown",c),()=>{window.removeEventListener("keydown",c)}},[v,m]),te(()=>{a(h?b+1:b,!1)},[b,a,h]);const w=Le(()=>{const c=F.current,i=R?c.offsetWidth-R:c.offsetWidth-R+j,N=c.scrollLeft/i,D=Math.round(N)-N<1?Math.round(N):Math.ceil(N);if(I&&ae(D),h){const W=i*(O+(X||g)/g);if(Math.ceil(c.scrollLeft)>=Math.ceil(W)-5){c.style.scrollBehavior="auto",c.scrollLeft=c.offsetWidth*1+(Math.ceil(c.scrollLeft)-Math.ceil(W)-R);return}if(c.scrollLeft===0){c.style.scrollBehavior="auto",c.scrollLeft=W-c.offsetWidth+R;return}}k!==D&&B(D)},100);te(()=>{const c=F.current;return c==null||c.addEventListener("scroll",w),()=>{c==null||c.removeEventListener("scroll",w)}},[w]);const x=(c,i,N)=>t(we,{className:E([["pdp-carousel__button",!c],[`pdp-carousel__button--${i}`,!c],[`pdp-carousel__button--${s}`,c]]),style:{"--height":`${ie}px`},variant:"tertiary","aria-label":i==="next"?M:L,onClick:N,disabled:h?!1:i==="next"?k>=$.length-1:k<1,children:t(be,{className:E([["pdp-carousel__button__icon",!c],[`pdp-carousel__button__icon--${i}`,!c],[`pdp-carousel__button__icon--${s}--${i}`,c]]),size:Qe,source:ze})}),Z=_&&$.length!=1&&x(I,"prev",m),ue=_&&$.length!=1&&x(I,"next",v),fe=_&&$.length!=1&&x(!1,"prev",m),Te=_&&$.length!=1&&x(!1,"next",v);return U("div",{role:"region","aria-roledescription":u,className:E(["pdp-carousel",["pdp-carousel--main-image-controls",y],["pdp-carousel--arrows",_&&!I],[`pdp-carousel--${s}`,I],V]),style:{"--flex-carousel":s==="thumbnailsColumn"?"row-reverse":"column","--gap":I?"0":"var(--spacing-small)","--width":le},...f,children:[t("div",{ref:F,className:E(["pdp-carousel__wrapper",`pdp-carousel__wrapper--${l}`,["pdp-carousel__wrapper--scrollbar",o],["pdp-carousel__wrapper--peak",p]]),style:{"--total-width":s==="thumbnailsColumn"?"81.6%":"100%","--height":s==="thumbnailsColumn"?"auto":d,"--gap":P?`var(--spacing-${P})`:"0px","--per-page":g},tabIndex:0,children:$.map((c,i)=>{const N=c.length<g;return t("div",{role:"group","aria-roledescription":n,"data-index":i,className:E(["pdp-carousel__slide",`pdp-carousel__slide--${l}`,["pdp-carousel__slide--active",k===i],["pdp-carousel__slide--orphan",N]]),style:{"--length":c.length},children:c},i)})}),!I&&U(Pe,{children:[Z,ue]}),I&&y&&U(Pe,{children:[fe,Te]}),s&&$.length!=1&&U("div",{className:E([[`pdp-carousel__controls__container--${s}`,I],["pdp-carousel__controls__container--no-arrows",!_||y]]),style:{"--width":s==="thumbnailsRow"?`${ce}px`:le,"--height":`${ie}px`,"--nr-thumbnails":oe.length},children:[(I||S)&&!y&&Z,t("div",{ref:K,className:E([[`pdp-carousel__controls__wrapper--${s}`,I],["pdp-carousel__controls__wrapper",I]]),children:t("div",{role:"group","aria-label":A,className:E(["pdp-carousel__controls",[`pdp-carousel__controls--${s}`,I]]),children:(h?$.slice(0,O):$).map((c,i)=>{const N=h?O:$.length,D=h?k-1===i:k===i;return I?U("label",{className:E(["pdp-carousel__thumbnail__container"]),ref:W=>{W&&(ne.current[i]=W)},children:[t("input",{type:"radio",name:"carousel-thumbnails","aria-label":A.replace("{key}",String(i+1)).replace("{total}",String(N)),checked:D&&ce!==0,onChange:()=>{a(h?i+1:i,!0)},...f,className:E(["pdp-carousel__thumbnail",["pdp-carousel__thumbnail--selected",D&&ce!==0]])}),t("span",{className:E(["pdp-carousel__thumbnail__span"]),children:oe[i]})]},i):t("button",{"aria-label":A.replace("{key}",String(i+1)).replace("{total}",String(N)),onClick:()=>{a(h?i+1:i,!0)},className:E(["pdp-carousel__controls__button",["pdp-carousel__controls__button--active",D]])},i)})})}),(I||S)&&!y&&ue]})]})};function ke(e,o=0){if(typeof e=="number")return e;const{small:p,medium:_,large:s}=e,h=[{breakpoint:1024,value:s},{breakpoint:786,value:_},{breakpoint:0,value:p}].find(({breakpoint:P})=>o>P);return h?h.value:p}const Xe=({title:e,breadcrumbs:o,galleryContent:p,infoContent:_,productContent:s,sku:y,outOfStock:h,shortDescription:P,description:l,attributes:le,images:d,options:b,price:V,specialPrice:q,className:C,children:S,quantity:f,actions:u,carouselConfig:n,...L})=>{var k,B,ne,ce,he,ie,re,oe,$;const M=z("PDP.Product.RegularPrice.label").label,A=z("PDP.Product.SpecialPrice.label").label,g=z("PDP.Product.OutOfStock.label").label,r=z("PDP.Product.Image.label").label,[O,R]=J(null),j=d!=null&&d.length?d.map((F,K)=>{var I;return t(H,{node:F,loading:K===0?"eager":"lazy",alt:((I=e==null?void 0:e.props)==null?void 0:I.children)&&(r==null?void 0:r.replace("{product}",e.props.children.toString()).replace("{key}",String(K+1)).replace("{total}",String(d.length))),onClick:()=>R(K)},K)}):t("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0}),X=(k=n==null?void 0:n.thumbnails)!=null&&k.length?n.thumbnails.map((F,K)=>{var I;return t(H,{node:F,loading:(n==null?void 0:n.thumbnailsLoadingMode)||"lazy",alt:((I=e==null?void 0:e.props)==null?void 0:I.children)&&(r==null?void 0:r.replace("{product}",e.props.children.toString()).replace("{key}",String(K+1)).replace("{total}",String(d.length)))},K)}):t("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0});return U("div",{...L,className:E(["pdp-product",C]),children:[o&&t(H,{node:o,className:"pdp-product__breadcrumbs"}),U("div",{className:"pdp-product__column-container pdp-product__gallery-column",children:[t("div",{className:"pdp-product__column-body",children:(B=n==null?void 0:n.controls)!=null&&B.desktop?t(me,{className:"pdp-product__overlay__carousel",arrows:(d==null?void 0:d.length)>1,controls:(d==null?void 0:d.length)>1?n.controls.desktop:"dots",arrowsOnMainImage:n==null?void 0:n.arrowsOnMainImage,loop:(n==null?void 0:n.loopable)&&(d==null?void 0:d.length)>1,peak:((ne=n==null?void 0:n.thumbnails)==null?void 0:ne.length)>1&&((ce=n==null?void 0:n.peak)==null?void 0:ce.desktop)||!1,gap:(n==null?void 0:n.gap)||null,width:"100%",height:"100%",defaultIndex:O||0,thumbnails:X,children:j}):t(Ze,{className:"pdp-product__images",gap:"small",children:j})}),p&&t(H,{node:p,className:"pdp-product__gallery-content"})]}),U("div",{className:"pdp-product__column-container pdp-product__content-column",children:[U("div",{className:"pdp-product__column-body",children:[U("div",{className:"pdp-product__header",children:[e&&t(H,{node:e,className:"pdp-product__title"}),y&&t(H,{node:y,className:"pdp-product__sku"})]}),U("div",{className:"pdp-product__prices",children:[q&&t(H,{node:q,className:E(["pdp-product__price-special","pdp-product__price"]),"aria-label":A,role:"text"}),V&&t(H,{node:V,className:E(["pdp-product__price-regular","pdp-product__price--grey"]),"aria-label":M,role:"text"})]}),(he=n==null?void 0:n.controls)!=null&&he.mobile&&((ie=n==null?void 0:n.controls)==null?void 0:ie.mobile)==="thumbnailsRow"?t(me,{className:"pdp-product__images pdp-product__images--carousel pdp-product__images--carousel--thumbnails",width:"100%",height:"auto",arrows:(d==null?void 0:d.length)>1,controls:(d==null?void 0:d.length)>1?"thumbnailsRow":null,loop:(n==null?void 0:n.loopable)&&(d==null?void 0:d.length)>1,peak:((re=n==null?void 0:n.thumbnails)==null?void 0:re.length)>1&&((oe=n==null?void 0:n.peak)==null?void 0:oe.mobile)||!1,gap:(n==null?void 0:n.gap)||null,thumbnails:X,children:j}):t(me,{className:"pdp-product__images pdp-product__images--carousel",peak:(($=n==null?void 0:n.peak)==null?void 0:$.mobile)&&(d==null?void 0:d.length)>1,gap:(n==null?void 0:n.gap)||null,width:"100%",height:"auto",arrows:(d==null?void 0:d.length)>1,controls:(d==null?void 0:d.length)>1?"dots":null,loop:(n==null?void 0:n.loopable)&&(d==null?void 0:d.length)>1,children:j}),U("div",{className:E(["pdp-product__actions",["pdp-product__actions--out-of-stock",h]]),children:[h&&t("div",{className:"pdp-product__out-of-stock__text",children:g}),b&&t(H,{node:b,className:E(["pdp-product__options"])}),f&&t("div",{className:"pdp-product__quantity",children:t(H,{node:f})}),u&&t(H,{node:u,className:E(["pdp-product__buttons"])})]}),P&&t(H,{node:P,className:E(["pdp-product__short_description"])}),l&&t(H,{node:l,className:E(["pdp-product__description"])}),le?t("div",{className:"pdp-product__attributes",children:le}):null]}),_&&t(H,{node:_,className:"pdp-product__info-content"})]}),s&&t(H,{node:s,className:"pdp-product__content"}),O===null?null:t(Je,{className:"pdp-product__overlay",onClose:()=>R(null),centered:!0,children:t(me,{className:"pdp-product__overlay__carousel",arrows:(d==null?void 0:d.length)>1,width:"100%",height:"100%",defaultIndex:O||0,loop:(d==null?void 0:d.length)>1,controls:(d==null?void 0:d.length)>1?"dots":null,isZoomed:!0,children:j})})]})},Ze=({children:e,gap:o=null,className:p,style:_,...s})=>{const y=de.count(e);return t("div",{...s,className:E(["pdp-gallery-grid",p]),style:{"--gap":o?`var(--spacing-${o})`:"0px",..._},children:de.map(e,(h,P)=>t("div",{className:"pdp-gallery-grid__item",children:t(H,{node:h,loading:P===0?"eager":"lazy"},h.props.src)},y+P))})},Ie=({amount:e,currency:o,locale:p,variant:_,sale:s,minimumAmount:y,maximumAmount:h,className:P,...l})=>t(Pe,{children:e||y===h?t("div",{className:"pdp-price-range",...l,children:t(Se,{amount:e||y,currency:o,locale:p,variant:_,sale:s,className:P})}):U("div",{className:"pdp-price-range",...l,children:[t(Se,{amount:y,currency:o,locale:p,className:P}),t("span",{className:"pdp-price-range__label",children:"-"}),t(Se,{amount:h,currency:o,locale:p,className:P})]})}),Je=({centered:e,onClose:o,className:p,children:_,...s})=>{const y=z("PDP.Overlay.Close.label").label,h=Y(()=>{o==null||o()},[o]);return te(()=>{const P=l=>{l.key==="Escape"&&h()};return document.addEventListener("keydown",P),()=>{document.removeEventListener("keydown",P)}},[h]),te(()=>{const P=document.scrollingElement,l=P.style.overflow;return P.style.overflow="hidden",()=>{P.style.overflow=l}},[]),U("div",{...s,className:E(["pdp-overlay",["pdp-overlay--centered",e],p]),children:[t("div",{className:"pdp-overlay__content",children:_}),t(we,{"aria-label":y,variant:"tertiary",className:"pdp-overlay__close-button",onClick:h,icon:t(Fe,{})})]})},Ye=["text","image","color","dropdown"],Ce=e=>e.map(o=>({...o,text:o.label,disabled:!o.inStock})),et=({options:e,hideSelectedValue:o,onValues:p,onErrors:_,defaultOptions:s,selectionsToUpdate:y,className:h,children:P,...l})=>{const le=z("PDP.Swatches.Required.label").label,[d,b]=J(()=>e==null?void 0:e.reduce((f,u)=>{const{items:n}=u,L=n==null?void 0:n.find(A=>s==null?void 0:s.includes(A.id)),M=n==null?void 0:n.find(A=>A.selected);return L?{...f,[u.id]:{label:L.label,value:L.id}}:M?{...f,[u.id]:{label:M.label,value:M.id}}:f},{}));te(()=>{y==null||y.forEach(S=>{b(f=>{var L;const u=(L=S==null?void 0:S.items)==null?void 0:L.find(M=>M.selected);return u?{...f,[S.id]:{label:u==null?void 0:u.label,value:u==null?void 0:u.id}}:f})})},[y,b]),ve(()=>{const S=e==null?void 0:e.reduce((f,u)=>{var n;return(n=u==null?void 0:u.items)==null||n.forEach(L=>{var A;const M=((A=d[u.id])==null?void 0:A.value)===L.id;u.required&&!M&&(f[u.id]=le)}),f},{});return _==null||_(S),S},[d]);const V=Y((S,f,u)=>{b(n=>{const L={...n,[S]:{label:f,value:u}};return p==null||p(L,u),L})},[p]),q=(S,f)=>{var n;const u=((n=f.selectedOptions[0])==null?void 0:n.label)??"";V(S,u,f.value)},C=Y(({items:S,id:f,required:u,type:n,selected:L,label:M})=>t("div",{className:E(["pdp-swatches__options"]),children:(n==null?void 0:n.toLowerCase())==="dropdown"?t(We,{"aria-label":M,handleSelect:A=>q(f,A.target),options:Ce(S),value:L}):S==null?void 0:S.map(A=>{const g={key:A.id,id:A.id,name:f,value:A.value,label:A.label,groupAriaLabel:M,selected:L===A.id,outOfStock:!A.inStock,required:u===null?!0:u,onValue:()=>{V(f,A.label,A.id)}};switch(n){case"text":return t(Ve,{...g,label:A.label});case"image":return t(He,{...g,src:A.value,alt:A.label});case"color":return t(Ue,{...g,size:"large",color:A.value});default:return console.warn(`Invalid swatch type ${n}`),null}})}),[V]);return t("div",{...l,className:E(["pdp-swatches",h]),children:e==null?void 0:e.map(({type:S,label:f,id:u,multiple:n,required:L,items:M})=>{var A;if(!S){console.warn("Bundle product not supported on UI.");return}return Ye.includes(S)||console.warn(`Invalid swatch type ${S}`),n&&console.warn("Multiple selection swatches are not currently supported."),U("div",{id:`swatch-item-${u}`,"data-slot-key":`product-swatch--${u}`,className:"pdp-swatches__field",children:[t("div",{className:"pdp-swatches__field__label",children:d[u]?o?`${f}`:`${f}: ${d[u].label}`:f}),t(C,{id:u,type:S,required:L,items:M,label:f,selected:(A=d[u])==null?void 0:A.value})]},`swatch-item-${u}`)})})};function tt(e,o="en_US"){if(!Me(e))throw Error("Invalid date string");return e.split(" ")[1]||(e=`${e} 00:00:00`),new Date(e).toLocaleDateString(Ne(o)).toString()}function Me(e){if(![/^\d{4}-\d{2}-\d{2}$/,/^\d{1,2}\/\d{1,2}\/\d{4}$/,/^\d{2}\/\d{2}\/\d{4}$/,/^\d{4}\/\d{2}\/\d{2}$/,/^\d{1,2}\.\d{1,2}\.\d{4}$/,/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/].some(_=>_.test(e)))return!1;const p=new Date(e);return!isNaN(p.getTime())}function nt(e){const o=new URLSearchParams(window.location.search);Object.entries(e).forEach(([_,s])=>{s===null?o.delete(_):o.set(_,String(s))});let p=window.location.pathname;p+=`?${o.toString()}`,p+=window.location.hash,window.history.replaceState({},"",p)}function rt(){const e=new URLSearchParams(window.location.search),o={};return e.forEach((p,_)=>{o[_]=p}),o}function lt(e){var o,p,_,s,y,h,P,l;return{productId:Number(e==null?void 0:e.externalId),name:e==null?void 0:e.name,sku:e==null?void 0:e.sku,topLevelSku:e==null?void 0:e.externalParentId,specialToDate:void 0,specialFromDate:void 0,newToDate:void 0,newFromDate:void 0,createdAt:void 0,updatedAt:void 0,manufacturer:void 0,countryOfManufacture:void 0,categories:void 0,productType:void 0,pricing:{regularPrice:((p=(o=e==null?void 0:e.prices)==null?void 0:o.regular)==null?void 0:p.amount)||0,minimalPrice:void 0,maximalPrice:void 0,specialPrice:(s=(_=e==null?void 0:e.prices)==null?void 0:_.final)==null?void 0:s.amount,tierPricing:void 0,currencyCode:((h=(y=e==null?void 0:e.prices)==null?void 0:y.final)==null?void 0:h.currency)||"USD"},canonicalUrl:e==null?void 0:e.url,mainImageUrl:(l=(P=e==null?void 0:e.images)==null?void 0:P[0])==null?void 0:l.url}}const ct={PRODUCT_CONTEXT:"productContext"},at={PRODUCT_PAGE_VIEW:"product-page-view"};function Re(){return window.adobeDataLayer=window.adobeDataLayer||[],window.adobeDataLayer}function dt(e,o){const p=Re();p.push({[e]:null}),p.push({[e]:o})}function it(e,o){Re().push(_=>{const s=_.getState?_.getState():{};_.push({event:e,eventInfo:{...s,...o}})})}function Ee(e){const o=lt(e);dt(ct.PRODUCT_CONTEXT,o),it(at.PRODUCT_PAGE_VIEW)}const ot=({sku:e,hideSku:o,hideQuantity:p,hideShortDescription:_,hideDescription:s,hideAttributes:y,hideURLParams:h,hideSelectedOptionValue:P,slots:l,children:le,initialData:d,carousel:b,optionsConfig:V,useACDL:q,onAddToCart:C,...S})=>{var F,K,I,ae;const f=z("PDP.Product.AddToCart.label").label,u=z("PDP.Product.Incrementer.label").label,n=z("PDP.Product.Details.label").label,[L,M]=J(Oe.getConfig().defaultLocale||"en-US"),[A,g]=J(),[r=null,O]=J(d),[R,j]=J(()=>{const a={sku:e,quantity:1};return r!=null&&r.optionUIDs&&(a.optionsUIDs=r.optionUIDs),a}),[X,k]=J(()=>{var a,m;return!(r!=null&&r.options&&((a=r==null?void 0:r.options)==null?void 0:a.length)>0&&((m=r==null?void 0:r.optionUIDs)==null?void 0:m.length)!==(r==null?void 0:r.options.length))}),B={data:r,values:R,valid:X};te(()=>{const a=Ge.on("locale",m=>{m!==L&&(M(m),xe(e).then(O))});return()=>{a==null||a.off()}},[L,e]),te(()=>{q&&d&&Object.keys(d).length>0&&Ee(d)},[d]);const ne=Y(a=>{j(m=>({...m,...a}))},[]),ce=Y(a=>{var v;let m=Object.keys(a).map(w=>a[w].value).filter(w=>w!==void 0);h||nt({optionsUIDs:m.join(",")}),j(w=>({...w,optionsUIDs:m})),k((m==null?void 0:m.length)===((v=r==null?void 0:r.options)==null?void 0:v.length)),$e(e,m,V==null?void 0:V.anchorOptions).then(w=>{var x;O(w),(x=V==null?void 0:V.anchorOptions)!=null&&x.length&&he(w,m),q&&(w==null?void 0:w.sku)!==e&&Ee(w)})},[e]),he=Y((a,m)=>{var x;const v=(a==null?void 0:a.optionUIDs)??[];m.every(Z=>v.includes(Z))||(g(a==null?void 0:a.options),j(Z=>({...Z,optionsUIDs:v})),k((v==null?void 0:v.length)===((x=a==null?void 0:a.options)==null?void 0:x.length)))},[e]),ie=Y(a=>{Object.keys(a).length!==0&&k(!1)},[]),re=ve(()=>{var a;return(a=r==null?void 0:r.attributes)==null?void 0:a.map(({label:m,value:v},w)=>{const x=Me(v)?tt(v,L):v.toString();return U("li",{children:[m,": ",t("span",{dangerouslySetInnerHTML:{__html:x}})]},w)})},[r==null?void 0:r.attributes,L]),oe=!p&&(r!=null&&r.inStock)?t(G,{name:"Quantity",slot:l==null?void 0:l.Quantity,context:{...B},children:t(qe,{name:"quantity",defaultValue:R.quantity.toString(),min:1,"aria-label":u,className:"pdp-product__quantity",onValue:a=>{ne({quantity:Number(a)})}},"quantity")}):void 0,$=()=>{if(r!=null&&r.options)return t(G,{name:"Options",slot:l==null?void 0:l.Options,context:{...B},children:t(et,{options:r.options,defaultOptions:R.optionsUIDs,selectionsToUpdate:A,hideSelectedValue:P,onValues:ce,onErrors:ie})})};return t("div",{...S,children:t(Xe,{title:t(G,{name:"Title",slot:l==null?void 0:l.Title,context:{...B},children:r==null?void 0:r.name}),sku:o?void 0:t(G,{name:"SKU",slot:l==null?void 0:l.SKU,context:{...B},children:r==null?void 0:r.sku}),options:$(),breadcrumbs:(l==null?void 0:l.Breadcrumbs)&&t(G,{name:"Breadcrumbs",slot:l==null?void 0:l.Breadcrumbs,context:{...B,setSeparator(a){this._registerMethod((...m)=>{const v=a(...m),w=v&&t(be,{source:v});this._setProps(x=>({...x,separator:w}))})},appendLink(a){this._registerMethod((...m)=>{const{text:v,...w}=a(...m),x=t("a",{...w,children:v});this._setProps(Z=>({...Z,categories:[...Z.categories||[],x]}))})},appendHTMLElement(a){this._registerMethod((...m)=>{const v=a(...m),w=this._htmlElementToVNode(v);this._setProps(x=>({...x,categories:[...x.categories||[],w]}))})}},render:({separator:a,categories:m})=>t(je,{separator:a,categories:m})}),quantity:oe,actions:t(G,{name:"Actions",slot:l==null?void 0:l.Actions,context:{...B,appendButton(a){this._registerMethod((...m)=>{const v=a(...m);if(!v)return;const{text:w,icon:x,...Z}=v,ue=t(we,{type:"button",...Z,icon:x&&t(be,{source:x}),children:w});this._setProps(fe=>({children:[...fe.children||[],ue]}))})}},children:!(l!=null&&l.Actions)&&t(we,{size:"medium",type:"submit",icon:t(be,{source:"Cart"}),disabled:!(r!=null&&r.inStock)||!X,"aria-label":f,onClick:()=>C==null?void 0:C(R),children:f})}),shortDescription:_?void 0:t(G,{name:"ShortDescription",slot:l==null?void 0:l.ShortDescription,context:{...B},children:t("div",{dangerouslySetInnerHTML:{__html:(r==null?void 0:r.shortDescription)??""}})}),description:s?void 0:t(G,{name:"Description",slot:l==null?void 0:l.Description,context:{...B},children:t("div",{dangerouslySetInnerHTML:{__html:(r==null?void 0:r.description)??""}})}),images:((F=r==null?void 0:r.images)==null?void 0:F.map(({label:a,url:m})=>{var v,w;return t(De,{title:a,alt:a,src:m,width:((v=b==null?void 0:b.imageParams)==null?void 0:v.width)??960,height:((w=b==null?void 0:b.imageParams)==null?void 0:w.height)??1191,params:(b==null?void 0:b.imageParams)??{width:960}},m)}))??[],specialPrice:(K=r==null?void 0:r.prices)!=null&&K.visible?t(G,{name:"SpecialPrice",slot:l==null?void 0:l.SpecialPrice,context:{...B},children:t(Ie,{...r.prices.final,locale:Ne(L)})}):void 0,price:(I=r==null?void 0:r.prices)!=null&&I.visible&&r.prices.regular&&r.prices.final.amount!==(r==null?void 0:r.prices.regular.amount)?t(G,{name:"RegularPrice",slot:l==null?void 0:l.RegularPrice,context:{...B},children:t(Ie,{...r.prices.regular,locale:Ne(L)})}):void 0,carouselConfig:{...b,thumbnails:b&&Object.keys(b).length?((ae=r==null?void 0:r.images)==null?void 0:ae.map(({label:a,url:m})=>{var v,w;return t(De,{title:a,alt:a,src:m,width:((v=b==null?void 0:b.thumbnailParams)==null?void 0:v.width)??200,height:((w=b==null?void 0:b.thumbnailParams)==null?void 0:w.height)??248,params:(b==null?void 0:b.thumbnailParams)??{width:200}},m)}))??[]:[]},outOfStock:!(r!=null&&r.inStock),attributes:y?void 0:t(G,{name:"Attributes",slot:l==null?void 0:l.Attributes,context:{...B},children:re!=null&&re.length?U(Pe,{children:[n,t("ul",{children:re})]}):null}),galleryContent:(l==null?void 0:l.GalleryContent)&&t(G,{name:"GalleryContent",slot:l.GalleryContent,context:{...B}}),infoContent:(l==null?void 0:l.InfoContent)&&t(G,{name:"InfoContent",slot:l.InfoContent,context:{...B}}),productContent:(l==null?void 0:l.Content)&&t(G,{name:"Content",slot:l.Content,context:{...B}})})})};ot.getInitialData=async function({sku:e,optionsConfig:o}){var _,s,y,h,P,l;const p=((_=rt().optionsUIDs)==null?void 0:_.split(","))||((l=(P=(h=(y=(s=Oe)==null?void 0:s.getConfig())==null?void 0:y.models)==null?void 0:h.ProductDetails)==null?void 0:P.initialData)==null?void 0:l.optionsUIDs);return p!=null&&p.length?await $e(e,p,o==null?void 0:o.anchorOptions):await xe(e)};export{ot as ProductDetails,ot as default};
+import*as se from"@dropins/tools/preact-compat.js";import{useState as K,Children as re,useRef as Se,useMemo as ve,useEffect as G,useCallback as Q}from"@dropins/tools/preact-compat.js";import{debounce as ke,classes as D,VComponent as V,toLanguageTag as Le,Slot as z}from"@dropins/tools/lib.js";import{Button as we,Icon as be,Price as Ae,Picker as qe,ColorSwatch as He,ImageSwatch as ze,TextSwatch as Ge,Incrementer as je,Breadcrumbs as Fe,Image as xe}from"@dropins/tools/components.js";import{jsxs as W,jsx as n,Fragment as fe}from"@dropins/tools/preact-jsx-runtime.js";import{useText as q}from"@dropins/tools/i18n.js";import{c as $e,d as Be}from"../chunks/getRefinedProduct.js";import{events as Ne}from"@dropins/tools/event-bus.js";import{c as Re}from"../chunks/initialize.js";import"@dropins/tools/fetch-graphql.js";const Ke=e=>se.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},se.createElement("path",{d:"M7.74512 9.87701L12.0001 14.132L16.2551 9.87701",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"square",strokeLinejoin:"round"})),Qe=e=>se.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},se.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 5.64001L5.62988 18.37",stroke:"currentColor"}),se.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 18.37L5.62988 5.64001",stroke:"currentColor"})),me=({show:e=1,scrollbar:d=!1,peak:p=!1,arrows:u=!1,controls:s="dots",arrowsOnMainImage:f=!1,loop:h=!1,gap:P=null,direction:l="horizontal",width:ee="100%",height:i="100%",defaultIndex:b=0,className:U,children:M,thumbnails:J=null,isZoomed:ne,...v})=>{const A=q("PDP.Carousel.label").label,r=q("PDP.Carousel.Slide.label").label,w=q("PDP.Carousel.Previous.label").label,x=q("PDP.Carousel.Next.label").label,R=q("PDP.Carousel.Controls.label").label,S=q("PDP.Carousel.Controls.Button.label").label,[t,te]=K(()=>Ie(e)),g=Math.ceil(re.toArray(M).length/t),X={small:16,medium:24,large:64},T=p?24:0,j=P?X[P]:0,k=re.toArray(M).length%t,Y=16,C=2,le="32",[O,Z]=K(h?b+1:b),H=Se([]),[F,he]=K(0),[de,pe]=K(0),oe=ve(()=>re.toArray(J),[J]),c=ve(()=>{const a=re.toArray(M).reduce((o,L,N)=>N%t===0?[...o,[L]]:[...o.slice(0,-1),[...o[o.length-1],L]],[]);return!h||a.length===1?a:h&&re.toArray(M).length%t===0?[a[g-1]].concat(a).concat([a[0],a[1]]):[re.toArray(M).slice(-t)].concat(a).concat([a[0],a[1]])},[M,t,g,h]),_=Se(null),y=Se(null),m=s==="thumbnailsRow"||s==="thumbnailsColumn";G(()=>{const a=document.body,o=ke(()=>{var I,ye;he(((I=_.current)==null?void 0:I.offsetWidth)??0),pe(((ye=_.current)==null?void 0:ye.offsetHeight)??0);const N=window.innerWidth,B=Ie(e,N);B!==t&&te(B)},50),L=new ResizeObserver(o);return L.observe(a),()=>{L.unobserve(a)}},[t,e]);const E=Q(a=>{const o=h?a-1:a,L=H==null?void 0:H.current[0],N=(L==null?void 0:L.offsetWidth)+Y,B=(L==null?void 0:L.offsetHeight)+Y,I=y.current;s==="thumbnailsRow"&&(I!=null&&I.offsetWidth)&&(N*(o+1)>I.offsetWidth&&(I.style.scrollBehavior="smooth",I.scrollLeft=(o+C)*N),I.scrollLeft>N*o&&(I.style.scrollBehavior="smooth",I.scrollLeft=(o-C)*N)),s==="thumbnailsColumn"&&(I!=null&&I.offsetHeight)&&(B*(o+1)>I.offsetHeight&&(I.style.scrollBehavior="smooth",I.scrollTop=(o+C)*B),I.scrollTop>B*o&&(I.style.scrollBehavior="smooth",I.scrollTop=(o-C)*B))},[s,h]),$=Q((a,o,L)=>{(s==="thumbnailsRow"||s==="thumbnailsColumn")&&E(a);const N=_.current,B=T?N.offsetWidth-T:N.offsetWidth-T+j;if(!Array.from(N.querySelectorAll("[data-index]")).filter(_e=>{const ie=Number(_e.getAttribute("data-index"));return!isNaN(ie)&&ie>-1})[a])return;if(L){const _e=a===0?g:0,ie=B*(g+(k||t)/t);if(N.scrollLeft>=0&&N.scrollLeft<B-5){$(1,!0);return}if(N.scrollLeft>ie-B&&N.scrollLeft<=ie){$(g,!0);return}N.style.scrollBehavior="auto",N.scrollLeft=_e===0?0:ie,$(_e===0?1:g,!0);return}const Ue=(N.offsetWidth-j)/t*c[a].length-T;N.style.scrollBehavior=o?"smooth":"auto",N.scrollLeft=c[a].length===t?B*a:B*(a-1)+Ue},[j,g,T,t,k,c,E,s]),ce=Q(()=>{if(h){const o=O-1;$(o,!0,O===1);return}const a=O<=0?0:O-1;$(a,!0)},[O,$,h]),ae=Q(()=>{const a=c.length-1;if(h){const L=O+1;$(L,!0,O===g);return}const o=O>=a?a:O+1;$(o,!0)},[c.length,h,O,$,g]);G(()=>{const a=o=>{o.key==="ArrowLeft"&&(o.preventDefault(),ce()),o.key==="ArrowRight"&&(o.preventDefault(),ae())};return window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[ae,ce]),G(()=>{$(h?b+1:b,!1)},[b,$,h]);const Pe=ke(()=>{const a=_.current,o=T?a.offsetWidth-T:a.offsetWidth-T+j,L=a.scrollLeft/o,N=Math.round(L)-L<1?Math.round(L):Math.ceil(L);if(m&&E(N),h){const B=o*(g+(k||t)/t);if(Math.ceil(a.scrollLeft)>=Math.ceil(B)-5){a.style.scrollBehavior="auto",a.scrollLeft=a.offsetWidth*1+(Math.ceil(a.scrollLeft)-Math.ceil(B)-T);return}if(a.scrollLeft===0){a.style.scrollBehavior="auto",a.scrollLeft=B-a.offsetWidth+T;return}}O!==N&&Z(N)},100);G(()=>{const a=_.current;return a==null||a.addEventListener("scroll",Pe),()=>{a==null||a.removeEventListener("scroll",Pe)}},[Pe]);const ue=(a,o,L)=>n(we,{className:D([["pdp-carousel__button",!a],[`pdp-carousel__button--${o}`,!a],[`pdp-carousel__button--${s}`,a]]),style:{"--height":`${de}px`},variant:"tertiary","aria-label":o==="next"?x:w,onClick:L,disabled:h?!1:o==="next"?O>=c.length-1:O<1,children:n(be,{className:D([["pdp-carousel__button__icon",!a],[`pdp-carousel__button__icon--${o}`,!a],[`pdp-carousel__button__icon--${s}--${o}`,a]]),size:le,source:Ke})}),ge=u&&c.length!=1&&ue(m,"prev",ce),De=u&&c.length!=1&&ue(m,"next",ae),Te=u&&c.length!=1&&ue(!1,"prev",ce),Ve=u&&c.length!=1&&ue(!1,"next",ae);return W("div",{role:"region","aria-roledescription":A,className:D(["pdp-carousel",["pdp-carousel--main-image-controls",f],["pdp-carousel--arrows",u&&!m],[`pdp-carousel--${s}`,m],U]),style:{"--flex-carousel":s==="thumbnailsColumn"?"row-reverse":"column","--gap":m?"0":"var(--spacing-small)","--width":ee},...v,children:[n("div",{ref:_,className:D(["pdp-carousel__wrapper",`pdp-carousel__wrapper--${l}`,["pdp-carousel__wrapper--scrollbar",d],["pdp-carousel__wrapper--peak",p]]),style:{"--total-width":s==="thumbnailsColumn"?"81.6%":"100%","--height":s==="thumbnailsColumn"?"auto":i,"--gap":P?`var(--spacing-${P})`:"0px","--per-page":t},tabIndex:0,children:c.map((a,o)=>{const L=a.length<t;return n("div",{role:"group","aria-roledescription":r,"data-index":o,className:D(["pdp-carousel__slide",`pdp-carousel__slide--${l}`,["pdp-carousel__slide--active",O===o],["pdp-carousel__slide--orphan",L]]),style:{"--length":a.length},children:a},o)})}),!m&&W(fe,{children:[ge,De]}),m&&f&&W(fe,{children:[Te,Ve]}),s&&c.length!=1&&W("div",{className:D([[`pdp-carousel__controls__container--${s}`,m],["pdp-carousel__controls__container--no-arrows",!u||f]]),style:{"--width":s==="thumbnailsRow"?`${F}px`:ee,"--height":`${de}px`,"--nr-thumbnails":oe.length},children:[(m||ne)&&!f&&ge,n("div",{ref:y,className:D([[`pdp-carousel__controls__wrapper--${s}`,m],["pdp-carousel__controls__wrapper",m]]),children:n("div",{role:"group","aria-label":R,className:D(["pdp-carousel__controls",[`pdp-carousel__controls--${s}`,m]]),children:(h?c.slice(0,g):c).map((a,o)=>{const L=h?g:c.length,N=h?O-1===o:O===o;return m?W("label",{className:D(["pdp-carousel__thumbnail__container"]),ref:B=>{B&&(H.current[o]=B)},children:[n("input",{type:"radio",name:"carousel-thumbnails","aria-label":S.replace("{key}",String(o+1)).replace("{total}",String(L)),checked:N&&F!==0,onChange:()=>{$(h?o+1:o,!0)},...v,className:D(["pdp-carousel__thumbnail",["pdp-carousel__thumbnail--selected",N&&F!==0]])}),n("span",{className:D(["pdp-carousel__thumbnail__span"]),children:oe[o]})]},o):n("button",{"aria-label":S.replace("{key}",String(o+1)).replace("{total}",String(L)),onClick:()=>{$(h?o+1:o,!0)},className:D(["pdp-carousel__controls__button",["pdp-carousel__controls__button--active",N]])},o)})})}),(m||ne)&&!f&&De]})]})};function Ie(e,d=0){if(typeof e=="number")return e;const{small:p,medium:u,large:s}=e,f=786;return d>1024?s:d>f?u:p}const Je=({title:e,breadcrumbs:d,galleryContent:p,infoContent:u,productContent:s,sku:f,outOfStock:h,shortDescription:P,description:l,attributes:ee,images:i,options:b,price:U,specialPrice:M,className:J,children:ne,quantity:v,actions:A,carouselConfig:r,...w})=>{var j,k,Y,C,le,O;const x=q("PDP.Product.RegularPrice.label").label,R=q("PDP.Product.SpecialPrice.label").label,S=q("PDP.Product.OutOfStock.label").label,t=q("PDP.Product.Image.label").label,[te,g]=K(null),X=i!=null&&i.length?i.map((Z,H)=>{var F;return n(V,{node:Z,loading:H===0?"eager":"lazy",alt:((F=e==null?void 0:e.props)==null?void 0:F.children)&&(t==null?void 0:t.replace("{product}",e.props.children.toString()).replace("{key}",String(H+1)).replace("{total}",String(i.length))),onClick:()=>g(H)},H)}):n("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0}),T=(j=r==null?void 0:r.thumbnails)!=null&&j.length?r.thumbnails.map((Z,H)=>{var F;return n(V,{node:Z,loading:(r==null?void 0:r.thumbnailsLoadingMode)||"lazy",alt:((F=e==null?void 0:e.props)==null?void 0:F.children)&&(t==null?void 0:t.replace("{product}",e.props.children.toString()).replace("{key}",String(H+1)).replace("{total}",String(i.length)))},H)}):n("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0});return W("div",{...w,className:D(["pdp-product",J]),children:[d&&n(V,{node:d,className:"pdp-product__breadcrumbs"}),W("div",{className:"pdp-product__column-container pdp-product__gallery-column",children:[n("div",{className:"pdp-product__column-body",children:r!=null&&r.controls?n(me,{className:"pdp-product__overlay__carousel",arrows:(i==null?void 0:i.length)>1,controls:(i==null?void 0:i.length)>1?r.controls:"dots",arrowsOnMainImage:r==null?void 0:r.arrowsOnMainImage,loop:(r==null?void 0:r.loopable)&&(i==null?void 0:i.length)>1,peak:((k=r==null?void 0:r.thumbnails)==null?void 0:k.length)>1&&((Y=r==null?void 0:r.peak)==null?void 0:Y.desktop)||!1,gap:(r==null?void 0:r.gap)||null,width:"100%",height:"100%",defaultIndex:te||0,thumbnails:T,children:X}):n(Xe,{className:"pdp-product__images",gap:"small",children:X})}),p&&n(V,{node:p,className:"pdp-product__gallery-content"})]}),W("div",{className:"pdp-product__column-container pdp-product__content-column",children:[W("div",{className:"pdp-product__column-body",children:[W("div",{className:"pdp-product__header",children:[e&&n(V,{node:e,className:"pdp-product__title"}),f&&n(V,{node:f,className:"pdp-product__sku"})]}),W("div",{className:"pdp-product__prices",children:[M&&n(V,{node:M,className:D(["pdp-product__price-special","pdp-product__price"]),"aria-label":R,role:"text"}),U&&n(V,{node:U,className:D(["pdp-product__price-regular","pdp-product__price--grey"]),"aria-label":x,role:"text"})]}),r!=null&&r.mobile?n(me,{className:"pdp-product__images pdp-product__images--carousel pdp-product__images--carousel--thumbnails",width:"100%",height:"auto",arrows:(i==null?void 0:i.length)>1,controls:(i==null?void 0:i.length)>1?"thumbnailsRow":null,loop:(r==null?void 0:r.loopable)&&(i==null?void 0:i.length)>1,peak:((C=r==null?void 0:r.thumbnails)==null?void 0:C.length)>1&&((le=r==null?void 0:r.peak)==null?void 0:le.mobile)||!1,gap:(r==null?void 0:r.gap)||null,thumbnails:T,children:X}):n(me,{className:"pdp-product__images pdp-product__images--carousel",peak:((O=r==null?void 0:r.peak)==null?void 0:O.mobile)&&(i==null?void 0:i.length)>1,gap:(r==null?void 0:r.gap)||null,width:"100%",height:"auto",arrows:(i==null?void 0:i.length)>1,controls:(i==null?void 0:i.length)>1?"dots":null,loop:(r==null?void 0:r.loopable)&&(i==null?void 0:i.length)>1,children:X}),W("div",{className:D(["pdp-product__actions",["pdp-product__actions--out-of-stock",h]]),children:[h&&n("div",{className:"pdp-product__out-of-stock__text",children:S}),b&&n(V,{node:b,className:D(["pdp-product__options"])}),v&&n("div",{className:"pdp-product__quantity",children:n(V,{node:v})}),A&&n(V,{node:A,className:D(["pdp-product__buttons"])})]}),P&&n(V,{node:P,className:D(["pdp-product__short_description"])}),l&&n(V,{node:l,className:D(["pdp-product__description"])}),ee?n("div",{className:"pdp-product__attributes",children:ee}):null]}),u&&n(V,{node:u,className:"pdp-product__info-content"})]}),s&&n(V,{node:s,className:"pdp-product__content"}),te===null?null:n(Ze,{className:"pdp-product__overlay",onClose:()=>g(null),centered:!0,children:n(me,{className:"pdp-product__overlay__carousel",arrows:(i==null?void 0:i.length)>1,width:"100%",height:"100%",defaultIndex:te||0,loop:(i==null?void 0:i.length)>1,controls:(i==null?void 0:i.length)>1?"dots":null,isZoomed:!0,children:X})})]})},Xe=({children:e,gap:d=null,className:p,style:u,...s})=>{const f=re.count(e);return n("div",{...s,className:D(["pdp-gallery-grid",p]),style:{"--gap":d?`var(--spacing-${d})`:"0px",...u},children:re.map(e,(h,P)=>n("div",{className:"pdp-gallery-grid__item",children:n(V,{node:h,loading:P===0?"eager":"lazy"},h.props.src)},f+P))})},Oe=({amount:e,currency:d,locale:p,variant:u,sale:s,minimumAmount:f,maximumAmount:h,className:P,...l})=>n(fe,{children:e||f===h?n("div",{className:"pdp-price-range",...l,children:n(Ae,{amount:e||f,currency:d,locale:p,variant:u,sale:s,className:P})}):W("div",{className:"pdp-price-range",...l,children:[n(Ae,{amount:f,currency:d,locale:p,className:P}),n("span",{className:"pdp-price-range__label",children:"-"}),n(Ae,{amount:h,currency:d,locale:p,className:P})]})}),Ze=({centered:e,onClose:d,className:p,children:u,...s})=>{const f=q("PDP.Overlay.Close.label").label,h=Q(()=>{d==null||d()},[d]);return G(()=>{const P=l=>{l.key==="Escape"&&h()};return document.addEventListener("keydown",P),()=>{document.removeEventListener("keydown",P)}},[h]),G(()=>{const P=document.scrollingElement,l=P.style.overflow;return P.style.overflow="hidden",()=>{P.style.overflow=l}},[]),W("div",{...s,className:D(["pdp-overlay",["pdp-overlay--centered",e],p]),children:[n("div",{className:"pdp-overlay__content",children:u}),n(we,{"aria-label":f,variant:"tertiary",className:"pdp-overlay__close-button",onClick:h,icon:n(Qe,{})})]})},Ye=["text","image","color","dropdown"],Ce=e=>e.map(d=>({...d,text:d.label,disabled:!d.inStock}));function et(e,d){return e.reduce((p,u)=>{const s=d==null?void 0:d.find(h=>h.items.find(P=>P.id===u));if(!s)return p;const f=s.items.find(h=>h.id===u);return{...p,[s.id]:{label:f.label,value:f.id}}},{})}const tt=({options:e,hideSelectedValue:d,selectedUIDs:p,onValues:u,onErrors:s,defaultOptions:f,selectionsToUpdate:h,className:P,children:l,...ee})=>{const i=q("PDP.Swatches.Required.label").label,[b,U]=K(()=>e==null?void 0:e.reduce((A,r)=>{const{items:w}=r,x=w==null?void 0:w.find(S=>f==null?void 0:f.includes(S.id)),R=w==null?void 0:w.find(S=>S.selected);return x?{...A,[r.id]:{label:x.label,value:x.id}}:R?{...A,[r.id]:{label:R.label,value:R.id}}:A},{}));G(()=>{if(p){const v=et(p,e);if(JSON.stringify(v)===JSON.stringify(b))return;M(Object.keys(v)[0],v[Object.keys(v)[0]].label,p[0])}},[p]),G(()=>{h==null||h.forEach(v=>{U(A=>{var x;const r=(x=v==null?void 0:v.items)==null?void 0:x.find(R=>R.selected);return r?{...A,[v.id]:{label:r==null?void 0:r.label,value:r==null?void 0:r.id}}:A})})},[h,U]),ve(()=>{const v=e==null?void 0:e.reduce((A,r)=>{var w;return(w=r==null?void 0:r.items)==null||w.forEach(x=>{var S;const R=((S=b[r.id])==null?void 0:S.value)===x.id;r.required&&!R&&(A[r.id]=i)}),A},{});return s==null||s(v),v},[b]);const M=Q((v,A,r)=>{U(w=>{const x={...w,[v]:{label:A,value:r}};return u==null||u(x,r),x})},[u]),J=(v,A)=>{var w;const r=((w=A.selectedOptions[0])==null?void 0:w.label)??"";M(v,r,A.value)},ne=Q(({items:v,id:A,required:r,type:w,selected:x,label:R})=>n("div",{className:D(["pdp-swatches__options"]),children:(w==null?void 0:w.toLowerCase())==="dropdown"?n(qe,{"aria-label":R,handleSelect:S=>J(A,S.target),options:Ce(v),value:x}):v==null?void 0:v.map(S=>{const t={key:S.id,id:S.id,name:A,value:S.value,label:S.label,groupAriaLabel:R,selected:x===S.id,outOfStock:!S.inStock,required:r===null?!0:r,onValue:()=>{M(A,S.label,S.id)}};switch(w){case"text":return n(Ge,{...t,label:S.label});case"image":return n(ze,{...t,src:S.value,alt:S.label});case"color":return n(He,{...t,size:"large",color:S.value});default:return console.warn(`Invalid swatch type ${w}`),null}})}),[M]);return n("div",{...ee,className:D(["pdp-swatches",P]),children:e==null?void 0:e.map(({type:v,label:A,id:r,multiple:w,required:x,items:R})=>{var S;if(!v){console.warn("Bundle product not supported on UI.");return}return Ye.includes(v)||console.warn(`Invalid swatch type ${v}`),w&&console.warn("Multiple selection swatches are not currently supported."),W("div",{id:`swatch-item-${r}`,"data-slot-key":`product-swatch--${r}`,className:"pdp-swatches__field",children:[n("div",{className:"pdp-swatches__field__label",children:b[r]?d?`${A}`:`${A}: ${b[r].label}`:A}),n(ne,{id:r,type:v,required:x,items:R,label:A,selected:(S=b[r])==null?void 0:S.value})]},`swatch-item-${r}`)})})};function rt(e,d="en_US"){if(!Me(e))throw Error("Invalid date string");return e.split(" ")[1]||(e=`${e} 00:00:00`),new Date(e).toLocaleDateString(Le(d)).toString()}function Me(e){if(![/^\d{4}-\d{2}-\d{2}$/,/^\d{1,2}\/\d{1,2}\/\d{4}$/,/^\d{2}\/\d{2}\/\d{4}$/,/^\d{4}\/\d{2}\/\d{2}$/,/^\d{1,2}\.\d{1,2}\.\d{4}$/,/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/].some(u=>u.test(e)))return!1;const p=new Date(e);return!isNaN(p.getTime())}function nt(e){const d=new URLSearchParams(window.location.search);Object.entries(e).forEach(([u,s])=>{s===null?d.delete(u):d.set(u,String(s))});let p=window.location.pathname;p+=`?${d.toString()}`,p+=window.location.hash,window.history.replaceState({},"",p)}function lt(){const e=new URLSearchParams(window.location.search),d={};return e.forEach((p,u)=>{d[u]=p}),d}function ct(e){var d,p,u,s,f,h,P,l;return{productId:e==null?void 0:e.externalId,name:e==null?void 0:e.name,sku:e==null?void 0:e.sku,topLevelSku:e==null?void 0:e.externalParentId,specialToDate:void 0,specialFromDate:void 0,newToDate:void 0,newFromDate:void 0,createdAt:void 0,updatedAt:void 0,manufacturer:void 0,countryOfManufacture:void 0,categories:void 0,productType:void 0,pricing:{regularPrice:((p=(d=e==null?void 0:e.prices)==null?void 0:d.regular)==null?void 0:p.amount)||0,minimalPrice:void 0,maximalPrice:void 0,specialPrice:(s=(u=e==null?void 0:e.prices)==null?void 0:u.final)==null?void 0:s.amount,tierPricing:void 0,currencyCode:((h=(f=e==null?void 0:e.prices)==null?void 0:f.final)==null?void 0:h.currency)||"USD"},canonicalUrl:e==null?void 0:e.urlKey,mainImageUrl:(l=(P=e==null?void 0:e.images)==null?void 0:P[0])==null?void 0:l.url}}const at={PRODUCT_CONTEXT:"productContext"},it={PRODUCT_PAGE_VIEW:"product-page-view"};function We(){return window.adobeDataLayer=window.adobeDataLayer||[],window.adobeDataLayer}function dt(e,d){const p=We();p.push({[e]:null}),p.push({[e]:d})}function ot(e,d){We().push(u=>{const s=u.getState?u.getState():{};u.push({event:e,eventInfo:{...s,...d}})})}function Ee(e){const d=ct(e);dt(at.PRODUCT_CONTEXT,d),ot(it.PRODUCT_PAGE_VIEW)}const st=({sku:e,hideSku:d,hideQuantity:p,hideShortDescription:u,hideDescription:s,hideAttributes:f,hideURLParams:h,hideSelectedOptionValue:P,slots:l,children:ee,initialData:i,carousel:b,optionsConfig:U,useACDL:M,onAddToCart:J,...ne})=>{var he,de,pe,oe;const v=q("PDP.Product.AddToCart.label").label,A=q("PDP.Product.Incrementer.label").label,r=q("PDP.Product.Details.label").label,[w,x]=K(Re.getConfig().defaultLocale||"en-US"),[R,S]=K(),[t=null,te]=K(i),[g,X]=K(()=>{const c={sku:e,quantity:1};return t!=null&&t.optionUIDs&&(c.optionsUIDs=t.optionUIDs),c}),[T,j]=K(()=>{var c,_;return!(t!=null&&t.options&&((c=t==null?void 0:t.options)==null?void 0:c.length)>0&&((_=t==null?void 0:t.optionUIDs)==null?void 0:_.length)!==(t==null?void 0:t.options.length))}),k={data:t,values:g,valid:T};G(()=>{const c=Ne.on("pdp/setValues",_=>{X(y=>({...y,..._}))});return()=>{c==null||c.off()}},[]),G(()=>{const c=Ne.on("locale",_=>{_!==w&&(x(_),$e(e).then(te))});return()=>{c==null||c.off()}},[w,e]),G(()=>{M&&i&&Object.keys(i).length>0&&Ee(i)},[i]);const Y=Q(c=>{X(_=>({..._,...c}))},[]);G(()=>{Ne.emit("pdp/values",g)},[JSON.stringify(g)]);const C=Q(c=>{var y;let _=Object.keys(c).map(m=>c[m].value).filter(m=>m!==void 0);h||nt({optionsUIDs:_.join(",")}),Y({optionsUIDs:_}),j((_==null?void 0:_.length)===((y=t==null?void 0:t.options)==null?void 0:y.length)),Be(e,_,U==null?void 0:U.anchorOptions).then(m=>{var E;te(m),(E=U==null?void 0:U.anchorOptions)!=null&&E.length&&le(m,_),M&&(m==null?void 0:m.sku)!==e&&Ee(m)})},[e]),le=Q((c,_)=>{var E;const y=(c==null?void 0:c.optionUIDs)??[];_.every($=>y.includes($))||(S(c==null?void 0:c.options),Y({optionsUIDs:y}),j((y==null?void 0:y.length)===((E=c==null?void 0:c.options)==null?void 0:E.length)))},[e]),O=Q(c=>{Object.keys(c).length!==0&&j(!1)},[]),Z=ve(()=>{var c;return(c=t==null?void 0:t.attributes)==null?void 0:c.map(({label:_,value:y},m)=>{const E=Me(y)?rt(y,w):y.toString();return W("li",{children:[_,": ",n("span",{dangerouslySetInnerHTML:{__html:E}})]},m)})},[t==null?void 0:t.attributes,w]),H=!p&&(t!=null&&t.inStock)?n(z,{name:"Quantity",slot:l==null?void 0:l.Quantity,context:{...k},children:n(je,{name:"quantity",defaultValue:g.quantity.toString(),value:g.quantity.toString(),min:1,"aria-label":A,className:"pdp-product__quantity",onValue:c=>{Y({quantity:Number(c)})}},"quantity")}):void 0,F=()=>{if(t!=null&&t.options)return n(z,{name:"Options",slot:l==null?void 0:l.Options,context:{...k},children:n(tt,{selectedUIDs:g.optionsUIDs,options:t.options,defaultOptions:g.optionsUIDs,selectionsToUpdate:R,hideSelectedValue:P,onValues:C,onErrors:O})})};return n("div",{...ne,children:n(Je,{title:n(z,{name:"Title",slot:l==null?void 0:l.Title,context:{...k},children:t==null?void 0:t.name}),sku:d?void 0:n(z,{name:"SKU",slot:l==null?void 0:l.SKU,context:{...k},children:t==null?void 0:t.sku}),options:F(),breadcrumbs:(l==null?void 0:l.Breadcrumbs)&&n(z,{name:"Breadcrumbs",slot:l==null?void 0:l.Breadcrumbs,context:{...k,setSeparator(c){this._registerMethod((..._)=>{const y=c(..._),m=y&&n(be,{source:y});this._setProps(E=>({...E,separator:m}))})},appendLink(c){this._registerMethod((..._)=>{const{text:y,...m}=c(..._),E=n("a",{...m,children:y});this._setProps($=>({...$,categories:[...$.categories||[],E]}))})},appendHTMLElement(c){this._registerMethod((..._)=>{const y=c(..._),m=this._htmlElementToVNode(y);this._setProps(E=>({...E,categories:[...E.categories||[],m]}))})}},render:({separator:c,categories:_})=>n(Fe,{separator:c,categories:_})}),quantity:H,actions:n(z,{name:"Actions",slot:l==null?void 0:l.Actions,context:{...k,appendButton(c){this._registerMethod((..._)=>{const y=c(..._);if(!y)return;const{text:m,icon:E,...$}=y,ce=n(we,{type:"button",...$,icon:E&&n(be,{source:E}),children:m});this._setProps(ae=>({children:[...ae.children||[],ce]}))})}},children:!(l!=null&&l.Actions)&&n(we,{size:"medium",type:"submit",icon:n(be,{source:"Cart"}),disabled:!(t!=null&&t.inStock)||!T,"aria-label":v,onClick:()=>J==null?void 0:J(g),children:v})}),shortDescription:u?void 0:n(z,{name:"ShortDescription",slot:l==null?void 0:l.ShortDescription,context:{...k},children:n("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.shortDescription)??""}})}),description:s?void 0:n(z,{name:"Description",slot:l==null?void 0:l.Description,context:{...k},children:n("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.description)??""}})}),images:((he=t==null?void 0:t.images)==null?void 0:he.map(({label:c,url:_})=>{var y,m;return n(xe,{title:c,alt:c,src:_,width:((y=b==null?void 0:b.imageParams)==null?void 0:y.width)??960,height:((m=b==null?void 0:b.imageParams)==null?void 0:m.height)??1191,params:(b==null?void 0:b.imageParams)??{width:960}},_)}))??[],specialPrice:(de=t==null?void 0:t.prices)!=null&&de.visible?n(z,{name:"SpecialPrice",slot:l==null?void 0:l.SpecialPrice,context:{...k},children:n(Oe,{...t.prices.final,locale:Le(w)})}):void 0,price:(pe=t==null?void 0:t.prices)!=null&&pe.visible&&t.prices.regular&&t.prices.final.amount!==(t==null?void 0:t.prices.regular.amount)?n(z,{name:"RegularPrice",slot:l==null?void 0:l.RegularPrice,context:{...k},children:n(Oe,{...t.prices.regular,locale:Le(w)})}):void 0,carouselConfig:{...b,thumbnails:b?((oe=t==null?void 0:t.images)==null?void 0:oe.map(({label:c,url:_})=>{var y,m;return n(xe,{title:c,alt:c,src:_,width:((y=b==null?void 0:b.thumbnailParams)==null?void 0:y.width)??200,height:((m=b==null?void 0:b.thumbnailParams)==null?void 0:m.height)??248,params:(b==null?void 0:b.thumbnailParams)??{width:200}},_)}))??[]:[]},outOfStock:!(t!=null&&t.inStock),attributes:f?void 0:n(z,{name:"Attributes",slot:l==null?void 0:l.Attributes,context:{...k},children:Z!=null&&Z.length?W(fe,{children:[r,n("ul",{children:Z})]}):null}),galleryContent:(l==null?void 0:l.GalleryContent)&&n(z,{name:"GalleryContent",slot:l.GalleryContent,context:{...k}}),infoContent:(l==null?void 0:l.InfoContent)&&n(z,{name:"InfoContent",slot:l.InfoContent,context:{...k}}),productContent:(l==null?void 0:l.Content)&&n(z,{name:"Content",slot:l.Content,context:{...k}})})})};st.getInitialData=async function({sku:e,optionsConfig:d}){var u,s,f,h,P,l;const p=((u=lt().optionsUIDs)==null?void 0:u.split(","))||((l=(P=(h=(f=(s=Re)==null?void 0:s.getConfig())==null?void 0:f.models)==null?void 0:h.ProductDetails)==null?void 0:P.initialData)==null?void 0:l.optionsUIDs);return p!=null&&p.length?await Be(e,p,d==null?void 0:d.anchorOptions):await $e(e)};export{st as ProductDetails,st as default};

package/package.json

@@ -1 +1 @@
-{"name": "@dropins/storefront-pdp", "version": "0.2.3-beta1", "@dropins/tools": "0.25.0"}
+{"name": "@dropins/storefront-pdp", "version": "0.2.3-beta10", "@dropins/tools": "0.26.0-alpha1"}