1  <script lang="ts">
 2      import { onMount, type SvelteComponent } from 'svelte';
 3      import type { GenericPage } from '@jet-app/app-store/api/models';
 4  
 5      import Modal from '@amp/web-app-components/src/components/Modal/Modal.svelte';
 6      import { getModalPageStore } from '~/stores/modalPage';
 7      import ShelfComponent from '~/components/jet/shelf/Shelf.svelte';
 8      import ContentModal from '~/components/jet/item/ContentModal.svelte';
 9      import { LICENSE_AGREEMENT_MODAL_ID } from '~/utils/metrics';
10  
11      let modalElement: SvelteComponent;
12      let modalPage = getModalPageStore();
13      let page: GenericPage | undefined;
14  
15      $: page = $modalPage?.page;
16      $: shelves = page?.shelves ?? [];
17      $: title = page?.title ?? null;
18      $: targetId =
19          $modalPage?.pageDetail === 'licenseAgreement'
20              ? LICENSE_AGREEMENT_MODAL_ID
21              : undefined;
22  
23      onMount(() => {
24          return modalPage.clearPage;
25      });
26  
27      $: {
28          if ($modalPage) {
29              modalElement?.showModal();
30          } else {
31              handleModalClose();
32          }
33      }
34  
35      function handleModalClose() {
36          modalElement?.close();
37          modalPage.clearPage();
38      }
39  </script>
40  
41  <Modal
42      modalTriggerElement={null}
43      bind:this={modalElement}
44      on:close={handleModalClose}
45  >
46      <div class="modal-content">
47          {#if page}
48              <ContentModal
49                  {title}
50                  subtitle={null}
51                  on:close={handleModalClose}
52                  {targetId}
53              >
54                  <svelte:fragment slot="content">
55                      {#each shelves as shelf}
56                          <ShelfComponent {shelf}>
57                              <slot
58                                  name="marker-shelf"
59                                  slot="marker-shelf"
60                                  let:shelf
61                                  {shelf}
62                              />
63                          </ShelfComponent>
64                      {/each}
65                  </svelte:fragment>
66              </ContentModal>
67          {/if}
68      </div>
69  </Modal>
70  
71  <style lang="scss">
72      .modal-content :global(p) {
73          user-select: text;
74          margin-bottom: 15px;
75          overflow-wrap: break-word;
76      }
77  
78      :global(.noscroll) {
79          overflow: hidden;
80          touch-action: none;
81      }
82  </style>