@pega/dx-component-builder-sdk 8.23.16 → 8.23.17

package/tests/assets/components/SDK-Angular/createAll/custom-constellation/field/Pega_DXIL_MyDate/index.jsx

@@ -0,0 +1,256 @@
+/* eslint-disable no-undef */
+import { useEffect, useState } from 'react';
+import { DateInput, FieldValueList, DateTimeDisplay, Text,  } from '@pega/cosmos-react-core';
+import PropTypes from 'prop-types';
+import FormattedText from "./FormattedText.jsx";
+
+import StyledPegaDxilMyDateWrapper from './styles';
+
+// includes in bundle
+import {
+  datetimedisplayformatter,
+  formatExists,
+  getFullYear,
+  getMaxDate,
+  getMinDate,
+  datetimeFireChangeBlurEvents,
+  getDateFormat
+} from "./date.js";
+import { suggestionsHandler } from './suggestions-handler';
+
+// Duplicated runtime code from Constellation Design System Component
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+const PegaDxilMyDate = props => {
+  const {
+    getPConnect,
+    value,
+    validatemessage,
+    label,
+    hideLabel,
+    helperText,
+    nextYearRange,
+    previousYearRange,
+    showWeekNumber,
+    testId,
+    showAsFormattedText,
+    additionalProps,
+    displayMode,
+    variant,
+    hasSuggestions
+   } = props;
+
+  let {formatter} = props;
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = pConn?.getStateProps()?.value;
+
+ let { readOnly, required, disabled } = props;
+  [readOnly, required, disabled] = [readOnly, required, disabled].map(
+    (prop) => prop === true || (typeof prop === "string" && prop === "true")
+  );
+
+  const [status, setStatus] = useState(hasSuggestions ? 'pending' : '');
+
+  useEffect(() => {
+    if (validatemessage !== '') {
+      setStatus('error');
+    }
+    if (hasSuggestions) {
+      setStatus('pending');
+    } else if (!hasSuggestions && status !== 'success') {
+      setStatus(validatemessage !== '' ? 'error' : undefined);
+    }
+  }, [validatemessage, hasSuggestions]);
+
+  // calculate min and max range of calendar
+  const currentYear = getFullYear();
+  const yearFromValue = getFullYear(value);
+  const maxDate = getMaxDate(
+    parseInt(nextYearRange, 10),
+    currentYear,
+    yearFromValue
+  );
+  const minDate = getMinDate(
+    parseInt(previousYearRange, 10),
+    currentYear,
+    yearFromValue
+  );
+
+  const onResolveSuggestionHandler = (accepted) => {
+    suggestionsHandler(accepted, pConn, setStatus);
+  };
+
+
+
+  function handleBlur(onBlurValue) {
+    const { valueAsISOString: date, state: errorState } = onBlurValue;
+    const trimmedDate = date ? date.substring(0, date.indexOf('T')) : date;
+    datetimeFireChangeBlurEvents(errorState, value, trimmedDate, actions, propName, pConn);
+    const isValueChanged = !(value === undefined && trimmedDate === '') && value !== trimmedDate;
+    if (hasSuggestions && isValueChanged) {
+      pConn.ignoreSuggestion();
+    }
+  }
+
+  function handleChange(onChangeValue) {
+    const { valueAsISOString: date } = onChangeValue;
+    const trimmedDate = date ? date.substring(0, date.indexOf('T')) : date;
+    if (hasSuggestions && value !== trimmedDate) {
+      setStatus(undefined);
+    }
+    pConn.clearErrorMessages({
+      property: propName
+    })
+  }
+
+  if (displayMode === 'LABELS_LEFT' || displayMode === 'STACKED_LARGE_VAL' || displayMode === 'DISPLAY_ONLY') {
+    let variantValue = "date";
+     let formatValue = "long";
+     if(pConn && pConn.getConfigProps()){
+      const runtimeformatter = pConn.getConfigProps()?.formatter;
+      if(formatter !== runtimeformatter){
+        formatter = runtimeformatter;
+      }
+    }
+     if(formatter !== "" && formatExists(formatter)){
+      const {variantVal,formatVal} = datetimedisplayformatter(formatter);
+       variantValue = variantVal;
+       formatValue = formatVal;
+    }
+    const displayComp = (
+      <DateTimeDisplay
+      variant={variantValue}
+      format={formatValue}
+        value={value}
+      />
+    );
+    switch(displayMode){
+      case 'DISPLAY_ONLY': {
+        return ( <StyledPegaDxilMyDateWrapper> displayComp </StyledPegaDxilMyDateWrapper>);
+      }
+      case "LABELS_LEFT" : {
+        return (
+          <StyledPegaDxilMyDateWrapper>
+          <FieldValueList
+            variant={hideLabel ? "stacked" : variant}
+            data-testid={testId}
+            fields={[{ id: '1', name: hideLabel ? "" :label, value: displayComp }]}
+          />
+          </StyledPegaDxilMyDateWrapper>
+
+        );
+      }
+      case "STACKED_LARGE_VAL" : {
+        return (
+          <StyledPegaDxilMyDateWrapper>
+          <FieldValueList
+            variant='stacked'
+            data-testid={testId}
+            fields={[{ id: '2', name: hideLabel ? "" :label, value: <Text variant='h1' as='span'>{displayComp}</Text> }]}
+          />
+          </StyledPegaDxilMyDateWrapper>
+
+        );
+      }
+      // no default
+    }
+  }
+
+
+  let dateComponent;
+
+  if (readOnly && showAsFormattedText) {
+    const environmentInfo = PCore.getEnvironmentInfo();
+    const locale = environmentInfo && environmentInfo.getLocale();
+    const textAdditionalProps = {
+      format: getDateFormat(locale),
+      fieldType: 'Date'
+    };
+    dateComponent = (
+      <StyledPegaDxilMyDateWrapper>
+      <FormattedText
+        formatType='date'
+        value={value}
+        label={label}
+        hideLabel={hideLabel}
+        testId={testId}
+        additionalProps={textAdditionalProps}
+        customFormat={getDateFormat(locale)}
+      />
+      </StyledPegaDxilMyDateWrapper>
+    );
+  } else {
+    dateComponent = (
+      <StyledPegaDxilMyDateWrapper>
+      <DateInput
+        {...additionalProps}
+        label={label}
+        labelHidden={hideLabel}
+        info={validatemessage || helperText}
+        status={status}
+        value={value || undefined}
+        disabled={disabled}
+        readOnly={readOnly}
+        required={required}
+        showWeekNumber={showWeekNumber}
+        min={minDate}
+        max={maxDate}
+        data-testid={testId}
+        onFocus={actions.onFocus}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onResolveSuggestion={onResolveSuggestionHandler}
+      />
+      </StyledPegaDxilMyDateWrapper>
+    );
+  }
+  return dateComponent;
+}
+
+
+
+PegaDxilMyDate.defaultProps = {
+  value: undefined,
+  validatemessage: "",
+  helperText: "",
+  hideLabel: false,
+  disabled: false,
+  readOnly: false,
+  required: false,
+  showWeekNumber: false,
+  nextYearRange: "",
+  previousYearRange: "",
+  testId: null,
+  showAsFormattedText: false,
+  additionalProps: {},
+  displayMode: null,
+  variant: "inline",
+  formatter: "defaultDate",
+  hasSuggestions: false
+};
+
+PegaDxilMyDate.propTypes = {
+  value: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  hideLabel: PropTypes.bool,
+  getPConnect: PropTypes.func.isRequired,
+  validatemessage: PropTypes.string,
+  helperText: PropTypes.string,
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  showWeekNumber: PropTypes.bool,
+  nextYearRange: PropTypes.string,
+  previousYearRange: PropTypes.string,
+  testId: PropTypes.string,
+  showAsFormattedText: PropTypes.bool,
+  additionalProps: PropTypes.objectOf(PropTypes.any),
+  displayMode: PropTypes.string,
+  variant: PropTypes.string,
+  formatter: PropTypes.string,
+  hasSuggestions: PropTypes.bool
+};
+
+export default PegaDxilMyDate;

