@anker-in/campaign-ui 0.5.0-beta.13 → 0.5.0-beta.14
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/esm/components/memberPopup/MemberPopup.js +1 -1
- package/dist/esm/components/memberPopup/MemberPopup.js.map +3 -3
- package/package.json +1 -1
- package/src/components/memberPopup/MemberPopup.tsx +14 -7
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var L=Object.create;var
|
|
1
|
+
"use strict";"use client";var L=Object.create;var P=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var G=(e,i)=>{for(var p in i)P(e,p,{get:i[p],enumerable:!0})},O=(e,i,p,c)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of B(i))!q.call(e,n)&&n!==p&&P(e,n,{get:()=>i[n],enumerable:!(c=U(i,n))||c.enumerable});return e};var u=(e,i,p)=>(p=e!=null?L(W(e)):{},O(i||!e||!e.__esModule?P(p,"default",{value:e,enumerable:!0}):p,e)),J=e=>O(P({},"__esModule",{value:!0}),e);var ie={};G(ie,{MemberPopup:()=>se});module.exports=J(ie);var t=require("react/jsx-runtime"),o=require("react"),A=require("@anker-in/headless-ui"),C=require("@anker-in/lib"),s=require("./type"),V=require("./context/provider"),R=require("./context/provider"),E=require("./context/viewStack"),a=require("./icons"),H=require("../../constants");const K=(0,o.lazy)(()=>import("./panels/EarnCredits")),Q=(0,o.lazy)(()=>import("./panels/ConsumeCredits")),X=(0,o.lazy)(()=>import("./panels/Referral")),Y=(0,o.lazy)(()=>import("./panels/EarnCredits/CompleteProfilePanel")),Z=(0,o.lazy)(()=>import("./panels/ActivitiesSubscribePanel")),$=(0,o.lazy)(()=>import("./panels/EarnCredits/SubscribeEmailPanel")),ee=(0,o.lazy)(()=>import("./panels/EarnCredits/ActivatePanel")),te=(0,o.lazy)(()=>import("./panels/ConsumeCredits/RedeemCouponPanel"));function se({copy:e,bottomOffset:i="24px",...p}){const[c,n]=(0,o.useState)(!1);return(0,o.useEffect)(()=>{const d=e.pageConfig;if(!d){n(!0);return}const f=window.location.pathname,b=d.pages.some(v=>f===v||f.startsWith(v+"/"));switch(d.scope){case s.MemberPopupPageScope.Include:n(b);break;case s.MemberPopupPageScope.Exclude:n(!b);break;default:n(!0)}},[e.pageConfig]),console.log("isVisible",c),c?(0,t.jsx)(V.MemberPopupProvider,{...p,earnCreditsCopy:e.earnCredits,children:(0,t.jsx)(oe,{copy:e,bottomOffset:i})}):null}function oe({copy:e,bottomOffset:i}){const{profile:p,openSignInPopup:c,openSignUpPopup:n}=(0,R.useMemberPopupContext)(),{brand:d,storeDomain:f}=(0,C.useHeadlessContext)(),b=H.ROUNDED_BRANDS.includes(d),v=!!p,[h,N]=(0,o.useState)(!1),[w,S]=(0,o.useState)([]),[z,y]=(0,o.useState)(!1),[I,T]=(0,o.useState)(!1),[j,_]=(0,o.useState)(!1),[D,k]=(0,o.useState)(!1),r=w[w.length-1]??null,g=(0,o.useCallback)(l=>{S(x=>[...x,l])},[]),m=(0,o.useCallback)(()=>{S(l=>l.slice(0,-1))},[]);function F(l,x){switch(l){case s.MemberPopupActionType.ExternalLink:x&&window.open(x,"_blank","noopener,noreferrer");break;case s.MemberPopupActionType.OpenEarnCredits:g({type:s.MemberPopupPanelType.EarnCredits});break;case s.MemberPopupActionType.OpenConsumeCredits:g({type:s.MemberPopupPanelType.ConsumeCredits});break;case s.MemberPopupActionType.OpenReferral:g({type:s.MemberPopupPanelType.Referral});break;case s.MemberPopupActionType.OpenSubscribe:g({type:s.MemberPopupPanelType.Subscribe});break}}function M(){N(!1),S([]),k(!1)}return(0,t.jsxs)(E.ViewStackContext.Provider,{value:{pushView:g,popView:m},children:[h&&(0,t.jsx)("div",{className:"fixed inset-0 z-[998]",onClick:M}),(0,t.jsxs)("div",{className:"fixed right-0 z-[999] flex flex-row items-end pr-[16px] md:flex-col md:items-end md:right-0 md:w-screen md:pr-0 md:pl-0",style:{bottom:i},children:[h&&(0,t.jsxs)("div",{className:(0,C.classNames)("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]",b?"rounded-[12px]":"rounded-none"),style:{maxHeight:"min(80vh, 606px)"},onClick:l=>l.stopPropagation(),children:[(0,t.jsx)("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"}),(0,t.jsxs)("div",{className:"flex items-center justify-end pl-[10px] pr-[16px] pb-[8px] pt-[16px]",children:[r!==null&&(0,t.jsx)("button",{className:"mr-auto flex size-[24px] cursor-pointer items-center justify-center",onClick:m,"aria-label":"Back",children:(0,t.jsx)(a.IconSwitch,{})}),(0,t.jsx)("button",{className:"flex size-[24px] cursor-pointer items-center justify-center",onClick:M,"aria-label":"Close",children:(0,t.jsx)(a.IconClose,{})})]}),(0,t.jsxs)("div",{className:"flex flex-1 flex-col gap-[12px] overflow-y-auto p-[16px]",children:[r===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((l,x)=>(0,t.jsx)(re,{item:l,onAction:F,rounded:b},x))]}),r!==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:[r.type===s.MemberPopupPanelType.EarnCredits&&e.earnCredits&&(0,t.jsx)(K,{copy:e.earnCredits,onClose:m,isProfileCompleteSuccess:j,isSubscribeSuccess:z,isActivateSuccess:I}),r.type===s.MemberPopupPanelType.ConsumeCredits&&e.consumeCredits&&(0,t.jsx)(Q,{copy:e.consumeCredits,onClose:m,isActivateSuccess:I}),r.type===s.MemberPopupPanelType.Referral&&e.referral&&(0,t.jsx)(X,{copy:e.referral,onClose:m}),r.type===s.MemberPopupPanelType.CompleteProfile&&e.earnCredits&&(0,t.jsx)(Y,{copy:e.earnCredits.completeProfile,shopifyStoreDomain:f,onClose:m,onSuccess:()=>_(!0)}),r.type===s.MemberPopupPanelType.Subscribe&&e.activitiesSubscribe&&(0,t.jsx)(Z,{copy:e.activitiesSubscribe,email:p?.email,onSuccess:()=>y(!0),hideForm:D,onHideForm:()=>k(!0)}),r.type===s.MemberPopupPanelType.SubscribeEmail&&e.earnCredits&&(0,t.jsx)($,{copy:e.earnCredits.subscribe,email:p?.email,onClose:m,onSuccess:()=>y(!0)}),r.type===s.MemberPopupPanelType.Activate&&e.earnCredits&&(0,t.jsx)(ee,{copy:e.earnCredits.authCodeActivate,onClose:m,onSuccess:()=>{T(!0)}}),r.type===s.MemberPopupPanelType.RedeemCoupon&&r.props&&e.consumeCredits&&(0,t.jsx)(te,{itemTitle:r.props.itemTitle,itemCredits:r.props.itemCredits,itemImage:r.props.itemImage,itemValue:r.props.itemValue,itemOff:r.props.itemOff,itemRules:r.props.itemRules,redeemId:r.props.redeemId,userId:r.props.userId,alpcConfig:r.props.alpcConfig,copy:e.consumeCredits.redeemModal,pointUnit:e.consumeCredits.creditUnit,onClose:m})]})]}),e.footer&&!v&&(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:"flex items-center 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 text-[14px] font-[700] text-[#080a0f] underline",onClick:c,children:e.footer.loginLabel})]}),(0,t.jsx)("div",{className:"flex shrink-0 items-center gap-[8px]",children:(0,t.jsx)("button",{className:(0,C.classNames)("cursor-pointer border-[1.6px] border-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-[#080a0f]",b?"rounded-[4px]":"rounded-none"),onClick:n,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:()=>N(l=>!l),"aria-label":e.triggerImg.alt??"Open member popup",children:(0,t.jsx)(A.Picture,{source:e.triggerImg.url,alt:e.triggerImg.alt??"",className:"size-[58px]"})})]})]})}function re({item:e,onAction:i,rounded:p}){const c={[s.MemberPopupActionType.OpenEarnCredits]:a.IconCredit,[s.MemberPopupActionType.OpenConsumeCredits]:a.IconBag,[s.MemberPopupActionType.OpenReferral]:a.IconReferral,[s.MemberPopupActionType.OpenSubscribe]:a.IconSubscription};return(0,t.jsxs)("div",{className:(0,C.classNames)("flex flex-col gap-[16px] bg-[#f5f6f7] p-[16px]",p?"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((n,d)=>{const f=c[n.type];return(0,t.jsxs)("div",{children:[d>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:()=>i(n.type,n.url),children:[f&&(0,t.jsx)(f,{className:"size-[24px] shrink-0"}),(0,t.jsx)("span",{className:"flex-1 text-left text-[14px] font-[700] text-[#1e2024]",children:n.label}),(0,t.jsx)(a.IconArrow,{className:"size-[16px] shrink-0"})]})]},d)})})]})}
|
|
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, useMemo, useEffect } from 'react'\nimport { Picture } from '@anker-in/headless-ui'\nimport { 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 CompleteProfile = lazy(() => import('./panels/EarnCredits/CompleteProfilePanel'))\nconst ActivitiesSubscribe = lazy(() => import('./panels/ActivitiesSubscribePanel'))\nconst SubscribeEmail = lazy(() => import('./panels/EarnCredits/SubscribeEmailPanel'))\nconst Activate = lazy(() => import('./panels/EarnCredits/ActivatePanel'))\nconst RedeemCoupon = 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 = useMemo(() => {\n const config = copy.pageConfig\n if (!config) return true\n const pathname = typeof window !== 'undefined' ? window.location.pathname : ''\n const matches = config.pages.some(page => pathname === page || pathname.startsWith(page + '/'))\n switch (config.scope) {\n case MemberPopupPageScope.Include:\n return matches\n case MemberPopupPageScope.Exclude:\n return !matches\n default:\n return true\n }\n }, [copy.pageConfig])\n\n console.log('isVisible', isVisible)\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, storeDomain } = 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 const [isSubscribeSuccess, setIsSubscribeSuccess] = useState(false)\n const [isActivateSuccess, setIsActivateSuccess] = useState(false)\n const [isProfileCompleteSuccess, setIsProfileCompleteSuccess] = useState(false)\n const [isSubscribeFormHidden, setIsSubscribeFormHidden] = useState(false)\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 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 pushView({ type: MemberPopupPanelType.EarnCredits })\n break\n case MemberPopupActionType.OpenConsumeCredits:\n pushView({ type: MemberPopupPanelType.ConsumeCredits })\n break\n case MemberPopupActionType.OpenReferral:\n pushView({ type: MemberPopupPanelType.Referral })\n break\n case MemberPopupActionType.OpenSubscribe:\n pushView({ type: MemberPopupPanelType.Subscribe })\n break\n }\n }\n\n function handleClose() {\n setIsOpen(false)\n setViewStack([])\n setIsSubscribeFormHidden(false)\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-[16px] 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={handleClose}\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\n copy={copy.earnCredits}\n onClose={popView}\n isProfileCompleteSuccess={isProfileCompleteSuccess}\n isSubscribeSuccess={isSubscribeSuccess}\n isActivateSuccess={isActivateSuccess}\n />\n )}\n {currentView.type === MemberPopupPanelType.ConsumeCredits && copy.consumeCredits && (\n <ConsumeCredits\n copy={copy.consumeCredits}\n onClose={popView}\n isActivateSuccess={isActivateSuccess}\n />\n )}\n {currentView.type === MemberPopupPanelType.Referral && copy.referral && (\n <Referral copy={copy.referral} onClose={popView} />\n )}\n {currentView.type === MemberPopupPanelType.CompleteProfile && copy.earnCredits && (\n <CompleteProfile\n copy={copy.earnCredits.completeProfile}\n shopifyStoreDomain={storeDomain}\n onClose={popView}\n onSuccess={() => setIsProfileCompleteSuccess(true)}\n />\n )}\n {currentView.type === MemberPopupPanelType.Subscribe && copy.activitiesSubscribe && (\n <ActivitiesSubscribe\n copy={copy.activitiesSubscribe}\n email={profile?.email}\n onSuccess={() => setIsSubscribeSuccess(true)}\n hideForm={isSubscribeFormHidden}\n onHideForm={() => setIsSubscribeFormHidden(true)}\n />\n )}\n {currentView.type === MemberPopupPanelType.SubscribeEmail && copy.earnCredits && (\n <SubscribeEmail\n copy={copy.earnCredits.subscribe}\n email={profile?.email}\n onClose={popView}\n onSuccess={() => setIsSubscribeSuccess(true)}\n />\n )}\n {currentView.type === MemberPopupPanelType.Activate && copy.earnCredits && (\n <Activate\n copy={copy.earnCredits.authCodeActivate}\n onClose={popView}\n onSuccess={() => {\n setIsActivateSuccess(true)\n }}\n />\n )}\n {currentView.type === MemberPopupPanelType.RedeemCoupon &&\n currentView.props &&\n copy.consumeCredits && (\n <RedeemCoupon\n itemTitle={currentView.props.itemTitle}\n itemCredits={currentView.props.itemCredits}\n itemImage={currentView.props.itemImage}\n itemValue={currentView.props.itemValue}\n itemOff={currentView.props.itemOff}\n itemRules={currentView.props.itemRules}\n redeemId={currentView.props.redeemId}\n userId={currentView.props.userId}\n alpcConfig={currentView.props.alpcConfig}\n copy={copy.consumeCredits.redeemModal}\n pointUnit={copy.consumeCredits.creditUnit}\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=\"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={() => setIsOpen(prev => !prev)}\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": "ukBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,iBAAAE,KAAA,eAAAC,EAAAH,
|
|
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", "CompleteProfile", "ActivitiesSubscribe", "SubscribeEmail", "Activate", "RedeemCoupon", "copy", "bottomOffset", "providerProps", "isVisible", "config", "pathname", "matches", "page", "MemberPopupContent", "profile", "openSignInPopup", "openSignUpPopup", "brand", "storeDomain", "rounded", "isLogin", "isOpen", "setIsOpen", "viewStack", "setViewStack", "isSubscribeSuccess", "setIsSubscribeSuccess", "isActivateSuccess", "setIsActivateSuccess", "isProfileCompleteSuccess", "setIsProfileCompleteSuccess", "isSubscribeFormHidden", "setIsSubscribeFormHidden", "currentView", "pushView", "view", "prev", "popView", "handleAction", "type", "url", "handleClose", "cn", "e", "item", "i", "HomeCard", "onAction", "ACTION_ICON", "link", "IconComponent"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport { lazy, Suspense, useState, useCallback, useEffect } from 'react'\nimport { Picture } from '@anker-in/headless-ui'\nimport { 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 CompleteProfile = lazy(() => import('./panels/EarnCredits/CompleteProfilePanel'))\nconst ActivitiesSubscribe = lazy(() => import('./panels/ActivitiesSubscribePanel'))\nconst SubscribeEmail = lazy(() => import('./panels/EarnCredits/SubscribeEmailPanel'))\nconst Activate = lazy(() => import('./panels/EarnCredits/ActivatePanel'))\nconst RedeemCoupon = 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 console.log('isVisible', isVisible)\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, storeDomain } = 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 const [isSubscribeSuccess, setIsSubscribeSuccess] = useState(false)\n const [isActivateSuccess, setIsActivateSuccess] = useState(false)\n const [isProfileCompleteSuccess, setIsProfileCompleteSuccess] = useState(false)\n const [isSubscribeFormHidden, setIsSubscribeFormHidden] = useState(false)\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 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 pushView({ type: MemberPopupPanelType.EarnCredits })\n break\n case MemberPopupActionType.OpenConsumeCredits:\n pushView({ type: MemberPopupPanelType.ConsumeCredits })\n break\n case MemberPopupActionType.OpenReferral:\n pushView({ type: MemberPopupPanelType.Referral })\n break\n case MemberPopupActionType.OpenSubscribe:\n pushView({ type: MemberPopupPanelType.Subscribe })\n break\n }\n }\n\n function handleClose() {\n setIsOpen(false)\n setViewStack([])\n setIsSubscribeFormHidden(false)\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-[16px] 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={handleClose}\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\n copy={copy.earnCredits}\n onClose={popView}\n isProfileCompleteSuccess={isProfileCompleteSuccess}\n isSubscribeSuccess={isSubscribeSuccess}\n isActivateSuccess={isActivateSuccess}\n />\n )}\n {currentView.type === MemberPopupPanelType.ConsumeCredits && copy.consumeCredits && (\n <ConsumeCredits\n copy={copy.consumeCredits}\n onClose={popView}\n isActivateSuccess={isActivateSuccess}\n />\n )}\n {currentView.type === MemberPopupPanelType.Referral && copy.referral && (\n <Referral copy={copy.referral} onClose={popView} />\n )}\n {currentView.type === MemberPopupPanelType.CompleteProfile && copy.earnCredits && (\n <CompleteProfile\n copy={copy.earnCredits.completeProfile}\n shopifyStoreDomain={storeDomain}\n onClose={popView}\n onSuccess={() => setIsProfileCompleteSuccess(true)}\n />\n )}\n {currentView.type === MemberPopupPanelType.Subscribe && copy.activitiesSubscribe && (\n <ActivitiesSubscribe\n copy={copy.activitiesSubscribe}\n email={profile?.email}\n onSuccess={() => setIsSubscribeSuccess(true)}\n hideForm={isSubscribeFormHidden}\n onHideForm={() => setIsSubscribeFormHidden(true)}\n />\n )}\n {currentView.type === MemberPopupPanelType.SubscribeEmail && copy.earnCredits && (\n <SubscribeEmail\n copy={copy.earnCredits.subscribe}\n email={profile?.email}\n onClose={popView}\n onSuccess={() => setIsSubscribeSuccess(true)}\n />\n )}\n {currentView.type === MemberPopupPanelType.Activate && copy.earnCredits && (\n <Activate\n copy={copy.earnCredits.authCodeActivate}\n onClose={popView}\n onSuccess={() => {\n setIsActivateSuccess(true)\n }}\n />\n )}\n {currentView.type === MemberPopupPanelType.RedeemCoupon &&\n currentView.props &&\n copy.consumeCredits && (\n <RedeemCoupon\n itemTitle={currentView.props.itemTitle}\n itemCredits={currentView.props.itemCredits}\n itemImage={currentView.props.itemImage}\n itemValue={currentView.props.itemValue}\n itemOff={currentView.props.itemOff}\n itemRules={currentView.props.itemRules}\n redeemId={currentView.props.redeemId}\n userId={currentView.props.userId}\n alpcConfig={currentView.props.alpcConfig}\n copy={copy.consumeCredits.redeemModal}\n pointUnit={copy.consumeCredits.creditUnit}\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=\"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={() => setIsOpen(prev => !prev)}\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", "CompleteProfile", "ActivitiesSubscribe", "SubscribeEmail", "Activate", "RedeemCoupon", "copy", "bottomOffset", "providerProps", "isVisible", "setIsVisible", "config", "pathname", "matches", "page", "MemberPopupContent", "profile", "openSignInPopup", "openSignUpPopup", "brand", "storeDomain", "rounded", "isLogin", "isOpen", "setIsOpen", "viewStack", "setViewStack", "isSubscribeSuccess", "setIsSubscribeSuccess", "isActivateSuccess", "setIsActivateSuccess", "isProfileCompleteSuccess", "setIsProfileCompleteSuccess", "isSubscribeFormHidden", "setIsSubscribeFormHidden", "currentView", "pushView", "view", "prev", "popView", "handleAction", "type", "url", "handleClose", "cn", "e", "item", "i", "HomeCard", "onAction", "ACTION_ICON", "link", "IconComponent"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as ae,jsx as t,jsxs as o}from"react/jsx-runtime";import{lazy as
|
|
1
|
+
"use client";import{Fragment as ae,jsx as t,jsxs as o}from"react/jsx-runtime";import{lazy as c,Suspense as j,useState as u,useCallback as O,useEffect as _}from"react";import{Picture as D}from"@anker-in/headless-ui";import{useHeadlessContext as F,classNames as S}from"@anker-in/lib";import{MemberPopupActionType as a,MemberPopupPageScope as A,MemberPopupPanelType as r}from"./type";import{MemberPopupProvider as L}from"./context/provider";import{useMemberPopupContext as U}from"./context/provider";import{ViewStackContext as B}from"./context/viewStack";import{IconClose as W,IconArrow as q,IconCredit as G,IconBag as J,IconReferral as K,IconSwitch as Q,IconSubscription as X}from"./icons";import{ROUNDED_BRANDS as Y}from"../../constants";const Z=c(()=>import("./panels/EarnCredits")),$=c(()=>import("./panels/ConsumeCredits")),ee=c(()=>import("./panels/Referral")),te=c(()=>import("./panels/EarnCredits/CompleteProfilePanel")),se=c(()=>import("./panels/ActivitiesSubscribePanel")),oe=c(()=>import("./panels/EarnCredits/SubscribeEmailPanel")),re=c(()=>import("./panels/EarnCredits/ActivatePanel")),ie=c(()=>import("./panels/ConsumeCredits/RedeemCouponPanel"));function ge({copy:e,bottomOffset:C="24px",...m}){const[f,i]=u(!1);return _(()=>{const l=e.pageConfig;if(!l){i(!0);return}const d=window.location.pathname,b=l.pages.some(v=>d===v||d.startsWith(v+"/"));switch(l.scope){case A.Include:i(b);break;case A.Exclude:i(!b);break;default:i(!0)}},[e.pageConfig]),console.log("isVisible",f),f?t(L,{...m,earnCreditsCopy:e.earnCredits,children:t(ne,{copy:e,bottomOffset:C})}):null}function ne({copy:e,bottomOffset:C}){const{profile:m,openSignInPopup:f,openSignUpPopup:i}=U(),{brand:l,storeDomain:d}=F(),b=Y.includes(l),v=!!m,[h,N]=u(!1),[w,P]=u([]),[V,y]=u(!1),[I,R]=u(!1),[E,H]=u(!1),[z,k]=u(!1),s=w[w.length-1]??null,g=O(n=>{P(x=>[...x,n])},[]),p=O(()=>{P(n=>n.slice(0,-1))},[]);function T(n,x){switch(n){case a.ExternalLink:x&&window.open(x,"_blank","noopener,noreferrer");break;case a.OpenEarnCredits:g({type:r.EarnCredits});break;case a.OpenConsumeCredits:g({type:r.ConsumeCredits});break;case a.OpenReferral:g({type:r.Referral});break;case a.OpenSubscribe:g({type:r.Subscribe});break}}function M(){N(!1),P([]),k(!1)}return o(B.Provider,{value:{pushView:g,popView:p},children:[h&&t("div",{className:"fixed inset-0 z-[998]",onClick:M}),o("div",{className:"fixed right-0 z-[999] flex flex-row items-end pr-[16px] md:flex-col md:items-end md:right-0 md:w-screen md:pr-0 md:pl-0",style:{bottom:C},children:[h&&o("div",{className:S("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]",b?"rounded-[12px]":"rounded-none"),style:{maxHeight:"min(80vh, 606px)"},onClick:n=>n.stopPropagation(),children:[t("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"}),o("div",{className:"flex items-center justify-end pl-[10px] pr-[16px] pb-[8px] pt-[16px]",children:[s!==null&&t("button",{className:"mr-auto flex size-[24px] cursor-pointer items-center justify-center",onClick:p,"aria-label":"Back",children:t(Q,{})}),t("button",{className:"flex size-[24px] cursor-pointer items-center justify-center",onClick:M,"aria-label":"Close",children:t(W,{})})]}),o("div",{className:"flex flex-1 flex-col gap-[12px] overflow-y-auto p-[16px]",children:[s===null&&o(ae,{children:[(e.title||e.subtitle)&&o("div",{className:"flex flex-col gap-[4px]",children:[e.title&&t("h2",{className:"text-[24px] font-[700] leading-[1.2] text-[#080a0f]",children:e.title}),e.subtitle&&t("p",{className:"text-[16px] font-[700] leading-snug text-[#4a4c56]",children:e.subtitle})]}),e.list.map((n,x)=>t(pe,{item:n,onAction:T,rounded:b},x))]}),s!==null&&o(j,{fallback:t("div",{className:"flex items-center justify-center py-[32px]",children:t("div",{className:"size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent"})}),children:[s.type===r.EarnCredits&&e.earnCredits&&t(Z,{copy:e.earnCredits,onClose:p,isProfileCompleteSuccess:E,isSubscribeSuccess:V,isActivateSuccess:I}),s.type===r.ConsumeCredits&&e.consumeCredits&&t($,{copy:e.consumeCredits,onClose:p,isActivateSuccess:I}),s.type===r.Referral&&e.referral&&t(ee,{copy:e.referral,onClose:p}),s.type===r.CompleteProfile&&e.earnCredits&&t(te,{copy:e.earnCredits.completeProfile,shopifyStoreDomain:d,onClose:p,onSuccess:()=>H(!0)}),s.type===r.Subscribe&&e.activitiesSubscribe&&t(se,{copy:e.activitiesSubscribe,email:m?.email,onSuccess:()=>y(!0),hideForm:z,onHideForm:()=>k(!0)}),s.type===r.SubscribeEmail&&e.earnCredits&&t(oe,{copy:e.earnCredits.subscribe,email:m?.email,onClose:p,onSuccess:()=>y(!0)}),s.type===r.Activate&&e.earnCredits&&t(re,{copy:e.earnCredits.authCodeActivate,onClose:p,onSuccess:()=>{R(!0)}}),s.type===r.RedeemCoupon&&s.props&&e.consumeCredits&&t(ie,{itemTitle:s.props.itemTitle,itemCredits:s.props.itemCredits,itemImage:s.props.itemImage,itemValue:s.props.itemValue,itemOff:s.props.itemOff,itemRules:s.props.itemRules,redeemId:s.props.redeemId,userId:s.props.userId,alpcConfig:s.props.alpcConfig,copy:e.consumeCredits.redeemModal,pointUnit:e.consumeCredits.creditUnit,onClose:p})]})]}),e.footer&&!v&&t("div",{className:"border-t border-[#dadce0] p-[16px]",children:o("div",{className:"flex items-center justify-between gap-[16px]",children:[o("div",{className:"flex items-center gap-[4px]",children:[t("span",{className:"text-[14px] font-[700] text-[#080a0f]",children:e.footer.loginHint}),t("button",{className:"cursor-pointer text-[14px] font-[700] text-[#080a0f] underline",onClick:f,children:e.footer.loginLabel})]}),t("div",{className:"flex shrink-0 items-center gap-[8px]",children:t("button",{className:S("cursor-pointer border-[1.6px] border-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-[#080a0f]",b?"rounded-[4px]":"rounded-none"),onClick:i,children:e.footer.joinLabel})})]})})]}),t("button",{className:"flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg md:ml-auto md:mr-[16px]",onClick:()=>N(n=>!n),"aria-label":e.triggerImg.alt??"Open member popup",children:t(D,{source:e.triggerImg.url,alt:e.triggerImg.alt??"",className:"size-[58px]"})})]})]})}function pe({item:e,onAction:C,rounded:m}){const f={[a.OpenEarnCredits]:G,[a.OpenConsumeCredits]:J,[a.OpenReferral]:K,[a.OpenSubscribe]:X};return o("div",{className:S("flex flex-col gap-[16px] bg-[#f5f6f7] p-[16px]",m?"rounded-[8px]":"rounded-none"),children:[o("div",{className:"flex flex-col gap-[4px]",children:[t("h3",{className:"text-[20px] font-[700] leading-[1.2] text-[#1e2024]",children:e.title}),e.description&&t("p",{className:"text-[14px] font-[700] leading-[1.43] text-[#1e2024]",children:e.description})]}),t("div",{className:"flex flex-col gap-[16px]",children:e.links.map((i,l)=>{const d=f[i.type];return o("div",{children:[l>0&&t("div",{className:"mb-[16px] h-px bg-[#dadce0]"}),o("button",{className:"flex w-full cursor-pointer items-center gap-[12px]",onClick:()=>C(i.type,i.url),children:[d&&t(d,{className:"size-[24px] shrink-0"}),t("span",{className:"flex-1 text-left text-[14px] font-[700] text-[#1e2024]",children:i.label}),t(q,{className:"size-[16px] shrink-0"})]})]},l)})})]})}export{ge as MemberPopup};
|
|
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, useMemo, useEffect } from 'react'\nimport { Picture } from '@anker-in/headless-ui'\nimport { 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 CompleteProfile = lazy(() => import('./panels/EarnCredits/CompleteProfilePanel'))\nconst ActivitiesSubscribe = lazy(() => import('./panels/ActivitiesSubscribePanel'))\nconst SubscribeEmail = lazy(() => import('./panels/EarnCredits/SubscribeEmailPanel'))\nconst Activate = lazy(() => import('./panels/EarnCredits/ActivatePanel'))\nconst RedeemCoupon = 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 = useMemo(() => {\n const config = copy.pageConfig\n if (!config) return true\n const pathname = typeof window !== 'undefined' ? window.location.pathname : ''\n const matches = config.pages.some(page => pathname === page || pathname.startsWith(page + '/'))\n switch (config.scope) {\n case MemberPopupPageScope.Include:\n return matches\n case MemberPopupPageScope.Exclude:\n return !matches\n default:\n return true\n }\n }, [copy.pageConfig])\n\n console.log('isVisible', isVisible)\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, storeDomain } = 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 const [isSubscribeSuccess, setIsSubscribeSuccess] = useState(false)\n const [isActivateSuccess, setIsActivateSuccess] = useState(false)\n const [isProfileCompleteSuccess, setIsProfileCompleteSuccess] = useState(false)\n const [isSubscribeFormHidden, setIsSubscribeFormHidden] = useState(false)\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 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 pushView({ type: MemberPopupPanelType.EarnCredits })\n break\n case MemberPopupActionType.OpenConsumeCredits:\n pushView({ type: MemberPopupPanelType.ConsumeCredits })\n break\n case MemberPopupActionType.OpenReferral:\n pushView({ type: MemberPopupPanelType.Referral })\n break\n case MemberPopupActionType.OpenSubscribe:\n pushView({ type: MemberPopupPanelType.Subscribe })\n break\n }\n }\n\n function handleClose() {\n setIsOpen(false)\n setViewStack([])\n setIsSubscribeFormHidden(false)\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-[16px] 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={handleClose}\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\n copy={copy.earnCredits}\n onClose={popView}\n isProfileCompleteSuccess={isProfileCompleteSuccess}\n isSubscribeSuccess={isSubscribeSuccess}\n isActivateSuccess={isActivateSuccess}\n />\n )}\n {currentView.type === MemberPopupPanelType.ConsumeCredits && copy.consumeCredits && (\n <ConsumeCredits\n copy={copy.consumeCredits}\n onClose={popView}\n isActivateSuccess={isActivateSuccess}\n />\n )}\n {currentView.type === MemberPopupPanelType.Referral && copy.referral && (\n <Referral copy={copy.referral} onClose={popView} />\n )}\n {currentView.type === MemberPopupPanelType.CompleteProfile && copy.earnCredits && (\n <CompleteProfile\n copy={copy.earnCredits.completeProfile}\n shopifyStoreDomain={storeDomain}\n onClose={popView}\n onSuccess={() => setIsProfileCompleteSuccess(true)}\n />\n )}\n {currentView.type === MemberPopupPanelType.Subscribe && copy.activitiesSubscribe && (\n <ActivitiesSubscribe\n copy={copy.activitiesSubscribe}\n email={profile?.email}\n onSuccess={() => setIsSubscribeSuccess(true)}\n hideForm={isSubscribeFormHidden}\n onHideForm={() => setIsSubscribeFormHidden(true)}\n />\n )}\n {currentView.type === MemberPopupPanelType.SubscribeEmail && copy.earnCredits && (\n <SubscribeEmail\n copy={copy.earnCredits.subscribe}\n email={profile?.email}\n onClose={popView}\n onSuccess={() => setIsSubscribeSuccess(true)}\n />\n )}\n {currentView.type === MemberPopupPanelType.Activate && copy.earnCredits && (\n <Activate\n copy={copy.earnCredits.authCodeActivate}\n onClose={popView}\n onSuccess={() => {\n setIsActivateSuccess(true)\n }}\n />\n )}\n {currentView.type === MemberPopupPanelType.RedeemCoupon &&\n currentView.props &&\n copy.consumeCredits && (\n <RedeemCoupon\n itemTitle={currentView.props.itemTitle}\n itemCredits={currentView.props.itemCredits}\n itemImage={currentView.props.itemImage}\n itemValue={currentView.props.itemValue}\n itemOff={currentView.props.itemOff}\n itemRules={currentView.props.itemRules}\n redeemId={currentView.props.redeemId}\n userId={currentView.props.userId}\n alpcConfig={currentView.props.alpcConfig}\n copy={copy.consumeCredits.redeemModal}\n pointUnit={copy.consumeCredits.creditUnit}\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=\"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={() => setIsOpen(prev => !prev)}\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": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "lazy", "Suspense", "useState", "useCallback", "
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport { lazy, Suspense, useState, useCallback, useEffect } from 'react'\nimport { Picture } from '@anker-in/headless-ui'\nimport { 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 CompleteProfile = lazy(() => import('./panels/EarnCredits/CompleteProfilePanel'))\nconst ActivitiesSubscribe = lazy(() => import('./panels/ActivitiesSubscribePanel'))\nconst SubscribeEmail = lazy(() => import('./panels/EarnCredits/SubscribeEmailPanel'))\nconst Activate = lazy(() => import('./panels/EarnCredits/ActivatePanel'))\nconst RedeemCoupon = 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 console.log('isVisible', isVisible)\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, storeDomain } = 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 const [isSubscribeSuccess, setIsSubscribeSuccess] = useState(false)\n const [isActivateSuccess, setIsActivateSuccess] = useState(false)\n const [isProfileCompleteSuccess, setIsProfileCompleteSuccess] = useState(false)\n const [isSubscribeFormHidden, setIsSubscribeFormHidden] = useState(false)\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 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 pushView({ type: MemberPopupPanelType.EarnCredits })\n break\n case MemberPopupActionType.OpenConsumeCredits:\n pushView({ type: MemberPopupPanelType.ConsumeCredits })\n break\n case MemberPopupActionType.OpenReferral:\n pushView({ type: MemberPopupPanelType.Referral })\n break\n case MemberPopupActionType.OpenSubscribe:\n pushView({ type: MemberPopupPanelType.Subscribe })\n break\n }\n }\n\n function handleClose() {\n setIsOpen(false)\n setViewStack([])\n setIsSubscribeFormHidden(false)\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-[16px] 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={handleClose}\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\n copy={copy.earnCredits}\n onClose={popView}\n isProfileCompleteSuccess={isProfileCompleteSuccess}\n isSubscribeSuccess={isSubscribeSuccess}\n isActivateSuccess={isActivateSuccess}\n />\n )}\n {currentView.type === MemberPopupPanelType.ConsumeCredits && copy.consumeCredits && (\n <ConsumeCredits\n copy={copy.consumeCredits}\n onClose={popView}\n isActivateSuccess={isActivateSuccess}\n />\n )}\n {currentView.type === MemberPopupPanelType.Referral && copy.referral && (\n <Referral copy={copy.referral} onClose={popView} />\n )}\n {currentView.type === MemberPopupPanelType.CompleteProfile && copy.earnCredits && (\n <CompleteProfile\n copy={copy.earnCredits.completeProfile}\n shopifyStoreDomain={storeDomain}\n onClose={popView}\n onSuccess={() => setIsProfileCompleteSuccess(true)}\n />\n )}\n {currentView.type === MemberPopupPanelType.Subscribe && copy.activitiesSubscribe && (\n <ActivitiesSubscribe\n copy={copy.activitiesSubscribe}\n email={profile?.email}\n onSuccess={() => setIsSubscribeSuccess(true)}\n hideForm={isSubscribeFormHidden}\n onHideForm={() => setIsSubscribeFormHidden(true)}\n />\n )}\n {currentView.type === MemberPopupPanelType.SubscribeEmail && copy.earnCredits && (\n <SubscribeEmail\n copy={copy.earnCredits.subscribe}\n email={profile?.email}\n onClose={popView}\n onSuccess={() => setIsSubscribeSuccess(true)}\n />\n )}\n {currentView.type === MemberPopupPanelType.Activate && copy.earnCredits && (\n <Activate\n copy={copy.earnCredits.authCodeActivate}\n onClose={popView}\n onSuccess={() => {\n setIsActivateSuccess(true)\n }}\n />\n )}\n {currentView.type === MemberPopupPanelType.RedeemCoupon &&\n currentView.props &&\n copy.consumeCredits && (\n <RedeemCoupon\n itemTitle={currentView.props.itemTitle}\n itemCredits={currentView.props.itemCredits}\n itemImage={currentView.props.itemImage}\n itemValue={currentView.props.itemValue}\n itemOff={currentView.props.itemOff}\n itemRules={currentView.props.itemRules}\n redeemId={currentView.props.redeemId}\n userId={currentView.props.userId}\n alpcConfig={currentView.props.alpcConfig}\n copy={copy.consumeCredits.redeemModal}\n pointUnit={copy.consumeCredits.creditUnit}\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=\"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={() => setIsOpen(prev => !prev)}\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": ["Fragment", "jsx", "jsxs", "lazy", "Suspense", "useState", "useCallback", "useEffect", "Picture", "useHeadlessContext", "cn", "MemberPopupActionType", "MemberPopupPageScope", "MemberPopupPanelType", "MemberPopupProvider", "useMemberPopupContext", "ViewStackContext", "IconClose", "IconArrow", "IconCredit", "IconBag", "IconReferral", "IconSwitch", "IconSubscription", "ROUNDED_BRANDS", "EarnCredits", "ConsumeCredits", "Referral", "CompleteProfile", "ActivitiesSubscribe", "SubscribeEmail", "Activate", "RedeemCoupon", "MemberPopup", "copy", "bottomOffset", "providerProps", "isVisible", "setIsVisible", "config", "pathname", "matches", "page", "MemberPopupContent", "profile", "openSignInPopup", "openSignUpPopup", "brand", "storeDomain", "rounded", "isLogin", "isOpen", "setIsOpen", "viewStack", "setViewStack", "isSubscribeSuccess", "setIsSubscribeSuccess", "isActivateSuccess", "setIsActivateSuccess", "isProfileCompleteSuccess", "setIsProfileCompleteSuccess", "isSubscribeFormHidden", "setIsSubscribeFormHidden", "currentView", "pushView", "view", "prev", "popView", "handleAction", "type", "url", "handleClose", "e", "item", "i", "HomeCard", "onAction", "ACTION_ICON", "link", "IconComponent"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client'
|
|
2
2
|
|
|
3
|
-
import { lazy, Suspense, useState, useCallback,
|
|
3
|
+
import { lazy, Suspense, useState, useCallback, useEffect } from 'react'
|
|
4
4
|
import { Picture } from '@anker-in/headless-ui'
|
|
5
5
|
import { type HeadlessConfig, useHeadlessContext, classNames as cn } from '@anker-in/lib'
|
|
6
6
|
import {
|
|
@@ -33,18 +33,25 @@ type MemberPopupProps = MemberPopupContextValue & {
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
export function MemberPopup({ copy, bottomOffset = '24px', ...providerProps }: MemberPopupProps) {
|
|
36
|
-
const isVisible =
|
|
36
|
+
const [isVisible, setIsVisible] = useState(false)
|
|
37
|
+
|
|
38
|
+
useEffect(() => {
|
|
37
39
|
const config = copy.pageConfig
|
|
38
|
-
if (!config)
|
|
39
|
-
|
|
40
|
+
if (!config) {
|
|
41
|
+
setIsVisible(true)
|
|
42
|
+
return
|
|
43
|
+
}
|
|
44
|
+
const pathname = window.location.pathname
|
|
40
45
|
const matches = config.pages.some(page => pathname === page || pathname.startsWith(page + '/'))
|
|
41
46
|
switch (config.scope) {
|
|
42
47
|
case MemberPopupPageScope.Include:
|
|
43
|
-
|
|
48
|
+
setIsVisible(matches)
|
|
49
|
+
break
|
|
44
50
|
case MemberPopupPageScope.Exclude:
|
|
45
|
-
|
|
51
|
+
setIsVisible(!matches)
|
|
52
|
+
break
|
|
46
53
|
default:
|
|
47
|
-
|
|
54
|
+
setIsVisible(true)
|
|
48
55
|
}
|
|
49
56
|
}, [copy.pageConfig])
|
|
50
57
|
|