@zohodesk/dot 1.0.0-beta.244 → 1.0.0-beta.245

package/es/lookup/EmptyPage/docs/EmptyPage__contact.docs.js

@@ -0,0 +1,18 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+
+/*** Components ***/
+import EmptyPage from '../EmptyPage';
+export default class EmptyPage__contact extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(EmptyPage, {
+      type: "contact",
+      title: "No Contacts Found"
+    });
+  }
+}
+if (false) {
+  EmptyPage__contact.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/EmptyPage/docs/EmptyPage__default.docs.js

@@ -0,0 +1,15 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+
+/*** Components ***/
+import EmptyPage from '../EmptyPage';
+export default class EmptyPage__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(EmptyPage, null);
+  }
+}
+if (false) {
+  EmptyPage__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/EmptyPage/docs/EmptyPage__product.docs.js

@@ -0,0 +1,18 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+
+/*** Components ***/
+import EmptyPage from '../EmptyPage';
+export default class EmptyPage__product extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(EmptyPage, {
+      type: "product",
+      title: "No Products Found"
+    });
+  }
+}
+if (false) {
+  EmptyPage__product.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/Lookup/Lookup.module.css

@@ -1,12 +1,12 @@
 .container {
-  font-size: var(--zd_font_size16);
   padding-bottom: var(--zd_size10);
+  font-size: var(--zd_font_size16);
 }
 .box {
   position: relative;
+  margin: auto;
   height: 100%;
   width: 100%;
-  margin: auto;
 }
 /* Size */
 .smallSize {

package/es/lookup/Lookup/docs/Lookup__contact.docs.js

@@ -0,0 +1,186 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/*** Components ***/
+import Modal from '@zohodesk/components/lib/Modal/Modal';
+// import ContactLookup from '../../ContactLookup/ContactLookup.js';
+// import ContactLookupController from '../../../moduleForm/lookupController/ContactLookupController/ContactLookupController';
+
+/*** Methods ***/
+import { getFullName } from '../../../utils/General';
+let contacts = {
+  id_1: {
+    firstName: 'Antro Arul ',
+    lastName: 'Xavier',
+    src: null,
+    email: 'antro.j@zohocorp.com',
+    mobile: '9600745911',
+    accountId: '1236',
+    account: {
+      accountName: 'Zoho Desk'
+    },
+    id: 'id_1',
+    secondaryEmail: 'antro.j+1@zohocorp.com',
+    phoneNo: '9600745912'
+  },
+  id_2: {
+    firstName: 'Ujil Axper',
+    email: null,
+    mobile: null,
+    id: 'id_2',
+    secondaryEmail: '',
+    phone: '9600745912'
+  },
+  id_3: {
+    lastName: 'Selva Kumar PL',
+    email: '',
+    mobile: null,
+    accountId: '1235',
+    account: {
+      accountName: 'My Account'
+    },
+    id: 'id_3',
+    secondaryEmail: 'selva.kumar+1@zohocorp.com',
+    phone: '9600745912'
+  },
+  id_4: {
+    firstName: 'Arun Kumar M',
+    email: 'arun.kumar@zohocorp.com',
+    mobile: '9089765342',
+    accountId: '1234',
+    account: {
+      accountName: 'Zoho CRM'
+    },
+    id: 'id_4',
+    secondaryEmail: '',
+    phone: ''
+  },
+  id_5: {
+    lastName: 'Ravikumar Selvam',
+    email: '',
+    mobile: '8765432910',
+    accountName: {},
+    id: 'id_5',
+    secondaryEmail: '',
+    phone: ''
+  }
+};
+let accounts = {
+  '1234': {
+    accountName: 'Zoho CRM'
+  },
+  '1235': {
+    accountName: 'My Account'
+  },
+  '1236': {
+    accountName: 'Zoho Desk'
+  }
+};
+export default class Lookup__contact extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '',
+      selected: '',
+      searchStr: '',
+      isShowAlert: false
+    };
+    this.handleLookupShow = this.handleLookupShow.bind(this);
+    this.handleLookupHide = this.handleLookupHide.bind(this);
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleSelectStartsWith = this.handleSelectStartsWith.bind(this);
+    this.handleSearchAPI = this.handleSearchAPI.bind(this);
+  }
+  handleLookupShow() {
+    this.setState({
+      isShowAlert: true
+    });
+  }
+  handleLookupHide() {
+    this.setState({
+      isShowAlert: false
+    });
+  }
+  handleSearch(val) {
+    this.setState({
+      value: val,
+      selected: ''
+    });
+  }
+  handleClear() {
+    this.handleSearch('');
+  }
+  handleSelect(id) {
+    let {
+      onSelect
+    } = this.props;
+    onSelect && onSelect(id);
+    let {
+      firstName = '',
+      lastName = ''
+    } = contacts[id];
+    let contactName = getFullName(firstName, lastName);
+    this.setState({
+      selected: contactName,
+      value: ''
+    });
+    this.handleLookupHide();
+  }
+  handleSelectStartsWith(startsWith) {
+    this.setState({
+      selectedStartsWithChar: startsWith
+    });
+  }
+  handleSearchAPI(val) {
+    this.setState({
+      searchStr: val
+    });
+  }
+  render() {
+    let {
+      value,
+      selected,
+      selectedStartsWithChar,
+      searchStr,
+      isShowAlert
+    } = this.state;
+    let {
+      getLookupTarget
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '90vh'
+      }
+    }, getLookupTarget ? getLookupTarget({
+      onLookupShow: this.handleLookupShow
+    }) : {
+      /* <ContactLookupController
+      value={value || selected}
+      suggestionItems={['id_1', 'id_2', 'id_3', 'id_4', 'id_5']}
+      moduleData={contacts}
+      accounts={accounts}
+      needClearIcon
+      needSearchIcon
+      needSuggestionBox
+      onClear={this.handleClear}
+      onChange={this.handleSearch}
+      onSearch={this.handleLookupShow}
+      onSelect={this.handleSelect}
+      searchStr={searchStr}
+      onSearchAPI={this.handleSearchAPI}
+      />*/
+    }, /*#__PURE__*/React.createElement(Modal, null));
+  }
+}
+Lookup__contact.propTypes = {
+  getLookupTarget: PropTypes.func,
+  onSelect: PropTypes.func
+};
+if (false) {
+  Lookup__contact.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/Lookup/docs/Lookup__default.docs.js

@@ -0,0 +1,62 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+
+/*** Components ***/
+import Lookup from '../Lookup';
+import ModuleHeader from '../../header/ModuleHeader/ModuleHeader';
+import Section from '../../Section/Section';
+export default class Lookup__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShow: false,
+      searchStr: ''
+    };
+    this.handleLookupShow = this.handleLookupShow.bind(this);
+    this.handleLookupHide = this.handleLookupHide.bind(this);
+    this.handleLookupSearch = this.handleLookupSearch.bind(this);
+  }
+  handleLookupShow() {
+    this.setState({
+      isShow: true
+    });
+  }
+  handleLookupHide() {
+    this.setState({
+      isShow: false
+    });
+  }
+  handleLookupSearch(val) {
+    this.setState({
+      searchStr: val
+    });
+  }
+  render() {
+    let {
+      isShow,
+      searchStr
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '90vh'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      onClick: this.handleLookupShow
+    }, "Open"), /*#__PURE__*/React.createElement(Lookup, {
+      animationStyle: "scale",
+      isActive: isShow
+    }, /*#__PURE__*/React.createElement(ModuleHeader, {
+      title: "Select Contact",
+      needSearch: true,
+      onLookupClose: this.handleLookupHide,
+      onSearchChange: this.handleLookupSearch,
+      searchStr: searchStr,
+      searchPlaceHolder: "Search contact"
+    }), /*#__PURE__*/React.createElement(Section, null)));
+  }
+}
+if (false) {
+  Lookup__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/Section/LookupSection.module.css

@@ -1,8 +1,8 @@
 .section {
   max-height: 80%;
-  min-height: var(--zd_size390);
-  height: auto;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
   background-color: var(--zdt_lookupsection_bg);
+  min-height: var(--zd_size390);
+  height: auto;
   box-shadow: 0px 4px 20px var(--zdt_lookupsection_box_shadow);
 }

package/es/lookup/header/Close/LookupClose.module.css

@@ -1,15 +1,15 @@
 .container {
+  text-align: center;
   width: var(--zd_size25);
   height: var(--zd_size25);
   line-height: var(--zd_size25);
+  cursor: pointer;
+  border-radius: 50%;
   color: var(--zdt_lookupclose_default_text);
   transition: var(--zd_transition2) cubic-bezier(0.4, 1, 0.65, 1);
   font-size: var(--zd_font_size9);
-  text-align: center;
-  cursor: pointer;
-  border-radius: 50%;
 }
 .container:hover {
-  color: var(--zdt_lookupclose_default_hover_text);
   background-color: var(--zdt_lookupclose_default_hover_bg);
+  color: var(--zdt_lookupclose_default_hover_text);
 }

package/es/lookup/header/Close/docs/Close__default.docs.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Close from '../Close';
+export default class Close__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(Close, null);
+  }
+}
+if (false) {
+  Close__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/header/ModuleHeader/docs/ModuleHeader__default.docs.js

@@ -0,0 +1,47 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+
+/*** Components ***/
+import ModuleHeader from '../ModuleHeader';
+export default class ModuleHeader__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchStr: ''
+    };
+    this.handleSearch = this.handleSearch.bind(this);
+  }
+  handleSearch(value) {
+    this.setState({
+      searchStr: value
+    });
+  }
+  render() {
+    let {
+      searchStr
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ModuleHeader, {
+      title: "Find Duplicate",
+      needSearch: true,
+      searchStr: searchStr,
+      onSearchChange: this.handleSearch,
+      searchPlaceHolder: "Search",
+      miniDescription: "Select a field to search for duplicate records",
+      onLookupClose: () => {}
+    }), /*#__PURE__*/React.createElement(ModuleHeader, {
+      title: "Find Duplicate",
+      needSearch: true,
+      searchStr: searchStr,
+      onSearchChange: this.handleSearch,
+      searchPlaceHolder: "Search",
+      miniDescription: "Select a field to search for duplicate records",
+      onLookupClose: () => {},
+      palette: "white"
+    }));
+  }
+}
+if (false) {
+  ModuleHeader__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/header/Search/LookupSearch.module.css

@@ -3,16 +3,16 @@
   transition: var(--zd_transition1);
   width: var(--zd_size96);
   height: var(--zd_size28);
-  position: relative;
-}.searchStyle, .boxStyle {
   background: none;
+  position: relative;
 }
 .boxStyle {
   width: var(--zd_size160);
   border-radius: 4px;
   border: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-.searchStyle:hover, .boxStyle:hover {
+.searchStyle:hover,
+.boxStyle:hover {
   border-color: var(--zdt_lookupsearch_boxstyle_hover_border);
 }
 .focusWidth {
@@ -20,38 +20,29 @@
 }
 .drpSearchBox {
   position: relative;
-  height: var(--zd_size28);
   cursor: pointer;
+  height: var(--zd_size28);
 }
 .drpSearchBox::after {
   content: '';
+  right: calc(var(--zd_size1) * -1);
   position: absolute;
   top: var(--zd_size8);
   bottom: var(--zd_size8);
-}
-[dir=ltr] .drpSearchBox::after {
-  right: calc(var(--zd_size1) * -1);
   border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-[dir=rtl] .drpSearchBox::after {
-  left: calc(var(--zd_size1) * -1);
-  border-left: 1px solid var(--zdt_lookupsearch_boxstyle_border);
-}
-.inputBox, .drpSearchBox {
+.inputBox,
+.drpSearchBox {
   padding: 0 var(--zd_size9);
 }
-[dir=ltr] .searchIconBox {
+.searchIconBox {
   padding: var(--zd_size4) 0 var(--zd_size4) var(--zd_size9);
 }
-[dir=rtl] .searchIconBox {
-  padding: var(--zd_size4) var(--zd_size9) var(--zd_size4) 0;
-}
-.active, .boxStyle.active, .lineActive.drpSearchBox::after {
+.active,
+.boxStyle.active,
+.lineActive.drpSearchBox::after {
   border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
 }
-[dir=ltr] .iconArrow {
+.iconArrow {
   margin-left: var(--zd_size5);
 }
-[dir=rtl] .iconArrow {
-  margin-right: var(--zd_size5);
-}

package/es/lookup/header/Search/docs/Search__default.docs.js

@@ -0,0 +1,119 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+import { Container } from '@zohodesk/components/lib/Layout';
+
+/*** Components ***/
+import Search from '../Search';
+export default class Search__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchStr: '',
+      value: 'All Fields',
+      selectedId: '1'
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.onSelect = this.onSelect.bind(this);
+  }
+  handleChange(value) {
+    this.setState({
+      searchStr: value
+    });
+  }
+  onSelect(element, e) {
+    this.setState({
+      value: e.value,
+      selectedId: e.id
+    });
+  }
+  render() {
+    const {
+      searchStr,
+      value,
+      selectedId
+    } = this.state;
+    const Obj = [{
+      value: 'All Fields',
+      id: '1'
+    }, {
+      needDivider: true
+    }, {
+      value: 'Conatct Name, Email, Phone',
+      id: '2'
+    }, {
+      value: 'Account',
+      id: '3'
+    }, {
+      value: 'Customer Place',
+      id: '4'
+    }, {
+      value: 'Conatct ID',
+      id: '5'
+    }];
+    const style = {
+        width: '280px',
+        margin: '20px'
+      },
+      boxStyle = {
+        border: '1px solid #e3e6eb',
+        padding: '15px 20px 25px',
+        marginBottom: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        paddingBottom: '25px',
+        textTransform: 'upperCase'
+      };
+    return /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Default"), /*#__PURE__*/React.createElement(Search, {
+      placeHolder: "Search",
+      onChange: this.handleChange,
+      onSearch: e => {
+        console.log(e);
+      },
+      searchStr: searchStr
+    })), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Search With Options"), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(Search, {
+      placeHolder: "Search",
+      onChange: this.handleChange,
+      onSearch: e => {
+        console.log(e);
+      },
+      searchStr: searchStr,
+      isBoxed: true,
+      options: Obj,
+      value: value,
+      selectedId: selectedId,
+      title: value,
+      onSelect: this.onSelect
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Search Icon With Box"), /*#__PURE__*/React.createElement(Search, {
+      placeHolder: "Search",
+      onChange: this.handleChange,
+      onSearch: e => {
+        console.log(e);
+      },
+      searchStr: searchStr,
+      isBoxed: true,
+      isSearchIconNeed: true
+    })));
+  }
+}
+if (false) {
+  Search__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/header/TicketHeader/TicketHeader.module.css

@@ -2,15 +2,12 @@
   margin: 0 var(--zd_size20);
 }
 /* Responsive */
