@anker-in/campaign-ui 0.4.5-beta.9 → 0.4.6
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/LiveChatWidget/components/MessageContent/CartCard.js +1 -1
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/CartCard.js.map +3 -3
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductCard.js +1 -1
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductCard.js.map +2 -2
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductComparison.js +1 -1
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductComparison.js.map +2 -2
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductList.js +1 -1
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductList.js.map +2 -2
- package/dist/cjs/components/LiveChatWidget/constants.d.ts +1 -0
- package/dist/cjs/components/LiveChatWidget/constants.js +1 -1
- package/dist/cjs/components/LiveChatWidget/constants.js.map +3 -3
- package/dist/cjs/components/credits/context/hooks/useAlpcFetch.js +1 -1
- package/dist/cjs/components/credits/context/hooks/useAlpcFetch.js.map +2 -2
- package/dist/cjs/components/credits/context/hooks/useRedeemAndBuy.js +1 -1
- package/dist/cjs/components/credits/context/hooks/useRedeemAndBuy.js.map +3 -3
- package/dist/cjs/components/credits/creditsCash/CreditsCash.js +1 -1
- package/dist/cjs/components/credits/creditsCash/CreditsCash.js.map +3 -3
- package/dist/cjs/components/credits/creditsRedeemList/RedeemCouponModal.js +1 -1
- package/dist/cjs/components/credits/creditsRedeemList/RedeemCouponModal.js.map +3 -3
- package/dist/cjs/components/credits/creditsRedeemList/RedeemVirtualProductModal.js +1 -1
- package/dist/cjs/components/credits/creditsRedeemList/RedeemVirtualProductModal.js.map +2 -2
- package/dist/cjs/components/credits/modal/ActivitiesModal.js +1 -1
- package/dist/cjs/components/credits/modal/ActivitiesModal.js.map +2 -2
- package/dist/cjs/components/credits/modal/RewardsModal.js +1 -1
- package/dist/cjs/components/credits/modal/RewardsModal.js.map +2 -2
- package/dist/cjs/stories/CartCard.stories.d.ts +33 -0
- package/dist/cjs/stories/CartCard.stories.js +21 -0
- package/dist/cjs/stories/CartCard.stories.js.map +7 -0
- package/dist/esm/components/LiveChatWidget/components/MessageContent/CartCard.js +1 -1
- package/dist/esm/components/LiveChatWidget/components/MessageContent/CartCard.js.map +3 -3
- package/dist/esm/components/LiveChatWidget/components/MessageContent/ProductCard.js +1 -1
- package/dist/esm/components/LiveChatWidget/components/MessageContent/ProductCard.js.map +3 -3
- package/dist/esm/components/LiveChatWidget/components/MessageContent/ProductComparison.js +1 -1
- package/dist/esm/components/LiveChatWidget/components/MessageContent/ProductComparison.js.map +3 -3
- package/dist/esm/components/LiveChatWidget/components/MessageContent/ProductList.js +1 -1
- package/dist/esm/components/LiveChatWidget/components/MessageContent/ProductList.js.map +3 -3
- package/dist/esm/components/LiveChatWidget/constants.d.ts +1 -0
- package/dist/esm/components/LiveChatWidget/constants.js +1 -1
- package/dist/esm/components/LiveChatWidget/constants.js.map +3 -3
- package/dist/esm/components/credits/context/hooks/useAlpcFetch.js +1 -1
- package/dist/esm/components/credits/context/hooks/useAlpcFetch.js.map +2 -2
- package/dist/esm/components/credits/context/hooks/useRedeemAndBuy.js +1 -1
- package/dist/esm/components/credits/context/hooks/useRedeemAndBuy.js.map +3 -3
- package/dist/esm/components/credits/creditsCash/CreditsCash.js +1 -1
- package/dist/esm/components/credits/creditsCash/CreditsCash.js.map +3 -3
- package/dist/esm/components/credits/creditsRedeemList/RedeemCouponModal.js +1 -1
- package/dist/esm/components/credits/creditsRedeemList/RedeemCouponModal.js.map +3 -3
- package/dist/esm/components/credits/creditsRedeemList/RedeemVirtualProductModal.js +1 -1
- package/dist/esm/components/credits/creditsRedeemList/RedeemVirtualProductModal.js.map +2 -2
- package/dist/esm/components/credits/modal/ActivitiesModal.js +1 -1
- package/dist/esm/components/credits/modal/ActivitiesModal.js.map +2 -2
- package/dist/esm/components/credits/modal/RewardsModal.js +1 -1
- package/dist/esm/components/credits/modal/RewardsModal.js.map +2 -2
- package/dist/esm/stories/CartCard.stories.d.ts +33 -0
- package/dist/esm/stories/CartCard.stories.js +21 -0
- package/dist/esm/stories/CartCard.stories.js.map +7 -0
- package/package.json +1 -1
- package/src/components/LiveChatWidget/components/MessageContent/CartCard.tsx +2 -6
- package/src/components/LiveChatWidget/components/MessageContent/ProductCard.tsx +3 -6
- package/src/components/LiveChatWidget/components/MessageContent/ProductComparison.tsx +5 -5
- package/src/components/LiveChatWidget/components/MessageContent/ProductList.tsx +3 -6
- package/src/components/LiveChatWidget/constants.ts +9 -0
- package/src/components/credits/context/hooks/useAlpcFetch.ts +12 -5
- package/src/components/credits/context/hooks/useRedeemAndBuy.ts +2 -3
- package/src/components/credits/creditsCash/CreditsCash.tsx +12 -5
- package/src/components/credits/creditsRedeemList/RedeemCouponModal.tsx +2 -3
- package/src/components/credits/creditsRedeemList/RedeemVirtualProductModal.tsx +3 -3
- package/src/components/credits/modal/ActivitiesModal.tsx +53 -51
- package/src/components/credits/modal/RewardsModal.tsx +5 -5
|
@@ -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 [activeTab, setActiveTab] = useState(CreditType.All)\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 list = 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)]]\n } else {\n return taskNameMap[item.task_sub_type] || item.task_name\n }\n }\n\n const all = 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 let filtered = all || []\n if (activeTab === CreditType.Earned) {\n filtered = filtered?.filter(item => item.type === 1)\n } else if (activeTab === CreditType.Deducted) {\n filtered = filtered?.filter(item => item.type === 2 && item.status !== 3)\n } else if (activeTab === CreditType.Expired) {\n filtered = filtered?.filter(item => item.type === 2 && item.status === 3)\n }\n\n return filtered.map(item => {\n let { value, ...otherItem } = item\n if (item.type === CreditType.Deducted && value > 0) {\n value = -value\n }\n\n return {\n value,\n ...otherItem,\n }\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 activeTab,\n taskIdToTypeMapping,\n ])\n\n const handleScrollEnd = useCallback(() => {\n if (!canNext) {\n return\n }\n setPage(page + 1)\n }, [page, canNext])\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=\"\"\n {...props}\n onScrollEnd={handleScrollEnd}\n >\n <div className=\"w-full sticky top-0 bg-white z-10 pb-[24px] overflow-x-auto\">\n <Tabs\n align=\"left\"\n shape={rounded ? 'rounded' : 'square'}\n value={activeTab.toString()}\n onValueChange={value => {\n setActiveTab(Number(value))\n }}\n className=\"\"\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 <div className=\"
|
|
5
|
-
"mappings": "AAgMc,
|
|
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 [activeTab, setActiveTab] = useState(CreditType.All)\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 list = 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 const all = 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 let filtered = all || []\n if (activeTab === CreditType.Earned) {\n filtered = filtered?.filter(item => item.type === 1)\n } else if (activeTab === CreditType.Deducted) {\n filtered = filtered?.filter(item => item.type === 2 && item.status !== 3)\n } else if (activeTab === CreditType.Expired) {\n filtered = filtered?.filter(item => item.type === 2 && item.status === 3)\n }\n\n return filtered.map(item => {\n let { value, ...otherItem } = item\n if (item.type === CreditType.Deducted && value > 0) {\n value = -value\n }\n\n return {\n value,\n ...otherItem,\n }\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 activeTab,\n taskIdToTypeMapping,\n ])\n\n const handleScrollEnd = useCallback(() => {\n if (!canNext) {\n return\n }\n setPage(page + 1)\n }, [page, canNext])\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 <div className=\"w-full sticky top-0 bg-white z-10 pb-[24px] overflow-x-auto\">\n <Tabs\n align=\"left\"\n shape={rounded ? 'rounded' : 'square'}\n value={activeTab.toString()}\n onValueChange={value => {\n setActiveTab(Number(value))\n }}\n className=\"\"\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 <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 </CreditsModalContainer>\n )\n}\n\nexport default ActivitiesModal\n"],
|
|
5
|
+
"mappings": "AAgMc,OAiBF,YAAAA,EAjBE,OAAAC,EAiCU,QAAAC,MAjCV,oBAhMd,OAAS,eAAAC,EAAa,WAAAC,EAAS,YAAAC,MAAgB,QAC/C,OAAS,qBAAAC,MAAyB,sBAClC,OAAS,cAAAC,EAAY,iBAAAC,EAAe,eAAAC,EAAa,YAAAC,MAAgB,mBACjE,OAAOC,MAAmB,iCAE1B,OAAS,yBAAAC,MAAuD,mBAChE,OAAS,cAAcC,EAAI,sBAAAC,MAA0B,gBACrD,OAAS,QAAAC,EAAM,YAAAC,EAAU,eAAAC,MAAmB,wBAC5C,OAAOC,MAAiB,gBACxB,OAAS,WAAAC,EAAS,QAAAC,MAAY,wBAC9B,OAAS,kBAAAC,MAAsB,qBAC/B,OAAOC,MAAW,QAiClB,SAASC,EAAgB,CAAE,KAAAC,EAAM,GAAGC,CAAM,EAAyB,CACjE,KAAM,CAACC,EAAMC,CAAO,EAAItB,EAAS,CAAC,EAC5B,CAAE,oBAAAuB,CAAoB,EAAItB,EAAkB,EAC5C,CAAE,MAAAuB,CAAM,EAAIf,EAAmB,EAC/BgB,EAAUT,EAAe,SAASQ,CAAK,EAEvCE,EAAsB3B,EAAQ,KAC3B,CACL,KAAMqB,EAAM,OAASC,EAAO,EAC5B,SAAU,GACZ,GACC,CAACD,EAAM,OAAQC,CAAI,CAAC,EAEjB,CAACM,EAAWC,CAAY,EAAI5B,EAASE,EAAW,GAAG,EACnD2B,EAAO9B,EAAQ,IAAM,CACzB,MAAM8B,EAAO,CACX,CACE,MAAOV,EAAK,OACZ,KAAMjB,EAAW,GACnB,EACA,CACE,MAAOiB,EAAK,UACZ,KAAMjB,EAAW,MACnB,EACA,CACE,MAAOiB,EAAK,YACZ,KAAMjB,EAAW,QACnB,CACF,EACA,OAAIiB,EAAK,YACPU,EAAK,KAAK,CACR,MAAOV,EAAK,WACZ,KAAMjB,EAAW,OACnB,CAAC,EAEI2B,CACT,EAAG,CAACV,CAAI,CAAC,EAEH,CAAE,WAAAW,EAAa,CAAC,EAAG,QAAAC,EAAS,UAAAC,CAAU,EAAI1B,EAAcoB,CAAmB,EAE3EO,EAAOlC,EAAQ,IAAM,CACzB,MAAMmC,EAAc,CAClB,CAAC9B,EAAY,UAAU,EAAGe,EAAK,eAC/B,CAACf,EAAY,UAAU,EAAGe,EAAK,eAC/B,CAACf,EAAY,WAAW,EAAGe,EAAK,gBAChC,CAACf,EAAY,cAAc,EAAGe,EAAK,mBACnC,CAACf,EAAY,YAAY,EAAGe,EAAK,iBACjC,CAACf,EAAY,aAAa,EAAGe,EAAK,kBAClC,CAACf,EAAY,MAAM,EAAGe,EAAK,WAC3B,CAACf,EAAY,iBAAiB,EAAGe,EAAK,qBACxC,EACMgB,EAAuB,CAC3B,CAAChC,EAAc,aAAa,EAAGgB,EAAK,kBACpC,CAAChB,EAAc,aAAa,EAAGgB,EAAK,kBACpC,CAAChB,EAAc,QAAQ,EAAGgB,EAAK,YACjC,EAEA,SAASiB,EAASC,EAAY,CAC5B,OACEA,EAAK,YAAchC,EAAS,QAC5BgC,EAAK,gBAAkBjC,EAAY,mBACnCe,EAAK,sBAGEkB,EAAK,UAAU,QAAQ,SAAUlB,EAAK,qBAAqB,EACzDI,IAAsB,OAAOc,EAAK,YAAY,CAAC,EACjDF,EAAqBZ,IAAsB,OAAOc,EAAK,YAAY,CAAC,CAAC,GAAKA,EAAK,UAE/EH,EAAYG,EAAK,aAAa,GAAKA,EAAK,SAEnD,CAYA,IAAIC,EAVQR,EAAW,IAAIO,IAAS,CAClC,MAAOD,EAASC,CAAI,EACpB,KAAM,IAAI,KAAKA,EAAK,YAAc,GAAI,EACtC,MAAOA,EAAK,OACZ,KAAMA,EAAK,YACX,aAAcA,EAAK,aACnB,YAAaA,EAAK,YAClB,OAAQA,EAAK,MACf,EAAE,GAEoB,CAAC,EACvB,OAAIV,IAAczB,EAAW,OAC3BoC,EAAWA,GAAU,OAAOD,GAAQA,EAAK,OAAS,CAAC,EAC1CV,IAAczB,EAAW,SAClCoC,EAAWA,GAAU,OAAOD,GAAQA,EAAK,OAAS,GAAKA,EAAK,SAAW,CAAC,EAC/DV,IAAczB,EAAW,UAClCoC,EAAWA,GAAU,OAAOD,GAAQA,EAAK,OAAS,GAAKA,EAAK,SAAW,CAAC,GAGnEC,EAAS,IAAID,GAAQ,CAC1B,GAAI,CAAE,MAAAE,EAAO,GAAGC,CAAU,EAAIH,EAC9B,OAAIA,EAAK,OAASnC,EAAW,UAAYqC,EAAQ,IAC/CA,EAAQ,CAACA,GAGJ,CACL,MAAAA,EACA,GAAGC,CACL,CACF,CAAC,CACH,EAAG,CACDrB,EAAK,eACLA,EAAK,eACLA,EAAK,gBACLA,EAAK,mBACLA,EAAK,iBACLA,EAAK,kBACLA,EAAK,WACLA,EAAK,sBACLA,EAAK,kBACLA,EAAK,kBACLA,EAAK,aACLW,EACAH,EACAJ,CACF,CAAC,EAEKkB,EAAkB3C,EAAY,IAAM,CACnCiC,GAGLT,EAAQD,EAAO,CAAC,CAClB,EAAG,CAACA,EAAMU,CAAO,CAAC,EAElB,OACElC,EAACU,EAAA,CACC,MAAOY,EAAK,MACZ,UAAWX,EAAG,qBAAqB,EACnC,aAAY,GACZ,mBAAmB,yBACnB,gBAAgB,gBACf,GAAGY,EACJ,YAAaqB,EAEb,UAAA7C,EAAC,OAAI,UAAU,8DACb,SAAAA,EAACc,EAAA,CACC,MAAM,OACN,MAAOe,EAAU,UAAY,SAC7B,MAAOE,EAAU,SAAS,EAC1B,cAAeY,GAAS,CACtBX,EAAa,OAAOW,CAAK,CAAC,CAC5B,EACA,UAAU,GAEV,SAAA3C,EAACe,EAAA,CACE,SAAAkB,EAAK,IAAIa,GACR9C,EAACgB,EAAA,CAA2B,MAAO8B,EAAI,KAAK,SAAS,EAClD,SAAAA,EAAI,OADWA,EAAI,IAEtB,CACD,EACH,EACF,EACF,EAEA9C,EAAC,OAAI,UAAU,0CACb,SAAAC,EAAC,OAAI,UAAU,gCACZ,UAAAmC,GACCpC,EAAC,OAAI,UAAU,mDACb,SAAAA,EAACiB,EAAA,EAAY,EACf,EAGD,CAACmB,GACApC,EAAAD,EAAA,CACG,SAAAsC,EAAK,OAAS,EACbA,EAAK,IAAI,CAACI,EAAMM,IACd9C,EAAC,OAEC,UAAWW,EACT,qGACA,CAACiB,GAAW,cACd,EAEA,UAAA5B,EAAC,OAAI,UAAU,iBACb,UAAAD,EAAC,OAAI,UAAU,YAAa,SAAAyC,EAAK,MAAM,EACvCzC,EAAC,OAAI,UAAU,wCACZ,SAAAqB,EAAMoB,EAAK,IAAI,EAAE,OAAO,kBAAkB,EAAE,SAAS,EACxD,EACC,CAAClB,EAAK,aACLtB,EAAC,OACC,UAAW,gDAAgDwC,EAAK,SAAW,GAAKA,EAAK,cAAgB,EAAI,QAAU,EAAE,GAErH,UAAAzC,EAACmB,EAAA,CAAK,KAAMI,EAAK,YAAa,EAC9BvB,EAAC,QAAM,SAAAqB,EAAM,KAAKoB,EAAK,YAAY,EAAE,IAAI,EAAG,KAAK,EAAE,OAAO,YAAY,EAAE,EACvElB,EAAK,cAAgBvB,EAACmB,EAAA,CAAK,KAAMI,EAAK,aAAc,GACvD,GAEJ,EACAtB,EAAC,OACC,UAAWW,EACT,YACA6B,EAAK,OAAS,GAAKA,EAAK,cAAgBnC,EAAW,QAAU,iBAAmB,gBAClF,EAEC,UAAAmC,EAAK,OAAS,GAAK,IACnBA,EAAK,OACR,IA7BKM,CA8BP,CACD,EAED9C,EAAC,OAAI,UAAU,sDACb,UAAAD,EAACkB,EAAA,CACC,UAAU,gCACV,OAAQK,GAAM,gBAAgB,IAC9B,IAAKA,GAAM,gBAAgB,KAAO,mBACnC,EACDvB,EAAC,OAAI,UAAU,wCAAyC,SAAAuB,GAAM,eAAe,GAC/E,EAEJ,GAEJ,EACF,EAECc,EAAK,OAAS,GAAKrC,EAAC,OAAI,UAAU,4DAA6D,SAAAuB,EAAK,KAAK,GAC5G,CAEJ,CAEA,IAAOyB,GAAQ1B",
|
|
6
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", "activeTab", "setActiveTab", "tabs", "activities", "canNext", "isLoading", "list", "taskNameMap", "dtcTaskTypeToNameMap", "getTitle", "item", "filtered", "value", "otherItem", "handleScrollEnd", "tab", "index", "ActivitiesModal_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as o,jsxs as n}from"react/jsx-runtime";import{Tabs as _,TabsList as h,TabsTrigger as j,Picture as E}from"@anker-in/headless-ui";import d from"classnames";import U from"copy-to-clipboard";import I from"dayjs";import{useCallback as a,useEffect as Y,useMemo as p,useState as u}from"react";import{ApprovalStatus as
|
|
1
|
+
import{jsx as o,jsxs as n}from"react/jsx-runtime";import{Tabs as _,TabsList as h,TabsTrigger as j,Picture as E}from"@anker-in/headless-ui";import d from"classnames";import U from"copy-to-clipboard";import I from"dayjs";import{useCallback as a,useEffect as Y,useMemo as p,useState as u}from"react";import{ApprovalStatus as f,AlpcConsumeType as s,RewardType as e}from"../context/const";import{CreditsModalContainer as H}from"./ModalContainer";import O from"./Tip";import $ from"./LoadingDots";import q from"../context/hooks/useMyRewards";import{useHeadlessContext as z}from"@anker-in/lib";import{ROUNDED_BRANDS as B}from"../../../constants";function K({data:t,...L}){const[r,k]=u(s.Coupon),{brand:N}=z(),g=B.includes(N),[P,b]=u(1),[R,m]=u(-1),F=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]);Y(()=>{b(1)},[r]);const{myRewards:v=[],canNext:x,isLoading:C}=q({page:P,pageSize:1e3,consumeType:r}),y=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,[]),G=a(i=>{const l={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?l[i]??e.GogiftPending:e.GogiftPending},[]),S=p(()=>v.map(i=>{const l={title:i.goods_title,value:i.consume_credits,date:new Date(i.create_time*1e3)};return r===s.Coupon?{...l,type:e.Received,couponCode:i.coupon_code,orderNumber:"",link:""}:r===s.Product?{...l,type:y(i),orderNumber:i.order_number,couponCode:"",link:""}:r===s.ExternalProduct?{...l,type:G(i.approval_status),orderNumber:"",couponCode:"",link:i.link||""}:{...l,type:e.Received,couponCode:"",orderNumber:"",link:""}}),[r,v,y,G]),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]),T=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(()=>{x&&b(i=>i+1)},[x]),M=a((i,l)=>{m(l),U(i),setTimeout(()=>{m(-1)},2e3)},[]);return n(H,{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:[o("div",{className:"shrink-0",children:o(_,{align:"left",shape:g?"rounded":"square",value:r.toString(),onValueChange:i=>{k(Number(i))},children:o(h,{children:F.map(i=>o(j,{value:i.type.toString(),children:i.title},i.type))})})}),C&&o("div",{className:"flex flex-1 flex-col items-center justify-center",children:o($,{})}),!C&&o("div",{className:"mt-[24px] flex-1 overflow-auto overscroll-contain pb-[24px] md:pb-[48px]",children:S.length>0?o("div",{className:"grid gap-[18px] md:gap-[12px]",children:S.map((i,l)=>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:[o("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&&o("span",{className:"cursor-pointer text-[14px] font-semibold text-brand underline",onClick:()=>{M(i.couponCode,l)},role:"button",tabIndex:0,onKeyDown:c=>{(c.key==="Enter"||c.key===" ")&&c.preventDefault()},children:R===l?t?.copied||"COPIED":t?.copy||"COPY"})]}),i?.link&&o("div",{className:"text-[14px] font-semibold text-[#999]",children:o("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:[o("span",{children:A[i.type]}),T[i.type]&&o(O,{info:T[i.type],index:l})]}),o("div",{className:"text-[14px] font-semibold text-[#999]",children:I(i.date).format("YYYY-MM-DD HH:mm").toString()})]})]})]},l))}):n("div",{className:"flex h-full flex-col items-center justify-center",children:[o(E,{className:"mb-[12px] w-[160px]",source:t?.emptyListImage?.url,alt:t?.emptyListImage?.alt||"empty list image"}),o("div",{className:"text-[16px] font-semibold leading-[1.4]",children:t?.emptyListLabel})]})})]})}var re=K;export{re 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\"\n {...props}\n onScrollEnd={handleScrollEnd}\n >\n <div className=\"\">\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 h-full flex-col items-center justify-center\">\n <LoadingDots />\n </div>\n )}\n\n {!isLoading && (\n <div className=\"mt-[24px] overflow-auto overscroll-contain\">\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": "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
|
|
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": "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",
|
|
6
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", "value", "index", "e", "RewardsModal_default"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CartCard Storybook Stories
|
|
3
|
+
* 展示购物车卡片组件的各种状态
|
|
4
|
+
*/
|
|
5
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import type { CartContent } from '../components/LiveChatWidget/types';
|
|
8
|
+
declare const CartCardWrapper: React.FC<{
|
|
9
|
+
content: CartContent;
|
|
10
|
+
}>;
|
|
11
|
+
declare const meta: Meta<typeof CartCardWrapper>;
|
|
12
|
+
export default meta;
|
|
13
|
+
type Story = StoryObj<typeof CartCardWrapper>;
|
|
14
|
+
/**
|
|
15
|
+
* 空购物车状态
|
|
16
|
+
*/
|
|
17
|
+
export declare const Empty: Story;
|
|
18
|
+
/**
|
|
19
|
+
* 单件商品
|
|
20
|
+
*/
|
|
21
|
+
export declare const SingleItem: Story;
|
|
22
|
+
/**
|
|
23
|
+
* 多件商品
|
|
24
|
+
*/
|
|
25
|
+
export declare const MultipleItems: Story;
|
|
26
|
+
/**
|
|
27
|
+
* 有折扣码的购物车
|
|
28
|
+
*/
|
|
29
|
+
export declare const WithDiscount: Story;
|
|
30
|
+
/**
|
|
31
|
+
* 多个折扣码(部分失效)
|
|
32
|
+
*/
|
|
33
|
+
export declare const WithMultipleDiscounts: Story;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{CartCard as o}from"../components/LiveChatWidget/components/MessageContent/CartCard.js";const a=({content:e})=>t("div",{className:"flex min-h-screen items-center justify-center bg-gray-100 p-4",children:t("div",{className:"w-full max-w-md",children:o.render(e,!1,!1)})}),c={title:"Campaign/LiveChatWidget/MessageContent/CartCard",component:a,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
|
+
# \u8D2D\u7269\u8F66\u5361\u7247\u7EC4\u4EF6
|
|
3
|
+
|
|
4
|
+
\u663E\u793A\u7528\u6237\u8D2D\u7269\u8F66\u5185\u5BB9\uFF0C\u5305\u62EC\u5546\u54C1\u5217\u8868\u3001\u4EF7\u683C\u6C47\u603B\u548C\u7ED3\u8D26\u6309\u94AE\u3002
|
|
5
|
+
|
|
6
|
+
## \u529F\u80FD\u7279\u6027
|
|
7
|
+
|
|
8
|
+
- \u{1F4E6} **\u5546\u54C1\u5217\u8868**: \u5C55\u793A\u8D2D\u7269\u8F66\u4E2D\u7684\u6240\u6709\u5546\u54C1
|
|
9
|
+
- \u{1F4B0} **\u4EF7\u683C\u6C47\u603B**: \u663E\u793A\u5C0F\u8BA1\u3001\u6298\u6263\u548C\u603B\u8BA1
|
|
10
|
+
- \u{1F39F}\uFE0F **\u6298\u6263\u7801**: \u663E\u793A\u5DF2\u5E94\u7528\u7684\u6298\u6263\u7801\u53CA\u5176\u72B6\u6001
|
|
11
|
+
- \u{1F6D2} **\u7ED3\u8D26\u6309\u94AE**: \u4E00\u952E\u8DF3\u8F6C\u5230 Shopify \u7ED3\u8D26\u9875\u9762
|
|
12
|
+
- \u{1F233} **\u7A7A\u72B6\u6001**: \u4F18\u96C5\u7684\u7A7A\u8D2D\u7269\u8F66\u63D0\u793A
|
|
13
|
+
|
|
14
|
+
## \u4F7F\u7528\u573A\u666F
|
|
15
|
+
|
|
16
|
+
- \u7528\u6237\u6DFB\u52A0\u5546\u54C1\u5230\u8D2D\u7269\u8F66\u540E (add_to_cart)
|
|
17
|
+
- \u7528\u6237\u67E5\u8BE2\u8D2D\u7269\u8F66\u5185\u5BB9 (get_cart)
|
|
18
|
+
- \u7528\u6237\u4FEE\u6539\u8D2D\u7269\u8F66\u6570\u91CF (update_cart_item)
|
|
19
|
+
- \u7528\u6237\u5E94\u7528\u6298\u6263\u7801 (update_discount_codes)
|
|
20
|
+
`}}},tags:["autodocs"]};var i=c;const d={args:{content:{type:"cart",data:{isEmpty:!0,cartId:"gid://shopify/Cart/empty",totalQuantity:0,lines:[],cost:{totalAmount:{amount:"0.00",currencyCode:"USD"},subtotalAmount:{amount:"0.00",currencyCode:"USD"}}}}}},s={args:{content:{type:"cart",data:{isEmpty:!1,cartId:"gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH",totalQuantity:1,lines:[{id:"gid://shopify/CartLine/12345",quantity:1,cost:{totalAmount:{amount:"99.99",currencyCode:"USD"},amountPerQuantity:{amount:"99.99",currencyCode:"USD"},subtotalAmount:{amount:"99.99",currencyCode:"USD"}},merchandise:{id:"gid://shopify/ProductVariant/43234567890",title:"Black",price:{amount:"99.99",currencyCode:"USD"},image:{url:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop",altText:"Soundcore Space One"},product:{id:"gid://shopify/Product/8179159826618",title:"Soundcore Space One",handle:"soundcore-space-one"}}}],cost:{totalAmount:{amount:"99.99",currencyCode:"USD"},subtotalAmount:{amount:"99.99",currencyCode:"USD"}},checkoutUrl:"https://checkout.shopify.com/example"}}}},p={args:{content:{type:"cart",data:{isEmpty:!1,cartId:"gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH",totalQuantity:5,lines:[{id:"gid://shopify/CartLine/12345",quantity:2,cost:{totalAmount:{amount:"199.98",currencyCode:"USD"},amountPerQuantity:{amount:"99.99",currencyCode:"USD"},subtotalAmount:{amount:"199.98",currencyCode:"USD"}},merchandise:{id:"gid://shopify/ProductVariant/43234567890",title:"Black",price:{amount:"99.99",currencyCode:"USD"},image:{url:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop",altText:"Soundcore Space One"},product:{id:"gid://shopify/Product/8179159826618",title:"Soundcore Space One",handle:"soundcore-space-one"}}},{id:"gid://shopify/CartLine/12346",quantity:1,cost:{totalAmount:{amount:"129.99",currencyCode:"USD"},amountPerQuantity:{amount:"129.99",currencyCode:"USD"},subtotalAmount:{amount:"129.99",currencyCode:"USD"}},merchandise:{id:"gid://shopify/ProductVariant/43234567891",title:"White",price:{amount:"129.99",currencyCode:"USD"},image:{url:"https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&h=400&fit=crop",altText:"eufy Security Camera"},product:{id:"gid://shopify/Product/8179159826619",title:"eufy Security Camera",handle:"eufy-security-camera"}}},{id:"gid://shopify/CartLine/12347",quantity:2,cost:{totalAmount:{amount:"79.98",currencyCode:"USD"},amountPerQuantity:{amount:"39.99",currencyCode:"USD"},subtotalAmount:{amount:"79.98",currencyCode:"USD"}},merchandise:{id:"gid://shopify/ProductVariant/43234567892",title:"USB-C Cable",price:{amount:"39.99",currencyCode:"USD"},image:{url:"https://images.unsplash.com/photo-1583863788434-e58a36330cf0?w=400&h=400&fit=crop",altText:"Anker USB-C Cable"},product:{id:"gid://shopify/Product/8179159826620",title:"Anker USB-C Cable 6ft",handle:"anker-usb-c-cable"}}}],cost:{totalAmount:{amount:"409.95",currencyCode:"USD"},subtotalAmount:{amount:"409.95",currencyCode:"USD"}},checkoutUrl:"https://checkout.shopify.com/example"}}}},m={args:{content:{type:"cart",data:{isEmpty:!1,cartId:"gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH",totalQuantity:3,lines:[{id:"gid://shopify/CartLine/12345",quantity:2,cost:{totalAmount:{amount:"199.98",currencyCode:"USD"},amountPerQuantity:{amount:"99.99",currencyCode:"USD"},subtotalAmount:{amount:"199.98",currencyCode:"USD"}},merchandise:{id:"gid://shopify/ProductVariant/43234567890",title:"Black",price:{amount:"99.99",currencyCode:"USD"},image:{url:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop",altText:"Soundcore Space One"},product:{id:"gid://shopify/Product/8179159826618",title:"Soundcore Space One",handle:"soundcore-space-one"}}},{id:"gid://shopify/CartLine/12346",quantity:1,cost:{totalAmount:{amount:"129.99",currencyCode:"USD"},amountPerQuantity:{amount:"129.99",currencyCode:"USD"},subtotalAmount:{amount:"129.99",currencyCode:"USD"}},merchandise:{id:"gid://shopify/ProductVariant/43234567891",title:"White",price:{amount:"129.99",currencyCode:"USD"},image:{url:"https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&h=400&fit=crop",altText:"eufy Security Camera"},product:{id:"gid://shopify/Product/8179159826619",title:"eufy Security Camera",handle:"eufy-security-camera"}}}],cost:{totalAmount:{amount:"296.97",currencyCode:"USD"},subtotalAmount:{amount:"329.97",currencyCode:"USD"}},discountCodes:[{code:"SPRING20",applicable:!0}],checkoutUrl:"https://checkout.shopify.com/example"}}}},y={args:{content:{type:"cart",data:{isEmpty:!1,cartId:"gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH",totalQuantity:2,lines:[{id:"gid://shopify/CartLine/12345",quantity:2,cost:{totalAmount:{amount:"199.98",currencyCode:"USD"},amountPerQuantity:{amount:"99.99",currencyCode:"USD"},subtotalAmount:{amount:"199.98",currencyCode:"USD"}},merchandise:{id:"gid://shopify/ProductVariant/43234567890",title:"Black",price:{amount:"99.99",currencyCode:"USD"},image:{url:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop",altText:"Soundcore Space One"},product:{id:"gid://shopify/Product/8179159826618",title:"Soundcore Space One",handle:"soundcore-space-one"}}}],cost:{totalAmount:{amount:"179.98",currencyCode:"USD"},subtotalAmount:{amount:"199.98",currencyCode:"USD"}},discountCodes:[{code:"WELCOME10",applicable:!0},{code:"EXPIRED20",applicable:!1}],checkoutUrl:"https://checkout.shopify.com/example"}}}};export{d as Empty,p as MultipleItems,s as SingleItem,m as WithDiscount,y as WithMultipleDiscounts,i as default};
|
|
21
|
+
//# sourceMappingURL=CartCard.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/stories/CartCard.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["/**\n * CartCard Storybook Stories\n * \u5C55\u793A\u8D2D\u7269\u8F66\u5361\u7247\u7EC4\u4EF6\u7684\u5404\u79CD\u72B6\u6001\n */\n\nimport type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\nimport { CartCard } from '../components/LiveChatWidget/components/MessageContent/CartCard.js'\nimport type { CartContent } from '../components/LiveChatWidget/types'\n\n// Story \u5305\u88C5\u7EC4\u4EF6\nconst CartCardWrapper: React.FC<{ content: CartContent }> = ({ content }) => {\n return (\n <div className=\"flex min-h-screen items-center justify-center bg-gray-100 p-4\">\n <div className=\"w-full max-w-md\">{CartCard.render(content, false, false)}</div>\n </div>\n )\n}\n\nconst meta: Meta<typeof CartCardWrapper> = {\n title: 'Campaign/LiveChatWidget/MessageContent/CartCard',\n component: CartCardWrapper,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\n# \u8D2D\u7269\u8F66\u5361\u7247\u7EC4\u4EF6\n\n\u663E\u793A\u7528\u6237\u8D2D\u7269\u8F66\u5185\u5BB9\uFF0C\u5305\u62EC\u5546\u54C1\u5217\u8868\u3001\u4EF7\u683C\u6C47\u603B\u548C\u7ED3\u8D26\u6309\u94AE\u3002\n\n## \u529F\u80FD\u7279\u6027\n\n- \uD83D\uDCE6 **\u5546\u54C1\u5217\u8868**: \u5C55\u793A\u8D2D\u7269\u8F66\u4E2D\u7684\u6240\u6709\u5546\u54C1\n- \uD83D\uDCB0 **\u4EF7\u683C\u6C47\u603B**: \u663E\u793A\u5C0F\u8BA1\u3001\u6298\u6263\u548C\u603B\u8BA1\n- \uD83C\uDF9F\uFE0F **\u6298\u6263\u7801**: \u663E\u793A\u5DF2\u5E94\u7528\u7684\u6298\u6263\u7801\u53CA\u5176\u72B6\u6001\n- \uD83D\uDED2 **\u7ED3\u8D26\u6309\u94AE**: \u4E00\u952E\u8DF3\u8F6C\u5230 Shopify \u7ED3\u8D26\u9875\u9762\n- \uD83C\uDE33 **\u7A7A\u72B6\u6001**: \u4F18\u96C5\u7684\u7A7A\u8D2D\u7269\u8F66\u63D0\u793A\n\n## \u4F7F\u7528\u573A\u666F\n\n- \u7528\u6237\u6DFB\u52A0\u5546\u54C1\u5230\u8D2D\u7269\u8F66\u540E (add_to_cart)\n- \u7528\u6237\u67E5\u8BE2\u8D2D\u7269\u8F66\u5185\u5BB9 (get_cart)\n- \u7528\u6237\u4FEE\u6539\u8D2D\u7269\u8F66\u6570\u91CF (update_cart_item)\n- \u7528\u6237\u5E94\u7528\u6298\u6263\u7801 (update_discount_codes)\n `,\n },\n },\n },\n tags: ['autodocs'],\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof CartCardWrapper>\n\n/**\n * \u7A7A\u8D2D\u7269\u8F66\u72B6\u6001\n */\nexport const Empty: Story = {\n args: {\n content: {\n type: 'cart',\n data: {\n isEmpty: true,\n cartId: 'gid://shopify/Cart/empty',\n totalQuantity: 0,\n lines: [],\n cost: {\n totalAmount: {\n amount: '0.00',\n currencyCode: 'USD',\n },\n subtotalAmount: {\n amount: '0.00',\n currencyCode: 'USD',\n },\n },\n },\n },\n },\n}\n\n/**\n * \u5355\u4EF6\u5546\u54C1\n */\nexport const SingleItem: Story = {\n args: {\n content: {\n type: 'cart',\n data: {\n isEmpty: false,\n cartId: 'gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH',\n totalQuantity: 1,\n lines: [\n {\n id: 'gid://shopify/CartLine/12345',\n quantity: 1,\n cost: {\n totalAmount: {\n amount: '99.99',\n currencyCode: 'USD',\n },\n amountPerQuantity: {\n amount: '99.99',\n currencyCode: 'USD',\n },\n subtotalAmount: {\n amount: '99.99',\n currencyCode: 'USD',\n },\n },\n merchandise: {\n id: 'gid://shopify/ProductVariant/43234567890',\n title: 'Black',\n price: {\n amount: '99.99',\n currencyCode: 'USD',\n },\n image: {\n url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop',\n altText: 'Soundcore Space One',\n },\n product: {\n id: 'gid://shopify/Product/8179159826618',\n title: 'Soundcore Space One',\n handle: 'soundcore-space-one',\n },\n },\n },\n ],\n cost: {\n totalAmount: {\n amount: '99.99',\n currencyCode: 'USD',\n },\n subtotalAmount: {\n amount: '99.99',\n currencyCode: 'USD',\n },\n },\n checkoutUrl: 'https://checkout.shopify.com/example',\n },\n },\n },\n}\n\n/**\n * \u591A\u4EF6\u5546\u54C1\n */\nexport const MultipleItems: Story = {\n args: {\n content: {\n type: 'cart',\n data: {\n isEmpty: false,\n cartId: 'gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH',\n totalQuantity: 5,\n lines: [\n {\n id: 'gid://shopify/CartLine/12345',\n quantity: 2,\n cost: {\n totalAmount: {\n amount: '199.98',\n currencyCode: 'USD',\n },\n amountPerQuantity: {\n amount: '99.99',\n currencyCode: 'USD',\n },\n subtotalAmount: {\n amount: '199.98',\n currencyCode: 'USD',\n },\n },\n merchandise: {\n id: 'gid://shopify/ProductVariant/43234567890',\n title: 'Black',\n price: {\n amount: '99.99',\n currencyCode: 'USD',\n },\n image: {\n url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop',\n altText: 'Soundcore Space One',\n },\n product: {\n id: 'gid://shopify/Product/8179159826618',\n title: 'Soundcore Space One',\n handle: 'soundcore-space-one',\n },\n },\n },\n {\n id: 'gid://shopify/CartLine/12346',\n quantity: 1,\n cost: {\n totalAmount: {\n amount: '129.99',\n currencyCode: 'USD',\n },\n amountPerQuantity: {\n amount: '129.99',\n currencyCode: 'USD',\n },\n subtotalAmount: {\n amount: '129.99',\n currencyCode: 'USD',\n },\n },\n merchandise: {\n id: 'gid://shopify/ProductVariant/43234567891',\n title: 'White',\n price: {\n amount: '129.99',\n currencyCode: 'USD',\n },\n image: {\n url: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&h=400&fit=crop',\n altText: 'eufy Security Camera',\n },\n product: {\n id: 'gid://shopify/Product/8179159826619',\n title: 'eufy Security Camera',\n handle: 'eufy-security-camera',\n },\n },\n },\n {\n id: 'gid://shopify/CartLine/12347',\n quantity: 2,\n cost: {\n totalAmount: {\n amount: '79.98',\n currencyCode: 'USD',\n },\n amountPerQuantity: {\n amount: '39.99',\n currencyCode: 'USD',\n },\n subtotalAmount: {\n amount: '79.98',\n currencyCode: 'USD',\n },\n },\n merchandise: {\n id: 'gid://shopify/ProductVariant/43234567892',\n title: 'USB-C Cable',\n price: {\n amount: '39.99',\n currencyCode: 'USD',\n },\n image: {\n url: 'https://images.unsplash.com/photo-1583863788434-e58a36330cf0?w=400&h=400&fit=crop',\n altText: 'Anker USB-C Cable',\n },\n product: {\n id: 'gid://shopify/Product/8179159826620',\n title: 'Anker USB-C Cable 6ft',\n handle: 'anker-usb-c-cable',\n },\n },\n },\n ],\n cost: {\n totalAmount: {\n amount: '409.95',\n currencyCode: 'USD',\n },\n subtotalAmount: {\n amount: '409.95',\n currencyCode: 'USD',\n },\n },\n checkoutUrl: 'https://checkout.shopify.com/example',\n },\n },\n },\n}\n\n/**\n * \u6709\u6298\u6263\u7801\u7684\u8D2D\u7269\u8F66\n */\nexport const WithDiscount: Story = {\n args: {\n content: {\n type: 'cart',\n data: {\n isEmpty: false,\n cartId: 'gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH',\n totalQuantity: 3,\n lines: [\n {\n id: 'gid://shopify/CartLine/12345',\n quantity: 2,\n cost: {\n totalAmount: {\n amount: '199.98',\n currencyCode: 'USD',\n },\n amountPerQuantity: {\n amount: '99.99',\n currencyCode: 'USD',\n },\n subtotalAmount: {\n amount: '199.98',\n currencyCode: 'USD',\n },\n },\n merchandise: {\n id: 'gid://shopify/ProductVariant/43234567890',\n title: 'Black',\n price: {\n amount: '99.99',\n currencyCode: 'USD',\n },\n image: {\n url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop',\n altText: 'Soundcore Space One',\n },\n product: {\n id: 'gid://shopify/Product/8179159826618',\n title: 'Soundcore Space One',\n handle: 'soundcore-space-one',\n },\n },\n },\n {\n id: 'gid://shopify/CartLine/12346',\n quantity: 1,\n cost: {\n totalAmount: {\n amount: '129.99',\n currencyCode: 'USD',\n },\n amountPerQuantity: {\n amount: '129.99',\n currencyCode: 'USD',\n },\n subtotalAmount: {\n amount: '129.99',\n currencyCode: 'USD',\n },\n },\n merchandise: {\n id: 'gid://shopify/ProductVariant/43234567891',\n title: 'White',\n price: {\n amount: '129.99',\n currencyCode: 'USD',\n },\n image: {\n url: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&h=400&fit=crop',\n altText: 'eufy Security Camera',\n },\n product: {\n id: 'gid://shopify/Product/8179159826619',\n title: 'eufy Security Camera',\n handle: 'eufy-security-camera',\n },\n },\n },\n ],\n cost: {\n totalAmount: {\n amount: '296.97',\n currencyCode: 'USD',\n },\n subtotalAmount: {\n amount: '329.97',\n currencyCode: 'USD',\n },\n },\n discountCodes: [\n {\n code: 'SPRING20',\n applicable: true,\n },\n ],\n checkoutUrl: 'https://checkout.shopify.com/example',\n },\n },\n },\n}\n\n/**\n * \u591A\u4E2A\u6298\u6263\u7801\uFF08\u90E8\u5206\u5931\u6548\uFF09\n */\nexport const WithMultipleDiscounts: Story = {\n args: {\n content: {\n type: 'cart',\n data: {\n isEmpty: false,\n cartId: 'gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH',\n totalQuantity: 2,\n lines: [\n {\n id: 'gid://shopify/CartLine/12345',\n quantity: 2,\n cost: {\n totalAmount: {\n amount: '199.98',\n currencyCode: 'USD',\n },\n amountPerQuantity: {\n amount: '99.99',\n currencyCode: 'USD',\n },\n subtotalAmount: {\n amount: '199.98',\n currencyCode: 'USD',\n },\n },\n merchandise: {\n id: 'gid://shopify/ProductVariant/43234567890',\n title: 'Black',\n price: {\n amount: '99.99',\n currencyCode: 'USD',\n },\n image: {\n url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop',\n altText: 'Soundcore Space One',\n },\n product: {\n id: 'gid://shopify/Product/8179159826618',\n title: 'Soundcore Space One',\n handle: 'soundcore-space-one',\n },\n },\n },\n ],\n cost: {\n totalAmount: {\n amount: '179.98',\n currencyCode: 'USD',\n },\n subtotalAmount: {\n amount: '199.98',\n currencyCode: 'USD',\n },\n },\n discountCodes: [\n {\n code: 'WELCOME10',\n applicable: true,\n },\n {\n code: 'EXPIRED20',\n applicable: false,\n },\n ],\n checkoutUrl: 'https://checkout.shopify.com/example',\n },\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "CartCard", "CartCardWrapper", "content", "meta", "CartCard_stories_default", "Empty", "SingleItem", "MultipleItems", "WithDiscount", "WithMultipleDiscounts"]
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
import React from 'react'
|
|
8
8
|
import type { MessageRenderer, CartContent, CartLine, CartAmount } from '../../types'
|
|
9
|
-
import {
|
|
9
|
+
import { formatCurrency, DEFAULT_COMMON_TEXT } from '../../constants.js'
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* 格式化金额
|
|
@@ -15,11 +15,7 @@ import { CURRENCY_SYMBOLS, DEFAULT_COMMON_TEXT } from '../../constants.js'
|
|
|
15
15
|
*/
|
|
16
16
|
function formatAmount(amount: CartAmount): string {
|
|
17
17
|
const { amount: value, currencyCode } = amount
|
|
18
|
-
|
|
19
|
-
const symbol = CURRENCY_SYMBOLS[currencyCode] || currencyCode
|
|
20
|
-
const numValue = parseFloat(value)
|
|
21
|
-
|
|
22
|
-
return `${symbol}${numValue.toFixed(2)}`
|
|
18
|
+
return formatCurrency(value, currencyCode)
|
|
23
19
|
}
|
|
24
20
|
|
|
25
21
|
/**
|
|
@@ -6,16 +6,14 @@
|
|
|
6
6
|
|
|
7
7
|
import React from 'react'
|
|
8
8
|
import type { MessageRenderer, ProductCardContent, Product, CommonText } from '../../types'
|
|
9
|
-
import {
|
|
9
|
+
import { formatCurrency, DEFAULT_COMMON_TEXT } from '../../constants.js'
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* 格式化价格
|
|
13
13
|
*/
|
|
14
14
|
function formatPrice(price: Product['price']): string {
|
|
15
15
|
const { amount, currency } = price
|
|
16
|
-
|
|
17
|
-
const symbol = CURRENCY_SYMBOLS[currency] || currency
|
|
18
|
-
return `${symbol}${amount.toFixed(2)}`
|
|
16
|
+
return formatCurrency(amount, currency)
|
|
19
17
|
}
|
|
20
18
|
|
|
21
19
|
/**
|
|
@@ -47,8 +45,7 @@ function formatDiscountLabel(
|
|
|
47
45
|
}
|
|
48
46
|
|
|
49
47
|
if (discount.discount_type === 'fixed_amount') {
|
|
50
|
-
|
|
51
|
-
return `${symbol}${Math.round(value)} ${offText}`
|
|
48
|
+
return `${formatCurrency(Math.round(value), currency)} ${offText}`
|
|
52
49
|
}
|
|
53
50
|
|
|
54
51
|
return ''
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
import React, { useState } from 'react'
|
|
8
8
|
import type { Product, MessageRenderer, CommonText } from '../../types'
|
|
9
|
-
import { DEFAULT_COMMON_TEXT,
|
|
9
|
+
import { DEFAULT_COMMON_TEXT, formatCurrency } from '../../constants'
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* 对比维度数据结构
|
|
@@ -65,10 +65,10 @@ export interface ProductComparisonProps {
|
|
|
65
65
|
|
|
66
66
|
/**
|
|
67
67
|
* 格式化价格显示
|
|
68
|
+
* 根据货币类型自动决定符号位置(前置或后置)
|
|
68
69
|
*/
|
|
69
70
|
const formatPrice = (amount: number, currency: string = 'USD'): string => {
|
|
70
|
-
|
|
71
|
-
return `${symbol}${amount}`
|
|
71
|
+
return formatCurrency(amount, currency)
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
/**
|
|
@@ -298,7 +298,7 @@ export const ProductComparison: React.FC<ProductComparisonProps> = ({ data, onAd
|
|
|
298
298
|
|
|
299
299
|
{/* 价格展示(带划线价) */}
|
|
300
300
|
<div className="mb-4 flex flex-col items-center gap-1">
|
|
301
|
-
<div className="flex items-center gap-2">
|
|
301
|
+
<div className="flex items-center gap-2 justify-center flex-wrap">
|
|
302
302
|
{/* 当前价格(折扣价或原价) */}
|
|
303
303
|
<span className="text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]">
|
|
304
304
|
{formatPrice(currentPrice, priceInfo?.currency || product.price.currency)}
|
|
@@ -317,7 +317,7 @@ export const ProductComparison: React.FC<ProductComparisonProps> = ({ data, onAd
|
|
|
317
317
|
<button
|
|
318
318
|
type="button"
|
|
319
319
|
onClick={handleAddToCart}
|
|
320
|
-
className="livechat-btn-primary mb-3 w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white"
|
|
320
|
+
className="livechat-btn-primary mb-3 mt-auto w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white"
|
|
321
321
|
style={{ backgroundColor: '#1D1D1F' }}
|
|
322
322
|
>
|
|
323
323
|
{mergedText.addToCart}
|
|
@@ -6,16 +6,14 @@
|
|
|
6
6
|
|
|
7
7
|
import React, { useState } from 'react'
|
|
8
8
|
import type { MessageRenderer, ProductListContent, Product, CommonText } from '../../types'
|
|
9
|
-
import {
|
|
9
|
+
import { formatCurrency, DEFAULT_COMMON_TEXT } from '../../constants.js'
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* 格式化价格
|
|
13
13
|
*/
|
|
14
14
|
function formatPrice(price: Product['price']): string {
|
|
15
15
|
const { amount, currency } = price
|
|
16
|
-
|
|
17
|
-
const symbol = CURRENCY_SYMBOLS[currency] || currency
|
|
18
|
-
return `${symbol}${amount.toFixed(2)}`
|
|
16
|
+
return formatCurrency(amount, currency)
|
|
19
17
|
}
|
|
20
18
|
|
|
21
19
|
/**
|
|
@@ -47,8 +45,7 @@ function formatDiscountLabel(
|
|
|
47
45
|
}
|
|
48
46
|
|
|
49
47
|
if (discount.discount_type === 'fixed_amount') {
|
|
50
|
-
|
|
51
|
-
return `${symbol}${Math.round(value)} ${offText}`
|
|
48
|
+
return `${formatCurrency(Math.round(value), currency)} ${offText}`
|
|
52
49
|
}
|
|
53
50
|
|
|
54
51
|
return ''
|
|
@@ -23,6 +23,15 @@ export const CURRENCY_SYMBOLS: Record<string, string> = {
|
|
|
23
23
|
RON: "Lei"
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
const SUFFIX_CURRENCIES = new Set(["VND", "RON", "PLN"])
|
|
27
|
+
|
|
28
|
+
export function formatCurrency(amount: number | string, currency: string = 'USD'): string {
|
|
29
|
+
const symbol = CURRENCY_SYMBOLS[currency] || currency
|
|
30
|
+
const value = typeof amount === 'string' ? parseFloat(amount) : amount
|
|
31
|
+
const formatted = Number.isInteger(value) ? String(value) : value.toFixed(2)
|
|
32
|
+
return SUFFIX_CURRENCIES.has(currency) ? `${formatted} ${symbol}` : `${symbol}${formatted}`
|
|
33
|
+
}
|
|
34
|
+
|
|
26
35
|
/**
|
|
27
36
|
* 默认文案配置
|
|
28
37
|
*/
|
|
@@ -36,18 +36,25 @@ type Fetcher<TData, TBody> = (url: string, data: { arg: TBody }) => Promise<TDat
|
|
|
36
36
|
/**
|
|
37
37
|
* 统一处理 ALPC 接口返回的数据结构
|
|
38
38
|
* 兼容一层 data 和两层 data 的场景:
|
|
39
|
-
* - 两层 data: {data: {data: ..., code: 27004}}
|
|
40
|
-
* - 一层 data: {data: ..., code: 27004}
|
|
39
|
+
* - 两层 data: {data: {data: ..., code: 27004}} → 剥掉外层,返回内层 {data: ..., code: 27004}
|
|
40
|
+
* - 一层 data: {data: ..., code: 27004} → 直接返回,不做处理
|
|
41
|
+
*
|
|
42
|
+
* 判断两层的依据:responseData.data.data 存在(外层 data 内部还有一层 data)
|
|
41
43
|
*/
|
|
42
44
|
const normalizeResponseData = (responseData: any) => {
|
|
43
45
|
if (!responseData) return responseData
|
|
44
46
|
|
|
45
|
-
//
|
|
46
|
-
if (
|
|
47
|
+
// 两层结构:responseData.data 是对象,且其内部还有 data 字段
|
|
48
|
+
if (
|
|
49
|
+
responseData.data &&
|
|
50
|
+
typeof responseData.data === 'object' &&
|
|
51
|
+
!Array.isArray(responseData.data) &&
|
|
52
|
+
'data' in responseData.data
|
|
53
|
+
) {
|
|
47
54
|
return responseData.data
|
|
48
55
|
}
|
|
49
56
|
|
|
50
|
-
//
|
|
57
|
+
// 一层结构,直接返回
|
|
51
58
|
return responseData
|
|
52
59
|
}
|
|
53
60
|
|
|
@@ -38,10 +38,9 @@ export const useRedeemAndBuy = (
|
|
|
38
38
|
user_id: profile?.user_id,
|
|
39
39
|
rule_id: arg.redeemId,
|
|
40
40
|
})
|
|
41
|
-
|
|
42
|
-
if (res && data?.coupon_code) {
|
|
41
|
+
if (res && res.data?.coupon_code) {
|
|
43
42
|
buyNow({
|
|
44
|
-
discountCodes: [data.coupon_code],
|
|
43
|
+
discountCodes: [res.data.coupon_code],
|
|
45
44
|
lineItems: [
|
|
46
45
|
{
|
|
47
46
|
variant: arg.productVariant,
|
|
@@ -28,13 +28,20 @@ export const CreditsCash = ({ copy, id }: { copy: CreditsCashCopy; id?: string }
|
|
|
28
28
|
})
|
|
29
29
|
|
|
30
30
|
const list = useMemo(() => {
|
|
31
|
-
return
|
|
32
|
-
|
|
33
|
-
const
|
|
31
|
+
return (copy?.list || [])
|
|
32
|
+
.map(config => {
|
|
33
|
+
const handle = config?.products?.[0]?.handle
|
|
34
|
+
const sku = config?.products?.[0]?.sku
|
|
34
35
|
const alpcData = redeemableList.find(item => item.id?.toString() === config?.redeemId?.toString())
|
|
35
|
-
|
|
36
|
-
|
|
36
|
+
|
|
37
|
+
// 从 productByHandles 中找到对应 handle 的 product
|
|
38
|
+
const product = productByHandles?.find((p: Product) => p.handle === handle)
|
|
39
|
+
if (!product) return null
|
|
40
|
+
|
|
41
|
+
// 在 product 的 variants 中找到对应 sku 的 variant
|
|
42
|
+
const productVariant = product.variants?.find((variant: any) => variant.sku === sku) || product.variants?.[0]
|
|
37
43
|
if (!alpcData || !productVariant) return null
|
|
44
|
+
|
|
38
45
|
return {
|
|
39
46
|
product,
|
|
40
47
|
productVariant,
|
|
@@ -32,9 +32,8 @@ function RedeemCouponModal({
|
|
|
32
32
|
return
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
setCouponCode(data.coupon_code)
|
|
35
|
+
if (responseData.data?.success) {
|
|
36
|
+
setCouponCode(responseData.data.coupon_code)
|
|
38
37
|
fetchCreditInfo(profile?.user_id)
|
|
39
38
|
} else {
|
|
40
39
|
let errorMsg
|
|
@@ -40,7 +40,7 @@ function RedeemVirtualProductModal({
|
|
|
40
40
|
return
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
const data = responseData
|
|
43
|
+
const data = responseData.data
|
|
44
44
|
if (data?.id) {
|
|
45
45
|
setGiftCardId(data.id)
|
|
46
46
|
fetchCreditInfo(profile?.user_id)
|
|
@@ -121,8 +121,8 @@ function RedeemVirtualProductModal({
|
|
|
121
121
|
// GiftCard 类型使用 Product 接口,传递默认地址
|
|
122
122
|
const defaultAddress = {
|
|
123
123
|
email: profile?.email || '',
|
|
124
|
-
first_name: profile?.firstName || '',
|
|
125
|
-
last_name: profile?.lastName || '',
|
|
124
|
+
first_name: profile?.firstName || 'Anker',
|
|
125
|
+
last_name: profile?.lastName || 'Direct',
|
|
126
126
|
address1: 'Default Address',
|
|
127
127
|
city: 'Default City',
|
|
128
128
|
province: 'Default Province',
|