How to use ringcentral-widgets - 10 common examples

// const contactId = currentContact.id;
    const activityCardId = sessionId ? `${currentContact.id}-${sessionId}` : currentContact.id;
    if (recentMessages.messages[activityCardId]) {
      messages = recentMessages.messages[activityCardId];
    }
    if (recentCalls.calls[activityCardId]) {
      calls = recentCalls.calls[activityCardId];
    }
    if (recentMessages.unreadMessageCounts[activityCardId]) {
      unreadMessageCounts = recentMessages.unreadMessageCounts[activityCardId];
    }
  }
  const tabs = [
    {
      icon: <span>,
      label: i18n.getString('call', currentLocale),
      path: 'recentCalls',
      isActive: path =&gt; path === 'recentCalls',
      view: (
        
      ),
      getData: () =&gt; {
        recentCalls.getCalls({ currentContact, sessionId });
      },
      cleanUp: () =&gt; recentCalls.cleanUpCalls({ contact: currentContact, sessionId })
    },
    {</span>

import connectivityTypes from 'ringcentral-widgets/modules/ConnectivityManager/connectivityTypes';
export default {
  [connectivityTypes.webphoneUnavailable]: "Web Phone indisponible.",
  [connectivityTypes.offline]: "Hors ligne",
  [connectivityTypes.voipOnly]: "VoIP seulement",
  [connectivityTypes.survival]: "Mode limité"
};

// @key: @#@"[connectivityTypes.webphoneUnavailable]"@#@ @source: @#@"Web Phone Unavailable"@#@
// @key: @#@"[connectivityTypes.offline]"@#@ @source: @#@"Offline"@#@
// @key: @#@"[connectivityTypes.voipOnly]"@#@ @source: @#@"VoIP Only"@#@
// @key: @#@"[connectivityTypes.survival]"@#@ @source: @#@"Limited Mode"@#@

import connectivityTypes from 'ringcentral-widgets/modules/ConnectivityManager/connectivityTypes';
export default {
  [connectivityTypes.webphoneUnavailable]: "Web Phone indisponible.",
  [connectivityTypes.offline]: "Hors ligne",
  [connectivityTypes.voipOnly]: "VoIP seulement",
  [connectivityTypes.survival]: "Mode limité"
};

// @key: @#@"[connectivityTypes.webphoneUnavailable]"@#@ @source: @#@"Web Phone Unavailable"@#@
// @key: @#@"[connectivityTypes.offline]"@#@ @source: @#@"Offline"@#@
// @key: @#@"[connectivityTypes.voipOnly]"@#@ @source: @#@"VoIP Only"@#@
// @key: @#@"[connectivityTypes.survival]"@#@ @source: @#@"Limited Mode"@#@

import connectivityTypes from 'ringcentral-widgets/modules/ConnectivityManager/connectivityTypes';
export default {
  [connectivityTypes.webphoneUnavailable]: "Web Phone indisponible.",
  [connectivityTypes.offline]: "Hors ligne",
  [connectivityTypes.voipOnly]: "VoIP seulement",
  [connectivityTypes.survival]: "Mode limité"
};

// @key: @#@"[connectivityTypes.webphoneUnavailable]"@#@ @source: @#@"Web Phone Unavailable"@#@
// @key: @#@"[connectivityTypes.offline]"@#@ @source: @#@"Offline"@#@
// @key: @#@"[connectivityTypes.voipOnly]"@#@ @source: @#@"VoIP Only"@#@
// @key: @#@"[connectivityTypes.survival]"@#@ @source: @#@"Limited Mode"@#@

import connectivityTypes from 'ringcentral-widgets/modules/ConnectivityManager/connectivityTypes';
export default {
  [connectivityTypes.webphoneUnavailable]: "Web Phone indisponible.",
  [connectivityTypes.offline]: "Hors ligne",
  [connectivityTypes.voipOnly]: "VoIP seulement",
  [connectivityTypes.survival]: "Mode limité"
};

// @key: @#@"[connectivityTypes.webphoneUnavailable]"@#@ @source: @#@"Web Phone Unavailable"@#@
// @key: @#@"[connectivityTypes.offline]"@#@ @source: @#@"Offline"@#@
// @key: @#@"[connectivityTypes.voipOnly]"@#@ @source: @#@"VoIP Only"@#@
// @key: @#@"[connectivityTypes.survival]"@#@ @source: @#@"Limited Mode"@#@

if (currentContact && currentContact.id) {
    // const contactId = currentContact.id;
    const activityCardId = sessionId ? `${currentContact.id}-${sessionId}` : currentContact.id;
    if (recentMessages.messages[activityCardId]) {
      messages = recentMessages.messages[activityCardId];
    }
    if (recentCalls.calls[activityCardId]) {
      calls = recentCalls.calls[activityCardId];
    }
    if (recentMessages.unreadMessageCounts[activityCardId]) {
      unreadMessageCounts = recentMessages.unreadMessageCounts[activityCardId];
    }
  }
  const tabs = [
    {
      icon: <span>,
      label: i18n.getString('call', currentLocale),
      path: 'recentCalls',
      isActive: path =&gt; path === 'recentCalls',
      view: (
        
      ),
      getData: () =&gt; {
        recentCalls.getCalls({ currentContact, sessionId });
      },
      cleanUp: () =&gt; recentCalls.cleanUpCalls({ contact: currentContact, sessionId })
    },</span>

import React from 'react';
// eslint-disable-next-line
import DropdownNavigationItem from 'ringcentral-widgets/components/DropdownNavigationItem';
// eslint-disable-next-line
import dynamicsFont from 'ringcentral-widgets/assets/DynamicsFont/DynamicsFont.scss';

const props = {};
props.icon = <span>;
props.activeIcon = <span>;
props.label = 'Settings';
props.path = '/settings';

/**
 * A example of `DropdownNavigationItem`
 */
const DropdownNavigationItemDemo = () =&gt; ;
export default DropdownNavigationItemDemo;
</span></span>

import React from 'react';
// eslint-disable-next-line
import DropdownNavigationItem from 'ringcentral-widgets/components/DropdownNavigationItem';
// eslint-disable-next-line
import dynamicsFont from 'ringcentral-widgets/assets/DynamicsFont/DynamicsFont.scss';

const props = {};
props.icon = <span>;
props.activeIcon = <span>;
props.label = 'Settings';
props.path = '/settings';

/**
 * A example of `DropdownNavigationItem`
 */
const DropdownNavigationItemDemo = () =&gt; ;
export default DropdownNavigationItemDemo;
</span></span>

atRender: getAtRender({
      glipGroups,
      glipPersons,
      onViewPersonProfile,
      onViewGroup,
    }),
    viewProfile(personId) {
      if (personId) {
        onViewPersonProfile(personId);
      }
    },
    dateTimeFormatter,
  };
}

const GlipChatPage = withPhone(
  connect(
    mapToProps,
    mapToFunctions,
  )(GlipChatPanel),
);

export default GlipChatPage;

glipGroups.updateFilter({ pageNumber });
    },
    updateContactSearchFilter(searchFilter) {
      contacts.updateFilter({ searchFilter });
    },
    async createTeam({ teamName, selectedContacts }) {
      const groupId = await glipGroups.createTeam(
        teamName,
        selectedContacts.map((sc) => sc.email),
      );
      onSelectGroup(groupId);
    },
  };
}

const GlipGroupsPage = withPhone(
  connect(
    mapToProps,
    mapToFunctions,
  )(GlipGroupsPanel),
);

export default GlipGroupsPage;