Merge branch 'main' of https://dev.azure.com/freeleaps/freeleaps2-frontend/_git/freeleaps2-frontend

frontend/src/headers/HeaderGuest.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="header-container">
     <div class="header-content">
-      <img
+      <img class="company-logo" alt="freeleaps logo" src="@/assets/freeleaps.png" @click="gotoFrontdoor()" />
-        class="company-logo"
-        alt="freeleaps logo"
-        src="@/assets/freeleaps.png"
-        @click="gotoFrontdoor()"
-      />
       <!-- <div class="content-area">
         <span class="company-slogan"
           >Freeleaps: A trustworthy platform to find a software development partner</span
@@ -16,7 +11,9 @@
         <button class="public-site-button" @click="gotoAbout()">About</button>
         <button class="public-site-button" @click="gotoBlogs()">Blogs</button>
         <button class="public-site-button" @click="gotoCareer()">Career</button>
-        <button class="public-site-button" @click="gotoContact()">Contact</button>
+        <button class="public-site-button" @click="gotoContact()">
+          {{ getContactText }}
+        </button>
       </div>
     </div>
   </div>
@@ -25,7 +22,22 @@
 export default {
   name: 'HeaderGuest',
   components: {},
-  computed: {},
+  computed: {
+    getContactText() {
+      if (this.getRegion === "CN") {
+        return "联系我们"
+      }
+      return "Contact"
+    },
+    getRegion() {
+      // To be consistent with Region definition
+      // For now, region is only China and non-China
+      if (window.location.href.includes('localhost') || window.location.href.includes('com.cn')) {
+        return "CN"
+      }
+      return "Other"
+    }
+  },
   methods: {
     gotoFrontdoor() {
       this.mnx_navToFrontDoor()
@@ -52,6 +64,7 @@ export default {
   height: 100%;
   background: white;
   max-width: 100%;
+
   .header-content {
     display: flex;
     align-items: center;
@@ -83,6 +96,7 @@ export default {
 .public-sites {
   display: flex;
   align-items: center;
+
   .public-site-button {
     @extend .btn;
     @extend .btn-link;

frontend/src/headers/HeaderUser.vue

@@ -1,54 +1,28 @@
 <template>
   <div class="header-container">
     <div class="header-content">
-      <div
+      <div class="information-bar" @click="gotoMessages" :class="activePath == 'message' ? 'active' : ''">
-        class="information-bar"
-        @click="gotoMessages"
-        :class="activePath == 'message' ? 'active' : ''"
-      >
         <img alt="freeleaps logo" src="@/assets/message.png" />
       </div>
       <div class="navigation-container" role="navigation">
-        <button
+        <button class="navigation-item" @click="gotoWorkspace" :class="activePath == 'Workspace' ? 'active' : ''">
-          class="navigation-item"
-          @click="gotoWorkspace"
-          :class="activePath == 'Workspace' ? 'active' : ''"
-        >
           <svg-icon icon="workspace" class-name="icon" />
           Workspace
         </button>
-        <button
+        <button class="navigation-item" @click="gotoRequests" :class="activePath == 'Requests' ? 'active' : ''">
-          class="navigation-item"
-          @click="gotoRequests"
-          :class="activePath == 'Requests' ? 'active' : ''"
-        >
           <svg-icon icon="requests" class-name="icon" />
           Requests
         </button>
-        <button
+        <button class="navigation-item" @click="gotoProviders" :class="activePath == 'Providers' ? 'active' : ''">
-          class="navigation-item"
-          @click="gotoProviders"
-          :class="activePath == 'Providers' ? 'active' : ''"
-        >
           <svg-icon icon="providers" class-name="icon" />
           Providers
         </button>
-        <button
+        <button class="navigation-item" @click="gotoIssueRequest" :class="activePath == 'Post' ? 'active' : ''">
-          class="navigation-item"
-          @click="gotoIssueRequest"
-          :class="activePath == 'Post' ? 'active' : ''"
-        >
           <svg-icon icon="post" class-name="icon" />
           Post
         </button>
         <div class="form-check form-switch header-switch-container">
-          <input
+          <input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox" disabled />
-            class="form-check-input"
-            type="checkbox"
-            role="switch"
-            id="personal-earning-now-checkbox"
-            disabled
-          />
           <label class="form-check-label" for="personal-earning-now-checkbox">
             <span>Providing service</span>
           </label>
@@ -58,13 +32,8 @@
         </div>
       </div>
       <div class="profile-container">
-        <img
+        <img alt="freeleaps logo" data-bs-toggle="dropdown" aria-expanded="false" id="accountButton"
-          alt="freeleaps logo"
+          src="@/assets/profile.png" />
-          data-bs-toggle="dropdown"
-          aria-expanded="false"
-          id="accountButton"
-          src="@/assets/profile.png"
-        />
         <ul class="dropdown-menu" aria-labelledby="accountButton">
           <li>
             <button class="account-menu-button" @click="gotoProfile">Profile</button>
@@ -162,6 +131,7 @@ export default {
   height: 100%;
   background: #f8fafc;
   max-width: 100%;
+
   .header-content {
     display: flex;
     align-items: center;
@@ -182,10 +152,12 @@ export default {
   justify-content: center;
   position: relative;
   background-color: white;
+
   img {
     width: 24px;
     height: 24px;
   }
+
   &::after {
     content: '';
     display: block;
@@ -197,6 +169,7 @@ export default {
     top: 0;
     background-color: #f44837;
   }
+
   &.active {
     border: 1px solid $primary;
   }
@@ -204,6 +177,7 @@ export default {
 
 .profile-container {
   position: relative;
+
   img {
     width: 56px;
   }
@@ -213,15 +187,18 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+
   .navigation-item {
     @extend .btn;
     @extend .btn-link;
     color: #6e7387;
     text-decoration: none;
     margin: 0 30px;
+
     &:hover {
       color: $primary;
     }
+
     &.active {
       color: $primary;
       font-weight: 500;
@@ -238,7 +215,7 @@ export default {
     left: 0;
     bottom: -20px;
     font-size: 12px;
-    color: #3D455f;
+    color: #3d455f;
     white-space: nowrap;
     padding: 2px 5px;
   }

frontend/src/pages/user/account/UserProfile.vue

@@ -265,7 +265,9 @@
                 id="personal-photo-operation-image"
                 src="@/assets/profile.png"
               />
-              <label class="profile-item-label" for="personal-photo-operation-image">Portrait</label>
+              <label class="profile-item-label" for="personal-photo-operation-image"
+                >Portrait</label
+              >
             </div>
           </button>
           <button
@@ -373,9 +375,18 @@
       >
         <div class="collapse-item-container">
           <div class="collapse-item-editor">
-            <freeleaps-editor v-model:content="personalOperation.self_intro.content_html" :disabled="!personalOperation.self_intro.is_editing" />
+            <freeleaps-editor
+              v-model:content="personalOperation.self_intro.content_html"
+              :disabled="!personalOperation.self_intro.is_editing"
+            />
             <div class="btn-group-container">
-              <button v-if="!personalOperation.self_intro.is_editing" class="btn btn-link" @click="personalOperation.self_intro.is_editing = true">Edit</button>
+              <button
+                v-if="!personalOperation.self_intro.is_editing"
+                class="btn btn-link"
+                @click="personalOperation.self_intro.is_editing = true"
+              >
+                Edit
+              </button>
               <button
                 v-if="personalOperation.self_intro.is_editing"
                 class="btn btn-link"
@@ -386,8 +397,18 @@
               >
                 Templates
               </button>
-              <button v-if="personalOperation.self_intro.is_editing" @click="updateSelfIntro()" class="btn btn-link">Update</button>
+              <button
-              <button v-if="personalOperation.self_intro.is_editing" @click="stopEdittingSelfintro($event)" class="btn btn-link">
+                v-if="personalOperation.self_intro.is_editing"
+                @click="updateSelfIntro()"
+                class="btn btn-link"
+              >
+                Update
+              </button>
+              <button
+                v-if="personalOperation.self_intro.is_editing"
+                @click="stopEdittingSelfintro($event)"
+                class="btn btn-link"
+              >
                 Cancel
               </button>
             </div>
@@ -402,10 +423,20 @@
       >
         <div class="collapse-checkbox-container">
           <div class="form-check form-switch">
-            <input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox" v-model="personalOperation.accepting_request" @click="updateAcceptingRequest($event)" :disabled="!paymentOperation.ready_to_receive_money">
+            <input
+              class="form-check-input"
+              type="checkbox"
+              role="switch"
+              id="personal-earning-now-checkbox"
+              v-model="personalOperation.accepting_request"
+              @click="updateAcceptingRequest($event)"
+              :disabled="!paymentOperation.ready_to_receive_money"
+            />
             <label class="form-check-label" for="personal-earning-now-checkbox">
               <span>I want to be a service provider and earn money</span>
-              <span v-if="personalOperation.show_stripe_status" style="color: red">* Stripe account onboarding is not completed.</span>
+              <span v-if="personalOperation.show_stripe_status" style="color: red"
+                >* Stripe account onboarding is not completed.</span
+              >
             </label>
           </div>
           <div class="flex-1" />
@@ -427,14 +458,24 @@
           </div>
         </div>
         <div class="collapse-item-container">
-          <label v-if="Is_Wechat_QR_Code_Payment()" class="collapse-item-uploader" for="qr-uploader">
+          <label
+            v-if="Is_Wechat_QR_Code_Payment()"
+            class="collapse-item-uploader"
+            for="qr-uploader"
+          >
             <img
               v-if="paymentOperation.wechat_qr_code_img.data"
               class="uploader-img-show"
               :src="paymentOperation.wechat_qr_code_img.data"
             />
-            <img v-if="!paymentOperation.wechat_qr_code_img.data" class="uploader-img-btn" src="@/assets/images/qr-code.png" />
+            <img
-            <span v-if="!paymentOperation.wechat_qr_code_img.data" class="upload-text-btn">Upload QR code to receive payment</span>
+              v-if="!paymentOperation.wechat_qr_code_img.data"
+              class="uploader-img-btn"
+              src="@/assets/images/qr-code.png"
+            />
+            <span v-if="!paymentOperation.wechat_qr_code_img.data" class="upload-text-btn"
+              >Upload QR code to receive payment</span
+            >
           </label>
           <input
             v-if="Is_Wechat_QR_Code_Payment()"
@@ -447,10 +488,14 @@
           />
         </div>
         <div v-if="Is_Stripe_Payment()" class="collapse-item-container">
-          <span>Have you linked your strip account?</span><button class="btn btn-link" @click="visitStripe()">Visit Stripe</button>
+          <span>Have you linked your strip account?</span
+          ><button class="btn btn-link" @click="visitStripe()">Visit Stripe</button>
         </div>
         <div v-if="personalOperation.accepting_request" class="collapse-item-container">
-          <span>You are a service provider now. Please review your self-intro to reflect your skills to deliver projects.</span>
+          <span
+            >You are a service provider now. Please review your self-intro to reflect your skills to
+            deliver projects.</span
+          >
         </div>
       </div>
     </div>
@@ -597,7 +642,10 @@
               <div class="panel-table-content">
                 <span class="panel-table-label">Delivering time</span>
                 <span class="panel-table-span">
-                  {{ userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day }} days
+                  {{
+                    userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day
+                  }}
+                  days
                 </span>
               </div>
             </td>
@@ -1229,7 +1277,7 @@ export default {
   padding: 12px;
   // overflow: hidden;
   border-radius: 12px;
-  box-shadow: 0px 0px 24px 0px #D4D3E380;
+  box-shadow: 0px 0px 24px 0px #d4d3e380;
   background-color: white;
   margin-bottom: 20px;
 
@@ -1247,7 +1295,7 @@ export default {
 
     .panel-item-container {
       width: calc(25% - 9px);
-      border: 1px dashed #1748F8;
+      border: 1px dashed #1748f8;
       background-color: white;
       padding: 0 12px;
       height: 46px;
@@ -1258,13 +1306,13 @@ export default {
       outline: none;
 
       &:hover {
-        background-color: #F3F6FF;
+        background-color: #f3f6ff;
       }
       // &.active {
       //   background-color: #F3F6FF;
       // }
-      &[aria-expanded=true] {
+      &[aria-expanded='true'] {
-        background-color: #F3F6FF;
+        background-color: #f3f6ff;
       }
 
       .profile-item-container {
@@ -1291,13 +1339,22 @@ export default {
           color: #666666;
           line-height: 1;
         }
-        .profile-item-span {font-size: 14px; font-weight: bold; color: #242424; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; line-height: 1}
+        .profile-item-span {
+          font-size: 14px;
+          font-weight: bold;
+          color: #242424;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          display: block;
+          line-height: 1;
+        }
       }
     }
   }
   .collapse-content-container {
     margin: 12px -12px -12px -12px;
-    border-top: 1px solid #E7E8EB;
+    border-top: 1px solid #e7e8eb;
 
     .collapse-item-container {
       padding: 32px;
@@ -1314,7 +1371,7 @@ export default {
         width: 100%;
         position: relative;
 
-        .btn-group-container{
+        .btn-group-container {
           position: absolute;
           right: 32px;
           top: 10px;
@@ -1323,55 +1380,55 @@ export default {
     }
 
     .collapse-item-input {
-        height: 37px;
+      height: 37px;
-        width: 350px;
+      width: 350px;
-        border: 1px solid #E1E1E1;
+      border: 1px solid #e1e1e1;
-        border-radius: 3px;
+      border-radius: 3px;
-        margin: 0 8px;
+      margin: 0 8px;
-        box-shadow: none;
+      box-shadow: none;
-        padding: 0 8px;
+      padding: 0 8px;
-        display: flex;
+      display: flex;
-        align-items: center;
+      align-items: center;
-        position: relative;
+      position: relative;
-        
-        &:focus-within {
-          border: 1px solid #1748F8;
-        }
 
-        input {
+      &:focus-within {
-          flex: 1;
+        border: 1px solid #1748f8;
-          height: 100%;
-          border: none;
-          outline: none;
-          box-shadow: none;
-        }
-
-        .error-message {
-          color: #916AD4;
-          font-size: 16px;
-          position: absolute;
-          left: 0;
-          bottom: -26px;
-          margin: 0;
-        }
-
-        .enter-icon {
-          width: 13px;
-          height: 13px;
-          margin-left: 12px;
-          background-color: #E7E9ED;
-          border-radius: 3px;
-          padding: 2px;
-        }
-
-        .collapse-item-currency {
-          font-size: 14px;
-          font-weight: bold;
-          color: #0D1637;
-          margin-left: 12px;
-        }
       }
 
+      input {
+        flex: 1;
+        height: 100%;
+        border: none;
+        outline: none;
+        box-shadow: none;
+      }
+
+      .error-message {
+        color: #916ad4;
+        font-size: 16px;
+        position: absolute;
+        left: 0;
+        bottom: -26px;
+        margin: 0;
+      }
+
+      .enter-icon {
+        width: 13px;
+        height: 13px;
+        margin-left: 12px;
+        background-color: #e7e9ed;
+        border-radius: 3px;
+        padding: 2px;
+      }
+
+      .collapse-item-currency {
+        font-size: 14px;
+        font-weight: bold;
+        color: #0d1637;
+        margin-left: 12px;
+      }
+    }
+
     .collapse-item-uploader {
       width: 150px;
       height: 150px;
@@ -1382,7 +1439,9 @@ export default {
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      &:hover {opacity: .78;}
+      &:hover {
+        opacity: 0.78;
+      }
 
       .uploader-img-btn {
         width: 50px;
@@ -1405,13 +1464,13 @@ export default {
       padding: 12px;
       display: flex;
       align-items: center;
-      border-bottom: 1px solid #E7E8EB
+      border-bottom: 1px solid #e7e8eb;
     }
   }
 
   .panel-table-container {
     border: 0;
-	  border-collapse: collapse;
+    border-collapse: collapse;
     width: 100%;
 
     .panel-table-content {

frontend/src/pages/user/messages/Home.vue

@@ -8,8 +8,8 @@
           class="conversation-container"
           :class="{
             selected:
-              current_thread?.conversation?.information?.conversation_id ===
+              current_thread?.conversation?.information?.id ===
-              conversation.summary.last_message.conversation_id
+              conversation.summary.last_message?.conversation_id
           }"
           @click="selectConversation(conversation)"
         >
@@ -21,11 +21,11 @@
                 {{ conversation.summary.contact.last_name }}
               </span>
               <span class="conversation-last-update-date">{{
-                getDateFromFulltimeString(conversation.summary.last_message.create_time)
+                getDateFromFulltimeString(conversation.summary.last_message?.create_time)
               }}</span>
             </div>
             <div class="conversation-summary-highlight-container">
-              {{ conversation.summary.last_message.message_body }}
+              {{ conversation.summary.last_message?.message_body }}
             </div>
           </div>
         </div>