From acaa1cdd6f2df062d20156f6244c3cda540dc41b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lloren=C3=A7=20Muntaner?= <llorenc.muntaner@dfinity.org>
Date: Mon, 4 Mar 2024 13:45:22 +0100
Subject: [PATCH] Migrate Showcase to static pages (#2330)

* Migrate Showcase pages

* Add end of line
---
 src/showcase/src/constants.ts                 |  8 +++++-
 src/showcase/src/pages/[page].astro           |  3 --
 src/showcase/src/pages/addDeviceSuccess.astro | 18 ++++++++++++
 src/showcase/src/pages/promptCaptcha.astro    | 28 +++++++++++++++++++
 .../src/pages/promptCaptchaReady.astro        | 26 +++++++++++++++++
 5 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 src/showcase/src/pages/addDeviceSuccess.astro
 create mode 100644 src/showcase/src/pages/promptCaptcha.astro
 create mode 100644 src/showcase/src/pages/promptCaptchaReady.astro

diff --git a/src/showcase/src/constants.ts b/src/showcase/src/constants.ts
index a19b552eb8..0efd56daa5 100644
--- a/src/showcase/src/constants.ts
+++ b/src/showcase/src/constants.ts
@@ -1,4 +1,4 @@
-import { DeviceData } from "$generated/internet_identity_types";
+import { Challenge, DeviceData } from "$generated/internet_identity_types";
 import { loadIdentityBackground } from "$src/components/identityCard";
 import { getDapps } from "$src/flows/dappsExplorer/dapps";
 
@@ -24,3 +24,9 @@ export const chromeDevice: DeviceData = {
 };
 
 export const identityBackground = loadIdentityBackground();
+
+export const dummyChallenge: Challenge = {
+  png_base64:
+    "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",
+  challenge_key: "unimportant",
+};
diff --git a/src/showcase/src/pages/[page].astro b/src/showcase/src/pages/[page].astro
index 80fcefdf6c..a8f710ba7b 100644
--- a/src/showcase/src/pages/[page].astro
+++ b/src/showcase/src/pages/[page].astro
@@ -2,12 +2,9 @@
 import Layout from "../layouts/Layout.astro";
 import "$src/styles/main.css";
 export const iiPageNames = [
-  "promptCaptcha",
-  "promptCaptchaReady",
   "loader",
   "banner",
   "toasts",
-  "addDeviceSuccess",
 ];
 
 export function getStaticPaths() {
diff --git a/src/showcase/src/pages/addDeviceSuccess.astro b/src/showcase/src/pages/addDeviceSuccess.astro
new file mode 100644
index 0000000000..f5e5f9884e
--- /dev/null
+++ b/src/showcase/src/pages/addDeviceSuccess.astro
@@ -0,0 +1,18 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Add Device Success" pageName="addDeviceSuccess">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { i18n } from "../i18n";
+    import { chromeDevice } from "../constants";
+    import { addDeviceSuccessPage } from "$src/flows/addDevice/manage/addDeviceSuccess";
+
+    addDeviceSuccessPage({
+      i18n,
+      deviceAlias: chromeDevice.alias,
+      onContinue: () => toast.info("Continue"),
+    })
+  </script>
+</Screen>
diff --git a/src/showcase/src/pages/promptCaptcha.astro b/src/showcase/src/pages/promptCaptcha.astro
new file mode 100644
index 0000000000..ab17727d7d
--- /dev/null
+++ b/src/showcase/src/pages/promptCaptcha.astro
@@ -0,0 +1,28 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Prompt Captch" pageName="promptCaptcha">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { i18n } from "../i18n";
+    import { registerStepper } from "$src/flows/register/stepper";
+    import { promptCaptchaPage } from "$src/flows/register/captcha";
+
+    promptCaptchaPage({
+      cancel: () => toast.info("canceled"),
+      focus: true,
+      requestChallenge: () =>
+        new Promise(() => {
+          /* noop */
+        }),
+      verifyChallengeChars: () =>
+        new Promise(() => {
+          /* noop */
+        }),
+      stepper: registerStepper({ current: "captcha" }),
+      onContinue: () => toast.info("Done"),
+      i18n,
+    });
+  </script>
+</Screen>
diff --git a/src/showcase/src/pages/promptCaptchaReady.astro b/src/showcase/src/pages/promptCaptchaReady.astro
new file mode 100644
index 0000000000..fff35c2bc0
--- /dev/null
+++ b/src/showcase/src/pages/promptCaptchaReady.astro
@@ -0,0 +1,26 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Prompt Captch Ready" pageName="promptCaptchaReady">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { i18n } from "../i18n";
+    import { dummyChallenge } from "../constants";
+    import { registerStepper } from "$src/flows/register/stepper";
+    import { promptCaptchaPage } from "$src/flows/register/captcha";
+
+    promptCaptchaPage({
+      cancel: () => toast.info("canceled"),
+      focus: true,
+      requestChallenge: () => Promise.resolve(dummyChallenge),
+      verifyChallengeChars: () =>
+        new Promise(() => {
+          /* noop */
+        }),
+      stepper: registerStepper({ current: "captcha" }),
+      onContinue: () => toast.info("Done"),
+      i18n,
+    })
+  </script>
+</Screen>