Merge pull request #140 from topcoder-platform/dev

My Gigs > Release of Profile Integration

Author: sushilshinde

.circleci/config.yml

@@ -77,7 +77,6 @@ workflows:
             branches:
               only:
                 - dev
-                - fix-m2m-env-var
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.

config/default.js

@@ -12,7 +12,7 @@ module.exports = {
     COMMUNITY_APP: "https://community-app.topcoder-dev.com",
     PLATFORM_WEBSITE_URL: "https://platform.topcoder-dev.com",
   },
-  RECRUIT_API: process.env.RECRUIT_API,
+  RECRUIT_API: "https://www.topcoder-dev.com",
   // the server api base path
   API_BASE_PATH: process.env.API_BASE_PATH || "/earn-app/api/my-gigs",
   // the log level, default is 'debug'

config/development.js

@@ -11,4 +11,5 @@ module.exports = {
     COMMUNITY_APP: "https://community-app.topcoder-dev.com",
     PLATFORM_WEBSITE_URL: "https://platform.topcoder-dev.com",
   },
+  RECRUIT_API: "https://www.topcoder-dev.com",
 };

config/production.js

@@ -11,4 +11,5 @@ module.exports = {
     COMMUNITY_APP: "https://community-app.topcoder.com",
     PLATFORM_WEBSITE_URL: "https://platform.topcoder.com",
   },
+  RECRUIT_API: "https://www.topcoder.com",
 };

src/actions/lookup.js

@@ -13,13 +13,35 @@ async function checkIsLoggedIn() {
   return service.checkIsLoggedIn();
 }
 
