@anker-in/campaign-ui 0.3.4 → 0.4.0-beta.1

package/src/templates/Credits.tsx

@@ -1,91 +1,116 @@
-import { classNames, HeadlessConfig, HeadlessProvider } from '@anker-in/lib'
+import { classNames, HeadlessProvider } from '@anker-in/lib'
 import { RegistrationProvider } from '../components/registration/context/provider'
+import { CreditsProvider, useCreditsContext } from '../components/credits/context/provider'
+import { CreditsBanner } from '../components/credits/creditsBanner'
+import { CreditsInfoCard } from '../components/credits/creditsInfoCard'
+import { CreditsBenefits } from '../components/credits/creditsBenefits'
+import { CreditsWaysToGetCredits } from '../components/credits/creditsWaysToGetCredits'
+import { CreditsAnkersolixTask } from '../components/credits/creditsAnkersolixTask'
+import { CreditsRedeemList } from '../components/credits/creditsRedeemList'
+import { CreditsGoGift } from '../components/credits/creditsGoGift'
+import { CreditsCash } from '../components/credits/creditsCash'
+import { CreditsMemberPrice } from '../components/credits/creditsMemberPrice'
+import { CreditsFaq } from '../components/credits/creditsFaq'
+import { CreditsNavigation } from '../components/credits/creditsNavigation'
+import ActivitiesModal from '../components/credits/modal/ActivitiesModal'
+import RewardsModal from '../components/credits/modal/RewardsModal'
+import { ComponentKey } from './Credits.types'
+import type {
+  CreditsTemplateProps,
+  CreditsContentProps,
+  CreditsBannerCopy,
+  CreditsInfoCardCopy,
+  CreditsBenefitsCopy,
+  CreditsWaysToGetCreditsCopy,
+  CreditsAnkersolixTaskCopy,
+  CreditsRedeemListCopy,
+  CreditsGoGiftCopy,
+  CreditsCashCopy,
+  CreditsMemberPriceCopy,
+  CreditsFaqCopy,
+} from './Credits.types'
 
-import { DTC_TASK_TYPE } from '../components/credits/context/const'
-import { CreditsProvider } from '../components/credits/context/provider'
-import { CreditsPageCommon } from '../components/credits/type'
-import { FunctionMemberPriceConfig } from '../components/credits/context/memberPriceTypes'
+const CreditsContent = ({ headlessConfig, pageConfig, userContext }: CreditsContentProps) => {
+  const { openMyRewardsModal, setOpenMyRewardsModal, openActivitiesModal, setOpenActivitiesModal, pageCommon } = useCreditsContext()
 
-import { CreditsBanner, CreditsBannerCopy } from '../components/credits/creditsBanner'
-import { CreditsInfoCard, CreditsInfoCardCopy } from '../components/credits/creditsInfoCard'
-import { CreditsBenefits, CreditsBenefitsCopy } from '../components/credits/creditsBenefits'
-import { CreditsWaysToGetCredits, CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysToGetCredits'
-import { CreditsAnkersolixTask, CreditsAnkersolixTaskCopy } from '../components/credits/creditsAnkersolixTask'
-import { CreditsRedeemList, CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'
-import { CreditsCash, CreditsCashCopy } from '../components/credits/creditsCash'
-import { CreditsMemberPrice, CreditsMemberPriceCopy } from '../components/credits/creditsMemberPrice'
-import { CreditsFaq, CreditsFaqCopy } from '../components/credits/creditsFaq'
-import { CreditsNavigation, CreditsNavigationCopy } from '../components/credits/creditsNavigation'
-import { AuthCodeActivateCopy } from 'src/components/registration/authCodeActivate/type'
+  return (
+    <>
+      {/* 导航组件 - 固定位置，不参与 order 排序 */}
+      {pageConfig.components[ComponentKey.Navigation] && (
+        <CreditsNavigation copy={pageConfig.components[ComponentKey.Navigation]} />
+      )}
+      <div className={classNames('bg-[#f5f5f7] leading-[1.2]')}>
+        {pageConfig.order.map(key => {
+          // 跳过导航组件，因为它已经固定渲染在上方
+          if (key === ComponentKey.Navigation) return null
+          const componentCopy = pageConfig.components?.[key]
+          if (!componentCopy) return null
+          return (
+            <>
+              {key === ComponentKey.Banner && <CreditsBanner copy={componentCopy as CreditsBannerCopy} id={key} />}
+              {key === ComponentKey.InfoCard && userContext?.profile && (
+                <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} id={key} />
+              )}
+              {key === ComponentKey.Benefits && (
+                <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} id={key} />
+              )}
+              {key === ComponentKey.WaysToGetCredits && (
+                <CreditsWaysToGetCredits
+                  copy={componentCopy as CreditsWaysToGetCreditsCopy}
+                  id={key}
+                  classNames={
+                    headlessConfig.brand === 'anker'
+                      ? {
+                        subtitle: 'text-white',
+                        equalCreditsText:
+                          'bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent',
+                      }
+                      : {
+                        subtitle: 'text-[#D1D1D1]',
+                        equalCreditsText: 'text-[#F6EAD0]',
+                      }
+                  }
+                />
+              )}
+              {key === ComponentKey.AnkersolixTask && (
+                <CreditsAnkersolixTask copy={componentCopy as CreditsAnkersolixTaskCopy} id={key} />
+              )}
+              {key === ComponentKey.RedeemList && (
+                <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} id={key} />
+              )}
+              {key === ComponentKey.GoGift && <CreditsGoGift copy={componentCopy as CreditsGoGiftCopy} id={key} />}
+              {key === ComponentKey.SpendCreditsLikeCash && (
+                <CreditsCash copy={componentCopy as CreditsCashCopy} id={key} />
+              )}
+              {key === ComponentKey.MemberPrice && (
+                <CreditsMemberPrice copy={componentCopy as CreditsMemberPriceCopy} id={key} />
+              )}
+              {key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} id={key} />}
+              {key !== ComponentKey.Banner && (
+                <div className="laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16" />
+              )}
+            </>
+          )
+        })}
+      </div>
 
