blob: a55fe40fca1a29a4fce5cc3404d41f4acf0f14a5 (
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
|
<script lang="ts" context="module">
import type {
Shelf,
ReviewsContainer,
} from '@jet-app/app-store/api/models';
export interface ReviewsContainerShelf extends Shelf {
items: [ReviewsContainer];
}
export function isReviewsContainerShelf(
shelf: Shelf,
): shelf is ReviewsContainerShelf {
return (
shelf.contentType === 'reviewsContainer' &&
Array.isArray(shelf.items)
);
}
</script>
<script lang="ts">
import RatingComponent from '@amp/web-app-components/src/components/Rating/Rating.svelte';
import LinkWrapper from '~/components/LinkWrapper.svelte';
import ShelfTitle from '~/components/Shelf/Title.svelte';
import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
import Grid from '~/components/Grid.svelte';
import { getI18n } from '~/stores/i18n';
import { getJet } from '~/jet/svelte';
const i18n = getI18n();
const jet = getJet();
export let shelf: ReviewsContainerShelf;
$: reviewsContainer = shelf.items[0];
$: ({ productAction, ratings } = reviewsContainer);
$: numberOfRatings = jet.localization.formattedCount(
ratings.totalNumberOfRatings,
);
</script>
<ShelfWrapper {shelf}>
<header slot="title">
{#if productAction}
<div class="product-action">
<LinkWrapper action={productAction}>
{productAction.title}
</LinkWrapper>
</div>
{/if}
<ShelfTitle title={shelf.title ?? ''} />
<Grid gridType="A" items={[1]}>
<div class="rating">
<RatingComponent
averageRating={ratings.ratingAverage}
ratingCount={ratings.totalNumberOfRatings}
ratingCountText={$i18n.t(
'ASE.Web.AppStore.Ratings.CountText',
{
numberOfRatings,
},
)}
ratingCountsList={ratings.ratingCounts}
totalText={$i18n.t('ASE.Web.AppStore.Ratings.TotalText')}
/>
</div>
</Grid>
</header>
</ShelfWrapper>
<style>
.product-action {
--linkColor: var(--keyColor);
margin: 0 var(--bodyGutter) 6px;
}
.rating {
--ratingBarColor: var(--systemPrimary);
}
</style>
|
