@anker-in/campaign-ui 0.5.0-beta.11 → 0.5.0-beta.13

package/src/components/memberPopup/MemberPopup.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { lazy, Suspense, useState, useCallback, useMemo } from 'react'
+import { lazy, Suspense, useState, useCallback, useMemo, useEffect } from 'react'
 import { Picture } from '@anker-in/headless-ui'
 import { type HeadlessConfig, useHeadlessContext, classNames as cn } from '@anker-in/lib'
 import {
@@ -33,11 +33,28 @@ type MemberPopupProps = MemberPopupContextValue & {
 }
 
 export function MemberPopup({ copy, bottomOffset = '24px', ...providerProps }: MemberPopupProps) {
-  return (
+  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])
+
+  console.log('isVisible', isVisible)
+
+  return isVisible ? (
     <MemberPopupProvider {...providerProps} earnCreditsCopy={copy.earnCredits}>
       <MemberPopupContent copy={copy} bottomOffset={bottomOffset} />
     </MemberPopupProvider>
-  )
+  ) : null
 }
 
 type MemberPopupContentProps = {
@@ -59,21 +76,6 @@ function MemberPopupContent({ copy, bottomOffset }: MemberPopupContentProps) {
 
   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])
-
   const pushView = useCallback((view: ViewPayload) => {
     setViewStack(prev => [...prev, view])
   }, [])
@@ -82,9 +84,6 @@ function MemberPopupContent({ copy, bottomOffset }: MemberPopupContentProps) {
     setViewStack(prev => prev.slice(0, -1))
   }, [])
 