-export enum ComponentKey {
-  Navigation = 'creditsNavigation',
-  Banner = 'creditsBanner',
-  InfoCard = 'creditsInfoCard',
-  Benefits = 'creditsBenefits',
-  WaysToGetCredits = 'creditsWaysToGetCredits',
-  AnkersolixTask = 'creditsAnkersolixTask',
-  RedeemList = 'creditsRedeemList',
-  SpendCreditsLikeCash = 'creditsCash',
-  MemberPrice = 'creditsMemberPrice',
-  Faqs = 'creditsFaq',
-}
-export type CreditsTemplateProps = {
-  headlessConfig: HeadlessConfig
-  siteConfig: {
-    registrationsSettings: {
-      authCodeActivate: AuthCodeActivateCopy
-    }
-    taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>
-    memberPriceDiscount?: FunctionMemberPriceConfig[]
-  }
-  creditsConfig?: {
-    alpcBrand?: string
-  }
-  pageConfig: {
-    order: ComponentKey[]
-    common: CreditsPageCommon
-    components: {
-      [ComponentKey.Navigation]?: CreditsNavigationCopy
-      [ComponentKey.Banner]?: CreditsBannerCopy
-      [ComponentKey.InfoCard]?: CreditsInfoCardCopy
-      [ComponentKey.Benefits]?: CreditsBenefitsCopy
-      [ComponentKey.WaysToGetCredits]?: CreditsWaysToGetCreditsCopy
-      [ComponentKey.AnkersolixTask]?: CreditsAnkersolixTaskCopy
-      [ComponentKey.RedeemList]?: CreditsRedeemListCopy
-      [ComponentKey.SpendCreditsLikeCash]?: CreditsCashCopy
-      [ComponentKey.MemberPrice]?: CreditsMemberPriceCopy
-      [ComponentKey.Faqs]?: CreditsFaqCopy
-    }
-  }
-  userContext: {
-    profile: any
-    removeProfile: () => void
-    isLoadingProfile: boolean
-    creditInfo: any
-    customer: any
-    customerLoading: boolean
-    fetchCreditInfo: () => void
-  }
-  registrationContext: {
-    openSignUpPopup: () => void
-    openSignInPopup: () => void
-  }
-  gtm: {
-    pageGroup: string
-    pageHandle?: string
-  }
-  cartConfig?: {
-    addToCart: (params: {
-      variantList: Array<{
-        variant: any
-        quantity: number
-        attributes?: Array<{ key: string; value: string }>
-      }>
-      cartAttributes?: Record<string, string>
-      discountCodes?: string[]
-    }) => void | Promise<any>
-  }
+      {/* Global Modals */}
+      {pageCommon?.activitiesModal && (
+        <ActivitiesModal
+          isOpen={openActivitiesModal}
+          data={pageCommon.activitiesModal}
+          onClose={() => setOpenActivitiesModal(false)}
+        />
+      )}
+      {pageCommon?.rewardsModal && (
+        <RewardsModal
+          isOpen={openMyRewardsModal}
+          data={pageCommon.rewardsModal}
+          onClose={() => setOpenMyRewardsModal(false)}
+        />
+      )}
+    </>
+  )
 }
 
 export const CreditsTemplate = ({
@@ -98,7 +123,6 @@ export const CreditsTemplate = ({
   gtm,
   cartConfig,
 }: CreditsTemplateProps) => {
-  console.log('siteConfig', siteConfig)
   return (
     <HeadlessProvider headlessConfig={headlessConfig}>
       <RegistrationProvider copy={siteConfig.registrationsSettings} email={userContext?.profile?.email}>
@@ -119,63 +143,7 @@ export const CreditsTemplate = ({
           alpcBrand={creditsConfig?.alpcBrand}
           cartConfig={cartConfig}
         >
-          {/* 导航组件 - 固定位置，不参与 order 排序 */}
-          {pageConfig.components[ComponentKey.Navigation] && (
-            <CreditsNavigation copy={pageConfig.components[ComponentKey.Navigation]} />
-          )}
-          <div className={classNames('bg-[#f5f5f7] leading-[1.2]')}>
-            {pageConfig.order.map(key => {
-              // 跳过导航组件，因为它已经固定渲染在上方
-              if (key === ComponentKey.Navigation) return null
-              const componentCopy = pageConfig.components?.[key]
-              if (!componentCopy) return null
-              return (
-                <>
-                  {key === ComponentKey.Banner && <CreditsBanner copy={componentCopy as CreditsBannerCopy} id={key} />}
-                  {key === ComponentKey.InfoCard && userContext?.profile && (
-                    <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} id={key} />
-                  )}
-                  {key === ComponentKey.Benefits && (
-                    <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} id={key} />
-                  )}
-                  {key === ComponentKey.WaysToGetCredits && (
-                    <CreditsWaysToGetCredits
-                      copy={componentCopy as CreditsWaysToGetCreditsCopy}
-                      id={key}
-                      classNames={
-                        headlessConfig.brand === 'anker'
-                          ? {
-                              subtitle: 'text-white',
-                              equalCreditsText:
-                                'bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent',
-                            }
-                          : {
-                              subtitle: 'text-[#D1D1D1]',
-                              equalCreditsText: 'text-[#F6EAD0]',
-                            }
-                      }
-                    />
-                  )}
-                  {key === ComponentKey.AnkersolixTask && (
-                    <CreditsAnkersolixTask copy={componentCopy as CreditsAnkersolixTaskCopy} id={key} />
-                  )}
-                  {key === ComponentKey.RedeemList && (
-                    <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} id={key} />
-                  )}
-                  {key === ComponentKey.SpendCreditsLikeCash && (
-                    <CreditsCash copy={componentCopy as CreditsCashCopy} id={key} />
-                  )}
-                  {key === ComponentKey.MemberPrice && (
-                    <CreditsMemberPrice copy={componentCopy as CreditsMemberPriceCopy} id={key} />
-                  )}
-                  {key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} id={key} />}
-                  {key !== ComponentKey.Banner && (
-                    <div className="laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16" />
-                  )}
-                </>
-              )
-            })}
-          </div>
+          <CreditsContent headlessConfig={headlessConfig} pageConfig={pageConfig} userContext={userContext} />
         </CreditsProvider>
       </RegistrationProvider>
     </HeadlessProvider>

package/src/templates/Credits.types.ts

@@ -0,0 +1,110 @@
+import { HeadlessConfig } from '@anker-in/lib'
+import { DTC_TASK_TYPE } from '../components/credits/context/const'
+import { CreditsPageCommon } from '../components/credits/type'
+import { FunctionMemberPriceConfig } from '../components/credits/context/memberPriceTypes'
+import { AuthCodeActivateCopy } from 'src/components/registration/authCodeActivate/type'
+import type { CreditsBannerCopy } from '../components/credits/creditsBanner'
+import type { CreditsInfoCardCopy } from '../components/credits/creditsInfoCard'
+import type { CreditsBenefitsCopy } from '../components/credits/creditsBenefits'
+import type { CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysToGetCredits'
+import type { CreditsAnkersolixTaskCopy } from '../components/credits/creditsAnkersolixTask'
+import type { CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'
+import type { CreditsGoGiftCopy } from '../components/credits/creditsGoGift'
+import type { CreditsCashCopy } from '../components/credits/creditsCash'
+import type { CreditsMemberPriceCopy } from '../components/credits/creditsMemberPrice'
+import type { CreditsFaqCopy } from '../components/credits/creditsFaq'
+import type { CreditsNavigationCopy } from '../components/credits/creditsNavigation'
+
+// Re-export copy types for convenience
+export type {
+  CreditsBannerCopy,
+  CreditsInfoCardCopy,
+  CreditsBenefitsCopy,
+  CreditsWaysToGetCreditsCopy,
+  CreditsAnkersolixTaskCopy,
+  CreditsRedeemListCopy,
+  CreditsGoGiftCopy,
+  CreditsCashCopy,
+  CreditsMemberPriceCopy,
+  CreditsFaqCopy,
+  CreditsNavigationCopy,
+}
+
+export enum ComponentKey {
+  Navigation = 'creditsNavigation',
+  Banner = 'creditsBanner',
+  InfoCard = 'creditsInfoCard',
+  Benefits = 'creditsBenefits',
+  WaysToGetCredits = 'creditsWaysToGetCredits',
+  AnkersolixTask = 'creditsAnkersolixTask',
+  RedeemList = 'creditsRedeemList',
+  GoGift = 'creditsGoGift',
+  SpendCreditsLikeCash = 'creditsCash',
+  MemberPrice = 'creditsMemberPrice',
+  Faqs = 'creditsFaq',
+}
+
+export type CreditsTemplateProps = {
+  headlessConfig: HeadlessConfig
+  siteConfig: {
+    registrationsSettings: {
+      authCodeActivate: AuthCodeActivateCopy
+    }
+    taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>
+    memberPriceDiscount?: FunctionMemberPriceConfig[]
+  }
+  creditsConfig?: {
+    alpcBrand?: string
+  }
+  pageConfig: {
+    order: ComponentKey[]
+    common: CreditsPageCommon
+    components: {
+      [ComponentKey.Navigation]?: CreditsNavigationCopy
+      [ComponentKey.Banner]?: CreditsBannerCopy
+      [ComponentKey.InfoCard]?: CreditsInfoCardCopy
+      [ComponentKey.Benefits]?: CreditsBenefitsCopy
+      [ComponentKey.WaysToGetCredits]?: CreditsWaysToGetCreditsCopy
+      [ComponentKey.AnkersolixTask]?: CreditsAnkersolixTaskCopy
+      [ComponentKey.RedeemList]?: CreditsRedeemListCopy
+      [ComponentKey.GoGift]?: CreditsGoGiftCopy
+      [ComponentKey.SpendCreditsLikeCash]?: CreditsCashCopy
+      [ComponentKey.MemberPrice]?: CreditsMemberPriceCopy
+      [ComponentKey.Faqs]?: CreditsFaqCopy
+    }
+  }
+  userContext: {
+    profile: any
+    removeProfile: () => void
+    isLoadingProfile: boolean
+    creditInfo: any
+    customer: any
+    customerLoading: boolean
+    fetchCreditInfo: () => void
+  }
+  registrationContext: {
+    openSignUpPopup: () => void
+    openSignInPopup: () => void
+  }
+  gtm: {
+    pageGroup: string
+    pageHandle?: string
+  }
+  cartConfig?: {
+    addToCart: (params: {
+      variantList: Array<{
+        variant: any
+        quantity: number
+        attributes?: Array<{ key: string; value: string }>
+      }>
+      cartAttributes?: Record<string, string>
+      discountCodes?: string[]
+    }) => void | Promise<any>
+  }
+}
+
+export type CreditsContentProps = {
+  headlessConfig: HeadlessConfig
+  pageConfig: CreditsTemplateProps['pageConfig']
+  userContext: CreditsTemplateProps['userContext']
+}