- Add note form in calling panel

- Update authorization panel UI

Author: zxdong262

package.json

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

src/config.js

@@ -21,8 +21,7 @@ import {
   showAuthBtn,
   unAuth,
   doAuth,
-  notifyRCAuthed,
-  renderAuthButton
+  notifyRCAuthed
 } from './features/auth'
 import * as ls from 'ringcentral-embeddable-extension-common/src/common/ls'
 
@@ -41,6 +40,7 @@ import {
   match
 } from 'ringcentral-embeddable-extension-common/src/common/db'
 import initReact from './lib/react-entry'
+import initInner from './lib/inner-entry'
 
 let {
   pageSize = 100
@@ -359,13 +359,12 @@ export async function initThirdParty () {
   window.rc.userAuthed = userAuthed
   window.rc.syncTimestamp = await ls.get('syncTimestamp') || null
   window.rc.syncTimestampDeal = await ls.get('syncTimestampDeal') || null
-  // get the html ready
-  renderAuthButton()
   if (window.rc.userAuthed) {
     notifyRCAuthed()
   }
   upgrade()
   initReact()
+  initInner()
 }
 
 // init call with ringcenntral button at page bottom

src/features/auth.js

@@ -2,19 +2,12 @@
  * auth related feature
  */
 
-import { thirdPartyConfigs } from 'ringcentral-embeddable-extension-common/src/common/app-config'
-import logo from 'ringcentral-embeddable-extension-common/src/common/rc-logo'
 import {
-  createElementFromHTML,
-  findParentBySel,
   sendMsgToRCIframe
 } from 'ringcentral-embeddable-extension-common/src/common/helpers'
 import * as ls from 'ringcentral-embeddable-extension-common/src/common/ls'
 
 let tokenHandler
-let {
-  serviceName
-} = thirdPartyConfigs
 
 window.rc = {
   postMessage: sendMsgToRCIframe
@@ -45,22 +38,9 @@ export function hideAuthBtn () {
  * need show auth button to user
  */
 export function showAuthBtn () {
-  let dom = document.querySelector('.rc-auth-button-wrap')
-  dom && dom.classList.remove('rc-hide-to-side')
-}
-
-/**
- * hanle user click auth button
- * @param {*} e
- */
-function handleAuthClick (e) {
-  let { target } = e
-  let { classList } = target
-  if (findParentBySel(target, '.rc-auth-btn')) {
-    doAuth()
-  } else if (classList.contains('rc-dismiss-auth')) {
-    hideAuthBtn()
-  }
+  window.postMessage({
+    type: 'rc-show-auth-panel'
+  }, '*')
 }
 
 /**
@@ -80,9 +60,6 @@ export async function doAuth () {
   if (window.rc.userAuthed) {
     return
   }
-  hideAuthBtn()
-  let frameWrap = document.getElementById('rc-auth-hs')
-  frameWrap && frameWrap.classList.remove('rc-hide-to-side')
   updateUserAuthed(true)
   notifyRCAuthed()
 }
@@ -110,40 +87,3 @@ export async function unAuth () {
     refreshContactsBtn.remove()
   }
 }
-
-/**
- * render auth button
- * todo: you can customize this
- */
-export function renderAuthButton () {
-  let btn = createElementFromHTML(
-    `
-      <div class="rc-auth-button-wrap animate rc-hide-to-side">
-        <span class="rc-auth-btn">
-          <span class="rc-iblock">Auth</span>
-          <img class="rc-iblock" src="${logo}" />
-          <span class="rc-iblock">access ${serviceName} data</span>
-        </span>
-        <div class="rc-auth-desc rc-pd1t">
-          After auth, you can access ${serviceName} contacts from RingCentral phone's contacts list. You can revoke access from RingCentral phone's setting.
-        </div>
-        <div class="rc-pd1t">
-          <span class="rc-dismiss-auth" title="dismiss">&times;</span>
-        </div>
-      </div>
-    `
-  )
-  btn.onclick = handleAuthClick
-  if (
-    !document.querySelector('.rc-auth-button-wrap')
-  ) {
-    document.body.appendChild(btn)
-  }
-}
-
-/**
- * todo: you can customize this
- */
-export function renderAuthPanel () {
-  return false
-}

src/features/call-log-sync.js

@@ -15,7 +15,7 @@ import {
 } from 'ringcentral-embeddable-extension-common/src/common/helpers'
 import fetch from 'ringcentral-embeddable-extension-common/src/common/fetch'
 import moment from 'moment'
-import { getSessionToken } from './common'
+import { getSessionToken, autoLogPrefix } from './common'
 import {
   match
 } from 'ringcentral-embeddable-extension-common/src/common/db'
@@ -185,6 +185,13 @@ async function filterLoggered (arr) {
  */
 async function doSyncOne (contact, body, formData, isManuallySync) {
   let { id, org_id: oid } = contact
+  let desc = formData.description
+  const sid = _.get(body, 'call.telephonySessionId') || 'not-exist'
+  const sessid = autoLogPrefix + sid
+  if (!isManuallySync) {
+    desc = await ls.get(sessid) || ''
+    console.log('ff', sessid, desc)
+  }
   let toNumber = _.get(body, 'call.to.phoneNumber')
   let fromNumber = _.get(body, 'call.from.phoneNumber')
   let duration = _.get(body, 'call.duration') || 0
@@ -230,7 +237,7 @@ async function doSyncOne (contact, body, formData, isManuallySync) {
   let bodyAll = mainBody.map(mm => {
     return {
       id: mm.id,
-      body: `<p>${formData.description || ''}</p><p>${mm.body}</p>${recording}`
+      body: `<p>${desc || ''}</p><p>${mm.body}</p>${recording}`
     }
   })
   for (const uit of bodyAll) {
@@ -267,4 +274,7 @@ async function doSyncOne (contact, body, formData, isManuallySync) {
       notify('call log sync to third party failed', 'warn')
     }
   }
+  if (!isManuallySync) {
+    await ls.clear(sessid)
+  }
 }

src/features/common.js

@@ -11,6 +11,7 @@ export function getSessionToken () {
   return arr ? arr[1] : ''
 }
 
+export const autoLogPrefix = 'rc-auto-log-id:'
 /**
  * get current user info
  * @param {string} token

src/lib/inner-elem.js

@@ -2,91 +2,109 @@
  * react element in widget wrapper
  */
 
-// import { useEffect, useState } from 'react'
-// import { Modal, Button } from 'antd'
-// import { SyncOutlined } from '@ant-design/icons'
-// import { reSyncData } from '../features/contacts'
+import { useEffect, useState } from 'react'
+import { Tooltip, Input } from 'antd'
+import { EditOutlined, LeftCircleOutlined } from '@ant-design/icons'
+import * as ls from 'ringcentral-embeddable-extension-common/src/common/ls'
+// prefix telephonySessionId
+import { autoLogPrefix } from '../features/common'
+import _ from 'lodash'
+import './inner.styl'
 
-// 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
-//   })
-// }
+const { TextArea } = Input
 
-// // function showNotification (info, destroyPrev = false) {
-
-// // }
-
-// export default () => {
-//   // const [showForm, setShowForm] = useState(false)
-//   // function onEvent (e) {
-//   //   if (!e || !e.data || !e.data.type) {
-//   //     return
-//   //   }
-//   //   const { type } = e.data
-//   //   if (type === 'rc-call-init-notify') {
-//   //     setShowForm(true)
-//   //   } else if (type === 'rc-show-notification') {
-//   //     showNotification(e.data.info)
-//   //   }
-//   // }
-//   // useEffect(() => {
-//   //   window.addEventListener('message', onEvent)
-//   //   return () => {
-//   //     window.removeEventListener('message', onEvent)
-//   //   }
-//   // }, [])
-
-//   return null
-// }
+export default () => {
+  const [state, setStateOri] = useState({
+    calling: false,
+    note: '',
+    hideForm: false
+  })
+  const { note, hideForm, calling } = state
+  function setState (obj) {
+    setStateOri(s => ({
+      ...s,
+      ...obj
+    }))
+    console.log('state', state)
+  }
+  function saveNote (id) {
+    console.log('sid', id)
+    console.log('statebbb', note)
+    ls.set(id, note)
+  }
+  function onEvent (e) {
+    if (!e || !e.data || !e.data.type) {
+      return
+    }
+    const { type } = e.data
+    if (type === 'rc-call-start-notify') {
+      setState({
+        calling: true,
+        note: '',
+        hideForm: false
+      })
+    } else if (type === 'rc-call-end-notify') {
+      // setState({
+      //   hideForm: true
+      // })
+      const sid = _.get(e, 'data.call.partyData.sessionId')
+      if (!sid) {
+        return
+      }
+      const id = autoLogPrefix + sid
+      saveNote(id)
+    }
+  }
+  function handleChangeNote (e) {
+    setState({
+      note: e.target.value
+    })
+  }
+  useEffect(() => {
+    window.addEventListener('message', onEvent)
+    return () => {
+      window.removeEventListener('message', onEvent)
+    }
+  }, [note])
+  if (!calling) {
+    return null
+  }
+  if (hideForm) {
+    return (
+      <Tooltip title='Show note edit form' overlayClassName='rc-toolt-tip-card'>
+        <EditOutlined
+          onClick={() => setState({
+            hideForm: false
+          })}
+          className='pointer rc-show-note-form'
+        />
+      </Tooltip>
+    )
+  }
+  return (
+    <div className='rc-call-note-form'>
+      <div className='pd1'>
+        <Tooltip overlayClassName='rc-toolt-tip-card' title='Note will synced with call log when call end'>
+          <TextArea
+            value={note}
+            style={{
+              width: 'calc(100% - 24px)',
+              marginLeft: '24px'
+            }}
+            rows={1}
+            placeholder='Take some notes'
+            onChange={handleChangeNote}
+          />
+        </Tooltip>
+        <Tooltip title='Hide form' overlayClassName='rc-toolt-tip-card'>
+          <LeftCircleOutlined
+            onClick={() => setState({
+              hideForm: true
+            })}
+            className='pointer rc-hide-note-form'
+          />
+        </Tooltip>
+      </div>
+    </div>
+  )
+}