@riosst100/pwa-marketplace 2.1.2 → 2.1.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/package.json
CHANGED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
|
|
3
|
+
import { useIntl } from 'react-intl';
|
|
4
|
+
import Item from './item';
|
|
5
|
+
|
|
6
|
+
const favoriteSeller = () => {
|
|
7
|
+
|
|
8
|
+
const { formatMessage } = useIntl();
|
|
9
|
+
const PAGE_TITLE = formatMessage({
|
|
10
|
+
id: 'favoriteSellerPage.pageTitleText',
|
|
11
|
+
defaultMessage: 'Favorite Seller'
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<div className='relative'>
|
|
16
|
+
<StoreTitle>{PAGE_TITLE}</StoreTitle>
|
|
17
|
+
<div aria-live="polite" className="text-xl font-medium text-left mb-[30px]">
|
|
18
|
+
{PAGE_TITLE}
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div className='flex flex-col gap-5'>
|
|
22
|
+
{
|
|
23
|
+
[...Array(5)].map(() => (
|
|
24
|
+
<Item />
|
|
25
|
+
))
|
|
26
|
+
}
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
)
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export default favoriteSeller
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import FavoriteSeller from './favoriteSeller'
|
|
2
|
+
import AccountLayout from '@riosst100/pwa-marketplace/src/components/AccountLayout';
|
|
3
|
+
|
|
4
|
+
import React from 'react'
|
|
5
|
+
|
|
6
|
+
const index = () => {
|
|
7
|
+
return (
|
|
8
|
+
<AccountLayout>
|
|
9
|
+
<FavoriteSeller />
|
|
10
|
+
</AccountLayout>
|
|
11
|
+
)
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export default index
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Form } from 'informed';
|
|
3
|
+
import Button from '@magento/venia-ui/lib/components/Button';
|
|
4
|
+
import Image from '@magento/venia-ui/lib/components/Image';
|
|
5
|
+
import Verify from '@riosst100/pwa-marketplace/src/components/CrossSeller/verifyIcon';
|
|
6
|
+
import Star from '@riosst100/pwa-marketplace/src/components/CrossSeller/starIcon';
|
|
7
|
+
import logoImage from '@riosst100/pwa-marketplace/src/components/CrossSeller/logo_seller.png';
|
|
8
|
+
import { Share, Trash } from 'iconsax-react';
|
|
9
|
+
import SocialShare from '@riosst100/pwa-marketplace/src/components/SocialMediaShare';
|
|
10
|
+
import { X } from 'react-feather';
|
|
11
|
+
import Modal from '@riosst100/pwa-marketplace/src/components/Modal';
|
|
12
|
+
import cn from 'classnames';
|
|
13
|
+
import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
|
|
14
|
+
import { FormattedMessage } from 'react-intl';
|
|
15
|
+
|
|
16
|
+
const item = () => {
|
|
17
|
+
const [open, setOpen] = React.useState(false);
|
|
18
|
+
|
|
19
|
+
const handleRemoveFromFavorite = () => {
|
|
20
|
+
alert('remove fav seller')
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const handleGoToSellerPage = () => {
|
|
24
|
+
alert('to seller page')
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<>
|
|
29
|
+
<Modal
|
|
30
|
+
open={open}
|
|
31
|
+
setOpen={setOpen}
|
|
32
|
+
className={cn(
|
|
33
|
+
'max-w-max !min-h-auto px-[30px] pt-[30px] pb-10',
|
|
34
|
+
)}
|
|
35
|
+
>
|
|
36
|
+
<div className='social_share-container flex flex-col gap-y-7'>
|
|
37
|
+
<div className='flex justify-between'>
|
|
38
|
+
<div className='text-lg font-medium'>
|
|
39
|
+
Share to your friends
|
|
40
|
+
</div>
|
|
41
|
+
<button onClick={() => { setOpen(!open) }} >
|
|
42
|
+
<X size={24} color={primary900} />
|
|
43
|
+
</button>
|
|
44
|
+
</div>
|
|
45
|
+
<div className='flex flex-row border border-gray-100 rounded-md px-5 py-2.5 gap-x-2.5 items-center'>
|
|
46
|
+
<div className='flex flex-col'>
|
|
47
|
+
<div className='text-[14px] font-normal'>
|
|
48
|
+
Zen Market.TCG
|
|
49
|
+
</div>
|
|
50
|
+
<div className='text-[12px] font-normal text-gray-200'>
|
|
51
|
+
zenmarket-tcg.link
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<SocialShare rootClassName="justify-center" />
|
|
56
|
+
</div>
|
|
57
|
+
</Modal>
|
|
58
|
+
<div className='border border-gray-100 rounded-md p-5 flex flex-col md_flex-row justify-between gap-y-4'>
|
|
59
|
+
<div className='seller_info-container flex flex-row gap-x-[15px]'>
|
|
60
|
+
<div className='logo_wrapper w-[100px] h-[100px]'>
|
|
61
|
+
<Image
|
|
62
|
+
alt='seller name'
|
|
63
|
+
className="relative mt-[-5px]"
|
|
64
|
+
src={logoImage}
|
|
65
|
+
/>
|
|
66
|
+
</div>
|
|
67
|
+
<div className='flex flex-col gap-y-[15px]'>
|
|
68
|
+
<div className='flex flex-col gap-[6px]'>
|
|
69
|
+
<div className='seller_summary-wrapper flex flex-row gap-x-2.5 items-center'>
|
|
70
|
+
<div className='seller_name text-lg font-medium leading-6'>
|
|
71
|
+
Zen Market
|
|
72
|
+
</div>
|
|
73
|
+
<div className='seller_badge flex flex-row gap-x-[5px] items-center leading-6'>
|
|
74
|
+
<Verify />
|
|
75
|
+
<span className='text-xs font-medium text-gray-600-transparent capitalize'>
|
|
76
|
+
Verified
|
|
77
|
+
</span>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
<div className='flex flex-row gap-x-[5px] items-center'>
|
|
81
|
+
<span className='font-normal text-[12px] text-gray-200 '>
|
|
82
|
+
Jurong West
|
|
83
|
+
</span>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
<div className='flex gap-4'>
|
|
87
|
+
<Button
|
|
88
|
+
classes={{
|
|
89
|
+
content: 'gap-1.5 grid-flow-col inline-grid items-center justify-center justify-items-center capitalize font-medium text-[14px]',
|
|
90
|
+
rootClass: 'py-[0px] h-9 hover_border-blue-700'
|
|
91
|
+
}}
|
|
92
|
+
onClick={handleGoToSellerPage}
|
|
93
|
+
>
|
|
94
|
+
<FormattedMessage
|
|
95
|
+
id={'favoriteSeller.visitStore'}
|
|
96
|
+
defaultMessage={'Visit Store'}
|
|
97
|
+
/>
|
|
98
|
+
</Button>
|
|
99
|
+
<div
|
|
100
|
+
className='flex items-center justify-center gap-[5px] p-[9px] relative rounded-[30px] overflow-hidden border border-solid border-blue-600 hover_border-blue-700 cursor-pointer w-9 h-9'
|
|
101
|
+
onClick={() => { setOpen(!open) }}
|
|
102
|
+
>
|
|
103
|
+
<Share
|
|
104
|
+
size="15"
|
|
105
|
+
className='text-blue-600 group-hover_text-blue-800 left-[-1px]'
|
|
106
|
+
/>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div className='flex flex-row justify-between md_justify-center items-center gap-5'>
|
|
112
|
+
<div className='flex flex-col gap-y-2'>
|
|
113
|
+
<div className='rating_sales flex flex-row gap-x-[5px] items-center'>
|
|
114
|
+
<Star width={18} height={18} />
|
|
115
|
+
<p className='font-medium text-[18px] text-gray-600'>
|
|
116
|
+
4.7
|
|
117
|
+
</p>
|
|
118
|
+
</div>
|
|
119
|
+
<span className='text-gray-800 text-xs'>
|
|
120
|
+
<FormattedMessage
|
|
121
|
+
id={'favoriteSeller.RatingAndReviews'}
|
|
122
|
+
defaultMessage={'Rating & Reviews'}
|
|
123
|
+
/>
|
|
124
|
+
</span>
|
|
125
|
+
|
|
126
|
+
</div>
|
|
127
|
+
<Button
|
|
128
|
+
data-cy="Product-Section-removeFavorite"
|
|
129
|
+
onClick={handleRemoveFromFavorite}
|
|
130
|
+
className="min-w-min border border-gray-200 rounded-full border-solid w-7 h-7 flex items-center justify-center hover_border-gray-600"
|
|
131
|
+
>
|
|
132
|
+
<Trash size="16" color="#999999" />
|
|
133
|
+
</Button>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
</>
|
|
137
|
+
)
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
export default item
|