72 lines
3.2 KiB
TypeScript
72 lines
3.2 KiB
TypeScript
import {ArrowLeft} from 'lucide-react'
|
|
import {useTranslation} from 'react-i18next'
|
|
import {Link, useSearchParams} from 'react-router-dom'
|
|
|
|
import PageLayout from '@/components/layout'
|
|
import {HOME_CATEGORY_META_MAP, HOME_GOOD_TYPE_ORDER} from '@/constant'
|
|
import {
|
|
GoodsCategoryList,
|
|
GoodsRedeemModal,
|
|
isGoodsType,
|
|
useGoodsCatalog,
|
|
useGoodsRedeem,
|
|
} from '@/features/goods'
|
|
|
|
function GoodsPage() {
|
|
const {t} = useTranslation()
|
|
const [searchParams] = useSearchParams()
|
|
const queryType = searchParams.get('type')
|
|
const selectedType = isGoodsType(queryType) ? queryType : HOME_GOOD_TYPE_ORDER[0]
|
|
const {productCategories, loading} = useGoodsCatalog({types: [selectedType]})
|
|
const redeem = useGoodsRedeem()
|
|
const visibleCategories = productCategories.filter((category) => category.id === selectedType)
|
|
const pageTitle = t(HOME_CATEGORY_META_MAP[selectedType].nameKey)
|
|
|
|
return (
|
|
<PageLayout contentClassName="mx-auto flex min-h-screen w-full max-w-[1180px] flex-col px-4 pb-8 sm:px-6 lg:px-8">
|
|
<Link
|
|
to="/"
|
|
className="mt-[12px] flex h-[44px] items-center justify-between rounded-[12px] bg-[#08070E]/72 px-[14px] text-[#F56E10] transition-colors hover:bg-[#0D0A14]/80 focus-visible:ring-2 focus-visible:ring-[#FE9F00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070E] sm:mt-[16px]"
|
|
>
|
|
<div className="flex items-center gap-[8px]">
|
|
<ArrowLeft className="h-[16px] w-[16px]" aria-hidden="true"/>
|
|
<span className="text-[14px] font-medium text-white/92">{t('common.back')}</span>
|
|
</div>
|
|
<div className="text-[15px] font-semibold text-[#F56E10]">{pageTitle}</div>
|
|
<div className="w-[52px]"></div>
|
|
</Link>
|
|
|
|
<div className="mx-auto w-full max-w-[1120px] pt-[18px] pb-[24px]">
|
|
<div className="h-px bg-white/16"></div>
|
|
<div className="mt-[14px]">
|
|
<GoodsCategoryList
|
|
categories={visibleCategories}
|
|
loading={loading}
|
|
emptyText={t('goods.noGoodsForCategory')}
|
|
onRedeem={redeem.openRedeemModal}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<GoodsRedeemModal
|
|
selectedProduct={redeem.selectedProduct}
|
|
modalMode={redeem.modalMode}
|
|
addressOptions={redeem.addressOptions}
|
|
selectedAddressId={redeem.selectedAddressId}
|
|
addressForm={redeem.addressForm}
|
|
addressLoading={redeem.addressLoading}
|
|
isAddAddressFormValid={redeem.isAddAddressFormValid}
|
|
submitLoading={redeem.submitLoading}
|
|
onClose={redeem.closeRedeemModal}
|
|
onConfirm={redeem.confirmRedeem}
|
|
onOpenAddAddress={redeem.openAddAddress}
|
|
onBackToSelectAddress={redeem.backToSelectAddress}
|
|
onSelectAddress={redeem.setSelectedAddressId}
|
|
onChangeAddressForm={redeem.changeAddressForm}
|
|
/>
|
|
</PageLayout>
|
|
)
|
|
}
|
|
|
|
export default GoodsPage
|