🔀 Dev -> Master

.babelrc

@@ -1,7 +1,4 @@
 {
-  "presets": ["next/babel", "@emotion/babel-preset-css-prop"],
-  "plugins": [
-    ["emotion"],
-    ["@babel/plugin-proposal-decorators", { "legacy": true }]
-  ]
+  "presets": ["next/babel"],
+  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
 }

.eslintrc.js

@@ -22,6 +22,7 @@ module.exports = {
       2,
       { extensions: ['.js', '.jsx', '.ts', '.tsx'] }
     ],
+    'react/button-has-type': 'off',
     'react/react-in-jsx-scope': 'off',
     'react/prop-types': 0,
     'import/no-extraneous-dependencies': [
@@ -44,7 +45,8 @@ module.exports = {
       'always',
       { exceptAfterSingleLine: true }
     ],
-    'no-underscore-dangle': 'off'
+    'no-underscore-dangle': 'off',
+    'import/no-cycle': 'off'
   },
   globals: {
     React: 'writable'

.gitignore

@@ -23,3 +23,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+#tailwind
+/styles/index.css

.prettierignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+.env*
+yarn.lock
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.vscode/extensions.json

@@ -1,8 +1,8 @@
 {
   "recommendations": [
     "esbenp.prettier-vscode",
-    "muhajirframe.vscode-react-emotion",
     "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
     "msjsdiag.debugger-for-chrome"
   ]
 }

.vscode/settings.json

@@ -9,5 +9,6 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "editor.formatOnSave": true
+  // "editor.formatOnSave": true,
+  "editor.tabSize": 2
 }

README.md

@@ -1,6 +1,6 @@
 # Start the project
 
