[CellularSetupUi] Add selection flow for for cellular setup

- Adds new string for next button in cellular_setup page
- Abstracts CellularSetupPageName from cellular_page.js to a
  cellular_types.js
- Creates new esim_flow_ui page

- current UI https://imgur.com/owFzj4Z, will have another cl to update
  css and add images.
- UI spec https://docs.google.com/presentation/d/1Mfk5ZMEmeHwSbadUbyRU0Si5k6XDIvw-j4u7TUaCIGY/edit#slide=id.g7dc3c1fe01_5_115

Bug: 1093185
Change-Id: I5a9a960de9b5c578b5e46b322c972e27d17c38d0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2348291
Commit-Queue: Nnamdi Theodore Johnson-kanu <tjohnsonkanu@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#801515}

chrome/app/chromeos_strings.grdp

@@ -258,6 +258,9 @@
   <message name="IDS_CELLULAR_SETUP_TRY_AGAIN_LABEL" desc="Label for button to retry a step during cellular setup">
     Try again
   </message>
+  <message name="IDS_CELLULAR_SETUP_NEXT_LABEL" desc="Label for button that advances to next step during cellular setup">
+    Next
+  </message>
   <message name="IDS_CELLULAR_SETUP_SIM_DETECT_PAGE_TITLE" desc="Title for first screen of cellular setup during which ChromeOS is preparing the cellular device for setup.">
     Preparing to setup your cellular device...
   </message>
@@ -291,6 +294,12 @@
   <message name="IDS_CELLULAR_SETUP_FINAL_PAGE_ERROR_MESSAGE" desc="Message displayed under title in final screen of cellular setup when ChromeOS encountered an error completing activation.">
     An error occured during activation.
   </message>
+   <message name="IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_PSIM_LABEL" desc="Label for physical SIM (pSIM) setup flow card radio select button during cellular setup">
+    Physical SIM
+  </message>
+   <message name="IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_LABEL" desc="Label for electronic SIM (eSIM) setup flow card radio select button during cellular setup">
+    eSim setup
+  </message>
 
   <!-- Upgrade notifications -->
   <message name="IDS_RELAUNCH_REQUIRED_TITLE_DAYS" desc="The title of a dialog that tells users the device must be restarted within two or more days.">

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_LABEL.png.sha1

+b02f37817e28230b800cf15aeafd36aba7a81915
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_PSIM_LABEL.png.sha1

+b02f37817e28230b800cf15aeafd36aba7a81915
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_NEXT_LABEL.png.sha1

+9fc4ad0058dcc001620e284d9e38d7c21397a6ba
\ No newline at end of file

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

@@ -20,6 +20,8 @@ namespace {
 constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"cancel", IDS_CANCEL},
     {"back", IDS_CELLULAR_SETUP_BACK_LABEL},
+    {"eSimFlowSetup", IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_LABEL},
+    {"next", IDS_CELLULAR_SETUP_NEXT_LABEL},
     {"finish", IDS_CELLULAR_SETUP_FINISH_LABEL},
     {"tryAgain", IDS_CELLULAR_SETUP_TRY_AGAIN_LABEL},
     {"simDetectPageTitle", IDS_CELLULAR_SETUP_SIM_DETECT_PAGE_TITLE},
@@ -34,11 +36,11 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
      IDS_CELLULAR_SETUP_PROVISIONING_PAGE_ERROR_TITLE},
     {"provisioningPageErrorMessage",
      IDS_CELLULAR_SETUP_PROVISIONING_PAGE_ERROR_MESSAGE},
+    {"pSimFlowSetup", IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_PSIM_LABEL},
     {"finalPageTitle", IDS_CELLULAR_SETUP_FINAL_PAGE_TITLE},
     {"finalPageMessage", IDS_CELLULAR_SETUP_FINAL_PAGE_MESSAGE},
     {"finalPageErrorTitle", IDS_CELLULAR_SETUP_FINAL_PAGE_ERROR_TITLE},
     {"finalPageErrorMessage", IDS_CELLULAR_SETUP_FINAL_PAGE_ERROR_MESSAGE}};
