@riosst100/pwa-marketplace 1.2.4 → 1.2.5
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 +1 -1
- package/src/componentOverrideMapping.js +2 -1
- package/src/components/Filter/index.js +7 -7
- package/src/components/OperatingHours/index.js +1 -0
- package/src/components/OperatingHours/operatingHours.js +32 -0
- package/src/components/Pagination/index.js +26 -17
- package/src/components/Search/index.js +1 -1
- package/src/components/Seller/seller.js +137 -46
- package/src/components/Seller/sellerAddressCard.js +48 -0
- package/src/components/SellerDetail/index.js +1 -0
- package/src/components/SellerDetail/sellerDetail.js +158 -0
- package/src/components/SellerInformation/sellerInformation.js +51 -26
- package/src/components/SellerLocation/sellerLocation.js +6 -2
- package/src/components/SellerLocation/sellerLocationItem.js +6 -8
- package/src/components/SellerProducts/sellerProducts.js +33 -12
- package/src/components/SellerReview/sellerReview.js +29 -29
- package/src/components/SellerReviewItem/sellerReviewItem.js +8 -8
- package/src/components/SortBy/index.js +13 -5
- package/src/components/commons/Tabs/index.js +11 -9
- package/src/overwrites/venia-ui/lib/components/Header/header.js +46 -34
- package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/MegaMenu.spec.js +91 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/MegaMenuItem.spec.js +123 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/Submenu.spec.js +61 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/SubmenuColumn.spec.js +50 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenu.spec.js.snap +114 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenuItem.spec.js.snap +71 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/Submenu.spec.js.snap +59 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/SubmenuColumn.spec.js.snap +34 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/index.js +1 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js +90 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.module.css +12 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.js +156 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.module.css +31 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.js +89 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css +43 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.js +99 -0
- package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.module.css +28 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/__stories__/searchBar.js +11 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/searchField.spec.js.snap +72 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedCategories.spec.js.snap +30 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedProduct.spec.js.snap +69 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedProducts.spec.js.snap +7 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestions.spec.js.snap +12 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/autocomplete.spec.js +52 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/searchBar.spec.js +82 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/searchField.spec.js +87 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedCategories.spec.js +45 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedProduct.spec.js +43 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedProducts.spec.js +45 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestions.spec.js +110 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.js +172 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.module.css +62 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/index.js +1 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.js +74 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.module.css +50 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/searchField.js +40 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategories.js +48 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategories.module.css +13 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategory.js +49 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategory.module.css +0 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProduct.js +97 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProduct.module.css +24 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProducts.js +43 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProducts.module.css +13 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/suggestions.js +75 -0
- package/src/overwrites/venia-ui/lib/components/SearchBar/suggestions.module.css +6 -0
- package/src/talons/Seller/seller.gql.js +70 -5
- package/src/talons/Seller/useSeller.js +6 -1
- package/src/talons/SellerProducts/useSellerProducts.js +129 -0
- package/src/theme/vars.js +7 -0
package/package.json
CHANGED
|
@@ -13,5 +13,6 @@ module.exports = componentOverrideMapping = {
|
|
|
13
13
|
[`@magento/peregrine/lib/talons/SignIn/signIn.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/signIn.gql.js',
|
|
14
14
|
[`@magento/peregrine/lib/talons/SignIn/useSignIn.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/useSignIn.js',
|
|
15
15
|
[`@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js',
|
|
16
|
-
[`@magento/peregrine/lib/util/deriveErrorMessage.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/util/deriveErrorMessage.js'
|
|
16
|
+
[`@magento/peregrine/lib/util/deriveErrorMessage.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/util/deriveErrorMessage.js',
|
|
17
|
+
[`@magento/venia-ui/lib/components/MegaMenu/megaMenu.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js',
|
|
17
18
|
};
|
|
@@ -13,7 +13,7 @@ const CatalogFilter = () => {
|
|
|
13
13
|
</div>
|
|
14
14
|
<div class="inline-flex flex-col items-start gap-[10px] bg-white relative flex-[0_0_auto]">
|
|
15
15
|
<div class="flex-col justify-center inline-flex items-center relative flex-[0_0_auto]">
|
|
16
|
-
<div class="flex w-
|
|
16
|
+
<div class="flex w-full cursor-pointer items-center justify-between p-[10px] relative flex-[0_0_auto] bg-white">
|
|
17
17
|
<div class="relative w-fit font-semibold text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Category</div>
|
|
18
18
|
<ArrowSquareUp color="#292D32" size={14} variant="Outline" />
|
|
19
19
|
</div>
|
|
@@ -21,26 +21,26 @@ const CatalogFilter = () => {
|
|
|
21
21
|
<div class="inline-flex flex-col items-start gap-[15px] p-[10px] relative flex-[0_0_auto] bg-white">
|
|
22
22
|
<div class="flex flex-col w-[220px] items-start gap-[12px] relative flex-[0_0_auto]">
|
|
23
23
|
<div class="gap-[8px] inline-flex items-center relative flex-[0_0_auto]">
|
|
24
|
-
<
|
|
24
|
+
<input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
|
|
25
25
|
<div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Action figures</div>
|
|
26
26
|
</div>
|
|
27
27
|
<div class="inline-flex items-center gap-[8px] relative flex-[0_0_auto]">
|
|
28
|
-
<
|
|
28
|
+
<input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
|
|
29
29
|
<div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Gundam</div>
|
|
30
30
|
</div>
|
|
31
31
|
<div class="gap-[8px] inline-flex items-center relative flex-[0_0_auto]">
|
|
32
|
-
<
|
|
32
|
+
<input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
|
|
33
33
|
<div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Puzzles</div>
|
|
34
34
|
</div>
|
|
35
35
|
<div class="inline-flex items-center gap-[8px] relative flex-[0_0_auto]">
|
|
36
|
-
<
|
|
36
|
+
<input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
|
|
37
37
|
<div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Japan Culture</div>
|
|
38
38
|
</div>
|
|
39
39
|
<div class="inline-flex items-center gap-[8px] relative flex-[0_0_auto]">
|
|
40
|
-
<
|
|
40
|
+
<input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
|
|
41
41
|
<div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Sci-fi</div>
|
|
42
42
|
</div>
|
|
43
|
-
<div class="relative w-fit font-normal text-[#009a7b] text-[12px] tracking-[0] leading-[14px] underline whitespace-nowrap">Show More</div>
|
|
43
|
+
<div class="relative w-fit font-normal text-[#009a7b] text-[12px] tracking-[0] leading-[14px] underline whitespace-nowrap cursor-pointer">Show More</div>
|
|
44
44
|
</div>
|
|
45
45
|
</div>
|
|
46
46
|
</div>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './operatingHours';
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const OperatingHours = ({ values }) => {
|
|
4
|
+
return <>
|
|
5
|
+
<table>
|
|
6
|
+
{values ? <Hours values={values} /> : ''}
|
|
7
|
+
</table>
|
|
8
|
+
</>
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const Hours = ({ values }) => {
|
|
12
|
+
return values && values.map((value, index) =>
|
|
13
|
+
<>
|
|
14
|
+
<tr>
|
|
15
|
+
<td>{value.day}</td>
|
|
16
|
+
<td>
|
|
17
|
+
{value.status == "open" && value.time ? <Time times={value.time} /> : <tr><td>Closed</td></tr>}
|
|
18
|
+
</td>
|
|
19
|
+
</tr>
|
|
20
|
+
</>)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const Time = ({ times }) => {
|
|
24
|
+
return times ? times.map((value, index) =>
|
|
25
|
+
<>
|
|
26
|
+
<tr>
|
|
27
|
+
<td>{value.opening_time} - {value.closing_time}</td>
|
|
28
|
+
</tr>
|
|
29
|
+
</>) : ''
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export default OperatingHours;
|
|
@@ -1,38 +1,47 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
|
|
2
3
|
|
|
3
4
|
const Pagination = () => {
|
|
4
5
|
return (
|
|
5
6
|
<>
|
|
6
7
|
<div className={'inline-flex items-start gap-[10px] relative'}>
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
<button className="inline-flex flex-col items-center justify-center gap-[10px] px-3 py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
|
|
9
|
+
<div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
|
|
10
|
+
<ArrowLeft2 size="16" color="#6243fa" variant="Outline" />
|
|
11
|
+
</div>
|
|
12
|
+
</button>
|
|
13
|
+
<button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
|
|
14
|
+
<div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
|
|
10
15
|
1
|
|
11
16
|
</div>
|
|
12
|
-
</
|
|
13
|
-
<
|
|
14
|
-
<div className="relative w-fit
|
|
17
|
+
</button>
|
|
18
|
+
<button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
|
|
19
|
+
<div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
|
|
15
20
|
2
|
|
16
21
|
</div>
|
|
17
|
-
</
|
|
18
|
-
<
|
|
22
|
+
</button>
|
|
23
|
+
<button
|
|
19
24
|
className={'inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-[#6243fa] rounded-[5px] border border-solid border-[#6243fa]'}
|
|
20
25
|
>
|
|
21
|
-
<div className="relative w-fit
|
|
26
|
+
<div className="relative w-fit font-normal text-white text-[16px] tracking-[0] leading-none whitespace-nowrap">
|
|
22
27
|
3
|
|
23
28
|
</div>
|
|
24
|
-
</
|
|
25
|
-
<
|
|
26
|
-
<div className="relative w-fit
|
|
29
|
+
</button>
|
|
30
|
+
<button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
|
|
31
|
+
<div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
|
|
27
32
|
4
|
|
28
33
|
</div>
|
|
29
|
-
</
|
|
30
|
-
<
|
|
31
|
-
<div className="relative w-fit
|
|
34
|
+
</button>
|
|
35
|
+
<button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
|
|
36
|
+
<div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
|
|
32
37
|
5
|
|
33
38
|
</div>
|
|
34
|
-
</
|
|
35
|
-
<
|
|
39
|
+
</button>
|
|
40
|
+
<button className="inline-flex flex-col items-center justify-center gap-[10px] px-3 py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
|
|
41
|
+
<div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
|
|
42
|
+
<ArrowRight2 size="16" color="#6243fa" variant="Outline" />
|
|
43
|
+
</div>
|
|
44
|
+
</button>
|
|
36
45
|
</div>
|
|
37
46
|
</>
|
|
38
47
|
)
|
|
@@ -4,7 +4,7 @@ import { SearchNormal } from 'iconsax-react';
|
|
|
4
4
|
const Search = () => {
|
|
5
5
|
return (
|
|
6
6
|
<>
|
|
7
|
-
<div class="flex w-[600px]
|
|
7
|
+
<div class="flex items-center xs_w-full xl_max-w-[600px] gap-[20px] px-[15px] py-[12px] relative bg-white rounded-[30px] border border-solid border-gray-100">
|
|
8
8
|
<div class="flex items-center gap-[10px] relative flex-1 self-stretch grow">
|
|
9
9
|
<input className='flex-1 leading-[18px]' placeholder='Search...' />
|
|
10
10
|
</div>
|
|
@@ -4,6 +4,7 @@ import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSelle
|
|
|
4
4
|
import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
|
|
5
5
|
import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
|
|
6
6
|
import mapSeller from '@riosst100/pwa-marketplace/src/util/mapSeller';
|
|
7
|
+
// import SellerDetail from '@riosst100/pwa-marketplace/src/components/SellerDetail';
|
|
7
8
|
import Slider from '@riosst100/pwa-marketplace/src/components/commons/Slider';
|
|
8
9
|
import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
|
|
9
10
|
import SellerProducts from '../SellerProducts';
|
|
@@ -17,6 +18,7 @@ import {
|
|
|
17
18
|
Share,
|
|
18
19
|
BoxTick,
|
|
19
20
|
Star1,
|
|
21
|
+
Shop,
|
|
20
22
|
} from 'iconsax-react';
|
|
21
23
|
|
|
22
24
|
const Seller = props => {
|
|
@@ -28,7 +30,7 @@ const Seller = props => {
|
|
|
28
30
|
|
|
29
31
|
if (loading && !seller)
|
|
30
32
|
return '';
|
|
31
|
-
|
|
33
|
+
// return <SellerShimmer />;
|
|
32
34
|
if (error && !seller) return <ErrorView />;
|
|
33
35
|
if (!seller) {
|
|
34
36
|
return (
|
|
@@ -47,44 +49,52 @@ const Seller = props => {
|
|
|
47
49
|
<Fragment>
|
|
48
50
|
<StoreTitle>{seller.name}</StoreTitle>
|
|
49
51
|
<Meta name="description" content={seller.description} />
|
|
50
|
-
<SellerDetail seller={seller} />
|
|
52
|
+
{seller && <SellerDetail seller={seller} />}
|
|
51
53
|
</Fragment>
|
|
52
54
|
);
|
|
53
55
|
};
|
|
54
56
|
|
|
55
57
|
const SellerDetail = ({ seller }) => {
|
|
58
|
+
console.log("🚀 ~ SellerDetail ~ seller:", seller)
|
|
56
59
|
const dataTabs =
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
60
|
+
[
|
|
61
|
+
{
|
|
62
|
+
id: 'product-tab',
|
|
63
|
+
title: 'All Products',
|
|
64
|
+
content: <SellerProducts />
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
id: 'store-information',
|
|
68
|
+
title: 'Store Information',
|
|
69
|
+
content: <SellerInformation seller={seller} />
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
id: 'reviews',
|
|
73
|
+
title: 'Reviews',
|
|
74
|
+
content: <Reviews />
|
|
75
|
+
}
|
|
76
|
+
];
|
|
74
77
|
|
|
75
78
|
return (
|
|
76
|
-
<div className='py-8'>
|
|
79
|
+
<div className=' py-8'>
|
|
77
80
|
<Slider seller={seller} rootClassname='mb-[30px]' />
|
|
78
|
-
<div className='flex
|
|
79
|
-
<div className='
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
<div className='flex xs_flex-col md_flex-row xs_items-center md_item-start lg_flex-row justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-gray-100 shadow-[0px_0px_5px_3px_#d9d9d933]'>
|
|
82
|
+
<div className='flex xs_flex-col md_flex-row xs_items-center md_items-start items-start gap-[15px] relative'>
|
|
83
|
+
{seller?.thumbnail ? (
|
|
84
|
+
<img className="relative w-[100px] h-[100px] object-cover border border-gray-100 rounded-radius1" alt="Rectangle" src={seller ? seller.thumbnail : ''} />
|
|
85
|
+
) : (
|
|
86
|
+
<div className='flex items-center justify-center bg-gray-300 border rounded-radius1 relative w-[100px] h-[100px]'>
|
|
87
|
+
<Shop size="48" color="#F2F2F2" variant="Outline" />
|
|
88
|
+
</div>
|
|
89
|
+
)}
|
|
90
|
+
|
|
91
|
+
<div className='flex flex-col xs_items-center md_items-start justify-between relative gap-y-[18px]'>
|
|
92
|
+
<div className='flex flex-col xs_items-center md_items-start gap-[6px] relative'>
|
|
93
|
+
<div className="gap-x-[10px] gap-y-1 flex xs_flex-col md_flex-row xs_items-center md_items-start relative">
|
|
94
|
+
<div className="relative w-fit mt-[-1.00px] font-semibold text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
|
|
85
95
|
{seller ? seller.name : ''}
|
|
86
96
|
</div>
|
|
87
|
-
<div className="
|
|
97
|
+
<div className="flex items-center gap-[5px] relative">
|
|
88
98
|
<Verify variant='Bold' color='#4E31DB' size={20} />
|
|
89
99
|
<div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
90
100
|
Verified
|
|
@@ -95,35 +105,35 @@ const SellerDetail = ({ seller }) => {
|
|
|
95
105
|
Jurong west
|
|
96
106
|
</div>
|
|
97
107
|
</div>
|
|
98
|
-
<div className='
|
|
99
|
-
<
|
|
100
|
-
<div class="
|
|
108
|
+
<div className='flex flex-wrap items-start gap-4 relative'>
|
|
109
|
+
<button class="flex items-center justify-center gap-[5px] xs_p-[11px] lg_px-[20px] lg_py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
|
|
110
|
+
<div class="flex items-center justify-center gap-[10px] relative">
|
|
101
111
|
<Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
|
|
102
|
-
<div class="relative w-fit
|
|
112
|
+
<div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
|
|
103
113
|
Message
|
|
104
114
|
</div>
|
|
105
115
|
</div>
|
|
106
|
-
</
|
|
107
|
-
<
|
|
108
|
-
<div class="
|
|
116
|
+
</button>
|
|
117
|
+
<button class="flex items-center justify-center gap-[5px] xs_p-[11px] lg_px-[20px] lg_py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
|
|
118
|
+
<div class="flex items-center justify-center gap-[10px] relative">
|
|
109
119
|
<Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
|
|
110
|
-
<div class="relative w-fit
|
|
120
|
+
<div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
|
|
111
121
|
Chat With Seller
|
|
112
122
|
</div>
|
|
113
123
|
</div>
|
|
114
|
-
</
|
|
115
|
-
<
|
|
124
|
+
</button>
|
|
125
|
+
<button class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
|
|
116
126
|
<Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
|
|
117
|
-
</
|
|
118
|
-
<
|
|
127
|
+
</button>
|
|
128
|
+
<button class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
|
|
119
129
|
<Share color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
|
|
120
|
-
</
|
|
130
|
+
</button>
|
|
121
131
|
</div>
|
|
122
132
|
</div>
|
|
123
133
|
</div>
|
|
124
|
-
<div class="
|
|
125
|
-
<div class="
|
|
126
|
-
<div class="
|
|
134
|
+
<div class="flex items-center gap-[20px] px-[10px] py-[30px] relative">
|
|
135
|
+
<div class="flex flex-col items-center justify-center gap-[9px] p-[10px] relative">
|
|
136
|
+
<div class="flex items-center gap-[6px] relative">
|
|
127
137
|
<BoxTick color="#B9AEC5" variant="Outline" size={18} className='stroke-[#B9AEC5] stroke-[.5px]' />
|
|
128
138
|
<div class="[font-family:'Noto_Sans',Helvetica] font-semibold text-[#005947] text-[18px] relative w-fit tracking-[0] leading-[normal] whitespace-nowrap">
|
|
129
139
|
121
|
|
@@ -134,8 +144,8 @@ const SellerDetail = ({ seller }) => {
|
|
|
134
144
|
</div>
|
|
135
145
|
</div>
|
|
136
146
|
<img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" />
|
|
137
|
-
<div class="
|
|
138
|
-
<div class="
|
|
147
|
+
<div class="flex flex-col items-center justify-center gap-[9px] p-[10px] relative">
|
|
148
|
+
<div class="flex items-center gap-[5px] relative">
|
|
139
149
|
<Star1 color='#F7C317' size={18} className='fill-[#F7C317]' />
|
|
140
150
|
<div class="relative self-stretch w-[25px] mt-[-1.00px] font-bold text-[#005947] text-[18px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
141
151
|
4.7
|
|
@@ -151,8 +161,89 @@ const SellerDetail = ({ seller }) => {
|
|
|
151
161
|
data={dataTabs}
|
|
152
162
|
tabContentWrapperClassName='!p-0'
|
|
153
163
|
hasContent
|
|
164
|
+
tabWrapperClassName='xl_gap-x-[60px]'
|
|
154
165
|
/>
|
|
155
166
|
</div>
|
|
167
|
+
// <div className='py-8'>
|
|
168
|
+
// <Slider seller={seller} rootClassname='mb-[30px]' />
|
|
169
|
+
// <div className='flex items-center justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-[#e6e9ea] shadow-[0px_0px_5px_3px_#d9d9d933]'>
|
|
170
|
+
// <div className='inline-flex items-center gap-[15px] relative flex-[0_0_auto]'>
|
|
171
|
+
// <img className="relative w-[100px] h-[100px] object-cover" alt="Rectangle" src={seller ? seller.thumbnail : ''} />
|
|
172
|
+
// <div className='inline-flex flex-col h-[100px] items-start justify-between relative flex-[0_0_auto]'>
|
|
173
|
+
// <div className='inline-flex flex-col items-start gap-[6px] relative flex-[0_0_auto]'>
|
|
174
|
+
// <div className="items-center gap-[10px] inline-flex relative flex-[0_0_auto]">
|
|
175
|
+
// <div className="relative w-fit mt-[-1.00px] font-semibold text-[#1b1b1b] text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
|
|
176
|
+
// {seller ? seller.name : ''}
|
|
177
|
+
// </div>
|
|
178
|
+
// <div className="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
|
|
179
|
+
// <Verify variant='Bold' color='#4E31DB' size={20} />
|
|
180
|
+
// <div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
181
|
+
// Verified
|
|
182
|
+
// </div>
|
|
183
|
+
// </div>
|
|
184
|
+
// </div>
|
|
185
|
+
// <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
|
|
186
|
+
// Jurong west
|
|
187
|
+
// </div>
|
|
188
|
+
// </div>
|
|
189
|
+
// <div className='inline-flex items-start gap-[15px] relative flex-[0_0_auto]'>
|
|
190
|
+
// <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
|
|
191
|
+
// <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
|
|
192
|
+
// <Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
|
|
193
|
+
// <div class="relative w-fit mt-[-1.00px] font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
|
|
194
|
+
// Message
|
|
195
|
+
// </div>
|
|
196
|
+
// </div>
|
|
197
|
+
// </div>
|
|
198
|
+
// <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
|
|
199
|
+
// <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
|
|
200
|
+
// <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
|
|
201
|
+
// <div class="relative w-fit mt-[-1.00px] font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
|
|
202
|
+
// Chat With Seller
|
|
203
|
+
// </div>
|
|
204
|
+
// </div>
|
|
205
|
+
// </div>
|
|
206
|
+
// <div class="inline-flex items-center justify-center gap-[5px] p-[11px] relative flex-[0_0_auto] bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
|
|
207
|
+
// <Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
|
|
208
|
+
// </div>
|
|
209
|
+
// <div class="inline-flex items-center justify-center gap-[5px] p-[11px] relative flex-[0_0_auto] bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
|
|
210
|
+
// <Share color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
|
|
211
|
+
// </div>
|
|
212
|
+
// </div>
|
|
213
|
+
// </div>
|
|
214
|
+
// </div>
|
|
215
|
+
// <div class="inline-flex items-center gap-[20px] px-[10px] py-[30px] relative flex-[0_0_auto]">
|
|
216
|
+
// <div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
|
|
217
|
+
// <div class="inline-flex items-center gap-[6px] relative flex-[0_0_auto]">
|
|
218
|
+
// <BoxTick color="#B9AEC5" variant="Outline" size={18} className='stroke-[#B9AEC5] stroke-[.5px]' />
|
|
219
|
+
// <div class="[font-family:'Noto_Sans',Helvetica] font-semibold text-[#005947] text-[18px] relative w-fit tracking-[0] leading-[normal] whitespace-nowrap">
|
|
220
|
+
// 121
|
|
221
|
+
// </div>
|
|
222
|
+
// </div>
|
|
223
|
+
// <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
224
|
+
// Total Sales
|
|
225
|
+
// </div>
|
|
226
|
+
// </div>
|
|
227
|
+
// <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" />
|
|
228
|
+
// <div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
|
|
229
|
+
// <div class="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
|
|
230
|
+
// <Star1 color='#F7C317' size={18} className='fill-[#F7C317]' />
|
|
231
|
+
// <div class="relative self-stretch w-[25px] mt-[-1.00px] font-bold text-[#005947] text-[18px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
232
|
+
// 4.7
|
|
233
|
+
// </div>
|
|
234
|
+
// </div>
|
|
235
|
+
// <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
236
|
+
// Rating & Reviews
|
|
237
|
+
// </div>
|
|
238
|
+
// </div>
|
|
239
|
+
// </div>
|
|
240
|
+
// </div>
|
|
241
|
+
// <Tabs
|
|
242
|
+
// data={dataTabs}
|
|
243
|
+
// tabContentWrapperClassName='!p-0'
|
|
244
|
+
// hasContent
|
|
245
|
+
// />
|
|
246
|
+
// </div>
|
|
156
247
|
)
|
|
157
248
|
}
|
|
158
249
|
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useStyle } from '@magento/venia-ui/lib/classify';
|
|
3
|
+
import defaultClasses from '@magento/venia-ui/lib/components/AddressBookPage/addressCard.module.css';
|
|
4
|
+
|
|
5
|
+
const SellerAddressCard = ({ address }) => {
|
|
6
|
+
const {
|
|
7
|
+
address_line_1,
|
|
8
|
+
address_line_2,
|
|
9
|
+
city,
|
|
10
|
+
country,
|
|
11
|
+
postcode,
|
|
12
|
+
region
|
|
13
|
+
} = address;
|
|
14
|
+
|
|
15
|
+
const classes = useStyle(defaultClasses, null);
|
|
16
|
+
|
|
17
|
+
// const nameString = [firstname, middlename, lastname]
|
|
18
|
+
// .filter(name => !!name)
|
|
19
|
+
// .join(' ');
|
|
20
|
+
|
|
21
|
+
let additionalAddressString = `${city || ''}`;
|
|
22
|
+
|
|
23
|
+
if (region || postcode) {
|
|
24
|
+
additionalAddressString += `, ${region || ''} ${postcode || ''}`;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<div
|
|
29
|
+
className={classes.contentContainer}
|
|
30
|
+
data-cy="addressCard-contentContainer"
|
|
31
|
+
>
|
|
32
|
+
<span className={classes.streetRow}>
|
|
33
|
+
{address_line_1 || ''}
|
|
34
|
+
</span>
|
|
35
|
+
<span className={classes.streetRow}>
|
|
36
|
+
{address_line_2 || ''}
|
|
37
|
+
</span>
|
|
38
|
+
<span className={classes.additionalAddress}>
|
|
39
|
+
{additionalAddressString || ''}
|
|
40
|
+
</span>
|
|
41
|
+
<span className={classes.country}>
|
|
42
|
+
{country || ''}
|
|
43
|
+
</span>
|
|
44
|
+
</div>
|
|
45
|
+
);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export default SellerAddressCard;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './sellerDetail';
|