package/tests/assets/components/SDK-Angular/createAll/custom-constellation/field/Pega_DXIL_MyDate/mock.stories.js

@@ -0,0 +1,23 @@
+export const configProps = {
+  value: '2023-01-31T12:23:00.000Z',
+  validatemessage: '',
+  label: 'Date Label',
+  hideLabel: false,
+  helperText: 'Date helper text',
+  nextYearRange: '10',
+  previousYearRange: '10',
+  showWeekNumber: true,
+  testId: '12345678',
+  showAsFormattedText: true,
+  additionalProps: {},
+  displayMode: '',
+  variant: '',
+  hasSuggestions: false,
+  readOnly: false,
+  required: false,
+  disabled: false
+};
+
+export const stateProps = {
+  value: '.DateLabel'
+};

package/tests/assets/components/SDK-Angular/createAll/custom-constellation/field/Pega_DXIL_MyDate/styles.js

@@ -0,0 +1,14 @@
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
+
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/tests/assets/components/SDK-Angular/createAll/custom-constellation/field/Pega_DXIL_MyDate/suggestions-handler.js

@@ -0,0 +1,10 @@
+/* eslint-disable import/prefer-default-export */
+export const suggestionsHandler = (accepted, pConn, setStatus) => {
+  if (accepted) {
+    pConn.acceptSuggestion();
+    setStatus('success');
+  } else {
+    pConn.ignoreSuggestion();
+    setStatus(undefined);
+  }
+};

