Support sync recent updated/created contacts

Author: zxdong262

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pipedrive-embeddable-ringcentral-phone-spa",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Add RingCentral Embeddable Voice widgets to Pipedrive",
   "keywords": [
     "RingCentral",

src/config.js

@@ -40,6 +40,7 @@ import {
   search,
   match
 } from 'ringcentral-embeddable-extension-common/src/common/db'
+import initReact from './lib/react-entry'
 
 let {
   pageSize = 100
@@ -244,7 +245,9 @@ export function thirdPartyServiceConfig (serviceName) {
     } else if (path === '/contacts') {
       let isMannulSync = _.get(data, 'body.type') === 'manual'
       if (isMannulSync) {
-        reSyncData()
+        window.postMessage({
+          type: 'rc-show-sync-menu'
+        }, '*')
         rc.postMessage({
           type: 'rc-post-message-response',
           responseId: data.requestId,
@@ -362,6 +365,7 @@ export async function initThirdParty () {
     notifyRCAuthed()
   }
   upgrade()
+  initReact()
 }
 
 // init call with ringcenntral button at page bottom

src/features/contacts.js

@@ -30,6 +30,7 @@ const {
   serviceName
 } = thirdPartyConfigs
 const lastSyncOffset = 'last-sync-offset'
+const lastSyncOffsetRecent = 'last-sync-offset-recent'
 
 /**
  * convert pipedrive contact data to ringcentral format data
@@ -103,36 +104,47 @@ export const getContact = async function (start = 0) {
   let token = getSessionToken()
   // let self = await getSelfInfo(token)
   // let uid = self.data.id
-  let url = `${host}/api/v1/persons/list:(cc_email,active_flag,id,name,label,org_id,email,phone,closed_deals_count,open_deals_count,next_activity_date,owner_id,next_activity_time)?session_token=${token}&strict_mode=true&user_id=&sort=&label=&start=${start}&type=person&_=${+new Date()}`
+  const sort = encodeURIComponent('update_time ASC')
+  let url = `${host}/api/v1/persons/list:(cc_email,active_flag,id,name,label,org_id,email,phone,closed_deals_count,open_deals_count,update_time,next_activity_date,owner_id,next_activity_time)?session_token=${token}&strict_mode=true&user_id=&sort=${sort}&label=&start=${start}&type=person&_=${+new Date()}`
   return fetch.get(url)
 }
 
-async function fetchAllContacts () {
+async function fetchAllContacts (recent) {
   if (window.rc.isFetchingContacts) {
     return
   }
   console.debug('running fetchAllContacts')
   window.rc.isFetchingContacts = true
   loadingContacts()
-  let start = await getCache(lastSyncOffset) || 0
+  const lastSync = recent
+    ? lastSyncOffsetRecent
+    : lastSyncOffset
+  let start = recent
+    ? 0
+    : await getCache(lastSync) || 0
   let hasMore = true
-  await remove().catch(e => {
-    console.log(e.stack)
-  })
+  if (!recent && !start) {
+    await remove().catch(e => {
+      console.log(e.stack)
+    })
+  }
   while (hasMore) {
     let res = await getContact(start).catch(console.debug)
+    console.log(res, 'res')
     if (!res || !res.data) {
       window.rc.isFetchingContacts = false
       return
     }
     let final = formatData(res)
     start = _.get(res, 'additional_data.pagination.start') + _.get(res, 'additional_data.pagination.limit')
-    hasMore = _.get(res, 'additional_data.pagination.more_items_in_collection')
+    hasMore = recent
+      ? false
+      : _.get(res, 'additional_data.pagination.more_items_in_collection')
     console.debug('fetching, start:', start, ', has more:', hasMore)
     await insert(final).catch(console.debug)
-    await setCache(lastSyncOffset, start, 'never')
+    await setCache(lastSync, start, 'never')
   }
-  await setCache(lastSyncOffset, 0, 'never')
+  await setCache(lastSync, 0, 'never')
   let now = Date.now()
   window.rc.syncTimestamp = now
   await ls.set('syncTimestamp', now)
@@ -256,12 +268,12 @@ function stopLoadingContacts () {
   }
 }
 
-export function reSyncData () {
+export function reSyncData (recent) {
   if (!window.rc.userAuthed) {
     showAuthBtn()
     return
   }
-  fetchAllContacts()
+  fetchAllContacts(recent)
 }
 
 function notifyReSyncContacts () {

src/lib/box.styl

@@ -0,0 +1,149 @@
+
+for $i, $index in 5 16 32
+  
+  //padding
+  .pd{$index+1}
+    padding ($i)px
+    
+  .pd{$index+1}x
+    padding-left ($i)px
+    padding-right ($i)px
+
+  .pd{$index+1}l
+    padding-left ($i)px
+  
+  .pd{$index+1}r
+    padding-right ($i)px
+    
+  .pd{$index+1}y
+    padding-top ($i)px
+    padding-bottom ($i)px
+
+  .pd{$index+1}t
+    padding-top ($i)px
+  
+  .pd{$index+1}b
+    padding-bottom ($i)px
+
+  //margin
+  .mg{$index+1}
+    margin ($i)px
+    
+  .mg{$index+1}x
+    margin-left ($i)px
+    margin-right ($i)px
+
+  .mg{$index+1}l
+    margin-left ($i)px
+  
+  .mg{$index+1}r
+    margin-right ($i)px
+    
+  .mg{$index+1}y
+    margin-top ($i)px
+    margin-bottom ($i)px
+
+  .mg{$index+1}t
+    margin-top ($i)px
+  
+  .mg{$index+1}b
+    margin-bottom ($i)px
+
+.mg-auto
+  margin-left auto
+  margin-right auto
+.mg0
+  margin 0
+.pd0
+  padding 0
+  
+.block
+  display block
+
+.inline
+  display inline-block
+
+.iblock
+  display inline-block
+  vertical-align middle
+
+.ibblock
+  display inline-block
+  vertical-align baseline
+  
+.itblock
+  display inline-block
+  vertical-align top
+
+.border
+  border 1px solid #e4e4e4
+
+.borderl
+  border-left 1px solid #e4e4e4
+
+.borderr
+  border-right 1px solid #e4e4e4
+
+.borderb
+  border-bottom 1px solid #e4e4e4
+  &.dashed
+    border-bottom 1px dashed #e4e4e4
+
+.bordert
+  border-top 1px solid #e4e4e4
+
+.borderr
+  border-right 1px solid #e4e4e4
+
+.borderl
+  border-left 1px solid #e4e4e4
+
+.border-dashed
+  border-style dashed
+.border-dotted
+  border-style dotted
+
+.hide,
+.hide1, 
+.hide2
+  display none
+
+.hidden
+  visibility hidden
+
+.fleft
+  float left
+
+.fright
+  float right
+
+.fcenter
+  float center
+
+.fix:before,
+.fix:after
+  content " "
+  display table
+
+.fix
+  &:after
+    clear both
+    
+.overhide
+  overflow hidden
+
+.overscroll
+  overflow scroll
+
+.overscroll-y
+  overflow-y scroll
+
+.relative
+  position relative
+.absolute
+  position absolute
+.pointer
+  cursor pointer
+
+.spin-90
+  transform rotate(90deg)

src/lib/react-ele.js

@@ -0,0 +1,91 @@
+/**
+ * react element app
+ */
+
+import { useEffect } from 'react'
+import { Modal, Button } from 'antd'
+import { SyncOutlined } from '@ant-design/icons'
+import { reSyncData } from '../features/contacts'
+
+function showSyncMenu () {
+  let mod = null
+  function syncRecent () {
+    reSyncData(true)
+    destroyMod()
+  }
+  function syncAll () {
+    reSyncData()
+    destroyMod()
+  }
+  function destroyMod () {
+    mod.destroy()
+  }
+  const content = (
+    <div>
+      <div className='pd2b'>After Sync contacts, conatacts data will update, so auto call log can match right contacts, you could choose sync only recent updated/created contacts or sync all contacts.</div>
+      <div>
+        <Button
+          type='primary'
+          className='mg1r mg1b'
+          onClick={syncRecent}
+        >
+          Sync recent update/created contacts
+        </Button>
+        <Button
+          type='primary'
+          className='mg1r mg1b'
+          onClick={syncAll}
+        >
+          Sync all contacts
+        </Button>
+        <Button
+          type='ghost'
+          className='mg1r mg1b'
+          onClick={destroyMod}
+        >
+          Cancel
+        </Button>
+      </div>
+    </div>
+  )
+  const btnProps = {
+    disabled: true,
+    className: 'hide'
+  }
+  mod = Modal.confirm({
+    title: 'Sync contacts',
+    width: '90%',
+    icon: <SyncOutlined />,
+    content,
+    zIndex: 11000,
+    closable: false,
+    okButtonProps: btnProps,
+    cancelButtonProps: btnProps
+  })
+}
+
+function showNotification (info, destroyPrev = false) {
+
+}
+
+export default () => {
+  function onEvent (e) {
+    if (!e || !e.data || !e.data.type) {
+      return
+    }
+    const { type } = e.data
+    if (type === 'rc-show-sync-menu') {
+      showSyncMenu()
+    } else if (type === 'rc-show-notification') {
+      showNotification(e.data.info)
+    }
+  }
+  useEffect(() => {
+    window.addEventListener('message', onEvent)
+    return () => {
+      window.removeEventListener('message', onEvent)
+    }
+  }, [])
+
+  return null
+}

src/lib/react-entry.js

@@ -0,0 +1,25 @@
+/**
+ * react entry
+ */
+
+import { render } from 'react-dom'
+import {
+  createElementFromHTML
+} from 'ringcentral-embeddable-extension-common/src/common/helpers'
+import App from './react-ele'
+import './box.styl'
+
+export default () => {
+  const id = 'rc-react-entry'
+  let rootElement = document.getElementById(id)
+  if (rootElement) {
+    return
+  }
+  rootElement = createElementFromHTML(`<div id="${id}"></div>`)
+  const home = document.body
+  home.appendChild(rootElement)
+  render(
+    <App />,
+    rootElement
+  )
+}

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Ringcentral Embeddable Widgets for Pipedrive",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Add RingCentral Embeddable Voice widgets to Pipedrive",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA1YqYvCEeGGNOgtKrx8DfG33ujx7NgAwbyVpikug4mHiNvKZYWulw7lY5fjaD8wAy5bmXnkfULDzqMkL8UOxUcf8qD2lJFcLm+BqBtqNnoSz00vwjSOxXrcDvpvsMrjEZkI7N/FD60sTWp1U+QOehua7OboUpXb4iV7TQfppz3PsCz7qGOa4PWjUMAZTTgomUtW47Es6f/vjIeejs7Ihro3Al5Jo3SWIbjpjSU9BK34XgFvtcZx3lZQgfFiK+ZNyxlx8mgC/PLqJB+uX63ywMrT86TdcfxBuaThy98S8SCXjZTpHOP6X5pmGMk0lPM06hwxmSCBZgHOHL/Wk6r8FUlQIDAQAB",
   "permissions": [