Special Error Page on Preact

packages/special-pages/index.mjs

@@ -36,11 +36,6 @@ export const support = {
         'apple': ['copy', 'inline-html'],
     },
     /** @type {Partial<Record<ImportMeta['injectName'], string[]>>} */
-    sslerrorpage: {
-        'integration': ['copy', 'build-js'],
-         'apple': ['copy', 'build-js', 'inline-html'],
-    },
-    /** @type {Partial<Record<ImportMeta['injectName'], string[]>>} */
     onboarding: {
         'integration': ['copy', 'build-js'],
         'windows': ['copy', 'build-js'],
@@ -55,6 +50,11 @@ export const support = {
         'integration': ['copy', 'build-js'],
         'apple': ['copy', 'build-js'],
     },
+    /** @type {Partial<Record<ImportMeta['injectName'], string[]>>} */
+    'special-error': {
+        'integration': ['copy', 'build-js'],
+        'apple': ['copy', 'build-js', 'inline-html'],
+    },
 }
 
 /** @type {{src: string, dest: string, injectName: string}[]} */

packages/special-pages/messages/special-error/initialSetup.response.json

@@ -0,0 +1,115 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "required": ["locale", "env", "platform", "errorData"],
+  "properties": {
+    "locale": {
+      "type": "string"
+    },
+    "env": {
+      "type": "string",
+      "enum": ["development", "production"]
+    },
+    "platform": {
+      "type": "object",
+      "required": ["name"],
+      "properties": {
+        "name": {
+          "type": "string",
+          "enum": ["macos", "windows", "android", "ios"]
+        }
+      }
+    },
+    "errorData": {
+      "type": "object",
+      "oneOf": [
+        {
+          "type": "object",
+          "title": "Phishing",
+          "required": ["kind"],
+          "properties": {
+            "kind": {
+              "type": "string",
+              "const": "phishing"
+            }
+          }
+        }, {
+          "type": "object",
+          "title": "SSL Expired Certificate",
+          "required": ["kind", "errorType", "domain"],
+          "properties": {
+            "kind": {
+              "type": "string",
+              "const": "ssl"
+            },
+            "errorType": {
+              "type": "string",
+              "const": "expired"
+            },
+            "domain": {
+              "type": "string"
+            }
+          }
+        }, {
+          "type": "object",
+          "title": "SSL Invalid Certificate",
+          "required": ["kind", "errorType", "domain"],
+          "properties": {
+            "kind": {
+              "type": "string",
+              "const": "ssl"
+            },
+            "errorType": {
+              "type": "string",
+              "const": "invalid"
+            },
+            "domain": {
+              "type": "string"
+            }
+          }
+        }, {
+          "type": "object",
+          "title": "SSL Self Signed Certificate",
+          "required": ["kind", "errorType", "domain"],
+          "properties": {
+            "kind": {
+              "type": "string",
+              "const": "ssl"
+            },
+            "errorType": {
+              "type": "string",
+              "const": "selfSigned"
+            },
+            "domain": {
+              "type": "string"
+            }
+          }
+        }, {
+          "type": "object",
+          "title": "SSL Wrong Host",
+          "required": ["kind", "errorType", "domain", "eTldPlus1"],
+          "properties": {
+            "kind": {
+              "type": "string",
+              "const": "ssl"
+            },
+            "errorType": {
+              "type": "string",
+              "const": "wrongHost"
+            },
+            "domain": {
+              "type": "string"
+            },
+            "eTldPlus1": {
+              "type": "string"
+            }
+          }
+        }
+      ]
+    },
+    "localeStrings": {
+      "type": "string",
+      "description": "Optional locale-specific strings"
+    }
+  }
+}

packages/special-pages/messages/special-error/leaveSite.notify.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/special-pages/messages/special-error/reportInitException.notify.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "required": ["message"],
+  "properties": {
+    "message": {
+      "type": "string"
+    }
+  }
+}

packages/special-pages/messages/special-error/reportPageException.notify.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "required": ["message"],
+  "properties": {
+    "message": {
+      "type": "string"
+    }
+  }
+}

packages/special-pages/messages/special-error/visitSite.notify.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/special-pages/pages/example/app/index.js

@@ -1,4 +1,3 @@
-import { callWithRetry } from '../../../shared/call-with-retry.js'
 import { h, render } from 'preact'
 import { EnvironmentProvider, UpdateEnvironment } from '../../../shared/components/EnvironmentProvider.js'
 
@@ -7,6 +6,9 @@ import { Components } from './components/Components.jsx'
 
 import enStrings from '../src/locales/en/example.json'
 import { TranslationProvider } from '../../../shared/components/TranslationsProvider.js'
+import { callWithRetry } from '../../../shared/call-with-retry.js'
+
+import '../../../shared/styles/global.css' // global styles
 
 /**
  * @param {import("../src/js/index.js").ExamplePage} messaging

packages/special-pages/pages/example/src/js/index.js

@@ -1,3 +1,11 @@
+/**
+ * @module Example Page
+ * @category Special Pages
+ *
+ * @description
+ * Special Page example. Used as a template for new special pages.
+ */
+
 import { createTypedMessages } from '@duckduckgo/messaging'
 import { Environment } from '../../../../shared/environment.js'
 import { createSpecialPageMessaging } from '../../../../shared/create-special-page-messaging.js'
