@anker-in/campaign-ui 0.5.0-beta.18 → 0.5.0-beta.20
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/MemberPopup.js +1 -1
- package/dist/cjs/components/memberPopup/MemberPopup.js.map +3 -3
- package/dist/cjs/components/memberPopup/panels/ActivitiesSubscribePanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/ActivitiesSubscribePanel.js.map +3 -3
- 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 +2 -2
- package/dist/cjs/components/memberPopup/panels/Referral/index.js +1 -1
- package/dist/cjs/components/memberPopup/panels/Referral/index.js.map +3 -3
- package/dist/cjs/components/memberPopup/type.d.ts +1 -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/MemberPopup.js +1 -1
- package/dist/esm/components/memberPopup/MemberPopup.js.map +2 -2
- package/dist/esm/components/memberPopup/panels/ActivitiesSubscribePanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/ActivitiesSubscribePanel.js.map +3 -3
- 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 +3 -3
- 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 +2 -2
- package/dist/esm/components/memberPopup/panels/Referral/index.js +1 -1
- package/dist/esm/components/memberPopup/panels/Referral/index.js.map +3 -3
- package/dist/esm/components/memberPopup/type.d.ts +1 -0
- package/dist/esm/components/memberPopup/type.js.map +1 -1
- package/package.json +1 -1
- package/src/components/memberPopup/MemberPopup.tsx +110 -105
- package/src/components/memberPopup/panels/ActivitiesSubscribePanel.tsx +35 -20
- package/src/components/memberPopup/panels/ConsumeCredits/index.tsx +16 -21
- package/src/components/memberPopup/panels/EarnCredits/ActivatePanel.tsx +20 -10
- package/src/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.tsx +10 -1
- package/src/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.tsx +3 -9
- package/src/components/memberPopup/panels/EarnCredits/index.tsx +4 -5
- package/src/components/memberPopup/panels/Referral/index.tsx +11 -17
- package/src/components/memberPopup/type.ts +1 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var R=Object.create;var h=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var B=(e,n)=>{for(var i in n)h(e,i,{get:n[i],enumerable:!0})},M=(e,n,i,d)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of H(n))!j.call(e,s)&&s!==i&&h(e,s,{get:()=>n[s],enumerable:!(d=z(n,s))||d.enumerable});return e};var
|
|
1
|
+
"use strict";"use client";var R=Object.create;var h=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var B=(e,n)=>{for(var i in n)h(e,i,{get:n[i],enumerable:!0})},M=(e,n,i,d)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of H(n))!j.call(e,s)&&s!==i&&h(e,s,{get:()=>n[s],enumerable:!(d=z(n,s))||d.enumerable});return e};var b=(e,n,i)=>(i=e!=null?R(T(e)):{},M(n||!e||!e.__esModule?h(i,"default",{value:e,enumerable:!0}):i,e)),L=e=>M(h({},"__esModule",{value:!0}),e);var Z={};B(Z,{MemberPopup:()=>Q});module.exports=L(Z);var t=require("react/jsx-runtime"),o=require("react"),S=require("@anker-in/headless-ui"),x=require("@anker-in/lib"),r=require("./type"),I=require("./context/provider"),O=require("./context/provider"),_=require("./context/viewStack"),p=require("./icons"),A=require("../../constants");const D=(0,o.lazy)(()=>import("./panels/EarnCredits")),U=(0,o.lazy)(()=>import("./panels/ConsumeCredits")),F=(0,o.lazy)(()=>import("./panels/Referral")),W=(0,o.lazy)(()=>import("./panels/EarnCredits/CompleteProfilePanel")),q=(0,o.lazy)(()=>import("./panels/ActivitiesSubscribePanel")),G=(0,o.lazy)(()=>import("./panels/EarnCredits/SubscribeEmailPanel")),J=(0,o.lazy)(()=>import("./panels/EarnCredits/ActivatePanel")),K=(0,o.lazy)(()=>import("./panels/ConsumeCredits/RedeemCouponPanel"));function Q({copy:e,bottomOffset:n="24px",...i}){const[d,s]=(0,o.useState)(!1);return(0,o.useEffect)(()=>{const c=e.pageConfig;if(!c){s(!0);return}const m=window.location.pathname,P=c.pages.some(C=>m===C||m.startsWith(C+"/"));switch(c.scope){case r.MemberPopupPageScope.Include:s(P);break;case r.MemberPopupPageScope.Exclude:s(!P);break;default:s(!0)}},[e.pageConfig]),d?(0,t.jsx)(I.MemberPopupProvider,{...i,earnCreditsCopy:e.earnCredits,children:(0,t.jsx)(X,{copy:e,bottomOffset:n})}):null}function X({copy:e,bottomOffset:n}){const{profile:i,openSignInPopup:d,openSignUpPopup:s}=(0,O.useMemberPopupContext)(),{brand:c}=(0,x.useHeadlessContext)(),m=A.ROUNDED_BRANDS.includes(c),P=!!i,[C,w]=(0,o.useState)(!1),[y,N]=(0,o.useState)([]),l=y[y.length-1]??null,v=(0,o.useCallback)(a=>{N(u=>[...u,a])},[]),f=(0,o.useCallback)(()=>{N(a=>a.slice(0,-1))},[]),E="Member Floating Window";function g(a,u){(0,x.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{position:a,button_name:u,info:E}})}function V(a,u){switch(a){case r.MemberPopupActionType.ExternalLink:u&&window.open(u,"_blank","noopener,noreferrer");break;case r.MemberPopupActionType.OpenEarnCredits:g("home","earn_credits"),v({type:r.MemberPopupPanelType.EarnCredits});break;case r.MemberPopupActionType.OpenConsumeCredits:g("home","consume_credits"),v({type:r.MemberPopupPanelType.ConsumeCredits});break;case r.MemberPopupActionType.OpenReferral:g("home","referral"),v({type:r.MemberPopupPanelType.Referral});break;case r.MemberPopupActionType.OpenSubscribe:g("home","subscribe"),v({type:r.MemberPopupPanelType.Subscribe});break}}function k(){w(!1),N([])}return(0,t.jsxs)(_.ViewStackContext.Provider,{value:{pushView:v,popView:f},children:[C&&(0,t.jsx)("div",{className:"fixed inset-0 z-[998]",onClick:k}),(0,t.jsxs)("div",{className:"fixed right-0 z-[999] flex flex-row items-end pr-[20px] md:flex-col md:items-end md:right-0 md:w-screen md:pr-0 md:pl-0",style:{bottom:n},children:[C&&(0,t.jsxs)("div",{className:"relative mr-[12px] md:mr-[12px] md:mb-[12px]",onClick:a=>a.stopPropagation(),children:[(0,t.jsx)("div",{className:"absolute right-[-7px] bottom-[24px] size-0 border-y-8 border-l-8 border-r-0 border-y-transparent border-l-white md:bottom-[-8px] md:right-[25px] md:top-auto md:border-y-0 md:border-l-8 md:border-r-8 md:border-t-8 md:border-l-transparent md:border-r-transparent md:border-t-white"}),(0,t.jsxs)("div",{className:(0,x.classNames)("flex w-[420px] max-w-[calc(100vw-32px)] min-h-[500px] flex-col overflow-hidden bg-white shadow-[0_8px_32px_rgba(0,0,0,0.16)] md:w-[calc(100vw-32px)] md:max-w-[400px]",m?"rounded-[12px]":"rounded-none"),style:{maxHeight:"min(80vh, 606px)"},children:[(0,t.jsxs)("div",{className:"flex items-center justify-end pl-[10px] pr-[16px] pb-[8px] pt-[16px]",children:[l!==null&&(0,t.jsx)("button",{className:"mr-auto flex size-[24px] cursor-pointer items-center justify-center",onClick:f,"aria-label":"Back",children:(0,t.jsx)(p.IconSwitch,{})}),(0,t.jsx)("button",{className:"flex size-[24px] cursor-pointer items-center justify-center",onClick:()=>{g("floating_button","close"),k()},"aria-label":"Close",children:(0,t.jsx)(p.IconClose,{})})]}),(0,t.jsxs)("div",{className:"flex flex-1 flex-col gap-[12px] overflow-y-auto p-[16px]",children:[l===null&&(0,t.jsxs)(t.Fragment,{children:[(e.title||e.subtitle)&&(0,t.jsxs)("div",{className:"flex flex-col gap-[4px]",children:[e.title&&(0,t.jsx)("h2",{className:"text-[24px] font-[700] leading-[1.2] text-[#080a0f]",children:e.title}),e.subtitle&&(0,t.jsx)("p",{className:"text-[16px] font-[700] leading-snug text-[#4a4c56]",children:e.subtitle})]}),e.list.map((a,u)=>(0,t.jsx)(Y,{item:a,onAction:V,rounded:m},u))]}),l!==null&&(0,t.jsxs)(o.Suspense,{fallback:(0,t.jsx)("div",{className:"flex items-center justify-center py-[32px]",children:(0,t.jsx)("div",{className:"size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent"})}),children:[l.type===r.MemberPopupPanelType.EarnCredits&&e.earnCredits&&(0,t.jsx)(D,{copy:e.earnCredits}),l.type===r.MemberPopupPanelType.ConsumeCredits&&e.consumeCredits&&(0,t.jsx)(U,{copy:e.consumeCredits}),l.type===r.MemberPopupPanelType.Referral&&e.referral&&(0,t.jsx)(F,{copy:e.referral,onClose:f}),l.type===r.MemberPopupPanelType.CompleteProfile&&e.earnCredits&&(0,t.jsx)(W,{copy:e.earnCredits.completeProfile,onClose:f}),l.type===r.MemberPopupPanelType.Subscribe&&e.activitiesSubscribe&&(0,t.jsx)(q,{copy:e.activitiesSubscribe,email:i?.email}),l.type===r.MemberPopupPanelType.SubscribeEmail&&e.earnCredits&&(0,t.jsx)(G,{copy:e.earnCredits.subscribe,email:i?.email,onClose:f}),l.type===r.MemberPopupPanelType.Activate&&e.earnCredits&&(0,t.jsx)(J,{copy:e.earnCredits.authCodeActivate,onClose:f}),l.type===r.MemberPopupPanelType.RedeemCoupon&&l.props&&e.consumeCredits&&(0,t.jsx)(K,{item:l.props,copy:e.consumeCredits,onClose:f})]})]}),e.footer&&!P&&(0,t.jsx)("div",{className:"border-t border-[#dadce0] p-[16px]",children:(0,t.jsxs)("div",{className:"flex items-center justify-between gap-[16px]",children:[(0,t.jsxs)("div",{className:"inline gap-[4px]",children:[(0,t.jsx)("span",{className:"text-[14px] font-[700] text-[#080a0f]",children:e.footer.loginHint}),(0,t.jsx)("button",{className:"cursor-pointer ml-[4px] text-[14px] font-bold text-[#080a0f] underline",onClick:d,children:e.footer.loginLabel})]}),(0,t.jsx)("div",{className:"flex shrink-0 items-center gap-[8px]",children:(0,t.jsx)("button",{className:(0,x.classNames)("cursor-pointer border-[1.6px] border-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-[#080a0f]",m?"rounded-[4px]":"rounded-none"),onClick:s,children:e.footer.joinLabel})})]})})]})]}),(0,t.jsx)("button",{className:"flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg md:ml-auto md:mr-[16px]",onClick:()=>{const a=!C;g("floating_button",a?"open":"close"),w(a)},"aria-label":e.triggerImg.alt??"Open member popup",children:(0,t.jsx)(S.Picture,{source:e.triggerImg.url,alt:e.triggerImg.alt??"",className:"size-[58px]"})})]})]})}function Y({item:e,onAction:n,rounded:i}){const d={[r.MemberPopupActionType.OpenEarnCredits]:p.IconCredit,[r.MemberPopupActionType.OpenConsumeCredits]:p.IconBag,[r.MemberPopupActionType.OpenReferral]:p.IconReferral,[r.MemberPopupActionType.OpenSubscribe]:p.IconSubscription};return(0,t.jsxs)("div",{className:(0,x.classNames)("flex flex-col gap-[16px] bg-[#f5f6f7] p-[16px]",i?"rounded-[8px]":"rounded-none"),children:[(0,t.jsxs)("div",{className:"flex flex-col gap-[4px]",children:[(0,t.jsx)("h3",{className:"text-[20px] font-[700] leading-[1.2] text-[#1e2024]",children:e.title}),e.description&&(0,t.jsx)("p",{className:"text-[14px] font-[700] leading-[1.43] text-[#1e2024]",children:e.description})]}),(0,t.jsx)("div",{className:"flex flex-col gap-[16px]",children:e.links.map((s,c)=>{const m=d[s.type];return(0,t.jsxs)("div",{children:[c>0&&(0,t.jsx)("div",{className:"mb-[16px] h-px bg-[#dadce0]"}),(0,t.jsxs)("button",{className:"flex w-full cursor-pointer items-center gap-[12px]",onClick:()=>n(s.type,s.url),children:[m&&(0,t.jsx)(m,{className:"size-[24px] shrink-0"}),(0,t.jsx)("span",{className:"flex-1 text-left text-[14px] font-[700] text-[#1e2024]",children:s.label}),(0,t.jsx)(p.IconArrow,{className:"size-[16px] shrink-0"})]})]},c)})})]})}
|
|
2
2
|
//# sourceMappingURL=MemberPopup.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/memberPopup/MemberPopup.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport { lazy, Suspense, useState, useCallback, useEffect } from 'react'\nimport { Picture } from '@anker-in/headless-ui'\nimport { gaTrack, type HeadlessConfig, useHeadlessContext, classNames as cn } from '@anker-in/lib'\nimport {\n MemberPopupActionType,\n MemberPopupPageScope,\n MemberPopupPanelType,\n type MemberPopupCopy,\n type MemberPopupContextValue,\n type MemberPopupItem,\n} from './type'\nimport { MemberPopupProvider } from './context/provider'\nimport { useMemberPopupContext } from './context/provider'\nimport { ViewStackContext, type ViewPayload } from './context/viewStack'\nimport { IconClose, IconArrow, IconCredit, IconBag, IconReferral, IconSwitch, IconSubscription } from './icons'\nimport { ROUNDED_BRANDS } from '../../constants'\n\nconst EarnCredits = lazy(() => import('./panels/EarnCredits'))\nconst ConsumeCredits = lazy(() => import('./panels/ConsumeCredits'))\nconst Referral = lazy(() => import('./panels/Referral'))\nconst CompleteProfilePanel = lazy(() => import('./panels/EarnCredits/CompleteProfilePanel'))\nconst ActivitiesSubscribePanel = lazy(() => import('./panels/ActivitiesSubscribePanel'))\nconst SubscribeEmailPanel = lazy(() => import('./panels/EarnCredits/SubscribeEmailPanel'))\nconst ActivatePanel = lazy(() => import('./panels/EarnCredits/ActivatePanel'))\nconst RedeemCouponPanel = lazy(() => import('./panels/ConsumeCredits/RedeemCouponPanel'))\n\ntype MemberPopupProps = MemberPopupContextValue & {\n headlessConfig: HeadlessConfig\n copy: MemberPopupCopy\n bottomOffset?: string\n}\n\nexport function MemberPopup({ copy, bottomOffset = '24px', ...providerProps }: MemberPopupProps) {\n const [isVisible, setIsVisible] = useState(false)\n\n useEffect(() => {\n const config = copy.pageConfig\n if (!config) {\n setIsVisible(true)\n return\n }\n const pathname = window.location.pathname\n const matches = config.pages.some(page => pathname === page || pathname.startsWith(page + '/'))\n switch (config.scope) {\n case MemberPopupPageScope.Include:\n setIsVisible(matches)\n break\n case MemberPopupPageScope.Exclude:\n setIsVisible(!matches)\n break\n default:\n setIsVisible(true)\n }\n }, [copy.pageConfig])\n\n return isVisible ? (\n <MemberPopupProvider {...providerProps} earnCreditsCopy={copy.earnCredits}>\n <MemberPopupContent copy={copy} bottomOffset={bottomOffset} />\n </MemberPopupProvider>\n ) : null\n}\n\ntype MemberPopupContentProps = {\n copy: MemberPopupCopy\n bottomOffset: string\n}\n\nfunction MemberPopupContent({ copy, bottomOffset }: MemberPopupContentProps) {\n const { profile, openSignInPopup, openSignUpPopup } = useMemberPopupContext()\n const { brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n const isLogin = !!profile\n const [isOpen, setIsOpen] = useState(false)\n const [viewStack, setViewStack] = useState<ViewPayload[]>([])\n\n const currentView = viewStack[viewStack.length - 1] ?? null\n\n const pushView = useCallback((view: ViewPayload) => {\n setViewStack(prev => [...prev, view])\n }, [])\n\n const popView = useCallback(() => {\n setViewStack(prev => prev.slice(0, -1))\n }, [])\n\n const MEMBER_POPUP_INFO = 'Member Floating Window'\n\n function trackLpButton(position: string, buttonName: string) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n position,\n button_name: buttonName,\n info: MEMBER_POPUP_INFO,\n },\n })\n }\n\n function handleAction(type: MemberPopupActionType, url?: string) {\n switch (type) {\n case MemberPopupActionType.ExternalLink:\n if (url) window.open(url, '_blank', 'noopener,noreferrer')\n break\n case MemberPopupActionType.OpenEarnCredits:\n trackLpButton('home', 'earn_credits')\n pushView({ type: MemberPopupPanelType.EarnCredits })\n break\n case MemberPopupActionType.OpenConsumeCredits:\n trackLpButton('home', 'consume_credits')\n pushView({ type: MemberPopupPanelType.ConsumeCredits })\n break\n case MemberPopupActionType.OpenReferral:\n trackLpButton('home', 'referral')\n pushView({ type: MemberPopupPanelType.Referral })\n break\n case MemberPopupActionType.OpenSubscribe:\n trackLpButton('home', 'subscribe')\n pushView({ type: MemberPopupPanelType.Subscribe })\n break\n }\n }\n\n function handleClose() {\n setIsOpen(false)\n setViewStack([])\n }\n\n return (\n <ViewStackContext.Provider value={{ pushView, popView }}>\n {isOpen && <div className=\"fixed inset-0 z-[998]\" onClick={handleClose} />}\n <div\n className=\"fixed right-0 z-[999] flex flex-row items-end pr-[20px] md:flex-col md:items-end md:right-0 md:w-screen md:pr-0 md:pl-0\"\n style={{ bottom: bottomOffset }}\n >\n {isOpen && (\n <div\n className={cn(\n 'relative mr-[8px] flex w-[420px] max-w-[calc(100vw-32px)] min-h-[500px] flex-col overflow-hidden bg-white shadow-[0_8px_32px_rgba(0,0,0,0.16)] md:mr-0 md:mb-[8px] md:mx-[16px] md:w-[calc(100vw-32px)] md:max-w-[400px]',\n rounded ? 'rounded-[12px]' : 'rounded-none'\n )}\n style={{ maxHeight: 'min(80vh, 606px)' }}\n onClick={e => e.stopPropagation()}\n >\n <div className=\"absolute right-[-8px] top-[24px] size-0 border-y-8 border-l-8 border-y-transparent border-l-white md:bottom-[-8px] md:left-auto md:right-[29px] md:top-auto md:border-x-8 md:border-b-transparent md:border-t-white\" />\n <div className=\"flex items-center justify-end pl-[10px] pr-[16px] pb-[8px] pt-[16px]\">\n {currentView !== null && (\n <button\n className=\"mr-auto flex size-[24px] cursor-pointer items-center justify-center\"\n onClick={popView}\n aria-label=\"Back\"\n >\n <IconSwitch />\n </button>\n )}\n <button\n className=\"flex size-[24px] cursor-pointer items-center justify-center\"\n onClick={() => {\n trackLpButton('floating_button', 'close')\n handleClose()\n }}\n aria-label=\"Close\"\n >\n <IconClose />\n </button>\n </div>\n\n <div className=\"flex flex-1 flex-col gap-[12px] overflow-y-auto p-[16px]\">\n {currentView === null && (\n <>\n {(copy.title || copy.subtitle) && (\n <div className=\"flex flex-col gap-[4px]\">\n {copy.title && (\n <h2 className=\"text-[24px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.title}</h2>\n )}\n {copy.subtitle && (\n <p className=\"text-[16px] font-[700] leading-snug text-[#4a4c56]\">{copy.subtitle}</p>\n )}\n </div>\n )}\n {copy.list.map((item, i) => (\n <HomeCard key={i} item={item} onAction={handleAction} rounded={rounded} />\n ))}\n </>\n )}\n\n {currentView !== null && (\n <Suspense\n fallback={\n <div className=\"flex 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 >\n {currentView.type === MemberPopupPanelType.EarnCredits && copy.earnCredits && (\n <EarnCredits copy={copy.earnCredits} />\n )}\n {currentView.type === MemberPopupPanelType.ConsumeCredits && copy.consumeCredits && (\n <ConsumeCredits copy={copy.consumeCredits} />\n )}\n {currentView.type === MemberPopupPanelType.Referral && copy.referral && (\n <Referral copy={copy.referral} onClose={popView} />\n )}\n {currentView.type === MemberPopupPanelType.CompleteProfile && copy.earnCredits && (\n <CompleteProfilePanel copy={copy.earnCredits.completeProfile} onClose={popView} />\n )}\n {currentView.type === MemberPopupPanelType.Subscribe && copy.activitiesSubscribe && (\n <ActivitiesSubscribePanel copy={copy.activitiesSubscribe} email={profile?.email} />\n )}\n {currentView.type === MemberPopupPanelType.SubscribeEmail && copy.earnCredits && (\n <SubscribeEmailPanel copy={copy.earnCredits.subscribe} email={profile?.email} onClose={popView} />\n )}\n {currentView.type === MemberPopupPanelType.Activate && copy.earnCredits && (\n <ActivatePanel copy={copy.earnCredits.authCodeActivate} onClose={popView} />\n )}\n {currentView.type === MemberPopupPanelType.RedeemCoupon &&\n currentView.props &&\n copy.consumeCredits && (\n <RedeemCouponPanel item={currentView.props as any} copy={copy.consumeCredits} onClose={popView} />\n )}\n </Suspense>\n )}\n </div>\n\n {copy.footer && !isLogin && (\n <div className=\"border-t border-[#dadce0] p-[16px]\">\n <div className=\"flex items-center justify-between gap-[16px]\">\n <div className=\"flex items-center gap-[4px]\">\n <span className=\"text-[14px] font-[700] text-[#080a0f]\">{copy.footer.loginHint}</span>\n <button\n className=\"cursor-pointer text-[14px] font-[700] text-[#080a0f] underline\"\n onClick={openSignInPopup}\n >\n {copy.footer.loginLabel}\n </button>\n </div>\n <div className=\"flex shrink-0 items-center gap-[8px]\">\n <button\n className={cn(\n 'cursor-pointer border-[1.6px] border-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-[#080a0f]',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n onClick={openSignUpPopup}\n >\n {copy.footer.joinLabel}\n </button>\n </div>\n </div>\n </div>\n )}\n </div>\n )}\n\n <button\n className=\"flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg md:ml-auto md:mr-[16px]\"\n onClick={() => {\n const next = !isOpen\n trackLpButton('floating_button', next ? 'open' : 'close')\n setIsOpen(next)\n }}\n aria-label={copy.triggerImg.alt ?? 'Open member popup'}\n >\n <Picture source={copy.triggerImg.url} alt={copy.triggerImg.alt ?? ''} className=\"size-[58px]\" />\n </button>\n </div>\n </ViewStackContext.Provider>\n )\n}\n\ntype HomeCardProps = {\n item: MemberPopupItem\n onAction: (type: MemberPopupActionType, url?: string) => void\n rounded: boolean\n}\n\nfunction HomeCard({ item, onAction, rounded }: HomeCardProps) {\n const ACTION_ICON: Partial<Record<MemberPopupActionType, typeof IconCredit>> = {\n [MemberPopupActionType.OpenEarnCredits]: IconCredit,\n [MemberPopupActionType.OpenConsumeCredits]: IconBag,\n [MemberPopupActionType.OpenReferral]: IconReferral,\n [MemberPopupActionType.OpenSubscribe]: IconSubscription,\n }\n\n return (\n <div className={cn('flex flex-col gap-[16px] bg-[#f5f6f7] p-[16px]', rounded ? 'rounded-[8px]' : 'rounded-none')}>\n <div className=\"flex flex-col gap-[4px]\">\n <h3 className=\"text-[20px] font-[700] leading-[1.2] text-[#1e2024]\">{item.title}</h3>\n {item.description && <p className=\"text-[14px] font-[700] leading-[1.43] text-[#1e2024]\">{item.description}</p>}\n </div>\n\n <div className=\"flex flex-col gap-[16px]\">\n {item.links.map((link, i) => {\n const IconComponent = ACTION_ICON[link.type]\n return (\n <div key={i}>\n {i > 0 && <div className=\"mb-[16px] h-px bg-[#dadce0]\" />}\n <button\n className=\"flex w-full cursor-pointer items-center gap-[12px]\"\n onClick={() => onAction(link.type, link.url)}\n >\n {IconComponent && <IconComponent className=\"size-[24px] shrink-0\" />}\n <span className=\"flex-1 text-left text-[14px] font-[700] text-[#1e2024]\">{link.label}</span>\n <IconArrow className=\"size-[16px] shrink-0\" />\n </button>\n </div>\n )\n })}\n </div>\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
6
|
-
"names": ["MemberPopup_exports", "__export", "MemberPopup", "__toCommonJS", "import_jsx_runtime", "import_react", "import_headless_ui", "import_lib", "import_type", "import_provider", "import_viewStack", "import_icons", "import_constants", "EarnCredits", "ConsumeCredits", "Referral", "CompleteProfilePanel", "ActivitiesSubscribePanel", "SubscribeEmailPanel", "ActivatePanel", "RedeemCouponPanel", "copy", "bottomOffset", "providerProps", "isVisible", "setIsVisible", "config", "pathname", "matches", "page", "MemberPopupContent", "profile", "openSignInPopup", "openSignUpPopup", "brand", "rounded", "isLogin", "isOpen", "setIsOpen", "viewStack", "setViewStack", "currentView", "pushView", "view", "prev", "popView", "MEMBER_POPUP_INFO", "trackLpButton", "position", "buttonName", "handleAction", "type", "url", "handleClose", "
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport { lazy, Suspense, useState, useCallback, useEffect } from 'react'\nimport { Picture } from '@anker-in/headless-ui'\nimport { gaTrack, type HeadlessConfig, useHeadlessContext, classNames as cn } from '@anker-in/lib'\nimport {\n MemberPopupActionType,\n MemberPopupPageScope,\n MemberPopupPanelType,\n type MemberPopupCopy,\n type MemberPopupContextValue,\n type MemberPopupItem,\n} from './type'\nimport { MemberPopupProvider } from './context/provider'\nimport { useMemberPopupContext } from './context/provider'\nimport { ViewStackContext, type ViewPayload } from './context/viewStack'\nimport { IconClose, IconArrow, IconCredit, IconBag, IconReferral, IconSwitch, IconSubscription } from './icons'\nimport { ROUNDED_BRANDS } from '../../constants'\n\nconst EarnCredits = lazy(() => import('./panels/EarnCredits'))\nconst ConsumeCredits = lazy(() => import('./panels/ConsumeCredits'))\nconst Referral = lazy(() => import('./panels/Referral'))\nconst CompleteProfilePanel = lazy(() => import('./panels/EarnCredits/CompleteProfilePanel'))\nconst ActivitiesSubscribePanel = lazy(() => import('./panels/ActivitiesSubscribePanel'))\nconst SubscribeEmailPanel = lazy(() => import('./panels/EarnCredits/SubscribeEmailPanel'))\nconst ActivatePanel = lazy(() => import('./panels/EarnCredits/ActivatePanel'))\nconst RedeemCouponPanel = lazy(() => import('./panels/ConsumeCredits/RedeemCouponPanel'))\n\ntype MemberPopupProps = MemberPopupContextValue & {\n headlessConfig: HeadlessConfig\n copy: MemberPopupCopy\n bottomOffset?: string\n}\n\nexport function MemberPopup({ copy, bottomOffset = '24px', ...providerProps }: MemberPopupProps) {\n const [isVisible, setIsVisible] = useState(false)\n\n useEffect(() => {\n const config = copy.pageConfig\n if (!config) {\n setIsVisible(true)\n return\n }\n const pathname = window.location.pathname\n const matches = config.pages.some(page => pathname === page || pathname.startsWith(page + '/'))\n switch (config.scope) {\n case MemberPopupPageScope.Include:\n setIsVisible(matches)\n break\n case MemberPopupPageScope.Exclude:\n setIsVisible(!matches)\n break\n default:\n setIsVisible(true)\n }\n }, [copy.pageConfig])\n\n return isVisible ? (\n <MemberPopupProvider {...providerProps} earnCreditsCopy={copy.earnCredits}>\n <MemberPopupContent copy={copy} bottomOffset={bottomOffset} />\n </MemberPopupProvider>\n ) : null\n}\n\ntype MemberPopupContentProps = {\n copy: MemberPopupCopy\n bottomOffset: string\n}\n\nfunction MemberPopupContent({ copy, bottomOffset }: MemberPopupContentProps) {\n const { profile, openSignInPopup, openSignUpPopup } = useMemberPopupContext()\n const { brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n const isLogin = !!profile\n const [isOpen, setIsOpen] = useState(false)\n const [viewStack, setViewStack] = useState<ViewPayload[]>([])\n\n const currentView = viewStack[viewStack.length - 1] ?? null\n\n const pushView = useCallback((view: ViewPayload) => {\n setViewStack(prev => [...prev, view])\n }, [])\n\n const popView = useCallback(() => {\n setViewStack(prev => prev.slice(0, -1))\n }, [])\n\n const MEMBER_POPUP_INFO = 'Member Floating Window'\n\n function trackLpButton(position: string, buttonName: string) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n position,\n button_name: buttonName,\n info: MEMBER_POPUP_INFO,\n },\n })\n }\n\n function handleAction(type: MemberPopupActionType, url?: string) {\n switch (type) {\n case MemberPopupActionType.ExternalLink:\n if (url) window.open(url, '_blank', 'noopener,noreferrer')\n break\n case MemberPopupActionType.OpenEarnCredits:\n trackLpButton('home', 'earn_credits')\n pushView({ type: MemberPopupPanelType.EarnCredits })\n break\n case MemberPopupActionType.OpenConsumeCredits:\n trackLpButton('home', 'consume_credits')\n pushView({ type: MemberPopupPanelType.ConsumeCredits })\n break\n case MemberPopupActionType.OpenReferral:\n trackLpButton('home', 'referral')\n pushView({ type: MemberPopupPanelType.Referral })\n break\n case MemberPopupActionType.OpenSubscribe:\n trackLpButton('home', 'subscribe')\n pushView({ type: MemberPopupPanelType.Subscribe })\n break\n }\n }\n\n function handleClose() {\n setIsOpen(false)\n setViewStack([])\n }\n\n return (\n <ViewStackContext.Provider value={{ pushView, popView }}>\n {isOpen && <div className=\"fixed inset-0 z-[998]\" onClick={handleClose} />}\n <div\n className=\"fixed right-0 z-[999] flex flex-row items-end pr-[20px] md:flex-col md:items-end md:right-0 md:w-screen md:pr-0 md:pl-0\"\n style={{ bottom: bottomOffset }}\n >\n {isOpen && (\n <div className=\"relative mr-[12px] md:mr-[12px] md:mb-[12px]\" onClick={e => e.stopPropagation()}>\n <div className=\"absolute right-[-7px] bottom-[24px] size-0 border-y-8 border-l-8 border-r-0 border-y-transparent border-l-white md:bottom-[-8px] md:right-[25px] md:top-auto md:border-y-0 md:border-l-8 md:border-r-8 md:border-t-8 md:border-l-transparent md:border-r-transparent md:border-t-white\" />\n <div\n className={cn(\n 'flex w-[420px] max-w-[calc(100vw-32px)] min-h-[500px] flex-col overflow-hidden bg-white shadow-[0_8px_32px_rgba(0,0,0,0.16)] md:w-[calc(100vw-32px)] md:max-w-[400px]',\n rounded ? 'rounded-[12px]' : 'rounded-none'\n )}\n style={{ maxHeight: 'min(80vh, 606px)' }}\n >\n <div className=\"flex items-center justify-end pl-[10px] pr-[16px] pb-[8px] pt-[16px]\">\n {currentView !== null && (\n <button\n className=\"mr-auto flex size-[24px] cursor-pointer items-center justify-center\"\n onClick={popView}\n aria-label=\"Back\"\n >\n <IconSwitch />\n </button>\n )}\n <button\n className=\"flex size-[24px] cursor-pointer items-center justify-center\"\n onClick={() => {\n trackLpButton('floating_button', 'close')\n handleClose()\n }}\n aria-label=\"Close\"\n >\n <IconClose />\n </button>\n </div>\n\n <div className=\"flex flex-1 flex-col gap-[12px] overflow-y-auto p-[16px]\">\n {currentView === null && (\n <>\n {(copy.title || copy.subtitle) && (\n <div className=\"flex flex-col gap-[4px]\">\n {copy.title && (\n <h2 className=\"text-[24px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.title}</h2>\n )}\n {copy.subtitle && (\n <p className=\"text-[16px] font-[700] leading-snug text-[#4a4c56]\">{copy.subtitle}</p>\n )}\n </div>\n )}\n {copy.list.map((item, i) => (\n <HomeCard key={i} item={item} onAction={handleAction} rounded={rounded} />\n ))}\n </>\n )}\n\n {currentView !== null && (\n <Suspense\n fallback={\n <div className=\"flex 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 >\n {currentView.type === MemberPopupPanelType.EarnCredits && copy.earnCredits && (\n <EarnCredits copy={copy.earnCredits} />\n )}\n {currentView.type === MemberPopupPanelType.ConsumeCredits && copy.consumeCredits && (\n <ConsumeCredits copy={copy.consumeCredits} />\n )}\n {currentView.type === MemberPopupPanelType.Referral && copy.referral && (\n <Referral copy={copy.referral} onClose={popView} />\n )}\n {currentView.type === MemberPopupPanelType.CompleteProfile && copy.earnCredits && (\n <CompleteProfilePanel copy={copy.earnCredits.completeProfile} onClose={popView} />\n )}\n {currentView.type === MemberPopupPanelType.Subscribe && copy.activitiesSubscribe && (\n <ActivitiesSubscribePanel copy={copy.activitiesSubscribe} email={profile?.email} />\n )}\n {currentView.type === MemberPopupPanelType.SubscribeEmail && copy.earnCredits && (\n <SubscribeEmailPanel copy={copy.earnCredits.subscribe} email={profile?.email} onClose={popView} />\n )}\n {currentView.type === MemberPopupPanelType.Activate && copy.earnCredits && (\n <ActivatePanel copy={copy.earnCredits.authCodeActivate} onClose={popView} />\n )}\n {currentView.type === MemberPopupPanelType.RedeemCoupon &&\n currentView.props &&\n copy.consumeCredits && (\n <RedeemCouponPanel\n item={currentView.props as any}\n copy={copy.consumeCredits}\n onClose={popView}\n />\n )}\n </Suspense>\n )}\n </div>\n\n {copy.footer && !isLogin && (\n <div className=\"border-t border-[#dadce0] p-[16px]\">\n <div className=\"flex items-center justify-between gap-[16px]\">\n <div className=\"inline gap-[4px]\">\n <span className=\"text-[14px] font-[700] text-[#080a0f]\">{copy.footer.loginHint}</span>\n <button\n className=\"cursor-pointer ml-[4px] text-[14px] font-bold text-[#080a0f] underline\"\n onClick={openSignInPopup}\n >\n {copy.footer.loginLabel}\n </button>\n </div>\n <div className=\"flex shrink-0 items-center gap-[8px]\">\n <button\n className={cn(\n 'cursor-pointer border-[1.6px] border-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-[#080a0f]',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n onClick={openSignUpPopup}\n >\n {copy.footer.joinLabel}\n </button>\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n )}\n\n <button\n className=\"flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg md:ml-auto md:mr-[16px]\"\n onClick={() => {\n const next = !isOpen\n trackLpButton('floating_button', next ? 'open' : 'close')\n setIsOpen(next)\n }}\n aria-label={copy.triggerImg.alt ?? 'Open member popup'}\n >\n <Picture source={copy.triggerImg.url} alt={copy.triggerImg.alt ?? ''} className=\"size-[58px]\" />\n </button>\n </div>\n </ViewStackContext.Provider>\n )\n}\n\ntype HomeCardProps = {\n item: MemberPopupItem\n onAction: (type: MemberPopupActionType, url?: string) => void\n rounded: boolean\n}\n\nfunction HomeCard({ item, onAction, rounded }: HomeCardProps) {\n const ACTION_ICON: Partial<Record<MemberPopupActionType, typeof IconCredit>> = {\n [MemberPopupActionType.OpenEarnCredits]: IconCredit,\n [MemberPopupActionType.OpenConsumeCredits]: IconBag,\n [MemberPopupActionType.OpenReferral]: IconReferral,\n [MemberPopupActionType.OpenSubscribe]: IconSubscription,\n }\n\n return (\n <div className={cn('flex flex-col gap-[16px] bg-[#f5f6f7] p-[16px]', rounded ? 'rounded-[8px]' : 'rounded-none')}>\n <div className=\"flex flex-col gap-[4px]\">\n <h3 className=\"text-[20px] font-[700] leading-[1.2] text-[#1e2024]\">{item.title}</h3>\n {item.description && <p className=\"text-[14px] font-[700] leading-[1.43] text-[#1e2024]\">{item.description}</p>}\n </div>\n\n <div className=\"flex flex-col gap-[16px]\">\n {item.links.map((link, i) => {\n const IconComponent = ACTION_ICON[link.type]\n return (\n <div key={i}>\n {i > 0 && <div className=\"mb-[16px] h-px bg-[#dadce0]\" />}\n <button\n className=\"flex w-full cursor-pointer items-center gap-[12px]\"\n onClick={() => onAction(link.type, link.url)}\n >\n {IconComponent && <IconComponent className=\"size-[24px] shrink-0\" />}\n <span className=\"flex-1 text-left text-[14px] font-[700] text-[#1e2024]\">{link.label}</span>\n <IconArrow className=\"size-[16px] shrink-0\" />\n </button>\n </div>\n )\n })}\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MemberPopup_exports", "__export", "MemberPopup", "__toCommonJS", "import_jsx_runtime", "import_react", "import_headless_ui", "import_lib", "import_type", "import_provider", "import_viewStack", "import_icons", "import_constants", "EarnCredits", "ConsumeCredits", "Referral", "CompleteProfilePanel", "ActivitiesSubscribePanel", "SubscribeEmailPanel", "ActivatePanel", "RedeemCouponPanel", "copy", "bottomOffset", "providerProps", "isVisible", "setIsVisible", "config", "pathname", "matches", "page", "MemberPopupContent", "profile", "openSignInPopup", "openSignUpPopup", "brand", "rounded", "isLogin", "isOpen", "setIsOpen", "viewStack", "setViewStack", "currentView", "pushView", "view", "prev", "popView", "MEMBER_POPUP_INFO", "trackLpButton", "position", "buttonName", "handleAction", "type", "url", "handleClose", "e", "cn", "item", "i", "HomeCard", "next", "onAction", "ACTION_ICON", "link", "IconComponent"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var E=Object.create;var f=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var j=(e,r)=>{for(var o in r)f(e,o,{get:r[o],enumerable:!0})},C=(e,r,o,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of H(r))!O.call(e,n)&&n!==o&&f(e,n,{get:()=>r[n],enumerable:!(d=F(r,n))||d.enumerable});return e};var q=(e,r,o)=>(o=e!=null?E(I(e)):{},C(r||!e||!e.__esModule?f(o,"default",{value:e,enumerable:!0}):o,e)),J=e=>C(f({},"__esModule",{value:!0}),e);var X={};j(X,{default:()=>T});module.exports=J(X);var t=require("react/jsx-runtime"),a=require("react"),s=require("@anker-in/headless-ui"),l=require("@anker-in/lib"),m=q(require("js-cookie")),M=require("query-string"),S=require("../../credits/context/utils"),k=require("../context/provider"),L=require("../../../constants");function V(){if(typeof window>"u")return{register_source:""};const{search:e,href:r}=window.location,o=(0,M.parse)(e);return{fbuy_ref_code:m.default.get("fbuy_ref_code"),ref:m.default.get("ref_ads"),inviter_code:o.ic??o.inviter_code??m.default.get("inviter_code"),register_source:o.redirect??m.default.get("reg_source")??r}}async function W(e){if(typeof window>"u"||!window?.grecaptcha?.execute||!e)return"";try{return await window.grecaptcha.execute(e,{action:"activity"})}catch{return""}}function T({copy:e,email:r}){const{alpcConfig:o,setIsSubscribeSuccess:d,pageHandle:n}=(0,k.useMemberPopupContext)(),{locale:g}=o,{brand:P,storeDomain:h,recaptchaSitekey:y}=(0,l.useHeadlessContext)(),p=L.ROUNDED_BRANDS.includes(P),[x,A]=(0,a.useState)(!1),[u,_]=(0,a.useState)(r??""),[v,c]=(0,a.useState)(""),[U,w]=(0,a.useState)(""),[R,N]=(0,a.useState)(!1);(0,a.useEffect)(()=>{r&&_(r)},[r]);const B=(0,a.useCallback)(async()=>{if(c(""),!u)return c("Please fill in your email");if(!(0,S.emailValidate)(u))return c("Invalid email address");if(!x)return c("Please agree to the policy");N(!0);const{register_source:i}=V(),D=await W(y||"");try{const b=await(await fetch("/api/multipass/rainbowbridge/activities",{method:"POST",headers:{"Content-Type":"application/json","current-language":g,"X-Recaptcha-Token":D},body:JSON.stringify({email:u,register_source:i,shopify_domain:h,single_brand_subscribe:e.single_brand_subscribe??!0,genre:e.genre??e.dealsType??"",sub_brand_type:e.sub_brand_type??""})})).json();b?.data?.is_new_subscribe?b?.data?.errors?c(b?.data?.errors??"Error occurred"):(w(e.successTips??"Subscribed successfully!"),d(!0),(0,l.gaTrack)({event:"ga4Event",event_name:"subscribe",event_parameters:{page_group:e.dealsType??e.genre??"",position:"sticky",info:"Member Floating Window"}})):w(e.subscribedLabel??"You've already subscribed!")}catch{c("Network error")}finally{N(!1)}},[u,x,g,h,e,d]);return(0,t.jsxs)("div",{className:"flex flex-col",children:[(0,t.jsx)(s.Text,{className:"text-[22px] font-bold leading-[1.2]",html:e.title}),e.desc&&(0,t.jsx)(s.Text,{className:"text-[16px] mt-[16px] font-bold text-[#1E2024]",html:e.desc}),(0,t.jsx)("input",{className:(0,l.classNames)("h-[46px] w-full border mt-[8px] px-[14px] text-[16px] outline-none placeholder:text-[#999]",p?"rounded-[4px]":"rounded-none"),placeholder:e.placeholder,value:u,onChange:i=>{c(""),_(i.target.value.trim())}}),(0,t.jsxs)("div",{className:"flex w-full mt-[8px] items-start gap-[8px]",children:[(0,t.jsx)(s.Checkbox,{checked:x,onCheckedChange:()=>A(i=>!i),className:"border-[#1d1d1f] mt-[2px]"}),(0,t.jsx)("label",{className:"text-left text-[14px] font-bold text-[#4A4C56] [&_a]:underline",dangerouslySetInnerHTML:{__html:e.policy??""}})]}),(0,t.jsx)("button",{className:(0,l.classNames)("w-full cursor-pointer bg-[#080a0f] mt-[16px] py-[14px] text-[14px] font-[700] text-white disabled:opacity-60",p?"rounded-[4px]":"rounded-none"),disabled:R,onClick:B,children:e.buttonLabel??"Subscribe"}),v&&(0,t.jsx)("div",{className:"text-left mt-[4px] text-[16px] font-semibold text-[#f84d4f]",children:(0,t.jsx)(s.Text,{html:v})}),(0,t.jsx)("div",{className:"text-left mt-[4px] text-[16px] font-semibold text-[#52c41a]",children:(0,t.jsx)(s.Text,{html:U})}),e.promo&&(0,t.jsxs)("div",{className:"flex mt-[32px] flex-col text-left",children:[(0,t.jsxs)("div",{className:"flex flex-col",children:[e.promo?.title&&(0,t.jsx)(s.Text,{className:"text-[18px] font-bold leading-[1.2]",html:e.promo.title}),e.promo.description&&(0,t.jsx)(s.Text,{className:"text-[14px] text-[#080A0F] mt-[8px] font-bold",html:e.promo.description}),e.promo.learnMoreLabel&&e.promo.learnMoreUrl&&(0,t.jsxs)("a",{href:(()=>{try{if(!n)return e.promo.learnMoreUrl;const i=new URL(e.promo.learnMoreUrl,window.location.href);return i.searchParams.set("ref",`${n}_subscribe`),i.toString()}catch{return e.promo.learnMoreUrl}})(),target:"_blank",rel:"noopener noreferrer",className:"flex mt-[8px] items-center gap-[4px] text-[14px] font-bold",children:[e.promo.learnMoreLabel,(0,t.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{d:"M5.52827 3.52876C5.78862 3.26841 6.21063 3.26841 6.47098 3.52876L10.471 7.52876C10.7313 7.78911 10.7313 8.21112 10.471 8.47147L6.47098 12.4715C6.21063 12.7318 5.78862 12.7318 5.52827 12.4715C5.26792 12.2111 5.26792 11.7891 5.52827 11.5288L9.05692 8.00011L5.52827 4.47147C5.26792 4.21112 5.26792 3.78911 5.52827 3.52876Z",fill:"#080A0F"})})]})]}),e.promo.image?.url&&(0,t.jsx)(s.Picture,{source:e.promo.image.url,alt:e.promo.image.alt??"",className:(0,l.classNames)("h-[100px] mt-[8px] w-full object-cover",p?"rounded-[8px]":"rounded-none")})]})]})}
|
|
2
2
|
//# sourceMappingURL=ActivitiesSubscribePanel.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/memberPopup/panels/ActivitiesSubscribePanel.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'\nimport { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport Cookies from 'js-cookie'\nimport { parse } from 'query-string'\nimport { emailValidate } from '../../credits/context/utils'\nimport { useMemberPopupContext } from '../context/provider'\nimport type { SubscribeModalCopy } from '../type'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\ntype Props = {\n copy: SubscribeModalCopy\n email?: string\n}\n\nfunction getAdCookie() {\n if (typeof window === 'undefined') return { register_source: '' }\n const { search, href } = window.location\n const query = parse(search)\n return {\n fbuy_ref_code: Cookies.get('fbuy_ref_code'),\n ref: Cookies.get('ref_ads'),\n inviter_code: query.ic ?? query.inviter_code ?? Cookies.get('inviter_code'),\n register_source: query.redirect ?? Cookies.get('reg_source') ?? href,\n }\n}\n\nasync function getRecaptchaToken(sitekey: string): Promise<string> {\n if (typeof window === 'undefined' || !window?.grecaptcha?.execute) return ''\n if (!sitekey) return ''\n try {\n return await window.grecaptcha.execute(sitekey, { action: 'activity' })\n } catch {\n return ''\n }\n}\n\nexport default function ActivitiesSubscribeModal({ copy, email: initialEmail }: Props) {\n const { alpcConfig, setIsSubscribeSuccess } = useMemberPopupContext()\n const { locale } = alpcConfig\n const { brand: headlessBrand, storeDomain, recaptchaSitekey } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(headlessBrand)\n const [policy, setPolicy] = useState(false)\n const [email, setEmail] = useState(initialEmail ?? '')\n const [errorMessage, setErrorMessage] = useState('')\n const [successMessage, setSuccessMessage] = useState('')\n const [loading, setLoading] = useState(false)\n\n useEffect(() => {\n if (initialEmail) setEmail(initialEmail)\n }, [initialEmail])\n\n const handleSubmit = useCallback(async () => {\n setErrorMessage('')\n if (!email) return setErrorMessage('Please fill in your email')\n if (!emailValidate(email)) return setErrorMessage('Invalid email address')\n if (!policy) return setErrorMessage('Please agree to the policy')\n\n setLoading(true)\n const { register_source } = getAdCookie()\n const recaptchaToken = await getRecaptchaToken(recaptchaSitekey || '')\n try {\n const response = await fetch('/api/multipass/rainbowbridge/activities', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'current-language': locale,\n 'X-Recaptcha-Token': recaptchaToken,\n },\n body: JSON.stringify({\n email,\n register_source,\n shopify_domain: storeDomain,\n single_brand_subscribe: copy.single_brand_subscribe ?? true,\n genre: copy.genre ?? copy.dealsType ?? '',\n sub_brand_type: copy.sub_brand_type ?? '',\n }),\n })\n const result = await response.json()\n if (!result?.data?.is_new_subscribe) {\n setSuccessMessage(copy.subscribedLabel ?? \"You've already subscribed!\")\n } else if (!result?.data?.errors) {\n setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')\n setIsSubscribeSuccess(true)\n } else {\n setErrorMessage(result?.data?.errors ?? 'Error occurred')\n }\n } catch {\n setErrorMessage('Network error')\n } finally {\n setLoading(false)\n }\n }, [email, policy, locale, storeDomain, copy, setIsSubscribeSuccess])\n\n return (\n <div className=\"flex flex-col
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ActivitiesSubscribePanel_exports", "__export", "ActivitiesSubscribeModal", "__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", "getRecaptchaToken", "sitekey", "copy", "initialEmail", "alpcConfig", "setIsSubscribeSuccess", "locale", "headlessBrand", "storeDomain", "recaptchaSitekey", "rounded", "policy", "setPolicy", "email", "setEmail", "errorMessage", "setErrorMessage", "successMessage", "setSuccessMessage", "loading", "setLoading", "handleSubmit", "register_source", "recaptchaToken", "result", "cn", "e", "v"]
|
|
4
|
+
"sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'\nimport { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport Cookies from 'js-cookie'\nimport { parse } from 'query-string'\nimport { emailValidate } from '../../credits/context/utils'\nimport { useMemberPopupContext } from '../context/provider'\nimport type { SubscribeModalCopy } from '../type'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\ntype Props = {\n copy: SubscribeModalCopy\n email?: string\n}\n\nfunction getAdCookie() {\n if (typeof window === 'undefined') return { register_source: '' }\n const { search, href } = window.location\n const query = parse(search)\n return {\n fbuy_ref_code: Cookies.get('fbuy_ref_code'),\n ref: Cookies.get('ref_ads'),\n inviter_code: query.ic ?? query.inviter_code ?? Cookies.get('inviter_code'),\n register_source: query.redirect ?? Cookies.get('reg_source') ?? href,\n }\n}\n\nasync function getRecaptchaToken(sitekey: string): Promise<string> {\n if (typeof window === 'undefined' || !window?.grecaptcha?.execute) return ''\n if (!sitekey) return ''\n try {\n return await window.grecaptcha.execute(sitekey, { action: 'activity' })\n } catch {\n return ''\n }\n}\n\nexport default function ActivitiesSubscribeModal({ copy, email: initialEmail }: Props) {\n const { alpcConfig, setIsSubscribeSuccess, pageHandle } = useMemberPopupContext()\n const { locale } = alpcConfig\n const { brand: headlessBrand, storeDomain, recaptchaSitekey } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(headlessBrand)\n const [policy, setPolicy] = useState(false)\n const [email, setEmail] = useState(initialEmail ?? '')\n const [errorMessage, setErrorMessage] = useState('')\n const [successMessage, setSuccessMessage] = useState('')\n const [loading, setLoading] = useState(false)\n\n useEffect(() => {\n if (initialEmail) setEmail(initialEmail)\n }, [initialEmail])\n\n const handleSubmit = useCallback(async () => {\n setErrorMessage('')\n if (!email) return setErrorMessage('Please fill in your email')\n if (!emailValidate(email)) return setErrorMessage('Invalid email address')\n if (!policy) return setErrorMessage('Please agree to the policy')\n\n setLoading(true)\n const { register_source } = getAdCookie()\n const recaptchaToken = await getRecaptchaToken(recaptchaSitekey || '')\n try {\n const response = await fetch('/api/multipass/rainbowbridge/activities', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'current-language': locale,\n 'X-Recaptcha-Token': recaptchaToken,\n },\n body: JSON.stringify({\n email,\n register_source,\n shopify_domain: storeDomain,\n single_brand_subscribe: copy.single_brand_subscribe ?? true,\n genre: copy.genre ?? copy.dealsType ?? '',\n sub_brand_type: copy.sub_brand_type ?? '',\n }),\n })\n const result = await response.json()\n if (!result?.data?.is_new_subscribe) {\n setSuccessMessage(copy.subscribedLabel ?? \"You've already subscribed!\")\n } else if (!result?.data?.errors) {\n setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')\n setIsSubscribeSuccess(true)\n gaTrack({\n event: 'ga4Event',\n event_name: 'subscribe',\n event_parameters: {\n page_group: copy.dealsType ?? copy.genre ?? '',\n position: 'sticky',\n info: 'Member Floating Window',\n },\n })\n } else {\n setErrorMessage(result?.data?.errors ?? 'Error occurred')\n }\n } catch {\n setErrorMessage('Network error')\n } finally {\n setLoading(false)\n }\n }, [email, policy, locale, storeDomain, copy, setIsSubscribeSuccess])\n\n return (\n <div className=\"flex flex-col\">\n <Text className=\"text-[22px] font-bold leading-[1.2]\" html={copy.title} />\n {copy.desc && <Text className=\"text-[16px] mt-[16px] font-bold text-[#1E2024]\" html={copy.desc} />}\n\n <input\n className={cn(\n 'h-[46px] w-full border mt-[8px] px-[14px] text-[16px] outline-none placeholder:text-[#999]',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n placeholder={copy.placeholder}\n value={email}\n onChange={e => {\n setErrorMessage('')\n setEmail(e.target.value.trim())\n }}\n />\n\n <div className=\"flex w-full mt-[8px] items-start gap-[8px]\">\n <Checkbox checked={policy} onCheckedChange={() => setPolicy(v => !v)} className=\"border-[#1d1d1f] mt-[2px]\" />\n <label\n className=\"text-left text-[14px] font-bold text-[#4A4C56] [&_a]:underline\"\n dangerouslySetInnerHTML={{ __html: copy.policy ?? '' }}\n />\n </div>\n\n <button\n className={cn(\n 'w-full cursor-pointer bg-[#080a0f] mt-[16px] py-[14px] text-[14px] font-[700] text-white disabled:opacity-60',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n disabled={loading}\n onClick={handleSubmit}\n >\n {copy.buttonLabel ?? 'Subscribe'}\n </button>\n\n {errorMessage && (\n <div className=\"text-left mt-[4px] text-[16px] font-semibold text-[#f84d4f]\">\n <Text html={errorMessage} />\n </div>\n )}\n <div className=\"text-left mt-[4px] text-[16px] font-semibold text-[#52c41a]\">\n <Text html={successMessage} />\n </div>\n\n {copy.promo && (\n <div className=\"flex mt-[32px] flex-col text-left\">\n <div className=\"flex flex-col\">\n {copy.promo?.title && <Text className=\"text-[18px] font-bold leading-[1.2]\" html={copy.promo.title} />}\n {copy.promo.description && (\n <Text className=\"text-[14px] text-[#080A0F] mt-[8px] font-bold\" html={copy.promo.description} />\n )}\n {copy.promo.learnMoreLabel && copy.promo.learnMoreUrl && (\n <a\n href={(() => {\n try {\n if (!pageHandle) return copy.promo!.learnMoreUrl!\n const url = new URL(copy.promo!.learnMoreUrl!, window.location.href)\n url.searchParams.set('ref', `${pageHandle}_subscribe`)\n return url.toString()\n } catch {\n return copy.promo!.learnMoreUrl!\n }\n })()}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"flex mt-[8px] items-center gap-[4px] text-[14px] font-bold\"\n >\n {copy.promo.learnMoreLabel}\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M5.52827 3.52876C5.78862 3.26841 6.21063 3.26841 6.47098 3.52876L10.471 7.52876C10.7313 7.78911 10.7313 8.21112 10.471 8.47147L6.47098 12.4715C6.21063 12.7318 5.78862 12.7318 5.52827 12.4715C5.26792 12.2111 5.26792 11.7891 5.52827 11.5288L9.05692 8.00011L5.52827 4.47147C5.26792 4.21112 5.26792 3.78911 5.52827 3.52876Z\"\n fill=\"#080A0F\"\n />\n </svg>\n </a>\n )}\n </div>\n {copy.promo.image?.url && (\n <Picture\n source={copy.promo.image.url}\n alt={copy.promo.image.alt ?? ''}\n className={cn('h-[100px] mt-[8px] w-full object-cover', rounded ? 'rounded-[8px]' : 'rounded-none')}\n />\n )}\n </div>\n )}\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyGM,IAAAI,EAAA,6BAzGNC,EAAiD,iBACjDC,EAAgD,iCAChDC,EAA8D,yBAC9DC,EAAoB,wBACpBC,EAAsB,wBACtBC,EAA8B,uCAC9BC,EAAsC,+BAEtCC,EAA+B,8BAO/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,CAEA,eAAeG,EAAkBC,EAAkC,CAEjE,GADI,OAAO,OAAW,KAAe,CAAC,QAAQ,YAAY,SACtD,CAACA,EAAS,MAAO,GACrB,GAAI,CACF,OAAO,MAAM,OAAO,WAAW,QAAQA,EAAS,CAAE,OAAQ,UAAW,CAAC,CACxE,MAAQ,CACN,MAAO,EACT,CACF,CAEe,SAARjB,EAA0C,CAAE,KAAAkB,EAAM,MAAOC,CAAa,EAAU,CACrF,KAAM,CAAE,WAAAC,EAAY,sBAAAC,EAAuB,WAAAC,CAAW,KAAI,yBAAsB,EAC1E,CAAE,OAAAC,CAAO,EAAIH,EACb,CAAE,MAAOI,EAAe,YAAAC,EAAa,iBAAAC,CAAiB,KAAI,sBAAmB,EAC7EC,EAAU,iBAAe,SAASH,CAAa,EAC/C,CAACI,EAAQC,CAAS,KAAI,YAAS,EAAK,EACpC,CAACC,EAAOC,CAAQ,KAAI,YAASZ,GAAgB,EAAE,EAC/C,CAACa,EAAcC,CAAe,KAAI,YAAS,EAAE,EAC7C,CAACC,EAAgBC,CAAiB,KAAI,YAAS,EAAE,EACjD,CAACC,EAASC,CAAU,KAAI,YAAS,EAAK,KAE5C,aAAU,IAAM,CACVlB,GAAcY,EAASZ,CAAY,CACzC,EAAG,CAACA,CAAY,CAAC,EAEjB,MAAMmB,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,EAAI5B,EAAY,EAClC6B,EAAiB,MAAMxB,EAAkBU,GAAoB,EAAE,EACrE,GAAI,CAiBF,MAAMe,EAAS,MAhBE,MAAM,MAAM,0CAA2C,CACtE,OAAQ,OACR,QAAS,CACP,eAAgB,mBAChB,mBAAoBlB,EACpB,oBAAqBiB,CACvB,EACA,KAAM,KAAK,UAAU,CACnB,MAAAV,EACA,gBAAAS,EACA,eAAgBd,EAChB,uBAAwBP,EAAK,wBAA0B,GACvD,MAAOA,EAAK,OAASA,EAAK,WAAa,GACvC,eAAgBA,EAAK,gBAAkB,EACzC,CAAC,CACH,CAAC,GAC6B,KAAK,EAC9BuB,GAAQ,MAAM,iBAEPA,GAAQ,MAAM,OAaxBR,EAAgBQ,GAAQ,MAAM,QAAU,gBAAgB,GAZxDN,EAAkBjB,EAAK,aAAe,0BAA0B,EAChEG,EAAsB,EAAI,KAC1B,WAAQ,CACN,MAAO,WACP,WAAY,YACZ,iBAAkB,CAChB,WAAYH,EAAK,WAAaA,EAAK,OAAS,GAC5C,SAAU,SACV,KAAM,wBACR,CACF,CAAC,GAZDiB,EAAkBjB,EAAK,iBAAmB,4BAA4B,CAgB1E,MAAQ,CACNe,EAAgB,eAAe,CACjC,QAAE,CACAI,EAAW,EAAK,CAClB,CACF,EAAG,CAACP,EAAOF,EAAQL,EAAQE,EAAaP,EAAMG,CAAqB,CAAC,EAEpE,SACE,QAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,UAAU,sCAAsC,KAAMH,EAAK,MAAO,EACvEA,EAAK,SAAQ,OAAC,QAAK,UAAU,iDAAiD,KAAMA,EAAK,KAAM,KAEhG,OAAC,SACC,aAAW,EAAAwB,YACT,6FACAf,EAAU,gBAAkB,cAC9B,EACA,YAAaT,EAAK,YAClB,MAAOY,EACP,SAAUa,GAAK,CACbV,EAAgB,EAAE,EAClBF,EAASY,EAAE,OAAO,MAAM,KAAK,CAAC,CAChC,EACF,KAEA,QAAC,OAAI,UAAU,6CACb,oBAAC,YAAS,QAASf,EAAQ,gBAAiB,IAAMC,EAAUe,GAAK,CAACA,CAAC,EAAG,UAAU,4BAA4B,KAC5G,OAAC,SACC,UAAU,iEACV,wBAAyB,CAAE,OAAQ1B,EAAK,QAAU,EAAG,EACvD,GACF,KAEA,OAAC,UACC,aAAW,EAAAwB,YACT,+GACAf,EAAU,gBAAkB,cAC9B,EACA,SAAUS,EACV,QAASE,EAER,SAAApB,EAAK,aAAe,YACvB,EAECc,MACC,OAAC,OAAI,UAAU,8DACb,mBAAC,QAAK,KAAMA,EAAc,EAC5B,KAEF,OAAC,OAAI,UAAU,8DACb,mBAAC,QAAK,KAAME,EAAgB,EAC9B,EAEChB,EAAK,UACJ,QAAC,OAAI,UAAU,oCACb,qBAAC,OAAI,UAAU,gBACZ,UAAAA,EAAK,OAAO,UAAS,OAAC,QAAK,UAAU,sCAAsC,KAAMA,EAAK,MAAM,MAAO,EACnGA,EAAK,MAAM,gBACV,OAAC,QAAK,UAAU,gDAAgD,KAAMA,EAAK,MAAM,YAAa,EAE/FA,EAAK,MAAM,gBAAkBA,EAAK,MAAM,iBACvC,QAAC,KACC,MAAO,IAAM,CACX,GAAI,CACF,GAAI,CAACI,EAAY,OAAOJ,EAAK,MAAO,aACpC,MAAM2B,EAAM,IAAI,IAAI3B,EAAK,MAAO,aAAe,OAAO,SAAS,IAAI,EACnE,OAAA2B,EAAI,aAAa,IAAI,MAAO,GAAGvB,CAAU,YAAY,EAC9CuB,EAAI,SAAS,CACtB,MAAQ,CACN,OAAO3B,EAAK,MAAO,YACrB,CACF,GAAG,EACH,OAAO,SACP,IAAI,sBACJ,UAAU,6DAET,UAAAA,EAAK,MAAM,kBACZ,OAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACnD,mBAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,GACF,GAEJ,EACCA,EAAK,MAAM,OAAO,QACjB,OAAC,WACC,OAAQA,EAAK,MAAM,MAAM,IACzB,IAAKA,EAAK,MAAM,MAAM,KAAO,GAC7B,aAAW,EAAAwB,YAAG,yCAA0Cf,EAAU,gBAAkB,cAAc,EACpG,GAEJ,GAEJ,CAEJ",
|
|
6
|
+
"names": ["ActivitiesSubscribePanel_exports", "__export", "ActivitiesSubscribeModal", "__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", "getRecaptchaToken", "sitekey", "copy", "initialEmail", "alpcConfig", "setIsSubscribeSuccess", "pageHandle", "locale", "headlessBrand", "storeDomain", "recaptchaSitekey", "rounded", "policy", "setPolicy", "email", "setEmail", "errorMessage", "setErrorMessage", "successMessage", "setSuccessMessage", "loading", "setLoading", "handleSubmit", "register_source", "recaptchaToken", "result", "cn", "e", "v", "url"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var I=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.prototype.hasOwnProperty;var X=(n,a)=>{for(var l in a)I(n,l,{get:a[l],enumerable:!0})},Y=(n,a,l,f)=>{if(a&&typeof a=="object"||typeof a=="function")for(let d of K(a))!Q.call(n,d)&&d!==l&&I(n,d,{get:()=>a[d],enumerable:!(f=J(a,d))||f.enumerable});return n};var Z=n=>Y(I({},"__esModule",{value:!0}),n);var ne={};X(ne,{default:()=>te});module.exports=Z(ne);var t=require("react/jsx-runtime"),u=require("react"),N=require("@anker-in/headless-ui"),i=require("@anker-in/lib"),L=require("../../context/provider"),A=require("../../context/viewStack"),U=require("./hooks/useRedeemableList"),E=require("./hooks/useRedeemAndBuy"),o=require("../../type"),m=require("../../../credits/context/utils"),M=require("../../../../constants");function ee({copy:n}){const{profile:a,creditInfo:l,openSignUpPopup:f,alpcConfig:d,isActivateSuccess:F,fetchCreditInfo:$,pageHandle:x}=(0,L.useMemberPopupContext)(),{pushView:R}=(0,A.useViewStack)(),{brand:T}=(0,i.useHeadlessContext)(),_=M.ROUNDED_BRANDS.includes(T),[k,y]=(0,u.useState)(""),[z,B]=(0,u.useState)(null);(0,u.useEffect)(()=>{a?.user_id&&$(a.user_id)},[]);const c=!!a,{redeemableList:S,listLoading:O}=(0,U.useRedeemableList)(d),{trigger:V}=(0,E.useRedeemAndBuy)(d),j=n.list.map(e=>e.product?.handle).filter(Boolean),{data:D}=(0,i.useProductsByHandles)({handles:j}),H=(0,u.useMemo)(()=>n.list.map(e=>{const r=S.find(p=>String(p.id)===String(e.redeemId));if(!r)return null;const s=Number(l?.available_credit??0),C=r.consume_credits>s,v=r.is_limited&&(!r.remaining_inventory||r.remaining_inventory<=0),P=e.type===o.ConsumeCreditsItemType.RedeemAndBuy||e.type===o.ConsumeCreditsItemType.Product,b=D?.find(p=>p.handle===e.product?.handle),w=b?.variants?.find(p=>p.sku===e.product?.sku)??b?.variants?.[0];return P&&(!b||!w||!w?.availableForSale||v)?null:{...e,alpcData:r,insufficient:C,product:b,variant:w}}).filter(Boolean),[n.list,S,l,a,c,D]),g=a?.activated||F;function W(e){return!c||!g?n.unlockRewards:e.soldOut?n.soldOut:n.btnRedeem}function G(e){return!c||!g?!1:e.insufficient}function h(e){(0,i.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"consume_credits",button_name:"redeem",info:"Member Floating Window"}})}async function q(e){if(!c){f();return}if(!g){R({type:o.MemberPopupPanelType.Activate});return}if(e.type===o.ConsumeCreditsItemType.GiftCard||e.type===o.ConsumeCreditsItemType.Product){if(n.creditsPage?.url){const r=n.creditsPage.redeemListSectionId??"creditsRedeemList",s=new URL(n.creditsPage.url,window.location.href);s.searchParams.set("section",r),x&&s.searchParams.set("ref",`${x}_consume_credits`),h(e.title),window.open(s.toString(),"_blank","noopener,noreferrer")}return}if(e.type===o.ConsumeCreditsItemType.Coupon)h(e.title),R({type:o.MemberPopupPanelType.RedeemCoupon,props:{itemTitle:e.title,itemCredits:e.alpcData.consume_credits,itemImage:n.imageMapping?.[e.type]?{url:n.imageMapping[e.type].url,alt:e.image?.alt}:e.image,itemValue:e.value,itemRules:e.rules,redeemId:Number(e.redeemId),userId:a?.user_id,alpcConfig:d}});else{y(""),B(e.redeemId),h(e.title);try{await V({productVariant:e.variant,redeemId:Number(e.redeemId),userId:a?.user_id}),(0,i.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"consume_credits",button_name:"redeem_success",info:"Member Floating Window"}})}catch(r){y(r?.message??n.redeemModal.commonError)}finally{B(null)}}}return(0,t.jsx)(t.Fragment,{children:(0,t.jsxs)("div",{className:"flex flex-1 flex-col",children:[(0,t.jsxs)("div",{className:"flex flex-col gap-[8px]",children:[n.title&&(0,t.jsx)("h2",{className:"text-[24px] font-[700] leading-[1.2] text-[#080a0f]",children:n.title}),n.subtitle&&(0,t.jsx)("p",{className:"text-[16px] mt-[8px] font-[700] leading-snug text-[#4a4c56]",children:n.subtitle})]}),c&&(0,t.jsxs)("div",{className:(0,i.classNames)("flex items-center mt-[16px] gap-[12px] bg-[#f5f6f7] p-[16px]",_?"rounded-[8px]":"rounded-none"),children:[(0,t.jsxs)("div",{className:"flex flex-1 flex-col gap-[4px]",children:[(0,t.jsx)("div",{className:"text-[14px] font-[700] text-[#1e2024]",children:n.balanceLabel??"AnkerCredits Balance"}),(0,t.jsxs)("div",{className:"flex items-end gap-[4px]",children:[(0,t.jsx)("span",{className:"text-[24px] font-[700] leading-[1.2] text-[#1e2024]",children:(0,m.numberFormat)(l?.available_credit||0)}),(0,t.jsx)("span",{className:"text-[14px] font-[700] leading-[1.4] text-[#1e2024]",children:n.creditUnit??"ankercredits"})]})]}),(0,t.jsx)("div",{className:"h-full w-px bg-[#dadce0]"}),(0,t.jsxs)("div",{className:"flex flex-1 flex-col gap-[4px]",children:[(0,t.jsx)("div",{className:"text-[14px] font-[700] text-[#1e2024]",children:n.comingSoonLabel??"Coming Soon"}),(0,t.jsxs)("div",{className:"flex items-end gap-[4px]",children:[(0,t.jsx)("span",{className:"text-[24px] font-[700] leading-[1.2] text-[#1e2024]",children:(0,m.numberFormat)(l?.pending_credit||0)}),(0,t.jsx)("span",{className:"text-[14px] font-[700] leading-[1.4] text-[#1e2024]",children:n.creditUnit??"ankercredits"})]})]})]}),k&&(0,t.jsx)("div",{className:"text-[14px] mt-[8px] font-[700] text-[#f84d4f]",children:k}),O?(0,t.jsx)("div",{className:"flex flex-1 items-center justify-center py-[32px]",children:(0,t.jsx)("div",{className:"size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent"})}):(0,t.jsx)("div",{className:"flex mt-[16px] flex-col",children:H.map((e,r)=>{const s=!!e.product;return(0,t.jsxs)("div",{className:"relative py-[16px]",children:[r>0&&(0,t.jsx)("div",{className:"absolute inset-x-0 top-0 h-px bg-[#dadce0]"}),(0,t.jsxs)("div",{className:"flex items-center gap-[12px]",children:[(()=>{const C=n.imageMapping?.[e.type]?.url,v=s?e.variant?.image?.url??e.product?.images?.[0]?.url??e.image?.url:C??e.image?.url,P=s?e.variant?.image?.altText??e.product?.images?.[0]?.alt??e.image?.alt??"":e.image?.alt??"";return v?(0,t.jsxs)("div",{className:(0,i.classNames)("relative size-[64px] shrink-0 overflow-hidden",_?"rounded-[4px]":"rounded-none"),children:[(0,t.jsx)(N.Picture,{source:v,alt:P,className:"flex size-full items-center justify-center",imgClassName:s?"object-cover":"h-full w-auto object-contain"}),!s&&e.value&&(0,t.jsxs)("div",{className:"absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white",children:[e.value," ",n.off]})]}):null})(),(0,t.jsxs)("div",{className:"min-w-0 flex-1",children:[(0,t.jsx)("div",{className:"text-[16px] font-[700] text-[#1e2024] line-clamp-2",children:s&&e.product?.title?e.product.title:e.title}),(0,t.jsx)("div",{className:"mt-[4px] text-[14px] text-[#666]",children:s&&e.price!=null?`${(0,m.numberFormat)(e.alpcData.consume_credits)} ${n.creditUnit??""} + $${Number(e.price).toFixed(2)}`:`${(0,m.numberFormat)(e.alpcData.consume_credits)} ${n.creditUnit??""}`})]}),(0,t.jsxs)("div",{className:"relative group",children:[(0,t.jsx)(N.Button,{className:(0,i.classNames)("bg-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white",_?"rounded-[4px]":"rounded-none"),disabled:G(e),loading:z===e.redeemId,onClick:()=>q(e),children:W(e)}),e.insufficient&&c&&g&&(0,t.jsx)("div",{className:"pointer-events-none absolute right-0 top-full z-[100] mt-[10px] hidden w-[200px] group-hover:block",children:(0,t.jsxs)("div",{className:"relative bg-[#6D6D6F] p-[16px] text-[14px] font-[700] text-white shadow",children:[(0,t.jsx)("p",{className:"text-pretty tracking-[-0.02em] text-[14px]",children:n.insufficientCredits}),(0,t.jsx)("div",{className:"absolute -top-[8px] right-[20px] size-[16px] origin-top-left rotate-45 rounded-[2px] bg-[#6D6D6F]"})]})})]})]})]},r)})}),n.creditsPage?.url&&(0,t.jsx)("a",{href:(()=>{if(!x)return n.creditsPage.url;try{const e=new URL(n.creditsPage.url,window.location.href);return e.searchParams.set("ref",`${x}_consume_credits`),e.toString()}catch{return n.creditsPage.url}})(),target:"_blank",rel:"noopener noreferrer",className:"mt-auto self-start text-[14px] font-[700] text-[#080a0f] underline",onClick:()=>(0,i.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"consume_credits",button_name:"credits_page_link",info:"Member Floating Window"}}),children:n.creditsPage.label??"Go to Credits Page"})]})})}var te=ee;
|
|
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 } =\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\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 getPageHandle() {\n if (typeof window === 'undefined') return ''\n return window.location.pathname.replace(/^\\//, '').replace(/\\//g, '_') || 'home'\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.hash = sectionId\n const pageHandle = getPageHandle()\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 gap-[12px]\">\n <div className=\"flex flex-col gap-[8px]\">\n {copy.title && <h2 className=\"text-[24px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.title}</h2>}\n {copy.subtitle && <p className=\"text-[16px] font-[700] leading-snug text-[#4a4c56]\">{copy.subtitle}</p>}\n </div>\n\n {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 {redeemAndBuyError && <div className=\"text-[14px] font-[700] text-[#f84d4f]\">{redeemAndBuyError}</div>}\n\n {listLoading ? (\n <div className=\"flex flex-1 items-center justify-center py-[32px]\">\n <div className=\"size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent\" />\n </div>\n ) : (\n <div className=\"flex flex-col\">\n {list.map((item, idx) => {\n const hasProduct = !!item.product\n return (\n <div key={idx} className=\"relative py-[16px]\">\n {idx > 0 && <div className=\"absolute inset-x-0 top-0 h-px bg-[#dadce0]\" />}\n <div className=\"flex items-center gap-[12px]\">\n {(() => {\n const mappedImgUrl = copy.imageMapping?.[item.type]?.url\n const imgUrl = hasProduct\n ? (item.variant?.image?.url ?? item.product?.images?.[0]?.url ?? item.image?.url)\n : (mappedImgUrl ?? item.image?.url)\n const imgAlt = hasProduct\n ? (item.variant?.image?.altText ?? item.product?.images?.[0]?.alt ?? item.image?.alt ?? '')\n : (item.image?.alt ?? '')\n if (!imgUrl) return null\n return (\n <div\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 const pageHandle = getPageHandle()\n if (!pageHandle) return copy.creditsPage!.url\n const url = new URL(\n copy.creditsPage!.url,\n typeof window !== 'undefined' ? window.location.href : undefined\n )\n url.searchParams.set('ref', `${pageHandle}_consume_credits`)\n return url.toString()\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": "yaAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,aAAAE,KAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ConsumeCredits_exports", "__export", "ConsumeCredits_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_headless_ui", "import_lib", "import_provider", "import_viewStack", "import_useRedeemableList", "import_useRedeemAndBuy", "import_type", "import_utils", "import_constants", "ConsumeCredits", "copy", "profile", "creditInfo", "openSignUpPopup", "alpcConfig", "isActivateSuccess", "fetchCreditInfo", "pushView", "brand", "rounded", "redeemAndBuyError", "setRedeemAndBuyError", "loadingId", "setLoadingId", "isLogin", "redeemableList", "listLoading", "redeemAndBuy", "handles", "item", "products", "list", "alpcData", "r", "availableCredit", "insufficient", "alpcSoldOut", "isPhysicalProduct", "product", "
|
|
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 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": "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",
|
|
6
|
+
"names": ["ConsumeCredits_exports", "__export", "ConsumeCredits_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_headless_ui", "import_lib", "import_provider", "import_viewStack", "import_useRedeemableList", "import_useRedeemAndBuy", "import_type", "import_utils", "import_constants", "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", "variant", "v", "isActivate", "getButtonLabel", "isDisabled", "trackRedeemButton", "itemTitle", "handleRedeem", "sectionId", "targetUrl", "e", "cn", "idx", "hasProduct", "mappedImgUrl", "imgUrl", "imgAlt", "url"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var S=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var Q=Object.prototype.hasOwnProperty;var X=(e,i)=>{for(var u in i)S(e,u,{get:i[u],enumerable:!0})},Y=(e,i,u,g)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of J(i))!Q.call(e,r)&&r!==u&&S(e,r,{get:()=>i[r],enumerable:!(g=G(i,r))||g.enumerable});return e};var Z=e=>Y(S({},"__esModule",{value:!0}),e);var ee={};X(ee,{default:()=>V});module.exports=Z(ee);var n=require("react/jsx-runtime"),o=require("react"),c=require("@anker-in/headless-ui"),s=require("@anker-in/lib"),R=require("../../../registration/authCodeActivate/Message"),H=require("../../../registration"),L=require("../../context/provider"),P=require("../../../../constants");function V({copy:e,onClose:i}){const{setIsActivateSuccess:u,fetchCreditInfo:g,profile:r}=(0,L.useMemberPopupContext)(),{locale:y,brand:B}=(0,s.useHeadlessContext)(),{email:d}=(0,H.useRegistration)(),F=P.ROUNDED_BRANDS.includes(B),{isMutating:$,trigger:C,data:E}=(0,s.useSendEmailValidation)(),{isMutating:j,trigger:k}=(0,s.useEmailValidation)(),[z,f]=(0,o.useState)(""),[W,p]=(0,o.useState)(""),{startCountDown:A,startAction:D,countDown:K}=(0,s.useCountDown)(60),[I,b]=(0,o.useState)(""),[w,_]=(0,o.useState)(0),[m,N]=(0,o.useState)(new Array(6).fill("")),T=(0,o.useRef)([]),v=m.join("");(0,o.useEffect)(()=>{T.current[w]&&T.current[w].focus()},[w]),(0,o.useEffect)(()=>{d&&C({email:d,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{p("success"),f(e?.sendEmailSuccessMessage||""),D(),setTimeout(()=>{p(""),f("")},5e3)}})},[d]);const O=(0,o.useCallback)(async()=>{d&&(await C({email:d,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{p("success"),f(e?.sendEmailSuccessMessage||""),D(),setTimeout(()=>{p(""),f("")},5e3)}}),(0,s.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"sent_again"}}))},[d,C]),U=(x,a)=>{const{value:t}=x.target;if(b(""),Number.isNaN(Number(t)))return;if(t.length>1){a<m.length-1&&(m[a+1]||(_(a+1),N(h=>{const M=[...h];return M[a]=t[0],t.length>1&&(M[a+1]=t[1]),M})));return}const l=[...m];l[a]=t,N(l),t?a<m.length-1&&!m[a+1]&&_(a+1):a>0&&_(a-1)},q=(0,o.useCallback)(async()=>{if(!v?.length){b(e?.codeEmptyError||"");return}if(v.length<6){b(e?.incorrectCodeError||"");return}const x=E?.data?.data?.active_token??E?.data?.active_token;x&&await k({token:x,code:v},{onSuccess:t=>{if(t.status>=200&&t.status<300)p("success"),f(e?.authSuccessMessage||""),u(!0),r?.user_id&&g(r.user_id),(0,s.gaTrack)({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(()=>{i()},3e3);else{const l=t?.data?.error_code??t?.error_code;l==="104"?(u(!0),r?.user_id&&g(r.user_id),(0,s.gaTrack)({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(()=>{i()},3e3)):b(l==="142"?e?.incorrectCodeError||"Invalid verification code.":l==="154"?e?.expiredCodeMessage||"":e?.sendEmailErrorMessage||"")}}});let a=setTimeout(()=>{p(""),f(""),clearTimeout(a)},5e3)},[v,e?.codeEmptyError,e?.authSuccessMessage,e?.incorrectCodeError,e?.expiredCodeMessage,e?.sendEmailErrorMessage,y,E,k,i,u,g,r]);return(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)("div",{children:[(0,n.jsx)(c.Text,{className:"text-[22px] font-extrabold leading-[120%] text-[#333] min-l:text-[24px] [&_abbr]:text-[#005d8e]",html:e?.authCodeTitle}),(0,n.jsx)(c.Text,{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%",d||"")})]}),(0,n.jsxs)("div",{className:"mt-6",children:[(0,n.jsx)(c.Text,{className:"mt-4 text-[14px] !font-bold font-semibold leading-[140%] text-[#333] min-l:mt-6",html:e?.enterActiveCodeText}),(0,n.jsx)("div",{className:"my-3 grid grid-cols-6 gap-2",children:m.map((x,a)=>(0,n.jsx)("div",{className:"col-span-1 aspect-1 text-[#555]",children:(0,n.jsx)("input",{ref:t=>{t&&(T.current[a]=t)},type:"tel",className:(0,s.classNames)("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",F&&"rounded-[12px]"),value:x,autoComplete:"false",autoCorrect:"false",spellCheck:"false",autoCapitalize:"false",onChange:t=>U(t,a),onFocus:()=>{_(a)},onPaste:t=>{const l=t.clipboardData.getData("text");if(!Number.isNaN(Number(l))){const h=l.split("").slice(0,6);N(h.concat(Array(6-h.length).fill(""))),h.length<=m.length&&_(h.length-1)}},onKeyDown:t=>{const{value:l}=t.target;t.key==="Backspace"&&!l&&a>0&&_(a-1)}},a)},a))}),I&&(0,n.jsx)(c.Text,{className:"mb-3 text-[14px] font-semibold leading-[120%] text-[#f84d4f]",html:I}),e?.authCodeContent&&(0,n.jsx)("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}})]}),(0,n.jsxs)("div",{className:"mt-4 min-l:mt-6",children:[(0,n.jsx)(c.Text,{className:"text-base font-semibold leading-[100%] text-[#333]",html:e?.authCodeReceiveText})," ",A?(0,n.jsx)(c.Text,{html:e?.retrieveText?.replace("%countdownTime%",K.toString()),className:"cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline"}):(0,n.jsx)(c.Text,{onClick:O,className:(0,s.classNames)("cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline",{"pointer-events-none":A||$}),html:e?.sendAgainText}),(0,n.jsx)(c.Button,{type:"submit",loading:j,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:q,children:e.buttonText})]}),(0,n.jsx)(R.Message,{status:W,message:z})]})}
|
|
2
2
|
//# sourceMappingURL=ActivatePanel.js.map
|