refactor: move logic to shouldOpenTooltip

Author: dbajpeyi

dist/autofill-debug.js

@@ -21,7 +21,7 @@ import {
 
 import { getInputSubtype, getInputMainType, createMatching, getInputVariant, getInputType, getMainTypeFromType } from './matching.js';
 import { getIconStylesAutofilled, getIconStylesBase, getIconStylesAlternate } from './inputStyles.js';
-import { canBeInteractedWith, getInputConfig, isFieldDecorated } from './inputTypeConfig.js';
+import { canBeInteractedWith, getInputConfig, isEligibleCCSubType, isFieldDecorated } from './inputTypeConfig.js';
 
 import {
     getUnifiedExpiryDate,
@@ -531,7 +531,7 @@ class Form {
      * @param {boolean} shouldCheckForDecorate
      */
     execOnInputs(fn, inputType = 'all', shouldCheckForDecorate = true) {
-        const inputs = [...this.inputs[inputType]];
+        const inputs = this.inputs[inputType];
         for (const input of inputs) {
             let canExecute = true;
             // sometimes we want to execute even if we didn't decorate
@@ -807,12 +807,15 @@ class Form {
             }
         }
 
-        if (this.device.globalConfig.isExtension || this.device.globalConfig.isMobileApp) {
+        const isNotTouchedAndFilled = !this.touched.has(input) && !input.classList.contains('ddg-autofilled');
+        const isMobileApp = this.device.globalConfig.isMobileApp;
+        if (this.device.globalConfig.isExtension || isMobileApp) {
             // Don't open the tooltip on input focus whenever it's showing in-context signup
             if (isIncontextSignupAvailable) return false;
+            if (isMobileApp && isNotTouchedAndFilled && isEligibleCCSubType(subtype)) return true;
         }
 
-        return !this.touched.has(input) && !input.classList.contains('ddg-autofilled');
+        return isNotTouchedAndFilled;
     }
 
     /**
@@ -950,15 +953,14 @@ class Form {
         return isLoginOrHybrid && this.device.credentialsImport.isAvailable();
     }
 
-    getFirstViableInputForType(dataType) {
-        return [...this.inputs[dataType]].find((input) => canBeInteractedWith(input) && isPotentiallyViewable(input));
+    getFirstViableInputForCredentials() {
+        return [...this.inputs.credentials].find((input) => canBeInteractedWith(input) && isPotentiallyViewable(input));
     }
 
     async promptLoginIfNeeded() {
-        const isMobileCCForm = this.isCCForm && this.device.globalConfig.isMobileApp;
-        if (document.visibilityState !== 'visible' || !(this.isLogin || isMobileCCForm)) return;
+        if (document.visibilityState !== 'visible' || !this.isLogin) return;
 
-        const firstViableInput = this.getFirstViableInputForType('credentials') || this.getFirstViableInputForType('creditCards');
+        const firstViableInput = this.getFirstViableInputForCredentials();
         const input = this.activeInput || firstViableInput;
         if (!input) return;
 
@@ -981,14 +983,12 @@ class Form {
                     const topMostElementFromPoint = document.elementFromPoint(elHCenter, elVCenter);
 
                     if (this.form.contains(topMostElementFromPoint)) {
-                        const dataTypeForExec = this.isCCForm ? 'creditCards' : this.isLogin ? 'credentials' : null;
                         // Add inputs to the touched set only for the dataTypeForExec, which currentl
-                        dataTypeForExec &&
-                            this.execOnInputs((input) => {
-                                if (isPotentiallyViewable(input)) {
-                                    this.touched.add(input);
-                                }
-                            }, dataTypeForExec);
+                        this.execOnInputs((input) => {
+                            if (isPotentiallyViewable(input)) {
+                                this.touched.add(input);
+                            }
+                        }, 'credentials');
                         this.device.attachTooltip({
                             form: this,
                             input,

dist/autofill.js

@@ -88,6 +88,12 @@ const canBeAutofilled = async (input, device) => {
     return Boolean(canAutofill);
 };
 
+/**
+ * @param {string} subtype
+ * @returns {boolean}
+ */
+const isEligibleCCSubType = (subtype) => subtype in ['cardNumber', 'cardSecurityCode'];
+
 /**
  * A map of config objects. These help by centralising here some complexity
  * @type {InputTypeConfig}
@@ -155,18 +161,17 @@ const inputTypeConfig = {
         getIconBase: (input, form) => {
             const { device } = form;
             const subtype = getInputSubtype(input);
-            const isValidInputSubType = subtype === 'cardNumber' || subtype === 'cardSecurityCode';
 
-            if (canBeInteractedWith(input) && device.globalConfig.isMobileApp && isValidInputSubType) return ddgPasswordIcons.ddgCcIconBase;
+            if (canBeInteractedWith(input) && device.globalConfig.isMobileApp && isEligibleCCSubType(subtype))
+                return ddgPasswordIcons.ddgCcIconBase;
 
             return '';
         },
         getIconFilled: (input, form) => {
             const { device } = form;
             const subtype = getInputSubtype(input);
-            const isValidInputSubType = subtype === 'cardNumber' || subtype === 'cardSecurityCode';
 
-            if (device.globalConfig.isMobileApp && isValidInputSubType) return ddgPasswordIcons.ddgCcIconFilled;
+            if (device.globalConfig.isMobileApp && isEligibleCCSubType(subtype)) return ddgPasswordIcons.ddgCcIconFilled;
 
             return '';
         },
@@ -234,4 +239,4 @@ const isFieldDecorated = (input) => {
     return input.hasAttribute(constants.ATTR_INPUT_TYPE);
 };
 
-export { getInputConfig, getInputConfigFromType, canBeInteractedWith, isFieldDecorated };
+export { getInputConfig, getInputConfigFromType, canBeInteractedWith, isFieldDecorated, isEligibleCCSubType };