@@ -12,8 +20,17 @@ export class ExamplePage {
     }
 
     /**
-     * This will be sent if the application has loaded, but a client-side error
-     * has occurred that cannot be recovered from
+     * Sends an initial message to the native layer. This is the opportunity for the native layer
+     * to provide the initial state of the application or any configuration, for example:
+     *
+     * ```json
+     * {
+     *   "env": "development",
+     *   "locale": "en"
+     * }
+     * ```
+     *
+     * @returns {Promise<import('../../../../types/example').InitialSetupResponse>}
      */
     initialSetup () {
         return this.messaging.request('initialSetup')

packages/special-pages/pages/release-notes/app/Components.js

@@ -61,7 +61,7 @@ export function Components () {
 
             <h2>Restart Button</h2>
             <div>
-                <Button platform="apple">{t('restartToUpdate')}</Button>
+                <Button>{t('restartToUpdate')}</Button>
             </div>
             <hr/>
 

packages/special-pages/pages/special-error/app/components/AdvancedInfo.jsx

@@ -0,0 +1,69 @@
+import { h } from 'preact'
+import { useRef, useEffect } from 'preact/hooks'
+import { useTypedTranslation } from '../types'
+import { Text } from '../../../../shared/components/Text/Text'
+import { useMessaging } from '../providers/MessagingProvider'
+import { useAdvancedInfoHeading, useAdvancedInfoContent } from '../hooks/ErrorStrings'
+
+import styles from './AdvancedInfo.module.css'
+
+function useScrollTarget() {
+    /** @type {import("preact/hooks").MutableRef<HTMLAnchorElement|null>} */
+    const linkRef = useRef(null)
+    return {
+        ref: linkRef,
+        trigger: () => {
+            linkRef.current?.scrollIntoView({ behavior: 'smooth' })
+        }
+    }
+}
+
+/**
+ * @param {object} props
+ * @param {import("preact/hooks").MutableRef<HTMLAnchorElement|null>} [props.elemRef]
+ */
+export function VisitSiteLink({ elemRef }) {
+    const { t } = useTypedTranslation();
+    const {messaging} = useMessaging();
+    return (
+        <a className={styles.visitSite} onClick={() => messaging?.visitSite()} ref={elemRef}>
+            {t('visitSiteButton')}
+        </a>
+    )
+}
+
+export function AdvancedInfoHeading() {
+    const heading = useAdvancedInfoHeading()
+
+    return (
+        <header className={styles.heading}>
+            <Text as="h2" variant="body">{heading}</Text>
+        </header>
+    )
+}
+
+export function AdvancedInfoContent() {
+    const content = useAdvancedInfoContent()
+
+    return (
+        <div className={styles.content}>
+            {content.map(text => <Text as="p" variant="body">{text}</Text>)}
+        </div>
+    )
+}
+
+export function AdvancedInfo() {
+    const { ref, trigger } = useScrollTarget();
+
+    return (
+        <div className={styles.wrapper}>
+            <div className={styles.container} onAnimationEnd={trigger}>
+                <AdvancedInfoHeading />
+
+                <AdvancedInfoContent />
+
+                <VisitSiteLink elemRef={ref}/>
+            </div>
+        </div>
+    )
+}

packages/special-pages/pages/special-error/app/components/AdvancedInfo.module.css

@@ -0,0 +1,90 @@
+.container {
+    align-items: flex-start;
+    display: flex;
+    flex-flow: column;
+    gap: var(--sp-4);
+    max-width: var(--ios-content-max-width);
+    width: 100%;
+
+    animation-duration: 300ms;
+    animation-fill-mode: forwards;
+    animation-name: appear;
+}
+
+.content {
+    display: flex;
+    flex-flow: column;
+    gap: var(--sp-5);
+
+    & a {
+        color: var(--link-color);
+    }
+}
+
+.visitSite {
+    color: var(--visit-site-color);
+    cursor: pointer;
+    font-size: calc(13 * var(--px-in-rem));
+    letter-spacing: calc(-0.08 * var(--px-in-rem));
+    line-height: calc(16 * var(--px-in-rem));
+    text-decoration: underline;
+}
+
+@keyframes appear {
+    0% {
+        padding: 0 var(--sp-10);
+        max-height: 0;
+    }
+    100% {
+        padding: var(--sp-6) var(--sp-10);
+        max-height: calc(400 * var(--px-in-rem));
+    }
+}
+
+/* Platform-specific styles */
+
+/* macOS */
+[data-platform-name="macos"] {
+    & .container {
+        background: var(--advanced-info-bg);
+        box-shadow: inset 0 1px 0 0 var(--border-color);
+    }
+
+    & .visitSite {
+        align-self: flex-end;
+    }
+}
+
+/* iOS */
+[data-platform-name="ios"] {
+    & .wrapper {
+        display: flex;
+        justify-content: center;
+        border-top: 1px solid var(--color-black-at-9);
+        width: 100%;
+
+        @media (prefers-color-scheme: dark) {
+            border-top: 1px solid var(--color-white-at-9);
+        }
+    }
+
+    & .container {
+        align-items: center;
+        gap: var(--sp-6);
+    }
+
+    & .heading {
+        text-align: center;
+    }
+
+    & .content {
+        text-align: center;
+    }
+
+    & .visitSite {
+        font-size: calc(16 * var(--px-in-rem));
+        font-weight: 400;
+        letter-spacing: calc(-0.31 * var(--px-in-rem));
+        line-height: calc(21 * var(--px-in-rem));
+    }
+}