@zohodesk/library-platform 1.1.9-exp.1 → 1.1.10

package/es/library/behaviours/field-validation/frameworks/utils/formValidate.js

@@ -0,0 +1,334 @@
+/** Libraries * */
+// import { i18NProviderUtils } from '@zohodesk/i18n';
+const i18NProviderUtils = {
+  getI18NValue(key, values) {
+    return key;
+  }
+
+};
+/** Methods * */
+
+const formatWebsiteUrl = url => {
+  const whitelistedDomains = ['htt' + 'p://', 'htt' + 'ps://', 'ftp://', 'simplehelp://', 'dynamicsnav://'];
+  const site = url.toLowerCase();
+  const isValidWebsite = whitelistedDomains.some(domain => site.startsWith(domain));
+
+  if (!isValidWebsite) {
+    return `htt${''}p://${url}`;
+  }
+
+  return url;
+};
+
+function getNoneText() {
+  const valueNoneText = '-None-';
+  return {
+    valueNoneText
+  };
+} // let ticketFieldTypes = [
+//   'LookUp String',
+//   'Picklist String',
+//   'Multiselect Array',
+//   'Email String',
+//   'Text String',
+//   'Textarea String',
+//   'Date String',
+//   'DateTime String',
+//   'Boolean boolean',
+//   'URL String',
+//   'Phone phone',
+//   'Number Number',
+//   'Percent String',
+//   'Decimal String',
+//   'Currency String'
+// ];
+
+
+export const validator = {
+  isEmpty(value) {
+    const valueType = typeof value;
+
+    if (valueType === 'string') {
+      return this.isEmptyString(value);
+    }
+
+    if (Array.isArray(value)) {
+      return this.isEmptyArr(value);
+    }
+
+    if (valueType === 'object') {
+      return this.isEmptyObj(value);
+    }
+
+    if (valueType === 'boolean' || value) {
+      return false;
+    }
+
+    return true;
+  },
+
+  isEmptyString(value) {
+    if (value && typeof value === 'string' && value.trim()) {
+      return false;
+    }
+
+    return true;
+  },
+
+  isEmptyArr(value) {
+    if (Array.isArray(value) && value.length > 0) {
+      return false;
+    }
+
+    return true;
+  },
+
+  isEmptyMultiSelect(value) {
+    if (!this.isEmpty(value) && !(value.length <= 2 && value.every(val => this.isNoneValue(val)))) {
+      return false;
+    }
+
+    return true;
+  },
+
+  isEmptyPicklist(value) {
+    if (!this.isEmpty(value) && !this.isNoneValue(value)) {
+      return false;
+    }
+
+    return true;
+  },
+
+  isEmptyObj(value) {
+    for (const key in value) {
+      if (value.hasOwnProperty(key)) {
+        return false;
+      }
+    }
+
+    return true;
+  },
+
+  isValidLength(value, length) {
+    let type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'max';
+    const valueType = typeof value;
+    const inpVal = valueType === 'number' ? value.toString() : value;
+    const valueLength = (inpVal || '').length;
+
+    if (valueType === 'string' || valueType === 'number' || Array.isArray(value)) {
+      if (type === 'max' && valueLength > length) {
+        return true;
+      }
+
+      if (type === 'min' && valueLength < length) {
+        return true;
+      }
+
+      return false;
+    }
+
+    return false;
+  },
+
+  isMaxLength(value, argum) {
+    return this.isValidLength(value, argum, 'max');
+  },
+
+  isMinLength(value, argum) {
+    return this.isValidLength(value, argum, 'min');
+  },
+
+  isValidInteger(value) {
+    const valueType = typeof value;
+    const inpVal = valueType === 'number' ? value.toString() : value;
+
+    if (inpVal) {
+      const re = /(^-?\d\d*$)/;
+
+      if (isNaN(inpVal) || inpVal.indexOf('.') !== -1 || !re.test(inpVal)) {
+        return false;
+      }
+
+      return true;
+    }
+
+    return false;
+  },
+
+  isValidDecimal(value) {
+    const valueType = typeof value;
+    const inpVal = valueType === 'number' ? value.toString() : value;
+    const restr = '^-?[0-9]\\d*(|\\.\\d[0-9]*)$';
+    const re = new RegExp(restr);
+
+    if (re.test(inpVal)) {
+      return true;
+    }
+
+    return false;
+  },
+
+  isValidDecimalPlaces(value, decimalPlaces) {
+    const valueType = typeof value;
+    const inpVal = valueType === 'number' ? value.toString() : value;
+    const restr = `^-?\\d*(|\\.\\d[0-9]{0,${decimalPlaces - 1}})$`;
+    const re = new RegExp(restr);
+
+    if (re.test(inpVal)) {
+      return true;
+    }
+
+    return false;
+  },
+
+  isValidPhone(value) {
+    // old validation
+    const phoneRegEx = /^[0-9a-zA-Z_()\+\-\.\$@\?\,\:\'\/\!\s]+/;
+    const match = value.match(phoneRegEx);
+
+    if (!match || value !== match[0]) {
+      return false;
+    }
+
+    return true; // let valueType = typeof value;
+    // let inpVal = valueType === 'number' ? value.toString() : value;
+    // let re = new RegExp(/^\+?\d+(-\d+)*$/);
+    // if (re.test(inpVal)) {
+    //   return true;
+    // }
+    // return false;
+  },
+
+  isValidEmail(value, isReplyValidation) {
+    const re = isReplyValidation ? /^[\wÀ-ž\+\#]([\wÀ-ž\-\.\+\'\&\/\#\~]*)@([\wÀ-ž\-\.]*)(\.[a-zA-ZÀ-ž]{2,22}(\.[a-zA-ZÀ-ž]{2}){0,2})$/ : /^[\wÀ-ž]([\wÀ-ž\-\.\+\'\&\/]*)@([\wÀ-ž\-\.]*)(\.[a-zA-ZÀ-ž]{2,22}(\.[a-zA-ZÀ-ž]{2}){0,2})$/; // swedish character support
+    // let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+    if (re.test(value)) {
+      return true;
+    }
+
+    return false;
+  },
+
+  isValidWebsite(value) {
+    const newValue = formatWebsiteUrl(value);
+    const re = /^(ht|f)tp(s?):\/\/[-.\w]*(\/?)([a-zA-Z0-9\-\.\?,:'\/\\\+=&amp;%\$#_@]*)?$/;
+
+    if (re.test(newValue)) {
+      return true;
+    }
+
+    return false;
+  },
+
+  isValidDate(dateObj) {
+    if (dateObj || dateObj instanceof Date && dateObj.getFullYear() > 1000) {
+      return true;
+    }
+
+    return false;
+  },
+
+  isReminder(value) {
+    const alerTypes = value.alertTypes || [];
+    return !!alerTypes.length;
+  },
+
+  isNoneValue() {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    const inpVal = value.trim && value.trim();
+    const {
+      valueNoneText: noneText
+    } = getNoneText();
+    const i18nNoneValue = i18NProviderUtils.getI18NValue('-None-');
+
+    if (typeof inpVal === 'string' && (inpVal === noneText || inpVal === i18nNoneValue)) {
+      return true;
+    }
+
+    return false;
+  },
+
+  isValidDuration() {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      hoursSpent,
+      minutesSpent
+    } = value;
+
+    if (hoursSpent < 24 && minutesSpent < 60) {
+      return true;
+    }
+
+    return false;
+  }
+
+};
+export function fieldValidate(value, fieldDetails) {
+  const patternMapping = {
+    LookUp: '',
+    Email: 'isValidEmail',
+    Number: 'isValidInteger',
+    Text: '',
+    // No Check
+    Picklist: '',
+    // No Check
+    Textarea: '',
+    // No Check
+    DateTime: 'isValidDate',
+    // valid date check or valid dateTime check
+    Currency: 'isValidDecimal',
+    // check only decimal & decimal places, server side convert rouding option
+    Decimal: 'isValidDecimal',
+    Percent: 'isValidDecimal',
+    Boolean: '',
+    // No Check
+    Phone: 'isValidPhone',
+    // URL: 'isValidWebsite',// remove for validation
+    Date: 'isValidDate',
+    Radio: '',
+    // No Check
+    Duration: '',
+    // No Check
+    Multiselect: '' // No Check
+
+  };
+  const emptyValidateMapping = {
+    Multiselect: 'isEmptyMultiSelect',
+    Picklist: 'isEmptyPicklist'
+  };
+  const {
+    isMandatory,
+    i18NLabel,
+    type: fieldType,
+    maxLength,
+    decimalPlaces,
+    apiName: fieldName,
+    localizedValue = ''
+  } = fieldDetails;
+  const fieldLabel = localizedValue || i18NLabel;
+  const validationMethod = patternMapping[fieldType];
+  let isError = false;
+  let message = '';
+  const emptyValidationMethod = emptyValidateMapping[fieldType];
+  const isEmptyValue = emptyValidationMethod ? validator[emptyValidationMethod](value) : validator.isEmpty(value);
+
+  if (isMandatory && isEmptyValue || isMandatory && fieldType === 'Boolean' && (value === false || value === 'false')) {
+    isError = true;
+    message = i18NProviderUtils.getI18NValue('crm.field.empty.check', fieldLabel);
+  } else if (maxLength && fieldType !== 'Boolean' && fieldType !== 'DateTime' && fieldType !== 'Date' && validator.isMaxLength(value, maxLength)) {
+    isError = true;
+    message = i18NProviderUtils.getI18NValue('support.form.more.than.max.length', [fieldLabel, maxLength]);
+  } else if (!isEmptyValue && validationMethod && !validator[validationMethod](value)) {
+    isError = true;
+    message = i18NProviderUtils.getI18NValue('crm.field.valid.check', fieldLabel);
+  } else if (!isEmptyValue && (fieldType === 'Currency' || fieldType === 'Decimal') && !validator.isValidDecimalPlaces(value, decimalPlaces)) {
+    isError = true;
+    message = i18NProviderUtils.getI18NValue('support.form.decimal.places.length.error.message', decimalPlaces);
+  }
+
+  return {
+    isError,
+    message
+  };
+}

package/es/library/dot/components/form-fields/checkbox/adapters/presenter/TransformState.js

@@ -0,0 +1,22 @@
+export function TransformState(state) {
+  const {
+    tooltip
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  return { ...state,
+    viewModel: { ...state.properties,
+      actions
+    }
+  };
+}

package/es/library/dot/components/form-fields/currency/adapters/presenter/TransformState.js

@@ -0,0 +1,81 @@
+// import TransFormState from '../../adapters/presenter/TransFormState';
+function isValidInteger() {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  const rejexPattern = new RegExp('^(\\d+\\.?\\d*|\\.\\d+)$');
+  const isValidInt = rejexPattern.test(value);
+  return isValidInt;
+}
+
+function formatCurrency(amount) {
+  let symbol = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let currencyLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'US';
+  const isFormatNeeded = typeof amount === 'string' && amount.match(/(e|E)/) != null;
+  let number = isFormatNeeded ? Number(amount) : amount;
+  const isValidInt = isValidInteger(number);
+
+  if (isValidInt && symbol) {
+    number = number.toString();
+    const currencyArr = new Intl.NumberFormat(`en-${currencyLocale}`).formatToParts(number);
+    let currencyVal = '';
+    currencyArr.map(val => {
+      if (val.type == 'group') {
+        currencyVal += ',';
+      } else if (val.type == 'integer') {
+        currencyVal += val.value;
+      }
+    });
+
+    if (number.indexOf('.') != -1) {
+      const fractionVal = number.split(".")[1];
+
+      for (let i = fractionVal.length - 1; i >= 0; i--) {
+        if (fractionVal[i] != 0) {
+          currencyVal += `.${fractionVal.slice(0, i + 1)}`;
+          break;
+        }
+      }
+    }
+
+    return `${symbol}${currencyVal}`;
+  }
+
+  return number || amount;
+}
+
+export function TransformState(state) {
+  const {
+    ePHI,
+    tooltip,
+    value,
+    currencySymbol,
+    currencyLocale
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  if (ePHI) {
+    actions.push({
+      type: 'EPHITag',
+      properties: {},
+      eventMappings: []
+    });
+  }
+
+  const formattedValue = formatCurrency(value, currencySymbol, currencyLocale);
+  return { ...state,
+    formattedValue,
+    properties: { ...state.properties,
+      actions,
+      value
+    }
+  };
+}

package/es/library/dot/components/form-fields/date/adapters/presenter/TransformState.js

@@ -0,0 +1,22 @@
+export function TransformState(state) {
+  const {
+    tooltip
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  return { ...state,
+    viewModel: { ...state.properties,
+      actions
+    }
+  };
+}

package/es/library/dot/components/form-fields/datetime/adapters/presenter/TransformState.js

@@ -0,0 +1,22 @@
+export function TransformState(state) {
+  const {
+    tooltip
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  return { ...state,
+    viewModel: { ...state.properties,
+      actions
+    }
+  };
+}

package/es/library/dot/components/form-fields/decimal/adapters/presenter/TransformState.js

@@ -0,0 +1,31 @@
+export function TransformState(state) {
+  const {
+    ePHI,
+    tooltip
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  if (ePHI) {
+    actions.push({
+      type: 'EPHITag',
+      properties: {},
+      eventMappings: []
+    });
+  }
+
+  return { ...state,
+    viewModel: { ...state.properties,
+      actions
+    }
+  };
+}

package/es/library/dot/components/form-fields/email/adapters/presenter/TransformState.js

@@ -0,0 +1,23 @@
+// import TransFormState from '../../adapters/presenter/TransFormState';
+export function TransformState(state) {
+  const {
+    tooltip
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  return { ...state,
+    properties: { ...state.properties,
+      actions
+    }
+  };
+}

package/es/library/dot/components/form-fields/ephi-tag/frameworks/ui/EPHITag.js

@@ -0,0 +1,10 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import EPHITagView from "./EPHITagView";
+const EPHITag = createCustomComponent({
+  name: 'EPHITag',
+  View: EPHITagView,
+  properties: {},
+  eventHandlers: {},
+  behaviours: []
+});
+export default EPHITag;

package/es/library/dot/components/form-fields/ephi-tag/frameworks/ui/EPHITagView.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Tag from '@zohodesk-private/desk-components/es/table/StatusBox/StatusBox'; // @ts-ignore
+
+import style from "./css/EPHITag.module.css";
+
+function EPHITagView(_, ref) {
+  const ephiTooltip = 'ePHI is individually identifiable protected health information sent or stored electronically.';
+  return /*#__PURE__*/React.createElement(Tag, {
+    $customProps_container: {
+      ref
+    },
+    customStyle: {
+      container: style.tag
+    },
+    $ui_color: "green",
+    $i18n_text: 'ePHI',
+    $i18n_tooltip: ephiTooltip
+  });
+}
+
+export default EPHITagView;

package/es/library/dot/components/form-fields/ephi-tag/frameworks/ui/css/EPHITag.module.css

@@ -0,0 +1,3 @@
+.tag {
+    cursor: default
+}

package/es/library/dot/components/form-fields/info-icon/frameworks/ui/InfoIcon.js

@@ -0,0 +1,10 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import InfoIconProperties from "../../../../../../../cc/info-icon/Properties";
+import InfoIconView from "./InfoIconView";
+const InfoIcon = createCustomComponent({
+  name: 'InfoIcon',
+  View: InfoIconView,
+  properties: InfoIconProperties,
+  eventHandlers: {}
+});
+export default InfoIcon;

package/es/library/dot/components/form-fields/info-icon/frameworks/ui/InfoIconView.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import ActionIcon from '@zohodesk-private/desk-components/es/ActionIcon/ActionIcon'; // @ts-ignore
+
+import style from "./css/InfoIcon.module.css";
+export default function InfoIconView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    tooltip
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(ActionIcon, {
+    ref: ref,
+    $ui_iconName: "ZD-GN-info",
+    $ui_hoverVariant: "default",
+    $i18n_tooltip: tooltip,
+    customStyle: {
+      icon: style.icon
+    }
+  });
+}

package/es/library/dot/components/form-fields/info-icon/frameworks/ui/css/InfoIcon.module.css

@@ -0,0 +1,3 @@
+.icon {
+    padding: 0 
+}

package/es/library/dot/components/form-fields/multi-select/adapters/presenter/TransformState.js

@@ -0,0 +1,31 @@
+export function TransformState(state) {
+  const {
+    tooltip,
+    ePHI
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  if (ePHI) {
+    actions.push({
+      type: 'EPHITag',
+      properties: {},
+      eventMappings: []
+    });
+  }
+
+  return { ...state,
+    properties: { ...state.properties,
+      actions
+    }
+  };
+}

package/es/library/dot/components/form-fields/number/adapters/presenter/TransformState.js

@@ -0,0 +1,31 @@
+export function TransformState(state) {
+  const {
+    ePHI,
+    tooltip
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  if (ePHI) {
+    actions.push({
+      type: 'EPHITag',
+      properties: {},
+      eventMappings: []
+    });
+  }
+
+  return { ...state,
+    viewModel: { ...state.properties,
+      actions
+    }
+  };
+}