fix(mrf): workflow email UI cleanup (#7215)

* fix: mrf workflow email UI cleanup

* chore: update button formatting

* fix: more fixes

* chore: change port for react-email-preview to 4242

* chore: add comment on email defaults

* fix: potentially unsafe external url

package.json

@@ -63,6 +63,8 @@
     "@opengovsg/formsg-sdk": "^0.12.0-alpha.1",
     "@opengovsg/myinfo-gov-client": "^4.1.2",
     "@opengovsg/sgid-client": "^2.0.0",
+    "@react-email/components": "^0.0.15",
+    "@react-email/render": "^0.0.12",
     "@sentry/browser": "^7.51.2",
     "@sentry/integrations": "^6.19.7",
     "@stablelib/base64": "^1.0.1",
@@ -194,6 +196,7 @@
     "@types/promise-retry": "^1.1.3",
     "@types/promise-timeout": "^1.3.0",
     "@types/puppeteer-core": "^5.4.0",
+    "@types/react": "^18.2.73",
     "@types/sns-validator": "^0.3.1",
     "@types/spark-md5": "^3.0.2",
     "@types/supertest": "^2.0.12",

react-email-preview/README.md

@@ -0,0 +1,27 @@
+# React Email Preview
+
+A live preview right in your browser so you don't need to keep sending real emails during development.
+
+## Getting Started
+
+First, install the dependencies:
+
+```sh
+npm install
+# or
+yarn
+```
+
+Then, run the development server:
+
+```sh
+npm run dev
+# or
+yarn dev
+```
+
+Open [localhost:4242](http://localhost:4242) with your browser to see the result.
+
+## License
+
+MIT License

react-email-preview/emails/MrfWorkflowEmail.tsx

@@ -0,0 +1,3 @@
+import { MrfWorkflowEmail } from '../../src/app/views/templates/MrfWorkflowEmail'
+
+export default MrfWorkflowEmail