diff --git a/.secrets.baseline b/.secrets.baseline
index 952441d55..9c8e8b88a 100644
--- a/.secrets.baseline
+++ b/.secrets.baseline
@@ -4,7 +4,7 @@
     "files": "package-lock.json|^.secrets.baseline$",
     "lines": null
   },
-  "generated_at": "2020-10-19T02:55:47Z",
+  "generated_at": "2021-04-09T07:48:36Z",
   "plugins_used": [
     {
       "name": "AWSKeyDetector"
@@ -55,10 +55,17 @@
     }
   ],
   "results": {
+    "backend/src/test-utils/test-env.ts": [
+      {
+        "hashed_secret": "c237a19676ad55d8904be354990dd54f92f9572c",
+        "is_verified": false,
+        "line_number": 4,
+        "type": "Base64 High Entropy String"
+      }
+    ],
     "frontend/.env-example": [
       {
         "hashed_secret": "e5e9fa1ba31ecd1ae84f75caaa474f3a663f05f4",
-        "is_secret": false,
         "is_verified": false,
         "line_number": 5,
         "type": "Basic Auth Credentials"
diff --git a/.travis.yml b/.travis.yml
index 3bafa148e..3ae7b922d 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -4,6 +4,8 @@ node_js:
 
 services:
   - docker
+  - postgresql
+  - redis-server
 
 cache: npm
 
diff --git a/amplify.yml b/amplify.yml
index af433856e..480a42c55 100644
--- a/amplify.yml
+++ b/amplify.yml
@@ -29,7 +29,6 @@ frontend:
     build:
       commands:
         - npm run build
-        - CI=true npm run test
         - npm run upload-source-map
   artifacts:
     # IMPORTANT - Please verify your build output directory
diff --git a/backend/.eslintrc.js b/backend/.eslintrc.js
index ba6a5fab8..35589cd58 100644
--- a/backend/.eslintrc.js
+++ b/backend/.eslintrc.js
@@ -1,13 +1,14 @@
 module.exports = {
   root: false,
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
+  plugins: ['@typescript-eslint', "jest"],
   extends: [
     'eslint:recommended', // Recommended ESLint rules
     'plugin:@typescript-eslint/eslint-recommended', // Disables rules from `eslint:recommended` that are already covered by the TypeScript typechecker
     'plugin:@typescript-eslint/recommended', // Recommended TypeScript rules
     'prettier/@typescript-eslint', // Disables rules from `@typescript-eslint/recommended` that are covered by Prettier
     'plugin:prettier/recommended', // Recommended Prettier rules
+    "plugin:jest/recommended" // Recommended Jest rules
   ],
   parserOptions: {
     sourceType: 'module',
diff --git a/backend/Dockerfile b/backend/Dockerfile
index f359c762b..0b4f17076 100644
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -19,6 +19,7 @@ RUN npm ci
 
 COPY src ./src
 COPY tsconfig.json ./
+COPY tsconfig.build.json ./
 
 RUN npm run build
 RUN npm prune --production
diff --git a/backend/jest.config.js b/backend/jest.config.js
index d6df66493..59a9518ef 100644
--- a/backend/jest.config.js
+++ b/backend/jest.config.js
@@ -1,14 +1,20 @@
 module.exports = {
   roots: ['<rootDir>'],
-  testMatch: ['**/__tests__/**/*.(spec|test).+(ts|tsx|js)'],
+  testMatch: ['**/tests/**/*.(spec|test).+(ts|tsx|js)'],
+  testPathIgnorePatterns: ['<rootDir>/build/', '<rootDir>/node_modules/'],
   moduleNameMapper: {
     '@core/(.*)': '<rootDir>/src/core/$1',
     '@sms/(.*)': '<rootDir>/src/sms/$1',
     '@email/(.*)': '<rootDir>/src/email/$1',
+    '@telegram/(.*)': '<rootDir>/src/telegram/$1',
+    '@test-utils/(.*)': '<rootDir>/src/test-utils/$1',
   },
   transform: {
     '^.+\\.(ts|tsx)$': 'ts-jest',
   },
   testEnvironment: 'node',
-  setupFilesAfterEnv: ['<rootDir>/__tests__/setup.js'],
+  globalSetup: '<rootDir>/src/test-utils/global-setup.ts',
+  globalTeardown: '<rootDir>/src/test-utils/global-teardown.ts',
+  setupFiles: ['<rootDir>/src/test-utils/test-env.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/test-utils/setup.ts'],
 }
diff --git a/backend/package-lock.json b/backend/package-lock.json
index e8e6d6a9b..bc6a78fdb 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "backend",
-  "version": "1.22.4",
+  "version": "1.23.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1597,6 +1597,32 @@
       "resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz",
       "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg=="
     },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
+      "integrity": "sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.4",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+      "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.6.tgz",
+      "integrity": "sha512-8Broas6vTtW4GIXTAHDoE32hnN2M5ykgCpWGbuXHQ15vEMqr23pB76e/GZcYsZCHALv50ktd24qhEyKr6wBtow==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.4",
+        "fastq": "^1.6.0"
+      }
+    },
     "@otplib/core": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/@otplib/core/-/core-12.0.1.tgz",
@@ -1890,6 +1916,12 @@
         "@types/node": "*"
       }
     },
+    "@types/cookiejar": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@types/cookiejar/-/cookiejar-2.1.2.tgz",
+      "integrity": "sha512-t73xJJrvdTjXrn4jLS9VSGRbz0nUY3cl2DMGDU48lKl+HR9dbbjW2A9r3g40VA++mQpy6uuHg33gy7du2BKpog==",
+      "dev": true
+    },
     "@types/cors": {
       "version": "2.8.6",
       "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.6.tgz",
@@ -2141,9 +2173,9 @@
       "dev": true
     },
     "@types/papaparse": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.0.4.tgz",
-      "integrity": "sha512-jFv9NcRddMiW4+thmntwZ1AhvMDAX4+tAUDkWWbNcIzgqyjjkuSHOEUPoVh1/gqJTWfDOD1tvl+hSp88W3UtqA==",
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.2.5.tgz",
+      "integrity": "sha512-TlqGskBad6skAgx2ifQmkO/FwiwObuWltBvX2bDceQhXh9IyZ7jYCK7qwhjB67kxw+0LJDXXM4jN3lcGqm1g5w==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -2204,6 +2236,25 @@
       "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==",
       "dev": true
     },
+    "@types/superagent": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@types/superagent/-/superagent-4.1.10.tgz",
+      "integrity": "sha512-xAgkb2CMWUMCyVc/3+7iQfOEBE75NvuZeezvmixbUw3nmENf2tCnQkW5yQLTYqvXUQ+R6EXxdqKKbal2zM5V/g==",
+      "dev": true,
+      "requires": {
+        "@types/cookiejar": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/supertest": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@types/supertest/-/supertest-2.0.10.tgz",
+      "integrity": "sha512-Xt8TbEyZTnD5Xulw95GLMOkmjGICrOQyJ2jqgkSjAUR3mm7pAIzSR0NFBaMcwlzVvlpCjNwbATcWWwjNiZiFrQ==",
+      "dev": true,
+      "requires": {
+        "@types/superagent": "*"
+      }
+    },
     "@types/swagger-jsdoc": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/swagger-jsdoc/-/swagger-jsdoc-3.0.2.tgz",
@@ -2283,6 +2334,22 @@
         "eslint-visitor-keys": "^1.1.0"
       }
     },
+    "@typescript-eslint/scope-manager": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.12.0.tgz",
+      "integrity": "sha512-QVf9oCSVLte/8jvOsxmgBdOaoe2J0wtEmBr13Yz0rkBNkl5D8bfnf6G4Vhox9qqMIoG7QQoVwd2eG9DM/ge4Qg==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "4.12.0",
+        "@typescript-eslint/visitor-keys": "4.12.0"
+      }
+    },
+    "@typescript-eslint/types": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.12.0.tgz",
+      "integrity": "sha512-N2RhGeheVLGtyy+CxRmxdsniB7sMSCfsnbh8K/+RUIXYYq3Ub5+sukRCjVE80QerrUBvuEvs4fDhz5AW/pcL6g==",
+      "dev": true
+    },
     "@typescript-eslint/typescript-estree": {
       "version": "2.25.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.25.0.tgz",
@@ -2335,6 +2402,24 @@
         }
       }
     },
+    "@typescript-eslint/visitor-keys": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.12.0.tgz",
+      "integrity": "sha512-hVpsLARbDh4B9TKYz5cLbcdMIOAoBYgFPCSP9FFS/liSF+b33gVNq8JHY3QGhHNVz85hObvL7BEYLlgx553WCw==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "4.12.0",
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz",
+          "integrity": "sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==",
+          "dev": true
+        }
+      }
+    },
     "abab": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.3.tgz",
@@ -2575,6 +2660,12 @@
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
       "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
     },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true
+    },
     "array-unique": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
@@ -3057,6 +3148,15 @@
         "unset-value": "^1.0.0"
       }
     },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
     "call-me-maybe": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
@@ -3498,6 +3598,12 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
+    "cookiejar": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/cookiejar/-/cookiejar-2.1.2.tgz",
+      "integrity": "sha512-Mw+adcfzPxcPeI+0WlvRrr/3lGVO0bD75SxX6811cxSh1Wbxx7xZBGK1eVtDf6si8rg2lhnUjsVLMFMfbRIuwA==",
+      "dev": true
+    },
     "copy-descriptor": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
@@ -3727,9 +3833,9 @@
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
     },
     "denque": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz",
-      "integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ=="
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-1.5.0.tgz",
+      "integrity": "sha512-CYiCSgIF1p6EUByQPlGkKnP1M9g0ZV3qMIrqMqZqdwazygIA/YP2vrbcyl1h/WppKJTdl1F85cXIle+394iDAQ=="
     },
     "depd": {
       "version": "1.1.2",
@@ -3758,6 +3864,15 @@
       "integrity": "sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==",
       "dev": true
     },
+    "dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "requires": {
+        "path-type": "^4.0.0"
+      }
+    },
     "doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -4033,6 +4148,86 @@
         "get-stdin": "^6.0.0"
       }
     },
+    "eslint-plugin-jest": {
+      "version": "24.1.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-24.1.3.tgz",
+      "integrity": "sha512-dNGGjzuEzCE3d5EPZQ/QGtmlMotqnYWD/QpCZ1UuZlrMAdhG5rldh0N0haCvhGnUkSeuORS5VNROwF9Hrgn3Lg==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/experimental-utils": "^4.0.1"
+      },
+      "dependencies": {
+        "@typescript-eslint/experimental-utils": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.12.0.tgz",
+          "integrity": "sha512-MpXZXUAvHt99c9ScXijx7i061o5HEjXltO+sbYfZAAHxv3XankQkPaNi5myy0Yh0Tyea3Hdq1pi7Vsh0GJb0fA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.3",
+            "@typescript-eslint/scope-manager": "4.12.0",
+            "@typescript-eslint/types": "4.12.0",
+            "@typescript-eslint/typescript-estree": "4.12.0",
+            "eslint-scope": "^5.0.0",
+            "eslint-utils": "^2.0.0"
+          }
+        },
+        "@typescript-eslint/typescript-estree": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.12.0.tgz",
+          "integrity": "sha512-gZkFcmmp/CnzqD2RKMich2/FjBTsYopjiwJCroxqHZIY11IIoN0l5lKqcgoAPKHt33H2mAkSfvzj8i44Jm7F4w==",
+          "dev": true,
+          "requires": {
+            "@typescript-eslint/types": "4.12.0",
+            "@typescript-eslint/visitor-keys": "4.12.0",
+            "debug": "^4.1.1",
+            "globby": "^11.0.1",
+            "is-glob": "^4.0.1",
+            "lodash": "^4.17.15",
+            "semver": "^7.3.2",
+            "tsutils": "^3.17.1"
+          }
+        },
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "semver": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
+      }
+    },
     "eslint-plugin-prettier": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.3.tgz",
@@ -4468,6 +4663,20 @@
       "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
       "dev": true
     },
+    "fast-glob": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz",
+      "integrity": "sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.0",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.2",
+        "picomatch": "^2.2.1"
+      }
+    },
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -4489,6 +4698,15 @@
       "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-3.18.0.tgz",
       "integrity": "sha512-tRrwShhppv0K5GKEtuVs92W0VGDaVltZAwtHbpjNF+JOT7cjIFySBGTEOmdBslXYyWYaZwEX/g4Su8ZeKg0LKQ=="
     },
+    "fastq": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.0.tgz",
+      "integrity": "sha512-7Eczs8gIPDrVzT+EksYBcupqMyxSHXXrHOLRRxU2/DicV8789MRBRR8+Hc2uWzUupOs4YS4JzBmBxjjCVBxD/g==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
     "fb-watchman": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
@@ -4638,6 +4856,12 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formidable": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.2.tgz",
+      "integrity": "sha512-V8gLm+41I/8kguQ4/o1D3RIHRmhYFG4pnNyonvua+40rqcEmT4+V71yaZ3B457xbbgCsCfjSPi65u/W6vK1U5Q==",
+      "dev": true
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -4715,6 +4939,11 @@
         }
       }
     },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
@@ -4763,6 +4992,16 @@
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
       "dev": true
     },
+    "get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
     "get-own-enumerable-property-symbols": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
@@ -4858,6 +5097,28 @@
         "type-fest": "^0.8.1"
       }
     },
+    "globby": {
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.2.tgz",
+      "integrity": "sha512-2ZThXDvvV8fYFRVIxnrMQBipZQDr7MxKAmQK1vujaj9/7eF0efG7BPUKJ7jP7G5SLF37xKDXvO4S/KKLj/Z0og==",
+      "dev": true,
+      "requires": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.1.1",
+        "ignore": "^5.1.4",
+        "merge2": "^1.3.0",
+        "slash": "^3.0.0"
+      },
+      "dependencies": {
+        "ignore": {
+          "version": "5.1.8",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+          "dev": true
+        }
+      }
+    },
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
@@ -4886,12 +5147,25 @@
         "har-schema": "^2.0.0"
       }
     },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
       "dev": true
     },
+    "has-symbols": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
+    },
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
@@ -8033,6 +8307,12 @@
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
       "dev": true
     },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
     "methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -8508,6 +8788,11 @@
         }
       }
     },
+    "object-inspect": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.2.tgz",
+      "integrity": "sha512-gz58rdPpadwztRrPjZE9DZLOABUpTGdcANUgOwBFO1C+HZZhePoP83M65WGDmbpwFYJSWqavbl4SgDn4k8RYTA=="
+    },
     "object-visit": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
@@ -8976,10 +9261,10 @@
     "postman-templating": {
       "version": "file:../modules/postman-templating",
       "requires": {
-        "@types/cheerio": "^0.22.24",
+        "@types/cheerio": "^0.22.28",
         "@types/lodash": "^4.14.168",
         "@types/mustache": "^4.1.1",
-        "@types/node": "^14.14.31",
+        "@types/node": "^14.14.42",
         "cheerio": "^1.0.0-rc.3",
         "lodash": "^4.17.21",
         "mustache": "^4.1.0",
@@ -9872,9 +10157,9 @@
           }
         },
         "@types/cheerio": {
-          "version": "0.22.24",
-          "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.24.tgz",
-          "integrity": "sha512-iKXt/cwltGvN06Dd6zwQG1U35edPwId9lmcSeYfcxSNvvNg4vysnFB+iBQNjj06tSVV7MBj0GWMQ7dwb4Z+p8Q==",
+          "version": "0.22.28",
+          "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.28.tgz",
+          "integrity": "sha512-ehUMGSW5IeDxJjbru4awKYMlKGmo1wSSGUVqXtYwlgmUM8X1a0PZttEIm6yEY7vHsY/hh6iPnklF213G0UColw==",
           "requires": {
             "@types/node": "*"
           }
@@ -9944,9 +10229,9 @@
           "integrity": "sha512-Sm0NWeLhS2QL7NNGsXvO+Fgp7e3JLHCO6RS3RCnfjAnkw6Y1bsji/AGfISdQZDIR/AeOyzkrxRk9jBkl55zdJw=="
         },
         "@types/node": {
-          "version": "14.14.31",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.31.tgz",
-          "integrity": "sha512-vFHy/ezP5qI0rFgJ7aQnjDXwAMrG0KqqIH7tQG5PPv3BWBayOPIQNBjVc/P6hhdZfMx51REc6tfDNXHUio893g=="
+          "version": "14.14.42",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.42.tgz",
+          "integrity": "sha512-88QoObqn9WYIUMRzOx92GmSHmU3JCyukC2ulEv8tFjUG9VeV2FQ/cA7VQ1gi+rB/+gBMVvzVFcTnz8RdMDVIWw=="
         },
         "@types/normalize-package-data": {
           "version": "2.4.0",
@@ -15495,20 +15780,20 @@
       "dev": true
     },
     "redis": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/redis/-/redis-3.0.2.tgz",
-      "integrity": "sha512-PNhLCrjU6vKVuMOyFu7oSP296mwBkcE6lrAjruBYG5LgdSqtRBoVQIylrMyVZD/lkF24RSNNatzvYag6HRBHjQ==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/redis/-/redis-3.1.2.tgz",
+      "integrity": "sha512-grn5KoZLr/qrRQVwoSkmzdbw6pwF+/rwODtrOr6vuBRiR/f3rjSTGupbF90Zpqm2oenix8Do6RV7pYEkGwlKkw==",
       "requires": {
-        "denque": "^1.4.1",
-        "redis-commands": "^1.5.0",
+        "denque": "^1.5.0",
+        "redis-commands": "^1.7.0",
         "redis-errors": "^1.2.0",
         "redis-parser": "^3.0.0"
       }
     },
     "redis-commands": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/redis-commands/-/redis-commands-1.5.0.tgz",
-      "integrity": "sha512-6KxamqpZ468MeQC3bkWmCB1fp56XL64D4Kf0zJSwDZbVLLm7KFkoIcHrgRvQ+sk8dnhySs7+yBg94yIkAK7aJg=="
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/redis-commands/-/redis-commands-1.7.0.tgz",
+      "integrity": "sha512-nJWqw3bTFy21hX/CPKHth6sfhZbdiHP6bTawSgQBlKOVRG7EZkfHbbHwQJnrE4vsQf0CMNE+3gJ4Fmm16vdVlQ=="
     },
     "redis-errors": {
       "version": "1.2.0",
@@ -15735,6 +16020,12 @@
         "any-promise": "^1.3.0"
       }
     },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -15780,6 +16071,12 @@
         "is-promise": "^2.1.0"
       }
     },
+    "run-parallel": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.10.tgz",
+      "integrity": "sha512-zb/1OuZ6flOlH6tQyMPUrE3x3Ulxjlo9WIVXR4yVYi4H9UXQaeIsPbLn2R3O3vQCnDKkAl2qHiuocKKX4Tz/Sw==",
+      "dev": true
+    },
     "rxjs": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
@@ -16142,6 +16439,16 @@
       "resolved": "https://registry.npmjs.org/shimmer/-/shimmer-1.2.1.tgz",
       "integrity": "sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw=="
     },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@@ -16643,6 +16950,125 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
       "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
     },
