1  <script lang="ts" context="module">
  2      import type { StaticMessagePage } from '~/jet/models';
  3  </script>
  4  
  5  <script lang="ts">
  6      import { getI18n } from '~/stores/i18n';
  7  
  8      export let page: StaticMessagePage;
  9  
 10      const i18n = getI18n();
 11  </script>
 12  
 13  <div class="static-message-page-container">
 14      <div class="static-message-text-wrapper">
 15          {#if page.titleLocKey}
 16              <h1>{$i18n.t(page.titleLocKey)}</h1>
 17          {/if}
 18  
 19          <section>
 20              {#if page.contentType === 'win-back' || page.contentType === 'contingent-price'}
 21                  <p>
 22                      {$i18n.t('ASE.Web.AppStore.WinBack.Subhead')}
 23                  </p>
 24  
 25                  <p>
 26                      <b>
 27                          {$i18n.t('ASE.Web.AppStore.WinBack.DirectionalTitle')}
 28                      </b>
 29                  </p>
 30  
 31                  <ul>
 32                      <li>
 33                          {$i18n.t('ASE.Web.AppStore.WinBack.Update.iOS')}
 34                      </li>
 35                      <li>
 36                          {$i18n.t('ASE.Web.AppStore.WinBack.Update.macOS')}
 37                      </li>
 38                  </ul>
 39  
 40                  <p>
 41                      {$i18n.t('ASE.Web.AppStore.WinBack.Body')}
 42                  </p>
 43              {:else if page.contentType === 'carrier'}
 44                  <p class="carrier__instructions">
 45                      {$i18n.t('ASE.Web.AppStore.Carrier.Update.iOS')}
 46                  </p>
 47                  <p>
 48                      {$i18n.t('ASE.Web.AppStore.Carrier.Body')}
 49                  </p>
 50              {:else if page.contentType === 'invoice'}
 51                  <p class="invoice__instructions">
 52                      {$i18n.t('ASE.Web.AppStore.Invoice.Body')}
 53                  </p>
 54              {/if}
 55          </section>
 56      </div>
 57  </div>
 58  
 59  <style lang="scss">
 60      @use 'ac-sasskit/modules/viewportcontent/core' as *;
 61      @use 'amp/stylekit/core/viewports' as *;
 62  
 63      .static-message-page-container {
 64          display: flex;
 65          flex-grow: 1;
 66          width: 100%;
 67          max-width: viewport-content-for(xlarge);
 68          margin: 0 auto;
 69          align-items: center;
 70      }
 71  
 72      @media (--range-sidebar-visible-up) {
 73          .static-message-page-container {
 74              height: 100%;
 75          }
 76      }
 77  
 78      .static-message-text-wrapper {
 79          display: inline-flex;
 80          flex-direction: column;
 81          align-items: flex-start;
 82          width: auto;
 83          margin: 0 auto;
 84      }
 85  
 86      .static-message-page-container h1 {
 87          padding: 13px var(--bodyGutter) 0;
 88          font: var(--header-emphasized);
 89          color: var(--systemPrimary, #000);
 90          position: relative;
 91          z-index: 1;
 92          margin-bottom: 16px;
 93      }
 94  
 95      .static-message-page-container section {
 96          margin: 0 var(--bodyGutter);
 97          font: var(--title-3);
 98      }
 99  
100      .static-message-page-container li {
101          list-style-type: disc;
102      }
103  
104      .static-message-page-container p,
105      .static-message-page-container ul {
106          margin-bottom: 16px;
107          text-wrap: pretty;
108      }
109  
110      .static-message-page-container ul {
111          padding-inline-start: 1em;
112      }
113  </style>