Implemented invitation logic. Implemented play list method. Mild refactoring.

src/emails/invite.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { brandColours } from '../utilities/helpers';
+import { size } from 'lodash';
+
+interface InviteEmailProperties {
+    playerName: string;
+    inviteCode: string;
+}
+
+export const InviteEmail = (props: InviteEmailProperties) => (
+    <div
+        style={{
+            width: '100%',
+            height: '100%',
+            background: brandColours.light,
+        }}
+    >
+        <table
+            width="100%"
+            border={0}
+            cellSpacing={0}
+            cellPadding={0}
+        >
+            <tr>
+                <td align="center">
+                    <div
+                        style={{
+                            padding: '20px',
+                            borderRadius: '20px',
+                            background: brandColours.white,
+                            margin: '50px',
+                            color: brandColours.dark,
+                            maxWidth: '450px',
+                        }}
+                    >
+                        <h1>You're in, {props.playerName}!</h1>
+                        <p>
+                            You've been invited to join {process.env.PRODUCT_NAME}, please click the button below to
+                            finish signing up.
+                        </p>
+                        <p
+                            style={{
+                                marginBottom: '40px',
+                            }}
+                        >
+                            <a
+                                style={{
+                                    display: 'inline-block',
+                                    padding: '10px 20px',
+                                    borderRadius: '5px',
+                                    background: brandColours.primary,
+                                    textDecoration: 'none',
+                                    color: brandColours.light,
+                                    fontSize: '20px',
+                                    fontWeight: 'bold',
+                                }}
+                                href={`${process.env.ROOT_URL}/invitation/${props.inviteCode}`}
+                            >
+                                Join {process.env.PRODUCT_NAME}
+                            </a>
+                        </p>
+                        <p
+                            style={{
+                                fontSize: '0.8rem',
+                                opacity: '80%',
+                            }}
+                        >
+                            If above button does not work, copy the link below into a new browser tab:
+                            <br />
+                            {`${process.env.ROOT_URL}/invitation/${props.inviteCode}`}
+                        </p>
+                    </div>
+                </td>
+            </tr>
+        </table>
+    </div>
+);