@anker-in/campaign-ui 0.5.0-beta.25 → 0.5.0-beta.26

package/dist/esm/components/memberPopup/panels/EarnCredits/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/memberPopup/panels/EarnCredits/index.tsx"],
-  "sourcesContent": ["import { useEffect, useMemo } from 'react'\nimport { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport { useMemberPopupContext } from '../../context/provider'\nimport { useViewStack } from '../../context/viewStack'\nimport { useSubscribed } from './hooks/useSubscribed'\nimport { EarnCreditsTaskType, MemberPopupPanelType, type EarnCreditsCopy } from '../../type'\nimport { IconBag, IconLock, IconSubscription, IconOrders } from '../../icons'\nimport { numberFormat } from '../../../credits/context/utils'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\nfunction TaskIcon({ id, className }: { id: EarnCreditsTaskType; className?: string }) {\n  switch (id) {\n    case EarnCreditsTaskType.Activate:\n      return <IconLock className={className} />\n    case EarnCreditsTaskType.Subscribe:\n      return <IconSubscription className={className} />\n    case EarnCreditsTaskType.Shop:\n      return <IconBag className={className} />\n    case EarnCreditsTaskType.CompleteProfile:\n      return <IconOrders className={className} />\n  }\n}\n\ntype Props = {\n  copy: EarnCreditsCopy\n}\n\nfunction EarnCredits({ copy }: Props) {\n  const {\n    profile,\n    openSignUpPopup,\n    alpcConfig,\n    creditInfo,\n    fetchCreditInfo,\n    isSubscribeSuccess,\n    isActivateSuccess,\n    isProfileCompleteSuccess,\n  } = useMemberPopupContext()\n  const { pushView } = useViewStack()\n  const { locale } = alpcConfig\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  useEffect(() => {\n    if (profile?.user_id) fetchCreditInfo(profile.user_id)\n  }, [])\n\n  const isLogin = !!profile\n\n  const isSubscribed = useSubscribed({\n    userId: profile?.user_id,\n    brand: brand,\n    email: profile?.email,\n    locale,\n    apiBaseUrl: alpcConfig.apiBaseUrl,\n  })\n\n  const profileCompleted = useMemo(() => {\n    return (\n      isProfileCompleteSuccess ||\n      (!!(profile?.first_name || profile?.last_name) && !!profile?.phone_number && !!profile?.dob)\n    )\n  }, [profile, isProfileCompleteSuccess])\n\n  function trackTaskButton(taskId: EarnCreditsTaskType) {\n    const taskButtonNameMap: Record<EarnCreditsTaskType, string> = {\n      [EarnCreditsTaskType.Activate]: 'activate',\n      [EarnCreditsTaskType.CompleteProfile]: 'complete_profile',\n      [EarnCreditsTaskType.Subscribe]: 'subscribe',\n      [EarnCreditsTaskType.Shop]: 'shop',\n    }\n    gaTrack({\n      event: 'ga4Event',\n      event_name: 'lp_button',\n      event_parameters: {\n        position: 'earn_credits',\n        button_name: taskButtonNameMap[taskId],\n        info: 'Member Floating Window',\n      },\n    })\n  }\n\n  const taskStates: Record<EarnCreditsTaskType, { finished: boolean; onClick?: () => void; link?: string }> = useMemo(\n    () => ({\n      [EarnCreditsTaskType.Activate]: {\n        finished: !!profile?.activated || isActivateSuccess,\n        onClick: isLogin\n          ? () => {\n              trackTaskButton(EarnCreditsTaskType.Activate)\n              pushView({\n                type: MemberPopupPanelType.Activate,\n              })\n            }\n          : openSignUpPopup,\n      },\n      [EarnCreditsTaskType.CompleteProfile]: {\n        finished: profileCompleted,\n        onClick: isLogin\n          ? () => {\n              trackTaskButton(EarnCreditsTaskType.CompleteProfile)\n              pushView({\n                type: MemberPopupPanelType.CompleteProfile,\n              })\n            }\n          : openSignUpPopup,\n      },\n      [EarnCreditsTaskType.Subscribe]: {\n        finished: isSubscribed || isSubscribeSuccess,\n        onClick: isLogin\n          ? () => {\n              trackTaskButton(EarnCreditsTaskType.Subscribe)\n              pushView({\n                type: MemberPopupPanelType.SubscribeEmail,\n              })\n            }\n          : openSignUpPopup,\n      },\n      [EarnCreditsTaskType.Shop]: {\n        finished: false,\n        link: copy.goShopLink,\n        onClick: isLogin ? () => trackTaskButton(EarnCreditsTaskType.Shop) : openSignUpPopup,\n      },\n    }),\n    [\n      profile,\n      isLogin,\n      isActivateSuccess,\n      isProfileCompleteSuccess,\n      profileCompleted,\n      isSubscribed,\n      isSubscribeSuccess,\n      openSignUpPopup,\n      pushView,\n      copy.goShopLink,\n    ]\n  )\n\n  const list = useMemo(() => {\n    return copy.list\n      .map(item => {\n        const state = taskStates[item.id]\n        if (!state) return null\n        const buttonLabel = state.finished\n          ? copy.completed\n          : isLogin\n            ? getNotFinishedLabel(item.id, copy)\n            : copy.joinNow\n        return { ...item, ...state, buttonLabel }\n      })\n      .filter(Boolean) as ((typeof copy.list)[number] & {\n      finished: boolean\n      onClick?: () => void\n      link?: string\n      buttonLabel: string\n    })[]\n  }, [copy, taskStates, isLogin])\n\n  return (\n    <div className=\"flex flex-col gap-[16px]\">\n      <div className=\"flex flex-col gap-[16px]\">\n        <div className=\"flex flex-col gap-[8px]\">\n          {copy.title && <h2 className=\"text-[24px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.title}</h2>}\n        </div>\n\n        {isLogin && (\n          <div\n            className={cn(\n              'flex items-center gap-[12px] bg-[#f5f6f7] p-[16px]',\n              rounded ? 'rounded-[8px]' : 'rounded-none'\n            )}\n          >\n            <div className=\"flex flex-1 flex-col gap-[4px]\">\n              <div className=\"text-[14px] font-[700] text-[#1e2024]\">{copy.balanceLabel ?? 'AnkerCredits Balance'}</div>\n              <div className=\"flex items-end gap-[4px]\">\n                <span className=\"text-[24px] font-[700] leading-[1.2] text-[#1e2024]\">\n                  {numberFormat(creditInfo?.available_credit ?? 0)}\n                </span>\n                <span className=\"text-[14px] font-[700] leading-[1.4] text-[#1e2024]\">\n                  {copy.creditUnit ?? 'ankercredits'}\n                </span>\n              </div>\n            </div>\n            <div className=\"h-full w-px bg-[#dadce0]\" />\n            <div className=\"flex flex-1 flex-col gap-[4px]\">\n              <div className=\"text-[14px] font-[700] text-[#1e2024]\">{copy.comingSoonLabel ?? 'Coming Soon'}</div>\n              <div className=\"flex items-end gap-[4px]\">\n                <span className=\"text-[24px] font-[700] leading-[1.2] text-[#1e2024]\">\n                  {numberFormat(creditInfo?.pending_credit ?? 0)}\n                </span>\n                <span className=\"text-[14px] font-[700] leading-[1.4] text-[#1e2024]\">\n                  {copy.creditUnit ?? 'ankercredits'}\n                </span>\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n\n      <div className=\"flex flex-col gap-[16px]\">\n        {copy.subtitle && <p className=\"text-[16px] font-[700] text-[#1e2024]\">{copy.subtitle}</p>}\n\n        <div className=\"flex flex-col\">\n          {list.map((item, idx) => (\n            <div key={idx} className=\"relative py-[16px]\">\n              {idx > 0 && <div className=\"absolute left-0 right-0 top-0 h-px bg-[#dadce0]\" />}\n              <div className={cn('flex items-center gap-[12px]')}>\n                <TaskIcon id={item.id} className=\"size-[24px] shrink-0\" />\n                <div className=\"flex-1\">\n                  <div className=\"text-[16px] font-[700] text-[#1e2024]\">{item.title}</div>\n                  {item.credits && (\n                    <div className=\"mt-[4px] text-[14px] font-bold text-[#4A4C56]\">{item.credits}</div>\n                  )}\n                </div>\n                {!item.finished && item.link && isLogin ? (\n                  <a\n                    href={item.link}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className={cn(\n                      'cursor-pointer bg-[#080a0f] min-w-[118px] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',\n                      rounded ? 'rounded-[4px]' : 'rounded-none'\n                    )}\n                    onClick={() => trackTaskButton(item.id)}\n                  >\n                    {item.buttonLabel}\n                  </a>\n                ) : (\n                  <button\n                    className={cn(\n                      'cursor-pointer min-w-[118px] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',\n                      item.finished ? 'bg-[#767880]' : 'bg-[#080a0f]',\n                      rounded ? 'rounded-[4px]' : 'rounded-none',\n                      item.finished && 'opacity-60'\n                    )}\n                    disabled={item.finished}\n                    onClick={!item.finished ? item.onClick : undefined}\n                  >\n                    {item.buttonLabel}\n                  </button>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction getNotFinishedLabel(id: EarnCreditsTaskType, copy: EarnCreditsCopy): string {\n  switch (id) {\n    case EarnCreditsTaskType.Activate:\n      return copy.activate\n    case EarnCreditsTaskType.CompleteProfile:\n      return copy.completeProfileLabel\n    case EarnCreditsTaskType.Subscribe:\n      return copy.subscribeLabel\n    case EarnCreditsTaskType.Shop:\n      return copy.shopNow\n  }\n}\n\nexport default EarnCredits\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useEffect", "useMemo", "gaTrack", "cn", "useHeadlessContext", "useMemberPopupContext", "useViewStack", "useSubscribed", "EarnCreditsTaskType", "MemberPopupPanelType", "IconBag", "IconLock", "IconSubscription", "IconOrders", "numberFormat", "ROUNDED_BRANDS", "TaskIcon", "id", "className", "EarnCredits", "copy", "profile", "openSignUpPopup", "alpcConfig", "creditInfo", "fetchCreditInfo", "isSubscribeSuccess", "isActivateSuccess", "isProfileCompleteSuccess", "pushView", "locale", "brand", "rounded", "isLogin", "isSubscribed", "profileCompleted", "trackTaskButton", "taskId", "taskButtonNameMap", "taskStates", "list", "item", "state", "buttonLabel", "getNotFinishedLabel", "idx", "EarnCredits_default"]
+  "sourcesContent": ["import { useEffect, useMemo } from 'react'\nimport { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport { useMemberPopupContext } from '../../context/provider'\nimport { useViewStack } from '../../context/viewStack'\nimport { useSubscribed } from './hooks/useSubscribed'\nimport { EarnCreditsTaskType, MemberPopupPanelType, type EarnCreditsCopy } from '../../type'\nimport { IconBag, IconLock, IconSubscription, IconOrders } from '../../icons'\nimport { numberFormat } from '../../../credits/context/utils'\nimport { ROUNDED_BRANDS } from '../../../../constants'\nimport { Button } from '@anker-in/headless-ui'\n\nfunction TaskIcon({ id, className }: { id: EarnCreditsTaskType; className?: string }) {\n  switch (id) {\n    case EarnCreditsTaskType.Activate:\n      return <IconLock className={className} />\n    case EarnCreditsTaskType.Subscribe:\n      return <IconSubscription className={className} />\n    case EarnCreditsTaskType.Shop:\n      return <IconBag className={className} />\n    case EarnCreditsTaskType.CompleteProfile:\n      return <IconOrders className={className} />\n  }\n}\n\ntype Props = {\n  copy: EarnCreditsCopy\n}\n\nfunction EarnCredits({ copy }: Props) {\n  const {\n    profile,\n    openSignUpPopup,\n    alpcConfig,\n    creditInfo,\n    fetchCreditInfo,\n    isSubscribeSuccess,\n    isActivateSuccess,\n    isProfileCompleteSuccess,\n  } = useMemberPopupContext()\n  const { pushView } = useViewStack()\n  const { locale } = alpcConfig\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  useEffect(() => {\n    if (profile?.user_id) fetchCreditInfo(profile.user_id)\n  }, [])\n\n  const isLogin = !!profile\n\n  const isSubscribed = useSubscribed({\n    userId: profile?.user_id,\n    brand: brand,\n    email: profile?.email,\n    locale,\n    apiBaseUrl: alpcConfig.apiBaseUrl,\n  })\n\n  const profileCompleted = useMemo(() => {\n    return (\n      isProfileCompleteSuccess ||\n      (!!(profile?.first_name || profile?.last_name) && !!profile?.phone_number && !!profile?.dob)\n    )\n  }, [profile, isProfileCompleteSuccess])\n\n  function trackTaskButton(taskId: EarnCreditsTaskType) {\n    const taskButtonNameMap: Record<EarnCreditsTaskType, string> = {\n      [EarnCreditsTaskType.Activate]: 'activate',\n      [EarnCreditsTaskType.CompleteProfile]: 'complete_profile',\n      [EarnCreditsTaskType.Subscribe]: 'subscribe',\n      [EarnCreditsTaskType.Shop]: 'shop',\n    }\n    gaTrack({\n      event: 'ga4Event',\n      event_name: 'lp_button',\n      event_parameters: {\n        position: 'earn_credits',\n        button_name: taskButtonNameMap[taskId],\n        info: 'Member Floating Window',\n      },\n    })\n  }\n\n  const taskStates: Record<EarnCreditsTaskType, { finished: boolean; onClick?: () => void; link?: string }> = useMemo(\n    () => ({\n      [EarnCreditsTaskType.Activate]: {\n        finished: !!profile?.activated || isActivateSuccess,\n        onClick: isLogin\n          ? () => {\n              trackTaskButton(EarnCreditsTaskType.Activate)\n              pushView({\n                type: MemberPopupPanelType.Activate,\n              })\n            }\n          : openSignUpPopup,\n      },\n      [EarnCreditsTaskType.CompleteProfile]: {\n        finished: profileCompleted,\n        onClick: isLogin\n          ? () => {\n              trackTaskButton(EarnCreditsTaskType.CompleteProfile)\n              pushView({\n                type: MemberPopupPanelType.CompleteProfile,\n              })\n            }\n          : openSignUpPopup,\n      },\n      [EarnCreditsTaskType.Subscribe]: {\n        finished: isSubscribed || isSubscribeSuccess,\n        onClick: isLogin\n          ? () => {\n              trackTaskButton(EarnCreditsTaskType.Subscribe)\n              pushView({\n                type: MemberPopupPanelType.SubscribeEmail,\n              })\n            }\n          : openSignUpPopup,\n      },\n      [EarnCreditsTaskType.Shop]: {\n        finished: false,\n        link: copy.goShopLink,\n        onClick: isLogin ? () => trackTaskButton(EarnCreditsTaskType.Shop) : openSignUpPopup,\n      },\n    }),\n    [\n      profile,\n      isLogin,\n      isActivateSuccess,\n      isProfileCompleteSuccess,\n      profileCompleted,\n      isSubscribed,\n      isSubscribeSuccess,\n      openSignUpPopup,\n      pushView,\n      copy.goShopLink,\n    ]\n  )\n\n  const list = useMemo(() => {\n    return copy.list\n      .map(item => {\n        const state = taskStates[item.id]\n        if (!state) return null\n        const buttonLabel = state.finished\n          ? copy.completed\n          : isLogin\n            ? getNotFinishedLabel(item.id, copy)\n            : copy.joinNow\n        return { ...item, ...state, buttonLabel }\n      })\n      .filter(Boolean) as ((typeof copy.list)[number] & {\n      finished: boolean\n      onClick?: () => void\n      link?: string\n      buttonLabel: string\n    })[]\n  }, [copy, taskStates, isLogin])\n\n  return (\n    <div className=\"flex flex-col gap-[16px]\">\n      <div className=\"flex flex-col gap-[16px]\">\n        <div className=\"flex flex-col gap-[8px]\">\n          {copy.title && <h2 className=\"text-[24px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.title}</h2>}\n        </div>\n\n        {isLogin && (\n          <div\n            className={cn(\n              'flex items-center gap-[12px] bg-[#f5f6f7] p-[16px]',\n              rounded ? 'rounded-[8px]' : 'rounded-none'\n            )}\n          >\n            <div className=\"flex flex-1 flex-col gap-[4px]\">\n              <div className=\"text-[14px] font-[700] text-[#1e2024]\">{copy.balanceLabel ?? 'AnkerCredits Balance'}</div>\n              <div className=\"flex items-end gap-[4px]\">\n                <span className=\"text-[24px] font-[700] leading-[1.2] text-[#1e2024]\">\n                  {numberFormat(creditInfo?.available_credit ?? 0)}\n                </span>\n                <span className=\"text-[14px] font-[700] leading-[1.4] text-[#1e2024]\">\n                  {copy.creditUnit ?? 'ankercredits'}\n                </span>\n              </div>\n            </div>\n            <div className=\"h-full w-px bg-[#dadce0]\" />\n            <div className=\"flex flex-1 flex-col gap-[4px]\">\n              <div className=\"text-[14px] font-[700] text-[#1e2024]\">{copy.comingSoonLabel ?? 'Coming Soon'}</div>\n              <div className=\"flex items-end gap-[4px]\">\n                <span className=\"text-[24px] font-[700] leading-[1.2] text-[#1e2024]\">\n                  {numberFormat(creditInfo?.pending_credit ?? 0)}\n                </span>\n                <span className=\"text-[14px] font-[700] leading-[1.4] text-[#1e2024]\">\n                  {copy.creditUnit ?? 'ankercredits'}\n                </span>\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n\n      <div className=\"flex flex-col gap-[16px]\">\n        {copy.subtitle && <p className=\"text-[16px] font-[700] text-[#1e2024]\">{copy.subtitle}</p>}\n\n        <div className=\"flex flex-col\">\n          {list.map((item, idx) => (\n            <div key={idx} className=\"relative py-[16px]\">\n              {idx > 0 && <div className=\"absolute left-0 right-0 top-0 h-px bg-[#dadce0]\" />}\n              <div className={cn('flex items-center gap-[12px]')}>\n                <TaskIcon id={item.id} className=\"size-[24px] shrink-0\" />\n                <div className=\"flex-1\">\n                  <div className=\"text-[16px] font-[700] text-[#1e2024]\">{item.title}</div>\n                  {item.credits && <div className=\"mt-[4px] text-[14px] font-bold text-[#4A4C56]\">{item.credits}</div>}\n                </div>\n                {!item.finished && item.link && isLogin ? (\n                  <Button\n                    as=\"a\"\n                    className=\"w-full\"\n                    href={item.link}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    onClick={() => trackTaskButton(item.id)}\n                  >\n                    {item.buttonLabel}\n                  </Button>\n                ) : (\n                  <Button\n                    className=\"w-full\"\n                    disabled={item.finished}\n                    onClick={!item.finished ? item.onClick : undefined}\n                  >\n                    {item.buttonLabel}\n                  </Button>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction getNotFinishedLabel(id: EarnCreditsTaskType, copy: EarnCreditsCopy): string {\n  switch (id) {\n    case EarnCreditsTaskType.Activate:\n      return copy.activate\n    case EarnCreditsTaskType.CompleteProfile:\n      return copy.completeProfileLabel\n    case EarnCreditsTaskType.Subscribe:\n      return copy.subscribeLabel\n    case EarnCreditsTaskType.Shop:\n      return copy.shopNow\n  }\n}\n\nexport default EarnCredits\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useEffect", "useMemo", "gaTrack", "cn", "useHeadlessContext", "useMemberPopupContext", "useViewStack", "useSubscribed", "EarnCreditsTaskType", "MemberPopupPanelType", "IconBag", "IconLock", "IconSubscription", "IconOrders", "numberFormat", "ROUNDED_BRANDS", "Button", "TaskIcon", "id", "className", "EarnCredits", "copy", "profile", "openSignUpPopup", "alpcConfig", "creditInfo", "fetchCreditInfo", "isSubscribeSuccess", "isActivateSuccess", "isProfileCompleteSuccess", "pushView", "locale", "brand", "rounded", "isLogin", "isSubscribed", "profileCompleted", "trackTaskButton", "taskId", "taskButtonNameMap", "taskStates", "list", "item", "state", "buttonLabel", "getNotFinishedLabel", "idx", "EarnCredits_default"]
 }