-Make user you have [VS Code](https://code.visualstudio.com/), [Node.js](https://nodejs.org/en/), [Yarn](https://yarnpkg.com/lang/en/), [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), and [VScode React Emotion Snippets](https://marketplace.visualstudio.com/items?itemName=muhajirframe.vscode-react-emotion) installed before starting the project.
+Make sure you have [VS Code](https://code.visualstudio.com/), [Node.js](https://nodejs.org/en/), [Yarn](https://yarnpkg.com/lang/en/), [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), and [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) installed before starting the project.
 
 ## Instruction
 
@@ -27,3 +27,11 @@ Install [Debugger for Microsoft Edge](https://marketplace.visualstudio.com/items
 > Edge: full
 
 on VS Code debug panel
+
+# Running Cypress tests
+
+Make sure your dev server is open.
+
+```
+yarn cypress open
+```

commons/components/AuthModal.tsx

@@ -0,0 +1,131 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import { observer } from 'mobx-react-lite';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useAuthenticationController } from '../../components/authentication';
+import { RootStore } from '../../interfaces/Commons';
+import rootContext from '../context.root';
+import { getEnvName } from '../firebase';
+import Button from './Button';
+import Card from './Card';
+import Modal from './Modal';
+import TextSpinner from './TextSpinner';
+
+const AuthModal: React.FC = observer(() => {
+  const [loginError, setLoginError] = useState<string | null>(null);
+  const [activeSignInProcesses, setActiveSignInProcesses] = useState<number>(0);
+  const { authModalStore } = useContext<RootStore>(rootContext);
+  const authenticationController = useAuthenticationController();
+
+  const login = useCallback(async e => {
+    e.preventDefault();
+    setActiveSignInProcesses(x => x + 1);
+    try {
+      await authenticationController.loginWithEventpop();
+    } catch (error) {
+      setLoginError(`Failed! ${error}`);
+    } finally {
+      setActiveSignInProcesses(x => x - 1);
+    }
+  }, []);
+
+  const login2 = useCallback(async e => {
+    e.preventDefault();
+    setActiveSignInProcesses(x => x + 1);
+    try {
+      // eslint-disable-next-line no-alert
+      const referenceCode = prompt('Ticket reference code (6 digits code)');
+      if (!referenceCode) {
+        throw new Error('No reference code provided');
+      }
+      // eslint-disable-next-line no-alert
+      const phoneNumber = prompt('Your phone number registered with Eventpop');
+      if (!phoneNumber) {
+        throw new Error('No phone number provided');
+      }
+      await authenticationController.loginWithEventpopInfo(
+        referenceCode,
+        phoneNumber
+      );
+    } catch (error) {
+      setLoginError(`Failed! ${error}`);
+    } finally {
+      setActiveSignInProcesses(x => x - 1);
+    }
+  }, []);
+
+  const loginTest = useCallback(async (e, uid: string) => {
+    e.preventDefault();
+    setActiveSignInProcesses(x => x + 1);
+    try {
+      await authenticationController.loginAsTestUser(uid);
+    } catch (error) {
+      setLoginError(`Failed! ${error}`);
+    } finally {
+      setActiveSignInProcesses(x => x - 1);
+    }
+  }, []);
+
+  const [isTestEnvironment, setIsTestEnvironment] = useState(false);
+
+  useEffect(() => {
+    setIsTestEnvironment(getEnvName() === 'test');
+  }, []);
+
+  const testUsers = isTestEnvironment
+    ? ['test01', 'test02', 'test03', 'test04', 'test05']
+    : [];
+
+  return (
+    <Modal noCloseButton modalStore={authModalStore} className='px-4 my-4'>
+      <section aria-label='Authentication modal'>
+        <Card className='flex flex-col items-center'>
+          <p className='font-extrabold text-bg mb-4'>
+            To continue, Please log in
+          </p>
+          <p className='text-base leading-tight'>
+            Make your meal selection and meet other people through our
+            networking activity to win special prizes.
+          </p>
+          <Button
+            onClick={e => login2(e)}
+            type='button'
+            className='mt-12 mb-2 py-3 px-10 font-bg bg-yellow-dark text-black rounded'
+          >
+            Sign in with your ticket code and phone number
+          </Button>
+          - or -
+          <Button
+            onClick={login}
+            type='button'
+            className={`py-2 my-2 px-10 font-bg border bg-white border-yellow-dark text-black rounded ${
+              activeSignInProcesses > 0 ? 'opacity-50' : ''
+            }`}
+          >
+            {activeSignInProcesses > 0 ? (
+              <>
+                Please wait… <TextSpinner />
+              </>
+            ) : (
+              'Sign in with Eventpop (Chrome/Safari)'
+            )}
+          </Button>
+          {testUsers.map(uid => {
+            return (
+              <Button
+                key={uid}
+                onClick={e => loginTest(e, uid)}
+                type='button'
+                className='mt-2 py-2 px-8 font-bg border bg-white border-yellow-dark text-black rounded'
+              >
+                Sign in as test user {uid}
+              </Button>
+            );
+          })}
+          {loginError}
+        </Card>
+      </section>
+    </Modal>
+  );
+});
+
+export default AuthModal;

commons/components/Button.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Onclick } from '../../interfaces/Commons';
+
+interface Props {
+  className?: string;
+  children?: React.ReactNode;
+  type: 'submit' | 'button' | 'reset';
+  onClick?: Onclick;
+  disabled?: boolean;
+  'aria-label'?: string;
+}
+
+const Button: React.FC<Props> = ({
+  children,
+  className,
+  type,
+  onClick,
+  disabled,
+  'aria-label': ariaLabel
+}) => {
+  return (
+    <button
+      disabled={disabled}
+      className={className}
+      type={type}
+      onClick={onClick}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

commons/components/Card.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface PropTypes {
+  className?: string;
+  noPadding?: boolean;
+  'aria-labelledby'?: string;
+  'aria-label'?: string;
+  'data-testid'?: string;
+  tabIndex?: number;
+}
+
+const Card: React.FC<PropTypes> = ({
+  children,
+  className,
+  noPadding,
+  tabIndex,
+  'aria-labelledby': ariaLabelledby,
+  'aria-label': ariaLabel,
+  'data-testid': dataTestid
+}) => {
+  return (
+    <div
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      data-testid={dataTestid}
+      tabIndex={tabIndex}
+      className={`bg-white rounded-lg ${
+        noPadding ? 'p-0' : 'p-4'
+      } ${className}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Card;

commons/components/CloseButton.tsx

@@ -0,0 +1,11 @@
+import React, { MouseEvent } from 'react';
+
+interface PropTypes {
+  onClick: (e: MouseEvent) => void;
+}
+
+const CloseButton: React.FC<PropTypes> = ({ onClick }) => {
+  return <button onClick={onClick}>df</button>;
+};
+
+export default CloseButton;

commons/components/ErrorMessage.tsx

@@ -0,0 +1,13 @@
+export default function ErrorMessage(props: { error?: any }) {
+  const { error } = props;
+  return (
+    <div
+      className='rounded p-4'
+      style={{ background: 'white', color: 'red', border: '4px solid red' }}
+    >
+      <strong>Something went wrong!</strong>
+      <br />
+      {String(error)}
+    </div>
+  );
+}

commons/components/Loading.tsx

@@ -0,0 +1,16 @@
+const Loading: React.FC<{ message: string; color?: 'dark' | 'light' }> = ({
+  message,
+  color = 'dark'
+}) => {
+  return (
+    <div
+      className={`text-xl text-center p-4 ${
+        color === 'dark' ? 'text-gray-700' : 'text-white'
+      }`}
+    >
+      {message}…
+    </div>
+  );
+};
+
+export default Loading;