+    "superagent": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/superagent/-/superagent-6.1.0.tgz",
+      "integrity": "sha512-OUDHEssirmplo3F+1HWKUrUjvnQuA+nZI6i/JJBdXb5eq9IyEQwPyPpqND+SSsxf6TygpBEkUjISVRN4/VOpeg==",
+      "dev": true,
+      "requires": {
+        "component-emitter": "^1.3.0",
+        "cookiejar": "^2.1.2",
+        "debug": "^4.1.1",
+        "fast-safe-stringify": "^2.0.7",
+        "form-data": "^3.0.0",
+        "formidable": "^1.2.2",
+        "methods": "^1.1.2",
+        "mime": "^2.4.6",
+        "qs": "^6.9.4",
+        "readable-stream": "^3.6.0",
+        "semver": "^7.3.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "form-data": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
+          "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
+          "dev": true,
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "mime": {
+          "version": "2.4.7",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.7.tgz",
+          "integrity": "sha512-dhNd1uA2u397uQk3Nv5LM4lm93WYDUXFn3Fu291FJerns4jyTudqhIWe4W04YLy7Uk1tm1Ore04NpjRvQp/NPA==",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "qs": {
+          "version": "6.9.4",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
+          "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+          "dev": true
+        },
+        "semver": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
+      }
+    },
+    "supertest": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/supertest/-/supertest-6.0.1.tgz",
+      "integrity": "sha512-8yDNdm+bbAN/jeDdXsRipbq9qMpVF7wRsbwLgsANHqdjPsCoecmlTuqEcLQMGpmojFBhxayZ0ckXmLXYq7e+0g==",
+      "dev": true,
+      "requires": {
+        "methods": "1.1.2",
+        "superagent": "6.1.0"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -17081,9 +17507,9 @@
       "integrity": "sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw=="
     },
     "ts-jest": {
-      "version": "25.4.0",
-      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-25.4.0.tgz",
-      "integrity": "sha512-+0ZrksdaquxGUBwSdTIcdX7VXdwLIlSRsyjivVA9gcO+Cvr6ByqDhu/mi5+HCcb6cMkiQp5xZ8qRO7/eCqLeyw==",
+      "version": "25.5.1",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-25.5.1.tgz",
+      "integrity": "sha512-kHEUlZMK8fn8vkxDjwbHlxXRB9dHYpyzqKIGDNxbzs+Rz+ssNDSDNusEK8Fk/sDd4xE6iKoQLfFkFVaskmTJyw==",
       "dev": true,
       "requires": {
         "bs-logger": "0.x",
@@ -17093,18 +17519,11 @@
         "lodash.memoize": "4.x",
         "make-error": "1.x",
         "micromatch": "4.x",
-        "mkdirp": "1.x",
-        "resolve": "1.x",
+        "mkdirp": "0.x",
         "semver": "6.x",
         "yargs-parser": "18.x"
       },
       "dependencies": {
-        "mkdirp": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-          "dev": true
-        },
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -17166,26 +17585,30 @@
       "dev": true
     },
     "twilio": {
-      "version": "3.55.1",
-      "resolved": "https://registry.npmjs.org/twilio/-/twilio-3.55.1.tgz",
-      "integrity": "sha512-7S8658CaMKArxRgYr+UvZQTxbp7n3WzurjuQdNX2GwVO34vZzmiuAuYvldaJrZ2mSBgsXUSNVcofQT6tGHGRSg==",
+      "version": "3.58.0",
+      "resolved": "https://registry.npmjs.org/twilio/-/twilio-3.58.0.tgz",
+      "integrity": "sha512-ht+ixPbaJTeDEwxAEcF+m77vj/3m4wrbMpUZiLfhp5LTzuJDDDtzlplpyrVA9OtTLNtH0AdVpOgyo0W2eLtkZg==",
       "requires": {
         "axios": "^0.21.1",
         "dayjs": "^1.8.29",
+        "https-proxy-agent": "^5.0.0",
         "jsonwebtoken": "^8.5.1",
         "lodash": "^4.17.19",
         "q": "2.0.x",
         "qs": "^6.9.4",
         "rootpath": "^0.1.2",
         "scmp": "^2.1.0",
-        "url-parse": "^1.4.7",
+        "url-parse": "^1.5.0",
         "xmlbuilder": "^13.0.2"
       },
       "dependencies": {
         "qs": {
-          "version": "6.9.6",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
-          "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ=="
+          "version": "6.10.1",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
+          "integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==",
+          "requires": {
+            "side-channel": "^1.0.4"
+          }
         },
         "xmlbuilder": {
           "version": "13.0.2",
diff --git a/backend/package.json b/backend/package.json
index f04b23bd5..29d22db23 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,17 +1,17 @@
 {
   "name": "backend",
-  "version": "1.22.4",
+  "version": "1.23.0",
   "description": "Backend / API server for Postman",
   "main": "build/server.js",
   "scripts": {
-    "build": "rimraf build && tsc",
+    "build": "rimraf build && tsc -p tsconfig.build.json",
     "dev": "npm run postbuild && tsc-watch --onSuccess \"node ./build/server.js\"",
     "lint-no-fix": "tsc --noEmit && eslint --ext .js,.ts --cache .",
     "lint": "npm run lint-no-fix -- --fix",
     "postbuild": "npm run copy-assets",
     "start": "node build/server",
     "copy-assets": "copyfiles -u 1 src/assets/* src/**/*.sql build",
-    "test": "jest",
+    "test": "jest --maxWorkers=2",
     "test:watch": "jest --watch",
     "precommit": "lint-staged"
   },
@@ -46,7 +46,7 @@
     "pg": "^8.5.1",
     "pg-connection-string": "^2.4.0",
     "postman-templating": "file:../modules/postman-templating",
-    "redis": "^3.0.2",
+    "redis": "^3.1.2",
     "reflect-metadata": "^0.1.13",
     "sequelize": "^5.22.4",
     "sequelize-typescript": "^1.1.0",
@@ -57,7 +57,7 @@
     "telegraf": "^3.38.0",
     "threads": "^1.4.0",
     "tiny-worker": "^2.3.0",
-    "twilio": "^3.55.1",
+    "twilio": "^3.58.0",
     "uuid": "^7.0.3",
     "winston": "^3.3.3",
     "winston-cloudwatch": "^2.5.2"
@@ -80,9 +80,10 @@
     "@types/morgan": "^1.9.0",
     "@types/nodemailer": "^6.4.0",
     "@types/nodemailer-direct-transport": "^1.0.31",
-    "@types/papaparse": "^5.0.4",
+    "@types/papaparse": "^5.2.5",
     "@types/qs": "^6.9.4",
     "@types/redis": "^2.8.17",
+    "@types/supertest": "^2.0.10",
     "@types/swagger-jsdoc": "^3.0.2",
     "@types/swagger-ui-express": "^4.1.2",
     "@types/uuid": "^7.0.2",
@@ -92,12 +93,14 @@
     "copyfiles": "^2.2.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-jest": "^24.1.3",
     "eslint-plugin-prettier": "^3.1.3",
     "jest": "^25.5.2",
     "lint-staged": "^10.2.6",
     "prettier": "^2.0.5",
     "rimraf": "^3.0.2",
-    "ts-jest": "^25.4.0",
+    "supertest": "^6.0.1",
+    "ts-jest": "^25.5.1",
     "tsc-watch": "^4.2.3",
     "typescript": "^3.8.3"
   },
diff --git a/backend/src/core/loaders/sequelize.loader.ts b/backend/src/core/loaders/sequelize.loader.ts
index 4ed0c12da..a900913fb 100644
--- a/backend/src/core/loaders/sequelize.loader.ts
+++ b/backend/src/core/loaders/sequelize.loader.ts
@@ -2,35 +2,7 @@ import { Sequelize, SequelizeOptions } from 'sequelize-typescript'
 import { parse } from 'pg-connection-string'
 
 import config from '@core/config'
-import {
-  Credential,
-  JobQueue,
-  Campaign,
-  Worker,
-  User,
-  UserFeature,
-  UserCredential,
-  UserDemo,
-  Statistic,
-  ProtectedMessage,
-  Unsubscriber,
-  Agency,
-} from '@core/models'
-import {
-  EmailMessage,
-  EmailTemplate,
-  EmailOp,
-  EmailBlacklist,
-  EmailFromAddress,
-} from '@email/models'
-import { SmsMessage, SmsTemplate, SmsOp } from '@sms/models'
-import {
-  BotSubscriber,
-  TelegramMessage,
-  TelegramOp,
-  TelegramSubscriber,
-  TelegramTemplate,
-} from '@telegram/models'
+import { Credential, initializeModels } from '@core/models'
 
 import { loggerWithLabel } from '@core/logger'
 import { MutableConfig, generateRdsIamAuthToken } from '@core/utils/rds-iam'
@@ -76,41 +48,7 @@ const sequelizeLoader = async (): Promise<void> => {
     },
   } as SequelizeOptions)
 
-  const coreModels = [
-    Credential,
-    JobQueue,
-    Campaign,
-    Worker,
-    User,
-    UserFeature,
-    UserCredential,
-    UserDemo,
-    Statistic,
-    Unsubscriber,
-    Agency,
-  ]
-  const emailModels = [
-    EmailMessage,
-    EmailTemplate,
-    EmailOp,
-    EmailBlacklist,
-    ProtectedMessage,
-    EmailFromAddress,
-  ]
-  const smsModels = [SmsMessage, SmsTemplate, SmsOp]
-  const telegramModels = [
-    BotSubscriber,
-    TelegramOp,
-    TelegramMessage,
-    TelegramTemplate,
-    TelegramSubscriber,
-  ]
-  sequelize.addModels([
-    ...coreModels,
-    ...emailModels,
-    ...smsModels,
-    ...telegramModels,
-  ])
+  initializeModels(sequelize)
 
   try {
     await sequelize.sync()
diff --git a/backend/src/core/models/index.ts b/backend/src/core/models/index.ts
index 6b69773fb..bf3dc24e5 100644
--- a/backend/src/core/models/index.ts
+++ b/backend/src/core/models/index.ts
@@ -10,3 +10,4 @@ export * from './statistic'
 export * from './protected_message'
 export * from './unsubscriber'
 export * from './agency'
+export * from './initialize-models'
diff --git a/backend/src/core/models/initialize-models.ts b/backend/src/core/models/initialize-models.ts
new file mode 100644
index 000000000..63e7fa1a0
--- /dev/null
+++ b/backend/src/core/models/initialize-models.ts
@@ -0,0 +1,70 @@
+import { Sequelize } from 'sequelize-typescript'
+import {
+  Credential,
+  JobQueue,
+  Campaign,
+  Worker,
+  User,
+  UserFeature,
+  UserCredential,
+  UserDemo,
+  Statistic,
+  ProtectedMessage,
+  Unsubscriber,
+  Agency,
+} from '@core/models'
+import {
+  EmailMessage,
+  EmailTemplate,
+  EmailOp,
+  EmailBlacklist,
+  EmailFromAddress,
+} from '@email/models'
+import { SmsMessage, SmsTemplate, SmsOp } from '@sms/models'
+import {
+  BotSubscriber,
+  TelegramMessage,
+  TelegramOp,
+  TelegramSubscriber,
+  TelegramTemplate,
+} from '@telegram/models'
+
+export const initializeModels = (sequelize: Sequelize): void => {
+  const coreModels = [
+    Credential,
+    JobQueue,
+    Campaign,
+    Worker,
+    User,
+    UserFeature,
+    UserCredential,
+    UserDemo,
+    Statistic,
+    Unsubscriber,
+    Agency,
+  ]
+  const emailModels = [
+    EmailMessage,
+    EmailTemplate,
+    EmailOp,
+    EmailBlacklist,
+    ProtectedMessage,
+    EmailFromAddress,
+  ]
+  const smsModels = [SmsMessage, SmsTemplate, SmsOp]
+  const telegramModels = [
+    BotSubscriber,
+    TelegramOp,
+    TelegramMessage,
+    TelegramTemplate,
+    TelegramSubscriber,
+  ]
+  sequelize.addModels([
+    ...coreModels,
+    ...emailModels,
+    ...smsModels,
+    ...telegramModels,
+  ])
+}
+
+export default initializeModels
diff --git a/backend/src/core/routes/tests/auth.routes.test.ts b/backend/src/core/routes/tests/auth.routes.test.ts
new file mode 100644
index 000000000..5b83574a9
--- /dev/null
+++ b/backend/src/core/routes/tests/auth.routes.test.ts
@@ -0,0 +1,132 @@
+import request from 'supertest'
+import { Sequelize } from 'sequelize-typescript'
+import bcrypt from 'bcrypt'
+import initialiseServer from '@test-utils/server'
+import sequelizeLoader from '@test-utils/sequelize-loader'
+import { MailService, RedisService } from '@core/services'
+import { User } from '@core/models'
+
+const app = initialiseServer()
+const appWithUserSession = initialiseServer(true)
+let sequelize: Sequelize
+
+beforeAll(async () => {
+  sequelize = await sequelizeLoader(process.env.JEST_WORKER_ID || '1')
+})
+
+afterEach(async () => {
+  await User.destroy({ where: {} })
+})
+
+afterAll(async () => {
+  await sequelize.close()
+  RedisService.otpClient.quit()
+  RedisService.sessionClient.quit()
+})
+
+describe('POST /auth/otp', () => {
+  test('Invalid email format', async () => {
+    const res = await request(app)
+      .post('/auth/otp')
+      .send({ email: 'user!@open' })
+    expect(res.status).toBe(400)
+  })
+
+  test('Non gov.sg and non-whitelisted email', async () => {
+    // There are no users in the db
+    const res = await request(app)
+      .post('/auth/otp')
+      .send({ email: 'user@agency.com.sg' })
+    expect(res.status).toBe(401)
+    expect(res.body).toEqual({ message: 'User is not authorized' })
+  })
+
+  test('OTP is generated and sent to user', async () => {
+    const res = await request(app)
+      .post('/auth/otp')
+      .send({ email: 'user@agency.gov.sg' })
+    expect(res.status).toBe(200)
+
+    expect(MailService.mailClient.sendMail).toHaveBeenCalledWith(
+      expect.objectContaining({
+        body: expect.stringMatching(/Your OTP is <b>[0-9]{6}<\/b>/),
+      })
+    )
+  })
+})
+
+describe('POST /auth/login', () => {
+  test('Invalid otp format provided', async () => {
+    const res = await request(app)
+      .post('/auth/login')
+      .send({ email: 'user@agency.gov.sg', otp: '123' })
+    expect(res.status).toBe(400)
+  })
+
+  test('Invalid otp provided', async () => {
+    const res = await request(app)
+      .post('/auth/login')
+      .send({ email: 'user@agency.gov.sg', otp: '000000' })
+    expect(res.status).toBe(401)
+  })
+
+  test('OTP is invalidated after retries are exceeded', async () => {
+    const email = 'user@agency.gov.sg'
+    RedisService.otpClient.set(
+      email,
+      JSON.stringify({
+        retries: 1,
+        hash: await bcrypt.hash('123456', 10),
+        createdAt: 123,
+      })
+    )
+    const res = await request(app)
+      .post('/auth/login')
+      .send({ email, otp: '000000' })
+    expect(res.status).toBe(401)
+
+    // OTP should be deleted after exceeding retries
+    RedisService.otpClient.get(email, (_err, value) => {
+      expect(value).toBe(null)
+    })
+  })
+
+  test('Valid otp provided', async () => {
+    const email = 'user@agency.gov.sg'
+    RedisService.otpClient.set(
+      email,
+      JSON.stringify({
+        retries: 1,
+        hash: await bcrypt.hash('123456', 10),
+        createdAt: 123,
+      })
+    )
+
+    const res = await request(app)
+      .post('/auth/login')
+      .send({ email, otp: '123456' })
+    expect(res.status).toBe(200)
+  })
+})
+
+describe('GET /auth/userinfo', () => {
+  test('No existing session', async () => {
+    const res = await request(app).get('/auth/userinfo')
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({})
+  })
+
+  test('Existing session found', async () => {
+    await User.create({ id: 1, email: 'user@agency.gov.sg' })
+    const res = await request(appWithUserSession).get('/auth/userinfo')
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ id: 1, email: 'user@agency.gov.sg' })
+  })
+})
+
+describe('GET /auth/logout', () => {
+  test('Successfully logged out', async () => {
+    const res = await request(appWithUserSession).get('/auth/logout')
+    expect(res.status).toBe(200)
+  })
+})
diff --git a/backend/src/core/routes/tests/campaign.routes.test.ts b/backend/src/core/routes/tests/campaign.routes.test.ts
new file mode 100644
index 000000000..ba2329e49
--- /dev/null
+++ b/backend/src/core/routes/tests/campaign.routes.test.ts
@@ -0,0 +1,203 @@
+import request from 'supertest'
+import { Sequelize } from 'sequelize-typescript'
+import initialiseServer from '@test-utils/server'
+import { Campaign, User, UserDemo } from '@core/models'
+import sequelizeLoader from '@test-utils/sequelize-loader'
+import { RedisService } from '@core/services'
+import { ChannelType } from '@core/constants'
+
+const app = initialiseServer(true)
+let sequelize: Sequelize
+
+beforeAll(async () => {
+  sequelize = await sequelizeLoader(process.env.JEST_WORKER_ID || '1')
+  await User.create({ id: 1, email: 'user@agency.gov.sg' })
+})
+
+afterEach(async () => {
+  await Campaign.destroy({ where: {} })
+})
+
+afterAll(async () => {
+  await User.destroy({ where: {} })
+  await sequelize.close()
+  RedisService.otpClient.quit()
+  RedisService.sessionClient.quit()
+})
+
+describe('GET /campaigns', () => {
+  test('List campaigns with default limit and offset', async () => {
+    await Campaign.create({
+      name: 'campaign-1',
+      userId: 1,
+      type: 'SMS',
+      valid: false,
+      protect: false,
+    })
+    await Campaign.create({
+      name: 'campaign-2',
+      userId: 1,
+      type: 'SMS',
+      valid: false,
+      protect: false,
+    })
+
+    const res = await request(app).get('/campaigns')
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({
+      total_count: 2,
+      campaigns: expect.arrayContaining([
+        expect.objectContaining({ id: expect.any(Number) }),
+      ]),
+    })
+  })
+
+  test('List campaigns with defined limit and offset', async () => {
+    for (let i = 1; i <= 3; i++) {
+      await Campaign.create({
+        name: `campaign-${i}`,
+        userId: 1,
+        type: 'SMS',
+        valid: false,
+        protect: false,
+      })
+    }
+
+    const res = await request(app)
+      .get('/campaigns')
+      .query({ limit: 1, offset: 2 })
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({
+      total_count: 3,
+      campaigns: expect.arrayContaining([
+        expect.objectContaining({ name: 'campaign-1' }),
+      ]),
+    })
+  })
+})
+
+describe('POST /campaigns', () => {
+  test('Successfully create SMS campaign', async () => {
+    const res = await request(app).post('/campaigns').send({
+      name: 'test',
+      type: ChannelType.SMS,
+    })
+    expect(res.status).toBe(201)
+    expect(res.body).toEqual(
+      expect.objectContaining({
+        name: 'test',
+        type: ChannelType.SMS,
+        protect: false,
+      })
+    )
+  })
+
+  test('Successfully create Email campaign', async () => {
+    const res = await request(app).post('/campaigns').send({
+      name: 'test',
+      type: ChannelType.Email,
+    })
+    expect(res.status).toBe(201)
+    expect(res.body).toEqual(
+      expect.objectContaining({
+        name: 'test',
+        type: ChannelType.Email,
+        protect: false,
+      })
+    )
+  })
+
+  test('Successfully create Protected Email campaign', async () => {
+    const campaign = {
+      name: 'test',
+      type: ChannelType.Email,
+      protect: true,
+    }
+    const res = await request(app).post('/campaigns').send(campaign)
+    expect(res.status).toBe(201)
+    expect(res.body).toEqual(expect.objectContaining(campaign))
+  })
+
+  test('Successfully create Telegram campaign', async () => {
+    const res = await request(app).post('/campaigns').send({
+      name: 'test',
+      type: ChannelType.Telegram,
+    })
+    expect(res.status).toBe(201)
+    expect(res.body).toEqual(
+      expect.objectContaining({
+        name: 'test',
+        type: ChannelType.Telegram,
+        protect: false,
+      })
+    )
+  })
+
+  test('Successfully create demo SMS campaign', async () => {
+    const campaign = {
+      name: 'demo',
+      type: ChannelType.SMS,
+      demo_message_limit: 10,
+    }
+    const res = await request(app).post('/campaigns').send(campaign)
+    expect(res.status).toBe(201)
+    expect(res.body).toEqual(
+      expect.objectContaining({
+        ...campaign,
+        demo_message_limit: 10,
+      })
+    )
+
+    const demo = await UserDemo.findOne({ where: { userId: 1 } })
+    expect(demo?.numDemosSms).toEqual(2)
+  })
+
+  test('Successfully create demo Telegram campaign', async () => {
+    const campaign = {
+      name: 'demo',
+      type: ChannelType.Telegram,
+      demo_message_limit: 10,
+    }
+    const res = await request(app).post('/campaigns').send(campaign)
+    expect(res.status).toBe(201)
+    expect(res.body).toEqual(
+      expect.objectContaining({
+        ...campaign,
+        demo_message_limit: 10,
+      })
+    )
+
+    const demo = await UserDemo.findOne({ where: { userId: 1 } })
+    expect(demo?.numDemosTelegram).toEqual(2)
+  })
+
+  test('Unable to create demo Telegram campaign after user has no demos left', async () => {
+    const campaign = {
+      name: 'demo',
+      type: ChannelType.Telegram,
+      demo_message_limit: 10,
+    }
+    await UserDemo.update({ numDemosTelegram: 0 }, { where: { userId: 1 } })
+    const res = await request(app).post('/campaigns').send(campaign)
+    expect(res.status).toBe(400)
+  })
+
+  test('Unable to create demo campaign for unsupported channel', async () => {
+    const campaign = {
+      name: 'demo',
+      type: ChannelType.Email,
+      demo_message_limit: 10,
+    }
+    const res = await request(app).post('/campaigns').send(campaign)
+    expect(res.status).toBe(400)
+  })
+
+  test('Unable to create protected campaign for unsupported channel', async () => {
+    const res = await request(app).post('/campaigns').send({
+      name: 'test',
+      type: 'SMS',
+      protect: true,
+    })
+    expect(res.status).toBe(403)
+  })
+})
diff --git a/backend/src/core/services/parse-csv.service.ts b/backend/src/core/services/parse-csv.service.ts
index d7521534e..a47ea4b6a 100644
--- a/backend/src/core/services/parse-csv.service.ts
+++ b/backend/src/core/services/parse-csv.service.ts
@@ -51,10 +51,7 @@ const parseAndProcessCsv = async (
         try {
           // `rows` can have no data, but just the meta
           if (!previewed && data.length > 0) {
-            if (
-              meta.fields?.length > 0 &&
-              !meta.fields?.includes('recipient')
-            ) {
+            if (meta.fields?.length && !meta.fields?.includes('recipient')) {
               throw new RecipientColumnMissing()
             }
 
diff --git a/backend/__tests__/parse-csv.service.test.ts b/backend/src/core/services/tests/parse-csv.service.test.ts
similarity index 100%
rename from backend/__tests__/parse-csv.service.test.ts
rename to backend/src/core/services/tests/parse-csv.service.test.ts
diff --git a/backend/__tests__/phone-number.service.test.ts b/backend/src/core/services/tests/phone-number.service.test.ts
similarity index 100%
rename from backend/__tests__/phone-number.service.test.ts
rename to backend/src/core/services/tests/phone-number.service.test.ts
diff --git a/backend/src/sms/services/sms-callback.service.ts b/backend/src/sms/services/sms-callback.service.ts
index 0500d0da2..70a4890d9 100644
--- a/backend/src/sms/services/sms-callback.service.ts
+++ b/backend/src/sms/services/sms-callback.service.ts
@@ -1,4 +1,5 @@
 import { Request } from 'express'
+import { Op } from 'sequelize'
 import bcrypt from 'bcrypt'
 import config from '@core/config'
 import { SmsMessage } from '@sms/models'
@@ -55,6 +56,9 @@ const parseEvent = async (req: Request): Promise<void> => {
       }
     )
   } else {
+    // longer messages are delivered in multiple segments
+    // each segment has a separate delivery status
+    // Update the message as successful only if there does not exist previous failed status
     await SmsMessage.update(
       {
         receivedAt: new Date(),
@@ -64,6 +68,7 @@ const parseEvent = async (req: Request): Promise<void> => {
         where: {
           id: messageId,
           campaignId,
+          errorCode: { [Op.eq]: null },
         },
       }
     )
diff --git a/backend/src/telegram/utils/callback/handlers/contact.ts b/backend/src/telegram/utils/callback/handlers/contact.ts
index 766cf845f..d09749693 100644
--- a/backend/src/telegram/utils/callback/handlers/contact.ts
+++ b/backend/src/telegram/utils/callback/handlers/contact.ts
@@ -1,5 +1,6 @@
 import { TelegrafContext } from 'telegraf/typings/context'
 import { Message, ExtraReplyMessage } from 'telegraf/typings/telegram-types'
+import { QueryTypes } from 'sequelize'
 
 import { loggerWithLabel } from '@core/logger'
 import { PostmanTelegramError } from '../PostmanTelegramError'
@@ -22,40 +23,50 @@ const upsertTelegramSubscriber = async (
     telegramId,
     action: 'upsertTelegramSubscriber',
   }
+
   // Some Telegram clients send pre-prefixed phone numbers
   if (!phoneNumber.startsWith('+')) {
     phoneNumber = `+${phoneNumber}`
   }
 
-  /**
-   * Insert a telegram id and phone number, if that telegram id doesn't exist.
-   * Otherwise, if the new phone number does not exist,
-   * update the existing phone number associated with that telegram id with the new phone number,
-   * to maintain a 1-1 mapping.
-   */
-  const result = await TelegramSubscriber?.sequelize?.query(
-    `
-        INSERT INTO telegram_subscribers (phone_number, telegram_id, created_at, updated_at)
-        VALUES (:phoneNumber, :telegramId, clock_timestamp(), clock_timestamp())
-        ON CONFLICT (telegram_id) DO UPDATE
-        SET phone_number = :phoneNumber, updated_at = clock_timestamp()
-        WHERE NOT telegram_subscribers.phone_number = :phoneNumber
-      `,
-    {
-      replacements: {
-        phoneNumber,
-        telegramId,
-      },
+  const success = await TelegramSubscriber.sequelize?.transaction(
+    async (transaction) => {
+      /**
+       * Split into 2 scenarios:
+       * 1. a row with matching phone_number or telegram_id: update the row
+       * 2. no row matches: insert a new row
+       *
+       * Note: we have to use a raw query to update the phone_number.
+       * It is a primary key, and sequelize doesn't allow us to update
+       * primary keys in sequelize models.
+       */
+      const result = await TelegramSubscriber.sequelize?.query(
+        `
+        UPDATE telegram_subscribers
+        SET phone_number = :phoneNumber, telegram_id = :telegramId, updated_at = clock_timestamp()
+        WHERE phone_number = :phoneNumber OR telegram_id = :telegramId;
+        `,
+        {
+          transaction,
+          type: QueryTypes.UPDATE,
+          replacements: { phoneNumber, telegramId },
+        }
+      )
+
+      const updatedCount = result?.[1]
+      if (!updatedCount) {
+        await TelegramSubscriber.create(
+          { telegramId, phoneNumber },
+          { transaction }
+        )
+      }
+
+      return true
     }
   )
-  const affectedRows = result ? (result[1] as number) : 0
-  logger.info({
-    message: 'Upserted Telegram subscribesr',
-    affectedRows,
-    ...logMeta,
-  })
 
-  return affectedRows > 0
+  logger.info({ message: 'Upserted Telegram subscriber', ...logMeta })
+  return success ?? false
 }
 
 /**
@@ -111,7 +122,7 @@ export const contactMessageHandler = (botId: string) => async (
   }
 
   // Upsert and add subscriptions
-  await upsertTelegramSubscriber(phoneNumber, telegramId)
+  const upserted = await upsertTelegramSubscriber(phoneNumber, telegramId)
   const didAddBotSubscriber = await addBotSubscriber(botId, telegramId)
 
   // Respond
@@ -121,8 +132,19 @@ export const contactMessageHandler = (botId: string) => async (
     },
   }
 
-  if (!didAddBotSubscriber) {
-    return ctx.reply('Your phone number has been updated.', replyOptions)
+  // Configure bot reply based on what actually happened
+  let reply
+  if (didAddBotSubscriber) {
+    reply = 'You are now subscribed.'
+  } else {
+    reply = 'You were already subscribed.'
+  }
+
+  if (upserted) {
+    reply += ' Your phone number and Telegram ID have been updated.'
+  } else {
+    reply += ' An internal failure has occurred.'
   }
-  return ctx.reply('You are now subscribed.', replyOptions)
+
+  return ctx.reply(reply, replyOptions)
 }
diff --git a/backend/src/telegram/utils/callback/handlers/tests/contact.test.ts b/backend/src/telegram/utils/callback/handlers/tests/contact.test.ts
new file mode 100644
index 000000000..487c515d8
--- /dev/null
+++ b/backend/src/telegram/utils/callback/handlers/tests/contact.test.ts
@@ -0,0 +1,153 @@
+import { Sequelize } from 'sequelize-typescript'
+import { TelegrafContext } from 'telegraf/typings/context'
+import sequelizeLoader from '@test-utils/sequelize-loader'
+import { RedisService } from '@core/services'
+import { BotSubscriber, TelegramSubscriber } from '@telegram/models'
+import { contactMessageHandler } from '../contact'
+
+let sequelize: Sequelize
+beforeAll(async () => {
+  sequelize = await sequelizeLoader(process.env.JEST_WORKER_ID || '1')
+})
+
+afterAll(async () => {
+  await sequelize.close()
+  await new Promise((resolve) => {
+    RedisService.otpClient.quit(resolve)
+  })
+  await new Promise((resolve) => {
+    RedisService.sessionClient.quit(resolve)
+  })
+  await new Promise((resolve) => setImmediate(resolve))
+})
+
+describe('contactMessageHandler', () => {
+  const botId = '123456789'
+  const phoneNumber = '+6591234567'
+  const telegramId = 123456789
+
+  const createMockContext = (
+    phoneNumber: string,
+    userId: number
+  ): TelegrafContext => {
+    const ctx: any = {
+      reply: jest.fn(),
+      from: {
+        id: userId,
+      },
+      message: {
+        contact: {
+          phone_number: phoneNumber,
+          user_id: userId,
+        },
+      },
+    }
+    return ctx
+  }
+
+  const insertBotSubscription = async (
+    phoneNumber: string,
+    telegramId: number,
+    botId: string
+  ): Promise<void> => {
+    await TelegramSubscriber.create({
+      phoneNumber,
+      telegramId,
+    })
+    await BotSubscriber.create({
+      botId,
+      telegramId,
+    })
+  }
+
+  afterEach(async () => {
+    await TelegramSubscriber.destroy({ where: {} })
+    await BotSubscriber.destroy({ where: {} })
+  })
+
+  test('Insertion of a new Telegram subscriber', async () => {
+    const ctx = createMockContext(phoneNumber, telegramId)
+
+    await contactMessageHandler(botId)(ctx)
+
+    const subscriber = await TelegramSubscriber.findOne({
+      where: { phoneNumber },
+    })
+    expect(subscriber).not.toBeNull()
+
+    const botSubscriber = await BotSubscriber.findOne({
+      where: { botId, telegramId },
+    })
+    expect(botSubscriber).not.toBeNull()
+
+    expect(
+      ctx.reply
+    ).toBeCalledWith(
+      'You are now subscribed. Your phone number and Telegram ID have been updated.',
+      { reply_markup: { remove_keyboard: true } }
+    )
+  })
+
+  test('Update of phone number for existing Telegram subscriber', async () => {
+    await insertBotSubscription(phoneNumber, telegramId, botId)
+    const newPhoneNumber = '+6581234567'
+    const ctx = createMockContext(newPhoneNumber, telegramId)
+
+    await contactMessageHandler(botId)(ctx)
+
+    const subscriber = await TelegramSubscriber.findOne({
+      where: { phoneNumber: newPhoneNumber },
+    })
+    expect(subscriber?.telegramId).toBe(`${telegramId}`)
+
+    const botSubscriber = await BotSubscriber.findOne({
+      where: { botId, telegramId },
+    })
+    expect(botSubscriber).not.toBeNull()
+
+    expect(
+      ctx.reply
+    ).toBeCalledWith(
+      'You were already subscribed. Your phone number and Telegram ID have been updated.',
+      { reply_markup: { remove_keyboard: true } }
+    )
+  })
+
+  test('Update of Telegram ID for existing Telegram subscriber', async () => {
+    await insertBotSubscription(phoneNumber, telegramId, botId)
+    const newTelegramId = 11111111
+    const ctx = createMockContext(phoneNumber, newTelegramId)
+
+    await contactMessageHandler(botId)(ctx)
+
+    const subscriber = await TelegramSubscriber.findOne({
+      where: { phoneNumber },
+    })
+    expect(subscriber?.telegramId).toBe(`${newTelegramId}`)
+
+    const botSubscriber = await BotSubscriber.findOne({
+      where: { botId, telegramId: newTelegramId },
+    })
+    expect(botSubscriber).not.toBeNull()
+
+    expect(
+      ctx.reply
+    ).toBeCalledWith(
+      'You were already subscribed. Your phone number and Telegram ID have been updated.',
+      { reply_markup: { remove_keyboard: true } }
+    )
+  })
+
+  test('Skip update if contact details remain the same', async () => {
+    await insertBotSubscription(phoneNumber, telegramId, botId)
+    const ctx = createMockContext(phoneNumber, telegramId)
+
+    await contactMessageHandler(botId)(ctx)
+    expect(ctx.reply).toBeCalledWith(
+      'You were already subscribed. Your phone number and Telegram ID have been updated.',
+      {
+        reply_markup: { remove_keyboard: true },
+      }
+    )
+  })
+})
diff --git a/backend/src/test-utils/global-setup.ts b/backend/src/test-utils/global-setup.ts
new file mode 100644
index 000000000..f80e22037
--- /dev/null
+++ b/backend/src/test-utils/global-setup.ts
@@ -0,0 +1,29 @@
+import { Sequelize, SequelizeOptions } from 'sequelize-typescript'
+import config from '../core/config'
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace NodeJS {
+    interface Global {
+      sequelize: Sequelize
+    }
+  }
+}
+const DB_URI = 'postgres://localhost:5432/postgres'
+const TEST_DB = 'postmangovsg_test'
+// The number of workers should match the maxWorkers
+// defined in  npm test command
+const JEST_WORKERS = 2
+
+module.exports = async () => {
+  global.sequelize = new Sequelize(DB_URI, {
+    dialect: 'postgres',
+    logging: false,
+    pool: config.get('database.poolOptions'),
+  } as SequelizeOptions)
+
+  for (let i = 1; i <= JEST_WORKERS; i++) {
+    await global.sequelize.query(`DROP DATABASE IF EXISTS ${TEST_DB}_${i}`)
+    await global.sequelize.query(`CREATE DATABASE ${TEST_DB}_${i}`)
+  }
+}
diff --git a/backend/src/test-utils/global-teardown.ts b/backend/src/test-utils/global-teardown.ts
new file mode 100644
index 000000000..cf5586169
--- /dev/null
+++ b/backend/src/test-utils/global-teardown.ts
@@ -0,0 +1,3 @@
+module.exports = async function () {
+  await global.sequelize.close()
+}
diff --git a/backend/src/test-utils/sequelize-loader.ts b/backend/src/test-utils/sequelize-loader.ts
new file mode 100644
index 000000000..392bbc0c9
--- /dev/null
+++ b/backend/src/test-utils/sequelize-loader.ts
@@ -0,0 +1,40 @@
+import { Sequelize, SequelizeOptions } from 'sequelize-typescript'
+import config from '@core/config'
+import { Credential, initializeModels } from '@core/models'
+
+import { DefaultCredentialName } from '@core/constants'
+import { formatDefaultCredentialName } from '@core/utils'
+
+const DB_TEST_URI = config.get('database.databaseUri')
+
+const sequelizeLoader = async (dbName: string): Promise<Sequelize> => {
+  const sequelize = new Sequelize(`${DB_TEST_URI}_${dbName}`, {
+    dialect: 'postgres',
+    logging: false,
+    pool: config.get('database.poolOptions'),
+  } as SequelizeOptions)
+
+  initializeModels(sequelize)
+
+  try {
+    await sequelize.sync()
+    console.log({ message: 'Test Database loaded.' })
+  } catch (error) {
+    console.log(error.message)
+    console.error({ message: 'Unable to connect to test database', error })
+    process.exit(1)
+  }
+  // Create the default credential names in the credentials table
+  // Each name should be accompanied by an entry in Secrets Manager
+  await Promise.all(
+    [
+      DefaultCredentialName.Email,
+      formatDefaultCredentialName(DefaultCredentialName.SMS),
+      formatDefaultCredentialName(DefaultCredentialName.Telegram),
+    ].map((name) => Credential.upsert({ name }))
+  )
+
+  return sequelize
+}
+
+export default sequelizeLoader
diff --git a/backend/src/test-utils/server.ts b/backend/src/test-utils/server.ts
new file mode 100644
index 000000000..d127e16a3
--- /dev/null
+++ b/backend/src/test-utils/server.ts
@@ -0,0 +1,29 @@
+import express, { Request, Response, NextFunction } from 'express'
+import { errors as celebrateErrorMiddleware } from 'celebrate'
+import bodyParser from 'body-parser'
+import sessionLoader from '@core/loaders/session.loader'
+import routes from '@core/routes'
+
+const initialiseServer = (session?: boolean): express.Application => {
+  const app: express.Application = express()
+  sessionLoader({ app })
+  app.use(bodyParser.json())
+  app.use(bodyParser.urlencoded({ extended: false }))
+
+  app.use((req: Request, _res: Response, next: NextFunction): void => {
+    if (session && req.session) {
+      req.session.user = {
+        id: 1,
+        email: 'user@agency.gov.sg',
+      }
+    }
+    next()
+  })
+
+  app.use(routes)
+  app.use(celebrateErrorMiddleware())
+
+  return app
+}
+
+export default initialiseServer
diff --git a/backend/__tests__/setup.js b/backend/src/test-utils/setup.ts
similarity index 70%
rename from backend/__tests__/setup.js
rename to backend/src/test-utils/setup.ts
index d88a56f05..c8ff81811 100644
--- a/backend/__tests__/setup.js
+++ b/backend/src/test-utils/setup.ts
@@ -1,8 +1,12 @@
 /* eslint-disable no-console */
 global.console = {
+  ...global.console,
   log: jest.fn(), // console.log are ignored in tests
   error: console.error,
   warn: console.warn,
   info: console.info,
   debug: console.debug,
 }
+
+// Mock services
+jest.mock('@core/services/mail-client.class')
diff --git a/backend/src/test-utils/test-env.ts b/backend/src/test-utils/test-env.ts
new file mode 100644
index 000000000..7d33c5b18
--- /dev/null
+++ b/backend/src/test-utils/test-env.ts
@@ -0,0 +1,6 @@
+process.env.REDIS_OTP_URI = 'redis://localhost:6379/3'
+process.env.REDIS_SESSION_URI = 'redis://localhost:6379/4'
+process.env.SENDGRID_PUBLIC_KEY =
+  'MFYwEAYHKoZIzj0CAQYFK4EEAAoDQgAEKWFCI/58CSJe4uz9WX7VZZBIoeb3c1UEJ+pe3HL0ywyGA6c3Bq92+1YVKv0HHxf5mjm+t47P672gcaYarlp2LA=='
+process.env.SESSION_SECRET = 'SESSIONSECRET'
+process.env.DB_URI = 'postgres://localhost:5432/postmangovsg_test'
diff --git a/backend/tsconfig.build.json b/backend/tsconfig.build.json
new file mode 100644
index 000000000..b792dc00f
--- /dev/null
+++ b/backend/tsconfig.build.json
@@ -0,0 +1,5 @@
+// Excludes test in builds
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["tests/"]
+}
diff --git a/backend/tsconfig.json b/backend/tsconfig.json
index 32df37e0d..a16ed9ce9 100644
--- a/backend/tsconfig.json
+++ b/backend/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "include": [
     "./src/**/*",
+    "./tests/**/*",
   ],
   "exclude": [
     "node_modules"
@@ -22,7 +23,7 @@
     "sourceMap": true,                        /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
     "outDir": "./build",                      /* Redirect output structure to the directory. */
-    "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    "rootDir": "./src",                          /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                     /* Enable project compilation */
     // "incremental": true,                   /* Enable incremental compilation */
     // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
@@ -56,6 +57,7 @@
       "@sms/*": ["sms/*"],
       "@email/*": ["email/*"],
       "@telegram/*": ["telegram/*"],
+      "@test-utils/*": ["test-utils/*"],
     },                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
@@ -74,4 +76,4 @@
     "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
   },
-}
\ No newline at end of file
+}
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index 2d03e4eb2..70d2d32f8 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-undef
 module.exports = {
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'react-hooks'],
+  plugins: ['@typescript-eslint', 'react-hooks', 'import'],
   extends: [
     'eslint:recommended', // Recommended ESLint rules
     'plugin:@typescript-eslint/recommended', // Recommended TypeScript rules
@@ -13,6 +13,9 @@ module.exports = {
     react: {
       version: 'detect',
     },
+    'import/resolver': {
+      typescript: {},
+    },
   },
   parserOptions: {
     sourceType: 'module',
@@ -26,6 +29,8 @@ module.exports = {
   ],
   rules: {
     'react/prop-types': 'off', // No need proptypes since we're using TypeScript
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
     'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
     'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
 
@@ -41,5 +46,15 @@ module.exports = {
         allow: ['warn', 'error'],
       },
     ],
+
+    'import/order': [
+      'error',
+      {
+        'newlines-between': 'always-and-inside-groups',
+        alphabetize: {
+          order: 'asc',
+        },
+      },
+    ],
   },
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f8061464c..14ef1b6f7 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.22.4",
+  "version": "1.23.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4899,9 +4899,9 @@
       "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA=="
     },
     "@types/papaparse": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.0.3.tgz",
-      "integrity": "sha512-SgWGWnBGxl6XgjKDM2eoDg163ZFQtH6m6C2aOuaAf1T2gUB3rjaiPDDARbY9WlacRgZqieRG9imAfJaJ+5ouDA==",
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.2.5.tgz",
+      "integrity": "sha512-TlqGskBad6skAgx2ifQmkO/FwiwObuWltBvX2bDceQhXh9IyZ7jYCK7qwhjB67kxw+0LJDXXM4jN3lcGqm1g5w==",
       "requires": {
         "@types/node": "*"
       }
@@ -4928,22 +4928,23 @@
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
     "@types/react": {
-      "version": "16.9.29",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.29.tgz",
-      "integrity": "sha512-aE5sV9XVqKvIR8Lqa73hXvlqBzz5hBG0jtV9jZ1uuEWRmW8KN/mdQQmsYlPx6z/b2xa8zR3jtk7WoT+2/m4suA==",
+      "version": "16.14.5",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
+      "integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
       "dev": true,
       "requires": {
         "@types/prop-types": "*",
-        "csstype": "^2.2.0"
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
       }
     },
     "@types/react-dom": {
-      "version": "16.9.5",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.5.tgz",
-      "integrity": "sha512-BX6RQ8s9D+2/gDhxrj8OW+YD4R+8hj7FEM/OJHGNR0KipE1h1mSsf39YeyC81qafkq+N3rU3h3RFbLSwE5VqUg==",
+      "version": "16.9.12",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz",
+      "integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==",
       "dev": true,
       "requires": {
-        "@types/react": "*"
+        "@types/react": "^16"
       }
     },
     "@types/react-draft-wysiwyg": {
@@ -5003,6 +5004,12 @@
         "@types/node": "*"
       }
     },
+    "@types/scheduler": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
+      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==",
+      "dev": true
+    },
     "@types/set-cookie-parser": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@types/set-cookie-parser/-/set-cookie-parser-2.4.0.tgz",
@@ -5853,9 +5860,9 @@
           }
         },
         "object-inspect": {
-          "version": "1.9.0",
-          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
-          "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw=="
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.2.tgz",
+          "integrity": "sha512-gz58rdPpadwztRrPjZE9DZLOABUpTGdcANUgOwBFO1C+HZZhePoP83M65WGDmbpwFYJSWqavbl4SgDn4k8RYTA=="
         },
         "object.assign": {
           "version": "4.1.2",
@@ -6954,6 +6961,27 @@
             "isarray": "0.0.1"
           }
         },
+        "react": {
+          "version": "16.14.0",
+          "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+          "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2"
+          }
+        },
+        "react-dom": {
+          "version": "16.14.0",
+          "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+          "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2",
+            "scheduler": "^0.19.1"
+          }
+        },
         "react-router": {
           "version": "4.3.1",
           "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
@@ -6980,6 +7008,15 @@
             "react-router": "^4.3.1",
             "warning": "^4.0.1"
           }
+        },
+        "scheduler": {
+          "version": "0.19.1",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+          "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
         }
       }
     },
@@ -8326,9 +8363,9 @@
       }
     },
     "csstype": {
-      "version": "2.6.10",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz",
-      "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
+      "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==",
       "dev": true
     },
     "currently-unhandled": {
@@ -9438,6 +9475,31 @@
         }
       }
     },
+    "eslint-import-resolver-typescript": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.4.0.tgz",
+      "integrity": "sha512-useJKURidCcldRLCNKWemr1fFQL1SzB3G4a0li6lFGvlc5xGe1hY343bvG07cbpCzPuM/lK19FIJB3XGFSkplA==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.1",
+        "glob": "^7.1.6",
+        "is-glob": "^4.0.1",
+        "resolve": "^1.17.0",
+        "tsconfig-paths": "^3.9.0"
+      },
+      "dependencies": {
+        "resolve": {
+          "version": "1.20.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+          "dev": true,
+          "requires": {
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
+          }
+        }
+      }
+    },
     "eslint-module-utils": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz",
@@ -15351,9 +15413,9 @@
       }
     },
     "moment": {
-      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
     },
     "moo-color": {
       "version": "1.0.2",
@@ -17745,10 +17807,10 @@
     "postman-templating": {
       "version": "file:../modules/postman-templating",
       "requires": {
-        "@types/cheerio": "^0.22.24",
+        "@types/cheerio": "^0.22.28",
         "@types/lodash": "^4.14.168",
         "@types/mustache": "^4.1.1",
-        "@types/node": "^14.14.31",
+        "@types/node": "^14.14.42",
         "cheerio": "^1.0.0-rc.3",
         "lodash": "^4.17.21",
         "mustache": "^4.1.0",
@@ -18641,9 +18703,9 @@
           }
         },
         "@types/cheerio": {
-          "version": "0.22.24",
-          "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.24.tgz",
-          "integrity": "sha512-iKXt/cwltGvN06Dd6zwQG1U35edPwId9lmcSeYfcxSNvvNg4vysnFB+iBQNjj06tSVV7MBj0GWMQ7dwb4Z+p8Q==",
+          "version": "0.22.28",
+          "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.28.tgz",
+          "integrity": "sha512-ehUMGSW5IeDxJjbru4awKYMlKGmo1wSSGUVqXtYwlgmUM8X1a0PZttEIm6yEY7vHsY/hh6iPnklF213G0UColw==",
           "requires": {
             "@types/node": "*"
           }
@@ -18713,9 +18775,9 @@
           "integrity": "sha512-Sm0NWeLhS2QL7NNGsXvO+Fgp7e3JLHCO6RS3RCnfjAnkw6Y1bsji/AGfISdQZDIR/AeOyzkrxRk9jBkl55zdJw=="
         },
         "@types/node": {
-          "version": "14.14.31",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.31.tgz",
-          "integrity": "sha512-vFHy/ezP5qI0rFgJ7aQnjDXwAMrG0KqqIH7tQG5PPv3BWBayOPIQNBjVc/P6hhdZfMx51REc6tfDNXHUio893g=="
+          "version": "14.14.42",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.42.tgz",
+          "integrity": "sha512-88QoObqn9WYIUMRzOx92GmSHmU3JCyukC2ulEv8tFjUG9VeV2FQ/cA7VQ1gi+rB/+gBMVvzVFcTnz8RdMDVIWw=="
         },
         "@types/normalize-package-data": {
           "version": "2.4.0",
@@ -24264,9 +24326,9 @@
       }
     },
     "react": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
-      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -24456,9 +24518,9 @@
       }
     },
     "react-dom": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
-      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -24467,9 +24529,9 @@
       }
     },
     "react-draft-wysiwyg": {
-      "version": "1.14.5",
-      "resolved": "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.14.5.tgz",
-      "integrity": "sha512-utbJEs91757QXYoBwKRb/4kB3JdswLlj0heUiAeXs/OxZAUISJXxLMFLBIixRlIcUnNkwxOsMikRshDMtWIS3g==",
+      "version": "1.14.6",
+      "resolved": "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.14.6.tgz",
+      "integrity": "sha512-EMIteBVnlMAP3T97OfjlKchsHZ15mYWQwRw8QIInOtAvlZnnTydRjuHMCN0PuQ2dsXwMkJ7+MWc2aTL5RiXmFg==",
       "requires": {
         "classnames": "^2.2.6",
         "draftjs-utils": "^0.10.2",
@@ -27744,9 +27806,9 @@
       }
     },
     "validator": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/validator/-/validator-13.0.0.tgz",
