@anker-in/campaign-ui 0.5.0-beta.2 → 0.5.0-beta.20

package/src/components/memberPopup/MemberPopup.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { lazy, Suspense, useState, useCallback, useMemo } from 'react'
+import { lazy, Suspense, useState, useCallback, useEffect } from 'react'
 import { Picture } from '@anker-in/headless-ui'
-import { type HeadlessConfig, useHeadlessContext, classNames as cn } from '@anker-in/lib'
+import { gaTrack, type HeadlessConfig, useHeadlessContext, classNames as cn } from '@anker-in/lib'
 import {
   MemberPopupActionType,
   MemberPopupPageScope,
@@ -20,11 +20,11 @@ import { ROUNDED_BRANDS } from '../../constants'
 const EarnCredits = lazy(() => import('./panels/EarnCredits'))
 const ConsumeCredits = lazy(() => import('./panels/ConsumeCredits'))
 const Referral = lazy(() => import('./panels/Referral'))
-const CompleteProfile = lazy(() => import('./panels/EarnCredits/CompleteProfilePanel'))
-const Subscribe = lazy(() => import('./panels/EarnCredits/SubscribePanel'))
-const SubscribeEmail = lazy(() => import('./panels/EarnCredits/SubscribeEmailPanel'))
-const Activate = lazy(() => import('./panels/EarnCredits/ActivatePanel'))
-const RedeemCoupon = lazy(() => import('./panels/ConsumeCredits/RedeemCouponPanel'))
+const CompleteProfilePanel = lazy(() => import('./panels/EarnCredits/CompleteProfilePanel'))
+const ActivitiesSubscribePanel = lazy(() => import('./panels/ActivitiesSubscribePanel'))
+const SubscribeEmailPanel = lazy(() => import('./panels/EarnCredits/SubscribeEmailPanel'))
+const ActivatePanel = lazy(() => import('./panels/EarnCredits/ActivatePanel'))
+const RedeemCouponPanel = lazy(() => import('./panels/ConsumeCredits/RedeemCouponPanel'))
 
 type MemberPopupProps = MemberPopupContextValue & {
   headlessConfig: HeadlessConfig
@@ -33,11 +33,33 @@ type MemberPopupProps = MemberPopupContextValue & {
 }
 
 export function MemberPopup({ copy, bottomOffset = '24px', ...providerProps }: MemberPopupProps) {
-  return (
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    const config = copy.pageConfig
+    if (!config) {
+      setIsVisible(true)
+      return
+    }
+    const pathname = window.location.pathname
+    const matches = config.pages.some(page => pathname === page || pathname.startsWith(page + '/'))
+    switch (config.scope) {
+      case MemberPopupPageScope.Include:
+        setIsVisible(matches)
+        break
+      case MemberPopupPageScope.Exclude:
+        setIsVisible(!matches)
+        break
+      default:
+        setIsVisible(true)
+    }
+  }, [copy.pageConfig])
+
+  return isVisible ? (
     <MemberPopupProvider {...providerProps} earnCreditsCopy={copy.earnCredits}>
       <MemberPopupContent copy={copy} bottomOffset={bottomOffset} />
     </MemberPopupProvider>
-  )
+  ) : null
 }
 
 type MemberPopupContentProps = {
@@ -47,34 +69,14 @@ type MemberPopupContentProps = {
 
 function MemberPopupContent({ copy, bottomOffset }: MemberPopupContentProps) {
   const { profile, openSignInPopup, openSignUpPopup } = useMemberPopupContext()
-  const { brand, storeDomain } = useHeadlessContext()
+  const { brand } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
   const isLogin = !!profile
   const [isOpen, setIsOpen] = useState(false)
   const [viewStack, setViewStack] = useState<ViewPayload[]>([])
-  const [isSubscribeSuccess, setIsSubscribeSuccess] = useState(false)
-  const [isActivateSuccess, setIsActivateSuccess] = useState(false)
-  const [isProfileCompleteSuccess, setIsProfileCompleteSuccess] = useState(false)
 
   const currentView = viewStack[viewStack.length - 1] ?? null
 
-  const isVisible = useMemo(() => {
-    const config = copy.pageConfig
-    if (!config) return true
-    const pathname = typeof window !== 'undefined' ? window.location.pathname : ''
-    const matches = config.pages.some(page => pathname === page || pathname.startsWith(page + '/'))
-    switch (config.scope) {
-      case MemberPopupPageScope.Include:
-        return matches
-      case MemberPopupPageScope.Exclude:
-        return !matches
-      default:
-        return true
-    }
-  }, [copy.pageConfig])
-
-  if (!isVisible) return null
-
   const pushView = useCallback((view: ViewPayload) => {
     setViewStack(prev => [...prev, view])
   }, [])
@@ -83,21 +85,39 @@ function MemberPopupContent({ copy, bottomOffset }: MemberPopupContentProps) {
     setViewStack(prev => prev.slice(0, -1))
   }, [])
 
+  const MEMBER_POPUP_INFO = 'Member Floating Window'
+
+  function trackLpButton(position: string, buttonName: string) {
+    gaTrack({
+      event: 'ga4Event',
+      event_name: 'lp_button',
+      event_parameters: {
+        position,
+        button_name: buttonName,
+        info: MEMBER_POPUP_INFO,
+      },
+    })
+  }
+
   function handleAction(type: MemberPopupActionType, url?: string) {
     switch (type) {
       case MemberPopupActionType.ExternalLink:
         if (url) window.open(url, '_blank', 'noopener,noreferrer')
         break
       case MemberPopupActionType.OpenEarnCredits:
+        trackLpButton('home', 'earn_credits')
         pushView({ type: MemberPopupPanelType.EarnCredits })
         break
       case MemberPopupActionType.OpenConsumeCredits:
+        trackLpButton('home', 'consume_credits')
         pushView({ type: MemberPopupPanelType.ConsumeCredits })
         break
       case MemberPopupActionType.OpenReferral:
+        trackLpButton('home', 'referral')
         pushView({ type: MemberPopupPanelType.Referral })
         break
       case MemberPopupActionType.OpenSubscribe:
+        trackLpButton('home', 'subscribe')
         pushView({ type: MemberPopupPanelType.Subscribe })
         break
     }
@@ -111,167 +131,140 @@ function MemberPopupContent({ copy, bottomOffset }: MemberPopupContentProps) {
   return (
     <ViewStackContext.Provider value={{ pushView, popView }}>
       {isOpen && <div className="fixed inset-0 z-[998]" onClick={handleClose} />}
-      <div className="fixed right-0 z-[999] flex flex-col items-end pr-[16px]" style={{ bottom: bottomOffset }}>
+      <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: bottomOffset }}
+      >
         {isOpen && (
-          <div
-            className={cn(
-              'relative mb-[8px] flex w-[420px] max-w-[calc(100vw-32px)] min-h-[600px] flex-col overflow-hidden bg-white shadow-[0_8px_32px_rgba(0,0,0,0.16)] cmp-md:w-[358px] cmp-sm:w-[258px]',
-              rounded ? 'rounded-[12px]' : 'rounded-none'
-            )}
-            onClick={e => e.stopPropagation()}
-          >
-            <div className="absolute right-[-8px] top-[24px] size-0 border-y-8 border-l-8 border-y-transparent border-l-white" />
-            <div className="flex items-center justify-end pl-[10px] pr-[16px] pb-[8px] pt-[16px]">
-              {currentView !== null && (
+          <div className="relative mr-[12px] md:mr-[12px] md:mb-[12px]" onClick={e => e.stopPropagation()}>
+            <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" />
+            <div
+              className={cn(
+                '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]',
+                rounded ? 'rounded-[12px]' : 'rounded-none'
+              )}
+              style={{ maxHeight: 'min(80vh, 606px)' }}
+            >
+              <div className="flex items-center justify-end pl-[10px] pr-[16px] pb-[8px] pt-[16px]">
+                {currentView !== null && (
+                  <button
+                    className="mr-auto flex size-[24px] cursor-pointer items-center justify-center"
+                    onClick={popView}
+                    aria-label="Back"
+                  >
+                    <IconSwitch />
+                  </button>
+                )}
                 <button
-                  className="mr-auto flex size-[24px] cursor-pointer items-center justify-center"
-                  onClick={popView}
-                  aria-label="Back"
+                  className="flex size-[24px] cursor-pointer items-center justify-center"
+                  onClick={() => {
+                    trackLpButton('floating_button', 'close')
+                    handleClose()
+                  }}
+                  aria-label="Close"
                 >
-                  <IconSwitch />
+                  <IconClose />
                 </button>
-              )}
-              <button
-                className="flex size-[24px] cursor-pointer items-center justify-center"
-                onClick={handleClose}
-                aria-label="Close"
-              >
-                <IconClose />
-              </button>
-            </div>
-
-            <div
-              className="flex flex-1 flex-col gap-[12px] overflow-y-auto p-[16px]"
-              style={{ maxHeight: 'min(calc(80vh - 118px), 606px)' }}
-            >
-              {currentView === null && (
-                <>
-                  {(copy.title || copy.subtitle) && (
-                    <div className="flex flex-col gap-[4px]">
-                      {copy.title && (
-                        <h2 className="text-[24px] font-[700] leading-[1.2] text-[#080a0f]">{copy.title}</h2>
-                      )}
-                      {copy.subtitle && (
-                        <p className="text-[16px] font-[700] leading-snug text-[#4a4c56]">{copy.subtitle}</p>
-                      )}
-                    </div>
-                  )}
-                  {copy.list.map((item, i) => (
-                    <HomeCard key={i} item={item} onAction={handleAction} rounded={rounded} />
-                  ))}
-                </>
-              )}
+              </div>
 
-              {currentView !== null && (
-                <Suspense
-                  fallback={
-                    <div className="flex items-center justify-center py-[32px]">
-                      <div className="size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent" />
-                    </div>
-                  }
-                >
-                  {currentView.type === MemberPopupPanelType.EarnCredits && copy.earnCredits && (
-                    <EarnCredits
-                      copy={copy.earnCredits}
-                      onClose={popView}
-                      isSubscribeSuccess={isSubscribeSuccess}
-                      isActivateSuccess={isActivateSuccess}
-                      isProfileCompleteSuccess={isProfileCompleteSuccess}
-                      onSubscribeSuccess={() => setIsSubscribeSuccess(true)}
-                      onActivateSuccess={() => setIsActivateSuccess(true)}
-                      onProfileCompleteSuccess={() => setIsProfileCompleteSuccess(true)}
-                    />
-                  )}
-                  {currentView.type === MemberPopupPanelType.ConsumeCredits && copy.consumeCredits && (
-                    <ConsumeCredits copy={copy.consumeCredits} onClose={popView} />
-                  )}
-                  {currentView.type === MemberPopupPanelType.Referral && copy.referral && (
-                    <Referral copy={copy.referral} onClose={popView} />
-                  )}
-                  {currentView.type === MemberPopupPanelType.CompleteProfile && copy.earnCredits && (
-                    <CompleteProfile
-                      copy={copy.earnCredits.completeProfile}
-                      shopifyStoreDomain={storeDomain}
-                      onClose={popView}
-                      onSuccess={currentView.props?.onSuccess}
-                    />
-                  )}
-                  {currentView.type === MemberPopupPanelType.Subscribe && copy.subscribe && (
-                    <Subscribe
-                      copy={copy.subscribe}
-                      email={profile?.email}
-                      onClose={popView}
-                      onSuccess={currentView.props?.onSuccess}
-                    />
-                  )}
-                  {currentView.type === MemberPopupPanelType.SubscribeEmail && copy.earnCredits && (
-                    <SubscribeEmail
-                      copy={copy.earnCredits.subscribe}
-                      email={profile?.email}
-                      onClose={popView}
-                      onSuccess={currentView.props?.onSuccess}
-                    />
-                  )}
-                  {currentView.type === MemberPopupPanelType.Activate && copy.earnCredits && (
-                    <Activate
-                      copy={copy.earnCredits.authCodeActivate}
-                      onClose={popView}
-                      onSuccess={currentView.props?.onSuccess}
-                    />
-                  )}
-                  {currentView.type === MemberPopupPanelType.RedeemCoupon &&
-                    currentView.props &&
-                    copy.consumeCredits && (
-                      <RedeemCoupon
-                        itemTitle={currentView.props.itemTitle}
-                        itemCredits={currentView.props.itemCredits}
-                        itemImage={currentView.props.itemImage}
-                        itemValue={currentView.props.itemValue}
-                        itemOff={currentView.props.itemOff}
-                        redeemId={currentView.props.redeemId}
-                        userId={currentView.props.userId}
-                        alpcConfig={currentView.props.alpcConfig}
-                        copy={copy.consumeCredits.redeemModal}
-                        pointUnit={copy.consumeCredits.pointUnit}
-                        onClose={popView}
-                      />
+              <div className="flex flex-1 flex-col gap-[12px] overflow-y-auto p-[16px]">
+                {currentView === null && (
+                  <>
+                    {(copy.title || copy.subtitle) && (
+                      <div className="flex flex-col gap-[4px]">
+                        {copy.title && (
+                          <h2 className="text-[24px] font-[700] leading-[1.2] text-[#080a0f]">{copy.title}</h2>
+                        )}
+                        {copy.subtitle && (
+                          <p className="text-[16px] font-[700] leading-snug text-[#4a4c56]">{copy.subtitle}</p>
+                        )}
+                      </div>
                     )}
-                </Suspense>
-              )}
-            </div>
+                    {copy.list.map((item, i) => (
+                      <HomeCard key={i} item={item} onAction={handleAction} rounded={rounded} />
+                    ))}
+                  </>
+                )}
 
-            {copy.footer && !isLogin && (
-              <div className="border-t border-[#dadce0] p-[16px]">
-                <div className="flex items-center justify-between gap-[16px]">
-                  <div className="flex items-center gap-[4px]">
-                    <span className="text-[14px] font-[700] text-[#080a0f]">{copy.footer.loginHint}</span>
-                    <button
-                      className="cursor-pointer text-[14px] font-[700] text-[#080a0f] underline"
-                      onClick={openSignInPopup}
-                    >
-                      {copy.footer.loginLabel}
-                    </button>
-                  </div>
-                  <div className="flex shrink-0 items-center gap-[8px]">
-                    <button
-                      className={cn(
-                        'cursor-pointer border-[1.6px] border-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-[#080a0f]',
-                        rounded ? 'rounded-[4px]' : 'rounded-none'
+                {currentView !== null && (
+                  <Suspense
+                    fallback={
+                      <div className="flex items-center justify-center py-[32px]">
+                        <div className="size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent" />
+                      </div>
+                    }
+                  >
+                    {currentView.type === MemberPopupPanelType.EarnCredits && copy.earnCredits && (
+                      <EarnCredits copy={copy.earnCredits} />
+                    )}
+                    {currentView.type === MemberPopupPanelType.ConsumeCredits && copy.consumeCredits && (
+                      <ConsumeCredits copy={copy.consumeCredits} />
+                    )}
+                    {currentView.type === MemberPopupPanelType.Referral && copy.referral && (
+                      <Referral copy={copy.referral} onClose={popView} />
+                    )}
+                    {currentView.type === MemberPopupPanelType.CompleteProfile && copy.earnCredits && (
+                      <CompleteProfilePanel copy={copy.earnCredits.completeProfile} onClose={popView} />
+                    )}
+                    {currentView.type === MemberPopupPanelType.Subscribe && copy.activitiesSubscribe && (
+                      <ActivitiesSubscribePanel copy={copy.activitiesSubscribe} email={profile?.email} />
+                    )}
+                    {currentView.type === MemberPopupPanelType.SubscribeEmail && copy.earnCredits && (
+                      <SubscribeEmailPanel copy={copy.earnCredits.subscribe} email={profile?.email} onClose={popView} />
+                    )}
+                    {currentView.type === MemberPopupPanelType.Activate && copy.earnCredits && (
+                      <ActivatePanel copy={copy.earnCredits.authCodeActivate} onClose={popView} />
+                    )}
+                    {currentView.type === MemberPopupPanelType.RedeemCoupon &&
+                      currentView.props &&
+                      copy.consumeCredits && (
+                        <RedeemCouponPanel
+                          item={currentView.props as any}
+                          copy={copy.consumeCredits}
+                          onClose={popView}
+                        />
                       )}
-                      onClick={openSignUpPopup}
-                    >
-                      {copy.footer.joinLabel}
-                    </button>
+                  </Suspense>
+                )}
+              </div>
+
+              {copy.footer && !isLogin && (
+                <div className="border-t border-[#dadce0] p-[16px]">
+                  <div className="flex items-center justify-between gap-[16px]">
+                    <div className="inline gap-[4px]">
+                      <span className="text-[14px] font-[700] text-[#080a0f]">{copy.footer.loginHint}</span>
+                      <button
+                        className="cursor-pointer ml-[4px] text-[14px] font-bold text-[#080a0f] underline"
+                        onClick={openSignInPopup}
+                      >
+                        {copy.footer.loginLabel}
+                      </button>
+                    </div>
+                    <div className="flex shrink-0 items-center gap-[8px]">
+                      <button
+                        className={cn(
+                          'cursor-pointer border-[1.6px] border-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-[#080a0f]',
+                          rounded ? 'rounded-[4px]' : 'rounded-none'
+                        )}
+                        onClick={openSignUpPopup}
+                      >
+                        {copy.footer.joinLabel}
+                      </button>
+                    </div>
                   </div>
                 </div>
-              </div>
-            )}
+              )}
+            </div>
           </div>
         )}
 
         <button
-          className="flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg"
-          onClick={() => setIsOpen(prev => !prev)}
+          className="flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg md:ml-auto md:mr-[16px]"
+          onClick={() => {
+            const next = !isOpen
+            trackLpButton('floating_button', next ? 'open' : 'close')
+            setIsOpen(next)
+          }}
           aria-label={copy.triggerImg.alt ?? 'Open member popup'}
         >
           <Picture source={copy.triggerImg.url} alt={copy.triggerImg.alt ?? ''} className="size-[58px]" />

package/src/components/memberPopup/context/provider.tsx

@@ -1,9 +1,9 @@
-import { createContext, PropsWithChildren, useContext } from 'react'
+import { createContext, PropsWithChildren, useContext, useState } from 'react'
 import { HeadlessProvider, type HeadlessConfig } from '@anker-in/lib'
 import { RegistrationProvider } from '../../registration'
-import type { EarnCreditsCopy, MemberPopupContextValue } from '../type'
+import type { EarnCreditsCopy, MemberPopupContextValue, MemberPopupInternalContextValue } from '../type'
 
-export const MemberPopupContext = createContext<MemberPopupContextValue>({
+export const MemberPopupContext = createContext<MemberPopupInternalContextValue>({
   profile: null,
   isLoadingProfile: false,
   creditInfo: undefined,
@@ -16,6 +16,12 @@ export const MemberPopupContext = createContext<MemberPopupContextValue>({
     locale: '',
     appName: '',
   },
+  isSubscribeSuccess: false,
+  setIsSubscribeSuccess: () => {},
+  isActivateSuccess: false,
+  setIsActivateSuccess: () => {},
+  isProfileCompleteSuccess: false,
+  setIsProfileCompleteSuccess: () => {},
 })
 
 type MemberPopupProviderProps = MemberPopupContextValue & {
@@ -29,13 +35,27 @@ export function MemberPopupProvider({
   earnCreditsCopy,
   ...contextValue
 }: PropsWithChildren<MemberPopupProviderProps>) {
+  const [isSubscribeSuccess, setIsSubscribeSuccess] = useState(false)
+  const [isActivateSuccess, setIsActivateSuccess] = useState(false)
+  const [isProfileCompleteSuccess, setIsProfileCompleteSuccess] = useState(false)
+
   return (
     <HeadlessProvider headlessConfig={headlessConfig}>
       <RegistrationProvider
         email={contextValue.profile?.email}
         copy={{ authCodeActivate: earnCreditsCopy?.authCodeActivate }}
       >
-        <MemberPopupContext.Provider value={contextValue}>
+        <MemberPopupContext.Provider
+          value={{
+            ...contextValue,
+            isSubscribeSuccess,
+            setIsSubscribeSuccess,
+            isActivateSuccess,
+            setIsActivateSuccess,
+            isProfileCompleteSuccess,
+            setIsProfileCompleteSuccess,
+          }}
+        >
           {children}
         </MemberPopupContext.Provider>
       </RegistrationProvider>