@anker-in/headless-ui 0.0.29-alpha.5 → 0.0.29-alpha.6
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";"use client";var Q=Object.create;var x=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var X=(e,i)=>{for(var n in i)x(e,n,{get:i[n],enumerable:!0})},N=(e,i,n,m)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of G(i))!K.call(e,s)&&s!==n&&x(e,s,{get:()=>i[s],enumerable:!(m=W(i,s))||m.enumerable});return e};var p=(e,i,n)=>(n=e!=null?Q(J(e)):{},N(i||!e||!e.__esModule?x(n,"default",{value:e,enumerable:!0}):n,e)),Y=e=>N(x({},"__esModule",{value:!0}),e);var re={};X(re,{default:()=>ie});module.exports=Y(re);var t=require("react/jsx-runtime"),a=p(require("react")),d=require("../../helpers/utils.js"),I=p(require("../../components/picture.js")),C=p(require("./tabSwitch.js")),w=p(require("../../components/button.js")),_=p(require("../Title/index.js")),M=p(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),H=require("./shelfDisplay.js"),V=require("react-responsive"),q=require("../../hooks/useExposure.js"),R=require("../../shared/track.js"),$=require("../AiuiProvider/index.js"),z=p(require("../../components/badge.js")),A=require("../../components/heading.js"),L=require("../../components/text.js");const D="image",P="product_shelf",Z=999999999e-2,ee=({data:e,configuration:i})=>{const{locale:n="us",copyWriting:m}=(0,$.useAiuiContext)(),s=(r,o)=>i?.event?.primaryButton?.(r,o+1),y=(r,o)=>i?.event?.secondaryButton?.(r,o+1),l=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},u=!l?.availableForSale&&l?.price?.amount===Z,{price:h,basePrice:b}=(0,H.formatVariantPrice)({locale:n,amount:l?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),g=()=>{const r=e?.sku,o=e?.variants;return o?.find(f=>f?.sku===r)?.image?.url||o?.[0]?.image?.url||""};return(0,t.jsxs)("div",{className:(0,d.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",i?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)("div",{className:(0,d.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,t.jsx)(I.default,{source:g(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,t.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((r,o)=>(0,t.jsx)(z.default,{children:r},o))}),(0,t.jsx)(A.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[
|
|
1
|
+
"use strict";"use client";var Q=Object.create;var x=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var X=(e,i)=>{for(var n in i)x(e,n,{get:i[n],enumerable:!0})},N=(e,i,n,m)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of G(i))!K.call(e,s)&&s!==n&&x(e,s,{get:()=>i[s],enumerable:!(m=W(i,s))||m.enumerable});return e};var p=(e,i,n)=>(n=e!=null?Q(J(e)):{},N(i||!e||!e.__esModule?x(n,"default",{value:e,enumerable:!0}):n,e)),Y=e=>N(x({},"__esModule",{value:!0}),e);var re={};X(re,{default:()=>ie});module.exports=Y(re);var t=require("react/jsx-runtime"),a=p(require("react")),d=require("../../helpers/utils.js"),I=p(require("../../components/picture.js")),C=p(require("./tabSwitch.js")),w=p(require("../../components/button.js")),_=p(require("../Title/index.js")),M=p(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),H=require("./shelfDisplay.js"),V=require("react-responsive"),q=require("../../hooks/useExposure.js"),R=require("../../shared/track.js"),$=require("../AiuiProvider/index.js"),z=p(require("../../components/badge.js")),A=require("../../components/heading.js"),L=require("../../components/text.js");const D="image",P="product_shelf",Z=999999999e-2,ee=({data:e,configuration:i})=>{const{locale:n="us",copyWriting:m}=(0,$.useAiuiContext)(),s=(r,o)=>i?.event?.primaryButton?.(r,o+1),y=(r,o)=>i?.event?.secondaryButton?.(r,o+1),l=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},u=!l?.availableForSale&&l?.price?.amount===Z,{price:h,basePrice:b}=(0,H.formatVariantPrice)({locale:n,amount:l?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),g=()=>{const r=e?.sku,o=e?.variants;return o?.find(f=>f?.sku===r)?.image?.url||o?.[0]?.image?.url||""};return(0,t.jsxs)("div",{className:(0,d.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",i?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)("div",{className:(0,d.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,t.jsx)(I.default,{source:g(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,t.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((r,o)=>(0,t.jsx)(z.default,{children:r},o))}),(0,t.jsx)(A.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),(0,t.jsx)(L.Text,{size:2,className:"shelf-display-product-description line-clamp-1 h-[20px]",children:e?.description||""}),(0,t.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:u?(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:m?.soldOutText}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:h||""}),(0,t.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:b||""})]})}),(0,t.jsxs)("div",{className:(0,d.cn)("lg-desktop:gap-3 flex items-center gap-2",i.direction==="vertical"?"flex-col":""),children:[(0,t.jsx)(w.default,{variant:"primary",onClick:()=>s(e,i?.index),className:`
|
|
2
2
|
laptop:text-sm desktop:text-base text-xs
|
|
3
3
|
${i.direction==="vertical"?"w-full":""}
|
|
4
4
|
`,children:i?.primaryButton||""}),(0,t.jsx)(w.default,{variant:"secondary",onClick:()=>y(e,i?.index),className:`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\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\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 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 return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return <Badge key={index}>{item}</Badge>\n })}\n </div>\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\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\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 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 return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return <Badge key={index}>{item}</Badge>\n })}\n </div>\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n <Text size={2} className=\"shelf-display-product-description line-clamp-1 h-[20px]\">\n {data?.description || ''}\n </Text>\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{Fragment as X,jsx as t,jsxs as c}from"react/jsx-runtime";import _,{useState as S,useEffect as M,useRef as E,useImperativeHandle as H}from"react";import{cn as m}from"../../helpers/utils.js";import V from"../../components/picture.js";import q from"./tabSwitch.js";import T from"../../components/button.js";import R from"../Title/index.js";import $ from"../SwiperBox/index.js";import{withStyles as z}from"../../shared/Styles.js";import{formatVariantPrice as A}from"./shelfDisplay.js";import{useMediaQuery as L}from"react-responsive";import{useExposure as O}from"../../hooks/useExposure.js";import{gaTrack as U}from"../../shared/track.js";import{useAiuiContext as j}from"../AiuiProvider/index.js";import F from"../../components/badge.js";import{Heading as Q}from"../../components/heading.js";import{Text as W}from"../../components/text.js";const B="image",N="product_shelf",G=999999999e-2,J=({data:e,configuration:r})=>{const{locale:d="us",copyWriting:u}=j(),f=(i,n)=>r?.event?.primaryButton?.(i,n+1),v=(i,n)=>r?.event?.secondaryButton?.(i,n+1),o=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},s=!o?.availableForSale&&o?.price?.amount===G,{price:x,basePrice:y}=A({locale:d,amount:o?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),h=()=>{const i=e?.sku,n=e?.variants;return n?.find(l=>l?.sku===i)?.image?.url||n?.[0]?.image?.url||""};return c("div",{className:m("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:m("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(V,{source:h(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((i,n)=>t(F,{children:i},n))}),t(Q,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[
|
|
1
|
+
"use client";import{Fragment as X,jsx as t,jsxs as c}from"react/jsx-runtime";import _,{useState as S,useEffect as M,useRef as E,useImperativeHandle as H}from"react";import{cn as m}from"../../helpers/utils.js";import V from"../../components/picture.js";import q from"./tabSwitch.js";import T from"../../components/button.js";import R from"../Title/index.js";import $ from"../SwiperBox/index.js";import{withStyles as z}from"../../shared/Styles.js";import{formatVariantPrice as A}from"./shelfDisplay.js";import{useMediaQuery as L}from"react-responsive";import{useExposure as O}from"../../hooks/useExposure.js";import{gaTrack as U}from"../../shared/track.js";import{useAiuiContext as j}from"../AiuiProvider/index.js";import F from"../../components/badge.js";import{Heading as Q}from"../../components/heading.js";import{Text as W}from"../../components/text.js";const B="image",N="product_shelf",G=999999999e-2,J=({data:e,configuration:r})=>{const{locale:d="us",copyWriting:u}=j(),f=(i,n)=>r?.event?.primaryButton?.(i,n+1),v=(i,n)=>r?.event?.secondaryButton?.(i,n+1),o=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},s=!o?.availableForSale&&o?.price?.amount===G,{price:x,basePrice:y}=A({locale:d,amount:o?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),h=()=>{const i=e?.sku,n=e?.variants;return n?.find(l=>l?.sku===i)?.image?.url||n?.[0]?.image?.url||""};return c("div",{className:m("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:m("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(V,{source:h(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((i,n)=>t(F,{children:i},n))}),t(Q,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),t(W,{size:2,className:"shelf-display-product-description line-clamp-1 h-[20px]",children:e?.description||""}),t("div",{className:"mb-2 mt-[20px] flex items-center",children:s?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:u?.soldOutText}):c(X,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:x||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:y||""})]})}),c("div",{className:m("lg-desktop:gap-3 flex items-center gap-2",r.direction==="vertical"?"flex-col":""),children:[t(T,{variant:"primary",onClick:()=>f(e,r?.index),className:`
|
|
2
2
|
laptop:text-sm desktop:text-base text-xs
|
|
3
3
|
${r.direction==="vertical"?"w-full":""}
|
|
4
4
|
`,children:r?.primaryButton||""}),t(T,{variant:"secondary",onClick:()=>v(e,r?.index),className:`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\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\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 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 return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return <Badge key={index}>{item}</Badge>\n })}\n </div>\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\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\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 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 return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return <Badge key={index}>{item}</Badge>\n })}\n </div>\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n <Text size={2} className=\"shelf-display-product-description line-clamp-1 h-[20px]\">\n {data?.description || ''}\n </Text>\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "price", "basePrice", "handleUrl", "sku", "skuArray", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
|
|
7
7
|
}
|