package/dist/esm/components/memberPopup/panels/Referral/index.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Picture as b}from"@anker-in/headless-ui";import{gaTrack as N,classNames as n,useHeadlessContext as w}from"@anker-in/lib";import{useMemberPopupContext as C}from"../../context/provider";import{useReferralOverview as L}from"./hooks/useReferralOverview";import{formatPrice as c}from"../../../credits/context/utils";import{ROUNDED_BRANDS as T}from"../../../../constants";function R({copy:e,onClose:_}){const{profile:p,alpcConfig:o,pageHandle:i}=C(),m=!!p,{brand:g,currencyCode:s="USD"}=w(),r=T.includes(g),{data:f}=L(),u=f?.data?.data?.available??0,v=f?.data?.data?.pending??0;function d(l){try{if(!i)return l;const x=new URL(l,window.location.href);return x.searchParams.set("ref",`${i}_referral`),x.toString()}catch{return l}}function h(){N({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"referral",button_name:"referral_cta",info:"Member Floating Window"}})}return a("div",{className:"flex flex-col",children:[e.title&&t("h2",{className:"text-[24px] font-[700] leading-[1.2] text-[#080a0f]",children:e.title}),m&&a("div",{className:n("flex items-center mt-[16px] gap-[12px] bg-[#f5f6f7] p-[16px]",r?"rounded-[8px]":"rounded-none"),children:[a("div",{className:"flex flex-1 flex-col gap-[4px]",children:[t("div",{className:"text-[14px] font-[700] text-[#1e2024]",children:e.cashAvailableLabel}),t("span",{className:"text-[24px] font-[700] leading-[1.2] text-[#1e2024]",children:c({amount:u,currencyCode:s,locale:o.locale})})]}),t("div",{className:"h-full w-px self-stretch bg-[#dadce0]"}),a("div",{className:"flex flex-1 flex-col gap-[4px]",children:[t("div",{className:"text-[14px] font-[700] text-[#1e2024]",children:e.cashPendingLabel}),t("span",{className:"text-[24px] font-[700] leading-[1.2] text-[#1e2024]",children:c({amount:v,currencyCode:s,locale:o.locale})})]})]}),(e.howToTitle||e.howToDescription)&&a("div",{className:"flex mt-[32px] flex-col gap-[8px]",children:[e.howToTitle&&t("h3",{className:"text-[20px] font-bold leading-[1.2] text-[#080a0f]",children:e.howToTitle}),e.howToDescription&&t("p",{className:"text-[14px] font-bold leading-[1.4] text-[#080A0F]",children:e.howToDescription}),e.learnMoreLabel&&e.learnMoreUrl&&a("a",{href:d(e.learnMoreUrl),target:"_blank",rel:"noopener noreferrer",className:"flex items-center gap-[4px] text-[14px] font-[700] text-[#080a0f] underline",children:[e.learnMoreLabel,t("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:t("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"})})]})]}),e.image?.url&&t(b,{source:e.image.url,alt:e.image.alt??"",className:n("mt-[8px] w-full",r?"rounded-[8px]":"rounded-none")}),e.ctaButton&&t("a",{href:e.ctaUrl?d(e.ctaUrl):"#",target:"_blank",rel:"noopener noreferrer",className:n("block w-full mt-[16px] cursor-pointer bg-[#080a0f] py-[14px] text-center text-[14px] font-[700] text-white",r?"rounded-[4px]":"rounded-none"),onClick:h,children:e.ctaButton})]})}var B=R;export{B as default};
+import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Button as b,Picture as N}from"@anker-in/headless-ui";import{gaTrack as w,classNames as x,useHeadlessContext as C}from"@anker-in/lib";import{useMemberPopupContext as L}from"../../context/provider";import{useReferralOverview as T}from"./hooks/useReferralOverview";import{formatPrice as c}from"../../../credits/context/utils";import{ROUNDED_BRANDS as R}from"../../../../constants";function _({copy:e,onClose:P}){const{profile:m,alpcConfig:r,pageHandle:n}=L(),p=!!m,{brand:g,currencyCode:o="USD"}=C(),s=R.includes(g),{data:i}=T(),u=i?.data?.data?.available??0,v=i?.data?.data?.pending??0;function f(l){try{if(!n)return l;const d=new URL(l,window.location.href);return d.searchParams.set("ref",`${n}_referral`),d.toString()}catch{return l}}function h(){w({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"referral",button_name:"referral_cta",info:"Member Floating Window"}})}return a("div",{className:"flex flex-col",children:[e.title&&t("h2",{className:"text-[24px] font-[700] leading-[1.2] text-[#080a0f]",children:e.title}),p&&a("div",{className:x("flex items-center mt-[16px] gap-[12px] bg-[#f5f6f7] p-[16px]",s?"rounded-[8px]":"rounded-none"),children:[a("div",{className:"flex flex-1 flex-col gap-[4px]",children:[t("div",{className:"text-[14px] font-[700] text-[#1e2024]",children:e.cashAvailableLabel}),t("span",{className:"text-[24px] font-[700] leading-[1.2] text-[#1e2024]",children:c({amount:u,currencyCode:o,locale:r.locale})})]}),t("div",{className:"h-full w-px self-stretch bg-[#dadce0]"}),a("div",{className:"flex flex-1 flex-col gap-[4px]",children:[t("div",{className:"text-[14px] font-[700] text-[#1e2024]",children:e.cashPendingLabel}),t("span",{className:"text-[24px] font-[700] leading-[1.2] text-[#1e2024]",children:c({amount:v,currencyCode:o,locale:r.locale})})]})]}),(e.howToTitle||e.howToDescription)&&a("div",{className:"flex mt-[32px] flex-col gap-[8px]",children:[e.howToTitle&&t("h3",{className:"text-[20px] font-bold leading-[1.2] text-[#080a0f]",children:e.howToTitle}),e.howToDescription&&t("p",{className:"text-[14px] font-bold leading-[1.4] text-[#080A0F]",children:e.howToDescription}),e.learnMoreLabel&&e.learnMoreUrl&&a("a",{href:f(e.learnMoreUrl),target:"_blank",rel:"noopener noreferrer",className:"flex items-center gap-[4px] text-[14px] font-[700] text-[#080a0f] underline",children:[e.learnMoreLabel,t("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:t("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"})})]})]}),e.image?.url&&t(N,{source:e.image.url,alt:e.image.alt??"",className:x("mt-[8px] w-full",s?"rounded-[8px]":"rounded-none")}),e.ctaButton&&t(b,{size:"base",as:"a",href:e.ctaUrl?f(e.ctaUrl):"#",target:"_blank",rel:"noopener noreferrer",onClick:h,children:e.ctaButton})]})}var F=_;export{F as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/components/memberPopup/panels/Referral/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/memberPopup/panels/Referral/index.tsx"],
-  "sourcesContent": ["import { Picture } from '@anker-in/headless-ui'\nimport { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport { useMemberPopupContext } from '../../context/provider'\nimport { useReferralOverview } from './hooks/useReferralOverview'\nimport { formatPrice } from '../../../credits/context/utils'\n\nimport type { ReferralCopy } from '../../type'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype Props = {\n  copy: ReferralCopy\n  onClose: () => void\n}\n\nfunction Referral({ copy, onClose }: Props) {\n  const { profile, alpcConfig, pageHandle } = useMemberPopupContext()\n  const isLogin = !!profile\n  const { brand, currencyCode = 'USD' as string } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  const { data } = useReferralOverview()\n\n  const cashAvailable = data?.data?.data?.available ?? 0\n  const cashPending = data?.data?.data?.pending ?? 0\n\n  function buildRefUrl(url: string) {\n    try {\n      if (!pageHandle) return url\n      const target = new URL(url, window.location.href)\n      target.searchParams.set('ref', `${pageHandle}_referral`)\n      return target.toString()\n    } catch {\n      return url\n    }\n  }\n\n  function trackReferralCta() {\n    gaTrack({\n      event: 'ga4Event',\n      event_name: 'lp_button',\n      event_parameters: {\n        position: 'referral',\n        button_name: 'referral_cta',\n        info: 'Member Floating Window',\n      },\n    })\n  }\n\n  return (\n    <div className=\"flex flex-col\">\n      {copy.title && <h2 className=\"text-[24px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.title}</h2>}\n\n      {isLogin && (\n        <div\n          className={cn(\n            'flex items-center mt-[16px] gap-[12px] bg-[#f5f6f7] p-[16px]',\n            rounded ? 'rounded-[8px]' : 'rounded-none'\n          )}\n        >\n          <div className=\"flex flex-1 flex-col gap-[4px]\">\n            <div className=\"text-[14px] font-[700] text-[#1e2024]\">{copy.cashAvailableLabel}</div>\n            <span className=\"text-[24px] font-[700] leading-[1.2] text-[#1e2024]\">\n              {formatPrice({ amount: cashAvailable, currencyCode, locale: alpcConfig.locale })}\n            </span>\n          </div>\n          <div className=\"h-full w-px self-stretch bg-[#dadce0]\" />\n          <div className=\"flex flex-1 flex-col gap-[4px]\">\n            <div className=\"text-[14px] font-[700] text-[#1e2024]\">{copy.cashPendingLabel}</div>\n            <span className=\"text-[24px] font-[700] leading-[1.2] text-[#1e2024]\">\n              {formatPrice({ amount: cashPending, currencyCode, locale: alpcConfig.locale })}\n            </span>\n          </div>\n        </div>\n      )}\n\n      {(copy.howToTitle || copy.howToDescription) && (\n        <div className=\"flex mt-[32px] flex-col gap-[8px]\">\n          {copy.howToTitle && <h3 className=\"text-[20px] font-bold leading-[1.2] text-[#080a0f]\">{copy.howToTitle}</h3>}\n          {copy.howToDescription && (\n            <p className=\"text-[14px] font-bold leading-[1.4] text-[#080A0F]\">{copy.howToDescription}</p>\n          )}\n          {copy.learnMoreLabel && copy.learnMoreUrl && (\n            <a\n              href={buildRefUrl(copy.learnMoreUrl)}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"flex items-center gap-[4px] text-[14px] font-[700] text-[#080a0f] underline\"\n            >\n              {copy.learnMoreLabel}\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path\n                  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\"\n                  fill=\"#080A0F\"\n                />\n              </svg>\n            </a>\n          )}\n        </div>\n      )}\n\n      {copy.image?.url && (\n        <Picture\n          source={copy.image.url}\n          alt={copy.image.alt ?? ''}\n          className={cn('mt-[8px] w-full', rounded ? 'rounded-[8px]' : 'rounded-none')}\n        />\n      )}\n\n      {copy.ctaButton && (\n        <a\n          href={copy.ctaUrl ? buildRefUrl(copy.ctaUrl) : '#'}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className={cn(\n            'block w-full mt-[16px] cursor-pointer bg-[#080a0f] py-[14px] text-center text-[14px] font-[700] text-white',\n            rounded ? 'rounded-[4px]' : 'rounded-none'\n          )}\n          onClick={trackReferralCta}\n        >\n          {copy.ctaButton}\n        </a>\n      )}\n    </div>\n  )\n}\n\nexport default Referral\n"],
-  "mappings": "AAkDqB,cAAAA,EASX,QAAAC,MATW,oBAlDrB,OAAS,WAAAC,MAAe,wBACxB,OAAS,WAAAC,EAAS,cAAcC,EAAI,sBAAAC,MAA0B,gBAC9D,OAAS,yBAAAC,MAA6B,yBACtC,OAAS,uBAAAC,MAA2B,8BACpC,OAAS,eAAAC,MAAmB,iCAG5B,OAAS,kBAAAC,MAAsB,wBAO/B,SAASC,EAAS,CAAE,KAAAC,EAAM,QAAAC,CAAQ,EAAU,CAC1C,KAAM,CAAE,QAAAC,EAAS,WAAAC,EAAY,WAAAC,CAAW,EAAIT,EAAsB,EAC5DU,EAAU,CAAC,CAACH,EACZ,CAAE,MAAAI,EAAO,aAAAC,EAAe,KAAgB,EAAIb,EAAmB,EAC/Dc,EAAUV,EAAe,SAASQ,CAAK,EAEvC,CAAE,KAAAG,CAAK,EAAIb,EAAoB,EAE/Bc,EAAgBD,GAAM,MAAM,MAAM,WAAa,EAC/CE,EAAcF,GAAM,MAAM,MAAM,SAAW,EAEjD,SAASG,EAAYC,EAAa,CAChC,GAAI,CACF,GAAI,CAACT,EAAY,OAAOS,EACxB,MAAMC,EAAS,IAAI,IAAID,EAAK,OAAO,SAAS,IAAI,EAChD,OAAAC,EAAO,aAAa,IAAI,MAAO,GAAGV,CAAU,WAAW,EAChDU,EAAO,SAAS,CACzB,MAAQ,CACN,OAAOD,CACT,CACF,CAEA,SAASE,GAAmB,CAC1BvB,EAAQ,CACN,MAAO,WACP,WAAY,YACZ,iBAAkB,CAChB,SAAU,WACV,YAAa,eACb,KAAM,wBACR,CACF,CAAC,CACH,CAEA,OACEF,EAAC,OAAI,UAAU,gBACZ,UAAAU,EAAK,OAASX,EAAC,MAAG,UAAU,sDAAuD,SAAAW,EAAK,MAAM,EAE9FK,GACCf,EAAC,OACC,UAAWG,EACT,+DACAe,EAAU,gBAAkB,cAC9B,EAEA,UAAAlB,EAAC,OAAI,UAAU,iCACb,UAAAD,EAAC,OAAI,UAAU,wCAAyC,SAAAW,EAAK,mBAAmB,EAChFX,EAAC,QAAK,UAAU,sDACb,SAAAQ,EAAY,CAAE,OAAQa,EAAe,aAAAH,EAAc,OAAQJ,EAAW,MAAO,CAAC,EACjF,GACF,EACAd,EAAC,OAAI,UAAU,wCAAwC,EACvDC,EAAC,OAAI,UAAU,iCACb,UAAAD,EAAC,OAAI,UAAU,wCAAyC,SAAAW,EAAK,iBAAiB,EAC9EX,EAAC,QAAK,UAAU,sDACb,SAAAQ,EAAY,CAAE,OAAQc,EAAa,aAAAJ,EAAc,OAAQJ,EAAW,MAAO,CAAC,EAC/E,GACF,GACF,GAGAH,EAAK,YAAcA,EAAK,mBACxBV,EAAC,OAAI,UAAU,oCACZ,UAAAU,EAAK,YAAcX,EAAC,MAAG,UAAU,qDAAsD,SAAAW,EAAK,WAAW,EACvGA,EAAK,kBACJX,EAAC,KAAE,UAAU,qDAAsD,SAAAW,EAAK,iBAAiB,EAE1FA,EAAK,gBAAkBA,EAAK,cAC3BV,EAAC,KACC,KAAMsB,EAAYZ,EAAK,YAAY,EACnC,OAAO,SACP,IAAI,sBACJ,UAAU,8EAET,UAAAA,EAAK,eACNX,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACnD,SAAAA,EAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,GACF,GAEJ,EAGDW,EAAK,OAAO,KACXX,EAACE,EAAA,CACC,OAAQS,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,KAAO,GACvB,UAAWP,EAAG,kBAAmBe,EAAU,gBAAkB,cAAc,EAC7E,EAGDR,EAAK,WACJX,EAAC,KACC,KAAMW,EAAK,OAASY,EAAYZ,EAAK,MAAM,EAAI,IAC/C,OAAO,SACP,IAAI,sBACJ,UAAWP,EACT,6GACAe,EAAU,gBAAkB,cAC9B,EACA,QAASO,EAER,SAAAf,EAAK,UACR,GAEJ,CAEJ,CAEA,IAAOgB,EAAQjB",
-  "names": ["jsx", "jsxs", "Picture", "gaTrack", "cn", "useHeadlessContext", "useMemberPopupContext", "useReferralOverview", "formatPrice", "ROUNDED_BRANDS", "Referral", "copy", "onClose", "profile", "alpcConfig", "pageHandle", "isLogin", "brand", "currencyCode", "rounded", "data", "cashAvailable", "cashPending", "buildRefUrl", "url", "target", "trackReferralCta", "Referral_default"]
+  "sourcesContent": ["import { Button, Picture } from '@anker-in/headless-ui'\nimport { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport { useMemberPopupContext } from '../../context/provider'\nimport { useReferralOverview } from './hooks/useReferralOverview'\nimport { formatPrice } from '../../../credits/context/utils'\n\nimport type { ReferralCopy } from '../../type'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype Props = {\n  copy: ReferralCopy\n  onClose: () => void\n}\n\nfunction Referral({ copy, onClose }: Props) {\n  const { profile, alpcConfig, pageHandle } = useMemberPopupContext()\n  const isLogin = !!profile\n  const { brand, currencyCode = 'USD' as string } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  const { data } = useReferralOverview()\n\n  const cashAvailable = data?.data?.data?.available ?? 0\n  const cashPending = data?.data?.data?.pending ?? 0\n\n  function buildRefUrl(url: string) {\n    try {\n      if (!pageHandle) return url\n      const target = new URL(url, window.location.href)\n      target.searchParams.set('ref', `${pageHandle}_referral`)\n      return target.toString()\n    } catch {\n      return url\n    }\n  }\n\n  function trackReferralCta() {\n    gaTrack({\n      event: 'ga4Event',\n      event_name: 'lp_button',\n      event_parameters: {\n        position: 'referral',\n        button_name: 'referral_cta',\n        info: 'Member Floating Window',\n      },\n    })\n  }\n\n  return (\n    <div className=\"flex flex-col\">\n      {copy.title && <h2 className=\"text-[24px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.title}</h2>}\n\n      {isLogin && (\n        <div\n          className={cn(\n            'flex items-center mt-[16px] gap-[12px] bg-[#f5f6f7] p-[16px]',\n            rounded ? 'rounded-[8px]' : 'rounded-none'\n          )}\n        >\n          <div className=\"flex flex-1 flex-col gap-[4px]\">\n            <div className=\"text-[14px] font-[700] text-[#1e2024]\">{copy.cashAvailableLabel}</div>\n            <span className=\"text-[24px] font-[700] leading-[1.2] text-[#1e2024]\">\n              {formatPrice({ amount: cashAvailable, currencyCode, locale: alpcConfig.locale })}\n            </span>\n          </div>\n          <div className=\"h-full w-px self-stretch bg-[#dadce0]\" />\n          <div className=\"flex flex-1 flex-col gap-[4px]\">\n            <div className=\"text-[14px] font-[700] text-[#1e2024]\">{copy.cashPendingLabel}</div>\n            <span className=\"text-[24px] font-[700] leading-[1.2] text-[#1e2024]\">\n              {formatPrice({ amount: cashPending, currencyCode, locale: alpcConfig.locale })}\n            </span>\n          </div>\n        </div>\n      )}\n\n      {(copy.howToTitle || copy.howToDescription) && (\n        <div className=\"flex mt-[32px] flex-col gap-[8px]\">\n          {copy.howToTitle && <h3 className=\"text-[20px] font-bold leading-[1.2] text-[#080a0f]\">{copy.howToTitle}</h3>}\n          {copy.howToDescription && (\n            <p className=\"text-[14px] font-bold leading-[1.4] text-[#080A0F]\">{copy.howToDescription}</p>\n          )}\n          {copy.learnMoreLabel && copy.learnMoreUrl && (\n            <a\n              href={buildRefUrl(copy.learnMoreUrl)}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"flex items-center gap-[4px] text-[14px] font-[700] text-[#080a0f] underline\"\n            >\n              {copy.learnMoreLabel}\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path\n                  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\"\n                  fill=\"#080A0F\"\n                />\n              </svg>\n            </a>\n          )}\n        </div>\n      )}\n\n      {copy.image?.url && (\n        <Picture\n          source={copy.image.url}\n          alt={copy.image.alt ?? ''}\n          className={cn('mt-[8px] w-full', rounded ? 'rounded-[8px]' : 'rounded-none')}\n        />\n      )}\n\n      {copy.ctaButton && (\n        <Button\n          size=\"base\"\n          as=\"a\"\n          href={copy.ctaUrl ? buildRefUrl(copy.ctaUrl) : '#'}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          onClick={trackReferralCta}\n        >\n          {copy.ctaButton}\n        </Button>\n      )}\n    </div>\n  )\n}\n\nexport default Referral\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "Button", "Picture", "gaTrack", "cn", "useHeadlessContext", "useMemberPopupContext", "useReferralOverview", "formatPrice", "ROUNDED_BRANDS", "Referral", "copy", "onClose", "profile", "alpcConfig", "pageHandle", "isLogin", "brand", "currencyCode", "rounded", "data", "cashAvailable", "cashPending", "buildRefUrl", "url", "target", "trackReferralCta", "Referral_default"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/campaign-ui",
-  "version": "0.5.0-beta.25",
+  "version": "0.5.0-beta.26",
   "description": "Campaign UI components and utilities for Anker projects",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",

package/src/components/memberPopup/panels/ActivitiesSubscribePanel.tsx

@@ -127,16 +127,9 @@ export default function ActivitiesSubscribeModal({ copy, email: initialEmail }:
         />
       </div>
 
-      <button
-        className={cn(
-          'w-full cursor-pointer bg-[#080a0f] mt-[16px] py-[14px] text-[14px] font-[700] text-white disabled:opacity-60',
-          rounded ? 'rounded-[4px]' : 'rounded-none'
-        )}
-        disabled={loading}
-        onClick={handleSubmit}
-      >
+      <Button className={'w-full mt-[16px]'} loading={loading} onClick={handleSubmit}>
         {copy.buttonLabel ?? 'Subscribe'}
-      </button>
+      </Button>
 
       {errorMessage && (
         <div className="text-left mt-[4px] text-[16px] font-semibold text-[#f84d4f]">

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

@@ -133,16 +133,7 @@ export default function RedeemCouponPanel({ onClose, item, copy, onError }: Prop
           </div>
           <Text className="text-[20px] font-[700]" html={redeemModal.successTitle} />
           <Text className="text-[14px] font-[700] text-[#6d6d6f]" html={redeemModal.successDesc} />
-          <Button
-            className={cn(
-              'w-full py-[12px] text-[14px] font-[700] text-white bg-[#080a0f]',
-              rounded ? 'rounded-[4px]' : 'rounded-none'
-            )}
-            onClick={() => {
-              if (redeemModal.successButtonUrl) window.location.href = redeemModal.successButtonUrl
-              onClose()
-            }}
-          >
+          <Button as="a" href={redeemModal.successButtonUrl} className="w-full">
             {redeemModal.successButton}
           </Button>
         </div>
@@ -152,15 +143,7 @@ export default function RedeemCouponPanel({ onClose, item, copy, onError }: Prop
         <div className="sticky bottom-0 bg-white border-t border-[#e5e5e5] pt-[10px]">
           <div className="flex flex-col gap-[8px] text-center">
             <Text className="block text-[16px] font-[700] leading-[1.3]" html={redeemModal.confirmTitle} />
-            <Button
-              className={cn(
-                'w-full py-[12px] text-[14px] font-[700] text-white disabled:opacity-60 bg-[#080a0f]',
-                rounded ? 'rounded-[4px]' : 'rounded-none'
-              )}
-              disabled={disabled}
-              loading={loading}
-              onClick={handleConfirm}
-            >
+            <Button className="w-full" disabled={disabled} loading={loading} onClick={handleConfirm}>
               {redeemModal.confirmButton}
             </Button>
           </div>

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

@@ -278,7 +278,7 @@ function ConsumeCredits({ copy }: Props) {
                               {Number(item.price).toFixed(2)}
                             </div>
                             {item.variant?.price?.amount && (
-                              <div className="text-[12px] text-[#999] line-through">
+                              <div className="text-[12px] ml-1 text-[#999] line-through">
                                 ${Number(item.variant.price.amount).toFixed(2)}
                               </div>
                             )}
@@ -290,10 +290,7 @@ function ConsumeCredits({ copy }: Props) {
                     </div>
                     <div className="relative group">
                       <Button
-                        className={cn(
-                          'bg-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',
-                          rounded ? 'rounded-[4px]' : 'rounded-none'
-                        )}
+                        size="base"
                         disabled={isDisabled(item)}
                         loading={loadingId === item.redeemId}
                         onClick={() => handleRedeem(item)}

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

@@ -326,7 +326,7 @@ export default function ActivatePanel({ copy, onClose }: Props) {
         <Button
           type="submit"
           loading={emailValidationLoading}
-          className="mt-6 flex h-[54px] w-full cursor-pointer items-center justify-center px-8 py-[15px] text-center text-base font-bold leading-[100%] text-white min-l:mt-8"
+          className="mt-6 w-full min-l:mt-8"
           onClick={handleAuthCodeSubmit}
         >
           {copy.buttonText}

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

@@ -197,10 +197,10 @@ export default function CompleteProfilePanel({ copy, onClose }: Props) {
       </div>
 
       <div className="flex gap-[12px]">
-        <Button variant="secondary" size="lg" className="flex-1" onClick={onClose} disabled={isLoading}>
+        <Button variant="secondary" size="base" className="flex-1" onClick={onClose} disabled={isLoading}>
           {copy.cancel}
         </Button>
-        <Button variant="primary" size="lg" className="flex-1" loading={isLoading} onClick={handleSubmit}>
+        <Button variant="primary" size="base" className="flex-1" loading={isLoading} onClick={handleSubmit}>
           {copy.save}
         </Button>
       </div>

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
-import { Checkbox, Text } from '@anker-in/headless-ui'
+import { Button, Checkbox, Text } from '@anker-in/headless-ui'
 import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import Cookies from 'js-cookie'
 import { parse } from 'query-string'
@@ -91,12 +91,8 @@ export default function SubscribeEmailPanel({ copy, email: initialEmail, onClose
   return (
     <div className="flex flex-col gap-[12px]">
       <div className="flex flex-col gap-[8px]">
-        {copy.title && (
-          <h2 className="text-[24px] font-[700] leading-[1.2] text-[#080a0f]">{copy.title}</h2>
-        )}
-        {copy.desc && (
-          <Text className="text-[16px] text-[#1e2024]" html={copy.desc} />
-        )}
+        {copy.title && <h2 className="text-[24px] font-[700] leading-[1.2] text-[#080a0f]">{copy.title}</h2>}
+        {copy.desc && <Text className="text-[16px] text-[#1e2024]" html={copy.desc} />}
       </div>
 
       <div className="flex flex-col gap-[16px]">
@@ -108,7 +104,10 @@ export default function SubscribeEmailPanel({ copy, email: initialEmail, onClose
           )}
           placeholder={copy.placeholder}
           value={email}
-          onChange={e => { setErrorMessage(''); setEmail(e.target.value.trim()) }}
+          onChange={e => {
+            setErrorMessage('')
+            setEmail(e.target.value.trim())
+          }}
         />
 
         <div className="flex w-full items-start gap-[8px]">
@@ -121,18 +120,20 @@ export default function SubscribeEmailPanel({ copy, email: initialEmail, onClose
         </div>
 
         {(errorMessage || successMessage) && (
-          <div className={cn('text-[14px] font-[700]', errorMessage && 'text-[#f84d4f]', successMessage && 'text-[#52c41a]')}>
+          <div
+            className={cn(
+              'text-[14px] font-[700]',
+              errorMessage && 'text-[#f84d4f]',
+              successMessage && 'text-[#52c41a]'
+            )}
+          >
             <Text html={successMessage || errorMessage} />
           </div>
         )}
 
-        <button
-          className={cn('w-full cursor-pointer bg-[#080a0f] py-[14px] text-[14px] font-[700] text-white disabled:opacity-60', rounded ? 'rounded-[4px]' : 'rounded-none')}
-          disabled={loading}
-          onClick={handleSubmit}
-        >
+        <Button className="w-full" loading={loading} onClick={handleSubmit}>
           {copy.buttonLabel ?? 'Subscribe'}
-        </button>
+        </Button>
       </div>
     </div>
   )

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

@@ -7,6 +7,7 @@ import { EarnCreditsTaskType, MemberPopupPanelType, type EarnCreditsCopy } from
 import { IconBag, IconLock, IconSubscription, IconOrders } from '../../icons'
 import { numberFormat } from '../../../credits/context/utils'
 import { ROUNDED_BRANDS } from '../../../../constants'
+import { Button } from '@anker-in/headless-ui'
 
 function TaskIcon({ id, className }: { id: EarnCreditsTaskType; className?: string }) {
   switch (id) {
@@ -207,36 +208,27 @@ function EarnCredits({ copy }: Props) {
                 <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.credits && (
-                    <div className="mt-[4px] text-[14px] font-bold text-[#4A4C56]">{item.credits}</div>
-                  )}
+                  {item.credits && <div className="mt-[4px] text-[14px] font-bold text-[#4A4C56]">{item.credits}</div>}
                 </div>
                 {!item.finished && item.link && isLogin ? (
-                  <a
+                  <Button
+                    as="a"
+                    className="w-full"
                     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'
-                    )}
                     onClick={() => trackTaskButton(item.id)}
                   >
                     {item.buttonLabel}
-                  </a>
+                  </Button>
                 ) : (
-                  <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',
-                      item.finished && 'opacity-60'
-                    )}
+                  <Button
+                    className="w-full"
                     disabled={item.finished}
                     onClick={!item.finished ? item.onClick : undefined}
                   >
                     {item.buttonLabel}
-                  </button>
+                  </Button>
                 )}
               </div>
             </div>

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

@@ -1,4 +1,4 @@
-import { Picture } from '@anker-in/headless-ui'
+import { Button, Picture } from '@anker-in/headless-ui'
 import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useMemberPopupContext } from '../../context/provider'
 import { useReferralOverview } from './hooks/useReferralOverview'
@@ -107,18 +107,16 @@ function Referral({ copy, onClose }: Props) {
       )}
 
       {copy.ctaButton && (
-        <a
+        <Button
+          size="base"
+          as="a"
           href={copy.ctaUrl ? buildRefUrl(copy.ctaUrl) : '#'}
           target="_blank"
           rel="noopener noreferrer"
-          className={cn(
-            'block w-full mt-[16px] cursor-pointer bg-[#080a0f] py-[14px] text-center text-[14px] font-[700] text-white',
-            rounded ? 'rounded-[4px]' : 'rounded-none'
-          )}
           onClick={trackReferralCta}
         >
           {copy.ctaButton}
-        </a>
+        </Button>
       )}
     </div>
   )

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

@@ -1,191 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Button, Text } from '@anker-in/headless-ui'
-import { classNames as cn } from '@anker-in/lib'
-import { CreditsModalContainer } from '../../../credits/modal/ModalContainer'
-import type { CompleteProfileCopy } from '../../type'
-import { useUpdateProfile } from './hooks/useUpdateProfile'
-import useCountries from '../../../credits/context/hooks/useCountries'
-import { useMemberPopupContext } from '../../context/provider'
-
-type Props = {
-  isOpen: boolean
-  onClose: () => void
-  onSuccess?: () => void
-  copy: CompleteProfileCopy
-  shopifyStoreDomain?: string
-}
-
-export function CompleteProfileModal({ isOpen, onClose, onSuccess, copy, shopifyStoreDomain = '' }: Props) {
-  const { profile, fetchCreditInfo, alpcConfig } = useMemberPopupContext()
-  const { locale } = alpcConfig
-
-  const [firstName, setFirstName] = useState('')
-  const [lastName, setLastName] = useState('')
-  const [phone, setPhone] = useState('')
-  const [birthDay, setBirthDay] = useState('')
-  const [country, setCountry] = useState('')
-  const [firstNameError, setFirstNameError] = useState('')
-  const [lastNameError, setLastNameError] = useState('')
-
-  const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName })
-  const { countries } = useCountries({ shopifyStoreDomain })
-
-  useEffect(() => {
-    if (profile) {
-      setFirstName(profile.first_name ?? '')
-      setLastName(profile.last_name ?? '')
-      setPhone(profile.phone_number ?? '')
-      setBirthDay(profile.dob ?? '')
-      setCountry(profile.country?.id ?? '')
-    }
-  }, [profile])
-
-  useEffect(() => {
-    if (countries.length > 0 && !country) {
-      setCountry(countries[0].id)
-    }
-  }, [countries])
-
-  const validate = useCallback(() => {
-    let hasError = false
-    if (!firstName.trim()) {
-      setFirstNameError(copy.required)
-      hasError = true
-    } else {
-      setFirstNameError('')
-    }
-    if (!lastName.trim()) {
-      setLastNameError(copy.required)
-      hasError = true
-    } else {
-      setLastNameError('')
-    }
-    return hasError
-  }, [firstName, lastName, copy.required])
-
-  const handleSubmit = useCallback(async () => {
-    if (validate()) return
-    const success = await updateProfile({
-      first_name: firstName.trim(),
-      last_name: lastName.trim(),
-      phone_number: phone,
-      country,
-      dob: birthDay,
-    })
-    if (success) {
-      fetchCreditInfo(profile?.user_id)
-      onSuccess?.()
-      onClose()
-    }
-  }, [validate, updateProfile, firstName, lastName, phone, country, birthDay, fetchCreditInfo, profile, onSuccess, onClose])
-
-  return (
-    <CreditsModalContainer
-      isOpen={isOpen}
-      onClose={onClose}
-      title={copy.title}
-      titleClassName="!h-auto !border-b-0 !pb-0"
-      className="w-[540px] md:h-auto"
-      useAnimation
-      animationClassName="md:translate-y-[100vh]"
-    >
-      <div className="flex flex-col gap-[20px]">
-        {copy.subtitle && (
-          <Text className="text-[14px] text-[#1d1d1f]" html={copy.subtitle} />
-        )}
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.email}</label>
-          <input
-            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]"
-            value={profile?.email ?? ''}
-            disabled
-          />
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">
-            {copy.firstName} <span className="text-[#f84d4f]">*</span>
-          </label>
-          <input
-            className={cn(
-              'mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none',
-              firstNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]'
-            )}
-            value={firstName}
-            onChange={e => { setFirstName(e.target.value); setFirstNameError('') }}
-          />
-          {firstNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={firstNameError} />}
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">
-            {copy.lastName} <span className="text-[#f84d4f]">*</span>
-          </label>
-          <input
-            className={cn(
-              'mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none',
-              lastNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]'
-            )}
-            value={lastName}
-            onChange={e => { setLastName(e.target.value); setLastNameError('') }}
-          />
-          {lastNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={lastNameError} />}
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.birthday}</label>
-          <input
-            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
-            type="date"
-            value={birthDay}
-            onChange={e => setBirthDay(e.target.value)}
-          />
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.phone}</label>
-          <input
-            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
-            value={phone}
-            onChange={e => setPhone(e.target.value)}
-          />
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.country}</label>
-          <select
-            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
-            value={country}
-            onChange={e => setCountry(e.target.value)}
-          >
-            {countries.map((c: { id: string; name: string }) => (
-              <option key={c.id} value={c.id}>{c.name}</option>
-            ))}
-          </select>
-        </div>
-
-        <div className="flex gap-[12px]">
-          <Button
-            variant="secondary"
-            size="lg"
-            className="flex-1"
-            onClick={onClose}
-            disabled={isLoading}
-          >
-            {copy.cancel}
-          </Button>
-          <Button
-            variant="primary"
-            size="lg"
-            className="flex-1"
-            loading={isLoading}
-            onClick={handleSubmit}
-          >
-            {copy.save}
-          </Button>
-        </div>
-      </div>
-    </CreditsModalContainer>
-  )
-}