From 2fe168380fd33bed3ec7f2001c7e660ab87aea4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lloren=C3=A7=20Muntaner?= <llorenc.muntaner@dfinity.org>
Date: Fri, 20 Dec 2024 12:43:30 +0100
Subject: [PATCH] UI Page to add current device to the current origin (#2757)

* UI Page to replace current device's origin

* Rename and change copy

* Rename field

* Update src/frontend/src/flows/addDevice/addCurrentDevice.json

Co-authored-by: sea-snake <104725312+sea-snake@users.noreply.github.com>

* Update src/frontend/src/flows/addDevice/addCurrentDevice.ts

Co-authored-by: sea-snake <104725312+sea-snake@users.noreply.github.com>

---------

Co-authored-by: sea-snake <104725312+sea-snake@users.noreply.github.com>
---
 .../src/flows/addDevice/addCurrentDevice.json |  9 ++++
 .../src/flows/addDevice/addCurrentDevice.ts   | 46 +++++++++++++++++++
 src/showcase/src/pages/addCurrentDevice.astro | 17 +++++++
 3 files changed, 72 insertions(+)
 create mode 100644 src/frontend/src/flows/addDevice/addCurrentDevice.json
 create mode 100644 src/frontend/src/flows/addDevice/addCurrentDevice.ts
 create mode 100644 src/showcase/src/pages/addCurrentDevice.astro

diff --git a/src/frontend/src/flows/addDevice/addCurrentDevice.json b/src/frontend/src/flows/addDevice/addCurrentDevice.json
new file mode 100644
index 0000000000..fa4173ed87
--- /dev/null
+++ b/src/frontend/src/flows/addDevice/addCurrentDevice.json
@@ -0,0 +1,9 @@
+{
+  "en": {
+    "title": "Add Current Device",
+    "paragraph": "Please add the current device to your identity to improve the user experience with Internet Identity.",
+    "skip": "Skip",
+    "add": "Add",
+    "label_icon": "Recommended Action"
+  }
+}
diff --git a/src/frontend/src/flows/addDevice/addCurrentDevice.ts b/src/frontend/src/flows/addDevice/addCurrentDevice.ts
new file mode 100644
index 0000000000..2ebf99d9fe
--- /dev/null
+++ b/src/frontend/src/flows/addDevice/addCurrentDevice.ts
@@ -0,0 +1,46 @@
+import { infoScreenTemplate } from "$src/components/infoScreen";
+import { I18n } from "$src/i18n";
+import { renderPage } from "$src/utils/lit-html";
+import { TemplateResult } from "lit-html";
+import copyJson from "./addCurrentDevice.json";
+
+const addCurrentDeviceTemplate = ({
+  add,
+  skip,
+  i18n,
+}: {
+  add: () => void;
+  skip: () => void;
+  i18n: I18n;
+}): TemplateResult => {
+  const copy = i18n.i18n(copyJson);
+
+  return infoScreenTemplate({
+    cancel: skip,
+    cancelText: copy.skip,
+    next: add,
+    nextText: copy.add,
+    title: copy.title,
+    paragraph: copy.paragraph,
+    scrollToTop: true,
+    icon: "info",
+    pageId: "add-current-device",
+    label: copy.label_icon,
+  });
+};
+
+export const addCurrentDevicePage = renderPage(addCurrentDeviceTemplate);
+
+// Prompt the user to add the current device (with the current origin).
+// Adding the current device to the current origin improves the UX of the user when they come back to this origin.
+export const addCurrentDevice = (): Promise<{
+  action: "skip" | "add-current-device";
+}> => {
+  return new Promise((resolve) =>
+    addCurrentDevicePage({
+      i18n: new I18n(),
+      add: () => resolve({ action: "add-current-device" }),
+      skip: () => resolve({ action: "skip" }),
+    })
+  );
+};
diff --git a/src/showcase/src/pages/addCurrentDevice.astro b/src/showcase/src/pages/addCurrentDevice.astro
new file mode 100644
index 0000000000..d58310a023
--- /dev/null
+++ b/src/showcase/src/pages/addCurrentDevice.astro
@@ -0,0 +1,17 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Add Phrase" pageName="addPhrase">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { i18n } from "../i18n";
+    import { addCurrentDevicePage } from "$src/flows/addDevice/addCurrentDevice";
+
+    addCurrentDevicePage({
+      replace: () => toast.info("Replace device's origin"),
+      skip: () => toast.info("Skip"),
+      i18n,
+    });
+  </script>
+</Screen>