@anker-in/headless-ui 1.0.20-alpha.1761124393999 → 1.0.20-alpha.1761134202138
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/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/types.d.ts +1 -0
- package/dist/cjs/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.js.map +1 -1
- package/dist/cjs/biz-components/Listing/ProductProvider.d.ts +57 -1
- package/dist/cjs/biz-components/Listing/ProductProvider.js +1 -1
- package/dist/cjs/biz-components/Listing/ProductProvider.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PaidShipping/LearnMore.d.ts +2 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/LearnMore.js +2 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/LearnMore.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingMethod.d.ts +10 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingMethod.js +2 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.d.ts +25 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js +2 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/index.d.ts +12 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/index.js +2 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/index.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/type.d.ts +30 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/type.js +2 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/type.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/utils.d.ts +2 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/utils.js +2 -0
- package/dist/cjs/biz-components/Listing/components/PaidShipping/utils.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.d.ts +40 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +22 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/hooks/useBenefits.d.ts +50 -0
- package/dist/cjs/biz-components/Listing/hooks/useBenefits.js +2 -0
- package/dist/cjs/biz-components/Listing/hooks/useBenefits.js.map +7 -0
- package/dist/cjs/biz-components/Listing/hooks/useCopy.d.ts +3 -6
- package/dist/cjs/biz-components/Listing/hooks/useCopy.js +1 -1
- package/dist/cjs/biz-components/Listing/hooks/useCopy.js.map +3 -3
- package/dist/cjs/biz-components/Listing/index.js +1 -1
- package/dist/cjs/biz-components/Listing/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/utils/helper.d.ts +15 -0
- package/dist/cjs/biz-components/Listing/utils/helper.js +1 -1
- package/dist/cjs/biz-components/Listing/utils/helper.js.map +3 -3
- package/dist/cjs/biz-components/Listing/utils/textFormat.d.ts +73 -0
- package/dist/cjs/biz-components/Listing/utils/textFormat.js +2 -0
- package/dist/cjs/biz-components/Listing/utils/textFormat.js.map +7 -0
- package/dist/cjs/biz-components/index.d.ts +2 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/types.d.ts +1 -0
- package/dist/esm/biz-components/HeaderNavigation/types.js.map +1 -1
- package/dist/esm/biz-components/Listing/ProductProvider.d.ts +57 -1
- package/dist/esm/biz-components/Listing/ProductProvider.js +1 -1
- package/dist/esm/biz-components/Listing/ProductProvider.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PaidShipping/LearnMore.d.ts +2 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/LearnMore.js +2 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/LearnMore.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.d.ts +10 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js +2 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.d.ts +25 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js +2 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/index.d.ts +12 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/index.js +2 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/index.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/type.d.ts +30 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/type.js +2 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/type.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/utils.d.ts +2 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/utils.js +2 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/utils.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.d.ts +40 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +22 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/hooks/useBenefits.d.ts +50 -0
- package/dist/esm/biz-components/Listing/hooks/useBenefits.js +2 -0
- package/dist/esm/biz-components/Listing/hooks/useBenefits.js.map +7 -0
- package/dist/esm/biz-components/Listing/hooks/useCopy.d.ts +3 -6
- package/dist/esm/biz-components/Listing/hooks/useCopy.js +1 -1
- package/dist/esm/biz-components/Listing/hooks/useCopy.js.map +3 -3
- package/dist/esm/biz-components/Listing/index.js +1 -1
- package/dist/esm/biz-components/Listing/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/utils/helper.d.ts +15 -0
- package/dist/esm/biz-components/Listing/utils/helper.js +1 -1
- package/dist/esm/biz-components/Listing/utils/helper.js.map +3 -3
- package/dist/esm/biz-components/Listing/utils/textFormat.d.ts +73 -0
- package/dist/esm/biz-components/Listing/utils/textFormat.js +2 -0
- package/dist/esm/biz-components/Listing/utils/textFormat.js.map +7 -0
- package/dist/esm/biz-components/index.d.ts +2 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +2 -2
- package/package.json +1 -1
package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var n=Object.defineProperty;var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var P=(r,i)=>{for(var l in i)n(r,l,{get:i[l],enumerable:!0})},L=(r,i,l,d)=>{if(i&&typeof i=="object"||typeof i=="function")for(let a of B(i))!b.call(r,a)&&a!==l&&n(r,a,{get:()=>i[a],enumerable:!(d=N(i,a))||d.enumerable});return r};var z=r=>L(n({},"__esModule",{value:!0}),r);var F={};P(F,{default:()=>E});module.exports=z(F);var t=require("react/jsx-runtime"),s=require("../../../../../../components"),f=require("../../../../../../helpers/index.js"),x=require("../../../../../AiuiProvider"),v=require("../../../../ProductProvider"),p=require("../../../../utils");const w=()=>{const{locale:r="us"}=(0,x.useAiuiContext)(),{variant:i,bundle:l,checkedBundle:d,setCheckedBundle:a,setCheckedGift:h,setJoinedRecommendBuyProducts:m,joinedRecommendBuyProducts:j}=(0,v.useProductContext)(),{title:k,bundleList:y,showAtListing:g}=l||{},u=y?.filter(e=>e.variants.slice(1,e.variants.length).every(c=>c.variant.availableForSale));if(!u?.length&&g)return null;const C=e=>{d?.id===e.id?(a?.(void 0),m?.({bundle:void 0})):(h?.(void 0),a?.(e),m?.({bundle:e}))};return(0,t.jsxs)("div",{className:"ipc-product-detail-bundle",children:[(0,t.jsx)(s.Text,{size:3,className:"font-bold",html:k}),u?.map(e=>{const c=e.variants.filter(o=>o.variant.sku!==i.sku);return(0,t.jsx)("div",{className:"flex flex-col gap-4 mt-3 desktop:mt-4",children:(0,t.jsxs)("div",{className:(0,f.cn)("flex items-center gap-2 text-left font-bold px-4 py-6 rounded-2xl border-[#E4E5E6] border",{"border-brand outline outline-1 outline-brand":d?.id===e.id}),children:[(0,t.jsx)(s.Checkbox,{onCheckedChange:()=>C(e),size:"lg",id:e.id,value:e.id,checked:d?.id===e.id}),(0,t.jsx)("label",{htmlFor:e.id,className:"size-full cursor-pointer",children:c?.map(o=>(0,t.jsxs)("div",{className:"flex justify-between items-center gap-6 ",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(s.Picture,{source:o?.variant?.image?.url,className:"size-12 flex-shrink-0"}),(0,t.jsx)(s.Text,{className:"text-sm laptop:text-[16px] laptop:text-[20px] desktop:text-[18px] font-bold",html:o.variant.product.title})]}),(0,t.jsxs)("div",{className:"flex items-center justify-end gap-1 laptop:flex-row flex-col shrink-0",children:[(0,t.jsx)(s.Text,{className:"text-base laptop:text-[20px] desktop:text-2xl font-bold",html:(0,p.formatPrice)({amount:o.price,locale:r,currencyCode:o.variant.price.currencyCode})}),o.price<o.variant.price.amount&&(0,t.jsx)(s.Text,{className:"text-base laptop:text-[20px] desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:o.variant.price.amount,locale:r,currencyCode:o.variant.price.currencyCode})})]})]},o.variant.id))})]})},e.id)})]})};var E=w;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Picture, Button, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport { useProductContext } from '../../../../ProductProvider'\nimport { formatPrice } from '../../../../utils'\nimport type { BundleListItem } from '../../../../types/product'\n\nconst ProductBundle = () => {\n const { locale = 'us' } = useAiuiContext()\n const {\n variant,\n bundle,\n checkedBundle,\n setCheckedBundle,\n setCheckedGift,\n setJoinedRecommendBuyProducts,\n joinedRecommendBuyProducts,\n } = useProductContext()\n\n const { title, bundleList, showAtListing } = bundle || {}\n\n const availableBundleList = bundleList?.filter(bundle =>\n bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n )\n\n if (!availableBundleList?.length && showAtListing) return null\n\n const handleSelectedChange = (bundleItem: BundleListItem) => {\n if (checkedBundle?.id === bundleItem.id) {\n setCheckedBundle?.(undefined)\n setJoinedRecommendBuyProducts?.({
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAwCM,IAAAI,EAAA,6BAxCNC,EAAgD,wCAChDC,EAAmB,8CACnBC,EAA+B,uCAC/BC,EAAkC,uCAClCC,EAA4B,6BAG5B,MAAMC,EAAgB,IAAM,CAC1B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,QAAAC,EACA,OAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,8BAAAC,EACA,2BAAAC,CACF,KAAI,qBAAkB,EAEhB,CAAE,MAAAC,EAAO,WAAAC,EAAY,cAAAC,CAAc,EAAIR,GAAU,CAAC,EAElDS,EAAsBF,GAAY,OAAOP,GAC7CA,EAAO,SAAS,MAAM,EAAGA,EAAO,SAAS,MAAM,EAAE,MAAMU,GAAKA,EAAE,QAAQ,gBAAgB,CACxF,EAEA,GAAI,CAACD,GAAqB,QAAUD,EAAe,OAAO,KAE1D,MAAMG,EAAwBC,GAA+B,CACvDX,GAAe,KAAOW,EAAW,IACnCV,IAAmB,MAAS,EAC5BE,IAAgC,CAAE,
|
|
4
|
+
"sourcesContent": ["import { Text, Picture, Button, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport { useProductContext } from '../../../../ProductProvider'\nimport { formatPrice } from '../../../../utils'\nimport type { BundleListItem } from '../../../../types/product'\n\nconst ProductBundle = () => {\n const { locale = 'us' } = useAiuiContext()\n const {\n variant,\n bundle,\n checkedBundle,\n setCheckedBundle,\n setCheckedGift,\n setJoinedRecommendBuyProducts,\n joinedRecommendBuyProducts,\n } = useProductContext()\n\n const { title, bundleList, showAtListing } = bundle || {}\n\n const availableBundleList = bundleList?.filter(bundle =>\n bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n )\n\n if (!availableBundleList?.length && showAtListing) return null\n\n const handleSelectedChange = (bundleItem: BundleListItem) => {\n if (checkedBundle?.id === bundleItem.id) {\n setCheckedBundle?.(undefined)\n setJoinedRecommendBuyProducts?.({ bundle: undefined })\n } else {\n setCheckedGift?.(undefined)\n setCheckedBundle?.(bundleItem)\n setJoinedRecommendBuyProducts?.({ bundle: bundleItem })\n }\n }\n\n return (\n <div className=\"ipc-product-detail-bundle\">\n <Text size={3} className=\"font-bold\" html={title} />\n {availableBundleList?.map(bundle => {\n const bundleVariants = bundle.variants.filter(v => v.variant.sku !== variant.sku)\n return (\n <div key={bundle.id} className=\"flex flex-col gap-4 mt-3 desktop:mt-4\">\n <div\n className={cn(\n 'flex items-center gap-2 text-left font-bold px-4 py-6 rounded-2xl border-[#E4E5E6] border',\n {\n ['border-brand outline outline-1 outline-brand']: checkedBundle?.id === bundle.id,\n }\n )}\n >\n <Checkbox\n onCheckedChange={() => handleSelectedChange(bundle)}\n size=\"lg\"\n id={bundle.id}\n value={bundle.id}\n checked={checkedBundle?.id === bundle.id}\n />\n <label htmlFor={bundle.id} className=\"size-full cursor-pointer\">\n {bundleVariants?.map(bundleVariant => {\n return (\n <div className=\"flex justify-between items-center gap-6 \" key={bundleVariant.variant.id}>\n <div className=\"flex items-center gap-2\">\n <Picture source={bundleVariant?.variant?.image?.url} className=\"size-12 flex-shrink-0\" />\n <Text\n className=\"text-sm laptop:text-[16px] laptop:text-[20px] desktop:text-[18px] font-bold\"\n html={bundleVariant.variant.product.title}\n />\n </div>\n <div className=\"flex items-center justify-end gap-1 laptop:flex-row flex-col shrink-0\">\n <Text\n className=\"text-base laptop:text-[20px] desktop:text-2xl font-bold\"\n html={formatPrice({\n amount: bundleVariant.price,\n locale,\n currencyCode: bundleVariant.variant.price.currencyCode,\n })}\n />\n {bundleVariant.price < bundleVariant.variant.price.amount && (\n <Text\n className=\"text-base laptop:text-[20px] desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n html={formatPrice({\n amount: bundleVariant.variant.price.amount,\n locale,\n currencyCode: bundleVariant.variant.price.currencyCode,\n })}\n />\n )}\n </div>\n </div>\n )\n })}\n </label>\n </div>\n </div>\n )\n })}\n </div>\n )\n}\n\nexport default ProductBundle\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAwCM,IAAAI,EAAA,6BAxCNC,EAAgD,wCAChDC,EAAmB,8CACnBC,EAA+B,uCAC/BC,EAAkC,uCAClCC,EAA4B,6BAG5B,MAAMC,EAAgB,IAAM,CAC1B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,QAAAC,EACA,OAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,8BAAAC,EACA,2BAAAC,CACF,KAAI,qBAAkB,EAEhB,CAAE,MAAAC,EAAO,WAAAC,EAAY,cAAAC,CAAc,EAAIR,GAAU,CAAC,EAElDS,EAAsBF,GAAY,OAAOP,GAC7CA,EAAO,SAAS,MAAM,EAAGA,EAAO,SAAS,MAAM,EAAE,MAAMU,GAAKA,EAAE,QAAQ,gBAAgB,CACxF,EAEA,GAAI,CAACD,GAAqB,QAAUD,EAAe,OAAO,KAE1D,MAAMG,EAAwBC,GAA+B,CACvDX,GAAe,KAAOW,EAAW,IACnCV,IAAmB,MAAS,EAC5BE,IAAgC,CAAE,OAAQ,MAAU,CAAC,IAErDD,IAAiB,MAAS,EAC1BD,IAAmBU,CAAU,EAC7BR,IAAgC,CAAE,OAAQQ,CAAW,CAAC,EAE1D,EAEA,SACE,QAAC,OAAI,UAAU,4BACb,oBAAC,QAAK,KAAM,EAAG,UAAU,YAAY,KAAMN,EAAO,EACjDG,GAAqB,IAAIT,GAAU,CAClC,MAAMa,EAAiBb,EAAO,SAAS,OAAOU,GAAKA,EAAE,QAAQ,MAAQX,EAAQ,GAAG,EAChF,SACE,OAAC,OAAoB,UAAU,wCAC7B,oBAAC,OACC,aAAW,MACT,4FACA,CACG,+CAAiDE,GAAe,KAAOD,EAAO,EACjF,CACF,EAEA,oBAAC,YACC,gBAAiB,IAAMW,EAAqBX,CAAM,EAClD,KAAK,KACL,GAAIA,EAAO,GACX,MAAOA,EAAO,GACd,QAASC,GAAe,KAAOD,EAAO,GACxC,KACA,OAAC,SAAM,QAASA,EAAO,GAAI,UAAU,2BAClC,SAAAa,GAAgB,IAAIC,MAEjB,QAAC,OAAI,UAAU,2CACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,GAAe,SAAS,OAAO,IAAK,UAAU,wBAAwB,KACvF,OAAC,QACC,UAAU,8EACV,KAAMA,EAAc,QAAQ,QAAQ,MACtC,GACF,KACA,QAAC,OAAI,UAAU,yEACb,oBAAC,QACC,UAAU,0DACV,QAAM,eAAY,CAChB,OAAQA,EAAc,MACtB,OAAAhB,EACA,aAAcgB,EAAc,QAAQ,MAAM,YAC5C,CAAC,EACH,EACCA,EAAc,MAAQA,EAAc,QAAQ,MAAM,WACjD,OAAC,QACC,UAAU,sFACV,QAAM,eAAY,CAChB,OAAQA,EAAc,QAAQ,MAAM,OACpC,OAAAhB,EACA,aAAcgB,EAAc,QAAQ,MAAM,YAC5C,CAAC,EACH,GAEJ,IA3B6DA,EAAc,QAAQ,EA4BrF,CAEH,EACH,GACF,GAnDQd,EAAO,EAoDjB,CAEJ,CAAC,GACH,CAEJ,EAEA,IAAOX,EAAQQ",
|
|
6
6
|
"names": ["ProductBundle_exports", "__export", "ProductBundle_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_AiuiProvider", "import_ProductProvider", "import_utils", "ProductBundle", "locale", "variant", "bundle", "checkedBundle", "setCheckedBundle", "setCheckedGift", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "title", "bundleList", "showAtListing", "availableBundleList", "v", "handleSelectedChange", "bundleItem", "bundleVariants", "bundleVariant"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var s=Object.defineProperty;var
|
|
1
|
+
"use strict";var s=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var P=(l,o)=>{for(var i in o)s(l,i,{get:o[i],enumerable:!0})},G=(l,o,i,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of N(o))!y.call(l,r)&&r!==i&&s(l,r,{get:()=>o[r],enumerable:!(a=v(o,r))||a.enumerable});return l};var g=l=>G(s({},"__esModule",{value:!0}),l);var w={};P(w,{default:()=>R});module.exports=g(w);var t=require("react/jsx-runtime"),d=require("../../../../../../components"),p=require("../../../../../../helpers/index.js"),u=require("react"),f=require("../../../../ProductProvider"),x=require("../../../../utils"),b=require("../../../../../AiuiProvider");const B=()=>{const{locale:l="us"}=(0,b.useAiuiContext)(),{freeGift:o,checkedGift:i,setCheckedGift:a,setCheckedBundle:r,setJoinedRecommendBuyProducts:c,joinedRecommendBuyProducts:z}=(0,f.useProductContext)(),{title:h,giftList:n=[],freeLabel:k}=o||{},m=(0,u.useMemo)(()=>n?.filter(e=>e.availableForSale),[n]),C=e=>{i?.id===e.id?(a?.(void 0),c?.({gift:void 0})):(r?.(void 0),a?.(e),c?.({gift:e}))};return m?.length?(0,t.jsxs)("div",{className:"ipc-product-detail-free-gift",children:[(0,t.jsx)(d.Text,{size:3,className:"font-bold",html:h}),(0,t.jsx)("div",{className:"mt-3 flex flex-col gap-4 desktop:mt-4",children:m.map(e=>(0,t.jsxs)("div",{className:(0,p.cn)("flex items-center gap-2 text-left font-bold px-4 py-6 rounded-2xl border-[#E4E5E6] border-2",{"border-brand":i?.id===e.id}),children:[(0,t.jsx)(d.Checkbox,{onCheckedChange:()=>C(e),size:"lg",id:e.id,checked:i?.id===e.id,value:e.id}),(0,t.jsxs)("label",{htmlFor:e.id,className:"flex justify-between items-center gap-4 laptop:gap-0 w-full",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(d.Picture,{source:e.image?.url,className:"size-12 flex-shrink-0"}),(0,t.jsx)(d.Text,{className:"text-sm laptop:text-[16px] desktop:text-[18px] font-bold",html:e.product.title})]}),(0,t.jsxs)("div",{className:"flex items-center gap-1 tablet:flex-row flex-col shrink-0",children:[(0,t.jsx)(d.Text,{className:"text-base laptop:text-[20px] desktop:text-2xl font-bold",html:k}),(0,t.jsx)(d.Text,{className:"text-base laptop:text-[20px] desktop:text-2xl font-bold line-through",html:(0,x.formatPrice)({amount:e.price.amount,locale:l,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var R=B;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Picture, Button, RadioGroup, RadioGroupItem, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useProductContext } from '../../../../ProductProvider'\nimport { formatPrice } from '../../../../utils'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport type { ProductVariant } from '../../../../types/product'\n\nconst ProductFreeGift = () => {\n const { locale = 'us' } = useAiuiContext()\n const { freeGift, checkedGift, setCheckedGift, setCheckedBundle, setJoinedRecommendBuyProducts, joinedRecommendBuyProducts } = useProductContext()\n const { title, giftList = [], freeLabel } = freeGift || {}\n const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n const handleCheckboxClick = (value: ProductVariant) => {\n if (checkedGift?.id === value.id) {\n setCheckedGift?.(undefined)\n setJoinedRecommendBuyProducts?.({
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6BM,IAAAI,EAAA,6BA7BNC,EAA4E,wCAC5EC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAkC,uCAClCC,EAA4B,6BAC5BC,EAA+B,uCAG/B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CAAE,SAAAC,EAAU,YAAAC,EAAa,eAAAC,EAAgB,iBAAAC,EAAkB,8BAAAC,EAA+B,2BAAAC,CAA2B,KAAI,qBAAkB,EAC3I,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIR,GAAY,CAAC,EACnDS,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDX,GAAa,KAAOW,EAAM,IAC5BV,IAAiB,MAAS,EAC1BE,IAAgC,CAAE,
|
|
4
|
+
"sourcesContent": ["import { Text, Picture, Button, RadioGroup, RadioGroupItem, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useProductContext } from '../../../../ProductProvider'\nimport { formatPrice } from '../../../../utils'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport type { ProductVariant } from '../../../../types/product'\n\nconst ProductFreeGift = () => {\n const { locale = 'us' } = useAiuiContext()\n const { freeGift, checkedGift, setCheckedGift, setCheckedBundle, setJoinedRecommendBuyProducts, joinedRecommendBuyProducts } = useProductContext()\n const { title, giftList = [], freeLabel } = freeGift || {}\n const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n const handleCheckboxClick = (value: ProductVariant) => {\n if (checkedGift?.id === value.id) {\n setCheckedGift?.(undefined)\n setJoinedRecommendBuyProducts?.({ gift: undefined })\n } else {\n setCheckedBundle?.(undefined)\n setCheckedGift?.(value)\n setJoinedRecommendBuyProducts?.({ gift: value })\n }\n }\n\n if (!availableGifts?.length) return null\n\n return (\n <div className=\"ipc-product-detail-free-gift\">\n <Text size={3} className=\"font-bold\" html={title} />\n <div className=\"mt-3 flex flex-col gap-4 desktop:mt-4\">\n {availableGifts.map(gift => (\n <div\n key={gift.id}\n className={cn(\n 'flex items-center gap-2 text-left font-bold px-4 py-6 rounded-2xl border-[#E4E5E6] border-2',\n {\n ['border-brand']: checkedGift?.id === gift.id,\n }\n )}\n >\n <Checkbox\n onCheckedChange={() => handleCheckboxClick(gift)}\n size=\"lg\"\n id={gift.id}\n checked={checkedGift?.id === gift.id}\n value={gift.id}\n ></Checkbox>\n <label htmlFor={gift.id} className=\"flex justify-between items-center gap-4 laptop:gap-0 w-full\">\n <div className=\"flex items-center gap-2\">\n <Picture source={gift.image?.url} className=\"size-12 flex-shrink-0\" />\n <Text className=\"text-sm laptop:text-[16px] desktop:text-[18px] font-bold\" html={gift.product.title} />\n </div>\n <div className=\"flex items-center gap-1 tablet:flex-row flex-col shrink-0\">\n <Text className=\"text-base laptop:text-[20px] desktop:text-2xl font-bold\" html={freeLabel} />\n <Text\n className=\"text-base laptop:text-[20px] desktop:text-2xl font-bold line-through\"\n html={formatPrice({\n amount: gift.price.amount,\n locale,\n currencyCode: gift.price.currencyCode,\n })}\n />\n </div>\n </label>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ProductFreeGift\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6BM,IAAAI,EAAA,6BA7BNC,EAA4E,wCAC5EC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAkC,uCAClCC,EAA4B,6BAC5BC,EAA+B,uCAG/B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CAAE,SAAAC,EAAU,YAAAC,EAAa,eAAAC,EAAgB,iBAAAC,EAAkB,8BAAAC,EAA+B,2BAAAC,CAA2B,KAAI,qBAAkB,EAC3I,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIR,GAAY,CAAC,EACnDS,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDX,GAAa,KAAOW,EAAM,IAC5BV,IAAiB,MAAS,EAC1BE,IAAgC,CAAE,KAAM,MAAU,CAAC,IAEnDD,IAAmB,MAAS,EAC5BD,IAAiBU,CAAK,EACtBR,IAAgC,CAAE,KAAMQ,CAAM,CAAC,EAEnD,EAEA,OAAKH,GAAgB,UAGnB,QAAC,OAAI,UAAU,+BACb,oBAAC,QAAK,KAAM,EAAG,UAAU,YAAY,KAAMH,EAAO,KAClD,OAAC,OAAI,UAAU,wCACZ,SAAAG,EAAe,IAAII,MAClB,QAAC,OAEC,aAAW,MACT,8FACA,CACG,eAAiBZ,GAAa,KAAOY,EAAK,EAC7C,CACF,EAEA,oBAAC,YACC,gBAAiB,IAAMF,EAAoBE,CAAI,EAC/C,KAAK,KACL,GAAIA,EAAK,GACT,QAASZ,GAAa,KAAOY,EAAK,GAClC,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,8DACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,wBAAwB,KACpE,OAAC,QAAK,UAAU,2DAA2D,KAAMA,EAAK,QAAQ,MAAO,GACvG,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QAAK,UAAU,0DAA0D,KAAML,EAAW,KAC3F,OAAC,QACC,UAAU,uEACV,QAAM,eAAY,CAChB,OAAQK,EAAK,MAAM,OACnB,OAAAd,EACA,aAAcc,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IA/BKA,EAAK,EAgCZ,CACD,EACH,GACF,EA3CkC,IA6CtC,EAEA,IAAOxB,EAAQS",
|
|
6
6
|
"names": ["ProductFreeGift_exports", "__export", "ProductFreeGift_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_ProductProvider", "import_utils", "import_AiuiProvider", "ProductFreeGift", "locale", "freeGift", "checkedGift", "setCheckedGift", "setCheckedBundle", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "gift"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=Object.create;var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var B=(o,t)=>{for(var r in t)d(o,r,{get:t[r],enumerable:!0})},m=(o,t,r,f)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of P(t))!g.call(o,i)&&i!==r&&d(o,i,{get:()=>t[i],enumerable:!(f=x(t,i))||f.enumerable});return o};var e=(o,t,r)=>(r=o!=null?n(b(o)):{},m(t||!o||!o.__esModule?d(r,"default",{value:o,enumerable:!0}):r,o)),h=o=>m(d({},"__esModule",{value:!0}),o);var k={};B(k,{default:()=>T});module.exports=h(k);var p=require("react/jsx-runtime"),D=require("./ProductBenefitsTabs/index.js"),l=e(require("./ProductHighlight/index.js")),a=e(require("./ProductFreeGift/index.js")),c=e(require("./ProductOptions/index.js")),u=e(require("./ProductBundle/index.js")),s=e(require("./BenefitsTab"));const v=o=>(0,p.jsxs)("div",{id:"ipc-product-detail",className:"flex flex-col gap-12 tablet:px-8 laptop:px-16 desktop:px-0 px-4",children:[(0,p.jsx)(s.default,{}),(0,p.jsx)(l.default,{}),(0,p.jsx)(c.default,{}),(0,p.jsx)(a.default,{}),(0,p.jsx)(u.default,{})]});var T=v;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import ProductBenefitsTabs from './ProductBenefitsTabs/index.js'\nimport ProductHighlight from './ProductHighlight/index.js'\nimport ProductFreeGift from './ProductFreeGift/index.js'\nimport ProductOptions from './ProductOptions/index.js'\nimport ProductBundle from './ProductBundle/index.js'\n\n\nconst ProductDetail = (props: any) => {\n return (\n <div id=\"ipc-product-detail\" className=\"flex flex-col gap-12 tablet:px-8 laptop:px-16 desktop:px-0 px-4\">\n
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ProductDetail_exports", "__export", "ProductDetail_default", "__toCommonJS", "import_jsx_runtime", "import_ProductBenefitsTabs", "import_ProductHighlight", "import_ProductFreeGift", "import_ProductOptions", "import_ProductBundle", "ProductDetail", "props", "ProductHighlight", "ProductOptions", "ProductFreeGift", "ProductBundle"]
|
|
4
|
+
"sourcesContent": ["import ProductBenefitsTabs from './ProductBenefitsTabs/index.js'\nimport ProductHighlight from './ProductHighlight/index.js'\nimport ProductFreeGift from './ProductFreeGift/index.js'\nimport ProductOptions from './ProductOptions/index.js'\nimport ProductBundle from './ProductBundle/index.js'\nimport BenefitsTab from './BenefitsTab'\n\n\nconst ProductDetail = (props: any) => {\n return (\n <div id=\"ipc-product-detail\" className=\"flex flex-col gap-12 tablet:px-8 laptop:px-16 desktop:px-0 px-4\">\n <BenefitsTab />\n <ProductHighlight />\n <ProductOptions />\n <ProductFreeGift />\n <ProductBundle />\n </div>\n )\n}\n\nexport default ProductDetail\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAUI,IAAAI,EAAA,6BAVJC,EAAgC,0CAChCC,EAA6B,0CAC7BC,EAA4B,yCAC5BC,EAA2B,wCAC3BC,EAA0B,uCAC1BC,EAAwB,4BAGxB,MAAMC,EAAiBC,MAEnB,QAAC,OAAI,GAAG,qBAAqB,UAAU,kEACrC,oBAAC,EAAAC,QAAA,EAAY,KACb,OAAC,EAAAC,QAAA,EAAiB,KAClB,OAAC,EAAAC,QAAA,EAAe,KAChB,OAAC,EAAAC,QAAA,EAAgB,KACjB,OAAC,EAAAC,QAAA,EAAc,GACjB,EAIJ,IAAOf,EAAQS",
|
|
6
|
+
"names": ["ProductDetail_exports", "__export", "ProductDetail_default", "__toCommonJS", "import_jsx_runtime", "import_ProductBenefitsTabs", "import_ProductHighlight", "import_ProductFreeGift", "import_ProductOptions", "import_ProductBundle", "import_BenefitsTab", "ProductDetail", "props", "BenefitsTab", "ProductHighlight", "ProductOptions", "ProductFreeGift", "ProductBundle"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var D=Object.create;var x=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var W=(t,a)=>{for(var r in a)x(t,r,{get:a[r],enumerable:!0})},V=(t,a,r,g)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of F(a))!O.call(t,l)&&l!==r&&x(t,l,{get:()=>a[l],enumerable:!(g=j(a,l))||g.enumerable});return t};var Y=(t,a,r)=>(r=t!=null?D(_(t)):{},V(a||!t||!t.__esModule?x(r,"default",{value:t,enumerable:!0}):r,t)),Z=t=>V(x({},"__esModule",{value:!0}),t);var U={};W(U,{default:()=>Q});module.exports=Z(U);var e=require("react/jsx-runtime"),P=require("../../../../AiuiProvider/index.js"),u=require("../../../../../components"),o=require("react"),m=require("swiper/react"),i=require("swiper/modules"),w=require("../../../../../helpers/index.js"),C=require("./types.js"),b=require("@radix-ui/react-tabs"),T=require("../../../ProductProvider.js"),z=require("../../../hooks/use-variant-media.js"),R=require("./components/SpecsModal.js"),A=Y(require("./components/CompareModal.js")),B=require("../../../utils/index.js");const E=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,e.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),I=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,e.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),H=()=>{const{copyWriting:t}=(0,P.useAiuiContext)(),{product:a,variant:r,isMobile:g}=(0,T.useProductContext)(),l=(0,z.useVariantMedia)({product:a,variant:r}),[k,N]=(0,o.useState)(null),c=r?.metafields?.component?.custom_media_list;let f,y,h,v;c&&c?.available?(f=c?.product||[],y=c?.scenarios||[],h=c?.keyFeatures||[],v=c?.video||[]):(f=l?.productList,y=l?.sceneList,h=l?.keyFeaturesList,v=l?.videoList);const M=(0,o.useMemo)(()=>[...f,...y,...v],[f,y,v]),L={productList:f,sceneList:y,keyFeaturesList:h,videoList:v},d=(0,o.useMemo)(()=>(a?.payload?.components?.find(n=>n.componentKey==="ProductGallery")?.data||[])?.map(n=>({...n,galleries:L[n?.galleries]||[]})).filter(n=>n.galleries.length>0),[a?.payload,L]),s=(0,o.useRef)({}),[S,G]=(0,o.useState)(d?.[0]),$=(p,n)=>{switch(p?.galleryTabType){case C.GalleryTabType.GALLERY_IMAGE:return(0,e.jsx)(q,{...p,onCurrentTabLoopEnd:()=>{G(d?.[n])},onCurrentTabLoopStart:()=>{G(d?.[n])},index:n});case C.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(J,{...p});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(b.Root,{className:"relative",defaultValue:d?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"h-[420px] tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative ",children:d.map((p,n)=>(0,e.jsx)(b.Content,{className:"h-full",value:p.tabValue,children:$(p,n)},p.tabValue))}),(0,e.jsx)(K,{galleryTabs:d,activeGalleryTab:S,setActiveGalleryTab:G})]})})},K=({galleryTabs:t,activeGalleryTab:a,setActiveGalleryTab:r})=>{const{product:g}=(0,T.useProductContext)();return(0,e.jsxs)("div",{className:"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static",children:[(0,e.jsx)(b.List,{className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:t?.map(l=>(0,e.jsx)(b.Trigger,{className:(0,w.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",l.tabValue===a?.tabValue&&"bg-white"),onClick:()=>r(l),value:l.tabValue,children:l.tabLabel},l.tabValue))})}),(0,e.jsx)("div",{className:"laptop:gap-2 hidden laptop:flex",children:g.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(R.SpecsModal,{})," | ",(0,e.jsx)(A.default,{})]})})]})},q=(0,o.forwardRef)((t,a)=>{const{locale:r="us",copyWriting:g}=(0,P.useAiuiContext)(),{variant:l,totalSavings:k}=(0,T.useProductContext)(),N=(0,o.useRef)(null),[c,f]=(0,o.useState)(null),[y,h]=(0,o.useState)(!0),[v,M]=(0,o.useState)(!1),[L,d]=(0,o.useState)(null);return(0,e.jsxs)("div",{className:"h-full",children:[(0,e.jsx)(m.Swiper,{ref:a,className:"h-full",navigation:{nextEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-next`,prevEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-prev`},onSwiper:d,onProgress:s=>{h(s.isBeginning),M(s.isEnd)},pagination:{clickable:!0,el:N.current},onSlideChange:s=>{s&&(s.isEnd?t?.onCurrentTabLoopEnd?.():s.isBeginning&&t?.onCurrentTabLoopStart?.())},thumbs:{swiper:c},modules:[i.Mousewheel,i.Thumbs,i.Navigation,i.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((s,S)=>(0,e.jsx)(m.SwiperSlide,{className:"h-full",children:(0,e.jsx)(u.Picture,{source:s?.image?.url,alt:s?.image?.altText,className:"h-full",imgClassName:"object-contain h-full "})},t?.id+"SwiperSlideItem"+S))}),l.availableForSale&&!!k&&!t.index&&(0,e.jsx)(u.Badge,{size:"lg",className:"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6",children:`${(0,B.formatPrice)({amount:k,currencyCode:l?.price?.currencyCode,locale:r})} ${g?.off}`}),(0,e.jsx)("div",{className:(0,w.cn)("hidden tablet:block tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer",`ipc-product-gallery-${t?.id}-custom-swiper-button-prev`),children:(0,e.jsx)(E,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,w.cn)("hidden tablet:block tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer",`ipc-product-gallery-${t?.id}-custom-swiper-button-next`),children:(0,e.jsx)(I,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsxs)("div",{className:"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-
|
|
1
|
+
"use strict";var D=Object.create;var x=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var W=(t,a)=>{for(var r in a)x(t,r,{get:a[r],enumerable:!0})},V=(t,a,r,g)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of F(a))!O.call(t,l)&&l!==r&&x(t,l,{get:()=>a[l],enumerable:!(g=j(a,l))||g.enumerable});return t};var Y=(t,a,r)=>(r=t!=null?D(_(t)):{},V(a||!t||!t.__esModule?x(r,"default",{value:t,enumerable:!0}):r,t)),Z=t=>V(x({},"__esModule",{value:!0}),t);var U={};W(U,{default:()=>Q});module.exports=Z(U);var e=require("react/jsx-runtime"),P=require("../../../../AiuiProvider/index.js"),u=require("../../../../../components"),o=require("react"),m=require("swiper/react"),i=require("swiper/modules"),w=require("../../../../../helpers/index.js"),C=require("./types.js"),b=require("@radix-ui/react-tabs"),T=require("../../../ProductProvider.js"),z=require("../../../hooks/use-variant-media.js"),R=require("./components/SpecsModal.js"),A=Y(require("./components/CompareModal.js")),B=require("../../../utils/index.js");const E=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,e.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),I=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,e.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),H=()=>{const{copyWriting:t}=(0,P.useAiuiContext)(),{product:a,variant:r,isMobile:g}=(0,T.useProductContext)(),l=(0,z.useVariantMedia)({product:a,variant:r}),[k,N]=(0,o.useState)(null),c=r?.metafields?.component?.custom_media_list;let f,y,h,v;c&&c?.available?(f=c?.product||[],y=c?.scenarios||[],h=c?.keyFeatures||[],v=c?.video||[]):(f=l?.productList,y=l?.sceneList,h=l?.keyFeaturesList,v=l?.videoList);const M=(0,o.useMemo)(()=>[...f,...y,...v],[f,y,v]),L={productList:f,sceneList:y,keyFeaturesList:h,videoList:v},d=(0,o.useMemo)(()=>(a?.payload?.components?.find(n=>n.componentKey==="ProductGallery")?.data||[])?.map(n=>({...n,galleries:L[n?.galleries]||[]})).filter(n=>n.galleries.length>0),[a?.payload,L]),s=(0,o.useRef)({}),[S,G]=(0,o.useState)(d?.[0]),$=(p,n)=>{switch(p?.galleryTabType){case C.GalleryTabType.GALLERY_IMAGE:return(0,e.jsx)(q,{...p,onCurrentTabLoopEnd:()=>{G(d?.[n])},onCurrentTabLoopStart:()=>{G(d?.[n])},index:n});case C.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(J,{...p});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(b.Root,{className:"relative",defaultValue:d?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"h-[420px] tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative ",children:d.map((p,n)=>(0,e.jsx)(b.Content,{className:"h-full",value:p.tabValue,children:$(p,n)},p.tabValue))}),(0,e.jsx)(K,{galleryTabs:d,activeGalleryTab:S,setActiveGalleryTab:G})]})})},K=({galleryTabs:t,activeGalleryTab:a,setActiveGalleryTab:r})=>{const{product:g}=(0,T.useProductContext)();return(0,e.jsxs)("div",{className:"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static",children:[(0,e.jsx)(b.List,{className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:t?.map(l=>(0,e.jsx)(b.Trigger,{className:(0,w.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",l.tabValue===a?.tabValue&&"bg-white"),onClick:()=>r(l),value:l.tabValue,children:l.tabLabel},l.tabValue))})}),(0,e.jsx)("div",{className:"laptop:gap-2 hidden laptop:flex",children:g.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(R.SpecsModal,{})," | ",(0,e.jsx)(A.default,{})]})})]})},q=(0,o.forwardRef)((t,a)=>{const{locale:r="us",copyWriting:g}=(0,P.useAiuiContext)(),{variant:l,totalSavings:k}=(0,T.useProductContext)(),N=(0,o.useRef)(null),[c,f]=(0,o.useState)(null),[y,h]=(0,o.useState)(!0),[v,M]=(0,o.useState)(!1),[L,d]=(0,o.useState)(null);return(0,e.jsxs)("div",{className:"h-full",children:[(0,e.jsx)(m.Swiper,{ref:a,className:"h-full",navigation:{nextEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-next`,prevEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-prev`},onSwiper:d,onProgress:s=>{h(s.isBeginning),M(s.isEnd)},pagination:{clickable:!0,el:N.current},onSlideChange:s=>{s&&(s.isEnd?t?.onCurrentTabLoopEnd?.():s.isBeginning&&t?.onCurrentTabLoopStart?.())},thumbs:{swiper:c},modules:[i.Mousewheel,i.Thumbs,i.Navigation,i.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((s,S)=>(0,e.jsx)(m.SwiperSlide,{className:"h-full",children:(0,e.jsx)(u.Picture,{source:s?.image?.url,alt:s?.image?.altText,className:"h-full",imgClassName:"object-contain h-full "})},t?.id+"SwiperSlideItem"+S))}),l.availableForSale&&!!k&&!t.index&&(0,e.jsx)(u.Badge,{size:"lg",className:"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6",children:`${(0,B.formatPrice)({amount:k,currencyCode:l?.price?.currencyCode,locale:r})} ${g?.off}`}),(0,e.jsx)("div",{className:(0,w.cn)("hidden tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -translate-y-1/2 cursor-pointer",`ipc-product-gallery-${t?.id}-custom-swiper-button-prev`),children:(0,e.jsx)(E,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,w.cn)("hidden tablet:block tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -translate-y-1/2 cursor-pointer",`ipc-product-gallery-${t?.id}-custom-swiper-button-next`),children:(0,e.jsx)(I,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsxs)("div",{className:"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6",children:[(0,e.jsx)("div",{className:"hidden tablet:block",children:(0,e.jsx)(m.Swiper,{className:"flex items-center justify-between",onSwiper:f,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[i.Navigation,i.Thumbs],children:t?.galleries?.map((s,S)=>(0,e.jsx)(m.SwiperSlide,{className:"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:border-brand",children:(0,e.jsx)(u.Picture,{source:s.image?.url,alt:s.image?.altText,className:"size-10 lg-desktop:size-12 rounded",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+S))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(u.Picture,{source:t?.comment?.avatar?.url,className:"size-10 rounded-full shrink-0",imgClassName:"object-cover "}),(0,e.jsx)(u.Text,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#6D6D6F] line-clamp-2"})]})]}),(0,e.jsx)("div",{ref:N,className:"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),J=t=>(0,e.jsxs)("div",{className:"h-full",children:[(0,e.jsx)(m.Swiper,{className:"h-full",navigation:{nextEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-next`,prevEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-prev`},modules:[i.Mousewheel,i.Thumbs,i.Navigation,i.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((a,r)=>(0,e.jsx)(m.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:a?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:a?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:a?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+r))}),(0,e.jsx)("div",{className:(0,w.cn)("hidden tablet:block tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer",`ipc-product-gallery-${t?.id}-custom-swiper-button-prev`),children:(0,e.jsx)(E,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,w.cn)("hidden tablet:block tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer",`ipc-product-gallery-${t?.id}-custom-swiper-button-next`),children:(0,e.jsx)(I,{className:"tablet:size-10 lg-desktop:size-12"})})]}),le=t=>(0,e.jsx)("div",{children:"3D View"});var Q=H;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n type RefObject,\n useEffect,\n type Dispatch,\n type SetStateAction,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useProductContext } from '../../../ProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n <path\n d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n <path\n d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst ProductGallery = () => {\n const { copyWriting } = useAiuiContext()\n const { product, variant, isMobile } = useProductContext()\n const defaultMediaData = useVariantMedia({ product, variant })\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n const customMediaList = variant?.metafields?.component?.custom_media_list\n let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n if (customMediaList && customMediaList?.available) {\n productList = customMediaList?.product || []\n sceneList = customMediaList?.scenarios || []\n keyFeaturesList = customMediaList?.keyFeatures || []\n videoList = customMediaList?.video || []\n } else {\n productList = defaultMediaData?.productList\n sceneList = defaultMediaData?.sceneList\n keyFeaturesList = defaultMediaData?.keyFeaturesList\n videoList = defaultMediaData?.videoList\n }\n\n const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n productList: productList,\n sceneList: sceneList,\n keyFeaturesList: keyFeaturesList,\n videoList: videoList,\n }\n\n const galleryTabs = useMemo(() => {\n const productTab =\n product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n return productTab\n ?.map((item: any) => ({\n ...item,\n galleries: galleryMap[item?.galleries] || [],\n }))\n .filter((item: any) => item.galleries.length > 0)\n }, [product?.payload, galleryMap])\n\n // \u4E3A\u6BCF\u4E2A galleryTab \u521B\u5EFA\u5BF9\u5E94\u7684 ref\n const gallerySwiperRefs = useRef<{ [key: string]: SwiperRef | null }>({})\n\n const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n\n // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n const renderGalleryForTab = (tab: any, index: number) => {\n switch (tab?.galleryTabType) {\n case GalleryTabType.GALLERY_IMAGE:\n return (\n <ProductGalleryTabImage\n {...tab}\n onCurrentTabLoopEnd={() => {\n setActiveGalleryTab(galleryTabs?.[index])\n }}\n onCurrentTabLoopStart={() => {\n setActiveGalleryTab(galleryTabs?.[index])\n }}\n index={index}\n />\n )\n case GalleryTabType.GALLERY_VIDEO:\n return <ProductGalleryTabVideo {...tab} />\n // case GalleryTabType.GALLERY_3D_VIEW:\n // return <ProductGalleryTab3DView {...item} />\n default:\n return null\n }\n }\n\n return (\n <div id=\"ipc-product-gallery\">\n <Root className=\"relative\" defaultValue={galleryTabs?.[0]?.tabValue}>\n {/* <Swiper\n className=\"h-[420px] laptop:h-[700px] bg-[#EAEAEC] rounded-2xl\"\n onSwiper={setSwiper}\n loop={true}\n // onProgress={swiper => {\n // setStart(swiper.isBeginning)\n // setEnd(swiper.isEnd)\n // }}\n modules={[Mousewheel]}\n mousewheel={{\n forceToAxis: true,\n }}\n >\n {galleryTabs.map((item, index) => {\n return (\n <Content forceMount key={item.tabValue} value={item.tabValue}>\n <SwiperSlide key={index}>{renderGalleryForTab(activeGalleryTab)}</SwiperSlide>\n </Content>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'absolute top-1/2 left-6 z-10 -translate-y-1/2 cursor-pointer',\n `ipc-product-gallery-custom-swiper-button-prev`\n )}\n >\n <SwiperLeftButtonIcon\n className=\"size-12\"\n onClick={() => {\n if (activeGalleryTab?.tabValue) {\n const currentRef = gallerySwiperRefs.current[activeGalleryTab.tabValue]\n currentRef?.swiper?.slidePrev()\n }\n }}\n />\n </div>\n <div\n className={cn(\n 'absolute top-1/2 right-6 z-10 -translate-y-1/2 cursor-pointer',\n `ipc-product-gallery-custom-swiper-button-next`\n )}\n >\n <SwiperRightButtonIcon\n className=\"size-12\"\n onClick={() => {\n if (activeGalleryTab?.tabValue) {\n const currentRef = gallerySwiperRefs.current[activeGalleryTab.tabValue]\n currentRef?.swiper?.slideNext()\n }\n }}\n />\n </div> */}\n <div className=\"h-[420px] tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative \">\n {galleryTabs.map((item: any, index: number) => {\n return (\n <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n {renderGalleryForTab(item, index)}\n </Content>\n )\n })}\n </div>\n <ProductGalleryTab\n galleryTabs={galleryTabs}\n activeGalleryTab={activeGalleryTab}\n setActiveGalleryTab={setActiveGalleryTab}\n />\n </Root>\n </div>\n )\n}\n\nconst ProductGalleryTab = ({\n galleryTabs,\n activeGalleryTab,\n setActiveGalleryTab,\n}: {\n galleryTabs: GalleryTabItemProps[]\n activeGalleryTab: GalleryTabItemProps\n setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n}) => {\n const { product } = useProductContext()\n return (\n <div className=\"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static\">\n <List\n className=\"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <div className=\"whitespace-nowrap\">\n {galleryTabs?.map(item => {\n return (\n <Trigger\n className={cn(\n 'lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n )}\n onClick={() => setActiveGalleryTab(item)}\n key={item.tabValue}\n value={item.tabValue}\n >\n {item.tabLabel}\n </Trigger>\n )\n })}\n </div>\n </List>\n <div className=\"laptop:gap-2 hidden laptop:flex\">\n {product.metafields?.global?.specifications && (\n <>\n <SpecsModal /> | <CompareModal />\n </>\n )}\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, totalSavings } = useProductContext()\n const paginationRef = useRef<HTMLDivElement>(null)\n const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n const [isStart, setStart] = useState(true)\n const [isEnd, setEnd] = useState(false)\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n return (\n <div className=\"h-full\">\n <Swiper\n ref={ref}\n className=\"h-full\"\n navigation={{\n nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n }}\n onSwiper={setSwiper}\n onProgress={swiper => {\n setStart(swiper.isBeginning)\n setEnd(swiper.isEnd)\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n onSlideChange={swiper => {\n if (swiper) {\n if (swiper.isEnd) {\n props?.onCurrentTabLoopEnd?.()\n } else if (swiper.isBeginning) {\n props?.onCurrentTabLoopStart?.()\n }\n }\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <Picture\n source={item?.image?.url}\n alt={item?.image?.altText}\n className=\"h-full\"\n imgClassName=\"object-contain h-full \"\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n {variant.availableForSale && !!totalSavings && !props.index && (\n <Badge\n size=\"lg\"\n className=\"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6\"\n >\n {`${formatPrice({\n amount: totalSavings,\n currencyCode: variant?.price?.currencyCode,\n locale: locale,\n })} ${copyWriting?.off}`}\n </Badge>\n )}\n <div\n className={cn(\n 'hidden tablet:block tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer',\n `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n )}\n >\n <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n <div\n className={cn(\n 'hidden tablet:block tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer',\n `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n {/* {props?.galleries?.map((item, jIndex) => {\n return (\n <Picture\n key={props?.id + 'SwiperSlideItem' + jIndex}\n source={item?.image?.url}\n alt={item?.image?.altText}\n className=\"h-full\"\n imgClassName=\"object-cover h-full\"\n />\n )\n })} */}\n <div className=\"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-[6] desktop:left-[6]\">\n <div className=\"hidden tablet:block\">\n <Swiper\n className=\"flex items-center justify-between\"\n onSwiper={setThumbsSwiper}\n spaceBetween={12}\n slidesPerView={6}\n freeMode={true}\n watchSlidesProgress={true}\n modules={[Navigation, Thumbs]}\n >\n {props?.galleries?.map((item, jIndex) => (\n <SwiperSlide\n key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n className=\"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:border-brand\"\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.altText}\n className=\"size-10 lg-desktop:size-12 rounded\"\n imgClassName=\"object-contain h-full\"\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n {!props?.index && (\n <div className=\"flex items-center gap-2\">\n <Picture\n source={props?.comment?.avatar?.url}\n className=\"size-10 rounded-full shrink-0\"\n imgClassName=\"object-cover \"\n />\n <Text\n html={props?.comment?.content}\n className=\"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#6D6D6F] line-clamp-2\"\n />\n </div>\n )}\n </div>\n <div ref={paginationRef} className=\"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10\" />\n </div>\n )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n return (\n <div className=\"h-full\">\n <Swiper\n className=\"h-full\"\n navigation={{\n nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <video controls className=\"size-full\">\n <track kind=\"captions\" />\n <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n </video>\n </SwiperSlide>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'hidden tablet:block tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer',\n `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n )}\n >\n <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n <div\n className={cn(\n 'hidden tablet:block tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer',\n `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n return <div>3D View</div>\n}\n\nexport default ProductGallery\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n type RefObject,\n useEffect,\n type Dispatch,\n type SetStateAction,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useProductContext } from '../../../ProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n <path\n d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n <path\n d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst ProductGallery = () => {\n const { copyWriting } = useAiuiContext()\n const { product, variant, isMobile } = useProductContext()\n const defaultMediaData = useVariantMedia({ product, variant })\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n const customMediaList = variant?.metafields?.component?.custom_media_list\n let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n if (customMediaList && customMediaList?.available) {\n productList = customMediaList?.product || []\n sceneList = customMediaList?.scenarios || []\n keyFeaturesList = customMediaList?.keyFeatures || []\n videoList = customMediaList?.video || []\n } else {\n productList = defaultMediaData?.productList\n sceneList = defaultMediaData?.sceneList\n keyFeaturesList = defaultMediaData?.keyFeaturesList\n videoList = defaultMediaData?.videoList\n }\n\n const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n productList: productList,\n sceneList: sceneList,\n keyFeaturesList: keyFeaturesList,\n videoList: videoList,\n }\n\n const galleryTabs = useMemo(() => {\n const productTab =\n product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n return productTab\n ?.map((item: any) => ({\n ...item,\n galleries: galleryMap[item?.galleries] || [],\n }))\n .filter((item: any) => item.galleries.length > 0)\n }, [product?.payload, galleryMap])\n\n // \u4E3A\u6BCF\u4E2A galleryTab \u521B\u5EFA\u5BF9\u5E94\u7684 ref\n const gallerySwiperRefs = useRef<{ [key: string]: SwiperRef | null }>({})\n\n const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n\n // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n const renderGalleryForTab = (tab: any, index: number) => {\n switch (tab?.galleryTabType) {\n case GalleryTabType.GALLERY_IMAGE:\n return (\n <ProductGalleryTabImage\n {...tab}\n onCurrentTabLoopEnd={() => {\n setActiveGalleryTab(galleryTabs?.[index])\n }}\n onCurrentTabLoopStart={() => {\n setActiveGalleryTab(galleryTabs?.[index])\n }}\n index={index}\n />\n )\n case GalleryTabType.GALLERY_VIDEO:\n return <ProductGalleryTabVideo {...tab} />\n // case GalleryTabType.GALLERY_3D_VIEW:\n // return <ProductGalleryTab3DView {...item} />\n default:\n return null\n }\n }\n\n return (\n <div id=\"ipc-product-gallery\">\n <Root className=\"relative\" defaultValue={galleryTabs?.[0]?.tabValue}>\n {/* <Swiper\n className=\"h-[420px] laptop:h-[700px] bg-[#EAEAEC] rounded-2xl\"\n onSwiper={setSwiper}\n loop={true}\n // onProgress={swiper => {\n // setStart(swiper.isBeginning)\n // setEnd(swiper.isEnd)\n // }}\n modules={[Mousewheel]}\n mousewheel={{\n forceToAxis: true,\n }}\n >\n {galleryTabs.map((item, index) => {\n return (\n <Content forceMount key={item.tabValue} value={item.tabValue}>\n <SwiperSlide key={index}>{renderGalleryForTab(activeGalleryTab)}</SwiperSlide>\n </Content>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'absolute top-1/2 left-6 z-10 -translate-y-1/2 cursor-pointer',\n `ipc-product-gallery-custom-swiper-button-prev`\n )}\n >\n <SwiperLeftButtonIcon\n className=\"size-12\"\n onClick={() => {\n if (activeGalleryTab?.tabValue) {\n const currentRef = gallerySwiperRefs.current[activeGalleryTab.tabValue]\n currentRef?.swiper?.slidePrev()\n }\n }}\n />\n </div>\n <div\n className={cn(\n 'absolute top-1/2 right-6 z-10 -translate-y-1/2 cursor-pointer',\n `ipc-product-gallery-custom-swiper-button-next`\n )}\n >\n <SwiperRightButtonIcon\n className=\"size-12\"\n onClick={() => {\n if (activeGalleryTab?.tabValue) {\n const currentRef = gallerySwiperRefs.current[activeGalleryTab.tabValue]\n currentRef?.swiper?.slideNext()\n }\n }}\n />\n </div> */}\n <div className=\"h-[420px] tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative \">\n {galleryTabs.map((item: any, index: number) => {\n return (\n <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n {renderGalleryForTab(item, index)}\n </Content>\n )\n })}\n </div>\n <ProductGalleryTab\n galleryTabs={galleryTabs}\n activeGalleryTab={activeGalleryTab}\n setActiveGalleryTab={setActiveGalleryTab}\n />\n </Root>\n </div>\n )\n}\n\nconst ProductGalleryTab = ({\n galleryTabs,\n activeGalleryTab,\n setActiveGalleryTab,\n}: {\n galleryTabs: GalleryTabItemProps[]\n activeGalleryTab: GalleryTabItemProps\n setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n}) => {\n const { product } = useProductContext()\n return (\n <div className=\"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static\">\n <List\n className=\"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <div className=\"whitespace-nowrap\">\n {galleryTabs?.map(item => {\n return (\n <Trigger\n className={cn(\n 'lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n )}\n onClick={() => setActiveGalleryTab(item)}\n key={item.tabValue}\n value={item.tabValue}\n >\n {item.tabLabel}\n </Trigger>\n )\n })}\n </div>\n </List>\n <div className=\"laptop:gap-2 hidden laptop:flex\">\n {product.metafields?.global?.specifications && (\n <>\n <SpecsModal /> | <CompareModal />\n </>\n )}\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, totalSavings } = useProductContext()\n const paginationRef = useRef<HTMLDivElement>(null)\n const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n const [isStart, setStart] = useState(true)\n const [isEnd, setEnd] = useState(false)\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n return (\n <div className=\"h-full\">\n <Swiper\n ref={ref}\n className=\"h-full\"\n navigation={{\n nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n }}\n onSwiper={setSwiper}\n onProgress={swiper => {\n setStart(swiper.isBeginning)\n setEnd(swiper.isEnd)\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n onSlideChange={swiper => {\n if (swiper) {\n if (swiper.isEnd) {\n props?.onCurrentTabLoopEnd?.()\n } else if (swiper.isBeginning) {\n props?.onCurrentTabLoopStart?.()\n }\n }\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <Picture\n source={item?.image?.url}\n alt={item?.image?.altText}\n className=\"h-full\"\n imgClassName=\"object-contain h-full \"\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n {variant.availableForSale && !!totalSavings && !props.index && (\n <Badge\n size=\"lg\"\n className=\"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6\"\n >\n {`${formatPrice({\n amount: totalSavings,\n currencyCode: variant?.price?.currencyCode,\n locale: locale,\n })} ${copyWriting?.off}`}\n </Badge>\n )}\n <div\n className={cn(\n 'hidden tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -translate-y-1/2 cursor-pointer',\n `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n )}\n >\n <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n <div\n className={cn(\n 'hidden tablet:block tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -translate-y-1/2 cursor-pointer',\n `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n {/* {props?.galleries?.map((item, jIndex) => {\n return (\n <Picture\n key={props?.id + 'SwiperSlideItem' + jIndex}\n source={item?.image?.url}\n alt={item?.image?.altText}\n className=\"h-full\"\n imgClassName=\"object-cover h-full\"\n />\n )\n })} */}\n <div className=\"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6\">\n <div className=\"hidden tablet:block\">\n <Swiper\n className=\"flex items-center justify-between\"\n onSwiper={setThumbsSwiper}\n spaceBetween={12}\n slidesPerView={6}\n freeMode={true}\n watchSlidesProgress={true}\n modules={[Navigation, Thumbs]}\n >\n {props?.galleries?.map((item, jIndex) => (\n <SwiperSlide\n key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n className=\"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:border-brand\"\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.altText}\n className=\"size-10 lg-desktop:size-12 rounded\"\n imgClassName=\"object-contain h-full\"\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n {!props?.index && (\n <div className=\"flex items-center gap-2\">\n <Picture\n source={props?.comment?.avatar?.url}\n className=\"size-10 rounded-full shrink-0\"\n imgClassName=\"object-cover \"\n />\n <Text\n html={props?.comment?.content}\n className=\"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#6D6D6F] line-clamp-2\"\n />\n </div>\n )}\n </div>\n <div ref={paginationRef} className=\"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10\" />\n </div>\n )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n return (\n <div className=\"h-full\">\n <Swiper\n className=\"h-full\"\n navigation={{\n nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <video controls className=\"size-full\">\n <track kind=\"captions\" />\n <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n </video>\n </SwiperSlide>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'hidden tablet:block tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer',\n `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n )}\n >\n <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n <div\n className={cn(\n 'hidden tablet:block tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer',\n `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n return <div>3D View</div>\n}\n\nexport default ProductGallery\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ProductGallery_exports", "__export", "ProductGallery_default", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_components", "import_react", "import_modules", "import_helpers", "import_types", "import_react_tabs", "import_ProductProvider", "import_use_variant_media", "import_SpecsModal", "import_CompareModal", "import_utils", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "isMobile", "defaultMediaData", "swiper", "setSwiper", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "item", "gallerySwiperRefs", "activeGalleryTab", "setActiveGalleryTab", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "CompareModal", "ref", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "jIndex", "ProductGalleryTab3DView"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var I=Object.create;var N=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var V=(i,a)=>{for(var l in a)N(i,l,{get:a[l],enumerable:!0})},G=(i,a,l,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let
|
|
1
|
+
"use strict";var I=Object.create;var N=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var V=(i,a)=>{for(var l in a)N(i,l,{get:a[l],enumerable:!0})},G=(i,a,l,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of R(a))!O.call(i,s)&&s!==l&&N(i,s,{get:()=>a[s],enumerable:!(o=L(a,s))||o.enumerable});return i};var S=(i,a,l)=>(l=i!=null?I(A(i)):{},G(a||!i||!i.__esModule?N(l,"default",{value:i,enumerable:!0}):l,i)),$=i=>G(N({},"__esModule",{value:!0}),i);var H={};V(H,{default:()=>E});module.exports=$(H);var e=require("react/jsx-runtime"),t=require("../../../../../components"),b=require("../../../ProductProvider"),f=require("react"),x=require("../../../utils"),y=require("../../../../AiuiProvider"),C=require("../../../../../helpers"),z=S(require("decimal.js"));const T=({})=>{const{locale:i="us",copyWriting:a}=(0,y.useAiuiContext)(),{product:l,variant:o,finalPrice:s,comparePrice:m,coupon:r,selectedOptions:d,onAddToCart:k,onBuyNow:h,savingDetail:g,joinedRecommendBuyProducts:n,setJoinedRecommendBuyProducts:u}=(0,b.useProductContext)();if(!o.availableForSale)return null;const{bundleVariant:B,giftVariant:w}=J()||{},[c,v]=(0,f.useState)();(0,f.useEffect)(()=>{v({bundle:n.bundle?void 0:B,gift:n.gift?void 0:w})},[B,w,n]);const D=(0,f.useMemo)(()=>new z.default(m).minus(g.freeGift).toNumber(),[m,g]);return(0,e.jsx)("div",{className:"ipc-product-summary bg-[#F5F5F7] mt-16",children:(0,e.jsxs)(t.Grid,{className:"px-4 py-6 tablet:p-8",children:[(0,e.jsxs)(t.GridItem,{className:"col-span-12 desktop:col-start-1 desktop:col-span-5",children:[(0,e.jsx)(t.Heading,{className:"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]",html:`${l.title} is ready <br/><span>Just the way you want it.</span>`}),(0,e.jsx)("div",{className:"aspect-[644/320]",children:(0,e.jsx)(t.Picture,{source:o.image?.url||l?.images?.[0]?.url,className:"h-full w-full",imgClassName:"object-contain h-full"})})]}),(0,e.jsxs)(t.GridItem,{className:"col-span-12 mt-8 desktop:col-start-7 laptop:mt-0 desktop:col-span-6 flex flex-col gap-6 justify-between",children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"shrink-0 flex items-center gap-4",children:[(0,e.jsx)(t.Picture,{source:o.image?.url||l?.images?.[0]?.url,className:"size-16 object-cover"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(t.Text,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:l.title}),(0,e.jsx)(t.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${d.color||d.colour||d.couleur}`})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(t.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,x.formatPrice)({amount:s,currencyCode:o.price.currencyCode,locale:i})}),r&&(0,e.jsx)(t.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:D,currencyCode:o.price.currencyCode,locale:i})})]})]}),n?.gift&&(0,e.jsx)(j,{giftOperation:p=>{u?.({...n,gift:void 0}),v?.({...c,gift:p})},giftStatus:!!n?.gift,gift:n?.gift}),n?.bundle&&(0,e.jsx)(F,{bundleOperation:p=>{u?.({...n,bundle:void 0}),v?.({...c,bundle:p})},bundleStatus:!!n?.bundle,bundleListItem:n?.bundle})]}),(c?.bundle||c?.gift)&&(0,e.jsxs)("div",{className:"mt-6",children:[(0,e.jsx)(t.Text,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),(0,e.jsxs)("div",{className:"flex flex-col gap-6 mt-6",children:[c?.gift&&(0,e.jsx)(j,{giftOperation:p=>{u?.({gift:p}),v?.({...c,gift:void 0})},giftStatus:!c?.gift,gift:c?.gift}),c?.bundle&&(0,e.jsx)(F,{bundleOperation:p=>{u?.({bundle:p}),v?.({...c,bundle:void 0})},bundleStatus:!c?.bundle,bundleListItem:c?.bundle})]})]})]}),(0,e.jsxs)("div",{className:"text-right",children:[(0,e.jsx)(t.Text,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${a?.totalPrice} ${(0,x.formatPrice)({amount:s,currencyCode:o.price.currencyCode,locale:i})}`}),r&&(0,e.jsx)(t.Text,{className:"text-base desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:D,currencyCode:o.price.currencyCode,locale:i})}),(0,e.jsxs)("div",{className:"flex gap-3 mt-2",children:[(0,e.jsx)(t.Button,{size:"lg",variant:"secondary",className:"w-1/2",onClick:()=>k?.(),children:a?.addToCart}),(0,e.jsx)(t.Button,{size:"lg",variant:"primary",className:"w-1/2",onClick:()=>h?.(),children:a?.shopNow})]})]})]})]})})},J=()=>{const{bundle:i,variant:a,checkedBundle:l,freeGift:o,checkedGift:s}=(0,b.useProductContext)();let m,r;const{bundleList:d}=i||{},{giftList:k=[]}=o||{},h=d?.filter(u=>u.variants.slice(1,u.variants.length).every(P=>P.variant.availableForSale))||[],[g]=h;m=l||g;const[n]=k?.filter(u=>u.availableForSale);return r=s||n,{bundleVariant:m,giftVariant:r}},F=({bundleOperation:i,bundleStatus:a,bundleListItem:l})=>{const{locale:o="us"}=(0,y.useAiuiContext)(),{variant:s,setCheckedBundle:m}=(0,b.useProductContext)(),r=l?.variants.filter(d=>d.variant.sku!==s.sku);return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[r?.map(d=>(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(t.Picture,{source:d?.variant?.image?.url,className:"size-16 object-cover"}),(0,e.jsx)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:(0,e.jsx)(t.Text,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:d.variant.product.title})})]},d.variant.id)),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-1 justify-center",children:[a&&(0,e.jsx)(t.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,x.formatPrice)({amount:r[0]?.price,locale:o,currencyCode:r[0]?.variant?.price?.currencyCode})}),(0,e.jsx)(t.Button,{size:a?"icon":"lg",variant:a?"link":"primary",onClick:()=>{m?.(a?void 0:l),i(l)},className:(0,C.cn)("shrink-0 size-auto",{underline:a}),children:a?"Remove":"Add +"})]})]})},j=({giftOperation:i,giftStatus:a,gift:l})=>{const{locale:o="us"}=(0,y.useAiuiContext)(),{freeGift:s,setCheckedGift:m}=(0,b.useProductContext)(),{freeLabel:r}=s||{};return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(t.Picture,{source:l?.image?.url,className:"size-16 object-cover"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(t.Text,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:l?.product?.title}),(0,e.jsx)(t.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${r}`})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-2 justify-center",children:[a&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(t.Text,{className:"text-base desktop:text-2xl font-bold",html:r}),(0,e.jsx)(t.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:l.price.amount,locale:o,currencyCode:l.price.currencyCode})})]}),(0,e.jsx)(t.Button,{size:a?"icon":"lg",variant:a?"link":"primary",onClick:()=>{m?.(a?void 0:l),i(l)},className:(0,C.cn)("shrink-0 size-auto",{underline:a}),children:a?"Remove":"Add +"})]})]})};var E=T;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductSummary/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components'\nimport type { ProductSummaryProps } from './types'\nimport { useProductContext } from '../../../ProductProvider'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils'\nimport { useAiuiContext } from '../../../../AiuiProvider'\nimport type { BundleListItem, ProductVariant } from '../../../types/product'\nimport { cn } from '../../../../../helpers'\nimport Decimal from 'decimal.js'\n\nconst ProductSummary = ({}: ProductSummaryProps) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const {\n product,\n variant,\n finalPrice,\n comparePrice,\n coupon,\n selectedOptions,\n onAddToCart,\n onBuyNow,\n savingDetail,\n joinedRecommendBuyProducts,\n setJoinedRecommendBuyProducts,\n } = useProductContext()\n\n const isAvailable = variant.availableForSale\n if (!isAvailable) return null\n\n const { bundleVariant, giftVariant } = useRecommendBuyProducts() || {}\n const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n bundle?: BundleListItem\n gift?: ProductVariant\n }>()\n\n useEffect(() => {\n setInitialRecommendBuyProducts({\n bundle: joinedRecommendBuyProducts.bundle ? undefined : bundleVariant,\n gift: joinedRecommendBuyProducts.gift ? undefined : giftVariant,\n })\n }, [bundleVariant, giftVariant, joinedRecommendBuyProducts])\n\n const comparePriceRemovedFreeGift = useMemo(\n () => new Decimal(comparePrice).minus(savingDetail.freeGift).toNumber(),\n [comparePrice, savingDetail]\n )\n\n return (\n <div className=\"ipc-product-summary bg-[#F5F5F7] mt-16\">\n <Grid className=\"px-4 py-6 tablet:p-8\">\n <GridItem className=\"col-span-12 desktop:col-start-1 desktop:col-span-5\">\n <Heading\n className=\"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]\"\n html={`${product.title} is ready <br/><span>Just the way you want it.</span>`}\n />\n <div className=\"aspect-[644/320]\">\n <Picture\n source={variant.image?.url || product?.images?.[0]?.url}\n className=\"h-full w-full\"\n imgClassName=\"object-contain h-full\"\n />\n </div>\n </GridItem>\n <GridItem className=\"col-span-12 mt-8 desktop:col-start-7 laptop:mt-0 desktop:col-span-6 flex flex-col gap-6 justify-between\">\n <div>\n <div className=\"flex flex-col gap-4\">\n <div className=\"flex items-center justify-between\">\n <div className=\"shrink-0 flex items-center gap-4\">\n <Picture source={variant.image?.url || product?.images?.[0]?.url} className=\"size-16 object-cover\" />\n <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n <Text\n className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n html={product.title}\n />\n <Text\n className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n html={`x1 | ${selectedOptions.color || selectedOptions.colour || selectedOptions.couleur}`}\n />\n </div>\n </div>\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"text-base desktop:text-2xl font-bold\"\n html={formatPrice({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}\n />\n {coupon && (\n <Text\n className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n html={formatPrice({\n amount: comparePriceRemovedFreeGift,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n </div>\n </div>\n {joinedRecommendBuyProducts?.gift && (\n <ProductGiftSummary\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, gift: undefined })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n }}\n giftStatus={!!joinedRecommendBuyProducts?.gift}\n gift={joinedRecommendBuyProducts?.gift}\n />\n )}\n {joinedRecommendBuyProducts?.bundle && (\n <ProductBundleSummary\n bundleOperation={bundle => {\n setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, bundle: undefined })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n }}\n bundleStatus={!!joinedRecommendBuyProducts?.bundle}\n bundleListItem={joinedRecommendBuyProducts?.bundle}\n />\n )}\n </div>\n {(initialRecommendBuyProducts?.bundle || initialRecommendBuyProducts?.gift) && (\n <div className=\"mt-6\">\n <Text className=\"text-sm desktop:text-[18px] font-bold\" html={'Recommend Buy'} />\n <div className=\"flex flex-col gap-6 mt-6\">\n {initialRecommendBuyProducts?.gift && (\n <ProductGiftSummary\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, gift })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n }}\n giftStatus={!initialRecommendBuyProducts?.gift}\n gift={initialRecommendBuyProducts?.gift}\n />\n )}\n {initialRecommendBuyProducts?.bundle && (\n <ProductBundleSummary\n bundleOperation={bundle => {\n setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, bundle })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n }}\n bundleStatus={!initialRecommendBuyProducts?.bundle}\n bundleListItem={initialRecommendBuyProducts?.bundle}\n />\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"text-right\">\n <Text\n className=\"laptop:text-xl desktop:text-2xl font-bold text-right\"\n html={`${copyWriting?.totalPrice} ${formatPrice({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}`}\n />\n\n {coupon && (\n <Text\n className=\"text-base desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]\"\n html={formatPrice({\n amount: comparePriceRemovedFreeGift,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n <div className=\"flex gap-3 mt-2\">\n <Button size=\"lg\" variant=\"secondary\" className=\"w-1/2\" onClick={() => onAddToCart?.()}>\n {copyWriting?.addToCart}\n </Button>\n <Button size=\"lg\" variant=\"primary\" className=\"w-1/2\" onClick={() => onBuyNow?.()}>\n {copyWriting?.shopNow}\n </Button>\n </div>\n </div>\n </GridItem>\n </Grid>\n </div>\n )\n}\n\nconst useRecommendBuyProducts = () => {\n const { bundle, variant, checkedBundle, freeGift, checkedGift } = useProductContext()\n let bundleVariant = undefined\n let giftVariant = undefined\n const { bundleList } = bundle || {}\n\n const { giftList = [] } = freeGift || {}\n\n const availableBundleList =\n bundleList?.filter(bundle =>\n bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n ) || []\n\n const [firstAvailableBundle] = availableBundleList\n bundleVariant = checkedBundle || firstAvailableBundle\n\n const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale)\n giftVariant = checkedGift || firstAvailableGift\n\n return { bundleVariant, giftVariant }\n}\n\nconst ProductBundleSummary = ({\n bundleOperation,\n bundleStatus,\n bundleListItem,\n}: {\n bundleOperation: (bundle: BundleListItem) => void\n bundleStatus: boolean\n bundleListItem: BundleListItem\n}) => {\n const { locale = 'us' } = useAiuiContext()\n const { variant, setCheckedBundle } = useProductContext()\n const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n return (\n <div className=\"flex items-center justify-between\">\n {bundleVariants?.map(bundleVariant => {\n return (\n <div className=\"flex items-center gap-4\" key={bundleVariant.variant.id}>\n <Picture source={bundleVariant?.variant?.image?.url} className=\"size-16 object-cover\" />\n <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n <Text\n className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n html={bundleVariant.variant.product.title}\n />\n </div>\n </div>\n )\n })}\n <div className=\"flex flex-col items-end gap-1 justify-center\">\n {bundleStatus && (\n <Text\n className=\"text-base desktop:text-2xl font-bold\"\n html={formatPrice({\n amount: bundleVariants[0]?.price,\n locale,\n currencyCode: bundleVariants[0]?.variant?.price?.currencyCode,\n })}\n />\n )}\n <Button\n size={bundleStatus ? 'icon' : 'lg'}\n variant={bundleStatus ? 'link' : 'primary'}\n onClick={() => {\n setCheckedBundle?.(bundleStatus ? undefined : bundleListItem)\n bundleOperation(bundleListItem)\n }}\n className={cn('shrink-0 size-auto', {\n underline: bundleStatus,\n })}\n >\n {bundleStatus ? 'Remove' : 'Add +'}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ProductGiftSummary = ({\n giftOperation,\n giftStatus,\n gift,\n}: {\n giftOperation: (gift: ProductVariant) => void\n giftStatus: boolean\n gift: ProductVariant\n}) => {\n const { locale = 'us' } = useAiuiContext()\n const { freeGift, setCheckedGift } = useProductContext()\n const { freeLabel } = freeGift || {}\n\n return (\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-4\">\n <Picture source={gift?.image?.url} className=\"size-16 object-cover\" />\n <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n <Text\n className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n html={gift?.product?.title}\n />\n <Text\n className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n html={`x1 | ${freeLabel}`}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end gap-2 justify-center\">\n {giftStatus && (\n <div className=\"flex items-center gap-1\">\n <Text className=\"text-base desktop:text-2xl font-bold\" html={freeLabel} />\n <Text\n className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n html={formatPrice({\n amount: gift.price.amount,\n locale,\n currencyCode: gift.price.currencyCode,\n })}\n />\n </div>\n )}\n <Button\n size={giftStatus ? 'icon' : 'lg'}\n variant={giftStatus ? 'link' : 'primary'}\n onClick={() => {\n setCheckedGift?.(giftStatus ? undefined : gift)\n giftOperation(gift)\n }}\n className={cn('shrink-0 size-auto', {\n underline: giftStatus,\n })}\n >\n {giftStatus ? 'Remove' : 'Add +'}\n </Button>\n </div>\n </div>\n )\n}\n\nexport default ProductSummary\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components'\nimport type { ProductSummaryProps } from './types'\nimport { useProductContext } from '../../../ProductProvider'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils'\nimport { useAiuiContext } from '../../../../AiuiProvider'\nimport type { BundleListItem, ProductVariant } from '../../../types/product'\nimport { cn } from '../../../../../helpers'\nimport Decimal from 'decimal.js'\n\nconst ProductSummary = ({}: ProductSummaryProps) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const {\n product,\n variant,\n finalPrice,\n comparePrice,\n coupon,\n selectedOptions,\n onAddToCart,\n onBuyNow,\n savingDetail,\n joinedRecommendBuyProducts,\n setJoinedRecommendBuyProducts,\n } = useProductContext()\n\n const isAvailable = variant.availableForSale\n if (!isAvailable) return null\n\n const { bundleVariant, giftVariant } = useRecommendBuyProducts() || {}\n const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n bundle?: BundleListItem\n gift?: ProductVariant\n }>()\n\n useEffect(() => {\n setInitialRecommendBuyProducts({\n bundle: joinedRecommendBuyProducts.bundle ? undefined : bundleVariant,\n gift: joinedRecommendBuyProducts.gift ? undefined : giftVariant,\n })\n }, [bundleVariant, giftVariant, joinedRecommendBuyProducts])\n\n const comparePriceRemovedFreeGift = useMemo(\n () => new Decimal(comparePrice).minus(savingDetail.freeGift).toNumber(),\n [comparePrice, savingDetail]\n )\n\n return (\n <div className=\"ipc-product-summary bg-[#F5F5F7] mt-16\">\n <Grid className=\"px-4 py-6 tablet:p-8\">\n <GridItem className=\"col-span-12 desktop:col-start-1 desktop:col-span-5\">\n <Heading\n className=\"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]\"\n html={`${product.title} is ready <br/><span>Just the way you want it.</span>`}\n />\n <div className=\"aspect-[644/320]\">\n <Picture\n source={variant.image?.url || product?.images?.[0]?.url}\n className=\"h-full w-full\"\n imgClassName=\"object-contain h-full\"\n />\n </div>\n </GridItem>\n <GridItem className=\"col-span-12 mt-8 desktop:col-start-7 laptop:mt-0 desktop:col-span-6 flex flex-col gap-6 justify-between\">\n <div>\n <div className=\"flex flex-col gap-4\">\n <div className=\"flex items-center justify-between\">\n <div className=\"shrink-0 flex items-center gap-4\">\n <Picture source={variant.image?.url || product?.images?.[0]?.url} className=\"size-16 object-cover\" />\n <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n <Text\n className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n html={product.title}\n />\n <Text\n className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n html={`x1 | ${selectedOptions.color || selectedOptions.colour || selectedOptions.couleur}`}\n />\n </div>\n </div>\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"text-base desktop:text-2xl font-bold\"\n html={formatPrice({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}\n />\n {coupon && (\n <Text\n className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n html={formatPrice({\n amount: comparePriceRemovedFreeGift,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n </div>\n </div>\n {joinedRecommendBuyProducts?.gift && (\n <ProductGiftSummary\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, gift: undefined })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n }}\n giftStatus={!!joinedRecommendBuyProducts?.gift}\n gift={joinedRecommendBuyProducts?.gift}\n />\n )}\n {joinedRecommendBuyProducts?.bundle && (\n <ProductBundleSummary\n bundleOperation={bundle => {\n setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, bundle: undefined })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n }}\n bundleStatus={!!joinedRecommendBuyProducts?.bundle}\n bundleListItem={joinedRecommendBuyProducts?.bundle}\n />\n )}\n </div>\n {(initialRecommendBuyProducts?.bundle || initialRecommendBuyProducts?.gift) && (\n <div className=\"mt-6\">\n <Text className=\"text-sm desktop:text-[18px] font-bold\" html={'Recommend Buy'} />\n <div className=\"flex flex-col gap-6 mt-6\">\n {initialRecommendBuyProducts?.gift && (\n <ProductGiftSummary\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({ gift })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n }}\n giftStatus={!initialRecommendBuyProducts?.gift}\n gift={initialRecommendBuyProducts?.gift}\n />\n )}\n {initialRecommendBuyProducts?.bundle && (\n <ProductBundleSummary\n bundleOperation={bundle => {\n setJoinedRecommendBuyProducts?.({ bundle })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n }}\n bundleStatus={!initialRecommendBuyProducts?.bundle}\n bundleListItem={initialRecommendBuyProducts?.bundle}\n />\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"text-right\">\n <Text\n className=\"laptop:text-xl desktop:text-2xl font-bold text-right\"\n html={`${copyWriting?.totalPrice} ${formatPrice({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}`}\n />\n\n {coupon && (\n <Text\n className=\"text-base desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]\"\n html={formatPrice({\n amount: comparePriceRemovedFreeGift,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n <div className=\"flex gap-3 mt-2\">\n <Button size=\"lg\" variant=\"secondary\" className=\"w-1/2\" onClick={() => onAddToCart?.()}>\n {copyWriting?.addToCart}\n </Button>\n <Button size=\"lg\" variant=\"primary\" className=\"w-1/2\" onClick={() => onBuyNow?.()}>\n {copyWriting?.shopNow}\n </Button>\n </div>\n </div>\n </GridItem>\n </Grid>\n </div>\n )\n}\n\nconst useRecommendBuyProducts = () => {\n const { bundle, variant, checkedBundle, freeGift, checkedGift } = useProductContext()\n let bundleVariant = undefined\n let giftVariant = undefined\n const { bundleList } = bundle || {}\n\n const { giftList = [] } = freeGift || {}\n\n const availableBundleList =\n bundleList?.filter(bundle =>\n bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n ) || []\n\n const [firstAvailableBundle] = availableBundleList\n bundleVariant = checkedBundle || firstAvailableBundle\n\n const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale)\n giftVariant = checkedGift || firstAvailableGift\n\n return { bundleVariant, giftVariant }\n}\n\nconst ProductBundleSummary = ({\n bundleOperation,\n bundleStatus,\n bundleListItem,\n}: {\n bundleOperation: (bundle: BundleListItem) => void\n bundleStatus: boolean\n bundleListItem: BundleListItem\n}) => {\n const { locale = 'us' } = useAiuiContext()\n const { variant, setCheckedBundle } = useProductContext()\n const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n return (\n <div className=\"flex items-center justify-between\">\n {bundleVariants?.map(bundleVariant => {\n return (\n <div className=\"flex items-center gap-4\" key={bundleVariant.variant.id}>\n <Picture source={bundleVariant?.variant?.image?.url} className=\"size-16 object-cover\" />\n <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n <Text\n className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n html={bundleVariant.variant.product.title}\n />\n </div>\n </div>\n )\n })}\n <div className=\"flex flex-col items-end gap-1 justify-center\">\n {bundleStatus && (\n <Text\n className=\"text-base desktop:text-2xl font-bold\"\n html={formatPrice({\n amount: bundleVariants[0]?.price,\n locale,\n currencyCode: bundleVariants[0]?.variant?.price?.currencyCode,\n })}\n />\n )}\n <Button\n size={bundleStatus ? 'icon' : 'lg'}\n variant={bundleStatus ? 'link' : 'primary'}\n onClick={() => {\n setCheckedBundle?.(bundleStatus ? undefined : bundleListItem)\n bundleOperation(bundleListItem)\n }}\n className={cn('shrink-0 size-auto', {\n underline: bundleStatus,\n })}\n >\n {bundleStatus ? 'Remove' : 'Add +'}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ProductGiftSummary = ({\n giftOperation,\n giftStatus,\n gift,\n}: {\n giftOperation: (gift: ProductVariant) => void\n giftStatus: boolean\n gift: ProductVariant\n}) => {\n const { locale = 'us' } = useAiuiContext()\n const { freeGift, setCheckedGift } = useProductContext()\n const { freeLabel } = freeGift || {}\n\n return (\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-4\">\n <Picture source={gift?.image?.url} className=\"size-16 object-cover\" />\n <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n <Text\n className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n html={gift?.product?.title}\n />\n <Text\n className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n html={`x1 | ${freeLabel}`}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end gap-2 justify-center\">\n {giftStatus && (\n <div className=\"flex items-center gap-1\">\n <Text className=\"text-base desktop:text-2xl font-bold\" html={freeLabel} />\n <Text\n className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n html={formatPrice({\n amount: gift.price.amount,\n locale,\n currencyCode: gift.price.currencyCode,\n })}\n />\n </div>\n )}\n <Button\n size={giftStatus ? 'icon' : 'lg'}\n variant={giftStatus ? 'link' : 'primary'}\n onClick={() => {\n setCheckedGift?.(giftStatus ? undefined : gift)\n giftOperation(gift)\n }}\n className={cn('shrink-0 size-auto', {\n underline: giftStatus,\n })}\n >\n {giftStatus ? 'Remove' : 'Add +'}\n </Button>\n </div>\n </div>\n )\n}\n\nexport default ProductSummary\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ProductSummary_exports", "__export", "ProductSummary_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_ProductProvider", "import_react", "import_utils", "import_AiuiProvider", "import_helpers", "import_decimal", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "onAddToCart", "onBuyNow", "savingDetail", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "bundleVariant", "giftVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "comparePriceRemovedFreeGift", "Decimal", "ProductGiftSummary", "gift", "ProductBundleSummary", "bundle", "checkedBundle", "freeGift", "checkedGift", "bundleList", "giftList", "availableBundleList", "v", "firstAvailableBundle", "firstAvailableGift", "bundleOperation", "bundleStatus", "bundleListItem", "setCheckedBundle", "bundleVariants", "giftOperation", "giftStatus", "setCheckedGift", "freeLabel"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import type { ProductVariant, FreeGift, Bundle } from '../types/product';
|
|
2
|
+
interface BenefitsParams {
|
|
3
|
+
variant: ProductVariant;
|
|
4
|
+
}
|
|
5
|
+
interface BenefitItemConfig<T extends Record<string, any> = Record<string, any>> {
|
|
6
|
+
enable: boolean;
|
|
7
|
+
config?: T;
|
|
8
|
+
}
|
|
9
|
+
interface BenefitsResult {
|
|
10
|
+
/**
|
|
11
|
+
* 通用优惠券
|
|
12
|
+
*/
|
|
13
|
+
commonCoupon?: BenefitItemConfig;
|
|
14
|
+
/**
|
|
15
|
+
* 买赠
|
|
16
|
+
*/
|
|
17
|
+
freeGift: BenefitItemConfig<FreeGift>;
|
|
18
|
+
/**
|
|
19
|
+
* 捆绑折扣
|
|
20
|
+
*/
|
|
21
|
+
bundle: BenefitItemConfig<Bundle>;
|
|
22
|
+
/**
|
|
23
|
+
* 会员价
|
|
24
|
+
*/
|
|
25
|
+
memberDiscount: BenefitItemConfig;
|
|
26
|
+
/**
|
|
27
|
+
* 积分抵现
|
|
28
|
+
*/
|
|
29
|
+
creditsRedemption: BenefitItemConfig;
|
|
30
|
+
/**
|
|
31
|
+
* 高标物流
|
|
32
|
+
*/
|
|
33
|
+
paidShipping: BenefitItemConfig;
|
|
34
|
+
/**
|
|
35
|
+
* 满赠
|
|
36
|
+
*/
|
|
37
|
+
fullGift: BenefitItemConfig;
|
|
38
|
+
/**
|
|
39
|
+
* 满减折扣
|
|
40
|
+
*/
|
|
41
|
+
levelDiscount: BenefitItemConfig;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* 商品权益
|
|
45
|
+
* 获取当前sku 所有的权益
|
|
46
|
+
* 包括 通用优惠券,会员价,满减,捆绑折扣,买赠 ,满赠 ,积分抵现
|
|
47
|
+
* @returns
|
|
48
|
+
*/
|
|
49
|
+
export declare const useBenefits: ({ variant, }: BenefitsParams) => BenefitsResult;
|
|
50
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var x=(e,n)=>{for(var l in n)u(e,l,{get:n[l],enumerable:!0})},D=(e,n,l,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of C(n))!I.call(e,t)&&t!==l&&u(e,t,{get:()=>n[t],enumerable:!(i=h(n,t))||i.enumerable});return e};var G=e=>D(u({},"__esModule",{value:!0}),e);var R={};x(R,{useBenefits:()=>P});module.exports=G(R);var m=require("../ProductProvider"),d=require("../utils/helper"),p=require("../../AiuiProvider/index.js");const P=({variant:e})=>{const{coupon:n,product:l,bundle:i,freeGift:t,memberFunctionResult:a,creditsRedemptionAmount:s}=(0,m.useProductContext)(),{trackingData:f}=(0,p.useAiuiContext)(),r=Math.max(a?.withCouponMemberTotalSave??0,a?.withoutCouponMaxMemberTotalSave??0),g=!!(f?.paidShipping&&e.requiresShipping&&!e?.metafields?.global?.presell&&!e?.metafields?.global?.HideShipping),c=f?.freeGift,b=c?.excludeProducts?.map(o=>typeof o=="object"&&"sku"in o?o.sku:o)??[],B=f?.levelDiscount&&(0,d.checkItemAvailableForProduct)({product:l,variant:e,item:f?.levelDiscount});return{commonCoupon:{enable:!!n,config:n??{}},freeGift:{enable:!!t&&!!t?.giftList?.length,config:t},bundle:{enable:!!i&&!!i?.bundleList?.length&&Math.max(...i?.bundleList?.map(o=>o.savings??0))>0,config:i},memberDiscount:{enable:r>0,config:{amount:r,description:a?.labels?.find(o=>o.key==="benefit_tab_string")?.value}},creditsRedemption:{enable:!!s&&s>0,config:{amount:s,label:f?.creditsRedemptionLabel}},paidShipping:{enable:g,config:{}},fullGift:{enable:!!(c&&!b.includes(e.sku)),config:c??{}},levelDiscount:{enable:!!B,config:f?.levelDiscount??{}}}};
|
|
2
|
+
//# sourceMappingURL=useBenefits.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../src/biz-components/Listing/hooks/useBenefits.ts"],
|
|
4
|
+
"sourcesContent": ["import { useProductContext } from '../ProductProvider'\nimport type { ProductVariant, FreeGift, Bundle } from '../types/product'\nimport { checkItemAvailableForProduct } from '../utils/helper'\n\n\nimport { useAiuiContext } from '../../AiuiProvider/index.js'\n\ninterface BenefitsParams {\n variant: ProductVariant\n}\n\ninterface BenefitItemConfig<T extends Record<string, any> = Record<string, any>> {\n enable: boolean\n config?: T // \u539F\u59CB\u914D\u7F6E\n}\n\ninterface BenefitsResult {\n /**\n * \u901A\u7528\u4F18\u60E0\u5238\n */\n commonCoupon?: BenefitItemConfig\n /**\n * \u4E70\u8D60\n */\n freeGift: BenefitItemConfig<FreeGift>\n /**\n * \u6346\u7ED1\u6298\u6263\n */\n bundle: BenefitItemConfig<Bundle>\n /**\n * \u4F1A\u5458\u4EF7\n */\n memberDiscount: BenefitItemConfig\n /**\n * \u79EF\u5206\u62B5\u73B0\n */\n creditsRedemption: BenefitItemConfig\n /**\n * \u9AD8\u6807\u7269\u6D41\n */\n paidShipping: BenefitItemConfig\n\n /**\n * \u6EE1\u8D60\n */\n fullGift: BenefitItemConfig\n\n /**\n * \u6EE1\u51CF\u6298\u6263\n */\n levelDiscount: BenefitItemConfig\n}\n\n/**\n * \u5546\u54C1\u6743\u76CA\n * \u83B7\u53D6\u5F53\u524Dsku \u6240\u6709\u7684\u6743\u76CA\n * \u5305\u62EC \u901A\u7528\u4F18\u60E0\u5238\uFF0C\u4F1A\u5458\u4EF7\uFF0C\u6EE1\u51CF\uFF0C\u6346\u7ED1\u6298\u6263\uFF0C\u4E70\u8D60 \uFF0C\u6EE1\u8D60 \uFF0C\u79EF\u5206\u62B5\u73B0\n * @returns\n */\nexport const useBenefits = ({\n variant,\n}: BenefitsParams): BenefitsResult => {\n const { coupon, product, bundle, freeGift, memberFunctionResult, creditsRedemptionAmount } = useProductContext()\n\n const { trackingData } = useAiuiContext()\n\n const total = Math.max(\n memberFunctionResult?.withCouponMemberTotalSave ?? 0,\n memberFunctionResult?.withoutCouponMaxMemberTotalSave ?? 0\n )\n\n // \u9AD8\u6807\u7269\u6D41\n const showPaidShipping = Boolean(\n trackingData?.paidShipping &&\n variant.requiresShipping &&\n !variant?.metafields?.global?.presell &&\n !variant?.metafields?.global?.HideShipping\n )\n\n // \u811A\u672C\u6EE1\u8D60\n const fullGift = trackingData?.freeGift\n const excludeProducts =\n fullGift?.excludeProducts?.map((item: any) => (typeof item === 'object' && 'sku' in item ? item.sku : item)) ?? []\n\n const showLevelDiscount =\n trackingData?.levelDiscount &&\n checkItemAvailableForProduct({ product, variant, item: trackingData?.levelDiscount })\n\n return {\n commonCoupon: {\n enable: Boolean(coupon),\n config: coupon ?? {},\n },\n freeGift: {\n enable: Boolean(freeGift) && !!freeGift?.giftList?.length,\n config: freeGift,\n },\n bundle: {\n enable:\n Boolean(bundle) &&\n !!bundle?.bundleList?.length &&\n Math.max(...bundle?.bundleList?.map(item => item.savings ?? 0)) > 0, // \u6709\u4F18\u60E0\u624D\u5C55\u793A\n config: bundle,\n },\n memberDiscount: {\n enable: total > 0,\n config: {\n amount: total,\n description: memberFunctionResult?.labels?.find((item: any) => item.key === 'benefit_tab_string')?.value,\n },\n },\n creditsRedemption: {\n enable: Boolean(creditsRedemptionAmount) && creditsRedemptionAmount! > 0,\n config: { amount: creditsRedemptionAmount, label: trackingData?.creditsRedemptionLabel },\n },\n paidShipping: {\n enable: showPaidShipping,\n config: {},\n },\n fullGift: {\n enable: Boolean(fullGift && !excludeProducts.includes(variant.sku)),\n config: fullGift ?? {},\n },\n levelDiscount: {\n enable: Boolean(showLevelDiscount),\n config: trackingData?.levelDiscount ?? {},\n },\n }\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAkC,8BAElCC,EAA6C,2BAG7CC,EAA+B,uCAsDxB,MAAMJ,EAAc,CAAC,CAC1B,QAAAK,CACF,IAAsC,CACpC,KAAM,CAAE,OAAAC,EAAQ,QAAAC,EAAS,OAAAC,EAAQ,SAAAC,EAAU,qBAAAC,EAAsB,wBAAAC,CAAwB,KAAI,qBAAkB,EAEzG,CAAE,aAAAC,CAAa,KAAI,kBAAe,EAElCC,EAAQ,KAAK,IACjBH,GAAsB,2BAA6B,EACnDA,GAAsB,iCAAmC,CAC3D,EAGMI,EAAmB,GACvBF,GAAc,cACZP,EAAQ,kBACR,CAACA,GAAS,YAAY,QAAQ,SAC9B,CAACA,GAAS,YAAY,QAAQ,cAI5BU,EAAWH,GAAc,SACzBI,EACJD,GAAU,iBAAiB,IAAKE,GAAe,OAAOA,GAAS,UAAY,QAASA,EAAOA,EAAK,IAAMA,CAAK,GAAK,CAAC,EAE7GC,EACJN,GAAc,kBACd,gCAA6B,CAAE,QAAAL,EAAS,QAAAF,EAAS,KAAMO,GAAc,aAAc,CAAC,EAEtF,MAAO,CACL,aAAc,CACZ,OAAQ,EAAQN,EAChB,OAAQA,GAAU,CAAC,CACrB,EACA,SAAU,CACR,OAAQ,EAAQG,GAAa,CAAC,CAACA,GAAU,UAAU,OACnD,OAAQA,CACV,EACA,OAAQ,CACN,OACE,EAAQD,GACR,CAAC,CAACA,GAAQ,YAAY,QACtB,KAAK,IAAI,GAAGA,GAAQ,YAAY,IAAIS,GAAQA,EAAK,SAAW,CAAC,CAAC,EAAI,EACpE,OAAQT,CACV,EACA,eAAgB,CACd,OAAQK,EAAQ,EAChB,OAAQ,CACN,OAAQA,EACR,YAAaH,GAAsB,QAAQ,KAAMO,GAAcA,EAAK,MAAQ,oBAAoB,GAAG,KACrG,CACF,EACA,kBAAmB,CACjB,OAAQ,EAAQN,GAA4BA,EAA2B,EACvE,OAAQ,CAAE,OAAQA,EAAyB,MAAOC,GAAc,sBAAuB,CACzF,EACA,aAAc,CACZ,OAAQE,EACR,OAAQ,CAAC,CACX,EACA,SAAU,CACR,OAAQ,GAAQC,GAAY,CAACC,EAAgB,SAASX,EAAQ,GAAG,GACjE,OAAQU,GAAY,CAAC,CACvB,EACA,cAAe,CACb,OAAQ,EAAQG,EAChB,OAAQN,GAAc,eAAiB,CAAC,CAC1C,CACF,CACF",
|
|
6
|
+
"names": ["useBenefits_exports", "__export", "useBenefits", "__toCommonJS", "import_ProductProvider", "import_helper", "import_AiuiProvider", "variant", "coupon", "product", "bundle", "freeGift", "memberFunctionResult", "creditsRedemptionAmount", "trackingData", "total", "showPaidShipping", "fullGift", "excludeProducts", "item", "showLevelDiscount"]
|
|
7
|
+
}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
copyToClipboard: (text: string) => Promise<void>;
|
|
5
|
-
reset: () => void;
|
|
1
|
+
declare const useCopy: () => {
|
|
2
|
+
copy: (val: string) => void;
|
|
3
|
+
copied: boolean;
|
|
6
4
|
};
|
|
7
|
-
declare const useCopy: () => UseCopyReturn;
|
|
8
5
|
export default useCopy;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var a=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var d=(e,r)=>{for(var t in r)s(e,t,{get:r[t],enumerable:!0})},n=(e,r,t,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let c of p(r))!m.call(e,c)&&c!==t&&s(e,c,{get:()=>r[c],enumerable:!(u=f(r,c))||u.enumerable});return e};var y=(e,r,t)=>(t=e!=null?a(l(e)):{},n(r||!e||!e.__esModule?s(t,"default",{value:e,enumerable:!0}):t,e)),T=e=>n(s({},"__esModule",{value:!0}),e);var g={};d(g,{default:()=>b});module.exports=T(g);var i=y(require("copy-to-clipboard")),o=require("react");const C=()=>{const e=(0,o.useRef)(),[r,t]=(0,o.useState)(!1),u=(0,o.useCallback)(c=>{(0,i.default)(c),e.current&&clearTimeout(e.current),t(!0),e.current=setTimeout(()=>{t(!1)},2e3)},[]);return(0,o.useEffect)(()=>()=>{e.current&&clearTimeout(e.current)},[]),{copy:u,copied:r}};var b=C;
|
|
2
2
|
//# sourceMappingURL=useCopy.js.map
|