npm - @anker-in/headless-ui - Versions diffs - 1.1.17-alpha.1766026822963 → 1.1.17-alpha.1766030104268 - Mend

@anker-in/headless-ui 1.1.17-alpha.1766026822963 → 1.1.17-alpha.1766030104268

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.

Files changed (276) hide show

package/dist/esm/biz-components/HeroBanner/Countdown.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/Countdown.tsx"],
-  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/index.js'\nimport React, { useEffect, useRef, useState, useMemo } from 'react'\n\ntype Props = {\n  endDate: string // ISO UTC \u5B57\u7B26\u4E32\uFF0C\u4F8B\u5982 \"2025-11-02T07:42:00.000Z\"\n  endDate_tz?: string // \u65F6\u533A\uFF0C\u4F8B\u5982 \"Asia/Dhaka\"\uFF08\u53EF\u9009\uFF09\n  locale?: string // \u683C\u5F0F\u5316\u7528\u7684 locale\uFF0C\u9ED8\u8BA4 navigator.language\n  dateFormat?: any\n  onExpire?: () => void // \u5230\u671F\u56DE\u8C03\uFF08\u53EF\u9009\uFF09\n}\n\nconst pad = (n: number, len = 2) => String(Math.abs(n)).padStart(len, '0')\n\nconst baseClass =\n  'h-full flex-1 max-w-12 text-center bg-info-white text-xs text-info-primary overflow-hidden lg-desktop:p-1 p-0.5 font-semibold border-box'\n\nconst textClass = 'w-full lg-desktop:text-2xl lg-desktop:h-7 text-xl text-center h-6 lg-desktop:w-10 w-9 font-bold'\n\nexport const CountdownByEndDate: React.FC<Props> = ({ endDate, endDate_tz, locale, dateFormat, onExpire }) => {\n  const getDefaultDateLabels = () => ({\n    day: 'Day',\n    hour: 'Hours',\n    minute: 'Mins',\n    second: 'Secs',\n  })\n\n  function safeStringToObject(str: string) {\n    try {\n      let jsonStr = str?.trim?.()\n      if (!jsonStr?.startsWith?.('{') || !jsonStr?.endsWith?.('}')) {\n        return {}\n      }\n      jsonStr = jsonStr?.replace?.(/(\\w+)\\s*:/g, '\"$1\":')\n      return JSON.parse(jsonStr)\n    } catch (err) {\n      return getDefaultDateLabels()\n    }\n  }\n\n  const bannerDate = useMemo(() => {\n    if (!dateFormat) return getDefaultDateLabels()\n    return safeStringToObject(dateFormat)\n  }, [dateFormat])\n\n  // \u89E3\u6790\u76EE\u6807\u65F6\u95F4\uFF08\u4F7F\u7528 provided ISO\uFF0C\u82E5\u975E\u6CD5\u5219\u4E3A NaN\uFF09\n  const targetMsRef = useRef<number>(Date.parse(endDate))\n  const [remainingMs, setRemainingMs] = useState<number>(() => {\n    const t = targetMsRef.current\n    return isNaN(t) ? 0 : Math.max(0, t - Date.now())\n  })\n  // \u4EC5\u5728\u521D\u59CB\u65F6\u5224\u65AD\u662F\u5426\u5DF2\u8FC7\u671F\uFF1A\u82E5\u5DF2\u8FC7\u671F\u5219\u9690\u85CF\u7EC4\u4EF6\u5E76\u4E0D\u7EE7\u7EED\u8BA1\u65F6\n  const [hidden, setHidden] = useState<boolean>(() => {\n    const t = targetMsRef.current\n    return !isNaN(t) && t <= Date.now()\n  })\n\n  // \u82E5 props.endDate \u6539\u53D8\uFF0C\u66F4\u65B0 ref \u4E0E remaining\n  useEffect(() => {\n    targetMsRef.current = Date.parse(endDate)\n    setRemainingMs(isNaN(targetMsRef.current) ? 0 : Math.max(0, targetMsRef.current - Date.now()))\n    // \u5F53 endDate \u66F4\u65B0\u65F6\uFF0C\u4EC5\u8FDB\u884C\u4E00\u6B21\u662F\u5426\u8FC7\u671F\u7684\u5224\u65AD\uFF0C\u7528\u4E8E\u51B3\u5B9A\u662F\u5426\u9690\u85CF\n    const t = targetMsRef.current\n    setHidden(!isNaN(t) && t <= Date.now())\n  }, [endDate])\n\n  // Tick \u6BCF\u79D2\u66F4\u65B0\u5269\u4F59\u65F6\u95F4\n  useEffect(() => {\n    if (hidden) return // \u521D\u59CB\u5DF2\u8FC7\u671F\u5219\u4E0D\u542F\u52A8\u8BA1\u65F6\u5668\n    if (isNaN(targetMsRef.current)) return // \u65E0\u6548\u65E5\u671F\u4E0D\u542F\u52A8\u8BA1\u65F6\u5668\n    let expiredCalled = false\n    const tick = () => {\n      const now = Date.now()\n      const rem = Math.max(0, targetMsRef.current - now)\n      setRemainingMs(rem)\n      if (rem <= 0 && !expiredCalled) {\n        expiredCalled = true\n        setHidden(true) // \u5230\u70B9\u540E\u9690\u85CF\u7EC4\u4EF6\n        onExpire?.()\n      }\n    }\n    tick() // \u7ACB\u5373\u540C\u6B65\u4E00\u6B21\n    const id = window.setInterval(tick, 1000)\n    return () => clearInterval(id)\n  }, [onExpire, hidden])\n\n  // \u8BA1\u7B97\u5929/\u65F6/\u5206/\u79D2\n  const totalSeconds = Math.floor(remainingMs / 1000)\n  const seconds = totalSeconds % 60\n  const totalMinutes = Math.floor(totalSeconds / 60)\n  const minutes = totalMinutes % 60\n  const totalHours = Math.floor(totalMinutes / 60)\n  const hours = totalHours % 24\n  const days = Math.floor(totalHours / 24)\n\n  // \u683C\u5F0F\u5316\u76EE\u6807\u65F6\u95F4\u5E76\u663E\u793A\u5176\u65F6\u533A\uFF08\u4F7F\u7528 endDate_tz \u6216\u8005\u6D4F\u89C8\u5668\u65F6\u533A\uFF09\n  const displayTz = endDate_tz || Intl.DateTimeFormat().resolvedOptions().timeZone\n  let formattedTarget = '\u2014'\n  const tms = targetMsRef.current\n  if (!isNaN(tms)) {\n    try {\n      const dt = new Date(tms)\n      const fmt = new Intl.DateTimeFormat(locale || navigator.language, {\n        timeZone: displayTz,\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n      })\n      formattedTarget = fmt.format(dt)\n    } catch (e) {\n      // \u82E5\u4F20\u5165\u4E86\u975E\u6CD5\u65F6\u533A\uFF0CIntl \u53EF\u80FD\u629B\u9519\uFF1B\u56DE\u9000\u663E\u793A UTC \u65F6\u95F4\n      formattedTarget = new Date(tms).toISOString()\n    }\n  }\n\n  if (hidden) return null\n\n  return (\n    <div className=\"countdown-box flex w-full items-center gap-1\" aria-live=\"polite\">\n      {/* \u5929 */}\n      <div className={cn(baseClass, 'time-days-box')}>\n        <p className={textClass}>{pad(days, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.day || 'Day'}</div>\n      </div>\n      <div className=\"text-info-white text-2xl font-bold\">:</div>\n      {/* \u65F6 */}\n      <div className={cn(baseClass, 'time-hours-box')}>\n        <p className={textClass}>{pad(hours, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.hour || 'Hours'}</div>\n      </div>\n      <div className=\"text-info-white text-2xl font-bold\">:</div>\n      {/* \u5206 */}\n      <div className={cn(baseClass, 'time-minutes-box')}>\n        <p className={textClass}>{pad(minutes, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.minute || 'Mins'}</div>\n      </div>\n      <div className=\"text-info-white text-2xl font-bold\">:</div>\n      {/* \u79D2 */}\n      <div className={cn(baseClass, 'time-seconds-box')}>\n        <p className={textClass}>{pad(seconds, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.second || 'Secs'}</div>\n      </div>\n    </div>\n  )\n}\n\nexport default CountdownByEndDate\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/index.js'\nimport React, { useEffect, useRef, useState, useMemo } from 'react'\n\ntype Props = {\n  endDate: string // ISO UTC \u5B57\u7B26\u4E32\uFF0C\u4F8B\u5982 \"2025-11-02T07:42:00.000Z\"\n  endDate_tz?: string // \u65F6\u533A\uFF0C\u4F8B\u5982 \"Asia/Dhaka\"\uFF08\u53EF\u9009\uFF09\n  locale?: string // \u683C\u5F0F\u5316\u7528\u7684 locale\uFF0C\u9ED8\u8BA4 navigator.language\n  dateFormat?: any\n  onExpire?: () => void // \u5230\u671F\u56DE\u8C03\uFF08\u53EF\u9009\uFF09\n}\n\nconst pad = (n: number, len = 2) => String(Math.abs(n)).padStart(len, '0')\n\nconst baseClass =\n  'h-full flex-1 w-12 text-center bg-info-white text-xs text-info-primary overflow-hidden lg-desktop:p-1 p-0.5 font-semibold border-box'\n\nconst textClass =\n  'w-full lg-desktop:text-2xl lg-desktop:h-7 text-xl text-center h-6 lg-desktop:w-10 w-9 font-bold whitespace-nowrap'\n\nexport const CountdownByEndDate: React.FC<Props> = ({ endDate, endDate_tz, locale, dateFormat, onExpire }) => {\n  const getDefaultDateLabels = () => ({\n    day: 'Day',\n    hour: 'Hours',\n    minute: 'Mins',\n    second: 'Secs',\n  })\n\n  function safeStringToObject(str: string) {\n    try {\n      let jsonStr = str?.trim?.()\n      if (!jsonStr?.startsWith?.('{') || !jsonStr?.endsWith?.('}')) {\n        return {}\n      }\n      jsonStr = jsonStr?.replace?.(/(\\w+)\\s*:/g, '\"$1\":')\n      return JSON.parse(jsonStr)\n    } catch (err) {\n      return getDefaultDateLabels()\n    }\n  }\n\n  const bannerDate = useMemo(() => {\n    if (!dateFormat) return getDefaultDateLabels()\n    return safeStringToObject(dateFormat)\n  }, [dateFormat])\n\n  // \u89E3\u6790\u76EE\u6807\u65F6\u95F4\uFF08\u4F7F\u7528 provided ISO\uFF0C\u82E5\u975E\u6CD5\u5219\u4E3A NaN\uFF09\n  const targetMsRef = useRef<number>(Date.parse(endDate))\n  const [remainingMs, setRemainingMs] = useState<number>(() => {\n    const t = targetMsRef.current\n    return isNaN(t) ? 0 : Math.max(0, t - Date.now())\n  })\n  // \u4EC5\u5728\u521D\u59CB\u65F6\u5224\u65AD\u662F\u5426\u5DF2\u8FC7\u671F\uFF1A\u82E5\u5DF2\u8FC7\u671F\u5219\u9690\u85CF\u7EC4\u4EF6\u5E76\u4E0D\u7EE7\u7EED\u8BA1\u65F6\n  const [hidden, setHidden] = useState<boolean>(() => {\n    const t = targetMsRef.current\n    return !isNaN(t) && t <= Date.now()\n  })\n\n  // \u82E5 props.endDate \u6539\u53D8\uFF0C\u66F4\u65B0 ref \u4E0E remaining\n  useEffect(() => {\n    targetMsRef.current = Date.parse(endDate)\n    setRemainingMs(isNaN(targetMsRef.current) ? 0 : Math.max(0, targetMsRef.current - Date.now()))\n    // \u5F53 endDate \u66F4\u65B0\u65F6\uFF0C\u4EC5\u8FDB\u884C\u4E00\u6B21\u662F\u5426\u8FC7\u671F\u7684\u5224\u65AD\uFF0C\u7528\u4E8E\u51B3\u5B9A\u662F\u5426\u9690\u85CF\n    const t = targetMsRef.current\n    setHidden(!isNaN(t) && t <= Date.now())\n  }, [endDate])\n\n  // Tick \u6BCF\u79D2\u66F4\u65B0\u5269\u4F59\u65F6\u95F4\n  useEffect(() => {\n    if (hidden) return // \u521D\u59CB\u5DF2\u8FC7\u671F\u5219\u4E0D\u542F\u52A8\u8BA1\u65F6\u5668\n    if (isNaN(targetMsRef.current)) return // \u65E0\u6548\u65E5\u671F\u4E0D\u542F\u52A8\u8BA1\u65F6\u5668\n    let expiredCalled = false\n    const tick = () => {\n      const now = Date.now()\n      const rem = Math.max(0, targetMsRef.current - now)\n      setRemainingMs(rem)\n      if (rem <= 0 && !expiredCalled) {\n        expiredCalled = true\n        setHidden(true) // \u5230\u70B9\u540E\u9690\u85CF\u7EC4\u4EF6\n        onExpire?.()\n      }\n    }\n    tick() // \u7ACB\u5373\u540C\u6B65\u4E00\u6B21\n    const id = window.setInterval(tick, 1000)\n    return () => clearInterval(id)\n  }, [onExpire, hidden])\n\n  // \u8BA1\u7B97\u5929/\u65F6/\u5206/\u79D2\n  const totalSeconds = Math.floor(remainingMs / 1000)\n  const seconds = totalSeconds % 60\n  const totalMinutes = Math.floor(totalSeconds / 60)\n  const minutes = totalMinutes % 60\n  const totalHours = Math.floor(totalMinutes / 60)\n  const hours = totalHours % 24\n  const days = Math.floor(totalHours / 24)\n\n  // \u683C\u5F0F\u5316\u76EE\u6807\u65F6\u95F4\u5E76\u663E\u793A\u5176\u65F6\u533A\uFF08\u4F7F\u7528 endDate_tz \u6216\u8005\u6D4F\u89C8\u5668\u65F6\u533A\uFF09\n  const displayTz = endDate_tz || Intl.DateTimeFormat().resolvedOptions().timeZone\n  let formattedTarget = '\u2014'\n  const tms = targetMsRef.current\n  if (!isNaN(tms)) {\n    try {\n      const dt = new Date(tms)\n      const fmt = new Intl.DateTimeFormat(locale || navigator.language, {\n        timeZone: displayTz,\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n      })\n      formattedTarget = fmt.format(dt)\n    } catch (e) {\n      // \u82E5\u4F20\u5165\u4E86\u975E\u6CD5\u65F6\u533A\uFF0CIntl \u53EF\u80FD\u629B\u9519\uFF1B\u56DE\u9000\u663E\u793A UTC \u65F6\u95F4\n      formattedTarget = new Date(tms).toISOString()\n    }\n  }\n\n  if (hidden) return null\n\n  return (\n    <div className=\"countdown-box flex w-full items-center gap-1\" aria-live=\"polite\">\n      {/* \u5929 */}\n      <div className={cn(baseClass, 'time-days-box')}>\n        <p className={textClass}>{pad(days, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.day || 'Day'}</div>\n      </div>\n      <div className=\"text-info-white text-2xl font-bold\">:</div>\n      {/* \u65F6 */}\n      <div className={cn(baseClass, 'time-hours-box')}>\n        <p className={textClass}>{pad(hours, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.hour || 'Hours'}</div>\n      </div>\n      <div className=\"text-info-white text-2xl font-bold\">:</div>\n      {/* \u5206 */}\n      <div className={cn(baseClass, 'time-minutes-box')}>\n        <p className={textClass}>{pad(minutes, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.minute || 'Mins'}</div>\n      </div>\n      <div className=\"text-info-white text-2xl font-bold\">:</div>\n      {/* \u79D2 */}\n      <div className={cn(baseClass, 'time-seconds-box')}>\n        <p className={textClass}>{pad(seconds, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.second || 'Secs'}</div>\n      </div>\n    </div>\n  )\n}\n\nexport default CountdownByEndDate\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "cn", "useEffect", "useRef", "useState", "useMemo", "pad", "n", "len", "baseClass", "textClass", "CountdownByEndDate", "endDate", "endDate_tz", "locale", "dateFormat", "onExpire", "getDefaultDateLabels", "safeStringToObject", "str", "jsonStr", "bannerDate", "targetMsRef", "remainingMs", "setRemainingMs", "hidden", "setHidden", "expiredCalled", "tick", "now", "rem", "id", "totalSeconds", "seconds", "totalMinutes", "minutes", "totalHours", "hours", "days", "displayTz", "formattedTarget", "tms", "dt", "Countdown_default"]
 }

