[CrOS Settings] Add eSIM setup QR code scanning

Add QR code detection logic and styling to cellular esim
setup.

Screenshots:
https://screenshot.googleplex.com/64NSd3tsBZWT2pJ.png
https://screenshot.googleplex.com/7ks7FBaXpYFAt6z.png
https://screenshot.googleplex.com/86VbgmA3Y2TDFAG.png

Bug: 1093185
Change-Id: I9631aeeee9db8fe67a4b18cf48fd7576556b32cf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2495873
Commit-Queue: Gordon Seto <gordonseto@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#822910}

chrome/app/chromeos_strings.grdp

@@ -313,7 +313,16 @@
     Establish an internet connection first
   </message>
   <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE" desc="Label for informing the user on ways to retrieve an eSim profile">
-    Scan QR code using device camera or enter activation code provided by your carrier
+    Scan QR code using device camera or enter activation code provided by your carrier.
+  </message>
+  <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_USE_CAMERA" desc="Label for button that uses the camera to scan for QR codes when clicked.">
+    Use camera to scan QR code
+  </message>
+  <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_SUCCESS" desc="Label informing the user that an an activation code was scanned successfully.">
+    Activation code detected
+  </message>
+  <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_RETRY" desc="Label for button that uses the camera to rescan for QR codes when clicked.">
+    use camera again
   </message>
   <message name="IDS_CELLULAR_SETUP_ESTABLISH_NETWORK_CONNECTION" desc="Message, informing user that a network connection is being established during cellular setup">
     Establishing network connection ...

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE.png.sha1

-8c8ed25aabd13fdf8a5305f2121c6df855edb1d1
+d22fa61ebb6c3914c4e9f424611e9223136fb093
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_RETRY.png.sha1

+bdf3138077392a724f424e7882532ef9e43b6eb4
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_SUCCESS.png.sha1

+bdf3138077392a724f424e7882532ef9e43b6eb4
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_ESIM_PAGE_USE_CAMERA.png.sha1

+d22fa61ebb6c3914c4e9f424611e9223136fb093
\ No newline at end of file

chrome/browser/ui/webui/chromeos/cellular_setup/cellular_setup_localized_strings_provider.cc

@@ -48,7 +48,10 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"finalPageMessage", IDS_CELLULAR_SETUP_FINAL_PAGE_MESSAGE},
     {"finalPageErrorTitle", IDS_CELLULAR_SETUP_FINAL_PAGE_ERROR_TITLE},
     {"finalPageErrorMessage", IDS_CELLULAR_SETUP_FINAL_PAGE_ERROR_MESSAGE},