-  console.log('isVisible', isVisible)
-  if (!isVisible) return null
-
   function handleAction(type: MemberPopupActionType, url?: string) {
     switch (type) {
       case MemberPopupActionType.ExternalLink:
@@ -178,12 +177,9 @@ function MemberPopupContent({ copy, bottomOffset }: MemberPopupContentProps) {
                     <EarnCredits
                       copy={copy.earnCredits}
                       onClose={popView}
+                      isProfileCompleteSuccess={isProfileCompleteSuccess}
                       isSubscribeSuccess={isSubscribeSuccess}
                       isActivateSuccess={isActivateSuccess}
-                      isProfileCompleteSuccess={isProfileCompleteSuccess}
-                      onSubscribeSuccess={() => setIsSubscribeSuccess(true)}
-                      onActivateSuccess={() => setIsActivateSuccess(true)}
-                      onProfileCompleteSuccess={() => setIsProfileCompleteSuccess(true)}
                     />
                   )}
                   {currentView.type === MemberPopupPanelType.ConsumeCredits && copy.consumeCredits && (
@@ -201,14 +197,14 @@ function MemberPopupContent({ copy, bottomOffset }: MemberPopupContentProps) {
                       copy={copy.earnCredits.completeProfile}
                       shopifyStoreDomain={storeDomain}
                       onClose={popView}
-                      onSuccess={currentView.props?.onSuccess}
+                      onSuccess={() => setIsProfileCompleteSuccess(true)}
                     />
                   )}
                   {currentView.type === MemberPopupPanelType.Subscribe && copy.activitiesSubscribe && (
                     <ActivitiesSubscribe
                       copy={copy.activitiesSubscribe}
                       email={profile?.email}
-                      onSuccess={currentView.props?.onSuccess}
+                      onSuccess={() => setIsSubscribeSuccess(true)}
                       hideForm={isSubscribeFormHidden}
                       onHideForm={() => setIsSubscribeFormHidden(true)}
                     />
@@ -218,14 +214,16 @@ function MemberPopupContent({ copy, bottomOffset }: MemberPopupContentProps) {
                       copy={copy.earnCredits.subscribe}
                       email={profile?.email}
                       onClose={popView}
-                      onSuccess={currentView.props?.onSuccess}
+                      onSuccess={() => setIsSubscribeSuccess(true)}
                     />
                   )}
                   {currentView.type === MemberPopupPanelType.Activate && copy.earnCredits && (
                     <Activate
                       copy={copy.earnCredits.authCodeActivate}
                       onClose={popView}
-                      onSuccess={currentView.props?.onSuccess}
+                      onSuccess={() => {
+                        setIsActivateSuccess(true)
+                      }}
                     />
                   )}
                   {currentView.type === MemberPopupPanelType.RedeemCoupon &&
@@ -242,7 +240,7 @@ function MemberPopupContent({ copy, bottomOffset }: MemberPopupContentProps) {
                         userId={currentView.props.userId}
                         alpcConfig={currentView.props.alpcConfig}
                         copy={copy.consumeCredits.redeemModal}
-                        pointUnit={copy.consumeCredits.pointUnit}
+                        pointUnit={copy.consumeCredits.creditUnit}
                         onClose={popView}
                       />
                     )}

package/src/components/memberPopup/panels/ConsumeCredits/index.tsx

@@ -158,7 +158,7 @@ function ConsumeCredits({ copy, isActivateSuccess, onClose }: Props) {
                   {numberFormat(creditInfo?.available_credit || 0)}
                 </span>
                 <span className="text-[14px] font-[700] leading-[1.4] text-[#1e2024]">
-                  {copy.creditUnit ?? copy.pointUnit ?? 'ankercredits'}
+                  {copy.creditUnit ?? copy.creditUnit ?? 'ankercredits'}
                 </span>
               </div>
             </div>
@@ -170,7 +170,7 @@ function ConsumeCredits({ copy, isActivateSuccess, onClose }: Props) {
                   {numberFormat(creditInfo?.pending_credit || 0)}
                 </span>
                 <span className="text-[14px] font-[700] leading-[1.4] text-[#1e2024]">
-                  {copy.creditUnit ?? copy.pointUnit ?? 'ankercredits'}
+                  {copy.creditUnit ?? 'ankercredits'}
                 </span>
                 <span className="text-[14px] font-[700] leading-[1.4] text-[#1e2024]">
                   {copy.creditUnit ?? 'ankercredits'}
@@ -229,8 +229,8 @@ function ConsumeCredits({ copy, isActivateSuccess, onClose }: Props) {
                       </div>
                       <div className="mt-[4px] text-[14px] text-[#666]">
                         {hasProduct && item.price != null
-                          ? `${numberFormat(item.alpcData.consume_credits)} ${copy.pointUnit ?? ''} + $${Number(item.price).toFixed(2)}`
-                          : `${numberFormat(item.alpcData.consume_credits)} ${copy.pointUnit ?? ''}`}
+                          ? `${numberFormat(item.alpcData.consume_credits)} ${copy.creditUnit ?? ''} + $${Number(item.price).toFixed(2)}`
+                          : `${numberFormat(item.alpcData.consume_credits)} ${copy.creditUnit ?? ''}`}
                       </div>
                     </div>
                     <div className="relative group">

package/src/components/memberPopup/panels/EarnCredits/index.tsx

@@ -27,9 +27,6 @@ type Props = {
   isSubscribeSuccess?: boolean
   isActivateSuccess?: boolean
   isProfileCompleteSuccess?: boolean
-  onSubscribeSuccess?: () => void
-  onActivateSuccess?: () => void
-  onProfileCompleteSuccess?: () => void
 }
 
 function EarnCredits({
@@ -38,9 +35,6 @@ function EarnCredits({
   isSubscribeSuccess = false,
   isActivateSuccess = false,
   isProfileCompleteSuccess = false,
-  onSubscribeSuccess,
-  onActivateSuccess,
-  onProfileCompleteSuccess,
 }: Props) {
   const { profile, openSignUpPopup, alpcConfig, creditInfo } = useMemberPopupContext()
   const { pushView } = useViewStack()
@@ -75,7 +69,6 @@ function EarnCredits({
           ? () =>
               pushView({
                 type: MemberPopupPanelType.Activate,
-                props: { onSuccess: onActivateSuccess },
               })
           : openSignUpPopup,
       },
@@ -85,7 +78,6 @@ function EarnCredits({
           ? () =>
               pushView({
                 type: MemberPopupPanelType.CompleteProfile,
-                props: { onSuccess: onProfileCompleteSuccess },
               })
           : openSignUpPopup,
       },
@@ -95,7 +87,6 @@ function EarnCredits({
           ? () =>
               pushView({
                 type: MemberPopupPanelType.SubscribeEmail,
-                props: { onSuccess: onSubscribeSuccess },
               })
           : openSignUpPopup,
       },

package/src/components/memberPopup/type.ts

@@ -163,7 +163,6 @@ export type ConsumeCreditsopy = {
   balanceLabel?: string
   comingSoonLabel?: string
   creditUnit?: string
-  pointUnit?: string
   off?: string
   imageMapping?: {
     [key in ConsumeCreditsItemType]?: { url: string }