npm - @anker-in/campaign-ui - Versions diffs - 0.5.0-beta.8 → 0.5.0 - Mend

@anker-in/campaign-ui 0.5.0-beta.8 → 0.5.0

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 (158) hide show

package/dist/esm/components/memberPopup/panels/ActivitiesSubscribePanel.d.ts CHANGED Viewed

@@ -1,10 +1,7 @@
 import type { SubscribeModalCopy } from '../type';
 type Props = {
-    onSuccess?: () => void;
     copy: SubscribeModalCopy;
     email?: string;
-    hideForm: boolean;
-    onHideForm: () => void;
 };
-export default function ActivitiesSubscribeModal({ onSuccess, copy, email: initialEmail, hideForm, onHideForm, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function ActivitiesSubscribeModal({ copy, email: initialEmail }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/memberPopup/panels/ActivitiesSubscribePanel.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as J,jsx as t,jsxs as a}from"react/jsx-runtime";import{useCallback as A,useEffect as B,useState as l}from"react";import{Checkbox as D,Picture as R,Text as d}from"@anker-in/headless-ui";import{classNames as p,useHeadlessContext as O}from"@anker-in/lib";import c from"js-cookie";import{parse as U}from"query-string";import{emailValidate as j}from"../../credits/context/utils";import{useMemberPopupContext as E}from"../context/provider";import{ROUNDED_BRANDS as F}from"../../../constants";function H(){if(typeof window>"u")return{register_source:""};const{search:o,href:e}=window.location,r=U(o);return{fbuy_ref_code:c.get("fbuy_ref_code"),ref:c.get("ref_ads"),inviter_code:r.ic??r.inviter_code??c.get("inviter_code"),register_source:r.redirect??c.get("reg_source")??e}}async function I(o){if(typeof window>"u"||!window?.grecaptcha?.execute||!o)return"";try{return await window.grecaptcha.execute(o,{action:"activity"})}catch{return""}}function q({onSuccess:o,copy:e,email:r,hideForm:N,onHideForm:x}){const{alpcConfig:C}=E(),{locale:b}=C,{brand:M,storeDomain:g,recaptchaSitekey:S}=O(),f=F.includes(M),[u,k]=l(!1),[n,h]=l(r??""),[m,s]=l(""),[y,v]=l(""),[T,_]=l(!1);B(()=>{r&&h(r)},[r]);const L=A(async()=>{if(s(""),!n)return s("Please fill in your email");if(!j(n))return s("Invalid email address");if(!u)return s("Please agree to the policy");_(!0);const{register_source:i}=H(),P=await I(S||"");try{const w=await(await fetch("/api/multipass/rainbowbridge/activities",{method:"POST",headers:{"Content-Type":"application/json","current-language":b,"X-Recaptcha-Token":P},body:JSON.stringify({email:n,register_source:i,shopify_domain:g,single_brand_subscribe:e.single_brand_subscribe??!0,genre:e.genre??e.dealsType??"",sub_brand_type:e.sub_brand_type??""})})).json();w.errors?s(w.errors??"Error occurred"):(v(e.successTips??"Subscribed successfully!"),o?.(),setTimeout(()=>{x(),v("")},3e3))}catch{s("Network error")}finally{_(!1)}},[n,u,b,g,e,o,x]);return a("div",{className:"flex flex-col gap-[16px] text-center",children:[!N&&a(J,{children:[t(d,{className:"text-[22px] font-bold",html:e.title}),e.desc&&t(d,{className:"text-left text-[16px] font-semibold text-[#1f2021]",html:e.desc}),t("input",{className:p("h-[46px] w-full border px-[14px] text-[16px] outline-none placeholder:text-[#999]",m?"border-[#f84d4f]":"border-[#d8d8d8]",f?"rounded-[4px]":"rounded-none"),placeholder:e.placeholder,value:n,onChange:i=>{s(""),h(i.target.value.trim())}}),a("div",{className:"flex w-full items-start gap-[8px]",children:[t(D,{checked:u,onCheckedChange:()=>k(i=>!i),className:"border-[#1d1d1f]"}),t("label",{className:"text-left text-[14px] font-semibold text-[#777] [&_a]:underline",dangerouslySetInnerHTML:{__html:e.policy??""}})]}),t("button",{className:p("w-full cursor-pointer bg-[#080a0f] py-[14px] text-[14px] font-[700] text-white disabled:opacity-60",f?"rounded-[4px]":"rounded-none"),disabled:T,onClick:L,children:e.buttonLabel??"Subscribe"}),m&&t("div",{className:"text-left text-[16px] font-semibold text-[#f84d4f]",children:t(d,{html:m})}),t("div",{className:"text-left text-[16px] font-semibold text-[#52c41a]",children:t(d,{html:y})})]}),e.promo&&a("div",{className:"flex flex-col text-left",children:[a("div",{className:"flex flex-col gap-[8px]",children:[e.promo?.title&&t("h3",{className:"text-[20px] font-[700] leading-[1.2] text-[#080a0f]",children:e.promo?.title}),e.promo.description&&t("p",{className:"text-[14px] leading-[1.5] text-[#1e2024]",children:e.promo.description}),e.promo.learnMoreLabel&&e.promo.learnMoreUrl&&a("a",{href:e.promo.learnMoreUrl,target:"_blank",rel:"noopener noreferrer",className:"flex items-center gap-[4px] text-[14px] font-[700] text-[#080a0f] underline",children:[e.promo.learnMoreLabel,t("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:t("path",{d:"M5.52827 3.52876C5.78862 3.26841 6.21063 3.26841 6.47098 3.52876L10.471 7.52876C10.7313 7.78911 10.7313 8.21112 10.471 8.47147L6.47098 12.4715C6.21063 12.7318 5.78862 12.7318 5.52827 12.4715C5.26792 12.2111 5.26792 11.7891 5.52827 11.5288L9.05692 8.00011L5.52827 4.47147C5.26792 4.21112 5.26792 3.78911 5.52827 3.52876Z",fill:"#080A0F"})})]})]}),e.promo.image?.url&&t(R,{source:e.promo.image.url,alt:e.promo.image.alt??"",className:p("h-[100px] mt-[8px] w-full object-cover",f?"rounded-[8px]":"rounded-none")})]})]})}export{q as default};
+import{jsx as t,jsxs as c}from"react/jsx-runtime";import{useCallback as y,useEffect as A,useState as i}from"react";import{Button as U,Checkbox as B,Picture as D,Text as a}from"@anker-in/headless-ui";import{gaTrack as R,classNames as C,useHeadlessContext as E}from"@anker-in/lib";import d from"js-cookie";import{parse as F}from"query-string";import{emailValidate as H}from"../../credits/context/utils";import{useMemberPopupContext as I}from"../context/provider";import{ROUNDED_BRANDS as O}from"../../../constants";function j(){if(typeof window>"u")return{register_source:""};const{search:e,href:o}=window.location,n=F(e);return{fbuy_ref_code:d.get("fbuy_ref_code"),ref:d.get("ref_ads"),inviter_code:n.ic??n.inviter_code??d.get("inviter_code"),register_source:n.redirect??d.get("reg_source")??o}}async function q(e){if(typeof window>"u"||!window?.grecaptcha?.execute||!e)return"";try{return await window.grecaptcha.execute(e,{action:"activity"})}catch{return""}}function z({copy:e,email:o}){const{alpcConfig:n,setIsSubscribeSuccess:f,pageHandle:p}=I(),{locale:b}=n,{brand:N,storeDomain:x,recaptchaSitekey:M}=E(),g=O.includes(N),[u,S]=i(e.policyDefaultChecked??!1),[l,h]=i(o??""),[_,s]=i(""),[k,v]=i(""),[L,w]=i(!1);A(()=>{o&&h(o)},[o]);const T=y(async()=>{if(s(""),!l)return s("Please fill in your email");if(!H(l))return s("Invalid email address");if(!u)return s("Please agree to the policy");w(!0);const{register_source:r}=j(),P=await q(M||"");try{const m=await(await fetch("/api/multipass/rainbowbridge/activities",{method:"POST",headers:{"Content-Type":"application/json","current-language":b,"X-Recaptcha-Token":P},body:JSON.stringify({email:l,register_source:r,shopify_domain:x,single_brand_subscribe:e.single_brand_subscribe??!0,genre:e.genre??e.dealsType??"",sub_brand_type:e.sub_brand_type??""})})).json();m?.data?.is_new_subscribe?m?.data?.errors?s(m?.data?.errors??"Error occurred"):(v(e.successTips??"Subscribed successfully!"),f(!0),R({event:"ga4Event",event_name:"subscribe",event_parameters:{page_group:e.dealsType??e.genre??"",position:"sticky",info:"Member Floating Window"}})):v(e.subscribedLabel??"You've already subscribed!")}catch{s("Network error")}finally{w(!1)}},[l,u,b,x,e,f]);return c("div",{className:"flex flex-col",children:[t(a,{className:"text-[22px] font-bold leading-[1.2]",html:e.title}),e.desc&&t(a,{className:"text-[16px] mt-[16px] font-bold text-[#1E2024]",html:e.desc}),t("input",{className:C("h-[46px] w-full border mt-[8px] px-[14px] text-[16px] outline-none placeholder:text-[#999]",g?"rounded-[4px]":"rounded-none"),placeholder:e.placeholder,value:l,onChange:r=>{s(""),h(r.target.value.trim())}}),c("div",{className:"flex w-full mt-[8px] items-start gap-[8px]",children:[t(B,{checked:u,onCheckedChange:()=>S(r=>!r),className:"border-[#1d1d1f] mt-[2px]"}),t("label",{className:"text-left text-[14px] font-bold text-[#4A4C56] [&_a]:underline",dangerouslySetInnerHTML:{__html:e.policy??""}})]}),t(U,{className:"w-full mt-[16px]",size:"base",loading:L,onClick:T,children:e.buttonLabel??"Subscribe"}),_&&t("div",{className:"text-left mt-[4px] text-[16px] font-semibold text-[#f84d4f]",children:t(a,{html:_})}),t("div",{className:"text-left mt-[4px] text-[16px] font-semibold text-[#52c41a]",children:t(a,{html:k})}),e.promo&&c("div",{className:"flex mt-[32px] flex-col text-left",children:[c("div",{className:"flex flex-col",children:[e.promo?.title&&t(a,{className:"text-[18px] font-bold leading-[1.2]",html:e.promo.title}),e.promo.description&&t(a,{className:"text-[14px] text-[#080A0F] mt-[8px] font-bold",html:e.promo.description}),e.promo.learnMoreLabel&&e.promo.learnMoreUrl&&c("a",{href:(()=>{try{if(!p)return e.promo.learnMoreUrl;const r=new URL(e.promo.learnMoreUrl,window.location.href);return r.searchParams.set("ref",`${p}_subscribe`),r.toString()}catch{return e.promo.learnMoreUrl}})(),target:"_blank",rel:"noopener noreferrer",className:"flex mt-[8px] items-center gap-[4px] text-[14px] font-bold",children:[e.promo.learnMoreLabel,t("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:t("path",{d:"M5.52827 3.52876C5.78862 3.26841 6.21063 3.26841 6.47098 3.52876L10.471 7.52876C10.7313 7.78911 10.7313 8.21112 10.471 8.47147L6.47098 12.4715C6.21063 12.7318 5.78862 12.7318 5.52827 12.4715C5.26792 12.2111 5.26792 11.7891 5.52827 11.5288L9.05692 8.00011L5.52827 4.47147C5.26792 4.21112 5.26792 3.78911 5.52827 3.52876Z",fill:"#080A0F"})})]})]}),e.promo.image?.url&&t(D,{source:e.promo.image.url,alt:e.promo.image.alt??"",className:C("h-[100px] mt-[8px] w-full object-cover",g?"rounded-[8px]":"rounded-none")})]})]})}export{z as default};
 //# sourceMappingURL=ActivitiesSubscribePanel.js.map

package/dist/esm/components/memberPopup/panels/ActivitiesSubscribePanel.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/memberPopup/panels/ActivitiesSubscribePanel.tsx"],
-  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'\nimport { classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport Cookies from 'js-cookie'\nimport { parse } from 'query-string'\nimport { emailValidate } from '../../credits/context/utils'\nimport { useMemberPopupContext } from '../context/provider'\nimport type { SubscribeModalCopy } from '../type'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\ntype Props = {\n  onSuccess?: () => void\n  copy: SubscribeModalCopy\n  email?: string\n  hideForm: boolean\n  onHideForm: () => void\n}\n\nfunction getAdCookie() {\n  if (typeof window === 'undefined') return { register_source: '' }\n  const { search, href } = window.location\n  const query = parse(search)\n  return {\n    fbuy_ref_code: Cookies.get('fbuy_ref_code'),\n    ref: Cookies.get('ref_ads'),\n    inviter_code: query.ic ?? query.inviter_code ?? Cookies.get('inviter_code'),\n    register_source: query.redirect ?? Cookies.get('reg_source') ?? href,\n  }\n}\n\nasync function getRecaptchaToken(sitekey: string): Promise<string> {\n  if (typeof window === 'undefined' || !window?.grecaptcha?.execute) return ''\n  if (!sitekey) return ''\n  try {\n    return await window.grecaptcha.execute(sitekey, { action: 'activity' })\n  } catch {\n    return ''\n  }\n}\n\nexport default function ActivitiesSubscribeModal({\n  onSuccess,\n  copy,\n  email: initialEmail,\n  hideForm,\n  onHideForm,\n}: Props) {\n  const { alpcConfig } = useMemberPopupContext()\n  const { locale } = alpcConfig\n  const { brand: headlessBrand, storeDomain, recaptchaSitekey } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(headlessBrand)\n  const [policy, setPolicy] = useState(false)\n  const [email, setEmail] = useState(initialEmail ?? '')\n  const [errorMessage, setErrorMessage] = useState('')\n  const [successMessage, setSuccessMessage] = useState('')\n  const [loading, setLoading] = useState(false)\n\n  useEffect(() => {\n    if (initialEmail) setEmail(initialEmail)\n  }, [initialEmail])\n\n  const handleSubmit = useCallback(async () => {\n    setErrorMessage('')\n    if (!email) return setErrorMessage('Please fill in your email')\n    if (!emailValidate(email)) return setErrorMessage('Invalid email address')\n    if (!policy) return setErrorMessage('Please agree to the policy')\n\n    setLoading(true)\n    const { register_source } = getAdCookie()\n    const recaptchaToken = await getRecaptchaToken(recaptchaSitekey || '')\n    try {\n      const response = await fetch('/api/multipass/rainbowbridge/activities', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n          'current-language': locale,\n          'X-Recaptcha-Token': recaptchaToken,\n        },\n        body: JSON.stringify({\n          email,\n          register_source,\n          shopify_domain: storeDomain,\n          single_brand_subscribe: copy.single_brand_subscribe ?? true,\n          genre: copy.genre ?? copy.dealsType ?? '',\n          sub_brand_type: copy.sub_brand_type ?? '',\n        }),\n      })\n      const result = await response.json()\n      if (!result.errors) {\n        setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')\n        onSuccess?.()\n        setTimeout(() => {\n          onHideForm()\n          setSuccessMessage('')\n        }, 3000)\n      } else {\n        setErrorMessage(result.errors ?? 'Error occurred')\n      }\n    } catch {\n      setErrorMessage('Network error')\n    } finally {\n      setLoading(false)\n    }\n  }, [email, policy, locale, storeDomain, copy, onSuccess, onHideForm])\n\n  return (\n    <div className=\"flex flex-col gap-[16px] text-center\">\n      {!hideForm && (\n        <>\n          <Text className=\"text-[22px] font-bold\" html={copy.title} />\n          {copy.desc && <Text className=\"text-left text-[16px] font-semibold text-[#1f2021]\" html={copy.desc} />}\n\n          <input\n            className={cn(\n              'h-[46px] w-full border px-[14px] text-[16px] outline-none placeholder:text-[#999]',\n              errorMessage ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',\n              rounded ? 'rounded-[4px]' : 'rounded-none'\n            )}\n            placeholder={copy.placeholder}\n            value={email}\n            onChange={e => {\n              setErrorMessage('')\n              setEmail(e.target.value.trim())\n            }}\n          />\n\n          <div className=\"flex w-full items-start gap-[8px]\">\n            <Checkbox checked={policy} onCheckedChange={() => setPolicy(v => !v)} className=\"border-[#1d1d1f]\" />\n            <label\n              className=\"text-left text-[14px] font-semibold text-[#777] [&_a]:underline\"\n              dangerouslySetInnerHTML={{ __html: copy.policy ?? '' }}\n            />\n          </div>\n\n          <button\n            className={cn(\n              'w-full cursor-pointer bg-[#080a0f] py-[14px] text-[14px] font-[700] text-white disabled:opacity-60',\n              rounded ? 'rounded-[4px]' : 'rounded-none'\n            )}\n            disabled={loading}\n            onClick={handleSubmit}\n          >\n            {copy.buttonLabel ?? 'Subscribe'}\n          </button>\n\n          {errorMessage && (\n            <div className=\"text-left text-[16px] font-semibold text-[#f84d4f]\">\n              <Text html={errorMessage} />\n            </div>\n          )}\n          <div className=\"text-left text-[16px] font-semibold text-[#52c41a]\">\n            <Text html={successMessage} />\n          </div>\n        </>\n      )}\n\n      {copy.promo && (\n        <div className=\"flex flex-col text-left\">\n          <div className=\"flex flex-col gap-[8px]\">\n            {copy.promo?.title && (\n              <h3 className=\"text-[20px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.promo?.title}</h3>\n            )}\n            {copy.promo.description && (\n              <p className=\"text-[14px] leading-[1.5] text-[#1e2024]\">{copy.promo.description}</p>\n            )}\n            {copy.promo.learnMoreLabel && copy.promo.learnMoreUrl && (\n              <a\n                href={copy.promo.learnMoreUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"flex items-center gap-[4px] text-[14px] font-[700] text-[#080a0f] underline\"\n              >\n                {copy.promo.learnMoreLabel}\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                  <path\n                    d=\"M5.52827 3.52876C5.78862 3.26841 6.21063 3.26841 6.47098 3.52876L10.471 7.52876C10.7313 7.78911 10.7313 8.21112 10.471 8.47147L6.47098 12.4715C6.21063 12.7318 5.78862 12.7318 5.52827 12.4715C5.26792 12.2111 5.26792 11.7891 5.52827 11.5288L9.05692 8.00011L5.52827 4.47147C5.26792 4.21112 5.26792 3.78911 5.52827 3.52876Z\"\n                    fill=\"#080A0F\"\n                  />\n                </svg>\n              </a>\n            )}\n          </div>\n          {copy.promo.image?.url && (\n            <Picture\n              source={copy.promo.image.url}\n              alt={copy.promo.image.alt ?? ''}\n              className={cn('h-[100px] mt-[8px] w-full object-cover', rounded ? 'rounded-[8px]' : 'rounded-none')}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useCallback", "useEffect", "useState", "Checkbox", "Picture", "Text", "cn", "useHeadlessContext", "Cookies", "parse", "emailValidate", "useMemberPopupContext", "ROUNDED_BRANDS", "getAdCookie", "search", "href", "query", "getRecaptchaToken", "sitekey", "ActivitiesSubscribeModal", "onSuccess", "copy", "initialEmail", "hideForm", "onHideForm", "alpcConfig", "locale", "headlessBrand", "storeDomain", "recaptchaSitekey", "rounded", "policy", "setPolicy", "email", "setEmail", "errorMessage", "setErrorMessage", "successMessage", "setSuccessMessage", "loading", "setLoading", "handleSubmit", "register_source", "recaptchaToken", "result", "e", "v"]
+  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'\nimport { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport Cookies from 'js-cookie'\nimport { parse } from 'query-string'\nimport { emailValidate } from '../../credits/context/utils'\nimport { useMemberPopupContext } from '../context/provider'\nimport type { SubscribeModalCopy } from '../type'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\ntype Props = {\n  copy: SubscribeModalCopy\n  email?: string\n}\n\nfunction getAdCookie() {\n  if (typeof window === 'undefined') return { register_source: '' }\n  const { search, href } = window.location\n  const query = parse(search)\n  return {\n    fbuy_ref_code: Cookies.get('fbuy_ref_code'),\n    ref: Cookies.get('ref_ads'),\n    inviter_code: query.ic ?? query.inviter_code ?? Cookies.get('inviter_code'),\n    register_source: query.redirect ?? Cookies.get('reg_source') ?? href,\n  }\n}\n\nasync function getRecaptchaToken(sitekey: string): Promise<string> {\n  if (typeof window === 'undefined' || !window?.grecaptcha?.execute) return ''\n  if (!sitekey) return ''\n  try {\n    return await window.grecaptcha.execute(sitekey, { action: 'activity' })\n  } catch {\n    return ''\n  }\n}\n\nexport default function ActivitiesSubscribeModal({ copy, email: initialEmail }: Props) {\n  const { alpcConfig, setIsSubscribeSuccess, pageHandle } = useMemberPopupContext()\n  const { locale } = alpcConfig\n  const { brand: headlessBrand, storeDomain, recaptchaSitekey } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(headlessBrand)\n  const [policy, setPolicy] = useState(copy.policyDefaultChecked ?? false)\n  const [email, setEmail] = useState(initialEmail ?? '')\n  const [errorMessage, setErrorMessage] = useState('')\n  const [successMessage, setSuccessMessage] = useState('')\n  const [loading, setLoading] = useState(false)\n\n  useEffect(() => {\n    if (initialEmail) setEmail(initialEmail)\n  }, [initialEmail])\n\n  const handleSubmit = useCallback(async () => {\n    setErrorMessage('')\n    if (!email) return setErrorMessage('Please fill in your email')\n    if (!emailValidate(email)) return setErrorMessage('Invalid email address')\n    if (!policy) return setErrorMessage('Please agree to the policy')\n\n    setLoading(true)\n    const { register_source } = getAdCookie()\n    const recaptchaToken = await getRecaptchaToken(recaptchaSitekey || '')\n    try {\n      const response = await fetch('/api/multipass/rainbowbridge/activities', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n          'current-language': locale,\n          'X-Recaptcha-Token': recaptchaToken,\n        },\n        body: JSON.stringify({\n          email,\n          register_source,\n          shopify_domain: storeDomain,\n          single_brand_subscribe: copy.single_brand_subscribe ?? true,\n          genre: copy.genre ?? copy.dealsType ?? '',\n          sub_brand_type: copy.sub_brand_type ?? '',\n        }),\n      })\n      const result = await response.json()\n      if (!result?.data?.is_new_subscribe) {\n        setSuccessMessage(copy.subscribedLabel ?? \"You've already subscribed!\")\n      } else if (!result?.data?.errors) {\n        setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')\n        setIsSubscribeSuccess(true)\n        gaTrack({\n          event: 'ga4Event',\n          event_name: 'subscribe',\n          event_parameters: {\n            page_group: copy.dealsType ?? copy.genre ?? '',\n            position: 'sticky',\n            info: 'Member Floating Window',\n          },\n        })\n      } else {\n        setErrorMessage(result?.data?.errors ?? 'Error occurred')\n      }\n    } catch {\n      setErrorMessage('Network error')\n    } finally {\n      setLoading(false)\n    }\n  }, [email, policy, locale, storeDomain, copy, setIsSubscribeSuccess])\n\n  return (\n    <div className=\"flex flex-col\">\n      <Text className=\"text-[22px] font-bold leading-[1.2]\" html={copy.title} />\n      {copy.desc && <Text className=\"text-[16px] mt-[16px] font-bold text-[#1E2024]\" html={copy.desc} />}\n\n      <input\n        className={cn(\n          'h-[46px] w-full border mt-[8px] px-[14px] text-[16px] outline-none placeholder:text-[#999]',\n          rounded ? 'rounded-[4px]' : 'rounded-none'\n        )}\n        placeholder={copy.placeholder}\n        value={email}\n        onChange={e => {\n          setErrorMessage('')\n          setEmail(e.target.value.trim())\n        }}\n      />\n\n      <div className=\"flex w-full mt-[8px] items-start gap-[8px]\">\n        <Checkbox checked={policy} onCheckedChange={() => setPolicy(v => !v)} className=\"border-[#1d1d1f] mt-[2px]\" />\n        <label\n          className=\"text-left text-[14px] font-bold text-[#4A4C56] [&_a]:underline\"\n          dangerouslySetInnerHTML={{ __html: copy.policy ?? '' }}\n        />\n      </div>\n\n      <Button className=\"w-full mt-[16px]\" size=\"base\" loading={loading} onClick={handleSubmit}>\n        {copy.buttonLabel ?? 'Subscribe'}\n      </Button>\n\n      {errorMessage && (\n        <div className=\"text-left mt-[4px] text-[16px] font-semibold text-[#f84d4f]\">\n          <Text html={errorMessage} />\n        </div>\n      )}\n      <div className=\"text-left mt-[4px] text-[16px] font-semibold text-[#52c41a]\">\n        <Text html={successMessage} />\n      </div>\n\n      {copy.promo && (\n        <div className=\"flex mt-[32px] flex-col text-left\">\n          <div className=\"flex flex-col\">\n            {copy.promo?.title && <Text className=\"text-[18px] font-bold leading-[1.2]\" html={copy.promo.title} />}\n            {copy.promo.description && (\n              <Text className=\"text-[14px] text-[#080A0F] mt-[8px] font-bold\" html={copy.promo.description} />\n            )}\n            {copy.promo.learnMoreLabel && copy.promo.learnMoreUrl && (\n              <a\n                href={(() => {\n                  try {\n                    if (!pageHandle) return copy.promo!.learnMoreUrl!\n                    const url = new URL(copy.promo!.learnMoreUrl!, window.location.href)\n                    url.searchParams.set('ref', `${pageHandle}_subscribe`)\n                    return url.toString()\n                  } catch {\n                    return copy.promo!.learnMoreUrl!\n                  }\n                })()}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"flex mt-[8px] items-center gap-[4px] text-[14px] font-bold\"\n              >\n                {copy.promo.learnMoreLabel}\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                  <path\n                    d=\"M5.52827 3.52876C5.78862 3.26841 6.21063 3.26841 6.47098 3.52876L10.471 7.52876C10.7313 7.78911 10.7313 8.21112 10.471 8.47147L6.47098 12.4715C6.21063 12.7318 5.78862 12.7318 5.52827 12.4715C5.26792 12.2111 5.26792 11.7891 5.52827 11.5288L9.05692 8.00011L5.52827 4.47147C5.26792 4.21112 5.26792 3.78911 5.52827 3.52876Z\"\n                    fill=\"#080A0F\"\n                  />\n                </svg>\n              </a>\n            )}\n          </div>\n          {copy.promo.image?.url && (\n            <Picture\n              source={copy.promo.image.url}\n              alt={copy.promo.image.alt ?? ''}\n              className={cn('h-[100px] mt-[8px] w-full object-cover', rounded ? 'rounded-[8px]' : 'rounded-none')}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useCallback", "useEffect", "useState", "Button", "Checkbox", "Picture", "Text", "gaTrack", "cn", "useHeadlessContext", "Cookies", "parse", "emailValidate", "useMemberPopupContext", "ROUNDED_BRANDS", "getAdCookie", "search", "href", "query", "getRecaptchaToken", "sitekey", "ActivitiesSubscribeModal", "copy", "initialEmail", "alpcConfig", "setIsSubscribeSuccess", "pageHandle", "locale", "headlessBrand", "storeDomain", "recaptchaSitekey", "rounded", "policy", "setPolicy", "email", "setEmail", "errorMessage", "setErrorMessage", "successMessage", "setSuccessMessage", "loading", "setLoading", "handleSubmit", "register_source", "recaptchaToken", "result", "e", "v", "url"]
 }

package/dist/esm/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
-import type { RedeemCouponModalCopy, AlpcConfig } from '../../type';
-type Props = {
-    onClose: () => void;
+import type { ConsumeCreditsopy, AlpcConfig } from '../../type';
+type RedeemCouponItem = {
     itemTitle: string;
     itemCredits: number;
     itemImage?: {
@@ -8,14 +7,16 @@ type Props = {
         alt?: string;
     };
     itemValue?: string;
-    itemOff?: string;
     itemRules?: string[];
     redeemId: number;
     userId?: string;
-    copy: RedeemCouponModalCopy;
-    pointUnit?: string;
     alpcConfig: AlpcConfig;
+};
+type Props = {
+    onClose: () => void;
+    item: RedeemCouponItem;
+    copy: ConsumeCreditsopy;
     onError?: (code: number) => void;
 };
-export default function RedeemCouponPanel({ onClose, itemTitle, itemCredits, itemImage, itemValue, itemOff, itemRules, redeemId, userId, copy, pointUnit, alpcConfig, onError, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function RedeemCouponPanel({ onClose, item, copy, onError }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as s}from"react/jsx-runtime";import{useCallback as M,useEffect as P,useState as x}from"react";import{Text as r,Button as y}from"@anker-in/headless-ui";import{useHeadlessContext as j,classNames as f}from"@anker-in/lib";import{AlpcErrorCode as a}from"../../../credits/context/const";import{useRedeemCoupon as F}from"./hooks/useRedeemCoupon";import H from"../../../credits/context/hooks/useCopy";import{ROUNDED_BRANDS as I}from"../../../../constants";function O({onClose:B,itemTitle:$,itemCredits:R,itemImage:c,itemValue:g,itemOff:C,itemRules:p,redeemId:m,userId:N,copy:e,pointUnit:k="pts",alpcConfig:D,onError:v}){const[l,b]=x(),[h,d]=x(""),[S,i]=x(!1),{copy:T,copied:w}=H(),{brand:L}=j(),u=I.includes(L),{isMutating:A,trigger:E}=F(D),U=M(async()=>{d("");const{data:o}=await E({user_id:N,rule_id:m});if(!o){d(e.commonError);return}if(o.data?.success)b(o.data.coupon_code);else{let n=e.commonError;o.code===a.CodeLpcShopifyCouponRuleRedeemLimit?(n=e.redeemLimitError,i(!0)):o.code===a.CodeLpcRuleInventoryNotEnough?(n=e.inventoryNotEnough,i(!0)):o.code===a.CodeLpcNotEnoughCredits?(n=e.creditsNotEnough,i(!0)):o.code===a.CodeCrossSiteError&&(n=e.crossSiteError,i(!0)),d(n),v?.(o.code)}},[E,N,m,e,v]);P(()=>{b(void 0),d(""),i(!1)},[m]);const _=p&&p.length>0&&t("div",{className:"w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]",children:t("ul",{className:"ml-4 grid grid-flow-row gap-[4px]",children:p?.map((o,n)=>t("li",{className:"list-disc",children:t(r,{html:o,className:"font-bold"})},n))})});return s("div",{className:"flex flex-col",children:[c?.url&&t("div",{className:"relative w-full px-[24px]",children:s("div",{className:f("relative mx-auto overflow-hidden",u?"rounded-[8px]":"rounded-none"),children:[t("img",{src:c.url,alt:c.alt??"",className:"mx-auto h-[140px] w-full object-cover"}),g&&s("div",{className:"absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white",children:[g,C?` ${C}`:""]})]})}),!l&&s("div",{className:"flex flex-col gap-[16px] px-[24px] py-[20px]",children:[s("p",{className:"text-center text-[24px] font-[700] text-[#1d1d1f]",children:[R," ",k]}),_]}),l&&s("div",{className:"flex mt-[16px] flex-col gap-[8px] text-center",children:[s("div",{className:"flex items-center justify-center gap-[10px]",children:[t("span",{className:"text-[24px] font-[700]",children:l}),t("button",{className:"cursor-pointer text-[14px] font-[700] underline disabled:pointer-events-none",disabled:w,onClick:()=>T(l),children:w?"Copied":"Copy"})]}),t(r,{className:"text-[20px] font-[700]",html:e.successTitle}),t(r,{className:"text-[14px] font-[700] text-[#6d6d6f]",html:e.successDesc}),t(y,{className:f("w-full py-[12px] text-[14px] font-[700] text-white bg-[#080a0f]",u?"rounded-[4px]":"rounded-none"),onClick:()=>{e.successButtonUrl&&(window.location.href=e.successButtonUrl),B()},children:e.successButton})]}),!l&&s("div",{className:"sticky bottom-0 bg-white border-t border-[#e5e5e5] pt-[10px]",children:[s("div",{className:"flex flex-col gap-[8px] text-center",children:[t(r,{className:"block text-[16px] font-[700] leading-[1.3]",html:e.confirmTitle}),t(y,{className:f("w-full py-[12px] text-[14px] font-[700] text-white disabled:opacity-60 bg-[#080a0f]",u?"rounded-[4px]":"rounded-none"),disabled:S,loading:A,onClick:U,children:e.confirmButton})]}),h&&t(r,{className:"mt-[8px] text-center text-[14px] font-[700] text-[#ff0000]",html:h})]})]})}export{O as default};
+import{jsx as t,jsxs as s}from"react/jsx-runtime";import{useCallback as U,useEffect as M,useState as u}from"react";import{Text as r,Button as y}from"@anker-in/headless-ui";import{gaTrack as P,useHeadlessContext as F,classNames as V}from"@anker-in/lib";import{AlpcErrorCode as d}from"../../../credits/context/const";import{useRedeemCoupon as j}from"./hooks/useRedeemCoupon";import H from"../../../credits/context/hooks/useCopy";import{ROUNDED_BRANDS as O}from"../../../../constants";function W({onClose:$,item:h,copy:E,onError:f}){const{itemTitle:q,itemCredits:w,itemImage:c,itemValue:x,itemRules:m,redeemId:p,userId:g,alpcConfig:I}=h,{redeemModal:e,creditUnit:R}=E,_=R??"pts",[i,C]=u(),[v,a]=u(""),[k,l]=u(!1),{copy:B,copied:N}=H(),{brand:D}=F(),L=O.includes(D),{isMutating:T,trigger:b}=j(I),S=U(async()=>{a("");const{data:o}=await b({user_id:g,rule_id:p});if(!o){a(e.commonError);return}if(o.data?.success)C(o.data.coupon_code),P({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"consume_credits",button_name:"redeem_coupon_success",info:"Member Floating Window"}});else{let n=e.commonError;o.code===d.CodeLpcShopifyCouponRuleRedeemLimit?(n=e.redeemLimitError,l(!0)):o.code===d.CodeLpcRuleInventoryNotEnough?(n=e.inventoryNotEnough,l(!0)):o.code===d.CodeLpcNotEnoughCredits?(n=e.creditsNotEnough,l(!0)):o.code===d.CodeCrossSiteError&&(n=e.crossSiteError,l(!0)),a(n),f?.(o.code)}},[b,g,p,e,f]);M(()=>{C(void 0),a(""),l(!1)},[p]);const A=m&&m.length>0&&t("div",{className:"w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]",children:t("ul",{className:"ml-4 grid grid-flow-row gap-[4px]",children:m?.map((o,n)=>t("li",{className:"list-disc",children:t(r,{html:o,className:"font-bold"})},n))})});return s("div",{className:"flex flex-col",children:[c?.url&&t("div",{className:"relative w-full px-[24px]",children:s("div",{className:V("relative mx-auto overflow-hidden",L?"rounded-[8px]":"rounded-none"),children:[t("img",{src:c.url,alt:c.alt??"",className:"mx-auto h-[140px] w-full object-cover"}),x&&s("div",{className:"absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white",children:[x,e.off?` ${e.off}`:""]})]})}),!i&&s("div",{className:"flex flex-col gap-[16px] px-[24px] py-[20px]",children:[s("p",{className:"text-center text-[24px] font-[700] text-[#1d1d1f]",children:[w," ",_]}),A]}),i&&s("div",{className:"flex mt-[16px] flex-col gap-[8px] text-center",children:[s("div",{className:"flex items-center justify-center gap-[10px]",children:[t("span",{className:"text-[24px] font-[700]",children:i}),t("button",{className:"cursor-pointer text-[14px] font-[700] underline disabled:pointer-events-none",disabled:N,onClick:()=>B(i),children:N?e.copiedLabel??"Copied":e.copyLabel??"Copy"})]}),t(r,{className:"text-[20px] font-[700]",html:e.successTitle}),t(r,{className:"text-[14px] font-[700] text-[#6d6d6f]",html:e.successDesc}),t(y,{as:"a",href:e.successButtonUrl,className:"w-full",children:e.successButton})]}),!i&&s("div",{className:"sticky bottom-0 bg-white border-t border-[#e5e5e5] pt-[10px]",children:[s("div",{className:"flex flex-col gap-[8px] text-center",children:[t(r,{className:"block text-[16px] font-[700] leading-[1.3]",html:e.confirmTitle}),t(y,{className:"w-full",disabled:k,loading:T,onClick:S,children:e.confirmButton})]}),v&&t(r,{className:"mt-[8px] text-center text-[14px] font-[700] text-[#ff0000]",html:v})]})]})}export{W as default};
 //# sourceMappingURL=RedeemCouponPanel.js.map

package/dist/esm/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.tsx"],
-  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Text, Button } from '@anker-in/headless-ui'\nimport { useHeadlessContext, classNames as cn } from '@anker-in/lib'\nimport { AlpcErrorCode } from '../../../credits/context/const'\nimport { useRedeemCoupon } from './hooks/useRedeemCoupon'\nimport useCopy from '../../../credits/context/hooks/useCopy'\nimport type { RedeemCouponModalCopy, AlpcConfig } from '../../type'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype Props = {\n  onClose: () => void\n  itemTitle: string\n  itemCredits: number\n  itemImage?: { url: string; alt?: string }\n  itemValue?: string\n  itemOff?: string\n  itemRules?: string[]\n  redeemId: number\n  userId?: string\n  copy: RedeemCouponModalCopy\n  pointUnit?: string\n  alpcConfig: AlpcConfig\n  onError?: (code: number) => void\n}\n\nexport default function RedeemCouponPanel({\n  onClose,\n  itemTitle,\n  itemCredits,\n  itemImage,\n  itemValue,\n  itemOff,\n  itemRules,\n  redeemId,\n  userId,\n  copy,\n  pointUnit = 'pts',\n  alpcConfig,\n  onError,\n}: Props) {\n  const [couponCode, setCouponCode] = useState<string>()\n  const [errorInfo, setErrorInfo] = useState('')\n  const [disabled, setDisabled] = useState(false)\n  const { copy: copyText, copied } = useCopy()\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  const { isMutating: loading, trigger } = useRedeemCoupon(alpcConfig)\n\n  const handleConfirm = useCallback(async () => {\n    setErrorInfo('')\n    const { data } = await trigger({ user_id: userId, rule_id: redeemId })\n    if (!data) {\n      setErrorInfo(copy.commonError)\n      return\n    }\n    if (data.data?.success) {\n      setCouponCode(data.data.coupon_code)\n    } else {\n      let msg = copy.commonError\n      if (data.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {\n        msg = copy.redeemLimitError\n        setDisabled(true)\n      } else if (data.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {\n        msg = copy.inventoryNotEnough\n        setDisabled(true)\n      } else if (data.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {\n        msg = copy.creditsNotEnough\n        setDisabled(true)\n      } else if (data.code === AlpcErrorCode.CodeCrossSiteError) {\n        msg = copy.crossSiteError\n        setDisabled(true)\n      }\n      setErrorInfo(msg)\n      onError?.(data.code)\n    }\n  }, [trigger, userId, redeemId, copy, onError])\n\n  useEffect(() => {\n    setCouponCode(undefined)\n    setErrorInfo('')\n    setDisabled(false)\n  }, [redeemId])\n\n  const rulesSection = itemRules && itemRules.length > 0 && (\n    <div className=\"w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]\">\n      <ul className=\"ml-4 grid grid-flow-row gap-[4px]\">\n        {itemRules?.map((text, index) => (\n          <li className=\"list-disc\" key={index}>\n            <Text html={text} className=\"font-bold\" />\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n\n  return (\n    <div className=\"flex flex-col\">\n      {itemImage?.url && (\n        <div className=\"relative w-full px-[24px]\">\n          <div className={cn('relative mx-auto overflow-hidden', rounded ? 'rounded-[8px]' : 'rounded-none')}>\n            <img src={itemImage.url} alt={itemImage.alt ?? ''} className=\"mx-auto h-[140px] w-full object-cover\" />\n            {itemValue && (\n              <div className=\"absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white\">\n                {itemValue}\n                {itemOff ? ` ${itemOff}` : ''}\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {!couponCode && (\n        <div className=\"flex flex-col gap-[16px] px-[24px] py-[20px]\">\n          <p className=\"text-center text-[24px] font-[700] text-[#1d1d1f]\">\n            {itemCredits} {pointUnit}\n          </p>\n          {rulesSection}\n        </div>\n      )}\n\n      {couponCode && (\n        <div className=\"flex mt-[16px] flex-col gap-[8px] text-center\">\n          <div className=\"flex items-center justify-center gap-[10px]\">\n            <span className=\"text-[24px] font-[700]\">{couponCode}</span>\n            <button\n              className=\"cursor-pointer text-[14px] font-[700] underline disabled:pointer-events-none\"\n              disabled={copied}\n              onClick={() => copyText(couponCode)}\n            >\n              {copied ? 'Copied' : 'Copy'}\n            </button>\n          </div>\n          <Text className=\"text-[20px] font-[700]\" html={copy.successTitle} />\n          <Text className=\"text-[14px] font-[700] text-[#6d6d6f]\" html={copy.successDesc} />\n          <Button\n            className={cn(\n              'w-full py-[12px] text-[14px] font-[700] text-white bg-[#080a0f]',\n              rounded ? 'rounded-[4px]' : 'rounded-none'\n            )}\n            onClick={() => {\n              if (copy.successButtonUrl) window.location.href = copy.successButtonUrl\n              onClose()\n            }}\n          >\n            {copy.successButton}\n          </Button>\n        </div>\n      )}\n\n      {!couponCode && (\n        <div className=\"sticky bottom-0 bg-white border-t border-[#e5e5e5] pt-[10px]\">\n          <div className=\"flex flex-col gap-[8px] text-center\">\n            <Text className=\"block text-[16px] font-[700] leading-[1.3]\" html={copy.confirmTitle} />\n            <Button\n              className={cn(\n                'w-full py-[12px] text-[14px] font-[700] text-white disabled:opacity-60 bg-[#080a0f]',\n                rounded ? 'rounded-[4px]' : 'rounded-none'\n              )}\n              disabled={disabled}\n              loading={loading}\n              onClick={handleConfirm}\n            >\n              {copy.confirmButton}\n            </Button>\n          </div>\n\n          {errorInfo && (\n            <Text className=\"mt-[8px] text-center text-[14px] font-[700] text-[#ff0000]\" html={errorInfo} />\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useCallback", "useEffect", "useState", "Text", "Button", "useHeadlessContext", "cn", "AlpcErrorCode", "useRedeemCoupon", "useCopy", "ROUNDED_BRANDS", "RedeemCouponPanel", "onClose", "itemTitle", "itemCredits", "itemImage", "itemValue", "itemOff", "itemRules", "redeemId", "userId", "copy", "pointUnit", "alpcConfig", "onError", "couponCode", "setCouponCode", "errorInfo", "setErrorInfo", "disabled", "setDisabled", "copyText", "copied", "brand", "rounded", "loading", "trigger", "handleConfirm", "data", "msg", "rulesSection", "text", "index"]
+  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Text, Button } from '@anker-in/headless-ui'\nimport { gaTrack, useHeadlessContext, classNames as cn } from '@anker-in/lib'\nimport { AlpcErrorCode } from '../../../credits/context/const'\nimport { useRedeemCoupon } from './hooks/useRedeemCoupon'\nimport useCopy from '../../../credits/context/hooks/useCopy'\nimport type { ConsumeCreditsopy, AlpcConfig } from '../../type'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype RedeemCouponItem = {\n  itemTitle: string\n  itemCredits: number\n  itemImage?: { url: string; alt?: string }\n  itemValue?: string\n  itemRules?: string[]\n  redeemId: number\n  userId?: string\n  alpcConfig: AlpcConfig\n}\n\ntype Props = {\n  onClose: () => void\n  item: RedeemCouponItem\n  copy: ConsumeCreditsopy\n  onError?: (code: number) => void\n}\n\nexport default function RedeemCouponPanel({ onClose, item, copy, onError }: Props) {\n  const { itemTitle, itemCredits, itemImage, itemValue, itemRules, redeemId, userId, alpcConfig } = item\n  const { redeemModal, creditUnit } = copy\n  const pointUnit = creditUnit ?? 'pts'\n  const [couponCode, setCouponCode] = useState<string>()\n  const [errorInfo, setErrorInfo] = useState('')\n  const [disabled, setDisabled] = useState(false)\n  const { copy: copyText, copied } = useCopy()\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  const { isMutating: loading, trigger } = useRedeemCoupon(alpcConfig)\n\n  const handleConfirm = useCallback(async () => {\n    setErrorInfo('')\n    const { data } = await trigger({ user_id: userId, rule_id: redeemId })\n    if (!data) {\n      setErrorInfo(redeemModal.commonError)\n      return\n    }\n    if (data.data?.success) {\n      setCouponCode(data.data.coupon_code)\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'lp_button',\n        event_parameters: {\n          position: 'consume_credits',\n          button_name: 'redeem_coupon_success',\n          info: 'Member Floating Window',\n        },\n      })\n    } else {\n      let msg = redeemModal.commonError\n      if (data.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {\n        msg = redeemModal.redeemLimitError\n        setDisabled(true)\n      } else if (data.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {\n        msg = redeemModal.inventoryNotEnough\n        setDisabled(true)\n      } else if (data.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {\n        msg = redeemModal.creditsNotEnough\n        setDisabled(true)\n      } else if (data.code === AlpcErrorCode.CodeCrossSiteError) {\n        msg = redeemModal.crossSiteError\n        setDisabled(true)\n      }\n      setErrorInfo(msg)\n      onError?.(data.code)\n    }\n  }, [trigger, userId, redeemId, redeemModal, onError])\n\n  useEffect(() => {\n    setCouponCode(undefined)\n    setErrorInfo('')\n    setDisabled(false)\n  }, [redeemId])\n\n  const rulesSection = itemRules && itemRules.length > 0 && (\n    <div className=\"w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]\">\n      <ul className=\"ml-4 grid grid-flow-row gap-[4px]\">\n        {itemRules?.map((text, index) => (\n          <li className=\"list-disc\" key={index}>\n            <Text html={text} className=\"font-bold\" />\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n\n  return (\n    <div className=\"flex flex-col\">\n      {itemImage?.url && (\n        <div className=\"relative w-full px-[24px]\">\n          <div className={cn('relative mx-auto overflow-hidden', rounded ? 'rounded-[8px]' : 'rounded-none')}>\n            <img src={itemImage.url} alt={itemImage.alt ?? ''} className=\"mx-auto h-[140px] w-full object-cover\" />\n            {itemValue && (\n              <div className=\"absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white\">\n                {itemValue}\n                {redeemModal.off ? ` ${redeemModal.off}` : ''}\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {!couponCode && (\n        <div className=\"flex flex-col gap-[16px] px-[24px] py-[20px]\">\n          <p className=\"text-center text-[24px] font-[700] text-[#1d1d1f]\">\n            {itemCredits} {pointUnit}\n          </p>\n          {rulesSection}\n        </div>\n      )}\n\n      {couponCode && (\n        <div className=\"flex mt-[16px] flex-col gap-[8px] text-center\">\n          <div className=\"flex items-center justify-center gap-[10px]\">\n            <span className=\"text-[24px] font-[700]\">{couponCode}</span>\n            <button\n              className=\"cursor-pointer text-[14px] font-[700] underline disabled:pointer-events-none\"\n              disabled={copied}\n              onClick={() => copyText(couponCode)}\n            >\n              {copied ? (redeemModal.copiedLabel ?? 'Copied') : (redeemModal.copyLabel ?? 'Copy')}\n            </button>\n          </div>\n          <Text className=\"text-[20px] font-[700]\" html={redeemModal.successTitle} />\n          <Text className=\"text-[14px] font-[700] text-[#6d6d6f]\" html={redeemModal.successDesc} />\n          <Button as=\"a\" href={redeemModal.successButtonUrl} className=\"w-full\">\n            {redeemModal.successButton}\n          </Button>\n        </div>\n      )}\n\n      {!couponCode && (\n        <div className=\"sticky bottom-0 bg-white border-t border-[#e5e5e5] pt-[10px]\">\n          <div className=\"flex flex-col gap-[8px] text-center\">\n            <Text className=\"block text-[16px] font-[700] leading-[1.3]\" html={redeemModal.confirmTitle} />\n            <Button className=\"w-full\" disabled={disabled} loading={loading} onClick={handleConfirm}>\n              {redeemModal.confirmButton}\n            </Button>\n          </div>\n\n          {errorInfo && (\n            <Text className=\"mt-[8px] text-center text-[14px] font-[700] text-[#ff0000]\" html={errorInfo} />\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useCallback", "useEffect", "useState", "Text", "Button", "gaTrack", "useHeadlessContext", "cn", "AlpcErrorCode", "useRedeemCoupon", "useCopy", "ROUNDED_BRANDS", "RedeemCouponPanel", "onClose", "item", "copy", "onError", "itemTitle", "itemCredits", "itemImage", "itemValue", "itemRules", "redeemId", "userId", "alpcConfig", "redeemModal", "creditUnit", "pointUnit", "couponCode", "setCouponCode", "errorInfo", "setErrorInfo", "disabled", "setDisabled", "copyText", "copied", "brand", "rounded", "loading", "trigger", "handleConfirm", "data", "msg", "rulesSection", "text", "index"]
 }

package/dist/esm/components/memberPopup/panels/ConsumeCredits/index.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import { type ConsumeCreditsopy } from '../../type';
 type Props = {
     copy: ConsumeCreditsopy;
-    onClose: () => void;
 };
-declare function ConsumeCredits({ copy, onClose }: Props): import("react/jsx-runtime").JSX.Element;
+declare function ConsumeCredits({ copy }: Props): import("react/jsx-runtime").JSX.Element;
 export default ConsumeCredits;

package/dist/esm/components/memberPopup/panels/ConsumeCredits/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as K,jsx as r,jsxs as a}from"react/jsx-runtime";import{useMemo as S,useState as P}from"react";import{Picture as $,Button as z}from"@anker-in/headless-ui";import{classNames as R,useProductsByHandles as F,useHeadlessContext as T}from"@anker-in/lib";import{useMemberPopupContext as V}from"../../context/provider";import{useViewStack as j}from"../../context/viewStack";import{useRedeemableList as G}from"./hooks/useRedeemableList";import{useRedeemAndBuy as H}from"./hooks/useRedeemAndBuy";import{ConsumeCreditsItemType as s,MemberPopupPanelType as w}from"../../type";import{numberFormat as g}from"../../../credits/context/utils";import{ROUNDED_BRANDS as q}from"../../../../constants";function J({copy:t,onClose:Q}){const{profile:l,creditInfo:u,openSignUpPopup:_,alpcConfig:f}=V(),{pushView:v}=j(),{brand:B}=T(),b=q.includes(B),[C,N]=P(""),[D,h]=P(null),p=!!l,{redeemableList:y,listLoading:k}=G(f),{trigger:A}=H(f),M=t.list.map(e=>e.product?.handle).filter(Boolean),{data:I}=F({handles:M}),O=S(()=>t.list.map(e=>{const n=y.find(o=>String(o.id)===String(e.redeemId));if(!n)return null;const i=Number(u?.available_credit??0),m=p&&!!l?.activated&&n.consume_credits>i,c=n.is_limited&&(!n.remaining_inventory||n.remaining_inventory<=0);let d,x;return(e.type===s.RedeemAndBuy||e.type===s.Product)&&e.product&&(d=I?.find(o=>o.handle===e.product.handle),x=d?.variants?.find(o=>o.sku===e.product.sku)??d?.variants?.[0],e.type===s.RedeemAndBuy&&(!d||!x))?null:{...e,alpcData:n,insufficient:m,soldOut:c,product:d,variant:x}}).filter(Boolean),[t.list,y,u,l,p,I]);function U(e){return p?e.soldOut?t.soldOut:t.btnRedeem:t.unlockRewards}function E(e){return e.type===s.GiftCard||e.type===s.Product?e.insufficient:e.soldOut||e.insufficient}async function L(e){if(!p){_();return}if(!l?.activated){v({type:w.Activate});return}if(e.type===s.GiftCard||e.type===s.Product){t.creditsPage?.url&&window.open(t.creditsPage.url,"_blank","noopener,noreferrer");return}if(e.type===s.Coupon)v({type:w.RedeemCoupon,props:{itemTitle:e.title,itemCredits:e.alpcData.consume_credits,itemImage:t.imageMapping?.[e.type]?{url:t.imageMapping[e.type].url,alt:e.image?.alt}:e.image,itemValue:e.value,itemOff:t.off,itemRules:e.rules,redeemId:Number(e.redeemId),userId:l?.user_id,alpcConfig:f}});else{N(""),h(e.redeemId);try{await A({productVariant:e.variant,redeemId:Number(e.redeemId),userId:l?.user_id})}catch(n){N(n?.message??t.redeemModal.commonError)}finally{h(null)}}}return r(K,{children:a("div",{className:"flex flex-1 flex-col gap-[12px]",children:[a("div",{className:"flex flex-col gap-[8px]",children:[t.title&&r("h2",{className:"text-[24px] font-[700] leading-[1.2] text-[#080a0f]",children:t.title}),t.subtitle&&r("p",{className:"text-[16px] font-[700] leading-snug text-[#4a4c56]",children:t.subtitle})]}),t.insufficientCredits&&u&&a("div",{className:"text-[14px] font-[700] text-[#1d1d1f]",children:[t.insufficientCredits,": ",g(u.available_credit)," ",t.pointUnit]}),C&&r("div",{className:"text-[14px] font-[700] text-[#f84d4f]",children:C}),k?r("div",{className:"flex flex-1 items-center justify-center py-[32px]",children:r("div",{className:"size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent"})}):r("div",{className:"flex flex-col",children:O.map((e,n)=>{const i=!!e.product;return a("div",{className:"relative py-[16px]",children:[n>0&&r("div",{className:"absolute inset-x-0 top-0 h-px bg-[#dadce0]"}),a("div",{className:"flex items-center gap-[12px]",children:[(()=>{const m=t.imageMapping?.[e.type]?.url,c=i?e.variant?.image?.url??e.product?.images?.[0]?.url??e.image?.url:m??e.image?.url,d=i?e.variant?.image?.altText??e.product?.images?.[0]?.alt??e.image?.alt??"":e.image?.alt??"";return c?a("div",{className:R("relative size-[64px] shrink-0 overflow-hidden",b?"rounded-[4px]":"rounded-none"),children:[r($,{source:c,alt:d,className:"flex size-full items-center justify-center",imgClassName:i?"object-cover":"h-full w-auto object-contain"}),!i&&e.value&&a("div",{className:"absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white",children:[e.value," ",t.off]})]}):null})(),a("div",{className:"min-w-0 flex-1",children:[r("div",{className:"text-[16px] font-[700] text-[#1e2024] line-clamp-2",children:i&&e.product?.title?e.product.title:e.title}),r("div",{className:"mt-[4px] text-[14px] text-[#666]",children:i&&e.price!=null?`${g(e.alpcData.consume_credits)} ${t.pointUnit??""} + $${Number(e.price).toFixed(2)}`:`${g(e.alpcData.consume_credits)} ${t.pointUnit??""}`})]}),a("div",{className:"relative group",children:[r(z,{className:R("bg-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white",b?"rounded-[4px]":"rounded-none"),disabled:E(e),loading:D===e.redeemId,onClick:()=>L(e),children:U(e)}),e.insufficient&&r("div",{className:"pointer-events-none absolute right-0 top-full z-[100] mt-[10px] hidden w-[200px] group-hover:block",children:a("div",{className:"relative bg-[#6D6D6F] p-[16px] text-[14px] font-[700] text-white shadow",children:[r("p",{className:"text-pretty tracking-[-0.02em] text-[14px]",children:t.insufficientCredits}),r("div",{className:"absolute -top-[8px] right-[20px] size-[16px] origin-top-left rotate-45 rounded-[2px] bg-[#6D6D6F]"})]})})]})]})]},n)})}),t.creditsPage?.url&&r("a",{href:t.creditsPage.url,target:"_blank",rel:"noopener noreferrer",className:"mt-auto self-start text-[14px] font-[700] text-[#080a0f] underline",children:t.creditsPage.label??"Go to Credits Page"})]})})}var se=J;export{se as default};
+import{Fragment as ae,jsx as a,jsxs as n}from"react/jsx-runtime";import{useEffect as j,useMemo as H,useState as k}from"react";import{Picture as W,Button as q}from"@anker-in/headless-ui";import{gaTrack as _,classNames as B,useProductsByHandles as J,useHeadlessContext as K}from"@anker-in/lib";import{useMemberPopupContext as Q}from"../../context/provider";import{useViewStack as X}from"../../context/viewStack";import{useRedeemableList as Y}from"./hooks/useRedeemableList";import{useRedeemAndBuy as Z}from"./hooks/useRedeemAndBuy";import{ConsumeCreditsItemType as s,MemberPopupPanelType as A}from"../../type";import{numberFormat as x}from"../../../credits/context/utils";import{ROUNDED_BRANDS as ee}from"../../../../constants";function te({copy:t}){const{profile:l,creditInfo:u,openSignUpPopup:D,alpcConfig:v,isActivateSuccess:S,fetchCreditInfo:L,pageHandle:c}=Q(),{pushView:h}=X(),{brand:E}=K(),C=ee.includes(E),[y,P]=k(""),[M,w]=k(null);j(()=>{l?.user_id&&L(l.user_id)},[]);const d=!!l,{redeemableList:R,listLoading:U}=Y(v),{trigger:$}=Z(v),F=t.list.map(e=>e.product?.handle).filter(Boolean),{data:I}=J({handles:F}),z=H(()=>t.list.map(e=>{const r=R.find(o=>String(o.id)===String(e.redeemId));if(!r)return null;const i=Number(u?.available_credit??0),m=r.consume_credits>i,b=r.is_limited&&(!r.remaining_inventory||r.remaining_inventory<=0),V=e.type===s.RedeemAndBuy||e.type===s.Product,f=I?.find(o=>o.handle===e.product?.handle),N=f?.variants?.find(o=>o.sku===e.product?.sku)??f?.variants?.[0];return V&&(!f||!N||!N?.availableForSale||b)||e.type===s.RedeemAndBuy&&e.price==null?null:{...e,alpcData:r,insufficient:m,product:f,variant:N}}).filter(Boolean),[t.list,R,u,l,d,I]),p=l?.activated||S;function T(e){return!d||!p?t.unlockRewards:e.soldOut?t.soldOut:t.btnRedeem}function O(e){return!d||!p?!1:e.insufficient}function g(e){_({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"consume_credits",button_name:"redeem",info:"Member Floating Window"}})}async function G(e){if(!d){D();return}if(!p){h({type:A.Activate});return}if(e.type===s.GiftCard||e.type===s.Product){if(t.creditsPage?.url){const r=t.creditsPage.redeemListSectionId??"creditsRedeemList",i=new URL(t.creditsPage.url,window.location.href);i.searchParams.set("section",r),i.hash=r,c&&i.searchParams.set("ref",`${c}_consume_credits`),g(e.title),window.open(i.toString(),"_blank","noopener,noreferrer")}return}if(e.type===s.Coupon)g(e.title),h({type:A.RedeemCoupon,props:{itemTitle:e.title,itemCredits:e.alpcData.consume_credits,itemImage:t.imageMapping?.[e.type]?{url:t.imageMapping[e.type].url,alt:e.image?.alt}:e.image,itemValue:e.value,itemRules:e.rules,redeemId:Number(e.redeemId),userId:l?.user_id,alpcConfig:v}});else{P(""),w(e.redeemId),g(e.title);try{await $({productVariant:e.variant,redeemId:Number(e.redeemId),userId:l?.user_id}),_({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"consume_credits",button_name:"redeem_success",info:"Member Floating Window"}})}catch(r){P(r?.message??t.redeemModal.commonError)}finally{w(null)}}}return a(ae,{children:n("div",{className:"flex flex-1 flex-col",children:[n("div",{className:"flex flex-col gap-[8px]",children:[t.title&&a("h2",{className:"text-[24px] font-[700] leading-[1.2] text-[#080a0f]",children:t.title}),t.subtitle&&a("p",{className:"text-[16px] mt-[8px] font-[700] leading-snug text-[#4a4c56]",children:t.subtitle})]}),d&&n("div",{className:B("flex items-center mt-[16px] gap-[12px] bg-[#f5f6f7] p-[16px]",C?"rounded-[8px]":"rounded-none"),children:[n("div",{className:"flex flex-1 flex-col gap-[4px]",children:[a("div",{className:"text-[14px] font-[700] text-[#1e2024]",children:t.balanceLabel??"AnkerCredits Balance"}),n("div",{className:"flex items-end gap-[4px]",children:[a("span",{className:"text-[24px] font-[700] leading-[1.2] text-[#1e2024]",children:x(u?.available_credit||0)}),a("span",{className:"text-[14px] font-[700] leading-[1.4] text-[#1e2024]",children:t.creditUnit??"ankercredits"})]})]}),a("div",{className:"h-full w-px bg-[#dadce0]"}),n("div",{className:"flex flex-1 flex-col gap-[4px]",children:[a("div",{className:"text-[14px] font-[700] text-[#1e2024]",children:t.comingSoonLabel??"Coming Soon"}),n("div",{className:"flex items-end gap-[4px]",children:[a("span",{className:"text-[24px] font-[700] leading-[1.2] text-[#1e2024]",children:x(u?.pending_credit||0)}),a("span",{className:"text-[14px] font-[700] leading-[1.4] text-[#1e2024]",children:t.creditUnit??"ankercredits"})]})]})]}),y&&a("div",{className:"text-[14px] mt-[8px] font-[700] text-[#f84d4f]",children:y}),U?a("div",{className:"flex flex-1 items-center justify-center py-[32px]",children:a("div",{className:"size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent"})}):a("div",{className:"flex mt-[16px] flex-col",children:z.map((e,r)=>n("div",{className:"relative py-[16px]",children:[r>0&&a("div",{className:"absolute inset-x-0 top-0 h-px bg-[#dadce0]"}),n("div",{className:"flex items-center gap-[12px]",children:[(()=>{const i=e.type===s.Product||e.type===s.RedeemAndBuy,m=i?e.variant?.image?.url??e.product?.images?.[0]?.url??e.image?.url:e.image?.url||t.imageMapping?.[e.type]?.url,b=i?e.variant?.image?.altText??e.product?.images?.[0]?.alt??e.image?.alt??"":e.image?.alt??"";return m?n("div",{className:B("relative size-[64px] shrink-0 overflow-hidden",C?"rounded-[4px]":"rounded-none"),children:[a(W,{source:m,alt:b,className:"flex size-full items-center justify-center",imgClassName:i?"object-cover":"h-full w-auto object-contain"}),e.type===s.Coupon&&e.value&&a("div",{className:"absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white",children:e.value&&`${e.value} ${t.off}`}),e.type===s.GiftCard&&e.value&&a("div",{className:"absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white",children:e.value&&`${e.value} ${t.giftCard||"Gift Card"}`})]}):null})(),n("div",{className:"min-w-0 flex-1",children:[a("div",{className:"text-[16px] font-[700] text-[#1e2024] line-clamp-2",children:e.product?.title??e.title??e.alpcData?.name}),a("div",{className:"mt-[4px] text-[14px] text-[#666]",children:e.type===s.RedeemAndBuy?n("div",{children:[n("span",{children:[x(e.alpcData.consume_credits)," ",t.creditUnit??""," + $",Number(e.price).toFixed(2)]}),e.variant?.price?.amount&&n("span",{className:"text-[12px] ml-1 text-[#999] line-through",children:["$",Number(e.variant.price.amount).toFixed(2)]})]}):`${x(e.alpcData.consume_credits)} ${t.creditUnit??""}`})]}),n("div",{className:"relative group",children:[a(q,{size:"base",disabled:O(e),loading:M===e.redeemId,onClick:()=>G(e),children:T(e)}),e.insufficient&&d&&p&&a("div",{className:"pointer-events-none absolute right-0 top-full z-[100] mt-[10px] hidden w-[200px] group-hover:block",children:n("div",{className:"relative bg-[#6D6D6F] p-[16px] text-[14px] font-[700] text-white shadow",children:[a("p",{className:"text-pretty tracking-[-0.02em] text-[14px]",children:t.insufficientCredits}),a("div",{className:"absolute -top-[8px] right-[20px] size-[16px] origin-top-left rotate-45 rounded-[2px] bg-[#6D6D6F]"})]})})]})]})]},r))}),t.creditsPage?.url&&a("a",{href:(()=>{if(!c)return t.creditsPage.url;try{const e=new URL(t.creditsPage.url,window.location.href);return e.searchParams.set("ref",`${c}_consume_credits`),e.toString()}catch{return t.creditsPage.url}})(),target:"_blank",rel:"noopener noreferrer",className:"mt-auto self-start text-[14px] font-[700] text-[#080a0f] underline",onClick:()=>_({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"consume_credits",button_name:"credits_page_link",info:"Member Floating Window"}}),children:t.creditsPage.label??"Go to Credits Page"})]})})}var me=te;export{me as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/components/memberPopup/panels/ConsumeCredits/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/memberPopup/panels/ConsumeCredits/index.tsx"],
-  "sourcesContent": ["import { useMemo, useState } from 'react'\nimport { Picture, Button } from '@anker-in/headless-ui'\nimport { classNames as cn, useProductsByHandles, useHeadlessContext } from '@anker-in/lib'\nimport { useMemberPopupContext } from '../../context/provider'\nimport { useViewStack } from '../../context/viewStack'\nimport { useRedeemableList } from './hooks/useRedeemableList'\nimport { useRedeemAndBuy } from './hooks/useRedeemAndBuy'\nimport {\n  ConsumeCreditsItemType,\n  MemberPopupPanelType,\n  type ConsumeCreditsopy,\n  type ConsumeCreditsItem,\n} from '../../type'\nimport { numberFormat } from '../../../credits/context/utils'\nimport type { ConsumeCreditRuleResponse } from '../../../credits/context/response'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype EnrichedItem = ConsumeCreditsItem & {\n  alpcData: ConsumeCreditRuleResponse\n  insufficient: boolean\n  soldOut: boolean\n  product?: any\n  variant?: any\n}\n\ntype Props = {\n  copy: ConsumeCreditsopy\n  onClose: () => void\n}\n\nfunction ConsumeCredits({ copy, onClose }: Props) {\n  const { profile, creditInfo, openSignUpPopup, alpcConfig } = useMemberPopupContext()\n  const { pushView } = useViewStack()\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  const [redeemAndBuyError, setRedeemAndBuyError] = useState('')\n  const [loadingId, setLoadingId] = useState<string | number | null>(null)\n\n  const isLogin = !!profile\n  const { redeemableList, listLoading } = useRedeemableList(alpcConfig)\n  const { trigger: redeemAndBuy } = useRedeemAndBuy(alpcConfig)\n\n  const handles = copy.list.map(item => item.product?.handle).filter(Boolean) as string[]\n  const { data: products } = useProductsByHandles({ handles })\n\n  const list = useMemo(() => {\n    return copy.list\n      .map(item => {\n        const alpcData = redeemableList.find(r => String(r.id) === String(item.redeemId))\n        if (!alpcData) return null\n\n        const availableCredit = Number(creditInfo?.available_credit ?? 0)\n        const insufficient = isLogin && !!profile?.activated && alpcData.consume_credits > availableCredit\n        const soldOut = alpcData.is_limited && (!alpcData.remaining_inventory || alpcData.remaining_inventory <= 0)\n\n        let product\n        let variant\n        if (\n          (item.type === ConsumeCreditsItemType.RedeemAndBuy ||\n            item.type === ConsumeCreditsItemType.Product) &&\n          item.product\n        ) {\n          product = products?.find((p: any) => p.handle === item.product!.handle)\n          variant = product?.variants?.find((v: any) => v.sku === item.product!.sku) ?? product?.variants?.[0]\n          if (item.type === ConsumeCreditsItemType.RedeemAndBuy && (!product || !variant)) return null\n        }\n\n        return { ...item, alpcData, insufficient, soldOut, product, variant }\n      })\n      .filter(Boolean) as EnrichedItem[]\n  }, [copy.list, redeemableList, creditInfo, profile, isLogin, products])\n\n  function getButtonLabel(item: (typeof list)[number]) {\n    if (!isLogin) return copy.unlockRewards\n    if (item.soldOut) return copy.soldOut\n    return copy.btnRedeem\n  }\n\n  function isDisabled(item: (typeof list)[number]) {\n    if (\n      item.type === ConsumeCreditsItemType.GiftCard ||\n      item.type === ConsumeCreditsItemType.Product\n    ) {\n      return item.insufficient\n    }\n    return item.soldOut || item.insufficient\n  }\n\n  async function handleRedeem(item: (typeof list)[number]) {\n    if (!isLogin) {\n      openSignUpPopup()\n      return\n    }\n    if (!profile?.activated) {\n      pushView({ type: MemberPopupPanelType.Activate })\n      return\n    }\n    if (\n      item.type === ConsumeCreditsItemType.GiftCard ||\n      item.type === ConsumeCreditsItemType.Product\n    ) {\n      if (copy.creditsPage?.url) {\n        window.open(copy.creditsPage.url, '_blank', 'noopener,noreferrer')\n      }\n      return\n    }\n    if (item.type === ConsumeCreditsItemType.Coupon) {\n      pushView({\n        type: MemberPopupPanelType.RedeemCoupon,\n        props: {\n          itemTitle: item.title,\n          itemCredits: item.alpcData.consume_credits,\n          itemImage: copy.imageMapping?.[item.type]\n            ? { url: copy.imageMapping[item.type]!.url, alt: item.image?.alt }\n            : item.image,\n          itemValue: item.value,\n          itemOff: copy.off,\n          itemRules: item.rules,\n          redeemId: Number(item.redeemId),\n          userId: profile?.user_id,\n          alpcConfig,\n        },\n      })\n    } else {\n      setRedeemAndBuyError('')\n      setLoadingId(item.redeemId)\n      try {\n        await redeemAndBuy({\n          productVariant: item.variant,\n          redeemId: Number(item.redeemId),\n          userId: profile?.user_id,\n        })\n      } catch (e: any) {\n        setRedeemAndBuyError(e?.message ?? copy.redeemModal.commonError)\n      } finally {\n        setLoadingId(null)\n      }\n    }\n  }\n\n  return (\n    <>\n      <div className=\"flex flex-1 flex-col gap-[12px]\">\n        <div className=\"flex flex-col gap-[8px]\">\n          {copy.title && <h2 className=\"text-[24px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.title}</h2>}\n          {copy.subtitle && <p className=\"text-[16px] font-[700] leading-snug text-[#4a4c56]\">{copy.subtitle}</p>}\n        </div>\n\n        {copy.insufficientCredits && creditInfo && (\n          <div className=\"text-[14px] font-[700] text-[#1d1d1f]\">\n            {copy.insufficientCredits}: {numberFormat(creditInfo.available_credit)} {copy.pointUnit}\n          </div>\n        )}\n        {redeemAndBuyError && <div className=\"text-[14px] font-[700] text-[#f84d4f]\">{redeemAndBuyError}</div>}\n\n        {listLoading ? (\n          <div className=\"flex flex-1 items-center justify-center py-[32px]\">\n            <div className=\"size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent\" />\n          </div>\n        ) : (\n          <div className=\"flex flex-col\">\n          {list.map((item, idx) => {\n            const hasProduct = !!item.product\n            return (\n            <div key={idx} className=\"relative py-[16px]\">\n              {idx > 0 && <div className=\"absolute inset-x-0 top-0 h-px bg-[#dadce0]\" />}\n              <div className=\"flex items-center gap-[12px]\">\n                {(() => {\n                  const mappedImgUrl = copy.imageMapping?.[item.type]?.url\n                  const imgUrl = hasProduct\n                    ? (item.variant?.image?.url ?? item.product?.images?.[0]?.url ?? item.image?.url)\n                    : (mappedImgUrl ?? item.image?.url)\n                  const imgAlt = hasProduct\n                    ? (item.variant?.image?.altText ?? item.product?.images?.[0]?.alt ?? item.image?.alt ?? '')\n                    : (item.image?.alt ?? '')\n                  if (!imgUrl) return null\n                  return (\n                    <div className={cn('relative size-[64px] shrink-0 overflow-hidden', rounded ? 'rounded-[4px]' : 'rounded-none')}>\n                      <Picture\n                        source={imgUrl}\n                        alt={imgAlt}\n                        className=\"flex size-full items-center justify-center\"\n                        imgClassName={hasProduct ? 'object-cover' : 'h-full w-auto object-contain'}\n                      />\n                      {!hasProduct && item.value && (\n                        <div className=\"absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white\">\n                          {item.value} {copy.off}\n                        </div>\n                      )}\n                    </div>\n                  )\n                })()}\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"text-[16px] font-[700] text-[#1e2024] line-clamp-2\">\n                    {hasProduct && item.product?.title\n                      ? item.product.title\n                      : item.title}\n                  </div>\n                  <div className=\"mt-[4px] text-[14px] text-[#666]\">\n                    {hasProduct && item.price != null\n                      ? `${numberFormat(item.alpcData.consume_credits)} ${copy.pointUnit ?? ''} + $${Number(item.price).toFixed(2)}`\n                      : `${numberFormat(item.alpcData.consume_credits)} ${copy.pointUnit ?? ''}`}\n                  </div>\n                </div>\n                <div className=\"relative group\">\n                  <Button\n                    className={cn('bg-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white', rounded ? 'rounded-[4px]' : 'rounded-none')}\n                    disabled={isDisabled(item)}\n                    loading={loadingId === item.redeemId}\n                    onClick={() => handleRedeem(item)}\n                  >\n                    {getButtonLabel(item)}\n                  </Button>\n                  {item.insufficient && (\n                    <div className=\"pointer-events-none absolute right-0 top-full z-[100] mt-[10px] hidden w-[200px] group-hover:block\">\n                      <div className=\"relative bg-[#6D6D6F] p-[16px] text-[14px] font-[700] text-white shadow\">\n                        <p className=\"text-pretty tracking-[-0.02em] text-[14px]\">{copy.insufficientCredits}</p>\n                        <div className=\"absolute -top-[8px] right-[20px] size-[16px] origin-top-left rotate-45 rounded-[2px] bg-[#6D6D6F]\" />\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n            )\n          })}\n        </div>\n        )}\n\n        {copy.creditsPage?.url && (\n          <a\n            href={copy.creditsPage.url}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"mt-auto self-start text-[14px] font-[700] text-[#080a0f] underline\"\n          >\n            {copy.creditsPage.label ?? 'Go to Credits Page'}\n          </a>\n        )}\n      </div>\n    </>\n  )\n}\n\nexport default ConsumeCredits\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useMemo", "useState", "Picture", "Button", "cn", "useProductsByHandles", "useHeadlessContext", "useMemberPopupContext", "useViewStack", "useRedeemableList", "useRedeemAndBuy", "ConsumeCreditsItemType", "MemberPopupPanelType", "numberFormat", "ROUNDED_BRANDS", "ConsumeCredits", "copy", "onClose", "profile", "creditInfo", "openSignUpPopup", "alpcConfig", "pushView", "brand", "rounded", "redeemAndBuyError", "setRedeemAndBuyError", "loadingId", "setLoadingId", "isLogin", "redeemableList", "listLoading", "redeemAndBuy", "handles", "item", "products", "list", "alpcData", "r", "availableCredit", "insufficient", "soldOut", "product", "variant", "p", "v", "getButtonLabel", "isDisabled", "handleRedeem", "e", "idx", "hasProduct", "mappedImgUrl", "imgUrl", "imgAlt", "ConsumeCredits_default"]
+  "sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\nimport { Picture, Button } from '@anker-in/headless-ui'\nimport { gaTrack, classNames as cn, useProductsByHandles, useHeadlessContext } from '@anker-in/lib'\nimport { useMemberPopupContext } from '../../context/provider'\nimport { useViewStack } from '../../context/viewStack'\nimport { useRedeemableList } from './hooks/useRedeemableList'\nimport { useRedeemAndBuy } from './hooks/useRedeemAndBuy'\nimport {\n  ConsumeCreditsItemType,\n  MemberPopupPanelType,\n  type ConsumeCreditsopy,\n  type ConsumeCreditsItem,\n} from '../../type'\nimport { numberFormat } from '../../../credits/context/utils'\nimport type { ConsumeCreditRuleResponse } from '../../../credits/context/response'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype EnrichedItem = ConsumeCreditsItem & {\n  alpcData: ConsumeCreditRuleResponse\n  insufficient: boolean\n  soldOut: boolean\n  disabled: boolean\n  product?: any\n  variant?: any\n}\n\ntype Props = {\n  copy: ConsumeCreditsopy\n}\n\nfunction ConsumeCredits({ copy }: Props) {\n  const { profile, creditInfo, openSignUpPopup, alpcConfig, isActivateSuccess, fetchCreditInfo, pageHandle } =\n    useMemberPopupContext()\n  const { pushView } = useViewStack()\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  const [redeemAndBuyError, setRedeemAndBuyError] = useState('')\n  const [loadingId, setLoadingId] = useState<string | number | null>(null)\n\n  useEffect(() => {\n    if (profile?.user_id) fetchCreditInfo(profile.user_id)\n  }, [])\n\n  const isLogin = !!profile\n  const { redeemableList, listLoading } = useRedeemableList(alpcConfig)\n  const { trigger: redeemAndBuy } = useRedeemAndBuy(alpcConfig)\n\n  const handles = copy.list.map(item => item.product?.handle).filter(Boolean) as string[]\n  const { data: products } = useProductsByHandles({ handles })\n\n  const list = useMemo(() => {\n    return copy.list\n      .map(item => {\n        const alpcData = redeemableList.find(r => String(r.id) === String(item.redeemId))\n        if (!alpcData) return null\n\n        const availableCredit = Number(creditInfo?.available_credit ?? 0)\n        const insufficient = alpcData.consume_credits > availableCredit\n        const alpcSoldOut = alpcData.is_limited && (!alpcData.remaining_inventory || alpcData.remaining_inventory <= 0)\n\n        const isPhysicalProduct =\n          item.type === ConsumeCreditsItemType.RedeemAndBuy || item.type === ConsumeCreditsItemType.Product\n        const product = products?.find((p: any) => p.handle === item.product?.handle)\n        const variant = product?.variants?.find((v: any) => v.sku === item.product?.sku) ?? product?.variants?.[0]\n        if (isPhysicalProduct && (!product || !variant || !variant?.availableForSale || alpcSoldOut)) {\n          return null\n        }\n        if (item.type === ConsumeCreditsItemType.RedeemAndBuy && item.price == null) {\n          return null\n        }\n        return { ...item, alpcData, insufficient, product, variant }\n      })\n      .filter(Boolean) as EnrichedItem[]\n  }, [copy.list, redeemableList, creditInfo, profile, isLogin, products])\n\n  const isActivate = profile?.activated || isActivateSuccess\n\n  function getButtonLabel(item: (typeof list)[number]) {\n    if (!isLogin || !isActivate) {\n      return copy.unlockRewards\n    }\n    if (item.soldOut) {\n      return copy.soldOut\n    }\n    return copy.btnRedeem\n  }\n\n  function isDisabled(item: (typeof list)[number]) {\n    if (!isLogin || !isActivate) {\n      return false\n    }\n    return item.insufficient\n  }\n\n  function trackRedeemButton(itemTitle: string) {\n    gaTrack({\n      event: 'ga4Event',\n      event_name: 'lp_button',\n      event_parameters: {\n        position: 'consume_credits',\n        button_name: 'redeem',\n        info: 'Member Floating Window',\n      },\n    })\n  }\n\n  async function handleRedeem(item: (typeof list)[number]) {\n    if (!isLogin) {\n      openSignUpPopup()\n      return\n    }\n    if (!isActivate) {\n      pushView({\n        type: MemberPopupPanelType.Activate,\n      })\n      return\n    }\n    if (item.type === ConsumeCreditsItemType.GiftCard || item.type === ConsumeCreditsItemType.Product) {\n      if (copy.creditsPage?.url) {\n        const sectionId = copy.creditsPage.redeemListSectionId ?? 'creditsRedeemList'\n        const targetUrl = new URL(copy.creditsPage.url, window.location.href)\n        targetUrl.searchParams.set('section', sectionId)\n        targetUrl.hash = sectionId\n        if (pageHandle) {\n          targetUrl.searchParams.set('ref', `${pageHandle}_consume_credits`)\n        }\n        trackRedeemButton(item.title)\n        window.open(targetUrl.toString(), '_blank', 'noopener,noreferrer')\n      }\n      return\n    }\n    if (item.type === ConsumeCreditsItemType.Coupon) {\n      trackRedeemButton(item.title)\n      pushView({\n        type: MemberPopupPanelType.RedeemCoupon,\n        props: {\n          itemTitle: item.title,\n          itemCredits: item.alpcData.consume_credits,\n          itemImage: copy.imageMapping?.[item.type]\n            ? { url: copy.imageMapping[item.type]!.url, alt: item.image?.alt }\n            : item.image,\n          itemValue: item.value,\n          itemRules: item.rules,\n          redeemId: Number(item.redeemId),\n          userId: profile?.user_id,\n          alpcConfig,\n        },\n      })\n    } else {\n      setRedeemAndBuyError('')\n      setLoadingId(item.redeemId)\n      trackRedeemButton(item.title)\n      try {\n        await redeemAndBuy({\n          productVariant: item.variant,\n          redeemId: Number(item.redeemId),\n          userId: profile?.user_id,\n        })\n        gaTrack({\n          event: 'ga4Event',\n          event_name: 'lp_button',\n          event_parameters: {\n            position: 'consume_credits',\n            button_name: 'redeem_success',\n            info: 'Member Floating Window',\n          },\n        })\n      } catch (e: any) {\n        setRedeemAndBuyError(e?.message ?? copy.redeemModal.commonError)\n      } finally {\n        setLoadingId(null)\n      }\n    }\n  }\n\n  return (\n    <>\n      <div className=\"flex flex-1 flex-col\">\n        <div className=\"flex flex-col gap-[8px]\">\n          {copy.title && <h2 className=\"text-[24px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.title}</h2>}\n          {copy.subtitle && (\n            <p className=\"text-[16px] mt-[8px] font-[700] leading-snug text-[#4a4c56]\">{copy.subtitle}</p>\n          )}\n        </div>\n\n        {isLogin && (\n          <div\n            className={cn(\n              'flex items-center mt-[16px] gap-[12px] bg-[#f5f6f7] p-[16px]',\n              rounded ? 'rounded-[8px]' : 'rounded-none'\n            )}\n          >\n            <div className=\"flex flex-1 flex-col gap-[4px]\">\n              <div className=\"text-[14px] font-[700] text-[#1e2024]\">{copy.balanceLabel ?? 'AnkerCredits Balance'}</div>\n              <div className=\"flex items-end gap-[4px]\">\n                <span className=\"text-[24px] font-[700] leading-[1.2] text-[#1e2024]\">\n                  {numberFormat(creditInfo?.available_credit || 0)}\n                </span>\n                <span className=\"text-[14px] font-[700] leading-[1.4] text-[#1e2024]\">\n                  {copy.creditUnit ?? 'ankercredits'}\n                </span>\n              </div>\n            </div>\n            <div className=\"h-full w-px bg-[#dadce0]\" />\n            <div className=\"flex flex-1 flex-col gap-[4px]\">\n              <div className=\"text-[14px] font-[700] text-[#1e2024]\">{copy.comingSoonLabel ?? 'Coming Soon'}</div>\n              <div className=\"flex items-end gap-[4px]\">\n                <span className=\"text-[24px] font-[700] leading-[1.2] text-[#1e2024]\">\n                  {numberFormat(creditInfo?.pending_credit || 0)}\n                </span>\n                <span className=\"text-[14px] font-[700] leading-[1.4] text-[#1e2024]\">\n                  {copy.creditUnit ?? 'ankercredits'}\n                </span>\n              </div>\n            </div>\n          </div>\n        )}\n        {redeemAndBuyError && <div className=\"text-[14px] mt-[8px] font-[700] text-[#f84d4f]\">{redeemAndBuyError}</div>}\n\n        {listLoading ? (\n          <div className=\"flex flex-1 items-center justify-center py-[32px]\">\n            <div className=\"size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent\" />\n          </div>\n        ) : (\n          <div className=\"flex mt-[16px] flex-col\">\n            {list.map((item, idx) => {\n              return (\n                <div key={idx} className=\"relative py-[16px]\">\n                  {idx > 0 && <div className=\"absolute inset-x-0 top-0 h-px bg-[#dadce0]\" />}\n                  <div className=\"flex items-center gap-[12px]\">\n                    {(() => {\n                      const phsicalProduct =\n                        item.type === ConsumeCreditsItemType.Product ||\n                        item.type === ConsumeCreditsItemType.RedeemAndBuy\n                      const imgUrl = phsicalProduct\n                        ? (item.variant?.image?.url ?? item.product?.images?.[0]?.url ?? item.image?.url)\n                        : item.image?.url || copy.imageMapping?.[item.type]?.url\n                      const imgAlt = phsicalProduct\n                        ? (item.variant?.image?.altText ?? item.product?.images?.[0]?.alt ?? item.image?.alt ?? '')\n                        : (item.image?.alt ?? '')\n                      if (!imgUrl) return null\n                      return (\n                        <div\n                          className={cn(\n                            'relative size-[64px] shrink-0 overflow-hidden',\n                            rounded ? 'rounded-[4px]' : 'rounded-none'\n                          )}\n                        >\n                          <Picture\n                            source={imgUrl}\n                            alt={imgAlt}\n                            className=\"flex size-full items-center justify-center\"\n                            imgClassName={phsicalProduct ? 'object-cover' : 'h-full w-auto object-contain'}\n                          />\n                          {item.type === ConsumeCreditsItemType.Coupon && item.value && (\n                            <div className=\"absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white\">\n                              {item.value && `${item.value} ${copy.off}`}\n                            </div>\n                          )}\n                          {item.type === ConsumeCreditsItemType.GiftCard && item.value && (\n                            <div className=\"absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white\">\n                              {item.value && `${item.value} ${copy.giftCard || 'Gift Card'}`}\n                            </div>\n                          )}\n                        </div>\n                      )\n                    })()}\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"text-[16px] font-[700] text-[#1e2024] line-clamp-2\">\n                        {item.product?.title ?? item.title ?? item.alpcData?.name}\n                      </div>\n                      <div className=\"mt-[4px] text-[14px] text-[#666]\">\n                        {item.type === ConsumeCreditsItemType.RedeemAndBuy ? (\n                          <div>\n                            <span>\n                              {numberFormat(item.alpcData.consume_credits)} {copy.creditUnit ?? ''} + $\n                              {Number(item.price).toFixed(2)}\n                            </span>\n                            {item.variant?.price?.amount && (\n                              <span className=\"text-[12px] ml-1 text-[#999] line-through\">\n                                ${Number(item.variant.price.amount).toFixed(2)}\n                              </span>\n                            )}\n                          </div>\n                        ) : (\n                          `${numberFormat(item.alpcData.consume_credits)} ${copy.creditUnit ?? ''}`\n                        )}\n                      </div>\n                    </div>\n                    <div className=\"relative group\">\n                      <Button\n                        size=\"base\"\n                        disabled={isDisabled(item)}\n                        loading={loadingId === item.redeemId}\n                        onClick={() => handleRedeem(item)}\n                      >\n                        {getButtonLabel(item)}\n                      </Button>\n                      {item.insufficient && isLogin && isActivate && (\n                        <div className=\"pointer-events-none absolute right-0 top-full z-[100] mt-[10px] hidden w-[200px] group-hover:block\">\n                          <div className=\"relative bg-[#6D6D6F] p-[16px] text-[14px] font-[700] text-white shadow\">\n                            <p className=\"text-pretty tracking-[-0.02em] text-[14px]\">{copy.insufficientCredits}</p>\n                            <div className=\"absolute -top-[8px] right-[20px] size-[16px] origin-top-left rotate-45 rounded-[2px] bg-[#6D6D6F]\" />\n                          </div>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n        )}\n\n        {copy.creditsPage?.url && (\n          <a\n            href={(() => {\n              if (!pageHandle) return copy.creditsPage!.url\n              try {\n                const url = new URL(copy.creditsPage!.url, window.location.href)\n                url.searchParams.set('ref', `${pageHandle}_consume_credits`)\n                return url.toString()\n              } catch {\n                return copy.creditsPage!.url\n              }\n            })()}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"mt-auto self-start text-[14px] font-[700] text-[#080a0f] underline\"\n            onClick={() =>\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'lp_button',\n                event_parameters: {\n                  position: 'consume_credits',\n                  button_name: 'credits_page_link',\n                  info: 'Member Floating Window',\n                },\n              })\n            }\n          >\n            {copy.creditsPage.label ?? 'Go to Credits Page'}\n          </a>\n        )}\n      </div>\n    </>\n  )\n}\n\nexport default ConsumeCredits\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useEffect", "useMemo", "useState", "Picture", "Button", "gaTrack", "cn", "useProductsByHandles", "useHeadlessContext", "useMemberPopupContext", "useViewStack", "useRedeemableList", "useRedeemAndBuy", "ConsumeCreditsItemType", "MemberPopupPanelType", "numberFormat", "ROUNDED_BRANDS", "ConsumeCredits", "copy", "profile", "creditInfo", "openSignUpPopup", "alpcConfig", "isActivateSuccess", "fetchCreditInfo", "pageHandle", "pushView", "brand", "rounded", "redeemAndBuyError", "setRedeemAndBuyError", "loadingId", "setLoadingId", "isLogin", "redeemableList", "listLoading", "redeemAndBuy", "handles", "item", "products", "list", "alpcData", "r", "availableCredit", "insufficient", "alpcSoldOut", "isPhysicalProduct", "product", "p", "variant", "v", "isActivate", "getButtonLabel", "isDisabled", "trackRedeemButton", "itemTitle", "handleRedeem", "sectionId", "targetUrl", "e", "idx", "phsicalProduct", "imgUrl", "imgAlt", "url", "ConsumeCredits_default"]
 }

package/dist/esm/components/memberPopup/panels/EarnCredits/ActivatePanel.d.ts CHANGED Viewed

@@ -2,7 +2,6 @@ import type { AuthCodeActivateCopy } from '../../type';
 type Props = {
     copy: AuthCodeActivateCopy;
     onClose: () => void;
-    onSuccess?: () => void;
 };
-export default function ActivatePanel({ copy, onClose, onSuccess }: Props): import("react/jsx-runtime").JSX.Element;
+export default function ActivatePanel({ copy, onClose }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/memberPopup/panels/EarnCredits/ActivatePanel.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as n,jsxs as b}from"react/jsx-runtime";import{useState as f,useCallback as A,useRef as O,useEffect as D}from"react";import{Button as U,Text as r}from"@anker-in/headless-ui";import{useSendEmailValidation as q,gaTrack as I,classNames as R,useHeadlessContext as G,useEmailValidation as J,useCountDown as Q}from"@anker-in/lib";import{Message as W}from"../../../registration/authCodeActivate/Message";import{useRegistration as X}from"../../../registration";import{ROUNDED_BRANDS as Y}from"../../../../constants";function Z({copy:e,onClose:x,onSuccess:h}){const{locale:H,brand:L}=G(),{email:i}=X(),V=Y.includes(L),{isMutating:y,trigger:v,data:C}=q(),{isMutating:B,trigger:T}=J(),[P,l]=f(""),[$,c]=f(""),{startCountDown:S,startAction:M,countDown:j}=Q(60),[k,u]=f(""),[_,m]=f(0),[o,E]=f(new Array(6).fill("")),N=O([]),p=o.join("");D(()=>{N.current[_]&&N.current[_].focus()},[_]),D(()=>{i&&v({email:i,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{c("success"),l(e?.sendEmailSuccessMessage||""),M(),setTimeout(()=>{c(""),l("")},5e3)}})},[i]);const z=A(async()=>{i&&(await v({email:i,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{c("success"),l(e?.sendEmailSuccessMessage||""),M(),setTimeout(()=>{c(""),l("")},5e3)}}),I({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"sent_again"}}))},[i,v]),F=(d,a)=>{const{value:t}=d.target;if(u(""),Number.isNaN(Number(t)))return;if(t.length>1){a<o.length-1&&(o[a+1]||(m(a+1),E(g=>{const w=[...g];return w[a]=t[0],t.length>1&&(w[a+1]=t[1]),w})));return}const s=[...o];s[a]=t,E(s),t?a<o.length-1&&!o[a+1]&&m(a+1):a>0&&m(a-1)},K=A(async()=>{if(!p?.length){u(e?.codeEmptyError||"");return}if(p.length<6){u(e?.incorrectCodeError||"");return}const d=C?.data?.data?.active_token??C?.data?.active_token;d&&await T({token:d,code:p},{onSuccess:t=>{if(t.status>=200&&t.status<300)c("success"),l(e?.authSuccessMessage||""),h?.(),setTimeout(()=>{x()},3e3);else{const s=t?.data?.error_code??t?.error_code;s==="104"?(h?.(),setTimeout(()=>{x()},3e3)):u(s==="142"?e?.incorrectCodeError||"Invalid verification code.":s==="154"?e?.expiredCodeMessage||"":e?.sendEmailErrorMessage||"")}}});let a=setTimeout(()=>{c(""),l(""),clearTimeout(a)},5e3);I({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"check_and_active"}})},[p,e?.codeEmptyError,e?.authSuccessMessage,e?.incorrectCodeError,e?.expiredCodeMessage,e?.sendEmailErrorMessage,H,C,T,x,h]);return b("div",{className:"relative",children:[b("div",{children:[n(r,{className:"text-[22px] font-extrabold leading-[120%] text-[#333] min-l:text-[24px] [&_abbr]:text-[#005d8e]",html:e?.authCodeTitle}),n(r,{as:"p",className:"mt-3 text-[14px] font-semibold leading-[140%] text-[rgba(51,51,51,0.75)] min-l:text-base [&_abbr]:text-[#333]",html:e?.authCodeDesc?.replace("%email%",i||"")})]}),b("div",{className:"mt-6",children:[n(r,{className:"mt-4 text-[14px] !font-bold font-semibold leading-[140%] text-[#333] min-l:mt-6",html:e?.enterActiveCodeText}),n("div",{className:"my-3 grid grid-cols-6 gap-2",children:o.map((d,a)=>n("div",{className:"col-span-1 aspect-1 text-[#555]",children:n("input",{ref:t=>{t&&(N.current[a]=t)},type:"tel",className:R("flex size-full items-center justify-center border border-[#333333]/20 bg-[#EEEEEE] text-center text-[24px] font-medium focus:border-[#333]/50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&:focus-visible]:outline-none",V&&"rounded-[12px]"),value:d,autoComplete:"false",autoCorrect:"false",spellCheck:"false",autoCapitalize:"false",onChange:t=>F(t,a),onFocus:()=>{m(a)},onPaste:t=>{const s=t.clipboardData.getData("text");if(!Number.isNaN(Number(s))){const g=s.split("").slice(0,6);E(g.concat(Array(6-g.length).fill(""))),g.length<=o.length&&m(g.length-1)}},onKeyDown:t=>{const{value:s}=t.target;t.key==="Backspace"&&!s&&a>0&&m(a-1)}},a)},a))}),k&&n(r,{className:"mb-3 text-[14px] font-semibold leading-[120%] text-[#f84d4f]",html:k}),e?.authCodeContent&&n("ul",{className:'flex flex-col gap-1 [&_li]:flex [&_li]:gap-2 [&_li]:text-[14px] [&_li]:font-semibold [&_li]:leading-[120%] [&_li]:text-[rgba(51,51,51,0.55)] [&_li]:before:content-["\u2022"]',dangerouslySetInnerHTML:{__html:e?.authCodeContent}})]}),b("div",{className:"mt-4 min-l:mt-6",children:[n(r,{className:"text-base font-semibold leading-[100%] text-[#333]",html:e?.authCodeReceiveText})," ",S?n(r,{html:e?.retrieveText?.replace("%countdownTime%",j.toString()),className:"cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline"}):n(r,{onClick:z,className:R("cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline",{"pointer-events-none":S||y}),html:e?.sendAgainText}),n(U,{type:"submit",loading:B,className:"mt-6 flex h-[54px] w-full cursor-pointer items-center justify-center px-8 py-[15px] text-center text-base font-bold leading-[100%] text-white min-l:mt-8",onClick:K,children:e.buttonText})]}),n(W,{status:$,message:P})]})}export{Z as default};
+import{jsx as n,jsxs as _}from"react/jsx-runtime";import{useState as p,useCallback as R,useRef as U,useEffect as H}from"react";import{Button as q,Text as r}from"@anker-in/headless-ui";import{useSendEmailValidation as G,gaTrack as S,classNames as L,useHeadlessContext as J,useEmailValidation as Q,useCountDown as X}from"@anker-in/lib";import{Message as Y}from"../../../registration/authCodeActivate/Message";import{useRegistration as Z}from"../../../registration";import{useMemberPopupContext as ee}from"../../context/provider";import{ROUNDED_BRANDS as te}from"../../../../constants";function ae({copy:e,onClose:v}){const{setIsActivateSuccess:h,fetchCreditInfo:C,profile:f}=ee(),{locale:P,brand:V}=J(),{email:i}=Z(),B=te.includes(V),{isMutating:F,trigger:x,data:E}=G(),{isMutating:$,trigger:k}=Q(),[z,l]=p(""),[y,u]=p(""),{startCountDown:A,startAction:D,countDown:W}=X(60),[I,c]=p(""),[N,m]=p(0),[o,w]=p(new Array(6).fill("")),T=U([]),b=o.join("");H(()=>{T.current[N]&&T.current[N].focus()},[N]),H(()=>{i&&x({email:i,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{u("success"),l(e?.sendEmailSuccessMessage||""),D(),setTimeout(()=>{u(""),l("")},5e3)}})},[i]);const j=R(async()=>{i&&(await x({email:i,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{u("success"),l(e?.sendEmailSuccessMessage||""),D(),setTimeout(()=>{u(""),l("")},5e3)}}),S({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"sent_again"}}))},[i,x]),K=(d,a)=>{const{value:t}=d.target;if(c(""),Number.isNaN(Number(t)))return;if(t.length>1){a<o.length-1&&(o[a+1]||(m(a+1),w(g=>{const M=[...g];return M[a]=t[0],t.length>1&&(M[a+1]=t[1]),M})));return}const s=[...o];s[a]=t,w(s),t?a<o.length-1&&!o[a+1]&&m(a+1):a>0&&m(a-1)},O=R(async()=>{if(!b?.length){c(e?.codeEmptyError||"");return}if(b.length<6){c(e?.incorrectCodeError||"");return}const d=E?.data?.data?.active_token??E?.data?.active_token;d&&await k({token:d,code:b},{onSuccess:t=>{if(t.status>=200&&t.status<300)u("success"),l(e?.authSuccessMessage||""),h(!0),f?.user_id&&setTimeout(()=>C(f.user_id),3e3),S({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"check_and_active",info:"Member Floating Window"}}),setTimeout(()=>{v()},3e3);else{const s=t?.data?.error_code??t?.error_code;s==="104"?(h(!0),f?.user_id&&setTimeout(()=>C(f.user_id),3e3),S({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"check_and_active",info:"Member Floating Window"}}),setTimeout(()=>{v()},3e3)):c(s==="142"?e?.incorrectCodeError||"Invalid verification code.":s==="154"?e?.expiredCodeMessage||"":e?.sendEmailErrorMessage||"")}}});let a=setTimeout(()=>{u(""),l(""),clearTimeout(a)},5e3)},[b,e?.codeEmptyError,e?.authSuccessMessage,e?.incorrectCodeError,e?.expiredCodeMessage,e?.sendEmailErrorMessage,P,E,k,v,h,C,f]);return _("div",{className:"relative",children:[_("div",{children:[n(r,{className:"text-[22px] font-extrabold leading-[120%] text-[#333] min-l:text-[24px] [&_abbr]:text-[#005d8e]",html:e?.authCodeTitle}),n(r,{as:"p",className:"mt-3 text-[14px] font-semibold leading-[140%] text-[rgba(51,51,51,0.75)] min-l:text-base [&_abbr]:text-[#333]",html:e?.authCodeDesc?.replace("%email%",i||"")})]}),_("div",{className:"mt-6",children:[n(r,{className:"mt-4 text-[14px] !font-bold font-semibold leading-[140%] text-[#333] min-l:mt-6",html:e?.enterActiveCodeText}),n("div",{className:"my-3 grid grid-cols-6 gap-2",children:o.map((d,a)=>n("div",{className:"col-span-1 aspect-1 text-[#555]",children:n("input",{ref:t=>{t&&(T.current[a]=t)},type:"tel",className:L("flex size-full items-center justify-center border border-[#333333]/20 bg-[#EEEEEE] text-center text-[24px] font-medium focus:border-[#333]/50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&:focus-visible]:outline-none",B&&"rounded-[12px]"),value:d,autoComplete:"false",autoCorrect:"false",spellCheck:"false",autoCapitalize:"false",onChange:t=>K(t,a),onFocus:()=>{m(a)},onPaste:t=>{const s=t.clipboardData.getData("text");if(!Number.isNaN(Number(s))){const g=s.split("").slice(0,6);w(g.concat(Array(6-g.length).fill(""))),g.length<=o.length&&m(g.length-1)}},onKeyDown:t=>{const{value:s}=t.target;t.key==="Backspace"&&!s&&a>0&&m(a-1)}},a)},a))}),I&&n(r,{className:"mb-3 text-[14px] font-semibold leading-[120%] text-[#f84d4f]",html:I}),e?.authCodeContent&&n("ul",{className:'flex flex-col gap-1 [&_li]:flex [&_li]:gap-2 [&_li]:text-[14px] [&_li]:font-semibold [&_li]:leading-[120%] [&_li]:text-[rgba(51,51,51,0.55)] [&_li]:before:content-["\u2022"]',dangerouslySetInnerHTML:{__html:e?.authCodeContent}})]}),_("div",{className:"mt-4 min-l:mt-6",children:[n(r,{className:"text-base font-semibold leading-[100%] text-[#333]",html:e?.authCodeReceiveText})," ",A?n(r,{html:e?.retrieveText?.replace("%countdownTime%",W.toString()),className:"cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline"}):n(r,{onClick:j,className:L("cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline",{"pointer-events-none":A||F}),html:e?.sendAgainText}),n(q,{type:"submit",loading:$,className:"mt-6 w-full min-l:mt-8",size:"base",onClick:O,children:e.buttonText})]}),n(Y,{status:y,message:z})]})}export{ae as default};
 //# sourceMappingURL=ActivatePanel.js.map