blob: 2bb6a0642ecb035e626da5306a2c3141fac4d7b4 (
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<script lang="ts" context="module">
import type {
EditorsChoice,
ProductReview,
} from '@jet-app/app-store/api/models';
interface EditorsChoiceReview extends ProductReview {
sourceType: 'editorsChoice';
review: EditorsChoice;
}
export function isEditorsChoiceReviewItem(
productReview: ProductReview,
): productReview is EditorsChoiceReview {
return productReview.sourceType === 'editorsChoice';
}
</script>
<script lang="ts">
import { getI18n } from '~/stores/i18n';
import Modal from '@amp/web-app-components/src/components/Modal/Modal.svelte';
import ContentModal from '~/components/jet/item/ContentModal.svelte';
import Truncate from '@amp/web-app-components/src/components/Truncate/Truncate.svelte';
import EditorsChoiceBadge from '~/components/EditorsChoiceBadge.svelte';
import { getJet } from '~/jet';
import { CUSTOMER_REVIEW_MODAL_ID } from '~/utils/metrics';
export let item: EditorsChoiceReview;
export let isDetailView: boolean = false;
let modalComponent: Modal | undefined;
let modalTriggerElement: HTMLElement | null = null;
const translateFn = (key: string) => $i18n.t(key);
const i18n = getI18n();
const jet = getJet();
const handleCloseModal = () => modalComponent?.close();
const handleOpenModal = () => {
modalComponent?.showModal();
jet.recordCustomMetricsEvent({
eventType: 'dialog',
dialogId: 'more',
targetId: CUSTOMER_REVIEW_MODAL_ID,
dialogType: 'button',
});
};
</script>
<article class:is-detail-view={isDetailView}>
<EditorsChoiceBadge
--font={isDetailView
? 'var(--large-title-emphasized)'
: 'var(--title-1-emphasized)'}
/>
{#if isDetailView}
<p>{item.review.notes}</p>
{:else}
<Truncate
{translateFn}
lines={4}
text={item.review.notes}
title={$i18n.t('ASE.Web.AppStore.Review.EditorsChoice')}
isPortalModal={true}
on:openModal={handleOpenModal}
/>
{/if}
</article>
{#if !isDetailView}
<Modal {modalTriggerElement} bind:this={modalComponent}>
<ContentModal
on:close={handleCloseModal}
title={null}
subtitle={null}
targetId={CUSTOMER_REVIEW_MODAL_ID}
>
<svelte:fragment slot="content">
<svelte:self {item} isDetailView={true} />
</svelte:fragment>
</ContentModal>
</Modal>
{/if}
<style>
article:not(.is-detail-view) {
height: 186px;
padding: 20px;
background-color: var(--systemQuinary);
border-radius: var(--global-border-radius-xlarge);
}
article :global(.more) {
--moreTextColorOverride: var(--keyColor);
--moreFontOverride: var(--body);
text-transform: lowercase;
}
</style>
|
