Skip to content

Commit 913eb84

Browse files
kamilkieres09kamilkieres09
authored
Merge pull request #236 from mercurjs/fix/mm2-1696/seller-logo-shrinking-pdp
MM2-1696 Fix: seller logo shrinking on PDP and design fixes for seller section
2 parents 326164b + eab2a67 commit 913eb84

File tree

10 files changed

+153
-72
lines changed

10 files changed

+153
-72
lines changed

‎src/components/cells/ProductDetailsSeller/ProductDetailsSeller.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import LocalizedClientLink from "@/components/molecules/LocalizedLink/LocalizedLink"
2-
import { CollapseIcon } from "@/icons"
31
import { SellerInfo } from "@/components/molecules"
42
import { SellerProps } from "@/types/seller"
53

@@ -8,13 +6,10 @@ export const ProductDetailsSeller = ({ seller }: { seller?: SellerProps }) => {
86

97
return (
108
<div className="border rounded-sm">
11-
<div className="p-4">
12-
<LocalizedClientLink href={`/sellers/${seller.handle}`}>
9+
<div>
1310
<div className="flex justify-between">
14-
<SellerInfo seller={seller} />
15-
<CollapseIcon className="-rotate-90" />
11+
<SellerInfo seller={seller} showArrow bottomBorder />
1612
</div>
17-
</LocalizedClientLink>
1813
</div>
1914
</div>
2015
)

‎src/components/cells/SellerAvatar/SellerAvatar.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,17 @@ export const SellerAvatar = ({
1515
alt={alt}
1616
width={size}
1717
height={size}
18-
style={{ width: size, height: size }}
18+
className="shrink-0"
19+
style={{ maxWidth: size, maxHeight: size }}
1920
/>
2021
) : (
2122
<Image
2223
src="/images/placeholder.svg"
2324
alt={alt}
24-
className="opacity-30 w-8 h-8"
25+
className="opacity-30 w-8 h-8 shrink-0"
2526
width={32}
2627
height={32}
28+
style={{ maxWidth: 32, maxHeight: 32 }}
2729
/>
2830
)
2931
}

‎src/components/molecules/SellerInfo/SellerInfo.tsx‎

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1-
import { StarRating } from "@/components/atoms"
2-
import { SellerAvatar } from "@/components/cells/SellerAvatar/SellerAvatar"
31
import { SellerProps } from "@/types/seller"
42
import { SellerReview } from "../SellerReview/SellerReview"
3+
import LocalizedClientLink from "../LocalizedLink/LocalizedLink"
4+
import { SellerInfoHeader } from "../SellerInfoHeader/SellerInfoHeader"
55

66
export const SellerInfo = ({
77
seller,
88
header = false,
9+
showArrow = false,
10+
bottomBorder = false,
911
}: {
1012
seller: SellerProps
1113
header?: boolean
14+
showArrow?: boolean
15+
bottomBorder?: boolean
1216
}) => {
1317
const { photo, name, reviews } = seller
1418

@@ -24,26 +28,39 @@ export const SellerInfo = ({
2428
: 0
2529

2630
return (
27-
<div className="flex gap-4 w-full">
28-
<div className="relative h-12 w-12 overflow-hidden rounded-sm">
29-
<SellerAvatar photo={photo} size={56} alt={name} />
30-
</div>
31-
<div className="w-[90%]">
32-
<h3 className="heading-sm text-primary">{name}</h3>
33-
<div className="flex items-center gap-2 border-b pb-4">
34-
<StarRating starSize={16} rate={rating || 0} />
35-
<span className="text-md text-secondary">{reviewCount} reviews</span>
31+
<div className="flex flex-col w-full">
32+
{showArrow ? (
33+
<LocalizedClientLink href={`/sellers/${seller.handle}`} aria-label={`View ${name} seller`}>
34+
<SellerInfoHeader
35+
photo={photo}
36+
name={name}
37+
rating={rating}
38+
reviewCount={reviewCount}
39+
showArrow={showArrow}
40+
bottomBorder={bottomBorder}
41+
/>
42+
</LocalizedClientLink>
43+
) : (
44+
<SellerInfoHeader
45+
photo={photo}
46+
name={name}
47+
rating={rating}
48+
reviewCount={reviewCount}
49+
showArrow={showArrow}
50+
bottomBorder={bottomBorder}
51+
/>
52+
)}
53+
{!header && (
54+
<div className="flex flex-col gap-5 p-4">
55+
<h3 className="heading-sm uppercase">Seller reviews</h3>
56+
{reviews
57+
?.filter((rev) => rev !== null)
58+
.slice(-3)
59+
.map((review) => (
60+
<SellerReview key={review.id} review={review} />
61+
))}
3662
</div>
37-
<div className="mt-4">
38-
{!header &&
39-
reviews
40-
?.filter((rev) => rev !== null)
41-
.slice(-3)
42-
.map((review) => (
43-
<SellerReview key={review.id} review={review} />
44-
))}
45-
</div>
46-
</div>
63+
)}
4764
</div>
4865
)
4966
}

‎src/components/molecules/SellerInfoHeader/SellerInfoHeader.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { StarRating } from "@/components/atoms"
2+
import { SellerAvatar } from "@/components/cells/SellerAvatar/SellerAvatar"
3+
import { CollapseIcon } from "@/icons"
4+
import clsx from "clsx"
5+
6+
export const SellerInfoHeader = ({
7+
photo,
8+
name,
9+
rating,
10+
reviewCount,
11+
showArrow,
12+
bottomBorder = false,
13+
}: {
14+
photo: string
15+
name: string
16+
rating: number
17+
reviewCount: number
18+
showArrow: boolean
19+
bottomBorder?: boolean
20+
}) => (
21+
<div
22+
className={clsx(
23+
"flex gap-4 w-full p-5 items-center",
24+
bottomBorder && "border-b"
25+
)}
26+
>
27+
<div className="rounded-sm">
28+
<SellerAvatar photo={photo} size={56} alt={name} />
29+
</div>
30+
<div className="flex flex-col gap-1">
31+
<h3 className="heading-sm text-primary">{name}</h3>
32+
<div className="flex items-center gap-2">
33+
<StarRating starSize={14} rate={rating || 0} />
34+
<span className="label-md text-secondary">{reviewCount} reviews</span>
35+
</div>
36+
</div>
37+
{showArrow && <CollapseIcon className="ml-auto -rotate-90" />}
38+
</div>
39+
)

‎src/components/molecules/SellerReview/SellerReview.tsx‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,53 @@
11
import { StarRating } from "@/components/atoms"
22
import { SingleProductReview } from "@/types/product"
33
import { Divider } from "@medusajs/ui"
4+
import clsx from "clsx"
45
import { formatDistanceToNow } from "date-fns"
56

67
export const SellerReview = ({ review }: { review: SingleProductReview }) => {
78
return (
8-
<div className="mb-4 border-b pb-4 flex gap-4">
9-
<div className="mb-4 w-1/6 items-center">
10-
<p className="label-md text-secondary mb-2 truncate">
11-
{review.customer.first_name} {review.customer.last_name}
12-
</p>
13-
<StarRating starSize={12} rate={Number(review.rating.toFixed(1))} />
14-
<p className="text-sm text-secondary mt-2">
15-
{formatDistanceToNow(new Date(review.created_at), {
16-
addSuffix: true,
17-
})}
18-
</p>
9+
<div className={clsx("gap-2 flex flex-col justify-center", review.seller_note && "border-b pb-4 mb-4")}>
10+
<div className="items-center flex gap-3">
11+
<StarRating starSize={14} rate={Number(review.rating.toFixed(1))} />
12+
<div className="flex gap-2 items-center">
13+
<p className="label-md text-primary truncate">
14+
{review.customer.first_name} {review.customer.last_name}
15+
</p>
16+
<Divider
17+
orientation="vertical"
18+
className="h-[10px] border-disabled"
19+
/>
20+
<p className="label-md text-secondary">
21+
{formatDistanceToNow(new Date(review.created_at), {
22+
addSuffix: true,
23+
})}
24+
</p>
25+
</div>
1926
</div>
2027
<div className="w-5/6">
21-
<p className="text-md whitespace-pre-line break-words">
28+
<p className="text-md whitespace-pre-line break-words text-primary">
2229
{review.customer_note}
2330
</p>
2431
{review.seller_note && (
25-
<div className="mt-4 flex gap-4 relative">
32+
<div className="mt-4 flex gap-4">
2633
<Divider orientation="vertical" className="h-auto" />
27-
<div>
28-
<p className="label-md text-primary">
29-
Reply from {review.seller.name}{" "}
30-
<span className="text-secondary">
31-
|{" "}
34+
<div className="flex flex-col gap-2">
35+
<div className="flex gap-2 items-center">
36+
<p className="label-md text-primary">
37+
Reply from {review.seller.name}
38+
</p>
39+
<Divider
40+
orientation="vertical"
41+
className="h-[10px] border-disabled"
42+
/>
43+
44+
<p className="label-md text-secondary">
3245
{formatDistanceToNow(new Date(review.updated_at), {
3346
addSuffix: true,
3447
})}
35-
</span>
36-
</p>
37-
<p className="label-sm mt-2">{review.seller_note}</p>
48+
</p>
49+
</div>
50+
<p className="label-sm">{review.seller_note}</p>
3851
</div>
3952
</div>
4053
)}

‎src/components/molecules/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { ProductCarouselIndicator } from "./ProductCarouselIndicator/ProductCaro
1313
import { Modal } from "./Modal/Modal"
1414
import { ReportListingForm } from "./ReportListingForm/ReportListingForm"
1515
import { SellerInfo } from "./SellerInfo/SellerInfo"
16+
import { SellerInfoHeader } from "./SellerInfoHeader/SellerInfoHeader"
1617
import { TabsList } from "./TabsList/TabsList"
1718
import { TabsContent } from "./TabsContent/TabsContent"
1819
import { SellerScore } from "./SellerScore/SellerScore"
@@ -49,6 +50,7 @@ export {
4950
Modal,
5051
ReportListingForm,
5152
SellerInfo,
53+
SellerInfoHeader,
5254
TabsList,
5355
TabsContent,
5456
SellerScore,

‎src/components/organisms/Chat/Chat.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ export const Chat = ({
1818
product,
1919
subject,
2020
order_id,
21+
variant = "tonal",
22+
buttonSize = "small",
2123
}: {
2224
user: HttpTypes.StoreCustomer | null
2325
seller: SellerProps
@@ -26,6 +28,8 @@ export const Chat = ({
2628
product?: HttpTypes.StoreProduct
2729
subject?: string
2830
order_id?: string
31+
variant?: "tonal" | "filled"
32+
buttonSize?: "small" | "large"
2933
}) => {
3034
const [modal, setModal] = useState(false)
3135

@@ -36,9 +40,10 @@ export const Chat = ({
3640
return (
3741
<>
3842
<Button
39-
variant="tonal"
43+
variant={variant}
4044
onClick={() => setModal(true)}
4145
className={buttonClassNames}
46+
size={buttonSize}
4247
>
4348
{icon ? <MessageIcon size={20} /> : "Write to seller"}
4449
</Button>

‎src/components/organisms/SellerFooter/SellerFooter.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { useState } from "react"
1010
export const SellerFooter = ({ seller }: { seller: SellerProps }) => {
1111
const [openModal, setOpenModal] = useState(false)
1212
return (
13-
<div className="flex justify-between items-center flex-col lg:flex-row">
13+
<div className="flex justify-between items-center flex-col lg:flex-row p-5">
1414
<div className="flex gap-2 lg:gap-4 items-center label-sm lg:label-md text-secondary mb-4 lg:mb-0 justify-between w-full lg:justify-start lg:w-auto">
1515
{/* {seller.verified && (
1616
<div className="flex items-center gap-2">
@@ -29,7 +29,7 @@ export const SellerFooter = ({ seller }: { seller: SellerProps }) => {
2929
className="uppercase"
3030
onClick={() => setOpenModal(true)}
3131
>
32-
Report
32+
Report Seller
3333
</Button>
3434
{openModal && (
3535
<Modal heading="Report seller" onClose={() => setOpenModal(false)}>

‎src/components/organisms/SellerHeading/SellerHeading.tsx‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { SellerInfo } from "@/components/molecules"
22
import { SellerProps } from "@/types/seller"
33
import { Chat } from "../Chat/Chat"
44
import { HttpTypes } from "@medusajs/types"
5+
import { Button } from "@medusajs/ui"
56

67
export const SellerHeading = ({
78
seller,
@@ -13,18 +14,31 @@ export const SellerHeading = ({
1314
user: HttpTypes.StoreCustomer | null
1415
}) => {
1516
return (
16-
<div className="flex justify-between flex-col lg:flex-row">
17-
<SellerInfo header seller={seller} />
18-
{user && (
19-
<div className="flex items-center gap-2 mt-4 lg:mt-0">
20-
<Chat
21-
user={user}
22-
seller={seller}
23-
icon
24-
buttonClassNames="w-10 h-10 flex justify-center items-center p-0"
25-
/>
17+
<div className="border-b">
18+
<div className="flex flex-col md:flex-row justify-between">
19+
<div>
20+
<SellerInfo header={header} seller={seller} />
2621
</div>
27-
)}
22+
{user && (
23+
<div className="flex gap-2 md:mt-0 p-5 md:ml-auto">
24+
<Chat
25+
user={user}
26+
seller={seller}
27+
buttonClassNames="uppercase h-10"
28+
variant="filled"
29+
buttonSize="small"
30+
/>
31+
</div>
32+
)}
33+
</div>
34+
<div className="px-5 pb-5">
35+
<p
36+
dangerouslySetInnerHTML={{
37+
__html: seller.description,
38+
}}
39+
className="label-md"
40+
/>
41+
</div>
2842
</div>
2943
)
3044
}

‎src/components/sections/SellerPageHeader/SellerPageHeader.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,8 @@ export const SellerPageHeader = ({
1111
user: HttpTypes.StoreCustomer | null
1212
}) => {
1313
return (
14-
<div className="border rounded-sm p-4">
14+
<div className="border rounded-sm">
1515
<SellerHeading header seller={seller} user={user} />
16-
<p
17-
dangerouslySetInnerHTML={{
18-
__html: seller.description,
19-
}}
20-
className="label-md my-5"
21-
/>
2216
<SellerFooter seller={seller} />
2317
</div>
2418
)

0 commit comments

Comments
 (0)