@anker-in/campaign-ui 0.5.0-beta.23 → 0.5.0-beta.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.js.map +2 -2
- package/dist/cjs/components/memberPopup/panels/ConsumeCredits/index.js +1 -1
- package/dist/cjs/components/memberPopup/panels/ConsumeCredits/index.js.map +3 -3
- package/dist/cjs/components/memberPopup/panels/EarnCredits/ActivatePanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/EarnCredits/ActivatePanel.js.map +2 -2
- package/dist/cjs/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.js.map +2 -2
- package/dist/cjs/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.js.map +2 -2
- package/dist/cjs/components/memberPopup/panels/EarnCredits/index.js +1 -1
- package/dist/cjs/components/memberPopup/panels/EarnCredits/index.js.map +3 -3
- package/dist/cjs/components/memberPopup/type.d.ts +3 -0
- package/dist/cjs/components/memberPopup/type.js +1 -1
- package/dist/cjs/components/memberPopup/type.js.map +1 -1
- package/dist/esm/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.js.map +2 -2
- package/dist/esm/components/memberPopup/panels/ConsumeCredits/index.js +1 -1
- package/dist/esm/components/memberPopup/panels/ConsumeCredits/index.js.map +3 -3
- package/dist/esm/components/memberPopup/panels/EarnCredits/ActivatePanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/EarnCredits/ActivatePanel.js.map +2 -2
- package/dist/esm/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.js.map +2 -2
- package/dist/esm/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.js.map +2 -2
- package/dist/esm/components/memberPopup/panels/EarnCredits/index.js +1 -1
- package/dist/esm/components/memberPopup/panels/EarnCredits/index.js.map +3 -3
- package/dist/esm/components/memberPopup/type.d.ts +3 -0
- package/dist/esm/components/memberPopup/type.js.map +1 -1
- package/package.json +2 -1
- package/src/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.tsx +1 -1
- package/src/components/memberPopup/panels/ConsumeCredits/index.tsx +33 -12
- package/src/components/memberPopup/panels/EarnCredits/ActivatePanel.tsx +2 -2
- package/src/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.tsx +1 -1
- package/src/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.tsx +1 -1
- package/src/components/memberPopup/panels/EarnCredits/index.tsx +6 -1
- package/src/components/memberPopup/type.ts +3 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Checkbox, 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 onClose: () => 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\nexport default function SubscribeEmailPanel({ copy, email: initialEmail, onClose }: Props) {\n const { alpcConfig, setIsSubscribeSuccess, fetchCreditInfo, profile } = useMemberPopupContext()\n const { brand, locale } = alpcConfig\n const { brand: headlessBrand } = 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 try {\n const response = await fetch('/api/multipass/subscribe/subscribe_emails', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', 'current-language': locale },\n body: JSON.stringify({\n email,\n register_source,\n brand,\n deals_type: copy.dealsType ?? 'vip_subscribe',\n }),\n })\n const result = await response.json()\n if (!result.errors) {\n setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')\n setIsSubscribeSuccess(true)\n if (profile?.user_id) fetchCreditInfo(profile.user_id)\n gaTrack({\n event: 'ga4Event',\n event_name: 'subscribe',\n event_parameters: {\n page_group: copy.dealsType ?? '',\n position: 'sticky',\n info: '',\n },\n })\n setTimeout(() => {\n setSuccessMessage('')\n onClose()\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, brand, copy, onClose, setIsSubscribeSuccess])\n\n return (\n <div className=\"flex flex-col gap-[12px]\">\n <div className=\"flex flex-col gap-[8px]\">\n {copy.title && (\n <h2 className=\"text-[24px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.title}</h2>\n )}\n {copy.desc && (\n <Text className=\"text-[16px] text-[#1e2024]\" html={copy.desc} />\n )}\n </div>\n\n <div className=\"flex flex-col gap-[16px]\">\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 => { setErrorMessage(''); setEmail(e.target.value.trim()) }}\n />\n\n <div className=\"flex w-full items-start gap-[8px]\">\n <Checkbox checked={policy} onCheckedChange={() => setPolicy(v => !v)} className=\"mt-[2px] border-[#1d1d1f]\" />\n <label\n className=\"cursor-pointer text-left text-[14px] text-[#1e2024] [&_a]:underline\"\n onClick={() => setPolicy(v => !v)}\n dangerouslySetInnerHTML={{ __html: copy.policy ?? '' }}\n />\n </div>\n\n {(errorMessage || successMessage) && (\n <div className={cn('text-[14px] font-[700]', errorMessage && 'text-[#f84d4f]', successMessage && 'text-[#52c41a]')}>\n <Text html={successMessage || errorMessage} />\n </div>\n )}\n\n <button\n className={cn('w-full cursor-pointer bg-[#080a0f] py-[14px] text-[14px] font-[700] text-white disabled:opacity-60', rounded ? 'rounded-[4px]' : 'rounded-none')}\n disabled={loading}\n onClick={handleSubmit}\n >\n {copy.buttonLabel ?? 'Subscribe'}\n </button>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4FM,IAAAI,EAAA,6BA5FNC,EAAiD,iBACjDC,EAA+B,iCAC/BC,EAA8D,yBAC9DC,EAAoB,wBACpBC,EAAsB,wBACtBC,EAA8B,0CAC9BC,EAAsC,kCAEtCC,EAA+B,iCAQ/B,SAASC,GAAc,CACrB,GAAI,OAAO,OAAW,IAAa,MAAO,CAAE,gBAAiB,EAAG,EAChE,KAAM,CAAE,OAAAC,EAAQ,KAAAC,CAAK,EAAI,OAAO,SAC1BC,KAAQ,SAAMF,CAAM,EAC1B,MAAO,CACL,cAAe,EAAAG,QAAQ,IAAI,eAAe,EAC1C,IAAK,EAAAA,QAAQ,IAAI,SAAS,EAC1B,aAAcD,EAAM,IAAMA,EAAM,cAAgB,EAAAC,QAAQ,IAAI,cAAc,EAC1E,gBAAiBD,EAAM,UAAY,EAAAC,QAAQ,IAAI,YAAY,GAAKF,CAClE,CACF,CAEe,SAARb,EAAqC,CAAE,KAAAgB,EAAM,MAAOC,EAAc,QAAAC,CAAQ,EAAU,CACzF,KAAM,CAAE,WAAAC,EAAY,sBAAAC,EAAuB,gBAAAC,EAAiB,QAAAC,CAAQ,KAAI,yBAAsB,EACxF,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIL,EACpB,CAAE,MAAOM,CAAc,KAAI,sBAAmB,EAC9CC,EAAU,iBAAe,SAASD,CAAa,EAC/C,CAACE,EAAQC,CAAS,KAAI,YAASZ,EAAK,sBAAwB,EAAK,EACjE,CAACa,EAAOC,CAAQ,KAAI,YAASb,GAAgB,EAAE,EAC/C,CAACc,EAAcC,CAAe,KAAI,YAAS,EAAE,EAC7C,CAACC,EAAgBC,CAAiB,KAAI,YAAS,EAAE,EACjD,CAACC,EAASC,CAAU,KAAI,YAAS,EAAK,KAE5C,aAAU,IAAM,CACVnB,GAAca,EAASb,CAAY,CACzC,EAAG,CAACA,CAAY,CAAC,EAEjB,MAAMoB,KAAe,eAAY,SAAY,CAE3C,GADAL,EAAgB,EAAE,EACd,CAACH,EAAO,OAAOG,EAAgB,2BAA2B,EAC9D,GAAI,IAAC,iBAAcH,CAAK,EAAG,OAAOG,EAAgB,uBAAuB,EACzE,GAAI,CAACL,EAAQ,OAAOK,EAAgB,4BAA4B,EAEhEI,EAAW,EAAI,EACf,KAAM,CAAE,gBAAAE,CAAgB,EAAI3B,EAAY,EACxC,GAAI,CAWF,MAAM4B,EAAS,MAVE,MAAM,MAAM,4CAA6C,CACxE,OAAQ,OACR,QAAS,CAAE,eAAgB,mBAAoB,mBAAoBf,CAAO,EAC1E,KAAM,KAAK,UAAU,CACnB,MAAAK,EACA,gBAAAS,EACA,MAAAf,EACA,WAAYP,EAAK,WAAa,eAChC,CAAC,CACH,CAAC,GAC6B,KAAK,EAC9BuB,EAAO,OAkBVP,EAAgBO,EAAO,QAAU,gBAAgB,GAjBjDL,EAAkBlB,EAAK,aAAe,0BAA0B,EAChEI,EAAsB,EAAI,EACtBE,GAAS,
|
|
4
|
+
"sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Checkbox, 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 onClose: () => 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\nexport default function SubscribeEmailPanel({ copy, email: initialEmail, onClose }: Props) {\n const { alpcConfig, setIsSubscribeSuccess, fetchCreditInfo, profile } = useMemberPopupContext()\n const { brand, locale } = alpcConfig\n const { brand: headlessBrand } = 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 try {\n const response = await fetch('/api/multipass/subscribe/subscribe_emails', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', 'current-language': locale },\n body: JSON.stringify({\n email,\n register_source,\n brand,\n deals_type: copy.dealsType ?? 'vip_subscribe',\n }),\n })\n const result = await response.json()\n if (!result.errors) {\n setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')\n setIsSubscribeSuccess(true)\n if (profile?.user_id) setTimeout(() => fetchCreditInfo(profile.user_id), 3000)\n gaTrack({\n event: 'ga4Event',\n event_name: 'subscribe',\n event_parameters: {\n page_group: copy.dealsType ?? '',\n position: 'sticky',\n info: '',\n },\n })\n setTimeout(() => {\n setSuccessMessage('')\n onClose()\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, brand, copy, onClose, setIsSubscribeSuccess])\n\n return (\n <div className=\"flex flex-col gap-[12px]\">\n <div className=\"flex flex-col gap-[8px]\">\n {copy.title && (\n <h2 className=\"text-[24px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.title}</h2>\n )}\n {copy.desc && (\n <Text className=\"text-[16px] text-[#1e2024]\" html={copy.desc} />\n )}\n </div>\n\n <div className=\"flex flex-col gap-[16px]\">\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 => { setErrorMessage(''); setEmail(e.target.value.trim()) }}\n />\n\n <div className=\"flex w-full items-start gap-[8px]\">\n <Checkbox checked={policy} onCheckedChange={() => setPolicy(v => !v)} className=\"mt-[2px] border-[#1d1d1f]\" />\n <label\n className=\"cursor-pointer text-left text-[14px] text-[#1e2024] [&_a]:underline\"\n onClick={() => setPolicy(v => !v)}\n dangerouslySetInnerHTML={{ __html: copy.policy ?? '' }}\n />\n </div>\n\n {(errorMessage || successMessage) && (\n <div className={cn('text-[14px] font-[700]', errorMessage && 'text-[#f84d4f]', successMessage && 'text-[#52c41a]')}>\n <Text html={successMessage || errorMessage} />\n </div>\n )}\n\n <button\n className={cn('w-full cursor-pointer bg-[#080a0f] py-[14px] text-[14px] font-[700] text-white disabled:opacity-60', rounded ? 'rounded-[4px]' : 'rounded-none')}\n disabled={loading}\n onClick={handleSubmit}\n >\n {copy.buttonLabel ?? 'Subscribe'}\n </button>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["SubscribeEmailPanel_exports", "__export", "SubscribeEmailPanel", "__toCommonJS", "import_jsx_runtime", "import_react", "import_headless_ui", "import_lib", "import_js_cookie", "import_query_string", "import_utils", "import_provider", "import_constants", "getAdCookie", "search", "href", "query", "Cookies", "copy", "initialEmail", "onClose", "alpcConfig", "setIsSubscribeSuccess", "fetchCreditInfo", "profile", "brand", "locale", "headlessBrand", "rounded", "policy", "setPolicy", "email", "setEmail", "errorMessage", "setErrorMessage", "successMessage", "setSuccessMessage", "loading", "setLoading", "handleSubmit", "register_source", "result", "cn", "e", "v"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var v=Object.defineProperty;var
|
|
1
|
+
"use strict";var v=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var R=(i,t)=>{for(var n in t)v(i,n,{get:t[n],enumerable:!0})},D=(i,t,n,f)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of M(t))!y.call(i,l)&&l!==n&&v(i,l,{get:()=>t[l],enumerable:!(f=U(t,l))||f.enumerable});return i};var F=i=>D(v({},"__esModule",{value:!0}),i);var W={};R(W,{default:()=>H});module.exports=F(W);var e=require("react/jsx-runtime"),c=require("react"),r=require("@anker-in/lib"),_=require("../../context/provider"),E=require("../../context/viewStack"),P=require("./hooks/useSubscribed"),s=require("../../type"),p=require("../../icons"),g=require("../../../credits/context/utils"),L=require("../../../../constants");function O({id:i,className:t}){switch(i){case s.EarnCreditsTaskType.Activate:return(0,e.jsx)(p.IconLock,{className:t});case s.EarnCreditsTaskType.Subscribe:return(0,e.jsx)(p.IconSubscription,{className:t});case s.EarnCreditsTaskType.Shop:return(0,e.jsx)(p.IconBag,{className:t});case s.EarnCreditsTaskType.CompleteProfile:return(0,e.jsx)(p.IconOrders,{className:t})}}function V({copy:i}){const{profile:t,openSignUpPopup:n,alpcConfig:f,creditInfo:l,fetchCreditInfo:w,isSubscribeSuccess:C,isActivateSuccess:N,isProfileCompleteSuccess:m}=(0,_.useMemberPopupContext)(),{pushView:u}=(0,E.useViewStack)(),{locale:A}=f,{brand:h}=(0,r.useHeadlessContext)(),b=L.ROUNDED_BRANDS.includes(h);(0,c.useEffect)(()=>{t?.user_id&&w(t.user_id)},[]);const o=!!t,k=(0,P.useSubscribed)({userId:t?.user_id,brand:h,email:t?.email,locale:A,apiBaseUrl:f.apiBaseUrl}),S=(0,c.useMemo)(()=>m||!!(t?.first_name||t?.last_name)&&!!t?.phone_number&&!!t?.dob,[t,m]);function x(a){const d={[s.EarnCreditsTaskType.Activate]:"activate",[s.EarnCreditsTaskType.CompleteProfile]:"complete_profile",[s.EarnCreditsTaskType.Subscribe]:"subscribe",[s.EarnCreditsTaskType.Shop]:"shop"};(0,r.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"earn_credits",button_name:d[a],info:"Member Floating Window"}})}const T=(0,c.useMemo)(()=>({[s.EarnCreditsTaskType.Activate]:{finished:!!t?.activated||N,onClick:o?()=>{x(s.EarnCreditsTaskType.Activate),u({type:s.MemberPopupPanelType.Activate})}:n},[s.EarnCreditsTaskType.CompleteProfile]:{finished:S,onClick:o?()=>{x(s.EarnCreditsTaskType.CompleteProfile),u({type:s.MemberPopupPanelType.CompleteProfile})}:n},[s.EarnCreditsTaskType.Subscribe]:{finished:k||C,onClick:o?()=>{x(s.EarnCreditsTaskType.Subscribe),u({type:s.MemberPopupPanelType.SubscribeEmail})}:n},[s.EarnCreditsTaskType.Shop]:{finished:!1,link:i.goShopLink,onClick:o?()=>x(s.EarnCreditsTaskType.Shop):n}}),[t,o,N,m,S,k,C,n,u,i.goShopLink]),B=(0,c.useMemo)(()=>i.list.map(a=>{const d=T[a.id];if(!d)return null;const I=d.finished?i.completed:o?z(a.id,i):i.joinNow;return{...a,...d,buttonLabel:I}}).filter(Boolean),[i,T,o]);return(0,e.jsxs)("div",{className:"flex flex-col gap-[16px]",children:[(0,e.jsxs)("div",{className:"flex flex-col gap-[16px]",children:[(0,e.jsx)("div",{className:"flex flex-col gap-[8px]",children:i.title&&(0,e.jsx)("h2",{className:"text-[24px] font-[700] leading-[1.2] text-[#080a0f]",children:i.title})}),o&&(0,e.jsxs)("div",{className:(0,r.classNames)("flex items-center gap-[12px] bg-[#f5f6f7] p-[16px]",b?"rounded-[8px]":"rounded-none"),children:[(0,e.jsxs)("div",{className:"flex flex-1 flex-col gap-[4px]",children:[(0,e.jsx)("div",{className:"text-[14px] font-[700] text-[#1e2024]",children:i.balanceLabel??"AnkerCredits Balance"}),(0,e.jsxs)("div",{className:"flex items-end gap-[4px]",children:[(0,e.jsx)("span",{className:"text-[24px] font-[700] leading-[1.2] text-[#1e2024]",children:(0,g.numberFormat)(l?.available_credit??0)}),(0,e.jsx)("span",{className:"text-[14px] font-[700] leading-[1.4] text-[#1e2024]",children:i.creditUnit??"ankercredits"})]})]}),(0,e.jsx)("div",{className:"h-full w-px bg-[#dadce0]"}),(0,e.jsxs)("div",{className:"flex flex-1 flex-col gap-[4px]",children:[(0,e.jsx)("div",{className:"text-[14px] font-[700] text-[#1e2024]",children:i.comingSoonLabel??"Coming Soon"}),(0,e.jsxs)("div",{className:"flex items-end gap-[4px]",children:[(0,e.jsx)("span",{className:"text-[24px] font-[700] leading-[1.2] text-[#1e2024]",children:(0,g.numberFormat)(l?.pending_credit??0)}),(0,e.jsx)("span",{className:"text-[14px] font-[700] leading-[1.4] text-[#1e2024]",children:i.creditUnit??"ankercredits"})]})]})]})]}),(0,e.jsxs)("div",{className:"flex flex-col gap-[16px]",children:[i.subtitle&&(0,e.jsx)("p",{className:"text-[16px] font-[700] text-[#1e2024]",children:i.subtitle}),(0,e.jsx)("div",{className:"flex flex-col",children:B.map((a,d)=>(0,e.jsxs)("div",{className:"relative py-[16px]",children:[d>0&&(0,e.jsx)("div",{className:"absolute left-0 right-0 top-0 h-px bg-[#dadce0]"}),(0,e.jsxs)("div",{className:(0,r.classNames)("flex items-center gap-[12px]"),children:[(0,e.jsx)(O,{id:a.id,className:"size-[24px] shrink-0"}),(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)("div",{className:"text-[16px] font-[700] text-[#1e2024]",children:a.title}),a.credits&&(0,e.jsx)("div",{className:"mt-[4px] text-[14px] font-bold text-[#4A4C56]",children:a.credits})]}),!a.finished&&a.link&&o?(0,e.jsx)("a",{href:a.link,target:"_blank",rel:"noopener noreferrer",className:(0,r.classNames)("cursor-pointer bg-[#080a0f] min-w-[118px] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white",b?"rounded-[4px]":"rounded-none"),onClick:()=>x(a.id),children:a.buttonLabel}):(0,e.jsx)("button",{className:(0,r.classNames)("cursor-pointer min-w-[118px] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white",a.finished?"bg-[#767880]":"bg-[#080a0f]",b?"rounded-[4px]":"rounded-none",a.finished&&"opacity-60"),disabled:a.finished,onClick:a.finished?void 0:a.onClick,children:a.buttonLabel})]})]},d))})]})]})}function z(i,t){switch(i){case s.EarnCreditsTaskType.Activate:return t.activate;case s.EarnCreditsTaskType.CompleteProfile:return t.completeProfileLabel;case s.EarnCreditsTaskType.Subscribe:return t.subscribeLabel;case s.EarnCreditsTaskType.Shop:return t.shopNow}}var H=V;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/memberPopup/panels/EarnCredits/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useMemo } from 'react'\nimport { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport { useMemberPopupContext } from '../../context/provider'\nimport { useViewStack } from '../../context/viewStack'\nimport { useSubscribed } from './hooks/useSubscribed'\nimport { EarnCreditsTaskType, MemberPopupPanelType, type EarnCreditsCopy } from '../../type'\nimport { IconBag, IconLock, IconSubscription, IconOrders } from '../../icons'\nimport { numberFormat } from '../../../credits/context/utils'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\nfunction TaskIcon({ id, className }: { id: EarnCreditsTaskType; className?: string }) {\n switch (id) {\n case EarnCreditsTaskType.Activate:\n return <IconLock className={className} />\n case EarnCreditsTaskType.Subscribe:\n return <IconSubscription className={className} />\n case EarnCreditsTaskType.Shop:\n return <IconBag className={className} />\n case EarnCreditsTaskType.CompleteProfile:\n return <IconOrders className={className} />\n }\n}\n\ntype Props = {\n copy: EarnCreditsCopy\n}\n\nfunction EarnCredits({ copy }: Props) {\n const {\n profile,\n openSignUpPopup,\n alpcConfig,\n creditInfo,\n isSubscribeSuccess,\n isActivateSuccess,\n isProfileCompleteSuccess,\n } = useMemberPopupContext()\n const { pushView } = useViewStack()\n const { locale } = alpcConfig\n const { brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const isLogin = !!profile\n\n const isSubscribed = useSubscribed({\n userId: profile?.user_id,\n brand: brand,\n email: profile?.email,\n locale,\n apiBaseUrl: alpcConfig.apiBaseUrl,\n })\n\n const profileCompleted = useMemo(() => {\n return (\n isProfileCompleteSuccess ||\n (!!(profile?.first_name || profile?.last_name) && !!profile?.phone_number && !!profile?.dob)\n )\n }, [profile, isProfileCompleteSuccess])\n\n function trackTaskButton(taskId: EarnCreditsTaskType) {\n const taskButtonNameMap: Record<EarnCreditsTaskType, string> = {\n [EarnCreditsTaskType.Activate]: 'activate',\n [EarnCreditsTaskType.CompleteProfile]: 'complete_profile',\n [EarnCreditsTaskType.Subscribe]: 'subscribe',\n [EarnCreditsTaskType.Shop]: 'shop',\n }\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n position: 'earn_credits',\n button_name: taskButtonNameMap[taskId],\n info: 'Member Floating Window',\n },\n })\n }\n\n const taskStates: Record<EarnCreditsTaskType, { finished: boolean; onClick?: () => void; link?: string }> = useMemo(\n () => ({\n [EarnCreditsTaskType.Activate]: {\n finished: !!profile?.activated || isActivateSuccess,\n onClick: isLogin\n ? () => {\n trackTaskButton(EarnCreditsTaskType.Activate)\n pushView({\n type: MemberPopupPanelType.Activate,\n })\n }\n : openSignUpPopup,\n },\n [EarnCreditsTaskType.CompleteProfile]: {\n finished: profileCompleted,\n onClick: isLogin\n ? () => {\n trackTaskButton(EarnCreditsTaskType.CompleteProfile)\n pushView({\n type: MemberPopupPanelType.CompleteProfile,\n })\n }\n : openSignUpPopup,\n },\n [EarnCreditsTaskType.Subscribe]: {\n finished: isSubscribed || isSubscribeSuccess,\n onClick: isLogin\n ? () => {\n trackTaskButton(EarnCreditsTaskType.Subscribe)\n pushView({\n type: MemberPopupPanelType.SubscribeEmail,\n })\n }\n : openSignUpPopup,\n },\n [EarnCreditsTaskType.Shop]: {\n finished: false,\n link: copy.goShopLink,\n onClick: isLogin ? () => trackTaskButton(EarnCreditsTaskType.Shop) : openSignUpPopup,\n },\n }),\n [\n profile,\n isLogin,\n isActivateSuccess,\n isProfileCompleteSuccess,\n profileCompleted,\n isSubscribed,\n isSubscribeSuccess,\n openSignUpPopup,\n pushView,\n copy.goShopLink,\n ]\n )\n\n const list = useMemo(() => {\n return copy.list\n .map(item => {\n const state = taskStates[item.id]\n if (!state) return null\n const buttonLabel = state.finished\n ? copy.completed\n : isLogin\n ? getNotFinishedLabel(item.id, copy)\n : copy.joinNow\n return { ...item, ...state, buttonLabel }\n })\n .filter(Boolean) as ((typeof copy.list)[number] & {\n finished: boolean\n onClick?: () => void\n link?: string\n buttonLabel: string\n })[]\n }, [copy, taskStates, isLogin])\n\n return (\n <div className=\"flex flex-col gap-[16px]\">\n <div className=\"flex flex-col gap-[16px]\">\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 </div>\n\n {isLogin && (\n <div\n className={cn(\n 'flex items-center 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 </div>\n\n <div className=\"flex flex-col gap-[16px]\">\n {copy.subtitle && <p className=\"text-[16px] font-[700] text-[#1e2024]\">{copy.subtitle}</p>}\n\n <div className=\"flex flex-col\">\n {list.map((item, idx) => (\n <div key={idx} className=\"relative py-[16px]\">\n {idx > 0 && <div className=\"absolute left-0 right-0 top-0 h-px bg-[#dadce0]\" />}\n <div className={cn('flex items-center gap-[12px]')}>\n <TaskIcon id={item.id} className=\"size-[24px] shrink-0\" />\n <div className=\"flex-1\">\n <div className=\"text-[16px] font-[700] text-[#1e2024]\">{item.title}</div>\n {item.credits && (\n <div className=\"mt-[4px] text-[14px] font-bold text-[#4A4C56]\">{item.credits}</div>\n )}\n </div>\n {!item.finished && item.link && isLogin ? (\n <a\n href={item.link}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={cn(\n 'cursor-pointer bg-[#080a0f] min-w-[118px] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n onClick={() => trackTaskButton(item.id)}\n >\n {item.buttonLabel}\n </a>\n ) : (\n <button\n className={cn(\n 'cursor-pointer min-w-[118px] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',\n item.finished ? 'bg-[#767880]' : 'bg-[#080a0f]',\n rounded ? 'rounded-[4px]' : 'rounded-none',\n item.finished && 'opacity-60'\n )}\n disabled={item.finished}\n onClick={!item.finished ? item.onClick : undefined}\n >\n {item.buttonLabel}\n </button>\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\nfunction getNotFinishedLabel(id: EarnCreditsTaskType, copy: EarnCreditsCopy): string {\n switch (id) {\n case EarnCreditsTaskType.Activate:\n return copy.activate\n case EarnCreditsTaskType.CompleteProfile:\n return copy.completeProfileLabel\n case EarnCreditsTaskType.Subscribe:\n return copy.subscribeLabel\n case EarnCreditsTaskType.Shop:\n return copy.shopNow\n }\n}\n\nexport default EarnCredits\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAaa,IAAAI,EAAA,6BAbbC,
|
|
6
|
-
"names": ["EarnCredits_exports", "__export", "EarnCredits_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lib", "import_provider", "import_viewStack", "import_useSubscribed", "import_type", "import_icons", "import_utils", "import_constants", "TaskIcon", "id", "className", "EarnCredits", "copy", "profile", "openSignUpPopup", "alpcConfig", "creditInfo", "isSubscribeSuccess", "isActivateSuccess", "isProfileCompleteSuccess", "pushView", "locale", "brand", "rounded", "isLogin", "isSubscribed", "profileCompleted", "trackTaskButton", "taskId", "taskButtonNameMap", "taskStates", "list", "item", "state", "buttonLabel", "getNotFinishedLabel", "cn", "idx"]
|
|
4
|
+
"sourcesContent": ["import { useEffect, useMemo } from 'react'\nimport { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport { useMemberPopupContext } from '../../context/provider'\nimport { useViewStack } from '../../context/viewStack'\nimport { useSubscribed } from './hooks/useSubscribed'\nimport { EarnCreditsTaskType, MemberPopupPanelType, type EarnCreditsCopy } from '../../type'\nimport { IconBag, IconLock, IconSubscription, IconOrders } from '../../icons'\nimport { numberFormat } from '../../../credits/context/utils'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\nfunction TaskIcon({ id, className }: { id: EarnCreditsTaskType; className?: string }) {\n switch (id) {\n case EarnCreditsTaskType.Activate:\n return <IconLock className={className} />\n case EarnCreditsTaskType.Subscribe:\n return <IconSubscription className={className} />\n case EarnCreditsTaskType.Shop:\n return <IconBag className={className} />\n case EarnCreditsTaskType.CompleteProfile:\n return <IconOrders className={className} />\n }\n}\n\ntype Props = {\n copy: EarnCreditsCopy\n}\n\nfunction EarnCredits({ copy }: Props) {\n const {\n profile,\n openSignUpPopup,\n alpcConfig,\n creditInfo,\n fetchCreditInfo,\n isSubscribeSuccess,\n isActivateSuccess,\n isProfileCompleteSuccess,\n } = useMemberPopupContext()\n const { pushView } = useViewStack()\n const { locale } = alpcConfig\n const { brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n useEffect(() => {\n if (profile?.user_id) fetchCreditInfo(profile.user_id)\n }, [])\n\n const isLogin = !!profile\n\n const isSubscribed = useSubscribed({\n userId: profile?.user_id,\n brand: brand,\n email: profile?.email,\n locale,\n apiBaseUrl: alpcConfig.apiBaseUrl,\n })\n\n const profileCompleted = useMemo(() => {\n return (\n isProfileCompleteSuccess ||\n (!!(profile?.first_name || profile?.last_name) && !!profile?.phone_number && !!profile?.dob)\n )\n }, [profile, isProfileCompleteSuccess])\n\n function trackTaskButton(taskId: EarnCreditsTaskType) {\n const taskButtonNameMap: Record<EarnCreditsTaskType, string> = {\n [EarnCreditsTaskType.Activate]: 'activate',\n [EarnCreditsTaskType.CompleteProfile]: 'complete_profile',\n [EarnCreditsTaskType.Subscribe]: 'subscribe',\n [EarnCreditsTaskType.Shop]: 'shop',\n }\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n position: 'earn_credits',\n button_name: taskButtonNameMap[taskId],\n info: 'Member Floating Window',\n },\n })\n }\n\n const taskStates: Record<EarnCreditsTaskType, { finished: boolean; onClick?: () => void; link?: string }> = useMemo(\n () => ({\n [EarnCreditsTaskType.Activate]: {\n finished: !!profile?.activated || isActivateSuccess,\n onClick: isLogin\n ? () => {\n trackTaskButton(EarnCreditsTaskType.Activate)\n pushView({\n type: MemberPopupPanelType.Activate,\n })\n }\n : openSignUpPopup,\n },\n [EarnCreditsTaskType.CompleteProfile]: {\n finished: profileCompleted,\n onClick: isLogin\n ? () => {\n trackTaskButton(EarnCreditsTaskType.CompleteProfile)\n pushView({\n type: MemberPopupPanelType.CompleteProfile,\n })\n }\n : openSignUpPopup,\n },\n [EarnCreditsTaskType.Subscribe]: {\n finished: isSubscribed || isSubscribeSuccess,\n onClick: isLogin\n ? () => {\n trackTaskButton(EarnCreditsTaskType.Subscribe)\n pushView({\n type: MemberPopupPanelType.SubscribeEmail,\n })\n }\n : openSignUpPopup,\n },\n [EarnCreditsTaskType.Shop]: {\n finished: false,\n link: copy.goShopLink,\n onClick: isLogin ? () => trackTaskButton(EarnCreditsTaskType.Shop) : openSignUpPopup,\n },\n }),\n [\n profile,\n isLogin,\n isActivateSuccess,\n isProfileCompleteSuccess,\n profileCompleted,\n isSubscribed,\n isSubscribeSuccess,\n openSignUpPopup,\n pushView,\n copy.goShopLink,\n ]\n )\n\n const list = useMemo(() => {\n return copy.list\n .map(item => {\n const state = taskStates[item.id]\n if (!state) return null\n const buttonLabel = state.finished\n ? copy.completed\n : isLogin\n ? getNotFinishedLabel(item.id, copy)\n : copy.joinNow\n return { ...item, ...state, buttonLabel }\n })\n .filter(Boolean) as ((typeof copy.list)[number] & {\n finished: boolean\n onClick?: () => void\n link?: string\n buttonLabel: string\n })[]\n }, [copy, taskStates, isLogin])\n\n return (\n <div className=\"flex flex-col gap-[16px]\">\n <div className=\"flex flex-col gap-[16px]\">\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 </div>\n\n {isLogin && (\n <div\n className={cn(\n 'flex items-center 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 </div>\n\n <div className=\"flex flex-col gap-[16px]\">\n {copy.subtitle && <p className=\"text-[16px] font-[700] text-[#1e2024]\">{copy.subtitle}</p>}\n\n <div className=\"flex flex-col\">\n {list.map((item, idx) => (\n <div key={idx} className=\"relative py-[16px]\">\n {idx > 0 && <div className=\"absolute left-0 right-0 top-0 h-px bg-[#dadce0]\" />}\n <div className={cn('flex items-center gap-[12px]')}>\n <TaskIcon id={item.id} className=\"size-[24px] shrink-0\" />\n <div className=\"flex-1\">\n <div className=\"text-[16px] font-[700] text-[#1e2024]\">{item.title}</div>\n {item.credits && (\n <div className=\"mt-[4px] text-[14px] font-bold text-[#4A4C56]\">{item.credits}</div>\n )}\n </div>\n {!item.finished && item.link && isLogin ? (\n <a\n href={item.link}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={cn(\n 'cursor-pointer bg-[#080a0f] min-w-[118px] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n onClick={() => trackTaskButton(item.id)}\n >\n {item.buttonLabel}\n </a>\n ) : (\n <button\n className={cn(\n 'cursor-pointer min-w-[118px] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',\n item.finished ? 'bg-[#767880]' : 'bg-[#080a0f]',\n rounded ? 'rounded-[4px]' : 'rounded-none',\n item.finished && 'opacity-60'\n )}\n disabled={item.finished}\n onClick={!item.finished ? item.onClick : undefined}\n >\n {item.buttonLabel}\n </button>\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\nfunction getNotFinishedLabel(id: EarnCreditsTaskType, copy: EarnCreditsCopy): string {\n switch (id) {\n case EarnCreditsTaskType.Activate:\n return copy.activate\n case EarnCreditsTaskType.CompleteProfile:\n return copy.completeProfileLabel\n case EarnCreditsTaskType.Subscribe:\n return copy.subscribeLabel\n case EarnCreditsTaskType.Shop:\n return copy.shopNow\n }\n}\n\nexport default EarnCredits\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["EarnCredits_exports", "__export", "EarnCredits_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lib", "import_provider", "import_viewStack", "import_useSubscribed", "import_type", "import_icons", "import_utils", "import_constants", "TaskIcon", "id", "className", "EarnCredits", "copy", "profile", "openSignUpPopup", "alpcConfig", "creditInfo", "fetchCreditInfo", "isSubscribeSuccess", "isActivateSuccess", "isProfileCompleteSuccess", "pushView", "locale", "brand", "rounded", "isLogin", "isSubscribed", "profileCompleted", "trackTaskButton", "taskId", "taskButtonNameMap", "taskStates", "list", "item", "state", "buttonLabel", "getNotFinishedLabel", "cn", "idx"]
|
|
7
7
|
}
|
|
@@ -147,6 +147,7 @@ export type ConsumeCreditsopy = {
|
|
|
147
147
|
comingSoonLabel?: string;
|
|
148
148
|
creditUnit?: string;
|
|
149
149
|
off?: string;
|
|
150
|
+
giftCard?: string;
|
|
150
151
|
imageMapping?: {
|
|
151
152
|
[key in ConsumeCreditsItemType]?: {
|
|
152
153
|
url: string;
|
|
@@ -190,6 +191,8 @@ export type RedeemCouponModalCopy = {
|
|
|
190
191
|
successDesc: string;
|
|
191
192
|
successButton: string;
|
|
192
193
|
successButtonUrl?: string;
|
|
194
|
+
copyLabel?: string;
|
|
195
|
+
copiedLabel?: string;
|
|
193
196
|
};
|
|
194
197
|
export type ReferralCopy = {
|
|
195
198
|
title?: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var g=Object.defineProperty;var
|
|
1
|
+
"use strict";var g=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var m=(r,e)=>{for(var o in e)g(r,o,{get:e[o],enumerable:!0})},E=(r,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of C(e))!b.call(r,t)&&t!==o&&g(r,t,{get:()=>e[t],enumerable:!(s=u(e,t))||s.enumerable});return r};var f=r=>E(g({},"__esModule",{value:!0}),r);var L={};m(L,{ConsumeCreditsItemType:()=>p,EarnCreditsTaskType:()=>c,MemberPopupActionType:()=>a,MemberPopupPageScope:()=>d,MemberPopupPanelType:()=>l});module.exports=f(L);var l=(i=>(i.EarnCredits="EARN_CREDITS",i.ConsumeCredits="CONSUME_CREDITS",i.Referral="REFERRAL",i.CompleteProfile="COMPLETE_PROFILE",i.Subscribe="SUBSCRIBE",i.SubscribeEmail="SUBSCRIBE_EMAIL",i.RedeemCoupon="REDEEM_COUPON",i.Activate="ACTIVATE",i))(l||{}),a=(n=>(n.ExternalLink="EXTERNAL_LINK",n.OpenEarnCredits="OPEN_EARN_CREDITS",n.OpenConsumeCredits="OPEN_CONSUME_CREDITS",n.OpenReferral="OPEN_REFERRAL",n.OpenSubscribe="OPEN_SUBSCRIBE",n))(a||{}),c=(t=>(t.Activate="activate",t.CompleteProfile="completeProfile",t.Subscribe="subscribe",t.Shop="shop",t))(c||{}),p=(t=>(t.Coupon="COUPON",t.RedeemAndBuy="REDEEM_AND_BUY",t.GiftCard="GIFT_CARD",t.Product="PRODUCT",t))(p||{}),d=(s=>(s.Global="GLOBAL",s.Include="INCLUDE",s.Exclude="EXCLUDE",s))(d||{});
|
|
2
2
|
//# sourceMappingURL=type.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/memberPopup/type.ts"],
|
|
4
|
-
"sourcesContent": ["import type { AuthCodeActivateCopy } from '../registration/authCodeActivate/type'\nimport type { CreditInfoResponse } from '../credits/context/response'\nimport type { DTC_TASK_TYPE } from '../credits/context/const'\n\nexport type { AuthCodeActivateCopy }\n\n// \u2500\u2500\u2500 \u9762\u677F\u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum MemberPopupPanelType {\n EarnCredits = 'EARN_CREDITS',\n ConsumeCredits = 'CONSUME_CREDITS',\n Referral = 'REFERRAL',\n CompleteProfile = 'COMPLETE_PROFILE',\n Subscribe = 'SUBSCRIBE',\n SubscribeEmail = 'SUBSCRIBE_EMAIL',\n RedeemCoupon = 'REDEEM_COUPON',\n Activate = 'ACTIVATE',\n}\n\n// \u2500\u2500\u2500 item action \u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum MemberPopupActionType {\n ExternalLink = 'EXTERNAL_LINK',\n OpenEarnCredits = 'OPEN_EARN_CREDITS',\n OpenConsumeCredits = 'OPEN_CONSUME_CREDITS',\n OpenReferral = 'OPEN_REFERRAL',\n OpenSubscribe = 'OPEN_SUBSCRIBE',\n}\n\n// \u2500\u2500\u2500 EarnCredits \u4EFB\u52A1\u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum EarnCreditsTaskType {\n Activate = 'activate',\n CompleteProfile = 'completeProfile',\n Subscribe = 'subscribe',\n Shop = 'shop',\n}\n\n// \u2500\u2500\u2500 ConsumeCredits item \u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum ConsumeCreditsItemType {\n Coupon = 'COUPON',\n RedeemAndBuy = 'REDEEM_AND_BUY',\n GiftCard = 'GIFT_CARD',\n Product = 'PRODUCT',\n}\n\n// \u2500\u2500\u2500 \u901A\u7528 link\uFF08\u7EDF\u4E00\u4E00\u79CD\u7C7B\u578B\uFF09 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type MemberPopupLink = {\n type: MemberPopupActionType\n label: string\n url?: string // \u4EC5 ExternalLink \u65F6\u4F7F\u7528\n}\n\n// \u2500\u2500\u2500 list item \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type MemberPopupItem = {\n title: string\n description?: string\n links: MemberPopupLink[]\n}\n\n// \u2500\u2500 \u4E3B\u7EC4\u4EF6 Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum MemberPopupPageScope {\n /** \u5168\u5C40\u5C55\u793A */\n Global = 'GLOBAL',\n /** \u4EC5\u5728\u7279\u5B9A\u9875\u9762\u5C55\u793A */\n Include = 'INCLUDE',\n /** \u5728\u7279\u5B9A\u9875\u9762\u4E0D\u5C55\u793A */\n Exclude = 'EXCLUDE',\n}\n\nexport type MemberPopupPageConfig = {\n scope: MemberPopupPageScope\n /** \u9875\u9762\u8DEF\u5F84\u5217\u8868\uFF0C\u652F\u6301\u7CBE\u786E\u5339\u914D\u548C\u524D\u7F00\u5339\u914D\uFF08\u5982 \"/products\" \u4F1A\u5339\u914D \"/products/xxx\"\uFF09 */\n pages: string[]\n}\n\nexport type MemberPopupCopy = {\n triggerImg: { url: string; alt?: string }\n title?: string\n subtitle?: string\n list: MemberPopupItem[]\n footer?: {\n loginHint: string\n loginLabel: string\n joinLabel: string\n shopLabel: string\n shopUrl?: string\n }\n activitiesSubscribe?: SubscribeModalCopy\n earnCredits?: EarnCreditsCopy\n consumeCredits?: ConsumeCreditsopy\n referral?: ReferralCopy\n /** \u9875\u9762\u8986\u76D6\u8303\u56F4\u914D\u7F6E\uFF0C\u9ED8\u8BA4\u5168\u5C40\u5C55\u793A */\n pageConfig?: MemberPopupPageConfig\n}\n\n// \u2500\u2500\u2500 EarnCredits Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type EarnCreditsCopy = {\n title?: string\n subtitle?: string\n balanceLabel?: string\n comingSoonLabel?: string\n creditUnit?: string\n joinNow: string\n completed: string\n activate: string\n completeProfileLabel: string\n subscribeLabel: string\n shopNow: string\n goShopLink?: string\n list: {\n id: EarnCreditsTaskType\n title: string\n credits?: string\n }[]\n // \u5B50\u5F39\u7A97\u6587\u6848\n authCodeActivate: AuthCodeActivateCopy\n completeProfile: CompleteProfileCopy\n subscribe: SubscribeModalCopy\n}\n\nexport type CompleteProfileCopy = {\n title: string\n subtitle?: string\n firstName: string\n lastName: string\n email: string\n phone: string\n birthday: string\n country: string\n save: string\n cancel: string\n edit: string\n required: string\n}\n\nexport type SubscribeModalCopy = {\n title: string\n desc?: string\n placeholder: string\n policy?: string\n policyDefaultChecked?: boolean\n successTips?: string\n subscribedLabel?: string\n dealsType?: string\n buttonLabel?: string\n single_brand_subscribe?: boolean\n genre?: string\n sub_brand_type?: string\n promo?: {\n title?: string\n description?: string\n learnMoreLabel?: string\n learnMoreUrl?: string\n image?: { url: string; alt?: string }\n }\n}\n\n// \u2500\u2500\u2500 ConsumeCredits Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type ConsumeCreditsopy = {\n title?: string\n subtitle?: string\n soldOut: string\n unlockRewards: string\n btnRedeem: string\n insufficientCredits?: string\n balanceLabel?: string\n comingSoonLabel?: string\n creditUnit?: string\n off?: string\n imageMapping?: {\n [key in ConsumeCreditsItemType]?: { url: string }\n }\n list: ConsumeCreditsItem[]\n redeemModal: RedeemCouponModalCopy\n creditsPage?: { label: string; url: string; redeemListSectionId?: string }\n}\n\nexport type ConsumeCreditsItem = {\n redeemId: string | number\n title: string\n description?: string\n image: { url: string; alt?: string }\n type: ConsumeCreditsItemType\n product?: { handle: string; sku: string }\n price?: number\n value?: string\n rules?: string[]\n}\n\nexport type RedeemCouponModalCopy = {\n confirmTitle: string\n confirmButton: string\n off?: string\n commonError: string\n redeemLimitError: string\n inventoryNotEnough: string\n creditsNotEnough: string\n crossSiteError: string\n successTitle: string\n successDesc: string\n successButton: string\n successButtonUrl?: string\n}\n\n// \u2500\u2500\u2500 Referral Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type ReferralCopy = {\n title?: string\n description?: string\n cashAvailableLabel: string\n cashPendingLabel: string\n creditUnit?: string\n referralLinksLabel?: string\n referralLinkBaseUrl?: string\n copyLabel?: string\n copiedLabel?: string\n howToTitle?: string\n howToDescription?: string\n learnMoreLabel?: string\n learnMoreUrl?: string\n image?: { url: string; alt?: string }\n ctaButton: string\n ctaUrl?: string\n loginTitle?: string\n loginDescription?: string\n loginCtaLabel?: string\n}\n\n// \u2500\u2500\u2500 Provider Context \u7C7B\u578B \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type AlpcConfig = {\n brand: string\n locale: string\n appName: string\n apiBaseUrl?: string\n}\n\nexport type MemberPopupContextValue = {\n profile: any\n isLoadingProfile: boolean\n creditInfo?: CreditInfoResponse\n fetchCreditInfo: (userId: string) => void\n openSignUpPopup: () => void\n openSignInPopup: () => void\n taskIdToTypeMapping?: Record<string, DTC_TASK_TYPE>\n alpcConfig: AlpcConfig\n pageHandle?: string\n}\n\nexport type MemberPopupInternalContextValue = MemberPopupContextValue & {\n isSubscribeSuccess: boolean\n setIsSubscribeSuccess: (v: boolean) => void\n isActivateSuccess: boolean\n setIsActivateSuccess: (v: boolean) => void\n isProfileCompleteSuccess: boolean\n setIsProfileCompleteSuccess: (v: boolean) => void\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { AuthCodeActivateCopy } from '../registration/authCodeActivate/type'\nimport type { CreditInfoResponse } from '../credits/context/response'\nimport type { DTC_TASK_TYPE } from '../credits/context/const'\n\nexport type { AuthCodeActivateCopy }\n\n// \u2500\u2500\u2500 \u9762\u677F\u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum MemberPopupPanelType {\n EarnCredits = 'EARN_CREDITS',\n ConsumeCredits = 'CONSUME_CREDITS',\n Referral = 'REFERRAL',\n CompleteProfile = 'COMPLETE_PROFILE',\n Subscribe = 'SUBSCRIBE',\n SubscribeEmail = 'SUBSCRIBE_EMAIL',\n RedeemCoupon = 'REDEEM_COUPON',\n Activate = 'ACTIVATE',\n}\n\n// \u2500\u2500\u2500 item action \u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum MemberPopupActionType {\n ExternalLink = 'EXTERNAL_LINK',\n OpenEarnCredits = 'OPEN_EARN_CREDITS',\n OpenConsumeCredits = 'OPEN_CONSUME_CREDITS',\n OpenReferral = 'OPEN_REFERRAL',\n OpenSubscribe = 'OPEN_SUBSCRIBE',\n}\n\n// \u2500\u2500\u2500 EarnCredits \u4EFB\u52A1\u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum EarnCreditsTaskType {\n Activate = 'activate',\n CompleteProfile = 'completeProfile',\n Subscribe = 'subscribe',\n Shop = 'shop',\n}\n\n// \u2500\u2500\u2500 ConsumeCredits item \u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum ConsumeCreditsItemType {\n Coupon = 'COUPON',\n RedeemAndBuy = 'REDEEM_AND_BUY',\n GiftCard = 'GIFT_CARD',\n Product = 'PRODUCT',\n}\n\n// \u2500\u2500\u2500 \u901A\u7528 link\uFF08\u7EDF\u4E00\u4E00\u79CD\u7C7B\u578B\uFF09 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type MemberPopupLink = {\n type: MemberPopupActionType\n label: string\n url?: string // \u4EC5 ExternalLink \u65F6\u4F7F\u7528\n}\n\n// \u2500\u2500\u2500 list item \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type MemberPopupItem = {\n title: string\n description?: string\n links: MemberPopupLink[]\n}\n\n// \u2500\u2500 \u4E3B\u7EC4\u4EF6 Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum MemberPopupPageScope {\n /** \u5168\u5C40\u5C55\u793A */\n Global = 'GLOBAL',\n /** \u4EC5\u5728\u7279\u5B9A\u9875\u9762\u5C55\u793A */\n Include = 'INCLUDE',\n /** \u5728\u7279\u5B9A\u9875\u9762\u4E0D\u5C55\u793A */\n Exclude = 'EXCLUDE',\n}\n\nexport type MemberPopupPageConfig = {\n scope: MemberPopupPageScope\n /** \u9875\u9762\u8DEF\u5F84\u5217\u8868\uFF0C\u652F\u6301\u7CBE\u786E\u5339\u914D\u548C\u524D\u7F00\u5339\u914D\uFF08\u5982 \"/products\" \u4F1A\u5339\u914D \"/products/xxx\"\uFF09 */\n pages: string[]\n}\n\nexport type MemberPopupCopy = {\n triggerImg: { url: string; alt?: string }\n title?: string\n subtitle?: string\n list: MemberPopupItem[]\n footer?: {\n loginHint: string\n loginLabel: string\n joinLabel: string\n shopLabel: string\n shopUrl?: string\n }\n activitiesSubscribe?: SubscribeModalCopy\n earnCredits?: EarnCreditsCopy\n consumeCredits?: ConsumeCreditsopy\n referral?: ReferralCopy\n /** \u9875\u9762\u8986\u76D6\u8303\u56F4\u914D\u7F6E\uFF0C\u9ED8\u8BA4\u5168\u5C40\u5C55\u793A */\n pageConfig?: MemberPopupPageConfig\n}\n\n// \u2500\u2500\u2500 EarnCredits Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type EarnCreditsCopy = {\n title?: string\n subtitle?: string\n balanceLabel?: string\n comingSoonLabel?: string\n creditUnit?: string\n joinNow: string\n completed: string\n activate: string\n completeProfileLabel: string\n subscribeLabel: string\n shopNow: string\n goShopLink?: string\n list: {\n id: EarnCreditsTaskType\n title: string\n credits?: string\n }[]\n // \u5B50\u5F39\u7A97\u6587\u6848\n authCodeActivate: AuthCodeActivateCopy\n completeProfile: CompleteProfileCopy\n subscribe: SubscribeModalCopy\n}\n\nexport type CompleteProfileCopy = {\n title: string\n subtitle?: string\n firstName: string\n lastName: string\n email: string\n phone: string\n birthday: string\n country: string\n save: string\n cancel: string\n edit: string\n required: string\n}\n\nexport type SubscribeModalCopy = {\n title: string\n desc?: string\n placeholder: string\n policy?: string\n policyDefaultChecked?: boolean\n successTips?: string\n subscribedLabel?: string\n dealsType?: string\n buttonLabel?: string\n single_brand_subscribe?: boolean\n genre?: string\n sub_brand_type?: string\n promo?: {\n title?: string\n description?: string\n learnMoreLabel?: string\n learnMoreUrl?: string\n image?: { url: string; alt?: string }\n }\n}\n\n// \u2500\u2500\u2500 ConsumeCredits Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type ConsumeCreditsopy = {\n title?: string\n subtitle?: string\n soldOut: string\n unlockRewards: string\n btnRedeem: string\n insufficientCredits?: string\n balanceLabel?: string\n comingSoonLabel?: string\n creditUnit?: string\n off?: string\n giftCard?: string\n imageMapping?: {\n [key in ConsumeCreditsItemType]?: { url: string }\n }\n list: ConsumeCreditsItem[]\n redeemModal: RedeemCouponModalCopy\n creditsPage?: { label: string; url: string; redeemListSectionId?: string }\n}\n\nexport type ConsumeCreditsItem = {\n redeemId: string | number\n title: string\n description?: string\n image: { url: string; alt?: string }\n type: ConsumeCreditsItemType\n product?: { handle: string; sku: string }\n price?: number\n value?: string\n rules?: string[]\n}\n\nexport type RedeemCouponModalCopy = {\n confirmTitle: string\n confirmButton: string\n off?: string\n commonError: string\n redeemLimitError: string\n inventoryNotEnough: string\n creditsNotEnough: string\n crossSiteError: string\n successTitle: string\n successDesc: string\n successButton: string\n successButtonUrl?: string\n copyLabel?: string\n copiedLabel?: string\n}\n\n// \u2500\u2500\u2500 Referral Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type ReferralCopy = {\n title?: string\n description?: string\n cashAvailableLabel: string\n cashPendingLabel: string\n creditUnit?: string\n referralLinksLabel?: string\n referralLinkBaseUrl?: string\n copyLabel?: string\n copiedLabel?: string\n howToTitle?: string\n howToDescription?: string\n learnMoreLabel?: string\n learnMoreUrl?: string\n image?: { url: string; alt?: string }\n ctaButton: string\n ctaUrl?: string\n loginTitle?: string\n loginDescription?: string\n loginCtaLabel?: string\n}\n\n// \u2500\u2500\u2500 Provider Context \u7C7B\u578B \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type AlpcConfig = {\n brand: string\n locale: string\n appName: string\n apiBaseUrl?: string\n}\n\nexport type MemberPopupContextValue = {\n profile: any\n isLoadingProfile: boolean\n creditInfo?: CreditInfoResponse\n fetchCreditInfo: (userId: string) => void\n openSignUpPopup: () => void\n openSignInPopup: () => void\n taskIdToTypeMapping?: Record<string, DTC_TASK_TYPE>\n alpcConfig: AlpcConfig\n pageHandle?: string\n}\n\nexport type MemberPopupInternalContextValue = MemberPopupContextValue & {\n isSubscribeSuccess: boolean\n setIsSubscribeSuccess: (v: boolean) => void\n isActivateSuccess: boolean\n setIsActivateSuccess: (v: boolean) => void\n isProfileCompleteSuccess: boolean\n setIsProfileCompleteSuccess: (v: boolean) => void\n}\n"],
|
|
5
5
|
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,4BAAAE,EAAA,wBAAAC,EAAA,0BAAAC,EAAA,yBAAAC,EAAA,yBAAAC,IAAA,eAAAC,EAAAP,GAOO,IAAKM,OACVA,EAAA,YAAc,eACdA,EAAA,eAAiB,kBACjBA,EAAA,SAAW,WACXA,EAAA,gBAAkB,mBAClBA,EAAA,UAAY,YACZA,EAAA,eAAiB,kBACjBA,EAAA,aAAe,gBACfA,EAAA,SAAW,WARDA,OAAA,IAYAF,OACVA,EAAA,aAAe,gBACfA,EAAA,gBAAkB,oBAClBA,EAAA,mBAAqB,uBACrBA,EAAA,aAAe,gBACfA,EAAA,cAAgB,iBALNA,OAAA,IASAD,OACVA,EAAA,SAAW,WACXA,EAAA,gBAAkB,kBAClBA,EAAA,UAAY,YACZA,EAAA,KAAO,OAJGA,OAAA,IAQAD,OACVA,EAAA,OAAS,SACTA,EAAA,aAAe,iBACfA,EAAA,SAAW,YACXA,EAAA,QAAU,UAJAA,OAAA,IAsBAG,OAEVA,EAAA,OAAS,SAETA,EAAA,QAAU,UAEVA,EAAA,QAAU,UANAA,OAAA",
|
|
6
6
|
"names": ["type_exports", "__export", "ConsumeCreditsItemType", "EarnCreditsTaskType", "MemberPopupActionType", "MemberPopupPageScope", "MemberPopupPanelType", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as s}from"react/jsx-runtime";import{useCallback as P,useEffect as F,useState as f}from"react";import{Text as r,Button as w}from"@anker-in/headless-ui";import{gaTrack as V,useHeadlessContext as j,classNames as x}from"@anker-in/lib";import{AlpcErrorCode as a}from"../../../credits/context/const";import{useRedeemCoupon as H}from"./hooks/useRedeemCoupon";import O from"../../../credits/context/hooks/useCopy";import{ROUNDED_BRANDS as W}from"../../../../constants";function $({onClose:E,item:I,copy:R,onError:g}){const{itemTitle:q,itemCredits:_,itemImage:c,itemValue:C,itemRules:m,redeemId:p,userId:v,alpcConfig:k}=I,{redeemModal:e,creditUnit:B}=R,D=B??"pts",[i,
|
|
1
|
+
import{jsx as t,jsxs as s}from"react/jsx-runtime";import{useCallback as P,useEffect as F,useState as f}from"react";import{Text as r,Button as w}from"@anker-in/headless-ui";import{gaTrack as V,useHeadlessContext as j,classNames as x}from"@anker-in/lib";import{AlpcErrorCode as a}from"../../../credits/context/const";import{useRedeemCoupon as H}from"./hooks/useRedeemCoupon";import O from"../../../credits/context/hooks/useCopy";import{ROUNDED_BRANDS as W}from"../../../../constants";function $({onClose:E,item:I,copy:R,onError:g}){const{itemTitle:q,itemCredits:_,itemImage:c,itemValue:C,itemRules:m,redeemId:p,userId:v,alpcConfig:k}=I,{redeemModal:e,creditUnit:B}=R,D=B??"pts",[i,b]=f(),[N,d]=f(""),[L,l]=f(!1),{copy:T,copied:y}=O(),{brand:S}=j(),u=W.includes(S),{isMutating:U,trigger:h}=H(k),A=P(async()=>{d("");const{data:o}=await h({user_id:v,rule_id:p});if(!o){d(e.commonError);return}if(o.data?.success)b(o.data.coupon_code),V({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===a.CodeLpcShopifyCouponRuleRedeemLimit?(n=e.redeemLimitError,l(!0)):o.code===a.CodeLpcRuleInventoryNotEnough?(n=e.inventoryNotEnough,l(!0)):o.code===a.CodeLpcNotEnoughCredits?(n=e.creditsNotEnough,l(!0)):o.code===a.CodeCrossSiteError&&(n=e.crossSiteError,l(!0)),d(n),g?.(o.code)}},[h,v,p,e,g]);F(()=>{b(void 0),d(""),l(!1)},[p]);const M=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:x("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"}),C&&s("div",{className:"absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white",children:[C,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:[_," ",D]}),M]}),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:y,onClick:()=>T(i),children:y?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(w,{className:x("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),E()},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(w,{className:x("w-full py-[12px] text-[14px] font-[700] text-white disabled:opacity-60 bg-[#080a0f]",u?"rounded-[4px]":"rounded-none"),disabled:L,loading:U,onClick:A,children:e.confirmButton})]}),N&&t(r,{className:"mt-[8px] text-center text-[14px] font-[700] text-[#ff0000]",html:N})]})]})}export{$ as default};
|
|
2
2
|
//# sourceMappingURL=RedeemCouponPanel.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.tsx"],
|
|
4
|
-
"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 ? 'Copied' : '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\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 (redeemModal.successButtonUrl) window.location.href = redeemModal.successButtonUrl\n onClose()\n }}\n >\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\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 {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"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"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\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 (redeemModal.successButtonUrl) window.location.href = redeemModal.successButtonUrl\n onClose()\n }}\n >\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\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 {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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"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"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as D,jsx as a,jsxs as n}from"react/jsx-runtime";import{useEffect as H,useMemo as W,useState as B}from"react";import{Picture as q,Button as J}from"@anker-in/headless-ui";import{gaTrack as _,classNames as C,useProductsByHandles as K,useHeadlessContext as Q}from"@anker-in/lib";import{useMemberPopupContext as X}from"../../context/provider";import{useViewStack as Y}from"../../context/viewStack";import{useRedeemableList as Z}from"./hooks/useRedeemableList";import{useRedeemAndBuy as ee}from"./hooks/useRedeemAndBuy";import{ConsumeCreditsItemType as s,MemberPopupPanelType as A}from"../../type";import{numberFormat as x}from"../../../credits/context/utils";import{ROUNDED_BRANDS as te}from"../../../../constants";function ae({copy:t}){const{profile:d,creditInfo:u,openSignUpPopup:S,alpcConfig:v,isActivateSuccess:L,fetchCreditInfo:E,pageHandle:c}=X(),{pushView:y}=Y(),{brand:M}=Q(),g=te.includes(M),[P,w]=B(""),[U,R]=B(null);H(()=>{d?.user_id&&E(d.user_id)},[]);const l=!!d,{redeemableList:I,listLoading:$}=Z(v),{trigger:F}=ee(v),T=t.list.map(e=>e.product?.handle).filter(Boolean),{data:k}=K({handles:T}),z=W(()=>t.list.map(e=>{const r=I.find(o=>String(o.id)===String(e.redeemId));if(!r)return null;const i=Number(u?.available_credit??0),m=r.consume_credits>i,N=r.is_limited&&(!r.remaining_inventory||r.remaining_inventory<=0),j=e.type===s.RedeemAndBuy||e.type===s.Product,f=k?.find(o=>o.handle===e.product?.handle),h=f?.variants?.find(o=>o.sku===e.product?.sku)??f?.variants?.[0];return j&&(!f||!h||!h?.availableForSale||N)||e.type===s.RedeemAndBuy&&e.price==null?null:{...e,alpcData:r,insufficient:m,product:f,variant:h}}).filter(Boolean),[t.list,I,u,d,l,k]),p=d?.activated||L;function O(e){return!l||!p?t.unlockRewards:e.soldOut?t.soldOut:t.btnRedeem}function G(e){return!l||!p?!1:e.insufficient}function b(e){_({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"consume_credits",button_name:"redeem",info:"Member Floating Window"}})}async function V(e){if(!l){S();return}if(!p){y({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`),b(e.title),window.open(i.toString(),"_blank","noopener,noreferrer")}return}if(e.type===s.Coupon)b(e.title),y({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:d?.user_id,alpcConfig:v}});else{w(""),R(e.redeemId),b(e.title);try{await F({productVariant:e.variant,redeemId:Number(e.redeemId),userId:d?.user_id}),_({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"consume_credits",button_name:"redeem_success",info:"Member Floating Window"}})}catch(r){w(r?.message??t.redeemModal.commonError)}finally{R(null)}}}return a(D,{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})]}),l&&n("div",{className:C("flex items-center mt-[16px] gap-[12px] bg-[#f5f6f7] p-[16px]",g?"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"})]})]})]}),P&&a("div",{className:"text-[14px] mt-[8px] font-[700] text-[#f84d4f]",children:P}),$?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,N=i?e.variant?.image?.altText??e.product?.images?.[0]?.alt??e.image?.alt??"":e.image?.alt??"";return m?n("div",{className:C("relative size-[64px] shrink-0 overflow-hidden",g?"rounded-[4px]":"rounded-none"),children:[a(q,{source:m,alt:N,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(D,{children:[n("div",{children:[x(e.alpcData.consume_credits)," ",t.creditUnit??""," + $",Number(e.price).toFixed(2)]}),e.variant?.price?.amount&&n("div",{className:"text-[12px] 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(J,{className:C("bg-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white",g?"rounded-[4px]":"rounded-none"),disabled:G(e),loading:U===e.redeemId,onClick:()=>V(e),children:O(e)}),e.insufficient&&l&&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=ae;export{me as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/memberPopup/panels/ConsumeCredits/index.tsx"],
|
|
4
|
-
"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 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 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\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={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 ? item.product.title : 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.creditUnit ?? ''} + $${Number(item.price).toFixed(2)}`\n : `${numberFormat(item.alpcData.consume_credits)} ${copy.creditUnit ?? ''}`}\n </div>\n </div>\n <div className=\"relative group\">\n <Button\n className={cn(\n 'bg-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\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"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"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", "
|
|
4
|
+
"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 <>\n <div>\n {numberFormat(item.alpcData.consume_credits)} {copy.creditUnit ?? ''} + $\n {Number(item.price).toFixed(2)}\n </div>\n {item.variant?.price?.amount && (\n <div className=\"text-[12px] text-[#999] line-through\">\n ${Number(item.variant.price.amount).toFixed(2)}\n </div>\n )}\n </>\n ) : (\n `${numberFormat(item.alpcData.consume_credits)} ${copy.creditUnit ?? ''}`\n )}\n </div>\n </div>\n <div className=\"relative group\">\n <Button\n className={cn(\n 'bg-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"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"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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:x}){const{setIsActivateSuccess:h,fetchCreditInfo:v,profile:f}=ee(),{locale:P,brand:V}=J(),{email:i}=Z(),y=te.includes(V),{isMutating:B,trigger:C,data:E}=G(),{isMutating:F,trigger:k}=Q(),[$,l]=p(""),[j,c]=p(""),{startCountDown:A,startAction:D,countDown:z}=X(60),[I,u]=p(""),[w,m]=p(0),[o,N]=p(new Array(6).fill("")),T=U([]),b=o.join("");H(()=>{T.current[w]&&T.current[w].focus()},[w]),H(()=>{i&&C({email:i,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{c("success"),l(e?.sendEmailSuccessMessage||""),D(),setTimeout(()=>{c(""),l("")},5e3)}})},[i]);const W=R(async()=>{i&&(await C({email:i,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{c("success"),l(e?.sendEmailSuccessMessage||""),D(),setTimeout(()=>{c(""),l("")},5e3)}}),S({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"sent_again"}}))},[i,C]),K=(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),N(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,N(s),t?a<o.length-1&&!o[a+1]&&m(a+1):a>0&&m(a-1)},O=R(async()=>{if(!b?.length){u(e?.codeEmptyError||"");return}if(b.length<6){u(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)c("success"),l(e?.authSuccessMessage||""),h(!0),f?.user_id&&v(f.user_id),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(()=>{x()},3e3);else{const s=t?.data?.error_code??t?.error_code;s==="104"?(h(!0),f?.user_id&&v(f.user_id),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(()=>{x()},3e3)):u(s==="142"?e?.incorrectCodeError||"Invalid verification code.":s==="154"?e?.expiredCodeMessage||"":e?.sendEmailErrorMessage||"")}}});let a=setTimeout(()=>{c(""),l(""),clearTimeout(a)},5e3)},[b,e?.codeEmptyError,e?.authSuccessMessage,e?.incorrectCodeError,e?.expiredCodeMessage,e?.sendEmailErrorMessage,P,E,k,x,h,v,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",y&&"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);N(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%",z.toString()),className:"cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline"}):n(r,{onClick:W,className:L("cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline",{"pointer-events-none":A||B}),html:e?.sendAgainText}),n(q,{type:"submit",loading:F,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:O,children:e.buttonText})]}),n(Y,{status:j,message:$})]})}export{ae as default};
|
|
1
|
+
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:x}){const{setIsActivateSuccess:h,fetchCreditInfo:v,profile:f}=ee(),{locale:P,brand:V}=J(),{email:i}=Z(),y=te.includes(V),{isMutating:B,trigger:C,data:E}=G(),{isMutating:F,trigger:k}=Q(),[$,l]=p(""),[j,c]=p(""),{startCountDown:A,startAction:D,countDown:z}=X(60),[I,u]=p(""),[w,m]=p(0),[o,N]=p(new Array(6).fill("")),T=U([]),b=o.join("");H(()=>{T.current[w]&&T.current[w].focus()},[w]),H(()=>{i&&C({email:i,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{c("success"),l(e?.sendEmailSuccessMessage||""),D(),setTimeout(()=>{c(""),l("")},5e3)}})},[i]);const W=R(async()=>{i&&(await C({email:i,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{c("success"),l(e?.sendEmailSuccessMessage||""),D(),setTimeout(()=>{c(""),l("")},5e3)}}),S({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"sent_again"}}))},[i,C]),K=(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),N(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,N(s),t?a<o.length-1&&!o[a+1]&&m(a+1):a>0&&m(a-1)},O=R(async()=>{if(!b?.length){u(e?.codeEmptyError||"");return}if(b.length<6){u(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)c("success"),l(e?.authSuccessMessage||""),h(!0),f?.user_id&&setTimeout(()=>v(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(()=>{x()},3e3);else{const s=t?.data?.error_code??t?.error_code;s==="104"?(h(!0),f?.user_id&&setTimeout(()=>v(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(()=>{x()},3e3)):u(s==="142"?e?.incorrectCodeError||"Invalid verification code.":s==="154"?e?.expiredCodeMessage||"":e?.sendEmailErrorMessage||"")}}});let a=setTimeout(()=>{c(""),l(""),clearTimeout(a)},5e3)},[b,e?.codeEmptyError,e?.authSuccessMessage,e?.incorrectCodeError,e?.expiredCodeMessage,e?.sendEmailErrorMessage,P,E,k,x,h,v,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",y&&"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);N(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%",z.toString()),className:"cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline"}):n(r,{onClick:W,className:L("cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline",{"pointer-events-none":A||B}),html:e?.sendAgainText}),n(q,{type:"submit",loading:F,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:O,children:e.buttonText})]}),n(Y,{status:j,message:$})]})}export{ae as default};
|
|
2
2
|
//# sourceMappingURL=ActivatePanel.js.map
|