@anker-in/headless-ui 1.0.19-temp-101103 → 1.0.19-temp-101302
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/cjs/biz-components/CollectionShelves/CollectionShelvesItem.js +1 -1
- package/dist/cjs/biz-components/CollectionShelves/CollectionShelvesItem.js.map +2 -2
- package/dist/cjs/biz-components/CollectionsBanner/index.js +1 -1
- package/dist/cjs/biz-components/CollectionsBanner/index.js.map +2 -2
- package/dist/cjs/biz-components/CollectionsFilters/FilterCardWrap.d.ts +2 -2
- package/dist/cjs/biz-components/CollectionsFilters/FilterCardWrap.js +1 -1
- package/dist/cjs/biz-components/CollectionsFilters/FilterCardWrap.js.map +3 -3
- package/dist/cjs/biz-components/CollectionsFilters/FilterCardWrapItem.js +1 -1
- package/dist/cjs/biz-components/CollectionsFilters/FilterCardWrapItem.js.map +3 -3
- package/dist/cjs/biz-components/CollectionsFilters/FilterHeader.js +1 -1
- package/dist/cjs/biz-components/CollectionsFilters/FilterHeader.js.map +3 -3
- package/dist/cjs/biz-components/CollectionsFilters/FilterList.js +1 -1
- package/dist/cjs/biz-components/CollectionsFilters/FilterList.js.map +2 -2
- package/dist/cjs/biz-components/CollectionsFilters/component/TabFilter.js +1 -1
- package/dist/cjs/biz-components/CollectionsFilters/component/TabFilter.js.map +2 -2
- package/dist/cjs/biz-components/CollectionsFilters/index.js +1 -1
- package/dist/cjs/biz-components/CollectionsFilters/index.js.map +3 -3
- package/dist/cjs/biz-components/TextMarquee/index.js +1 -1
- package/dist/cjs/biz-components/TextMarquee/index.js.map +2 -2
- package/dist/cjs/tsconfig.tsbuildinfo +1 -1
- package/dist/esm/biz-components/CollectionShelves/CollectionShelvesItem.js +1 -1
- package/dist/esm/biz-components/CollectionShelves/CollectionShelvesItem.js.map +2 -2
- package/dist/esm/biz-components/CollectionsBanner/index.js +1 -1
- package/dist/esm/biz-components/CollectionsBanner/index.js.map +2 -2
- package/dist/esm/biz-components/CollectionsFilters/FilterCardWrap.d.ts +2 -2
- package/dist/esm/biz-components/CollectionsFilters/FilterCardWrap.js +1 -1
- package/dist/esm/biz-components/CollectionsFilters/FilterCardWrap.js.map +3 -3
- package/dist/esm/biz-components/CollectionsFilters/FilterCardWrapItem.js +1 -1
- package/dist/esm/biz-components/CollectionsFilters/FilterCardWrapItem.js.map +3 -3
- package/dist/esm/biz-components/CollectionsFilters/FilterHeader.js +1 -1
- package/dist/esm/biz-components/CollectionsFilters/FilterHeader.js.map +3 -3
- package/dist/esm/biz-components/CollectionsFilters/FilterList.js +1 -1
- package/dist/esm/biz-components/CollectionsFilters/FilterList.js.map +2 -2
- package/dist/esm/biz-components/CollectionsFilters/component/TabFilter.js +1 -1
- package/dist/esm/biz-components/CollectionsFilters/component/TabFilter.js.map +2 -2
- package/dist/esm/biz-components/CollectionsFilters/index.js +1 -1
- package/dist/esm/biz-components/CollectionsFilters/index.js.map +3 -3
- package/dist/esm/biz-components/TextMarquee/index.js +1 -1
- package/dist/esm/biz-components/TextMarquee/index.js.map +2 -2
- package/dist/esm/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var z=Object.create;var f=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var G=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},N=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of W(t))!q.call(e,c)&&c!==r&&f(e,c,{get:()=>t[c],enumerable:!(a=M(t,c))||a.enumerable});return e};var
|
|
1
|
+
"use strict";var z=Object.create;var f=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var G=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},N=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of W(t))!q.call(e,c)&&c!==r&&f(e,c,{get:()=>t[c],enumerable:!(a=M(t,c))||a.enumerable});return e};var y=(e,t,r)=>(r=e!=null?z(V(e)):{},N(t||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),J=e=>N(f({},"__esModule",{value:!0}),e);var Z={};G(Z,{CollectionShelvesWrapItem:()=>Y});module.exports=J(Z);var l=require("react/jsx-runtime"),d=require("../../helpers/utils.js"),T=y(require("../../components/badge.js")),B=require("../../components/text.js"),b=y(require("../../components/button.js")),C=require("../../shared/track.js"),m=require("react"),g=y(require("../../components/picture.js")),D=require("../../components/heading.js"),$=require("../AiuiProvider/index.js"),F=require("../../shared/trackUrlRef.js"),O=require("../ShelfDisplay/shelfDisplay.js");const K="image",Q="collectio_shelves",X=999999999e-2,Y=({data:e,configuration:t})=>{const{itemShape:r}=t||{},{locale:a="us"}=(0,$.useAiuiContext)(),[c,P]=(0,m.useState)(""),I=(o,i,n)=>t?.event?.primaryButton?.(o,i+1,n),E=(o,i,n)=>t?.event?.secondaryButton?.(o,i+1,n),s=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},v=!s?.availableForSale||s?.price?.amount===X,j=t?.isShowTag,k=t?.isShowOriginalPrice,[S,A]=(0,m.useState)([]),[L,w]=(0,m.useState)(!1),h=s?.coupons?.[0],{price:U,basePrice:H,discount:p}=(0,O.formatVariantPrice)({locale:a,amount:k&&h?h.variant_price4wscode:s.price,baseAmount:k&&h?s.price:0,currencyCode:e?.price?.currencyCode||"USD"}),R=()=>{const o=e?.sku,i=e?.variants;return i?.find(x=>x?.sku===o)?.image?.url||i?.[0]?.image?.url||""},u=e?.custom_name||e?.title||e?.name,_=e?.custom_description||e?.description;return(0,m.useEffect)(()=>{let o=[];if(p){const n=`${p}${t?.metafields?.discounts?.off||""}`;o.push(n)}const i=e?.tags?.filter?.(n=>n?.startsWith?.("CLtag"))?.map?.(n=>n?.replace?.("CLtag:",""))?.slice?.(0,p?1:2);A(o.concat(i))},[p,t?.metafields?.discounts,e?.tags]),(0,m.useEffect)(()=>{const{infos:o}=s?.metafields||{},{productInfos:i,preRender:n}=e?.metafields||{},{shopCommon:x}=t?.metafields||{};P(o?.comingSoon||i?.comingSoon||n?.soldOut||x?.soldOut||"")},[e,s]),(0,l.jsx)("div",{className:(0,d.cn)(r==="rounded"?"rounded-2xl":"rounded-none","bg-[#EAEAEC] tablet:hover:bg-[#FFFFFF] box-border w-full cursor-pointer overflow-hidden duration-300","collection-shelves-item",{"aiui-dark":e?.custom_theme==="dark"}),children:(0,l.jsxs)("div",{className:"h-full box-border flex flex-col justify-between overflow-hidden",children:[(0,l.jsx)("div",{onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1),className:(0,d.cn)("desktop:p-6 p-4 relative inline-block w-full lg-desktop:h-[288px] desktop:h-[234px] h-[182px] overflow-hidden cursor-pointer"),children:(0,l.jsxs)("a",{"aria-label":u,target:t?.target,href:(0,F.trackUrlRef)(`${a==="us"||!a?"":`/${a}`}/products/${e?.handle}`,`${K}_${Q}`),onClick:()=>{(0,C.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||s?.sku,item_name:e?.name,item_variant:s?.name,price:s?.price,index:t?.index+1}]}})},children:[(0,l.jsx)(g.default,{alt:"",source:R(),className:"flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto"}),(0,l.jsx)(g.default,{alt:"",source:e?.custom_image,className:(0,d.cn)(L?"opacity-100":"opacity-0","absolute inset-x-0 top-0 h-full object-cover [&_img]:size-full transition-all duration-300")})]})}),(0,l.jsxs)("div",{className:"overflow-hidden flex flex-col justify-end desktop:p-6 p-4 pt-1 flex-1 box-border collection-shelves-product-content",children:[j&&S?.length?(0,l.jsx)("div",{className:"mb-2 box-border flex flex-wrap gap-1 overflow-hidden",children:S?.map?.((o,i)=>(0,l.jsx)(T.default,{children:o},i))}):null,u?(0,l.jsx)(D.Heading,{as:"h3",title:u||"",html:u||"",className:"lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl collection-shelves-product-title line-clamp-2 text-info-primary font-bold tablet:leading-6 text-base"}):null,_?(0,l.jsx)(B.Text,{size:2,html:_||"",className:"lg-desktop:text-lg desktop:text-base collection-shelves-product-description line-clamp-1 text-sm font-bold text-info-primary"}):null,(0,l.jsx)("div",{className:"mb-1 mt-4 flex items-center",children:v?(0,l.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:c||""}):(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:s?.availableForSale&&U||""}),(0,l.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:s?.availableForSale&&H||""})]})}),(0,l.jsxs)("div",{className:(0,d.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,l.jsx)(b.default,{variant:"secondary",onClick:()=>E(e,t?.index,t),className:`overflow-hidden font-bold ${t.direction==="vertical"?"w-full":""} ${t?.shape==="rounded"?"rounded-2xl":""}`,children:t?.secondaryButton||""}):null,t?.primaryButton&&!v?(0,l.jsx)(b.default,{variant:"primary",disabled:v,onClick:()=>I(e,t?.index,t),className:`overflow-hidden font-bold ${t.direction==="vertical"?"w-full":""} ${t?.shape==="rounded"?"rounded-2xl":""}`,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};
|
|
2
2
|
//# sourceMappingURL=CollectionShelvesItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/CollectionShelves/CollectionShelvesItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport Badge from '../../components/badge.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useState, useEffect } from 'react'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from '../ShelfDisplay/shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'collectio_shelves'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const CollectionShelvesWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape } = configuration || {}\n const { locale = 'us' } = useAiuiContext()\n\n const [soldOutText, setSoldOutText] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n const [showTags, setShowTags] = useState<string[]>([])\n const [showImage, setShowImage] = useState<boolean>(false)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice, discount } = formatVariantPrice({\n locale: locale,\n amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n const displayTitle = data?.custom_name || data?.title || data?.name\n const displayDescription = data?.custom_description || data?.description\n\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${configuration?.metafields?.discounts?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [discount, configuration?.metafields?.discounts, data?.tags])\n\n useEffect(() => {\n const { infos } = variant?.metafields || {}\n const { productInfos, preRender } = data?.metafields || {}\n const { shopCommon } = configuration?.metafields || {}\n setSoldOutText(infos?.comingSoon || productInfos?.comingSoon || preRender?.soldOut || shopCommon?.soldOut || '')\n }, [data, variant])\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n itemShape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n '
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,+BAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport Badge from '../../components/badge.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useState, useEffect } from 'react'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from '../ShelfDisplay/shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'collectio_shelves'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const CollectionShelvesWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape } = configuration || {}\n const { locale = 'us' } = useAiuiContext()\n\n const [soldOutText, setSoldOutText] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n const [showTags, setShowTags] = useState<string[]>([])\n const [showImage, setShowImage] = useState<boolean>(false)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice, discount } = formatVariantPrice({\n locale: locale,\n amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n const displayTitle = data?.custom_name || data?.title || data?.name\n const displayDescription = data?.custom_description || data?.description\n\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${configuration?.metafields?.discounts?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [discount, configuration?.metafields?.discounts, data?.tags])\n\n useEffect(() => {\n const { infos } = variant?.metafields || {}\n const { productInfos, preRender } = data?.metafields || {}\n const { shopCommon } = configuration?.metafields || {}\n setSoldOutText(infos?.comingSoon || productInfos?.comingSoon || preRender?.soldOut || shopCommon?.soldOut || '')\n }, [data, variant])\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n itemShape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n 'bg-[#EAEAEC] tablet:hover:bg-[#FFFFFF] box-border w-full cursor-pointer overflow-hidden duration-300',\n 'collection-shelves-item',\n {\n 'aiui-dark': data?.custom_theme === 'dark',\n }\n )}\n >\n <div className=\"h-full box-border flex flex-col justify-between overflow-hidden\">\n <div\n onMouseEnter={() => setShowImage(true)}\n onMouseLeave={() => setShowImage(false)}\n className={cn(\n 'desktop:p-6 p-4 relative inline-block w-full lg-desktop:h-[288px] desktop:h-[234px] h-[182px] overflow-hidden cursor-pointer'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n alt=\"\"\n source={handleUrl()}\n className=\"flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto\"\n />\n <Picture\n alt=\"\"\n source={data?.custom_image}\n className={cn(\n showImage ? 'opacity-100' : 'opacity-0',\n 'absolute inset-x-0 top-0 h-full object-cover [&_img]:size-full transition-all duration-300'\n )}\n />\n </a>\n </div>\n <div className=\"overflow-hidden flex flex-col justify-end desktop:p-6 p-4 pt-1 flex-1 box-border collection-shelves-product-content\">\n {isShowTag && showTags?.length ? (\n <div className=\"mb-2 box-border flex flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n html={displayTitle || ''}\n className=\"lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl collection-shelves-product-title line-clamp-2 text-info-primary font-bold tablet:leading-6 text-base\"\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n html={displayDescription || ''}\n className=\"lg-desktop:text-lg desktop:text-base collection-shelves-product-description line-clamp-1 text-sm font-bold text-info-primary\"\n />\n ) : null}\n <div className=\"mb-1 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{soldOutText || ''}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`overflow-hidden font-bold ${configuration.direction === 'vertical' ? 'w-full' : ''} ${configuration?.shape === 'rounded' ? 'rounded-2xl' : ''}`}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton && !isSoldOut ? (\n <Button\n variant=\"primary\"\n disabled={isSoldOut}\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`overflow-hidden font-bold ${configuration.direction === 'vertical' ? 'w-full' : ''} ${configuration?.shape === 'rounded' ? 'rounded-2xl' : ''}`}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["CollectionShelvesItem_exports", "__export", "CollectionShelvesWrapItem", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_badge", "import_text", "import_button", "import_track", "import_react", "import_picture", "import_heading", "import_AiuiProvider", "import_trackUrlRef", "import_shelfDisplay", "componentType", "componentName", "SOLD_OUT_PRICE", "data", "configuration", "itemShape", "locale", "soldOutText", "setSoldOutText", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "showTags", "setShowTags", "showImage", "setShowImage", "coupon", "price", "basePrice", "discount", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "infos", "productInfos", "preRender", "shopCommon", "Picture", "Badge", "Button"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var G=Object.create;var b=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var X=(e,t)=>{for(var l in t)b(e,l,{get:t[l],enumerable:!0})},L=(e,t,l,
|
|
1
|
+
"use strict";"use client";var G=Object.create;var b=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var X=(e,t)=>{for(var l in t)b(e,l,{get:t[l],enumerable:!0})},L=(e,t,l,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of K(t))!W.call(e,a)&&a!==l&&b(e,a,{get:()=>t[a],enumerable:!(s=J(t,a))||s.enumerable});return e};var y=(e,t,l)=>(l=e!=null?G(O(e)):{},L(t||!e||!e.__esModule?b(l,"default",{value:e,enumerable:!0}):l,e)),Y=e=>L(b({},"__esModule",{value:!0}),e);var ee={};X(ee,{default:()=>Z});module.exports=Y(ee);var r=require("react/jsx-runtime"),o=y(require("react")),u=y(require("gsap")),m=require("gsap/dist/ScrollTrigger"),T=require("react-responsive"),B=require("react-intersection-observer"),E=y(require("../../helpers/ScrollLoadVideo.js")),g=require("../../components/index.js"),d=require("../../helpers/index.js"),z=require("../../shared/Styles.js"),D=require("../../hooks/useExposure.js"),U=require("../../shared/trackUrlRef.js"),se=require("../../components/button.js"),ie=require("../VideoModal/index.js");const k="image",w="collections_banner",S=o.default.forwardRef(({data:e,className:t},l)=>{const{title:s,subtitle:a,pcImage:N,padImage:j,mobileImage:H,pcVideo:R,padVideo:P,mobileVideo:f,isShowVideo:q,theme:_="light",blockLink:V}=e,$=(0,T.useMediaQuery)({query:"(max-width: 768px)"}),I=(0,T.useMediaQuery)({query:"(max-width: 1024px)"}),{ref:Q,inView:M}=(0,B.useInView)(),h=(0,o.useRef)(null),x=(0,o.useRef)(null),v=(0,o.useRef)(null),i=(0,o.useRef)(null),n=(0,o.useRef)(null);return(0,D.useExposure)(n,{componentType:k,componentName:w,componentTitle:s,componentDescription:a}),(0,o.useImperativeHandle)(l,()=>n.current),(0,o.useEffect)(()=>{u.default.registerPlugin(m.ScrollTrigger);function A(){if(!i.current)return;const F=n.current?.clientHeight||100;window.innerHeight<=F?h.current=m.ScrollTrigger.create({trigger:n.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:c=>{const p=c.progress*40-20;u.default.set(i.current,{yPercent:p})}}):(v.current=m.ScrollTrigger.create({trigger:n.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:c=>{const p=c.progress*20-20;u.default.set(i.current,{yPercent:p})}}),x.current=m.ScrollTrigger.create({trigger:n.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:c=>{const p=c.progress*20;u.default.set(i.current,{yPercent:p})}}))}return M&&A(),()=>{h.current&&h.current.kill(),v.current&&v.current.kill(),x.current&&x.current.kill()}},[M]),(0,r.jsx)("div",{ref:Q,"data-ui-component-id":"CollectionsBanner",children:(0,r.jsxs)("div",{ref:n,className:(0,d.cn)(_==="dark"?"aiui-dark":"","text-info-primary relative w-full overflow-hidden","lg-desktop:aspect-[1920/480] desktop:aspect-[1440/384] laptop:aspect-[1024/400] tablet:aspect-[768/480] aspect-[390/480]",t),children:[V&&(0,r.jsx)("a",{tabIndex:-1,"aria-hidden":"true","aria-label":s,className:"absolute inset-0 z-10","data-headless-title-desc-button":`${s}#${a}`,"data-headless-type-name":`${k}#${w}`,href:(0,U.trackUrlRef)(V,`${k}_${w}`)}),(0,r.jsx)("div",{ref:i,className:(0,d.cn)("absolute left-0 top-0 size-full"),children:q?(0,r.jsx)(E.default,{poster:$?f?.url:I?P?.url||f?.url:R?.url,src:$?f?.url:I?P?.url||f?.url:R?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):(0,r.jsx)(g.Picture,{loading:"eager",fetchPriority:"high",className:"laptop:w-full h-full",imgClassName:"h-full object-cover",alt:N?.alt||"",source:`${N?.url||""} , ${j?.url??(H?.url||"")} 1024, ${H?.url||""} 767`})}),(0,r.jsx)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-8 laptop:px-16 lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-8 absolute top-24 z-10 flex flex-col gap-6 px-4",children:(0,r.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[s&&(0,r.jsx)(g.Heading,{as:"h2",className:(0,d.cn)("font-bold hero-banner-title"),html:s}),a&&(0,r.jsx)(g.Heading,{as:"h3",className:(0,d.cn)("hero-banner-subtitle font-heading lg-desktop:text-lg desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm font-bold"),html:a})]})})]})})});S.displayName="CollectionsBanner";var Z=(0,z.withLayout)(S);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/CollectionsBanner/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { CollectionsBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'collections_banner'\n\nconst CollectionsBanner = React.forwardRef<HTMLDivElement, CollectionsBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n theme = 'light',\n blockLink,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"CollectionsBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n 'lg-desktop:aspect-[1920/480] desktop:aspect-[1440/384] laptop:aspect-[1024/400] tablet:aspect-[768/480] aspect-[390/480]',\n className\n )}\n >\n {blockLink && (\n <a\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n className=\"absolute inset-0 z-10\"\n data-headless-title-desc-button={`${title}#${subtitle}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n />\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileVideo?.url : isPad ? padVideo?.url || mobileVideo?.url : pcVideo?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n loading=\"eager\"\n fetchPriority=\"high\"\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-8 laptop:px-16 lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-8 absolute top-24 z-10 flex flex-col gap-6 px-4\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h2\"
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { CollectionsBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'collections_banner'\n\nconst CollectionsBanner = React.forwardRef<HTMLDivElement, CollectionsBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n theme = 'light',\n blockLink,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"CollectionsBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n 'lg-desktop:aspect-[1920/480] desktop:aspect-[1440/384] laptop:aspect-[1024/400] tablet:aspect-[768/480] aspect-[390/480]',\n className\n )}\n >\n {blockLink && (\n <a\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n className=\"absolute inset-0 z-10\"\n data-headless-title-desc-button={`${title}#${subtitle}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n />\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileVideo?.url : isPad ? padVideo?.url || mobileVideo?.url : pcVideo?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n loading=\"eager\"\n fetchPriority=\"high\"\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-8 laptop:px-16 lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-8 absolute top-24 z-10 flex flex-col gap-6 px-4\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h2\" className={cn('font-bold hero-banner-title')} html={title} />}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-lg desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm font-bold'\n )}\n html={subtitle}\n />\n )}\n </div>\n </div>\n </div>\n </div>\n )\n})\n\nCollectionsBanner.displayName = 'CollectionsBanner'\n\nexport default withLayout(CollectionsBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["CollectionsBanner_exports", "__export", "CollectionsBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_button", "import_VideoModal", "componentType", "componentName", "CollectionsBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "theme", "blockLink", "isMobile", "isPad", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsap", "gsapResize", "clientHeight", "self", "value", "ScrollLoadVideo"]
|
|
7
7
|
}
|
|
@@ -12,5 +12,5 @@ type FilterCardWrapProps = {
|
|
|
12
12
|
onNextPage?: (v: string) => void;
|
|
13
13
|
onPrevPage?: (v: string) => void;
|
|
14
14
|
};
|
|
15
|
-
|
|
16
|
-
export
|
|
15
|
+
declare const _default: import("react").ForwardRefExoticComponent<FilterCardWrapProps & import("react").RefAttributes<unknown>>;
|
|
16
|
+
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var R=Object.create;var y=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var H=(t,o)=>{for(var i in o)y(t,i,{get:o[i],enumerable:!0})},D=(t,o,i,h)=>{if(o&&typeof o=="object"||typeof o=="function")for(let c of A(o))!E.call(t,c)&&c!==i&&y(t,c,{get:()=>o[c],enumerable:!(h=T(o,c))||h.enumerable});return t};var O=(t,o,i)=>(i=t!=null?R(q(t)):{},D(o||!t||!t.__esModule?y(i,"default",{value:t,enumerable:!0}):i,t)),Q=t=>D(y({},"__esModule",{value:!0}),t);var G={};H(G,{default:()=>Z});module.exports=Q(G);var e=require("react/jsx-runtime"),b=require("../../helpers/utils.js"),I=require("react-responsive"),L=O(require("./FilterCardWrapItem")),d=require("react"),M=require("es-toolkit");const V=(t,o)=>{const{shopifyData:i={},isSale:h=!1,total:c,result:r,closeFilter:m,page:v,metafields:P,onPrimaryChange:N,onSecondaryChange:j,onNextPage:S,onPrevPage:z}=t,{advertisingSpace:k}=P,{buttonText:W,loadMoreText:B}=i,g=k||i?.advertisingSpace,[w,x]=(0,d.useState)([]),l=(0,I.useMediaQuery)({query:"(max-width: 1024px)"}),F=p=>{const n=(0,M.cloneDeep)(p||[]);if(g){const a=n.findIndex(u=>u.mImage);if(a===-1){const u=Math.min(m?g?.maxLocation||7:g?.minLocation||5,n.length);n.splice(u,0,g)}else{n.splice(a,1);const u=Math.min(m?g?.maxLocation||7:g?.minLocation||5,n.length);n.splice(u,0,g)}}return n};return(0,d.useImperativeHandle)(o,()=>({clearData(){x([])}})),(0,d.useEffect)(()=>{(r?.slug||r?.id)&&((v===1||!l)&&x([]),r?.products&&x(p=>{const n=r.products?.filter?.(s=>!p.some(f=>f.id===s.id));let a=[...p,...n];const u=a.filter?.(s=>!(!s?.metafields?.seoSetting?.noindex&&s.availableForSale&&s?.variants?.some(f=>f.availableForSale)));return a.push(...u),a=a.filter?.(s=>!s?.metafields?.seoSetting?.noindex&&s.availableForSale&&s?.variants?.some(f=>f.availableForSale)),h&&(a=a.filter?.(s=>!!s?.variants?.find(C=>C?.coupons?.length&&C?.coupons?.[0]&&typeof C?.coupons?.[0]=="object"))),(v===1&&!l||l)&&(a=F(a)),a}))},[r?.products,v,l,k]),(0,d.useEffect)(()=>{w?.length&&v===1&&!l&&x(F(w))},[m]),console.log(w,"data123123123"),(0,e.jsxs)("div",{className:"filter-card-wrap-container",children:[(0,e.jsx)("div",{className:(0,b.cn)("min-h-[60vh] w-full grid gap-3 md-tablet:grid-cols-2 grid-cols-3",{"laptop:grid-cols-4 tablet:grid-cols-3":m&&!l,"laptop:grid-cols-3 tablet:grid-cols-2":!m&&!l},"filter-card-wrap"),children:w?.map?.(p=>(0,e.jsx)(L.default,{data:p,buttonText:W,metafields:P,onPrimaryChange:(n,a)=>N?.(n,a),onSecondaryChange:(n,a)=>j?.(n,a)},p.id))}),l?(0,e.jsxs)("div",{onClick:()=>{S?.(r?.pageInfo?.endCursor)},className:"mt-6 text-sm font-bold cursor-pointer flex items-center justify-center gap-1 filter-card-wrap-more",children:[(0,e.jsx)("span",{children:B||"View More"}),(0,e.jsx)("div",{className:"size-[18px]",children:(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"6",viewBox:"0 0 12 6",fill:"none",children:(0,e.jsx)("path",{d:"M9.96967 0.21967C10.2626 -0.0732232 10.7373 -0.073223 11.0302 0.21967C11.3231 0.512563 11.3231 0.987324 11.0302 1.28022L6.53022 5.78022C6.23732 6.07311 5.76256 6.07311 5.46967 5.78022L0.96967 1.28022C0.676777 0.987324 0.676777 0.512563 0.96967 0.21967C1.26256 -0.0732233 1.73732 -0.0732233 2.03022 0.21967L5.99994 4.1894L9.96967 0.21967Z",fill:"#1D1D1F"})})})]}):null,!l&&c>18?(0,e.jsxs)("div",{className:"mt-6 flex items-center justify-end gap-4 cursor-pointer",children:[(0,e.jsx)("button",{name:"perv page",disabled:!r?.pageInfo?.hasPreviousPage,className:(0,b.cn)("flex items-center justify-center lg-desktop:size-14 size-10 rounded-full leading-tight overflow-hidden bg-transparent border-[1.5px] border-[#3D3D3F]",{"opacity-50 cursor-not-allowed":!r?.pageInfo?.hasPreviousPage}),onClick:()=>{z?.(r?.pageInfo?.startCursor)},children:(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:(0,e.jsx)("path",{d:"M12 5L7 10L12 15",stroke:"#3D3D3F","stroke-width":"1.66667","stroke-linecap":"round","stroke-linejoin":"round"})})}),(0,e.jsx)("button",{name:"next page",className:(0,b.cn)("flex items-center justify-center lg-desktop:size-14 size-10 rounded-full leading-tight overflow-hidden bg-transparent border-[1.5px] border-[#3D3D3F]",{"opacity-50 cursor-not-allowed":!r?.pageInfo?.hasNextPage}),disabled:!r?.pageInfo?.hasNextPage,onClick:()=>{S?.(r?.pageInfo?.endCursor)},children:(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:(0,e.jsx)("path",{d:"M7.5 5L12.5 10L7.5 15",stroke:"#3D3D3F","stroke-width":"1.66667","stroke-linecap":"round","stroke-linejoin":"round"})})})]}):null]})};var Z=(0,d.forwardRef)(V);
|
|
2
2
|
//# sourceMappingURL=FilterCardWrap.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/CollectionsFilters/FilterCardWrap.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport { useMediaQuery } from 'react-responsive'\nimport
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["FilterCardWrap_exports", "__export", "
|
|
4
|
+
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport { useMediaQuery } from 'react-responsive'\nimport FilterCardWrapItem from './FilterCardWrapItem'\nimport { useState, useEffect, forwardRef, useImperativeHandle, type Ref } from 'react'\nimport { cloneDeep } from 'es-toolkit'\n\ntype FilterCardWrapProps = {\n isSale?: boolean\n result?: any\n total: number\n shopifyData?: any\n currentPage?: number\n closeFilter: boolean\n page: number\n metafields: any\n onPrimaryChange?: (item: any, sku: string) => void\n onSecondaryChange?: (item: any, sku: string) => void\n onNextPage?: (v: string) => void\n onPrevPage?: (v: string) => void\n}\n\nconst FilterCardWrap = (props: FilterCardWrapProps, ref: Ref<unknown> | undefined) => {\n const {\n shopifyData = {},\n isSale = false,\n total,\n result,\n closeFilter,\n page,\n metafields,\n onPrimaryChange,\n onSecondaryChange,\n onNextPage,\n onPrevPage,\n } = props\n const { advertisingSpace } = metafields\n const { buttonText, loadMoreText } = shopifyData\n\n const currentAdvertisingSpace = advertisingSpace || shopifyData?.advertisingSpace\n\n const [data, setData] = useState<any[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const handleAdvertisingSpace = (products: any[]) => {\n const updatedProducts = cloneDeep(products || [])\n if (currentAdvertisingSpace) {\n const findIndex = updatedProducts.findIndex(item => item.mImage)\n if (findIndex === -1) {\n const insertIndex = closeFilter\n ? Math.min(currentAdvertisingSpace?.maxLocation || 7, updatedProducts.length)\n : Math.min(currentAdvertisingSpace?.minLocation || 5, updatedProducts.length)\n updatedProducts.splice(insertIndex, 0, currentAdvertisingSpace)\n } else {\n updatedProducts.splice(findIndex, 1)\n const insertIndex = closeFilter\n ? Math.min(currentAdvertisingSpace?.maxLocation || 7, updatedProducts.length)\n : Math.min(currentAdvertisingSpace?.minLocation || 5, updatedProducts.length)\n updatedProducts.splice(insertIndex, 0, currentAdvertisingSpace)\n }\n }\n return updatedProducts\n }\n\n useImperativeHandle(ref, () => ({\n clearData() {\n setData([])\n },\n }))\n\n // \u5904\u7406\u4EA7\u54C1\u6570\u636E\n useEffect(() => {\n if (result?.slug || result?.id) {\n ;(page === 1 || !isMobile) && setData([])\n if (result?.products) {\n setData(prevProducts => {\n // \u68C0\u67E5\u662F\u5426\u5DF2\u7ECF\u5B58\u5728\u4E8E prevProducts \u4E2D\uFF0C\u907F\u514D\u91CD\u590D\u6DFB\u52A0\n const newProducts = result.products?.filter?.(\n (product: { id: any }) => !prevProducts.some(prev => prev.id === product.id)\n )\n let updatedProducts = [...prevProducts, ...newProducts]\n /** \u5DF2\u552E\u5B8C\u7684\u4EA7\u54C1 */\n const soldOutProducts = updatedProducts.filter?.(\n item =>\n !(\n !item?.metafields?.seoSetting?.noindex &&\n item.availableForSale &&\n item?.variants?.some((item: { availableForSale: any }) => item.availableForSale)\n )\n )\n // \u5C06\u5DF2\u552E\u5B8C\u7684\u4EA7\u54C1\u6DFB\u52A0\u5230\u6700\u540E\n updatedProducts.push(...soldOutProducts)\n // \u8FC7\u6EE4\u6389 availableForSale \u4E3A false \u7684\u4EA7\u54C1\n updatedProducts = updatedProducts.filter?.(\n item =>\n !item?.metafields?.seoSetting?.noindex &&\n item.availableForSale &&\n item?.variants?.some((item: { availableForSale: any }) => item.availableForSale)\n )\n // \u5982\u679C\u662F\u6709\u6298\u6263\u7684\u4EA7\u54C1\uFF0C\u5219\u8FC7\u6EE4\u6389\u6CA1\u6709\u6298\u6263\u7684\u4EA7\u54C1\n if (isSale) {\n updatedProducts = updatedProducts.filter?.((item: any) => {\n const isShow = item?.variants?.find(\n (params: any) =>\n params?.coupons?.length && params?.coupons?.[0] && typeof params?.coupons?.[0] === 'object'\n )\n return !!isShow\n })\n }\n // \u5982\u679C advertisingSpace \u5B58\u5728\u4E14\u5C1A\u672A\u6DFB\u52A0\u5230\u6570\u7EC4\u4E2D\n if ((page === 1 && !isMobile) || isMobile) {\n updatedProducts = handleAdvertisingSpace(updatedProducts)\n }\n return updatedProducts\n })\n }\n }\n }, [result?.products, page, isMobile, advertisingSpace])\n\n useEffect(() => {\n if (!data?.length) return\n if (page === 1 && !isMobile) {\n setData(handleAdvertisingSpace(data))\n }\n }, [closeFilter])\n\n console.log(data, 'data123123123')\n\n return (\n <div className=\"filter-card-wrap-container\">\n <div\n className={cn(\n 'min-h-[60vh] w-full grid gap-3 md-tablet:grid-cols-2 grid-cols-3',\n {\n 'laptop:grid-cols-4 tablet:grid-cols-3': closeFilter && !isMobile,\n 'laptop:grid-cols-3 tablet:grid-cols-2': !closeFilter && !isMobile,\n },\n 'filter-card-wrap'\n )}\n >\n {data?.map?.(item => {\n return (\n <FilterCardWrapItem\n data={item}\n key={item.id}\n buttonText={buttonText}\n metafields={metafields}\n onPrimaryChange={(e, data) => onPrimaryChange?.(e, data)}\n onSecondaryChange={(e, data) => onSecondaryChange?.(e, data)}\n />\n )\n })}\n </div>\n {isMobile ? (\n <div\n onClick={() => {\n onNextPage?.(result?.pageInfo?.endCursor)\n }}\n className=\"mt-6 text-sm font-bold cursor-pointer flex items-center justify-center gap-1 filter-card-wrap-more\"\n >\n <span>{loadMoreText || 'View More'}</span>\n <div className=\"size-[18px]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"6\" viewBox=\"0 0 12 6\" fill=\"none\">\n <path\n d=\"M9.96967 0.21967C10.2626 -0.0732232 10.7373 -0.073223 11.0302 0.21967C11.3231 0.512563 11.3231 0.987324 11.0302 1.28022L6.53022 5.78022C6.23732 6.07311 5.76256 6.07311 5.46967 5.78022L0.96967 1.28022C0.676777 0.987324 0.676777 0.512563 0.96967 0.21967C1.26256 -0.0732233 1.73732 -0.0732233 2.03022 0.21967L5.99994 4.1894L9.96967 0.21967Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n ) : null}\n {!isMobile && total > 18 ? (\n <div className=\"mt-6 flex items-center justify-end gap-4 cursor-pointer\">\n <button\n name=\"perv page\"\n disabled={!result?.pageInfo?.hasPreviousPage}\n className={cn(\n 'flex items-center justify-center lg-desktop:size-14 size-10 rounded-full leading-tight overflow-hidden bg-transparent border-[1.5px] border-[#3D3D3F]',\n {\n 'opacity-50 cursor-not-allowed': !result?.pageInfo?.hasPreviousPage,\n }\n )}\n onClick={() => {\n onPrevPage?.(result?.pageInfo?.startCursor)\n }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M12 5L7 10L12 15\"\n stroke=\"#3D3D3F\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <button\n name=\"next page\"\n className={cn(\n 'flex items-center justify-center lg-desktop:size-14 size-10 rounded-full leading-tight overflow-hidden bg-transparent border-[1.5px] border-[#3D3D3F]',\n {\n 'opacity-50 cursor-not-allowed': !result?.pageInfo?.hasNextPage,\n }\n )}\n disabled={!result?.pageInfo?.hasNextPage}\n onClick={() => {\n onNextPage?.(result?.pageInfo?.endCursor)\n }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M7.5 5L12.5 10L7.5 15\"\n stroke=\"#3D3D3F\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n ) : // <Paginator\n // className=\"mt-6\"\n // currentPage={currentPage}\n // onPageChange={(v: number) => {\n // setData([])\n // if(v > currentPage) {\n // onNextPage?.(result?.pageInfo?.endCursor)\n // } else {\n // onPrevPage?.(result?.pageInfo?.startCursor)\n // }\n // setCurrentPage(v)\n // }}\n // total={100}\n // />\n null}\n </div>\n )\n}\n\nexport default forwardRef(FilterCardWrap)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["FilterCardWrap_exports", "__export", "FilterCardWrap_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_react_responsive", "import_FilterCardWrapItem", "import_react", "import_es_toolkit", "FilterCardWrap", "props", "ref", "shopifyData", "isSale", "total", "result", "closeFilter", "page", "metafields", "onPrimaryChange", "onSecondaryChange", "onNextPage", "onPrevPage", "advertisingSpace", "buttonText", "loadMoreText", "currentAdvertisingSpace", "data", "setData", "isMobile", "handleAdvertisingSpace", "products", "updatedProducts", "findIndex", "item", "insertIndex", "prevProducts", "newProducts", "product", "prev", "soldOutProducts", "params", "FilterCardWrapItem", "e"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var xe=Object.create;var y=Object.defineProperty;var ve=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var xe=Object.create;var y=Object.defineProperty;var ve=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var ye=Object.getPrototypeOf,ke=Object.prototype.hasOwnProperty;var Ce=(e,r)=>{for(var i in r)y(e,i,{get:r[i],enumerable:!0})},R=(e,r,i,g)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of he(r))!ke.call(e,d)&&d!==i&&y(e,d,{get:()=>r[d],enumerable:!(g=ve(r,d))||g.enumerable});return e};var N=(e,r,i)=>(i=e!=null?xe(ye(e)):{},R(r||!e||!e.__esModule?y(i,"default",{value:e,enumerable:!0}):i,e)),_e=e=>R(y({},"__esModule",{value:!0}),e);var $e={};Ce($e,{default:()=>Pe});module.exports=_e($e);var t=require("react/jsx-runtime"),f=require("../../helpers/utils.js"),V=require("../AiuiProvider/index.js"),Z=require("../ShelfDisplay/shelfDisplay.js"),q=N(require("../../components/badge.js")),G=require("../../components/text.js"),P=N(require("../../components/button.js")),$=N(require("../../components/picture.js")),k=require("../../shared/trackUrlRef.js"),J=require("./component/price.js"),l=require("react");const S="image",w="product_shelf",Ne=999999999e-2,Se=e=>{let r;return e?.includes("products")?r=e?.split("products")[0]+"files/":r=e?.replace(e?.split("files")?.pop()||"","")+"/",r},we=({data:e,buttonText:r,itemShape:i,metafields:g,onPrimaryChange:d,onSecondaryChange:K})=>{const{memberPriceDiscount:Q,memberSetting:T,discounts:I,shopCommon:X}=g,[u,z]=(0,l.useState)(""),[Y,B]=(0,l.useState)(""),[b,M]=(0,l.useState)(""),[L,ee]=(0,l.useState)(!1),[W,te]=(0,l.useState)({}),[se,oe]=(0,l.useState)(!1),[F,re]=(0,l.useState)({price:"",basePrice:""}),[O,ne]=(0,l.useState)([]),[le,ie]=(0,l.useState)([]),[x,ae]=(0,l.useState)(""),[ce,me]=(0,l.useState)(""),{locale:a="us",currencyCode:de,isLogin:j}=(0,V.useAiuiContext)(),C=e?.custom_name||e?.title||e?.name,D=e?.custom_description||e?.description||e?.descriptionHtml,c=e?.filter_variants||e?.variants||[],ue=s=>M(s),_=(s,n,o,p)=>{oe(p),ae(s||""),re({basePrice:n||"",price:o||""})};return(0,l.useEffect)(()=>{if(b){const o=c?.find(p=>p?.name?.includes?.(b));z(o?.sku||c?.[0]?.sku||""),B(o?.image?.url||c?.[0]?.image?.url||"");return}const s=e?.options?.find(o=>o?.displayName==="color")?.values?.[0]?.label;s&&M(s);const n=c?.find(o=>o?.name?.includes?.(s));z(n?.sku||c?.[0]?.sku||""),B(n?.image?.url||c?.[0]?.image?.url||"")},[b]),(0,l.useEffect)(()=>{if(!u)return;ne(e?.tags||[]);const s=c?.find(m=>m?.sku===u)||c?.[0]||{};te(s),ee(!s?.availableForSale||s?.price?.amount===Ne);const{infos:n}=s?.metafields||{},{productInfos:o,preRender:p}=e?.metafields||{};me(n?.comingSoon||o?.comingSoon||p?.soldOut||X?.soldOut||"");const v=s?.coupons?.[0],{price:H,basePrice:A,discount:pe,discountAmount:fe}=(0,Z.formatVariantPrice)({locale:a,amount:v?v.variant_price4wscode:s.price,baseAmount:v?s.price:0,currencyCode:e?.price?.currencyCode||"USD"}),U=(()=>{if(v?.value_type==="fixed_amount"){const m=fe||"",h=m.trim().replace(/\s*[^\d\.,]*$/,"");return h.endsWith(".00")||h.endsWith(",00")?"":m}return pe||""})();if(j){const m=(0,J.getFunctionMemberPrice)({locale:a,variant:s,shopMemberPriceDiscountConfig:Q,currencyCode:de||e?.price?.currencyCode||"USD"});if(m){const{hasMemberPrice:h,salePriceWithCurrency:E,originalPriceWithCurrency:ge,savePriceWithCurrency:be}=m;_(be||"",ge||"",h?E:"",m?.hasMemberPrice)}else _(U,A||"",H||"",!1)}else _(U,A||"",H||"",!1)},[e,u]),(0,l.useEffect)(()=>{let s=[];if(x){const o=`${x}${I?.off}`;s.push(o)}const n=O?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,x?1:2);ie(s.concat(n))},[O,x]),(0,t.jsx)("div",{className:(0,f.cn)(i==="round"?"rounded-2xl":"rounded-none","tablet:hover:bg-info-white bg-container-secondary-1 box-border w-full cursor-pointer overflow-hidden duration-300",{"aiui-dark":e.theme==="dark"}),children:e?.mImage?(0,t.jsx)("div",{className:"size-full box-border overflow-hidden hover:[&_img]:scale-105",children:(0,t.jsx)("div",{className:"relative inset-0 size-full",children:(0,t.jsxs)("a",{className:"size-full",href:(0,k.trackUrlRef)(e?.link,`${S}_${w}`),children:[(0,t.jsx)($.default,{alt:"",source:e?.mImage?.url||e?.mImage,className:"size-full [&_img]:object-cover [&_img]:size-full",imgClassName:"size-full object-cover transition-all duration-300"}),(0,t.jsxs)("div",{className:"desktop:p-6 absolute inset-x-0 top-0 box-border overflow-hidden p-4",children:[(0,t.jsx)("p",{className:"desktop:mb-2 mb-1 text-info-primary desktop:text-base text-sm font-bold",dangerouslySetInnerHTML:{__html:e?.subTitle}}),(0,t.jsx)("span",{className:"text-info-secondary desktop:text-[32px] text-[20px] font-bold desktop:leading-9 line-clamp-4 leading-6",dangerouslySetInnerHTML:{__html:e?.title}})]})]})})}):(0,t.jsxs)("div",{className:"size-full desktop:p-6 desktop:pt-4 box-border overflow-hidden flex flex-col justify-between tablet:p-4 p-2 pb-4",children:[(0,t.jsx)("div",{className:"flex flex-wrap gap-1 overflow-hidden collection-filter-tags",children:le?.map?.((s,n)=>(0,t.jsx)(q.default,{className:"whitespace-nowrap max-w-full truncate px-1 box-border font-bold item-badge",children:s},n))}),(0,t.jsx)("a",{target:"_blank","aria-label":C,className:"my-1",href:(0,k.trackUrlRef)(`${a==="us"||!a?"":`/${a}`}/products/${e?.handle}`,`${S}_${w}`),children:(0,t.jsx)("div",{className:(0,f.cn)("m-auto desktop:size-[196px] size-[120px] overflow-hidden"),children:(0,t.jsx)($.default,{alt:"",source:Y,className:"h-full [&_img]:object-cover [&_img]:h-full [&_img]:w-fit"})})}),e?.options?.map(s=>{if(s?.displayName==="color")return(0,t.jsx)("div",{className:"flex items-center gap-1",children:s?.values?.map(n=>{const o=n?.hexColors?n.hexColors?.[0]:n?.label;return(0,t.jsx)("button",{onClick:()=>ue(n?.label),className:(0,f.cn)("size-4 rounded-full cursor-pointer overflow-hidden border-2 border-transparent",`${b===n?.label?"border-[#00BEFA]":""}`),children:(0,t.jsx)("img",{alt:o,className:"h-full w-full object-cover",src:`${Se(e?.images?.[0]?.url)}${o?.toLowerCase().split(" ")?.join("-")}_50x.png`})},n?.label)})})}),(0,t.jsxs)("div",{children:[C?(0,t.jsx)("span",{dangerouslySetInnerHTML:{__html:C||""},className:"shelf-display-product-title line-clamp-2 lg-desktop:text-2xl laptop:text-xl text-base font-bold"}):null,e?.metafields?.judgemeBadge?(0,t.jsx)("a",{target:"_blank",className:"font-bold text-xs [&_.jdgm-star]:text-[#F77234]",dangerouslySetInnerHTML:{__html:e?.metafields?.judgemeBadge},href:(0,k.trackUrlRef)(`${a==="us"||!a?"":`/${a}`}/products/${e?.handle}`,`${S}_${w}`)}):null,D?(0,t.jsx)(G.Text,{size:2,html:D||"",className:"desktop:text-base laptop:text-sm shelf-display-product-description line-clamp-1 text-xs font-bold"}):null,(0,t.jsxs)("div",{className:"mt-3 mb-2",children:[(0,t.jsx)("p",{dangerouslySetInnerHTML:{__html:j&&se&&(I?.memberPrice||T?.member_price||T?.plus_member_price)||""},className:"text-info-primary lg-desktop:text-lg desktop:text-base laptop:text-sm text-xs font-bold"}),(0,t.jsx)("div",{className:"flex items-center",children:L?(0,t.jsx)("div",{className:"desktop:text-2xl tablet:text-xl text-info-primary text-base font-bold",children:ce||""}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"final-price desktop:text-2xl tablet:text-xl text-info-primary text-base font-bold",children:W?.availableForSale&&F?.price||""}),(0,t.jsx)("div",{className:"origin-price desktop:text-xl tablet:text-lg text-info-secondary ml-1 text-sm font-bold line-through",children:W?.availableForSale&&F?.basePrice||""})]})})]}),(0,t.jsxs)("div",{className:(0,f.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2 m-tablet:flex-col"),children:[(0,t.jsx)(P.default,{variant:"secondary",className:"m-tablet:w-full font-bold",onClick:()=>K?.(e,u),children:r?.secondaryButton||"Learn More"}),(0,t.jsx)(P.default,{variant:"primary",className:"m-tablet:w-full font-bold",disabled:L,onClick:()=>d?.(e,u),children:r?.primaryButton||"Shop Now"})]})]})]})},e?.id||e?.handle)};var Pe=we;
|
|
2
2
|
//# sourceMappingURL=FilterCardWrapItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/CollectionsFilters/FilterCardWrapItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport Badge from '../../components/badge.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport Picture from '../../components/picture.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getFunctionMemberPrice } from './component/price.js'\nimport { useState, useEffect } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nconst getShopifyCdnBaseUrl = (imagePath: string | null) => {\n // \u76EE\u524D\u77E5\u9053\u7684 shopify \u56FE\u7247\u8DEF\u7531\u7684\u5F62\u5F0F\n // https://cdn.shopify.com/s/files/1/0493/9834/9974/files/Group_5581_2.jpg?v=1662379184\n // https://cdn.shopify.com/s/files/1/0493/9834/9974/products/B2633123.jpg?v=1631264041_3840x\n // \u8FD4\u56DE https://cdn.shopify.com/s/files/1/0493/9834/9974/files/\n let path\n if (imagePath?.includes('products')) {\n path = imagePath?.split('products')[0] + 'files/'\n } else {\n path = imagePath?.replace(imagePath?.split('files')?.pop() || '', '') + '/'\n }\n return path\n}\n\ntype FilterCardWrapItemProps = {\n data: any\n buttonText?: any\n itemShape?: string\n metafields: any\n onPrimaryChange?: (item: any, sku: string) => void\n onSecondaryChange?: (item: any, sku: string) => void\n}\n\nconst FilterCardWrapItem = ({\n data,\n buttonText,\n itemShape,\n metafields,\n onPrimaryChange,\n onSecondaryChange,\n}: FilterCardWrapItemProps) => {\n const { memberPriceDiscount, memberSetting, discounts, shopCommon } = metafields\n const [currentSku, setCurrentSku] = useState<string>('')\n const [currentImage, setCurrentImage] = useState<string>('')\n const [selectedColor, setSelectedColor] = useState<string>('')\n const [isSoldOut, setIsSoldOut] = useState<any>(false)\n const [currentVariant, setCurrentVariant] = useState<any>({})\n const [plusMemberStatus, setPlusMemberStatus] = useState<boolean>(false)\n const [priceCollection, setPriceCollection] = useState<{ price: string; basePrice: string }>({\n price: '',\n basePrice: '',\n })\n const [tags, setTags] = useState<string[]>([])\n const [showTags, setShowTags] = useState<string[]>([])\n const [discountCollection, setDiscountCollection] = useState<string>('')\n const [soldOutText, setSoldOutText] = useState<string>('')\n\n const { locale = 'us', currencyCode, isLogin } = useAiuiContext()\n\n const displayTitle = data?.custom_name || data?.title || data?.name\n const displayDescription = data?.custom_description || data?.description || data?.descriptionHtml\n const skuArray = data?.filter_variants || data?.variants || []\n\n const onColorClick = (color: string) => setSelectedColor(color)\n\n const handleBasePrice = (discount: string, priceCurrency: string, salePrice: string, status: boolean) => {\n setPlusMemberStatus(status)\n setDiscountCollection(discount || '')\n setPriceCollection({\n basePrice: priceCurrency || '',\n price: salePrice || '',\n })\n }\n\n useEffect(() => {\n if (selectedColor) {\n const findSku = skuArray?.find((item: any) => item?.name?.includes?.(selectedColor))\n setCurrentSku(findSku?.sku || skuArray?.[0]?.sku || '')\n setCurrentImage(findSku?.image?.url || skuArray?.[0]?.image?.url || '')\n return\n }\n const firstOption = data?.options?.find((item: any) => item?.displayName === 'color')?.values?.[0]?.label\n firstOption && setSelectedColor(firstOption)\n const findSku = skuArray?.find((item: any) => item?.name?.includes?.(firstOption))\n setCurrentSku(findSku?.sku || skuArray?.[0]?.sku || '')\n setCurrentImage(findSku?.image?.url || skuArray?.[0]?.image?.url || '')\n }, [selectedColor])\n\n useEffect(() => {\n if (!currentSku) return\n setTags(data?.tags || [])\n const variant = skuArray?.find((item: any) => item?.sku === currentSku) || skuArray?.[0] || {}\n setCurrentVariant(variant)\n setIsSoldOut(!variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE)\n const { infos } = variant?.metafields || {}\n const { productInfos, preRender } = data?.metafields || {}\n setSoldOutText(infos?.comingSoon || productInfos?.comingSoon || preRender?.soldOut || shopCommon?.soldOut || '')\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n const { price, basePrice, discount, discountAmount } = formatVariantPrice({\n locale: locale,\n amount: coupon ? coupon.variant_price4wscode : variant.price,\n baseAmount: coupon ? variant.price : 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n const showPrice = (coupon?.value_type === 'fixed_amount' ? discountAmount : discount) || ''\n // \u4F1A\u5458\u6298\u6263\n if (isLogin) {\n const result = getFunctionMemberPrice({\n locale: locale,\n variant: variant,\n shopMemberPriceDiscountConfig: memberPriceDiscount,\n currencyCode: currencyCode || data?.price?.currencyCode || 'USD',\n })\n if (result) {\n const { hasMemberPrice, salePriceWithCurrency, originalPriceWithCurrency, savePriceWithCurrency } = result\n handleBasePrice(\n savePriceWithCurrency || '',\n originalPriceWithCurrency || '',\n hasMemberPrice ? salePriceWithCurrency : '',\n result?.hasMemberPrice\n )\n } else {\n handleBasePrice(showPrice, basePrice || '', price || '', false)\n }\n } else {\n handleBasePrice(showPrice, basePrice || '', price || '', false)\n }\n }, [data, currentSku])\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discountCollection) {\n const discountTag = `${discountCollection}${discounts?.off}`\n handleTags.push(discountTag)\n }\n const newTags = tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discountCollection ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [tags, discountCollection])\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'tablet:hover:bg-info-white bg-container-secondary-1 box-border w-full cursor-pointer overflow-hidden duration-300',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n {data?.mImage ? (\n <div className=\"size-full box-border overflow-hidden hover:[&_img]:scale-105\">\n <div className=\"relative inset-0 size-full\">\n <a className=\"size-full\" href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}>\n <Picture\n alt=\"\"\n source={data?.mImage?.url || data?.mImage}\n className=\"size-full [&_img]:object-cover [&_img]:size-full\"\n imgClassName=\"size-full object-cover transition-all duration-300\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 top-0 box-border overflow-hidden p-4\">\n <p\n className=\"desktop:mb-2 mb-1 text-info-primary desktop:text-base text-sm font-semibold\"\n dangerouslySetInnerHTML={{ __html: data?.subTitle }}\n />\n <span\n className=\"text-info-secondary desktop:text-[32px] text-[20px] font-semibold desktop:leading-9 line-clamp-4\"\n dangerouslySetInnerHTML={{ __html: data?.title }}\n />\n </div>\n </a>\n </div>\n </div>\n ) : (\n <div className=\"size-full desktop:p-6 desktop:pt-4 box-border overflow-hidden flex flex-col justify-between tablet:p-4 p-2 pb-4\">\n <div className=\"flex flex-wrap gap-1 overflow-hidden collection-filter-tags\">\n {showTags?.map?.((item: string, index: number) => (\n <Badge\n key={index}\n className=\"whitespace-nowrap max-w-full truncate px-1 box-border font-semibold item-badge\"\n >\n {item}\n </Badge>\n ))}\n </div>\n <a\n target=\"_blank\"\n aria-label={displayTitle}\n className=\"my-1\"\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <div className={cn('m-auto desktop:size-[196px] size-[120px] overflow-hidden')}>\n <Picture\n alt=\"\"\n source={currentImage}\n className=\"h-full [&_img]:object-cover [&_img]:h-full [&_img]:w-fit\"\n />\n </div>\n </a>\n {data?.options?.map((option: any) => {\n if (option?.displayName === 'color') {\n return (\n <div className=\"flex items-center gap-1\">\n {option?.values?.map((item: any) => {\n const color = item?.hexColors ? item.hexColors?.[0] : item?.label\n return (\n <button\n key={item?.label}\n onClick={() => onColorClick(item?.label)}\n className={cn(\n 'size-4 rounded-full cursor-pointer overflow-hidden border-2 border-transparent',\n `${selectedColor === item?.label ? 'border-[#00BEFA]' : ''}`\n )}\n >\n <img\n alt={color}\n className=\"h-full w-full object-cover\"\n src={`${getShopifyCdnBaseUrl(data?.images?.[0]?.url)}${color\n ?.toLowerCase()\n .split(' ')\n ?.join('-')}_${'50x'}.png`}\n />\n </button>\n )\n })}\n </div>\n )\n }\n })}\n <div>\n {displayTitle ? (\n <span\n dangerouslySetInnerHTML={{ __html: displayTitle || '' }}\n className=\"shelf-display-product-title line-clamp-2 lg-desktop:text-2xl laptop:text-xl text-base font-semibold\"\n />\n ) : null}\n {data?.metafields?.judgemeBadge ? (\n <a\n target=\"_blank\"\n className=\"font-semibold text-xs [&_.jdgm-star]:text-[#F77234]\"\n dangerouslySetInnerHTML={{ __html: data?.metafields?.judgemeBadge }}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n html={displayDescription || ''}\n className=\"desktop:text-base laptop:text-sm shelf-display-product-description line-clamp-1 text-xs font-semibold\"\n />\n ) : null}\n <div className=\"mt-3 mb-2\">\n <p\n dangerouslySetInnerHTML={{\n __html:\n isLogin && plusMemberStatus\n ? discounts?.memberPrice || memberSetting?.member_price || memberSetting?.plus_member_price || ''\n : '',\n }}\n className=\"text-info-primary lg-desktop:text-lg desktop:text-base laptop:text-sm text-xs font-semibold\"\n />\n <div className=\"flex items-center\">\n {isSoldOut ? (\n <div className=\"desktop:text-2xl tablet:text-xl text-info-primary text-base font-semibold\">\n {soldOutText || ''}\n </div>\n ) : (\n <>\n <div className=\"final-price desktop:text-2xl tablet:text-xl text-info-primary text-base font-semibold\">\n {currentVariant?.availableForSale ? priceCollection?.price || '' : ''}\n </div>\n <div className=\"origin-price desktop:text-xl tablet:text-lg text-info-secondary ml-1 text-sm font-semibold line-through\">\n {currentVariant?.availableForSale ? priceCollection?.basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn('shelf-flex-button-group', 'lg-desktop:gap-3 flex items-center gap-2 m-tablet:flex-col')}\n >\n <Button\n variant=\"secondary\"\n className=\"m-tablet:w-full font-semibold\"\n onClick={() => onSecondaryChange?.(data, currentSku)}\n >\n {buttonText?.secondaryButton || 'Learn More'}\n </Button>\n <Button\n variant=\"primary\"\n className=\"m-tablet:w-full font-semibold\"\n disabled={isSoldOut}\n onClick={() => onPrimaryChange?.(data, currentSku)}\n >\n {buttonText?.primaryButton || 'Shop Now'}\n </Button>\n </div>\n </div>\n </div>\n )}\n </div>\n )\n}\nexport default FilterCardWrapItem\n"],
|
|
5
|
-
"mappings": "skBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,
|
|
6
|
-
"names": ["FilterCardWrapItem_exports", "__export", "FilterCardWrapItem_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_AiuiProvider", "import_shelfDisplay", "import_badge", "import_text", "import_button", "import_picture", "import_trackUrlRef", "import_price", "import_react", "componentType", "componentName", "SOLD_OUT_PRICE", "getShopifyCdnBaseUrl", "imagePath", "path", "FilterCardWrapItem", "data", "buttonText", "itemShape", "metafields", "onPrimaryChange", "onSecondaryChange", "memberPriceDiscount", "memberSetting", "discounts", "shopCommon", "currentSku", "setCurrentSku", "currentImage", "setCurrentImage", "selectedColor", "setSelectedColor", "isSoldOut", "setIsSoldOut", "currentVariant", "setCurrentVariant", "plusMemberStatus", "setPlusMemberStatus", "priceCollection", "setPriceCollection", "tags", "setTags", "showTags", "setShowTags", "discountCollection", "setDiscountCollection", "soldOutText", "setSoldOutText", "locale", "currencyCode", "isLogin", "displayTitle", "displayDescription", "skuArray", "onColorClick", "color", "handleBasePrice", "discount", "priceCurrency", "salePrice", "status", "findSku", "item", "firstOption", "variant", "infos", "productInfos", "preRender", "coupon", "price", "basePrice", "discountAmount", "showPrice", "result", "hasMemberPrice", "salePriceWithCurrency", "originalPriceWithCurrency", "savePriceWithCurrency", "handleTags", "discountTag", "newTags", "Picture", "index", "Badge", "option", "Button"]
|
|
4
|
+
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport Badge from '../../components/badge.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport Picture from '../../components/picture.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getFunctionMemberPrice } from './component/price.js'\nimport { useState, useEffect } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nconst getShopifyCdnBaseUrl = (imagePath: string | null) => {\n // \u76EE\u524D\u77E5\u9053\u7684 shopify \u56FE\u7247\u8DEF\u7531\u7684\u5F62\u5F0F\n // https://cdn.shopify.com/s/files/1/0493/9834/9974/files/Group_5581_2.jpg?v=1662379184\n // https://cdn.shopify.com/s/files/1/0493/9834/9974/products/B2633123.jpg?v=1631264041_3840x\n // \u8FD4\u56DE https://cdn.shopify.com/s/files/1/0493/9834/9974/files/\n let path\n if (imagePath?.includes('products')) {\n path = imagePath?.split('products')[0] + 'files/'\n } else {\n path = imagePath?.replace(imagePath?.split('files')?.pop() || '', '') + '/'\n }\n return path\n}\n\ntype FilterCardWrapItemProps = {\n data: any\n buttonText?: any\n itemShape?: string\n metafields: any\n onPrimaryChange?: (item: any, sku: string) => void\n onSecondaryChange?: (item: any, sku: string) => void\n}\n\nconst FilterCardWrapItem = ({\n data,\n buttonText,\n itemShape,\n metafields,\n onPrimaryChange,\n onSecondaryChange,\n}: FilterCardWrapItemProps) => {\n const { memberPriceDiscount, memberSetting, discounts, shopCommon } = metafields\n const [currentSku, setCurrentSku] = useState<string>('')\n const [currentImage, setCurrentImage] = useState<string>('')\n const [selectedColor, setSelectedColor] = useState<string>('')\n const [isSoldOut, setIsSoldOut] = useState<any>(false)\n const [currentVariant, setCurrentVariant] = useState<any>({})\n const [plusMemberStatus, setPlusMemberStatus] = useState<boolean>(false)\n const [priceCollection, setPriceCollection] = useState<{ price: string; basePrice: string }>({\n price: '',\n basePrice: '',\n })\n const [tags, setTags] = useState<string[]>([])\n const [showTags, setShowTags] = useState<string[]>([])\n const [discountCollection, setDiscountCollection] = useState<string>('')\n const [soldOutText, setSoldOutText] = useState<string>('')\n\n const { locale = 'us', currencyCode, isLogin } = useAiuiContext()\n\n const displayTitle = data?.custom_name || data?.title || data?.name\n const displayDescription = data?.custom_description || data?.description || data?.descriptionHtml\n const skuArray = data?.filter_variants || data?.variants || []\n\n const onColorClick = (color: string) => setSelectedColor(color)\n\n const handleBasePrice = (discount: string, priceCurrency: string, salePrice: string, status: boolean) => {\n setPlusMemberStatus(status)\n setDiscountCollection(discount || '')\n setPriceCollection({\n basePrice: priceCurrency || '',\n price: salePrice || '',\n })\n }\n\n useEffect(() => {\n if (selectedColor) {\n const findSku = skuArray?.find((item: any) => item?.name?.includes?.(selectedColor))\n setCurrentSku(findSku?.sku || skuArray?.[0]?.sku || '')\n setCurrentImage(findSku?.image?.url || skuArray?.[0]?.image?.url || '')\n return\n }\n const firstOption = data?.options?.find((item: any) => item?.displayName === 'color')?.values?.[0]?.label\n firstOption && setSelectedColor(firstOption)\n const findSku = skuArray?.find((item: any) => item?.name?.includes?.(firstOption))\n setCurrentSku(findSku?.sku || skuArray?.[0]?.sku || '')\n setCurrentImage(findSku?.image?.url || skuArray?.[0]?.image?.url || '')\n }, [selectedColor])\n\n useEffect(() => {\n if (!currentSku) return\n setTags(data?.tags || [])\n const variant = skuArray?.find((item: any) => item?.sku === currentSku) || skuArray?.[0] || {}\n setCurrentVariant(variant)\n setIsSoldOut(!variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE)\n const { infos } = variant?.metafields || {}\n const { productInfos, preRender } = data?.metafields || {}\n setSoldOutText(infos?.comingSoon || productInfos?.comingSoon || preRender?.soldOut || shopCommon?.soldOut || '')\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n const { price, basePrice, discount, discountAmount } = formatVariantPrice({\n locale: locale,\n amount: coupon ? coupon.variant_price4wscode : variant.price,\n baseAmount: coupon ? variant.price : 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n const showPrice = (() => {\n if (coupon?.value_type === 'fixed_amount') {\n const amountStr = discountAmount || ''\n // \u79FB\u9664\u672B\u5C3E\u7684\u8D27\u5E01\u7B26\u53F7\u4E0E\u7A7A\u683C\uFF0C\u4EC5\u4FDD\u7559\u6570\u5B57\u53CA\u5C0F\u6570/\u5343\u4F4D\u5206\u9694\u7B26\u7528\u4E8E\u5224\u65AD\n const normalized = amountStr.trim().replace(/\\s*[^\\d\\.,]*$/, '')\n const endsWithZeroCents = normalized.endsWith('.00') || normalized.endsWith(',00')\n return endsWithZeroCents ? '' : amountStr\n }\n return discount || ''\n })()\n // \u4F1A\u5458\u6298\u6263\n if (isLogin) {\n const result = getFunctionMemberPrice({\n locale: locale,\n variant: variant,\n shopMemberPriceDiscountConfig: memberPriceDiscount,\n currencyCode: currencyCode || data?.price?.currencyCode || 'USD',\n })\n if (result) {\n const { hasMemberPrice, salePriceWithCurrency, originalPriceWithCurrency, savePriceWithCurrency } = result\n handleBasePrice(\n savePriceWithCurrency || '',\n originalPriceWithCurrency || '',\n hasMemberPrice ? salePriceWithCurrency : '',\n result?.hasMemberPrice\n )\n } else {\n handleBasePrice(showPrice, basePrice || '', price || '', false)\n }\n } else {\n handleBasePrice(showPrice, basePrice || '', price || '', false)\n }\n }, [data, currentSku])\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discountCollection) {\n const discountTag = `${discountCollection}${discounts?.off}`\n handleTags.push(discountTag)\n }\n const newTags = tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discountCollection ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [tags, discountCollection])\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'tablet:hover:bg-info-white bg-container-secondary-1 box-border w-full cursor-pointer overflow-hidden duration-300',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n {data?.mImage ? (\n <div className=\"size-full box-border overflow-hidden hover:[&_img]:scale-105\">\n <div className=\"relative inset-0 size-full\">\n <a className=\"size-full\" href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}>\n <Picture\n alt=\"\"\n source={data?.mImage?.url || data?.mImage}\n className=\"size-full [&_img]:object-cover [&_img]:size-full\"\n imgClassName=\"size-full object-cover transition-all duration-300\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 top-0 box-border overflow-hidden p-4\">\n <p\n className=\"desktop:mb-2 mb-1 text-info-primary desktop:text-base text-sm font-bold\"\n dangerouslySetInnerHTML={{ __html: data?.subTitle }}\n />\n <span\n className=\"text-info-secondary desktop:text-[32px] text-[20px] font-bold desktop:leading-9 line-clamp-4 leading-6\"\n dangerouslySetInnerHTML={{ __html: data?.title }}\n />\n </div>\n </a>\n </div>\n </div>\n ) : (\n <div className=\"size-full desktop:p-6 desktop:pt-4 box-border overflow-hidden flex flex-col justify-between tablet:p-4 p-2 pb-4\">\n <div className=\"flex flex-wrap gap-1 overflow-hidden collection-filter-tags\">\n {showTags?.map?.((item: string, index: number) => (\n <Badge\n key={index}\n className=\"whitespace-nowrap max-w-full truncate px-1 box-border font-bold item-badge\"\n >\n {item}\n </Badge>\n ))}\n </div>\n <a\n target=\"_blank\"\n aria-label={displayTitle}\n className=\"my-1\"\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <div className={cn('m-auto desktop:size-[196px] size-[120px] overflow-hidden')}>\n <Picture\n alt=\"\"\n source={currentImage}\n className=\"h-full [&_img]:object-cover [&_img]:h-full [&_img]:w-fit\"\n />\n </div>\n </a>\n {data?.options?.map((option: any) => {\n if (option?.displayName === 'color') {\n return (\n <div className=\"flex items-center gap-1\">\n {option?.values?.map((item: any) => {\n const color = item?.hexColors ? item.hexColors?.[0] : item?.label\n return (\n <button\n key={item?.label}\n onClick={() => onColorClick(item?.label)}\n className={cn(\n 'size-4 rounded-full cursor-pointer overflow-hidden border-2 border-transparent',\n `${selectedColor === item?.label ? 'border-[#00BEFA]' : ''}`\n )}\n >\n <img\n alt={color}\n className=\"h-full w-full object-cover\"\n src={`${getShopifyCdnBaseUrl(data?.images?.[0]?.url)}${color\n ?.toLowerCase()\n .split(' ')\n ?.join('-')}_${'50x'}.png`}\n />\n </button>\n )\n })}\n </div>\n )\n }\n })}\n <div>\n {displayTitle ? (\n <span\n dangerouslySetInnerHTML={{ __html: displayTitle || '' }}\n className=\"shelf-display-product-title line-clamp-2 lg-desktop:text-2xl laptop:text-xl text-base font-bold\"\n />\n ) : null}\n {data?.metafields?.judgemeBadge ? (\n <a\n target=\"_blank\"\n className=\"font-bold text-xs [&_.jdgm-star]:text-[#F77234]\"\n dangerouslySetInnerHTML={{ __html: data?.metafields?.judgemeBadge }}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n html={displayDescription || ''}\n className=\"desktop:text-base laptop:text-sm shelf-display-product-description line-clamp-1 text-xs font-bold\"\n />\n ) : null}\n <div className=\"mt-3 mb-2\">\n <p\n dangerouslySetInnerHTML={{\n __html:\n isLogin && plusMemberStatus\n ? discounts?.memberPrice || memberSetting?.member_price || memberSetting?.plus_member_price || ''\n : '',\n }}\n className=\"text-info-primary lg-desktop:text-lg desktop:text-base laptop:text-sm text-xs font-bold\"\n />\n <div className=\"flex items-center\">\n {isSoldOut ? (\n <div className=\"desktop:text-2xl tablet:text-xl text-info-primary text-base font-bold\">\n {soldOutText || ''}\n </div>\n ) : (\n <>\n <div className=\"final-price desktop:text-2xl tablet:text-xl text-info-primary text-base font-bold\">\n {currentVariant?.availableForSale ? priceCollection?.price || '' : ''}\n </div>\n <div className=\"origin-price desktop:text-xl tablet:text-lg text-info-secondary ml-1 text-sm font-bold line-through\">\n {currentVariant?.availableForSale ? priceCollection?.basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn('shelf-flex-button-group', 'lg-desktop:gap-3 flex items-center gap-2 m-tablet:flex-col')}\n >\n <Button\n variant=\"secondary\"\n className=\"m-tablet:w-full font-bold\"\n onClick={() => onSecondaryChange?.(data, currentSku)}\n >\n {buttonText?.secondaryButton || 'Learn More'}\n </Button>\n <Button\n variant=\"primary\"\n className=\"m-tablet:w-full font-bold\"\n disabled={isSoldOut}\n onClick={() => onPrimaryChange?.(data, currentSku)}\n >\n {buttonText?.primaryButton || 'Shop Now'}\n </Button>\n </div>\n </div>\n </div>\n )}\n </div>\n )\n}\nexport default FilterCardWrapItem\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["FilterCardWrapItem_exports", "__export", "FilterCardWrapItem_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_AiuiProvider", "import_shelfDisplay", "import_badge", "import_text", "import_button", "import_picture", "import_trackUrlRef", "import_price", "import_react", "componentType", "componentName", "SOLD_OUT_PRICE", "getShopifyCdnBaseUrl", "imagePath", "path", "FilterCardWrapItem", "data", "buttonText", "itemShape", "metafields", "onPrimaryChange", "onSecondaryChange", "memberPriceDiscount", "memberSetting", "discounts", "shopCommon", "currentSku", "setCurrentSku", "currentImage", "setCurrentImage", "selectedColor", "setSelectedColor", "isSoldOut", "setIsSoldOut", "currentVariant", "setCurrentVariant", "plusMemberStatus", "setPlusMemberStatus", "priceCollection", "setPriceCollection", "tags", "setTags", "showTags", "setShowTags", "discountCollection", "setDiscountCollection", "soldOutText", "setSoldOutText", "locale", "currencyCode", "isLogin", "displayTitle", "displayDescription", "skuArray", "onColorClick", "color", "handleBasePrice", "discount", "priceCurrency", "salePrice", "status", "findSku", "item", "firstOption", "variant", "infos", "productInfos", "preRender", "coupon", "price", "basePrice", "discountAmount", "showPrice", "amountStr", "normalized", "result", "hasMemberPrice", "salePriceWithCurrency", "originalPriceWithCurrency", "savePriceWithCurrency", "handleTags", "discountTag", "newTags", "Picture", "index", "Badge", "option", "Button"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var x=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var E=(o,t)=>{for(var a in t)x(o,a,{get:t[a],enumerable:!0})},L=(o,t,a,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of w(t))!k.call(o,i)&&i!==a&&x(o,i,{get:()=>t[i],enumerable:!(m=_(t,i))||m.enumerable});return o};var D=o=>L(x({},"__esModule",{value:!0}),o);var S={};E(S,{default:()=>h});module.exports=D(S);var e=require("react/jsx-runtime"),c=require("../../helpers/utils"),s=require("../../components/index.js"),r=require("react");function h(o){const{total:t,closeFilter:a,metafields:m,shopifyData:i,onSortChange:C,onCloseFilter:N,onClearFiltered:F,onMobileOpenDrawer:g,sortKeyIndx:p}=o,{drawerText:y}=i,{shop_filters_pair:l}=m,u=(0,r.useRef)(null),[b,f]=(0,r.useState)(!1),v=n=>N?.(n);return(0,r.useEffect)(()=>{const n=d=>{!u.current?.contains(d?.target)&&f(!1)};return document.addEventListener("click",n),()=>document.removeEventListener("click",n)},[]),(0,e.jsxs)("div",{className:"filter-header",children:[(0,e.jsxs)("div",{className:(0,c.cn)("desktop:gap-x-16 tablet:gap-x-8","relative flex l-tablet:p-0 text-base font-bold box-border tablet:mb-4 mb-2"),children:[!a&&(0,e.jsxs)("div",{className:(0,c.cn)("l-tablet:hidden flex-shrink-0 flex justify-between items-center","desktop:w-60 tablet:w-48 laptop:w-[210px] l-tablet:w-fit box-border"),children:[(0,e.jsxs)("div",{className:"flex items-center cursor-pointer",onClick:()=>v?.(!0),children:[(0,e.jsx)(s.Picture,{className:"mb-0.5 size-5",source:"https://cdn.shopify.com/s/files/1/0508/1815/4652/files/icon_table-of-contents.svg?v=1694054638"}),(0,e.jsx)("span",{className:"font-bold inline-block pl-2 leading-none",children:l?.filter_txt?.filter||"Close Filter"})]}),(0,e.jsx)("span",{onClick:()=>F?.(),className:"text-center text-base decoration-1 underline md:hidden font-bold text-[#1D1D1F] cursor-pointer box-border",children:y?.secondaryButton||"Clear"})]}),(0,e.jsxs)("div",{className:"flex-1 flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"l-tablet:hidden flex items-center gap-x-4",children:[a&&(0,e.jsxs)("div",{className:"flex items-center cursor-pointer",onClick:()=>v?.(!1),children:[(0,e.jsx)(s.Picture,{className:"mb-0.5 size-5",source:"https://cdn.shopify.com/s/files/1/0508/1815/4652/files/icon_table-of-contents.svg?v=1694054638"}),(0,e.jsx)("span",{className:"font-bold inline-block pl-2 leading-none",children:l?.filter_txt?.filter||"Open Filter"})]}),l?.filter_txt?.found?(0,e.jsx)(s.Text,{className:"text-base font-bold text-[#86868C] md:hidden",html:l?.filter_txt?.found?.replace("${number}",t||0)}):(0,e.jsx)(s.Text,{className:"text-base font-bold text-[#86868C] md:hidden",html:`${t||0} Item(s) Found`})]}),(0,e.jsx)("div",{className:"hidden l-tablet:block",children:(0,e.jsxs)("div",{className:"flex items-center",onClick:()=>g?.(!0),children:[(0,e.jsx)(s.Picture,{className:"inline-block size-[20px]",source:"https://cdn.shopify.com/s/files/1/0508/1815/4652/files/icon_table-of-contents.svg?v=1694054638"}),(0,e.jsx)("span",{className:"font-bold inline-block pl-2 leading-none tablet:text-base text-sm",children:l?.filter_txt?.filter||"Close Filter"})]})}),(0,e.jsxs)("div",{ref:u,className:"flex items-center relative cursor-pointer",onClick:()=>f(!b),children:[(0,e.jsx)("span",{className:"tablet:text-base text-sm pr-1 text-[#777]",dangerouslySetInnerHTML:{__html:`${l?.filter_txt?.sort||"Sort by"}: `}}),(0,e.jsx)(s.Text,{html:l?.filter_txt?.sortList?.[p]?.txt||"Recommended",className:"tablet:text-base text-sm font-bold text-[#333]"}),(0,e.jsx)("div",{className:`ml-1 duration-300 ease-in-out ${b&&"rotate-180"}`,children:(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",children:(0,e.jsx)("path",{d:"M10.412 0.910826C10.7375 0.585389 11.265 0.585389 11.5904 0.910826C11.9159 1.23626 11.9159 1.76377 11.5904 2.08921L6.59043 7.08921C6.265 7.41465 5.73748 7.41465 5.41205 7.08921L0.412046 2.08921C0.0866095 1.76377 0.0866095 1.23626 0.412046 0.910826C0.737483 0.585389 1.26499 0.585389 1.59043 0.910826L6.00124 5.32163L10.412 0.910826Z",fill:"#1D1D1F"})})}),(0,e.jsx)("ul",{className:(0,c.cn)("w-full bg-[#FFFFFF] z-10 py-2 px-0 transition-all duration-400 ease-in-out","l-tablet:left-0 l-tablet:top-[120%] l-tablet:text-left absolute top-[110%] right-0",b?"visibility opacity-100":"invisible opacity-0"),children:l?.filter_txt?.sortList?.map?.((n,d)=>(0,e.jsx)("li",{className:(0,c.cn)("cursor-pointer w-full p-4 text-base font-bold text-[#333] [&:hover]:bg-[#EAEAEC]",d===p?"bg-[#EAEAEC]":""),children:(0,e.jsx)("button",{name:n?.txt,className:"l-tablet:text-left",dangerouslySetInnerHTML:{__html:n?.txt},onClick:()=>{f(!1),C?.(d)}})},n?.txt+d))})]})]})]}),(0,e.jsx)("div",{className:"mb-2 hidden l-tablet:block",children:l?.filter_txt?.found?(0,e.jsx)(s.Text,{className:"tablet:text-base text-sm font-bold text-[#86868C]",html:l?.filter_txt?.found?.replace("${number}",t||0)}):(0,e.jsx)(s.Text,{className:"tablet:text-base text-sm font-bold text-[#86868C]",html:`${t||0} Item(s) Found`})})]})}
|
|
2
2
|
//# sourceMappingURL=FilterHeader.js.map
|