package/tests/assets/components/SDK-Angular/createAll/custom-constellation/field/Pega_DXIL_MyDateTime/date-time.js

@@ -0,0 +1,92 @@
+import dayjs from "dayjs";
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const types = ["fromNow", "customFormat"];
+
+// value should be in ISO 8601 format.
+function DateFormatter(
+  value,
+  { type = types[1], format = "DD/MM/YYYY", tzone, fieldType } = {}
+) {
+  if (!value) return value;
+  switch (type) {
+    case types[1]:
+      if (tzone && fieldType !== 'Date') return dayjs(value).tz(tzone).format(format); // Date only value should be formatted without timezone
+      return dayjs(value).format(format);
+    case types[0]:
+      return dayjs(value).from(dayjs());
+    default:
+      return value;
+  }
+}
+// value should be in hh:mm:ss format (00:00:00 - 23:59:59).
+function TimeFormatter(value, options) {
+  if (!value) return value;
+  const { locale = "en-US" } = options;
+  const timeOnlyRegex = /^(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)$/;
+  if (value.length === 8 && timeOnlyRegex.test(value)) {
+    const { timeOptions = {} } = options;
+    const tempDate = new Date();
+    const hours = parseInt(value.substr(0, 2), 10);
+    const minutes = parseInt(value.substr(3, 2), 10);
+    const seconds = parseInt(value.substr(6, 2), 10);
+    tempDate.setHours(hours);
+    tempDate.setMinutes(minutes);
+    tempDate.setSeconds(seconds);
+    return tempDate.toLocaleTimeString(locale, timeOptions);
+  }
+  return DateFormatter(value, options);
+}
+
+export const DateTimeShortFormatter = (value, options) => {
+  return DateFormatter(value, {
+    ...options,
+    type: "customFormat",
+    format: "MMM DD, YYYY"
+  });
+}
+
+export default {
+  "DateTime-Long": (value, options) =>
+    DateFormatter(value, { ...options, type: "customFormat", format: "LLL" }),
+  "DateTime-Short": DateTimeShortFormatter,
+  "DateTime-Since": (value) => DateFormatter(value, { type: "fromNow" }),
+  "Time-Only": (value, options) =>
+    TimeFormatter(value, {
+      ...options,
+      type: "customFormat",
+      format: "hh:mm:ss A"
+    }),
+  convertToTimezone: (value, options) => {
+    return value && options && options.timezone
+      ? DateFormatter(value, {
+          ...options,
+          type: "customFormat",
+          format: "YYYY-MM-DDTHH:mm:ss"
+        })
+      : value;
+  },
+  convertFromTimezone: (value, tzone) =>
+  value && tzone
+  ? dayjs.tz(value, tzone).utc().format("YYYY-MM-DDTHH:mm:ss[Z]")
+  : value,
+  Date: (value, options) =>
+    DateFormatter(value, { type: "customFormat", ...options }),
+  "Date-Default": DateTimeShortFormatter,
+  "Date-Time-Default": (value, options) =>
+    DateFormatter(value, { ...options, type: "customFormat", format: "lll" }),
+  "Time-Default": (value, options) =>
+  TimeFormatter(value, {
+    ...options,
+    type: "customFormat",
+    format: "hh:mm A"
+  })
+};

package/tests/assets/components/SDK-Angular/createAll/custom-constellation/field/Pega_DXIL_MyDateTime/date-utils.js