-async function getGigStatuses() {
-  return service.getGigStatuses();
+/**
+ * Gets all the countries.
+ * @returns {Array} Array containing all countries
+ */
+async function getAllCountries() {
+  // fetch the first page to see how many more fetches are necessary to get all
+  const countries = await service.getPaginatedCountries();
+  const {
+    meta: { totalPages },
+  } = countries;
+
+  const pagesMissing = totalPages - 1;
+
+  // fetch the other pages.
+  const allPageResults = await Promise.all(
+    [...Array(pagesMissing > 0 ? pagesMissing : 0)].map((_, index) => {
+      const newPage = index + 2;
+
+      return service.getPaginatedCountries(newPage);
+    })
+  );
+
+  const newCountries = allPageResults.map((data) => data).flat();
+  return [...countries, ...newCountries];
 }
 
 export default createActions({
   GET_TAGS: getTags,
   GET_COMMUNITY_LIST: getCommunityList,
   CHECK_IS_LOGGED_IN: checkIsLoggedIn,
-  GET_GIG_STATUSES: getGigStatuses,
+  GET_ALL_COUNTRIES: getAllCountries,
 });

src/api/app-routes.js

@@ -18,7 +18,19 @@ const authenticator = require("tc-core-library-js").middleware.jwtAuthenticator;
  */
 module.exports = (app) => {
   app.use(express.json());
-  app.use(cors());
+  app.use(
+    cors({
+      // Allow browsers access pagination data in headers
+      exposedHeaders: [
+        "X-Page",
+        "X-Per-Page",
+        "X-Total",
+        "X-Total-Pages",
+        "X-Prev-Page",
+        "X-Next-Page",
+      ],
+    })
+  );
   app.use(
     fileUpload({
       limits: {

src/api/common/helper.js

@@ -335,6 +335,26 @@ async function getMember(handle, query) {
   return res.body;
 }
 
+/**
+ * Get member traits info
+ * @param {string} handle the handle of the user
+ * @param {string} query the query criteria
+ * @returns the object of member traitsdetails
+ */
+async function getMemberTraits(handle, query) {
+  const token = await getM2MToken();
+  const url = `${config.API.V5}/members/${handle}/traits`;
+  const res = await request
+    .get(url)
+    .query(query)
+    .set("Authorization", `Bearer ${token}`)
+    .set("Accept", "application/json");
+  localLogger.debug({
+    context: "getMemberTraits",
+    message: `response body: ${JSON.stringify(res.body)}`,
+  });
+  return res.body;
+}
 /**
  * Update member details
  * @param {string} handle the handle of the user
@@ -357,6 +377,28 @@ async function updateMember(currentUser, data) {
   return res.body;
 }
 
+/**
+ * Update member traits
+ * @param {string} handle the handle of the user
+ * @param {object} data the data to be updated
+ * @return {object} the object of updated member details
+ */
+async function updateMemberTraits(currentUser, data) {
+  const token = currentUser.jwtToken;
+  const url = `${config.API.V5}/members/${currentUser.handle}/traits`;
+  const res = await request
+    .put(url)
+    .set("Authorization", token)
+    .set("Content-Type", "application/json")
+    .set("Accept", "application/json")
+    .send(data);
+  localLogger.debug({
+    context: "updateMemberTraits",
+    message: `response body: ${JSON.stringify(res.body)}`,
+  });
+  return res.body;
+}
+
 /**
  * Get Recruit CRM profile details
  * @param {object} currentUser the user who performs the operation
@@ -379,21 +421,36 @@ async function getRCRMProfile(currentUser) {
 /**
  * Update Recruit CRM profile details
  * @param {object} currentUser the user who performs the operation
- * @param {object} file the resume file
  * @param {object} data the data to be updated
+ * @param {object} file the resume file
  * @return {object} the returned object
  */
-async function updateRCRMProfile(currentUser, file, data) {
+async function updateRCRMProfile(currentUser, data, file) {
   const token = currentUser.jwtToken;
   const url = `${config.RECRUIT_API}/api/recruit/profile`;
-  const res = await request
-    .post(url)
-    .set("Authorization", token)
-    .set("Content-Type", "multipart/form-data")
-    .set("Accept", "application/json")
-    .field("phone", data.phone)
-    .field("availability", data.availability)
-    .attach("resume", file.data, file.name);
+  let res = null;
+  if (file) {
+    res = await request
+      .post(url)
+      .set("Authorization", token)
+      .set("Content-Type", "multipart/form-data")
+      .set("Accept", "application/json")
+      .field("phone", data.phone)
+      .field("availability", data.availability)
+      .field("city", data.city)
+      .field("countryName", data.countryName)
+      .attach("resume", file.data, file.name);
+  } else {
+    res = await request
+      .post(url)
+      .set("Authorization", token)
+      .set("Content-Type", "multipart/form-data")
+      .set("Accept", "application/json")
+      .field("phone", data.phone)
+      .field("availability", data.availability)
+      .field("city", data.city)
+      .field("countryName", data.countryName);
+  }
   localLogger.debug({
     context: "updateRCRMProfile",
     message: `response body: ${JSON.stringify(res.body)}`,
@@ -412,7 +469,9 @@ module.exports = {
   getJobCandidates,
   getJobs,
   getMember,
+  getMemberTraits,
   updateMember,
+  updateMemberTraits,
   getRCRMProfile,
   updateRCRMProfile,
 };

src/api/controllers/ProfileController.js

@@ -19,7 +19,7 @@ async function getMyProfile(req, res) {
  * @param res the response
  */
 async function updateMyProfile(req, res) {
-  await service.updateMyProfile(req.authUser, req.files, req.body);
+  await service.updateMyProfile(req.authUser, req.body, req.files);
   res.status(204).end();
 }
 

src/api/mock-api/mock-api.js

@@ -21,9 +21,10 @@ app.use((req, res, next) => {
 
 app.get("/api/recruit/profile", (req, res) => {
   const result = {
+    hasProfile: false,
     phone: "555-555-55-55",
     resume: "https://resume.topcoder.com/1234567",
-    availibility: true,
+    availability: true,
   };
   res.status(200).json(result);
 });

src/api/services/ProfileService.js

@@ -31,9 +31,10 @@ async function getMyProfile(currentUser) {
     email: _.get(member, "email", null),
     city: _.get(member, "addresses[0].city", null),
     country: _.get(member, "competitionCountryCode", null),
+    hasProfile: _.get(recruitProfile, "hasProfile", false),
     phone: _.get(recruitProfile, "phone", null),
     resume: _.get(recruitProfile, "resume", null),
-    availability: _.get(recruitProfile, "availibility", true),
+    availability: _.get(recruitProfile, "availability", true),
   };
 }
 
@@ -48,13 +49,13 @@ getMyProfile.schema = Joi.object()
  * @param {object} currentUser the user who perform this operation.
  * @param {object} data the data to be updated
  */
-async function updateMyProfile(currentUser, files, data) {
+async function updateMyProfile(currentUser, data, files) {
   // we expect logged-in users
   if (currentUser.isMachine) {
     return;
   }
   // check if file was truncated
-  if (files.resume.truncated) {
+  if (files && files.resume.truncated) {
     throw new errors.BadRequestError(
       `Maximum allowed file size is ${config.MAX_ALLOWED_FILE_SIZE_MB} MB`
     );
@@ -64,7 +65,7 @@ async function updateMyProfile(currentUser, files, data) {
     `^.*\.(${_.join(config.ALLOWED_FILE_TYPES, "|")})$`,
     "i"
   );
-  if (!regex.test(files.resume.name)) {
+  if (files && !regex.test(files.resume.name)) {
     throw new errors.BadRequestError(
       `Allowed file types are: ${_.join(config.ALLOWED_FILE_TYPES, ",")}`
     );
@@ -75,56 +76,96 @@ async function updateMyProfile(currentUser, files, data) {
     "fields=addresses,competitionCountryCode,homeCountryCode"
   );
   const update = {};
+  let shouldUpdateTrait = false;
   // update member data if city is different from existing one
   if (_.get(member, "addresses[0].city") !== data.city) {
     update.addresses = _.cloneDeep(member.addresses);
     if (!_.isEmpty(update.addresses)) {
       update.addresses[0].city = data.city;
       delete update.addresses[0].createdAt;
       delete update.addresses[0].updatedAt;
+      delete update.addresses[0].createdBy;
+      delete update.addresses[0].updatedBy;
+      update.addresses[0].streetAddr1 = update.addresses[0].streetAddr1
+        ? update.addresses[0].streetAddr1
+        : " ";
+      update.addresses[0].streetAddr2 = update.addresses[0].streetAddr2
+        ? update.addresses[0].streetAddr2
+        : " ";
+      update.addresses[0].type = update.addresses[0].type
+        ? update.addresses[0].type
+        : "HOME";
+      update.addresses[0].stateCode = update.addresses[0].stateCode
+        ? update.addresses[0].stateCode
+        : " ";
+      update.addresses[0].zip = update.addresses[0].zip
+        ? update.addresses[0].zip
+        : " ";
     } else {
       update.addresses = [
         {
           city: data.city,
+          type: "HOME",
+          stateCode: " ",
+          zip: " ",
+          streetAddr1: " ",
+          streetAddr2: " ",
         },
       ];
     }
   }
   // update member data if competitionCountryCode is different from existing one
   if (_.get(member, "competitionCountryCode") !== data.country) {
     update.competitionCountryCode = data.country;
+    shouldUpdateTrait = true;
   }
   if (_.get(member, "homeCountryCode") !== data.country) {
     update.homeCountryCode = data.country;
+    shouldUpdateTrait = true;
   }
   // avoid unnecessary api calls
   if (!_.isEmpty(update)) {
     await helper.updateMember(currentUser, update);
   }
-  await helper.updateRCRMProfile(currentUser, files.resume, {
-    phone: data.phone,
-    availability: data.availability,
-  });
+  if (shouldUpdateTrait) {
+    const memberTraits = await helper.getMemberTraits(
+      currentUser.handle,
+      `traitIds=basic_info`
+    );
+    if (memberTraits && memberTraits.length) {
+      memberTraits[0]["traits"].data[0].country = data.countryName;
+      delete memberTraits[0].createdAt;
+      delete memberTraits[0].createdBy;
+      delete memberTraits[0].updatedAt;
+      delete memberTraits[0].updatedBy;
+      delete memberTraits[0].userId;
+      await helper.updateMemberTraits(currentUser, memberTraits);
+    }
+  }
+  await helper.updateRCRMProfile(
+    currentUser,
+    {
+      phone: data.phone,
+      availability: data.availability,
+      city: data.city,
+      countryName: data.countryName,
+    },
+    files && files.resume
+  );
 }
 
-updateMyProfile.schema = Joi.object()
-  .keys({
-    currentUser: Joi.object().required(),
-    files: Joi.object()
-      .keys({
-        resume: Joi.object().required(),
-      })
-      .required(),
-    data: Joi.object()
-      .keys({
-        city: Joi.string().required(),
-        country: Joi.string().required(),
-        phone: Joi.string().required(),
-        availability: Joi.boolean().required(),
-      })
-      .required(),
-  })
-  .required();
+updateMyProfile.schema = Joi.object({
+  currentUser: Joi.object().required(),
+  data: Joi.object()
+    .keys({
+      city: Joi.string().required(),
+      country: Joi.string().required(),
+      countryName: Joi.string().required(),
+      phone: Joi.string().required(),
+      availability: Joi.boolean().required(),
+    })
+    .required(),
+}).unknown();
 
 module.exports = {
   getMyProfile,

src/assets/data/my-gigs.json

@@ -93,8 +93,8 @@ Dropdown.defaultProps = {
 Dropdown.propTypes = {
   options: PT.arrayOf(
     PT.shape({
-      label: PT.string.isRequired,
-      selected: PT.bool.isRequired,
+      label: PT.string,
+      selected: PT.bool,
     })
   ).isRequired,
   placeholder: PT.string,

src/components/Dropdown/index.jsx

@@ -343,7 +343,11 @@ export const MY_GIG_STATUS_PLACED = "PLACED";
 export const GIG_STATUS = {
   AVAILABLE: "Available",
   UNAVAILABLE: "Unavailable",
-  PLACED: "Placed",
+};
+
+export const GIG_STATUS_TOOLTIP = {
+  AVAILABLE: "You’re open to take on new jobs.",
+  UNAVAILABLE: "You’re not open to take on new jobs.",
 };
 
 export const EMPTY_GIGS_TEXT =

src/constants/index.js

@@ -109,9 +109,7 @@ const JobCard = ({ job }) => {
             </ul>
           </div>
           <div
-            styleName={`right-side ${
-              job.phaseAction === MY_GIG_PHASE_ACTION.STAND_BY ? "stand-by" : ""
-            } ${!job.phaseAction ? "none" : ""}`}
+            styleName={`right-side stand-by ${!job.phaseAction ? "none" : ""}`}
           >
             {job.phaseAction && <Button size="lg">{job.phaseAction}</Button>}
           </div>

src/containers/MyGigs/JobListing/JobCard/index.jsx

@@ -28,6 +28,9 @@
     margin-bottom: 12px;
     line-height: 38px;
     text-transform: uppercase;
+    text-overflow: ellipsis;
+    max-width: 660px;
+    overflow: hidden;
   }
 }
 

src/containers/MyGigs/JobListing/JobCard/styles.scss

@@ -19,19 +19,18 @@ const MyGigs = ({
   total,
   numLoaded,
   profile,
-  statuses,
   getProfile,
-  getStatuses,
   updateProfile,
   updateProfileSuccess,
+  getAllCountries,
 }) => {
   const propsRef = useRef();
-  propsRef.current = { getMyGigs, getProfile, getStatuses };
+  propsRef.current = { getMyGigs, getProfile, getAllCountries };
 
   useEffect(() => {
     propsRef.current.getMyGigs();
     propsRef.current.getProfile();
-    propsRef.current.getStatuses();
+    propsRef.current.getAllCountries();
   }, []);
 
   const [openUpdateProfile, setOpenUpdateProfile] = useState(false);
@@ -40,6 +39,8 @@ const MyGigs = ({
   useEffect(() => {
     if (updateProfileSuccess) {
       setOpenUpdateSuccess(true);
+      // in case of success, let's fetch the updated profile
+      propsRef.current.getProfile();
     }
   }, [updateProfileSuccess]);
 
@@ -51,7 +52,7 @@ const MyGigs = ({
           <Button
             isPrimary
             size="lg"
-            disabled={true}
+            disabled={!(profile && profile.hasProfile)}
             onClick={() => {
               setOpenUpdateProfile(true);
             }}
@@ -74,7 +75,6 @@ const MyGigs = ({
       <Modal open={openUpdateProfile}>
         <UpdateGigProfile
           profile={profile}
-          statuses={statuses}
           onSubmit={(profileEdit) => {
             updateProfile(profileEdit);
             setOpenUpdateProfile(false);
@@ -102,28 +102,26 @@ MyGigs.propTypes = {
   total: PT.number,
   numLoaded: PT.number,
   profile: PT.shape(),
-  statuses: PT.arrayOf(PT.string),
   getProfile: PT.func,
-  getStatuses: PT.func,
   updateProfile: PT.func,
   updateProfileSuccess: PT.bool,
+  getAllCountries: PT.func,
 };
 
 const mapStateToProps = (state) => ({
   myGigs: state.myGigs.myGigs,
   total: state.myGigs.total,
   numLoaded: state.myGigs.numLoaded,
   profile: state.myGigs.profile,
-  statuses: state.lookup.gigStatuses,
   updateProfileSuccess: state.myGigs.updatingProfileSucess,
 });
 
 const mapDispatchToProps = {
   getMyGigs: actions.myGigs.getMyGigs,
   loadMore: actions.myGigs.loadMoreMyGigs,
   getProfile: actions.myGigs.getProfile,
-  getStatuses: actions.lookup.getGigStatuses,
   updateProfile: actions.myGigs.updateProfile,
+  getAllCountries: actions.lookup.getAllCountries,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(MyGigs);

src/containers/MyGigs/index.jsx

@@ -1,5 +1,6 @@
 /* global process */
 import React, { useEffect, useMemo, useState, useRef } from "react";
+import { connect } from "react-redux";
 import PT from "prop-types";
 import Button from "components/Button";
 import FilePicker from "components/FilePicker";
@@ -9,36 +10,50 @@ import UserPhoto from "components/UserPhoto";
 import IconClose from "assets/icons/close.svg";
 import IconInfo from "assets/icons/info.svg";
 import StatusTooltip from "./tooltips/StatusTooltip";
-import _ from "lodash";
+import actions from "../../../../actions";
+import _, { size, values } from "lodash";
 
-import * as constants from "constants";
+import { GIG_STATUS } from "../../../../constants";
 import * as utils from "utils";
 
 import "./styles.scss";
 
-const UpdateGigProfile = ({ profile, statuses, onSubmit, onClose }) => {
+const UpdateGigProfile = ({
+  profile,
+  onSubmit,
+  onClose,
+  countries,
+  getAllCountries,
+}) => {
+  const statuses = values(GIG_STATUS);
   const countryOptions = useMemo(() => {
-    const countryMap = utils.myGig.countries.getNames("en");
-    const options = Object.keys(countryMap).map((key) => countryMap[key]);
-    const selected = profile.country;
-    return utils.createDropdownOptions(options, selected);
-  }, [profile]);
-
-  const statusOptions = useMemo(() => {
-    const selected = profile.status;
-    const options =
-      profile.gigStatus === constants.MY_GIG_STATUS_PLACED
-        ? statuses
-        : statuses.filter((s) => s !== constants.GIG_STATUS.PLACED);
-    return utils.createDropdownOptions(options, selected);
-  }, [profile, statuses]);
+    const selectedCountry = countries.find(
+      (country) => country.countryCode === profile.country
+    );
+    return utils.createDropdownOptions(
+      countries.map((country) => country.name),
+      selectedCountry
+    );
+  }, [profile, countries]);
 
   const [profileEdit, setProfileEdit] = useState(
     profile ? _.clone(profile) : null
   );
+
+  const statusOptions = useMemo(() => {
+    const selected = profileEdit.status;
+    const options = statuses.filter((s) => s !== GIG_STATUS.PLACED);
+    return utils.createDropdownOptions(options, selected);
+  }, [profileEdit, statuses]);
+
   const [validation, setValidation] = useState(null);
   const [pristine, setPristine] = useState(true);
 
+  // only fetch countries when they don't exist in redux store.
+  useEffect(() => {
+    if (size(countries) === 0) getAllCountries();
+  }, [countries, getAllCountries]);
+
   useEffect(() => {
     setProfileEdit(_.clone(profile));
   }, [profile]);
@@ -61,10 +76,10 @@ const UpdateGigProfile = ({ profile, statuses, onSubmit, onClose }) => {
       validation.file = profileEdit.fileError;
     }
 
-    if (!profileEdit.file) {
-      validation = validation || {};
-      validation.file = "Please, pick your CV file for uploading";
-    }
+    // if (!profileEdit.file) {
+    //   validation = validation || {};
+    //   validation.file = "Please, pick your CV file for uploading";
+    // }
 
     if ((error = utils.myGig.validateCity(profileEdit.city))) {
       validation = validation || {};
@@ -103,10 +118,66 @@ const UpdateGigProfile = ({ profile, statuses, onSubmit, onClose }) => {
 
   const onSubmitProfile = () => {
     const update = varsRef.current.profileEdit;
+    if (!update.countryName) {
+      const selectedCountry = countries.find(
+        (country) => country.countryCode === update.country
+      );
+      update.countryName = selectedCountry.name;
+    }
     delete update.fileError;
     onSubmit(update);
   };
 
+  const handleStatusDropdownChange = (newOptions) => {
+    const selectedOption = utils.getSelectedDropdownOption(newOptions);
+    setProfileEdit({
+      ...varsRef.current.profileEdit,
+      status: selectedOption.label,
+    });
+    setPristine(false);
+  };
+
+  const handleFilePick = (file, error) => {
+    if (error) {
+      setProfileEdit({
+        ...varsRef.current.profileEdit,
+        file,
+        fileError: error,
+        uploadTime: null,
+      });
+    } else {
+      setProfileEdit({
+        ...varsRef.current.profileEdit,
+        file,
+        fileError: null,
+        uploadTime: null,
+      });
+    }
+    setPristine(false);
+  };
+
+  const handleCountryDropdownChange = (newOptions) => {
+    const selectedOption = utils.getSelectedDropdownOption(newOptions);
+    const country = countries.find(
+      (country) => selectedOption.label === country.name
+    );
+    setProfileEdit({
+      ...varsRef.current.profileEdit,
+      country: country.countryCode,
+      countryName: country.name,
+    });
+    setPristine(false);
+  };
+  /**
+   * Generic handler for inputs to update the correct value
+   * @param {string} field
+   * @returns
+   */
+  const handleInputChange = (field) => (value) => {
+    setProfileEdit({ ...varsRef.current.profileEdit, [field]: value });
+    setPristine(false);
+  };
+
   return (
     <div styleName="update-resume">
       <button styleName="close" onClick={onClose}>
@@ -138,27 +209,27 @@ const UpdateGigProfile = ({ profile, statuses, onSubmit, onClose }) => {
               <Dropdown
                 options={statusOptions}
                 size="xs"
-                onChange={(newOptions) => {
-                  const selectedOption = utils.getSelectedDropdownOption(
-                    newOptions
-                  );
-                  setProfileEdit({
-                    ...varsRef.current.profileEdit,
-                    status: selectedOption.label,
-                  });
-                  setPristine(false);
-                }}
+                onChange={handleStatusDropdownChange}
                 errorMsg={(!pristine && validation && validation.status) || ""}
               />
             </div>
-            <StatusTooltip>
+            <StatusTooltip statuses={statuses}>
               <i styleName="icon">
                 <IconInfo />
               </i>
             </StatusTooltip>
           </div>
         </div>
         <div styleName="details">
+          {profile && profile.existingResume && (
+            <div styleName="resume-details">
+              Please upload your resume/CV. Double-check that all of your tech
+              skills are listed in your resume/CV.&nbsp;&nbsp;&nbsp;
+              <a href={profile.existingResume.file_link} target="_blank">
+                {profile.existingResume.filename}
+              </a>
+            </div>
+          )}
           <div styleName="resume">
             <FilePicker
               label="Drag & drop your resume or CV here - Please Omit Contact Information"
@@ -167,35 +238,15 @@ const UpdateGigProfile = ({ profile, statuses, onSubmit, onClose }) => {
               uploadTime={profileEdit.uploadTime}
               accept=".pdf, .docx"
               errorMsg={(!pristine && validation && validation.file) || ""}
-              onFilePick={(file, error) => {
-                if (error) {
-                  setProfileEdit({
-                    ...varsRef.current.profileEdit,
-                    file,
-                    fileError: error,
-                    uploadTime: null,
-                  });
-                } else {
-                  setProfileEdit({
-                    ...varsRef.current.profileEdit,
-                    file,
-                    fileError: null,
-                    uploadTime: null,
-                  });
-                }
-                setPristine(false);
-              }}
+              onFilePick={handleFilePick}
             />
           </div>
           <div styleName="city">
             <TextInput
               value={profileEdit.city}
               label="City"
               required
-              onChange={(value) => {
-                setProfileEdit({ ...varsRef.current.profileEdit, city: value });
-                setPristine(false);
-              }}
+              onChange={handleInputChange("city")}
               errorMsg={(!pristine && validation && validation.city) || ""}
             />
           </div>
@@ -204,16 +255,7 @@ const UpdateGigProfile = ({ profile, statuses, onSubmit, onClose }) => {
               options={countryOptions}
               label="Country"
               required
-              onChange={(newOptions) => {
-                const selectedOption = utils.getSelectedDropdownOption(
-                  newOptions
-                );
-                setProfileEdit({
-                  ...varsRef.current.profileEdit,
-                  country: selectedOption.label,
-                });
-                setPristine(false);
-              }}
+              onChange={handleCountryDropdownChange}
               errorMsg={(!pristine && validation && validation.country) || ""}
             />
           </div>
@@ -222,13 +264,7 @@ const UpdateGigProfile = ({ profile, statuses, onSubmit, onClose }) => {
               value={profileEdit.phone}
               label="Phone - Please have the Country Code Included"
               required
-              onChange={(value) => {
-                setProfileEdit({
-                  ...varsRef.current.profileEdit,
-                  phone: value,
-                });
-                setPristine(false);
-              }}
+              onChange={handleInputChange("phone")}
               errorMsg={(!pristine && validation && validation.phone) || ""}
             />
           </div>
@@ -256,9 +292,26 @@ const UpdateGigProfile = ({ profile, statuses, onSubmit, onClose }) => {
 
 UpdateGigProfile.propTypes = {
   profile: PT.shape(),
-  statuses: PT.arrayOf(PT.string),
   onSubmit: PT.func,
   onClose: PT.func,
 };
 
-export default UpdateGigProfile;
+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);

src/containers/MyGigs/modals/UpdateGigProfile/index.jsx

@@ -60,7 +60,7 @@
     flex-direction: column;
     align-items: center;
     width: 260px;
-    min-height: 330px;
+    min-height: 410px;
     padding: 20px 15px;
     margin-right: 40px;
     line-height: $line-height-base;
@@ -118,6 +118,14 @@
   .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;

src/containers/MyGigs/modals/UpdateGigProfile/styles.scss

@@ -1,19 +1,19 @@
 import React from "react";
 import PT from "prop-types";
 import Tooltip from "components/Tooltip";
-import { gigStatusTooltip } from "assets/data/my-gigs.json";
-
+import { GIG_STATUS_TOOLTIP } from "../../../../../../constants";
+import { keys } from "lodash";
 import "./styles.scss";
 
 const StatusTooltip = ({ children }) => {
   const Content = () => (
     <div styleName="status-tooltip">
       <ul>
-        {Object.keys(gigStatusTooltip).map((status) => (
+        {keys(GIG_STATUS_TOOLTIP).map((status) => (
           <li styleName="item" key={status}>
             <div>
               <div styleName="caption">{status}</div>
-              <div styleName="text">{gigStatusTooltip[status]}</div>
+              <div styleName="text">{GIG_STATUS_TOOLTIP[status]}</div>
             </div>
           </li>
         ))}

src/containers/MyGigs/modals/UpdateGigProfile/tooltips/StatusTooltip/index.jsx

@@ -8,7 +8,7 @@ const defaultState = {
   tags: [],
   subCommunities: [],
   isLoggedIn: null,
-  gigStatuses: [],
+  countries: [],
 };
 
 function onGetTagsDone(state, { payload }) {
@@ -23,16 +23,16 @@ function onCheckIsLoggedInDone(state, { payload }) {
   return { ...state, isLoggedIn: payload };
 }
 
-function onGetGigStatusesDone(state, { payload }) {
-  return { ...state, gigStatuses: payload };
+function onGetAllCountriesDone(state, { payload }) {
+  return { ...state, countries: payload };
 }
 
 export default handleActions(
   {
     GET_TAGS_DONE: onGetTagsDone,
     GET_COMMUNITY_LIST_DONE: onGetCommunityListDone,
     CHECK_IS_LOGGED_IN_DONE: onCheckIsLoggedInDone,
-    GET_GIG_STATUSES_DONE: onGetGigStatusesDone,
+    GET_ALL_COUNTRIES_DONE: onGetAllCountriesDone,
   },
   defaultState
 );

src/reducers/lookup.js

@@ -1,4 +1,5 @@
 import { getAuthUserTokens } from "@topcoder/micro-frontends-navbar-app";
+import { keys } from "lodash";
 import * as utils from "../utils";
 
 async function doFetch(endpoint, options = {}, v3, baseUrl) {
@@ -17,31 +18,35 @@ async function doFetch(endpoint, options = {}, v3, baseUrl) {
     headers.Authorization = `Bearer ${token.tokenV3}`;
   }
 
-  if (!headers["Content-Type"]) {
-    headers["Content-Type"] = "application/json";
-  }
-
   return fetch(`${url}${endpoint}`, {
     ...options,
     headers,
   });
 }
 
 async function get(endpoint, baseUrl) {
-  const response = await doFetch(endpoint, undefined, undefined, baseUrl);
+  const options = { headers: { ["Content-Type"]: "application/json" } };
+  const response = await doFetch(endpoint, options, undefined, baseUrl);
   const meta = utils.pagination.getResponseHeaders(response);
   const result = await response.json();
-  result.meta = meta;
+  // 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) {
-  const response = await doFetch(endpoint, {
-    body,
-    method: "POST",
-  });
-  return response.json();
+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) {

src/services/api.js

@@ -1,7 +1,6 @@
 import api from "./api";
 import qs from "qs";
 import * as utils from "../utils";
-import myGigsData from "../assets/data/my-gigs.json";
 
 async function getTags() {
   const v3 = true;
@@ -54,13 +53,20 @@ async function getCommunityList() {
   );
 }
 
-async function getGigStatuses() {
-  return Promise.resolve(myGigsData.gigStatuses);
+/**
+ * Gets paginated countries
+ * @param {number} page page to fetch
+ * @param {number} perPage number of items by page
+ * @returns
+ */
+async function getPaginatedCountries(page = 1, perPage = 100) {
+  const url = `/lookups/countries?page=${page}&perPage=${perPage}`;
+  return await api.get(url);
 }
 
 export default {
   getTags,
   getCommunityList,
   checkIsLoggedIn,
-  getGigStatuses,
+  getPaginatedCountries,
 };

src/services/lookup.js

@@ -1,4 +1,3 @@
-import api from "./api";
 import { get, keys, size, sortBy, values } from "lodash";
 import {
   ACTIONS_AVAILABLE_FOR_MY_GIG_PHASE,
@@ -8,9 +7,11 @@ import {
   SORT_STATUS_ORDER,
   PHASES_FOR_JOB_STATUS,
   MY_GIG_PHASE,
+  GIG_STATUS,
 } from "../constants";
-import data from "../assets/data/my-gigs.json";
+import api from "./api";
 
+const PROFILE_URL = "/earn-app/api/my-gigs/profile";
 /**
  * Maps the data from api to data to be used by application
  * @param {Object} serverResponse data returned by the api
@@ -93,12 +94,67 @@ async function getMyGigs(page, perPage) {
   };
 }
 
+/**
+ * Get the profile info
+ * @returns {Object}
+ */
 async function getProfile() {
-  return Promise.resolve(data.gigProfile);
+  const profile = await api.get(
+    PROFILE_URL,
+    process.env.URL.PLATFORM_WEBSITE_URL
+  );
+
+  return {
+    handle: profile.handle,
+    photoURL: profile.profilePhoto,
+    firstName: profile.firstName,
+    lastName: profile.lastName,
+    email: profile.email,
+    city: profile.city,
+    country: profile.country,
+    phone: profile.phone,
+    file: null,
+    existingResume: profile.resume,
+    hasProfile: profile.hasProfile,
+    status: profile.availability
+      ? GIG_STATUS.AVAILABLE
+      : GIG_STATUS.UNAVAILABLE,
+  };
 }
 
+/**
+ * Updates the profile
+ * @param {Object} profile - profile info to be updated
+ * @returns
+ */
 async function updateProfile(profile) {
-  return Promise.resolve(profile);
+  const payload = {
+    city: profile.city,
+    country: profile.country,
+    countryName: profile.countryName,
+    phone: profile.phone,
+    availability: profile.status === GIG_STATUS.AVAILABLE ? true : false,
+  };
+  if (profile.file) {
+    payload.resume = profile.file;
+  }
+
+  // add info to formData to send to server
+  const formData = new FormData();
+  keys(payload).forEach((key) => formData.append(key, payload[key]));
+
+  const response = await api.post(
+    PROFILE_URL,
+    formData,
+    process.env.URL.PLATFORM_WEBSITE_URL
+  );
+
+  // in case of error, throw the server error
+  if (response.status !== 200 && response.status !== 204) {
+    const error = await response.json();
+    throw new Error(error.message);
+  }
+  return response;
 }
 
 export default {

src/services/myGigs.js

@@ -10,7 +10,10 @@ export * as myGig from "./myGig";
 export function createDropdownOptions(values, selectedValue) {
   return values.map((value) => ({
     label: `${value}`,
-    selected: !!selectedValue && selectedValue === value,
+    selected:
+      !!selectedValue &&
+      (selectedValue === value ||
+        (selectedValue.name && selectedValue.name === value)),
   }));
 }
 

src/utils/index.js

@@ -53,19 +53,19 @@ export function validateCity(value) {
 }
 
 export function validatePhone(phoneNumber, country) {
-  const countryCode = countries.getAlpha2Code(country, "en") || "US";
   let error = validateTextRequired(phoneNumber);
   if (error) {
     return error;
   }
 
   phoneNumber = phoneNumber.trim();
 
-  const code = codes.find((i) => i.isoCode2 === countryCode);
-  const regionCode = `+${code.countryCodes[0]}`;
-
-  error = !phoneNumber.startsWith(regionCode) && "Invalid country code";
-
+  const code = codes.find((i) => i.isoCode3 === country);
+  let regionCode = "";
+  if (code) {
+    regionCode = `+${code.countryCodes[0]}`;
+    error = !phoneNumber.startsWith(regionCode) && "Invalid country code";
+  }
   if (!error) {
     const regexValidCharacters = /[\s0-9+-\.()]/g;
     error =

src/utils/myGig.js

@@ -124,6 +124,7 @@ module.exports = (webpackConfigEnv) => {
         // Register routes
         require("./src/api/app-routes")(app);
       },
+      hot: true,
       port: 8008,
       host: "0.0.0.0",
     },