69 lines
2.2 KiB
JavaScript
69 lines
2.2 KiB
JavaScript
import {
|
|
EmptyState,
|
|
ResourceList,
|
|
ResourceItem,
|
|
InlineStack,
|
|
Avatar,
|
|
BlockStack,
|
|
Text,
|
|
Badge
|
|
} from "@shopify/polaris";
|
|
|
|
export function ReviewList({ reviews }) {
|
|
if (reviews.length === 0) {
|
|
return (
|
|
<EmptyState
|
|
heading="Manage your customer reviews"
|
|
action={{ content: "View Online Store", url: "https://admin.shopify.com", external: true }}
|
|
image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
|
|
>
|
|
<p>Track your customer feedback in one place. Your store has no reviews yet.</p>
|
|
</EmptyState>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ResourceList
|
|
resourceName={{ singular: 'review', plural: 'reviews' }}
|
|
items={reviews}
|
|
renderItem={(item) => {
|
|
const { id, customer_name, content, rating, product_id } = item;
|
|
const productIdNum = product_id?.split('/').pop() || '';
|
|
|
|
return (
|
|
<ResourceItem
|
|
id={id}
|
|
onClick={() => {
|
|
window.open(`shopify:admin/products/${productIdNum}`, "_top");
|
|
}}
|
|
accessibilityLabel={`View details for ${customer_name}`}
|
|
>
|
|
<InlineStack align="space-between" blockAlign="center">
|
|
<InlineStack gap="400" blockAlign="center">
|
|
<Avatar size="md" initials={customer_name ? customer_name.charAt(0).toUpperCase() : 'A'} name={customer_name || 'Anonymous'} />
|
|
<BlockStack gap="100">
|
|
<Text variant="bodyMd" fontWeight="bold" as="h3">
|
|
{customer_name || 'Anonymous'}
|
|
</Text>
|
|
<Text variant="bodySm" as="p" tone="subdued">
|
|
{content}
|
|
</Text>
|
|
</BlockStack>
|
|
</InlineStack>
|
|
|
|
<InlineStack gap="300" blockAlign="center">
|
|
<Badge tone="success">
|
|
{rating || "5"} / 5 ★
|
|
</Badge>
|
|
<Text variant="bodySm" as="span" tone="subdued">
|
|
Product ID: {productIdNum}
|
|
</Text>
|
|
</InlineStack>
|
|
</InlineStack>
|
|
</ResourceItem>
|
|
);
|
|
}}
|
|
/>
|
|
);
|
|
}
|