Merge pull request #954 from CruGlobal/install-typescript

Upgrade AngularJS and Install TypeScript

.eslintrc.json

@@ -1,16 +1,27 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@typescript-eslint/parser",
   "plugins": ["jasmine"],
   "env": {
     "browser": true,
     "jasmine": true
   },
-  "extends": ["angular", "plugin:jasmine/recommended"],
+  "extends": [
+    "angular",
+    "plugin:jasmine/recommended",
+    "plugin:import/typescript",
+    "plugin:@typescript-eslint/recommended"
+  ],
   "globals": {
-    "inject": true,
-    "require": true
+    "inject": true
   },
   "rules": {
+    "import/no-duplicates": "error",
+    "import/extensions": "error",
+    "import/order": "error",
+    "import/newline-after-import": "error",
+    "import/no-named-default": "error",
+    "import/no-anonymous-default-export": "error",
+    "import/dynamic-import-chunkname": "error",
     "no-alert": "error",
     "no-array-constructor": "off",
     "no-bitwise": "off",
@@ -213,6 +224,11 @@
     "spaced-comment": "off",
     "strict": "off",
     "template-curly-spacing": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_", "varIgnorePattern": "^_" }
+    ],
     "use-isnan": "error",
     "valid-jsdoc": "off",
     "valid-typeof": "error",

.github/workflows/build.yml

@@ -18,7 +18,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 10
+          node-version: 12
 
       - name: Install Dependencies
         run: yarn install --immutable --immutable-cache
@@ -36,7 +36,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 10
+          node-version: 12
 
       - name: Install Dependencies
         run: yarn install --immutable --immutable-cache
@@ -58,7 +58,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 10
+          node-version: 12
 
       - name: Install Dependencies
         run: yarn install --immutable --immutable-cache

babel.config.js

