blob: a610d37136a99d9b9b2b7c515a81341e1b94a187 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
import Link from '@/core/components/elements/Link/Link'
import Spinner from '@/core/components/elements/Spinner/Spinner'
import useAuth from '@/core/hooks/useAuth'
import { getItemAddress, updateItemAddress } from '@/core/utils/address'
import { useRouter } from 'next/router'
import useAddresses from '../hooks/useAddresses'
import MobileView from '@/core/components/views/MobileView'
import DesktopView from '@/core/components/views/DesktopView'
import Menu from '@/lib/auth/components/Menu'
const Addresses = () => {
const router = useRouter()
const { select = null } = router.query
const { addresses } = useAddresses()
const selectedAddress = getItemAddress(select || '')
const changeSelectedAddress = (id) => {
if (!select) return
updateItemAddress(select, id)
router.back()
}
if (addresses.isLoading) {
return (
<div className='flex justify-center my-6'>
<Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
</div>
)
}
return (
<>
<MobileView>
<div className='p-4'>
<div className='text-right'>
<Link href='/my/address/create'>Tambah Alamat</Link>
</div>
<div className='grid gap-y-4 mt-4'>
{addresses.data?.map((address, index) => {
const type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
return (
<AddressCard
key={index}
address={address}
type={type}
changeSelectedAddress={changeSelectedAddress}
selectedAddress={selectedAddress}
select={select}
/>
)
})}
</div>
</div>
</MobileView>
<DesktopView>
<div className='container mx-auto flex py-10'>
<div className='w-3/12 pr-4'>
<Menu />
</div>
<div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
<div className='flex items-center mb-6'>
<h1 className='text-title-sm font-semibold'>Daftar Alamat</h1>
<Link
href='/my/address/create'
className='btn-solid-red py-2 px-3 !text-gray_r-1 h-fit ml-auto'
>
Tambah Alamat
</Link>
</div>
<div className='grid grid-cols-2 gap-4'>
{addresses.data?.map((address, index) => {
const type =
address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
return (
<AddressCard
key={index}
address={address}
type={type}
changeSelectedAddress={changeSelectedAddress}
selectedAddress={selectedAddress}
select={select}
/>
)
})}
</div>
</div>
</div>
</DesktopView>
</>
)
}
const AddressCard = ({ address, selectedAddress, changeSelectedAddress, type, select }) => {
const auth = useAuth()
return (
<div
className={`p-4 rounded-md border
${
(selectedAddress && selectedAddress == address.id
? 'border-gray_r-7 bg-gray_r-4'
: 'border-gray_r-7') +
' ' +
(select && 'cursor-pointer hover:bg-gray_r-4 transition')
}`}
>
<div onClick={() => changeSelectedAddress(address.id)} className={select && 'cursor-pointer'}>
<div className='flex gap-x-2'>
<div className='badge-red'>{type}</div>
{auth?.partnerId == address.id && <div className='badge-green'>Utama</div>}
</div>
<p className='font-medium mt-2'>{address.name}</p>
{address.mobile && <p className='mt-2 text-gray_r-11'>{address.mobile}</p>}
<p className='mt-1 leading-6 text-gray_r-11'>{address.street}</p>
</div>
<Link
href={`/my/address/${address.id}/edit`}
className='btn-light bg-white mt-3 w-full !text-gray_r-11'
>
Ubah Alamat
</Link>
</div>
)
}
export default Addresses
|
