Update upgrade modal footer to contain two links. (#3601)

Update upgrade modal footer to contain two links.

# Changes

- Rename `Help` link to `FAQ & Support`.
- Replace `Forgot your identity number?` question with `Lookup identity`
link.
- Pass parent window origin into iframe so it can be used for the lookup
link.
- Use either the above passed in origin, the current origin (if not
id.ai) or fallback to `identity.ic0.app`.

# Tests

Manually verified on beta the links work as expected.

Author: sea-snake

src/frontend/src/lib/components/wizards/migration/views/EnterIdentityNumber.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import MigrationIllustration from "$lib/components/illustrations/MigrationIllustration.svelte";
-  import Button from "$lib/components/ui/Button.svelte";
   import Input from "$lib/components/ui/Input.svelte";
   import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
   import { UPGRADE_SUPPORT_URL } from "$lib/config";
@@ -9,6 +8,7 @@
   import Tooltip from "$lib/components/ui/Tooltip.svelte";
   import { t } from "$lib/stores/locale.store";
   import { Trans } from "$lib/components/locale";
+  import { getPrimaryOrigin, parentIFrameOrigin } from "$lib/globals";
 
   interface Props {
     onSubmit: (
@@ -17,6 +17,14 @@
     ) => Promise<void | "cancelled" | "wrongDomain">;
   }
 
+  const primaryOrigin = getPrimaryOrigin();
+  const selfServiceOrigin =
+    parentIFrameOrigin !== undefined
+      ? parentIFrameOrigin
+      : window.location.origin !== primaryOrigin
+        ? window.location.origin
+        : "https://identity.ic0.app";
+
   let { onSubmit }: Props = $props();
 
   let identityNumber = $state<string>("");
@@ -100,16 +108,21 @@
   </Tooltip>
   <div class="border-border-tertiary my-5 border-t"></div>
   <div class="flex flex-row items-center justify-between gap-4">
-    <p class="text-text-secondary text-sm">
-      {$t`Forgot your identity number?`}
-    </p>
+    <a
+      href={`${selfServiceOrigin}/self-service`}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="text-text-primary text-sm font-semibold outline-0 hover:underline focus-visible:underline"
+    >
+      {$t`Lookup identity`}
+    </a>
     <a
       href={UPGRADE_SUPPORT_URL}
       target="_blank"
       rel="noopener noreferrer"
       class="text-text-primary text-sm font-semibold outline-0 hover:underline focus-visible:underline"
     >
-      {$t`Help`}
+      {$t`FAQ & Support`}
     </a>
   </div>
 </form>

src/frontend/src/lib/globals.ts

@@ -19,6 +19,10 @@ export let canisterConfig: InternetIdentityInit;
 export let agentOptions: HttpAgentOptions;
 export let anonymousAgent: HttpAgent;
 export let anonymousActor: ActorSubclass<_SERVICE>;
+export let parentIFrameOrigin: string | undefined;
+
+// Search param passed by parent window to indicate its origin to child window
+export const IFRAME_PARENT_PARAM = "parent_origin";
 
 export const initGlobals = () => {
   canisterId = Principal.fromText(readCanisterId());
@@ -36,6 +40,12 @@ export const initGlobals = () => {
     agent: anonymousAgent,
     canisterId,
   });
+  // Set when `IFRAME_PARENT_PARAM` search param contains a valid related origin
+  parentIFrameOrigin = canisterConfig.related_origins[0]?.find(
+    (origin) =>
+      origin ===
+      new URL(window.location.href).searchParams.get(IFRAME_PARENT_PARAM),
+  );
 };
 
 // Get primary origin (either https://id.ai or https://beta.id.ai) when deployed on beta or prod

src/frontend/src/routes/(new-styling)/(cross-origin)/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { LayoutProps } from "./$types";
-  import { getPrimaryOrigin } from "$lib/globals";
+  import { getPrimaryOrigin, IFRAME_PARENT_PARAM } from "$lib/globals";
   import { forwardMessage, isForwardedMessage } from "./utils";
 
   const { children, data }: LayoutProps = $props();
@@ -24,6 +24,7 @@
     const url = new URL(window.location.href);
     url.hostname = new URL(primaryOrigin).hostname;
     url.searchParams.set("feature_flag_guided_upgrade", "true");
+    url.searchParams.set(IFRAME_PARENT_PARAM, window.location.origin);
     return url.href;
   });