@anker-in/campaign-ui 0.4.8 → 0.5.0-beta.10

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

@@ -0,0 +1,245 @@
+import { useMemo } from 'react'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { useMemberPopupContext } from '../../context/provider'
+import { useViewStack } from '../../context/viewStack'
+import { useSubscribed } from './hooks/useSubscribed'
+import { EarnCreditsTaskType, MemberPopupPanelType, type EarnCreditsCopy } from '../../type'
+import { IconBag, IconLock, IconSubscription, IconOrders } from '../../icons'
+import { numberFormat } from '../../../credits/context/utils'
+import { ROUNDED_BRANDS } from '../../../../constants'
+
+function TaskIcon({ id, className }: { id: EarnCreditsTaskType; className?: string }) {
+  switch (id) {
+    case EarnCreditsTaskType.Activate:
+      return <IconLock className={className} />
+    case EarnCreditsTaskType.Subscribe:
+      return <IconSubscription className={className} />
+    case EarnCreditsTaskType.Shop:
+      return <IconBag className={className} />
+    case EarnCreditsTaskType.CompleteProfile:
+      return <IconOrders className={className} />
+  }
+}
+
+type Props = {
+  copy: EarnCreditsCopy
+  onClose: () => void
+  isSubscribeSuccess?: boolean
+  isActivateSuccess?: boolean
+  isProfileCompleteSuccess?: boolean
+  onSubscribeSuccess?: () => void
+  onActivateSuccess?: () => void
+  onProfileCompleteSuccess?: () => void
+}
+
+function EarnCredits({
+  copy,
+  onClose,
+  isSubscribeSuccess = false,
+  isActivateSuccess = false,
+  isProfileCompleteSuccess = false,
+  onSubscribeSuccess,
+  onActivateSuccess,
+  onProfileCompleteSuccess,
+}: Props) {
+  const { profile, openSignUpPopup, alpcConfig, creditInfo } = useMemberPopupContext()
+  const { pushView } = useViewStack()
+  const { locale } = alpcConfig
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  console.log('creditInfo', creditInfo)
+
+  const isLogin = !!profile
+
+  const isSubscribed = useSubscribed({
+    userId: profile?.user_id,
+    brand: brand,
+    email: profile?.email,
+    locale,
+    apiBaseUrl: alpcConfig.apiBaseUrl,
+  })
+
+  const profileCompleted = useMemo(() => {
+    return (
+      isProfileCompleteSuccess ||
+      (!!(profile?.first_name || profile?.last_name) && !!profile?.phone_number && !!profile?.dob)
+    )
+  }, [profile, isProfileCompleteSuccess])
+
+  const taskStates: Record<EarnCreditsTaskType, { finished: boolean; onClick?: () => void; link?: string }> = useMemo(
+    () => ({
+      [EarnCreditsTaskType.Activate]: {
+        finished: !!profile?.activated || isActivateSuccess,
+        onClick: isLogin
+          ? () =>
+              pushView({
+                type: MemberPopupPanelType.Activate,
+                props: { onSuccess: onActivateSuccess },
+              })
+          : openSignUpPopup,
+      },
+      [EarnCreditsTaskType.CompleteProfile]: {
+        finished: profileCompleted,
+        onClick: isLogin
+          ? () =>
+              pushView({
+                type: MemberPopupPanelType.CompleteProfile,
+                props: { onSuccess: onProfileCompleteSuccess },
+              })
+          : openSignUpPopup,
+      },
+      [EarnCreditsTaskType.Subscribe]: {
+        finished: isSubscribed || isSubscribeSuccess,
+        onClick: isLogin
+          ? () =>
+              pushView({
+                type: MemberPopupPanelType.SubscribeEmail,
+                props: { onSuccess: onSubscribeSuccess },
+              })
+          : openSignUpPopup,
+      },
+      [EarnCreditsTaskType.Shop]: {
+        finished: false,
+        link: copy.goShopLink,
+        onClick: isLogin ? undefined : openSignUpPopup,
+      },
+    }),
+    [
+      profile,
+      isLogin,
+      isActivateSuccess,
+      isProfileCompleteSuccess,
+      profileCompleted,
+      isSubscribed,
+      isSubscribeSuccess,
+      openSignUpPopup,
+      pushView,
+      copy.goShopLink,
+    ]
+  )
+
+  const list = useMemo(() => {
+    return copy.list
+      .map(item => {
+        const state = taskStates[item.id]
+        if (!state) return null
+        const buttonLabel = state.finished
+          ? copy.completed
+          : isLogin
+            ? getNotFinishedLabel(item.id, copy)
+            : copy.joinNow
+        return { ...item, ...state, buttonLabel }
+      })
+      .filter(Boolean) as ((typeof copy.list)[number] & {
+      finished: boolean
+      onClick?: () => void
+      link?: string
+      buttonLabel: string
+    })[]
+  }, [copy, taskStates, isLogin])
+
+  return (
+    <div className="flex flex-col gap-[16px]">
+      <div className="flex flex-col gap-[16px]">
+        <div className="flex flex-col gap-[8px]">
+          {copy.title && <h2 className="text-[24px] font-[700] leading-[1.2] text-[#080a0f]">{copy.title}</h2>}
+        </div>
+
+        {isLogin && (
+          <div
+            className={cn(
+              'flex items-center gap-[12px] bg-[#f5f6f7] p-[16px]',
+              rounded ? 'rounded-[8px]' : 'rounded-none'
+            )}
+          >
+            <div className="flex flex-1 flex-col gap-[4px]">
+              <div className="text-[14px] font-[700] text-[#1e2024]">{copy.balanceLabel ?? 'AnkerCredits Balance'}</div>
+              <div className="flex items-end gap-[4px]">
+                <span className="text-[24px] font-[700] leading-[1.2] text-[#1e2024]">
+                  {numberFormat(creditInfo?.available_credit ?? 0)}
+                </span>
+                <span className="text-[14px] font-[700] leading-[1.4] text-[#1e2024]">
+                  {copy.creditUnit ?? 'ankercredits'}
+                </span>
+              </div>
+            </div>
+            <div className="h-full w-px bg-[#dadce0]" />
+            <div className="flex flex-1 flex-col gap-[4px]">
+              <div className="text-[14px] font-[700] text-[#1e2024]">{copy.comingSoonLabel ?? 'Coming Soon'}</div>
+              <div className="flex items-end gap-[4px]">
+                <span className="text-[24px] font-[700] leading-[1.2] text-[#1e2024]">
+                  {numberFormat(creditInfo?.pending_credit ?? 0)}
+                </span>
+                <span className="text-[14px] font-[700] leading-[1.4] text-[#1e2024]">
+                  {copy.creditUnit ?? 'ankercredits'}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-[16px]">
+        {copy.subtitle && <p className="text-[16px] font-[700] text-[#1e2024]">{copy.subtitle}</p>}
+
+        <div className="flex flex-col">
+          {list.map((item, idx) => (
+            <div key={idx} className="relative py-[16px]">
+              {idx > 0 && <div className="absolute left-0 right-0 top-0 h-px bg-[#dadce0]" />}
+              <div className={cn('flex items-center gap-[12px]', item.finished && 'opacity-60')}>
+                <TaskIcon id={item.id} className="size-[24px] shrink-0" />
+                <div className="flex-1">
+                  <div className="text-[16px] font-[700] text-[#1e2024]">{item.title}</div>
+                  {item.description && (
+                    <div className="mt-[4px] text-[14px] font-[700] text-[#4a4c56]">{item.description}</div>
+                  )}
+                </div>
+                {!item.finished && item.link && isLogin ? (
+                  <a
+                    href={item.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={cn(
+                      'cursor-pointer bg-[#080a0f] min-w-[118px] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',
+                      rounded ? 'rounded-[4px]' : 'rounded-none'
+                    )}
+                  >
+                    {item.buttonLabel}
+                  </a>
+                ) : (
+                  <button
+                    className={cn(
+                      'cursor-pointer min-w-[118px] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',
+                      item.finished ? 'bg-[#767880]' : 'bg-[#080a0f]',
+                      rounded ? 'rounded-[4px]' : 'rounded-none'
+                    )}
+                    disabled={item.finished}
+                    onClick={!item.finished ? item.onClick : undefined}
+                  >
+                    {item.buttonLabel}
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function getNotFinishedLabel(id: EarnCreditsTaskType, copy: EarnCreditsCopy): string {
+  switch (id) {
+    case EarnCreditsTaskType.Activate:
+      return copy.activate
+    case EarnCreditsTaskType.CompleteProfile:
+      return copy.completeProfileLabel
+    case EarnCreditsTaskType.Subscribe:
+      return copy.subscribeLabel
+    case EarnCreditsTaskType.Shop:
+      return copy.shopNow
+  }
+}
+
+export default EarnCredits

package/src/components/memberPopup/panels/Referral/hooks/useReferralOverview.ts

@@ -0,0 +1,41 @@
+import useSWR from 'swr'
+import { useMemberPopupContext } from '../../../context/provider'
+
+export type ReferralRewardOverviewResponse = {
+  data: {
+    data: {
+      available: number
+      pending: number
+    }
+  }
+}
+
+export function useReferralOverview(): {
+  isLoading: boolean
+  data?: ReferralRewardOverviewResponse
+} {
+  const { profile, alpcConfig } = useMemberPopupContext()
+  const isLogin = !!profile
+
+  const swrKey = isLogin ? `/api/multipass/mktsrv/v1/referral/reward/overview/cash` : null
+
+  const swrFetcher = async (url: string) => {
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'current-language': alpcConfig.locale,
+      },
+    })
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    return response.json()
+  }
+
+  const { data, isLoading } = useSWR<ReferralRewardOverviewResponse>(swrKey, swrFetcher, {
+    revalidateOnFocus: false,
+  })
+
+  return { isLoading, data }
+}

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

@@ -0,0 +1,108 @@
+import { Picture } from '@anker-in/headless-ui'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { useMemberPopupContext } from '../../context/provider'
+import { useReferralOverview } from './hooks/useReferralOverview'
+import { formatPrice } from '../../../credits/context/utils'
+
+import type { ReferralCopy } from '../../type'
+import { ROUNDED_BRANDS } from '../../../../constants'
+
+type Props = {
+  copy: ReferralCopy
+  onClose: () => void
+}
+
+function Referral({ copy, onClose }: Props) {
+  const { profile, alpcConfig } = useMemberPopupContext()
+  const isLogin = !!profile
+  const { brand, currencyCode = 'USD' as string } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  const { data } = useReferralOverview()
+
+  const cashAvailable = data?.data?.data?.available ?? 0
+  const cashPending = data?.data?.data?.pending ?? 0
+
+  console.log('cashAvailable', cashAvailable)
+  console.log('cashPending', cashPending)
+  console.log('data', data)
+  console.log('data.data', data?.data)
+
+  return (
+    <div className="flex flex-col gap-[12px]">
+      {copy.title && <h2 className="text-[24px] font-[700] leading-[1.2] text-[#080a0f]">{copy.title}</h2>}
+
+      {isLogin && (
+        <div
+          className={cn(
+            'flex items-center gap-[12px] bg-[#f5f6f7] p-[16px]',
+            rounded ? 'rounded-[8px]' : 'rounded-none'
+          )}
+        >
+          <div className="flex flex-1 flex-col gap-[4px]">
+            <div className="text-[14px] font-[700] text-[#1e2024]">{copy.cashAvailableLabel}</div>
+            <span className="text-[24px] font-[700] leading-[1.2] text-[#1e2024]">
+              {formatPrice({ amount: cashAvailable, currencyCode, locale: alpcConfig.locale })}
+            </span>
+          </div>
+          <div className="h-full w-px self-stretch bg-[#dadce0]" />
+          <div className="flex flex-1 flex-col gap-[4px]">
+            <div className="text-[14px] font-[700] text-[#1e2024]">{copy.cashPendingLabel}</div>
+            <span className="text-[24px] font-[700] leading-[1.2] text-[#1e2024]">
+              {formatPrice({ amount: cashPending, currencyCode, locale: alpcConfig.locale })}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {(copy.howToTitle || copy.howToDescription) && (
+        <div className="flex flex-col gap-[8px]">
+          {copy.howToTitle && (
+            <h3 className="text-[20px] font-[700] leading-[1.2] text-[#080a0f]">{copy.howToTitle}</h3>
+          )}
+          {copy.howToDescription && <p className="text-[14px] leading-[1.5] text-[#1e2024]">{copy.howToDescription}</p>}
+          {copy.learnMoreLabel && copy.learnMoreUrl && (
+            <a
+              href={copy.learnMoreUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-[4px] text-[14px] font-[700] text-[#080a0f] underline"
+            >
+              {copy.learnMoreLabel}
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M5.52827 3.52876C5.78862 3.26841 6.21063 3.26841 6.47098 3.52876L10.471 7.52876C10.7313 7.78911 10.7313 8.21112 10.471 8.47147L6.47098 12.4715C6.21063 12.7318 5.78862 12.7318 5.52827 12.4715C5.26792 12.2111 5.26792 11.7891 5.52827 11.5288L9.05692 8.00011L5.52827 4.47147C5.26792 4.21112 5.26792 3.78911 5.52827 3.52876Z"
+                  fill="#080A0F"
+                />
+              </svg>
+            </a>
+          )}
+        </div>
+      )}
+
+      {copy.image?.url && (
+        <Picture
+          source={copy.image.url}
+          alt={copy.image.alt ?? ''}
+          className={cn('mt-[8px] h-[100px] w-full object-cover', rounded ? 'rounded-[8px]' : 'rounded-none')}
+        />
+      )}
+
+      {copy.ctaButton && (
+        <a
+          href={copy.ctaUrl ?? '#'}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={cn(
+            'block w-full cursor-pointer bg-[#080a0f] py-[14px] text-center text-[14px] font-[700] text-white',
+            rounded ? 'rounded-[4px]' : 'rounded-none'
+          )}
+        >
+          {copy.ctaButton}
+        </a>
+      )}
+    </div>
+  )
+}
+
+export default Referral

package/src/components/memberPopup/type.ts

@@ -0,0 +1,242 @@
+import type { AuthCodeActivateCopy } from '../registration/authCodeActivate/type'
+import type { CreditInfoResponse } from '../credits/context/response'
+import type { DTC_TASK_TYPE } from '../credits/context/const'
+
+export type { AuthCodeActivateCopy }
+
+// ─── 面板类型枚举 ─────────────────────────────────────
+export enum MemberPopupPanelType {
+  EarnCredits = 'EARN_CREDITS',
+  ConsumeCredits = 'CONSUME_CREDITS',
+  Referral = 'REFERRAL',
+  CompleteProfile = 'COMPLETE_PROFILE',
+  Subscribe = 'SUBSCRIBE',
+  SubscribeEmail = 'SUBSCRIBE_EMAIL',
+  RedeemCoupon = 'REDEEM_COUPON',
+  Activate = 'ACTIVATE',
+}
+
+// ─── item action 类型枚举 ─────────────────────────────
+export enum MemberPopupActionType {
+  ExternalLink = 'EXTERNAL_LINK',
+  OpenEarnCredits = 'OPEN_EARN_CREDITS',
+  OpenConsumeCredits = 'OPEN_CONSUME_CREDITS',
+  OpenReferral = 'OPEN_REFERRAL',
+  OpenSubscribe = 'OPEN_SUBSCRIBE',
+}
+
+// ─── EarnCredits 任务类型枚举 ─────────────────────────
+export enum EarnCreditsTaskType {
+  Activate = 'activate',
+  CompleteProfile = 'completeProfile',
+  Subscribe = 'subscribe',
+  Shop = 'shop',
+}
+
+// ─── ConsumeCredits item 类型枚举 ─────────────────────
+export enum ConsumeCreditsItemType {
+  Coupon = 'COUPON',
+  RedeemAndBuy = 'REDEEM_AND_BUY',
+  GiftCard = 'GIFT_CARD',
+  Product = 'PRODUCT',
+}
+
+// ─── 通用 link（统一一种类型） ─────────────────────────
+export type MemberPopupLink = {
+  type: MemberPopupActionType
+  label: string
+  url?: string // 仅 ExternalLink 时使用
+}
+
+// ─── list item ────────────────────────────────────────
+export type MemberPopupItem = {
+  title: string
+  description?: string
+  links: MemberPopupLink[]
+}
+
+// ── 主组件 Copy ──────────────────────────────────────
+export enum MemberPopupPageScope {
+  /** 全局展示 */
+  Global = 'GLOBAL',
+  /** 仅在特定页面展示 */
+  Include = 'INCLUDE',
+  /** 在特定页面不展示 */
+  Exclude = 'EXCLUDE',
+}
+
+export type MemberPopupPageConfig = {
+  scope: MemberPopupPageScope
+  /** 页面路径列表，支持精确匹配和前缀匹配（如 "/products" 会匹配 "/products/xxx"） */
+  pages: string[]
+}
+
+export type MemberPopupCopy = {
+  triggerImg: { url: string; alt?: string }
+  title?: string
+  subtitle?: string
+  list: MemberPopupItem[]
+  footer?: {
+    loginHint: string
+    loginLabel: string
+    joinLabel: string
+    shopLabel: string
+    shopUrl?: string
+  }
+  activitiesSubscribe?: SubscribeModalCopy
+  earnCredits?: EarnCreditsCopy
+  consumeCredits?: ConsumeCreditsopy
+  referral?: ReferralCopy
+  /** 页面覆盖范围配置，默认全局展示 */
+  pageConfig?: MemberPopupPageConfig
+}
+
+// ─── EarnCredits Copy ────────────────────────────────
+export type EarnCreditsCopy = {
+  title?: string
+  subtitle?: string
+  balanceLabel?: string
+  comingSoonLabel?: string
+  creditUnit?: string
+  joinNow: string
+  completed: string
+  activate: string
+  completeProfileLabel: string
+  subscribeLabel: string
+  shopNow: string
+  goShopLink?: string
+  list: {
+    id: EarnCreditsTaskType
+    title: string
+    description: string
+    credits?: string
+  }[]
+  // 子弹窗文案
+  authCodeActivate: AuthCodeActivateCopy
+  completeProfile: CompleteProfileCopy
+  subscribe: SubscribeModalCopy
+}
+
+export type CompleteProfileCopy = {
+  title: string
+  subtitle?: string
+  firstName: string
+  lastName: string
+  email: string
+  phone: string
+  birthday: string
+  country: string
+  save: string
+  cancel: string
+  edit: string
+  required: string
+}
+
+export type SubscribeModalCopy = {
+  title: string
+  desc?: string
+  placeholder: string
+  policy?: string
+  successTips?: string
+  dealsType?: string
+  buttonLabel?: string
+  single_brand_subscribe?: boolean
+  genre?: string
+  sub_brand_type?: string
+  promo?: {
+    title?: string
+    description?: string
+    learnMoreLabel?: string
+    learnMoreUrl?: string
+    image?: { url: string; alt?: string }
+  }
+}
+
+// ─── ConsumeCredits Copy ────────────────────────────
+export type ConsumeCreditsopy = {
+  title?: string
+  subtitle?: string
+  soldOut: string
+  unlockRewards: string
+  btnRedeem: string
+  insufficientCredits?: string
+  balanceLabel?: string
+  comingSoonLabel?: string
+  creditUnit?: string
+  pointUnit?: string
+  off?: string
+  imageMapping?: {
+    [key in ConsumeCreditsItemType]?: { url: string }
+  }
+  list: ConsumeCreditsItem[]
+  redeemModal: RedeemCouponModalCopy
+  creditsPage?: { label: string; url: string }
+}
+
+export type ConsumeCreditsItem = {
+  redeemId: string | number
+  title: string
+  description?: string
+  image: { url: string; alt?: string }
+  type: ConsumeCreditsItemType
+  product?: { handle: string; sku: string }
+  price?: number
+  value?: string
+  rules?: string[]
+}
+
+export type RedeemCouponModalCopy = {
+  confirmTitle: string
+  confirmButton: string
+  commonError: string
+  redeemLimitError: string
+  inventoryNotEnough: string
+  creditsNotEnough: string
+  crossSiteError: string
+  successTitle: string
+  successDesc: string
+  successButton: string
+  successButtonUrl?: string
+}
+
+// ─── Referral Copy ───────────────────────────────────
+export type ReferralCopy = {
+  title?: string
+  description?: string
+  cashAvailableLabel: string
+  cashPendingLabel: string
+  creditUnit?: string
+  referralLinksLabel?: string
+  referralLinkBaseUrl?: string
+  copyLabel?: string
+  copiedLabel?: string
+  howToTitle?: string
+  howToDescription?: string
+  learnMoreLabel?: string
+  learnMoreUrl?: string
+  image?: { url: string; alt?: string }
+  ctaButton: string
+  ctaUrl?: string
+  loginTitle?: string
+  loginDescription?: string
+  loginCtaLabel?: string
+}
+
+// ─── Provider Context 类型 ───────────────────────────
+export type AlpcConfig = {
+  brand: string
+  locale: string
+  appName: string
+  apiBaseUrl?: string
+}
+
+export type MemberPopupContextValue = {
+  profile: any
+  isLoadingProfile: boolean
+  creditInfo?: CreditInfoResponse
+  fetchCreditInfo: (userId: string) => void
+  openSignUpPopup: () => void
+  openSignInPopup: () => void
+  taskIdToTypeMapping?: Record<string, DTC_TASK_TYPE>
+  alpcConfig: AlpcConfig
+}

package/tailwind.config.ts

@@ -14,6 +14,10 @@ export default {
   },
   theme: {
     extend: {
+      screens: {
+        'cmp-md': { max: '767px' },
+        'cmp-sm': { max: '374px' },
+      },
       colors: {
         primary: {
           DEFAULT: 'var(--brand-color-1)',

package/dist/cjs/stories/CartCard.stories.d.ts

@@ -1,33 +0,0 @@
-/**
- * CartCard Storybook Stories
- * 展示购物车卡片组件的各种状态
- */
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import type { CartContent } from '../components/LiveChatWidget/types';
-declare const CartCardWrapper: React.FC<{
-    content: CartContent;
-}>;
-declare const meta: Meta<typeof CartCardWrapper>;
-export default meta;
-type Story = StoryObj<typeof CartCardWrapper>;
-/**
- * 空购物车状态
- */
-export declare const Empty: Story;
-/**
- * 单件商品
- */
-export declare const SingleItem: Story;
-/**
- * 多件商品
- */
-export declare const MultipleItems: Story;
-/**
- * 有折扣码的购物车
- */
-export declare const WithDiscount: Story;
-/**
- * 多个折扣码（部分失效）
- */
-export declare const WithMultipleDiscounts: Story;