@@ -1,11 +1,14 @@
 // File required for jest, webpack includes different babel config
 module.exports = {
   presets: [
-    ['@babel/preset-env', {
-      targets: {
-        browsers: ['defaults', 'ie >= 11']
+    [
+      '@babel/preset-env', {
+        targets: {
+          browsers: ['defaults', 'ie >= 11']
+        }
       }
-    }]
+    ],
+    '@babel/preset-typescript'
   ],
   plugins: [
     '@babel/plugin-transform-runtime'

package.json

@@ -4,18 +4,18 @@
   "dependencies": {
     "@babel/polyfill": "^7.7.0",
     "@babel/runtime-corejs2": "^7.0.0",
-    "angular": "1.7.9",
-    "angular-cookies": "^1.7.8",
+    "angular": "^1.8.2",
+    "angular-cookies": "^1.8.2",
     "angular-environment": "https://github.com/jonshaffer/angular-environment.git#d3082c06fb16804d324faac9b7e753fd64a44e5d",
     "angular-filter": "^0.5.17",
-    "angular-gettext": "^2.4.1",
-    "angular-messages": "^1.7.8",
+    "angular-gettext": "^2.4.2",
+    "angular-messages": "^1.8.2",
     "angular-ordinal": "^2.1.3",
-    "angular-sanitize": "^1.7.8",
+    "angular-sanitize": "^1.8.2",
     "angular-scroll": "^1.0.2",
-    "angular-translate": "^2.18.1",
-    "angular-ui-bootstrap": "2.5.6",
-    "angular-ui-router": "^1.0.22",
+    "angular-translate": "^2.19.0",
+    "angular-ui-bootstrap": "^2.5.6",
+    "angular-ui-router": "^1.0.30",
     "angular-upload": "^1.0.13",
     "bootstrap-sass": "^3.4.1",
     "change-case-object": "^2.0.0",
@@ -27,15 +27,22 @@
     "rollbar": "^2.7.1",
     "rxjs": "^5.2.0",
     "slick-carousel": "1.8.1",
-    "textangularjs": "^2.1.2"
+    "textangularjs": "^2.1.2",
+    "typescript": "^4.5.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",
     "@babel/core": "^7.5.5",
+    "@babel/node": "^7.16.8",
     "@babel/plugin-transform-runtime": "^7.5.5",
     "@babel/preset-env": "^7.11.5",
+    "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.5.5",
-    "angular-mocks": "^1.7.8",
+    "@types/angular": "^1.8.4",
+    "@types/node": "^17.0.12",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1",
+    "angular-mocks": "^1.8.2",
     "babel-loader": "^8.0.6",
     "babel-plugin-angularjs-annotate": "^0.10.0",
     "copy-webpack-plugin": "^5.0.4",
@@ -48,8 +55,12 @@
     "ngtemplate-loader": "^2.0.1",
     "sass": "^1.49.0",
     "sass-loader": "^10",
-    "standard": "^13.1.0",
+    "standard": "^16.0.4",
     "style-loader": "^1.0.0",
+    "ts-essentials": "^9.1.2",
+    "ts-loader": "^9.2.6",
+    "ts-node": "^10.4.0",
+    "typescript-eslint": "^0.0.1-alpha.0",
     "webpack": "^4.39.2",
     "webpack-bundle-analyzer": "^3.4.1",
     "webpack-cli": "^3.3.7",
@@ -61,7 +72,8 @@
     "build": "webpack -p",
     "build:analyze": "webpack -p --env.analyze",
     "test": "jest",
-    "lint": "standard"
+    "lint": "standard",
+    "lint:ts": "tsc"
   },
   "standard": {
     "env": {

src/app/analytics/analytics.factory.js

@@ -11,7 +11,7 @@ const analyticsFactory = /* @ngInject */ function ($window, $timeout, sessionSer
   return {
     buildProductVar: function (cartData) {
       try {
-        var item, donationType
+        let item, donationType
 
         // Instantiate cart data layer
         const hash = sha3(cartData.id, { outputLength: 80 }) // limit hash to 20 characters
@@ -27,7 +27,7 @@ const analyticsFactory = /* @ngInject */ function ($window, $timeout, sessionSer
         }
 
         if (cartData && cartData.items) {
-          for (var i = 0; i < cartData.items.length; i++) {
+          for (let i = 0; i < cartData.items.length; i++) {
             // Set donation type
             if (cartData.items[i].frequency.toLowerCase() === 'single') {
               donationType = 'one-time donation'
@@ -63,8 +63,8 @@ const analyticsFactory = /* @ngInject */ function ($window, $timeout, sessionSer
     },
     cartAdd: function (itemConfig, productData) {
       try {
-        var siteSubSection
-        var cart = {
+        let siteSubSection
+        const cart = {
           item: [{
             productInfo: {
               productID: productData.designationNumber,
@@ -270,7 +270,7 @@ const analyticsFactory = /* @ngInject */ function ($window, $timeout, sessionSer
     },
     editRecurringDonation: function (giftData) {
       try {
-        var frequency = ''
+        let frequency = ''
 
         if (giftData && giftData.length) {
           if (get(giftData, '[0].gift["updated-rate"].recurrence.interval')) {
@@ -304,14 +304,14 @@ const analyticsFactory = /* @ngInject */ function ($window, $timeout, sessionSer
     },
     getPath: function () {
       try {
-        var pagename = ''
-        var delim = ' : '
-        var path = $window.location.pathname
+        let pagename = ''
+        const delim = ' : '
+        let path = $window.location.pathname
 
         if (path !== '/') {
-          var extension = ['.html', '.htm']
+          const extension = ['.html', '.htm']
 
-          for (var i = 0; i < extension.length; i++) {
+          for (let i = 0; i < extension.length; i++) {
             if (path.indexOf(extension[i]) > -1) {
               path = path.split(extension[i])
               path = path.splice(0, 1)
@@ -328,7 +328,7 @@ const analyticsFactory = /* @ngInject */ function ($window, $timeout, sessionSer
           }
 
           // Capitalize first letter of each page
-          for (i = 0; i < path.length; i++) {
+          for (let i = 0; i < path.length; i++) {
             path[i] = path[i].charAt(0).toUpperCase() + path[i].slice(1)
           }
 
@@ -348,10 +348,10 @@ const analyticsFactory = /* @ngInject */ function ($window, $timeout, sessionSer
     },
     getSetProductCategory: function (path) {
       try {
-        var allElements = $window.document.getElementsByTagName('*')
+        const allElements = $window.document.getElementsByTagName('*')
 
-        for (var i = 0, n = allElements.length; i < n; i++) {
-          var desigType = allElements[i].getAttribute('designationtype')
+        for (let i = 0, n = allElements.length; i < n; i++) {
+          const desigType = allElements[i].getAttribute('designationtype')
 
           if (desigType !== null) {
             const productConfig = $window.document.getElementsByTagName('product-config')
@@ -377,7 +377,7 @@ const analyticsFactory = /* @ngInject */ function ($window, $timeout, sessionSer
     },
     giveGiftModal: function (productData) {
       try {
-        var product = [{
+        const product = [{
           productInfo: {
             productID: productData.designationNumber
           },
@@ -632,17 +632,17 @@ const analyticsFactory = /* @ngInject */ function ($window, $timeout, sessionSer
         const profileInfo = {}
         if (typeof sessionService !== 'undefined') {
           let ssoGuid
-          if (typeof sessionService.session['sso_guid'] !== 'undefined') {
-            ssoGuid = sessionService.session['sso_guid']
-          } else if (typeof sessionService.session['sub'] !== 'undefined') {
-            ssoGuid = sessionService.session['sub'].split('|').pop()
+          if (typeof sessionService.session.sso_guid !== 'undefined') {
+            ssoGuid = sessionService.session.sso_guid
+          } else if (typeof sessionService.session.sub !== 'undefined') {
+            ssoGuid = sessionService.session.sub.split('|').pop()
           }
           if (typeof ssoGuid !== 'undefined' && ssoGuid !== 'cas') {
-            profileInfo['ssoGuid'] = ssoGuid
+            profileInfo.ssoGuid = ssoGuid
           }
 
-          if (typeof sessionService.session['gr_master_person_id'] !== 'undefined') {
-            profileInfo['grMasterPersonId'] = sessionService.session['gr_master_person_id']
+          if (typeof sessionService.session.gr_master_person_id !== 'undefined') {
+            profileInfo.grMasterPersonId = sessionService.session.gr_master_person_id
           }
         }
 
@@ -662,19 +662,19 @@ const analyticsFactory = /* @ngInject */ function ($window, $timeout, sessionSer
       try {
         const profileInfo = {}
         if (typeof sessionService !== 'undefined') {
-          if (typeof sessionService.session['sso_guid'] !== 'undefined') {
-            profileInfo['ssoGuid'] = sessionService.session['sso_guid']
-          } else if (typeof sessionService.session['sub'] !== 'undefined') {
-            profileInfo['ssoGuid'] = sessionService.session['sub'].split('|').pop()
+          if (typeof sessionService.session.sso_guid !== 'undefined') {
+            profileInfo.ssoGuid = sessionService.session.sso_guid
+          } else if (typeof sessionService.session.sub !== 'undefined') {
+            profileInfo.ssoGuid = sessionService.session.sub.split('|').pop()
           }
 
-          if (typeof sessionService.session['gr_master_person_id'] !== 'undefined') {
-            profileInfo['grMasterPersonId'] = sessionService.session['gr_master_person_id']
+          if (typeof sessionService.session.gr_master_person_id !== 'undefined') {
+            profileInfo.grMasterPersonId = sessionService.session.gr_master_person_id
           }
 
           if (donorDetails) {
-            profileInfo['donorType'] = donorDetails['donor-type'].toLowerCase()
-            profileInfo['donorAcct'] = donorDetails['donor-number'].toLowerCase()
+            profileInfo.donorType = donorDetails['donor-type'].toLowerCase()
+            profileInfo.donorAcct = donorDetails['donor-number'].toLowerCase()
           }
         }
 
@@ -692,7 +692,7 @@ const analyticsFactory = /* @ngInject */ function ($window, $timeout, sessionSer
     },
     setEvent: function (eventName) {
       try {
-        var evt = {
+        const evt = {
           eventInfo: {
             eventName: eventName
           }
@@ -727,7 +727,7 @@ const analyticsFactory = /* @ngInject */ function ($window, $timeout, sessionSer
     },
     setSiteSections: function (path) {
       try {
-        var primaryCat = 'give'
+        const primaryCat = 'give'
 
         if (!path) {
           path = this.getPath()

src/app/designationEditor/designationEditor.component.js

@@ -241,8 +241,8 @@ class DesignationEditorController {
 
   images () {
     const designController = this.designationContent['design-controller']
-    if (designController && designController['carousel']) {
-      return this.getImageUrls(designController['carousel'])
+    if (designController && designController.carousel) {
+      return this.getImageUrls(designController.carousel)
     }
     return []
   }

src/app/newsletterSubscription/newsletterModal/newsletter.modal.js

@@ -42,7 +42,7 @@ class NewsletterModalController {
       })
 
       // Concatenate all defined street fields
-      this.attributes['street'] = compact(map(streetFields, key => this.address[key])).join(`\n`)
+      this.attributes.street = compact(map(streetFields, key => this.address[key])).join('\n')
 
       this.designationEditorService.subscribeToNewsletter(this.designationNumber, this.attributes).then(() => {
         this.success = true
@@ -52,7 +52,7 @@ class NewsletterModalController {
         forEach(addressPropertyMap, (value) => {
           delete this.attributes[value]
         })
-        delete this.attributes['street']
+        delete this.attributes.street
       }).finally(() => {
         this.step = 3
         this.progress = false

src/app/productConfig/productConfigModal/productConfig.modal.component.js

@@ -75,7 +75,8 @@ class ProductConfigModalController {
     // If CampaignCode exists in URL, use it, otherwise use default-campaign-code if set.
     if (Object.prototype.hasOwnProperty.call(params, giveGiftParams.campaignCode)) {
       this.itemConfig['campaign-code'] = isArray(params[giveGiftParams.campaignCode])
-        ? params[giveGiftParams.campaignCode][0] : params[giveGiftParams.campaignCode]
+        ? params[giveGiftParams.campaignCode][0]
+        : params[giveGiftParams.campaignCode]
 
       // make sure campaign code is alphanumeric and less than 30 characters
       if (this.itemConfig['campaign-code'].match(/^[a-z0-9]+$/i) === null || this.itemConfig['campaign-code'].length > 30) {

src/app/profile/payment-methods/payment-methods.component.js

@@ -101,7 +101,7 @@ class PaymentMethodsController {
         show: true,
         type: 'paymentMethodAdded'
       }
-      data['_recurringgifts'] = [{ donations: [] }]
+      data._recurringgifts = [{ donations: [] }]
       this.paymentMethods.push(data)
       this.$timeout(() => {
         this.successMessage.show = false

src/app/profile/yourGiving/recipientView/recipientGift/recipientGift.component.js

@@ -37,7 +37,7 @@ class RecipientGift {
 
       const paymentMethodRequests = []; const paymentMethodUris = []
       angular.forEach(this.recipient.donations, (donation) => {
-        const uri = donation['payment-method-link'] && donation['payment-method-link']['uri']
+        const uri = donation['payment-method-link'] && donation['payment-method-link'].uri
         if (uri && paymentMethodUris.indexOf(uri) < 0) {
           paymentMethodUris.push(uri)
           paymentMethodRequests.push(this.profileService.getPaymentMethod(uri, true))
@@ -52,8 +52,8 @@ class RecipientGift {
             })
 
             angular.forEach(this.recipient.donations, (donation) => {
-              const uri = donation['payment-method-link'] && donation['payment-method-link']['uri']
-              donation['paymentmethod'] = paymentMethods[uri]
+              const uri = donation['payment-method-link'] && donation['payment-method-link'].uri
+              donation.paymentmethod = paymentMethods[uri]
             })
 
             this.isLoading = false