+
+ )
+ }
+
+
+ );
+ }
+ case ACCESS_DENIED_REASON.NOT_AUTHORIZED:
+ return (
+
+ You must be authenticated to access this page.
+
+
+
+ Log In Here
+
+
+
+
+ );
+ case ACCESS_DENIED_REASON.HAVE_NOT_SUBMITTED_TO_THE_CHALLENGE:
+ return (
+ You are not authorized to access this page.
+ {children}
+
+ Back to the challenge
+
+ );
+ default:
+ return ;
+ }
+};
+
+AccessDenied.defaultProps = {
+ cause: ACCESS_DENIED_REASON.NOT_AUTHENTICATED,
+ redirectLink: "",
+ children: null,
+};
+
+AccessDenied.propTypes = {
+ cause: PT.oneOf(_.toArray(ACCESS_DENIED_REASON)),
+ redirectLink: PT.string,
+ children: PT.node,
+};
+
+export default AccessDenied;
diff --git a/src/apps/earn/src/components/AccessDenied/styles.module.scss b/src/apps/earn/src/components/AccessDenied/styles.module.scss
new file mode 100644
index 000000000..41e351b8f
--- /dev/null
+++ b/src/apps/earn/src/components/AccessDenied/styles.module.scss
@@ -0,0 +1,48 @@
+@import '@earn/styles/variables';
+@import '@earn/styles/mixins';
+
+.access-denied {
+ @include tc-body-lg;
+
+ padding-top: 100px;
+ text-align: center;
+ width: 100%;
+}
+
+.msg {
+ padding-top: 48px;
+
+ a {
+ cursor: pointer;
+ }
+}
+
+.joinNow {
+ &,
+ &:hover,
+ &:visited {
+ color: $tc-light-blue;
+ text-decoration: underline;
+ }
+}
+
+.policy {
+ font-weight: bold;
+ margin-right: 24px;
+
+ &,
+ &:hover,
+ &:visited {
+ color: $tc-light-blue;
+ text-decoration: underline;
+ }
+}
+
+.copyright {
+ @include roboto-regular;
+
+ color: $tc-gray-60;
+ font-size: 12pt;
+ margin-top: 128px;
+ text-transform: uppercase;
+}
diff --git a/src/apps/earn/src/components/Avatar/index.jsx b/src/apps/earn/src/components/Avatar/index.jsx
new file mode 100644
index 000000000..9e74f6467
--- /dev/null
+++ b/src/apps/earn/src/components/Avatar/index.jsx
@@ -0,0 +1,12 @@
+import { ReactComponent as DefaultUserAvatar } from '@earn/assets/images/default-user-avatar.svg';
+import React from 'react';
+import { themr } from 'react-css-super-themr';
+import ProtoAvatar from '../ProtoAvatar';
+
+import theme from './style.scss';
+
+function Avatar(props) {
+ return You have not submitted to this challenge
+
+
+ );
+};
+
+export default Banner;
diff --git a/src/apps/earn/src/components/Banner/styles.scss b/src/apps/earn/src/components/Banner/styles.scss
new file mode 100644
index 000000000..45711f32c
--- /dev/null
+++ b/src/apps/earn/src/components/Banner/styles.scss
@@ -0,0 +1,65 @@
+@import "@earn/styles/variables";
+@import "@earn/styles/mixins";
+
+.banner {
+ display: flex;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+
+ width: 100%;
+ background: linear-gradient(90deg, $tc-blue 0%, $tc-turquoise 100%);
+ border-radius: 10px;
+ margin-bottom: 22px;
+ color: $tc-white;
+ padding-left: 28px;
+
+ .header {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ flex-direction: row;
+ align-items: center;
+ @include roboto-bold;
+ line-height: 25px;
+ min-height: 50px;
+ font-size: 20px;
+ text-transform: uppercase;
+ }
+
+ .chevron {
+ margin-right: 20px;
+ margin-top: 5px;
+
+ &.expanded {
+ transform: rotate(180deg);
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ font-size: 16px;
+ margin-bottom: 24px;
+ width: 85%;
+
+ h3 {
+ font-size: 15px;
+ font-weight: bold;
+ margin-top: 15px;
+ }
+
+ p {
+ margin-top: 15px;
+ }
+
+ a {
+ text-decoration: underline;
+ }
+
+ }
+}
diff --git a/src/apps/earn/src/components/Checkbox/index.jsx b/src/apps/earn/src/components/Checkbox/index.jsx
new file mode 100644
index 000000000..6325007b5
--- /dev/null
+++ b/src/apps/earn/src/components/Checkbox/index.jsx
@@ -0,0 +1,65 @@
+/**
+ * Checkbox component.
+ */
+import React, { useRef, useState, useEffect } from "react";
+import PT from "prop-types";
+import _ from "lodash";
+
+import config from "../../config";
+import iconCheckL from "../../assets/icons/checkmark-large.png";
+import iconCheckM from "../../assets/icons/checkmark-medium.png";
+import iconCheckS from "../../assets/icons/checkmark-small.png";
+
+import styles from "./styles.scss";
+import { styled as styledCss } from "@earn/utils";
+const styled = styledCss(styles)
+
+function Checkbox({ checked, onChange, size, errorMsg }) {
+ const [checkedInternal, setCheckedInternal] = useState(checked);
+ let sizeStyle = size === "lg" ? "lgSize" : null;
+ const imgSrc =
+ size === "xs" ? iconCheckS : size === "sm" ? iconCheckM : iconCheckL;
+ if (!sizeStyle) {
+ sizeStyle = size === "xs" ? "xsSize" : "smSize";
+ }
+ const delayedOnChange = useRef(
+ _.debounce((q, cb) => cb(q), config.GUIKIT.DEBOUNCE_ON_CHANGE_TIME) // eslint-disable-line no-undef
+ ).current;
+
+ useEffect(() => {
+ setCheckedInternal(checked);
+ }, [checked]);
+
+ return (
+
+ );
+}
+
+Checkbox.defaultProps = {
+ checked: false,
+ onChange: () => {},
+ size: "sm",
+ errorMsg: "",
+};
+
+Checkbox.propTypes = {
+ checked: PT.bool,
+ onChange: PT.func,
+ size: PT.oneOf(["xs", "sm", "lg"]),
+ errorMsg: PT.string,
+};
+
+export default Checkbox;
diff --git a/src/apps/earn/src/components/Checkbox/styles.scss b/src/apps/earn/src/components/Checkbox/styles.scss
new file mode 100644
index 000000000..1f78c4dcf
--- /dev/null
+++ b/src/apps/earn/src/components/Checkbox/styles.scss
@@ -0,0 +1,117 @@
+@import "@earn/styles/variables";
+@import "@earn/styles/GUIKit/default";
+
+/* Create a custom checkbox */
+.checkmark {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: $tc-white;
+ border: 1px solid $gui-kit-gray-30;
+
+ &.haveError {
+ border: 2px solid #ef476f;
+ }
+
+ /* Create the checkmark/indicator (hidden when not checked) */
+ .after {
+ position: absolute;
+ display: none;
+ left: 50%;
+ top: 50%;
+ }
+}
+
+/* The container */
+.container {
+ display: block;
+ position: relative;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ // lg size
+ &.lgSize {
+ width: 25px;
+ height: 25px;
+
+ .checkmark {
+ width: 25px;
+ height: 25px;
+ border-radius: 4px;
+
+ .after {
+ margin-left: -9px;
+ margin-top: -7px;
+ }
+ }
+ }
+
+ // sm size
+ &.smSize {
+ width: 20px;
+ height: 20px;
+
+ .checkmark {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+
+ .after {
+ margin-left: -7px;
+ margin-top: -6px;
+ }
+ }
+ }
+
+ // xs size
+ &.xsSize {
+ width: 15px;
+ height: 15px;
+
+ .checkmark {
+ width: 15px;
+ height: 15px;
+ border-radius: 2px;
+
+ .after {
+ margin-left: -6px;
+ margin-top: -4px;
+ }
+ }
+ }
+
+ /* Hide the browser's default checkbox */
+ input {
+ position: absolute;
+ opacity: 0;
+ cursor: pointer;
+ height: 0;
+ width: 0;
+
+ /* When the checkbox is checked, add a blue background */
+ &:checked ~ .checkmark {
+ background-color: $gui-kit-level-2;
+ border: none;
+ box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
+
+ /* Show the checkmark when checked */
+ .after {
+ display: block;
+ }
+ }
+ }
+}
+
+.errorMessage {
+ display: block;
+
+ @include errorMessage;
+
+ position: absolute;
+ white-space: nowrap;
+ margin: 35px 0 0 0;
+ color: #ef476f;
+}
diff --git a/src/apps/earn/src/components/CurrencyField/index.jsx b/src/apps/earn/src/components/CurrencyField/index.jsx
new file mode 100644
index 000000000..f5779ec3c
--- /dev/null
+++ b/src/apps/earn/src/components/CurrencyField/index.jsx
@@ -0,0 +1,152 @@
+import { useCallback, useEffect, useState } from "react";
+import PT from "prop-types";
+import debounce from "lodash/debounce";
+import {
+ convertNumberStringToNumber,
+ integerFormatter,
+ isValidNumberString,
+} from "../../utils/gigs/formatting";
+import { DEBOUNCE_ON_CHANGE_TIME } from "../../constants/index.js";
+import { PAYMENT_MAX_VALUE } from "../../constants/gigs";
+import { isNumber } from "lodash";
+
+import styles from "./styles.scss";
+
+/**
+ * Displays currency input field.
+ *
+ * @param {Object} props component properties
+ * @param {string} [props.className] class name added to root element
+ * @param {string} props.currency currency abbreviation
+ * @param {string} props.id id for input element
+ * @param {string} props.label field label
+ * @param {number} [props.maxValue] maximum value
+ * @param {number} [props.minValue] minimum value
+ * @param {string} props.name name for input element
+ * @param {(v: string) => void} props.onChange function called when input value changes
+ * @param {(v: number) => void} props.onCommit function called after some delay
+ * when input value changes and it is valid
+ * @param {boolean} [props.required] whether the field required non-empty value
+ * @param {*} props.value input value
+ * @returns {JSX.Element}
+ */
+const CurrencyField = ({
+ className,
+ currency,
+ id,
+ label,
+ maxValue,
+ minValue,
+ name,
+ rangeError,
+ onError,
+ onChange,
+ onCommit,
+ required = false,
+ value,
+}) => {
+ const [error, setError] = useState("");
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ const checkValue = useCallback(
+ debounce(
+ (value) => {
+ if (!value) {
+ if (required) {
+ setError("Required");
+ }
+ return;
+ }
+ let num = convertNumberStringToNumber(value);
+ let min = isNumber(minValue)
+ ? minValue
+ : convertNumberStringToNumber(minValue);
+ let max = isNumber(maxValue)
+ ? maxValue
+ : convertNumberStringToNumber(maxValue);
+ if (isValidNumberString(value) && !isNaN(num)) {
+ setError("");
+ if (num < min || num > max) {
+ onError("Please put in a valid range.");
+ } else {
+ onError("");
+ onCommit(num);
+ }
+ } else {
+ onError("");
+ setError("Invalid format");
+ }
+ },
+ DEBOUNCE_ON_CHANGE_TIME,
+ { leading: false }
+ ),
+ [maxValue, minValue, onCommit, required]
+ );
+
+ const onChangeValue = useCallback(
+ (event) => {
+ let value = event.target.value;
+ setError("");
+ if (value && isValidNumberString(value)) {
+ let num = convertNumberStringToNumber(value);
+ if (!isNaN(num)) {
+ value = integerFormatter.format(num);
+ }
+ }
+ onChange(value);
+ checkValue(value);
+ },
+ [checkValue, onChange]
+ );
+
+ useEffect(() => {
+ checkValue(value);
+ }, [checkValue, value]);
+
+ return (
+
+ {header}
+
+ setIsExpanded(!isExpanded)}
+ >
+
+
+ )}
+ + Welcome to the Beta version of the new Challenge Listings. During + this Beta phase, we will be fine-tuning the platform based on + feedback we receive from you, our community members. +
+NOTE THAT THIS IS NOT THE FINAL VERSION OF THE SITE.
++ You may encounter occasional broken links or error messages. If so, + please let us know! This is what the Beta phase is intended for, and + your feedback will enable us to greatly improve the new site.{" "} +
+You can click on the Feedback button on page.
+Thank you!
+
+ {label && (
+
+ )}
+
+ );
+};
+
+CurrencyField.defaultProps = {
+ maxValue: PAYMENT_MAX_VALUE,
+ minValue: 0,
+};
+
+CurrencyField.propTypes = {
+ className: PT.string,
+ currency: PT.string.isRequired,
+ id: PT.string.isRequired,
+ label: PT.string,
+ rangeError: PT.string,
+ maxValue: PT.oneOfType([PT.number, PT.string]),
+ minValue: PT.oneOfType([PT.number, PT.string]),
+ name: PT.string.isRequired,
+ onError: PT.func.isRequired,
+ onChange: PT.func.isRequired,
+ onCommit: PT.func.isRequired,
+ required: PT.bool,
+ value: PT.oneOfType([PT.number, PT.string]).isRequired,
+};
+
+export default CurrencyField;
diff --git a/src/apps/earn/src/components/CurrencyField/styles.scss b/src/apps/earn/src/components/CurrencyField/styles.scss
new file mode 100644
index 000000000..fed55f9d9
--- /dev/null
+++ b/src/apps/earn/src/components/CurrencyField/styles.scss
@@ -0,0 +1,70 @@
+@import '../../styles/variables';
+@import '../../styles/mixins';
+
+.container {
+ position: relative;
+}
+
+.label {
+ z-index: 2;
+ position: absolute;
+ left: 9px;
+ top: 0;
+ padding: 0 7px;
+ font-size: 12px;
+ line-height: 12px;
+ transform: translateY(-50%);
+ color: $control-border-color;
+ background-color: #fff;
+}
+
+.field {
+ z-index: 1;
+ position: relative;
+ display: flex;
+ align-items: center;
+ border: 1px solid $control-border-color;
+ border-radius: $control-border-radius;
+ height: 40px;
+ background-color: #fff;
+
+ &.has-errors {
+ border-color: #EF476F;
+ }
+}
+
+input.input {
+ flex: 1 1 0;
+ margin: 0;
+ border: none !important;
+ padding: 8px 0 8px 15px;
+ height: 22px;
+ font-size: 14px;
+ line-height: 22px;
+ background: none;
+ outline: none !important;
+ box-shadow: none !important;
+ width: 60px;
+}
+
+.currency {
+ flex: 0 0 auto;
+ margin: 0 10px 0 6px;
+ font-size: 13px;
+ line-height: 22px;
+ text-transform: uppercase;
+ color: $control-border-color;
+}
+
+.error {
+ display: block;
+ position: absolute;
+ left: 15px;
+ top: 100%;
+ margin-top: 2px;
+ font-size: 12px;
+ line-height: 17px;
+ white-space: nowrap;
+ color: $body-color;
+ background-color: #fff;
+}
diff --git a/src/apps/earn/src/components/DateRangePicker/DateInput/index.jsx b/src/apps/earn/src/components/DateRangePicker/DateInput/index.jsx
new file mode 100644
index 000000000..881715340
--- /dev/null
+++ b/src/apps/earn/src/components/DateRangePicker/DateInput/index.jsx
@@ -0,0 +1,167 @@
+import React, { useRef, useEffect, useState } from "react";
+import PT from "prop-types";
+import _ from "lodash";
+import TextInput from "../../TextInput";
+import { ReactComponent as CalendarIcon} from "../../../assets/icons/icon-calendar.svg";
+
+import styles from "./styles.scss";
+import { styled as styledCss } from "../../../utils";
+const styled = styledCss(styles)
+
+const DateInput = ({
+ id,
+ isStartDateActive,
+ startDateString,
+ onStartDateChange,
+ onStartDateFocus,
+ isEndDateActive,
+ endDateString,
+ onEndDateChange,
+ onEndDateFocus,
+ error,
+ onClickCalendarIcon,
+ onStartEndDateChange,
+ placeholder,
+ enterToSubmit,
+}) => {
+ const ref = useRef(null);
+ const [focused, setFocused] = useState(false);
+
+ let rangeText;
+ if (startDateString && endDateString) {
+ rangeText = `${startDateString} - ${endDateString}`;
+ } else {
+ rangeText = `${startDateString}${endDateString}`;
+ }
+
+ useEffect(() => {
+ const inputElement = ref.current.querySelector("input");
+ const onFocus = () => setFocused(true);
+ const onBlur = () => setFocused(false);
+
+ inputElement.addEventListener("focus", onFocus);
+ inputElement.addEventListener("blur", onBlur);
+
+ return () => {
+ inputElement.removeEventListener("focus", onFocus);
+ inputElement.removeEventListener("blur", onBlur);
+ };
+ }, []);
+
+ const latestPropsRef = useRef(null);
+ latestPropsRef.current = { onStartDateFocus, onEndDateFocus };
+
+ useEffect(() => {
+ const inputElement = ref.current.querySelector("input");
+
+ let caretPosition;
+ if (inputElement.selectionDirection === "forward") {
+ caretPosition = inputElement.selectionEnd;
+ } else {
+ caretPosition = inputElement.selectionStart;
+ }
+
+ if (caretPosition < 14) {
+ latestPropsRef.current.onStartDateFocus();
+ } else {
+ latestPropsRef.current.onEndDateFocus();
+ }
+ }, [focused]);
+
+ const onChangeRangeText = (value) => {
+ let [newStartDateString = "", newEndDateString = ""] = value
+ .trim()
+ .split("-");
+ newStartDateString = newStartDateString.trim();
+ newEndDateString = newEndDateString.trim();
+
+ if (
+ newStartDateString !== startDateString &&
+ newEndDateString !== endDateString
+ ) {
+ const event = {
+ startDateString: newStartDateString,
+ endDateString: newEndDateString,
+ };
+ onStartEndDateChange(event);
+ onStartDateFocus();
+ } else if (newStartDateString !== startDateString) {
+ onStartDateFocus();
+ onStartDateChange(newStartDateString);
+ } else if (newEndDateString !== endDateString) {
+ onEndDateFocus();
+ onEndDateChange(newEndDateString);
+ if (newEndDateString === "") {
+ onStartDateFocus();
+ }
+ }
+ };
+
+ const onChangeRangeTextDebounced = useRef(_.debounce((f) => f(), 1000));
+
+ const onClickIcon = (event) => {
+ event.stopPropagation();
+
+ const inputElement = ref.current.querySelector("input");
+
+ let caretPosition;
+ if (inputElement.selectionDirection === "forward") {
+ caretPosition = inputElement.selectionEnd;
+ } else {
+ caretPosition = inputElement.selectionStart;
+ }
+
+ if (caretPosition < 14 || caretPosition === rangeText.length) {
+ onClickCalendarIcon("start");
+ } else {
+ onClickCalendarIcon("end");
+ }
+ };
+
+ const label = startDateString ? "From" : endDateString ? "To" : "From";
+
+ return (
+
+
+ {currency}
+ {error && {error}}
+
+
+
+ );
+};
+
+DateInput.propTypes = {
+ id: PT.string,
+ isStartDateActive: PT.bool,
+ startDateString: PT.string,
+ onStartDateChange: PT.func,
+ onStartDateFocus: PT.func,
+ isEndDateActive: PT.bool,
+ endDateString: PT.string,
+ onEndDateChange: PT.func,
+ onEndDateFocus: PT.func,
+ error: PT.string,
+ onClickCalendarIcon: PT.func,
+ onStartEndDateChange: PT.func,
+ placeholder: PT.string,
+};
+
+export default DateInput;
diff --git a/src/apps/earn/src/components/DateRangePicker/DateInput/styles.scss b/src/apps/earn/src/components/DateRangePicker/DateInput/styles.scss
new file mode 100644
index 000000000..8b637437b
--- /dev/null
+++ b/src/apps/earn/src/components/DateRangePicker/DateInput/styles.scss
@@ -0,0 +1,49 @@
+@import "@earn/styles/variables";
+@import "@earn/styles/mixins";
+
+.container {
+ &.isError {
+ input {
+ border: 1px solid $tc-level-5;
+ }
+
+ .errorHint {
+ display: block;
+ color: $tc-level-5;
+ font-size: 12px;
+ padding: 4px 0;
+ height: 20px;
+ }
+ }
+}
+
+.date-range-input {
+ margin-top: -12px;
+ font-size: $font-size-sm;
+
+ @include textinput-show-label;
+}
+
+.input-group {
+ position: relative;
+
+ .icon {
+ position: absolute;
+ top: 22px;
+ right: 14px;
+ display: block;
+ cursor: pointer;
+ appearance: none;
+ background: none;
+ border: none;
+ padding: 0;
+ }
+
+ input {
+ padding-right: 46px !important;
+ }
+}
+
+.errorHint {
+ display: none;
+}
diff --git a/src/apps/earn/src/components/DateRangePicker/helpers.js b/src/apps/earn/src/components/DateRangePicker/helpers.js
new file mode 100644
index 000000000..df745c982
--- /dev/null
+++ b/src/apps/earn/src/components/DateRangePicker/helpers.js
@@ -0,0 +1,136 @@
+import { useEffect, useRef, useState } from "react";
+import moment from "moment";
+
+/**
+ * Check whether the dates are same
+ * @param {Date} date1.
+ * @param {Date} date2.
+ * @return {boolean}
+ */
+export function isSameDay(date1, date2) {
+ if (!date1 || !date2) return false;
+ return moment(date1).isSame(moment(date2), "day");
+}
+
+/**
+ * Check whether the date1 is occur before date2
+ * @param {Date} date1.
+ * @param {Date} date2.
+ * @return {boolean}
+ */
+export function isBeforeDay(date1, date2) {
+ if (!date1 || !date2) return false;
+ return moment(date1).isBefore(moment(date2), "day");
+}
+
+/**
+ * Check whether the date1 is occur after date2
+ * @param {Date} date1.
+ * @param {Date} date2.
+ * @return {boolean}
+ */
+export function isAfterDay(date1, date2) {
+ if (!date1 || !date2) return false;
+ return moment(date1).isAfter(moment(date2), "day");
+}
+
+const staticRangeHandler = {
+ range: {},
+ isSelected(range) {
+ const definedRange = this.range();
+ return (
+ isSameDay(range.startDate, definedRange.startDate) &&
+ isSameDay(range.endDate, definedRange.endDate)
+ );
+ },
+};
+
+/**
+ * Create defined date ranges
+ * @return {object[]} list of defined ranges
+ */
+export function createStaticRanges() {
+ const today = moment();
+ const endOfToday = today.set({
+ hour: 23,
+ minute: 59,
+ second: 59,
+ millisecond: 999,
+ });
+ const pastWeek = endOfToday.clone().subtract(1, "week");
+ const pastMonth = endOfToday.clone().subtract(1, "month");
+ const past6Months = endOfToday.clone().subtract(6, "month");
+ const pastYear = endOfToday.clone().subtract(1, "year");
+
+ const ranges = [
+ {
+ label: "Past Week",
+ range: () => ({
+ startDate: pastWeek.startOf("day").toDate(),
+ endDate: endOfToday.toDate(),
+ }),
+ },
+ {
+ label: "Past Month",
+ range: () => ({
+ startDate: pastMonth.startOf("day").toDate(),
+ endDate: endOfToday.toDate(),
+ }),
+ },
+ {
+ label: "Past 6 Months",
+ range: () => ({
+ startDate: past6Months.startOf("day").toDate(),
+ endDate: endOfToday.toDate(),
+ }),
+ },
+ {
+ label: "Past Year",
+ range: () => ({
+ startDate: pastYear.startOf("day").toDate(),
+ endDate: endOfToday.toDate(),
+ }),
+ },
+ ];
+
+ return ranges.map((range) => ({ ...staticRangeHandler, ...range }));
+}
+
+/**
+ * React hook for checking if the click is from outside the reference
+ * @param {boolean} initialIsVisible true if visible and false if hidden
+ */
+export function useComponentVisible(initialIsVisible) {
+ const [isComponentVisible, setIsComponentVisible] = useState(
+ initialIsVisible
+ );
+ const ref = useRef(null);
+
+ const handleHideDropdown = (event) => {
+ if (event.key === "Escape") {
+ setIsComponentVisible(false);
+ }
+ };
+
+ const handleClickOutside = (event) => {
+ if (ref.current && !ref.current.contains(event.target)) {
+ setIsComponentVisible(false);
+ }
+ };
+
+ useEffect(() => {
+ document.addEventListener("keydown", handleHideDropdown, true);
+ document.addEventListener("click", handleClickOutside, true);
+ return () => {
+ document.removeEventListener("keydown", handleHideDropdown, true);
+ document.removeEventListener("click", handleClickOutside, true);
+ };
+ });
+
+ return { ref, isComponentVisible, setIsComponentVisible };
+}
+
+export default {
+ useComponentVisible,
+ createStaticRanges,
+};
diff --git a/src/apps/earn/src/components/DateRangePicker/index.jsx b/src/apps/earn/src/components/DateRangePicker/index.jsx
new file mode 100644
index 000000000..fbd840320
--- /dev/null
+++ b/src/apps/earn/src/components/DateRangePicker/index.jsx
@@ -0,0 +1,651 @@
+import React, { useState, useEffect } from "react";
+import moment from "moment";
+import { DateRangePicker as ReactDateRangePicker } from "react-date-range";
+import PropTypes from "prop-types";
+
+import styles from "./style.scss";
+import { styled as styledCss } from "@earn/utils";
+
+import DateInput from "./DateInput";
+
+import {
+ useComponentVisible,
+ createStaticRanges,
+ isSameDay,
+ isAfterDay,
+ isBeforeDay,
+} from "./helpers";
+
+const styled = styledCss(styles);
+
+function DateRangePicker(props) {
+ const { id, range, onChange, placeholder, enterToSubmit = false } = props;
+
+ const [rangeString, setRangeString] = useState({
+ startDateString: "",
+ endDateString: "",
+ });
+ const [activeDate, setActiveDate] = useState(null);
+ const [preview, setPreview] = useState(null);
+ const [focusedRange, setFocusedRange] = useState([0, 0]);
+ const [errors, setErrors] = useState({
+ startDate: undefined,
+ endDate: undefined,
+ });
+
+ const {
+ ref: calendarRef,
+ isComponentVisible,
+ setIsComponentVisible,
+ } = useComponentVisible(false);
+
+ const isStartDateFocused = focusedRange[1] === 0;
+ const isEndDateFocused = focusedRange[1] === 1;
+
+ useEffect(() => {
+ setRangeString({
+ startDateString: range.startDate
+ ? moment(range.startDate).format("MMM D, YYYY")
+ : "",
+ endDateString: range.endDate
+ ? moment(range.endDate).format("MMM D, YYYY")
+ : "",
+ });
+ }, [range]);
+
+ /**
+ * Handle end date change on user input
+ * After user input the end date via keyboard, validate it then update the range state
+ * @param {Object} e Input Event.
+ */
+ const onEndDateChange = (value) => {
+ const endDateString = value;
+ const endDate = moment(endDateString, "MMM D, YYYY", true);
+ const startDate = moment(rangeString.startDateString, "MMM D, YYYY", true);
+
+ if (endDate.isValid() && isBeforeDay(endDate, startDate)) {
+ setErrors({
+ ...errors,
+ endDate: "Range Error",
+ });
+ } else if (endDate.isValid()) {
+ onChange({
+ endDate: endDate.toDate(),
+ startDate: range.startDate,
+ });
+
+ setErrors({
+ ...errors,
+ endDate: "",
+ });
+
+ setRangeString({
+ ...rangeString,
+ endDateString: endDate.format("MMM D, YYYY"),
+ });
+ } else if (endDateString === "") {
+ onChange({
+ endDate: null,
+ startDate: range.startDate,
+ });
+
+ setErrors({
+ ...errors,
+ endDate: "",
+ });
+ } else {
+ setErrors({
+ ...errors,
+ endDate: "Invalid End Date Format",
+ });
+
+ setRangeString({
+ ...rangeString,
+ endDateString,
+ });
+ }
+ };
+
+ /**
+ * Handle start date change on user input
+ * After user input the start date via keyboard, validate it then update the range state
+ * @param {Object} e Input Event.
+ */
+ const onStartDateChange = (value) => {
+ const startDateString = value;
+ const startDate = moment(startDateString, "MMM D, YYYY", true);
+ const endDate = moment(rangeString.endDateString, "MMM D, YYYY", true);
+
+ if (
+ startDate.isValid() &&
+ endDate.isValid() &&
+ isAfterDay(startDate, endDate)
+ ) {
+ setErrors({
+ ...errors,
+ startDate: "Range Error",
+ });
+ } else if (startDate.isValid()) {
+ onChange({
+ endDate: range.endDate,
+ startDate: startDate.toDate(),
+ });
+
+ setErrors({
+ ...errors,
+ startDate: "",
+ });
+
+ setRangeString({
+ ...rangeString,
+ startDateString: startDate.format("MMM D, YYYY"),
+ });
+ } else if (startDateString === "") {
+ onChange({
+ endDate: range.endDate,
+ startDate: null,
+ });
+
+ setErrors({
+ ...errors,
+ startDate: "",
+ });
+ } else {
+ setErrors({
+ ...errors,
+ startDate: "Invalid Start Date Format",
+ });
+
+ setRangeString({
+ ...rangeString,
+ startDateString,
+ });
+ }
+ };
+
+ const onStartEndDateChange = ({ startDateString, endDateString }) => {
+ const startDate = moment(startDateString, "MMM D, YYYY", true);
+ const endDate = moment(endDateString, "MMM D, YYYY", true);
+
+ if (
+ startDate.isValid() &&
+ endDate.isValid() &&
+ isBeforeDay(endDate, startDate)
+ ) {
+ setErrors({
+ ...errors,
+ endDate: "Range Error",
+ });
+ } else if (startDate.isValid() && endDate.isValid()) {
+ onChange({
+ endDate: endDate.toDate(),
+ startDate: startDate.toDate(),
+ });
+ setErrors({
+ startDate: "",
+ endDate: "",
+ });
+ } else if (startDate.isValid()) {
+ onChange({
+ endDate: null,
+ startDate: startDate.toDate(),
+ });
+ setErrors({
+ ...errors,
+ endDate: "Invalid End Date Format",
+ });
+ } else if (endDate.isValid()) {
+ onChange({
+ endDate: endDate.toDate(),
+ startDate: null,
+ });
+ setErrors({
+ ...errors,
+ startDate: "Invalid Start Date Format",
+ });
+ } else if (startDateString === "" && endDateString === "") {
+ onChange({
+ endDate: null,
+ startDate: null,
+ });
+ setErrors({
+ startDate: "",
+ endDate: "",
+ });
+ } else if (startDateString === "") {
+ onChange({
+ endDate: endDate.toDate(),
+ startDate: null,
+ });
+
+ setErrors({
+ ...errors,
+ startDate: "",
+ });
+ } else if (endDateString === "") {
+ onChange({
+ endDate: null,
+ startDate: startDate.toDate(),
+ });
+
+ setErrors({
+ ...errors,
+ endDate: "",
+ });
+ } else {
+ onChange({
+ endDate: null,
+ startDate: null,
+ });
+ setErrors({
+ startDate: "Invalid Start Date Format",
+ endDate: "Invalid End Date Format",
+ });
+ }
+ };
+
+ /**
+ * Trigger to open calendar modal on calendar icon in start date input
+ */
+ const onIconClickStartDate = () => {
+ const calendarIcon = document.querySelector(id);
+ if (calendarIcon) {
+ calendarIcon.blur();
+ }
+ setFocusedRange([0, 0]); // set current focused input to start date
+ setActiveDate(null);
+ setIsComponentVisible(true);
+ setPreview(null);
+ };
+
+ /**
+ * Trigger to open calendar modal on calendar icon in end date input
+ */
+ const onIconClickEndDate = () => {
+ const calendarIcon = document.querySelector(id);
+ if (calendarIcon) {
+ calendarIcon.blur();
+ }
+ setFocusedRange([0, 1]); // set current focused input to end date
+ setActiveDate(null);
+ setIsComponentVisible(true);
+ setPreview(null);
+ };
+
+ const onReset = (presetRange) => {
+ let newStartDate;
+ let newEndDate;
+
+ if (presetRange) {
+ newStartDate = presetRange.startDate;
+ newEndDate = presetRange.endDate;
+ }
+
+ setFocusedRange([0, 0]);
+
+ setErrors({
+ startDate: "",
+ endDate: "",
+ });
+
+ setRangeString({
+ startDateString: newStartDate
+ ? moment(newStartDate).format("MMM D, YYYY")
+ : "",
+ endDateString: newEndDate ? moment(newEndDate).format("MMM D, YYYY") : "",
+ });
+
+ onChange({
+ startDate: newStartDate ? moment(newStartDate) : null,
+ endDate: newEndDate ? moment(newEndDate) : null,
+ });
+
+ setIsComponentVisible(false);
+ };
+
+ /**
+ * Event handler on date selection changes
+ * @param {Object} newRange nnew range that has endDate and startDate data
+ */
+ const onDateRangePickerChange = (newRange) => {
+ let newEndDate = newRange.endDate;
+ let newStartDate = newRange.startDate;
+ const isUseKeyPress = focusedRange[0] !== 0;
+
+ if (isUseKeyPress) {
+ setFocusedRange([0, focusedRange[1]]);
+ }
+
+ let shouldCloseCalendar = true;
+ let shouldOpenNextCalendar = false;
+
+ // User is active on start date calendar modal
+ if (
+ isStartDateFocused &&
+ (isUseKeyPress || isSameDay(newStartDate, newEndDate))
+ ) {
+ if (range.endDate && isAfterDay(newStartDate, range.endDate)) return;
+ newEndDate = range.endDate;
+ shouldCloseCalendar = false;
+ shouldOpenNextCalendar = true;
+ setErrors({
+ ...errors,
+ startDate: "",
+ });
+ } else if (
+ isEndDateFocused &&
+ (isUseKeyPress || isSameDay(newEndDate, newStartDate))
+ ) {
+ if (range.startDate && isBeforeDay(newEndDate, range.startDate)) return;
+ newStartDate = range.startDate;
+ setErrors({
+ ...errors,
+ endDate: "",
+ });
+ } else {
+ setErrors({
+ startDate: "",
+ endDate: "",
+ });
+ }
+
+ // Emit the payload
+
+ setRangeString({
+ startDateString: newStartDate
+ ? moment(newStartDate).format("MMM D, YYYY")
+ : "",
+ endDateString: newEndDate ? moment(newEndDate).format("MMM D, YYYY") : "",
+ });
+
+ onChange({
+ startDate: newStartDate,
+ endDate: newEndDate ? moment(newEndDate).endOf("day").toDate() : null,
+ });
+
+ if (shouldOpenNextCalendar) {
+ setFocusedRange([0, 1]);
+ }
+ if (shouldCloseCalendar) {
+ setIsComponentVisible(false);
+ }
+ };
+
+ /**
+ * Event handler on preview change
+ * @param {Date} date current date which user hover
+ */
+ const onPreviewChange = (date) => {
+ if (!(date instanceof Date)) {
+ setPreview(null);
+
+ // ---
+ // workaround for fixing issue 132:
+ // - set the active range's background to transparent color
+ // to prevent the calendar auto focusing on the day of today by default when no
+ // start date nor end date are set.
+ // - does not set focus on the selection range when mouse leaves.
+ // ---
+
+ // setActiveDate(null);
+ // if (range.startDate || range.endDate) {
+ // setFocusedRange([0, focusedRange[1]]);
+ // }
+ return;
+ }
+
+ if (isStartDateFocused && date) {
+ setPreview({
+ startDate: date,
+ endDate: range.endDate || date,
+ });
+ } else if (isEndDateFocused && date) {
+ setPreview({
+ startDate: range.startDate || date,
+ endDate: date,
+ });
+ }
+
+ setActiveDate(date);
+ setFocusedRange([1, focusedRange[1]]);
+ };
+
+ /**
+ * Event handler for user keypress
+ * @param {Event} e Keyboard event
+ */
+ const handleKeyDown = (e) => {
+ let currentActiveDate = activeDate;
+ if (!currentActiveDate) {
+ currentActiveDate = moment().startOf("month").toDate();
+
+ if (isStartDateFocused && range.startDate) {
+ currentActiveDate = range.startDate;
+ } else if (isEndDateFocused && (range.startDate || range.endDate)) {
+ currentActiveDate = range.endDate || range.startDate;
+ }
+ }
+
+ switch (e.key) {
+ case "Down":
+ case "ArrowDown":
+ currentActiveDate = moment(currentActiveDate).add(7, "days").toDate();
+ onPreviewChange(currentActiveDate);
+ break;
+ case "Up":
+ case "ArrowUp":
+ currentActiveDate = moment(currentActiveDate)
+ .subtract(7, "days")
+ .toDate();
+ onPreviewChange(currentActiveDate);
+ break;
+ case "Left":
+ case "ArrowLeft":
+ currentActiveDate = moment(currentActiveDate)
+ .subtract(1, "days")
+ .toDate();
+ onPreviewChange(currentActiveDate);
+ break;
+ case "Right":
+ case "ArrowRight":
+ currentActiveDate = moment(currentActiveDate).add(1, "days").toDate();
+ onPreviewChange(currentActiveDate);
+ break;
+ case "Enter":
+ if (activeDate) {
+ onDateRangePickerChange({
+ startDate: isStartDateFocused ? activeDate : range.startDate,
+ endDate: isEndDateFocused ? activeDate : range.endDate,
+ });
+ }
+ break;
+ case "Esc":
+ case "Escape":
+ setIsComponentVisible(false);
+ break;
+ default:
+ return; // Quit when this doesn't handle the key event.
+ }
+
+ e.preventDefault();
+ };
+
+ /**
+ * User Effect for listening to keypress event
+ */
+ useEffect(() => {
+ if (isComponentVisible) {
+ document.addEventListener("keydown", handleKeyDown, true);
+ } else {
+ document.removeEventListener("keydown", handleKeyDown, true);
+ }
+
+ return () => {
+ document.removeEventListener("keydown", handleKeyDown, true);
+ };
+ });
+
+ /**
+ * Focus the calendar to the given date,
+ * so for example, if the user click menu for end date it will open the calendar
+ * and focus it to current end date
+ */
+ const getShownDate = () => {
+ if (activeDate) {
+ return activeDate;
+ }
+
+ if (isStartDateFocused) {
+ if (preview) return preview.startDate;
+ return range.startDate || moment().toDate();
+ }
+ if (preview) return preview.endDate;
+ return range.endDate || moment().toDate();
+ };
+
+ /**
+ * Disable the days that cannot be selected
+ */
+ const disabledDay = (date) => {
+ if (isStartDateFocused) {
+ return range.endDate ? moment(date).isAfter(range.endDate, "day") : false;
+ }
+ return range.startDate
+ ? moment(date).isBefore(range.startDate, "day")
+ : false;
+ };
+
+ /**
+ * Get Date Ranges
+ */
+ const getRanges = () => {
+ if (activeDate) {
+ return [
+ {
+ ...range,
+ key: "selection",
+ color: "#0AB88A",
+ },
+ {
+ startDate: activeDate,
+ endDate: activeDate,
+ key: "active",
+ color: preview ? "#D8FDD8" : "#D8FDD800",
+ },
+ ];
+ }
+ return [
+ {
+ ...range,
+ key: "selection",
+ color: "#0AB88A",
+ },
+ ];
+ };
+
+ /**
+ * Check whether the preview invalid
+ */
+ const isInvalidPreview = () => {
+ if (!preview) return false;
+ if (isStartDateFocused) {
+ return isAfterDay(preview.startDate, range.endDate);
+ }
+ return isBeforeDay(preview.endDate, range.startDate);
+ };
+
+ const className = `${(focusedRange[1] === 1 && styles.endDate) || ""} ${
+ (range.startDate && range.endDate && styles.isRange) || ""
+ } ${(isInvalidPreview() && styles.isInvalidPreview) || ""} ${
+ ((errors.startDate || errors.endDate) && styles.isErrorInput) || ""
+ }`;
+
+ return (
+
+ {
+ if (!enterToSubmit) {
+ onChangeRangeTextDebounced.current(() =>
+ onChangeRangeText(value)
+ );
+ }
+ }}
+ onEnterKey={(value) => {
+ onChangeRangeText(value);
+ }}
+ placeholder={placeholder}
+ />
+
+
+ {error}
+
+
+ );
+}
+
+// It use https://www.npmjs.com/package/react-date-range internally
+// Check the docs for further options
+
+DateRangePicker.propTypes = {
+ id: PropTypes.string,
+ range: PropTypes.object.isRequired,
+ onChange: PropTypes.func.isRequired,
+ placeholder: PropTypes.string,
+};
+
+DateRangePicker.defaultProps = {
+ id: "input-date-range-calendar-icon",
+ placeholder: "Date range",
+};
+
+export default DateRangePicker;
diff --git a/src/apps/earn/src/components/DateRangePicker/style.scss b/src/apps/earn/src/components/DateRangePicker/style.scss
new file mode 100644
index 000000000..b00f99541
--- /dev/null
+++ b/src/apps/earn/src/components/DateRangePicker/style.scss
@@ -0,0 +1,463 @@
+@import "@earn/styles/variables";
+@import "@earn/styles/mixins";
+
+$green: #D8FDD8;
+$darkGreen: #0AB88A;;
+
+@mixin phone {
+ @media (max-width: #{$screen-sm - 1px}) {
+ @content;
+ }
+}
+
+@mixin tablet {
+ @media (min-width: #{$screen-sm}) and (max-width: #{$screen-lg - 1px}) {
+ @content;
+ }
+}
+
+.isErrorInput {
+ :global .rdrDateRangePickerWrapper {
+ margin-top: -20px !important;
+ }
+}
+
+.isRange {
+ :global {
+ .rdrDay {
+ .rdrInRange {
+ background: $green !important;
+ }
+
+ .rdrStartEdge,
+ .rdrEndEdge {
+ background: $green !important;
+ }
+ }
+ }
+}
+
+.isInvalidPreview {
+ :global {
+ .rdrDayInPreview,
+ .rdrDayStartPreview,
+ .rdrDayEndPreview,
+ .rdrStartEdge.rdrEndEdge {
+ border: none !important;
+ }
+ }
+}
+
+.dateRangePicker {
+ display: block;
+ position: relative;
+ color: $tc-black;
+
+ :global {
+ @include phone {
+ .rdrDateRangePickerWrapper {
+ position: relative !important;
+ width: 100% !important;
+ flex-direction: column-reverse;
+ align-items: center;
+ justify-content: flex-end;
+ padding: 0 20px;
+ border-radius: 0 !important;
+
+ .rdrDefinedRangesWrapper {
+ .rdrStaticRanges {
+ display: inline-flex;
+ flex-direction: row;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ margin-top: 10px !important;
+ width: calc(100% - 40px);
+
+ .rdrStaticRange {
+ width: 50%;
+ }
+
+ .rdrStaticRangeLabel {
+ font-size: 14px;
+ }
+
+ > button:hover .rdrStaticRangeLabel {
+ background-color: $green;
+ }
+ }
+ }
+
+ .rdrDateRangeWrapper {
+ width: 100%;
+
+ .rdrMonthAndYearWrapper {
+ padding-top: 0;
+
+ .rdrMonthAndYearPickers select {
+ font-size: 16px;
+ }
+ }
+
+ .rdrMonth {
+ width: 100%;
+ }
+
+ .rdrDayNumber {
+ font-size: 15px;
+ }
+
+ .rdrDayToday .rdrDayNumber span:after {
+ bottom: -4px;
+ left: calc(50% + 2px);
+ }
+
+ .rdrMonths {
+ .rdrWeekDay {
+ font-size: 15px;
+ margin-bottom: 10px;
+ }
+
+ .rdrDay {
+ .rdrDayStartPreview {
+ left: 17%;
+ }
+
+ .rdrDayEndPreview {
+ right: 17%;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .rdrDateRangePickerWrapper {
+ z-index: 15;
+ position: relative;
+ // background: $tc-white;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ overflow: hidden;
+ width: 455px;
+
+ .rdrDefinedRangesWrapper {
+ width: 100%;
+ border: none;
+
+ .rdrStaticRanges {
+ margin-top: 60px;
+
+ .rdrStaticRange {
+ border: none;
+ }
+
+ button {
+ color: $tc-gray-80;
+
+ @include roboto-regular;
+ }
+
+ button:hover .rdrStaticRangeLabel {
+ background-color: $green;
+ }
+ }
+
+ .rdrInputRanges {
+ display: none;
+ }
+ }
+ }
+
+ .rdrMonthAndYearPickers select {
+ background: url("data:image/svg+xml;utf8,") no-repeat right 8px center;
+
+ option {
+ background: $white;
+ }
+
+ &:hover {
+ background-color: transparent;
+ }
+ }
+
+ .rdrMonths {
+ border-top: 1px solid $tc-gray-20;
+ border-bottom: 1px solid $tc-gray-20;
+
+ .rdrWeekDay {
+ font-weight: bold;
+ color: #484848;
+ }
+
+ .rdrDayDisabled {
+ background: transparent;
+
+ .rdrDayInPreview,
+ .rdrDayStartPreview,
+ .rdrDayEndPreview,
+ .rdrStartEdge.rdrEndEdge {
+ filter: none !important;
+ -webkit-filter: none !important;
+ }
+ }
+
+ .rdrDayPassive {
+ .rdrInRange,
+ .rdrStartEdge,
+ .rdrEndEdge,
+ .rdrSelected,
+ .rdrDayStartPreview,
+ .rdrDayInPreview,
+ .rdrDayEndPreview {
+ display: block;
+ }
+
+ .rdrInRange ~ .rdrDayNumber span {
+ opacity: 0.5;
+ }
+ }
+
+ .rdrDayEndOfMonth .rdrInRange,
+ .rdrDayEndOfMonth .rdrStartEdge,
+ .rdrDayEndOfWeek .rdrInRange,
+ .rdrDayEndOfWeek .rdrStartEdge {
+ right: 0;
+ }
+
+ .rdrDayStartOfMonth .rdrInRange,
+ .rdrDayStartOfMonth .rdrEndEdge,
+ .rdrDayStartOfWeek .rdrInRange,
+ .rdrDayStartOfWeek .rdrEndEdge {
+ left: 0;
+ }
+
+ .rdrDayStartOfWeek {
+ .rdrDayInPreview {
+ left: 0;
+ border-radius: 0 !important;
+ border-left: none;
+ }
+ }
+
+ .rdrDayEndOfWeek {
+ .rdrDayInPreview {
+ right: 0;
+ border-radius: 0 !important;
+ border-right: none;
+ }
+ }
+
+ .rdrDayStartOfMonth,
+ .rdrDayEndOfMonth {
+ .rdrDayInPreview {
+ border-radius: 0;
+ border-left: 0;
+ border-right: 0;
+ }
+ }
+
+ .rdrDay {
+ margin-bottom: 6px;
+
+ .rdrInRange {
+ color: transparent;
+ background: transparent;
+
+ & ~ .rdrDayNumber span {
+ color: $tc-black;
+ }
+ }
+
+ .rdrDayStartPreview {
+ border-radius: 18px 0 0 18px;
+ height: 36px;
+ left: 4px;
+ border-right: none;
+ }
+
+ .rdrDayEndPreview {
+ border-radius: 0 18px 18px 0;
+ height: 36px;
+ right: 4px;
+ border-left: none;
+ }
+
+ .rdrDayStartPreview.rdrDayEndPreview,
+ .rdrDayHovered {
+ border-radius: 50%;
+ width: 36px;
+ height: 36px;
+ left: 4px;
+ border: 1px solid $green;
+ }
+
+ .rdrSelected,
+ .rdrInRange,
+ .rdrStartEdge,
+ .rdrEndEdge {
+ top: 0;
+ bottom: 0;
+ border-radius: 0;
+ }
+
+ .rdrDayInPreview,
+ .rdrDayStartPreview,
+ .rdrDayEndPreview {
+ border-color: $green;
+ top: 0;
+ bottom: 0;
+ }
+
+ .rdrDayStartPreview,
+ .rdrDayEndPreview {
+ & ~ .rdrDayNumber span {
+ color: $tc-black;
+ }
+ }
+
+ .rdrStartEdge {
+ background: transparent;
+ left: 50%;
+
+ &::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: -18px;
+ border-radius: 50%;
+ width: 36px;
+ height: 36px;
+ background: currentColor;
+ z-index: 0;
+ }
+ }
+
+ .rdrEndEdge {
+ background: transparent;
+ right: 50%;
+
+ &::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: -18.2px;
+ border-radius: 50%;
+ width: 36px;
+ height: 36px;
+ background: currentColor;
+ z-index: 0;
+ }
+ }
+
+ .rdrStartEdge.rdrEndEdge ~ .rdrDayNumber span {
+ color: $tc-black;
+ }
+
+ .rdrDayNumber {
+ top: 0;
+ bottom: 0;
+ }
+ }
+
+ .rdrDayStartOfWeek,
+ .rdrDayEndOfWeek {
+ border-radius: 0;
+ }
+
+ .rdrDayToday .rdrDayNumber span:after {
+ bottom: -4px;
+ left: calc(50% + 2px);
+ background: $darkGreen !important;
+ }
+ }
+ }
+}
+
+.dateInputWrapper {
+ position: relative;
+ text-align: left;
+}
+
+.calendar-container {
+ @include roboto-regular;
+
+ position: absolute;
+ top: calc(100% + 8px);
+}
+
+.calendar-inner-container {
+ position: absolute;
+ padding: 0 18px 0 0;
+ text-align: right;
+ border: 1px solid $tc-gray-30;
+ border-radius: 4px;
+ background: $tc-white;
+ z-index: 10;
+
+ @include phone {
+ width: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 20px;
+ bottom: 0;
+ z-index: 15;
+ padding: 187px 0 0;
+ border: 0;
+ border-radius: 0;
+ background: rgba(#2A2A2A, 0.6);
+
+ @include down(320px) {
+ padding: 40px 0 0;
+ }
+
+ .calendar-footer {
+ margin: 0 20px;
+ padding: 20px 0;
+ }
+ }
+
+ .calendar-footer {
+ background: $tc-white;
+ }
+
+ .calendar-button {
+ @include roboto-bold;
+
+ width: 71px;
+ height: 24px;
+ line-height: 22px;
+ margin: 9px 4px 16px;
+ padding: 0;
+ font-size: 10.5px;
+ text-align: center;
+ background: transparent;
+ border: 1px solid #ccc;
+ border-radius: 2px;
+
+ @include phone {
+ width: 79px;
+ height: 26px;
+ line-height: 27px;
+ font-size: 12px;
+ margin: 0 12px 0;
+ }
+ }
+}
+
+@include tablet {
+ .calendar-container,
+ .calendar-inner-container {
+ right: 0;
+ }
+
+ :global {
+ .rdrDateRangePickerWrapper {
+ .calendar-container,
+ .calendar-inner-container {
+ right: 62px;
+ left: auto;
+ }
+ }
+ }
+}
diff --git a/src/apps/earn/src/components/Dropdown/index.jsx b/src/apps/earn/src/components/Dropdown/index.jsx
new file mode 100644
index 000000000..f4b9d2d6b
--- /dev/null
+++ b/src/apps/earn/src/components/Dropdown/index.jsx
@@ -0,0 +1,199 @@
+/**
+ * Dropdown component.
+ */
+import React, { useState, useRef, useEffect } from "react";
+import PT from "prop-types";
+import _ from "lodash";
+import ReactSelect, { components } from "react-select";
+
+import config from "../../config";
+
+import styles from "./styles.scss";
+import { styled as styledCss } from "@earn/utils";
+const styled = styledCss(styles)
+
+const Menu = (props) => {
+ return (
+
+ setFocusedRange([0, 0])}
+ isEndDateActive={focusedRange[1] === 1 && isComponentVisible}
+ endDateString={rangeString.endDateString}
+ onEndDateChange={onEndDateChange}
+ onEndDateFocus={() => setFocusedRange([0, 1])}
+ error={errors.startDate || errors.endDate}
+ onClickCalendarIcon={(event) => {
+ event === "start" ? onIconClickStartDate() : onIconClickEndDate();
+ }}
+ onStartEndDateChange={onStartEndDateChange}
+ placeholder={placeholder}
+ enterToSubmit={enterToSubmit}
+ />
+
+
+ {isComponentVisible && (
+
+
+ {
+ if (!preview) {
+ onReset(item.selection || item.active);
+ } else {
+ onDateRangePickerChange(item.selection || item.active);
+ }
+ }}
+ dateDisplayFormat="MM/dd/yyyy"
+ showDateDisplay={false}
+ staticRanges={createStaticRanges()}
+ inputRanges={[]}
+ moveRangeOnFirstSelection={false}
+ initialFocusedRange={[0, 1]}
+ showMonthArrow={false}
+ ranges={getRanges()}
+ disabledDay={disabledDay}
+ shownDate={getShownDate()}
+ preview={preview}
+ onPreviewChange={onPreviewChange}
+ />
+
+ )}
+
+
+
+
+ setFocused(true)}
+ onBlurCapture={() => setFocused(false)}
+ className={
+ styled(
+ className,
+ 'dropdownContainer',
+ 'container',
+ sizeStyle,
+ selectedOption && "haveValue",
+ errorMsg && "haveError",
+ focused && "isFocused"
+ )
+ }
+ >
+
+ );
+}
+
+Dropdown.defaultProps = {
+ placeholder: '',
+ label: '',
+ required: false,
+ onChange: () => {},
+ errorMsg: '',
+ searchable: true,
+ size: 'lg',
+};
+
+Dropdown.propTypes = {
+ options: PT.arrayOf(
+ PT.shape({
+ label: PT.string,
+ selected: PT.bool,
+ })
+ ).isRequired,
+ placeholder: PT.string,
+ label: PT.string,
+ required: PT.bool,
+ onChange: PT.func,
+ errorMsg: PT.string,
+ size: PT.oneOf(["xs", "lg"]),
+};
+
+export default Dropdown;
diff --git a/src/apps/earn/src/components/Dropdown/styles.scss b/src/apps/earn/src/components/Dropdown/styles.scss
new file mode 100644
index 000000000..c844913b8
--- /dev/null
+++ b/src/apps/earn/src/components/Dropdown/styles.scss
@@ -0,0 +1,260 @@
+@import "@earn/styles/variables";
+@import "@earn/styles/GUIKit/default";
+
+.label {
+ @include textInputLabel;
+}
+
+.relative {
+ position: relative;
+}
+
+.errorMessage {
+ @include errorMessage;
+}
+
+.iconDropdown {
+ position: absolute;
+ top: 50%;
+ right: 16px;
+ pointer-events: none;
+ margin-top: -4px;
+}
+
+.container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ padding-top: 12px;
+
+ &.haveValue .label,
+ &.haveError .label,
+ &.isFocused .label {
+ display: flex;
+ }
+
+ &.isFocused {
+ .label {
+ color: $gui-kit-level-2;
+ }
+
+ .iconDropdown {
+ transform: scale(1, -1);
+ }
+ }
+
+ &.haveError .label,
+ &.haveError.isFocused .label {
+ color: $gui-kit-level-5;
+ }
+
+ :global {
+ // @import '~react-select/dist/react-select';
+
+ width: 100%;
+
+ .Select-control {
+ margin: 0;
+ padding: 0;
+ border: none;
+ border-radius: 6px !important;
+ height: 52px;
+ outline: none !important;
+ box-shadow: inset 0 0 0 1px $gui-kit-gray-30 !important;
+ }
+
+ .Select-input {
+ padding: 0;
+ margin: 0;
+ display: flex;
+
+ input {
+ font-size: 16px;
+ padding: 0;
+ height: 22px;
+ line-height: 22px;
+
+ &:focus {
+ border: none;
+ box-shadow: none;
+ }
+ }
+ }
+
+ .Select-value {
+ .Select-value-label {
+ height: 22px;
+ line-height: 22px;
+ font-size: 16px;
+ color: $gui-kit-gray-90 !important;
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ left: 15px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ margin: 0;
+ }
+ }
+
+ .Select-placeholder,
+ .Select-value,
+ .Select-input {
+ padding: 0 15px !important;
+ height: 100% !important;
+ display: flex !important;
+ align-items: center !important;
+ }
+
+ .Select-placeholder {
+ color: $gui-kit-gray-30;
+ opacity: 1;
+ text-transform: none;
+ font-size: 16px;
+ }
+
+ .Select-multi-value-wrapper {
+ width: 100% !important;
+ height: 100% !important;
+ }
+
+ .Select-arrow-zone {
+ padding-right: 15px !important;
+
+ .Select-arrow {
+ background-image: none;
+ border: none;
+ width: 15px;
+ height: 9px;
+ background-size: 15px 9px;
+ top: 0 !important;
+ border-width: 0 !important;
+ opacity: 0;
+ pointer-events: none;
+ }
+ }
+
+ .Select {
+ &.is-open {
+ .Select-arrow-zone {
+ .Select-arrow {
+ transform: scale(1, -1);
+ }
+ }
+ }
+
+ &:not(.is-searchable) {
+ .Select-input {
+ display: none !important;
+ }
+ }
+ }
+
+ .Select-menu-outer {
+ top: calc(100% + 2px) !important;
+ border: 1px solid $gui-kit-gray-30 !important;
+ border-radius: 0 !important;
+ max-height: 269px;
+ z-index: 7;
+ margin: 0;
+
+ .Select-menu {
+ padding: 9px 0;
+ max-height: 269px;
+
+ .Select-option {
+ padding: 0 15px !important;
+ font-size: 16px !important;
+ line-height: 30px !important;
+ color: $gui-kit-gray-90 !important;
+ background-color: transparent !important;
+ text-decoration: none !important;
+
+ &.is-selected {
+ font-weight: bold !important;
+ }
+
+ &:hover {
+ background-color: #229173 !important;
+ color: $tc-white !important;
+ }
+ }
+ }
+ }
+ }
+
+ &.haveError {
+ :global {
+ .Select-control {
+ box-shadow: inset 0 0 0 2px $gui-kit-level-5 !important;
+ }
+ }
+ }
+
+ // lg size
+ &.lgSize {
+ :global {
+ .Select-control {
+ height: 52px;
+ }
+
+ .Select-input {
+ input {
+ height: 52px;
+ }
+ }
+ }
+ }
+
+ // xs size
+ &.xsSize {
+ padding-top: 0;
+
+ &.haveValue .label,
+ &.isFocused .label {
+ margin-top: -12px;
+ }
+
+ :global {
+ .Select-control {
+ height: 40px;
+ }
+
+ .Select-input {
+ input {
+ font-size: 14px;
+ height: 40px;
+ }
+ }
+
+ .Select-value {
+ .Select-value-label {
+ font-size: 14px;
+ color: $gui-kit-gray-90 !important;
+ }
+ }
+
+ .Select-placeholder {
+ font-size: 14px;
+ }
+
+ .Select-menu-outer {
+ * {
+ font-size: 14px !important;
+ }
+
+ .Select-menu {
+ .Select-option {
+ font-size: 14px !important;
+ }
+ }
+ }
+ }
+
+ .errorMessage {
+ @include errorMessageXs;
+ }
+ }
+}
diff --git a/src/apps/earn/src/components/DropdownTerms/index.jsx b/src/apps/earn/src/components/DropdownTerms/index.jsx
new file mode 100644
index 000000000..d47070913
--- /dev/null
+++ b/src/apps/earn/src/components/DropdownTerms/index.jsx
@@ -0,0 +1,214 @@
+/**
+ * Dropdown terms component.
+ */
+import React, { useState, useRef, useEffect } from "react";
+import PT from "prop-types";
+import _ from "lodash";
+import Select from "react-select";
+
+import config from "../../config";
+import iconDown from "../../assets/icons/dropdown-arrow.png";
+
+import styles from "./styles.scss";
+import { styled as styledCss } from "@earn/utils";
+const styled = styledCss(styles)
+
+function DropdownTerms({
+ terms,
+ placeholder,
+ label,
+ required,
+ onChange,
+ errorMsg,
+ addNewOptionPlaceholder,
+ size,
+}) {
+ const [internalTerms, setInternalTerms] = useState(terms);
+ const selectedOption = _.filter(internalTerms, { selected: true }).map(
+ (o) => ({
+ value: o.label,
+ label: o.label,
+ })
+ );
+ const [focused, setFocused] = useState(false);
+ const delayedOnChange = useRef(
+ _.debounce((q, cb) => cb(q), config.GUIKIT.DEBOUNCE_ON_CHANGE_TIME) // eslint-disable-line no-undef
+ ).current;
+
+ const containerRef = useRef(null);
+ let inputFieldRef = useRef(null);
+ const latestPropsRef = useRef(null);
+ latestPropsRef.current = { addNewOptionPlaceholder };
+
+ useEffect(() => {
+ const selectInput = containerRef.current.getElementsByClassName(
+ "Select-input"
+ );
+ if (selectInput && selectInput.length) {
+ inputFieldRef.current = selectInput[0].getElementsByTagName("input");
+ inputFieldRef.current[0].placeholder = focused
+ ? latestPropsRef.current.addNewOptionPlaceholder
+ : "";
+ inputFieldRef.current[0].style.border = "none";
+ inputFieldRef.current[0].style.boxShadow = "none";
+ selectInput[0].style.borderTop = "none";
+ }
+ }, [focused, selectedOption]);
+ useEffect(() => {
+ setInternalTerms(terms); // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [terms && terms.length]);
+
+ const CustomReactSelectRow = React.forwardRef(
+ ({ className, option, children, onSelect }, ref) =>
+ children ? (
+ {
+ event.preventDefault();
+ event.stopPropagation();
+ onSelect(option, event);
+ }}
+ title={option.title}
+ tabIndex={-1}
+ >
+ {children}
+
+ ) : null
+ );
+
+ CustomReactSelectRow.defaultProps = {
+ children: null,
+ className: "",
+ onSelect: () => {},
+ };
+
+ CustomReactSelectRow.propTypes = {
+ children: PT.node,
+ className: PT.string,
+ onSelect: PT.func,
+ option: PT.object.isRequired,
+ };
+
+ return (
+
+ ({
+ value: o.label,
+ label: o.label,
+ }))}
+ value={selectedOption}
+ components={{
+ Menu,
+ MenuList,
+ Option: CustomOption,
+ ValueContainer,
+ SingleValue,
+ IndicatorSeparator,
+ Input,
+ Control: ControlComponent,
+ }}
+ onChange={(value) => {
+ if (value) {
+ const newOptions = internalOptions.map((o) => ({
+ selected: value.label === o.label,
+ label: o.label,
+ value: o.value,
+ }));
+ setInternalOptions(newOptions);
+ delayedOnChange(_.cloneDeep(newOptions), onChange);
+ }
+ }}
+ placeholder={`${placeholder}${placeholder && required ? " *" : ""}`}
+ clearable={false}
+ />
+
+ {label ? (
+
+ {label}
+ {required ? * : null}
+
+ ) : null}
+ {errorMsg ? (
+
+ {errorMsg}
+
+ ) : null}
+
+
+ );
+}
+
+DropdownTerms.defaultProps = {
+ placeholder: "",
+ label: "",
+ required: false,
+ onChange: () => {},
+ errorMsg: "",
+ addNewOptionPlaceholder: "",
+ size: "lg",
+};
+
+DropdownTerms.propTypes = {
+ terms: PT.arrayOf(
+ PT.shape({
+ label: PT.string.isRequired,
+ selected: PT.bool.isRequired,
+ })
+ ).isRequired,
+ placeholder: PT.string,
+ label: PT.string,
+ required: PT.bool,
+ onChange: PT.func,
+ errorMsg: PT.string,
+ addNewOptionPlaceholder: PT.string,
+ size: PT.oneOf(["xs", "lg"]),
+};
+
+export default DropdownTerms;
diff --git a/src/apps/earn/src/components/DropdownTerms/styles.scss b/src/apps/earn/src/components/DropdownTerms/styles.scss
new file mode 100644
index 000000000..01d02e92e
--- /dev/null
+++ b/src/apps/earn/src/components/DropdownTerms/styles.scss
@@ -0,0 +1,202 @@
+@import '../Dropdown/styles.scss';
+
+.label {
+ z-index: 6;
+}
+
+.relative {
+ position: relative;
+}
+
+.errorMessage,
+.haveValue,
+.haveError,
+.iconDropdown,
+.isFocused {
+ font-family: Roboto, sans-serif;
+}
+
+.container {
+ :global {
+ .Select-control {
+ min-height: 52px;
+ height: auto;
+ display: flex !important;
+ overflow: visible !important;
+ }
+
+ .Select-arrow-zone {
+ flex-shrink: 0 !important;
+ display: flex !important;
+ margin: auto 0 auto 10px !important;
+ width: 30px !important;
+ }
+
+ .Select-multi-value-wrapper {
+ display: flex !important;
+ flex-wrap: wrap;
+ padding-top: 12px !important;
+ padding-left: 8px !important;
+ overflow: auto;
+ }
+
+ .Select-value {
+ border: none !important;
+ background-color: $tc-gray-05 !important;
+ height: 25px !important;
+ display: flex !important;
+ flex-direction: row-reverse !important;
+ align-items: center;
+ padding: 0 !important;
+ border-radius: 5px !important;
+ font-size: 12 !important;
+ color: $gui-kit-gray-90 !important;
+ padding-left: 7px !important;
+ margin-top: 0 !important;
+ margin-bottom: 5px !important;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ z-index: 6;
+
+ .Select-value-icon {
+ border-right: none !important;
+ padding: 0 7px !important;
+ margin: 0 !important;
+ color: $gui-kit-gray-90 !important;
+ background: transparent !important;
+ }
+
+ .Select-value-label {
+ padding: 0 !important;
+ margin: 0 !important;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: $gui-kit-gray-90 !important;
+ text-decoration: none !important;
+ font-size: 12px;
+ }
+ }
+
+ .Select-input {
+ position: absolute;
+ left: 0;
+ right: 0;
+ background: transparent;
+ min-height: 100% !important;
+ z-index: 5;
+ margin: 0 !important;
+ cursor: pointer;
+
+ input {
+ height: 25px !important;
+ opacity: 0;
+ cursor: pointer;
+ }
+ }
+
+ .Select-option {
+ border-bottom-right-radius: 0 !important;
+ border-bottom-left-radius: 0 !important;
+ }
+
+ .Select--multi .Select-clear-zone {
+ display: flex;
+ align-items: center;
+ width: 26px;
+ z-index: 10;
+ }
+
+ .Select-clear {
+ font-size: 28px;
+ color: $tc-gray-50;
+ }
+ }
+
+ &.isFocused {
+ :global {
+ .Select-input {
+ background: $tc-white;
+ height: 40px !important;
+ border: 1px solid $gui-kit-gray-30;
+ cursor: auto;
+ z-index: 7;
+
+ input {
+ opacity: 1;
+ cursor: auto;
+
+ &::-webkit-input-placeholder {
+ /* Edge */
+ color: $gui-kit-gray-30;
+ opacity: 1;
+ text-transform: none;
+ font-size: 16px;
+ }
+
+ &:-ms-input-placeholder {
+ /* Internet Explorer 10-11 */
+ color: $gui-kit-gray-30;
+ opacity: 1;
+ text-transform: none;
+ font-size: 16px;
+ }
+
+ &::placeholder {
+ color: $gui-kit-gray-30;
+ opacity: 1;
+ text-transform: none;
+ font-size: 16px;
+ }
+ }
+ }
+ }
+ }
+
+ &.isEmptySelectList {
+ :global {
+ .Select-menu-outer {
+ border: none !important;
+ padding-bottom: 10px !important;
+ }
+ }
+ }
+
+ &.term-lgSize {
+ }
+
+ &.term-xsSize {
+ :global {
+ .Select-control {
+ min-height: 40px;
+ }
+
+ .Select-placeholder {
+ font-size: 14px !important;
+ }
+
+ .Select.is-open .Select-multi-value-wrapper {
+ overflow: hidden;
+ }
+
+ .Select--multi .Select-value {
+ line-height: 38px;
+ margin-top: 10px;
+ font-size: 14px;
+ }
+ }
+
+ .errorMessage {
+ @include errorMessageXs;
+ }
+ }
+}
+
+.addAnotherSkill {
+ height: 40px;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
diff --git a/src/apps/earn/src/components/Editor/Connector.js b/src/apps/earn/src/components/Editor/Connector.js
new file mode 100644
index 000000000..f62949134
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/Connector.js
@@ -0,0 +1,53 @@
+/**
+ * Auxiliary class that helps to connect Toolbar to multiple Editor instances.
+ */
+import _ from "lodash";
+
+export default class Connector {
+ constructor() {
+ this.editors = [];
+ this.previewer = null;
+ this.focusedEditor = null;
+ this.previousEditor = null;
+ this.toolbar = null;
+ this.modified = false;
+ }
+
+ /**
+ * Adds a new Editor instance.
+ * @param {Editor} editor
+ */
+ addEditor(editor) {
+ this.editors.push(editor);
+ }
+
+ setFocusedEditor(editor, newState) {
+ this.previousEditor = this.focusedEditor;
+ this.focusedEditor = editor;
+ if (this.toolbar) this.toolbar.onFocusedEditorChanged(newState);
+ }
+
+ setPreviewer(previewer) {
+ this.previewer = previewer;
+ }
+
+ toggleInlineMarkdown(markdown) {
+ this.editors.forEach((editor) => editor.setState({ markdown }));
+ }
+
+ /**
+ * Sets the Toolbar.
+ * @param {Toolbar} toolbar
+ */
+ setToolbar(toolbar) {
+ this.toolbar = toolbar;
+ }
+
+ /**
+ * Removes the editor.
+ * @param {Editor} editor
+ */
+ removeEditor(editor) {
+ _.pull(this.editor, editor);
+ }
+}
diff --git a/src/apps/earn/src/components/Editor/GenericEditor/index.jsx b/src/apps/earn/src/components/Editor/GenericEditor/index.jsx
new file mode 100644
index 000000000..af53a286f
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/GenericEditor/index.jsx
@@ -0,0 +1,117 @@
+/**
+ * General-purpose DraftJS editor, wrapped in an auxiliary component.
+ */
+
+import PT from "prop-types";
+import React from "react";
+
+import { DefaultDraftBlockRenderMap, Editor, EditorState } from "draft-js";
+
+import "draft-js/dist/Draft.css";
+
+import Connector from "../Connector";
+import styles from "./style.scss";
+
+export default class GenericEditor extends React.Component {
+ constructor(props) {
+ super(props);
+ this.id = props.id;
+ this.state = { editor: EditorState.createEmpty(props.decorator) };
+ }
+
+ componentDidMount() {
+ const { connector } = this.props;
+ if (connector) connector.addEditor(this);
+ }
+
+ componentWillReceiveProps({ connector, id }) {
+ const { connector: prevConnector } = this.props;
+ this.id = id;
+ if (connector !== prevConnector) {
+ if (prevConnector) prevConnector.removeEditor(this);
+ if (connector) connector.addEditor(this);
+ }
+ }
+
+ componentWillUnmount() {
+ const { connector } = this.props;
+ if (connector) connector.removeEditor(this);
+ }
+
+ focus() {
+ if (this.editor) this.editor.focus();
+ }
+
+ render() {
+ const {
+ blockRendererFn,
+ blockRenderMap,
+ blockStyleFn,
+ connector,
+ editorState,
+ onChange,
+ } = this.props;
+ const { editor } = this.state;
+
+ let containerStyles = styles.container;
+ if (editor.getSelection().getHasFocus()) {
+ containerStyles += ` ${styles.focused}`;
+ }
+
+ return (
+
+
+ {label ? (
+
+ {label}
+ {required ? * : null}
+
+ ) : null}
+ {errorMsg ? {errorMsg} : null}
+ this.focus()}
+ onKeyPress={() => this.focus()}
+ onFocus={() => this.focus()}
+ role="button"
+ tabIndex={0}
+ >
+ {
+ if (connector) connector.setFocusedEditor(this, state);
+ if (onChange) onChange(state);
+ else this.setState({ editor: state });
+ }}
+ ref={(node) => {
+ this.editor = node;
+ }}
+ />
+
+ );
+ }
+}
+
+GenericEditor.defaultProps = {
+ blockRendererFn: () => null,
+ blockRenderMap: null,
+ blockStyleFn: () => null,
+ connector: null,
+ decorator: null,
+ editorState: null,
+ id: "",
+ onChange: null,
+};
+
+GenericEditor.propTypes = {
+ blockRendererFn: PT.func,
+ blockRenderMap: PT.shape(),
+ blockStyleFn: PT.func,
+ connector: PT.instanceOf(Connector),
+ id: PT.string,
+
+ /* If you want to use GenericEditor as a controlled component, pass in its
+ * current state and the onChange callback. Otherwise a local editor state
+ * will be used automatically. */
+ editorState: PT.instanceOf(EditorState),
+ onChange: PT.func,
+
+ /* The following props have the effect only when GenericEditor is not a
+ * controlled component (otherwise you should apply them to your EditorState
+ * as you need (before passing it in as a prop). */
+ decorator: PT.shape(),
+};
diff --git a/src/apps/earn/src/components/Editor/GenericEditor/style.scss b/src/apps/earn/src/components/Editor/GenericEditor/style.scss
new file mode 100644
index 000000000..a0507067d
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/GenericEditor/style.scss
@@ -0,0 +1,18 @@
+@import "@earn/styles/mixins";
+
+.container {
+ @include tc-body-md;
+
+ border: 1px solid $tc-gray-10;
+ margin: 10px 0;
+ padding: 10px;
+
+ &:hover {
+ border: 1px solid $tc-gray-40;
+ }
+
+ &.focused,
+ &.focused:hover {
+ border: 1px solid $tc-dark-blue-110;
+ }
+}
diff --git a/src/apps/earn/src/components/Editor/Image/EditModal/index.jsx b/src/apps/earn/src/components/Editor/Image/EditModal/index.jsx
new file mode 100644
index 000000000..994a0c57d
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/Image/EditModal/index.jsx
@@ -0,0 +1,106 @@
+/**
+ * Modal Component for Image Decorators
+ */
+import _ from "lodash";
+import PT from "prop-types";
+import React from "react";
+
+import { BaseModal, Button } from "~/libs/ui";
+import { styled as styledCss } from "@earn/utils";
+
+import styles from "./style.scss";
+const styled = styledCss(styles)
+
+export default class EditModal extends React.Component {
+ constructor(props) {
+ super(props);
+ const { description, size, src } = props;
+ this.state = {
+ description,
+ size,
+ // src,
+ previewURL: "",
+ editURL: src,
+ };
+ }
+
+ render() {
+ const { onCancel, onSave } = this.props;
+ const st = this.state;
+ return (
+
+
+
+
+ );
+ }
+}
+
+EditModal.defaultProps = {
+ description: "",
+ onSave: _.noop,
+ onCancel: _.noop,
+ size: 100,
+ src: "http://",
+};
+
+EditModal.propTypes = {
+ description: PT.string,
+ onSave: PT.func,
+ onCancel: PT.func,
+ size: PT.number,
+ src: PT.string,
+};
diff --git a/src/apps/earn/src/components/Editor/Image/EditModal/style.scss b/src/apps/earn/src/components/Editor/Image/EditModal/style.scss
new file mode 100644
index 000000000..c3a1aa5ac
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/Image/EditModal/style.scss
@@ -0,0 +1,65 @@
+@import "@earn/styles/mixins";
+
+.buttons-container {
+ display: inline-block;
+ margin-left: 31px;
+ margin-top: $base-unit * 2;
+}
+
+// Competing against some globals
+.container {
+ @include tc-body-md;
+
+ input {
+ display: inline-block;
+ height: $base-unit * 6;
+ margin: 0;
+ padding: 0;
+ margin-left: $base-unit * 1;
+ vertical-align: middle;
+
+ &.size {
+ width: 50px;
+ }
+
+ &.url {
+ width: 500px;
+ }
+ }
+
+ z-index: 1000;
+}
+
+.modalContainer {
+ top: 30%;
+ left: 50%;
+ transform: translate(-50%);
+ height: auto;
+ width: 720px;
+}
+
+.modalOverlay {
+ pointer-events: bounding-box;
+}
+
+.fields-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.field {
+ display: inline-block;
+}
+
+.preview {
+ display: block;
+}
+
+.size {
+ width: 50px;
+}
+
+.url {
+ width: 100%;
+}
diff --git a/src/apps/earn/src/components/Editor/Image/Popup/index.jsx b/src/apps/earn/src/components/Editor/Image/Popup/index.jsx
new file mode 100644
index 000000000..e01b842d3
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/Image/Popup/index.jsx
@@ -0,0 +1,70 @@
+/**
+ * Popup Component for Link Decorators
+ */
+import _ from "lodash";
+import PT from "prop-types";
+import React from "react";
+
+
+import EditModal from "../EditModal";
+
+import styles from "./style.scss";
+import { styled as styledCss } from "@earn/utils";
+import { Button } from "~/libs/ui";
+const styled = styledCss(styles)
+
+export default class Popup extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ editing: props.triggerModal,
+ };
+ }
+
+ render() {
+ const { onEdit, size, src } = this.props;
+ const { editing } = this.state;
+ const renderDisplay = () => (
+
+
+
+ URL:
+ this.setState({ editURL: this.inputURL.value })}
+ ref={(node) => {
+ this.inputURL = node;
+ }}
+ className={styled("url")}
+ tabIndex="0"
+ value={st.editURL}
+ />
+
+
+ Size%:
+
+ this.setState({ size: _.clamp(this.inputSize.value, 0, 100) })
+ }
+ ref={(node) => {
+ this.inputSize = node;
+ }}
+ className={styled("size")}
+ tabIndex="-1"
+ value={st.size}
+ />
+
+
+
+
+
+ {st.previewURL ? (
+
+
+
+
+ ) : null}
+ +
+
+
+ );
+
+ const renderEdit = () => (
+
+ this.setState({ editing: false })}
+ onSave={(newSrc, newSize) => {
+ this.setState({ editing: false });
+ onEdit(newSrc, newSize);
+ }}
+ />
+
+ );
+
+ return {editing ? renderEdit() : renderDisplay()}
;
+ }
+}
+
+Popup.defaultProps = {
+ size: 100,
+ src: "http://",
+ onEdit: _.noop,
+ triggerModal: false,
+};
+
+Popup.propTypes = {
+ onEdit: PT.func,
+ size: PT.number,
+ src: PT.string,
+ triggerModal: PT.bool,
+};
diff --git a/src/apps/earn/src/components/Editor/Image/Popup/style.scss b/src/apps/earn/src/components/Editor/Image/Popup/style.scss
new file mode 100644
index 000000000..7fb680869
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/Image/Popup/style.scss
@@ -0,0 +1,6 @@
+@import "@earn/styles/mixins";
+
+.edit {
+ height: $base-unit * 4;
+ width: $base-unit * 4;
+}
diff --git a/src/apps/earn/src/components/Editor/Image/index.jsx b/src/apps/earn/src/components/Editor/Image/index.jsx
new file mode 100644
index 000000000..5fefc0d78
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/Image/index.jsx
@@ -0,0 +1,52 @@
+/**
+ *
+
+ {href}
+
+
+
+ );
+
+ const renderEdit = () => (
+
+ this.setState({ href: this.node.value })}
+ onKeyUp={(e) => {
+ if (e.keyCode === 13) {
+ this.handleDone();
+ }
+ }}
+ ref={(node) => {
+ this.node = node;
+ }}
+ />
+
+
+ );
+
+ return (
+
+ {editing ? renderEdit() : renderDisplay()}
+
+ );
+ }
+}
+
+Popup.defaultProps = {
+ href: "",
+ onEdit: _.noop,
+};
+
+Popup.propTypes = {
+ href: PT.string,
+ onEdit: PT.func,
+};
diff --git a/src/apps/earn/src/components/Editor/Link/Popup/style.scss b/src/apps/earn/src/components/Editor/Link/Popup/style.scss
new file mode 100644
index 000000000..8fb4ddd90
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/Link/Popup/style.scss
@@ -0,0 +1,26 @@
+@import "@earn/styles/mixins";
+
+.edit {
+ height: $base-unit * 4;
+ width: $base-unit * 4;
+}
+
+// Competing against some globals
+.container {
+ a {
+ display: inline-block;
+ min-width: $base-unit * 24;
+ padding-left: $base-unit * 4;
+ vertical-align: middle;
+ }
+
+ input[type="text"] {
+ display: inline-block;
+ height: $base-unit * 6;
+ margin: 0;
+ padding: 0;
+ margin-left: $base-unit * 1;
+ width: $base-unit * 48;
+ vertical-align: middle;
+ }
+}
diff --git a/src/apps/earn/src/components/Editor/Link/index.jsx b/src/apps/earn/src/components/Editor/Link/index.jsx
new file mode 100644
index 000000000..d36a082cf
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/Link/index.jsx
@@ -0,0 +1,46 @@
+/**
+ * Draft Decorator Component
+ * Renders links within the draft component including a popup Tooltip to edit
+ */
+import PT from "prop-types";
+
+import { Tooltip } from "~/libs/ui";
+
+import Popup from "./Popup";
+
+const Link = ({ children, contentState, entityKey, updateEntityData }) => {
+ const { href, triggerPopup } = contentState.getEntity(entityKey).getData();
+
+ const popup = (
+ {child}
;
+ }
+ return React.createElement(thisType[0], { className }, child);
+ }
+ return "); + state = convertFromHTML(state); + state = ContentState.createFromBlockArray( + state.contentBlocks, + state.entityMap + ); + state = EditorState.createWithContent(state, this.mdUtils); + this.onChange(state); + } + } + + onChange(newState) { + const { connector } = this.props; + this.mdUtils.parse(newState.getCurrentContent()); + if (connector && connector.previewer) { + connector.previewer.setVisible(true); + connector.previewer.setContent(this.mdUtils.getHtml()); + } + if (this.editor) { + const selfState = this.mdUtils.highlight(newState); + if (selfState !== newState) { + this.setState({ editor: selfState }); + } + } + } + + getHtml() { + return this.mdUtils.getHtml(); + } + + setHtml(html) { + let state = this.turndown.turndown(html); + state = state.replace(/\n/g, "
"); + state = convertFromHTML(state); + state = ContentState.createFromBlockArray( + state.contentBlocks, + state.entityMap + ); + state = EditorState.createWithContent(state, this.mdUtils); + this.onChange(state); + } + + insertImage() { + setImmediate(() => this.setState({ gui: GUI_STATES.IMAGE_EDIT_MODAL })); + } + + render() { + const { connector, id } = this.props; + const st = this.state; + return ( +
+ {st.gui === GUI_STATES.IMAGE_EDIT_MODAL ? (
+ this.setState({ gui: GUI_STATES.REGULAR })}
+ />
+ ) : null}
+ ({
+ component: BlockWrapper,
+ editable: true,
+ props: { type: block.getType() },
+ })}
+ connector={connector}
+ decorator={this.mdUtils}
+ editorState={st.editor}
+ id={id}
+ onChange={(state) => this.onChange(state)}
+ ref={(node) => {
+ this.editor = node;
+ }}
+ />
+
+ );
+ }
+}
+
+MarkdownEditor.defaultProps = {
+ connector: new Connector(),
+ id: null,
+ initialContent: null,
+};
+
+MarkdownEditor.propTypes = {
+ connector: PT.shape(),
+ id: PT.string,
+ initialContent: PT.string,
+};
diff --git a/src/apps/earn/src/components/Editor/MarkdownEditor/inlineWrapperFactory.jsx b/src/apps/earn/src/components/Editor/MarkdownEditor/inlineWrapperFactory.jsx
new file mode 100644
index 000000000..fe0684052
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/MarkdownEditor/inlineWrapperFactory.jsx
@@ -0,0 +1,35 @@
+import PT from "prop-types";
+import React from "react";
+
+function InlineWrapper({ children, hrefs, key }) {
+ if (!key || key === "text") {
+ return {children};
+ }
+ if (key === "mdSyntax") {
+ return {children};
+ }
+ if (key === "inlineCode") {
+ return {children};
+ }
+ const keys = key.split("-");
+ const child = InlineWrapper({
+ children,
+ key: keys.slice(1).join("-"),
+ });
+
+ if (keys[0].startsWith("a:")) {
+ return {children};
+ }
+
+ return React.createElement(keys[0], {}, child);
+}
+
+InlineWrapper.propTypes = {
+ children: PT.node.isRequired,
+ hrefs: PT.shape.isRequired,
+ key: PT.string.isRequired,
+};
+
+export default function inlineWrapperFactory(key, hrefs) {
+ return ({ children }) => InlineWrapper({ children, hrefs, key });
+}
diff --git a/src/apps/earn/src/components/Editor/MarkdownEditor/md-utils.js b/src/apps/earn/src/components/Editor/MarkdownEditor/md-utils.js
new file mode 100644
index 000000000..23689f398
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/MarkdownEditor/md-utils.js
@@ -0,0 +1,456 @@
+/**
+ * Markdown utilities for DraftJS editor.
+ *
+ * There are plenty of Markdown-related plugins for DraftJS in Internet, but it
+ * looks like nobody made it right so far; thus here we go with the correct
+ * solution.
+ */
+
+import _ from "lodash";
+import Markdown from "markdown-it";
+
+import { EditorState, SelectionState, Modifier } from "draft-js";
+
+import { List } from "immutable";
+
+import shortId from "shortid";
+
+import inlineWrapperFactory from "./inlineWrapperFactory";
+
+import "./style.scss";
+
+/**
+ * Counts the specified characters in the given string.
+ * @param {String} string
+ * @param {String} char
+ * @return {Number}
+ */
+function count(string, char) {
+ let pos = -1;
+ let res = 0;
+ for (;;) {
+ const c = string[(pos += 1)];
+ if (c === char) res += 1;
+ else if (!c) return res;
+ }
+}
+
+/**
+ * Finds position of the n-th occurance of the specified character in the given
+ * string, and returns it. Returns -1, if not found.
+ * @param {String} string
+ * @param {String} char
+ * @param {Number} n
+ * @return {Number}
+ */
+function findNth(string, char, n) {
+ let pos = -1;
+ let res = n;
+ for (;;) {
+ const c = string[(pos += 1)];
+ if (c === char) res -= 1;
+ if (!res) return pos;
+ if (!c) return -1;
+ }
+}
+
+/* Internal. */
+function newSelector(key, pos = 0, end, endKey) {
+ return SelectionState.createEmpty(key).merge({
+ anchorOffset: pos,
+ focusKey: endKey === undefined ? key : endKey,
+ focusOffset: end === undefined ? pos : end,
+ });
+}
+
+/* Internal. */
+function insertChar(content, key, pos, char) {
+ return Modifier.insertText(content, newSelector(key, pos), char);
+}
+
+/* Internal. */
+function mergeBlockData(content, key, data) {
+ return Modifier.mergeBlockData(content, newSelector(key), data);
+}
+
+/* Internal. */
+function removeChar(content, key, pos) {
+ return Modifier.removeRange(content, newSelector(key, pos, pos + 1));
+}
+
+/* Internal. */
+function removeLastChar(content, key, pos) {
+ const s = newSelector(key, pos, 0, content.getKeyAfter(key));
+ return Modifier.removeRange(content, s);
+}
+
+/* Internal. */
+function splitBlock(content, key, pos) {
+ return Modifier.splitBlock(content, newSelector(key, pos));
+}
+
+/* Internal. */
+function setBlockType(content, key, type) {
+ const block = content.getBlockForKey(key);
+ if (block.getType() === type) return content;
+ return Modifier.setBlockType(content, newSelector(key, 0), type);
+}
+
+export default class MdUtils {
+ /**
+ * Constructs a new MdUtils instance.
+ * @param {ContentState} contentState Optional. If provided, constructor will
+ * automatically call parse(contentState) in the end of initialization.
+ */
+ constructor(contentState) {
+ this.markdown = new Markdown();
+ this.markdown.disable(["table"]);
+ this.tokens = [];
+ if (contentState) this.parse(contentState);
+ }
+
+ /**
+ * Private.
+ *
+ * Merges and/or splits DraftJS blocks to ensure that the current block
+ * contains exactly the specified number of lines.
+ *
+ * @param {Number} numLines
+ */
+ alignLines(numLines) {
+ for (;;) {
+ const text = this.content.getBlockForKey(this.key).getText();
+ const numLinesInBlock = 1 + count(text, "\n");
+ if (numLinesInBlock < numLines) {
+ const nextKey = this.content.getKeyAfter(this.key);
+ if (!nextKey) return;
+ this.content = removeLastChar(this.content, this.key, text.length);
+ this.content = insertChar(this.content, this.key, text.length, "\n");
+ if (this.selection.getAnchorKey() === nextKey) {
+ this.selection = this.selection.merge({
+ anchorKey: this.key,
+ anchorOffset: this.selection.getAnchorOffset() + text.length + 1,
+ });
+ }
+ if (this.selection.getFocusKey() === nextKey) {
+ this.selection = this.selection.merge({
+ focusKey: this.key,
+ focusOffset: this.selection.getFocusOffset() + text.length + 1,
+ });
+ }
+ } else if (numLinesInBlock > numLines) {
+ const splitPoint = findNth(text, "\n", numLines);
+ this.content = removeChar(this.content, this.key, splitPoint);
+ this.content = splitBlock(this.content, this.key, splitPoint);
+ if (
+ this.selection.getAnchorKey() === this.key &&
+ this.selection.getAnchorOffset() > splitPoint
+ ) {
+ this.selection = this.selection.merge({
+ anchorKey: this.content.getKeyAfter(this.key),
+ anchorOffset: this.selection.getAnchorOffset() - splitPoint - 1,
+ });
+ }
+ if (
+ this.selection.getFocusKey() === this.key &&
+ this.selection.getFocusOffset() > splitPoint
+ ) {
+ this.selection = this.selection.merge({
+ focusKey: this.content.getKeyAfter(this.key),
+ focusOffset: this.selection.getFocusOffset() - splitPoint - 1,
+ });
+ }
+ } else return;
+ }
+ }
+
+ getDecorations(block) {
+ _.noop(this);
+ const res = block.getData().get("decorations") || List();
+ return res.setSize(block.getLength());
+ }
+
+ getComponentForKey(key) {
+ _.noop(this);
+ return inlineWrapperFactory(key, this.hrefs);
+ }
+
+ getPropsForKey() {
+ _.noop(this);
+ return {};
+ }
+
+ /**
+ * Highlights Markdown syntax in the given DraftJS state.
+ * @param {EditorState} state DraftJS EditorState that holds a plain text with
+ * a valid Markdown markup, previously loaded into this MdUtils instance via
+ * parse(..) method.
+ * @return {EditorState} Resulting state with the proper formatting and
+ * styling of the markup.
+ */
+ highlight(state) {
+ this.blockTypes = [];
+ this.content = state.getCurrentContent();
+ this.decorations = {};
+ this.decoreLevel = 0;
+ this.endLines = [];
+ this.hrefs = {};
+ this.key = this.content.getFirstBlock().getKey();
+ this.selection = state.getSelection();
+ this.styleLine = 0;
+ this.tokenId = 0;
+ this.tokens.forEach(() => this.highlightNextToken());
+ while (this.key) {
+ this.content = setBlockType(this.content, this.key, "unstyled");
+ this.highlightInline();
+ this.key = this.content.getKeyAfter(this.key);
+ }
+ const res = EditorState.push(state, this.content, "custom");
+ return EditorState.acceptSelection(res, this.selection);
+ }
+
+ /**
+ * Private.
+ *
+ * Highlights inline Markdown syntax in the current DraftJS block.
+ */
+ highlightInline(subTokens) {
+ let pos = 0;
+ const text = this.content.getBlockForKey(this.key).getText();
+ const res = new Array(text.length);
+ res.fill("mdSyntax");
+
+ if (subTokens) {
+ const styles = [];
+ subTokens.forEach((st) => {
+ switch (st.type) {
+ case "link_open": {
+ const id = shortId().replace(/-/g, ":");
+ [[, this.hrefs[id]]] = st.attrs;
+ styles.push(`a:${id}`);
+ break;
+ }
+
+ case "em_open":
+ case "strong_open":
+ styles.push(st.tag);
+ break;
+
+ case "s_open":
+ styles.push("strike");
+ break;
+
+ case "em_close":
+ case "link_close":
+ case "s_close":
+ case "strong_close":
+ styles.pop();
+ break;
+
+ case "code_inline": {
+ if (!st.content.length) break;
+ let style = styles.join("-");
+ if (!style) style = "inlineCode";
+ else style = `${style}-inlineCode`;
+ pos = text.indexOf(st.content, pos);
+ const end = pos + st.content.length;
+ while (pos < end) {
+ res[pos] = style;
+ pos += 1;
+ }
+ break;
+ }
+
+ case "text": {
+ if (!st.content.length) break;
+ pos = text.indexOf(st.content, pos);
+ const end = pos + st.content.length;
+ const style = styles.join("-") || "text";
+ while (pos < end) {
+ res[pos] = style;
+ pos += 1;
+ }
+ if (styles.length && _.last(styles).startsWith("a:")) {
+ pos += 3 + _.last(styles).slice(2).length;
+ }
+ break;
+ }
+
+ default:
+ }
+ });
+ }
+
+ let i = text.length - 1;
+ while (i >= 0 && text[i] === " ") {
+ res[i] = "text";
+ i -= 1;
+ }
+ while (i >= 0 && res[i] === "mdSyntax") i -= 1;
+ if (i < 0) res.fill("mdSyntax");
+
+ const decorations = List(res);
+ this.content = mergeBlockData(this.content, this.key, { decorations });
+ }
+
+ /**
+ * Private.
+ *
+ * Highlights Markdown syntax in the specified number of lines, starting from
+ * the first non-styled line.
+ *
+ * @param {Number} numLines
+ */
+ highlightLines(numLines) {
+ this.alignLines(numLines);
+ const type = this.blockTypes.join("-") || "unstyled";
+ this.content = setBlockType(this.content, this.key, type);
+ }
+
+ /**
+ * Private.
+ *
+ * Highlights all Markdown syntax between the last highlighted DraftJS block
+ * and the current MarkdownIt token.
+ */
+ highlightNextToken() {
+ const token = this.tokens[this.tokenId];
+
+ /* If token opens a new range, we:
+ * - Style any block before this token line;
+ * - Remember the range of this token, and the line of the first non-styled
+ * block. */
+ if (token.map) {
+ const linesBefore = token.map[0] - this.styleLine;
+ if (linesBefore) {
+ this.highlightLines(linesBefore);
+ this.highlightInline();
+ [this.styleLine] = token.map;
+ this.key = this.content.getKeyAfter(this.key);
+ }
+ }
+
+ switch (token.type) {
+ case "blockquote_open":
+ case "bullet_list_open":
+ this.decoreLevel += 1;
+ this.blockTypes.push(`${token.tag}:${this.decoreLevel}`);
+ this.endLines.push(token.map[1]);
+ break;
+
+ case "ordered_list_open":
+ this.decoreLevel += 2;
+ this.blockTypes.push(`${token.tag}:${this.decoreLevel}`);
+ this.endLines.push(token.map[1]);
+ break;
+
+ case "heading_open":
+ case "list_item_open":
+ case "paragraph_open":
+ this.blockTypes.push(token.tag);
+ this.endLines.push(token.map[1]);
+ break;
+
+ case "blockquote_close":
+ case "bullet_list_close":
+ case "heading_close":
+ case "list_item_close":
+ case "ordered_list_close":
+ case "paragraph_close": {
+ const linesBefore = _.last(this.endLines) - this.styleLine;
+ if (linesBefore) {
+ this.highlightLines(linesBefore);
+ this.highlightInline();
+ this.key = this.content.getKeyAfter(this.key);
+ this.styleLine = _.last(this.endLines);
+ }
+ this.blockTypes.pop();
+ this.endLines.pop();
+
+ switch (token.type) {
+ case "blockquote_close":
+ case "bullet_list_close":
+ this.decoreLevel -= 1;
+ break;
+ case "ordered_list_close":
+ this.decoreLevel -= 2;
+ break;
+ default:
+ }
+
+ break;
+ }
+
+ case "fence": {
+ this.blockTypes.push(token.tag);
+ let numLines = token.map[1] - token.map[0];
+ const subTokens = [{ type: "text", content: token.content }];
+ const isClosed = 1 + count(token.content, "\n") < numLines;
+ if (!isClosed) {
+ let i = 1 + this.tokenId;
+ while (i < this.tokens.length && !this.tokens[i].map) i += 1;
+ if (
+ i === this.tokens.length ||
+ this.tokens[i].map[0] > token.map[1]
+ ) {
+ numLines += 1;
+ }
+ }
+ this.highlightLines(numLines);
+ this.highlightInline(subTokens);
+ this.key = this.content.getKeyAfter(this.key);
+ [, this.styleLine] = token.map;
+ this.blockTypes.pop();
+ break;
+ }
+
+ case "code_block":
+ case "hr": {
+ this.blockTypes.push(token.tag);
+ this.highlightLines(token.map[1] - token.map[0]);
+ this.highlightInline(token.children);
+ this.key = this.content.getKeyAfter(this.key);
+ [, this.styleLine] = token.map;
+ this.blockTypes.pop();
+ break;
+ }
+
+ case "inline":
+ this.highlightLines(token.map[1] - token.map[0]);
+ this.highlightInline(token.children);
+ this.key = this.content.getKeyAfter(this.key);
+ [, this.styleLine] = token.map;
+ break;
+
+ default:
+ }
+
+ this.tokenId += 1;
+ }
+
+ /**
+ * Returns HTML representation of the Markdown markup previously loaded by
+ * parse(..) method of MdUtils.
+ * @return {String}
+ */
+ getHtml() {
+ if (!this.html) {
+ this.html = this.markdown.renderer.render(this.tokens, this.env);
+ }
+ return this.html;
+ }
+
+ /**
+ * Parses the given DraftJS state. The state should contain a plain text with
+ * Markdown markup. After the parse you can call other methods of MdUtils to
+ * generate corresponding HTML markup, or DraftJS state for rendered Markdown
+ * representation, or DraftJS decorator for Markdown syntax highlighting in
+ * the original state.
+ * @param {ContentState} state
+ */
+ parse(contentState) {
+ delete this.html;
+ this.env = {};
+ this.tokens = this.markdown.parse(contentState.getPlainText(), this.env);
+ }
+}
diff --git a/src/apps/earn/src/components/Editor/MarkdownEditor/style.scss b/src/apps/earn/src/components/Editor/MarkdownEditor/style.scss
new file mode 100644
index 000000000..24c5e4fe3
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/MarkdownEditor/style.scss
@@ -0,0 +1,148 @@
+@import "@earn/styles/mixins";
+
+/* Styling of Markdown syntax highlighting. */
+.container {
+ @include tc-body-md;
+
+ overflow: hidden;
+
+ a {
+ color: $tc-dark-blue-110;
+ text-decoration: underline;
+ }
+
+ code {
+ background: $tc-gray-neutral-light;
+ border: 1px solid $tc-gray-20;
+ border-radius: 6px;
+ display: block;
+ font-family: "Roboto Mono", monospace;
+ padding: 15px 20px;
+ white-space: pre-wrap;
+
+ &:global.inline {
+ background: $tc-gray-10;
+ border: none;
+ border-radius: 0;
+ display: inline;
+ padding: 0 5px;
+ }
+ }
+
+ em {
+ font-style: italic;
+ }
+ strong {
+ font-weight: bold;
+ }
+
+ /* This styling leads to some artefacts :( */
+ :global .hr {
+ width: 100%;
+
+ > div > span > span {
+ border-top: 1px solid firebrick;
+ display: inline-block;
+ height: 0;
+ line-height: 0;
+ width: 100%;
+ }
+ }
+
+ :global {
+ li {
+ display: inline-block;
+ position: relative;
+
+ &.leadingLi {
+ margin-top: 10px;
+ }
+
+ &::before {
+ border-left: 3px solid $tc-gray-40;
+ content: "";
+ height: 100%;
+ position: absolute;
+ }
+ }
+
+ $offset: -15;
+
+ @for $level from 0 to 10 {
+ ol.md-syntax-level-#{$level} > li::before {
+ left: #{$offset}px;
+ }
+ $offset: $offset + 18;
+ }
+
+ $offset: -5;
+
+ @for $level from 0 to 10 {
+ ul.md-syntax-level-#{$level} > li::before {
+ left: #{$offset}px;
+ }
+ $offset: $offset + 18;
+ }
+
+ .blockquote {
+ position: relative;
+
+ &::before {
+ border-left: 3px solid $tc-light-blue;
+ content: "";
+ height: 100%;
+ position: absolute;
+ }
+ }
+
+ $offset: -15;
+
+ @for $level from 0 to 10 {
+ .blockquote.md-syntax-level-#{$level}::before {
+ left: #{$offset}px;
+ }
+ $offset: $offset + 18;
+ }
+
+ div,
+ .h1,
+ .h2,
+ .h3,
+ .h4,
+ .h5,
+ .h6,
+ p {
+ @include tc-body-md;
+
+ margin: 0 !important;
+ text-transform: none;
+ }
+
+ .h1 .text {
+ @include tc-heading-xl;
+ }
+ .h2 .text {
+ @include tc-heading-lg;
+ }
+ .h3 .text {
+ @include tc-heading-md;
+ }
+ .h4 .text {
+ @include tc-heading-sm;
+ }
+ .h5 .text {
+ @include tc-heading-xs;
+ }
+ .h6 .text {
+ @include tc-heading-xs;
+ }
+
+ .mdSyntax {
+ @include tc-body-md;
+
+ color: firebrick;
+ font-family: "Roboto Mono", monospace;
+ font-weight: bold;
+ }
+ }
+}
diff --git a/src/apps/earn/src/components/Editor/MultiEditor.jsx b/src/apps/earn/src/components/Editor/MultiEditor.jsx
new file mode 100644
index 000000000..d5b236874
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/MultiEditor.jsx
@@ -0,0 +1,164 @@
+/**
+ * The MultiEditor component combines together WysiwygEditor and Markdown editor
+ * allowing to easily switch between them.
+ */
+
+import PT from "prop-types";
+import React from "react";
+import Turndown from "turndown";
+
+import { OrderedSet } from "immutable";
+
+import Connector from "./Connector";
+import MarkdownEditor from "./MarkdownEditor";
+import WysiwygEditor from ".";
+
+export const MODES = {
+ MARKDOWN: "MARKDOWN",
+ WYSIWYG: "WYSIWYG",
+};
+
+export default class MultiEditor extends React.Component {
+ constructor(props) {
+ super(props);
+ this.fakeConnector = new Connector();
+ this.fakeConnector.setToolbar(this);
+ this.id = props.id;
+ this.state = {
+ mode: props.initialMode,
+ };
+ this.turndown = new Turndown();
+ }
+
+ componentDidMount() {
+ const { connector } = this.props;
+ if (connector) {
+ connector.addEditor(this);
+ this.fakeConnector.setPreviewer(connector.previewer);
+ }
+ }
+
+ componentWillReceiveProps({ connector, id }) {
+ const { connector: prevConnector } = this.props;
+ this.id = id;
+ if (connector !== prevConnector) {
+ if (prevConnector) prevConnector.removeEditor(this);
+ if (connector) {
+ connector.addEditor(this);
+ this.fakeConnector.setPreviewer(connector.previewer);
+ }
+ }
+ }
+
+ componentWillUnmount() {
+ const { connector } = this.props;
+ if (connector) connector.removeEditor(this);
+ }
+
+ onFocusedEditorChanged(state) {
+ const { connector } = this.props;
+ if (connector) connector.setFocusedEditor(this, state);
+ }
+
+ getHtml() {
+ return this.editor.getHtml();
+ }
+
+ setHtml(html) {
+ this.editor.setHtml(html);
+ }
+
+ setMode(value) {
+ const { mode } = this.state;
+ if (value === mode) return;
+ const { connector } = this.props;
+ const state = this.editor.getHtml();
+ this.setState({ mode: value }, () => {
+ this.editor.setHtml(state);
+ if (connector) connector.setFocusedEditor(this, this.editor.state.editor);
+ });
+ }
+
+ applyBlockStyle(type) {
+ const { mode } = this.state;
+ if (mode === MODES.WYSIWYG) this.editor.applyBlockStyle(type);
+ }
+
+ applyColorStyle(type, color) {
+ const { mode } = this.state;
+ if (mode === MODES.WYSIWYG) {
+ this.editor.applyColorStyle(type, color);
+ }
+ }
+
+ focus() {
+ const { mode } = this.state;
+ if (mode === MODES.WYSIWYG) this.editor.focus();
+ }
+
+ insertImage(src, triggerModal) {
+ const { mode } = this.state;
+ switch (mode) {
+ case MODES.WYSIWYG:
+ return this.editor.insertImage(src, triggerModal);
+ case MODES.MARKDOWN:
+ return this.editor.insertImage();
+ default:
+ return undefined;
+ }
+ }
+
+ insertLink(title, href, triggerPopup) {
+ const { mode } = this.state;
+ if (mode === MODES.WYSIWYG) {
+ this.editor.insertLink(title, href, triggerPopup);
+ }
+ }
+
+ toggleInlineStyle(styleName) {
+ const { mode } = this.state;
+ if (mode === MODES.WYSIWYG) {
+ return this.editor.toggleInlineStyle(styleName);
+ }
+ return OrderedSet();
+ }
+
+ render() {
+ const { mode } = this.state;
+ switch (mode) {
+ case MODES.MARKDOWN:
+ return (
+
+ {visible ? (
+
+ );
+ }
+}
+
+Previewer.defaultProps = {
+ connector: null,
+ initialContent: "",
+};
+
+Previewer.propTypes = {
+ connector: PT.shape(),
+ initialContent: PT.string,
+};
diff --git a/src/apps/earn/src/components/Editor/Previewer/style.scss b/src/apps/earn/src/components/Editor/Previewer/style.scss
new file mode 100644
index 000000000..d1776dade
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/Previewer/style.scss
@@ -0,0 +1,25 @@
+@import "@earn/styles/mixins";
+
+.container {
+ background: white;
+ overflow: hidden;
+ position: relative;
+}
+
+.content {
+ border: 1px solid $tc-gray-40;
+ height: 33vh;
+ margin: 0 0 10px;
+ padding-top: 25px;
+}
+
+.title {
+ @include tc-label-xs;
+
+ background: $tc-gray-neutral-dark;
+ color: $tc-gray-40;
+ left: 1px;
+ position: absolute;
+ padding: 5px 10px;
+ top: 1px;
+}
diff --git a/src/apps/earn/src/components/Editor/Toolbar/ColorPicker/index.jsx b/src/apps/earn/src/components/Editor/Toolbar/ColorPicker/index.jsx
new file mode 100644
index 000000000..4bc508922
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/Toolbar/ColorPicker/index.jsx
@@ -0,0 +1,43 @@
+/**
+ *
+
+ ) : null}
+ Rendering Preview
+
+
+ {visible ? (
+ {
+ e.preventDefault();
+ onChange(_.findKey(EDITOR_COLOR_MAP, (value) => value === hex));
+ }}
+ className={styled("color-picker")}
+ />
+ ) : null}
+
+);
+
+ColorPicker.defaultProps = {
+ onChange: _.noop,
+ style: "",
+ visible: false,
+};
+
+ColorPicker.propTypes = {
+ onChange: PT.func,
+ style: PT.string,
+ visible: PT.bool,
+};
+
+export default ColorPicker;
diff --git a/src/apps/earn/src/components/Editor/Toolbar/ColorPicker/style.scss b/src/apps/earn/src/components/Editor/Toolbar/ColorPicker/style.scss
new file mode 100644
index 000000000..a3272ea00
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/Toolbar/ColorPicker/style.scss
@@ -0,0 +1,7 @@
+// The react-color component has inline styles which we need to overwrite
+.color-picker {
+ display: inline-flex !important;
+ flex-wrap: nowrap !important;
+ position: absolute !important;
+ width: auto !important;
+}
diff --git a/src/apps/earn/src/components/Editor/Toolbar/index.jsx b/src/apps/earn/src/components/Editor/Toolbar/index.jsx
new file mode 100644
index 000000000..587f11dd5
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/Toolbar/index.jsx
@@ -0,0 +1,298 @@
+/**
+ *
+ {connector.focusedEditor instanceof MultiEditor ? (
+ {
+ const editor = st.editor || connector.previousEditor;
+ editor.focus();
+ setImmediate(() => {
+ editor.applyColorStyle("TEXT", color);
+ this.setState({ pickingTextColor: false });
+ });
+ }}
+ style={styles["text-color-picker"]}
+ visible={st.pickingTextColor}
+ />
+
+ {/* NOTE: The Highlight buttons is commented out because of an ask
+ * not to show this option in the challenge specs editor, at least
+ * for now. A better solution we should implement in future will be
+ * to customize permitted operations via editor props, thus not
+ * removing the button code. */
+ /*
+
+ {
+ const editor = st.editor || this.props.connector.previousEditor;
+ editor.focus();
+ setImmediate(() => {
+ editor.applyColorStyle('HIGHLIGHT', color);
+ this.setState({ pickingHighlightColor: false });
+ });
+ }}
+ style={style['highlight-color-picker']}
+ visible={st.pickingHighlightColor}
+ />
+ */}
+
+
+
+
+
+
+
+
+
+
+ ) : null}
+
+
+
+
+
+
+ {createStyleButton("B", "BOLD", st.BOLD, styles.bold)}
+ {createStyleButton("I", "ITALIC", st.ITALIC, styles.italic)}
+ {createStyleButton("U", "UNDERLINE", st.UNDERLINE, styles.underline)}
+ {createStyleButton(
+ "S",
+ "STRIKETHROUGH",
+ st.STRIKETHROUGH,
+ styles.strikethrough
+ )}
+ {createStyleButton("Monospace", "CODE", st.CODE, styles.inlineCode)}
+
+
+
+
+
+
+
+ {/* I guess, we gonna drop the inline Markdown option. Just for
+ * a case, let's keep the button code around for a bit longer. */
+ /*
+
+ */}
+ this.focus()}
+ onKeyPress={() => this.focus()}
+ onFocus={() => this.focus()}
+ role="button"
+ tabIndex={0}
+ >
+ {
+ const editorState = RichUtils.handleKeyCommand(state, command);
+ if (editorState) {
+ connector.setFocusedEditor(this, editorState);
+ this.setState({ editor: editorState });
+ return true;
+ }
+ return false;
+ }}
+ onChange={(newState) => {
+ const p = _.get(this, "props.connector.previewer");
+ if (p) p.setVisible(false);
+
+ const hasFocus = newState.getSelection().getHasFocus();
+ if (
+ !connector.modified &&
+ this.initialContent &&
+ this.initialContent !== newState.getCurrentContent()
+ ) {
+ connector.modified = true;
+ }
+ connector.setFocusedEditor(hasFocus ? this : null, newState);
+ this.setState({ editor: newState });
+ }}
+ plugins={[st.markdown ? this.markdownPlugin : {}, this.customPlugin]}
+ ref={(node) => {
+ this.node = node;
+ }}
+ spellCheck
+ />
+
+ );
+ }
+}
+
+EditorWrapper.defaultProps = {
+ connector: new Connector(),
+ id: null,
+ initialContent: null,
+ theme: {},
+};
+
+EditorWrapper.propTypes = {
+ connector: PT.instanceOf(Connector),
+ id: PT.string,
+ initialContent: PT.string,
+ theme: PT.shape(),
+};
diff --git a/src/apps/earn/src/components/Editor/plugin.jsx b/src/apps/earn/src/components/Editor/plugin.jsx
new file mode 100644
index 000000000..2941806cd
--- /dev/null
+++ b/src/apps/earn/src/components/Editor/plugin.jsx
@@ -0,0 +1,102 @@
+/**
+ * Custom DraftJS plugin.
+ *
+ * Facilitates the extra functionality required for
+
+ {details}
+ ++ We are sorry that you have encountered this problem. Please, contact our + support + support@topcoder.com + to help us resolve it as soon as possible. +
+
+ {optionsWithKey.map((o) => (
+
+ {errorMsg ? {errorMsg} : null}
+
+
+
+ ))}
+
+ 
+ 
+
+ 
+
+
+ 
+
+
+ 
+
+
+ YAY! You are almost done!
+
+ Looks like you're not a Topcoder member yet. Or maybe you're
+ not logged in?
+
+
+
+
+
+ + Already a member? Login here +
+-
+ {subMenuItem.children.map((subSubmenuItem) => (
+
- + { + onSelectMenuItem(subSubmenuItem.name, subSubmenuItem.path); + }} + > + {subSubmenuItem.name} + + + ))} +
-
+ {menuItem.children.map((subMenuItem) => (
+
- + { + onSelectMenuItem( + subMenuItem.name, + isExpandable(subMenuItem) ? null : subMenuItem.path + ); + }} + > + {subMenuItem.name} + + {isExpandable(subMenuItem) && renderSubSubmenu(subMenuItem)} + + ))} +
setFocused(true)}
+ onBlurCapture={() => setFocused(false)}
+ className={[
+ styles.container,
+ styles[size],
+ className,
+ !!error ? styles['hasError'] : '',
+ ].join(' ')}
+ >
+ {label && (
+
+ {label + (isRequired ? ' *' : '')}
+
+ )}
+
+ {error && {error}
}
+
+ );
+};
+
+MultiSelect.propTypes = {
+ className: PT.string,
+ label: PT.string,
+ onChange: PT.func.isRequired,
+ options: PT.array.isRequired,
+ optLabelKey: PT.string,
+ optValueKey: PT.string,
+ placeholder: PT.string,
+ value: PT.array.isRequired,
+};
+
+export default MultiSelect;
diff --git a/src/apps/earn/src/components/MultiSelect/styles.scss b/src/apps/earn/src/components/MultiSelect/styles.scss
new file mode 100644
index 000000000..6a511cf42
--- /dev/null
+++ b/src/apps/earn/src/components/MultiSelect/styles.scss
@@ -0,0 +1,281 @@
+@import "../../styles/mixins";
+@import "../../styles/variables";
+
+.container {
+ z-index: 3;
+ position: relative;
+ border: 1px solid $control-border-color;
+ border-radius: $control-border-radius;
+
+ &.hasError {
+ border-width: 2px;
+ border-color: #ef476f;
+
+ .label {
+ color: #ef476f;
+ }
+
+ &.large {
+ .select:global(.Select) {
+ :global(.Select-input) {
+ height: 48px;
+ }
+
+ :global(.Select-placeholder) {
+ line-height: 48px;
+ }
+
+ :global(.Select-input) {
+ height: 48px;
+
+ input {
+ margin-top: 6px;
+ }
+ }
+
+ :global(.Select-arrow-zone) {
+ padding-right: 14px;
+ }
+
+ &.hasValues {
+ :global(.Select-input) {
+ input {
+ margin-top: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.label {
+ z-index: 2;
+ position: absolute;
+ left: 9px;
+ top: 0;
+ padding: 0 7px;
+ font-size: 12px;
+ line-height: 10px;
+ transform: translateY(-50%);
+ color: $control-border-color;
+ background-color: #fff;
+ &.focused {
+ color: $gui-kit-level-2;
+ }
+}
+
+.error {
+ margin: 15px 0 0 12px;
+ font-size: 14px;
+ color: #2A2A2A;
+}
+
+.arrow {
+ width: auto;
+}
+
+.large {
+ .error {
+ margin: 20px 0 0 15px;
+ }
+
+ .select:global(.Select) {
+ :global(.Select-input) {
+ height: 50px;
+ }
+
+ :global(.Select-placeholder) {
+ line-height: 50px;
+ }
+
+ :global(.Select-input) {
+ height: 50px;
+
+ input {
+ margin-top: 7px;
+ }
+ }
+
+ :global(.Select-arrow-zone) {
+ padding-right: 15px;
+ }
+
+ &.hasValues {
+ :global(.Select-input) {
+ input {
+ margin-top: 0;
+ }
+ }
+ }
+ }
+}
+
+.select:global(.Select) {
+ display: block;
+
+ &.hasValues {
+ :global(.Select-multi-value-wrapper) {
+ padding: 12px 8px;
+ }
+
+ :global(.Select-input) {
+ height: 25px;
+ }
+ }
+
+ &:global(.is-open) {
+ :global(.Select-arrow-zone) {
+ transform: scale(1, -1);
+ }
+ }
+
+ &:global(.is-focused) {
+ :global(.Select-input) {
+ margin-left: 16px;
+ }
+
+ :global(.Select-placeholder) {
+ display: none;
+ }
+
+ &.hasValues {
+ :global(.Select-input) {
+ margin-left: 5px;
+ }
+ }
+ }
+
+ :global(.Select-control) {
+ border: none;
+ box-shadow: none;
+ background-color: transparent;
+ }
+
+ :global(.Select-input) {
+ height: 38px;
+
+ input {
+ border: none;
+ height: auto;
+ outline: none;
+ box-shadow: none;
+ }
+ }
+
+ :global(.Select-multi-value-wrapper) {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ }
+
+ :global(.Select-clear) {
+ @include roboto-regular;
+ font-size: 28px;
+ line-height: 28px;
+ color: #808080;
+ }
+
+ :global(.Select-value) {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+ margin-left: 5px;
+ margin-top: 4px;
+ border: none;
+ border-radius: 5px;
+ padding: 5px 7px;
+ height: 25px;
+ background-color: #e9e9e9;
+ }
+
+ :global(.Select-value-label) {
+ order: 1;
+ margin-right: 7px;
+ padding: 0;
+ @include roboto-regular;
+ font-size: 12px;
+ line-height: 15px;
+ letter-spacing: 0.55px;
+ color: $body-color;
+ }
+
+ :global(.Select-value-icon) {
+ order: 2;
+ margin: 0;
+ border: none;
+ padding: 0;
+ width: 7px;
+ height: 7px;
+ font-size: 0;
+ line-height: 0;
+ color: transparent;
+ background-image: url("../../assets/icons/icon-cross.png");
+ background-size: 7px 7px;
+ background-repeat: no-repeat;
+ }
+
+ :global(.Select-placeholder) {
+ padding-left: 16px;
+ @include roboto-regular;
+ font-size: 14px;
+ line-height: 38px;
+ background-color: transparent;
+ color: #aaa;
+ }
+
+ :global(.Select-menu-outer) {
+ z-index: 1;
+ position: absolute;
+ left: -1px;
+ top: 100%;
+ right: -1px;
+ margin-top: 2px;
+ border: 1px solid $control-border-color;
+ border-radius: 0;
+ padding: 0;
+ width: auto;
+ max-height: 200px;
+ background-color: #fff;
+ box-shadow: none;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ :global(.Select-menu) {
+ padding: 9px 0;
+ max-height: 198px;
+ overflow-y: auto;
+ }
+
+ :global(.Select-option) {
+ display: block;
+ padding: 0 20px 1px;
+ font-size: 16px;
+ line-height: 26px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ background-color: #fff;
+ color: $body-color;
+ overflow: hidden;
+ cursor: pointer;
+ }
+
+ :global(.Select-option:last-child) {
+ border-radius: 0;
+ }
+
+ :global(.Select-option.is-selected) {
+ background-color: #efefef;
+ color: #fff;
+ }
+
+ :global(.Select-option.is-focused) {
+ background-color: #229174;
+ color: #fff;
+ }
+
+ :global(.Select-option.is-selected.is-focused) {
+ background-color: #1a7059;
+ color: #fff;
+ }
+}
diff --git a/src/apps/earn/src/components/Pagination/index.jsx b/src/apps/earn/src/components/Pagination/index.jsx
new file mode 100644
index 000000000..0c6d07b40
--- /dev/null
+++ b/src/apps/earn/src/components/Pagination/index.jsx
@@ -0,0 +1,142 @@
+import { useCallback, useMemo } from "react";
+import PT from "prop-types";
+import cn from "classnames";
+
+import { IconOutline, Button } from "~/libs/ui";
+
+import Dropdown from "../Dropdown";
+import { getSelectedDropdownOption } from "../../utils";
+
+import styles from "./styles.scss";
+
+/**
+ * Displays pagination with menu to choose page size.
+ *
+ * @param {Object} props component properties
+ * @param {string} [props.className] class name added to root element
+ * @param {string} [props.pageSizeClassName] class name for page size select
+ * @param {string} [props.label] label displayed to the left of page size dropdown
+ * @param {string} [props.pageSizeLabel] label displayed at the top of page size dropdown
+ * @param {(v: number) => void} props.onPageNumberClick function called when page button is clicked
+ * @param {(v: number) => void} props.onPageSizeChange function called when page size is changed
+ * @param {Object} props.pageSizeOptions page size options object
+ * @param {Object} props.pagination pagination object
+ * @returns {JSX.Element}
+ */
+const Pagination = ({
+ className,
+ label,
+ pageSizeClassName,
+ pageSizeLabel,
+ onPageNumberClick,
+ onPageSizeChange,
+ pageSizeOptions,
+ pagination,
+}) => {
+ const { pageCount, pageNumber, pageSize } = pagination;
+
+ const options = useMemo(
+ () =>
+ pageSizeOptions.map((option) => {
+ return { ...option, selected: option.value === pageSize };
+ }),
+ [pageSize, pageSizeOptions]
+ );
+
+ const onChange = useCallback(
+ (options) => {
+ onPageSizeChange(+getSelectedDropdownOption(options).value);
+ },
+ [onPageSizeChange]
+ );
+
+ const onPageButtonClick = useCallback(
+ (event) => {
+ onPageNumberClick(+event.currentTarget.dataset.value);
+ },
+ [onPageNumberClick]
+ );
+
+ const pageButtons = [];
+ let pageStart = pageNumber > 2 ? pageNumber - 1 : 1;
+ pageStart = Math.max(Math.min(pageStart, pageCount - 2), 1);
+ let pageEnd = Math.min(pageStart + 2, pageCount);
+ if (pageStart > 1) {
+ pageButtons.push(
+
+ );
+ }
+ for (let n = pageStart; n <= pageEnd; n++) {
+ pageButtons.push(
+
+ );
+ }
+ if (pageEnd < pageCount) {
+ pageButtons.push(
+
+ );
+ }
+ return (
+
+
+ );
+};
+
+Pagination.propTypes = {
+ className: PT.string,
+ pageSizeClassName: PT.string,
+ id: PT.string.isRequired,
+ label: PT.string,
+ pageSizeLabel: PT.string,
+ onPageNumberClick: PT.func.isRequired,
+ onPageSizeChange: PT.func.isRequired,
+ pageSizeOptions: PT.arrayOf(
+ PT.shape({
+ value: PT.oneOfType([PT.number, PT.string]).isRequired,
+ label: PT.string.isRequired,
+ })
+ ),
+ pagination: PT.shape({
+ pageCount: PT.number.isRequired,
+ pageNumber: PT.number.isRequired,
+ pageSize: PT.number.isRequired,
+ }),
+};
+
+export default Pagination;
diff --git a/src/apps/earn/src/components/Pagination/styles.scss b/src/apps/earn/src/components/Pagination/styles.scss
new file mode 100644
index 000000000..b6af06340
--- /dev/null
+++ b/src/apps/earn/src/components/Pagination/styles.scss
@@ -0,0 +1,34 @@
+@import '@libs/ui/styles/includes';
+@import "../../styles/mixins";
+@import "../../styles/variables";
+
+.pagination {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.label {
+ margin: 0 7px;
+ font-size: 14px;
+ line-height: 22px;
+ white-space: nowrap;
+}
+
+.pageSize {
+ flex: 0 0 auto;
+ width: 80px;
+}
+
+.pageButtons {
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: $sp-1;
+ margin-left: auto;
+ padding-left: 20px;
+
+ @include desktop {
+ padding-left: 40px;
+ }
+}
diff --git a/src/apps/earn/src/components/Panel/index.jsx b/src/apps/earn/src/components/Panel/index.jsx
new file mode 100644
index 000000000..f3d3cd530
--- /dev/null
+++ b/src/apps/earn/src/components/Panel/index.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+import PT from "prop-types";
+
+import styles from "./styles.scss";
+import { styled as styledCss } from "@earn/utils";
+const styled = styledCss(styles)
+
+const Panel = ({ children }) => {pageButtons}
+ {children}
;
+
+Panel.propTypes = {
+ children: PT.node,
+};
+
+const PanelHeader = ({ children }) => (
+ {children}
+);
+
+PanelHeader.propTypes = {
+ children: PT.node,
+};
+
+const PanelBody = ({ children }) => (
+ {children}
+);
+
+PanelBody.propTypes = {
+ children: PT.node,
+};
+
+const PanelFooter = ({ children }) => (
+ {children}
+);
+
+PanelFooter.propTypes = {
+ children: PT.node,
+};
+
+Panel.Header = PanelHeader;
+Panel.Body = PanelBody;
+Panel.Footer = PanelFooter;
+
+export default Panel;
diff --git a/src/apps/earn/src/components/Panel/styles.scss b/src/apps/earn/src/components/Panel/styles.scss
new file mode 100644
index 000000000..dc47c4567
--- /dev/null
+++ b/src/apps/earn/src/components/Panel/styles.scss
@@ -0,0 +1,41 @@
+@import "@earn/styles/variables";
+@import "@earn/styles/mixins";
+
+$panel-padding-x: 24px;
+$panel-padding-y: 16px;
+
+.panel {
+ background: $white;
+ border-radius: $border-radius-lg;
+
+ @include down($mfe-screen-xs) {
+ padding: 0;
+ border-radius: 0;
+
+ .panel-header,
+ .panel-footer {
+ padding: 10px 20px;
+ border-radius: 0;
+ }
+
+ .panel-body {
+ padding: 0;
+ }
+ }
+}
+
+.panel-header {
+ padding: $panel-padding-y $panel-padding-x 0;
+ border-top-left-radius: $border-radius-lg;
+ border-top-right-radius: $border-radius-lg;
+}
+
+.panel-body {
+ padding: 0 $panel-padding-x;
+}
+
+.panel-footer {
+ padding: 0 $panel-padding-x $panel-padding-y;
+ border-bottom-left-radius: $border-radius-lg;
+ border-bottom-right-radius: $border-radius-lg;
+}
diff --git a/src/apps/earn/src/components/ProtoAvatar/index.jsx b/src/apps/earn/src/components/ProtoAvatar/index.jsx
new file mode 100644
index 000000000..13a85c961
--- /dev/null
+++ b/src/apps/earn/src/components/ProtoAvatar/index.jsx
@@ -0,0 +1,27 @@
+/**
+ * The standard ProtoAvatar component.
+ * To use it you will have to properly wrap it with react-css-super-themr,
+ * the component provided here takes care about the code interface and logic
+ * only.
+ */
+
+ import PT from 'prop-types';
+ import React from 'react';
+
+ export default function ProtoAvatar({ DefaultAvatar, theme, url }) {
+ return url
+ ?
+ {optionsWithKey.map((o) => (
+
+ {errorMsg ? {errorMsg} : null}
+
+
+
+ ))}
+ Referral Program
+ Please login to receive your referral code.
+
+
+
+
+
+ Find out how the referral program works{" "}
+
+ here
+
+ .
+
+ Sending your referral...
+
+ {error ? "Oops!" : "Congratulations!"}
+
+
+ {error ? error : "Your referral has been sent."}
+
+ {!!error &&
+ (isUserError ? (
+
+ If you think this is an error please contact
+
+ support@topcoder.com. +
+ ) : (
+ + support@topcoder.com. +
+ Looks like there is a problem on our end. Please try again.
+
+ If this persists please contact{" "} + support@topcoder.com. +
+ ))}
+ + If this persists please contact{" "} + support@topcoder.com. +
+
+
+ FIND ANOTHER GIG
+
+
+
+ )}
+
+
+ );
+};
+
+SearchField.propTypes = {
+ className: PT.string,
+ id: PT.string.isRequired,
+ size: PT.oneOf(["medium", "small"]),
+ name: PT.string.isRequired,
+ onChange: PT.func.isRequired,
+ placeholder: PT.string,
+ value: PT.oneOfType([PT.number, PT.string]),
+};
+
+export default SearchField;
diff --git a/src/apps/earn/src/components/SearchField/styles.scss b/src/apps/earn/src/components/SearchField/styles.scss
new file mode 100644
index 000000000..8460e83c1
--- /dev/null
+++ b/src/apps/earn/src/components/SearchField/styles.scss
@@ -0,0 +1,38 @@
+.container {
+ display: flex;
+ align-items: center;
+ border: 1px solid #aaa;
+ border-radius: 6px;
+ background-color: #fff;
+
+ &.medium {
+ height: 40px;
+ }
+
+ &.small {
+ height: 30px;
+ }
+}
+
+.icon {
+ margin: auto 10px;
+ width: 16px;
+ height: 16px;
+}
+
+input.input {
+ flex: 1 1 0;
+ margin: 0;
+ border: none !important;
+ padding: 8px 16px 8px 0;
+ height: 22px;
+ line-height: 22px;
+ background: none;
+ outline: none !important;
+ box-shadow: none !important;
+
+ &::placeholder {
+ text-transform: none;
+ color: #aaa;
+ }
+}
diff --git a/src/apps/earn/src/components/Select/index.jsx b/src/apps/earn/src/components/Select/index.jsx
new file mode 100644
index 000000000..c0e8a5e25
--- /dev/null
+++ b/src/apps/earn/src/components/Select/index.jsx
@@ -0,0 +1,21 @@
+import _ from "lodash";
+import ReactSelect from "react-select";
+import PT from "prop-types";
+import styles from "./style.scss";
+
+export default function Select(props) {
+ const { selectRef } = props;
+ return (
+
+
+ );
+}
+
+Select.defaultProps = {
+ selectRef: _.noop,
+};
+
+Select.propTypes = {
+ selectRef: PT.func,
+};
diff --git a/src/apps/earn/src/components/Select/style.scss b/src/apps/earn/src/components/Select/style.scss
new file mode 100644
index 000000000..f823c926c
--- /dev/null
+++ b/src/apps/earn/src/components/Select/style.scss
@@ -0,0 +1,18 @@
+.select {
+ :global {
+ // @import "react-select/dist/react-select";
+
+ width: 100%;
+
+ input.Select-input,
+ input.Select-input:focus {
+ background-color: transparent !important;
+ margin-left: 0 !important;
+ padding-right: 6px !important;
+ }
+
+ .Select-multi-value-wrapper {
+ width: 100% !important;
+ }
+ }
+}
diff --git a/src/apps/earn/src/components/SubmissionManagement/Icons/IconCloudDownload.svg b/src/apps/earn/src/components/SubmissionManagement/Icons/IconCloudDownload.svg
new file mode 100644
index 000000000..b17e3bc52
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/Icons/IconCloudDownload.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/apps/earn/src/components/SubmissionManagement/Icons/IconMinimalDown.svg b/src/apps/earn/src/components/SubmissionManagement/Icons/IconMinimalDown.svg
new file mode 100644
index 000000000..96fdc951e
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/Icons/IconMinimalDown.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/apps/earn/src/components/SubmissionManagement/Icons/IconMinimalLeft.svg b/src/apps/earn/src/components/SubmissionManagement/Icons/IconMinimalLeft.svg
new file mode 100644
index 000000000..287bf690e
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/Icons/IconMinimalLeft.svg
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/src/apps/earn/src/components/SubmissionManagement/Icons/IconMinimalRight.svg b/src/apps/earn/src/components/SubmissionManagement/Icons/IconMinimalRight.svg
new file mode 100644
index 000000000..d2905c94b
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/Icons/IconMinimalRight.svg
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/src/apps/earn/src/components/SubmissionManagement/Icons/IconMinimalUp.svg b/src/apps/earn/src/components/SubmissionManagement/Icons/IconMinimalUp.svg
new file mode 100644
index 000000000..9bf3e2d5a
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/Icons/IconMinimalUp.svg
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/src/apps/earn/src/components/SubmissionManagement/Icons/IconSearch.svg b/src/apps/earn/src/components/SubmissionManagement/Icons/IconSearch.svg
new file mode 100644
index 000000000..30f678532
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/Icons/IconSearch.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/apps/earn/src/components/SubmissionManagement/Icons/IconShare.svg b/src/apps/earn/src/components/SubmissionManagement/Icons/IconShare.svg
new file mode 100644
index 000000000..2c731ab66
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/Icons/IconShare.svg
@@ -0,0 +1,8 @@
+
+
+
+
diff --git a/src/apps/earn/src/components/SubmissionManagement/Icons/IconSquareDownload.svg b/src/apps/earn/src/components/SubmissionManagement/Icons/IconSquareDownload.svg
new file mode 100644
index 000000000..e56fda655
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/Icons/IconSquareDownload.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/apps/earn/src/components/SubmissionManagement/Icons/IconTrashSimple.svg b/src/apps/earn/src/components/SubmissionManagement/Icons/IconTrashSimple.svg
new file mode 100644
index 000000000..5b430a5e3
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/Icons/IconTrashSimple.svg
@@ -0,0 +1,10 @@
+
+
+
+
diff --git a/src/apps/earn/src/components/SubmissionManagement/Icons/IconZoom.svg b/src/apps/earn/src/components/SubmissionManagement/Icons/IconZoom.svg
new file mode 100644
index 000000000..30f678532
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/Icons/IconZoom.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/apps/earn/src/components/SubmissionManagement/ScreeningDetails/index.jsx b/src/apps/earn/src/components/SubmissionManagement/ScreeningDetails/index.jsx
new file mode 100644
index 000000000..706ff51f9
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/ScreeningDetails/index.jsx
@@ -0,0 +1,133 @@
+/**
+ * This compnent receives via props the screening object and nicely renders them.
+ * Note that this component both has the text coming directly from the screening object,
+ * and the text generated based on the screening status
+ *
+ */
+
+import PT from 'prop-types';
+import shortid from 'shortid';
+import { styled as styledCss } from '@earn/utils';
+
+import styles from './styles.scss';
+const styled = styledCss(styles);
+
+export default function ScreeningDetails(props) {
+ const {
+ screeningObject,
+ helpPageUrl,
+ } = props;
+
+ const hasWarnings = screeningObject.warnings;
+ const hasStatus = screeningObject.status;
+ const hasStatusPassed = hasStatus === 'passed';
+ const hasStatusFailed = hasStatus === 'failed';
+ const hasPending = screeningObject.status === 'pending';
+ const warnLength = screeningObject.warnings && hasWarnings.length;
+
+ const setStatusInfo = () => {
+ if (hasPending) {
+ return {
+ title: 'Pending',
+ classname: 'pending',
+ message: 'Your submission has been received, and will be screened after the end of the phase',
+ };
+ } if (hasStatusPassed && !hasWarnings) {
+ return {
+ title: 'Passed Screening',
+ classname: 'passed',
+ message: 'You have passed screening.',
+ };
+ } if (hasStatusFailed && !hasWarnings) {
+ return {
+ title: 'Failed Screening',
+ classname: 'failed',
+ message: 'You have failed screening',
+ };
+ } if (hasStatusPassed && hasWarnings) {
+ return {
+ title: 'Passed Screening with Warnings',
+ classname: 'passed',
+ message: `You have passed screening, but the screener has given you ${warnLength} warnings that you must fix in round 2.`,
+ };
+ } if (hasStatusFailed && hasWarnings) {
+ return {
+ title: 'Failed Screening with Warnings',
+ classname: 'failed',
+ message: 'You have failed screening and the screener has given you the following warning.',
+ };
+ }
+ return {
+ title: '',
+ classname: '',
+ message: 'Your submission has been received, and will be evaluated during Review phase.',
+ };
+ };
+
+ let warnings = [];
+ if (screeningObject.warnings) {
+ warnings = screeningObject.warnings.map((warning, i) => (
+
+
+ ));
+ }
+ return (
+
+
+ Warning
+
+ {' '}
+ {`${1 + i} : ${warning.brief}`}
+
+ + {warning.details} +
+
+
+ );
+}
+
+ScreeningDetails.defaultProps = {
+ screeningObject: {},
+ helpPageUrl: '',
+};
+
+ScreeningDetails.propTypes = {
+ screeningObject: PT.shape({
+ status: PT.string,
+ warnings: PT.arrayOf(PT.shape({
+ brief: PT.string.isRequired,
+ details: PT.string.isRequired,
+ })),
+ }),
+ helpPageUrl: PT.string,
+};
diff --git a/src/apps/earn/src/components/SubmissionManagement/ScreeningDetails/styles.scss b/src/apps/earn/src/components/SubmissionManagement/ScreeningDetails/styles.scss
new file mode 100644
index 000000000..2310fef9b
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/ScreeningDetails/styles.scss
@@ -0,0 +1,88 @@
+@import '@earn/styles/mixins';
+$status-space-10: $base-unit * 2;
+$status-space-15: $base-unit * 3;
+$status-space-20: $base-unit * 4;
+$status-space-25: $base-unit * 5;
+$gray-color: $tc-gray-80;
+$green-color: $tc-green;
+$red-color: $tc-red;
+
+.online-review-link {
+ background: none;
+}
+
+.screening-details {
+ font-weight: 500;
+ font-size: 14px;
+ color: $tc-black;
+ letter-spacing: 0;
+ line-height: 22px;
+
+ .screening-details-head {
+ display: flex;
+ margin-bottom: $base-unit;
+
+ .status-title {
+ font-weight: 700;
+ color: $tc-orange;
+ letter-spacing: 0;
+ line-height: $status-space-20;
+
+ .passed {
+ color: $green-color;
+ }
+
+ &.failed {
+ color: $red-color;
+ }
+
+ &.pending {
+ color: $gray-color;
+ }
+ }
+
+ .online-review-link {
+ display: block;
+ margin-left: auto;
+ line-height: $status-space-20;
+ font-weight: 400;
+ font-size: 13px;
+ color: $tc-dark-blue-110;
+ text-decoration: underline;
+ padding: 0;
+ border: none;
+ text-transform: capitalize;
+
+ &:hover {
+ opacity: 0.7;
+ }
+
+ &:focus {
+ outline: none;
+ }
+ }
+ }
+
+ .screening-warning {
+ margin-top: $status-space-15;
+ }
+
+ .more-info {
+ margin-top: $status-space-15;
+ margin-bottom: $base-unit;
+ }
+
+ .warning-bold {
+ font-weight: 700;
+ line-height: $status-space-20;
+ }
+
+ .help-btn {
+ text-align: right;
+ }
+
+ .help-link {
+ color: $tc-dark-blue-110;
+ cursor: pointer;
+ }
+}
diff --git a/src/apps/earn/src/components/SubmissionManagement/ScreeningStatus/index.jsx b/src/apps/earn/src/components/SubmissionManagement/ScreeningStatus/index.jsx
new file mode 100644
index 000000000..3110f371e
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/ScreeningStatus/index.jsx
@@ -0,0 +1,97 @@
+/**
+ * This component receives the screening object via props.
+ * Depending on status, presence and count of warnings,
+ * it renders itself in one of the ways shown in specs.
+ * When status is pending it renders just 'Not yet performed' text.
+ * When no screening object received, nothing is rendered.
+ *
+ * When hovered this object should update mouse cursor to pointer,
+ * and on click it should call the onClick() callback passed from parent.
+ * Parent code will use that signal to show/hide the panel with
+ * screening details for this submission.
+ *
+ */
+
+import _ from 'lodash';
+import React from 'react';
+import PT from 'prop-types';
+
+import { styled as styledCss } from '@earn/utils';
+
+import styles from './styles.scss';
+const styled = styledCss(styles);
+
+export default function ScreeningStatus(props) {
+ const {
+ screeningObject,
+ onShowDetails,
+ submissionId,
+ } = props;
+
+ const hasWarnings = screeningObject.warnings;
+ const hasStatus = screeningObject.status;
+ const hasStatusPassed = hasStatus === 'passed';
+ const hasStatusFailed = hasStatus === 'failed';
+ const hasPending = screeningObject.status === 'pending';
+ const warnLength = screeningObject.warnings && hasWarnings.length;
+
+ const setClassName = () => {
+ if (hasPending) {
+ return 'pending';
+ } if (hasStatusPassed && !hasWarnings) {
+ return 'pass-with-no-warn';
+ } if (hasStatusFailed && !hasWarnings) {
+ return 'fail-with-no-warn';
+ }
+ return 'has-warn';
+ };
+ const setStatusClassName = () => {
+ if (hasStatusPassed && hasWarnings) {
+ return 'passed';
+ } if (hasStatusFailed && hasWarnings) {
+ return 'failed';
+ }
+ return '';
+ };
+ return (
+
+ );
+}
+
+ScreeningStatus.defaultProps = {
+ onShowDetails: _.noop,
+};
+
+ScreeningStatus.propTypes = {
+ screeningObject: PT.shape({
+ status: PT.string,
+ warnings: PT.array,
+ }).isRequired,
+ onShowDetails: PT.func,
+ submissionId: PT.number.isRequired,
+};
diff --git a/src/apps/earn/src/components/SubmissionManagement/ScreeningStatus/styles.scss b/src/apps/earn/src/components/SubmissionManagement/ScreeningStatus/styles.scss
new file mode 100644
index 000000000..80fa75a06
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/ScreeningStatus/styles.scss
@@ -0,0 +1,68 @@
+@import '@earn/styles/mixins';
+$status-space-10: $base-unit * 2;
+$status-space-20: $base-unit * 4;
+$status-space-40: $base-unit * 8;
+$gray-color: #a3a3ad;
+$green-color: #60c700;
+$red-color: #f22f24;
+
+.status {
+ font-weight: 700;
+ display: inline-block;
+ padding: $base-unit $status-space-10;
+ border-radius: $status-space-40 0 0 $status-space-40;
+ text-transform: capitalize;
+
+ &.passed {
+ background: $tc-orange;
+ }
+
+ &.failed {
+ background: $red-color;
+ }
+}
+
+.screening-status {
+ background: $tc-gray-50;
+ border-radius: $status-space-40;
+ font-weight: 400;
+ font-size: 13px;
+ line-height: $status-space-20;
+ color: $tc-white;
+ padding: $base-unit $status-space-10;
+ display: inline-block;
+ text-transform: initial;
+ cursor: pointer;
+
+ &.has-warn {
+ padding: 0 $status-space-10 0 0;
+ }
+
+ &.pass-with-no-warn {
+ background: $green-color;
+
+ .status {
+ padding: 0 $base-unit;
+ }
+ }
+
+ &.fail-with-no-warn {
+ background: $red-color;
+
+ .status {
+ padding: 0 $base-unit;
+ }
+ }
+
+ &.pending {
+ background: transparent;
+ font-size: 15px;
+ color: $gray-color;
+ font-style: italic;
+ }
+}
+
+.warning {
+ padding-left: $status-space-10;
+ display: inline-block;
+}
diff --git a/src/apps/earn/src/components/SubmissionManagement/Submission/index.jsx b/src/apps/earn/src/components/SubmissionManagement/Submission/index.jsx
new file mode 100644
index 000000000..367db65b9
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/Submission/index.jsx
@@ -0,0 +1,145 @@
+/**
+ * This component receives via props a single submission data object,
+ * and showScreeningDetails boolean property, which should tell whether
+ * the Screening Details component should be rendered or not
+ * (and also to choose the proper orientation of arrow icon).
+ *
+ * Also, this component will receive the following callbacks to be triggered
+ * when user clicks on buttons/icons/links:
+ * onDelete() (to be triggered by delete icon),
+ * onDownload() (to be triggered by download icon),
+ * onShowDetails() (to be triggered by details arrow icon, and also by screening status component).
+ */
+
+import _ from 'lodash';
+import moment from 'moment';
+import { COMPETITION_TRACKS, CHALLENGE_STATUS, safeForDownload } from '@earn/utils/tc';
+
+import PT from 'prop-types';
+
+import { ReactComponent as DeleteIcon } from '../Icons/IconTrashSimple.svg';
+import { ReactComponent as DownloadIcon } from '../Icons/IconSquareDownload.svg';
+import { ReactComponent as ExpandIcon } from '../Icons/IconMinimalDown.svg';
+import ScreeningStatus from '../ScreeningStatus';
+import { styled as styledCss } from '@earn/utils';
+
+import styles from './styles.scss';
+const styled = styledCss(styles);
+
+export default function Submission(props) {
+ const {
+ submissionObject,
+ showScreeningDetails,
+ track,
+ onDownload,
+ onDelete,
+ onShowDetails,
+ status,
+ allowDelete,
+ } = props;
+ const formatDate = date => moment(+new Date(date)).format('MMM DD, YYYY hh:mm A');
+ const onDownloadSubmission = onDownload.bind(1, submissionObject.id);
+ const safeForDownloadCheck = safeForDownload(submissionObject.url);
+
+ return (
+
+
+ + {setStatusInfo().title} +
+ {/* + NOTE: TonyJ asked to remove the OR links from the page to keep + users within the new Topcoder site as much as we can. Not wiping + out the code just in case we decide to bring it back later. + + Online Review + + */} ++ {setStatusInfo().message} + + {' '}Need help? + +
+
+ {warnings}
+ {((hasStatusFailed) || (hasStatusPassed && hasWarnings))
+ && (
+
+ + Need more info on how to pass screening? + Go to help to read Rules & Policies. +
+ )} +{submissionObject.id}
+
+
+ { /*
+ TODO: At the moment we just fetch downloads from the legacy
+ Topcoder Studio API, and we don't need any JS code to this.
+ It may change soon, as we move to the new TC API for
+ downloads. Then we'll use this commented out code or
+ remove it for good.
+
+ */ }
+ {status !== CHALLENGE_STATUS.COMPLETED
+ && track === COMPETITION_TRACKS.DES
+ && safeForDownloadCheck === true && (
+
+ )
+ }
+
+
+
+
+ );
+}
+
+SubmissionManagement.defaultProps = {
+ onDelete: _.noop,
+ onShowDetails: _.noop,
+ onDownload: _.noop,
+ onlineReviewUrl: '',
+ helpPageUrl: '',
+ loadingSubmissions: false,
+ challengeUrl: '',
+ submissions: [],
+};
+
+SubmissionManagement.propTypes = {
+ showDetails: PT.shape().isRequired,
+ onDelete: PT.func,
+ onlineReviewUrl: PT.string,
+ helpPageUrl: PT.string,
+ onDownload: PT.func,
+ onShowDetails: PT.func,
+ challenge: PT.shape().isRequired,
+ submissions: PT.arrayOf(PT.shape()),
+ loadingSubmissions: PT.bool,
+ challengeUrl: PT.string,
+ submissionPhaseStartDate: PT.string.isRequired,
+};
diff --git a/src/apps/earn/src/components/SubmissionManagement/SubmissionManagement/styles.scss b/src/apps/earn/src/components/SubmissionManagement/SubmissionManagement/styles.scss
new file mode 100644
index 000000000..8c884499f
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/SubmissionManagement/styles.scss
@@ -0,0 +1,286 @@
+@import '@earn/styles/mixins';
+$submang-space-140: $base-unit * 28;
+$submang-space-50: $base-unit * 10;
+$submang-space-35: $base-unit * 7;
+$submang-space-30: $base-unit * 6;
+$submang-space-25: $base-unit * 5;
+$submang-space-20: $base-unit * 4;
+$gray-color: $tc-gray-40;
+$light-gray-color: $tc-gray-neutral-light;
+
+.btn-wrap {
+ display: flex;
+ justify-content: flex-end;
+ margin-right: 32px;
+ margin-top: 34px;
+ color: white;
+
+ @include xs-to-md {
+ margin-right: 16px;
+ margin-top: 32px;
+ }
+}
+
+
+.add-sub-btn-warning {
+ @include roboto-bold;
+
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 24px;
+ border-radius: 50px !important;
+ background: $tc-red-70 !important;
+ color: #fff !important;
+ text-transform: uppercase;
+
+ @include xs-to-md {
+ font-size: 14px;
+ line-height: 20px;
+ }
+}
+
+.submission-management {
+ padding-bottom: 40px;
+}
+
+.submission-management-content {
+ padding: 0 32px;
+
+ @include md {
+ padding: $submang-space-20 $submang-space-35;
+ }
+
+ @include xs-to-sm {
+ padding: 0;
+ }
+
+ .content-head {
+ display: flex;
+ justify-content: space-between;
+ font-weight: 400;
+ font-size: 15px;
+ color: $tc-gray-50;
+ line-height: $submang-space-25;
+ margin-top: 36px;
+ margin-bottom: $base-unit;
+
+ @include xs-to-sm {
+ flex-direction: column;
+ margin-top: $submang-space-20;
+ padding: 0 15px;
+ }
+
+ .title {
+ @include barlow-bold;
+
+ font-weight: 600;
+ font-size: 24px;
+ color: $tc-black;
+ line-height: 28px;
+ text-transform: uppercase;
+
+ @include xs-to-md {
+ font-size: 20px;
+ line-height: 22px;
+ }
+ }
+
+ .round-ends {
+ font-size: 15px;
+ color: $tc-black;
+ line-height: $submang-space-30;
+
+ @include xs-to-sm {
+ margin-top: 10px;
+ margin-bottom: 15px;
+ }
+
+ span.ends-label {
+ color: $tc-gray-50;
+
+ @include xs-to-sm {
+ display: block;
+ margin-bottom: -10px;
+ }
+ }
+ }
+ }
+
+ .subTitle {
+ display: flex;
+ margin-top: 12px;
+
+ @include xs-to-md {
+ margin: 17px 16px 0 16px;
+ flex-direction: column;
+ }
+
+ .round {
+ @include roboto-regular;
+
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: $tc-black;
+
+ span {
+ @include roboto-bold;
+
+ font-weight: 700;
+ }
+
+ @include xs-to-md {
+ font-size: 14px;
+ line-height: 20px;
+ }
+ }
+
+ .seperator {
+ width: 2px;
+ height: 24px;
+ left: 228px;
+ top: 0;
+ background: #d4d4d4;
+ border-radius: 1px;
+ margin: 0 16px;
+
+ @include xs-to-md {
+ display: none;
+ }
+ }
+ }
+
+ .recommend-info {
+ @include roboto-regular;
+
+ font-size: 16px;
+ font-weight: 400;
+ color: $tc-black;
+ line-height: 24px;
+ margin-bottom: $submang-space-30;
+ margin-top: 40px;
+
+ @include xs-to-sm {
+ padding: 0 15px;
+ margin-top: 32px;
+ font-size: 14px;
+ line-height: 20px;
+ }
+ }
+}
+
+.submission-management-header {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ font-weight: 400;
+ padding: $submang-space-25 32px 0 32px;
+ background: #fff;
+ border-bottom: 1px solid $tc-gray-neutral-dark;
+
+ @include md {
+ padding: $submang-space-25 $submang-space-35;
+ }
+
+ @include xs-to-sm {
+ flex-direction: column;
+ padding: 9px 16px;
+ }
+
+ .left-col {
+ display: flex;
+ padding-right: 200px;
+ margin-top: 15px;
+ margin-bottom: 40px;
+
+ @include xs-to-sm {
+ padding-right: 0;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .name {
+ @include barlow-bold;
+
+ font-size: 34px;
+ color: $tc-black;
+ line-height: 32px;
+ font-weight: 600;
+ margin-left: 16px;
+ margin-top: -6px;
+
+ @include xs-to-sm {
+ font-size: 28px;
+ line-height: 32px;
+ margin-top: 0;
+ margin-left: 0;
+ }
+ }
+
+ .back-btn {
+ @include roboto-bold;
+
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 24px;
+ border: 0;
+ color: #137d60 !important;
+ width: 32px;
+ height: 24px;
+ position: relative;
+
+ @include xs-to-md {
+ margin-left: 0;
+ margin-bottom: 8px;
+ }
+
+ svg {
+ border: 1.5px solid #137d60;
+ border-radius: 24px;
+
+ @include xs-to-md {
+ margin-left: 0;
+ margin-bottom: 15px;
+ }
+ }
+ }
+ }
+
+ .right-col {
+ @include roboto-regular;
+
+ min-width: 100px;
+
+ @include xs-to-sm {
+ margin-top: 10px;
+
+ p,
+ div {
+ display: inline-block;
+ }
+ }
+
+ .time-left {
+ font-size: 20px;
+ color: $tc-gray-80;
+ line-height: $submang-space-30;
+
+ @include xs-to-sm {
+ font-size: 15px;
+ font-weight: bold;
+ line-height: $submang-space-25;
+ margin-left: 5px;
+ }
+ }
+
+ .left-label {
+ font-size: 13px;
+ color: $tc-gray-50;
+ line-height: $submang-space-20;
+
+ @include xs-to-sm {
+ margin-left: 5px;
+ }
+ }
+ }
+}
diff --git a/src/apps/earn/src/components/SubmissionManagement/SubmissionsTable/index.jsx b/src/apps/earn/src/components/SubmissionManagement/SubmissionsTable/index.jsx
new file mode 100644
index 000000000..d55aeb8b9
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/SubmissionsTable/index.jsx
@@ -0,0 +1,153 @@
+/**
+ * This component will render the entire assemly of submissions table.
+ * It receives via props the array of submission data objects;
+ * a showDetails set with submission IDs for which details panel
+ * should be shown; and type property (design or develop) to know
+ * whether the screening status column should be rendered.
+ *
+ * Also it will receive a bunch of callbacks which should be properly
+ * wired to the children components:
+ * onDelete(submissionId) – to delete specified submission;
+ * onDownload(submissionId) – to download the specified submission;
+ * onOpenOnlineReview(submissionId);
+ * onHelp(submissionId);
+ * onShowDetails(submissionId).
+ */
+
+import _ from 'lodash';
+import React from 'react';
+import PT from 'prop-types';
+import shortid from 'shortid';
+import moment from 'moment';
+import { COMPETITION_TRACKS } from '@earn/utils/tc';
+import Submission from '../Submission';
+import ScreeningDetails from '../ScreeningDetails';
+import styles from './styles.scss';
+
+export default function SubmissionsTable(props) {
+ const {
+ submissionObjects,
+ showDetails,
+ track,
+ onDelete,
+ onlineReviewUrl,
+ helpPageUrl,
+ onDownload,
+ onShowDetails,
+ status,
+ submissionPhaseStartDate,
+ } = props;
+
+ const submissionsWithDetails = [];
+ if (!submissionObjects || submissionObjects.length === 0) {
+ submissionsWithDetails.push((
+
+
+
+
+ + {challenge.name} +
+
+
+ {now.isBefore(submissionEndDate) && (
+
+
+ + Manage your submissions +
+ + {/* { + isDesign && currentPhase && ( ++ + {currentPhase.name} + {' '} + Ends: + + {' '} + {end.format('dddd MM/DD/YY hh:mm A')} +
+ ) + } */} +
+ {
+ currentPhase && (
+
+ {
+ isDesign && (
+ + Current Deadline:{' '} + {currentPhase.name} +
+ ) + } + + { + challenge.status !== 'Completed' ? ( +
+
+ ) : (
+ + Current Deadline Ends: {' '} + + {days > 0 && (`${days}D`)} + {' '} + {hours} + H + {' '} + {minutes} + M + +
++ The challenge has ended +
+ ) + } ++ {/* eslint-disable-next-line max-len */} + We always recommend to download your submission to check you uploaded the correct .zip files + {/* eslint-disable-next-line max-len */} + and also to verify your declarations file is accurate. If you don’t want to see a submission + {/* eslint-disable-next-line max-len */} + simply delete it. If you have a new submissions, use the “Add Submission” button to add one + to the top of the list. +
+ ) + } + { + isDevelop && ( ++ {/* eslint-disable-next-line max-len */} + We always recommend to download your submission to check you uploaded the correct .zip files + {/* eslint-disable-next-line max-len */} + and also to verify your declarations file is accurate. If you don’t want to see a submission + {/* eslint-disable-next-line max-len */} + simply delete it. If you have a new submissions, use the “Add Submission” button to add one + to the top of the list. +
+ ) + } + {loadingSubmissions &&
+
+ {
+ (!isDevelop || !submissions || submissions.length === 0)
+ ? 'Add Submission' : 'Update Submission'
+ }
+
+
+ )}
+
+
+
+
+
+ );
+}
+
+const SubShape = PT.shape({
+ id: PT.string,
+ warpreviewnings: PT.string,
+ screening: PT.shape({
+ status: PT.string,
+ }),
+ submitted: PT.string,
+ track: PT.string,
+});
+
+SubmissionsTable.defaultProps = {
+ submissionObjects: [],
+ onDelete: _.noop,
+ onDownload: _.noop,
+ onShowDetails: _.noop,
+ onlineReviewUrl: '',
+ helpPageUrl: '',
+};
+
+SubmissionsTable.propTypes = {
+ submissionObjects: PT.arrayOf(SubShape),
+ showDetails: PT.shape().isRequired,
+ track: PT.string.isRequired,
+ onDelete: PT.func,
+ onlineReviewUrl: PT.string,
+ helpPageUrl: PT.string,
+ onDownload: PT.func,
+ onShowDetails: PT.func,
+ status: PT.string.isRequired,
+ submissionPhaseStartDate: PT.string.isRequired,
+};
diff --git a/src/apps/earn/src/components/SubmissionManagement/SubmissionsTable/styles.scss b/src/apps/earn/src/components/SubmissionManagement/SubmissionsTable/styles.scss
new file mode 100644
index 000000000..498a0fac7
--- /dev/null
+++ b/src/apps/earn/src/components/SubmissionManagement/SubmissionsTable/styles.scss
@@ -0,0 +1,164 @@
+@import '@earn/styles/mixins';
+$status-space-10: $base-unit * 2;
+$status-space-20: $base-unit * 4;
+$status-space-25: $base-unit * 5;
+$submission-space-10: $base-unit * 2;
+$submission-space-20: $base-unit * 4;
+$submission-space-25: $base-unit * 5;
+$submission-space-50: $base-unit * 10;
+
+.submissions-table {
+ // border: 1px solid $tc-gray-10;
+ overflow: hidden;
+ // border-radius: 4px 4px 0 0;
+
+ @include xs-to-sm {
+ border: none;
+ border-radius: 0;
+ border-top: 1px solid $tc-gray-10;
+ border-bottom: 1px solid $tc-gray-10;
+ margin: 0 16px;
+ }
+
+ table {
+ width: 100%;
+
+ th {
+ @include barlow-bold;
+
+ font-size: 11px;
+ color: #767676;
+ font-weight: 600;
+ line-height: $status-space-20;
+ text-align: left;
+ padding: 0 15px 11px 15px;
+ text-transform: uppercase;
+
+ &.status,
+ &.actions {
+ text-align: center;
+ }
+
+ @include xs-to-sm {
+ display: none;
+ }
+ }
+
+ .no-submission {
+ line-height: $submission-space-20;
+ padding: $submission-space-50 $submission-space-20;
+ text-align: center;
+ }
+ }
+
+ .status-col {
+ text-align: center;
+ }
+
+ .action-col {
+ text-align: center;
+ }
+}
+
+.submission-row {
+ width: 100%;
+ font-size: 15px;
+ color: $tc-black;
+ font-weight: 400;
+
+ td {
+ vertical-align: middle;
+ padding: 16px 16px 2px 16px;
+ background: $tc-white;
+ font-size: 14px;
+ color: $tc-black;
+ font-weight: 500;
+ border-top: 1px solid $tc-gray-10;
+ line-height: 12px;
+
+ @include xs-to-md {
+ padding: 16px 16px 2px 8px;
+ }
+
+ &.no-submission {
+ line-height: $submission-space-20;
+ padding: $submission-space-50 $submission-space-20;
+ text-align: center;
+ }
+
+ &.dev-details {
+ padding-right: 60px;
+ border-top: 0;
+ padding-top: 0;
+ }
+ }
+
+ .id-col {
+ font-weight: 700;
+ width: 32%;
+ }
+
+ .type-col {
+ width: 21%;
+ }
+
+ .date-col {
+ width: 20%;
+ color: $tc-black;
+ font-weight: 500;
+ line-height: 22px;
+ font-size: 14px;
+ }
+
+ .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;
+
+ .delete-icon {
+ margin: 0 $submission-space-25;
+ }
+
+ button {
+ background: none;
+ border: 0;
+ font-size: 0;
+ padding: 0;
+ line-height: 0;
+ display: inline-block;
+ margin-left: 15px;
+ margin-top: 3px;
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ .expand-icon {
+ transition: all 1.5s;
+
+ &.expanded {
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ .status-col button:focus {
+ outline: none;
+ }
+}
diff --git a/src/apps/earn/src/components/Tag/index.jsx b/src/apps/earn/src/components/Tag/index.jsx
new file mode 100644
index 000000000..bdbf35d55
--- /dev/null
+++ b/src/apps/earn/src/components/Tag/index.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import PT from "prop-types";
+
+import styles from "./styles.scss";
+
+const Tag = ({ tag, onClick }) => (
+ {
+ onClick(tag);
+ }}
+ >
+ {tag}
+
+);
+
+Tag.propTypes = {
+ tag: PT.string,
+ onClick: PT.func,
+};
+
+export default Tag;
diff --git a/src/apps/earn/src/components/Tag/styles.scss b/src/apps/earn/src/components/Tag/styles.scss
new file mode 100644
index 000000000..81e4dc9f0
--- /dev/null
+++ b/src/apps/earn/src/components/Tag/styles.scss
@@ -0,0 +1,13 @@
+@import "@earn/styles/variables";
+
+.tag {
+ display: inline-block;
+ padding: 3px 4px 3px 5px;
+ font-size: $font-size-xs;
+ line-height: 15px;
+ letter-spacing: 0.55px;
+ white-space: nowrap;
+ border: 1px solid $body-color;
+ border-radius: $border-radius-sm;
+ cursor: pointer;
+}
diff --git a/src/apps/earn/src/components/TagList/index.jsx b/src/apps/earn/src/components/TagList/index.jsx
new file mode 100644
index 000000000..4db83b3eb
--- /dev/null
+++ b/src/apps/earn/src/components/TagList/index.jsx
@@ -0,0 +1,148 @@
+import {
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
+import PT from "prop-types";
+
+import { Tooltip } from "~/libs/ui";
+
+import styles from "./styles.scss";
+
+/**
+ * Displays a tooltip with tags that are not initially shown.
+ *
+ * @param {Object} props component properties
+ * @returns {JSX.Element}
+ */
+const TagsTooltip = ({ children, onClickTag, renderTag, tags }) => {
+ const overlay = useMemo(
+ () => (
+ | + ID + | ++ Type + | ++ Submission Date + | + {track === COMPETITION_TRACKS.DES && ( ++ Screening Status + | + )} ++ Actions + | +
|---|
+ {tags
+ .map((tag) => ({
+ tag,
+ onClickTag,
+ className: styles.tooltipTag,
+ }))
+ .map(renderTag)}
+
+ ),
+ [onClickTag, renderTag, tags]
+ );
+ return (
+
+ {tagsVisible
+ .map((tag) => ({ className: styles.tag, onClickTag, tag }))
+ .map(renderTag)}
+ {!showAll && (
+
+
+ {tags.length - tagsVisible.length}+
+
+
+ )}
+
+ );
+};
+
+TagList.propTypes = {
+ className: PT.string,
+ maxTagCount: PT.number,
+ onClickTag: PT.func.isRequired,
+ renderTag: PT.func.isRequired,
+ tags: PT.arrayOf(PT.object).isRequired,
+};
+
+export default TagList;
+
+/**
+ * Searches for the index of the last element on the first line.
+ *
+ * @param {Element} container container element
+ * @returns {number} first line's last element's index
+ */
+function getFirstLineLastElemIndex(container) {
+ const firstElement = container.firstElementChild;
+ let offsetTop = firstElement.offsetTop;
+ for (
+ let elem = firstElement.nextElementSibling, index = 1;
+ elem;
+ elem = elem.nextElementSibling, index++
+ ) {
+ if (elem.offsetTop > offsetTop) {
+ return index - 1;
+ }
+ }
+ return -1;
+}
diff --git a/src/apps/earn/src/components/TagList/styles.scss b/src/apps/earn/src/components/TagList/styles.scss
new file mode 100644
index 000000000..5fd9114c1
--- /dev/null
+++ b/src/apps/earn/src/components/TagList/styles.scss
@@ -0,0 +1,56 @@
+@import "../../styles/mixins";
+@import "../../styles/variables";
+
+.container {
+ position: relative;
+ display: flex;
+ flex-wrap: wrap;
+ height: 27px;
+ opacity: 0;
+
+ &.visible {
+ height: auto;
+ opacity: 1;
+ }
+}
+
+.btn-more,
+.tag {
+ margin-top: 4px;
+ margin-right: 4px;
+ border: 1px solid $body-color;
+ border-radius: 5px;
+ padding: 4px 6px 2px;
+ font-size: 12px;
+ line-height: 15px;
+ cursor: pointer;
+
+ &:last-child {
+ margin-right: 0;
+ }
+}
+
+.tooltip-tag-list {
+ display: flex;
+ flex-wrap: wrap;
+ background-color: transparent;
+}
+
+.tooltipTag {
+ flex: 0 0 auto;
+ margin-top: 4px;
+ margin-right: 4px;
+ border-radius: 5px;
+ padding: 4px 5px 4px 6px;
+ @include roboto-regular;
+ font-size: 11px;
+ letter-spacing: 0.5px;
+ line-height: 15px;
+ color: #fff;
+ background-color: #555;
+ cursor: pointer;
+
+ &:last-child {
+ margin-right: 0;
+ }
+}
diff --git a/src/apps/earn/src/components/Terms/TermDetails.jsx b/src/apps/earn/src/components/Terms/TermDetails.jsx
new file mode 100644
index 000000000..8aaff868c
--- /dev/null
+++ b/src/apps/earn/src/components/Terms/TermDetails.jsx
@@ -0,0 +1,91 @@
+/**
+ * Terms details component which display text of an agreement
+ */
+
+import React from "react";
+import PT from "prop-types";
+
+import { styled as styledCss } from "@earn/utils";
+import { LoadingCircles } from "~/libs/ui";
+
+import styles from "./TermDetails.module.scss";
+
+const styled = styledCss(styles);
+
+export default class TermDetails extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ loadingFrame: false,
+ };
+ this.frameLoaded = this.frameLoaded.bind(this);
+ }
+
+ componentWillMount() {
+ const { details, getDocuSignUrl } = this.props;
+ if (
+ details.agreeabilityType !== "Electronically-agreeable" &&
+ details.docusignTemplateId
+ ) {
+ getDocuSignUrl(details.docusignTemplateId);
+ this.setState({ loadingFrame: true });
+ }
+ }
+
+ frameLoaded() {
+ this.setState({
+ loadingFrame: false,
+ });
+ }
+
+ render() {
+ const { details, docuSignUrl, loadingDocuSignUrl } = this.props;
+ const { loadingFrame } = this.state;
+
+ return (
+
+ {details.agreeabilityType === "Electronically-agreeable" && (
+
+ );
+ }
+}
+
+TermDetails.defaultProps = {
+ details: {},
+ docuSignUrl: "",
+ loadingDocuSignUrl: "",
+};
+
+TermDetails.propTypes = {
+ details: PT.shape(),
+ docuSignUrl: PT.string,
+ loadingDocuSignUrl: PT.string,
+ getDocuSignUrl: PT.func.isRequired,
+};
diff --git a/src/apps/earn/src/components/Terms/TermDetails.module.scss b/src/apps/earn/src/components/Terms/TermDetails.module.scss
new file mode 100644
index 000000000..370bdce8e
--- /dev/null
+++ b/src/apps/earn/src/components/Terms/TermDetails.module.scss
@@ -0,0 +1,90 @@
+@import "@earn/styles/mixins";
+
+.body {
+ border: 1px solid $tc-gray-30;
+ word-break: break-word;
+ padding: 5px 15px;
+ color: $tc-gray-80;
+ font-size: 15px;
+ line-height: 25px;
+
+ h2 {
+ line-height: 30px;
+ font-size: 20px;
+ color: $tc-gray-80;
+
+ &:first-child {
+ display: none;
+ }
+
+ @include sm {
+ padding: 0 15px;
+ }
+ }
+
+ h3 {
+ font-weight: 700;
+ padding: 20px 0;
+ color: $tc-black;
+
+ &:nth-child(2) {
+ padding: 0 0 30px;
+ }
+ }
+
+ h4 {
+ color: $tc-red;
+ padding: 20px 0;
+ }
+
+ br + br {
+ display: none;
+ }
+
+ ol {
+ margin: 0 0 5px;
+ counter-reset: item;
+ font-size: 15px;
+ color: $tc-gray-90;
+ line-height: 25px;
+ display: table;
+
+ li {
+ list-style-type: none;
+ font-weight: 400;
+ counter-increment: item;
+ display: table-row;
+ white-space: normal;
+
+ &::before {
+ display: table-cell;
+ font-weight: 700;
+ text-align: right;
+ content: counter(item) ".";
+ padding: 0 10px 0 0;
+ width: 32px;
+ }
+ }
+ }
+
+ ul {
+ margin: 0 0 5px 20px;
+ font-size: 15px;
+ color: $tc-gray-90;
+ line-height: 25px;
+ list-style: disc outside none;
+
+ li {
+ font-weight: 400;
+ }
+ }
+}
+
+.frame {
+ height: 1420px;
+ width: 100%;
+}
+
+.hidden {
+ display: none;
+}
diff --git a/src/apps/earn/src/components/Terms/index.jsx b/src/apps/earn/src/components/Terms/index.jsx
new file mode 100644
index 000000000..0cfb9ec59
--- /dev/null
+++ b/src/apps/earn/src/components/Terms/index.jsx
@@ -0,0 +1,379 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+/**
+ * Terms component which displays modal window with term details
+ */
+/* eslint jsx-a11y/no-static-element-interactions:0 */
+
+import _ from "lodash";
+import React from "react";
+import PT from "prop-types";
+import FocusTrap from "focus-trap-react";
+
+import { BaseModal, Button, LoadingCircles } from "~/libs/ui";
+
+import TermDetails from "./TermDetails";
+import styles from "./styles.module.scss";
+import { styled as styledCss } from "@earn/utils";
+const styled = styledCss(styles)
+
+function handleScroll(scrollElement, masks, orientation) {
+ let length;
+ let base;
+ let clientSize;
+ if (orientation === "vertical") {
+ length = "scrollHeight";
+ base = "scrollTop";
+ clientSize = "clientHeight";
+ } else {
+ clientSize = "clientWidth";
+ length = "scrollWidth";
+ base = "scrollLeft";
+ }
+ const mask1 = masks[0];
+ const mask2 = masks[1];
+ // When the scrollbar reaches end, disable mask2.
+ if (
+ scrollElement[length] - scrollElement[base] ===
+ scrollElement[clientSize]
+ ) {
+ mask2.style.display = "none";
+ } else if (scrollElement[base] === 0) {
+ // At the beginning, disable mask1.
+ mask1.style.display = "none";
+ } else {
+ // Show both masks in between.
+ mask1.style.display = "block";
+ mask2.style.display = "block";
+ if (orientation === "vertical") {
+ mask1.style.top = `${scrollElement[base]}px`;
+ mask2.style.bottom = `${-scrollElement[base]}px`;
+ }
+ }
+}
+
+export default class Terms extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.selectTerm = this.selectTerm.bind(this);
+ this.messageHandler = this.messageHandler.bind(this);
+ this.resizeHandler = this.resizeHandler.bind(this);
+ this.nextTerm = this.nextTerm.bind(this);
+ this.max = 0;
+ this.terms = React.createRef();
+ }
+
+ componentDidMount() {
+ const { loadDetails, selectedTerm } = this.props;
+ if (selectedTerm) {
+ loadDetails(selectedTerm.id);
+ }
+ window.addEventListener("message", this.messageHandler, false);
+ window.addEventListener("resize", this.resizeHandler, false);
+ this.terms.current?.focus?.();
+ }
+
+ componentWillReceiveProps(nextProps) {
+ const {
+ selectedTerm,
+ loadDetails,
+ terms,
+ checkStatus,
+ canRegister,
+ onCancel,
+ register,
+ } = this.props;
+ if (
+ nextProps.selectedTerm &&
+ !_.isEqual(selectedTerm, nextProps.selectedTerm) &&
+ nextProps.loadingTermId !== _.toString(nextProps.selectedTerm.id)
+ ) {
+ loadDetails(nextProps.selectedTerm.id);
+ }
+ if (
+ !_.every(terms, "agreed") &&
+ _.every(nextProps.terms, "agreed") &&
+ !nextProps.checkingStatus
+ ) {
+ checkStatus();
+ }
+ if (!canRegister && nextProps.canRegister) {
+ onCancel();
+ register();
+ }
+ }
+
+ componentDidUpdate() {
+ this.terms.current?.focus?.();
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener("message", this.messageHandler);
+ window.removeEventListener("resize", this.resizeHandler);
+ }
+
+ selectTerm(term) {
+ const { selectTerm, selectedTerm } = this.props;
+ if (selectedTerm !== term) {
+ selectTerm(term);
+ }
+ }
+
+ nextTerm() {
+ const { terms, selectTerm } = this.props;
+ const term = _.find(terms, (t) => !t.agreed);
+ selectTerm(term);
+ }
+
+ messageHandler(event) {
+ const { onCancel, selectedTerm, signDocu } = this.props;
+ if (event.data.type === "DocuSign") {
+ if (
+ event.data.event === "signing_complete" ||
+ event.data.event === "viewing_complete"
+ ) {
+ signDocu(selectedTerm.id);
+ } else {
+ onCancel();
+ }
+ }
+ }
+
+ resizeHandler() {
+ const cname = styles["mask-h"];
+ const masks = document.getElementsByClassName(cname);
+ if (this.hScrollElement.scrollWidth === this.hScrollElement.clientWidth) {
+ // eslint-disable-next-line no-param-reassign
+ _.forEach(masks, (m) => {
+ m.style.display = "none";
+ });
+ } else {
+ // set the mask style if need
+ handleScroll(this.hScrollElement, masks, "horizonal");
+ }
+ }
+
+ render() {
+ const {
+ onCancel,
+ terms,
+ details,
+ loadingTermId,
+ docuSignUrl,
+ getDocuSignUrl,
+ agreeTerm,
+ agreeingTerm,
+ isLoadingTerms,
+ loadingDocuSignUrl,
+ selectedTerm,
+ viewOnly,
+ checkingStatus,
+ description,
+ defaultTitle,
+ } = this.props;
+
+ const handleHorizonalScroll = (e) => {
+ const scrollElement = e.target;
+
+ const cname = styles["mask-h"];
+ /* eslint-env browser */
+ const masks = document.getElementsByClassName(cname);
+ handleScroll(scrollElement, masks, "horizonal");
+ };
+
+ const handleVerticalScroll = (e) => {
+ const scrollElement = e.target;
+
+ const cname = styles["mask-v"];
+ /* eslint-env browser */
+ const masks = document.getElementsByClassName(cname);
+ handleScroll(scrollElement, masks, "vertical");
+ };
+
+ return (
+
+
+
+ )}
+ {details.agreeabilityType !== "Electronically-agreeable" &&
+ details.docusignTemplateId === loadingDocuSignUrl && (
+
+ {loadingFrame &&
+ )}
+
+
+ 1 ? defaultTitle : (terms[0] ?? {}).title ?? ''}
+ buttons={!isLoadingTerms &&
+ !checkingStatus &&
+ selectedTerm &&
+ details &&
+ !viewOnly &&
+ loadingTermId !== _.toString(selectedTerm.id) &&
+ details.agreeabilityType === "Electronically-agreeable" ? (
+ selectedTerm?.agreed ? (
+
+ ) : (
+ <>
+
+
+
+ )
+ ) : (
+
+ )}
+ >
+ {isLoadingTerms &&
+
+
+ );
+ }
+}
+
+Terms.defaultProps = {
+ terms: [],
+ description: "",
+ defaultTitle: "Terms & Conditions of Use",
+ details: {},
+ loadingTermId: "",
+ docuSignUrl: "",
+ agreeingTerm: "",
+ isLoadingTerms: false,
+ loadingDocuSignUrl: "",
+ selectedTerm: null,
+ viewOnly: false,
+};
+
+Terms.propTypes = {
+ description: PT.string,
+ defaultTitle: PT.string,
+ onCancel: PT.func.isRequired,
+ terms: PT.arrayOf(PT.shape()),
+ loadDetails: PT.func.isRequired,
+ details: PT.shape(),
+ loadingTermId: PT.string,
+ docuSignUrl: PT.string,
+ getDocuSignUrl: PT.func.isRequired,
+ register: PT.func.isRequired,
+ agreeTerm: PT.func.isRequired,
+ agreeingTerm: PT.string,
+ isLoadingTerms: PT.bool,
+ loadingDocuSignUrl: PT.string,
+ selectedTerm: PT.shape(),
+ checkStatus: PT.func.isRequired,
+ canRegister: PT.bool.isRequired,
+ checkingStatus: PT.bool.isRequired,
+ signDocu: PT.func.isRequired,
+ selectTerm: PT.func.isRequired,
+ viewOnly: PT.bool,
+};
diff --git a/src/apps/earn/src/components/Terms/styles.module.scss b/src/apps/earn/src/components/Terms/styles.module.scss
new file mode 100644
index 000000000..b2cd54f70
--- /dev/null
+++ b/src/apps/earn/src/components/Terms/styles.module.scss
@@ -0,0 +1,256 @@
+@import "@earn/styles/mixins";
+
+/* Fills the space in the bottom of the modal, when we do not need to render
+ * buttons there. */
+.bottom-placeholder {
+ height: 5 * $base-unit;
+
+ @include xs-to-sm {
+ height: 3 * $base-unit;
+ }
+}
+
+div.modal-container {
+ @include roboto-regular;
+
+ color: $tc-black;
+ display: flex;
+ flex-direction: column;
+ height: 95vh;
+ padding: 40px 40px 0;
+ width: 100%;
+
+ @include xs-to-sm {
+ padding: 3 * $base-unit;
+ padding-bottom: 0;
+ }
+}
+
+.modal-content {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ max-height: 100%;
+
+ &:focus {
+ outline: none;
+ }
+}
+
+.scrollable-area {
+ flex: 1;
+ overflow-y: auto;
+ position: relative;
+}
+
+.title {
+ font-size: 28px;
+ margin-bottom: 1.5 * $base-unit;
+ text-align: center;
+ color: $tc-gray-80;
+}
+
+// TODO: All classes below should be sorted alphabetically for convenience.
+
+.desc {
+ margin-top: 24px;
+ font-size: 15px;
+ line-height: 25px;
+ color: $tc-gray-80;
+
+ @include sm {
+ margin-top: 20px;
+ }
+}
+
+.tabs-outer {
+ position: relative;
+ margin: 25px 0;
+}
+
+.tabs-inner {
+ display: flex;
+
+ @include sm {
+ width: 100%;
+ display: inline-block;
+ white-space: nowrap;
+ font-size: 0;
+ overflow-x: auto;
+ overflow-y: hidden;
+ }
+}
+
+.tab-index {
+ width: 26px;
+ height: 26px;
+ border-radius: 100%;
+ color: $tc-white;
+ cursor: pointer;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 26px;
+ text-align: center;
+ background-color: $tc-gray-30;
+ flex-shrink: 0;
+
+ @include sm {
+ display: inline-block;
+ vertical-align: middle;
+ }
+}
+
+.tab-bar {
+ margin: 0 10px;
+ background-color: $tc-gray-20;
+ height: 2px;
+ flex: 1;
+
+ @include sm {
+ display: inline-block;
+ max-width: calc(100% - 120px);
+ min-width: calc(100% - 145px);
+ vertical-align: middle;
+ }
+}
+
+.tab {
+ display: flex;
+ align-items: center;
+ flex: 1;
+
+ @include sm {
+ width: 50%;
+ display: inline-block;
+
+ &.last {
+ width: auto;
+ }
+ }
+
+ &.active {
+ .tab-index {
+ background-color: $tc-green;
+ }
+ }
+
+ &.agreed,
+ &.active.view-only {
+ .tab-index {
+ background-color: $tc-dark-blue;
+ }
+
+ .tab-bar {
+ background-color: $tc-dark-blue;
+ }
+ }
+
+ &:last-of-type {
+ flex-grow: 0;
+ flex-shrink: 0;
+ }
+}
+
+.tab-title {
+ margin-left: 5px;
+ cursor: pointer;
+ font-size: 13px;
+ line-height: 15px;
+ max-width: 175px;
+ min-width: 110px;
+ color: $tc-gray-80;
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ @include sm {
+ display: inline-block;
+ vertical-align: middle;
+ white-space: normal;
+ }
+}
+
+.labels {
+ margin-bottom: 40px;
+ display: flex;
+
+ .label {
+ flex: 1;
+ cursor: pointer;
+ left: 0;
+ top: 12px;
+ font-size: 13px;
+ overflow: hidden;
+
+ @include sm {
+ flex: 0 0 135px;
+ }
+ }
+}
+
+.single {
+ padding-top: 25px;
+}
+
+.sub-title {
+ line-height: 30px;
+ font-size: 20px;
+ margin-bottom: 10px;
+ color: $tc-gray-80;
+
+ @include sm {
+ padding: 0 15px;
+ }
+}
+
+.button-container {
+ margin-top: 20px;
+ display: flex;
+ justify-content: space-around;
+}
+
+.buttons {
+ padding: (1.5 * $base-unit) 0 (2 * $base-unit);
+ text-align: center;
+}
+
+.mask-h {
+ height: 100%;
+ position: absolute;
+ width: 30px;
+ z-index: 100;
+ display: none;
+}
+
+.mask-h.left {
+ background: linear-gradient(-90deg, transparent, $tc-white 100%);
+ left: 0;
+}
+
+.mask-h.right {
+ background: linear-gradient(90deg, transparent, $tc-white 100%);
+ right: 0;
+}
+
+.mask-v {
+ width: 100%;
+ position: absolute;
+ height: 30px;
+ z-index: 100;
+ display: none;
+}
+
+.mask-v.top {
+ background: linear-gradient(0deg, transparent, $tc-white 100%);
+ top: 0;
+}
+
+.mask-v.bottom {
+ background: linear-gradient(180deg, transparent, $tc-white 100%);
+ bottom: 0;
+}
diff --git a/src/apps/earn/src/components/TextField/index.jsx b/src/apps/earn/src/components/TextField/index.jsx
new file mode 100644
index 000000000..0ba7c4cf3
--- /dev/null
+++ b/src/apps/earn/src/components/TextField/index.jsx
@@ -0,0 +1,89 @@
+import React, { useCallback, useState } from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import styles from "./styles.module.scss";
+
+/**
+ * Displays text field with optional label.
+ *
+ * @param {Object} props component properties
+ * @returns {JSX.Element}
+ */
+const TextField = ({
+ className,
+ id,
+ isDisabled = false,
+ isReadonly = false,
+ isRequired = false,
+ label,
+ name,
+ onBlur,
+ onChange,
+ onFocus,
+ placeholder,
+ size = "medium",
+ value,
+ error,
+}) => {
+ id = id || name;
+
+ const onInputChange = useCallback(
+ (event) => {
+ onChange(event.target.value);
+ },
+ [onChange]
+ );
+
+ const [focused, setFocused] = useState(false);
+
+ return (
+
+
+ )}
+ {
+ this.vScrollArea = node;
+ }}
+ className={styled("scrollable-area")}
+ >
+
+
+
+ {description}
+ {checkingStatus &&
+
+
+
+ )}
+ {!checkingStatus && selectedTerm && (
+ {
+ this.hScrollElement = e;
+ }}
+ >
+ {terms.map((t, index) => (
+
+
+
+ ))}
+ this.selectTerm(t)}
+ onKeyPress={() => this.selectTerm(t)}
+ >
+ {index + 1}
+
+ this.selectTerm(t)}
+ onKeyPress={() => this.selectTerm(t)}
+ >
+ {t.title}
+
+ {index < terms.length - 1 && (
+
+ )}
+
+ {terms.length > 1 && (
+
+ )}
+ {selectedTerm.title}
+ )}
+ {loadingTermId === _.toString(selectedTerm.id) && (
+ setFocused(true)}
+ onBlurCapture={() => setFocused(false)}
+ className={cn(
+ styles.container,
+ styles[size],
+ {
+ [styles.focused]: focused,
+ [styles.hasLabel]: !!label,
+ [styles.disabled]: isDisabled,
+ [styles.invalid]: !!error,
+ [styles.readonly]: isReadonly,
+ },
+ className
+ )}
+ >
+ {label && }
+
+ {error &&
+ );
+};
+
+TextField.propTypes = {
+ className: PT.string,
+ id: PT.string,
+ isDisabled: PT.bool,
+ label: PT.string,
+ name: PT.string.isRequired,
+ onBlur: PT.func,
+ onChange: PT.func,
+ onFocus: PT.func,
+ size: PT.oneOf(["small", "medium"]),
+ value: PT.oneOfType([PT.number, PT.string]).isRequired,
+ error: PT.string,
+};
+
+export default TextField;
diff --git a/src/apps/earn/src/components/TextField/styles.module.scss b/src/apps/earn/src/components/TextField/styles.module.scss
new file mode 100644
index 000000000..2ce426e9c
--- /dev/null
+++ b/src/apps/earn/src/components/TextField/styles.module.scss
@@ -0,0 +1,142 @@
+@import "../../styles/variables";
+@import "../../styles/mixins";
+
+.container {
+ position: relative;
+ background-color: #fff;
+
+ &.large {
+ padding: 12px 0 0;
+
+ label {
+ left: 8px;
+ top: 6px;
+ padding: 0 8px;
+ }
+
+ input.input {
+ padding: 13px 15px 15px;
+ height: 52px;
+ font-size: 16px;
+ line-height: 22px;
+
+ @include placeholder {
+ font-size: 16px;
+ }
+ }
+ }
+
+ &.medium {
+ label {
+ left: 11px;
+ top: -6px;
+ }
+
+ input.input {
+ padding: 8px 12px;
+ height: 40px;
+ font-size: 14px;
+ line-height: 22px;
+
+ @include placeholder {
+ font-size: 14px;
+ }
+ }
+ }
+
+ &.small {
+ label {
+ left: 7px;
+ top: -6px;
+ }
+
+ input.input {
+ padding: 4px 8px;
+ height: 30px;
+ font-size: 14px;
+ line-height: 20px;
+
+ @include placeholder {
+ font-size: 14px;
+ }
+ }
+ }
+
+ &.focused {
+ label {
+ color: $gui-kit-level-2;
+ }
+ }
+
+ &.invalid {
+ label {
+ color: $gui-kit-level-5;
+ }
+
+ input.input,
+ input.input:hover {
+ border-color: $gui-kit-level-5 !important;
+ }
+
+ &.large {
+ input.input,
+ input.input:hover {
+ border-width: 2px;
+ padding: 12px 14px 14px;
+ }
+ }
+ }
+
+ &.readonly {
+ label {
+ color: #aaa;
+ }
+ input {
+ border-color: #d4d4d4 !important;
+ color: #aaa;
+ }
+ }
+
+ &.disabled {
+ input:disabled {
+ border-color: #bbb;
+ background: #f4f4f4;
+ color: #bbb;
+ }
+ }
+
+ label {
+ display: block;
+ z-index: 1;
+ position: absolute;
+ padding: 0 3px;
+ font-size: 12px;
+ line-height: 12px;
+ background: #fff;
+ color: #aaaaaa;
+ }
+
+ input.input,
+ input.input:hover {
+ display: block;
+ margin: 0;
+ border: 1px solid #aaaaaa;
+ border-radius: 6px;
+ width: 100%;
+ line-height: 22px;
+ outline: none !important;
+ box-shadow: none !important;
+
+ @include placeholder {
+ color: #aaa;
+ text-transform: none;
+ opacity: 1;
+ }
+ }
+
+ .error {
+ margin: 10px 0 0 15px;
+ font-size: 14px;
+ color: #2A2A2A;
+ }
+}
diff --git a/src/apps/earn/src/components/TextInput/index.jsx b/src/apps/earn/src/components/TextInput/index.jsx
new file mode 100644
index 000000000..905fb2e57
--- /dev/null
+++ b/src/apps/earn/src/components/TextInput/index.jsx
@@ -0,0 +1,109 @@
+/**
+ * Text input component.
+ */
+import React, { useState, useRef, useEffect } from "react";
+import PT from "prop-types";
+import _ from "lodash";
+
+import config from "../../config";
+
+import styles from "./styles.scss";
+import { styled as styledCss } from "@earn/utils";
+const styled = styledCss(styles)
+
+function TextInput({
+ placeholder,
+ label,
+ errorMsg,
+ value,
+ onChange,
+ required,
+ size,
+ type,
+ onEnterKey,
+ readonly,
+ maxLength,
+}) {
+ const [val, setVal] = useState(value);
+ const delayedOnChange = useRef(
+ _.debounce((q, cb) => cb(q), config.GUIKIT.DEBOUNCE_ON_CHANGE_TIME) // eslint-disable-line no-undef
+ ).current;
+ const sizeStyle = size === "lg" ? "lgSize" : "xsSize";
+
+ const ref = useRef(null);
+ useEffect(() => {
+ ref.current.value = value;
+ setVal(value);
+ }, [value]);
+
+ return (
+ {error}
}
+
+ {
+ delayedOnChange(e.target.value, onChange);
+ setVal(e.target.value);
+ }}
+ onBlur={(e) => {
+ delayedOnChange(e.target.value, onChange);
+ setVal(e.target.value);
+ }}
+ onKeyPress={(e) => {
+ if (e.key === "Enter") {
+ onEnterKey(e.target.value);
+ }
+ }}
+ />
+ {label ? (
+
+ ) : null}
+ {errorMsg ? (
+
+ {errorMsg}
+
+ ) : null}
+
+ );
+}
+
+TextInput.defaultProps = {
+ placeholder: "",
+ label: "",
+ errorMsg: "",
+ value: "",
+ onChange: () => {},
+ required: false,
+ size: "lg",
+ type: "text",
+ onEnterKey: () => {},
+ readonly: false,
+ maxLength: undefined,
+};
+
+TextInput.propTypes = {
+ placeholder: PT.string,
+ label: PT.string,
+ errorMsg: PT.string,
+ value: PT.string,
+ onChange: PT.func,
+ required: PT.bool,
+ size: PT.oneOf(["xs", "lg"]),
+ type: PT.string,
+ onEnterKey: PT.func,
+ readonly: PT.bool,
+};
+
+export default TextInput;
diff --git a/src/apps/earn/src/components/TextInput/styles.scss b/src/apps/earn/src/components/TextInput/styles.scss
new file mode 100644
index 000000000..83ce9993f
--- /dev/null
+++ b/src/apps/earn/src/components/TextInput/styles.scss
@@ -0,0 +1,73 @@
+@import "@earn/styles/variables";
+@import "@earn/styles/GUIKit/default";
+
+.errorMessage {
+ @include errorMessage;
+}
+
+.container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+
+ label {
+ @include textInputLabel;
+ }
+
+ input:not([type='checkbox']) {
+ @include textInput;
+
+ height: 52px;
+ }
+
+ // lg size
+ &.lgSize {
+ input:not([type='checkbox']) {
+ height: 52px;
+ }
+ }
+
+ // xs size
+ &.xsSize {
+ input:not([type='checkbox']) {
+ @include textInputXs;
+
+ height: 40px;
+ padding: 0 15px;
+ }
+
+ .errorMessage {
+ @include errorMessageXs;
+ }
+ }
+
+ // readonly
+ &.readonly {
+ input:not([type='checkbox']) {
+ border: 1px solid $gui-kit-readonly;
+ color: $gui-kit-gray-30;
+ }
+ }
+
+ input:not([type='checkbox']).haveValue + label,
+ input:not([type='checkbox']).haveError + label,
+ input:not([type='checkbox']):focus + label {
+ display: flex;
+ }
+
+ input:not([type='checkbox']):focus + label {
+ color: $gui-kit-active-label;
+ }
+
+ input:not([type='checkbox']).haveError + label,
+ input:not([type='checkbox']).haveError:focus + label {
+ color: $gui-kit-level-5;
+ }
+
+ input:not([type='checkbox']).haveError,
+ input:not([type='checkbox']).haveError:active,
+ input:not([type='checkbox']).haveError:focus,
+ input:not([type='checkbox']).haveError:hover {
+ border: 2px solid $gui-kit-level-5;
+ }
+}
diff --git a/src/apps/earn/src/components/Toggle/index.jsx b/src/apps/earn/src/components/Toggle/index.jsx
new file mode 100644
index 000000000..532b415f2
--- /dev/null
+++ b/src/apps/earn/src/components/Toggle/index.jsx
@@ -0,0 +1,62 @@
+/**
+ * Toggles component.
+ */
+import React, { useRef, useState, useEffect } from "react";
+import PT from "prop-types";
+import _ from "lodash";
+
+import config from "../../config";
+
+import styles from "./style.scss";
+import { styled as styledCss } from "@earn/utils";
+const styled = styledCss(styles)
+
+function Toggles({ checked, onChange, size }) {
+ const [internalChecked, setInternalChecked] = useState(checked);
+ let sizeStyle = size === "lg" ? "lgSize" : null;
+ const delayedOnChange = useRef(
+ _.debounce((q, cb) => cb(q), config.GUIKIT.DEBOUNCE_ON_CHANGE_TIME) // eslint-disable-line no-undef
+ );
+
+ if (!sizeStyle) {
+ sizeStyle = size === "xs" ? "xsSize" : "smSize";
+ }
+
+ useEffect(() => {
+ setInternalChecked(checked);
+ }, [checked]);
+
+ return (
+
+ );
+}
+
+Toggles.defaultProps = {
+ checked: false,
+ onChange: () => {},
+ size: "sm",
+};
+
+Toggles.propTypes = {
+ checked: PT.bool,
+ onChange: PT.func,
+ size: PT.oneOf(["xs", "sm", "lg"]),
+};
+
+export default Toggles;
diff --git a/src/apps/earn/src/components/Toggle/style.scss b/src/apps/earn/src/components/Toggle/style.scss
new file mode 100644
index 000000000..36ca20ba3
--- /dev/null
+++ b/src/apps/earn/src/components/Toggle/style.scss
@@ -0,0 +1,142 @@
+@import "@earn/styles/variables";
+@import '@earn/styles/GUIKit/default';
+
+.container {
+ position: relative;
+ display: flex;
+ cursor: pointer;
+
+ .slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: $gui-kit-gray-30;
+ box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
+
+ &::before {
+ position: absolute;
+ content: '';
+ background-color: $tc-white;
+ box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.35);
+ border-radius: 50%;
+ }
+ }
+
+ // sm size
+ &.smSize {
+ width: 34px;
+ height: 20px;
+
+ .slider {
+ border-radius: 10px;
+
+ &::before {
+ height: 14px;
+ width: 14px;
+ left: 3px;
+ bottom: 3px;
+ }
+ }
+ }
+
+ // xs size
+ &.xsSize {
+ width: 26px;
+ height: 15px;
+
+ .slider {
+ border-radius: 7px;
+
+ &::before {
+ height: 11px;
+ width: 11px;
+ left: 2px;
+ bottom: 2px;
+ }
+ }
+ }
+
+ // lg size
+ &.lgSize {
+ width: 48px;
+ height: 25px;
+
+ .slider {
+ border-radius: 17px;
+
+ &::before {
+ height: 17px;
+ width: 17px;
+ left: 4px;
+ bottom: 4px;
+ }
+ }
+ }
+
+ input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+
+ &:focus + .slider {
+ box-shadow: 0 0 1px $gui-kit-level-2;
+ }
+
+ &:checked + .slider {
+ background-color: $gui-kit-level-2;
+ }
+ }
+
+ // lg size
+ &.lgSize input {
+ &:checked + .slider {
+ &::before {
+ -webkit-transform: translateX(23px);
+ -ms-transform: translateX(23px);
+ transform: translateX(23px);
+ }
+ }
+ }
+
+ // sm size
+ &.smSize input {
+ &:checked + .slider {
+ &::before {
+ -webkit-transform: translateX(14px);
+ -ms-transform: translateX(14px);
+ transform: translateX(14px);
+ }
+ }
+ }
+
+ // xs size
+ &.xsSize input {
+ &:checked + .slider {
+ &::before {
+ -webkit-transform: translateX(11px);
+ -ms-transform: translateX(11px);
+ transform: translateX(11px);
+ }
+ }
+ }
+}
+
+.on,
+.off {
+ position: absolute;
+ top: 5px;
+ font-size: 12px;
+ line-height: 14px;
+ color: $tc-white;
+}
+
+.on {
+ left: 8px;
+}
+
+.off {
+ right: 8px;
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Checkpoints/index.jsx b/src/apps/earn/src/components/challenge-detail/Checkpoints/index.jsx
new file mode 100644
index 000000000..dbedc660f
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Checkpoints/index.jsx
@@ -0,0 +1,98 @@
+import PT from "prop-types";
+
+import ArrowDown from '../../../assets/images/icon-arrow-down-black.svg';
+import ArrowUp from '../../../assets/images/icon-arrow-up-black.svg';
+
+import styles from "./styles.module.scss";
+import { styled as styledCss } from "../../../utils";
+const styled = styledCss(styles)
+
+function Checkpoints(props) {
+ const {
+ checkpoints,
+ toggleCheckpointFeedback,
+ } = props;
+ const {
+ checkpointResults,
+ generalFeedback,
+ } = checkpoints;
+
+ return (
+
+ {/*
+ );
+}
+
+Checkpoints.propTypes = {
+ checkpoints: PT.shape({
+ checkpointResults: PT.arrayOf(PT.shape()).isRequired,
+ generalFeedback: PT.string,
+ }).isRequired,
+ toggleCheckpointFeedback: PT.func.isRequired,
+};
+
+export default Checkpoints;
diff --git a/src/apps/earn/src/components/challenge-detail/Checkpoints/styles.module.scss b/src/apps/earn/src/components/challenge-detail/Checkpoints/styles.module.scss
new file mode 100644
index 000000000..919aa60b7
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Checkpoints/styles.module.scss
@@ -0,0 +1,153 @@
+@import "@earn/styles/mixins";
+$tc-gray-border: #aaaab5;
+
+.challenge-detail-checkpoints {
+ display: flex;
+ justify-content: flex-start;
+
+ .challenge-checkpoint-list {
+ margin: 50px 20px 50px 10px;
+ display: flex;
+ flex-direction: column;
+
+ @include xs-to-sm {
+ display: none;
+ }
+
+ .challenge-checkpoint-li {
+ @include tc-label-xl;
+
+ background: $tc-white;
+ border: 1px solid $tc-gray-border;
+ border-radius: 2px;
+ color: $tc-dark-blue;
+ padding: 10px 0;
+ margin-bottom: 8px;
+ width: 190px;
+ max-width: 190px;
+ line-height: 30px;
+ text-align: center;
+ cursor: pointer;
+ }
+ }
+
+ .challenge-checkpoint-detail {
+ flex: 1;
+ margin: 34px 19px 36px 29px;
+
+ @include xs-to-sm {
+ margin: 24px 16px;
+ }
+
+ & > h2 {
+ @include barlow-bold;
+
+ font-weight: 600;
+ color: $tc-black;
+ font-size: 24px;
+ line-height: 28px;
+ text-transform: uppercase;
+ margin-bottom: 10px;
+
+ @include xs-to-sm {
+ font-size: 20px;
+ line-height: 22px;
+ }
+ }
+
+ & > h5 {
+ @include roboto-regular;
+
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+ margin-top: 16px;
+
+ @include xs-to-sm {
+ font-size: 14px;
+ line-height: 20px;
+ }
+ }
+
+ & > p {
+ @include tc-body-md;
+
+ white-space: pre-wrap;
+ color: $tc-gray-90;
+ margin-bottom: 25px;
+ }
+
+ .challenge-checkpoint-winners {
+ margin-bottom: 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ .challenge-checkpoint-submission {
+ @include barlow-bold;
+
+ flex: 1;
+ background: #f4f4f4;
+ padding: 8px 8px 8px 16px;
+ border: 0;
+ color: $tc-black;
+ font-size: 18px;
+ line-height: 22px;
+ text-align: left;
+ display: flex;
+ font-weight: 600;
+ text-transform: uppercase;
+ border-radius: 4px;
+ overflow: hidden;
+ justify-content: space-between;
+ cursor: pointer;
+
+ @include xs-to-sm {
+ font-size: 16px;
+ line-height: 18px;
+ }
+
+ .challenge-checkpoint-expander {
+ padding-right: 23px;
+
+ @include xs-to-sm {
+ padding-right: 16px;
+ }
+
+ svg {
+ width: 12px;
+ height: 12px;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ }
+ }
+
+ .feedback-text {
+ @include xs-to-sm;
+ }
+ }
+
+ .challenge-checkpoint-feedback {
+ @include roboto-regular;
+
+ flex: 1;
+ white-space: pre-wrap;
+ color: $tc-black;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ padding: 16px;
+ background-color: #f4f4f4;
+
+ @include xs-to-sm {
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ span {
+ color: $tc-black;
+ }
+ }
+ }
+ }
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Header/ChallengeTags.jsx b/src/apps/earn/src/components/challenge-detail/Header/ChallengeTags.jsx
new file mode 100644
index 000000000..4f601939c
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Header/ChallengeTags.jsx
@@ -0,0 +1,153 @@
+/*
+ A stateless component that renders "sub track", "events" ,
+ "platforms" and "technology" as tag.
+ Sub Track and Events have topcoder color accent to denote track.
+ Blue - Design, Green - Develop, Orange - Data Science
+*/
+
+import _ from "lodash";
+import PT from "prop-types";
+import config from "../../../config";
+
+import {
+ Tag,
+ DevelopmentTrackTag,
+} from "../Tags";
+
+import { COMPETITION_TRACKS } from "../../../utils/tc";
+import VerifiedTag from "../VerifiedTag";
+import { calculateScore } from "../../../utils/challenge-listing/helper";
+import { styled as styledCss } from "../../../utils";
+
+import MatchScore from "./MatchScore";
+import styles from "./style.scss";
+
+const styled = styledCss(styles)
+
+export default function ChallengeTags(props) {
+ const {
+ isSelfService,
+ challengeId,
+ challengesUrl,
+ track,
+ challengeType,
+ events,
+ technPlatforms,
+ setChallengeListingFilter,
+ openForRegistrationChallenges,
+ } = props;
+ const filteredChallenge = _.find(openForRegistrationChallenges, { id: challengeId });
+ const matchSkills = filteredChallenge ? filteredChallenge.match_skills || [] : [];
+ const matchScore = filteredChallenge ? filteredChallenge.jaccard_index || [] : 0;
+
+ const tags = technPlatforms.filter(tag => !matchSkills.includes(tag));
+ const abbreviationName = challengeType ? challengeType.name : null;
+ let abbreviation;
+ switch (abbreviationName) {
+ case 'First2Finish':
+ abbreviation = 'F2F';
+ break;
+ case 'Challenge':
+ abbreviation = 'CH';
+ break;
+ case 'Task':
+ abbreviation = 'TSK';
+ break;
+ default:
+ abbreviation = null;
+ }
+
+ return (
+
+ {checkpointResults &&
+ checkpointResults.map((item, index) => (
+
+ ))}
+
*/}
+
+
+ Checkpoint Winners & General Feedback
+ + {checkpointResults && + checkpointResults.map((item) => ( +
+
+ {
+ item.expanded
+ && (
+
+ ))
+ }
+ Empty Feedback", + }} + /> + ) + } +
+ {
+ abbreviation && (
+
+ On Demand
+
+ )
+ }
+ {
+ tags.map(tag => (
+ tag
+ && (
+
+ setImmediate(() => setChallengeListingFilter({ search: tag }))
+ }
+ to={`${challengesUrl}?search=${
+ encodeURIComponent(tag)}`}
+ >
+ {tag}
+
+
+ )
+ ))
+ }
+
+ );
+}
+
+ChallengeTags.defaultProps = {
+ events: [],
+ technPlatforms: [],
+ isSelfService: false,
+};
+
+ChallengeTags.propTypes = {
+ isSelfService: PT.bool,
+ challengeId: PT.string.isRequired,
+ challengesUrl: PT.string.isRequired,
+ track: PT.string.isRequired,
+ events: PT.arrayOf(PT.string),
+ technPlatforms: PT.arrayOf(PT.string),
+ setChallengeListingFilter: PT.func.isRequired,
+ challengeType: PT.shape().isRequired,
+ openForRegistrationChallenges: PT.arrayOf(PT.shape()).isRequired,
+};
diff --git a/src/apps/earn/src/components/challenge-detail/Header/DeadlinesPanel/Card/index.jsx b/src/apps/earn/src/components/challenge-detail/Header/DeadlinesPanel/Card/index.jsx
new file mode 100644
index 000000000..c5401798e
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Header/DeadlinesPanel/Card/index.jsx
@@ -0,0 +1,72 @@
+/**
+ * A single deadline card.
+ */
+import PT from 'prop-types';
+import moment from 'moment';
+
+import { ReactComponent as CalendarIcon } from '@earn/assets/images/icon-calendar-2.svg';
+import { ReactComponent as CalendarIconActive } from '@earn/assets/images/icon-calendar-2-active.svg';
+import { ReactComponent as TimeIcon } from '@earn/assets/images/icon-time.svg';
+import { ReactComponent as TimeIconActive } from '@earn/assets/images/icon-time-active.svg';
+import { styled as styledCss } from "@earn/utils";
+
+import styles from './style.scss';
+const styled = styledCss(styles)
+
+/* Date/time format to use in the card. */
+const FORMAT_YEAR = 'MMM DD, YYYY';
+const TIME = 'HH:mm';
+
+export default function Card({
+ title, start, end, showRange,
+}) {
+ const startMoment = moment(start);
+ const endMoment = moment(end);
+ const past = endMoment.isBefore(moment());
+ return (
+
+ (
+ setImmediate(() => setChallengeListingFilter(
+ { types: [abbreviation] },
+ ))
+ )
+ }
+ to={`${challengesUrl}?types[]=${encodeURIComponent(abbreviation)}`}
+ >
+ {abbreviationName}
+
+
+ )
+ }
+ {
+ abbreviation ? events.map(event => (
+
+
+ {event}
+
+
+ )) : null
+ }
+ {
+ matchScore > 0 && config.ENABLE_RECOMMENDER && (
+
+
+
+ );
+}
+
+Card.propTypes = {
+ title: PT.string.isRequired,
+ start: PT.string.isRequired,
+ end: PT.string.isRequired,
+ showRange: PT.bool.isRequired,
+};
diff --git a/src/apps/earn/src/components/challenge-detail/Header/DeadlinesPanel/Card/style.scss b/src/apps/earn/src/components/challenge-detail/Header/DeadlinesPanel/Card/style.scss
new file mode 100644
index 000000000..121688c51
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Header/DeadlinesPanel/Card/style.scss
@@ -0,0 +1,139 @@
+@import "@earn/styles/mixins";
+
+.open {
+ color: $tc-white;
+
+ svg {
+ path {
+ fill: $tc-white;
+ }
+ }
+}
+
+.past {
+ color: #aaa;
+
+ svg {
+ path {
+ fill: #aaa;
+ }
+ }
+}
+
+.open,
+.past {
+ @include roboto-regular;
+
+ flex: 0 0 auto;
+ position: relative;
+ padding: 0 24px;
+ min-width: 200px;
+ margin-bottom: 24px;
+
+ &:not(:last-child)::after {
+ content: '';
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 2px;
+ height: 100%;
+ border-radius: 1px;
+ background-color: #767676;
+ }
+
+ @include xs-to-md {
+ padding: 16px 0;
+ margin-bottom: 0;
+
+ &:not(:last-child)::after {
+ height: 2px;
+ width: 100%;
+ top: unset;
+ bottom: 0;
+ }
+ }
+
+ svg {
+ height: 13.13px;
+ width: 13.13px;
+ }
+}
+
+.date {
+ @include roboto-medium;
+
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ line-height: 24px;
+ margin-bottom: 4px;
+
+ @include xs-to-md {
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ span {
+ margin-left: 8px;
+ }
+}
+
+.time {
+ @include roboto-medium;
+
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ line-height: 24px;
+
+ @include xs-to-md {
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ span {
+ margin-left: 8px;
+ }
+}
+
+.title {
+ @include roboto-bold;
+
+ font-size: 12px;
+ letter-spacing: 1px;
+ line-height: 16px;
+ margin-bottom: 16px;
+ text-transform: uppercase;
+
+ @include xs-to-md {
+ font-size: 10px;
+ line-height: 12px;
+ margin-bottom: 20px;
+ }
+}
+
+.sections {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include xs-to-md {
+ flex-direction: row;
+ gap: 24px;
+ }
+}
+
+.section {
+ @include xs-to-md {
+ flex: 1;
+ }
+}
+
+.section-title {
+ @include roboto-medium;
+
+ display: inline-block;
+ font-size: 11px;
+ line-height: 10px;
+ margin-bottom: 4px;
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Header/DeadlinesPanel/index.jsx b/src/apps/earn/src/components/challenge-detail/Header/DeadlinesPanel/index.jsx
new file mode 100644
index 000000000..933da7b81
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Header/DeadlinesPanel/index.jsx
@@ -0,0 +1,81 @@
+/**
+ * Deadlines panel.
+ */
+
+import moment from "moment-timezone";
+import PT from "prop-types";
+
+import { phaseEndDate, phaseStartDate } from "../../../../utils/challenge-listing/helper";
+import Card from "./Card";
+import styles from "./style.scss";
+import { styled as styledCss } from "@earn/utils";
+const styled = styledCss(styles)
+
+export default function DeadlinesPanel({ deadlines }) {
+ let hasSubmissionPhase = false;
+
+ const getCardProps = (deadline, index) => {
+ let { name } = deadline;
+ let showRange = true;
+ name = name.replace(/\bCheckpoint\b/, 'Checkpoint');
+ if (/.+submission/i.test(name)) {
+ hasSubmissionPhase = true;
+ name = name.replace(/submission/i, 'Submission');
+ } else {
+ switch (name) {
+ case 'Submission':
+ name = hasSubmissionPhase ? 'Final Submission' : 'Submission';
+ break;
+ case 'Review':
+ name = hasSubmissionPhase ? 'Final Review' : name;
+ break;
+ case 'Appeals':
+ name = hasSubmissionPhase ? 'Appeals Due' : name;
+ break;
+ default:
+ }
+ }
+ if (index === deadlines.length - 1) {
+ showRange = false;
+ }
+
+ const start = phaseStartDate(deadline);
+ const end = phaseEndDate(deadline);
+
+ return {
+ name, start, end, showRange,
+ };
+ };
+
+ return (
+ {title}
+
+ {showRange ? (
+
+ { past ?
+ { past ?
+ { past ?
+ { past ?
+
+ );
+}
+
+DeadlinesPanel.propTypes = {
+ deadlines: PT.arrayOf(PT.shape({
+ actualEndDate: PT.string,
+ actualStartDate: PT.string,
+ scheduledEndDate: PT.string,
+ scheduledStartDate: PT.string,
+ })).isRequired,
+};
diff --git a/src/apps/earn/src/components/challenge-detail/Header/DeadlinesPanel/style.scss b/src/apps/earn/src/components/challenge-detail/Header/DeadlinesPanel/style.scss
new file mode 100644
index 000000000..63a64c387
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Header/DeadlinesPanel/style.scss
@@ -0,0 +1,38 @@
+@import "@earn/styles/mixins";
+
+.panel {
+ background-color: #555;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ padding: 24px 0 34px 0;
+ position: relative;
+ margin-bottom: -24px;
+
+ @include xs-to-md {
+ flex-direction: column;
+ padding-top: 0;
+ padding-right: 16px;
+ padding-left: 16px;
+ margin-bottom: 0;
+ }
+
+ &.left {
+ justify-content: flex-start;
+ }
+}
+
+.timezone {
+ @include roboto-regular;
+
+ color: #d4d4d4;
+ font-size: 12px;
+ line-height: 18px;
+ position: absolute;
+ right: 24px;
+ bottom: 8px;
+
+ @include xs-to-md {
+ right: 16px;
+ }
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Header/MatchScore/index.jsx b/src/apps/earn/src/components/challenge-detail/Header/MatchScore/index.jsx
new file mode 100644
index 000000000..a974d6097
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Header/MatchScore/index.jsx
@@ -0,0 +1,22 @@
+import PT from 'prop-types';
+import { DevelopmentTrackEventTag } from '../../Tags';
+
+import styles from './style.scss';
+
+export default function MatchScore({ score }) {
+ return (
+ + Timezone: + {moment.tz.guess()} +
+ { deadlines.map((d, index) => { + const { + name, start, end, showRange, + } = getCardProps(d, index); + return ( +
+
+ {score}% match
+
+
+ );
+}
+
+MatchScore.defaultProps = {
+ score: 0,
+};
+
+MatchScore.propTypes = {
+ score: PT.number,
+};
diff --git a/src/apps/earn/src/components/challenge-detail/Header/MatchScore/style.scss b/src/apps/earn/src/components/challenge-detail/Header/MatchScore/style.scss
new file mode 100644
index 000000000..710ac938f
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Header/MatchScore/style.scss
@@ -0,0 +1,9 @@
+@import "@earn/styles/mixins";
+
+.matchScoreTag {
+ margin-right: 0;
+ margin-bottom: 4px;
+ margin-top: -2px;
+ display: inline-block;
+ white-space: nowrap;
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Header/Prizes.jsx b/src/apps/earn/src/components/challenge-detail/Header/Prizes.jsx
new file mode 100644
index 000000000..b7450d495
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Header/Prizes.jsx
@@ -0,0 +1,67 @@
+/*
+ Component to show the prize details for given challenge.
+*/
+import _ from 'lodash';
+import PT from 'prop-types';
+
+import styles from './style.scss';
+
+function getOrdinal(num) {
+ const ordinals = ['th', 'st', 'nd', 'rd'];
+ const v = num % 100;
+ return ordinals[(v - 20) % 10] || ordinals[v] || ordinals[0];
+}
+
+export default function Prizes({ pointPrizes, prizes }) {
+ const prizeLength = Math.max(pointPrizes.length, prizes.length);
+ return (
+
+ {
+ _.range(prizeLength).map((index) => {
+ const rank = index + 1;
+ const pair = [];
+ const isPrizeIndexNotUndefined = !_.isUndefined(prizes[index])
+ && !_.isUndefined(prizes[index].value);
+ if (isPrizeIndexNotUndefined) pair.push(prizes[index].value.toLocaleString());
+ if (!_.isUndefined(pointPrizes[index])) pair.push(`${pointPrizes[index]}pts`);
+ return (
+
+ );
+}
+
+Prizes.defaultProps = {
+ pointPrizes: [],
+ prizes: [],
+};
+
+Prizes.propTypes = {
+ pointPrizes: PT.arrayOf(PT.number),
+ prizes: PT.arrayOf(PT.shape()),
+};
diff --git a/src/apps/earn/src/components/challenge-detail/Header/TabSelector/index.jsx b/src/apps/earn/src/components/challenge-detail/Header/TabSelector/index.jsx
new file mode 100644
index 000000000..cd504af05
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Header/TabSelector/index.jsx
@@ -0,0 +1,257 @@
+/* eslint jsx-a11y/no-static-element-interactions:0 */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/*
+ Stateless tab control to switch between various views available in
+ challenge detail page.
+*/
+
+import _ from 'lodash';
+import { useMemo, useState } from 'react';
+import PT from 'prop-types';
+import cn from 'classnames';
+import { useMediaQuery } from 'react-responsive';
+
+import { TabsNavbar } from '~/libs/ui';
+
+import { TABS as DETAIL_TABS } from "../../../../actions/page/challenge-details";
+import config from "../../../../config";
+import { ReactComponent as CloseIcon } from '../../../../assets/images/icon-close-green.svg';
+import { ReactComponent as SortIcon } from '../../../../assets/images/icon-sort-mobile.svg';
+
+import {
+ MarathonSortOptions,
+ MySubmissionsSortOptions,
+ RegistrationSortOptions,
+ SubmissionSortOptions,
+} from './sort.options';
+import styles from './style.scss';
+
+export default function ChallengeViewSelector(props) {
+ let showDashboard;
+ const { type, tags, metadata } = props.challenge;
+ const dashboardMetadata = _.find(metadata, { name: 'show_data_dashboard' });
+ if (dashboardMetadata) {
+ showDashboard = dashboardMetadata.value;
+ }
+
+ const [currentSelected, setCurrentSelected] = useState(props.selectedView ?? DETAIL_TABS.DETAILS);
+ const [expanded, setExpanded] = useState(false);
+ const [selectedSortOption, setSelectedSortOption] = useState();
+ const isF2F = type === 'First2Finish';
+ const isBugHunt = _.includes(tags, 'Bug Hunt');
+ const isDesign = props.trackLower === 'design';
+
+ const sortOptions = useMemo(() => {
+ if (isF2F || isBugHunt) {
+ return SubmissionSortOptions.slice(2);
+ }
+
+ if (props.isMM) {
+ return MarathonSortOptions;
+ }
+
+ if (isDesign) {
+ return RegistrationSortOptions.slice(2);
+ }
+
+ if (currentSelected === DETAIL_TABS.MY_SUBMISSIONS) {
+ return MySubmissionsSortOptions;
+ }
+
+ return currentSelected === DETAIL_TABS.SUBMISSIONS
+ ? SubmissionSortOptions : RegistrationSortOptions;
+ }, [currentSelected, isBugHunt, isDesign, isF2F, props.isMM]);
+
+ const numOfSub = props.numOfSubmissions + (props.numOfCheckpointSubmissions || 0);
+ const forumId = _.get(props.challenge, 'legacy.forumId') || 0;
+ const discuss = _.get(props.challenge, 'discussions', []).filter(d => (
+ d.type === 'challenge' && !_.isEmpty(d.url)
+ ));
+ const roles = _.get(props.challenge, 'userDetails.roles') || [];
+
+ const forumEndpoint = isDesign
+ ? `/?module=ThreadList&forumID=${forumId}`
+ : `/?module=Category&categoryID=${forumId}`;
+
+ const handleSelectorClicked = (selected) => {
+ setCurrentSelected(selected);
+ props.onSelectorClicked(selected);
+ };
+
+ const desktop = useMediaQuery({ minWidth: 1024 });
+
+ const tabs = useMemo(() => [
+ {
+ id: DETAIL_TABS.DETAILS,
+ title: 'Details',
+ },
+ props.numOfRegistrants && {
+ id: DETAIL_TABS.REGISTRANTS,
+ title: 'Registrants',
+ badges: [
+ {count: props.numOfRegistrants, type: 'info'}
+ ]
+ },
+ (isDesign && props.checkpointCount) > 0 && {
+ id: DETAIL_TABS.CHECKPOINTS,
+ title: 'Checkpoints',
+ badges: [
+ {count: props.checkpointCount, type: 'info'}
+ ]
+ },
+ (numOfSub && props.isLoggedIn) > 0 && {
+ id: DETAIL_TABS.SUBMISSIONS,
+ title: 'Submissions',
+ badges: [
+ {count: numOfSub, type: 'info'}
+ ]
+ },
+ (props.hasRegistered && props.isMM && props.mySubmissions) && {
+ id: DETAIL_TABS.MY_SUBMISSIONS,
+ title: 'My Submissions',
+ badges: [
+ {count: props.mySubmissions.length, type: 'info'}
+ ]
+ },
+ (props.hasRegistered && props.mySubmissions.length > 0) && {
+ id: 'SUBMISSION REVIEW',
+ title: 'Submission Review',
+ url: `${config.URL.SUBMISSION_REVIEW}/challenges/${props.challenge.legacyId}`,
+ },
+ props.numWinners && {
+ id: DETAIL_TABS.WINNERS,
+ title: 'Winners',
+ badges: [
+ {count: props.numWinners.length, type: 'info'}
+ ]
+ },
+ ...(((props.hasRegistered || Boolean(roles.length)) && discuss?.map(d => ({
+ id: DETAIL_TABS.CHALLENGE_FORUM,
+ title: 'Challenge Discussion',
+ url: d.url
+ }))) || []),
+ (props.hasRegistered || Boolean(roles.length)) && _.isEmpty(discuss) && (forumId > 0) && {
+ id: DETAIL_TABS.CHALLENGE_FORUM,
+ title: 'Challenge Forum',
+ url: `${config.URL.FORUMS}${forumEndpoint}`
+ },
+ (props.challenge.track.toLowerCase() === 'data science' && showDashboard) && {
+ id: DETAIL_TABS.MM_DASHBOARD,
+ title: 'Dashboard',
+ },
+ ].filter(Boolean), [
+ props.challenge.legacyId,
+ props.challenge.track,
+ props.checkpointCount,
+ discuss,
+ forumEndpoint,
+ forumId,
+ props.hasRegistered,
+ isDesign,
+ props.isLoggedIn,
+ props.isMM,
+ props.mySubmissions,
+ props.numOfRegistrants,
+ numOfSub,
+ props.numWinners,
+ roles.length,
+ showDashboard,
+ ]);
+
+ const isSubmissionTabSelected = isDesign && !(props.challenge.submissionViewable === 'true')
+ ? currentSelected === DETAIL_TABS.REGISTRANTS
+ : (currentSelected === DETAIL_TABS.SUBMISSIONS
+ || currentSelected === DETAIL_TABS.REGISTRANTS
+ || currentSelected === DETAIL_TABS.MY_SUBMISSIONS
+ );
+
+ return (
+
+ {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+
+ );
+ })
+ }
+
+
+
+
+
+
+ );
+}
+
+ChallengeViewSelector.defaultProps = {
+ isLoggedIn: false,
+ challenge: {},
+ isMM: false,
+ checkpointCount: 0,
+ numOfRegistrants: 0,
+ numOfCheckpointSubmissions: 0,
+ numOfSubmissions: 0,
+};
+
+ChallengeViewSelector.propTypes = {
+ isLoggedIn: PT.bool,
+ challenge: PT.shape({
+ id: PT.string,
+ legacyId: PT.oneOfType([PT.string, PT.number]),
+ legacy: PT.shape({
+ forumId: PT.number,
+ }),
+ userDetails: PT.shape({
+ roles: PT.arrayOf(PT.string),
+ }),
+ type: PT.string,
+ track: PT.string,
+ tags: PT.arrayOf(PT.shape()),
+ metadata: PT.arrayOf(PT.string),
+ submissionViewable: PT.string,
+ }),
+ isMM: PT.bool,
+ checkpointCount: PT.number,
+ numOfRegistrants: PT.number,
+ numOfCheckpointSubmissions: PT.number,
+ numOfSubmissions: PT.number,
+ numWinners: PT.number.isRequired,
+ onSelectorClicked: PT.func.isRequired,
+ selectedView: PT.string.isRequired,
+ trackLower: PT.string.isRequired,
+ hasRegistered: PT.bool.isRequired,
+ mySubmissions: PT.arrayOf(PT.shape()).isRequired,
+ onSort: PT.func.isRequired,
+ viewAsTable: PT.bool.isRequired,
+};
diff --git a/src/apps/earn/src/components/challenge-detail/Header/TabSelector/sort.options.js b/src/apps/earn/src/components/challenge-detail/Header/TabSelector/sort.options.js
new file mode 100644
index 000000000..9520b66a0
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Header/TabSelector/sort.options.js
@@ -0,0 +1,50 @@
+export const SubmissionSortOptions = [
+ { field: 'Rating', sort: 'desc', name: 'Rating: High to Low' },
+ { field: 'Rating', sort: 'asc', name: 'Rating: Low to High' },
+ { field: 'Username', sort: 'asc', name: 'Username' },
+ { field: 'Submission Date', sort: 'desc', name: 'Submission Date: New to Old' },
+ { field: 'Submission Date', sort: 'asc', name: 'Submission Date: Old to New' },
+ { field: 'Initial Score', sort: 'desc', name: 'Initial Score: High to Low' },
+ { field: 'Initial Score', sort: 'asc', name: 'Initial Score: Low to High' },
+ { field: 'Final Score', sort: 'desc', name: 'Final Score: High to Low' },
+ { field: 'Final Score', sort: 'asc', name: 'Final Score: Low to High' },
+];
+
+export const RegistrationSortOptions = [
+ { field: 'Rating', sort: 'desc', name: 'Rating: High to Low' },
+ { field: 'Rating', sort: 'asc', name: 'Rating: Low to High' },
+ { field: 'Username', sort: 'asc', name: 'Username' },
+ { field: 'Registration Date', sort: 'desc', name: 'Registration Date: New to Old' },
+ { field: 'Registration Date', sort: 'asc', name: 'Registration Date: Old to New' },
+ { field: 'Submitted Date', sort: 'desc', name: 'Submitted Date: New to Old' },
+ { field: 'Submitted Date', sort: 'asc', name: 'Submitted Date: Old to New' },
+];
+
+export const MarathonSortOptions = [
+ { field: 'Final Rank', sort: 'desc', name: 'Final Rank: High to Low' },
+ { field: 'Final Rank', sort: 'asc', name: 'Final Rank: Low to High' },
+ { field: 'Provisional Rank', sort: 'desc', name: 'Provisional Rank: High to Low' },
+ { field: 'Provisional Rank', sort: 'asc', name: 'Provisional Rank: Low to High' },
+ { field: 'Rating', sort: 'desc', name: 'Rating: High to Low' },
+ { field: 'Rating', sort: 'asc', name: 'Rating: Low to High' },
+ { field: 'Username', sort: 'asc', name: 'Username' },
+ { field: 'Final Score', sort: 'desc', name: 'Final Score: High to Low' },
+ { field: 'Final Score', sort: 'asc', name: 'Final Score: Low to High' },
+ { field: 'Provisional Score', sort: 'desc', name: 'Provisional Score: High to Low' },
+ { field: 'Provisional Score', sort: 'asc', name: 'Provisional Score: Low to High' },
+ { field: 'Time', sort: 'desc', name: 'Submission Date: New to Old' },
+ { field: 'Time', sort: 'asc', name: 'Submission Date: Old to New' },
+];
+
+export const MySubmissionsSortOptions = [
+ { field: 'Submission ID', sort: 'desc', name: 'Submission ID: High to Low' },
+ { field: 'Submission ID', sort: 'asc', name: 'Submission ID: Low to High' },
+ { field: 'Status', sort: 'desc', name: 'Status: High to Low' },
+ { field: 'Status', sort: 'asc', name: 'Status: Low to High' },
+ { field: 'Final', sort: 'desc', name: 'Final Score: High to Low' },
+ { field: 'Final', sort: 'asc', name: 'Final Score: Low to High' },
+ { field: 'Provision', sort: 'desc', name: 'Provisional Score: High to Low' },
+ { field: 'Provision', sort: 'asc', name: 'Provisional Score: Low to High' },
+ { field: 'Time', sort: 'desc', name: 'Time: New to Old' },
+ { field: 'Time', sort: 'asc', name: 'Time: Old to New' },
+];
diff --git a/src/apps/earn/src/components/challenge-detail/Header/TabSelector/style.scss b/src/apps/earn/src/components/challenge-detail/Header/TabSelector/style.scss
new file mode 100644
index 000000000..4ea4d56fd
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Header/TabSelector/style.scss
@@ -0,0 +1,83 @@
+@import "@earn/styles/mixins";
+
+.mobile-sort-icon {
+ display: none;
+
+ @include xs-to-sm {
+ display: inline-block;
+ margin-left: 8px;
+ }
+}
+
+.container {
+ margin-top: 28px;
+ margin-left: 2px;
+ margin-right: 14px;
+ position: relative;
+ background-color: #eaf6fd;
+
+ @include xs-to-md {
+ background-color: transparent;
+ display: flex;
+ & > :first-child {
+ flex: 1 1 auto;
+ }
+ }
+}
+
+.sort-overlay {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 10000;
+ background-color: #fff;
+ top: 0;
+
+ .sort-header {
+ background-color: #f4f4f4;
+ display: flex;
+ justify-content: space-between;
+ padding: 10px 16px;
+
+ p {
+ @include barlow-bold;
+
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 20px;
+ color: $tc-black;
+ }
+ }
+
+ .sort-body {
+ background-color: #fff;
+ margin-left: -2px;
+ filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.1));
+ -webkit-filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.1));
+ border-radius: 4px;
+
+ .sort-item {
+ @include roboto-regular;
+
+ padding: 7.5px 0 0;
+ height: 40px;
+ color: #555;
+ font-size: 14px;
+ line-height: 20px;
+ border-bottom: 1px solid #d4d4d4;
+
+ span {
+ margin: 0 12px;
+ }
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ & .bold {
+ font-weight: 700 !important;
+ color: #000 !important;
+ }
+ }
+ }
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Header/index.jsx b/src/apps/earn/src/components/challenge-detail/Header/index.jsx
new file mode 100644
index 000000000..f0fd2d9e3
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Header/index.jsx
@@ -0,0 +1,561 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/**
+ * Challenge header component.
+ * This component renders all other child components part of the header.
+ * Any data massaging needed for a child view should be done here.
+ */
+
+import _ from 'lodash';
+import moment from 'moment';
+import 'moment-duration-format';
+import PT from 'prop-types';
+
+import { isMM } from '@earn/utils/challenge';
+import { IconOutline, LinkButton, Button } from '~/libs/ui';
+import { COMPETITION_TRACKS } from '@earn/utils/tc';
+import { phaseEndDate } from '@earn/utils/challenge-listing/helper';
+import {
+ getTimeLeft,
+} from '@earn/utils/challenge-detail/helper';
+import { ReactComponent as ArrowUp } from '@earn/assets/images/icon-arrow-up.svg';
+import { ReactComponent as ArrowDown } from '@earn/assets/images/icon-arrow-down.svg';
+
+import Prizes from './Prizes';
+import ChallengeTags from './ChallengeTags';
+import DeadlinesPanel from './DeadlinesPanel';
+import TabSelector from './TabSelector';
+
+import styles from './style.scss';
+import { styled as styledCss } from "../../../utils";
+
+const styled = styledCss(styles)
+
+/* Holds day and hour range in ms. */
+const HOUR_MS = 60 * 60 * 1000;
+const DAY_MS = 24 * HOUR_MS;
+
+export default function ChallengeHeader(props) {
+ const {
+ isLoggedIn,
+ challenge,
+ challengesUrl,
+ checkpoints,
+ hasRegistered,
+ numWinners,
+ onSelectorClicked,
+ onToggleDeadlines,
+ registering,
+ registerForChallenge,
+ setChallengeListingFilter,
+ unregisterFromChallenge,
+ unregistering,
+ challengeTypesMap,
+ selectedView,
+ showDeadlineDetail: showDeadlineDetailProp,
+ hasFirstPlacement,
+ hasThriveArticles,
+ hasRecommendedChallenges,
+ isMenuOpened,
+ submissionEnded,
+ mySubmissions,
+ openForRegistrationChallenges,
+ onSort,
+ viewAsTable,
+ } = props;
+
+ const {
+ drPoints,
+ id: challengeId,
+ name,
+ pointPrizes,
+ events,
+ prizeSets,
+ reliabilityBonus,
+ numOfRegistrants,
+ numOfCheckpointSubmissions,
+ numOfSubmissions,
+ status,
+ type,
+ track,
+ } = challenge;
+ const showDeadlineDetail = showDeadlineDetailProp;
+ const tags = challenge.tags || [];
+
+ const allPhases = _.filter(challenge.phases || [], p => p.name !== 'Post-Mortem');
+ const sortedAllPhases = _.cloneDeep(allPhases)
+ .sort((a, b) => moment(phaseEndDate(a)).diff(phaseEndDate(b)));
+
+ const placementPrizes = _.find(prizeSets, { type: 'placement' });
+ const { prizes } = placementPrizes || [];
+ const checkpointPrizes = _.find(prizeSets, { type: 'checkpoint' });
+ let numberOfCheckpointsPrizes = 0;
+ let topCheckPointPrize = 0;
+ if (!_.isEmpty(checkpointPrizes)) {
+ numberOfCheckpointsPrizes = checkpointPrizes.prizes.length;
+ topCheckPointPrize = checkpointPrizes.prizes[0].value;
+ }
+
+ const phases = {};
+ if (allPhases) {
+ allPhases.forEach((phase) => {
+ phases[_.camelCase(phase.name)] = phase;
+ });
+ }
+
+ let registrationEnded = true;
+ const regPhase = phases && phases.registration;
+ if (status !== 'Completed' && regPhase) {
+ registrationEnded = !regPhase.isOpen;
+ }
+
+ const currentPhases = challenge.phases
+ .filter(p => p.name !== 'Registration' && p.isOpen)
+ .sort((a, b) => moment(a.scheduledEndDate).diff(b.scheduledEndDate))[0];
+
+ const trackLower = track ? track.replace(' ', '-').toLowerCase() : 'design';
+
+ const eventNames = (events || []).map((event => (event.eventName || '').toUpperCase()));
+
+ const miscTags = _.uniq(_.isArray(tags) ? tags : (tags || '').split(', '));
+
+ let bonusType = '';
+ if (numberOfCheckpointsPrizes && topCheckPointPrize) {
+ bonusType = 'Bonus';
+ } else if (reliabilityBonus && reliabilityBonus.toFixed() !== '0') {
+ bonusType = 'Reliability Bonus';
+ }
+
+ /* userDetails.hasUserSubmittedForReview does not reset to false
+ * if the user has deleted all of their submissions, so we have to
+ * iterate through all their submissions and ensure that all of them
+ * are Deleted
+ */
+ const hasSubmissions = !_.isEmpty(mySubmissions);
+
+ const openPhases = sortedAllPhases.filter(p => p.isOpen);
+ let nextPhase = openPhases[0];
+ if (hasRegistered && openPhases[0] && openPhases[0].name === 'Registration') {
+ nextPhase = openPhases[1] || {};
+ }
+
+ const deadlineEnd = moment(nextPhase && phaseEndDate(nextPhase));
+ const currentTime = moment();
+
+ const timeDiff = getTimeLeft(currentPhases, 'to go', true);
+
+ if (!timeDiff.late) {
+ timeDiff.text = timeDiff.text.replace('to go', '');
+ }
+
+ let timeLeft = deadlineEnd.isAfter(currentTime)
+ ? deadlineEnd.diff(currentTime) : 0;
+
+ let format;
+ if (timeLeft > DAY_MS) format = 'D[d] H[h]';
+ else if (timeLeft > HOUR_MS) format = 'H[h] m[min]';
+ else format = 'm[min] s[s]';
+
+ timeLeft = moment.duration(timeLeft).format(format);
+
+ let relevantPhases = [];
+
+ if (showDeadlineDetail) {
+ relevantPhases = (allPhases || []).filter((phase) => {
+ if (phase.name === 'Iterative Review') {
+ const end = phaseEndDate(phase);
+ return moment(end).isAfter();
+ }
+ // do not show [Specification Submission, Specification Review, Approval]
+ // phases for design challenges
+ if (trackLower === 'design'
+ && ['Specification Submission', 'Specification Review', 'Approval'].indexOf(phase.name) >= 0) {
+ return false;
+ }
+ return true;
+ });
+
+ relevantPhases.sort((a, b) => {
+ if (a.name.toLowerCase().includes('registration')) {
+ return -1;
+ }
+ if (b.name.toLowerCase().includes('registration')) {
+ return 1;
+ }
+ const aEndDate = phaseEndDate(a);
+ const bEndDate = phaseEndDate(b);
+ return moment(aEndDate).diff(bEndDate);
+ });
+
+ if (trackLower === 'design') {
+ // condition for 2 round challenge for now
+ let finalStartDate;
+ if (relevantPhases.length === 8 || challenge.timelineTemplateId === 'd4201ca4-8437-4d63-9957-3f7708184b07') {
+ relevantPhases = _.filter(relevantPhases, p => !(p.name.toLowerCase().includes('checkpoint screening') || p.name.toLowerCase().includes('screening')));
+ _.map(relevantPhases, (phase) => {
+ if (phase.name === 'Checkpoint Review') {
+ finalStartDate = phase.scheduledEndDate;
+ }
+ if (phase.name === 'Submission') {
+ // eslint-disable-next-line no-param-reassign
+ phase.scheduledStartDate = finalStartDate;
+ }
+ });
+ }
+ }
+ if (trackLower === 'quality-assurance') {
+ relevantPhases = _.filter(relevantPhases, p => !(p.name.toLowerCase().includes('specification submission') || p.name.toLowerCase().includes('specification review')));
+ }
+ if (type === 'First2Finish' && status === 'Completed') {
+ const phases2 = allPhases.filter(p => p.name === 'Iterative Review' && !p.isOpen);
+ const endPhaseDate = Math.max(...phases2.map(d => phaseEndDate(d)));
+ relevantPhases = _.filter(relevantPhases, p => (p.name.toLowerCase().includes('registration')
+ || phaseEndDate(p).getTime() < endPhaseDate));
+ relevantPhases.push({
+ id: -1,
+ name: 'Winners Announced',
+ isOpen: false,
+ actualEndDate: endPhaseDate,
+ scheduledEndDate: endPhaseDate,
+ });
+ } else if (relevantPhases.length > 1) {
+ // const lastPhase = relevantPhases[relevantPhases.length - 1];
+ // const lastPhaseTime = phaseEndDate(lastPhase).getTime();
+ const appealsEndDate = phaseEndDate(sortedAllPhases[sortedAllPhases.length - 1]);
+ // const appealsEnd = appealsEndDate.getTime();
+ relevantPhases.push({
+ id: -1,
+ name: 'Winners Announced',
+ isOpen: false,
+ actualEndDate: appealsEndDate,
+ scheduledEndDate: appealsEndDate,
+ });
+ }
+ }
+
+ const checkpointCount = checkpoints && checkpoints.numberOfPassedScreeningSubmissions;
+
+ let nextDeadlineMsg;
+ switch ((status || '').toLowerCase()) {
+ case 'completed':
+ nextDeadlineMsg = (
+ setExpanded(!expanded)}
+ >
+
+ )}
+ {expanded && (
+
+
+ )}
+
+ )}
+
+
+ SORT
+ setExpanded(false)} tabIndex={0}>
+
+
+ {sortOptions.map(option => (
+
+ {
+ setSelectedSortOption(option.name);
+ props.onSort(currentSelected, option);
+ setExpanded(false);
+ }}
+ >
+
+ {option.name}
+
+
+ ))}
+
+ The challenge is finished.
+
+ );
+ break;
+ case 'active':
+ break;
+ default:
+ nextDeadlineMsg = (
+
+ Status:
+
+
+ {_.upperFirst(_.lowerCase(status))}
+
+
+ );
+ break;
+ }
+
+ // Legacy MMs have a roundId field, but new MMs do not.
+ // This is used to disable registration/submission for legacy MMs.
+ const isLegacyMM = isMM(challenge) && Boolean(challenge.roundId);
+
+ if (hasFirstPlacement && !_.isEmpty(allPhases)) {
+ _.some(allPhases, { phaseType: 'Final Fix', phaseStatus: 'Open' });
+ }
+
+ const disabled = !hasRegistered || unregistering || submissionEnded || isLegacyMM;
+ const registerButtonDisabled = registering || registrationEnded || isLegacyMM;
+ const unregisterButtonDisabled = unregistering
+ || registrationEnded || hasSubmissions || isLegacyMM;
+ return (
+
+
+ );
+}
+
+ChallengeHeader.defaultProps = {
+ isLoggedIn: false,
+ checkpoints: {},
+ isMenuOpened: false,
+ hasThriveArticles: false,
+ hasRecommendedChallenges: false,
+};
+
+ChallengeHeader.propTypes = {
+ isLoggedIn: PT.bool,
+ checkpoints: PT.shape(),
+ challenge: PT.shape({
+ id: PT.string.isRequired,
+ legacy: PT.shape({
+ selfService: PT.bool,
+ }),
+ type: PT.any,
+ track: PT.string,
+ drPoints: PT.any,
+ name: PT.any,
+ pointPrizes: PT.any,
+ events: PT.any,
+ technologies: PT.any,
+ platforms: PT.any,
+ tags: PT.any,
+ prizes: PT.any,
+ timelineTemplateId: PT.string,
+ reliabilityBonus: PT.any,
+ userDetails: PT.any,
+ numOfRegistrants: PT.any,
+ numOfCheckpointSubmissions: PT.any,
+ numOfSubmissions: PT.any,
+ status: PT.any,
+ phases: PT.any,
+ roundId: PT.any,
+ prizeSets: PT.any,
+ match_skills: PT.arrayOf(PT.string),
+ }).isRequired,
+ challengesUrl: PT.string.isRequired,
+ hasRegistered: PT.bool.isRequired,
+ hasThriveArticles: PT.bool,
+ hasRecommendedChallenges: PT.bool,
+ submissionEnded: PT.bool.isRequired,
+ numWinners: PT.number.isRequired,
+ onSelectorClicked: PT.func.isRequired,
+ onToggleDeadlines: PT.func.isRequired,
+ registerForChallenge: PT.func.isRequired,
+ registering: PT.bool.isRequired,
+ selectedView: PT.string.isRequired,
+ setChallengeListingFilter: PT.func.isRequired,
+ showDeadlineDetail: PT.bool.isRequired,
+ unregisterFromChallenge: PT.func.isRequired,
+ unregistering: PT.bool.isRequired,
+ challengeTypesMap: PT.shape().isRequired,
+ hasFirstPlacement: PT.bool.isRequired,
+ isMenuOpened: PT.bool,
+ mySubmissions: PT.arrayOf(PT.shape()).isRequired,
+ openForRegistrationChallenges: PT.arrayOf(PT.shape()).isRequired,
+ onSort: PT.func.isRequired,
+ viewAsTable: PT.bool.isRequired,
+};
diff --git a/src/apps/earn/src/components/challenge-detail/Header/style.scss b/src/apps/earn/src/components/challenge-detail/Header/style.scss
new file mode 100644
index 000000000..f6c57e070
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Header/style.scss
@@ -0,0 +1,612 @@
+/* stylelint-disable no-descending-specificity */
+@import '@libs/ui/styles/includes';
+@import '@earn/styles/mixins';
+
+.challengeAction {
+ margin: $base-unit 0;
+ min-width: 0;
+ width: 100%;
+ border-radius: 50px !important;
+ height: 48px;
+ padding: 0 25px !important;
+}
+
+.challenge-ops-container {
+ display: flex;
+ align-items: center;
+ gap: $sp-3;
+ margin-top: 32px;
+ margin-right: 18px;
+ text-transform: uppercase;
+
+ button {
+ text-transform: uppercase;
+ }
+
+ @include xs-to-sm {
+ margin: auto;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ div,
+ a {
+ width: fit-content !important;
+ }
+ }
+}
+
+.challenge-ops-wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ @include xs-to-sm {
+ width: 100%;
+ margin-top: 24px;
+ margin-bottom: 34px;
+ }
+}
+
+@mixin design-accent-bg {
+ .design-accent-background {
+ background-color: $tc-dark-blue;
+ }
+}
+
+@mixin develop-accent-bg {
+ .develop-accent-background {
+ background-color: $tc-green;
+ }
+}
+
+@mixin datasci-accent-bg {
+ .datasci-accent-background {
+ background-color: $tc-orange;
+ }
+}
+
+@mixin design-accent-clr {
+ .design-accent-color {
+ color: $tc-dark-blue;
+ }
+}
+
+@mixin develop-accent-clr {
+ .develop-accent-color {
+ color: $tc-green;
+ }
+}
+
+@mixin datasci-accent-clr {
+ .datasci-accent-color {
+ color: $tc-orange;
+ }
+}
+
+@mixin design-accent-btm-border {
+ .design-accent-bottom-border {
+ border-bottom: 3px solid $tc-dark-blue;
+ }
+}
+
+@mixin develop-accent-btm-border {
+ .develop-accent-bottom-border {
+ border-bottom: 3px solid $tc-green;
+ }
+}
+
+@mixin datasci-accent-btm-border {
+ .datasci-accent-bottom-border {
+ border-bottom: 3px solid $tc-orange;
+ }
+}
+
+.type-tag {
+ display: inline-block;
+
+ button {
+ color: $tc-white;
+
+ &:active,
+ &:focus,
+ &:hover {
+ color: $tc-white;
+ }
+ }
+
+ &.CH {
+ button {
+ background: $track-code-green;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: $track-code-green;
+ }
+ }
+ }
+
+ &.F2F {
+ button {
+ background: $track-code-blue;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: $track-code-blue;
+ }
+ }
+ }
+
+ &.TSK {
+ button {
+ background: $track-code-turquose;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: $track-code-turquose;
+ }
+ }
+ }
+}
+
+.event-tag {
+ display: inline-block;
+
+ &.CH {
+ button {
+ background-color: $track-code-green-light;
+ color: $track-code-green;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: $track-code-green-light;
+ color: $track-code-green;
+ }
+ }
+ }
+
+ &.F2F {
+ button {
+ background-color: $track-code-blue-light;
+ color: $track-code-blue;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: $track-code-blue-light;
+ color: $track-code-blue;
+ }
+ }
+ }
+
+ &.TSK {
+ button {
+ background-color: $track-code-turquose-light;
+ color: $track-code-turquose;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: $track-code-turquose-light;
+ color: $track-code-turquose;
+ }
+ }
+ }
+}
+
+.qa {
+ :global {
+ a {
+ background-color: #0ab88a !important;
+
+ &:hover {
+ background-color: darken(#0ab88a, 10%) !important;
+ }
+ }
+ }
+}
+
+.challenge-outer-container {
+ background: $tc-white;
+ border-radius: (3 * $corner-radius) (3 * $corner-radius) 0 0;
+
+ @include xs-to-md {
+ padding: 4px 4px 0 0;
+ }
+
+ .important-detail {
+ @include xs-to-md {
+ padding: 15px 15px 0;
+ }
+
+ @include md {
+ padding: 20px 20px 0;
+ }
+
+ @include lg-to-xl {
+ padding: 20px 19px 0 27px;
+ }
+
+ .challenge-header {
+ @include barlow-bold;
+
+ font-weight: 600;
+ font-size: 34px;
+ color: $tco-black;
+ line-height: 40px;
+ letter-spacing: -0.78px;
+ margin-bottom: 5px;
+ margin-left: 16px;
+ margin-top: 14px;
+ text-transform: none;
+ @include xs-to-md {
+ font-size: 20px;
+ line-height: 25px;
+ margin-right: 43px;
+ letter-spacing: 0;
+ }
+
+ @include lg-to-xl {
+ margin-right: 60px;
+ }
+
+ @include md {
+ margin-right: -4px;
+ }
+ }
+
+ .tag-container {
+ display: flex;
+ align-items: center;
+ margin-left: 15px;
+ padding-top: 4px;
+
+ @include xs-to-md {
+ width: 100%;
+ flex-wrap: wrap;
+ margin-top: 18px;
+ }
+
+ span a:hover {
+ background-color: #d4d4d4 !important;
+ }
+ }
+
+ .recommend-container {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ margin-bottom: 2px;
+
+ @include xs-to-md {
+ margin-left: -16px;
+ margin-top: 8px;
+ }
+ }
+
+ .recommend-tag {
+ @include roboto-bold;
+
+ margin-left: 17px;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 14px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ text-transform: uppercase;
+
+ &.link {
+ @include roboto-bold;
+
+ cursor: pointer;
+ color: #137d60;
+ text-transform: uppercase;
+ font-weight: 700;
+ }
+
+ &.separator {
+ width: 1px;
+ background: #979797;
+ }
+ }
+
+ @include design-accent-bg;
+ @include develop-accent-bg;
+ @include datasci-accent-bg;
+ @include design-accent-clr;
+ @include develop-accent-clr;
+ @include datasci-accent-clr;
+
+ .miscTag {
+ color: $tc-gray-80;
+ background-color: $tc-gray-neutral-dark;
+ cursor: pointer;
+ }
+
+ .prizes-ops-container {
+ background-color: $tc-white;
+ border: 2px solid $tc-gray-20;
+ border-bottom: none;
+ border-top-right-radius: 6px;
+ border-top-left-radius: 6px;
+ margin-top: 16px;
+ margin-left: 5px;
+ margin-right: 14px;
+ padding-bottom: 48px;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: stretch;
+
+ @include xs-to-sm {
+ flex-direction: row;
+ height: auto;
+ padding-bottom: 0;
+ }
+
+ .prizes-outer-container {
+ flex: 4;
+
+ .prizes-title {
+ @include barlow-bold;
+
+ font-size: 18px;
+ line-height: 22px;
+ color: $tco-black;
+ text-transform: uppercase;
+ margin-left: 22px;
+
+ @include xs-to-md {
+ font-size: 16px;
+ font-weight: 600;
+ margin-left: 10px;
+ text-align: center;
+ }
+
+ margin-top: 14px;
+ }
+
+ .prizes-container {
+ display: flex;
+ align-content: center;
+ flex-wrap: wrap;
+ margin-left: 24px;
+ margin-top: 36px;
+ width: 85%;
+
+ @include xs-to-md {
+ width: 100%;
+ justify-content: center;
+ }
+
+ .prize-fill {
+ margin: 15px 48px 0 0;
+ display: flex;
+ flex: 0 1 calc(15% - 8px);
+
+ @include xs-to-md {
+ min-width: 100px;
+ margin-right: 32px;
+ }
+
+ .prize-card {
+ display: flex;
+ border-bottom: 0;
+ border-radius: 20px;
+ width: 40px;
+ height: 40px;
+ margin-right: 8px;
+ background-color: #e0faf3;
+ justify-content: center;
+ flex-direction: column;
+ text-align: center;
+
+ @include xs-to-md {
+ width: 32px;
+ height: 32px;
+ }
+
+ .prize-rank {
+ @include roboto-regular;
+
+ font-size: 16px;
+ font-weight: 500;
+ color: $tco-black;
+ letter-spacing: 0;
+ line-height: 20px;
+ margin-bottom: 5px;
+
+ .rank-ordinal {
+ color: $tco-black;
+ }
+
+ @include xs-to-md {
+ font-size: 12px;
+ margin-top: 3px;
+ }
+ }
+ }
+
+ .prize-money {
+ @include roboto-medium;
+
+ font-size: 24px;
+ font-weight: 500;
+ color: #2a2a2a;
+ letter-spacing: -0.5px;
+ line-height: 32px;
+ margin-bottom: 5px;
+
+ .prize-currency {
+ color: #2a2a2a;
+ }
+
+ @include xs-to-md {
+ font-size: 14px;
+ line-height: 30px;
+ }
+ }
+
+ .prize-card[id='rank1'] {
+ border-bottom: 0;
+ background-color: #ffd84d;
+ }
+
+ .prize-card[id='rank2'] {
+ border-bottom: 0;
+ background-color: #d1d0cf;
+ }
+
+ .prize-card[id='rank3'] {
+ border-bottom: 0;
+ background-color: #d98f64;
+ }
+ }
+ }
+
+ .bonus-div {
+ @include roboto-regular;
+
+ text-align: left;
+ color: $tc-black;
+ line-height: 25px;
+ margin: 25px 25px 0;
+ padding-bottom: 20px;
+
+ .bonus-text {
+ .bonus-highlight {
+ font-weight: 500;
+ }
+
+ @include design-accent-clr;
+ @include develop-accent-clr;
+ @include datasci-accent-clr;
+ }
+ }
+ }
+ }
+
+ .deadlines-view {
+ border-radius: 0 0 8px 8px;
+ border: 0 hidden $tc-white;
+ overflow: hidden;
+ margin: 0 14px 0 5px;
+
+ .deadlines-overview {
+ background-color: #555;
+ align-items: center;
+ justify-content: space-between;
+ height: 60px;
+ border-bottom-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+ display: flex;
+ padding-right: 16px;
+
+ &.opened {
+ border-radius: 0 !important;
+ }
+
+ @include xs-to-md {
+ padding: 0 16px;
+ }
+
+ .deadlines-overview-text {
+ @include roboto-regular;
+
+ display: flex;
+ justify-content: flex-start;
+ color: $tc-white;
+ line-height: 20px;
+ padding: 24px 23px;
+ font-size: 15px;
+
+ @include xs-to-md {
+ flex-direction: column;
+ padding: 0;
+ }
+
+ .next-deadline {
+ word-wrap: normal;
+ border-right: $tc-gray-50 solid 1px;
+ padding-right: 10px;
+ display: inline;
+
+ @include xs-to-md {
+ border-right: none;
+ }
+ }
+
+ .completed,
+ .draft {
+ border-right: none;
+ }
+
+ .current-phase {
+ overflow-wrap: normal;
+
+ @include xs-to-md {
+ padding-left: 0;
+ margin-top: 4px;
+ }
+ }
+
+ .deadline-highlighted {
+ color: $tc-white;
+ font-weight: 700;
+ }
+ }
+
+ .deadlines-collapser {
+ cursor: pointer;
+ margin-top: 2px;
+
+ .collapse-text {
+ svg {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.title-wrapper {
+ align-items: center;
+ display: flex;
+ left: -25px;
+ position: relative;
+ top: -5px;
+ margin: 0 32px;
+
+ @include xs-to-md {
+ flex-direction: column;
+ align-items: flex-start;
+ margin-left: 15px;
+ }
+}
+
+.matchScoreWrap {
+ width: 100%;
+ margin-right: -2px;
+ padding: 0;
+}
+
+.qaTrackEventTag {
+ color: #0ab88a;
+ background: #c1f5e7;
+
+ &:active,
+ &:focus,
+ &:hover {
+ color: lighten(#0ab88a, 2%);
+ background: darken(#c1f5e7, 5%);
+ }
+
+ &:visited {
+ color: lighten(#0ab88a, 2%);
+ }
+}
diff --git a/src/apps/earn/src/components/challenge-detail/MMDashboard/Graph/index.jsx b/src/apps/earn/src/components/challenge-detail/MMDashboard/Graph/index.jsx
new file mode 100644
index 000000000..8fceba946
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/MMDashboard/Graph/index.jsx
@@ -0,0 +1,199 @@
+/* eslint-disable react/no-this-in-sfc */
+import React, { useState } from 'react';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+import PT from 'prop-types';
+import moment from 'moment';
+import { getHighlightedColor, getRatingColor, getUnSelectedColors } from '@earn/utils/tc';
+import DefaultUserImage from '@earn/assets/images/ico-user-default.png';
+
+import _ from 'lodash';
+import styles from './styles.scss';
+
+export default function Graph({ statisticsData, baseline, awardLine }) {
+ const [point, setPoint] = useState(null);
+
+ const flatData = [];
+ const dates = [];
+ _.each(statisticsData, (entry) => {
+ _.each(entry.submissions, (sub) => {
+ dates.push(sub.created || null);
+ flatData.push({
+ ..._.omit(entry, ['submissions']),
+ submissionCount: _.get(entry, 'submissions.length', 0),
+ ...sub,
+ });
+ });
+ });
+
+ const pointDatas = _.map(flatData, (data) => {
+ let color;
+ let isSelected = false;
+ if (point) {
+ isSelected = point.customData.handle === data.handle;
+ if (isSelected) {
+ color = getHighlightedColor(data.rating || 0);
+ } else {
+ color = getUnSelectedColors(data.rating || 0);
+ }
+ } else {
+ color = data.ratingColor || getRatingColor(data.rating || 0);
+ }
+ return {
+ x: moment(data.created).valueOf(),
+ y: _.max([0, data.score ? (parseFloat(data.score)) : 0]),
+ name: data.handle,
+ color,
+ customData: data,
+ marker: {
+ enabled: true,
+ width: 'circle',
+ radius: isSelected ? 6 : 4,
+ },
+ className: !isSelected && point ? styles.selectedPoint : '',
+ };
+ });
+
+ const options = {
+ plotOptions: {
+ line: {
+ events: {
+ click() {
+ this.group.toFront();
+ },
+ },
+ },
+ },
+ chart: {
+ type: 'scatter',
+ backgroundColor: '#fff',
+ events: {
+ click: () => {
+ setPoint(null);
+ },
+ },
+ },
+ title: {
+ text: '',
+ },
+ series: [
+ {
+ data: pointDatas,
+ pointStart: moment(_.min(dates)).valueOf(),
+ pointInterval: 24 * 3600 * 1000,
+ backgroundColor: 'rgb(51,51,51)',
+ point: {
+ events: {
+ click: (e) => {
+ if (e && e.point) {
+ setPoint(e.point);
+ }
+ },
+ },
+ },
+ },
+ ],
+ legend: {
+ enabled: false,
+ },
+ xAxis: {
+ type: 'datetime',
+ gridLineColor: '#f8f8f8',
+ gridLineWidth: 100,
+ gridZIndex: -100,
+ dateTimeLabelFormats: {
+ millisecond: '%m/%d',
+ second: '%m/%d',
+ minute: '%m/%d',
+ hour: '%m/%d',
+ day: '%m/%d',
+ week: '%m/%d',
+ month: '%m/%d',
+ year: '%m/%d',
+ },
+ },
+ yAxis: {
+ max: 100,
+ min: 0,
+ tickInterval: 20,
+ title: {
+ enabled: false,
+ },
+ backgroundColor: '#fff',
+ plotLines: [
+ ...(awardLine > 0 ? [
+ {
+ label: {
+ text: 'Award',
+ },
+ color: 'rgba(123, 188, 80, 0.5)',
+ value: awardLine,
+ width: 3,
+ },
+ ] : []),
+ ...(baseline > 0 ? [
+ {
+ label: {
+ text: 'Baseline',
+ },
+ color: 'rgba(78, 78, 78, 0.5)',
+ value: baseline,
+ width: 3,
+ },
+ ] : []),
+ {
+ color: '#fff',
+ value: 0,
+ width: 3,
+ },
+ ],
+ zIndex: 100,
+ },
+ tooltip: {
+ formatter() {
+ const currentPointer = this.point || point;
+ if (currentPointer) {
+ const str = `
+
+ 0}
+ numOfSubmissions={numOfSubmissions}
+ numOfCheckpointSubmissions={numOfCheckpointSubmissions}
+ hasRegistered={hasRegistered}
+ checkpointCount={checkpointCount}
+ mySubmissions={mySubmissions}
+ onSort={onSort}
+ viewAsTable={viewAsTable}
+ />
+
+
+
+
+
+ + {name} +
+
+
+
+ {hasRecommendedChallenges && (
+
+ )}
+ {
+ document.getElementById('recommendedActiveChallenges').scrollIntoView();
+ }}
+ >
+ Recommended Challenges
+
+ )}
+
+ {hasRecommendedChallenges && hasThriveArticles && (
+
+ )}
+
+ {hasThriveArticles && (
+ {
+ document.getElementById('recommendedThriveArticles').scrollIntoView();
+ }}
+ >Recommended THRIVE Articles
+
+ )}
+
+
+
+
+ + Key Information +
+
+ {
+ bonusType === 'Bonus'
+ ? (
+
+ ) : null
+ }
+ {
+ drPoints ? (
+ + + BONUS: + {' '} + {numberOfCheckpointsPrizes} + + + CHECKPOINTS AWARDED WORTH + + + $ + {topCheckPointPrize} + + + EACH +
+ ) + : ( ++ + RELIABILITY BONUS: $ + {reliabilityBonus.toFixed()} + +
+ ) + } +
+
+ ) : null
+ }
+ + + POINTS: + {drPoints} + +
+
+
+
+ {hasRegistered ? (
+
+ ) : (
+
+ )}
+
+ Submit
+
+ {
+ track === COMPETITION_TRACKS.DES && hasRegistered && !unregistering
+ && hasSubmissions && (
+
+ View Submissions
+
+ )
+ }
+
+
+
+
+
+ {
+ showDeadlineDetail
+ &&
+ {nextDeadlineMsg}
+ {
+ (status || '').toLowerCase() === 'active'
+ && (
+
+
+ {showDeadlineDetail
+ ? (
+
+
+ {currentPhases && `${currentPhases.name} Ends In: `}
+
+ {timeDiff.text}
+
+
+ )
+ }
+
+ 
+
+
+ `;
+ return str;
+ }
+ return false;
+ },
+ useHTML: true,
+ style: {
+ color: '#fff',
+ },
+ backgroundColor: point ? '#2e2e2e' : 'rgb(51,51,51)',
+ shared: true,
+ },
+ };
+
+ return (
+ ${currentPointer.customData.handle}
++
${currentPointer.customData.submissionCount} submissions
+Score: ${this.y}
+Submitted: ${moment(currentPointer.customData.created).format('MM/DD/YYYY')}
+
+
+ );
+}
+
+Graph.defaultProps = {
+ statisticsData: [],
+ baseline: 0,
+ awardLine: 0,
+};
+
+Graph.propTypes = {
+ statisticsData: PT.arrayOf(PT.shape()),
+ baseline: PT.number,
+ awardLine: PT.number,
+};
diff --git a/src/apps/earn/src/components/challenge-detail/MMDashboard/Graph/styles.scss b/src/apps/earn/src/components/challenge-detail/MMDashboard/Graph/styles.scss
new file mode 100644
index 000000000..6d8e8394f
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/MMDashboard/Graph/styles.scss
@@ -0,0 +1,28 @@
+@import "@earn/styles/mixins";
+
+.graph-container {
+ margin: 20px;
+ padding-right: 10px;
+ padding-bottom: 48px;
+
+ :global {
+ svg {
+ margin-top: 15px;
+ margin-left: 9px;
+
+ @include xs-to-md {
+ margin-left: 0;
+ }
+ }
+ }
+
+ @include xs-to-md {
+ margin: 0 16px;
+ padding-right: 16px;
+ }
+}
+
+.selectedPoint {
+ z-index: 1000 !important;
+ opacity: 0.9;
+}
diff --git a/src/apps/earn/src/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx b/src/apps/earn/src/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx
new file mode 100644
index 000000000..36e4590de
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx
@@ -0,0 +1,406 @@
+/*
+ Component renders my submission detail
+*/
+
+import React from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+
+import sortList from '@earn/utils/challenge-detail/sort';
+import { ReactComponent as ArrowDown } from '@earn/assets/images/arrow-down.svg';
+import { styled as styledCss } from '@earn/utils';
+import { Tooltip } from '~/libs/ui';
+
+import { ReactComponent as IconFail } from '../../icons/failed.svg';
+
+import styles from './styles.scss';
+
+const styled = styledCss(styles);
+
+class SubmissionsDetailView extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ sortedSubmissions: [],
+ };
+ this.sortSubmissions = this.sortSubmissions.bind(this);
+ this.getSubmissionsSortParam = this.getSubmissionsSortParam.bind(this);
+ this.updateSortedSubmissions = this.updateSortedSubmissions.bind(this);
+ this.getReviewName = this.getReviewName.bind(this);
+ }
+
+ componentDidMount() {
+ this.updateSortedSubmissions();
+ }
+
+ componentDidUpdate(prevProps) {
+ const { submission: { review }, submissionsSort } = this.props;
+ if (
+ !_.isEqual(prevProps.submission.review, review)
+ || !_.isEqual(prevProps.submissionsSort, submissionsSort)
+ ) {
+ this.updateSortedSubmissions();
+ }
+ }
+
+ /**
+ * Get submission sort parameter
+ */
+ getSubmissionsSortParam() {
+ const {
+ submissionsSort,
+ } = this.props;
+ let { sort } = submissionsSort;
+ const { field } = submissionsSort;
+ if (!field) {
+ return {
+ field: null,
+ sort: null,
+ };
+ }
+
+ if (!sort) {
+ sort = 'desc'; // default order for submission sorting
+ }
+
+ return {
+ field,
+ sort,
+ };
+ }
+
+ /**
+ * Get review name
+ * @param {Object} review review object
+ */
+ getReviewName(review) {
+ const { reviewTypes } = this.props;
+ const reviewType = _.find(reviewTypes, { id: review.typeId });
+ if (reviewType) {
+ return reviewType.name;
+ }
+ return '';
+ }
+
+ /**
+ * Update sorted submission array
+ */
+ updateSortedSubmissions() {
+ const { submission: { review } } = this.props;
+ const sortedSubmissions = _.cloneDeep(review || []);
+ this.sortSubmissions(sortedSubmissions);
+ this.setState({ sortedSubmissions });
+ }
+
+ /**
+ * Sort array of submission
+ * @param {Array} submissions array of submission
+ */
+ sortSubmissions(submissions) {
+ const { field, sort } = this.getSubmissionsSortParam();
+ if (!field) {
+ return submissions;
+ }
+ return sortList(submissions, field, sort, (a, b) => {
+ let valueA = 0;
+ let valueB = 0;
+ let valueIsString = false;
+ switch (field) {
+ case 'Review Type': {
+ valueA = this.getReviewName(a);
+ valueB = this.getReviewName(b);
+ break;
+ }
+ case 'Reviewer': {
+ valueA = 'TC System';
+ valueB = 'TC System';
+ break;
+ }
+ case 'Score': {
+ valueA = a.score;
+ valueB = b.score;
+ break;
+ }
+ case 'Status': {
+ valueA = a.status;
+ valueB = b.status;
+ valueIsString = true;
+ break;
+ }
+ default:
+ }
+
+ if (valueIsString === false) {
+ if (valueA === '-') valueA = 0;
+ if (valueB === '-') valueB = 0;
+ }
+
+ return {
+ valueA,
+ valueB,
+ valueIsString,
+ };
+ });
+ }
+
+ render() {
+ const { onCancel, submission, onSortChange } = this.props;
+ let { finalScore } = submission;
+ const { sortedSubmissions } = this.state;
+
+ const { field, sort } = this.getSubmissionsSortParam();
+ const revertSort = (sort === 'desc') ? 'asc' : 'desc';
+
+ if (_.isNumber(finalScore)) {
+ if (finalScore > 0) {
+ finalScore = finalScore.toFixed(2);
+ }
+ } else {
+ finalScore = '-';
+ }
+ return (
+
+
+
+ );
+ }
+}
+
+SubmissionsDetailView.defaultProps = {
+ onCancel: () => {},
+ onSortChange: () => {},
+};
+
+SubmissionsDetailView.propTypes = {
+ onCancel: PT.func,
+ submission: PT.shape({
+ id: PT.number,
+ finalScore: PT.any,
+ submissionId: PT.string,
+ provisionalScoringIsCompleted: PT.bool,
+ review: PT.arrayOf(PT.shape()),
+ }).isRequired,
+ reviewTypes: PT.arrayOf(PT.shape()).isRequired,
+ submissionsSort: PT.shape({
+ field: PT.string,
+ sort: PT.string,
+ }).isRequired,
+ onSortChange: PT.func,
+};
+
+export default SubmissionsDetailView;
diff --git a/src/apps/earn/src/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss b/src/apps/earn/src/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss
new file mode 100644
index 000000000..8aa622c14
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss
@@ -0,0 +1,276 @@
+@import "@earn/styles/mixins";
+
+.wrapper {
+ @include roboto-medium;
+
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ font-size: 13px;
+ overflow: hidden;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+
+ button {
+ cursor: pointer;
+ border: none;
+ outline: none;
+ font: inherit;
+ color: inherit;
+ padding: 0;
+ background: transparent;
+ }
+}
+
+.header {
+ display: flex;
+ justify-content: space-between;
+ padding-bottom: 25px;
+
+ .title {
+ @include barlow-medium;
+
+ font-weight: 600;
+ color: #2a2a2a;
+ font-size: 18px;
+ line-height: 22px;
+ text-transform: uppercase;
+ }
+
+ .icon {
+ cursor: pointer;
+ margin-top: 5px;
+ }
+}
+
+.table-header {
+ background: #fafafb;
+ justify-content: center;
+ position: relative;
+}
+
+.table-title {
+ display: flex;
+}
+
+.table-row {
+ display: flex;
+ height: 40px;
+ align-items: center;
+ border-bottom: 1px solid #ededf2;
+
+ @include xs-to-sm {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ height: inherit;
+ padding-top: 18px;
+ padding-bottom: 18px;
+
+ &:first-child {
+ border-top: 1px solid #ededf2;
+ }
+ }
+}
+
+.btn-back {
+ position: absolute;
+ left: 22px;
+
+ * {
+ color: $tc-dark-blue;
+ }
+}
+
+.back-icon {
+ width: 12px;
+ margin-right: 1px;
+ margin-bottom: -1px;
+ -moz-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+
+ :global {
+ g {
+ fill: $tc-dark-blue;
+ }
+ }
+}
+
+.title-detail {
+ margin-left: 2px;
+}
+
+.table-tabs {
+ background: rgba(26, 133, 255, 0.05);
+}
+
+.tab-item {
+ width: 141px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ border-right: 1px solid #ededf2;
+
+ &.tab-item-selected {
+ background: $tc-white;
+ }
+
+ &:last-child {
+ border-right: none;
+ }
+}
+
+.column-1 {
+ color: black;
+ padding-left: 22px;
+ font-size: 14px;
+
+ @include xs-to-sm {
+ padding-left: 0;
+ }
+}
+
+.table-content-header {
+ color: $tc-black;
+
+ @include xs-to-sm {
+ display: none;
+ }
+
+ .column-1 {
+ color: $tc-black;
+ }
+}
+
+.table-column {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ height: 100%;
+ align-items: center;
+
+ &.column-1 {
+ justify-content: flex-start;
+ }
+
+ @include xs-to-sm {
+ flex-direction: column;
+ align-items: flex-start;
+ font-size: 14px;
+ }
+}
+
+.table-content-footer {
+ .column-1 {
+ color: $tc-black;
+ }
+}
+
+.col-arrow {
+ display: none;
+ padding-left: 5px;
+ margin-right: -19px;
+
+ :global {
+ svg {
+ margin-bottom: 1px;
+ height: 8px;
+ }
+ }
+}
+
+.hr {
+ width: 100%;
+ margin: 0;
+}
+
+.sub-header {
+ font-size: 16px;
+ margin-top: 24px;
+ margin-bottom: 24px;
+
+ .title-detail {
+ font-weight: bold;
+ }
+}
+
+.col-arrow-is-sorting {
+ display: block;
+
+ :global {
+ g {
+ fill: $tc-dark-blue;
+ }
+ }
+}
+
+.col-arrow-sort-asc {
+ :global {
+ svg {
+ -moz-transform: scale(1, -1);
+ -o-transform: scale(1, -1);
+ -webkit-transform: scale(1, -1);
+ transform: scale(1, -1);
+ }
+ }
+}
+
+button.header-sort {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 11px;
+ color: #767676;
+ text-transform: uppercase;
+ font-weight: 600;
+ font-family: "Barlow", Helvetica, Arial, sans-serif;
+
+ &:hover {
+ color: $tc-dark-blue;
+
+ :global {
+ g {
+ fill: $tc-dark-blue;
+ }
+ }
+ }
+}
+
+.status-complete {
+ font-size: 14px;
+ color: #0ab88a;
+ font-weight: 500;
+}
+
+.status-failed {
+ font-size: 14px;
+ color: #ef476f;
+ font-weight: 500;
+}
+
+.status-in-queue {
+ font-size: 14px;
+ color: #f46500;
+ font-weight: 500;
+}
+
+.mobile-header {
+ display: none;
+ font-weight: 600;
+ color: #767676;
+ padding-bottom: 3px;
+
+ @include xs-to-sm {
+ display: block;
+ }
+}
+
+.inner-content {
+ @include xs-to-sm {
+ max-height: calc(100vh - 150px);
+ overflow: auto;
+ }
+}
diff --git a/src/apps/earn/src/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx b/src/apps/earn/src/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx
new file mode 100644
index 000000000..a44304b3f
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx
@@ -0,0 +1,546 @@
+/*
+ Component renders my submissions list
+*/
+
+import React from 'react';
+import _ from 'lodash';
+import moment from 'moment';
+import PT from 'prop-types';
+
+import { BaseModal, LinkButton, Tooltip } from '~/libs/ui';
+import { getService } from '@earn/services/submissions';
+import sortList from '@earn/utils/challenge-detail/sort';
+import { ReactComponent as IconClose } from '@earn/assets/images/icon-close-green.svg';
+import { ReactComponent as DateSortIcon } from '@earn/assets/images/icon-date-sort.svg';
+import { ReactComponent as SortIcon } from '@earn/assets/images/icon-sort.svg';
+
+import { ReactComponent as IconFail } from '../../icons/failed.svg';
+import { ReactComponent as DownloadIcon } from '../../../SubmissionManagement/Icons/IconSquareDownload.svg';
+import { ReactComponent as ZoomIcon } from '../../../SubmissionManagement/Icons/IconZoom.svg';
+import { styled as styledCss } from "../../../../utils";
+
+// import SearchIcon from '../../../SubmissionManagement/Icons/IconSearch.svg';
+import styles from './styles.scss';
+
+const styled = styledCss(styles)
+
+class SubmissionsListView extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ sortedSubmissions: [],
+ submissionIdClicked: false,
+ statusClicked: false,
+ finalClicked: false,
+ provisionClicked: false,
+ timeClicked: false,
+ openModal: false,
+ selectedSubmission: {},
+ };
+ this.sortSubmissions = this.sortSubmissions.bind(this);
+ this.getSubmissionsSortParam = this.getSubmissionsSortParam.bind(this);
+ this.updateSortedSubmissions = this.updateSortedSubmissions.bind(this);
+ this.toggleModal = this.toggleModal.bind(this);
+ }
+
+ componentDidMount() {
+ this.updateSortedSubmissions();
+ }
+
+ componentDidUpdate(prevProps) {
+ const { mySubmissions, submissionsSort } = this.props;
+ if (
+ !_.isEqual(prevProps.mySubmissions, mySubmissions)
+ || !_.isEqual(prevProps.submissionsSort, submissionsSort)
+ ) {
+ this.updateSortedSubmissions();
+ }
+ }
+
+ /**
+ * Get submission sort parameter
+ */
+ getSubmissionsSortParam() {
+ const {
+ submissionsSort,
+ } = this.props;
+ let { field, sort } = submissionsSort;
+ if (!field) {
+ field = 'Submission ID';
+ }
+
+ if (!sort) {
+ sort = 'desc'; // default order for submission sorting
+ }
+
+ return {
+ field,
+ sort,
+ };
+ }
+
+ /**
+ * Update sorted submission array
+ */
+ updateSortedSubmissions() {
+ const { mySubmissions } = this.props;
+ const sortedSubmissions = _.cloneDeep(mySubmissions);
+ this.sortSubmissions(sortedSubmissions);
+ this.setState({ sortedSubmissions });
+ }
+
+ /**
+ * Sort array of submission
+ * @param {Array} submissions array of submission
+ */
+ sortSubmissions(submissions) {
+ const { field, sort } = this.getSubmissionsSortParam();
+ return sortList(submissions, field, sort, (a, b) => {
+ let valueA = 0;
+ let valueB = 0;
+ const valueIsString = false;
+ switch (field) {
+ case 'Submission ID': {
+ valueA = a.id;
+ valueB = b.id;
+ break;
+ }
+ case 'Status': {
+ valueA = a.provisionalScoringIsCompleted;
+ valueB = b.provisionalScoringIsCompleted;
+ break;
+ }
+ case 'Final': {
+ valueA = a.finalScore;
+ valueB = b.finalScore;
+ break;
+ }
+ case 'Provision': {
+ valueA = a.provisionalScore;
+ valueB = b.provisionalScore;
+ break;
+ }
+ case 'Time': {
+ valueA = new Date(a.submissionTime);
+ valueB = new Date(b.submissionTime);
+ break;
+ }
+ default:
+ }
+
+ if (valueIsString === false) {
+ if (valueA === '-') valueA = 0;
+ if (valueB === '-') valueB = 0;
+ }
+
+ return {
+ valueA,
+ valueB,
+ valueIsString,
+ };
+ });
+ }
+
+ toggleModal(selectedSubmission) {
+ const { openModal } = this.state;
+ this.setState({ openModal: !openModal, selectedSubmission });
+ }
+
+ render() {
+ const {
+ selectSubmission,
+ challengesUrl,
+ challenge,
+ hasRegistered,
+ unregistering,
+ submissionEnded,
+ isLegacyMM,
+ auth,
+ onSortChange,
+ } = this.props;
+
+ const isButtonDisabled = !hasRegistered || unregistering || submissionEnded || isLegacyMM;
+
+ const { field, sort } = this.getSubmissionsSortParam();
+ const revertSort = (sort === 'desc') ? 'asc' : 'desc';
+
+ const {
+ id: challengeId,
+ } = challenge;
+ const {
+ sortedSubmissions,
+ submissionIdClicked,
+ statusClicked,
+ finalClicked,
+ provisionClicked,
+ timeClicked,
+ selectedSubmission,
+ openModal,
+ } = this.state;
+
+ const sortOptionClicked = {
+ submissionIdClicked: false,
+ statusClicked: false,
+ finalClicked: false,
+ provisionClicked: false,
+ timeClicked: false,
+ };
+
+ return (
+
+
+ Submission Details
++
+
+
+ Submission:
+ {submission.id} ({submission.submissionId})
+
+
+
+ {
+ sortedSubmissions.map((review) => {
+ let { score } = review;
+ if (_.isNumber(score)) {
+ if (score > 0) {
+ score = score.toFixed(2);
+ }
+ } else {
+ score = '-';
+ }
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ })
+ }
+
+
+ Review Type
+ {this.getReviewName(review)}
+
+
+ Reviewer
+ TC System
+
+
+
+ ) : ({score})}
+
+ Score
+
+ {(score < 0) ? (
+
+
+ Status
+
+ {(review.status === 'completed') ? (
+ Complete
+ ) : (
+ Failed
+ )}
+
+
+
+
+ Review Type
+ Final Score
+
+
+ Reviewer
+ N/A
+
+
+ Score
+ {finalScore || 'N/A'}
+
+
+ Status
+ {submission.provisionalScoringIsCompleted ? (
+ Complete
+ ) : (In Queue)}
+
+
+
+
+ );
+ }
+}
+
+SubmissionsListView.defaultProps = {
+ selectSubmission: () => {},
+ onSortChange: () => {},
+};
+
+SubmissionsListView.propTypes = {
+ selectSubmission: PT.func,
+ challengesUrl: PT.string.isRequired,
+ challenge: PT.shape({
+ id: PT.any,
+ checkpoints: PT.arrayOf(PT.object),
+ submissions: PT.arrayOf(PT.object),
+ submissionViewable: PT.string,
+ registrants: PT.any,
+ }).isRequired,
+ hasRegistered: PT.bool.isRequired,
+ unregistering: PT.bool.isRequired,
+ submissionEnded: PT.bool.isRequired,
+ isLegacyMM: PT.bool.isRequired,
+ mySubmissions: PT.arrayOf(PT.shape()).isRequired,
+ auth: PT.shape().isRequired,
+ submissionsSort: PT.shape({
+ field: PT.string,
+ sort: PT.string,
+ }).isRequired,
+ onSortChange: PT.func,
+};
+
+export default SubmissionsListView;
diff --git a/src/apps/earn/src/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss b/src/apps/earn/src/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss
new file mode 100644
index 000000000..e216b54d8
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss
@@ -0,0 +1,446 @@
+@import '@earn/styles/mixins';
+
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+
+ article {
+ display: flex;
+ flex-direction: column;
+ }
+}
+
+.actions-col {
+ @include barlow-bold;
+
+ font-size: 11px;
+ line-height: 14px;
+ font-weight: 600;
+ color: #767676;
+}
+
+.accepted {
+ color: #0ab88a;
+
+ @include roboto-medium;
+
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 22px;
+}
+
+.queue {
+ color: #f46500;
+
+ @include roboto-medium;
+
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 22px;
+}
+
+.btn-add-submission {
+ text-align: center;
+}
+
+.h2 {
+ @include roboto-bold;
+
+ color: #47474f;
+ line-height: 30px;
+ font-size: 20px;
+}
+
+.description {
+ font-size: 15px;
+ line-height: 25px;
+ margin-top: 5px;
+}
+
+.submission-table {
+ @include roboto-medium;
+
+ display: flex;
+ flex-direction: column;
+ font-size: 13px;
+ line-height: 20px;
+ padding-top: 10px;
+ margin: 0 41px;
+
+ @include xs-to-sm {
+ padding: 0;
+ margin: 0 16px;
+ }
+}
+
+button.column-1-1,
+.column-1-1 {
+ width: 35%;
+
+ @include xs-to-sm {
+ width: 100%;
+ align-items: flex-start;
+ }
+}
+
+.submission-table-header {
+ height: 40px !important;
+
+ span {
+ @include barlow-bold;
+
+ font-size: 11px;
+ line-height: 14px;
+ font-weight: 600;
+ color: #767676;
+ }
+
+ .column-1-1 {
+ color: #888894;
+ }
+
+ @include xs-to-sm {
+ display: none !important;
+ }
+}
+
+.submission-table-column {
+ @include roboto-medium;
+
+ font-weight: 500;
+ font-size: 14px;
+ color: #2a2a2a;
+ line-height: 22px;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ height: 56px;
+
+ @include xs-to-sm {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ height: auto;
+ }
+}
+
+.submission-table-row {
+ display: flex;
+ border-bottom: none;
+ height: 54px;
+ margin-top: 5px;
+ border-top: 1px solid #ededf2;
+ position: relative;
+
+ &:first-child {
+ border-top: 0;
+ }
+
+ &:last-child {
+ border-bottom: 1px solid #ededf2;
+ }
+
+ @include xs-to-md {
+ display: flex;
+ flex-direction: column;
+ border-top: 1px solid #ededf2;
+ margin: 0 32px 0 16px;
+ height: auto;
+ }
+
+ @include xs-to-sm {
+ margin-top: 24px;
+ }
+}
+
+.column-1 {
+ width: 22%;
+ display: flex;
+ justify-content: space-between;
+
+ @include xs-to-sm {
+ width: 100%;
+ align-items: flex-start;
+ }
+}
+
+.column-2 {
+ width: 78%;
+ display: flex;
+ justify-content: space-between;
+
+ @include xs-to-sm {
+ width: 100%;
+ align-items: flex-start;
+ }
+}
+
+.score-title {
+ justify-content: unset;
+
+ span {
+ margin-left: 28%;
+ align-items: flex-start;
+ }
+}
+
+.column-1-2 {
+ &.status-row {
+ margin-right: -16px;
+ }
+
+ @include xs-to-sm {
+ width: 100%;
+ align-items: flex-start;
+ }
+}
+
+.column-2-1 {
+ width: 28%;
+ justify-content: flex-end;
+ padding-right: 20px;
+
+ &.final-score-row {
+ margin-left: -40px;
+
+ @include xs-to-sm {
+ margin-left: 0;
+ }
+ }
+
+ @include xs-to-sm {
+ width: 100%;
+ align-items: flex-start;
+ margin-left: 0;
+ }
+}
+
+.column-2-2 {
+ width: 18%;
+ justify-content: flex-end;
+ padding-right: 20px;
+
+ &.provisional-score-row {
+ margin-left: -23px;
+
+ @include xs-to-sm {
+ margin-left: 0;
+ }
+ }
+
+ @include xs-to-sm {
+ width: 100%;
+ align-items: flex-start;
+ }
+}
+
+.column-2-3 {
+ width: 18%;
+ justify-content: flex-start;
+ padding-left: 40px;
+
+ &.time-row {
+ width: 19%;
+ margin-left: 65px;
+
+ @include xs-to-sm {
+ margin-left: 0;
+ margin-bottom: 16px;
+ }
+ }
+
+ @include xs-to-sm {
+ width: 100%;
+ align-items: flex-start;
+ padding-left: 0;
+ }
+}
+
+.column-2-4 {
+ width: 8%;
+
+ @include xs-to-sm {
+ width: auto;
+ align-items: flex-start;
+ margin-top: 16px;
+ position: absolute;
+ flex-direction: row;
+ right: 0;
+ top: 0;
+ }
+}
+
+.icon-search {
+ margin-left: 17px;
+}
+
+.icon-zoom {
+ margin-left: 17px;
+}
+
+.col-arrow {
+ display: flex;
+ padding-left: 5px;
+ margin-right: -19px;
+}
+
+.col-arrow-is-sorting {
+ :global {
+ g {
+ fill: $tc-dark-blue;
+ }
+ }
+}
+
+.header-sort {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &:hover {
+ color: $tc-dark-blue;
+
+ :global {
+ g {
+ fill: $tc-dark-blue;
+ }
+ }
+ }
+}
+
+.mobile-header {
+ display: none;
+
+ @include xs-to-sm {
+ display: block;
+ margin-top: 16px;
+ font-size: 11px;
+ line-height: 14px;
+
+ @include barlow-bold;
+
+ font-weight: 600;
+ color: #767676;
+ text-align: left;
+ }
+}
+
+.col-arrow-sort-asc {
+ -moz-transform: scale(1, -1);
+ -o-transform: scale(1, -1);
+ -webkit-transform: scale(1, -1);
+ transform: scale(1, -1);
+}
+
+.mySubModal {
+ padding-bottom: 10px;
+ border-radius: 8px;
+ margin: 25px 32px 32px;
+}
+
+.header {
+ display: flex;
+ justify-content: space-between;
+
+ .title {
+ @include barlow-medium;
+
+ font-weight: 600;
+ color: #2a2a2a;
+ font-size: 18px;
+ line-height: 22px;
+ text-transform: uppercase;
+ }
+
+ .icon {
+ cursor: pointer;
+ margin-top: 5px;
+ }
+}
+
+.submission-text {
+ @include roboto-regular;
+
+ font-size: 16px;
+ color: #2a2a2a;
+ line-height: 24px;
+ margin-top: 24px;
+
+ span {
+ font-weight: 700;
+ }
+}
+
+.detail-row {
+ display: flex;
+ margin-top: 24px;
+
+ .col {
+ @include barlow-medium;
+
+ font-weight: 600;
+ font-size: 11px;
+ line-height: 14px;
+ color: #767676;
+ }
+
+ .col-1 {
+ flex: 40;
+ }
+
+ .col-2 {
+ flex: 40;
+ }
+
+ .col-3 {
+ flex: 40;
+ }
+
+ .col-4 {
+ flex: 40;
+ }
+}
+
+hr {
+ opacity: 0.5;
+}
+
+.close-btn {
+ cursor: pointer;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 24px;
+ margin-bottom: 32px;
+ background-color: #137d60;
+ padding: 8px 24px;
+ border-radius: 24px;
+ float: right;
+
+ span {
+ @include roboto-bold;
+
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 24px;
+ color: #fff;
+ }
+
+ @include xs-to-sm {
+ border-top: 1px solid #e9e9e9;
+ position: sticky;
+ margin-bottom: 16px;
+ }
+}
+
+.is-highlight,
+button.is-highlight {
+ display: inherit;
+
+ .header-sort {
+ span {
+ color: black;
+ }
+ }
+}
diff --git a/src/apps/earn/src/components/challenge-detail/MySubmissions/index.jsx b/src/apps/earn/src/components/challenge-detail/MySubmissions/index.jsx
new file mode 100644
index 000000000..248f4b064
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/MySubmissions/index.jsx
@@ -0,0 +1,147 @@
+/*
+ Component renders my submissions
+*/
+
+import React from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+
+import { goToLogin } from '@earn/utils/tc';
+import { isTokenExpired } from "@earn/utils/token";
+import { BaseModal, Button, LoadingCircles } from '~/libs/ui';
+
+import SubmissionsList from './SubmissionsList';
+import SubmissionsDetail from './SubmissionsDetail';
+import styles from './styles.scss';
+
+class MySubmissionsView extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ selectedSubmission: null,
+ submissionsSortDetail: {
+ field: '',
+ sort: '',
+ },
+ };
+ }
+
+ componentDidMount() {
+ const {
+ challenge,
+ isMM,
+ loadMMSubmissions,
+ auth,
+ } = this.props;
+
+ // Check auth token, go to login page if invalid
+ if (isMM && (_.isEmpty(auth) || _.isEmpty(auth.tokenV3) || isTokenExpired(auth.tokenV3))) {
+ goToLogin('community-app-main');
+ return;
+ }
+
+ if (isMM) {
+ loadMMSubmissions(challenge.id, auth.tokenV3);
+ }
+ }
+
+ render() {
+ const {
+ challengesUrl,
+ challenge,
+ isMM,
+ hasRegistered,
+ unregistering,
+ submissionEnded,
+ isLegacyMM,
+ loadingMMSubmissionsForChallengeId,
+ mySubmissions,
+ auth,
+ reviewTypes,
+ submissionsSort,
+ onSortChange,
+ } = this.props;
+ const { selectedSubmission, submissionsSortDetail } = this.state;
+
+ if (!_.isEmpty(loadingMMSubmissionsForChallengeId)) {
+ return
+
+
+
+ {
+ sortedSubmissions.map((mySubmission) => {
+ let { finalScore, provisionalScore } = mySubmission;
+ if (_.isNumber(finalScore)) {
+ if (finalScore > 0) {
+ finalScore = finalScore.toFixed(2);
+ }
+ } else {
+ finalScore = 'N/A';
+ }
+ if (_.isNumber(provisionalScore)) {
+ if (provisionalScore > 0) {
+ provisionalScore = provisionalScore.toFixed(2);
+ }
+ } else {
+ provisionalScore = 'N/A';
+ }
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ACTIONS
+
+
+
+ );
+ })
+ }
+
+
+
+
+ Submission Id
+ {mySubmission.id}
+
+
+ Status
+ {mySubmission.provisionalScoringIsCompleted ? (
+ Accepted
+ ) : In Queue}
+
+
+
+
+ Final Score
+ {(finalScore < 0) ? (
+
+
+ ) : ({provisionalScore})}
+
+ Provisional Score
+ {(provisionalScore < 0) ? (
+
+
+ Time
+ {moment(mySubmission.submissionTime).format('MMM DD, YYYY HH:mm:ss')}
+
+
+
+
+
+ {/* */}
+
+
+
+ Add Submission
+
+
+
+
+
+
+
+ Submission Details
+ this.toggleHistory({})}>
+
+ +
+ Submission: {selectedSubmission.submissionId}
+
+
+
+
+ Review Type
+
+
+ Reviewer
+
+
+ Score
+
+
+ Status
+
+ this.toggleHistory({})} role="presentation">
+ CLOSE
+
+
+
+ );
+ }
+}
+
+MySubmissionsView.defaultProps = {
+ onSortChange: () => {},
+};
+
+MySubmissionsView.propTypes = {
+ challengesUrl: PT.string.isRequired,
+ challenge: PT.shape({
+ id: PT.any,
+ checkpoints: PT.arrayOf(PT.object),
+ submissions: PT.arrayOf(PT.object),
+ submissionViewable: PT.string,
+ registrants: PT.any,
+ }).isRequired,
+ hasRegistered: PT.bool.isRequired,
+ unregistering: PT.bool.isRequired,
+ submissionEnded: PT.bool.isRequired,
+ isMM: PT.bool.isRequired,
+ isLegacyMM: PT.bool.isRequired,
+ loadingMMSubmissionsForChallengeId: PT.string.isRequired,
+ auth: PT.shape().isRequired,
+ loadMMSubmissions: PT.func.isRequired,
+ mySubmissions: PT.arrayOf(PT.shape()).isRequired,
+ reviewTypes: PT.arrayOf(PT.shape()).isRequired,
+ submissionsSort: PT.shape({
+ field: PT.string,
+ sort: PT.string,
+ }).isRequired,
+ onSortChange: PT.func,
+};
+
+export default MySubmissionsView;
diff --git a/src/apps/earn/src/components/challenge-detail/MySubmissions/styles.scss b/src/apps/earn/src/components/challenge-detail/MySubmissions/styles.scss
new file mode 100644
index 000000000..0ecdc8920
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/MySubmissions/styles.scss
@@ -0,0 +1,78 @@
+@import "@earn/styles/mixins";
+
+.wrapper {
+ @include roboto-regular;
+
+ display: flex;
+ justify-content: center;
+ color: #888894;
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+}
+
+.loading {
+ margin-top: 30px;
+}
+
+.close-btn {
+ cursor: pointer;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 24px;
+ margin-bottom: 32px;
+ background-color: #137d60;
+ padding: 8px 24px;
+ border-radius: 24px;
+ float: right;
+
+ span {
+ @include roboto-bold;
+
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 24px;
+ color: #fff;
+ }
+
+ @include xs-to-sm {
+ border-top: 1px solid #e9e9e9;
+ position: sticky;
+ margin-bottom: 16px;
+ }
+}
+
+.buttons {
+ margin-top: 24px;
+ float: right;
+
+ @include xs-to-sm {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ padding: 24px 16px;
+ background-color: white;
+ }
+}
+
+.container {
+ padding: 25px;
+ width: 750px;
+ border-radius: 8px;
+
+ @include xs-to-sm {
+ width: 100%;
+ margin: 0;
+ max-width: 100vw;
+ height: 100%;
+ max-height: 100vh;
+ padding: 24px 16px;
+ z-index: 999999;
+ }
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Registrants/index.jsx b/src/apps/earn/src/components/challenge-detail/Registrants/index.jsx
new file mode 100644
index 000000000..b9754df52
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Registrants/index.jsx
@@ -0,0 +1,539 @@
+/* eslint jsx-a11y/no-static-element-interactions:0 */
+/**
+ * Registrants tab component.
+ */
+
+import React from 'react';
+import PT from 'prop-types';
+import moment from 'moment';
+import _ from 'lodash';
+import cn from 'classnames';
+import { getRatingLevel } from '@earn/utils/tc';
+
+import sortList from '@earn/utils/challenge-detail/sort';
+import { ReactComponent as DateSortIcon } from '@earn/assets/images/icon-date-sort.svg';
+import { ReactComponent as SortIcon } from '@earn/assets/images/icon-sort.svg';
+import { ReactComponent as CheckMark } from '../icons/check-mark.svg';
+import { styled as styledCss } from "../../../utils";
+
+import styles from './style.scss';
+
+const styled = styledCss(styles)
+
+function formatDate(date) {
+ if (!date) return '-';
+ return moment(date).local().format('MMM DD, YYYY HH:mm');
+}
+
+function getDate(arr, handle) {
+ const results = arr.filter(a => _.toString(a.createdBy || a.memberHandle) === _.toString(handle))
+ .sort((a, b) => new Date(b.submissionTime || b.submissionDate).getTime()
+ - new Date(a.submissionTime || a.submissionDate).getTime());
+ return results[0] ? (results[0].submissionTime || results[0].submissionDate) : '';
+}
+
+function passedCheckpoint(checkpoints, handle, results) {
+ const mine = checkpoints.filter(c => _.toString(c.createdBy) === _.toString(handle));
+ return _.some(mine, m => _.find(results, r => r.submissionId === m.submissionId));
+}
+
+function getPlace(results, handle, places) {
+ const found = _.find(results, w => _.toString(w.memberHandle) === _.toString(handle)
+ && w.placement <= places && w.submissionStatus !== 'Failed Review');
+
+ if (found) {
+ return found.placement;
+ }
+ return -1;
+}
+
+export default class Registrants extends React.Component {
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ sortedRegistrants: [],
+ ratingClicked: false,
+ usernameClicked: false,
+ registrationDateClicked: false,
+ round1SubmissionClicked: false,
+ submissionDateClicked: false,
+ };
+
+ this.getCheckPoint = this.getCheckPoint.bind(this);
+ this.getCheckPointDate = this.getCheckPointDate.bind(this);
+ this.getFlagFirstTry = this.getFlagFirstTry.bind(this);
+ this.sortRegistrants = this.sortRegistrants.bind(this);
+ this.getRegistrantsSortParam = this.getRegistrantsSortParam.bind(this);
+ this.updateSortedRegistrants = this.updateSortedRegistrants.bind(this);
+ }
+
+ componentDidMount() {
+ this.updateSortedRegistrants();
+ }
+
+ componentDidUpdate(prevProps) {
+ const { registrants, registrantsSort } = this.props;
+ if (
+ !_.isEqual(prevProps.registrants, registrants)
+ || !_.isEqual(prevProps.registrantsSort, registrantsSort)
+ ) {
+ this.updateSortedRegistrants();
+ }
+ }
+
+ /**
+ * Get checkpoint date of registrant
+ */
+ getCheckPointDate() {
+ const {
+ challenge,
+ } = this.props;
+ const checkpointPhase = (challenge.phases || []).find(x => x.name === 'Checkpoint Submission');
+ return moment(checkpointPhase
+ ? checkpointPhase.actualEndDate || checkpointPhase.scheduledEndDate : 0);
+ }
+
+ /**
+ * Get checkpoint of registrant
+ * @param {Object} registrant registrant info
+ */
+ getCheckPoint(registrant) {
+ const {
+ challenge,
+ } = this.props;
+ const checkpoints = challenge.checkpoints || [];
+ const checkpointDate = this.getCheckPointDate();
+
+ const twoRounds = challenge.round1Introduction
+ && challenge.round2Introduction;
+
+ let checkpoint;
+ if (twoRounds) {
+ checkpoint = getDate(checkpoints, registrant.memberHandle);
+ if (!checkpoint
+ && moment(registrant.submissionDate).isBefore(checkpointDate)) {
+ checkpoint = registrant.submissionDate;
+ }
+ }
+
+ return checkpoint;
+ }
+
+ /**
+ * Get final of registrant
+ * @param {Object} registrant get checkpoint of registrant
+ */
+ getFinal(registrant) {
+ let final;
+ if (moment(registrant.submissionDate).isAfter(this.getCheckPointDate())) {
+ final = registrant.submissionDate;
+ }
+ return final;
+ }
+
+ /**
+ * Check if it have flag for first try
+ * @param {Object} registrant registrant info
+ */
+ getFlagFirstTry(registrant) {
+ const { notFoundCountryFlagUrl } = this.props;
+ if (!registrant.countryInfo || notFoundCountryFlagUrl[registrant.countryInfo.countryCode]) {
+ return null;
+ }
+
+ return registrant.countryInfo.countryFlag;
+ }
+
+ /**
+ * Get registrans sort parameter
+ */
+ getRegistrantsSortParam() {
+ const {
+ registrantsSort,
+ } = this.props;
+ let { field, sort } = registrantsSort;
+ if (!field) {
+ field = 'Registration Date'; // default field for registrans sorting
+ }
+ if (!sort) {
+ sort = 'asc'; // default order for registrans sorting
+ }
+
+ return {
+ field,
+ sort,
+ };
+ }
+
+ /**
+ * Update sorted registrant array
+ */
+ updateSortedRegistrants() {
+ const { registrants } = this.props;
+ const sortedRegistrants = _.cloneDeep(registrants);
+ this.sortRegistrants(sortedRegistrants);
+ this.setState({ sortedRegistrants });
+ }
+
+ /**
+ * Sort array of registrant
+ * @param {Array} registrants array of registrant
+ */
+ sortRegistrants(registrants) {
+ const { field, sort } = this.getRegistrantsSortParam();
+ return sortList(registrants, field, sort, (a, b) => {
+ let valueA = 0;
+ let valueB = 0;
+ let valueIsString = false;
+ switch (field) {
+ case 'Country': {
+ valueA = a.countryCode;
+ valueB = b.countryCode;
+ valueIsString = true;
+ break;
+ }
+ case 'Rating': {
+ valueA = a.rating;
+ valueB = b.rating;
+ break;
+ }
+ case 'Username': {
+ valueA = `${a.memberHandle}`.toLowerCase();
+ valueB = `${b.memberHandle}`.toLowerCase();
+ valueIsString = true;
+ break;
+ }
+ case 'Registration Date': {
+ valueA = new Date(a.created);
+ valueB = new Date(b.created);
+ break;
+ }
+ case 'Round 1 Submitted Date': {
+ const checkpointA = this.getCheckPoint(a);
+ const checkpointB = this.getCheckPoint(b);
+ if (checkpointA) {
+ valueA = new Date(checkpointA);
+ }
+ if (checkpointB) {
+ valueB = new Date(checkpointB);
+ }
+ break;
+ }
+ case 'Submitted Date': {
+ const checkpointA = this.getFinal(a);
+ const checkpointB = this.getFinal(b);
+ if (checkpointA) {
+ valueA = new Date(checkpointA);
+ }
+ if (checkpointB) {
+ valueB = new Date(checkpointB);
+ }
+ break;
+ }
+ default:
+ }
+
+ return {
+ valueA,
+ valueB,
+ valueIsString,
+ };
+ });
+ }
+
+ render() {
+ const {
+ challenge,
+ checkpointResults,
+ results,
+ onSortChange,
+ } = this.props;
+ const {
+ prizeSets,
+ track,
+ } = challenge;
+
+ const {
+ sortedRegistrants,
+ ratingClicked,
+ usernameClicked,
+ registrationDateClicked,
+ submissionDateClicked,
+ round1SubmissionClicked,
+ } = this.state;
+
+ const sortOptionClicked = {
+ ratingClicked: false,
+ usernameClicked: false,
+ registrationDateClicked: false,
+ submissionDateClicked: false,
+ round1SubmissionClicked: false,
+ };
+
+ const { field, sort } = this.getRegistrantsSortParam();
+ const revertSort = (sort === 'desc') ? 'asc' : 'desc';
+ const isDesign = track.toLowerCase() === 'design';
+
+ const placementPrizes = _.find(prizeSets, { type: 'placement' }) || {};
+ const { prizes = [] } = placementPrizes;
+
+ const checkpoints = challenge.checkpoints || [];
+
+ const twoRounds = challenge.round1Introduction
+ && challenge.round2Introduction;
+ const places = prizes.length;
+ return (
+
+ this.setState({ selectedSubmission: null })}
+ theme={styles}
+ open={selectedSubmission}
+ size="lg"
+ >
+ this.setState({ selectedSubmission: null })}
+ submission={selectedSubmission}
+ reviewTypes={reviewTypes}
+ submissionsSort={submissionsSortDetail}
+ onSortChange={sort => this.setState({ submissionsSortDetail: sort })}
+ />
+
+
+ this.setState({ selectedSubmission: submission })}
+ challengesUrl={challengesUrl}
+ challenge={challenge}
+ hasRegistered={hasRegistered}
+ unregistering={unregistering}
+ submissionEnded={submissionEnded}
+ isMM={isMM}
+ isLegacyMM={isLegacyMM}
+ mySubmissions={mySubmissions}
+ auth={auth}
+ submissionsSort={submissionsSort}
+ onSortChange={onSortChange}
+ />
+
+
+
+
+
+
+ );
+ }
+}
+
+Registrants.defaultProps = {
+ results: [],
+ checkpointResults: {},
+ registrantsSort: {},
+ onSortChange: () => {},
+ registrants: [],
+};
+
+Registrants.propTypes = {
+ challenge: PT.shape({
+ phases: PT.arrayOf(PT.shape({
+ actualEndDate: PT.string,
+ name: PT.string.isRequired,
+ scheduledEndDate: PT.string,
+ })).isRequired,
+ checkpoints: PT.arrayOf(PT.shape()),
+ subTrack: PT.any,
+ prizeSets: PT.arrayOf(PT.shape()).isRequired,
+ registrants: PT.arrayOf(PT.shape()).isRequired,
+ round1Introduction: PT.string,
+ round2Introduction: PT.string,
+ type: PT.string,
+ track: PT.string,
+ }).isRequired,
+ results: PT.arrayOf(PT.shape()),
+ checkpointResults: PT.shape(),
+ registrants: PT.arrayOf(PT.shape()),
+ registrantsSort: PT.shape({
+ field: PT.string,
+ sort: PT.string,
+ }),
+ onSortChange: PT.func,
+ notFoundCountryFlagUrl: PT.objectOf(PT.bool).isRequired,
+};
diff --git a/src/apps/earn/src/components/challenge-detail/Registrants/style.scss b/src/apps/earn/src/components/challenge-detail/Registrants/style.scss
new file mode 100644
index 000000000..9692b6db0
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Registrants/style.scss
@@ -0,0 +1,342 @@
+@import '@earn/styles/mixins';
+
+.container {
+ @include roboto-regular;
+
+ padding-top: 30px;
+ padding-bottom: 50px;
+ margin: 0 41px;
+
+ @include xs-to-sm {
+ padding: 0;
+ margin: 0 16px;
+ }
+}
+
+.head {
+ font-weight: 500;
+ color: #767676;
+ font-size: 11px;
+ line-height: 14px;
+ display: flex;
+ text-transform: uppercase;
+ padding-top: 14px;
+ padding-bottom: 17px;
+
+ @include xs-to-sm {
+ display: none;
+ }
+}
+
+.body {
+ @include xs-to-sm {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-right: 18px;
+ }
+}
+
+.row {
+ @include roboto-medium;
+
+ display: flex;
+ line-height: 22px;
+ color: $tc-black;
+ font-size: 14px;
+ font-weight: 500;
+ padding-top: 16px;
+ padding-bottom: 15px;
+ border-top: 1px solid $tc-gray-10;
+
+ &:last-child {
+ border-bottom: 1px solid $tc-gray-10;
+ }
+
+ &:first-child {
+ @include xs-to-sm {
+ margin-top: 24px;
+ }
+ }
+
+ @include xs-to-sm {
+ flex-direction: column;
+ padding-top: 16px;
+ padding-left: 4px;
+ width: 100%;
+ margin-top: 0;
+ padding-bottom: 12px !important;
+ }
+}
+
+.sm-only {
+ display: none;
+
+ .cell {
+ padding-top: 5px;
+ }
+
+ @include xs-to-sm {
+ display: block;
+ }
+}
+
+.title {
+ @include barlow-bold;
+
+ color: $tc-black;
+ font-size: 11px;
+ line-height: 14px;
+ font-weight: 600;
+ text-transform: uppercase;
+
+ @include xs-to-sm {
+ padding-top: 2px;
+ }
+}
+
+.col-1,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6 {
+ display: flex;
+ align-items: center;
+ border: none;
+ outline: none;
+ font: inherit;
+ color: inherit;
+
+ @include xs-to-sm {
+ padding-left: 0;
+ line-height: 20px;
+ width: auto;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+}
+
+.col-arrow {
+ display: flex;
+ padding-left: 5px;
+
+ :global {
+ svg {
+ margin-bottom: -1px;
+ }
+ }
+}
+
+.col-arrow-is-sorting {
+ :global {
+ g {
+ fill: $tc-dark-blue;
+ }
+ }
+}
+
+.col-arrow-sort-asc {
+ -moz-transform: scale(1, -1);
+ -o-transform: scale(1, -1);
+ -webkit-transform: scale(1, -1);
+ transform: scale(1, -1);
+}
+
+.col-1 {
+ width: 150px;
+ padding-left: 20px;
+ color: $tc-gray-50;
+
+ > span {
+ line-height: 15px;
+
+ :global {
+ div {
+ display: flex;
+ justify-items: center;
+ height: 100%;
+ }
+ }
+ }
+
+ @include xs-to-sm {
+ padding-left: 0;
+ margin-bottom: 10px;
+ line-height: 20px;
+ width: auto;
+ }
+}
+
+.col-2 {
+ width: 25%;
+ padding-left: 5px;
+
+ @include xs-to-sm {
+ padding-left: 0;
+ margin-bottom: 10px;
+ line-height: 20px;
+ width: auto;
+ }
+}
+
+.col-3 {
+ width: 26%;
+ padding-left: 10px !important;
+
+ @include xs-to-sm {
+ font-size: 15px;
+ line-height: 25px;
+ margin-bottom: 10px;
+ padding-left: 0 !important;
+ width: auto;
+ }
+
+ a,
+ a:hover,
+ a:visited {
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
+
+.col-4 {
+ width: 24%;
+ padding-left: 10px;
+
+ @include xs-to-sm {
+ margin-bottom: 15px;
+ line-height: 20px;
+ padding-left: 0;
+ width: auto;
+ }
+}
+
+.col-5 {
+ display: flex;
+ align-items: center;
+ padding-left: 10px;
+
+ @include xs-to-sm {
+ margin-bottom: 15px;
+ line-height: 20px;
+ padding-left: 0;
+ flex-direction: column;
+ align-items: flex-start;
+ width: auto;
+ }
+}
+
+.col-6 {
+ display: flex;
+ align-items: center;
+ width: 351px;
+ padding-left: 10px;
+
+ @include xs-to-sm {
+ line-height: 20px;
+ flex-direction: column;
+ align-items: flex-start;
+ padding-left: 0;
+ width: auto;
+ }
+}
+
+.table-header {
+ cursor: pointer;
+ background: transparent;
+ text-transform: uppercase;
+
+ &:focus,
+ &:hover {
+ color: $tc-black;
+ font-weight: 700;
+
+ :global {
+ path {
+ fill: $tc-black;
+ }
+ }
+ }
+}
+
+.passed {
+ display: inline-block;
+ height: 22px;
+ margin-bottom: 3px;
+ margin-left: 9px;
+ vertical-align: middle;
+ width: 22px;
+}
+
+.placement {
+ background-color: $tc-dark-blue-30;
+ color: $tc-dark-blue-100;
+ display: inline-block;
+ width: 22px;
+ height: 22px;
+ border-radius: 100%;
+ line-height: 22px;
+ text-align: center;
+ margin-left: 6px;
+}
+
+.placement-1 {
+ background-color: $tc-gold;
+ color: $tc-gold-130;
+}
+
+.placement-2 {
+ background-color: $tc-silver;
+ color: $tc-silver-130;
+}
+
+.placement-3 {
+ background-color: $tc-bronze;
+ color: $tc-bronze-130;
+}
+
+.design {
+ .col-3 {
+ width: 212px;
+ }
+
+ .col-4 {
+ width: 231px;
+ }
+
+ .col-5 {
+ width: 265px;
+ }
+
+ .col-6 {
+ width: 258px;
+ }
+}
+
+.tooltip {
+ font-size: 14px;
+ margin: 10px 10px 0 10px;
+ padding-top: 5px;
+}
+
+.level-1 {
+ color: $member-gray !important;
+}
+
+.level-2 {
+ color: $member-green !important;
+}
+
+.level-3 {
+ color: $member-blue !important;
+}
+
+.level-4 {
+ color: $member-yellow !important;
+}
+
+.level-5 {
+ color: $member-red !important;
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Specification/SaveConfirmationModal/index.jsx b/src/apps/earn/src/components/challenge-detail/Specification/SaveConfirmationModal/index.jsx
new file mode 100644
index 000000000..839637f39
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Specification/SaveConfirmationModal/index.jsx
@@ -0,0 +1,37 @@
+import PT from 'prop-types';
+
+import { BaseModal, Button, LoadingCircles } from '~/libs/ui';
+
+import styles from './style.scss';
+
+export default function SaveConfirmationModal({
+ onDone,
+ saving,
+}) {
+ return (
+
+ {
+ !isDesign && (
+
+ )
+ }
+
+
+ {twoRounds && (
+
+ )}
+
+
+
+ {
+ sortedRegistrants.map((r) => {
+ const placement = getPlace(results, r.memberHandle, places);
+ let checkpoint = this.getCheckPoint(r);
+ if (checkpoint) {
+ checkpoint = formatDate(checkpoint);
+ }
+ const final = this.getFinal(r);
+
+ return (
+
+
+ {
+ !isDesign && (
+
+ );
+ })
+ }
+
+
+ )
+ }
+
+ Rating
+
+
+
+ { (!_.isNil(r.rating) && r.rating !== 0) ? r.rating : '-'}
+
+
+
+
+
+ USERNAME
+
+
+
+ {r.memberHandle}
+
+
+
+
+ {
+ twoRounds
+ && (
+
+ Registration Date
+
+ {formatDate(r.created)}
+
+
+ )
+ }
+
+ Round 1 Submitted Date
+
+
+
+ {checkpoint}
+
+ {
+ passedCheckpoint(checkpoints, r.memberHandle, checkpointResults)
+ &&
+
+
+
+ {twoRounds ? 'Round 2 ' : ''}
+ Submitted Date
+
+
+
+ {formatDate(final)}
+
+ {placement > 0 && (
+
+ {placement}
+
+ )}
+
+ + Saving The Challenge +
+ { + saving ?
+
+ );
+}
+
+EligibleEvents.defaultProps = {
+ eventDetails: null,
+};
+
+EligibleEvents.propTypes = {
+ eventDetails: PT.shape({
+ eventName: PT.string.isRequired,
+ eventDetails: PT.string.isRequired,
+ description: PT.string.isRequired,
+ }),
+};
diff --git a/src/apps/earn/src/components/challenge-detail/Specification/SideBar/EligibleEvents/style.scss b/src/apps/earn/src/components/challenge-detail/Specification/SideBar/EligibleEvents/style.scss
new file mode 100644
index 000000000..7007678d1
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Specification/SideBar/EligibleEvents/style.scss
@@ -0,0 +1,5 @@
+@import "../mixins";
+
+.link-like-paragraph {
+ @include linkLikeParagraph;
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Specification/SideBar/ShareSocial.jsx b/src/apps/earn/src/components/challenge-detail/Specification/SideBar/ShareSocial.jsx
new file mode 100644
index 000000000..0b227a6ad
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Specification/SideBar/ShareSocial.jsx
@@ -0,0 +1,65 @@
+
+import React from 'react';
+
+import { ReactComponent as TwitterIcon } from '@earn/assets/images/social/icon_twitter.svg';
+import { ReactComponent as FacebookIcon } from '@earn/assets/images/social/icon_facebook.svg';
+import { ReactComponent as MoreIcon } from '@earn/assets/images/social/icon_plus.svg';
+
+import styles from "./social_media.scss";
+
+export default class ShareSocial extends React.Component {
+ componentDidMount() {
+ /* TODO: This is some tooltip solution added in the related challenge,
+ * it should be replaced by the standard tooltip component employed into
+ * the repo. */
+ if (window.addthis && window.addthis.init) {
+ if (window.addthis.toolbox) {
+ window.addthis.init();
+ window.addthis.toolbox('.addthis_toolbox');
+ }
+ } else {
+ const scriptNode = document.createElement('script');
+ const scriptNodeConfig = document.createElement('script');
+
+ scriptNode.type = 'text/javascript';
+ scriptNodeConfig.type = 'text/javascript';
+ scriptNode.src = 'https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-52f22306211cecfc';
+ scriptNodeConfig.text = "var addthis_config = { services_exclude: 'email' };";
+
+ this.shareDiv.appendChild(scriptNode);
+ this.shareDiv.appendChild(scriptNodeConfig);
+ }
+ }
+
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Specification/SideBar/index.jsx b/src/apps/earn/src/components/challenge-detail/Specification/SideBar/index.jsx
new file mode 100644
index 000000000..d75b27d6d
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Specification/SideBar/index.jsx
@@ -0,0 +1,509 @@
+/* eslint jsx-a11y/no-static-element-interactions:0 */
+
+import PT from 'prop-types';
+import _ from 'lodash';
+import { Link } from 'react-router-dom';
+
+import { ReactComponent as TooltipIcon } from '@earn/assets/images/tooltip-info.svg';
+import { Tooltip } from '~/libs/ui';
+import { styled as styledCss } from "@earn/utils";
+import config from '@earn/config';
+
+import EligibleEvents from './EligibleEvents';
+import ShareSocial from './ShareSocial';
+import styles from "./styles.scss";
+
+const styled = styledCss(styles)
+
+export default function SideBar({
+ challengesUrl,
+ legacyId,
+ documents,
+ eventDetail,
+ shareable,
+ forumLink,
+ discuss,
+ hasRegistered,
+ reviewType,
+ isDesign,
+ terms,
+ isDevelop,
+ environment,
+ codeRepo,
+ isMM,
+ metadata,
+ reviewScorecardId,
+ screeningScorecardId,
+}) {
+ const scorecardURL = `${config.URL.ONLINE_REVIEW}/review/actions/ViewScorecard?scid=`;
+ const faqURL = config.URL.INFO.DESIGN_CHALLENGE_SUBMISSION;
+ let submissionLimitDisplay = 'Unlimited';
+ const submissionLimit = _.find(metadata, { name: 'submissionLimit' });
+ const fileTypes = _.find(metadata, { name: 'fileTypes' });
+
+ if (submissionLimit) {
+ if (submissionLimit.value === 1) {
+ submissionLimitDisplay = '1 submission';
+ } else if (submissionLimit.value > 1) {
+ submissionLimitDisplay = `${submissionLimit.value} submissions`;
+ }
+ }
+
+ const reviewTypeTitle = reviewType === 'PEER' ? 'Peer Review' : 'Community Review Board';
+ const reviewTypeDescription = (
+ reviewType === 'PEER'
+ ? 'Your peers performs a thorough review based on scorecards.'
+ : 'Community Review Board performs a thorough review based on scorecards.'
+ );
+
+ const reviewTip = (
+ ELIGIBLE EVENTS:
++ {/* TODO: It is not good to compose the event URL like this, as + * in general there is not guaranteed to be correct. */} + + {content} + +
+
+
+ );
+
+ const approvalTip = (
+ Final Review:
+{reviewTypeDescription}
+
+
+ );
+
+ const reviewScorecardTip = (
+ Approval:
+Customer has final opportunity to sign-off on the delivered assets.
+
+
+ );
+
+ const usableCodeArticle = (
+ See how you'll be reviewed.
++ Make sure you review the scorecard before you start. + This will show you how your submission will be judged and scored. +
+
+
+ );
+
+ const vscodeTip = (
+ Useable Code Rules
+A set of guidelines to help determine if code is acceptable or not.
+
+
+ );
+
+ return (
+ Topcoder Extension for VSCode
++ Shortcuts to perform actions related to Topcoder platform without having to open a browser +
+
+
+ );
+}
+
+SideBar.defaultProps = {
+ eventDetail: null,
+ discuss: [],
+ documents: undefined,
+ hasRegistered: false,
+ reviewType: 'COMMUNITY',
+ isDesign: false,
+ terms: [],
+ isDevelop: false,
+ environment: '',
+ codeRepo: '',
+ isMM: false,
+ metadata: [],
+ reviewScorecardId: '',
+ screeningScorecardId: '',
+ legacyId: '',
+};
+
+SideBar.propTypes = {
+ challengesUrl: PT.string.isRequired,
+ legacyId: PT.oneOfType([PT.string, PT.number]),
+ eventDetail: PT.shape({
+ eventName: PT.string.isRequired,
+ description: PT.string.isRequired,
+ }),
+ documents: PT.arrayOf(PT.shape()),
+ shareable: PT.bool.isRequired,
+ forumLink: PT.string.isRequired,
+ discuss: PT.arrayOf(PT.shape()),
+ hasRegistered: PT.bool,
+ reviewType: PT.string,
+ isDesign: PT.bool,
+ terms: PT.arrayOf(PT.shape()),
+ isDevelop: PT.bool,
+ environment: PT.string,
+ codeRepo: PT.string,
+ isMM: PT.bool,
+ metadata: PT.array,
+ reviewScorecardId: PT.oneOfType([PT.string, PT.number]),
+ screeningScorecardId: PT.oneOfType([PT.string, PT.number]),
+};
diff --git a/src/apps/earn/src/components/challenge-detail/Specification/SideBar/mixins.scss b/src/apps/earn/src/components/challenge-detail/Specification/SideBar/mixins.scss
new file mode 100644
index 000000000..7158a922d
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Specification/SideBar/mixins.scss
@@ -0,0 +1,34 @@
+@import "@earn/styles/mixins";
+
+$tc-link-visited: #0c4e98;
+
+@mixin linkStyle {
+ a {
+ color: $tc-dark-blue-110;
+ word-wrap: break-word;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+
+ a:active {
+ text-decoration: underline;
+ color: $tc-dark-blue-70;
+ }
+
+ a:visited {
+ color: $tc-link-visited;
+ }
+}
+
+@mixin linkLikeParagraph {
+ @include roboto-regular;
+
+ font-size: 13px;
+ color: $tc-gray-90;
+ line-height: 20px;
+ margin: 0 0 20px;
+
+ @include linkStyle;
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Specification/SideBar/social_media.scss b/src/apps/earn/src/components/challenge-detail/Specification/SideBar/social_media.scss
new file mode 100644
index 000000000..2bb7075a5
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Specification/SideBar/social_media.scss
@@ -0,0 +1,7 @@
+@import "@earn/styles/mixins";
+$tc-fb-blue: #325fba;
+
+.tc-share-social {
+ margin-top: 10px;
+ white-space: nowrap;
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Specification/SideBar/styles.scss b/src/apps/earn/src/components/challenge-detail/Specification/SideBar/styles.scss
new file mode 100644
index 000000000..2f231e552
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Specification/SideBar/styles.scss
@@ -0,0 +1,182 @@
+@import "./mixins";
+
+.no-margin-top {
+ margin-top: -10px !important;
+}
+
+.challenge-spec-sidebar {
+ @include roboto-regular;
+
+ background: #f4f4f4;
+ width: 325px;
+ padding: 23px;
+ margin-right: 30px;
+ margin-top: 34px;
+
+ @include md {
+ margin: (8 * $base-unit) 0;
+ }
+
+ @include xs-to-sm {
+ margin: 0;
+ width: 100%;
+ }
+}
+
+.term {
+ display: flex;
+ align-items: flex-start;
+ position: relative;
+
+ a {
+ cursor: pointer;
+ }
+}
+
+.tooltip-container {
+ display: flex;
+}
+
+.tctooltip {
+ margin-left: 5px;
+ margin-top: 3px;
+}
+
+.tctooltiptext {
+ h4 {
+ @include roboto-bold;
+
+ white-space: nowrap;
+ font-size: 13px;
+ line-height: 20px;
+ margin: 5px 0;
+ color: $tc-white;
+ text-transform: none
+ }
+
+ p {
+ @include roboto-regular;
+
+ font-size: 13px;
+ color: $tc-gray-10;
+ line-height: 20px;
+ margin: 0 0 5px;
+ max-width: 200px;
+ }
+}
+
+.challenge-sidebar-inner {
+ > :first-child {
+ margin-top: 0;
+ }
+
+ > div {
+ margin-top: 6 * $base-unit;
+ }
+
+ p {
+ padding-top: 2px;
+ padding-bottom: 7px;
+ }
+
+ h2 {
+ @include roboto-bold;
+
+ font-size: 18px;
+ color: $tc-gray-90;
+ line-height: 20px;
+ padding-bottom: 2px;
+ }
+
+ a {
+ color: #0d61bf;
+ font-weight: 500;
+ }
+
+ h3 {
+ @include roboto-bold;
+
+ font-size: 16px;
+ color: $tc-gray-90;
+ line-height: 20px;
+ margin-top: 4 * $base-unit;
+ }
+
+ h3:first-of-type {
+ margin-top: 2 * $base-unit;
+ }
+
+ .link-like-paragraph {
+ @include linkLikeParagraph;
+ }
+
+ .legacy-challenge-id {
+ h3 {
+ color: $tc-gray-10;
+ font-style: italic;
+ }
+
+ text-align: left;
+ }
+
+ ol {
+ @include roboto-regular;
+
+ margin: 0 0 5px;
+ counter-reset: item;
+ font-size: 13px;
+ color: $tc-gray-90;
+ line-height: 20px;
+ display: table;
+ padding-top: 8px;
+
+ li {
+ list-style-type: none;
+ font-weight: 400;
+ counter-increment: item;
+ display: table-row;
+
+ @include linkStyle;
+ }
+
+ li::before {
+ display: table-cell;
+ font-weight: 700;
+ text-align: right;
+ content: counter(item) ".";
+ padding: 0 8px 0 0;
+ width: 20px;
+ }
+ }
+
+ ul {
+ @include roboto-regular;
+
+ margin: 0 0 5px;
+ font-size: 13px;
+ color: $tc-gray-90;
+ line-height: 20px;
+ display: table;
+ padding-top: 8px;
+
+ li {
+ list-style-type: none;
+ font-weight: 400;
+ display: table-row;
+
+ @include linkStyle;
+ }
+
+ li::before {
+ display: table-cell;
+ font-weight: 700;
+ text-align: right;
+ content: "-";
+ padding: 0 10px 0 0;
+ }
+ }
+
+ .source-files-list {
+ margin-bottom: 3 * $base-unit;
+ }
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Specification/SpecificationComponent/index.jsx b/src/apps/earn/src/components/challenge-detail/Specification/SpecificationComponent/index.jsx
new file mode 100644
index 000000000..8bd59eddc
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Specification/SpecificationComponent/index.jsx
@@ -0,0 +1,59 @@
+import PT from 'prop-types';
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import remarkGfm from 'remark-gfm';
+import rehypeStringify from 'rehype-stringify';
+import remarkFrontmatter from 'remark-frontmatter';
+import rehypeRaw from 'rehype-raw';
+import remarkBreaks from 'remark-breaks';
+import styles from './styles.scss';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import 'katex/dist/katex.min.css';
+
+export default function SpecificationComponent({
+ bodyText,
+ format,
+}) {
+ if (format === 'markdown') {
+ // eslint-disable-next-line global-require
+ const remarkParse = require('remark-parse');
+ return (
+
+ {hasRegistered && documents && documents.length > 0 && (
+
+
+
+ )}
+ DOWNLOADS:
+-
+ {documents.map((doc) => {
+ const url = `${config.URL.COMMUNITY}/tc?module=DownloadDocument&docid=${doc.documentId}`;
+ return (
+
- + {doc.documentName} + + ); + })} +
+
+ LEARN:
+ +
+
+
+
+
+
+
+
+ )
+ }
+ {
+ !isMM && (
+ + REVIEW STYLE: +
++ Final Review: +
+ + {reviewTypeTitle} +
+
+ + Approval: +
+ + User Sign-Off +
+
+
+
+
+
+ )
+ }
+ {
+ !isDesign && (
+
+
+ Useable Code Rules
+
+
+
+
+ )
+ }
+
+ )
+ }
+ {isMM && (
+ + CHALLENGE LINKS: +
+ { + isDevelop && environment && environment.length > 0 + && ( ++ + Environment + +
+ ) + } + { + isDevelop && codeRepo && codeRepo.length > 0 + && ( + + ) + } + { + screeningScorecardId > 0 + && ( + + ) + } + { + reviewScorecardId > 0 && !isDesign + && ( + + + Review Scorecard + +
+
+
+
+
+
+ )}
+ {
+ isDesign
+ && (
+ CHALLENGE LINKS:
+ +
+
+ )
+ }
+ {
+ terms.length > 0
+ && (
+ + SUBMISSION FORMAT: +
++ Your Design Files: +
+-
+
- + Look for instructions in this challenge regarding what files to provide. + +
- + Place your submission files into a "Submission.zip" file. + +
- + Place all of your source files into a "Source.zip" file. + +
- + Declare your fonts, stock photos, and icons in a "Declaration.txt" file. + +
- + Create a JPG preview file. + +
- + Place the 4 files you just created into a single zip file. + This will be what you upload. + +
+ Trouble formatting your submission or want to learn more? + + + Read the FAQ. + +
++ Fonts, Stock Photos, and Icons: +
++ All fonts, stock photos, and icons within your design must be declared + when you submit. DO NOT include any 3rd party files in your + submission or source files. Read about the + {' '} + + policy. + +
++ Screening: +
++ All submissions are screened for eligibility before the challenge + holder picks winners. Don't let your hard work go to waste. + Learn more about how to + + + pass screening. + +
++ CHALLENGE LINKS: +
+ {(forumLink || !_.isEmpty(discuss)) && ( ++ Questions? + + {_.isEmpty(discuss) && ( + + Ask in the Challenge Discussion Forums. + + )} +
+ )} + {!_.isEmpty(discuss) && discuss.map(d => ( + + )) + } ++ SOURCE FILES: +
+ { + fileTypes + && ( +-
+ {
+ fileTypes.value && fileTypes.value.length > 0
+ ? JSON.parse(fileTypes.value)
+ .map(fileT => (
+
- + {fileT} + + )) + : undefined + } +
+ You must include all source files with your submission. +
++ SUBMISSION LIMIT: +
++ { + submissionLimit + ? submissionLimitDisplay : ( + + {submissionLimitDisplay} + + ) + } +
+
+
+ )
+ }
+ + CHALLENGE TERMS: +
+
+ {
+ terms.map(t => (
+
+
+
+ {t.title}
+
+
+ ))
+ }
+
+
+
+
+
+
+ Topcoder Templates repository
+
+
+
+ {shareable && (
+ + TOOLBOX: +
+ + + Topcoder Extension for VSCode + +
+
+
+
+ )}
+ {legacyId && (
+ + SHARE: +
+
+
+ )}
+ ID: {legacyId}
+
+ {
+ isSaving ? (
+ setSpecsTabState(SPECS_TAB_STATES.VIEW)}
+ saving={savingChallenge}
+ />
+ ) : null
+ }
+ {
+ canEdit && !editMode ? (
+
+
+
+ ) : null
+ }
+ {
+ editMode ? (
+
+ );
+}
+
+ChallengeDetailsView.defaultProps = {
+ terms: [],
+ challenge: {
+ description: undefined,
+ privateDescription: undefined,
+ track: 'design',
+ reviewType: undefined,
+ numberOfCheckpointsPrizes: 0,
+ environment: '',
+ descriptionFormat: 'HTML',
+ codeRepo: '',
+ metadata: [],
+ events: [],
+ reviewScorecardId: '',
+ screeningScorecardId: '',
+ },
+};
+
+ChallengeDetailsView.propTypes = {
+ terms: PT.arrayOf(PT.shape()),
+ hasRegistered: PT.bool.isRequired,
+ challenge: PT.shape({
+ description: PT.string,
+ descriptionFormat: PT.string,
+ documents: PT.any,
+ id: PT.any,
+ privateDescription: PT.string,
+ legacy: PT.shape({
+ reviewScorecardId: PT.oneOfType([PT.string, PT.number]),
+ screeningScorecardId: PT.string,
+ forumId: PT.number,
+ selfService: PT.bool,
+ }),
+ track: PT.string.isRequired,
+ legacyId: PT.oneOfType([PT.string, PT.number]),
+ groups: PT.any,
+ reviewType: PT.string,
+ numberOfCheckpointsPrizes: PT.number,
+ environment: PT.string,
+ codeRepo: PT.string,
+ userDetails: PT.shape({
+ roles: PT.arrayOf(PT.string).isRequired,
+ }),
+ metadata: PT.array,
+ events: PT.arrayOf(PT.string),
+ }),
+ challengesUrl: PT.string.isRequired,
+ communitiesList: PT.arrayOf(PT.shape({
+ communityId: PT.string.isRequired,
+ groupIds: PT.arrayOf(PT.string).isRequired,
+ })).isRequired,
+ savingChallenge: PT.bool.isRequired,
+ setSpecsTabState: PT.func.isRequired,
+ specsTabState: PT.string.isRequired,
+ updateChallenge: PT.func.isRequired,
+};
diff --git a/src/apps/earn/src/components/challenge-detail/Specification/styles.scss b/src/apps/earn/src/components/challenge-detail/Specification/styles.scss
new file mode 100644
index 000000000..95237ca71
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Specification/styles.scss
@@ -0,0 +1,439 @@
+@import "@earn/styles/mixins";
+$tc-link-visited: #0c4e98;
+
+.container {
+ border-radius: 0 0 (3 * $corner-radius) (3 * $corner-radius);
+}
+
+@mixin noteStyle {
+ @include roboto-regular;
+
+ background: $tc-yellow-30;
+ border: 1px solid $tc-yellow-70;
+ border-radius: 6px;
+ font-style: italic;
+ font-size: 13px;
+ color: $tc-black;
+ line-height: 20px;
+ padding: 15px 20px;
+ margin: 25px 0;
+
+ a,
+ p,
+ ul {
+ font-size: 13px;
+ }
+}
+
+@mixin linkStyle {
+ a {
+ color: $tc-dark-blue-110;
+ word-wrap: break-word;
+ }
+
+ a:visited {
+ color: $tc-link-visited;
+ }
+
+ a:hover {
+ color: $tc-dark-blue-110;
+ text-decoration: underline;
+ }
+
+ a:active {
+ text-decoration: underline;
+ color: $tc-dark-blue-70;
+ }
+}
+
+:global {
+ .editor-note-global {
+ @include noteStyle;
+ }
+}
+
+.hiddenSaveButton,
+.hiddenSaveButton:active,
+.hiddenSaveButton:focus,
+.hiddenSaveButton:hover {
+ background: white !important;
+ border: none !important;
+ color: white !important;
+ max-height: 10px !important;
+ min-height: 10px !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ overflow: hidden !important;
+ outline: none !important;
+ max-width: 10px !important;
+}
+
+.rawHtml {
+ @include tc-typography;
+
+ h1 {
+ @include roboto-medium;
+
+ font-size: 28px;
+ color: $tc-black;
+ letter-spacing: -0.78px;
+ line-height: 40px;
+ margin: 50px 0 10px;
+ }
+
+ h2 {
+ @include roboto-bold;
+
+ font-size: 20px;
+ color: $tc-black;
+ line-height: 30px;
+ margin: (6 * $base-unit) 0 (2 * $base-unit);
+ }
+
+ h3 {
+ @include roboto-bold;
+
+ font-size: 15px;
+ color: $tc-black;
+ line-height: 25px;
+ margin: (5 * $base-unit) 0 0;
+ text-transform: uppercase;
+ }
+
+ h4 {
+ @include roboto-bold;
+
+ font-size: 15px;
+ color: $tc-gray-90;
+ line-height: 25px;
+ }
+
+ strong {
+ font-weight: bold !important;
+ }
+
+ p,
+ em,
+ strong,
+ a {
+ @include roboto-regular;
+
+ font-size: 15px;
+ color: $tc-gray-90;
+ line-height: 25px;
+
+ @include linkStyle;
+ }
+
+ p {
+ margin: (2 * $base-unit) 0 (3 * $base-unit);
+ }
+
+ code {
+ background: $tc-gray-neutral-light;
+ border: 1px solid $tc-gray-20;
+ border-radius: 6px;
+ font-family: 'Roboto Mono', monospace;
+ font-weight: 400;
+ font-size: 13px;
+ color: $tc-black;
+ line-height: 20px;
+ margin: (2 * $base-unit) 0 (3 * $base-unit);
+ padding: 3 * $base-unit;
+ display: block;
+ }
+
+ pre {
+ overflow-x: scroll;
+ }
+
+ ol {
+ @include roboto-regular;
+
+ margin: 0 0 5px;
+ counter-reset: item;
+ font-size: 15px;
+ color: $tc-gray-90;
+ line-height: 25px;
+ display: table;
+
+ li {
+ list-style-type: none;
+ font-weight: 400;
+ counter-increment: item;
+ display: table-row;
+ white-space: normal;
+
+ @include linkStyle;
+ }
+
+ li::before {
+ display: table-cell;
+ text-align: right;
+ content: counter(item) ".";
+ padding: 0 10px 0 0;
+ white-space: nowrap;
+ }
+ }
+
+ ul {
+ @include roboto-regular;
+
+ margin: 0 0 5px 20px;
+ font-size: 15px;
+ color: $tc-gray-90;
+ line-height: 25px;
+ list-style: revert;
+
+ li {
+ font-weight: 400;
+
+ @include linkStyle;
+ }
+ }
+
+ @include linkStyle;
+}
+
+.challenge-details-view {
+ white-space: normal;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ align-items: baseline;
+ word-break: break-word;
+
+ @include linkStyle;
+
+ @include xs-to-sm {
+ flex-direction: column;
+ }
+
+ .challenge-specifications {
+ @include roboto-regular;
+
+ flex: 4;
+ text-align: left;
+ display: flex;
+ flex-direction: column;
+ margin: 5px 0 50px;
+
+ .challenge-specs-develop {
+ blockquote {
+ border-left: 3px solid $tc-green;
+ padding-left: 17px;
+ }
+ }
+
+ .challenge-specs-datasci {
+ blockquote {
+ border-left: 3px solid $tc-orange;
+ padding-left: 17px;
+ }
+ }
+
+ .challenge-specs-design {
+ blockquote {
+ border-left: 3px solid $tc-light-blue;
+ padding-left: 17px;
+ }
+ }
+
+ h1 {
+ @include roboto-bold;
+
+ font-size: 32px;
+ color: #151516;
+ letter-spacing: -0.78px;
+ line-height: 40px;
+ margin: (10 * $base-unit) 0 (2 * $base-unit);
+ }
+
+ h2 {
+ @include roboto-bold;
+
+ font-size: 24px;
+ color: $tc-black;
+ line-height: 28px;
+ margin: (6 * $base-unit) 0 (2 * $base-unit);
+ }
+
+ h3 {
+ @include roboto-bold;
+
+ font-size: 18px;
+ color: $tc-black;
+ line-height: 25px;
+ margin: (5 * $base-unit) 0 0;
+ text-transform: uppercase;
+ }
+
+ h4 {
+ @include roboto-bold;
+
+ margin: (4 * $base-unit) 0 (2 * $base-unit);
+ font-size: 15px;
+ line-height: 25px;
+ color: $tc-gray-90;
+ }
+
+ h5,
+ h6 {
+ margin: (4 * $base-unit) 0 (2 * $base-unit);
+ }
+
+ p,
+ em,
+ strong {
+ @include roboto-regular;
+
+ font-size: 15px;
+ color: $tc-gray-90;
+ line-height: 25px;
+ }
+
+ p {
+ @include roboto-regular;
+
+ font-size: 15px;
+ color: $tc-gray-90;
+ line-height: 25px;
+
+ @include linkStyle;
+
+ margin: (2 * $base-unit) 0 (3 * $base-unit);
+ }
+
+ ul {
+ @include roboto-regular;
+
+ margin: 0 0 5px 20px;
+ font-size: 15px;
+ color: $tc-gray-90;
+ line-height: 25px;
+ list-style: revert;
+
+ li {
+ font-weight: 400;
+
+ @include linkStyle;
+ }
+ }
+
+ em {
+ @include roboto-regular;
+
+ font-style: italic;
+ font-weight: 400;
+ font-size: 15px;
+ color: $tc-gray-90;
+ line-height: 25px;
+ }
+
+ ol {
+ @include roboto-regular;
+
+ color: $tc-gray-80;
+ font-size: 15px;
+ line-height: 25px;
+ list-style-type: decimal;
+ margin: 0 0 5px;
+ counter-reset: item;
+ display: table;
+
+ li {
+ list-style-type: none;
+ font-weight: 400;
+ counter-increment: item;
+ display: table-row;
+ white-space: normal;
+
+ &::before {
+ display: table-cell;
+ text-align: right;
+ content: counter(item) ".";
+ padding: 0 10px 0 0;
+ white-space: nowrap;
+ }
+ }
+ }
+
+ td,
+ th {
+ @include roboto-regular;
+
+ color: $tc-gray-80;
+ font-size: 15px;
+ line-height: 25px;
+ }
+
+ img {
+ max-width: 100%;
+ }
+
+ code {
+ white-space: pre;
+ margin: 10px 0 15px;
+ background: $tc-gray-neutral-light;
+ border: 1px solid silver;
+ border-radius: 6px;
+ font-family: Roboto Mono, monospace;
+ font-weight: 400;
+ font-size: 13px;
+ color: $tc-black;
+ line-height: 20px;
+ padding: 15px;
+ display: block;
+ }
+
+ sub {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+ bottom: -0.25em;
+ }
+
+ sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+ top: -0.5em;
+ }
+
+ strong {
+ @include roboto-bold;
+
+ font-size: 15px;
+ color: $tc-gray-90;
+ line-height: 25px;
+ }
+
+ pre {
+ overflow-x: scroll;
+ }
+ }
+}
+
+.challenge-specs-main {
+ @include roboto-regular;
+
+ width: 100%;
+ padding: 0 34px;
+ align-self: center;
+ font-size: 15px;
+ color: $tc-gray-90;
+ line-height: 25px;
+ white-space: normal;
+
+ .note {
+ @include noteStyle;
+ }
+
+ @include xs-to-sm {
+ max-width: 95vw;
+ }
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Submissions/FailedSubmissionTooltip/index.jsx b/src/apps/earn/src/components/challenge-detail/Submissions/FailedSubmissionTooltip/index.jsx
new file mode 100644
index 000000000..7f66dfce1
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Submissions/FailedSubmissionTooltip/index.jsx
@@ -0,0 +1,36 @@
+/**
+ * Failed Submission Tooltip Component.
+ *
+ */
+
+import PT from 'prop-types';
+
+import { Tooltip } from '~/libs/ui';
+
+import { ReactComponent as Failed } from '../../icons/failed.svg';
+import styles from './style.scss';
+
+/**
+ * Renders the tooltip.
+ */
+function FailedSubmissionTooltip({
+ content,
+}) {
+ return (
+
+
+
+
+ ) : null
+ }
+
+
+
+
+
+ {
+ track.toLowerCase() !== 'design'
+ ? (
+
+
+ )}
+
+
+ {
+ description
+ && (
+
+ n && n.setHtml(description)}
+ />
+ ) : (
+
+
+ )
+ }
+
+ )
+ }
+
+ )
+ : (
+
+ {
+ description
+ && (
+
+ {
+ selfService && (
+
+ + REQUEST MARVEL PROTOTYPES HERE: + +
+ + Request Marvel for On Demand Challenges + +
+ + DO NOT request Marvel access in the challenge forum with the customer. + +
+ Figma or XD Prototypes are acceptable for submissions created with those applications. + + ) + } + n && n.setHtml(privateDescription)}
+ />
+ ) : (
+
+
+ )
+ }
+
+
+ )
+ }
+
+
+
+
+
+
+
+
+ )
+ }
+ {isWipro && (
+
+
+ On Demand Challenges are customer-initiated single round design challenges.
+
+
+ Please note the following important information for Topcoder competitors who participate in this challenge:
+
-
+
- Any communication needed, should be done directly with the customer in the Challenge Forum. +
- In order to pass challenge screening and review, all challenge requirements and requested screens must be completed as described below. +
- Submission source files must be created with the application(s) listed in the requirements. +
- There will be no appeals or final fixes. +
- The challenge winner selections will be based upon completed requirements and associated Topcoder review scoring. +
+ + REQUEST MARVEL PROTOTYPES HERE: + +
+ + Request Marvel for On Demand Challenges + +
+ + DO NOT request Marvel access in the challenge forum with the customer. + +
+ Figma or XD Prototypes are acceptable for submissions created with those applications. + + ) + } +
+ Challenge Summary +
+ { + editMode ? ( ++ Registered User Additional Information +
++ Please read the challenge specification carefully and + watch the forums for any questions or feedback + concerning this challenge. It is important that you + monitor any updates provided by the client or Studio + Admins in the forums. Please post any questions you + might have for the client in the forums. +
++ Stock Photography +
++ {stockArtText} + + + See this page for more details. + +
++ How To Submit +
+-
+
- + New to Studio? + + + Learn how to compete here + + +
- + Upload your submission in three parts ( + + Learn more here + + ). Your design should be finalized and should contain only a single design + concept (do not include multiple designs in a single submission). + +
- + If your submission wins, your source files must be correct and “ + + Final Fixes + + ” + (if applicable) must be completed before payment can be released. + +
- + You may submit as many times as you'd like during + the submission phase, but only the number of files + listed above in the Submission Limit that you rank the + highest will be considered. You can change the order of + your submissions at any time during the submission + phase. If you make revisions to your design, please + delete submissions you are replacing. + +
+ Winner Selection +
++ Submissions are viewable to the client as they are entered + into the challenge. Winners are selected by the client and + are chosen solely at the client's discretion. +
++ Payments +
+
+
+ + For employees of Wipro Technologies, following are the + payment terms. Winner/s would be awarded the prize money on + successful completion and acceptance of the submission by + the stakeholder. Accumulated prize money for the month will + be paid through Wipro payroll as part of subsequent month’s + salary (eg. Aug month challenge winners payment will be + credited as part Sept month salary). For payment of prize + money, respective country currency conversion shall be + considered as per Wipro standard currency conversion + guidelines. Please refer to policy document at + + + https://wipro365.sharepoint.com/sites/wipro-people-policies/wipro%20policies/TopGear-RewardPoints-Policy.pdf + + + for details regarding the policy. +
+
+
+
+
+ );
+}
+
+FailedSubmissionTooltip.defaultProps = {
+ content: 'Failed Submission',
+};
+
+FailedSubmissionTooltip.propTypes = {
+ content: PT.string,
+};
+
+export default FailedSubmissionTooltip;
diff --git a/src/apps/earn/src/components/challenge-detail/Submissions/FailedSubmissionTooltip/style.scss b/src/apps/earn/src/components/challenge-detail/Submissions/FailedSubmissionTooltip/style.scss
new file mode 100644
index 000000000..24fb1fe64
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Submissions/FailedSubmissionTooltip/style.scss
@@ -0,0 +1,3 @@
+.failed-submission-tooltip {
+ width: 20px;
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Submissions/SubmissionInformationModal/index.jsx b/src/apps/earn/src/components/challenge-detail/Submissions/SubmissionInformationModal/index.jsx
new file mode 100644
index 000000000..bc8cbd065
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Submissions/SubmissionInformationModal/index.jsx
@@ -0,0 +1,192 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import _ from 'lodash';
+import React from 'react';
+import PT from 'prop-types';
+import moment from 'moment';
+
+import { BaseModal, Button, LoadingSpinner } from '~/libs/ui';
+import { ReactComponent as ArrowUp } from '@earn/assets/images/icon-arrow-up.svg';
+import { ReactComponent as ArrowDown } from '@earn/assets/images/icon-arrow-down.svg';
+import { styled as styledCss } from "@earn/utils";
+
+import styles from "./style.scss";
+const styled = styledCss(styles)
+
+class SubmissionInformationModal extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.getTestCaseOpen = this.getTestCaseOpen.bind(this);
+ this.getSubmissionBasicInfo = this.getSubmissionBasicInfo.bind(this);
+ this.getTestcases = this.getTestcases.bind(this);
+ }
+
+ componentWillUnmount() {
+ const { clearTestcaseOpen } = this.props;
+ clearTestcaseOpen();
+ }
+
+ getTestCaseOpen(index) {
+ const { openTestcase } = this.props;
+ return openTestcase[index.toString()] || false;
+ }
+
+
+ getSubmissionBasicInfo() {
+ const { submission, submissionInformation } = this.props;
+ return _.find(submission.submissions, item => item.submissionId === submissionInformation.id);
+ }
+
+ getTestcases() {
+ const { submissionInformation } = this.props;
+
+ let list = [];
+ _.forEach(submissionInformation.review, (item) => {
+ if (_.has(item, 'metadata.public') && item.metadata.public.length > 0) {
+ list = list.concat(item.metadata.public);
+ }
+ });
+
+ return list;
+ }
+
+ /* eslint-disable class-methods-use-this */
+ renderCase(key, value) {
+ return (
+ Advanced Details
+ {
+ submissionBasicInfo ? (
+
+
+ ) : (
+
+ Submission:
+ {submissionInformation.id}
+
+
+
+
+
+ Final Score
+ Provissional Score
+ Time
+
+
+
+ {(!submissionBasicInfo.finalScore && submissionBasicInfo.finalScore !== 0) || !isReviewPhaseComplete ? '-' : submissionBasicInfo.finalScore}
+
+
+ {(!submissionBasicInfo.provisionalScore && submissionBasicInfo.provisionalScore !== 0) ? '-' : submissionBasicInfo.provisionalScore}
+
+
+ {moment(submissionBasicInfo.submissionTime)
+ .format('DD MMM YYYY')} {moment(submissionBasicInfo.submissionTime)
+ .format('HH:mm:ss')}
+
+
+ You don't have permission to view the advanced details for this submission
+
+ )
+ }
+ {
+ testcases.length > 0 && (
+
+ Test cases executed
+
+ {
+ _.map(testcases, (item, index) => (
+
+
+ ))
+ }
+
+
+ {
+ _.keys(item).length > 0 && (
+ Test case #{index + 1}
+ toggleTestcase(index)} role="button" tabIndex={0}>
+ {
+ this.getTestCaseOpen(index) ?
+ {
+ _.map(_.keys(item), (key, caseIndex) => (
+
+ )
+ }
+
+ {
+ this.renderCase(key, item[key])
+ }
+
+ ))
+ }
+
+
+
+
+
+
+
+ );
+}
+
+SubmissionHistoryRow.defaultProps = {
+ finalScore: null,
+ provisionalScore: null,
+ isReviewPhaseComplete: false,
+ isLoggedIn: false,
+};
+
+SubmissionHistoryRow.propTypes = {
+ isMM: PT.bool.isRequired,
+ isRDM: PT.bool.isRequired,
+ submission: PT.number.isRequired,
+ finalScore: PT.oneOfType([
+ PT.number,
+ PT.string,
+ ]),
+ status: PT.string.isRequired,
+ provisionalScore: PT.oneOfType([
+ PT.number,
+ PT.string,
+ ]),
+ submissionTime: PT.string.isRequired,
+ challengeStatus: PT.string.isRequired,
+ isReviewPhaseComplete: PT.bool,
+ auth: PT.shape().isRequired,
+ numWinners: PT.number.isRequired,
+ submissionId: PT.string.isRequired,
+ isLoggedIn: PT.bool,
+};
diff --git a/src/apps/earn/src/components/challenge-detail/Submissions/SubmissionRow/SubmissionHistoryRow/style.scss b/src/apps/earn/src/components/challenge-detail/Submissions/SubmissionRow/SubmissionHistoryRow/style.scss
new file mode 100644
index 000000000..a704ca283
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Submissions/SubmissionRow/SubmissionHistoryRow/style.scss
@@ -0,0 +1,143 @@
+@import "@earn/styles/mixins";
+
+.container {
+ border-bottom: 1px solid #e9e9e9;
+
+ @include xs-to-sm {
+ padding-top: 10px;
+ padding-bottom: 16px;
+ }
+
+ .row {
+ font-size: 13px;
+ color: $tc-gray-70;
+ display: flex;
+ border-bottom: 1px solid $tc-gray-10;
+ padding: 16px 0;
+
+ &.no-border {
+ border: none;
+ }
+
+ @include xs-to-sm {
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ }
+ }
+
+ .col {
+ text-align: center;
+
+ @include roboto-medium;
+
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 22px;
+ padding: 0;
+
+ &.child {
+ height: 57px;
+
+ @include xs-to-sm {
+ height: auto;
+ }
+ }
+
+ &.col-1 {
+ flex: 30;
+
+ @include roboto-medium;
+
+ color: #2a2a2a;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 22px;
+ text-align: left;
+
+ @include xs-to-sm {
+ flex: 10;
+ }
+ }
+
+ &.col-2 {
+ flex: 30;
+
+ @include roboto-medium;
+
+ color: #2a2a2a;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 22px;
+ text-align: left;
+
+ @include xs-to-sm {
+ display: block;
+ }
+ }
+
+ &.col-3 {
+ flex: 32;
+
+ @include roboto-medium;
+
+ color: #2a2a2a;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 22px;
+ text-align: left;
+ }
+
+ &.col-4 {
+ flex: 10;
+
+ @include roboto-medium;
+
+ color: #2a2a2a;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 22px;
+ text-align: left;
+
+ &.mm {
+ flex: 28;
+ }
+ }
+
+ &.center {
+ text-align: center;
+
+ @include xs-to-sm {
+ text-align: left;
+ }
+ }
+ }
+}
+
+.mobile-header {
+ display: none;
+
+ @include xs-to-sm {
+ display: block;
+ margin-top: 16px;
+ font-size: 11px;
+ line-height: 14px;
+
+ @include barlow-bold;
+
+ font-weight: 600;
+ color: #767676;
+ text-align: left;
+ }
+}
+
+button {
+ cursor: pointer;
+ border: none;
+ outline: none;
+ font: inherit;
+ color: inherit;
+ padding: 0;
+ background: transparent;
+ text-transform: uppercase;
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Submissions/SubmissionRow/index.jsx b/src/apps/earn/src/components/challenge-detail/Submissions/SubmissionRow/index.jsx
new file mode 100644
index 000000000..8ad1560a2
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Submissions/SubmissionRow/index.jsx
@@ -0,0 +1,270 @@
+/* eslint jsx-a11y/no-static-element-interactions:0 */
+/**
+ * SubmissionRow component.
+ */
+
+import React from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+import { CHALLENGE_STATUS, getRatingLevel } from '@earn/utils/tc';
+import { ReactComponent as IconClose } from '@earn/assets/images/icon-close-green.svg';
+import moment from 'moment';
+
+import FailedSubmissionTooltip from '../FailedSubmissionTooltip';
+import { ReactComponent as InReview } from '../../icons/in-review.svg';
+import { ReactComponent as Queued } from '../../icons/queued.svg';
+import SubmissionHistoryRow from './SubmissionHistoryRow';
+
+import styles from "./style.scss";
+import { styled as styledCss } from "@earn/utils";
+import { BaseModal } from '~/libs/ui';
+const styled = styledCss(styles)
+
+export default function SubmissionRow({
+ isMM, isRDM, openHistory, member, submissions, score, toggleHistory, challengeStatus,
+ isReviewPhaseComplete, finalRank, provisionalRank, onShowPopup, rating, viewAsTable,
+ numWinners, auth, isLoggedIn,
+}) {
+ const {
+ submissionTime, provisionalScore, status, submissionId,
+ } = submissions[0];
+ let { finalScore } = submissions[0];
+ finalScore = (!finalScore && finalScore < 0) || !isReviewPhaseComplete ? '-' : finalScore;
+ let initialScore;
+ if (provisionalScore >= 0 || provisionalScore === -1) {
+ initialScore = provisionalScore;
+ }
+
+ const getInitialReviewResult = () => {
+ const s = isMM ? _.get(score, 'provisional', initialScore) : initialScore;
+ if (s && s < 0) return
+
+
+
+ SUBMISSION
+ {submission}
+
+
+ FINAL SCORE
+
+ {getFinalScore()}
+
+
+
+ PROVISIONAL SCORE
+
+ {getInitialReviewResult()}
+
+
+
+ {
+ isLoggedIn && (isMM || isRDM)
+ && (numWinners > 0 || challengeStatus === CHALLENGE_STATUS.COMPLETED) && (
+ TIME
+
+ {moment(submissionTime).format('DD MMM YYYY')} {moment(submissionTime).format('HH:mm:ss')}
+
+
+
+ )
+ }
+ Action
+
+
+ 0 || challengeStatus === CHALLENGE_STATUS.COMPLETED) ? 'body' : 'lg'}
+ >
+
+
+ );
+}
+
+SubmissionRow.defaultProps = {
+ toggleHistory: () => {},
+ score: {},
+ isReviewPhaseComplete: false,
+ finalRank: null,
+ provisionalRank: null,
+ rating: null,
+ isLoggedIn: false,
+};
+
+SubmissionRow.propTypes = {
+ isMM: PT.bool.isRequired,
+ isRDM: PT.bool.isRequired,
+ openHistory: PT.bool.isRequired,
+ member: PT.string.isRequired,
+ challengeStatus: PT.string.isRequired,
+ submissions: PT.arrayOf(PT.shape({
+ provisionalScore: PT.oneOfType([
+ PT.number,
+ PT.string,
+ ]),
+ finalScore: PT.oneOfType([
+ PT.number,
+ PT.string,
+ ]),
+ initialScore: PT.oneOfType([
+ PT.number,
+ PT.string,
+ ]),
+ status: PT.string.isRequired,
+ submissionId: PT.string.isRequired,
+ submissionTime: PT.string.isRequired,
+ })).isRequired,
+ score: PT.shape({
+ final: PT.oneOfType([
+ PT.number,
+ PT.string,
+ ]),
+ provisional: PT.oneOfType([
+ PT.number,
+ PT.string,
+ ]),
+ }),
+ rating: PT.number,
+ toggleHistory: PT.func,
+ isReviewPhaseComplete: PT.bool,
+ finalRank: PT.number,
+ provisionalRank: PT.number,
+ onShowPopup: PT.func.isRequired,
+ viewAsTable: PT.bool.isRequired,
+ isLoggedIn: PT.bool,
+ numWinners: PT.number.isRequired,
+ auth: PT.shape().isRequired,
+};
diff --git a/src/apps/earn/src/components/challenge-detail/Submissions/SubmissionRow/style.scss b/src/apps/earn/src/components/challenge-detail/Submissions/SubmissionRow/style.scss
new file mode 100644
index 000000000..1e949310f
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Submissions/SubmissionRow/style.scss
@@ -0,0 +1,413 @@
+@import "@earn/styles/mixins";
+
+.history {
+ padding-bottom: 10px;
+ border-radius: 8px;
+ margin: 25px 32px 32px;
+
+ .table-body {
+ max-height: 49vh;
+ overflow-y: auto;
+
+ @media screen and (max-width: $screen-sm) {
+ max-height: 65vh;
+ }
+ }
+
+ @include xs-to-sm {
+ margin: 0 0;
+ }
+}
+
+.history-head {
+ display: flex;
+ margin-top: 24px;
+ width: 100%;
+ padding-bottom: 16px;
+ border-bottom: 1px solid #e9e9e9;
+
+ .col {
+ text-transform: uppercase;
+
+ @include roboto-medium;
+
+ color: #2a2a2a;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 22px;
+ text-align: left;
+
+ &.col-1 {
+ flex: 0;
+ }
+
+ &.col-2 {
+ flex: 30;
+ }
+
+ &.col-3 {
+ flex: 30;
+ }
+
+ &.col-4 {
+ flex: 32;
+ }
+
+ &.col-5 {
+ flex: 28;
+ }
+
+ &.center {
+ text-align: center;
+ }
+ }
+
+ @include xs-to-sm {
+ display: none;
+ }
+}
+
+.wrapper-as-table {
+ @include xs-to-sm {
+ min-width: 1920px !important;
+ }
+
+ .row {
+ @include xs-to-sm {
+ flex-direction: row !important;
+ border-top: 1px solid $tc-gray-10 !important;
+ margin-left: 0 !important;
+ margin-top: 0 !important;
+ margin-right: 0 !important;
+ padding-top: 16px !important;
+ padding-bottom: 16px !important;
+ }
+ }
+}
+
+.wrapper {
+ a { cursor: pointer; }
+
+ .row {
+ font-size: 13px;
+ color: $tc-gray-70;
+ display: flex;
+ border-bottom: 1px solid $tc-gray-10;
+
+ @include xs-to-sm {
+ flex-direction: column;
+ border-top: 1px solid #e9e9e9;
+ border-bottom: 0;
+ margin-left: 0;
+ margin-top: 25px;
+ margin-right: 15px;
+ }
+
+ &.no-border {
+ border: none;
+ }
+ }
+
+ .history {
+ .history-head {
+ font-weight: 500;
+ font-size: 13px;
+ color: $tc-gray-50;
+ width: 100%;
+ display: flex;
+
+ @include xs-to-sm {
+ display: none;
+ }
+
+ .col-2 {
+ color: black;
+ }
+
+ .col-3 {
+ flex: 32;
+ }
+
+ .col-4 {
+ flex: 35;
+ }
+
+ @include xs-to-sm {
+ display: none;
+ }
+ }
+ }
+
+ div.col {
+ padding: 16px 0;
+
+ @include xs-to-sm {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ }
+
+ .col-view-as-table {
+ @include xs-to-sm {
+ @include roboto-medium;
+
+ color: #2a2a2a;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 22px;
+ text-align: left;
+ }
+
+ &.col-1 {
+ @include xs-to-sm {
+ flex: 39 !important;
+ }
+ }
+
+ &.col-2 {
+ @include xs-to-sm {
+ flex: 37 !important;
+ }
+ }
+
+ &.col-3 {
+ @include xs-to-sm {
+ flex: 74 !important;
+ }
+ }
+
+ &.col-4 {
+ @include xs-to-sm {
+ flex: 15 !important;
+ }
+ }
+
+ &.col-5 {
+ @include xs-to-sm {
+ flex: 22 !important;
+ }
+ }
+
+ &.col-6 {
+ @include xs-to-sm {
+ flex: 38 !important;
+ }
+ }
+
+ &.col-7 {
+ @include xs-to-sm {
+ flex: 35 !important;
+ }
+ }
+
+ &.col-8 {
+ @include xs-to-sm {
+ flex: 25 !important;
+ }
+ }
+ }
+
+ .col {
+ @include roboto-medium;
+
+ color: #2a2a2a;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 22px;
+ text-align: left;
+
+ &.col-1 {
+ flex: 20;
+ display: flex;
+
+ @include xs-to-sm {
+ flex: 15;
+ display: block;
+ }
+ }
+
+ &.col-2 {
+ flex: 20;
+ text-align: left;
+ color: $tc-gray-50;
+ padding-left: 10px;
+ display: flex;
+
+ @include xs-to-sm {
+ padding-left: 0;
+ }
+ }
+
+ &.col-3 {
+ flex: 20;
+ display: flex;
+ color: $tc-gray-50;
+
+ @include xs-to-sm {
+ flex: 42;
+ display: block;
+ text-align: left;
+ }
+
+ &.time {
+ width: 100%;
+ display: block;
+ }
+ }
+
+ &.col-4 {
+ flex: 20;
+ color: $tc-gray-50;
+
+ @include xs-to-sm {
+ flex: 10;
+ }
+ }
+
+ &.col-5 {
+ flex: 20;
+ }
+
+ &.col-6 {
+ flex: 20;
+ }
+
+ &.col-7 {
+ flex: 20;
+ }
+
+ &.col-8 {
+ flex: 13;
+ }
+
+ .text {
+ cursor: pointer;
+ color: #0d61bf;
+ }
+ }
+
+ .handle {
+ color: $tc-dark-blue;
+ }
+}
+
+.tooltip {
+ font-size: 14px;
+ margin: 10px 10px 0 10px;
+ padding-top: 5px;
+}
+
+.level-1 {
+ color: $member-gray !important;
+}
+
+.level-2 {
+ color: $member-green !important;
+}
+
+.level-3 {
+ color: $member-blue !important;
+}
+
+.level-4 {
+ color: $member-yellow !important;
+}
+
+.level-5 {
+ color: $member-red !important;
+}
+
+.header {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 25px;
+
+ .title {
+ @include barlow-medium;
+
+ font-weight: 600;
+ color: #2a2a2a;
+ font-size: 18px;
+ line-height: 22px;
+ text-transform: uppercase;
+ }
+
+ .icon {
+ cursor: pointer;
+ margin-top: 5px;
+ }
+}
+
+hr {
+ opacity: 0.5;
+}
+
+.submission-text {
+ @include roboto-regular;
+
+ font-size: 16px;
+ color: #2a2a2a;
+ line-height: 24px;
+ margin-top: 24px;
+
+ span {
+ font-weight: 700;
+ }
+}
+
+.close-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.close-btn {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 24px;
+ background-color: #137d60;
+ padding: 8px 24px;
+ width: 91px;
+ border-radius: 24px;
+
+ span {
+ @include roboto-bold;
+
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 24px;
+ color: #fff;
+ }
+
+ @include xs-to-sm {
+ border-top: 1px solid #e9e9e9;
+ position: sticky;
+ }
+}
+
+.view-as-table-header {
+ display: none !important;
+
+ @include xs-to-sm {
+ display: none !important;
+ }
+}
+
+.mobile-header {
+ display: none;
+
+ @include xs-to-sm {
+ display: block;
+ margin-top: 16px;
+ font-size: 11px;
+ line-height: 14px;
+
+ @include barlow-bold;
+
+ font-weight: 600;
+ color: #767676;
+ text-align: left;
+ }
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Submissions/index.jsx b/src/apps/earn/src/components/challenge-detail/Submissions/index.jsx
new file mode 100644
index 000000000..6981eb61c
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Submissions/index.jsx
@@ -0,0 +1,1045 @@
+/* eslint jsx-a11y/no-static-element-interactions:0 */
+/**
+ * Submissions tab component.
+ */
+
+import React from 'react';
+import PT from 'prop-types';
+import moment from 'moment';
+import { isMM as checkIsMM, isRDM as checkIsRDM } from '@earn/utils/challenge';
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import config from '@earn/config';
+import * as submissionUtils from '@earn/utils/submission';
+import { LinkButton } from '~/libs/ui';
+
+import { getService } from '@earn/services/submissions';
+import { isTokenExpired } from "@earn/utils/token";
+import { ReactComponent as DateSortIcon } from '@earn/assets/images/icon-date-sort.svg';
+import { ReactComponent as SortIcon } from '@earn/assets/images/icon-sort.svg';
+import { getSubmissionId } from '@earn/utils/submissions';
+import { compressFiles } from '@earn/utils/files';
+
+import sortList from '@earn/utils/challenge-detail/sort';
+import challengeDetailsActions from '@earn/actions/page/challenge-details';
+import { LoadingCircles } from "~/libs/ui";
+import { goToLogin, getRatingLevel, CHALLENGE_STATUS } from '@earn/utils/tc';
+import { ReactComponent as Lock } from '../icons/lock.svg';
+import { ReactComponent as ViewAsListActive } from '../icons/view-as-list-active.svg';
+import { ReactComponent as ViewAsListInactive } from '../icons/view-as-list-inactive.svg';
+import { ReactComponent as ViewAsTableActive } from '../icons/view-as-table-active.svg';
+import { ReactComponent as ViewAsTableInactive } from '../icons/view-as-table-inactive.svg';
+import SubmissionRow from './SubmissionRow';
+import SubmissionInformationModal from './SubmissionInformationModal';
+import { styled as styledCss } from "../../../utils";
+
+import styles from "./style.scss";
+const styled = styledCss(styles)
+
+const { getProvisionalScore, getFinalScore } = submissionUtils;
+
+class SubmissionsComponent extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ isShowInformation: false,
+ memberOfModal: '',
+ sortedSubmissions: [],
+ ratingClicked: false,
+ usernameClicked: false,
+ dateClicked: false,
+ initialScoreClicked: false,
+ finalScoreClicked: false,
+ finalRankClicked: false,
+ provisionalRankClicked: false,
+ provisionalScoreClicked: false,
+ downloadingAll: false,
+ };
+ this.onHandleInformationPopup = this.onHandleInformationPopup.bind(this);
+ this.getSubmissionsSortParam = this.getSubmissionsSortParam.bind(this);
+ this.getFlagFirstTry = this.getFlagFirstTry.bind(this);
+ this.updateSortedSubmissions = this.updateSortedSubmissions.bind(this);
+ this.sortSubmissions = this.sortSubmissions.bind(this);
+ this.checkIsReviewPhaseComplete = this.checkIsReviewPhaseComplete.bind(this);
+ }
+
+ componentDidMount() {
+ const { challenge, loadMMSubmissions, auth } = this.props;
+ const isMM = this.isMM();
+
+ // Check auth token, go to login page if invalid
+ if (isMM && (_.isEmpty(auth) || _.isEmpty(auth.tokenV3) || isTokenExpired(auth.tokenV3))) {
+ goToLogin('community-app-main');
+ return;
+ }
+
+ if (isMM) {
+ loadMMSubmissions(challenge.id, auth.tokenV3);
+ }
+ this.updateSortedSubmissions();
+ }
+
+ componentDidUpdate(prevProps) {
+ const isMM = this.isMM();
+
+ const { submissions, mmSubmissions, submissionsSort } = this.props;
+ if (
+ (!isMM && !_.isEqual(prevProps.submissions, submissions))
+ || (isMM && !_.isEqual(prevProps.mmSubmissions, mmSubmissions))
+ || !_.isEqual(prevProps.submissionsSort, submissionsSort)
+ ) {
+ this.updateSortedSubmissions();
+ }
+ }
+
+ onHandleInformationPopup(status, submissionId = null, member = '') {
+ const { loadSubmissionInformation, auth, challenge } = this.props;
+ this.setState({
+ isShowInformation: status,
+ memberOfModal: member,
+ });
+
+ if (status) {
+ loadSubmissionInformation(challenge.id, submissionId, auth.tokenV3);
+ }
+ }
+
+ /**
+ * Check if it have flag for first try
+ * @param {Object} registrant registrant info
+ */
+ getFlagFirstTry(registrant) {
+ const { notFoundCountryFlagUrl } = this.props;
+ if (!registrant.countryInfo || notFoundCountryFlagUrl[registrant.countryInfo.countryCode]) {
+ return null;
+ }
+
+ return registrant.countryInfo.countryFlag;
+ }
+
+ /**
+ * Get submission sort parameter
+ */
+ getSubmissionsSortParam(isMM, isReviewPhaseComplete) {
+ const {
+ submissionsSort,
+ } = this.props;
+ let { field, sort } = submissionsSort;
+ if (!field) {
+ field = 'Submission Date'; // default field for submission sorting
+ if (isMM) {
+ if (isReviewPhaseComplete) {
+ field = 'Final Rank';
+ } else {
+ field = 'Provisional Rank';
+ }
+ }
+ }
+
+ if (!sort) {
+ sort = 'asc'; // default order for submission sorting
+ }
+
+ return {
+ field,
+ sort,
+ };
+ }
+
+ /**
+ * Update sorted submission array
+ */
+ updateSortedSubmissions() {
+ const isMM = this.isMM();
+ const { submissions, mmSubmissions } = this.props;
+ const sortedSubmissions = _.cloneDeep(isMM ? mmSubmissions : submissions);
+ this.sortSubmissions(sortedSubmissions);
+ this.setState({ sortedSubmissions });
+ }
+
+ /**
+ * Sort array of submission
+ * @param {Array} submissions array of submission
+ */
+ sortSubmissions(submissions) {
+ const isMM = this.isMM();
+ const isReviewPhaseComplete = this.checkIsReviewPhaseComplete();
+ const { field, sort } = this.getSubmissionsSortParam(isMM, isReviewPhaseComplete);
+ let isHaveFinalScore = false;
+ if (field === 'Initial Score' || 'Final Score') {
+ isHaveFinalScore = _.some(submissions, s => !_.isNil(
+ s.reviewSummation && s.reviewSummation[0].aggregateScore,
+ ));
+ }
+ return sortList(submissions, field, sort, (a, b) => {
+ let valueA = 0;
+ let valueB = 0;
+ let valueIsString = false;
+ switch (field) {
+ case 'Country': {
+ valueA = a.registrant ? a.registrant.countryCode : '';
+ valueB = b.registrant ? b.registrant.countryCode : '';
+ valueIsString = true;
+ break;
+ }
+ case 'Rating': {
+ valueA = a.registrant ? a.registrant.rating : 0;
+ valueB = b.registrant ? b.registrant.rating : 0;
+ break;
+ }
+ case 'Username': {
+ if (isMM) {
+ valueA = `${a.member || ''}`.toLowerCase();
+ valueB = `${b.member || ''}`.toLowerCase();
+ } else {
+ valueA = _.get(a.registrant, 'memberHandle', '').toLowerCase();
+ valueB = _.get(b.registrant, 'memberHandle', '').toLowerCase();
+ }
+ valueIsString = true;
+ break;
+ }
+ case 'Time':
+ valueA = new Date(a.submissions && a.submissions[0].submissionTime);
+ valueB = new Date(b.submissions && b.submissions[0].submissionTime);
+ break;
+ case 'Submission Date': {
+ valueA = new Date(a.created);
+ valueB = new Date(b.created);
+ break;
+ }
+ case 'Initial Score': {
+ if (isHaveFinalScore) {
+ valueA = getFinalScore(a);
+ valueB = getFinalScore(b);
+ } else {
+ valueA = !_.isEmpty(a.review) && a.review[0].score;
+ valueB = !_.isEmpty(b.review) && b.review[0].score;
+ }
+ break;
+ }
+ case 'Final Rank': {
+ if (this.checkIsReviewPhaseComplete()) {
+ valueA = a.finalRank ? a.finalRank : 0;
+ valueB = b.finalRank ? b.finalRank : 0;
+ }
+ break;
+ }
+ case 'Provisional Rank': {
+ valueA = a.provisionalRank ? a.provisionalRank : 0;
+ valueB = b.provisionalRank ? b.provisionalRank : 0;
+ break;
+ }
+ case 'Final Score': {
+ valueA = getFinalScore(a);
+ valueB = getFinalScore(b);
+ break;
+ }
+ case 'Provisional Score': {
+ valueA = getProvisionalScore(a);
+ valueB = getProvisionalScore(b);
+ break;
+ }
+ default:
+ }
+
+ if (valueIsString === false) {
+ if (valueA === '-') valueA = 0;
+ if (valueB === '-') valueB = 0;
+ }
+
+ return {
+ valueA,
+ valueB,
+ valueIsString,
+ };
+ });
+ }
+
+ isMM() {
+ const { challenge } = this.props;
+ return challenge.track.toLowerCase() === 'data science' || checkIsMM(challenge);
+ }
+
+ /**
+ * Check if review phase complete
+ */
+ checkIsReviewPhaseComplete() {
+ const {
+ challenge,
+ } = this.props;
+
+ const allPhases = challenge.phases || [];
+
+ let isReviewPhaseComplete = false;
+ _.forEach(allPhases, (phase) => {
+ if (phase.name === 'Review' && !phase.isOpen && moment(phase.scheduledStartDate).isBefore()) {
+ isReviewPhaseComplete = true;
+ }
+ });
+ return isReviewPhaseComplete;
+ }
+
+ render() {
+ const {
+ challenge, toggleSubmissionHistory,
+ submissionHistoryOpen,
+ mmSubmissions,
+ loadingMMSubmissionsForChallengeId,
+ isLoadingSubmissionInformation,
+ submissionInformation,
+ toggleSubmissionTestcase,
+ submissionTestcaseOpen,
+ clearSubmissionTestcaseOpen,
+ onGetFlagImageFail,
+ onSortChange,
+ hasRegistered,
+ submissionEnded,
+ unregistering,
+ isLegacyMM,
+ challengesUrl,
+ viewAsTable,
+ setViewAsTable,
+ numWinners,
+ auth,
+ } = this.props;
+ const {
+ checkpoints,
+ id: challengeId,
+ track,
+ type,
+ tags,
+ } = challenge;
+
+ const isMM = this.isMM();
+ const isRDM = checkIsRDM(challenge);
+ const isLoggedIn = !_.isEmpty(auth.tokenV3);
+ const isReviewPhaseComplete = this.checkIsReviewPhaseComplete();
+
+ const { field, sort } = this.getSubmissionsSortParam(isMM, isReviewPhaseComplete);
+ const revertSort = (sort === 'desc') ? 'asc' : 'desc';
+
+ const {
+ isShowInformation,
+ memberOfModal,
+ sortedSubmissions,
+ ratingClicked,
+ usernameClicked,
+ dateClicked,
+ initialScoreClicked,
+ finalScoreClicked,
+ finalRankClicked,
+ provisionalRankClicked,
+ provisionalScoreClicked,
+ downloadingAll,
+ } = this.state;
+
+ const sortOptionClicked = {
+ ratingClicked: false,
+ usernameClicked: false,
+ dateClicked: false,
+ initialScoreClicked: false,
+ finalScoreClicked: false,
+ finalRankClicked: false,
+ provisionalRankClicked: false,
+ provisionalScoreClicked: false,
+ };
+
+ const modalSubmissionBasicInfo = () => _.find(mmSubmissions,
+ item => item.member === memberOfModal);
+
+ const renderSubmission = (s) => (
+
+ {
+ isMM ? (
+
+
+ ) : null
+ }
+
+
+
+ FINAL RANK
+ {
+ isReviewPhaseComplete ? finalRank || 'N/A' : 'N/A'
+ }
+ PROVISIONAL RANK
+
+
+
+ { provisionalRank || 'N/A' }
+
+
+
+ RATING
+
+ {rating || '-'}
+
+
+
+ USERNAME
+
+ {member || '-'}
+
+
+
+ FINAL SCORE
+
+ {getFinalReviewResult()}
+
+
+
+ PROVISIONAL SCORE
+
+ {getInitialReviewResult() ? getInitialReviewResult() : 'N/A'}
+
+
+
+ SUBMISSION DATE
+
+ {moment(submissionTime).format('DD MMM YYYY')} {moment(submissionTime).format('HH:mm:ss')}
+
+
+
+ ACTIONS
+
+
+ History (
+ {submissions.length}
+ )
+
+
+
+
+
+
+
+ Submission History
+
+
+ +
+ Latest Submission: {submissionId}
+
+
+
+
+ { isMM ? : null }
+
+ )
+ }
+
+
+ Submission
+
+
+
+
+
+ Final Score
+
+
+
+
+ Provisional Score
+
+
+ Time
+
+ {
+ (isMM || isRDM)
+ && (numWinners > 0 || challengeStatus === CHALLENGE_STATUS.COMPLETED) && (
+
+ Action
+
+ )
+ }
+ {
+ isMM && isLoggedIn && (
+
+ {
+ submissions.map((submissionHistory, index) => (
+
+
+
+
+ CLOSE
+
+
+
+ 
+
+
+ );
+
+ const isF2F = type === 'First2Finish';
+ const isBugHunt = _.includes(tags, 'Bug Hunt');
+
+ // copy colorStyle from registrants to submissions
+ _.forEach(sortedSubmissions, (s) => {
+ if (s.registrant && s.registrant.colorStyle && !s.colorStyle) {
+ const { colorStyle } = s.registrant;
+ /* eslint-disable no-param-reassign */
+ s.colorStyle = JSON.parse(colorStyle.replace(/(\w+):\s*([^;]*)/g, '{"$1": "$2"}'));
+ /* eslint-enable no-param-reassign */
+ }
+
+ if (s.registrant && s.registrant.rating && !s.rating) {
+ const { rating } = s.registrant;
+ /* eslint-disable no-param-reassign */
+ s.rating = rating;
+ /* eslint-enable no-param-reassign */
+ }
+ });
+
+ if (track.toLowerCase() === 'design') {
+ return challenge.submissionViewable === 'true' ? (
+
+
+
+
+
+
+ {moment(s.submissionTime)
+ .format('MMM DD,YYYY HH:mm')}
+
+
+
+ )
+ : (
+
+ ROUND 2 (FINAL) SUBMISSIONS
+
+
+ {
+ sortedSubmissions.map(renderSubmission)
+ }
+
+ {
+ checkpoints.length > 0
+ && (
+
+ ROUND 1 (CHECKPOINT) SUBMISSIONS
+
+ )
+ }
+ {
+ checkpoints.length > 0
+ && (
+
+ {
+ checkpoints.map(renderSubmission)
+ }
+
+ )
+ }
+
+
+ );
+ }
+
+ if (!_.isEmpty(loadingMMSubmissionsForChallengeId)) {
+ return
+ Private Challenge
+
+
+ Submissions are not viewable for this challenge
+
+
+ There are many reason why the submissions may not be viewable, such
+ as the allowance of stock art, or a client's desire to keep the work private.
+
+
+ {
+ isMM ? (
+
+ );
+ }
+}
+
+SubmissionsComponent.defaultProps = {
+ isLoadingSubmissionInformation: false,
+ submissionInformation: null,
+ submissions: [],
+ submissionsSort: {},
+ onSortChange: () => {},
+ onGetFlagImageFail: () => {},
+};
+
+SubmissionsComponent.propTypes = {
+ auth: PT.shape().isRequired,
+ challenge: PT.shape({
+ id: PT.any,
+ checkpoints: PT.arrayOf(PT.object),
+ submissions: PT.arrayOf(PT.object),
+ submissionViewable: PT.string,
+ track: PT.string.isRequired,
+ type: PT.string.isRequired,
+ tags: PT.arrayOf(PT.string),
+ registrants: PT.any,
+ status: PT.string.isRequired,
+ phases: PT.any,
+ }).isRequired,
+ toggleSubmissionHistory: PT.func.isRequired,
+ submissionHistoryOpen: PT.shape({}).isRequired,
+ loadMMSubmissions: PT.func.isRequired,
+ mmSubmissions: PT.arrayOf(PT.shape()).isRequired,
+ loadingMMSubmissionsForChallengeId: PT.string.isRequired,
+ isLoadingSubmissionInformation: PT.bool,
+ submissionInformation: PT.shape(),
+ loadSubmissionInformation: PT.func.isRequired,
+ toggleSubmissionTestcase: PT.func.isRequired,
+ clearSubmissionTestcaseOpen: PT.func.isRequired,
+ submissionTestcaseOpen: PT.shape({}).isRequired,
+ submissions: PT.arrayOf(PT.shape()),
+ submissionsSort: PT.shape({
+ field: PT.string,
+ sort: PT.string,
+ }),
+ onSortChange: PT.func,
+ notFoundCountryFlagUrl: PT.objectOf(PT.bool).isRequired,
+ onGetFlagImageFail: PT.func,
+ hasRegistered: PT.bool.isRequired,
+ unregistering: PT.bool.isRequired,
+ submissionEnded: PT.bool.isRequired,
+ isLegacyMM: PT.bool.isRequired,
+ challengesUrl: PT.string.isRequired,
+ viewAsTable: PT.bool.isRequired,
+ setViewAsTable: PT.func.isRequired,
+ numWinners: PT.number.isRequired,
+};
+
+function mapDispatchToProps(dispatch) {
+ return {
+ toggleSubmissionHistory: index => dispatch(
+ challengeDetailsActions.page.challengeDetails.submissions.toggleSubmissionHistory(index),
+ ),
+ toggleSubmissionTestcase: index => dispatch(
+ challengeDetailsActions.page.challengeDetails.submissions.toggleSubmissionTestcase(index),
+ ),
+ clearSubmissionTestcaseOpen: () => dispatch(
+ challengeDetailsActions.page.challengeDetails.submissions.clearSubmissionTestcaseOpen(),
+ ),
+ };
+}
+
+function mapStateToProps(state) {
+ return {
+ submissionHistoryOpen: state.page.challengeDetails.submissionHistoryOpen,
+ submissionTestcaseOpen: state.page.challengeDetails.submissionTestcaseOpen,
+ isLoadingSubmissionInformation:
+ Boolean(state.challenge.loadingSubmissionInformationForSubmissionId),
+ submissionInformation: state.challenge.submissionInformation,
+ };
+}
+
+const Submissions = connect(
+ mapStateToProps,
+ mapDispatchToProps,
+)(SubmissionsComponent);
+
+export default Submissions;
diff --git a/src/apps/earn/src/components/challenge-detail/Submissions/style.scss b/src/apps/earn/src/components/challenge-detail/Submissions/style.scss
new file mode 100644
index 000000000..24a9f7107
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Submissions/style.scss
@@ -0,0 +1,629 @@
+@import '@earn/styles/mixins';
+
+.container {
+ @include roboto-regular;
+
+ padding-top: 30px;
+ padding-bottom: 50px;
+ margin: 0 41px;
+
+ @include xs-to-sm {
+ padding: 0;
+ margin: 0 16px;
+ }
+
+ div {
+ white-space: nowrap;
+ }
+
+ &.no-view {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 150px 0;
+
+ @include xs-to-sm {
+ padding: (10 * $base-unit) (5 * $base-unit);
+ text-align: center;
+ }
+
+ .title {
+ font-size: 42px;
+ font-weight: 300;
+ line-height: 30px;
+ color: $tc-black;
+ margin-bottom: 10px;
+ text-align: center;
+
+ @include xs-to-sm {
+ font-size: 28px;
+ line-height: 30px;
+ }
+ }
+
+ .subtitle {
+ font-size: 15px;
+ color: $tc-gray-90;
+ line-height: 25px;
+ margin-bottom: 30px;
+
+ @include xs-to-sm {
+ margin-left: 35px;
+ margin-right: 35px;
+ }
+ }
+
+ .desc {
+ font-size: 15px;
+ color: $tc-gray-50;
+ line-height: 25px;
+ width: 500px;
+ white-space: pre-wrap;
+
+ @include xs-to-sm {
+ margin-left: 28px;
+ margin-right: 28px;
+ width: auto;
+ }
+ }
+ }
+
+ &.view {
+ padding: 4 * $base-unit;
+
+ .title {
+ color: $tc-black;
+ margin-top: 20px;
+ margin-bottom: 6px;
+ margin-left: 20px;
+ font-size: 16px;
+ line-height: 22px;
+ font-weight: 500;
+ text-align: center;
+
+ @include xs-to-sm {
+ text-align: center;
+ }
+ }
+
+ .content {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .submission {
+ border: 1px solid $tc-gray-10;
+ margin: 0 14px 25px;
+ width: 227px;
+ font-size: 12px;
+
+ img {
+ width: 225px;
+ height: 226px;
+ }
+ }
+
+ .bottom-info {
+ background: #f7f7f7;
+ display: flex;
+ justify-content: space-between;
+ padding: 8px;
+ line-height: 20px;
+ }
+
+ .links {
+ display: flex;
+ flex-direction: column;
+ font-weight: 500;
+ }
+
+ .handle {
+ color: $tc-orange;
+ }
+ }
+
+ .head {
+ @include barlow-bold;
+
+ font-weight: 600;
+ font-weight: 500;
+ font-size: 11px;
+ line-height: 14px;
+ padding-bottom: 14px;
+ padding-bottom: 17px;
+ color: #767676;
+ background: #fff;
+ text-transform: uppercase;
+ display: flex;
+ border-radius: 5px 5px 0 0;
+
+ @include xs-to-sm {
+ display: none;
+ }
+
+ .col {
+ display: block !important;
+ color: $tc-gray-50;
+
+ &.col-1 {
+ color: black;
+ }
+ }
+ }
+
+ .sub-head-table {
+ @include xs-to-sm {
+ font-weight: 500;
+ font-size: 13px;
+ line-height: 15px;
+ padding-bottom: 17px;
+ padding-top: 14px;
+ color: $tc-gray-50;
+ display: flex !important;
+ margin-top: 20px;
+ min-width: 1920px !important;
+ }
+ }
+
+ .sub-head {
+ font-weight: 500;
+ font-size: 13px;
+ line-height: 15px;
+ padding-bottom: 17px;
+ padding-top: 14px;
+ color: $tc-gray-50;
+ display: flex;
+ border-bottom: 1px solid $tc-gray-10;
+
+ @include xs-to-sm {
+ display: none;
+ }
+
+ .handle {
+ color: $tc-dark-blue-110;
+ }
+ }
+
+ .lock {
+ height: 53px;
+ width: 48px;
+ margin-bottom: 24px;
+ margin-top: 24px;
+ }
+
+ .lock-title {
+ @include barlow-bold;
+
+ font-weight: 600;
+ font-size: 24px;
+ line-height: 28px;
+ text-align: center;
+ color: $tco-black;
+ text-transform: uppercase;
+ }
+
+ .lock-subtitle {
+ @include roboto-medium;
+
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ letter-spacing: 0.5px;
+ text-align: center;
+ color: $tco-black;
+ margin-top: 14px;
+ text-transform: capitalize;
+ }
+
+ .lock-desc {
+ @include roboto-regular;
+
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ text-align: center;
+ color: $tco-black;
+ margin-top: 60px;
+ width: 540px;
+
+ @include xs-to-sm {
+ width: auto;
+ }
+ }
+}
+
+.container.dev {
+ line-height: 50px;
+ text-align: left;
+
+ @include xs-to-sm {
+ line-height: 20px;
+ }
+
+ .col {
+ text-align: left;
+
+ &.col-1 {
+ flex: 20;
+ display: flex;
+ }
+
+ &.col-2 {
+ flex: 20;
+ display: flex;
+ color: $tc-gray-50;
+ padding-left: 10px;
+ }
+
+ &.col-3 {
+ flex: 20;
+ display: flex;
+ color: $tc-gray-50;
+ }
+
+ &.col-4 {
+ flex: 20;
+ color: $tc-gray-50;
+ }
+
+ &.col-5 {
+ flex: 19;
+ color: $tc-gray-50;
+ }
+
+ &.col-6 {
+ flex: 20;
+ color: $tc-gray-50;
+ }
+
+ &.col-7 {
+ flex: 20;
+ color: $tc-gray-50;
+ }
+
+ &.col-8 {
+ flex: 13;
+ color: $tc-gray-50;
+ }
+ }
+
+ .btn-add-submission {
+ text-align: center;
+ }
+
+ .handle {
+ color: $tc-dark-blue;
+ }
+
+ &.mm {
+ @include xs-to-sm {
+ margin: 0 16px;
+ }
+
+ .row {
+ @include xs-to-sm {
+ &:last-child {
+ border-bottom: 0 !important;
+ }
+ }
+ }
+ }
+
+ &.non-mm {
+ .head {
+ @include barlow-bold;
+
+ font-weight: 600;
+ font-weight: 500;
+ font-size: 11px;
+ line-height: 14px;
+ padding-bottom: 17px;
+ padding-top: 14px;
+ color: #767676;
+ background: #fff;
+ border-bottom: 1px solid #e9e9e9;
+
+ * {
+ text-transform: uppercase;
+ }
+
+ @include xs-to-sm {
+ display: none;
+ }
+ }
+
+ .row {
+ @include roboto-medium;
+
+ color: $tc-black;
+ font-weight: 500;
+ display: flex;
+ border-bottom: 1px solid #e9e9e9;
+ font-size: 14px;
+ line-height: 22px;
+ padding-top: 16px;
+ padding-bottom: 15px;
+
+ @include xs-to-sm {
+ flex-direction: column;
+ margin: 0 16px 0 0;
+ border-top: 1px solid #e9e9e9;
+ }
+ }
+
+ .mobile-header {
+ display: none;
+
+ @include xs-to-sm {
+ display: block;
+ margin-top: 16px;
+ font-size: 11px;
+ line-height: 14px;
+
+ @include barlow-bold;
+
+ font-weight: 600;
+ color: #767676;
+ text-align: left;
+ }
+ }
+
+ .col-1 {
+ padding-left: 30px;
+ width: 10%;
+ justify-content: flex-start;
+ display: flex;
+ min-width: 140px;
+
+ @include xs-to-sm {
+ min-width: none;
+ }
+ }
+
+ .col-2 {
+ width: 15%;
+ justify-content: flex-start;
+ display: flex;
+ }
+
+ .col-3 {
+ width: 20.5%;
+ margin-right: auto;
+
+ a {
+ padding-left: 0;
+
+ @include xs-to-sm {
+ padding-left: 0;
+ }
+ }
+
+ @include xs-to-sm {
+ text-align: left;
+ }
+ }
+
+ .col-4 {
+ width: 20.5%;
+ margin-right: auto;
+
+ p {
+ padding-left: 0;
+
+ @include xs-to-sm {
+ padding-left: 0;
+ }
+ }
+
+ @include xs-to-sm {
+ text-align: left;
+ }
+ }
+
+ .col-5 {
+ width: 22%;
+
+ p {
+ padding-right: 60px;
+
+ @include xs-to-sm {
+ padding-right: 0;
+ }
+ }
+
+ @include xs-to-sm {
+ text-align: left;
+ }
+ }
+
+ .col-6 {
+ width: 22%;
+
+ p {
+ padding-right: 55px;
+
+ @include xs-to-sm {
+ padding-right: 0;
+ }
+ }
+
+ @include xs-to-sm {
+ text-align: left;
+ }
+ }
+
+ .handle {
+ color: $tc-black;
+ }
+ }
+}
+
+.tooltip {
+ font-size: 14px;
+ margin: 10px 10px 0 10px;
+ padding-top: 5px;
+}
+
+.block-download-all {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 10px;
+
+ button.download,
+ .download {
+ @include roboto-bold;
+
+ font-size: 15px;
+ line-height: 16px;
+ color: #137d60;
+ background-color: transparent;
+
+ &:hover {
+ color: #0ab88a;
+ }
+
+ &:focus,
+ &:disabled {
+ background-color: transparent;
+ color: #137d60;
+ }
+
+ &:disabled {
+ pointer-events: none;
+ }
+
+ &.MM {
+ cursor: pointer;
+ }
+
+ @include xs-to-sm {
+ font-size: 13px;
+ }
+ }
+}
+
+.col-arrow {
+ display: flex;
+ padding-left: 5px;
+
+ :global {
+ svg {
+ margin-bottom: -1px;
+ }
+ }
+}
+
+.col-arrow-is-sorting {
+ :global {
+ g {
+ fill: $tc-dark-blue;
+ }
+ }
+}
+
+.col-arrow-sort-asc {
+ :global {
+ svg {
+ -moz-transform: scale(1, -1);
+ -o-transform: scale(1, -1);
+ -webkit-transform: scale(1, -1);
+ transform: scale(1, -1);
+ }
+ }
+}
+
+.header-sort {
+ @include barlow-bold;
+
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ border: none;
+ outline: none;
+ font: inherit;
+ color: inherit;
+ padding: 0;
+ background: transparent;
+ font-size: 11px;
+ line-height: 14px;
+
+ &:focus,
+ &:hover {
+ color: $tc-black;
+ font-weight: 700;
+ }
+}
+
+.level-1 {
+ color: $member-gray !important;
+}
+
+.level-2 {
+ color: $member-green !important;
+}
+
+.level-3 {
+ color: $member-blue !important;
+}
+
+.level-4 {
+ color: $member-yellow !important;
+}
+
+.level-5 {
+ color: $member-red !important;
+}
+
+.loading {
+ margin-top: 30px;
+}
+
+.bottom-line {
+ display: none;
+
+ @include xs-to-sm {
+ display: block;
+ width: 100%;
+ border-top: 1px solid #e9e9e9 !important;
+ margin: 16px 16px 0 16px;
+ }
+}
+
+.view-as {
+ display: none;
+
+ @include xs-to-sm {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 30px;
+ margin-bottom: -15px;
+ }
+
+ span.title {
+ @include roboto-bold;
+
+ font-weight: 500;
+ font-size: 11px;
+ line-height: 10px;
+ color: $listing-placeholder-gray;
+ display: flex;
+ margin-right: 8px;
+ margin-top: 10px;
+ }
+
+ .table-icon {
+ margin-right: 15px;
+ }
+
+ .list-icon {
+ margin-right: 10px;
+ }
+}
+
+.view-as-table {
+ overflow-y: scroll;
+ margin-top: 20px;
+ margin-right: 15px;
+}
diff --git a/src/apps/earn/src/components/challenge-detail/Tags/BaseTag.jsx b/src/apps/earn/src/components/challenge-detail/Tags/BaseTag.jsx
new file mode 100644
index 000000000..18430fdec
--- /dev/null
+++ b/src/apps/earn/src/components/challenge-detail/Tags/BaseTag.jsx
@@ -0,0 +1,62 @@
+/**
+ * This component provide a standard button / button-like link:
+ * - When disabled, it renders as
+ View as
+ {
+ viewAsTable ? (
+
+ setViewAsTable(false)} />
+ setViewAsTable(true)} />
+
+ ) : (
+
+ setViewAsTable(false)} />
+ setViewAsTable(true)} />
+
+ )
+ }
+
+ ) : null
+ }
+
+ {
+ ((numWinners > 0 || challenge.status === CHALLENGE_STATUS.COMPLETED)
+ && (isMM || isRDM) && isLoggedIn) && (
+ { toggleSubmissionHistory(index); }}
+ openHistory={(submissionHistoryOpen[index.toString()] || false)}
+ isLoadingSubmissionInformation={isLoadingSubmissionInformation}
+ submissionInformation={submissionInformation}
+ onShowPopup={this.onHandleInformationPopup}
+ getFlagFirstTry={this.getFlagFirstTry}
+ onGetFlagImageFail={onGetFlagImageFail}
+ submissionDetail={submission}
+ viewAsTable={viewAsTable}
+ numWinners={numWinners}
+ auth={auth}
+ isLoggedIn={isLoggedIn}
+ />
+ ))
+ )
+ }
+ {
+ !isMM && (
+ sortedSubmissions.map(s => (
+
+ {isMM && (
+
+
+
+ )
+ }
+ {
+ !isMM && (
+
+ {
+ !isF2F && !isBugHunt && (
+
+ )
+ }
+
+
+
+
+
+ )
+ }
+ {
+ isMM && (
+
+
+ )
+ }
+ {
+ isMM && (
+ sortedSubmissions.map((submission, index) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ACTIONS
+
+
+ {
+ !isF2F && !isBugHunt && (
+
+
+ )
+ }
+
+ ))
+ )
+ }
+ {
+ isMM &&
+ }
+ RATING
+
+ { (s.registrant && !_.isNil(s.registrant.rating)) ? s.registrant.rating : '-'}
+
+
+
+ USERNAME
+
+ {_.get(s.registrant, 'memberHandle', '')}
+
+
+
+ SUBMISSION DATE
+ + {moment(s.created).format('MMM DD, YYYY HH:mm')} +
+
+
+ INITIAL SCORE
+ + { + (!_.isEmpty(s.review) && !_.isEmpty(s.review[0]) && s.review[0].score) + ? s.review[0].score.toFixed(2) + : 'N/A' + } +
+
+
+ FINAL SCORE
+ + { + (s.reviewSummation && s.reviewSummation[0].aggregateScore) + ? s.reviewSummation[0].aggregateScore.toFixed(2) + : 'N/A' + } +
+
+
+ Add Submission
+
+
+ )}
+ {
+ isMM && isShowInformation && (
+ ;
+ * - When no "to" prop is passed in, it renders as
+ )}
+ >
+
+
+
+ );
+};
+
+UpdateGigProfile.propTypes = {
+ profile: PT.shape(),
+ onSubmit: PT.func,
+ onClose: PT.func,
+ open: PT.bool,
+};
+
+const mapStateToProps = (state) => ({
+ countries: state.lookup.countries,
+});
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => ({
+ ...ownProps,
+ ...stateProps,
+ ...dispatchProps,
+});
+
+const mapDispatchToProps = {
+ getAllCountries: actions.lookup.getAllCountries,
+};
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps,
+ mergeProps
+)(UpdateGigProfile);
diff --git a/src/apps/earn/src/containers/MyGigs/modals/UpdateGigProfile/styles.scss b/src/apps/earn/src/containers/MyGigs/modals/UpdateGigProfile/styles.scss
new file mode 100644
index 000000000..b3f300721
--- /dev/null
+++ b/src/apps/earn/src/containers/MyGigs/modals/UpdateGigProfile/styles.scss
@@ -0,0 +1,161 @@
+@import "../../../../styles/variables";
+@import "../../../../styles/mixins";
+
+.title,
+.text {
+ text-align: center
+}
+
+.title {
+ @include barlow-condensed-medium;
+
+ margin: 40px 0 16px;
+ font-size: 34px;
+ line-height: 38px;
+}
+
+.text {
+ @include roboto-medium;
+
+ font-size: $font-size-sm;
+ line-height: $line-height-base;
+
+ &.warnings {
+ color: $tc-red;
+ }
+}
+
+.profile {
+ display: flex;
+ margin: 40px 0;
+}
+
+.member {
+ flex: none;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 260px;
+ min-height: 410px;
+ padding: 20px 15px;
+ margin-right: 40px;
+ line-height: $line-height-base;
+ text-align: center;
+ background-color: $tc-blue-light4;
+ border-radius: $border-radius;
+
+ .photo {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+
+ .handle {
+ @include roboto-medium;
+
+ font-size: $font-size-sm;
+ color: $tc-link-blue;
+ }
+
+ .name {
+ @include roboto-medium;
+
+ margin-bottom: 4px;
+ line-height: 26px;
+ }
+
+ .email {
+ margin-bottom: 26px;
+ font-size: $font-size-sm;
+ word-break: break-all;
+ }
+
+ .status {
+ display: flex;
+ align-items: center;
+ margin-top: auto;
+ margin-bottom: 30px;
+
+ .dropdown {
+ position: relative;
+ width: 128px;
+ margin-right: 7px;
+
+ @include error-msg-not-change-container-height;
+ @include dropdown-show-label;
+ }
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ }
+ }
+}
+
+.details {
+ display: flex;
+ flex-wrap: wrap;
+ .resume-details {
+ font-size: 14px;
+ line-height: 18px;
+ & > a {
+ color: blue;
+ text-decoration: underline;
+ }
+ }
+
+ .resume {
+ align-self: flex-start;
+ }
+ .city,
+ .country
+ {
+ align-self: center;
+ }
+ .phone {
+ align-self: flex-end;
+ }
+
+ .resume,
+ .phone {
+ width: 100%;
+ }
+ .city,
+ .country {
+ width: 50%;
+ }
+
+ .city {
+ padding-right: 10px;
+ }
+ .country {
+ padding-left: 10px;
+ }
+
+
+ .resume,
+ .city,
+ .country,
+ .phone {
+ @include error-msg-not-change-container-height;
+ @include dropdown-show-label;
+ @include textinput-show-label;
+ }
+
+ .country {
+ :global(.Select-menu) {
+ max-height: 180px;
+ }
+ }
+}
+
+.footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+
+ .link {
+ font-size: 13px;
+ color: $tc-link-blue;
+ }
+}
diff --git a/src/apps/earn/src/containers/MyGigs/modals/UpdateGigProfile/tooltips/StatusTooltip/index.jsx b/src/apps/earn/src/containers/MyGigs/modals/UpdateGigProfile/tooltips/StatusTooltip/index.jsx
new file mode 100644
index 000000000..97054ab04
--- /dev/null
+++ b/src/apps/earn/src/containers/MyGigs/modals/UpdateGigProfile/tooltips/StatusTooltip/index.jsx
@@ -0,0 +1,37 @@
+import PT from "prop-types";
+import { keys } from "lodash";
+
+import { Tooltip } from "~/libs/ui";
+
+import { GIG_STATUS_TOOLTIP } from "../../../../../../constants";
+
+import styles from "./styles.scss";
+
+const StatusTooltip = ({ children }) => {
+ const Content = () => (
+ + Uploading a resume will change your resume for all jobs that you apply + to. +
+
+
+
+
+
+
+
+ {profile.handle}
+
+
+ {profile.firstName} {profile.lastName}
+
+ {profile.email}
+
+
+
+
+
+
+
+ {profile && profile.existingResume && (
+
+
+ Please upload your resume/CV. Double-check that all of your tech
+ skills are listed in your resume/CV.
+
+ {profile.existingResume.filename}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ );
+
+ return (
+ -
+ {keys(GIG_STATUS_TOOLTIP).map((status) => (
+
-
+ ++{status}+{GIG_STATUS_TOOLTIP[status]}+
+ ))}
+
+
+ Your resume has been successfuly updated.
+
+
+ );
+};
+
+GigsFilter.propTypes = {
+ gigStatus: PT.string,
+ gigsStatuses: PT.arrayOf(PT.string),
+ updateGigFilter: PT.func,
+ openJobsCount: PT.number,
+};
+
+export default GigsFilter;
diff --git a/src/apps/earn/src/containers/MyGigsFilter/GigsFilter/styles.scss b/src/apps/earn/src/containers/MyGigsFilter/GigsFilter/styles.scss
new file mode 100644
index 000000000..e2f9a7918
--- /dev/null
+++ b/src/apps/earn/src/containers/MyGigsFilter/GigsFilter/styles.scss
@@ -0,0 +1,56 @@
+@import "../../../styles/variables";
+@import "../../../styles/mixins";
+
+$filter-padding-x: 4 * $base-unit;
+$filter-padding-y: 3 * $base-unit;
+
+.filter {
+ padding: $filter-padding-y $filter-padding-x;
+ font-size: $font-size-sm;
+}
+
+.buckets {
+ margin-bottom: 18px;
+
+ > h3 {
+ margin-bottom: 15px;
+ font-size: inherit;
+ line-height: 19px;
+ }
+}
+.count-badge {
+ display: inline-block;
+ margin: -2px 0 0 $base-unit;
+ padding: 2px 5px 0;
+ font-weight: bold;
+ font-size: 11px;
+ line-height: 14px;
+ text-align: center;
+ color: white;
+ vertical-align: middle;
+ background: #EF476F;
+ border-radius: 13px;
+}
+
+.buckets {
+ &.vertical-list {
+ > div > div {
+ margin: $base-unit 0;
+ }
+ }
+ :global {
+ .count-badge {
+ display: inline-block;
+ margin: -2px 0 0 $base-unit;
+ padding: 2px 5px 0;
+ font-weight: bold;
+ font-size: 11px;
+ line-height: 14px;
+ text-align: center;
+ color: white;
+ vertical-align: middle;
+ background: #EF476F;
+ border-radius: 13px;
+ }
+ }
+}
diff --git a/src/apps/earn/src/containers/MyGigsFilter/index.jsx b/src/apps/earn/src/containers/MyGigsFilter/index.jsx
new file mode 100644
index 000000000..8b3031917
--- /dev/null
+++ b/src/apps/earn/src/containers/MyGigsFilter/index.jsx
@@ -0,0 +1,63 @@
+import React from "react";
+import PT from "prop-types";
+import { connect } from "react-redux";
+import GigsFilter from "./GigsFilter";
+import actions from "../../actions";
+import { updateQuery } from "../../utils/url";
+import * as constants from "../../constants";
+
+const MyGigsFilter = ({
+ gigStatus,
+ gigsStatuses,
+ updateGigFilter,
+ openJobsCount,
+}) => (
+
+ {
+ const filterChange = {
+ status: utils.getSelectedRadioOption(newBucketOptions).label,
+ };
+ updateGigFilter(filterChange);
+ }}
+ />
+
+
+
+ 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 _ from 'lodash';
+import React from 'react';
+import PT from 'prop-types';
+
+import config from '@earn/config';
+import { COMPETITION_TRACKS } from '@earn/utils/tc';
+import { styled as styledCss } from "@earn/utils";
+import { Button, LoadingCircles } from '~/libs/ui';
+
+import FilestackFilePicker from '../FilestackFilePicker';
+import Uploading from '../Uploading';
+
+import styles from "./styles.scss";
+
+const styled = styledCss(styles)
+
+/**
+ * Submissions Page shown to develop challengers.
+ */
+class Submit extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.reset = this.reset.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.retry = this.retry.bind(this);
+ this.back = this.back.bind(this);
+ this.getFormData = this.getFormData.bind(this);
+ }
+
+ componentWillUnmount() {
+ const { resetForm } = this.props;
+ resetForm();
+ }
+
+ getFormData() {
+ const {
+ submissionFilestackData: sub,
+ challengeId,
+ userId,
+ } = this.props;
+
+ const subType = this.getSubDetails();
+
+ const formData = new FormData();
+ formData.append('url', sub.fileUrl);
+ formData.append('type', subType);
+ formData.append('memberId', userId);
+ formData.append('challengeId', challengeId);
+ if (sub.fileType) {
+ formData.append('fileType', sub.fileType);
+ }
+ return formData;
+ }
+
+ // returns both submission type and phase id
+ getSubDetails() {
+ const {
+ phases,
+ } = this.props;
+ const checkpoint = _.find(phases, {
+ name: 'Checkpoint Submission',
+ });
+ const submission = _.find(phases, {
+ name: 'Submission',
+ });
+ const finalFix = _.find(phases, {
+ name: 'Final Fix',
+ });
+ let subType;
+
+ // Submission type logic
+ if (checkpoint && checkpoint.isOpen) {
+ subType = 'Checkpoint Submission';
+ } else if (checkpoint && !checkpoint.isOpen && submission && submission.isOpen) {
+ subType = 'Contest Submission';
+ } else if (finalFix && finalFix.isOpen) {
+ subType = 'Studio Final Fix Submission';
+ } else {
+ subType = 'Contest Submission';
+ }
+
+ return subType;
+ }
+
+ reset() {
+ const { resetForm, setAgreed } = this.props;
+ setAgreed(false);
+ resetForm();
+ }
+
+ /* User has clicked submit, prepare formData for the V2 API and start upload */
+ handleSubmit(e) {
+ const { submitForm } = this.props;
+ e.preventDefault();
+ submitForm(this.getFormData());
+ }
+
+ /* User has clicked to go retry the submission after an error */
+ retry() {
+ const { submitForm } = this.props;
+ submitForm(this.getFormData());
+ }
+
+ /* User has clicked to go back to a new submission after a successful submit */
+ back() {
+ const { resetForm } = this.props;
+ resetForm();
+ }
+
+ render() {
+ const {
+ userId,
+ challengeId,
+ challengeName,
+ challengesUrl,
+ communitiesList,
+ errorMsg,
+ isSubmitting,
+ submitDone,
+ track,
+ uploadProgress,
+ agreed,
+ setAgreed,
+ filePickers,
+ setFilePickerError,
+ setFilePickerFileName,
+ setFilePickerUploadProgress,
+ setFilePickerDragged,
+ setSubmissionFilestackData,
+ submitForm,
+ groups,
+ } = this.props;
+
+ const id = 'file-picker-submission';
+
+ let isLoadingCommunitiesList = false;
+ let isChallengeBelongToTopgearGroup = false;
+ // check if challenge belong to any group
+ if (!_.isEmpty(groups)) {
+ // check if communitiesList is loaded
+ if (communitiesList.timestamp > 0) {
+ const topGearCommunity = _.find(communitiesList.data, { mainSubdomain: 'topgear' });
+ if (topGearCommunity) {
+ // check the group info match with group list
+ _.forOwn(groups, (value) => {
+ if (value && _.includes(topGearCommunity.groupIds, value)) {
+ isChallengeBelongToTopgearGroup = true;
+ return false;
+ }
+ return true;
+ });
+ }
+ } else {
+ isLoadingCommunitiesList = true;
+ }
+ }
+
+ // 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,
+ });
+
+ const disabled = !agreed || !!fpState.error || !fpState.fileName;
+
+ return (
+ (!isSubmitting && !submitDone && !errorMsg) ? (
+ Component
+ *
+ * Description:
+ * Full-page component that shows upload progress and informs the user
+ * if there were errors, or that the submission was completed successfully.
+ */
+import React from 'react';
+import PT from 'prop-types';
+
+import { ReactComponent as UploadSuccess } from '@earn/assets/images/upload-success.svg';
+import { ReactComponent as UploadLoading } from '@earn/assets/images/upload-loading.svg';
+import { ReactComponent as UploadFail } from '@earn/assets/images/upload-fail.svg';
+import { COMPETITION_TRACKS } from '@earn/utils/tc';
+import { styled as styledCss } from "@earn/utils";
+import { LinkButton, Button } from '~/libs/ui';
+
+import styles from "./styles.scss";
+const styled = styledCss(styles)
+
+const Uploading = ({
+ challengeId,
+ challengeName,
+ challengesUrl,
+ error,
+ isSubmitting,
+ submitDone,
+ reset,
+ retry,
+ track,
+ uploadProgress,
+ back,
+}) => (
+
+ *
+ * Description:
+ * Connects the Redux store to the Challenge Submissions display components.
+ * Passes the relevent state and setters as properties to the UI components.
+ */
+import React from 'react';
+import PT from 'prop-types';
+import { connect } from 'react-redux';
+
+ import actions from '@earn/actions/page/submission';
+ import { actions as api } from '@earn/actions';
+ import { isMM } from '@earn/utils/challenge';
+ import { LinkButton, LoadingSpinner } from '~/libs/ui';
+
+ import { ACCESS_DENIED_REASON } from "../../constants";
+ import AccessDenied from "../../components/AccessDenied";
+
+ import SubmissionsPage from './SubmissionPage';
+ /*import { sprig } from '@sprig-technologies/sprig-browser/dist';
+
+ export const Sprig = sprig.configure({
+ environmentId: config.SPRIG_ENVIRONMENT_ID,
+ });*/
+
+ /**
+ * SubmissionsPage Container
+ */
+ class SubmissionsPageContainer extends React.Component {
+ constructor(props) {
+ super(props);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.authInitRef = React.createRef(false);
+ }
+
+ componentDidMount() {
+ const {
+ auth,
+ challengeId,
+ loadChallengeDetails,
+ } = this.props;
+
+ loadChallengeDetails(auth, challengeId);
+ }
+
+ componentWillReceiveProps() {
+ const {
+ auth,
+ challenge,
+ history,
+ loadChallengeDetails,
+ challengeId,
+ } = this.props;
+
+ const { details } = challenge;
+
+ if (details && details.isLegacyChallenge && !history.location.pathname.includes(details.id)) {
+ history.push(`/earn/challenges/${details.id}/submit`, history.state);
+ }
+
+ if (!this.authInitRef.current && auth.isAuthInitialized && !challenge.details) {
+ this.authInitRef.current = true;
+ loadChallengeDetails(auth, challengeId);
+ }
+ }
+
+ /* A child component has called their submitForm() prop, prepare the passed
+ form data for submission and create a submit action */
+ handleSubmit(body) {
+ const {
+ tokenV2,
+ tokenV3,
+ submit,
+ challengeId,
+ challenge,
+ track,
+ } = this.props;
+
+ // On final upload, the survey should appear
+ //Sprig('track', 'onUploadSubmission');
+ submit(tokenV3, tokenV2, challengeId, body, isMM(challenge) ? 'DEVELOP' : track);
+ }
+
+ render() {
+ const {
+ isRegistered,
+ challengeId,
+ challengeName,
+ } = this.props;
+
+ if (!challengeName) {
+ return
+
+
+ Go to Challenge Details
+
+
+
+ );
+ }
+
+ return (
+ = [
+ {
+ children: [
+ {
+ element:
+ * @param {Object} map Key value pairs for the new FilePicker state
+ * @return New state
+ */
+function fpSet(state, id, map) {
+ let found = false;
+
+ const newFilePickers = state.filePickers.map((fp) => {
+ if (fp.id === id) {
+ found = true;
+ return ({
+ ...fp,
+ ...map,
+ });
+ }
+ return fp;
+ });
+
+ if (found) {
+ return ({ ...state, filePickers: newFilePickers });
+ }
+
+ return ({
+ ...state,
+ filePickers: [
+ ...newFilePickers,
+ { id, ...map },
+ ],
+ });
+}
+
+/**
+ * Creates a new submission reducer with the specified initial state.
+ * @param {Object} initialState Initial state.
+ * @return submission reducer.
+ */
+function create(initialState) {
+ const a = actions.page.submission;
+ return handleActions({
+ [a.submitDone + "_SUCCESS"]: onSubmitDone,
+ [a.submitInit]: onSubmitInit,
+ [a.submitReset]: onSubmitReset,
+ [a.uploadProgress]: onUploadProgress,
+ [a.setAgreed]: (state, action) => ({ ...state, agreed: action.payload }),
+ [a.setFilePickerError]:
+ (state, { payload }) => fpSet(state, payload.id, { error: payload.error }),
+ [a.setFilePickerFileName]:
+ (state, { payload }) => fpSet(state, payload.id, { fileName: payload.fileName }),
+ [a.setFilePickerUploadProgress]:
+ (state, { payload }) => fpSet(state, payload.id, { uploadProgress: payload.progress }),
+ [a.setFilePickerDragged]:
+ (state, { payload }) => fpSet(state, payload.id, { dragged: payload.dragged }),
+ [a.updateNotesLength]: (state, action) => ({ ...state, notesLength: action.payload }),
+ [a.setSubmissionFilestackData]:
+ (state, { payload }) => ({ ...state, submissionFilestackData: payload }),
+ }, _.defaults(_.clone(initialState) || {}, {
+ isSubmitting: false,
+ submitDone: false,
+ submitErrorMsg: '',
+ agreed: false,
+ notesLength: 0,
+ uploadProgress: 0,
+ filePickers: [],
+ submissionFilestackData: {
+ challengeId: '',
+ fileUrl: '',
+ filename: '',
+ mimetype: '',
+ size: 0,
+ key: '',
+ container: '',
+ },
+ }));
+}
+
+export function factory() {
+ // Server-side rendering not implemented yet
+ return Promise.resolve(combineReducers(create()));
+}
+
+export default combineReducers(create());
diff --git a/src/apps/earn/src/reducers/page/submission_management.js b/src/apps/earn/src/reducers/page/submission_management.js
new file mode 100644
index 000000000..70fd492c8
--- /dev/null
+++ b/src/apps/earn/src/reducers/page/submission_management.js
@@ -0,0 +1,67 @@
+/**
+ * TODO: Most probably it is not fully functional, I believe a piece of
+ * these functionality still should be moved to `topcoder-react-lib`.
+ */
+
+import _ from 'lodash';
+import actions from '@earn/actions/page/submission_management';
+import { handleActions } from "redux-actions";
+
+function onShowDetails(state, { payload: id }) {
+ const showDetails = _.clone(state.showDetails);
+ if (showDetails[id]) delete showDetails[id];
+ else showDetails[id] = true;
+ return { ...state, showDetails };
+}
+
+function create(initialState = {}) {
+ const a = actions.page.submissionManagement;
+ return handleActions({
+ [a.showDetails]: onShowDetails,
+
+ [a.confirmDelete]: (state, { payload }) => ({
+ ...state,
+ showModal: true,
+ toBeDeletedId: payload,
+ }),
+
+ [a.cancelDelete]: state => ({
+ ...state,
+ showModal: false,
+ toBeDeletedId: '',
+ deletionSucceed: false,
+ }),
+
+ 'SMP/DELETE_SUBMISSION_INIT': (state, { payload }) => (console.log('HEREEE'), {
+ ...state,
+ deletingSubmission: true,
+ deletionSucceed: false,
+ toBeDeletedId: payload,
+ }),
+
+ 'SMP/DELETE_SUBMISSION_FAIL': state => ({
+ ...state,
+ deletingSubmission: false,
+ showModal: false,
+ toBeDeletedId: '',
+ deletionSucceed: true,
+ }),
+
+ 'SMP/DELETE_SUBMISSION_DONE_SUCCESS': (state, { payload }) => ({
+ ...state,
+ deletingSubmission: false,
+ showModal: false,
+ toBeDeletedId: payload,
+ deletionSucceed: true,
+ }),
+
+ }, _.defaults(initialState, {
+ showDetails: {},
+ showModal: false,
+ toBeDeletedId: '',
+ deletionSucceed: false,
+ deletingSubmission: false
+ }));
+}
+
+export default create();
diff --git a/src/apps/earn/src/reducers/submission.js b/src/apps/earn/src/reducers/submission.js
new file mode 100644
index 000000000..d2ffbeaad
--- /dev/null
+++ b/src/apps/earn/src/reducers/submission.js
@@ -0,0 +1,170 @@
+import { handleActions } from "redux-actions";
+import logger, { fireErrorMessage } from "../utils/logger";
+
+const defaultState = {
+ isSubmitting: false,
+ submitDone: false,
+ submitErrorMsg: "",
+ agreed: false,
+ uploadProgress: 0,
+ filePickers: [],
+ submissionFilestackData: {
+ challengeId: "",
+ fileUrl: "",
+ filename: "",
+ mimetype: "",
+ size: 0,
+ key: "",
+ container: "",
+ },
+};
+
+function onSubmitDone(state, { error, payload }) {
+ if (error) {
+ logger.error("Failed to submit for the challenge");
+ fireErrorMessage(
+ "ERROR: Failed to submit!",
+ "Please, try to submit from https://software.topcoder.com or email you submission to support@topcoder.com"
+ );
+
+ return {
+ ...state,
+ submitErrorMsg: "Failed to submit",
+ isSubmitting: false,
+ submitDone: false,
+ };
+ }
+
+ if (payload.message) {
+ /* payload message is present when upload of file fails due to any reason so
+ * handle this special case for error */
+ logger.error(`Failed to submit for the challenge - ${payload.message}`);
+ return {
+ ...state,
+ submitErrorMsg: payload.message || "Failed to submit",
+ isSubmitting: false,
+ submitDone: false,
+ };
+ }
+
+ /* TODO: I am not sure, whether this code is just wrong, or does it handle
+ * only specific errors, returned from API for design submissions? I am
+ * adding a more generic failure handling code just above. */
+ if (payload.result && !payload.result.success) {
+ return {
+ ...state,
+ submitErrorMsg: payload.result.content.message || "Failed to submit",
+ isSubmitting: false,
+ submitDone: false,
+ };
+ }
+
+ return {
+ ...state,
+ ...payload,
+ isSubmitting: false,
+ submitDone: true,
+ };
+}
+
+function onSubmitInit(state) {
+ return {
+ ...state,
+ isSubmitting: true,
+ submitDone: false,
+ submitErrorMsg: "",
+ uploadProgress: 0,
+ };
+}
+
+function onSubmitReset(state) {
+ return {
+ ...state,
+ isSubmitting: false,
+ submitDone: false,
+ submitErrorMsg: "",
+ uploadProgress: 0,
+ };
+}
+
+function onUploadProgress(state, { payload }) {
+ return {
+ ...state,
+ uploadProgress: payload,
+ };
+}
+
+/**
+ * Returns a new state with the filePicker updated according to map, or added if not existing
+ * @param {Object} state Current state
+ * @param {String} id ID of the
+ * @param {Object} map Key value pairs for the new FilePicker state
+ * @return New state
+ */
+function fpSet(state, id, map) {
+ let found = false;
+
+ const newFilePickers = state.filePickers.map((fp) => {
+ if (fp.id === id) {
+ found = true;
+ return {
+ ...fp,
+ ...map,
+ };
+ }
+ return fp;
+ });
+
+ if (found) {
+ return { ...state, filePickers: newFilePickers };
+ }
+
+ return {
+ ...state,
+ filePickers: [...newFilePickers, { id, ...map }],
+ };
+}
+
+function onSetAgreed(state, { payload }) {
+ return { ...state, agreed: payload };
+}
+
+function onSetFilePickerError(state, { payload }) {
+ return fpSet(state, payload.id, { error: payload.error });
+}
+
+function onSetFilePickerFileName(state, { payload }) {
+ return fpSet(state, payload.id, { fileName: payload.fileName });
+}
+
+function onSetFilePickerUploadProgress(state, { payload }) {
+ return fpSet(state, payload.id, { uploadProgress: payload.progress });
+}
+
+function onSetFilePickerDragged(state, { payload }) {
+ return fpSet(state, payload.id, { dragged: payload.dragged });
+}
+
+function onSetSubmissionFilestackData(state, { payload }) {
+ return { ...state, submissionFilestackData: payload };
+}
+
+const reducer = handleActions(
+ {
+ SUBMIT: {
+ SUBMIT_DONE: onSubmitDone,
+ SUBMIT_INIT: onSubmitInit,
+ SUBMIT_RESET: onSubmitReset,
+ UPLOAD_PROGRESS: onUploadProgress,
+ SET_AGREED: onSetAgreed,
+ SET_FILE_PICKER_ERROR: onSetFilePickerError,
+ SET_FILE_PICKER_FILE_NAME: onSetFilePickerFileName,
+ SET_FILE_PICKER_UPLOAD_PROGRESS: onSetFilePickerUploadProgress,
+ SET_FILE_PICKER_DRAGGED: onSetFilePickerDragged,
+ SET_SUBMISSION_FILESTACK_DATA: onSetSubmissionFilestackData,
+ },
+ },
+ defaultState
+);
+
+export default reducer;
diff --git a/src/apps/earn/src/reducers/submissionManagement.js b/src/apps/earn/src/reducers/submissionManagement.js
new file mode 100644
index 000000000..7219b2731
--- /dev/null
+++ b/src/apps/earn/src/reducers/submissionManagement.js
@@ -0,0 +1,104 @@
+import { handleActions } from "redux-actions";
+import _ from "lodash";
+import logger from "../utils/logger";
+
+const defaultState = {
+ showDetails: {},
+ showModal: false,
+ toBeDeletedId: "",
+ deletingSubmission: false,
+ mySubmissions: [],
+ isLoadingMySubmissions: false,
+};
+
+function onShowDetails(state, { payload: id }) {
+ const showDetails = _.clone(state.showDetails);
+ if (showDetails[id]) delete showDetails[id];
+ else showDetails[id] = true;
+ return { ...state, showDetails };
+}
+
+function onConfirmDelete(state, { payload }) {
+ return {
+ ...state,
+ showModal: true,
+ toBeDeletedId: payload,
+ };
+}
+
+function onCancelDelete(state) {
+ return {
+ ...state,
+ showModal: false,
+ toBeDeletedId: "",
+ };
+}
+
+function onDeleteSubmissionInit(state) {
+ return {
+ ...state,
+ showModal: false,
+ deletingSubmission: true,
+ };
+}
+
+function onDeleteSubmissionDone(state, { error, payload }) {
+ if (error) {
+ return {
+ ...state,
+ deletingSubmission: false,
+ };
+ }
+
+ const deletedSubmissionId = payload;
+ return {
+ ...state,
+ deletingSubmission: false,
+ showModal: false,
+ toBeDeletedId: "",
+ mySubmissions: state.mySubmissions.filter(
+ (submission) => submission.id !== deletedSubmissionId
+ ),
+ };
+}
+
+function onGetMySubmissionsInit(state) {
+ return {
+ ...state,
+ isLoadingMySubmissions: true,
+ };
+}
+
+function onGetMySubmissionsDone(state, { error, payload }) {
+ if (error) {
+ logger.error("Failed to get user's submissions for the challenge", payload);
+ return {
+ ...state,
+ mySubmissions: [],
+ isLoadingMySubmissions: false,
+ };
+ }
+
+ return {
+ ...state,
+ mySubmissions: [...payload],
+ isLoadingMySubmissions: false,
+ };
+}
+
+const reducer = handleActions(
+ {
+ MY_SUBMISSIONS: {
+ SHOW_DETAILS: onShowDetails,
+ CONFIRM_DELETE: onConfirmDelete,
+ CANCEL_DELETE: onCancelDelete,
+ DELETE_SUBMISSION_INIT: onDeleteSubmissionInit,
+ DELETE_SUBMISSION_DONE_SUCCESS: onDeleteSubmissionDone,
+ GET_MY_SUBMISSIONS_INIT: onGetMySubmissionsInit,
+ GET_MY_SUBMISSIONS_DONE_SUCCESS: onGetMySubmissionsDone,
+ },
+ },
+ defaultState
+);
+
+export default reducer;
diff --git a/src/apps/earn/src/reducers/terms.js b/src/apps/earn/src/reducers/terms.js
new file mode 100644
index 000000000..c953f19f3
--- /dev/null
+++ b/src/apps/earn/src/reducers/terms.js
@@ -0,0 +1,319 @@
+/**
+ * Reducer for state.terms.
+ */
+
+import _ from "lodash";
+import actions from "../actions/terms";
+import logger from "../utils/logger";
+import { handleActions } from "redux-actions";
+
+/**
+ * sort terms by agreed status
+ * @param {Array} terms terms to sort
+ * @return {Array} sorted terms
+ */
+function sortTerms(terms) {
+ return _.sortBy(terms, (t) => (t.agreed ? 0 : 1));
+}
+
+/**
+ * Handles TERMS/GET_TERMS_DONE action.
+ * Note, that it silently discards received terms if the entity of received data
+ * mismatches the one stored in loadingTermsForEntity
+ * of the state.
+ * @param {Object} state
+ * @param {Object} action
+ * @return {Object} New state.
+ */
+function onGetTermsDone(state, action) {
+ if (action.error) {
+ logger.error("Failed to get terms!", action.payload);
+ return {
+ ...state,
+ terms: [],
+ getTermsFailure: action.error,
+ loadingTermsForEntity: null,
+ };
+ }
+
+ if (!_.isEqual(action.payload.entity, state.loadingTermsForEntity)) {
+ return state;
+ }
+
+ return {
+ ...state,
+ entity: action.payload.entity,
+ terms: sortTerms(action.payload.terms),
+ getTermsFailure: false,
+ loadingTermsForEntity: null,
+ };
+}
+
+/**
+ * Handles TERMS/GET_TERMS_INIT action.
+ * @param {Object} state
+ * @param {Object} action
+ * @return {Object} New state.
+ */
+function onGetTermsInit(state, action) {
+ return {
+ ...state,
+ getTermsFailure: false,
+ loadingTermsForEntity: action.payload,
+ terms: [],
+ entity: action.payload,
+ };
+}
+
+/**
+ * Handles TERMS/GET_TERM_DETAILS_DONE action.
+ * Note, that it silently discards received details if the termId of received
+ * mismatches the one stored in loadingDetailsForTermId field
+ * of the state.
+ * @param {Object} state
+ * @param {Object} action
+ * @return {Object} New state.
+ */
+function onGetTermDetailsDone(state, action) {
+ if (action.error) {
+ logger.error("Failed to get term details!", action.payload);
+ return {
+ ...state,
+ details: null,
+ getTermDetailsFailure: action.payload,
+ loadingDetailsForTermId: "",
+ };
+ }
+
+ if (_.toString(action.payload.termId) !== state.loadingDetailsForTermId) {
+ return state;
+ }
+
+ return {
+ ...state,
+ ...action.payload,
+ getTermDetailsFailure: false,
+ loadingDetailsForTermId: "",
+ };
+}
+
+/**
+ * Handles TERMS/GET_DOCU_SIGN_URL_DONE action.
+ * Note, that it silently discards received url if the templateId of received
+ * mismatches the one stored in loadingDocuSignUrl field
+ * of the state.
+ * @param {Object} state
+ * @param {Object} action
+ * @return {Object} New state.
+ */
+function onGetDocuSignUrlDone(state, action) {
+ if (action.error) {
+ logger.error("Failed to get docu sign url!", action.payload);
+ return {
+ ...state,
+ docuSignUrl: "",
+ getDocuSignUrlFailure: action.payload,
+ loadingDocuSignUrl: "",
+ };
+ }
+
+ if (_.toString(action.payload.templateId) !== state.loadingDocuSignUrl) {
+ return state;
+ }
+ return {
+ ...state,
+ ...action.payload,
+ getDocuSignUrlFailure: false,
+ loadingDocuSignUrl: "",
+ };
+}
+
+/**
+ * Handles TERMS/AGREE_TERM_DONE action.
+ * Note, that it silently discards received result if the termId of received
+ * mismatches the one stored in agreeingTerm field
+ * of the state.
+ * @param {Object} state
+ * @param {Object} action
+ * @return {Object} New state.
+ */
+function onAgreeTermDone(state, action) {
+ if (action.error) {
+ logger.error("Failed to agree term!", action.payload);
+ return {
+ ...state,
+ agreeTermFailure: action.payload,
+ agreeingTerm: "",
+ };
+ }
+
+ if (_.toString(action.payload.termId) !== state.agreeingTerm) {
+ return state;
+ }
+ if (action.payload.success) {
+ const terms = _.cloneDeep(state.terms);
+ const term = _.find(terms, ["id", action.payload.termId]);
+ term.agreed = true;
+ const selectedTerm = _.find(terms, (t) => !t.agreed);
+ return {
+ ...state,
+ terms,
+ selectedTerm,
+ agreeTermFailure: false,
+ agreeingTerm: "",
+ };
+ }
+ return {
+ ...state,
+ agreeTermFailure: false,
+ agreeingTerm: "",
+ };
+}
+
+/**
+ * Opens the specified instance of terms modal + selects the terms to show in
+ * there, although the exact functioning of that functionality was not
+ * documented, thus has to be tracked.
+ * @param {Object} state
+ * @param {Object} action
+ * @return {Object} New state.
+ */
+function onOpenTermsModal(state, action) {
+ const { modalInstanceUuid } = action.payload;
+
+ let { selectedTerm } = action.payload;
+ if (!selectedTerm) {
+ selectedTerm = _.find(state.terms, (t) => !t.agreed) || state.terms[0];
+ }
+
+ return {
+ ...state,
+ openTermsModalUuid: modalInstanceUuid,
+ selectedTerm,
+ viewOnly: Boolean(action.payload.selectedTerm),
+ };
+}
+
+/**
+ * Closes the specified terms modal, if necessary.
+ * @param {Object} state
+ * @param {Object} action
+ * @return {Object} New state.
+ */
+function onCloseTermsModal(state, { payload }) {
+ if (
+ payload !== state.openTermsModalUuid &&
+ state.openTermsModalUuid !== "ANY"
+ )
+ return state;
+ return { ...state, openTermsModalUuid: "" };
+}
+
+/**
+ * Handles TERMS/SIGN_DOCU action.
+ * @param {Object} state
+ * @param {Object} action
+ * @return {Object} New state.
+ */
+function onSignDocu(state, action) {
+ const terms = _.cloneDeep(state.terms);
+ const term = _.find(terms, ["id", action.payload]);
+ term.agreed = true;
+ const selectedTerm = _.find(terms, (t) => !t.agreed);
+ return {
+ ...state,
+ terms,
+ selectedTerm,
+ };
+}
+
+/**
+ * Handles TERMS/CHECK_STATUS_DONE action.
+ * @param {Object} state
+ * @param {Object} action
+ * @return {Object} New state.
+ */
+function onCheckStatusDone(state, action) {
+ if (action.error) {
+ logger.error("Check terms status failed!", action.payload);
+ return {
+ ...state,
+ checkingStatus: false,
+ checkStatusError: action.payload,
+ canRegister: false,
+ };
+ }
+ const canRegister = _.every(action.payload, "agreed");
+ const selectedTerm = _.find(action.payload, (t) => !t.agreed);
+ return {
+ ...state,
+ checkingStatus: false,
+ checkStatusError: false,
+ canRegister,
+ terms: sortTerms(action.payload),
+ selectedTerm,
+ };
+}
+
+/**
+ * Creates a new Terms reducer with the specified initial state.
+ * @param {Object} initialState Initial state.
+ * @return Terms reducer.
+ */
+function create(initialState) {
+ return handleActions(
+ {
+ [actions.terms.getTermsInit]: onGetTermsInit,
+ [actions.terms.getTermsDone + "_SUCCESS"]: onGetTermsDone,
+ [actions.terms.getTermDetailsInit]: (state, { payload }) => ({
+ ...state,
+ getTermDetailsFailure: false,
+ loadingDetailsForTermId: payload,
+ details: null,
+ termId: payload,
+ }),
+ [actions.terms.getTermDetailsDone + "_SUCCESS"]: onGetTermDetailsDone,
+ [actions.terms.getDocuSignUrlInit]: (state, { payload }) => ({
+ ...state,
+ getDocuSignUrlFailure: false,
+ loadingDocuSignUrl: payload,
+ docuSignUrl: "",
+ templateId: payload,
+ }),
+ [actions.terms.getDocuSignUrlDone]: onGetDocuSignUrlDone,
+ [actions.terms.agreeTermInit]: (state, { payload }) => ({
+ ...state,
+ agreeTermFailure: false,
+ agreeingTerm: payload,
+ }),
+ [actions.terms.agreeTermDone]: onAgreeTermDone,
+
+ [actions.terms.openTermsModal]: onOpenTermsModal,
+ [actions.terms.closeTermsModal]: onCloseTermsModal,
+
+ [actions.terms.selectTerm]: (state, { payload }) => ({
+ ...state,
+ selectedTerm: payload,
+ }),
+ [actions.terms.signDocu]: onSignDocu,
+ [actions.terms.checkStatusInit]: (state) => ({
+ ...state,
+ checkingStatus: true,
+ }),
+ [actions.terms.checkStatusDone]: onCheckStatusDone,
+ },
+ initialState || {
+ getTermsFailure: false,
+ terms: [],
+ openTermsModalUuid: "",
+ selectedTerm: null,
+ viewOnly: false,
+ checkingStatus: false,
+ checkStatusError: false,
+ canRegister: false,
+ }
+ );
+}
+
+/* Default reducer with empty initial state. */
+export default create();
diff --git a/src/apps/earn/src/reducers/user/index.js b/src/apps/earn/src/reducers/user/index.js
new file mode 100644
index 000000000..9d00e58f8
--- /dev/null
+++ b/src/apps/earn/src/reducers/user/index.js
@@ -0,0 +1,61 @@
+import { handleActions } from "redux-actions";
+import * as ACTION_TYPE from "../../actions/user/types";
+
+const initialState = {
+ isLoadingReferralData: true,
+ isLoggingIn: true,
+ profile: null,
+ profileError: null,
+ referralData: null,
+ referralDataError: null,
+};
+
+const onLoadProfileError = (state, { payload: profileError }) => ({
+ ...state,
+ isLoggingIn: false,
+ profileError,
+});
+
+const onLoadProfilePending = (state) => ({
+ ...state,
+ isLoggingIn: true,
+ profile: null,
+});
+
+const onLoadProfileSuccess = (state, { payload: profile }) => ({
+ ...state,
+ isLoggingIn: false,
+ profile,
+});
+
+const onLoadReferralDataError = (state, { payload: referralDataError }) => ({
+ ...state,
+ isLoadingReferralData: false,
+ referralDataError,
+});
+
+const onLoadReferralDataPending = (state) => ({
+ ...state,
+ isLoadingReferralData: true,
+ referralData: null,
+ referralDataError: null,
+});
+
+const onLoadReferralDataSuccess = (state, { payload: referralData }) => ({
+ ...state,
+ isLoadingReferralData: false,
+ referralData,
+});
+
+export default handleActions(
+ {
+ [ACTION_TYPE.LOAD_PROFILE_ERROR]: onLoadProfileError,
+ [ACTION_TYPE.LOAD_PROFILE_PENDING]: onLoadProfilePending,
+ [ACTION_TYPE.LOAD_PROFILE_SUCCESS]: onLoadProfileSuccess,
+ [ACTION_TYPE.LOAD_REFERRAL_DATA_ERROR]: onLoadReferralDataError,
+ [ACTION_TYPE.LOAD_REFERRAL_DATA_PENDING]: onLoadReferralDataPending,
+ [ACTION_TYPE.LOAD_REFERRAL_DATA_SUCCESS]: onLoadReferralDataSuccess,
+ },
+ initialState,
+ { prefix: "USER", namespace: "--" }
+);
diff --git a/src/apps/earn/src/reducers/user/selectors.js b/src/apps/earn/src/reducers/user/selectors.js
new file mode 100644
index 000000000..13ae01bbb
--- /dev/null
+++ b/src/apps/earn/src/reducers/user/selectors.js
@@ -0,0 +1,15 @@
+export const getIsLoadingReferralData = (state) =>
+ state.user.isLoadingReferralData;
+
+export const getIsLoggedIn = (state) =>
+ !state.user.isLoggingIn && !!state.user.profile;
+
+export const getIsLoggingIn = (state) => state.user.isLoggingIn;
+
+export const getProfile = (state) => state.user.profile;
+
+export const getReferralData = (state) => state.user.referralData;
+
+export const getReferralId = (state) => state.user.referralData?.id;
+
+export const getStateSlice = (state) => state.user;
diff --git a/src/apps/earn/src/routes/ChallengeDetails/index.jsx b/src/apps/earn/src/routes/ChallengeDetails/index.jsx
new file mode 100644
index 000000000..2817749c6
--- /dev/null
+++ b/src/apps/earn/src/routes/ChallengeDetails/index.jsx
@@ -0,0 +1,46 @@
+import { useParams } from "react-router-dom";
+import { connect } from "react-redux";
+import { useRef } from "react";
+import qs from 'qs';
+import _ from "lodash";
+
+import { initAuth } from '../../services/auth';
+import ChallengeDetailContainer from "../../containers/ChallengeDetail";
+
+const ChallengeDetails = (props) => {
+ const { auth } = props;
+ const { challengeId } = useParams()
+ const init = useRef(false)
+
+ if (!init.current) {
+ initAuth();
+ init.current = true;
+ }
+ const query = window.location.search
+ ? qs.parse(window.location.search.slice(1)) : null;
+ const currencyFromUrl = _.get(query, 'currency');
+ const prizeMode = currencyFromUrl && `money-${currencyFromUrl}`;
+ const newProps = { ...props, ...{ prizeMode } };
+ const selectedTab = _.get(query, 'tab') || "details";
+ return (
+ <>
+ { auth.isAuthInitialized && (
+
+
+ );
+};
+
diff --git a/src/apps/earn/src/routes/ChallengeList/styles.scss b/src/apps/earn/src/routes/ChallengeList/styles.scss
new file mode 100644
index 000000000..e7e59e9c1
--- /dev/null
+++ b/src/apps/earn/src/routes/ChallengeList/styles.scss
@@ -0,0 +1,96 @@
+@import "@earn/styles/variables";
+@import "@earn/styles/mixins";
+
+.layout {
+ position: relative;
+ display: flex;
+
+ .sidebar {
+ flex: none;
+ width: var(--sideBarWidth, 270px);
+ min-height: calc(100vh - var(--navbarHeight, 60px));
+ background: $white;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .sidebar-content {
+ > hr {
+ margin: 0 20px;
+ border-color: $tc-gray-05;
+ opacity: 0.5;
+
+ &:first-child,
+ &:last-child {
+ display: none;
+ }
+ }
+ }
+
+ .sidebar-footer {
+ margin: 0 20px;
+ margin-bottom: 125px;
+ }
+
+ &.show {
+ display: block;
+ }
+ }
+
+ .content {
+ flex: 1 1 auto;
+ }
+
+ .close-button {
+ display: none;
+ }
+
+ @include down($mfe-screen-xs) {
+ .sidebar {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ display: none;
+ width: 100%;
+ margin-top: 90px;
+ background-color: $tc-white;
+ z-index: 20;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: calc(-90px - var(--navbarHeight, 60px));
+ left: 0;
+ right: 0;
+ bottom: 100%;
+ background-color: rgba($tc-gray-90, 0.6);
+ z-index: 19;
+ }
+ }
+
+ .close-button {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 32px;
+ height: 32px;
+ font-size: 32px;
+ padding: 0;
+ color: inherit;
+ appearance: none;
+ background: none;
+ border: 0;
+ }
+ }
+}
+
+#tooltips-container-id {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+ z-index: 1001;
+}
\ No newline at end of file
diff --git a/src/apps/earn/src/routes/ChallengeSubmissions/index.jsx b/src/apps/earn/src/routes/ChallengeSubmissions/index.jsx
new file mode 100644
index 000000000..2f6302ec5
--- /dev/null
+++ b/src/apps/earn/src/routes/ChallengeSubmissions/index.jsx
@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+import { Route, Routes, useParams } from "react-router-dom";
+
+import { lazyLoad } from "~/libs/core";
+
+import ErrorMessage from '../../components/ErrorMessage'
+import { clearErrorMesssage } from "../../utils/logger";
+import { initAuth } from "../../services/auth";
+
+const Submission = lazyLoad(
+ () => import('../../containers/Submission'),
+)
+
+const SubmissionManagement = lazyLoad(
+ () => import('../../containers/SubmissionManagement'),
+)
+
+export const ChallengeSubmissions = (props) => {
+ const alert = useSelector((state) => state.errors.alerts[0]);
+ const { challengeId } = useParams()
+
+ useEffect(() => { initAuth() }, [])
+
+ return (
+ <>
+
+ } path='submit' />
+ } path='my-submissions' />
+
+
+ {alert && (
+ clearErrorMesssage()}
+ />
+ )}
+
+ );
+};
+
diff --git a/src/apps/earn/src/routes/GigApplyPage/index.jsx b/src/apps/earn/src/routes/GigApplyPage/index.jsx
new file mode 100644
index 000000000..7be009564
--- /dev/null
+++ b/src/apps/earn/src/routes/GigApplyPage/index.jsx
@@ -0,0 +1,60 @@
+import styles from "./styles.scss";
+import React, { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { useDispatch, useSelector, } from "react-redux";
+import { LoadingCircles } from "~/libs/ui";
+import LoginRequest from "../../components/gig-apply/LoginRequest";
+import ApplicationForm from "../../components/gig-apply/ApplicationForm";
+import * as myGigsSelectors from "../../reducers/my-gigs/selectors";
+import myGigsActions from "../../actions/my-gigs";
+import * as lookupSelectors from "../../reducers/lookupSelectors";
+import * as detailsSelectors from "../../reducers/gig-details/selectors";
+import * as applyEffectors from "../../actions/gig-apply/effectors";
+
+const GigApplyPage = () => {
+ const { externalId } = useParams()
+ const isLoggingIn = useSelector(myGigsSelectors.getIsLoggingIn);
+ const isLoggedIn = useSelector(myGigsSelectors.getIsLoggedIn);
+ const getProfileError = useSelector(myGigsSelectors.getProfileError);
+ const isEmptyProfile = useSelector(myGigsSelectors.isEmptyProfile);
+ const isLoadingCountries = useSelector(lookupSelectors.getIsLoadingCountries);
+ const isLoadingDetails = useSelector(detailsSelectors.getIsLoadingDetails);
+
+ const dispatch = useDispatch();
+
+ const isLoading =
+ isLoggingIn || (isLoggedIn && (isLoadingDetails || isLoadingCountries));
+
+ useEffect(() => {
+ if (isEmptyProfile) {
+ dispatch(myGigsActions.getProfile());
+ }
+ }, [isEmptyProfile, dispatch]);
+
+ useEffect(() => {
+ if (isLoggedIn) {
+ applyEffectors.loadInitialData(externalId);
+ }
+ }, [isLoggedIn, externalId]);
+
+ return (
+
+
+ );
+};
+
+export default GigsPage;
diff --git a/src/apps/earn/src/routes/GigsPage/styles.scss b/src/apps/earn/src/routes/GigsPage/styles.scss
new file mode 100644
index 000000000..e7dc6891a
--- /dev/null
+++ b/src/apps/earn/src/routes/GigsPage/styles.scss
@@ -0,0 +1,28 @@
+@import "../../styles/mixins";
+
+div.page {
+ display: block;
+
+ @include tablet {
+ display: flex;
+ flex-direction: row;
+ }
+
+ .sidebar {
+ width: auto;
+
+ @include tablet {
+ width: var(--sideBarWidth, 270px);
+ min-height: calc(100vh - var(--navbarHeight, 60px));
+ }
+ }
+}
+
+.feedbackBtn {
+ color: #fff;
+ background-color: #137D60;
+
+ &:hover {
+ color: #fff;
+ }
+}
diff --git a/src/apps/earn/src/routes/MyGigsPage/index.jsx b/src/apps/earn/src/routes/MyGigsPage/index.jsx
new file mode 100644
index 000000000..ae5ff339f
--- /dev/null
+++ b/src/apps/earn/src/routes/MyGigsPage/index.jsx
@@ -0,0 +1,126 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useLocation } from "react-router-dom";
+import BasePage from "../../containers/BasePage";
+import MyGigsFilter from "../../containers/MyGigsFilter";
+import MyGigs from "../../containers/MyGigs";
+import * as constants from "../../constants";
+import actions from "../../actions";
+import * as utils from "../../utils";
+import store from "../../store";
+import { initialGigFilter } from "../../reducers/filter";
+import _ from "lodash";
+
+const MyGigsPage = () => {
+ const location = useLocation();
+ const [isLoggedIn, setIsLoggedIn] = useState(null);
+ const getDataDebounced = useRef(_.debounce((f) => f(), 500));
+
+ useEffect(() => {
+ const checkIsLoggedIn = async () => {
+ setIsLoggedIn(await utils.auth.isLoggedIn());
+ };
+ checkIsLoggedIn();
+ }, []);
+
+ useEffect(() => {
+ if (isLoggedIn) {
+ if (!location.search) {
+ store.dispatch(actions.filter.updateGigFilter(initialGigFilter));
+ const cachedGigs = store.getState().myGigs[initialGigFilter.status];
+ if (cachedGigs.myGigs && cachedGigs.myGigs.length !== 0) {
+ return;
+ }
+ store.dispatch(
+ actions.myGigs.getMyOpenGigs(
+ constants.GIGS_FILTER_STATUSES_PARAM[initialGigFilter.status]
+ )
+ );
+ return;
+ }
+ const params = utils.url.parseUrlQuery(location.search);
+ if (_.keys(params).length == 1 && params.externalId) {
+ store.dispatch(actions.myGigs.startCheckingGigs(params.externalId));
+ return;
+ }
+ const s =
+ _.values(constants.GIGS_FILTER_STATUSES).indexOf(params.status) >= 0
+ ? params.status
+ : null;
+ const updatedGigFilter = {
+ status: s || "Open Applications",
+ };
+ const currentGig = store.getState().filter.gig;
+ const diff = !_.isEqual(updatedGigFilter, currentGig);
+ if (diff) {
+ store.dispatch(actions.filter.updateGigFilter(updatedGigFilter));
+ }
+ if (updatedGigFilter.status !== initialGigFilter.status) {
+ // preload the open application first page data.
+ const cachedOpenGigs = store.getState().myGigs[initialGigFilter.status];
+ if (!cachedOpenGigs.myGigs) {
+ store.dispatch(
+ actions.myGigs.getMyOpenGigs(
+ constants.GIGS_FILTER_STATUSES_PARAM[initialGigFilter.status]
+ )
+ );
+ }
+ }
+ const cachedGigs = store.getState().myGigs[updatedGigFilter.status];
+ if (cachedGigs.myGigs) {
+ return;
+ }
+ getDataDebounced.current(() => {
+ if (
+ updatedGigFilter.status == constants.GIGS_FILTER_STATUSES.ACTIVE_JOBS
+ ) {
+ store.dispatch(
+ actions.myGigs.getMyActiveGigs(
+ constants.GIGS_FILTER_STATUSES_PARAM[updatedGigFilter.status]
+ )
+ );
+ }
+ if (
+ updatedGigFilter.status == constants.GIGS_FILTER_STATUSES.OPEN_JOBS
+ ) {
+ store.dispatch(
+ actions.myGigs.getMyOpenGigs(
+ constants.GIGS_FILTER_STATUSES_PARAM[updatedGigFilter.status]
+ )
+ );
+ }
+ if (
+ updatedGigFilter.status ==
+ constants.GIGS_FILTER_STATUSES.COMPLETED_JOBS
+ ) {
+ store.dispatch(
+ actions.myGigs.getMyCompletedGigs(
+ constants.GIGS_FILTER_STATUSES_PARAM[updatedGigFilter.status]
+ )
+ );
+ }
+ if (
+ updatedGigFilter.status ==
+ constants.GIGS_FILTER_STATUSES.ARCHIVED_JOBS
+ ) {
+ store.dispatch(
+ actions.myGigs.getMyArchivedGigs(
+ constants.GIGS_FILTER_STATUSES_PARAM[updatedGigFilter.status]
+ )
+ );
+ }
+ });
+ }
+ }, [location, isLoggedIn]);
+
+ const myGigsFilter = useMemo(() => (isLoggedIn ?
+
+ );
+};
+
+export default MyGigsPage;
diff --git a/src/apps/earn/src/services/__mocks__/api.js b/src/apps/earn/src/services/__mocks__/api.js
new file mode 100644
index 000000000..a7ee0add4
--- /dev/null
+++ b/src/apps/earn/src/services/__mocks__/api.js
@@ -0,0 +1,138 @@
+/**
+ * This module provides a service for conventient access to Topcoder APIs.
+ */
+
+import _ from "lodash";
+import "isomorphic-fetch";
+
+import { EnvironmentConfig } from "~/config";
+
+/**
+ * API service object. It is reused for both Topcoder API v2 and v3,
+ * as in these cases we are fine with the same interface, and the only
+ * thing we need to be different is the base URL and auth token to use.
+ */
+export default class Api {
+ /**
+ * @param {String} base Base URL of the API.
+ * @param {String} token Optional. Authorization token.
+ */
+ constructor(base, token) {
+ this.private = { base, token };
+ }
+
+ /**
+ * Sends a request to the specified endpoint of the API. This method just
+ * wraps fetch() in a convenient way. If this object was created with the
+ * auth token, it will be automatically added to auth header of all
+ * requests.
+ * For additional details see https://github.github.io/fetch/
+ * @param {String} enpoint Should start with slash, like /endpoint.
+ * @param {Object} options Optional. Fetch options.
+ * @return {Promise} It resolves to the HTTP response object. To get the
+ * actual data you probably want to call .json() method of that object.
+ * Mind that this promise rejects only on network errors. In case of
+ * HTTP errors (404, etc.) the promise will be resolved successfully,
+ * and you should check .status or .ok fields of the response object
+ * to find out the response status.
+ */
+ fetch(endpoint, options) {
+ const p = this.private;
+ const headers = { "Content-Type": "application/json" };
+ if (p.token) headers.Authorization = `Bearer ${p.token}`;
+ const ops = _.merge(_.cloneDeep(options) || {}, { headers });
+ return fetch(`${p.base}${endpoint}`, ops);
+ }
+
+ /**
+ * Sends DELETE request to the specified endpoint.
+ * @param {String} endpoint
+ * @param {Blob|BufferSource|FormData|String} body
+ * @return {Promise}
+ */
+ delete(endpoint, body) {
+ return this.fetch(endpoint, { body, method: "DELETE" });
+ }
+
+ /**
+ * Sends GET request to the specified endpoint.
+ * @param {String} endpoint
+ * @return {Promise}
+ */
+ get(endpoint) {
+ return this.fetch(endpoint);
+ }
+
+ /**
+ * Sends POST request to the specified endpoint.
+ * @param {String} endpoint
+ * @param {Blob|BufferSource|FormData|String} body
+ * @return {Promise}
+ */
+ post(endpoint, body) {
+ return this.fetch(endpoint, { body, method: "POST" });
+ }
+
+ /**
+ * Sends POST request to the specified endpoint, with JSON payload.
+ * @param {String} endpoint
+ * @param {JSON} json
+ * @return {Promise}
+ */
+ postJson(endpoint, json) {
+ return this.post(endpoint, JSON.stringify(json));
+ }
+
+ /**
+ * Sends PUT request to the specified endpoint.
+ * @param {String} endpoint
+ * @param {Blob|BufferSource|FormData|String} body
+ * @return {Promise}
+ */
+ put(endpoint, body) {
+ return this.fetch(endpoint, { body, method: "PUT" });
+ }
+
+ /**
+ * Sends PUT request to the specified endpoint.
+ * @param {String} endpoint
+ * @param {JSON} json
+ * @return {Promise}
+ */
+ putJson(endpoint, json) {
+ return this.put(endpoint, JSON.stringify(json));
+ }
+}
+
+/*
+ * Topcoder API
+ */
+const lastApiInstances = {};
+
+/**
+ * Returns a new or existing Api object for Topcoder API.
+ * @param {String} version The API version.
+ * @param {String} token Optional. Auth token for Topcoder API.
+ * @return {Api} API service object.
+ */
+export function getApi(version, token) {
+ if (!version || !EnvironmentConfig.API[version]) {
+ throw new Error(`${version} is not a valid API version`);
+ }
+ if (
+ !lastApiInstances[version] ||
+ lastApiInstances[version].private.token !== token
+ ) {
+ lastApiInstances[version] = new Api(EnvironmentConfig.API[version], token);
+ }
+ return lastApiInstances[version];
+}
+
+/**
+ * Keep the old API factories for backwards compatibility
+ * DO NOT USE THEM FOR NEW IMPLEMENTATIONS.
+ * USE THE getApi(version, token) FACTORY.
+ */
+export const getApiV2 = (token) => getApi("V2", token);
+export const getApiV3 = (token) => getApi("V3", token);
+export const getApiV4 = (token) => getApi("V4", token);
diff --git a/src/apps/earn/src/services/__mocks__/challenges.js b/src/apps/earn/src/services/__mocks__/challenges.js
new file mode 100644
index 000000000..cebf644e1
--- /dev/null
+++ b/src/apps/earn/src/services/__mocks__/challenges.js
@@ -0,0 +1,391 @@
+/**
+ * This module provides a service for convenient manipulation with Topcoder
+ * challenges via TC API.
+ */
+
+import _ from "lodash";
+import { COMPETITION_TRACKS } from "../../utils/tc";
+import { getApi } from "./api";
+
+import sampleApiV3Response from "./data/challenges-v3.json";
+import sampleApiV3ResponseSingle from "./data/challenge-v3.json";
+import sampleApiV2ResponseSingle from "./data/challenge-v2.json";
+
+export const ORDER_BY = {
+ SUBMISSION_END_DATE: "submissionEndDate",
+};
+
+/**
+ * Normalizes a regular challenge details object received from the backend APIs.
+ * NOTE: It is possible, that this normalization is not necessary after we
+ * have moved to Topcoder API v3, but it is kept for now to minimize a risk of
+ * breaking anything.
+ * @param {Object} v3 Challenge object received from the /v3/challenges/{id}
+ * endpoint.
+ * @param {Object} v3Filtered Challenge object received from the
+ * /v3/challenges?filter=id={id} endpoint.
+ * @param {Object} v3User Challenge object received from the
+ * /v3//members/{username}/challenges?filter=id={id} endpoint.
+ * If action was fired for authenticated visitor, v3_user will contain
+ * details fetched specifically for the user (thus may include additional
+ * data comparing to the standard API v3 response for the challenge details,
+ * stored in v3_filtered).
+ * @param {Object} v2 Challenge object received from the /v2/{type}/challenges/{id} endpoint.
+ * @param {String} username Optional.
+ * @return {Object} Normalized challenge object.
+ */
+export function normalizeChallengeDetails(
+ v3,
+ v3Filtered,
+ v3User,
+ v2,
+ username
+) {
+ // Normalize exising data to make it consistent with the rest of the code
+ const challenge = {
+ id: v3.challengeId,
+ status: (v3.currentStatus || "").toUpperCase(),
+ name: v3.challengeName,
+ projectId: Number(v3.projectId),
+ forumId: Number(v3.forumId),
+ introduction: v3.introduction || "",
+ detailedRequirements: v3.detailedRequirements,
+ finalSubmissionGuidelines: v3.finalSubmissionGuidelines,
+ screeningScorecardId: Number(v3.screeningScorecardId),
+ reviewScorecardId: Number(v3.reviewScorecardId),
+ numberOfCheckpointsPrizes: v3.numberOfCheckpointsPrizes,
+ topCheckPointPrize: v3.topCheckPointPrize,
+ submissionsViewable: v3.submissionsViewable || "false",
+ reviewType: v3.reviewType,
+ allowStockArt: v3.allowStockArt === "true",
+ fileTypes: v3.filetypes || [],
+ environment: v3.environment,
+ codeRepo: v3.codeRepo,
+ forumLink: v3.forumLink,
+ submissionLimit: Number(v3.submissionLimit) || 0,
+ drPoints: v3.digitalRunPoints,
+ directUrl: v3.directUrl,
+ technologies: _.isArray(v3.technology) ? v3.technology.join(", ") : "",
+ platforms: _.isArray(v3.platforms) ? v3.platforms.join(", ") : "",
+ prizes: v3.prize || [],
+ events: v3.event
+ ? [
+ {
+ eventName: v3.event.eventShortDesc,
+ eventId: v3.event.id,
+ description: v3.event.eventDescription,
+ },
+ ]
+ : [],
+ mainEvent: v3.event
+ ? {
+ eventName: v3.event.eventShortDesc,
+ eventId: v3.event.id,
+ description: v3.event.eventDescription,
+ }
+ : {},
+ terms: v3.terms,
+ submissions: v3.submissions,
+ checkpoints: v3.checkpoints,
+ documents: v3.documents || [],
+ numRegistrants: v3.numberOfRegistrants,
+ numberOfCheckpointSubmissions: v3.numberOfCheckpointSubmissions,
+ reliabilityBonus: v3.reliabilityBonus || 0,
+ };
+
+ // Fill missing data from v3_filtered
+ if (v3Filtered) {
+ const groups = {};
+ if (v3Filtered.groups) {
+ v3Filtered.groups.forEach((id) => {
+ groups[id] = true;
+ });
+ }
+ _.defaults(challenge, {
+ track: v3Filtered.track,
+ subTrack: v3Filtered.subTrack,
+ submissionEndDate: v3Filtered.submissionEndDate, // Dates are not correct in v3
+ submissionEndTimestamp: v3Filtered.submissionEndDate, // Dates are not correct in v3
+
+ /* Taking phases from v3_filtered, because dates are not correct in v3 */
+ allPhases: v3Filtered.allPhases || [],
+
+ /* Taking phases from v3_filtered, because dates are not correct in v3 */
+ currentPhases: v3Filtered.currentPhases || [],
+
+ /* Taking winners from v3_filtered, because winners are returned empty in v3 */
+ winners: v3Filtered.winners || [],
+
+ /* v3 returns incorrect value for numberOfSubmissions for some reason */
+ numSubmissions: v3Filtered.numSubmissions,
+ groups,
+ });
+ }
+
+ // Fill missing data from v3_user
+ if (v3User) {
+ _.defaults(challenge, {
+ userDetails: v3User.userDetails,
+ });
+ }
+
+ // Fill missing data from v2
+ if (v2) {
+ _.defaults(challenge, {
+ round1Introduction: v2.round1Introduction || "", // This is always null in v3 for some reason
+ round2Introduction: v2.round2Introduction || "", // This is always null in v3 for some reason
+ registrants: v2.registrants || [], // Registrants are now only returned by v2
+
+ /* Although v3 does return appealsEndDate, it causes incorrect 'Winners'
+ * phase time for some reason */
+ appealsEndDate: v2.appealsEndDate,
+ });
+ }
+
+ // Fill some derived data
+ const registrationOpen = _.some(
+ challenge.allPhases,
+ (phase) => phase.name === "Registration" && phase.isOpen
+ )
+ ? "Yes"
+ : "No";
+ _.defaults(challenge, {
+ communities: new Set([COMPETITION_TRACKS[challenge.track]]),
+ registrationOpen,
+ users: username ? { [username]: true } : {},
+ });
+
+ // A hot fix to show submissions for on-going challenges
+ if (
+ (!challenge.submissions || !challenge.submissions.length) &&
+ !_.isEmpty(v2)
+ ) {
+ challenge.submissions = v2.registrants
+ .filter((r) => r.submissionDate)
+ .sort((a, b) => a.submissionDate.localeCompare(b.submissionDate));
+ }
+
+ return challenge;
+}
+
+/**
+ * Normalizes a regular challenge object received from the backend.
+ * NOTE: This function is copied from the existing code in the challenge listing
+ * component. It is possible, that this normalization is not necessary after we
+ * have moved to Topcoder API v3, but it is kept for now to minimize a risk of
+ * breaking anything.
+ * @param {Object} challenge Challenge object received from the backend.
+ * @param {String} username Optional.
+ * @return {Object} Normalized challenge.
+ */
+export function normalizeChallenge(challenge, username) {
+ const registrationOpen = challenge.allPhases.filter(
+ (d) => d.name === "Registration"
+ )[0].isOpen
+ ? "Yes"
+ : "No";
+ const groups = {};
+ if (challenge.groups) {
+ challenge.groups.forEach((id) => {
+ groups[id] = true;
+ });
+ }
+ _.defaults(challenge, {
+ communities: new Set([COMPETITION_TRACKS[challenge.track]]),
+ groups,
+ platforms: "",
+ registrationOpen,
+ technologies: "",
+ submissionEndTimestamp: challenge.submissionEndDate,
+ users: username ? { username: true } : {},
+ });
+}
+
+class ChallengesService {
+ /**
+ * @param {String} tokenV3 Optional. Auth token for Topcoder API v3.
+ * @param {String} tokenV2 Optional. Auth token for Topcoder API v2.
+ */
+ constructor(tokenV3, tokenV2) {
+ /**
+ * Private function being re-used in all methods related to getting
+ * challenges. It handles query-related arguments in the uniform way:
+ * @param {String} endpoint API V3 endpoint, where the request will be send.
+ * @param {Object} filters Optional. A map of filters to pass as `filter`
+ * query parameter (this function takes care to stringify it properly).
+ * @param {Object} params Optional. A map of any other parameters beside
+ * `filter`.
+ */
+ const getChallenges = (endpoint) => {
+ /*
+ const query = {
+ filter: qs.stringify(filters),
+ ...params,
+ };
+ */
+ let response;
+ if (endpoint.match(/challenges/)) {
+ response = sampleApiV3Response;
+ /* TODO: Should we mock the filtering here for an advanced testing? */
+ } else throw new Error("Requested endpoint has not been mocked yet.");
+ return Promise.resolve(
+ response.result.status === 200
+ ? {
+ challenges: response.result.content || [],
+ totalCount: response.result.metadata.totalCount,
+ }
+ : new Error(response.result.content)
+ );
+ };
+
+ this.private = {
+ api: getApi("V3", tokenV3),
+ apiV2: getApi("V2", tokenV2),
+ getChallenges,
+ tokenV2,
+ tokenV3,
+ };
+ }
+
+ /**
+ * Gets challenge details from Topcoder API v3.
+ * NOTE: This function also uses API v2 and other v3 endpoints for now, due
+ * to some information is missing or
+ * incorrect in the main v3 endpoint. This may change in the future.
+ * @param {Number|String} challengeId
+ * @return {Promise} Resolves to the challenge object.
+ */
+ async getChallengeDetails(challengeId) {
+ const challengeV3 = sampleApiV3ResponseSingle;
+
+ const challengeV3Filtered = await this.private
+ .getChallenges("/challenges/", { id: challengeId })
+ .then((res) => res.challenges[0]);
+
+ const challengeV2 = sampleApiV2ResponseSingle;
+ const challenge = normalizeChallengeDetails(
+ challengeV3,
+ challengeV3Filtered,
+ null,
+ challengeV2,
+ null
+ );
+
+ return challenge;
+ }
+
+ /**
+ * Gets possible challenge types.
+ * @return {Promise} Resolves to the array of challenge type names.
+ */
+ getChallengeTypes() {
+ return Promise.all([
+ this.private.apiV2
+ .get("/design/challengetypes")
+ .then((res) => (res.ok ? res.json() : new Error(res.statusText))),
+ this.private.apiV2
+ .get("/develop/challengetypes")
+ .then((res) => (res.ok ? res.json() : new Error(res.statusText))),
+ ]).then(([a, b]) => a.concat(b));
+ }
+
+ /**
+ * Gets possible challenge tags (technologies).
+ * @return {Promise} Resolves to the array of tag strings.
+ */
+ getChallengeTags() {
+ return this.private.api
+ .get("/technologies")
+ .then((res) => (res.ok ? res.json() : new Error(res.statusText)))
+ .then((res) =>
+ res.result.status === 200
+ ? res.result.content
+ : new Error(res.result.content)
+ );
+ }
+
+ /**
+ * Gets challenges.
+ * @param {Object} filters Optional.
+ * @param {Object} params Optional.
+ * @return {Promise} Resolves to the api response.
+ */
+ getChallenges(filters, params) {
+ return this.private
+ .getChallenges("/challenges/", filters, params)
+ .then((res) => {
+ res.challenges.forEach((item) => normalizeChallenge(item));
+ return res;
+ });
+ }
+
+ /**
+ * Gets challenges of the specified user.
+ * @param {String} username User whose challenges we want to fetch.
+ * @param {Object} filters Optional.
+ * @param {Number} params Optional.
+ * @return {Promise} Resolves to the api response.
+ */
+ getUserChallenges(username, filters, params) {
+ const endpoint = `/members/${username.toLowerCase()}/challenges/`;
+ return this.private.getChallenges(endpoint, filters, params).then((res) => {
+ res.challenges.forEach((item) => normalizeChallenge(item, username));
+ return res;
+ });
+ }
+
+ /**
+ * Registers user to the specified challenge.
+ * @param {String} challengeId
+ * @return {Promise}
+ */
+ register(challengeId) {
+ const endpoint = `/challenges/${challengeId}/register`;
+ return this.private.apiV2
+ .postJson(endpoint)
+ .then((res) => (res.ok ? res.json() : new Error(res.statusText)));
+ }
+
+ /**
+ * Unregisters user from the specified challenge.
+ * @param {String} challengeId
+ * @return {Promise}
+ */
+ unregister(challengeId) {
+ const endpoint = `/challenges/${challengeId}/unregister`;
+ return this.private.apiV2
+ .post(endpoint)
+ .then((res) => (res.ok ? res.json() : new Error(res.statusText)));
+ }
+
+ /**
+ * Gets count of user's active challenges.
+ * @param {String} handle Topcoder user handle.
+ * @return {Action} Resolves to the api response.
+ */
+ getActiveChallengesCount(handle) {
+ _.noop(this, handle);
+ return Promise.resolve(10);
+ }
+}
+
+/**
+ * Returns a new or existing challenges service.
+ * @param {String} tokenV3 Optional. Auth token for Topcoder API v3.
+ * @param {String} tokenV2 Optional. Auth token for Topcoder API v2.
+ * @return {Challenges} Challenges service object
+ */
+let lastInstance = null;
+export function getService(tokenV3, tokenV2) {
+ if (
+ !lastInstance ||
+ lastInstance.tokenV3 !== tokenV3 ||
+ lastInstance.tokenV2 !== tokenV2
+ ) {
+ lastInstance = new ChallengesService(tokenV3, tokenV2);
+ }
+ return lastInstance;
+}
+
+/* Using default export would be confusing in this case. */
+export default undefined;
diff --git a/src/apps/earn/src/services/__mocks__/data/challenge-normalized.json b/src/apps/earn/src/services/__mocks__/data/challenge-normalized.json
new file mode 100644
index 000000000..3c5f65abd
--- /dev/null
+++ b/src/apps/earn/src/services/__mocks__/data/challenge-normalized.json
@@ -0,0 +1,190 @@
+{
+ "id": 30060651,
+ "status": "ACTIVE",
+ "name": "Quartz Energy Geosteer Assist - Formation Interpolation",
+ "projectId": 15399,
+ "forumId": 38854,
+ "introduction": "",
+ "detailedRequirements": "Some requirements",
+ "finalSubmissionGuidelines": "Some guidelines",
+ "screeningScorecardId": 0,
+ "reviewScorecardId": 30002053,
+ "numberOfCheckpointsPrizes": 0,
+ "topCheckPointPrize": "",
+ "submissionsViewable": "false",
+ "reviewType": "COMMUNITY",
+ "allowStockArt": false,
+ "fileTypes": [],
+ "environment": "",
+ "codeRepo": "",
+ "forumLink": "https://apps.topcoder.com/forums/?module=Category&categoryID=38854",
+ "submissionLimit": 0,
+ "drPoints": null,
+ "directUrl": "https://www.topcoder.com/direct/contest/detail.action?projectId=30060651",
+ "technologies": "Java",
+ "platforms": "Other",
+ "prizes": [1000, 500],
+ "events": [
+ {
+ "eventName": "tco18",
+ "eventId": 3450,
+ "description": "2018 Topcoder(R) Open"
+ }
+ ],
+ "mainEvent": {
+ "eventName": "tco18",
+ "eventId": 3450,
+ "description": "2018 Topcoder(R) Open"
+ },
+ "terms": [
+ {
+ "termsOfUseId": 21193,
+ "title": "Standard Terms for Topcoder Competitions v2.1",
+ "url": "",
+ "agreeabilityType": "Electronically-agreeable",
+ "role": "Submitter"
+ },
+ {
+ "termsOfUseId": 20704,
+ "title": "Standard Reviewer Terms v1.0",
+ "url": "",
+ "agreeabilityType": "Electronically-agreeable",
+ "role": "Primary Screener"
+ }
+ ],
+ "submissions": [
+ {
+ "handle": "liuliquan",
+ "reliability": "n/a",
+ "registrationDate": "2017-11-23T01:44:00.000-05:00",
+ "submissionDate": "2017-11-25T14:20:00.000-05:00",
+ "rating": null,
+ "colorStyle": "color: #000000"
+ }
+ ],
+ "checkpoints": [],
+ "documents": [],
+ "numRegistrants": 40,
+ "numberOfCheckpointSubmissions": 0,
+ "reliabilityBonus": 0,
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "submissionEndDate": "2017-11-29T06:07:43.413Z",
+ "submissionEndTimestamp": "2017-11-29T06:07:43.413Z",
+ "allPhases": [
+ {
+ "challengeId": 30060651,
+ "id": 875365,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-11-23T06:03Z",
+ "scheduledEndTime": "2017-11-25T06:04Z",
+ "actualStartTime": "2017-11-23T06:03Z",
+ "actualEndTime": "2017-11-25T06:04Z",
+ "fixedStartTime": "2017-11-23T06:00Z",
+ "duration": 172800000,
+ "updatedAt": "2017-11-29T01:07Z",
+ "createdAt": "2017-11-23T00:24Z",
+ "createdBy": "8544935",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30060651,
+ "id": 875366,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-11-23T06:11Z",
+ "scheduledEndTime": "2017-11-29T06:07Z",
+ "actualStartTime": "2017-11-23T06:11Z",
+ "actualEndTime": "2017-11-29T06:07Z",
+ "duration": 518100000,
+ "updatedAt": "2017-11-29T01:07Z",
+ "createdAt": "2017-11-23T00:24Z",
+ "createdBy": "8544935",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30060651,
+ "id": 875367,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2017-11-29T06:07Z",
+ "scheduledEndTime": "2017-11-30T06:07Z",
+ "actualStartTime": "2017-11-29T06:07Z",
+ "duration": 86400000,
+ "updatedAt": "2017-11-29T01:07Z",
+ "createdAt": "2017-11-23T00:24Z",
+ "createdBy": "8544935",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30060651,
+ "id": 875368,
+ "phaseType": "Appeals",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2017-11-30T06:07Z",
+ "scheduledEndTime": "2017-11-30T18:07Z",
+ "duration": 43200000,
+ "updatedAt": "2017-11-29T01:07Z",
+ "createdAt": "2017-11-23T00:24Z",
+ "createdBy": "8544935",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30060651,
+ "id": 875369,
+ "phaseType": "Appeals Response",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2017-11-30T18:07Z",
+ "scheduledEndTime": "2017-12-01T06:07Z",
+ "duration": 43200000,
+ "updatedAt": "2017-11-29T01:07Z",
+ "createdAt": "2017-11-23T00:24Z",
+ "createdBy": "8544935",
+ "updatedBy": "22841596"
+ }
+ ],
+ "currentPhases": [
+ {
+ "challengeId": 30060651,
+ "id": 875367,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2017-11-29T06:07Z",
+ "scheduledEndTime": "2017-11-30T06:07Z",
+ "actualStartTime": "2017-11-29T06:07Z",
+ "duration": 86400000,
+ "updatedAt": "2017-11-29T01:07Z",
+ "createdAt": "2017-11-23T00:24Z",
+ "createdBy": "8544935",
+ "updatedBy": "22841596"
+ }
+ ],
+ "winners": [],
+ "numSubmissions": 4,
+ "groups": {},
+ "round1Introduction": "",
+ "round2Introduction": "",
+ "registrants": [
+ {
+ "handle": "liuliquan",
+ "reliability": "n/a",
+ "registrationDate": "2017-11-23T01:44:00.000-05:00",
+ "submissionDate": "2017-11-25T14:20:00.000-05:00",
+ "rating": null,
+ "colorStyle": "color: #000000"
+ },
+ {
+ "handle": "anuradev",
+ "reliability": "n/a",
+ "registrationDate": "2017-11-23T04:01:00.000-05:00",
+ "submissionDate": "",
+ "rating": null,
+ "colorStyle": "color: #000000"
+ }
+ ],
+ "appealsEndDate": "2017-12-01T01:07:00.000-05:00",
+ "communities": ["develop"],
+ "registrationOpen": "No",
+ "users": {}
+}
diff --git a/src/apps/earn/src/services/__mocks__/data/challenge-v2.json b/src/apps/earn/src/services/__mocks__/data/challenge-v2.json
new file mode 100644
index 000000000..39391a658
--- /dev/null
+++ b/src/apps/earn/src/services/__mocks__/data/challenge-v2.json
@@ -0,0 +1,116 @@
+{
+ "challengeType": "Code",
+ "challengeName": "Quartz Energy Geosteer Assist - Formation Interpolation",
+ "challengeId": 30060651,
+ "projectId": 15399,
+ "forumId": "38854",
+ "detailedRequirements": "Some requirements",
+ "finalSubmissionGuidelines": "Some guidelines",
+ "screeningScorecardId": null,
+ "reviewScorecardId": "30002053",
+ "cmcTaskId": "",
+ "numberOfCheckpointsPrizes": 0,
+ "topCheckPointPrize": "",
+ "postingDate": "2017-11-23T01:03:00.000-05:00",
+ "registrationEndDate": "2017-11-25T01:04:00.000-05:00",
+ "checkpointSubmissionEndDate": "",
+ "submissionEndDate": "2017-11-29T01:07:00.000-05:00",
+ "reviewType": "COMMUNITY",
+ "forumLink": "http://apps.topcoder.com/forums/?module=Category&categoryID=38854",
+ "appealsEndDate": "2017-12-01T01:07:00.000-05:00",
+ "currentStatus": "Active",
+ "digitalRunPoints": null,
+ "challengeCommunity": "develop",
+ "directUrl": "https://www.topcoder.com/direct/contest/detail.action?projectId=30060651",
+ "technology": ["Java"],
+ "prize": [1000, 500],
+ "currentPhaseName": "Review",
+ "currentPhaseRemainingTime": 62150,
+ "currentPhaseEndDate": "2017-11-30T01:07:00.000-05:00",
+ "platforms": ["Other"],
+ "event": {
+ "id": 3450,
+ "description": "2018 TopCoder(R) Open",
+ "shortDescription": "tco18"
+ },
+ "registrants": [
+ {
+ "handle": "liuliquan",
+ "reliability": "n/a",
+ "registrationDate": "2017-11-23T01:44:00.000-05:00",
+ "submissionDate": "2017-11-25T14:20:00.000-05:00",
+ "rating": null,
+ "colorStyle": "color: #000000"
+ },
+ {
+ "handle": "anuradev",
+ "reliability": "n/a",
+ "registrationDate": "2017-11-23T04:01:00.000-05:00",
+ "submissionDate": "",
+ "rating": null,
+ "colorStyle": "color: #000000"
+ }
+ ],
+ "phases": [
+ {
+ "type": "Registration",
+ "status": "Closed",
+ "scheduledStartTime": "2017-11-23T01:03:00.000-05:00",
+ "actualStartTime": "2017-11-23T01:03:00.000-05:00",
+ "scheduledEndTime": "2017-11-25T01:04:00.000-05:00",
+ "actualendTime": "2017-11-25T01:04:00.000-05:00"
+ },
+ {
+ "type": "Submission",
+ "status": "Closed",
+ "scheduledStartTime": "2017-11-23T01:11:00.000-05:00",
+ "actualStartTime": "2017-11-23T01:11:00.000-05:00",
+ "scheduledEndTime": "2017-11-29T01:07:00.000-05:00",
+ "actualendTime": "2017-11-29T01:07:00.000-05:00"
+ },
+ {
+ "type": "Review",
+ "status": "Open",
+ "scheduledStartTime": "2017-11-29T01:07:00.000-05:00",
+ "actualStartTime": "2017-11-29T01:07:00.000-05:00",
+ "scheduledEndTime": "2017-11-30T01:07:00.000-05:00",
+ "actualendTime": null
+ },
+ {
+ "type": "Appeals",
+ "status": "Scheduled",
+ "scheduledStartTime": "2017-11-30T01:07:00.000-05:00",
+ "actualStartTime": null,
+ "scheduledEndTime": "2017-11-30T13:07:00.000-05:00",
+ "actualendTime": null
+ },
+ {
+ "type": "Appeals Response",
+ "status": "Scheduled",
+ "scheduledStartTime": "2017-11-30T13:07:00.000-05:00",
+ "actualStartTime": null,
+ "scheduledEndTime": "2017-12-01T01:07:00.000-05:00",
+ "actualendTime": null
+ }
+ ],
+ "submissions": [],
+ "checkpoints": [],
+ "numberOfRegistrants": 40,
+ "numberOfSubmissions": 4,
+ "numberOfCheckpointSubmissions": 0,
+ "serverInformation": {
+ "serverName": "TopCoder API",
+ "apiVersion": "0.0.1",
+ "requestDuration": 74,
+ "currentTime": 1511959870425
+ },
+ "requesterInformation": {
+ "id": "5f7bf2d284d48e92493296dd001a3d43324046ed-QMvKOchld76sc9AW",
+ "remoteIP": "95.28.81.73",
+ "receivedParams": {
+ "apiVersion": "v2",
+ "challengeId": "30060651",
+ "action": "getSoftwareChallenge"
+ }
+ }
+}
diff --git a/src/apps/earn/src/services/__mocks__/data/challenge-v3.json b/src/apps/earn/src/services/__mocks__/data/challenge-v3.json
new file mode 100644
index 000000000..88085bf66
--- /dev/null
+++ b/src/apps/earn/src/services/__mocks__/data/challenge-v3.json
@@ -0,0 +1,110 @@
+{
+ "challengeType": "Code",
+ "challengeName": "Quartz Energy Geosteer Assist - Formation Interpolation",
+ "challengeId": 30060651,
+ "projectId": 15399,
+ "forumId": "38854",
+ "detailedRequirements": "Some requirements",
+ "finalSubmissionGuidelines": "Some guidelines",
+ "screeningScorecardId": null,
+ "reviewScorecardId": "30002053",
+ "cmcTaskId": "",
+ "numberOfCheckpointsPrizes": 0,
+ "topCheckPointPrize": "",
+ "postingDate": "2017-11-23T01:03:26Z",
+ "registrationEndDate": "2017-11-25T01:04:02Z",
+ "checkpointSubmissionEndDate": null,
+ "submissionEndDate": "2017-11-29T01:07:43Z",
+ "reviewType": "COMMUNITY",
+ "environment": "",
+ "codeRepo": "",
+ "forumLink": "https://apps.topcoder.com/forums/?module=Category&categoryID=38854",
+ "appealsEndDate": "2017-12-01T01:07:00Z",
+ "finalFixEndDate": null,
+ "currentStatus": "Active",
+ "digitalRunPoints": null,
+ "challengeCommunity": "develop",
+ "directUrl": "https://www.topcoder.com/direct/contest/detail.action?projectId=30060651",
+ "technology": ["Java"],
+ "prize": [1000, 500],
+ "currentPhaseName": "Review",
+ "currentPhaseRemainingTime": 61782,
+ "currentPhaseEndDate": "2017-11-30T01:07:00Z",
+ "platforms": ["Other"],
+ "event": {
+ "id": 3450,
+ "eventDescription": "2018 Topcoder(R) Open",
+ "eventShortDesc": "tco18"
+ },
+ "terms": [
+ {
+ "termsOfUseId": 21193,
+ "title": "Standard Terms for Topcoder Competitions v2.1",
+ "url": "",
+ "agreeabilityType": "Electronically-agreeable",
+ "role": "Submitter"
+ },
+ {
+ "termsOfUseId": 20704,
+ "title": "Standard Reviewer Terms v1.0",
+ "url": "",
+ "agreeabilityType": "Electronically-agreeable",
+ "role": "Primary Screener"
+ }
+ ],
+ "registrants": {
+ "handle": "spanhawk",
+ "reliability": "n/a",
+ "registrationDate": "2017-11-25T01:00:41Z",
+ "submissionDate": null,
+ "colorStyle": "color: #000000",
+ "rating": null
+ },
+ "phases": [
+ {
+ "type": "Registration",
+ "status": "Closed",
+ "scheduledStartTime": "2017-11-23T01:03:26Z",
+ "actualStartTime": "2017-11-23T01:03:26Z",
+ "scheduledEndTime": "2017-11-25T01:04:02Z",
+ "actualEndTime": "2017-11-25T01:04:02Z"
+ },
+ {
+ "type": "Submission",
+ "status": "Closed",
+ "scheduledStartTime": "2017-11-23T01:11:16Z",
+ "actualStartTime": "2017-11-23T01:11:16Z",
+ "scheduledEndTime": "2017-11-29T01:07:43Z",
+ "actualEndTime": "2017-11-29T01:07:43Z"
+ },
+ {
+ "type": "Review",
+ "status": "Open",
+ "scheduledStartTime": "2017-11-29T01:07:51Z",
+ "actualStartTime": "2017-11-29T01:07:51Z",
+ "scheduledEndTime": "2017-11-30T01:07:00Z",
+ "actualEndTime": null
+ },
+ {
+ "type": "Appeals",
+ "status": "Scheduled",
+ "scheduledStartTime": "2017-11-30T01:07:00Z",
+ "actualStartTime": null,
+ "scheduledEndTime": "2017-11-30T01:07:00Z",
+ "actualEndTime": null
+ },
+ {
+ "type": "Appeals Response",
+ "status": "Scheduled",
+ "scheduledStartTime": "2017-11-30T01:07:00Z",
+ "actualStartTime": null,
+ "scheduledEndTime": "2017-12-01T01:07:00Z",
+ "actualEndTime": null
+ }
+ ],
+ "submissions": [],
+ "checkpoints": [],
+ "numberOfRegistrants": 40,
+ "numberOfSubmissions": 4,
+ "numberOfCheckpointSubmissions": 0
+}
diff --git a/src/apps/earn/src/services/__mocks__/data/challenges-v3.json b/src/apps/earn/src/services/__mocks__/data/challenges-v3.json
new file mode 100644
index 000000000..d91d81c22
--- /dev/null
+++ b/src/apps/earn/src/services/__mocks__/data/challenges-v3.json
@@ -0,0 +1,8154 @@
+{
+ "id": "4e007f05:15d6095a9f7:-1fdd",
+ "result": {
+ "success": true,
+ "status": 200,
+ "metadata": {
+ "totalCount": 26044
+ },
+ "content": [
+ {
+ "updatedAt": "2017-11-29T06:07Z",
+ "createdAt": "2017-11-23T05:24Z",
+ "createdBy": "8544935",
+ "updatedBy": "22841596",
+ "technologies": "Java",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Quartz Energy Geosteer Assist - Formation Interpolation",
+ "reviewType": "COMMUNITY",
+ "id": 30060651,
+ "forumId": 38854,
+ "numSubmissions": 4,
+ "numRegistrants": 40,
+ "registrationStartDate": "2017-11-23T06:03:26.123Z",
+ "registrationEndDate": "2017-11-25T06:04:02.977Z",
+ "submissionEndDate": "2017-11-29T06:07:43.413Z",
+ "platforms": "Other",
+ "totalPrize": 1500,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30060651,
+ "id": 875368,
+ "phaseType": "Appeals",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2017-11-30T06:07Z",
+ "scheduledEndTime": "2017-11-30T18:07Z",
+ "duration": 43200000,
+ "updatedAt": "2017-11-29T01:07Z",
+ "createdAt": "2017-11-23T00:24Z",
+ "createdBy": "8544935",
+ "updatedBy": "22841596"
+ },
+ "projectId": 15399,
+ "currentPhases": [
+ {
+ "challengeId": 30060651,
+ "id": 875367,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2017-11-29T06:07Z",
+ "scheduledEndTime": "2017-11-30T06:07Z",
+ "actualStartTime": "2017-11-29T06:07Z",
+ "duration": 86400000,
+ "updatedAt": "2017-11-29T01:07Z",
+ "createdAt": "2017-11-23T00:24Z",
+ "createdBy": "8544935",
+ "updatedBy": "22841596"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30060651,
+ "id": 875365,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-11-23T06:03Z",
+ "scheduledEndTime": "2017-11-25T06:04Z",
+ "actualStartTime": "2017-11-23T06:03Z",
+ "actualEndTime": "2017-11-25T06:04Z",
+ "fixedStartTime": "2017-11-23T06:00Z",
+ "duration": 172800000,
+ "updatedAt": "2017-11-29T01:07Z",
+ "createdAt": "2017-11-23T00:24Z",
+ "createdBy": "8544935",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30060651,
+ "id": 875366,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-11-23T06:11Z",
+ "scheduledEndTime": "2017-11-29T06:07Z",
+ "actualStartTime": "2017-11-23T06:11Z",
+ "actualEndTime": "2017-11-29T06:07Z",
+ "duration": 518100000,
+ "updatedAt": "2017-11-29T01:07Z",
+ "createdAt": "2017-11-23T00:24Z",
+ "createdBy": "8544935",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30060651,
+ "id": 875367,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2017-11-29T06:07Z",
+ "scheduledEndTime": "2017-11-30T06:07Z",
+ "actualStartTime": "2017-11-29T06:07Z",
+ "duration": 86400000,
+ "updatedAt": "2017-11-29T01:07Z",
+ "createdAt": "2017-11-23T00:24Z",
+ "createdBy": "8544935",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30060651,
+ "id": 875368,
+ "phaseType": "Appeals",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2017-11-30T06:07Z",
+ "scheduledEndTime": "2017-11-30T18:07Z",
+ "duration": 43200000,
+ "updatedAt": "2017-11-29T01:07Z",
+ "createdAt": "2017-11-23T00:24Z",
+ "createdBy": "8544935",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30060651,
+ "id": 875369,
+ "phaseType": "Appeals Response",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2017-11-30T18:07Z",
+ "scheduledEndTime": "2017-12-01T06:07Z",
+ "duration": 43200000,
+ "updatedAt": "2017-11-29T01:07Z",
+ "createdAt": "2017-11-23T00:24Z",
+ "createdBy": "8544935",
+ "updatedBy": "22841596"
+ }
+ ],
+ "prizes": [1000, 500],
+ "events": [
+ {
+ "eventId": 3450,
+ "eventName": "tco18",
+ "projectId": 30060651
+ }
+ ],
+ "isTask": false,
+ "environment": "",
+ "codeRepo": ""
+ },
+ {
+ "updatedAt": "2016-09-15T11:20Z",
+ "createdAt": "2016-09-15T11:18Z",
+ "createdBy": "40152643",
+ "updatedBy": "40152643",
+ "technologies": "ActionScript",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "FIRST_2_FINISH",
+ "name": "Foo dev 2",
+ "reviewType": "INTERNAL",
+ "id": 30050440,
+ "forumId": 29250,
+ "numSubmissions": 2,
+ "numRegistrants": 5,
+ "registrationStartDate": "2016-09-15T11:20:35.250Z",
+ "registrationEndDate": "2017-10-15T11:20:00.000Z",
+ "submissionEndDate": "2017-10-15T11:20:00.000Z",
+ "platforms": "Brivo Labs",
+ "totalPrize": 800,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30050440,
+ "id": 741468,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-09-15T11:25Z",
+ "scheduledEndTime": "2016-09-16T11:25Z",
+ "duration": 86400000,
+ "updatedAt": "2016-09-15T07:20Z",
+ "createdAt": "2016-09-15T07:18Z",
+ "createdBy": "40152643",
+ "updatedBy": "40152643"
+ },
+ "projectId": 9043,
+ "currentPhases": [
+ {
+ "challengeId": 30050440,
+ "id": 741469,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-09-15T11:25Z",
+ "scheduledEndTime": "2017-10-15T11:20Z",
+ "actualStartTime": "2016-09-15T11:20Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-09-15T07:20Z",
+ "createdAt": "2016-09-15T07:18Z",
+ "createdBy": "40152643",
+ "updatedBy": "40152643"
+ },
+ {
+ "challengeId": 30050440,
+ "id": 741467,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-09-15T11:20Z",
+ "scheduledEndTime": "2017-10-15T11:20Z",
+ "actualStartTime": "2016-09-15T11:20Z",
+ "fixedStartTime": "2016-09-14T13:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-09-15T07:20Z",
+ "createdAt": "2016-09-15T07:18Z",
+ "createdBy": "40152643",
+ "updatedBy": "40152643"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30050440,
+ "id": 741467,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-09-15T11:20Z",
+ "scheduledEndTime": "2017-10-15T11:20Z",
+ "actualStartTime": "2016-09-15T11:20Z",
+ "fixedStartTime": "2016-09-14T13:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-09-15T07:20Z",
+ "createdAt": "2016-09-15T07:18Z",
+ "createdBy": "40152643",
+ "updatedBy": "40152643"
+ },
+ {
+ "challengeId": 30050440,
+ "id": 741468,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-09-15T11:25Z",
+ "scheduledEndTime": "2016-09-16T11:25Z",
+ "duration": 86400000,
+ "updatedAt": "2016-09-15T07:20Z",
+ "createdAt": "2016-09-15T07:18Z",
+ "createdBy": "40152643",
+ "updatedBy": "40152643"
+ },
+ {
+ "challengeId": 30050440,
+ "id": 741469,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-09-15T11:25Z",
+ "scheduledEndTime": "2017-10-15T11:20Z",
+ "actualStartTime": "2016-09-15T11:20Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-09-15T07:20Z",
+ "createdAt": "2016-09-15T07:18Z",
+ "createdBy": "40152643",
+ "updatedBy": "40152643"
+ }
+ ],
+ "prizes": [800],
+ "reliabilityBonus": 160,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2017-05-15T17:03Z",
+ "createdAt": "2017-03-26T14:25Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "WEB_DESIGNS",
+ "name": "Test Design Challenge for Submission Management Page",
+ "reviewType": "INTERNAL",
+ "id": 30050696,
+ "forumId": 595805,
+ "numSubmissions": 2,
+ "numRegistrants": 5,
+ "registrationStartDate": "2017-03-27T20:38:52.000Z",
+ "registrationEndDate": "2017-05-18T15:59:00.000Z",
+ "checkpointSubmissionEndDate": "2017-03-30T20:34:48.085Z",
+ "submissionEndDate": "2017-07-14T11:59:00.000Z",
+ "platforms": "",
+ "totalCheckpointPrize": 5,
+ "totalPrize": 2,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30050696,
+ "id": 742151,
+ "phaseType": "Screening",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2017-07-14T11:59Z",
+ "scheduledEndTime": "2017-07-14T15:59Z",
+ "duration": 14400000,
+ "updatedAt": "2017-05-15T13:03Z",
+ "createdAt": "2017-03-26T10:25Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ "projectId": 10833,
+ "currentPhases": [
+ {
+ "challengeId": 30050696,
+ "id": 742146,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2017-03-27T20:38Z",
+ "scheduledEndTime": "2017-05-18T15:59Z",
+ "actualStartTime": "2017-03-27T20:38Z",
+ "fixedStartTime": "2017-03-27T20:38Z",
+ "duration": 4476060000,
+ "updatedAt": "2017-05-15T13:03Z",
+ "createdAt": "2017-03-26T10:25Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050696,
+ "id": 742148,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2017-03-27T20:39Z",
+ "scheduledEndTime": "2017-07-14T11:59Z",
+ "actualStartTime": "2017-03-27T20:39Z",
+ "duration": 9386408000,
+ "updatedAt": "2017-05-15T13:03Z",
+ "createdAt": "2017-03-26T10:25Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30050696,
+ "id": 742144,
+ "phaseType": "Specification Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-03-26T14:27Z",
+ "scheduledEndTime": "2017-03-26T14:28Z",
+ "actualStartTime": "2017-03-26T14:27Z",
+ "actualEndTime": "2017-03-26T14:28Z",
+ "fixedStartTime": "2017-03-26T14:27Z",
+ "duration": 172800000,
+ "updatedAt": "2017-05-15T13:03Z",
+ "createdAt": "2017-03-26T10:25Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050696,
+ "id": 742145,
+ "phaseType": "Specification Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-03-26T14:28Z",
+ "scheduledEndTime": "2017-03-27T01:34Z",
+ "actualStartTime": "2017-03-26T14:28Z",
+ "actualEndTime": "2017-03-27T01:34Z",
+ "duration": 21600000,
+ "updatedAt": "2017-05-15T13:03Z",
+ "createdAt": "2017-03-26T10:25Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050696,
+ "id": 742146,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2017-03-27T20:38Z",
+ "scheduledEndTime": "2017-05-18T15:59Z",
+ "actualStartTime": "2017-03-27T20:38Z",
+ "fixedStartTime": "2017-03-27T20:38Z",
+ "duration": 4476060000,
+ "updatedAt": "2017-05-15T13:03Z",
+ "createdAt": "2017-03-26T10:25Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050696,
+ "id": 742147,
+ "phaseType": "Checkpoint Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-03-27T20:39Z",
+ "scheduledEndTime": "2017-03-30T20:34Z",
+ "actualStartTime": "2017-03-27T20:39Z",
+ "actualEndTime": "2017-03-30T20:34Z",
+ "duration": 258956085,
+ "updatedAt": "2017-05-15T13:03Z",
+ "createdAt": "2017-03-26T10:25Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050696,
+ "id": 742148,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2017-03-27T20:39Z",
+ "scheduledEndTime": "2017-07-14T11:59Z",
+ "actualStartTime": "2017-03-27T20:39Z",
+ "duration": 9386408000,
+ "updatedAt": "2017-05-15T13:03Z",
+ "createdAt": "2017-03-26T10:25Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050696,
+ "id": 742149,
+ "phaseType": "Checkpoint Screening",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-03-30T20:35Z",
+ "scheduledEndTime": "2017-03-31T13:45Z",
+ "actualStartTime": "2017-03-30T20:35Z",
+ "actualEndTime": "2017-03-31T13:45Z",
+ "duration": 14400000,
+ "updatedAt": "2017-05-15T13:03Z",
+ "createdAt": "2017-03-26T10:25Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050696,
+ "id": 742150,
+ "phaseType": "Checkpoint Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-03-31T13:45Z",
+ "scheduledEndTime": "2017-03-31T13:50Z",
+ "actualStartTime": "2017-03-31T13:45Z",
+ "actualEndTime": "2017-03-31T13:50Z",
+ "duration": 172800000,
+ "updatedAt": "2017-05-15T13:03Z",
+ "createdAt": "2017-03-26T10:25Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050696,
+ "id": 742151,
+ "phaseType": "Screening",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2017-07-14T11:59Z",
+ "scheduledEndTime": "2017-07-14T15:59Z",
+ "duration": 14400000,
+ "updatedAt": "2017-05-15T13:03Z",
+ "createdAt": "2017-03-26T10:25Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050696,
+ "id": 742152,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2017-07-14T15:59Z",
+ "scheduledEndTime": "2017-07-20T15:59Z",
+ "duration": 518400000,
+ "updatedAt": "2017-05-15T13:03Z",
+ "createdAt": "2017-03-26T10:25Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050696,
+ "id": 742153,
+ "phaseType": "Approval",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2017-07-20T15:59Z",
+ "scheduledEndTime": "2017-07-25T15:59Z",
+ "duration": 432000000,
+ "updatedAt": "2017-05-15T13:03Z",
+ "createdAt": "2017-03-26T10:25Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [1, 1, 1],
+ "winners": [
+ {
+ "userId": 40153446,
+ "type": "checkpoint",
+ "handle": "direct_user",
+ "placement": 1
+ },
+ {
+ "userId": 40152905,
+ "type": "checkpoint",
+ "handle": "dan_developer",
+ "placement": 2
+ },
+ {
+ "userId": 40152905,
+ "type": "checkpoint",
+ "handle": "dan_developer",
+ "placement": 3
+ },
+ {
+ "userId": 40152905,
+ "type": "checkpoint",
+ "handle": "dan_developer",
+ "placement": 4
+ },
+ {
+ "userId": 124861,
+ "type": "checkpoint",
+ "handle": "ksmith",
+ "placement": 5
+ }
+ ],
+ "reliabilityBonus": 0.2,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2017-04-11T14:41Z",
+ "createdAt": "2016-02-27T02:42Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "Data Science",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "FIRST_2_FINISH",
+ "name": "Dummy F2F Challenge to Test - change",
+ "reviewType": "COMMUNITY",
+ "id": 30049604,
+ "forumId": 28530,
+ "numSubmissions": 0,
+ "numRegistrants": 1,
+ "registrationStartDate": "2016-02-26T21:48:19.819Z",
+ "registrationEndDate": "2017-03-27T21:47:00.000Z",
+ "submissionEndDate": "2017-03-27T21:52:00.000Z",
+ "platforms": "AWS",
+ "totalPrize": 800,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30049604,
+ "id": 734164,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-02-26T21:53Z",
+ "scheduledEndTime": "2016-02-27T21:53Z",
+ "duration": 86400000,
+ "updatedAt": "2017-04-11T10:41Z",
+ "createdAt": "2016-02-26T16:42Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ "projectId": 7377,
+ "currentPhases": [
+ {
+ "challengeId": 30049604,
+ "id": 734163,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-26T21:48Z",
+ "scheduledEndTime": "2017-03-27T21:47Z",
+ "actualStartTime": "2016-02-26T21:48Z",
+ "fixedStartTime": "2016-02-26T21:48Z",
+ "duration": 34127940000,
+ "updatedAt": "2017-04-11T10:41Z",
+ "createdAt": "2016-02-26T16:42Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049604,
+ "id": 734165,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-26T21:53Z",
+ "scheduledEndTime": "2017-03-27T21:52Z",
+ "actualStartTime": "2016-02-26T21:53Z",
+ "duration": 34127940000,
+ "updatedAt": "2017-04-11T10:41Z",
+ "createdAt": "2016-02-26T16:42Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049604,
+ "id": 734163,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-26T21:48Z",
+ "scheduledEndTime": "2017-03-27T21:47Z",
+ "actualStartTime": "2016-02-26T21:48Z",
+ "fixedStartTime": "2016-02-26T21:48Z",
+ "duration": 34127940000,
+ "updatedAt": "2017-04-11T10:41Z",
+ "createdAt": "2016-02-26T16:42Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049604,
+ "id": 734164,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-02-26T21:53Z",
+ "scheduledEndTime": "2016-02-27T21:53Z",
+ "duration": 86400000,
+ "updatedAt": "2017-04-11T10:41Z",
+ "createdAt": "2016-02-26T16:42Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049604,
+ "id": 734165,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-26T21:53Z",
+ "scheduledEndTime": "2017-03-27T21:52Z",
+ "actualStartTime": "2016-02-26T21:53Z",
+ "duration": 34127940000,
+ "updatedAt": "2017-04-11T10:41Z",
+ "createdAt": "2016-02-26T16:42Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [800],
+ "events": [
+ {
+ "eventId": 3446,
+ "eventName": "tco16",
+ "projectId": 30049604
+ }
+ ],
+ "reliabilityBonus": 160,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2017-03-21T13:32Z",
+ "createdAt": "2017-02-23T14:56Z",
+ "createdBy": "40153446",
+ "updatedBy": "22841596",
+ "technologies": ".NET",
+ "status": "COMPLETED",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Challenging Challenge",
+ "reviewType": "INTERNAL",
+ "id": 30050681,
+ "forumId": 29550,
+ "numSubmissions": 1,
+ "numRegistrants": 2,
+ "registrationStartDate": "2017-02-23T15:00:56.645Z",
+ "registrationEndDate": "2017-03-12T12:08:04.899Z",
+ "submissionEndDate": "2017-03-20T13:27:19.001Z",
+ "platforms": "Android",
+ "totalPrize": 0,
+ "isPrivate": false,
+ "projectId": 10833,
+ "currentPhases": [],
+ "allPhases": [
+ {
+ "challengeId": 30050681,
+ "id": 742055,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-02-23T15:00Z",
+ "scheduledEndTime": "2017-03-12T12:08Z",
+ "actualStartTime": "2017-02-23T15:00Z",
+ "actualEndTime": "2017-03-12T12:08Z",
+ "fixedStartTime": "2017-02-22T14:00Z",
+ "duration": 17940000,
+ "updatedAt": "2017-03-21T09:32Z",
+ "createdAt": "2017-02-23T09:56Z",
+ "createdBy": "40153446",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050681,
+ "id": 742056,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-03-12T12:08Z",
+ "scheduledEndTime": "2017-03-20T13:27Z",
+ "actualStartTime": "2017-03-12T12:08Z",
+ "actualEndTime": "2017-03-20T13:27Z",
+ "duration": 2040000,
+ "updatedAt": "2017-03-21T09:32Z",
+ "createdAt": "2017-02-23T09:56Z",
+ "createdBy": "40153446",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050681,
+ "id": 742057,
+ "phaseType": "Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-03-20T13:27Z",
+ "scheduledEndTime": "2017-03-20T13:30Z",
+ "actualStartTime": "2017-03-20T13:27Z",
+ "actualEndTime": "2017-03-20T13:30Z",
+ "duration": 172800000,
+ "updatedAt": "2017-03-21T09:32Z",
+ "createdAt": "2017-02-23T09:56Z",
+ "createdBy": "40153446",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050681,
+ "id": 742058,
+ "phaseType": "Appeals",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-03-20T13:30Z",
+ "scheduledEndTime": "2017-03-21T13:31Z",
+ "actualStartTime": "2017-03-20T13:30Z",
+ "actualEndTime": "2017-03-21T13:31Z",
+ "duration": 86400000,
+ "updatedAt": "2017-03-21T09:32Z",
+ "createdAt": "2017-02-23T09:56Z",
+ "createdBy": "40153446",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050681,
+ "id": 742059,
+ "phaseType": "Appeals Response",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-03-21T13:31Z",
+ "scheduledEndTime": "2017-03-21T13:32Z",
+ "actualStartTime": "2017-03-21T13:31Z",
+ "actualEndTime": "2017-03-21T13:32Z",
+ "duration": 43200000,
+ "updatedAt": "2017-03-21T09:32Z",
+ "createdAt": "2017-02-23T09:56Z",
+ "createdBy": "40153446",
+ "updatedBy": "22841596"
+ }
+ ],
+ "isTask": false
+ },
+ {
+ "updatedAt": "2017-03-17T21:34Z",
+ "createdAt": "2017-03-12T13:11Z",
+ "createdBy": "40153446",
+ "updatedBy": "22841596",
+ "technologies": ".NET",
+ "status": "COMPLETED",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Complete Appeals Test Challenge",
+ "reviewType": "INTERNAL",
+ "id": 30050691,
+ "forumId": 29554,
+ "numSubmissions": 2,
+ "numRegistrants": 2,
+ "registrationStartDate": "2017-03-12T13:19:47.267Z",
+ "registrationEndDate": "2017-03-12T13:23:44.112Z",
+ "submissionEndDate": "2017-03-12T13:28:21.915Z",
+ "platforms": "Android",
+ "totalPrize": 0,
+ "isPrivate": false,
+ "projectId": 10833,
+ "currentPhases": [],
+ "allPhases": [
+ {
+ "challengeId": 30050691,
+ "id": 742091,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-03-12T13:19Z",
+ "scheduledEndTime": "2017-03-12T13:23Z",
+ "actualStartTime": "2017-03-12T13:19Z",
+ "actualEndTime": "2017-03-12T13:23Z",
+ "fixedStartTime": "2017-03-12T13:00Z",
+ "duration": 252733,
+ "updatedAt": "2017-03-17T17:34Z",
+ "createdAt": "2017-03-12T09:11Z",
+ "createdBy": "40153446",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050691,
+ "id": 742092,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-03-12T13:25Z",
+ "scheduledEndTime": "2017-03-12T13:28Z",
+ "actualStartTime": "2017-03-12T13:25Z",
+ "actualEndTime": "2017-03-12T13:28Z",
+ "duration": 100860,
+ "updatedAt": "2017-03-17T17:34Z",
+ "createdAt": "2017-03-12T09:11Z",
+ "createdBy": "40153446",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050691,
+ "id": 742093,
+ "phaseType": "Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-03-12T13:28Z",
+ "scheduledEndTime": "2017-03-12T13:32Z",
+ "actualStartTime": "2017-03-12T13:28Z",
+ "actualEndTime": "2017-03-12T13:32Z",
+ "duration": 172800000,
+ "updatedAt": "2017-03-17T17:34Z",
+ "createdAt": "2017-03-12T09:11Z",
+ "createdBy": "40153446",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050691,
+ "id": 742094,
+ "phaseType": "Appeals",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-03-12T13:32Z",
+ "scheduledEndTime": "2017-03-17T21:33Z",
+ "actualStartTime": "2017-03-12T13:32Z",
+ "actualEndTime": "2017-03-17T21:33Z",
+ "duration": 460800000,
+ "updatedAt": "2017-03-17T17:34Z",
+ "createdAt": "2017-03-12T09:11Z",
+ "createdBy": "40153446",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050691,
+ "id": 742095,
+ "phaseType": "Appeals Response",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-03-17T21:33Z",
+ "scheduledEndTime": "2017-03-17T21:34Z",
+ "actualStartTime": "2017-03-17T21:33Z",
+ "actualEndTime": "2017-03-17T21:34Z",
+ "duration": 43200000,
+ "updatedAt": "2017-03-17T17:34Z",
+ "createdAt": "2017-03-12T09:11Z",
+ "createdBy": "40153446",
+ "updatedBy": "22841596"
+ }
+ ],
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-02-04T06:25Z",
+ "createdAt": "2016-01-19T14:21Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "DESIGN_FIRST_2_FINISH",
+ "name": "Vikas Design Challenge 2",
+ "reviewType": "INTERNAL",
+ "id": 30049542,
+ "forumId": 593933,
+ "numSubmissions": 13,
+ "numRegistrants": 17,
+ "registrationStartDate": "2016-01-19T09:23:27.023Z",
+ "registrationEndDate": "2017-02-18T09:23:00.000Z",
+ "submissionEndDate": "2017-03-05T06:25:00.000Z",
+ "platforms": "",
+ "totalPrize": 200,
+ "isPrivate": false,
+ "projectId": 9043,
+ "currentPhases": [
+ {
+ "challengeId": 30049542,
+ "id": 733691,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-01-19T09:23Z",
+ "scheduledEndTime": "2017-02-18T09:23Z",
+ "actualStartTime": "2016-01-19T09:23Z",
+ "fixedStartTime": "2016-01-19T09:20Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-05T18:29Z",
+ "createdAt": "2016-01-19T04:21Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049542,
+ "id": 733692,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-04T06:25Z",
+ "scheduledEndTime": "2017-03-05T06:25Z",
+ "actualStartTime": "2016-02-04T06:25Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-05T18:29Z",
+ "createdAt": "2016-01-19T04:21Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049542,
+ "id": 733693,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-05T23:29Z",
+ "scheduledEndTime": "2017-03-06T23:29Z",
+ "actualStartTime": "2016-02-05T23:29Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-05T18:29Z",
+ "createdAt": "2016-01-19T04:21Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30049542,
+ "id": 733691,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-01-19T09:23Z",
+ "scheduledEndTime": "2017-02-18T09:23Z",
+ "actualStartTime": "2016-01-19T09:23Z",
+ "fixedStartTime": "2016-01-19T09:20Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-05T18:29Z",
+ "createdAt": "2016-01-19T04:21Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049542,
+ "id": 733692,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-04T06:25Z",
+ "scheduledEndTime": "2017-03-05T06:25Z",
+ "actualStartTime": "2016-02-04T06:25Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-05T18:29Z",
+ "createdAt": "2016-01-19T04:21Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049542,
+ "id": 733693,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-05T23:29Z",
+ "scheduledEndTime": "2017-03-06T23:29Z",
+ "actualStartTime": "2016-02-05T23:29Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-05T18:29Z",
+ "createdAt": "2016-01-19T04:21Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ }
+ ],
+ "prizes": [200],
+ "reliabilityBonus": 40,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-03-14T18:46Z",
+ "createdAt": "2016-02-02T23:12Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "DESIGN_FIRST_2_FINISH",
+ "name": "Submission Test Challenge 2",
+ "reviewType": "INTERNAL",
+ "id": 30049552,
+ "forumId": 593937,
+ "numSubmissions": 101,
+ "numRegistrants": 16,
+ "registrationStartDate": "2016-02-02T18:37:30.608Z",
+ "registrationEndDate": "2017-03-03T18:36:00.000Z",
+ "submissionEndDate": "2017-03-03T18:43:00.000Z",
+ "platforms": "",
+ "totalPrize": 200,
+ "isPrivate": false,
+ "projectId": 7377,
+ "currentPhases": [
+ {
+ "challengeId": 30049552,
+ "id": 733715,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-02T18:37Z",
+ "scheduledEndTime": "2017-03-03T18:36Z",
+ "actualStartTime": "2016-02-02T18:37Z",
+ "fixedStartTime": "2016-02-02T18:37Z",
+ "duration": 34127969392,
+ "updatedAt": "2016-03-14T14:46Z",
+ "createdAt": "2016-02-02T13:12Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049552,
+ "id": 733716,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-02T18:44Z",
+ "scheduledEndTime": "2017-03-03T18:43Z",
+ "actualStartTime": "2016-02-02T18:44Z",
+ "duration": 34127955808,
+ "updatedAt": "2016-03-14T14:46Z",
+ "createdAt": "2016-02-02T13:12Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049552,
+ "id": 733717,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-02T18:57Z",
+ "scheduledEndTime": "2016-03-03T18:57Z",
+ "actualStartTime": "2016-02-02T18:57Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-03-14T14:46Z",
+ "createdAt": "2016-02-02T13:12Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30049552,
+ "id": 733715,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-02T18:37Z",
+ "scheduledEndTime": "2017-03-03T18:36Z",
+ "actualStartTime": "2016-02-02T18:37Z",
+ "fixedStartTime": "2016-02-02T18:37Z",
+ "duration": 34127969392,
+ "updatedAt": "2016-03-14T14:46Z",
+ "createdAt": "2016-02-02T13:12Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049552,
+ "id": 733716,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-02T18:44Z",
+ "scheduledEndTime": "2017-03-03T18:43Z",
+ "actualStartTime": "2016-02-02T18:44Z",
+ "duration": 34127955808,
+ "updatedAt": "2016-03-14T14:46Z",
+ "createdAt": "2016-02-02T13:12Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049552,
+ "id": 733717,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-02T18:57Z",
+ "scheduledEndTime": "2016-03-03T18:57Z",
+ "actualStartTime": "2016-02-02T18:57Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-03-14T14:46Z",
+ "createdAt": "2016-02-02T13:12Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [200],
+ "reliabilityBonus": 40,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2017-04-06T14:19Z",
+ "createdAt": "2017-02-23T14:28Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899",
+ "technologies": "AJAX",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Challenging Challenge 1",
+ "reviewType": "INTERNAL",
+ "id": 30050680,
+ "forumId": 29549,
+ "numSubmissions": 0,
+ "numRegistrants": 3,
+ "registrationStartDate": "2017-02-23T14:36:15.983Z",
+ "registrationEndDate": "2017-02-23T14:49:19.574Z",
+ "submissionEndDate": "2017-02-23T14:50:14.033Z",
+ "platforms": "Box",
+ "totalPrize": 0,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30050680,
+ "id": 742047,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2017-02-23T14:50Z",
+ "scheduledEndTime": "2017-02-25T14:50Z",
+ "duration": 172800000,
+ "updatedAt": "2017-04-06T10:19Z",
+ "createdAt": "2017-02-23T09:28Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ "projectId": 10833,
+ "currentPhases": [],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30050680,
+ "id": 742045,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-02-23T14:36Z",
+ "scheduledEndTime": "2017-02-23T14:49Z",
+ "actualStartTime": "2017-02-23T14:36Z",
+ "actualEndTime": "2017-02-23T14:49Z",
+ "fixedStartTime": "2017-02-23T14:36Z",
+ "duration": 824017,
+ "updatedAt": "2017-04-06T10:19Z",
+ "createdAt": "2017-02-23T09:28Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050680,
+ "id": 742046,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2017-02-23T14:49Z",
+ "scheduledEndTime": "2017-02-23T14:50Z",
+ "actualStartTime": "2017-02-23T14:49Z",
+ "actualEndTime": "2017-02-23T14:50Z",
+ "duration": 21731,
+ "updatedAt": "2017-04-06T10:19Z",
+ "createdAt": "2017-02-23T09:28Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050680,
+ "id": 742047,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2017-02-23T14:50Z",
+ "scheduledEndTime": "2017-02-25T14:50Z",
+ "duration": 172800000,
+ "updatedAt": "2017-04-06T10:19Z",
+ "createdAt": "2017-02-23T09:28Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050680,
+ "id": 742048,
+ "phaseType": "Appeals",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2017-02-25T14:50Z",
+ "scheduledEndTime": "2017-02-26T14:50Z",
+ "duration": 86400000,
+ "updatedAt": "2017-04-06T10:19Z",
+ "createdAt": "2017-02-23T09:28Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050680,
+ "id": 742049,
+ "phaseType": "Appeals Response",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2017-02-26T14:50Z",
+ "scheduledEndTime": "2017-02-27T02:50Z",
+ "duration": 43200000,
+ "updatedAt": "2017-04-06T10:19Z",
+ "createdAt": "2017-02-23T09:28Z",
+ "createdBy": "40153446",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [0],
+ "drPoints": 0,
+ "reliabilityBonus": 0,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-12-23T14:15Z",
+ "createdAt": "2016-12-23T13:56Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "AJAX",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "FIRST_2_FINISH",
+ "name": "Test Registration Phase",
+ "reviewType": "COMMUNITY",
+ "id": 30050561,
+ "forumId": 29509,
+ "numSubmissions": 0,
+ "numRegistrants": 0,
+ "registrationStartDate": "2016-12-24T14:00:00.000Z",
+ "registrationEndDate": "2017-01-23T14:00:00.000Z",
+ "submissionEndDate": "2017-01-23T14:05:00.000Z",
+ "platforms": "Cisco",
+ "totalPrize": 800,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30050561,
+ "id": 741740,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-12-24T14:05Z",
+ "scheduledEndTime": "2016-12-25T14:05Z",
+ "duration": 86400000,
+ "updatedAt": "2016-12-23T09:15Z",
+ "createdAt": "2016-12-23T08:56Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ "projectId": 10596,
+ "currentPhases": [],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30050561,
+ "id": 741739,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2016-12-24T14:00Z",
+ "scheduledEndTime": "2017-01-23T14:00Z",
+ "fixedStartTime": "2016-12-24T14:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-12-23T09:15Z",
+ "createdAt": "2016-12-23T08:56Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050561,
+ "id": 741740,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-12-24T14:05Z",
+ "scheduledEndTime": "2016-12-25T14:05Z",
+ "duration": 86400000,
+ "updatedAt": "2016-12-23T09:15Z",
+ "createdAt": "2016-12-23T08:56Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050561,
+ "id": 741741,
+ "phaseType": "Submission",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-12-24T14:05Z",
+ "scheduledEndTime": "2017-01-23T14:05Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-12-23T09:15Z",
+ "createdAt": "2016-12-23T08:56Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [800],
+ "drPoints": 0,
+ "reliabilityBonus": 160,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-12-23T13:55Z",
+ "createdAt": "2016-12-23T13:53Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "ActionScript",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "FIRST_2_FINISH",
+ "name": "Private Task Test 1",
+ "reviewType": "COMMUNITY",
+ "id": 30050560,
+ "forumId": 29508,
+ "numSubmissions": 0,
+ "numRegistrants": 0,
+ "registrationStartDate": "2016-12-24T14:00:00.000Z",
+ "registrationEndDate": "2017-01-23T14:00:00.000Z",
+ "submissionEndDate": "2017-01-23T14:05:00.000Z",
+ "platforms": "Beanstalk",
+ "totalPrize": 800,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30050560,
+ "id": 741734,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-12-24T14:05Z",
+ "scheduledEndTime": "2016-12-25T14:05Z",
+ "duration": 86400000,
+ "updatedAt": "2016-12-23T08:55Z",
+ "createdAt": "2016-12-23T08:53Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ "projectId": 10596,
+ "currentPhases": [],
+ "allPhases": [
+ {
+ "challengeId": 30050560,
+ "id": 741733,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2016-12-24T14:00Z",
+ "scheduledEndTime": "2017-01-23T14:00Z",
+ "fixedStartTime": "2016-12-24T14:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-12-23T08:55Z",
+ "createdAt": "2016-12-23T08:53Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050560,
+ "id": 741734,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-12-24T14:05Z",
+ "scheduledEndTime": "2016-12-25T14:05Z",
+ "duration": 86400000,
+ "updatedAt": "2016-12-23T08:55Z",
+ "createdAt": "2016-12-23T08:53Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050560,
+ "id": 741735,
+ "phaseType": "Submission",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-12-24T14:05Z",
+ "scheduledEndTime": "2017-01-23T14:05Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-12-23T08:55Z",
+ "createdAt": "2016-12-23T08:53Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [800],
+ "drPoints": 0,
+ "reliabilityBonus": 160,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-12-23T14:23Z",
+ "createdAt": "2016-09-22T16:18Z",
+ "createdBy": "40152643",
+ "updatedBy": "8547899",
+ "technologies": ".NET",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "FIRST_2_FINISH",
+ "name": "NDA Test 2",
+ "reviewType": "INTERNAL",
+ "id": 30050463,
+ "forumId": 29293,
+ "numSubmissions": 0,
+ "numRegistrants": 0,
+ "registrationStartDate": "2016-09-22T16:24:08.947Z",
+ "registrationEndDate": "2016-10-22T16:24:00.000Z",
+ "submissionEndDate": "2016-10-22T16:29:00.000Z",
+ "platforms": "Brivo Labs",
+ "totalPrize": 800,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30050463,
+ "id": 741520,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-09-22T16:29Z",
+ "scheduledEndTime": "2016-09-23T16:29Z",
+ "duration": 86400000,
+ "updatedAt": "2016-12-23T09:23Z",
+ "createdAt": "2016-09-22T12:18Z",
+ "createdBy": "40152643",
+ "updatedBy": "8547899"
+ },
+ "projectId": 9043,
+ "currentPhases": [
+ {
+ "challengeId": 30050463,
+ "id": 741519,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-09-22T16:24Z",
+ "scheduledEndTime": "2016-10-22T16:24Z",
+ "actualStartTime": "2016-09-22T16:24Z",
+ "fixedStartTime": "2016-09-22T16:24Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-12-23T09:23Z",
+ "createdAt": "2016-09-22T12:18Z",
+ "createdBy": "40152643",
+ "updatedBy": "8547899"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30050463,
+ "id": 741519,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-09-22T16:24Z",
+ "scheduledEndTime": "2016-10-22T16:24Z",
+ "actualStartTime": "2016-09-22T16:24Z",
+ "fixedStartTime": "2016-09-22T16:24Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-12-23T09:23Z",
+ "createdAt": "2016-09-22T12:18Z",
+ "createdBy": "40152643",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050463,
+ "id": 741520,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-09-22T16:29Z",
+ "scheduledEndTime": "2016-09-23T16:29Z",
+ "duration": 86400000,
+ "updatedAt": "2016-12-23T09:23Z",
+ "createdAt": "2016-09-22T12:18Z",
+ "createdBy": "40152643",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050463,
+ "id": 741521,
+ "phaseType": "Submission",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-09-22T16:29Z",
+ "scheduledEndTime": "2016-10-22T16:29Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-12-23T09:23Z",
+ "createdAt": "2016-09-22T12:18Z",
+ "createdBy": "40152643",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [800],
+ "drPoints": 0,
+ "reliabilityBonus": 160,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-09-15T11:16Z",
+ "createdAt": "2016-07-18T23:42Z",
+ "createdBy": "40152643",
+ "updatedBy": "40152643",
+ "technologies": "Apex",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "FIRST_2_FINISH",
+ "name": "Foo challenge 0",
+ "reviewType": "INTERNAL",
+ "id": 30050429,
+ "forumId": 29162,
+ "numSubmissions": 0,
+ "numRegistrants": 3,
+ "registrationStartDate": "2016-07-19T14:07:49.734Z",
+ "registrationEndDate": "2016-08-18T14:07:00.000Z",
+ "submissionEndDate": "2016-08-18T14:12:00.000Z",
+ "platforms": "Box",
+ "totalPrize": 800,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30050429,
+ "id": 741430,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-07-19T14:12Z",
+ "scheduledEndTime": "2016-07-20T14:12Z",
+ "duration": 86400000,
+ "updatedAt": "2016-09-15T07:16Z",
+ "createdAt": "2016-07-18T15:42Z",
+ "createdBy": "40152643",
+ "updatedBy": "40152643"
+ },
+ "projectId": 9043,
+ "currentPhases": [
+ {
+ "challengeId": 30050429,
+ "id": 741429,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-07-19T14:07Z",
+ "scheduledEndTime": "2016-08-18T14:07Z",
+ "actualStartTime": "2016-07-19T14:07Z",
+ "fixedStartTime": "2016-07-19T13:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-09-15T07:16Z",
+ "createdAt": "2016-07-18T15:42Z",
+ "createdBy": "40152643",
+ "updatedBy": "40152643"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30050429,
+ "id": 741429,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-07-19T14:07Z",
+ "scheduledEndTime": "2016-08-18T14:07Z",
+ "actualStartTime": "2016-07-19T14:07Z",
+ "fixedStartTime": "2016-07-19T13:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-09-15T07:16Z",
+ "createdAt": "2016-07-18T15:42Z",
+ "createdBy": "40152643",
+ "updatedBy": "40152643"
+ },
+ {
+ "challengeId": 30050429,
+ "id": 741430,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-07-19T14:12Z",
+ "scheduledEndTime": "2016-07-20T14:12Z",
+ "duration": 86400000,
+ "updatedAt": "2016-09-15T07:16Z",
+ "createdAt": "2016-07-18T15:42Z",
+ "createdBy": "40152643",
+ "updatedBy": "40152643"
+ },
+ {
+ "challengeId": 30050429,
+ "id": 741431,
+ "phaseType": "Submission",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-07-19T14:12Z",
+ "scheduledEndTime": "2016-08-18T14:12Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-09-15T07:16Z",
+ "createdAt": "2016-07-18T15:42Z",
+ "createdBy": "40152643",
+ "updatedBy": "40152643"
+ }
+ ],
+ "prizes": [800],
+ "reliabilityBonus": 160,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-06-03T20:24Z",
+ "createdAt": "2016-06-04T00:23Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "ADO.NET, AJAX, Android, Angular.js, Apache Derby",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "FIRST_2_FINISH",
+ "name": "NDA 1",
+ "reviewType": "INTERNAL",
+ "id": 30050410,
+ "forumId": 29151,
+ "numSubmissions": 0,
+ "numRegistrants": 0,
+ "registrationStartDate": "2016-06-03T20:24:29.093Z",
+ "registrationEndDate": "2016-07-03T20:24:00.000Z",
+ "submissionEndDate": "2016-07-03T20:29:00.000Z",
+ "platforms": "Brivo Labs, Cisco, Cloud Foundry, CloudFactor",
+ "totalPrize": 800,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30050410,
+ "id": 741414,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-06-03T20:29Z",
+ "scheduledEndTime": "2016-06-04T20:29Z",
+ "duration": 86400000,
+ "updatedAt": "2016-06-03T16:24Z",
+ "createdAt": "2016-06-03T16:23Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ "projectId": 9043,
+ "currentPhases": [
+ {
+ "challengeId": 30050410,
+ "id": 741413,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-06-03T20:24Z",
+ "scheduledEndTime": "2016-07-03T20:24Z",
+ "actualStartTime": "2016-06-03T20:24Z",
+ "fixedStartTime": "2016-06-03T13:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-06-03T16:24Z",
+ "createdAt": "2016-06-03T16:23Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30050410,
+ "id": 741413,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-06-03T20:24Z",
+ "scheduledEndTime": "2016-07-03T20:24Z",
+ "actualStartTime": "2016-06-03T20:24Z",
+ "fixedStartTime": "2016-06-03T13:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-06-03T16:24Z",
+ "createdAt": "2016-06-03T16:23Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050410,
+ "id": 741414,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-06-03T20:29Z",
+ "scheduledEndTime": "2016-06-04T20:29Z",
+ "duration": 86400000,
+ "updatedAt": "2016-06-03T16:24Z",
+ "createdAt": "2016-06-03T16:23Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30050410,
+ "id": 741415,
+ "phaseType": "Submission",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-06-03T20:29Z",
+ "scheduledEndTime": "2016-07-03T20:29Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-06-03T16:24Z",
+ "createdAt": "2016-06-03T16:23Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [800],
+ "reliabilityBonus": 160,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-05-19T19:42Z",
+ "createdAt": "2016-05-19T23:42Z",
+ "createdBy": "40135517",
+ "updatedBy": "40135517",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "WEB_DESIGNS",
+ "name": "Find a pen",
+ "reviewType": "INTERNAL",
+ "id": 30050393,
+ "forumId": 595268,
+ "numSubmissions": 1,
+ "numRegistrants": 1,
+ "registrationStartDate": "2016-05-20T13:00:00.000Z",
+ "registrationEndDate": "2016-05-25T13:00:00.000Z",
+ "submissionEndDate": "2016-05-25T13:00:00.000Z",
+ "platforms": "",
+ "totalPrize": 1500,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30050393,
+ "id": 741249,
+ "phaseType": "Screening",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-05-25T13:00Z",
+ "scheduledEndTime": "2016-05-25T17:00Z",
+ "duration": 14400000,
+ "updatedAt": "2016-05-19T15:52Z",
+ "createdAt": "2016-05-19T15:42Z",
+ "createdBy": "40135517",
+ "updatedBy": "22841596"
+ },
+ "projectId": 10202,
+ "currentPhases": [
+ {
+ "challengeId": 30050393,
+ "id": 741246,
+ "phaseType": "Specification Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-05-19T19:52Z",
+ "scheduledEndTime": "2016-05-20T01:52Z",
+ "actualStartTime": "2016-05-19T19:52Z",
+ "duration": 21600000,
+ "updatedAt": "2016-05-19T15:52Z",
+ "createdAt": "2016-05-19T15:42Z",
+ "createdBy": "40135517",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050393,
+ "id": 741247,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-05-20T13:00Z",
+ "scheduledEndTime": "2016-05-25T13:00Z",
+ "fixedStartTime": "2016-05-20T13:00Z",
+ "duration": 432000000,
+ "updatedAt": "2016-05-19T15:52Z",
+ "createdAt": "2016-05-19T15:42Z",
+ "createdBy": "40135517",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050393,
+ "id": 741248,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-05-20T13:05Z",
+ "scheduledEndTime": "2016-05-25T13:00Z",
+ "duration": 431700000,
+ "updatedAt": "2016-05-19T15:52Z",
+ "createdAt": "2016-05-19T15:42Z",
+ "createdBy": "40135517",
+ "updatedBy": "22841596"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30050393,
+ "id": 741245,
+ "phaseType": "Specification Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2016-05-19T19:47Z",
+ "scheduledEndTime": "2016-05-19T19:52Z",
+ "actualStartTime": "2016-05-19T19:47Z",
+ "actualEndTime": "2016-05-19T19:52Z",
+ "fixedStartTime": "2016-05-18T07:00Z",
+ "duration": 172800000,
+ "updatedAt": "2016-05-19T15:52Z",
+ "createdAt": "2016-05-19T15:42Z",
+ "createdBy": "40135517",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050393,
+ "id": 741246,
+ "phaseType": "Specification Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-05-19T19:52Z",
+ "scheduledEndTime": "2016-05-20T01:52Z",
+ "actualStartTime": "2016-05-19T19:52Z",
+ "duration": 21600000,
+ "updatedAt": "2016-05-19T15:52Z",
+ "createdAt": "2016-05-19T15:42Z",
+ "createdBy": "40135517",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050393,
+ "id": 741247,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-05-20T13:00Z",
+ "scheduledEndTime": "2016-05-25T13:00Z",
+ "fixedStartTime": "2016-05-20T13:00Z",
+ "duration": 432000000,
+ "updatedAt": "2016-05-19T15:52Z",
+ "createdAt": "2016-05-19T15:42Z",
+ "createdBy": "40135517",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050393,
+ "id": 741248,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-05-20T13:05Z",
+ "scheduledEndTime": "2016-05-25T13:00Z",
+ "duration": 431700000,
+ "updatedAt": "2016-05-19T15:52Z",
+ "createdAt": "2016-05-19T15:42Z",
+ "createdBy": "40135517",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050393,
+ "id": 741249,
+ "phaseType": "Screening",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-05-25T13:00Z",
+ "scheduledEndTime": "2016-05-25T17:00Z",
+ "duration": 14400000,
+ "updatedAt": "2016-05-19T15:52Z",
+ "createdAt": "2016-05-19T15:42Z",
+ "createdBy": "40135517",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050393,
+ "id": 741250,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-05-25T17:00Z",
+ "scheduledEndTime": "2016-05-31T17:00Z",
+ "duration": 518400000,
+ "updatedAt": "2016-05-19T15:52Z",
+ "createdAt": "2016-05-19T15:42Z",
+ "createdBy": "40135517",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30050393,
+ "id": 741251,
+ "phaseType": "Approval",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-05-31T17:00Z",
+ "scheduledEndTime": "2016-06-05T17:00Z",
+ "duration": 432000000,
+ "updatedAt": "2016-05-19T15:52Z",
+ "createdAt": "2016-05-19T15:42Z",
+ "createdBy": "40135517",
+ "updatedBy": "22841596"
+ }
+ ],
+ "prizes": [1250, 250],
+ "drPoints": 0,
+ "reliabilityBonus": 250,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-02-02T19:27Z",
+ "createdAt": "2016-02-03T00:27Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "DESIGN_FIRST_2_FINISH",
+ "name": "Unregister Testing Challenge",
+ "reviewType": "INTERNAL",
+ "id": 30049553,
+ "forumId": 593938,
+ "numSubmissions": 0,
+ "numRegistrants": 1,
+ "registrationStartDate": "2016-02-02T19:27:52.373Z",
+ "registrationEndDate": "2016-03-03T19:27:00.000Z",
+ "submissionEndDate": "2016-03-03T19:32:00.000Z",
+ "platforms": "",
+ "totalPrize": 200,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30049553,
+ "id": 733722,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-02-02T19:32Z",
+ "scheduledEndTime": "2016-03-03T19:32Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-02T14:27Z",
+ "createdAt": "2016-02-02T14:27Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ "projectId": 7377,
+ "currentPhases": [
+ {
+ "challengeId": 30049553,
+ "id": 733721,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-02T19:27Z",
+ "scheduledEndTime": "2016-03-03T19:27Z",
+ "actualStartTime": "2016-02-02T19:27Z",
+ "fixedStartTime": "2016-02-01T14:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-02T14:27Z",
+ "createdAt": "2016-02-02T14:27Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30049553,
+ "id": 733721,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-02T19:27Z",
+ "scheduledEndTime": "2016-03-03T19:27Z",
+ "actualStartTime": "2016-02-02T19:27Z",
+ "fixedStartTime": "2016-02-01T14:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-02T14:27Z",
+ "createdAt": "2016-02-02T14:27Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049553,
+ "id": 733722,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-02-02T19:32Z",
+ "scheduledEndTime": "2016-03-03T19:32Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-02T14:27Z",
+ "createdAt": "2016-02-02T14:27Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049553,
+ "id": 733723,
+ "phaseType": "Submission",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-02-02T19:32Z",
+ "scheduledEndTime": "2016-03-03T19:32Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-02T14:27Z",
+ "createdAt": "2016-02-02T14:27Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [200],
+ "reliabilityBonus": 40,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-02-01T23:29Z",
+ "createdAt": "2016-02-02T02:51Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "DESIGN_FIRST_2_FINISH",
+ "name": "Submission Test Challenge",
+ "reviewType": "INTERNAL",
+ "id": 30049551,
+ "forumId": 593936,
+ "numSubmissions": 53,
+ "numRegistrants": 1,
+ "registrationStartDate": "2016-02-01T23:23:21.442Z",
+ "registrationEndDate": "2016-03-02T23:23:00.000Z",
+ "submissionEndDate": "2016-03-02T23:29:00.000Z",
+ "platforms": "",
+ "totalPrize": 200,
+ "isPrivate": false,
+ "projectId": 7377,
+ "currentPhases": [
+ {
+ "challengeId": 30049551,
+ "id": 733709,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-01T23:23Z",
+ "scheduledEndTime": "2016-03-02T23:23Z",
+ "actualStartTime": "2016-02-01T23:23Z",
+ "fixedStartTime": "2016-02-01T14:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-01T18:51Z",
+ "createdAt": "2016-02-01T16:51Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049551,
+ "id": 733711,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-01T23:29Z",
+ "scheduledEndTime": "2016-03-02T23:29Z",
+ "actualStartTime": "2016-02-01T23:29Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-01T18:51Z",
+ "createdAt": "2016-02-01T16:51Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049551,
+ "id": 733710,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-01T23:51Z",
+ "scheduledEndTime": "2016-03-02T23:51Z",
+ "actualStartTime": "2016-02-01T23:51Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-01T18:51Z",
+ "createdAt": "2016-02-01T16:51Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30049551,
+ "id": 733709,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-01T23:23Z",
+ "scheduledEndTime": "2016-03-02T23:23Z",
+ "actualStartTime": "2016-02-01T23:23Z",
+ "fixedStartTime": "2016-02-01T14:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-01T18:51Z",
+ "createdAt": "2016-02-01T16:51Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049551,
+ "id": 733710,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-01T23:51Z",
+ "scheduledEndTime": "2016-03-02T23:51Z",
+ "actualStartTime": "2016-02-01T23:51Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-01T18:51Z",
+ "createdAt": "2016-02-01T16:51Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049551,
+ "id": 733711,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-01T23:29Z",
+ "scheduledEndTime": "2016-03-02T23:29Z",
+ "actualStartTime": "2016-02-01T23:29Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-01T18:51Z",
+ "createdAt": "2016-02-01T16:51Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ }
+ ],
+ "prizes": [200],
+ "reliabilityBonus": 40,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-01-22T12:25Z",
+ "createdAt": "2016-01-22T17:12Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "Java",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "FIRST_2_FINISH",
+ "name": "Vikas Development Challenge",
+ "reviewType": "PEER",
+ "id": 30049550,
+ "forumId": 28485,
+ "numSubmissions": 1,
+ "numRegistrants": 5,
+ "registrationStartDate": "2016-01-22T12:15:03.755Z",
+ "registrationEndDate": "2016-02-21T12:15:00.000Z",
+ "submissionEndDate": "2016-02-21T12:25:00.000Z",
+ "platforms": "AWS, EC2",
+ "totalPrize": 800,
+ "isPrivate": false,
+ "projectId": 9043,
+ "currentPhases": [
+ {
+ "challengeId": 30049550,
+ "id": 733703,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-01-22T12:15Z",
+ "scheduledEndTime": "2016-02-21T12:15Z",
+ "actualStartTime": "2016-01-22T12:15Z",
+ "fixedStartTime": "2016-01-22T12:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-02T05:30Z",
+ "createdAt": "2016-01-22T07:12Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049550,
+ "id": 733705,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-01-22T12:25Z",
+ "scheduledEndTime": "2016-02-21T12:25Z",
+ "actualStartTime": "2016-01-22T12:25Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-02T05:30Z",
+ "createdAt": "2016-01-22T07:12Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049550,
+ "id": 733704,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-02T10:30Z",
+ "scheduledEndTime": "2016-02-03T10:30Z",
+ "actualStartTime": "2016-02-02T10:30Z",
+ "duration": 86400000,
+ "updatedAt": "2016-02-02T05:30Z",
+ "createdAt": "2016-01-22T07:12Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049550,
+ "id": 733703,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-01-22T12:15Z",
+ "scheduledEndTime": "2016-02-21T12:15Z",
+ "actualStartTime": "2016-01-22T12:15Z",
+ "fixedStartTime": "2016-01-22T12:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-02T05:30Z",
+ "createdAt": "2016-01-22T07:12Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049550,
+ "id": 733704,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-02T10:30Z",
+ "scheduledEndTime": "2016-02-03T10:30Z",
+ "actualStartTime": "2016-02-02T10:30Z",
+ "duration": 86400000,
+ "updatedAt": "2016-02-02T05:30Z",
+ "createdAt": "2016-01-22T07:12Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049550,
+ "id": 733705,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-01-22T12:25Z",
+ "scheduledEndTime": "2016-02-21T12:25Z",
+ "actualStartTime": "2016-01-22T12:25Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-02-02T05:30Z",
+ "createdAt": "2016-01-22T07:12Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ }
+ ],
+ "prizes": [800],
+ "reliabilityBonus": 160,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-03-18T19:42Z",
+ "createdAt": "2016-02-10T15:02Z",
+ "createdBy": "8547899",
+ "updatedBy": "23221139",
+ "technologies": "AJAX",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Vikas Peer Review Challenge",
+ "reviewType": "PEER",
+ "id": 30049555,
+ "forumId": 28488,
+ "numSubmissions": 4,
+ "numRegistrants": 4,
+ "registrationStartDate": "2016-02-10T10:04:05.444Z",
+ "registrationEndDate": "2016-02-10T10:46:53.344Z",
+ "submissionEndDate": "2016-02-10T10:47:59.084Z",
+ "platforms": "AWS",
+ "totalPrize": 500,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30049555,
+ "id": 733742,
+ "phaseType": "Appeals",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-03-11T10:48Z",
+ "scheduledEndTime": "2016-03-12T10:48Z",
+ "duration": 86400000,
+ "updatedAt": "2016-03-18T15:42Z",
+ "createdAt": "2016-02-10T05:02Z",
+ "createdBy": "8547899",
+ "updatedBy": "23221139"
+ },
+ "projectId": 9043,
+ "currentPhases": [
+ {
+ "challengeId": 30049555,
+ "id": 733741,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-10T10:48Z",
+ "scheduledEndTime": "2016-03-11T10:48Z",
+ "actualStartTime": "2016-02-10T10:48Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-03-18T15:42Z",
+ "createdAt": "2016-02-10T05:02Z",
+ "createdBy": "8547899",
+ "updatedBy": "23221139"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30049555,
+ "id": 733739,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2016-02-10T10:04Z",
+ "scheduledEndTime": "2016-02-10T10:46Z",
+ "actualStartTime": "2016-02-10T10:04Z",
+ "actualEndTime": "2016-02-10T10:46Z",
+ "fixedStartTime": "2016-02-10T10:04Z",
+ "duration": 2574556,
+ "updatedAt": "2016-03-18T15:42Z",
+ "createdAt": "2016-02-10T05:02Z",
+ "createdBy": "8547899",
+ "updatedBy": "23221139"
+ },
+ {
+ "challengeId": 30049555,
+ "id": 733740,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2016-02-10T10:12Z",
+ "scheduledEndTime": "2016-02-10T10:47Z",
+ "actualStartTime": "2016-02-10T10:12Z",
+ "actualEndTime": "2016-02-10T10:47Z",
+ "duration": 2063783,
+ "updatedAt": "2016-03-18T15:42Z",
+ "createdAt": "2016-02-10T05:02Z",
+ "createdBy": "8547899",
+ "updatedBy": "23221139"
+ },
+ {
+ "challengeId": 30049555,
+ "id": 733741,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-02-10T10:48Z",
+ "scheduledEndTime": "2016-03-11T10:48Z",
+ "actualStartTime": "2016-02-10T10:48Z",
+ "duration": 2592000000,
+ "updatedAt": "2016-03-18T15:42Z",
+ "createdAt": "2016-02-10T05:02Z",
+ "createdBy": "8547899",
+ "updatedBy": "23221139"
+ },
+ {
+ "challengeId": 30049555,
+ "id": 733742,
+ "phaseType": "Appeals",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-03-11T10:48Z",
+ "scheduledEndTime": "2016-03-12T10:48Z",
+ "duration": 86400000,
+ "updatedAt": "2016-03-18T15:42Z",
+ "createdAt": "2016-02-10T05:02Z",
+ "createdBy": "8547899",
+ "updatedBy": "23221139"
+ },
+ {
+ "challengeId": 30049555,
+ "id": 733743,
+ "phaseType": "Appeals Response",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-03-12T10:48Z",
+ "scheduledEndTime": "2016-03-12T22:48Z",
+ "duration": 43200000,
+ "updatedAt": "2016-03-18T15:42Z",
+ "createdAt": "2016-02-10T05:02Z",
+ "createdBy": "8547899",
+ "updatedBy": "23221139"
+ }
+ ],
+ "prizes": [350, 150],
+ "drPoints": 0,
+ "reliabilityBonus": 70,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-01-25T20:29Z",
+ "createdAt": "2016-01-19T13:45Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "WEB_DESIGNS",
+ "name": "Vikas Design Challenge",
+ "reviewType": "INTERNAL",
+ "id": 30049541,
+ "forumId": 593932,
+ "numSubmissions": 3,
+ "numRegistrants": 3,
+ "registrationStartDate": "2016-01-19T09:14:32.099Z",
+ "registrationEndDate": "2016-01-29T09:19:00.000Z",
+ "submissionEndDate": "2016-02-04T20:34:00.000Z",
+ "platforms": "",
+ "totalPrize": 1500,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30049541,
+ "id": 733685,
+ "phaseType": "Screening",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-02-04T20:34Z",
+ "scheduledEndTime": "2016-02-05T00:34Z",
+ "duration": 14400000,
+ "updatedAt": "2016-01-25T15:29Z",
+ "createdAt": "2016-01-19T03:45Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ "projectId": 9043,
+ "currentPhases": [
+ {
+ "challengeId": 30049541,
+ "id": 733683,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-01-19T09:14Z",
+ "scheduledEndTime": "2016-01-29T09:19Z",
+ "actualStartTime": "2016-01-19T09:14Z",
+ "fixedStartTime": "2016-01-19T09:13Z",
+ "duration": 864300000,
+ "updatedAt": "2016-01-25T15:29Z",
+ "createdAt": "2016-01-19T03:45Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049541,
+ "id": 733684,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-01-25T20:29Z",
+ "scheduledEndTime": "2016-02-04T20:34Z",
+ "actualStartTime": "2016-01-25T20:29Z",
+ "duration": 864300000,
+ "updatedAt": "2016-01-25T15:29Z",
+ "createdAt": "2016-01-19T03:45Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30049541,
+ "id": 733681,
+ "phaseType": "Specification Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2016-01-19T08:48Z",
+ "scheduledEndTime": "2016-01-19T08:49Z",
+ "actualStartTime": "2016-01-19T08:48Z",
+ "actualEndTime": "2016-01-19T08:49Z",
+ "fixedStartTime": "2016-01-19T08:48Z",
+ "duration": 172800000,
+ "updatedAt": "2016-01-25T15:29Z",
+ "createdAt": "2016-01-19T03:45Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049541,
+ "id": 733682,
+ "phaseType": "Specification Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2016-01-19T08:49Z",
+ "scheduledEndTime": "2016-01-19T09:04Z",
+ "actualStartTime": "2016-01-19T08:49Z",
+ "actualEndTime": "2016-01-19T09:04Z",
+ "duration": 21600000,
+ "updatedAt": "2016-01-25T15:29Z",
+ "createdAt": "2016-01-19T03:45Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049541,
+ "id": 733683,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-01-19T09:14Z",
+ "scheduledEndTime": "2016-01-29T09:19Z",
+ "actualStartTime": "2016-01-19T09:14Z",
+ "fixedStartTime": "2016-01-19T09:13Z",
+ "duration": 864300000,
+ "updatedAt": "2016-01-25T15:29Z",
+ "createdAt": "2016-01-19T03:45Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049541,
+ "id": 733684,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2016-01-25T20:29Z",
+ "scheduledEndTime": "2016-02-04T20:34Z",
+ "actualStartTime": "2016-01-25T20:29Z",
+ "duration": 864300000,
+ "updatedAt": "2016-01-25T15:29Z",
+ "createdAt": "2016-01-19T03:45Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049541,
+ "id": 733685,
+ "phaseType": "Screening",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-02-04T20:34Z",
+ "scheduledEndTime": "2016-02-05T00:34Z",
+ "duration": 14400000,
+ "updatedAt": "2016-01-25T15:29Z",
+ "createdAt": "2016-01-19T03:45Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049541,
+ "id": 733686,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-02-05T00:34Z",
+ "scheduledEndTime": "2016-02-11T00:34Z",
+ "duration": 518400000,
+ "updatedAt": "2016-01-25T15:29Z",
+ "createdAt": "2016-01-19T03:45Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049541,
+ "id": 733687,
+ "phaseType": "Approval",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2016-02-11T00:34Z",
+ "scheduledEndTime": "2016-02-16T00:34Z",
+ "duration": 432000000,
+ "updatedAt": "2016-01-25T15:29Z",
+ "createdAt": "2016-01-19T03:45Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [1250, 250],
+ "reliabilityBonus": 250,
+ "isTask": false
+ },
+ {
+ "submissions": [
+ {
+ "id": 201640,
+ "submittedAt": "2015-06-09T20:53Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 2,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201640&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201640&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201640&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201640&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201640&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201640"
+ }
+ },
+ {
+ "id": 201641,
+ "submittedAt": "2015-06-09T20:55Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 3,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201641&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201641&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201641&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201641&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201641&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201641"
+ }
+ },
+ {
+ "id": 201642,
+ "submittedAt": "2015-06-17T17:50Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 4,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201642&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201642&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201642&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201642&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201642&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201642"
+ }
+ },
+ {
+ "id": 201643,
+ "submittedAt": "2015-06-17T17:54Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 5,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201643&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201643&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201643&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201643&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201643&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201643"
+ }
+ },
+ {
+ "id": 201645,
+ "submittedAt": "2015-06-24T07:57Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 6,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201645&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201645&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201645&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201645&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201645&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201645"
+ }
+ },
+ {
+ "id": 202621,
+ "submittedAt": "2016-01-20T18:46Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 22,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202621&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202621&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202621&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202621&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202621&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202621"
+ }
+ },
+ {
+ "id": 202622,
+ "submittedAt": "2016-01-20T22:29Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 23,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202622&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202622&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202622&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202622&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202622&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202622"
+ }
+ },
+ {
+ "id": 202680,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202680&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202680&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202680&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202680&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202680&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202680"
+ }
+ },
+ {
+ "id": 202681,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202681&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202681&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202681&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202681&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202681&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202681"
+ }
+ },
+ {
+ "id": 202682,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202682&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202682&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202682&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202682&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202682&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202682"
+ }
+ },
+ {
+ "id": 202690,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202690&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202690&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202690&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202690&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202690&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202690"
+ }
+ },
+ {
+ "id": 202691,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202691&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202691&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202691&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202691&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202691&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202691"
+ }
+ },
+ {
+ "id": 202692,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202692&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202692&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202692&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202692&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202692&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202692"
+ }
+ },
+ {
+ "id": 202693,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202693&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202693&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202693&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202693&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202693&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202693"
+ }
+ },
+ {
+ "id": 202700,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202700&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202700&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202700&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202700&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202700&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202700"
+ }
+ },
+ {
+ "id": 202701,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202701&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202701&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202701&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202701&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202701&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202701"
+ }
+ },
+ {
+ "id": 202710,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202710&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202710&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202710&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202710&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202710&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202710"
+ }
+ },
+ {
+ "id": 202711,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202711&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202711&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202711&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202711&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202711&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202711"
+ }
+ },
+ {
+ "id": 202720,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202720&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202720&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202720&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202720&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202720&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202720"
+ }
+ },
+ {
+ "id": 202730,
+ "submittedAt": "2016-01-21T21:25Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 24,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202730&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202730&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202730&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202730&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202730&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202730"
+ }
+ },
+ {
+ "id": 202731,
+ "submittedAt": "2016-01-21T21:26Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 25,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202731&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202731&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202731&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202731&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202731&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202731"
+ }
+ },
+ {
+ "id": 202732,
+ "submittedAt": "2016-01-21T21:27Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 26,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202732&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202732&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202732&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202732&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202732&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202732"
+ }
+ },
+ {
+ "id": 202733,
+ "submittedAt": "2016-01-21T21:27Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 27,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202733&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202733&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202733&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202733&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202733&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202733"
+ }
+ },
+ {
+ "id": 202734,
+ "submittedAt": "2016-01-21T21:28Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 28,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202734&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202734&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202734&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202734&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202734&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202734"
+ }
+ },
+ {
+ "id": 202735,
+ "submittedAt": "2016-01-21T21:32Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 29,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202735&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202735&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202735&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202735&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202735&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202735"
+ }
+ },
+ {
+ "id": 202736,
+ "submittedAt": "2016-01-21T21:38Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 30,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202736&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202736&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202736&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202736&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202736&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202736"
+ }
+ },
+ {
+ "id": 202737,
+ "submittedAt": "2016-01-21T21:45Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 31,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202737&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202737&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202737&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202737&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202737&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202737"
+ }
+ },
+ {
+ "id": 202738,
+ "submittedAt": "2016-01-21T21:58Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 32,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202738&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202738&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202738&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202738&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202738&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202738"
+ }
+ },
+ {
+ "id": 202739,
+ "submittedAt": "2016-01-21T22:27Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 33,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202739&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202739&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202739&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202739&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202739&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202739"
+ }
+ },
+ {
+ "id": 202740,
+ "submittedAt": "2016-01-21T22:27Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 34,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202740&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202740&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202740&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202740&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202740&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202740"
+ }
+ },
+ {
+ "id": 202761,
+ "submittedAt": "2016-01-22T00:13Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 35,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202761&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202761&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202761&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202761&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202761&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202761"
+ }
+ },
+ {
+ "id": 202770,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202770&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202770&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202770&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202770&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202770&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202770"
+ }
+ },
+ {
+ "id": 202780,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202780&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202780&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202780&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202780&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202780&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202780"
+ }
+ },
+ {
+ "id": 202790,
+ "submittedAt": "2016-01-22T00:36Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 36,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202790&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202790&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202790&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202790&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202790&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202790"
+ }
+ },
+ {
+ "id": 202800,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 7,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202800&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202800&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202800&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202800&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202800&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202800"
+ }
+ },
+ {
+ "id": 202810,
+ "submittedAt": "2016-01-22T01:22Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 37,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202810&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202810&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202810&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202810&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202810&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202810"
+ }
+ },
+ {
+ "id": 202811,
+ "submittedAt": "2016-01-22T01:26Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 38,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202811&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202811&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202811&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202811&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202811&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202811"
+ }
+ },
+ {
+ "id": 202820,
+ "submittedAt": "2016-01-22T02:02Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 39,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202820&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202820&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202820&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202820&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202820&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202820"
+ }
+ },
+ {
+ "id": 202821,
+ "submittedAt": "2016-01-22T19:57Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 40,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202821&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202821&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202821&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202821&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202821&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202821"
+ }
+ },
+ {
+ "id": 202822,
+ "submittedAt": "2016-01-22T19:58Z",
+ "status": "Completed Without Win",
+ "score": 10,
+ "placement": 41,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202822&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202822&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202822&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202822&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202822&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202822"
+ }
+ },
+ {
+ "id": 202823,
+ "submittedAt": "2016-01-22T19:59Z",
+ "status": "Active",
+ "score": 100,
+ "placement": 1,
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202823&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202823&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202823&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202823&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202823&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202823"
+ }
+ },
+ {
+ "id": 202900,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202900&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202900&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202900&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202900&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202900&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202900"
+ }
+ },
+ {
+ "id": 202901,
+ "submittedAt": "2015-12-31T20:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202901&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202901&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202901&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202901&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202901&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202901"
+ }
+ },
+ {
+ "id": 203013,
+ "submittedAt": "2016-03-08T19:19Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203013&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203013&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203013&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203013&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203013&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203013"
+ }
+ },
+ {
+ "id": 203260,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203260&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203260&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203260&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203260&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203260&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203260"
+ }
+ },
+ {
+ "id": 203261,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203261&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203261&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203261&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203261&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203261&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203261"
+ }
+ },
+ {
+ "id": 203270,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203270&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203270&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203270&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203270&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203270&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203270"
+ }
+ },
+ {
+ "id": 203300,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203300&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203300&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203300&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203300&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203300&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203300"
+ }
+ },
+ {
+ "id": 203330,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203330&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203330&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203330&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203330&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203330&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203330"
+ }
+ },
+ {
+ "id": 203390,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203390&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203390&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203390&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203390&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203390&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203390"
+ }
+ },
+ {
+ "id": 203420,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203420&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203420&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203420&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203420&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203420&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203420"
+ }
+ },
+ {
+ "id": 203431,
+ "submittedAt": "2015-12-31T23:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203431&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203431&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203431&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203431&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203431&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203431"
+ }
+ },
+ {
+ "id": 203441,
+ "submittedAt": "2015-12-31T23:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203441&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203441&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203441&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203441&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203441&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203441"
+ }
+ },
+ {
+ "id": 203450,
+ "submittedAt": "2015-12-31T23:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203450&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203450&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203450&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203450&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203450&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203450"
+ }
+ },
+ {
+ "id": 203451,
+ "submittedAt": "2015-12-31T23:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203451&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203451&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203451&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203451&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203451&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203451"
+ }
+ },
+ {
+ "id": 203460,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203460&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203460&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203460&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203460&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203460&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203460"
+ }
+ },
+ {
+ "id": 203491,
+ "submittedAt": "2015-12-31T23:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203491&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203491&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203491&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203491&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203491&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203491"
+ }
+ },
+ {
+ "id": 203540,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203540&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203540&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203540&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203540&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203540&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203540"
+ }
+ },
+ {
+ "id": 203550,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203550&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203550&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203550&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203550&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203550&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203550"
+ }
+ },
+ {
+ "id": 203551,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203551&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203551&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203551&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203551&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203551&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203551"
+ }
+ },
+ {
+ "id": 203570,
+ "submittedAt": "2016-03-08T19:19Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203570&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203570&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203570&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203570&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203570&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203570"
+ }
+ },
+ {
+ "id": 203780,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203780&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203780&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203780&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203780&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203780&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=203780"
+ }
+ },
+ {
+ "id": 204070,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204070&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204070&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204070&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204070&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204070&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204070"
+ }
+ },
+ {
+ "id": 204140,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204140&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204140&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204140&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204140&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204140&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204140"
+ }
+ },
+ {
+ "id": 204272,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204272&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204272&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204272&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204272&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204272&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204272"
+ }
+ },
+ {
+ "id": 204280,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204280&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204280&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204280&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204280&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204280&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204280"
+ }
+ },
+ {
+ "id": 204300,
+ "submittedAt": "2015-12-31T22:17Z",
+ "status": "Active",
+ "challengeId": 30049240,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204300&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204300&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204300&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204300&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204300&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=204300"
+ }
+ }
+ ],
+ "updatedAt": "2016-01-22T20:20Z",
+ "createdAt": "2015-05-28T18:49Z",
+ "createdBy": "15050434",
+ "updatedBy": "22841596",
+ "technologies": "",
+ "status": "COMPLETED",
+ "track": "DESIGN",
+ "subTrack": "DESIGN_FIRST_2_FINISH",
+ "name": "Real World iOS Challenge - 1",
+ "reviewType": "INTERNAL",
+ "id": 30049240,
+ "forumId": 593825,
+ "numSubmissions": 67,
+ "numRegistrants": 11,
+ "registrationStartDate": "2015-05-28T15:01:33.210Z",
+ "registrationEndDate": "2016-01-22T20:15:03.727Z",
+ "submissionEndDate": "2016-01-22T20:12:15.752Z",
+ "platforms": "",
+ "totalPrize": 200,
+ "isPrivate": false,
+ "projectId": 7377,
+ "currentPhases": [],
+ "submissionViewable": true,
+ "allPhases": [
+ {
+ "challengeId": 30049240,
+ "id": 732863,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-05-28T15:01Z",
+ "scheduledEndTime": "2016-01-22T20:15Z",
+ "actualStartTime": "2015-05-28T15:01Z",
+ "actualEndTime": "2016-01-22T20:15Z",
+ "fixedStartTime": "2015-05-28T13:00Z",
+ "duration": 18406740000,
+ "updatedAt": "2016-01-22T15:20Z",
+ "createdAt": "2015-05-28T10:56Z",
+ "createdBy": "15050434",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049240,
+ "id": 732864,
+ "phaseType": "Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-06-12T20:20Z",
+ "scheduledEndTime": "2016-01-22T20:20Z",
+ "actualStartTime": "2015-06-12T20:20Z",
+ "actualEndTime": "2016-01-22T20:20Z",
+ "duration": 21257917069,
+ "updatedAt": "2016-01-22T15:20Z",
+ "createdAt": "2015-05-28T10:56Z",
+ "createdBy": "15050434",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049240,
+ "id": 732865,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-05-28T15:06Z",
+ "scheduledEndTime": "2016-01-22T20:12Z",
+ "actualStartTime": "2015-05-28T15:06Z",
+ "actualEndTime": "2016-01-22T20:12Z",
+ "duration": 20653074059,
+ "updatedAt": "2016-01-22T15:20Z",
+ "createdAt": "2015-05-28T10:56Z",
+ "createdBy": "15050434",
+ "updatedBy": "22841596"
+ }
+ ],
+ "prizes": [200],
+ "winners": [
+ {
+ "userId": 22781893,
+ "type": "final",
+ "handle": "iamtong",
+ "placement": 1,
+ "photoURL": "/i/m/iamtong_big.jpg"
+ }
+ ],
+ "reliabilityBonus": 40,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-07-14T20:17Z",
+ "createdAt": "2015-07-14T23:55Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596",
+ "technologies": "ActionScript",
+ "status": "COMPLETED",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Peer Review - Troubleshooting user able to review own submission",
+ "reviewType": "PEER",
+ "id": 30049330,
+ "forumId": 28453,
+ "numSubmissions": 4,
+ "numRegistrants": 4,
+ "registrationStartDate": "2015-12-21T05:00:00.000Z",
+ "registrationEndDate": "2016-01-21T05:00:00.000Z",
+ "submissionEndDate": "2016-01-21T05:00:00.000Z",
+ "platforms": "Android",
+ "totalPrize": 2,
+ "isPrivate": false,
+ "projectId": 8647,
+ "currentPhases": [],
+ "allPhases": [
+ {
+ "challengeId": 30049330,
+ "id": 733165,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-21T05:00Z",
+ "scheduledEndTime": "2016-01-21T05:00Z",
+ "actualStartTime": "2015-12-21T05:00Z",
+ "fixedStartTime": "2015-12-21T05:00Z",
+ "duration": 60000,
+ "updatedAt": "2015-07-14T16:18Z",
+ "createdAt": "2015-07-14T16:03Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049330,
+ "id": 733166,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-21T05:00Z",
+ "scheduledEndTime": "2016-01-21T05:00Z",
+ "actualStartTime": "2015-12-21T05:00Z",
+ "fixedStartTime": "2015-12-21T05:00Z",
+ "duration": 60000,
+ "updatedAt": "2015-07-14T16:18Z",
+ "createdAt": "2015-07-14T16:03Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049330,
+ "id": 733167,
+ "phaseType": "Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2016-01-22T05:00Z",
+ "scheduledEndTime": "2016-02-08T05:00Z",
+ "duration": 172800000,
+ "updatedAt": "2015-07-14T16:18Z",
+ "createdAt": "2015-07-14T16:03Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ }
+ ],
+ "prizes": [1, 1],
+ "reliabilityBonus": 0.2,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-11-02T15:16Z",
+ "createdAt": "2015-10-16T02:03Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "Android",
+ "status": "COMPLETED",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Peer Review v3 BETA Test - 1",
+ "reviewType": "PEER",
+ "id": 30049400,
+ "forumId": 28464,
+ "numSubmissions": 6,
+ "numRegistrants": 6,
+ "registrationStartDate": "2015-12-21T05:00:00.000Z",
+ "registrationEndDate": "2016-01-21T05:00:00.000Z",
+ "submissionEndDate": "2016-01-21T05:00:00.000Z",
+ "platforms": "Android",
+ "totalPrize": 2,
+ "isPrivate": false,
+ "projectId": 8647,
+ "currentPhases": [],
+ "allPhases": [
+ {
+ "challengeId": 30049400,
+ "id": 733275,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-21T05:00Z",
+ "scheduledEndTime": "2016-01-21T05:00Z",
+ "actualStartTime": "2015-12-21T05:00Z",
+ "fixedStartTime": "2015-12-21T05:00Z",
+ "duration": 300000,
+ "updatedAt": "2015-11-02T10:16Z",
+ "createdAt": "2015-10-15T18:15Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049400,
+ "id": 733276,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-21T05:00Z",
+ "scheduledEndTime": "2016-01-21T05:00Z",
+ "actualStartTime": "2015-12-21T05:00Z",
+ "fixedStartTime": "2015-12-21T05:00Z",
+ "duration": 300000,
+ "updatedAt": "2015-11-02T10:16Z",
+ "createdAt": "2015-10-15T18:15Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049400,
+ "id": 733277,
+ "phaseType": "Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2016-01-22T05:00Z",
+ "scheduledEndTime": "2016-02-08T05:00Z",
+ "duration": 300000,
+ "updatedAt": "2015-11-02T10:16Z",
+ "createdAt": "2015-10-15T18:15Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [1, 1],
+ "reliabilityBonus": 0.2,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-11-02T17:49Z",
+ "createdAt": "2015-11-02T21:56Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "Android",
+ "status": "COMPLETED",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Peer Review - Late Deliverables - test 1",
+ "reviewType": "PEER",
+ "id": 30049430,
+ "forumId": 28471,
+ "numSubmissions": 8,
+ "numRegistrants": 8,
+ "registrationStartDate": "2015-12-21T05:00:00.000Z",
+ "registrationEndDate": "2016-01-21T05:00:00.000Z",
+ "submissionEndDate": "2016-01-21T05:00:00.000Z",
+ "platforms": "Android",
+ "totalPrize": 2,
+ "isPrivate": false,
+ "projectId": 8647,
+ "currentPhases": [],
+ "allPhases": [
+ {
+ "challengeId": 30049430,
+ "id": 733355,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-21T05:00Z",
+ "scheduledEndTime": "2016-01-21T05:00Z",
+ "actualStartTime": "2015-12-21T05:00Z",
+ "fixedStartTime": "2015-12-21T05:00Z",
+ "duration": 300000,
+ "updatedAt": "2015-11-02T12:49Z",
+ "createdAt": "2015-11-02T12:08Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049430,
+ "id": 733356,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-21T05:00Z",
+ "scheduledEndTime": "2016-01-21T05:00Z",
+ "actualStartTime": "2015-12-21T05:00Z",
+ "fixedStartTime": "2015-12-21T05:00Z",
+ "duration": 2073300000,
+ "updatedAt": "2015-11-02T12:49Z",
+ "createdAt": "2015-11-02T12:08Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049430,
+ "id": 733357,
+ "phaseType": "Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2016-01-22T05:00Z",
+ "scheduledEndTime": "2016-02-08T05:00Z",
+ "duration": 300000,
+ "updatedAt": "2015-11-02T12:49Z",
+ "createdAt": "2015-11-02T12:08Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [1, 1],
+ "reliabilityBonus": 0.2,
+ "isTask": false
+ },
+ {
+ "submissions": [
+ {
+ "id": 201810,
+ "submittedAt": "2015-12-17T16:33Z",
+ "status": "Active",
+ "challengeId": 30049520,
+ "type": "Checkpoint Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201810&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201810&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201810&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201810&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201810&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201810"
+ }
+ },
+ {
+ "id": 201811,
+ "submittedAt": "2015-12-17T16:35Z",
+ "status": "Active",
+ "challengeId": 30049520,
+ "type": "Checkpoint Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201811&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201811&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201811&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201811&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201811&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201811"
+ }
+ },
+ {
+ "id": 201812,
+ "submittedAt": "2015-12-17T16:35Z",
+ "status": "Active",
+ "challengeId": 30049520,
+ "type": "Checkpoint Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201812&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201812&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201812&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201812&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201812&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201812"
+ }
+ }
+ ],
+ "updatedAt": "2015-12-17T16:50Z",
+ "createdAt": "2015-12-17T21:10Z",
+ "createdBy": "40141070",
+ "updatedBy": "8547899",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "WIDGET_OR_MOBILE_SCREEN_DESIGN",
+ "name": "Mobile Design 2",
+ "reviewType": "INTERNAL",
+ "id": 30049520,
+ "forumId": 593922,
+ "numSubmissions": 0,
+ "numRegistrants": 2,
+ "registrationStartDate": "2015-12-17T16:19:28.095Z",
+ "registrationEndDate": "2015-12-23T16:19:00.000Z",
+ "checkpointSubmissionEndDate": "2015-12-17T16:44:04.355Z",
+ "submissionEndDate": "2015-12-23T16:19:00.000Z",
+ "platforms": "",
+ "totalCheckpointPrize": 250,
+ "totalPrize": 1500,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30049520,
+ "id": 733614,
+ "phaseType": "Submission",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-12-17T16:24Z",
+ "scheduledEndTime": "2015-12-23T16:19Z",
+ "duration": 518100000,
+ "updatedAt": "2015-12-17T11:50Z",
+ "createdAt": "2015-12-17T11:10Z",
+ "createdBy": "40141070",
+ "updatedBy": "8547899"
+ },
+ "projectId": 9091,
+ "currentPhases": [
+ {
+ "challengeId": 30049520,
+ "id": 733612,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-12-17T16:19Z",
+ "scheduledEndTime": "2015-12-23T16:19Z",
+ "actualStartTime": "2015-12-17T16:19Z",
+ "fixedStartTime": "2015-12-17T14:00Z",
+ "duration": 518400000,
+ "updatedAt": "2015-12-17T11:50Z",
+ "createdAt": "2015-12-17T11:10Z",
+ "createdBy": "40141070",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049520,
+ "id": 733615,
+ "phaseType": "Checkpoint Screening",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-12-17T16:50Z",
+ "scheduledEndTime": "2015-12-17T20:50Z",
+ "actualStartTime": "2015-12-17T16:50Z",
+ "duration": 14400000,
+ "updatedAt": "2015-12-17T11:50Z",
+ "createdAt": "2015-12-17T11:10Z",
+ "createdBy": "40141070",
+ "updatedBy": "8547899"
+ }
+ ],
+ "submissionViewable": true,
+ "allPhases": [
+ {
+ "challengeId": 30049520,
+ "id": 733610,
+ "phaseType": "Specification Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-17T16:14Z",
+ "scheduledEndTime": "2015-12-17T16:14Z",
+ "actualStartTime": "2015-12-17T16:14Z",
+ "actualEndTime": "2015-12-17T16:14Z",
+ "fixedStartTime": "2015-12-17T16:10Z",
+ "duration": 172800000,
+ "updatedAt": "2015-12-17T11:50Z",
+ "createdAt": "2015-12-17T11:10Z",
+ "createdBy": "40141070",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049520,
+ "id": 733611,
+ "phaseType": "Specification Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-17T16:14Z",
+ "scheduledEndTime": "2015-12-17T16:15Z",
+ "actualStartTime": "2015-12-17T16:14Z",
+ "actualEndTime": "2015-12-17T16:15Z",
+ "duration": 21600000,
+ "updatedAt": "2015-12-17T11:50Z",
+ "createdAt": "2015-12-17T11:10Z",
+ "createdBy": "40141070",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049520,
+ "id": 733612,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-12-17T16:19Z",
+ "scheduledEndTime": "2015-12-23T16:19Z",
+ "actualStartTime": "2015-12-17T16:19Z",
+ "fixedStartTime": "2015-12-17T14:00Z",
+ "duration": 518400000,
+ "updatedAt": "2015-12-17T11:50Z",
+ "createdAt": "2015-12-17T11:10Z",
+ "createdBy": "40141070",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049520,
+ "id": 733613,
+ "phaseType": "Checkpoint Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-17T16:24Z",
+ "scheduledEndTime": "2015-12-17T16:44Z",
+ "actualStartTime": "2015-12-17T16:24Z",
+ "actualEndTime": "2015-12-17T16:44Z",
+ "duration": 934714,
+ "updatedAt": "2015-12-17T11:50Z",
+ "createdAt": "2015-12-17T11:10Z",
+ "createdBy": "40141070",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049520,
+ "id": 733614,
+ "phaseType": "Submission",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-12-17T16:24Z",
+ "scheduledEndTime": "2015-12-23T16:19Z",
+ "duration": 518100000,
+ "updatedAt": "2015-12-17T11:50Z",
+ "createdAt": "2015-12-17T11:10Z",
+ "createdBy": "40141070",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049520,
+ "id": 733615,
+ "phaseType": "Checkpoint Screening",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-12-17T16:50Z",
+ "scheduledEndTime": "2015-12-17T20:50Z",
+ "actualStartTime": "2015-12-17T16:50Z",
+ "duration": 14400000,
+ "updatedAt": "2015-12-17T11:50Z",
+ "createdAt": "2015-12-17T11:10Z",
+ "createdBy": "40141070",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049520,
+ "id": 733616,
+ "phaseType": "Checkpoint Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-12-17T20:50Z",
+ "scheduledEndTime": "2015-12-19T20:50Z",
+ "duration": 172800000,
+ "updatedAt": "2015-12-17T11:50Z",
+ "createdAt": "2015-12-17T11:10Z",
+ "createdBy": "40141070",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049520,
+ "id": 733617,
+ "phaseType": "Screening",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-12-23T16:19Z",
+ "scheduledEndTime": "2015-12-23T20:19Z",
+ "duration": 14400000,
+ "updatedAt": "2015-12-17T11:50Z",
+ "createdAt": "2015-12-17T11:10Z",
+ "createdBy": "40141070",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049520,
+ "id": 733618,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-12-23T20:19Z",
+ "scheduledEndTime": "2015-12-29T20:19Z",
+ "duration": 518400000,
+ "updatedAt": "2015-12-17T11:50Z",
+ "createdAt": "2015-12-17T11:10Z",
+ "createdBy": "40141070",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049520,
+ "id": 733619,
+ "phaseType": "Approval",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-12-29T20:19Z",
+ "scheduledEndTime": "2016-01-03T20:19Z",
+ "duration": 432000000,
+ "updatedAt": "2015-12-17T11:50Z",
+ "createdAt": "2015-12-17T11:10Z",
+ "createdBy": "40141070",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [1250, 250, 50],
+ "reliabilityBonus": 250,
+ "isTask": false
+ },
+ {
+ "submissions": [
+ {
+ "id": 201813,
+ "submittedAt": "2015-12-22T16:05Z",
+ "status": "Active",
+ "score": 100,
+ "placement": 1,
+ "challengeId": 30049530,
+ "type": "Checkpoint Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201813&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201813&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201813&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201813&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201813&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201813"
+ }
+ },
+ {
+ "id": 201814,
+ "submittedAt": "2015-12-22T16:05Z",
+ "status": "Active",
+ "score": 90,
+ "placement": 2,
+ "challengeId": 30049530,
+ "type": "Checkpoint Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201814&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201814&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201814&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201814&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201814&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201814"
+ }
+ },
+ {
+ "id": 201815,
+ "submittedAt": "2015-12-22T16:08Z",
+ "status": "Active",
+ "score": 80,
+ "placement": 3,
+ "challengeId": 30049530,
+ "type": "Checkpoint Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201815&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201815&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201815&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201815&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201815&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201815"
+ }
+ },
+ {
+ "id": 201816,
+ "submittedAt": "2015-12-22T22:14Z",
+ "status": "Active",
+ "score": 100,
+ "placement": 1,
+ "challengeId": 30049530,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201816&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201816&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201816&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201816&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201816&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201816"
+ }
+ },
+ {
+ "id": 201817,
+ "submittedAt": "2015-12-22T22:15Z",
+ "status": "Completed Without Win",
+ "score": 90,
+ "placement": 2,
+ "challengeId": 30049530,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201817&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201817&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201817&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201817&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201817&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201817"
+ }
+ }
+ ],
+ "updatedAt": "2015-12-22T22:25Z",
+ "createdAt": "2015-12-22T20:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "WIDGET_OR_MOBILE_SCREEN_DESIGN",
+ "name": "Mobile Design - Tony App 4",
+ "reviewType": "INTERNAL",
+ "id": 30049530,
+ "forumId": 593929,
+ "numSubmissions": 2,
+ "numRegistrants": 2,
+ "registrationStartDate": "2015-12-22T15:59:23.986Z",
+ "registrationEndDate": "2015-12-28T15:58:00.000Z",
+ "checkpointSubmissionEndDate": "2015-12-22T16:23:05.161Z",
+ "submissionEndDate": "2015-12-22T22:16:26.189Z",
+ "platforms": "",
+ "totalCheckpointPrize": 250,
+ "totalPrize": 1500,
+ "isPrivate": false,
+ "projectId": 9616,
+ "currentPhases": [
+ {
+ "challengeId": 30049530,
+ "id": 733652,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-12-22T15:59Z",
+ "scheduledEndTime": "2015-12-28T15:58Z",
+ "actualStartTime": "2015-12-22T15:59Z",
+ "fixedStartTime": "2015-12-22T15:59Z",
+ "duration": 518340000,
+ "updatedAt": "2015-12-22T17:29Z",
+ "createdAt": "2015-12-22T10:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049530,
+ "id": 733597,
+ "phaseType": "Final Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-12-22T22:29Z",
+ "scheduledEndTime": "2015-12-23T22:29Z",
+ "actualStartTime": "2015-12-22T22:29Z",
+ "duration": 86400000,
+ "updatedAt": "2015-12-22T17:29Z",
+ "createdAt": "2015-12-22T17:26Z",
+ "createdBy": "22841596",
+ "updatedBy": "22841596"
+ }
+ ],
+ "submissionViewable": true,
+ "allPhases": [
+ {
+ "challengeId": 30049530,
+ "id": 733650,
+ "phaseType": "Specification Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-22T15:40Z",
+ "scheduledEndTime": "2015-12-22T15:41Z",
+ "actualStartTime": "2015-12-22T15:40Z",
+ "actualEndTime": "2015-12-22T15:41Z",
+ "fixedStartTime": "2015-12-22T15:40Z",
+ "duration": 172800000,
+ "updatedAt": "2015-12-22T17:29Z",
+ "createdAt": "2015-12-22T10:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049530,
+ "id": 733651,
+ "phaseType": "Specification Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-22T15:41Z",
+ "scheduledEndTime": "2015-12-22T15:57Z",
+ "actualStartTime": "2015-12-22T15:41Z",
+ "actualEndTime": "2015-12-22T15:57Z",
+ "duration": 21600000,
+ "updatedAt": "2015-12-22T17:29Z",
+ "createdAt": "2015-12-22T10:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049530,
+ "id": 733652,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-12-22T15:59Z",
+ "scheduledEndTime": "2015-12-28T15:58Z",
+ "actualStartTime": "2015-12-22T15:59Z",
+ "fixedStartTime": "2015-12-22T15:59Z",
+ "duration": 518340000,
+ "updatedAt": "2015-12-22T17:29Z",
+ "createdAt": "2015-12-22T10:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049530,
+ "id": 733653,
+ "phaseType": "Checkpoint Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-22T16:04Z",
+ "scheduledEndTime": "2015-12-22T16:23Z",
+ "actualStartTime": "2015-12-22T16:04Z",
+ "actualEndTime": "2015-12-22T16:23Z",
+ "duration": 1421175,
+ "updatedAt": "2015-12-22T17:29Z",
+ "createdAt": "2015-12-22T10:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049530,
+ "id": 733654,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-22T22:13Z",
+ "scheduledEndTime": "2015-12-22T22:16Z",
+ "actualStartTime": "2015-12-22T22:13Z",
+ "actualEndTime": "2015-12-22T22:16Z",
+ "duration": 60000,
+ "updatedAt": "2015-12-22T17:29Z",
+ "createdAt": "2015-12-22T10:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049530,
+ "id": 733655,
+ "phaseType": "Checkpoint Screening",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-22T16:25Z",
+ "scheduledEndTime": "2015-12-22T16:39Z",
+ "actualStartTime": "2015-12-22T16:25Z",
+ "actualEndTime": "2015-12-22T16:39Z",
+ "duration": 60000,
+ "updatedAt": "2015-12-22T17:29Z",
+ "createdAt": "2015-12-22T10:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049530,
+ "id": 733656,
+ "phaseType": "Checkpoint Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-22T22:10Z",
+ "scheduledEndTime": "2015-12-22T22:13Z",
+ "actualStartTime": "2015-12-22T22:10Z",
+ "actualEndTime": "2015-12-22T22:13Z",
+ "duration": 172800000,
+ "updatedAt": "2015-12-22T17:29Z",
+ "createdAt": "2015-12-22T10:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049530,
+ "id": 733657,
+ "phaseType": "Screening",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-22T22:16Z",
+ "scheduledEndTime": "2015-12-22T22:18Z",
+ "actualStartTime": "2015-12-22T22:16Z",
+ "actualEndTime": "2015-12-22T22:18Z",
+ "duration": 14400000,
+ "updatedAt": "2015-12-22T17:29Z",
+ "createdAt": "2015-12-22T10:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049530,
+ "id": 733658,
+ "phaseType": "Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-22T22:18Z",
+ "scheduledEndTime": "2015-12-22T22:25Z",
+ "actualStartTime": "2015-12-22T22:18Z",
+ "actualEndTime": "2015-12-22T22:25Z",
+ "duration": 518400000,
+ "updatedAt": "2015-12-22T17:29Z",
+ "createdAt": "2015-12-22T10:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049530,
+ "id": 733659,
+ "phaseType": "Approval",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-22T22:25Z",
+ "scheduledEndTime": "2015-12-22T22:26Z",
+ "actualStartTime": "2015-12-22T22:25Z",
+ "actualEndTime": "2015-12-22T22:26Z",
+ "duration": 432000000,
+ "updatedAt": "2015-12-22T17:29Z",
+ "createdAt": "2015-12-22T10:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049530,
+ "id": 733596,
+ "phaseType": "Final Fix",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-12-22T22:27Z",
+ "scheduledEndTime": "2015-12-22T22:29Z",
+ "actualStartTime": "2015-12-22T22:27Z",
+ "actualEndTime": "2015-12-22T22:29Z",
+ "duration": 259200000,
+ "updatedAt": "2015-12-22T17:29Z",
+ "createdAt": "2015-12-22T17:26Z",
+ "createdBy": "22841596",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049530,
+ "id": 733597,
+ "phaseType": "Final Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-12-22T22:29Z",
+ "scheduledEndTime": "2015-12-23T22:29Z",
+ "actualStartTime": "2015-12-22T22:29Z",
+ "duration": 86400000,
+ "updatedAt": "2015-12-22T17:29Z",
+ "createdAt": "2015-12-22T17:26Z",
+ "createdBy": "22841596",
+ "updatedBy": "22841596"
+ }
+ ],
+ "prizes": [1250, 250, 50],
+ "winners": [
+ {
+ "userId": 22880988,
+ "type": "checkpoint",
+ "handle": "DaraK",
+ "placement": 1,
+ "photoURL": "/i/m/DaraK.png"
+ },
+ {
+ "userId": 22880988,
+ "type": "checkpoint",
+ "handle": "DaraK",
+ "placement": 2,
+ "photoURL": "/i/m/DaraK.png"
+ },
+ {
+ "userId": 22781893,
+ "type": "checkpoint",
+ "handle": "iamtong",
+ "placement": 3,
+ "photoURL": "/i/m/iamtong_big.jpg"
+ },
+ {
+ "userId": 22781893,
+ "type": "final",
+ "handle": "iamtong",
+ "placement": 1,
+ "photoURL": "/i/m/iamtong_big.jpg"
+ },
+ {
+ "userId": 22880988,
+ "type": "final",
+ "handle": "DaraK",
+ "placement": 2,
+ "photoURL": "/i/m/DaraK.png"
+ }
+ ],
+ "reliabilityBonus": 250,
+ "isTask": false
+ },
+ {
+ "submissions": [
+ {
+ "id": 509256,
+ "submittedAt": "2015-07-23T19:51Z",
+ "status": "Active",
+ "challengeId": 30049340,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509256&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509256&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509256&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509256&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509256&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509256"
+ }
+ },
+ {
+ "id": 509257,
+ "submittedAt": "2015-07-23T19:56Z",
+ "status": "Active",
+ "challengeId": 30049340,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509257&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509257&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509257&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509257&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509257&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509257"
+ }
+ },
+ {
+ "id": 509258,
+ "submittedAt": "2015-07-23T20:08Z",
+ "status": "Active",
+ "challengeId": 30049340,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509258&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509258&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509258&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509258&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509258&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509258"
+ }
+ },
+ {
+ "id": 509259,
+ "submittedAt": "2015-07-23T20:11Z",
+ "status": "Active",
+ "challengeId": 30049340,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509259&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509259&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509259&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509259&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509259&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=509259"
+ }
+ },
+ {
+ "id": 201670,
+ "submittedAt": "2015-07-23T17:17Z",
+ "status": "Active",
+ "challengeId": 30049340,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201670&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201670&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201670&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201670&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201670&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201670"
+ }
+ },
+ {
+ "id": 201671,
+ "submittedAt": "2015-07-23T17:24Z",
+ "status": "Active",
+ "challengeId": 30049340,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201671&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201671&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201671&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201671&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201671&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201671"
+ }
+ },
+ {
+ "id": 201672,
+ "submittedAt": "2015-07-24T04:09Z",
+ "status": "Active",
+ "challengeId": 30049340,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201672&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201672&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201672&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201672&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201672&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201672"
+ }
+ }
+ ],
+ "updatedAt": "2015-12-04T18:33Z",
+ "createdAt": "2015-07-20T20:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "DESIGN_FIRST_2_FINISH",
+ "name": "Create Responsive Location Layout",
+ "reviewType": "INTERNAL",
+ "id": 30049340,
+ "forumId": 593864,
+ "numSubmissions": 7,
+ "numRegistrants": 8,
+ "registrationStartDate": "2015-07-20T16:49:44.742Z",
+ "registrationEndDate": "2015-08-19T16:49:00.000Z",
+ "submissionEndDate": "2015-12-19T18:07:00.000Z",
+ "platforms": "",
+ "totalPrize": 200,
+ "isPrivate": false,
+ "projectId": 7572,
+ "currentPhases": [
+ {
+ "challengeId": 30049340,
+ "id": 733173,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-07-20T16:49Z",
+ "scheduledEndTime": "2015-08-19T16:49Z",
+ "actualStartTime": "2015-07-20T16:49Z",
+ "fixedStartTime": "2015-07-20T13:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-12-04T13:33Z",
+ "createdAt": "2015-07-20T12:46Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049340,
+ "id": 733174,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-07-20T17:08Z",
+ "scheduledEndTime": "2015-12-19T18:07Z",
+ "actualStartTime": "2015-07-20T17:08Z",
+ "duration": 13136367435,
+ "updatedAt": "2015-12-04T13:33Z",
+ "createdAt": "2015-07-20T12:46Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049340,
+ "id": 733175,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-07-20T17:11Z",
+ "scheduledEndTime": "2015-08-19T17:11Z",
+ "actualStartTime": "2015-07-20T17:11Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-12-04T13:33Z",
+ "createdAt": "2015-07-20T12:46Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "submissionViewable": true,
+ "allPhases": [
+ {
+ "challengeId": 30049340,
+ "id": 733173,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-07-20T16:49Z",
+ "scheduledEndTime": "2015-08-19T16:49Z",
+ "actualStartTime": "2015-07-20T16:49Z",
+ "fixedStartTime": "2015-07-20T13:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-12-04T13:33Z",
+ "createdAt": "2015-07-20T12:46Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049340,
+ "id": 733174,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-07-20T17:08Z",
+ "scheduledEndTime": "2015-12-19T18:07Z",
+ "actualStartTime": "2015-07-20T17:08Z",
+ "duration": 13136367435,
+ "updatedAt": "2015-12-04T13:33Z",
+ "createdAt": "2015-07-20T12:46Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049340,
+ "id": 733175,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-07-20T17:11Z",
+ "scheduledEndTime": "2015-08-19T17:11Z",
+ "actualStartTime": "2015-07-20T17:11Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-12-04T13:33Z",
+ "createdAt": "2015-07-20T12:46Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [200],
+ "reliabilityBonus": 40,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-11-16T18:37Z",
+ "createdAt": "2015-11-16T23:29Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846",
+ "technologies": ".NET System.Addins",
+ "status": "COMPLETED",
+ "track": "DEVELOP",
+ "subTrack": "FIRST_2_FINISH",
+ "name": "First2Finish Me",
+ "reviewType": "INTERNAL",
+ "id": 30049500,
+ "forumId": 28476,
+ "numSubmissions": 1,
+ "numRegistrants": 1,
+ "registrationStartDate": "2015-11-16T18:30:51.706Z",
+ "registrationEndDate": "2015-12-16T18:30:00.000Z",
+ "submissionEndDate": "2015-12-16T18:35:00.000Z",
+ "platforms": "Beanstalk",
+ "totalPrize": 800,
+ "isPrivate": false,
+ "projectId": 8044,
+ "currentPhases": [
+ {
+ "challengeId": 30049500,
+ "id": 733563,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-16T18:30Z",
+ "scheduledEndTime": "2015-12-16T18:30Z",
+ "actualStartTime": "2015-11-16T18:30Z",
+ "fixedStartTime": "2015-11-16T14:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-11-16T13:37Z",
+ "createdAt": "2015-11-16T13:29Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30049500,
+ "id": 733565,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-16T18:35Z",
+ "scheduledEndTime": "2015-12-16T18:35Z",
+ "actualStartTime": "2015-11-16T18:35Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-11-16T13:37Z",
+ "createdAt": "2015-11-16T13:29Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049500,
+ "id": 733563,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-16T18:30Z",
+ "scheduledEndTime": "2015-12-16T18:30Z",
+ "actualStartTime": "2015-11-16T18:30Z",
+ "fixedStartTime": "2015-11-16T14:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-11-16T13:37Z",
+ "createdAt": "2015-11-16T13:29Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30049500,
+ "id": 733564,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-16T18:36Z",
+ "scheduledEndTime": "2015-11-16T18:37Z",
+ "actualStartTime": "2015-11-16T18:36Z",
+ "actualEndTime": "2015-11-16T18:37Z",
+ "duration": 86400000,
+ "updatedAt": "2015-11-16T13:37Z",
+ "createdAt": "2015-11-16T13:29Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30049500,
+ "id": 733565,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-16T18:35Z",
+ "scheduledEndTime": "2015-12-16T18:35Z",
+ "actualStartTime": "2015-11-16T18:35Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-11-16T13:37Z",
+ "createdAt": "2015-11-16T13:29Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ }
+ ],
+ "prizes": [800],
+ "winners": [
+ {
+ "userId": 22922222,
+ "type": "final",
+ "handle": "miketest",
+ "placement": 1
+ }
+ ],
+ "reliabilityBonus": 160,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-11-11T20:32Z",
+ "createdAt": "2015-11-12T01:24Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846",
+ "technologies": ".NET",
+ "status": "COMPLETED",
+ "track": "DEVELOP",
+ "subTrack": "FIRST_2_FINISH",
+ "name": "Test First2Finish Placing",
+ "reviewType": "INTERNAL",
+ "id": 30049460,
+ "forumId": 28475,
+ "numSubmissions": 1,
+ "numRegistrants": 1,
+ "registrationStartDate": "2015-11-11T20:25:51.946Z",
+ "registrationEndDate": "2015-12-11T20:25:00.000Z",
+ "submissionEndDate": "2015-12-11T20:30:00.000Z",
+ "platforms": "Android",
+ "totalPrize": 1000,
+ "isPrivate": false,
+ "projectId": 8044,
+ "currentPhases": [
+ {
+ "challengeId": 30049460,
+ "id": 733483,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-11T20:25Z",
+ "scheduledEndTime": "2015-12-11T20:25Z",
+ "actualStartTime": "2015-11-11T20:25Z",
+ "fixedStartTime": "2015-11-11T14:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-11-11T15:32Z",
+ "createdAt": "2015-11-11T15:24Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30049460,
+ "id": 733485,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-11T20:30Z",
+ "scheduledEndTime": "2015-12-11T20:30Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-11-11T15:32Z",
+ "createdAt": "2015-11-11T15:24Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049460,
+ "id": 733483,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-11T20:25Z",
+ "scheduledEndTime": "2015-12-11T20:25Z",
+ "actualStartTime": "2015-11-11T20:25Z",
+ "fixedStartTime": "2015-11-11T14:00Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-11-11T15:32Z",
+ "createdAt": "2015-11-11T15:24Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30049460,
+ "id": 733484,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-11T20:30Z",
+ "scheduledEndTime": "2015-11-11T20:32Z",
+ "actualStartTime": "2015-11-11T20:30Z",
+ "actualEndTime": "2015-11-11T20:32Z",
+ "duration": 86400000,
+ "updatedAt": "2015-11-11T15:32Z",
+ "createdAt": "2015-11-11T15:24Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30049460,
+ "id": 733485,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-11T20:30Z",
+ "scheduledEndTime": "2015-12-11T20:30Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-11-11T15:32Z",
+ "createdAt": "2015-11-11T15:24Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ }
+ ],
+ "prizes": [1000],
+ "winners": [
+ {
+ "userId": 22922222,
+ "type": "final",
+ "handle": "miketest",
+ "placement": 1
+ }
+ ],
+ "reliabilityBonus": 200,
+ "isTask": false
+ },
+ {
+ "submissions": [
+ {
+ "id": 201750,
+ "submittedAt": "2015-11-17T20:09Z",
+ "status": "Active",
+ "score": 100,
+ "placement": 1,
+ "challengeId": 30049510,
+ "type": "Checkpoint Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201750&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201750&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201750&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201750&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201750&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201750"
+ }
+ },
+ {
+ "id": 201751,
+ "submittedAt": "2015-11-17T20:10Z",
+ "status": "Active",
+ "score": 90,
+ "placement": 2,
+ "challengeId": 30049510,
+ "type": "Checkpoint Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201751&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201751&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201751&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201751&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201751&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201751"
+ }
+ },
+ {
+ "id": 201770,
+ "submittedAt": "2015-11-19T01:49Z",
+ "status": "Completed Without Win",
+ "score": 90,
+ "placement": 2,
+ "challengeId": 30049510,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201770&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201770&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201770&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201770&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201770&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201770"
+ }
+ },
+ {
+ "id": 201780,
+ "submittedAt": "2015-11-19T01:57Z",
+ "status": "Active",
+ "score": 100,
+ "placement": 1,
+ "challengeId": 30049510,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201780&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201780&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201780&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201780&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201780&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201780"
+ }
+ },
+ {
+ "id": 201790,
+ "submittedAt": "2015-11-19T01:59Z",
+ "status": "Failed Screening",
+ "challengeId": 30049510,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201790&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201790&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201790&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201790&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201790&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201790"
+ }
+ }
+ ],
+ "updatedAt": "2015-11-20T18:11Z",
+ "createdAt": "2015-11-18T00:36Z",
+ "createdBy": "40141070",
+ "updatedBy": "22841596",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "WIDGET_OR_MOBILE_SCREEN_DESIGN",
+ "name": "Mobile Design 1",
+ "reviewType": "INTERNAL",
+ "id": 30049510,
+ "forumId": 593918,
+ "numSubmissions": 3,
+ "numRegistrants": 3,
+ "registrationStartDate": "2015-11-17T19:56:00.902Z",
+ "registrationEndDate": "2015-11-23T20:00:00.000Z",
+ "checkpointSubmissionEndDate": "2015-11-17T20:16:17.392Z",
+ "submissionEndDate": "2015-11-19T05:00:00.000Z",
+ "platforms": "",
+ "totalCheckpointPrize": 250,
+ "totalPrize": 1500,
+ "isPrivate": false,
+ "projectId": 9091,
+ "currentPhases": [
+ {
+ "challengeId": 30049510,
+ "id": 733582,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-17T19:56Z",
+ "scheduledEndTime": "2015-11-23T20:00Z",
+ "actualStartTime": "2015-11-17T19:56Z",
+ "fixedStartTime": "2015-11-17T19:56Z",
+ "duration": 518640000,
+ "updatedAt": "2015-11-20T13:21Z",
+ "createdAt": "2015-11-17T14:36Z",
+ "createdBy": "40141070",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049510,
+ "id": 733593,
+ "phaseType": "Final Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-20T18:21Z",
+ "scheduledEndTime": "2015-11-21T18:21Z",
+ "actualStartTime": "2015-11-20T18:21Z",
+ "duration": 86400000,
+ "updatedAt": "2015-11-20T13:21Z",
+ "createdAt": "2015-11-20T13:13Z",
+ "createdBy": "22841596",
+ "updatedBy": "22841596"
+ }
+ ],
+ "submissionViewable": true,
+ "allPhases": [
+ {
+ "challengeId": 30049510,
+ "id": 733580,
+ "phaseType": "Specification Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-17T19:40Z",
+ "scheduledEndTime": "2015-11-17T19:41Z",
+ "actualStartTime": "2015-11-17T19:40Z",
+ "actualEndTime": "2015-11-17T19:41Z",
+ "fixedStartTime": "2015-11-17T19:40Z",
+ "duration": 172800000,
+ "updatedAt": "2015-11-20T13:21Z",
+ "createdAt": "2015-11-17T14:36Z",
+ "createdBy": "40141070",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049510,
+ "id": 733581,
+ "phaseType": "Specification Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-17T19:41Z",
+ "scheduledEndTime": "2015-11-17T19:50Z",
+ "actualStartTime": "2015-11-17T19:41Z",
+ "actualEndTime": "2015-11-17T19:50Z",
+ "duration": 21600000,
+ "updatedAt": "2015-11-20T13:21Z",
+ "createdAt": "2015-11-17T14:36Z",
+ "createdBy": "40141070",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049510,
+ "id": 733582,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-17T19:56Z",
+ "scheduledEndTime": "2015-11-23T20:00Z",
+ "actualStartTime": "2015-11-17T19:56Z",
+ "fixedStartTime": "2015-11-17T19:56Z",
+ "duration": 518640000,
+ "updatedAt": "2015-11-20T13:21Z",
+ "createdAt": "2015-11-17T14:36Z",
+ "createdBy": "40141070",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049510,
+ "id": 733583,
+ "phaseType": "Checkpoint Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-17T20:01Z",
+ "scheduledEndTime": "2015-11-17T20:16Z",
+ "actualStartTime": "2015-11-17T20:01Z",
+ "actualEndTime": "2015-11-17T20:16Z",
+ "duration": 1216490,
+ "updatedAt": "2015-11-20T13:21Z",
+ "createdAt": "2015-11-17T14:36Z",
+ "createdBy": "40141070",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049510,
+ "id": 733584,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-19T01:29Z",
+ "scheduledEndTime": "2015-11-19T05:00Z",
+ "actualStartTime": "2015-11-19T01:29Z",
+ "actualEndTime": "2015-11-19T05:00Z",
+ "duration": 1812669,
+ "updatedAt": "2015-11-20T13:21Z",
+ "createdAt": "2015-11-17T14:36Z",
+ "createdBy": "40141070",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049510,
+ "id": 733585,
+ "phaseType": "Checkpoint Screening",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-17T20:16Z",
+ "scheduledEndTime": "2015-11-17T20:20Z",
+ "actualStartTime": "2015-11-17T20:16Z",
+ "actualEndTime": "2015-11-17T20:20Z",
+ "duration": 14400000,
+ "updatedAt": "2015-11-20T13:21Z",
+ "createdAt": "2015-11-17T14:36Z",
+ "createdBy": "40141070",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049510,
+ "id": 733586,
+ "phaseType": "Checkpoint Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-17T20:24Z",
+ "scheduledEndTime": "2015-11-19T01:29Z",
+ "actualStartTime": "2015-11-17T20:24Z",
+ "actualEndTime": "2015-11-19T01:29Z",
+ "duration": 172800000,
+ "updatedAt": "2015-11-20T13:21Z",
+ "createdAt": "2015-11-17T14:36Z",
+ "createdBy": "40141070",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049510,
+ "id": 733587,
+ "phaseType": "Screening",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-19T02:05Z",
+ "scheduledEndTime": "2015-11-19T02:08Z",
+ "actualStartTime": "2015-11-19T02:05Z",
+ "actualEndTime": "2015-11-19T02:08Z",
+ "duration": 14400000,
+ "updatedAt": "2015-11-20T13:21Z",
+ "createdAt": "2015-11-17T14:36Z",
+ "createdBy": "40141070",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049510,
+ "id": 733588,
+ "phaseType": "Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-19T02:08Z",
+ "scheduledEndTime": "2015-11-20T18:11Z",
+ "actualStartTime": "2015-11-19T02:08Z",
+ "actualEndTime": "2015-11-20T18:11Z",
+ "duration": 518400000,
+ "updatedAt": "2015-11-20T13:21Z",
+ "createdAt": "2015-11-17T14:36Z",
+ "createdBy": "40141070",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049510,
+ "id": 733589,
+ "phaseType": "Approval",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-20T18:12Z",
+ "scheduledEndTime": "2015-11-20T18:13Z",
+ "actualStartTime": "2015-11-20T18:12Z",
+ "actualEndTime": "2015-11-20T18:13Z",
+ "duration": 432000000,
+ "updatedAt": "2015-11-20T13:21Z",
+ "createdAt": "2015-11-17T14:36Z",
+ "createdBy": "40141070",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049510,
+ "id": 733592,
+ "phaseType": "Final Fix",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-20T18:13Z",
+ "scheduledEndTime": "2015-11-20T18:21Z",
+ "actualStartTime": "2015-11-20T18:13Z",
+ "actualEndTime": "2015-11-20T18:21Z",
+ "duration": 259200000,
+ "updatedAt": "2015-11-20T13:21Z",
+ "createdAt": "2015-11-20T13:13Z",
+ "createdBy": "22841596",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049510,
+ "id": 733593,
+ "phaseType": "Final Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-20T18:21Z",
+ "scheduledEndTime": "2015-11-21T18:21Z",
+ "actualStartTime": "2015-11-20T18:21Z",
+ "duration": 86400000,
+ "updatedAt": "2015-11-20T13:21Z",
+ "createdAt": "2015-11-20T13:13Z",
+ "createdBy": "22841596",
+ "updatedBy": "22841596"
+ }
+ ],
+ "prizes": [1250, 250, 50],
+ "winners": [
+ {
+ "userId": 22781893,
+ "type": "checkpoint",
+ "handle": "iamtong",
+ "placement": 1,
+ "photoURL": "/i/m/iamtong_big.jpg"
+ },
+ {
+ "userId": 158394,
+ "type": "checkpoint",
+ "handle": "scubasteve",
+ "placement": 2
+ },
+ {
+ "userId": 22781893,
+ "type": "final",
+ "handle": "iamtong",
+ "placement": 1,
+ "photoURL": "/i/m/iamtong_big.jpg"
+ },
+ {
+ "userId": 158394,
+ "type": "final",
+ "handle": "scubasteve",
+ "placement": 2
+ }
+ ],
+ "reliabilityBonus": 250,
+ "isTask": false
+ },
+ {
+ "submissions": [
+ {
+ "id": 201674,
+ "submittedAt": "2015-11-13T09:39Z",
+ "status": "Active",
+ "challengeId": 30049480,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201674&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201674&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201674&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201674&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201674&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201674"
+ }
+ },
+ {
+ "id": 201675,
+ "submittedAt": "2015-11-13T17:06Z",
+ "status": "Active",
+ "challengeId": 30049480,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201675&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201675&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201675&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201675&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201675&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201675"
+ }
+ },
+ {
+ "id": 202824,
+ "submittedAt": "2016-01-22T22:02Z",
+ "status": "Active",
+ "challengeId": 30049480,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202824&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202824&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202824&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202824&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202824&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=202824"
+ }
+ }
+ ],
+ "updatedAt": "2015-11-17T21:36Z",
+ "createdAt": "2015-11-13T04:23Z",
+ "createdBy": "40141235",
+ "updatedBy": "8547899",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "WIDGET_OR_MOBILE_SCREEN_DESIGN",
+ "name": "foo3 design",
+ "reviewType": "INTERNAL",
+ "id": 30049480,
+ "forumId": 593913,
+ "numSubmissions": 3,
+ "numRegistrants": 6,
+ "registrationStartDate": "2015-11-13T04:51:29.000Z",
+ "registrationEndDate": "2015-11-14T04:50:00.000Z",
+ "submissionEndDate": "2015-11-19T04:49:00.000Z",
+ "platforms": "",
+ "totalPrize": 1500,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30049480,
+ "id": 733521,
+ "phaseType": "Screening",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-19T04:49Z",
+ "scheduledEndTime": "2015-11-19T08:49Z",
+ "duration": 14400000,
+ "updatedAt": "2015-11-17T16:36Z",
+ "createdAt": "2015-11-12T18:23Z",
+ "createdBy": "40141235",
+ "updatedBy": "8547899"
+ },
+ "projectId": 9043,
+ "currentPhases": [
+ {
+ "challengeId": 30049480,
+ "id": 733519,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-13T04:51Z",
+ "scheduledEndTime": "2015-11-14T04:50Z",
+ "actualStartTime": "2015-11-13T04:51Z",
+ "fixedStartTime": "2015-11-12T08:39Z",
+ "duration": 86340000,
+ "updatedAt": "2015-11-17T16:36Z",
+ "createdAt": "2015-11-12T18:23Z",
+ "createdBy": "40141235",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049480,
+ "id": 733520,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-13T04:57Z",
+ "scheduledEndTime": "2015-11-19T04:49Z",
+ "actualStartTime": "2015-11-13T04:57Z",
+ "duration": 517929000,
+ "updatedAt": "2015-11-17T16:36Z",
+ "createdAt": "2015-11-12T18:23Z",
+ "createdBy": "40141235",
+ "updatedBy": "8547899"
+ }
+ ],
+ "submissionViewable": true,
+ "allPhases": [
+ {
+ "challengeId": 30049480,
+ "id": 733517,
+ "phaseType": "Specification Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-12T23:27Z",
+ "scheduledEndTime": "2015-11-12T23:28Z",
+ "actualStartTime": "2015-11-12T23:27Z",
+ "actualEndTime": "2015-11-12T23:28Z",
+ "fixedStartTime": "2015-11-12T23:23Z",
+ "duration": 172800000,
+ "updatedAt": "2015-11-17T16:36Z",
+ "createdAt": "2015-11-12T18:23Z",
+ "createdBy": "40141235",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049480,
+ "id": 733518,
+ "phaseType": "Specification Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-12T23:28Z",
+ "scheduledEndTime": "2015-11-13T04:39Z",
+ "actualStartTime": "2015-11-12T23:28Z",
+ "actualEndTime": "2015-11-13T04:39Z",
+ "duration": 1000,
+ "updatedAt": "2015-11-17T16:36Z",
+ "createdAt": "2015-11-12T18:23Z",
+ "createdBy": "40141235",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049480,
+ "id": 733519,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-13T04:51Z",
+ "scheduledEndTime": "2015-11-14T04:50Z",
+ "actualStartTime": "2015-11-13T04:51Z",
+ "fixedStartTime": "2015-11-12T08:39Z",
+ "duration": 86340000,
+ "updatedAt": "2015-11-17T16:36Z",
+ "createdAt": "2015-11-12T18:23Z",
+ "createdBy": "40141235",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049480,
+ "id": 733520,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-13T04:57Z",
+ "scheduledEndTime": "2015-11-19T04:49Z",
+ "actualStartTime": "2015-11-13T04:57Z",
+ "duration": 517929000,
+ "updatedAt": "2015-11-17T16:36Z",
+ "createdAt": "2015-11-12T18:23Z",
+ "createdBy": "40141235",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049480,
+ "id": 733521,
+ "phaseType": "Screening",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-19T04:49Z",
+ "scheduledEndTime": "2015-11-19T08:49Z",
+ "duration": 14400000,
+ "updatedAt": "2015-11-17T16:36Z",
+ "createdAt": "2015-11-12T18:23Z",
+ "createdBy": "40141235",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049480,
+ "id": 733522,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-19T08:49Z",
+ "scheduledEndTime": "2015-11-25T08:49Z",
+ "duration": 518400000,
+ "updatedAt": "2015-11-17T16:36Z",
+ "createdAt": "2015-11-12T18:23Z",
+ "createdBy": "40141235",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049480,
+ "id": 733523,
+ "phaseType": "Approval",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-25T08:49Z",
+ "scheduledEndTime": "2015-11-30T08:49Z",
+ "duration": 432000000,
+ "updatedAt": "2015-11-17T16:36Z",
+ "createdAt": "2015-11-12T18:23Z",
+ "createdBy": "40141235",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [1250, 250],
+ "reliabilityBonus": 250,
+ "isTask": false
+ },
+ {
+ "submissions": [
+ {
+ "id": 201730,
+ "submittedAt": "2015-11-13T19:28Z",
+ "status": "Active",
+ "score": 100,
+ "placement": 1,
+ "challengeId": 30049490,
+ "type": "Checkpoint Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201730&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201730&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201730&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201730&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201730&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201730"
+ }
+ },
+ {
+ "id": 201731,
+ "submittedAt": "2015-11-16T22:48Z",
+ "status": "Active",
+ "challengeId": 30049490,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201731&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201731&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201731&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201731&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201731&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201731"
+ }
+ },
+ {
+ "id": 201732,
+ "submittedAt": "2015-11-16T22:52Z",
+ "status": "Active",
+ "challengeId": 30049490,
+ "type": "Contest Submission",
+ "submissionImage": {
+ "tiny": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201732&sbt=tiny",
+ "small": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201732&sbt=small",
+ "medium": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201732&sbt=medium",
+ "full": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201732&sbt=full",
+ "thumb": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201732&sbt=thumb",
+ "previewPackage": "//studio.topcoder-dev.com/studio.jpg?module=DownloadSubmission&sbmid=201732"
+ }
+ }
+ ],
+ "updatedAt": "2015-11-16T23:01Z",
+ "createdAt": "2015-11-13T22:32Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "WIDGET_OR_MOBILE_SCREEN_DESIGN",
+ "name": "Tony Design 1",
+ "reviewType": "INTERNAL",
+ "id": 30049490,
+ "forumId": 593915,
+ "numSubmissions": 2,
+ "numRegistrants": 2,
+ "registrationStartDate": "2015-11-13T17:43:26.469Z",
+ "registrationEndDate": "2015-11-19T17:42:00.000Z",
+ "checkpointSubmissionEndDate": "2015-11-13T19:30:26.174Z",
+ "submissionEndDate": "2015-11-16T22:57:50.849Z",
+ "platforms": "",
+ "totalCheckpointPrize": 250,
+ "totalPrize": 1500,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30049490,
+ "id": 733559,
+ "phaseType": "Approval",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-22T23:02Z",
+ "scheduledEndTime": "2015-11-27T23:02Z",
+ "duration": 432000000,
+ "updatedAt": "2015-11-16T18:02Z",
+ "createdAt": "2015-11-13T12:32Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ "projectId": 9043,
+ "currentPhases": [
+ {
+ "challengeId": 30049490,
+ "id": 733552,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-13T17:43Z",
+ "scheduledEndTime": "2015-11-19T17:42Z",
+ "actualStartTime": "2015-11-13T17:43Z",
+ "fixedStartTime": "2015-11-13T17:43Z",
+ "duration": 518340000,
+ "updatedAt": "2015-11-16T18:02Z",
+ "createdAt": "2015-11-13T12:32Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049490,
+ "id": 733558,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-16T23:02Z",
+ "scheduledEndTime": "2015-11-22T23:02Z",
+ "actualStartTime": "2015-11-16T23:02Z",
+ "duration": 518400000,
+ "updatedAt": "2015-11-16T18:02Z",
+ "createdAt": "2015-11-13T12:32Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ }
+ ],
+ "submissionViewable": true,
+ "allPhases": [
+ {
+ "challengeId": 30049490,
+ "id": 733550,
+ "phaseType": "Specification Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-13T17:36Z",
+ "scheduledEndTime": "2015-11-13T17:37Z",
+ "actualStartTime": "2015-11-13T17:36Z",
+ "actualEndTime": "2015-11-13T17:37Z",
+ "fixedStartTime": "2015-11-13T17:36Z",
+ "duration": 0,
+ "updatedAt": "2015-11-16T18:02Z",
+ "createdAt": "2015-11-13T12:32Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049490,
+ "id": 733551,
+ "phaseType": "Specification Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-13T17:37Z",
+ "scheduledEndTime": "2015-11-13T17:39Z",
+ "actualStartTime": "2015-11-13T17:37Z",
+ "actualEndTime": "2015-11-13T17:39Z",
+ "duration": 21600000,
+ "updatedAt": "2015-11-16T18:02Z",
+ "createdAt": "2015-11-13T12:32Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049490,
+ "id": 733552,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-13T17:43Z",
+ "scheduledEndTime": "2015-11-19T17:42Z",
+ "actualStartTime": "2015-11-13T17:43Z",
+ "fixedStartTime": "2015-11-13T17:43Z",
+ "duration": 518340000,
+ "updatedAt": "2015-11-16T18:02Z",
+ "createdAt": "2015-11-13T12:32Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049490,
+ "id": 733553,
+ "phaseType": "Checkpoint Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-13T17:48Z",
+ "scheduledEndTime": "2015-11-13T19:30Z",
+ "actualStartTime": "2015-11-13T17:48Z",
+ "actualEndTime": "2015-11-13T19:30Z",
+ "duration": 6419705,
+ "updatedAt": "2015-11-16T18:02Z",
+ "createdAt": "2015-11-13T12:32Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049490,
+ "id": 733554,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-16T22:27Z",
+ "scheduledEndTime": "2015-11-16T22:57Z",
+ "actualStartTime": "2015-11-16T22:27Z",
+ "actualEndTime": "2015-11-16T22:57Z",
+ "duration": 1037087,
+ "updatedAt": "2015-11-16T18:02Z",
+ "createdAt": "2015-11-13T12:32Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049490,
+ "id": 733555,
+ "phaseType": "Checkpoint Screening",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-13T18:03Z",
+ "scheduledEndTime": "2015-11-14T00:33Z",
+ "actualStartTime": "2015-11-13T18:03Z",
+ "actualEndTime": "2015-11-14T00:33Z",
+ "duration": 14400000,
+ "updatedAt": "2015-11-16T18:02Z",
+ "createdAt": "2015-11-13T12:32Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049490,
+ "id": 733556,
+ "phaseType": "Checkpoint Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-13T18:09Z",
+ "scheduledEndTime": "2015-11-16T22:08Z",
+ "actualStartTime": "2015-11-13T18:09Z",
+ "actualEndTime": "2015-11-16T22:08Z",
+ "duration": 172800000,
+ "updatedAt": "2015-11-16T18:02Z",
+ "createdAt": "2015-11-13T12:32Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049490,
+ "id": 733557,
+ "phaseType": "Screening",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-16T22:58Z",
+ "scheduledEndTime": "2015-11-16T23:02Z",
+ "actualStartTime": "2015-11-16T22:58Z",
+ "actualEndTime": "2015-11-16T23:02Z",
+ "duration": 14400000,
+ "updatedAt": "2015-11-16T18:02Z",
+ "createdAt": "2015-11-13T12:32Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049490,
+ "id": 733558,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-16T23:02Z",
+ "scheduledEndTime": "2015-11-22T23:02Z",
+ "actualStartTime": "2015-11-16T23:02Z",
+ "duration": 518400000,
+ "updatedAt": "2015-11-16T18:02Z",
+ "createdAt": "2015-11-13T12:32Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049490,
+ "id": 733559,
+ "phaseType": "Approval",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-22T23:02Z",
+ "scheduledEndTime": "2015-11-27T23:02Z",
+ "duration": 432000000,
+ "updatedAt": "2015-11-16T18:02Z",
+ "createdAt": "2015-11-13T12:32Z",
+ "createdBy": "8547899",
+ "updatedBy": "22841596"
+ }
+ ],
+ "prizes": [1250, 250, 50],
+ "winners": [
+ {
+ "userId": 22880988,
+ "type": "checkpoint",
+ "handle": "DaraK",
+ "placement": 1,
+ "photoURL": "/i/m/DaraK.png"
+ }
+ ],
+ "reliabilityBonus": 250,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-11-05T16:34Z",
+ "createdAt": "2015-11-05T20:48Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "WIDGET_OR_MOBILE_SCREEN_DESIGN",
+ "name": "Mess11-5 Mobile Design",
+ "reviewType": "INTERNAL",
+ "id": 30049440,
+ "forumId": 593899,
+ "numSubmissions": 0,
+ "numRegistrants": 0,
+ "registrationStartDate": "2015-11-05T16:34:03.936Z",
+ "registrationEndDate": "2015-12-16T14:17:00.000Z",
+ "checkpointSubmissionEndDate": "2015-12-11T14:18:00.000Z",
+ "submissionEndDate": "2015-11-15T16:34:00.000Z",
+ "platforms": "",
+ "totalCheckpointPrize": 250,
+ "totalPrize": 1500,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30049440,
+ "id": 733373,
+ "phaseType": "Checkpoint Submission",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-05T16:39Z",
+ "scheduledEndTime": "2015-12-11T14:18Z",
+ "duration": 3101940000,
+ "updatedAt": "2015-11-05T11:34Z",
+ "createdAt": "2015-11-05T11:00Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ "projectId": 8998,
+ "currentPhases": [
+ {
+ "challengeId": 30049440,
+ "id": 733372,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-05T16:34Z",
+ "scheduledEndTime": "2015-12-16T14:17Z",
+ "actualStartTime": "2015-11-05T16:34Z",
+ "fixedStartTime": "2015-11-05T14:00Z",
+ "duration": 3534180000,
+ "updatedAt": "2015-11-05T11:34Z",
+ "createdAt": "2015-11-05T11:00Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "submissionViewable": true,
+ "allPhases": [
+ {
+ "challengeId": 30049440,
+ "id": 733370,
+ "phaseType": "Specification Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-05T16:01Z",
+ "scheduledEndTime": "2015-11-05T16:01Z",
+ "actualStartTime": "2015-11-05T16:01Z",
+ "actualEndTime": "2015-11-05T16:01Z",
+ "fixedStartTime": "2015-11-05T16:00Z",
+ "duration": 172800000,
+ "updatedAt": "2015-11-05T11:34Z",
+ "createdAt": "2015-11-05T11:00Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049440,
+ "id": 733371,
+ "phaseType": "Specification Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-05T16:01Z",
+ "scheduledEndTime": "2015-11-05T16:16Z",
+ "actualStartTime": "2015-11-05T16:01Z",
+ "actualEndTime": "2015-11-05T16:16Z",
+ "duration": 21600000,
+ "updatedAt": "2015-11-05T11:34Z",
+ "createdAt": "2015-11-05T11:00Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049440,
+ "id": 733372,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-05T16:34Z",
+ "scheduledEndTime": "2015-12-16T14:17Z",
+ "actualStartTime": "2015-11-05T16:34Z",
+ "fixedStartTime": "2015-11-05T14:00Z",
+ "duration": 3534180000,
+ "updatedAt": "2015-11-05T11:34Z",
+ "createdAt": "2015-11-05T11:00Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049440,
+ "id": 733373,
+ "phaseType": "Checkpoint Submission",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-05T16:39Z",
+ "scheduledEndTime": "2015-12-11T14:18Z",
+ "duration": 3101940000,
+ "updatedAt": "2015-11-05T11:34Z",
+ "createdAt": "2015-11-05T11:00Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049440,
+ "id": 733374,
+ "phaseType": "Submission",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-05T16:39Z",
+ "scheduledEndTime": "2015-11-15T16:34Z",
+ "duration": 863700000,
+ "updatedAt": "2015-11-05T11:34Z",
+ "createdAt": "2015-11-05T11:00Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049440,
+ "id": 733375,
+ "phaseType": "Checkpoint Screening",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-12-11T14:18Z",
+ "scheduledEndTime": "2015-12-11T18:18Z",
+ "duration": 14400000,
+ "updatedAt": "2015-11-05T11:34Z",
+ "createdAt": "2015-11-05T11:00Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049440,
+ "id": 733376,
+ "phaseType": "Checkpoint Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-12-11T18:18Z",
+ "scheduledEndTime": "2015-12-15T22:18Z",
+ "duration": 360000000,
+ "updatedAt": "2015-11-05T11:34Z",
+ "createdAt": "2015-11-05T11:00Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049440,
+ "id": 733377,
+ "phaseType": "Screening",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-15T16:34Z",
+ "scheduledEndTime": "2015-11-15T20:34Z",
+ "duration": 14400000,
+ "updatedAt": "2015-11-05T11:34Z",
+ "createdAt": "2015-11-05T11:00Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049440,
+ "id": 733378,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-15T20:34Z",
+ "scheduledEndTime": "2015-11-21T20:34Z",
+ "duration": 518400000,
+ "updatedAt": "2015-11-05T11:34Z",
+ "createdAt": "2015-11-05T11:00Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049440,
+ "id": 733379,
+ "phaseType": "Approval",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-21T20:34Z",
+ "scheduledEndTime": "2015-11-26T20:34Z",
+ "duration": 432000000,
+ "updatedAt": "2015-11-05T11:34Z",
+ "createdAt": "2015-11-05T11:00Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [1250, 250, 50],
+ "reliabilityBonus": 250,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-11-11T00:51Z",
+ "createdAt": "2015-11-11T05:42Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596",
+ "technologies": "AJAX",
+ "status": "COMPLETED",
+ "track": "DEVELOP",
+ "subTrack": "FIRST_2_FINISH",
+ "name": "Testing First2Finish Again",
+ "reviewType": "INTERNAL",
+ "id": 30049455,
+ "forumId": 28474,
+ "numSubmissions": 1,
+ "numRegistrants": 1,
+ "registrationStartDate": "2015-11-11T00:44:19.368Z",
+ "registrationEndDate": "2015-11-11T12:44:00.000Z",
+ "submissionEndDate": "2015-11-11T12:49:00.000Z",
+ "platforms": "Android",
+ "totalPrize": 400,
+ "isPrivate": false,
+ "projectId": 7398,
+ "currentPhases": [
+ {
+ "challengeId": 30049455,
+ "id": 733473,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-11T00:44Z",
+ "scheduledEndTime": "2015-11-11T12:44Z",
+ "actualStartTime": "2015-11-11T00:44Z",
+ "fixedStartTime": "2015-11-10T14:00Z",
+ "duration": 43200000,
+ "updatedAt": "2015-11-10T19:51Z",
+ "createdAt": "2015-11-10T19:42Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049455,
+ "id": 733475,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-11T00:49Z",
+ "scheduledEndTime": "2015-11-11T12:49Z",
+ "actualStartTime": "2015-11-11T00:49Z",
+ "duration": 43200000,
+ "updatedAt": "2015-11-10T19:51Z",
+ "createdAt": "2015-11-10T19:42Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049455,
+ "id": 733473,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-11T00:44Z",
+ "scheduledEndTime": "2015-11-11T12:44Z",
+ "actualStartTime": "2015-11-11T00:44Z",
+ "fixedStartTime": "2015-11-10T14:00Z",
+ "duration": 43200000,
+ "updatedAt": "2015-11-10T19:51Z",
+ "createdAt": "2015-11-10T19:42Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049455,
+ "id": 733474,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-11T00:50Z",
+ "scheduledEndTime": "2015-11-11T00:51Z",
+ "actualStartTime": "2015-11-11T00:50Z",
+ "actualEndTime": "2015-11-11T00:51Z",
+ "duration": 86400000,
+ "updatedAt": "2015-11-10T19:51Z",
+ "createdAt": "2015-11-10T19:42Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049455,
+ "id": 733475,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-11T00:49Z",
+ "scheduledEndTime": "2015-11-11T12:49Z",
+ "actualStartTime": "2015-11-11T00:49Z",
+ "duration": 43200000,
+ "updatedAt": "2015-11-10T19:51Z",
+ "createdAt": "2015-11-10T19:42Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ }
+ ],
+ "prizes": [400],
+ "winners": [
+ {
+ "userId": 22922222,
+ "type": "final",
+ "handle": "miketest",
+ "placement": 1
+ }
+ ],
+ "reliabilityBonus": 80,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-11-10T20:17Z",
+ "createdAt": "2015-11-11T01:01Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596",
+ "technologies": ".NET",
+ "status": "COMPLETED",
+ "track": "DEVELOP",
+ "subTrack": "FIRST_2_FINISH",
+ "name": "Test First2Finish Placement",
+ "reviewType": "INTERNAL",
+ "id": 30049454,
+ "forumId": 28473,
+ "numSubmissions": 1,
+ "numRegistrants": 1,
+ "registrationStartDate": "2015-11-10T20:08:49.791Z",
+ "registrationEndDate": "2015-11-11T08:08:00.000Z",
+ "submissionEndDate": "2015-11-11T08:13:00.000Z",
+ "platforms": "Android",
+ "totalPrize": 800,
+ "isPrivate": false,
+ "projectId": 7398,
+ "currentPhases": [
+ {
+ "challengeId": 30049454,
+ "id": 733467,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-10T20:08Z",
+ "scheduledEndTime": "2015-11-11T08:08Z",
+ "actualStartTime": "2015-11-10T20:08Z",
+ "fixedStartTime": "2015-11-10T14:00Z",
+ "duration": 43200000,
+ "updatedAt": "2015-11-10T15:17Z",
+ "createdAt": "2015-11-10T15:14Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049454,
+ "id": 733469,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-10T20:13Z",
+ "scheduledEndTime": "2015-11-11T08:13Z",
+ "actualStartTime": "2015-11-10T20:13Z",
+ "duration": 43200000,
+ "updatedAt": "2015-11-10T15:17Z",
+ "createdAt": "2015-11-10T15:14Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049454,
+ "id": 733467,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-10T20:08Z",
+ "scheduledEndTime": "2015-11-11T08:08Z",
+ "actualStartTime": "2015-11-10T20:08Z",
+ "fixedStartTime": "2015-11-10T14:00Z",
+ "duration": 43200000,
+ "updatedAt": "2015-11-10T15:17Z",
+ "createdAt": "2015-11-10T15:14Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049454,
+ "id": 733468,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T20:14Z",
+ "scheduledEndTime": "2015-11-10T20:17Z",
+ "actualStartTime": "2015-11-10T20:14Z",
+ "actualEndTime": "2015-11-10T20:17Z",
+ "duration": 86400000,
+ "updatedAt": "2015-11-10T15:17Z",
+ "createdAt": "2015-11-10T15:14Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049454,
+ "id": 733469,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-11-10T20:13Z",
+ "scheduledEndTime": "2015-11-11T08:13Z",
+ "actualStartTime": "2015-11-10T20:13Z",
+ "duration": 43200000,
+ "updatedAt": "2015-11-10T15:17Z",
+ "createdAt": "2015-11-10T15:14Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ }
+ ],
+ "prizes": [800],
+ "winners": [
+ {
+ "userId": 22922222,
+ "type": "final",
+ "handle": "miketest",
+ "placement": 1
+ }
+ ],
+ "reliabilityBonus": 160,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-11-10T18:52Z",
+ "createdAt": "2015-11-10T23:28Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846",
+ "technologies": "",
+ "status": "COMPLETED",
+ "track": "DESIGN",
+ "subTrack": "WEB_DESIGNS",
+ "name": "Test Estimated Web Design",
+ "reviewType": "INTERNAL",
+ "id": 30049452,
+ "forumId": 593904,
+ "numSubmissions": 1,
+ "numRegistrants": 1,
+ "registrationStartDate": "2015-11-10T18:39:51.672Z",
+ "registrationEndDate": "2015-11-10T18:46:56.322Z",
+ "submissionEndDate": "2015-11-10T18:47:33.692Z",
+ "platforms": "",
+ "totalPrize": 4800,
+ "isPrivate": false,
+ "projectId": 7398,
+ "currentPhases": [],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30049452,
+ "id": 733437,
+ "phaseType": "Specification Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:33Z",
+ "scheduledEndTime": "2015-11-10T18:34Z",
+ "actualStartTime": "2015-11-10T18:33Z",
+ "actualEndTime": "2015-11-10T18:34Z",
+ "fixedStartTime": "2015-11-10T18:21Z",
+ "duration": 172800000,
+ "updatedAt": "2015-11-10T13:52Z",
+ "createdAt": "2015-11-10T13:41Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30049452,
+ "id": 733438,
+ "phaseType": "Specification Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:34Z",
+ "scheduledEndTime": "2015-11-10T18:37Z",
+ "actualStartTime": "2015-11-10T18:34Z",
+ "actualEndTime": "2015-11-10T18:37Z",
+ "duration": 21600000,
+ "updatedAt": "2015-11-10T13:52Z",
+ "createdAt": "2015-11-10T13:41Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30049452,
+ "id": 733439,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:39Z",
+ "scheduledEndTime": "2015-11-10T18:46Z",
+ "actualStartTime": "2015-11-10T18:39Z",
+ "actualEndTime": "2015-11-10T18:46Z",
+ "fixedStartTime": "2015-11-10T13:55Z",
+ "duration": 0,
+ "updatedAt": "2015-11-10T13:52Z",
+ "createdAt": "2015-11-10T13:41Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30049452,
+ "id": 733440,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:44Z",
+ "scheduledEndTime": "2015-11-10T18:47Z",
+ "actualStartTime": "2015-11-10T18:44Z",
+ "actualEndTime": "2015-11-10T18:47Z",
+ "duration": 0,
+ "updatedAt": "2015-11-10T13:52Z",
+ "createdAt": "2015-11-10T13:41Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30049452,
+ "id": 733441,
+ "phaseType": "Screening",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:48Z",
+ "scheduledEndTime": "2015-11-10T18:49Z",
+ "actualStartTime": "2015-11-10T18:48Z",
+ "actualEndTime": "2015-11-10T18:49Z",
+ "duration": 14400000,
+ "updatedAt": "2015-11-10T13:52Z",
+ "createdAt": "2015-11-10T13:41Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30049452,
+ "id": 733442,
+ "phaseType": "Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:49Z",
+ "scheduledEndTime": "2015-11-10T18:52Z",
+ "actualStartTime": "2015-11-10T18:49Z",
+ "actualEndTime": "2015-11-10T18:52Z",
+ "duration": 518400000,
+ "updatedAt": "2015-11-10T13:52Z",
+ "createdAt": "2015-11-10T13:41Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30049452,
+ "id": 733443,
+ "phaseType": "Approval",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:52Z",
+ "scheduledEndTime": "2015-11-10T18:52Z",
+ "actualStartTime": "2015-11-10T18:52Z",
+ "actualEndTime": "2015-11-10T18:52Z",
+ "duration": 432000000,
+ "updatedAt": "2015-11-10T13:52Z",
+ "createdAt": "2015-11-10T13:41Z",
+ "createdBy": "11823846",
+ "updatedBy": "11823846"
+ }
+ ],
+ "prizes": [4000, 800],
+ "winners": [
+ {
+ "userId": 22922222,
+ "type": "final",
+ "handle": "miketest",
+ "placement": 1
+ }
+ ],
+ "reliabilityBonus": 800,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-11-10T18:25Z",
+ "createdAt": "2015-11-10T21:48Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596",
+ "technologies": ".NET",
+ "status": "COMPLETED",
+ "track": "DEVELOP",
+ "subTrack": "ASSEMBLY_COMPETITION",
+ "name": "Test Estimated Assembly",
+ "reviewType": "COMMUNITY",
+ "id": 30049450,
+ "forumId": 28472,
+ "numSubmissions": 1,
+ "numRegistrants": 1,
+ "registrationStartDate": "2015-11-10T18:03:30.244Z",
+ "registrationEndDate": "2015-11-10T18:16:38.539Z",
+ "submissionEndDate": "2015-11-10T18:16:50.541Z",
+ "platforms": "Android",
+ "totalPrize": 2400,
+ "isPrivate": false,
+ "projectId": 7398,
+ "currentPhases": [],
+ "allPhases": [
+ {
+ "challengeId": 30049450,
+ "id": 733412,
+ "phaseType": "Specification Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T17:01Z",
+ "scheduledEndTime": "2015-11-10T17:02Z",
+ "actualStartTime": "2015-11-10T17:01Z",
+ "actualEndTime": "2015-11-10T17:02Z",
+ "fixedStartTime": "2015-11-10T17:01Z",
+ "duration": 172800000,
+ "updatedAt": "2015-11-10T13:25Z",
+ "createdAt": "2015-11-10T12:01Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049450,
+ "id": 733413,
+ "phaseType": "Specification Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T17:02Z",
+ "scheduledEndTime": "2015-11-10T18:02Z",
+ "actualStartTime": "2015-11-10T17:02Z",
+ "actualEndTime": "2015-11-10T18:02Z",
+ "duration": 7200000,
+ "updatedAt": "2015-11-10T13:25Z",
+ "createdAt": "2015-11-10T12:01Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049450,
+ "id": 733414,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:03Z",
+ "scheduledEndTime": "2015-11-10T18:16Z",
+ "actualStartTime": "2015-11-10T18:03Z",
+ "actualEndTime": "2015-11-10T18:16Z",
+ "fixedStartTime": "2015-11-10T14:00Z",
+ "duration": 0,
+ "updatedAt": "2015-11-10T13:25Z",
+ "createdAt": "2015-11-10T12:01Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049450,
+ "id": 733415,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:14Z",
+ "scheduledEndTime": "2015-11-10T18:16Z",
+ "actualStartTime": "2015-11-10T18:14Z",
+ "actualEndTime": "2015-11-10T18:16Z",
+ "duration": 0,
+ "updatedAt": "2015-11-10T13:25Z",
+ "createdAt": "2015-11-10T12:01Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049450,
+ "id": 733416,
+ "phaseType": "Screening",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:17Z",
+ "scheduledEndTime": "2015-11-10T18:17Z",
+ "actualStartTime": "2015-11-10T18:17Z",
+ "actualEndTime": "2015-11-10T18:17Z",
+ "duration": 3600000,
+ "updatedAt": "2015-11-10T13:25Z",
+ "createdAt": "2015-11-10T12:01Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049450,
+ "id": 733417,
+ "phaseType": "Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:17Z",
+ "scheduledEndTime": "2015-11-10T18:20Z",
+ "actualStartTime": "2015-11-10T18:17Z",
+ "actualEndTime": "2015-11-10T18:20Z",
+ "duration": 3600000,
+ "updatedAt": "2015-11-10T13:25Z",
+ "createdAt": "2015-11-10T12:01Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049450,
+ "id": 733418,
+ "phaseType": "Appeals",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:20Z",
+ "scheduledEndTime": "2015-11-10T18:20Z",
+ "actualStartTime": "2015-11-10T18:20Z",
+ "actualEndTime": "2015-11-10T18:20Z",
+ "duration": 0,
+ "updatedAt": "2015-11-10T13:25Z",
+ "createdAt": "2015-11-10T12:01Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049450,
+ "id": 733419,
+ "phaseType": "Appeals Response",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:20Z",
+ "scheduledEndTime": "2015-11-10T18:20Z",
+ "actualStartTime": "2015-11-10T18:20Z",
+ "actualEndTime": "2015-11-10T18:20Z",
+ "duration": 0,
+ "updatedAt": "2015-11-10T13:25Z",
+ "createdAt": "2015-11-10T12:01Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049450,
+ "id": 733420,
+ "phaseType": "Aggregation",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:21Z",
+ "scheduledEndTime": "2015-11-10T18:22Z",
+ "actualStartTime": "2015-11-10T18:21Z",
+ "actualEndTime": "2015-11-10T18:22Z",
+ "duration": 3600000,
+ "updatedAt": "2015-11-10T13:25Z",
+ "createdAt": "2015-11-10T12:01Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049450,
+ "id": 733421,
+ "phaseType": "Final Fix",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:22Z",
+ "scheduledEndTime": "2015-11-10T18:23Z",
+ "actualStartTime": "2015-11-10T18:22Z",
+ "actualEndTime": "2015-11-10T18:23Z",
+ "duration": 3600000,
+ "updatedAt": "2015-11-10T13:25Z",
+ "createdAt": "2015-11-10T12:01Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049450,
+ "id": 733422,
+ "phaseType": "Final Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:23Z",
+ "scheduledEndTime": "2015-11-10T18:23Z",
+ "actualStartTime": "2015-11-10T18:23Z",
+ "actualEndTime": "2015-11-10T18:23Z",
+ "duration": 3600000,
+ "updatedAt": "2015-11-10T13:25Z",
+ "createdAt": "2015-11-10T12:01Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049450,
+ "id": 733423,
+ "phaseType": "Approval",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-11-10T18:23Z",
+ "scheduledEndTime": "2015-11-10T18:25Z",
+ "actualStartTime": "2015-11-10T18:23Z",
+ "actualEndTime": "2015-11-10T18:25Z",
+ "duration": 3600000,
+ "updatedAt": "2015-11-10T13:25Z",
+ "createdAt": "2015-11-10T12:01Z",
+ "createdBy": "11823846",
+ "updatedBy": "22841596"
+ }
+ ],
+ "prizes": [1600, 800],
+ "winners": [
+ {
+ "userId": 22922222,
+ "type": "final",
+ "handle": "miketest",
+ "placement": 1
+ }
+ ],
+ "reliabilityBonus": 320,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-06-08T15:57Z",
+ "createdAt": "2015-06-08T19:44Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": ".NET System.Addins",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "ReactJS Registration Framework",
+ "reviewType": "PEER",
+ "id": 30049303,
+ "forumId": 28448,
+ "numSubmissions": 395,
+ "numRegistrants": 401,
+ "registrationStartDate": "2015-06-08T15:52:11.715Z",
+ "registrationEndDate": "2015-11-02T05:00:00.000Z",
+ "submissionEndDate": "2015-11-02T05:00:00.000Z",
+ "platforms": "Android",
+ "totalPrize": 2,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30049303,
+ "id": 733107,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-06-13T15:52Z",
+ "scheduledEndTime": "2015-06-15T15:52Z",
+ "duration": 172800000,
+ "updatedAt": "2015-06-08T11:57Z",
+ "createdAt": "2015-06-08T11:51Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ "projectId": 8647,
+ "currentPhases": [
+ {
+ "challengeId": 30049303,
+ "id": 733105,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-08T15:52Z",
+ "scheduledEndTime": "2015-11-02T05:00Z",
+ "actualStartTime": "2015-06-08T15:52Z",
+ "fixedStartTime": "2015-06-07T13:00Z",
+ "duration": 432000000,
+ "updatedAt": "2015-06-08T11:57Z",
+ "createdAt": "2015-06-08T11:51Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049303,
+ "id": 733106,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-08T15:57Z",
+ "scheduledEndTime": "2015-11-02T05:00Z",
+ "actualStartTime": "2015-06-08T15:57Z",
+ "duration": 431700000,
+ "updatedAt": "2015-06-08T11:57Z",
+ "createdAt": "2015-06-08T11:51Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049303,
+ "id": 733105,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-08T15:52Z",
+ "scheduledEndTime": "2015-11-02T05:00Z",
+ "actualStartTime": "2015-06-08T15:52Z",
+ "fixedStartTime": "2015-06-07T13:00Z",
+ "duration": 432000000,
+ "updatedAt": "2015-06-08T11:57Z",
+ "createdAt": "2015-06-08T11:51Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049303,
+ "id": 733106,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-08T15:57Z",
+ "scheduledEndTime": "2015-11-02T05:00Z",
+ "actualStartTime": "2015-06-08T15:57Z",
+ "duration": 431700000,
+ "updatedAt": "2015-06-08T11:57Z",
+ "createdAt": "2015-06-08T11:51Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049303,
+ "id": 733107,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-06-13T15:52Z",
+ "scheduledEndTime": "2015-06-15T15:52Z",
+ "duration": 172800000,
+ "updatedAt": "2015-06-08T11:57Z",
+ "createdAt": "2015-06-08T11:51Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [1, 1],
+ "reliabilityBonus": 0.2,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-10-29T04:29Z",
+ "createdAt": "2015-06-06T11:08Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384",
+ "technologies": "iOS",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Fix all JSLint issues",
+ "reviewType": "PEER",
+ "id": 30049290,
+ "forumId": 28444,
+ "numSubmissions": 1033,
+ "numRegistrants": 1056,
+ "registrationStartDate": "2015-07-25T04:00:00.000Z",
+ "registrationEndDate": "2015-11-02T05:00:00.000Z",
+ "submissionEndDate": "2015-11-02T05:00:00.000Z",
+ "platforms": "iOS",
+ "totalPrize": 2,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30049290,
+ "id": 733067,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-03T04:55Z",
+ "scheduledEndTime": "2015-11-05T04:55Z",
+ "duration": 172800000,
+ "updatedAt": "2015-10-29T00:29Z",
+ "createdAt": "2015-06-06T03:15Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384"
+ },
+ "projectId": 8647,
+ "currentPhases": [
+ {
+ "challengeId": 30049290,
+ "id": 733065,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-07-25T04:00Z",
+ "scheduledEndTime": "2015-11-02T05:00Z",
+ "actualStartTime": "2015-07-25T04:00Z",
+ "fixedStartTime": "2015-06-05T13:00Z",
+ "duration": 1382400000,
+ "updatedAt": "2015-10-29T20:13Z",
+ "createdAt": "2015-06-06T03:15Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384"
+ },
+ {
+ "challengeId": 30049290,
+ "id": 733066,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-07-25T04:00Z",
+ "scheduledEndTime": "2015-11-02T05:00Z",
+ "actualStartTime": "2015-07-25T04:00Z",
+ "duration": 8729700000,
+ "updatedAt": "2015-10-29T20:13Z",
+ "createdAt": "2015-06-06T03:15Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049290,
+ "id": 733065,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-07-25T04:00Z",
+ "scheduledEndTime": "2015-11-02T05:00Z",
+ "actualStartTime": "2015-07-25T04:00Z",
+ "fixedStartTime": "2015-06-05T13:00Z",
+ "duration": 1382400000,
+ "updatedAt": "2015-10-29T20:13Z",
+ "createdAt": "2015-06-06T03:15Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384"
+ },
+ {
+ "challengeId": 30049290,
+ "id": 733066,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-07-25T04:00Z",
+ "scheduledEndTime": "2015-11-02T05:00Z",
+ "actualStartTime": "2015-07-25T04:00Z",
+ "duration": 8729700000,
+ "updatedAt": "2015-10-29T20:13Z",
+ "createdAt": "2015-06-06T03:15Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384"
+ },
+ {
+ "challengeId": 30049290,
+ "id": 733067,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-03T04:55Z",
+ "scheduledEndTime": "2015-11-05T04:55Z",
+ "duration": 172800000,
+ "updatedAt": "2015-10-29T00:29Z",
+ "createdAt": "2015-06-06T03:15Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384"
+ }
+ ],
+ "prizes": [1, 1],
+ "reliabilityBonus": 0.2,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-10-27T13:24Z",
+ "createdAt": "2015-07-27T17:10Z",
+ "createdBy": "11823846",
+ "updatedBy": "8547899",
+ "technologies": ".NET",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Territory-based Sales Trigger",
+ "reviewType": "COMMUNITY",
+ "id": 30049360,
+ "forumId": 28457,
+ "numSubmissions": 5,
+ "numRegistrants": 7,
+ "registrationStartDate": "2015-07-27T13:00:00.000Z",
+ "registrationEndDate": "2015-11-01T04:00:00.000Z",
+ "submissionEndDate": "2015-11-01T04:00:00.000Z",
+ "platforms": "Android",
+ "totalPrize": 500,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30049360,
+ "id": 733197,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-12-02T14:00Z",
+ "scheduledEndTime": "2015-12-04T14:00Z",
+ "duration": 172800000,
+ "updatedAt": "2015-10-27T09:24Z",
+ "createdAt": "2015-07-27T09:19Z",
+ "createdBy": "11823846",
+ "updatedBy": "8547899"
+ },
+ "projectId": 7572,
+ "currentPhases": [
+ {
+ "challengeId": 30049360,
+ "id": 733195,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-07-27T13:00Z",
+ "scheduledEndTime": "2015-11-01T04:00Z",
+ "actualStartTime": "2015-07-27T13:00Z",
+ "fixedStartTime": "2015-07-27T13:00Z",
+ "duration": 11062800000,
+ "updatedAt": "2015-10-29T20:11Z",
+ "createdAt": "2015-07-27T09:19Z",
+ "createdBy": "11823846",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049360,
+ "id": 733196,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-07-27T13:05Z",
+ "scheduledEndTime": "2015-11-01T04:00Z",
+ "duration": 11062500000,
+ "updatedAt": "2015-10-29T20:11Z",
+ "createdAt": "2015-07-27T09:19Z",
+ "createdBy": "11823846",
+ "updatedBy": "8547899"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049360,
+ "id": 733195,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-07-27T13:00Z",
+ "scheduledEndTime": "2015-11-01T04:00Z",
+ "actualStartTime": "2015-07-27T13:00Z",
+ "fixedStartTime": "2015-07-27T13:00Z",
+ "duration": 11062800000,
+ "updatedAt": "2015-10-29T20:11Z",
+ "createdAt": "2015-07-27T09:19Z",
+ "createdBy": "11823846",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049360,
+ "id": 733196,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-07-27T13:05Z",
+ "scheduledEndTime": "2015-11-01T04:00Z",
+ "duration": 11062500000,
+ "updatedAt": "2015-10-29T20:11Z",
+ "createdAt": "2015-07-27T09:19Z",
+ "createdBy": "11823846",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049360,
+ "id": 733197,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-12-02T14:00Z",
+ "scheduledEndTime": "2015-12-04T14:00Z",
+ "duration": 172800000,
+ "updatedAt": "2015-10-27T09:24Z",
+ "createdAt": "2015-07-27T09:19Z",
+ "createdBy": "11823846",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049360,
+ "id": 733198,
+ "phaseType": "Appeals",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-12-04T14:00Z",
+ "scheduledEndTime": "2015-12-05T14:00Z",
+ "duration": 86400000,
+ "updatedAt": "2015-10-27T09:24Z",
+ "createdAt": "2015-07-27T09:19Z",
+ "createdBy": "11823846",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049360,
+ "id": 733199,
+ "phaseType": "Appeals Response",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-12-05T14:00Z",
+ "scheduledEndTime": "2015-12-06T02:00Z",
+ "duration": 43200000,
+ "updatedAt": "2015-10-27T09:24Z",
+ "createdAt": "2015-07-27T09:19Z",
+ "createdBy": "11823846",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [350, 150],
+ "reliabilityBonus": 70,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-12-23T14:26Z",
+ "createdAt": "2015-06-08T19:21Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": ".NET",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Peer Review Load Test 0.5",
+ "reviewType": "PEER",
+ "id": 30049301,
+ "forumId": 28446,
+ "numSubmissions": 398,
+ "numRegistrants": 400,
+ "registrationStartDate": "2015-06-08T15:31:57.456Z",
+ "registrationEndDate": "2015-11-01T03:59:00.000Z",
+ "submissionEndDate": "2015-11-01T03:59:00.000Z",
+ "platforms": "Android",
+ "totalPrize": 2,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30049301,
+ "id": 733087,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-01T03:59Z",
+ "scheduledEndTime": "2015-11-03T03:59Z",
+ "duration": 172800000,
+ "updatedAt": "2016-12-23T09:26Z",
+ "createdAt": "2015-06-08T11:29Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ "projectId": 8647,
+ "currentPhases": [
+ {
+ "challengeId": 30049301,
+ "id": 733085,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-08T15:31Z",
+ "scheduledEndTime": "2015-11-01T03:59Z",
+ "actualStartTime": "2015-06-08T15:31Z",
+ "fixedStartTime": "2015-06-08T15:31Z",
+ "duration": 12572882544,
+ "updatedAt": "2016-12-23T09:26Z",
+ "createdAt": "2015-06-08T11:29Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049301,
+ "id": 733086,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-08T15:36Z",
+ "scheduledEndTime": "2015-11-01T03:59Z",
+ "actualStartTime": "2015-06-08T15:36Z",
+ "duration": 12572633061,
+ "updatedAt": "2016-12-23T09:26Z",
+ "createdAt": "2015-06-08T11:29Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30049301,
+ "id": 733085,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-08T15:31Z",
+ "scheduledEndTime": "2015-11-01T03:59Z",
+ "actualStartTime": "2015-06-08T15:31Z",
+ "fixedStartTime": "2015-06-08T15:31Z",
+ "duration": 12572882544,
+ "updatedAt": "2016-12-23T09:26Z",
+ "createdAt": "2015-06-08T11:29Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049301,
+ "id": 733086,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-08T15:36Z",
+ "scheduledEndTime": "2015-11-01T03:59Z",
+ "actualStartTime": "2015-06-08T15:36Z",
+ "duration": 12572633061,
+ "updatedAt": "2016-12-23T09:26Z",
+ "createdAt": "2015-06-08T11:29Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049301,
+ "id": 733087,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-11-01T03:59Z",
+ "scheduledEndTime": "2015-11-03T03:59Z",
+ "duration": 172800000,
+ "updatedAt": "2016-12-23T09:26Z",
+ "createdAt": "2015-06-08T11:29Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [1, 1],
+ "drPoints": 0,
+ "reliabilityBonus": 0.2,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-02-10T13:51Z",
+ "createdAt": "2014-12-03T10:54Z",
+ "createdBy": "40012962",
+ "updatedBy": "11823846",
+ "technologies": "Apex, Salesforce",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "FIRST_2_FINISH",
+ "name": "Increase Test Coverage for Given Classes and Triggers",
+ "reviewType": "INTERNAL",
+ "id": 30047582,
+ "forumId": 27023,
+ "numSubmissions": 0,
+ "numRegistrants": 68,
+ "registrationStartDate": "2014-12-16T05:53:46.487Z",
+ "registrationEndDate": "2015-10-31T04:00:00.000Z",
+ "submissionEndDate": "2015-10-31T04:00:00.000Z",
+ "platforms": "Force.com, Salesforce.com",
+ "totalPrize": 300,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30047582,
+ "id": 708726,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2014-12-16T05:59Z",
+ "scheduledEndTime": "2014-12-17T05:59Z",
+ "duration": 86400000,
+ "updatedAt": "2015-02-10T08:51Z",
+ "createdAt": "2014-12-03T05:54Z",
+ "createdBy": "40012962",
+ "updatedBy": "11823846"
+ },
+ "projectId": 7169,
+ "currentPhases": [
+ {
+ "challengeId": 30047582,
+ "id": 708725,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2014-12-16T05:53Z",
+ "scheduledEndTime": "2015-10-31T04:00Z",
+ "actualStartTime": "2014-12-16T05:53Z",
+ "fixedStartTime": "2014-12-16T05:53Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-02-10T08:51Z",
+ "createdAt": "2014-12-03T05:54Z",
+ "createdBy": "40012962",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30047582,
+ "id": 708727,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2014-12-16T05:59Z",
+ "scheduledEndTime": "2015-10-31T04:00Z",
+ "actualStartTime": "2014-12-16T05:59Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-02-10T08:51Z",
+ "createdAt": "2014-12-03T05:54Z",
+ "createdBy": "40012962",
+ "updatedBy": "11823846"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30047582,
+ "id": 708725,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2014-12-16T05:53Z",
+ "scheduledEndTime": "2015-10-31T04:00Z",
+ "actualStartTime": "2014-12-16T05:53Z",
+ "fixedStartTime": "2014-12-16T05:53Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-02-10T08:51Z",
+ "createdAt": "2014-12-03T05:54Z",
+ "createdBy": "40012962",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30047582,
+ "id": 708726,
+ "phaseType": "Iterative Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2014-12-16T05:59Z",
+ "scheduledEndTime": "2014-12-17T05:59Z",
+ "duration": 86400000,
+ "updatedAt": "2015-02-10T08:51Z",
+ "createdAt": "2014-12-03T05:54Z",
+ "createdBy": "40012962",
+ "updatedBy": "11823846"
+ },
+ {
+ "challengeId": 30047582,
+ "id": 708727,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2014-12-16T05:59Z",
+ "scheduledEndTime": "2015-10-31T04:00Z",
+ "actualStartTime": "2014-12-16T05:59Z",
+ "duration": 2592000000,
+ "updatedAt": "2015-02-10T08:51Z",
+ "createdAt": "2014-12-03T05:54Z",
+ "createdBy": "40012962",
+ "updatedBy": "11823846"
+ }
+ ],
+ "prizes": [300],
+ "reliabilityBonus": 60,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-10-29T12:34Z",
+ "createdAt": "2015-01-06T15:07Z",
+ "createdBy": "23290005",
+ "updatedBy": "305384",
+ "technologies": "",
+ "status": "ACTIVE",
+ "track": "DESIGN",
+ "subTrack": "DESIGN_FIRST_2_FINISH",
+ "name": "IAM Oauth Implementation",
+ "reviewType": "INTERNAL",
+ "id": 30048328,
+ "forumId": 591938,
+ "numSubmissions": 10,
+ "numRegistrants": 2,
+ "registrationStartDate": "2015-01-06T15:13:28.939Z",
+ "registrationEndDate": "2015-10-30T04:00:00.000Z",
+ "submissionEndDate": "2015-10-30T04:00:00.000Z",
+ "platforms": "",
+ "totalPrize": 200,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30048328,
+ "id": 719599,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-01-06T15:18Z",
+ "scheduledEndTime": "2015-11-01T15:17Z",
+ "duration": 25833575829,
+ "updatedAt": "2015-10-29T08:34Z",
+ "createdAt": "2015-01-06T10:07Z",
+ "createdBy": "23290005",
+ "updatedBy": "305384"
+ },
+ "projectId": 6753,
+ "currentPhases": [
+ {
+ "challengeId": 30048328,
+ "id": 719597,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-01-06T15:13Z",
+ "scheduledEndTime": "2015-10-30T04:00Z",
+ "actualStartTime": "2015-01-06T15:13Z",
+ "fixedStartTime": "2015-01-06T14:00Z",
+ "duration": 172800000,
+ "updatedAt": "2015-10-29T08:34Z",
+ "createdAt": "2015-01-06T10:07Z",
+ "createdBy": "23290005",
+ "updatedBy": "305384"
+ },
+ {
+ "challengeId": 30048328,
+ "id": 719598,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-01-06T15:18Z",
+ "scheduledEndTime": "2015-10-30T04:00Z",
+ "actualStartTime": "2015-01-06T15:18Z",
+ "duration": 172800000,
+ "updatedAt": "2015-10-29T08:34Z",
+ "createdAt": "2015-01-06T10:07Z",
+ "createdBy": "23290005",
+ "updatedBy": "305384"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30048328,
+ "id": 719597,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-01-06T15:13Z",
+ "scheduledEndTime": "2015-10-30T04:00Z",
+ "actualStartTime": "2015-01-06T15:13Z",
+ "fixedStartTime": "2015-01-06T14:00Z",
+ "duration": 172800000,
+ "updatedAt": "2015-10-29T08:34Z",
+ "createdAt": "2015-01-06T10:07Z",
+ "createdBy": "23290005",
+ "updatedBy": "305384"
+ },
+ {
+ "challengeId": 30048328,
+ "id": 719598,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-01-06T15:18Z",
+ "scheduledEndTime": "2015-10-30T04:00Z",
+ "actualStartTime": "2015-01-06T15:18Z",
+ "duration": 172800000,
+ "updatedAt": "2015-10-29T08:34Z",
+ "createdAt": "2015-01-06T10:07Z",
+ "createdBy": "23290005",
+ "updatedBy": "305384"
+ },
+ {
+ "challengeId": 30048328,
+ "id": 719599,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-01-06T15:18Z",
+ "scheduledEndTime": "2015-11-01T15:17Z",
+ "duration": 25833575829,
+ "updatedAt": "2015-10-29T08:34Z",
+ "createdAt": "2015-01-06T10:07Z",
+ "createdBy": "23290005",
+ "updatedBy": "305384"
+ }
+ ],
+ "prizes": [200],
+ "reliabilityBonus": 40,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2014-10-10T13:54Z",
+ "createdAt": "2014-08-11T16:35Z",
+ "createdBy": "23207681",
+ "updatedBy": "22748589",
+ "technologies": "Other, Salesforce",
+ "status": "DELETED",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "TEST CHALLENGE - Do not register",
+ "reviewType": "COMMUNITY",
+ "id": 30044954,
+ "forumId": 24817,
+ "numSubmissions": 25,
+ "numRegistrants": 210,
+ "registrationStartDate": "2014-08-12T13:00:11.862Z",
+ "registrationEndDate": "2015-08-12T12:58:00.000Z",
+ "submissionEndDate": "2015-08-12T12:58:00.000Z",
+ "platforms": "AWS, Other",
+ "totalPrize": 1,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30044954,
+ "id": 674123,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-08-12T12:58Z",
+ "scheduledEndTime": "2015-08-14T12:58Z",
+ "duration": 172800000,
+ "updatedAt": "2014-10-10T09:54Z",
+ "createdAt": "2014-08-11T12:35Z",
+ "createdBy": "23207681",
+ "updatedBy": "22748589"
+ },
+ "projectId": 7884,
+ "currentPhases": [
+ {
+ "challengeId": 30044954,
+ "id": 674121,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2014-08-12T13:00Z",
+ "scheduledEndTime": "2015-08-12T12:58Z",
+ "actualStartTime": "2014-08-12T13:00Z",
+ "fixedStartTime": "2014-08-12T13:00Z",
+ "duration": 31535880000,
+ "updatedAt": "2014-10-10T09:54Z",
+ "createdAt": "2014-08-11T12:35Z",
+ "createdBy": "23207681",
+ "updatedBy": "22748589"
+ },
+ {
+ "challengeId": 30044954,
+ "id": 674122,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2014-08-12T13:05Z",
+ "scheduledEndTime": "2015-08-12T12:58Z",
+ "actualStartTime": "2014-08-12T13:05Z",
+ "duration": 31535580000,
+ "updatedAt": "2014-10-10T09:54Z",
+ "createdAt": "2014-08-11T12:35Z",
+ "createdBy": "23207681",
+ "updatedBy": "22748589"
+ }
+ ],
+ "submissionViewable": false,
+ "allPhases": [
+ {
+ "challengeId": 30044954,
+ "id": 674121,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2014-08-12T13:00Z",
+ "scheduledEndTime": "2015-08-12T12:58Z",
+ "actualStartTime": "2014-08-12T13:00Z",
+ "fixedStartTime": "2014-08-12T13:00Z",
+ "duration": 31535880000,
+ "updatedAt": "2014-10-10T09:54Z",
+ "createdAt": "2014-08-11T12:35Z",
+ "createdBy": "23207681",
+ "updatedBy": "22748589"
+ },
+ {
+ "challengeId": 30044954,
+ "id": 674122,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2014-08-12T13:05Z",
+ "scheduledEndTime": "2015-08-12T12:58Z",
+ "actualStartTime": "2014-08-12T13:05Z",
+ "duration": 31535580000,
+ "updatedAt": "2014-10-10T09:54Z",
+ "createdAt": "2014-08-11T12:35Z",
+ "createdBy": "23207681",
+ "updatedBy": "22748589"
+ },
+ {
+ "challengeId": 30044954,
+ "id": 674123,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-08-12T12:58Z",
+ "scheduledEndTime": "2015-08-14T12:58Z",
+ "duration": 172800000,
+ "updatedAt": "2014-10-10T09:54Z",
+ "createdAt": "2014-08-11T12:35Z",
+ "createdBy": "23207681",
+ "updatedBy": "22748589"
+ },
+ {
+ "challengeId": 30044954,
+ "id": 674124,
+ "phaseType": "Appeals",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-08-14T12:58Z",
+ "scheduledEndTime": "2015-08-15T12:58Z",
+ "duration": 86400000,
+ "updatedAt": "2014-10-10T09:54Z",
+ "createdAt": "2014-08-11T12:35Z",
+ "createdBy": "23207681",
+ "updatedBy": "22748589"
+ },
+ {
+ "challengeId": 30044954,
+ "id": 674125,
+ "phaseType": "Appeals Response",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-08-15T12:58Z",
+ "scheduledEndTime": "2015-08-16T00:58Z",
+ "duration": 43200000,
+ "updatedAt": "2014-10-10T09:54Z",
+ "createdAt": "2014-08-11T12:35Z",
+ "createdBy": "23207681",
+ "updatedBy": "22748589"
+ }
+ ],
+ "prizes": [1],
+ "events": [
+ {
+ "eventId": 3442,
+ "eventName": "tco15",
+ "projectId": 30044954
+ }
+ ],
+ "reliabilityBonus": 0.2,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-06-08T15:42Z",
+ "createdAt": "2015-06-08T19:28Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": ".NET System.Addins",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Peer Review Load Test 0.6",
+ "reviewType": "PEER",
+ "id": 30049302,
+ "forumId": 28447,
+ "numSubmissions": 397,
+ "numRegistrants": 399,
+ "registrationStartDate": "2015-06-08T15:37:55.902Z",
+ "registrationEndDate": "2015-06-13T15:37:00.000Z",
+ "submissionEndDate": "2015-06-13T15:37:00.000Z",
+ "platforms": "AWS",
+ "totalPrize": 2,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30049302,
+ "id": 733097,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-06-13T15:37Z",
+ "scheduledEndTime": "2015-06-15T15:37Z",
+ "duration": 172800000,
+ "updatedAt": "2015-06-08T11:42Z",
+ "createdAt": "2015-06-08T11:36Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ "projectId": 8647,
+ "currentPhases": [
+ {
+ "challengeId": 30049302,
+ "id": 733095,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-08T15:37Z",
+ "scheduledEndTime": "2015-06-13T15:37Z",
+ "actualStartTime": "2015-06-08T15:37Z",
+ "fixedStartTime": "2015-06-07T13:00Z",
+ "duration": 432000000,
+ "updatedAt": "2015-06-08T11:42Z",
+ "createdAt": "2015-06-08T11:36Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049302,
+ "id": 733096,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-08T15:42Z",
+ "scheduledEndTime": "2015-06-13T15:37Z",
+ "actualStartTime": "2015-06-08T15:42Z",
+ "duration": 431700000,
+ "updatedAt": "2015-06-08T11:42Z",
+ "createdAt": "2015-06-08T11:36Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049302,
+ "id": 733095,
+ "phaseType": "Registration",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-08T15:37Z",
+ "scheduledEndTime": "2015-06-13T15:37Z",
+ "actualStartTime": "2015-06-08T15:37Z",
+ "fixedStartTime": "2015-06-07T13:00Z",
+ "duration": 432000000,
+ "updatedAt": "2015-06-08T11:42Z",
+ "createdAt": "2015-06-08T11:36Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049302,
+ "id": 733096,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-08T15:42Z",
+ "scheduledEndTime": "2015-06-13T15:37Z",
+ "actualStartTime": "2015-06-08T15:42Z",
+ "duration": 431700000,
+ "updatedAt": "2015-06-08T11:42Z",
+ "createdAt": "2015-06-08T11:36Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049302,
+ "id": 733097,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-06-13T15:37Z",
+ "scheduledEndTime": "2015-06-15T15:37Z",
+ "duration": 172800000,
+ "updatedAt": "2015-06-08T11:42Z",
+ "createdAt": "2015-06-08T11:36Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [1, 1],
+ "reliabilityBonus": 0.2,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-10-29T04:23Z",
+ "createdAt": "2015-06-11T22:39Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384",
+ "technologies": "Android",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Peer Review - Email Test 1",
+ "reviewType": "PEER",
+ "id": 30049320,
+ "forumId": 28452,
+ "numSubmissions": 1,
+ "numRegistrants": 2,
+ "registrationStartDate": "2015-06-11T18:49:44.086Z",
+ "registrationEndDate": "2015-06-11T19:00:29.599Z",
+ "submissionEndDate": "2015-06-11T21:28:01.020Z",
+ "platforms": "Android",
+ "totalPrize": 2,
+ "isPrivate": false,
+ "projectId": 8647,
+ "currentPhases": [
+ {
+ "challengeId": 30049320,
+ "id": 733157,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-12T20:20Z",
+ "scheduledEndTime": "2015-10-31T20:19Z",
+ "actualStartTime": "2015-06-12T20:20Z",
+ "duration": 12182345300,
+ "updatedAt": "2015-10-29T00:23Z",
+ "createdAt": "2015-06-11T14:46Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049320,
+ "id": 733155,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-06-11T18:49Z",
+ "scheduledEndTime": "2015-06-11T19:00Z",
+ "actualStartTime": "2015-06-11T18:49Z",
+ "actualEndTime": "2015-06-11T19:00Z",
+ "fixedStartTime": "2015-06-10T13:00Z",
+ "duration": 60000,
+ "updatedAt": "2015-10-29T00:23Z",
+ "createdAt": "2015-06-11T14:46Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384"
+ },
+ {
+ "challengeId": 30049320,
+ "id": 733156,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-06-11T18:55Z",
+ "scheduledEndTime": "2015-06-11T21:28Z",
+ "actualStartTime": "2015-06-11T18:55Z",
+ "actualEndTime": "2015-06-11T21:28Z",
+ "duration": 60000,
+ "updatedAt": "2015-10-29T00:23Z",
+ "createdAt": "2015-06-11T14:46Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384"
+ },
+ {
+ "challengeId": 30049320,
+ "id": 733157,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-12T20:20Z",
+ "scheduledEndTime": "2015-10-31T20:19Z",
+ "actualStartTime": "2015-06-12T20:20Z",
+ "duration": 12182345300,
+ "updatedAt": "2015-10-29T00:23Z",
+ "createdAt": "2015-06-11T14:46Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384"
+ }
+ ],
+ "prizes": [1, 1],
+ "reliabilityBonus": 0.2,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2016-03-18T16:14Z",
+ "createdAt": "2015-06-05T22:05Z",
+ "createdBy": "40135549",
+ "updatedBy": "22841596",
+ "technologies": "",
+ "status": "DELETED",
+ "track": "DESIGN",
+ "subTrack": "WEB_DESIGNS",
+ "name": "james web design challenge",
+ "reviewType": "INTERNAL",
+ "id": 30049280,
+ "forumId": 593834,
+ "numSubmissions": 0,
+ "numRegistrants": 1,
+ "registrationStartDate": "2015-06-05T20:40:00.000Z",
+ "registrationEndDate": "2015-06-18T19:23:31.133Z",
+ "submissionEndDate": "2015-06-10T21:26:00.000Z",
+ "platforms": "",
+ "totalPrize": 1500,
+ "isPrivate": false,
+ "upcomingPhase": {
+ "challengeId": 30049280,
+ "id": 733011,
+ "phaseType": "Screening",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-06-10T21:26Z",
+ "scheduledEndTime": "2015-06-11T01:26Z",
+ "duration": 14400000,
+ "updatedAt": "2015-06-18T15:23Z",
+ "createdAt": "2015-06-05T14:12Z",
+ "createdBy": "40135549",
+ "updatedBy": "22841596"
+ },
+ "projectId": 8646,
+ "currentPhases": [
+ {
+ "challengeId": 30049280,
+ "id": 733010,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-10T20:31Z",
+ "scheduledEndTime": "2015-06-10T21:26Z",
+ "actualStartTime": "2015-06-10T20:31Z",
+ "duration": 3300000,
+ "updatedAt": "2015-06-18T15:23Z",
+ "createdAt": "2015-06-05T14:12Z",
+ "createdBy": "40135549",
+ "updatedBy": "22841596"
+ }
+ ],
+ "submissionViewable": true,
+ "allPhases": [
+ {
+ "challengeId": 30049280,
+ "id": 733007,
+ "phaseType": "Specification Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-06-05T18:15Z",
+ "scheduledEndTime": "2015-06-05T19:19Z",
+ "actualStartTime": "2015-06-05T18:15Z",
+ "actualEndTime": "2015-06-05T19:19Z",
+ "fixedStartTime": "2015-06-05T18:12Z",
+ "duration": 5,
+ "updatedAt": "2015-06-18T15:23Z",
+ "createdAt": "2015-06-05T14:12Z",
+ "createdBy": "40135549",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049280,
+ "id": 733008,
+ "phaseType": "Specification Review",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-06-05T19:33Z",
+ "scheduledEndTime": "2015-06-05T19:35Z",
+ "actualStartTime": "2015-06-05T19:33Z",
+ "actualEndTime": "2015-06-05T19:35Z",
+ "duration": 5,
+ "updatedAt": "2015-06-18T15:23Z",
+ "createdAt": "2015-06-05T14:12Z",
+ "createdBy": "40135549",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049280,
+ "id": 733009,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-06-05T20:40Z",
+ "scheduledEndTime": "2015-06-18T19:23Z",
+ "actualStartTime": "2015-06-05T20:40Z",
+ "actualEndTime": "2015-06-18T19:23Z",
+ "duration": 60000,
+ "updatedAt": "2015-06-18T15:23Z",
+ "createdAt": "2015-06-05T14:12Z",
+ "createdBy": "40135549",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049280,
+ "id": 733010,
+ "phaseType": "Submission",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-10T20:31Z",
+ "scheduledEndTime": "2015-06-10T21:26Z",
+ "actualStartTime": "2015-06-10T20:31Z",
+ "duration": 3300000,
+ "updatedAt": "2015-06-18T15:23Z",
+ "createdAt": "2015-06-05T14:12Z",
+ "createdBy": "40135549",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049280,
+ "id": 733011,
+ "phaseType": "Screening",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-06-10T21:26Z",
+ "scheduledEndTime": "2015-06-11T01:26Z",
+ "duration": 14400000,
+ "updatedAt": "2015-06-18T15:23Z",
+ "createdAt": "2015-06-05T14:12Z",
+ "createdBy": "40135549",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049280,
+ "id": 733012,
+ "phaseType": "Review",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-06-11T01:26Z",
+ "scheduledEndTime": "2015-06-17T01:26Z",
+ "duration": 518400000,
+ "updatedAt": "2015-06-18T15:23Z",
+ "createdAt": "2015-06-05T14:12Z",
+ "createdBy": "40135549",
+ "updatedBy": "22841596"
+ },
+ {
+ "challengeId": 30049280,
+ "id": 733013,
+ "phaseType": "Approval",
+ "phaseStatus": "Scheduled",
+ "scheduledStartTime": "2015-06-17T01:26Z",
+ "scheduledEndTime": "2015-06-22T01:26Z",
+ "duration": 432000000,
+ "updatedAt": "2015-06-18T15:23Z",
+ "createdAt": "2015-06-05T14:12Z",
+ "createdBy": "40135549",
+ "updatedBy": "22841596"
+ }
+ ],
+ "prizes": [1250, 250],
+ "drPoints": 375,
+ "reliabilityBonus": 250,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-10-29T18:33Z",
+ "createdAt": "2015-06-06T08:30Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384",
+ "technologies": "iOS",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Add Fastly to Ansible",
+ "reviewType": "PEER",
+ "id": 30049284,
+ "forumId": 28443,
+ "numSubmissions": 292,
+ "numRegistrants": 292,
+ "registrationStartDate": "2015-06-06T04:41:59.499Z",
+ "registrationEndDate": "2015-08-10T04:00:00.000Z",
+ "submissionEndDate": "2015-06-06T05:39:30.724Z",
+ "platforms": "iOS",
+ "totalPrize": 2,
+ "isPrivate": false,
+ "projectId": 8647,
+ "currentPhases": [
+ {
+ "challengeId": 30049284,
+ "id": 733051,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-06T05:40Z",
+ "scheduledEndTime": "2015-11-02T05:00Z",
+ "actualStartTime": "2015-06-06T05:40Z",
+ "duration": 12790763307,
+ "updatedAt": "2015-10-29T08:38Z",
+ "createdAt": "2015-06-06T00:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049284,
+ "id": 733049,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-06-06T04:41Z",
+ "scheduledEndTime": "2015-08-10T04:00Z",
+ "actualStartTime": "2015-06-06T04:41Z",
+ "actualEndTime": "2015-08-10T04:00Z",
+ "fixedStartTime": "2015-06-04T13:00Z",
+ "duration": 60000,
+ "updatedAt": "2015-10-29T08:38Z",
+ "createdAt": "2015-06-06T00:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384"
+ },
+ {
+ "challengeId": 30049284,
+ "id": 733050,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-06-06T04:48Z",
+ "scheduledEndTime": "2015-06-06T05:39Z",
+ "actualStartTime": "2015-06-06T04:48Z",
+ "actualEndTime": "2015-06-06T05:39Z",
+ "duration": 60000,
+ "updatedAt": "2015-10-29T08:38Z",
+ "createdAt": "2015-06-06T00:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384"
+ },
+ {
+ "challengeId": 30049284,
+ "id": 733051,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-06T05:40Z",
+ "scheduledEndTime": "2015-11-02T05:00Z",
+ "actualStartTime": "2015-06-06T05:40Z",
+ "duration": 12790763307,
+ "updatedAt": "2015-10-29T08:38Z",
+ "createdAt": "2015-06-06T00:37Z",
+ "createdBy": "8547899",
+ "updatedBy": "305384"
+ }
+ ],
+ "prizes": [1, 1],
+ "reliabilityBonus": 0.2,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2017-01-23T00:34Z",
+ "createdAt": "2015-06-06T07:48Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "iOS",
+ "status": "COMPLETED",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Peer Review Load Test 0.2",
+ "reviewType": "PEER",
+ "id": 30049283,
+ "forumId": 28442,
+ "numSubmissions": 6,
+ "numRegistrants": 6,
+ "registrationStartDate": "2015-06-06T03:56:36.088Z",
+ "registrationEndDate": "2015-06-06T04:09:54.576Z",
+ "submissionEndDate": "2015-06-06T04:10:07.026Z",
+ "platforms": "iOS",
+ "totalPrize": 2,
+ "isPrivate": false,
+ "projectId": 8647,
+ "currentPhases": [
+ {
+ "challengeId": 30049283,
+ "id": 733041,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-06T04:10Z",
+ "scheduledEndTime": "2015-06-06T04:11Z",
+ "actualStartTime": "2015-06-06T04:10Z",
+ "duration": 60000,
+ "updatedAt": "2017-01-22T19:34Z",
+ "createdAt": "2015-06-05T23:55Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049283,
+ "id": 733039,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-06-06T03:56Z",
+ "scheduledEndTime": "2015-06-06T04:09Z",
+ "actualStartTime": "2015-06-06T03:56Z",
+ "actualEndTime": "2015-06-06T04:09Z",
+ "fixedStartTime": "2015-06-04T13:00Z",
+ "duration": 60000,
+ "updatedAt": "2017-01-22T19:34Z",
+ "createdAt": "2015-06-05T23:55Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049283,
+ "id": 733040,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-06-06T04:02Z",
+ "scheduledEndTime": "2015-06-06T04:10Z",
+ "actualStartTime": "2015-06-06T04:02Z",
+ "actualEndTime": "2015-06-06T04:10Z",
+ "duration": 60000,
+ "updatedAt": "2017-01-22T19:34Z",
+ "createdAt": "2015-06-05T23:55Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049283,
+ "id": 733041,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-06T04:10Z",
+ "scheduledEndTime": "2015-06-06T04:11Z",
+ "actualStartTime": "2015-06-06T04:10Z",
+ "duration": 60000,
+ "updatedAt": "2017-01-22T19:34Z",
+ "createdAt": "2015-06-05T23:55Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [1, 1],
+ "reliabilityBonus": 0.2,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2017-01-23T00:35Z",
+ "createdAt": "2015-06-05T23:13Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": ".NET",
+ "status": "COMPLETED",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Peer Review - Transaction Authorization",
+ "reviewType": "PEER",
+ "id": 30049281,
+ "forumId": 28440,
+ "numSubmissions": 6,
+ "numRegistrants": 6,
+ "registrationStartDate": "2015-06-05T04:00:00.000Z",
+ "registrationEndDate": "2015-06-05T21:14:01.244Z",
+ "submissionEndDate": "2015-06-06T03:55:00.000Z",
+ "platforms": "Android",
+ "totalPrize": 1500,
+ "isPrivate": false,
+ "projectId": 8647,
+ "currentPhases": [
+ {
+ "challengeId": 30049281,
+ "id": 733021,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-06T03:55Z",
+ "scheduledEndTime": "2015-06-06T03:55Z",
+ "duration": 0,
+ "updatedAt": "2017-01-22T19:35Z",
+ "createdAt": "2015-06-05T15:20Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049281,
+ "id": 733019,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-06-05T04:00Z",
+ "scheduledEndTime": "2015-06-05T21:14Z",
+ "actualStartTime": "2015-06-05T04:00Z",
+ "actualEndTime": "2015-06-05T21:14Z",
+ "fixedStartTime": "2015-06-05T04:00Z",
+ "duration": 0,
+ "updatedAt": "2017-01-22T19:35Z",
+ "createdAt": "2015-06-05T15:20Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049281,
+ "id": 733020,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-06-05T04:00Z",
+ "scheduledEndTime": "2015-06-06T03:55Z",
+ "actualStartTime": "2015-06-05T04:00Z",
+ "fixedStartTime": "2015-06-04T04:00Z",
+ "duration": 86100000,
+ "updatedAt": "2017-01-22T19:35Z",
+ "createdAt": "2015-06-05T15:20Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049281,
+ "id": 733021,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-06T03:55Z",
+ "scheduledEndTime": "2015-06-06T03:55Z",
+ "duration": 0,
+ "updatedAt": "2017-01-22T19:35Z",
+ "createdAt": "2015-06-05T15:20Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [1000, 500],
+ "events": [
+ {
+ "eventId": 3445,
+ "eventName": "swiftprogram",
+ "projectId": 30049281
+ }
+ ],
+ "reliabilityBonus": 200,
+ "isTask": false
+ },
+ {
+ "updatedAt": "2015-06-05T22:10Z",
+ "createdAt": "2015-06-06T01:16Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899",
+ "technologies": "iOS",
+ "status": "ACTIVE",
+ "track": "DEVELOP",
+ "subTrack": "CODE",
+ "name": "Peer Review Load Test 0.1",
+ "reviewType": "PEER",
+ "id": 30049282,
+ "forumId": 28441,
+ "numSubmissions": 6,
+ "numRegistrants": 11,
+ "registrationStartDate": "2015-06-05T21:34:16.486Z",
+ "registrationEndDate": "2015-06-05T22:09:40.573Z",
+ "submissionEndDate": "2015-06-05T22:10:00.743Z",
+ "platforms": "iOS",
+ "totalPrize": 2,
+ "isPrivate": false,
+ "projectId": 8647,
+ "currentPhases": [
+ {
+ "challengeId": 30049282,
+ "id": 733031,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-05T22:10Z",
+ "scheduledEndTime": "2015-06-07T22:10Z",
+ "duration": 172800000,
+ "updatedAt": "2015-06-05T18:10Z",
+ "createdAt": "2015-06-05T17:23Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "allPhases": [
+ {
+ "challengeId": 30049282,
+ "id": 733029,
+ "phaseType": "Registration",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-06-05T21:34Z",
+ "scheduledEndTime": "2015-06-05T22:09Z",
+ "actualStartTime": "2015-06-05T21:34Z",
+ "actualEndTime": "2015-06-05T22:09Z",
+ "fixedStartTime": "2015-06-05T13:00Z",
+ "duration": 60000,
+ "updatedAt": "2015-06-05T18:10Z",
+ "createdAt": "2015-06-05T17:23Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049282,
+ "id": 733030,
+ "phaseType": "Submission",
+ "phaseStatus": "Closed",
+ "scheduledStartTime": "2015-06-05T21:39Z",
+ "scheduledEndTime": "2015-06-05T22:10Z",
+ "actualEndTime": "2015-06-05T22:10Z",
+ "duration": 60000,
+ "updatedAt": "2015-06-05T18:10Z",
+ "createdAt": "2015-06-05T17:23Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ },
+ {
+ "challengeId": 30049282,
+ "id": 733031,
+ "phaseType": "Review",
+ "phaseStatus": "Open",
+ "scheduledStartTime": "2015-06-05T22:10Z",
+ "scheduledEndTime": "2015-06-07T22:10Z",
+ "duration": 172800000,
+ "updatedAt": "2015-06-05T18:10Z",
+ "createdAt": "2015-06-05T17:23Z",
+ "createdBy": "8547899",
+ "updatedBy": "8547899"
+ }
+ ],
+ "prizes": [1, 1],
+ "reliabilityBonus": 0.2,
+ "isTask": false
+ }
+ ]
+ },
+ "version": "v3"
+}
diff --git a/src/apps/earn/src/services/__mocks__/data/terms-auth.json b/src/apps/earn/src/services/__mocks__/data/terms-auth.json
new file mode 100644
index 000000000..a24478708
--- /dev/null
+++ b/src/apps/earn/src/services/__mocks__/data/terms-auth.json
@@ -0,0 +1,44 @@
+{
+ "terms": [
+ {
+ "termsOfUseId": 21153,
+ "title": "Appirio NDA v2.0",
+ "url": "http://community.topcoder.com/tc?module=Terms&tuid=21153",
+ "agreeabilityType": "DocuSignable",
+ "agreed": false,
+ "templateId": "fake-template-id"
+ },
+ {
+ "termsOfUseId": 21193,
+ "title": "Standard Terms for Topcoder Competitions v2.1",
+ "url": "",
+ "agreeabilityType": "Electronically-agreeable",
+ "agreed": true,
+ "templateId": null
+ },
+ {
+ "termsOfUseId": 21194,
+ "title": "Test Terms",
+ "url": "",
+ "agreeabilityType": "Electronically-agreeable",
+ "agreed": false,
+ "templateId": null
+ }
+ ],
+ "serverInformation": {
+ "serverName": "Topcoder API",
+ "apiVersion": "0.0.1",
+ "requestDuration": 29,
+ "currentTime": 1504878884618
+ },
+ "requesterInformation": {
+ "id": "1b37607c519c318194ce6da08c519c0a3f7c9855-7FSFCyd6oSX2mV6Z",
+ "remoteIP": "12.34.567.890",
+ "receivedParams": {
+ "role": "Submitter",
+ "apiVersion": "v2",
+ "challengeId": "30059255",
+ "action": "getChallengeTerms"
+ }
+ }
+}
diff --git a/src/apps/earn/src/services/__mocks__/data/terms-docu-sign-details.json b/src/apps/earn/src/services/__mocks__/data/terms-docu-sign-details.json
new file mode 100644
index 000000000..f8a46a15f
--- /dev/null
+++ b/src/apps/earn/src/services/__mocks__/data/terms-docu-sign-details.json
@@ -0,0 +1,24 @@
+{
+ "termsOfUseId": 21153,
+ "title": "Appirio NDA v2.0",
+ "url": "http://community.topcoder.com/tc?module=Terms&tuid=21153",
+ "agreeabilityType": "DocuSignable",
+ "text": "
diff --git a/src-ts/tools/learn/certification-details/enrollment-page/enroll-payment-form/index.ts b/src/apps/learn/src/certification-details/enrollment-page/enroll-payment-form/index.ts
similarity index 100%
rename from src-ts/tools/learn/certification-details/enrollment-page/enroll-payment-form/index.ts
rename to src/apps/learn/src/certification-details/enrollment-page/enroll-payment-form/index.ts
diff --git a/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.module.scss b/src/apps/learn/src/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.module.scss
similarity index 79%
rename from src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.module.scss
rename to src/apps/learn/src/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.module.scss
index 7580d9311..19f03e1af 100644
--- a/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.module.scss
+++ b/src/apps/learn/src/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../../lib/styles/includes';
+@import '@libs/ui/styles/includes';
.wrapPayment {
padding: 0;
@@ -10,7 +10,7 @@
.freeLabel {
@include freeLabel;
- margin-bottom: $space-sm;
+ margin-bottom: $sp-2;
}
:global(.strike) {
@@ -22,7 +22,7 @@
}
strong {
- margin-top: $space-sm;
+ margin-top: $sp-2;
display: block;
}
}
@@ -30,9 +30,9 @@
.headerPayment {
background: $tc-grad20;
text-align: center;
- padding: $space-xxxxl 0;
- border-top-left-radius: $space-sm;
- border-top-right-radius: $space-sm;
+ padding: $sp-8 0;
+ border-top-left-radius: $sp-2;
+ border-top-right-radius: $sp-2;
.priceLabel {
color: $tc-white;
@@ -52,7 +52,7 @@
line-height: 22px;
font-family: $font-barlow;
font-weight: $font-weight-semibold;
- margin-bottom: $space-sm;
+ margin-bottom: $sp-2;
}
:global(.body-small-bold) {
@@ -65,18 +65,18 @@
flex-direction: column;
align-items: center;
justify-content: center;
- gap: $space-lg;
+ gap: $sp-4;
width: 100%;
height: 320px;
background: $black-5;
- border-radius: $space-sm;
+ border-radius: $sp-2;
- margin-bottom: $space-xxl;
+ margin-bottom: $sp-6;
@include ltemd {
- margin-top: $space-lg;
+ margin-top: $sp-4;
}
}
@@ -100,7 +100,7 @@
.paymentSuccess {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
- padding: $space-xxl;
+ padding: $sp-6;
.paymentSuccessInner {
background: $turq-15;
@@ -110,13 +110,13 @@
flex-direction: column;
align-items: center;
text-align: center;
- padding: $space-xl $space-xl $space-mxx;
+ padding: $sp-5 $sp-5 $sp-12;
color: $turq-160;
.successIcon {
min-width: 40px;
width: 40px;
- margin-bottom: $space-md;
+ margin-bottom: $sp-3;
}
}
-}
\ No newline at end of file
+}
diff --git a/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx b/src/apps/learn/src/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx
similarity index 94%
rename from src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx
rename to src/apps/learn/src/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx
index 7b7f516ba..ec9bdcc5c 100644
--- a/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx
+++ b/src/apps/learn/src/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx
@@ -4,16 +4,16 @@ import { trim } from 'lodash'
import { PaymentIntentResult, Stripe, StripeCardNumberElement, StripeElements } from '@stripe/stripe-js'
import { loadStripe } from '@stripe/stripe-js/pure'
import { CardNumberElement, Elements, useElements, useStripe } from '@stripe/react-stripe-js'
+import { EnvironmentConfig } from '~/config'
+import { Button, IconOutline } from '~/libs/ui'
-import { Button, IconOutline } from '../../../../../lib'
-import { StickySidebar } from '../../../learn-lib'
-import { EnvironmentConfig } from '../../../../../config'
import { EnrollPaymentForm } from '../enroll-payment-form'
import {
createMemberEnrollPaymentAsync,
MemberEnrollPaymentSheet,
+ StickySidebar,
StripeProduct,
-} from '../../../learn-lib/data-providers/payments'
+} from '../../../lib'
import styles from './EnrollmentSidebar.module.scss'
@@ -47,7 +47,7 @@ const EnrollmentSidebar: FC
+
+ + {title} +
+
+ {
+ !fileName && !isChallengeBelongToTopgearGroup && (
+
+ );
+ }
+}
+
+FilestackFilePicker.defaultProps = {
+ error: '',
+ fileName: '',
+ uploadProgress: null,
+ isChallengeBelongToTopgearGroup: false,
+};
+
+/**
+ * Prop Validation
+ */
+FilestackFilePicker.propTypes = {
+ error: PT.string,
+ userId: PT.string.isRequired,
+ challengeId: PT.string.isRequired,
+ fileName: PT.string,
+ fileExtensions: PT.arrayOf(PT.string).isRequired,
+ title: PT.string.isRequired,
+ setError: PT.func.isRequired,
+ setFileName: PT.func.isRequired,
+ setUploadProgress: PT.func.isRequired,
+ dragged: PT.bool.isRequired,
+ setDragged: PT.func.isRequired,
+ setFilestackData: PT.func.isRequired,
+ uploadProgress: PT.number,
+ isChallengeBelongToTopgearGroup: PT.bool,
+};
+
+export default FilestackFilePicker;
diff --git a/src/apps/earn/src/containers/Submission/SubmissionPage/FilestackFilePicker/styles.scss b/src/apps/earn/src/containers/Submission/SubmissionPage/FilestackFilePicker/styles.scss
new file mode 100644
index 000000000..1a69fa2c7
--- /dev/null
+++ b/src/apps/earn/src/containers/Submission/SubmissionPage/FilestackFilePicker/styles.scss
@@ -0,0 +1,131 @@
+@import "@earn/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: #f4f4f4;
+ border-radius: 6px;
+ border: 1px dashed #aaa;
+ min-height: 190px;
+ height: 100%;
+ position: relative;
+ justify-content: space-around;
+
+ @include xs-to-sm {
+ min-height: 150px;
+ justify-content: space-between;
+ }
+
+ p {
+ font-size: 16px;
+ color: #2a2a2a;
+ line-height: 25px;
+ flex-basis: 0;
+ text-align: center;
+
+ @include xs-to-sm {
+ font-size: 13px;
+ line-height: 15px;
+ }
+ }
+
+ span {
+ font-size: 16px;
+ color: #2a2a2a;
+ 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;
+ }
+
+ .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/apps/earn/src/containers/Submission/SubmissionPage/Header/index.jsx b/src/apps/earn/src/containers/Submission/SubmissionPage/Header/index.jsx
new file mode 100644
index 000000000..b096f0221
--- /dev/null
+++ b/src/apps/earn/src/containers/Submission/SubmissionPage/Header/index.jsx
@@ -0,0 +1,46 @@
+/**
+ * components.page.challenge-details.submission.header.index Header Component
+ *
+ * Description:
+ * Header for the submission page. Displays title and allows navigation
+ * back to challenge details.
+ */
+import PT from 'prop-types';
+import styles from "./styles.scss";
+import { styled as styledCss } from "@earn/utils";
+import { IconOutline, LinkButton } from '~/libs/ui';
+const styled = styledCss(styles)
+
+/**
+ * Header shown on Submissions Page
+ */
+const Header = ({
+ challengeId,
+ challengesUrl,
+ title,
+}) => (
+ + Drag and drop your{' '} + {fileExtensions.join(' or ')} + {' '} + file here. +
+ ) + } + { + !fileName && !isChallengeBelongToTopgearGroup && ( + + or + + ) + } + { + fileName && ( ++ {fileName} +
+ ) + } + { + _.isNumber(uploadProgress) && uploadProgress < 100 ? ( ++ Uploading: + {uploadProgress} + % +
+ ) : null + } + { + isChallengeBelongToTopgearGroup && ( +
+ {invalidUrl && (
+ )
+ }
+
+ {!isChallengeBelongToTopgearGroup && (
+ * Invalid URL
)}
+
+ {
+ const path = this.generateFilePath();
+ this.filestack.picker({
+ accept: fileExtensions,
+ fromSources: [
+ 'local_file_system',
+ 'googledrive',
+ 'dropbox',
+ 'onedrive',
+ 'github',
+ 'url',
+ ],
+ maxSize: 500 * 1024 * 1024,
+ onFileUploadFailed: () => setDragged(false),
+ onFileUploadFinished: (file) => {
+ setDragged(false);
+ this.onSuccess(file, path);
+ },
+ startUploadingWhenMaxFilesReached: true,
+ storeTo: {
+ container: config.FILESTACK.SUBMISSION_CONTAINER,
+ path,
+ region: config.FILESTACK.REGION,
+ },
+ }).open();
+ }}
+ onKeyPress={() => {
+ const path = this.generateFilePath();
+ this.filestack.picker({
+ accept: fileExtensions,
+ fromSources: [
+ 'local_file_system',
+ 'googledrive',
+ 'dropbox',
+ 'onedrive',
+ 'github',
+ 'url',
+ ],
+ maxSize: 500 * 1024 * 1024,
+ onFileUploadFailed: () => setDragged(false),
+ onFileUploadFinished: (file) => {
+ setDragged(false);
+ this.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 = this.generateFilePath();
+ const filename = e.dataTransfer.files[0].name;
+ if (!fileExtensions.some(ext => filename.endsWith(ext))) {
+ return fireErrorMessage('Wrong file type!', '');
+ }
+ setFileName(e.dataTransfer.files[0].name);
+ setUploadProgress(0);
+ this.filestack.upload(e.dataTransfer.files[0], {
+ onProgress: ({ totalPercent }) => {
+ setUploadProgress(totalPercent);
+ },
+ progressInterval: 1000,
+ }, {
+ container: config.FILESTACK.SUBMISSION_CONTAINER,
+ path,
+ region: config.FILESTACK.REGION,
+ }).then(file => this.onSuccess(file, path));
+ return undefined;
+ }}
+ role="tab"
+ className={styled('drop-zone-mask')}
+ tabIndex={0}
+ aria-label="Select file to upload"
+ />
+ )}
+
+ {
+ error
+ && (
+
+ {error}
+
+ )
+ }
+
+
+);
+
+/**
+ * Prop Validation
+ */
+Header.propTypes = {
+ challengeId: PT.string.isRequired,
+ challengesUrl: PT.string.isRequired,
+ title: PT.string.isRequired,
+};
+
+export default Header;
diff --git a/src/apps/earn/src/containers/Submission/SubmissionPage/Header/styles.scss b/src/apps/earn/src/containers/Submission/SubmissionPage/Header/styles.scss
new file mode 100644
index 000000000..a8fc73ef3
--- /dev/null
+++ b/src/apps/earn/src/containers/Submission/SubmissionPage/Header/styles.scss
@@ -0,0 +1,86 @@
+@import "@earn/styles/mixins";
+
+.header {
+ @include roboto-regular;
+
+ display: flex;
+ padding: 30px 0;
+ background-color: #fff;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid #f0f0f0;
+
+ @include xs-to-md {
+ padding: 30px 0;
+ }
+
+ .header-link {
+ display: flex;
+
+ @include xs-to-md {
+ flex-direction: column;
+ }
+ }
+
+ p {
+ @include barlow-bold;
+
+ font-weight: 600;
+ line-height: 32px;
+ font-size: 34px;
+ color: #2a2a2a;
+ display: flex;
+ margin-left: 16px;
+ margin-top: -8px;
+ }
+
+ 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;
+ }
+ }
+}
+
+.back-arrow {
+ width: 32px;
+ height: 24px;
+ border: 1.5px solid #137d60;
+ color: #137d60;
+ border-radius: 24px;
+ padding: 4px 8px;
+ margin-bottom: 10px;
+ position: relative;
+
+ @include xs-to-md {
+ margin-left: 15px;
+ margin-bottom: 15px;
+ }
+}
+
+.left-arrow {
+ border: 1.5px solid #137d60;
+ border-radius: 24px;
+
+ @include xs-to-md {
+ margin-left: 15px;
+ margin-bottom: 15px;
+ }
+}
diff --git a/src/apps/earn/src/containers/Submission/SubmissionPage/Submit/index.jsx b/src/apps/earn/src/containers/Submission/SubmissionPage/Submit/index.jsx
new file mode 100644
index 000000000..ac3579c44
--- /dev/null
+++ b/src/apps/earn/src/containers/Submission/SubmissionPage/Submit/index.jsx
@@ -0,0 +1,389 @@
+/**
+ * components.page.challenge-details.Submit
+ *
+
+ + {title} +
+
+
+
+ )
+ : (
+
+
+);
+
+/**
+ * Prop Validation
+ */
+Uploading.propTypes = {
+ challengeId: PT.string.isRequired,
+ challengeName: PT.string.isRequired,
+ challengesUrl: PT.string.isRequired,
+ isSubmitting: PT.bool.isRequired,
+ submitDone: PT.bool.isRequired,
+ reset: PT.func.isRequired,
+ error: PT.string.isRequired,
+ track: PT.string.isRequired,
+ retry: PT.func.isRequired,
+ uploadProgress: PT.number.isRequired,
+ back: PT.func.isRequired,
+};
+
+export default Uploading;
diff --git a/src/apps/earn/src/containers/Submission/SubmissionPage/Uploading/styles.scss b/src/apps/earn/src/containers/Submission/SubmissionPage/Uploading/styles.scss
new file mode 100644
index 000000000..6c270becb
--- /dev/null
+++ b/src/apps/earn/src/containers/Submission/SubmissionPage/Uploading/styles.scss
@@ -0,0 +1,135 @@
+@import "@earn/styles/mixins";
+@import "@libs/ui/styles/includes";
+
+.container {
+ @include roboto-regular;
+
+ align-items: center;
+ width: 100%;
+ background-color: white;
+ left: 0;
+ z-index: 100000;
+ display: flex;
+ justify-content: center;
+ position: relative;
+ padding: 30px;
+}
+
+.uploading {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+
+ .error-msg {
+ @include roboto-bold;
+
+ font-weight: 500;
+ width: 500px;
+ margin-bottom: 24px;
+ color: #ef476f;
+ line-height: 24px;
+ font-size: 16px;
+ text-align: center;
+
+ @include xs-to-sm {
+ width: 100%;
+ }
+ }
+
+ .progress-container {
+ width: 90%;
+ height: 10px;
+ background-color: #e9e9e9;
+ border-radius: 8px;
+
+ .progress-bar {
+ width: 0%;
+ height: 16px;
+ background-color: #9d41c9;
+ border-radius: 8px;
+ }
+ }
+
+ h3 {
+ @include barlow-bold;
+
+ font-size: 24px;
+ line-height: 28px;
+ font-weight: 600;
+ color: $tc-black;
+ }
+
+ svg {
+ margin-top: 84px;
+
+ @include xs-to-md {
+ margin-top: 40px;
+ }
+ }
+
+ div.animate {
+ svg {
+ animation-name: spin;
+ animation-duration: 2000ms;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+ }
+ }
+
+ h4.link {
+ @include roboto-regular;
+
+ font-weight: 400;
+ text-align: center;
+ font-size: 24px;
+ line-height: 32px;
+ color: $tc-black;
+ margin-top: 24px;
+ }
+
+ p {
+ @include roboto-bold;
+
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 24px;
+ color: $tc-black;
+ text-align: center;
+ margin-bottom: 30px;
+ margin-top: 80px;
+
+ @include xs-to-md {
+ margin-top: 40px;
+ }
+ }
+
+ .submitting {
+ @include roboto-regular;
+
+ font-weight: 400;
+ text-align: center;
+ margin-top: 8px;
+ font-size: 14px;
+ line-height: 22px;
+ color: $tc-black;
+ }
+
+ .button-container {
+ align-items: center;
+ flex-wrap: nowrap;
+ display: flex;
+ justify-content: center;
+ gap: $sp-3;
+ }
+}
+
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/apps/earn/src/containers/Submission/SubmissionPage/index.jsx b/src/apps/earn/src/containers/Submission/SubmissionPage/index.jsx
new file mode 100644
index 000000000..d912f0520
--- /dev/null
+++ b/src/apps/earn/src/containers/Submission/SubmissionPage/index.jsx
@@ -0,0 +1,115 @@
+/**
+ * components.page.challenge-details.submission Index Component
+ *
+ * Description:
+ * Top-level component for the Submit component.
+ */
+import React from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+import Header from './Header';
+import Submit from './Submit';
+import styles from "./styles.scss";
+import { styled as styledCss } from "@earn/utils";
+const styled = styledCss(styles)
+/**
+ * SubmissionsPage Component
+ */
+function SubmissionsPage(props) {
+ const {
+ challengeId,
+ challengeName,
+ challengesUrl,
+ status,
+ phases,
+ winners,
+ handle,
+ } = props;
+
+ const submissionEnded = status === 'COMPLETED'
+ || (!_.some(phases, { name: 'Submission', isOpen: true })
+ && !_.some(phases, { name: 'Checkpoint Submission', isOpen: true }));
+
+ const hasFirstPlacement = !_.isEmpty(winners) && _.some(winners, { placement: 1, handle });
+
+ let canSubmitFinalFixes = false;
+ if (hasFirstPlacement && !_.isEmpty(phases)) {
+ canSubmitFinalFixes = _.some(phases, { phaseType: 'Final Fix', isOpen: true });
+ }
+
+ const submissionPermitted = !submissionEnded || canSubmitFinalFixes;
+
+ return (
+
+ {
+ isSubmitting
+ && (
+
+ + UPLOADING SUBMISSION FOR +
+ ) + } + { + submitDone + && ( ++ UPLOADING COMPLETED FOR +
+ ) + } + { + error + && ( ++ ERROR SUBMITTING FOR +
+ ) + } + { + isSubmitting + && ( ++ “ + {challengeName } + ” +
+ ) + } + { + (submitDone || error) + && ( ++ {challengeName} +
+ ) + } + { + (isSubmitting && !submitDone) &&+ Hey, your work is AWESOME! Please don't close this window while uploading, + Your progress will be lost. +
+ ) + } + { + isSubmitting && !submitDone + && ( +
+
+
+ )
+ }
+ {
+ isSubmitting && !submitDone
+ && (
+ + Uploading: + {(100 * uploadProgress).toFixed()} + % +
+ ) + } + { + error + && ( ++ Oh, that’s embarrassing! The file couldn’t be + uploaded. +
+ ) + } + { + error + && ( +
+ {error}
+
+ )
+ }
+ {
+ error
+ && (
+
+
+
+
+ )
+ }
+ {
+ 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()}
+ >
+ My Submissions
+
+
+ ) : (
+
+
+ back()}
+ size='lg'
+ >
+ MY SUBMISSIONS
+
+
+ )}
+
+ )
+ }
+
+
+ );
+}
+
+/* Reusable prop validation for Filestack data objects */
+const filestackDataProp = PT.shape({
+ filename: PT.string.isRequired,
+ mimetype: PT.string.isRequired,
+ size: PT.number.isRequired,
+ key: PT.string.isRequired,
+ container: PT.string.isRequired,
+});
+
+/**
+ * Prop Validation
+ */
+SubmissionsPage.propTypes = {
+ userId: PT.string.isRequired,
+ challengesUrl: PT.string.isRequired,
+ challengeId: PT.string.isRequired,
+ challengeName: PT.string.isRequired,
+ communitiesList: PT.shape({
+ data: PT.arrayOf(PT.shape({
+ challengeFilter: PT.shape(),
+ communityId: PT.string.isRequired,
+ })).isRequired,
+ loadingUuid: PT.string.isRequired,
+ timestamp: PT.number.isRequired,
+ }).isRequired,
+ groups: PT.arrayOf(PT.shape()).isRequired,
+ track: PT.string.isRequired,
+ status: PT.string.isRequired,
+ submitForm: PT.func.isRequired,
+ resetForm: PT.func.isRequired,
+ errorMsg: PT.string.isRequired,
+ isSubmitting: PT.bool.isRequired,
+ submitDone: PT.bool.isRequired,
+ setAgreed: PT.func.isRequired,
+ uploadProgress: PT.number.isRequired,
+ agreed: PT.bool.isRequired,
+ filePickers: PT.arrayOf(PT.shape({
+ id: PT.string.isRequired,
+ error: PT.string.isRequired,
+ fileName: PT.string.isRequired,
+ }).isRequired).isRequired,
+ setFilePickerError: PT.func.isRequired,
+ setFilePickerFileName: PT.func.isRequired,
+ setFilePickerDragged: PT.func.isRequired,
+ setSubmissionFilestackData: PT.func.isRequired,
+ submissionFilestackData: filestackDataProp.isRequired,
+ winners: PT.arrayOf(PT.object).isRequired,
+ handle: PT.string.isRequired,
+ phases: PT.arrayOf(PT.object).isRequired,
+};
+
+export default SubmissionsPage;
diff --git a/src/apps/earn/src/containers/Submission/SubmissionPage/styles.scss b/src/apps/earn/src/containers/Submission/SubmissionPage/styles.scss
new file mode 100644
index 000000000..9f193fc9d
--- /dev/null
+++ b/src/apps/earn/src/containers/Submission/SubmissionPage/styles.scss
@@ -0,0 +1,36 @@
+@import "@earn/styles/mixins";
+
+.container {
+ display: flex;
+ flex: 1;
+ justify-content: center;
+ padding: 80px 0 40px;
+ background: #fff;
+
+ @include md-to-lg {
+ padding-bottom: 0;
+ }
+
+ @include xs-to-lg {
+ padding: 10px;
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+
+ @include md-to-lg {
+ width: 100%;
+ }
+
+ @include xl {
+ width: 1242px;
+ }
+
+ .not-permitted {
+ background-color: white;
+ text-align: center;
+ padding: 40px;
+ }
+ }
+}
diff --git a/src/apps/earn/src/containers/Submission/index.jsx b/src/apps/earn/src/containers/Submission/index.jsx
new file mode 100644
index 000000000..d796ab2a4
--- /dev/null
+++ b/src/apps/earn/src/containers/Submission/index.jsx
@@ -0,0 +1,267 @@
+/**
+ * containers.page.challenge-details.submission Container
+ *
+
+
+
+ );
+ }
+ }
+
+ SubmissionManagementPageContainer.defaultProps = {
+ challengesUrl: '/earn/challenges',
+ deleting: false,
+ isLoadingChallenge: false,
+ mySubmissions: [],
+ // isLoadingSubmissions: false,
+ showModal: false,
+ toBeDeletedId: '',
+ challenge: null,
+ deletionSucceed: false,
+ };
+
+ SubmissionManagementPageContainer.propTypes = {
+ challenge: PT.shape(),
+ challengesUrl: PT.string,
+ deleting: PT.bool,
+ isLoadingChallenge: PT.bool,
+ loadChallengeDetails: PT.func.isRequired,
+ authTokens: PT.shape().isRequired,
+ challengeId: PT.string.isRequired,
+ mySubmissions: PT.arrayOf(PT.shape()),
+ loadingSubmissionsForChallengeId: PT.string.isRequired,
+ loadMySubmissions: PT.func.isRequired,
+ onShowDetails: PT.func.isRequired,
+ onSubmissionDelete: PT.func.isRequired,
+ onDownloadSubmission: PT.func.isRequired,
+ showDetails: PT.shape().isRequired,
+ showModal: PT.bool,
+ onCancelSubmissionDelete: PT.func.isRequired,
+ toBeDeletedId: PT.string,
+ deletionSucceed: PT.bool,
+ onSubmissionDeleteConfirmed: PT.func.isRequired,
+ submissionPhaseStartDate: PT.string.isRequired,
+ };
+
+ function mapStateToProps(state, props) {
+ const { challengeId } = props;
+
+ let { mySubmissions } = state.challenge;
+ mySubmissions = challengeId === mySubmissions.challengeId
+ ? mySubmissions.v2 : null;
+ const allPhases = state.challenge.details?.phases || [];
+ const submissionPhase = allPhases.find(phase => ['Submission', 'Checkpoint Submission'].includes(phase.name) && phase.isOpen) || {};
+ return {
+ challengeId: String(challengeId),
+ challenge: state.challenge.details,
+ challengesUrl: props.challengesUrl,
+
+ deleting: state.page.submission_management.deletingSubmission,
+
+ isLoadingChallenge: Boolean(state.challenge.loadingDetailsForChallengeId),
+
+ loadingSubmissionsForChallengeId:
+ state.challenge.loadingSubmissionsForChallengeId || '',
+ mySubmissions,
+
+ submissionPhaseStartDate: submissionPhase.actualStartDate || submissionPhase.scheduledStartDate || '',
+
+ showDetails: state.page.submission_management.showDetails,
+
+ showModal: state.page.submission_management.showModal,
+ toBeDeletedId: state.page.submission_management.toBeDeletedId,
+ deletionSucceed: state.page.submission_management.deletionSucceed,
+
+ authTokens: state.auth,
+ registrants: state.challenge.details?.registrants,
+ handle: state.auth.user ? state.auth.user.handle : '',
+ };
+ }
+
+ const mapDispatchToProps = dispatch => ({
+ onShowDetails: (submissionId) => {
+ dispatch(smpActions.page.submissionManagement.showDetails(submissionId));
+ },
+
+ onSubmissionDelete: (submissionId) => {
+ dispatch(smpActions.page.submissionManagement.confirmDelete(submissionId));
+ },
+
+ onCancelSubmissionDelete: () => {
+ dispatch(smpActions.page.submissionManagement.cancelDelete());
+ },
+
+ onSubmissionDeleteConfirmed: (challengeId, submissionId) => {
+ const a = actions.smp;
+ dispatch(a.deleteSubmissionInit());
+ dispatch(a.deleteSubmissionDone(challengeId, submissionId));
+ },
+
+ loadChallengeDetails: (tokens, challengeId) => {
+ const a = actions.challenge;
+ dispatch(a.getDetailsInit(challengeId));
+ dispatch(a.getDetailsDone({challengeId, tokenV3: tokens.tokenV3, tokenV2: tokens.tokenV2}));
+ },
+
+ loadMySubmissions: (tokens, challengeId) => {
+ if (!tokens?.tokenV3) {
+ return
+ }
+ const a = actions.challenge;
+ dispatch(a.getSubmissionsInit(challengeId));
+ dispatch(a.getSubmissionsDone({challengeId, tokenV3: tokens.tokenV3}));
+ },
+ });
+
+ const SubmissionManagementContainer = connect(
+ mapStateToProps,
+ mapDispatchToProps,
+ )(SubmissionManagementPageContainer);
+
+ export default SubmissionManagementContainer;
diff --git a/src/apps/earn/src/containers/SubmissionManagement/styles.scss b/src/apps/earn/src/containers/SubmissionManagement/styles.scss
new file mode 100644
index 000000000..6caf9315f
--- /dev/null
+++ b/src/apps/earn/src/containers/SubmissionManagement/styles.scss
@@ -0,0 +1,31 @@
+@import '@earn/styles/mixins';
+
+$sm-space-10: $base-unit * 2;
+$sm-space-15: $base-unit * 3;
+$sm-space-25: $base-unit * 5;
+$sm-space-40: $base-unit * 8;
+
+.outer-container {
+ background: $tc-gray-10;
+ padding: 24px;
+ width: 100%;
+
+ @include xs-to-sm {
+ padding: 15px;
+ }
+}
+
+.deletingIndicator {
+ margin: -17px 0;
+
+ &:global.hidden {
+ display: none;
+ }
+}
+
+.submission-management-container {
+ @include roboto-regular;
+
+ background: #fff;
+ margin: auto;
+}
diff --git a/src/apps/earn/src/containers/Terms/index.jsx b/src/apps/earn/src/containers/Terms/index.jsx
new file mode 100644
index 000000000..028a8d552
--- /dev/null
+++ b/src/apps/earn/src/containers/Terms/index.jsx
@@ -0,0 +1,246 @@
+/**
+ * This container component load data into its state, and pass them to children via props.
+ * Also it defines all necessary handlers to pass to the children.
+ */
+
+import React from "react";
+import PT from "prop-types";
+import { connect } from "react-redux";
+import _ from "lodash";
+
+import config from "../../config";
+import Terms from "../../components/Terms";
+import termsActions from "../../actions/terms";
+
+let isAnyTermModalOpen = false;
+
+class TermsPageContainer extends React.Component {
+ componentDidMount() {
+ const { loadTerms, authTokens, entity, termsForEntity } = this.props;
+
+ if (!_.isEqual(entity, termsForEntity)) {
+ loadTerms(authTokens, entity);
+ }
+ }
+
+ componentWillReceiveProps(nextProps) {
+ const { loadTerms, authTokens, entity } = this.props;
+
+ // this is currently never happens that we have mounted Terms component
+ // which persist without unmounting during entity is changed
+ // but just in case better to support such case to avoid hidden unexpected behavior
+ if (!_.isEqual(nextProps.entity, entity)) {
+ loadTerms(authTokens, nextProps.entity);
+ }
+ }
+
+ componentWillUnmount() {
+ if (this.forceOpen) isAnyTermModalOpen = false;
+ }
+
+ render() {
+ const {
+ agreeingTerm,
+ agreeTerm,
+ authTokens,
+ canRegister,
+ checkingStatus,
+ checkStatus,
+ closeTermsModal,
+ defaultTitle,
+ description,
+ docuSignUrl,
+ entity,
+ getDocuSignUrl,
+ instanceId,
+ isLoadingTerms,
+ loadingDocuSignUrl,
+ loadingTermId,
+ loadTermDetails,
+ openTermsModalUuid,
+ register,
+ selectedTerm,
+ selectTerm,
+ signDocu,
+ termDetails,
+ terms,
+ viewOnly,
+ } = this.props;
+
+ if (openTermsModalUuid === "ANY" && !isAnyTermModalOpen) {
+ isAnyTermModalOpen = true;
+ this.forceOpen = true;
+ }
+ const open =
+ (openTermsModalUuid && openTermsModalUuid === instanceId) ||
+ (openTermsModalUuid === "ANY" && this.forceOpen);
+
+ return (
+
+ {!isEmpty
+ && (
+
+
+
+
+ )}
+ >
+
+
+
+ {deleting &&
+ + 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. + Note that deleting the file may take a few minutes to propagate + through the Topcoder platform. +
+
+ {open ? (
+ agreeTerm(authTokens, termId)}
+ canRegister={canRegister}
+ checkingStatus={checkingStatus}
+ checkStatus={() => checkStatus(authTokens, entity)}
+ defaultTitle={defaultTitle}
+ description={description}
+ details={termDetails}
+ docuSignUrl={docuSignUrl}
+ getDocuSignUrl={(templateId) => {
+ const base = config.URL.BASE;
+ return getDocuSignUrl(
+ authTokens,
+ templateId,
+ `${base}/community-app-assets/iframe-break`
+ );
+ }}
+ isLoadingTerms={isLoadingTerms}
+ loadDetails={(termId) => loadTermDetails(authTokens, termId)}
+ loadingDocuSignUrl={loadingDocuSignUrl}
+ loadingTermId={loadingTermId}
+ onCancel={() => closeTermsModal(instanceId)}
+ register={register}
+ selectedTerm={selectedTerm}
+ selectTerm={selectTerm}
+ signDocu={signDocu}
+ terms={terms || []}
+ viewOnly={viewOnly}
+ />
+ ) : null}
+
+ );
+ }
+}
+
+TermsPageContainer.defaultProps = {
+ agreeingTerm: "",
+ canRegister: false,
+ checkingStatus: false,
+ docuSignUrl: "",
+ isLoadingTerms: false,
+ loadingDocuSignUrl: "",
+ loadingTermId: "",
+ openTermsModalUuid: "",
+ selectedTerm: null,
+ // showTermsModal: false,
+ description: "",
+ defaultTitle: "Terms & Conditions of Use",
+ // reviewOpportunityTerms: [],
+ termDetails: {},
+ terms: [],
+ termsForEntity: null,
+ viewOnly: false,
+};
+
+const enitytType = PT.shape({
+ type: PT.oneOf(["challenge", "community", "reviewOpportunity"]).isRequired,
+ id: PT.string.isRequired,
+ reviewOpportunityTerms: PT.arrayOf(PT.shape()),
+});
+
+TermsPageContainer.propTypes = {
+ agreeingTerm: PT.string,
+ agreeTerm: PT.func.isRequired,
+ authTokens: PT.shape().isRequired,
+ canRegister: PT.bool,
+ checkingStatus: PT.bool,
+ checkStatus: PT.func.isRequired,
+ closeTermsModal: PT.func.isRequired,
+ description: PT.string,
+ defaultTitle: PT.string,
+ docuSignUrl: PT.string,
+ entity: enitytType.isRequired,
+ getDocuSignUrl: PT.func.isRequired,
+ isLoadingTerms: PT.bool,
+
+ /* WARNING: This is very important prop! It is not safe to open multiple terms
+ * modal simultaneously: DocuSign terms will fail to load, if the same terms
+ * is shown in multiple modals. To prevent this, parent component should pass
+ * into terms container an UUID that will be used then in actions to open
+ * this exact modal. */
+ instanceId: PT.string.isRequired,
+
+ loadingDocuSignUrl: PT.string,
+ loadingTermId: PT.string,
+ loadTermDetails: PT.func.isRequired,
+ loadTerms: PT.func.isRequired,
+ openTermsModalUuid: PT.string,
+ register: PT.func.isRequired,
+ selectedTerm: PT.shape(),
+ selectTerm: PT.func.isRequired,
+
+ signDocu: PT.func.isRequired,
+ termDetails: PT.shape(),
+ terms: PT.arrayOf(PT.shape()),
+ termsForEntity: enitytType,
+ viewOnly: PT.bool,
+};
+
+function mapStateToProps(state, props) {
+ const { entity } = props;
+ return {
+ agreeingTerm: state.terms.agreeingTerm,
+ authTokens: state.auth,
+ canRegister: state.terms.canRegister,
+ checkingStatus: state.terms.checkingStatus,
+ docuSignUrl: state.terms.docuSignUrl,
+ isLoadingTerms: _.isEqual(state.terms.loadingTermsForEntity, entity),
+ loadingDocuSignUrl: state.terms.loadingDocuSignUrl,
+ loadingTermId: state.terms.loadingDetailsForTermId,
+ openTermsModalUuid: state.terms.openTermsModalUuid,
+ selectedTerm: state.terms.selectedTerm,
+ termDetails: state.terms.details,
+ terms: state.terms.terms,
+ termsForEntity: state.terms.entity,
+ viewOnly: state.terms.viewOnly,
+ };
+}
+
+function mapDispatchToProps(dispatch) {
+ return {
+ closeTermsModal: (uuid) => {
+ dispatch(termsActions.terms.closeTermsModal(uuid));
+ },
+ selectTerm: (term) => {
+ dispatch(termsActions.terms.selectTerm(term));
+ },
+ loadTermDetails: (tokens, termId) => {
+ dispatch(termsActions.terms.getTermDetailsInit(termId));
+ dispatch(termsActions.terms.getTermDetailsDone(termId, tokens.tokenV3));
+ },
+ getDocuSignUrl: (tokens, templateId, returnUrl) => {
+ dispatch(termsActions.terms.getDocuSignUrlInit(templateId));
+ dispatch(
+ termsActions.terms.getDocuSignUrlDone(
+ templateId,
+ returnUrl,
+ tokens.tokenV3
+ )
+ );
+ },
+ agreeTerm: (tokens, termId) => {
+ dispatch(termsActions.terms.agreeTermInit(termId));
+ dispatch(termsActions.terms.agreeTermDone(termId, tokens.tokenV3));
+ },
+ signDocu: (id) => {
+ dispatch(termsActions.terms.signDocu(id));
+ },
+ checkStatus: (tokens, entity) => {
+ dispatch(termsActions.terms.checkStatusInit());
+ dispatch(termsActions.terms.checkStatusDone(entity, tokens));
+ },
+ loadTerms: (tokens, entity) => {
+ dispatch(termsActions.terms.getTermsInit(entity));
+ dispatch(termsActions.terms.getTermsDone(entity, tokens));
+ },
+ };
+}
+
+const TermsContainer = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(TermsPageContainer);
+
+export default TermsContainer;
diff --git a/src/apps/earn/src/earn.routes.tsx b/src/apps/earn/src/earn.routes.tsx
new file mode 100644
index 000000000..31215d001
--- /dev/null
+++ b/src/apps/earn/src/earn.routes.tsx
@@ -0,0 +1,107 @@
+import { Navigate } from 'react-router-dom'
+
+import { AppSubdomain, EnvironmentConfig, ToolTitle } from '~/config'
+import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '~/libs/core'
+
+const EarnAppRoot: LazyLoadedComponent = lazyLoad(() => import('./EarnApp'))
+
+const ChallengeSubmissions: LazyLoadedComponent = lazyLoad(
+ () => import('./routes/ChallengeSubmissions'),
+ 'ChallengeSubmissions',
+)
+
+const ChallengeDetails: LazyLoadedComponent = lazyLoad(
+ () => import('./routes/ChallengeDetails'),
+ 'ChallengeDetails',
+)
+
+const ChallengeList: LazyLoadedComponent = lazyLoad(
+ () => import('./routes/ChallengeList'),
+ 'ChallengeList',
+)
+
+const GigsHome: LazyLoadedComponent = lazyLoad(
+ () => import('./routes/GigsPage'),
+)
+
+const GigsDetail: LazyLoadedComponent = lazyLoad(
+ () => import('./routes/GigDetailsPage'),
+)
+
+const GigsApply: LazyLoadedComponent = lazyLoad(
+ () => import('./routes/GigApplyPage'),
+)
+
+const MyGigs: LazyLoadedComponent = lazyLoad(
+ () => import('./routes/MyGigsPage'),
+)
+
+export const rootRoute: string = (
+ EnvironmentConfig.SUBDOMAIN === AppSubdomain.earn ? '' : `/${AppSubdomain.earn}`
+)
+
+export const EARN_APP_PATHS: { [key: string]: string } = {
+ challenges: `${rootRoute}/challenges`,
+ gigs: `${rootRoute}/gigs`,
+ root: rootRoute,
+}
+
+export const toolTitle: string = ToolTitle.earn
+export const absoluteRootRoute: string = `${window.location.origin}${EARN_APP_PATHS.root}`
+
+export const earnRoutes: ReadonlyArray
+
+
+
+
+
+
+
+ );
+};
+
+export default GigApplyPage;
diff --git a/src/apps/earn/src/routes/GigApplyPage/styles.scss b/src/apps/earn/src/routes/GigApplyPage/styles.scss
new file mode 100644
index 000000000..eaafd8b6f
--- /dev/null
+++ b/src/apps/earn/src/routes/GigApplyPage/styles.scss
@@ -0,0 +1,34 @@
+@import "../../styles/mixins";
+
+.container {
+ flex: 1 1 0;
+ display: flex;
+ flex-direction: column;
+ padding: 47px 20px 100px;
+ min-height: calc(100vh - var(--navbarHeight));
+ background-color: #fff;
+}
+
+.page {
+ position: relative;
+ flex: 1 0 auto;
+ display: flex;
+ flex-direction: column;
+ margin: 0 auto;
+ width: 100%;
+ max-width: 1280px;
+}
+
+.loadingIndicator {
+ margin: 0 auto;
+}
+
+.error {
+ margin: 0 auto;
+ padding: 20px 30px;
+ width: 100%;
+ max-width: 600px;
+ font-size: 24px;
+ text-align: center;
+ color: #f00;
+}
\ No newline at end of file
diff --git a/src/apps/earn/src/routes/GigDetailsPage/index.jsx b/src/apps/earn/src/routes/GigDetailsPage/index.jsx
new file mode 100644
index 000000000..abe526e36
--- /dev/null
+++ b/src/apps/earn/src/routes/GigDetailsPage/index.jsx
@@ -0,0 +1,74 @@
+import styles from "./styles.scss";
+import React, { useEffect } from "react";
+import { useSelector } from "react-redux";
+import { Link, useLocation, useParams } from "react-router-dom";
+import { ReactComponent as IconArrowPrev } from "../../assets/icons/arrow-prev.svg";
+import { LoadingCircles } from "~/libs/ui";
+import GigDetails from "../../components/gig-details/GigDetails";
+import GigsFulFill from "../../components/gig-details/GigsFulFill";
+import store from "../../store";
+import * as selectors from "../../reducers/gig-details/selectors";
+import * as effectors from "../../actions/gig-details/effectors";
+import * as userSelectors from "../../reducers/user/selectors";
+import * as userEffectors from "../../actions/user/effectors";
+import { GIG_LIST_ROUTE } from "../../constants/routes";
+import { setReferralCookie } from "../../utils/referral";
+
+const GigDetailsPage = () => {
+ const { externalId } = useParams()
+ const details = useSelector(selectors.getDetails);
+ const isLoading = useSelector(selectors.getIsLoadingDetails);
+ const isLoggedIn = useSelector(userSelectors.getIsLoggedIn);
+ const error = useSelector(selectors.getDetailsError);
+
+ const location = useLocation();
+
+ useEffect(() => {
+ effectors.loadDetails(store, externalId);
+ return () => {
+ effectors.resetDetails(store);
+ };
+ }, [externalId]);
+
+ useEffect(() => {
+ if (!isLoggedIn) {
+ userEffectors.loadProfile(store);
+ }
+ }, [isLoggedIn]);
+
+ useEffect(setReferralCookie, []);
+
+ return (
+
+ {isLoading ? (
+
+
+ Something bad happened. Please try again after some time or contact
+ support if issue persists.
+
+ ) : isLoggedIn ? (
+
+
+ );
+};
+
+export default GigDetailsPage;
diff --git a/src/apps/earn/src/routes/GigDetailsPage/styles.scss b/src/apps/earn/src/routes/GigDetailsPage/styles.scss
new file mode 100644
index 000000000..be081e6f6
--- /dev/null
+++ b/src/apps/earn/src/routes/GigDetailsPage/styles.scss
@@ -0,0 +1,54 @@
+@import "../../styles/mixins";
+
+.container {
+ flex: 1 1 0;
+ display: flex;
+ flex-direction: column;
+ padding: 47px 20px 100px;
+ min-height: calc(100vh - var(--navbarHeight));
+ background-color: #fff;
+}
+
+.page {
+ position: relative;
+ flex: 1 0 auto;
+ display: flex;
+ flex-direction: column;
+ margin: 0 auto;
+ width: 100%;
+ max-width: 1280px;
+}
+
+.gigsLink {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ position: absolute;
+ left: 0;
+ top: 4px;
+ width: 30px;
+ height: 30px;
+
+ @include tablet {
+ height: 60px;
+ }
+}
+
+.iconArrowPrev {
+ width: 12px;
+ height: auto;
+}
+
+.error {
+ margin: 0 auto;
+ padding: 20px 30px;
+ width: 100%;
+ max-width: 600px;
+ font-size: 24px;
+ text-align: center;
+ color: #f00;
+}
+
+.loadingIndicator {
+ margin: 0 auto;
+}
diff --git a/src/apps/earn/src/routes/GigsPage/index.jsx b/src/apps/earn/src/routes/GigsPage/index.jsx
new file mode 100644
index 000000000..9cf930244
--- /dev/null
+++ b/src/apps/earn/src/routes/GigsPage/index.jsx
@@ -0,0 +1,44 @@
+import { useEffect, useMemo } from "react";
+import { useSelector } from "react-redux";
+
+// TODO: Remove BasePage and replace with ContentLayout
+import BasePage from "../../containers/BasePage";
+import Gigs from "../../containers/Gigs";
+import GigsFilter from "../../containers/GigsFilter";
+import * as userSelectors from "../../reducers/user/selectors";
+import * as userEffectors from "../../actions/user/effectors";
+import store from "../../store";
+
+import styles from "./styles.scss";
+
+/**
+ * Displays Gig listing page.
+ *
+ * @returns {JSX.Element}
+ */
+const GigsPage = () => {
+ const isLoggedIn = useSelector(userSelectors.getIsLoggedIn);
+ const gigsFilter = useMemo(() =>
+ {isLoading ? (
+
+ {error}
+ ) : details && details.jobClosed ? (
+ \r\nTo agree to the Appirio NDA, please electronically sign the document by following this link:\r\n\r\nhttps://community.topcoder.com/tc?module=SignDocument&templateId=fake-template-id\r\n
\r\n\r\n\r\nOnce signed, you will be automatically added to the NDA terms of use and notified by email. \r\n
", + "agreed": false, + "docusignTemplateId": "fake-template-id", + "serverInformation": { + "serverName": "TopCoder API", + "apiVersion": "0.0.1", + "requestDuration": 4, + "currentTime": 1504891122158 + }, + "requesterInformation": { + "id": "d9994de712597c11d1caad64996d9fa0d9b4aa2c-w2VCwwGwnN6EeyhK", + "remoteIP": "12.34.56.789", + "receivedParams": { + "apiVersion": "v2", + "termsOfUseId": "21153", + "action": "getTermsOfUse" + } + } +} diff --git a/src/apps/earn/src/services/__mocks__/data/terms-noauth.json b/src/apps/earn/src/services/__mocks__/data/terms-noauth.json new file mode 100644 index 000000000..66dfa2b96 --- /dev/null +++ b/src/apps/earn/src/services/__mocks__/data/terms-noauth.json @@ -0,0 +1,35 @@ +{ + "terms": [ + { + "termsOfUseId": 21193, + "title": "Standard Terms for Topcoder Competitions v2.1", + "url": "", + "agreeabilityType": "Electronically-agreeable", + "templateId": null + }, + { + "termsOfUseId": 21153, + "title": "Appirio NDA v2.0", + "url": "http://community.topcoder.com/tc?module=Terms&tuid=21153", + "agreeabilityType": "DocuSignable", + "templateId": "fake-template-id" + } + ], + "serverInformation": { + "serverName": "Topcoder API", + "apiVersion": "0.0.1", + "requestDuration": 11471, + "currentTime": 1504879510947 + }, + "requesterInformation": { + "id": "456f987dee6e9823179c8184fd3509ffdf9c613a-FyefLdEpb8UHgFQF", + "remoteIP": "12.34.567.890", + "receivedParams": { + "role": "Submitter", + "noauth": "true", + "apiVersion": "v2", + "challengeId": "30059255", + "action": "getChallengeTerms" + } + } +} diff --git a/src/apps/earn/src/services/__mocks__/data/terms-reviewer-details.json b/src/apps/earn/src/services/__mocks__/data/terms-reviewer-details.json new file mode 100644 index 000000000..d2d38ba62 --- /dev/null +++ b/src/apps/earn/src/services/__mocks__/data/terms-reviewer-details.json @@ -0,0 +1,22 @@ +{ + "termsOfUseId": 20704, + "title": "Standard Reviewer Terms v1.0", + "url": "", + "text": "Standard Reviewer Terms (Version 1.0)
\r\n\r\nTHESE ARE THE TERMS AND CONDITIONS (\"TERMS\") UNDER WHICH YOU AGREE TO WORK UNDER AS A TOPCODER REVIEW BOARD MEMBER. THESE TERMS AND CONDITIONS AFFECT YOUR RIGHTS AND YOU SHOULD READ THEM CAREFULLY BEFORE AGREEING TO THEM. IN THESE TERMS AND CONDITIONS, \"WE,\" \"US,\" \"ITS\" AND \"OUR\" REFER TO TOPCODER, INC. AND \"YOU\" AND \"YOUR\" REFER TO YOU.
\r\n\r\nIt is understood that We need, and You have, expertise in evaluating and critiquing software designs and/or software development solutions. Furthermore, You agree that You are ready, willing, and able to undertake the performance of evaluating and critiquing such software designs and/or software development solutions submitted to Us, and You agree to assign and transfer your rights as a result of performing such services.
\r\n\r\nIn consideration of the premises and the mutual promises and covenants set forth herein, and for other good and valuable consideration, the receipt and sufficiency of which are hereby acknowledged, the parties agree as follows:
\r\n\r\n1.0\tDefinitions:
\r\nAs used in these Terms, the following capitalized terms shall have the following meanings unless otherwise indicated:
\r\n\r\n1.1.\t\"Development(s)\" shall mean any idea, design, concept, development, component, algorithm, process, method, formula, code, software, technique, technology, discovery or improvement, whether or not patentable, made, conceived, created, discovered, invented or reduced to practice by You in connection with the performance of services hereunder.
\r\n\r\n1.2.\t\"Intellectual Property Rights\" shall mean all intellectual property rights worldwide arising under statutory or common law or by contract and whether or not perfected, now existing or hereafter filed, issued or acquired, including all patent rights; all rights associated with works of authorship including copyrights and moral rights; rights relating to the protection of trade secrets and confidential information; and any right analogous to those set forth herein and any other proprietary rights relating to intangible property, other than Trademarks.
\r\n\r\n1.3.\t\"TopCoder Information\" shall mean TopCoder's and TopCoder Software's specifications, descriptions, architecture, plans, interfaces, and code for TopCoder's and TopCoder Software's hardware, software, and web site; TopCoder's competitions and competition operation procedures; TopCoder's and TopCoder Software's business and operational plans; and derivatives of the foregoing. The TopCoder Information shall be Confidential Information hereunder.
\r\n\r\n1.4.\t\"Software Component\" shall mean all software and related materials, technology and documentation (including without limitation design documents, source code and object code) to be evaluated and assessed by You for Us hereunder in accordance with our requirements, as set forth herein and in other documents provided by Us. The Software Component shall be Confidential Information hereunder.
\r\n\r\n2.\tServices:
\r\n\r\n2.1\tYou hereby agree to provide services relating to the evaluation and assessment of the Software Component. You agree to perform such services according to and in conformity with the following specifications, in addition to any specifications and/or scheduled provided by Us in our sole discretion (the \"Services\"):
\r\n\r\n- Architecture Review Board requirements per component project:\r\n
- If assigned the role of Primary Architect, as designated by Us, You will review all component submissions to check if all required elements are present as defined in the Design Screening Scorecard. If all required elements are present, then the reviewer objectively scores the design on a series of questions in the Design Screening Scorecard. This process will narrow down the component submissions to the top components, which will go on to a more detailed review. \r\n
- All Architecture Review Board members for a component will fill out a subjective review for each component that passes the screening phase. This review is performed through a series of questions in the Design Review Scorecard. Each question requires both a score and comments. \r\n
- The Primary Architect is responsible for aggregating all review comments. This includes resolving any conflicts between differing architect comments. The Primary Architect may deem some suggestions as mandatory with our permission. \r\n
- The Primary Architect is responsible for giving final review to the component submission once the comments have been applied. This includes ensuring that mandatory suggestions have been implemented, and that all suggestions implemented have been done correctly. \r\n
- All interaction with designers, our personnel and other Architecture Review Board members should occur in the online forum on www.topcodersoftware.com. \r\n
- Development Review Board requirements per component project:\r\n\r\n
- If assigned the role of Primary Reviewer, as designated by Us, You will review all component submissions to check if all required elements are present as defined in the Development Screening Scorecard. If all required elements are present, then the reviewer objectively scores the development solution on a series of questions in the Development Screening Scorecard. This process will narrow down the component submissions to the top components, which will go on to a more detailed review. \r\n
- All Development Review Board members for a component will fill out a subjective review for each component that passes the screening phase. This review is performed through a series of questions in the Development Review Scorecard. Each question requires both a score and comments. In addition, the reviewers will each be assigned one of the following roles, which defines what type of test cases they are responsible for submitting: \r\n
- Stress Tester - Develop test cases to stress test component solutions in order to get performance metrics on throughput and capacity. \r\n
- Accuracy Tester - Develop test cases to test the accuracy of the component. Each public method should be tested to ensure it returns the expected result. \r\n
- Failure Tester - Develop test cases to test different input types for all constructor methods and public methods that are not covered in the developer unit test cases or the designer test cases. \r\n
- All interaction with designers, developers, our personnel and other Development Review Board members should occur in the online forum on www.topcodersoftware.com. \r\n
- \r\n
2.2\tYou agree to commit sufficient time and resources to perform the Services according to the schedule set forth by Us. You shall promptly notify Us of any circumstances, as such circumstances arise, that may reasonably be anticipated to lead to a material deviation from the schedule.
\r\n\r\n2.3\tYou agree to keep Us updated, promptly upon our request, of any progress, problems, and/or developments of which You are aware regarding the Services. We shall have the right to require such updates in writing from You in a format specified by Us or acceptable to Us in our sole discretion. You shall conduct and conclude the Services in a professional manner.
\r\n\r\n3.\tConsideration/Compensation:
\r\n\r\n3.1\tFee. In consideration for performance of the Services required by You, We shall pay You the fee set forth on TopCoder's website and/or in other correspondence from Us to You (the \"Fee\"). The Fee shall be in U.S. Dollars and may be paid in installments, as set forth on our website or in other correspondence from Us. The Fee shall be paid upon the conclusion of the review period, and once completed scorecards have been received, provided the completed scorecards are submitted to Us by the deadline as set forth on the website and/or in the correspondence from Us.
\r\n\r\n3.2\tRoyalty Payments.
\r\n \r\n(a)\tDefinitions. As used in this Section 3, the following capitalized terms shall have the following meanings unless otherwise indicated:
\r\n- \r\n
- (i)\t\"Royalty Percentage\" shall mean the percentage of the Royalty Pool to be distributed by Us, at our sole discretion, to all review board members who evaluate the Software Components. \r\n
- (ii) \"Royalty Pool Percentage\" shall mean the percentage of total revenue We derive from the sale of Software Components. We, in our sole discretion, shall determine the Royalty Pool Percentage and may modify or amend the Royalty Pool Percentage at any time for any or no reason. \r\n
- (iii) \"Royalty Pool\" shall mean the portion of our revenues that We distribute as royalty payments to the designers, architects, developers and quality assurance developers who designed, evaluated, developed and tested the applicable Software Components. The Royalty Pool shall be determined by multiplying (x) the Royalty Pool Percentage by (y) the total revenues received by Us from licenses of the applicable Software Components during the respective fiscal quarter. \r\n
- (iv) \"Revenue Receipt Date\" shall mean the date on which We first receive payment of revenue from licenses of an applicable Software Components. \r\n
(b)\tIn consideration of Your evaluation of the Software Components and performance of Your obligations hereunder, We may pay to You a royalty (the \"Royalty Payment\"). The Royalty Payment to be paid shall be a portion of the Royalty Pool. The Royalty Pool shall be distributed as follows:
\r\n\r\n- \r\n
- (i) 25% to all Architecture Review Board members. (This amount will be distributed equally amongst all review board members.) \r\n
- (ii) 25% to all Development Review Board members. (This amount will be distributed equally amongst all review board members.) \r\n
- (iii) 25% to the winning designer \r\n
- (iv) 25% to the winning developer \r\n
3.3\tTotal Payment. The sum of the Fee and the Royalty Payments shall be the total payment due to You. Any and all out-of-pocket expenses incurred by You in connection with performing the obligations hereunder are your sole responsibility. We will not reimburse You for any expenses incurred.
\r\n\r\n3.4\tYou shall not be entitled to receive any other compensation or any benefits from Us in connection with the Services. Except as otherwise required by law, We shall not withhold any sums or payments made to You for social security or other federal, state or local tax liabilities or contributions, and all withholdings, liabilities, and contributions shall be solely your responsibility. Further, You understand and agree that the Services are not covered under the unemployment compensation laws and are not intended to be covered by workers' compensation laws.
\r\n\r\n4.\tOwnership and Rights:
\r\n\r\n4.1\tYou hereby acknowledge and agree that We own, solely and exclusively, all right, title and interest, including all Intellectual Property Rights, in and to the TopCoder Information. In addition, You hereby irrevocably and unconditionally transfer and assign to Us all right, title and interest You had, have, may have or acquire in or to all Developments and Software Components, and You agree to execute and deliver such documents, certificates, assignments and other writings, and take such other actions as may be necessary or desirable to vest in Us the ownership rights granted to Us hereunder.
\r\n\r\n4.2\tYou further agree that any and all works of authorship created, authored or developed by You hereunder shall be deemed to be \"works made for hire\" within the meaning of the United States Copyright Law and, as such, all rights therein including copyright shall belong solely and exclusively to Us from the time of their creation. To the extent any such work of authorship may not be deemed to be a work made for hire, You agree to, and do hereby, irrevocably and unconditionally transfer and assign to Us all right, title and interest including copyright in and to such work.
\r\n\r\n4.3\tYou agree that if We are unable, because of your unavailability, or for any other reason, to secure your signature to apply for or to pursue any application for any United States or foreign patents, mask work, copyright or trademark registrations covering the assignments to Us above, then You hereby irrevocably designates and appoints Us and your duly authorized officers and agents as your agent and attorney in fact, to act for and in your behalf and stead to execute and file any such applications and to do all other lawfully permitted acts to further the prosecution and issuance of patents, copyright, mask work and trademark registrations thereon with the same legal force and effect as if executed by your authorized agent.
\r\n\r\n4.4\tAll Intellectual Property Rights owned by a party as of the date You agree to these Terms shall remain the property of such party and no licenses or other rights with respect to such intellectual property are granted to the other party except as expressly set forth herein.
\r\n\r\n4.5\tNothing in these terms shall be construed as granting You any right or license under any of our Intellectual Property Right (including any rights We may have in any patents, copyrights, trademarks, service marks or any trade secrets), by implication, estoppel or otherwise, except as expressly set forth herein.
\r\n\r\n5.\tConfidential Information:
\r\n\r\n5.1\t\"Confidential Information\" shall mean any information, in whatever form, provided by Us to You with obligation of confidentiality, or designated by Us in writing as confidential, proprietary or marked with words of like import when provided to You, and information orally conveyed if We state at the time of oral conveyance or promptly thereafter that such information is confidential. Notwithstanding anything to the contrary contained herein, information about or relating to our software, our system interfaces, our hardware and software architecture, our business, operational and marketing plans, our member lists and database, all information and technology provided by Us to You to enable You to perform your obligations hereunder, TopCoder Information, and any and all Developments shall be considered Confidential Information.
\r\n\r\n5.2\tConfidential Information shall not include information which (a) was in your possession without confidentiality restriction prior to disclosure by Us hereunder; (b) at or after the time of disclosure by Us becomes generally available to the public through no act or omission on our part; (c) is developed by You independently of and without reference to any Confidential Information You receive from Us; or (d) has come into your possession without confidentiality restriction from a third party and such third party is under no obligation to Us to maintain the confidentiality of such information.
\r\n\r\n5.3\tYou acknowledge the confidential and proprietary nature of Confidential Information and agree (i) to hold Confidential Information in confidence and to take all reasonable precautions to protect such Confidential Information (including, without limitation, all precautions You employ with respect to your own confidential materials), (ii) not to divulge any such Confidential Information to any third person; and (iii) not to make any use whatsoever of such Confidential Information except as expressly authorized herein.
\r\n\r\n5.4\tIn the event You are ordered to disclose Confidential Information pursuant to a judicial or government request, requirement or order, You shall promptly notify Us and upon our request, You shall, at our expense, take reasonable steps to assist Us in contesting such request, requirement or order or in otherwise protecting our rights prior to disclosure.
\r\n\r\n5.5\tYou agree not to reproduce or copy by any means Confidential Information, except as reasonably required to perform the Services. Upon termination of your performance of the Services as a review board member, your right to use Confidential Information shall immediately terminate. In addition, upon such termination, or upon demand by Us at any time, You shall return promptly to Us or destroy, at our option, all tangible materials and computer data that disclose or embody Confidential Information.
\r\n\r\n5.6\tYou agree that any breach of these terms by You could cause irreparable damage to Us. In view of the difficulties of placing a monetary value on the Confidential Information, We shall have, in addition to any and all remedies of law, the right to an injunction or other equitable relief, and may be entitled to a preliminary and final injunction without the necessity of posting any bond or undertaking in connection therewith to prevent any further breach or further unauthorized use of Confidential Information. This remedy is separate from any other remedy We may have.
\r\n\r\n6.\tRepresentations and Warranties:
\r\n\r\n6.1\tYou represent and warrant that:\r\n
- \r\n
- (a) You are at least 18 years old; \r\n
- (b) You are either (i) a U.S. citizen, (ii) a lawful permanent resident of the U.S., (iii) currently residing in the U.S. with proper and valid work authorization to work as an independent contractor, or (iv) a non-U.S. citizen, not living in the U.S. and performing the Services while residing in your country of residence; \r\n
- (c)\tYou are legally able and have the power and authority to execute, deliver and perform the Services and any other agreements contemplated hereby and to consummate the transactions contemplated hereby; \r\n
- (d)\tNo impediment exists to You agreeing to these Terms, and no other agreement has been or shall be made with any third party which will interfere with its performance; \r\n
- (e)\tYou shall use Your own independently developed code, and shall not copy or include code from any other party, including publicly available \"Open Source\" code that is or may be subject to licensing restrictions, without our prior written permission; and \r\n
- (f)\tAny services performed by You as a review board member shall be performed in a professional and workmanlike manner. \r\n
7.\tIntellectual Property Indemnification:
\r\n\r\n7.1\tYou shall indemnify, hold harmless and defend Us and our customers from and against any and all suits, actions, damages, costs, losses, expenses (including settlement awards and reasonable attorneys' fees) and other liabilities arising from or in connection with any claim alleging that, to your knowledge, any Development and/or Software Component violates any trade secret right, or infringes any copyright, patent, trademark, or other intellectual property interest, in any country, and shall pay all costs and damages awarded. We shall promptly notify You of any such claim of which We are aware.
\r\n\r\n7.2\tYour obligations shall not extend to any claim for violation or infringement resulting solely from your compliance with any specific or direct written instructions from Us if such infringement would have been avoided but for such compliance.
\r\n\r\n8.\tIndependent Contractors:
\r\n\r\n8.1\tBoth parties expressly agree and understand that You are an independent contractor and nothing herein nor the services rendered hereunder is meant, or shall be construed in any way or manner, to create a relationship of employer and employee, principal and agent, partners or any other relationship other than that of independent parties contracting with each other solely for the purpose of carrying out the provisions of these Terms. Accordingly, You acknowledge and agree that You shall not be entitled to any benefits provided by Us to our employees. You shall be responsible for any and all out-of-pocket expenses incurred in connection with performing the Services. In addition, You shall have sole and exclusive responsibility for the payment of all federal, state and local income taxes, for all employment and disability insurance and for Social Security and other similar taxes with respect to any compensation provided by Us hereunder. You further agree that if We pay or become liable for such taxes or related civil penalties or interest as a result of your failure to pay taxes or report same, or due to our failure to withhold taxes, You shall indemnify and hold us harmless for any such liability. You shall assume and accept all responsibilities which are imposed on independent contractors by any statute, regulation, rule of law, or otherwise. You are not our agent and are not authorized and shall not have the power or authority to bind Us or incur any liability or obligation, or act on behalf of Us. At no time shall You represent that You are our agent, or that any of the views, advice, statements and/or information that may be provided while performing the Services are ours.
\r\n\r\n8.2\tWe are entitled to provide You with general guidance to assist You in completing the scope of work to our satisfaction, You are ultimately responsible for directing and controlling the performance of the task and the scope of work, in accordance with these Terms. You shall use your best efforts, energy and skill in your own name and in such manner as You see fit.
", + "agreeabilityType": "Electronically-agreeable", + "serverInformation": { + "serverName": "Topcoder API", + "apiVersion": "0.0.1", + "requestDuration": 52, + "currentTime": 1504892902498 + }, + "requesterInformation": { + "id": "d8c441f8332161f71533f368c09aeead856e4366-K1RdFai7LCAgXVu5", + "remoteIP": "12.34.56.78", + "receivedParams": { + "apiVersion": "v2", + "termsOfUseId": "21193", + "action": "getTermsOfUse" + } + } +} diff --git a/src/apps/earn/src/services/__mocks__/data/terms-reviewer.json b/src/apps/earn/src/services/__mocks__/data/terms-reviewer.json new file mode 100644 index 000000000..744297d8a --- /dev/null +++ b/src/apps/earn/src/services/__mocks__/data/terms-reviewer.json @@ -0,0 +1,36 @@ +{ + "terms": [ + { + "termsOfUseId": 21153, + "title": "Appirio NDA v2.0", + "url": "http://community.topcoder.com/tc?module=Terms&tuid=21153", + "agreeabilityType": "DocuSignable", + "agreed": false, + "templateId": "fake-template-id" + }, + { + "termsOfUseId": 20704, + "title": "Standard Reviewer Terms v1.0", + "url": "", + "agreeabilityType": "Electronically-agreeable", + "agreed": false, + "templateId": null + } + ], + "serverInformation": { + "serverName": "Topcoder API", + "apiVersion": "0.0.1", + "requestDuration": 29, + "currentTime": 1504878884618 + }, + "requesterInformation": { + "id": "1b37607c519c318194ce6da08c519c0a3f7c9855-7FSFCyd6oSX2mV6Z", + "remoteIP": "12.34.567.890", + "receivedParams": { + "role": "Submitter", + "apiVersion": "v2", + "challengeId": "30059255", + "action": "getChallengeTerms" + } + } +} diff --git a/src/apps/earn/src/services/__mocks__/data/terms-topcoder-details.json b/src/apps/earn/src/services/__mocks__/data/terms-topcoder-details.json new file mode 100644 index 000000000..5cc72e1f9 --- /dev/null +++ b/src/apps/earn/src/services/__mocks__/data/terms-topcoder-details.json @@ -0,0 +1,23 @@ +{ + "termsOfUseId": 21193, + "title": "Standard Terms for Topcoder Competitions v2.1", + "url": "", + "agreeabilityType": "Electronically-agreeable", + "text": "\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\nRepeat infringers will be blocked from accessing the topcoder Website. \r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n",
+ "agreed": false,
+ "serverInformation": {
+ "serverName": "Topcoder API",
+ "apiVersion": "0.0.1",
+ "requestDuration": 52,
+ "currentTime": 1504892902498
+ },
+ "requesterInformation": {
+ "id": "d8c441f8332161f71533f368c09aeead856e4366-K1RdFai7LCAgXVu5",
+ "remoteIP": "12.34.56.78",
+ "receivedParams": {
+ "apiVersion": "v2",
+ "termsOfUseId": "21193",
+ "action": "getTermsOfUse"
+ }
+ }
+}
diff --git a/src/apps/earn/src/services/__mocks__/groups.js b/src/apps/earn/src/services/__mocks__/groups.js
new file mode 100644
index 000000000..8c049eea8
--- /dev/null
+++ b/src/apps/earn/src/services/__mocks__/groups.js
@@ -0,0 +1,298 @@
+/**
+ * Service for communication with group-related part of Topcoder API.
+ *
+ * NOTE: Through this file, and in related contexts, by loading a user group,
+ * or user groups data, we refer to loading the information about descendant
+ * user groups; i.e. given some user group(s) we speak about loading the sub-
+ * three of related child groups.
+ *
+ * By group maps we refer to the object having group IDs as the keys, and
+ * group data objects as the values. Any group object included into a group map
+ * has its "subGroups" array (if present) replaced by "subGroupIds", that lists
+ * only the IDs of immediate child groups; actual child group objects from
+ * "subGroups" are recursively added to the top level of the group map.
+ * Also each group in the group map is timestamped to keep caching of
+ * the loaded data.
+ */
+
+import _ from "lodash";
+
+import config from "../../config";
+import logger from "../../utils/logger";
+
+import { getApi } from "./api";
+
+/* The value of USER_GROUP_MAXAGE constant converted to [ms]. */
+const USER_GROUP_MAXAGE = config.USER_GROUP_MAXAGE * 1000;
+
+/**
+ * Given an array of IDs (or a single ID) of user groups, and a map of known
+ * user groups, it returns the array including all specified user groups, and
+ * all their known descendant groups.
+ * @param {String|String[]} groupIds
+ * @param {Object} knownGroups
+ * @return {String[]}
+ */
+export function addDescendantGroups(groupIds, knownGroups) {
+ let res = _.isArray(groupIds) ? groupIds : [groupIds];
+ const visitedGroupsIds = new Set();
+ let pos = 0;
+ while (pos < res.length) {
+ const id = res[pos];
+ if (!visitedGroupsIds.has(id)) {
+ visitedGroupsIds.add(id);
+ const g = knownGroups[id];
+ if (g && g.subGroupIds) res = res.concat(g.subGroupIds);
+ }
+ pos += 1;
+ }
+ return _.uniq(res);
+}
+
+/**
+ * Splits the given list of group IDs into the lists of groups being loaded,
+ * loaded, and others.
+ * @param {String|String[]} groupIds ID, or an array of IDs, of the group(s) we
+ * are interested in.
+ * @param {Object} knownGroups Optional. The map of already known groups (some
+ * of them may be outdated, though). This should be of the same format as the
+ * object on "groups.groups" path of the Redux store. Defaults to empty object.
+ * @param {Object} loadingGroups Optional. Set of groups beign loaded now. This
+ * should be of the same format as the object on "groups.loading" path of the
+ * Redux store. Defaults to empty object.
+ * @return {Object} Resulting object may hold four arrays with group IDs from
+ * "groupIds" (empty arrays will not be included into the result object):
+ * - "loaded" - the groups that are present in "knownGroups" and are not
+ * outdated;
+ * - "loading" - the groups that are not present in "knownGroups" (or present,
+ * but outdated); but they are already being loaded;
+ * - "missing" - the groups that are not present in "knownGroups"
+ * (or outdated), and are not being loaded.
+ * - "unknown" - the groups that are absent in "knownGroups" map.
+ */
+export function checkGroupsStatus(
+ groupIds,
+ knownGroups = {},
+ loadingGroups = {}
+) {
+ const loaded = [];
+ const loading = [];
+ const missing = [];
+ const unknown = [];
+ const now = Date.now();
+ const tested = new Set();
+ const ids = _.isArray(groupIds) ? groupIds : [groupIds];
+ ids.forEach((id) => {
+ if (tested.has(id)) return;
+ tested.add(id);
+ const g = knownGroups[id];
+ if (!g) unknown.push(id);
+ if (g && (now - g.timestamp || 0) < USER_GROUP_MAXAGE) loaded.push(id);
+ else if (loadingGroups[id]) loading.push(id);
+ else missing.push(id);
+ });
+ return {
+ loaded: loaded.length ? loaded : null,
+ loading: loading.length ? loading : null,
+ missing: missing.length ? missing : null,
+ unknown: unknown.length ? unknown : null,
+ };
+}
+
+/**
+ * Returns "true" if "userGroups" arrays includes any group specified by
+ * "groupIds", or any group descendant from a group specified by "groupIds".
+ * The is the map of known groups
+ * @param {String|String[]} groupIds
+ * @param {Object[]|String[]} userGroups Array of user's groups or their IDs.
+ * @param {Object} knownGroups Map of known groups.
+ * @return {Boolean}
+ */
+export function checkUserGroups(groupIds, userGroups, knownGroups) {
+ const queue = _.isArray(groupIds) ? groupIds : [groupIds];
+ if (!queue.length) return true;
+ if (!userGroups.length) return false;
+
+ /* Algorithmically, "knownGroups" stores, in compressed form, data on
+ * known trees of user groups; and we want to check whether any of groups
+ * from "userGroups" belong to sub-trees having groups from "groupIds" as
+ * their roots. So, we do a breadth-frist search through the group trees. */
+ const userGroupIds = new Set();
+ const visitedGroupIds = new Set();
+ userGroups.forEach((g) => userGroupIds.add(_.isObject(g) ? g.id : g));
+ let pos = 0;
+ while (pos < queue.length) {
+ const id = queue[pos];
+ if (userGroupIds.has(id)) return true;
+ visitedGroupIds.add(id);
+ const g = knownGroups[id];
+ if (g && g.subGroupIds) {
+ g.subGroupIds.forEach((sgId) =>
+ !visitedGroupIds.has(sgId) ? queue.push(sgId) : null
+ );
+ }
+ pos += 1;
+ }
+ return false;
+}
+
+/**
+ * Private. Handles given response from the groups API.
+ * @param {Object} response
+ * @return {Promise} On success resolves to the data fetched from the API.
+ */
+function handleApiResponse(response) {
+ if (!response.ok) throw new Error(response.statusText);
+ return response.json().then(({ result }) => {
+ if (result.status !== 200) throw new Error(result.content);
+ return result.content;
+ });
+}
+
+/**
+ * Private. Merges given user group (possibly a tree of user groups) into
+ * groups map. This function intended only for internal use inside this module,
+ * as it may mutate both arguments (hence, the corresponding ESLint rule is
+ * disabled within this function), thus should be used only where it is safe.
+ * For external use a similar function is provided by "../../utils/tc" module.
+ * @param {Object} groups
+ * @param {Object} group
+ */
+function mergeGroup(groups, group) {
+ /* eslint-disable no-param-reassign */
+ const sg = group.subGroups;
+ group.timestamp = Date.now();
+ if (sg && sg.length) {
+ group.subGroupIds = sg.map((g) => g.id);
+ sg.forEach((g) => mergeGroup(groups, g));
+ }
+ delete group.subGroups;
+ groups[group.id] = group;
+ /* eslint-enable no-param-reassign */
+}
+
+class GroupService {
+ /**
+ * @param {String} tokenV3 Optional. Auth token for Topcoder API v3.
+ */
+ constructor(tokenV3) {
+ this.private = {
+ api: getApi("V3", tokenV3),
+ tokenV3,
+ };
+ }
+
+ /**
+ * Adds new member to the group.
+ * @param {String} groupId
+ * @param {String} memberId
+ * @param {String} membershipType
+ * @return {Promise}
+ */
+ addMember(groupId, memberId, membershipType) {
+ return this.private.api
+ .postJson(`/groups/${groupId}/members`, {
+ param: { memberId, membershipType },
+ })
+ .then(handleApiResponse);
+ }
+
+ /**
+ * Gets detailed information about the group.
+ *
+ * Notice, when "withSubGroups" argument is true (default) this method returns
+ * a tree of group data objects, connected via their "subGroups" fields.
+ * getMap(..) method below wraps this functionality in a more practical way!
+ *
+ * @param {String} groupId
+ * @param {Boolean} withSubGroups Optional. Defaults to true. Specifies,
+ * whether the response should information about sub-groups, if any.
+ * @return {Promise} On success resolves to the group data object.
+ */
+ getGroup(groupId, withSubGroups = true) {
+ let url = `/groups/${groupId}`;
+ if (withSubGroups) {
+ url = `${url}/getSubGroups?includeSubGroups=true&oneLevel=false`;
+ }
+ return this.private.api.get(url).then(handleApiResponse);
+ }
+
+ /**
+ * Gets detailed information about the specified user group(s) and their
+ * descendant sub-groups.
+ *
+ * @param {String|String[]} groupIds Group ID, or an array of group IDs,
+ * to query from Topcoder API.
+ * @return {Promise} Resolves to the group map. That object will have group
+ * IDs as the keys, and corresponding group data objects as the values. In
+ * each group data object the "subGroups" field, if any, will be replaced by
+ * "subGroupIds" (array of IDs of the immediate child groups), and the actual
+ * data on the sub-groups will be moved to the root of the map object.
+ * It also timestamps each fetched group.
+ */
+ getGroupMap(groupIds) {
+ const res = {};
+ const seen = new Set();
+ const query = _.isArray(groupIds) ? groupIds : [groupIds];
+ const promises = query.map((id) => {
+ if (seen.has(id)) return null;
+ seen.add(id);
+ return this.getGroup(id)
+ .then((group) => mergeGroup(res, group))
+ .catch((err) => {
+ /* In case we have failed to get some of the requested groups,
+ * we just send error message to logs, and serve the result with
+ * those groups that we managed to get. Otherwise it will be to
+ * easy to break our code by minor mistakes in the group-related
+ * configuration in the API and in the App. */
+ logger.error(`Failed to get user group #${id}`, err);
+
+ /* Empty group with timestamp is added to the result, as we still
+ * want to cache the result, even if the result is that we cannot
+ * load this group, at least for this visitor. */
+ res[id] = { id, timestamp: Date.now() };
+ });
+ });
+ return Promise.all(promises).then(() => res);
+ }
+
+ /**
+ * Gets group members.
+ * @param {String} groupId
+ * @return {Promise} On sucess resolves to the array of member objects,
+ * which include user IDs, membership time, and some bookkeeping data.
+ */
+ getMembers(groupId) {
+ return this.private.api
+ .get(`/groups/${groupId}/members`)
+ .then(handleApiResponse);
+ }
+
+ /**
+ * Gets the number of members in the group.
+ * @param {Number|String} groupId ID of the group.
+ * @param {Boolean} withSubGroups Optional. When this flag is set, the count
+ * will include members of sub-groups of the specified group.
+ * @return {Promise} Resolves to the members count.
+ */
+ async getMembersCount(groupId, withSubGroups) {
+ _.noop(this);
+ return withSubGroups ? 500 : 100;
+ }
+}
+
+/**
+ * Returns a new or existing instance of challenge service, which works with
+ * the specified auth token.
+ * @param {String} tokenV3 Optional. Topcoder API v3 auth token.
+ * @return {GroupService} Instance of the service.
+ */
+let lastInstance = null;
+export function getService(tokenV3) {
+ if (!lastInstance || tokenV3 !== lastInstance.private.tokenV3) {
+ lastInstance = new GroupService(tokenV3);
+ }
+ return lastInstance;
+}
+
+export default undefined;
diff --git a/src/apps/earn/src/services/__mocks__/terms.js b/src/apps/earn/src/services/__mocks__/terms.js
new file mode 100644
index 000000000..709591855
--- /dev/null
+++ b/src/apps/earn/src/services/__mocks__/terms.js
@@ -0,0 +1,172 @@
+/**
+ * Mock version of Terms service. To be used both for Jest testing, and for
+ * manual testing inside the app (see MOCK_TERMS_SERVICE constant
+ * in the app config).
+ *
+ * NOTE: At the moment this mock does not care much about authorization
+ * (i.e. the presence of auth token), as the real backend api acts a bit
+ * surprising and non-intuitive at the moment, so it is a bit difficult
+ * to imitate it exactly.
+ */
+
+import _ from "lodash";
+
+import termsAuth from "./data/terms-auth.json";
+import termsDocuSignDetails from "./data/terms-docu-sign-details.json";
+import termsNoAuth from "./data/terms-noauth.json";
+import termsReviewer from "./data/terms-reviewer.json";
+import termsReviewerDetails from "./data/terms-reviewer-details.json";
+import termsTopcoderDetails from "./data/terms-topcoder-details.json";
+
+let reviewTermsAgreed = false;
+
+class TermsService {
+ /**
+ * @param {String} tokenV2 Optional. Auth token for Topcoder API v2.
+ */
+ constructor(tokenV2) {
+ this.private = {
+ tokenV2,
+ };
+ }
+
+ /**
+ * Mock of getChallengeTerms(..) method.
+ * The second argument is optional. If present, it should be an array of
+ * boolean values, and it will override acceptance status of terms read
+ * from the JSON data file.
+ * @param {String} challengeId
+ * @param {Array} agreed Optional.
+ */
+ getChallengeTerms(challengeId, agreed) {
+ const res = _.clone(this.private.tokenV2 ? termsAuth : termsNoAuth);
+ res.serverInformation.currentTime = Date.now();
+ res.requesterInformation.receivedParams.challengeId = _.toString(
+ challengeId
+ );
+ if (this.private.tokenV2 && _.isArray(agreed)) {
+ for (let i = 0; i < Math.min(agreed.length, res.terms.length); i += 1) {
+ res.terms[i].agreed = agreed[i];
+ }
+ }
+ return Promise.resolve(res);
+ }
+
+ /**
+ * Mock of getCommunityTerms(..) method.
+ *
+ * @param {String} communityId community id
+ * @param {String} tokenV3 auth token V3
+ * @param {Array} agreed Optional. If present, it should be an array of
+ * boolean values, and it will override acceptance
+ * status of terms read from the JSON data file.
+ *
+ * @return {Promise} resolves to the list of mocked terms
+ */
+ getCommunityTerms(challengeId, tokenV3, agreed) {
+ const res = _.clone(this.private.tokenV2 ? termsAuth : termsNoAuth);
+ res.serverInformation.currentTime = Date.now();
+ if (this.private.tokenV2 && _.isArray(agreed)) {
+ for (let i = 0; i < Math.min(agreed.length, res.terms.length); i += 1) {
+ res.terms[i].agreed = agreed[i];
+ delete res.terms[i].text;
+ }
+ }
+ return Promise.resolve(res);
+ }
+
+ /**
+ * Mock of getReviewOpportunityTerms(..) method.
+ */
+ /* eslint-disable class-methods-use-this */
+ getReviewOpportunityTerms() {
+ const res = _.clone(termsReviewer);
+ res.terms[0].agreed = reviewTermsAgreed;
+ res.terms[1].agreed = reviewTermsAgreed;
+ return Promise.resolve(res);
+ }
+ /* eslint-enable class-methods-use-this */
+
+ /**
+ * Mock of getTermDetails(..) method.
+ * In the case of Topcoder challenge terms there is "agreed" field in the
+ * response. If the second argument is passed into this method, it will
+ * override the value of this field from JSON file with mock data.
+ * @param {Number} termId
+ * @param {Boolean} agreed Optional.
+ */
+ getTermDetails(termId, agreed) {
+ _.noop(this);
+ let res;
+ switch (termId) {
+ case 20704:
+ // eslint-disable-next-line
+ agreed = reviewTermsAgreed;
+ res = _.clone(termsReviewerDetails);
+ break;
+ case 21153:
+ // eslint-disable-next-line
+ if (reviewTermsAgreed) agreed = reviewTermsAgreed;
+ res = _.clone(termsDocuSignDetails);
+ break;
+ case 21193:
+ case 21194:
+ res = _.clone(termsTopcoderDetails);
+ break;
+ default:
+ throw new Error(`Unknown termId '${termId}'!`);
+ }
+ if (!_.isUndefined(agreed)) res.agreed = agreed;
+ res.serverInformation.currentTime = Date.now();
+ res.termsOfUseId = termId;
+ res.requesterInformation.receivedParams.termsOfUseId = _.toString(termId);
+ return Promise.resolve(res);
+ }
+
+ getDocuSignUrl(templateId, returnUrl) {
+ _.noop(this);
+
+ /* TODO: It has not been tracked explicitely, what is the response of
+ * the real api here. It sure contains "recipientViewUrl", and this is
+ * the only thing we need for our purposes now. However, it might also
+ * have another useful datafields. This should be explored. */
+ return Promise.resolve({
+ recipientViewUrl: `/community-app-assets/api/mock/docu-sign?returnUrl=${returnUrl}`,
+ });
+ }
+
+ agreeTerm(termId) {
+ _.noop(termId, this);
+
+ if (termId === 20704) {
+ reviewTermsAgreed = true;
+ }
+
+ /* TODO: It has not been tracked explicitely, what is the response of
+ * the real api here. It sure contains "success" field, and this is
+ * the only thing we need for our purposes now. However, it might also
+ * have another useful datafields. This should be explored. */
+ return Promise.resolve({ success: true });
+ }
+}
+
+/**
+ * Returns a new or existing terms service.
+ * @param {String} tokenV3 Optional. Auth token for Topcoder API v3.
+ * @return {Object} Terms service object
+ */
+let lastInstance = null;
+export function getService(tokenV2) {
+ /* eslint-disable no-console */
+ console.error(`WARNING:
+ Mock version of DocuSign service is used! Should you see this message in
+ production, contact support as soon as possible!`);
+ /* eslint-enable no-console */
+ if (!lastInstance || (tokenV2 && lastInstance.private.tokenV2 !== tokenV2)) {
+ lastInstance = new TermsService(tokenV2);
+ }
+ return lastInstance;
+}
+
+/* Using default export would be confusing in this case. */
+export default undefined;
diff --git a/src/apps/earn/src/services/api.js b/src/apps/earn/src/services/api.js
new file mode 100644
index 000000000..17aa0e217
--- /dev/null
+++ b/src/apps/earn/src/services/api.js
@@ -0,0 +1,125 @@
+import _, { keys } from "lodash";
+
+import { EnvironmentConfig } from "~/config";
+
+import { getAuthUserTokens } from "../utils/auth";
+import * as utils from "../utils";
+
+
+async function doFetch(endpoint, options = {}, v3, baseUrl) {
+ const headers = options.headers ? { ...options.headers } : {};
+ const token = await getAuthUserTokens();
+ let url;
+ if (baseUrl) {
+ url = baseUrl;
+ } else if (v3) {
+ url = EnvironmentConfig.API.V3;
+ } else {
+ url = EnvironmentConfig.API.V5;
+ }
+
+ if (token) {
+ headers.Authorization = `Bearer ${token.tokenV3}`;
+ }
+
+ return fetch(`${url}${endpoint}`, {
+ ...options,
+ headers,
+ });
+}
+
+async function download(endpoint, baseUrl, cancellationSignal) {
+ const options = {
+ headers: { ["Content-Type"]: "application/json" },
+ signal: cancellationSignal,
+ };
+ const response = await doFetch(endpoint, options, undefined, baseUrl);
+
+ return response;
+}
+
+async function get(endpoint, baseUrl, cancellationSignal) {
+ const options = {
+ headers: { ["Content-Type"]: "application/json" },
+ signal: cancellationSignal,
+ };
+ const response = await doFetch(endpoint, options, undefined, baseUrl);
+ const meta = utils.pagination.getResponseHeaders(response);
+ const result = await response.json();
+ // only add pagination info if any field is filled
+ if (keys(meta).some((key) => meta[key] !== 0)) result.meta = meta;
+
+ return result;
+}
+
+async function post(endpoint, body, baseUrl) {
+ const response = await doFetch(
+ endpoint,
+ {
+ body,
+ method: "POST",
+ },
+ undefined,
+ baseUrl
+ );
+ // not all responses are json (example http code: 204), so returning just the response.
+ return response;
+}
+
+async function put(endpoint, body) {
+ const response = await doFetch(endpoint, {
+ body,
+ method: "PUT",
+ });
+ return response.json();
+}
+
+async function patch(endpoint, body) {
+ const response = await doFetch(endpoint, {
+ body,
+ method: "PATCH",
+ });
+ return response.json();
+}
+
+/**
+ * Upload with progress
+ * @param {String} endpoint
+ * @param {Object} body and headers
+ * @param {Function} onProgress handler for update progress only works for client side for now
+ * @return {Promise}
+ */
+async function upload(endpoint, options, onProgress) {
+ const base = EnvironmentConfig.API.V5;
+ const { tokenV3 } = await getAuthUserTokens();
+ const headers = options.headers ? _.clone(options.headers) : {};
+ if (tokenV3) headers.Authorization = `Bearer ${tokenV3}`;
+
+ return new Promise((res, rej) => {
+ const xhr = new XMLHttpRequest(); //eslint-disable-line
+ xhr.open(options.method, `${base}${endpoint}`);
+ Object.keys(headers).forEach((key) => {
+ if (headers[key] != null) {
+ xhr.setRequestHeader(key, headers[key]);
+ }
+ });
+ xhr.onload = (e) => res(e.target.responseText);
+ xhr.onerror = rej;
+ if (xhr.upload && onProgress) {
+ xhr.upload.onprogress = (evt) => {
+ if (evt.lengthComputable) onProgress(evt.loaded / evt.total);
+ };
+ }
+ xhr.send(options.body);
+ });
+}
+
+export default {
+ doFetch,
+ get,
+ post,
+ put,
+ patch,
+ upload,
+ download,
+};
diff --git a/src/apps/earn/src/services/auth.js b/src/apps/earn/src/services/auth.js
new file mode 100644
index 000000000..acba2411c
--- /dev/null
+++ b/src/apps/earn/src/services/auth.js
@@ -0,0 +1,21 @@
+import cookies from "browser-cookies";
+
+import { tokenGetAsync } from "~/libs/core";
+
+import store from '../store';
+import actions from '../actions';
+
+export const initAuth = async () => {
+ const { auth } = store.getState();
+ const { token: tokenV3 } = await tokenGetAsync();
+ const tokenV2 = cookies.get("tcjwt");
+
+ if (!auth.isInitialized) {
+ store.dispatch(actions.auth.loadProfile(tokenV3 || null));
+ store.dispatch(actions.auth.setTcTokenV3(tokenV3));
+ store.dispatch(actions.auth.setTcTokenV2(tokenV2));
+ store.dispatch(actions.auth.setAuthDone());
+ }
+
+ return { tokenV3, tokenV2 };
+}
diff --git a/src/apps/earn/src/services/challenge-api.js b/src/apps/earn/src/services/challenge-api.js
new file mode 100644
index 000000000..8acc81b91
--- /dev/null
+++ b/src/apps/earn/src/services/challenge-api.js
@@ -0,0 +1,255 @@
+/**
+ * @module "services.api"
+ * @desc This module provides a service for conventient access to Topcoder APIs.
+ */
+
+import _ from "lodash";
+import { EnvironmentConfig } from "~/config";
+
+import { delay } from "../utils/time";
+import { setErrorIcon, ERROR_ICON_TYPES } from "../utils/errors";
+
+/* The minimal delay [ms] between API calls. To avoid problems with the requests
+ * rate limits configured in Topcoder APIs, we throttle requests rate at the
+ * client side, and at server-side, in dev mode (which is meant to be used for
+ * local development. */
+const MIN_API_CALL_DELAY = process.env.APPMODE === "development" ? 1000 : 200;
+
+let lastApiCallTimestamp = Date.now();
+
+/**
+ * @static
+ * @member default
+ * @desc The default export from the module is
+ * {@link module:services.api~Api} class.
+ */
+
+/**
+ * API service object. It is reused for both Topcoder API v2 and v3,
+ * as in these cases we are fine with the same interface, and the only
+ * thing we need to be different is the base URL and auth token to use.
+ */
+class Api {
+ /**
+ * Creates a new Api object.
+ * @param {String} base Base URL of the API.
+ * @param {String} token Optional. Authorization token.
+ */
+ constructor(base, token) {
+ this.private = {
+ base,
+ token,
+ };
+ }
+
+ /**
+ * Sends HTTP request to the specified API endpoint. This method is just
+ * a convenient wrapper around isomorphic fetch(..):
+ *
+ * - If API service has auth token, Authorization header is automatically
+ * added to the request;
+ *
+ * - If no Content-Type header set in options, it is automatically set to
+ * "application/json". In case you want to avoid it, pass null into
+ * Content-Type header option.
+ *
+ * For additional details see https://github.github.io/fetch/
+ * @param {String} enpoint Should start with slash, like /endpoint.
+ * @param {Object} options Optional. Fetch options.
+ * @return {Promise} It resolves to the HTTP response object. To get the
+ * actual data you probably want to call .json() method of that object.
+ * Mind that this promise rejects only on network errors. In case of
+ * HTTP errors (404, etc.) the promise will be resolved successfully,
+ * and you should check .status or .ok fields of the response object
+ * to find out the response status.
+ */
+ async fetch(endpoint, options = {}) {
+ const { base, token } = this.private;
+ const headers = options.headers ? _.clone(options.headers) : {};
+ if (token) headers.Authorization = `Bearer ${token}`;
+
+ switch (headers["Content-Type"]) {
+ case null:
+ delete headers["Content-Type"];
+ break;
+ case undefined:
+ headers["Content-Type"] = "application/json";
+ break;
+ default:
+ }
+
+ const now = Date.now();
+ lastApiCallTimestamp += MIN_API_CALL_DELAY;
+ if (lastApiCallTimestamp > now) {
+ await delay(lastApiCallTimestamp - now);
+ } else lastApiCallTimestamp = now;
+
+ return fetch(`${base}${endpoint}`, {
+ ...options,
+ headers,
+ }).catch((e) => {
+ setErrorIcon(ERROR_ICON_TYPES.NETWORK, `${base}${endpoint}`, e.message);
+ throw e;
+ });
+ }
+
+ /**
+ * Sends DELETE request to the specified endpoint.
+ * @param {String} endpoint
+ * @param {Blob|BufferSource|FormData|String} body
+ * @return {Promise}
+ */
+ delete(endpoint, body) {
+ return this.fetch(endpoint, {
+ body,
+ method: "DELETE",
+ });
+ }
+
+ /**
+ * Sends GET request to the specified endpoint.
+ * @param {String} endpoint
+ * @return {Promise}
+ */
+ get(endpoint) {
+ return this.fetch(endpoint);
+ }
+
+ /**
+ * Sends POST request to the specified endpoint.
+ * @param {String} endpoint
+ * @param {Blob|BufferSource|FormData|String} body
+ * @return {Promise}
+ */
+ post(endpoint, body) {
+ return this.fetch(endpoint, {
+ body,
+ method: "POST",
+ });
+ }
+
+ /**
+ * Sends POST request to the specified endpoint, with JSON payload.
+ * @param {String} endpoint
+ * @param {JSON} json
+ * @return {Promise}
+ */
+ postJson(endpoint, json) {
+ return this.post(endpoint, JSON.stringify(json));
+ }
+
+ /**
+ * Sends PUT request to the specified endpoint.
+ * @param {String} endpoint
+ * @param {Blob|BufferSource|FormData|String} body
+ * @return {Promise}
+ */
+ put(endpoint, body) {
+ return this.fetch(endpoint, {
+ body,
+ method: "PUT",
+ });
+ }
+
+ /**
+ * Sends PUT request to the specified endpoint.
+ * @param {String} endpoint
+ * @param {JSON} json
+ * @return {Promise}
+ */
+ putJson(endpoint, json) {
+ return this.put(endpoint, JSON.stringify(json));
+ }
+
+ /**
+ * Sends PATCH request to the specified endpoint.
+ * @param {String} endpoint
+ * @param {Blob|BufferSource|FormData|String} body
+ * @return {Promise}
+ */
+ patch(endpoint, body) {
+ return this.fetch(endpoint, {
+ body,
+ method: "PATCH",
+ });
+ }
+
+ /**
+ * Sends PATCH request to the specified endpoint.
+ * @param {String} endpoint
+ * @param {JSON} json
+ * @return {Promise}
+ */
+ patchJson(endpoint, json) {
+ return this.patch(endpoint, JSON.stringify(json));
+ }
+
+ /**
+ * Upload with progress
+ * @param {String} endpoint
+ * @param {Object} body and headers
+ * @param {Function} callback handler for update progress only works for client side for now
+ * @return {Promise}
+ */
+ // upload(endpoint, options, onProgress) {
+ // const { base, token } = this.private;
+ // const headers = options.headers ? _.clone(options.headers) : {};
+ // if (token) headers.Authorization = `Bearer ${token}`;
+ // if (isomorphy.isClientSide()) {
+ // return new Promise((res, rej) => {
+ // const xhr = new XMLHttpRequest(); //eslint-disable-line
+ // xhr.open(options.method, `${base}${endpoint}`);
+ // Object.keys(headers).forEach((key) => {
+ // if (headers[key] != null) {
+ // xhr.setRequestHeader(key, headers[key]);
+ // }
+ // });
+ // xhr.onload = (e) => res(e.target.responseText);
+ // xhr.onerror = rej;
+ // if (xhr.upload && onProgress) {
+ // xhr.upload.onprogress = (evt) => {
+ // if (evt.lengthComputable) onProgress(evt.loaded / evt.total);
+ // };
+ // }
+ // xhr.send(options.body);
+ // });
+ // }
+ // return this.fetch(endpoint, options);
+ // }
+}
+
+export default Api;
+
+/*
+ * Topcoder API
+ */
+const lastApiInstances = {};
+
+/**
+ * Returns a new or existing Api object for Topcoder API.
+ * @param {String} version The API version.
+ * @param {String} token Optional. Auth token for Topcoder API.
+ * @return {Api} API service object.
+ */
+export function getApi(version, token) {
+ if (!version || !EnvironmentConfig.API[version]) {
+ throw new Error(`${version} is not a valid API version`);
+ }
+ if (
+ !lastApiInstances[version] ||
+ lastApiInstances[version].private.token !== token
+ ) {
+ lastApiInstances[version] = new Api(EnvironmentConfig.API[version], token);
+ }
+ return lastApiInstances[version];
+}
+
+/**
+ * Keep the old API factories for backwards compatibility
+ * DO NOT USE THEM FOR NEW IMPLEMENTATIONS.
+ * USE THE getApi(version, token) FACTORY.
+ */
+export const getApiV2 = (token) => getApi("V2", token);
+export const getApiV3 = (token) => getApi("V3", token);
+export const getApiV4 = (token) => getApi("V4", token);
+export const getApiV5 = (token) => getApi("V5", token);
diff --git a/src/apps/earn/src/services/challenge.js b/src/apps/earn/src/services/challenge.js
new file mode 100644
index 000000000..50d1603a9
--- /dev/null
+++ b/src/apps/earn/src/services/challenge.js
@@ -0,0 +1,117 @@
+import api from "./api";
+import { decodeToken, } from "tc-auth-lib";
+import qs from "qs";
+import _ from "lodash";
+import * as util from "../utils/api";
+import { getAuthUserTokens } from "../utils/auth";
+
+/**
+ * @internal
+ */
+async function getChallengeDetails(endpoint, legacyInfo) {
+ let query = "";
+ if (legacyInfo) {
+ query = `legacyId=${legacyInfo.legacyId}`;
+ }
+
+ const url = `${endpoint}?${query}`;
+ const result = await api.get(url).then(util.tryThrowError);
+
+ return {
+ challenge: legacyInfo ? result[0] : result,
+ };
+}
+
+/**
+ * Gets challenge registrants from Topcoder API.
+ * @param {Number|String} challengeId
+ * @return {Promise} Resolves to the challenge registrants array.
+ * @internal
+ */
+async function getChallengeRegistrants(challengeId) {
+ /* If no token provided, resource will return Submitter role only */
+ const roleId = (await isLoggedIn())
+ ? await getRoleId("Submitter")
+ : undefined;
+ const params = {
+ challengeId,
+ roleId,
+ };
+
+ let registrants = await api
+ .get(`/resources?${qs.stringify(params)}`)
+ .then(util.tryThrowError);
+
+ /* API will return all roles to currentUser, so need to filter in FE */
+ if (roleId) {
+ registrants = _.filter(registrants, (r) => r.roleId === roleId);
+ }
+
+ return registrants || [];
+}
+
+/**
+ * @internal
+ */
+async function isLoggedIn() {
+ const { tokenV3 } = await getAuthUserTokens();
+ return !!tokenV3;
+}
+
+/**
+ * Get the Resource Role ID from provided Role Name
+ * @param {String} roleName
+ * @return {Promise}
+ * @internal
+ */
+async function getRoleId(roleName) {
+ const params = {
+ name: roleName,
+ isActive: true,
+ };
+ const roles = await api
+ .get(`/resource-roles?${qs.stringify(params)}`)
+ .then(util.tryThrowError);
+
+ if (_.isEmpty(roles)) {
+ throw new Error("Resource Role not found!");
+ }
+
+ return roles[0].id;
+}
+
+async function getChallenge(challengeId) {
+ let challenge = {};
+ let isLegacyChallenge = false;
+ let isRegistered = false;
+ let registrants = [];
+ const { tokenV3 } = await getAuthUserTokens();
+ const memberId = tokenV3 ? decodeToken(tokenV3).userId : null;
+ alert("In service getChallenge");
+ if (/^[\d]{5,8}$/.test(challengeId)) {
+ isLegacyChallenge = true;
+ challenge = await getChallengeDetails("/challenges/", {
+ legacyId: challengeId,
+ }).then((res) => res.challenge);
+ } else {
+ challenge = await getChallengeDetails(`/challenges/${challengeId}`).then(
+ (res) => res.challenge
+ );
+ }
+
+ if (challenge) {
+ registrants = await getChallengeRegistrants(challenge.id);
+ isRegistered =
+ memberId && _.some(registrants, (r) => `${r.memberId}` === `${memberId}`);
+ }
+
+ return {
+ ...challenge,
+ isRegistered,
+ };
+}
+
+export default {
+ getChallenge,
+ getChallengeRegistrants,
+};
diff --git a/src/apps/earn/src/services/challenges.js b/src/apps/earn/src/services/challenges.js
new file mode 100644
index 000000000..b7e5f2ba0
--- /dev/null
+++ b/src/apps/earn/src/services/challenges.js
@@ -0,0 +1,898 @@
+/**
+ * @module "services.challenges"
+ * @desc This module provides a service for convenient manipulation with
+ * Topcoder challenges via TC API.
+ */
+
+import _ from "lodash";
+import moment from "moment";
+import qs from "qs";
+
+import { EnvironmentConfig } from "~/config";
+
+import api from "./api";
+import { buildQueryString } from "../utils/url";
+import { decodeToken } from "../utils/token";
+import logger from "../utils/logger";
+import { setErrorIcon, ERROR_ICON_TYPES } from "../utils/errors";
+import { COMPETITION_TRACKS, getApiResponsePayload } from "../utils/tc";
+
+import { getApi } from "./lib/api";
+import { getService as getMembersService } from "./members";
+import { getService as getSubmissionsService } from "./submissions";
+
+/**
+ * Search challenges
+ *
+ * @return {ArrayTerms & Conditions of Use at topcoder
\r\n\r\nAcceptance of Terms and Conditions
\r\n\r\nWelcome to topcoder.com (and related sub-domains (the \"Website\"). By using the Website, you are indicating your agreement to these Terms and Conditions of Use (\"Terms of Use\"), including, without limitation, our privacy policy. If you do not agree to these Terms of Use, please do not use the Website and exit now. \r\n\r\n\r\nThroughout these Terms of Use, the words \"we,\" \"us,\" \"our,\" and topcoder refer to Topcoder, Inc., Appirio Inc. and their parents, subsidiaries and affiliates collectively. The term \"Submissions\" shall refer to any entry, component of an entry, or contents of a posting onto the Website submitted in connection with Competitions. \"Competitions\" shall refer to challenges, matches, tournaments or other competitions that take place on the Website or in connection with the topcoder Open (\"TCO\"). You and any other user of this Website that enters any Submissions with respect to Competitions shall be referred to herein as a \"Contestant\" in such capacity.\r\n\r\n\r\n\r\nWe may revise these Terms of Use at any time without prior notice by updating this page and such revisions will be effective upon posting to this page. Please check this page periodically for any changes. Your continued use of this Website following the posting of any revisions to these Terms of Use will mean you accept those changes. We reserve the right to alter, suspend or discontinue any aspect of www.topcoder.com, including your access to it. Unless explicitly stated, any new features will be subject to these Terms of Use. \r\n\r\n\r\nGeneral Eligibility
\r\nOur Website is not intended for use by children under the age of 13. You must have your parents\" permission to use this Website if you have not reached the age of majority in your jurisdiction of primary residence and citizenship. You must be at least 18 years old and have reached the age of majority in your jurisdiction of primary residence and citizenship to participate in any Competitions. \r\n\r\n\r\nUnless otherwise stated in the rules of a Competition, you are not eligible to participate in such Competition if you are a resident of the Quebec province of Canada, Iran, Cuba, North Korea, Crimea Region of Ukraine, Sudan or Syria. In addition, you are not eligible to participate in any Competition if you are on the Specially Designated National list promulgated and amended, from time to time, by the United States Department of the Treasury.\r\n\r\n\r\nFor Competitions that offer a cash prize and/or to participate in TCO, additional eligibility requirements apply. Please see the \"Prize Payments\" and \"Additional TCO Terms\" sections of this Terms of Use for additional eligibility requirements.\r\n\r\n\r\nWe may assign, novate or subcontract any or all of our rights and obligations under these Terms of Use at any time. \r\n\r\n\r\nIf you have any questions regarding these Terms of Use, contact us at support@topcoder.com.\r\n\r\n\r\nAccounts; Passwords; Security
\r\nYou may need to set up an account in order to use some of the features of the Website. You may not use a third party\"s account without permission. When you are setting up your account, you must give us accurate and complete information. This means that you cannot set up an account using a name or contact information that does not apply to you, and you must provide accurate and current information on all registration forms that are part of the Website. You may only set up one account. You have complete responsibility for your account and everything that happens on your account. This means you need to be careful with your password. If you find out that someone is using your account without your permission, you must let us know immediately. You may not transfer your account to someone else. We are not liable for any damages or losses caused by someone using your account without your permission. However, if we (or anyone else) suffer any damage due to the unauthorized use of your account, you may be liable. \r\n\r\n\r\nBy registering for an account with us, you are also hereby registered to compete in the TCO. The TCO is a series of Competitions held in four (4) online periods (each, a \"Period\") throughout the year (which such periods are posted on the Website), and which leads up to an onsite tournament annually which will be held at a location and time to be determined by topcoder. Your registration and participation in the TCO constitutes agreement with any additional applicable TCO terms and conditions (the \"TCO Rules\") that topocder may impose at its sole discretion as well as these Terms of Use, including those available at: http://tco15.topcoder.com/overview/competition-rules/. NO PURCHASE NECESSARY TO ENTER OR WIN, A PURCHASE WILL NOT INCREASE YOUR CHANCE OF WINNING.\r\n\r\n\r\nCompetitions
\r\n\r\n\r\nIn addition to these Terms of Use, we may provide specific Official Rules and Regulations and other documentation for certain activities on this Website, including with respect to Competitions conducted by us and those in conjunction with third parties. These Terms of Use are incorporated by reference into the specific Official Rules and Regulations which appear in connection with information about a particular Competition. To the extent that any conflict exists between these Terms of Use and any specific Official Rules and Regulations, the Official Rules and Regulations for that Competition in which you choose to participate shall govern. \r\n\r\nOwnership Rights of Submissions
\r\nWinning Submissions
\r\n\r\nExcept with respect to \"Fun Challenges\", you hereby assign, grant and transfer and agree to assign, grant and transfer to us all right and title in and to any and all Submissions made by you in connection with a Competition for which you are paid a cash prize or other good and valuable compensation (or for which topcoder has in good faith made available for payment pending your completion of tocpoder\"s payment requirements) (any such Submission, a \"Winning Submission\"), along with any and all copyright, patent, trade secret, moral right, and other intellectual property rights, in and to any and all such Winning Submissions. To the extent any rights in a Winning Submission are not assignable, you hereby grant and agree to grant to topcoder under any and all such rights an irrevocable, paid-up, royalty free, perpetual, exclusive, sublicensable (directly or indirectly through multiple tiers), transferable, and worldwide license to use and permit others to use such Winning Submission in any manner desired by us (and/or our contest sponsors or customers) without restriction or accounting to you, including, without limitation, the right to make, have made, sell, offer for sale, use, rent, lease, import, copy, prepare derivative works, publicly display, publicly perform, and distribute all or any part of such Winning Submission and modifications and combinations thereof and to sublicense (directly or indirectly through multiple tiers) or transfer any and all such rights. Further, you hereby waive and agree to waive in favor of topcoder any moral right or other right or claim that is contrary to the intent of a complete transfer of rights to topcoder in each Winning Submission. You agree to promptly execute such documents and perform such acts as we may reasonably require to perfect our entire right, title, and interest in and to each and every Winning Submission, including a topcoder Competition Assignment Agreement if requested by topcoder and/or a sponsor of a Competition. \r\n\r\n\r\nOther Submissions
\r\n\r\nExcept with respect to \"Fun Challenges\", the ownership rights in and to any Submission that is not a Winning Submission shall remain with the Contestant, except that to the extent you are required to enter into a Non-Disclosure Agreement in connection with a Competition (a \"Competition NDA\"), you understand and agree that the rights in and to any confidential information of the sponsor of a Competition shall remain the property of such Competition sponsor and you shall be bound by and the terms of such Competition NDA shall apply with respect to your rights in and to the Submission. The current version of the Competition NDA is posted in the \"direct tool\" available on the Website. In addition, by participating in a Competition and uploading a Submission, regardless of whether it is a Winning Submission or not, you consent to and you hereby grant Topcoder, other Topcoder members, Appirio, the Competition sponsor and their affiliates, employees, contractors and third parties engaged by them a license to review, revise, scan, comment on and/or update your Submission in connection with the Competition, without any payment to or further approval from you. You agree that this consent and license spans the length of the Competition and cannot be revoked.\r\n\r\n\r\nFun Challenges
\r\n\r\n\"Fun Challenges\" are Competitions that do not have any winners or prizes associated with them, and are intended purely for the fun of participating and collaborating with fellow topcoder members throughout the world. All Submissions in connection with Fun Challenges will be made publicly available and without any restrictions on use by anyone worldwide. By entering into a Fun Challenge and uploading a Submission in connection with a Fun Challenge, you hereby waive and release any and all ownership, copyright, patent, trade secret, moral right, and other intellectual property rights, in and to any and all such Submissions without the expectation of any payment or consideration of any kind.\r\n\r\n\r\nContest Materials
\r\n\r\nYou hereby further acknowledge and understand that Competition sponsors, topcoder and Appirio engage, has engaged and will in the future engage in the development, preparation, production, acquisition and dissemination of creative, educational, artistic and other material (collectively, the \"Materials\"), including without limitation Materials that may be similar or identical to your Submission. You also acknowledge that other persons, including our employees and employees of a Competition sponsor, may previously have originated and may hereafter originate Materials that are similar or identical to your Submission. You agree that you will not be entitled to any compensation because of the use by Sponsor of any such similar or identical material. Without limitation of the foregoing, we, our customers and any Competition sponsor may use, without any payment or other obligation whatsoever to you, any part of the Materials, and any idea or concept contained therein, that (a) is similar or identical to, or contains significant elements encompassed in, a concept that is under consideration or in development by us or the Competition sponsor before or at the time of your entry, (b) is not unique, novel, original, and concrete so as to be entitled to protection under applicable laws, (c) has been made public by anyone at the time of its submission to the Competition sponsor or us or otherwise is in the public domain, (d) would be freely usable by a third person if it had not been accepted as a Submission or the subject of any agreement, (e) is not protected by United States copyright law, or (f) is similar or identical to, or contains significant elements encompassed in, an idea, concept or material that is independently created by us, a Competition sponsor or any third party. You agree that our or a Competition sponsor\"s development, preparation, production, acquisition, dissemination and/or exploitation of Materials similar or identical to your Submission or containing features, ideas, material and/or elements similar to or identical with those contained in your Submission shall not entitle you to any compensation or other right or remedy. As an inducement to us or a Competition sponsor to accept your Submission for entry into the contest, you hereby waive any claim or right of action against us, the Competition sponsor\"s and their successors in connection with use of any Materials (or any portions thereof) whether or not such Materials are similar or identical to your Submission or contain any features, ideas, material and/or elements that are similar or identical to those contained in your Submission. Acceptance by us (or a Competition sponsor, as applicable) of a Submission is not an admission by us or a Competition sponsor of the novelty or originality of the Submission.\r\n\r\n\r\n\r\nUnless agreed otherwise in writing, the sponsor of a contest administered through the Website, topcoder or Appirio (as applicable) owns and will retain ownership (including all intellectual property rights) in and to any materials that are not Submissions, which materials may be tangible or intangible, that you develop that are a result of a contest administered through the Website (\"Contest Materials\"), and any modifications, improvements and derivative works thereto (including any such materials that incorporate any of Contestant\"s ideas, feedback or suggestions). \r\n\r\n\r\nU.S. Federal Government Rights & Restrictions
\r\n\r\nFor any Competition sponsored by, on behalf of, or for the benefit of the U.S. Federal Government, Contestants may be subject to the Federal Acquisition Regulations and agree to comply with applicable provisions of the Federal Acquisition Regulations (\"FAR\") and all other laws and regulations applicable to providing goods and services to the U.S. Federal Government. In particular, Winning Submissions be considered \"Commercial Items\" and Contestants may be classified as \"Subcontractors\" according to the U.S. Federal Government, and by entering a Submission in connection with a Competition, the Contestant hereby agrees to be bound by all laws and regulations applicable to the sale of commercial items by subcontractors to the U.S. Federal Government including FAR 52.212-5(e) and FAR 52.244-6(c)(1).. \r\nUser Content\r\n\r\n\r\nYou are solely responsible for any User Content you post to the Website, and the consequences of posting or publishing it. By \"User Content\", we mean any Content you post to the Website. \"Content\" means information, data, text, software, music, sound, photos, graphics, videos, messages, tags, interactive features, or any other materials. When we say \"post\", we include posting, uploading, sharing, submitting or otherwise providing User Content in any manner in connection with the Website. For the avoidance of doubt, Submissions and Contest Materials are User Content.\r\n\r\n\r\nYou may not:\r\n\r\n- \r\n
- Use our Website for any illegal purpose \r\n
- Submit User Content that you don\"t have the right to submit (including but not limited to material covered by someone else\"s copyright, patent, trade secret, privacy policy, publicity policy, or any other proprietary right) \r\n
- Disguise in any way the origin of any User Content you submit (including but not limited to forging headers) \r\n
- Submit any User Content that contains lies or misrepresentations that could damage Us or anyone else \r\n
- Submit User Content that is obscene, illegal, defamatory, libelous, threatening, pornographic, harassing, hateful, or encourages criminal conduct, give rise to civil liability, violate any law, or is otherwise inappropriate \r\n
- Transmit any advertising, promotional materials, junk mail, spam, chain letters, pyramid schemes or any other solicitation \r\n
- Impersonate anyone else or misrepresent your affiliation with any other person or entity \r\n
- Use meta tags or any other hidden text utilizing any of our or our suppliers\" names, products names, or trademarks \r\n
- Upload, launch, post email or transmit any material (including any bot, worm, spider, script, or virus) that may harm or corrupt this Website, or anyone else\"s computer systems or data \r\n
- Use our Website to harm minors in any way \r\n
- Collect or gather other people\"s personal information (including account information) \r\n
- Submit User Content that disparages us or our partners and affiliates \r\n
- Solicit any users of our Website for any commercial purpose \r\n
Copyright, Trademark and Other Intellectual Property
\r\n\r\nProtection
\r\nExcept as otherwise indicated, this Website and its entire contents (including, but not limited to, the text, photographs, information, software, graphics, images, sound, and animation) are owned by us and are protected by domestic and international copyright, trademark, patent, and other intellectual property laws. All copyrightable text and graphics, the selection, arrangement, and presentation of all materials (including information in the public domain), and the overall design of this Website are \"2014 topcoder. All rights reserved. We hereby give you permission to download and print materials from this Website for the sole purposes of viewing, reading, and retaining for reference the materials for non-commercial use. Any other copying, distribution, retransmission, or modification of information or materials on this Website, whether in electronic or other form, without our express prior written permission is strictly prohibited. You further agree that you will not disassemble, decompile, reverse engineer or otherwise modify the material on this Website. Any unauthorized or prohibited use may subject the offender to civil liability and criminal prosecution under applicable laws. \r\n\r\n\r\nNotice
\r\nAll trademarks, service marks, and trade names are proprietary to us or other respective owners that have granted us the right and license to use their marks. \r\n\r\n\r\nCopyright Complaints
\r\nWe respect the intellectual property of others, and we ask you to do the same. We may, in appropriate circumstances and at our sole discretion, terminate the access of users who infringe the copyright rights of others. \r\nIf you believe that your work has been copied and is accessible at our Website in a way that constitutes copyright infringement, or that our Website contains links or other references to another online location that contains material or activity that infringes your copyright rights, you may notify us by providing our copyright agent the information required by the U.S. Online Copyright Infringement Liability Limitation Act of the U.S. Digital Millennium Copyright Act, 17 U.S.C. \"512. Our agent for notice of claims of copyright infringement on or regarding this Website can be reached as follows: \r\n\r\n\r\n| BY E-MAIL: | \r\nGC@appirio.com | \r\n
| BY MAIL: | \r\nDan Lascell\r\n\r\nTopcoder, Inc.\r\n\r\n760 Market Street\r\n\r\nSan Francisco, CA 94102 | \r\n
| BY PHONE: | \r\n(650) 268-9911 | \r\n
Marketing Materials
\r\n\r\n\r\nYou hereby authorize us and any Competition sponsors to publicize the results of any Competition, including your name and account name (handle). Contestant hereby grants to us and any Competition sponsors the absolute right and permission to use your name, address (city and state), testimonial statement (or statements in different words which have substantially the same meaning), voice, photograph and/or other likeness in any and all advertising and promotional materials, or to refrain from doing so, in any manner or media whatsoever, worldwide, for advertising and promotional purposes in conjunction with this and similar Competitions without notice to you and without further compensation. You shall have no right of approval, no claim to any compensation, and no claim arising out of the use, alteration, distortion or illusionary effect or use in any composite form of your name, address, testimonial statement, voice, photograph or likeness.\r\n\r\nYou understand that we own all photographs of you taken by us and we may copyright material containing such photographs.\r\n\r\n\r\nIndemnification and Release
\r\nBy accessing our Website, you agree to indemnify us and any parent, subsidiary, sponsor or affiliated entities, our officers and employees, and officers and employees of any parent, subsidiary, sponsor or affiliated entities and hold them harmless from any and all claims and expenses, including attorney's fees, arising from your use of our Website including any material (including third-party material) that you post on our Website and any services or products available through our Website. In addition, you hereby release us and any parent, subsidiary, sponsor or affiliated entities, our officers and employees, and officers and employees of any parent, subsidiary, sponsor or affiliated entities from any and all claims, demands, debts, obligations, damages (actual or consequential), costs, and expenses of any kind or nature whatsoever, whether known or unknown, suspected or unsuspected, disclosed or undisclosed, that you may have against them arising out of or in any way related to such disputes and/or to any services or products available at our Website. You hereby agree to waive all laws that may limit the efficacy of such releases. \r\n\r\n\r\nBy registering and/or participating in the TCO or a Competition, you agree to release topcoder and any Competition sponsor(s), and its affiliates and agents, and the officers, employees, affiliates, advertising and promotions agencies, prize suppliers, and all of their employees, officers, directors, shareholder's and agents (collectively, the \"Releasees\") from any and all liability or any injuries, loss or damage of any kind arising from or in connection with the TCO or a Competition, the use of any Submission, or the acceptance or use of any prize won, except where prohibited by law. Releasees assume no responsibility for incomplete, misdirected, damaged or illegible entries nor for any delayed Submissions or those not received for whatever reason, including without limitation due to internet or e-mail server failure, telephone, human, or other higherror or for any technical or other malfunctions that may occur including any injury or damage to your or any other person's computer relating to or resulting from participation in the Tournament or a Competition or downloading any materials during or for the TCO or a Competition.\r\n\r\n\r\nDisclaimer
\r\nTHE MATERIALS AND SERVICES ON OUR WEB SITE ARE PROVIDED \"AS IS\" AND WITHOUT WARRANTIES OF ANY KIND EITHER EXPRESS OR IMPLIED. TO THE FULLEST EXTENT PERMISSIBLE PURSUANT TO APPLICABLE LAW, WE DISCLAIM ALL WARRANTIES, EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. WE DO NOT WARRANT THAT THE FUNCTIONS CONTAINED IN THE MATERIALS WILL BE UNINTERRUPTED OR ERROR-FREE, THAT DEFECTS WILL BE CORRECTED, OR THAT THIS WEB SITE OR THE SERVER(S) THAT MAKES OUR WEB SITE AVAILABLE OR ANY ADVERTISED OR HYPERLINKED SITE ARE FREE OF VIRUSES OR OTHER HARMFUL COMPONENTS OR THAT OUR SITE, SERVER(S), ADVERTISED OR HYPERLINKED SITES WILL BE ACCESSIBLE AT ALL TIMES. WE DO NOT WARRANT THAT SUCH ERRORS, DEFECTS OR INTERRUPTIONS IN SERVICE WILL NOT AFFECT THE RESULTS OF OUR COMPETITIONS, AND WE DISCLAIM ANY RESPONSIBILITY FOR REDUCED PERFORMANCE IN COMPETITIONS DUE TO SUCH PROBLEMS. WE DO NOT WARRANT OR MAKE ANY REPRESENTATIONS REGARDING THE USE OR THE RESULTS OF OUR WEB SITE WITH RESPECT TO CORRECTNESS, ACCURACY, RELIABILITY, GRAPHICS, LINKS OR OTHERWISE. YOU ASSUME THE ENTIRE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION. TO THE EXTENT THAT APPLICABLE LAW MAY NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES, THE ABOVE EXCLUSIONS MAY NOT APPLY TO YOU. \r\n\r\n\r\nDocuments, graphics and other materials appearing at our Website may include technical inaccuracies, typographical errors, and out-of-date information and use of such documents, graphics or other materials is at your own risk. \r\nYou represent and warrant that neither you nor any member of your immediate family, nor anyone living in your household, is an employee of topcoder or Competition sponsors, regardless of commitment date as sponsor, including any companies involved in the production (including prize suppliers), implementation and distribution of this tournament and their advertising or promotion agencies, parent companies, service providers, agents, officers, subsidiaries or affiliates, or any other persons or entities directly associated with the tournament, and that neither you nor any immediate family member nor anyone living in your household is connected with any of the above.\r\n\r\n\r\nLimitation of Liability
\r\n\r\nTO THE FULLEST EXTENT PERMISSIBLE PURSUANT TO APPLICABLE LAW, TOPCODER] SHALL NOT BE LIABLE FOR ANY DAMAGES (INCLUDING, BUT NOT LIMITED TO, DIRECT, INDIRECT, INCIDENTAL, SPECIAL OR CONSEQUENTIAL DAMAGES), WHETHER BASED ON WARRANTY, CONTRACT, TORT, OR ANY OTHER LEGAL THEORY, INCLUDING, BUT NOT LIMITED TO, DAMAGES FOR LOSS OF WINNINGS, DATA OR OTHER DAMAGE TO ANY OTHER INTANGIBLE PROPERTY, EVEN IF TOPCODER HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES, RESULTING FROM (i) THE USE OR INABILITY TO USE THIS WEB SITE, (ii) THE DISCLOSURE OF, UNAUTHORIZED ACCESS TO OR ALTERATION OF ANY TRANSMISSION OR DATA, (iii) THE STATEMENTS OR CONDUCT OF ANY THIRD PARTY OR (iv) ANY OTHER MATTER RELATING TO TOPCODER. \r\n\r\n\r\nPrize Payment
\r\n\r\nYou understand that neither we, the Competition sponsors nor their parent corporations, subsidiaries, affiliates, agents, assigns, etc. or any entity connected with a Competition will be responsible for any costs (including, without limitation, any federal, state or local taxes) Contestant may incur in connection with any Contest or any prize Contestant may be awarded. However, Contestant understands that topcoder may make withholdings from any prize that Contestant may be awarded in order to comply with applicable tax laws. Contestant agrees to sign any applicable forms necessary to distribute the prize as required by tax authorities.\r\n\r\n\r\nAll cash prizes are listed and shall be awarded in USD. All prizes will be awarded in each Competition, provided a qualified number of Submissions are received and the requisite number of Contestants participate in a round of a Competition. A Competition sponsor may award prizes to more than one Submission with respect to any Competition. If a Contestant cannot or will not accept a prize, then the prize will be forfeited and may be awarded to the next highest scoring Submission. Unless otherwise provided herein, by participating in a Competition and/or the TCO, a Contestant acknowledges and agrees that if his/her Submission is selected as a winner, the Contestant will receive a cash award only upon verification of all applicable eligibility requirements. Cash prizes will be paid out by topcoder (or its designee) in the US in US dollars no later than 90 days following the conclusion of the Competition or the conclusion of the TCO (as applicable). Taxes, if any, are the sole responsibility of the winner(s). Prizes which remain unclaimed or undeliverable for a period of six (6) months will be forfeited. \r\n\r\n\r\nAs a condition of winning and redeeming a cash prize, Contestants will be required to submit a completed (i) Contestant Questionnaire and all post Competition surveys, (ii) if requested, an Affidavit of Eligibility and Liability and Publicity Release, unless a notarized copy is already on file with topcoder (iii) IRS Form W-9 or W-8BEN, as appropriate if one is not already on file with topcoder, (iv) with respect to the TCO, a topcoder Competition Assignment Agreement, if one is not already on file with topcoder, and (v) with respect to the TCO, a Travel form. In completing any requested Affidavit of Eligibility and Liability and Publicity Release, a Contestant who wins a cash prize (a) confirms his/her eligibility, (b) represents and warrants that he/she has not cheated, (c) verifies the accuracy of the demographic information submitted to, and contained in, the topcoder member database, (d) authorizes topcoder to publicize the results of the Competition and/or the TCO, (e) agrees to sign any applicable forms required by tax authorities, (f) grants topcoder a license to all information submitted during the Competition and/or the TCO, and (g) releases topcoder from liability arising out of any prize won. topcoder requires all Contestants to complete the Form W-9 or W-8BEN for tax reporting purposes. Providing false information in the registration process or in the required forms described in this paragraph will result in a forfeiture of a cash prize. If a winning Contestant (i) does not reply to a notification from topcoder or the notification is undeliverable, (ii) in the case of TCO, does not return a requested Affidavit of Eligibility/Liability/Publicity release completed and signed within ten (10) days of date of prize notification, or (iii) is not otherwise in compliance with these Rules or the rules of a Competition, the Contestant will be disqualified and forfeit any prize, and topcoder may, at our discretion, select and notify another Contestant. Participatory prizes and non-cash prizes will be mailed within one month following the conclusion of the Competition or the TCO (as applicable) to the address provided by the Contestant in their topcoder profile. Unclaimed or undeliverable participatory prizes will be forfeited. Contestants who do not submit the required information by the applicable deadlines forfeit their prizes. Please allow 6-12 weeks for delivery. If a Contestant\"s prize is returned, topcoder will resend that prize to a secondary address provided a request is made by the prizewinning Contestant. topcoder is not responsible for lost or stolen items and will not send additional prizes in the event a prize is not received. Each Contestant that participates in the Onsite portion of the TCO is eligible to receive only one (1) TCO T-shirt during the TCO, which may only be picked up by the Contestant at the TCO.\r\n\r\n\r\nLinks to Other Web Sites and Services
\r\n\r\nTo the extent that our Website contains links to other Websites and outside services and resources, we do not control the availability and content of those Websites, services or resources, nor do we necessarily review or endorse materials available at or through such other Websites. Viewing other Websites or utilizing outside services and resources is done at your own risk. We shall not be liable for any loss or damage caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such site or resource. \r\n\r\n\r\nOther Restrictions on Conduct
\r\nWe are making the Website available to you for your information and personal use only. You may not (and you agree not to) use, copy, distribute, transmit, broadcast, sell, or do anything else with the Website for any other purpose.\r\n\r\n\r\nYou agree not to disrupt, modify or interfere with the functioning of our Website or any services provided on or through our Website or with any associated software, hardware or servers in any way and you agree not to impede or interfere with others' use of our Website. This includes your agreement that you will not cheat; that the idea for the code and/or challenge(s) submitted by you is yours alone. This also includes your agreement that you will not provide your topcoder information including, but not limited to, your topcoder handle and rating, to any third party for the purpose of pursuing employment opportunities without the written consent of topcoder. If you are contacted by a third-party regarding employment opportunities and/or media interest as a result in your participation in topcoder Competitions, you agree to promptly notify topcoder of such contact. You also agree not to alter or tamper with any information or materials on, or associated with our Website or services provided on or through our Website. \r\nWe do not necessarily endorse, support, sanction, encourage, verify or agree with the comments, opinions, or other statements made public at our Website by users through our Competitions, forums or other interactive services available at our Website. Any information or material sent by users to any forums, including advice and opinions, represents the views and is the responsibility of those users and does not necessarily represent our views. \r\n\r\n\r\nYou agree that no impediment exists to you joining the topcoder Website, and your participation in topcoder's Website and the Competitions it offers will not interfere with your performance of any other agreement or obligation which has been or will be made with any third party. \r\n\r\n\r\nProvisions Applicable to Chinese Citizens and Expatriates Residing in China
\r\ntopcoder hereby incorporates into these Terms of Use and into our Privacy Policy the provisions of China's Decision on Safeguarding the Security of the Internet (the \"Decision\"). \r\n\r\n\r\nAccording to Section 1 of the Decision \"to ensure operational security of the Internet, the person or organization perpetrating any of the following acts in violation of the criminal law shall be penalized according to the criminal code:\r\n\r\n- \r\n
- 1.\tUnauthorized penetration into the computer and information system of the state affair, national defense or high-tech departments of the state; \r\n
- 2.\tIntentional composition or dissemination of computer virus or other destructive programs, or attacking the computer system or telecommunication network and resulting in damage or destruction of such computer systems or telecommunication network; \r\n
- 3.\tUnauthorized disruption of operation of the computer network or telecommunication service and resulting in malfunction of such network or telecommunication systems in violation of the laws or regulations of the state.\" \r\n
- \r\n
- 1.\tDisseminating rumor or slander on the Internet, or publishing or diffusing maleficent information to instigate subversion of the state power or socialist system, advocate abruption of the country or harm unity of the country; \r\n
- 2.\tStealing or disclosing the national or military secrets on the Internet; \r\n
- 3.\tInstigating inter-ethnic enmity or prejudice, or disrupting ethnic unity on the Internet; and \r\n
- 4.\tEstablishing or organizing heresies on the Internet and impeding the implementation of laws and regulations of the state.\" \r\n
- \r\n
- 1.\tSelling fake or shoddy goods on the Internet or making false or misleading propaganda of commodities on the Internet; \r\n
- 2.\tHurting others' commercial fame or reputation of products on the Internet; \r\n
- 3.\tInfringing upon others' intellectual property rights on the Internet; \r\n
- 4.\tCompiling and distributing false information on the Internet to affect securities or futures transactions or disrupt order of the financial markets; and \r\n
- 5.\tEstablishing pornographic web sites or web pages, providing links to pornographic web sites, or disseminating pornographic magazines, films, audio and videos materials or graphics on the Internet.\" \r\n
- \r\n
- 1.\tInsulting others or drawing up slanders against others on the Internet; \r\n
- 2.\tIllegally intercepting, modifying or deleting others' emails or other database materials and infringing rights of the citizen of freedom and secrets in communicating and letter transmitting; and \r\n
- 3.\tPerpetrating theft, fraud, or blackmailing on the Internet.\" \r\n
Choice of Law and Forum
\r\n\r\nThese Terms of Use are governed by the laws of the state of California. You hereby agree to submit to the exclusive jurisdiction of the courts of San Francisco County, California. To the extent that applicable laws have mandatory application to this agreement or give you the right to bring action in any other courts, the above limitations may not apply to you. Use of this Website is unauthorized in any jurisdiction that does not give full effect to all provisions of these Terms of Use. \r\n\r\n\r\nSeverability and Enforceability
\r\n\r\nIf any provision or portion of these Terms of Use is held illegal, invalid, or unenforceable, in whole or in part, it shall be modified to the minimum extent necessary to correct any deficiencies or replaced with a provision which is as close as is legally permissible to the provision found invalid or unenforceable and shall not affect the legality, validity or enforceability of any other provisions or portions of these Terms of Use. \r\n\r\n\r\nTermination/Exclusion
\r\n\r\nWe reserve the right, in our sole discretion, to revoke any and all privileges associated with accessing and/or competing on our Website, and to take any other action we deem appropriate including but not limited to terminating or suspending your use of www.topcoder.com, for no reason or any reason whatsoever, including improper use of this Website or failure to comply with these Terms of Use. \r\n\r\n\r\nAdditional TCO Terms
\r\n\r\nEligibility
\r\nThe TCO and each Competition that is part of the TCO is open to all members of the topcoder Website who have agreed to these Terms of Use and who are at least 18 years of age at the time of registration and have attained the age of majority in their jurisdiction of primary residence and citizenship. In addition to the other terms and eligibility criteria set forth in these Terms and Use, to be eligible to participate in the TCO, you must be (i) a U.S. citizen, (ii) a lawful permanent resident of the U.S., (iii) a temporary resident, asylee, refugee of the U.S., or have a lawfully issued work authorization card permitting unrestricted employment in the U.S., or (iv) a non-U.S. resident authorized in the country in which the member resides while participating in the TCO to perform services as an independent contractor; or (v) with respect to any Competition designated by us as an \"Algorithm Competition\", be in the United States under a valid and current visa issued by the United States government which does not prohibit receiving a cash prize. \r\n\r\n\r\nViolation of these Terms of Use may result in disqualification from the TCO and/or further consequences as determined in our sole discretion. Current employees of topcoder and those involved in the development, production (including prize suppliers and sponsors), implementation and distribution of the TCO (including Competitions run as part of the TCO) and their advertising or promotion agencies, parent companies, service providers, agents, officers, subsidiaries or affiliates, or any other persons or entities directly associated with the TCO and members of their immediate families and/or persons living in the same household as such persons, are ineligible to enter the TCO and related Competitions. Current employees of any TCO sponsor (or Competition sponsor that is part of TCO) or their parent companies, subsidiaries or affiliates which such Competition sponsor or TCO Sponsor, as applicable, is involved in the preparation, administration or judging of the TCO (and any related Competitions) and members of their employees' immediate families and/or persons living in the same household as such employees, are ineligible to enter the TCO.\r\n\r\n\r\ntopcoder\"s Discretion regarding the TCO
\r\n\r\nAll decisions relating to the viability of Submissions, the ranking of Submissions and all other matters pertaining to the TCO are within the sole discretion of topcoder or its designee and shall be final and binding in all respects. By participating in the TCO and/or a Competition that is part of the TCO, a Contestant who wins a prize releases and agrees to hold harmless topcoder its affiliates, subsidiaries, sponsors, advertising and promotion agencies, and prize suppliers, and all of their respective directors, officers, employees, representatives and agents, from and against any and all liability for any loss, property damage or damage to person, including without limitation, death and injury, due in whole or in part, directly or indirectly, from or arising out of participation in the TCO, or participation in any TCO-related activity, or the receipt, use or misuse of a prize. topcoder reserves the right to limit the participation of any person in the TCO, amend or interpret these rules or official communications governing the TCO or cancel the TCO or any TCO-related Competition for any reason with prior notice. Notices for any such amendment, interpretation or cancellation will be deemed to have been given by posting on the Website and by virtue of a Contestant's continued participation in the TCO. A Contestant may terminate participation in the TCO upon written notice to topcoder.\r\n\r\n\r\nTCO Logistics
\r\n\r\nAll Contestants who have advanced or won a trip to the onsite portion of the TCO (\"Onsite Contestants\") must arrive at the event no later than the date and time specified in the TCO Rules. All Onsite Contestants must confirm their attendance at the onsite event no later than the date specified in the TCO Rules. In order to confirm attendance, Onsite Contestants must have acquired any necessary travel visas and confirm their ability to travel to the United States no later than the date specified in the TCO Rules. If an Onsite Contestant is required to travel from outside the United States, the Onsite Contestant must show proof of a visa and/or passport by the date specified in the TCO Rules. Onsite Contestants may email a copy of their documents as instructed in the TCO Rules. Onsite Contestants who fail to meet this requirement may be replaced as an Onsite Contestant. Contestants who are otherwise eligible to compete in any or all of the Competitions will be permitted to participate in the online portions of any/all of them. However, in the event a Contestant advances to the onsite finals in more than one Competition and any of the times for the onsite rounds of the Competitions overlap, the Onsite Contestant may participate in either, but not both, Competitions. The Onsite Contestant must notify topcoder of the Competition in which she/he will participate as an Onsite Contestant no later than the date specified in the TCO Rules.\r\n\r\n\r\ntopcoderwill issue visa invitation letters (upon request) to international Contestants who require one to obtain a travel visa to enter the United States. All registered TCO Contestants may request a visa invitation letter in respect of the year of the upcoming TCO. Contestants must fill out the visa letter request form in its entirety before a visa letter will be mailed. Contestants have until the date and time specified in the TCO Rules to request a letter. Visas can take a significant amount of time to obtain in certain countries, so it is in a Contestant's best interests to request one well before the deadline. The cost of obtaining a visa is the sole responsibility of the Contestant. See more information about travel visas. The TCO involves a large number of visa applications by topcoder members. By applying for a visa to attend the TCO, Contestant understands that topcoder will cooperate with all requests by consulates, the Department of Homeland Security, and law enforcement in connection with such Contestant's visa, including information about the visa applicants' attendance at the TCO. Any abuse of the visa application process or any visa obtained for the TCO is considered a serious violation of US law and these Terms of Use, and, among other things, the Contestant will be subject to discipline by topcoder.\r\n\r\n\r\ntopcoder will provide air travel arrangements for each Onsite Contestant. The flight will be reserved and paid for by topcoder. Onsite Contestants will arrive on the date specified in the TCO Rules and depart the day after the final day of the Onsite portion of the TCO. At topcoder's sole discretion, topcoder will pay for each Onsite Contestant's airfare up to $1,500, but reserves the right to make exceptions to the maximum amount based on individual circumstances. If an Onsite Contestant wishes to take a flight other than the one provided by topcoder and/or wishes to stay at a hotel other than the one provided by topcoder, the Onsite Contestant shall be responsible for the entire cost of such deviation from the accommodations and travel arrangements provided by topcoder. In addition, the Onsite Contestant agrees to reimburse topcoder for any costs, penalties, fines or fees incurred by topcoder as a result of such deviation. Ground transportation to and from the airport will be provided for each Onsite Contestant by topcoder, as well as private hotel accommodations and certain meals. All other expenses are the responsibility of the Onsite Contestant. topcoder will not provide travel, lodging accommodations, or visa assistance for any guests of an Onsite Contestant. If an Onsite Contestant is eliminated or chooses not to utilize the travel accommodations provide by topcoder for any reason after he/she is confirmed as a finalist and travel accommodations have already been made for the Onsite Contestant by topcoder for the onsite finals, that Onsite Contestant may be held responsible for reimbursing topcoder for the cost of such accommodations. topcoder reserves the right to withhold any future cash prizes won by the Onsite Contestant until the cost of such accommodations has been fully reimbursed. Onsite Contestants must complete the following items and submit them to topcoder by the date specified in the TCO Rules (failure to submit these items will disqualify an Onsite Contestant from advancing to the onsite event):\r\n\r\n\r\nConfirmation of attendance/proof of travel documents \" Please confirm your attendance onsite as directed in the TCO Rules. If you require a passport and/or visa to visit the United States, you must show proof of your documents.\r\n\r\n\r\nPlease submit a member photo, if you have not already done so.\r\n\r\n\r\nPlease also submit a fun photo to be shared during your onsite introduction.\r\n\r\n\r\nPlease ensure the information listed in your topcoder profile is current. We may need to mail your plane tickets or contact you via telephone.\r\n\r\n\r\nComplete the Onsite Contestant Questionnaire - your responses may be published in the program for the TCO.\r\n\r\n\r\nTravel form - provide topcoder with the appropriate travel information for your trip to the onsite event.\r\n\r\n\r\nApplicable tax forms (unless one is already on file with topcoder).\r\n\r\n\r\n
+
+
+
+
+ )
+ )
+}
+
+export default PageLayout
diff --git a/src-ts/tools/learn/certification-details/page-layout/index.ts b/src/apps/learn/src/certification-details/page-layout/index.ts
similarity index 100%
rename from src-ts/tools/learn/certification-details/page-layout/index.ts
rename to src/apps/learn/src/certification-details/page-layout/index.ts
diff --git a/src/apps/learn/src/certification-details/perks-section/PerksSection.module.scss b/src/apps/learn/src/certification-details/perks-section/PerksSection.module.scss
new file mode 100644
index 000000000..4aaec6930
--- /dev/null
+++ b/src/apps/learn/src/certification-details/perks-section/PerksSection.module.scss
@@ -0,0 +1,90 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+ background: $black-5;
+ padding: $sp-8;
+ padding-right: 92px;
+ border-radius: $sp-2;
+
+ color: $black-100;
+ @include ltelg {
+ padding: $sp-6 $sp-4;
+ }
+
+ &.clear {
+ background: $tc-white;
+ padding: 0;
+ }
+}
+
+.perksList {
+ margin-top: $sp-8;
+ @include ltelg {
+ margin-top: $sp-6;
+ }
+
+ li {
+ display: flex;
+ align-items: flex-start;
+ gap: $sp-4;
+
+ margin-top: $sp-6;
+ @include ltelg {
+ gap: $sp-2;
+ }
+ }
+}
+
+.perkIcon {
+ display: flex;
+ width: $sp-12;
+ height: $sp-12;
+ flex: 0 0 auto;
+
+ @include ltelg {
+ width: $sp-8;
+ height: $sp-8;
+ }
+
+ svg {
+ display: block;
+ width: 100%;
+ height: 100%;
+
+ path {
+ stroke: url(#paint0_linear_1847_10558);
+ }
+ }
+
+ li:nth-child(2) & {
+ svg path {
+ stroke: none;
+ fill: url(#paint0_linear_1847_10558);
+ }
+ }
+}
+
+.perkContent {
+ p {
+ margin-top: $sp-2;
+ }
+}
+
+.perkExtraLink {
+ margin-top: $sp-2;
+
+ > * {
+ display: flex;
+ align-items: center;
+ gap: $sp-1;
+ color: $turq-160;
+ @include font-roboto;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 14px;
+ text-transform: uppercase;
+ }
+ svg {
+ @include icon-size(14);
+ }
+}
\ No newline at end of file
diff --git a/src-ts/tools/learn/certification-details/perks-section/PerksSection.tsx b/src/apps/learn/src/certification-details/perks-section/PerksSection.tsx
similarity index 100%
rename from src-ts/tools/learn/certification-details/perks-section/PerksSection.tsx
rename to src/apps/learn/src/certification-details/perks-section/PerksSection.tsx
diff --git a/src-ts/tools/learn/certification-details/perks-section/icons-map.tsx b/src/apps/learn/src/certification-details/perks-section/icons-map.tsx
similarity index 83%
rename from src-ts/tools/learn/certification-details/perks-section/icons-map.tsx
rename to src/apps/learn/src/certification-details/perks-section/icons-map.tsx
index 1615d7313..e81c7d765 100644
--- a/src-ts/tools/learn/certification-details/perks-section/icons-map.tsx
+++ b/src/apps/learn/src/certification-details/perks-section/icons-map.tsx
@@ -1,7 +1,8 @@
import { ReactNode } from 'react'
-import { IconOutline } from '../../../../lib'
-import { IconCertifSvg } from '../../learn-lib'
+import { IconOutline } from '~/libs/ui'
+
+import { IconCertifSvg } from '../../lib'
import { PerkIconsType, PerkItem } from '../certification-details-modal/certif-details-content/data'
export const iconsMap: {[key in PerkIconsType]: ReactNode} = {
diff --git a/src-ts/tools/learn/certification-details/perks-section/index.ts b/src/apps/learn/src/certification-details/perks-section/index.ts
similarity index 100%
rename from src-ts/tools/learn/certification-details/perks-section/index.ts
rename to src/apps/learn/src/certification-details/perks-section/index.ts
diff --git a/src-ts/tools/learn/learn-config/index.ts b/src/apps/learn/src/config/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-config/index.ts
rename to src/apps/learn/src/config/index.ts
diff --git a/src-ts/tools/learn/learn-config/learn-config.model.ts b/src/apps/learn/src/config/learn-config.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-config/learn-config.model.ts
rename to src/apps/learn/src/config/learn-config.model.ts
diff --git a/src-ts/tools/learn/learn-config/learn.config.ts b/src/apps/learn/src/config/learn.config.ts
similarity index 77%
rename from src-ts/tools/learn/learn-config/learn.config.ts
rename to src/apps/learn/src/config/learn.config.ts
index 24cf6ece7..ffc821a82 100644
--- a/src-ts/tools/learn/learn-config/learn.config.ts
+++ b/src/apps/learn/src/config/learn.config.ts
@@ -1,21 +1,21 @@
-import { EnvironmentConfig } from '../../../config'
+import { EnvironmentConfig } from '~/config'
import { LearnConfigModel } from './learn-config.model'
-import { LearnConfigBrooke } from './learn.brooke.config'
import { LearnConfigDefault } from './learn.default.config'
import { LearnConfigDev } from './learn.dev.config'
+import { LearnConfigQA } from './learn.qa.config'
import { LearnConfigProd } from './learn.prod.config'
function getConfig(): LearnConfigModel {
switch (EnvironmentConfig.ENV) {
- case 'brooke':
- return LearnConfigBrooke
-
case 'dev':
return LearnConfigDev
+ case 'qa':
+ return LearnConfigQA
+
case 'prod':
return LearnConfigProd
diff --git a/src/apps/learn/src/config/learn.default.config.ts b/src/apps/learn/src/config/learn.default.config.ts
new file mode 100644
index 000000000..7cb9bbd26
--- /dev/null
+++ b/src/apps/learn/src/config/learn.default.config.ts
@@ -0,0 +1,18 @@
+import { EnvironmentConfig } from '~/config'
+import { getReactEnv } from '~/config/environments/react-env'
+
+import { LearnConfigModel } from './learn-config.model'
+
+export const LearnConfigDefault: LearnConfigModel = {
+ API: `${EnvironmentConfig.API.V5}/learning-paths`,
+ CERT_ALT_PARAMS: {
+ 'view-style': 'large-container',
+ },
+ CERT_DOMAIN: `https://certificate.${EnvironmentConfig.TC_DOMAIN}`,
+ CERT_ELEMENT_SELECTOR: {
+ attribute: 'data-id',
+ value: 'certificate-container',
+ },
+ CLIENT: 'https://fcc.topcoder-dev.com:4431',
+ REQUIRE_DICE_ID: `${getReactEnv
+ Certificate Not Found
+
+
+)
+
+export default CertificateNotFound
diff --git a/src-ts/tools/learn/course-certificate/certificate-not-found/bg.svg b/src/apps/learn/src/course-certificate/certificate-not-found/bg.svg
similarity index 100%
rename from src-ts/tools/learn/course-certificate/certificate-not-found/bg.svg
rename to src/apps/learn/src/course-certificate/certificate-not-found/bg.svg
diff --git a/src-ts/tools/learn/course-certificate/certificate-not-found/index.ts b/src/apps/learn/src/course-certificate/certificate-not-found/index.ts
similarity index 100%
rename from src-ts/tools/learn/course-certificate/certificate-not-found/index.ts
rename to src/apps/learn/src/course-certificate/certificate-not-found/index.ts
diff --git a/src/apps/learn/src/course-certificate/certificate-view/CertificateView.tsx b/src/apps/learn/src/course-certificate/certificate-view/CertificateView.tsx
new file mode 100644
index 000000000..586ce1220
--- /dev/null
+++ b/src/apps/learn/src/course-certificate/certificate-view/CertificateView.tsx
@@ -0,0 +1,137 @@
+import {
+ FC,
+ forwardRef,
+ MutableRefObject,
+ ReactNode,
+ RefAttributes,
+ useMemo,
+ useRef,
+} from 'react'
+
+import { UserProfile } from '~/libs/core'
+
+import {
+ AllCertificationsProviderData,
+ CertificateNotFoundContent,
+ CertificatePageLayout,
+ CoursesProviderData,
+ PageTitle,
+ useGetCertification,
+ useGetCourses,
+ useGetUserCompletedCertifications,
+ UserCompletedCertificationsProviderData,
+} from '../../lib'
+import {
+ getCoursePath,
+ getUserCertificateSsr,
+} from '../../learn.routes'
+import { CertificateNotFound } from '../certificate-not-found'
+
+import Certificate from './certificate/Certificate'
+
+interface CertificateViewProps {
+ certification: string
+ fullScreenCertLayout?: boolean
+ profile: UserProfile
+ provider: string
+}
+
+const CertificateView: FC
+
+
+
+
+ Topcoder Academy
++ Certificate + {' '} + not found +
+
+
+
+
+
+
+
+
+
+)
+
+export default CourseCard
diff --git a/src-ts/tools/learn/course-certificate/certificate-view/certificate/course-card/index.ts b/src/apps/learn/src/course-certificate/certificate-view/certificate/course-card/index.ts
similarity index 100%
rename from src-ts/tools/learn/course-certificate/certificate-view/certificate/course-card/index.ts
rename to src/apps/learn/src/course-certificate/certificate-view/certificate/course-card/index.ts
diff --git a/src-ts/tools/learn/course-certificate/certificate-view/certificate/course-card/wave-bg.png b/src/apps/learn/src/course-certificate/certificate-view/certificate/course-card/wave-bg.png
similarity index 100%
rename from src-ts/tools/learn/course-certificate/certificate-view/certificate/course-card/wave-bg.png
rename to src/apps/learn/src/course-certificate/certificate-view/certificate/course-card/wave-bg.png
diff --git a/src-ts/tools/learn/course-certificate/certificate-view/certificate/index.ts b/src/apps/learn/src/course-certificate/certificate-view/certificate/index.ts
similarity index 100%
rename from src-ts/tools/learn/course-certificate/certificate-view/certificate/index.ts
rename to src/apps/learn/src/course-certificate/certificate-view/certificate/index.ts
diff --git a/src/apps/learn/src/course-certificate/certificate-view/index.ts b/src/apps/learn/src/course-certificate/certificate-view/index.ts
new file mode 100644
index 000000000..f4a2a32c7
--- /dev/null
+++ b/src/apps/learn/src/course-certificate/certificate-view/index.ts
@@ -0,0 +1 @@
+export { default as CertificateView } from './CertificateView'
diff --git a/src-ts/tools/learn/course-certificate/index.ts b/src/apps/learn/src/course-certificate/index.ts
similarity index 100%
rename from src-ts/tools/learn/course-certificate/index.ts
rename to src/apps/learn/src/course-certificate/index.ts
diff --git a/src-ts/tools/learn/course-certificate/my-certificate/MyCertificate.tsx b/src/apps/learn/src/course-certificate/my-certificate/MyCertificate.tsx
similarity index 92%
rename from src-ts/tools/learn/course-certificate/my-certificate/MyCertificate.tsx
rename to src/apps/learn/src/course-certificate/my-certificate/MyCertificate.tsx
index 644d414bf..26c77f87f 100644
--- a/src-ts/tools/learn/course-certificate/my-certificate/MyCertificate.tsx
+++ b/src/apps/learn/src/course-certificate/my-certificate/MyCertificate.tsx
@@ -1,11 +1,9 @@
import { FC, useCallback, useContext, useEffect } from 'react'
import { NavigateFunction, Params, useNavigate, useParams } from 'react-router-dom'
-import {
- LoadingSpinner,
- profileContext,
- ProfileContextData,
-} from '../../../../lib'
+import { LoadingSpinner } from '~/libs/ui'
+import { profileContext, ProfileContextData } from '~/libs/core'
+
import { getCoursePath } from '../../learn.routes'
import CertificateView from '../certificate-view/CertificateView'
diff --git a/src-ts/tools/learn/course-certificate/my-certificate/index.ts b/src/apps/learn/src/course-certificate/my-certificate/index.ts
similarity index 100%
rename from src-ts/tools/learn/course-certificate/my-certificate/index.ts
rename to src/apps/learn/src/course-certificate/my-certificate/index.ts
diff --git a/src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.tsx b/src/apps/learn/src/course-certificate/user-certificate/UserCertificate.tsx
similarity index 92%
rename from src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.tsx
rename to src/apps/learn/src/course-certificate/user-certificate/UserCertificate.tsx
index 2582f521e..59c8c375e 100644
--- a/src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.tsx
+++ b/src/apps/learn/src/course-certificate/user-certificate/UserCertificate.tsx
@@ -10,13 +10,11 @@ import {
} from 'react'
import { Params, useParams } from 'react-router-dom'
-import {
- LoadingSpinner,
- profileGetPublicAsync,
- UserProfile,
-} from '../../../../lib'
+import { LoadingSpinner } from '~/libs/ui'
+import { profileGetPublicAsync, UserProfile } from '~/libs/core'
+
import { CertificateView } from '../certificate-view'
-import { hideSiblings } from '../../learn-lib'
+import { hideSiblings } from '../../lib'
const UserCertificate: FC<{}> = () => {
const elRef: MutableRefObject
+
+
+
+ + {props.course} +
+
+
+
-
-
@@ -65,11 +64,15 @@ const CourseView: FC
-
diff --git a/src-ts/tools/learn/course-completed/course-view/index.ts b/src/apps/learn/src/course-completed/course-view/index.ts
similarity index 100%
rename from src-ts/tools/learn/course-completed/course-view/index.ts
rename to src/apps/learn/src/course-completed/course-view/index.ts
diff --git a/src-ts/tools/learn/course-completed/index.ts b/src/apps/learn/src/course-completed/index.ts
old mode 100755
new mode 100644
similarity index 100%
rename from src-ts/tools/learn/course-completed/index.ts
rename to src/apps/learn/src/course-completed/index.ts
diff --git a/src-ts/tools/learn/course-completed/stars.svg b/src/apps/learn/src/course-completed/stars.svg
old mode 100755
new mode 100644
similarity index 100%
rename from src-ts/tools/learn/course-completed/stars.svg
rename to src/apps/learn/src/course-completed/stars.svg
diff --git a/src-ts/tools/learn/course-completed/tca-certification-view/TCACertificationView.tsx b/src/apps/learn/src/course-completed/tca-certification-view/TCACertificationView.tsx
similarity index 83%
rename from src-ts/tools/learn/course-completed/tca-certification-view/TCACertificationView.tsx
rename to src/apps/learn/src/course-completed/tca-certification-view/TCACertificationView.tsx
index 6dfc37459..875764202 100644
--- a/src-ts/tools/learn/course-completed/tca-certification-view/TCACertificationView.tsx
+++ b/src/apps/learn/src/course-completed/tca-certification-view/TCACertificationView.tsx
@@ -1,10 +1,10 @@
import { FC } from 'react'
-import { Button } from '../../../../lib'
-import { CourseTitle, LearnCourse, TCACertification } from '../../learn-lib'
+import { LinkButton } from '~/libs/ui'
+
+import { CourseTitle, LearnCourse, TCACertification, TitleBadgeType } from '../../lib'
import { getTCACertificationPath } from '../../learn.routes'
import { ReactComponent as StarsSvg } from '../stars.svg'
-import { TitleBadgeType } from '../../learn-lib/course-title/CourseTitle'
import styles from '../CourseCompletedPage.module.scss'
interface TCACertificationViewProps {
@@ -43,11 +43,11 @@ const TCACertificationView: FC
-
diff --git a/src-ts/tools/learn/course-completed/tca-certification-view/index.ts b/src/apps/learn/src/course-completed/tca-certification-view/index.ts
similarity index 100%
rename from src-ts/tools/learn/course-completed/tca-certification-view/index.ts
rename to src/apps/learn/src/course-completed/tca-certification-view/index.ts
diff --git a/src/apps/learn/src/course-details/CourseDetailsPage.module.scss b/src/apps/learn/src/course-details/CourseDetailsPage.module.scss
new file mode 100644
index 000000000..1263e54f5
--- /dev/null
+++ b/src/apps/learn/src/course-details/CourseDetailsPage.module.scss
@@ -0,0 +1,85 @@
+@use '@libs/ui/styles/typography';
+@import '@libs/ui/styles/includes';
+
+.wrap {
+ padding: $sp-10 0 $sp-8;
+ gap: $sp-8;
+ position: relative;
+ flex: 1;
+
+ display: grid;
+ grid-template-areas:
+ 'intro-copy aside'
+ 'description aside';
+ grid-template-columns: 1fr 40%;
+ grid-template-rows: auto 1fr;
+
+ @include ltemd {
+ grid-template-areas: 'intro-copy' 'aside' 'description';
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr;
+ }
+}
+
+.tcaCertBanner {
+ margin-top: $sp-8;
+}
+
+.aside {
+ flex: 0 0 auto;
+ max-width: 560px;
+ width: 100%;
+ grid-area: aside;
+ @include ltemd {
+ max-width: none;
+ }
+}
+
+.intro-copy {
+ grid-area: intro-copy;
+ flex: 1 1 auto;
+ .text {
+ @extend .body-main;
+ margin-top: $sp-8;
+ }
+}
+
+.description {
+ grid-area: description;
+ flex: 1 1 auto;
+ .text {
+ @extend .body-main;
+ margin-top: $sp-6;
+ }
+
+ p {
+ margin: $sp-2 0;
+ }
+
+ :global(.details.mtop) {
+ margin-top: $sp-6;
+ }
+}
+
+.coming-soon {
+ margin-top: $sp-8;
+}
+
+.credits-link {
+ margin-top: $sp-8;
+ padding-bottom: $sp-6;
+
+ a {
+ @extend .quote-small;
+ color: $link-blue-dark;
+ font-style: italic;
+
+ display: inline-flex;
+ align-items: center;
+ }
+ svg {
+ @include icon-md;
+ margin-left: $sp-1;
+ flex: 0 0 auto;
+ }
+}
diff --git a/src-ts/tools/learn/course-details/CourseDetailsPage.tsx b/src/apps/learn/src/course-details/CourseDetailsPage.tsx
similarity index 98%
rename from src-ts/tools/learn/course-details/CourseDetailsPage.tsx
rename to src/apps/learn/src/course-details/CourseDetailsPage.tsx
index 986877760..d0c24604e 100644
--- a/src-ts/tools/learn/course-details/CourseDetailsPage.tsx
+++ b/src/apps/learn/src/course-details/CourseDetailsPage.tsx
@@ -8,10 +8,10 @@ import {
ContentLayout,
IconOutline,
LoadingSpinner,
- profileContext,
- ProfileContextData,
- textFormatGetSafeString,
-} from '../../../lib'
+} from '~/libs/ui'
+import { textFormatGetSafeString } from '~/libs/shared'
+import { profileContext, ProfileContextData } from '~/libs/core'
+
import {
AllCertificationsProviderData,
CoursesProviderData,
@@ -25,7 +25,7 @@ import {
useGetUserCertificationProgress,
UserCertificationProgressProviderData,
UserCertificationProgressStatus,
-} from '../learn-lib'
+} from '../lib'
import { getCoursePath } from '../learn.routes'
import { CoursePageContextValue, useCoursePageContext } from '../course-page-wrapper'
diff --git a/src/apps/learn/src/course-details/course-curriculum/CourseCurriculum.module.scss b/src/apps/learn/src/course-details/course-curriculum/CourseCurriculum.module.scss
new file mode 100644
index 000000000..513d8d92c
--- /dev/null
+++ b/src/apps/learn/src/course-details/course-curriculum/CourseCurriculum.module.scss
@@ -0,0 +1,56 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+ background: $tc-grad15;
+ padding: $sp-8;
+ border-radius: $sp-2;
+
+ color: $tc-white;
+
+ display: flex;
+ flex-direction: column;
+ gap: $sp-6;
+
+ @include ltelg {
+ padding: $sp-4;
+ gap: $sp-4;
+ }
+}
+
+.title {
+ display: flex;
+ align-items: center;
+
+ svg {
+ @include icon-size(60);
+ margin-right: $sp-2;
+ path {
+ fill: url(#lh-paint-02);
+ }
+ }
+}
+
+.bottom-link {
+ margin-top: $sp-8;
+}
+
+.course-outline {
+ max-height: 650px;
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+
+ @include scrollbar;
+
+ :global(.steps-list) {
+ pointer-events: none;
+ }
+ :global(.course-outline-wrap .content) {
+ padding-right: 0;
+ margin-right: 0;
+ }
+
+ @include ltemd {
+ max-height: none;
+ }
+}
diff --git a/src-ts/tools/learn/course-details/course-curriculum/CourseCurriculum.tsx b/src/apps/learn/src/course-details/course-curriculum/CourseCurriculum.tsx
similarity index 98%
rename from src-ts/tools/learn/course-details/course-curriculum/CourseCurriculum.tsx
rename to src/apps/learn/src/course-details/course-curriculum/CourseCurriculum.tsx
index 507cfc50a..ecc87c9e2 100644
--- a/src-ts/tools/learn/course-details/course-curriculum/CourseCurriculum.tsx
+++ b/src/apps/learn/src/course-details/course-curriculum/CourseCurriculum.tsx
@@ -2,7 +2,8 @@ import { noop } from 'lodash'
import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react'
import { NavigateFunction, useLocation, useNavigate, useSearchParams } from 'react-router-dom'
-import { UserProfile } from '../../../../lib'
+import { UserProfile } from '~/libs/core'
+
import {
CourseOutline,
LearnCourse,
@@ -14,14 +15,14 @@ import {
UserCertificationProgressStatus,
userCertificationProgressUpdateAsync,
UserCertificationUpdateProgressActions,
-} from '../../learn-lib'
+} from '../../lib'
import {
getAuthenticateAndStartCourseRoute,
getCertificatePath,
getLessonPathFromCurrentLesson,
LEARN_PATHS,
} from '../../learn.routes'
-import { LearnConfig } from '../../learn-config'
+import { LearnConfig } from '../../config'
import { CurriculumSummary } from './curriculum-summary'
import { TcAcademyPolicyModal } from './tc-academy-policy-modal'
diff --git a/src/apps/learn/src/course-details/course-curriculum/curriculum-summary/CurriculumSummary.module.scss b/src/apps/learn/src/course-details/course-curriculum/curriculum-summary/CurriculumSummary.module.scss
new file mode 100644
index 000000000..ee634cbf3
--- /dev/null
+++ b/src/apps/learn/src/course-details/course-curriculum/curriculum-summary/CurriculumSummary.module.scss
@@ -0,0 +1,47 @@
+@use '@libs/ui/styles/typography';
+@import '@libs/ui/styles/includes';
+
+.wrap {
+ padding: $sp-6;
+ border-radius: $sp-2;
+ background: $tc-white;
+
+ display: flex;
+ flex-direction: column;
+ gap: $sp-4;
+
+ @include ltelg {
+ padding: $sp-4;
+ gap: $sp-2;
+ }
+
+ @include ltemd {
+ gap: $sp-4;
+ }
+}
+
+.title {
+ @extend .body-main-bold;
+ color: $blue-140;
+
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.summary {
+ display: flex;
+ gap: $sp-4;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ @include ltelg {
+ gap: $sp-2;
+ }
+
+ @include ltemd {
+ justify-content: center;
+ gap: $sp-4;
+ }
+}
diff --git a/src/apps/learn/src/course-details/course-curriculum/curriculum-summary/CurriculumSummary.tsx b/src/apps/learn/src/course-details/course-curriculum/curriculum-summary/CurriculumSummary.tsx
new file mode 100644
index 000000000..a4d851cc1
--- /dev/null
+++ b/src/apps/learn/src/course-details/course-curriculum/curriculum-summary/CurriculumSummary.tsx
@@ -0,0 +1,85 @@
+import { FC, ReactNode, useMemo } from 'react'
+
+import { Button, ProgressBar } from '~/libs/ui'
+import { textFormatDateLocaleShortString } from '~/libs/shared'
+
+import { CurriculumSummary as CurriculumSummaryStats, LearnCourse } from '../../../lib'
+
+import styles from './CurriculumSummary.module.scss'
+
+interface CurriculumSummaryProps {
+ completed?: boolean
+ completedDate?: string
+ completedPercentage?: number
+ course: LearnCourse
+ inProgress?: boolean
+ isLoggedIn: boolean
+ onClickCertificateBtn?: () => void
+ onClickMainBtn: () => void
+}
+
+const CurriculumSummary: FC
+ {(inProgress || completed) && (
+ <>
+
+ )
+}
+
+export default CurriculumSummary
diff --git a/src-ts/tools/learn/course-details/course-curriculum/curriculum-summary/index.ts b/src/apps/learn/src/course-details/course-curriculum/curriculum-summary/index.ts
similarity index 100%
rename from src-ts/tools/learn/course-details/course-curriculum/curriculum-summary/index.ts
rename to src/apps/learn/src/course-details/course-curriculum/curriculum-summary/index.ts
diff --git a/src/apps/learn/src/course-details/course-curriculum/dice-modal/DiceModal.module.scss b/src/apps/learn/src/course-details/course-curriculum/dice-modal/DiceModal.module.scss
new file mode 100644
index 000000000..974999840
--- /dev/null
+++ b/src/apps/learn/src/course-details/course-curriculum/dice-modal/DiceModal.module.scss
@@ -0,0 +1,13 @@
+@import '@libs/ui/styles/includes';
+
+.diceModal {
+
+ p {
+ margin-bottom: $sp-4;
+
+ &.buttonContainer {
+ display: flex;
+ justify-content: center;
+ }
+ }
+}
diff --git a/src/apps/learn/src/course-details/course-curriculum/dice-modal/DiceModal.tsx b/src/apps/learn/src/course-details/course-curriculum/dice-modal/DiceModal.tsx
new file mode 100644
index 000000000..62ed321b7
--- /dev/null
+++ b/src/apps/learn/src/course-details/course-curriculum/dice-modal/DiceModal.tsx
@@ -0,0 +1,67 @@
+import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
+
+import { EnvironmentConfig } from '~/config'
+import { BaseModal, Button } from '~/libs/ui'
+
+import styles from './DiceModal.module.scss'
+
+interface DiceModalProps {
+ isOpen: boolean
+ onClose: () => void
+}
+
+const DiceModal: FC
+ {title}
+
+
+
+
+
+
+
+
+
+
+ + Wipro requires employees to enable Multifactor Authentication + with DICE ID in order to take Topcoder Academy courses. +
++ Please go to Account Settings to configure your account. +
++ + + +
++ When you have completed configuring your account, + click below to refresh your settings. +
++ + + +
+
+
+ )
+}
+
+export default CurriculumSummary
diff --git a/src-ts/tools/learn/learn-lib/curriculum-summary/index.ts b/src/apps/learn/src/lib/components/curriculum-summary/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/curriculum-summary/index.ts
rename to src/apps/learn/src/lib/components/curriculum-summary/index.ts
diff --git a/src-ts/tools/learn/learn-lib/dynamic-icons/cert-badge-icon/CertBadgeIcon.module.scss b/src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/CertBadgeIcon.module.scss
similarity index 90%
rename from src-ts/tools/learn/learn-lib/dynamic-icons/cert-badge-icon/CertBadgeIcon.module.scss
rename to src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/CertBadgeIcon.module.scss
index b075267c7..0f592bcdc 100644
--- a/src-ts/tools/learn/learn-lib/dynamic-icons/cert-badge-icon/CertBadgeIcon.module.scss
+++ b/src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/CertBadgeIcon.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../../lib/styles/includes';
+@import '@libs/ui/styles/includes';
.iconse {
path:global(.star) {
diff --git a/src-ts/tools/learn/learn-lib/dynamic-icons/cert-badge-icon/CertBadgeIcon.tsx b/src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/CertBadgeIcon.tsx
similarity index 96%
rename from src-ts/tools/learn/learn-lib/dynamic-icons/cert-badge-icon/CertBadgeIcon.tsx
rename to src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/CertBadgeIcon.tsx
index e155a2781..e9f7f1f79 100644
--- a/src-ts/tools/learn/learn-lib/dynamic-icons/cert-badge-icon/CertBadgeIcon.tsx
+++ b/src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/CertBadgeIcon.tsx
@@ -1,7 +1,7 @@
import { FC, SVGProps } from 'react'
import classNames from 'classnames'
-import { TCACertificateType, TCACertificationLearnLevel } from '../../data-providers'
+import { TCACertificateType, TCACertificationLearnLevel } from '../../../data-providers'
import { getCertBadgeIcon } from './badges'
import styles from './CertBadgeIcon.module.scss'
diff --git a/src-ts/tools/learn/learn-lib/dynamic-icons/cert-badge-icon/badges/database.svg b/src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/badges/database.svg
similarity index 100%
rename from src-ts/tools/learn/learn-lib/dynamic-icons/cert-badge-icon/badges/database.svg
rename to src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/badges/database.svg
diff --git a/src-ts/tools/learn/learn-lib/dynamic-icons/cert-badge-icon/badges/datascience.svg b/src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/badges/datascience.svg
similarity index 100%
rename from src-ts/tools/learn/learn-lib/dynamic-icons/cert-badge-icon/badges/datascience.svg
rename to src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/badges/datascience.svg
diff --git a/src-ts/tools/learn/learn-lib/dynamic-icons/cert-badge-icon/badges/design.svg b/src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/badges/design.svg
similarity index 100%
rename from src-ts/tools/learn/learn-lib/dynamic-icons/cert-badge-icon/badges/design.svg
rename to src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/badges/design.svg
diff --git a/src-ts/tools/learn/learn-lib/dynamic-icons/cert-badge-icon/badges/dev.svg b/src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/badges/dev.svg
similarity index 100%
rename from src-ts/tools/learn/learn-lib/dynamic-icons/cert-badge-icon/badges/dev.svg
rename to src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/badges/dev.svg
diff --git a/src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/badges/index.tsx b/src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/badges/index.tsx
new file mode 100644
index 000000000..9b82b5ec7
--- /dev/null
+++ b/src/apps/learn/src/lib/components/dynamic-icons/cert-badge-icon/badges/index.tsx
@@ -0,0 +1,25 @@
+import { FC, SVGProps } from 'react'
+
+import { TCACertificateType } from '../../../../data-providers'
+
+import { ReactComponent as DatabaseCertBadgeSvg } from './database.svg'
+import { ReactComponent as DatascienceCertBadgeSvg } from './datascience.svg'
+import { ReactComponent as DesignCertBadgeSvg } from './design.svg'
+import { ReactComponent as DevCertBadgeSvg } from './dev.svg'
+import { ReactComponent as InterviewCertBadgeSvg } from './interview.svg'
+import { ReactComponent as QaCertBadgeSvg } from './qa.svg'
+import { ReactComponent as SecurityCertBadgeSvg } from './security.svg'
+
+export const certBadgeIconMap: {[key in TCACertificateType]: FC} = {
+ DATABASE: DatabaseCertBadgeSvg,
+ DATASCIENCE: DatascienceCertBadgeSvg,
+ DESIGN: DesignCertBadgeSvg,
+ DEV: DevCertBadgeSvg,
+ INTERVIEW: InterviewCertBadgeSvg,
+ QA: QaCertBadgeSvg,
+ SECURITY: SecurityCertBadgeSvg,
+}
+
+export function getCertBadgeIcon(certificateTrackType: TCACertificateType): FC
+
+
+
+
+
+ + {props.moduleCount ?? 0} +
+
+ Modules
+
+
+
+
+
+
+
+ + {hasTimeEstimate ? props.completionTimeValue : (<> )} +
+
+ {hasTimeEstimate ? props.completionTimeUnits : 'Times vary'}
+
+
{renderShareActions && (
)}
@@ -290,12 +295,16 @@ const HiringManagerView: FC = (props: HiringManagerViewP
/>
{!props.isModalView && (
-
)}
@@ -304,11 +313,14 @@ const HiringManagerView: FC
+ {label && (
+ {label}
+ )}
+ {skills?.slice(0, expandCount)
+ .map((skill: string | TCAEMSISkillType) => (
+ (typeof skill === 'string' ? skill : skill.name))
+ .join(', ')}
+ >
+
+ )}
+
+ )
+}
+
+export default SkillTags
diff --git a/src-ts/tools/learn/learn-lib/skill-tags/index.ts b/src/apps/learn/src/lib/components/skill-tags/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/skill-tags/index.ts
rename to src/apps/learn/src/lib/components/skill-tags/index.ts
diff --git a/src/apps/learn/src/lib/components/skill/SkillLabel.module.scss b/src/apps/learn/src/lib/components/skill/SkillLabel.module.scss
new file mode 100644
index 000000000..f9995017b
--- /dev/null
+++ b/src/apps/learn/src/lib/components/skill/SkillLabel.module.scss
@@ -0,0 +1,17 @@
+@import '@libs/ui/styles/includes';
+
+.wrap,
+.wrapGray {
+ background-color: $tc-white;
+ padding: 0 $sp-2;
+ border-radius: 4px;
+
+ span {
+ font-style: italic;
+ color: $black-80;
+ }
+}
+
+.wrapGray {
+ background-color: $black-5;
+}
diff --git a/src-ts/tools/learn/learn-lib/skill/SkillLabel.tsx b/src/apps/learn/src/lib/components/skill/SkillLabel.tsx
similarity index 90%
rename from src-ts/tools/learn/learn-lib/skill/SkillLabel.tsx
rename to src/apps/learn/src/lib/components/skill/SkillLabel.tsx
index ffc0b8973..2294cf6fd 100644
--- a/src-ts/tools/learn/learn-lib/skill/SkillLabel.tsx
+++ b/src/apps/learn/src/lib/components/skill/SkillLabel.tsx
@@ -1,6 +1,6 @@
import { FC } from 'react'
-import { TCAEMSISkillType } from '../data-providers'
+import { TCAEMSISkillType } from '../../data-providers'
import styles from './SkillLabel.module.scss'
diff --git a/src-ts/tools/learn/learn-lib/skill/index.ts b/src/apps/learn/src/lib/components/skill/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/skill/index.ts
rename to src/apps/learn/src/lib/components/skill/index.ts
diff --git a/src/apps/learn/src/lib/components/sticky-sidebar/StickySidebar.module.scss b/src/apps/learn/src/lib/components/sticky-sidebar/StickySidebar.module.scss
new file mode 100644
index 000000000..8a2a015b1
--- /dev/null
+++ b/src/apps/learn/src/lib/components/sticky-sidebar/StickySidebar.module.scss
@@ -0,0 +1,49 @@
+@import '@libs/ui/styles/includes';
+
+.sticky-container {
+ @include ltelg {
+ @include contentWidth;
+ padding-top: $sp-6;
+ }
+
+ @include gtelg {
+ position: absolute;
+ top: 0;
+ width: 445px;
+ padding: 40px 0;
+ bottom: 0;
+ }
+
+ @media (min-width: $lg-min) and (max-width: 1150px){
+ width: 40vw;
+ }
+
+ @include ltexxl {
+ right: $sp-8;
+ }
+
+ @include xxl {
+ right: calc(50vw - calc($xxl-min/2 - $sp-6));
+ }
+
+}
+
+.wrap {
+ background: $tc-white;
+ border: $border-xs solid $black-20;
+ border-radius: $sp-2;
+
+ width: 100%;
+ margin: 0 auto;
+
+ padding: $sp-6;
+
+ position: sticky;
+ top: 40px;
+
+ @include ltemd {
+ padding: $sp-4;
+ position: relative;
+ top: 0;
+ }
+}
diff --git a/src-ts/tools/learn/learn-lib/sticky-sidebar/StickySidebar.tsx b/src/apps/learn/src/lib/components/sticky-sidebar/StickySidebar.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/sticky-sidebar/StickySidebar.tsx
rename to src/apps/learn/src/lib/components/sticky-sidebar/StickySidebar.tsx
diff --git a/src-ts/tools/learn/learn-lib/sticky-sidebar/index.ts b/src/apps/learn/src/lib/components/sticky-sidebar/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/sticky-sidebar/index.ts
rename to src/apps/learn/src/lib/components/sticky-sidebar/index.ts
diff --git a/src-ts/tools/learn/learn-lib/svgs/Doug-Hanson.svg b/src/apps/learn/src/lib/components/svgs/Doug-Hanson.svg
similarity index 100%
rename from src-ts/tools/learn/learn-lib/svgs/Doug-Hanson.svg
rename to src/apps/learn/src/lib/components/svgs/Doug-Hanson.svg
diff --git a/src-ts/tools/learn/learn-lib/svgs/cert-icon.svg b/src/apps/learn/src/lib/components/svgs/cert-icon.svg
similarity index 100%
rename from src-ts/tools/learn/learn-lib/svgs/cert-icon.svg
rename to src/apps/learn/src/lib/components/svgs/cert-icon.svg
diff --git a/src-ts/tools/learn/learn-lib/svgs/course-icon.svg b/src/apps/learn/src/lib/components/svgs/course-icon.svg
similarity index 100%
rename from src-ts/tools/learn/learn-lib/svgs/course-icon.svg
rename to src/apps/learn/src/lib/components/svgs/course-icon.svg
diff --git a/src-ts/tools/learn/learn-lib/svgs/crowd-icon.svg b/src/apps/learn/src/lib/components/svgs/crowd-icon.svg
similarity index 100%
rename from src-ts/tools/learn/learn-lib/svgs/crowd-icon.svg
rename to src/apps/learn/src/lib/components/svgs/crowd-icon.svg
diff --git a/src-ts/tools/learn/learn-lib/svgs/icon-certif.svg b/src/apps/learn/src/lib/components/svgs/icon-certif.svg
similarity index 100%
rename from src-ts/tools/learn/learn-lib/svgs/icon-certif.svg
rename to src/apps/learn/src/lib/components/svgs/icon-certif.svg
diff --git a/src-ts/tools/learn/learn-lib/svgs/index.ts b/src/apps/learn/src/lib/components/svgs/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/svgs/index.ts
rename to src/apps/learn/src/lib/components/svgs/index.ts
diff --git a/src-ts/tools/learn/learn-lib/svgs/learning-hat.svg b/src/apps/learn/src/lib/components/svgs/learning-hat.svg
similarity index 100%
rename from src-ts/tools/learn/learn-lib/svgs/learning-hat.svg
rename to src/apps/learn/src/lib/components/svgs/learning-hat.svg
diff --git a/src-ts/tools/learn/learn-lib/svgs/tc-logo.svg b/src/apps/learn/src/lib/components/svgs/tc-logo.svg
similarity index 100%
rename from src-ts/tools/learn/learn-lib/svgs/tc-logo.svg
rename to src/apps/learn/src/lib/components/svgs/tc-logo.svg
diff --git a/src-ts/tools/learn/learn-lib/svgs/vendor-fcc-logo-black.svg b/src/apps/learn/src/lib/components/svgs/vendor-fcc-logo-black.svg
similarity index 100%
rename from src-ts/tools/learn/learn-lib/svgs/vendor-fcc-logo-black.svg
rename to src/apps/learn/src/lib/components/svgs/vendor-fcc-logo-black.svg
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/TCACertificatePreview.module.scss b/src/apps/learn/src/lib/components/tca-certificate-preview/TCACertificatePreview.module.scss
similarity index 94%
rename from src-ts/tools/learn/learn-lib/tca-certificate-preview/TCACertificatePreview.module.scss
rename to src/apps/learn/src/lib/components/tca-certificate-preview/TCACertificatePreview.module.scss
index 2a31ea57d..98ac6cee0 100644
--- a/src-ts/tools/learn/learn-lib/tca-certificate-preview/TCACertificatePreview.module.scss
+++ b/src/apps/learn/src/lib/components/tca-certificate-preview/TCACertificatePreview.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../lib/styles/includes';
+@import '@libs/ui/styles/includes';
.wrap {
flex: 1 1 auto;
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/TCACertificatePreview.tsx b/src/apps/learn/src/lib/components/tca-certificate-preview/TCACertificatePreview.tsx
similarity index 93%
rename from src-ts/tools/learn/learn-lib/tca-certificate-preview/TCACertificatePreview.tsx
rename to src/apps/learn/src/lib/components/tca-certificate-preview/TCACertificatePreview.tsx
index 0a73926da..64bb3696f 100644
--- a/src-ts/tools/learn/learn-lib/tca-certificate-preview/TCACertificatePreview.tsx
+++ b/src/apps/learn/src/lib/components/tca-certificate-preview/TCACertificatePreview.tsx
@@ -1,7 +1,8 @@
import { FC, MutableRefObject, ReactNode, useRef } from 'react'
import classNames from 'classnames'
-import { TCACertification, useCertificateScaling } from '..'
+import { useCertificateScaling } from '../use-certificate-scaling-hook'
+import { TCACertification } from '../../data-providers'
import { TCACertificate } from './tca-certificate'
import styles from './TCACertificatePreview.module.scss'
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/index.ts b/src/apps/learn/src/lib/components/tca-certificate-preview/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/tca-certificate-preview/index.ts
rename to src/apps/learn/src/lib/components/tca-certificate-preview/index.ts
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.module.scss b/src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/TCACertificate.module.scss
similarity index 90%
rename from src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.module.scss
rename to src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/TCACertificate.module.scss
index 563897365..cac450305 100644
--- a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.module.scss
+++ b/src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/TCACertificate.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../../lib/styles/includes';
+@import '@libs/ui/styles/includes';
.wrap {
background-color: $tc-white;
@@ -71,7 +71,7 @@
.details {
width: 55%;
- padding: calc($space-mx + $space-lg);
+ padding: calc($sp-10 + $sp-4);
display: flex;
flex-direction: column;
flex: 1;
@@ -94,7 +94,7 @@
height: 40px;
background-color: $tc-white;
opacity: 0.3;
- margin: 0 $space-lg;
+ margin: 0 $sp-4;
}
}
}
@@ -110,12 +110,12 @@
font-size: 34px;
line-height: 32px;
color: $black-100;
- margin-bottom: $space-xl;
+ margin-bottom: $sp-5;
}
.certText {
font-size: 13px;
- margin-bottom: $space-sm;
+ margin-bottom: $sp-2;
}
.certTitle {
@@ -138,7 +138,7 @@
align-items: center;
.qrCode {
- margin-right: $space-lg;
+ margin-right: $sp-4;
opacity: 0.7;
border: 0.5px solid #D4D4D4;
border-radius: 2px;
@@ -155,7 +155,7 @@
}
.gridSeparator {
- margin-bottom: $space-sm;
+ margin-bottom: $sp-2;
}
}
}
@@ -168,7 +168,7 @@
height: 2px;
background: $black-10;
border-radius: 1px;
- margin: $space-xs 0;
+ margin: $sp-1 0;
}
>span {
@@ -187,6 +187,6 @@
// print/download styles
:global(.canvas-clone) {
.certText {
- margin-bottom: $space-xxxl !important;
+ margin-bottom: $sp-7 !important;
}
}
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.tsx b/src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/TCACertificate.tsx
similarity index 96%
rename from src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.tsx
rename to src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/TCACertificate.tsx
index 067644e1e..755f23888 100644
--- a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.tsx
+++ b/src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/TCACertificate.tsx
@@ -3,9 +3,10 @@ import { QRCodeSVG } from 'qrcode.react'
import classNames from 'classnames'
import moment from 'moment'
-import { TCAcademyLogoWhiteSvg, TCLogoSvg } from '../../../../../lib'
-import { LearnConfig } from '../../../learn-config'
-import { TCACertificateType, TCACertification } from '../../data-providers'
+import { TCAcademyLogoWhiteSvg, TCLogoSvg } from '~/libs/ui'
+
+import { LearnConfig } from '../../../../config'
+import { TCACertificateType, TCACertification } from '../../../data-providers'
import { CertificateBadgeIcon } from '../../dynamic-icons'
import { DougSigSvg } from '../../svgs'
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.module.scss b/src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.module.scss
similarity index 92%
rename from src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.module.scss
rename to src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.module.scss
index a8b7b0ecb..2538bcf9c 100644
--- a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.module.scss
+++ b/src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../lib/styles/includes';
+@import '@libs/ui/styles/includes';
.bg {
path:global(#tca-cert-bg_grad-el) {
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.tsx b/src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.tsx
similarity index 89%
rename from src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.tsx
rename to src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.tsx
index a220af954..f047608a6 100644
--- a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.tsx
+++ b/src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.tsx
@@ -1,7 +1,7 @@
import { FC } from 'react'
import classNames from 'classnames'
-import { TCACertificateType } from '../../../data-providers'
+import { TCACertificateType } from '../../../../data-providers'
import { ReactComponent as BackgroundSvg } from './certificate-bg.svg'
import styles from './CertificateBackground.module.scss'
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/certificate-bg.svg b/src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/certificate-background/certificate-bg.svg
similarity index 100%
rename from src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/certificate-bg.svg
rename to src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/certificate-background/certificate-bg.svg
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/index.ts b/src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/certificate-background/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/index.ts
rename to src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/certificate-background/index.ts
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/index.ts b/src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/index.ts
rename to src/apps/learn/src/lib/components/tca-certificate-preview/tca-certificate/index.ts
diff --git a/src-ts/tools/learn/learn-lib/tca-certification-progress-box/TCACertificationProgressBox.module.scss b/src/apps/learn/src/lib/components/tca-certification-progress-box/TCACertificationProgressBox.module.scss
similarity index 81%
rename from src-ts/tools/learn/learn-lib/tca-certification-progress-box/TCACertificationProgressBox.module.scss
rename to src/apps/learn/src/lib/components/tca-certification-progress-box/TCACertificationProgressBox.module.scss
index aa50b2630..0aedee8eb 100644
--- a/src-ts/tools/learn/learn-lib/tca-certification-progress-box/TCACertificationProgressBox.module.scss
+++ b/src/apps/learn/src/lib/components/tca-certification-progress-box/TCACertificationProgressBox.module.scss
@@ -1,19 +1,19 @@
-@import '../../../../lib/styles/includes';
+@import '@libs/ui/styles/includes';
.wrap {
border: $border dashed $blue-140;
- border-radius: $space-sm;
+ border-radius: $sp-2;
- padding: $space-xxl;
+ padding: $sp-6;
@include ltemd {
- padding: $space-lg;
+ padding: $sp-4;
}
}
.header {
display: flex;
- gap: $space-lg;
+ gap: $sp-4;
align-items: flex-start;
svg {
@@ -27,7 +27,7 @@
}
:global(.body-main-bold) {
- margin-top: $space-xs;
+ margin-top: $sp-1;
}
}
}
@@ -35,16 +35,16 @@
.certTitle {
display: flex;
align-items: flex-start;
- gap: $space-xs;
+ gap: $sp-1;
}
.desc {
- margin-top: $space-lg;
+ margin-top: $sp-4;
}
.link {
display: block;
- margin-top: $space-lg;
+ margin-top: $sp-4;
font-family: $font-roboto;
font-size: 12px;
line-height: 14px;
@@ -55,7 +55,7 @@
.externalLink {
display: flex;
- gap: $space-xs;
+ gap: $sp-1;
height: 24px;
align-items: center;
color: $turq-160;
@@ -70,10 +70,10 @@
align-items: center;
background: $black-5;
- border-radius: $space-sm;
+ border-radius: $sp-2;
- margin-top: $space-lg;
- padding: $space-sm;
+ margin-top: $sp-4;
+ padding: $sp-2;
padding-left: 0;
.icon {
@@ -101,7 +101,7 @@
background: $black-5;
color: $tc-black;
border: 0 none;
- padding: $space-lg;
+ padding: $sp-4;
.header {
> svg {
diff --git a/src-ts/tools/learn/learn-lib/tca-certification-progress-box/TCACertificationProgressBox.tsx b/src/apps/learn/src/lib/components/tca-certification-progress-box/TCACertificationProgressBox.tsx
similarity index 96%
rename from src-ts/tools/learn/learn-lib/tca-certification-progress-box/TCACertificationProgressBox.tsx
rename to src/apps/learn/src/lib/components/tca-certification-progress-box/TCACertificationProgressBox.tsx
index 10f59ca30..4ffa05565 100644
--- a/src-ts/tools/learn/learn-lib/tca-certification-progress-box/TCACertificationProgressBox.tsx
+++ b/src/apps/learn/src/lib/components/tca-certification-progress-box/TCACertificationProgressBox.tsx
@@ -3,9 +3,11 @@ import { FC, ReactNode, useMemo } from 'react'
import { Link } from 'react-router-dom'
import classNames from 'classnames'
-import { IconOutline, IconSolid } from '../../../../lib'
+import { IconOutline, IconSolid } from '~/libs/ui'
+
+import { CertificateBadgeIcon } from '../dynamic-icons'
+import { getTCACertificationPath } from '../../../learn.routes'
import {
- CertificateBadgeIcon,
LearnUserCertificationProgress,
TCACertification,
TCACertificationProgressProviderData,
@@ -15,8 +17,7 @@ import {
useGetUserCertifications,
UserCertificationProgressStatus,
UserCertificationsProviderData,
-} from '..'
-import { getTCACertificationPath } from '../../learn.routes'
+} from '../../data-providers'
import styles from './TCACertificationProgressBox.module.scss'
diff --git a/src-ts/tools/learn/learn-lib/tca-certification-progress-box/index.ts b/src/apps/learn/src/lib/components/tca-certification-progress-box/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/tca-certification-progress-box/index.ts
rename to src/apps/learn/src/lib/components/tca-certification-progress-box/index.ts
diff --git a/src-ts/tools/learn/learn-lib/tca-share-certificate-modal/TCAShareCertificateModal.module.scss b/src/apps/learn/src/lib/components/tca-share-certificate-modal/TCAShareCertificateModal.module.scss
similarity index 80%
rename from src-ts/tools/learn/learn-lib/tca-share-certificate-modal/TCAShareCertificateModal.module.scss
rename to src/apps/learn/src/lib/components/tca-share-certificate-modal/TCAShareCertificateModal.module.scss
index 0442ece0c..06930336a 100644
--- a/src-ts/tools/learn/learn-lib/tca-share-certificate-modal/TCAShareCertificateModal.module.scss
+++ b/src/apps/learn/src/lib/components/tca-share-certificate-modal/TCAShareCertificateModal.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../lib/styles/includes';
+@import '@libs/ui/styles/includes';
.shareCertificateModal {
&:global(.react-responsive-modal-modal) {
@@ -9,11 +9,11 @@
color: $turq-160;
}
:global(.modal-body) {
- gap: $space-lg;
+ gap: $sp-4;
}
}
- .share-btn:global(.button.icon) {
+ .share-btn {
@include icon-mxx;
border-radius: 50%;
color: $blue-140;
@@ -24,16 +24,16 @@
align-items: center;
justify-content: center;
- padding: $space-sm;
+ padding: $sp-2;
&:hover {
background: transparent;
}
- svg {
+ :global(.btn-icon) {
@include icon-xxl;
- > path {
+ svg > path {
fill: currentColor;
}
}
@@ -46,15 +46,15 @@
.shareBtnsWrap {
display: flex;
- gap: $space-lg;
+ gap: $sp-4;
}
.shareUrl {
display: flex;
- gap: $space-lg;
+ gap: $sp-4;
background: $black-5;
- padding: $space-sm $space-lg;
- border-radius: $space-sm;
+ padding: $sp-2 $sp-4;
+ border-radius: $sp-2;
input {
flex: 1 1 auto;
diff --git a/src-ts/tools/learn/learn-lib/tca-share-certificate-modal/TCAShareCertificateModal.tsx b/src/apps/learn/src/lib/components/tca-share-certificate-modal/TCAShareCertificateModal.tsx
similarity index 96%
rename from src-ts/tools/learn/learn-lib/tca-share-certificate-modal/TCAShareCertificateModal.tsx
rename to src/apps/learn/src/lib/components/tca-share-certificate-modal/TCAShareCertificateModal.tsx
index b544c3985..8f9cd14a2 100644
--- a/src-ts/tools/learn/learn-lib/tca-share-certificate-modal/TCAShareCertificateModal.tsx
+++ b/src/apps/learn/src/lib/components/tca-share-certificate-modal/TCAShareCertificateModal.tsx
@@ -4,12 +4,12 @@ import { toast } from 'react-toastify'
import {
BaseModal,
BaseModalProps,
- copyTextToClipboard,
FacebookSocialShareBtn,
IconOutline,
LinkedinSocialShareBtn,
TwitterSocialShareBtn,
-} from '../../../../lib'
+} from '~/libs/ui'
+import { copyTextToClipboard } from '~/libs/shared'
import styles from './TCAShareCertificateModal.module.scss'
diff --git a/src-ts/tools/learn/learn-lib/tca-share-certificate-modal/index.ts b/src/apps/learn/src/lib/components/tca-share-certificate-modal/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/tca-share-certificate-modal/index.ts
rename to src/apps/learn/src/lib/components/tca-share-certificate-modal/index.ts
diff --git a/src-ts/tools/learn/learn-lib/tca-share-certificate-modal/use-tca-share-certificate-modal.tsx b/src/apps/learn/src/lib/components/tca-share-certificate-modal/use-tca-share-certificate-modal.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/tca-share-certificate-modal/use-tca-share-certificate-modal.tsx
rename to src/apps/learn/src/lib/components/tca-share-certificate-modal/use-tca-share-certificate-modal.tsx
diff --git a/src-ts/tools/learn/learn-lib/use-certificate-canvas-hook/index.ts b/src/apps/learn/src/lib/components/use-certificate-canvas-hook/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/use-certificate-canvas-hook/index.ts
rename to src/apps/learn/src/lib/components/use-certificate-canvas-hook/index.ts
diff --git a/src-ts/tools/learn/learn-lib/use-certificate-canvas-hook/useCertificateCanvas.hook.tsx b/src/apps/learn/src/lib/components/use-certificate-canvas-hook/useCertificateCanvas.hook.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/use-certificate-canvas-hook/useCertificateCanvas.hook.tsx
rename to src/apps/learn/src/lib/components/use-certificate-canvas-hook/useCertificateCanvas.hook.tsx
diff --git a/src-ts/tools/learn/learn-lib/use-certificate-print-hook/index.ts b/src/apps/learn/src/lib/components/use-certificate-print-hook/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/use-certificate-print-hook/index.ts
rename to src/apps/learn/src/lib/components/use-certificate-print-hook/index.ts
diff --git a/src-ts/tools/learn/learn-lib/use-certificate-print-hook/useCertificatePrint.hook.tsx b/src/apps/learn/src/lib/components/use-certificate-print-hook/useCertificatePrint.hook.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/use-certificate-print-hook/useCertificatePrint.hook.tsx
rename to src/apps/learn/src/lib/components/use-certificate-print-hook/useCertificatePrint.hook.tsx
diff --git a/src-ts/tools/learn/learn-lib/use-certificate-scaling-hook/index.ts b/src/apps/learn/src/lib/components/use-certificate-scaling-hook/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/use-certificate-scaling-hook/index.ts
rename to src/apps/learn/src/lib/components/use-certificate-scaling-hook/index.ts
diff --git a/src-ts/tools/learn/learn-lib/use-certificate-scaling-hook/useCertificateScaling.hook.tsx b/src/apps/learn/src/lib/components/use-certificate-scaling-hook/useCertificateScaling.hook.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/use-certificate-scaling-hook/useCertificateScaling.hook.tsx
rename to src/apps/learn/src/lib/components/use-certificate-scaling-hook/useCertificateScaling.hook.tsx
diff --git a/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.module.scss b/src/apps/learn/src/lib/components/wave-hero/WaveHero.module.scss
old mode 100755
new mode 100644
similarity index 75%
rename from src-ts/tools/learn/learn-lib/wave-hero/WaveHero.module.scss
rename to src/apps/learn/src/lib/components/wave-hero/WaveHero.module.scss
index 7c1bbc93e..e00c0d944
--- a/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.module.scss
+++ b/src/apps/learn/src/lib/components/wave-hero/WaveHero.module.scss
@@ -1,5 +1,5 @@
-@use '../../../../lib/styles/typography';
-@import '../../../../lib/styles/includes';
+@use '@libs/ui/styles/typography';
+@import '@libs/ui/styles/includes';
.hero {
&-wrap {
@@ -8,8 +8,8 @@
padding-bottom: 100px;
@include ltelg {
- background-size: 100vw $space-lg, auto;
- padding-bottom: $space-mx;
+ background-size: 100vw $sp-4, auto;
+ padding-bottom: $sp-10;
}
&:global(.light) {
@@ -24,7 +24,7 @@
background-size: 1440px 40px, auto;
padding-bottom: 84px;
@include ltelg {
- background-size: 100vw $space-lg, auto;
+ background-size: 100vw $sp-4, auto;
padding-bottom: 60px;
}
@include ltemd {
@@ -34,28 +34,28 @@
}
&-inner {
- padding: calc($space-mx * 2) 0 $space-lg;
+ padding: calc($sp-10 * 2) 0 $sp-4;
.hero-wrap:global(.grey) & {
- padding-top: $space-xxxxl;
+ padding-top: $sp-8;
padding-bottom: 0;
}
@include contentWidth;
@include ltelg {
- padding-bottom: $space-mx;
+ padding-bottom: $sp-10;
}
@include ltemd {
- padding-top: calc($space-mx * 4);
- padding-bottom: $space-xxl;
+ padding-top: calc($sp-10 * 4);
+ padding-bottom: $sp-6;
}
}
&-content {
display: flex;
- gap: calc($space-mx * 2);
+ gap: calc($sp-10 * 2);
color: $tc-white;
@@ -66,7 +66,7 @@
h1 {
font-size: 80px;
line-height: 72px;
- margin-bottom: $space-xxxxl;
+ margin-bottom: $sp-8;
@include ltemd {
font-size: 42px;
@@ -76,11 +76,11 @@
}
@include ltelg {
- gap: $space-mx;
+ gap: $sp-10;
}
@include ltemd {
- gap: $space-xxl;
+ gap: $sp-6;
flex-direction: column;
}
}
@@ -91,7 +91,7 @@
&-text {
@extend .body-large;
- margin-top: $space-sm;
+ margin-top: $sp-2;
max-width: 910px;
}
}
diff --git a/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.tsx b/src/apps/learn/src/lib/components/wave-hero/WaveHero.tsx
old mode 100755
new mode 100644
similarity index 100%
rename from src-ts/tools/learn/learn-lib/wave-hero/WaveHero.tsx
rename to src/apps/learn/src/lib/components/wave-hero/WaveHero.tsx
diff --git a/src-ts/tools/learn/learn-lib/wave-hero/index.ts b/src/apps/learn/src/lib/components/wave-hero/index.ts
old mode 100755
new mode 100644
similarity index 100%
rename from src-ts/tools/learn/learn-lib/wave-hero/index.ts
rename to src/apps/learn/src/lib/components/wave-hero/index.ts
diff --git a/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-banner-img-mobile.png b/src/apps/learn/src/lib/components/wave-hero/learn-welcome-banner-img-mobile.png
similarity index 100%
rename from src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-banner-img-mobile.png
rename to src/apps/learn/src/lib/components/wave-hero/learn-welcome-banner-img-mobile.png
diff --git a/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-banner-img.png b/src/apps/learn/src/lib/components/wave-hero/learn-welcome-banner-img.png
similarity index 100%
rename from src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-banner-img.png
rename to src/apps/learn/src/lib/components/wave-hero/learn-welcome-banner-img.png
diff --git a/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-bg-curve-white.png b/src/apps/learn/src/lib/components/wave-hero/learn-welcome-bg-curve-white.png
similarity index 100%
rename from src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-bg-curve-white.png
rename to src/apps/learn/src/lib/components/wave-hero/learn-welcome-bg-curve-white.png
diff --git a/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-bg-curve.png b/src/apps/learn/src/lib/components/wave-hero/learn-welcome-bg-curve.png
similarity index 100%
rename from src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-bg-curve.png
rename to src/apps/learn/src/lib/components/wave-hero/learn-welcome-bg-curve.png
diff --git a/src-ts/tools/learn/learn-lib/data-providers/all-certifications-provider/all-certifications-provider-data.model.ts b/src/apps/learn/src/lib/data-providers/all-certifications-provider/all-certifications-provider-data.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/all-certifications-provider/all-certifications-provider-data.model.ts
rename to src/apps/learn/src/lib/data-providers/all-certifications-provider/all-certifications-provider-data.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/all-certifications-provider/all-certifications.provider.tsx b/src/apps/learn/src/lib/data-providers/all-certifications-provider/all-certifications.provider.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/all-certifications-provider/all-certifications.provider.tsx
rename to src/apps/learn/src/lib/data-providers/all-certifications-provider/all-certifications.provider.tsx
diff --git a/src-ts/tools/learn/learn-lib/data-providers/all-certifications-provider/index.ts b/src/apps/learn/src/lib/data-providers/all-certifications-provider/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/all-certifications-provider/index.ts
rename to src/apps/learn/src/lib/data-providers/all-certifications-provider/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/all-certifications-provider/learn-certificate-track-type.ts b/src/apps/learn/src/lib/data-providers/all-certifications-provider/learn-certificate-track-type.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/all-certifications-provider/learn-certificate-track-type.ts
rename to src/apps/learn/src/lib/data-providers/all-certifications-provider/learn-certificate-track-type.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/all-certifications-provider/learn-certification-level-type.ts b/src/apps/learn/src/lib/data-providers/all-certifications-provider/learn-certification-level-type.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/all-certifications-provider/learn-certification-level-type.ts
rename to src/apps/learn/src/lib/data-providers/all-certifications-provider/learn-certification-level-type.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/all-certifications-provider/learn-certification.model.ts b/src/apps/learn/src/lib/data-providers/all-certifications-provider/learn-certification.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/all-certifications-provider/learn-certification.model.ts
rename to src/apps/learn/src/lib/data-providers/all-certifications-provider/learn-certification.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/courses-provider/courses-provider-data.model.ts b/src/apps/learn/src/lib/data-providers/courses-provider/courses-provider-data.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/courses-provider/courses-provider-data.model.ts
rename to src/apps/learn/src/lib/data-providers/courses-provider/courses-provider-data.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/courses-provider/courses.provider.tsx b/src/apps/learn/src/lib/data-providers/courses-provider/courses.provider.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/courses-provider/courses.provider.tsx
rename to src/apps/learn/src/lib/data-providers/courses-provider/courses.provider.tsx
diff --git a/src-ts/tools/learn/learn-lib/data-providers/courses-provider/index.ts b/src/apps/learn/src/lib/data-providers/courses-provider/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/courses-provider/index.ts
rename to src/apps/learn/src/lib/data-providers/courses-provider/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/courses-provider/learn-course.model.ts b/src/apps/learn/src/lib/data-providers/courses-provider/learn-course.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/courses-provider/learn-course.model.ts
rename to src/apps/learn/src/lib/data-providers/courses-provider/learn-course.model.ts
diff --git a/src/apps/learn/src/lib/data-providers/index.ts b/src/apps/learn/src/lib/data-providers/index.ts
new file mode 100644
index 000000000..c9fbc91a9
--- /dev/null
+++ b/src/apps/learn/src/lib/data-providers/index.ts
@@ -0,0 +1,8 @@
+export * from './all-certifications-provider'
+export * from './courses-provider'
+export * from './lesson-provider'
+export * from './payments'
+export * from './resource-provider-provider'
+export * from './tca-certifications-provider'
+export * from './user-certifications-provider'
+export * from './user-completed-certifications-provider'
diff --git a/src-ts/tools/learn/learn-lib/data-providers/lesson-provider/index.ts b/src/apps/learn/src/lib/data-providers/lesson-provider/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/lesson-provider/index.ts
rename to src/apps/learn/src/lib/data-providers/lesson-provider/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/lesson-provider/learn-lesson-meta.model.ts b/src/apps/learn/src/lib/data-providers/lesson-provider/learn-lesson-meta.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/lesson-provider/learn-lesson-meta.model.ts
rename to src/apps/learn/src/lib/data-providers/lesson-provider/learn-lesson-meta.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/lesson-provider/learn-lesson.model.ts b/src/apps/learn/src/lib/data-providers/lesson-provider/learn-lesson.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/lesson-provider/learn-lesson.model.ts
rename to src/apps/learn/src/lib/data-providers/lesson-provider/learn-lesson.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/lesson-provider/learn-module.model.ts b/src/apps/learn/src/lib/data-providers/lesson-provider/learn-module.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/lesson-provider/learn-module.model.ts
rename to src/apps/learn/src/lib/data-providers/lesson-provider/learn-module.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/lesson-provider/lesson-provider-data.model.ts b/src/apps/learn/src/lib/data-providers/lesson-provider/lesson-provider-data.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/lesson-provider/lesson-provider-data.model.ts
rename to src/apps/learn/src/lib/data-providers/lesson-provider/lesson-provider-data.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/lesson-provider/lesson.provider.tsx b/src/apps/learn/src/lib/data-providers/lesson-provider/lesson.provider.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/lesson-provider/lesson.provider.tsx
rename to src/apps/learn/src/lib/data-providers/lesson-provider/lesson.provider.tsx
diff --git a/src-ts/tools/learn/learn-lib/data-providers/payments/index.ts b/src/apps/learn/src/lib/data-providers/payments/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/payments/index.ts
rename to src/apps/learn/src/lib/data-providers/payments/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/payments/member-enroll-payment.model.ts b/src/apps/learn/src/lib/data-providers/payments/member-enroll-payment.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/payments/member-enroll-payment.model.ts
rename to src/apps/learn/src/lib/data-providers/payments/member-enroll-payment.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/payments/payments.store.ts b/src/apps/learn/src/lib/data-providers/payments/payments.store.ts
similarity index 89%
rename from src-ts/tools/learn/learn-lib/data-providers/payments/payments.store.ts
rename to src/apps/learn/src/lib/data-providers/payments/payments.store.ts
index 677758a59..890eb2c15 100644
--- a/src-ts/tools/learn/learn-lib/data-providers/payments/payments.store.ts
+++ b/src/apps/learn/src/lib/data-providers/payments/payments.store.ts
@@ -1,4 +1,5 @@
-import { xhrPostAsync } from '../../../../../lib'
+import { xhrPostAsync } from '~/libs/core'
+
import { learnUrlGet } from '../../functions'
import { MemberEnrollPaymentRequest, MemberEnrollPaymentSheet } from './member-enroll-payment.model'
diff --git a/src-ts/tools/learn/learn-lib/data-providers/payments/stripe/stripe-price.model.ts b/src/apps/learn/src/lib/data-providers/payments/stripe/stripe-price.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/payments/stripe/stripe-price.model.ts
rename to src/apps/learn/src/lib/data-providers/payments/stripe/stripe-price.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/payments/stripe/stripe-product.model.ts b/src/apps/learn/src/lib/data-providers/payments/stripe/stripe-product.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/payments/stripe/stripe-product.model.ts
rename to src/apps/learn/src/lib/data-providers/payments/stripe/stripe-product.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/payments/stripe/stripe-product.provider.ts b/src/apps/learn/src/lib/data-providers/payments/stripe/stripe-product.provider.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/payments/stripe/stripe-product.provider.ts
rename to src/apps/learn/src/lib/data-providers/payments/stripe/stripe-product.provider.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/resource-provider-provider/index.ts b/src/apps/learn/src/lib/data-providers/resource-provider-provider/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/resource-provider-provider/index.ts
rename to src/apps/learn/src/lib/data-providers/resource-provider-provider/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/resource-provider-provider/resource-provider-data.model.ts b/src/apps/learn/src/lib/data-providers/resource-provider-provider/resource-provider-data.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/resource-provider-provider/resource-provider-data.model.ts
rename to src/apps/learn/src/lib/data-providers/resource-provider-provider/resource-provider-data.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/resource-provider-provider/resource-provider.model.ts b/src/apps/learn/src/lib/data-providers/resource-provider-provider/resource-provider.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/resource-provider-provider/resource-provider.model.ts
rename to src/apps/learn/src/lib/data-providers/resource-provider-provider/resource-provider.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/resource-provider-provider/resource-provider.provider.tsx b/src/apps/learn/src/lib/data-providers/resource-provider-provider/resource-provider.provider.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/resource-provider-provider/resource-provider.provider.tsx
rename to src/apps/learn/src/lib/data-providers/resource-provider-provider/resource-provider.provider.tsx
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/index.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/index.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-all-certifications-progress/index.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-all-certifications-progress/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-all-certifications-progress/index.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-all-certifications-progress/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-all-certifications-progress/tca-all-certifications-progress-data.model.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-all-certifications-progress/tca-all-certifications-progress-data.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-all-certifications-progress/tca-all-certifications-progress-data.model.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-all-certifications-progress/tca-all-certifications-progress-data.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-all-certifications-progress/tca-all-certifications-progress.provider.tsx b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-all-certifications-progress/tca-all-certifications-progress.provider.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-all-certifications-progress/tca-all-certifications-progress.provider.tsx
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-all-certifications-progress/tca-all-certifications-progress.provider.tsx
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-all-certifications/index.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-all-certifications/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-all-certifications/index.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-all-certifications/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-all-certifications/tca-all-certifications-data.model.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-all-certifications/tca-all-certifications-data.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-all-certifications/tca-all-certifications-data.model.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-all-certifications/tca-all-certifications-data.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-all-certifications/tca-all-certifications.provider.tsx b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-all-certifications/tca-all-certifications.provider.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-all-certifications/tca-all-certifications.provider.tsx
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-all-certifications/tca-all-certifications.provider.tsx
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certificate-level-type.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certificate-level-type.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certificate-level-type.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certificate-level-type.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certificate-status-type.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certificate-status-type.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certificate-status-type.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certificate-status-type.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certificate-type.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certificate-type.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certificate-type.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certificate-type.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-category.model.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-category.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-category.model.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-category.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-completion-time-range.model.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-completion-time-range.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-completion-time-range.model.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-completion-time-range.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment-base.model.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-enrollment-base.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment-base.model.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-enrollment-base.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/index.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-enrollment/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/index.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-enrollment/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/index.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-progress/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/index.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-progress/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress-data.model.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress-data.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress-data.model.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress-data.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.provider.tsx b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.provider.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.provider.tsx
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.provider.tsx
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-fcc-certification-progress.model.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-fcc-certification-progress.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-fcc-certification-progress.model.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-fcc-certification-progress.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-provider.model-base.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-provider.model-base.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-provider.model-base.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-provider.model-base.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-provider.model.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-provider.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-provider.model.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-provider.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-resource.model.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-resource.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-resource.model.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-resource.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-resourceable.type.tsx b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-resourceable.type.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-resourceable.type.tsx
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-resourceable.type.tsx
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-validation/index.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-validation/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-validation/index.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-validation/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-validation/tca-validation-provider.tsx b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-validation/tca-validation-provider.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-validation/tca-validation-provider.tsx
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification-validation/tca-validation-provider.tsx
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification.model.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification.model.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification/index.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification/index.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification/tca-certification-data.model.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification/tca-certification-data.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification/tca-certification-data.model.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification/tca-certification-data.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification/tca-certification.provider.tsx b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification/tca-certification.provider.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification/tca-certification.provider.tsx
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-certification/tca-certification.provider.tsx
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-emsi-skill-type.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-emsi-skill-type.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-emsi-skill-type.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-emsi-skill-type.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-provider-type.ts b/src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-provider-type.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-provider-type.ts
rename to src/apps/learn/src/lib/data-providers/tca-certifications-provider/tca-provider-type.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/index.ts b/src/apps/learn/src/lib/data-providers/user-certifications-provider/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/index.ts
rename to src/apps/learn/src/lib/data-providers/user-certifications-provider/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certification-completed.model.ts b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certification-completed.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certification-completed.model.ts
rename to src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certification-completed.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certification-in-progress.model.ts b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certification-in-progress.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certification-in-progress.model.ts
rename to src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certification-in-progress.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certification-progress-provider-data.model.ts b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certification-progress-provider-data.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certification-progress-provider-data.model.ts
rename to src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certification-progress-provider-data.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certification-progress.provider.tsx b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certification-progress.provider.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certification-progress.provider.tsx
rename to src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certification-progress.provider.tsx
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/index.ts b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/index.ts
rename to src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/learn-module-progress.model.ts b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/learn-module-progress.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/learn-module-progress.model.ts
rename to src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/learn-module-progress.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/learn-module-status.enum.ts b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/learn-module-status.enum.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/learn-module-status.enum.ts
rename to src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/learn-module-status.enum.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/learn-user-certification-progress.model.ts b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/learn-user-certification-progress.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/learn-user-certification-progress.model.ts
rename to src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/learn-user-certification-progress.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/user-certification-progress-status.enum.ts b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/user-certification-progress-status.enum.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/user-certification-progress-status.enum.ts
rename to src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/user-certification-progress-status.enum.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/user-certification-progress.store.ts b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/user-certification-progress.store.ts
similarity index 95%
rename from src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/user-certification-progress.store.ts
rename to src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/user-certification-progress.store.ts
index ddd57420c..54b8f1ba2 100644
--- a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/user-certification-progress.store.ts
+++ b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/user-certification-progress.store.ts
@@ -1,5 +1,6 @@
-import { GenericDataObject } from '../../../../../../lib'
-import { LearnConfig } from '../../../../learn-config'
+import { GenericDataObject } from '~/libs/shared'
+
+import { LearnConfig } from '../../../../config'
import { getUserCertificateUrl } from '../../../../learn.routes'
import { learnUrlGet, learnXhrPostAsync, learnXhrPutAsync } from '../../../functions'
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/user-certification-update-progress-actions.enum.ts b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/user-certification-update-progress-actions.enum.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/user-certification-update-progress-actions.enum.ts
rename to src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-functions/user-certification-update-progress-actions.enum.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-provider-data.model.ts b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-provider-data.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-provider-data.model.ts
rename to src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications-provider-data.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications.provider.tsx b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications.provider.tsx
similarity index 93%
rename from src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications.provider.tsx
rename to src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications.provider.tsx
index d3408595b..c91a7865f 100644
--- a/src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications.provider.tsx
+++ b/src/apps/learn/src/lib/data-providers/user-certifications-provider/user-certifications.provider.tsx
@@ -1,7 +1,9 @@
import { useContext, useMemo } from 'react'
import useSWR, { SWRResponse } from 'swr'
-import { errorHandle, profileContext, ProfileContextData } from '../../../../../lib'
+import { profileContext, ProfileContextData } from '~/libs/core'
+import { handleError } from '~/libs/shared'
+
import { learnUrlGet } from '../../functions'
import { UserCertificationCompleted } from './user-certification-completed.model'
@@ -55,7 +57,7 @@ export function useGetUserCertifications(
)
if (error) {
- errorHandle(error, 'There was an error getting your course progress.')
+ handleError(error, 'There was an error getting your course progress.')
}
return {
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-completed-certifications-provider/index.ts b/src/apps/learn/src/lib/data-providers/user-completed-certifications-provider/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-completed-certifications-provider/index.ts
rename to src/apps/learn/src/lib/data-providers/user-completed-certifications-provider/index.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-completed-certifications-provider/user-completed-certifications-provider-data.model.ts b/src/apps/learn/src/lib/data-providers/user-completed-certifications-provider/user-completed-certifications-provider-data.model.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-completed-certifications-provider/user-completed-certifications-provider-data.model.ts
rename to src/apps/learn/src/lib/data-providers/user-completed-certifications-provider/user-completed-certifications-provider-data.model.ts
diff --git a/src-ts/tools/learn/learn-lib/data-providers/user-completed-certifications-provider/user-completed-certifications.provider.tsx b/src/apps/learn/src/lib/data-providers/user-completed-certifications-provider/user-completed-certifications.provider.tsx
similarity index 100%
rename from src-ts/tools/learn/learn-lib/data-providers/user-completed-certifications-provider/user-completed-certifications.provider.tsx
rename to src/apps/learn/src/lib/data-providers/user-completed-certifications-provider/user-completed-certifications.provider.tsx
diff --git a/src-ts/tools/learn/learn-lib/functions/clean-fcc-certif-title.ts b/src/apps/learn/src/lib/functions/clean-fcc-certif-title.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/functions/clean-fcc-certif-title.ts
rename to src/apps/learn/src/lib/functions/clean-fcc-certif-title.ts
diff --git a/src-ts/tools/learn/learn-lib/functions/hide-siblings.ts b/src/apps/learn/src/lib/functions/hide-siblings.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/functions/hide-siblings.ts
rename to src/apps/learn/src/lib/functions/hide-siblings.ts
diff --git a/src-ts/tools/learn/learn-lib/functions/index.ts b/src/apps/learn/src/lib/functions/index.ts
similarity index 100%
rename from src-ts/tools/learn/learn-lib/functions/index.ts
rename to src/apps/learn/src/lib/functions/index.ts
diff --git a/src-ts/tools/learn/learn-lib/functions/learn-url.functions.ts b/src/apps/learn/src/lib/functions/learn-url.functions.ts
old mode 100755
new mode 100644
similarity index 76%
rename from src-ts/tools/learn/learn-lib/functions/learn-url.functions.ts
rename to src/apps/learn/src/lib/functions/learn-url.functions.ts
index 492d60c5d..6aae4086d
--- a/src-ts/tools/learn/learn-lib/functions/learn-url.functions.ts
+++ b/src/apps/learn/src/lib/functions/learn-url.functions.ts
@@ -1,4 +1,4 @@
-import { LearnConfig } from '../../learn-config'
+import { LearnConfig } from '../../config'
export function get(...parts: Array
+ Certificate Not Found
+
+)
+
+export default CertificateNotFound
diff --git a/src-ts/tools/learn/tca-certificate/certificate-not-found/badge.svg b/src/apps/learn/src/tca-certificate/certificate-not-found/badge.svg
similarity index 100%
rename from src-ts/tools/learn/tca-certificate/certificate-not-found/badge.svg
rename to src/apps/learn/src/tca-certificate/certificate-not-found/badge.svg
diff --git a/src-ts/tools/learn/tca-certificate/certificate-not-found/bg.svg b/src/apps/learn/src/tca-certificate/certificate-not-found/bg.svg
similarity index 100%
rename from src-ts/tools/learn/tca-certificate/certificate-not-found/bg.svg
rename to src/apps/learn/src/tca-certificate/certificate-not-found/bg.svg
diff --git a/src-ts/tools/learn/tca-certificate/certificate-not-found/index.ts b/src/apps/learn/src/tca-certificate/certificate-not-found/index.ts
similarity index 100%
rename from src-ts/tools/learn/tca-certificate/certificate-not-found/index.ts
rename to src/apps/learn/src/tca-certificate/certificate-not-found/index.ts
diff --git a/src/apps/learn/src/tca-certificate/certificate-view/CertificateView.tsx b/src/apps/learn/src/tca-certificate/certificate-view/CertificateView.tsx
new file mode 100644
index 000000000..e1f768d88
--- /dev/null
+++ b/src/apps/learn/src/tca-certificate/certificate-view/CertificateView.tsx
@@ -0,0 +1,106 @@
+import { FC, MutableRefObject, ReactNode, useRef } from 'react'
+import { Params, useParams } from 'react-router-dom'
+
+import { LoadingSpinner } from '~/libs/ui'
+
+import {
+ CertificateNotFoundContent,
+ CertificatePageLayout,
+ PageTitle,
+ TCACertificatePreview,
+ TCACertification,
+ TCACertificationValidationData,
+ useValidateTCACertification,
+} from '../../lib'
+import { getTCACertificationPath, getTCACertificationValidationUrl, getUserTCACertificateSsr } from '../../learn.routes'
+import { CertificateNotFound } from '../certificate-not-found'
+import { useGetUserProfile, UseGetUserProfileData } from '../user-certification-view/use-get-user-profile'
+
+const CertificateView: FC<{}> = () => {
+
+ const certificateElRef: MutableRefObject
+
+
+
+
+
+
+
+ Certificate
+
+
+ Topcoder Academy
+
+ Certificate
+
+ not found
+
+
+
+
+ Topcoder Academy
+ )}
+ text={`
+ The Topcoder Academy will provide you with learning opportunities
+ in the form of guided learning paths.
+ You will have the opportunity to learn new skills that will better
+ prepare you to earn on the Topcoder platform.
+ `}
+ theme='light'
+ />
+
+
+
+
+
+
+
-
-
+
diff --git a/src-ts/tools/learn/welcome/tc-certifications/assets/certs-banner-bg-mobile.png b/src/apps/learn/src/welcome/tc-certifications/assets/certs-banner-bg-mobile.png
similarity index 100%
rename from src-ts/tools/learn/welcome/tc-certifications/assets/certs-banner-bg-mobile.png
rename to src/apps/learn/src/welcome/tc-certifications/assets/certs-banner-bg-mobile.png
diff --git a/src-ts/tools/learn/welcome/tc-certifications/assets/certs-banner-bg.png b/src/apps/learn/src/welcome/tc-certifications/assets/certs-banner-bg.png
similarity index 100%
rename from src-ts/tools/learn/welcome/tc-certifications/assets/certs-banner-bg.png
rename to src/apps/learn/src/welcome/tc-certifications/assets/certs-banner-bg.png
diff --git a/src-ts/tools/learn/welcome/tc-certifications/assets/free-banner-bg-mobile.png b/src/apps/learn/src/welcome/tc-certifications/assets/free-banner-bg-mobile.png
similarity index 100%
rename from src-ts/tools/learn/welcome/tc-certifications/assets/free-banner-bg-mobile.png
rename to src/apps/learn/src/welcome/tc-certifications/assets/free-banner-bg-mobile.png
diff --git a/src-ts/tools/learn/welcome/tc-certifications/assets/free-banner-bg.png b/src/apps/learn/src/welcome/tc-certifications/assets/free-banner-bg.png
similarity index 100%
rename from src-ts/tools/learn/welcome/tc-certifications/assets/free-banner-bg.png
rename to src/apps/learn/src/welcome/tc-certifications/assets/free-banner-bg.png
diff --git a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss b/src/apps/learn/src/welcome/tc-certifications/cert-card/TCCertCard.module.scss
similarity index 84%
rename from src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss
rename to src/apps/learn/src/welcome/tc-certifications/cert-card/TCCertCard.module.scss
index cc620ee2f..424267f46 100644
--- a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss
+++ b/src/apps/learn/src/welcome/tc-certifications/cert-card/TCCertCard.module.scss
@@ -1,15 +1,15 @@
-@import '../../../../../lib/styles/includes';
+@import '@libs/ui/styles/includes';
.wrap {
display: flex;
flex-direction: column;
background-color: $black-5;
- padding: $space-xxxxl $space-xxl;
+ padding: $sp-8 $sp-6;
border-radius: 8px;
overflow: auto;
@include ltesm {
- padding: $space-xxl $space-lg;
+ padding: $sp-6 $sp-4;
}
.cardHeader {
@@ -33,16 +33,16 @@
display: flex;
flex-direction: column;
flex: 1 1 auto;
- margin-left: $space-xxl;
+ margin-left: $sp-6;
@include ltesm {
- margin-left: $space-lg;
+ margin-left: $sp-4;
}
.cardSubWrap {
display: flex;
align-items: center;
- gap: $space-sm;
+ gap: $sp-2;
flex-wrap: wrap;
.subTitleItem {
@@ -51,7 +51,7 @@
}
svg {
- margin-right: $space-xs;
+ margin-right: $sp-1;
color: $blue-140;
}
@@ -84,7 +84,7 @@
display: flex;
height: 32px;
align-items: center;
- gap: $space-sm;
+ gap: $sp-2;
.newLabel {
font-weight: 500;
@@ -92,14 +92,14 @@
line-height: 10px;
border-radius: 2px;
background-color: $green-140;
- padding: 3px $space-xs;
+ padding: 3px $sp-1;
color: $tc-white;
}
.freeLabel {
@include freeLabel;
- padding: 3px $space-xs;
+ padding: 3px $sp-1;
font-weight: 500;
font-size: 11px;
line-height: 10px;
@@ -120,11 +120,11 @@
.separatorBar {
border-bottom: 2px solid $black-10;
- margin: $space-xl 0 $space-xxl;
+ margin: $sp-5 0 $sp-6;
}
.progressBar {
- margin: $space-lg 0 $space-xxl;
+ margin: $sp-4 0 $sp-6;
}
.providers {
@@ -136,7 +136,7 @@
}
.cardBottom {
- margin-top: $space-lg;
+ margin-top: $sp-4;
.completedCTAs {
display: flex;
@@ -151,7 +151,7 @@
.certCTAButtons {
a:first-child {
- margin-right: $space-sm;
+ margin-right: $sp-2;
}
}
}
@@ -159,7 +159,7 @@
.infoText {
font-style: italic;
color: $black-60;
- margin-right: $space-sm;
+ margin-right: $sp-2;
@include ltemd {
margin-right: 50px;
diff --git a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx b/src/apps/learn/src/welcome/tc-certifications/cert-card/TCCertCard.tsx
similarity index 91%
rename from src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx
rename to src/apps/learn/src/welcome/tc-certifications/cert-card/TCCertCard.tsx
index f78101477..014058619 100644
--- a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx
+++ b/src/apps/learn/src/welcome/tc-certifications/cert-card/TCCertCard.tsx
@@ -1,8 +1,15 @@
import { FC, memo, ReactNode } from 'react'
import classNames from 'classnames'
+import { EnvironmentConfig } from '~/config'
+import {
+ ButtonTypes,
+ IconSolid,
+ LinkButton,
+ ProgressBar,
+} from '~/libs/ui'
+
import { getTCACertificationPath, getTCAUserCertificationUrl } from '../../../learn.routes'
-import { Button, ButtonStyle, IconSolid, ProgressBar } from '../../../../../lib'
import {
CertificateBadgeIcon,
CompletionTimeRange,
@@ -13,8 +20,7 @@ import {
TCACertificationProgress,
TCACertificationProviderBase,
TCAEMSISkillType,
-} from '../../../learn-lib'
-import { EnvironmentConfig } from '../../../../../config'
+} from '../../../lib'
import styles from './TCCertCard.module.scss'
@@ -23,9 +29,9 @@ interface TCCertCardProps {
progress: TCACertificationProgress
}
-const getCtaBtn: (style: ButtonStyle, label: string, route: string) => ReactNode
- = (style: ButtonStyle, label: string, route: string) => (
-
+const getCtaBtn: (style: ButtonTypes, label: string, route: string) => ReactNode
+ = (style: ButtonTypes, label: string, route: string) => (
+ = (props: TCCertCardProps) => {
diff --git a/src-ts/tools/learn/welcome/tc-certifications/cert-card/index.ts b/src/apps/learn/src/welcome/tc-certifications/cert-card/index.ts
similarity index 100%
rename from src-ts/tools/learn/welcome/tc-certifications/cert-card/index.ts
rename to src/apps/learn/src/welcome/tc-certifications/cert-card/index.ts
diff --git a/src-ts/tools/learn/welcome/tc-certifications/index.ts b/src/apps/learn/src/welcome/tc-certifications/index.ts
similarity index 100%
rename from src-ts/tools/learn/welcome/tc-certifications/index.ts
rename to src/apps/learn/src/welcome/tc-certifications/index.ts
diff --git a/src-ts/tools/learn/welcome/tca-full-logo.svg b/src/apps/learn/src/welcome/tca-full-logo.svg
similarity index 100%
rename from src-ts/tools/learn/welcome/tca-full-logo.svg
rename to src/apps/learn/src/welcome/tca-full-logo.svg
diff --git a/src/apps/learn/src/welcome/what-tca-cando/WhatTCACanDo.module.scss b/src/apps/learn/src/welcome/what-tca-cando/WhatTCACanDo.module.scss
new file mode 100644
index 000000000..899ab0dbc
--- /dev/null
+++ b/src/apps/learn/src/welcome/what-tca-cando/WhatTCACanDo.module.scss
@@ -0,0 +1,67 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ background-color: $black-5;
+ border-radius: 8px;
+ padding: $sp-8;
+ margin-bottom: $sp-8;
+
+ @include ltemd {
+ padding: $sp-4;
+ margin-bottom: $sp-2;
+ }
+
+ .collapseTrigger {
+ display: flex;
+ justify-content: space-between;
+
+ h2 {
+ margin-bottom: $sp-4;
+
+ @include ltemd {
+ max-width: 290px;
+ }
+ }
+
+ >svg {
+ color: $turq-160;
+ cursor: pointer;
+ }
+ }
+
+ .cards {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: $sp-4;
+ margin-top: $sp-4;
+
+ @include ltemd {
+ grid-template-columns: 1fr;
+ }
+
+ .card {
+ display: flex;
+ flex-direction: column;
+ padding: $sp-6 $sp-6 $sp-8;
+ background-color: $tc-white;
+ border-radius: 8px;
+
+ @include ltemd {
+ padding: $sp-4 $sp-4 $sp-5;
+ }
+
+ .cardTitle {
+ display: flex;
+ align-items: center;
+ margin-bottom: $sp-4;
+
+ >svg {
+ color: $blue-110;
+ margin-right: $sp-2;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src-ts/tools/learn/welcome/what-tca-cando/WhatTCACanDo.tsx b/src/apps/learn/src/welcome/what-tca-cando/WhatTCACanDo.tsx
similarity index 96%
rename from src-ts/tools/learn/welcome/what-tca-cando/WhatTCACanDo.tsx
rename to src/apps/learn/src/welcome/what-tca-cando/WhatTCACanDo.tsx
index 9d2378c3b..0de82d7c9 100644
--- a/src-ts/tools/learn/welcome/what-tca-cando/WhatTCACanDo.tsx
+++ b/src/apps/learn/src/welcome/what-tca-cando/WhatTCACanDo.tsx
@@ -1,7 +1,8 @@
import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react'
-import { IconSolid } from '../../../../lib'
-import { CertIcon, CourseIcon, CrowdIcon } from '../../learn-lib'
+import { IconSolid } from '~/libs/ui'
+
+import { CertIcon, CourseIcon, CrowdIcon } from '../../lib'
import styles from './WhatTCACanDo.module.scss'
diff --git a/src-ts/tools/learn/welcome/what-tca-cando/index.ts b/src/apps/learn/src/welcome/what-tca-cando/index.ts
similarity index 100%
rename from src-ts/tools/learn/welcome/what-tca-cando/index.ts
rename to src/apps/learn/src/welcome/what-tca-cando/index.ts
diff --git a/src/apps/platform/README.md b/src/apps/platform/README.md
new file mode 100644
index 000000000..ba02c35fa
--- /dev/null
+++ b/src/apps/platform/README.md
@@ -0,0 +1,3 @@
+# Platform App
+
+TBD
diff --git a/src/apps/platform/index.ts b/src/apps/platform/index.ts
new file mode 100644
index 000000000..6f39cd49b
--- /dev/null
+++ b/src/apps/platform/index.ts
@@ -0,0 +1 @@
+export * from './src'
diff --git a/src/apps/platform/src/PlatformApp.tsx b/src/apps/platform/src/PlatformApp.tsx
new file mode 100644
index 000000000..dd89390fb
--- /dev/null
+++ b/src/apps/platform/src/PlatformApp.tsx
@@ -0,0 +1,36 @@
+import { FC } from 'react'
+import { toast, ToastContainer } from 'react-toastify'
+
+import { useViewportUnitsFix } from '~/libs/shared'
+
+import { AppFooter } from './components/app-footer'
+import { AppHeader } from './components/app-header'
+import { Providers } from './providers'
+import { PlatformRouter } from './platform-router'
+
+const PlatformApp: FC<{}> = () => {
+ useViewportUnitsFix()
+
+ return (
+ NEW
- {!EnvironmentConfig.REACT_APP_ENABLE_TCA_CERT_MONETIZATION
+ {!EnvironmentConfig.ENABLE_TCA_CERT_MONETIZATION
&& FREE
}
+
+
+
+ )
+}
+
+export default HomePage
diff --git a/src/apps/platform/src/routes/home/index.ts b/src/apps/platform/src/routes/home/index.ts
new file mode 100644
index 000000000..3e3db5c4c
--- /dev/null
+++ b/src/apps/platform/src/routes/home/index.ts
@@ -0,0 +1 @@
+export { default as HomePage } from './Home'
diff --git a/src/apps/self-service/.eslintrc.js b/src/apps/self-service/.eslintrc.js
new file mode 100644
index 000000000..17600eab6
--- /dev/null
+++ b/src/apps/self-service/.eslintrc.js
@@ -0,0 +1,28 @@
+module.exports = {
+ root: true,
+ env: {
+ browser: true,
+ es2021: true,
+ jest: true,
+ },
+ extends: [
+ 'react-app',
+ 'react-app/jest',
+ ],
+ parserOptions: {
+ useJSXTextNode: true,
+ jsx: true,
+ sourceType: 'module',
+ },
+ plugins: [
+ 'react',
+ ],
+ settings: {
+ react: {
+ version: 'detect',
+ },
+ },
+ rules: {
+ 'no-useless-escape': 0,
+ },
+}
diff --git a/src/apps/self-service/README.md b/src/apps/self-service/README.md
new file mode 100644
index 000000000..4982641fd
--- /dev/null
+++ b/src/apps/self-service/README.md
@@ -0,0 +1,3 @@
+# Self Service Challenges
+
+TBD
diff --git a/src/apps/self-service/declarations.d.ts b/src/apps/self-service/declarations.d.ts
new file mode 100644
index 000000000..fc6af2119
--- /dev/null
+++ b/src/apps/self-service/declarations.d.ts
@@ -0,0 +1,2 @@
+declare module '*.pdf'
+declare module '*.jpeg'
diff --git a/src/apps/self-service/index.ts b/src/apps/self-service/index.ts
new file mode 100644
index 000000000..6f39cd49b
--- /dev/null
+++ b/src/apps/self-service/index.ts
@@ -0,0 +1 @@
+export * from './src'
diff --git a/src/apps/self-service/src/actions/autoSave.js b/src/apps/self-service/src/actions/autoSave.js
new file mode 100644
index 000000000..e041d43f0
--- /dev/null
+++ b/src/apps/self-service/src/actions/autoSave.js
@@ -0,0 +1,39 @@
+import { patchChallenge } from "../services/challenge";
+import { getChallenge } from "../actions/challenge";
+import { autoSaveCookie } from "../utils/autoSaveBeforeLogin";
+import { ACTIONS } from "../config";
+
+export const autoSaveInitErrored = (error) => ({
+ type: ACTIONS.AUTO_SAVE.INIT_ERRORED,
+ payload: error,
+});
+
+export const triggerAutoSave = (isTriggered, isLoggedIn, isForced) => ({
+ type: ACTIONS.AUTO_SAVE.TRIGGER_AUTO_SAVE,
+ payload: {
+ isTriggered,
+ isLoggedIn,
+ isForced,
+ },
+});
+
+export const triggerCookieClear = () => ({
+ type: ACTIONS.AUTO_SAVE.TRIGGER_COOKIE_CLEARED,
+});
+
+export const autoSaveCookieCleared = (isCookieCleared) => ({
+ type: ACTIONS.AUTO_SAVE.COOKIE_CLEARED,
+ payload: isCookieCleared,
+});
+
+export const sendAutoSavedPatch = (dataToSave, challengeId) => (dispatch) => {
+ patchChallenge(dataToSave, challengeId)
+ .then((patched) => {
+ dispatch(getChallenge(patched));
+ })
+ .catch((e) => { });
+};
+
+export const storeAutoSavedCookie = (dataToSave) => (dispatch) => {
+ autoSaveCookie(dataToSave);
+};
diff --git a/src/apps/self-service/src/actions/challenge.js b/src/apps/self-service/src/actions/challenge.js
new file mode 100644
index 000000000..aa8c924b9
--- /dev/null
+++ b/src/apps/self-service/src/actions/challenge.js
@@ -0,0 +1,20 @@
+import { ACTIONS } from "../config";
+import { createChallenge } from "../services/challenge";
+import { cacheChallengeId } from "../utils/autoSaveBeforeLogin";
+
+export const getChallenge = (challenge) => ({
+ type: ACTIONS.CHALLENGE.GET_CHALLENGE,
+ payload: challenge,
+});
+
+export const createNewChallenge = (workType) => (dispatch) => {
+ return createChallenge(workType)
+ .then((created) => {
+ if (created?.id) {
+ getChallenge(created);
+ cacheChallengeId(created.id);
+ return created.id;
+ }
+ })
+ .catch((e) => {});
+};
diff --git a/src/apps/self-service/src/actions/form.js b/src/apps/self-service/src/actions/form.js
new file mode 100644
index 000000000..014ed86eb
--- /dev/null
+++ b/src/apps/self-service/src/actions/form.js
@@ -0,0 +1,59 @@
+import { ACTIONS } from "../config";
+import { createSupportTicket } from "../services/form";
+
+export const saveForm = (form) => ({
+ type: ACTIONS.FORM.SAVE_FORM,
+ payload: form,
+});
+
+export const resetIntakeForm = (isReset) => ({
+ type: ACTIONS.FORM.RESET_INTAKE_FORM,
+ payload: isReset,
+});
+
+export const saveWorkType = (workType) => ({
+ type: ACTIONS.FORM.SAVE_WORK_TYPE,
+ payload: workType,
+});
+
+export const saveBasicInfo = (basicInfo) => ({
+ type: ACTIONS.FORM.SAVE_BASIC_INFO,
+ payload: basicInfo,
+});
+
+export const saveWebsitePurpose = (websitePurpose) => ({
+ type: ACTIONS.FORM.SAVE_WEBSITE_PURPOSE,
+ payload: websitePurpose,
+});
+
+export const savePageDetails = (pageDetails) => ({
+ type: ACTIONS.FORM.SAVE_PAGE_DETAILS,
+ payload: pageDetails,
+});
+
+export const saveBranding = (branding) => ({
+ type: ACTIONS.FORM.SAVE_BRANDING,
+ payload: branding,
+});
+
+export const reviewConfirmed = (confirmed) => ({
+ type: ACTIONS.FORM.REVIEW_CONFIRMED,
+ payload: confirmed,
+});
+
+export const toggleSupportModal = (show = null) => ({
+ type: ACTIONS.FORM.TOGGLE_SUPPORT_MODAL,
+ payload: show,
+});
+
+export const createNewSupportTicket =
+ (request, challengeId, selfService) => (dispatch) => {
+ return createSupportTicket(request, challengeId, selfService)
+ .then((ticket) => {
+ dispatch(() => ({
+ type: ACTIONS.FORM.CREATE_SUPPORT_TICKET,
+ payload: ticket,
+ }));
+ })
+ .catch((e) => {});
+ };
diff --git a/src/apps/self-service/src/actions/progress.js b/src/apps/self-service/src/actions/progress.js
new file mode 100644
index 000000000..81c27aef3
--- /dev/null
+++ b/src/apps/self-service/src/actions/progress.js
@@ -0,0 +1,6 @@
+import { ACTIONS } from "../config";
+
+export const setProgressItem = (item) => ({
+ type: ACTIONS.PROGRESS.SET_ITEM,
+ payload: item,
+});
diff --git a/src/apps/self-service/src/actions/work.js b/src/apps/self-service/src/actions/work.js
new file mode 100644
index 000000000..85e7942a5
--- /dev/null
+++ b/src/apps/self-service/src/actions/work.js
@@ -0,0 +1,59 @@
+import { ACTIONS } from "../config";
+import workService from "../services/work";
+
+export const getWork = (id) => {
+ return {
+ type: ACTIONS.WORK.GET_WORK,
+ payload: workService.getWork(id),
+ };
+};
+
+export const getSummary = (work) => {
+ return {
+ type: ACTIONS.WORK.GET_SUMMARY,
+ payload: workService.getSummary(work),
+ };
+};
+
+export const getDetails = (work) => {
+ const formData = workService.getDetails(work);
+ return {
+ type: ACTIONS.WORK.GET_DETAILS,
+ payload: formData,
+ };
+};
+
+export const getSolutions = (workId) => {
+ return {
+ type: ACTIONS.WORK.GET_SOLUTIONS,
+ payload: workService.getSolutions(workId),
+ };
+};
+
+export const getSolutionsCount = (workId) => {
+ return {
+ type: ACTIONS.WORK.GET_SOLUTIONS_COUNT,
+ payload: workService.getSolutionsCount(workId),
+ };
+};
+
+export const downloadSolution = (solutionId) => {
+ return {
+ type: ACTIONS.WORK.DOWNLOAD_SOLUTION,
+ payload: workService.downloadSolution(solutionId),
+ };
+};
+
+export const saveSurvey = (workId, metadata) => {
+ return {
+ type: ACTIONS.WORK.SAVE_SURVEY,
+ payload: workService.saveSurvey(workId, metadata),
+ };
+};
+
+export const setIsSavingSurveyDone = (value) => {
+ return {
+ type: ACTIONS.WORK.SET_IS_SAVING_SURVEY_DONE,
+ payload: value,
+ };
+};
diff --git a/src/assets/data/spec-templates/website-design-legacy.json b/src/apps/self-service/src/assets/data/spec-templates/website-design-legacy.json
similarity index 100%
rename from src/assets/data/spec-templates/website-design-legacy.json
rename to src/apps/self-service/src/assets/data/spec-templates/website-design-legacy.json
diff --git a/src/assets/data/website-design-styles.json b/src/apps/self-service/src/assets/data/website-design-styles.json
similarity index 100%
rename from src/assets/data/website-design-styles.json
rename to src/apps/self-service/src/assets/data/website-design-styles.json
diff --git a/src/assets/images/add-website-icon.svg b/src/apps/self-service/src/assets/images/add-website-icon.svg
similarity index 100%
rename from src/assets/images/add-website-icon.svg
rename to src/apps/self-service/src/assets/images/add-website-icon.svg
diff --git a/src/assets/images/arrow-right.svg b/src/apps/self-service/src/assets/images/arrow-right.svg
similarity index 100%
rename from src/assets/images/arrow-right.svg
rename to src/apps/self-service/src/assets/images/arrow-right.svg
diff --git a/src/assets/images/check.svg b/src/apps/self-service/src/assets/images/check.svg
similarity index 100%
rename from src/assets/images/check.svg
rename to src/apps/self-service/src/assets/images/check.svg
diff --git a/src/assets/images/data-advisory-icon.svg b/src/apps/self-service/src/assets/images/data-advisory-icon.svg
similarity index 100%
rename from src/assets/images/data-advisory-icon.svg
rename to src/apps/self-service/src/assets/images/data-advisory-icon.svg
diff --git a/src/assets/images/data-exploration-icon.svg b/src/apps/self-service/src/assets/images/data-exploration-icon.svg
similarity index 100%
rename from src/assets/images/data-exploration-icon.svg
rename to src/apps/self-service/src/assets/images/data-exploration-icon.svg
diff --git a/src-ts/tools/work/work-type-banner/images/data-exploration-mobile.png b/src/apps/self-service/src/assets/images/data-exploration-mobile.png
similarity index 100%
rename from src-ts/tools/work/work-type-banner/images/data-exploration-mobile.png
rename to src/apps/self-service/src/assets/images/data-exploration-mobile.png
diff --git a/src-ts/tools/work/work-type-banner/images/data-exploration.png b/src/apps/self-service/src/assets/images/data-exploration.png
similarity index 100%
rename from src-ts/tools/work/work-type-banner/images/data-exploration.png
rename to src/apps/self-service/src/assets/images/data-exploration.png
diff --git a/src/assets/images/design-example-image1.png b/src/apps/self-service/src/assets/images/design-example-image1.png
similarity index 100%
rename from src/assets/images/design-example-image1.png
rename to src/apps/self-service/src/assets/images/design-example-image1.png
diff --git a/src/assets/images/design-example-image2.png b/src/apps/self-service/src/assets/images/design-example-image2.png
similarity index 100%
rename from src/assets/images/design-example-image2.png
rename to src/apps/self-service/src/assets/images/design-example-image2.png
diff --git a/src/assets/images/design-tools.svg b/src/apps/self-service/src/assets/images/design-tools.svg
similarity index 100%
rename from src/assets/images/design-tools.svg
rename to src/apps/self-service/src/assets/images/design-tools.svg
diff --git a/src/assets/images/find-me-data-icon.svg b/src/apps/self-service/src/assets/images/find-me-data-icon.svg
similarity index 100%
rename from src/assets/images/find-me-data-icon.svg
rename to src/apps/self-service/src/assets/images/find-me-data-icon.svg
diff --git a/src-ts/tools/work/work-type-banner/images/find-me-data-mobile.png b/src/apps/self-service/src/assets/images/find-me-data-mobile.png
similarity index 100%
rename from src-ts/tools/work/work-type-banner/images/find-me-data-mobile.png
rename to src/apps/self-service/src/assets/images/find-me-data-mobile.png
diff --git a/src-ts/tools/work/work-type-banner/images/find-me-data.png b/src/apps/self-service/src/assets/images/find-me-data.png
similarity index 100%
rename from src-ts/tools/work/work-type-banner/images/find-me-data.png
rename to src/apps/self-service/src/assets/images/find-me-data.png
diff --git a/src/assets/images/icon-any-font.png b/src/apps/self-service/src/assets/images/icon-any-font.png
similarity index 100%
rename from src/assets/images/icon-any-font.png
rename to src/apps/self-service/src/assets/images/icon-any-font.png
diff --git a/src/assets/images/icon-arrow.svg b/src/apps/self-service/src/assets/images/icon-arrow.svg
similarity index 100%
rename from src/assets/images/icon-arrow.svg
rename to src/apps/self-service/src/assets/images/icon-arrow.svg
diff --git a/src-ts/lib/svgs/icon-check-thin.svg b/src/apps/self-service/src/assets/images/icon-check-thin.svg
similarity index 100%
rename from src-ts/lib/svgs/icon-check-thin.svg
rename to src/apps/self-service/src/assets/images/icon-check-thin.svg
diff --git a/src/assets/images/icon-copy-file.svg b/src/apps/self-service/src/assets/images/icon-copy-file.svg
similarity index 100%
rename from src/assets/images/icon-copy-file.svg
rename to src/apps/self-service/src/assets/images/icon-copy-file.svg
diff --git a/src/assets/images/icon-cross.svg b/src/apps/self-service/src/assets/images/icon-cross.svg
similarity index 100%
rename from src/assets/images/icon-cross.svg
rename to src/apps/self-service/src/assets/images/icon-cross.svg
diff --git a/src/assets/images/icon-device-computer-active.svg b/src/apps/self-service/src/assets/images/icon-device-computer-active.svg
similarity index 100%
rename from src/assets/images/icon-device-computer-active.svg
rename to src/apps/self-service/src/assets/images/icon-device-computer-active.svg
diff --git a/src/assets/images/icon-device-computer.svg b/src/apps/self-service/src/assets/images/icon-device-computer.svg
similarity index 100%
rename from src/assets/images/icon-device-computer.svg
rename to src/apps/self-service/src/assets/images/icon-device-computer.svg
diff --git a/src/assets/images/icon-device-phone-active.svg b/src/apps/self-service/src/assets/images/icon-device-phone-active.svg
similarity index 100%
rename from src/assets/images/icon-device-phone-active.svg
rename to src/apps/self-service/src/assets/images/icon-device-phone-active.svg
diff --git a/src/assets/images/icon-device-phone.svg b/src/apps/self-service/src/assets/images/icon-device-phone.svg
similarity index 100%
rename from src/assets/images/icon-device-phone.svg
rename to src/apps/self-service/src/assets/images/icon-device-phone.svg
diff --git a/src/assets/images/icon-device-tablet-active.svg b/src/apps/self-service/src/assets/images/icon-device-tablet-active.svg
similarity index 100%
rename from src/assets/images/icon-device-tablet-active.svg
rename to src/apps/self-service/src/assets/images/icon-device-tablet-active.svg
diff --git a/src/assets/images/icon-device-tablet.svg b/src/apps/self-service/src/assets/images/icon-device-tablet.svg
similarity index 100%
rename from src/assets/images/icon-device-tablet.svg
rename to src/apps/self-service/src/assets/images/icon-device-tablet.svg
diff --git a/src/assets/images/icon-hint-green.svg b/src/apps/self-service/src/assets/images/icon-hint-green.svg
similarity index 100%
rename from src/assets/images/icon-hint-green.svg
rename to src/apps/self-service/src/assets/images/icon-hint-green.svg
diff --git a/src/assets/images/icon-my-work-active.svg b/src/apps/self-service/src/assets/images/icon-my-work-active.svg
similarity index 100%
rename from src/assets/images/icon-my-work-active.svg
rename to src/apps/self-service/src/assets/images/icon-my-work-active.svg
diff --git a/src/assets/images/icon-my-work.svg b/src/apps/self-service/src/assets/images/icon-my-work.svg
similarity index 100%
rename from src/assets/images/icon-my-work.svg
rename to src/apps/self-service/src/assets/images/icon-my-work.svg
diff --git a/src/assets/images/icon-sans-serif-font.png b/src/apps/self-service/src/assets/images/icon-sans-serif-font.png
similarity index 100%
rename from src/assets/images/icon-sans-serif-font.png
rename to src/apps/self-service/src/assets/images/icon-sans-serif-font.png
diff --git a/src/assets/images/icon-serif-font.png b/src/apps/self-service/src/assets/images/icon-serif-font.png
similarity index 100%
rename from src/assets/images/icon-serif-font.png
rename to src/apps/self-service/src/assets/images/icon-serif-font.png
diff --git a/src/assets/images/icon-three-dots-vertical.svg b/src/apps/self-service/src/assets/images/icon-three-dots-vertical.svg
similarity index 100%
rename from src/assets/images/icon-three-dots-vertical.svg
rename to src/apps/self-service/src/assets/images/icon-three-dots-vertical.svg
diff --git a/src/assets/images/icon-three-dots.svg b/src/apps/self-service/src/assets/images/icon-three-dots.svg
similarity index 100%
rename from src/assets/images/icon-three-dots.svg
rename to src/apps/self-service/src/assets/images/icon-three-dots.svg
diff --git a/src-ts/tools/work/work-type-banner/images/problem-statement-mobile.png b/src/apps/self-service/src/assets/images/problem-statement-mobile.png
similarity index 100%
rename from src-ts/tools/work/work-type-banner/images/problem-statement-mobile.png
rename to src/apps/self-service/src/assets/images/problem-statement-mobile.png
diff --git a/src-ts/tools/work/work-type-banner/images/problem-statement.png b/src/apps/self-service/src/assets/images/problem-statement.png
similarity index 100%
rename from src-ts/tools/work/work-type-banner/images/problem-statement.png
rename to src/apps/self-service/src/assets/images/problem-statement.png
diff --git a/src/assets/images/products/product-main-photos/data-exploration.jpeg b/src/apps/self-service/src/assets/images/products/product-main-photos/data-exploration.jpeg
similarity index 100%
rename from src/assets/images/products/product-main-photos/data-exploration.jpeg
rename to src/apps/self-service/src/assets/images/products/product-main-photos/data-exploration.jpeg
diff --git a/src/assets/images/products/product-main-photos/find-me-data.jpeg b/src/apps/self-service/src/assets/images/products/product-main-photos/find-me-data.jpeg
similarity index 100%
rename from src/assets/images/products/product-main-photos/find-me-data.jpeg
rename to src/apps/self-service/src/assets/images/products/product-main-photos/find-me-data.jpeg
diff --git a/src/assets/images/products/product-main-photos/problem-statements-and-data.jpeg b/src/apps/self-service/src/assets/images/products/product-main-photos/problem-statements-and-data.jpeg
similarity index 100%
rename from src/assets/images/products/product-main-photos/problem-statements-and-data.jpeg
rename to src/apps/self-service/src/assets/images/products/product-main-photos/problem-statements-and-data.jpeg
diff --git a/src/assets/images/products/product-main-photos/reb-blue-gradient-background.jpeg b/src/apps/self-service/src/assets/images/products/product-main-photos/reb-blue-gradient-background.jpeg
similarity index 100%
rename from src/assets/images/products/product-main-photos/reb-blue-gradient-background.jpeg
rename to src/apps/self-service/src/assets/images/products/product-main-photos/reb-blue-gradient-background.jpeg
diff --git a/src/assets/images/products/product-main-photos/web-design.jpeg b/src/apps/self-service/src/assets/images/products/product-main-photos/web-design.jpeg
similarity index 100%
rename from src/assets/images/products/product-main-photos/web-design.jpeg
rename to src/apps/self-service/src/assets/images/products/product-main-photos/web-design.jpeg
diff --git a/src/assets/images/products/website-design/bold-ragged.png b/src/apps/self-service/src/assets/images/products/website-design/bold-ragged.png
similarity index 100%
rename from src/assets/images/products/website-design/bold-ragged.png
rename to src/apps/self-service/src/assets/images/products/website-design/bold-ragged.png
diff --git a/src/assets/images/products/website-design/dark-saturated.png b/src/apps/self-service/src/assets/images/products/website-design/dark-saturated.png
similarity index 100%
rename from src/assets/images/products/website-design/dark-saturated.png
rename to src/apps/self-service/src/assets/images/products/website-design/dark-saturated.png
diff --git a/src/assets/images/products/website-design/fun-playful.png b/src/apps/self-service/src/assets/images/products/website-design/fun-playful.png
similarity index 100%
rename from src/assets/images/products/website-design/fun-playful.png
rename to src/apps/self-service/src/assets/images/products/website-design/fun-playful.png
diff --git a/src/assets/images/products/website-design/light-airy.png b/src/apps/self-service/src/assets/images/products/website-design/light-airy.png
similarity index 100%
rename from src/assets/images/products/website-design/light-airy.png
rename to src/apps/self-service/src/assets/images/products/website-design/light-airy.png
diff --git a/src/assets/images/products/website-design/mature-serious.png b/src/apps/self-service/src/assets/images/products/website-design/mature-serious.png
similarity index 100%
rename from src/assets/images/products/website-design/mature-serious.png
rename to src/apps/self-service/src/assets/images/products/website-design/mature-serious.png
diff --git a/src/assets/images/products/website-design/simple-minimalist.png b/src/apps/self-service/src/assets/images/products/website-design/simple-minimalist.png
similarity index 100%
rename from src/assets/images/products/website-design/simple-minimalist.png
rename to src/apps/self-service/src/assets/images/products/website-design/simple-minimalist.png
diff --git a/src/assets/images/products/website-design/soft-organic.png b/src/apps/self-service/src/assets/images/products/website-design/soft-organic.png
similarity index 100%
rename from src/assets/images/products/website-design/soft-organic.png
rename to src/apps/self-service/src/assets/images/products/website-design/soft-organic.png
diff --git a/src/assets/images/products/website-design/vibrant-colorful.png b/src/apps/self-service/src/assets/images/products/website-design/vibrant-colorful.png
similarity index 100%
rename from src/assets/images/products/website-design/vibrant-colorful.png
rename to src/apps/self-service/src/assets/images/products/website-design/vibrant-colorful.png
diff --git a/src-ts/lib/svgs/save-for-later-icon.svg b/src/apps/self-service/src/assets/images/save-for-later-icon.svg
similarity index 100%
rename from src-ts/lib/svgs/save-for-later-icon.svg
rename to src/apps/self-service/src/assets/images/save-for-later-icon.svg
diff --git a/src/assets/images/thumbsdown.svg b/src/apps/self-service/src/assets/images/thumbsdown.svg
similarity index 100%
rename from src/assets/images/thumbsdown.svg
rename to src/apps/self-service/src/assets/images/thumbsdown.svg
diff --git a/src/assets/images/thumbsup.svg b/src/apps/self-service/src/assets/images/thumbsup.svg
similarity index 100%
rename from src/assets/images/thumbsup.svg
rename to src/apps/self-service/src/assets/images/thumbsup.svg
diff --git a/src/assets/images/website-design.png b/src/apps/self-service/src/assets/images/website-design copy.png
similarity index 100%
rename from src/assets/images/website-design.png
rename to src/apps/self-service/src/assets/images/website-design copy.png
diff --git a/src-ts/tools/work/work-type-banner/images/website-design-banner-mobile.png b/src/apps/self-service/src/assets/images/website-design-banner-mobile.png
similarity index 100%
rename from src-ts/tools/work/work-type-banner/images/website-design-banner-mobile.png
rename to src/apps/self-service/src/assets/images/website-design-banner-mobile.png
diff --git a/src-ts/tools/work/work-type-banner/images/website-design-v2.png b/src/apps/self-service/src/assets/images/website-design-v2.png
similarity index 100%
rename from src-ts/tools/work/work-type-banner/images/website-design-v2.png
rename to src/apps/self-service/src/assets/images/website-design-v2.png
diff --git a/src/apps/self-service/src/assets/images/website-design.png b/src/apps/self-service/src/assets/images/website-design.png
new file mode 100644
index 000000000..52a867718
Binary files /dev/null and b/src/apps/self-service/src/assets/images/website-design.png differ
diff --git a/src/assets/images/website-design.svg b/src/apps/self-service/src/assets/images/website-design.svg
similarity index 100%
rename from src/assets/images/website-design.svg
rename to src/apps/self-service/src/assets/images/website-design.svg
diff --git a/src/assets/pdf/WebDesign-1.pdf b/src/apps/self-service/src/assets/pdf/WebDesign-1.pdf
similarity index 100%
rename from src/assets/pdf/WebDesign-1.pdf
rename to src/apps/self-service/src/assets/pdf/WebDesign-1.pdf
diff --git a/src/assets/pdf/WebDesign-2.pdf b/src/apps/self-service/src/assets/pdf/WebDesign-2.pdf
similarity index 100%
rename from src/assets/pdf/WebDesign-2.pdf
rename to src/apps/self-service/src/assets/pdf/WebDesign-2.pdf
diff --git a/src/apps/self-service/src/components/Slider/index.jsx b/src/apps/self-service/src/components/Slider/index.jsx
new file mode 100644
index 000000000..7c97b67bd
--- /dev/null
+++ b/src/apps/self-service/src/components/Slider/index.jsx
@@ -0,0 +1,104 @@
+/**
+ * Slider
+ *
+ * Slider
+ */
+import { useCallback, useMemo, useRef } from "react";
+import PT from "prop-types";
+import Carousel from "react-elastic-carousel";
+import classNames from "classnames";
+
+import { ReactComponent as ImgArrowRight} from "../../assets/images/arrow-right.svg";
+
+// TODO: important: check double stylings
+import styles from "./styles.module.scss";
+import "./styles.scss";
+
+const SliderArrow = ({ type, onClick, isEdge }) => {
+ const isPrevButton = type === "PREV";
+
+ return (
+
+ );
+};
+
+const AUTOPLAY_SPEED = 4000; //in ms
+
+const Slider = ({ children, className }) => {
+ const carouselRef = useRef();
+ const resetTimeoutRef = useRef();
+
+ const breakPoints = useMemo(
+ () => [
+ { width: 1, itemsToShow: 1, enableAutoPlay: true },
+ { width: 720, itemsToShow: 2 },
+ { width: 980, itemsToShow: 3 },
+ ],
+ []
+ );
+
+ const handleNextEnd = useCallback(({ index }) => {
+ if (!carouselRef.current) {
+ return;
+ }
+
+ if (resetTimeoutRef.current) {
+ clearTimeout(resetTimeoutRef.current);
+ }
+
+ const totalPages = carouselRef.current.state.pages.length;
+
+ console.log({
+ carouselRef: carouselRef.current,
+ getNumOfPages: carouselRef.current.getNumOfPages(),
+ });
+
+ if (index + 1 === totalPages) {
+ if (carouselRef?.current?.goTo) {
+ resetTimeoutRef.current = setTimeout(() => {
+ if (carouselRef?.current?.goTo) {
+ carouselRef.current.goTo(0);
+ }
+ }, AUTOPLAY_SPEED);
+ }
+ }
+ }, []);
+
+ return (
+ // @ts-ignore
+
+ {item}
+
+ );
+ })}
+
+
+
+ );
+};
+
+FeaturedWorkTypeBanner.propTypes = {
+ title: PT.string,
+ subTitle: PT.string,
+ workType: PT.string,
+};
+
+export default FeaturedWorkTypeBanner;
diff --git a/src/apps/self-service/src/components/banners/featured-work-type-banner/index.js b/src/apps/self-service/src/components/banners/featured-work-type-banner/index.js
new file mode 100644
index 000000000..21b93874f
--- /dev/null
+++ b/src/apps/self-service/src/components/banners/featured-work-type-banner/index.js
@@ -0,0 +1 @@
+export { default as FeaturedWorkTypeBanner } from './FeaturedWorkTypeBanner';
diff --git a/src/components/Banners/FeaturedWorkTypeBanner/styles.module.scss b/src/apps/self-service/src/components/banners/featured-work-type-banner/styles.module.scss
similarity index 100%
rename from src/components/Banners/FeaturedWorkTypeBanner/styles.module.scss
rename to src/apps/self-service/src/components/banners/featured-work-type-banner/styles.module.scss
diff --git a/src/apps/self-service/src/components/banners/help-banner/HelpBanner.jsx b/src/apps/self-service/src/components/banners/help-banner/HelpBanner.jsx
new file mode 100644
index 000000000..0d26f01ae
--- /dev/null
+++ b/src/apps/self-service/src/components/banners/help-banner/HelpBanner.jsx
@@ -0,0 +1,51 @@
+/**
+ * Help Banner component
+ */
+import { useState } from "react";
+import cn from "classnames";
+
+import { Button } from "~/libs/ui";
+
+import { ReactComponent as ArrowIcon} from "../../../assets/images/icon-arrow.svg";
+
+import moduleStyles from "./styles.module.scss";
+
+const HelpBanner = ({
+ title,
+ description,
+ contactSupport,
+ children,
+ styles = [],
+ defaultOpen = false,
+}) => {
+ const [open, setOpen] = useState(defaultOpen);
+ const moduleStyleStyles = styles.map(style => moduleStyles[style])
+ return (
+
+
+
+
+
+
+ {title}
+ {subTitle}
+
+
+ );
+};
+
+export default HelpBanner;
diff --git a/src/apps/self-service/src/components/banners/help-banner/index.js b/src/apps/self-service/src/components/banners/help-banner/index.js
new file mode 100644
index 000000000..2fb29f233
--- /dev/null
+++ b/src/apps/self-service/src/components/banners/help-banner/index.js
@@ -0,0 +1 @@
+export { default as HelpBanner } from './HelpBanner';
diff --git a/src/apps/self-service/src/components/banners/help-banner/styles.module.scss b/src/apps/self-service/src/components/banners/help-banner/styles.module.scss
new file mode 100644
index 000000000..4b6984c4e
--- /dev/null
+++ b/src/apps/self-service/src/components/banners/help-banner/styles.module.scss
@@ -0,0 +1,75 @@
+@import "../../../styles/include";
+
+.banner {
+ background-color: $orange-25;
+ border-radius: 8px;
+ width: 100%;
+ margin-top: 32px;
+
+ .title {
+ cursor: pointer;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px;
+
+ span {
+ color: $black;
+ font-size: 20px;
+ line-height: 20px;
+ text-transform: uppercase;
+ font-weight: 600;
+ }
+
+ .arrowIcon {
+
+ &.up {
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ .description {
+ @include font-roboto;
+ font-size: 16px;
+ line-height: 26px;
+ color: $black;
+ margin-top: -26px;
+ padding: 16px;
+ }
+
+ .supportButton {
+ padding: 16px;
+ }
+}
+
+.gray {
+ background-color: $gray-10;
+ font-size: 16px;
+ @include font-roboto;
+ line-height: 26px;
+ color: $black;
+ font-style: normal;
+
+ .description {
+ padding-top: 0px;
+ }
+
+ a {
+ text-decoration: underline;
+ color: $link-blue;
+ cursor: pointer;
+ }
+}
+
+.turqoise {
+ background-color: $turqoise;
+}
+
+.marginTop24Mobile {
+ margin-top: 0;
+
+ @include mobile {
+ margin-top: 24px;
+ }
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/components/banners/index.js b/src/apps/self-service/src/components/banners/index.js
new file mode 100644
index 000000000..4fc9ab824
--- /dev/null
+++ b/src/apps/self-service/src/components/banners/index.js
@@ -0,0 +1,2 @@
+export * from './featured-work-type-banner';
+export * from './help-banner';
diff --git a/src/apps/self-service/src/components/form-elements/ColorOptions/index.jsx b/src/apps/self-service/src/components/form-elements/ColorOptions/index.jsx
new file mode 100644
index 000000000..dde40a9cf
--- /dev/null
+++ b/src/apps/self-service/src/components/form-elements/ColorOptions/index.jsx
@@ -0,0 +1,71 @@
+/**
+ * Color Options component
+ */
+import classNames from "classnames";
+import PT from "prop-types";
+import _ from "lodash";
+import { ReactComponent as CheckIcon } from "../../../assets/images/check.svg";
+import styles from "./styles.module.scss";
+
+const ColorOptions = ({ colors, selectedColor, onSelect }) => {
+ const anyColor = colors.find((x) => x.isAny);
+ return (
+ setOpen(!open)}
+ role="button"
+ tabIndex={0}
+ >
+ {title}
+
+
+
+ {open && title !== description && (
+
+
+ {description}
+ )} + {open && children &&{children}
}
+ {open && contactSupport && (
+ + +
+ )} +
+ {colors.map((color, index) => (
+
+ );
+};
+
+ColorOptions.defaultProps = {
+ colors: {},
+};
+
+ColorOptions.propTypes = {
+ colors: PT.arrayOf(PT.shape()),
+ selectedColor: PT.object,
+ onSelect: PT.func,
+};
+
+export default ColorOptions;
diff --git a/src/apps/self-service/src/components/form-elements/ColorOptions/styles.module.scss b/src/apps/self-service/src/components/form-elements/ColorOptions/styles.module.scss
new file mode 100644
index 000000000..3c31eeb2d
--- /dev/null
+++ b/src/apps/self-service/src/components/form-elements/ColorOptions/styles.module.scss
@@ -0,0 +1,105 @@
+@import "../../../styles/include";
+
+.colorOptions {
+
+ display: flex;
+ flex-wrap: wrap;
+ gap: 24px;
+ margin-bottom: 34px;
+
+ @include mobile {
+ justify-content: flex-start;
+ //margin-left: -6px;
+ }
+
+ .colorWrapper {
+ .color {
+ position: relative;
+ width: 120px;
+ height: 80px;
+ padding: 16px;
+
+ @include mobile {
+ width: 74px;
+ height: 64px;
+ }
+
+ cursor: pointer;
+
+ border: 1px solid $gui-kit-gray-90;
+ border-radius: 4px;
+
+ svg {
+ display: none;
+ }
+
+ &.selected {
+ svg {
+ display: flex;
+ width: 40px;
+ height: 40px;
+ align-self: center;
+ width: 100%;
+ }
+ }
+
+ &.blues {
+ background: linear-gradient(180deg, #2492EB 0%, #104378 100%);
+ }
+
+ &.aquas {
+ background: linear-gradient(180deg, #4BB7C2 0%, #215563 100%);
+ }
+
+ &.greens {
+ background: linear-gradient(180deg, #98C739 0%, #435B1D 100%);
+ }
+
+ &.purples {
+ background: linear-gradient(180deg, #6D78B0 0%, #31375B 100%);
+ }
+
+ &.pinks {
+ background: linear-gradient(180deg, #E16CA0 0%, #643353 100%);
+ }
+
+ &.reds {
+ background: linear-gradient(180deg, #CC4645 0%, #5B2024 100%);
+ }
+
+ &.oranges {
+ background: linear-gradient(180deg, #F47E58 0%, #6E3A2C 100%);
+ }
+
+ &.yellows {
+ background: linear-gradient(180deg, #F5C257 0%, #6C5A2C 100%);
+ }
+
+ &.lightGrays {
+ background: linear-gradient(180deg, #C3C5CA 0%, #828692 100%);
+ }
+
+ &.darkGrays {
+ background: linear-gradient(180deg, #555962 0%, #18191B 100%);
+ }
+
+ &.angularGradient {
+ background: conic-gradient(from 180deg at 50% 50%, #2492EB 0deg, #4BB7C2 56.25deg, #98C739 106.88deg, #6D78B0 159.38deg, #E16CA0 208.13deg, #CC4645 258.75deg, #F47E58 309.38deg, #F5C257 360deg);
+ }
+ }
+
+ .colorName {
+ @include font-roboto;
+ color: $black;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 26px;
+ text-align: center;
+ margin-top: 8px;
+
+ @include mobile {
+ font-size: 14px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/FormElements/FormField/index.jsx b/src/apps/self-service/src/components/form-elements/FormField/index.jsx
similarity index 100%
rename from src/components/FormElements/FormField/index.jsx
rename to src/apps/self-service/src/components/form-elements/FormField/index.jsx
diff --git a/src/components/FormElements/FormField/styles.module.scss b/src/apps/self-service/src/components/form-elements/FormField/styles.module.scss
similarity index 100%
rename from src/components/FormElements/FormField/styles.module.scss
rename to src/apps/self-service/src/components/form-elements/FormField/styles.module.scss
diff --git a/src/components/FormElements/FormInputCheckbox/index.jsx b/src/apps/self-service/src/components/form-elements/FormInputCheckbox/index.jsx
similarity index 100%
rename from src/components/FormElements/FormInputCheckbox/index.jsx
rename to src/apps/self-service/src/components/form-elements/FormInputCheckbox/index.jsx
diff --git a/src/components/FormElements/FormInputCheckbox/styles.module.scss b/src/apps/self-service/src/components/form-elements/FormInputCheckbox/styles.module.scss
similarity index 100%
rename from src/components/FormElements/FormInputCheckbox/styles.module.scss
rename to src/apps/self-service/src/components/form-elements/FormInputCheckbox/styles.module.scss
diff --git a/src/components/FormElements/FormInputText/index.jsx b/src/apps/self-service/src/components/form-elements/FormInputText/index.jsx
similarity index 100%
rename from src/components/FormElements/FormInputText/index.jsx
rename to src/apps/self-service/src/components/form-elements/FormInputText/index.jsx
diff --git a/src/components/FormElements/FormInputText/styles.module.scss b/src/apps/self-service/src/components/form-elements/FormInputText/styles.module.scss
similarity index 100%
rename from src/components/FormElements/FormInputText/styles.module.scss
rename to src/apps/self-service/src/components/form-elements/FormInputText/styles.module.scss
diff --git a/src/components/FormElements/FormInputTextArea/index.jsx b/src/apps/self-service/src/components/form-elements/FormInputTextArea/index.jsx
similarity index 100%
rename from src/components/FormElements/FormInputTextArea/index.jsx
rename to src/apps/self-service/src/components/form-elements/FormInputTextArea/index.jsx
diff --git a/src/apps/self-service/src/components/form-elements/FormInputTextArea/styles.module.scss b/src/apps/self-service/src/components/form-elements/FormInputTextArea/styles.module.scss
new file mode 100644
index 000000000..1883d9b26
--- /dev/null
+++ b/src/apps/self-service/src/components/form-elements/FormInputTextArea/styles.module.scss
@@ -0,0 +1,28 @@
+@import "../../../styles/include";
+@import "@libs/ui/styles/includes";
+
+.form-input-textarea {
+ background-color: #ffffff !important;
+ box-sizing: border-box !important;
+ color: #444 !important;
+ font-size: 16px !important;
+ outline: none !important;
+ border: 0 !important;
+ padding: 0 15px !important;
+ width: 100% !important;
+ height: 117px !important;
+ resize: none;
+ @include font-roboto;
+
+
+ &::placeholder {
+ color: #aaaaaa !important;
+ font-size: 18px !important;
+ text-transform: none !important;
+ font-weight: 400;
+ }
+
+ &:focus {
+ box-shadow: none !important;
+ }
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/components/form-elements/index.js b/src/apps/self-service/src/components/form-elements/index.js
new file mode 100644
index 000000000..110ca040f
--- /dev/null
+++ b/src/apps/self-service/src/components/form-elements/index.js
@@ -0,0 +1,5 @@
+export { default as ColorOptions } from './ColorOptions';
+export { default as FormField } from './FormField';
+export { default as FormInputCheckbox } from './FormInputCheckbox';
+export { default as FormInputText } from './FormInputText';
+export { default as FormInputTextArea } from './FormInputTextArea';
diff --git a/src/apps/self-service/src/components/help-icon/HelpIcon.jsx b/src/apps/self-service/src/components/help-icon/HelpIcon.jsx
new file mode 100644
index 000000000..f4a6d2bba
--- /dev/null
+++ b/src/apps/self-service/src/components/help-icon/HelpIcon.jsx
@@ -0,0 +1,22 @@
+import classNames from "classnames";
+import { ReactComponent as HintIcon} from "../../assets/images/icon-hint-green.svg";
+
+import styles from"./styles.module.scss";
+import { Tooltip } from "~/libs/ui";
+
+const HelpIcon = ({
+ children,
+ inverted = false,
+}) => (
+ {
+ if (!_.isArray(selectedColor.value)) {
+ selectedColor.value = [];
+ selectedColor.option = [];
+ }
+ if (_.includes(selectedColor.value, color.name)) {
+ const newColors = _.filter(
+ selectedColor.value,
+ (v) => v !== color.name
+ );
+ onSelect(newColors, newColors);
+ } else if (color.isAny) {
+ const newColors = [color.name];
+ onSelect(newColors, newColors);
+ } else if (selectedColor.value.length < 3) {
+ const newColors = [
+ ...selectedColor.value.filter(
+ (name) => name !== anyColor?.name
+ ),
+ color.name,
+ ];
+ onSelect(newColors, newColors);
+ }
+ }}
+ >
+
+ ))}
+
+
+ {color.name}
+
+
+
+
+);
+
+export default HelpIcon;
diff --git a/src/apps/self-service/src/components/help-icon/index.js b/src/apps/self-service/src/components/help-icon/index.js
new file mode 100644
index 000000000..323841cef
--- /dev/null
+++ b/src/apps/self-service/src/components/help-icon/index.js
@@ -0,0 +1 @@
+export { default as HelpIcon } from './HelpIcon';
diff --git a/src/apps/self-service/src/components/help-icon/styles.module.scss b/src/apps/self-service/src/components/help-icon/styles.module.scss
new file mode 100644
index 000000000..d477000cb
--- /dev/null
+++ b/src/apps/self-service/src/components/help-icon/styles.module.scss
@@ -0,0 +1,13 @@
+@import "../../styles/include";
+
+.help-icon {
+ text-transform: none;
+ .tooltip {
+ max-width: 30ch;
+
+ &.inverted {
+ background-color: $grey-bg;
+ color: $black;
+ }
+ }
+}
diff --git a/src-ts/lib/info-card/InfoCard.module.scss b/src/apps/self-service/src/components/info-card/InfoCard.module.scss
similarity index 94%
rename from src-ts/lib/info-card/InfoCard.module.scss
rename to src/apps/self-service/src/components/info-card/InfoCard.module.scss
index 46b5a986e..0b1caa4f9 100644
--- a/src-ts/lib/info-card/InfoCard.module.scss
+++ b/src/apps/self-service/src/components/info-card/InfoCard.module.scss
@@ -1,8 +1,8 @@
-@import '../styles/includes';
+@import '@libs/ui/styles/includes';
.card {
width: 100%;
- margin: $space-xxl 0;
+ margin: $sp-6 0;
padding: 16px;
&.collapsible {
@@ -62,4 +62,4 @@
.warn {
background-color: $orange-25;
-}
\ No newline at end of file
+}
diff --git a/src-ts/lib/info-card/InfoCard.tsx b/src/apps/self-service/src/components/info-card/InfoCard.tsx
similarity index 98%
rename from src-ts/lib/info-card/InfoCard.tsx
rename to src/apps/self-service/src/components/info-card/InfoCard.tsx
index 8e83773d4..c5671728f 100644
--- a/src-ts/lib/info-card/InfoCard.tsx
+++ b/src/apps/self-service/src/components/info-card/InfoCard.tsx
@@ -1,7 +1,7 @@
import { Dispatch, FC, ReactNode, SetStateAction, useEffect, useState } from 'react'
import classNames from 'classnames'
-import { ArrowIcon } from '../svgs'
+import { ArrowIcon } from '~/libs/ui'
import styles from './InfoCard.module.scss'
diff --git a/src-ts/lib/info-card/index.ts b/src/apps/self-service/src/components/info-card/index.ts
similarity index 100%
rename from src-ts/lib/info-card/index.ts
rename to src/apps/self-service/src/components/info-card/index.ts
diff --git a/src/apps/self-service/src/components/legacy/index.js b/src/apps/self-service/src/components/legacy/index.js
new file mode 100644
index 000000000..edbd9c2c7
--- /dev/null
+++ b/src/apps/self-service/src/components/legacy/index.js
@@ -0,0 +1,2 @@
+export * from './progress';
+export * from './website-design-banner-legacy';
diff --git a/src/apps/self-service/src/components/legacy/progress/Progress.jsx b/src/apps/self-service/src/components/legacy/progress/Progress.jsx
new file mode 100644
index 000000000..8b6bfb16c
--- /dev/null
+++ b/src/apps/self-service/src/components/legacy/progress/Progress.jsx
@@ -0,0 +1,75 @@
+/**
+ * Onboard Progress
+ *
+ * Onboard Progress (level) Indicator
+ */
+import _ from "lodash";
+import PT from "prop-types";
+import React, { useState } from "react";
+import cn from "classnames";
+
+import { EnvironmentConfig } from "~/config";
+
+import ProgressDonutChart from "./ProgressDonutChart";
+import ProgressPopup from "./ProgressPopup";
+import { MAX_COMPLETED_STEP } from "../../../config";
+import { PROGRESS_LEVELS as originalLevels } from "../../../config/constants/products/website-design-legacy";
+import { ReactComponent as IconThreeDots} from "../../../assets/images/icon-three-dots-vertical.svg";
+import { getCookie, setCookie } from "../../../utils/autoSaveBeforeLogin";
+
+import styles from "./styles.module.scss";
+
+const Progress = ({ level, styleName, setStep, ...props }) => {
+ const [progressPopupOpen, setProgressPopupOpen] = useState(false);
+ let maxCompletedStep = getCookie(MAX_COMPLETED_STEP) || 0;
+ if (
+ _.isUndefined(maxCompletedStep) ||
+ _.isNull(maxCompletedStep) ||
+ parseInt(maxCompletedStep) < level
+ ) {
+ setCookie(MAX_COMPLETED_STEP, level, EnvironmentConfig.AUTO_SAVED_COOKIE_EXPIRED_IN);
+ maxCompletedStep = level;
+ }
+
+ const levels = _.filter(originalLevels, (l) => l.visibleInProgressIndicator);
+
+ const trueLevel = _.find(levels, (l) => l.trueIndex === level);
+
+ return (
+
+ setProgressPopupOpen(false)}
+ />
+
+ );
+};
+
+Progress.propTypes = {
+ level: PT.number,
+};
+
+export default Progress;
diff --git a/src/apps/self-service/src/components/legacy/progress/ProgressDonutChart/index.jsx b/src/apps/self-service/src/components/legacy/progress/ProgressDonutChart/index.jsx
new file mode 100644
index 000000000..616f1e090
--- /dev/null
+++ b/src/apps/self-service/src/components/legacy/progress/ProgressDonutChart/index.jsx
@@ -0,0 +1,74 @@
+/**
+ * ProgressDonutChart
+ *
+ * Progress Donut Chart to display on top-right of the page
+ */
+import React, { useState } from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import Chart from "react-apexcharts";
+
+import styles from "./styles.module.scss";
+
+const ProgressDonutChart = ({ progress, styleName, ...props }) => {
+ // chart options to display donut chart
+ const [chartOptions] = useState({
+ chart: {
+ height: 150,
+ width: 120,
+ type: "radialBar",
+ },
+ plotOptions: {
+ radialBar: {
+ hollow: {
+ size: "40%",
+ },
+ dataLabels: {
+ name: {
+ show: false,
+ },
+ value: {
+ show: false,
+ },
+ },
+ },
+ },
+ stroke: {
+ lineCap: "round",
+ },
+ fill: {
+ colors: ["#9d41c9"],
+ },
+ });
+ return (
+
+
+
+ STEP {trueLevel.showIndex}
+ / {levels.length}
+
+ {trueLevel.label}
+ setProgressPopupOpen((o) => !o)}
+ role="tab"
+ tabIndex={0}
+ >
+
+
+
+ );
+};
+
+ProgressDonutChart.propTypes = {
+ progress: PT.number,
+};
+
+export default ProgressDonutChart;
diff --git a/src/apps/self-service/src/components/legacy/progress/ProgressDonutChart/styles.module.scss b/src/apps/self-service/src/components/legacy/progress/ProgressDonutChart/styles.module.scss
new file mode 100644
index 000000000..b0044dc12
--- /dev/null
+++ b/src/apps/self-service/src/components/legacy/progress/ProgressDonutChart/styles.module.scss
@@ -0,0 +1,15 @@
+@import "../../../../styles/include";
+
+.progress-donut-chart {}
+
+.desktop-chart {
+ @include mobile {
+ display: none;
+ }
+}
+
+.mobile-chart {
+ @include desktop {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/components/legacy/progress/ProgressPopup/index.jsx b/src/apps/self-service/src/components/legacy/progress/ProgressPopup/index.jsx
new file mode 100644
index 000000000..3e5d21ccc
--- /dev/null
+++ b/src/apps/self-service/src/components/legacy/progress/ProgressPopup/index.jsx
@@ -0,0 +1,99 @@
+/**
+ * ProgressPopup
+ *
+ * Three dots Progress Popup
+ */
+import { useNavigate } from "react-router-dom";
+import cn from "classnames";
+import PT from "prop-types";
+import { useEffect, useRef } from "react";
+
+import { IconCheck } from "~/libs/ui";
+
+import { ReactComponent as IconCross } from "../../../../assets/images/icon-cross.svg";
+
+import styles from "./styles.module.scss";
+
+const ProgressPopup = ({
+ level,
+ maxStep,
+ levels,
+ open,
+ setStep,
+ handleClose = (e) => e,
+ styleName,
+ ...props
+}) => {
+ const useOutsideAlerter = (ref) => {
+ useEffect(() => {
+ function handleClickOutside(event) {
+ if (ref.current && !ref.current.contains(event.target)) {
+ handleClose(event);
+ }
+ }
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, [ref]);
+ };
+
+ const wrapperRef = useRef(null);
+ useOutsideAlerter(wrapperRef);
+ const navigate = useNavigate();
+ // add a class to show if it's done or current or notDone yet
+ const getLevelClass = (curLevel) => {
+ return curLevel.trueIndex === level
+ ? "current"
+ : curLevel.trueIndex < maxStep
+ ? "done"
+ : "";
+ };
+ return (
+ <>
+ {open && (
+
+
+
+
+
+
+
+
+ handleClose(e)} />
+
+ )}
+
+ );
+};
+
+ProgressPopup.propTypes = {
+ level: PT.number,
+ maxStep: PT.number,
+ levels: PT.array,
+ open: PT.bool,
+ handleClose: PT.func,
+};
+
+export default ProgressPopup;
diff --git a/src/apps/self-service/src/components/legacy/progress/ProgressPopup/styles.module.scss b/src/apps/self-service/src/components/legacy/progress/ProgressPopup/styles.module.scss
new file mode 100644
index 000000000..5b3a81025
--- /dev/null
+++ b/src/apps/self-service/src/components/legacy/progress/ProgressPopup/styles.module.scss
@@ -0,0 +1,64 @@
+@import "../../../../styles/include";
+
+.progress-popup {
+ position: absolute;
+ right: 10px;
+ top: 85px;
+ min-height: 150px;
+ background: #fff;
+ padding: 20px 20px 10px 20px;
+ box-shadow: 0 0 6px #aaa;
+ border-radius: 4px;
+
+ .level {
+ margin: 20px 0;
+ display: flex;
+ align-items: center;
+
+ &.done,
+ &.current {
+ cursor: pointer;
+ }
+
+ .level-check-icon {
+ width: 24px;
+ height: 24px;
+ background: #f4f4f4;
+ border-radius: 50%;
+ margin-right: 10px;
+
+ &.done {
+ background: #06d6a0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .icon-check {
+ height: 14px;
+
+ * {
+ fill: #ffffff;
+ }
+ }
+ }
+
+ &.current {
+ border: 2px solid #06d6a0;
+ background: #ffffff;
+ }
+ }
+ }
+
+ .close-btn {
+ position: absolute;
+ top: 21px;
+ right: 18px;
+ cursor: pointer;
+ height: 15px;
+ width: 15px;
+
+ * {
+ stroke-width: 1px !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/components/legacy/progress/index.js b/src/apps/self-service/src/components/legacy/progress/index.js
new file mode 100644
index 000000000..825c3413b
--- /dev/null
+++ b/src/apps/self-service/src/components/legacy/progress/index.js
@@ -0,0 +1 @@
+export { default as Progress } from './Progress'
diff --git a/src/apps/self-service/src/components/legacy/progress/styles.module.scss b/src/apps/self-service/src/components/legacy/progress/styles.module.scss
new file mode 100644
index 000000000..f5b025b2f
--- /dev/null
+++ b/src/apps/self-service/src/components/legacy/progress/styles.module.scss
@@ -0,0 +1,58 @@
+@import "../../../styles/include";
+
+.onboard-progress {
+ position: absolute;
+ right: 30px;
+ top: 20px;
+ display: flex;
+ align-items: center;
+
+ @include mobile {
+ position: relative;
+ right: auto;
+ top: auto;
+ }
+}
+
+.level-container {
+ display: flex;
+ align-items: flex-end;
+ flex-direction: column;
+ color: $black;
+
+ @include mobile {
+ flex: 1;
+ align-items: flex-start;
+ }
+
+ .level {
+ margin-bottom: 8px;
+
+ .level-num {
+ font-weight: bold;
+ }
+
+ .muted {
+ color: #ddd;
+ }
+ }
+
+ .label {
+ @include mobile {
+ @include font-barlow;
+ line-height: 20px;
+ text-transform: uppercase;
+ font-weight: 600;
+ }
+ }
+}
+
+.progress-donut-chart {}
+
+.progress-popup-toggle {
+ cursor: pointer;
+
+ * {
+ fill: $green1;
+ }
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/components/legacy/website-design-banner-legacy/WebsiteDesignBannerLegacy.js b/src/apps/self-service/src/components/legacy/website-design-banner-legacy/WebsiteDesignBannerLegacy.js
new file mode 100644
index 000000000..aa8fa0385
--- /dev/null
+++ b/src/apps/self-service/src/components/legacy/website-design-banner-legacy/WebsiteDesignBannerLegacy.js
@@ -0,0 +1,33 @@
+/**
+ *
+ * Website Design Banner
+ */
+import styles from "./styles.module.scss";
+import { ReactComponent as IconWebsiteTools } from "../../../assets/images/design-tools.svg";
+
+export const WebsiteDesignBannerLegacy = () => {
+ return (
+
+ {levels.map((level, levelIndex) => (
+
+ {
+ if (getLevelClass(level) !== "") {
+ setStep(level.trueIndex);
+ navigate(level.url);
+ }
+ }}
+ role="tab"
+ tabIndex={0}
+ >
+
+ ))}
+
+ {getLevelClass(level) === "done" && (
+
+ {level.label}
+
+
+
+ );
+};
+
+export default WebsiteDesignBannerLegacy;
diff --git a/src/apps/self-service/src/components/legacy/website-design-banner-legacy/index.js b/src/apps/self-service/src/components/legacy/website-design-banner-legacy/index.js
new file mode 100644
index 000000000..04e966b71
--- /dev/null
+++ b/src/apps/self-service/src/components/legacy/website-design-banner-legacy/index.js
@@ -0,0 +1 @@
+export { default as WebsiteDesignBannerLegacy } from './WebsiteDesignBannerLegacy';
diff --git a/src/components/Banners/WebsiteDesignBannerLegacy/styles.module.scss b/src/apps/self-service/src/components/legacy/website-design-banner-legacy/styles.module.scss
similarity index 100%
rename from src/components/Banners/WebsiteDesignBannerLegacy/styles.module.scss
rename to src/apps/self-service/src/components/legacy/website-design-banner-legacy/styles.module.scss
diff --git a/src/apps/self-service/src/components/option-button/OptionButton.module.scss b/src/apps/self-service/src/components/option-button/OptionButton.module.scss
new file mode 100644
index 000000000..f6b78887a
--- /dev/null
+++ b/src/apps/self-service/src/components/option-button/OptionButton.module.scss
@@ -0,0 +1,55 @@
+@use '@libs/ui/styles/typography';
+@import '@libs/ui/styles/includes';
+
+.bug-delivery-radio {
+ border: 1px solid $black-100;
+ border-radius: 4px;
+ padding-top: $sp-4;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ cursor: pointer;
+ height: 100%;
+ svg {
+ path {
+ fill: $tc-black;
+ }
+ }
+ &.selected {
+ background-color: $turq-160;
+ border: 1px solid $turq-160;
+ svg {
+ path {
+ fill: $tc-white;
+ }
+ }
+ .name {
+ color: $tc-white;
+ }
+ .recommended-text-wrapper {
+ background-color: $black-5;
+ color: $turq-160;
+ }
+ }
+ &.recommended {
+ .name {
+ margin-bottom: $sp-5;
+ }
+ }
+ .name {
+ @extend .body-large-bold;
+ margin-top: $sp-2;
+ margin-bottom: $sp-8;
+ }
+ .recommended-text-wrapper {
+ @extend .overline;
+
+ text-align: center;
+ background-color: $black-100;
+ color: $tc-white;
+ padding: $sp-1 $sp-2;
+ border-radius: 0 0 $sp-1 $sp-1;
+ width: 100%;
+ }
+}
diff --git a/src/apps/self-service/src/components/option-button/OptionButton.tsx b/src/apps/self-service/src/components/option-button/OptionButton.tsx
new file mode 100644
index 000000000..22716560c
--- /dev/null
+++ b/src/apps/self-service/src/components/option-button/OptionButton.tsx
@@ -0,0 +1,30 @@
+import { FC } from 'react'
+import cn from 'classnames'
+
+import styles from './OptionButton.module.scss'
+
+interface RadioProps {
+ icon?: JSX.Element
+ isRecommended?: boolean
+ name: string
+ selected?: boolean
+}
+
+const OptionButton: FC
+
+
+
+
+
+
+
+
+
+ WEBSITE DESIGN LEGACY
+
+ Create a beautiful custom visual design for your website. and
+ device types, your vision, and receive up to 5 modern modern
+ modern designs.
+
+
+ <>
+ {props.icon}
+
+)
+
+export default OptionButton
diff --git a/src/apps/self-service/src/components/option-button/index.tsx b/src/apps/self-service/src/components/option-button/index.tsx
new file mode 100644
index 000000000..2466253f4
--- /dev/null
+++ b/src/apps/self-service/src/components/option-button/index.tsx
@@ -0,0 +1 @@
+export { default as OptionButton } from './OptionButton'
diff --git a/src/components/PageContent/index.jsx b/src/apps/self-service/src/components/page-elements/PageContent/index.jsx
similarity index 100%
rename from src/components/PageContent/index.jsx
rename to src/apps/self-service/src/components/page-elements/PageContent/index.jsx
diff --git a/src/apps/self-service/src/components/page-elements/PageContent/styles.module.scss b/src/apps/self-service/src/components/page-elements/PageContent/styles.module.scss
new file mode 100644
index 000000000..df064a4ef
--- /dev/null
+++ b/src/apps/self-service/src/components/page-elements/PageContent/styles.module.scss
@@ -0,0 +1,19 @@
+@import "../../../styles/include";
+
+.page-content {
+ margin: 32px 0;
+ padding: 40px 0;
+
+ @include mobile {
+ padding: 20px;
+ }
+
+ background: white;
+ border-radius: 8px;
+ position: relative;
+}
+
+.container {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
\ No newline at end of file
diff --git a/src/components/PageElements/PageFoot/index.jsx b/src/apps/self-service/src/components/page-elements/PageFoot/index.jsx
similarity index 100%
rename from src/components/PageElements/PageFoot/index.jsx
rename to src/apps/self-service/src/components/page-elements/PageFoot/index.jsx
diff --git a/src/components/PageElements/PageFoot/styles.module.scss b/src/apps/self-service/src/components/page-elements/PageFoot/styles.module.scss
similarity index 100%
rename from src/components/PageElements/PageFoot/styles.module.scss
rename to src/apps/self-service/src/components/page-elements/PageFoot/styles.module.scss
diff --git a/src/components/PageElements/PageH2/index.jsx b/src/apps/self-service/src/components/page-elements/PageH2/index.jsx
similarity index 100%
rename from src/components/PageElements/PageH2/index.jsx
rename to src/apps/self-service/src/components/page-elements/PageH2/index.jsx
diff --git a/src/components/PageElements/PageH2/styles.module.scss b/src/apps/self-service/src/components/page-elements/PageH2/styles.module.scss
similarity index 100%
rename from src/components/PageElements/PageH2/styles.module.scss
rename to src/apps/self-service/src/components/page-elements/PageH2/styles.module.scss
diff --git a/src/components/PageElements/PageH3/index.jsx b/src/apps/self-service/src/components/page-elements/PageH3/index.jsx
similarity index 100%
rename from src/components/PageElements/PageH3/index.jsx
rename to src/apps/self-service/src/components/page-elements/PageH3/index.jsx
diff --git a/src/components/PageElements/PageH3/styles.module.scss b/src/apps/self-service/src/components/page-elements/PageH3/styles.module.scss
similarity index 100%
rename from src/components/PageElements/PageH3/styles.module.scss
rename to src/apps/self-service/src/components/page-elements/PageH3/styles.module.scss
diff --git a/src/apps/self-service/src/components/page-elements/PageListInput/index.jsx b/src/apps/self-service/src/components/page-elements/PageListInput/index.jsx
new file mode 100644
index 000000000..9ad0c3706
--- /dev/null
+++ b/src/apps/self-service/src/components/page-elements/PageListInput/index.jsx
@@ -0,0 +1,52 @@
+/**
+ * PageListInput
+ *
+ * A List Of grouped Inputs, used in build my profile page
+ */
+import cn from "classnames";
+import PT from "prop-types";
+
+import { Button } from "~/libs/ui";
+
+import { currencyFormat } from "../../../utils";
+import styles from "./styles.module.scss";
+
+const PageListInput = ({
+ name,
+ addListInputItem,
+ styleName,
+ children,
+ canAdd,
+ pageCost,
+}) => {
+ return (
+ {props.name}
+ {props.isRecommended && Recommended
}
+
+
+
+ );
+};
+
+PageListInput.propTypes = {
+ addListInputItem: PT.func,
+ children: PT.node,
+};
+
+export default PageListInput;
diff --git a/src/apps/self-service/src/components/page-elements/PageListInput/styles.module.scss b/src/apps/self-service/src/components/page-elements/PageListInput/styles.module.scss
new file mode 100644
index 000000000..8bde1b73b
--- /dev/null
+++ b/src/apps/self-service/src/components/page-elements/PageListInput/styles.module.scss
@@ -0,0 +1,27 @@
+@import "../../../styles/include";
+
+.page-list-input {
+ .add-listinput-item-button {
+ color: $green1;
+ display: flex;
+ align-items: center;
+ font-weight: 430;
+ width: 100%;
+
+ &>* {
+ cursor: pointer;
+ align-items: center;
+ display: flex;
+ }
+
+ .pageText {
+ @include font-roboto;
+ font-weight: 700;
+ font-size: 14px;
+ color: $black;
+ letter-spacing: 0.8px;
+ line-height: 12px;
+ margin-bottom: 8px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/PageElements/PageP/index.jsx b/src/apps/self-service/src/components/page-elements/PageP/index.jsx
similarity index 100%
rename from src/components/PageElements/PageP/index.jsx
rename to src/apps/self-service/src/components/page-elements/PageP/index.jsx
diff --git a/src/components/PageElements/PageP/styles.module.scss b/src/apps/self-service/src/components/page-elements/PageP/styles.module.scss
similarity index 100%
rename from src/components/PageElements/PageP/styles.module.scss
rename to src/apps/self-service/src/components/page-elements/PageP/styles.module.scss
diff --git a/src/components/PageElements/PageRow/index.jsx b/src/apps/self-service/src/components/page-elements/PageRow/index.jsx
similarity index 100%
rename from src/components/PageElements/PageRow/index.jsx
rename to src/apps/self-service/src/components/page-elements/PageRow/index.jsx
diff --git a/src/components/PageElements/PageRow/styles.module.scss b/src/apps/self-service/src/components/page-elements/PageRow/styles.module.scss
similarity index 100%
rename from src/components/PageElements/PageRow/styles.module.scss
rename to src/apps/self-service/src/components/page-elements/PageRow/styles.module.scss
diff --git a/src/components/PageElements/PageUl/index.jsx b/src/apps/self-service/src/components/page-elements/PageUl/index.jsx
similarity index 100%
rename from src/components/PageElements/PageUl/index.jsx
rename to src/apps/self-service/src/components/page-elements/PageUl/index.jsx
diff --git a/src/components/PageElements/PageUl/styles.module.scss b/src/apps/self-service/src/components/page-elements/PageUl/styles.module.scss
similarity index 100%
rename from src/components/PageElements/PageUl/styles.module.scss
rename to src/apps/self-service/src/components/page-elements/PageUl/styles.module.scss
diff --git a/src/apps/self-service/src/components/page-elements/index.js b/src/apps/self-service/src/components/page-elements/index.js
new file mode 100644
index 000000000..f53680c61
--- /dev/null
+++ b/src/apps/self-service/src/components/page-elements/index.js
@@ -0,0 +1,8 @@
+export { default as PageContent } from './PageContent';
+export { default as PageFoot } from './PageFoot';
+export { default as PageH2 } from './PageH2';
+export { default as PageH3 } from './PageH3';
+export { default as PageListInput } from './PageListInput';
+export { default as PageP } from './PageP';
+export { default as PageRow } from './PageRow';
+export { default as PageUl } from './PageUl';
diff --git a/src/apps/self-service/src/components/payment-form/PaymentForm.module.scss b/src/apps/self-service/src/components/payment-form/PaymentForm.module.scss
new file mode 100644
index 000000000..06076f3fe
--- /dev/null
+++ b/src/apps/self-service/src/components/payment-form/PaymentForm.module.scss
@@ -0,0 +1,69 @@
+@use '@libs/ui/styles/typography';
+@import '@libs/ui/styles/includes';
+@import '@libs/ui/styles/inputs';
+
+.payment-form {
+ .label {
+ @extend .body-ultra-small;
+ @extend .ultra-small-bold;
+ margin-bottom: $sp-1;
+ }
+
+ .cardElement {
+ @include formInputText;
+
+ input,
+ select {
+ @include formInputText;
+ }
+ }
+
+ .date-cvv-wrapper {
+ display: flex;
+ > div {
+ flex: 1;
+ &:first-child {
+ margin-right: $sp-2;
+ }
+ }
+ }
+
+ .input-wrapper {
+ margin-bottom: $sp-2;
+ &.error {
+ margin-bottom: 0;
+ .error {
+ margin-bottom: $sp-2;
+ }
+ }
+ }
+
+ .checkbox-label {
+ @extend .body-main;
+ white-space: pre-wrap;
+ .link {
+ @extend .body-main-link;
+ color: $link-blue-dark;
+ margin-left: $sp-1;
+ cursor: pointer;
+ }
+ }
+
+ .info-box {
+ @extend .body-small;
+ padding: $sp-4;
+ background-color: $orange-25;
+ border-radius: $sp-1;
+ margin-bottom: $sp-4;
+ }
+
+ .pay-button {
+ width: 100%;
+ }
+
+ .error {
+ @extend .body-small;
+ color: $red-120;
+ margin-bottom: $sp-4;
+ }
+}
\ No newline at end of file
diff --git a/src-ts/lib/payment-form/PaymentForm.tsx b/src/apps/self-service/src/components/payment-form/PaymentForm.tsx
similarity index 95%
rename from src-ts/lib/payment-form/PaymentForm.tsx
rename to src/apps/self-service/src/components/payment-form/PaymentForm.tsx
index 5c7dc4713..ac19923ca 100644
--- a/src-ts/lib/payment-form/PaymentForm.tsx
+++ b/src/apps/self-service/src/components/payment-form/PaymentForm.tsx
@@ -18,11 +18,11 @@ import {
StripeCardExpiryElementChangeEvent,
StripeCardNumberElementChangeEvent,
} from '@stripe/stripe-js'
+import { Button, InputText, InputWrapper } from '~/libs/ui'
+import { profileContext, ProfileContextData } from '~/libs/core'
+import { OrderContractModal } from '~/libs/shared'
-import { Button, OrderContractModal, profileContext, ProfileContextData } from '..'
-import { InputText } from '../form/form-groups/form-input'
-import { InputWrapper } from '../form/form-groups/form-input/input-wrapper'
-import ReactSelect from '../react-select/ReactSelect'
+import { ReactSelect } from '../react-select'
import { COUNTRIES_OPTIONS } from './constants'
import styles from './PaymentForm.module.scss'
@@ -253,12 +253,12 @@ const PaymentForm: React.FC
+
+ {children}
+
+
+ addListInputItem(name)}
+ >
+ {canAdd && (
+
+
+
+ )}
+ NEED ANOTHER PAGE?
+ +
+
+ {helperBannerContent}
+
+
+
+ {aboutBannerContent}
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {isFindMeData && (
+ <>
+
+
+
+
+
+
+
+
+
+ )}
+
+ {isDataAdvisory && (
+ <>
+
+
+
+
+
+
+ )}
+
+ {isWebsiteDesign && (
+ <>
+
+
+
+
+
+
+
+
+
+
+ STYLE & THEME
+
+
+
+
+
+ {selectedStyleOption && (
+ {
+ handleInputChange("likedStyles", likes, likes);
+ }}
+ onDislike={(dislikes) => {
+ handleInputChange("dislikedStyles", dislikes, dislikes);
+ }}
+ onDismiss={() => setSelectedStyleOption(null)}
+ />
+ )}
+
+
+
+
+
+
+
+ )}
+
+
+ );
+};
+
+BasicInfoForm.defaultProps = {
+ serviceType: "",
+};
+
+BasicInfoForm.propTypes = {
+ estimate: PT.shape().isRequired,
+ serviceType: PT.string,
+ onFormUpdate: PT.func,
+ formData: PT.shape(),
+ bannerData: PT.shape().isRequired,
+};
+
+export default BasicInfoForm;
diff --git a/src/apps/self-service/src/components/products/basic-info-form/index.js b/src/apps/self-service/src/components/products/basic-info-form/index.js
new file mode 100644
index 000000000..b7735c12c
--- /dev/null
+++ b/src/apps/self-service/src/components/products/basic-info-form/index.js
@@ -0,0 +1 @@
+export { default as BasicInfoForm } from './BasicInfoForm';
diff --git a/src/apps/self-service/src/components/products/basic-info-form/styles.module.scss b/src/apps/self-service/src/components/products/basic-info-form/styles.module.scss
new file mode 100644
index 000000000..880e555d8
--- /dev/null
+++ b/src/apps/self-service/src/components/products/basic-info-form/styles.module.scss
@@ -0,0 +1,100 @@
+@import "../../../styles/include";
+
+.basicInfoForm {
+
+ .remove-website {
+ color: $green1;
+ cursor: pointer;
+ margin-bottom: 16px;
+ display: flex;
+ justify-content: flex-end;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ .addWebsiteButton {
+ background-color: white;
+ border: 0px;
+ color: #229174;
+ font-weight: 700;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+
+ svg {
+ width: 13.33px;
+ height: 13.33px;
+ margin-right: 2px;
+ }
+ }
+
+ .form-row {
+ align-items: flex-start;
+ }
+
+ .formFieldWrapper {
+ margin-top: 48px;
+
+ @include mobile {
+ margin-top: 24px;
+ }
+ }
+}
+
+.helpText {
+ color: $green1;
+ display: flex;
+}
+
+.assets {
+ margin-top: 12px;
+
+ p {
+ @include font-roboto;
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: 0.8px;
+ line-height: 12px;
+ color: $black;
+ margin-bottom: 8px;
+ }
+}
+
+.list {
+ list-style-type: disc;
+ padding-left: 20px;
+}
+
+.color-picker,
+.style-picker {
+ @include mobile {
+ padding: 29px;
+ }
+
+ width: 100% !important;
+ padding-right: inherit !important;
+ border: 2px solid $divider-color;
+ border-radius: 20px;
+ padding: 20px;
+
+ .colors,
+ .styles {
+ padding: 20px;
+
+ @include mobile {
+ margin-bottom: -30px;
+ padding: 0px;
+ }
+ }
+
+ .formFieldWrapper {
+ padding-right: 20px;
+ margin-top: 0;
+
+ @include mobile {
+ padding-right: 30px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/components/products/index.js b/src/apps/self-service/src/components/products/index.js
new file mode 100644
index 000000000..a3b66168f
--- /dev/null
+++ b/src/apps/self-service/src/components/products/index.js
@@ -0,0 +1,4 @@
+export * from '../../containers/products/basic-info';
+export * from './basic-info-form';
+export * from './style-options';
+export * from './styles-options-modal';
diff --git a/src/apps/self-service/src/components/products/style-options/StyleOptions.jsx b/src/apps/self-service/src/components/products/style-options/StyleOptions.jsx
new file mode 100644
index 000000000..0c874c869
--- /dev/null
+++ b/src/apps/self-service/src/components/products/style-options/StyleOptions.jsx
@@ -0,0 +1,88 @@
+/**
+ * Style Options component
+ */
+import classNames from "classnames";
+import PT from "prop-types";
+import _ from "lodash";
+
+import { ReactComponent as LikeIcon } from "../../../assets/images/thumbsup.svg";
+import { ReactComponent as DislikeIcon } from "../../../assets/images/thumbsdown.svg";
+import styles from "../../../assets/data/website-design-styles.json";
+import { HelpIcon } from "../../help-icon";
+
+import moduleStyles from "./styles.module.scss";
+
+const StyleOptions = ({
+ likes = [],
+ dislikes = [],
+ onLike,
+ onDislike,
+ onSelect,
+}) => {
+ return (
+
+ PROJECT TITLE
+ {isWebsiteDesign && (
+
+ Give your project a descriptive title. This is the name designers
+ will see when looking for your work.
+
+ )}
+ {(isDataExploration || isFindMeData || isDataAdvisory) && (
+
+ Give your project a descriptive title. This is what the data
+ scientists will see when looking for your work.
+
+ )}
+
+
+
+
+
+ handleInputChange(e.target.name, e.target.value, e.target.value)
+ }
+ onBlur={() => saveForm(false, true)}
+ />
+
+
+
+ Share Your Data (optional)
+
+ Add links (separate multiple links with commas) or upload your
+ data files here. Not ready or able to share? No problem, we'll
+ work with you on that later.
+
+
+
+
+
+
+
+
+ handleInputChange(
+ e.target.name,
+ e.target.value,
+ e.target.value
+ )
+ }
+ />
+
+
+
+ {"what would you like to learn?"}
+
+ Describe your data and what you would like to learn about it. If
+ you have a formal problem statement, please share it.
+
+
+
+
+ I spend money on marketing for my website, but it's hard to
+ know which marketing option works best. I make money from
+ advertising, so the more people that visit my site and engage
+ with something, the more ad money I can make. I shared the
+ reports I have from the past year for each of my 3 marketing
+ channels. I'd like to know how that data can help understand
+ where to focus my marketing spend.
+
+
+
+
+ +
+
+
+ handleInputChange(
+ e.target.name,
+ e.target.value,
+ e.target.value
+ )
+ }
+ name="goals"
+ placeholder={"Enter your goals and descriptions here"}
+ />
+
+
+
+ {"What Data Do You Need?"}
+
+ Briefly describe the analysis you want to do, and the type of
+ data you're looking for to do it. Be sure to include any
+ critical data requirements, such as specific geographies,
+ demographics, date ranges and/or key variables needed for your
+ analysis.{" "}
+
+
+
+
+ I'm a real estate investor & want to diversify into other
+ cities in Texas. Currently, we only invest in Dallas Fort
+ Worth. We're looking for 3-5 other cities in Texas to invest.
+ I'd like to evaluate rental demand and occupancy rates,
+ property price vs. avg rental payments, job and population
+ growth compared to state and national averages, and the trends
+ of renter-occupied households compared to homeowners. I think
+ there's data on sites like{" "}
+
+ {" "}
+ zillow.com
+ {" "}
+ and{" "}
+
+ {" "}
+ hotpads.com
+
+ , but it's hard to find and organize.
+
+
+
+ Not sure what data you need? Consider{" "}
+
+ {" "}
+ Problem Statement & Data Advisory
+ {" "}
+ to get clarity on the best data & approach for your goals.
+
+
+
+
+ +
+
+
+
+ handleInputChange(
+ e.target.name,
+ e.target.value,
+ e.target.value
+ )
+ }
+ name="analysis"
+ placeholder={
+ "Describe your analysis goal and data requirements"
+ }
+ />
+
+
+
+ {"Primary Data Challenge"}
+
+ Select the primary data challenge you're facing.
+
+
+
+
+ {
+ const selectedOption = items.findIndex((item) => item.value);
+ const foundOption = items.find((item) => item.value);
+ handleInputChange(
+ "primaryDataChallenge",
+ selectedOption,
+ foundOption.label
+ );
+ }}
+ size="lg"
+ options={primaryDataChallenge}
+ />
+
+
+
+ handleInputChange(
+ e.target.name,
+ e.target.value,
+ e.target.value
+ )
+ }
+ disabled={isOtherOptionSelected}
+ />
+
+
+ +
+ Sample Data
+
+ Sample data helps us understand your data needs. Often this is a
+ simple CSV/Excel table that shows the data labels (usually the
+ title of each column or row) and two or more rows of example
+ input data. Example: FName is a data label, 'Ankit' is input
+ data.
+
+
+
+
+
+
+
+
+ handleInputChange(
+ e.target.name,
+ e.target.value,
+ e.target.value
+ )
+ }
+ />
+
+
+
+ {"what’s your goal?"}
+
+ Describe what you want to do or learn with the help of data
+ science. What will this information or ability help improve?
+ Keep in mind that data science typically answers a question.
+ Good questions are specific, measurable and clarify important
+ context. This ensures that when your question is answered, you
+ learn something valuable and actionable.
+
+
+
+
+ How can I increase profit? How can I get more customers? How
+ can I do computer vision? These questions alone are too vague.
+ Which piece of equipment is going to fail first? Which of my
+ marketing channels produces the most customers per dollar? How
+ can I automatically review pictures or documents to for
+ specific content? These questions along with relevant data
+ and/or context enable our experts to shape your question into
+ something actionable. Don't worry, we'll help you along the
+ way. So let's get started!
+
+
+
+
+ +
+
+
+ handleInputChange(
+ e.target.name,
+ e.target.value,
+ e.target.value
+ )
+ }
+ name="goals"
+ placeholder={"Describe your goal"}
+ />
+
+
+
+ What data do you have?
+
+ The data you have available helps determine your data science
+ approach. Briefly describe the data you have in mind for your
+ project. What is it and how do you use it today? How much do you
+ have, and how/how often do you get more? Once you've described
+ the data, please upload a sample.
+
+
+
+
+ +
+ No data?
+
+ No problem. Based on your goals we'll recommend the type(s)
+ of data you need.
+
+
+
+ Can't share/upload?
+
+ Try sharing a sample. Samples can be just the headers,
+ labels or titles of your data set. Our experts need to
+ understand the type, volume and structure of your data, not
+ the contents themselves.
+
+
+
+
+
+ handleInputChange(
+ e.target.name,
+ e.target.value,
+ e.target.value
+ )
+ }
+ name="assetsDescription"
+ placeholder={"Describe your data"}
+ />
+
+
+
+
+
+ handleInputChange(
+ e.target.name,
+ e.target.value,
+ e.target.value
+ )
+ }
+ />
+
+
+
+ {"Description"}
+
+ What is the purpose of your website? What do you want visitors
+ to be able to do, e.g., see your work? Contact you? You should
+ include a general description as well as goals of the website.
+ You may also describe your audience and what you would like them
+ to do at your website.{" "}
+
+
+
+
+
+ I would like a design for a dog walking website that allows
+ visitors to select dog walkers and schedule dog walking
+ appointments.
+
+
+ The audience for my website will be dog owners. As a dog
+ owner, I want someone trustworthy to walk my dog, so he
+ feels loved while I’m at work.
+
+
+ Home Page:
+
I would like to see a landing screen to welcome our + customers and make them feel welcome and warm. We love their + dog and we want them to feel it! We really want our audience + to do one core action and that’s to get started finding + their perfect “Walkie” which is what we call our + professional dog walkers. +
+
+ Information Pages:
+
+ Our customers should be able to reach information about: Our + Services, Our Walkies, and Locations We Serve. Also, a user + must be able to Create an Account. +
+
+ Our Services include: dog walking, doggie day care, dog
+ feeding, basic grooming.
+
+
+ Our Walkies information should show a photo of the Walkie,
+ their name and a little bit about them. It’s important for
+ customers to see a badge of some sort that indicates all of
+ our dog walkers are insured.
+
+
+ Locations We Serve: We have 3 locations in the greater
+ Seattle area.
+
+
+ Each page should include a testimonial from one of our
+ users. For example: “WalkieDoggie is perfect. They are
+ always professional and they take amazing care of our dog,
+ Beefcake. - Victoria B. from Tacoma, Washington”
+
+
+
+
+
+ +
I would like to see a landing screen to welcome our + customers and make them feel welcome and warm. We love their + dog and we want them to feel it! We really want our audience + to do one core action and that’s to get started finding + their perfect “Walkie” which is what we call our + professional dog walkers. +
+ Our customers should be able to reach information about: Our + Services, Our Walkies, and Locations We Serve. Also, a user + must be able to Create an Account. +
+
+
+ handleInputChange(
+ e.target.name,
+ e.target.value,
+ e.target.value
+ )
+ }
+ name="analysis"
+ placeholder={"Describe your website"}
+ />
+
+
+
+ Your industry
+
+ Knowing your industry will help our designers understand you and
+ your audience. For example, some common industries are: Business
+ & Consulting, Construction, Entertainment & Arts, Healthcare,
+ Retail, and Technology.
+
+
+
+
+
+
+
+
+ handleInputChange(
+ e.target.name,
+ e.target.value,
+ e.target.value
+ )
+ }
+ />
+
+
+
+ inspiration
+
+ Are there websites that you love, from which our designers may
+ draw inspiration? Share the website URLs and tell us what you
+ like about them.
+
+
+
+
+ {_.map(_.get(formData, "inspiration", []), (entry, index) => (
+
+
+ {index ? (
+
+
+ handleArrayInputChange(
+ index,
+ "inspiration",
+ e.target.name,
+ e.target.value
+ )
+ }
+ />
+
+
+
+ handleArrayInputChange(
+ index,
+ "inspiration",
+ e.target.name,
+ e.target.value
+ )
+ }
+ name="feedback"
+ placeholder={"Describe what you like about this website"}
+ />
+
+
+ ))}
+
+ removeWebsite(index)}
+ >
+ Remove Website
+
+ ) : null}
+
+
+ Let us know the visual styles you like or dislike (optional):
+
+
+
+
+
+ setSelectedStyleOption(style)}
+ onLike={(likes) => {
+ handleInputChange("likedStyles", likes, likes);
+ }}
+ onDislike={(dislikes) => {
+ handleInputChange("dislikedStyles", dislikes, dislikes);
+ }}
+ />
+
+
+
+ Additional details about your look & feel preferences:
+
+
+
+
+
+ handleInputChange(e.target.name, e.target.value)
+ }
+ name="stylePreferences"
+ placeholder={"Describe your ideal look & feel"}
+ />
+
+
+
+
+ Choose colors you would like our designers to use in your site
+ design:
+
+
+
+
+
+ {
+ handleInputChange("colorOption", index, colorName);
+ }}
+ />
+
+
+
+ List any specific colors you would like used in your design:
+
+
+
+ 0 ? "(optional)" : ""
+ }`}
+ >
+
+ handleInputChange(e.target.name, e.target.value)
+ }
+ name="specificColor"
+ placeholder={
+ "Specify colors using their value in RGB, CMYK, or Hex"
+ }
+ />
+
+
+
+ share your brand or style assets
+
+ If you have them, gather and upload any assets that you think
+ might be helpful for our designers. Let us know if there is
+ anything you would like to communicate about these items.
+ Assets could be: +
+
+
+ + Assets could be: +
-
+
- your logo +
- your brand guide +
- mood boards +
- font files +
- sketches or other inspiration +
+
+
+
+
+ handleInputChange(
+ e.target.name,
+ e.target.value,
+ e.target.value
+ )
+ }
+ />
+
+
+
+ handleInputChange(
+ e.target.name,
+ e.target.value,
+ e.target.value
+ )
+ }
+ name="assetsDescription"
+ placeholder={"Describe what you would like us to know"}
+ />
+
+
+
+ {styles.map((style, index) => (
+
+
+);
+
+StylesOptionsModal.defaultProps = {};
+
+StylesOptionsModal.propTypes = {
+ likes: PT.arrayOf(PT.string),
+ dislikes: PT.arrayOf(PT.string),
+ onLike: PT.func,
+ onDislike: PT.func,
+};
+
+export default StylesOptionsModal;
diff --git a/src/apps/self-service/src/components/products/styles-options-modal/index.js b/src/apps/self-service/src/components/products/styles-options-modal/index.js
new file mode 100644
index 000000000..5b21eea22
--- /dev/null
+++ b/src/apps/self-service/src/components/products/styles-options-modal/index.js
@@ -0,0 +1 @@
+export { default as StylesOptionsModal } from './StylesOptionsModal';
diff --git a/src/apps/self-service/src/components/products/styles-options-modal/styles.module.scss b/src/apps/self-service/src/components/products/styles-options-modal/styles.module.scss
new file mode 100644
index 000000000..38eb38a3b
--- /dev/null
+++ b/src/apps/self-service/src/components/products/styles-options-modal/styles.module.scss
@@ -0,0 +1,134 @@
+@import "@libs/ui/styles/includes";
+@import "../../../styles/include";
+
+.styleWrapper {
+
+ .style {
+ position: relative;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ font-size: 22px;
+
+ .box {
+ border: 1px solid $black-20;
+ border-radius: 4px;
+ .preview {
+ width: 100%;
+ height: 450px;
+ max-height: calc(100vh - 450px);
+
+ @include ltemd {
+ max-height: calc(100vh - 550px);
+ }
+ }
+
+ .actions {
+ display: flex;
+ justify-content: center;
+ padding: 20px;
+
+ .liked {
+ fill: $green1;
+
+ * {
+ fill: $green1;
+ }
+ }
+
+ .disliked {
+ fill: $green1;
+
+ * {
+ fill: $green1;
+ }
+ }
+ svg {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+ }
+ }
+
+ &.dark-saturated {
+ .preview {
+ background: url('../../../assets/images/products/website-design/dark-saturated.png');
+ background-size: cover;
+ }
+ }
+
+ &.light-airy {
+ .preview {
+ background: url('../../../assets/images/products/website-design/light-airy.png');
+ background-size: cover;
+ }
+ }
+
+ &.fun-playful {
+ .preview {
+ background: url('../../../assets/images/products/website-design/fun-playful.png');
+ background-size: cover;
+ }
+ }
+
+ &.mature-serious {
+ .preview {
+ background: url('../../../assets/images/products/website-design/mature-serious.png');
+ background-size: cover;
+ }
+ }
+
+ &.simple-minimalist {
+ .preview {
+ background: url('../../../assets/images/products/website-design/simple-minimalist.png');
+ background-size: cover;
+ }
+ }
+
+ &.vibrant-colorful {
+ .preview {
+ background: url('../../../assets/images/products/website-design/vibrant-colorful.png');
+ background-size: cover;
+ }
+ }
+
+ &.soft-organic {
+ .preview {
+ background: url('../../../assets/images/products/website-design/soft-organic.png');
+ background-size: cover;
+ }
+ }
+
+ &.bold-rugged {
+ .preview {
+ background: url('../../../assets/images/products/website-design/bold-ragged.png');
+ background-size: cover;
+ }
+ }
+ }
+
+ .liked {
+ fill: $green1;
+
+ * {
+ fill: $green1;
+ }
+ }
+
+ .disliked {
+ fill: $green1;
+
+ * {
+ fill: $green1;
+ }
+ }
+
+ .description {
+ font-size: 16px;
+ line-height: 24px;
+ margin-bottom: 10px;
+ }
+}
diff --git a/src/components/RadioButton/index.jsx b/src/apps/self-service/src/components/radio-button/RadioButton.jsx
similarity index 100%
rename from src/components/RadioButton/index.jsx
rename to src/apps/self-service/src/components/radio-button/RadioButton.jsx
diff --git a/src/apps/self-service/src/components/radio-button/index.js b/src/apps/self-service/src/components/radio-button/index.js
new file mode 100644
index 000000000..7bc51af31
--- /dev/null
+++ b/src/apps/self-service/src/components/radio-button/index.js
@@ -0,0 +1 @@
+export { default as RadioButton } from './RadioButton';
diff --git a/src/components/RadioButton/styles.module.scss b/src/apps/self-service/src/components/radio-button/styles.module.scss
similarity index 100%
rename from src/components/RadioButton/styles.module.scss
rename to src/apps/self-service/src/components/radio-button/styles.module.scss
diff --git a/src-ts/lib/react-select/ReactSelect.module.scss b/src/apps/self-service/src/components/react-select/ReactSelect.module.scss
similarity index 89%
rename from src-ts/lib/react-select/ReactSelect.module.scss
rename to src/apps/self-service/src/components/react-select/ReactSelect.module.scss
index bdc3d56f4..42120a2f2 100644
--- a/src-ts/lib/react-select/ReactSelect.module.scss
+++ b/src/apps/self-service/src/components/react-select/ReactSelect.module.scss
@@ -1,4 +1,4 @@
-@import '../styles/includes';
+@import '@libs/ui/styles/includes';
.error {
:first-child {
diff --git a/src-ts/lib/react-select/ReactSelect.tsx b/src/apps/self-service/src/components/react-select/ReactSelect.tsx
similarity index 100%
rename from src-ts/lib/react-select/ReactSelect.tsx
rename to src/apps/self-service/src/components/react-select/ReactSelect.tsx
diff --git a/src-ts/lib/react-select/index.tsx b/src/apps/self-service/src/components/react-select/index.tsx
similarity index 100%
rename from src-ts/lib/react-select/index.tsx
rename to src/apps/self-service/src/components/react-select/index.tsx
diff --git a/src/apps/self-service/src/components/review-table-legacy/ReviewTableLegacy.jsx b/src/apps/self-service/src/components/review-table-legacy/ReviewTableLegacy.jsx
new file mode 100644
index 000000000..adc004529
--- /dev/null
+++ b/src/apps/self-service/src/components/review-table-legacy/ReviewTableLegacy.jsx
@@ -0,0 +1,164 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import classNames from "classnames";
+import { get, isArray, isObject, map, omit } from "lodash";
+
+import { PageDivider } from "~/libs/ui";
+
+import { PROGRESS_LEVELS } from "../../config/constants/products/website-design-legacy";
+import { ReactComponent as ArrowIcon } from "../../assets/images/icon-arrow.svg";
+
+import styles from "./styles.module.scss";
+
+/**
+ * Review Table Component
+ */
+const ReviewTableLegacy = ({ formData, enableEdit = true }) => {
+ const [steps, setSteps] = useState([
+ { id: 0, label: "Basic Info", value: "basicInfo", isOpen: true },
+ { id: 1, label: "Website Purpose", value: "websitePurpose", isOpen: true },
+ { id: 2, label: "Page Details", value: "pageDetails", isOpen: true },
+ { id: 3, label: "Branding", value: "branding", isOpen: true },
+ ]);
+
+ const setStepToggler = (id) => {
+ const newSteps = steps.map((item) =>
+ item.id === id ? { ...item, isOpen: !item.isOpen } : item
+ );
+
+ setSteps(newSteps);
+ };
+
+ const formatOption = (option) => {
+ if (isArray(option)) return option.join(", ");
+ if (isObject(option)) {
+ return formatOption(get(option, "option", option));
+ }
+ return option;
+ };
+
+ const renderOption = (option, title) => {
+ return (
+ = (props: WorkDetailDetailsProps) => {
+ const workType: WorkType = props.formData?.workType?.selectedWorkType
+
+ return (
+ | {} | string): string | Array | {} | string): boolean {
diff --git a/src-ts/tools/work/work-detail-details/work-detail-details-pane/index.ts b/src/apps/self-service/src/components/work-details/details/details-pane/index.ts
similarity index 100%
rename from src-ts/tools/work/work-detail-details/work-detail-details-pane/index.ts
rename to src/apps/self-service/src/components/work-details/details/details-pane/index.ts
diff --git a/src/apps/self-service/src/components/work-details/details/index.ts b/src/apps/self-service/src/components/work-details/details/index.ts
new file mode 100644
index 000000000..9317035cd
--- /dev/null
+++ b/src/apps/self-service/src/components/work-details/details/index.ts
@@ -0,0 +1,2 @@
+export { default as WorkDetailDetails } from './WorkDetailDetails'
+export { WorkDetailDetailsPane } from './details-pane'
diff --git a/src/apps/self-service/src/components/work-details/details/sidebar/WorkDetailDetailsSidebar.module.scss b/src/apps/self-service/src/components/work-details/details/sidebar/WorkDetailDetailsSidebar.module.scss
new file mode 100644
index 000000000..98c2a1550
--- /dev/null
+++ b/src/apps/self-service/src/components/work-details/details/sidebar/WorkDetailDetailsSidebar.module.scss
@@ -0,0 +1,22 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+ min-width: 323px;
+ padding-left: $sp-8;
+
+ border-left: $border-xs solid $black-10;
+ margin-left: $sp-8;
+ color: $black-100;
+}
+
+.link {
+ display: block;
+ @include font-roboto;
+ @include font-weight-bold;
+ font-size: 14px;
+ line-height: 14px;
+ color: $turq-160;
+ margin-top: $sp-4;
+ cursor: pointer;
+ text-transform: uppercase;
+}
diff --git a/src-ts/tools/work/work-detail-details/work-detail-details-sidebar/WorkDetailDetailsSidebar.tsx b/src/apps/self-service/src/components/work-details/details/sidebar/WorkDetailDetailsSidebar.tsx
similarity index 99%
rename from src-ts/tools/work/work-detail-details/work-detail-details-sidebar/WorkDetailDetailsSidebar.tsx
rename to src/apps/self-service/src/components/work-details/details/sidebar/WorkDetailDetailsSidebar.tsx
index 8d210694b..08e7e35ea 100644
--- a/src-ts/tools/work/work-detail-details/work-detail-details-sidebar/WorkDetailDetailsSidebar.tsx
+++ b/src/apps/self-service/src/components/work-details/details/sidebar/WorkDetailDetailsSidebar.tsx
@@ -1,6 +1,6 @@
import { Dispatch, FC, MouseEvent, SetStateAction, useState } from 'react'
-import { OrderContractModal, PrivacyPolicyModal, TermsModal } from '../../../../lib'
+import { OrderContractModal, PrivacyPolicyModal, TermsModal } from '~/libs/shared'
import styles from './WorkDetailDetailsSidebar.module.scss'
diff --git a/src-ts/tools/work/work-detail-details/work-detail-details-sidebar/index.ts b/src/apps/self-service/src/components/work-details/details/sidebar/index.ts
similarity index 100%
rename from src-ts/tools/work/work-detail-details/work-detail-details-sidebar/index.ts
rename to src/apps/self-service/src/components/work-details/details/sidebar/index.ts
diff --git a/src/apps/self-service/src/components/work-details/header/WorkDetailHeader.module.scss b/src/apps/self-service/src/components/work-details/header/WorkDetailHeader.module.scss
new file mode 100644
index 000000000..56d97ceba
--- /dev/null
+++ b/src/apps/self-service/src/components/work-details/header/WorkDetailHeader.module.scss
@@ -0,0 +1,15 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: $sp-8 0 $sp-6;
+ margin: 0 0 $sp-6;
+ border-bottom: $border solid $black-10;
+
+ .heading {
+ margin-right: $sp-8;
+ color: $black-100;
+ }
+}
diff --git a/src-ts/tools/work/work-detail-header/WorkDetailHeader.tsx b/src/apps/self-service/src/components/work-details/header/WorkDetailHeader.tsx
similarity index 83%
rename from src-ts/tools/work/work-detail-header/WorkDetailHeader.tsx
rename to src/apps/self-service/src/components/work-details/header/WorkDetailHeader.tsx
index 6284e564b..68efd2960 100644
--- a/src-ts/tools/work/work-detail-header/WorkDetailHeader.tsx
+++ b/src/apps/self-service/src/components/work-details/header/WorkDetailHeader.tsx
@@ -1,7 +1,8 @@
import { FC } from 'react'
-import { Button } from '../../../lib'
-import { Work, workCreateFromChallenge, WorkStatus } from '../work-lib'
+import { Button } from '~/libs/ui'
+
+import { Work, workCreateFromChallenge, WorkStatus } from '../../../lib'
import styles from './WorkDetailHeader.module.scss'
@@ -28,9 +29,10 @@ const WorkDetailHeader: FC = (props: WorkDetailHeaderProp
{work.status === WorkStatus.ready && (
)}
diff --git a/src/apps/self-service/src/components/work-details/header/index.ts b/src/apps/self-service/src/components/work-details/header/index.ts
new file mode 100644
index 000000000..64b9753ec
--- /dev/null
+++ b/src/apps/self-service/src/components/work-details/header/index.ts
@@ -0,0 +1 @@
+export { default as WorkDetailHeader } from './WorkDetailHeader'
diff --git a/src/apps/self-service/src/components/work-details/index.ts b/src/apps/self-service/src/components/work-details/index.ts
new file mode 100644
index 000000000..1874ddde2
--- /dev/null
+++ b/src/apps/self-service/src/components/work-details/index.ts
@@ -0,0 +1,4 @@
+export * from './details'
+export * from './header'
+export * from './solutions'
+export * from './summary'
diff --git a/src/apps/self-service/src/components/work-details/solutions/WorkDetailSolutions.module.scss b/src/apps/self-service/src/components/work-details/solutions/WorkDetailSolutions.module.scss
new file mode 100644
index 000000000..9d7233d56
--- /dev/null
+++ b/src/apps/self-service/src/components/work-details/solutions/WorkDetailSolutions.module.scss
@@ -0,0 +1,16 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+ display: block;
+ padding-bottom: $sp-8;
+}
+
+.header {
+ @include font-black-100;
+ @include font-roboto;
+ margin-bottom: $sp-4;
+
+ p {
+ margin-top: $sp-2;
+ }
+}
diff --git a/src-ts/tools/work/work-detail-solutions/WorkDetailSolutions.tsx b/src/apps/self-service/src/components/work-details/solutions/WorkDetailSolutions.tsx
similarity index 98%
rename from src-ts/tools/work/work-detail-solutions/WorkDetailSolutions.tsx
rename to src/apps/self-service/src/components/work-details/solutions/WorkDetailSolutions.tsx
index b6e7543cd..a12121652 100644
--- a/src-ts/tools/work/work-detail-solutions/WorkDetailSolutions.tsx
+++ b/src/apps/self-service/src/components/work-details/solutions/WorkDetailSolutions.tsx
@@ -1,6 +1,6 @@
import { FC, useMemo } from 'react'
-import { Work, workCreateFromChallenge, WorkSolution, WorkStatus } from '../work-lib'
+import { Work, workCreateFromChallenge, WorkSolution, WorkStatus } from '../../../lib'
import { WorkSolutionsList } from './work-solutions-list'
import styles from './WorkDetailSolutions.module.scss'
diff --git a/src-ts/tools/work/work-detail-solutions/index.ts b/src/apps/self-service/src/components/work-details/solutions/index.ts
similarity index 100%
rename from src-ts/tools/work/work-detail-solutions/index.ts
rename to src/apps/self-service/src/components/work-details/solutions/index.ts
diff --git a/src-ts/tools/work/work-detail-solutions/work-solutions-list/work-solutions-list-item/WorkSolutionsListItem.module.scss b/src/apps/self-service/src/components/work-details/solutions/work-solutions-list-item/WorkSolutionsListItem.module.scss
similarity index 81%
rename from src-ts/tools/work/work-detail-solutions/work-solutions-list/work-solutions-list-item/WorkSolutionsListItem.module.scss
rename to src/apps/self-service/src/components/work-details/solutions/work-solutions-list-item/WorkSolutionsListItem.module.scss
index 4a0212abf..a4abb14bc 100644
--- a/src-ts/tools/work/work-detail-solutions/work-solutions-list/work-solutions-list-item/WorkSolutionsListItem.module.scss
+++ b/src/apps/self-service/src/components/work-details/solutions/work-solutions-list-item/WorkSolutionsListItem.module.scss
@@ -1,4 +1,5 @@
-@import '../../../../../lib/styles';
+@use '@libs/ui/styles/typography';
+@import '@libs/ui/styles/includes';
.wrap {
counter-increment: solutionListItem;
@@ -8,10 +9,10 @@
display: flex;
align-items: center;
- gap: $space-lg;
+ gap: $sp-4;
position: relative;
- padding: $space-lg 0;
+ padding: $sp-4 0;
border-top: $border-xs solid $black-10;
&:last-child {
@@ -33,7 +34,7 @@
.name {
margin-right: auto;
span + span {
- margin-left: $space-xs;
+ margin-left: $sp-1;
}
}
}
diff --git a/src-ts/tools/work/work-detail-solutions/work-solutions-list/work-solutions-list-item/WorkSolutionsListItem.tsx b/src/apps/self-service/src/components/work-details/solutions/work-solutions-list-item/WorkSolutionsListItem.tsx
similarity index 83%
rename from src-ts/tools/work/work-detail-solutions/work-solutions-list/work-solutions-list-item/WorkSolutionsListItem.tsx
rename to src/apps/self-service/src/components/work-details/solutions/work-solutions-list-item/WorkSolutionsListItem.tsx
index 27336db29..3820dece8 100644
--- a/src-ts/tools/work/work-detail-solutions/work-solutions-list/work-solutions-list-item/WorkSolutionsListItem.tsx
+++ b/src/apps/self-service/src/components/work-details/solutions/work-solutions-list-item/WorkSolutionsListItem.tsx
@@ -1,7 +1,8 @@
import { FC } from 'react'
-import { Button } from '../../../../../lib'
-import { WorkSolution } from '../../../work-lib'
+import { Button } from '~/libs/ui'
+
+import { WorkSolution } from '../../../../lib'
import styles from './WorkSolutionsListItem.module.scss'
@@ -23,10 +24,10 @@ const WorkSolutionsListItem: FC = (props: WorkSoluti
diff --git a/src-ts/tools/work/work-detail-solutions/work-solutions-list/work-solutions-list-item/index.ts b/src/apps/self-service/src/components/work-details/solutions/work-solutions-list-item/index.ts
similarity index 100%
rename from src-ts/tools/work/work-detail-solutions/work-solutions-list/work-solutions-list-item/index.ts
rename to src/apps/self-service/src/components/work-details/solutions/work-solutions-list-item/index.ts
diff --git a/src/apps/self-service/src/components/work-details/solutions/work-solutions-list/WorkSolutionsList.module.scss b/src/apps/self-service/src/components/work-details/solutions/work-solutions-list/WorkSolutionsList.module.scss
new file mode 100644
index 000000000..72a87b282
--- /dev/null
+++ b/src/apps/self-service/src/components/work-details/solutions/work-solutions-list/WorkSolutionsList.module.scss
@@ -0,0 +1,22 @@
+@use '@libs/ui/styles/typography';
+@import '@libs/ui/styles/includes';
+
+.list-wrap {
+ counter-reset: solutionListItem;
+}
+
+
+.solutions-not-available {
+ @extend .large-subtitle;
+ @include font-barlow;
+ color: $black-100;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 507px;
+ padding: $sp-4;
+ text-align: center;
+ background-color: $black-5;
+ border-radius: $sp-2;
+}
diff --git a/src-ts/tools/work/work-detail-solutions/work-solutions-list/WorkSolutionsList.tsx b/src/apps/self-service/src/components/work-details/solutions/work-solutions-list/WorkSolutionsList.tsx
similarity index 89%
rename from src-ts/tools/work/work-detail-solutions/work-solutions-list/WorkSolutionsList.tsx
rename to src/apps/self-service/src/components/work-details/solutions/work-solutions-list/WorkSolutionsList.tsx
index 9e7f051c6..34cd78712 100644
--- a/src-ts/tools/work/work-detail-solutions/work-solutions-list/WorkSolutionsList.tsx
+++ b/src/apps/self-service/src/components/work-details/solutions/work-solutions-list/WorkSolutionsList.tsx
@@ -1,9 +1,9 @@
import { FC } from 'react'
import moment from 'moment'
-import { Work, WorkSolution } from '../../work-lib'
+import { Work, WorkSolution } from '../../../../lib'
+import { WorkSolutionsListItem } from '../work-solutions-list-item'
-import { WorkSolutionsListItem } from './work-solutions-list-item'
import styles from './WorkSolutionsList.module.scss'
interface WorkSolutionsListProps {
diff --git a/src-ts/tools/work/work-detail-solutions/work-solutions-list/index.ts b/src/apps/self-service/src/components/work-details/solutions/work-solutions-list/index.ts
similarity index 100%
rename from src-ts/tools/work/work-detail-solutions/work-solutions-list/index.ts
rename to src/apps/self-service/src/components/work-details/solutions/work-solutions-list/index.ts
diff --git a/src-ts/tools/work/work-detail-summary/WorkDetailHighlights/WorkDetailHighlights.module.scss b/src/apps/self-service/src/components/work-details/summary/WorkDetailHighlights/WorkDetailHighlights.module.scss
similarity index 78%
rename from src-ts/tools/work/work-detail-summary/WorkDetailHighlights/WorkDetailHighlights.module.scss
rename to src/apps/self-service/src/components/work-details/summary/WorkDetailHighlights/WorkDetailHighlights.module.scss
index 9e55ce311..f7ef6b05e 100644
--- a/src-ts/tools/work/work-detail-summary/WorkDetailHighlights/WorkDetailHighlights.module.scss
+++ b/src/apps/self-service/src/components/work-details/summary/WorkDetailHighlights/WorkDetailHighlights.module.scss
@@ -1,12 +1,12 @@
-@import '../../../../lib/styles/includes';
-@import '../../../../lib/styles/typography';
+@use '@libs/ui/styles/typography';
+@import '@libs/ui/styles/includes';
-$icon-size: calc($space-xxl * 2);
+$icon-size: calc($sp-6 * 2);
.highlights-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
- margin-bottom: $space-xxl;
+ margin-bottom: $sp-6;
overflow: auto;
.highlight {
@@ -16,7 +16,7 @@ $icon-size: calc($space-xxl * 2);
align-items: center;
text-align: center;
margin-right: 0;
- padding: $space-lg;
+ padding: $sp-4;
border-left: $border-xs solid $black-10;
border-right: $border-xs solid $black-10;
@@ -34,7 +34,7 @@ $icon-size: calc($space-xxl * 2);
h4 {
border: none;
- padding: $space-xl 0 0 0;
+ padding: $sp-5 0 0 0;
}
.info {
diff --git a/src-ts/tools/work/work-detail-summary/WorkDetailHighlights/WorkDetailHighlights.tsx b/src/apps/self-service/src/components/work-details/summary/WorkDetailHighlights/WorkDetailHighlights.tsx
similarity index 92%
rename from src-ts/tools/work/work-detail-summary/WorkDetailHighlights/WorkDetailHighlights.tsx
rename to src/apps/self-service/src/components/work-details/summary/WorkDetailHighlights/WorkDetailHighlights.tsx
index b1eb10275..277754f68 100644
--- a/src-ts/tools/work/work-detail-summary/WorkDetailHighlights/WorkDetailHighlights.tsx
+++ b/src/apps/self-service/src/components/work-details/summary/WorkDetailHighlights/WorkDetailHighlights.tsx
@@ -2,10 +2,10 @@ import { FC } from 'react'
import {
IconOutline,
- textFormatDateLocaleShortString,
- textFormatMoneyLocaleString,
-} from '../../../../lib'
-import { Work } from '../../work-lib'
+} from '~/libs/ui'
+import { textFormatDateLocaleShortString, textFormatMoneyLocaleString } from '~/libs/shared'
+
+import { Work } from '../../../../lib'
import styles from './WorkDetailHighlights.module.scss'
diff --git a/src-ts/tools/work/work-detail-summary/WorkDetailHighlights/index.ts b/src/apps/self-service/src/components/work-details/summary/WorkDetailHighlights/index.ts
similarity index 100%
rename from src-ts/tools/work/work-detail-summary/WorkDetailHighlights/index.ts
rename to src/apps/self-service/src/components/work-details/summary/WorkDetailHighlights/index.ts
diff --git a/src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/WorkDetailProgress.module.scss b/src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/WorkDetailProgress.module.scss
new file mode 100644
index 000000000..d4ffdd079
--- /dev/null
+++ b/src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/WorkDetailProgress.module.scss
@@ -0,0 +1,19 @@
+@import '@libs/ui/styles/includes';
+
+.progress-container {
+ margin-bottom: calc($sp-4 + $sp-6);
+ padding: $sp-4 $sp-6 $sp-6;
+ border-radius: $sp-2;
+ @extend .bg-black-5;
+
+ h3 {
+ margin-bottom: $sp-4;
+ color: $black-100;
+ }
+
+ .progress {
+ display: flex;
+ justify-content: space-between;
+ margin-top: calc($sp-4 + $sp-6);
+ }
+}
diff --git a/src-ts/tools/work/work-detail-summary/WorkDetailProgress/WorkDetailProgress.tsx b/src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/WorkDetailProgress.tsx
similarity index 89%
rename from src-ts/tools/work/work-detail-summary/WorkDetailProgress/WorkDetailProgress.tsx
rename to src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/WorkDetailProgress.tsx
index fb0d2dfb2..0dc1a6437 100644
--- a/src-ts/tools/work/work-detail-summary/WorkDetailProgress/WorkDetailProgress.tsx
+++ b/src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/WorkDetailProgress.tsx
@@ -1,7 +1,6 @@
import { FC } from 'react'
-import { WorkProgress } from '../../work-lib'
-import '../../../../lib/styles/index.scss'
+import { WorkProgress } from '../../../../lib'
import { WorkDetailProgressItem } from './WorkDetailProgressItem'
import styles from './WorkDetailProgress.module.scss'
diff --git a/src-ts/tools/work/work-detail-summary/WorkDetailProgress/WorkDetailProgressItem/WorkDetailProgressItem.module.scss b/src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/WorkDetailProgressItem/WorkDetailProgressItem.module.scss
similarity index 84%
rename from src-ts/tools/work/work-detail-summary/WorkDetailProgress/WorkDetailProgressItem/WorkDetailProgressItem.module.scss
rename to src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/WorkDetailProgressItem/WorkDetailProgressItem.module.scss
index b105ea501..075ca3e3b 100644
--- a/src-ts/tools/work/work-detail-summary/WorkDetailProgress/WorkDetailProgressItem/WorkDetailProgressItem.module.scss
+++ b/src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/WorkDetailProgressItem/WorkDetailProgressItem.module.scss
@@ -1,6 +1,6 @@
-@import "../../../../../lib/styles/includes";
+@import '@libs/ui/styles/includes';
-$dot-size: calc($space-lg + $space-xxl);
+$dot-size: calc($sp-4 + $sp-6);
.progress-bar-list-item {
position: relative;
@@ -15,7 +15,7 @@ $dot-size: calc($space-lg + $space-xxl);
.label {
display: block;
- margin-top: $space-sm;
+ margin-top: $sp-2;
margin-left: calc(-1 * calc($dot-size + 3px));
width: auto;
text-align: center;
@@ -28,7 +28,7 @@ $dot-size: calc($space-lg + $space-xxl);
.date {
display: block;
- margin-top: $space-xs;
+ margin-top: $sp-1;
}
}
@@ -38,9 +38,9 @@ $dot-size: calc($space-lg + $space-xxl);
justify-content: center;
width: $dot-size;
height: $dot-size;
- margin-bottom: $space-sm;
+ margin-bottom: $sp-2;
@extend .bg-black-10;
- border: $space-xs solid $black-20;
+ border: $sp-1 solid $black-20;
border-radius: 50%;
box-sizing: border-box;
color: $black-60;
@@ -51,10 +51,10 @@ $dot-size: calc($space-lg + $space-xxl);
content: '';
display: block;
position: absolute;
- top: $space-lg;
+ top: $sp-4;
left: 54%;
width: 100%;
- height: $space-sm;
+ height: $sp-2;
@extend .bg-black-20;
z-index: 1;
}
diff --git a/src-ts/tools/work/work-detail-summary/WorkDetailProgress/WorkDetailProgressItem/WorkDetailProgressItem.tsx b/src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/WorkDetailProgressItem/WorkDetailProgressItem.tsx
similarity index 91%
rename from src-ts/tools/work/work-detail-summary/WorkDetailProgress/WorkDetailProgressItem/WorkDetailProgressItem.tsx
rename to src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/WorkDetailProgressItem/WorkDetailProgressItem.tsx
index 78d975f5a..f8aab9aca 100644
--- a/src-ts/tools/work/work-detail-summary/WorkDetailProgress/WorkDetailProgressItem/WorkDetailProgressItem.tsx
+++ b/src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/WorkDetailProgressItem/WorkDetailProgressItem.tsx
@@ -1,8 +1,9 @@
import { FC } from 'react'
import classNames from 'classnames'
-import { textFormatDateLocaleShortString } from '../../../../../lib'
-import { WorkProgressStep } from '../../../work-lib'
+import { textFormatDateLocaleShortString } from '~/libs/shared'
+
+import { WorkProgressStep } from '../../../../../lib'
import styles from './WorkDetailProgressItem.module.scss'
diff --git a/src-ts/tools/work/work-detail-summary/WorkDetailProgress/WorkDetailProgressItem/index.ts b/src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/WorkDetailProgressItem/index.ts
similarity index 100%
rename from src-ts/tools/work/work-detail-summary/WorkDetailProgress/WorkDetailProgressItem/index.ts
rename to src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/WorkDetailProgressItem/index.ts
diff --git a/src-ts/tools/work/work-detail-summary/WorkDetailProgress/index.ts b/src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/index.ts
similarity index 100%
rename from src-ts/tools/work/work-detail-summary/WorkDetailProgress/index.ts
rename to src/apps/self-service/src/components/work-details/summary/WorkDetailProgress/index.ts
diff --git a/src-ts/tools/work/work-detail-summary/WorkDetailSummary.tsx b/src/apps/self-service/src/components/work-details/summary/WorkDetailSummary.tsx
similarity index 91%
rename from src-ts/tools/work/work-detail-summary/WorkDetailSummary.tsx
rename to src/apps/self-service/src/components/work-details/summary/WorkDetailSummary.tsx
index 9fae02bdc..152f8d693 100644
--- a/src-ts/tools/work/work-detail-summary/WorkDetailSummary.tsx
+++ b/src/apps/self-service/src/components/work-details/summary/WorkDetailSummary.tsx
@@ -1,6 +1,6 @@
import { FC } from 'react'
-import { Work, workCreateFromChallenge, WorkStatus } from '../work-lib'
+import { Work, workCreateFromChallenge, WorkStatus } from '../../../lib'
import { WorkDetailHighlights } from './WorkDetailHighlights'
import { WorkDetailProgress } from './WorkDetailProgress'
diff --git a/src/apps/self-service/src/components/work-details/summary/WorkTransferredStatus/WorkTransferredStatus.module.scss b/src/apps/self-service/src/components/work-details/summary/WorkTransferredStatus/WorkTransferredStatus.module.scss
new file mode 100644
index 000000000..ace2becd6
--- /dev/null
+++ b/src/apps/self-service/src/components/work-details/summary/WorkTransferredStatus/WorkTransferredStatus.module.scss
@@ -0,0 +1,20 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+ margin-bottom: calc($sp-4 + $sp-6);
+ padding: $sp-4 $sp-6 $sp-6;
+ border-radius: $sp-2;
+ @extend .bg-black-5;
+ color: $black-100;
+
+ h3 {
+ margin-bottom: $sp-4;
+ color: $black-100;
+ }
+}
+
+.line {
+ + .line {
+ margin-top: $sp-4;
+ }
+}
diff --git a/src-ts/tools/work/work-detail-summary/WorkTransferredStatus/WorkTransferredStatus.tsx b/src/apps/self-service/src/components/work-details/summary/WorkTransferredStatus/WorkTransferredStatus.tsx
similarity index 100%
rename from src-ts/tools/work/work-detail-summary/WorkTransferredStatus/WorkTransferredStatus.tsx
rename to src/apps/self-service/src/components/work-details/summary/WorkTransferredStatus/WorkTransferredStatus.tsx
diff --git a/src-ts/tools/work/work-detail-summary/WorkTransferredStatus/index.ts b/src/apps/self-service/src/components/work-details/summary/WorkTransferredStatus/index.ts
similarity index 100%
rename from src-ts/tools/work/work-detail-summary/WorkTransferredStatus/index.ts
rename to src/apps/self-service/src/components/work-details/summary/WorkTransferredStatus/index.ts
diff --git a/src-ts/tools/work/work-detail-summary/index.ts b/src/apps/self-service/src/components/work-details/summary/index.ts
similarity index 100%
rename from src-ts/tools/work/work-detail-summary/index.ts
rename to src/apps/self-service/src/components/work-details/summary/index.ts
diff --git a/src-ts/tools/work/work-detail-header/WorkFeedback/WorkFeedback.module.scss b/src/apps/self-service/src/components/work-feedback/WorkFeedback.module.scss
similarity index 100%
rename from src-ts/tools/work/work-detail-header/WorkFeedback/WorkFeedback.module.scss
rename to src/apps/self-service/src/components/work-feedback/WorkFeedback.module.scss
diff --git a/src-ts/tools/work/work-detail-header/WorkFeedback/WorkFeedback.tsx b/src/apps/self-service/src/components/work-feedback/WorkFeedback.tsx
similarity index 83%
rename from src-ts/tools/work/work-detail-header/WorkFeedback/WorkFeedback.tsx
rename to src/apps/self-service/src/components/work-feedback/WorkFeedback.tsx
index ecd26fcc5..d741806a3 100644
--- a/src-ts/tools/work/work-detail-header/WorkFeedback/WorkFeedback.tsx
+++ b/src/apps/self-service/src/components/work-feedback/WorkFeedback.tsx
@@ -1,12 +1,22 @@
import { Dispatch, FC, SetStateAction, useState } from 'react'
-import { BaseModal, Form, FormDefinition, formGetInputFields, FormInputModel, formOnReset } from '../../../../lib'
-import { FormValue } from '../../../../lib/form/form-functions'
-import { Challenge } from '../../work-lib'
+import {
+ BaseModal,
+ Form,
+ FormDefinition,
+ formGetInputFields,
+ FormInputModel,
+ formOnReset,
+ FormValue,
+} from '~/libs/ui'
+
+import { Challenge } from '../../lib'
import { workFeedbackFormDef } from './work-feedback-form.config'
import styles from './WorkFeedback.module.scss'
+type ReqGeneratorFn = (inputs: ReadonlyArray
+
+ );
+};
+
+StyleOptions.defaultProps = {};
+
+StyleOptions.propTypes = {
+ likes: PT.arrayOf(PT.string),
+ dislikes: PT.arrayOf(PT.string),
+ onLike: PT.func,
+ onDislike: PT.func,
+};
+
+export default StyleOptions;
diff --git a/src/apps/self-service/src/components/products/style-options/index.js b/src/apps/self-service/src/components/products/style-options/index.js
new file mode 100644
index 000000000..dbbe1743c
--- /dev/null
+++ b/src/apps/self-service/src/components/products/style-options/index.js
@@ -0,0 +1 @@
+export { default as StyleOptions } from './StyleOptions';
diff --git a/src/apps/self-service/src/components/products/style-options/styles.module.scss b/src/apps/self-service/src/components/products/style-options/styles.module.scss
new file mode 100644
index 000000000..a5752c2bf
--- /dev/null
+++ b/src/apps/self-service/src/components/products/style-options/styles.module.scss
@@ -0,0 +1,136 @@
+@import "../../../styles/include";
+
+.styleOptions {
+
+ display: flex;
+ flex-wrap: wrap;
+ gap: 24px;
+ margin-bottom: 34px;
+ justify-content: center;
+
+ @include mobile {
+ display: inline-block;
+ }
+
+ .styleWrapper {
+ .style {
+ position: relative;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ .box {
+ border: 1px solid $black-20;
+ border-radius: 4px;
+ .preview {
+ width: 240px;
+ height: 200px;
+ cursor: pointer;
+ }
+
+ .actions {
+ display: flex;
+ justify-content: center;
+ padding: 20px;
+
+ svg {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
+ .liked {
+ fill: $green1;
+
+ * {
+ fill: $green1;
+ }
+ }
+
+ .disliked {
+ fill: $green1;
+
+ * {
+ fill: $green1;
+ }
+ }
+ }
+ }
+
+ &.dark-saturated {
+ .preview {
+ background: url('../../../assets/images/products/website-design/dark-saturated.png');
+ background-size: cover;
+ }
+ }
+
+ &.light-airy {
+ .preview {
+ background: url('../../../assets/images/products/website-design/light-airy.png');
+ background-size: cover;
+ }
+ }
+
+ &.fun-playful {
+ .preview {
+ background: url('../../../assets/images/products/website-design/fun-playful.png');
+ background-size: cover;
+ }
+ }
+
+ &.mature-serious {
+ .preview {
+ background: url('../../../assets/images/products/website-design/mature-serious.png');
+ background-size: cover;
+ }
+ }
+
+ &.simple-minimalist {
+ .preview {
+ background: url('../../../assets/images/products/website-design/simple-minimalist.png');
+ background-size: cover;
+ }
+ }
+
+ &.vibrant-colorful {
+ .preview {
+ background: url('../../../assets/images/products/website-design/vibrant-colorful.png');
+ background-size: cover;
+ }
+ }
+
+ &.soft-organic {
+ .preview {
+ background: url('../../../assets/images/products/website-design/soft-organic.png');
+ background-size: cover;
+ }
+ }
+
+ &.bold-rugged {
+ .preview {
+ background: url('../../../assets/images/products/website-design/bold-ragged.png');
+ background-size: cover;
+ }
+ }
+ }
+
+ .name {
+ @include font-roboto;
+ display: flex;
+ justify-content: center;
+ style: $black;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 26px;
+ text-align: center;
+ margin-top: 8px;
+ margin-bottom: 8px;
+
+ .toolTip {
+ margin-left: 2px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/components/products/styles-options-modal/StylesOptionsModal.jsx b/src/apps/self-service/src/components/products/styles-options-modal/StylesOptionsModal.jsx
new file mode 100644
index 000000000..83322bd9b
--- /dev/null
+++ b/src/apps/self-service/src/components/products/styles-options-modal/StylesOptionsModal.jsx
@@ -0,0 +1,81 @@
+/**
+ * Style Options component
+ */
+import classNames from "classnames";
+import PT from "prop-types";
+import _ from "lodash";
+
+import { BaseModal } from "~/libs/ui";
+
+import { ReactComponent as LikeIcon } from "../../../assets/images/thumbsup.svg";
+import { ReactComponent as DislikeIcon } from "../../../assets/images/thumbsdown.svg";
+
+import styles from "./styles.module.scss";
+
+const StylesOptionsModal = ({
+ onDismiss,
+ style,
+ likes = [],
+ dislikes = [],
+ onLike,
+ onDislike,
+}) => (
+
+
+ ))}
+
+ {style.name}
+
+ {style.description}
+
+
+
+
+ onSelect(style)}
+ />
+
+
+ {
+ if (likes.includes(style.name)) {
+ onLike(likes.filter((s) => s !== style.name));
+ } else {
+ onLike([...likes, style.name]);
+ if (dislikes.includes(style.name)) {
+ onDislike(dislikes.filter((s) => s !== style.name));
+ }
+ }
+ }}
+ className={_.includes(likes, style.name) ? moduleStyles["liked"] : null}
+ />
+ {
+ if (dislikes.includes(style.name)) {
+ onDislike(dislikes.filter((s) => s !== style.name));
+ } else {
+ onDislike([...dislikes, style.name]);
+ if (likes.includes(style.name)) {
+ onLike(likes.filter((s) => s !== style.name));
+ }
+ }
+ }}
+ className={
+ _.includes(dislikes, style.name) ? moduleStyles["disliked"] : null
+ }
+ />
+
+
+
+
+
+
+ {style.description}
+
+
+
+
+
+ {
+ if (likes.includes(style.name)) {
+ onLike(likes.filter((s) => s !== style.name));
+ } else {
+ onLike([...likes, style.name]);
+ if (dislikes.includes(style.name)) {
+ onDislike(dislikes.filter((s) => s !== style.name));
+ }
+ }
+ }}
+ className={_.includes(likes, style.name) ? styles["liked"] : null}
+ />
+ {
+ if (dislikes.includes(style.name)) {
+ onDislike(dislikes.filter((s) => s !== style.name));
+ } else {
+ onDislike([...dislikes, style.name]);
+ if (likes.includes(style.name)) {
+ onLike(likes.filter((s) => s !== style.name));
+ }
+ }
+ }}
+ className={_.includes(dislikes, style.name) ? styles["disliked"] : null}
+ />
+
+
+ {option.option && (
+
+ );
+ };
+
+ const renderDetails = (step) => {
+ let items = formData[step.value] || {};
+ if (formData?.workType?.selectedWorkType === "Find Me Data") {
+ items = omit(items, ["assetsUrl", "goals"]);
+ } else {
+ items = omit(items, [
+ "analysis",
+ "primaryDataChallenge",
+ "primaryDataChallengeOther",
+ "sampleData",
+ ]);
+ }
+ return Object.keys(items).map((key) => {
+ if (isArray(items[key]))
+ return map(items[key], (item, i) => (
+
+
+ )}
+
+
+ {option.title || title}
+{formatOption(option.option)}
+
+
+ ));
+ return renderOption(items[key]);
+ });
+ };
+
+ const renderPageDetails = (step) => {
+ const items = formData[step.value] || {};
+ const pages = items?.pages || [];
+
+ return pages.map((page, index) => {
+ return (
+
+
+ + {key} {i + 1} +
++ {Object.keys(item).map((subKey) => + renderOption(item[subKey], subKey) + )} +
+
+ {page?.pageName && (
+
+ );
+ });
+ };
+
+ return (
+ <>
+ {steps
+ .filter((s) => {
+ if (s.value === "pageDetails")
+ return get(formData[s.value], "pages[0].pageDetails") !== "";
+ return !!formData[s.value];
+ })
+ .map((step, index) => {
+ let redirectPage = PROGRESS_LEVELS.find(
+ (item) => item.label === step.label
+ );
+ return (
+ <>
+
+
+ )}
+ {page?.pageDetails && (
+
+
+ Page {index + 1} Name
+{page?.pageName}
+
+
+ )}
+
+
+ Page {index + 1} Requirements
+{page?.pageDetails}
+ setStepToggler(index)}
+ >
+
+
+ {step.isOpen
+ ? step.value === "pageDetails"
+ ? renderPageDetails(step)
+ : renderDetails(step)
+ : null}
+
+ + {step.label} + {enableEdit && ( + + edit + + )} +
+
+
+
+
+ )
+}
+
+export default WorkDetailDetails
diff --git a/src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.module.scss b/src/apps/self-service/src/components/work-details/details/details-pane/WorkDetailDetailsPane.module.scss
similarity index 80%
rename from src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.module.scss
rename to src/apps/self-service/src/components/work-details/details/details-pane/WorkDetailDetailsPane.module.scss
index c54378ae7..79d5961e2 100644
--- a/src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.module.scss
+++ b/src/apps/self-service/src/components/work-details/details/details-pane/WorkDetailDetailsPane.module.scss
@@ -1,10 +1,11 @@
-@import '../../../../lib/styles';
+@use '@libs/ui/styles/typography';
+@import '@libs/ui/styles/includes';
.header {
display: flex;
align-items: flex-end;
cursor: pointer;
- margin: $space-xxl 0 $space-xxxl 0;
+ margin: $sp-6 0 $sp-7 0;
.header-content {
flex: 1;
@@ -18,8 +19,8 @@
.link {
color: $link-blue-dark;
cursor: pointer;
- margin-left: $space-md;
- margin-top: $space-xs;
+ margin-left: $sp-3;
+ margin-top: $sp-1;
text-transform: none;
&:hover {
@@ -41,14 +42,14 @@
}
.detail {
- margin-bottom: $space-xxl;
+ margin-bottom: $sp-6;
white-space: pre-wrap;
@include font-black-100;
.title {
@include font-barlow;
display: flex;
- padding-bottom: $space-sm;
+ padding-bottom: $sp-2;
}
.content {
diff --git a/src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.tsx b/src/apps/self-service/src/components/work-details/details/details-pane/WorkDetailDetailsPane.tsx
similarity index 97%
rename from src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.tsx
rename to src/apps/self-service/src/components/work-details/details/details-pane/WorkDetailDetailsPane.tsx
index fd4bfeae6..423a155d9 100644
--- a/src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.tsx
+++ b/src/apps/self-service/src/components/work-details/details/details-pane/WorkDetailDetailsPane.tsx
@@ -4,12 +4,13 @@ import { Link } from 'react-router-dom'
import _ from 'lodash'
import cn from 'classnames'
-import { ArrowIcon, LoadingSpinner } from '../../../../lib'
+import { ArrowIcon, LoadingSpinner } from '~/libs/ui'
+
import {
ChallengeMetadataName,
workFactoryMapFormData,
workGetSelectedPackageFormatted,
-} from '../../work-lib'
+} from '../../../../lib'
import styles from './WorkDetailDetailsPane.module.scss'
@@ -116,7 +117,7 @@ function formatOption(detail: Array
+ {workType !== WorkType.designLegacy
+ &&
+
+
+)
+
+export default WorkServicePrice
diff --git a/src-ts/tools/work/work-service-price/index.tsx b/src/apps/self-service/src/components/work-service-price/index.tsx
similarity index 100%
rename from src-ts/tools/work/work-service-price/index.tsx
rename to src/apps/self-service/src/components/work-service-price/index.tsx
diff --git a/src-ts/tools/work/work-lib/work-status-item/WorkStatusItem.module.scss b/src/apps/self-service/src/components/work-status-item/WorkStatusItem.module.scss
similarity index 90%
rename from src-ts/tools/work/work-lib/work-status-item/WorkStatusItem.module.scss
rename to src/apps/self-service/src/components/work-status-item/WorkStatusItem.module.scss
index 6802ffdff..bc3e9ea28 100644
--- a/src-ts/tools/work/work-lib/work-status-item/WorkStatusItem.module.scss
+++ b/src/apps/self-service/src/components/work-status-item/WorkStatusItem.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../lib/styles/variables';
+@import '@libs/ui/styles/variables';
.status-container {
display: flex;
@@ -20,7 +20,7 @@
display: inline-block;
width: 10px;
height: 10px;
- margin-right: $space-xs;
+ margin-right: $sp-1;
border-radius: 50px;
border: 2px solid transparent;
}
diff --git a/src-ts/tools/work/work-lib/work-status-item/WorkStatusItem.tsx b/src/apps/self-service/src/components/work-status-item/WorkStatusItem.tsx
similarity index 93%
rename from src-ts/tools/work/work-lib/work-status-item/WorkStatusItem.tsx
rename to src/apps/self-service/src/components/work-status-item/WorkStatusItem.tsx
index b34653b72..064fa3b0f 100644
--- a/src-ts/tools/work/work-lib/work-status-item/WorkStatusItem.tsx
+++ b/src/apps/self-service/src/components/work-status-item/WorkStatusItem.tsx
@@ -1,4 +1,4 @@
-import { WorkStatus } from '../work-provider'
+import { WorkStatus } from '../../lib/work-provider'
import styles from './WorkStatusItem.module.scss'
diff --git a/src-ts/tools/work/work-lib/work-status-item/index.ts b/src/apps/self-service/src/components/work-status-item/index.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-status-item/index.ts
rename to src/apps/self-service/src/components/work-status-item/index.ts
diff --git a/src-ts/tools/work/work-table/work-badge-renderer/WorkBadgeRenderer.module.scss b/src/apps/self-service/src/components/work-table/badge-renderer/WorkBadgeRenderer.module.scss
similarity index 82%
rename from src-ts/tools/work/work-table/work-badge-renderer/WorkBadgeRenderer.module.scss
rename to src/apps/self-service/src/components/work-table/badge-renderer/WorkBadgeRenderer.module.scss
index 6c10a15af..746bac6e6 100644
--- a/src-ts/tools/work/work-table/work-badge-renderer/WorkBadgeRenderer.module.scss
+++ b/src/apps/self-service/src/components/work-table/badge-renderer/WorkBadgeRenderer.module.scss
@@ -1,5 +1,5 @@
-@use '../../../../lib/styles/typography';
-@import '../../../../lib/styles/includes';
+@use '@libs/ui/styles/typography';
+@import '@libs/ui/styles/includes';
.badge-container {
display: flex;
@@ -9,7 +9,7 @@
@extend .medium-subtitle;
display: inline-flex;
padding: 0 $border;
- border-radius: $space-sm;
+ border-radius: $sp-2;
color: $tc-white;
min-width: 24px;
text-align: center;
diff --git a/src-ts/tools/work/work-table/work-badge-renderer/WorkBadgeRenderer.tsx b/src/apps/self-service/src/components/work-table/badge-renderer/WorkBadgeRenderer.tsx
similarity index 100%
rename from src-ts/tools/work/work-table/work-badge-renderer/WorkBadgeRenderer.tsx
rename to src/apps/self-service/src/components/work-table/badge-renderer/WorkBadgeRenderer.tsx
diff --git a/src-ts/tools/work/work-table/work-badge-renderer/index.ts b/src/apps/self-service/src/components/work-table/badge-renderer/index.ts
similarity index 100%
rename from src-ts/tools/work/work-table/work-badge-renderer/index.ts
rename to src/apps/self-service/src/components/work-table/badge-renderer/index.ts
diff --git a/src/apps/self-service/src/components/work-table/delete-button-renderer/WorkDeleteButtonRenderer.tsx b/src/apps/self-service/src/components/work-table/delete-button-renderer/WorkDeleteButtonRenderer.tsx
new file mode 100644
index 000000000..126b4be5f
--- /dev/null
+++ b/src/apps/self-service/src/components/work-table/delete-button-renderer/WorkDeleteButtonRenderer.tsx
@@ -0,0 +1,66 @@
+import { toast } from 'react-toastify'
+import { Dispatch, SetStateAction, useContext, useState } from 'react'
+
+import {
+ Button,
+ ConfirmModal,
+ IconOutline,
+ Tooltip,
+} from '~/libs/ui'
+
+import {
+ Work,
+ workContext,
+ WorkContextData,
+ workDeleteAsync,
+ WorkStatus,
+} from '../../../lib'
+
+const WorkDeleteButtonRenderer: (work: Work) => JSX.Element | undefined
+ = (work: Work): JSX.Element | undefined => {
+
+ const workContextData: WorkContextData = useContext(workContext)
+ const [confirmationOpen, setConfirmationOpen]: [boolean, Dispatch
+ {!!props.showIcon && !!props.icon && (
+
+
+
+
+ {!props.hideTitle && (
+
+
+
+ +
+ {props.serviceType} +
+ + )} +
+
+ {props.stickerPrice && (
+
+ {textFormatMoneyLocaleString(props.stickerPrice)}
+
+ )}
+ {textFormatMoneyLocaleString(props.price)}
+ |
+
+ {props.duration}
+ Days
+
+
+
+ The price and project length is dynamic and dependent on the
+ variables selected as you define your work.
+
+
+
+
+ +
+
+ You will receive up to five unique visual designs for the main page
+ of your website, in an industry-standard format. Visual designs are
+ the first step in creating a functional website. Topcoder can help
+ you with launching your website once you have approved your design.
+
+
+
+
+ ),
+ aboutBannerTitle: "ABOUT WEBSITE DESIGN",
+ aboutBannerContent: (
+ <>
+ + Topcoder design experts will take all of the information you provide + below, and create visual designs for your website that fit your + industry and match your desired look & feel. We've done this for + hundreds of customers and will work with you to create your ideal + design. +
+ + ), + breadcrumbs: { + basic: [ + { url: ROUTES.DASHBOARD_PAGE, name: "My work" }, + { url: ROUTES.INTAKE_FORM, name: "Start work" }, + { url: "#", name: "Website Design" }, + ], + review: [ + { url: ROUTES.DASHBOARD_PAGE, name: "My work" }, + { url: ROUTES.INTAKE_FORM, name: "Start work" }, + { url: ROUTES.WEBSITE_DESIGN, name: "Website design" }, + { url: "#", name: "Review & Payment" }, + ], + }, + }, + { + type: WorkType.data, + title: "Data Exploration", + subTitle: "Get insights about your data from Topcoder experts.", + shortDescription: "Uncover What's Interesting About Your Data", + description: + "We accumulate data every day in the course of life and business, yet rarely have the time to give it a closer look. Get multiple fresh, expert perspectives to identify the patterns and relationships in your data. They might just be the key to your next 'Aha' moment.", + price: workPriceData.getPrice(workPriceData), + stickerPrice: workPriceData.packages?.base?.price, + duration: `${dataExplorationConfigs.DEFAULT_DURATION} Days`, + featured: true, + startRoute: `${selfServiceRootRoute}/new/data-exploration/basic-info`, + basePath: "data-exploration", + bgImage: imgProductDataExploration, + helperBannerTitle: "WHAT WILL I GET?", + helperBannerContent: ( + <> ++ Topcoder data experts will create a custom report for you with: +
+ In Data Exploration, multiple data science experts uncover the most + significant patterns and relationships in your data. Unlock the full + potential of your data with expert insights presented in an + easy-to-understand format. +
+ ), + breadcrumbs: { + basic: [ + { url: ROUTES.DASHBOARD_PAGE, name: "My work" }, + { url: ROUTES.INTAKE_FORM, name: "Start work" }, + { url: "#", name: "Data exploration" }, + ], + review: [ + { url: ROUTES.DASHBOARD_PAGE, name: "My work" }, + { url: ROUTES.INTAKE_FORM, name: "Start work" }, + { url: ROUTES.DATA_EXPLORATION, name: "Data exploration" }, + { url: "#", name: "Review & Payment" }, + ], + }, + }, + { + type: WorkType.problem, + title: "Problem Statement & Data Advisory", + subTitle: + "Translate your data science idea into an actionable data science approach.", + shortDescription: "The easiest way to get started in data science", + description: + "Problem Statement & Data Advisory is for those asking themselves: How can I apply data science to this idea or goal? How will I interpret solutions, and how will that help me take action? What data do I need?", + price: workPriceProblem.getPrice(workPriceProblem), + stickerPrice: workPriceProblem.packages?.base?.price, + duration: `${dataAdvisoryConfigs.DEFAULT_DURATION} Days`, + featured: true, + startRoute: `${selfServiceRootRoute}/new/data-advisory/basic-info`, + basePath: "data-advisory", + helperBannerTitle: "WHAT WILL I RECEIVE?", + bgImage: imgProductProblemStatement, + helperBannerContent: ( + <> ++
+ Problem Statement & Data Advisory is for those asking themselves: + How can I apply data science to this idea or goal? How will I interpret + solutions, and how will that help me take action? What data do I need? +
+ ), + breadcrumbs: { + basic: [ + { url: ROUTES.DASHBOARD_PAGE, name: "My work" }, + { url: ROUTES.INTAKE_FORM, name: "Start work" }, + { url: "#", name: "Problem statement & data advisory" }, + ], + review: [ + { url: ROUTES.DASHBOARD_PAGE, name: "My work" }, + { url: ROUTES.INTAKE_FORM, name: "Start work" }, + { + url: ROUTES.PROBLEM_STATEMENT, + name: "Problem statement & data advisory", + }, + { url: "#", name: "Review & Payment" }, + ], + }, + }, + { + type: WorkType.findData, + title: "Find Me Data", + subTitle: "Get the data you need to meet your analysis goals.", + shortDescription: "Our Experts Source Useful Data Sets For You", + description: + "Sometimes data is the only thing standing between you and something great. Tell us what you're solving for, and let our experts find the data to get you started now.", + price: workPriceFindData.getPrice(workPriceFindData), + stickerPrice: workPriceFindData.packages?.base?.price, + duration: `${findMeDataConfigs.DEFAULT_DURATION} Days`, + featured: true, + startRoute: `${selfServiceRootRoute}/new/find-me-data/basic-info`, + basePath: "find-me-data", + bgImage: imgProductFindMeData, + helperBannerTitle: "WHAT WILL I RECEIVE?", + helperBannerContent: ( + <> ++
+ Find Me Data is designed for business leaders, researchers or any + individual who has a data question and is struggling to find the data + to answer it. +
++
Use Find Me Data if you:
+
+
+
+ );
+};
+
+Forum.propTypes = {
+ challengeId: PT.string,
+};
+
+export default Forum;
diff --git a/src/apps/self-service/src/containers/forum/index.js b/src/apps/self-service/src/containers/forum/index.js
new file mode 100644
index 000000000..89bf7249a
--- /dev/null
+++ b/src/apps/self-service/src/containers/forum/index.js
@@ -0,0 +1 @@
+export { default as Forum } from './Forum';
diff --git a/src/routes/Forum/styles.module.scss b/src/apps/self-service/src/containers/forum/styles.module.scss
similarity index 100%
rename from src/routes/Forum/styles.module.scss
rename to src/apps/self-service/src/containers/forum/styles.module.scss
diff --git a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHunt.module.scss b/src/apps/self-service/src/containers/intake-forms/bug-hunt/BugHunt.module.scss
similarity index 78%
rename from src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHunt.module.scss
rename to src/apps/self-service/src/containers/intake-forms/bug-hunt/BugHunt.module.scss
index 14677dce2..57db6d99e 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHunt.module.scss
+++ b/src/apps/self-service/src/containers/intake-forms/bug-hunt/BugHunt.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../../lib/styles/includes';
+@import '@libs/ui/styles/includes';
.bug-hunt-wrapper {
padding: 0 32px 32px 32px;
diff --git a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHuntIntakeForm.tsx b/src/apps/self-service/src/containers/intake-forms/bug-hunt/BugHuntIntakeForm.tsx
similarity index 95%
rename from src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHuntIntakeForm.tsx
rename to src/apps/self-service/src/containers/intake-forms/bug-hunt/BugHuntIntakeForm.tsx
index 9f931134b..741860bda 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHuntIntakeForm.tsx
+++ b/src/apps/self-service/src/containers/intake-forms/bug-hunt/BugHuntIntakeForm.tsx
@@ -9,14 +9,13 @@ import {
formGetInputModel,
FormInputModel,
IconOutline,
- InfoCard,
LoadingSpinner,
PageDivider,
- profileContext,
- ProfileContextData,
SaveForLaterIcon,
- useCheckIsMobile,
-} from '../../../../../lib'
+} from '~/libs/ui'
+import { useCheckIsMobile } from '~/libs/shared'
+import { profileContext, ProfileContextData } from '~/libs/core'
+
import {
Challenge,
ChallengeMetadata,
@@ -28,11 +27,12 @@ import {
WorkIntakeFormRoutes,
WorkType,
workUpdateAsync,
-} from '../../../work-lib'
-import { WorkServicePrice } from '../../../work-service-price'
-import { WorkTypeBanner } from '../../../work-type-banner'
-import { dashboardRoute, selfServiceStartRoute } from '../../../work.routes'
+} from '../../../lib'
+import { WorkServicePrice } from '../../../components/work-service-price'
+import { WorkTypeBanner } from '../../../components/work-type-banner'
import { IntakeFormsBreadcrumb } from '../intake-forms-breadcrumb'
+import { InfoCard } from '../../../components/info-card'
+import { selfServiceStartRoute, workDashboardRoute } from '../../../config'
import { BugHuntFormConfig } from './bug-hunt.form.config'
import { DeliverablesInfoCard } from './deliverables-info-card'
@@ -135,7 +135,7 @@ const BugHuntIntakeForm: React.FC = () => {
const handleSaveSuccess: () => void = () => {
if (action === 'save') {
- navigate(`${dashboardRoute}/draft`)
+ navigate(`${workDashboardRoute}/draft`)
} else if (action === 'submit') {
const nextUrl: string = `${WorkIntakeFormRoutes[WorkType.bugHunt].review}/${workId || challenge?.id}`
navigate(nextUrl)
@@ -240,7 +240,7 @@ const BugHuntIntakeForm: React.FC = () => {
return (
<>
-
- {
)
diff --git a/src-ts/tools/work/work-self-service/intake-forms/review/index.tsx b/src/apps/self-service/src/containers/intake-forms/review/index.tsx
similarity index 100%
rename from src-ts/tools/work/work-self-service/intake-forms/review/index.tsx
rename to src/apps/self-service/src/containers/intake-forms/review/index.tsx
diff --git a/src-ts/tools/work/work-self-service/intake-forms/save-after-login/SaveAfterLogin.tsx b/src/apps/self-service/src/containers/intake-forms/save-after-login/SaveAfterLogin.tsx
similarity index 91%
rename from src-ts/tools/work/work-self-service/intake-forms/save-after-login/SaveAfterLogin.tsx
rename to src/apps/self-service/src/containers/intake-forms/save-after-login/SaveAfterLogin.tsx
index 7d4329b21..30b7f40d6 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/save-after-login/SaveAfterLogin.tsx
+++ b/src/apps/self-service/src/containers/intake-forms/save-after-login/SaveAfterLogin.tsx
@@ -1,9 +1,11 @@
import { FC, useEffect } from 'react'
import { NavigateFunction, useNavigate } from 'react-router-dom'
-import { GenericDataObject, LoadingSpinner } from '../../../../../lib'
-import { Challenge, workCreateAsync, WorkIntakeFormRoutes, WorkType, workUpdateAsync } from '../../../work-lib'
-import { selfServiceStartRoute } from '../../../work.routes'
+import { LoadingSpinner } from '~/libs/ui'
+import { GenericDataObject } from '~/libs/shared'
+
+import { Challenge, workCreateAsync, WorkIntakeFormRoutes, WorkType, workUpdateAsync } from '../../../lib'
+import { selfServiceStartRoute } from '../../../config'
/**
* This component is the intermediate step for when a user logs in mid work creation.
diff --git a/src/apps/self-service/src/containers/intake-forms/save-after-login/index.ts b/src/apps/self-service/src/containers/intake-forms/save-after-login/index.ts
new file mode 100644
index 000000000..07a87525c
--- /dev/null
+++ b/src/apps/self-service/src/containers/intake-forms/save-after-login/index.ts
@@ -0,0 +1 @@
+export { default as SaveAfterLogin } from './SaveAfterLogin'
diff --git a/src/apps/self-service/src/containers/intake-forms/support-info-card/SupportInfoCard.module.scss b/src/apps/self-service/src/containers/intake-forms/support-info-card/SupportInfoCard.module.scss
new file mode 100644
index 000000000..2a1e3f8ad
--- /dev/null
+++ b/src/apps/self-service/src/containers/intake-forms/support-info-card/SupportInfoCard.module.scss
@@ -0,0 +1,5 @@
+@import '@libs/ui/styles/includes';
+
+.supportButton {
+ padding-top: $sp-4;
+}
\ No newline at end of file
diff --git a/src-ts/tools/work/work-self-service/intake-forms/support-info-card/SupportInfoCard.tsx b/src/apps/self-service/src/containers/intake-forms/support-info-card/SupportInfoCard.tsx
similarity index 87%
rename from src-ts/tools/work/work-self-service/intake-forms/support-info-card/SupportInfoCard.tsx
rename to src/apps/self-service/src/containers/intake-forms/support-info-card/SupportInfoCard.tsx
index 678c02a89..187ad2b96 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/support-info-card/SupportInfoCard.tsx
+++ b/src/apps/self-service/src/containers/intake-forms/support-info-card/SupportInfoCard.tsx
@@ -1,6 +1,9 @@
import React, { Dispatch, SetStateAction, useState } from 'react'
-import { Button, ContactSupportModal, InfoCard, useCheckIsMobile } from '../../../../../lib'
+import { Button } from '~/libs/ui'
+import { ContactSupportModal, useCheckIsMobile } from '~/libs/shared'
+
+import { InfoCard } from '../../../components/info-card'
import styles from './SupportInfoCard.module.scss'
@@ -35,6 +38,8 @@ const SupportInfoCard: React.FC = () => {
diff --git a/src-ts/tools/work/work-self-service/intake-forms/support-info-card/index.tsx b/src/apps/self-service/src/containers/intake-forms/support-info-card/index.tsx
similarity index 100%
rename from src-ts/tools/work/work-self-service/intake-forms/support-info-card/index.tsx
rename to src/apps/self-service/src/containers/intake-forms/support-info-card/index.tsx
diff --git a/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/components/BasicInfoFormLegacy/index.jsx b/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/components/BasicInfoFormLegacy/index.jsx
new file mode 100644
index 000000000..5429294e5
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/components/BasicInfoFormLegacy/index.jsx
@@ -0,0 +1,134 @@
+import PT from "prop-types";
+import _ from "lodash";
+
+import { PageDivider } from "~/libs/ui";
+/**
+ * Basic Info Form component
+ */
+import { HELP_BANNER } from "../../../../../config";
+import DeviceTypes from "../DeviceTypes";
+import { WorkServicePrice } from "../../../../../components/work-service-price";
+import { PageP, PageRow } from "../../../../../components/page-elements";
+import { FormField, FormInputText } from "../../../../../components/form-elements";
+import { RadioButton } from "../../../../../components/radio-button";
+import { HelpBanner } from "../../../../../components/banners";
+
+import styles from "./styles.module.scss";
+
+const BasicInfoFormLegacy = ({
+ formData,
+ serviceType,
+ onFormUpdate,
+ onShowSupportModal,
+ numOfPages,
+ updateNumOfPages,
+ estimate,
+ pageListOptions,
+}) => {
+ const handleInputChange = (name, value, option = "") => {
+ onFormUpdate({ ...formData, [name]: { ...formData[name], option, value } });
+ };
+
+ return (
+
+ ({
+ ...o,
+ value: i === (pageDetails?.pages?.length || 0) - 1,
+ label: `${o.label} (${currencyFormat(
+ getDynamicPriceAndTimeline(
+ i + 1,
+ formData?.selectedDevice?.value?.length || 0
+ ).total
+ )})`,
+ }))}
+ estimate={estimate}
+ formData={formData}
+ serviceType={workType?.selectedWorkTypeDetail}
+ onFormUpdate={setFormData}
+ numOfPages={pageDetails?.pages?.length || 0}
+ updateNumOfPages={updateNumOfPages}
+ onShowSupportModal={onShowSupportModal}
+ />
+
+
+
+
+
+ );
+};
+
+const mapStateToProps = ({ form }) => form;
+
+const mapDispatchToProps = {
+ saveBasicInfo,
+ setProgressItem,
+ savePageDetails,
+ toggleSupportModal,
+ saveWorkType,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(BasicInfoLegacy);
diff --git a/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/styles.module.scss b/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/styles.module.scss
new file mode 100644
index 000000000..a15298add
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/styles.module.scss
@@ -0,0 +1,19 @@
+@import "../../../styles/include";
+
+.footerContent {
+ display: flex;
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-between;
+
+ .footer-right {
+ display: flex;
+ gap: 16px;
+ }
+}
+
+.title-wrapper {
+ @include mobile {
+ display: none;
+ }
+}
diff --git a/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/BrandingForm/index.jsx b/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/BrandingForm/index.jsx
new file mode 100644
index 000000000..96727db0f
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/BrandingForm/index.jsx
@@ -0,0 +1,491 @@
+import _ from "lodash";
+import PT from "prop-types";
+import { useEffect, useState } from "react";
+
+import { BaseModal, Button, PageDivider } from "~/libs/ui";
+
+/**
+ * Tab element
+ */
+import { ColorOptions, FormField, FormInputText, FormInputTextArea } from "../../../../../components/form-elements";
+import { PageP, PageRow } from "../../../../../components/page-elements";
+import { WorkServicePrice } from "../../../../../components/work-service-price";
+import { RadioButton } from "../../../../../components/radio-button";
+import {
+ ColorOptionsItems,
+ DeliverablesOptions,
+ AllowStockOptions,
+} from "../../../../../config";
+import FontOptions from "../FontOptions";
+import PolicyContent from "../PolicyContent";
+
+import styles from "./styles.module.scss";
+
+const BrandingForm = ({
+ serviceType,
+ setFormData,
+ formData,
+ saveBranding,
+ estimate,
+}) => {
+ const [selectedColor, setSelectedColor] = useState(0);
+ const [selectedFont, setSelectedFont] = useState(0);
+ const [isPolicyModalOpen, setIsPolicyModalOpen] = useState(false);
+ const [deliverableOptions, setDeliverableOptions] =
+ useState(DeliverablesOptions);
+ const [allowStockOption, setAllowStockOption] = useState(AllowStockOptions);
+
+ const handleInputChange = (name, value, option = null) => {
+ setFormData((formData) => {
+ const newFormData = {
+ ...formData,
+ [name]: { ...formData[name], option: option ? option : value, value },
+ };
+ saveBranding(newFormData);
+ return newFormData;
+ });
+ };
+
+ const handleArrayInputChange = (index, name, key, value, option = null) => {
+ setFormData((formData) => {
+ const newFormData = {
+ ...formData,
+ };
+
+ if (!newFormData[name]) {
+ newFormData[name] = [
+ {
+ website: { name, value, option: option ? option : value },
+ feedback: { name, value, option: option ? option : value },
+ },
+ ];
+ }
+
+ newFormData[name][index][key] = {
+ name,
+ value,
+ option: option ? option : value,
+ };
+
+ saveBranding(newFormData);
+ return newFormData;
+ });
+ };
+
+ const addWebsite = () => {
+ setFormData((formData) => {
+ const newFormData = {
+ ...formData,
+ inspiration: [
+ ...(formData.inspiration || []),
+ {
+ website: { name: "Website", value: "", option: "" },
+ feedback: { name: "Feedback", value: "", option: "" },
+ },
+ ],
+ };
+
+ saveBranding(newFormData);
+ return newFormData;
+ });
+ };
+
+ const removeWebsite = (index) => {
+ setFormData((formData) => {
+ const newFormData = {
+ ...formData,
+ };
+ newFormData.inspiration.splice(index, 1);
+
+ saveBranding(newFormData);
+ return newFormData;
+ });
+ };
+
+ useEffect(() => {
+ if (formData.colorOption) {
+ setSelectedColor(formData?.colorOption);
+ }
+ }, [formData.colorOption]);
+
+ useEffect(() => {
+ if (formData.fontOption) {
+ setSelectedFont(formData.fontOption?.value);
+ }
+ }, [formData.fontOption]);
+
+ useEffect(() => {
+ const itemSelected = formData?.selectedDeliverableOption;
+ if (itemSelected?.option && deliverableOptions[0]) {
+ const newDeliverableOptions = deliverableOptions.map((o) => {
+ o.value = o.label === itemSelected.option;
+ return o;
+ });
+ setDeliverableOptions(newDeliverableOptions);
+ }
+
+ const optionSelected = formData?.allowStockOption;
+ if (optionSelected?.option && allowStockOption[0]) {
+ const newAllowStockPhoto = allowStockOption.map((o) => {
+ o.value = o.label === optionSelected.option;
+ return o;
+ });
+ setAllowStockOption(newAllowStockPhoto);
+ }
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [formData.selectedDeliverableOption, formData.allowStockOption]);
+ return (
+
+
+
+
+
+ );
+};
+
+const mapStateToProps = ({ form }) => form;
+
+const mapDispatchToProps = {
+ saveBranding,
+ setProgressItem,
+};
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(BrandingLegacy);
diff --git a/src/apps/self-service/src/containers/legacy/BrandingLegacy/styles.module.scss b/src/apps/self-service/src/containers/legacy/BrandingLegacy/styles.module.scss
new file mode 100644
index 000000000..a15298add
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/BrandingLegacy/styles.module.scss
@@ -0,0 +1,19 @@
+@import "../../../styles/include";
+
+.footerContent {
+ display: flex;
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-between;
+
+ .footer-right {
+ display: flex;
+ gap: 16px;
+ }
+}
+
+.title-wrapper {
+ @include mobile {
+ display: none;
+ }
+}
diff --git a/src/apps/self-service/src/containers/legacy/PageDetailsLegacy/components/PageDetailsForm/index.jsx b/src/apps/self-service/src/containers/legacy/PageDetailsLegacy/components/PageDetailsForm/index.jsx
new file mode 100644
index 000000000..d2b19450b
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/PageDetailsLegacy/components/PageDetailsForm/index.jsx
@@ -0,0 +1,235 @@
+import PT from "prop-types";
+/**
+ * Page Details Form component
+ */
+import { PageDivider } from "~/libs/ui";
+
+import { WorkServicePrice } from "../../../../../components/work-service-price";
+import { PageH3, PageListInput, PageP, PageRow } from "../../../../../components/page-elements";
+import { HelpBanner } from "../../../../../components/banners";
+import { FormField, FormInputText, FormInputTextArea } from "../../../../../components/form-elements";
+
+import styles from "./styles.module.scss";
+
+const PageDetailsForm = ({
+ savePageDetails,
+ listInputs,
+ setListInputs,
+ serviceType,
+ estimate,
+}) => {
+ // get an empty page item
+ const emptyPage = () => ({
+ pageName: "",
+ pageDetails: "",
+ });
+
+ // handle list input changes
+ const handleListInputChange = (listInputName, index, inputName, value) => {
+ setListInputs((listInputs) => {
+ let listInput = listInputs[listInputName];
+ let newListInput = listInput.map((item, i) => {
+ if (i !== index) return item;
+ else return { ...item, [inputName]: value };
+ });
+ const listInputUpdated = { ...listInputs, [listInputName]: newListInput };
+ savePageDetails(listInputUpdated);
+ return listInputUpdated;
+ });
+ };
+
+ // add an item to a list input
+ const addListInputItem = (listInputName) => {
+ setListInputs((listInputs) => {
+ let listInput = listInputs[listInputName];
+ let newListInput = [...listInput, emptyPage()];
+ const listInputUpdated = { ...listInputs, [listInputName]: newListInput };
+ savePageDetails(listInputUpdated);
+ return listInputUpdated;
+ });
+ };
+
+ // remove an item from list input
+ const removeListInputItem = (listInputName, index) => {
+ if (!window.confirm("Are you sure you want to delete this item?")) return;
+ setListInputs((listInputs) => {
+ let listInput = listInputs[listInputName];
+ let newListInput = listInput.filter((item, i) => {
+ return i !== index;
+ });
+ const listInputUpdated = { ...listInputs, [listInputName]: newListInput };
+ savePageDetails(listInputUpdated);
+ return listInputUpdated;
+ });
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+const mapStateToProps = ({ form }) => form;
+
+const mapDispatchToProps = {
+ savePageDetails,
+ setProgressItem,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PageDetailsLegacy);
diff --git a/src/apps/self-service/src/containers/legacy/PageDetailsLegacy/styles.module.scss b/src/apps/self-service/src/containers/legacy/PageDetailsLegacy/styles.module.scss
new file mode 100644
index 000000000..a15298add
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/PageDetailsLegacy/styles.module.scss
@@ -0,0 +1,19 @@
+@import "../../../styles/include";
+
+.footerContent {
+ display: flex;
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-between;
+
+ .footer-right {
+ display: flex;
+ gap: 16px;
+ }
+}
+
+.title-wrapper {
+ @include mobile {
+ display: none;
+ }
+}
diff --git a/src/apps/self-service/src/containers/legacy/ReviewLegacy/components/ReviewTableLegacy/index.jsx b/src/apps/self-service/src/containers/legacy/ReviewLegacy/components/ReviewTableLegacy/index.jsx
new file mode 100644
index 000000000..620417933
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/ReviewLegacy/components/ReviewTableLegacy/index.jsx
@@ -0,0 +1,164 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import _ from "lodash";
+import classNames from "classnames";
+
+import { PageDivider } from "~/libs/ui";
+
+import { ReactComponent as ArrowIcon } from "../../../../../assets/images/icon-arrow.svg";
+import { PROGRESS_LEVELS } from "../../../../../config/constants/products/website-design-legacy";
+
+import styles from "./styles.module.scss";
+
+/**
+ * Review Table Component
+ */
+const ReviewTableLegacy = ({ formData, enableEdit = true }) => {
+ const [steps, setSteps] = useState([
+ { id: 0, label: "Basic Info", value: "basicInfo", isOpen: true },
+ { id: 1, label: "Website Purpose", value: "websitePurpose", isOpen: true },
+ { id: 2, label: "Page Details", value: "pageDetails", isOpen: true },
+ { id: 3, label: "Branding", value: "branding", isOpen: true },
+ ]);
+
+ const setStepToggler = (id) => {
+ const newSteps = steps.map((item) =>
+ item.id === id ? { ...item, isOpen: !item.isOpen } : item
+ );
+
+ setSteps(newSteps);
+ };
+
+ const formatOption = (option) => {
+ if (_.isArray(option)) return option.join(", ");
+ if (_.isObject(option)) {
+ return formatOption(_.get(option, "option", option));
+ }
+ return option;
+ };
+
+ const renderOption = (option, title) => {
+ return (
+ setIsOrderContractModalOpen(false)}
+ />
+
+
+
+
+
+ );
+};
+
+const ReviewWrapper = (props) => {
+ if (!stripePromise) {
+ stripePromise = loadStripe(EnvironmentConfig.STRIPE.API_KEY, {
+ apiVersion: EnvironmentConfig.STRIPE.API_VERSION,
+ });
+ }
+
+ return (
+
+
+ );
+};
+
+const mapStateToProps = ({ form }) => form;
+
+const mapDispatchToProps = {
+ setProgressItem,
+};
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(ReviewWrapper);
diff --git a/src/apps/self-service/src/containers/legacy/ReviewLegacy/styles.module.scss b/src/apps/self-service/src/containers/legacy/ReviewLegacy/styles.module.scss
new file mode 100644
index 000000000..15b36a02f
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/ReviewLegacy/styles.module.scss
@@ -0,0 +1,147 @@
+@import "../../../styles/include";
+
+.footerContent {
+ display: flex;
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-between;
+
+ .footer-right {
+ display: flex;
+ gap: 16px;
+ }
+}
+
+.container {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+
+ .splitView {
+ display: grid;
+ grid-template-columns: 1fr 562px;
+ column-gap: 24px;
+
+ @include mobile {
+ grid-template-columns: 1fr;
+ }
+
+ .reviewContainer {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ }
+ }
+
+ .paymentWrapper {
+
+ .infoBox {
+ display: flex;
+ flex-direction: column;
+ row-gap: 24px;
+ font-size: 16px;
+ line-height: 26px;
+
+ .confirmationBox {
+ @include confirmationBox;
+ }
+
+ .title {
+ text-transform: uppercase;
+ font-size: 20px;
+ }
+
+ .importantInfo {
+ font-size: 16px;
+ }
+ }
+
+ .paymentBox {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border: 1px solid $gray-10;
+ border-radius: 8px;
+ margin-top: 18px;
+ padding: 24px;
+ row-gap: 8px;
+
+ .total {
+ @include font-barlow-condensed;
+ color: $aqua;
+ font-size: 48px;
+ position: relative;
+
+ .originalPrice {
+ position: absolute;
+ bottom: 0;
+ left: -55px;
+ text-decoration: line-through;
+ font-size: 24px;
+ }
+ }
+
+ .totalInfo {
+ text-transform: uppercase;
+ font-size: 12px;
+ font-weight: 700;
+ }
+
+ .pageDivider {
+ margin-top: -10px;
+ }
+
+ .paymentButtonContainer {
+ width: 100%;
+ }
+ }
+ }
+}
+
+.backButtonWrapper {
+ @include backButtonWrapper;
+}
+
+.confirmationBox {
+ margin-top: 32px;
+ @include confirmationBox;
+}
+
+.infoAlert {
+ @include font-barlow;
+ display: flex;
+ padding: 16px;
+ background: #E0FAF3;
+ border-radius: 8px;
+ margin: 16px 0;
+ font-size: 16px;
+ line-height: 26px;
+}
+
+.inline {
+ display: inline-block;
+}
+
+.error {
+ font-size: 14px;
+ color: $red-120;
+}
+
+.hideMobile {
+ @include mobile {
+ display: none;
+ }
+}
+
+.showOnlyMobile {
+ display: none;
+
+ @include mobile {
+ display: block;
+ }
+}
+
+.title-wrapper {
+ @include mobile {
+ display: none;
+ }
+}
diff --git a/src/apps/self-service/src/containers/legacy/WebsitePurposeLegacy/components/WebsitePurposeForm/index.jsx b/src/apps/self-service/src/containers/legacy/WebsitePurposeLegacy/components/WebsitePurposeForm/index.jsx
new file mode 100644
index 000000000..6f714e333
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/WebsitePurposeLegacy/components/WebsitePurposeForm/index.jsx
@@ -0,0 +1,175 @@
+import PT from "prop-types";
+/**
+ * Tab element
+ */
+import { PageDivider } from "~/libs/ui";
+
+import { IndustryList } from "../../../../../config";
+import { WorkServicePrice } from "../../../../../components/work-service-price";
+import { PageP, PageRow } from "../../../../../components/page-elements";
+import { ReactSelect } from "../../../../../components/react-select";
+import { FormField, FormInputText, FormInputTextArea } from "../../../../../components/form-elements";
+
+import styles from "./styles.module.scss";
+
+const WebsitePurposeForm = ({
+ formData,
+ setFormData,
+ serviceType,
+ saveWebsitePurpose,
+ estimate,
+}) => {
+ const handleInputChange = (name, value, option = null) => {
+ setFormData((formData) => {
+ const newFormData = {
+ ...formData,
+ [name]: { ...formData[name], option: option ? option : value, value },
+ };
+ saveWebsitePurpose(newFormData);
+ return newFormData;
+ });
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+const mapStateToProps = ({ form }) => form;
+
+const mapDispatchToProps = {
+ saveWebsitePurpose,
+ setProgressItem,
+};
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(WebsitePurposeLegacy);
diff --git a/src/apps/self-service/src/containers/legacy/WebsitePurposeLegacy/styles.module.scss b/src/apps/self-service/src/containers/legacy/WebsitePurposeLegacy/styles.module.scss
new file mode 100644
index 000000000..a15298add
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/WebsitePurposeLegacy/styles.module.scss
@@ -0,0 +1,19 @@
+@import "../../../styles/include";
+
+.footerContent {
+ display: flex;
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-between;
+
+ .footer-right {
+ display: flex;
+ gap: 16px;
+ }
+}
+
+.title-wrapper {
+ @include mobile {
+ display: none;
+ }
+}
diff --git a/src/apps/self-service/src/containers/legacy/index.js b/src/apps/self-service/src/containers/legacy/index.js
new file mode 100644
index 000000000..a1225f81e
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/index.js
@@ -0,0 +1,5 @@
+export { default as BasicInfo } from './BasicInfoLegacy';
+export { default as Branding } from './BrandingLegacy';
+export { default as PageDetails } from './PageDetailsLegacy';
+export { default as Review } from './ReviewLegacy';
+export { default as WebsitePurpose } from './WebsitePurposeLegacy';
diff --git a/src/apps/self-service/src/containers/products/basic-info/BasicInfo.jsx b/src/apps/self-service/src/containers/products/basic-info/BasicInfo.jsx
new file mode 100644
index 000000000..027079bbf
--- /dev/null
+++ b/src/apps/self-service/src/containers/products/basic-info/BasicInfo.jsx
@@ -0,0 +1,325 @@
+import { useEffect, useState } from "react";
+import { connect, useSelector, useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import _ from "lodash";
+
+import {
+ Breadcrumb,
+ Button,
+ IconOutline,
+ LoadingSpinner,
+ PageDivider,
+} from "~/libs/ui";
+import { ContactSupportModal } from "~/libs/shared";
+
+import { PageContent, PageFoot } from "../../../components/page-elements";
+import {
+ PageOptions,
+ PrimaryDataChallengeOptions,
+ ROUTES,
+ selfServiceRootRoute,
+ selfServiceStartRoute,
+} from "../../../config";
+import {
+ saveBasicInfo,
+ toggleSupportModal,
+ savePageDetails,
+ saveWorkType,
+ resetIntakeForm,
+} from "../../../actions/form";
+import { WorkType } from "../../../lib";
+import { triggerAutoSave, triggerCookieClear } from "../../../actions/autoSave";
+import { setProgressItem } from "../../../actions/progress";
+import { BasicInfoForm } from "../../../components/products/basic-info-form";
+import {
+ getDynamicPriceAndTimeline,
+ getDataAdvisoryPriceAndTimelineEstimate,
+ currencyFormat,
+ getDataExplorationPriceAndTimelineEstimate,
+ getFindMeDataPriceAndTimelineEstimate,
+ getWebsiteDesignPriceAndTimelineEstimate,
+} from "../../../utils";
+import { FeaturedWorkTypeBanner } from "../../../components/banners";
+
+import styles from "./styles.module.scss";
+
+/**
+ * Basic Info Page
+ */
+const BasicInfo = ({
+ saveBasicInfo,
+ saveWorkType,
+ setProgressItem,
+ toggleSupportModal,
+ workItemConfig,
+ isLoggedIn,
+ triggerCookieClear,
+ breadcrumb = [],
+}) => {
+
+ const defaultFormData = {
+ projectTitle: { title: "Project Title", option: "", value: "" },
+ description: { title: "Description", option: "", value: "" },
+ assetsUrl: { title: "Shareable URL Link(s)", value: "" },
+ assetsDescription: { title: "About Your Assets", value: "" },
+ goals: { title: "Goals & Data Description", option: "", value: null },
+ analysis: { title: "What Data Do You Need?", option: "", value: "" },
+ feedback: { title: "What Data Do You like?", option: "", value: "" },
+ yourIndustry: { title: "Your Industry", option: "", value: "" },
+ colorOption: { title: "Color Option", value: [], option: [] },
+ likedStyles: { title: "Liked Styles", value: [], option: [] },
+ dislikedStyles: { title: "Disliked Styles", value: [], option: [] },
+ specificColor: { title: "Custom Color", option: "", value: "" },
+ primaryDataChallenge: {
+ title: "Primary Data Challenge",
+ option: PrimaryDataChallengeOptions[0].label,
+ value: 0,
+ },
+ primaryDataChallengeOther: {
+ title: "Primary Data Challenge (Other Option)",
+ option: "",
+ value: "",
+ },
+ inspiration: [
+ {
+ website: { title: "Website Address", value: "", option: "" },
+ feedback: { title: "What Do You Like", value: "", option: "" },
+ },
+ ],
+ sampleData: { title: "Sample Data", option: "", value: "" },
+ };
+
+ const navigate = useNavigate()
+
+ const [formData, setFormData] = useState(defaultFormData);
+ const isFindMeData = workItemConfig.type === WorkType.findData;
+ const isWebsiteDesign = workItemConfig.type === WorkType.design;
+ const isWebsiteDesignFormValid = formData?.projectTitle?.value?.trim().length;
+ const isDataExploration = workItemConfig.type === WorkType.data;
+ const isDataAdvisory = workItemConfig.type === WorkType.problem;
+ const isDataExplorationFormValid =
+ formData?.projectTitle?.value?.trim().length &&
+ formData?.goals?.value?.trim().length;
+ const isDataAdvisoryFormValid =
+ formData?.projectTitle?.value?.trim().length &&
+ formData?.goals?.value?.trim().length;
+ const isFindMeDataFormValid =
+ formData?.projectTitle?.value?.trim().length &&
+ formData?.analysis?.value?.trim().length &&
+ ((formData?.primaryDataChallenge?.value >= 0 &&
+ formData?.primaryDataChallenge?.value < 3) ||
+ (formData?.primaryDataChallenge?.value === 3 &&
+ formData?.primaryDataChallengeOther?.value?.trim().length)) &&
+ formData?.sampleData?.value?.trim().length;
+
+ let isFormValid;
+ if (isDataExploration) {
+ isFormValid = isDataExplorationFormValid;
+ } else if (isFindMeData) {
+ isFormValid = isFindMeDataFormValid;
+ } else if (isWebsiteDesign) {
+ isFormValid = isWebsiteDesignFormValid;
+ } else if (isDataAdvisory) {
+ isFormValid = isDataAdvisoryFormValid;
+ }
+
+ const dispatch = useDispatch();
+ const [isLoading] = useState(false);
+ const workType = useSelector((state) => state.form.workType);
+ const basicInfo = useSelector((state) => state.form.basicInfo);
+ const currentStep = useSelector((state) => state.progress.currentStep);
+ const pageDetails = useSelector((state) => state.form.pageDetails);
+ const showSupportModal = useSelector((state) => state.form.showSupportModal);
+ const challenge = useSelector((state) => state.challenge);
+
+ const estimate =
+ workType?.selectedWorkType === WorkType.design
+ ? getWebsiteDesignPriceAndTimelineEstimate()
+ : isDataExploration
+ ? getDataExplorationPriceAndTimelineEstimate()
+ : isDataAdvisory
+ ? getDataAdvisoryPriceAndTimelineEstimate()
+ : getFindMeDataPriceAndTimelineEstimate();
+
+ const onBack = () => {
+ dispatch(triggerCookieClear());
+ saveBasicInfo(defaultFormData);
+ navigate(selfServiceStartRoute);
+ };
+
+ const baseUrl = `${selfServiceRootRoute}/new/${workItemConfig.basePath}`;
+
+ const onNext = () => {
+ setProgressItem(isLoggedIn ? 7 : 5);
+ saveBasicInfo(formData);
+ dispatch(triggerAutoSave(true, isLoggedIn, true));
+ navigate(isLoggedIn ? `${baseUrl}/review` : `${baseUrl}/login-prompt`);
+ };
+
+ const [firstMounted, setFirstMounted] = useState(true);
+
+ useEffect(() => {
+ if (!firstMounted) {
+ return;
+ }
+
+ setProgressItem(2);
+
+ if (currentStep === 0) {
+ saveWorkType({
+ selectedWorkType: workItemConfig.type,
+ selectedWorkTypeDetail: workItemConfig.title,
+ });
+ dispatch(triggerAutoSave(true, isLoggedIn));
+ }
+
+ if (!!basicInfo?.projectTitle?.value?.length) {
+ setFormData(basicInfo);
+ }
+
+ setFirstMounted(false);
+
+ return () => {
+ dispatch(triggerAutoSave(true, isLoggedIn, false));
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [basicInfo, currentStep, dispatch, setProgressItem, firstMounted]);
+
+ useEffect(() => {
+ if (
+ formData?.primaryDataChallenge?.value !== 3 &&
+ formData?.primaryDataChallengeOther?.value?.trim().length > 0
+ ) {
+ setFormData({
+ ...formData,
+ primaryDataChallengeOther: {
+ ...formData.primaryDataChallengeOther,
+ option: "",
+ value: "",
+ },
+ });
+ } else {
+ if (formData) {
+ saveBasicInfo(formData);
+ }
+ }
+ }, [formData, formData.selectedDevices, saveBasicInfo]);
+
+ const onShowSupportModal = () => {
+ toggleSupportModal(true);
+ };
+ const onHideSupportModal = () => {
+ toggleSupportModal(false);
+ };
+
+ const saveForm = (autoSave) => {
+ saveBasicInfo(formData);
+ dispatch(triggerAutoSave(autoSave, isLoggedIn, true));
+ if (autoSave) navigate(ROUTES.HOME_PAGE);
+ };
+
+ const onClickBreadcrumbItem = (item) => {
+ if (item.name === "Start work") {
+ dispatch(resetIntakeForm(true));
+ dispatch(triggerCookieClear());
+ saveBasicInfo(defaultFormData);
+ }
+ };
+
+ return (
+ <>
+ ({
+ ...item,
+ onClick: onClickBreadcrumbItem,
+ }))}
+ />
+
+ ({
+ ...o,
+ value: i === (pageDetails?.pages?.length || 0) - 1,
+ label: `${o.label} (${currencyFormat(
+ getDynamicPriceAndTimeline(
+ i + 1,
+ formData?.selectedDevice?.value?.length || 0
+ ).total
+ )})`,
+ }))}
+ estimate={estimate}
+ formData={formData}
+ serviceType={workType?.selectedWorkTypeDetail}
+ onFormUpdate={setFormData}
+ numOfPages={pageDetails?.pages?.length || 0}
+ onShowSupportModal={onShowSupportModal}
+ bannerData={workItemConfig}
+ saveForm={saveForm}
+ />
+
+
+
+
+
+ );
+};
+
+const mapStateToProps = ({ form }) => form;
+
+const mapDispatchToProps = {
+ saveBasicInfo,
+ setProgressItem,
+ savePageDetails,
+ toggleSupportModal,
+ saveWorkType,
+ triggerCookieClear,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(BasicInfo);
diff --git a/src/apps/self-service/src/containers/products/basic-info/index.js b/src/apps/self-service/src/containers/products/basic-info/index.js
new file mode 100644
index 000000000..b34c92534
--- /dev/null
+++ b/src/apps/self-service/src/containers/products/basic-info/index.js
@@ -0,0 +1 @@
+export { default as BasicInfo } from './BasicInfo';
diff --git a/src/apps/self-service/src/containers/products/basic-info/styles.module.scss b/src/apps/self-service/src/containers/products/basic-info/styles.module.scss
new file mode 100644
index 000000000..924af24c0
--- /dev/null
+++ b/src/apps/self-service/src/containers/products/basic-info/styles.module.scss
@@ -0,0 +1,103 @@
+@import "@libs/ui/styles/includes";
+@import "../../../styles/include";
+
+.footerContent {
+ display: flex;
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-between;
+
+ @include ltemd {
+ flex-direction: row;
+ gap: 16px;
+ }
+
+ .footer-right {
+ display: flex;
+ gap: 16px;
+
+ .rotated {
+ transform: rotate(-90deg);
+ }
+
+ .save-icon {
+ display: none;
+ }
+
+ @include mobile {
+ flex-direction: row;
+ }
+
+ button {
+ &.saveForLater {
+ span {
+ @include ltemd {
+ display: none;
+ }
+ }
+
+ :global(.btn-icon) {
+ @include gtelg {
+ display: none;
+ }
+ }
+ }
+
+ &.reviewAndSubmit {
+
+ .desktop {
+ @include ltemd {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+}
+
+.backButtonWrapper {
+ @include backButtonWrapper;
+ margin-top: 0;
+}
+
+@include mobile {
+
+ button {
+ svg {
+ display: block !important;
+
+ @include gtelg {
+ display: inline-block !important;
+ }
+ }
+ }
+
+ .save-button-text {
+ display: none;
+ }
+
+ .review-button-text {
+ display: none;
+ }
+}
+
+@include mobile {
+
+ button {
+ svg {
+ display: block !important;
+
+ @include gtelg {
+ display: inline-block !important;
+ }
+ }
+ }
+
+ .save-button-text {
+ display: none;
+ }
+
+ .review-button-text {
+ display: none;
+ }
+}
diff --git a/src/apps/self-service/src/containers/products/index.js b/src/apps/self-service/src/containers/products/index.js
new file mode 100644
index 000000000..c9e92dafd
--- /dev/null
+++ b/src/apps/self-service/src/containers/products/index.js
@@ -0,0 +1,2 @@
+export * from './basic-info';
+export * from './review';
diff --git a/src/apps/self-service/src/containers/products/review/Review.jsx b/src/apps/self-service/src/containers/products/review/Review.jsx
new file mode 100644
index 000000000..66efd3ce6
--- /dev/null
+++ b/src/apps/self-service/src/containers/products/review/Review.jsx
@@ -0,0 +1,322 @@
+import { useNavigate } from "react-router-dom";
+import { Elements, useElements, useStripe } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js/pure";
+import { toastr } from "react-redux-toastr";
+import { useEffect, useState } from "react";
+import { connect, useDispatch, useSelector } from "react-redux";
+import _ from "lodash";
+
+import { EnvironmentConfig } from "~/config";
+import {
+ Breadcrumb,
+ Button,
+ IconOutline,
+ LoadingSpinner,
+ PageDivider,
+} from "~/libs/ui";
+import { OrderContractModal } from "~/libs/shared";
+
+import { MAX_COMPLETED_STEP, selfServiceRootRoute, selfServiceStartRoute } from "../../../config";
+import { resetIntakeForm } from "../../../actions/form";
+import { triggerAutoSave, triggerCookieClear } from "../../../actions/autoSave";
+import { setProgressItem } from "../../../actions/progress";
+import * as services from "../../../services/payment";
+import { activateChallenge } from "../../../services/challenge";
+import {
+ getWebsiteDesignPriceAndTimelineEstimate,
+ getDataExplorationPriceAndTimelineEstimate,
+ getFindMeDataPriceAndTimelineEstimate,
+ getDataAdvisoryPriceAndTimelineEstimate,
+ currencyFormat,
+} from "../../../utils";
+import { WorkType } from "../../../lib";
+import { PageContent, PageFoot } from "../../../components/page-elements";
+import { clearCachedChallengeId, loadChallengeId, setCookie } from "../../../utils/autoSaveBeforeLogin";
+import { WorkServicePrice } from "../../../components/work-service-price";
+
+import PaymentForm from "./components/PaymentForm";
+import ReviewTable from "./components/ReviewTable";
+import AboutYourProject from "./components/AboutYourProject";
+import styles from "./styles.module.scss";
+
+let stripePromise;
+
+/**
+ * Review Page
+ */
+const Review = ({
+ setProgressItem,
+ previousPageUrl,
+ nextPageUrl,
+ introText,
+ banner,
+ icon,
+ showIcon,
+ secondaryBanner,
+ workItemConfig,
+ breadcrumb,
+ isLoggedIn
+}) => {
+ const dispatch = useDispatch();
+ const [paymentFailed, setPaymentFailed] = useState(false);
+ const [isLoading, setLoading] = useState(false);
+ const intakeFormData = useSelector((state) => state?.form);
+ const [formData, setFormData] = useState({
+ cardName: null,
+ cardNumber: false, // value is bool indicating if it's valid or not
+ country: null,
+ cvc: false, // value is bool indicating if it's valid or not
+ expiryDate: false, // value is bool indicating if it's valid or not
+ zipCode: null,
+ checked: false, // value to toggle terms and conditions checkbox
+ });
+ const navigate = useNavigate()
+
+ const currentStep = useSelector((state) => state?.progress.currentStep);
+ const workType = useSelector((state) => state.form.workType);
+ const stripe = useStripe();
+ const elements = useElements();
+ const fullState = useSelector((state) => state);
+ const [isOrderContractModalOpen, setIsOrderContractModalOpen] =
+ useState(false);
+
+ let estimate;
+ switch (workType?.selectedWorkType) {
+ case WorkType.design:
+ estimate = getWebsiteDesignPriceAndTimelineEstimate();
+ break;
+ case WorkType.data:
+ estimate = getDataExplorationPriceAndTimelineEstimate();
+ break;
+ case WorkType.problem:
+ estimate = getDataAdvisoryPriceAndTimelineEstimate();
+ break;
+ case WorkType.findData:
+ estimate = getFindMeDataPriceAndTimelineEstimate();
+ break;
+ default:
+ estimate = getFindMeDataPriceAndTimelineEstimate();
+ break;
+ }
+
+ const [firstMounted, setFirstMounted] = useState(true);
+ useEffect(() => {
+ if (!firstMounted) {
+ return;
+ }
+
+ setProgressItem(7);
+
+ if (currentStep === 0) {
+ navigate(selfServiceStartRoute);
+ }
+
+ setFirstMounted(false);
+
+ return () => {
+ dispatch(triggerAutoSave(true, isLoggedIn));
+ };
+ }, [currentStep, formData, dispatch, setProgressItem, firstMounted, navigate, isLoggedIn]);
+
+ const [anotherFirstMounted, setAnotherFirstMounted] = useState(true);
+ useEffect(() => {
+ if (!anotherFirstMounted) {
+ return;
+ }
+
+ if (currentStep === 0) {
+ navigate(selfServiceRootRoute);
+ }
+
+ setAnotherFirstMounted(false);
+ }, [currentStep, anotherFirstMounted, navigate]);
+
+ const onBack = () => {
+ navigate(previousPageUrl || `${selfServiceRootRoute}/branding`);
+ };
+
+ const clearPreviousForm = () => {
+ setCookie(MAX_COMPLETED_STEP, "", -1);
+ clearCachedChallengeId();
+ dispatch(resetIntakeForm(true));
+ };
+
+ const challengeId = loadChallengeId();
+ const onNext = async () => {
+ if (!stripe || !elements) {
+ return;
+ }
+
+ setLoading(true);
+ setPaymentFailed(false);
+
+ const description = `Work Item #${challengeId}\n${_.get(
+ fullState,
+ "form.basicInfo.projectTitle.value",
+ ""
+ ).slice(0, 355)}\n${_.get(fullState, "form.workType.selectedWorkType")}`;
+
+ services
+ .processPayment(
+ stripe,
+ elements,
+ estimate.total,
+ challengeId,
+ formData.email,
+ description
+ )
+ .then((res) => {
+ activateChallenge(challengeId);
+ clearPreviousForm();
+ navigate(nextPageUrl || `${selfServiceRootRoute}/thank-you`);
+ setProgressItem(8);
+ setPaymentFailed(false);
+ })
+ .catch(() => {
+ setPaymentFailed(true);
+ toastr.error("Error", "There was an error processing the payment");
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ };
+
+ const isFormValid =
+ formData.cardName &&
+ formData.cardNumber &&
+ formData.country &&
+ formData.cvc &&
+ formData.expiryDate &&
+ formData.zipCode &&
+ formData.checked;
+
+ const onClickBreadcrumbItem = (item) => {
+ if (item.name === "Start work") {
+ dispatch(resetIntakeForm(true));
+ dispatch(triggerCookieClear());
+ }
+ };
+
+ return (
+ <>
+ setIsOrderContractModalOpen(false)}
+ />
+ ({
+ ...item,
+ onClick: onClickBreadcrumbItem,
+ }))}
+ />
+ {banner}
+
+
+
+
+
+ );
+};
+
+const ReviewWrapper = (props) => {
+ if (!stripePromise) {
+ stripePromise = loadStripe(EnvironmentConfig.STRIPE.API_KEY, {
+ apiVersion: EnvironmentConfig.STRIPE.API_VERSION,
+ });
+ }
+
+ return (
+
+
+ );
+};
+
+const mapStateToProps = ({ form }) => form;
+
+const mapDispatchToProps = {
+ setProgressItem,
+};
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(ReviewWrapper);
diff --git a/src/apps/self-service/src/containers/products/review/components/AboutYourProject/index.jsx b/src/apps/self-service/src/containers/products/review/components/AboutYourProject/index.jsx
new file mode 100644
index 000000000..a0ca63005
--- /dev/null
+++ b/src/apps/self-service/src/containers/products/review/components/AboutYourProject/index.jsx
@@ -0,0 +1,42 @@
+import { HelpBanner } from "../../../../../components/banners";
+import { PageUl } from "../../../../../components/page-elements";
+
+const AboutYourProject = () => {
+ return (
+
+
+
+
+ Your Dashboard is your go-to hub for managing your work.
+
+ From here you can view timelines, details, and other important
+ information tied to your work submissions.
+
+
+
+ You can expect members of our community to ask you questions about
+ this work.
+
+ From your Work Summary page you’ll see if you have any
+ outstanding Messages, indicated by a red icon. Please answer questions
+ from our members in a timely and thorough manner. This will help them
+ deliver high quality results for you on time!
+
+
+
+ Topcoder experts will curate the best solutions for you.
+
+ This saves you time and energy wading through submissions that
+ perhaps aren't of value to you. When your high-quality submissions are
+ ready, you'll be notified to download your assets, rate your Topcoder
+ experience, and officially close out this work.
+
+
+
+ );
+};
+
+export default AboutYourProject;
diff --git a/src/apps/self-service/src/containers/products/review/components/PaymentForm/index.jsx b/src/apps/self-service/src/containers/products/review/components/PaymentForm/index.jsx
new file mode 100644
index 000000000..424f2559a
--- /dev/null
+++ b/src/apps/self-service/src/containers/products/review/components/PaymentForm/index.jsx
@@ -0,0 +1,200 @@
+import _ from "lodash";
+import {
+ CardCvcElement,
+ CardExpiryElement,
+ CardNumberElement,
+} from "@stripe/react-stripe-js";
+import PT from "prop-types";
+import { useState, useContext } from "react";
+
+import { profileContext } from "~/libs/core";
+
+import { COUNTRY_OPTIONS } from "../../../../../config";
+import { ReactSelect } from "../../../../../components/react-select";
+import { FormField, FormInputCheckbox, FormInputText } from "../../../../../components/form-elements";
+
+import styles from "./styles.module.scss";
+
+/**
+ * Payment Form Page
+ */
+const PaymentForm = ({ formData, setFormData, onOpenContractModal }) => {
+ const handleInputChange = (name, value) =>
+ setFormData((formData) => ({ ...formData, [name]: value }));
+
+ const [cardNumberError, setCardNumberError] = useState("");
+ const [cardExpiryError, setCardExpiryError] = useState("");
+ const [cvcError, setCvcError] = useState("");
+ const { profile } = useContext(profileContext);
+ const email = profile?.email;
+
+ // set the email, if it exists
+ if (formData && !formData.email && email) {
+ setFormData({
+ ...formData,
+ email,
+ });
+ }
+
+ const getFieldError = (data) => data?.error?.message || "";
+
+ const onCardNumberChange = (data) => {
+ const errorMessage = getFieldError(data);
+ setCardNumberError(errorMessage);
+ if (_.isEmpty(errorMessage)) {
+ handleInputChange("cardNumber", data?.complete);
+ }
+ };
+
+ const onExpirationChange = (data) => {
+ const errorMessage = getFieldError(data);
+ setCardExpiryError(errorMessage);
+ if (_.isEmpty(errorMessage)) {
+ handleInputChange("expiryDate", data?.complete);
+ }
+ };
+
+ const onCvcChange = (data) => {
+ const errorMessage = getFieldError(data);
+ setCvcError(errorMessage);
+ handleInputChange("cvc", !errorMessage && data?.complete);
+ };
+
+ return (
+
+ Start work
+
+
+ {featuredWorkTypes.map((featuredWorkType) => (
+ handleClick(featuredWorkType)}
+ content={featuredWorkType.description}
+ key={featuredWorkType.title}
+ />
+ ))}
+
+
+
+
+ );
+};
+
+const mapStateToProps = ({ form }) => form;
+
+const mapDispatchToProps = {
+ saveWorkType,
+ setProgressItem,
+ toggleSupportModal,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(SelectWorkType);
diff --git a/src/apps/self-service/src/containers/select-work-type/SelectWorkType.module.scss b/src/apps/self-service/src/containers/select-work-type/SelectWorkType.module.scss
new file mode 100644
index 000000000..fe63faab1
--- /dev/null
+++ b/src/apps/self-service/src/containers/select-work-type/SelectWorkType.module.scss
@@ -0,0 +1,457 @@
+@import "../../styles/include";
+
+.heroContainer {
+ position: static;
+ min-width: 610px;
+ left: 0px;
+ top: 0px;
+ margin: 16px 0px;
+
+ display: grid;
+ grid-template-columns: 1fr 359px;
+
+ background: linear-gradient(263.22deg, #038664 2.65%, #075f96 98.14%), #ffffff;
+ border-radius: 8px;
+
+ &.website-design,
+ &.website-design-legacy {
+ background: linear-gradient(263.22deg, #038664 2.65%, #075f96 98.14%),
+ #ffffff;
+ }
+
+ &.data-exploration {
+ background: linear-gradient(263.22deg, #038664 2.65%, #075f96 98.14%),
+ #ffffff;
+ }
+
+ &.find-me-data {
+ background: linear-gradient(84.92deg, #723390 2.08%, #8c384f 97.43%);
+ }
+
+ .heroBackgroundContainer {
+ position: static;
+ width: 359px;
+ left: 793px;
+ top: 0px;
+ margin: 0px;
+
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+
+ border-radius: 0 8px 8px 0;
+
+ &.website-design {
+ background: url("../../assets/images/website-design.png");
+ background-size: cover;
+ }
+
+ &.data-exploration {
+ background: url("../../assets/images/data-exploration.png");
+ background-size: cover;
+ }
+
+ &.find-me-data {
+ background: url("../../assets/images/find-me-data.png");
+ background-size: cover;
+ }
+ }
+
+ .heroContent {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 32px 0px;
+
+ color: $black-0;
+
+ position: static;
+ left: 32px;
+ top: 0px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 1;
+ margin: 0px 24px;
+
+ .heroHeader {
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+
+ position: static;
+ height: 48px;
+ left: 0px;
+ top: 0px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ .heroIconContainer {
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 4px 0px 0px;
+ margin-right: 16px;
+
+ position: static;
+ width: 40px;
+ height: 44px;
+ left: 0px;
+ top: 0px;
+ }
+
+ .heroHeaderContent {
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ row-gap: 16px;
+ padding: 0px;
+
+ position: static;
+ height: 48px;
+ left: 56px;
+ top: 0px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 1;
+
+ text-transform: uppercase;
+ font-size: 24px;
+ font-weight: 400;
+
+ .heroHeaderSubtitle {
+ font-size: 16px;
+
+ .strikeThrough {
+ text-decoration: line-through;
+ }
+
+ .priceChip {
+ background-color: $black-0;
+ color: $gui-kit-gray-90;
+ font-weight: 600;
+ border-radius: 10px;
+ padding: 0 8px;
+ margin: 0 8px;
+ }
+
+ .separator {
+ margin: 0 16px 0 8px;
+ }
+ }
+ }
+ }
+
+ .heroText {
+ position: static;
+ // height: 96px;
+ left: 0px;
+ top: 64px;
+ max-width: 713px;
+
+ /* desktop/body-large */
+ font-family: Roboto;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 24px;
+ line-height: 32px;
+ /* or 133% */
+
+ /* gray/white */
+ color: #ffffff;
+
+ /* Inside auto layout */
+ order: 1;
+ margin: 16px 0px;
+ flex: none;
+ align-self: stretch;
+ flex-grow: 0;
+ }
+
+ .heroButtonContainer {
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+
+ position: static;
+ height: 40px;
+ left: 0px;
+ top: 216px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ margin: 12px 0px;
+ }
+ }
+}
+
+.cardContainer {
+ display: flex;
+ column-gap: 8px;
+ justify-content: space-around;
+ margin-top: 1rem;
+
+ @include mobile {
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ row-gap: 8px;
+ }
+
+ .card {
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ row-gap: 8px;
+ padding: 32px;
+
+ position: static;
+ width: 500px;
+ max-width: 100%;
+ height: 100%;
+ min-height: 172px;
+ margin-top: 1rem;
+
+ /* gray/white */
+ background: $black-0;
+ /* Button hover shadow */
+ box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
+ border-radius: 8px;
+
+ .title,
+ .smallHeader {
+ font-weight: bold;
+ text-transform: uppercase;
+ }
+
+ .smallHeader {
+ font-size: 12px;
+ }
+
+ .title {
+ font-size: 24px;
+ }
+
+ .text {
+ font-size: 16px;
+ line-height: 26px;
+ text-align: center;
+ }
+ }
+}
+
+.backButtonContainer {
+ @include backButtonContainer;
+
+ .backButtonWrapper {
+ @include backButtonWrapper;
+ }
+}
+
+.pageContent {
+ margin-top: 0;
+ padding: 40px 0;
+
+ @include mobile {
+ padding: 20px;
+ }
+
+ background: white;
+ border-radius: 8px;
+ position: relative;
+}
+
+.pageHeading {
+ margin-bottom: 0;
+ margin-top: 0;
+ font-weight: 600;
+ color: #2a2a2a;
+ font-size: 34px;
+ line-height: 32px;
+
+ @include mobile {
+ font-size: 28px;
+ }
+}
+
+.workTypeCard {
+ max-width: 100%;
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ border-radius: 8px;
+ color: #fff;
+ text-align: left;
+ cursor: pointer;
+}
+
+.workTypeCardContentContainer {
+ border-radius: inherit;
+}
+
+.workTypeCardSubHeading {
+ font-weight: 700;
+ font-size: 12px;
+ text-transform: uppercase;
+ margin: 0;
+
+ @include mobile {
+ font-size: 10px;
+ }
+}
+
+.workTypeCardHeading {
+ font-weight: 600;
+ font-size: 24px;
+ text-transform: uppercase;
+ margin: 0;
+
+ @include mobile {
+ font-size: 20px;
+ }
+}
+
+.workTypeCardSmall {
+ position: relative;
+ width: 435px;
+ height: 362px;
+ text-align: left;
+ padding-bottom: 90px;
+
+ @include mobile {
+ height: 380px;
+ }
+}
+
+.workTypeCardSmall .workTypeCardSubHeading {
+ letter-spacing: 1px;
+}
+
+.workTypeCardContent {
+ padding-bottom: 48px;
+ @include font-roboto;
+
+ @include mobile {
+ font-weight: 500;
+ font-size: 12px;
+ }
+}
+
+.workTypeCardSmall .workTypeCardContent {
+ padding-bottom: 48px;
+
+ @include desktop {
+ opacity: 0;
+ transition: opacity 240ms ease-in-out;
+ }
+}
+
+.workTypeCardSmall .workTypeCardCtaButton {
+ position: absolute;
+ bottom: 24px;
+ left: 24px;
+
+ @include desktop {
+ opacity: 0;
+ transform: translateY(1rem);
+ transition: opacity 240ms ease-in-out, transform 400ms ease-in-out;
+ }
+}
+
+.workTypeCardSmall .workTypeCardContentContainer {
+ background: linear-gradient(180deg, #2a2a2a 0%, rgba(42, 42, 42, 0) 78.12%),
+ linear-gradient(180deg, #2a2a2a 0%, rgba(42, 42, 42, 0) 100%);
+}
+
+.workTypeCardSmall .workTypeCardContentContainer {
+ padding: 24px;
+}
+
+.workTypeCardSmall .workTypeCardContent {
+ margin-top: 1rem;
+}
+
+.workTypeCardSmall:hover .workTypeCardContent {
+ opacity: 1;
+}
+
+.workTypeCardSmall:hover .workTypeCardCtaButton {
+ @include desktop {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.workTypeCardWide {
+ display: flex;
+ padding: 24px;
+ gap: 24px;
+
+ @include mobile {
+ flex-direction: column;
+ }
+}
+
+.workTypeCardWide svg {
+ min-width: fit-content;
+}
+
+.workTypeCardWide .workTypeCardSubHeading,
+.workTypeCardWide .workTypeCardCtaButton {
+ margin-top: 1rem !important;
+}
+
+.workTypeCardWide::before {
+ content: "";
+ position: absolute;
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.workTypeCardWide .workTypeCardHeading {
+ @include font-barlow;
+}
+
+.workTypeCardWide .workTypeCardSubHeading {
+ @include font-roboto;
+ font-weight: 500;
+ font-size: 16px;
+
+ @include mobile {
+ font-size: 14px;
+ }
+}
+
+.workTypeSlider {
+ margin-bottom: 1rem;
+}
+
+.hideOnDesktop {
+ @include desktop {
+ display: none;
+ }
+}
+
+.hideOnMobile {
+ @include mobile {
+ display: none;
+ }
+}
diff --git a/src/apps/self-service/src/containers/select-work-type/index.js b/src/apps/self-service/src/containers/select-work-type/index.js
new file mode 100644
index 000000000..7a5bac9e3
--- /dev/null
+++ b/src/apps/self-service/src/containers/select-work-type/index.js
@@ -0,0 +1 @@
+export { default as SelectWorkType } from './SelectWorkType'
\ No newline at end of file
diff --git a/src/apps/self-service/src/containers/work-dashboard/WorkDashboard.tsx b/src/apps/self-service/src/containers/work-dashboard/WorkDashboard.tsx
new file mode 100644
index 000000000..01fefed48
--- /dev/null
+++ b/src/apps/self-service/src/containers/work-dashboard/WorkDashboard.tsx
@@ -0,0 +1,170 @@
+import { Dispatch, FC, SetStateAction, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { NavigateFunction, Params, useNavigate, useParams } from 'react-router-dom'
+import { useDispatch } from 'react-redux'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+import { ButtonProps, ContentLayout, LoadingSpinner, tabNavItemBadgeSet, TabsNavbar, TabsNavItem } from '~/libs/ui'
+
+import {
+ Work,
+ WorkByStatus,
+ workContext,
+ WorkContextData,
+ workGetGroupedByStatus,
+ workGetStatusFilter,
+ WorkStatusFilter,
+} from '../../lib'
+import { clearAutoSavedForm, clearCachedChallengeId } from '../../utils/autoSaveBeforeLogin'
+import { getWorkDashboardRoute } from '../../self-service.routes'
+import { WorkTable } from '../work-table'
+import { WorkNoResults } from '../../components/work-table'
+import { resetIntakeForm } from '../../actions/form'
+import { selfServiceStartRoute } from '../../config'
+
+import { workDashboardTabs } from './work-nav.config'
+
+const WorkDashboard: FC<{}> = () => {
+ const dispatch: Dispatch = useDispatch()
+
+ const { rootLoggedInRoute }: RouterContextData = useContext(routerContext)
+
+ const {
+ hasWork,
+ initialized,
+ messagesInitialized,
+ work,
+ }: WorkContextData = useContext(workContext)
+
+ const [statusGroups, setStatusGroups]: [{ [status: string]: WorkByStatus } | undefined,
+ Dispatch>]
+ = useState<{ [status: string]: WorkByStatus }>()
+
+ const [tabs, setTabs]: [
+ ReadonlyArray,
+ Dispatch>>,
+ ]
+ = useState>([...workDashboardTabs])
+
+ const { statusKey }: Readonly> = useParams()
+ const workStatusFilter: WorkStatusFilter | undefined = workGetStatusFilter(statusKey)
+
+ const navigate: NavigateFunction = useNavigate()
+
+ const startWork: () => void = useCallback(() => {
+ clearCachedChallengeId()
+ clearAutoSavedForm()
+ dispatch(resetIntakeForm(true))
+ navigate(selfServiceStartRoute)
+ }, [
+ dispatch,
+ navigate,
+ ])
+
+ // it's super annoying that you have to define this hook before the conditionals
+ // to return non-table results, but just another joy of react
+ useEffect(() => {
+ // if we don't have a status filter, we have a problem,
+ // so don't do anything
+ if (!workStatusFilter) {
+ return
+ }
+
+ // init the status groups and set the tab badges
+ initializeStatusGroups(initialized, work, setStatusGroups, tabs, setTabs)
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [
+ initialized,
+ messagesInitialized,
+ // tabs change every render so we can't make it a dependency
+ // tabs,
+ work,
+ workStatusFilter,
+ ])
+
+ useEffect(() => {
+ clearCachedChallengeId()
+ }, [])
+
+ const buttonConfig: ButtonProps = useMemo(() => ({
+ label: 'Start work',
+ onClick: startWork,
+ }), [startWork])
+
+ // if we couldn't find a workstatusfilter,
+ // redirect to the dashboard
+ if (!workStatusFilter) {
+ navigate(rootLoggedInRoute)
+ return <>
+ }
+
+ function onChangeTab(active: string): void {
+ navigate(getWorkDashboardRoute(active))
+ }
+
+ // get the filtered list
+ const filteredResults: ReadonlyArray | undefined = statusGroups?.[workStatusFilter].results
+
+ return (
+
+
+
+ )
+}
+
+function initializeStatusGroups(
+ initialized: boolean,
+ work: ReadonlyArray,
+ setStatusGroups: Dispatch>,
+ tabs: ReadonlyArray,
+ setTabs: Dispatch>>,
+): void {
+
+ // if we're not initialized, nothing else to do
+ if (!initialized) {
+ return
+ }
+
+ const groups: { [status: string]: WorkByStatus } = workGetGroupedByStatus(work)
+ setStatusGroups(groups)
+
+ // set the count tab badges
+ const badgedTabs: ReadonlyArray = [...tabs]
+ badgedTabs
+ // don't add badges for done or all
+ .filter(tab => ![WorkStatusFilter.all, WorkStatusFilter.done]
+ .includes(WorkStatusFilter[tab.id as keyof typeof WorkStatusFilter]))
+ .forEach(tab => {
+ const info: WorkByStatus = groups[tab.id]
+ tab.badges = tab.badges || []
+ tabNavItemBadgeSet(tab.badges, 'info', info.count)
+ tabNavItemBadgeSet(tab.badges, 'important', info.messageCount)
+ })
+ setTabs(badgedTabs)
+}
+
+export default WorkDashboard
diff --git a/src/apps/self-service/src/containers/work-dashboard/index.ts b/src/apps/self-service/src/containers/work-dashboard/index.ts
new file mode 100644
index 000000000..644600402
--- /dev/null
+++ b/src/apps/self-service/src/containers/work-dashboard/index.ts
@@ -0,0 +1 @@
+export { default as WorkDashboard } from './WorkDashboard'
diff --git a/src-ts/tools/work/work-table/work-nav.config.ts b/src/apps/self-service/src/containers/work-dashboard/work-nav.config.ts
similarity index 84%
rename from src-ts/tools/work/work-table/work-nav.config.ts
rename to src/apps/self-service/src/containers/work-dashboard/work-nav.config.ts
index 8aef1ce72..cf29143a4 100644
--- a/src-ts/tools/work/work-table/work-nav.config.ts
+++ b/src/apps/self-service/src/containers/work-dashboard/work-nav.config.ts
@@ -1,5 +1,6 @@
-import { TabsNavItem } from '../../../lib'
-import { WorkStatus, WorkStatusFilter } from '../work-lib'
+import { TabsNavItem } from '~/libs/ui'
+
+import { WorkStatus, WorkStatusFilter } from '../../lib'
export const workDashboardTabs: ReadonlyArray = [
{
diff --git a/src/apps/self-service/src/containers/work-table/WorkTable.tsx b/src/apps/self-service/src/containers/work-table/WorkTable.tsx
new file mode 100644
index 000000000..2df5e6d6b
--- /dev/null
+++ b/src/apps/self-service/src/containers/work-table/WorkTable.tsx
@@ -0,0 +1,75 @@
+import { FC, useEffect, useMemo } from 'react'
+import { NavigateFunction, useNavigate } from 'react-router-dom'
+
+import { Table, TableColumn } from '~/libs/ui'
+
+import { cacheChallengeId, clearCachedChallengeId } from '../../utils/autoSaveBeforeLogin'
+import {
+ Work,
+ WorkStatus,
+ WorkStatusFilter,
+} from '../../lib'
+import { workDetailOrDraftRoute } from '../../self-service.routes'
+import { WorkNoResults } from '../../components/work-table'
+
+import { WorkListColumnField, workListColumns } from './work-table.config'
+
+interface WorkTableProps {
+ workItems: ReadonlyArray | undefined
+ statusFilter: WorkStatusFilter | undefined
+}
+
+const WorkTable: FC = props => {
+ const navigate: NavigateFunction = useNavigate()
+
+ // build the columns based on the status
+ const columns: ReadonlyArray> = useMemo(() => {
+
+ // set the columns that should appear by status
+ const filteredColumns: Array> = [...workListColumns]
+
+ if (props.statusFilter === WorkStatusFilter.draft) {
+ // if this is the draft status, remove the messages column
+ filteredColumns.splice(filteredColumns.findIndex(c => c.label === WorkListColumnField.messages), 1)
+ } else if (props.statusFilter !== WorkStatusFilter.all) {
+ // if this isn't the draft or all status, remove the action button
+ filteredColumns.splice(filteredColumns.findIndex(c => c.type === 'action'), 1)
+ }
+
+ // if this is status-specific, remove the status columm
+ if (props.statusFilter !== WorkStatusFilter.all) {
+ filteredColumns.splice(filteredColumns.findIndex(c => c.label === WorkListColumnField.status), 1)
+ }
+
+ return filteredColumns
+ }, [props.statusFilter])
+
+ useEffect(() => { clearCachedChallengeId() }, [])
+
+ function viewSelectedWork(selectedWork: Work): void {
+
+ // if this is a draft and there is no step saved
+ // for the work, cache its ID so we can go back
+ // to the beginning
+ if (selectedWork.status === WorkStatus.draft && !selectedWork.draftStep) {
+ cacheChallengeId(selectedWork.id)
+ }
+
+ // go to the specified step
+ navigate(workDetailOrDraftRoute(selectedWork))
+ }
+
+ // if we don't have any work after filtering, render no results
+ // otherwise, render the table
+ return !props.workItems?.length
+ ?
+ )
+}
+
+export default WorkTable
diff --git a/src-ts/tools/work/work-table/index.ts b/src/apps/self-service/src/containers/work-table/index.ts
similarity index 100%
rename from src-ts/tools/work/work-table/index.ts
rename to src/apps/self-service/src/containers/work-table/index.ts
diff --git a/src-ts/tools/work/work-table/work-table.config.tsx b/src/apps/self-service/src/containers/work-table/work-table.config.tsx
similarity index 79%
rename from src-ts/tools/work/work-table/work-table.config.tsx
rename to src/apps/self-service/src/containers/work-table/work-table.config.tsx
index 667b375e9..51b1b60f5 100644
--- a/src-ts/tools/work/work-table/work-table.config.tsx
+++ b/src/apps/self-service/src/containers/work-table/work-table.config.tsx
@@ -1,10 +1,12 @@
-import { TableColumn } from '../../../lib'
-import { Work } from '../work-lib'
+import { TableColumn } from '~/libs/ui'
-import { WorkBadgeRenderer } from './work-badge-renderer'
-import { WorkDeleteButtonRenderer } from './work-delete-button-renderer'
-import { WorkStatusRenderer } from './work-status-renderer'
-import { WorkTableTitleRenderer } from './work-table-title-renderer'
+import { Work } from '../../lib'
+import {
+ WorkBadgeRenderer,
+ WorkDeleteButtonRenderer,
+ WorkTableTitleRenderer,
+} from '../../components/work-table'
+import { WorkStatusRenderer } from '../../components/work-table/status-renderer'
function messageBadgeRenderer(work: Work): JSX.Element {
return WorkBadgeRenderer({
diff --git a/src/apps/self-service/src/index.tsx b/src/apps/self-service/src/index.tsx
new file mode 100644
index 000000000..5d46775c7
--- /dev/null
+++ b/src/apps/self-service/src/index.tsx
@@ -0,0 +1,2 @@
+export { selfServiceRoutes } from './self-service.routes'
+export { workRootRoute as selfServiceRootRoute } from './config'
diff --git a/src-ts/tools/work/work-lib/work-images/bug-hunt-example-1.png b/src/apps/self-service/src/lib/assets/images/bug-hunt-example-1.png
similarity index 100%
rename from src-ts/tools/work/work-lib/work-images/bug-hunt-example-1.png
rename to src/apps/self-service/src/lib/assets/images/bug-hunt-example-1.png
diff --git a/src-ts/tools/work/work-lib/work-images/bug-hunt-example-2.png b/src/apps/self-service/src/lib/assets/images/bug-hunt-example-2.png
similarity index 100%
rename from src-ts/tools/work/work-lib/work-images/bug-hunt-example-2.png
rename to src/apps/self-service/src/lib/assets/images/bug-hunt-example-2.png
diff --git a/src-ts/tools/work/work-lib/work-images/bug-hunt-example-3.png b/src/apps/self-service/src/lib/assets/images/bug-hunt-example-3.png
similarity index 100%
rename from src-ts/tools/work/work-lib/work-images/bug-hunt-example-3.png
rename to src/apps/self-service/src/lib/assets/images/bug-hunt-example-3.png
diff --git a/src-ts/tools/work/work-lib/work-images/bug-hunt-example-4.png b/src/apps/self-service/src/lib/assets/images/bug-hunt-example-4.png
similarity index 100%
rename from src-ts/tools/work/work-lib/work-images/bug-hunt-example-4.png
rename to src/apps/self-service/src/lib/assets/images/bug-hunt-example-4.png
diff --git a/src-ts/tools/work/work-lib/work-images/bug-hunt-tile.jpeg b/src/apps/self-service/src/lib/assets/images/bug-hunt-tile.jpeg
similarity index 100%
rename from src-ts/tools/work/work-lib/work-images/bug-hunt-tile.jpeg
rename to src/apps/self-service/src/lib/assets/images/bug-hunt-tile.jpeg
diff --git a/src-ts/tools/work/work-lib/work-images/index.ts b/src/apps/self-service/src/lib/assets/images/index.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-images/index.ts
rename to src/apps/self-service/src/lib/assets/images/index.ts
diff --git a/src/apps/self-service/src/lib/assets/index.ts b/src/apps/self-service/src/lib/assets/index.ts
new file mode 100644
index 000000000..159dce1e7
--- /dev/null
+++ b/src/apps/self-service/src/lib/assets/index.ts
@@ -0,0 +1,3 @@
+export * from './images'
+export * from './pdfs'
+export * from './svgs'
diff --git a/src-ts/tools/work/work-lib/work-pdfs/bug-hunt-example-1.pdf b/src/apps/self-service/src/lib/assets/pdfs/bug-hunt-example-1.pdf
similarity index 100%
rename from src-ts/tools/work/work-lib/work-pdfs/bug-hunt-example-1.pdf
rename to src/apps/self-service/src/lib/assets/pdfs/bug-hunt-example-1.pdf
diff --git a/src-ts/tools/work/work-lib/work-pdfs/bug-hunt-example-2.pdf b/src/apps/self-service/src/lib/assets/pdfs/bug-hunt-example-2.pdf
similarity index 100%
rename from src-ts/tools/work/work-lib/work-pdfs/bug-hunt-example-2.pdf
rename to src/apps/self-service/src/lib/assets/pdfs/bug-hunt-example-2.pdf
diff --git a/src-ts/tools/work/work-lib/work-pdfs/bug-hunt-example-3.pdf b/src/apps/self-service/src/lib/assets/pdfs/bug-hunt-example-3.pdf
similarity index 100%
rename from src-ts/tools/work/work-lib/work-pdfs/bug-hunt-example-3.pdf
rename to src/apps/self-service/src/lib/assets/pdfs/bug-hunt-example-3.pdf
diff --git a/src-ts/tools/work/work-lib/work-pdfs/bug-hunt-example-4.pdf b/src/apps/self-service/src/lib/assets/pdfs/bug-hunt-example-4.pdf
similarity index 100%
rename from src-ts/tools/work/work-lib/work-pdfs/bug-hunt-example-4.pdf
rename to src/apps/self-service/src/lib/assets/pdfs/bug-hunt-example-4.pdf
diff --git a/src-ts/tools/work/work-lib/work-pdfs/index.ts b/src/apps/self-service/src/lib/assets/pdfs/index.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-pdfs/index.ts
rename to src/apps/self-service/src/lib/assets/pdfs/index.ts
diff --git a/src-ts/tools/work/work-lib/work-svgs/index.ts b/src/apps/self-service/src/lib/assets/svgs/index.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-svgs/index.ts
rename to src/apps/self-service/src/lib/assets/svgs/index.ts
diff --git a/src-ts/tools/work/work-lib/work-svgs/work-type-category-data.svg b/src/apps/self-service/src/lib/assets/svgs/work-type-category-data.svg
similarity index 100%
rename from src-ts/tools/work/work-lib/work-svgs/work-type-category-data.svg
rename to src/apps/self-service/src/lib/assets/svgs/work-type-category-data.svg
diff --git a/src-ts/tools/work/work-lib/work-svgs/work-type-category-design.svg b/src/apps/self-service/src/lib/assets/svgs/work-type-category-design.svg
similarity index 100%
rename from src-ts/tools/work/work-lib/work-svgs/work-type-category-design.svg
rename to src/apps/self-service/src/lib/assets/svgs/work-type-category-design.svg
diff --git a/src-ts/tools/work/work-lib/work-svgs/work-type-category-unknown.svg b/src/apps/self-service/src/lib/assets/svgs/work-type-category-unknown.svg
similarity index 100%
rename from src-ts/tools/work/work-lib/work-svgs/work-type-category-unknown.svg
rename to src/apps/self-service/src/lib/assets/svgs/work-type-category-unknown.svg
diff --git a/src/apps/self-service/src/lib/index.ts b/src/apps/self-service/src/lib/index.ts
new file mode 100644
index 000000000..c5b659038
--- /dev/null
+++ b/src/apps/self-service/src/lib/index.ts
@@ -0,0 +1,2 @@
+export * from './assets'
+export * from './work-provider'
diff --git a/src-ts/tools/work/work-lib/work-provider/index.ts b/src/apps/self-service/src/lib/work-provider/index.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/index.ts
rename to src/apps/self-service/src/lib/work-provider/index.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/message-functions/index.ts b/src/apps/self-service/src/lib/work-provider/message-functions/index.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/message-functions/index.ts
rename to src/apps/self-service/src/lib/work-provider/message-functions/index.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/message-functions/message-store/get-unread-message-count-response.model.ts b/src/apps/self-service/src/lib/work-provider/message-functions/message-store/get-unread-message-count-response.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/message-functions/message-store/get-unread-message-count-response.model.ts
rename to src/apps/self-service/src/lib/work-provider/message-functions/message-store/get-unread-message-count-response.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/message-functions/message-store/index.ts b/src/apps/self-service/src/lib/work-provider/message-functions/message-store/index.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/message-functions/message-store/index.ts
rename to src/apps/self-service/src/lib/work-provider/message-functions/message-store/index.ts
diff --git a/src/apps/self-service/src/lib/work-provider/message-functions/message-store/message.store.ts b/src/apps/self-service/src/lib/work-provider/message-functions/message-store/message.store.ts
new file mode 100644
index 000000000..b82fbe04f
--- /dev/null
+++ b/src/apps/self-service/src/lib/work-provider/message-functions/message-store/message.store.ts
@@ -0,0 +1,19 @@
+import { EnvironmentConfig } from '~/config'
+import { xhrGetAsync } from '~/libs/core'
+
+import { GetUnreadMessageCountResponse } from './get-unread-message-count-response.model'
+
+export async function getUnreadCountAsync(workId: string, handle: string): Promise {
+
+ const url: string = [
+ `${EnvironmentConfig.VANILLA_FORUM.V2_URL}/groups/${workId}/member/${handle}`,
+ `access_token=${EnvironmentConfig.VANILLA_FORUM.ACCESS_TOKEN}`,
+ ].join('?')
+
+ const response: { unreadNotifications: number } = await xhrGetAsync(url)
+
+ return {
+ messageCount: response.unreadNotifications,
+ workId,
+ }
+}
diff --git a/src-ts/tools/work/work-lib/work-provider/message-functions/message.functions.ts b/src/apps/self-service/src/lib/work-provider/message-functions/message.functions.ts
similarity index 96%
rename from src-ts/tools/work/work-lib/work-provider/message-functions/message.functions.ts
rename to src/apps/self-service/src/lib/work-provider/message-functions/message.functions.ts
index e42cd1753..615281005 100644
--- a/src-ts/tools/work/work-lib/work-provider/message-functions/message.functions.ts
+++ b/src/apps/self-service/src/lib/work-provider/message-functions/message.functions.ts
@@ -1,4 +1,5 @@
-import { logError } from '../../../../../lib'
+import { logError } from '~/libs/core'
+
import { Work, WorkStatus } from '../work-functions'
import { GetUnreadMessageCountResponse, messageStoreGetUnreadCountAsync } from './message-store'
diff --git a/src/apps/self-service/src/lib/work-provider/page.model.ts b/src/apps/self-service/src/lib/work-provider/page.model.ts
new file mode 100644
index 000000000..648515abe
--- /dev/null
+++ b/src/apps/self-service/src/lib/work-provider/page.model.ts
@@ -0,0 +1,10 @@
+export interface Sort {
+ direction: 'asc' | 'desc'
+ fieldName: string
+}
+
+export interface Page {
+ number: number // this is a page number, not a page index; therefore, it starts at 1
+ size: number
+ sort: Sort
+}
diff --git a/src-ts/tools/work/work-lib/work-provider/work-context-data.model.ts b/src/apps/self-service/src/lib/work-provider/work-context-data.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-context-data.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-context-data.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/index.ts b/src/apps/self-service/src/lib/work-provider/work-functions/index.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/index.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/index.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-by-status.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-by-status.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-by-status.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-by-status.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/index.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-factory/index.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/index.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-factory/index.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work-solution.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-factory/work-solution.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work-solution.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-factory/work-solution.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-factory/work.factory.ts
similarity index 98%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-factory/work.factory.ts
index 558c070ac..5d1f7e552 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts
+++ b/src/apps/self-service/src/lib/work-provider/work-functions/work-factory/work.factory.ts
@@ -2,7 +2,7 @@
import moment from 'moment'
import { workGetSelectedPackageFormatted } from '..'
-import { WorkConfigConstants, WorkStrings } from '../../../work-constants'
+import { WorkConfigConstants, WorkStrings } from '../../../../config'
import {
ActivateWorkRequest,
Challenge,
@@ -715,7 +715,13 @@ function getType(challenge: Challenge): WorkType {
}
// parse the form
- const form: { form: IntakeForm } = JSON.parse(intakeForm.value)
+ const form: { form: IntakeForm } = (() => {
+ try {
+ return JSON.parse(intakeForm.value)
+ } catch {
+ return { form: undefined }
+ }
+ })()
const workTypeKey: (keyof typeof WorkType) | undefined = Object.entries(WorkType)
.find(([, value]) => value === form.form?.workType?.selectedWorkType)
?.[0] as keyof typeof WorkType
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/activate-challenge-request.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/activate-challenge-request.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/activate-challenge-request.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/activate-challenge-request.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-metadata-name.enum.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge-metadata-name.enum.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-metadata-name.enum.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge-metadata-name.enum.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-metadata-title.enum.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge-metadata-title.enum.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-metadata-title.enum.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge-metadata-title.enum.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-metadata.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge-metadata.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-metadata.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge-metadata.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-phase-name.enum.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge-phase-name.enum.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-phase-name.enum.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge-phase-name.enum.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-phase.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge-phase.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-phase.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge-phase.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-status.enum.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge-status.enum.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-status.enum.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge-status.enum.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-tag.enum.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge-tag.enum.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-tag.enum.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge-tag.enum.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/challenge.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/create-work-request.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/create-work-request.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/create-work-request.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/create-work-request.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/customer-payment-request.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/customer-payment-request.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/customer-payment-request.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/customer-payment-request.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/index.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/index.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/update-work-request.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/update-work-request.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/update-work-request.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/update-work-request.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-customer-payment.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-customer-payment.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-customer-payment.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-customer-payment.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-intake-form-routes.config.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-intake-form-routes.config.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-intake-form-routes.config.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-intake-form-routes.config.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-price.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-price.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-price.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-price.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-prices-type.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-prices-type.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-prices-type.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-prices-type.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-prices.config.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-prices.config.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-prices.config.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-prices.config.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-prices.store.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-prices.store.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-prices.store.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-prices.store.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-prize.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-prize.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-prize.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-prize.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-progress-step.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-progress-step.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-progress-step.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-progress-step.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-progress.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-progress.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-progress.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-progress.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-status-filter.enum.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-status-filter.enum.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-status-filter.enum.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-status-filter.enum.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-status.enum.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-status.enum.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-status.enum.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-status.enum.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-timeline-phase.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-timeline-phase.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-timeline-phase.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-timeline-phase.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-timeline.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-timeline.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-timeline.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-timeline.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-timelines.config.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-timelines.config.ts
similarity index 94%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-timelines.config.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-timelines.config.ts
index e1a921add..3554c9c69 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-timelines.config.ts
+++ b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-timelines.config.ts
@@ -1,4 +1,4 @@
-import { WorkConfigConstants } from '../../../work-constants'
+import { WorkConfigConstants } from '../../../../config'
import { WorkTimeline } from './work-timeline.model'
import { WorkType } from './work-type.enum'
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type-category.enum.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-type-category.enum.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type-category.enum.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-type-category.enum.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.config.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-type.config.ts
similarity index 98%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.config.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-type.config.ts
index dbd1cb510..eca50ba4c 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.config.ts
+++ b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-type.config.ts
@@ -1,5 +1,5 @@
/* eslint-disable max-len */
-import { bugHuntTileImg } from '../../../work-images'
+import { bugHuntTileImg } from '../../../assets'
import { ChallengeTag } from './challenge-tag.enum'
import { WorkIntakeFormRoutes } from './work-intake-form-routes.config'
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.enum.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-type.enum.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.enum.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-type.enum.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-type.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-type.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-url.config.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-url.config.ts
similarity index 87%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-url.config.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-url.config.ts
index 545910c0c..0da192e27 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-url.config.ts
+++ b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work-url.config.ts
@@ -1,5 +1,6 @@
-import { EnvironmentConfig } from '../../../../../../config'
-import { Page } from '../../../../../../lib'
+import { EnvironmentConfig } from '~/config'
+
+import { Page } from '../../page.model'
const challengesPath: string = `${EnvironmentConfig.API.V5}/challenges`
const customerPaymentPath: string = `${EnvironmentConfig.API.V5}/customer-payments`
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work.model.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work.model.ts
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work.model.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work.model.ts
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work.store.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work.store.ts
similarity index 94%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work.store.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work-store/work.store.ts
index d9ac8a0f5..485f3d8f6 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work.store.ts
+++ b/src/apps/self-service/src/lib/work-provider/work-functions/work-store/work.store.ts
@@ -1,4 +1,6 @@
-import { Page, xhrDeleteAsync, xhrGetAsync, xhrPatchAsync, xhrPostAsync } from '../../../../../../lib'
+import { xhrDeleteAsync, xhrGetAsync, xhrPatchAsync, xhrPostAsync } from '~/libs/core'
+
+import { Page } from '../../page.model'
import { ActivateWorkRequest } from './activate-challenge-request.model'
import { Challenge } from './challenge.model'
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts b/src/apps/self-service/src/lib/work-provider/work-functions/work.functions.ts
similarity index 93%
rename from src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts
rename to src/apps/self-service/src/lib/work-provider/work-functions/work.functions.ts
index 2bab5ba00..6fd0d5775 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts
+++ b/src/apps/self-service/src/lib/work-provider/work-functions/work.functions.ts
@@ -1,11 +1,10 @@
import { PaymentMethodResult, Stripe, StripeCardNumberElement } from '@stripe/stripe-js'
+import { UserProfile } from '~/libs/core'
+import { FormCard } from '~/libs/ui'
+import { GenericDataObject, isJsonString, textFormatMoneyLocaleString } from '~/libs/shared'
-import { FormCard, GenericDataObject, Page, textFormatMoneyLocaleString, UserProfile } from '../../../../../lib'
-import { isJsonString } from '../../../../../utils/string'
-// this has to be imported directly from the file bc the order of operations
-// that items are loaded in the barrel file this config is empty and throws an error
-// eslint-disable-next-line ordered-imports/ordered-imports
-import BugHuntPricingConfig from '../../../work-self-service/intake-forms/bug-hunt/bug-hunt.form.pricing-config'
+import { BugHuntPricingConfig } from '../../../config'
+import { Page } from '../page.model'
import { WorkByStatus } from './work-by-status.model'
import {
diff --git a/src-ts/tools/work/work-lib/work-provider/work.context.tsx b/src/apps/self-service/src/lib/work-provider/work.context.tsx
similarity index 100%
rename from src-ts/tools/work/work-lib/work-provider/work.context.tsx
rename to src/apps/self-service/src/lib/work-provider/work.context.tsx
diff --git a/src-ts/tools/work/work-lib/work-provider/work.provider.tsx b/src/apps/self-service/src/lib/work-provider/work.provider.tsx
similarity index 91%
rename from src-ts/tools/work/work-lib/work-provider/work.provider.tsx
rename to src/apps/self-service/src/lib/work-provider/work.provider.tsx
index 562f1e3da..f66fef690 100644
--- a/src-ts/tools/work/work-lib/work-provider/work.provider.tsx
+++ b/src/apps/self-service/src/lib/work-provider/work.provider.tsx
@@ -1,6 +1,16 @@
-import { Dispatch, FC, ReactNode, SetStateAction, useContext, useEffect, useState } from 'react'
-
-import { logError, profileContext, ProfileContextData, UserProfile } from '../../../../lib'
+import {
+ Dispatch,
+ FC,
+ MutableRefObject,
+ ReactNode,
+ SetStateAction,
+ useContext,
+ useEffect,
+ useRef,
+ useState,
+} from 'react'
+
+import { logError, profileContext, ProfileContextData, UserProfile } from '~/libs/core'
import { messageGetUnreadCountAsync } from './message-functions'
import { WorkContextData } from './work-context-data.model'
@@ -9,6 +19,8 @@ import { default as workContext, defaultWorkContextData } from './work.context'
export const WorkProvider: FC<{ children: ReactNode }> = props => {
+ const initialized: MutableRefObject = useRef(false)
+
const [workContextData, setWorkContextData]: [WorkContextData, Dispatch>]
= useState(defaultWorkContextData)
@@ -43,7 +55,7 @@ export const WorkProvider: FC<{ children: ReactNode }> = props => {
try {
const safeProfile: UserProfile = profile as UserProfile
- let pageNumber: number = 1
+ let pageNumber: number = 0
let nextSet: Array = await workGetAllAsync(safeProfile, pageNumber += 1)
const contextData: WorkContextData = {
@@ -108,7 +120,10 @@ export const WorkProvider: FC<{ children: ReactNode }> = props => {
}
}
- getAndSetWork()
+ if (!initialized.current) {
+ initialized.current = true
+ getAndSetWork()
+ }
}, [
profile,
workContextData,
diff --git a/src/apps/self-service/src/reducers/autoSave.js b/src/apps/self-service/src/reducers/autoSave.js
new file mode 100644
index 000000000..8c796b143
--- /dev/null
+++ b/src/apps/self-service/src/reducers/autoSave.js
@@ -0,0 +1,38 @@
+/**
+ * `progress` reducer
+ */
+
+import { ACTIONS } from "../config";
+
+const initialState = {
+ triggered: false,
+ cookieCleared: false,
+ initErrored: null,
+ forced: false,
+};
+
+const autoSaveReducer = (state = initialState, action) => {
+ switch (action.type) {
+ case ACTIONS.AUTO_SAVE.TRIGGER_AUTO_SAVE:
+ return {
+ ...state,
+ triggered: action.payload.isTriggered,
+ forced: action.payload.isForced,
+ isLoggedIn: action.payload.isLoggedIn,
+ };
+ case ACTIONS.AUTO_SAVE.COOKIE_CLEARED:
+ return {
+ ...state,
+ cookieCleared: action.payload,
+ };
+ case ACTIONS.AUTO_SAVE.INIT_ERRORED:
+ return {
+ ...state,
+ initErrored: action.payload,
+ };
+ default:
+ return state;
+ }
+};
+
+export default autoSaveReducer;
diff --git a/src/apps/self-service/src/reducers/challenge.js b/src/apps/self-service/src/reducers/challenge.js
new file mode 100644
index 000000000..8869f9981
--- /dev/null
+++ b/src/apps/self-service/src/reducers/challenge.js
@@ -0,0 +1,23 @@
+/**
+ * `progress` reducer
+ */
+
+import { ACTIONS } from "../config";
+
+const initialState = {};
+
+const challengeReducer = (state = initialState, action) => {
+ switch (action.type) {
+ case ACTIONS.CHALLENGE.GET_CHALLENGE:
+ return {
+ ...state,
+ ...action.payload,
+ };
+ case ACTIONS.FORM.RESET_INTAKE_FORM:
+ return {};
+ default:
+ return state;
+ }
+};
+
+export default challengeReducer;
diff --git a/src/apps/self-service/src/reducers/form.js b/src/apps/self-service/src/reducers/form.js
new file mode 100644
index 000000000..464725a17
--- /dev/null
+++ b/src/apps/self-service/src/reducers/form.js
@@ -0,0 +1,106 @@
+/**
+ * `form` reducer
+ */
+import moment from "moment";
+import "moment-timezone";
+import _ from "lodash";
+
+
+import { ACTIONS, TIME_ZONE } from "../config";
+
+const initialState = {
+ pagePrice: 0,
+ workType: null,
+ basicInfo: null,
+ websitePurpose: null,
+ pageDetails: {
+ pages: [
+ {
+ pageName: "",
+ pageDetails: "",
+ },
+ ],
+ },
+ branding: null,
+ reviewConfirmed: false,
+ updatedAt: "",
+ showSupportModal: false,
+};
+
+const formReducer = (state = initialState, action) => {
+ const updatedAt = moment().tz(TIME_ZONE).format();
+ switch (action.type) {
+ case ACTIONS.FORM.SAVE_FORM:
+ return {
+ ...state,
+ ...action.payload,
+ updatedAt,
+ };
+ case ACTIONS.CHALLENGE.GET_CHALLENGE:
+ const metaData = action.payload?.metadata
+ ? _.find(action.payload.metadata, (m) => m.name === "intake-form")
+ : undefined;
+ return {
+ ...state,
+ ..._.get(JSON.parse(_.get(metaData, "value", "{}")), "form", {}),
+ };
+ case ACTIONS.FORM.RESET_INTAKE_FORM:
+ return {
+ ...state,
+ ...initialState,
+ updatedAt,
+ };
+ case ACTIONS.FORM.SAVE_WORK_TYPE:
+ return {
+ ...state,
+ workType: {
+ ...state.workType,
+ ...action.payload,
+ },
+ updatedAt,
+ };
+ case ACTIONS.FORM.REVIEW_CONFIRMED:
+ return {
+ ...state,
+ reviewConfirmed: action.payload,
+ updatedAt,
+ };
+ case ACTIONS.FORM.SAVE_BASIC_INFO:
+ return {
+ ...state,
+ basicInfo: action.payload,
+ updatedAt,
+ };
+ case ACTIONS.FORM.SAVE_WEBSITE_PURPOSE:
+ return {
+ ...state,
+ websitePurpose: action.payload,
+ updatedAt,
+ };
+ case ACTIONS.FORM.SAVE_PAGE_DETAILS:
+ return {
+ ...state,
+ pageDetails: action.payload,
+ updatedAt,
+ };
+ case ACTIONS.FORM.SAVE_BRANDING:
+ return {
+ ...state,
+ branding: action.payload,
+ updatedAt,
+ };
+ case ACTIONS.FORM.TOGGLE_SUPPORT_MODAL:
+ // if we don't have a payload, just toggle the modal
+ // otherwise, override the toggle w/the payload
+ const showSupportModal =
+ action.payload === null ? !state.showSupportModal : action.payload;
+ return {
+ ...state,
+ showSupportModal,
+ };
+ default:
+ return state;
+ }
+};
+
+export default formReducer;
diff --git a/src/reducers/index.js b/src/apps/self-service/src/reducers/index.js
similarity index 100%
rename from src/reducers/index.js
rename to src/apps/self-service/src/reducers/index.js
diff --git a/src/reducers/myWork.js b/src/apps/self-service/src/reducers/myWork.js
similarity index 93%
rename from src/reducers/myWork.js
rename to src/apps/self-service/src/reducers/myWork.js
index 61b3153cc..c9a77bc86 100644
--- a/src/reducers/myWork.js
+++ b/src/apps/self-service/src/reducers/myWork.js
@@ -1,4 +1,4 @@
-import { ACTIONS as ALL_ACTIONS } from "../constants";
+import { ACTIONS as ALL_ACTIONS } from "../config";
const ACTIONS = ALL_ACTIONS.MY_WORK;
diff --git a/src/apps/self-service/src/reducers/profile.js b/src/apps/self-service/src/reducers/profile.js
new file mode 100644
index 000000000..0b995ddfb
--- /dev/null
+++ b/src/apps/self-service/src/reducers/profile.js
@@ -0,0 +1,45 @@
+/**
+ * `profile` reducer
+ */
+
+import { ACTIONS } from "../config";
+
+const initialState = {
+ email: "",
+ firstName: "",
+ lastName: "",
+ handle: "",
+ isLoading: true,
+};
+
+const profileReducer = (state = initialState, action) => {
+ switch (action.type) {
+ case ACTIONS.PROFILE.GET_PROFILE:
+ return {
+ ...state,
+ ...action.payload,
+ isLoading: false,
+ };
+ case ACTIONS.PROFILE.UPDATE_BASIC_INFO_PENDING:
+ return {
+ ...state,
+ isLoading: true,
+ };
+ case ACTIONS.PROFILE.UPDATE_BASIC_INFO_SUCCESS:
+ return {
+ ...state,
+ firstName: action.payload.firstName,
+ lastName: action.payload.lastName,
+ isLoading: false,
+ };
+ case ACTIONS.PROFILE.UPDATE_BASIC_INFO_ERROR:
+ return {
+ ...state,
+ isLoading: false,
+ };
+ default:
+ return state;
+ }
+};
+
+export default profileReducer;
diff --git a/src/apps/self-service/src/reducers/progress.js b/src/apps/self-service/src/reducers/progress.js
new file mode 100644
index 000000000..3c72f4afb
--- /dev/null
+++ b/src/apps/self-service/src/reducers/progress.js
@@ -0,0 +1,32 @@
+import _ from "lodash";
+
+/**
+ * `progress` reducer
+ */
+import { ACTIONS } from "../config";
+const initialState = {
+ currentStep: 0,
+};
+
+const progressReducer = (state = initialState, action) => {
+ switch (action.type) {
+ case ACTIONS.PROGRESS.SET_ITEM:
+ return {
+ ...state,
+ currentStep: action.payload,
+ };
+ case ACTIONS.CHALLENGE.GET_CHALLENGE:
+ const metaData = action.payload?.metadata
+ ? _.find(action.payload.metadata, (m) => m.name === "intake-form")
+ : undefined;
+ if (!metaData) return state;
+ return {
+ ...state,
+ ..._.get(JSON.parse(_.get(metaData, "value", "{}")), "progress", {}),
+ };
+ default:
+ return state;
+ }
+};
+
+export default progressReducer;
diff --git a/src/apps/self-service/src/reducers/work.js b/src/apps/self-service/src/reducers/work.js
new file mode 100644
index 000000000..ea03bf738
--- /dev/null
+++ b/src/apps/self-service/src/reducers/work.js
@@ -0,0 +1,122 @@
+/**
+ * Work item reducer
+ */
+import { ACTIONS } from "../config";
+
+const initialState = {
+ work: null,
+ workItem: {},
+ error: null,
+ isLoadingWork: false,
+ isLoadingSolutions: false,
+ isSavingSurveyDone: false,
+};
+
+const workReducer = (state = initialState, action) => {
+ switch (action.type) {
+ case ACTIONS.WORK.GET_WORK_PENDING:
+ return {
+ ...state,
+ work: null,
+ workItem: {},
+ isLoadingWork: true,
+ error: null,
+ };
+ case ACTIONS.WORK.GET_WORK_SUCCESS:
+ return {
+ ...state,
+ work: action.payload,
+ isLoadingWork: false,
+ };
+ case ACTIONS.WORK.GET_WORK_ERROR:
+ return {
+ ...state,
+ error: action.payload,
+ isLoadingWork: false,
+ };
+ case ACTIONS.WORK.GET_SUMMARY:
+ return {
+ ...state,
+ workItem: {
+ ...state.workItem,
+ summary: action.payload,
+ },
+ };
+ case ACTIONS.WORK.GET_DETAILS:
+ return {
+ ...state,
+ workItem: {
+ ...state.workItem,
+ details: action.payload,
+ },
+ };
+ case ACTIONS.WORK.GET_SOLUTIONS_PENDING:
+ return {
+ ...state,
+ isLoadingSolutions: true,
+ error: null,
+ workItem: {
+ ...state.workItem,
+ solutions: undefined,
+ },
+ };
+ case ACTIONS.WORK.GET_SOLUTIONS_SUCCESS:
+ return {
+ ...state,
+ isLoadingSolutions: false,
+ workItem: {
+ ...state.workItem,
+ solutions: action.payload,
+ },
+ };
+ case ACTIONS.WORK.GET_SOLUTIONS_ERROR:
+ return {
+ ...state,
+ isLoadingSolutions: false,
+ error: action.payload,
+ };
+ case ACTIONS.WORK.GET_SOLUTIONS_COUNT_PENDING:
+ return {
+ ...state,
+ isLoadingSolutions: true,
+ error: null,
+ workItem: {
+ ...state.workItem,
+ solutionsCount: undefined,
+ },
+ };
+ case ACTIONS.WORK.GET_SOLUTIONS_COUNT_SUCCESS:
+ return {
+ ...state,
+ isLoadingSolutions: false,
+ workItem: {
+ ...state.workItem,
+ solutionsCount: action.payload,
+ },
+ };
+ case ACTIONS.WORK.GET_SOLUTIONS_COUNT_ERROR:
+ return {
+ ...state,
+ isLoadingSolutions: false,
+ error: action.payload,
+ };
+ case ACTIONS.WORK.SAVE_SURVEY_SUCCESS:
+ return {
+ ...state,
+ isSavingSurveyDone: true,
+ work: {
+ ...state.work,
+ metadata: action.payload.metadata,
+ },
+ };
+ case ACTIONS.WORK.SET_IS_SAVING_SURVEY_DONE:
+ return {
+ ...state,
+ isSavingSurveyDone: action.payload,
+ };
+ default:
+ return state;
+ }
+};
+
+export default workReducer;
diff --git a/src/apps/self-service/src/routes/legacy/index.js b/src/apps/self-service/src/routes/legacy/index.js
new file mode 100644
index 000000000..208dd5d57
--- /dev/null
+++ b/src/apps/self-service/src/routes/legacy/index.js
@@ -0,0 +1 @@
+export * from './website-design';
\ No newline at end of file
diff --git a/src/apps/self-service/src/routes/legacy/website-design/WebsiteDesignLegacy.jsx b/src/apps/self-service/src/routes/legacy/website-design/WebsiteDesignLegacy.jsx
new file mode 100644
index 000000000..847f0bff1
--- /dev/null
+++ b/src/apps/self-service/src/routes/legacy/website-design/WebsiteDesignLegacy.jsx
@@ -0,0 +1,71 @@
+import { Route, Routes } from "react-router-dom";
+import { useContext } from "react";
+
+import { profileContext } from "~/libs/core";
+
+import { Review, BasicInfo, PageDetails, WebsitePurpose, Branding } from "../../../containers/legacy";
+import { WebsiteDesignBannerLegacy } from "../../../components/legacy";
+import { WorkLoginPrompt } from "../../work-login-prompt";
+import { ReactComponent as WebsiteDesignIcon} from "../../../assets/images/website-design.svg";
+import { LoadingSpinner } from "~/libs/ui";
+
+export default function WebsiteDesignLegacy() {
+ const { profile, initialized } = useContext(profileContext);
+ const isLoggedIn = !!profile;
+
+ function renderRoutes() {
+ return (
+
+
+ )
+ }
+
+ return (
+ <>
+ >] = useState(true)
+ const { initialized, isLoggedIn }: ProfileContextData = useContext(profileContext)
+ const navigate: NavigateFunction = useNavigate()
+
+ useEffect(() => {
+ if (isLoggedIn) {
+ navigate(workDashboardRoute)
+ } else if (initialized) {
+ setLoading(false)
+ }
+ }, [isLoggedIn, initialized, navigate])
+
+ if (isLoading) {
+ return
+
+ )
+}
+
+export default NotLoggedIn
diff --git a/src/apps/self-service/src/routes/not-logged-in/index.ts b/src/apps/self-service/src/routes/not-logged-in/index.ts
new file mode 100644
index 000000000..b68db7e48
--- /dev/null
+++ b/src/apps/self-service/src/routes/not-logged-in/index.ts
@@ -0,0 +1 @@
+export { default as NotLoggedIn } from './NotLoggedIn'
diff --git a/src-ts/tools/work/work-not-logged-in/welcome.png b/src/apps/self-service/src/routes/not-logged-in/welcome.png
similarity index 100%
rename from src-ts/tools/work/work-not-logged-in/welcome.png
rename to src/apps/self-service/src/routes/not-logged-in/welcome.png
diff --git a/src/apps/self-service/src/routes/products/data-advisory/DataAdvisory.jsx b/src/apps/self-service/src/routes/products/data-advisory/DataAdvisory.jsx
new file mode 100644
index 000000000..f47b787a7
--- /dev/null
+++ b/src/apps/self-service/src/routes/products/data-advisory/DataAdvisory.jsx
@@ -0,0 +1,76 @@
+import { useContext } from "react";
+import { Route, Routes } from "react-router-dom";
+
+import { profileContext } from "~/libs/core";
+
+import { ReactComponent as DataAdvisoryIcon } from "../../../assets/images/data-advisory-icon.svg";
+import { BasicInfo, Review } from "../../../containers/products";
+import { WorkLoginPrompt } from "../../work-login-prompt";
+import { webWorkTypes, SIGN_IN_URL, selfServiceRootRoute } from "../../../config";
+import { FeaturedWorkTypeBanner, HelpBanner } from "../../../components/banners";
+import { WorkType } from "../../../lib";
+
+export default function DataAdvisory() {
+ const { profile } = useContext(profileContext);
+ const isLoggedIn = !!profile;
+
+ const dataAdvisory = webWorkTypes.find(
+ (workType) => workType.type === WorkType.problem
+ );
+
+ const { title, helperBannerTitle, helperBannerContent } =
+ dataAdvisory;
+
+ return (
+
+
+
+ {helperBannerContent}
+
+ }
+ previousPageUrl={`${selfServiceRootRoute}/new/data-advisory/basic-info`}
+ nextPageUrl={
+ isLoggedIn
+ ? `${selfServiceRootRoute}/new/data-advisory/thank-you`
+ : SIGN_IN_URL
+ }
+ icon={
+ );
+}
diff --git a/src/apps/self-service/src/routes/products/data-advisory/index.js b/src/apps/self-service/src/routes/products/data-advisory/index.js
new file mode 100644
index 000000000..d9ac66805
--- /dev/null
+++ b/src/apps/self-service/src/routes/products/data-advisory/index.js
@@ -0,0 +1 @@
+export { default as DataAdvisory } from './DataAdvisory'
diff --git a/src/apps/self-service/src/routes/products/data-exploration/DataExploration.jsx b/src/apps/self-service/src/routes/products/data-exploration/DataExploration.jsx
new file mode 100644
index 000000000..92007904b
--- /dev/null
+++ b/src/apps/self-service/src/routes/products/data-exploration/DataExploration.jsx
@@ -0,0 +1,77 @@
+import { useContext } from "react";
+import { Routes, Route } from "react-router-dom";
+
+import { profileContext } from "~/libs/core";
+
+import { SIGN_IN_URL, selfServiceRootRoute, webWorkTypes } from "../../../config";
+import { ReactComponent as DataExplorationIcon } from "../../../assets/images/data-exploration-icon.svg";
+import { Review } from "../../../containers/products";
+import { BasicInfo } from "../../../containers/products";
+import { FeaturedWorkTypeBanner, HelpBanner } from "../../../components/banners";
+import { WorkType } from "../../../lib";
+import { WorkLoginPrompt } from "../../work-login-prompt";
+
+export default function DataExploration() {
+ const { profile } = useContext(profileContext);
+ const isLoggedIn = !!profile;
+
+ const dataExploration = webWorkTypes.find(
+ (workType) => workType.type === WorkType.data
+ );
+
+ const { title, helperBannerTitle, helperBannerContent } =
+ dataExploration;
+
+ return (
+
+
+
+ {helperBannerContent}
+
+ }
+ previousPageUrl={`${selfServiceRootRoute}/new/data-exploration/basic-info`}
+ nextPageUrl={
+ isLoggedIn
+ ? `${selfServiceRootRoute}/new/data-exploration/thank-you`
+ : SIGN_IN_URL
+ }
+ icon={
+ );
+}
diff --git a/src/apps/self-service/src/routes/products/data-exploration/index.js b/src/apps/self-service/src/routes/products/data-exploration/index.js
new file mode 100644
index 000000000..1267e0ead
--- /dev/null
+++ b/src/apps/self-service/src/routes/products/data-exploration/index.js
@@ -0,0 +1 @@
+export { default as DataExploration } from './DataExploration';
diff --git a/src/apps/self-service/src/routes/products/find-me-data/FindMeData.jsx b/src/apps/self-service/src/routes/products/find-me-data/FindMeData.jsx
new file mode 100644
index 000000000..fdfcfd638
--- /dev/null
+++ b/src/apps/self-service/src/routes/products/find-me-data/FindMeData.jsx
@@ -0,0 +1,76 @@
+import { useContext } from "react";
+import { Route, Routes } from "react-router-dom";
+
+import { profileContext } from "~/libs/core";
+
+import { ReactComponent as FindMeDataIcon } from "../../../assets/images/find-me-data-icon.svg";
+import { SIGN_IN_URL, selfServiceRootRoute, webWorkTypes } from "../../../config";
+import { WorkType } from "../../../lib";
+import { BasicInfo, Review } from "../../../containers/products";
+import { WorkLoginPrompt } from "../../work-login-prompt";
+import { FeaturedWorkTypeBanner, HelpBanner } from "../../../components/banners";
+
+export default function FindMeData() {
+ const { profile } = useContext(profileContext);
+ const isLoggedIn = !!profile;
+
+ const findMeData = webWorkTypes.find(
+ (workType) => workType.type === WorkType.findData
+ );
+
+ const { title, helperBannerTitle, helperBannerContent } =
+ findMeData;
+
+ return (
+
+
+
+ {helperBannerContent}
+
+ }
+ previousPageUrl={`${selfServiceRootRoute}/new/find-me-data/basic-info`}
+ nextPageUrl={
+ isLoggedIn
+ ? `${selfServiceRootRoute}/new/find-me-data/thank-you`
+ : SIGN_IN_URL
+ }
+ icon={
+ );
+}
diff --git a/src/apps/self-service/src/routes/products/find-me-data/index.js b/src/apps/self-service/src/routes/products/find-me-data/index.js
new file mode 100644
index 000000000..09ca3ffca
--- /dev/null
+++ b/src/apps/self-service/src/routes/products/find-me-data/index.js
@@ -0,0 +1 @@
+export { default as FindMeData } from './FindMeData';
diff --git a/src/apps/self-service/src/routes/products/index.js b/src/apps/self-service/src/routes/products/index.js
new file mode 100644
index 000000000..97ced47e3
--- /dev/null
+++ b/src/apps/self-service/src/routes/products/index.js
@@ -0,0 +1,4 @@
+export * from './data-advisory';
+export * from './data-exploration';
+export * from './find-me-data';
+export * from './website-design';
diff --git a/src/apps/self-service/src/routes/products/website-design/WebsiteDesign.jsx b/src/apps/self-service/src/routes/products/website-design/WebsiteDesign.jsx
new file mode 100644
index 000000000..d47fcb49e
--- /dev/null
+++ b/src/apps/self-service/src/routes/products/website-design/WebsiteDesign.jsx
@@ -0,0 +1,76 @@
+import { useContext } from "react";
+import { Route, Routes } from "react-router-dom";
+
+import { profileContext } from "~/libs/core";
+
+import { ReactComponent as DataExplorationIcon } from "../../../assets/images/data-exploration-icon.svg";
+import { SIGN_IN_URL, selfServiceRootRoute, webWorkTypes } from "../../../config";
+import { WorkType } from "../../../lib";
+import { BasicInfo, Review } from "../../../containers/products";
+import { WorkLoginPrompt } from "../../work-login-prompt";
+import { FeaturedWorkTypeBanner, HelpBanner } from "../../../components/banners";
+
+export default function WebsiteDesign() {
+ const { profile } = useContext(profileContext);
+ const isLoggedIn = !!profile;
+
+ const websiteDesign = webWorkTypes.find(
+ (workType) => workType.type === WorkType.design
+ );
+
+ const { title, helperBannerTitle, helperBannerContent } =
+ websiteDesign;
+
+ return (
+
+
+
+ {helperBannerContent}
+
+ }
+ previousPageUrl={`${selfServiceRootRoute}/new/website-design/basic-info`}
+ nextPageUrl={
+ isLoggedIn
+ ? `${selfServiceRootRoute}/new/website-design/thank-you`
+ : SIGN_IN_URL
+ }
+ icon={
+ );
+}
diff --git a/src/apps/self-service/src/routes/products/website-design/index.js b/src/apps/self-service/src/routes/products/website-design/index.js
new file mode 100644
index 000000000..3f4e445e5
--- /dev/null
+++ b/src/apps/self-service/src/routes/products/website-design/index.js
@@ -0,0 +1 @@
+export { default as WebsiteDesign } from './WebsiteDesign';
diff --git a/src/apps/self-service/src/routes/self-service-intake/SelfServiceIntake.tsx b/src/apps/self-service/src/routes/self-service-intake/SelfServiceIntake.tsx
new file mode 100644
index 000000000..f3c0e9b79
--- /dev/null
+++ b/src/apps/self-service/src/routes/self-service-intake/SelfServiceIntake.tsx
@@ -0,0 +1,42 @@
+import { FC, useContext } from 'react'
+import { Provider } from 'react-redux'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { ContentLayout, LoadingSpinner } from '~/libs/ui'
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { WorkProvider } from '../../lib'
+import { intakeFormsRouteId } from '../../self-service.routes'
+import store from '../../store'
+
+import { useLoadUnfinishedWork } from './use-load-unfinished-work'
+
+const SelfServiceIntake: FC<{}> = () => {
+ const { isLoading }: { isLoading: boolean } = useLoadUnfinishedWork()
+ const { getChildRoutes }: RouterContextData = useContext(routerContext)
+
+ return (
+ <>
+
+ {getChildRoutes(intakeFormsRouteId)}
+
+ )}
+
+ )
+}
+
+const SelfServiceIntakeWrapper: FC<{}> = () => (
+
+
+
+
+
+
+)
+
+export default SelfServiceIntakeWrapper
diff --git a/src/apps/self-service/src/routes/self-service-intake/index.ts b/src/apps/self-service/src/routes/self-service-intake/index.ts
new file mode 100644
index 000000000..f83906c95
--- /dev/null
+++ b/src/apps/self-service/src/routes/self-service-intake/index.ts
@@ -0,0 +1,2 @@
+export { default as SelfServiceIntake } from './SelfServiceIntake'
+export * from '../../containers/intake-forms'
diff --git a/src/apps/self-service/src/routes/self-service-intake/use-load-unfinished-work.jsx b/src/apps/self-service/src/routes/self-service-intake/use-load-unfinished-work.jsx
new file mode 100644
index 000000000..fedc0d652
--- /dev/null
+++ b/src/apps/self-service/src/routes/self-service-intake/use-load-unfinished-work.jsx
@@ -0,0 +1,155 @@
+import { useState, useContext, useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { useLocation, useNavigate } from "react-router-dom";
+import _ from "lodash";
+
+import { profileContext } from "~/libs/core";
+
+import { triggerAutoSave, autoSaveInitErrored } from "../../actions/autoSave";
+import { getChallenge } from "../../actions/challenge";
+import { saveForm } from "../../actions/form";
+import { setProgressItem } from "../../actions/progress";
+import { bugHuntRoute, MAX_COMPLETED_STEP } from "../../config";
+import { WorkType } from "../../lib";
+import { getIntakeFormChallenges } from "../../services/challenge";
+import { setCookie, loadChallengeId, cacheChallengeId, loadSavedFormCookie } from "../../utils/autoSaveBeforeLogin";
+
+import { INTAKE_FORM_ROUTES as DATA_EXPLORATION_INTAKE_FORM_ROUTES } from "../../config/constants/products/data-exploration";
+import { INTAKE_FORM_ROUTES as FIND_ME_DATA_INTAKE_FORM_ROUTES } from "../../config/constants/products/find-me-data";
+import { INTAKE_FORM_ROUTES as DATA_ADVISORY_INTAKE_FORM_ROUTES } from "../../config/constants/products/data-advisory";
+import { INTAKE_FORM_ROUTES as WEBSITE_DESIGN_INTAKE_FORM_ROUTES } from "../../config/constants/products/website-design";
+import { INTAKE_FORM_ROUTES as WEBSITE_DESIGN_LEGACY_INTAKE_FORM_ROUTES } from "../../config/constants/products/website-design-legacy";
+
+export const useLoadUnfinishedWork = () => {
+
+
+ const dispatch = useDispatch();
+ const location = useLocation();
+ const [isLoading, setIsLoading] = useState(false);
+ const navigate = useNavigate()
+
+ const {
+ isLoggedIn,
+ profile,
+ } = useContext(profileContext)
+
+ const onReload = (event) => {
+ if (isLoggedIn) {
+ event.preventDefault();
+ event.returnValue = "";
+ }
+ dispatch(triggerAutoSave(true, isLoggedIn));
+ };
+
+ useEffect(() => {
+ setIsLoading(true);
+ setCookie(MAX_COMPLETED_STEP, "", -1);
+ setUpAutoSave()
+ .then(() => {
+ setIsLoading(false);
+ })
+ .catch((e) => {
+ dispatch(autoSaveInitErrored(e));
+ });
+
+ window.addEventListener("beforeunload", onReload);
+ return () => {
+ window.removeEventListener("beforeunload", onReload);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const goToUnfinishedStep = (currentStep, workType) => {
+ if (currentStep - 1 >= 0) {
+ switch (workType) {
+ case WorkType.designLegacy:
+ navigate(WEBSITE_DESIGN_LEGACY_INTAKE_FORM_ROUTES[currentStep - 1]);
+ break;
+ case WorkType.data:
+ navigate(DATA_EXPLORATION_INTAKE_FORM_ROUTES[currentStep - 1]);
+ break;
+ case WorkType.findData:
+ navigate(FIND_ME_DATA_INTAKE_FORM_ROUTES[currentStep - 1]);
+ break;
+ case WorkType.problem:
+ navigate(DATA_ADVISORY_INTAKE_FORM_ROUTES[currentStep - 1]);
+ break;
+ case WorkType.design:
+ navigate(WEBSITE_DESIGN_INTAKE_FORM_ROUTES[currentStep - 1]);
+ break;
+ default:
+ return;
+ }
+ }
+ };
+
+ const setUpAutoSave = async () => {
+ if (!!profile) {
+ await handleAutoSaveLoggedIn(profile.handle);
+ } else {
+ handleAutoSavedLoggedOut();
+ }
+ return;
+ };
+
+ const handleAutoSaveLoggedIn = async (handle) => {
+ const challengeDetail = await receiveChallengeDetail(handle);
+ const dataToSync = await getSavedDataAfterLoggedIn(challengeDetail);
+ syncSavedData(dataToSync);
+ };
+
+ const receiveChallengeDetail = async (handle) => {
+ const challengeId = loadChallengeId();
+ if (!challengeId) return undefined;
+ return getIntakeFormChallenges(handle, challengeId)
+ .then((challengeDetail) => {
+ const savedChallenge = challengeDetail
+ ? _.find(challengeDetail, (c) => c.status === "New")
+ : undefined;
+ if (savedChallenge) {
+ dispatch(getChallenge(savedChallenge));
+ cacheChallengeId(savedChallenge.id);
+ }
+ return savedChallenge;
+ })
+ .catch((e) => {
+ dispatch(autoSaveInitErrored(e));
+ });
+ };
+
+ const getSavedDataAfterLoggedIn = async (challengeDetail) => {
+ const savedCookie = loadSavedFormCookie();
+ return dataSyncWithoutCookie(challengeDetail) || savedCookie || {};
+ };
+
+ const dataSyncWithoutCookie = (challengeDetail) => {
+ const metaData = challengeDetail?.metadata;
+ const savedForm = metaData
+ ? _.find(metaData, (m) => m.name === "intake-form")
+ : {};
+ return _.isString(savedForm?.value)
+ ? JSON.parse(savedForm?.value)
+ : undefined;
+ };
+
+ const syncSavedData = (savedData) => {
+ const isBugHuntRoute = location.pathname.indexOf(`/${bugHuntRoute}`) > -1
+ if (!savedData || isBugHuntRoute) return;
+ const { form, progress } = savedData;
+ if (form) dispatch(saveForm(form));
+ if (progress?.currentStep) {
+ dispatch(setProgressItem(progress.currentStep));
+ goToUnfinishedStep(
+ progress.currentStep,
+ _.get(form, "workType.selectedWorkType")
+ );
+ }
+ };
+
+ const handleAutoSavedLoggedOut = () => {
+ const savedFormCookie = loadSavedFormCookie();
+ syncSavedData(savedFormCookie);
+ };
+
+ return { isLoading }
+}
diff --git a/src/apps/self-service/src/routes/self-service-my-work/SelfServiceMyWork.tsx b/src/apps/self-service/src/routes/self-service-my-work/SelfServiceMyWork.tsx
new file mode 100644
index 000000000..f558061a0
--- /dev/null
+++ b/src/apps/self-service/src/routes/self-service-my-work/SelfServiceMyWork.tsx
@@ -0,0 +1,27 @@
+import { FC, useContext } from 'react'
+import { Provider } from 'react-redux'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+import '~/libs/ui/lib/styles/index.scss'
+
+import { WorkProvider } from '../../lib'
+import { workDashboardRouteId } from '../../self-service.routes'
+import store from '../../store'
+
+const SelfServiceMyWork: FC<{}> = () => {
+ const { getChildRoutes }: RouterContextData = useContext(routerContext)
+
+ return (
+
+
+
+ {getChildRoutes(workDashboardRouteId)}
+
+
+
+ )
+}
+
+export default SelfServiceMyWork
diff --git a/src/apps/self-service/src/routes/self-service-my-work/index.ts b/src/apps/self-service/src/routes/self-service-my-work/index.ts
new file mode 100644
index 000000000..423713e57
--- /dev/null
+++ b/src/apps/self-service/src/routes/self-service-my-work/index.ts
@@ -0,0 +1 @@
+export { default as SelfServiceMyWork } from './SelfServiceMyWork'
diff --git a/src/apps/self-service/src/routes/self-service-work-item/WorkItem.jsx b/src/apps/self-service/src/routes/self-service-work-item/WorkItem.jsx
new file mode 100644
index 000000000..00d8f58e5
--- /dev/null
+++ b/src/apps/self-service/src/routes/self-service-work-item/WorkItem.jsx
@@ -0,0 +1,348 @@
+import {
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from "react";
+import _ from "lodash";
+import PT from "prop-types";
+import { useNavigate, useParams } from "react-router-dom";
+import { connect } from "react-redux";
+
+import { profileContext } from "~/libs/core";
+import { Breadcrumb, LoadingSpinner, TabsNavbar } from "~/libs/ui";
+
+import { ROUTES } from "../../config";
+import workUtil from "../../utils/work";
+import {
+ getWork,
+ getSummary,
+ getDetails,
+ getSolutions,
+ getSolutionsCount,
+ downloadSolution,
+ saveSurvey,
+ setIsSavingSurveyDone,
+} from "../../actions/work";
+import { toggleSupportModal } from "../../actions/form";
+import { ChallengeMetadataName, messageGetUnreadCountAsync, workFactoryGetStatus } from "../../lib";
+import { PageContent } from "../../components/page-elements";
+import {
+ WorkDetailDetails,
+ WorkDetailHeader,
+ WorkDetailSolutions,
+ WorkDetailSummary,
+} from "../../components/work-details";
+import { WorkStatusItem } from "../../components/work-status-item";
+import { Forum } from "../../containers/forum";
+import { WorkFeedback } from "../../components/work-feedback";
+
+
+import styles from "./styles.module.scss";
+
+ /**
+ * Work Item Page
+ */
+const WorkItem = ({
+ work,
+ workItem,
+ isLoadingWork,
+ isLoadingSolutions,
+ isSavingSurveyDone,
+ getWork,
+ getSummary,
+ getDetails,
+ getSolutions,
+ getSolutionsCount,
+ downloadSolution,
+ saveSurvey,
+ setIsSavingSurveyDone,
+}) => {
+
+ const { workItemId } = useParams()
+
+ const [selectedTab, setSelectedTab] = useState("summary");
+ const [showSurvey, setShowSurvey] = useState(false);
+ const [messageCount, setMessageCount] = useState(undefined)
+ const { profile } = useContext(profileContext)
+ const navigate = useNavigate()
+
+ const workStatus = !!work
+ ? workFactoryGetStatus(work)
+ : undefined;
+
+ useEffect(() => {
+ getWork(workItemId);
+ }, [workItemId, getWork]);
+
+ const { summary, details, solutions, solutionsCount } = useMemo(
+ () => workItem,
+ [workItem]
+ );
+
+ const isReviewPhaseEnded = useMemo(() => {
+ if (work) {
+ return workUtil.isReviewPhaseEnded(work);
+ }
+ }, [work]);
+
+ useEffect(() => {
+ if (!work) {
+ return;
+ }
+
+ if (profile) {
+ if (work.createdBy !== profile.handle) {
+ navigate(ROUTES.HOME_PAGE);
+ }
+ }
+
+ if (selectedTab === "summary") {
+ if (!summary) {
+ getSummary(work);
+ }
+ } else if (selectedTab === "solutions") {
+ if (!solutions) {
+ isReviewPhaseEnded && getSolutions(work.id);
+ }
+ } else if (selectedTab === "details") {
+ if (!details) {
+ getDetails(work);
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [
+ work,
+ profile,
+ selectedTab,
+ summary,
+ solutions,
+ details,
+ getSummary,
+ getSolutions,
+ getDetails,
+ isReviewPhaseEnded,
+ ]);
+
+ useEffect(() => {
+
+ if (!work) {
+ return;
+ }
+
+ async function getMessageCount() {
+ const messages = await messageGetUnreadCountAsync(work.id, profile.handle)
+ setMessageCount(messages);
+ }
+
+ getMessageCount()
+ .catch(err => console.error(err))
+
+ }, [
+ work,
+ selectedTab,
+ profile,
+ ]);
+
+ useEffect(() => {
+ if (!work) {
+ return;
+ }
+
+ if (isReviewPhaseEnded) {
+ getSolutionsCount(work.id);
+ }
+ }, [isReviewPhaseEnded, getSolutionsCount, work]);
+
+ useEffect(() => {
+ if (isSavingSurveyDone) {
+ getSummary(work);
+ setIsSavingSurveyDone(false);
+ }
+ }, [work, isSavingSurveyDone, setIsSavingSurveyDone, getSummary]);
+
+ // TODO: get routes from a provider
+ const breadcrumb = [
+ {
+ name: "My work",
+ url: ROUTES.DASHBOARD_PAGE,
+ },
+ {
+ name: work?.name,
+ url: "", // this isn't necessary bc it's not a link
+ },
+ ];
+
+ const navTabs = useMemo(
+ () =>
+ [
+ { id: "summary", title: "Summary" },
+ { id: "details", title: "Details" },
+ work &&
+ !workUtil.isMessagesDisabled(work) && {
+ id: "messaging",
+ title: "Messages",
+ badges: [
+ messageCount && {
+ count: messageCount,
+ type: "info",
+ },
+ ].filter(Boolean),
+ },
+ {
+ id: "solutions",
+ title: "Solutions",
+ badges: [
+ isReviewPhaseEnded &&
+ !!solutionsCount && {
+ count: solutionsCount,
+ type: "info",
+ },
+ ].filter(Boolean),
+ },
+ ].filter(Boolean),
+ [
+ work,
+ solutionsCount,
+ isReviewPhaseEnded,
+ messageCount,
+ ]
+ );
+
+ const onTabChange = useCallback((tabId) => {
+ window.history.replaceState(window.history.state, "", `?tab=${tabId}`);
+ setSelectedTab(tabId);
+ }, []);
+
+ function saveFeedback(updatedCustomerFeedback) {
+ const metadata = (work.metadata || []).filter(
+ (item) => item.name !== ChallengeMetadataName.feedback
+ );
+
+ metadata.push({
+ name: ChallengeMetadataName.feedback,
+ value: JSON.stringify(updatedCustomerFeedback),
+ });
+
+ saveSurvey(work.id, metadata);
+ setShowSurvey(false);
+ }
+
+ return (
+ <>
+
+ setShowSurvey(true)}
+ />
+
+ {work && (
+
+
+ setShowSurvey(false)}
+ saveSurvey={saveFeedback}
+ showSurvey={showSurvey}
+ />
+
+ );
+ };
+
+ WorkItem.propTypes = {
+ work: PT.shape(),
+ workItem: PT.shape(),
+ isLoadingWork: PT.bool,
+ isLoadingSolutions: PT.bool,
+ isSavingSurveyDone: PT.bool,
+ getWork: PT.func,
+ getSummary: PT.func,
+ getDetails: PT.func,
+ getSolutions: PT.func,
+ downloadSolution: PT.func,
+ saveSurvey: PT.func,
+ setIsSavingSurveyDone: PT.func,
+ };
+
+ const mapStateToProps = (state) => {
+ const {
+ work,
+ workItem,
+ isLoadingWork,
+ isLoadingSolutions,
+ isSavingSurveyDone,
+ } = state.work;
+
+ return {
+ work,
+ workItem,
+ isLoadingWork,
+ isLoadingSolutions,
+ isSavingSurveyDone,
+ };
+ };
+
+ const mapDispatchToProps = {
+ getWork,
+ getSummary,
+ getDetails,
+ getSolutions,
+ getSolutionsCount,
+ downloadSolution,
+ saveSurvey,
+ setIsSavingSurveyDone,
+ toggleSupportModal,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(WorkItem);
diff --git a/src/apps/self-service/src/routes/self-service-work-item/index.js b/src/apps/self-service/src/routes/self-service-work-item/index.js
new file mode 100644
index 000000000..8342d76d2
--- /dev/null
+++ b/src/apps/self-service/src/routes/self-service-work-item/index.js
@@ -0,0 +1 @@
+export { default as SelfServiceWorkItem } from './WorkItem';
diff --git a/src/apps/self-service/src/routes/self-service-work-item/styles.module.scss b/src/apps/self-service/src/routes/self-service-work-item/styles.module.scss
new file mode 100644
index 000000000..58845df12
--- /dev/null
+++ b/src/apps/self-service/src/routes/self-service-work-item/styles.module.scss
@@ -0,0 +1,58 @@
+@import '@libs/ui/styles/includes';
+@import "../../styles/include";
+
+.pageTitle {
+ @include font-barlow;
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 1;
+ color: $gui-kit-gray-90;
+
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin: 0 0 16px 0;
+}
+
+.message-count {
+ @include font-roboto;
+ font-weight: 700;
+ font-size: 10px;
+ line-height: 12px;
+ color: $tc-white;
+
+ display: inline-block;
+ min-width: 22px;
+ padding: 5px;
+ margin: -5px 0 -2px 4px;
+ text-align: center;
+ vertical-align: middle;
+ background-color: $pastel-red;
+ border-radius: 11px;
+}
+
+.markAsDoneBtn {
+ margin: 16px 0 0 auto;
+}
+
+.tabs-contents {
+ margin-top: 34px;
+}
+
+.status-line {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+
+ margin-top: -8px;
+ margin-bottom: 24px;
+}
+
+.status-label {
+ @include font-roboto;
+ color: $black-60;
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 16px;
+ text-transform: uppercase;
+}
diff --git a/src/apps/self-service/src/routes/work-login-prompt/WorkLoginPrompt.module.scss b/src/apps/self-service/src/routes/work-login-prompt/WorkLoginPrompt.module.scss
new file mode 100644
index 000000000..34e9d228f
--- /dev/null
+++ b/src/apps/self-service/src/routes/work-login-prompt/WorkLoginPrompt.module.scss
@@ -0,0 +1,23 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ align-items: center;
+ flex: 1 1;
+
+ .btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: $sp-10;
+ font-size: $sp-4;
+ line-height: $sp-4;
+
+ .separator {
+ margin-left: $sp-4;
+ margin-right: $sp-4;
+ }
+ }
+}
diff --git a/src/apps/self-service/src/routes/work-login-prompt/WorkLoginPrompt.tsx b/src/apps/self-service/src/routes/work-login-prompt/WorkLoginPrompt.tsx
new file mode 100644
index 000000000..2d187232d
--- /dev/null
+++ b/src/apps/self-service/src/routes/work-login-prompt/WorkLoginPrompt.tsx
@@ -0,0 +1,94 @@
+import { FC, useContext, useEffect } from 'react'
+import { Location, NavigateFunction, useLocation, useNavigate, useParams } from 'react-router-dom'
+
+import {
+ BackArrowIcon,
+ Button,
+ LinkButton,
+ PageDivider,
+} from '~/libs/ui'
+import { authUrlLogin, routerContext, RouterContextData } from '~/libs/core'
+
+import { ROUTES, selfServiceRootRoute } from '../../config'
+import { setProgressItem } from '../../actions/progress'
+
+import styles from './WorkLoginPrompt.module.scss'
+
+interface WorkLoginPromptProps {
+ isLoggedIn?: boolean
+ previousPageUrl: string
+ nextPageUrl?: string
+}
+
+const WorkLoginPrompt: FC = props => {
+
+ const routeData: RouterContextData = useContext(routerContext)
+ const location: Location = useLocation()
+ const navigate: NavigateFunction = useNavigate()
+ const customReturnUrl: string | undefined = useParams().retUrl
+
+ useEffect(() => {
+ if (props.isLoggedIn) {
+ navigate(props.nextPageUrl || ROUTES.DASHBOARD_PAGE)
+ setProgressItem(5)
+ }
+ }, [navigate, props.isLoggedIn, props.nextPageUrl])
+
+ function signUp(): void {
+ const signUpUrl: string = routeData.getSignupUrl(
+ location.pathname,
+ routeData.allRoutes,
+ props.nextPageUrl ?? customReturnUrl,
+ )
+ window.location.href = signUpUrl
+ }
+
+ function onBack(): void {
+ navigate(props.previousPageUrl ?? `${selfServiceRootRoute}/new/website-design-legacy/page-details`)
+ }
+
+ return (
+ <>
+
-
diff --git a/src-ts/tools/work/work-thank-you/index.ts b/src/apps/self-service/src/routes/work-thank-you/index.ts
similarity index 100%
rename from src-ts/tools/work/work-thank-you/index.ts
rename to src/apps/self-service/src/routes/work-thank-you/index.ts
diff --git a/src/apps/self-service/src/self-service.routes.tsx b/src/apps/self-service/src/self-service.routes.tsx
new file mode 100644
index 000000000..982eed320
--- /dev/null
+++ b/src/apps/self-service/src/self-service.routes.tsx
@@ -0,0 +1,176 @@
+/* eslint-disable max-len */
+import { Navigate } from 'react-router-dom'
+
+import { AppSubdomain, EnvironmentConfig, ToolTitle } from '~/config'
+import { lazyLoad, LazyLoadedComponent, PlatformRoute, Rewrite } from '~/libs/core'
+
+import { Work, WorkIntakeFormRoutes, WorkStatus, WorkType } from './lib'
+import { bugHuntRoute, selfServiceRootRoute, selfServiceStartRoute, workDashboardRoute, workRootRoute } from './config'
+
+const SelfServiceMyWork: LazyLoadedComponent = lazyLoad(() => import('./routes/self-service-my-work'), 'SelfServiceMyWork')
+const SelfServiceWorkItem: LazyLoadedComponent = lazyLoad(() => import('./routes/self-service-work-item'), 'SelfServiceWorkItem')
+const NotLoggedIn: LazyLoadedComponent = lazyLoad(() => import('./routes/not-logged-in'), 'NotLoggedIn')
+const WorkDashboard: LazyLoadedComponent = lazyLoad(() => import('./containers/work-dashboard'), 'WorkDashboard')
+const SelfServiceIntake: LazyLoadedComponent = lazyLoad(() => import('./routes/self-service-intake'), 'SelfServiceIntake')
+const BugHuntIntakeForm: LazyLoadedComponent = lazyLoad(() => import('./routes/self-service-intake'), 'BugHuntIntakeForm')
+const Review: LazyLoadedComponent = lazyLoad(() => import('./routes/self-service-intake'), 'Review')
+const SaveAfterLogin: LazyLoadedComponent = lazyLoad(() => import('./routes/self-service-intake'), 'SaveAfterLogin')
+const WorkThankYou: LazyLoadedComponent = lazyLoad(() => import('./routes/work-thank-you'), 'WorkThankYou')
+const WorkLoginPrompt: LazyLoadedComponent = lazyLoad(() => import('./routes/work-login-prompt'), 'WorkLoginPrompt')
+const SelectWorkType: LazyLoadedComponent = lazyLoad(() => import('./containers/select-work-type'), 'SelectWorkType')
+const DataAdvisory: LazyLoadedComponent = lazyLoad(() => import('./routes/products'), 'DataAdvisory')
+const DataExploration: LazyLoadedComponent = lazyLoad(() => import('./routes/products'), 'DataExploration')
+const FindMeData: LazyLoadedComponent = lazyLoad(() => import('./routes/products'), 'FindMeData')
+const WebsiteDesign: LazyLoadedComponent = lazyLoad(() => import('./routes/products'), 'WebsiteDesign')
+const WebsiteDesignLegacy: LazyLoadedComponent = lazyLoad(() => import('./routes/legacy'), 'WebsiteDesignLegacy')
+
+export const toolTitle: string = ToolTitle.selfService
+export const workDashboardRouteId: string = `${toolTitle} Dashboard`
+export const intakeFormsRouteId: string = `${toolTitle} Intake Forms`
+
+export function getWorkDashboardRoute(active: string): string {
+ return `${workDashboardRoute}/${active}`
+}
+
+export function workDetailOrDraftRoute(selectedWork: Work): string {
+
+ // if this isn't a draft, just go to the detail
+ if (selectedWork.status !== WorkStatus.draft) {
+ // TODO: move the tabs definition to src-ts
+ // so we don't have to hard-code the 'solutions' tab id
+ return workDetailRoute(selectedWork.id, selectedWork.status === WorkStatus.ready ? 'solutions' : undefined)
+ }
+
+ // if we have a draft step, go to it
+ if (!!selectedWork.draftStep) {
+ return `${WorkIntakeFormRoutes[selectedWork.type][selectedWork.draftStep]}/${selectedWork.id}`
+ }
+
+ // return the base route
+ return selfServiceStartRoute
+}
+
+export function workDetailRoute(workId: string, tab?: 'solutions' | 'messages'): string {
+ return `${selfServiceRootRoute}/work-items/${workId}${!!tab ? `?tab=${tab}` : ''}`
+}
+
+const oldUrlRedirectRoute: ReadonlyArray
+
+
+
+
+
+
+
+
+
+ );
+};
+
+BasicInfoFormLegacy.defaultProps = {
+ serviceType: "",
+};
+
+BasicInfoFormLegacy.propTypes = {
+ estimate: PT.shape().isRequired,
+ serviceType: PT.string,
+ onFormUpdate: PT.func,
+ formData: PT.shape(),
+};
+
+export default BasicInfoFormLegacy;
diff --git a/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/components/BasicInfoFormLegacy/styles.module.scss b/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/components/BasicInfoFormLegacy/styles.module.scss
new file mode 100644
index 000000000..f53e0d8a1
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/components/BasicInfoFormLegacy/styles.module.scss
@@ -0,0 +1,38 @@
+@import "../../../../../styles/include";
+
+.basicInfoForm {
+ .title {
+ font-weight: 600;
+ color: $grey-text;
+ font-size: 20px;
+ line-height: 20px;
+ text-transform: uppercase;
+ }
+
+ .description {
+ @include font-roboto;
+ font-size: 16px;
+ line-height: 26px;
+ margin-top: 24px;
+ color: $grey-text;
+ }
+
+ .form-row {
+ align-items: flex-start;
+ }
+
+ .formFieldWrapper {
+ margin-top: 48px;
+ }
+}
+
+.infoAlert {
+ @include font-barlow;
+ display: flex;
+ padding: 16px;
+ background: #E0FAF3;
+ border-radius: 8px;
+ margin: 16px 0;
+ font-size: 16px;
+ line-height: 26px;
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/components/DeviceTypes/index.jsx b/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/components/DeviceTypes/index.jsx
new file mode 100644
index 000000000..e1682d8dc
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/components/DeviceTypes/index.jsx
@@ -0,0 +1,120 @@
+/**
+ * Tab element
+ */
+import classNames from "classnames";
+import PT from "prop-types";
+import { useEffect, useState } from "react";
+
+import { currencyFormat } from "../../../../../utils";
+import { ReactComponent as ComputerIconActive } from "../../../../../assets/images/icon-device-computer-active.svg";
+import { ReactComponent as ComputerIcon } from "../../../../../assets/images/icon-device-computer.svg";
+import { ReactComponent as PhoneIconActive } from "../../../../../assets/images/icon-device-phone-active.svg";
+import { ReactComponent as PhoneIcon } from "../../../../../assets/images/icon-device-phone.svg";
+import { ReactComponent as TabletIconActive } from "../../../../../assets/images/icon-device-tablet-active.svg";
+import { ReactComponent as TabletIcon } from "../../../../../assets/images/icon-device-tablet.svg";
+
+import styles from "./styles.module.scss";
+
+const DeviceTypes = ({ numOfPages, selectedOptions, onSelect }) => {
+ const [selectedIndexes, setSelectedIndexes] = useState([]);
+
+ const types = [
+ {
+ title: "Computer",
+ description: "(Included)",
+ icon:
+ Your Website Design project includes up to 5 unique Visual Design
+ solutions. Each solution will match your specified scope and device
+ types. You will receive industry-standard source files to take forward
+ to further design and/or development. Design deliverables will NOT
+ include functional code.
+
+
+
+ PROJECT TITLE
+
+ Give your project a descriptive title. This is what the designers
+ will see when looking for your work.
+
+
+
+
+
+
+ handleInputChange(e.target.name, e.target.value, e.target.value)
+ }
+ />
+
+
+
+ How many pages?
+
+ How many pages (individual screens) would you like designed?
+
+
+
+
+ {
+ const newNumOfPages = _.findIndex(items, (i) => i.value);
+ updateNumOfPages(newNumOfPages + 1);
+ }}
+ size="lg"
+ options={pageListOptions}
+ />
+
+
+ Device Types
+
+ Your project includes designs for computers. You can add tablet and/
+ or mobile device sizes as well. Designing for multiple devices,
+ sizes or types is referred to as Responsive Design.
+
+
+
+
+ {
+ handleInputChange("selectedDevice", selectedOption, option);
+ }}
+ />
+
+
+ {types.map((type, index) => {
+ const isActive = selectedIndexes.includes(index) || type.included;
+ return (
+
+ );
+};
+
+DeviceTypes.defaultProps = {
+ selectedOptions: [0],
+};
+
+DeviceTypes.propTypes = {
+ selectedOptions: PT.arrayOf(PT.number),
+ onSelect: PT.func,
+};
+
+export default DeviceTypes;
diff --git a/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/components/DeviceTypes/styles.module.scss b/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/components/DeviceTypes/styles.module.scss
new file mode 100644
index 000000000..b3921dc73
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/components/DeviceTypes/styles.module.scss
@@ -0,0 +1,60 @@
+@import "../../../../../styles/include";
+
+.device-types {
+
+ display: flex;
+ gap: 32px;
+
+ .device {
+ cursor: pointer;
+
+ .iconWrapper {
+ display: flex;
+ justify-content: center;
+ width: 112px;
+ height: 112px;
+ border-radius: 4px;
+
+ outline: 1px solid $grey-text;
+
+ svg {
+ align-self: center;
+ }
+
+ &.active {
+ background-color: $green1;
+ outline: 0;
+ }
+ }
+
+
+ .title {
+ @include font-roboto;
+ text-align: center;
+ margin-top: 8px;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 26px;
+ color: $black;
+ }
+
+ .subTitle {
+ @include font-roboto;
+ text-align: center;
+ color: $black;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 26px;
+ }
+
+ .subDescription {
+ @include font-roboto;
+ text-align: center;
+ color: $black;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 20px;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/index.jsx b/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/index.jsx
new file mode 100644
index 000000000..d24fa27e3
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/BasicInfoLegacy/index.jsx
@@ -0,0 +1,238 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { connect, useSelector, useDispatch } from "react-redux";
+import _ from "lodash";
+
+import {
+ Breadcrumb,
+ Button,
+ IconOutline,
+ LoadingSpinner,
+ PageDivider,
+} from "~/libs/ui";
+import { ContactSupportModal } from "~/libs/shared";
+
+import { Progress, WebsiteDesignBannerLegacy } from "../../../components/legacy";
+import { PageOptions, ROUTES, selfServiceRootRoute, selfServiceStartRoute } from "../../../config";
+import {
+ saveBasicInfo,
+ toggleSupportModal,
+ savePageDetails,
+ saveWorkType,
+ resetIntakeForm,
+} from "../../../actions/form";
+import { triggerAutoSave } from "../../../actions/autoSave";
+import { setProgressItem } from "../../../actions/progress";
+import {
+ getDynamicPriceAndTimeline,
+ getDynamicPriceAndTimelineEstimate,
+ currencyFormat,
+} from "../../../utils";
+import { PageContent, PageFoot, PageH2 } from "../../../components/page-elements";
+
+import BasicInfoFormLegacy from "./components/BasicInfoFormLegacy";
+import styles from "./styles.module.scss";
+
+/**
+ * Basic Info Page
+ */
+const BasicInfoLegacy = ({
+ saveBasicInfo,
+ setProgressItem,
+ savePageDetails,
+ toggleSupportModal,
+ saveWorkType,
+ isLoggedIn,
+}) => {
+ const [formData, setFormData] = useState({
+ projectTitle: { title: "Project Title", option: "", value: "" },
+ numberOfPages: { title: "How Many Pages?", option: "", value: "" },
+ selectedDevice: {
+ title: "Device Types",
+ option: ["Computer"],
+ value: [0],
+ },
+ });
+ const isFormValid = formData?.projectTitle?.value.length;
+ const dispatch = useDispatch();
+ const navigate = useNavigate()
+ const [isLoading] = useState(false);
+ const workType = useSelector((state) => state.form.workType);
+ const basicInfo = useSelector((state) => state.form.basicInfo);
+ const currentStep = useSelector((state) => state.progress.currentStep);
+ const pageDetails = useSelector((state) => state.form.pageDetails);
+ const showSupportModal = useSelector((state) => state.form.showSupportModal);
+ const challenge = useSelector((state) => state.challenge);
+ const fullState = useSelector((state) => state);
+ const estimate = getDynamicPriceAndTimelineEstimate(fullState);
+
+ const onBack = () => {
+ dispatch(resetIntakeForm(true));
+ navigate(selfServiceStartRoute);
+ };
+
+ const onNext = () => {
+ setProgressItem(3);
+ saveBasicInfo(formData);
+ navigate(`${selfServiceRootRoute}/new/website-design-legacy/website-purpose`);
+ };
+
+ const updateNumOfPages = (newNumOfPages) => {
+ let newPages = pageDetails?.pages || [];
+ if (newNumOfPages < newPages.length) {
+ newPages.length = newNumOfPages;
+ } else if (newNumOfPages !== newPages.length) {
+ for (let i = newPages.length; i < newNumOfPages; i += 1) {
+ newPages.push({
+ pageName: "",
+ pageDetails: "",
+ });
+ }
+ }
+
+ savePageDetails({
+ ...pageDetails,
+ pages: newPages,
+ });
+ setFormData({
+ ...formData,
+ numberOfPages: {
+ title: "How Many Pages?",
+ option: newNumOfPages === 1 ? "1 Screen" : `${newNumOfPages} Screens`,
+ value: newNumOfPages === 1 ? "1 Screen" : `${newNumOfPages} Screens`,
+ },
+ });
+ };
+
+ const [firstMounted, setFirstMounted] = useState(true);
+
+ useEffect(() => {
+ if (!firstMounted) {
+ return;
+ }
+
+ setProgressItem(2);
+
+ if (currentStep === 0) {
+ saveWorkType({
+ selectedWorkType: "Website Design Legacy",
+ selectedWorkTypeDetail: "Website Design Legacy",
+ });
+ dispatch(triggerAutoSave(true, isLoggedIn));
+ }
+
+ if (basicInfo && basicInfo?.projectTitle?.value.length > 0) {
+ setFormData(basicInfo);
+ }
+
+ setFirstMounted(false);
+
+ return () => {
+ dispatch(triggerAutoSave(true, isLoggedIn));
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [basicInfo, currentStep, dispatch, setProgressItem, firstMounted]);
+
+ useEffect(() => {
+ if (formData) {
+ saveBasicInfo(formData);
+ }
+ }, [formData, formData.selectedDevices, saveBasicInfo]);
+
+ const onShowSupportModal = () => {
+ toggleSupportModal(true);
+ };
+ const onHideSupportModal = () => {
+ toggleSupportModal(false);
+ };
+
+ const breadcrumbs = [
+ { url: ROUTES.DASHBOARD_PAGE, name: "My work" },
+ {
+ url: ROUTES.INTAKE_FORM,
+ name: "Start work",
+ onClick: () => {
+ dispatch(resetIntakeForm(true));
+ },
+ },
+ { url: ROUTES.WEBSITE_DESIGN_LEGACY, name: "Basic Info" },
+ ];
+
+ return (
+ <>
+ handleDeviceSelection(index, type)}
+ >
+
+ );
+ })}
+
+ {isActive ? type.iconActive : type.icon}
+
+ {type.title}
+ {type.description}
+ {type.subDescription && (
+ {type.subDescription}
+ )}
+
+ BASIC INFO
+
+
+
+
+
+
+
+
+
+
+
+ setIsPolicyModalOpen(false)}
+ title="STOCK ARTWORK POLICY"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+BrandingForm.defaultProps = {
+ price: 0,
+ serviceType: "",
+};
+
+BrandingForm.propTypes = {
+ estimate: PT.shape().isRequired,
+ price: PT.string,
+ serviceType: PT.string,
+ formData: PT.shape(),
+ setFormData: PT.func,
+};
+
+export default BrandingForm;
diff --git a/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/BrandingForm/styles.module.scss b/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/BrandingForm/styles.module.scss
new file mode 100644
index 000000000..05e3cb745
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/BrandingForm/styles.module.scss
@@ -0,0 +1,82 @@
+@import "../../../../../styles/include";
+
+.brandingForm {
+ .remove-website {
+ color: $green1;
+ cursor: pointer;
+ margin-bottom: 16px;
+ display: flex;
+ justify-content: flex-end;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ .title {
+ font-weight: 600;
+ color: $grey-text;
+ font-size: 20px;
+ line-height: 20px;
+ text-transform: uppercase;
+ }
+
+ .description {
+ @include font-roboto;
+ font-size: 16px;
+ line-height: 26px;
+ margin-top: 24px;
+ color: $grey-text;
+
+ .link {
+ cursor: pointer;
+ color: $link-blue;
+ text-decoration: underline;
+ margin-top: 20px;
+ }
+ }
+
+ .form-row {
+ align-items: flex-start;
+ }
+
+ .formFieldWrapper {
+ margin-top: 48px;
+ }
+
+ .text-area {
+ height: 117px !important;
+ }
+
+ .uploadFonts {
+ margin-top: 32px;
+
+ p {
+ @include font-roboto;
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: 0.8px;
+ line-height: 16px;
+ color: $black;
+ margin-bottom: 8px;
+ }
+ }
+
+ .assets {
+ margin-top: 12px;
+
+ p {
+ @include font-roboto;
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: 0.8px;
+ line-height: 12px;
+ color: $black;
+ margin-bottom: 8px;
+ }
+ }
+
+ .customDeliverable {
+ margin-top: 32px;
+ }
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/FontOptions/index.jsx b/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/FontOptions/index.jsx
new file mode 100644
index 000000000..7845f5c99
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/FontOptions/index.jsx
@@ -0,0 +1,55 @@
+/**
+ * Color Options component
+ */
+import classNames from "classnames";
+import PT from "prop-types";
+import SansSerifIcon from "../../../../../assets/images/icon-sans-serif-font.png";
+import SerifIcon from "../../../../../assets/images/icon-serif-font.png";
+import AnyFont from "../../../../../assets/images/icon-any-font.png";
+
+import styles from "./styles.module.scss";
+
+const FontOptions = ({ selectedFont, onSelect }) => {
+ const fontOptions = [
+ { name: "Any Fonts", image: AnyFont },
+ { name: "Serif", image: SerifIcon },
+ { name: "Sans Serif", image: SansSerifIcon },
+ ];
+
+ return (
+
+ {"STYLE & THEME"}
+
+ What ideas do you have for the overall style and theme of your
+ website? For example, modern and minimalist, bold and colorful, or
+ muted and masculine. Describe the vibe and personality you have in
+ mind. For example: friendly, approachable, upscale, exclusive,
+ high-tech, handcrafted.
+
+
+
+
+
+ handleInputChange(e.target.name, e.target.value)}
+ name="theme"
+ placeholder={"Be as descriptive as possible"}
+ />
+
+
+
+ Inspiration
+
+ Are there other websites you would like our designers to draw
+ inspiration from? List websites you like and describe what you like
+ about them.
+
+
+
+
+ {_.map(_.get(formData, "inspiration", []), (entry, index) => (
+
+
+ {index ? (
+
+
+ handleArrayInputChange(
+ index,
+ "inspiration",
+ e.target.name,
+ e.target.value
+ )
+ }
+ />
+
+
+
+ handleArrayInputChange(
+ index,
+ "inspiration",
+ e.target.name,
+ e.target.value
+ )
+ }
+ name="feedback"
+ placeholder={"Describe what you like about this website"}
+ />
+
+
+ ))}
+
+ removeWebsite(index)}
+ >
+ Remove Website
+
+ ) : null}
+
+ COLORS
+
+ Pick up to three colors you'd like our designers to use. You can
+ also include your specific brand colors.
+
+
+
+
+ {
+ setSelectedColor(index);
+ handleInputChange("colorOption", index, colorName);
+ }}
+ />
+ 0 ? "(optional)" : ""
+ }`}
+ >
+ handleInputChange(e.target.name, e.target.value)}
+ name="specificColor"
+ />
+
+
+
+ FONTS
+
+ Choose your general font style preference. If you have specific
+ fonts that should be used, please share them.
+
+
+
+
+ {
+ if (selectedFont === index) {
+ handleInputChange("fontOption", null, null);
+ } else {
+ setSelectedFont(index);
+ handleInputChange("fontOption", index, fontName);
+ }
+ }}
+ />
+
+
+
+
+
+ handleInputChange(e.target.name, e.target.value)
+ }
+ />
+
+
+
+ handleInputChange(e.target.name, e.target.value)
+ }
+ />
+
+
+
+ I have specific fonts I want to use.
+
+ Share a link to your publicly accessible fonts via drive, dropbox,
+ etc.
+
+ Other Assets (optional)
+
+ Do you have any additional assets that would be helpful to our
+ designers? For example, your current logo, branding direction,
+ photos, illustrations, content, layout ideas, etc.
+
+
+
+
+
+
+
+
+ handleInputChange(e.target.name, e.target.value)
+ }
+ />
+
+
+ + Share a link to your publicly accessible assets via drive, + dropbox, etc. +
+
+ Anything to avoid? (optional)
+
+ If there are any themes, ideas, or specific directions our designers
+ should avoid, please let us know. Be as descriptive as possible.
+
+
+
+
+
+ handleInputChange(e.target.name, e.target.value)}
+ name="anythingToAvoid"
+ placeholder={"Describe themes or ideas to avoid"}
+ />
+
+
+
+ Allow Stock Photos?
+
+ There may be additional costs for designs that use stock images.
+ Our designers will include details for any stock images used, so you
+ can buy them at the end of the project.{" "}
+ setIsPolicyModalOpen(true)}
+ >
+ Learn more about our stock photo policy
+
+ .
+
+
+
+
+ {
+ const selectedOption = items.findIndex((item) => item.value);
+ const foundOption = items.find((item) => item.value);
+ handleInputChange(
+ "allowStockOption",
+ selectedOption,
+ foundOption.label
+ );
+ }}
+ size="lg"
+ options={allowStockOption}
+ />
+
+
+ Final Deliverable SOURCE FILES
+
+ If you want your final deliverables created with a specific design
+ software, please specify.{" "}
+
+
+
+
+ {
+ const selectedOption = items.findIndex((item) => item.value);
+ const foundOption = items.find((item) => item.value);
+ handleInputChange(
+ "selectedDeliverableOption",
+ selectedOption,
+ foundOption.label
+ );
+ }}
+ size="lg"
+ options={deliverableOptions}
+ />
+
+ {formData.selectedDeliverableOption?.value === 4 && (
+
+
+
+
+ handleInputChange(e.target.name, e.target.value)
+ }
+ />
+
+
+ )}
+
+ {fontOptions.map((item, index) => (
+
+ );
+};
+
+FontOptions.defaultProps = {
+ selectedFont: 0,
+};
+
+FontOptions.propTypes = {
+ selectedFont: PT.number,
+ onSelect: PT.func,
+};
+
+export default FontOptions;
diff --git a/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/FontOptions/styles.module.scss b/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/FontOptions/styles.module.scss
new file mode 100644
index 000000000..fcbe4136e
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/FontOptions/styles.module.scss
@@ -0,0 +1,36 @@
+@import "../../../../../styles/include";
+
+.fontOptions {
+ display: flex;
+ gap: 30px;
+
+ .fontWrapper {
+
+ .image {
+ width: 260px;
+ padding: 32px 0;
+ border-radius: 4px;
+ text-align: center;
+ outline: 1px solid $black;
+ cursor: pointer;
+
+ img {
+ object-fit: contain;
+ }
+
+ &.active {
+ outline: 4px solid $green1;
+ }
+ }
+
+ .name {
+ @include font-roboto;
+ font-weight: 700;
+ font-size: 16px;
+ color: $black;
+ line-height: 26px;
+ text-align: center;
+ margin-top: 8px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/PolicyContent/index.jsx b/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/PolicyContent/index.jsx
new file mode 100644
index 000000000..510f41a47
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/PolicyContent/index.jsx
@@ -0,0 +1,347 @@
+import { PageH2, PageP } from "../../../../../components/page-elements";
+
+import styles from "./styles.module.scss";
+
+const PolicyContent = () => (
+ onSelect(index, item.name)}
+ >
+
+ ))}
+
+ 
+
+
+ {item.name}
+
+ STOCK ARTWORK POLICY
+
+ Your submission CANNOT contain any stock art, clipart, icons, or “free”
+ elements from the web. All items you design and submit within a Topcoder
+ Design Challenge must be created solely by you (as original artwork) or be
+ provided by the client as part of the challenge inputs. Note, we treat
+ icons differently.
+
+
+ The exception to this rule is when a Design challenge allows Stock
+ Artwork. Every challenge clearly states whether or not stock artwork is
+ allowed. If the challenge allows it, you will need to abide by the
+ following rules:
+
+
+
+ If the challenge does not allow Stock Artwork (photos or illustrations),
+ it will clearly state this in the challenge details page.
+
+
+
+ Stock Illustrations:
+ Stock Illustrations are allowed but you must treat them like “stock
+ photos”. You are NOT allowed to edit any illustration and claim it as your
+ own artwork. You are not allowed to trace stock illustrations and claim
+ them as your own artwork. Stock Illustrations MUST include proper
+ watermarks and source documentation.
+
+ Personal Photos: + You are allowed to create and use your own photography. Make sure to + attribute the photo to yourself. If you include your own photography the + licensing must be free for the customer to use (if you are a prize + winner). +
+ Client Supplied Assets: + Any assets supplied as part of the challenge can be used in your designs. + These assets MUST still be declared as part of your submission. +
+
+ Things to Remember
+
+
+APPROVED FONT SITES
+
+ Typekit
+
+ (Limited Library)
+
+
+ + Google Fonts + +
+
+ + Web Safe Fonts + +ICON POLICY
+
+ Topcoder Design Challenges either allow or disallow stock icons as part of
+ the creative process. It is critical that you review what is allowed or
+ not allowed in each challenge, and if the policy is not clear, you ask in
+ the respective challenge forum.
+
+
+ When stock icons are allowed, you must treat them like “stock photos.” You
+ are not allowed to edit stock icons and claim them as your artwork. You
+ are not allowed to trace stock icons and claim them as your artwork. Stock
+ icons are only allowed in design challenges that allow “Stock Icons.”
+ Stock icons do not require watermarks, but they do require proper source
+ documentation and attribution.
+
+
+ Every challenge clearly states whether or not Stock Icons are allowed. If
+ the challenge allows stock icons, you will need to abide by the following
+ rules:
+
+
+ If the challenge does not allow Stock Icons, it will clearly state this in
+ the challenge details page.
+
+
+ Client Supplied Assets: Any assets supplied as part of a challenge can be
+ used in your designs. These assets MUST still be declared as part of your
+ submission.
+
+
+ Things to Remember
+
+
+);
+
+export default PolicyContent;
diff --git a/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/PolicyContent/styles.module.scss b/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/PolicyContent/styles.module.scss
new file mode 100644
index 000000000..9d62d0fe2
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/BrandingLegacy/components/PolicyContent/styles.module.scss
@@ -0,0 +1,40 @@
+@import "../../../../../styles/include";
+
+.container {
+ line-height: 20px;
+
+ p {
+ @include font-roboto;
+ font-weight: 400;
+ color: #404041;
+ font-size: 15px;
+ color: #2a2a2a;
+ font-size: 16px;
+ margin-bottom: 20px;
+ }
+
+ li {
+ margin-bottom: 10px;
+ }
+
+ a {
+ text-decoration: underline;
+ color: $link-blue;
+ }
+
+ ol {
+ list-style: decimal;
+ list-style-type: decimal;
+ padding-left: 30px;
+
+ ul {
+ margin-top: 10px;
+ }
+ }
+
+ ul {
+ list-style: disc;
+ list-style-type: disc;
+ padding-left: 30px;
+ }
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/containers/legacy/BrandingLegacy/index.jsx b/src/apps/self-service/src/containers/legacy/BrandingLegacy/index.jsx
new file mode 100644
index 000000000..ca7f8cd99
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/BrandingLegacy/index.jsx
@@ -0,0 +1,183 @@
+import { useNavigate } from "react-router-dom";
+import { useContext, useEffect, useState } from "react";
+import { connect, useDispatch, useSelector } from "react-redux";
+
+import { profileContext } from "~/libs/core";
+import { Breadcrumb, Button, IconOutline, LoadingSpinner, PageDivider } from "~/libs/ui";
+
+import { triggerAutoSave } from "../../../actions/autoSave";
+import { resetIntakeForm, saveBranding } from "../../../actions/form";
+import { setProgressItem } from "../../../actions/progress";
+import { Progress, WebsiteDesignBannerLegacy } from "../../../components/legacy";
+import { PageContent, PageFoot, PageH2 } from "../../../components/page-elements";
+import { ROUTES, selfServiceRootRoute, selfServiceStartRoute } from "../../../config";
+import { getDynamicPriceAndTimelineEstimate } from "../../../utils";
+
+import BrandingForm from "./components/BrandingForm";
+import styles from "./styles.module.scss";
+
+/**
+ * Branding Page
+ */
+const BrandingLegacy = ({ saveBranding, setProgressItem, isLoggedIn }) => {
+
+ const navigate = useNavigate()
+
+ const [formData, setFormData] = useState({
+ theme: { title: "Style & Theme", option: "", value: null },
+ inspiration: [
+ {
+ website: { title: "Website Address", value: "", option: "" },
+ feedback: { title: "What Do You Like", value: "", option: "" },
+ },
+ ],
+ colorOption: { title: "Color Option", value: [], option: [] },
+ specificColor: { title: "Custom Color", option: "", value: "" },
+ fontOption: { title: "Fonts", option: "", value: -1 },
+ fontUrl: { title: "Custom Font URL", value: "", option: "" },
+ fontUsageDescription: {
+ title: "How to Use Your Fonts",
+ value: "",
+ option: "",
+ },
+ assetsUrl: { title: "Custom Assets URL", value: "" },
+ anythingToAvoid: { title: "Anything to Avoid?", option: "", value: "" },
+ allowStockOption: {
+ title: "Allow Stock Photos",
+ option: "",
+ value: null,
+ },
+ selectedDeliverableOption: {
+ title: "Final Deliverable Option",
+ option: "",
+ value: null,
+ },
+ customDeliverable: { title: "Custom Deliverable", option: "", value: "" },
+ });
+
+ const { initialized } = useContext(profileContext)
+
+ const dispatch = useDispatch();
+ const workType = useSelector((state) => state.form.workType);
+ const branding = useSelector((state) => state.form.branding);
+ const currentStep = useSelector((state) => state.progress.currentStep);
+ const fullState = useSelector((state) => state);
+
+ const [firstMounted, setFirstMounted] = useState(true);
+ useEffect(() => {
+ if (!firstMounted) {
+ return;
+ }
+
+ setProgressItem(5);
+
+ if (currentStep === 0) {
+ navigate(selfServiceStartRoute);
+ }
+
+ if (branding) {
+ setFormData(branding);
+ }
+
+ setFirstMounted(false);
+
+ return () => {
+ dispatch(triggerAutoSave(true, isLoggedIn));
+ };
+ }, [currentStep, branding, dispatch, setProgressItem, firstMounted, navigate, isLoggedIn]);
+
+ const isFormValid =
+ formData?.theme?.value &&
+ formData?.selectedDeliverableOption?.value !== null &&
+ (formData?.colorOption.value.length > 0 ||
+ formData?.specificColor.value.trim() !== "") &&
+ (formData?.selectedDeliverableOption.option !== "Other" ||
+ formData?.customDeliverable.value.trim() !== "") &&
+ (formData?.fontOption.option !== null ||
+ formData?.fontUrl.value.trim() !== "");
+
+ const onBack = () => {
+ navigate(`${selfServiceRootRoute}/new/website-design-legacy/page-details`);
+ };
+
+ const onNext = () => {
+ navigate(`${selfServiceRootRoute}/new/website-design-legacy/review`);
+ saveBranding(formData);
+ setProgressItem(6);
+ };
+
+ const breadcrumbs = [
+ { url: ROUTES.DASHBOARD_PAGE, name: "My work" },
+ {
+ url: ROUTES.INTAKE_FORM,
+ name: "Start work",
+ onClick: () => {
+ dispatch(resetIntakeForm(true));
+ },
+ },
+ { url: ROUTES.WEBSITE_DESIGN_LEGACY, name: "Basic Info" },
+ { url: ROUTES.WEBSITE_DESIGN_PURPOSE_LEGACY, name: "Website purpose" },
+ { url: ROUTES.WEBSITE_DESIGN_PAGE_DETAILS_LEGACY, name: "Page details" },
+ { url: "#", name: "Branding" },
+ ];
+
+ return (
+ <>
+ -
+
- + You must document your Stock Artwork (photos, illustrations) when + submitting. (This helps a customer find the Stock Artwork for purchasing + or attribution later) + +
- + You are allowed to use stock photos and stock illustrations. If you use + any Stock Artwork (anything!) in your design it MUST BE DOCUMENTED. This + includes Unsplash, Pexels, and client/ challenge provided artwork or + photos. + +
-
+ You are only allowed to use Stock Artwork from the provided websites:
+
-
+
- + + iStockPhoto.com + + +
- + + Adobe Stock + + +
- + + Shutterstock + + +
- + + Public Domain Archive + + +
- + + Unsplash + + +
- + + Pexels + + +
+ - + Watermark: You MUST keep the stock watermark intact. If the photo is + cropped in such a way that the watermark is not visible, please be sure + to include the entire watermarked image in your source files so + Screeners can review and see where the image is from. When using either + Unsplash or Pexels, where a watermark is not included on the image, + please add either “Unsplash” or “Pexels” text on top of the image + somewhere. + +
+ Personal Photos: + You are allowed to create and use your own photography. Make sure to + attribute the photo to yourself. If you include your own photography the + licensing must be free for the customer to use (if you are a prize + winner). +
+ Client Supplied Assets: + Any assets supplied as part of the challenge can be used in your designs. + These assets MUST still be declared as part of your submission. +
-
+
- + We screen all design submissions for copyright infringement and proper + source documentation. + +
- All designs must be created by you +
- DO NOT COPY OR TRACE EXISTING ARTWORK +
- + Make sure you understand the Topcoder Terms, Official Design Contest + Rules, and check each contest for more information and what is allowed + in that challenge before you submit. + +
GENERAL FONT POLICIES
+-
+
- + Fonts only need to be declared in design challenges, not wireframe or + idea generation challenges. + +
- + All fonts you introduced within your design must be declared when you + submit your design. + +
- Fonts must be from the Font sites listed below. +
- You may not use symbol fonts (webdings, etc.) +
- + You must list the name, source, and URL of each font when submitting (We + do this to help the Customer) + +
- + In general, missing font documentation or two will not affect screening + but Copilots will check source files and you will have to provide ALL + font documentation in Final Fixes in order to get your full payment. It + is best to do it correctly the first time. + +
- + If you have not introduced any new fonts then choose that option in the + drop-down when you are declaring your fonts. + +
+
+
+ + Google Fonts + +
+
+ + Web Safe Fonts + +
-
+
-
+
You must document your Stock Icons when submitting. +-
+
-
+
+ + Goal: Help customers find your stock Icons for purchase and + usage during development. + + +
+
+ -
+
-
+
+ If you use any Stock Icons (anything!) in your design, it{" "} + MUST BE DOCUMENTED. + +
+ -
+
+ When documenting your icons, you must provide a link to every icon + family you are using, or to each unique icon. It is essential that + everything is easy to find and is from Topcoder approved sources. + +-
+
-
+
+ Alternatively, you can provide the source only, disregarding each + link. Nevertheless, you may be asked to disclose each link for + each icon. + +
+ -
+
Example: “Icons taken from Iconmonstr and FlatIcon” +
+
+ -
+
-
+
+ You are ONLY ALLOWED to use Stock Icons from these approved sources: + +
+
-
+
-
+
+ + Iconmonstr + + +
+ -
+
+ + The Noun Project + + +
+ -
+
+ + Feather Icons + + +
+ -
+
+ + Material Icons + + +
+ -
+
+ + Open Iconic + + +
+ -
+
+ + FlatIcon + + +
+
-
+
-
+
SVG/ Vector Format: +
+
-
+
-
+
You MUST use SVG or vector versions of icons. +
+ -
+
DO NOT use PNG, JPG, or GIF formats. +
+ -
+
If you create your own icons +-
+
-
+
+ Write down the description of each icon and where to find it in + the design. + +
+ -
+
+ Make sure they are in a vector format and included in your designs + AND as separate files as part of your submission. We need to + easily be able to download/ export SVG versions of all icons in + your designs. + +
+
+ -
+
-
+
-
+
+ We screen all design submissions for copyright infringement and proper + source documentation. + +
+ -
+
DO NOT COPY OR TRACE EXISTING ARTWORK OR ICONS +
+ -
+
+ Ensure you understand the Topcoder Terms, Official Design Contest + Rules, and check each contest for more information and what is allowed + in that challenge before you submit. + +
+ -
+
Make sure ALL icons are vector/ SVG +
+ -
+
No PNG, JPG, or GIF (raster) icons allowed. +
+
+ BRANDING
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+PageDetailsForm.defaultProps = {
+ price: 0,
+ serviceType: "",
+};
+
+PageDetailsForm.propTypes = {
+ estimate: PT.shape().isRequired,
+ price: PT.string,
+ serviceType: PT.string,
+ setListInputs: PT.func,
+ listInputs: PT.arrayOf(PT.shape()),
+};
+
+export default PageDetailsForm;
diff --git a/src/apps/self-service/src/containers/legacy/PageDetailsLegacy/components/PageDetailsForm/styles.module.scss b/src/apps/self-service/src/containers/legacy/PageDetailsLegacy/components/PageDetailsForm/styles.module.scss
new file mode 100644
index 000000000..7bac0a2a4
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/PageDetailsLegacy/components/PageDetailsForm/styles.module.scss
@@ -0,0 +1,68 @@
+@import "../../../../../styles/include";
+
+.pageDetailsForm {
+ .title {
+ font-weight: 600;
+ color: $grey-text;
+ font-size: 20px;
+ line-height: 20px;
+ text-transform: uppercase;
+ }
+
+ .description {
+ @include font-roboto;
+ font-size: 16px;
+ line-height: 26px;
+ margin-top: 24px;
+ color: $grey-text;
+ }
+
+ .form-row {
+ align-items: flex-start;
+ }
+
+ .formFieldWrapper {
+ margin-top: 18px;
+ }
+
+ .list {
+ list-style-type: decimal;
+ list-style-position: outside;
+ margin-left: 15px;
+ }
+
+ .link {
+ cursor: pointer;
+ color: $link-blue;
+ text-decoration: underline;
+ margin-top: 20px;
+ }
+
+ .page {
+ margin-top: 38px;
+ }
+
+ .page-header {
+ display: flex;
+ justify-content: space-between;
+
+ .page-title {
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 600;
+ text-transform: uppercase;
+ color: $black;
+ margin-bottom: 16px;
+ }
+
+ .remove-page {
+ color: $green1;
+ cursor: pointer;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/containers/legacy/PageDetailsLegacy/index.jsx b/src/apps/self-service/src/containers/legacy/PageDetailsLegacy/index.jsx
new file mode 100644
index 000000000..b29bbb9d5
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/PageDetailsLegacy/index.jsx
@@ -0,0 +1,153 @@
+import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { connect, useDispatch, useSelector } from "react-redux";
+
+import { Breadcrumb, Button, IconOutline, LoadingSpinner, PageDivider } from "~/libs/ui";
+
+import { ROUTES, selfServiceRootRoute, selfServiceStartRoute } from "../../../config";
+import { getDynamicPriceAndTimelineEstimate } from "../../../utils";
+import { triggerAutoSave } from "../../../actions/autoSave";
+import { resetIntakeForm, savePageDetails } from "../../../actions/form";
+import { setProgressItem } from "../../../actions/progress";
+import { Progress, WebsiteDesignBannerLegacy } from "../../../components/legacy";
+import { PageContent, PageFoot, PageH2 } from "../../../components/page-elements";
+
+import PageDetailsForm from "./components/PageDetailsForm";
+import styles from "./styles.module.scss";
+
+/**
+ * Page Details Page
+ */
+const PageDetailsLegacy = ({ savePageDetails, setProgressItem, isLoggedIn }) => {
+
+ const navigate = useNavigate()
+ const [isLoading] = useState(false);
+ const [listInputs, setListInputs] = useState({
+ pages: [
+ {
+ pageName: "",
+ pageDetails: "",
+ },
+ ],
+ });
+ const dispatch = useDispatch();
+ const workType = useSelector((state) => state.form.workType);
+ const pageDetails = useSelector((state) => state.form.pageDetails);
+ const currentStep = useSelector((state) => state.progress.currentStep);
+ const fullState = useSelector((state) => state);
+ const estimate = getDynamicPriceAndTimelineEstimate(fullState);
+
+ const onBack = () => {
+ navigate(`${selfServiceRootRoute}/new/website-design-legacy/website-purpose`);
+ };
+
+ const [firstMounted, setFirstMounted] = useState(true);
+ useEffect(() => {
+ if (!firstMounted) {
+ return;
+ }
+
+ setProgressItem(4);
+
+ if (currentStep === 0) {
+ navigate(selfServiceStartRoute);
+ }
+
+ if (pageDetails) {
+ setListInputs(pageDetails);
+ }
+
+ setFirstMounted(false);
+
+ return () => {
+ dispatch(triggerAutoSave(true, isLoggedIn));
+ };
+ }, [currentStep, pageDetails, dispatch, setProgressItem, firstMounted, navigate, isLoggedIn]);
+
+ const onNext = () => {
+ navigate(`${selfServiceRootRoute}/new/website-design-legacy/login-prompt`);
+ savePageDetails(listInputs);
+ setProgressItem(5);
+ };
+
+ const isFormValid = () => {
+ let isValid = true;
+ (listInputs?.pages || []).forEach((item) => {
+ if (!item.pageName.length || !item.pageDetails.length) {
+ isValid = false;
+ }
+ });
+ return isValid;
+ };
+
+ const breadcrumbs = [
+ { url: ROUTES.DASHBOARD_PAGE, name: "My work" },
+ {
+ url: ROUTES.INTAKE_FORM,
+ name: "Start work",
+ onClick: () => {
+ dispatch(resetIntakeForm(true));
+ },
+ },
+ { url: ROUTES.WEBSITE_DESIGN_LEGACY, name: "Basic Info" },
+ { url: ROUTES.WEBSITE_DESIGN_PURPOSE_LEGACY, name: "Website purpose" },
+ { url: "#", name: "Page details" },
+ ];
+
+ return (
+ <>
+
+ Describe each page
+
+
+ For each page (or screen) required in your design project, please
+ provide:
+
+
+ Page Name
+ WalkieDoggie Homepage
+ Requirements & Details
+
+ The purpose of this screen is to welcome our customers and make
+ them feel welcome and warm. We love their dog and we want them
+ to feel it!
+
+
+
+ This page is essentially a landing page where we really want
+ them to do one core action and that’s to get started finding
+ their perfect “Walkie” which is what we call our professional
+ dog walkers.
+
+
+
+ {" "}
+ Top Navigation:
+
+ The top navigation of the website should allow a user to mouse + over core navigation sections. Our Services, Our Walkies, Our + Promise, Locations We Serve, FAQs. +
+
+
+ In the top navigation - top right - I’d like to make sure a user
+ can “Create an Account” and if they are logged in, they would
+ see their profile image and know they are logged in.
+
+
+
+ Main Body:
+
I want to see amazing imagery choice/design here and a + large tagline that reads, “We Love Your Dog, Too” with a main + button that says “Find Your Walkie”. +
+
+
+ On the home screen I would also like to see included: Our
+ TrustPilot Rating -{" "}
+
+ {" "}
+ https://www.trustpilot.com/{" "}
+ {" "}
+ - We have a 4.7 out of 5 rating so plz mock up how that will
+ look.
+
+
+
+ I want a badge of some sort that indicates all of our dog
+ walkers are insured.
+
+
+
+ I want to see one amazing testimonial on the screen that reads…
+ “WalkieDoggie is perfect. They are always professional and they
+ take amazing care of our dog, Beefcake.” The testimonial is from
+ “Victoria B.” from Tacoma, Washington (please use an image of a
+ young, professional female for this testimonial image).
+
+
+
+
+
+ -
+
- A descriptive page name (e.g. Homepage). +
- The primary purpose of the page. +
- + Describe all required content and functional elements. Or, + reference the content as provided in uploaded resource + documents. + +
+
+
+ The top navigation of the website should allow a user to mouse + over core navigation sections. Our Services, Our Walkies, Our + Promise, Locations We Serve, FAQs. +
+
+
I want to see amazing imagery choice/design here and a + large tagline that reads, “We Love Your Dog, Too” with a main + button that says “Find Your Walkie”. +
+
+
+
+
+ {listInputs.pages.map((page, index) => (
+
+
+
+
+
+ handleListInputChange(
+ "pages",
+ index,
+ e.target.name,
+ e.target.value
+ )
+ }
+ />
+
+
+
+ handleListInputChange(
+ "pages",
+ index,
+ e.target.name,
+ e.target.value
+ )
+ }
+ />
+
+
+ ))}
+
+
+ Page {index + 1}
+ {index ? (
+ removeListInputItem("pages", index)}
+ >
+ Remove Page
+
+ ) : null}
+
+ PAGE DETAILS
+
+
+
+
+
+
+
+
+
+
+
+ {option.option && (
+
+ );
+ };
+
+ const renderDetails = (step) => {
+ let items = formData[step.value] || {};
+ if (formData?.workType?.selectedWorkType === "Find Me Data") {
+ items = _.omit(items, ["assetsUrl", "goals"]);
+ } else {
+ items = _.omit(items, [
+ "analysis",
+ "primaryDataChallenge",
+ "primaryDataChallengeOther",
+ "sampleData",
+ ]);
+ }
+ return Object.keys(items).map((key) => {
+ if (_.isArray(items[key]))
+ return _.map(items[key], (item, i) => (
+
+
+ )}
+
+
+ {option.title || title}
+{formatOption(option.option)}
+
+
+ ));
+ return renderOption(items[key]);
+ });
+ };
+
+ const renderPageDetails = (step) => {
+ const items = formData[step.value] || {};
+ const pages = items?.pages || [];
+
+ return pages.map((page, index) => {
+ return (
+
+
+ + {key} {i + 1} +
++ {Object.keys(item).map((subKey) => + renderOption(item[subKey], subKey) + )} +
+
+ {page?.pageName && (
+
+ );
+ });
+ };
+
+ return (
+ <>
+ {steps
+ .filter((s) => {
+ if (s.value === "pageDetails")
+ return _.get(formData[s.value], "pages[0].pageDetails") !== "";
+ return !!formData[s.value];
+ })
+ .map((step, index) => {
+ let redirectPage = PROGRESS_LEVELS.find(
+ (item) => item.label === step.label
+ );
+ return (
+ <>
+
+
+ )}
+ {page?.pageDetails && (
+
+
+ Page {index + 1} Name
+{page?.pageName}
+
+
+ )}
+
+
+ Page {index + 1} Requirements
+{page?.pageDetails}
+ setStepToggler(index)}
+ >
+
+
+ {step.isOpen
+ ? step.value === "pageDetails"
+ ? renderPageDetails(step)
+ : renderDetails(step)
+ : null}
+
+ + {step.label} + {enableEdit && ( + + edit + + )} +
+
+
+
+ REVIEW & PAYMENT
+
+ {showProgress && }
+ {introText}
}
+
+
+
+
+
+
+
+
+
+
+
+
+ {estimate.stickerPrice && (
+
+ {currencyFormat(estimate.stickerPrice)}
+
+ )}
+ {currencyFormat(estimate.total)}
+
+
+ Total Payment
+
+
+ Your card was declined. Please try a different card.
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+WebsitePurposeForm.defaultProps = {
+ price: 0,
+ serviceType: "",
+};
+
+WebsitePurposeForm.propTypes = {
+ estimate: PT.shape().isRequired,
+ serviceType: PT.string,
+ formData: PT.shape(),
+ setFormData: PT.func,
+};
+
+export default WebsitePurposeForm;
diff --git a/src/apps/self-service/src/containers/legacy/WebsitePurposeLegacy/components/WebsitePurposeForm/styles.module.scss b/src/apps/self-service/src/containers/legacy/WebsitePurposeLegacy/components/WebsitePurposeForm/styles.module.scss
new file mode 100644
index 000000000..704ce2b04
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/WebsitePurposeLegacy/components/WebsitePurposeForm/styles.module.scss
@@ -0,0 +1,31 @@
+@import "../../../../../styles/include";
+
+.websitePurposeForm {
+ .title {
+ font-weight: 600;
+ color: $grey-text;
+ font-size: 20px;
+ line-height: 20px;
+ text-transform: uppercase;
+ }
+
+ .description {
+ @include font-roboto;
+ font-size: 16px;
+ line-height: 26px;
+ margin-top: 24px;
+ color: $grey-text;
+ }
+
+ .form-row {
+ align-items: flex-start;
+ }
+
+ .formFieldWrapper {
+ margin-top: 48px;
+ }
+
+ .text-area {
+ height: 150px !important;
+ }
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/containers/legacy/WebsitePurposeLegacy/index.jsx b/src/apps/self-service/src/containers/legacy/WebsitePurposeLegacy/index.jsx
new file mode 100644
index 000000000..300d24188
--- /dev/null
+++ b/src/apps/self-service/src/containers/legacy/WebsitePurposeLegacy/index.jsx
@@ -0,0 +1,155 @@
+import React, { useEffect, useState } from "react";
+import { connect, useSelector, useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+
+import { Button, Breadcrumb, IconOutline, LoadingSpinner, PageDivider } from "~/libs/ui";
+
+import { ROUTES, selfServiceRootRoute, selfServiceStartRoute } from "../../../config";
+import { getDynamicPriceAndTimelineEstimate } from "../../../utils";
+import { triggerAutoSave } from "../../../actions/autoSave";
+import { resetIntakeForm, saveWebsitePurpose } from "../../../actions/form";
+import { setProgressItem } from "../../../actions/progress";
+import { Progress, WebsiteDesignBannerLegacy } from "../../../components/legacy";
+import { PageContent, PageFoot, PageH2 } from "../../../components/page-elements";
+
+import WebsitePurposeForm from "./components/WebsitePurposeForm";
+import styles from "./styles.module.scss";
+
+
+/**
+ * Website Purpose Page
+ */
+const WebsitePurposeLegacy = ({ saveWebsitePurpose, setProgressItem, isLoggedIn }) => {
+
+ const navigate = useNavigate()
+
+ const [isLoading] = useState(false);
+ const [formData, setFormData] = useState({
+ industry: { title: "Your Industry", option: "", value: null },
+ description: { title: "Description", option: "", value: "" },
+ userStory: { title: "User Story", option: "", value: "" },
+ existingWebsite: { title: "Existing Website?", option: "", value: "" },
+ existingWebsiteInfo: {
+ title: "Existing Website Information",
+ option: "",
+ value: "",
+ },
+ });
+ const dispatch = useDispatch();
+ const workType = useSelector((state) => state.form.workType);
+ const websitePurpose = useSelector((state) => state.form.websitePurpose);
+ const currentStep = useSelector((state) => state.progress.currentStep);
+ const fullState = useSelector((state) => state);
+
+ const isFormValid =
+ formData?.industry?.value &&
+ formData?.description?.value.length &&
+ formData?.userStory?.value.length;
+
+ const onBack = () => {
+ navigate(`${selfServiceRootRoute}/new/website-design-legacy/basic-info`);
+ };
+
+ const onNext = () => {
+ saveWebsitePurpose(formData);
+ navigate(`${selfServiceRootRoute}/new/website-design-legacy/page-details`);
+ setProgressItem(4);
+ };
+
+ const [firstMounted, setFirstMounted] = useState(true);
+ useEffect(() => {
+ if (!firstMounted) {
+ return;
+ }
+
+ setProgressItem(3);
+
+ if (currentStep === 0) {
+ navigate(selfServiceStartRoute);
+ }
+
+ if (websitePurpose) {
+ setFormData(websitePurpose);
+ }
+
+ setFirstMounted(false);
+
+ return () => {
+ dispatch(triggerAutoSave(true, isLoggedIn));
+ };
+ }, [currentStep, websitePurpose, dispatch, setProgressItem, firstMounted, navigate, isLoggedIn]);
+
+ const breadcrumbs = [
+ { url: ROUTES.DASHBOARD_PAGE, name: "My work" },
+ {
+ url: ROUTES.INTAKE_FORM,
+ name: "Start work",
+ onClick: () => {
+ dispatch(resetIntakeForm(true));
+ },
+ },
+ { url: ROUTES.WEBSITE_DESIGN_LEGACY, name: "Basic Info" },
+ { url: "#", name: "Website purpose" },
+ ];
+
+ return (
+ <>
+
+ Your industry
+
+ Knowing your industry will help our designers understand your
+ audience, and the basic visual direction and overall tone to take
+ for your website design.
+
+
+
+
+
+ {
+ handleInputChange("industry", option, option.label);
+ }}
+ options={IndustryList}
+ style2={true}
+ placeholder={"Select industry"}
+ />
+
+
+
+ DESCRIPTION
+
+ What is the purpose of your website? What do you want visitors to be
+ able to do, e.g., see your work? Contact you? You can include a
+ general description as well as goals of the website.{" "}
+
+
+
+ Example:
A dog walking website that allows + visitors to select dog walkers and schedule dog walking appointments +
+
+
+ +
A dog walking website that allows + visitors to select dog walkers and schedule dog walking appointments +
+
+ handleInputChange(e.target.name, e.target.value)}
+ name="description"
+ placeholder={"Describe your website"}
+ />
+
+
+
+ USERS
+
+ Describe your target audience—are they pharmaceutical reps?
+ Middle-aged mechanical engineers? Beekeepers? Write their user
+ story, using the format, “As a <type of users>, I want
+ <some goal>, so that <some reason>.”
+
+
+
+ Example:
+ “As a dog owner, I want someone trustworthy to walk my dog, so that + he feels loved when I'm at work.“ +
+
+
+ +
+ “As a dog owner, I want someone trustworthy to walk my dog, so that + he feels loved when I'm at work.“ +
+
+ handleInputChange(e.target.name, e.target.value)}
+ name="userStory"
+ placeholder={"Enter your user story"}
+ />
+
+
+
+ EXISTING WEBSITE?
+
+ If you have an existing website, please enter it here. Are we
+ designing additional pages for your existing website? Or are we
+ redesigning your current website? Please add additional information
+ on how the designers should reference and use your existing website.
+
+
+
+
+
+ handleInputChange(e.target.name, e.target.value)}
+ />
+
+
+ handleInputChange(e.target.name, e.target.value)}
+ name="existingWebsiteInfo"
+ placeholder={
+ "Anything we should know about your existing website"
+ }
+ />
+
+
+
+ WEBSITE PURPOSE
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isLoggedIn && (
+
+ )}
+
+
+ {introText}
}
+
+
+
+
+
+
+
+
+
+
+
+ {estimate.stickerPrice && (
+
+ {currencyFormat(estimate.stickerPrice)}
+
+ )}
+ {currencyFormat(estimate.total)}
+
+
+ Total Payment
+
+
+ Your card was declined. Please try a different card.
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ handleInputChange("country", option)}
+ options={COUNTRY_OPTIONS}
+ style2={true}
+ >
+
+
+
+
+
+ );
+};
+
+PaymentForm.defaultProps = {};
+
+PaymentForm.propTypes = {
+ formData: PT.shape(),
+ onFormUpdate: PT.func,
+ setFormData: PT.func.isRequired,
+};
+
+export default PaymentForm;
diff --git a/src/apps/self-service/src/containers/products/review/components/PaymentForm/styles.module.scss b/src/apps/self-service/src/containers/products/review/components/PaymentForm/styles.module.scss
new file mode 100644
index 000000000..484a5c850
--- /dev/null
+++ b/src/apps/self-service/src/containers/products/review/components/PaymentForm/styles.module.scss
@@ -0,0 +1,78 @@
+@import "../../../../../styles/include";
+
+.paymentForm {
+ width: 100%;
+
+ .infoBox {
+ display: flex;
+ flex-direction: column;
+ row-gap: 24px;
+ font-size: 16px;
+ line-height: 26px;
+
+ .confirmationBox {
+ @include confirmationBox;
+ }
+
+ .title {
+ text-transform: uppercase;
+ font-size: 20px;
+ }
+
+ .importantInfo {
+ font-size: 16px;
+ }
+ }
+
+ .formHeader {
+ font-size: 12px;
+ font-weight: 500;
+ margin-bottom: 4px;
+ }
+
+ .cardElement {
+ @include formInputText;
+ padding: 0 8px !important;
+
+ input,
+ select {
+ @include formInputText;
+ padding: 0 8px !important;
+ }
+ }
+
+ .halfWidth {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ column-gap: 8px;
+ width: 100%;
+ }
+
+ .error {
+ display: flex;
+ color: $red;
+ margin-left: 14px;
+ font-size: 11px;
+ margin-top: -15px;
+ padding-bottom: 5px;
+ }
+
+ .link {
+ color: $link-blue;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .contract {
+ display: flex;
+ margin-bottom: 16px;
+
+ @include mobile {
+ margin-bottom: 8px;
+ }
+
+ .checkbox {
+ padding-top: 2px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/apps/self-service/src/containers/products/review/components/ReviewTable/index.jsx b/src/apps/self-service/src/containers/products/review/components/ReviewTable/index.jsx
new file mode 100644
index 000000000..4a8a2428b
--- /dev/null
+++ b/src/apps/self-service/src/containers/products/review/components/ReviewTable/index.jsx
@@ -0,0 +1,18 @@
+import { selfServiceRootRoute } from "../../../../../config";
+import { WorkDetailDetailsPane } from "../../../../../components/work-details";
+
+/**
+ * Review Table Component
+ */
+const ReviewTable = ({ workItemConfig, formData }) => {
+ const redirectUrl = `${selfServiceRootRoute}/new/${workItemConfig.basePath}/basic-info`;
+ return (
+ Contact Information
+
+
+
+ Card Information
+
+
+ onCardNumberChange(data)}
+ />
+
+ {!!String(cardNumberError).length && (
+ {cardNumberError}
+ )}
+
+
+
+
+
+
+
+
+
+ onExpirationChange(data)}
+ />
+
+ {!!String(cardExpiryError).length && (
+ {cardExpiryError}
+ )}
+
+ onCvcChange(data)}
+ />
+
+ {!!String(cvcError).length && (
+ {cvcError}
+ )}
+
+ handleInputChange(e.target.name, e.target.value)}
+ >
+
+
+ handleInputChange(e.target.name, e.target.value)}
+ >
+
+
+
+
+
+ handleInputChange("checked", e.target.checked)}
+ inline
+ />
+
+
+ Yes, I understand and agree to Topcoder's
+ onOpenContractModal(true)}
+ >
+ Order Contract
+
+
+
+
+
+ A hold will be placed on your card for the full amount of the project.
+ Once your work is live on the Topcoder platform, you will be charged.
+
+
+
+ );
+};
+
+const WorkTypeCardWide = ({
+ className = "",
+ bgImage = "",
+ title,
+ content,
+ ctaText = "",
+ icon = "",
+ svgIcon: SvgIcon = "",
+ ctaButtonOnClick,
+}) => {
+
+ return (
+
+
+
+ {!!ctaButtonOnClick && (
+
+ )}
+ + {subHeading} +
++ {subHeadingMobile || subHeading} +
+ +{title}
+ ++ {content} +
++ {content} +
+
+ {!!SvgIcon ? 
}
+
+ );
+};
+
+/**
+ * Select Work Type Page
+ */
+const SelectWorkType = ({
+ saveWorkType,
+ setProgressItem,
+ toggleSupportModal,
+ isLoggedIn,
+}) => {
+
+ const dispatch = useDispatch();
+ const [isLoading] = useState(false);
+ const showSupportModal = useSelector((state) => state.form.showSupportModal);
+ const challenge = useSelector((state) => state.challenge);
+ const navigate = useNavigate()
+
+ const allWorkTypes = [...workTypes, ...webWorkTypes, ...Object.values(WorkTypeConfigs)];
+ const featuredWorkTypes = allWorkTypes.filter((wt) => wt.featured);
+
+ useEffect(() => {
+ return () => {
+ dispatch(triggerAutoSave(true, isLoggedIn));
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const handleClick = (selectedItem = webWorkTypes[0]) => {
+ saveWorkType({
+ selectedWorkType: selectedItem.type || selectedItem.title,
+ selectedWorkTypeDetail: selectedItem.title,
+ });
+ setProgressItem(2);
+ navigate(selectedItem.startRoute);
+ dispatch(triggerAutoSave(true, isLoggedIn));
+ };
+
+ const onShowSupportModal = () => {
+ toggleSupportModal(true);
+ };
+ const onHideSupportModal = () => {
+ toggleSupportModal(false);
+ };
+
+ const breadcrumb = [
+ { url: ROUTES.DASHBOARD_PAGE, name: "My work" },
+ { url: selfServiceStartRoute, name: "Start work" },
+ ];
+
+ const workTypeClassName = (title) => title.toLowerCase().split(" ").join("-");
+
+ return (
+ <>
+
+
+ {title}
+{content}
+ + {!!ctaText && !!ctaButtonOnClick && ( + + )} +
+
+
+
+
+
+ 
+
+
+
+
+
+
+ + put our great talent to work for you +
+ +
+ Amazing talent. Passionate people.
+
+ Start something great today.
+
+ {work.tags[0] && (
+
+ )}
+
+ {work.tags[0]}
+ )}
+
+ {selectedTab === "summary" && (
+
+
+ {summary && (
+
+ )}
+
+ {selectedTab === "details" && (
+
+
+ )}
+
+ {selectedTab === "solutions" && work && (
+
+
+ )}
+
+ {selectedTab === "messaging" && (
+ {work &&
+ )}
+
+ {selectedTab === "history" && }
+
+
+
+
+ + Log in or create an account +
++ You are about to share secured information. To ensure your + security, please log in or create an account. +
+ +
+
+
+
+
+ )
+}
+
+export default WorkLoginPrompt
diff --git a/src-ts/tools/work/work-login-prompt/index.ts b/src/apps/self-service/src/routes/work-login-prompt/index.ts
similarity index 100%
rename from src-ts/tools/work/work-login-prompt/index.ts
rename to src/apps/self-service/src/routes/work-login-prompt/index.ts
diff --git a/src/apps/self-service/src/routes/work-thank-you/WorkThankYou.module.scss b/src/apps/self-service/src/routes/work-thank-you/WorkThankYou.module.scss
new file mode 100644
index 000000000..e655c58a7
--- /dev/null
+++ b/src/apps/self-service/src/routes/work-thank-you/WorkThankYou.module.scss
@@ -0,0 +1,15 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ align-items: center;
+ flex: 1 1;
+
+ .contentContainer {
+ p {
+ padding: $sp-6;
+ }
+ }
+}
diff --git a/src-ts/tools/work/work-thank-you/WorkThankYou.tsx b/src/apps/self-service/src/routes/work-thank-you/WorkThankYou.tsx
similarity index 76%
rename from src-ts/tools/work/work-thank-you/WorkThankYou.tsx
rename to src/apps/self-service/src/routes/work-thank-you/WorkThankYou.tsx
index aa0a6ffc1..a924d272f 100644
--- a/src-ts/tools/work/work-thank-you/WorkThankYou.tsx
+++ b/src/apps/self-service/src/routes/work-thank-you/WorkThankYou.tsx
@@ -1,22 +1,15 @@
-import { NavigateFunction, useNavigate } from 'react-router-dom'
+import { LinkButton } from '~/libs/ui'
-import { Button } from '../../../lib'
-import { selfServiceRootRoute } from '../work.routes'
+import { workDashboardRoute } from '../../config'
import styles from './WorkThankYou.module.scss'
const WorkThankYou: () => JSX.Element = () => {
- const navigate: NavigateFunction = useNavigate()
-
const clearPreviousForm: () => void = () => {
// TODO in PROD-2441 - Whichever form clearing mechanism is coded in PROD-2441 should be called here.
}
- function onDone(): void {
- navigate(selfServiceRootRoute)
- }
-
clearPreviousForm()
return (
@@ -38,9 +31,11 @@ const WorkThankYou: () => JSX.Element = () => {
page.
+
+
+
-
-
- );
-};
-
-FeaturedWorkTypeBanner.propTypes = {
- title: PT.string,
- subTitle: PT.string,
- workType: PT.string,
-};
-
-export default FeaturedWorkTypeBanner;
diff --git a/src/components/Banners/WebsiteDesignBannerLegacy/index.js b/src/components/Banners/WebsiteDesignBannerLegacy/index.js
deleted file mode 100644
index 192cb4644..000000000
--- a/src/components/Banners/WebsiteDesignBannerLegacy/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- *
- * Website Design Banner
- */
-import React from "react";
-
-import styles from "./styles.module.scss";
-import { ReactComponent as IconWebsiteTools } from "../../../assets/images/design-tools.svg";
-
-export const WebsiteDesignBannerLegacy = () => {
- return (
-
-
-
-
-
-
- {title}
- {subTitle}
-
-
-
- );
-};
-
-export default WebsiteDesignBannerLegacy;
diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
deleted file mode 100644
index 00d38049c..000000000
--- a/src/components/Button/index.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * Button
- *
- * Supports:
- * - size - see BUTTON_SIZE values
- * - type - see BUTTON_TYPE values
- *
- * If `routeTo` is set, then button works as React Router Link
- *
- * if `href` is set, then button is rendered as a link ``
- */
-import { Link } from "react-router-dom";
-import cn from "classnames";
-import PT from "prop-types";
-import React from "react";
-
-import { BUTTON_SIZE, BUTTON_TYPE } from "../../constants";
-
-import styles from "./styles.module.scss";
-
-const Button = ({
- children,
- size = BUTTON_SIZE.SMALL,
- type = BUTTON_TYPE.PRIMARY,
- onClick,
- className,
- innerRef,
- disabled,
- routeTo,
- href,
- target,
- isSubmit,
-}) => {
- if (href) {
- return (
-
- {children}
-
- );
- } else {
- const button = (
-
- );
-
- return routeTo ? {button} : button;
- }
-};
-
-Button.propTypes = {
- children: PT.node,
- size: PT.oneOf(Object.values(BUTTON_SIZE)),
- type: PT.oneOf(Object.values(BUTTON_TYPE)),
- onClick: PT.func,
- className: PT.string,
- innerRef: PT.func,
- disabled: PT.bool,
- routeTo: PT.string,
- href: PT.string,
- isSubmit: PT.bool,
-};
-
-export default Button;
diff --git a/src/components/Button/styles.module.scss b/src/components/Button/styles.module.scss
deleted file mode 100644
index d01e75094..000000000
--- a/src/components/Button/styles.module.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-@import "../../styles/include";
-
-.button {
- @include font-roboto;
- background: transparent;
- border: 0;
- box-sizing: border-box;
- cursor: pointer;
- align-items: center;
- display: flex;
- justify-content: center;
- margin: 0;
- padding: 0;
- text-decoration: none;
- outline: none;
- white-space: nowrap;
-
- &[disabled] {
- cursor: default;
- opacity: 0.3;
- filter: grayscale(90%);
- pointer-events: none;
- }
-
- svg {
- fill: white;
- }
-}
-
-.size-large {
- border-radius: 25px;
- font-size: 20px;
- font-weight: 700;
- letter-spacing: 0.8px;
- line-height: 46px;
- height: 48px;
- padding: 18px 30px;
- text-transform: uppercase;
-}
-
-.size-medium {
- border-radius: 20px;
- font-size: 14px;
- font-weight: 700;
- letter-spacing: 0.8px;
- line-height: 38px;
- height: 40px;
- padding: 0 19px;
- text-transform: uppercase;
-}
-
-.size-small {
- border-radius: 15px;
- font-size: 12px;
- font-weight: 700;
- line-height: 28px;
- letter-spacing: 0.8px;
- height: 30px;
- padding: 0 14px;
- text-transform: uppercase;
-}
-
-.size-tiny {
- border-radius: 12px;
- padding: 6px 15px;
- height: 24px;
- font-size: 10px;
- font-weight: 700;
- line-height: 22px;
- letter-spacing: 0.8px;
- text-transform: uppercase;
-}
-
-.type-primary {
- border: 2px solid $green1;
- background-color: $green1;
- color: #fff;
-}
-
-.type-warning {
- border: 2px solid #ef476f;
- background-color: #ef476f;
- color: #fff;
-}
-
-.type-secondary {
- background-color: #fff;
- border: 2px solid $green1;
- color: #229174;
-}
-
-.type-secondary[disabled] {
- border-color: #b5b5b5;
- color: #b5b5b5;
-}
-
-.type-rounded {
- position: relative;
- width: 22px;
- border-radius: 50%;
- background-color: #fff;
- border: 1px solid $green1;
- color: #229174;
-
- svg {
- position: absolute;
- left: 37%;
- }
-}
-
-.type-rounded[disabled] {
- border-radius: 50%;
- border-color: #b5b5b5;
- color: #b5b5b5;
-}
-
-.type-primary[disabled],
-.type-warning[disabled] {
- background-color: #b5b5b5;
- border-color: #b5b5b5;
-}
\ No newline at end of file
diff --git a/src/components/FormElements/FormInputTextArea/styles.module.scss b/src/components/FormElements/FormInputTextArea/styles.module.scss
deleted file mode 100644
index 040e9f601..000000000
--- a/src/components/FormElements/FormInputTextArea/styles.module.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@import "../../../styles/include";
-@import "../../../../src-ts/lib/styles/includes";
-
-.form-input-textarea {
- background-color: #ffffff !important;
- box-sizing: border-box !important;
- color: #444 !important;
- font-size: 16px !important;
- outline: none !important;
- border: 0 !important;
- padding: 0 15px !important;
- width: 100% !important;
- height: 117px !important;
- resize: none;
- @include font-roboto;
-
-
- &::placeholder {
- color: #aaaaaa !important;
- font-size: 18px !important;
- text-transform: none !important;
- font-weight: 400;
- }
-
- &:focus {
- box-shadow: none !important;
- }
-}
\ No newline at end of file
diff --git a/src/components/HelpBanner/index.jsx b/src/components/HelpBanner/index.jsx
deleted file mode 100644
index 8851e5c72..000000000
--- a/src/components/HelpBanner/index.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Help Banner component
- */
-import React, { useState } from "react";
-import cn from "classnames";
-import { ReactComponent as ArrowIcon} from "../../assets/images/icon-arrow.svg";
-import moduleStyles from "./styles.module.scss";
-import Button from "../Button";
-
-const HelpBanner = ({
- title,
- description,
- contactSupport,
- children,
- styles = [],
- defaultOpen = false,
-}) => {
- const [open, setOpen] = useState(defaultOpen);
- const moduleStyleStyles = styles.map(style => moduleStyles[style])
- return (
-
-
-
-
-
-
-
-
-
-
- WEBSITE DESIGN LEGACY
-
- Create a beautiful custom visual design for your website. and
- device types, your vision, and receive up to 5 modern modern
- modern designs.
-
-
-
- );
-};
-
-export default HelpBanner;
diff --git a/src/components/HelpBanner/styles.module.scss b/src/components/HelpBanner/styles.module.scss
deleted file mode 100644
index 76cfffb7e..000000000
--- a/src/components/HelpBanner/styles.module.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-@import "../../styles/include";
-
-.banner {
- background-color: $orange-25;
- border-radius: 8px;
- width: 100%;
- margin-top: 32px;
-
- .title {
- cursor: pointer;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 16px;
-
- span {
- color: $black;
- font-size: 20px;
- line-height: 20px;
- text-transform: uppercase;
- font-weight: 600;
- }
-
- .arrowIcon {
-
- &.up {
- transform: rotate(180deg);
- }
- }
- }
-
- .description {
- @include font-roboto;
- font-size: 16px;
- line-height: 26px;
- color: $black;
- margin-top: -26px;
- padding: 16px;
- }
-
- .supportButton {
- padding: 16px;
- }
-}
-
-.gray {
- background-color: $gray-10;
- font-size: 16px;
- @include font-roboto;
- line-height: 26px;
- color: $black;
- font-style: normal;
-
- .description {
- padding-top: 0px;
- }
-
- a {
- text-decoration: underline;
- color: $link-blue;
- cursor: pointer;
- }
-}
-
-.turqoise {
- background-color: $turqoise;
-}
-
-.marginTop24Mobile {
- margin-top: 0;
-
- @include mobile {
- margin-top: 24px;
- }
-}
\ No newline at end of file
diff --git a/src/components/HelpIcon/index.jsx b/src/components/HelpIcon/index.jsx
deleted file mode 100644
index e4d30981b..000000000
--- a/src/components/HelpIcon/index.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { useRef } from "react";
-import ReactTooltip from "react-tooltip";
-import { ReactComponent as HintIcon} from "../../assets/images/icon-hint-green.svg";
-import { v4 as uuidv4 } from "uuid";
-
-import styles from"./styles.module.scss";
-
-const HelpIcon = ({
- children,
- inverted,
- arrowColor = "#f4f4f4",
- backgroundColor = "#f4f4f4",
- textColor = "#00000",
-}) => {
- const tooltipId = useRef(uuidv4());
-
- return (
- setOpen(!open)}
- role="button"
- tabIndex={0}
- >
- {title}
-
-
-
- {open && title !== description && (
-
-
- {description}
- )} - {open && children &&{children}
}
- {open && contactSupport && (
- - -
- )} -
-
- {children}
-
-
- );
-};
-
-export default HelpIcon;
diff --git a/src/components/HelpIcon/styles.module.scss b/src/components/HelpIcon/styles.module.scss
deleted file mode 100644
index a7d92edb4..000000000
--- a/src/components/HelpIcon/styles.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import "../../styles/include";
-
-.help-icon {
- .tooltip {
- display: flex;
- @include font-roboto;
- font-weight: 400;
- font-size: 12px;
- line-height: 20px;
- max-width: 30ch;
- padding: 8px;
- background-color: $grey-bg;
- color: $black;
- border-radius: 8px;
- opacity: 1 !important;
- box-shadow: 0 1px 5px $tips-shadow;
-
- &.inverted {
- background-color: $black;
- color: $grey-bg;
- }
- }
-}
\ No newline at end of file
diff --git a/src/components/LoadingIndicator/index.jsx b/src/components/LoadingIndicator/index.jsx
deleted file mode 100644
index cc19f4593..000000000
--- a/src/components/LoadingIndicator/index.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * LoadingIndicator
- *
- * Optionally shows error.
- */
-import React from "react";
-import _ from "lodash";
-import PT from "prop-types";
-import styles from "./styles.module.scss";
-
-const LoadingIndicator = ({ error }) => {
- return (
-
- {!error
- ? "Loading..."
- : _.get(error, "response.data.message", error.toString())}
-
- );
-};
-
-LoadingIndicator.propTypes = {
- error: PT.object,
-};
-
-export default LoadingIndicator;
diff --git a/src/components/LoadingIndicator/styles.module.scss b/src/components/LoadingIndicator/styles.module.scss
deleted file mode 100644
index 8066ccf44..000000000
--- a/src/components/LoadingIndicator/styles.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.loading-indicator {
- text-align: center;
-}
diff --git a/src/components/LoadingSpinner/index.jsx b/src/components/LoadingSpinner/index.jsx
deleted file mode 100644
index 8f617e013..000000000
--- a/src/components/LoadingSpinner/index.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * LoadingSpinner
- *
- * Centered Loading Spinner with back overlay
- */
-import React from "react";
-import PT from "prop-types";
-import cn from "classnames";
-import styles from "./styles.module.scss";
-import PuffLoader from "react-spinners/PuffLoader";
-
-const LoadingSpinner = ({ show = false, styleName }) => {
- return (
-
-
- );
-};
-
-LoadingSpinner.propTypes = {
- show: PT.bool,
-};
-
-export default LoadingSpinner;
diff --git a/src/components/LoadingSpinner/styles.module.scss b/src/components/LoadingSpinner/styles.module.scss
deleted file mode 100644
index be9c27267..000000000
--- a/src/components/LoadingSpinner/styles.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "../../styles/include";
-
-.loading-spinner {
- position: fixed;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- background: #0000001a;
- color: white;
- z-index: 1000;
- display: flex;
- justify-content: center;
- align-items: center;
- transition: opacity 1s ease;
- opacity: 1;
-
- &.hide {
- opacity: 0;
- pointer-events: none;
- }
-
- &.show {
- opacity: 1;
- }
-}
\ No newline at end of file
diff --git a/src/components/Modal/PolicyContent/index.jsx b/src/components/Modal/PolicyContent/index.jsx
deleted file mode 100644
index bb49c6246..000000000
--- a/src/components/Modal/PolicyContent/index.jsx
+++ /dev/null
@@ -1,350 +0,0 @@
-import React from "react";
-
-import PageH2 from "../../../components/PageElements/PageH2";
-import PageP from "../../../components/PageElements/PageP";
-
-import styles from "./styles.module.scss";
-
-const PolicyContent = () => (
-
- STOCK ARTWORK POLICY
-
- Your submission CANNOT contain any stock art, clipart, icons, or “free”
- elements from the web. All items you design and submit within a Topcoder
- Design Challenge must be created solely by you (as original artwork) or be
- provided by the client as part of the challenge inputs. Note, we treat
- icons differently.
-
-
- The exception to this rule is when a Design challenge allows Stock
- Artwork. Every challenge clearly states whether or not stock artwork is
- allowed. If the challenge allows it, you will need to abide by the
- following rules:
-
-
-
- If the challenge does not allow Stock Artwork (photos or illustrations),
- it will clearly state this in the challenge details page.
-
-
-
- Stock Illustrations:
- Stock Illustrations are allowed but you must treat them like “stock
- photos”. You are NOT allowed to edit any illustration and claim it as your
- own artwork. You are not allowed to trace stock illustrations and claim
- them as your own artwork. Stock Illustrations MUST include proper
- watermarks and source documentation.
-
- Personal Photos: - You are allowed to create and use your own photography. Make sure to - attribute the photo to yourself. If you include your own photography the - licensing must be free for the customer to use (if you are a prize - winner). -
- Client Supplied Assets: - Any assets supplied as part of the challenge can be used in your designs. - These assets MUST still be declared as part of your submission. -
-
- Things to Remember
-
-
-APPROVED FONT SITES
-
- Typekit
-
- (Limited Library)
-
-
- - Google Fonts - -
-
- - Web Safe Fonts - -ICON POLICY
-
- Topcoder Design Challenges either allow or disallow stock icons as part of
- the creative process. It is critical that you review what is allowed or
- not allowed in each challenge, and if the policy is not clear, you ask in
- the respective challenge forum.
-
-
- When stock icons are allowed, you must treat them like “stock photos.” You
- are not allowed to edit stock icons and claim them as your artwork. You
- are not allowed to trace stock icons and claim them as your artwork. Stock
- icons are only allowed in design challenges that allow “Stock Icons.”
- Stock icons do not require watermarks, but they do require proper source
- documentation and attribution.
-
-
- Every challenge clearly states whether or not Stock Icons are allowed. If
- the challenge allows stock icons, you will need to abide by the following
- rules:
-
-
- If the challenge does not allow Stock Icons, it will clearly state this in
- the challenge details page.
-
-
- Client Supplied Assets: Any assets supplied as part of a challenge can be
- used in your designs. These assets MUST still be declared as part of your
- submission.
-
-
- Things to Remember
-
-
-);
-
-export default PolicyContent;
diff --git a/src/components/Modal/PolicyContent/styles.module.scss b/src/components/Modal/PolicyContent/styles.module.scss
deleted file mode 100644
index 8176abcfc..000000000
--- a/src/components/Modal/PolicyContent/styles.module.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@import "../../../styles/include";
-
-.container {
- line-height: 20px;
-
- p {
- @include font-roboto;
- font-weight: 400;
- color: #404041;
- font-size: 15px;
- color: #2a2a2a;
- font-size: 16px;
- margin-bottom: 20px;
- }
-
- li {
- margin-bottom: 10px;
- }
-
- a {
- text-decoration: underline;
- color: $link-blue;
- }
-
- ol {
- list-style: decimal;
- list-style-type: decimal;
- padding-left: 30px;
-
- ul {
- margin-top: 10px;
- }
- }
-
- ul {
- list-style: disc;
- list-style-type: disc;
- padding-left: 30px;
- }
-}
\ No newline at end of file
diff --git a/src/components/Modal/index.jsx b/src/components/Modal/index.jsx
deleted file mode 100644
index 48a203300..000000000
--- a/src/components/Modal/index.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Modal
- *
- * Modal
- */
-import cn from "classnames";
-import React from "react";
-import PT from "prop-types";
-
-import styles from "./styles.module.scss";
-import { ReactComponent as IconCross} from "../../assets/images/icon-cross.svg";
-
-const Modal = ({
- children,
- fullWidth,
- halfWidth,
- handleClose = (f) => f,
- hideClose = false,
- show = false,
- title,
-}) => {
- return (
- show && (
- -
-
- - You must document your Stock Artwork (photos, illustrations) when - submitting. (This helps a customer find the Stock Artwork for purchasing - or attribution later) - -
- - You are allowed to use stock photos and stock illustrations. If you use - any Stock Artwork (anything!) in your design it MUST BE DOCUMENTED. This - includes Unsplash, Pexels, and client/ challenge provided artwork or - photos. - -
-
- You are only allowed to use Stock Artwork from the provided websites:
-
-
-
- - - iStockPhoto.com - - -
- - - Adobe Stock - - -
- - - Shutterstock - - -
- - - Public Domain Archive - - -
- - - Unsplash - - -
- - - Pexels - - -
- - - Watermark: You MUST keep the stock watermark intact. If the photo is - cropped in such a way that the watermark is not visible, please be sure - to include the entire watermarked image in your source files so - Screeners can review and see where the image is from. When using either - Unsplash or Pexels, where a watermark is not included on the image, - please add either “Unsplash” or “Pexels” text on top of the image - somewhere. - -
- Personal Photos: - You are allowed to create and use your own photography. Make sure to - attribute the photo to yourself. If you include your own photography the - licensing must be free for the customer to use (if you are a prize - winner). -
- Client Supplied Assets: - Any assets supplied as part of the challenge can be used in your designs. - These assets MUST still be declared as part of your submission. -
-
-
- - We screen all design submissions for copyright infringement and proper - source documentation. - -
- All designs must be created by you -
- DO NOT COPY OR TRACE EXISTING ARTWORK -
- - Make sure you understand the Topcoder Terms, Official Design Contest - Rules, and check each contest for more information and what is allowed - in that challenge before you submit. - -
GENERAL FONT POLICIES
--
-
- - Fonts only need to be declared in design challenges, not wireframe or - idea generation challenges. - -
- - All fonts you introduced within your design must be declared when you - submit your design. - -
- Fonts must be from the Font sites listed below. -
- You may not use symbol fonts (webdings, etc.) -
- - You must list the name, source, and URL of each font when submitting (We - do this to help the Customer) - -
- - In general, missing font documentation or two will not affect screening - but Copilots will check source files and you will have to provide ALL - font documentation in Final Fixes in order to get your full payment. It - is best to do it correctly the first time. - -
- - If you have not introduced any new fonts then choose that option in the - drop-down when you are declaring your fonts. - -
-
-
- - Google Fonts - -
-
- - Web Safe Fonts - -
-
-
-
-
You must document your Stock Icons when submitting. --
-
-
-
- - Goal: Help customers find your stock Icons for purchase and - usage during development. - - -
-
- -
-
-
-
- If you use any Stock Icons (anything!) in your design, it{" "} - MUST BE DOCUMENTED. - -
- -
-
- When documenting your icons, you must provide a link to every icon - family you are using, or to each unique icon. It is essential that - everything is easy to find and is from Topcoder approved sources. - --
-
-
-
- Alternatively, you can provide the source only, disregarding each - link. Nevertheless, you may be asked to disclose each link for - each icon. - -
- -
-
Example: “Icons taken from Iconmonstr and FlatIcon” -
-
- -
-
-
-
- You are ONLY ALLOWED to use Stock Icons from these approved sources: - -
-
-
-
-
-
- - Iconmonstr - - -
- -
-
- - The Noun Project - - -
- -
-
- - Feather Icons - - -
- -
-
- - Material Icons - - -
- -
-
- - Open Iconic - - -
- -
-
- - FlatIcon - - -
-
-
-
-
-
SVG/ Vector Format: -
-
-
-
-
-
You MUST use SVG or vector versions of icons. -
- -
-
DO NOT use PNG, JPG, or GIF formats. -
- -
-
If you create your own icons --
-
-
-
- Write down the description of each icon and where to find it in - the design. - -
- -
-
- Make sure they are in a vector format and included in your designs - AND as separate files as part of your submission. We need to - easily be able to download/ export SVG versions of all icons in - your designs. - -
-
- -
-
-
-
-
-
- We screen all design submissions for copyright infringement and proper - source documentation. - -
- -
-
DO NOT COPY OR TRACE EXISTING ARTWORK OR ICONS -
- -
-
- Ensure you understand the Topcoder Terms, Official Design Contest - Rules, and check each contest for more information and what is allowed - in that challenge before you submit. - -
- -
-
Make sure ALL icons are vector/ SVG -
- -
-
No PNG, JPG, or GIF (raster) icons allowed. -
-
-
- )
- );
-};
-
-Modal.propTypes = {
- children: PT.node,
- handleClose: PT.func,
- hideClose: PT.bool,
- show: PT.bool,
- title: PT.string,
-};
-
-export default Modal;
diff --git a/src/components/Modal/styles.module.scss b/src/components/Modal/styles.module.scss
deleted file mode 100644
index eb9542065..000000000
--- a/src/components/Modal/styles.module.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-@import '../../styles/include';
-
-.modalContainer {
- @include font-barlow;
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- z-index: 1000;
-
- .modalContent {
- width: 80%;
- max-width: 350px;
- min-height: 300px;
- max-height: calc(100vh - 100px);
- margin: 50px auto 0;
- background: white;
- position: relative;
- border-radius: 5px;
- padding: 26px;
- overflow: auto;
- font-size: 15px;
- line-height: 1.3em;
- @include mobile {
- overflow: hidden;
- }
-
- .stickyHeader {
- position: sticky;
- top: 0;
- z-index: 1;
- }
-
- .titleContainer {
- display: flex;
- justify-content: center;
- color: $blue1;
- text-transform: uppercase;
- margin-bottom: 22px;
- font-weight: bold;
- }
-
- form {
- margin-top: 30px;
-
- .modalButtonContainer {
- display: flex;
- justify-content: center;
- }
- }
- }
-
- .full-width {
- max-width: 100%;
- }
-
- .half-width {
- max-width: 50%;
- @include mobile {
- max-width: 100%;
- }
- }
-
- .modalBackground {
- background: #00000055;
- height: 100vh;
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- z-index: -1;
- }
-
- .modalCloseBtn {
- position: absolute;
- top: 23px;
- right: 20px;
- cursor: pointer;
- height: 27px;
- width: 27px;
- padding: 6px;
- border-radius: 100%;
- background: white;
- }
-
- .modalCloseBtn * {
- stroke-width: 1px !important;
- }
-}
diff --git a/src/components/Page/index.jsx b/src/components/Page/index.jsx
deleted file mode 100644
index e34e3a383..000000000
--- a/src/components/Page/index.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Page
- *
- * Handles common stuff for pages.
- * Should wrap each page.
- */
-import cn from "classnames";
-import PT from "prop-types";
-import React from "react";
-import styles from "./styles.module.scss";
-
-const Page = ({ children, styleName, ...props }) => {
- return (
- handleClose(e)}
- role="button"
- tabIndex={0}
- >
-
-
-
-
- handleClose(e)}
- />
- )}
-
-
- {children}
- {title}
- {!hideClose && (
-
- {children}
-
- );
-};
-
-Page.propTypes = {
- children: PT.node,
-};
-
-export default Page;
diff --git a/src/components/Page/styles.module.scss b/src/components/Page/styles.module.scss
deleted file mode 100644
index 4e4173381..000000000
--- a/src/components/Page/styles.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "../../styles/include";
-
-.page {
- padding: 0 32px 32px;
-
- @include mobile {
- padding: 0px;
- }
-}
\ No newline at end of file
diff --git a/src/components/PageContent/styles.module.scss b/src/components/PageContent/styles.module.scss
deleted file mode 100644
index 327420160..000000000
--- a/src/components/PageContent/styles.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@import "../../styles/include";
-
-.page-content {
- margin: 32px 0;
- padding: 40px 0;
-
- @include mobile {
- padding: 20px;
- }
-
- background: white;
- border-radius: 8px;
- position: relative;
-}
-
-.container {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
-}
\ No newline at end of file
diff --git a/src/components/PageDivider/index.jsx b/src/components/PageDivider/index.jsx
deleted file mode 100644
index d8e0dc0b1..000000000
--- a/src/components/PageDivider/index.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * PageDivider
- *
- * A Divider (line).
- */
-import cn from "classnames";
-import styles from "./styles.module.scss";
-
-const PageDivider = ({ styleName, ...props }) => {
- return ;
-};
-
-export default PageDivider;
diff --git a/src/components/PageDivider/styles.module.scss b/src/components/PageDivider/styles.module.scss
deleted file mode 100644
index 19366671e..000000000
--- a/src/components/PageDivider/styles.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.page-divider {
- height: 1px;
- border-bottom: 1px solid #ccc;
- margin: 10px 0;
- padding-top: 20px;
- width: 100%;
-}
diff --git a/src/components/PageListInput/index.jsx b/src/components/PageListInput/index.jsx
deleted file mode 100644
index 2bb0f382c..000000000
--- a/src/components/PageListInput/index.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * PageListInput
- *
- * A List Of grouped Inputs, used in build my profile page
- */
-import cn from "classnames";
-import PT from "prop-types";
-import React from "react";
-
-import Button from "../../components/Button";
-import { BUTTON_SIZE, BUTTON_TYPE } from "../../constants/";
-import { currencyFormat } from "../../utils/";
-import styles from "./styles.module.scss";
-
-const PageListInput = ({
- name,
- addListInputItem,
- styleName,
- children,
- canAdd,
- pageCost,
-}) => {
- return (
-
-
- );
-};
-
-PageListInput.propTypes = {
- addListInputItem: PT.func,
- children: PT.node,
-};
-
-export default PageListInput;
diff --git a/src/components/PageListInput/styles.module.scss b/src/components/PageListInput/styles.module.scss
deleted file mode 100644
index 6d1d16d48..000000000
--- a/src/components/PageListInput/styles.module.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@import "../../styles/include";
-
-.page-list-input {
- .add-listinput-item-button {
- color: $green1;
- display: flex;
- align-items: center;
- font-weight: 430;
- width: 100%;
-
- &>* {
- cursor: pointer;
- align-items: center;
- display: flex;
- }
-
- .pageText {
- @include font-roboto;
- font-weight: 700;
- font-size: 14px;
- color: $black;
- letter-spacing: 0.8px;
- line-height: 12px;
- margin-bottom: 8px;
- }
- }
-}
\ No newline at end of file
diff --git a/src/components/Progress/index.jsx b/src/components/Progress/index.jsx
deleted file mode 100644
index 1829ff856..000000000
--- a/src/components/Progress/index.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Onboard Progress
- *
- * Onboard Progress (level) Indicator
- */
-import _ from "lodash";
-import PT from "prop-types";
-import React, { useState } from "react";
-import cn from "classnames";
-
-import ProgressDonutChart from "../../components/ProgressDonutChart";
-import ProgressPopup from "../../components/ProgressPopup";
-import config from "../../../config";
-import { MAX_COMPLETED_STEP } from "../../constants";
-import { PROGRESS_LEVELS as originalLevels } from "../../constants/products/WebsiteDesignLegacy";
-import { setCookie, getCookie } from "../../autoSaveBeforeLogin";
-import { ReactComponent as IconThreeDots} from "../../assets/images/icon-three-dots-vertical.svg";
-
-import styles from "./styles.module.scss";
-
-const Progress = ({ level, styleName, setStep, ...props }) => {
- const [progressPopupOpen, setProgressPopupOpen] = useState(false);
- let maxCompletedStep = getCookie(MAX_COMPLETED_STEP) || 0;
- if (
- _.isUndefined(maxCompletedStep) ||
- _.isNull(maxCompletedStep) ||
- parseInt(maxCompletedStep) < level
- ) {
- setCookie(MAX_COMPLETED_STEP, level, config.AUTO_SAVED_COOKIE_EXPIRED_IN);
- maxCompletedStep = level;
- }
-
- const levels = _.filter(originalLevels, (l) => l.visibleInProgressIndicator);
-
- const trueLevel = _.find(levels, (l) => l.trueIndex === level);
-
- return (
-
-
- {children}
-
-
- addListInputItem(name)}
- >
- {canAdd && (
-
-
-
- )}
- NEED ANOTHER PAGE?
- -
- setProgressPopupOpen(false)}
- />
-
- );
-};
-
-Progress.propTypes = {
- level: PT.number,
-};
-
-export default Progress;
diff --git a/src/components/Progress/styles.module.scss b/src/components/Progress/styles.module.scss
deleted file mode 100644
index 34aa416d8..000000000
--- a/src/components/Progress/styles.module.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@import "../../styles/include";
-
-.onboard-progress {
- position: absolute;
- right: 30px;
- top: 20px;
- display: flex;
- align-items: center;
-
- @include mobile {
- position: relative;
- right: auto;
- top: auto;
- }
-}
-
-.level-container {
- display: flex;
- align-items: flex-end;
- flex-direction: column;
- color: $black;
-
- @include mobile {
- flex: 1;
- align-items: flex-start;
- }
-
- .level {
- margin-bottom: 8px;
-
- .level-num {
- font-weight: bold;
- }
-
- .muted {
- color: #ddd;
- }
- }
-
- .label {
- @include mobile {
- @include font-barlow;
- line-height: 20px;
- text-transform: uppercase;
- font-weight: 600;
- }
- }
-}
-
-.progress-donut-chart {}
-
-.progress-popup-toggle {
- cursor: pointer;
-
- * {
- fill: $green1;
- }
-}
\ No newline at end of file
diff --git a/src/components/ProgressDonutChart/index.jsx b/src/components/ProgressDonutChart/index.jsx
deleted file mode 100644
index d80e811c6..000000000
--- a/src/components/ProgressDonutChart/index.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * ProgressDonutChart
- *
- * Progress Donut Chart to display on top-right of the page
- */
-import React, { useState } from "react";
-import PT from "prop-types";
-import cn from "classnames";
-import styles from "./styles.module.scss";
-import Chart from "react-apexcharts";
-
-const ProgressDonutChart = ({ progress, styleName, ...props }) => {
- // chart options to display donut chart
- const [chartOptions] = useState({
- chart: {
- height: 150,
- width: 120,
- type: "radialBar",
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: "40%",
- },
- dataLabels: {
- name: {
- show: false,
- },
- value: {
- show: false,
- },
- },
- },
- },
- stroke: {
- lineCap: "round",
- },
- fill: {
- colors: ["#9d41c9"],
- },
- });
- return (
-
-
-
- STEP {trueLevel.showIndex}
- / {levels.length}
-
- {trueLevel.label}
- setProgressPopupOpen((o) => !o)}
- role="tab"
- tabIndex={0}
- >
-
-
-
- );
-};
-
-ProgressDonutChart.propTypes = {
- progress: PT.number,
-};
-
-export default ProgressDonutChart;
diff --git a/src/components/ProgressDonutChart/styles.module.scss b/src/components/ProgressDonutChart/styles.module.scss
deleted file mode 100644
index 8e32b125f..000000000
--- a/src/components/ProgressDonutChart/styles.module.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import "../../styles/include";
-
-.progress-donut-chart {}
-
-.desktop-chart {
- @include mobile {
- display: none;
- }
-}
-
-.mobile-chart {
- @include desktop {
- display: none;
- }
-}
\ No newline at end of file
diff --git a/src/components/ProgressPopup/index.jsx b/src/components/ProgressPopup/index.jsx
deleted file mode 100644
index c8c91aec0..000000000
--- a/src/components/ProgressPopup/index.jsx
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * ProgressPopup
- *
- * Three dots Progress Popup
- */
-import { useNavigate } from "react-router-dom";
-import cn from "classnames";
-import PT from "prop-types";
-import React, { useEffect, useRef } from "react";
-import { IconCheck } from '../../../src-ts'
-import { ReactComponent as IconCross } from "../../assets/images/icon-cross.svg";
-import styles from "./styles.module.scss";
-
-const ProgressPopup = ({
- level,
- maxStep,
- levels,
- open,
- setStep,
- handleClose = (e) => e,
- styleName,
- ...props
-}) => {
- const useOutsideAlerter = (ref) => {
- useEffect(() => {
- function handleClickOutside(event) {
- if (ref.current && !ref.current.contains(event.target)) {
- handleClose(event);
- }
- }
-
- document.addEventListener("mousedown", handleClickOutside);
- return () => {
- document.removeEventListener("mousedown", handleClickOutside);
- };
- }, [ref]);
- };
-
- const wrapperRef = useRef(null);
- useOutsideAlerter(wrapperRef);
- const navigate = useNavigate();
- // add a class to show if it's done or current or notDone yet
- const getLevelClass = (curLevel) => {
- return curLevel.trueIndex === level
- ? "current"
- : curLevel.trueIndex < maxStep
- ? "done"
- : "";
- };
- return (
- <>
- {open && (
-
-
-
-
-
-
-
-
- handleClose(e)} />
-
- )}
-
- );
-};
-
-ProgressPopup.propTypes = {
- level: PT.number,
- maxStep: PT.number,
- levels: PT.array,
- open: PT.bool,
- handleClose: PT.func,
-};
-
-export default ProgressPopup;
diff --git a/src/components/ProgressPopup/styles.module.scss b/src/components/ProgressPopup/styles.module.scss
deleted file mode 100644
index 34117296b..000000000
--- a/src/components/ProgressPopup/styles.module.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-@import "../../styles/include";
-
-.progress-popup {
- position: absolute;
- right: 10px;
- top: 85px;
- min-height: 150px;
- background: #fff;
- padding: 20px 20px 10px 20px;
- box-shadow: 0 0 6px #aaa;
- border-radius: 4px;
-
- .level {
- margin: 20px 0;
- display: flex;
- align-items: center;
-
- &.done,
- &.current {
- cursor: pointer;
- }
-
- .level-check-icon {
- width: 24px;
- height: 24px;
- background: #f4f4f4;
- border-radius: 50%;
- margin-right: 10px;
-
- &.done {
- background: #06d6a0;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .icon-check {
- height: 14px;
-
- * {
- fill: #ffffff;
- }
- }
- }
-
- &.current {
- border: 2px solid #06d6a0;
- background: #ffffff;
- }
- }
- }
-
- .close-btn {
- position: absolute;
- top: 21px;
- right: 18px;
- cursor: pointer;
- height: 15px;
- width: 15px;
-
- * {
- stroke-width: 1px !important;
- }
- }
-}
\ No newline at end of file
diff --git a/src/components/ReactSelect/index.jsx b/src/components/ReactSelect/index.jsx
deleted file mode 100644
index ea6801dcc..000000000
--- a/src/components/ReactSelect/index.jsx
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * ReactSelect
- *
- * A wrapper of react select control.
- */
-import React from "react";
-import PT from "prop-types";
-import Select from "react-select";
-import styles from "./styles.module.scss";
-
-const ReactSelect = (props) => {
- const customStyles = {
- control: (provided, state) => ({
- ...provided,
- minHeight: "40px",
- border: props.style2 ? "0" : "1px solid #aaaaab",
- borderColor: state.isFocused ? "#55a5ff" : "#aaaaab",
- boxShadow: props.style2
- ? "none"
- : state.isFocused
- ? "0 0 2px 1px #cee6ff"
- : provided.boxShadow,
- }),
- menu: (provided) => ({
- ...provided,
- minHeight: "40px",
- zIndex: 10,
- }),
- valueContainer: (provided) => ({
- ...provided,
- padding: "2px 6px",
- }),
- input: (provided) => ({
- ...provided,
- margin: "0px",
- height: "auto",
- padding: "0",
- fontSize: props.style2 ? "20px" : "14px",
- paddingLeft: props.style2 ? "8px" : "0",
- }),
- indicatorSeparator: () => ({
- display: "none",
- }),
- indicatorsContainer: (provided) => ({
- ...provided,
- height: "auto",
- marginTop: "-5px",
- }),
- option: (provided) => ({
- ...provided,
- minHeight: "32px",
- }),
- placeholder: (provided) => ({
- ...provided,
- color: "#AAAAAA",
- fontFamily: "Roboto",
- fontSize: props.style2 ? "20px" : "14px",
- lineHeight: "22px",
- textAlign: "left",
- fontWeight: "400",
- paddingLeft: props.style2 ? "5px" : "0",
- marginTop: props.style2 ? "-5px" : "0",
- }),
- singleValue: (provided) => ({
- paddingLeft: props.style2 ? "5px" : "",
- marginTop: props.style2 ? "-5px" : "",
- fontSize: props.style2 ? "20px" : "",
- lineHeight: "24px",
- ...provided,
- }),
- multiValue: (provided) => ({
- ...provided,
- margin: "3px 3px",
- color: "#AAAAAA",
- fontFamily: "Roboto",
- fontSize: "14px",
- lineHeight: "22px",
- textAlign: "left",
- borderRadius: "5px",
- }),
- };
-
- return (
-
- {levels.map((level, levelIndex) => (
-
- {
- if (getLevelClass(level) !== "") {
- setStep(level.trueIndex);
- navigate(level.url);
- }
- }}
- role="tab"
- tabIndex={0}
- >
-
- ))}
-
- {getLevelClass(level) === "done" && (
-
- {level.label}
-
-
- );
-};
-
-ReactSelect.propTypes = {
- value: PT.string.isRequired,
- onChange: PT.func.isRequired,
- placeholder: PT.string,
- error: PT.string,
- isMulti: PT.bool,
- onBlur: PT.func,
- onFocus: PT.func,
- onInputChange: PT.func,
- options: PT.arrayOf(
- PT.shape({
- value: PT.string.isRequired,
- label: PT.string.isRequired,
- }).isRequired
- ),
- noOptionsText: PT.string,
- disabled: PT.bool,
- style2: PT.bool,
-};
-
-export default ReactSelect;
diff --git a/src/components/ReactSelect/styles.module.scss b/src/components/ReactSelect/styles.module.scss
deleted file mode 100644
index 944f692c7..000000000
--- a/src/components/ReactSelect/styles.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.error {
- :first-child {
- border-color: #ff5b52;
- }
-}
-
-.select-wrapper {
- input {
- border: none !important;
- box-shadow: none !important;
- transition: none !important;
- height: 28px;
- line-height: 24px;
- }
-}
-
-.react-select__option {
- min-height: 32px;
-}
diff --git a/src/components/ServicePrice/index.jsx b/src/components/ServicePrice/index.jsx
deleted file mode 100644
index 95ec34472..000000000
--- a/src/components/ServicePrice/index.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Tab element
- */
-import PageRow from "../PageElements/PageRow";
-import PT from "prop-types";
-import React from "react";
-import styles from "./styles.module.scss";
-import { ReactComponent as WebsiteDesignIcon} from "../../assets/images/website-design.svg";
-import HelpIcon from "../HelpIcon";
-import { currencyFormat } from "../../utils/";
-
-const ServicePrice = ({
- stickerPrice,
- showIcon,
- icon,
- serviceType,
- price,
- duration = 1,
- hideTitle = false,
-}) => {
- return (
-
-
-
-
- );
-};
-
-ServicePrice.defaultProps = {
- price: 0,
-};
-
-ServicePrice.propTypes = {
- price: PT.number,
-};
-
-export default ServicePrice;
diff --git a/src/components/ServicePrice/styles.module.scss b/src/components/ServicePrice/styles.module.scss
deleted file mode 100644
index 6f616daf0..000000000
--- a/src/components/ServicePrice/styles.module.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-@import "../../styles/include";
-
-.container {
-
- .iconWrapper {
- & {
- width: 48px !important;
- height: 48px;
- margin-right: 16px;
- min-width: auto !important;
- padding-right: 0 !important;
- }
- }
-
- svg {
- margin-right: 16px;
- }
-
- .inline {
- display: flex;
- flex-direction: row;
-
- @include mobile {
- width: 100%;
- }
- }
-
- @include mobile {
- display: flex;
- flex-direction: row;
- }
-}
-
-.filler {
- display: flex;
-
- @include mobile {
- flex: 1;
- }
-}
-
-.serviceTitle {
- margin-top: 16px;
- @include font-barlow;
- font-weight: 600;
- font-size: 16px;
- text-transform: uppercase;
-}
-
-.priceAndDuration {
- @include font-barlow;
- margin-top: 8px;
- font-size: 20px;
- line-height: 20px;
- color: $black;
- display: flex;
-
- @include mobile {
- justify-content: space-between;
- }
-
-
- .discount {
- color: $discount-green;
- }
-
- .stickerPrice {
- color: $gray-80;
- text-decoration: line-through;
- margin-right: 4px;
- }
-
- .separator {
- width: 2px;
- height: 20px;
- background: #D4D4D4;
- border-radius: 1px;
- margin: 0px 16px;
- padding: 1px;
- }
-
- .days {
- display: inline;
- }
-
- svg {
- margin-left: 9px;
-
- @include mobile {
- margin-left: 84px;
- width: 20px;
- height: 20px;
- }
- }
-}
\ No newline at end of file
diff --git a/src/components/Slider/index.jsx b/src/components/Slider/index.jsx
deleted file mode 100644
index 28e56f0ff..000000000
--- a/src/components/Slider/index.jsx
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * Slider
- *
- * Slider
- */
-import React, { useCallback, useMemo, useRef } from "react";
-import PT from "prop-types";
-import Carousel from "react-elastic-carousel";
-
-import { ReactComponent as ImgArrowRight} from "../../assets/images/arrow-right.svg";
-
-import styles from "./styles.module.scss";
-import "./styles.scss";
-
-const SliderArrow = ({ type, onClick, isEdge }) => {
- const isPrevButton = type === "PREV";
-
- return (
-
- );
-};
-
-const AUTOPLAY_SPEED = 4000; //in ms
-
-const Slider = ({ children, className }) => {
- const carouselRef = useRef();
- const resetTimeoutRef = useRef();
-
- const breakPoints = useMemo(
- () => [
- { width: 1, itemsToShow: 1, enableAutoPlay: true },
- { width: 720, itemsToShow: 2 },
- { width: 980, itemsToShow: 3 },
- ],
- []
- );
-
- const handleNextEnd = useCallback(({ index }) => {
- if (!carouselRef.current) {
- return;
- }
-
- if (resetTimeoutRef.current) {
- clearTimeout(resetTimeoutRef.current);
- }
-
- const totalPages = carouselRef.current.state.pages.length;
-
- console.log({
- carouselRef: carouselRef.current,
- getNumOfPages: carouselRef.current.getNumOfPages(),
- });
-
- if (index + 1 === totalPages) {
- if (carouselRef?.current?.goTo) {
- resetTimeoutRef.current = setTimeout(() => {
- if (carouselRef?.current?.goTo) {
- carouselRef.current.goTo(0);
- }
- }, AUTOPLAY_SPEED);
- }
- }
- }, []);
-
- return (
- // @ts-ignore
- {showIcon && icon && <>{icon}}
- {showIcon && !icon &&
- {!hideTitle &&
- {serviceType}
} -
- {stickerPrice && (
-
- {currencyFormat(stickerPrice)}
-
- )}
- {currencyFormat(price)}
-
- {duration} Days
-
-
- The price and project length is dynamic and dependent on the
- variables selected as you define your work.
-
-
-
- {item}
-
- );
- })}
- -
-
- You will receive up to five unique visual designs for the main page
- of your website, in an industry-standard format. Visual designs are
- the first step in creating a functional website. Topcoder can help
- you with launching your website once you have approved your design.
-
-
-
-
- ),
- aboutBannerTitle: "ABOUT WEBSITE DESIGN",
- aboutBannerContent: (
- <>
- - Topcoder design experts will take all of the information you provide - below, and create visual designs for your website that fit your - industry and match your desired look & feel. We've done this for - hundreds of customers and will work with you to create your ideal - design. -
- - ), - breadcrumbs: { - basic: [ - { url: ROUTES.DASHBOARD_PAGE, name: "My work" }, - { url: ROUTES.INTAKE_FORM, name: "Start work" }, - { url: "#", name: "Website Design" }, - ], - review: [ - { url: ROUTES.DASHBOARD_PAGE, name: "My work" }, - { url: ROUTES.INTAKE_FORM, name: "Start work" }, - { url: ROUTES.WEBSITE_DESIGN, name: "Website design" }, - { url: "#", name: "Review & Payment" }, - ], - }, - }, - { - type: WorkType.data, - title: "Data Exploration", - subTitle: "Get insights about your data from Topcoder experts.", - shortDescription: "Uncover What's Interesting About Your Data", - description: - "We accumulate data every day in the course of life and business, yet rarely have the time to give it a closer look. Get multiple fresh, expert perspectives to identify the patterns and relationships in your data. They might just be the key to your next 'Aha' moment.", - price: workPriceData.getPrice(workPriceData), - stickerPrice: workPriceData.packages?.base?.price, - duration: `${dataExplorationConfigs.DEFAULT_DURATION} Days`, - featured: true, - startRoute: `${selfServiceRootRoute}/new/data-exploration/basic-info`, - basePath: "data-exploration", - bgImage: imgProductDataExploration, - helperBannerTitle: "WHAT WILL I GET?", - helperBannerContent: ( - <> -- Topcoder data experts will create a custom report for you with: -
- In Data Exploration, multiple data science experts uncover the most - significant patterns and relationships in your data. Unlock the full - potential of your data with expert insights presented in an - easy-to-understand format. -
- ), - breadcrumbs: { - basic: [ - { url: ROUTES.DASHBOARD_PAGE, name: "My work" }, - { url: ROUTES.INTAKE_FORM, name: "Start work" }, - { url: "#", name: "Data exploration" }, - ], - review: [ - { url: ROUTES.DASHBOARD_PAGE, name: "My work" }, - { url: ROUTES.INTAKE_FORM, name: "Start work" }, - { url: ROUTES.DATA_EXPLORATION, name: "Data exploration" }, - { url: "#", name: "Review & Payment" }, - ], - }, - }, - { - type: WorkType.problem, - title: "Problem Statement & Data Advisory", - subTitle: - "Translate your data science idea into an actionable data science approach.", - shortDescription: "The easiest way to get started in data science", - description: - "Problem Statement & Data Advisory is for those asking themselves: How can I apply data science to this idea or goal? How will I interpret solutions, and how will that help me take action? What data do I need?", - price: workPriceProblem.getPrice(workPriceProblem), - stickerPrice: workPriceProblem.packages?.base?.price, - duration: `${dataAdvisoryConfigs.DEFAULT_DURATION} Days`, - featured: true, - startRoute: `${selfServiceRootRoute}/new/data-advisory/basic-info`, - basePath: "data-advisory", - helperBannerTitle: "WHAT WILL I RECEIVE?", - bgImage: imgProductProblemStatement, - helperBannerContent: ( - <> --
- Problem Statement & Data Advisory is for those asking themselves: - How can I apply data science to this idea or goal? How will I interpret - solutions, and how will that help me take action? What data do I need? -
- ), - breadcrumbs: { - basic: [ - { url: ROUTES.DASHBOARD_PAGE, name: "My work" }, - { url: ROUTES.INTAKE_FORM, name: "Start work" }, - { url: "#", name: "Problem statement & data advisory" }, - ], - review: [ - { url: ROUTES.DASHBOARD_PAGE, name: "My work" }, - { url: ROUTES.INTAKE_FORM, name: "Start work" }, - { - url: ROUTES.PROBLEM_STATEMENT, - name: "Problem statement & data advisory", - }, - { url: "#", name: "Review & Payment" }, - ], - }, - }, - { - type: WorkType.findData, - title: "Find Me Data", - subTitle: "Get the data you need to meet your analysis goals.", - shortDescription: "Our Experts Source Useful Data Sets For You", - description: - "Sometimes data is the only thing standing between you and something great. Tell us what you're solving for, and let our experts find the data to get you started now.", - price: workPriceFindData.getPrice(workPriceFindData), - stickerPrice: workPriceFindData.packages?.base?.price, - duration: `${findMeDataConfigs.DEFAULT_DURATION} Days`, - featured: true, - startRoute: `${selfServiceRootRoute}/new/find-me-data/basic-info`, - basePath: "find-me-data", - bgImage: imgProductFindMeData, - helperBannerTitle: "WHAT WILL I RECEIVE?", - helperBannerContent: ( - <> --
- Find Me Data is designed for business leaders, researchers or any - individual who has a data question and is struggling to find the data - to answer it. -
--
Use Find Me Data if you:
-
-
-
-
-
-
-
-
-
-
-
- state.toastr}
- transitionIn="fadeIn"
- transitionOut="fadeOut"
- progressBar
- closeOnToastrClick
- />
-
-
-
-
-
-
-
-
-)
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 000000000..429e95b7d
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,15 @@
+import { StrictMode } from 'react'
+import { createRoot, Root } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+
+import { PlatformApp } from '~/apps/platform'
+
+const root: Root = createRoot(document.getElementById('root') as Element)
+
+root.render(
+
Hi
diff --git a/src-ts/lib/contact-support-form/contact-support-form.config.ts b/src/libs/shared/lib/components/contact-support-form/contact-support-form.config.ts
similarity index 99%
rename from src-ts/lib/contact-support-form/contact-support-form.config.ts
rename to src/libs/shared/lib/components/contact-support-form/contact-support-form.config.ts
index c41d6dff9..acba4f009 100644
--- a/src-ts/lib/contact-support-form/contact-support-form.config.ts
+++ b/src/libs/shared/lib/components/contact-support-form/contact-support-form.config.ts
@@ -1,4 +1,4 @@
-import { FormDefinition, validatorEmail, validatorRequired } from '../form'
+import { FormDefinition, validatorEmail, validatorRequired } from '~/libs/ui'
export enum ContactSupportFormField {
email = 'email',
diff --git a/src-ts/lib/contact-support-form/contact-support-functions/contact-support-store/contact-support-request.model.ts b/src/libs/shared/lib/components/contact-support-form/contact-support-functions/contact-support-store/contact-support-request.model.ts
similarity index 100%
rename from src-ts/lib/contact-support-form/contact-support-functions/contact-support-store/contact-support-request.model.ts
rename to src/libs/shared/lib/components/contact-support-form/contact-support-functions/contact-support-store/contact-support-request.model.ts
diff --git a/src/libs/shared/lib/components/contact-support-form/contact-support-functions/contact-support-store/contact-support.store.ts b/src/libs/shared/lib/components/contact-support-form/contact-support-functions/contact-support-store/contact-support.store.ts
new file mode 100644
index 000000000..f7354cd40
--- /dev/null
+++ b/src/libs/shared/lib/components/contact-support-form/contact-support-functions/contact-support-store/contact-support.store.ts
@@ -0,0 +1,9 @@
+import { EnvironmentConfig } from '~/config'
+import { xhrPostAsync } from '~/libs/core'
+
+import { ContactSupportRequest } from './contact-support-request.model'
+
+export async function submitRequestAsync(request: ContactSupportRequest): Promise
+ Unfortunately, you are not permitted to access the site. If you feel you should be able to, please
+ {' '}
+
+ contact us
+
+ .
+
+ {errString ?? error.response?.data?.result?.content ?? error.message ?? error}
+ {' '}
+ Please try again later or
+ {' '}
+
+ Contact Support
+
+ .
+ {fileName}
+
+
+
+
+
+)
+
+const reactRouterDecorator: Decorator = Story => (
+
- ), portalRootEl,
- )
+ )
+ }
+
+ if (usePortal) {
+ const portalRootEl: HTMLElement | null = document.getElementById(PageSubheaderPortalId)
+
+ if (portalRootEl) {
+ return createPortal(
+ renderBreadcrumbs(),
+ portalRootEl,
+ )
+ }
+
+ return <>
+ }
+
+ return renderBreadcrumbs()
}
export default Breadcrumb
diff --git a/src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx b/src/libs/ui/lib/components/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx
similarity index 100%
rename from src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx
rename to src/libs/ui/lib/components/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx
diff --git a/src-ts/lib/breadcrumb/breadcrumb-item/breadcrumb-item.model.ts b/src/libs/ui/lib/components/breadcrumb/breadcrumb-item/breadcrumb-item.model.ts
similarity index 100%
rename from src-ts/lib/breadcrumb/breadcrumb-item/breadcrumb-item.model.ts
rename to src/libs/ui/lib/components/breadcrumb/breadcrumb-item/breadcrumb-item.model.ts
diff --git a/src-ts/lib/breadcrumb/breadcrumb-item/index.ts b/src/libs/ui/lib/components/breadcrumb/breadcrumb-item/index.ts
similarity index 100%
rename from src-ts/lib/breadcrumb/breadcrumb-item/index.ts
rename to src/libs/ui/lib/components/breadcrumb/breadcrumb-item/index.ts
diff --git a/src-ts/lib/breadcrumb/index.ts b/src/libs/ui/lib/components/breadcrumb/index.ts
similarity index 100%
rename from src-ts/lib/breadcrumb/index.ts
rename to src/libs/ui/lib/components/breadcrumb/index.ts
diff --git a/src/libs/ui/lib/components/button/Button.docs.mdx b/src/libs/ui/lib/components/button/Button.docs.mdx
new file mode 100644
index 000000000..6ff62e6e9
--- /dev/null
+++ b/src/libs/ui/lib/components/button/Button.docs.mdx
@@ -0,0 +1,74 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+
+import * as ButtonStories from './Button.stories';
+
+
+
+# Button
+
+Button is a clickable interactive element that triggers a response.
+
+You can place text and icons inside of a button.
+
+Buttons are often used for form submissions and to toggle elements into view.
+
+## Usage
+
+The component comes as different styles such as `primary`, `secondary`, `link`;
+different variants such as `negative`, `danger` and `warning`;
+and have different sizes which you can use to alter the look and feel of the button.
+
+### Button Styles
+
+
+
+### Button Sizes
+
+
+
+### Button Variants
+
+#### Light Buttons
+
+
+#### Danger
+
+
+#### Full Width Button
+Any button style (`primary`, `secondary`, `link`), size (`sm`, `md`, `lg`, `xl`) and variant can take full width (`fullWidth`).
+
+
+
+### Button with Icon
+
+
+## Inputs
+
+Button has the following properties:
+
+
+
+
+)
+
+export const Primary: Story = {
+ args: {
+ label: 'Primary Button',
+ primary: true,
+ },
+}
+
+export const Secondary: Story = {
+ args: {
+ label: 'Secondary Button',
+ secondary: true,
+ },
+}
+
+export const Link: Story = {
+ args: {
+ label: 'Link Button',
+ link: true,
+ },
+}
+
+export const WithIconLeft: Story = {
+ args: {
+ icon: IconSolid.ArrowLeftIcon,
+ label: 'Button',
+ primary: true,
+ },
+}
+export const WithIconRight: Story = {
+ args: {
+ icon: IconSolid.ArrowRightIcon,
+ iconToRight: true,
+ label: 'Button',
+ primary: true,
+ },
+}
+export const OnlyIcon: Story = {
+ args: {
+ icon: IconSolid.CheckIcon,
+ primary: true,
+ },
+}
+
+/**
+ * Button sizes
+ * Hidden from the storybook sidebar
+ */
+
+export const _hidden_PrimarySmSize: Story = {
+ args: {
+ label: 'Small (sm) Button',
+ primary: true,
+ size: 'sm',
+ },
+ parameters: {
+ status: { type: 'hidden' },
+ },
+}
+export const _hidden_PrimaryMdSize: Story = {
+ args: {
+ label: 'Medium (md) Button',
+ primary: true,
+ size: 'md',
+ },
+}
+export const _hidden_PrimaryLgSize: Story = {
+ args: {
+ label: 'Large (lg) Button',
+ primary: true,
+ size: 'lg',
+ },
+}
+export const _hidden_PrimaryXlSize: Story = {
+ args: {
+ label: 'Extra Large (xl) Button',
+ primary: true,
+ size: 'xl',
+ },
+}
+
+/**
+ * Button Variants
+ * Hidden from the storybook sidebar
+ */
+
+export const _hidden_LightPrimary: Story = {
+ args: {
+ label: 'Light Primary Button',
+ light: true,
+ primary: true,
+ },
+ decorators: [LightButtonDecorator],
+}
+
+export const _hidden_LightSecondary: Story = {
+ args: {
+ label: 'Light Secondary Button',
+ light: true,
+ secondary: true,
+ },
+ decorators: [LightButtonDecorator],
+}
+
+export const _hidden_LightLink: Story = {
+ args: {
+ label: 'Light Link Button',
+ light: true,
+ link: true,
+ },
+ decorators: [LightButtonDecorator],
+}
+
+export const _hidden_PrimaryDanger: Story = {
+ args: {
+ label: 'Danger Primary Button',
+ primary: true,
+ variant: 'danger',
+ },
+}
+
+export const _hidden_SecondaryDanger: Story = {
+ args: {
+ label: 'Danger Secondary Button',
+ secondary: true,
+ variant: 'danger',
+ },
+}
+
+export const _hidden_LinkDanger: Story = {
+ args: {
+ label: 'Danger Link Button',
+ link: true,
+ variant: 'danger',
+ },
+}
+export const _hidden_RoundButton: Story = {
+ args: {
+ icon: IconOutline.ChevronDownIcon,
+ primary: true,
+ variant: 'round',
+ },
+}
+
+export const _hidden_FullWidth: Story = {
+ args: {
+ fullWidth: true,
+ label: 'Full Width Button',
+ primary: true,
+ },
+}
diff --git a/src/libs/ui/lib/components/button/Button.tsx b/src/libs/ui/lib/components/button/Button.tsx
new file mode 100644
index 000000000..860e9bfdc
--- /dev/null
+++ b/src/libs/ui/lib/components/button/Button.tsx
@@ -0,0 +1,25 @@
+/* eslint-disable react/button-has-type */
+import { FC, ReactNode } from 'react'
+
+import { BaseButton, BaseButtonProps } from './base-button'
+import { IconButton, IconButtonProps } from './icon-button'
+
+export type ButtonSize = 'sm'| 'md'| 'lg'| 'xl'
+export enum ButtonVariants {
+ danger = 'danger',
+ warning = 'warning',
+}
+
+export interface ButtonProps extends IconButtonProps, BaseButtonProps {
+ children?: ReactNode
+}
+
+const Button: FC
+
+ )
+
+ return (
+
diff --git a/src-ts/lib/content-layout/index.ts b/src/libs/ui/lib/components/content-layout/index.ts
similarity index 100%
rename from src-ts/lib/content-layout/index.ts
rename to src/libs/ui/lib/components/content-layout/index.ts
diff --git a/src-ts/lib/default-member-icon/DefaultMemberIcon.tsx b/src/libs/ui/lib/components/default-member-icon/DefaultMemberIcon.tsx
similarity index 100%
rename from src-ts/lib/default-member-icon/DefaultMemberIcon.tsx
rename to src/libs/ui/lib/components/default-member-icon/DefaultMemberIcon.tsx
diff --git a/src-ts/lib/default-member-icon/index.ts b/src/libs/ui/lib/components/default-member-icon/index.ts
similarity index 100%
rename from src-ts/lib/default-member-icon/index.ts
rename to src/libs/ui/lib/components/default-member-icon/index.ts
diff --git a/src-ts/lib/form/Form.module.scss b/src/libs/ui/lib/components/form/Form.module.scss
similarity index 86%
rename from src-ts/lib/form/Form.module.scss
rename to src/libs/ui/lib/components/form/Form.module.scss
index 2adabe86f..fe02af3c6 100644
--- a/src-ts/lib/form/Form.module.scss
+++ b/src/libs/ui/lib/components/form/Form.module.scss
@@ -1,5 +1,5 @@
-@use '../styles/typography';
-@import '../styles/includes';
+@use '../../styles/typography';
+@import '../../styles/includes';
.form {
flex: 1;
@@ -12,7 +12,7 @@
}
.subtitle {
- margin-bottom: $space-lg;
+ margin-bottom: $sp-4;
}
.form-footer {
@@ -58,12 +58,12 @@
@extend .ultra-small-medium;
color: $red-100;
background-color: $black-5;
- padding: $space-xs;
- margin-bottom: $space-xl;
+ padding: $sp-1;
+ margin-bottom: $sp-5;
svg {
@include icon-lg;
- margin-right: $space-xs;
+ margin-right: $sp-1;
}
}
diff --git a/src-ts/lib/form/Form.tsx b/src/libs/ui/lib/components/form/Form.tsx
similarity index 95%
rename from src-ts/lib/form/Form.tsx
rename to src/libs/ui/lib/components/form/Form.tsx
index ae0c00f7d..6316e7779 100644
--- a/src-ts/lib/form/Form.tsx
+++ b/src/libs/ui/lib/components/form/Form.tsx
@@ -12,9 +12,9 @@ import {
} from 'react'
import classNames from 'classnames'
-import { Button } from '../button'
+import { LinkButton } from '../button'
import { IconOutline } from '../svgs'
-import '../styles/index.scss'
+import '../../styles/index.scss'
import { FormAction, FormButton, FormDefinition, FormInputModel } from '.'
import {
@@ -174,10 +174,14 @@ const Form: <
|| !!props.shouldDisableButton?.(isPrimaryGroup, index)
return (
-
)
diff --git a/src/libs/ui/lib/components/form/form-button.model.ts b/src/libs/ui/lib/components/form/form-button.model.ts
new file mode 100644
index 000000000..d4f8b1332
--- /dev/null
+++ b/src/libs/ui/lib/components/form/form-button.model.ts
@@ -0,0 +1,18 @@
+import { FC, SVGProps } from 'react'
+
+import { ButtonSize, ButtonTypes } from '../button'
+
+export interface FormButton {
+ readonly buttonStyle?: ButtonTypes
+ hidden?: boolean,
+ icon?: FC = (props: FormCardSetProps) => {
)}
>
{section.rows.map(row => (
-
+
{
props.renderDividers !== false && (
- = (props: FormCardSetProps) => {
)
: {row.text}}
{row.infoIcon && (
-
- {props.formInputs}