@anker-in/campaign-ui 0.5.0-beta.24 → 0.5.0-beta.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/memberPopup/panels/ActivitiesSubscribePanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/ActivitiesSubscribePanel.js.map +2 -2
- package/dist/cjs/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.js.map +2 -2
- package/dist/cjs/components/memberPopup/panels/ConsumeCredits/index.js +1 -1
- package/dist/cjs/components/memberPopup/panels/ConsumeCredits/index.js.map +3 -3
- package/dist/cjs/components/memberPopup/panels/EarnCredits/ActivatePanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/EarnCredits/ActivatePanel.js.map +2 -2
- package/dist/cjs/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.js.map +2 -2
- package/dist/cjs/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.js.map +2 -2
- package/dist/cjs/components/memberPopup/panels/EarnCredits/index.js +1 -1
- package/dist/cjs/components/memberPopup/panels/EarnCredits/index.js.map +3 -3
- package/dist/cjs/components/memberPopup/panels/Referral/index.js +1 -1
- package/dist/cjs/components/memberPopup/panels/Referral/index.js.map +2 -2
- package/dist/cjs/components/memberPopup/type.d.ts +3 -0
- package/dist/cjs/components/memberPopup/type.js +1 -1
- package/dist/cjs/components/memberPopup/type.js.map +1 -1
- package/dist/esm/components/memberPopup/panels/ActivitiesSubscribePanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/ActivitiesSubscribePanel.js.map +3 -3
- package/dist/esm/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.js.map +2 -2
- package/dist/esm/components/memberPopup/panels/ConsumeCredits/index.js +1 -1
- package/dist/esm/components/memberPopup/panels/ConsumeCredits/index.js.map +3 -3
- package/dist/esm/components/memberPopup/panels/EarnCredits/ActivatePanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/EarnCredits/ActivatePanel.js.map +2 -2
- package/dist/esm/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.js.map +2 -2
- package/dist/esm/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.js.map +3 -3
- package/dist/esm/components/memberPopup/panels/EarnCredits/index.js +1 -1
- package/dist/esm/components/memberPopup/panels/EarnCredits/index.js.map +3 -3
- package/dist/esm/components/memberPopup/panels/Referral/index.js +1 -1
- package/dist/esm/components/memberPopup/panels/Referral/index.js.map +3 -3
- package/dist/esm/components/memberPopup/type.d.ts +3 -0
- package/dist/esm/components/memberPopup/type.js.map +1 -1
- package/package.json +2 -1
- package/src/components/memberPopup/panels/ActivitiesSubscribePanel.tsx +2 -9
- package/src/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.tsx +3 -20
- package/src/components/memberPopup/panels/ConsumeCredits/index.tsx +34 -16
- package/src/components/memberPopup/panels/EarnCredits/ActivatePanel.tsx +1 -1
- package/src/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.tsx +2 -2
- package/src/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.tsx +16 -15
- package/src/components/memberPopup/panels/EarnCredits/index.tsx +9 -17
- package/src/components/memberPopup/panels/Referral/index.tsx +5 -7
- package/src/components/memberPopup/type.ts +3 -0
- package/src/components/memberPopup/panels/EarnCredits/CompleteProfileModal.tsx +0 -191
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useEffect as w,useMemo as f}from"react";import{gaTrack as A,classNames as h,useHeadlessContext as I}from"@anker-in/lib";import{useMemberPopupContext as U}from"../../context/provider";import{useViewStack as M}from"../../context/viewStack";import{useSubscribed as R}from"./hooks/useSubscribed";import{EarnCreditsTaskType as s,MemberPopupPanelType as m}from"../../type";import{IconBag as y,IconLock as D,IconSubscription as F,IconOrders as O}from"../../icons";import{numberFormat as S}from"../../../credits/context/utils";import{ROUNDED_BRANDS as V}from"../../../../constants";import{Button as T}from"@anker-in/headless-ui";function z({id:i,className:e}){switch(i){case s.Activate:return t(D,{className:e});case s.Subscribe:return t(F,{className:e});case s.Shop:return t(y,{className:e});case s.CompleteProfile:return t(O,{className:e})}}function H({copy:i}){const{profile:e,openSignUpPopup:r,alpcConfig:u,creditInfo:x,fetchCreditInfo:_,isSubscribeSuccess:b,isActivateSuccess:v,isProfileCompleteSuccess:p}=U(),{pushView:d}=M(),{locale:E}=u,{brand:g}=I(),P=V.includes(g);w(()=>{e?.user_id&&_(e.user_id)},[]);const l=!!e,C=R({userId:e?.user_id,brand:g,email:e?.email,locale:E,apiBaseUrl:u.apiBaseUrl}),N=f(()=>p||!!(e?.first_name||e?.last_name)&&!!e?.phone_number&&!!e?.dob,[e,p]);function c(a){const o={[s.Activate]:"activate",[s.CompleteProfile]:"complete_profile",[s.Subscribe]:"subscribe",[s.Shop]:"shop"};A({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"earn_credits",button_name:o[a],info:"Member Floating Window"}})}const k=f(()=>({[s.Activate]:{finished:!!e?.activated||v,onClick:l?()=>{c(s.Activate),d({type:m.Activate})}:r},[s.CompleteProfile]:{finished:N,onClick:l?()=>{c(s.CompleteProfile),d({type:m.CompleteProfile})}:r},[s.Subscribe]:{finished:C||b,onClick:l?()=>{c(s.Subscribe),d({type:m.SubscribeEmail})}:r},[s.Shop]:{finished:!1,link:i.goShopLink,onClick:l?()=>c(s.Shop):r}}),[e,l,v,p,N,C,b,r,d,i.goShopLink]),L=f(()=>i.list.map(a=>{const o=k[a.id];if(!o)return null;const B=o.finished?i.completed:l?W(a.id,i):i.joinNow;return{...a,...o,buttonLabel:B}}).filter(Boolean),[i,k,l]);return n("div",{className:"flex flex-col gap-[16px]",children:[n("div",{className:"flex flex-col gap-[16px]",children:[t("div",{className:"flex flex-col gap-[8px]",children:i.title&&t("h2",{className:"text-[24px] font-[700] leading-[1.2] text-[#080a0f]",children:i.title})}),l&&n("div",{className:h("flex items-center gap-[12px] bg-[#f5f6f7] p-[16px]",P?"rounded-[8px]":"rounded-none"),children:[n("div",{className:"flex flex-1 flex-col gap-[4px]",children:[t("div",{className:"text-[14px] font-[700] text-[#1e2024]",children:i.balanceLabel??"AnkerCredits Balance"}),n("div",{className:"flex items-end gap-[4px]",children:[t("span",{className:"text-[24px] font-[700] leading-[1.2] text-[#1e2024]",children:S(x?.available_credit??0)}),t("span",{className:"text-[14px] font-[700] leading-[1.4] text-[#1e2024]",children:i.creditUnit??"ankercredits"})]})]}),t("div",{className:"h-full w-px bg-[#dadce0]"}),n("div",{className:"flex flex-1 flex-col gap-[4px]",children:[t("div",{className:"text-[14px] font-[700] text-[#1e2024]",children:i.comingSoonLabel??"Coming Soon"}),n("div",{className:"flex items-end gap-[4px]",children:[t("span",{className:"text-[24px] font-[700] leading-[1.2] text-[#1e2024]",children:S(x?.pending_credit??0)}),t("span",{className:"text-[14px] font-[700] leading-[1.4] text-[#1e2024]",children:i.creditUnit??"ankercredits"})]})]})]})]}),n("div",{className:"flex flex-col gap-[16px]",children:[i.subtitle&&t("p",{className:"text-[16px] font-[700] text-[#1e2024]",children:i.subtitle}),t("div",{className:"flex flex-col",children:L.map((a,o)=>n("div",{className:"relative py-[16px]",children:[o>0&&t("div",{className:"absolute left-0 right-0 top-0 h-px bg-[#dadce0]"}),n("div",{className:h("flex items-center gap-[12px]"),children:[t(z,{id:a.id,className:"size-[24px] shrink-0"}),n("div",{className:"flex-1",children:[t("div",{className:"text-[16px] font-[700] text-[#1e2024]",children:a.title}),a.credits&&t("div",{className:"mt-[4px] text-[14px] font-bold text-[#4A4C56]",children:a.credits})]}),!a.finished&&a.link&&l?t(T,{as:"a",className:"w-full",href:a.link,target:"_blank",rel:"noopener noreferrer",onClick:()=>c(a.id),children:a.buttonLabel}):t(T,{className:"w-full",disabled:a.finished,onClick:a.finished?void 0:a.onClick,children:a.buttonLabel})]})]},o))})]})]})}function W(i,e){switch(i){case s.Activate:return e.activate;case s.CompleteProfile:return e.completeProfileLabel;case s.Subscribe:return e.subscribeLabel;case s.Shop:return e.shopNow}}var ee=H;export{ee as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/memberPopup/panels/EarnCredits/index.tsx"],
|
|
4
|
-
"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 &&
|
|
5
|
-
"mappings": "
|
|
6
|
-
"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"]
|
|
4
|
+
"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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"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"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Picture as
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/memberPopup/panels/Referral/index.tsx"],
|
|
4
|
-
"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
|
|
5
|
-
"mappings": "AAkDqB,cAAAA,EASX,QAAAC,MATW,oBAlDrB,OAAS,WAAAC,MAAe,
|
|
6
|
-
"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"]
|
|
4
|
+
"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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"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"]
|
|
7
7
|
}
|
|
@@ -147,6 +147,7 @@ export type ConsumeCreditsopy = {
|
|
|
147
147
|
comingSoonLabel?: string;
|
|
148
148
|
creditUnit?: string;
|
|
149
149
|
off?: string;
|
|
150
|
+
giftCard?: string;
|
|
150
151
|
imageMapping?: {
|
|
151
152
|
[key in ConsumeCreditsItemType]?: {
|
|
152
153
|
url: string;
|
|
@@ -190,6 +191,8 @@ export type RedeemCouponModalCopy = {
|
|
|
190
191
|
successDesc: string;
|
|
191
192
|
successButton: string;
|
|
192
193
|
successButtonUrl?: string;
|
|
194
|
+
copyLabel?: string;
|
|
195
|
+
copiedLabel?: string;
|
|
193
196
|
};
|
|
194
197
|
export type ReferralCopy = {
|
|
195
198
|
title?: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/memberPopup/type.ts"],
|
|
4
|
-
"sourcesContent": ["import type { AuthCodeActivateCopy } from '../registration/authCodeActivate/type'\nimport type { CreditInfoResponse } from '../credits/context/response'\nimport type { DTC_TASK_TYPE } from '../credits/context/const'\n\nexport type { AuthCodeActivateCopy }\n\n// \u2500\u2500\u2500 \u9762\u677F\u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum MemberPopupPanelType {\n EarnCredits = 'EARN_CREDITS',\n ConsumeCredits = 'CONSUME_CREDITS',\n Referral = 'REFERRAL',\n CompleteProfile = 'COMPLETE_PROFILE',\n Subscribe = 'SUBSCRIBE',\n SubscribeEmail = 'SUBSCRIBE_EMAIL',\n RedeemCoupon = 'REDEEM_COUPON',\n Activate = 'ACTIVATE',\n}\n\n// \u2500\u2500\u2500 item action \u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum MemberPopupActionType {\n ExternalLink = 'EXTERNAL_LINK',\n OpenEarnCredits = 'OPEN_EARN_CREDITS',\n OpenConsumeCredits = 'OPEN_CONSUME_CREDITS',\n OpenReferral = 'OPEN_REFERRAL',\n OpenSubscribe = 'OPEN_SUBSCRIBE',\n}\n\n// \u2500\u2500\u2500 EarnCredits \u4EFB\u52A1\u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum EarnCreditsTaskType {\n Activate = 'activate',\n CompleteProfile = 'completeProfile',\n Subscribe = 'subscribe',\n Shop = 'shop',\n}\n\n// \u2500\u2500\u2500 ConsumeCredits item \u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum ConsumeCreditsItemType {\n Coupon = 'COUPON',\n RedeemAndBuy = 'REDEEM_AND_BUY',\n GiftCard = 'GIFT_CARD',\n Product = 'PRODUCT',\n}\n\n// \u2500\u2500\u2500 \u901A\u7528 link\uFF08\u7EDF\u4E00\u4E00\u79CD\u7C7B\u578B\uFF09 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type MemberPopupLink = {\n type: MemberPopupActionType\n label: string\n url?: string // \u4EC5 ExternalLink \u65F6\u4F7F\u7528\n}\n\n// \u2500\u2500\u2500 list item \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type MemberPopupItem = {\n title: string\n description?: string\n links: MemberPopupLink[]\n}\n\n// \u2500\u2500 \u4E3B\u7EC4\u4EF6 Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum MemberPopupPageScope {\n /** \u5168\u5C40\u5C55\u793A */\n Global = 'GLOBAL',\n /** \u4EC5\u5728\u7279\u5B9A\u9875\u9762\u5C55\u793A */\n Include = 'INCLUDE',\n /** \u5728\u7279\u5B9A\u9875\u9762\u4E0D\u5C55\u793A */\n Exclude = 'EXCLUDE',\n}\n\nexport type MemberPopupPageConfig = {\n scope: MemberPopupPageScope\n /** \u9875\u9762\u8DEF\u5F84\u5217\u8868\uFF0C\u652F\u6301\u7CBE\u786E\u5339\u914D\u548C\u524D\u7F00\u5339\u914D\uFF08\u5982 \"/products\" \u4F1A\u5339\u914D \"/products/xxx\"\uFF09 */\n pages: string[]\n}\n\nexport type MemberPopupCopy = {\n triggerImg: { url: string; alt?: string }\n title?: string\n subtitle?: string\n list: MemberPopupItem[]\n footer?: {\n loginHint: string\n loginLabel: string\n joinLabel: string\n shopLabel: string\n shopUrl?: string\n }\n activitiesSubscribe?: SubscribeModalCopy\n earnCredits?: EarnCreditsCopy\n consumeCredits?: ConsumeCreditsopy\n referral?: ReferralCopy\n /** \u9875\u9762\u8986\u76D6\u8303\u56F4\u914D\u7F6E\uFF0C\u9ED8\u8BA4\u5168\u5C40\u5C55\u793A */\n pageConfig?: MemberPopupPageConfig\n}\n\n// \u2500\u2500\u2500 EarnCredits Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type EarnCreditsCopy = {\n title?: string\n subtitle?: string\n balanceLabel?: string\n comingSoonLabel?: string\n creditUnit?: string\n joinNow: string\n completed: string\n activate: string\n completeProfileLabel: string\n subscribeLabel: string\n shopNow: string\n goShopLink?: string\n list: {\n id: EarnCreditsTaskType\n title: string\n credits?: string\n }[]\n // \u5B50\u5F39\u7A97\u6587\u6848\n authCodeActivate: AuthCodeActivateCopy\n completeProfile: CompleteProfileCopy\n subscribe: SubscribeModalCopy\n}\n\nexport type CompleteProfileCopy = {\n title: string\n subtitle?: string\n firstName: string\n lastName: string\n email: string\n phone: string\n birthday: string\n country: string\n save: string\n cancel: string\n edit: string\n required: string\n}\n\nexport type SubscribeModalCopy = {\n title: string\n desc?: string\n placeholder: string\n policy?: string\n policyDefaultChecked?: boolean\n successTips?: string\n subscribedLabel?: string\n dealsType?: string\n buttonLabel?: string\n single_brand_subscribe?: boolean\n genre?: string\n sub_brand_type?: string\n promo?: {\n title?: string\n description?: string\n learnMoreLabel?: string\n learnMoreUrl?: string\n image?: { url: string; alt?: string }\n }\n}\n\n// \u2500\u2500\u2500 ConsumeCredits Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type ConsumeCreditsopy = {\n title?: string\n subtitle?: string\n soldOut: string\n unlockRewards: string\n btnRedeem: string\n insufficientCredits?: string\n balanceLabel?: string\n comingSoonLabel?: string\n creditUnit?: string\n off?: string\n imageMapping?: {\n [key in ConsumeCreditsItemType]?: { url: string }\n }\n list: ConsumeCreditsItem[]\n redeemModal: RedeemCouponModalCopy\n creditsPage?: { label: string; url: string; redeemListSectionId?: string }\n}\n\nexport type ConsumeCreditsItem = {\n redeemId: string | number\n title: string\n description?: string\n image: { url: string; alt?: string }\n type: ConsumeCreditsItemType\n product?: { handle: string; sku: string }\n price?: number\n value?: string\n rules?: string[]\n}\n\nexport type RedeemCouponModalCopy = {\n confirmTitle: string\n confirmButton: string\n off?: string\n commonError: string\n redeemLimitError: string\n inventoryNotEnough: string\n creditsNotEnough: string\n crossSiteError: string\n successTitle: string\n successDesc: string\n successButton: string\n successButtonUrl?: string\n}\n\n// \u2500\u2500\u2500 Referral Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type ReferralCopy = {\n title?: string\n description?: string\n cashAvailableLabel: string\n cashPendingLabel: string\n creditUnit?: string\n referralLinksLabel?: string\n referralLinkBaseUrl?: string\n copyLabel?: string\n copiedLabel?: string\n howToTitle?: string\n howToDescription?: string\n learnMoreLabel?: string\n learnMoreUrl?: string\n image?: { url: string; alt?: string }\n ctaButton: string\n ctaUrl?: string\n loginTitle?: string\n loginDescription?: string\n loginCtaLabel?: string\n}\n\n// \u2500\u2500\u2500 Provider Context \u7C7B\u578B \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type AlpcConfig = {\n brand: string\n locale: string\n appName: string\n apiBaseUrl?: string\n}\n\nexport type MemberPopupContextValue = {\n profile: any\n isLoadingProfile: boolean\n creditInfo?: CreditInfoResponse\n fetchCreditInfo: (userId: string) => void\n openSignUpPopup: () => void\n openSignInPopup: () => void\n taskIdToTypeMapping?: Record<string, DTC_TASK_TYPE>\n alpcConfig: AlpcConfig\n pageHandle?: string\n}\n\nexport type MemberPopupInternalContextValue = MemberPopupContextValue & {\n isSubscribeSuccess: boolean\n setIsSubscribeSuccess: (v: boolean) => void\n isActivateSuccess: boolean\n setIsActivateSuccess: (v: boolean) => void\n isProfileCompleteSuccess: boolean\n setIsProfileCompleteSuccess: (v: boolean) => void\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { AuthCodeActivateCopy } from '../registration/authCodeActivate/type'\nimport type { CreditInfoResponse } from '../credits/context/response'\nimport type { DTC_TASK_TYPE } from '../credits/context/const'\n\nexport type { AuthCodeActivateCopy }\n\n// \u2500\u2500\u2500 \u9762\u677F\u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum MemberPopupPanelType {\n EarnCredits = 'EARN_CREDITS',\n ConsumeCredits = 'CONSUME_CREDITS',\n Referral = 'REFERRAL',\n CompleteProfile = 'COMPLETE_PROFILE',\n Subscribe = 'SUBSCRIBE',\n SubscribeEmail = 'SUBSCRIBE_EMAIL',\n RedeemCoupon = 'REDEEM_COUPON',\n Activate = 'ACTIVATE',\n}\n\n// \u2500\u2500\u2500 item action \u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum MemberPopupActionType {\n ExternalLink = 'EXTERNAL_LINK',\n OpenEarnCredits = 'OPEN_EARN_CREDITS',\n OpenConsumeCredits = 'OPEN_CONSUME_CREDITS',\n OpenReferral = 'OPEN_REFERRAL',\n OpenSubscribe = 'OPEN_SUBSCRIBE',\n}\n\n// \u2500\u2500\u2500 EarnCredits \u4EFB\u52A1\u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum EarnCreditsTaskType {\n Activate = 'activate',\n CompleteProfile = 'completeProfile',\n Subscribe = 'subscribe',\n Shop = 'shop',\n}\n\n// \u2500\u2500\u2500 ConsumeCredits item \u7C7B\u578B\u679A\u4E3E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum ConsumeCreditsItemType {\n Coupon = 'COUPON',\n RedeemAndBuy = 'REDEEM_AND_BUY',\n GiftCard = 'GIFT_CARD',\n Product = 'PRODUCT',\n}\n\n// \u2500\u2500\u2500 \u901A\u7528 link\uFF08\u7EDF\u4E00\u4E00\u79CD\u7C7B\u578B\uFF09 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type MemberPopupLink = {\n type: MemberPopupActionType\n label: string\n url?: string // \u4EC5 ExternalLink \u65F6\u4F7F\u7528\n}\n\n// \u2500\u2500\u2500 list item \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type MemberPopupItem = {\n title: string\n description?: string\n links: MemberPopupLink[]\n}\n\n// \u2500\u2500 \u4E3B\u7EC4\u4EF6 Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport enum MemberPopupPageScope {\n /** \u5168\u5C40\u5C55\u793A */\n Global = 'GLOBAL',\n /** \u4EC5\u5728\u7279\u5B9A\u9875\u9762\u5C55\u793A */\n Include = 'INCLUDE',\n /** \u5728\u7279\u5B9A\u9875\u9762\u4E0D\u5C55\u793A */\n Exclude = 'EXCLUDE',\n}\n\nexport type MemberPopupPageConfig = {\n scope: MemberPopupPageScope\n /** \u9875\u9762\u8DEF\u5F84\u5217\u8868\uFF0C\u652F\u6301\u7CBE\u786E\u5339\u914D\u548C\u524D\u7F00\u5339\u914D\uFF08\u5982 \"/products\" \u4F1A\u5339\u914D \"/products/xxx\"\uFF09 */\n pages: string[]\n}\n\nexport type MemberPopupCopy = {\n triggerImg: { url: string; alt?: string }\n title?: string\n subtitle?: string\n list: MemberPopupItem[]\n footer?: {\n loginHint: string\n loginLabel: string\n joinLabel: string\n shopLabel: string\n shopUrl?: string\n }\n activitiesSubscribe?: SubscribeModalCopy\n earnCredits?: EarnCreditsCopy\n consumeCredits?: ConsumeCreditsopy\n referral?: ReferralCopy\n /** \u9875\u9762\u8986\u76D6\u8303\u56F4\u914D\u7F6E\uFF0C\u9ED8\u8BA4\u5168\u5C40\u5C55\u793A */\n pageConfig?: MemberPopupPageConfig\n}\n\n// \u2500\u2500\u2500 EarnCredits Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type EarnCreditsCopy = {\n title?: string\n subtitle?: string\n balanceLabel?: string\n comingSoonLabel?: string\n creditUnit?: string\n joinNow: string\n completed: string\n activate: string\n completeProfileLabel: string\n subscribeLabel: string\n shopNow: string\n goShopLink?: string\n list: {\n id: EarnCreditsTaskType\n title: string\n credits?: string\n }[]\n // \u5B50\u5F39\u7A97\u6587\u6848\n authCodeActivate: AuthCodeActivateCopy\n completeProfile: CompleteProfileCopy\n subscribe: SubscribeModalCopy\n}\n\nexport type CompleteProfileCopy = {\n title: string\n subtitle?: string\n firstName: string\n lastName: string\n email: string\n phone: string\n birthday: string\n country: string\n save: string\n cancel: string\n edit: string\n required: string\n}\n\nexport type SubscribeModalCopy = {\n title: string\n desc?: string\n placeholder: string\n policy?: string\n policyDefaultChecked?: boolean\n successTips?: string\n subscribedLabel?: string\n dealsType?: string\n buttonLabel?: string\n single_brand_subscribe?: boolean\n genre?: string\n sub_brand_type?: string\n promo?: {\n title?: string\n description?: string\n learnMoreLabel?: string\n learnMoreUrl?: string\n image?: { url: string; alt?: string }\n }\n}\n\n// \u2500\u2500\u2500 ConsumeCredits Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type ConsumeCreditsopy = {\n title?: string\n subtitle?: string\n soldOut: string\n unlockRewards: string\n btnRedeem: string\n insufficientCredits?: string\n balanceLabel?: string\n comingSoonLabel?: string\n creditUnit?: string\n off?: string\n giftCard?: string\n imageMapping?: {\n [key in ConsumeCreditsItemType]?: { url: string }\n }\n list: ConsumeCreditsItem[]\n redeemModal: RedeemCouponModalCopy\n creditsPage?: { label: string; url: string; redeemListSectionId?: string }\n}\n\nexport type ConsumeCreditsItem = {\n redeemId: string | number\n title: string\n description?: string\n image: { url: string; alt?: string }\n type: ConsumeCreditsItemType\n product?: { handle: string; sku: string }\n price?: number\n value?: string\n rules?: string[]\n}\n\nexport type RedeemCouponModalCopy = {\n confirmTitle: string\n confirmButton: string\n off?: string\n commonError: string\n redeemLimitError: string\n inventoryNotEnough: string\n creditsNotEnough: string\n crossSiteError: string\n successTitle: string\n successDesc: string\n successButton: string\n successButtonUrl?: string\n copyLabel?: string\n copiedLabel?: string\n}\n\n// \u2500\u2500\u2500 Referral Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type ReferralCopy = {\n title?: string\n description?: string\n cashAvailableLabel: string\n cashPendingLabel: string\n creditUnit?: string\n referralLinksLabel?: string\n referralLinkBaseUrl?: string\n copyLabel?: string\n copiedLabel?: string\n howToTitle?: string\n howToDescription?: string\n learnMoreLabel?: string\n learnMoreUrl?: string\n image?: { url: string; alt?: string }\n ctaButton: string\n ctaUrl?: string\n loginTitle?: string\n loginDescription?: string\n loginCtaLabel?: string\n}\n\n// \u2500\u2500\u2500 Provider Context \u7C7B\u578B \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport type AlpcConfig = {\n brand: string\n locale: string\n appName: string\n apiBaseUrl?: string\n}\n\nexport type MemberPopupContextValue = {\n profile: any\n isLoadingProfile: boolean\n creditInfo?: CreditInfoResponse\n fetchCreditInfo: (userId: string) => void\n openSignUpPopup: () => void\n openSignInPopup: () => void\n taskIdToTypeMapping?: Record<string, DTC_TASK_TYPE>\n alpcConfig: AlpcConfig\n pageHandle?: string\n}\n\nexport type MemberPopupInternalContextValue = MemberPopupContextValue & {\n isSubscribeSuccess: boolean\n setIsSubscribeSuccess: (v: boolean) => void\n isActivateSuccess: boolean\n setIsActivateSuccess: (v: boolean) => void\n isProfileCompleteSuccess: boolean\n setIsProfileCompleteSuccess: (v: boolean) => void\n}\n"],
|
|
5
5
|
"mappings": "AAOO,IAAKA,OACVA,EAAA,YAAc,eACdA,EAAA,eAAiB,kBACjBA,EAAA,SAAW,WACXA,EAAA,gBAAkB,mBAClBA,EAAA,UAAY,YACZA,EAAA,eAAiB,kBACjBA,EAAA,aAAe,gBACfA,EAAA,SAAW,WARDA,OAAA,IAYAC,OACVA,EAAA,aAAe,gBACfA,EAAA,gBAAkB,oBAClBA,EAAA,mBAAqB,uBACrBA,EAAA,aAAe,gBACfA,EAAA,cAAgB,iBALNA,OAAA,IASAC,OACVA,EAAA,SAAW,WACXA,EAAA,gBAAkB,kBAClBA,EAAA,UAAY,YACZA,EAAA,KAAO,OAJGA,OAAA,IAQAC,OACVA,EAAA,OAAS,SACTA,EAAA,aAAe,iBACfA,EAAA,SAAW,YACXA,EAAA,QAAU,UAJAA,OAAA,IAsBAC,OAEVA,EAAA,OAAS,SAETA,EAAA,QAAU,UAEVA,EAAA,QAAU,UANAA,OAAA",
|
|
6
6
|
"names": ["MemberPopupPanelType", "MemberPopupActionType", "EarnCreditsTaskType", "ConsumeCreditsItemType", "MemberPopupPageScope"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anker-in/campaign-ui",
|
|
3
|
-
"version": "0.5.0-beta.
|
|
3
|
+
"version": "0.5.0-beta.26",
|
|
4
4
|
"description": "Campaign UI components and utilities for Anker projects",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -62,6 +62,7 @@
|
|
|
62
62
|
"typescript": "^5.0.0"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
|
+
"@anker-in/headless-ui": ">=1.0.0",
|
|
65
66
|
"crypto-js": "^4.1.1"
|
|
66
67
|
},
|
|
67
68
|
"dependencies": {
|
|
@@ -127,16 +127,9 @@ export default function ActivitiesSubscribeModal({ copy, email: initialEmail }:
|
|
|
127
127
|
/>
|
|
128
128
|
</div>
|
|
129
129
|
|
|
130
|
-
<
|
|
131
|
-
className={cn(
|
|
132
|
-
'w-full cursor-pointer bg-[#080a0f] mt-[16px] py-[14px] text-[14px] font-[700] text-white disabled:opacity-60',
|
|
133
|
-
rounded ? 'rounded-[4px]' : 'rounded-none'
|
|
134
|
-
)}
|
|
135
|
-
disabled={loading}
|
|
136
|
-
onClick={handleSubmit}
|
|
137
|
-
>
|
|
130
|
+
<Button className={'w-full mt-[16px]'} loading={loading} onClick={handleSubmit}>
|
|
138
131
|
{copy.buttonLabel ?? 'Subscribe'}
|
|
139
|
-
</
|
|
132
|
+
</Button>
|
|
140
133
|
|
|
141
134
|
{errorMessage && (
|
|
142
135
|
<div className="text-left mt-[4px] text-[16px] font-semibold text-[#f84d4f]">
|
|
@@ -128,21 +128,12 @@ export default function RedeemCouponPanel({ onClose, item, copy, onError }: Prop
|
|
|
128
128
|
disabled={copied}
|
|
129
129
|
onClick={() => copyText(couponCode)}
|
|
130
130
|
>
|
|
131
|
-
{copied ? 'Copied' : 'Copy'}
|
|
131
|
+
{copied ? (redeemModal.copiedLabel ?? 'Copied') : (redeemModal.copyLabel ?? 'Copy')}
|
|
132
132
|
</button>
|
|
133
133
|
</div>
|
|
134
134
|
<Text className="text-[20px] font-[700]" html={redeemModal.successTitle} />
|
|
135
135
|
<Text className="text-[14px] font-[700] text-[#6d6d6f]" html={redeemModal.successDesc} />
|
|
136
|
-
<Button
|
|
137
|
-
className={cn(
|
|
138
|
-
'w-full py-[12px] text-[14px] font-[700] text-white bg-[#080a0f]',
|
|
139
|
-
rounded ? 'rounded-[4px]' : 'rounded-none'
|
|
140
|
-
)}
|
|
141
|
-
onClick={() => {
|
|
142
|
-
if (redeemModal.successButtonUrl) window.location.href = redeemModal.successButtonUrl
|
|
143
|
-
onClose()
|
|
144
|
-
}}
|
|
145
|
-
>
|
|
136
|
+
<Button as="a" href={redeemModal.successButtonUrl} className="w-full">
|
|
146
137
|
{redeemModal.successButton}
|
|
147
138
|
</Button>
|
|
148
139
|
</div>
|
|
@@ -152,15 +143,7 @@ export default function RedeemCouponPanel({ onClose, item, copy, onError }: Prop
|
|
|
152
143
|
<div className="sticky bottom-0 bg-white border-t border-[#e5e5e5] pt-[10px]">
|
|
153
144
|
<div className="flex flex-col gap-[8px] text-center">
|
|
154
145
|
<Text className="block text-[16px] font-[700] leading-[1.3]" html={redeemModal.confirmTitle} />
|
|
155
|
-
<Button
|
|
156
|
-
className={cn(
|
|
157
|
-
'w-full py-[12px] text-[14px] font-[700] text-white disabled:opacity-60 bg-[#080a0f]',
|
|
158
|
-
rounded ? 'rounded-[4px]' : 'rounded-none'
|
|
159
|
-
)}
|
|
160
|
-
disabled={disabled}
|
|
161
|
-
loading={loading}
|
|
162
|
-
onClick={handleConfirm}
|
|
163
|
-
>
|
|
146
|
+
<Button className="w-full" disabled={disabled} loading={loading} onClick={handleConfirm}>
|
|
164
147
|
{redeemModal.confirmButton}
|
|
165
148
|
</Button>
|
|
166
149
|
</div>
|
|
@@ -66,6 +66,9 @@ function ConsumeCredits({ copy }: Props) {
|
|
|
66
66
|
if (isPhysicalProduct && (!product || !variant || !variant?.availableForSale || alpcSoldOut)) {
|
|
67
67
|
return null
|
|
68
68
|
}
|
|
69
|
+
if (item.type === ConsumeCreditsItemType.RedeemAndBuy && item.price == null) {
|
|
70
|
+
return null
|
|
71
|
+
}
|
|
69
72
|
return { ...item, alpcData, insufficient, product, variant }
|
|
70
73
|
})
|
|
71
74
|
.filter(Boolean) as EnrichedItem[]
|
|
@@ -222,17 +225,18 @@ function ConsumeCredits({ copy }: Props) {
|
|
|
222
225
|
) : (
|
|
223
226
|
<div className="flex mt-[16px] flex-col">
|
|
224
227
|
{list.map((item, idx) => {
|
|
225
|
-
const hasProduct = !!item.product
|
|
226
228
|
return (
|
|
227
229
|
<div key={idx} className="relative py-[16px]">
|
|
228
230
|
{idx > 0 && <div className="absolute inset-x-0 top-0 h-px bg-[#dadce0]" />}
|
|
229
231
|
<div className="flex items-center gap-[12px]">
|
|
230
232
|
{(() => {
|
|
231
|
-
const
|
|
232
|
-
|
|
233
|
+
const phsicalProduct =
|
|
234
|
+
item.type === ConsumeCreditsItemType.Product ||
|
|
235
|
+
item.type === ConsumeCreditsItemType.RedeemAndBuy
|
|
236
|
+
const imgUrl = phsicalProduct
|
|
233
237
|
? (item.variant?.image?.url ?? item.product?.images?.[0]?.url ?? item.image?.url)
|
|
234
|
-
:
|
|
235
|
-
const imgAlt =
|
|
238
|
+
: item.image?.url || copy.imageMapping?.[item.type]?.url
|
|
239
|
+
const imgAlt = phsicalProduct
|
|
236
240
|
? (item.variant?.image?.altText ?? item.product?.images?.[0]?.alt ?? item.image?.alt ?? '')
|
|
237
241
|
: (item.image?.alt ?? '')
|
|
238
242
|
if (!imgUrl) return null
|
|
@@ -247,11 +251,16 @@ function ConsumeCredits({ copy }: Props) {
|
|
|
247
251
|
source={imgUrl}
|
|
248
252
|
alt={imgAlt}
|
|
249
253
|
className="flex size-full items-center justify-center"
|
|
250
|
-
imgClassName={
|
|
254
|
+
imgClassName={phsicalProduct ? 'object-cover' : 'h-full w-auto object-contain'}
|
|
251
255
|
/>
|
|
252
|
-
{
|
|
256
|
+
{item.type === ConsumeCreditsItemType.Coupon && item.value && (
|
|
257
|
+
<div className="absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white">
|
|
258
|
+
{item.value && `${item.value} ${copy.off}`}
|
|
259
|
+
</div>
|
|
260
|
+
)}
|
|
261
|
+
{item.type === ConsumeCreditsItemType.GiftCard && item.value && (
|
|
253
262
|
<div className="absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white">
|
|
254
|
-
{item.value} {copy.
|
|
263
|
+
{item.value && `${item.value} ${copy.giftCard || 'Gift Card'}`}
|
|
255
264
|
</div>
|
|
256
265
|
)}
|
|
257
266
|
</div>
|
|
@@ -259,20 +268,29 @@ function ConsumeCredits({ copy }: Props) {
|
|
|
259
268
|
})()}
|
|
260
269
|
<div className="min-w-0 flex-1">
|
|
261
270
|
<div className="text-[16px] font-[700] text-[#1e2024] line-clamp-2">
|
|
262
|
-
{
|
|
271
|
+
{item.product.title ?? item.title ?? item.alpcData?.name}
|
|
263
272
|
</div>
|
|
264
273
|
<div className="mt-[4px] text-[14px] text-[#666]">
|
|
265
|
-
{
|
|
266
|
-
|
|
267
|
-
|
|
274
|
+
{item.type === ConsumeCreditsItemType.RedeemAndBuy ? (
|
|
275
|
+
<>
|
|
276
|
+
<div>
|
|
277
|
+
{numberFormat(item.alpcData.consume_credits)} {copy.creditUnit ?? ''} + $
|
|
278
|
+
{Number(item.price).toFixed(2)}
|
|
279
|
+
</div>
|
|
280
|
+
{item.variant?.price?.amount && (
|
|
281
|
+
<div className="text-[12px] ml-1 text-[#999] line-through">
|
|
282
|
+
${Number(item.variant.price.amount).toFixed(2)}
|
|
283
|
+
</div>
|
|
284
|
+
)}
|
|
285
|
+
</>
|
|
286
|
+
) : (
|
|
287
|
+
`${numberFormat(item.alpcData.consume_credits)} ${copy.creditUnit ?? ''}`
|
|
288
|
+
)}
|
|
268
289
|
</div>
|
|
269
290
|
</div>
|
|
270
291
|
<div className="relative group">
|
|
271
292
|
<Button
|
|
272
|
-
|
|
273
|
-
'bg-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',
|
|
274
|
-
rounded ? 'rounded-[4px]' : 'rounded-none'
|
|
275
|
-
)}
|
|
293
|
+
size="base"
|
|
276
294
|
disabled={isDisabled(item)}
|
|
277
295
|
loading={loadingId === item.redeemId}
|
|
278
296
|
onClick={() => handleRedeem(item)}
|
|
@@ -326,7 +326,7 @@ export default function ActivatePanel({ copy, onClose }: Props) {
|
|
|
326
326
|
<Button
|
|
327
327
|
type="submit"
|
|
328
328
|
loading={emailValidationLoading}
|
|
329
|
-
className="mt-6
|
|
329
|
+
className="mt-6 w-full min-l:mt-8"
|
|
330
330
|
onClick={handleAuthCodeSubmit}
|
|
331
331
|
>
|
|
332
332
|
{copy.buttonText}
|
|
@@ -197,10 +197,10 @@ export default function CompleteProfilePanel({ copy, onClose }: Props) {
|
|
|
197
197
|
</div>
|
|
198
198
|
|
|
199
199
|
<div className="flex gap-[12px]">
|
|
200
|
-
<Button variant="secondary" size="
|
|
200
|
+
<Button variant="secondary" size="base" className="flex-1" onClick={onClose} disabled={isLoading}>
|
|
201
201
|
{copy.cancel}
|
|
202
202
|
</Button>
|
|
203
|
-
<Button variant="primary" size="
|
|
203
|
+
<Button variant="primary" size="base" className="flex-1" loading={isLoading} onClick={handleSubmit}>
|
|
204
204
|
{copy.save}
|
|
205
205
|
</Button>
|
|
206
206
|
</div>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useCallback, useEffect, useState } from 'react'
|
|
2
|
-
import { Checkbox, Text } from '@anker-in/headless-ui'
|
|
2
|
+
import { Button, Checkbox, Text } from '@anker-in/headless-ui'
|
|
3
3
|
import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
|
|
4
4
|
import Cookies from 'js-cookie'
|
|
5
5
|
import { parse } from 'query-string'
|
|
@@ -91,12 +91,8 @@ export default function SubscribeEmailPanel({ copy, email: initialEmail, onClose
|
|
|
91
91
|
return (
|
|
92
92
|
<div className="flex flex-col gap-[12px]">
|
|
93
93
|
<div className="flex flex-col gap-[8px]">
|
|
94
|
-
{copy.title &&
|
|
95
|
-
|
|
96
|
-
)}
|
|
97
|
-
{copy.desc && (
|
|
98
|
-
<Text className="text-[16px] text-[#1e2024]" html={copy.desc} />
|
|
99
|
-
)}
|
|
94
|
+
{copy.title && <h2 className="text-[24px] font-[700] leading-[1.2] text-[#080a0f]">{copy.title}</h2>}
|
|
95
|
+
{copy.desc && <Text className="text-[16px] text-[#1e2024]" html={copy.desc} />}
|
|
100
96
|
</div>
|
|
101
97
|
|
|
102
98
|
<div className="flex flex-col gap-[16px]">
|
|
@@ -108,7 +104,10 @@ export default function SubscribeEmailPanel({ copy, email: initialEmail, onClose
|
|
|
108
104
|
)}
|
|
109
105
|
placeholder={copy.placeholder}
|
|
110
106
|
value={email}
|
|
111
|
-
onChange={e => {
|
|
107
|
+
onChange={e => {
|
|
108
|
+
setErrorMessage('')
|
|
109
|
+
setEmail(e.target.value.trim())
|
|
110
|
+
}}
|
|
112
111
|
/>
|
|
113
112
|
|
|
114
113
|
<div className="flex w-full items-start gap-[8px]">
|
|
@@ -121,18 +120,20 @@ export default function SubscribeEmailPanel({ copy, email: initialEmail, onClose
|
|
|
121
120
|
</div>
|
|
122
121
|
|
|
123
122
|
{(errorMessage || successMessage) && (
|
|
124
|
-
<div
|
|
123
|
+
<div
|
|
124
|
+
className={cn(
|
|
125
|
+
'text-[14px] font-[700]',
|
|
126
|
+
errorMessage && 'text-[#f84d4f]',
|
|
127
|
+
successMessage && 'text-[#52c41a]'
|
|
128
|
+
)}
|
|
129
|
+
>
|
|
125
130
|
<Text html={successMessage || errorMessage} />
|
|
126
131
|
</div>
|
|
127
132
|
)}
|
|
128
133
|
|
|
129
|
-
<
|
|
130
|
-
className={cn('w-full cursor-pointer bg-[#080a0f] py-[14px] text-[14px] font-[700] text-white disabled:opacity-60', rounded ? 'rounded-[4px]' : 'rounded-none')}
|
|
131
|
-
disabled={loading}
|
|
132
|
-
onClick={handleSubmit}
|
|
133
|
-
>
|
|
134
|
+
<Button className="w-full" loading={loading} onClick={handleSubmit}>
|
|
134
135
|
{copy.buttonLabel ?? 'Subscribe'}
|
|
135
|
-
</
|
|
136
|
+
</Button>
|
|
136
137
|
</div>
|
|
137
138
|
</div>
|
|
138
139
|
)
|
|
@@ -7,6 +7,7 @@ import { EarnCreditsTaskType, MemberPopupPanelType, type EarnCreditsCopy } from
|
|
|
7
7
|
import { IconBag, IconLock, IconSubscription, IconOrders } from '../../icons'
|
|
8
8
|
import { numberFormat } from '../../../credits/context/utils'
|
|
9
9
|
import { ROUNDED_BRANDS } from '../../../../constants'
|
|
10
|
+
import { Button } from '@anker-in/headless-ui'
|
|
10
11
|
|
|
11
12
|
function TaskIcon({ id, className }: { id: EarnCreditsTaskType; className?: string }) {
|
|
12
13
|
switch (id) {
|
|
@@ -207,36 +208,27 @@ function EarnCredits({ copy }: Props) {
|
|
|
207
208
|
<TaskIcon id={item.id} className="size-[24px] shrink-0" />
|
|
208
209
|
<div className="flex-1">
|
|
209
210
|
<div className="text-[16px] font-[700] text-[#1e2024]">{item.title}</div>
|
|
210
|
-
{item.credits &&
|
|
211
|
-
<div className="mt-[4px] text-[14px] font-bold text-[#4A4C56]">{item.credits}</div>
|
|
212
|
-
)}
|
|
211
|
+
{item.credits && <div className="mt-[4px] text-[14px] font-bold text-[#4A4C56]">{item.credits}</div>}
|
|
213
212
|
</div>
|
|
214
213
|
{!item.finished && item.link && isLogin ? (
|
|
215
|
-
<
|
|
214
|
+
<Button
|
|
215
|
+
as="a"
|
|
216
|
+
className="w-full"
|
|
216
217
|
href={item.link}
|
|
217
218
|
target="_blank"
|
|
218
219
|
rel="noopener noreferrer"
|
|
219
|
-
className={cn(
|
|
220
|
-
'cursor-pointer bg-[#080a0f] min-w-[118px] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',
|
|
221
|
-
rounded ? 'rounded-[4px]' : 'rounded-none'
|
|
222
|
-
)}
|
|
223
220
|
onClick={() => trackTaskButton(item.id)}
|
|
224
221
|
>
|
|
225
222
|
{item.buttonLabel}
|
|
226
|
-
</
|
|
223
|
+
</Button>
|
|
227
224
|
) : (
|
|
228
|
-
<
|
|
229
|
-
className=
|
|
230
|
-
'cursor-pointer min-w-[118px] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',
|
|
231
|
-
item.finished ? 'bg-[#767880]' : 'bg-[#080a0f]',
|
|
232
|
-
rounded ? 'rounded-[4px]' : 'rounded-none',
|
|
233
|
-
item.finished && 'opacity-60'
|
|
234
|
-
)}
|
|
225
|
+
<Button
|
|
226
|
+
className="w-full"
|
|
235
227
|
disabled={item.finished}
|
|
236
228
|
onClick={!item.finished ? item.onClick : undefined}
|
|
237
229
|
>
|
|
238
230
|
{item.buttonLabel}
|
|
239
|
-
</
|
|
231
|
+
</Button>
|
|
240
232
|
)}
|
|
241
233
|
</div>
|
|
242
234
|
</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Picture } from '@anker-in/headless-ui'
|
|
1
|
+
import { Button, Picture } from '@anker-in/headless-ui'
|
|
2
2
|
import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
|
|
3
3
|
import { useMemberPopupContext } from '../../context/provider'
|
|
4
4
|
import { useReferralOverview } from './hooks/useReferralOverview'
|
|
@@ -107,18 +107,16 @@ function Referral({ copy, onClose }: Props) {
|
|
|
107
107
|
)}
|
|
108
108
|
|
|
109
109
|
{copy.ctaButton && (
|
|
110
|
-
<
|
|
110
|
+
<Button
|
|
111
|
+
size="base"
|
|
112
|
+
as="a"
|
|
111
113
|
href={copy.ctaUrl ? buildRefUrl(copy.ctaUrl) : '#'}
|
|
112
114
|
target="_blank"
|
|
113
115
|
rel="noopener noreferrer"
|
|
114
|
-
className={cn(
|
|
115
|
-
'block w-full mt-[16px] cursor-pointer bg-[#080a0f] py-[14px] text-center text-[14px] font-[700] text-white',
|
|
116
|
-
rounded ? 'rounded-[4px]' : 'rounded-none'
|
|
117
|
-
)}
|
|
118
116
|
onClick={trackReferralCta}
|
|
119
117
|
>
|
|
120
118
|
{copy.ctaButton}
|
|
121
|
-
</
|
|
119
|
+
</Button>
|
|
122
120
|
)}
|
|
123
121
|
</div>
|
|
124
122
|
)
|