[CrOS Settings] Error and no profile states for confirmation code page.

Add UI for invalid confirmation code state on confirmation code page
and UI for 'No profile' state when the user comes from activation
code page.

Screenshot:
https://screenshot.googleplex.com/PZgyBnE96aXgM4w.png

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

chrome/app/chromeos_strings.grdp

@@ -361,11 +361,14 @@
     Close EID and QR code popup
   </message>
   <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_CONFIRMATION_CODE_MESSAGE" desc="Message, prompting the user to enter the confirmation code to activate an eSIM profile.">
-    Please enter your confirmation code for <ph name="PROFILE_NAME">$1<ex>Google Fi</ex></ph>.
+    Please enter your confirmation code.
   </message>
   <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_CONFIRMATION_CODE_INPUT" desc="Label for the input used to enter the confirmation code to activate an eSIM profile.">
     Confirmation code
   </message>
+  <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_CONFIRMATION_CODE_ERROR" desc="Message, informing the user the confirmation code entered to activate an eSIM profile is invalid and to contact their carrier.">
+    Unable to connect to this profile. For technical support, please contact your carrier.
+  </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_ESIM_PAGE_CONFIRMATION_CODE_ERROR.png.sha1

+99da880e354efa01a0f8a5e86af1da402983d3df
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_ESIM_PAGE_CONFIRMATION_CODE_MESSAGE.png.sha1

-010932e9ce938b6970f3c0c11b363376d1168b0d
\ No newline at end of file
+99da880e354efa01a0f8a5e86af1da402983d3df
\ No newline at end of file

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

@@ -73,7 +73,9 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"confirmationCodeMessage",
      IDS_CELLULAR_SETUP_ESIM_PAGE_CONFIRMATION_CODE_MESSAGE},
     {"confirmationCodeInput",
-     IDS_CELLULAR_SETUP_ESIM_PAGE_CONFIRMATION_CODE_INPUT}};  // namespace
+     IDS_CELLULAR_SETUP_ESIM_PAGE_CONFIRMATION_CODE_INPUT},
+    {"confirmationCodeError",
+     IDS_CELLULAR_SETUP_ESIM_PAGE_CONFIRMATION_CODE_ERROR}};  // namespace
 
 struct NamedBoolean {
   const char* name;

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

@@ -59,6 +59,20 @@ suite('CrComponentsEsimFlowUiTest', function() {
     assertEquals(ironPages.selected, page.id);
   }
 
+  function enterConfirmationCode() {
+    const confirmationCodeInput = confirmationCodePage.$$('#confirmationCode');
+    confirmationCodeInput.value = 'CONFIRMATION_CODE';
+    assertFalse(confirmationCodeInput.invalid);
+
+    // Next button should now be enabled.
+    assertTrue(
+        eSimPage.buttonState.next ===
+        cellularSetup.ButtonState.SHOWN_AND_ENABLED);
+
+    eSimPage.navigateForward();
+    return confirmationCodeInput;
+  }
+
   suite('No eSIM profiles flow', function() {
     let euicc;
 
@@ -126,19 +140,37 @@ suite('CrComponentsEsimFlowUiTest', function() {
 
       euicc.setProfileInstallResultForTest(
           chromeos.cellularSetup.mojom.ProfileInstallResult.kSuccess);
-      confirmationCodePage.$$('#confirmationCode').value = 'CONFIRMATION_CODE';
+      enterConfirmationCode();
 
-      // Next button should now be enabled.
-      assertTrue(
-          eSimPage.buttonState.next ===
-          cellularSetup.ButtonState.SHOWN_AND_ENABLED);
+      await flushAsync();
+
+      // Should go to final page.
+      assertSelectedPage(cellular_setup.ESimPageName.FINAL, finalPage);
+    });
+
+    test('Invalid confirmation code', async function() {
+      euicc.setProfileInstallResultForTest(
+          chromeos.cellularSetup.mojom.ProfileInstallResult
+              .kErrorNeedsConfirmationCode);
 
       eSimPage.navigateForward();
 
       await flushAsync();
 
-      // Should go to final page.
-      assertSelectedPage(cellular_setup.ESimPageName.FINAL, finalPage);
+      // Confirmation code page should be showing.
+      assertSelectedPage(
+          cellular_setup.ESimPageName.CONFIRMATION_CODE, confirmationCodePage);
+
+      euicc.setProfileInstallResultForTest(
+          chromeos.cellularSetup.mojom.ProfileInstallResult.kFailure);
+      const confirmationCodeInput = enterConfirmationCode();
+
+      await flushAsync();
+
+      // Should still be at confirmation code page with input showing error.
+      assertSelectedPage(
+          cellular_setup.ESimPageName.CONFIRMATION_CODE, confirmationCodePage);
+      assertTrue(confirmationCodeInput.invalid);
     });
   });
 
@@ -197,20 +229,40 @@ suite('CrComponentsEsimFlowUiTest', function() {
 
       profile.setProfileInstallResultForTest(
           chromeos.cellularSetup.mojom.ProfileInstallResult.kSuccess);
-      confirmationCodePage.$$('#confirmationCode').value = 'CONFIRMATION_CODE';
-
-      // Next button should now be enabled.
-      assertTrue(
-          eSimPage.buttonState.next ===
-          cellularSetup.ButtonState.SHOWN_AND_ENABLED);
-
-      eSimPage.navigateForward();
+      enterConfirmationCode();
 
       await flushAsync();
 
       // Should go to final page.
       assertSelectedPage(cellular_setup.ESimPageName.FINAL, finalPage);
     });
+
+    test('Invalid confirmation code', async function() {
+      profile.setProfileInstallResultForTest(
+          chromeos.cellularSetup.mojom.ProfileInstallResult
+              .kErrorNeedsConfirmationCode);
+
+      // Loading page should be showing.
+      assertSelectedPage(
+          cellular_setup.ESimPageName.PROFILE_LOADING, profileLoadingPage);
+
+      await flushAsync();
+
+      // Confirmation code page should be showing.
+      assertSelectedPage(
+          cellular_setup.ESimPageName.CONFIRMATION_CODE, confirmationCodePage);
+
+      profile.setProfileInstallResultForTest(
+          chromeos.cellularSetup.mojom.ProfileInstallResult.kFailure);
+      const confirmationCodeInput = enterConfirmationCode();
+
+      await flushAsync();
+
+      // Should still be at confirmation code page with input showing error.
+      assertSelectedPage(
+          cellular_setup.ESimPageName.CONFIRMATION_CODE, confirmationCodePage);
+      assertTrue(confirmationCodeInput.invalid);
+    });
   });
 
   suite('Multiple eSIM profiles flow', function() {

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

 <link rel="import" href="../../../html/polymer.html">
 
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="../../../html/i18n_behavior.html">
 <link rel="import" href="base_page.html">
 
 <dom-module id="confirmation-code-page">
   <template>
-    <style include="iron-flex">
+    <style include="iron-flex iron-positioning">
       [slot='page-body'] {
         margin-top: -20px;
       }
 
+      #outerDiv {
+        height: 236px;
+      }
+      .container {
+        width: 472px;
+      }
+
       #details {
         align-items: center;
         color: var(--cr-primary-text-color);
         display: flex;
         margin-bottom: 40px;
-        margin-top: 60px;
       }
 
       #profileImage {