package/dist/esm/biz-components/HeroBanner/HeroBanner.d.ts CHANGED Viewed

@@ -1,6 +1,9 @@
 import React from 'react';
 import type { HeroBannerProps } from './types.js';
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<HeroBannerProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+export type HeroBannerSemanticName = 'root' | 'title' | 'subtitle' | 'buttonGroup' | 'primaryButton' | 'secondaryButton' | 'captionGroup';
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<HeroBannerProps & {
+    classNames?: Partial<Record<HeroBannerSemanticName, string>> | undefined;
+} & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
     className?: string | undefined;
     data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;

package/dist/esm/biz-components/HeroBanner/HeroBanner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import F,{useImperativeHandle as ee,useRef as b,useState as te,useEffect as ae}from"react";import f from"gsap";import{ScrollTrigger as h}from"gsap/dist/ScrollTrigger";import{useMediaQuery as q}from"react-responsive";import{useInView as re}from"react-intersection-observer";import oe from"../../helpers/ScrollLoadVideo.js";import{Button as H,Heading as V,Picture as A,Text as le}from"../../components/index.js";import se from"./Countdown.js";import{cn as n}from"../../helpers/index.js";import{withLayout as ne}from"../../shared/Styles.js";import{useExposure as pe}from"../../hooks/useExposure.js";import{trackUrlRef as I}from"../../shared/trackUrlRef.js";import{sizeMap as ie}from"../../components/button.js";import{VideoModal as ce}from"../VideoModal/index.js";const o="image",l="hero_banner",ue=({size:v="base"})=>{const{width:y,height:w}=ie[v];return e("svg",{width:y,height:w,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},Q=F.forwardRef(({data:v,className:y},w)=>{const{label:R,title:t,subtitle:a,endDate:P,endDate_tz:Z,dateFormat:G,pcImage:k,padImage:M,mobileImage:x,pcVideo:J,padVideo:K,mobileVideo:C,isShowVideo:O,primaryButton:u,secondaryButton:r,theme:W="light",size:N="default",caption:$=[],blockLink:L,iconArray:X}=v,D=q({query:"(max-width: 768px)"}),S=q({query:"(max-width: 1024px)"}),[E,U]=te(!1),{ref:Y,inView:_}=re(),T=b(null),z=b(null),B=b(null),d=b(null),s=b(null);return pe(s,{componentType:o,componentName:l,componentTitle:t,componentDescription:a}),ee(w,()=>s.current),ae(()=>{f.registerPlugin(h);function i(){if(!d.current)return;const c=s.current?.clientHeight||100;window.innerHeight<=c?T.current=h.create({trigger:s.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:m=>{const g=m.progress*40-20;f.set(d.current,{yPercent:g})}}):(B.current=h.create({trigger:s.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:m=>{const g=m.progress*20-20;f.set(d.current,{yPercent:g})}}),z.current=h.create({trigger:s.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:m=>{const g=m.progress*20;f.set(d.current,{yPercent:g})}}))}return _&&i(),()=>{T.current&&T.current.kill(),B.current&&B.current.kill(),z.current&&z.current.kill()}},[_]),e("div",{ref:Y,"data-ui-component-id":"HeroBanner",className:"relative z-[5]",children:p("div",{ref:s,className:n(W==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":N==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":N==="sm"},y),children:[L&&e("a",{className:"absolute inset-0 z-10",href:I(L,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}`,tabIndex:-1,"aria-hidden":"true","aria-label":t}),e("div",{ref:d,className:n("absolute left-0 top-0 size-full"),children:O?e(oe,{poster:D?x?.url:S?M?.url||x?.url:k?.url,src:D?C?.url:S?K?.url||C?.url:J?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:k?.alt||"",source:`${k?.url||""} , ${M?.url??(x?.url||"")} 1024, ${x?.url||""} 767`})}),p("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[p("div",{className:"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",children:[R&&e(V,{as:"h3",className:n("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:R}),t&&e(V,{as:"h2",size:N==="sm"?4:5,className:n("hero-banner-title"),html:t}),a&&e(V,{as:"h3",className:n("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:a}),P&&e("div",{className:"mt-3",children:e(se,{endDate:P,endDate_tz:Z,dateFormat:G})})]}),p("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[r?.isShowPlayVideoButton&&r?.playVideoButtonText?p(H,{onClick:()=>U(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${r?.playVideoButtonText}`,children:[r?.playVideoButtonText," ",e(ue,{size:"lg"})]}):r?.text?p(H,{"aria-label":t??a,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:"a",href:I(r?.link,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${r?.text}`,children:[r?.text,e("span",{className:"sr-only",children:t??a})]}):null,u&&u.text&&e(H,{"aria-label":t??a,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:"a",href:I(u.link,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${u?.text}`,children:u.text})]}),e("div",{className:"hero-banner-icon-group flex items-center gap-2",children:X?.map((i,c)=>e("div",{className:"h-12",children:e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover !w-auto",loading:"eager",alt:i?.pcImage?.alt||"",source:i?.pcImage?.url})},c))})]}),$.length>0&&e("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:$.map((i,c)=>p(F.Fragment,{children:[e(le,{size:2,className:n("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:i.title}),c<$.length-1&&e("div",{className:n("bg-info-primary w-px")})]},c))}),E&&e(ce,{visible:E,videoUrl:r?.videoUrl?.url,youTubeId:r?.youtubeId,onCloseModal:()=>U(!1)})]})})});Q.displayName="HeroBanner";var Be=ne(Q);export{Be as default};
+"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import F,{useImperativeHandle as te,useRef as x,useState as ae,useEffect as re}from"react";import h from"gsap";import{ScrollTrigger as y}from"gsap/dist/ScrollTrigger";import{useMediaQuery as G}from"react-responsive";import{useInView as oe}from"react-intersection-observer";import le from"../../helpers/ScrollLoadVideo.js";import{Button as z,Heading as V,Picture as q,Text as se}from"../../components/index.js";import ne from"./Countdown.js";import{cn as a}from"../../helpers/index.js";import{withLayout as pe}from"../../shared/Styles.js";import{useExposure as ie}from"../../hooks/useExposure.js";import{trackUrlRef as I}from"../../shared/trackUrlRef.js";import{sizeMap as ce}from"../../components/button.js";import{VideoModal as ue}from"../VideoModal/index.js";const s="image",n="hero_banner",de=({size:v="base"})=>{const{width:w,height:l}=ce[v];return e("svg",{width:w,height:l,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},A=F.forwardRef(({data:v,className:w,classNames:l={}},Q)=>{const{label:R,title:t,subtitle:r,endDate:P,endDate_tz:Z,dateFormat:J,pcImage:k,padImage:M,mobileImage:f,pcVideo:K,padVideo:O,mobileVideo:S,isShowVideo:W,primaryButton:d,secondaryButton:o,theme:X="light",size:$="default",caption:N=[],blockLink:C,iconArray:Y}=v,L=G({query:"(max-width: 768px)"}),D=G({query:"(max-width: 1024px)"}),[E,U]=ae(!1),{ref:ee,inView:_}=oe(),B=x(null),H=x(null),T=x(null),m=x(null),p=x(null);return ie(p,{componentType:s,componentName:n,componentTitle:t,componentDescription:r}),te(Q,()=>p.current),re(()=>{h.registerPlugin(y);function c(){if(!m.current)return;const u=p.current?.clientHeight||100;window.innerHeight<=u?B.current=y.create({trigger:p.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:g=>{const b=g.progress*40-20;h.set(m.current,{yPercent:b})}}):(T.current=y.create({trigger:p.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:g=>{const b=g.progress*20-20;h.set(m.current,{yPercent:b})}}),H.current=y.create({trigger:p.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:g=>{const b=g.progress*20;h.set(m.current,{yPercent:b})}}))}return _&&c(),()=>{B.current&&B.current.kill(),T.current&&T.current.kill(),H.current&&H.current.kill()}},[_]),e("div",{ref:ee,"data-ui-component-id":"HeroBanner",className:"relative z-[5]",children:i("div",{ref:p,className:a(X==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":$==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":$==="sm"},w,l?.root),children:[C&&e("a",{className:"absolute inset-0 z-10",href:I(C,`${s}_${n}`),"data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${t}#${r}`,tabIndex:-1,"aria-hidden":"true","aria-label":t}),e("div",{ref:m,className:a("absolute left-0 top-0 size-full"),children:W?e(le,{poster:L?f?.url:D?M?.url||f?.url:k?.url,src:L?S?.url:D?O?.url||S?.url:K?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):e(q,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:k?.alt||"",source:`${k?.url||""} , ${M?.url??(f?.url||"")} 1024, ${f?.url||""} 767`})}),i("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[i("div",{className:"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",children:[R&&e(V,{as:"h3",className:a("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:R}),t&&e(V,{as:"h2",size:$==="sm"?4:5,className:a("hero-banner-title"),html:t}),r&&e(V,{as:"h3",className:a("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",l.subtitle),html:r}),P&&e("div",{className:"mt-3",children:e(ne,{endDate:P,endDate_tz:Z,dateFormat:J})})]}),i("div",{className:a("hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",l.buttonGroup),children:[o?.isShowPlayVideoButton&&o?.playVideoButtonText?i(z,{onClick:()=>U(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${t}#${r}#${o?.playVideoButtonText}`,children:[o?.playVideoButtonText," ",e(de,{size:"lg"})]}):o?.text?i(z,{"aria-label":t??r,size:"lg",variant:"secondary",className:a("hero-banner-secondary-button",l.secondaryButton),as:"a",href:I(o?.link,`${s}_${n}`),"data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${t}#${r}#${o?.text}`,children:[o?.text,e("span",{className:"sr-only",children:t??r})]}):null,d&&d.text&&e(z,{"aria-label":t??r,size:"lg",variant:"primary",className:a("hero-banner-primary-button",l.primaryButton),as:"a",href:I(d.link,`${s}_${n}`),"data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${t}#${r}#${d?.text}`,children:d.text})]}),e("div",{className:"hero-banner-icon-group flex items-center gap-2",children:Y?.map((c,u)=>e("div",{className:"h-12",children:e(q,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover !w-auto",loading:"eager",alt:c?.pcImage?.alt||"",source:c?.pcImage?.url})},u))})]}),N.length>0&&e("div",{className:a("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",l.captionGroup),children:N.map((c,u)=>i(F.Fragment,{children:[e(se,{size:2,className:a("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:c.title}),u<N.length-1&&e("div",{className:a("bg-info-primary w-px")})]},u))}),E&&e(ue,{visible:E,videoUrl:o?.videoUrl?.url,youTubeId:o?.youtubeId,onCloseModal:()=>U(!1)})]})})});A.displayName="HeroBanner";var ze=pe(A);export{ze as default};
 //# sourceMappingURL=HeroBanner.js.map

package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const {\n    label,\n    title,\n    subtitle,\n    endDate,\n    endDate_tz,\n    dateFormat,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    caption = [],\n    blockLink,\n    iconArray,\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n  const { ref: inViewRef, inView } = useInView()\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n  const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        boxTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        bgTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    if (inView) gsapResize()\n    return () => {\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      boxTriggerRef.current && boxTriggerRef.current.kill()\n      bgTriggerRef.current && bgTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef} data-ui-component-id=\"HeroBanner\" className=\"relative z-[5]\">\n      <div\n        ref={boxRef}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n          {\n            'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n            'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n          },\n          className\n        )}\n      >\n        {blockLink && (\n          <a\n            className=\"absolute inset-0 z-10\"\n            href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${subtitle}`}\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            aria-label={title}\n          ></a>\n        )}\n        <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n          {isShowVideo ? (\n            <ScrollLoadVideo\n              poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n              src={\n                isMobile\n                  ? (mobileVideo?.url as string)\n                  : isPad\n                    ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                    : (pcVideo?.url as string)\n              }\n              className=\"laptop:w-full h-full\"\n              videoClassName=\"h-full object-cover\"\n              muted\n              loop\n              playsInline\n            />\n          ) : (\n            <Picture\n              className=\"laptop:w-full h-full\"\n              imgClassName=\"h-full object-cover\"\n              loading=\"eager\"\n              fetchPriority=\"high\"\n              alt={pcImage?.alt || ''}\n              source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n            />\n          )}\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n          <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n            {label && (\n              <Heading\n                as=\"h3\"\n                className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n                html={label}\n              />\n            )}\n            {title && <Heading as=\"h2\" size={size === 'sm' ? 4 : 5} className={cn('hero-banner-title')} html={title} />}\n            {subtitle && (\n              <Heading\n                as=\"h3\"\n                className={cn(\n                  'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n                )}\n                html={subtitle}\n              />\n            )}\n            {endDate && (\n              <div className=\"mt-3\">\n                <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n              </div>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n            {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n              <Button\n                onClick={() => setVisible(true)}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-play-video-button\"\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n              >\n                {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n              </Button>\n            ) : secondaryButton?.text ? (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-secondary-button\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n              >\n                {secondaryButton?.text}\n                <span className=\"sr-only\">{title ?? subtitle}</span>\n              </Button>\n            ) : null}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"primary\"\n                className=\"hero-banner-primary-button\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n          <div className=\"hero-banner-icon-group flex items-center gap-2\">\n            {iconArray?.map((icon, index) => (\n              <div key={index} className=\"h-12\">\n                <Picture\n                  className=\"laptop:w-full h-full\"\n                  imgClassName=\"h-full object-cover !w-auto\"\n                  loading=\"eager\"\n                  alt={icon?.pcImage?.alt || ''}\n                  source={icon?.pcImage?.url}\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {caption.length > 0 && (\n          <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n            {caption.map((c, index) => (\n              <React.Fragment key={index}>\n                <Text\n                  size={2}\n                  className={cn(\n                    'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                  )}\n                  html={c.title}\n                />\n                {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n\n        {/* \u89C6\u9891\u5F39\u7A97 */}\n        {visible && (\n          <VideoModal\n            visible={visible}\n            videoUrl={secondaryButton?.videoUrl?.url}\n            youTubeId={secondaryButton?.youtubeId}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "Countdown", "cn", "withLayout", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "icon", "index", "c", "HeroBanner_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nexport type HeroBannerSemanticName =\n  | 'root'\n  | 'title'\n  | 'subtitle'\n  | 'buttonGroup'\n  | 'primaryButton'\n  | 'secondaryButton'\n  | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst HeroBanner = React.forwardRef<\n  HTMLDivElement,\n  HeroBannerProps & {\n    classNames?: Partial<Record<HeroBannerSemanticName, string>>\n  }\n>(({ data, className, classNames = {} }, ref) => {\n  const {\n    label,\n    title,\n    subtitle,\n    endDate,\n    endDate_tz,\n    dateFormat,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    caption = [],\n    blockLink,\n    iconArray,\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n  const { ref: inViewRef, inView } = useInView()\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n  const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        boxTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        bgTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    if (inView) gsapResize()\n    return () => {\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      boxTriggerRef.current && boxTriggerRef.current.kill()\n      bgTriggerRef.current && bgTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef} data-ui-component-id=\"HeroBanner\" className=\"relative z-[5]\">\n      <div\n        ref={boxRef}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n          {\n            'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n            'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n          },\n          className,\n          classNames?.root\n        )}\n      >\n        {blockLink && (\n          <a\n            className=\"absolute inset-0 z-10\"\n            href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${subtitle}`}\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            aria-label={title}\n          ></a>\n        )}\n        <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n          {isShowVideo ? (\n            <ScrollLoadVideo\n              poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n              src={\n                isMobile\n                  ? (mobileVideo?.url as string)\n                  : isPad\n                    ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                    : (pcVideo?.url as string)\n              }\n              className=\"laptop:w-full h-full\"\n              videoClassName=\"h-full object-cover\"\n              muted\n              loop\n              playsInline\n            />\n          ) : (\n            <Picture\n              className=\"laptop:w-full h-full\"\n              imgClassName=\"h-full object-cover\"\n              loading=\"eager\"\n              fetchPriority=\"high\"\n              alt={pcImage?.alt || ''}\n              source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n            />\n          )}\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n          <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n            {label && (\n              <Heading\n                as=\"h3\"\n                className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n                html={label}\n              />\n            )}\n            {title && <Heading as=\"h2\" size={size === 'sm' ? 4 : 5} className={cn('hero-banner-title')} html={title} />}\n            {subtitle && (\n              <Heading\n                as=\"h3\"\n                className={cn(\n                  'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm',\n                  classNames.subtitle\n                )}\n                html={subtitle}\n              />\n            )}\n            {endDate && (\n              <div className=\"mt-3\">\n                <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n              </div>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div\n            className={cn(\n              'hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2',\n              classNames.buttonGroup\n            )}\n          >\n            {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n              <Button\n                onClick={() => setVisible(true)}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-play-video-button\"\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n              >\n                {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n              </Button>\n            ) : secondaryButton?.text ? (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"secondary\"\n                className={cn('hero-banner-secondary-button', classNames.secondaryButton)}\n                as=\"a\"\n                href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n              >\n                {secondaryButton?.text}\n                <span className=\"sr-only\">{title ?? subtitle}</span>\n              </Button>\n            ) : null}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"primary\"\n                className={cn('hero-banner-primary-button', classNames.primaryButton)}\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n          <div className=\"hero-banner-icon-group flex items-center gap-2\">\n            {iconArray?.map((icon, index) => (\n              <div key={index} className=\"h-12\">\n                <Picture\n                  className=\"laptop:w-full h-full\"\n                  imgClassName=\"h-full object-cover !w-auto\"\n                  loading=\"eager\"\n                  alt={icon?.pcImage?.alt || ''}\n                  source={icon?.pcImage?.url}\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {caption.length > 0 && (\n          <div\n            className={cn(\n              'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n              classNames.captionGroup\n            )}\n          >\n            {caption.map((c, index) => (\n              <React.Fragment key={index}>\n                <Text\n                  size={2}\n                  className={cn(\n                    'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                  )}\n                  html={c.title}\n                />\n                {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n\n        {/* \u89C6\u9891\u5F39\u7A97 */}\n        {visible && (\n          <VideoModal\n            visible={visible}\n            videoUrl={secondaryButton?.videoUrl?.url}\n            youTubeId={secondaryButton?.youtubeId}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "Countdown", "cn", "withLayout", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "classNames", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "icon", "index", "HeroBanner_default"]
 }

package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as l}from"react/jsx-runtime";import{Text as o,Link as m}from"../../../../components/index.js";import{Dialog as d,DialogContent as g,DialogHeader as x,DialogTitle as c}from"../../../../components/index.js";const h=({data:e,onClose:p,open:s})=>t(d,{open:s,onOpenChange:p,children:l(g,{overlayClassName:"z-[100]",className:"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110]  h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[t(x,{className:"laptop:pt-4 pb-2 pt-4",children:t(c,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:e?.title})}),l("div",{className:"laptop:gap-8 laptop:py-8 py-6",children:[t(o,{className:"text-[20px] font-bold leading-[1.2] text-[#1d1d1f] md:text-[16px]",html:e?.shippingCoupon?.title}),t("ul",{className:"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]",children:e?.shippingCoupon?.list.map((i,a)=>l("li",{className:"flex text-[18px]",children:[l("span",{className:"text-[#86868C]",children:[a+1,"."]}),t("span",{className:"ml-[4px] font-bold text-[#86868C]",children:i})]},a))}),l("div",{className:"mt-[24px] md:mt-[16px]",children:[t(o,{className:"text-[18px] font-bold leading-[1.2]  text-[#1d1d1f]",html:e?.shippingService?.title}),t("div",{className:"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1",children:e?.shippingService?.list.map((i,a)=>l("div",{className:"rounded-[12px] bg-[#EAEAEC] p-4",children:[t(o,{as:"p",className:"text-base font-bold !leading-[1.2] text-[#1d1d1f]",html:i.title}),t("div",{className:"mt-3 grid grid-flow-row",children:i.list.map((n,r)=>t(o,{as:"p",className:"text-base font-bold text-[#86868C]",children:n},r))})]},a))})]}),t(m,{className:"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline",href:`${e?.terms?.url}`,children:e?.terms?.text})]})]})});export{h as ShippingPolicyModal};
+import{jsx as t,jsxs as l}from"react/jsx-runtime";import{Dialog as d,DialogContent as g,Text as o,Link as m,DialogHeader as x,DialogTitle as c}from"../../../../components/index.js";const v=({data:e,onClose:p,open:s})=>t(d,{open:s,onOpenChange:p,children:l(g,{overlayClassName:"z-[100]",className:"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110]  h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[t(x,{className:"laptop:pt-4 pb-2 pt-4",children:t(c,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:e?.title})}),l("div",{className:"laptop:gap-8 laptop:py-8 py-6",children:[t(o,{className:"text-[20px] font-bold leading-[1.2] text-[#1d1d1f] md:text-[16px]",html:e?.shippingCoupon?.title}),t("ul",{className:"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]",children:e?.shippingCoupon?.list.map((i,a)=>l("li",{className:"flex text-[18px]",children:[l("span",{className:"text-[#86868C]",children:[a+1,"."]}),t("span",{className:"ml-[4px] font-bold text-[#86868C]",children:i})]},a))}),l("div",{className:"mt-[24px] md:mt-[16px]",children:[t(o,{className:"text-[18px] font-bold leading-[1.2]  text-[#1d1d1f]",html:e?.shippingService?.title}),t("div",{className:"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1",children:e?.shippingService?.list.map((i,a)=>l("div",{className:"rounded-[12px] bg-[#EAEAEC] p-4",children:[t(o,{as:"p",className:"text-base font-bold !leading-[1.2] text-[#1d1d1f]",html:i.title}),t("div",{className:"mt-3 grid grid-flow-row",children:i.list.map((n,r)=>t(o,{as:"p",className:"text-base font-bold text-[#86868C]",children:n},r))})]},a))})]}),t(m,{className:"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline",href:`${e?.terms?.url}`,children:e?.terms?.text})]})]})});export{v as ShippingPolicyModal};
 //# sourceMappingURL=ShippingPolicyModal.js.map

package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.tsx"],
-  "sourcesContent": ["import { Text, Link } from '../../../../components/index.js'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../../components/index.js'\n\ninterface Terms {\n  text: string\n  url: string\n}\n\ninterface List {\n  title: string\n  list: string[]\n}\n\ninterface ShippingService {\n  title: string\n  list: List[]\n}\n\ninterface Data {\n  title: string\n  shippingCoupon: List\n  shippingService: ShippingService\n  terms: Terms\n}\n\ninterface Props {\n  data: Data\n  onClose: () => void\n  open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n  return (\n    <Dialog open={open} onOpenChange={onClose}>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110]  h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 pb-2 pt-4\">\n          <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">{data?.title}</DialogTitle>\n        </DialogHeader>\n        <div className=\"laptop:gap-8 laptop:py-8 py-6\">\n          <Text\n            className=\"text-[20px] font-bold leading-[1.2] text-[#1d1d1f] md:text-[16px]\"\n            html={data?.shippingCoupon?.title}\n          />\n          <ul className=\"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]\">\n            {data?.shippingCoupon?.list.map((item, index) => (\n              <li className=\"flex text-[18px]\" key={index}>\n                <span className=\"text-[#86868C]\">{index + 1}.</span>\n                <span className=\"ml-[4px] font-bold text-[#86868C]\">{item}</span>\n              </li>\n            ))}\n          </ul>\n          <div className=\"mt-[24px] md:mt-[16px]\">\n            <Text className=\"text-[18px] font-bold leading-[1.2]  text-[#1d1d1f]\" html={data?.shippingService?.title} />\n            <div className=\"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1\">\n              {data?.shippingService?.list.map((item, index) => (\n                <div className=\"rounded-[12px] bg-[#EAEAEC] p-4\" key={index}>\n                  <Text as=\"p\" className=\"text-base font-bold !leading-[1.2] text-[#1d1d1f]\" html={item.title} />\n                  <div className=\"mt-3 grid grid-flow-row\">\n                    {item.list.map((subItem, subIndex) => (\n                      <Text as=\"p\" className=\"text-base font-bold text-[#86868C]\" key={subIndex}>\n                        {subItem}\n                      </Text>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Link\n            className=\"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline\"\n            href={`${data?.terms?.url}`}\n          >\n            {data?.terms?.text}\n          </Link>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
-  "mappings": "AAuCU,cAAAA,EAUM,QAAAC,MAVN,oBAvCV,OAAS,QAAAC,EAAM,QAAAC,MAAY,kCAC3B,OAAS,UAAAC,EAAQ,iBAAAC,EAAe,gBAAAC,EAAc,eAAAC,MAAmB,kCA8B1D,MAAMC,EAAsB,CAAC,CAAE,KAAAC,EAAM,QAAAC,EAAS,KAAAC,CAAK,IAEtDX,EAACI,EAAA,CAAO,KAAMO,EAAM,aAAcD,EAChC,SAAAT,EAACI,EAAA,CACC,iBAAiB,UACjB,UAAU,oWAEV,UAAAL,EAACM,EAAA,CAAa,UAAU,wBACtB,SAAAN,EAACO,EAAA,CAAY,UAAU,qDAAsD,SAAAE,GAAM,MAAM,EAC3F,EACAR,EAAC,OAAI,UAAU,gCACb,UAAAD,EAACE,EAAA,CACC,UAAU,oEACV,KAAMO,GAAM,gBAAgB,MAC9B,EACAT,EAAC,MAAG,UAAU,4DACX,SAAAS,GAAM,gBAAgB,KAAK,IAAI,CAACG,EAAMC,IACrCZ,EAAC,MAAG,UAAU,mBACZ,UAAAA,EAAC,QAAK,UAAU,iBAAkB,UAAAY,EAAQ,EAAE,KAAC,EAC7Cb,EAAC,QAAK,UAAU,oCAAqC,SAAAY,EAAK,IAFtBC,CAGtC,CACD,EACH,EACAZ,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACE,EAAA,CAAK,UAAU,sDAAsD,KAAMO,GAAM,iBAAiB,MAAO,EAC1GT,EAAC,OAAI,UAAU,yDACZ,SAAAS,GAAM,iBAAiB,KAAK,IAAI,CAACG,EAAMC,IACtCZ,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACE,EAAA,CAAK,GAAG,IAAI,UAAU,oDAAoD,KAAMU,EAAK,MAAO,EAC7FZ,EAAC,OAAI,UAAU,0BACZ,SAAAY,EAAK,KAAK,IAAI,CAACE,EAASC,IACvBf,EAACE,EAAA,CAAK,GAAG,IAAI,UAAU,qCACpB,SAAAY,GAD8DC,CAEjE,CACD,EACH,IARoDF,CAStD,CACD,EACH,GACF,EAEAb,EAACG,EAAA,CACC,UAAU,0EACV,KAAM,GAAGM,GAAM,OAAO,GAAG,GAExB,SAAAA,GAAM,OAAO,KAChB,GACF,GACF,EACF",
-  "names": ["jsx", "jsxs", "Text", "Link", "Dialog", "DialogContent", "DialogHeader", "DialogTitle", "ShippingPolicyModal", "data", "onClose", "open", "item", "index", "subItem", "subIndex"]
+  "sourcesContent": ["import { Dialog, DialogContent, Text, Link, DialogHeader, DialogTitle } from '../../../../components/index.js'\n\ninterface Terms {\n  text: string\n  url: string\n}\n\ninterface List {\n  title: string\n  list: string[]\n}\n\ninterface ShippingService {\n  title: string\n  list: List[]\n}\n\ninterface Data {\n  title: string\n  shippingCoupon: List\n  shippingService: ShippingService\n  terms: Terms\n}\n\ninterface Props {\n  data: Data\n  onClose: () => void\n  open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n  return (\n    <Dialog open={open} onOpenChange={onClose}>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110]  h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 pb-2 pt-4\">\n          <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">{data?.title}</DialogTitle>\n        </DialogHeader>\n        <div className=\"laptop:gap-8 laptop:py-8 py-6\">\n          <Text\n            className=\"text-[20px] font-bold leading-[1.2] text-[#1d1d1f] md:text-[16px]\"\n            html={data?.shippingCoupon?.title}\n          />\n          <ul className=\"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]\">\n            {data?.shippingCoupon?.list.map((item, index) => (\n              <li className=\"flex text-[18px]\" key={index}>\n                <span className=\"text-[#86868C]\">{index + 1}.</span>\n                <span className=\"ml-[4px] font-bold text-[#86868C]\">{item}</span>\n              </li>\n            ))}\n          </ul>\n          <div className=\"mt-[24px] md:mt-[16px]\">\n            <Text className=\"text-[18px] font-bold leading-[1.2]  text-[#1d1d1f]\" html={data?.shippingService?.title} />\n            <div className=\"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1\">\n              {data?.shippingService?.list.map((item, index) => (\n                <div className=\"rounded-[12px] bg-[#EAEAEC] p-4\" key={index}>\n                  <Text as=\"p\" className=\"text-base font-bold !leading-[1.2] text-[#1d1d1f]\" html={item.title} />\n                  <div className=\"mt-3 grid grid-flow-row\">\n                    {item.list.map((subItem, subIndex) => (\n                      <Text as=\"p\" className=\"text-base font-bold text-[#86868C]\" key={subIndex}>\n                        {subItem}\n                      </Text>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Link\n            className=\"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline\"\n            href={`${data?.terms?.url}`}\n          >\n            {data?.terms?.text}\n          </Link>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "AAsCU,cAAAA,EAUM,QAAAC,MAVN,oBAtCV,OAAS,UAAAC,EAAQ,iBAAAC,EAAe,QAAAC,EAAM,QAAAC,EAAM,gBAAAC,EAAc,eAAAC,MAAmB,kCA8BtE,MAAMC,EAAsB,CAAC,CAAE,KAAAC,EAAM,QAAAC,EAAS,KAAAC,CAAK,IAEtDX,EAACE,EAAA,CAAO,KAAMS,EAAM,aAAcD,EAChC,SAAAT,EAACE,EAAA,CACC,iBAAiB,UACjB,UAAU,oWAEV,UAAAH,EAACM,EAAA,CAAa,UAAU,wBACtB,SAAAN,EAACO,EAAA,CAAY,UAAU,qDAAsD,SAAAE,GAAM,MAAM,EAC3F,EACAR,EAAC,OAAI,UAAU,gCACb,UAAAD,EAACI,EAAA,CACC,UAAU,oEACV,KAAMK,GAAM,gBAAgB,MAC9B,EACAT,EAAC,MAAG,UAAU,4DACX,SAAAS,GAAM,gBAAgB,KAAK,IAAI,CAACG,EAAMC,IACrCZ,EAAC,MAAG,UAAU,mBACZ,UAAAA,EAAC,QAAK,UAAU,iBAAkB,UAAAY,EAAQ,EAAE,KAAC,EAC7Cb,EAAC,QAAK,UAAU,oCAAqC,SAAAY,EAAK,IAFtBC,CAGtC,CACD,EACH,EACAZ,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACI,EAAA,CAAK,UAAU,sDAAsD,KAAMK,GAAM,iBAAiB,MAAO,EAC1GT,EAAC,OAAI,UAAU,yDACZ,SAAAS,GAAM,iBAAiB,KAAK,IAAI,CAACG,EAAMC,IACtCZ,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACI,EAAA,CAAK,GAAG,IAAI,UAAU,oDAAoD,KAAMQ,EAAK,MAAO,EAC7FZ,EAAC,OAAI,UAAU,0BACZ,SAAAY,EAAK,KAAK,IAAI,CAACE,EAASC,IACvBf,EAACI,EAAA,CAAK,GAAG,IAAI,UAAU,qCACpB,SAAAU,GAD8DC,CAEjE,CACD,EACH,IARoDF,CAStD,CACD,EACH,GACF,EAEAb,EAACK,EAAA,CACC,UAAU,0EACV,KAAM,GAAGI,GAAM,OAAO,GAAG,GAExB,SAAAA,GAAM,OAAO,KAChB,GACF,GACF,EACF",
+  "names": ["jsx", "jsxs", "Dialog", "DialogContent", "Text", "Link", "DialogHeader", "DialogTitle", "ShippingPolicyModal", "data", "onClose", "open", "item", "index", "subItem", "subIndex"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{Fragment as F,jsx as e,jsxs as n}from"react/jsx-runtime";import{Button as re,Checkbox as pe,Text as c,Picture as N,Heading as q,Link as ce}from"../../../../../components/index.js";import d from"./ProductBenefitsTabs/index.js";import{useBizProductContext as Y}from"../../../BizProductProvider.js";import{useBenefits as de}from"../../../hooks/useBenefits.js";import{formatPrice as x}from"../../../utils/index.js";import{replaceTemplate as G}from"../../../utils/textFormat.js";import{useEffect as K,useMemo as j,useRef as ue,useState as P}from"react";import{useAiuiContext as J}from"../../../../AiuiProvider/index.js";import fe from"../../../../../hooks/useCountDown.js";import me from"../../../hooks/useCopy.js";import{cn as C}from"../../../../../helpers/index.js";import be from"./ProductBenefitsTabs/ModalContainer.js";import{withLayout as ge}from"../../../../../shared/Styles.js";const xe={couponCode:"Code",copyCode:"Copy Code",copied:"Copied",expired:"Expired",offCoupon:"{discount} off coupon",offMemberOnly:"{amount} off Member Only",loginNow:"Login now",selectFreeGift:"You can select the free gift below.",bundleSaveUpTo:"Bundle purchases save extra up to",bundleOffer:"We offer {count} bundle for you",creditsTitle:"Soundcore credits for cash",creditsDesc:"100 Soundcore credits=$1",off:" off",memberBenefitsNotLogin:"You will enjoy a {amount} member discount after logging in.",memberBenefitsNotLoginText:"Sign Up to Get Benefits Below",forNewMember:"{amount} off for New Member",expressShipping:"Express Shipping Method",creditsAfterActivation:"You will get soundcoreCredits after activation. ",active:"Active",flexibleInstallment:"Flexible installment payment "},Ce=({item:a,textConfig:i,benefitPayloadData:s})=>{const{trackingData:h}=J(),{copied:v,copy:y}=me(),[w,k]=P(!1),r=h?.common?.coupon,{days:B,hours:A,minutes:H,seconds:D}=fe({endTime:a?.ends_at||""}),{openModal:V}=Y();return n(F,{children:[e("style",{jsx:!0,children:`
+import{Fragment as F,jsx as e,jsxs as n}from"react/jsx-runtime";import{Button as re,Checkbox as pe,Text as c,Picture as N,Heading as q,Link as ce}from"../../../../../components/index.js";import d from"./ProductBenefitsTabs/index.js";import{useBizProductContext as Y}from"../../../BizProductProvider.js";import{useBenefits as de}from"../../../hooks/useBenefits.js";import{formatPrice as C}from"../../../utils/index.js";import{replaceTemplate as G}from"../../../utils/textFormat.js";import{useEffect as K,useMemo as j,useRef as ue,useState as S}from"react";import{useAiuiContext as J}from"../../../../AiuiProvider/index.js";import fe from"../../../../../hooks/useCountDown.js";import me from"../../../hooks/useCopy.js";import{cn as h}from"../../../../../helpers/index.js";import be from"./ProductBenefitsTabs/ModalContainer.js";import{withLayout as ge}from"../../../../../shared/Styles.js";const xe={couponCode:"Code",copyCode:"Copy Code",copied:"Copied",expired:"Expired",offCoupon:"{discount} off coupon",offMemberOnly:"{amount} off Member Only",loginNow:"Login now",selectFreeGift:"You can select the free gift below.",bundleSaveUpTo:"Bundle purchases save extra up to",bundleOffer:"We offer {count} bundle for you",creditsTitle:"Soundcore credits for cash",creditsDesc:"100 Soundcore credits=$1",off:" off",memberBenefitsNotLogin:"You will enjoy a {amount} member discount after logging in.",memberBenefitsNotLoginText:"Sign Up to Get Benefits Below",forNewMember:"{amount} off for New Member",expressShipping:"Express Shipping Method",creditsAfterActivation:"You will get soundcoreCredits after activation. ",active:"Active",flexibleInstallment:"Flexible installment payment "},Ce=({item:a,textConfig:i,benefitPayloadData:s})=>{const{trackingData:v}=J(),{copied:y,copy:B}=me(),[w,k]=S(!1),r=v?.common?.coupon,{days:m,hours:A,minutes:H,seconds:D}=fe({endTime:a?.ends_at||""}),{openModal:V}=Y();return n(F,{children:[e("style",{jsx:!0,children:`
         .coupon-card {
           /* \u4F7F\u7528mask\u521B\u5EFA\u5185\u5207\u5706\u89D2 */
           mask:
@@ -14,7 +14,7 @@ import{Fragment as F,jsx as e,jsxs as n}from"react/jsx-runtime";import{Button as
             bottom left;
           mask-repeat: no-repeat;
         }
-      `}),n("div",{style:{background:a.couponBgColor||"white"},className:C("laptop:h-[112px] lg-desktop:h-[130px] relative h-[100px] overflow-hidden p-3",a.borderStyle==="inset"?"coupon-card ":"rounded-[8px]"),...a.useAble&&{role:"button",tabIndex:0,onClick:()=>{a?.onUseChange?.(w)!==!1&&k(!w)}},children:[a?.bgImage?.url&&e(N,{source:a.bgImage.url,alt:a.bgImage.alt,className:"absolute bottom-0 right-0 w-auto",imgClassName:"object-contain"}),n("div",{className:"z-1 relative ",children:[n("div",{className:"flex items-center justify-start",children:[a.useAble&&e(pe,{size:"lg",className:"data-[state=checked]:border-primary mr-2 rounded-full border-[1.6px] border-[#D1D1D1]",checked:a?.isAutoUse}),e(c,{html:a.title,className:"laptop:text-[20px] lg-desktop:text-[24px] text-[16px] font-bold leading-[1.2]"})]}),a.description&&e(c,{...typeof a.description=="string"?{html:a.description}:{},as:"p",className:"lg-desktop:text-[16px] mt-2 pr-8 text-[14px] font-bold text-[#3D3D3F]",children:a.description}),a.code&&n("div",{className:"laptop-md:mt-2 flex items-center gap-2",children:[e(c,{html:`${s?.couponBenefitData?.commonCoupon?.couponCode}: ${a.code}`,className:"lg-desktop:text-[16px] text-[14px] font-bold text-[#3D3D3F]"}),e(ce,{className:"lg-desktop:text-[16px] text-[14px] font-bold underline",role:"button",tabIndex:0,onClick:T=>{T.preventDefault(),T.stopPropagation(),y(a.code||"")},children:v?r?.copied||s?.couponBenefitData?.commonCoupon?.copied:r?.copy||s?.couponBenefitData?.commonCoupon?.copyCode})]}),a.ends_at&&e("button",{onClick:()=>{r?.modal&&V(r?.modal)},className:"lg-desktop:mt-[24px] text-brand-0 laptop-md:mt-4 lg-desktop:text-[16px] md-l:hidden mt-[14px] text-left text-[14px] font-bold text-[#1F2021]",children:Number(B)<Number(r?.hurry?.daysLeft)?n(F,{children:[e("span",{children:r?.ends}),e("span",{className:"font-bold",children:` ${B} ${A.toString().padStart(2,"0")}:${H.toString().padStart(2,"0")}:${D.toString().padStart(2,"0")}`})]}):r?.hurry?.label||s?.couponBenefitData?.commonCoupon?.expired})]})]})]})},he=({coupons:a,className:i,textConfig:s,benefitPayloadData:h})=>e("div",{className:C("laptop:grid laptop:grid-cols-2 laptop-md:grid-cols-1 flex flex-col gap-3",i),children:a?.map((v,y)=>e(Ce,{item:v,textConfig:s,benefitPayloadData:h},y))}),ve=({textConfig:a})=>{const{profile:i,variant:s,renderInstallments:h,onUseCouponChange:v,onUseMemberDiscountChange:y,discount:w,savingDetail:k,openModal:r,openSignInPopup:B,openAuthCodePopup:A,openSignUpPopup:H,product:D,creditsRedemption:V}=Y(),{usedPoints:T=0,availablePoints:ye=0}=V??{},[Q,z]=P(!1),u=j(()=>D?.payload?.components?.find(t=>t.componentKey==="ProductBenefits")?.data||{},[D?.payload]),[X,O]=P(!1),ee=de({variant:s}),{locale:m="us",copyWriting:te}=J(),R=ue(null),oe={...xe,...a},{activated:ne=!1}=i||{},{memberDiscount:b,commonCoupon:f,creditsRedemption:M,freeGift:$,bundle:_,paidShipping:ae,fullGift:U,levelDiscount:Z}=ee,o=j(()=>{const t=u?.benefitTabs?.find(p=>p?.value==="coupon")??{},l=u?.benefitTabs?.find(p=>p?.value==="membership")??{},L=u?.benefitTabs?.find(p=>p?.value==="installment")??{},S=u?.benefitTabs?.find(p=>p?.value==="pay")??{};return{couponBenefitData:t,membershipBenefitData:l,installmentBenefitData:L,payBenefitData:S}},[u]),g=[f?.enable?{...f.config,isAutoUse:k?.coupon>0,useAble:!0,borderStyle:"rounded",code:f?.config?.title??"",description:f?.config?.desc??"",onUseChange:t=>{const l=t?w?.codeSavings??0:0;v?.(l)},title:G(o?.couponBenefitData?.commonCoupon?.offCoupon,{discount:f?.config?.value_type=="percentage"?Math.abs(Number(f?.config?.value||0))+"%":x({amount:Math.abs(Number(f?.config?.fixed_value||0)),currencyCode:s.price.currencyCode,locale:m})})}:null,b.enable?{useAble:!0,isAutoUse:!!i?.email&&!!k?.member,title:G(o?.couponBenefitData?.member?.offMemberOnly,{amount:x({amount:b?.config?.amount??0,currencyCode:s.price.currencyCode,locale:m})}),description:n(F,{children:[i?.email?o?.couponBenefitData?.member?.memberDiscounts:o?.membershipBenefitData?.memberBenefitsNotLogin?.replace("{amount}",x({amount:b?.config?.amount??0,currencyCode:s.price.currencyCode,locale:m}))??""," ",i?.email?"":e("span",{role:"button",tabIndex:0,onClick:()=>B?.(),className:"underline",children:o?.couponBenefitData?.member?.loginNow})]}),borderStyle:"rounded",onUseChange:t=>{if(i?.email){const l=t?b?.config?.amount??0:0;return y?.(l),!0}else return B?.(),!1}}:null,Z.enable?{title:Z?.config?.title??"",description:Z?.config?.tag??"",borderStyle:"inset",bgImage:{url:o?.couponBenefitData?.levelDiscount?.bgImage}}:null,$.enable?{title:$?.config?.title??"",description:o?.couponBenefitData?.freeGift?.selectFreeGift,borderStyle:"inset",bgImage:{url:o?.couponBenefitData?.freeGift?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,_.enable?{title:`${o?.couponBenefitData?.bundle?.bundleSaveUpTo} ${x({amount:Math.max(..._?.config?.bundleList?.map(t=>t.savings??0)??[]),currencyCode:s.price.currencyCode,locale:m})}`,borderStyle:"inset",description:o?.couponBenefitData?.bundle?.bundleOffer.replace("{count}",_?.config?.bundleList?.length?.toString()??""),bgImage:{url:o?.couponBenefitData?.bundle?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,U.enable?{title:U?.config?.title??"",description:U?.config?.desc??"",borderStyle:"inset",bgImage:{url:o?.couponBenefitData?.fullGift?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,M.enable?{title:o?.couponBenefitData?.creditsRedemption?.creditsTitle,description:o?.couponBenefitData?.creditsRedemption?.creditsDesc,borderStyle:"inset",bgImage:{url:o?.couponBenefitData?.creditsRedemption?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null].filter(Boolean);K(()=>{E(g?.length?"coupon":"membership")},[g?.length]),K(()=>{z(!1)},[s?.id]);const[W,E]=P("coupon"),ie=()=>{A?.()},se=(t,l)=>{if(E(l),R.current){const L=R.current,S=t.currentTarget,p=S.offsetLeft-L.offsetWidth/2+S.offsetWidth/2;L.scrollTo({left:p,behavior:"smooth"})}},le=j(()=>u?.benefitTabs?.map(t=>t?.value==="coupon"&&!g?.length?null:t).filter(Boolean),[u,g]);return d?n(d,{className:"relative",onValueChange:t=>{E(t),z(t==="installment")},value:W,children:[e("div",{className:"absolute right-0 top-0 z-[1] h-[40px] w-[25px] rounded-xl bg-gradient-to-r from-transparent to-[#EAEAEC]"}),e(d.List,{ref:R,children:le?.map(t=>e(d.Trigger,{className:C(W===t.value&&"text-[#080A0F]"),value:t.value,onClick:l=>se(l,t?.value),children:t.label},t?.value))}),e("style",{global:!0,jsx:!0,children:`
+      `}),n("div",{style:{background:a.couponBgColor||"white"},className:h("laptop:h-[112px] lg-desktop:h-[130px] relative h-[100px] overflow-hidden p-3",a.borderStyle==="inset"?"coupon-card ":"rounded-[8px]"),...a.useAble&&{role:"button",tabIndex:0,onClick:()=>{a?.onUseChange?.(w)!==!1&&k(!w)}},children:[a?.bgImage?.url&&e(N,{source:a.bgImage.url,alt:a.bgImage.alt,className:"absolute bottom-0 right-0 w-auto",imgClassName:"object-contain"}),n("div",{className:"z-1 relative ",children:[n("div",{className:"flex items-center justify-start",children:[a.useAble&&e(pe,{size:"lg",className:"data-[state=checked]:border-primary mr-2 rounded-full border-[1.6px] border-[#D1D1D1]",checked:a?.isAutoUse}),e(c,{html:a.title,className:"laptop:text-[20px] lg-desktop:text-[24px] text-[16px] font-bold leading-[1.2]"})]}),a.description&&e(c,{...typeof a.description=="string"?{html:a.description}:{},as:"p",className:"lg-desktop:text-[16px] mt-2 pr-8 text-[14px] font-bold text-[#3D3D3F]",children:a.description}),a.code&&n("div",{className:"laptop-md:mt-2 flex items-center gap-2",children:[e(c,{html:`${s?.couponBenefitData?.commonCoupon?.couponCode}: ${a.code}`,className:"lg-desktop:text-[16px] text-[14px] font-bold text-[#3D3D3F]"}),e(ce,{className:"lg-desktop:text-[16px] text-[14px] font-bold underline",role:"button",tabIndex:0,onClick:T=>{T.preventDefault(),T.stopPropagation(),B(a.code||"")},children:y?r?.copied||s?.couponBenefitData?.commonCoupon?.copied:r?.copy||s?.couponBenefitData?.commonCoupon?.copyCode})]}),a.ends_at&&e("button",{onClick:()=>{r?.modal&&V(r?.modal)},className:"lg-desktop:mt-[24px] text-brand-0 laptop-md:mt-4 lg-desktop:text-[16px] md-l:hidden mt-[14px] text-left text-[14px] font-bold text-[#1F2021]",children:Number(m)<Number(r?.hurry?.daysLeft)?n(F,{children:[n("span",{children:[r?.ends," ",m==="00"?"0":m," ",r?.days||""]}),e("span",{className:"font-bold",children:` ${A.toString()}:${H.toString()}:${D.toString()}`})]}):r?.hurry?.label||s?.couponBenefitData?.commonCoupon?.expired})]})]})]})},he=({coupons:a,className:i,textConfig:s,benefitPayloadData:v})=>e("div",{className:h("laptop:grid laptop:grid-cols-2 laptop-md:grid-cols-1 flex flex-col gap-3",i),children:a?.map((y,B)=>e(Ce,{item:y,textConfig:s,benefitPayloadData:v},B))}),ve=({textConfig:a})=>{const{profile:i,variant:s,renderInstallments:v,onUseCouponChange:y,onUseMemberDiscountChange:B,discount:w,savingDetail:k,openModal:r,openSignInPopup:m,openAuthCodePopup:A,openSignUpPopup:H,product:D,creditsRedemption:V}=Y(),{usedPoints:T=0,availablePoints:ye=0}=V??{},[Q,z]=S(!1),u=j(()=>D?.payload?.components?.find(t=>t.componentKey==="ProductBenefits")?.data||{},[D?.payload]),[X,O]=S(!1),ee=de({variant:s}),{locale:b="us",copyWriting:te}=J(),R=ue(null),oe={...xe,...a},{activated:ne=!1}=i||{},{memberDiscount:g,commonCoupon:f,creditsRedemption:M,freeGift:$,bundle:_,paidShipping:ae,fullGift:U,levelDiscount:Z}=ee,o=j(()=>{const t=u?.benefitTabs?.find(p=>p?.value==="coupon")??{},l=u?.benefitTabs?.find(p=>p?.value==="membership")??{},L=u?.benefitTabs?.find(p=>p?.value==="installment")??{},P=u?.benefitTabs?.find(p=>p?.value==="pay")??{};return{couponBenefitData:t,membershipBenefitData:l,installmentBenefitData:L,payBenefitData:P}},[u]),x=[f?.enable?{...f.config,isAutoUse:k?.coupon>0,useAble:!0,borderStyle:"rounded",code:f?.config?.title??"",description:f?.config?.desc??"",onUseChange:t=>{const l=t?w?.codeSavings??0:0;y?.(l)},title:G(o?.couponBenefitData?.commonCoupon?.offCoupon,{discount:f?.config?.value_type=="percentage"?Math.abs(Number(f?.config?.value||0))+"%":C({amount:Math.abs(Number(f?.config?.fixed_value||0)),currencyCode:s.price.currencyCode,locale:b})})}:null,g.enable?{useAble:!0,isAutoUse:!!i?.email&&!!k?.member,title:G(o?.couponBenefitData?.member?.offMemberOnly,{amount:C({amount:g?.config?.amount??0,currencyCode:s.price.currencyCode,locale:b})}),description:n(F,{children:[i?.email?o?.couponBenefitData?.member?.memberDiscounts:o?.membershipBenefitData?.memberBenefitsNotLogin?.replace("{amount}",C({amount:g?.config?.amount??0,currencyCode:s.price.currencyCode,locale:b}))??""," ",i?.email?"":e("span",{role:"button",tabIndex:0,onClick:()=>m?.(),className:"underline",children:o?.couponBenefitData?.member?.loginNow})]}),borderStyle:"rounded",onUseChange:t=>{if(i?.email){const l=t?g?.config?.amount??0:0;return B?.(l),!0}else return m?.(),!1}}:null,Z.enable?{title:Z?.config?.title??"",description:Z?.config?.tag??"",borderStyle:"inset",bgImage:{url:o?.couponBenefitData?.levelDiscount?.bgImage}}:null,$.enable?{title:$?.config?.title??"",description:o?.couponBenefitData?.freeGift?.selectFreeGift,borderStyle:"inset",bgImage:{url:o?.couponBenefitData?.freeGift?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,_.enable?{title:`${o?.couponBenefitData?.bundle?.bundleSaveUpTo} ${C({amount:Math.max(..._?.config?.bundleList?.map(t=>t.savings??0)??[]),currencyCode:s.price.currencyCode,locale:b})}`,borderStyle:"inset",description:o?.couponBenefitData?.bundle?.bundleOffer.replace("{count}",_?.config?.bundleList?.length?.toString()??""),bgImage:{url:o?.couponBenefitData?.bundle?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,U.enable?{title:U?.config?.title??"",description:U?.config?.desc??"",borderStyle:"inset",bgImage:{url:o?.couponBenefitData?.fullGift?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,M.enable?{title:o?.couponBenefitData?.creditsRedemption?.creditsTitle,description:o?.couponBenefitData?.creditsRedemption?.creditsDesc,borderStyle:"inset",bgImage:{url:o?.couponBenefitData?.creditsRedemption?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null].filter(Boolean);K(()=>{E(x?.length?"coupon":"membership")},[x?.length]),K(()=>{z(!1)},[s?.id]);const[W,E]=S("coupon"),ie=()=>{A?.()},se=(t,l)=>{if(E(l),R.current){const L=R.current,P=t.currentTarget,p=P.offsetLeft-L.offsetWidth/2+P.offsetWidth/2;L.scrollTo({left:p,behavior:"smooth"})}},le=j(()=>u?.benefitTabs?.map(t=>t?.value==="coupon"&&!x?.length?null:t).filter(Boolean),[u,x]);return d?n(d,{className:"relative",onValueChange:t=>{E(t),z(t==="installment")},value:W,children:[e("div",{className:"absolute right-0 top-0 z-[1] h-[40px] w-[25px] rounded-xl bg-gradient-to-r from-transparent to-[#EAEAEC]"}),e(d.List,{ref:R,children:le?.map(t=>e(d.Trigger,{className:h(W===t.value&&"text-[#080A0F]"),value:t.value,onClick:l=>se(l,t?.value),children:t.label},t?.value))}),e("style",{global:!0,jsx:!0,children:`
           .benefits-tabs-content::-webkit-scrollbar {
             width: 4px; /* \u6EDA\u52A8\u6761\u5BBD\u5EA6 */
             height: 64px; /* \u6A2A\u5411\u6EDA\u52A8\u6761\u9AD8\u5EA6 */
@@ -32,8 +32,8 @@ import{Fragment as F,jsx as e,jsxs as n}from"react/jsx-runtime";import{Button as
           .benefits-tabs-content::-webkit-scrollbar-thumb:hover {
             background-color: rgba(100, 100, 100, 0.6);
           }
-        `}),g?.length?e(d.Content,{value:"coupon",className:"benefits-tabs-content lg-desktop:h-[240px] laptop-md:h-[196px] laptop:h-[220px] h-[180px] overflow-y-auto",children:e("div",{className:"lg-desktop:p-4 p-3",children:e(he,{coupons:g,textConfig:oe,benefitPayloadData:o})})}):null,e(d.Content,{value:"membership",className:C("benefits-tabs-content lg-desktop:h-[240px] laptop-md:h-[196px] laptop:h-[220px] h-[180px]",{"overflow-y-auto":i?.email}),children:n("div",{className:"lg-desktop:p-4 p-3",children:[n("div",{className:C("rounded-lg",{"benefits-tabs-content lg-desktop:h-[calc(240px-100px)] laptop-md:h-[calc(196px-80px)] laptop:h-[calc(220px-72px)] h-[calc(180px-73px)] overflow-y-auto":!i?.email}),children:[!i?.email&&e("h3",{className:"laptop-md:mb-2 mb-1 text-left text-lg font-bold !leading-[1.3]",children:o?.membershipBenefitData?.memberBenefitsNotLoginText}),n("ul",{className:`laptop-md:[&_li]:py-4 list-none
+        `}),x?.length?e(d.Content,{value:"coupon",className:"benefits-tabs-content lg-desktop:h-[240px] laptop-md:h-[196px] laptop:h-[220px] h-[180px] overflow-y-auto",children:e("div",{className:"lg-desktop:p-4 p-3",children:e(he,{coupons:x,textConfig:oe,benefitPayloadData:o})})}):null,e(d.Content,{value:"membership",className:h("benefits-tabs-content lg-desktop:h-[240px] laptop-md:h-[196px] laptop:h-[220px] h-[180px]",{"overflow-y-auto":i?.email}),children:n("div",{className:"lg-desktop:p-4 p-3",children:[n("div",{className:h("rounded-lg",{"benefits-tabs-content lg-desktop:h-[calc(240px-100px)] laptop-md:h-[calc(196px-80px)] laptop:h-[calc(220px-72px)] h-[calc(180px-73px)] overflow-y-auto":!i?.email}),children:[!i?.email&&e("h3",{className:"laptop-md:mb-2 mb-1 text-left text-lg font-bold !leading-[1.3]",children:o?.membershipBenefitData?.memberBenefitsNotLoginText}),n("ul",{className:`laptop-md:[&_li]:py-4 list-none
               [&_li:first-child]:rounded-t-lg [&_li:last-child]:rounded-b-lg [&_li:last-child]:last:border-b-0 [&_li]:flex
               [&_li]:items-center [&_li]:gap-2 [&_li]:border-b [&_li]:border-b-[#E4E5E6] [&_li]:bg-white [&_li]:px-4 [&_li]:py-[10px]
-              [&_li]:text-left`,children:[M.enable?n("li",{children:[e("svg",{className:"laptop-md:size-6 size-4",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM17 13C17.5523 13 18 13.4477 18 14C18 14.5523 17.5523 15 17 15H9.41406L9.70703 15.293C10.0976 15.6835 10.0976 16.3165 9.70703 16.707C9.31651 17.0976 8.68349 17.0976 8.29297 16.707L6.29297 14.707C6.00697 14.421 5.92139 13.9909 6.07617 13.6172C6.23098 13.2436 6.59558 13 7 13H17ZM14.293 7.29297C14.6835 6.90244 15.3165 6.90244 15.707 7.29297L17.707 9.29297C17.993 9.57897 18.0786 10.0091 17.9238 10.3828C17.769 10.7564 17.4044 11 17 11H7C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9H14.5859L14.293 8.70703C13.9024 8.31651 13.9024 7.68349 14.293 7.29297Z",fill:"#1D1D1F"})}),e(c,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",children:!ne&&i?.email?n(F,{children:[o?.membershipBenefitData?.creditsAfterActivation,e("span",{role:"button",tabIndex:0,onClick:()=>ie(),className:"underline",children:o?.membershipBenefitData?.active})]}):M?.config?.label?.replace("{{amount}}",x({amount:M?.config?.amount??0,currencyCode:s.price.currencyCode,locale:m}))})]}):null,b.enable&&n("li",{className:"justify-between",children:[n("div",{className:"flex gap-2",children:[e("svg",{xmlns:"http://www.w3.org/2000/svg",className:"laptop-md:size-6 size-4",viewBox:"0 0 24 24",fill:"none",children:e("path",{d:"M20 3.5C21.6569 3.5 23 4.84315 23 6.5V9.65625C23 10.0791 22.7342 10.4566 22.3359 10.5986C21.6665 10.8372 21.1816 11.4844 21.1816 12.25C21.1816 13.0156 21.6665 13.6628 22.3359 13.9014C22.7342 14.0434 23 14.4209 23 14.8438V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V14.8438L1.01172 14.6875C1.06803 14.3301 1.31557 14.0256 1.66406 13.9014C2.33345 13.6628 2.81836 13.0156 2.81836 12.25C2.81836 11.4844 2.33345 10.8372 1.66406 10.5986C1.26583 10.4566 1 10.0791 1 9.65625V6.5C1 4.84315 2.34315 3.5 4 3.5H20ZM4 5.5C3.44772 5.5 3 5.94772 3 6.5V9.03125C4.08987 9.68678 4.81836 10.8833 4.81836 12.25C4.81836 13.6165 4.08963 14.8122 3 15.4678V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V15.4678C19.9104 14.8122 19.1816 13.6165 19.1816 12.25C19.1816 10.8833 19.9101 9.68677 21 9.03125V6.5C21 5.94772 20.5523 5.5 20 5.5H4ZM15.793 6.79297C16.1835 6.40244 16.8165 6.40244 17.207 6.79297C17.5976 7.18349 17.5976 7.81651 17.207 8.20703L8.20703 17.207C7.81651 17.5976 7.18349 17.5976 6.79297 17.207C6.40244 16.8165 6.40244 16.1835 6.79297 15.793L15.793 6.79297ZM15.25 13.25C16.3546 13.25 17.25 14.1454 17.25 15.25C17.25 16.3546 16.3546 17.25 15.25 17.25C14.1454 17.25 13.25 16.3546 13.25 15.25C13.25 14.1454 14.1454 13.25 15.25 13.25ZM15.25 14.75C14.9739 14.75 14.75 14.9739 14.75 15.25C14.75 15.5261 14.9739 15.75 15.25 15.75C15.5261 15.75 15.75 15.5261 15.75 15.25C15.75 14.9739 15.5261 14.75 15.25 14.75ZM8.75 6.75C9.85457 6.75 10.75 7.64543 10.75 8.75C10.75 9.85457 9.85457 10.75 8.75 10.75C7.64543 10.75 6.75 9.85457 6.75 8.75C6.75 7.64543 7.64543 6.75 8.75 6.75ZM8.75 8.25C8.47386 8.25 8.25 8.47386 8.25 8.75C8.25 9.02614 8.47386 9.25 8.75 9.25C9.02614 9.25 9.25 9.02614 9.25 8.75C9.25 8.47386 9.02614 8.25 8.75 8.25Z",fill:"#1D1D1F"})}),e(c,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",children:G(o?.membershipBenefitData?.forNewMember,{amount:x({amount:b?.config?.amount??0,currencyCode:s.price.currencyCode,locale:m})})})]}),!!i?.email&&e(I,{})]}),o?.membershipBenefitData?.equities?.map((t,l)=>t.modalText?n("li",{className:"justify-between gap-2",children:[n("button",{onClick:()=>r?.({title:t.label,content:t.modalText}),className:"flex justify-between",children:[e(N,{source:t.icon,alt:t.text,className:"laptop-md:size-6 size-4 shrink-0"}),e(c,{className:"x:text-[14px] text-wrap text-left text-[16px] font-bold",children:t.text})]},l),!!i?.email&&e(I,{})]},l):n("li",{className:"justify-between",children:[n("div",{className:"flex items-center gap-2",children:[e(N,{source:t.icon,alt:t.text,className:"laptop-md:size-6 size-4 shrink-0"}),e(c,{as:"p",className:"x:text-[14px] text-wrap text-left text-[16px] font-bold",children:t.label})]}),!!i?.email&&e(I,{})]},l)),ae.enable?n("li",{className:"justify-between",children:[n("div",{className:"flex gap-2",children:[e("svg",{className:"laptop-md:size-6 size-4",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M19 3C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H10V16H21C21.5523 16 22 16.4477 22 17C22 17.5523 21.5523 18 21 18H19.9961C19.9961 19.6559 18.6547 21 16.998 21C15.3414 21 14 19.6559 14 18H10C10 19.6568 8.65684 21 7 21C5.34317 21 4 19.6568 4 18H2C1.44772 18 1 17.5523 1 17V10.6738L1.00488 10.5771C1.02632 10.3554 1.12145 10.146 1.27637 9.9834L4.77637 6.31055L4.84961 6.24023C5.02993 6.08586 5.26042 6 5.5 6H8V5C8 3.89544 8.89541 3 10 3H19ZM6.00488 18.1025C6.05622 18.6067 6.48234 19 7 19C7.51766 19 7.94378 18.6067 7.99512 18.1025L8 18H6L6.00488 18.1025ZM16.0049 18.1025C16.0561 18.6074 16.4823 19 16.998 19C17.5138 19 17.94 18.6074 17.9912 18.1025L17.9961 18H16L16.0049 18.1025ZM3 11.0723V16H8V8H5.92773L3 11.0723ZM21.6621 6.8252C22.0348 6.41765 22.6676 6.38902 23.0752 6.76172C23.4827 7.13443 23.5104 7.76725 23.1377 8.1748L18.0518 13.7363C17.6625 14.162 17.003 14.1954 16.5732 13.8105L13.333 10.9092C12.9216 10.5408 12.8865 9.90853 13.2549 9.49707C13.6232 9.08565 14.2555 9.05066 14.667 9.41895L17.208 11.6943L21.6621 6.8252Z",fill:"#1D1D1F"})}),e(c,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",children:o?.membershipBenefitData?.expressShipping})]}),!!i?.email&&e(I,{})]}):null]})]}),!i?.email&&e("div",{className:"laptop-md:pt-4 pt-2",children:e(re,{variant:"primary",className:"w-full",onClick:()=>H?.(),children:te?.signUp})})]})}),n(d.Content,{value:"pay",className:"benefits-tabs-content lg-desktop:h-[240px] laptop-md:h-[196px] laptop:h-[220px] h-[180px] overflow-y-auto ",children:[n("div",{className:"lg-desktop:p-4 p-3",children:[e(q,{size:2,className:"mb-2 text-left text-lg font-bold",children:o?.payBenefitData?.payMethod}),n("div",{className:"lg-desktop:p-4 flex items-center justify-between gap-2 rounded-lg bg-white p-3",children:[n("div",{className:"flex items-center gap-2",children:[e(N,{source:o?.payBenefitData?.icon,className:"laptop-md:size-[70px] laptop-md:h-[34px] size-[40px] h-[20px] shrink-0"}),e(c,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",html:o?.payBenefitData?.withCheckout})]}),e("button",{className:"hover:text-brand-0 laptop-md:text-[16px] whitespace-nowrap text-sm font-bold underline",onClick:()=>O(!0),children:o?.payBenefitData?.learnMore})]})]}),e(be,{showModal:X,closeModal:()=>O(!1),children:e(N,{source:o?.payBenefitData?.payImage})})]}),e(d.Content,{value:"installment",forceMount:!0,className:C("benefits-tabs-content lg-desktop:h-[240px] laptop-md:h-[196px] laptop:h-[220px] h-[180px] overflow-y-auto ",Q?"block":"hidden"),children:n("div",{className:"lg-desktop:p-4 p-3",children:[e(q,{size:2,className:"mb-2 text-left text-lg font-bold",children:o?.installmentBenefitData?.flexibleInstallment}),e("div",{className:"lg-desktop:p-4 overflow-hidden rounded-lg bg-white p-3",children:h})]})})]}):null},I=a=>e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",...a,children:e("path",{d:"M4 9.19472L8.51935 13.667L16.2668 6.00024",stroke:"#2BBC4F",strokeWidth:"1.67",strokeLinecap:"round",strokeLinejoin:"round"})});var Ve=ge(ve);export{Ve as default};
+              [&_li]:text-left`,children:[M.enable?n("li",{children:[e("svg",{className:"laptop-md:size-6 size-4",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM17 13C17.5523 13 18 13.4477 18 14C18 14.5523 17.5523 15 17 15H9.41406L9.70703 15.293C10.0976 15.6835 10.0976 16.3165 9.70703 16.707C9.31651 17.0976 8.68349 17.0976 8.29297 16.707L6.29297 14.707C6.00697 14.421 5.92139 13.9909 6.07617 13.6172C6.23098 13.2436 6.59558 13 7 13H17ZM14.293 7.29297C14.6835 6.90244 15.3165 6.90244 15.707 7.29297L17.707 9.29297C17.993 9.57897 18.0786 10.0091 17.9238 10.3828C17.769 10.7564 17.4044 11 17 11H7C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9H14.5859L14.293 8.70703C13.9024 8.31651 13.9024 7.68349 14.293 7.29297Z",fill:"#1D1D1F"})}),e(c,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",children:!ne&&i?.email?n(F,{children:[o?.membershipBenefitData?.creditsAfterActivation,e("span",{role:"button",tabIndex:0,onClick:()=>ie(),className:"underline",children:o?.membershipBenefitData?.active})]}):M?.config?.label?.replace("{{amount}}",C({amount:M?.config?.amount??0,currencyCode:s.price.currencyCode,locale:b}))})]}):null,g.enable&&n("li",{className:"justify-between",children:[n("div",{className:"flex gap-2",children:[e("svg",{xmlns:"http://www.w3.org/2000/svg",className:"laptop-md:size-6 size-4",viewBox:"0 0 24 24",fill:"none",children:e("path",{d:"M20 3.5C21.6569 3.5 23 4.84315 23 6.5V9.65625C23 10.0791 22.7342 10.4566 22.3359 10.5986C21.6665 10.8372 21.1816 11.4844 21.1816 12.25C21.1816 13.0156 21.6665 13.6628 22.3359 13.9014C22.7342 14.0434 23 14.4209 23 14.8438V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V14.8438L1.01172 14.6875C1.06803 14.3301 1.31557 14.0256 1.66406 13.9014C2.33345 13.6628 2.81836 13.0156 2.81836 12.25C2.81836 11.4844 2.33345 10.8372 1.66406 10.5986C1.26583 10.4566 1 10.0791 1 9.65625V6.5C1 4.84315 2.34315 3.5 4 3.5H20ZM4 5.5C3.44772 5.5 3 5.94772 3 6.5V9.03125C4.08987 9.68678 4.81836 10.8833 4.81836 12.25C4.81836 13.6165 4.08963 14.8122 3 15.4678V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V15.4678C19.9104 14.8122 19.1816 13.6165 19.1816 12.25C19.1816 10.8833 19.9101 9.68677 21 9.03125V6.5C21 5.94772 20.5523 5.5 20 5.5H4ZM15.793 6.79297C16.1835 6.40244 16.8165 6.40244 17.207 6.79297C17.5976 7.18349 17.5976 7.81651 17.207 8.20703L8.20703 17.207C7.81651 17.5976 7.18349 17.5976 6.79297 17.207C6.40244 16.8165 6.40244 16.1835 6.79297 15.793L15.793 6.79297ZM15.25 13.25C16.3546 13.25 17.25 14.1454 17.25 15.25C17.25 16.3546 16.3546 17.25 15.25 17.25C14.1454 17.25 13.25 16.3546 13.25 15.25C13.25 14.1454 14.1454 13.25 15.25 13.25ZM15.25 14.75C14.9739 14.75 14.75 14.9739 14.75 15.25C14.75 15.5261 14.9739 15.75 15.25 15.75C15.5261 15.75 15.75 15.5261 15.75 15.25C15.75 14.9739 15.5261 14.75 15.25 14.75ZM8.75 6.75C9.85457 6.75 10.75 7.64543 10.75 8.75C10.75 9.85457 9.85457 10.75 8.75 10.75C7.64543 10.75 6.75 9.85457 6.75 8.75C6.75 7.64543 7.64543 6.75 8.75 6.75ZM8.75 8.25C8.47386 8.25 8.25 8.47386 8.25 8.75C8.25 9.02614 8.47386 9.25 8.75 9.25C9.02614 9.25 9.25 9.02614 9.25 8.75C9.25 8.47386 9.02614 8.25 8.75 8.25Z",fill:"#1D1D1F"})}),e(c,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",children:G(o?.membershipBenefitData?.forNewMember,{amount:C({amount:g?.config?.amount??0,currencyCode:s.price.currencyCode,locale:b})})})]}),!!i?.email&&e(I,{})]}),o?.membershipBenefitData?.equities?.map((t,l)=>t.modalText?n("li",{className:"justify-between gap-2",children:[n("button",{onClick:()=>r?.({title:t.label,content:t.modalText}),className:"flex justify-between",children:[e(N,{source:t.icon,alt:t.text,className:"laptop-md:size-6 size-4 shrink-0"}),e(c,{className:"x:text-[14px] text-wrap text-left text-[16px] font-bold",children:t.text})]},l),!!i?.email&&e(I,{})]},l):n("li",{className:"justify-between",children:[n("div",{className:"flex items-center gap-2",children:[e(N,{source:t.icon,alt:t.text,className:"laptop-md:size-6 size-4 shrink-0"}),e(c,{as:"p",className:"x:text-[14px] text-wrap text-left text-[16px] font-bold",children:t.label})]}),!!i?.email&&e(I,{})]},l)),ae.enable?n("li",{className:"justify-between",children:[n("div",{className:"flex gap-2",children:[e("svg",{className:"laptop-md:size-6 size-4",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M19 3C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H10V16H21C21.5523 16 22 16.4477 22 17C22 17.5523 21.5523 18 21 18H19.9961C19.9961 19.6559 18.6547 21 16.998 21C15.3414 21 14 19.6559 14 18H10C10 19.6568 8.65684 21 7 21C5.34317 21 4 19.6568 4 18H2C1.44772 18 1 17.5523 1 17V10.6738L1.00488 10.5771C1.02632 10.3554 1.12145 10.146 1.27637 9.9834L4.77637 6.31055L4.84961 6.24023C5.02993 6.08586 5.26042 6 5.5 6H8V5C8 3.89544 8.89541 3 10 3H19ZM6.00488 18.1025C6.05622 18.6067 6.48234 19 7 19C7.51766 19 7.94378 18.6067 7.99512 18.1025L8 18H6L6.00488 18.1025ZM16.0049 18.1025C16.0561 18.6074 16.4823 19 16.998 19C17.5138 19 17.94 18.6074 17.9912 18.1025L17.9961 18H16L16.0049 18.1025ZM3 11.0723V16H8V8H5.92773L3 11.0723ZM21.6621 6.8252C22.0348 6.41765 22.6676 6.38902 23.0752 6.76172C23.4827 7.13443 23.5104 7.76725 23.1377 8.1748L18.0518 13.7363C17.6625 14.162 17.003 14.1954 16.5732 13.8105L13.333 10.9092C12.9216 10.5408 12.8865 9.90853 13.2549 9.49707C13.6232 9.08565 14.2555 9.05066 14.667 9.41895L17.208 11.6943L21.6621 6.8252Z",fill:"#1D1D1F"})}),e(c,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",children:o?.membershipBenefitData?.expressShipping})]}),!!i?.email&&e(I,{})]}):null]})]}),!i?.email&&e("div",{className:"laptop-md:pt-4 pt-2",children:e(re,{variant:"primary",className:"w-full",onClick:()=>H?.(),children:te?.signUp})})]})}),n(d.Content,{value:"pay",className:"benefits-tabs-content lg-desktop:h-[240px] laptop-md:h-[196px] laptop:h-[220px] h-[180px] overflow-y-auto ",children:[n("div",{className:"lg-desktop:p-4 p-3",children:[e(q,{size:2,className:"mb-2 text-left text-lg font-bold",children:o?.payBenefitData?.payMethod}),n("div",{className:"lg-desktop:p-4 flex items-center justify-between gap-2 rounded-lg bg-white p-3",children:[n("div",{className:"flex items-center gap-2",children:[e(N,{source:o?.payBenefitData?.icon,className:"laptop-md:size-[70px] laptop-md:h-[34px] size-[40px] h-[20px] shrink-0"}),e(c,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",html:o?.payBenefitData?.withCheckout})]}),e("button",{className:"hover:text-brand-0 laptop-md:text-[16px] whitespace-nowrap text-sm font-bold underline",onClick:()=>O(!0),children:o?.payBenefitData?.learnMore})]})]}),e(be,{showModal:X,closeModal:()=>O(!1),children:e(N,{source:o?.payBenefitData?.payImage})})]}),e(d.Content,{value:"installment",forceMount:!0,className:h("benefits-tabs-content lg-desktop:h-[240px] laptop-md:h-[196px] laptop:h-[220px] h-[180px] overflow-y-auto ",Q?"block":"hidden"),children:n("div",{className:"lg-desktop:p-4 p-3",children:[e(q,{size:2,className:"mb-2 text-left text-lg font-bold",children:o?.installmentBenefitData?.flexibleInstallment}),e("div",{className:"lg-desktop:p-4 overflow-hidden rounded-lg bg-white p-3",children:v})]})})]}):null},I=a=>e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",...a,children:e("path",{d:"M4 9.19472L8.51935 13.667L16.2668 6.00024",stroke:"#2BBC4F",strokeWidth:"1.67",strokeLinecap:"round",strokeLinejoin:"round"})});var Ve=ge(ve);export{Ve as default};
 //# sourceMappingURL=BenefitsTab.js.map