@@ -0,0 +1,288 @@
+/* eslint-disable no-undef */
+import dayjs from "dayjs";
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+/**
+ * Return relative time in fromNow for the given datetime
+ * @description Convert and return the given datetime in dayJSObject
+ *
+ * @param {string} text datetime
+ * @returns {object} datetime as a dayjs object
+ */
+export const getDayJSObject = (text) => {
+  const momObj = dayjs(text);
+  if (momObj.isValid()) return momObj;
+  const timeStamp = text;
+  const isDateTime = timeStamp.indexOf("GMT") !== -1;
+  const year = parseInt(timeStamp.substr(0, 4), 10);
+  const month = parseInt(timeStamp.substr(4, 2), 10) - 1;
+  const day = parseInt(timeStamp.substr(6, 2), 10);
+
+  const CurrentTz = PCore.getLocaleUtils().getTimeZoneInUse();
+
+  let mom = new Date();
+
+  mom.setUTCDate(day);
+  mom.setUTCMonth(month);
+  mom.setUTCFullYear(year);
+
+  /* istanbul ignore else */
+  if (isDateTime) {
+    const hours = parseInt(timeStamp.substr(9, 2), 10);
+    const minutes = parseInt(timeStamp.substr(11, 2), 10);
+    const seconds = parseInt(timeStamp.substr(13, 2), 10);
+    const ms = parseInt(timeStamp.substr(16, 3), 10);
+    mom.setUTCHours(hours);
+    mom.setUTCMinutes(minutes);
+    mom.setUTCSeconds(seconds);
+    mom.setUTCMilliseconds(ms);
+  }
+
+  mom = dayjs(
+    mom.toLocaleString("en-US", {
+      timeZone: CurrentTz
+    })
+  );
+
+  return mom;
+};
+
+/**
+ * Return relative time in fromNow for the given datetime
+ *
+ * @param {string} time datetime
+ * @returns {object} relative time from now
+ */
+export const getRelativeTime = (time) => {
+  let relativetime = "";
+  if (dayjs(time).isUTC()) {
+    relativetime = dayjs(time).fromNow();
+  } else {
+    const dayjstime = getDayJSObject(time);
+    relativetime = dayjs(dayjstime).fromNow();
+  }
+  return relativetime;
+};
+
+/**
+ * Return year for the date passed
+ *
+ * @param {string} value from which Year needs to be taken out
+ * @returns {number} year for the date passed
+ */
+export const getFullYear = (value) =>
+  value ? new Date(value).getFullYear() : new Date().getFullYear();
+
+/**
+ * Return maxDate for the date passed
+ *
+ * @param {number} nextYears next number of years
+ * @param {number} currentYear current year
+ * @param {number} yearFromValue year set on value in redux
+ *
+ * @returns {string} maxDate calculated based on inputs
+ */
+export const getMaxDate = (nextYears, currentYear, yearFromValue) => {
+  if (Number.isNaN(nextYears)) {
+    nextYears = 20;
+  }
+  let maxYear = currentYear + nextYears;
+  if (yearFromValue > maxYear) {
+    maxYear = yearFromValue;
+  }
+  return `${maxYear}-01-01`;
+};
+
+/**
+ * Return minDate for the date passed
+ *
+ * @param {number} previousYears previous number of years
+ * @param {number} currentYear current year
+ * @param {number} yearFromValue year set on value in redux
+ *
+ * @returns {string} minDate calculated based on inputs
+ */
+export const getMinDate = (previousYears, currentYear, yearFromValue) => {
+  if (Number.isNaN(previousYears)) {
+    previousYears = 100;
+  }
+  let minYear = currentYear - previousYears;
+  if (yearFromValue < minYear) {
+    minYear = yearFromValue;
+  }
+  return `${minYear}-12-31`;
+};
+
+/**
+ * Return clockFormat after parsing
+ *
+ * @param {number | string} clockFormat chosen by user
+ *
+ * @returns {number} clockFormat
+ */
+export const parseClockFormat = (clockFormat) =>
+  typeof clockFormat === "string" ? parseInt(clockFormat, 10) : clockFormat;
+
+/**
+ * Return datetime value string off to seconds
+ *
+ * @param {string} datetime in ISO format
+ * @param {boolean} withSeconds to specify if seconds is needed or not
+ *
+ * @returns {string} datetime after stripping of ms and seconds if selected to
+ */
+export const correctDateTimeToSeconds = (datetime, withSeconds) => {
+  if (withSeconds) {
+    return `${datetime.substring(0, datetime.indexOf("Z"))}.000Z`;
+  }
+  return `${datetime.substring(0, datetime.lastIndexOf(":"))}:00.000Z`;
+};
+
+/**
+ * Return time value string off to seconds
+ *
+ * @param {string} datetime in ISO format
+ * @param {boolean} withSeconds to specify if seconds is needed or not
+ *
+ * @returns {string} just time after stripping of ms and seconds if selected to
+ */
+export const timeCorrectedToSeconds = (datetime, withSeconds) => {
+  if (withSeconds) {
+    return datetime.substring(datetime.indexOf("T") + 1, datetime.indexOf("."));
+  }
+  return `${datetime.substring(
+    datetime.indexOf("T") + 1,
+    datetime.lastIndexOf(":")
+  )}:00`;
+};
+
+/**
+ * This function handles the cosmos blur handler of DateTime components
+ *
+ * @param {string | undefined} errorState for the selected datetime value
+ * @param {string} actualValue present in redux
+ * @param {string} formattedValue retrieved by trimming ISO to just Date/Time, also applying timezone if DateTime
+ * @param {object} actions object which has fire and blur callbacks
+ * @param {string} propName name of the property bound
+ * @param {object} pConn component's PConnect object which is useful to invoke validationApi
+ *
+ * @returns {void}
+ */
+export const datetimeFireChangeBlurEvents = (
+  errorState,
+  actualValue,
+  formattedValue,
+  actions,
+  propName,
+  pConn
+) => {
+
+  // TODO - clean up, we should not rely on timestamp from cosmos to check InComplete validation
+  // above triggerFieldChange should have validated this
+  if (errorState) {
+    pConn.getValidationApi().validate(errorState);
+  }
+  // BUG-640834 In errorState presist old values avoiding store update & re-render.
+  else{
+    if (formattedValue !== actualValue) {
+      actions.updateFieldValue(propName, formattedValue);
+    }
+    actions.triggerFieldChange(propName, formattedValue);
+  }
+};
+
+/**
+ * Return Date format for the locale passed
+ *
+ * @param {string} locale locale string
+ * @param {object} options options for format string
+ * @returns {string} dateformat for the locale
+ * Example : getDateFormat("pl-PL") returns "DD.MM.YYYY"
+ */
+export const getDateFormat = (locale, options) => {
+  return new Intl.DateTimeFormat(locale, options)
+    .formatToParts()
+    .map(({ type, value }) => {
+      switch (type) {
+        case "day":
+          return "DD";
+        case "month":
+          return "MM";
+        case "year":
+          return "YYYY";
+        case "hour":
+          return "hh";
+        case "minute":
+          return "mm";
+        case "second":
+          return "ss";
+        case "dayPeriod":
+          return "A";
+        case "literal":
+          return value;
+        default:
+          return "";
+      }
+    })
+    .join("");
+};
+
+/**
+ * Return boolean for the locale passed to specify if locale uses 12 hour format
+ *
+ * @param {string} locale locale string
+ * @returns {boolean} True or False for the locale
+ * Example : getDateFormat("pl-PL") returns false
+ */
+export const is12HClockFormat = (locale) => {
+  const meridiem = new Intl.DateTimeFormat(locale, {
+    hour: "numeric"
+  })
+    .formatToParts()
+    .find(({ type }) => type === "dayPeriod");
+  return !!(meridiem === null || meridiem === undefined
+    ? undefined
+    : meridiem.value);
+};
+
+/**
+ * Return Option object for Time formatting
+ *
+ * @param {boolean} withSeconds true or false depending on seconds to be included
+ * @param {boolean} is12h 12 hour format
+ * @returns {object} options object time formatting
+ * Example : getTimeOptions(false, true) returns {hour: 'numeric',minute: 'numeric',hour12: true}
+ */
+export const getTimeOptions = (withSeconds, is12h = false) => {
+  return {
+    hour: "numeric",
+    minute: "numeric",
+    ...(withSeconds && { second: "numeric" }),
+    hour12: is12h
+  };
+};
+
+/**
+ * Return Option object for Datetime formatting
+ *
+ * @param {boolean} withSeconds true or false depending on seconds to be included
+ * @param {boolean} is12h 12 hour format
+ * @returns {object} options object datetime formatting
+ * Example : getDateTimeOptions(false, true) returns {year: 'numeric',month: 'numeric',day: 'numeric',hour: 'numeric',minute: 'numeric',hour12: true}
+ */
+export const getDateTimeOptions = (withSeconds, is12h = false) => {
+  return {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    ...getTimeOptions(withSeconds, is12h)
+  };
+};