-    {"scanQRCode", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE}};
+    {"scanQRCode", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE},
+    {"useCamera", IDS_CELLULAR_SETUP_ESIM_PAGE_USE_CAMERA},
+    {"scanQRCodeSuccess", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_SUCCESS},
+    {"qrCodeRetry", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_RETRY}};
 }  //  namespace
 
 void AddLocalizedStrings(content::WebUIDataSource* html_source) {

chrome/test/data/webui/cr_components/chromeos/cellular_setup/esim_flow_ui_test.js

@@ -24,15 +24,15 @@ suite('CrComponentsEsimFlowUiTest', function() {
   });
 
   test('Forward navigation goes to final page', function() {
-    const qrCodePage = eSimPage.$$('#qr-code-page');
-    const finalPage = eSimPage.$$('#final-page');
+    const activationCodePage = eSimPage.$$('#activationCodePage');
+    const finalPage = eSimPage.$$('#finalPage');
 
-    assertTrue(!!qrCodePage);
+    assertTrue(!!activationCodePage);
     assertTrue(!!finalPage);
 
     assertTrue(
         eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.ESIM &&
-        eSimPage.selectedESimPageName_ === qrCodePage.id);
+        eSimPage.selectedESimPageName_ === activationCodePage.id);
 
     eSimPage.navigateForward();
     Polymer.dom.flush();
@@ -48,7 +48,8 @@ suite('CrComponentsEsimFlowUiTest', function() {
         eSimPage.buttonState.next ===
         cellularSetup.ButtonState.SHOWN_BUT_DISABLED);
 
-    eSimPage.activationCode_ = 'ACTIVATION CODE';
+    const activationCodePage = eSimPage.$$('#activationCodePage');
+    activationCodePage.activationCode_ = 'ACTIVATION CODE';
     Polymer.dom.flush();
 
     assertTrue(

ui/webui/resources/cr_components/BUILD.gn

@@ -82,6 +82,7 @@ preprocess_grit("preprocess_generated") {
   if (is_chromeos) {
     in_files += [
       "chromeos/bluetooth/bluetooth_dialog.m.js",
+      "chromeos/cellular_setup/activation_code_page.m.js",
       "chromeos/cellular_setup/base_page.m.js",
       "chromeos/cellular_setup/button_bar.m.js",
       "chromeos/cellular_setup/cellular_setup_delegate.m.js",
@@ -182,6 +183,8 @@ preprocess_grit("preprocess_polymer2") {
       ]
     }
     in_files += [
+      "chromeos/cellular_setup/activation_code_page.html",
+      "chromeos/cellular_setup/activation_code_page.js",
       "chromeos/cellular_setup/base_page.html",
       "chromeos/cellular_setup/base_page.js",
       "chromeos/cellular_setup/button_bar.html",

ui/webui/resources/cr_components/chromeos/cellular_setup/BUILD.gn

@@ -11,6 +11,7 @@ assert(is_chromeos, "CellularSetup UI is Chrome OS only.")
 
 js_type_check("closure_compile") {
   deps = [
+    ":activation_code_page",
     ":base_page",
     ":button_bar",
     ":cellular_setup",
@@ -68,6 +69,14 @@ js_library("final_page") {
   deps = [ ":base_page" ]
 }
 
+js_library("activation_code_page") {
+  deps = [
+    ":cellular_setup_delegate",
+    ":subflow_behavior",
+    "//ui/webui/resources/js:i18n_behavior",
+  ]
+}
+
 js_library("psim_flow_ui") {
   deps = [
     ":cellular_setup_delegate",
@@ -85,9 +94,8 @@ js_library("psim_flow_ui") {
 
 js_library("esim_flow_ui") {
   deps = [
+    ":activation_code_page",
     ":cellular_setup_delegate",
-    ":cellular_types",
-    ":final_page",
     ":subflow_behavior",
     "//ui/webui/resources/js:i18n_behavior",
   ]
@@ -140,6 +148,7 @@ js_library("mojo_interface_provider") {
 js_type_check("closure_compile_module") {
   is_polymer3 = true
   deps = [
+    ":activation_code_page.m",
     ":base_page.m",
     ":button_bar.m",
     ":cellular_setup.m",
@@ -176,6 +185,17 @@ js_library("final_page.m") {
   extra_deps = [ ":final_page_module" ]
 }
 
+js_library("activation_code_page.m") {
+  sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.m.js" ]
+  deps = [
+    ":cellular_setup_delegate.m",
+    ":subflow_behavior.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:i18n_behavior.m",
+  ]
+  extra_deps = [ ":activation_code_page_module" ]
+}
+
 js_library("mojo_interface_provider.m") {
   sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/mojo_interface_provider.m.js" ]
   deps = [
@@ -268,6 +288,7 @@ js_library("psim_flow_ui.m") {
 js_library("esim_flow_ui.m") {
   sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.m.js" ]
   deps = [
+    ":activation_code_page.m",
     ":cellular_setup_delegate.m",
     ":cellular_types.m",
     ":final_page.m",
@@ -304,6 +325,7 @@ js_library("cellular_setup.m") {
 
 group("polymer3_elements") {
   public_deps = [
+    ":activation_code_page_module",
     ":base_page_module",
     ":button_bar_module",
     ":cellular_setup_module",
@@ -333,6 +355,14 @@ polymer_modulizer("final_page") {
   auto_imports = cr_components_chromeos_auto_imports
 }
 
+polymer_modulizer("activation_code_page") {
+  js_file = "activation_code_page.js"
+  html_file = "activation_code_page.html"
+  html_type = "dom-module"
+  namespace_rewrites = cr_components_chromeos_namespace_rewrites
+  auto_imports = cr_components_chromeos_auto_imports
+}
+
 polymer_modulizer("button_bar") {
   js_file = "button_bar.js"
   html_file = "button_bar.html"

ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.html

+<link rel="import" href="../../../html/polymer.html">
+
+<link rel="import" href="../../../html/i18n_behavior.html">
+<link rel="import" href="base_page.html">
+<link rel="import" href="cellular_setup_delegate.html">
+
+<dom-module id="activation-code-page">
+  <template>
+    <style>
+      [slot='page-body'] {
+        height: 300px;
+        margin-top: -20px;
+      }
+
+      :host cr-button {
+        --ripple-opacity: 0;
+      }
+
+      #esimQrCodeDetection {
+        background-color: var(--google-grey-refresh-100);
+        border-radius: 4px;
+        height: 130px;
+        margin: 20px 0 30px 0;
+        overflow: hidden;
+        position: relative;
+      }
+
+      cr-button {
+        border: none;
+        box-shadow: none;
+      }
+
+      cr-button:hover {
+        background-color: transparent;
+      }
+
+      #scanSuccessMessage {
+        color: green;
+        font-size: medium;
+      }
+
+      #scanSuccessMessage:hover {
+        cursor: default;
+      }
+
+      .center {
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%) translateX(-50%);
+      }
+
+      .label {
+        font-weight: 500;
+      }
+
+      #startScanningImage {
+        margin-inline-end: 8px;
+      }
+
+      #useCameraAgainButton {
+        font-weight: 500;
+        left: 50%;
+        margin-top: 16px;
+        transform: translateX(-50%);
+      }
+
+      #scanSuccessImage {
+        position: absolute;
+       }
+
+       #scanSuccessMessage {
+        padding-inline-end: 0;
+        padding-inline-start: 30px;
+      }
+    </style>
+    <base-page>
+      <div slot="page-body">
+        [[i18n('scanQRCode')]]
+        <!-- TODO(crbug.com/1093185): Add flip camera button -->
+        <div id="esimQrCodeDetection">
+          <div class="center" id="startScanningContainer"
+              hidden$="[[!isInitialState_]]">
+            <cr-button class="label"
+                id="startScanningButton"
+                on-click="startScanning_">
+              <img class="label-image"
+                  id="startScanningImage"
+                  src="activation_code_page_camera.svg"
+                  width="20" height="20"
+                  aria-hidden="true">
+              [[i18n('useCamera')]]
+            </cr-button>
+          </div>
+          <div class="center" id="scanSuccessContainer"
+              hidden$="[[!activationCode_]]">
+            <div>
+              <img id="scanSuccessImage"
+                  src="activation_code_page_checked.svg"
+                  width="20" height="20"
+                  aria-hidden="true">
+              <span class="label" id="scanSuccessMessage">
+                [[i18n('scanQRCodeSuccess')]]
+              </span>
+            </div>
+            <cr-button id="useCameraAgainButton"
+                on-click="startScanning_">
+              [[i18n('qrCodeRetry')]]
+            </cr-button>
+          </div>
+          <video id="video" hidden$="[[!qrCodeScanInProgress_]]"></video>
+        </div>
+        <cr-input id="activationCode"
+            label="[[i18n('activationCode')]]"
+            value="{{activationCode_}}">
+        </cr-input>
+      </div>
+    </base-page>
+  </template>
+  <script src="activation_code_page.js"></script>
+</dom-module>

ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @type {!number}
+ * @private
+ */
+const QR_CODE_DETECTION_INTERVAL_MS = 1000;
+
+/**
+ * Page in eSIM Setup flow that accepts activation code. User has option for
+ * manual entry or scan a QR code.
+ */
+Polymer({
+  is: 'activation-code-page',
+
+  behaviors: [I18nBehavior],
+
+  properties: {
+    /** @private */
+    activationCode_: {
+      type: String,
+      value: '',
+      observer: 'onActivationCodeChanged_',
+    },
+
+    /** @private */
+    qrCodeScanInProgress_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /** @private */
+    isInitialState_: {
+      type: Boolean,
+      value: true,
+    },
+  },
+
+  /**
+   * @type {?MediaStream}
+   * @private
+   */
+  stream_: null,
+
+  /**
+   * @type {?number}
+   * @private
+   */
+  qrCodeDetectorTimer_: null,
+
+  /** override */
+  detached() {
+    if (this.stream_) {
+      this.stream_.getTracks()[0].stop();
+    }
+    if (this.qrCodeDetectorTimer_) {
+      clearTimeout(this.qrCodeDetectorTimer_);
+    }
+  },
+
+  /** private */
+  startScanning_() {
+    // TODO(crbug.com/1093185): Add logic for changing stream if user flips
+    // camera. Add error handling for camera not working.
+    navigator.mediaDevices
+        .getUserMedia({video: {height: 130, width: 482}, audio: false})
+        .then(stream => {
+          this.stream_ = stream;
+          const video = this.$.video;
+          video.srcObject = stream;
+          video.play();
+
+          this.activationCode_ = '';
+          this.qrCodeScanInProgress_ = true;
+          this.isInitialState_ = false;
+
+          this.detectQrCode_(stream);
+        });
+  },
+
+  /**
+   * Continuously checks stream if it contains a QR code. If a QR code is
+   * detected, activationCode_ is set to the QR code's value and the detection
+   * stops.
+   * @param {MediaStream} stream
+   * @private
+   */
+  async detectQrCode_(stream) {
+    try {
+      this.qrCodeDetectorTimer_ = setInterval(
+          (async function() {
+            const capturer = new ImageCapture(stream.getVideoTracks()[0]);
+            const frame = await capturer.grabFrame();
+            const activationCode = await this.detectActivationCode_(frame);
+            if (activationCode) {
+              clearTimeout(this.qrCodeDetectorTimer_);
+              this.activationCode_ = activationCode;
+              this.qrCodeScanInProgress_ = false;
+            }
+          }).bind(this),
+          QR_CODE_DETECTION_INTERVAL_MS);
+    } catch (error) {
+      // TODO(crbug.com/1093185): Update the UI in response to the error.
+      console.log(error);
+    }
+  },
+
+  /**
+   * @param {ImageBitmap} frame
+   * @return {!Promise<string|null>}
+   * TODO(crbug.com/1093185): Remove suppression when shape_detection extern
+   * definitions become available.
+   * @suppress {undefinedVars|missingProperties}
+   * @private
+   */
+  async detectActivationCode_(frame) {
+    const qrCodeDetector = new BarcodeDetector({
+      formats: [
+        'qr_code',
+      ]
+    });
+    const qrCodes = await qrCodeDetector.detect(frame);
+    if (qrCodes.length > 0) {
+      return qrCodes[0].rawValue;
+    }
+    return null;
+  },
+
+  /** @private */
+  onActivationCodeChanged_() {
+    const activationCode = this.validateActivationCode_(this.activationCode_);
+    this.fire('activation-code-updated', {activationCode: activationCode});
+    // TODO(crbug.com/1093185): Handle if activation code is invalid.
+    if (activationCode) {
+      if (this.stream_) {
+        this.stream_.getTracks()[0].stop();
+      }
+    }
+  },
+
+  /**
+   * @param {string} activationCode
+   * @return {string|null} The validated activation code or null if it's
+   *     invalid.
+   * @private
+   */
+  validateActivationCode_(activationCode) {
+    // TODO(crbug.com/1093185): Add better validation when we know the
+    // constraints.
+    activationCode = activationCode.trim();
+    if (activationCode.length > 3) {
+      return activationCode;
+    }
+    return null;
+  },
+});

ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page_camera.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="1" y="2" width="18" height="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.667 4.167h-2.642L12.5 2.5h-5L5.975 4.167H3.334c-.917 0-1.667.75-1.667 1.666v10c0 .917.75 1.667 1.667 1.667h13.333c.917 0 1.667-.75 1.667-1.667v-10c0-.916-.75-1.666-1.667-1.666zm0 11.666H3.334v-10h13.333v10zm-10-5A3.332 3.332 0 1 1 10 14.166a3.332 3.332 0 0 1-3.333-3.333z" fill="#fff"/></mask><g mask="url(#a)"><path fill="#1A73E8" d="M0 0h20v20H0z"/></g></svg>
\ No newline at end of file

ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page_checked.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.707 7.293a1 1 0 0 0-1.414 0L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414z" fill="#1E8E3E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" fill="#1E8E3E"/></svg>
\ No newline at end of file

ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.html

@@ -5,6 +5,8 @@
 <link rel="import" href="cellular_types.html">
 <link rel="import" href="cellular_setup_delegate.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
+<link rel="import" href="activation_code_page.html">
+<link rel="import" href="final_page.html">
 
 <dom-module id="esim-flow-ui">
   <template>
@@ -15,29 +17,13 @@
         flex: 1 1 auto;
         flex-direction: column;
       }
-
-      #esim-qrcode-detection {
-        /* TODO(crbug.com/1093185): Remove When QR code detection is added */
-        background-color: darkgray;
-        height: 200px;
-        margin: 10px 0;
-      }
     </style>
     <iron-pages attr-for-selected="id"
         selected="[[selectedESimPageName_]]">
-      <!-- TODO(crbug.com/1093185): Move to separate page-->
-      <div id="qr-code-page">
-        [[i18n('scanQRCode')]]
-        <!-- TODO(crbug.com/1093185): Add QR code detection-->
-        <div id="esim-qrcode-detection"></div>
-        <cr-input id="activation-code"
-            label="[[i18n('activationCode')]]"
-            value="{{activationCode_}}">
-        </cr-input>
-      </div>
+      <activation-code-page id="activationCodePage"></activation-code-page>
       <final-page
-        id="final-page"
-        delegate="[[delegate]]" 
+        id="finalPage"
+        delegate="[[delegate]]"
         show-error="[[showError_]]">
       </final-page>
     </iron-pages>

ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.js

@@ -5,8 +5,8 @@
 cr.define('cellular_setup', function() {
   /** @enum{string} */
   /* #export */ const ESimPageName = {
-    ESIM: 'qr-code-page',
-    FINAL: 'final-page',
+    ESIM: 'activationCodePage',
+    FINAL: 'finalPage',
   };
   /**
    * Root element for the eSIM cellular setup flow. This element interacts with
@@ -24,16 +24,6 @@ cr.define('cellular_setup', function() {
       /** @type {!cellular_setup.CellularSetupDelegate} */
       delegate: Object,
 
-      /**
-       * @type {string}
-       * @private
-       */
-      activationCode_: {
-        type: String,
-        value: '',
-        observer: 'onActivationCodeChanged_',
-      },
-
       /**
        * Element name of the current selected sub-page.
        * @type {!cellular_setup.ESimPageName}
@@ -54,6 +44,8 @@ cr.define('cellular_setup', function() {
       },
     },
 
+    listeners: {'activation-code-updated': 'onActivationCodeUpdated_'},
+
     initSubflow() {
       this.buttonState = {
         backward: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
@@ -66,6 +58,16 @@ cr.define('cellular_setup', function() {
       };
     },
 
+    onActivationCodeUpdated_(event) {
+      if (event.detail.activationCode) {
+        this.set(
+            'buttonState.next', cellularSetup.ButtonState.SHOWN_AND_ENABLED);
+      } else {
+        this.set(
+            'buttonState.next', cellularSetup.ButtonState.SHOWN_BUT_DISABLED);
+      }
+    },
+
     navigateForward() {
       this.selectedESimPageName_ = ESimPageName.FINAL;
     },
@@ -77,16 +79,6 @@ cr.define('cellular_setup', function() {
       // TODO(crbug.com/1093185): Handle state when camera is used
       return false;
     },
-
-    /** @private */
-    onActivationCodeChanged_() {
-      if (!this.activationCode_) {
-        this.buttonState.next = cellularSetup.ButtonState.SHOWN_BUT_DISABLED;
-        return;
-      }
-
-      this.buttonState.next = cellularSetup.ButtonState.SHOWN_AND_ENABLED;
-    }
   });
 
   // #cr_define_end

ui/webui/resources/cr_components/chromeos/cellular_setup/setup_selection_flow.js

@@ -26,13 +26,7 @@ Polymer({
   },
 
   initSubflow() {
-    this.buttonState = {
-      backward: cellularSetup.ButtonState.HIDDEN,
-      cancel: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
-      done: cellularSetup.ButtonState.HIDDEN,
-      next: cellularSetup.ButtonState.SHOWN_BUT_DISABLED,
-      tryAgain: cellularSetup.ButtonState.HIDDEN
-    };
+    this.updateButtonState_(this.selectedPage);
   },
 
   /**
@@ -40,20 +34,26 @@ Polymer({
    * @private
    */
   onSetupFlowRadioSelectedChange_(event) {
-    switch (event.detail.value) {
-      case cellularSetup.CellularSetupPageName.PSIM_FLOW_UI:
-        this.selectedPage = cellularSetup.CellularSetupPageName.PSIM_FLOW_UI;
-        this.set(
-            'buttonState.next', cellularSetup.ButtonState.SHOWN_AND_ENABLED);
-        break;
-      case cellularSetup.CellularSetupPageName.ESIM_FLOW_UI:
-        this.selectedPage = cellularSetup.CellularSetupPageName.ESIM_FLOW_UI;
-        this.set(
-            'buttonState.next', cellularSetup.ButtonState.SHOWN_AND_ENABLED);
-        break;
-      default:
-        this.set(
-            'buttonState.next', cellularSetup.ButtonState.SHOWN_BUT_DISABLED);
-    }
+    this.selectedPage = event.detail.value;
+    this.updateButtonState_(this.selectedPage);
   },
+
+  /**
+   * @param {!cellularSetup.CellularSetupPageName} selectedPage
+   * @private
+   */
+  updateButtonState_(selectedPage) {
+    this.buttonState = {
+      backward: cellularSetup.ButtonState.HIDDEN,
+      cancel: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
+      done: cellularSetup.ButtonState.HIDDEN,
+      tryAgain: cellularSetup.ButtonState.HIDDEN
+    };
+    if (selectedPage === cellularSetup.CellularSetupPageName.PSIM_FLOW_UI ||
+        selectedPage === cellularSetup.CellularSetupPageName.ESIM_FLOW_UI) {
+      this.buttonState.next = cellularSetup.ButtonState.SHOWN_AND_ENABLED;
+    } else {
+      this.buttonState.next = cellularSetup.ButtonState.SHOWN_BUT_DISABLED;
+    }
+  }
 });
\ No newline at end of file

ui/webui/resources/cr_components/cr_components_images.grdp

@@ -27,6 +27,14 @@
              compress="gzip" />
 
     <!-- CellularSetup Images -->
+    <include name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_ACTIVATION_CODE_PAGE_CAMERA_SVG"
+             file="cr_components/chromeos/cellular_setup/activation_code_page_camera.svg"
+             type="BINDATA"
+             compress="gzip" />
+    <include name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_ACTIVATION_CODE_PAGE_CHECKED_SVG"
+             file="cr_components/chromeos/cellular_setup/activation_code_page_checked.svg"
+             type="BINDATA"
+             compress="gzip" />
     <include name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_ERROR_1X_PNG"
              file="cr_components/chromeos/cellular_setup/error_1x.png"
              type="BINDATA"