Merge pull request #1057 from CruGlobal/ep-upgrade

Ep upgrade - Preprod environment
CruGlobal · Oct 2, 2023 · 7dc11ce · 7dc11ce
2 parents a64b3b6 + 436aed0
commit 7dc11ce
Show file tree

Hide file tree

Showing 237 changed files with 9,715 additions and 4,709 deletions.
diff --git a/.eslintrc.json b/.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",

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,88 @@
+name: Build
+
+on:
+  push: 
+    branches: [staging, master, ep-upgrade-stage, ep-upgrade-prod, ep-upgrade]
+  pull_request:
+    branches: [staging, master, ep-upgrade-stage, ep-upgrade-prod, ep-upgrade]
+
+permissions:
+  id-token: write
+  contents: write
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16.10.0
+
+      - name: Install Dependencies
+        run: yarn install --immutable --immutable-cache
+
+      - name: Lint Check
+        run: yarn lint
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          # Help Codecov detect commit SHA
+          fetch-depth: 2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16.10.0
+
+      - name: Install Dependencies
+        run: yarn install --immutable --immutable-cache
+
+      - name: Run Tests
+        run: yarn test
+
+      - name: Upload Codecov Reports
+        uses: codecov/codecov-action@v2 
+
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: ${{ (github.ref == 'refs/heads/master' && 'production') || (github.ref == 'refs/heads/ep-upgrade-stage' && 'nonprod') || (github.ref == 'refs/heads/ep-upgrade-prod' && 'preprod') || 'staging' }}
+    needs: [lint, test]
+    if: github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/staging' || github.ref == 'refs/heads/ep-upgrade-stage' || github.ref == 'refs/heads/ep-upgrade-prod')
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16.10.0
+
+      - name: Install Dependencies
+        run: yarn install --immutable --immutable-cache
+
+      - name: Build App
+        env:
+          S3_GIVE_DOMAIN: //${{ secrets.GIVE_WEB_HOSTNAME }}
+          ROLLBAR_ACCESS_TOKEN: ${{ secrets.ROLLBAR_ACCESS_TOKEN }}
+          DATADOG_RUM_CLIENT_TOKEN: ${{ secrets.DATADOG_RUM_CLIENT_TOKEN }}
+        run: yarn run build
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@036a4a1ddf2c0e7a782dca6e083c6c53e5d90321
+        with:
+          aws-region: us-east-1
+          role-to-assume: ${{ secrets.AWS_GITHUB_ACTIONS_ROLE }}
+
+      # Deploying to S3 with the --delete flag can be problematic if a cached file references a deleted file
+      # Solution: deploy once without deleting old files, invalidate the Cloudfront cache, then deploy a second time with the flag to delete previous files
+      - name: Deploy to S3
+        run: aws s3 sync dist s3://${{ secrets.AWS_WEB_STATIC_BUCKET_NAME }} --region us-east-1 --acl public-read --cache-control 'public, max-age=300'
+
+      - name: AWS Cloudfront
+        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"
+
+      - name: Deploy to S3 and Delete Previous Files
+        run: aws s3 sync dist  s3://${{ secrets.AWS_WEB_STATIC_BUCKET_NAME }} --region us-east-1 --acl public-read --cache-control 'public, max-age=300' --delete
diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,6 @@ coverage
 .sass-cache
 stats.json
 *.iml
+
+# asdf
+.tool-versions
diff --git a/.tool-versions b/.tool-versions
@@ -0,0 +1,2 @@
+nodejs 16.10.0
+yarn 1.22.17
diff --git a/.travis.yml b/.travis.yml
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # give-web
 ## Angular front-end components for use in AEM on [give.cru.org](https://give.cru.org)
 