-
 }  //  namespace
 
 void AddLocalizedStrings(content::WebUIDataSource* html_source) {

chrome/test/data/webui/cr_components/chromeos/cellular_setup/BUILD.gn

@@ -3,6 +3,7 @@
 # found in the LICENSE file.
 
 import("//ui/webui/resources/tools/js_modulizer.gni")
+import("//ui/webui/resources/cr_components/chromeos/os_cr_components.gni")
 
 js_modulizer("modulize") {
   input_files = [
@@ -12,4 +13,5 @@ js_modulizer("modulize") {
     "sim_detect_page_test.js",
     "provisioning_page_test.js",
   ]
+  namespace_rewrites = cr_components_chromeos_namespace_rewrites
 }

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

@@ -7,10 +7,12 @@
 // #import 'chrome://resources/cr_components/chromeos/cellular_setup/button_bar.m.js';
 
 // #import {flush, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {ButtonState, Button, ButtonBarState, CellularSetupPageName} from 'chrome://resources/cr_components/chromeos/cellular_setup/cellular_types.m.js';
 // #import {assertFalse, assertTrue} from '../../../chai_assert.js';
 // clang-format on
 
 suite('CellularSetupButtonBarTest', function() {
+  /** @type {!ButtonBarElement} */
   let buttonBar;
   setup(function() {
     buttonBar = document.createElement('button-bar');
@@ -18,8 +20,72 @@ suite('CellularSetupButtonBarTest', function() {
     Polymer.dom.flush();
   });
 
-  test('Base test', function() {
-    const title = buttonBar.$$('cr-button');
-    assertTrue(!!title);
+  teardown(function() {
+    buttonBar.remove();
+  });
+
+  /**
+   * @param {!cellularSetup.ButtonBarState} state
+   */
+  function setStateForAllButtons(state) {
+    buttonBar.buttonState = {
+      backward: state,
+      cancel: state,
+      finish: state,
+      next: state,
+      tryAgain: state
+    };
+    Polymer.dom.flush();
+  }
+
+  /**
+   * @param {!HTMLElement} button
+   * @returns {boolean}
+   */
+  function isButtonShownAndEnabled(button) {
+    return !button.hidden && !button.disabled;
+  }
+
+  /**
+   * @param {!HTMLElement} button
+   * @returns {boolean}
+   */
+  function isButtonShownAndDisabled(button) {
+    return !button.hidden && button.disabled;
+  }
+
+  /**
+   * @param {!HTMLElement} button
+   * @returns {boolean}
+   */
+  function isButtonHidden(button) {
+    return !!button.hidden;
+  }
+
+  test('individual buttons appear if enabled', function() {
+    setStateForAllButtons(cellularSetup.ButtonState.SHOWN_AND_ENABLED);
+    assertTrue(isButtonShownAndEnabled(buttonBar.$$('#backward')));
+    assertTrue(isButtonShownAndEnabled(buttonBar.$$('#cancel')));
+    assertTrue(isButtonShownAndEnabled(buttonBar.$$('#tryAgain')));
+    assertTrue(isButtonShownAndEnabled(buttonBar.$$('#finish')));
+    assertTrue(isButtonShownAndEnabled(buttonBar.$$('#next')));
+  });
+
+  test('individual buttons appear but are diabled', function() {
+    setStateForAllButtons(cellularSetup.ButtonState.SHOWN_BUT_DISABLED);
+    assertTrue(isButtonShownAndDisabled(buttonBar.$$('#backward')));
+    assertTrue(isButtonShownAndDisabled(buttonBar.$$('#cancel')));
+    assertTrue(isButtonShownAndDisabled(buttonBar.$$('#tryAgain')));
+    assertTrue(isButtonShownAndDisabled(buttonBar.$$('#finish')));
+    assertTrue(isButtonShownAndDisabled(buttonBar.$$('#next')));
+  });
+
+  test('individual buttons are hidden', function() {
+    setStateForAllButtons(cellularSetup.ButtonState.HIDDEN);
+    assertTrue(isButtonHidden(buttonBar.$$('#backward')));
+    assertTrue(isButtonHidden(buttonBar.$$('#cancel')));
+    assertTrue(isButtonHidden(buttonBar.$$('#tryAgain')));
+    assertTrue(isButtonHidden(buttonBar.$$('#finish')));
+    assertTrue(isButtonHidden(buttonBar.$$('#next')));
   });
 });

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

@@ -18,13 +18,17 @@ js_type_check("closure_compile") {
     ":mojo_interface_provider",
     ":provisioning_page",
     ":psim_flow_ui",
+    ":setup_selection_flow",
     ":sim_detect_page",
     ":webview_post_util",
   ]
 }
 
 js_library("button_bar") {
-  deps = [ "//ui/webui/resources/js:i18n_behavior" ]
+  deps = [
+    ":cellular_types",
+    "//ui/webui/resources/js:i18n_behavior",
+  ]
 }
 
 js_library("base_page") {
@@ -59,19 +63,52 @@ js_library("final_page") {
 
 js_library("psim_flow_ui") {
   deps = [
+    ":cellular_types",
     ":final_page",
     ":mojo_interface_provider",
     ":provisioning_page",
     ":sim_detect_page",
+    ":subflow_behavior",
     "//chromeos/services/cellular_setup/public/mojom:mojom_js_library_for_compile",
     "//ui/webui/resources/js:i18n_behavior",
   ]
 }
 
+js_library("esim_flow_ui") {
+  deps = [
+    ":cellular_types",
+    ":subflow_behavior",
+    "//ui/webui/resources/js:i18n_behavior",
+  ]
+}
+
+js_library("setup_selection_flow") {
+  deps = [
+    ":cellular_types",
+    ":subflow_behavior",
+    "//ui/webui/resources/js:i18n_behavior",
+  ]
+}
+
+js_library("subflow_behavior") {
+  deps = [
+    ":cellular_types",
+    "//ui/webui/resources/js:cr",
+  ]
+}
+
+js_library("cellular_types") {
+  deps = [ "//ui/webui/resources/js:cr" ]
+}
+
 js_library("cellular_setup") {
   deps = [
     ":button_bar",
+    ":cellular_types",
+    ":esim_flow_ui",
     ":psim_flow_ui",
+    ":setup_selection_flow",
+    "//ui/webui/resources/js:i18n_behavior",
   ]
 }
 
@@ -89,6 +126,7 @@ js_type_check("closure_compile_module") {
   deps = [
     ":base_page.m",
     ":button_bar.m",
+    ":cellular_types.m",
 
     # ":cellular_setup.m",
     ":final_page.m",
@@ -97,6 +135,8 @@ js_type_check("closure_compile_module") {
 
     # ":psim_flow_ui.m",
     ":sim_detect_page.m",
+
+    # ":setup_selection_flow.m",
     ":webview_post_util.m",
   ]
 }
@@ -165,10 +205,17 @@ js_library("button_bar.m") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
+    ":cellular_types.m",
   ]
   extra_deps = [ ":button_bar_module" ]
 }
 
+js_library("cellular_types.m") {
+  sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_types.m.js" ]
+   deps = []
+  extra_deps = [ ":modulize" ]
+}
+
 group("polymer3_elements") {
   public_deps = [
     ":base_page_module",
@@ -224,6 +271,7 @@ js_modulizer("modulize") {
   input_files = [
     "mojo_interface_provider.js",
     "webview_post_util.js",
+    "cellular_types.js"
   ]
   namespace_rewrites = cr_components_chromeos_namespace_rewrites
 }

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

 <link rel="import" href="../../../html/polymer.html">
 
+<link rel="import" href="cellular_types.html">
 <link rel="import" href="../../../html/i18n_behavior.html">
 <link rel="import" href="../../../cr_elements/cr_button/cr_button.html">
 <link rel="import" href="../../../cr_elements/shared_style_css.html">
 <link rel="import" href="../../../cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
 
 <dom-module id="button-bar">
@@ -18,27 +20,38 @@
     <cr-button id="backward"
         class="cancel-button"
         on-click="onBackwardButtonClicked_"
-        hidden$="[[showCancelButton]]">
+        disabled="[[isButtonDisabled_(Button.BACKWARD, buttonState.*)]]"
+        hidden$="[[isButtonHidden_(Button.BACKWARD, buttonState.*)]]">
       [[i18n('back')]]
     </cr-button>
     <cr-button id="cancel"
         class="cancel-button"
         on-click="onBackwardButtonClicked_"
-        hidden$="[[!showCancelButton]]">
+        disabled="[[isButtonDisabled_(Button.CANCEL, buttonState.*)]]"
+        hidden$="[[isButtonHidden_(Button.CANCEL, buttonState.*)]]">
       [[i18n('cancel')]]
     </cr-button>
     <cr-button id="tryAgain"
         class="action-button"
         on-click="onTryAgainButtonClicked_"
-        hidden$="[[!showTryAgainButton]]">
+        disabled="[[isButtonDisabled_(Button.TRY_AGAIN, buttonState.*)]]"
+        hidden$="[[isButtonHidden_(Button.TRY_AGAIN, buttonState.*)]]">
       [[i18n('tryAgain')]]
     </cr-button>
     <cr-button id="finish"
         class="action-button"
         on-click="onFinishButtonClicked_"
-        hidden$="[[!showFinishButton]]">
+        disabled="[[isButtonDisabled_(Button.FINISH, buttonState.*)]]"
+        hidden$="[[isButtonHidden_(Button.FINISH, buttonState.*)]]">
       [[i18n('finish')]]
     </cr-button>
+    <cr-button id="next"
+        class="action-button"
+        on-click="onNextButtonClicked_"
+        disabled="[[isButtonDisabled_(Button.NEXT, buttonState.*)]]"
+        hidden$="[[isButtonHidden_(Button.NEXT, buttonState.*)]]">
+      [[i18n('next')]]
+    </cr-button>
   </template>
   <script src="button_bar.js"></script>
 </dom-module>

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

@@ -6,26 +6,44 @@
 Polymer({
   is: 'button-bar',
 
-  behaviors: [I18nBehavior],
+  behaviors: [
+    I18nBehavior,
+  ],
 
   properties: {
-    /** When set, displays the Try Again action button. */
-    showTryAgainButton: {
-      type: Boolean,
-      value: false,
-    },
+    /**
+     * Sets the states of all buttons
+     * @type {!cellularSetup.ButtonBarState}
+     */
+    buttonState: {type: Object, value: {}},
 
-    /** When set, displays the Finish action button. */
-    showFinishButton: {
-      type: Boolean,
-      value: false,
+    /**
+     * @type {!cellularSetup.Button}
+     */
+    Button: {
+      type: Object,
+      value: cellularSetup.Button,
+    },
   },
 
-    /** When set, displays a cancel button instead of back. */
-    showCancelButton: {
-      type: Boolean,
-      value: false,
+  /**
+   * @param {!cellularSetup.Button} buttonName
+   * @return {boolean}
+   * @private
+   */
+  isButtonHidden_(buttonName) {
+    const state = this.getButtonBarState_(buttonName);
+    return state === cellularSetup.ButtonState.HIDDEN;
   },
+
+  /**
+   * @param {!cellularSetup.Button} buttonName
+   * @return {boolean}
+   * @private
+   */
+  isButtonDisabled_(buttonName) {
+    const state = this.getButtonBarState_(buttonName);
+    return state === cellularSetup.ButtonState.SHOWN_BUT_DISABLED;
   },
 
   /** @private */
@@ -42,4 +60,33 @@ Polymer({
   onFinishButtonClicked_() {
     this.fire('complete-flow-requested');
   },
+
+  /** @private */
+  onNextButtonClicked_() {
+    this.fire('forward-nav-requested');
+  },
+
+  /**
+   * @param {!cellularSetup.Button} button
+   * @returns {!cellularSetup.ButtonState|undefined}
+   * @private
+   */
+  getButtonBarState_(button) {
+    assert(this.buttonState);
+    switch (button) {
+      case cellularSetup.Button.BACKWARD:
+        return this.buttonState.backward;
+      case cellularSetup.Button.CANCEL:
+        return this.buttonState.cancel;
+      case cellularSetup.Button.FINISH:
+        return this.buttonState.finish;
+      case cellularSetup.Button.NEXT:
+        return this.buttonState.next;
+      case cellularSetup.Button.TRY_AGAIN:
+        return this.buttonState.tryAgain;
+      default:
+        assertNotReached();
+        return cellularSetup.ButtonState.SHOWN_AND_ENABLED;
+    }
+  }
 });

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

@@ -2,7 +2,10 @@
 
 <link rel="import" href="button_bar.html">
 <link rel="import" href="psim_flow_ui.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
+<link rel="import" href="esim_flow_ui.html">
+<link rel="import" href="cellular_types.html">
+<link rel="import" href="setup_selection_flow.html">
+<link rel="import" href="../../../html/i18n_behavior.html">
 
 <dom-module id="cellular-setup">
   <template>
@@ -11,21 +14,26 @@
         flex: 1 1 auto;
         padding: 10px;
       }
-
-      iron-pages {
-        display: flex;
-        flex: 1 1 auto;
-      }
     </style>
-    <iron-pages attr-for-selected="is"
-        selected="[[selectedPageName_]]">
-      <!-- TODO(hsuregan): Implement <setup-flow-selection>. -->
-      <psim-flow-ui></psim-flow-ui>
-      <!-- TODO(hsuregan): Implement <esim-flow>. -->
+    <iron-pages
+        attr-for-selected="id"
+        selected="[[currentPageName_]]"
+        selected-item="{{currentPage_}}">
+      <setup-selection-flow
+          selected-page="{{selectedFlow_}}"
+          button-state="{{buttonState_}}"
+          id="setup-selection-flow">
+      </setup-selection-flow>
+      <template is="dom-if"
+          if="[[isPSimSelected_(currentPageName_)]]" restamp>
+        <psim-flow-ui button-state="{{buttonState_}}" id="psim-flow-ui"></psim-flow-ui>
+      </template>
+      <template is="dom-if"
+          if="[[isESimSelected_(currentPageName_)]]" restamp>
+        <esim-flow-ui button-state="{{buttonState_}}" id="esim-flow-ui"></esim-flow-ui>
+      </template>
     </iron-pages>
-    <button-bar show-try-again-button="[[showTryAgainButton_]]"
-        show-finish-button="[[showFinishButton_]]"
-        show-cancel-button="[[showCancelButton_]]">
+    <button-bar button-state="[[buttonState_]]">
     </button-bar>
   </template>
   <script src="cellular_setup.js">

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

@@ -2,17 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-cr.define('cellularSetup', function() {
-  /** @enum{string} */
-  const CellularSetupPageName = {
-    PSIM_FLOW_UI: 'psim-flow-ui',
-  };
-
-  return {
-    CellularSetupPageName: CellularSetupPageName,
-  };
-});
-
 /**
  * @fileoverview Root element for the cellular setup flow. This element wraps
  * the psim setup flow, esim setup flow, and setup flow selection page.
@@ -20,15 +9,45 @@ cr.define('cellularSetup', function() {
 Polymer({
   is: 'cellular-setup',
 
+  behaviors: [I18nBehavior],
+
   properties: {
     /**
-     * Element name of the current selected sub-page.
-     * @private {!cellularSetup.CellularSetupPageName}
+     * Name of the currently displayed sub-page.
+     * @private {!cellularSetup.CellularSetupPageName|null}
      */
-    selectedPageName_: {
+    currentPageName_: {
       type: String,
-      value: cellularSetup.CellularSetupPageName.PSIM_FLOW_UI,
+      value: cellularSetup.CellularSetupPageName.SETUP_FLOW_SELECTION,
+    },
+
+    /**
+     * Current user selected setup flow page name.
+     * @private {!cellularSetup.CellularSetupPageName|null}
+     */
+    selectedFlow_: {
+      type: String,
+      value: null,
+    },
+
+    /**
+     * Button bar button state.
+     * @private {!cellularSetup.ButtonBarState}
+     */
+    buttonState_: {
+      type: Object,
       notify: true,
+    },
+
+    /**
+     * DOM Element corresponding to the visible page.
+     *
+     * @private {!SetupSelectionFlowElement|!PsimFlowUiElement|
+     *           !EsimFlowUiElement}
+     */
+    currentPage_: {
+      type: Object,
+      observer: 'onPageChange_',
     }
   },
 
@@ -36,11 +55,25 @@ Polymer({
     'backward-nav-requested': 'onBackwardNavRequested_',
     'retry-requested': 'onRetryRequested_',
     'complete-flow-requested': 'onCompleteFlowRequested_',
+    'forward-nav-requested': 'onForwardNavRequested_',
+  },
+
+  /** @private */
+  onPageChange_() {
+    this.currentPage_.initSubflow();
   },
 
   /** @private */
   onBackwardNavRequested_() {
-    // TODO(crbug.com/1093185): Add back navigation.
+    const isNavHandled = this.currentPage_.attemptBackwardNavigation();
+
+    // Subflow returns false in a state where it cannot perform backward
+    // navigation any more. Switch back to the selection flow in this case so
+    // that the user can select a flow again.
+    if (!isNavHandled) {
+      this.currentPageName_ =
+          cellularSetup.CellularSetupPageName.SETUP_FLOW_SELECTION;
+    }
   },
 
   /** @private */
@@ -52,4 +85,32 @@ Polymer({
   onCompleteFlowRequested_() {
     // TODO(crbug.com/1093185): Add completion logic.
   },
+
+  /** @private */
+  onForwardNavRequested_() {
+    // Switch current page to user selected flow when navigating forward from
+    // setup selection.
+    if (this.currentPageName_ ===
+        cellularSetup.CellularSetupPageName.SETUP_FLOW_SELECTION) {
+      this.currentPageName_ = this.selectedFlow_;
+      return;
+    }
+    this.currentPage_.navigateForward();
+  },
+
+  /**
+   * @param {string} currentPage
+   * @private
+   */
+  isPSimSelected_(currentPage) {
+    return currentPage === cellularSetup.CellularSetupPageName.PSIM_FLOW_UI;
+  },
+
+  /**
+   * @param {string} currentPage
+   * @private
+   */
+  isESimSelected_(currentPage) {
+    return currentPage === cellularSetup.CellularSetupPageName.ESIM_FLOW_UI;
+  }
 });

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

+<link rel="import" href="../../../html/cr.html">
+
+<script src="cellular_types.js"></script>
\ No newline at end of file

ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_types.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.
+
+/**
+ * @fileoverview Constants used in cellular setup flow.
+ */
+cr.define('cellularSetup', function() {
+  /** @enum {string} */
+  /* #export */ const CellularSetupPageName = {
+    ESIM_FLOW_UI: 'esim-flow-ui',
+    PSIM_FLOW_UI: 'psim-flow-ui',
+    SETUP_FLOW_SELECTION: 'setup-selection-flow'
+  };
+
+  /** @enum {number} */
+  /* #export */ const ButtonState = {
+    HIDDEN: 1,
+    SHOWN_AND_ENABLED: 2,
+    SHOWN_BUT_DISABLED: 3,
+  };
+
+  /** @enum {number} */
+  /* #export */ const Button = {BACKWARD: 1, CANCEL: 2, FINISH: 3, NEXT: 4, TRY_AGAIN: 5};
+
+  /**
+   * @typedef {{
+   *   backward: (!cellularSetup.ButtonState|undefined),
+   *   cancel: (!cellularSetup.ButtonState|undefined),
+   *   finish: (!cellularSetup.ButtonState|undefined),
+   *   next: (!cellularSetup.ButtonState|undefined),
+   *   tryAgain: (!cellularSetup.ButtonState|undefined),
+   * }}
+   */
+  /* #export */ let ButtonBarState;
+
+  // #cr_define_end
+  return {
+    ButtonState: ButtonState,
+    Button: Button,
+    ButtonBarState: ButtonBarState,
+    CellularSetupPageName: CellularSetupPageName,
+  };
+});

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

+<link rel="import" href="../../../html/polymer.html">
+<link rel="import" href="../../../html/i18n_behavior.html">
+<link rel="import" href="subflow_behavior.html">
+
+<dom-module id="esim-flow-ui">
+  <template>
+    <style include="iron-flex">
+      :host {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+      }
+    </style>
+    <!-- TODO(crbug.com/1093185): Add eSIM UI-->
+    <p>TODO(eSIM flow)</p>
+  </template>
+  <script src="esim_flow_ui.js">
+  </script>
+</dom-module>
\ No newline at end of file

ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.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.
+
+/**
+ * Root element for the eSIM cellular setup flow. This element interacts with
+ * the CellularSetup service to carry out the esim activation flow.
+ */
+Polymer({
+  is: 'esim-flow-ui',
+
+  behaviors: [
+    SubflowBehavior,
+  ],
+
+  initSubflow() {
+    this.buttonState = {
+      backward: cellularSetup.ButtonState.HIDDEN,
+      cancel: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
+      finish: cellularSetup.ButtonState.HIDDEN,
+      next: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
+      tryAgain: cellularSetup.ButtonState.HIDDEN
+    };
+  },
+});

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

@@ -5,6 +5,7 @@
 <link rel="import" href="sim_detect_page.html">
 <link rel="import" href="provisioning_page.html">
 <link rel="import" href="final_page.html">
+<link rel="import" href="subflow_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">

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

@@ -67,7 +67,10 @@ cr.define('cellularSetup', function() {
 Polymer({
   is: 'psim-flow-ui',
 
-  behaviors: [I18nBehavior],
+  behaviors: [
+    I18nBehavior,
+    SubflowBehavior,
+  ],
 
   properties: {
     /** @private {!cellularSetup.PSimUIState} */
@@ -166,11 +169,6 @@ Polymer({
         cellular_setup.MojoInterfaceProviderImpl.getInstance();
   },
 
-  /** @override */
-  ready() {
-    this.state_ = cellularSetup.PSimUIState.STARTING_ACTIVATION;
-  },
-
   /**
    * Overrides chromeos.cellularSetup.mojom.ActivationDelegateInterface.
    * @param {!chromeos.cellularSetup.mojom.CellularMetadata} metadata
@@ -182,6 +180,17 @@ Polymer({
     this.state_ = cellularSetup.PSimUIState.WAITING_FOR_PORTAL_TO_LOAD;
   },
 
+  initSubflow() {
+    this.state_ = cellularSetup.PSimUIState.STARTING_ACTIVATION;
+    this.set('buttonState', {
+      backward: cellularSetup.ButtonState.HIDDEN,
+      cancel: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
+      finish: cellularSetup.ButtonState.HIDDEN,
+      next: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
+      tryAgain: cellularSetup.ButtonState.HIDDEN
+    });
+  },
+
   /**
    * Overrides chromeos.cellularSetup.mojom.ActivationDelegateInterface.
    * @param {!chromeos.cellularSetup.mojom.ActivationResult} result

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

+<link rel="import" href="../../../html/polymer.html">
+
+<link rel="import" href="../../../html/i18n_behavior.html">
+<link rel="import" href="cellular_types.html">
+<link rel="import" href="subflow_behavior.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_card_radio_button.html">
+
+<dom-module id="setup-selection-flow">
+  <template>
+    <style include="iron-flex">
+      #setup-flow-select-radio {
+        display: flex;
+        flex-direction: row;
+      }
+    </style>
+    <cr-radio-group
+        name="setup-flow-selection"
+        id="setup-flow-select-radio"
+        selected="{{setupFlowSelection_}}"
+        on-selected-changed="onSetupFlowRadioSelectedChange_">
+      <!-- TODO(crbug.com/1093185): Add icons for pSIM and eSIM-->
+      <cr-card-radio-button name="psim-flow-ui">
+        [[i18n('pSimFlowSetup')]]
+      </cr-card-radio-button>
+      <cr-card-radio-button name="esim-flow-ui" >
+        [[i18n('eSimFlowSetup')]]
+      </cr-card-radio-button>
+    </cr-radio-group>
+  </template>
+  <script src="setup_selection_flow.js">
+  </script>
+</dom-module>
\ No newline at end of file

ui/webui/resources/cr_components/chromeos/cellular_setup/setup_selection_flow.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.
+
+/**
+ * Cellular setup selection subflow. This element allows user to select
+ * between eSim and pSim setup subflows.
+ */
+Polymer({
+  is: 'setup-selection-flow',
+
+  behaviors: [
+    I18nBehavior,
+    SubflowBehavior,
+  ],
+
+  properties: {
+    /**
+     * Element name of the current selected sub-page.
+     * @private {!cellularSetup.CellularSetupPageName}
+     */
+    selectedPage: {
+      type: String,
+      notify: true,
+    }
+  },
+
+  initSubflow() {
+    this.buttonState = {
+      backward: cellularSetup.ButtonState.HIDDEN,
+      cancel: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
+      finish: cellularSetup.ButtonState.HIDDEN,
+      next: cellularSetup.ButtonState.SHOWN_BUT_DISABLED,
+      tryAgain: cellularSetup.ButtonState.HIDDEN
+    };
+  },
+
+  /**
+   * @param {!Event} event
+   * @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);
+    }
+  },
+});
\ No newline at end of file

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

+<link rel="import" href="../../../html/cr.html">
+<link rel="import" href="../../../html/i18n_behavior.html">
+
+<script src="subflow_behavior.js"></script>
\ No newline at end of file

ui/webui/resources/cr_components/chromeos/cellular_setup/subflow_behavior.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.
+
+/**
+ * @fileoverview Polymer behavior for dealing with Cellular setup subflows.
+ * It includes some methods and property shared between subflows.
+ */
+
+/** @polymerBehavior */
+const SubflowBehavior = {
+  properties: {
+
+    /**
+     * Button bar button state.
+     * @type {!cellularSetup.ButtonBarState}
+     */
+    buttonState: {
+      type: Object,
+      notify: true,
+    },
+  },
+
+  /**
+   * Initialize the subflow.
+   */
+  initSubflow() {
+    assertNotReached();
+  },
+
+  /**
+   * Handles forward navigation within subpage.
+   */
+  navigateForward() {
+    assertNotReached();
+  },
+
+  /**
+   * Handles backward navigation within subpage.
+   * @returns {boolean} true if backward navigation was handled.
+   */
+  attemptBackwardNavigation() {
+    assertNotReached();
+  },
+};
\ No newline at end of file

ui/webui/resources/cr_components/chromeos/os_cr_components.gni

@@ -10,10 +10,15 @@ cr_components_chromeos_namespace_rewrites = [
   "settings.LockScreenProgress|LockScreenProgress",
   "cellular_setup.MojoInterfaceProvider|MojoInterfaceProvider",
   "webviewPost.util.postDeviceDataToWebview|postDeviceDataToWebview",
+  "cellularSetup.ButtonState|ButtonState",
+  "cellularSetup.Button|Button",
+  "cellularSetup.ButtonBarState|ButtonBarState",
+  "cellularSetup.CellularSetupPageName|CellularSetupPageName",
 ]
 
 cr_components_chromeos_auto_imports = [
   "ui/webui/resources/cr_elements/policy/cr_policy_indicator_behavior.html|CrPolicyIndicatorType",
+  "ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_types.html|ButtonState,Button,ButtonBarState,CellularSetupPageName",
   "ui/webui/resources/cr_components/chromeos/network/cr_policy_network_behavior_mojo.html|CrPolicyNetworkBehaviorMojo",
   "ui/webui/resources/cr_components/chromeos/network/onc_mojo.html|OncMojo",
   "ui/webui/resources/cr_components/chromeos/network/network_listener_behavior.html|NetworkListenerBehavior",

ui/webui/resources/cr_components/cr_components_resources.grdp

@@ -140,6 +140,18 @@
     <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_PSIM_FLOW_JS"
                file="cr_components/chromeos/cellular_setup/psim_flow_ui.js"
                type="chrome_html" />
+    <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_ESIM_FLOW_HTML"
+               file="cr_components/chromeos/cellular_setup/esim_flow_ui.html"
+               type="chrome_html" />
+    <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_ESIM_FLOW_JS"
+               file="cr_components/chromeos/cellular_setup/esim_flow_ui.js"
+               type="chrome_html" />
+    <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_TYPES_JS"
+               file="cr_components/chromeos/cellular_setup/cellular_types.js"
+               type="chrome_html" />
+    <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_TYPES_HTML"
+               file="cr_components/chromeos/cellular_setup/cellular_types.html"
+               type="chrome_html" />
     <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_MOJO_INTERFACE_PROVIDER_HTML"
                file="cr_components/chromeos/cellular_setup/mojo_interface_provider.html"
                type="chrome_html" />
@@ -182,6 +194,18 @@
     <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_WEBVIEW_POST_UTIL_JS"
                file="cr_components/chromeos/cellular_setup/webview_post_util.js"
                type="chrome_html" />
+     <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_SELECTION_FLOW_HTML"
+               file="cr_components/chromeos/cellular_setup/setup_selection_flow.html"
+               type="chrome_html" />
+    <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_SELECTION_FLOW_JS"
+               file="cr_components/chromeos/cellular_setup/setup_selection_flow.js"
+               type="chrome_html" />
+     <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SUBFLOW_BEHAVIOR_HTML"
+               file="cr_components/chromeos/cellular_setup/subflow_behavior.html"
+               type="chrome_html" />
+    <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SUBFLOW_BEHAVIOR_JS"
+               file="cr_components/chromeos/cellular_setup/subflow_behavior.js"
+               type="chrome_html" />
 
     <!-- Shared between MultiDevice setup flow and OOBE. -->
     <structure name="IDR_WEBUI_CHROMEOS_MULTIDEVICE_SETUP_MULTIDEVICE_SETUP_BROWSER_PROXY_HTML"

ui/webui/resources/cr_components/cr_components_resources_v3.grdp

@@ -152,6 +152,10 @@
            file="${root_gen_dir}/ui/webui/resources/cr_components/chromeos/cellular_setup/button_bar.m.js"
            use_base_dir="false"
            type="BINDATA" />
+    <include name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_CELLULAR_TYPES_M_JS"
+           file="${root_gen_dir}/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_types.m.js"
+           use_base_dir="false"
+           type="BINDATA" />
   </if>
   <if expr="use_nss_certs">
     <include name="IDR_WEBUI_CA_TRUST_EDIT_DIALOG_JS"