yt-uikit 0.7.404-manual-recs.1 → 0.7.404-manual-recs.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +4 -3
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -549,7 +549,8 @@ import*as e from"react";import t,{forwardRef as n,useImperativeHandle as r,useRe
|
|
|
549
549
|
flex-wrap: wrap;
|
|
550
550
|
gap: 6px;
|
|
551
551
|
align-self: flex-start;
|
|
552
|
-
margin-left: 2px;
|
|
552
|
+
margin-left: ${e=>e.$marginLeft??"2px"};
|
|
553
|
+
margin-top: ${e=>e.$marginTop??"2px"};
|
|
553
554
|
`,_n=x.span`
|
|
554
555
|
display: inline-flex;
|
|
555
556
|
align-items: center;
|
|
@@ -557,7 +558,7 @@ import*as e from"react";import t,{forwardRef as n,useImperativeHandle as r,useRe
|
|
|
557
558
|
border-radius: 999px;
|
|
558
559
|
border: 0.8px solid #E4E4E4;
|
|
559
560
|
background-color: #00000008;
|
|
560
|
-
color: #
|
|
561
|
+
color: #000;
|
|
561
562
|
font-size: 12px;
|
|
562
563
|
font-weight: 500;
|
|
563
564
|
line-height: normal;
|
|
@@ -646,7 +647,7 @@ import*as e from"react";import t,{forwardRef as n,useImperativeHandle as r,useRe
|
|
|
646
647
|
font-size: 10px;
|
|
647
648
|
line-height: normal;
|
|
648
649
|
display: flex;
|
|
649
|
-
`,Ln=({product:e,addCartItem:n,productRecsCtaButtonText:r,ctaButtonBackgroundColor:d,ctaButtonTextColor:s,primaryTextColor:p,secondaryTextColor:u,showVariantSelectionDropdownInProductRecs:m,layout:f,cartComponentsCornerRadius:g,cartComponentsCornerType:h,isVerticalList:x,backgroundColor:y,tertiaryColor:b,tertiaryTextColor:v})=>{const w=Pt(Mt),{setLoading:C}=Gt(),E=At(qt),k=i((()=>{const t=e?._ytAllowedVariantIds??e?.ytAllowedVariantIds;if(!Array.isArray(t)||0===t.length)return;const n=t.map((e=>On(e))).filter((e=>Boolean(e)));return n.length>0?n:void 0}),[e]),T=i((()=>Array.isArray(e?.variants)?e.variants.filter((e=>{if(!k?.length)return!0;const t=On(e?.id);return!!t&&k.includes(t)})):[]),[e,k]),[S,$]=c(!1),[B,z]=c((()=>{const e=T?.[0];return e?On(e.id):void 0})),[D,I]=c(T?.[0]),_=o(null),[O,N]=c(0),P=o(null),[A,F]=c(0),M=a((()=>T.find((e=>e.available))??T[0]),[T]);l((()=>{if(!T.length)return z(void 0),void I(void 0);if(!(B&&T.some((e=>On(e?.id)===B)))){const e=M();if(e){const t=On(e.id);z(t),I(e)}}}),[T,B,M]),l((()=>{(async()=>{try{if(B){const e=T.find((e=>On(e?.id)===B));e&&I(e)}}catch(e){console.error("Error getting selected product variant id")}})()}),[T,B]);const R=async()=>{C&&C(!0,!0);try{await n(B??On(T?.[0]?.id)??e?.variants?.[0]?.id,void 0,"productSuggestion",void 0,e?.handle)}catch(e){console.error("yt::error adding recommended item to cart",e)}C&&C(!1,!1)},L=()=>{const t=On(e?.id),n=k&&k.length>0?k:e?.variants?.map((e=>On(e.id))).filter((e=>Boolean(e)));E({open:!0,variantId:B??On(T?.[0]?.id)??void 0,handle:e?.handle,freebieSelection:!1,productId:t,allowedVariantIds:n,productRec:!0})};l((()=>{!x&&_.current&&N(_.current.offsetWidth)}),[x]),l((()=>{if(x&&P.current){const e=new ResizeObserver((e=>{for(let t of e)F(t.contentRect.width)}));return e.observe(P.current),F(P.current.offsetWidth),()=>e.disconnect()}}),[x]);const j=m&&T.length>1,V=i((()=>{const t=e?._ytMetafields?.
|
|
650
|
+
`,Ln=({product:e,addCartItem:n,productRecsCtaButtonText:r,ctaButtonBackgroundColor:d,ctaButtonTextColor:s,primaryTextColor:p,secondaryTextColor:u,showVariantSelectionDropdownInProductRecs:m,layout:f,cartComponentsCornerRadius:g,cartComponentsCornerType:h,isVerticalList:x,backgroundColor:y,tertiaryColor:b,tertiaryTextColor:v})=>{const w=Pt(Mt),{setLoading:C}=Gt(),E=At(qt),k=i((()=>{const t=e?._ytAllowedVariantIds??e?.ytAllowedVariantIds;if(!Array.isArray(t)||0===t.length)return;const n=t.map((e=>On(e))).filter((e=>Boolean(e)));return n.length>0?n:void 0}),[e]),T=i((()=>Array.isArray(e?.variants)?e.variants.filter((e=>{if(!k?.length)return!0;const t=On(e?.id);return!!t&&k.includes(t)})):[]),[e,k]),[S,$]=c(!1),[B,z]=c((()=>{const e=T?.[0];return e?On(e.id):void 0})),[D,I]=c(T?.[0]),_=o(null),[O,N]=c(0),P=o(null),[A,F]=c(0),M=a((()=>T.find((e=>e.available))??T[0]),[T]);l((()=>{if(!T.length)return z(void 0),void I(void 0);if(!(B&&T.some((e=>On(e?.id)===B)))){const e=M();if(e){const t=On(e.id);z(t),I(e)}}}),[T,B,M]),l((()=>{(async()=>{try{if(B){const e=T.find((e=>On(e?.id)===B));e&&I(e)}}catch(e){console.error("Error getting selected product variant id")}})()}),[T,B]);const R=async()=>{C&&C(!0,!0);try{await n(B??On(T?.[0]?.id)??e?.variants?.[0]?.id,void 0,"productSuggestion",void 0,e?.handle)}catch(e){console.error("yt::error adding recommended item to cart",e)}C&&C(!1,!1)},L=()=>{const t=On(e?.id),n=k&&k.length>0?k:e?.variants?.map((e=>On(e.id))).filter((e=>Boolean(e)));E({open:!0,variantId:B??On(T?.[0]?.id)??void 0,handle:e?.handle,freebieSelection:!1,productId:t,allowedVariantIds:n,productRec:!0})};l((()=>{!x&&_.current&&N(_.current.offsetWidth)}),[x]),l((()=>{if(x&&P.current){const e=new ResizeObserver((e=>{for(let t of e)F(t.contentRect.width)}));return e.observe(P.current),F(P.current.offsetWidth),()=>e.disconnect()}}),[x]);const j=m&&T.length>1,V=i((()=>{const t=e?._ytMetafields?.subtitle;if(!t)return;const n="string"==typeof t?t:"string"==typeof t?.value?t.value:void 0;if(!n)return;return n.trim()||void 0}),[e]),H=ln(D?.name??D?.title,50,O,"","16px"),W=ln(D?.name??D?.title??e?.title,120,A,"","14px"),U=(e,t)=>{let n;n="string"==typeof e?.featured_image?e.featured_image:e?.featured_image?.src?e.featured_image.src:t.featured_image||"/placeholder.svg";return gn(n,"vertical"===f?300:200,85,"webp")},Q={flexDirection:"horizontal"===f?"row":"column",width:"horizontal"===f?"325px":"145px",transform:S?"scale(1.025)":"scale(1)",justifyContent:"flex-start",gap:"horizontal"===f?"10px":""},G={width:"horizontal"===f?"100px":"auto",opacity:S?.8:1},q={color:u??"#212529",marginTop:"vertical"===f?"":"0"},Y=(()=>{const t=Number(D?.compare_at_price??e?.compare_at_price),n=Number(D?.price??e?.price);if(!t||!n||t<=n)return null;const r=Math.round((t-n)/t*100);return!isFinite(r)||r<=0?null:`${r}% OFF`})();return x?t.createElement($n,null,t.createElement(Bn,{src:U(D,e),onClick:()=>{window.location.href=`${window.location.origin}${e?.url}`}}),t.createElement(zn,{ref:P},t.createElement(Dn,{href:`${window.location.origin}${e?.url}`,$primaryTextColor:p},W),V&&t.createElement(In,{$marginLeft:"0px"},t.createElement(_n,{title:V},V)),t.createElement(Nn,null,t.createElement(Pn,{$secondaryTextColor:u},nn(w?.currency),mn(en(D?.price,w?.currency))),D?.compare_at_price&&t.createElement(An,null,nn(w?.currency),mn(en(D?.compare_at_price,w?.currency))),Y&&t.createElement(Rn,{$background:b,$color:v},Y))),t.createElement(Fn,{onClick:j?L:R,$ctaButtonBackgroundColor:d,$ctaButtonTextColor:s,$cartComponentsCornerType:h,$cartComponentsCornerRadius:g,style:{width:j?"auto":"36px",padding:j?"0 8px":"0"}},j?t.createElement(yn,null):t.createElement(rn,null))):t.createElement(vn,{className:"yt-cart-product-rec-card-container",ref:_,onMouseEnter:()=>$(!0),onMouseLeave:()=>$(!1),style:Q,$variant:f??"horizontal",$cartComponentsCornerType:h,$cartComponentsCornerRadius:g,$backgroundColor:y},Y&&t.createElement(Mn,{$background:b,$color:v},Y),t.createElement(wn,{className:"yt-cart-product-rec-image",src:U(D,e),style:G,$variant:f??"horizontal",$cartComponentsCornerType:h,$cartComponentsCornerRadius:g,onClick:()=>{window.location.href=`${window.location.origin}${e?.url}`}}),t.createElement(Cn,null,t.createElement("div",null,t.createElement(En,{href:`${window.location.origin}${e?.url}`,style:{color:p??"black"}},H),"vertical"===(f??"horizontal")&&V&&t.createElement(In,{$marginLeft:"4px"},t.createElement(_n,{title:V},V)),t.createElement("div",{style:{display:"flex"}},t.createElement(kn,{style:q},nn(w,w?.currency),mn(en(D?.price??e?.price,w?.currency))),t.createElement(Sn,null,Number(D?.compare_at_price)>Number(D?.price)&&t.createElement(t.Fragment,null," ",nn(w,w?.currency),mn(en(Number(D?.compare_at_price)??Number(e?.compare_at_price),w?.currency)))))),t.createElement(Tn,{onClick:j?L:R,id:"yourtoken-product-rec-atc",style:{backgroundColor:d??"#3A4980",color:s??"white",height:"fit-content",marginTop:"auto",marginBottom:"0px"},$variant:f??"horizontal",$cartComponentsCornerType:h,$cartComponentsCornerRadius:g},j?"Select Options":r??"Add to Cart")))};function jn(e){return _({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"},child:[]},{tag:"path",attr:{d:"m23 12-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12zm-12.91 4.72-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z"},child:[]}]})(e)}function Vn(e){return _({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"},child:[]},{tag:"path",attr:{d:"M12.79 21 3 11.21v2c0 .53.21 1.04.59 1.41l7.79 7.79c.78.78 2.05.78 2.83 0l6.21-6.21c.78-.78.78-2.05 0-2.83L12.79 21z"},child:[]},{tag:"path",attr:{d:"M11.38 17.41c.78.78 2.05.78 2.83 0l6.21-6.21c.78-.78.78-2.05 0-2.83L12.63.58A2.04 2.04 0 0 0 11.21 0H5C3.9 0 3 .9 3 2v6.21c0 .53.21 1.04.59 1.41l7.79 7.79zM7.25 3a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z"},child:[]}]})(e)}function Hn(e){return _({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"},child:[]},{tag:"path",attr:{d:"M6.41 6 5 7.41 9.58 12 5 16.59 6.41 18l6-6z"},child:[]},{tag:"path",attr:{d:"m13 6-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6z"},child:[]}]})(e)}function Wn(e){return _({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"},child:[]},{tag:"path",attr:{d:"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"},child:[]}]})(e)}function Un(e){return _({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"},child:[]},{tag:"path",attr:{d:"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"},child:[]}]})(e)}function Qn(e){return _({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"},child:[]},{tag:"path",attr:{d:"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"},child:[]}]})(e)}const Gn=x.div`
|
|
650
651
|
display: flex;
|
|
651
652
|
flex-direction: column;
|
|
652
653
|
row-gap: 8px;
|