-[![Build Status](https://travis-ci.org/CruGlobal/give-web.svg?branch=master)](https://travis-ci.org/CruGlobal/give-web)
+[![Build Status](https://github.com/CruGlobal/give-web/actions)](https://github.com/CruGlobal/give-web/actions)
 [![codecov](https://codecov.io/gh/CruGlobal/give-web/branch/master/graph/badge.svg)](https://codecov.io/gh/CruGlobal/give-web)
 
 ## Usage
@@ -57,7 +57,9 @@ Add the following code to your page where appropriate. See the [Branded checkout
     donor-details="<window variable containing default values for donor's name and contact info>"
     show-cover-fees="true"
     on-order-completed="$event.$window.onOrderCompleted($event.purchase)"
-    on-order-failed="$event.$window.onOrderFailed($event.donorDetails)">
+    on-order-failed="$event.$window.onOrderFailed($event.donorDetails)"
+    radio-station-api-url="https://api.domain.com/getStations"
+    radio-station-radius="100">
 </branded-checkout>
 
 <script src="https://give-static.cru.org/branded-checkout.v2.js"></script>
@@ -128,28 +130,31 @@ The `<branded-checkout>` element is where the branded checkout Angular app will
 - `on-order-completed` - an Angular expression that is executed when the order was submitted successfully - *Optional* -  provides 2 variables:
   - `$event.$window` - Provides access to the browser's global `window` object. This allows you to call a custom callback function like `onOrderCompleted` in the example.
   - `$event.purchase` - contains the order's details that are loaded for the thank you page
+- `radio-station-api-url` - Provides a URL path for fetching a list of radio stations in the donor's vicinity.  If you plan to use this feature, contact Cru's Digital Products and Services (DPS) department ([help@cru.org](mailto:help@cru.org)) to have your URL domain whitelisted to interact with our API - *Optional*
+- `radio-station-radius` - Provides a radius (in miles) for fetching a list of radio stations in the donor's vicinity - *Optional*
+
 
 #### Server-side configuration for a new branded checkout domain
 1. Figure out what domain you will be hosting the branded checkout form on. For example, `myministry.org`
 2. Make sure HTTPS is enabled on that domain
-3. You will need to setup a subdomain for the give.cru.org API. We've experienced cross-domain cookie issues trying to hit the give.cru.org API directly from a custom domain. Create a CNAME record for `brandedcheckout.myministry.org` (the subdomain could be different but using that suggested subdomain makes it consistent with other sites) and point it at `give.cru.org`.
-4. In order to accept credit cards on your own domain, you will need to setup a TSYS merchant account. Contact the Cru's Financial Services Group ([chad.vaughan@cru.org](mailto:chad.vaughan@cru.org)) if you don't already have one. You will need a TSYS device id (a numeric id around 14 digits) to complete step 6.
+3. You will need to setup a subdomain for the give.cru.org API. We've experienced cross-domain cookie issues trying to hit the give.cru.org API directly from a custom domain. Create a CNAME record for `brandedcheckout.myministry.org` (the subdomain could be different but using that suggested subdomain makes it consistent with other sites) and point it at `cortex-gateway-production-alb-425941461.us-east-1.elb.amazonaws.com`.
+4. In order to accept credit cards on your own domain, you will need a new TSYS device id (a numeric id around 14 digits) associated with one of our Merchant Accounts. Contact the Cru's Financial Services Group ([hazel.mcpherson@cru.org](mailto:hazel.mcpherson@cru.org)) and request one. You will use the device id to complete step 6.
 5. To prepare for the next step, think of a unique identifier like `"jesusfilm"` or `"aia"` that uniquely identifies your ministry and domain. We can create this for you but we need enough information about your ministry to do so.
 6. Once you have completed the steps above, contact Cru's Digital Products and Services (DPS) department ([help@cru.org](mailto:help@cru.org)). Below is an example email: (replace the `{{}}`s with the info for your site)
 
-   > I'm working on implementing branded checkout for {{my ministry}}. I would like to host the branded checkout form on {{myminsitry.org}}. HTTPS is setup on my domain and I have created a CNAME record for the subdomain {{brandedcheckout.myministry.org}} that points to give.cru.org. (DPS may be able to help with the CNAME record configuration if the domain is hosted with us.)
+   > I'm working on implementing branded checkout for {{my ministry}}. I would like to host the branded checkout form on {{myminsitry.org}}. HTTPS is setup on my domain and I have created a CNAME record for the subdomain {{brandedcheckout.myministry.org}} that points to cortex-gateway-production-alb-425941461.us-east-1.elb.amazonaws.com. (DPS may be able to help with the CNAME record configuration if the domain is hosted with us.)
    >
    >    I need help configuring the give.cru.org API to work on my domain. Can you:
    >    - Add an SSL certificate to cruorg-alb for my subdomain {{brandedcheckout.myministry.org}}
    >    - Add that same subdomain to cortex_gateway's AUTH_PROXY_VALID_ORIGINS environment variable
-   >    - Add the user facing domain to the maintenence app's cortex_gateway CORS Whitelist
+   >    - Add the user facing domain to the maintenance app's cortex_gateway CORS Whitelist
    >
    >    I also need help setting up a my TSYS merchant account with the give.cru.org API to be able to proccess credit cards on my site. Can you:
    >    - Add my TSYS device id to the give.cru.org API configuration. My device id is {{12345678901234}} and the url I would like to use for the branded checkout form is {{https://myministry.org}}. I would like to use a identifier of "{{myministry}}". (Or uniquely describe your ministry and domain if you want DPS to create the identifier. We can't have multiple sites that use the same identifier.)
    >    - Whitelist my site {{https://myministry.org}} with TSYS so their TSEP credit card tokenization services will work on my domain.
 
 7. Test the subdomain configured to point to the give.cru.org API. https://brandedcheckout.myministry.org/cortex/nextdrawdate is a good test url. There should be no certificate errors and you should get a response that looks like this `{"next-draw-date":"2018-09-27"}`. If there are errors, please get in touch with ([[email protected]](mailto:[email protected])) again and provide details as to what is happening.
-8. Add the `<branded-checkout>` tag to a page on the domain you've configured above. You can follow the documentation above for all the possible attributes and the required style and script tags. The email conversations above should have provided the values for the `api-url` (the subdomain that has a CNAME to give.cru.org) and `tsys-device` (the unique string identifier created by you or by DPS) attributes. You can add them like this:
+8. Add the `<branded-checkout>` tag to a page on the domain you've configured above. You can follow the documentation above for all the possible attributes and the required style and script tags. The email conversations above should have provided the values for the `api-url` (the subdomain that has a CNAME to cortex-gateway-production-alb-425941461.us-east-1.elb.amazonaws.com) and `tsys-device` (the unique string identifier created by you or by DPS) attributes. You can add them like this:
    ```html
    <branded-checkout
        designation-number="0763355"
@@ -188,7 +193,7 @@ Note: For session cookies to work correctly, add an entry to your hosts file for
 Use the `cortexApiService` which provides convenience methods for sending requests to Cortex. For more documentation see the [cortexApiService docs](docs/cortexApiService.md).
 
 ### Staging Environment
-Replace `https://give-static.cru.org` with `https://cru-givestage.s3.amazonaws.com` to use the staging environment. 
+Replace `https://give-static.cru.org` with `https://give-stage-static.cru.org` to use the staging environment. 
 
 ### Deployments
 

diff --git a/babel.config.js b/babel.config.js
@@ -1,11 +1,15 @@
 // 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-react',
+    '@babel/preset-typescript'
   ],
   plugins: [
     '@babel/plugin-transform-runtime'

diff --git a/docs/cortexApiService.md b/docs/cortexApiService.md
@@ -175,7 +175,7 @@ cortexApiService.get({
         path: '/purchases/crugive/giydanby=',
         zoom: {
           donorDetails: 'donordetails',
-          paymentMeans: 'paymentmeans:element',
+          paymentInstruments: 'paymentinstruments:element',
           lineItems: 'lineitems:element,lineitems:element:code,lineitems:element:rate',
         }
       });
@@ -186,11 +186,13 @@ This will return: (the `rawData` key shows what the original response looked lik
     "donorDetails": {
         "donor-type": "Household",
         "mailing-address": {
-            "country-name": "US",
-            "locality": "sdag",
-            "postal-code": "12423",
-            "region": "AR",
-            "street-address": "dsfg"
+            address: {
+                "country-name": "US",
+                "locality": "sdag",
+                "postal-code": "12423",
+                "region": "AR",
+                "street-address": "dsfg"
+            }
         },
         "name": {
             "family-name": "Lname",
@@ -210,7 +212,7 @@ This will return: (the `rawData` key shows what the original response looked lik
             "title": "Mrs."
         }
     },
-    "paymentMeans": {
+    "paymentInstruments": {
         "billing-address": {
             "address": {
                 "country-name": "US",
@@ -280,11 +282,13 @@ This will return: (the `rawData` key shows what the original response looked lik
             {
                 "donor-type": "Household",
                 "mailing-address": {
-                    "country-name": "US",
-                    "locality": "sdag",
-                    "postal-code": "12423",
-                    "region": "AR",
-                    "street-address": "dsfg"
+                    address: {
+                        "country-name": "US",
+                        "locality": "sdag",
+                        "postal-code": "12423",
+                        "region": "AR",
+                        "street-address": "dsfg"
+                    }
                 },
                 "name": {
                     "family-name": "Lname",
@@ -356,7 +360,7 @@ This will return: (the `rawData` key shows what the original response looked lik
                 ]
             }
         ],
-        "_paymentmeans": [
+        "_paymentinstruments": [
             {
                 "_element": [
                     {

diff --git a/jest.config.js b/jest.config.js
@@ -6,6 +6,7 @@ module.exports = {
   ],
   restoreMocks: true,
   setupFilesAfterEnv: [
+    '<rootDir>/jest/setupAngularMocks.js',
     'angular',
     'angular-mocks',
     'jest-date-mock',
@@ -17,6 +18,7 @@ module.exports = {
   modulePaths: [
     '<rootDir>/src'
   ],
+  testEnvironment: 'jsdom',
   transform: {
     '^.+\\.js?$': 'babel-jest',
     '^.+\\.html$': '<rootDir>/jest/htmlTransform.js'

diff --git a/jest/htmlTransform.js b/jest/htmlTransform.js
@@ -7,6 +7,6 @@ module.exports = {
       resource: path.basename(filename)
     }
     const result = ngTemplateLoader.call(webpackContext, `\`${src}\``)
-    return `${result}; module.exports = "${path.basename(filename)}"`
+    return { code: `${result}; module.exports = "${path.basename(filename)}"` }
   }
 }
diff --git a/jest/setupAngularMocks.js b/jest/setupAngularMocks.js
@@ -0,0 +1,2 @@
+// angular-mocks won't setup mocking unless Jasmine or Karma is defined, so pretend like it is
+window.jasmine = true