Made minor changes for calendar sync functionality.

Specifically, the loading message is updated when sync is complete & added links for support & calendar management.

Author: alvimmh

src/routes/PositionDetails/components/InterviewPopup/CalendarSyncTimedOut/index.jsx

@@ -15,7 +15,15 @@ const CalendarSyncTimedOut = ({ userSettings, onContinue }) => {
     <div styleName="timedout-wrapper">
       <div styleName="timedout-text">
         <p>Strange, it takes too long to sync your calendar {primaryCalendar.email}.</p>
-        <p>Please, try re-connecting your calendar by clicking "manage connected calendars". Would you have any issues, please don't hesitate to reach out to us by [email protected].</p>
+        <p>
+          Please, try re-connecting your calendar by clicking "
+          <span
+            onClick={() => onContinue(POPUP_STAGES.MANAGE_CALENDAR)}
+            styleName="manage-calendar"
+          >
+            manage connected calendars</span>". Would you have any issues, please don't hesitate to reach out to us
+            by <a styleName="topcoder-support-email-link" href="mailto:[email protected]">[email protected]</a>.
+        </p>
       </div>
       <div styleName="button-wrapper">
         <Button

src/routes/PositionDetails/components/InterviewPopup/CalendarSyncTimedOut/styles.module.scss

@@ -21,4 +21,22 @@
 
 .confirm-text-bold {
   font-weight: bold;
-}
+}
+
+.manage-calendar {
+  color: #0d61bf;
+  @include font-roboto;
+  font-weight: 400;
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.topcoder-support-email-link {
+  color: #0d61bf !important;
+  @include font-roboto;
+  font-weight: 400;
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: underline;
+}

src/routes/PositionDetails/components/InterviewPopup/Confirm/index.jsx

@@ -28,6 +28,7 @@ const Confirm = ({
   onGoBack,
   onContinue,
   onShowingLoader,
+  onSetLoadingMessage,
   userSettings,
   getSettingsModular,
 }) => {
@@ -58,11 +59,8 @@ const Confirm = ({
       setSyncCalendarTimeoutId(null);
       setInitiateInterviewConfirmation(false);
 
-      // disable loading indicator
-      onSetLoadingMessage(`Scheduling interview...`);
-
       // continue with interview scheduling
-      onContinueAhead();
+      onContinueAhead(true);
     }
     else if ((primaryCalendar && !calendarSynced) && (syncCalendarTimeoutId || initiateInterviewConfirmation))
     {
@@ -82,20 +80,24 @@ const Confirm = ({
     return () => clearTimeout(syncCalendarTimeoutId);
   }, [userSettings]);
 
-  const onSetLoadingMessage = (text) => setLoadingMessage(text);
+  const onSetLoadingMessageLocal = (text) => setLoadingMessage(text);
 
   /**
    * This will trigger the API call to the server to request an interview
    */
-  const onContinueAhead = () => {
+  const onContinueAhead = (showSyncCompletedMessage) => {
     const params = {
       hostTimezone: scheduleDetails.timezone,
       duration: scheduleDetails.duration,
       availableTime: scheduleDetails.slots,
     };
-    onSetLoadingMessage(null);
+    onSetLoadingMessageLocal(null);
     onShowingLoader(true);
 
+    // sync completed, let the user know scheduling is underway
+    if (showSyncCompletedMessage)
+      onSetLoadingMessage("Scheduling interview...");
+
     confirmInterview(candidateId, params)
       .then(() => dispatch(loadPosition(teamId, positionId)))
       .then(() => onContinue(POPUP_STAGES.SUCCESS))
@@ -114,7 +116,7 @@ const Confirm = ({
     if (primaryCalendar && !calendarSynced)
     {
       // show loading indicator with message
-      onSetLoadingMessage(`Syncing your new calendar ${primaryCalendar.email}, it might take a few minutes...`);
+      onSetLoadingMessageLocal(`Syncing your new calendar ${primaryCalendar.email}, it might take a few minutes...`);
 
       // fetch UserMeetingSettings in the background, for the 1st time, no timeout is necessary,
       // so we set initiateInterviewConfirmation value to true
@@ -175,6 +177,7 @@ Confirm.propTypes = {
   onGoBack: PT.func,
   onContinue: PT.func,
   onShowingLoader: PT.func,
+  onSetLoadingMessage: PT.func,
   userSettings: PT.object,
   getSettingsModular: PT.func,
 };

src/routes/PositionDetails/components/InterviewPopup/index.jsx

@@ -36,6 +36,7 @@ const InterviewPopup = ({
   const [stage, setStage] = useState(initialStage);
   const [previousStage, setPreviousStage] = useState(initialStage);
   const [isLoading, setLoading] = useState(false);
+  const [loadingMessage, setLoadingMessage] = useState(null);
   const [userSettings, setUserSettings] = useState();
   const { v5UserProfile } = useSelector((state) => state.authUser);
   const [scheduleDetails, setScheduleDetails] = useState({
@@ -49,6 +50,12 @@ const InterviewPopup = ({
     }
   }, [open]);
 
+  // if loading finished, reset value of loadingMessage 
+  useEffect(() => {
+    if (!isLoading)
+      setLoadingMessage(null);
+  }, [isLoading])
+
   const onCloseInterviewPopup = () => {
     setStage("");
     setScheduleDetails({
@@ -169,6 +176,8 @@ const InterviewPopup = ({
     setLoading(loading);
   };
 
+  const onSetLoadingMessage = (text) => setLoadingMessage(text);
+
   /**
    * Removes the calendar from the state once it is removed from the server
    */
@@ -231,6 +240,7 @@ const InterviewPopup = ({
             candidate={candidate}
             userSettings={userSettings}
             getSettingsModular={getSettingsModular}
+            onSetLoadingMessage={onSetLoadingMessage}
           />
         );
       case POPUP_STAGES.SUCCESS:
@@ -301,6 +311,7 @@ const InterviewPopup = ({
             })}
           >
             <Spinner stype="Oval" width={80} height={80} />
+            {isLoading && loadingMessage && <p styleName="loading-message">{loadingMessage}</p>}
           </div>
           <div
             styleName={cn("component-wrapper", {

src/routes/PositionDetails/components/InterviewPopup/styles.module.scss

@@ -23,3 +23,8 @@
 .show-component-wrapper {
   display: block;
 }
+
+.loading-message {
+  margin-top: 10px;
+  text-align: center;
+}