Reapply "Merge pull request #602 from urfit-tech/feat/lead-star-rating"

This reverts commit 25745b7.

src/components/common/StarRating.tsx

@@ -0,0 +1,29 @@
+import ReactStars from 'react-star-rating-component'
+import styled from 'styled-components'
+import { StarIcon, StarGrayIcon } from '../../images/icon/index'
+
+const ReactStarsWrapper = styled(ReactStars)`
+  svg {
+    width: 20px;
+    height: 20px;
+    margin-right: 4px;
+  }
+`
+
+const StarRating: React.FC<{
+  value: number
+  onStarClick: (nextValue: number, prevValue: number, name: string) => void
+  onStarHover: (nextValue: number, prevValue: number, name: string) => void
+}> = ({ value, onStarClick, onStarHover }) => {
+  return (
+    <ReactStarsWrapper
+      name="starRating"
+      value={value}
+      onStarClick={onStarClick}
+      onStarHover={onStarHover}
+      renderStarIcon={(nextValue, prevValue) => (nextValue > prevValue ? <StarGrayIcon /> : <StarIcon />)}
+    />
+  )
+}
+
+export default StarRating

src/components/sale/SalesLeadTable.tsx

@@ -29,13 +29,20 @@ import hasura from '../../hasura'
 import { call, handleError } from '../../helpers'
 import { commonMessages, salesMessages } from '../../helpers/translation'
 import { useUploadAttachments } from '../../hooks/data'
-import { useDeleteMemberProperty, useMutateMemberNote, useMutateMemberProperty, useProperty } from '../../hooks/member'
+import {
+  useDeleteMemberProperty,
+  useMutateMemberNote,
+  useMutateMemberProperty,
+  useProperty,
+  useMemberRating,
+} from '../../hooks/member'
 import { Filter, ManagerLead, useLeadStatusCategory } from '../../hooks/sales'
 import { ReactComponent as LeaveTheTab } from '../../images/icon/leave_the_tab.svg'
 import { StyledLine } from '../../pages/SalesLeadPage'
 import { LeadStatus, Manager, SalesLeadMember } from '../../types/sales'
 import AdminCard from '../admin/AdminCard'
 import AdminModal from '../admin/AdminModal'
+import StarRating from '../common/StarRating'
 import MemberNoteAdminModal from '../member/MemberNoteAdminModal'
 import MemberTaskAdminModal from '../task/MemberTaskAdminModal'
 import AddListModal from './AddListModal'
@@ -130,6 +137,7 @@ const SalesLeadTable: React.VFC<{
   const { authToken } = useAuth()
   const [confirmModalVisibleType, setConfirmModalVisibleType] = useState<'leaveResubmission' | ''>('')
   const { insertMemberNote, updateLastMemberNoteCalled, updateLastMemberNoteAnswered } = useMutateMemberNote()
+  const { upsertMemberRating } = useMemberRating()
   const [updateLeads] = useMutation<hasura.UPDATE_LEADS, hasura.UPDATE_LEADSVariables>(UPDATE_LEADS)
   const { updateMemberProperty } = useMutateMemberProperty()
   const { deleteMemberProperty } = useDeleteMemberProperty()
@@ -549,6 +557,30 @@ const SalesLeadTable: React.VFC<{
               </span>
             </a>
             <small>{lead?.email}</small>
+            {
+              <div>
+                <StarRating
+                  value={
+                    salesLeadMembersData?.salesLeadMembers.find(salesLeadMember => salesLeadMember.id === lead.id)
+                      ?.rating || 0
+                  }
+                  onStarClick={(value: number) =>
+                    upsertMemberRating({ variables: { managerId: manager.id, memberId: lead.id, rating: value } })
+                  }
+                  onStarHover={(value: number) => {
+                    const updateSalesLeadMembers =
+                      salesLeadMembersData?.salesLeadMembers.map(salesLeadMember =>
+                        salesLeadMember.id === lead.id ? { ...salesLeadMember, rating: value || 0 } : salesLeadMember,
+                      ) || []
+                    !!salesLeadMembersData &&
+                      onSaleLeadChange?.({
+                        ...salesLeadMembersData,
+                        salesLeadMembers: updateSalesLeadMembers,
+                      })
+                  }}
+                />
+              </div>
+            }
             {hasFullNameProperty ? (
               <div className="d-flex align-items-center">
                 <p>{`${formatMessage(saleMessages.SalesLeadTable.memberFullName)}：`}</p>