@anker-in/campaign-ui 0.5.4-beta.1 → 0.5.4-beta.3
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/creditsRedeemList/CreditsRedeemList.js +1 -1
- package/dist/cjs/components/credits/creditsRedeemList/CreditsRedeemList.js.map +3 -3
- package/dist/cjs/components/credits/modal/RewardsModal.js +1 -1
- package/dist/cjs/components/credits/modal/RewardsModal.js.map +2 -2
- 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/RewardsModal.js +1 -1
- package/dist/esm/components/credits/modal/RewardsModal.js.map +2 -2
- package/package.json +1 -1
- package/src/components/credits/creditsRedeemList/CreditsRedeemList.tsx +22 -10
- package/src/components/credits/modal/RewardsModal.tsx +8 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var se=Object.create;var y=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,ie=Object.prototype.hasOwnProperty;var le=(e,s)=>{for(var i in s)y(e,i,{get:s[i],enumerable:!0})},B=(e,s,i,v)=>{if(s&&typeof s=="object"||typeof s=="function")for(let u of oe(s))!ie.call(e,u)&&u!==i&&y(e,u,{get:()=>s[u],enumerable:!(v=ne(s,u))||v.enumerable});return e};var f=(e,s,i)=>(i=e!=null?se(re(e)):{},B(s||!e||!e.__esModule?y(i,"default",{value:e,enumerable:!0}):i,e)),de=e=>B(y({},"__esModule",{value:!0}),e);var pe={};le(pe,{CreditsRedeemList:()=>me});module.exports=de(pe);var a=require("react/jsx-runtime"),r=require("@anker-in/headless-ui"),T=f(require("classnames")),o=require("react"),H=f(require("./RedeemCouponModal")),$=f(require("./RedeemProductModal")),z=f(require("./RedeemVirtualProductModal")),U=require("../context/provider"),V=f(require("../context/hooks/useRedeemableList")),n=require("../context/const"),m=require("@anker-in/lib"),j=require("./RedeemableItem"),q=require("../../../constants"),J=f(require("../modal/RulesModal")),K=require("../../../components/registration"),Q=require("../context/utils"),W=f(require("../context/hooks/useMyRewards"));const me=({copy:e,id:s})=>{const{profile:i,openSignUpPopup:v,gtm:{pageGroup:u},pageCommon:h,creditInfo:X}=(0,U.useCreditsContext)(),{authCodeActivate:N}=(0,K.useRegistration)(),{brand:M,locale:Y}=(0,m.useHeadlessContext)(),I=q.ROUNDED_BRANDS.includes(M),R=Object.keys(i||{}).length>0,[L,A]=(0,o.useState)(e.list?.[0]?.label||"");(0,o.useEffect)(()=>{const t=(e.list||[]).map(c=>c.label);t.length&&!t.includes(L)&&A(t[0])},[e.list,L]);const[l,x]=(0,o.useState)(void 0),[_,P]=(0,o.useState)(),{listLoading:Z,redeemableList:G,getRedeemableList:D}=(0,V.default)(),{myRewards:w}=(0,W.default)({page:1,pageSize:100,consumeType:n.AlpcConsumeType.ExternalProduct}),b=(0,o.useMemo)(()=>({...h?.redeemModal||{},...e.redeemModal||{}}),[e.redeemModal,h?.redeemModal]),C=(0,o.useMemo)(()=>G.map(t=>({id:t.id.toString(),title:t.name,consumeCredits:t.consume_credits,remainingInventory:t.remaining_inventory,isLimited:!!t.is_limited,consumeType:t.consume_type,handle:t.sku_handle,sku:t.goods_sku,image:t.goods_url})),[G]),ee=C.map(t=>t.handle),{data:F}=(0,m.useProductsByHandles)({handles:ee}),te=(0,o.useMemo)(()=>{const t=new Map;return(e.list||[]).forEach(c=>{const E=(c.list||[]).filter(p=>C.some(d=>String(d.id)===String(p.id))).map(p=>{const d=C.find(g=>String(g.id)===String(p.id)),S=F?.find(g=>g.handle===d?.handle),O=S?.variants.find(g=>g.sku===d?.sku);if(d?.isLimited&&(!d?.remainingInventory||d.remainingInventory<=0)||d?.consumeType===n.AlpcConsumeType.Product&&(!S||!O))return null;const ae=p.type===n.ConsumeType.GoGift&&R&&w.some(g=>g.rule_id===Number(p.id));return{alpc:d,config:p,product:S,variant:O,hasRedeemed:ae}}).filter(p=>p!==null);t.set(c.label,E)}),t},[e.list,C,F,R,w]),k=(0,o.useCallback)(t=>{t===n.AlpcErrorCode.CodeLpcRuleInventoryNotEnough&&D()},[D]);return(0,a.jsxs)(r.Container,{id:s,className:(0,T.default)("relative bg-[#F5F5F7]"),children:[(0,a.jsx)(r.Heading,{as:"h2",size:"4",html:e.title}),R&&e.availableCredits&&(0,a.jsx)("p",{className:"mt-[12px] text-[20px] l-xxl:text-[18px] l:text-[16px] font-bold text-[#4A4C56]",children:e.availableCredits.includes("$credits")?(0,a.jsxs)(a.Fragment,{children:[e.availableCredits.split("$credits")[0],(0,a.jsx)("span",{className:(0,m.classNames)("text-brand-color-0",M==="ankersolix"&&"bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent"),children:(0,Q.numberFormat)(X?.available_credit||0,Y).toString()}),e.availableCredits.split("$credits")[1]||""]}):e.availableCredits}),(0,a.jsxs)(r.Tabs,{shape:I?"rounded":"square",align:"left",value:L,onValueChange:t=>{A(t),(0,m.gaTrack)({event:"ga4Event",event_name:"lp_navigation",event_parameters:{navigation:t,page_group:u}})},children:[(0,a.jsx)("div",{className:(0,T.default)("py-[24px] md:justify-center"),children:(0,a.jsx)(r.TabsList,{children:(e.list||[]).map(t=>(0,a.jsx)(r.TabsTrigger,{value:t.label,children:t.label},t.label))})}),(e.list||[]).map(t=>(0,a.jsx)(r.TabsContent,{value:t.label,children:!!C?.length&&!Z&&(0,a.jsx)("div",{className:(0,T.default)("relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3"),children:(te.get(t.label)||[])?.map(c=>(0,a.jsx)(j.RedeemableItem,{copy:e,item:c,onRedeem:E=>{R?!i?.activated&&!N.isActivateSuccess?(N.setAutoSendEmail(!0),N.open()):x(E):v()},onRulesOpen:P},c?.alpc?.id))})},t.label))]}),(l?.config?.type===n.ConsumeType.Coupon||l?.config?.type===n.ConsumeType.ShippingCoupon)&&b?.coupon&&l&&(0,a.jsx)(H.default,{item:l,copy:b,onError:k,onClose:()=>{x(void 0)}}),l?.config?.type===n.ConsumeType.Product&&b?.product&&l&&(0,a.jsx)($.default,{item:l,copy:b,onError:k,onClose:()=>{x(void 0)}}),(l?.config?.type===n.ConsumeType.GiftCard||l?.config?.type===n.ConsumeType.GoGift)&&b?.virtualProduct&&l&&(0,a.jsx)(z.default,{item:l,copy:b,onError:k,onClose:()=>{x(void 0)}}),_&&(0,a.jsx)(J.default,{overlayClassName:"md:px-[16px] md:items-center",className:(0,m.classNames)("md:h-fit md:rounded-b-[16px]",!I&&"md:rounded-none"),isOpen:_.length>0,onClose:()=>P([]),titleClassName:"border-b-transparent h-[56px]",rules:_,scrollClassName:"md:mt-[8px] md:mb-[24px] md:pt-0",title:h?.ruleLabel,ruleClassName:"text-[#1d1d1f] font-bold"})]})};
|
|
2
2
|
//# sourceMappingURL=CreditsRedeemList.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/creditsRedeemList/CreditsRedeemList.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Container, Heading, Tabs, TabsContent, TabsList, TabsTrigger } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { useCallback, useMemo, useState } from 'react'\n\nimport RedeemCouponModal from './RedeemCouponModal'\nimport RedeemProductModal from './RedeemProductModal'\nimport RedeemVirtualProductModal from './RedeemVirtualProductModal'\nimport { useCreditsContext } from '../context/provider'\nimport useRedeemableList from '../context/hooks/useRedeemableList'\nimport { AlpcConsumeType, AlpcErrorCode, ConsumeType } from '../context/const'\nimport { useHeadlessContext, useProductsByHandles, gaTrack, classNames as cn } from '@anker-in/lib'\nimport type { RedeemableItem as RedeemableItemType } from '../type'\nimport { RedeemableItem } from './RedeemableItem'\nimport { ROUNDED_BRANDS } from '../../../constants'\nimport RulesModal from '../modal/RulesModal'\nimport { CreditsRedeemListCopy } from './type'\nimport { useRegistration } from '../../../components/registration'\nimport { numberFormat } from '../context/utils'\nimport useMyRewards from '../context/hooks/useMyRewards'\n\nexport const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; id?: string }) => {\n const {\n profile,\n openSignUpPopup,\n gtm: { pageGroup },\n pageCommon,\n creditInfo,\n } = useCreditsContext()\n const { authCodeActivate } = useRegistration()\n const { brand, locale } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const isLogin = Object.keys(profile || {}).length > 0\n\n const [popRedeemData, setPopRedeemData] = useState<RedeemableItemType | undefined>(undefined)\n\n const [rules, setRules] = useState<string | string[]>()\n\n const { listLoading, redeemableList, getRedeemableList } = useRedeemableList()\n\n // \u83B7\u53D6\u7528\u6237\u7684 ExternalProduct \u5151\u6362\u8BB0\u5F55\n const { myRewards } = useMyRewards({\n page: 1,\n pageSize: 100,\n consumeType: AlpcConsumeType.ExternalProduct,\n })\n\n // \u5408\u5E76 redeemModal \u6587\u6848\uFF0C\u4F18\u5148\u4F7F\u7528 copy.redeemModal\uFF0Cfallback \u5230 pageCommon.redeemModal\n const redeemModalCopy = useMemo(() => {\n return {\n ...(pageCommon?.redeemModal || {}),\n ...(copy.redeemModal || {}),\n }\n }, [copy.redeemModal, pageCommon?.redeemModal])\n\n const alpcList = useMemo(() => {\n return redeemableList.map(item => {\n return {\n id: item.id.toString(),\n title: item.name,\n consumeCredits: item.consume_credits,\n remainingInventory: item.remaining_inventory,\n isLimited: !!item.is_limited,\n consumeType: item.consume_type,\n handle: item.sku_handle,\n sku: item.goods_sku,\n image: item.goods_url,\n }\n })\n }, [redeemableList])\n\n const handles = alpcList.map(item => item.handle)\n const { data: products } = useProductsByHandles({ handles })\n\n // \u6309 tab label \u5206\u7EC4\u9884\u8BA1\u7B97\u5217\u8868\uFF0C\u914D\u5408 TabsContent \u58F0\u660E\u5F0F\u6E32\u67D3\uFF0C\u907F\u514D\u624B\u52A8 activeTab \u5B57\u7B26\u4E32\u6BD4\u8F83\n const listByTab = useMemo(() => {\n const map = new Map<string, RedeemableItemType[]>()\n ;(copy.list || []).forEach(categoryItem => {\n const items = (categoryItem.list || [])\n .filter(item => alpcList.some(alpcItem => String(alpcItem.id) === String(item.id)))\n .map(item => {\n const alpcItem = alpcList.find(alpcItem => String(alpcItem.id) === String(item.id))\n const product = products?.find(product => product.handle === alpcItem?.handle)\n const variant = product?.variants.find(variant => variant.sku === alpcItem?.sku)\n // \u8FC7\u6EE4\u6389\u5E93\u5B58\u4E0D\u8DB3\u7684\u5546\u54C1\n if (alpcItem?.isLimited && (!alpcItem?.remainingInventory || alpcItem.remainingInventory <= 0)) return null\n if (alpcItem?.consumeType === AlpcConsumeType.Product && (!product || !variant)) return null\n\n // \u68C0\u67E5 GoGift \u662F\u5426\u5DF2\u7ECF\u5151\u6362\u8FC7\uFF08\u53EA\u6709 GoGift \u9650\u5236\u5151\u6362\u4E00\u6B21\uFF09\n const hasRedeemed = item.type === ConsumeType.GoGift &&\n isLogin &&\n myRewards.some(reward => reward.rule_id === Number(item.id))\n\n return {\n alpc: alpcItem,\n config: item,\n product,\n variant,\n hasRedeemed,\n }\n })\n .filter(item => item !== null) as unknown as RedeemableItemType[]\n map.set(categoryItem.label, items)\n })\n return map\n }, [copy.list, alpcList, products, isLogin, myRewards])\n\n const handleRedeemError = useCallback(\n (errorCode: AlpcErrorCode) => {\n if (errorCode === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {\n getRedeemableList()\n }\n },\n [getRedeemableList]\n )\n\n return (\n <Container id={id} className={classNames('relative bg-[#F5F5F7]')}>\n <Heading as=\"h2\" size=\"4\" html={copy.title} />\n\n {/* \u53EF\u7528\u79EF\u5206\u5C55\u793A */}\n {isLogin && copy.availableCredits && (\n <p className=\"mt-[12px] text-[20px] l-xxl:text-[18px] l:text-[16px] font-bold text-[#4A4C56]\">\n {copy.availableCredits.includes('$credits') ? (\n <>\n {copy.availableCredits.split('$credits')[0]}\n <span\n className={cn(\n 'text-brand-color-0',\n brand === 'ankersolix' &&\n 'bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent'\n )}\n >\n {numberFormat(creditInfo?.available_credit || 0, locale).toString()}\n </span>\n {copy.availableCredits.split('$credits')[1] || ''}\n </>\n ) : (\n copy.availableCredits\n )}\n </p>\n )}\n\n <Tabs\n shape={rounded ? 'rounded' : 'square'}\n align=\"left\"\n className={classNames('py-[24px] md:justify-center')}\n defaultValue={copy.list?.[0]?.label || ''}\n onValueChange={value => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_navigation',\n event_parameters: {\n navigation: value,\n page_group: pageGroup,\n },\n })\n }}\n >\n <TabsList>\n {(copy.list || []).map(item => (\n <TabsTrigger key={item.label} value={item.label}>\n {item.label}\n </TabsTrigger>\n ))}\n </TabsList>\n {(copy.list || []).map(categoryItem => (\n <TabsContent key={categoryItem.label} value={categoryItem.label}>\n {/* PC\u7AEF */}\n {!!alpcList?.length && !listLoading && (\n <div\n className={classNames(\n 'relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3'\n )}\n >\n {(listByTab.get(categoryItem.label) || [])?.map(item => (\n <RedeemableItem\n key={item?.alpc?.id}\n copy={copy}\n item={item}\n onRedeem={(item: RedeemableItemType) => {\n if (!isLogin) {\n openSignUpPopup()\n } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n authCodeActivate.setAutoSendEmail(true)\n authCodeActivate.open()\n } else {\n setPopRedeemData(item)\n }\n }}\n onRulesOpen={setRules}\n />\n ))}\n </div>\n )}\n </TabsContent>\n ))}\n </Tabs>\n\n {(popRedeemData?.config?.type === ConsumeType.Coupon ||\n popRedeemData?.config?.type === ConsumeType.ShippingCoupon) &&\n redeemModalCopy?.coupon &&\n popRedeemData && (\n <RedeemCouponModal\n item={popRedeemData}\n copy={redeemModalCopy}\n onError={handleRedeemError}\n onClose={() => {\n setPopRedeemData(undefined)\n }}\n />\n )}\n {popRedeemData?.config?.type === ConsumeType.Product && redeemModalCopy?.product && popRedeemData && (\n <RedeemProductModal\n item={popRedeemData}\n copy={redeemModalCopy}\n onError={handleRedeemError}\n onClose={() => {\n setPopRedeemData(undefined)\n }}\n />\n )}\n {(popRedeemData?.config?.type === ConsumeType.GiftCard || popRedeemData?.config?.type === ConsumeType.GoGift) &&\n redeemModalCopy?.virtualProduct &&\n popRedeemData && (\n <RedeemVirtualProductModal\n item={popRedeemData}\n copy={redeemModalCopy}\n onError={handleRedeemError}\n onClose={() => {\n setPopRedeemData(undefined)\n }}\n />\n )}\n {rules && (\n <RulesModal\n overlayClassName=\"md:px-[16px] md:items-center\"\n className={cn('md:h-fit md:rounded-b-[16px]', !rounded && 'md:rounded-none')}\n isOpen={rules.length > 0}\n onClose={() => setRules([])}\n titleClassName=\"border-b-transparent h-[56px]\"\n rules={rules}\n scrollClassName=\"md:mt-[8px] md:mb-[24px] md:pt-0\"\n title={pageCommon?.ruleLabel}\n ruleClassName=\"text-[#1d1d1f] font-bold\"\n />\n )}\n </Container>\n )\n}\n"],
|
|
5
|
-
"mappings": "skBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,uBAAAE,KAAA,eAAAC,GAAAH,
|
|
6
|
-
"names": ["CreditsRedeemList_exports", "__export", "CreditsRedeemList", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_classnames", "import_react", "import_RedeemCouponModal", "import_RedeemProductModal", "import_RedeemVirtualProductModal", "import_provider", "import_useRedeemableList", "import_const", "import_lib", "import_RedeemableItem", "import_constants", "import_RulesModal", "import_registration", "import_utils", "import_useMyRewards", "copy", "id", "profile", "openSignUpPopup", "pageGroup", "pageCommon", "creditInfo", "authCodeActivate", "brand", "locale", "rounded", "isLogin", "popRedeemData", "setPopRedeemData", "rules", "setRules", "listLoading", "redeemableList", "getRedeemableList", "useRedeemableList", "myRewards", "useMyRewards", "redeemModalCopy", "alpcList", "
|
|
4
|
+
"sourcesContent": ["import { Container, Heading, Tabs, TabsContent, TabsList, TabsTrigger } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport RedeemCouponModal from './RedeemCouponModal'\nimport RedeemProductModal from './RedeemProductModal'\nimport RedeemVirtualProductModal from './RedeemVirtualProductModal'\nimport { useCreditsContext } from '../context/provider'\nimport useRedeemableList from '../context/hooks/useRedeemableList'\nimport { AlpcConsumeType, AlpcErrorCode, ConsumeType } from '../context/const'\nimport { useHeadlessContext, useProductsByHandles, gaTrack, classNames as cn } from '@anker-in/lib'\nimport type { RedeemableItem as RedeemableItemType } from '../type'\nimport { RedeemableItem } from './RedeemableItem'\nimport { ROUNDED_BRANDS } from '../../../constants'\nimport RulesModal from '../modal/RulesModal'\nimport { CreditsRedeemListCopy } from './type'\nimport { useRegistration } from '../../../components/registration'\nimport { numberFormat } from '../context/utils'\nimport useMyRewards from '../context/hooks/useMyRewards'\n\nexport const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; id?: string }) => {\n const {\n profile,\n openSignUpPopup,\n gtm: { pageGroup },\n pageCommon,\n creditInfo,\n } = useCreditsContext()\n const { authCodeActivate } = useRegistration()\n const { brand, locale } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const isLogin = Object.keys(profile || {}).length > 0\n\n // copy.list \u53EF\u80FD\u662F\u5F02\u6B65\u52A0\u8F7D\u7684\uFF0C\u9996\u6B21\u6E32\u67D3\u65F6\u53EF\u80FD\u4E3A\u7A7A\uFF0C\u9700\u8981\u5728\u6570\u636E\u5C31\u7EEA\u540E\u540C\u6B65 activeTab\uFF0C\n // \u5426\u5219 Radix Tabs \u975E\u53D7\u63A7\u6A21\u5F0F\u4E0B\u62FF\u5230\u7684 defaultValue \u4F1A\u4E00\u76F4\u662F\u521D\u59CB\u7684\u7A7A\u503C\uFF0C\u5BFC\u81F4\u521D\u59CB\u4E0D\u5C55\u793A\u4EFB\u4F55 TabsContent\u3002\n const [activeTab, setActiveTab] = useState<string>(copy.list?.[0]?.label || '')\n useEffect(() => {\n const labels = (copy.list || []).map(item => item.label)\n if (labels.length && !labels.includes(activeTab)) {\n setActiveTab(labels[0])\n }\n }, [copy.list, activeTab])\n\n const [popRedeemData, setPopRedeemData] = useState<RedeemableItemType | undefined>(undefined)\n\n const [rules, setRules] = useState<string | string[]>()\n\n const { listLoading, redeemableList, getRedeemableList } = useRedeemableList()\n\n // \u83B7\u53D6\u7528\u6237\u7684 ExternalProduct \u5151\u6362\u8BB0\u5F55\n const { myRewards } = useMyRewards({\n page: 1,\n pageSize: 100,\n consumeType: AlpcConsumeType.ExternalProduct,\n })\n\n // \u5408\u5E76 redeemModal \u6587\u6848\uFF0C\u4F18\u5148\u4F7F\u7528 copy.redeemModal\uFF0Cfallback \u5230 pageCommon.redeemModal\n const redeemModalCopy = useMemo(() => {\n return {\n ...(pageCommon?.redeemModal || {}),\n ...(copy.redeemModal || {}),\n }\n }, [copy.redeemModal, pageCommon?.redeemModal])\n\n const alpcList = useMemo(() => {\n return redeemableList.map(item => {\n return {\n id: item.id.toString(),\n title: item.name,\n consumeCredits: item.consume_credits,\n remainingInventory: item.remaining_inventory,\n isLimited: !!item.is_limited,\n consumeType: item.consume_type,\n handle: item.sku_handle,\n sku: item.goods_sku,\n image: item.goods_url,\n }\n })\n }, [redeemableList])\n\n const handles = alpcList.map(item => item.handle)\n const { data: products } = useProductsByHandles({ handles })\n\n // \u6309 tab label \u5206\u7EC4\u9884\u8BA1\u7B97\u5217\u8868\uFF0C\u914D\u5408 TabsContent \u58F0\u660E\u5F0F\u6E32\u67D3\uFF0C\u907F\u514D\u624B\u52A8 activeTab \u5B57\u7B26\u4E32\u6BD4\u8F83\n const listByTab = useMemo(() => {\n const map = new Map<string, RedeemableItemType[]>()\n ;(copy.list || []).forEach(categoryItem => {\n const items = (categoryItem.list || [])\n .filter(item => alpcList.some(alpcItem => String(alpcItem.id) === String(item.id)))\n .map(item => {\n const alpcItem = alpcList.find(alpcItem => String(alpcItem.id) === String(item.id))\n const product = products?.find(product => product.handle === alpcItem?.handle)\n const variant = product?.variants.find(variant => variant.sku === alpcItem?.sku)\n // \u8FC7\u6EE4\u6389\u5E93\u5B58\u4E0D\u8DB3\u7684\u5546\u54C1\n if (alpcItem?.isLimited && (!alpcItem?.remainingInventory || alpcItem.remainingInventory <= 0)) return null\n if (alpcItem?.consumeType === AlpcConsumeType.Product && (!product || !variant)) return null\n\n // \u68C0\u67E5 GoGift \u662F\u5426\u5DF2\u7ECF\u5151\u6362\u8FC7\uFF08\u53EA\u6709 GoGift \u9650\u5236\u5151\u6362\u4E00\u6B21\uFF09\n const hasRedeemed = item.type === ConsumeType.GoGift &&\n isLogin &&\n myRewards.some(reward => reward.rule_id === Number(item.id))\n\n return {\n alpc: alpcItem,\n config: item,\n product,\n variant,\n hasRedeemed,\n }\n })\n .filter(item => item !== null) as unknown as RedeemableItemType[]\n map.set(categoryItem.label, items)\n })\n return map\n }, [copy.list, alpcList, products, isLogin, myRewards])\n\n const handleRedeemError = useCallback(\n (errorCode: AlpcErrorCode) => {\n if (errorCode === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {\n getRedeemableList()\n }\n },\n [getRedeemableList]\n )\n\n return (\n <Container id={id} className={classNames('relative bg-[#F5F5F7]')}>\n <Heading as=\"h2\" size=\"4\" html={copy.title} />\n\n {/* \u53EF\u7528\u79EF\u5206\u5C55\u793A */}\n {isLogin && copy.availableCredits && (\n <p className=\"mt-[12px] text-[20px] l-xxl:text-[18px] l:text-[16px] font-bold text-[#4A4C56]\">\n {copy.availableCredits.includes('$credits') ? (\n <>\n {copy.availableCredits.split('$credits')[0]}\n <span\n className={cn(\n 'text-brand-color-0',\n brand === 'ankersolix' &&\n 'bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent'\n )}\n >\n {numberFormat(creditInfo?.available_credit || 0, locale).toString()}\n </span>\n {copy.availableCredits.split('$credits')[1] || ''}\n </>\n ) : (\n copy.availableCredits\n )}\n </p>\n )}\n\n <Tabs\n shape={rounded ? 'rounded' : 'square'}\n align=\"left\"\n value={activeTab}\n onValueChange={value => {\n setActiveTab(value)\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_navigation',\n event_parameters: {\n navigation: value,\n page_group: pageGroup,\n },\n })\n }}\n >\n <div className={classNames('py-[24px] md:justify-center')}>\n <TabsList>\n {(copy.list || []).map(item => (\n <TabsTrigger key={item.label} value={item.label}>\n {item.label}\n </TabsTrigger>\n ))}\n </TabsList>\n </div>\n {(copy.list || []).map(categoryItem => (\n <TabsContent key={categoryItem.label} value={categoryItem.label}>\n {/* PC\u7AEF */}\n {!!alpcList?.length && !listLoading && (\n <div\n className={classNames(\n 'relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3'\n )}\n >\n {(listByTab.get(categoryItem.label) || [])?.map(item => (\n <RedeemableItem\n key={item?.alpc?.id}\n copy={copy}\n item={item}\n onRedeem={(item: RedeemableItemType) => {\n if (!isLogin) {\n openSignUpPopup()\n } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n authCodeActivate.setAutoSendEmail(true)\n authCodeActivate.open()\n } else {\n setPopRedeemData(item)\n }\n }}\n onRulesOpen={setRules}\n />\n ))}\n </div>\n )}\n </TabsContent>\n ))}\n </Tabs>\n\n {(popRedeemData?.config?.type === ConsumeType.Coupon ||\n popRedeemData?.config?.type === ConsumeType.ShippingCoupon) &&\n redeemModalCopy?.coupon &&\n popRedeemData && (\n <RedeemCouponModal\n item={popRedeemData}\n copy={redeemModalCopy}\n onError={handleRedeemError}\n onClose={() => {\n setPopRedeemData(undefined)\n }}\n />\n )}\n {popRedeemData?.config?.type === ConsumeType.Product && redeemModalCopy?.product && popRedeemData && (\n <RedeemProductModal\n item={popRedeemData}\n copy={redeemModalCopy}\n onError={handleRedeemError}\n onClose={() => {\n setPopRedeemData(undefined)\n }}\n />\n )}\n {(popRedeemData?.config?.type === ConsumeType.GiftCard || popRedeemData?.config?.type === ConsumeType.GoGift) &&\n redeemModalCopy?.virtualProduct &&\n popRedeemData && (\n <RedeemVirtualProductModal\n item={popRedeemData}\n copy={redeemModalCopy}\n onError={handleRedeemError}\n onClose={() => {\n setPopRedeemData(undefined)\n }}\n />\n )}\n {rules && (\n <RulesModal\n overlayClassName=\"md:px-[16px] md:items-center\"\n className={cn('md:h-fit md:rounded-b-[16px]', !rounded && 'md:rounded-none')}\n isOpen={rules.length > 0}\n onClose={() => setRules([])}\n titleClassName=\"border-b-transparent h-[56px]\"\n rules={rules}\n scrollClassName=\"md:mt-[8px] md:mb-[24px] md:pt-0\"\n title={pageCommon?.ruleLabel}\n ruleClassName=\"text-[#1d1d1f] font-bold\"\n />\n )}\n </Container>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["CreditsRedeemList_exports", "__export", "CreditsRedeemList", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_classnames", "import_react", "import_RedeemCouponModal", "import_RedeemProductModal", "import_RedeemVirtualProductModal", "import_provider", "import_useRedeemableList", "import_const", "import_lib", "import_RedeemableItem", "import_constants", "import_RulesModal", "import_registration", "import_utils", "import_useMyRewards", "copy", "id", "profile", "openSignUpPopup", "pageGroup", "pageCommon", "creditInfo", "authCodeActivate", "brand", "locale", "rounded", "isLogin", "activeTab", "setActiveTab", "labels", "item", "popRedeemData", "setPopRedeemData", "rules", "setRules", "listLoading", "redeemableList", "getRedeemableList", "useRedeemableList", "myRewards", "useMyRewards", "redeemModalCopy", "alpcList", "handles", "products", "listByTab", "map", "categoryItem", "items", "alpcItem", "product", "variant", "hasRedeemed", "reward", "handleRedeemError", "errorCode", "classNames", "cn", "value", "RedeemCouponModal", "RedeemProductModal", "RedeemVirtualProductModal", "RulesModal"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var O=Object.create;var
|
|
1
|
+
"use strict";var O=Object.create;var f=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var K=(t,r)=>{for(var o in r)f(t,o,{get:r[o],enumerable:!0})},N=(t,r,o,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of q(r))!B.call(t,a)&&a!==o&&f(t,a,{get:()=>r[a],enumerable:!(u=$(r,a))||u.enumerable});return t};var d=(t,r,o)=>(o=t!=null?O(z(t)):{},N(r||!t||!t.__esModule?f(o,"default",{value:t,enumerable:!0}):o,t)),V=t=>N(f({},"__esModule",{value:!0}),t);var W={};K(W,{default:()=>Q});module.exports=V(W);var l=require("react/jsx-runtime"),p=require("@anker-in/headless-ui"),g=d(require("classnames")),P=d(require("copy-to-clipboard")),R=d(require("dayjs")),n=require("react"),e=require("../context/const"),F=require("./ModalContainer"),A=d(require("./Tip")),w=d(require("./LoadingDots")),D=d(require("../context/hooks/useMyRewards")),M=require("@anker-in/lib"),h=require("../../../constants");function J({data:t,...r}){const[o,u]=(0,n.useState)(e.AlpcConsumeType.Coupon),{brand:a}=(0,M.useHeadlessContext)(),m=h.ROUNDED_BRANDS.includes(a),[_,v]=(0,n.useState)(1),[j,x]=(0,n.useState)(-1),c=(0,n.useMemo)(()=>[{title:t.couponTab,type:e.AlpcConsumeType.Coupon},{title:t.productTab,type:e.AlpcConsumeType.Product},{title:t.externalProductTab,type:e.AlpcConsumeType.ExternalProduct}].filter(i=>!!i.title),[t.couponTab,t.productTab,t.externalProductTab]);(0,n.useEffect)(()=>{c.length&&!c.some(i=>i.type===o)&&u(c[0].type)},[c,o]),(0,n.useEffect)(()=>{v(1)},[o]);const{myRewards:C=[],canNext:y,isLoading:G}=(0,D.default)({page:_,pageSize:1e3,consumeType:o}),S=(0,n.useCallback)(i=>i.fulfillment_status&&i.fulfillment_status!=="null"?i.fulfillment_status==="fulfilled"?e.RewardType.Fulfilled:e.RewardType.Unfulfilled:i.approval_status===e.ApprovalStatus.Success||i.approval_status===e.ApprovalStatus.DoubleConfirm?e.RewardType.ApproveSuccess:i.approval_status===e.ApprovalStatus.Failed?e.RewardType.Failed:e.RewardType.Pending,[]),T=(0,n.useCallback)(i=>{const s={0:e.RewardType.GogiftPending,1:e.RewardType.GogiftApproved,2:e.RewardType.GogiftSecondConfirm,3:e.RewardType.GogiftRejected,4:e.RewardType.GogiftCallbackPending,5:e.RewardType.GogiftCallbackSuccess,6:e.RewardType.GogiftCallbackTimeout};return i!==void 0?s[i]??e.RewardType.GogiftPending:e.RewardType.GogiftPending},[]),k=(0,n.useMemo)(()=>C.map(i=>{const s={title:i.goods_title,value:i.consume_credits,date:new Date(i.create_time*1e3)};return o===e.AlpcConsumeType.Coupon?{...s,type:e.RewardType.Received,couponCode:i.coupon_code,orderNumber:"",link:""}:o===e.AlpcConsumeType.Product?{...s,type:S(i),orderNumber:i.order_number,couponCode:"",link:""}:o===e.AlpcConsumeType.ExternalProduct?{...s,type:T(i.approval_status),orderNumber:"",couponCode:"",link:i.link||""}:{...s,type:e.RewardType.Received,couponCode:"",orderNumber:"",link:""}}),[o,C,S,T]),E=(0,n.useMemo)(()=>({[e.RewardType.Received]:t.receivedLabel,[e.RewardType.Pending]:t.pendingLabel,[e.RewardType.ApproveFail]:t.failedLabel,[e.RewardType.ApproveSuccess]:t.approveSuccessLabel,[e.RewardType.Unfulfilled]:t.unfulfilledLabel,[e.RewardType.Fulfilled]:t.fulfilledLabel,[e.RewardType.Failed]:t.failedLabel,[e.RewardType.GogiftPending]:t.goGiftStatus?.pending?.label||t.pendingLabel,[e.RewardType.GogiftApproved]:t.goGiftStatus?.approved?.label||t.approveSuccessLabel,[e.RewardType.GogiftSecondConfirm]:t.goGiftStatus?.secondConfirm?.label||t.approveSuccessLabel,[e.RewardType.GogiftRejected]:t.goGiftStatus?.rejected?.label||t.failedLabel,[e.RewardType.GogiftCallbackPending]:t.goGiftStatus?.callbackPending?.label||t.pendingLabel,[e.RewardType.GogiftCallbackSuccess]:t.goGiftStatus?.callbackSuccess?.label||t.receivedLabel,[e.RewardType.GogiftCallbackTimeout]:t.goGiftStatus?.callbackTimeout?.label||t.failedLabel}),[t]),L=(0,n.useMemo)(()=>({[e.RewardType.Received]:"",[e.RewardType.Pending]:t.pendingTip,[e.RewardType.ApproveFail]:"",[e.RewardType.ApproveSuccess]:t.confirmedTip,[e.RewardType.Unfulfilled]:t.processingTip,[e.RewardType.Fulfilled]:t.ShippedTip,[e.RewardType.Failed]:"",[e.RewardType.GogiftPending]:t.goGiftStatus?.pending?.tip||"",[e.RewardType.GogiftApproved]:t.goGiftStatus?.approved?.tip||"",[e.RewardType.GogiftSecondConfirm]:t.goGiftStatus?.secondConfirm?.tip||"",[e.RewardType.GogiftRejected]:t.goGiftStatus?.rejected?.tip||"",[e.RewardType.GogiftCallbackPending]:t.goGiftStatus?.callbackPending?.tip||"",[e.RewardType.GogiftCallbackSuccess]:t.goGiftStatus?.callbackSuccess?.tip||"",[e.RewardType.GogiftCallbackTimeout]:t.goGiftStatus?.callbackTimeout?.tip||""}),[t]),U=(0,n.useMemo)(()=>({[e.RewardType.Received]:"#52C41A",[e.RewardType.Pending]:"#999",[e.RewardType.ApproveFail]:"#F84D4F",[e.RewardType.ApproveSuccess]:"#999",[e.RewardType.Unfulfilled]:"#999",[e.RewardType.Fulfilled]:"#999",[e.RewardType.Failed]:"#F84D4F",[e.RewardType.GogiftPending]:"#999",[e.RewardType.GogiftApproved]:"#999",[e.RewardType.GogiftSecondConfirm]:"#999",[e.RewardType.GogiftRejected]:"#F84D4F",[e.RewardType.GogiftCallbackPending]:"#999",[e.RewardType.GogiftCallbackSuccess]:"#52C41A",[e.RewardType.GogiftCallbackTimeout]:"#F84D4F"}),[]),I=(0,n.useCallback)(()=>{y&&v(i=>i+1)},[y]),Y=(0,n.useCallback)((i,s)=>{x(s),(0,P.default)(i),setTimeout(()=>{x(-1)},2e3)},[]),H=()=>(0,l.jsxs)(l.Fragment,{children:[G&&(0,l.jsx)("div",{className:"flex flex-1 flex-col items-center justify-center",children:(0,l.jsx)(w.default,{})}),!G&&(0,l.jsx)("div",{className:"mt-[24px] flex-1 overflow-auto overscroll-contain pb-[24px] md:pb-[48px]",children:k.length>0?(0,l.jsx)("div",{className:"grid gap-[18px] md:gap-[12px]",children:k.map((i,s)=>(0,l.jsxs)("div",{className:"grid gap-[8px]",children:[i?.orderNumber&&(0,l.jsxs)("div",{className:"text-[15px] font-semibold leading-[1.4] text-[#777]",children:[t.orderNumberLabel,": ",i.orderNumber]}),(0,l.jsxs)("div",{className:(0,g.default)("flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]",!m&&"rounded-none"),children:[(0,l.jsxs)("div",{className:"grid gap-[4px]",children:[(0,l.jsx)("div",{className:"text-[16px] font-bold leading-[1.4]",children:i.title}),(0,l.jsxs)("div",{className:"text-[14px] font-semibold text-[#999]",children:[t.valueLabel,": ",i.value," ",t?.pointUnit]}),(0,l.jsxs)("div",{className:"text-[14px] font-semibold text-[#999]",children:[i?.couponCode?`${t?.code||"Code"}: ${i.couponCode} `:"",i?.couponCode&&(0,l.jsx)("span",{className:"cursor-pointer text-[14px] font-semibold text-brand underline",onClick:()=>{Y(i.couponCode,s)},role:"button",tabIndex:0,onKeyDown:b=>{(b.key==="Enter"||b.key===" ")&&b.preventDefault()},children:j===s?t?.copied||"COPIED":t?.copy||"COPY"})]}),i?.link&&(0,l.jsx)("div",{className:"text-[14px] font-semibold text-[#999]",children:(0,l.jsx)("a",{href:i.link,target:"_blank",rel:"noopener noreferrer",className:"text-brand underline",children:t?.redeemLinkLabel||"Redeem Link"})})]}),(0,l.jsxs)("div",{className:"grid gap-[4px] text-right",children:[(0,l.jsxs)("div",{className:(0,g.default)("flex items-center justify-end text-[16px] font-bold leading-[1.4]",`text-[${U[i.type]}]`),children:[(0,l.jsx)("span",{children:E[i.type]}),L[i.type]&&(0,l.jsx)(A.default,{info:L[i.type],index:s})]}),(0,l.jsx)("div",{className:"text-[14px] font-semibold text-[#999]",children:(0,R.default)(i.date).format("YYYY-MM-DD HH:mm").toString()})]})]})]},s))}):(0,l.jsxs)("div",{className:"flex h-full flex-col items-center justify-center",children:[(0,l.jsx)(p.Picture,{className:"mb-[12px] w-[160px]",source:t?.emptyListImage?.url,alt:t?.emptyListImage?.alt||"empty list image"}),(0,l.jsx)("div",{className:"text-[16px] font-semibold leading-[1.4]",children:t?.emptyListLabel})]})})]});return(0,l.jsx)(F.CreditsModalContainer,{title:t.title,className:(0,g.default)("h-[800px] w-[640px]"),useAnimation:!0,animationClassName:"md:translate-y-[100vh]",scrollClassName:"md:mb-0 flex flex-col",...r,onScrollEnd:I,children:(0,l.jsxs)(p.Tabs,{align:"left",shape:m?"rounded":"square",value:o.toString(),onValueChange:i=>{u(Number(i))},className:"flex flex-1 flex-col",children:[(0,l.jsx)("div",{className:"shrink-0",children:(0,l.jsx)(p.TabsList,{children:c.map(i=>(0,l.jsx)(p.TabsTrigger,{value:i.type.toString(),children:i.title},i.type))})}),c.map(i=>(0,l.jsx)(p.TabsContent,{value:i.type.toString(),className:"flex flex-1 flex-col",children:H()},i.type))]})})}var Q=J;
|
|
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, 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": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
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 // tabs \u7531 data.xxxTab \u771F\u503C\u8FC7\u6EE4\u6784\u5EFA\uFF0CactiveTab \u82E5\u6307\u5411\u4E00\u4E2A\u5DF2\u88AB\u8FC7\u6EE4\u6389\u7684\u7C7B\u578B\uFF08\u4F8B\u5982 couponTab \u5C1A\u672A\u52A0\u8F7D\uFF09\uFF0C\n // \u4F1A\u5BFC\u81F4\u6CA1\u6709\u4EFB\u4F55 TabsTrigger/TabsContent \u5339\u914D\uFF0C\u521D\u59CB\u4E0D\u5C55\u793A\u5185\u5BB9\u3002\u6B64\u5904\u5728 tabs \u53D8\u5316\u65F6\u91CD\u540C\u6B65\u3002\n useEffect(() => {\n if (tabs.length && !tabs.some(tab => tab.type === activeTab)) {\n setActiveTab(tabs[0]!.type)\n }\n }, [tabs, activeTab])\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
6
|
"names": ["RewardsModal_exports", "__export", "RewardsModal_default", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_classnames", "import_copy_to_clipboard", "import_dayjs", "import_react", "import_const", "import_ModalContainer", "import_Tip", "import_LoadingDots", "import_useMyRewards", "import_lib", "import_constants", "RewardsModal", "data", "props", "activeTab", "setActiveTab", "brand", "rounded", "page", "setPage", "copied", "setCopied", "tabs", "tab", "myRewards", "canNext", "isLoading", "useMyRewards", "getProductType", "item", "getGoGiftType", "status", "statusMap", "list", "base", "TypeMap", "TipMap", "ColorMap", "handleScrollEnd", "prev", "handleCopy", "code", "idx", "clipboard", "renderContent", "LoadingDots", "index", "classNames", "e", "Tip", "dayjs", "value"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as ge,jsx as a,jsxs as h}from"react/jsx-runtime";import{Container as j,Heading as q,Tabs as J,TabsContent as K,TabsList as Q,TabsTrigger as W}from"@anker-in/headless-ui";import x from"classnames";import{useCallback as X,useEffect as Y,useMemo as y,useState as T}from"react";import Z from"./RedeemCouponModal";import ee from"./RedeemProductModal";import te from"./RedeemVirtualProductModal";import{useCreditsContext as ae}from"../context/provider";import se from"../context/hooks/useRedeemableList";import{AlpcConsumeType as G,AlpcErrorCode as ne,ConsumeType as d}from"../context/const";import{useHeadlessContext as oe,useProductsByHandles as re,gaTrack as ie,classNames as D}from"@anker-in/lib";import{RedeemableItem as le}from"./RedeemableItem";import{ROUNDED_BRANDS as de}from"../../../constants";import me from"../modal/RulesModal";import{useRegistration as pe}from"../../../components/registration";import{numberFormat as ue}from"../context/utils";import ce from"../context/hooks/useMyRewards";const Pe=({copy:t,id:w})=>{const{profile:N,openSignUpPopup:F,gtm:{pageGroup:O},pageCommon:c,creditInfo:B}=ae(),{authCodeActivate:g}=pe(),{brand:L,locale:H}=oe(),_=de.includes(L),p=Object.keys(N||{}).length>0,[f,k]=T(t.list?.[0]?.label||"");Y(()=>{const e=(t.list||[]).map(r=>r.label);e.length&&!e.includes(f)&&k(e[0])},[t.list,f]);const[s,u]=T(void 0),[b,E]=T(),{listLoading:$,redeemableList:S,getRedeemableList:M}=se(),{myRewards:I}=ce({page:1,pageSize:100,consumeType:G.ExternalProduct}),l=y(()=>({...c?.redeemModal||{},...t.redeemModal||{}}),[t.redeemModal,c?.redeemModal]),m=y(()=>S.map(e=>({id:e.id.toString(),title:e.name,consumeCredits:e.consume_credits,remainingInventory:e.remaining_inventory,isLimited:!!e.is_limited,consumeType:e.consume_type,handle:e.sku_handle,sku:e.goods_sku,image:e.goods_url})),[S]),z=m.map(e=>e.handle),{data:A}=re({handles:z}),U=y(()=>{const e=new Map;return(t.list||[]).forEach(r=>{const v=(r.list||[]).filter(o=>m.some(n=>String(n.id)===String(o.id))).map(o=>{const n=m.find(i=>String(i.id)===String(o.id)),R=A?.find(i=>i.handle===n?.handle),P=R?.variants.find(i=>i.sku===n?.sku);if(n?.isLimited&&(!n?.remainingInventory||n.remainingInventory<=0)||n?.consumeType===G.Product&&(!R||!P))return null;const V=o.type===d.GoGift&&p&&I.some(i=>i.rule_id===Number(o.id));return{alpc:n,config:o,product:R,variant:P,hasRedeemed:V}}).filter(o=>o!==null);e.set(r.label,v)}),e},[t.list,m,A,p,I]),C=X(e=>{e===ne.CodeLpcRuleInventoryNotEnough&&M()},[M]);return h(j,{id:w,className:x("relative bg-[#F5F5F7]"),children:[a(q,{as:"h2",size:"4",html:t.title}),p&&t.availableCredits&&a("p",{className:"mt-[12px] text-[20px] l-xxl:text-[18px] l:text-[16px] font-bold text-[#4A4C56]",children:t.availableCredits.includes("$credits")?h(ge,{children:[t.availableCredits.split("$credits")[0],a("span",{className:D("text-brand-color-0",L==="ankersolix"&&"bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent"),children:ue(B?.available_credit||0,H).toString()}),t.availableCredits.split("$credits")[1]||""]}):t.availableCredits}),h(J,{shape:_?"rounded":"square",align:"left",value:f,onValueChange:e=>{k(e),ie({event:"ga4Event",event_name:"lp_navigation",event_parameters:{navigation:e,page_group:O}})},children:[a("div",{className:x("py-[24px] md:justify-center"),children:a(Q,{children:(t.list||[]).map(e=>a(W,{value:e.label,children:e.label},e.label))})}),(t.list||[]).map(e=>a(K,{value:e.label,children:!!m?.length&&!$&&a("div",{className:x("relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3"),children:(U.get(e.label)||[])?.map(r=>a(le,{copy:t,item:r,onRedeem:v=>{p?!N?.activated&&!g.isActivateSuccess?(g.setAutoSendEmail(!0),g.open()):u(v):F()},onRulesOpen:E},r?.alpc?.id))})},e.label))]}),(s?.config?.type===d.Coupon||s?.config?.type===d.ShippingCoupon)&&l?.coupon&&s&&a(Z,{item:s,copy:l,onError:C,onClose:()=>{u(void 0)}}),s?.config?.type===d.Product&&l?.product&&s&&a(ee,{item:s,copy:l,onError:C,onClose:()=>{u(void 0)}}),(s?.config?.type===d.GiftCard||s?.config?.type===d.GoGift)&&l?.virtualProduct&&s&&a(te,{item:s,copy:l,onError:C,onClose:()=>{u(void 0)}}),b&&a(me,{overlayClassName:"md:px-[16px] md:items-center",className:D("md:h-fit md:rounded-b-[16px]",!_&&"md:rounded-none"),isOpen:b.length>0,onClose:()=>E([]),titleClassName:"border-b-transparent h-[56px]",rules:b,scrollClassName:"md:mt-[8px] md:mb-[24px] md:pt-0",title:c?.ruleLabel,ruleClassName:"text-[#1d1d1f] font-bold"})]})};export{Pe as CreditsRedeemList};
|
|
2
2
|
//# sourceMappingURL=CreditsRedeemList.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/creditsRedeemList/CreditsRedeemList.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Container, Heading, Tabs, TabsContent, TabsList, TabsTrigger } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { useCallback, useMemo, useState } from 'react'\n\nimport RedeemCouponModal from './RedeemCouponModal'\nimport RedeemProductModal from './RedeemProductModal'\nimport RedeemVirtualProductModal from './RedeemVirtualProductModal'\nimport { useCreditsContext } from '../context/provider'\nimport useRedeemableList from '../context/hooks/useRedeemableList'\nimport { AlpcConsumeType, AlpcErrorCode, ConsumeType } from '../context/const'\nimport { useHeadlessContext, useProductsByHandles, gaTrack, classNames as cn } from '@anker-in/lib'\nimport type { RedeemableItem as RedeemableItemType } from '../type'\nimport { RedeemableItem } from './RedeemableItem'\nimport { ROUNDED_BRANDS } from '../../../constants'\nimport RulesModal from '../modal/RulesModal'\nimport { CreditsRedeemListCopy } from './type'\nimport { useRegistration } from '../../../components/registration'\nimport { numberFormat } from '../context/utils'\nimport useMyRewards from '../context/hooks/useMyRewards'\n\nexport const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; id?: string }) => {\n const {\n profile,\n openSignUpPopup,\n gtm: { pageGroup },\n pageCommon,\n creditInfo,\n } = useCreditsContext()\n const { authCodeActivate } = useRegistration()\n const { brand, locale } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const isLogin = Object.keys(profile || {}).length > 0\n\n const [popRedeemData, setPopRedeemData] = useState<RedeemableItemType | undefined>(undefined)\n\n const [rules, setRules] = useState<string | string[]>()\n\n const { listLoading, redeemableList, getRedeemableList } = useRedeemableList()\n\n // \u83B7\u53D6\u7528\u6237\u7684 ExternalProduct \u5151\u6362\u8BB0\u5F55\n const { myRewards } = useMyRewards({\n page: 1,\n pageSize: 100,\n consumeType: AlpcConsumeType.ExternalProduct,\n })\n\n // \u5408\u5E76 redeemModal \u6587\u6848\uFF0C\u4F18\u5148\u4F7F\u7528 copy.redeemModal\uFF0Cfallback \u5230 pageCommon.redeemModal\n const redeemModalCopy = useMemo(() => {\n return {\n ...(pageCommon?.redeemModal || {}),\n ...(copy.redeemModal || {}),\n }\n }, [copy.redeemModal, pageCommon?.redeemModal])\n\n const alpcList = useMemo(() => {\n return redeemableList.map(item => {\n return {\n id: item.id.toString(),\n title: item.name,\n consumeCredits: item.consume_credits,\n remainingInventory: item.remaining_inventory,\n isLimited: !!item.is_limited,\n consumeType: item.consume_type,\n handle: item.sku_handle,\n sku: item.goods_sku,\n image: item.goods_url,\n }\n })\n }, [redeemableList])\n\n const handles = alpcList.map(item => item.handle)\n const { data: products } = useProductsByHandles({ handles })\n\n // \u6309 tab label \u5206\u7EC4\u9884\u8BA1\u7B97\u5217\u8868\uFF0C\u914D\u5408 TabsContent \u58F0\u660E\u5F0F\u6E32\u67D3\uFF0C\u907F\u514D\u624B\u52A8 activeTab \u5B57\u7B26\u4E32\u6BD4\u8F83\n const listByTab = useMemo(() => {\n const map = new Map<string, RedeemableItemType[]>()\n ;(copy.list || []).forEach(categoryItem => {\n const items = (categoryItem.list || [])\n .filter(item => alpcList.some(alpcItem => String(alpcItem.id) === String(item.id)))\n .map(item => {\n const alpcItem = alpcList.find(alpcItem => String(alpcItem.id) === String(item.id))\n const product = products?.find(product => product.handle === alpcItem?.handle)\n const variant = product?.variants.find(variant => variant.sku === alpcItem?.sku)\n // \u8FC7\u6EE4\u6389\u5E93\u5B58\u4E0D\u8DB3\u7684\u5546\u54C1\n if (alpcItem?.isLimited && (!alpcItem?.remainingInventory || alpcItem.remainingInventory <= 0)) return null\n if (alpcItem?.consumeType === AlpcConsumeType.Product && (!product || !variant)) return null\n\n // \u68C0\u67E5 GoGift \u662F\u5426\u5DF2\u7ECF\u5151\u6362\u8FC7\uFF08\u53EA\u6709 GoGift \u9650\u5236\u5151\u6362\u4E00\u6B21\uFF09\n const hasRedeemed = item.type === ConsumeType.GoGift &&\n isLogin &&\n myRewards.some(reward => reward.rule_id === Number(item.id))\n\n return {\n alpc: alpcItem,\n config: item,\n product,\n variant,\n hasRedeemed,\n }\n })\n .filter(item => item !== null) as unknown as RedeemableItemType[]\n map.set(categoryItem.label, items)\n })\n return map\n }, [copy.list, alpcList, products, isLogin, myRewards])\n\n const handleRedeemError = useCallback(\n (errorCode: AlpcErrorCode) => {\n if (errorCode === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {\n getRedeemableList()\n }\n },\n [getRedeemableList]\n )\n\n return (\n <Container id={id} className={classNames('relative bg-[#F5F5F7]')}>\n <Heading as=\"h2\" size=\"4\" html={copy.title} />\n\n {/* \u53EF\u7528\u79EF\u5206\u5C55\u793A */}\n {isLogin && copy.availableCredits && (\n <p className=\"mt-[12px] text-[20px] l-xxl:text-[18px] l:text-[16px] font-bold text-[#4A4C56]\">\n {copy.availableCredits.includes('$credits') ? (\n <>\n {copy.availableCredits.split('$credits')[0]}\n <span\n className={cn(\n 'text-brand-color-0',\n brand === 'ankersolix' &&\n 'bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent'\n )}\n >\n {numberFormat(creditInfo?.available_credit || 0, locale).toString()}\n </span>\n {copy.availableCredits.split('$credits')[1] || ''}\n </>\n ) : (\n copy.availableCredits\n )}\n </p>\n )}\n\n <Tabs\n shape={rounded ? 'rounded' : 'square'}\n align=\"left\"\n className={classNames('py-[24px] md:justify-center')}\n defaultValue={copy.list?.[0]?.label || ''}\n onValueChange={value => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_navigation',\n event_parameters: {\n navigation: value,\n page_group: pageGroup,\n },\n })\n }}\n >\n <TabsList>\n {(copy.list || []).map(item => (\n <TabsTrigger key={item.label} value={item.label}>\n {item.label}\n </TabsTrigger>\n ))}\n </TabsList>\n {(copy.list || []).map(categoryItem => (\n <TabsContent key={categoryItem.label} value={categoryItem.label}>\n {/* PC\u7AEF */}\n {!!alpcList?.length && !listLoading && (\n <div\n className={classNames(\n 'relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3'\n )}\n >\n {(listByTab.get(categoryItem.label) || [])?.map(item => (\n <RedeemableItem\n key={item?.alpc?.id}\n copy={copy}\n item={item}\n onRedeem={(item: RedeemableItemType) => {\n if (!isLogin) {\n openSignUpPopup()\n } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n authCodeActivate.setAutoSendEmail(true)\n authCodeActivate.open()\n } else {\n setPopRedeemData(item)\n }\n }}\n onRulesOpen={setRules}\n />\n ))}\n </div>\n )}\n </TabsContent>\n ))}\n </Tabs>\n\n {(popRedeemData?.config?.type === ConsumeType.Coupon ||\n popRedeemData?.config?.type === ConsumeType.ShippingCoupon) &&\n redeemModalCopy?.coupon &&\n popRedeemData && (\n <RedeemCouponModal\n item={popRedeemData}\n copy={redeemModalCopy}\n onError={handleRedeemError}\n onClose={() => {\n setPopRedeemData(undefined)\n }}\n />\n )}\n {popRedeemData?.config?.type === ConsumeType.Product && redeemModalCopy?.product && popRedeemData && (\n <RedeemProductModal\n item={popRedeemData}\n copy={redeemModalCopy}\n onError={handleRedeemError}\n onClose={() => {\n setPopRedeemData(undefined)\n }}\n />\n )}\n {(popRedeemData?.config?.type === ConsumeType.GiftCard || popRedeemData?.config?.type === ConsumeType.GoGift) &&\n redeemModalCopy?.virtualProduct &&\n popRedeemData && (\n <RedeemVirtualProductModal\n item={popRedeemData}\n copy={redeemModalCopy}\n onError={handleRedeemError}\n onClose={() => {\n setPopRedeemData(undefined)\n }}\n />\n )}\n {rules && (\n <RulesModal\n overlayClassName=\"md:px-[16px] md:items-center\"\n className={cn('md:h-fit md:rounded-b-[16px]', !rounded && 'md:rounded-none')}\n isOpen={rules.length > 0}\n onClose={() => setRules([])}\n titleClassName=\"border-b-transparent h-[56px]\"\n rules={rules}\n scrollClassName=\"md:mt-[8px] md:mb-[24px] md:pt-0\"\n title={pageCommon?.ruleLabel}\n ruleClassName=\"text-[#1d1d1f] font-bold\"\n />\n )}\n </Container>\n )\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "Container", "Heading", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "classNames", "useCallback", "useMemo", "useState", "RedeemCouponModal", "RedeemProductModal", "RedeemVirtualProductModal", "useCreditsContext", "useRedeemableList", "AlpcConsumeType", "AlpcErrorCode", "ConsumeType", "useHeadlessContext", "useProductsByHandles", "gaTrack", "cn", "RedeemableItem", "ROUNDED_BRANDS", "RulesModal", "useRegistration", "numberFormat", "useMyRewards", "CreditsRedeemList", "copy", "id", "profile", "openSignUpPopup", "pageGroup", "pageCommon", "creditInfo", "authCodeActivate", "brand", "locale", "rounded", "isLogin", "popRedeemData", "setPopRedeemData", "rules", "setRules", "listLoading", "redeemableList", "getRedeemableList", "myRewards", "redeemModalCopy", "alpcList", "
|
|
4
|
+
"sourcesContent": ["import { Container, Heading, Tabs, TabsContent, TabsList, TabsTrigger } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport RedeemCouponModal from './RedeemCouponModal'\nimport RedeemProductModal from './RedeemProductModal'\nimport RedeemVirtualProductModal from './RedeemVirtualProductModal'\nimport { useCreditsContext } from '../context/provider'\nimport useRedeemableList from '../context/hooks/useRedeemableList'\nimport { AlpcConsumeType, AlpcErrorCode, ConsumeType } from '../context/const'\nimport { useHeadlessContext, useProductsByHandles, gaTrack, classNames as cn } from '@anker-in/lib'\nimport type { RedeemableItem as RedeemableItemType } from '../type'\nimport { RedeemableItem } from './RedeemableItem'\nimport { ROUNDED_BRANDS } from '../../../constants'\nimport RulesModal from '../modal/RulesModal'\nimport { CreditsRedeemListCopy } from './type'\nimport { useRegistration } from '../../../components/registration'\nimport { numberFormat } from '../context/utils'\nimport useMyRewards from '../context/hooks/useMyRewards'\n\nexport const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; id?: string }) => {\n const {\n profile,\n openSignUpPopup,\n gtm: { pageGroup },\n pageCommon,\n creditInfo,\n } = useCreditsContext()\n const { authCodeActivate } = useRegistration()\n const { brand, locale } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const isLogin = Object.keys(profile || {}).length > 0\n\n // copy.list \u53EF\u80FD\u662F\u5F02\u6B65\u52A0\u8F7D\u7684\uFF0C\u9996\u6B21\u6E32\u67D3\u65F6\u53EF\u80FD\u4E3A\u7A7A\uFF0C\u9700\u8981\u5728\u6570\u636E\u5C31\u7EEA\u540E\u540C\u6B65 activeTab\uFF0C\n // \u5426\u5219 Radix Tabs \u975E\u53D7\u63A7\u6A21\u5F0F\u4E0B\u62FF\u5230\u7684 defaultValue \u4F1A\u4E00\u76F4\u662F\u521D\u59CB\u7684\u7A7A\u503C\uFF0C\u5BFC\u81F4\u521D\u59CB\u4E0D\u5C55\u793A\u4EFB\u4F55 TabsContent\u3002\n const [activeTab, setActiveTab] = useState<string>(copy.list?.[0]?.label || '')\n useEffect(() => {\n const labels = (copy.list || []).map(item => item.label)\n if (labels.length && !labels.includes(activeTab)) {\n setActiveTab(labels[0])\n }\n }, [copy.list, activeTab])\n\n const [popRedeemData, setPopRedeemData] = useState<RedeemableItemType | undefined>(undefined)\n\n const [rules, setRules] = useState<string | string[]>()\n\n const { listLoading, redeemableList, getRedeemableList } = useRedeemableList()\n\n // \u83B7\u53D6\u7528\u6237\u7684 ExternalProduct \u5151\u6362\u8BB0\u5F55\n const { myRewards } = useMyRewards({\n page: 1,\n pageSize: 100,\n consumeType: AlpcConsumeType.ExternalProduct,\n })\n\n // \u5408\u5E76 redeemModal \u6587\u6848\uFF0C\u4F18\u5148\u4F7F\u7528 copy.redeemModal\uFF0Cfallback \u5230 pageCommon.redeemModal\n const redeemModalCopy = useMemo(() => {\n return {\n ...(pageCommon?.redeemModal || {}),\n ...(copy.redeemModal || {}),\n }\n }, [copy.redeemModal, pageCommon?.redeemModal])\n\n const alpcList = useMemo(() => {\n return redeemableList.map(item => {\n return {\n id: item.id.toString(),\n title: item.name,\n consumeCredits: item.consume_credits,\n remainingInventory: item.remaining_inventory,\n isLimited: !!item.is_limited,\n consumeType: item.consume_type,\n handle: item.sku_handle,\n sku: item.goods_sku,\n image: item.goods_url,\n }\n })\n }, [redeemableList])\n\n const handles = alpcList.map(item => item.handle)\n const { data: products } = useProductsByHandles({ handles })\n\n // \u6309 tab label \u5206\u7EC4\u9884\u8BA1\u7B97\u5217\u8868\uFF0C\u914D\u5408 TabsContent \u58F0\u660E\u5F0F\u6E32\u67D3\uFF0C\u907F\u514D\u624B\u52A8 activeTab \u5B57\u7B26\u4E32\u6BD4\u8F83\n const listByTab = useMemo(() => {\n const map = new Map<string, RedeemableItemType[]>()\n ;(copy.list || []).forEach(categoryItem => {\n const items = (categoryItem.list || [])\n .filter(item => alpcList.some(alpcItem => String(alpcItem.id) === String(item.id)))\n .map(item => {\n const alpcItem = alpcList.find(alpcItem => String(alpcItem.id) === String(item.id))\n const product = products?.find(product => product.handle === alpcItem?.handle)\n const variant = product?.variants.find(variant => variant.sku === alpcItem?.sku)\n // \u8FC7\u6EE4\u6389\u5E93\u5B58\u4E0D\u8DB3\u7684\u5546\u54C1\n if (alpcItem?.isLimited && (!alpcItem?.remainingInventory || alpcItem.remainingInventory <= 0)) return null\n if (alpcItem?.consumeType === AlpcConsumeType.Product && (!product || !variant)) return null\n\n // \u68C0\u67E5 GoGift \u662F\u5426\u5DF2\u7ECF\u5151\u6362\u8FC7\uFF08\u53EA\u6709 GoGift \u9650\u5236\u5151\u6362\u4E00\u6B21\uFF09\n const hasRedeemed = item.type === ConsumeType.GoGift &&\n isLogin &&\n myRewards.some(reward => reward.rule_id === Number(item.id))\n\n return {\n alpc: alpcItem,\n config: item,\n product,\n variant,\n hasRedeemed,\n }\n })\n .filter(item => item !== null) as unknown as RedeemableItemType[]\n map.set(categoryItem.label, items)\n })\n return map\n }, [copy.list, alpcList, products, isLogin, myRewards])\n\n const handleRedeemError = useCallback(\n (errorCode: AlpcErrorCode) => {\n if (errorCode === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {\n getRedeemableList()\n }\n },\n [getRedeemableList]\n )\n\n return (\n <Container id={id} className={classNames('relative bg-[#F5F5F7]')}>\n <Heading as=\"h2\" size=\"4\" html={copy.title} />\n\n {/* \u53EF\u7528\u79EF\u5206\u5C55\u793A */}\n {isLogin && copy.availableCredits && (\n <p className=\"mt-[12px] text-[20px] l-xxl:text-[18px] l:text-[16px] font-bold text-[#4A4C56]\">\n {copy.availableCredits.includes('$credits') ? (\n <>\n {copy.availableCredits.split('$credits')[0]}\n <span\n className={cn(\n 'text-brand-color-0',\n brand === 'ankersolix' &&\n 'bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent'\n )}\n >\n {numberFormat(creditInfo?.available_credit || 0, locale).toString()}\n </span>\n {copy.availableCredits.split('$credits')[1] || ''}\n </>\n ) : (\n copy.availableCredits\n )}\n </p>\n )}\n\n <Tabs\n shape={rounded ? 'rounded' : 'square'}\n align=\"left\"\n value={activeTab}\n onValueChange={value => {\n setActiveTab(value)\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_navigation',\n event_parameters: {\n navigation: value,\n page_group: pageGroup,\n },\n })\n }}\n >\n <div className={classNames('py-[24px] md:justify-center')}>\n <TabsList>\n {(copy.list || []).map(item => (\n <TabsTrigger key={item.label} value={item.label}>\n {item.label}\n </TabsTrigger>\n ))}\n </TabsList>\n </div>\n {(copy.list || []).map(categoryItem => (\n <TabsContent key={categoryItem.label} value={categoryItem.label}>\n {/* PC\u7AEF */}\n {!!alpcList?.length && !listLoading && (\n <div\n className={classNames(\n 'relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3'\n )}\n >\n {(listByTab.get(categoryItem.label) || [])?.map(item => (\n <RedeemableItem\n key={item?.alpc?.id}\n copy={copy}\n item={item}\n onRedeem={(item: RedeemableItemType) => {\n if (!isLogin) {\n openSignUpPopup()\n } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n authCodeActivate.setAutoSendEmail(true)\n authCodeActivate.open()\n } else {\n setPopRedeemData(item)\n }\n }}\n onRulesOpen={setRules}\n />\n ))}\n </div>\n )}\n </TabsContent>\n ))}\n </Tabs>\n\n {(popRedeemData?.config?.type === ConsumeType.Coupon ||\n popRedeemData?.config?.type === ConsumeType.ShippingCoupon) &&\n redeemModalCopy?.coupon &&\n popRedeemData && (\n <RedeemCouponModal\n item={popRedeemData}\n copy={redeemModalCopy}\n onError={handleRedeemError}\n onClose={() => {\n setPopRedeemData(undefined)\n }}\n />\n )}\n {popRedeemData?.config?.type === ConsumeType.Product && redeemModalCopy?.product && popRedeemData && (\n <RedeemProductModal\n item={popRedeemData}\n copy={redeemModalCopy}\n onError={handleRedeemError}\n onClose={() => {\n setPopRedeemData(undefined)\n }}\n />\n )}\n {(popRedeemData?.config?.type === ConsumeType.GiftCard || popRedeemData?.config?.type === ConsumeType.GoGift) &&\n redeemModalCopy?.virtualProduct &&\n popRedeemData && (\n <RedeemVirtualProductModal\n item={popRedeemData}\n copy={redeemModalCopy}\n onError={handleRedeemError}\n onClose={() => {\n setPopRedeemData(undefined)\n }}\n />\n )}\n {rules && (\n <RulesModal\n overlayClassName=\"md:px-[16px] md:items-center\"\n className={cn('md:h-fit md:rounded-b-[16px]', !rounded && 'md:rounded-none')}\n isOpen={rules.length > 0}\n onClose={() => setRules([])}\n titleClassName=\"border-b-transparent h-[56px]\"\n rules={rules}\n scrollClassName=\"md:mt-[8px] md:mb-[24px] md:pt-0\"\n title={pageCommon?.ruleLabel}\n ruleClassName=\"text-[#1d1d1f] font-bold\"\n />\n )}\n </Container>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Container", "Heading", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "classNames", "useCallback", "useEffect", "useMemo", "useState", "RedeemCouponModal", "RedeemProductModal", "RedeemVirtualProductModal", "useCreditsContext", "useRedeemableList", "AlpcConsumeType", "AlpcErrorCode", "ConsumeType", "useHeadlessContext", "useProductsByHandles", "gaTrack", "cn", "RedeemableItem", "ROUNDED_BRANDS", "RulesModal", "useRegistration", "numberFormat", "useMyRewards", "CreditsRedeemList", "copy", "id", "profile", "openSignUpPopup", "pageGroup", "pageCommon", "creditInfo", "authCodeActivate", "brand", "locale", "rounded", "isLogin", "activeTab", "setActiveTab", "labels", "item", "popRedeemData", "setPopRedeemData", "rules", "setRules", "listLoading", "redeemableList", "getRedeemableList", "myRewards", "redeemModalCopy", "alpcList", "handles", "products", "listByTab", "map", "categoryItem", "items", "alpcItem", "product", "variant", "hasRedeemed", "reward", "handleRedeemError", "errorCode", "value"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as Q,jsx as l,jsxs as n}from"react/jsx-runtime";import{Tabs as
|
|
1
|
+
import{Fragment as Q,jsx as l,jsxs as n}from"react/jsx-runtime";import{Tabs as j,TabsContent as E,TabsList as U,TabsTrigger as I,Picture as Y}from"@anker-in/headless-ui";import u from"classnames";import H from"copy-to-clipboard";import O from"dayjs";import{useCallback as c,useEffect as N,useMemo as a,useState as f}from"react";import{ApprovalStatus as g,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,...P}){const[r,b]=f(s.Coupon),{brand:R}=K(),m=V.includes(R),[F,v]=f(1),[A,x]=f(-1),p=a(()=>[{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]);N(()=>{p.length&&!p.some(i=>i.type===r)&&b(p[0].type)},[p,r]),N(()=>{v(1)},[r]);const{myRewards:C=[],canNext:y,isLoading:G}=B({page:F,pageSize:1e3,consumeType:r}),S=c(i=>i.fulfillment_status&&i.fulfillment_status!=="null"?i.fulfillment_status==="fulfilled"?e.Fulfilled:e.Unfulfilled:i.approval_status===g.Success||i.approval_status===g.DoubleConfirm?e.ApproveSuccess:i.approval_status===g.Failed?e.Failed:e.Pending,[]),T=c(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},[]),k=a(()=>C.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:S(i),orderNumber:i.order_number,couponCode:"",link:""}:r===s.ExternalProduct?{...o,type:T(i.approval_status),orderNumber:"",couponCode:"",link:i.link||""}:{...o,type:e.Received,couponCode:"",orderNumber:"",link:""}}),[r,C,S,T]),w=a(()=>({[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]),L=a(()=>({[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]),D=a(()=>({[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"}),[]),M=c(()=>{y&&v(i=>i+1)},[y]),h=c((i,o)=>{x(o),H(i),setTimeout(()=>{x(-1)},2e3)},[]),_=()=>n(Q,{children:[G&&l("div",{className:"flex flex-1 flex-col items-center justify-center",children:l(z,{})}),!G&&l("div",{className:"mt-[24px] flex-1 overflow-auto overscroll-contain pb-[24px] md:pb-[48px]",children:k.length>0?l("div",{className:"grid gap-[18px] md:gap-[12px]",children:k.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:u("flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]",!m&&"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:()=>{h(i.couponCode,o)},role:"button",tabIndex:0,onKeyDown:d=>{(d.key==="Enter"||d.key===" ")&&d.preventDefault()},children:A===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:u("flex items-center justify-end text-[16px] font-bold leading-[1.4]",`text-[${D[i.type]}]`),children:[l("span",{children:w[i.type]}),L[i.type]&&l(q,{info:L[i.type],index:o})]}),l("div",{className:"text-[14px] font-semibold text-[#999]",children:O(i.date).format("YYYY-MM-DD HH:mm").toString()})]})]})]},o))}):n("div",{className:"flex h-full flex-col items-center justify-center",children:[l(Y,{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:u("h-[800px] w-[640px]"),useAnimation:!0,animationClassName:"md:translate-y-[100vh]",scrollClassName:"md:mb-0 flex flex-col",...P,onScrollEnd:M,children:n(j,{align:"left",shape:m?"rounded":"square",value:r.toString(),onValueChange:i=>{b(Number(i))},className:"flex flex-1 flex-col",children:[l("div",{className:"shrink-0",children:l(U,{children:p.map(i=>l(I,{value:i.type.toString(),children:i.title},i.type))})}),p.map(i=>l(E,{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, 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": "
|
|
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 // tabs \u7531 data.xxxTab \u771F\u503C\u8FC7\u6EE4\u6784\u5EFA\uFF0CactiveTab \u82E5\u6307\u5411\u4E00\u4E2A\u5DF2\u88AB\u8FC7\u6EE4\u6389\u7684\u7C7B\u578B\uFF08\u4F8B\u5982 couponTab \u5C1A\u672A\u52A0\u8F7D\uFF09\uFF0C\n // \u4F1A\u5BFC\u81F4\u6CA1\u6709\u4EFB\u4F55 TabsTrigger/TabsContent \u5339\u914D\uFF0C\u521D\u59CB\u4E0D\u5C55\u793A\u5185\u5BB9\u3002\u6B64\u5904\u5728 tabs \u53D8\u5316\u65F6\u91CD\u540C\u6B65\u3002\n useEffect(() => {\n if (tabs.length && !tabs.some(tab => tab.type === activeTab)) {\n setActiveTab(tabs[0]!.type)\n }\n }, [tabs, activeTab])\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
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
1
|
import { Container, Heading, Tabs, TabsContent, TabsList, TabsTrigger } from '@anker-in/headless-ui'
|
|
2
2
|
import classNames from 'classnames'
|
|
3
|
-
import { useCallback, useMemo, useState } from 'react'
|
|
3
|
+
import { useCallback, useEffect, useMemo, useState } from 'react'
|
|
4
4
|
|
|
5
5
|
import RedeemCouponModal from './RedeemCouponModal'
|
|
6
6
|
import RedeemProductModal from './RedeemProductModal'
|
|
@@ -32,6 +32,16 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
|
|
|
32
32
|
|
|
33
33
|
const isLogin = Object.keys(profile || {}).length > 0
|
|
34
34
|
|
|
35
|
+
// copy.list 可能是异步加载的，首次渲染时可能为空，需要在数据就绪后同步 activeTab，
|
|
36
|
+
// 否则 Radix Tabs 非受控模式下拿到的 defaultValue 会一直是初始的空值，导致初始不展示任何 TabsContent。
|
|
37
|
+
const [activeTab, setActiveTab] = useState<string>(copy.list?.[0]?.label || '')
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
const labels = (copy.list || []).map(item => item.label)
|
|
40
|
+
if (labels.length && !labels.includes(activeTab)) {
|
|
41
|
+
setActiveTab(labels[0])
|
|
42
|
+
}
|
|
43
|
+
}, [copy.list, activeTab])
|
|
44
|
+
|
|
35
45
|
const [popRedeemData, setPopRedeemData] = useState<RedeemableItemType | undefined>(undefined)
|
|
36
46
|
|
|
37
47
|
const [rules, setRules] = useState<string | string[]>()
|
|
@@ -144,9 +154,9 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
|
|
|
144
154
|
<Tabs
|
|
145
155
|
shape={rounded ? 'rounded' : 'square'}
|
|
146
156
|
align="left"
|
|
147
|
-
|
|
148
|
-
defaultValue={copy.list?.[0]?.label || ''}
|
|
157
|
+
value={activeTab}
|
|
149
158
|
onValueChange={value => {
|
|
159
|
+
setActiveTab(value)
|
|
150
160
|
gaTrack({
|
|
151
161
|
event: 'ga4Event',
|
|
152
162
|
event_name: 'lp_navigation',
|
|
@@ -157,13 +167,15 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
|
|
|
157
167
|
})
|
|
158
168
|
}}
|
|
159
169
|
>
|
|
160
|
-
<
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
{item.label}
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
170
|
+
<div className={classNames('py-[24px] md:justify-center')}>
|
|
171
|
+
<TabsList>
|
|
172
|
+
{(copy.list || []).map(item => (
|
|
173
|
+
<TabsTrigger key={item.label} value={item.label}>
|
|
174
|
+
{item.label}
|
|
175
|
+
</TabsTrigger>
|
|
176
|
+
))}
|
|
177
|
+
</TabsList>
|
|
178
|
+
</div>
|
|
167
179
|
{(copy.list || []).map(categoryItem => (
|
|
168
180
|
<TabsContent key={categoryItem.label} value={categoryItem.label}>
|
|
169
181
|
{/* PC端 */}
|
|
@@ -90,6 +90,14 @@ function RewardsModal({ data, ...props }: RewardsModalProps) {
|
|
|
90
90
|
].filter((tab): tab is { title: string; type: number } => !!tab.title)
|
|
91
91
|
}, [data.couponTab, data.productTab, data.externalProductTab])
|
|
92
92
|
|
|
93
|
+
// tabs 由 data.xxxTab 真值过滤构建，activeTab 若指向一个已被过滤掉的类型（例如 couponTab 尚未加载），
|
|
94
|
+
// 会导致没有任何 TabsTrigger/TabsContent 匹配，初始不展示内容。此处在 tabs 变化时重同步。
|
|
95
|
+
useEffect(() => {
|
|
96
|
+
if (tabs.length && !tabs.some(tab => tab.type === activeTab)) {
|
|
97
|
+
setActiveTab(tabs[0]!.type)
|
|
98
|
+
}
|
|
99
|
+
}, [tabs, activeTab])
|
|
100
|
+
|
|
93
101
|
// Reset page when switching tabs
|
|
94
102
|
useEffect(() => {
|
|
95
103
|
setPage(1)
|