+
+
{title}
+ {mandatory &&
*mandatory
}
+
+
+
+ {!fileName && !isChallengeBelongToTopgearGroup && (
+
+ Drag and drop your
+ {fileExtensions.join(" or ")} file here.
+
+ )}
+ {!fileName && !isChallengeBelongToTopgearGroup &&
or}
+ {fileName &&
{fileName}
}
+ {_.isNumber(uploadProgress) && uploadProgress < 100 && (
+
Uploading: {uploadProgress}%
+ )}
+ {isChallengeBelongToTopgearGroup && (
+
+ {invalidUrl && (
+
* Invalid URL
+ )}
+
+
+ )}
+
+ {isChallengeBelongToTopgearGroup ? "Set URL" : "Pick a File"}
+
+
+ {!isChallengeBelongToTopgearGroup && (
+
{
+ const path = generateFilePath();
+ filestackRef.current
+ .picker({
+ accept: fileExtensions,
+ fromSources: [
+ "local_file_system",
+ "googledrive",
+ "dropbox",
+ "onedrive",
+ "github",
+ "url",
+ ],
+ maxSize: 500 * 1024 * 1024,
+ onFileUploadFailed: () => setDragged(false),
+ onFileUploadFinished: (file) => {
+ setDragged(false);
+ onSuccess(file, path);
+ },
+ startUploadingWhenMaxFilesReached: true,
+ storeTo: {
+ container: config.FILESTACK.SUBMISSION_CONTAINER,
+ path,
+ region: config.FILESTACK.REGION,
+ },
+ })
+ .open();
+ }}
+ onKeyPress={() => {
+ const path = generateFilePath();
+ filestackRef.current
+ .picker({
+ accept: fileExtensions,
+ fromSources: [
+ "local_file_system",
+ "googledrive",
+ "dropbox",
+ "onedrive",
+ "github",
+ "url",
+ ],
+ maxSize: 500 * 1024 * 1024,
+ onFileUploadFailed: () => setDragged(false),
+ onFileUploadFinished: (file) => {
+ setDragged(false);
+ onSuccess(file, path);
+ },
+ startUploadingWhenMaxFilesReached: true,
+ storeTo: {
+ container: config.FILESTACK.SUBMISSION_CONTAINER,
+ path,
+ region: config.FILESTACK.REGION,
+ },
+ })
+ .open();
+ }}
+ onDragEnter={() => setDragged(true)}
+ onDragLeave={() => setDragged(false)}
+ onDragOver={(e) => e.preventDefault()}
+ onDrop={(e) => {
+ setDragged(false);
+ e.preventDefault();
+ const path = generateFilePath();
+ const filename = e.dataTransfer.files[0].name;
+ if (!fileExtensions.some((ext) => filename.endsWith(ext))) {
+ fireErrorMessage("Wrong file type!", "");
+ return;
+ }
+ setFileName(e.dataTransfer.files[0].name);
+ setUploadProgress(0);
+ filestackRef.current
+ .upload(
+ e.dataTransfer.files[0],
+ {
+ onProgress: ({ totalPercent }) => {
+ setUploadProgress(totalPercent);
+ },
+ progressInterval: 1000,
+ },
+ {
+ container: config.FILESTACK.SUBMISSION_CONTAINER,
+ path,
+ region: config.FILESTACK.REGION,
+ }
+ )
+ .then((file) => onSuccess(file, path));
+ }}
+ role="tab"
+ styleName="drop-zone-mask"
+ tabIndex={0}
+ aria-label="Select file to upload"
+ />
+ )}
+
+
+ {error &&
{error}
}
+
+ );
+};
+
+FilePicker.defaultProps = {};
+
+FilePicker.propTypes = {
+ mandatory: PT.bool,
+ title: PT.string,
+ fileExtensions: PT.arrayOf(PT.string),
+ challengeId: PT.string,
+ error: PT.string,
+ setError: PT.func,
+ fileName: PT.string,
+ uploadProgress: PT.number,
+ setFileName: PT.func,
+ setUploadProgress: PT.func,
+ dragged: PT.bool,
+ setDragged: PT.func,
+ setFilestackData: PT.func,
+ userId: PT.number,
+ isChallengeBelongToTopgearGroup: PT.bool,
+};
+
+export default FilePicker;
diff --git a/src/containers/Submission/Submit/FilePicker/styles.scss b/src/containers/Submission/Submit/FilePicker/styles.scss
new file mode 100644
index 0000000..46d8319
--- /dev/null
+++ b/src/containers/Submission/Submit/FilePicker/styles.scss
@@ -0,0 +1,136 @@
+@import "~styles/variables";
+@import "~styles/mixins";
+
+.container {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ width: 33%;
+ margin-right: 2%;
+
+ .file-picker {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 20px;
+ background-color: #fcfcfc;
+ border-radius: 6px;
+ border: 1px dashed #c3c3c8;
+ min-height: 190px;
+ position: relative;
+
+ @include xs-to-sm {
+ min-height: 150px;
+ }
+
+ p {
+ font-size: 15px;
+ color: $tc-gray-60;
+ line-height: 25px;
+ flex-basis: 0;
+ flex-grow: 1;
+ text-align: center;
+
+ @include xs-to-sm {
+ font-size: 13px;
+ line-height: 15px;
+ }
+ }
+
+ span {
+ font-size: 12px;
+ color: #c3c3c8;
+ flex-basis: 0;
+ flex-grow: 1;
+ position: absolute;
+ left: 50%;
+ top: calc(50% - 12px);
+ }
+
+ .submission-input {
+ position: relative;
+ top: -4000px;
+ }
+
+ .file-name {
+ display: flex;
+ align-items: center;
+ }
+
+ .url-input-container {
+ width: 100%;
+ margin-top: 40px;
+
+ input.invalid {
+ border-color: #f22f24;
+ }
+
+ ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+ color: $tc-gray-40;
+ opacity: 1; /* Firefox */
+ }
+
+ ::-ms-input-placeholder { /* Microsoft Edge */
+ color: $tc-gray-40;
+ }
+
+ :-ms-input-placeholder { /* Internet Explorer 10-11 */
+ color: $tc-gray-40;
+ }
+ }
+
+ .invalid-url-message {
+ font-size: 12px;
+ color: #f22f24;
+ margin-bottom: 10px;
+ }
+ }
+
+ .file-picker.error {
+ border-color: #f22f24;
+ }
+
+ .file-picker.drag {
+ background-color: rgba(0, 0, 0, 0.1);
+ border-color: rgba(0, 0, 0, 0.4);
+ }
+
+ .desc {
+ font-size: 12px;
+ color: #37373c;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 4px;
+ }
+
+ .mandatory {
+ font-size: 10px;
+ color: #0b71e6;
+ }
+
+ @include xs-to-md {
+ button {
+ padding: 10px;
+ }
+ }
+
+ .error-container {
+ margin-top: 5px;
+ padding: 5px 13px;
+ background: #fff4f4;
+ border: 1px solid #ffd4d1;
+ color: #f22f24;
+ font-size: 13px;
+ border-radius: 2px;
+ font-style: italic;
+ }
+}
+
+.drop-zone-mask {
+ bottom: 0;
+ cursor: pointer;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+}
diff --git a/src/containers/Submission/Submit/Header/index.jsx b/src/containers/Submission/Submit/Header/index.jsx
new file mode 100644
index 0000000..946eef2
--- /dev/null
+++ b/src/containers/Submission/Submit/Header/index.jsx
@@ -0,0 +1,27 @@
+import React from "react";
+import PT from "prop-types";
+import { Link } from "@reach/router";
+import config from '../../../../../config'
+
+import "./styles.scss";
+
+const Header = ({ title, challengeId }) => {
+ return (
+
+ );
+};
+
+Header.defaultProps = {};
+
+Header.propTypes = {
+ title: PT.string,
+ challengeId: PT.string,
+};
+
+export default Header;
diff --git a/src/containers/Submission/Submit/Header/styles.scss b/src/containers/Submission/Submit/Header/styles.scss
new file mode 100644
index 0000000..35b525c
--- /dev/null
+++ b/src/containers/Submission/Submit/Header/styles.scss
@@ -0,0 +1,63 @@
+@import "~styles/variables";
+@import "~styles/mixins";
+
+.header {
+ @include roboto-regular;
+
+ display: flex;
+ padding: 30px 60px;
+ background-color: #fcfcfc;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid #f0f0f0;
+
+ @include xs-to-md {
+ padding: 30px 20px;
+ }
+
+ a {
+ font-size: 18px;
+ color: $tc-gray-60;
+ font-weight: 300;
+ display: flex;
+ align-items: center;
+
+ span {
+ font-size: 54px;
+ display: block;
+ position: relative;
+ top: -3px;
+ margin-right: 6px;
+ }
+ }
+
+ h1 {
+ font-weight: 300;
+ font-size: 24px;
+ color: #3d3d3d;
+ line-height: 30px;
+
+ @include xs-to-md {
+ font-size: 20px;
+ }
+
+ @include xs-to-sm {
+ font-size: 16px;
+ width: 80%;
+ line-height: 24px;
+ }
+
+ @media (max-width: 720px) {
+ font-size: 20px;
+ width: 80%;
+ text-align: right;
+ }
+ }
+
+ p {
+ @include xs-to-sm {
+ display: none;
+ }
+ }
+}
diff --git a/src/containers/Submission/Submit/SubmitForm/index.jsx b/src/containers/Submission/Submit/SubmitForm/index.jsx
new file mode 100644
index 0000000..8d2798b
--- /dev/null
+++ b/src/containers/Submission/Submit/SubmitForm/index.jsx
@@ -0,0 +1,321 @@
+/**
+ * components.page.challenge-details.Submit
+ *
Component
+ *
+ * Description:
+ * Page that is shown when a user is trying to submit a Submission.
+ * Allows user to upload Submission.zip file using a Filestack plugin.
+ */
+/* eslint-env browser */
+
+import React, { useEffect, useRef } from "react";
+import PT from "prop-types";
+import _ from "lodash";
+import { PrimaryButton } from "components/Buttons";
+import LoadingIndicator from "components/LoadingIndicator";
+import { COMPETITION_TRACKS } from "../../../../constants";
+import FilePicker from "../FilePicker";
+import Uploading from "../Uploading";
+import * as util from "../../../../utils/submission";
+
+import "./styles.scss";
+
+const SubmitForm = ({
+ challengeId,
+ challengeName,
+ phases,
+ track,
+ agreed,
+ filePickers,
+ submissionFilestackData,
+ userId,
+ groups,
+ communityList,
+ isCommunityListLoaded,
+
+ errorMsg,
+ isSubmitting,
+ submitDone,
+ uploadProgress,
+
+ resetForm,
+ setAgreed,
+ setFilePickerError,
+ setFilePickerFileName,
+ setFilePickerUploadProgress,
+ setFilePickerDragged,
+ setSubmissionFilestackData,
+ submit,
+}) => {
+ const propsRef = useRef();
+ propsRef.current = { resetForm };
+
+ useEffect(() => {
+ return () => {
+ propsRef.current.resetForm();
+ };
+ }, []);
+
+ const getFormData = () => {
+ const subType = util.getSubmissionDetail({ phases });
+
+ const formData = new FormData();
+ formData.append("type", subType);
+ formData.append("url", submissionFilestackData.fileUrl);
+ formData.append("memberId", userId || "");
+ formData.append("challengeId", challengeId);
+
+ if (submissionFilestackData.fileType) {
+ formData.append("fileType", submissionFilestackData.fileType);
+ }
+
+ return formData;
+ };
+
+ const reset = () => {
+ setAgreed(false);
+ resetForm();
+ };
+
+ /* User has clicked to go retry the submission after an error */
+ const retry = () => {
+ submit(getFormData());
+ };
+
+ /* User has clicked to go back to a new submission after a successful submit */
+ const back = () => {
+ resetForm();
+ };
+
+ /* User has clicked submit, prepare formData for the V2 API and start upload */
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ submit(getFormData());
+ };
+
+ const id = "file-picker-submission";
+
+ const isLoadingCommunitiesList = !isCommunityListLoaded;
+ const isChallengeBelongToTopgearGroup = util.isChallengeBelongToTopgearGroup(
+ { groups },
+ communityList
+ );
+
+ // Find the state for FilePicker with id of 1 or assign default values
+ const fpState = filePickers.find((fp) => fp.id === id) || {
+ id,
+ error: "",
+ fileName: "",
+ dragged: false,
+ uploadProgress: 0,
+ };
+
+ const isUploadingState = !(!isSubmitting && !submitDone && !errorMsg);
+ if (isUploadingState) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+};
+
+SubmitForm.defaultProps = {};
+
+SubmitForm.propTypes = {
+ challengeId: PT.string,
+ challengeName: PT.string,
+ phases: PT.arrayOf(PT.shape()),
+ track: PT.string,
+ agreed: PT.bool,
+ filePickers: PT.arrayOf(PT.shape()),
+ submissionFilestackData: PT.shape(),
+ userId: PT.number,
+ groups: PT.arrayOf(PT.shape()),
+ communityList: PT.arrayOf(PT.shape()),
+ isCommunityListLoaded: PT.bool,
+
+ errorMsg: PT.string,
+ isSubmitting: PT.bool,
+ submitDone: PT.bool,
+ uploadProgress: PT.number,
+
+ resetForm: PT.func,
+ setAgreed: PT.func,
+ setFilePickerError: PT.func,
+ setFilePickerFileName: PT.func,
+ setFilePickerUploadProgress: PT.func,
+ setFilePickerDragged: PT.func,
+ setSubmissionFilestackData: PT.func,
+ submit: PT.func,
+};
+
+export default SubmitForm;
diff --git a/src/containers/Submission/Submit/SubmitForm/styles.scss b/src/containers/Submission/Submit/SubmitForm/styles.scss
new file mode 100644
index 0000000..22cec4c
--- /dev/null
+++ b/src/containers/Submission/Submit/SubmitForm/styles.scss
@@ -0,0 +1,249 @@
+@import "~styles/variables";
+@import "~styles/mixins";
+
+.design-content {
+ @include roboto-regular;
+
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ background-color: white;
+ width: 100%;
+ padding: 5px 60px;
+
+ @include sm-to-md {
+ padding: 0;
+ }
+
+ .submission-hints {
+ margin-bottom: 2em;
+ font-size: 15px;
+ color: #37373c;
+
+ ol {
+ list-style: decimal;
+ margin-left: 15px;
+ margin-bottom: 1em;
+
+ li {
+ line-height: 20px;
+ }
+ }
+ }
+
+ .row {
+ display: flex;
+ padding: 30px 0;
+ margin-bottom: 70px;
+
+ @include sm-to-md {
+ margin: 0 20px;
+ }
+
+ @include sm {
+ flex-direction: column;
+ }
+ }
+
+ a {
+ color: $tc-dark-blue-110;
+ cursor: pointer;
+ }
+
+ .left {
+ padding-right: 33px;
+ border-right: 6px solid #f6f6f6;
+ max-width: 310px;
+
+ @include md-to-lg {
+ padding-right: 20px;
+ }
+
+ @include sm {
+ border-right: none;
+ max-width: 100%;
+ }
+
+ p,
+ a {
+ font-size: 13px;
+ color: $tc-gray-60;
+ font-style: italic;
+ max-width: 270px;
+ width: 270px;
+ line-height: 20px;
+ margin-bottom: 12px;
+
+ @media (min-width: 800px) and (max-width: 1000px) {
+ max-width: 220px;
+ width: 220px;
+ }
+
+ @media (min-width: 768px) and (max-width: 800px) {
+ max-width: 200px;
+ width: 200px;
+ }
+
+ @include sm {
+ max-width: 100%;
+ width: 100%;
+ }
+
+ @include sm-to-md {
+ margin-bottom: 25px;
+ }
+ }
+
+ h2 {
+ font-size: 15px;
+ line-height: 25px;
+ margin-bottom: 4px;
+ }
+ }
+
+ .right {
+ width: 100%;
+ margin-left: 60px;
+
+ @media (min-width: 768px) and (max-width: 1280px) {
+ margin-left: 30px;
+ }
+
+ @include sm {
+ margin-left: 0;
+ }
+
+ & > p {
+ font-size: 15px;
+ color: #37373c;
+ margin-bottom: 10px;
+ }
+
+ button {
+ height: 30px;
+ font-size: 13px;
+ line-height: 0;
+ }
+ }
+
+ .file-picker-container {
+ display: flex;
+ margin-bottom: 40px;
+
+ @include xs-to-md {
+ margin-bottom: 25px;
+ }
+
+ & > div {
+ margin-right: 16px;
+ }
+ }
+
+ .agree {
+ background-color: #fcfcfc;
+ border-top: 1px solid #f0f0f0;
+ border-bottom: 1px solid #f0f0f0;
+ margin-bottom: 30px;
+ padding: 30px 60px;
+ flex-direction: column;
+ align-items: center;
+
+ @include xs-to-lg {
+ margin: 0;
+ }
+
+ @include xs-to-md {
+ padding: 30px;
+ }
+
+ p {
+ font-size: 13px;
+ color: #37373c;
+ line-height: 24px;
+ margin-bottom: 50px;
+ }
+
+ a {
+ color: $tc-dark-blue-110;
+ }
+
+ .tc-checkbox-label {
+ line-height: 15px;
+ margin-left: 21px;
+ user-select: none;
+ cursor: pointer;
+ width: 195px;
+ font-size: 15px;
+ color: #3d3d3d;
+ }
+
+ .tc-checkbox {
+ height: 15px;
+ width: 210px;
+ margin: 0;
+ padding: 0;
+ vertical-align: bottom;
+ position: relative;
+ display: inline-block;
+ margin-bottom: 30px;
+
+ input[type=checkbox] {
+ visibility: visible;
+ position: absolute;
+ opacity: 0;
+ cursor: pointer;
+ height: 0;
+ width: 0;
+ }
+
+ label {
+ cursor: pointer;
+ position: absolute;
+ display: inline-block;
+ width: 15px;
+ height: 15px;
+ top: 0;
+ left: 0;
+ border-radius: $corner-radius;
+ box-shadow: none;
+ border: 1px solid $tc-gray-50;
+ background: $tc-gray-neutral-light;
+ transition: all 0.15s ease-in-out;
+
+ &::after {
+ opacity: 0;
+ content: '';
+ position: absolute;
+ width: 9px;
+ height: 5px;
+ background: transparent;
+ top: 3px;
+ left: 2px;
+ border: 3px solid $tc-dark-blue;
+ border-top: none;
+ border-right: none;
+ transform: rotate(-45deg);
+ transition: all 0.15s ease-in-out;
+ }
+
+ &:hover::after {
+ opacity: 0.3;
+ }
+ }
+
+ input[type=checkbox]:checked ~ label {
+ background: $tc-dark-blue;
+ border-color: $tc-dark-blue;
+ }
+
+ input[type=checkbox]:focus ~ label {
+ outline: 2px auto $tc-dark-blue;
+ }
+
+ input[type=checkbox]:checked + label::after {
+ opacity: 1;
+ border-color: $tc-white;
+ }
+ }
+ }
+}
diff --git a/src/containers/Submission/Submit/Uploading/index.jsx b/src/containers/Submission/Submit/Uploading/index.jsx
new file mode 100644
index 0000000..8c712dd
--- /dev/null
+++ b/src/containers/Submission/Submit/Uploading/index.jsx
@@ -0,0 +1,125 @@
+import React from "react";
+import PT from "prop-types";
+import { Link } from "@reach/router";
+import { PrimaryButton, DefaultButton as Button } from "components/Buttons";
+import { COMPETITION_TRACKS, CHALLENGES_URL } from "../../../../constants";
+import RobotHappy from "assets/icons/robot-happy.svg";
+import RobotSad from "assets/icons/robot-embarassed.svg";
+
+import "./styles.scss";
+
+const Uploading = ({
+ challengeId,
+ challengeName,
+ error,
+ isSubmitting,
+ submitDone,
+ reset,
+ retry,
+ track,
+ uploadProgress,
+ back,
+}) => {
+ return (
+
+
+ {isSubmitting &&
UPLOADING SUBMISSION FOR
}
+ {submitDone &&
SUBMISSION COMPLETED FOR
}
+ {error &&
ERROR SUBMITTING FOR
}
+
+ {isSubmitting &&
“{challengeName}”
}
+ {(submitDone || error) && (
+
+ {challengeName}
+
+ )}
+
+ {(isSubmitting || submitDone) &&
}
+ {error &&
}
+
+ {isSubmitting && (
+
+ Hey, your work is AWESOME! Please don't close this window while
+ I'm working, you'll lose all files!
+
+ )}
+ {isSubmitting && !submitDone && (
+
+ )}
+
+ {isSubmitting && !submitDone && (
+
+ Uploaded: {(100 * uploadProgress).toFixed()}%
+
+ )}
+ {error && (
+
+ Oh, that’s embarrassing! The file couldn’t be uploaded, I’m so
+ sorry.
+
+ )}
+
+ {error &&
{error}
}
+ {error && (
+
+
+
retry()}>Try Again
+
+ )}
+ {submitDone && !error && (
+
+ Thanks for participating! We’ve received your submission and will
+ send you an email shortly to confirm and explain what happens next.
+
+ )}
+ {submitDone && !error && (
+
+ {track === COMPETITION_TRACKS.DES ? (
+
+
+ back()}
+ >
+ View My Submissions
+
+
+ ) : (
+
+
+ back()}
+ >
+ Back to Challenge
+
+
+ )}
+
+ )}
+
+
+
+
+ {submissionPermitted ? (
+
+ ) : (
+
+
Submissions are not permitted at this time.
+
+ )}
+
+
+
+ Warning {`${1 + i} : ${warning.brief}`}
+
+
{warning.details}
+
+
+
+ {statusInfo.title}
+
+
+
{statusInfo.message}
+
+ {warnings}
+ {(hasStatusFailed || (hasStatusPassed && hasWarnings)) && (
+
+ Need more info on how to pass screening? Go to help to read Rules &
+ Policies.
+
+ )}
+
+
+
+ |
+ {submission.id}
+ {submission.legacySubmissionId}
+ |
+ {submission.type} |
+ {formatDate(submission.created)} |
+ {track === COMPETITION_TRACKS.DES && (
+
+ {submission.screening && (
+
+ )}
+ |
+ )}
+
+
+
+ {status !== CHALLENGE_STATUS.COMPLETED &&
+ track !== COMPETITION_TRACKS.DES && (
+
+ )}
+
+
+ |
+
+ );
+};
+
+SubmissionRow.defaultProps = {};
+
+SubmissionRow.propTypes = {
+ submission: PT.shape({}),
+ showScreeningDetails: PT.bool,
+ track: PT.string,
+ onDownload: PT.func,
+ onDelete: PT.func,
+ onShowDetails: PT.func,
+ status: PT.string,
+ allowDelete: PT.bool,
+};
+
+export default SubmissionRow;
diff --git a/src/containers/SubmissionManagement/MySubmissions/SubmissionRow/styles.scss b/src/containers/SubmissionManagement/MySubmissions/SubmissionRow/styles.scss
new file mode 100644
index 0000000..223b44d
--- /dev/null
+++ b/src/containers/SubmissionManagement/MySubmissions/SubmissionRow/styles.scss
@@ -0,0 +1,166 @@
+@import '~styles/variables';
+@import '~styles/mixins';
+
+$submission-space-10: $base-unit * 2;
+$submission-space-20: $base-unit * 4;
+$submission-space-25: $base-unit * 5;
+$submission-space-50: $base-unit * 10;
+
+.submission-row {
+ width: 100%;
+ font-size: 15px;
+ color: $tc-black;
+ font-weight: 400;
+
+ @include xs-to-sm {
+ display: block;
+ position: relative;
+ padding: 10px 0;
+ }
+
+ td {
+ vertical-align: middle;
+ padding: $submission-space-20;
+ background: $tc-white;
+ border-top: 1px solid $tc-gray-10;
+
+ @include xs-to-lg {
+ padding: $submission-space-10;
+ }
+
+ @include xs-to-sm {
+ display: block;
+ border: none;
+ }
+
+ &.no-submission {
+ line-height: $submission-space-20;
+ padding: $submission-space-50 $submission-space-20;
+ text-align: center;
+ }
+
+ &.dev-details {
+ padding-right: 60px;
+ }
+ }
+
+ .preview-col {
+ @include xs-to-sm {
+ float: left;
+ }
+
+ .design-img {
+ width: 90px;
+ height: 90px;
+
+ @include xs-to-sm {
+ width: 80px;
+ height: 80px;
+ }
+ }
+
+ .dev-img {
+ width: 40px;
+ height: 40px;
+ }
+ }
+
+ .id-col {
+ font-weight: 700;
+ }
+
+ .date-col {
+ color: $tc-gray-50;
+ font-weight: 400;
+ line-height: $submission-space-20;
+
+ @include xs-to-sm {
+ padding: 0 10px;
+ }
+ }
+
+ .legacy-id {
+ color: $tc-gray-50;
+ }
+
+ .status-col {
+ text-align: center;
+
+ button {
+ background: none;
+ border: none;
+ padding: 0;
+
+ .pending {
+ text-transform: initial;
+ font-size: 15px;
+ color: $tc-gray-40;
+ line-height: $submission-space-20;
+ }
+ }
+ }
+
+ .action-col {
+ text-align: center;
+ min-width: 120px;
+
+ @include xs-to-sm {
+ position: absolute;
+ right: 0;
+ top: 10px;
+ padding: 10px 0;
+ min-width: 100px;
+
+ svg {
+ width: 14px;
+ height: 14px;
+ }
+ }
+
+ path {
+ fill: $tc-gray-80;
+ }
+
+ .delete-icon {
+ margin: 0 0 0 24px;
+
+ @include xs-to-sm {
+ margin-left: 15px;
+ }
+ }
+
+ button {
+ background: none;
+ border: 0;
+ font-size: 0;
+ padding: 0;
+ line-height: 0;
+ display: inline-block;
+
+ &:focus {
+ outline: none;
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ }
+ }
+
+ .expand-icon {
+ transition: all 0ms;
+ margin-left: 24px;
+
+ @include xs-to-sm {
+ margin-left: 15px;
+ }
+
+ &.expanded {
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ .status-col button:focus {
+ outline: none;
+ }
+}
diff --git a/src/containers/SubmissionManagement/MySubmissions/SubmissionRowExpanded/index.jsx b/src/containers/SubmissionManagement/MySubmissions/SubmissionRowExpanded/index.jsx
new file mode 100644
index 0000000..bbd3d8c
--- /dev/null
+++ b/src/containers/SubmissionManagement/MySubmissions/SubmissionRowExpanded/index.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import PT from "prop-types";
+import ScreeningDetails from "../ScreeningDetails";
+
+import "./styles.scss";
+
+const SubmissionRowExpanded = ({
+ submission,
+ showScreeningDetails,
+ helpPageUrl,
+}) => {
+ return (
+
+ {showScreeningDetails && (
+ |
+
+ |
+ )}
+
+ );
+};
+
+SubmissionRowExpanded.defaultProps = {};
+
+SubmissionRowExpanded.propTypes = {
+ submission: PT.shape({}),
+ showScreeningDetails: PT.bool,
+ helpPageUrl: PT.string,
+};
+
+export default SubmissionRowExpanded;
diff --git a/src/containers/SubmissionManagement/MySubmissions/SubmissionRowExpanded/styles.scss b/src/containers/SubmissionManagement/MySubmissions/SubmissionRowExpanded/styles.scss
new file mode 100644
index 0000000..e65de41
--- /dev/null
+++ b/src/containers/SubmissionManagement/MySubmissions/SubmissionRowExpanded/styles.scss
@@ -0,0 +1,27 @@
+@import '~styles/variables';
+@import '~styles/mixins';
+
+$submission-space-10: $base-unit * 2;
+$submission-space-20: $base-unit * 4;
+$submission-space-25: $base-unit * 5;
+$submission-space-50: $base-unit * 10;
+
+.submission-row {
+ width: 100%;
+ font-size: 15px;
+ color: $tc-black;
+ font-weight: 400;
+
+ td {
+ vertical-align: middle;
+ padding: $submission-space-20;
+ background: $tc-white;
+ border-top: 1px solid $tc-gray-10;
+ line-height: 12px;
+
+ &.dev-details {
+ background: $tc-gray-neutral-light;
+ padding-right: 60px;
+ }
+ }
+}
diff --git a/src/containers/SubmissionManagement/MySubmissions/SubmissionTable/index.jsx b/src/containers/SubmissionManagement/MySubmissions/SubmissionTable/index.jsx
new file mode 100644
index 0000000..34c2dd8
--- /dev/null
+++ b/src/containers/SubmissionManagement/MySubmissions/SubmissionTable/index.jsx
@@ -0,0 +1,94 @@
+import React from "react";
+import PT from "prop-types";
+import moment from "moment";
+import { COMPETITION_TRACKS } from "../../../../constants";
+import SubmissionRow from "../SubmissionRow";
+import SubmissionRowExpanded from "../SubmissionRowExpanded";
+
+import "./styles.scss";
+
+const SubmissionTable = ({
+ submissions,
+ showDetails,
+ track,
+ onDelete,
+ helpPageUrl,
+ onDownload,
+ onShowDetails,
+ status,
+ submissionPhaseStartDate,
+}) => {
+ const headerRow = (
+
+ | ID |
+ Type |
+ Submission Date |
+ {track === COMPETITION_TRACKS.DES && (
+ Screening Status |
+ )}
+ Actions |
+
+ );
+
+ const emptyRow = (
+
+ |
+ You have no submission uploaded so far.
+ |
+
+ );
+
+ return (
+
+
+ {headerRow}
+
+ {!submissions || submissions.length === 0
+ ? emptyRow
+ : submissions.map((submission) => [
+ ,
+ ,
+ ])}
+
+
+
+ {/* Header */}
+
+
+
+ {currentPhase &&
{currentPhase.name}
}
+ {challengeStatus !== "Completed" ? (
+
+
+ {days > 0 && `${days}D`} {hours}H {minutes}M
+
+
left
+
+ ) : (
+
The challenge has ended
+ )}
+
+
+ {/* Table */}
+
+
+
Manage your submissions
+ {isDesign && currentPhase && (
+
+ {currentPhase.name} Ends:{" "}
+ {end.format("dddd MM/DD/YY hh:mm A")}
+
+ )}
+
+ {isDesign && (
+
+ We always recommend to download your submission to check you
+ uploaded the correct zip files and also verify the photos and fonts
+ declarations. If you don’t want to see a submission, simply delete.
+ If you have a new submission, use the Upload Submission button to
+ add one at the top of the list.
+
+ )}
+ {isDevelop && (
+
+ We always recommend to download your submission to check you
+ uploaded the correct zip file. If you don’t want to see the
+ submission, simply delete. If you have a new submission, use the
+ Upload Submission button to overwrite the current one.
+
+ )}
+ {isLoadingOrDeleting &&
}
+ {!isLoadingOrDeleting && (
+
+ onDownload(challengeType, submissionId)
+ }
+ onShowDetails={onShowDetails}
+ />
+ )}
+
+ {/* Footer */}
+ {now.isBefore(submissionEndDate) && (
+
+
+ {!isDevelop || !submissions || submissions.length === 0
+ ? "Add Submission"
+ : "Update Submission"}
+
+
+ )}
+
+
+ Are you sure you want to delete submission{" "}
+ {toBeDeletedId}?
+
+
+ This will permanently remove all files from our servers and can’t be
+ undone. You’ll have to upload all the files again in order to restore
+ it.
+
+
+
+
+
+
+
+
+
+
+ {!isEmpty && (
+
+ )}
+ {showModal && modal}
+
+