@@ -28,21 +35,25 @@
     </style>
     <base-page>
       <div slot="page-body">
-        <!-- TODO(crbug.com/1093185): Handle activation code case where
-             we don't have profileProperties_. -->
-        <div id="description">[[getMessage_(profileProperties_)]]</div>
-        <div id="details">
-          <!-- TODO(crbug.com/1093185): Update with real profile image. -->
-          <img id="profileImage" src="default_esim_profile.svg">
-          <div>
-            [[getProfileName_(profileProperties_)]]
+        <div id="description">[[i18n('confirmationCodeMessage')]]</div>
+        <div id="outerDiv" class="layout horizontal center">
+          <div class="container">
+            <div id="details" hidden$="[[!shouldShowProfileDetails_(profile)]]">
+              <!-- TODO(crbug.com/1093185): Update with real profile image. -->
+              <img id="profileImage" src="default_esim_profile.svg">
+              <div>
+                [[getProfileName_(profileProperties_)]]
+              </div>
+            </div>
+            <cr-input id="confirmationCode"
+              label="[[i18n('confirmationCodeInput')]]"
+              value="{{confirmationCode}}"
+              aria-describedby="description"
+              error-message="[[i18n('confirmationCodeError')]]"
+              invalid="[[showError]]">
+            </cr-input>
           </div>
         </div>
-        <cr-input id="confirmationCode"
-          label="[[i18n('confirmationCodeInput')]]"
-          value="{{confirmationCode}}"
-          aria-describedby="description">
-        </cr-input>
       </div>
     </base-page>
   </template>

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

@@ -26,6 +26,10 @@ Polymer({
       notify: true,
     },
 
+    showError: {
+      type: Boolean,
+    },
+
     /**
      * @type {?chromeos.cellularSetup.mojom.ESimProfileProperties}
      * @private
@@ -48,15 +52,11 @@ Polymer({
   },
 
   /**
-   * @return {string}
+   * @return {boolean}
    * @private
    */
-  getMessage_() {
-    const profileName = this.getProfileName_();
-    if (!profileName) {
-      return '';
-    }
-    return this.i18n('confirmationCodeMessage', profileName);
+  shouldShowProfileDetails_() {
+    return !!this.profile;
   },
 
   /**

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

@@ -40,7 +40,8 @@
       </activation-code-page>
       <confirmation-code-page id="confirmationCodePage"
           confirmation-code="{{confirmationCode_}}"
-          profile="[[selectedProfile_]]">
+          profile="[[selectedProfile_]]"
+          show-error="{{showError_}}">
       </confirmation-code-page>
       <final-page
         id="finalPage"

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

@@ -169,19 +169,24 @@ cr.define('cellular_setup', function() {
      *     response
      */
     handleProfileInstallResponse_(response) {
-      // TODO(crbug.com/1093185) Handle error during confirmation code page.
+      if (response.result ===
+          chromeos.cellularSetup.mojom.ProfileInstallResult
+              .kErrorNeedsConfirmationCode) {
+        this.state_ = ESimUiState.CONFIRMATION_CODE_ENTRY;
+        return;
+      }
       this.showError_ = response.result !==
           chromeos.cellularSetup.mojom.ProfileInstallResult.kSuccess;
+      if (response.result ===
+              chromeos.cellularSetup.mojom.ProfileInstallResult.kFailure &&
+          this.state_ === ESimUiState.CONFIRMATION_CODE_ENTRY) {
+        return;
+      }
       if (response.result ===
               chromeos.cellularSetup.mojom.ProfileInstallResult.kSuccess ||
           response.result ===
               chromeos.cellularSetup.mojom.ProfileInstallResult.kFailure) {
         this.state_ = ESimUiState.SETUP_FINISH;
-      } else if (
-          response.result ===
-          chromeos.cellularSetup.mojom.ProfileInstallResult
-              .kErrorNeedsConfirmationCode) {
-        this.state_ = ESimUiState.CONFIRMATION_CODE_ENTRY;
       }
     },