@anker-in/campaign-ui 0.5.3-beta.3 → 0.5.4-beta.1
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/credits/creditsFaq/index.js +1 -1
- package/dist/cjs/components/credits/creditsFaq/index.js.map +3 -3
- package/dist/cjs/components/credits/creditsMemberPrice/CreditsMemberPrice.js +1 -1
- package/dist/cjs/components/credits/creditsMemberPrice/CreditsMemberPrice.js.map +2 -2
- package/dist/cjs/components/credits/creditsRedeemList/CreditsRedeemList.js +1 -1
- package/dist/cjs/components/credits/creditsRedeemList/CreditsRedeemList.js.map +3 -3
- package/dist/cjs/components/credits/modal/ActivitiesModal.js +1 -1
- package/dist/cjs/components/credits/modal/ActivitiesModal.js.map +3 -3
- package/dist/cjs/components/credits/modal/RewardsModal.js +1 -1
- package/dist/cjs/components/credits/modal/RewardsModal.js.map +3 -3
- package/dist/esm/components/credits/creditsFaq/index.js +1 -1
- package/dist/esm/components/credits/creditsFaq/index.js.map +3 -3
- package/dist/esm/components/credits/creditsMemberPrice/CreditsMemberPrice.js +1 -1
- package/dist/esm/components/credits/creditsMemberPrice/CreditsMemberPrice.js.map +3 -3
- package/dist/esm/components/credits/creditsRedeemList/CreditsRedeemList.js +1 -1
- package/dist/esm/components/credits/creditsRedeemList/CreditsRedeemList.js.map +3 -3
- package/dist/esm/components/credits/modal/ActivitiesModal.js +1 -1
- package/dist/esm/components/credits/modal/ActivitiesModal.js.map +3 -3
- package/dist/esm/components/credits/modal/RewardsModal.js +1 -1
- package/dist/esm/components/credits/modal/RewardsModal.js.map +3 -3
- package/package.json +1 -1
- package/src/components/credits/creditsFaq/index.tsx +47 -42
- package/src/components/credits/creditsMemberPrice/CreditsMemberPrice.tsx +35 -42
- package/src/components/credits/creditsRedeemList/CreditsRedeemList.tsx +66 -58
- package/src/components/credits/modal/ActivitiesModal.tsx +62 -56
- package/src/components/credits/modal/RewardsModal.tsx +43 -30
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/modal/ActivitiesModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useCallback, useMemo, useState } from 'react'\nimport { useCreditsContext } from '../context/provider'\nimport { CreditType, DTC_TASK_TYPE, TaskSubType, TaskType } from '../context/const'\nimport useActivities from '../context/hooks/useActivities'\nimport type { Task } from '../context/response'\nimport { CreditsModalContainer, type ModalContainerProps } from './ModalContainer'\nimport { classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport { Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'\nimport LoadingDots from './LoadingDots'\nimport { Picture, Text } from '@anker-in/headless-ui'\nimport { ROUNDED_BRANDS } from '../../../constants'\nimport dayjs from 'dayjs'\n\nexport interface MyActivitiesMetafields {\n title: string\n tips: string\n allTab: string\n earnedTab: string\n deductedTab: string\n expiredTab: string\n activationTask: string\n updateNameTask: string\n updatePhoneTask: string\n updateBirthdayTask: string\n updateAppNameTask: string\n subscriptionTask: string\n refundTask: string\n productUnApprovedTask: string\n pendingTips?: string\n pendingTips2?: string\n firstPurchaseTask: string\n uploadReceiptTask: string\n shoppingTask: string\n emptyListImage: {\n url: string\n alt?: string\n }\n emptyListLabel: string\n}\n\ninterface ActivitiesModalProps extends ModalContainerProps {\n data: MyActivitiesMetafields\n}\n\nfunction ActivitiesModal({ data, ...props }: ActivitiesModalProps) {\n const [page, setPage] = useState(1)\n const { taskIdToTypeMapping } = useCreditsContext()\n const { brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const myActivitiesOptions = useMemo(() => {\n return {\n page: props.isOpen ? page : 0,\n pageSize: 1000,\n }\n }, [props.isOpen, page])\n\n const
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useCallback", "useMemo", "useState", "useCreditsContext", "CreditType", "DTC_TASK_TYPE", "TaskSubType", "TaskType", "useActivities", "CreditsModalContainer", "cn", "useHeadlessContext", "Tabs", "TabsList", "TabsTrigger", "LoadingDots", "Picture", "Text", "ROUNDED_BRANDS", "dayjs", "ActivitiesModal", "data", "props", "page", "setPage", "taskIdToTypeMapping", "brand", "rounded", "myActivitiesOptions", "
|
|
4
|
+
"sourcesContent": ["import { useCallback, useMemo, useState } from 'react'\nimport { useCreditsContext } from '../context/provider'\nimport { CreditType, DTC_TASK_TYPE, TaskSubType, TaskType } from '../context/const'\nimport useActivities from '../context/hooks/useActivities'\nimport type { Task } from '../context/response'\nimport { CreditsModalContainer, type ModalContainerProps } from './ModalContainer'\nimport { classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@anker-in/headless-ui'\nimport LoadingDots from './LoadingDots'\nimport { Picture, Text } from '@anker-in/headless-ui'\nimport { ROUNDED_BRANDS } from '../../../constants'\nimport dayjs from 'dayjs'\n\nexport interface MyActivitiesMetafields {\n title: string\n tips: string\n allTab: string\n earnedTab: string\n deductedTab: string\n expiredTab: string\n activationTask: string\n updateNameTask: string\n updatePhoneTask: string\n updateBirthdayTask: string\n updateAppNameTask: string\n subscriptionTask: string\n refundTask: string\n productUnApprovedTask: string\n pendingTips?: string\n pendingTips2?: string\n firstPurchaseTask: string\n uploadReceiptTask: string\n shoppingTask: string\n emptyListImage: {\n url: string\n alt?: string\n }\n emptyListLabel: string\n}\n\ninterface ActivitiesModalProps extends ModalContainerProps {\n data: MyActivitiesMetafields\n}\n\nfunction ActivitiesModal({ data, ...props }: ActivitiesModalProps) {\n const [page, setPage] = useState(1)\n const { taskIdToTypeMapping } = useCreditsContext()\n const { brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const myActivitiesOptions = useMemo(() => {\n return {\n page: props.isOpen ? page : 0,\n pageSize: 1000,\n }\n }, [props.isOpen, page])\n\n const tabs = useMemo(() => {\n const tabs = [\n {\n title: data.allTab,\n type: CreditType.All,\n },\n {\n title: data.earnedTab,\n type: CreditType.Earned,\n },\n {\n title: data.deductedTab,\n type: CreditType.Deducted,\n },\n ]\n if (data.expiredTab) {\n tabs.push({\n title: data.expiredTab,\n type: CreditType.Expired,\n })\n }\n return tabs\n }, [data])\n\n const { activities = [], canNext, isLoading } = useActivities(myActivitiesOptions)\n\n const allList = useMemo(() => {\n const taskNameMap = {\n [TaskSubType.Activation]: data.activationTask,\n [TaskSubType.UpdateName]: data.updateNameTask,\n [TaskSubType.UpdatePhone]: data.updatePhoneTask,\n [TaskSubType.UpdateBirthday]: data.updateBirthdayTask,\n [TaskSubType.Subscription]: data.subscriptionTask,\n [TaskSubType.UpadteAppName]: data.updateAppNameTask,\n [TaskSubType.Refund]: data.refundTask,\n [TaskSubType.ProductUnApproved]: data.productUnApprovedTask,\n }\n const dtcTaskTypeToNameMap = {\n [DTC_TASK_TYPE.FirstPurchase]: data.firstPurchaseTask,\n [DTC_TASK_TYPE.UploadReceipt]: data.uploadReceiptTask,\n [DTC_TASK_TYPE.Shopping]: data.shoppingTask,\n }\n\n function getTitle(item: Task) {\n if (\n item.task_type === TaskType.Redeem &&\n item.task_sub_type === TaskSubType.ProductUnApproved &&\n data.productUnApprovedTask\n ) {\n // \u65B0\u589E\u7684\u90E8\u5206\u4EFB\u52A1\u90FD\u4F7F\u7528\u4E86 alpc \u540C\u4E00\u4E2A\u4EFB\u52A1\u7C7B\u578B\uFF0C\u9700\u8981\u7528\u4EFB\u52A1 id \u6765\u533A\u5206\n return item.task_name.replace('Refund', data.productUnApprovedTask)\n } else if (taskIdToTypeMapping?.[String(item.task_rule_id)]) {\n return dtcTaskTypeToNameMap[taskIdToTypeMapping?.[String(item.task_rule_id)]] || item.task_name\n } else {\n return taskNameMap[item.task_sub_type] || item.task_name\n }\n }\n\n return activities.map(item => ({\n title: getTitle(item),\n date: new Date(item.create_time * 1000),\n value: item.credit,\n type: item.credit_type,\n pending_time: item.pending_time,\n credit_type: item.credit_type,\n status: item.status,\n }))\n }, [\n data.activationTask,\n data.updateNameTask,\n data.updatePhoneTask,\n data.updateBirthdayTask,\n data.subscriptionTask,\n data.updateAppNameTask,\n data.refundTask,\n data.productUnApprovedTask,\n data.firstPurchaseTask,\n data.uploadReceiptTask,\n data.shoppingTask,\n activities,\n taskIdToTypeMapping,\n ])\n\n const normalizeValue = useCallback((item: (typeof allList)[number]) => {\n let { value, ...otherItem } = item\n if (item.type === CreditType.Deducted && value > 0) {\n value = -value\n }\n return { value, ...otherItem }\n }, [])\n\n // \u6309 tab \u7C7B\u578B\u9884\u8BA1\u7B97\u5217\u8868\uFF0C\u914D\u5408 TabsContent \u58F0\u660E\u5F0F\u6E32\u67D3\uFF0C\u907F\u514D\u624B\u52A8 activeTab \u6570\u503C\u6BD4\u8F83\n const listByTab = useMemo(() => {\n const map = new Map<CreditType, ReturnType<typeof normalizeValue>[]>()\n map.set(CreditType.All, allList.map(normalizeValue))\n map.set(\n CreditType.Earned,\n allList.filter(item => item.type === 1).map(normalizeValue)\n )\n map.set(\n CreditType.Deducted,\n allList.filter(item => item.type === 2 && item.status !== 3).map(normalizeValue)\n )\n map.set(\n CreditType.Expired,\n allList.filter(item => item.type === 2 && item.status === 3).map(normalizeValue)\n )\n return map\n }, [allList, normalizeValue])\n\n const handleScrollEnd = useCallback(() => {\n if (!canNext) {\n return\n }\n setPage(page + 1)\n }, [page, canNext])\n\n const renderList = (list: ReturnType<typeof normalizeValue>[]) => (\n <>\n <div className=\"flex-1 overflow-auto overscroll-contain\">\n <div className=\"grid gap-[18px] md:gap-[12px]\">\n {isLoading && (\n <div className=\"flex flex-1 flex-col items-center justify-center\">\n <LoadingDots />\n </div>\n )}\n\n {!isLoading && (\n <>\n {list.length > 0 ? (\n list.map((item, index) => (\n <div\n key={index}\n className={cn(\n 'flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]',\n !rounded && 'rounded-none'\n )}\n >\n <div className=\"grid gap-[6px]\">\n <div className=\"font-bold\">{item.title}</div>\n <div className=\"text-[14px] font-semibold text-[#999]\">\n {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}\n </div>\n {!data.pendingTips && (\n <div\n className={`hidden text-[14px] font-semibold text-[#777] ${item.status === 2 && item.credit_type === 1 ? '!flex' : ''}`}\n >\n <Text html={data.pendingTips} />\n <span>{dayjs.unix(item.pending_time).add(1, 'day').format('YYYY-MM-DD')}</span>\n {data.pendingTips2 && <Text html={data.pendingTips2} />}\n </div>\n )}\n </div>\n <div\n className={cn(\n 'font-bold',\n item.value >= 0 || item.credit_type === CreditType.Expired ? 'text-[#52C41A]' : 'text-[#F84D4F]'\n )}\n >\n {item.value >= 0 && '+'}\n {item.value}\n </div>\n </div>\n ))\n ) : (\n <div className=\"flex flex-col items-center justify-center py-[40px]\">\n <Picture\n className=\"mb-[16px] h-[120px] w-[160px]\"\n source={data?.emptyListImage?.url}\n alt={data?.emptyListImage?.alt || 'empty list image'}\n ></Picture>\n <div className=\"leading-1.4 text-[16px] font-semibold\">{data?.emptyListLabel}</div>\n </div>\n )}\n </>\n )}\n </div>\n </div>\n {/* \u79EF\u5206\u5230\u8D26\u65F6\u95F4\u63D0\u9192 */}\n {list.length > 0 && <div className=\"mt-[12px] pb-[24px] text-[14px] font-semibold text-[#999]\">{data.tips}</div>}\n </>\n )\n\n return (\n <CreditsModalContainer\n title={data.title}\n className={cn('h-[800px] w-[640px]')}\n useAnimation\n animationClassName=\"md:translate-y-[100vh]\"\n scrollClassName=\"flex flex-col\"\n {...props}\n onScrollEnd={handleScrollEnd}\n >\n <Tabs align=\"left\" shape={rounded ? 'rounded' : 'square'} defaultValue={tabs[0]?.type?.toString()} className=\"flex-1 flex flex-col\">\n <div className=\"w-full sticky top-0 bg-white z-10 pb-[24px] overflow-x-auto\">\n <TabsList>\n {tabs.map(tab => (\n <TabsTrigger key={tab.type} value={tab.type.toString()}>\n {tab.title}\n </TabsTrigger>\n ))}\n </TabsList>\n </div>\n\n {tabs.map(tab => (\n <TabsContent key={tab.type} value={tab.type.toString()} className=\"flex-1 flex flex-col\">\n {renderList(listByTab.get(tab.type) || [])}\n </TabsContent>\n ))}\n </Tabs>\n </CreditsModalContainer>\n )\n}\n\nexport default ActivitiesModal\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useCallback", "useMemo", "useState", "useCreditsContext", "CreditType", "DTC_TASK_TYPE", "TaskSubType", "TaskType", "useActivities", "CreditsModalContainer", "cn", "useHeadlessContext", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "LoadingDots", "Picture", "Text", "ROUNDED_BRANDS", "dayjs", "ActivitiesModal", "data", "props", "page", "setPage", "taskIdToTypeMapping", "brand", "rounded", "myActivitiesOptions", "tabs", "activities", "canNext", "isLoading", "allList", "taskNameMap", "dtcTaskTypeToNameMap", "getTitle", "item", "normalizeValue", "value", "otherItem", "listByTab", "map", "handleScrollEnd", "renderList", "list", "index", "tab", "ActivitiesModal_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{Fragment as Q,jsx as l,jsxs as n}from"react/jsx-runtime";import{Tabs as h,TabsContent as j,TabsList as E,TabsTrigger as U,Picture as I}from"@anker-in/headless-ui";import d from"classnames";import Y from"copy-to-clipboard";import H from"dayjs";import{useCallback as a,useEffect as O,useMemo as p,useState as u}from"react";import{ApprovalStatus as f,AlpcConsumeType as s,RewardType as e}from"../context/const";import{CreditsModalContainer as $}from"./ModalContainer";import q from"./Tip";import z from"./LoadingDots";import B from"../context/hooks/useMyRewards";import{useHeadlessContext as K}from"@anker-in/lib";import{ROUNDED_BRANDS as V}from"../../../constants";function J({data:t,...L}){const[r,N]=u(s.Coupon),{brand:P}=K(),g=V.includes(P),[R,b]=u(1),[F,m]=u(-1),v=p(()=>[{title:t.couponTab,type:s.Coupon},{title:t.productTab,type:s.Product},{title:t.externalProductTab,type:s.ExternalProduct}].filter(i=>!!i.title),[t.couponTab,t.productTab,t.externalProductTab]);O(()=>{b(1)},[r]);const{myRewards:x=[],canNext:C,isLoading:y}=B({page:R,pageSize:1e3,consumeType:r}),G=a(i=>i.fulfillment_status&&i.fulfillment_status!=="null"?i.fulfillment_status==="fulfilled"?e.Fulfilled:e.Unfulfilled:i.approval_status===f.Success||i.approval_status===f.DoubleConfirm?e.ApproveSuccess:i.approval_status===f.Failed?e.Failed:e.Pending,[]),S=a(i=>{const o={0:e.GogiftPending,1:e.GogiftApproved,2:e.GogiftSecondConfirm,3:e.GogiftRejected,4:e.GogiftCallbackPending,5:e.GogiftCallbackSuccess,6:e.GogiftCallbackTimeout};return i!==void 0?o[i]??e.GogiftPending:e.GogiftPending},[]),T=p(()=>x.map(i=>{const o={title:i.goods_title,value:i.consume_credits,date:new Date(i.create_time*1e3)};return r===s.Coupon?{...o,type:e.Received,couponCode:i.coupon_code,orderNumber:"",link:""}:r===s.Product?{...o,type:G(i),orderNumber:i.order_number,couponCode:"",link:""}:r===s.ExternalProduct?{...o,type:S(i.approval_status),orderNumber:"",couponCode:"",link:i.link||""}:{...o,type:e.Received,couponCode:"",orderNumber:"",link:""}}),[r,x,G,S]),A=p(()=>({[e.Received]:t.receivedLabel,[e.Pending]:t.pendingLabel,[e.ApproveFail]:t.failedLabel,[e.ApproveSuccess]:t.approveSuccessLabel,[e.Unfulfilled]:t.unfulfilledLabel,[e.Fulfilled]:t.fulfilledLabel,[e.Failed]:t.failedLabel,[e.GogiftPending]:t.goGiftStatus?.pending?.label||t.pendingLabel,[e.GogiftApproved]:t.goGiftStatus?.approved?.label||t.approveSuccessLabel,[e.GogiftSecondConfirm]:t.goGiftStatus?.secondConfirm?.label||t.approveSuccessLabel,[e.GogiftRejected]:t.goGiftStatus?.rejected?.label||t.failedLabel,[e.GogiftCallbackPending]:t.goGiftStatus?.callbackPending?.label||t.pendingLabel,[e.GogiftCallbackSuccess]:t.goGiftStatus?.callbackSuccess?.label||t.receivedLabel,[e.GogiftCallbackTimeout]:t.goGiftStatus?.callbackTimeout?.label||t.failedLabel}),[t]),k=p(()=>({[e.Received]:"",[e.Pending]:t.pendingTip,[e.ApproveFail]:"",[e.ApproveSuccess]:t.confirmedTip,[e.Unfulfilled]:t.processingTip,[e.Fulfilled]:t.ShippedTip,[e.Failed]:"",[e.GogiftPending]:t.goGiftStatus?.pending?.tip||"",[e.GogiftApproved]:t.goGiftStatus?.approved?.tip||"",[e.GogiftSecondConfirm]:t.goGiftStatus?.secondConfirm?.tip||"",[e.GogiftRejected]:t.goGiftStatus?.rejected?.tip||"",[e.GogiftCallbackPending]:t.goGiftStatus?.callbackPending?.tip||"",[e.GogiftCallbackSuccess]:t.goGiftStatus?.callbackSuccess?.tip||"",[e.GogiftCallbackTimeout]:t.goGiftStatus?.callbackTimeout?.tip||""}),[t]),w=p(()=>({[e.Received]:"#52C41A",[e.Pending]:"#999",[e.ApproveFail]:"#F84D4F",[e.ApproveSuccess]:"#999",[e.Unfulfilled]:"#999",[e.Fulfilled]:"#999",[e.Failed]:"#F84D4F",[e.GogiftPending]:"#999",[e.GogiftApproved]:"#999",[e.GogiftSecondConfirm]:"#999",[e.GogiftRejected]:"#F84D4F",[e.GogiftCallbackPending]:"#999",[e.GogiftCallbackSuccess]:"#52C41A",[e.GogiftCallbackTimeout]:"#F84D4F"}),[]),D=a(()=>{C&&b(i=>i+1)},[C]),M=a((i,o)=>{m(o),Y(i),setTimeout(()=>{m(-1)},2e3)},[]),_=()=>n(Q,{children:[y&&l("div",{className:"flex flex-1 flex-col items-center justify-center",children:l(z,{})}),!y&&l("div",{className:"mt-[24px] flex-1 overflow-auto overscroll-contain pb-[24px] md:pb-[48px]",children:T.length>0?l("div",{className:"grid gap-[18px] md:gap-[12px]",children:T.map((i,o)=>n("div",{className:"grid gap-[8px]",children:[i?.orderNumber&&n("div",{className:"text-[15px] font-semibold leading-[1.4] text-[#777]",children:[t.orderNumberLabel,": ",i.orderNumber]}),n("div",{className:d("flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]",!g&&"rounded-none"),children:[n("div",{className:"grid gap-[4px]",children:[l("div",{className:"text-[16px] font-bold leading-[1.4]",children:i.title}),n("div",{className:"text-[14px] font-semibold text-[#999]",children:[t.valueLabel,": ",i.value," ",t?.pointUnit]}),n("div",{className:"text-[14px] font-semibold text-[#999]",children:[i?.couponCode?`${t?.code||"Code"}: ${i.couponCode} `:"",i?.couponCode&&l("span",{className:"cursor-pointer text-[14px] font-semibold text-brand underline",onClick:()=>{M(i.couponCode,o)},role:"button",tabIndex:0,onKeyDown:c=>{(c.key==="Enter"||c.key===" ")&&c.preventDefault()},children:F===o?t?.copied||"COPIED":t?.copy||"COPY"})]}),i?.link&&l("div",{className:"text-[14px] font-semibold text-[#999]",children:l("a",{href:i.link,target:"_blank",rel:"noopener noreferrer",className:"text-brand underline",children:t?.redeemLinkLabel||"Redeem Link"})})]}),n("div",{className:"grid gap-[4px] text-right",children:[n("div",{className:d("flex items-center justify-end text-[16px] font-bold leading-[1.4]",`text-[${w[i.type]}]`),children:[l("span",{children:A[i.type]}),k[i.type]&&l(q,{info:k[i.type],index:o})]}),l("div",{className:"text-[14px] font-semibold text-[#999]",children:H(i.date).format("YYYY-MM-DD HH:mm").toString()})]})]})]},o))}):n("div",{className:"flex h-full flex-col items-center justify-center",children:[l(I,{className:"mb-[12px] w-[160px]",source:t?.emptyListImage?.url,alt:t?.emptyListImage?.alt||"empty list image"}),l("div",{className:"text-[16px] font-semibold leading-[1.4]",children:t?.emptyListLabel})]})})]});return l($,{title:t.title,className:d("h-[800px] w-[640px]"),useAnimation:!0,animationClassName:"md:translate-y-[100vh]",scrollClassName:"md:mb-0 flex flex-col",...L,onScrollEnd:D,children:n(h,{align:"left",shape:g?"rounded":"square",value:r.toString(),onValueChange:i=>{N(Number(i))},className:"flex flex-1 flex-col",children:[l("div",{className:"shrink-0",children:l(E,{children:v.map(i=>l(U,{value:i.type.toString(),children:i.title},i.type))})}),v.map(i=>l(j,{value:i.type.toString(),className:"flex flex-1 flex-col",children:_()},i.type))]})})}var ae=J;export{ae as default};
|
|
2
2
|
//# sourceMappingURL=RewardsModal.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/modal/RewardsModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Tabs, TabsList, TabsTrigger, Picture } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport clipboard from 'copy-to-clipboard'\nimport dayjs from 'dayjs'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { ApprovalStatus, AlpcConsumeType, RewardType } from '../context/const'\nimport { CreditsModalContainer, type ModalContainerProps } from './ModalContainer'\nimport Tip from './Tip'\nimport LoadingDots from './LoadingDots'\nimport useMyRewards from '../context/hooks/useMyRewards'\nimport { useHeadlessContext } from '@anker-in/lib'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\nexport interface RewardsCopy {\n title: string\n orderNumberLabel: string\n valueLabel: string\n receivedLabel: string\n failedLabel: string\n approveSuccessLabel: string\n couponTab: string\n productTab: string\n externalProductTab?: string\n pendingLabel: string\n unfulfilledLabel: string\n fulfilledLabel: string\n confirmedTip: string\n pendingTip: string\n processingTip: string\n ShippedTip: string\n emptyListLabel: string\n pointUnit: string\n code: string\n copied: string\n copy: string\n redeemLinkLabel?: string\n goGiftStatus?: {\n pending?: {\n label: string\n tip: string\n }\n approved?: {\n label: string\n tip: string\n }\n secondConfirm?: {\n label: string\n tip: string\n }\n rejected?: {\n label: string\n tip: string\n }\n callbackPending?: {\n label: string\n tip: string\n }\n callbackSuccess?: {\n label: string\n tip: string\n }\n callbackTimeout?: {\n label: string\n tip: string\n }\n }\n emptyListImage: {\n url: string\n alt?: string\n }\n}\ninterface RewardsModalProps extends ModalContainerProps {\n data: RewardsCopy\n}\n\nfunction RewardsModal({ data, ...props }: RewardsModalProps) {\n const [activeTab, setActiveTab] = useState(AlpcConsumeType.Coupon)\n const { brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const [page, setPage] = useState(1)\n const [copied, setCopied] = useState(-1)\n\n const tabs = useMemo(() => {\n return [\n { title: data.couponTab, type: AlpcConsumeType.Coupon },\n { title: data.productTab, type: AlpcConsumeType.Product },\n { title: data.externalProductTab, type: AlpcConsumeType.ExternalProduct },\n ].filter((tab): tab is { title: string; type: number } => !!tab.title)\n }, [data.couponTab, data.productTab, data.externalProductTab])\n\n // Reset page when switching tabs\n useEffect(() => {\n setPage(1)\n }, [activeTab])\n\n const { myRewards = [], canNext, isLoading } = useMyRewards({\n page,\n pageSize: 1000,\n consumeType: activeTab,\n })\n\n const getProductType = useCallback((item: any) => {\n if (item.fulfillment_status && item.fulfillment_status !== 'null') {\n return item.fulfillment_status === 'fulfilled' ? RewardType.Fulfilled : RewardType.Unfulfilled\n }\n\n if (item.approval_status === ApprovalStatus.Success || item.approval_status === ApprovalStatus.DoubleConfirm) {\n return RewardType.ApproveSuccess\n }\n\n if (item.approval_status === ApprovalStatus.Failed) {\n return RewardType.Failed\n }\n\n return RewardType.Pending\n }, [])\n\n const getGoGiftType = useCallback((status?: number) => {\n const statusMap: Record<number, RewardType> = {\n 0: RewardType.GogiftPending,\n 1: RewardType.GogiftApproved,\n 2: RewardType.GogiftSecondConfirm,\n 3: RewardType.GogiftRejected,\n 4: RewardType.GogiftCallbackPending,\n 5: RewardType.GogiftCallbackSuccess,\n 6: RewardType.GogiftCallbackTimeout,\n }\n return status !== undefined ? (statusMap[status] ?? RewardType.GogiftPending) : RewardType.GogiftPending\n }, [])\n\n const list = useMemo(() => {\n return myRewards.map(item => {\n const base = {\n title: item.goods_title,\n value: item.consume_credits,\n date: new Date(item.create_time * 1000),\n }\n\n if (activeTab === AlpcConsumeType.Coupon) {\n return {\n ...base,\n type: RewardType.Received,\n couponCode: item.coupon_code,\n orderNumber: '',\n link: '',\n }\n }\n\n if (activeTab === AlpcConsumeType.Product) {\n return {\n ...base,\n type: getProductType(item),\n orderNumber: item.order_number,\n couponCode: '',\n link: '',\n }\n }\n\n if (activeTab === AlpcConsumeType.ExternalProduct) {\n return {\n ...base,\n type: getGoGiftType(item.approval_status),\n orderNumber: '',\n couponCode: '',\n link: item.link || '',\n }\n }\n\n return { ...base, type: RewardType.Received, couponCode: '', orderNumber: '', link: '' }\n })\n }, [activeTab, myRewards, getProductType, getGoGiftType])\n\n\n const TypeMap = useMemo(() => {\n return {\n [RewardType.Received]: data.receivedLabel,\n [RewardType.Pending]: data.pendingLabel,\n [RewardType.ApproveFail]: data.failedLabel,\n [RewardType.ApproveSuccess]: data.approveSuccessLabel,\n [RewardType.Unfulfilled]: data.unfulfilledLabel,\n [RewardType.Fulfilled]: data.fulfilledLabel,\n [RewardType.Failed]: data.failedLabel,\n [RewardType.GogiftPending]: data.goGiftStatus?.pending?.label || data.pendingLabel,\n [RewardType.GogiftApproved]: data.goGiftStatus?.approved?.label || data.approveSuccessLabel,\n [RewardType.GogiftSecondConfirm]: data.goGiftStatus?.secondConfirm?.label || data.approveSuccessLabel,\n [RewardType.GogiftRejected]: data.goGiftStatus?.rejected?.label || data.failedLabel,\n [RewardType.GogiftCallbackPending]: data.goGiftStatus?.callbackPending?.label || data.pendingLabel,\n [RewardType.GogiftCallbackSuccess]: data.goGiftStatus?.callbackSuccess?.label || data.receivedLabel,\n [RewardType.GogiftCallbackTimeout]: data.goGiftStatus?.callbackTimeout?.label || data.failedLabel,\n }\n }, [data])\n\n const TipMap = useMemo(() => {\n return {\n [RewardType.Received]: '',\n [RewardType.Pending]: data.pendingTip,\n [RewardType.ApproveFail]: '',\n [RewardType.ApproveSuccess]: data.confirmedTip,\n [RewardType.Unfulfilled]: data.processingTip,\n [RewardType.Fulfilled]: data.ShippedTip,\n [RewardType.Failed]: '',\n [RewardType.GogiftPending]: data.goGiftStatus?.pending?.tip || '',\n [RewardType.GogiftApproved]: data.goGiftStatus?.approved?.tip || '',\n [RewardType.GogiftSecondConfirm]: data.goGiftStatus?.secondConfirm?.tip || '',\n [RewardType.GogiftRejected]: data.goGiftStatus?.rejected?.tip || '',\n [RewardType.GogiftCallbackPending]: data.goGiftStatus?.callbackPending?.tip || '',\n [RewardType.GogiftCallbackSuccess]: data.goGiftStatus?.callbackSuccess?.tip || '',\n [RewardType.GogiftCallbackTimeout]: data.goGiftStatus?.callbackTimeout?.tip || '',\n }\n }, [data])\n\n const ColorMap = useMemo(() => {\n return {\n [RewardType.Received]: '#52C41A',\n [RewardType.Pending]: '#999',\n [RewardType.ApproveFail]: '#F84D4F',\n [RewardType.ApproveSuccess]: '#999',\n [RewardType.Unfulfilled]: '#999',\n [RewardType.Fulfilled]: '#999',\n [RewardType.Failed]: '#F84D4F',\n [RewardType.GogiftPending]: '#999',\n [RewardType.GogiftApproved]: '#999',\n [RewardType.GogiftSecondConfirm]: '#999',\n [RewardType.GogiftRejected]: '#F84D4F',\n [RewardType.GogiftCallbackPending]: '#999',\n [RewardType.GogiftCallbackSuccess]: '#52C41A',\n [RewardType.GogiftCallbackTimeout]: '#F84D4F',\n }\n }, [])\n\n const handleScrollEnd = useCallback(() => {\n if (canNext) {\n setPage(prev => prev + 1)\n }\n }, [canNext])\n\n const handleCopy = useCallback((code: string, idx: number) => {\n setCopied(idx)\n clipboard(code)\n setTimeout(() => {\n setCopied(-1)\n }, 2000)\n }, [])\n\n\n return (\n <CreditsModalContainer\n title={data.title}\n className={classNames('h-[800px] w-[640px]')}\n useAnimation\n animationClassName=\"md:translate-y-[100vh]\"\n scrollClassName=\"md:mb-0 flex flex-col\"\n {...props}\n onScrollEnd={handleScrollEnd}\n >\n <div className=\"shrink-0\">\n <Tabs\n align=\"left\"\n shape={rounded ? 'rounded' : 'square'}\n value={activeTab.toString()}\n onValueChange={value => {\n setActiveTab(Number(value))\n }}\n >\n <TabsList>\n {tabs.map(tab => (\n <TabsTrigger key={tab.type} value={tab.type.toString()}>\n {tab.title}\n </TabsTrigger>\n ))}\n </TabsList>\n </Tabs>\n </div>\n\n {isLoading && (\n <div className=\"flex flex-1 flex-col items-center justify-center\">\n <LoadingDots />\n </div>\n )}\n\n {!isLoading && (\n <div className=\"mt-[24px] flex-1 overflow-auto overscroll-contain pb-[24px] md:pb-[48px]\">\n {list.length > 0 ? (\n <div className=\"grid gap-[18px] md:gap-[12px]\">\n {list.map((item, index) => (\n <div key={index} className=\"grid gap-[8px]\">\n {item?.orderNumber && (\n <div className=\"text-[15px] font-semibold leading-[1.4] text-[#777]\">\n {data.orderNumberLabel}: {item.orderNumber}\n </div>\n )}\n <div\n className={classNames(\n 'flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]',\n !rounded && 'rounded-none'\n )}\n >\n <div className=\"grid gap-[4px]\">\n <div className=\"text-[16px] font-bold leading-[1.4]\">{item.title}</div>\n <div className=\"text-[14px] font-semibold text-[#999]\">\n {data.valueLabel}: {item.value} {data?.pointUnit}\n </div>\n <div className=\"text-[14px] font-semibold text-[#999]\">\n {item?.couponCode ? `${data?.code || 'Code'}: ${item.couponCode} ` : ''}\n {item?.couponCode && (\n <span\n className=\"cursor-pointer text-[14px] font-semibold text-brand underline\"\n onClick={() => {\n handleCopy(item.couponCode, index)\n }}\n role=\"button\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n >\n {copied === index ? data?.copied || 'COPIED' : data?.copy || 'COPY'}\n </span>\n )}\n </div>\n {item?.link && (\n <div className=\"text-[14px] font-semibold text-[#999]\">\n <a\n href={item.link}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-brand underline\"\n >\n {data?.redeemLinkLabel || 'Redeem Link'}\n </a>\n </div>\n )}\n </div>\n <div className=\"grid gap-[4px] text-right\">\n <div\n className={classNames(\n 'flex items-center justify-end text-[16px] font-bold leading-[1.4]',\n `text-[${ColorMap[item.type]}]`\n )}\n >\n <span>{TypeMap[item.type]}</span>\n {TipMap[item.type] && <Tip info={TipMap[item.type]} index={index} />}\n </div>\n <div className=\"text-[14px] font-semibold text-[#999]\">\n {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}\n </div>\n </div>\n </div>\n </div>\n ))}\n </div>\n ) : (\n <div className=\"flex h-full flex-col items-center justify-center\">\n <Picture\n className=\"mb-[12px] w-[160px]\"\n source={data?.emptyListImage?.url}\n alt={data?.emptyListImage?.alt || 'empty list image'}\n ></Picture>\n <div className=\"text-[16px] font-semibold leading-[1.4]\">{data?.emptyListLabel}</div>\n </div>\n )}\n </div>\n )}\n </CreditsModalContainer>\n )\n}\n\nexport default RewardsModal\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "Tabs", "TabsList", "TabsTrigger", "Picture", "classNames", "clipboard", "dayjs", "useCallback", "useEffect", "useMemo", "useState", "ApprovalStatus", "AlpcConsumeType", "RewardType", "CreditsModalContainer", "Tip", "LoadingDots", "useMyRewards", "useHeadlessContext", "ROUNDED_BRANDS", "RewardsModal", "data", "props", "activeTab", "setActiveTab", "brand", "rounded", "page", "setPage", "copied", "setCopied", "tabs", "tab", "myRewards", "canNext", "isLoading", "getProductType", "item", "getGoGiftType", "status", "statusMap", "list", "base", "TypeMap", "TipMap", "ColorMap", "handleScrollEnd", "prev", "handleCopy", "code", "idx", "
|
|
4
|
+
"sourcesContent": ["import { Tabs, TabsContent, TabsList, TabsTrigger, Picture } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport clipboard from 'copy-to-clipboard'\nimport dayjs from 'dayjs'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { ApprovalStatus, AlpcConsumeType, RewardType } from '../context/const'\nimport { CreditsModalContainer, type ModalContainerProps } from './ModalContainer'\nimport Tip from './Tip'\nimport LoadingDots from './LoadingDots'\nimport useMyRewards from '../context/hooks/useMyRewards'\nimport { useHeadlessContext } from '@anker-in/lib'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\nexport interface RewardsCopy {\n title: string\n orderNumberLabel: string\n valueLabel: string\n receivedLabel: string\n failedLabel: string\n approveSuccessLabel: string\n couponTab: string\n productTab: string\n externalProductTab?: string\n pendingLabel: string\n unfulfilledLabel: string\n fulfilledLabel: string\n confirmedTip: string\n pendingTip: string\n processingTip: string\n ShippedTip: string\n emptyListLabel: string\n pointUnit: string\n code: string\n copied: string\n copy: string\n redeemLinkLabel?: string\n goGiftStatus?: {\n pending?: {\n label: string\n tip: string\n }\n approved?: {\n label: string\n tip: string\n }\n secondConfirm?: {\n label: string\n tip: string\n }\n rejected?: {\n label: string\n tip: string\n }\n callbackPending?: {\n label: string\n tip: string\n }\n callbackSuccess?: {\n label: string\n tip: string\n }\n callbackTimeout?: {\n label: string\n tip: string\n }\n }\n emptyListImage: {\n url: string\n alt?: string\n }\n}\ninterface RewardsModalProps extends ModalContainerProps {\n data: RewardsCopy\n}\n\nfunction RewardsModal({ data, ...props }: RewardsModalProps) {\n const [activeTab, setActiveTab] = useState(AlpcConsumeType.Coupon)\n const { brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const [page, setPage] = useState(1)\n const [copied, setCopied] = useState(-1)\n\n const tabs = useMemo(() => {\n return [\n { title: data.couponTab, type: AlpcConsumeType.Coupon },\n { title: data.productTab, type: AlpcConsumeType.Product },\n { title: data.externalProductTab, type: AlpcConsumeType.ExternalProduct },\n ].filter((tab): tab is { title: string; type: number } => !!tab.title)\n }, [data.couponTab, data.productTab, data.externalProductTab])\n\n // Reset page when switching tabs\n useEffect(() => {\n setPage(1)\n }, [activeTab])\n\n const { myRewards = [], canNext, isLoading } = useMyRewards({\n page,\n pageSize: 1000,\n consumeType: activeTab,\n })\n\n const getProductType = useCallback((item: any) => {\n if (item.fulfillment_status && item.fulfillment_status !== 'null') {\n return item.fulfillment_status === 'fulfilled' ? RewardType.Fulfilled : RewardType.Unfulfilled\n }\n\n if (item.approval_status === ApprovalStatus.Success || item.approval_status === ApprovalStatus.DoubleConfirm) {\n return RewardType.ApproveSuccess\n }\n\n if (item.approval_status === ApprovalStatus.Failed) {\n return RewardType.Failed\n }\n\n return RewardType.Pending\n }, [])\n\n const getGoGiftType = useCallback((status?: number) => {\n const statusMap: Record<number, RewardType> = {\n 0: RewardType.GogiftPending,\n 1: RewardType.GogiftApproved,\n 2: RewardType.GogiftSecondConfirm,\n 3: RewardType.GogiftRejected,\n 4: RewardType.GogiftCallbackPending,\n 5: RewardType.GogiftCallbackSuccess,\n 6: RewardType.GogiftCallbackTimeout,\n }\n return status !== undefined ? (statusMap[status] ?? RewardType.GogiftPending) : RewardType.GogiftPending\n }, [])\n\n const list = useMemo(() => {\n return myRewards.map(item => {\n const base = {\n title: item.goods_title,\n value: item.consume_credits,\n date: new Date(item.create_time * 1000),\n }\n\n if (activeTab === AlpcConsumeType.Coupon) {\n return {\n ...base,\n type: RewardType.Received,\n couponCode: item.coupon_code,\n orderNumber: '',\n link: '',\n }\n }\n\n if (activeTab === AlpcConsumeType.Product) {\n return {\n ...base,\n type: getProductType(item),\n orderNumber: item.order_number,\n couponCode: '',\n link: '',\n }\n }\n\n if (activeTab === AlpcConsumeType.ExternalProduct) {\n return {\n ...base,\n type: getGoGiftType(item.approval_status),\n orderNumber: '',\n couponCode: '',\n link: item.link || '',\n }\n }\n\n return { ...base, type: RewardType.Received, couponCode: '', orderNumber: '', link: '' }\n })\n }, [activeTab, myRewards, getProductType, getGoGiftType])\n\n\n const TypeMap = useMemo(() => {\n return {\n [RewardType.Received]: data.receivedLabel,\n [RewardType.Pending]: data.pendingLabel,\n [RewardType.ApproveFail]: data.failedLabel,\n [RewardType.ApproveSuccess]: data.approveSuccessLabel,\n [RewardType.Unfulfilled]: data.unfulfilledLabel,\n [RewardType.Fulfilled]: data.fulfilledLabel,\n [RewardType.Failed]: data.failedLabel,\n [RewardType.GogiftPending]: data.goGiftStatus?.pending?.label || data.pendingLabel,\n [RewardType.GogiftApproved]: data.goGiftStatus?.approved?.label || data.approveSuccessLabel,\n [RewardType.GogiftSecondConfirm]: data.goGiftStatus?.secondConfirm?.label || data.approveSuccessLabel,\n [RewardType.GogiftRejected]: data.goGiftStatus?.rejected?.label || data.failedLabel,\n [RewardType.GogiftCallbackPending]: data.goGiftStatus?.callbackPending?.label || data.pendingLabel,\n [RewardType.GogiftCallbackSuccess]: data.goGiftStatus?.callbackSuccess?.label || data.receivedLabel,\n [RewardType.GogiftCallbackTimeout]: data.goGiftStatus?.callbackTimeout?.label || data.failedLabel,\n }\n }, [data])\n\n const TipMap = useMemo(() => {\n return {\n [RewardType.Received]: '',\n [RewardType.Pending]: data.pendingTip,\n [RewardType.ApproveFail]: '',\n [RewardType.ApproveSuccess]: data.confirmedTip,\n [RewardType.Unfulfilled]: data.processingTip,\n [RewardType.Fulfilled]: data.ShippedTip,\n [RewardType.Failed]: '',\n [RewardType.GogiftPending]: data.goGiftStatus?.pending?.tip || '',\n [RewardType.GogiftApproved]: data.goGiftStatus?.approved?.tip || '',\n [RewardType.GogiftSecondConfirm]: data.goGiftStatus?.secondConfirm?.tip || '',\n [RewardType.GogiftRejected]: data.goGiftStatus?.rejected?.tip || '',\n [RewardType.GogiftCallbackPending]: data.goGiftStatus?.callbackPending?.tip || '',\n [RewardType.GogiftCallbackSuccess]: data.goGiftStatus?.callbackSuccess?.tip || '',\n [RewardType.GogiftCallbackTimeout]: data.goGiftStatus?.callbackTimeout?.tip || '',\n }\n }, [data])\n\n const ColorMap = useMemo(() => {\n return {\n [RewardType.Received]: '#52C41A',\n [RewardType.Pending]: '#999',\n [RewardType.ApproveFail]: '#F84D4F',\n [RewardType.ApproveSuccess]: '#999',\n [RewardType.Unfulfilled]: '#999',\n [RewardType.Fulfilled]: '#999',\n [RewardType.Failed]: '#F84D4F',\n [RewardType.GogiftPending]: '#999',\n [RewardType.GogiftApproved]: '#999',\n [RewardType.GogiftSecondConfirm]: '#999',\n [RewardType.GogiftRejected]: '#F84D4F',\n [RewardType.GogiftCallbackPending]: '#999',\n [RewardType.GogiftCallbackSuccess]: '#52C41A',\n [RewardType.GogiftCallbackTimeout]: '#F84D4F',\n }\n }, [])\n\n const handleScrollEnd = useCallback(() => {\n if (canNext) {\n setPage(prev => prev + 1)\n }\n }, [canNext])\n\n const handleCopy = useCallback((code: string, idx: number) => {\n setCopied(idx)\n clipboard(code)\n setTimeout(() => {\n setCopied(-1)\n }, 2000)\n }, [])\n\n\n // \u6BCF\u4E2A tab \u5BF9\u5E94\u4E00\u6B21\u72EC\u7ACB\u7684\u63A5\u53E3\u8BF7\u6C42\uFF08consumeType \u4E0D\u540C\uFF09\uFF0C\u5F53\u524D\u53EA\u6709\u6FC0\u6D3B tab \u7684\u6570\u636E\u5B58\u5728\u4E8E\u5BA2\u6237\u7AEF\u3002\n // TabsContent \u53EA\u6302\u8F7D\u5F53\u524D\u6FC0\u6D3B\u7684\u4E00\u4E2A\uFF0C\u5404 tab \u590D\u7528\u540C\u4E00\u4EFD list/isLoading \u72B6\u6001\u662F\u5B89\u5168\u7684\u3002\n const renderContent = () => (\n <>\n {isLoading && (\n <div className=\"flex flex-1 flex-col items-center justify-center\">\n <LoadingDots />\n </div>\n )}\n\n {!isLoading && (\n <div className=\"mt-[24px] flex-1 overflow-auto overscroll-contain pb-[24px] md:pb-[48px]\">\n {list.length > 0 ? (\n <div className=\"grid gap-[18px] md:gap-[12px]\">\n {list.map((item, index) => (\n <div key={index} className=\"grid gap-[8px]\">\n {item?.orderNumber && (\n <div className=\"text-[15px] font-semibold leading-[1.4] text-[#777]\">\n {data.orderNumberLabel}: {item.orderNumber}\n </div>\n )}\n <div\n className={classNames(\n 'flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]',\n !rounded && 'rounded-none'\n )}\n >\n <div className=\"grid gap-[4px]\">\n <div className=\"text-[16px] font-bold leading-[1.4]\">{item.title}</div>\n <div className=\"text-[14px] font-semibold text-[#999]\">\n {data.valueLabel}: {item.value} {data?.pointUnit}\n </div>\n <div className=\"text-[14px] font-semibold text-[#999]\">\n {item?.couponCode ? `${data?.code || 'Code'}: ${item.couponCode} ` : ''}\n {item?.couponCode && (\n <span\n className=\"cursor-pointer text-[14px] font-semibold text-brand underline\"\n onClick={() => {\n handleCopy(item.couponCode, index)\n }}\n role=\"button\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n >\n {copied === index ? data?.copied || 'COPIED' : data?.copy || 'COPY'}\n </span>\n )}\n </div>\n {item?.link && (\n <div className=\"text-[14px] font-semibold text-[#999]\">\n <a\n href={item.link}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-brand underline\"\n >\n {data?.redeemLinkLabel || 'Redeem Link'}\n </a>\n </div>\n )}\n </div>\n <div className=\"grid gap-[4px] text-right\">\n <div\n className={classNames(\n 'flex items-center justify-end text-[16px] font-bold leading-[1.4]',\n `text-[${ColorMap[item.type]}]`\n )}\n >\n <span>{TypeMap[item.type]}</span>\n {TipMap[item.type] && <Tip info={TipMap[item.type]} index={index} />}\n </div>\n <div className=\"text-[14px] font-semibold text-[#999]\">\n {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}\n </div>\n </div>\n </div>\n </div>\n ))}\n </div>\n ) : (\n <div className=\"flex h-full flex-col items-center justify-center\">\n <Picture\n className=\"mb-[12px] w-[160px]\"\n source={data?.emptyListImage?.url}\n alt={data?.emptyListImage?.alt || 'empty list image'}\n ></Picture>\n <div className=\"text-[16px] font-semibold leading-[1.4]\">{data?.emptyListLabel}</div>\n </div>\n )}\n </div>\n )}\n </>\n )\n\n return (\n <CreditsModalContainer\n title={data.title}\n className={classNames('h-[800px] w-[640px]')}\n useAnimation\n animationClassName=\"md:translate-y-[100vh]\"\n scrollClassName=\"md:mb-0 flex flex-col\"\n {...props}\n onScrollEnd={handleScrollEnd}\n >\n <Tabs\n align=\"left\"\n shape={rounded ? 'rounded' : 'square'}\n value={activeTab.toString()}\n onValueChange={value => {\n setActiveTab(Number(value))\n }}\n className=\"flex flex-1 flex-col\"\n >\n <div className=\"shrink-0\">\n <TabsList>\n {tabs.map(tab => (\n <TabsTrigger key={tab.type} value={tab.type.toString()}>\n {tab.title}\n </TabsTrigger>\n ))}\n </TabsList>\n </div>\n\n {tabs.map(tab => (\n <TabsContent key={tab.type} value={tab.type.toString()} className=\"flex flex-1 flex-col\">\n {renderContent()}\n </TabsContent>\n ))}\n </Tabs>\n </CreditsModalContainer>\n )\n}\n\nexport default RewardsModal\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "Picture", "classNames", "clipboard", "dayjs", "useCallback", "useEffect", "useMemo", "useState", "ApprovalStatus", "AlpcConsumeType", "RewardType", "CreditsModalContainer", "Tip", "LoadingDots", "useMyRewards", "useHeadlessContext", "ROUNDED_BRANDS", "RewardsModal", "data", "props", "activeTab", "setActiveTab", "brand", "rounded", "page", "setPage", "copied", "setCopied", "tabs", "tab", "myRewards", "canNext", "isLoading", "getProductType", "item", "getGoGiftType", "status", "statusMap", "list", "base", "TypeMap", "TipMap", "ColorMap", "handleScrollEnd", "prev", "handleCopy", "code", "idx", "renderContent", "index", "e", "value", "RewardsModal_default"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Container, Heading, Tabs, TabsList, TabsTrigger, Text } from '@anker-in/headless-ui'
|
|
1
|
+
import { Container, Heading, Tabs, TabsContent, TabsList, TabsTrigger, Text } from '@anker-in/headless-ui'
|
|
2
2
|
import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
|
|
3
|
-
import { useMemo
|
|
3
|
+
import { useMemo } from 'react'
|
|
4
4
|
|
|
5
5
|
import { FaqItem } from './faqItem/FaqItem'
|
|
6
6
|
import { ROUNDED_BRANDS } from '../../../constants'
|
|
@@ -22,18 +22,36 @@ export const CreditsFaq = ({ copy, id }: { copy: CreditsFaqCopy; id?: string })
|
|
|
22
22
|
const { title, items: faqList, subTitle = '' } = copy || {}
|
|
23
23
|
const { brand } = useHeadlessContext()
|
|
24
24
|
const rounded = ROUNDED_BRANDS.includes(brand)
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
|
|
26
|
+
// 按 category_name 分组，避免手动 activeTab 字符串比较（隐藏字符/类型不一致会导致过滤失败）
|
|
27
|
+
const groupedByCategory = useMemo(() => {
|
|
28
|
+
const map = new Map<string, CreditsFaqCopy['items']>()
|
|
29
|
+
faqList?.forEach(item => {
|
|
30
|
+
const key = item?.category_name
|
|
31
|
+
if (!key) return
|
|
32
|
+
if (!map.has(key)) map.set(key, [])
|
|
33
|
+
map.get(key)!.push(item)
|
|
34
|
+
})
|
|
35
|
+
return map
|
|
27
36
|
}, [faqList])
|
|
28
|
-
const [activeTab, setActiveTab] = useState<string>(categoryList[0]?.toString() || '')
|
|
29
37
|
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
|
|
38
|
+
const categoryList = useMemo(() => Array.from(groupedByCategory.keys()), [groupedByCategory])
|
|
39
|
+
const defaultTab = categoryList[0]?.toString() || ''
|
|
40
|
+
|
|
41
|
+
const renderFaqItems = (list: CreditsFaqCopy['items']) => (
|
|
42
|
+
<div className={cn('mt-[24px] flex flex-col overflow-auto pt-0')}>
|
|
43
|
+
{list?.map((item, index) => (
|
|
44
|
+
<FaqItem
|
|
45
|
+
key={index}
|
|
46
|
+
index={index}
|
|
47
|
+
defaultExpended={list.length === 1}
|
|
48
|
+
question={item.question}
|
|
49
|
+
answer={item.answer}
|
|
50
|
+
showDots={false}
|
|
51
|
+
></FaqItem>
|
|
52
|
+
))}
|
|
53
|
+
</div>
|
|
54
|
+
)
|
|
37
55
|
|
|
38
56
|
return (
|
|
39
57
|
<Container id={id} className="bg-[#F5F5F7]">
|
|
@@ -43,38 +61,25 @@ export const CreditsFaq = ({ copy, id }: { copy: CreditsFaqCopy; id?: string })
|
|
|
43
61
|
<Text size="4" as="p" html={subTitle} className="flex-1" />
|
|
44
62
|
</div>
|
|
45
63
|
)}
|
|
46
|
-
{
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
<TabsList>
|
|
64
|
+
{categoryList.length ? (
|
|
65
|
+
<Tabs align="left" shape={rounded ? 'rounded' : 'square'} className="mt-[24px]" defaultValue={defaultTab}>
|
|
66
|
+
{/* faq-nav */}
|
|
67
|
+
<TabsList>
|
|
68
|
+
{categoryList.map((item, index) => (
|
|
69
|
+
<TabsTrigger key={index} value={item}>
|
|
70
|
+
{item}
|
|
71
|
+
</TabsTrigger>
|
|
72
|
+
))}
|
|
73
|
+
</TabsList>
|
|
57
74
|
{categoryList.map((item, index) => (
|
|
58
|
-
<
|
|
59
|
-
{item}
|
|
60
|
-
</
|
|
75
|
+
<TabsContent key={index} value={item}>
|
|
76
|
+
{renderFaqItems(groupedByCategory.get(item) || [])}
|
|
77
|
+
</TabsContent>
|
|
61
78
|
))}
|
|
62
|
-
</
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
return (
|
|
67
|
-
<FaqItem
|
|
68
|
-
key={index}
|
|
69
|
-
index={index}
|
|
70
|
-
defaultExpended={faqList.length === 1}
|
|
71
|
-
question={item.question}
|
|
72
|
-
answer={item.answer}
|
|
73
|
-
showDots={false}
|
|
74
|
-
></FaqItem>
|
|
75
|
-
)
|
|
76
|
-
})}
|
|
77
|
-
</div>
|
|
79
|
+
</Tabs>
|
|
80
|
+
) : (
|
|
81
|
+
renderFaqItems(faqList || [])
|
|
82
|
+
)}
|
|
78
83
|
{copy.learnMore?.link && copy.learnMore?.label && (
|
|
79
84
|
<a
|
|
80
85
|
href={copy.learnMore?.link}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Container, Heading, Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
|
|
1
|
+
import { Container, Heading, Tabs, TabsContent, TabsList, TabsTrigger } from '@anker-in/headless-ui'
|
|
2
2
|
import { useMemo, useState, useEffect, useCallback, useRef } from 'react'
|
|
3
3
|
import Decimal from 'decimal.js'
|
|
4
4
|
|
|
@@ -348,51 +348,44 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
|
|
|
348
348
|
</TabsTrigger>
|
|
349
349
|
))}
|
|
350
350
|
</TabsList>
|
|
351
|
-
</Tabs>
|
|
352
351
|
|
|
353
|
-
{/* Tab 内容 */}
|
|
354
|
-
<div className="relative mt-[24px]">
|
|
355
352
|
{/* 会员价 Tab */}
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
{
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
</>
|
|
369
|
-
)}
|
|
353
|
+
<TabsContent value="memberPrice" className="relative mt-[24px]">
|
|
354
|
+
<div className="grid md:grid-cols-2 gap-[12px] grid-cols-4 md-xl:grid-cols-3 lg:gap-[16px]">
|
|
355
|
+
{memberPricePagination.currentItems?.map((item, index: number) => (
|
|
356
|
+
<MemberPriceItem key={index} itemData={item} copy={copy.memberPriceTab} />
|
|
357
|
+
))}
|
|
358
|
+
</div>
|
|
359
|
+
<Pagination
|
|
360
|
+
currentPage={currentPage}
|
|
361
|
+
totalPages={memberPricePagination.totalPages}
|
|
362
|
+
onPageChange={handlePageChange}
|
|
363
|
+
/>
|
|
364
|
+
</TabsContent>
|
|
370
365
|
|
|
371
366
|
{/* 积分兑换 Tab */}
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
copy
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
)}
|
|
395
|
-
</div>
|
|
367
|
+
<TabsContent value="redeem" className="relative mt-[24px]">
|
|
368
|
+
<div className="grid md:grid-cols-2 gap-[12px] grid-cols-4 md-xl:grid-cols-3 lg:gap-[16px]">
|
|
369
|
+
{redeemPagination.currentItems?.map((item, index: number) => (
|
|
370
|
+
<RedeemableItem
|
|
371
|
+
key={index}
|
|
372
|
+
copy={{
|
|
373
|
+
title: copy.title,
|
|
374
|
+
...copy.redeemTab,
|
|
375
|
+
}}
|
|
376
|
+
itemData={item}
|
|
377
|
+
setRules={setRules}
|
|
378
|
+
currencyCode={redeemProducts?.[0]?.price.currencyCode || 'USD'}
|
|
379
|
+
/>
|
|
380
|
+
))}
|
|
381
|
+
</div>
|
|
382
|
+
<Pagination
|
|
383
|
+
currentPage={currentPage}
|
|
384
|
+
totalPages={redeemPagination.totalPages}
|
|
385
|
+
onPageChange={handlePageChange}
|
|
386
|
+
/>
|
|
387
|
+
</TabsContent>
|
|
388
|
+
</Tabs>
|
|
396
389
|
|
|
397
390
|
{/* Rules Modal */}
|
|
398
391
|
{rules && (
|