-      "integrity": "sha512-anYx5fURbgF04lQV18nEQWZ/3wHGnxiKdG4aL8J+jEDsm98n/sU/bey+tYk6tnGJzm7ioh5FoqrAiQ6m03IgaA=="
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.6.0.tgz",
+      "integrity": "sha512-gVgKbdbHgtxpRyR8K0O6oFZPhhB5tT1jeEHZR0Znr9Svg03U0+r9DXWMrnRAB+HtCStDQKlaIZm42tVsVjqtjg=="
     },
     "value-equal": {
       "version": "1.0.1",
diff --git a/frontend/package.json b/frontend/package.json
index 9a319da84..0fd32abe0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.22.4",
+  "version": "1.23.0",
   "private": true,
   "scripts": {
     "start": "react-scripts start",
@@ -20,7 +20,7 @@
     "@lingui/react": "^3.5.1",
     "@sentry/browser": "^5.27.6",
     "@types/bcryptjs": "^2.4.2",
-    "@types/papaparse": "^5.0.3",
+    "@types/papaparse": "^5.2.5",
     "@types/validator": "^13.0.0",
     "axios": "^0.21.1",
     "boxicons": "^2.0.5",
@@ -33,13 +33,13 @@
     "html-to-draftjs": "^1.5.0",
     "lodash": "^4.17.21",
     "lottie-react": "^2.1.0",
-    "moment": "^2.24.0",
+    "moment": "^2.29.1",
     "papaparse": "^5.2.0",
     "postman-templating": "file:../modules/postman-templating",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
     "react-app-polyfill": "^1.0.6",
-    "react-dom": "^16.13.1",
-    "react-draft-wysiwyg": "^1.14.5",
+    "react-dom": "^16.14.0",
+    "react-draft-wysiwyg": "^1.14.6",
     "react-ga": "^2.7.0",
     "react-moment": "^0.9.7",
     "react-paginate": "^6.3.2",
@@ -51,7 +51,7 @@
     "spark-md5": "^3.0.1",
     "typescript": "^4.2.3",
     "uuidv4": "^6.1.1",
-    "validator": "^13.0.0",
+    "validator": "^13.6.0",
     "webcrypto-shim": "^0.1.5"
   },
   "devDependencies": {
@@ -72,8 +72,8 @@
     "@types/jest": "^26.0.21",
     "@types/lodash": "^4.14.165",
     "@types/node": "^12.12.34",
-    "@types/react": "^16.9.29",
-    "@types/react-dom": "^16.9.5",
+    "@types/react": "^16.14.5",
+    "@types/react-dom": "^16.9.12",
     "@types/react-draft-wysiwyg": "^1.13.0",
     "@types/react-paginate": "^6.2.1",
     "@types/react-router-dom": "^5.1.3",
@@ -84,6 +84,8 @@
     "babel-core": "^7.0.0-bridge.0",
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
     "jest-canvas-mock": "^2.3.1",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 01d91c8ee..9d9bc373a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,7 +1,8 @@
-import React, { Suspense, lazy } from 'react'
+// Components
+import { Suspense, lazy } from 'react'
+
 import { Route, Switch } from 'react-router-dom'
 
-// Components
 import Landing from 'components/landing'
 import Login from 'components/login'
 import ProtectedPage from 'components/protected'
diff --git a/frontend/src/classes/EmailCampaign.ts b/frontend/src/classes/EmailCampaign.ts
index 1a7b9f0f7..980754220 100644
--- a/frontend/src/classes/EmailCampaign.ts
+++ b/frontend/src/classes/EmailCampaign.ts
@@ -1,6 +1,7 @@
-import { get } from 'lodash'
 import { i18n } from '@lingui/core'
 import { t } from '@lingui/macro'
+import { get } from 'lodash'
+
 import { Campaign, CampaignRecipient } from './Campaign'
 
 const emailErrors = {
diff --git a/frontend/src/classes/SMSCampaign.ts b/frontend/src/classes/SMSCampaign.ts
index e4f0b080e..aa82d2d60 100644
--- a/frontend/src/classes/SMSCampaign.ts
+++ b/frontend/src/classes/SMSCampaign.ts
@@ -1,4 +1,5 @@
 import { t } from '@lingui/macro'
+
 import { Campaign, CampaignRecipient } from './Campaign'
 
 export enum SMSProgress {
diff --git a/frontend/src/classes/TelegramCampaign.ts b/frontend/src/classes/TelegramCampaign.ts
index 823e3a314..f5a442843 100644
--- a/frontend/src/classes/TelegramCampaign.ts
+++ b/frontend/src/classes/TelegramCampaign.ts
@@ -1,4 +1,5 @@
 import { t } from '@lingui/macro'
+
 import { Campaign, CampaignRecipient } from './Campaign'
 
 export enum TelegramProgress {
diff --git a/frontend/src/components/common/action-button/ActionButton.tsx b/frontend/src/components/common/action-button/ActionButton.tsx
index 361fe37aa..7b5afadac 100644
--- a/frontend/src/components/common/action-button/ActionButton.tsx
+++ b/frontend/src/components/common/action-button/ActionButton.tsx
@@ -1,5 +1,7 @@
-import React, { useState } from 'react'
 import cx from 'classnames'
+import { useState } from 'react'
+
+import type { MouseEvent as ReactMouseEvent } from 'react'
 
 import styles from './ActionButton.module.scss'
 
@@ -8,7 +10,7 @@ const ActionButton = (props: any) => {
   const [toggleDropdown, setToggleDropdown] = useState(false)
 
   function handleToggleDropdown(
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+    event: ReactMouseEvent<HTMLDivElement, MouseEvent>
   ) {
     event.stopPropagation()
     setToggleDropdown((toggleDropdown) => !toggleDropdown)
diff --git a/frontend/src/components/common/body-wrapper/BodyWrapper.tsx b/frontend/src/components/common/body-wrapper/BodyWrapper.tsx
index 255b433ba..5aa28affa 100644
--- a/frontend/src/components/common/body-wrapper/BodyWrapper.tsx
+++ b/frontend/src/components/common/body-wrapper/BodyWrapper.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
 import cx from 'classnames'
 
+import type { FunctionComponent } from 'react'
+
 import styles from './BodyWrapper.module.scss'
 
 interface BodyWrapperProps {
@@ -11,7 +12,7 @@ interface BodyWrapperProps {
   wrap?: boolean
 }
 
-const BodyWrapper: React.FunctionComponent<BodyWrapperProps> = ({
+const BodyWrapper: FunctionComponent<BodyWrapperProps> = ({
   wrap,
   children,
 }) => <div className={cx(styles.base, { [styles.wrap]: wrap })}>{children}</div>
diff --git a/frontend/src/components/common/button-group/ButtonGroup.tsx b/frontend/src/components/common/button-group/ButtonGroup.tsx
index 0534c53f2..177fb7fdb 100644
--- a/frontend/src/components/common/button-group/ButtonGroup.tsx
+++ b/frontend/src/components/common/button-group/ButtonGroup.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import type { ReactNode } from 'react'
 
 import styles from './ButtonGroup.module.scss'
 
-const ButtonGroup = ({ children }: { children: React.ReactNode }) => {
+const ButtonGroup = ({ children }: { children: ReactNode }) => {
   return <div className={styles.buttonGroup}>{children}</div>
 }
 
diff --git a/frontend/src/components/common/checkbox/Checkbox.tsx b/frontend/src/components/common/checkbox/Checkbox.tsx
index 058d887bf..d62d1d71a 100644
--- a/frontend/src/components/common/checkbox/Checkbox.tsx
+++ b/frontend/src/components/common/checkbox/Checkbox.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
-import type { Dispatch, SetStateAction } from 'react'
 import cx from 'classnames'
+import type { Dispatch, SetStateAction } from 'react'
+
+import type { ReactNode } from 'react'
 
 import styles from './Checkbox.module.scss'
 
@@ -13,7 +14,7 @@ const Checkbox = ({
   checked: boolean
   onChange: Dispatch<SetStateAction<boolean>>
   className?: string
-  children?: React.ReactNode
+  children?: ReactNode
 }) => {
   return (
     <div
diff --git a/frontend/src/components/common/close-button/CloseButton.tsx b/frontend/src/components/common/close-button/CloseButton.tsx
index ef6abd026..4bf282534 100644
--- a/frontend/src/components/common/close-button/CloseButton.tsx
+++ b/frontend/src/components/common/close-button/CloseButton.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import cx from 'classnames'
 
 import styles from './CloseButton.module.scss'
diff --git a/frontend/src/components/common/confirm-modal/ConfirmModal.tsx b/frontend/src/components/common/confirm-modal/ConfirmModal.tsx
index 2ca55721c..e69c83f03 100644
--- a/frontend/src/components/common/confirm-modal/ConfirmModal.tsx
+++ b/frontend/src/components/common/confirm-modal/ConfirmModal.tsx
@@ -1,12 +1,14 @@
-import React, { useContext, useState } from 'react'
 import cx from 'classnames'
 
-import { PrimaryButton, TextButton, ErrorBlock } from 'components/common'
-import { ModalContext } from 'contexts/modal.context'
+import { useContext, useState } from 'react'
 
-import ConfirmImage from 'assets/img/confirm-modal.svg'
 import styles from './ConfirmModal.module.scss'
 
+import ConfirmImage from 'assets/img/confirm-modal.svg'
+
+import { PrimaryButton, TextButton, ErrorBlock } from 'components/common'
+import { ModalContext } from 'contexts/modal.context'
+
 const ConfirmModal = ({
   title,
   subtitle,
diff --git a/frontend/src/components/common/cred-label-input/CredLabelInput.tsx b/frontend/src/components/common/cred-label-input/CredLabelInput.tsx
index 46ee47f93..9edec29f3 100644
--- a/frontend/src/components/common/cred-label-input/CredLabelInput.tsx
+++ b/frontend/src/components/common/cred-label-input/CredLabelInput.tsx
@@ -1,8 +1,6 @@
-import React from 'react'
-
-import TextInput from '../text-input'
-import LabelWithExternalLink from '../label-with-external-link'
 import ErrorBlock from '../error-block'
+import LabelWithExternalLink from '../label-with-external-link'
+import TextInput from '../text-input'
 
 const CredLabelInput = ({
   value,
diff --git a/frontend/src/components/common/csv-upload/CsvUpload.tsx b/frontend/src/components/common/csv-upload/CsvUpload.tsx
index 3551fea90..7ac7ecd50 100644
--- a/frontend/src/components/common/csv-upload/CsvUpload.tsx
+++ b/frontend/src/components/common/csv-upload/CsvUpload.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
-
-import { DetailBlock, ErrorBlock } from 'components/common'
+import type { ReactNode } from 'react'
 
 import styles from './CsvUpload.module.scss'
 
+import { DetailBlock, ErrorBlock } from 'components/common'
+
 const CsvUpload = ({
   isCsvProcessing,
   csvInfo,
@@ -18,7 +18,7 @@ const CsvUpload = ({
     csvError?: string
   }
   onErrorClose: () => void
-  children: React.ReactNode
+  children: ReactNode
 }) => {
   const { numRecipients = 0, csvFilename, tempCsvFilename, csvError } = csvInfo
 
diff --git a/frontend/src/components/common/detail-block/DetailBlock.tsx b/frontend/src/components/common/detail-block/DetailBlock.tsx
index ae2e9c5a1..257925543 100644
--- a/frontend/src/components/common/detail-block/DetailBlock.tsx
+++ b/frontend/src/components/common/detail-block/DetailBlock.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import cx from 'classnames'
 
 import styles from './DetailBlock.module.scss'
diff --git a/frontend/src/components/common/dropdown/Dropdown.tsx b/frontend/src/components/common/dropdown/Dropdown.tsx
index bef3c7cc2..fd4910e25 100644
--- a/frontend/src/components/common/dropdown/Dropdown.tsx
+++ b/frontend/src/components/common/dropdown/Dropdown.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useRef } from 'react'
 import cx from 'classnames'
+import { useState, useEffect, useRef } from 'react'
 
 import styles from './Dropdown.module.scss'
 
diff --git a/frontend/src/components/common/email-preview-block/EmailPreviewBlock.tsx b/frontend/src/components/common/email-preview-block/EmailPreviewBlock.tsx
index 102c91c7d..db400e710 100644
--- a/frontend/src/components/common/email-preview-block/EmailPreviewBlock.tsx
+++ b/frontend/src/components/common/email-preview-block/EmailPreviewBlock.tsx
@@ -1,9 +1,9 @@
 import cx from 'classnames'
-import React from 'react'
 import type { FC } from 'react'
 
-import RichTextEditor from '../rich-text-editor'
 import DetailBlock from '../detail-block'
+import RichTextEditor from '../rich-text-editor'
+
 import styles from './EmailPreviewBlock.module.scss'
 
 interface EmailPreviewBlockProps {
diff --git a/frontend/src/components/common/error-block/ErrorBlock.tsx b/frontend/src/components/common/error-block/ErrorBlock.tsx
index 506c73d98..0967daf1e 100644
--- a/frontend/src/components/common/error-block/ErrorBlock.tsx
+++ b/frontend/src/components/common/error-block/ErrorBlock.tsx
@@ -1,8 +1,11 @@
-import React from 'react'
 import cx from 'classnames'
-import styles from './ErrorBlock.module.scss'
+
+import type { ReactNode } from 'react'
+
 import MessageBlock from '../message-block'
 
+import styles from './ErrorBlock.module.scss'
+
 const ErrorBlock = ({
   className,
   children,
@@ -12,7 +15,7 @@ const ErrorBlock = ({
   ...otherProps
 }: {
   className?: string
-  children?: React.ReactNode
+  children?: ReactNode
   absolute?: boolean
   onClose?: () => void
   title?: string
diff --git a/frontend/src/components/common/export-recipients/ExportRecipients.tsx b/frontend/src/components/common/export-recipients/ExportRecipients.tsx
index 936b8d8f3..8c45dcfc0 100644
--- a/frontend/src/components/common/export-recipients/ExportRecipients.tsx
+++ b/frontend/src/components/common/export-recipients/ExportRecipients.tsx
@@ -1,15 +1,20 @@
-import React, { useState, useEffect } from 'react'
+import { Trans } from '@lingui/macro'
+
 import cx from 'classnames'
+
 import download from 'downloadjs'
+import moment from 'moment'
+import { useState, useEffect } from 'react'
+
+import type { MouseEvent as ReactMouseEvent } from 'react'
+
+import styles from './ExportRecipients.module.scss'
 
-import { Status } from 'classes/Campaign'
 import type { ChannelType } from 'classes/Campaign'
+import { Status } from 'classes/Campaign'
 import { ActionButton, InfoBlock } from 'components/common'
-import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
 import { exportCampaignStats } from 'services/campaign.service'
-import styles from './ExportRecipients.module.scss'
-import { Trans } from '@lingui/macro'
-import moment from 'moment'
+import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
 
 export enum CampaignExportStatus {
   Unavailable = 'Unavailable',
@@ -72,7 +77,7 @@ const ExportRecipients = ({
   })
 
   async function exportRecipients(
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+    event: ReactMouseEvent<HTMLDivElement, MouseEvent>
   ) {
     try {
       event.stopPropagation()
diff --git a/frontend/src/components/common/file-input/FileInput.tsx b/frontend/src/components/common/file-input/FileInput.tsx
index 559e92074..282c7d3eb 100644
--- a/frontend/src/components/common/file-input/FileInput.tsx
+++ b/frontend/src/components/common/file-input/FileInput.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import styles from './FileInput.module.scss'
 
 const FileInput = ({
diff --git a/frontend/src/components/common/info-banner/InfoBanner.tsx b/frontend/src/components/common/info-banner/InfoBanner.tsx
index af20bf88e..05982bd9b 100644
--- a/frontend/src/components/common/info-banner/InfoBanner.tsx
+++ b/frontend/src/components/common/info-banner/InfoBanner.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import styles from './InfoBanner.module.scss'
 
 const InfoBanner = (props: any) => {
diff --git a/frontend/src/components/common/info-block/InfoBlock.tsx b/frontend/src/components/common/info-block/InfoBlock.tsx
index 680a8dcb5..edc8202cc 100644
--- a/frontend/src/components/common/info-block/InfoBlock.tsx
+++ b/frontend/src/components/common/info-block/InfoBlock.tsx
@@ -1,8 +1,11 @@
-import React from 'react'
 import cx from 'classnames'
-import styles from './InfoBlock.module.scss'
+
+import type { ReactNode } from 'react'
+
 import MessageBlock from '../message-block'
 
+import styles from './InfoBlock.module.scss'
+
 const InfoBlock = ({
   className,
   children,
@@ -12,7 +15,7 @@ const InfoBlock = ({
   ...otherProps
 }: {
   className?: string
-  children?: React.ReactNode
+  children?: ReactNode
   absolute?: boolean
   onClose?: () => void
   title?: string
diff --git a/frontend/src/components/common/label-with-external-link/LabelWithExternalLink.tsx b/frontend/src/components/common/label-with-external-link/LabelWithExternalLink.tsx
index 24efe8731..add0429ca 100644
--- a/frontend/src/components/common/label-with-external-link/LabelWithExternalLink.tsx
+++ b/frontend/src/components/common/label-with-external-link/LabelWithExternalLink.tsx
@@ -1,6 +1,5 @@
-import React from 'react'
-
 import { OutboundLink } from 'react-ga'
+
 import styles from './LabelWithExternalLink.module.scss'
 
 const LabelWithExternalLink = ({
diff --git a/frontend/src/components/common/message-block/MessageBlock.tsx b/frontend/src/components/common/message-block/MessageBlock.tsx
index ea8446fd8..f004d9cce 100644
--- a/frontend/src/components/common/message-block/MessageBlock.tsx
+++ b/frontend/src/components/common/message-block/MessageBlock.tsx
@@ -1,10 +1,11 @@
-import React from 'react'
 import cx from 'classnames'
 
-import { CloseButton } from 'components/common'
+import type { ReactNode } from 'react'
 
 import styles from './MessageBlock.module.scss'
 
+import { CloseButton } from 'components/common'
+
 const MessageBlock = ({
   className,
   icon,
@@ -17,7 +18,7 @@ const MessageBlock = ({
   className?: string
   title?: string
   icon?: string
-  children?: React.ReactNode
+  children?: ReactNode
   absolute?: boolean
   onClose?: () => void
   role?: string
diff --git a/frontend/src/components/common/modal/Modal.tsx b/frontend/src/components/common/modal/Modal.tsx
index acfe19e6e..8479de382 100644
--- a/frontend/src/components/common/modal/Modal.tsx
+++ b/frontend/src/components/common/modal/Modal.tsx
@@ -1,16 +1,18 @@
 import cx from 'classnames'
-import React from 'react'
 
-import { CloseButton } from 'components/common'
+import type { ReactNode } from 'react'
+
 import styles from './Modal.module.scss'
 
+import { CloseButton } from 'components/common'
+
 const Modal = ({
   onClose,
   children,
   modalTitle,
 }: {
   onClose: any
-  children: React.ReactNode
+  children: ReactNode
   modalTitle?: string
 }) => {
   const modalBackgroundId = 'modal-background'
diff --git a/frontend/src/components/common/nav-bar/NavBar.tsx b/frontend/src/components/common/nav-bar/NavBar.tsx
index a4b398681..31a1a8f34 100644
--- a/frontend/src/components/common/nav-bar/NavBar.tsx
+++ b/frontend/src/components/common/nav-bar/NavBar.tsx
@@ -1,19 +1,23 @@
-import React, { useState, useContext } from 'react'
-import { NavLink, useLocation } from 'react-router-dom'
+import { i18n } from '@lingui/core'
+
 import cx from 'classnames'
+
+import { useState, useContext } from 'react'
+
 import { OutboundLink } from 'react-ga'
 
-import { ModalContext } from 'contexts/modal.context'
-import { TextButton } from 'components/common'
-import CreateModal from 'components/dashboard/create/create-modal'
-import { logout } from 'services/auth.service'
-import { AuthContext } from 'contexts/auth.context'
+import { NavLink, useLocation } from 'react-router-dom'
 
-import AppLogo from 'assets/img/brand/app-logo-reverse.svg'
 import styles from './NavBar.module.scss'
 
-import { i18n } from '@lingui/core'
+import AppLogo from 'assets/img/brand/app-logo-reverse.svg'
+import { TextButton } from 'components/common'
+import CreateModal from 'components/dashboard/create/create-modal'
 import { LINKS } from 'config'
+import { AuthContext } from 'contexts/auth.context'
+import { ModalContext } from 'contexts/modal.context'
+
+import { logout } from 'services/auth.service'
 
 const NavBar = () => {
   const { setAuthenticated, email } = useContext(AuthContext)
diff --git a/frontend/src/components/common/next-button/NextButton.tsx b/frontend/src/components/common/next-button/NextButton.tsx
index 706b849c9..92d60b033 100644
--- a/frontend/src/components/common/next-button/NextButton.tsx
+++ b/frontend/src/components/common/next-button/NextButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type { ReactElement } from 'react'
 
 import { PrimaryButton } from 'components/common'
 
@@ -9,7 +9,7 @@ const NextButton = ({
 }: {
   onClick: (...args: any[]) => void | Promise<void>
   disabled?: boolean
-  loadingPlaceholder?: string | React.ReactElement
+  loadingPlaceholder?: string | ReactElement
 }) => {
   return (
     <div className="progress-button">
diff --git a/frontend/src/components/common/pagination/Pagination.tsx b/frontend/src/components/common/pagination/Pagination.tsx
index a26d001f6..d7d51bb61 100644
--- a/frontend/src/components/common/pagination/Pagination.tsx
+++ b/frontend/src/components/common/pagination/Pagination.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import ReactPaginate from 'react-paginate'
 
 import styles from './Pagination.module.scss'
diff --git a/frontend/src/components/common/preview-block/PreviewBlock.tsx b/frontend/src/components/common/preview-block/PreviewBlock.tsx
index 1c1161411..f358bbfe0 100644
--- a/frontend/src/components/common/preview-block/PreviewBlock.tsx
+++ b/frontend/src/components/common/preview-block/PreviewBlock.tsx
@@ -1,8 +1,10 @@
-import React from 'react'
 import cx from 'classnames'
 import escapeHTML from 'escape-html'
 
+import type { FunctionComponent } from 'react'
+
 import DetailBlock from '../detail-block'
+
 import styles from './PreviewBlock.module.scss'
 
 interface PreviewBlockProps {
@@ -13,7 +15,7 @@ interface PreviewBlockProps {
   className?: string
 }
 
-const PreviewBlock: React.FunctionComponent<PreviewBlockProps> = ({
+const PreviewBlock: FunctionComponent<PreviewBlockProps> = ({
   body,
   subject,
   replyTo,
diff --git a/frontend/src/components/common/primary-button/PrimaryButton.tsx b/frontend/src/components/common/primary-button/PrimaryButton.tsx
index 875490ab2..447c4a574 100644
--- a/frontend/src/components/common/primary-button/PrimaryButton.tsx
+++ b/frontend/src/components/common/primary-button/PrimaryButton.tsx
@@ -1,17 +1,24 @@
-import React, { useState, useMemo } from 'react'
 import cx from 'classnames'
 
-import useIsMounted from 'components/custom-hooks/use-is-mounted'
+import { useState, useMemo } from 'react'
+
+import type {
+  ButtonHTMLAttributes,
+  ReactElement,
+  FunctionComponent,
+} from 'react'
+
 import styles from './PrimaryButton.module.scss'
 
-interface PrimaryButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+import useIsMounted from 'components/custom-hooks/use-is-mounted'
+
+interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   alignRight?: boolean
   onClick?: (...args: any[]) => void | Promise<void>
-  loadingPlaceholder?: string | React.ReactElement
+  loadingPlaceholder?: string | ReactElement
 }
 
-const PrimaryButton: React.FunctionComponent<PrimaryButtonProps> = ({
+const PrimaryButton: FunctionComponent<PrimaryButtonProps> = ({
   alignRight,
   className,
   disabled,
diff --git a/frontend/src/components/common/progress-bar/ProgressBar.tsx b/frontend/src/components/common/progress-bar/ProgressBar.tsx
index 20fd77ae5..ec2eda874 100644
--- a/frontend/src/components/common/progress-bar/ProgressBar.tsx
+++ b/frontend/src/components/common/progress-bar/ProgressBar.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import cx from 'classnames'
 
 import styles from './ProgressBar.module.scss'
diff --git a/frontend/src/components/common/progress-details/ProgressDetails.tsx b/frontend/src/components/common/progress-details/ProgressDetails.tsx
index 9203120da..482a557e3 100644
--- a/frontend/src/components/common/progress-details/ProgressDetails.tsx
+++ b/frontend/src/components/common/progress-details/ProgressDetails.tsx
@@ -1,8 +1,14 @@
-import React, { useContext } from 'react'
-import Moment from 'react-moment'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/macro'
+
 import cx from 'classnames'
 
-import { CampaignContext } from 'contexts/campaign.context'
+import { useContext } from 'react'
+import { OutboundLink } from 'react-ga'
+import Moment from 'react-moment'
+
+import styles from './ProgressDetails.module.scss'
+
 import { CampaignStats, Status } from 'classes/Campaign'
 import {
   ProgressBar,
@@ -10,11 +16,8 @@ import {
   ExportRecipients,
   InfoBlock,
 } from 'components/common'
-import styles from './ProgressDetails.module.scss'
-import { OutboundLink } from 'react-ga'
 import { LINKS } from 'config'
-import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/macro'
+import { CampaignContext } from 'contexts/campaign.context'
 
 const ProgressDetails = ({
   stats,
diff --git a/frontend/src/components/common/progress-pane/ProgressPane.tsx b/frontend/src/components/common/progress-pane/ProgressPane.tsx
index 56fc2c4bf..4bae9dc13 100644
--- a/frontend/src/components/common/progress-pane/ProgressPane.tsx
+++ b/frontend/src/components/common/progress-pane/ProgressPane.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
 import cx from 'classnames'
+
 import styles from './ProgressPane.module.scss'
 
 const ProgressItem = ({
diff --git a/frontend/src/components/common/protected-preview/ProtectedPreview.tsx b/frontend/src/components/common/protected-preview/ProtectedPreview.tsx
index b315d9258..fd6ecb490 100644
--- a/frontend/src/components/common/protected-preview/ProtectedPreview.tsx
+++ b/frontend/src/components/common/protected-preview/ProtectedPreview.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
 import cx from 'classnames'
 
 import styles from './ProtectedPreview.module.scss'
+
 import appLogo from 'assets/img/brand/app-logo-grey.svg'
 
 /**
diff --git a/frontend/src/components/common/rich-text-editor/RichTextEditor.tsx b/frontend/src/components/common/rich-text-editor/RichTextEditor.tsx
index eb2c4caac..7c487e176 100644
--- a/frontend/src/components/common/rich-text-editor/RichTextEditor.tsx
+++ b/frontend/src/components/common/rich-text-editor/RichTextEditor.tsx
@@ -1,6 +1,4 @@
 import cx from 'classnames'
-import React, { useContext, useEffect, useState } from 'react'
-import Immutable from 'immutable'
 import {
   EditorState,
   ContentBlock,
@@ -12,8 +10,17 @@ import {
   SelectionState,
   KeyBindingUtil,
 } from 'draft-js'
+import Immutable from 'immutable'
+import { createContext, useContext, useEffect, useState } from 'react'
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  Dispatch,
+  SetStateAction,
+} from 'react'
 import { Editor } from 'react-draft-wysiwyg'
 
+import styles from './RichTextEditor.module.scss'
+import { ImageBlock, TableWrapper } from './blocks'
 import {
   LinkControl,
   ImageControl,
@@ -30,11 +37,9 @@ import {
   PreviewLinkDecorator,
 } from './decorators'
 import { Converter } from './utils'
-import { ImageBlock, TableWrapper } from './blocks'
 
 import 'draft-js/dist/Draft.css'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
-import styles from './RichTextEditor.module.scss'
 
 const ExtendedEditor = (props: any) => <Editor {...props} />
 
@@ -116,9 +121,9 @@ const TOOLBAR_CUSTOM_BUTTONS = [<TableControl key="tableOption" />]
 
 const defaultValue = {
   editorState: EditorState.createEmpty(),
-  setEditorState: {} as React.Dispatch<React.SetStateAction<EditorState>>,
+  setEditorState: {} as Dispatch<SetStateAction<EditorState>>,
 }
-export const EditorContext = React.createContext(defaultValue)
+export const EditorContext = createContext(defaultValue)
 
 const RichTextEditor = ({
   onChange,
@@ -235,7 +240,7 @@ const RichTextEditor = ({
   }
 
   function handleReturn(
-    e: React.KeyboardEvent,
+    e: ReactKeyboardEvent,
     state: EditorState
   ): 'handled' | 'not-handled' {
     const selection = state.getSelection()
diff --git a/frontend/src/components/common/rich-text-editor/blocks/ImageBlock.tsx b/frontend/src/components/common/rich-text-editor/blocks/ImageBlock.tsx
index 0a5c55ff3..d693a85ae 100644
--- a/frontend/src/components/common/rich-text-editor/blocks/ImageBlock.tsx
+++ b/frontend/src/components/common/rich-text-editor/blocks/ImageBlock.tsx
@@ -1,4 +1,3 @@
-import React, { useRef, useState, useContext } from 'react'
 import {
   ContentBlock,
   ContentState,
@@ -6,6 +5,7 @@ import {
   SelectionState,
   Modifier,
 } from 'draft-js'
+import { useRef, useState, useContext } from 'react'
 
 import { EditorContext } from '../RichTextEditor'
 
diff --git a/frontend/src/components/common/rich-text-editor/blocks/TableWrapper.tsx b/frontend/src/components/common/rich-text-editor/blocks/TableWrapper.tsx
index e0cc9f4f8..618a75de5 100644
--- a/frontend/src/components/common/rich-text-editor/blocks/TableWrapper.tsx
+++ b/frontend/src/components/common/rich-text-editor/blocks/TableWrapper.tsx
@@ -1,4 +1,5 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
+
 import { EditorContext } from '../RichTextEditor'
 
 export const TableWrapper = (props: any) => {
diff --git a/frontend/src/components/common/rich-text-editor/controls/BlockTypeControl.tsx b/frontend/src/components/common/rich-text-editor/controls/BlockTypeControl.tsx
index a4bcb0648..93c09dc40 100644
--- a/frontend/src/components/common/rich-text-editor/controls/BlockTypeControl.tsx
+++ b/frontend/src/components/common/rich-text-editor/controls/BlockTypeControl.tsx
@@ -1,5 +1,5 @@
-import React, { useContext } from 'react'
 import cx from 'classnames'
+import { useContext } from 'react'
 
 import { EditorContext } from '../RichTextEditor'
 
diff --git a/frontend/src/components/common/rich-text-editor/controls/FontColorControl.tsx b/frontend/src/components/common/rich-text-editor/controls/FontColorControl.tsx
index 8bf898377..8427801d5 100644
--- a/frontend/src/components/common/rich-text-editor/controls/FontColorControl.tsx
+++ b/frontend/src/components/common/rich-text-editor/controls/FontColorControl.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import cx from 'classnames'
 
 import styles from '../RichTextEditor.module.scss'
diff --git a/frontend/src/components/common/rich-text-editor/controls/ImageControl.tsx b/frontend/src/components/common/rich-text-editor/controls/ImageControl.tsx
index 7fd350e5a..10380b28a 100644
--- a/frontend/src/components/common/rich-text-editor/controls/ImageControl.tsx
+++ b/frontend/src/components/common/rich-text-editor/controls/ImageControl.tsx
@@ -1,8 +1,10 @@
 import cx from 'classnames'
-import React, { useContext, useState } from 'react'
 import { AtomicBlockUtils } from 'draft-js'
-import { EditorContext } from '../RichTextEditor'
+import { useContext, useState } from 'react'
+
+import type { FormEvent, MouseEvent as ReactMouseEvent } from 'react'
 
+import { EditorContext } from '../RichTextEditor'
 import styles from '../RichTextEditor.module.scss'
 
 const VARIABLE_REGEX = new RegExp(/^{{\s*?\w+\s*?}}$/)
@@ -24,11 +26,11 @@ const ImageForm = ({
   const [imgSrc, setImgSrc] = useState('')
   const [link, setLink] = useState('')
 
-  function stopPropagation(e: React.MouseEvent<HTMLElement>) {
+  function stopPropagation(e: ReactMouseEvent<HTMLElement>) {
     e.stopPropagation()
   }
 
-  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+  function handleSubmit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault()
     onChange(imgSrc, 'auto', '100%', link)
   }
diff --git a/frontend/src/components/common/rich-text-editor/controls/InlineControl.tsx b/frontend/src/components/common/rich-text-editor/controls/InlineControl.tsx
index 8890c1dd9..d4521808a 100644
--- a/frontend/src/components/common/rich-text-editor/controls/InlineControl.tsx
+++ b/frontend/src/components/common/rich-text-editor/controls/InlineControl.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import cx from 'classnames'
 
 interface InlineControlProps {
diff --git a/frontend/src/components/common/rich-text-editor/controls/LinkControl.tsx b/frontend/src/components/common/rich-text-editor/controls/LinkControl.tsx
index a12616bde..1b4f660a0 100644
--- a/frontend/src/components/common/rich-text-editor/controls/LinkControl.tsx
+++ b/frontend/src/components/common/rich-text-editor/controls/LinkControl.tsx
@@ -1,4 +1,7 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
+
+import type { FormEvent, MouseEvent as ReactMouseEvent } from 'react'
+
 import styles from '../RichTextEditor.module.scss'
 
 interface LinkControlProps {
@@ -21,11 +24,11 @@ const LinkForm = ({
   const [title, setTitle] = useState(link?.title || selectionText)
   const [url, setURL] = useState(link?.target || '')
 
-  function stopPropagation(e: React.MouseEvent<HTMLElement>) {
+  function stopPropagation(e: ReactMouseEvent<HTMLElement>) {
     e.stopPropagation()
   }
 
-  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+  function handleSubmit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault()
     onSubmit({ title, url })
   }
diff --git a/frontend/src/components/common/rich-text-editor/controls/ListControl.tsx b/frontend/src/components/common/rich-text-editor/controls/ListControl.tsx
index 49bb6f9da..9beaf2786 100644
--- a/frontend/src/components/common/rich-text-editor/controls/ListControl.tsx
+++ b/frontend/src/components/common/rich-text-editor/controls/ListControl.tsx
@@ -1,5 +1,5 @@
-import React, { useContext } from 'react'
 import cx from 'classnames'
+import { useContext } from 'react'
 
 import { EditorContext } from '../RichTextEditor'
 
diff --git a/frontend/src/components/common/rich-text-editor/controls/TableControl.tsx b/frontend/src/components/common/rich-text-editor/controls/TableControl.tsx
index 0102033aa..34a797d02 100644
--- a/frontend/src/components/common/rich-text-editor/controls/TableControl.tsx
+++ b/frontend/src/components/common/rich-text-editor/controls/TableControl.tsx
@@ -1,5 +1,3 @@
-import React, { useState, useEffect } from 'react'
-import { Map } from 'immutable'
 import cx from 'classnames'
 import {
   Modifier,
@@ -8,6 +6,11 @@ import {
   ContentBlock,
   genKey,
 } from 'draft-js'
+import { Map } from 'immutable'
+import { useState, useEffect } from 'react'
+
+import type { MouseEvent as ReactMouseEvent } from 'react'
+
 import styles from '../RichTextEditor.module.scss'
 
 const MIN_GRID_SIZE = 5
@@ -86,7 +89,7 @@ export const TableControl = ({
     setShowPopover(false)
   }
 
-  function handleClick(e: React.MouseEvent<HTMLElement>) {
+  function handleClick(e: ReactMouseEvent<HTMLElement>) {
     e.stopPropagation()
     if (!isDisabled()) setShowPopover(() => !showPopover)
   }
diff --git a/frontend/src/components/common/rich-text-editor/controls/TextAlignControl.tsx b/frontend/src/components/common/rich-text-editor/controls/TextAlignControl.tsx
index ac904d468..a9a7f6dd1 100644
--- a/frontend/src/components/common/rich-text-editor/controls/TextAlignControl.tsx
+++ b/frontend/src/components/common/rich-text-editor/controls/TextAlignControl.tsx
@@ -1,5 +1,5 @@
-import React, { useContext } from 'react'
 import cx from 'classnames'
+import { useContext } from 'react'
 
 import { EditorContext } from '../RichTextEditor'
 
diff --git a/frontend/src/components/common/rich-text-editor/decorators/LinkDecorator.tsx b/frontend/src/components/common/rich-text-editor/decorators/LinkDecorator.tsx
index 5d22ec952..960c7d7cf 100644
--- a/frontend/src/components/common/rich-text-editor/decorators/LinkDecorator.tsx
+++ b/frontend/src/components/common/rich-text-editor/decorators/LinkDecorator.tsx
@@ -1,5 +1,3 @@
-import React, { useContext, useRef, useState } from 'react'
-import ReactDOM from 'react-dom'
 import {
   ContentBlock,
   ContentState,
@@ -7,6 +5,9 @@ import {
   SelectionState,
   RichUtils,
 } from 'draft-js'
+import { useContext, useRef, useState } from 'react'
+import type { ReactChildren, MouseEvent as ReactMouseEvent } from 'react'
+import ReactDOM from 'react-dom'
 
 import { EditorContext } from '../RichTextEditor'
 
@@ -30,7 +31,7 @@ const linkStrategy = (
 
 const LinkSpan = (props: {
   blockKey: string
-  children: React.ReactChildren
+  children: ReactChildren
   entityKey: string
   contentState: ContentState
   start: number
@@ -53,7 +54,7 @@ const LinkSpan = (props: {
     hidePopover()
   }
 
-  function removeLink(e: React.MouseEvent<HTMLElement>) {
+  function removeLink(e: ReactMouseEvent<HTMLElement>) {
     e.preventDefault()
     e.stopPropagation()
 
@@ -72,7 +73,7 @@ const LinkSpan = (props: {
     setPopoverStyle({})
   }
 
-  function handleClick(event: React.MouseEvent<HTMLSpanElement, MouseEvent>) {
+  function handleClick(event: ReactMouseEvent<HTMLSpanElement, MouseEvent>) {
     if (!showPopover) {
       const linkElement: HTMLElement = event.currentTarget
       const dimensions = linkElement.getBoundingClientRect()
@@ -127,7 +128,7 @@ const PreviewLinkSpan = ({
   contentState,
   entityKey,
 }: {
-  children: React.ReactChildren
+  children: ReactChildren
   contentState: ContentState
   entityKey: string
 }) => {
diff --git a/frontend/src/components/common/rich-text-editor/decorators/VariableDecorator.tsx b/frontend/src/components/common/rich-text-editor/decorators/VariableDecorator.tsx
index 466fd0a15..755ad2a8c 100644
--- a/frontend/src/components/common/rich-text-editor/decorators/VariableDecorator.tsx
+++ b/frontend/src/components/common/rich-text-editor/decorators/VariableDecorator.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
 import { ContentBlock, ContentState, DraftDecorator } from 'draft-js'
 
+import type { Props } from 'react'
+
 const HIGHLIGHT_REGEX = /{{\s*?\w+\s*?}}/g
 
 const variableStrategy = (
@@ -16,7 +17,7 @@ const variableStrategy = (
   }
 }
 
-const VariableSpan = (props: React.Props<any>) => {
+const VariableSpan = (props: Props<any>) => {
   return <mark>{props.children}</mark>
 }
 
diff --git a/frontend/src/components/common/sample-csv/SampleCsv.tsx b/frontend/src/components/common/sample-csv/SampleCsv.tsx
index 28fef95b8..83a5b92b8 100644
--- a/frontend/src/components/common/sample-csv/SampleCsv.tsx
+++ b/frontend/src/components/common/sample-csv/SampleCsv.tsx
@@ -1,15 +1,15 @@
-import React from 'react'
-import { without, times, constant } from 'lodash'
 import download from 'downloadjs'
+import { without, times, constant } from 'lodash'
+
+import TextButton from '../text-button'
+
+import styles from './SampleCsv.module.scss'
 
+import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
 import {
   PROTECTED_CSV_HEADERS,
   extractParams,
 } from 'services/validate-csv.service'
-import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
-import TextButton from '../text-button'
-
-import styles from './SampleCsv.module.scss'
 
 const SampleCsv = ({
   defaultRecipient,
diff --git a/frontend/src/components/common/send-rate/SendRate.tsx b/frontend/src/components/common/send-rate/SendRate.tsx
index a2aa59853..63d3f0eb4 100644
--- a/frontend/src/components/common/send-rate/SendRate.tsx
+++ b/frontend/src/components/common/send-rate/SendRate.tsx
@@ -1,11 +1,15 @@
-import React, { Dispatch, SetStateAction, useState } from 'react'
-import { OutboundLink } from 'react-ga'
+import { i18n } from '@lingui/core'
+
 import cx from 'classnames'
-import { LINKS } from 'config'
-import { TextInput } from 'components/common'
+
+import { Dispatch, SetStateAction, useState } from 'react'
+import { OutboundLink } from 'react-ga'
+
 import styles from './SendRate.module.scss'
+
 import { ChannelType } from 'classes'
-import { i18n } from '@lingui/core'
+import { TextInput } from 'components/common'
+import { LINKS } from 'config'
 
 const SendRate = ({
   sendRate,
diff --git a/frontend/src/components/common/side-nav/SideNav.tsx b/frontend/src/components/common/side-nav/SideNav.tsx
index 359e66116..e87ffc379 100644
--- a/frontend/src/components/common/side-nav/SideNav.tsx
+++ b/frontend/src/components/common/side-nav/SideNav.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
-import { useHistory, NavLink } from 'react-router-dom'
 import cx from 'classnames'
+
+import { useHistory, NavLink } from 'react-router-dom'
+
 import styles from './SideNav.module.scss'
 
 import { Dropdown } from 'components/common'
diff --git a/frontend/src/components/common/step-header/StepHeader.tsx b/frontend/src/components/common/step-header/StepHeader.tsx
index 632f2fa71..46063a998 100644
--- a/frontend/src/components/common/step-header/StepHeader.tsx
+++ b/frontend/src/components/common/step-header/StepHeader.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { ReactNode } from 'react'
 
 import styles from './StepHeader.module.scss'
 
@@ -9,7 +9,7 @@ const StepHeader = ({
 }: {
   title: string
   subtitle?: string
-  children?: React.ReactNode
+  children?: ReactNode
 }) => {
   return (
     <div className={styles.stepHeader}>
diff --git a/frontend/src/components/common/step-section/StepSection.tsx b/frontend/src/components/common/step-section/StepSection.tsx
index a2295a858..0304a0bd0 100644
--- a/frontend/src/components/common/step-section/StepSection.tsx
+++ b/frontend/src/components/common/step-section/StepSection.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { ReactNode } from 'react'
 
 import styles from './StepSection.module.scss'
 
@@ -6,7 +6,7 @@ const StepSection = ({
   children,
   separator = true,
 }: {
-  children: React.ReactNode
+  children: ReactNode
   separator?: boolean
 }) => {
   return (
diff --git a/frontend/src/components/common/text-area/TextArea.tsx b/frontend/src/components/common/text-area/TextArea.tsx
index 65ec1631f..372be3fd2 100644
--- a/frontend/src/components/common/text-area/TextArea.tsx
+++ b/frontend/src/components/common/text-area/TextArea.tsx
@@ -1,7 +1,7 @@
-import React, { useRef, useEffect } from 'react'
 import cx from 'classnames'
-import TextareaAutosize from 'react-textarea-autosize'
 import escapeHTML from 'escape-html'
+import { useRef, useEffect } from 'react'
+import TextareaAutosize from 'react-textarea-autosize'
 
 import styles from './TextArea.module.scss'
 
diff --git a/frontend/src/components/common/text-button/TextButton.tsx b/frontend/src/components/common/text-button/TextButton.tsx
index 9cee3479a..33ab943ff 100644
--- a/frontend/src/components/common/text-button/TextButton.tsx
+++ b/frontend/src/components/common/text-button/TextButton.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
 import cx from 'classnames'
 
+import type { ButtonHTMLAttributes } from 'react'
+
 import styles from './TextButton.module.scss'
 
-interface TextButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface TextButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   // if true, remove text-decoration
   noUnderline?: boolean
   // if true, follow min-width of primary button
diff --git a/frontend/src/components/common/text-input-with-button/TextInputWithButton.tsx b/frontend/src/components/common/text-input-with-button/TextInputWithButton.tsx
index 9a6c35a7e..0ca908e07 100644
--- a/frontend/src/components/common/text-input-with-button/TextInputWithButton.tsx
+++ b/frontend/src/components/common/text-input-with-button/TextInputWithButton.tsx
@@ -1,23 +1,32 @@
-import React, { useState, MutableRefObject } from 'react'
 import cx from 'classnames'
 
-import useIsMounted from 'components/custom-hooks/use-is-mounted'
-import { PrimaryButton, TextInput } from 'components/common'
+import { useState, MutableRefObject } from 'react'
+
+import type {
+  InputHTMLAttributes,
+  ReactNode,
+  FunctionComponent,
+  FormEvent,
+} from 'react'
+
 import styles from './TextInputWithButton.module.scss'
 
+import { PrimaryButton, TextInput } from 'components/common'
+import useIsMounted from 'components/custom-hooks/use-is-mounted'
+
 interface TextInputWithButtonProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   onChange: (value: string) => void
   onClick: () => void | Promise<void>
   buttonDisabled?: boolean
   inputDisabled?: boolean
   textRef?: MutableRefObject<HTMLInputElement | undefined>
-  buttonLabel?: React.ReactNode
-  loadingButtonLabel?: React.ReactNode
+  buttonLabel?: ReactNode
+  loadingButtonLabel?: ReactNode
   errorMessage?: string | null
 }
 
-const TextInputWithButton: React.FunctionComponent<TextInputWithButtonProps> = ({
+const TextInputWithButton: FunctionComponent<TextInputWithButtonProps> = ({
   id,
   value,
   onChange,
@@ -35,7 +44,7 @@ const TextInputWithButton: React.FunctionComponent<TextInputWithButtonProps> = (
   const [asyncLoading, setAsyncLoading] = useState(false)
   const isMounted = useIsMounted()
 
-  const asyncSubmit = async (e: React.FormEvent) => {
+  const asyncSubmit = async (e: FormEvent) => {
     e.preventDefault()
 
     setAsyncLoading(true)
diff --git a/frontend/src/components/common/text-input/TextInput.tsx b/frontend/src/components/common/text-input/TextInput.tsx
index 8fe8bb916..a69b48b7e 100644
--- a/frontend/src/components/common/text-input/TextInput.tsx
+++ b/frontend/src/components/common/text-input/TextInput.tsx
@@ -1,17 +1,18 @@
-import React from 'react'
 import cx from 'classnames'
+import { forwardRef } from 'react'
+
+import type { ReactNode, ChangeEvent } from 'react'
+
 import styles from './TextInput.module.scss'
 
-const TextInput = React.forwardRef((props: any, ref: React.ReactNode) => {
+const TextInput = forwardRef((props: any, ref: ReactNode) => {
   const { onChange, className, ...otherProps } = props
 
   return (
     <input
       ref={ref}
       className={cx(styles.textInput, className)}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-        onChange(e.target.value)
-      }
+      onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
       {...otherProps}
     />
   )
diff --git a/frontend/src/components/common/title-bar/TitleBar.tsx b/frontend/src/components/common/title-bar/TitleBar.tsx
index bed9eab08..2c6268391 100644
--- a/frontend/src/components/common/title-bar/TitleBar.tsx
+++ b/frontend/src/components/common/title-bar/TitleBar.tsx
@@ -1,11 +1,12 @@
-import React from 'react'
+import type { ReactNode } from 'react'
+
 import styles from './TitleBar.module.scss'
 
 const TitleBar = ({
   children,
   title,
 }: {
-  children: React.ReactNode
+  children: ReactNode
   title: string
 }) => {
   return (
diff --git a/frontend/src/components/common/warning-block/WarningBlock.tsx b/frontend/src/components/common/warning-block/WarningBlock.tsx
index eb315f39e..cf1950dc7 100644
--- a/frontend/src/components/common/warning-block/WarningBlock.tsx
+++ b/frontend/src/components/common/warning-block/WarningBlock.tsx
@@ -1,8 +1,11 @@
-import React from 'react'
 import cx from 'classnames'
-import styles from './WarningBlock.module.scss'
+
+import type { ReactNode } from 'react'
+
 import MessageBlock from '../message-block'
 
+import styles from './WarningBlock.module.scss'
+
 const WarningBlock = ({
   className,
   children,
@@ -12,7 +15,7 @@ const WarningBlock = ({
   ...otherProps
 }: {
   className?: string
-  children?: React.ReactNode
+  children?: ReactNode
   absolute?: boolean
   onClose?: () => void
   title?: string
diff --git a/frontend/src/components/custom-hooks/use-poll-campaign-stats.ts b/frontend/src/components/custom-hooks/use-poll-campaign-stats.ts
index 1cedb2f5f..f1db98c58 100644
--- a/frontend/src/components/custom-hooks/use-poll-campaign-stats.ts
+++ b/frontend/src/components/custom-hooks/use-poll-campaign-stats.ts
@@ -1,7 +1,8 @@
-import { CampaignStats, Status } from 'classes'
 import { useState, useEffect, useCallback, useContext } from 'react'
-import { getCampaignStats, getCampaignDetails } from 'services/campaign.service'
+
+import { CampaignStats, Status } from 'classes'
 import { CampaignContext } from 'contexts/campaign.context'
+import { getCampaignStats, getCampaignDetails } from 'services/campaign.service'
 
 function usePollCampaignStats() {
   const { campaign, setCampaign } = useContext(CampaignContext)
diff --git a/frontend/src/components/dashboard/Dashboard.tsx b/frontend/src/components/dashboard/Dashboard.tsx
index ebc2d1f0b..f12b9d3b9 100644
--- a/frontend/src/components/dashboard/Dashboard.tsx
+++ b/frontend/src/components/dashboard/Dashboard.tsx
@@ -1,15 +1,17 @@
-import React from 'react'
 import { Switch, Route } from 'react-router-dom'
 
-import ModalContextProvider from 'contexts/modal.context'
-import CampaignContextProvider from 'contexts/campaign.context'
-import FinishLaterContextProvider from 'contexts/finish-later.modal.context'
-import Error from 'components/error'
-import { InfoBanner, NavBar } from 'components/common'
 import Campaigns from './campaigns'
+
 import Create from './create'
+
 import Settings from './settings'
+
+import { InfoBanner, NavBar } from 'components/common'
+import Error from 'components/error'
 import { INFO_BANNER } from 'config'
+import CampaignContextProvider from 'contexts/campaign.context'
+import FinishLaterContextProvider from 'contexts/finish-later.modal.context'
+import ModalContextProvider from 'contexts/modal.context'
 
 const Dashboard = () => {
   return (
diff --git a/frontend/src/components/dashboard/campaigns/Campaigns.tsx b/frontend/src/components/dashboard/campaigns/Campaigns.tsx
index 5f9c16dcd..55af630f9 100644
--- a/frontend/src/components/dashboard/campaigns/Campaigns.tsx
+++ b/frontend/src/components/dashboard/campaigns/Campaigns.tsx
@@ -1,33 +1,41 @@
-import React, { useEffect, useState, useContext, useCallback } from 'react'
-import { useHistory } from 'react-router-dom'
+import { Trans } from '@lingui/macro'
+
 import cx from 'classnames'
-import Moment from 'react-moment'
+
 import { capitalize } from 'lodash'
-import { Trans } from '@lingui/macro'
 
-import { ModalContext } from 'contexts/modal.context'
-import { AuthContext } from 'contexts/auth.context'
+import { useEffect, useState, useContext, useCallback } from 'react'
+
+import type { MouseEvent as ReactMouseEvent } from 'react'
+import Moment from 'react-moment'
+import { useHistory } from 'react-router-dom'
+
+import DuplicateCampaignModal from '../create/duplicate-campaign-modal'
+
+import styles from './Campaigns.module.scss'
+
+import AnnouncementModal from './announcement-modal'
+
+import EmptyDashboardImg from 'assets/img/empty-dashboard.svg'
+import { Campaign, channelIcons, ChannelType, Status } from 'classes'
 import {
   Pagination,
   TitleBar,
   PrimaryButton,
   ExportRecipients,
 } from 'components/common'
-import { getCampaigns } from 'services/campaign.service'
-import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
-import { Campaign, channelIcons, ChannelType, Status } from 'classes'
+import useIsMounted from 'components/custom-hooks/use-is-mounted'
 import CreateCampaign from 'components/dashboard/create/create-modal'
+import CreateDemoModal from 'components/dashboard/demo/create-demo-modal'
+import DemoBar from 'components/dashboard/demo/demo-bar/DemoBar'
+import { ANNOUNCEMENT, getAnnouncementVersion } from 'config'
+import { AuthContext } from 'contexts/auth.context'
+import { ModalContext } from 'contexts/modal.context'
 
-import EmptyDashboardImg from 'assets/img/empty-dashboard.svg'
-import styles from './Campaigns.module.scss'
+import { getCampaigns } from 'services/campaign.service'
+import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
 
-import DemoBar from 'components/dashboard/demo/demo-bar/DemoBar'
-import CreateDemoModal from 'components/dashboard/demo/create-demo-modal'
 import { getUserSettings } from 'services/settings.service'
-import DuplicateCampaignModal from '../create/duplicate-campaign-modal'
-import AnnouncementModal from './announcement-modal'
-import { ANNOUNCEMENT, getAnnouncementVersion } from 'config'
-import useIsMounted from 'components/custom-hooks/use-is-mounted'
 
 const ITEMS_PER_PAGE = 10
 
@@ -204,7 +212,7 @@ const Campaigns = () => {
         return (
           <div
             className={cx(styles.iconContainer, styles.duplicate)}
-            onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+            onClick={(event: ReactMouseEvent<HTMLDivElement, MouseEvent>) => {
               event.stopPropagation()
               sendUserEvent(GA_USER_EVENTS.OPEN_DUPLICATE_MODAL, campaign.type)
               const modal = campaign.demoMessageLimit ? (
diff --git a/frontend/src/components/dashboard/campaigns/announcement-modal/AnnouncementModal.tsx b/frontend/src/components/dashboard/campaigns/announcement-modal/AnnouncementModal.tsx
index 284295fde..0ea3d1fbd 100644
--- a/frontend/src/components/dashboard/campaigns/announcement-modal/AnnouncementModal.tsx
+++ b/frontend/src/components/dashboard/campaigns/announcement-modal/AnnouncementModal.tsx
@@ -1,14 +1,17 @@
-import React, { useContext, useState, useEffect } from 'react'
-import { updateAnnouncementVersion } from 'services/settings.service'
+import { i18n } from '@lingui/core'
 
-import { ModalContext } from 'contexts/modal.context'
+import { useContext, useState, useEffect } from 'react'
+
+import styles from './AnnouncementModal.module.scss'
 
-import { i18n } from '@lingui/core'
-import { ANNOUNCEMENT, getAnnouncementVersion } from 'config'
-import { ErrorBlock } from 'components/common'
 import GraphicAnnouncementModal from './GraphicAnnouncementModal'
+
 import VideoAnnouncementModal from './VideoAnnouncementModal'
-import styles from './AnnouncementModal.module.scss'
+
+import { ErrorBlock } from 'components/common'
+import { ANNOUNCEMENT, getAnnouncementVersion } from 'config'
+import { ModalContext } from 'contexts/modal.context'
+import { updateAnnouncementVersion } from 'services/settings.service'
 
 export type AnnouncementModalProps = {
   title: string
diff --git a/frontend/src/components/dashboard/campaigns/announcement-modal/AnnouncementModalOptions.tsx b/frontend/src/components/dashboard/campaigns/announcement-modal/AnnouncementModalOptions.tsx
index 6f84b9708..624c6c75d 100644
--- a/frontend/src/components/dashboard/campaigns/announcement-modal/AnnouncementModalOptions.tsx
+++ b/frontend/src/components/dashboard/campaigns/announcement-modal/AnnouncementModalOptions.tsx
@@ -1,10 +1,11 @@
-import React from 'react'
-import { TextButton, PrimaryButton } from 'components/common'
-import { OutboundLink } from 'react-ga'
 import cx from 'classnames'
 
+import { OutboundLink } from 'react-ga'
+
 import styles from './AnnouncementModalOptions.module.scss'
 
+import { TextButton, PrimaryButton } from 'components/common'
+
 interface AnnouncementModalOptionsProps {
   primaryButtonUrl: string
   primaryButtonText: string
diff --git a/frontend/src/components/dashboard/campaigns/announcement-modal/GraphicAnnouncementModal.tsx b/frontend/src/components/dashboard/campaigns/announcement-modal/GraphicAnnouncementModal.tsx
index 919a9163e..90e5142d1 100644
--- a/frontend/src/components/dashboard/campaigns/announcement-modal/GraphicAnnouncementModal.tsx
+++ b/frontend/src/components/dashboard/campaigns/announcement-modal/GraphicAnnouncementModal.tsx
@@ -1,8 +1,6 @@
-import React from 'react'
-
-import styles from './GraphicAnnouncementModal.module.scss'
-import AnnouncementModalOptions from './AnnouncementModalOptions'
 import { AnnouncementModalProps } from './AnnouncementModal'
+import AnnouncementModalOptions from './AnnouncementModalOptions'
+import styles from './GraphicAnnouncementModal.module.scss'
 
 const GraphicAnnouncementModal = ({
   title,
diff --git a/frontend/src/components/dashboard/campaigns/announcement-modal/VideoAnnouncementModal.tsx b/frontend/src/components/dashboard/campaigns/announcement-modal/VideoAnnouncementModal.tsx
index 880cd53f8..02ecf0e46 100644
--- a/frontend/src/components/dashboard/campaigns/announcement-modal/VideoAnnouncementModal.tsx
+++ b/frontend/src/components/dashboard/campaigns/announcement-modal/VideoAnnouncementModal.tsx
@@ -1,9 +1,8 @@
-import React from 'react'
 import ReactPlayer from 'react-player/lazy'
 
-import styles from './VideoAnnouncementModal.module.scss'
 import { AnnouncementModalProps } from './AnnouncementModal'
 import AnnouncementModalOptions from './AnnouncementModalOptions'
+import styles from './VideoAnnouncementModal.module.scss'
 
 const VideoAnnouncementModal = ({
   title,
diff --git a/frontend/src/components/dashboard/create/Create.module.scss b/frontend/src/components/dashboard/create/Create.module.scss
index 39e218602..9d70685ec 100644
--- a/frontend/src/components/dashboard/create/Create.module.scss
+++ b/frontend/src/components/dashboard/create/Create.module.scss
@@ -142,12 +142,6 @@
   }
 }
 
-.characterCount {
-  @extend %body-2;
-  text-align: right;
-  color: $light-grey;
-}
-
 .protectedPreview {
   border-radius: 1.25rem;
 }
diff --git a/frontend/src/components/dashboard/create/Create.tsx b/frontend/src/components/dashboard/create/Create.tsx
index 89719bb9d..add5bf977 100644
--- a/frontend/src/components/dashboard/create/Create.tsx
+++ b/frontend/src/components/dashboard/create/Create.tsx
@@ -1,19 +1,26 @@
-import React, { useEffect, useState, useContext } from 'react'
-import { useParams, useHistory } from 'react-router-dom'
 import cx from 'classnames'
 
-import { CampaignContext } from 'contexts/campaign.context'
-import { FinishLaterModalContext } from 'contexts/finish-later.modal.context'
+import { useEffect, useState, useContext } from 'react'
+
+import { useParams, useHistory } from 'react-router-dom'
+
+import styles from './Create.module.scss'
+
+import EmailCreate from './email/EmailCreate'
+
+import SMSCreate from './sms/SMSCreate'
+
+import TelegramCreate from './telegram/TelegramCreate'
+
 import { ChannelType, Status } from 'classes'
 import { TitleBar, PrimaryButton } from 'components/common'
 import DemoInfoBanner from 'components/dashboard/demo/demo-info-banner/DemoInfoBanner'
 import Error from 'components/error'
+import { CampaignContext } from 'contexts/campaign.context'
+import { FinishLaterModalContext } from 'contexts/finish-later.modal.context'
+
 import { getCampaignDetails } from 'services/campaign.service'
 import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
-import SMSCreate from './sms/SMSCreate'
-import EmailCreate from './email/EmailCreate'
-import TelegramCreate from './telegram/TelegramCreate'
-import styles from './Create.module.scss'
 
 const Create = () => {
   const { id } = useParams<{ id: string }>()
diff --git a/frontend/src/components/dashboard/create/common/BodyTemplate/BodyTemplate.module.scss b/frontend/src/components/dashboard/create/common/BodyTemplate/BodyTemplate.module.scss
new file mode 100644
index 000000000..22acc8332
--- /dev/null
+++ b/frontend/src/components/dashboard/create/common/BodyTemplate/BodyTemplate.module.scss
@@ -0,0 +1,8 @@
+@import 'styles/_variables';
+@import 'styles/_mixins';
+
+.characterCount {
+  @extend %body-2;
+  text-align: right;
+  color: $light-grey;
+}
diff --git a/frontend/src/components/dashboard/create/sms/SMSTemplate.tsx b/frontend/src/components/dashboard/create/common/BodyTemplate/BodyTemplate.tsx
similarity index 62%
rename from frontend/src/components/dashboard/create/sms/SMSTemplate.tsx
rename to frontend/src/components/dashboard/create/common/BodyTemplate/BodyTemplate.tsx
index ac9f06e0f..9996d2b23 100644
--- a/frontend/src/components/dashboard/create/sms/SMSTemplate.tsx
+++ b/frontend/src/components/dashboard/create/common/BodyTemplate/BodyTemplate.tsx
@@ -1,8 +1,12 @@
-import React, { useState, useCallback, useEffect, useContext } from 'react'
+import { useState, useCallback, useEffect, useContext } from 'react'
+
+import type { Dispatch, SetStateAction } from 'react'
+
 import { useParams } from 'react-router-dom'
 
-import { FinishLaterModalContext } from 'contexts/finish-later.modal.context'
-import { CampaignContext } from 'contexts/campaign.context'
+import styles from './BodyTemplate.module.scss'
+
+import { SMSProgress, TelegramProgress } from 'classes'
 import {
   TextArea,
   NextButton,
@@ -11,40 +15,56 @@ import {
   StepSection,
 } from 'components/common'
 import SaveDraftModal from 'components/dashboard/create/save-draft-modal'
-import { exceedsCharacterThreshold, saveTemplate } from 'services/sms.service'
-
-import type { Dispatch, SetStateAction } from 'react'
-import type { SMSProgress } from 'classes'
-
-import styles from '../Create.module.scss'
+import { CampaignContext } from 'contexts/campaign.context'
+import { FinishLaterModalContext } from 'contexts/finish-later.modal.context'
 
-const SMSTemplate = ({
+function BodyTemplate({
   setActiveStep,
+  warnCharacterCount,
+  errorCharacterCount,
+  saveTemplate,
 }: {
-  setActiveStep: Dispatch<SetStateAction<SMSProgress>>
-}) => {
+  setActiveStep:
+    | Dispatch<SetStateAction<SMSProgress>>
+    | Dispatch<SetStateAction<TelegramProgress>>
+  warnCharacterCount: number
+  errorCharacterCount: number
+  saveTemplate: (
+    campaignId: number,
+    body: string
+  ) => Promise<{
+    numRecipients: number
+    updatedTemplate?: { body: string; params: string[] }
+  }>
+}) {
   const { campaign, updateCampaign } = useContext(CampaignContext)
   const { setFinishLaterContent } = useContext(FinishLaterModalContext)
   const [body, setBody] = useState(replaceNewLines(campaign.body))
-  const [errorMsg, setErrorMsg] = useState(null)
+  const [errorMsg, setErrorMsg] = useState<React.ReactNode>(null)
   const { id: campaignId } = useParams<{ id: string }>()
 
   useEffect(() => {
-    if (exceedsCharacterThreshold(body)) {
-      setErrorMsg(
-        (
-          <span>
-            Your template has more than 1000 characters. Messages which are
-            longer than <b>1600</b> characters (including keywords) can&apos;t
-            be sent. Consider making your message short and sweet to make it
-            easier to read on a mobile device.
-          </span>
-        ) as any
+    let errorMsg = null
+    if (body.length > errorCharacterCount) {
+      errorMsg = (
+        <span>
+          Your template has more than <b>{errorCharacterCount}</b> characters
+          and can&apos;t be sent. Consider making your message short and sweet
+          to make it easier to read on a mobile device.
+        </span>
+      )
+    } else if (body.length > warnCharacterCount) {
+      errorMsg = (
+        <span>
+          Your template has more than {warnCharacterCount} characters. Messages
+          which are longer than <b>{errorCharacterCount}</b> characters
+          (including keywords) can&apos;t be sent. Consider making your message
+          short and sweet to make it easier to read on a mobile device.
+        </span>
       )
-    } else {
-      setErrorMsg(null)
     }
-  }, [body])
+    setErrorMsg(errorMsg)
+  }, [body.length, errorCharacterCount, warnCharacterCount])
 
   const handleSaveTemplate = useCallback(async (): Promise<void> => {
     setErrorMsg(null)
@@ -62,12 +82,12 @@ const SMSTemplate = ({
           params: updatedTemplate.params,
           numRecipients,
         })
-        setActiveStep((s) => s + 1)
+        setActiveStep((s: SMSProgress | TelegramProgress) => s + 1)
       }
     } catch (err) {
       setErrorMsg(err.message)
     }
-  }, [body, campaignId, setActiveStep, updateCampaign])
+  }, [body, campaignId, setActiveStep, updateCampaign, saveTemplate])
 
   // Set callback for finish later button
   useEffect(() => {
@@ -89,7 +109,7 @@ const SMSTemplate = ({
     return () => {
       setFinishLaterContent(null)
     }
-  }, [body, campaignId, setFinishLaterContent])
+  }, [body, campaignId, setFinishLaterContent, saveTemplate])
 
   function replaceNewLines(body: string): string {
     return (body || '').replace(/<br\s*\/?>/g, '\n')
@@ -129,10 +149,13 @@ const SMSTemplate = ({
         <p className={styles.characterCount}>{body.length} characters</p>
       </StepSection>
 
-      <NextButton disabled={!body} onClick={handleSaveTemplate} />
+      <NextButton
+        disabled={!body || body.length > errorCharacterCount}
+        onClick={handleSaveTemplate}
+      />
       <ErrorBlock>{errorMsg}</ErrorBlock>
     </>
   )
 }
 
-export default SMSTemplate
+export default BodyTemplate
diff --git a/frontend/src/components/dashboard/create/common/BodyTemplate/index.tsx b/frontend/src/components/dashboard/create/common/BodyTemplate/index.tsx
new file mode 100644
index 000000000..d706aa933
--- /dev/null
+++ b/frontend/src/components/dashboard/create/common/BodyTemplate/index.tsx
@@ -0,0 +1 @@
+export { default } from './BodyTemplate'
diff --git a/frontend/src/components/dashboard/create/common/index.ts b/frontend/src/components/dashboard/create/common/index.ts
new file mode 100644
index 000000000..0c0b2f525
--- /dev/null
+++ b/frontend/src/components/dashboard/create/common/index.ts
@@ -0,0 +1 @@
+export { default as BodyTemplate } from './BodyTemplate'
diff --git a/frontend/src/components/dashboard/create/sms/tests/SMSTemplate.test.tsx b/frontend/src/components/dashboard/create/common/tests/BodyTemplate.test.tsx
similarity index 66%
rename from frontend/src/components/dashboard/create/sms/tests/SMSTemplate.test.tsx
rename to frontend/src/components/dashboard/create/common/tests/BodyTemplate.test.tsx
index f20c028bb..38613ecaa 100644
--- a/frontend/src/components/dashboard/create/sms/tests/SMSTemplate.test.tsx
+++ b/frontend/src/components/dashboard/create/common/tests/BodyTemplate.test.tsx
@@ -1,11 +1,15 @@
-import React from 'react'
-import { screen, mockCommonApis, server, render, Campaign } from 'test-utils'
-import SMSTemplate from '../SMSTemplate'
-import CampaignContextProvider from 'contexts/campaign.context'
-import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
 import userEvent from '@testing-library/user-event'
+
 import { Route } from 'react-router-dom'
 
+import BodyTemplate from '../BodyTemplate'
+
+import CampaignContextProvider from 'contexts/campaign.context'
+import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
+import { saveTemplate as saveSmsTemplate } from 'services/sms.service'
+import { saveTemplate as saveTelegramTemplate } from 'services/telegram.service'
+import { screen, mockCommonApis, server, render, Campaign } from 'test-utils'
+
 const TEST_SMS_CAMPAIGN: Campaign = {
   id: 1,
   name: 'Test SMS campaign',
@@ -30,14 +34,21 @@ function mockApis() {
   return handlers
 }
 
-function renderTemplatePage() {
+function renderTemplatePage(
+  saveTemplate: typeof BodyTemplate.arguments.saveTemplate
+) {
   const setActiveStep = jest.fn()
 
   render(
     <Route path="/campaigns/:id">
       <CampaignContextProvider>
         <FinishLaterModalContextProvider>
-          <SMSTemplate setActiveStep={setActiveStep} />
+          <BodyTemplate
+            setActiveStep={setActiveStep}
+            saveTemplate={saveTemplate}
+            warnCharacterCount={5}
+            errorCharacterCount={10}
+          />
         </FinishLaterModalContextProvider>
       </CampaignContextProvider>
     </Route>,
@@ -50,7 +61,7 @@ function renderTemplatePage() {
 test('displays the necessary elements', async () => {
   // Setup
   server.use(...mockApis())
-  renderTemplatePage()
+  renderTemplatePage(jest.fn())
 
   // Wait for the component to fully load
   const heading = await screen.findByRole('heading', {
@@ -77,7 +88,7 @@ test('displays the necessary elements', async () => {
 test('next button is disabled when template is empty', async () => {
   // Setup
   server.use(...mockApis())
-  renderTemplatePage()
+  renderTemplatePage(jest.fn())
 
   // Wait for the component to fully load
   const templateTextbox = await screen.findByRole('textbox', {
@@ -102,7 +113,7 @@ test('next button is disabled when template is empty', async () => {
 test('next button is enabled when the template is filled', async () => {
   // Setup
   server.use(...mockApis())
-  renderTemplatePage()
+  renderTemplatePage(jest.fn())
 
   // Wait for the component to fully load
   const templateTextbox = await screen.findByRole('textbox', {
@@ -124,7 +135,7 @@ test('next button is enabled when the template is filled', async () => {
 test('character count text reflects the actual number of characters in the textbox', async () => {
   // Setup
   server.use(...mockApis())
-  renderTemplatePage()
+  renderTemplatePage(jest.fn())
 
   // Wait for the component to fully load
   const templateTextbox = await screen.findByRole('textbox', {
@@ -146,37 +157,56 @@ test('character count text reflects the actual number of characters in the textb
   }
 })
 
-test('displays an error if the template is invalid', async () => {
-  // Setup
-  jest.spyOn(console, 'error').mockImplementation(() => {
-    // Do nothing. Mock console.error to silence expected errors
-    // due to submitting invalid templates to the API
+describe('displays an error if the template is invalid', () => {
+  async function runTest() {
+    // Wait for the component to fully load
+    const templateTextbox = await screen.findByRole('textbox', {
+      name: /message/i,
+    })
+    const nextButton = screen.getByRole('button', { name: /next/i })
+
+    // Test against various invalid templates
+    const TEST_TEMPLATES = ['<hehe>', '<script>']
+    for (const template of TEST_TEMPLATES) {
+      // Type the template text into the textbox
+      userEvent.clear(templateTextbox)
+      userEvent.type(templateTextbox, template)
+
+      // Click the next button to submit the template
+      userEvent.click(nextButton)
+
+      // Assert that an error message is shown
+      expect(
+        await screen.findByText(/message template is invalid/i)
+      ).toBeInTheDocument()
+    }
+  }
+
+  beforeEach(() => {
+    // Setup
+    jest.spyOn(console, 'error').mockImplementation(() => {
+      // Do nothing. Mock console.error to silence expected errors
+      // due to submitting invalid templates to the API
+    })
+    server.use(...mockApis())
   })
-  server.use(...mockApis())
-  renderTemplatePage()
 
-  // Wait for the component to fully load
-  const templateTextbox = await screen.findByRole('textbox', {
-    name: /message/i,
+  afterEach(() => {
+    // Teardown
+    jest.restoreAllMocks()
   })
-  const nextButton = screen.getByRole('button', { name: /next/i })
 
-  // Test against various invalid templates
-  const TEST_TEMPLATES = ['<hehe>', '<script>']
-  for (const template of TEST_TEMPLATES) {
-    // Type the template text into the textbox
-    userEvent.clear(templateTextbox)
-    userEvent.type(templateTextbox, template)
+  test('sms', async () => {
+    // Setup
+    renderTemplatePage(saveSmsTemplate)
 
-    // Click the next button to submit the template
-    userEvent.click(nextButton)
+    await runTest()
+  })
 
-    // Assert that an error message is shown
-    expect(
-      await screen.findByText(/message template is invalid/i)
-    ).toBeInTheDocument()
-  }
+  test('email', async () => {
+    // Setup
+    renderTemplatePage(saveTelegramTemplate)
 
-  // Teardown
-  jest.restoreAllMocks()
+    await runTest()
+  })
 })
diff --git a/frontend/src/components/dashboard/create/create-modal/CreateModal.tsx b/frontend/src/components/dashboard/create/create-modal/CreateModal.tsx
index 36224e4d8..fd3e60095 100644
--- a/frontend/src/components/dashboard/create/create-modal/CreateModal.tsx
+++ b/frontend/src/components/dashboard/create/create-modal/CreateModal.tsx
@@ -1,9 +1,15 @@
-import React, { useState, useContext, useEffect } from 'react'
+import { i18n } from '@lingui/core'
+
+import cx from 'classnames'
+
+import { useState, useContext, useEffect } from 'react'
+
 import { OutboundLink } from 'react-ga'
+
 import { useHistory } from 'react-router-dom'
-import cx from 'classnames'
 
-import { LINKS } from 'config'
+import styles from './CreateModal.module.scss'
+
 import { ChannelType, channelIcons, Campaign } from 'classes/Campaign'
 import {
   TextInput,
@@ -11,13 +17,11 @@ import {
   Checkbox,
   ErrorBlock,
 } from 'components/common'
-import styles from './CreateModal.module.scss'
-import { createCampaign } from 'services/campaign.service'
-import { ModalContext } from 'contexts/modal.context'
-
 import AddCredentialModal from 'components/dashboard/settings/add-credential-modal'
+import { LINKS } from 'config'
+import { ModalContext } from 'contexts/modal.context'
 
-import { i18n } from '@lingui/core'
+import { createCampaign } from 'services/campaign.service'
 
 const CreateModal = ({
   name = '',
diff --git a/frontend/src/components/dashboard/create/duplicate-campaign-modal/DuplicateCampaignModal.tsx b/frontend/src/components/dashboard/create/duplicate-campaign-modal/DuplicateCampaignModal.tsx
index 4617a5352..74dff6f3a 100644
--- a/frontend/src/components/dashboard/create/duplicate-campaign-modal/DuplicateCampaignModal.tsx
+++ b/frontend/src/components/dashboard/create/duplicate-campaign-modal/DuplicateCampaignModal.tsx
@@ -1,10 +1,15 @@
-import React, { useState, useContext } from 'react'
+import { i18n } from '@lingui/core'
+
+import cx from 'classnames'
+
+import { useState, useContext } from 'react'
+
 import { OutboundLink } from 'react-ga'
-import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
+
 import { useHistory } from 'react-router-dom'
-import cx from 'classnames'
 
-import { LINKS } from 'config'
+import styles from './DuplicateCampaignModal.module.scss'
+
 import { ChannelType, channelIcons, Campaign } from 'classes/Campaign'
 import {
   TextInput,
@@ -12,11 +17,11 @@ import {
   Checkbox,
   ErrorBlock,
 } from 'components/common'
-import styles from './DuplicateCampaignModal.module.scss'
-import { duplicateCampaign } from 'services/campaign.service'
+import { LINKS } from 'config'
 import { ModalContext } from 'contexts/modal.context'
 
-import { i18n } from '@lingui/core'
+import { duplicateCampaign } from 'services/campaign.service'
+import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
 
 const DuplicateCampaignModal = ({ campaign }: { campaign: Campaign }) => {
   const { close } = useContext(ModalContext)
diff --git a/frontend/src/components/dashboard/create/email/EmailCreate.tsx b/frontend/src/components/dashboard/create/email/EmailCreate.tsx
index b9af9c1d2..a3fc27bb0 100644
--- a/frontend/src/components/dashboard/create/email/EmailCreate.tsx
+++ b/frontend/src/components/dashboard/create/email/EmailCreate.tsx
@@ -1,17 +1,19 @@
 import cx from 'classnames'
-import React, { useState, useEffect, useContext } from 'react'
 
-import { CampaignContext } from 'contexts/campaign.context'
-import { EmailCampaign, EmailProgress, Status } from 'classes'
-import { ProgressPane } from 'components/common'
-import EmailTemplate from './EmailTemplate'
+import { useState, useEffect, useContext } from 'react'
+
+import styles from '../Create.module.scss'
+
+import EmailCredentials from './EmailCredentials'
+import EmailDetail from './EmailDetail'
 import EmailRecipients from './EmailRecipients'
-import ProtectedEmailRecipients from './ProtectedEmailRecipients'
 import EmailSend from './EmailSend'
-import EmailDetail from './EmailDetail'
-import EmailCredentials from './EmailCredentials'
+import EmailTemplate from './EmailTemplate'
+import ProtectedEmailRecipients from './ProtectedEmailRecipients'
 
-import styles from '../Create.module.scss'
+import { EmailCampaign, EmailProgress, Status } from 'classes'
+import { ProgressPane } from 'components/common'
+import { CampaignContext } from 'contexts/campaign.context'
 
 const EMAIL_PROGRESS_STEPS = [
   'Create message',
diff --git a/frontend/src/components/dashboard/create/email/EmailCredentials.tsx b/frontend/src/components/dashboard/create/email/EmailCredentials.tsx
index b63e616ec..56898251e 100644
--- a/frontend/src/components/dashboard/create/email/EmailCredentials.tsx
+++ b/frontend/src/components/dashboard/create/email/EmailCredentials.tsx
@@ -1,7 +1,10 @@
-import React, { useContext, useState, Dispatch, SetStateAction } from 'react'
+import { useContext, useState, Dispatch, SetStateAction } from 'react'
 
-import { CampaignContext } from 'contexts/campaign.context'
-import { sendPreviewMessage } from 'services/email.service'
+import { useParams } from 'react-router-dom'
+
+import EmailValidationInput from './EmailValidationInput'
+
+import { EmailProgress } from 'classes'
 import {
   NextButton,
   DetailBlock,
@@ -11,10 +14,9 @@ import {
   StepHeader,
   StepSection,
 } from 'components/common'
-import { useParams } from 'react-router-dom'
+import { CampaignContext } from 'contexts/campaign.context'
 
-import EmailValidationInput from './EmailValidationInput'
-import { EmailProgress } from 'classes'
+import { sendPreviewMessage } from 'services/email.service'
 
 const EmailCredentials = ({
   setActiveStep,
diff --git a/frontend/src/components/dashboard/create/email/EmailDetail.tsx b/frontend/src/components/dashboard/create/email/EmailDetail.tsx
index 1594c6fef..15680987d 100644
--- a/frontend/src/components/dashboard/create/email/EmailDetail.tsx
+++ b/frontend/src/components/dashboard/create/email/EmailDetail.tsx
@@ -1,11 +1,12 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
-import { CampaignContext } from 'contexts/campaign.context'
 import { Status, ChannelType } from 'classes/Campaign'
-import { stopCampaign, retryCampaign } from 'services/campaign.service'
 import { StepHeader, ProgressDetails } from 'components/common'
-import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
 import usePollCampaignStats from 'components/custom-hooks/use-poll-campaign-stats'
+import { CampaignContext } from 'contexts/campaign.context'
+
+import { stopCampaign, retryCampaign } from 'services/campaign.service'
+import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
 
 const EmailDetail = () => {
   const { campaign } = useContext(CampaignContext)
diff --git a/frontend/src/components/dashboard/create/email/EmailRecipients.tsx b/frontend/src/components/dashboard/create/email/EmailRecipients.tsx
index 78c280771..6c3bf5ba6 100644
--- a/frontend/src/components/dashboard/create/email/EmailRecipients.tsx
+++ b/frontend/src/components/dashboard/create/email/EmailRecipients.tsx
@@ -1,20 +1,20 @@
-import React, {
+import { i18n } from '@lingui/core'
+
+import {
   useState,
   useEffect,
   useContext,
   Dispatch,
   SetStateAction,
 } from 'react'
-import { useParams } from 'react-router-dom'
+
 import { OutboundLink } from 'react-ga'
 
-import { CampaignContext } from 'contexts/campaign.context'
-import {
-  uploadFileToS3,
-  deleteCsvStatus,
-  getCsvStatus,
-  CsvStatusResponse,
-} from 'services/upload.service'
+import { useParams } from 'react-router-dom'
+
+import styles from '../Create.module.scss'
+
+import { EmailPreview, EmailProgress } from 'classes'
 import {
   FileInput,
   CsvUpload,
@@ -28,13 +28,17 @@ import {
   StepSection,
   WarningBlock,
 } from 'components/common'
-import { LINKS } from 'config'
-import { i18n } from '@lingui/core'
-import { EmailPreview, EmailProgress } from 'classes'
-import { sendTiming } from 'services/ga.service'
 import useIsMounted from 'components/custom-hooks/use-is-mounted'
+import { LINKS } from 'config'
+import { CampaignContext } from 'contexts/campaign.context'
 
-import styles from '../Create.module.scss'
+import { sendTiming } from 'services/ga.service'
+import {
+  uploadFileToS3,
+  deleteCsvStatus,
+  getCsvStatus,
+  CsvStatusResponse,
+} from 'services/upload.service'
 
 const EmailRecipients = ({
   setActiveStep,
diff --git a/frontend/src/components/dashboard/create/email/EmailSend.tsx b/frontend/src/components/dashboard/create/email/EmailSend.tsx
index c76a0efdb..900d9cea2 100644
--- a/frontend/src/components/dashboard/create/email/EmailSend.tsx
+++ b/frontend/src/components/dashboard/create/email/EmailSend.tsx
@@ -1,15 +1,18 @@
-import React, {
+import {
   useContext,
   useState,
   useEffect,
   Dispatch,
   SetStateAction,
 } from 'react'
+
 import { useParams } from 'react-router-dom'
 
-import { CampaignContext } from 'contexts/campaign.context'
+import styles from '../Create.module.scss'
+
+import { confirmSendCampaign } from '../util'
+
 import { ChannelType, EmailProgress } from 'classes'
-import { ModalContext } from 'contexts/modal.context'
 import {
   EmailPreviewBlock,
   PrimaryButton,
@@ -19,9 +22,10 @@ import {
   StepHeader,
   StepSection,
 } from 'components/common'
+import { CampaignContext } from 'contexts/campaign.context'
+import { ModalContext } from 'contexts/modal.context'
+
 import { getPreviewMessage } from 'services/email.service'
-import { confirmSendCampaign } from '../util'
-import styles from '../Create.module.scss'
 
 const EmailSend = ({
   setActiveStep,
diff --git a/frontend/src/components/dashboard/create/email/EmailTemplate.tsx b/frontend/src/components/dashboard/create/email/EmailTemplate.tsx
index cf39aea98..1e056e6ed 100644
--- a/frontend/src/components/dashboard/create/email/EmailTemplate.tsx
+++ b/frontend/src/components/dashboard/create/email/EmailTemplate.tsx
@@ -1,4 +1,4 @@
-import React, {
+import {
   useState,
   useEffect,
   useCallback,
@@ -7,6 +7,11 @@ import React, {
   SetStateAction,
 } from 'react'
 
+import { useParams } from 'react-router-dom'
+
+import styles from './EmailTemplate.module.scss'
+
+import { EmailCampaign, EmailProgress } from 'classes'
 import {
   TextArea,
   NextButton,
@@ -17,16 +22,14 @@ import {
   StepSection,
   RichTextEditor,
 } from 'components/common'
+
 import SaveDraftModal from 'components/dashboard/create/save-draft-modal'
-import { FinishLaterModalContext } from 'contexts/finish-later.modal.context'
 import { AuthContext } from 'contexts/auth.context'
 import { CampaignContext } from 'contexts/campaign.context'
-import { useParams } from 'react-router-dom'
-import { getCustomFromAddresses } from 'services/settings.service'
-import { saveTemplate } from 'services/email.service'
-import { EmailCampaign, EmailProgress } from 'classes'
+import { FinishLaterModalContext } from 'contexts/finish-later.modal.context'
 
-import styles from './EmailTemplate.module.scss'
+import { saveTemplate } from 'services/email.service'
+import { getCustomFromAddresses } from 'services/settings.service'
 
 const EmailTemplate = ({
   setActiveStep,
diff --git a/frontend/src/components/dashboard/create/email/EmailValidationInput.tsx b/frontend/src/components/dashboard/create/email/EmailValidationInput.tsx
index cb496a959..194bad5fe 100644
--- a/frontend/src/components/dashboard/create/email/EmailValidationInput.tsx
+++ b/frontend/src/components/dashboard/create/email/EmailValidationInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import isEmail from 'validator/lib/isEmail'
 
 import { TextInputWithButton } from 'components/common'
diff --git a/frontend/src/components/dashboard/create/email/ProtectedEmailRecipients.tsx b/frontend/src/components/dashboard/create/email/ProtectedEmailRecipients.tsx
index 980c14a6b..160f73b3e 100644
--- a/frontend/src/components/dashboard/create/email/ProtectedEmailRecipients.tsx
+++ b/frontend/src/components/dashboard/create/email/ProtectedEmailRecipients.tsx
@@ -1,13 +1,20 @@
-import React, {
+import {
   useState,
   useEffect,
   useContext,
   Dispatch,
   SetStateAction,
 } from 'react'
+
 import { useParams } from 'react-router-dom'
+
 import isEmail from 'validator/lib/isEmail'
 
+import styles from '../Create.module.scss'
+
+import EmailRecipients from './EmailRecipients'
+
+import { EmailCampaign, EmailProgress } from 'classes'
 import {
   PrimaryButton,
   TextButton,
@@ -20,14 +27,12 @@ import {
   StepSection,
 } from 'components/common'
 import SaveDraftModal from 'components/dashboard/create/save-draft-modal'
-import { FinishLaterModalContext } from 'contexts/finish-later.modal.context'
 import { CampaignContext } from 'contexts/campaign.context'
-import EmailRecipients from './EmailRecipients'
-import { EmailCampaign, EmailProgress } from 'classes'
+import { FinishLaterModalContext } from 'contexts/finish-later.modal.context'
+
 import { sendTiming } from 'services/ga.service'
-import { ProtectedCsvInfo, validateCsv } from 'services/validate-csv.service'
 import { protectAndUploadCsv } from 'services/protect-csv.service'
-import styles from '../Create.module.scss'
+import { ProtectedCsvInfo, validateCsv } from 'services/validate-csv.service'
 
 enum ProtectPhase {
   READY,
diff --git a/frontend/src/components/dashboard/create/email/tests/EmailRecipients.test.tsx b/frontend/src/components/dashboard/create/email/tests/EmailRecipients.test.tsx
index 499694b0c..0c27780f6 100644
--- a/frontend/src/components/dashboard/create/email/tests/EmailRecipients.test.tsx
+++ b/frontend/src/components/dashboard/create/email/tests/EmailRecipients.test.tsx
@@ -1,5 +1,12 @@
-import React from 'react'
 import userEvent from '@testing-library/user-event'
+
+import { Route } from 'react-router-dom'
+
+import EmailRecipients from '../EmailRecipients'
+
+import { EmailCampaign } from 'classes'
+import CampaignContextProvider from 'contexts/campaign.context'
+import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
 import {
   screen,
   mockCommonApis,
@@ -10,11 +17,6 @@ import {
   DEFAULT_FROM,
   INVALID_EMAIL_CSV_FILE,
 } from 'test-utils'
-import CampaignContextProvider from 'contexts/campaign.context'
-import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
-import { Route } from 'react-router-dom'
-import EmailRecipients from '../EmailRecipients'
-import { EmailCampaign } from 'classes'
 
 const TEST_EMAIL_CAMPAIGN: Campaign = {
   id: 1,
diff --git a/frontend/src/components/dashboard/create/email/tests/EmailTemplate.test.tsx b/frontend/src/components/dashboard/create/email/tests/EmailTemplate.test.tsx
index eca19e99b..4e288123b 100644
--- a/frontend/src/components/dashboard/create/email/tests/EmailTemplate.test.tsx
+++ b/frontend/src/components/dashboard/create/email/tests/EmailTemplate.test.tsx
@@ -1,4 +1,11 @@
-import React from 'react'
+import userEvent from '@testing-library/user-event'
+
+import { Route } from 'react-router-dom'
+
+import EmailTemplate from '../EmailTemplate'
+
+import CampaignContextProvider from 'contexts/campaign.context'
+import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
 import {
   Campaign,
   screen,
@@ -7,11 +14,6 @@ import {
   render,
   fireEvent,
 } from 'test-utils'
-import CampaignContextProvider from 'contexts/campaign.context'
-import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
-import userEvent from '@testing-library/user-event'
-import { Route } from 'react-router-dom'
-import EmailTemplate from '../EmailTemplate'
 
 function mockApis(protect: boolean) {
   const campaign: Campaign = {
diff --git a/frontend/src/components/dashboard/create/email/tests/ProtectedEmailRecipients.test.tsx b/frontend/src/components/dashboard/create/email/tests/ProtectedEmailRecipients.test.tsx
index 15785bafb..3a0daf6eb 100644
--- a/frontend/src/components/dashboard/create/email/tests/ProtectedEmailRecipients.test.tsx
+++ b/frontend/src/components/dashboard/create/email/tests/ProtectedEmailRecipients.test.tsx
@@ -1,5 +1,12 @@
-import React from 'react'
 import userEvent from '@testing-library/user-event'
+
+import { Route } from 'react-router-dom'
+
+import ProtectedEmailRecipients from '../ProtectedEmailRecipients'
+
+import { EmailCampaign } from 'classes'
+import CampaignContextProvider from 'contexts/campaign.context'
+import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
 import {
   screen,
   mockCommonApis,
@@ -10,11 +17,6 @@ import {
   DEFAULT_FROM,
   INVALID_EMAIL_CSV_FILE,
 } from 'test-utils'
-import CampaignContextProvider from 'contexts/campaign.context'
-import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
-import { Route } from 'react-router-dom'
-import ProtectedEmailRecipients from '../ProtectedEmailRecipients'
-import { EmailCampaign } from 'classes'
 
 const TEST_EMAIL_CAMPAIGN: Campaign = {
   id: 1,
diff --git a/frontend/src/components/dashboard/create/save-draft-modal/SaveDraftModal.tsx b/frontend/src/components/dashboard/create/save-draft-modal/SaveDraftModal.tsx
index ffa04a641..261b218af 100644
--- a/frontend/src/components/dashboard/create/save-draft-modal/SaveDraftModal.tsx
+++ b/frontend/src/components/dashboard/create/save-draft-modal/SaveDraftModal.tsx
@@ -1,5 +1,7 @@
-import React, { useState, useContext } from 'react'
+import { useState, useContext } from 'react'
+
 import { useHistory } from 'react-router-dom'
+
 import { ConfirmModal } from 'components/common'
 import { ModalContext } from 'contexts/modal.context'
 
diff --git a/frontend/src/components/dashboard/create/sms/SMSCreate.tsx b/frontend/src/components/dashboard/create/sms/SMSCreate.tsx
index 830d75a26..7720fba8b 100644
--- a/frontend/src/components/dashboard/create/sms/SMSCreate.tsx
+++ b/frontend/src/components/dashboard/create/sms/SMSCreate.tsx
@@ -1,18 +1,24 @@
 import cx from 'classnames'
-import React, { useState, useEffect, useContext } from 'react'
 
-import { CampaignContext } from 'contexts/campaign.context'
-import { SMSProgress, Status } from 'classes'
-import { ProgressPane } from 'components/common'
-import SMSTemplate from './SMSTemplate'
-import SMSRecipients from './SMSRecipients'
+import { useState, useEffect, useContext } from 'react'
+
+import styles from '../Create.module.scss'
+import BodyTemplate from '../common/BodyTemplate'
+
 import SMSCredentials from './SMSCredentials'
-import SMSSend from './SMSSend'
 import SMSDetail from './SMSDetail'
+import SMSRecipients from './SMSRecipients'
+import SMSSend from './SMSSend'
 
 import type { SMSCampaign } from 'classes'
-
-import styles from '../Create.module.scss'
+import { SMSProgress, Status } from 'classes'
+import { ProgressPane } from 'components/common'
+import { CampaignContext } from 'contexts/campaign.context'
+import {
+  SMS_WARN_EXCEED_CHARACTER_THRESHOLD,
+  SMS_ERROR_EXCEED_CHARACTER_THRESHOLD,
+  saveTemplate,
+} from 'services/sms.service'
 
 const SMS_PROGRESS_STEPS = [
   'Create message',
@@ -36,7 +42,14 @@ const CreateSMS = () => {
   function renderStep() {
     switch (activeStep) {
       case SMSProgress.CreateTemplate:
-        return <SMSTemplate setActiveStep={setActiveStep} />
+        return (
+          <BodyTemplate
+            setActiveStep={setActiveStep}
+            warnCharacterCount={SMS_WARN_EXCEED_CHARACTER_THRESHOLD}
+            errorCharacterCount={SMS_ERROR_EXCEED_CHARACTER_THRESHOLD}
+            saveTemplate={saveTemplate}
+          />
+        )
       case SMSProgress.UploadRecipients:
         return <SMSRecipients setActiveStep={setActiveStep} />
       case SMSProgress.InsertCredentials:
diff --git a/frontend/src/components/dashboard/create/sms/SMSCredentials.tsx b/frontend/src/components/dashboard/create/sms/SMSCredentials.tsx
index 0d1eaad3f..89399f1b8 100644
--- a/frontend/src/components/dashboard/create/sms/SMSCredentials.tsx
+++ b/frontend/src/components/dashboard/create/sms/SMSCredentials.tsx
@@ -1,13 +1,20 @@
-import React, { useState, useEffect, useContext } from 'react'
-import { useParams } from 'react-router-dom'
+import { i18n } from '@lingui/core'
+
 import cx from 'classnames'
 
-import { CampaignContext } from 'contexts/campaign.context'
-import {
-  validateStoredCredentials,
-  validateNewCredentials,
-  getStoredCredentials,
-} from 'services/sms.service'
+import { useState, useEffect, useContext } from 'react'
+import type { Dispatch, SetStateAction } from 'react'
+import { OutboundLink } from 'react-ga'
+import { useParams } from 'react-router-dom'
+
+import styles from '../Create.module.scss'
+
+import SMSValidationInput from './SMSValidationInput'
+import TwilioCredentialsInput from './TwilioCredentialsInput'
+
+import type { TwilioCredentials } from './TwilioCredentialsInput'
+
+import type { SMSProgress } from 'classes'
 import {
   PrimaryButton,
   NextButton,
@@ -21,16 +28,13 @@ import {
   Checkbox,
   InfoBlock,
 } from 'components/common'
-import SMSValidationInput from './SMSValidationInput'
-import TwilioCredentialsInput from './TwilioCredentialsInput'
-import styles from '../Create.module.scss'
-import { OutboundLink } from 'react-ga'
-import { i18n } from '@lingui/core'
 import { LINKS } from 'config'
-
-import type { Dispatch, SetStateAction } from 'react'
-import type { TwilioCredentials } from './TwilioCredentialsInput'
-import type { SMSProgress } from 'classes'
+import { CampaignContext } from 'contexts/campaign.context'
+import {
+  validateStoredCredentials,
+  validateNewCredentials,
+  getStoredCredentials,
+} from 'services/sms.service'
 
 const SMSCredentials = ({
   setActiveStep,
diff --git a/frontend/src/components/dashboard/create/sms/SMSDetail.tsx b/frontend/src/components/dashboard/create/sms/SMSDetail.tsx
index 9783117de..f80309afc 100644
--- a/frontend/src/components/dashboard/create/sms/SMSDetail.tsx
+++ b/frontend/src/components/dashboard/create/sms/SMSDetail.tsx
@@ -1,13 +1,14 @@
-import React, { useEffect, useContext } from 'react'
+import { useEffect, useContext } from 'react'
 
-import { CampaignContext } from 'contexts/campaign.context'
 import { Status, ChannelType } from 'classes/Campaign'
-import { stopCampaign, retryCampaign } from 'services/campaign.service'
 import { StepHeader, ProgressDetails } from 'components/common'
+import usePollCampaignStats from 'components/custom-hooks/use-poll-campaign-stats'
+import CompletedDemoModal from 'components/dashboard/demo/completed-demo-modal'
+import { CampaignContext } from 'contexts/campaign.context'
 import { ModalContext } from 'contexts/modal.context'
+
+import { stopCampaign, retryCampaign } from 'services/campaign.service'
 import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
-import CompletedDemoModal from 'components/dashboard/demo/completed-demo-modal'
-import usePollCampaignStats from 'components/custom-hooks/use-poll-campaign-stats'
 
 const SMSDetail = () => {
   const { setModalContent } = useContext(ModalContext) // Destructured to avoid the addition of modalContext to useEffect's dependencies
diff --git a/frontend/src/components/dashboard/create/sms/SMSRecipients.tsx b/frontend/src/components/dashboard/create/sms/SMSRecipients.tsx
index 5f7554eca..b1f5a3a0b 100644
--- a/frontend/src/components/dashboard/create/sms/SMSRecipients.tsx
+++ b/frontend/src/components/dashboard/create/sms/SMSRecipients.tsx
@@ -1,12 +1,16 @@
-import React, { useState, useEffect, useContext } from 'react'
-import { useParams } from 'react-router-dom'
+import { i18n } from '@lingui/core'
+
+import { useState, useEffect, useContext } from 'react'
+
+import type { Dispatch, SetStateAction } from 'react'
+
 import { OutboundLink } from 'react-ga'
 
-import {
-  uploadFileToS3,
-  deleteCsvStatus,
-  getCsvStatus,
-} from 'services/upload.service'
+import { useParams } from 'react-router-dom'
+
+import styles from '../Create.module.scss'
+
+import type { SMSCampaign, SMSPreview, SMSProgress } from 'classes'
 import {
   FileInput,
   CsvUpload,
@@ -21,17 +25,18 @@ import {
   InfoBlock,
   WarningBlock,
 } from 'components/common'
+import useIsMounted from 'components/custom-hooks/use-is-mounted'
 import { LINKS } from 'config'
-import { i18n } from '@lingui/core'
-import { sendTiming } from 'services/ga.service'
 import { CampaignContext } from 'contexts/campaign.context'
-import useIsMounted from 'components/custom-hooks/use-is-mounted'
 
-import type { Dispatch, SetStateAction } from 'react'
-import type { CsvStatusResponse } from 'services/upload.service'
-import type { SMSCampaign, SMSPreview, SMSProgress } from 'classes'
+import { sendTiming } from 'services/ga.service'
+import {
+  uploadFileToS3,
+  deleteCsvStatus,
+  getCsvStatus,
+} from 'services/upload.service'
 
-import styles from '../Create.module.scss'
+import type { CsvStatusResponse } from 'services/upload.service'
 
 const SMSRecipients = ({
   setActiveStep,
diff --git a/frontend/src/components/dashboard/create/sms/SMSSend.tsx b/frontend/src/components/dashboard/create/sms/SMSSend.tsx
index 496c3404b..cc438aca2 100644
--- a/frontend/src/components/dashboard/create/sms/SMSSend.tsx
+++ b/frontend/src/components/dashboard/create/sms/SMSSend.tsx
@@ -1,9 +1,15 @@
-import React, { useContext, useState, useEffect } from 'react'
+import { useContext, useState, useEffect } from 'react'
+
+import type { Dispatch, SetStateAction } from 'react'
+
 import { useParams } from 'react-router-dom'
 
-import { CampaignContext } from 'contexts/campaign.context'
+import styles from '../Create.module.scss'
+
+import { confirmSendCampaign } from '../util'
+
 import { ChannelType } from 'classes'
-import { ModalContext } from 'contexts/modal.context'
+import type { SMSProgress } from 'classes'
 import {
   PreviewBlock,
   PrimaryButton,
@@ -14,12 +20,10 @@ import {
   StepHeader,
   StepSection,
 } from 'components/common'
-import { getPreviewMessage } from 'services/sms.service'
+import { CampaignContext } from 'contexts/campaign.context'
+import { ModalContext } from 'contexts/modal.context'
 
-import type { SMSProgress } from 'classes'
-import type { Dispatch, SetStateAction } from 'react'
-import { confirmSendCampaign } from '../util'
-import styles from '../Create.module.scss'
+import { getPreviewMessage } from 'services/sms.service'
 
 const SMSSend = ({
   setActiveStep,
diff --git a/frontend/src/components/dashboard/create/sms/SMSValidationInput.tsx b/frontend/src/components/dashboard/create/sms/SMSValidationInput.tsx
index 24c7ab209..1edb44171 100644
--- a/frontend/src/components/dashboard/create/sms/SMSValidationInput.tsx
+++ b/frontend/src/components/dashboard/create/sms/SMSValidationInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { TextInputWithButton } from 'components/common'
 
diff --git a/frontend/src/components/dashboard/create/sms/TwilioCredentialsInput.tsx b/frontend/src/components/dashboard/create/sms/TwilioCredentialsInput.tsx
index 989fa6cee..f0c6f7d2f 100644
--- a/frontend/src/components/dashboard/create/sms/TwilioCredentialsInput.tsx
+++ b/frontend/src/components/dashboard/create/sms/TwilioCredentialsInput.tsx
@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from 'react'
+import { i18n } from '@lingui/core'
+
+import { useState, useEffect } from 'react'
 
-import { LINKS } from 'config'
 import { TextInput, LabelWithExternalLink } from 'components/common'
-import { i18n } from '@lingui/core'
+import { LINKS } from 'config'
 
 export interface TwilioCredentials {
   accountSid: string
diff --git a/frontend/src/components/dashboard/create/sms/tests/SMSCredentials.test.tsx b/frontend/src/components/dashboard/create/sms/tests/SMSCredentials.test.tsx
index 930724f57..10c49ff07 100644
--- a/frontend/src/components/dashboard/create/sms/tests/SMSCredentials.test.tsx
+++ b/frontend/src/components/dashboard/create/sms/tests/SMSCredentials.test.tsx
@@ -1,9 +1,12 @@
 import userEvent from '@testing-library/user-event'
+
+import { Route } from 'react-router'
+
+import SMSCredentials from '../SMSCredentials'
+
 import { SMSCampaign } from 'classes'
 import CampaignContextProvider from 'contexts/campaign.context'
 import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
-import React from 'react'
-import { Route } from 'react-router'
 import {
   mockCommonApis,
   render,
@@ -13,7 +16,6 @@ import {
   INVALID_TWILIO_CREDENTIAL,
   Campaign,
 } from 'test-utils'
-import SMSCredentials from '../SMSCredentials'
 
 const TEST_SMS_CAMPAIGN: Campaign = {
   id: 1,
diff --git a/frontend/src/components/dashboard/create/sms/tests/SMSRecipients.test.tsx b/frontend/src/components/dashboard/create/sms/tests/SMSRecipients.test.tsx
index e944256b6..09ea56f72 100644
--- a/frontend/src/components/dashboard/create/sms/tests/SMSRecipients.test.tsx
+++ b/frontend/src/components/dashboard/create/sms/tests/SMSRecipients.test.tsx
@@ -1,5 +1,12 @@
-import React from 'react'
 import userEvent from '@testing-library/user-event'
+
+import { Route } from 'react-router-dom'
+
+import SMSRecipients from '../SMSRecipients'
+
+import { SMSCampaign } from 'classes'
+import CampaignContextProvider from 'contexts/campaign.context'
+import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
 import {
   screen,
   mockCommonApis,
@@ -8,11 +15,6 @@ import {
   Campaign,
   INVALID_MOBILE_CSV_FILE,
 } from 'test-utils'
-import CampaignContextProvider from 'contexts/campaign.context'
-import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
-import { Route } from 'react-router-dom'
-import SMSRecipients from '../SMSRecipients'
-import { SMSCampaign } from 'classes'
 
 const TEST_SMS_CAMPAIGN: Campaign = {
   id: 1,
diff --git a/frontend/src/components/dashboard/create/telegram/TelegramCreate.tsx b/frontend/src/components/dashboard/create/telegram/TelegramCreate.tsx
index da88ade3d..0ca8d265c 100644
--- a/frontend/src/components/dashboard/create/telegram/TelegramCreate.tsx
+++ b/frontend/src/components/dashboard/create/telegram/TelegramCreate.tsx
@@ -1,16 +1,23 @@
 import cx from 'classnames'
-import React, { useState, useEffect, useContext } from 'react'
 
-import { CampaignContext } from 'contexts/campaign.context'
-import { TelegramProgress, Status, TelegramCampaign } from 'classes'
-import { ProgressPane } from 'components/common'
-import TelegramTemplate from './TelegramTemplate'
-import TelegramRecipients from './TelegramRecipients'
+import { useState, useEffect, useContext } from 'react'
+
+import styles from '../Create.module.scss'
+import BodyTemplate from '../common/BodyTemplate'
+
 import TelegramCredentials from './TelegramCredentials'
-import TelegramSend from './TelegramSend'
 import TelegramDetail from './TelegramDetail'
+import TelegramRecipients from './TelegramRecipients'
+import TelegramSend from './TelegramSend'
 
-import styles from '../Create.module.scss'
+import { TelegramProgress, Status, TelegramCampaign } from 'classes'
+import { ProgressPane } from 'components/common'
+import { CampaignContext } from 'contexts/campaign.context'
+import {
+  TELEGRAM_WARN_EXCEED_CHARACTER_THRESHOLD,
+  TELEGRAM_ERROR_EXCEED_CHARACTER_THRESHOLD,
+  saveTemplate,
+} from 'services/telegram.service'
 
 const TELEGRAM_PROGRESS_STEPS = [
   'Create message',
@@ -34,7 +41,14 @@ const CreateTelegram = () => {
   function renderStep() {
     switch (activeStep) {
       case TelegramProgress.CreateTemplate:
-        return <TelegramTemplate setActiveStep={setActiveStep} />
+        return (
+          <BodyTemplate
+            setActiveStep={setActiveStep}
+            warnCharacterCount={TELEGRAM_WARN_EXCEED_CHARACTER_THRESHOLD}
+            errorCharacterCount={TELEGRAM_ERROR_EXCEED_CHARACTER_THRESHOLD}
+            saveTemplate={saveTemplate}
+          />
+        )
       case TelegramProgress.UploadRecipients:
         return <TelegramRecipients setActiveStep={setActiveStep} />
       case TelegramProgress.InsertCredentials:
diff --git a/frontend/src/components/dashboard/create/telegram/TelegramCredentials.tsx b/frontend/src/components/dashboard/create/telegram/TelegramCredentials.tsx
index 8e77ddfd6..98c83d22f 100644
--- a/frontend/src/components/dashboard/create/telegram/TelegramCredentials.tsx
+++ b/frontend/src/components/dashboard/create/telegram/TelegramCredentials.tsx
@@ -1,16 +1,18 @@
-import React, { useState, useEffect, useContext } from 'react'
+import { i18n } from '@lingui/core'
+
+import cx from 'classnames'
+
+import { useState, useEffect, useContext } from 'react'
+import type { Dispatch, SetStateAction } from 'react'
 import { OutboundLink } from 'react-ga'
 import { useParams } from 'react-router-dom'
-import cx from 'classnames'
 
-import { CampaignContext } from 'contexts/campaign.context'
-import { LINKS } from 'config'
-import {
-  validateStoredCredentials,
-  validateNewCredentials,
-  verifyCampaignCredentials,
-  getStoredCredentials,
-} from 'services/telegram.service'
+import styles from '../Create.module.scss'
+
+import TelegramCredentialsInput from './TelegramCredentialsInput'
+import TelegramValidationInput from './TelegramValidationInput'
+
+import type { TelegramProgress } from 'classes'
 import {
   PrimaryButton,
   NextButton,
@@ -25,13 +27,14 @@ import {
   Checkbox,
   InfoBlock,
 } from 'components/common'
-import TelegramCredentialsInput from './TelegramCredentialsInput'
-import TelegramValidationInput from './TelegramValidationInput'
-import styles from '../Create.module.scss'
-import { i18n } from '@lingui/core'
-
-import type { Dispatch, SetStateAction } from 'react'
-import type { TelegramProgress } from 'classes'
+import { LINKS } from 'config'
+import { CampaignContext } from 'contexts/campaign.context'
+import {
+  validateStoredCredentials,
+  validateNewCredentials,
+  verifyCampaignCredentials,
+  getStoredCredentials,
+} from 'services/telegram.service'
 
 const TelegramCredentials = ({
   setActiveStep,
diff --git a/frontend/src/components/dashboard/create/telegram/TelegramCredentialsInput.tsx b/frontend/src/components/dashboard/create/telegram/TelegramCredentialsInput.tsx
index 994723948..63e8255d0 100644
--- a/frontend/src/components/dashboard/create/telegram/TelegramCredentialsInput.tsx
+++ b/frontend/src/components/dashboard/create/telegram/TelegramCredentialsInput.tsx
@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react'
-import { LINKS } from 'config'
+import { i18n } from '@lingui/core'
+
+import { useEffect, useState } from 'react'
 
 import { TextInput, LabelWithExternalLink } from 'components/common'
-import { i18n } from '@lingui/core'
+import { LINKS } from 'config'
 
 const TelegramCredentialsInput = ({
   onFilled,
diff --git a/frontend/src/components/dashboard/create/telegram/TelegramDetail.tsx b/frontend/src/components/dashboard/create/telegram/TelegramDetail.tsx
index 9158cb66a..7c77961a6 100644
--- a/frontend/src/components/dashboard/create/telegram/TelegramDetail.tsx
+++ b/frontend/src/components/dashboard/create/telegram/TelegramDetail.tsx
@@ -1,13 +1,14 @@
-import React, { useEffect, useContext } from 'react'
+import { useEffect, useContext } from 'react'
 
-import { CampaignContext } from 'contexts/campaign.context'
 import { Status, ChannelType } from 'classes/Campaign'
-import { stopCampaign, retryCampaign } from 'services/campaign.service'
 import { StepHeader, ProgressDetails } from 'components/common'
+import usePollCampaignStats from 'components/custom-hooks/use-poll-campaign-stats'
+import CompletedDemoModal from 'components/dashboard/demo/completed-demo-modal'
+import { CampaignContext } from 'contexts/campaign.context'
 import { ModalContext } from 'contexts/modal.context'
+
+import { stopCampaign, retryCampaign } from 'services/campaign.service'
 import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
-import CompletedDemoModal from 'components/dashboard/demo/completed-demo-modal'
-import usePollCampaignStats from 'components/custom-hooks/use-poll-campaign-stats'
 
 const TelegramDetail = () => {
   const { setModalContent } = useContext(ModalContext) // Destructured to avoid the addition of modalContext to useEffect's dependencies
diff --git a/frontend/src/components/dashboard/create/telegram/TelegramRecipients.tsx b/frontend/src/components/dashboard/create/telegram/TelegramRecipients.tsx
index d99f41180..de85d07bb 100644
--- a/frontend/src/components/dashboard/create/telegram/TelegramRecipients.tsx
+++ b/frontend/src/components/dashboard/create/telegram/TelegramRecipients.tsx
@@ -1,13 +1,16 @@
-import React, { useState, useEffect, useContext } from 'react'
-import { useParams } from 'react-router-dom'
+import { i18n } from '@lingui/core'
+
+import { useState, useEffect, useContext } from 'react'
+
+import type { Dispatch, SetStateAction } from 'react'
+
 import { OutboundLink } from 'react-ga'
 
-import { CampaignContext } from 'contexts/campaign.context'
-import {
-  uploadFileToS3,
-  deleteCsvStatus,
-  getCsvStatus,
-} from 'services/upload.service'
+import { useParams } from 'react-router-dom'
+
+import styles from '../Create.module.scss'
+
+import type { TelegramPreview, TelegramProgress } from 'classes'
 import {
   FileInput,
   CsvUpload,
@@ -22,17 +25,19 @@ import {
   InfoBlock,
   WarningBlock,
 } from 'components/common'
+import useIsMounted from 'components/custom-hooks/use-is-mounted'
 import { LINKS } from 'config'
-import { i18n } from '@lingui/core'
+import { CampaignContext } from 'contexts/campaign.context'
+
 import { sendTiming } from 'services/ga.service'
-import useIsMounted from 'components/custom-hooks/use-is-mounted'
+import {
+  uploadFileToS3,
+  deleteCsvStatus,
+  getCsvStatus,
+} from 'services/upload.service'
 
-import type { Dispatch, SetStateAction } from 'react'
-import type { TelegramPreview, TelegramProgress } from 'classes'
 import type { CsvStatusResponse } from 'services/upload.service'
 
-import styles from '../Create.module.scss'
-
 const TelegramRecipients = ({
   setActiveStep,
 }: {
diff --git a/frontend/src/components/dashboard/create/telegram/TelegramSend.tsx b/frontend/src/components/dashboard/create/telegram/TelegramSend.tsx
index 626cb1776..9913e91ce 100644
--- a/frontend/src/components/dashboard/create/telegram/TelegramSend.tsx
+++ b/frontend/src/components/dashboard/create/telegram/TelegramSend.tsx
@@ -1,9 +1,15 @@
-import React, { useContext, useState, useEffect } from 'react'
+import { useContext, useState, useEffect } from 'react'
+
+import type { Dispatch, SetStateAction } from 'react'
+
 import { useParams } from 'react-router-dom'
 
-import { CampaignContext } from 'contexts/campaign.context'
+import styles from '../Create.module.scss'
+
+import { confirmSendCampaign } from '../util'
+
 import { ChannelType } from 'classes'
-import { ModalContext } from 'contexts/modal.context'
+import type { TelegramProgress } from 'classes'
 import {
   PreviewBlock,
   PrimaryButton,
@@ -14,12 +20,10 @@ import {
   StepHeader,
   StepSection,
 } from 'components/common'
-import { getPreviewMessage } from 'services/telegram.service'
+import { CampaignContext } from 'contexts/campaign.context'
+import { ModalContext } from 'contexts/modal.context'
 
-import type { TelegramProgress } from 'classes'
-import type { Dispatch, SetStateAction } from 'react'
-import { confirmSendCampaign } from '../util'
-import styles from '../Create.module.scss'
+import { getPreviewMessage } from 'services/telegram.service'
 
 const TelegramSend = ({
   setActiveStep,
diff --git a/frontend/src/components/dashboard/create/telegram/TelegramTemplate.tsx b/frontend/src/components/dashboard/create/telegram/TelegramTemplate.tsx
deleted file mode 100644
index 23424d287..000000000
--- a/frontend/src/components/dashboard/create/telegram/TelegramTemplate.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React, { useState, useCallback, useEffect, useContext } from 'react'
-import { useParams } from 'react-router-dom'
-
-import { FinishLaterModalContext } from 'contexts/finish-later.modal.context'
-import { CampaignContext } from 'contexts/campaign.context'
-import {
-  TextArea,
-  NextButton,
-  ErrorBlock,
-  StepHeader,
-  StepSection,
-} from 'components/common'
-import SaveDraftModal from 'components/dashboard/create/save-draft-modal'
-import { saveTemplate } from 'services/telegram.service'
-
-import type { TelegramCampaign, TelegramProgress } from 'classes'
-import type { Dispatch, SetStateAction } from 'react'
-
-const TelegramTemplate = ({
-  setActiveStep,
-}: {
-  setActiveStep: Dispatch<SetStateAction<TelegramProgress>>
-}) => {
-  const { campaign, updateCampaign } = useContext(CampaignContext)
-  const { body: initialBody } = campaign as TelegramCampaign
-  const { setFinishLaterContent } = useContext(FinishLaterModalContext)
-  const [body, setBody] = useState(replaceNewLines(initialBody))
-  const [errorMsg, setErrorMsg] = useState(null)
-  const { id: campaignId } = useParams<{ id: string }>()
-
-  const handleSaveTemplate = useCallback(async (): Promise<void> => {
-    setErrorMsg(null)
-    try {
-      if (!campaignId) {
-        throw new Error('Invalid campaign id')
-      }
-      const { updatedTemplate, numRecipients } = await saveTemplate(
-        +campaignId,
-        body
-      )
-      if (!updatedTemplate) return
-      updateCampaign({
-        body: updatedTemplate?.body,
-        params: updatedTemplate?.params,
-        numRecipients,
-      })
-      setActiveStep((s) => s + 1)
-    } catch (err) {
-      setErrorMsg(err.message)
-    }
-  }, [body, campaignId, setActiveStep, updateCampaign])
-
-  // Set callback for finish later button
-  useEffect(() => {
-    setFinishLaterContent(
-      <SaveDraftModal
-        saveable
-        onSave={async () => {
-          if (!campaignId) return
-          try {
-            if (!body) throw new Error('Message template cannot be empty!')
-            await saveTemplate(+campaignId, body)
-          } catch (err) {
-            setErrorMsg(err.message)
-            throw err
-          }
-        }}
-      />
-    )
-    return () => {
-      setFinishLaterContent(null)
-    }
-  }, [body, campaignId, setFinishLaterContent])
-
-  function replaceNewLines(body: string): string {
-    return (body || '').replace(/<br\s*\/?>/g, '\n')
-  }
-
-  return (
-    <>
-      <StepSection>
-        <StepHeader title="Create message template" subtitle="Step 1" />
-        <div>
-          <h4>
-            <label htmlFor="message">Message</label>
-          </h4>
-          <p>
-            To personalise your message, include keywords that are surrounded by
-            double curly braces. The keywords in your message template should
-            match the headers in your recipients CSV file.
-            <br />
-            <b>Note:</b> Recipient (mobile number) is a required column in the
-            CSV file.
-          </p>
-          <p>
-            Example
-            <br />
-            Reminder: Dear <b>{'{{ name }}'}</b>, your next appointment at{' '}
-            <b>{'{{ clinic }}'}</b> is on <b>{'{{ date }}'} </b>
-            at <b>{'{{ time }}'}</b>.
-          </p>
-        </div>
-        <TextArea
-          id="message"
-          placeholder="Enter message"
-          highlight={true}
-          value={body}
-          onChange={setBody}
-        />
-      </StepSection>
-
-      <NextButton disabled={!body} onClick={handleSaveTemplate} />
-      <ErrorBlock>{errorMsg}</ErrorBlock>
-    </>
-  )
-}
-
-export default TelegramTemplate
diff --git a/frontend/src/components/dashboard/create/telegram/TelegramValidationInput.tsx b/frontend/src/components/dashboard/create/telegram/TelegramValidationInput.tsx
index 05e6278b2..0fb6c8092 100644
--- a/frontend/src/components/dashboard/create/telegram/TelegramValidationInput.tsx
+++ b/frontend/src/components/dashboard/create/telegram/TelegramValidationInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { TextInputWithButton } from 'components/common'
 
diff --git a/frontend/src/components/dashboard/create/telegram/tests/TelegramCredentials.test.tsx b/frontend/src/components/dashboard/create/telegram/tests/TelegramCredentials.test.tsx
index 92142daa8..730b57f0c 100644
--- a/frontend/src/components/dashboard/create/telegram/tests/TelegramCredentials.test.tsx
+++ b/frontend/src/components/dashboard/create/telegram/tests/TelegramCredentials.test.tsx
@@ -1,9 +1,12 @@
 import userEvent from '@testing-library/user-event'
+
+import { Route } from 'react-router'
+
+import TelegramCredentials from '../TelegramCredentials'
+
 import { TelegramCampaign } from 'classes'
 import CampaignContextProvider from 'contexts/campaign.context'
 import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
-import React from 'react'
-import { Route } from 'react-router'
 import {
   mockCommonApis,
   render,
@@ -13,7 +16,6 @@ import {
   INVALID_TELEGRAM_CREDENTIAL,
   Campaign,
 } from 'test-utils'
-import TelegramCredentials from '../TelegramCredentials'
 
 const TEST_TELEGRAM_CAMPAIGN: Campaign = {
   id: 1,
diff --git a/frontend/src/components/dashboard/create/telegram/tests/TelegramRecipients.test.tsx b/frontend/src/components/dashboard/create/telegram/tests/TelegramRecipients.test.tsx
index ca5f4e6ba..84df604da 100644
--- a/frontend/src/components/dashboard/create/telegram/tests/TelegramRecipients.test.tsx
+++ b/frontend/src/components/dashboard/create/telegram/tests/TelegramRecipients.test.tsx
@@ -1,5 +1,12 @@
-import React from 'react'
 import userEvent from '@testing-library/user-event'
+
+import { Route } from 'react-router-dom'
+
+import TelegramRecipients from '../TelegramRecipients'
+
+import { TelegramCampaign } from 'classes'
+import CampaignContextProvider from 'contexts/campaign.context'
+import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
 import {
   screen,
   mockCommonApis,
@@ -8,11 +15,6 @@ import {
   Campaign,
   INVALID_MOBILE_CSV_FILE,
 } from 'test-utils'
-import CampaignContextProvider from 'contexts/campaign.context'
-import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
-import { Route } from 'react-router-dom'
-import TelegramRecipients from '../TelegramRecipients'
-import { TelegramCampaign } from 'classes'
 
 const TEST_TELEGRAM_CAMPAIGN: Campaign = {
   id: 1,
diff --git a/frontend/src/components/dashboard/create/telegram/tests/TelegramTemplate.test.tsx b/frontend/src/components/dashboard/create/telegram/tests/TelegramTemplate.test.tsx
deleted file mode 100644
index b1af095e3..000000000
--- a/frontend/src/components/dashboard/create/telegram/tests/TelegramTemplate.test.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React from 'react'
-import { screen, mockCommonApis, server, render, Campaign } from 'test-utils'
-import CampaignContextProvider from 'contexts/campaign.context'
-import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
-import userEvent from '@testing-library/user-event'
-import { Route } from 'react-router-dom'
-import TelegramTemplate from '../TelegramTemplate'
-
-const TEST_TELEGRAM_CAMPAIGN: Campaign = {
-  id: 1,
-  name: 'Test Telegram campaign',
-  type: 'TELEGRAM',
-  created_at: new Date(),
-  valid: false,
-  protect: false,
-  demo_message_limit: null,
-  csv_filename: null,
-  is_csv_processing: false,
-  num_recipients: null,
-  job_queue: [],
-  halted: false,
-  has_credential: false,
-}
-
-function mockApis() {
-  const { handlers } = mockCommonApis({
-    // Start with a freshly created Telegram campaign
-    campaigns: [{ ...TEST_TELEGRAM_CAMPAIGN }],
-  })
-  return handlers
-}
-
-function renderTemplatePage() {
-  const setActiveStep = jest.fn()
-
-  render(
-    <Route path="/campaigns/:id">
-      <CampaignContextProvider>
-        <FinishLaterModalContextProvider>
-          <TelegramTemplate setActiveStep={setActiveStep} />
-        </FinishLaterModalContextProvider>
-      </CampaignContextProvider>
-    </Route>,
-    {
-      router: { initialIndex: 0, initialEntries: ['/campaigns/1'] },
-    }
-  )
-}
-
-test('displays the necessary elements', async () => {
-  // Setup
-  server.use(...mockApis())
-  renderTemplatePage()
-
-  // Wait for the component to fully load
-  const heading = await screen.findByRole('heading', {
-    name: /create message template/i,
-  })
-
-  /**
-   * Assert that the following elements are present:
-   * 1. "Create message template" heading
-   * 2. Message template textbox
-   * 3. "Next" button
-   */
-  expect(heading).toBeInTheDocument()
-  expect(
-    screen.getByRole('textbox', {
-      name: /message/i,
-    })
-  ).toBeInTheDocument()
-  expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument()
-})
-
-test('next button is disabled when template is empty', async () => {
-  // Setup
-  server.use(...mockApis())
-  renderTemplatePage()
-
-  // Wait for the component to fully load
-  const templateTextbox = await screen.findByRole('textbox', {
-    name: /message/i,
-  })
-  const nextButton = screen.getByRole('button', {
-    name: /next/i,
-  })
-
-  // Assert that the next button is initially disabled since the textbox is empty
-  expect(templateTextbox).toHaveValue('')
-  expect(nextButton).toBeDisabled()
-
-  // Type something in the textbox and erase it
-  userEvent.type(templateTextbox, 'test body')
-  userEvent.clear(templateTextbox)
-
-  // Assert that the next button is disabled after clearing the text
-  expect(nextButton).toBeDisabled()
-})
-
-test('next button is enabled when the template is filled', async () => {
-  server.use(...mockApis())
-  renderTemplatePage()
-
-  // Wait for the component to fully load
-  const templateTextbox = await screen.findByRole('textbox', {
-    name: /message/i,
-  })
-  const nextButton = screen.getByRole('button', {
-    name: /next/i,
-  })
-
-  // Type something in the textbox
-  const TEST_BODY = 'test body'
-  userEvent.type(templateTextbox, TEST_BODY)
-  expect(templateTextbox).toHaveValue(TEST_BODY)
-
-  // Assert that the next button is enabled
-  expect(nextButton).toBeEnabled()
-})
-
-test('displays an error if the template is invalid', async () => {
-  // Setup
-  jest.spyOn(console, 'error').mockImplementation(() => {
-    // Do nothing. Mock console.error to silence expected errors
-    // due to submitting invalid templates to the API
-  })
-  server.use(...mockApis())
-  renderTemplatePage()
-
-  // Wait for the component to fully load
-  const templateTextbox = await screen.findByRole('textbox', {
-    name: /message/i,
-  })
-  const nextButton = screen.getByRole('button', { name: /next/i })
-
-  // Test against various invalid templates
-  const TEST_TEMPLATES = ['<hehe>', '<script>']
-  for (const template of TEST_TEMPLATES) {
-    // Type the template text into the textbox
-    userEvent.clear(templateTextbox)
-    userEvent.type(templateTextbox, template)
-
-    // Click the next button to submit the template
-    userEvent.click(nextButton)
-
-    // Assert that an error message is shown
-    expect(
-      await screen.findByText(/message template is invalid/i)
-    ).toBeInTheDocument()
-  }
-
-  // Teardown
-  jest.restoreAllMocks()
-})
diff --git a/frontend/src/components/dashboard/create/util.ts b/frontend/src/components/dashboard/create/util.ts
index fbaed9f7b..b8d009c8d 100644
--- a/frontend/src/components/dashboard/create/util.ts
+++ b/frontend/src/components/dashboard/create/util.ts
@@ -1,5 +1,5 @@
-import { sendCampaign } from 'services/campaign.service'
 import { Campaign, ChannelType, Status } from 'classes'
+import { sendCampaign } from 'services/campaign.service'
 import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
 
 export const confirmSendCampaign = async ({
diff --git a/frontend/src/components/dashboard/demo/completed-demo-modal/CompletedDemoModal.tsx b/frontend/src/components/dashboard/demo/completed-demo-modal/CompletedDemoModal.tsx
index 23639efdd..c2bf20bd8 100644
--- a/frontend/src/components/dashboard/demo/completed-demo-modal/CompletedDemoModal.tsx
+++ b/frontend/src/components/dashboard/demo/completed-demo-modal/CompletedDemoModal.tsx
@@ -1,16 +1,21 @@
-import React, { useContext, useEffect, useState } from 'react'
+import { i18n } from '@lingui/core'
+
+import { useContext, useEffect, useState } from 'react'
+
+import { OutboundLink } from 'react-ga'
+
 import styles from './CompletedDemoModal.module.scss'
+
 import CongratsImage from 'assets/img/demo/congrats.png'
 import EndDemoImage from 'assets/img/demo/end-demo.png'
-import { i18n } from '@lingui/core'
-import { LINKS } from 'config'
-import { OutboundLink } from 'react-ga'
 import { ChannelType } from 'classes'
-import { getUserSettings } from 'services/settings.service'
 import { PrimaryButton } from 'components/common'
 import DemoVideoModal from 'components/dashboard/demo/demo-video-modal'
+import { LINKS } from 'config'
 import { ModalContext } from 'contexts/modal.context'
 
+import { getUserSettings } from 'services/settings.service'
+
 const CompletedDemoModal = ({
   selectedChannel,
 }: {
diff --git a/frontend/src/components/dashboard/demo/create-demo-modal/CreateDemoModal.tsx b/frontend/src/components/dashboard/demo/create-demo-modal/CreateDemoModal.tsx
index ecb309283..f2c9da5db 100644
--- a/frontend/src/components/dashboard/demo/create-demo-modal/CreateDemoModal.tsx
+++ b/frontend/src/components/dashboard/demo/create-demo-modal/CreateDemoModal.tsx
@@ -1,19 +1,23 @@
-import React, { useContext, useEffect, useState } from 'react'
 import cx from 'classnames'
+
+import { useContext, useEffect, useState } from 'react'
+
+import { useHistory } from 'react-router-dom'
+
 import styles from './CreateDemoModal.module.scss'
+
 import { channelIcons, ChannelType } from 'classes/Campaign'
+import type { Campaign } from 'classes/Campaign'
 import {
   ErrorBlock,
   PrimaryButton,
   TextButton,
   TextInput,
 } from 'components/common'
-import { ModalContext } from 'contexts/modal.context'
-import { useHistory } from 'react-router-dom'
-import { createCampaign } from 'services/campaign.service'
 import DemoVideoModal from 'components/dashboard/demo/demo-video-modal'
+import { ModalContext } from 'contexts/modal.context'
 
-import type { Campaign } from 'classes/Campaign'
+import { createCampaign } from 'services/campaign.service'
 
 const CreateDemoModal = ({
   numDemosSms,
diff --git a/frontend/src/components/dashboard/demo/demo-bar/DemoBar.tsx b/frontend/src/components/dashboard/demo/demo-bar/DemoBar.tsx
index 5e9380923..852708692 100644
--- a/frontend/src/components/dashboard/demo/demo-bar/DemoBar.tsx
+++ b/frontend/src/components/dashboard/demo/demo-bar/DemoBar.tsx
@@ -1,10 +1,15 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react'
-import styles from './DemoBar.module.scss'
 import cx from 'classnames'
+
+import { useCallback, useContext, useEffect, useState } from 'react'
+
+import CreateDemoModal from '../create-demo-modal'
+
+import styles from './DemoBar.module.scss'
+
 import { CloseButton, TextButton } from 'components/common'
-import { updateDemoDisplayed } from 'services/settings.service'
 import { ModalContext } from 'contexts/modal.context'
-import CreateDemoModal from '../create-demo-modal'
+import { updateDemoDisplayed } from 'services/settings.service'
+
 const DemoBar = ({
   numDemosSms,
   numDemosTelegram,
diff --git a/frontend/src/components/dashboard/demo/demo-info-banner/DemoInfoBanner.tsx b/frontend/src/components/dashboard/demo/demo-info-banner/DemoInfoBanner.tsx
index 6bce0c4ff..f178c96aa 100644
--- a/frontend/src/components/dashboard/demo/demo-info-banner/DemoInfoBanner.tsx
+++ b/frontend/src/components/dashboard/demo/demo-info-banner/DemoInfoBanner.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
 import { t } from '@lingui/macro'
+
 import styles from './DemoInfoBanner.module.scss'
 const DemoInfoBanner = () => {
   return (
diff --git a/frontend/src/components/dashboard/demo/demo-video-modal/DemoVideoModal.tsx b/frontend/src/components/dashboard/demo/demo-video-modal/DemoVideoModal.tsx
index 16aff555a..fa6aeda7e 100644
--- a/frontend/src/components/dashboard/demo/demo-video-modal/DemoVideoModal.tsx
+++ b/frontend/src/components/dashboard/demo/demo-video-modal/DemoVideoModal.tsx
@@ -1,12 +1,17 @@
-import React, { useContext } from 'react'
-import { ModalContext } from 'contexts/modal.context'
+import { i18n } from '@lingui/core'
+
+import { useContext } from 'react'
+
+import { OutboundLink } from 'react-ga'
+
+import ReactPlayer from 'react-player/lazy'
+
 import styles from './DemoVideoModal.module.scss'
+
 import { PrimaryButton, TextButton } from 'components/common'
 import CreateDemoModal from 'components/dashboard/demo/create-demo-modal'
 import { LINKS } from 'config'
-import { i18n } from '@lingui/core'
-import { OutboundLink } from 'react-ga'
-import ReactPlayer from 'react-player/lazy'
+import { ModalContext } from 'contexts/modal.context'
 
 const DemoVideoModal = ({
   numDemosSms,
diff --git a/frontend/src/components/dashboard/settings/Settings.tsx b/frontend/src/components/dashboard/settings/Settings.tsx
index 2d1a7a509..9a068bef3 100644
--- a/frontend/src/components/dashboard/settings/Settings.tsx
+++ b/frontend/src/components/dashboard/settings/Settings.tsx
@@ -1,26 +1,25 @@
-import React, { useContext, useState, useEffect } from 'react'
 import cx from 'classnames'
-import { Redirect, Route, Switch } from 'react-router-dom'
 
-import { ModalContext } from 'contexts/modal.context'
-import { SideNav, TitleBar } from 'components/common'
-import {
-  getUserSettings,
-  getCustomFromAddresses,
-} from 'services/settings.service'
-import { ChannelType, channelIcons } from 'classes'
+import { useContext, useState, useEffect } from 'react'
+import { Redirect, Route, Switch } from 'react-router-dom'
 
+import styles from './Settings.module.scss'
+import AddApiKeyModal from './add-api-key-modal'
+import AddCredentialModal from './add-credential-modal'
+import AddCustomFromAddress from './add-custom-from-address-modal'
 import ApiKey from './api-key'
 import Credentials from './credentials'
 import CustomFromAddress from './custom-from-address'
-import AddCredentialModal from './add-credential-modal'
-import AddApiKeyModal from './add-api-key-modal'
-import AddCustomFromAddress from './add-custom-from-address-modal'
 
 import CredentialsImage from 'assets/img/credentials.svg'
-import styles from './Settings.module.scss'
-
+import { ChannelType, channelIcons } from 'classes'
+import { SideNav, TitleBar } from 'components/common'
+import { ModalContext } from 'contexts/modal.context'
 import type { UserCredential } from 'services/settings.service'
+import {
+  getUserSettings,
+  getCustomFromAddresses,
+} from 'services/settings.service'
 
 const SETTINGS_LINKS = [
   {
diff --git a/frontend/src/components/dashboard/settings/add-api-key-modal/AddApiKeyModal.tsx b/frontend/src/components/dashboard/settings/add-api-key-modal/AddApiKeyModal.tsx
index 2907ee629..b410d362c 100644
--- a/frontend/src/components/dashboard/settings/add-api-key-modal/AddApiKeyModal.tsx
+++ b/frontend/src/components/dashboard/settings/add-api-key-modal/AddApiKeyModal.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-import ApiKey from 'components/dashboard/settings/api-key'
 import styles from './AddApiKeyModal.module.scss'
 
+import ApiKey from 'components/dashboard/settings/api-key'
+
 const AddApiKeyModal = ({ onSuccess }: { onSuccess: () => void }) => {
   return (
     <div className={styles.container}>
diff --git a/frontend/src/components/dashboard/settings/add-credential-modal/AddCredentialModal.tsx b/frontend/src/components/dashboard/settings/add-credential-modal/AddCredentialModal.tsx
index 092dcbaa5..8da95ba82 100644
--- a/frontend/src/components/dashboard/settings/add-credential-modal/AddCredentialModal.tsx
+++ b/frontend/src/components/dashboard/settings/add-credential-modal/AddCredentialModal.tsx
@@ -1,21 +1,33 @@
-import React, { useEffect, useState, useContext } from 'react'
-import { OutboundLink } from 'react-ga'
+import { i18n } from '@lingui/core'
+
 import cx from 'classnames'
 
-import { LINKS } from 'config'
+import { useEffect, useState, useContext } from 'react'
+
+import { OutboundLink } from 'react-ga'
+
+import styles from './AddCredentialModal.module.scss'
+
+import ChooseChannelsImage from 'assets/img/choose-channels.svg'
+import ConfirmImage from 'assets/img/confirm-modal.svg'
+import FailureImage from 'assets/img/failure.png'
+import SuccessImage from 'assets/img/success.png'
 import { ChannelType, channelIcons } from 'classes'
+
 import {
   PrimaryButton,
   TextButton,
   ErrorBlock,
   CredLabelInput,
 } from 'components/common'
+import EmailValidationInput from 'components/dashboard/create/email/EmailValidationInput'
+import SMSValidationInput from 'components/dashboard/create/sms/SMSValidationInput'
 import TwilioCredentialsInput from 'components/dashboard/create/sms/TwilioCredentialsInput'
 import TelegramCredentialsInput from 'components/dashboard/create/telegram/TelegramCredentialsInput'
-import SMSValidationInput from 'components/dashboard/create/sms/SMSValidationInput'
 import TelegramValidationInput from 'components/dashboard/create/telegram/TelegramValidationInput'
-import EmailValidationInput from 'components/dashboard/create/email/EmailValidationInput'
+import { LINKS } from 'config'
 import { ModalContext } from 'contexts/modal.context'
+
 import {
   getStoredCredentials as getSmsStoredCredentials,
   storeCredentials as storeSmsCredentials,
@@ -26,13 +38,6 @@ import {
   storeCredentials as storeTelegramCredentials,
 } from 'services/telegram.service'
 
-import ConfirmImage from 'assets/img/confirm-modal.svg'
-import ChooseChannelsImage from 'assets/img/choose-channels.svg'
-import FailureImage from 'assets/img/failure.png'
-import SuccessImage from 'assets/img/success.png'
-import styles from './AddCredentialModal.module.scss'
-import { i18n } from '@lingui/core'
-
 enum AddCredentialStep {
   SelectType,
   Input,
diff --git a/frontend/src/components/dashboard/settings/add-custom-from-address-modal/AddCustomFromAddressModal.tsx b/frontend/src/components/dashboard/settings/add-custom-from-address-modal/AddCustomFromAddressModal.tsx
index 94adac234..6969b387b 100644
--- a/frontend/src/components/dashboard/settings/add-custom-from-address-modal/AddCustomFromAddressModal.tsx
+++ b/frontend/src/components/dashboard/settings/add-custom-from-address-modal/AddCustomFromAddressModal.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-import CustomFromAddress from 'components/dashboard/settings/custom-from-address'
 import styles from './AddCustomFromAddressModal.module.scss'
 
+import CustomFromAddress from 'components/dashboard/settings/custom-from-address'
+
 const AddCustomFromAddressModal = ({
   customFromAddresses,
   onSuccess,
diff --git a/frontend/src/components/dashboard/settings/api-key/ApiKey.tsx b/frontend/src/components/dashboard/settings/api-key/ApiKey.tsx
index ed5d062ce..2e2c14c0c 100644
--- a/frontend/src/components/dashboard/settings/api-key/ApiKey.tsx
+++ b/frontend/src/components/dashboard/settings/api-key/ApiKey.tsx
@@ -1,15 +1,19 @@
-import React, { useState, useRef, useContext, useEffect } from 'react'
 import cx from 'classnames'
 
+import { useState, useRef, useContext, useEffect } from 'react'
+
+import type { FunctionComponent } from 'react'
+
+import styles from './ApiKey.module.scss'
+
 import {
   TextInputWithButton,
   ConfirmModal,
   StepHeader,
 } from 'components/common'
 import { ModalContext } from 'contexts/modal.context'
-import { regenerateApiKey } from 'services/settings.service'
 
-import styles from './ApiKey.module.scss'
+import { regenerateApiKey } from 'services/settings.service'
 
 const RESET_COPY_TIMEOUT = 1000
 
@@ -25,10 +29,7 @@ enum ApiKeyState {
   REGENERATE = 'REGENERATE',
 }
 
-const ApiKey: React.FunctionComponent<ApiKeyProps> = ({
-  hasApiKey,
-  onGenerate,
-}) => {
+const ApiKey: FunctionComponent<ApiKeyProps> = ({ hasApiKey, onGenerate }) => {
   const [apiKey, setApiKey] = useState('')
   const [errorMsg, setErrorMsg] = useState(null)
   const [apiKeyState, setApiKeyState] = useState<ApiKeyState>(
diff --git a/frontend/src/components/dashboard/settings/credentials/Credentials.tsx b/frontend/src/components/dashboard/settings/credentials/Credentials.tsx
index 83f2f9011..91628d287 100644
--- a/frontend/src/components/dashboard/settings/credentials/Credentials.tsx
+++ b/frontend/src/components/dashboard/settings/credentials/Credentials.tsx
@@ -1,18 +1,23 @@
-import React, { useContext } from 'react'
 import cx from 'classnames'
 
-import { PrimaryButton, ConfirmModal } from 'components/common'
-import { ModalContext } from 'contexts/modal.context'
-import { deleteCredential } from 'services/settings.service'
+import { useContext } from 'react'
 
 import AddCredentialModal from '../add-credential-modal'
-import EmptyCredentialsImage from 'assets/img/credentials.svg'
+
 import VerifyCredentialModal from '../verify-credential-modal'
+
 import styles from './Credentials.module.scss'
 
-import type { UserCredential } from 'services/settings.service'
+import EmptyCredentialsImage from 'assets/img/credentials.svg'
 import type { ChannelType } from 'classes'
 
+import { PrimaryButton, ConfirmModal } from 'components/common'
+import { ModalContext } from 'contexts/modal.context'
+
+import { deleteCredential } from 'services/settings.service'
+
+import type { UserCredential } from 'services/settings.service'
+
 const Credentials = ({
   creds,
   credType,
diff --git a/frontend/src/components/dashboard/settings/custom-from-address/CustomFromAddress.tsx b/frontend/src/components/dashboard/settings/custom-from-address/CustomFromAddress.tsx
index b6a63338b..26b456922 100644
--- a/frontend/src/components/dashboard/settings/custom-from-address/CustomFromAddress.tsx
+++ b/frontend/src/components/dashboard/settings/custom-from-address/CustomFromAddress.tsx
@@ -1,17 +1,23 @@
-import React, { useContext } from 'react'
-import { OutboundLink } from 'react-ga'
-import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
-import cx from 'classnames'
-import { Trans } from '@lingui/macro'
-import { LINKS } from 'config'
 import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/macro'
+import cx from 'classnames'
+
+import { useContext } from 'react'
+
+import { OutboundLink } from 'react-ga'
+
+import UpdateCustomFromAddressModal from '../update-custom-from-address-modal'
+
+import VerifyCustomFromAddressModal from '../verify-custom-from-address-modal'
+
+import styles from './CustomFromAddress.module.scss'
 
 import { StepHeader } from 'components/common'
-import { ModalContext } from 'contexts/modal.context'
+import { LINKS } from 'config'
 import { AuthContext } from 'contexts/auth.context'
-import styles from './CustomFromAddress.module.scss'
-import VerifyCustomFromAddressModal from '../verify-custom-from-address-modal'
-import UpdateCustomFromAddressModal from '../update-custom-from-address-modal'
+import { ModalContext } from 'contexts/modal.context'
+
+import { GA_USER_EVENTS, sendUserEvent } from 'services/ga.service'
 
 const CustomFromAddress = ({
   customFromAddresses,
diff --git a/frontend/src/components/dashboard/settings/update-custom-from-address-modal/UpdateCustomFromAddressModal.tsx b/frontend/src/components/dashboard/settings/update-custom-from-address-modal/UpdateCustomFromAddressModal.tsx
index 7eae0ddaf..7497fde65 100644
--- a/frontend/src/components/dashboard/settings/update-custom-from-address-modal/UpdateCustomFromAddressModal.tsx
+++ b/frontend/src/components/dashboard/settings/update-custom-from-address-modal/UpdateCustomFromAddressModal.tsx
@@ -1,5 +1,12 @@
-import React, { useState, useContext, useEffect } from 'react'
+import { useState, useContext, useEffect } from 'react'
+
 import isEmail from 'validator/lib/isEmail'
+
+import styles from './UpdateCustomFromAddressModal.module.scss'
+
+import ConfirmImage from 'assets/img/confirm-modal.svg'
+import FailureImage from 'assets/img/failure.png'
+import SuccessImage from 'assets/img/success.png'
 import {
   PrimaryButton,
   ErrorBlock,
@@ -9,11 +16,6 @@ import {
 import { ModalContext } from 'contexts/modal.context'
 import { verifyFromAddress } from 'services/email.service'
 
-import ConfirmImage from 'assets/img/confirm-modal.svg'
-import FailureImage from 'assets/img/failure.png'
-import SuccessImage from 'assets/img/success.png'
-import styles from './UpdateCustomFromAddressModal.module.scss'
-
 enum UpdateFromAddressStep {
   Update,
   Success,
diff --git a/frontend/src/components/dashboard/settings/verify-credential-modal/VerifyCredentialModal.tsx b/frontend/src/components/dashboard/settings/verify-credential-modal/VerifyCredentialModal.tsx
index 05c221d82..4e40531a6 100644
--- a/frontend/src/components/dashboard/settings/verify-credential-modal/VerifyCredentialModal.tsx
+++ b/frontend/src/components/dashboard/settings/verify-credential-modal/VerifyCredentialModal.tsx
@@ -1,19 +1,20 @@
-import React, { useState, useContext } from 'react'
+import { useState, useContext } from 'react'
 
+import styles from './VerifyCredentialModal.module.scss'
+
+import ConfirmImage from 'assets/img/confirm-modal.svg'
+import FailureImage from 'assets/img/failure.png'
+import SuccessImage from 'assets/img/success.png'
 import { ChannelType } from 'classes'
+
 import { PrimaryButton, ErrorBlock } from 'components/common'
-import SMSValidationInput from 'components/dashboard/create/sms/SMSValidationInput'
 import EmailValidationInput from 'components/dashboard/create/email/EmailValidationInput'
+import SMSValidationInput from 'components/dashboard/create/sms/SMSValidationInput'
 import TelegramValidationInput from 'components/dashboard/create/telegram/TelegramValidationInput'
 import { ModalContext } from 'contexts/modal.context'
 import { verifyUserCredentials as VerifyUserSmsCredentials } from 'services/sms.service'
 import { verifyUserCredentials as VerifyUserTelegramCredentials } from 'services/telegram.service'
 
-import ConfirmImage from 'assets/img/confirm-modal.svg'
-import FailureImage from 'assets/img/failure.png'
-import SuccessImage from 'assets/img/success.png'
-import styles from './VerifyCredentialModal.module.scss'
-
 enum VerifyCredentialStep {
   Verify,
   Success,
diff --git a/frontend/src/components/dashboard/settings/verify-custom-from-address-modal/VerifyCustomFromAddressModal.tsx b/frontend/src/components/dashboard/settings/verify-custom-from-address-modal/VerifyCustomFromAddressModal.tsx
index 7af28b30c..c53a23379 100644
--- a/frontend/src/components/dashboard/settings/verify-custom-from-address-modal/VerifyCustomFromAddressModal.tsx
+++ b/frontend/src/components/dashboard/settings/verify-custom-from-address-modal/VerifyCustomFromAddressModal.tsx
@@ -1,13 +1,14 @@
-import React, { useState, useContext } from 'react'
-import { PrimaryButton, ErrorBlock } from 'components/common'
-import EmailValidationInput from 'components/dashboard/create/email/EmailValidationInput'
-import { ModalContext } from 'contexts/modal.context'
-import { verifyFromAddress } from 'services/email.service'
+import { useState, useContext } from 'react'
+
+import styles from './VerifyCustomFromAddressModal.module.scss'
 
 import ConfirmImage from 'assets/img/confirm-modal.svg'
 import FailureImage from 'assets/img/failure.png'
 import SuccessImage from 'assets/img/success.png'
-import styles from './VerifyCustomFromAddressModal.module.scss'
+import { PrimaryButton, ErrorBlock } from 'components/common'
+import EmailValidationInput from 'components/dashboard/create/email/EmailValidationInput'
+import { ModalContext } from 'contexts/modal.context'
+import { verifyFromAddress } from 'services/email.service'
 
 enum VerifyEmailStep {
   Verify,
diff --git a/frontend/src/components/dashboard/tests/integration/email.test.tsx b/frontend/src/components/dashboard/tests/integration/email.test.tsx
index 8e8f419c7..70b969799 100644
--- a/frontend/src/components/dashboard/tests/integration/email.test.tsx
+++ b/frontend/src/components/dashboard/tests/integration/email.test.tsx
@@ -1,4 +1,14 @@
 import userEvent from '@testing-library/user-event'
+
+import {
+  mockApis,
+  renderDashboard,
+  CAMPAIGN_NAME,
+  SUBJECT_TEXT,
+  MESSAGE_TEXT,
+  REPLY_TO,
+} from '../util'
+
 import {
   server,
   screen,
@@ -9,14 +19,6 @@ import {
   RECIPIENT_EMAIL,
   VALID_EMAIL_CSV_FILE,
 } from 'test-utils'
-import {
-  mockApis,
-  renderDashboard,
-  CAMPAIGN_NAME,
-  SUBJECT_TEXT,
-  MESSAGE_TEXT,
-  REPLY_TO,
-} from '../util'
 
 test('successfully creates and sends a new email campaign', async () => {
   // Setup
diff --git a/frontend/src/components/dashboard/tests/integration/protected-email.test.tsx b/frontend/src/components/dashboard/tests/integration/protected-email.test.tsx
index 9ee87f395..40d2befea 100644
--- a/frontend/src/components/dashboard/tests/integration/protected-email.test.tsx
+++ b/frontend/src/components/dashboard/tests/integration/protected-email.test.tsx
@@ -1,4 +1,15 @@
 import userEvent from '@testing-library/user-event'
+
+import {
+  mockApis,
+  renderDashboard,
+  CAMPAIGN_NAME,
+  SUBJECT_TEXT,
+  MESSAGE_TEXT,
+  REPLY_TO,
+  UNPROTECTED_MESSAGE_TEXT,
+} from '../util'
+
 import {
   server,
   screen,
@@ -9,15 +20,6 @@ import {
   VALID_EMAIL_CSV_FILE,
   RECIPIENT_EMAIL,
 } from 'test-utils'
-import {
-  mockApis,
-  renderDashboard,
-  CAMPAIGN_NAME,
-  SUBJECT_TEXT,
-  MESSAGE_TEXT,
-  REPLY_TO,
-  UNPROTECTED_MESSAGE_TEXT,
-} from '../util'
 
 test('successfully creates and sends a new protected email campaign', async () => {
   // Setup
diff --git a/frontend/src/components/dashboard/tests/integration/sms.test.tsx b/frontend/src/components/dashboard/tests/integration/sms.test.tsx
index 14c662533..85ec7937e 100644
--- a/frontend/src/components/dashboard/tests/integration/sms.test.tsx
+++ b/frontend/src/components/dashboard/tests/integration/sms.test.tsx
@@ -1,4 +1,7 @@
 import userEvent from '@testing-library/user-event'
+
+import { mockApis, renderDashboard, CAMPAIGN_NAME, MESSAGE_TEXT } from '../util'
+
 import {
   server,
   screen,
@@ -8,7 +11,6 @@ import {
   RECIPIENT_NUMBER,
   VALID_MOBILE_CSV_FILE,
 } from 'test-utils'
-import { mockApis, renderDashboard, CAMPAIGN_NAME, MESSAGE_TEXT } from '../util'
 
 test('successfully creates and sends a new SMS campaign', async () => {
   // Setup
diff --git a/frontend/src/components/dashboard/tests/integration/telegram.test.tsx b/frontend/src/components/dashboard/tests/integration/telegram.test.tsx
index b3a66d02f..b3e8c560e 100644
--- a/frontend/src/components/dashboard/tests/integration/telegram.test.tsx
+++ b/frontend/src/components/dashboard/tests/integration/telegram.test.tsx
@@ -1,4 +1,7 @@
 import userEvent from '@testing-library/user-event'
+
+import { mockApis, renderDashboard, CAMPAIGN_NAME, MESSAGE_TEXT } from '../util'
+
 import {
   server,
   screen,
@@ -8,7 +11,6 @@ import {
   VALID_MOBILE_CSV_FILE,
   RECIPIENT_NUMBER,
 } from 'test-utils'
-import { mockApis, renderDashboard, CAMPAIGN_NAME, MESSAGE_TEXT } from '../util'
 
 test('successfully creates and sends a new Telegram campaign', async () => {
   // Setup
diff --git a/frontend/src/components/dashboard/tests/util.tsx b/frontend/src/components/dashboard/tests/util.tsx
index 8a44a70d8..811293b32 100644
--- a/frontend/src/components/dashboard/tests/util.tsx
+++ b/frontend/src/components/dashboard/tests/util.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
 import Dashboard from '../Dashboard'
+
 import { mockCommonApis, render } from 'test-utils'
 
 export const REPLY_TO = 'testEmail@open.gov.sg'
diff --git a/frontend/src/components/error/Error.tsx b/frontend/src/components/error/Error.tsx
index f1b54cdaa..72612c508 100644
--- a/frontend/src/components/error/Error.tsx
+++ b/frontend/src/components/error/Error.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
 import { useHistory } from 'react-router-dom'
-import { PrimaryButton, TextButton } from 'components/common'
 
-import heroImg from 'assets/img/not-found.png'
 import styles from './Error.module.scss'
 
+import heroImg from 'assets/img/not-found.png'
+import { PrimaryButton, TextButton } from 'components/common'
+
 const Error = () => {
   const history = useHistory()
 
diff --git a/frontend/src/components/landing/Landing.tsx b/frontend/src/components/landing/Landing.tsx
index 550974bad..7a3a20181 100644
--- a/frontend/src/components/landing/Landing.tsx
+++ b/frontend/src/components/landing/Landing.tsx
@@ -1,37 +1,36 @@
-import React, { useState, useContext, useEffect } from 'react'
-import { Redirect, useHistory } from 'react-router-dom'
-import { OutboundLink } from 'react-ga'
+import { i18n } from '@lingui/core'
+
 import cx from 'classnames'
+
 import Lottie from 'lottie-react'
+import { useState, useContext, useEffect } from 'react'
 
-import { LINKS, INFO_BANNER } from 'config'
+import { OutboundLink } from 'react-ga'
+import { Redirect, useHistory } from 'react-router-dom'
 
-import Navbar from './nav-bar'
+import styles from './Landing.module.scss'
 import Banner from './banner'
-import { InfoBanner, PrimaryButton } from 'components/common'
-import { AuthContext } from 'contexts/auth.context'
-import { getLandingStats } from 'services/stats.service'
 
-import styles from './Landing.module.scss'
-import companyLogo from 'assets/img/brand/company-logo.svg'
+import Navbar from './nav-bar'
 
-import mohAgencyImg from 'assets/img/landing/moh-gray.png'
+import companyLogo from 'assets/img/brand/company-logo.svg'
+import channelsImg from 'assets/img/landing/channels.png'
+import landingHeroImg from 'assets/img/landing/landing-hero.png'
+import userImg from 'assets/img/landing/moe-circle.png'
 import moeAgencyImg from 'assets/img/landing/moe-gray.png'
+import mohAgencyImg from 'assets/img/landing/moh-gray.png'
 import momAgencyImg from 'assets/img/landing/mom-gray.png'
-
-import userImg from 'assets/img/landing/moe-circle.png'
-import channelsImg from 'assets/img/landing/channels.png'
-
 import onboardingImg from 'assets/img/landing/onboard.svg'
-import landingHeroImg from 'assets/img/landing/landing-hero.png'
 
+import landingAnimation from 'assets/lottie/landing.json'
 import whyUse1 from 'assets/mp4/why-use-1.mp4'
 import whyUse2 from 'assets/mp4/why-use-2.mp4'
 import whyUse3 from 'assets/mp4/why-use-3.mp4'
+import { InfoBanner, PrimaryButton } from 'components/common'
+import { LINKS, INFO_BANNER } from 'config'
 
-import landingAnimation from 'assets/lottie/landing.json'
-
-import { i18n } from '@lingui/core'
+import { AuthContext } from 'contexts/auth.context'
+import { getLandingStats } from 'services/stats.service'
 
 const isIE11 = !!window.MSInputMethodContext && !!(document as any).documentMode
 
diff --git a/frontend/src/components/landing/banner/Banner.tsx b/frontend/src/components/landing/banner/Banner.tsx
index 0af186c6e..130466788 100644
--- a/frontend/src/components/landing/banner/Banner.tsx
+++ b/frontend/src/components/landing/banner/Banner.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import cx from 'classnames'
 
 import styles from './Banner.module.scss'
diff --git a/frontend/src/components/landing/nav-bar/Navbar.tsx b/frontend/src/components/landing/nav-bar/Navbar.tsx
index a3f501db3..4ac27e45c 100644
--- a/frontend/src/components/landing/nav-bar/Navbar.tsx
+++ b/frontend/src/components/landing/nav-bar/Navbar.tsx
@@ -1,13 +1,15 @@
-import React from 'react'
-import { useHistory } from 'react-router-dom'
+import { i18n } from '@lingui/core'
+
 import { OutboundLink } from 'react-ga'
 
-import { LINKS } from 'config'
-import PrimaryButton from 'components/common/primary-button'
-import AppLogo from 'assets/img/brand/app-logo.svg'
-import AppBrandmark from 'assets/img/brand/app-brandmark.svg'
+import { useHistory } from 'react-router-dom'
+
 import styles from './NavBar.module.scss'
-import { i18n } from '@lingui/core'
+
+import AppBrandmark from 'assets/img/brand/app-brandmark.svg'
+import AppLogo from 'assets/img/brand/app-logo.svg'
+import PrimaryButton from 'components/common/primary-button'
+import { LINKS } from 'config'
 
 const NavBar = () => {
   const history = useHistory()
diff --git a/frontend/src/components/login/Login.tsx b/frontend/src/components/login/Login.tsx
index e11588e65..ecde086cc 100644
--- a/frontend/src/components/login/Login.tsx
+++ b/frontend/src/components/login/Login.tsx
@@ -1,16 +1,21 @@
-import React, { useContext } from 'react'
-import { Redirect } from 'react-router-dom'
+import { i18n } from '@lingui/core'
+
+import { useContext } from 'react'
+
 import { OutboundLink } from 'react-ga'
 
-import LoginInput from './login-input'
-import { LINKS, INFO_BANNER } from 'config'
-import { AuthContext } from 'contexts/auth.context'
-import { InfoBanner } from 'components/common'
+import { Redirect } from 'react-router-dom'
+
 import styles from './Login.module.scss'
-import loginImg from 'assets/img/landing/login.svg'
+
+import LoginInput from './login-input'
+
 import appLogo from 'assets/img/brand/app-logo.svg'
 import companyLogo from 'assets/img/brand/company-logo-dark.svg'
-import { i18n } from '@lingui/core'
+import loginImg from 'assets/img/landing/login.svg'
+import { InfoBanner } from 'components/common'
+import { LINKS, INFO_BANNER } from 'config'
+import { AuthContext } from 'contexts/auth.context'
 
 const Login = () => {
   const authContext = useContext(AuthContext)
diff --git a/frontend/src/components/login/login-input/LoginInput.tsx b/frontend/src/components/login/login-input/LoginInput.tsx
index 7852841a9..5b7fdfe60 100644
--- a/frontend/src/components/login/login-input/LoginInput.tsx
+++ b/frontend/src/components/login/login-input/LoginInput.tsx
@@ -1,7 +1,15 @@
-import React, { useState, useContext, useEffect } from 'react'
+import { Trans, t } from '@lingui/macro'
 import cx from 'classnames'
+
 import { noop } from 'lodash'
+
+import { useState, useContext, useEffect } from 'react'
+
+import styles from './LoginInput.module.scss'
+
 import { TextInputWithButton, TextButton } from 'components/common'
+import { AuthContext } from 'contexts/auth.context'
+
 import {
   getOtpWithEmail,
   loginWithOtp,
@@ -9,14 +17,11 @@ import {
   setUserAnalytics,
 } from 'services/auth.service'
 
-import styles from './LoginInput.module.scss'
-import { AuthContext } from 'contexts/auth.context'
 import {
   GA_USER_EVENTS,
   sendUserEvent,
   sendException,
 } from 'services/ga.service'
-import { Trans, t } from '@lingui/macro'
 
 const RESEND_WAIT_TIME = 30000
 
diff --git a/frontend/src/components/protected/Protected.tsx b/frontend/src/components/protected/Protected.tsx
index 6cae51257..39dbe0625 100644
--- a/frontend/src/components/protected/Protected.tsx
+++ b/frontend/src/components/protected/Protected.tsx
@@ -1,13 +1,15 @@
-import React, { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useState } from 'react'
 
-import { fetchMessage } from 'services/decrypt-mail.service'
-import { TextInputWithButton, ProtectedPreview } from 'components/common'
-import Banner from 'components/landing/banner'
+import { useParams } from 'react-router-dom'
 
 import styles from './Protected.module.scss'
+
 import appLogo from 'assets/img/brand/app-logo.svg'
 import landingHero from 'assets/img/landing/landing-hero.png'
+import { TextInputWithButton, ProtectedPreview } from 'components/common'
+import Banner from 'components/landing/banner'
+
+import { fetchMessage } from 'services/decrypt-mail.service'
 
 const Protected = () => {
   const { id } = useParams<{ id: string }>()
diff --git a/frontend/src/components/protected/tests/Protected.test.tsx b/frontend/src/components/protected/tests/Protected.test.tsx
index 943ecbff0..2af8c6d09 100644
--- a/frontend/src/components/protected/tests/Protected.test.tsx
+++ b/frontend/src/components/protected/tests/Protected.test.tsx
@@ -1,9 +1,10 @@
 import userEvent from '@testing-library/user-event'
-import React from 'react'
 import { Route } from 'react-router'
-import { screen, mockCommonApis, render, server } from 'test-utils'
+
 import Protected from '../Protected'
 
+import { screen, mockCommonApis, render, server } from 'test-utils'
+
 const TEST_MESSAGE = 'test message'
 const TEST_PASSWORD = 'test password'
 // passwordHash and payload are determined from TEST_MESSAGE and TEST_PASSWORD
diff --git a/frontend/src/components/test-utils/CryptoTest.tsx b/frontend/src/components/test-utils/CryptoTest.tsx
index 47514ed22..5ec40685b 100644
--- a/frontend/src/components/test-utils/CryptoTest.tsx
+++ b/frontend/src/components/test-utils/CryptoTest.tsx
@@ -1,6 +1,9 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
+
 import { uuid } from 'uuidv4'
 
+import styles from './CryptoTest.module.scss'
+
 import {
   TextArea,
   TextInput,
@@ -9,7 +12,6 @@ import {
   Checkbox,
 } from 'components/common'
 import { encryptData, sha256 } from 'services/crypto.service'
-import styles from './CryptoTest.module.scss'
 
 const LOREM_DIMSUM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis dolor at ex mollis, in pulvinar justo tincidunt. Cras dictum lorem eu sapien ultricies aliquet. Integer mollis ante non est sollicitudin placerat. Nam dolor sem, ultrices eu posuere et, fringilla et nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque sit amet massa mi. Sed vitae diam dapibus, maximus elit in, mattis lectus. Donec nec lacinia mauris. Morbi non mollis lacus, sit amet dapibus est. Ut nibh ex, dapibus sed nulla at, consequat lacinia quam.
 
diff --git a/frontend/src/components/test-utils/TemplateTest.tsx b/frontend/src/components/test-utils/TemplateTest.tsx
index 26e74db1d..ed260f1c8 100644
--- a/frontend/src/components/test-utils/TemplateTest.tsx
+++ b/frontend/src/components/test-utils/TemplateTest.tsx
@@ -1,11 +1,12 @@
-import React, { useState, useEffect, useCallback } from 'react'
 import { debounce } from 'lodash'
 import { parse } from 'papaparse'
+import { useState, useEffect, useCallback } from 'react'
 
-import { hydrateTemplate } from 'services/validate-csv.service'
-import { TextArea, ProtectedPreview, Checkbox } from 'components/common'
 import styles from './TemplateTest.module.scss'
 
+import { TextArea, ProtectedPreview, Checkbox } from 'components/common'
+import { hydrateTemplate } from 'services/validate-csv.service'
+
 const TemplateTest = () => {
   const [body, setBody] = useState('')
   const [csv, setCsv] = useState('')
diff --git a/frontend/src/components/test-utils/TestUtils.tsx b/frontend/src/components/test-utils/TestUtils.tsx
index 2127d1565..5fe320e54 100644
--- a/frontend/src/components/test-utils/TestUtils.tsx
+++ b/frontend/src/components/test-utils/TestUtils.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Switch, Route, useRouteMatch } from 'react-router-dom'
 
 import CryptoTest from './CryptoTest'
diff --git a/frontend/src/components/unsubscribe/Unsubscribe.tsx b/frontend/src/components/unsubscribe/Unsubscribe.tsx
index 03283459c..6b8d812af 100644
--- a/frontend/src/components/unsubscribe/Unsubscribe.tsx
+++ b/frontend/src/components/unsubscribe/Unsubscribe.tsx
@@ -1,15 +1,18 @@
-import React, { useState } from 'react'
-import { useParams, useLocation } from 'react-router-dom'
 import querystring from 'querystring'
+
 import { Trans } from '@lingui/macro'
 
-import { ErrorBlock, PrimaryButton, TextButton } from 'components/common'
-import Banner from 'components/landing/banner'
+import { useState } from 'react'
+
+import { useParams, useLocation } from 'react-router-dom'
 
 import styles from './Unsubscribe.module.scss'
+
 import appLogo from 'assets/img/brand/app-logo.svg'
-import landingHero from 'assets/img/unsubscribe/request-unsubscribe.png'
 import cancelRequestHero from 'assets/img/unsubscribe/cancel-request.png'
+import landingHero from 'assets/img/unsubscribe/request-unsubscribe.png'
+import { ErrorBlock, PrimaryButton, TextButton } from 'components/common'
+import Banner from 'components/landing/banner'
 
 import { unsubscribeRequest } from 'services/unsubscribe.service'
 
diff --git a/frontend/src/components/unsubscribe/tests/Unsubscribe.test.tsx b/frontend/src/components/unsubscribe/tests/Unsubscribe.test.tsx
index 4e4b8fde1..c4a6c7c82 100644
--- a/frontend/src/components/unsubscribe/tests/Unsubscribe.test.tsx
+++ b/frontend/src/components/unsubscribe/tests/Unsubscribe.test.tsx
@@ -1,9 +1,10 @@
-import React from 'react'
-import { render, mockCommonApis, server, screen } from 'test-utils'
-import Unsubscribe from '../Unsubscribe'
 import userEvent from '@testing-library/user-event'
 import { Route } from 'react-router-dom'
 
+import Unsubscribe from '../Unsubscribe'
+
+import { render, mockCommonApis, server, screen } from 'test-utils'
+
 function mockApis() {
   const { handlers } = mockCommonApis({
     campaigns: [
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
index e8aa7cb9f..3573f00e9 100644
--- a/frontend/src/config.ts
+++ b/frontend/src/config.ts
@@ -1,12 +1,15 @@
-import axios from 'axios'
 import { i18n } from '@lingui/core'
 import { t } from '@lingui/macro'
-import { sha256 } from './services/crypto.service'
+import axios from 'axios'
+
 import type { InitializeOptions } from 'react-ga'
 
+import { sha256 } from './services/crypto.service'
+
 // Re-export these later on as constants
 let gaInitializeOptions: InitializeOptions
 let gaTrackingId: string
+let announcementActive: string
 
 /**
  * Configs differentiated between environments
@@ -17,6 +20,9 @@ if (process.env.NODE_ENV === 'test') {
   gaInitializeOptions = {
     testMode: true,
   }
+
+  // Disable announcements in test environments
+  announcementActive = 'false'
 } else {
   /**
    * React env vars are used for injecting variables at build time
@@ -44,6 +50,9 @@ if (process.env.NODE_ENV === 'test') {
   gaInitializeOptions = {
     debug: false, // Set to true only on development
   }
+
+  // `REACT_APP_ANNOUNCEMENT_ACTIVE` must be set to `true` in Amplify if we want the modal to display
+  announcementActive = process.env.REACT_APP_ANNOUNCEMENT_ACTIVE as string
 }
 
 /**
@@ -86,16 +95,10 @@ export const SENTRY_ENVIRONMENT =
   (process.env.REACT_APP_SENTRY_ENVIRONMENT as string) || 'development'
 export const INFO_BANNER = process.env.REACT_APP_INFO_BANNER as string
 
-// `REACT_APP_ANNOUNCEMENT_ACTIVE` must be set to `true` in Amplify if we want the modal to display
-function getAnnouncementActive() {
-  const envVar = process.env.REACT_APP_ANNOUNCEMENT_ACTIVE as string
-  return envVar === 'true'
-}
-
 // Feature Launch Announcements
 // If `isActive` is false, the modal will not proc for ANY user
 export const ANNOUNCEMENT: Record<string, any> = {
-  isActive: getAnnouncementActive(),
+  isActive: announcementActive === 'true',
   title: t`announcement.title`,
   subtext: t`announcement.subtext`,
   mediaUrl: t`announcement.mediaUrl`,
diff --git a/frontend/src/contexts/auth.context.tsx b/frontend/src/contexts/auth.context.tsx
index c785e80a3..a41486754 100644
--- a/frontend/src/contexts/auth.context.tsx
+++ b/frontend/src/contexts/auth.context.tsx
@@ -1,11 +1,11 @@
-import React, { createContext, useState, useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
 import axios from 'axios'
+import { createContext, useState, useEffect } from 'react'
+import type { ReactNode, Dispatch, SetStateAction } from 'react'
+import { useLocation } from 'react-router-dom'
+
 import { getUser, logout, setUserAnalytics } from 'services/auth.service'
 import { initializeGA, sendPageView } from 'services/ga.service'
 
-import type { Dispatch, SetStateAction } from 'react'
-
 interface ContextProps {
   isAuthenticated: boolean
   setAuthenticated: Dispatch<SetStateAction<boolean>>
@@ -15,7 +15,7 @@ interface ContextProps {
 
 export const AuthContext = createContext({} as ContextProps)
 
-const AuthContextProvider = ({ children }: { children: React.ReactNode }) => {
+const AuthContextProvider = ({ children }: { children: ReactNode }) => {
   const [isAuthenticated, setAuthenticated] = useState(false)
   const [isLoaded, setLoaded] = useState(false)
   const [email, setEmail] = useState('')
diff --git a/frontend/src/contexts/campaign.context.tsx b/frontend/src/contexts/campaign.context.tsx
index 9d6eae756..945748843 100644
--- a/frontend/src/contexts/campaign.context.tsx
+++ b/frontend/src/contexts/campaign.context.tsx
@@ -1,8 +1,9 @@
-import React, { createContext, useState, useCallback } from 'react'
 import { cloneDeep } from 'lodash'
-import { SMSCampaign, EmailCampaign, TelegramCampaign, Campaign } from 'classes'
+import { createContext, useState, useCallback } from 'react'
+
+import type { ReactNode, Dispatch, SetStateAction } from 'react'
 
-import type { Dispatch, SetStateAction } from 'react'
+import { SMSCampaign, EmailCampaign, TelegramCampaign, Campaign } from 'classes'
 
 type PossibleCampaign = SMSCampaign | EmailCampaign | TelegramCampaign
 
@@ -18,7 +19,7 @@ const CampaignContextProvider = ({
   children,
   initialCampaign = new Campaign({}) as PossibleCampaign,
 }: {
-  children: React.ReactNode
+  children: ReactNode
   initialCampaign?: PossibleCampaign
 }) => {
   const [campaign, setCampaign] = useState(initialCampaign)
diff --git a/frontend/src/contexts/finish-later.modal.context.tsx b/frontend/src/contexts/finish-later.modal.context.tsx
index 58641c391..7d6da26ad 100644
--- a/frontend/src/contexts/finish-later.modal.context.tsx
+++ b/frontend/src/contexts/finish-later.modal.context.tsx
@@ -1,11 +1,12 @@
-import React, { createContext, useState, useContext } from 'react'
-import { ModalContext } from 'contexts/modal.context'
+import { createContext, useState, useContext } from 'react'
+
+import type { ReactNode, Dispatch, SetStateAction } from 'react'
 
-import type { Dispatch, SetStateAction } from 'react'
+import { ModalContext } from 'contexts/modal.context'
 
 interface ContextProps {
   handleFinishLater: () => void
-  finishLaterContent: React.ReactNode
+  finishLaterContent: ReactNode
   setFinishLaterContent: Dispatch<SetStateAction<any>>
 }
 
@@ -14,7 +15,7 @@ export const FinishLaterModalContext = createContext({} as ContextProps)
 const FinishLaterModalContextProvider = ({
   children,
 }: {
-  children: React.ReactNode
+  children: ReactNode
 }) => {
   const { setModalContent } = useContext(ModalContext)
   const [finishLaterContent, setFinishLaterContent] = useState(null)
diff --git a/frontend/src/contexts/modal.context.tsx b/frontend/src/contexts/modal.context.tsx
index 557b357ef..0c3082f2f 100644
--- a/frontend/src/contexts/modal.context.tsx
+++ b/frontend/src/contexts/modal.context.tsx
@@ -1,8 +1,9 @@
-import React, { createContext, useState } from 'react'
-import Modal from 'components/common/modal'
-import BodyWrapper from 'components/common/body-wrapper'
+import { createContext, useState } from 'react'
+
+import type { ReactNode, Dispatch, SetStateAction } from 'react'
 
-import type { Dispatch, SetStateAction } from 'react'
+import BodyWrapper from 'components/common/body-wrapper'
+import Modal from 'components/common/modal'
 
 const defaultValue = {
   modalContent: null as any,
@@ -18,8 +19,8 @@ const ModalContextProvider = ({
   initialModalContent = null,
   children,
 }: {
-  initialModalContent?: React.ReactNode
-  children?: React.ReactNode
+  initialModalContent?: ReactNode
+  children?: ReactNode
 }) => {
   const [modalContent, setModalContent] = useState(initialModalContent)
   const [modalTitle, setModalTitle] = useState('')
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index c56be1ea7..97614c24e 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -2,21 +2,23 @@
 import 'react-app-polyfill/stable'
 import 'locales'
 
-import React from 'react'
+import { i18n } from '@lingui/core'
+import { I18nProvider } from '@lingui/react'
+import * as Sentry from '@sentry/browser'
+
+import { StrictMode } from 'react'
 import ReactDOM from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
-import * as Sentry from '@sentry/browser'
-import { SENTRY_DSN, SENTRY_RELEASE, SENTRY_ENVIRONMENT } from 'config'
 
 // Locales
-import { i18n } from '@lingui/core'
 
 // Contexts
-import AuthContextProvider from 'contexts/auth.context'
-import { I18nProvider } from '@lingui/react'
 
 import App from './App'
 
+import { SENTRY_DSN, SENTRY_RELEASE, SENTRY_ENVIRONMENT } from 'config'
+import AuthContextProvider from 'contexts/auth.context'
+
 Sentry.init({
   dsn: SENTRY_DSN,
   release: SENTRY_RELEASE,
@@ -24,7 +26,7 @@ Sentry.init({
 })
 
 ReactDOM.render(
-  <React.StrictMode>
+  <StrictMode>
     <BrowserRouter>
       <I18nProvider i18n={i18n}>
         <AuthContextProvider>
@@ -32,6 +34,6 @@ ReactDOM.render(
         </AuthContextProvider>
       </I18nProvider>
     </BrowserRouter>
-  </React.StrictMode>,
+  </StrictMode>,
   document.getElementById('root')
 )
diff --git a/frontend/src/routes/protected.route.tsx b/frontend/src/routes/protected.route.tsx
index 9bd66086b..2671fb357 100644
--- a/frontend/src/routes/protected.route.tsx
+++ b/frontend/src/routes/protected.route.tsx
@@ -1,10 +1,10 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { Route, Redirect } from 'react-router-dom'
 
-import { AuthContext } from 'contexts/auth.context'
-
 import type { RouteProps } from 'react-router-dom'
 
+import { AuthContext } from 'contexts/auth.context'
+
 const ProtectedRoute = ({ children, ...rest }: RouteProps) => {
   const { isAuthenticated } = useContext(AuthContext)
 
diff --git a/frontend/src/services/auth.service.ts b/frontend/src/services/auth.service.ts
index 0c674b7fc..22dcc46dc 100644
--- a/frontend/src/services/auth.service.ts
+++ b/frontend/src/services/auth.service.ts
@@ -1,9 +1,10 @@
-import axios from 'axios'
-import { setGAUserId } from './ga.service'
 import * as Sentry from '@sentry/browser'
+import axios from 'axios'
 
 import type { AxiosError } from 'axios'
 
+import { setGAUserId } from './ga.service'
+
 async function getOtpWithEmail(email: string): Promise<void> {
   try {
     await axios.post('/auth/otp', {
diff --git a/frontend/src/services/campaign.service.ts b/frontend/src/services/campaign.service.ts
index 008640622..6c0e7f73a 100644
--- a/frontend/src/services/campaign.service.ts
+++ b/frontend/src/services/campaign.service.ts
@@ -1,4 +1,5 @@
 import axios from 'axios'
+
 import {
   Campaign,
   CampaignStats,
diff --git a/frontend/src/services/decrypt-mail.service.ts b/frontend/src/services/decrypt-mail.service.ts
index 71a282a9d..e9eb0cac2 100644
--- a/frontend/src/services/decrypt-mail.service.ts
+++ b/frontend/src/services/decrypt-mail.service.ts
@@ -1,10 +1,10 @@
 import axios from 'axios'
 
-import { hydrateTemplate } from './validate-csv.service'
-import { decryptData, hashPassword } from './crypto.service'
-
 import type { AxiosError } from 'axios'
 
+import { decryptData, hashPassword } from './crypto.service'
+import { hydrateTemplate } from './validate-csv.service'
+
 /**
  * This function should hash the password with salt in url
  * Use messageId and hashpassword to fetch encrypted message
diff --git a/frontend/src/services/email.service.ts b/frontend/src/services/email.service.ts
index 67a5632fb..126919d6a 100644
--- a/frontend/src/services/email.service.ts
+++ b/frontend/src/services/email.service.ts
@@ -1,6 +1,7 @@
 import axios from 'axios'
 
 import type { AxiosError } from 'axios'
+
 import type { EmailPreview } from 'classes'
 
 export async function saveTemplate(
diff --git a/frontend/src/services/ga.service.ts b/frontend/src/services/ga.service.ts
index b9af28c98..41ea81c5f 100644
--- a/frontend/src/services/ga.service.ts
+++ b/frontend/src/services/ga.service.ts
@@ -1,4 +1,5 @@
 import ReactGA from 'react-ga'
+
 import { GA_TRACKING_ID, GA_INITIALIZE_OPTIONS } from 'config'
 
 export const GA_USER_EVENTS = {
diff --git a/frontend/src/services/protect-csv.service.ts b/frontend/src/services/protect-csv.service.ts
index 8e7dd8fe0..14507434e 100644
--- a/frontend/src/services/protect-csv.service.ts
+++ b/frontend/src/services/protect-csv.service.ts
@@ -2,12 +2,12 @@ import Papa from 'papaparse'
 import { uuid } from 'uuidv4'
 
 import { encryptData, sha256 } from './crypto.service'
-import { hydrateTemplate } from './validate-csv.service'
 import {
   beginMultipartUpload,
   uploadPartWithPresignedUrl,
   completeMultiPartUpload,
 } from './upload.service'
+import { hydrateTemplate } from './validate-csv.service'
 
 const DEFAULT_CHUNK_SIZE = 10000000 // 10 Mb
 const MIN_UPLOAD_SIZE = 5000000 // 5Mb minimum needed for uploading each part
diff --git a/frontend/src/services/settings.service.ts b/frontend/src/services/settings.service.ts
index 69cc6d5f9..b834b67e1 100644
--- a/frontend/src/services/settings.service.ts
+++ b/frontend/src/services/settings.service.ts
@@ -1,6 +1,7 @@
 import axios from 'axios'
 
 import type { AxiosError } from 'axios'
+
 import type { ChannelType } from 'classes'
 
 export interface UserCredential {
diff --git a/frontend/src/services/sms.service.ts b/frontend/src/services/sms.service.ts
index 82609621c..5e812ff1a 100644
--- a/frontend/src/services/sms.service.ts
+++ b/frontend/src/services/sms.service.ts
@@ -1,15 +1,13 @@
 import axios from 'axios'
 
 import type { AxiosError } from 'axios'
-import type { SMSPreview } from 'classes'
 
-// Twilio states that total character limit for sms is 1600 characters
-// this defines a threshold at which we warn the users on their template length
-const SMS_WARN_EXCEED_CHARACTER_THRESHOLD = 1000
+import type { SMSPreview } from 'classes'
 
-export function exceedsCharacterThreshold(body: string): boolean {
-  return body.length > SMS_WARN_EXCEED_CHARACTER_THRESHOLD
-}
+// Twilio states that the total character limit for sms is 1600 characters.
+// This defines a threshold at which we warn the users on their template length.
+export const SMS_WARN_EXCEED_CHARACTER_THRESHOLD = 1000
+export const SMS_ERROR_EXCEED_CHARACTER_THRESHOLD = 1600
 
 export async function saveTemplate(
   campaignId: number,
diff --git a/frontend/src/services/telegram.service.ts b/frontend/src/services/telegram.service.ts
index cdff8c697..0ad84903e 100644
--- a/frontend/src/services/telegram.service.ts
+++ b/frontend/src/services/telegram.service.ts
@@ -1,7 +1,11 @@
 import axios from 'axios'
+import type { AxiosError } from 'axios'
 import Papa from 'papaparse'
 
-import type { AxiosError } from 'axios'
+// Telegram states that the total character limit is 4096.
+// This defines a threshold at which we warn the users on their template length.
+export const TELEGRAM_WARN_EXCEED_CHARACTER_THRESHOLD = 3000
+export const TELEGRAM_ERROR_EXCEED_CHARACTER_THRESHOLD = 4096
 
 interface PresignedUrlResponse {
   presignedUrl: string
@@ -146,7 +150,7 @@ export async function getPresignedUrl({
           resolve(
             delimiter === ',' &&
               // papaparse parses everything, including images, pdfs... This checks that at least one of the columns is sane
-              fields.some((field) => /^[a-zA-Z0-9\s-_'"/]+$/.test(field))
+              fields?.some((field) => /^[a-zA-Z0-9\s-_'"/]+$/.test(field))
           )
         },
         error: function () {
diff --git a/frontend/src/services/upload.service.ts b/frontend/src/services/upload.service.ts
index 70509eb32..72ce3ff8d 100644
--- a/frontend/src/services/upload.service.ts
+++ b/frontend/src/services/upload.service.ts
@@ -1,8 +1,9 @@
 import axios from 'axios'
+import type { AxiosError } from 'axios'
+
 import Papa from 'papaparse'
 import SparkMD5 from 'spark-md5'
 
-import type { AxiosError } from 'axios'
 import type { EmailPreview, SMSPreview } from 'classes'
 
 const MD5_CHUNK_SIZE = 5000000 // 5MB
@@ -179,7 +180,7 @@ export async function getMimeType(uploadedFile: File): Promise<string> {
           resolve(
             delimiter === ',' &&
               // papaparse parses everything, including images, pdfs... This checks that at least one of the columns is sane
-              fields.some((field) => /^[a-zA-Z0-9\s-_'"/]+$/.test(field))
+              fields?.some((field) => /^[a-zA-Z0-9\s-_'"/]+$/.test(field))
           )
         },
         error: function () {
diff --git a/frontend/src/services/validate-csv.service.ts b/frontend/src/services/validate-csv.service.ts
index 9d08a1db8..6e44c94ea 100644
--- a/frontend/src/services/validate-csv.service.ts
+++ b/frontend/src/services/validate-csv.service.ts
@@ -1,8 +1,9 @@
-import Papa from 'papaparse'
+import { i18n } from '@lingui/core'
+
 import { keys, difference, uniq } from 'lodash'
+import Papa from 'papaparse'
 import { TemplateClient, TemplateError } from 'postman-templating'
 
-import { i18n } from '@lingui/core'
 import { ALLOWED_IMAGE_SOURCES } from 'config'
 
 export interface ProtectedCsvInfo {
diff --git a/frontend/src/setupTests.ts b/frontend/src/setupTests.ts
index 48d4efb92..4eeb705cb 100644
--- a/frontend/src/setupTests.ts
+++ b/frontend/src/setupTests.ts
@@ -5,6 +5,11 @@ import { Crypto } from '@peculiar/webcrypto'
 import 'locales' // Locales necessary for I18nProvider
 import { server } from './test-utils'
 
+// Some tests take longer than the default 5s to run.
+// Hence, allow the test timeout to be configured.
+const TEST_TIMEOUT = +(process.env.REACT_APP_TEST_TIMEOUT ?? 20000)
+jest.setTimeout(TEST_TIMEOUT)
+
 // Mock WebCrypto APIs
 // Redeclare the type of `global` as it does not include the `crypto` prop
 interface Global extends NodeJS.Global {
diff --git a/frontend/src/test-utils/api/index.ts b/frontend/src/test-utils/api/index.ts
index 3735ca22c..90dd2f4ec 100644
--- a/frontend/src/test-utils/api/index.ts
+++ b/frontend/src/test-utils/api/index.ts
@@ -1,10 +1,13 @@
+import { union, difference } from 'lodash'
 import { rest } from 'msw'
-import type {
-  State,
-  EmailTemplate,
-  SMSTemplate,
-  TelegramTemplate,
-} from './interfaces'
+
+import {
+  TemplateClient,
+  XSS_EMAIL_OPTION,
+  XSS_SMS_OPTION,
+  XSS_TELEGRAM_OPTION,
+} from 'postman-templating'
+
 import {
   USER_EMAIL,
   TWILIO_CREDENTIAL,
@@ -15,13 +18,12 @@ import {
   INVALID_TWILIO_CREDENTIAL,
   INVALID_CSV_FILENAME,
 } from './constants'
-import {
-  TemplateClient,
-  XSS_EMAIL_OPTION,
-  XSS_SMS_OPTION,
-  XSS_TELEGRAM_OPTION,
-} from 'postman-templating'
-import { union, difference } from 'lodash'
+import type {
+  State,
+  EmailTemplate,
+  SMSTemplate,
+  TelegramTemplate,
+} from './interfaces'
 
 const smsTemplateClient = new TemplateClient({ xssOptions: XSS_SMS_OPTION })
 const emailTemplateClient = new TemplateClient({ xssOptions: XSS_EMAIL_OPTION })
@@ -118,6 +120,15 @@ function mockSettingsApis(state: State) {
         })
       )
     }),
+    rest.put('/settings/announcement-version', (req, res, ctx) => {
+      const { announcement_version } = req.body as {
+        announcement_version?: string
+      }
+      if (!announcement_version) {
+        return res(ctx.status(400))
+      }
+      return res(ctx.status(200))
+    }),
     rest.get('/settings/email/from', (_req, res, ctx) => {
       return res(
         ctx.status(200),
diff --git a/frontend/src/test-utils/index.tsx b/frontend/src/test-utils/index.tsx
index 129c96518..f08e43354 100644
--- a/frontend/src/test-utils/index.tsx
+++ b/frontend/src/test-utils/index.tsx
@@ -1,11 +1,13 @@
-import React from 'react'
-import { render as _render, RenderOptions } from '@testing-library/react'
-import { I18nProvider } from '@lingui/react'
 import { i18n } from '@lingui/core'
+import { I18nProvider } from '@lingui/react'
+import { render as _render, RenderOptions } from '@testing-library/react'
+
+import { rest } from 'msw'
+import { setupServer } from 'msw/node'
+import type { ReactElement } from 'react'
 import { MemoryRouter } from 'react-router-dom'
+
 import AuthContextProvider from 'contexts/auth.context'
-import { setupServer } from 'msw/node'
-import { rest } from 'msw'
 
 interface RouterOptions {
   initialIndex?: number
@@ -15,7 +17,7 @@ interface RouterOptions {
 // Wraps the component to be rendered with context providers
 // that are required globally
 const render = (
-  ui: React.ReactElement,
+  ui: ReactElement,
   options?: {
     router?: RouterOptions
     render?: Omit<RenderOptions, 'queries'>
diff --git a/frontend/src/tests/App.test.tsx b/frontend/src/tests/App.test.tsx
index 0b8982049..30e611fb4 100644
--- a/frontend/src/tests/App.test.tsx
+++ b/frontend/src/tests/App.test.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-import { mockCommonApis, server, within, render, screen } from 'test-utils'
 import App from '../App'
 
+import { mockCommonApis, server, within, render, screen } from 'test-utils'
+
 test('displays landing page when unauthenticated', async () => {
   // Setup
   const { handlers } = mockCommonApis()
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 239352fb3..aebafcc57 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -18,11 +18,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "baseUrl": "src",
     "sourceMap": true,
     "inlineSources": true,
-    "sourceRoot": "/",
+    "sourceRoot": "/"
   },
   "include": [
     "src"
diff --git a/modules/postman-templating/package-lock.json b/modules/postman-templating/package-lock.json
index 0282b8dc2..d1de20f7a 100644
--- a/modules/postman-templating/package-lock.json
+++ b/modules/postman-templating/package-lock.json
@@ -976,9 +976,9 @@
       }
     },
     "@types/cheerio": {
-      "version": "0.22.24",
-      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.24.tgz",
-      "integrity": "sha512-iKXt/cwltGvN06Dd6zwQG1U35edPwId9lmcSeYfcxSNvvNg4vysnFB+iBQNjj06tSVV7MBj0GWMQ7dwb4Z+p8Q==",
+      "version": "0.22.28",
+      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.28.tgz",
+      "integrity": "sha512-ehUMGSW5IeDxJjbru4awKYMlKGmo1wSSGUVqXtYwlgmUM8X1a0PZttEIm6yEY7vHsY/hh6iPnklF213G0UColw==",
       "requires": {
         "@types/node": "*"
       }
@@ -1056,9 +1056,9 @@
       "integrity": "sha512-Sm0NWeLhS2QL7NNGsXvO+Fgp7e3JLHCO6RS3RCnfjAnkw6Y1bsji/AGfISdQZDIR/AeOyzkrxRk9jBkl55zdJw=="
     },
     "@types/node": {
-      "version": "14.14.31",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.31.tgz",
-      "integrity": "sha512-vFHy/ezP5qI0rFgJ7aQnjDXwAMrG0KqqIH7tQG5PPv3BWBayOPIQNBjVc/P6hhdZfMx51REc6tfDNXHUio893g=="
+      "version": "14.14.42",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.42.tgz",
+      "integrity": "sha512-88QoObqn9WYIUMRzOx92GmSHmU3JCyukC2ulEv8tFjUG9VeV2FQ/cA7VQ1gi+rB/+gBMVvzVFcTnz8RdMDVIWw=="
     },
     "@types/normalize-package-data": {
       "version": "2.4.0",
diff --git a/modules/postman-templating/package.json b/modules/postman-templating/package.json
index 83105d167..03844da5b 100644
--- a/modules/postman-templating/package.json
+++ b/modules/postman-templating/package.json
@@ -35,10 +35,10 @@
     "ts-jest": "^26.1.0"
   },
   "dependencies": {
-    "@types/cheerio": "^0.22.24",
+    "@types/cheerio": "^0.22.28",
     "@types/lodash": "^4.14.168",
     "@types/mustache": "^4.1.1",
-    "@types/node": "^14.14.31",
+    "@types/node": "^14.14.42",
     "cheerio": "^1.0.0-rc.3",
     "lodash": "^4.17.21",
     "mustache": "^4.1.0",
diff --git a/package-lock.json b/package-lock.json
index d6ebb8de6..832a62ec4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "postmangovsg",
-  "version": "1.22.4",
+  "version": "1.23.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1570,12 +1570,6 @@
       "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
       "dev": true
     },
-    "typescript": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
-      "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
-      "dev": true
-    },
     "uuid": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
diff --git a/package.json b/package.json
index 2f4e8477e..758d42155 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "postmangovsg",
-  "version": "1.22.4",
+  "version": "1.23.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -49,7 +49,6 @@
     "husky": "^4.2.5",
     "lint-staged": "^10.2.6",
     "prettier": "^2.0.5",
-    "typescript": "^3.8.3",
     "wait-on": "^5.1.0"
   },
   "lint-staged": {
diff --git a/serverless/verify-backup/package-lock.json b/serverless/verify-backup/package-lock.json
index 3fc8edcd9..aa6a35bc9 100644
--- a/serverless/verify-backup/package-lock.json
+++ b/serverless/verify-backup/package-lock.json
@@ -482,9 +482,9 @@
       "dev": true
     },
     "@types/connect": {
-      "version": "3.4.33",
-      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.33.tgz",
-      "integrity": "sha512-2+FrkXY4zllzTNfJth7jOqEHC+enpLeGslEhpnTAkg21GkRrWV4SsAtqchtT4YS9/nODBU2/ZfsBY2X4J/dX7A==",
+      "version": "3.4.34",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.34.tgz",
+      "integrity": "sha512-ePPA/JuI+X0vb+gSWlPKOY0NdNAie/rPUqX2GUPpbZwiKTkSPhjXWuee47E4MtE54QVzGCQMQkAL6JhV2E1+cQ==",
       "requires": {
         "@types/node": "*"
       }
@@ -499,20 +499,20 @@
       }
     },
     "@types/express": {
-      "version": "4.17.8",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.8.tgz",
-      "integrity": "sha512-wLhcKh3PMlyA2cNAB9sjM1BntnhPMiM0JOBwPBqttjHev2428MLEB4AYVN+d8s2iyCVZac+o41Pflm/ZH5vLXQ==",
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.11.tgz",
+      "integrity": "sha512-no+R6rW60JEc59977wIxreQVsIEOAYwgCqldrA/vkpCnbD7MqTefO97lmoBe4WE0F156bC4uLSP1XHDOySnChg==",
       "requires": {
         "@types/body-parser": "*",
-        "@types/express-serve-static-core": "*",
+        "@types/express-serve-static-core": "^4.17.18",
         "@types/qs": "*",
         "@types/serve-static": "*"
       }
     },
     "@types/express-serve-static-core": {
-      "version": "4.17.13",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.13.tgz",
-      "integrity": "sha512-RgDi5a4nuzam073lRGKTUIaL3eF2+H7LJvJ8eUnCI0wA6SNjXc44DCmWNiTLs/AZ7QlsFWZiw/gTG3nSQGL0fA==",
+      "version": "4.17.19",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.19.tgz",
+      "integrity": "sha512-DJOSHzX7pCiSElWaGR8kCprwibCB/3yW6vcT8VG3P0SJjnv19gnWG/AZMfM60Xj/YJIp/YCaDHyvzsFVeniARA==",
       "requires": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -531,9 +531,9 @@
       "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
     },
     "@types/mime": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.3.tgz",
-      "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q=="
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
     },
     "@types/node": {
       "version": "14.11.2",
@@ -541,9 +541,9 @@
       "integrity": "sha512-jiE3QIxJ8JLNcb1Ps6rDbysDhN4xa8DJJvuC9prr6w+1tIh+QAbYyNF3tyiZNLDBIuBCf4KEcV2UvQm/V60xfA=="
     },
     "@types/qs": {
-      "version": "6.9.5",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.5.tgz",
-      "integrity": "sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ=="
+      "version": "6.9.6",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.6.tgz",
+      "integrity": "sha512-0/HnwIfW4ki2D8L8c9GVcG5I72s9jP5GSLVF0VIXDW00kmIpA6O33G7a8n59Tmh7Nz0WUC3rSb7PTY/sdW2JzA=="
     },
     "@types/range-parser": {
       "version": "1.2.3",
@@ -551,12 +551,12 @@
       "integrity": "sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA=="
     },
     "@types/serve-static": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.5.tgz",
-      "integrity": "sha512-6M64P58N+OXjU432WoLLBQxbA0LRGBCRm7aAGQJ+SMC1IMl0dgRVi9EFfoDcS2a7Xogygk/eGN94CfwU9UF7UQ==",
+      "version": "1.13.9",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.9.tgz",
+      "integrity": "sha512-ZFqF6qa48XsPdjXV5Gsz0Zqmux2PerNd3a/ktL45mHpa19cuMi/cL8tcxdAx497yRh+QtYPuofjT9oWw9P7nkA==",
       "requires": {
-        "@types/express-serve-static-core": "*",
-        "@types/mime": "*"
+        "@types/mime": "^1",
+        "@types/node": "*"
       }
     },
     "@typescript-eslint/eslint-plugin": {
diff --git a/serverless/verify-backup/package.json b/serverless/verify-backup/package.json
index c5e652e32..92032cc4f 100644
--- a/serverless/verify-backup/package.json
+++ b/serverless/verify-backup/package.json
@@ -26,7 +26,7 @@
     "@google-cloud/secret-manager": "^3.5.0",
     "@google-cloud/storage": "^5.8.3",
     "@sentry/cli": "^1.58.0",
-    "@types/express": "^4.17.8",
+    "@types/express": "^4.17.11",
     "body-parser": "^1.19.0",
     "convict": "^6.0.1",
     "dotenv": "^8.2.0",
diff --git a/worker/package-lock.json b/worker/package-lock.json
index daa709362..e327ffbea 100644
--- a/worker/package-lock.json
+++ b/worker/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "worker",
-  "version": "1.22.4",
+  "version": "1.23.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -945,6 +945,14 @@
       "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
       "dev": true
     },
+    "agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "requires": {
+        "debug": "4"
+      }
+    },
     "aggregate-error": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
@@ -1186,6 +1194,15 @@
       "resolved": "https://registry.npmjs.org/buffer-writer/-/buffer-writer-2.0.0.tgz",
       "integrity": "sha512-a7ZpuTZU1TRtnwyCNW3I5dc0wWNC3VR9S++Ewyk2HHZdrO3CQJqSpd+95Us590V6AL7JqUAH2IwZ/398PmNFgw=="
     },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2115,6 +2132,11 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
@@ -2175,6 +2197,16 @@
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
       "dev": true
     },
+    "get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
     "get-own-enumerable-property-symbols": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
@@ -2227,12 +2259,25 @@
         "type-fest": "^0.8.1"
       }
     },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
       "dev": true
     },
+    "has-symbols": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
+    },
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
@@ -2252,6 +2297,15 @@
       "resolved": "https://registry.npmjs.org/httpreq/-/httpreq-0.4.24.tgz",
       "integrity": "sha1-QzX/2CzZaWaKOUZckprGHWOTYn8="
     },
+    "https-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
+      "requires": {
+        "agent-base": "6",
+        "debug": "4"
+      }
+    },
     "human-signals": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
@@ -3351,6 +3405,11 @@
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
+    "object-inspect": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.2.tgz",
+      "integrity": "sha512-gz58rdPpadwztRrPjZE9DZLOABUpTGdcANUgOwBFO1C+HZZhePoP83M65WGDmbpwFYJSWqavbl4SgDn4k8RYTA=="
+    },
     "observable-fns": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/observable-fns/-/observable-fns-0.5.1.tgz",
@@ -3614,10 +3673,10 @@
     "postman-templating": {
       "version": "file:../modules/postman-templating",
       "requires": {
-        "@types/cheerio": "^0.22.24",
+        "@types/cheerio": "^0.22.28",
         "@types/lodash": "^4.14.168",
         "@types/mustache": "^4.1.1",
-        "@types/node": "^14.14.31",
+        "@types/node": "^14.14.42",
         "cheerio": "^1.0.0-rc.3",
         "lodash": "^4.17.21",
         "mustache": "^4.1.0",
@@ -4510,9 +4569,9 @@
           }
         },
         "@types/cheerio": {
-          "version": "0.22.24",
-          "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.24.tgz",
-          "integrity": "sha512-iKXt/cwltGvN06Dd6zwQG1U35edPwId9lmcSeYfcxSNvvNg4vysnFB+iBQNjj06tSVV7MBj0GWMQ7dwb4Z+p8Q==",
+          "version": "0.22.28",
+          "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.28.tgz",
+          "integrity": "sha512-ehUMGSW5IeDxJjbru4awKYMlKGmo1wSSGUVqXtYwlgmUM8X1a0PZttEIm6yEY7vHsY/hh6iPnklF213G0UColw==",
           "requires": {
             "@types/node": "*"
           }
@@ -4582,9 +4641,9 @@
           "integrity": "sha512-Sm0NWeLhS2QL7NNGsXvO+Fgp7e3JLHCO6RS3RCnfjAnkw6Y1bsji/AGfISdQZDIR/AeOyzkrxRk9jBkl55zdJw=="
         },
         "@types/node": {
-          "version": "14.14.31",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.31.tgz",
-          "integrity": "sha512-vFHy/ezP5qI0rFgJ7aQnjDXwAMrG0KqqIH7tQG5PPv3BWBayOPIQNBjVc/P6hhdZfMx51REc6tfDNXHUio893g=="
+          "version": "14.14.42",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.42.tgz",
+          "integrity": "sha512-88QoObqn9WYIUMRzOx92GmSHmU3JCyukC2ulEv8tFjUG9VeV2FQ/cA7VQ1gi+rB/+gBMVvzVFcTnz8RdMDVIWw=="
         },
         "@types/normalize-package-data": {
           "version": "2.4.0",
@@ -9870,9 +9929,12 @@
       }
     },
     "qs": {
-      "version": "6.9.6",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
-      "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ=="
+      "version": "6.10.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
+      "integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
     },
     "querystring": {
       "version": "0.2.0",
@@ -10123,6 +10185,16 @@
       "resolved": "https://registry.npmjs.org/shimmer/-/shimmer-1.2.1.tgz",
       "integrity": "sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw=="
     },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@@ -10563,19 +10635,20 @@
       }
     },
     "twilio": {
-      "version": "3.55.1",
-      "resolved": "https://registry.npmjs.org/twilio/-/twilio-3.55.1.tgz",
-      "integrity": "sha512-7S8658CaMKArxRgYr+UvZQTxbp7n3WzurjuQdNX2GwVO34vZzmiuAuYvldaJrZ2mSBgsXUSNVcofQT6tGHGRSg==",
+      "version": "3.58.0",
+      "resolved": "https://registry.npmjs.org/twilio/-/twilio-3.58.0.tgz",
+      "integrity": "sha512-ht+ixPbaJTeDEwxAEcF+m77vj/3m4wrbMpUZiLfhp5LTzuJDDDtzlplpyrVA9OtTLNtH0AdVpOgyo0W2eLtkZg==",
       "requires": {
         "axios": "^0.21.1",
         "dayjs": "^1.8.29",
+        "https-proxy-agent": "^5.0.0",
         "jsonwebtoken": "^8.5.1",
         "lodash": "^4.17.19",
         "q": "2.0.x",
         "qs": "^6.9.4",
         "rootpath": "^0.1.2",
         "scmp": "^2.1.0",
-        "url-parse": "^1.4.7",
+        "url-parse": "^1.5.0",
         "xmlbuilder": "^13.0.2"
       },
       "dependencies": {
diff --git a/worker/package.json b/worker/package.json
index 0407ce835..d2896b9ac 100644
--- a/worker/package.json
+++ b/worker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "worker",
-  "version": "1.22.4",
+  "version": "1.23.0",
   "description": "Workers for Postman",
   "main": "build/server.js",
   "scripts": {
@@ -40,7 +40,7 @@
     "telegraf": "^3.38.0",
     "threads": "^1.4.0",
     "tiny-worker": "^2.3.0",
-    "twilio": "^3.55.1",
+    "twilio": "^3.58.0",
     "winston": "^3.3.3"
   },
   "devDependencies": {