1  <script lang="ts">
 2      import Button from '@amp/web-app-components/src/components/buttons/Button.svelte';
 3      import { createEventDispatcher } from 'svelte';
 4  
 5      const dispatch = createEventDispatcher();
 6  
 7      interface ErrorUserInfo {
 8          status: number;
 9      }
10  
11      interface AppError {
12          message?: string;
13          isFirstPage?: boolean;
14          userInfo?: ErrorUserInfo;
15          statusCode?: number;
16      }
17  
18      export let translateFn: (
19          str: string,
20          values?: Record<string, string | number>,
21      ) => string;
22  
23      export let isRetryError: (error: AppError) => boolean = () => false;
24  
25      export let error: AppError | null = null;
26      export let errorLocKey: string | null = null;
27  
28      // podcasts-client-js can currently return a 204 if there is no content found.
29      // We want to treat this as a 204.  If the following radar is ever addressed,
30      // we can remove the 204 conditional here:
31      // rdar://106657358 (Investigate if we can switch from 204 to 404s for network errors)
32      $: locKey =
33          errorLocKey ||
34          (error?.userInfo?.status === 404 ||
35          error?.message === '404' ||
36          error?.statusCode === 404 ||
37          error?.statusCode === 204
38              ? 'AMP.Shared.Error.ItemNotFound'
39              : 'FUSE.Error.AnErrorOccurred');
40  
41      function retry(): void {
42          dispatch('retryAction');
43      }
44  </script>
45  
46  <!-- TODO: rdar://92841405 (JMOTW: Show error page when user has lost internet connection) -->
47  <div role="status" class="page-error">
48      <h1 class="page-error__title" data-testid="page-error-title">
49          {translateFn(locKey)}
50      </h1>
51  
52      {#if isRetryError(error)}
53          <Button buttonStyle="buttonB" on:buttonClick={retry}>
54              {translateFn('FUSE.Error.TryAgain')}
55          </Button>
56      {/if}
57  </div>
58  
59  <style lang="scss">
60      .page-error {
61          --buttonTextColor: var(--systemSecondary);
62          --buttonBorderColor: var(--systemSecondary);
63          margin: auto;
64          padding: 0 25px;
65          max-width: 440px;
66          color: var(--systemSecondary);
67          position: absolute;
68          top: 50%;
69          left: 50%; // RTL not needed
70          transform: translate(-50%, -50%);
71          display: flex;
72          flex-direction: column;
73          align-items: center;
74          gap: 12px;
75          text-align: center;
76          z-index: var(--z-default);
77      }
78  
79      .page-error__title {
80          margin-bottom: 5px;
81          font: var(--title-2);
82      }
83  </style>