-[dir=ltr] .small .searchContainer {
+.small .searchContainer {
   text-align: left;
 }
-[dir=rtl] .small .searchContainer {
-  text-align: right;
-}
 .small .searchContainer input {
-  width: var(--zd_size193);
   border-bottom: 1px solid var(--zdt_lookupticketheader_border);
+  width: var(--zd_size193);
 }
 .small .innerContainer,
 .extraSmall .innerContainer {

package/es/lookup/header/TicketHeader/docs/TicketHeader__default.docs.js

@@ -0,0 +1,78 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+
+/*** Componets ***/
+import TicketHeader from '../TicketHeader';
+export default class TicketHeader__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchStr: '',
+      selectedViewId: '1'
+    };
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleSelectView = this.handleSelectView.bind(this);
+  }
+  handleSearch(value) {
+    this.setState({
+      searchStr: value
+    });
+  }
+  handleSelectView(value) {
+    this.setState({
+      selectedViewId: value
+    });
+  }
+  render() {
+    let {
+      searchStr,
+      selectedViewId
+    } = this.state;
+    let allViews = [{
+      displayLabel: 'All Tickets',
+      id: '1'
+    }, {
+      displayLabel: 'Tickets for review',
+      id: '2'
+    }, {
+      displayLabel: 'Customer Responded Tickets',
+      id: '3'
+    }, {
+      displayLabel: 'Unassigned Open Tickets',
+      id: '4'
+    }, {
+      displayLabel: 'Spam Tickets',
+      id: '5'
+    }, {
+      displayLabel: 'SLA Violated Tickets',
+      id: '6'
+    }, {
+      displayLabel: 'Overdue Tickets',
+      id: '7'
+    }, {
+      displayLabel: 'My Tickets',
+      id: '8'
+    }, {
+      displayLabel: 'My Open Tickets',
+      id: '9'
+    }, {
+      displayLabel: 'My Overdue Tickets',
+      id: '10'
+    }];
+    return /*#__PURE__*/React.createElement(TicketHeader, {
+      title: "Select Ticket",
+      needSearch: true,
+      searchStr: searchStr,
+      onSearchChange: this.handleSearch,
+      searchPlaceHolder: "Search",
+      selectedViewId: selectedViewId,
+      onSelectView: this.handleSelectView,
+      allViews: allViews
+    });
+  }
+}
+if (false) {
+  TicketHeader__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}