@bigbinary/neeto-molecules 5.1.19 → 5.1.21

package/dist/v2/Insights.js

@@ -0,0 +1,342 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { Typography, Tooltip, Spinner } from '@bigbinary/neeto-atoms';
+import classnames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { t } from 'i18next';
+import { memo, createElement } from 'react';
+import { sum, values, pluck } from 'ramda';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { existsBy, hyphenate } from '@bigbinary/neeto-cist';
+import HelpPopover from './HelpPopover.js';
+import DateRangeFilter from './DateRangeFilter.js';
+import { T as TriangleAlert } from '../triangle-alert-Pkh6pc42.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '../circle-question-mark-Dib48f5Z.js';
+import '../createLucideIcon-mNMhCCpf.js';
+import '@babel/runtime/helpers/slicedToArray';
+import '@bigbinary/neeto-commons-frontend/v2/initializers';
+import '@bigbinary/neeto-commons-frontend/v2/utils';
+
+var DEFAULT_DEVICES = [{
+  label: t("neetoMolecules.insights.labels.devices.desktop"),
+  value: "desktop"
+}, {
+  label: t("neetoMolecules.insights.labels.devices.mobile"),
+  value: "smartphone"
+}];
+var DEFAULT_OS = [{
+  label: t("neetoMolecules.insights.labels.os.macos"),
+  value: "mac"
+}, {
+  label: t("neetoMolecules.insights.labels.os.windows"),
+  value: "windows"
+}];
+var DEFAULT_BROWSERS = [{
+  label: t("neetoMolecules.insights.labels.browsers.chrome"),
+  value: "chrome"
+}, {
+  label: t("neetoMolecules.insights.labels.browsers.safari"),
+  value: "safari"
+}];
+({
+  label: t("neetoMolecules.insights.labels.allTime")});
+
+var PercentageBar = function PercentageBar(_ref) {
+  var value = _ref.value;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [value !== 0 && /*#__PURE__*/jsx("div", {
+      className: "bg-muted-foreground/30 h-2 rounded-full",
+      style: {
+        width: "".concat(value, "%")
+      }
+    }), /*#__PURE__*/jsx(Typography, {
+      variant: "body3",
+      children: value ? "".concat(value, "%") : 0
+    })]
+  });
+};
+var PercentageBar$1 = /*#__PURE__*/memo(PercentageBar);
+
+var MetaInfoItem = function MetaInfoItem(_ref) {
+  var name = _ref.name,
+    value = _ref.value;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Typography, {
+      className: "capitalize",
+      variant: "body2",
+      children: name
+    }), /*#__PURE__*/jsx("div", {
+      className: "col-span-3 flex items-center gap-2",
+      children: /*#__PURE__*/jsx(PercentageBar$1, {
+        value: value
+      })
+    })]
+  });
+};
+var MetaInfoItem$1 = /*#__PURE__*/memo(MetaInfoItem);
+
+var DataDistribution = function DataDistribution(_ref) {
+  var data = _ref.data;
+  return /*#__PURE__*/jsx("div", {
+    className: "grid grid-cols-4 gap-2",
+    children: data.map(function (_ref2) {
+      var name = _ref2.name,
+        value = _ref2.value;
+      return /*#__PURE__*/createElement(MetaInfoItem$1, {
+        name: name,
+        value: value,
+        key: name
+      });
+    })
+  });
+};
+
+var getSum = function getSum(data, searchKey) {
+  var sum = 0;
+  for (var key in data) {
+    if (key.includes(searchKey)) sum += data[key];
+  }
+  return sum;
+};
+var transformInsights = function transformInsights(data, defaultItems) {
+  var othersData = Object.keys(data).filter(function (key) {
+    return !existsBy({
+      value: key
+    }, defaultItems);
+  }).map(function (key) {
+    return {
+      name: key,
+      value: data[key]
+    };
+  });
+  var defaultData = defaultItems.map(function (_ref) {
+    var label = _ref.label,
+      value = _ref.value;
+    return {
+      name: label,
+      value: getSum(data, value) || 0
+    };
+  });
+  return {
+    defaultData: defaultData,
+    othersData: othersData
+  };
+};
+
+var MetaInfo = function MetaInfo(_ref) {
+  var type = _ref.type,
+    data = _ref.data,
+    defaultItems = _ref.defaultItems;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _transformInsights = transformInsights(data, defaultItems),
+    defaultData = _transformInsights.defaultData,
+    othersData = _transformInsights.othersData;
+  var othersSum = sum(values(pluck("value", othersData)));
+  return /*#__PURE__*/jsxs("div", {
+    className: "bg-muted rounded p-4",
+    children: [/*#__PURE__*/jsx(Typography, {
+      className: "mb-2 uppercase",
+      variant: "body2",
+      weight: "bold",
+      children: type
+    }), /*#__PURE__*/jsx(DataDistribution, {
+      data: defaultData
+    }), /*#__PURE__*/jsx(Tooltip, {
+      content: /*#__PURE__*/jsx(DataDistribution, {
+        data: othersData
+      }),
+      disabled: !othersSum,
+      position: "bottom",
+      children: /*#__PURE__*/jsx("div", {
+        className: "mt-2 grid grid-cols-4 gap-2",
+        children: /*#__PURE__*/jsx(MetaInfoItem$1, {
+          name: t("neetoMolecules.insights.others"),
+          value: othersSum
+        })
+      })
+    })]
+  });
+};
+var MetaInfo$1 = /*#__PURE__*/memo(MetaInfo);
+
+var TimeItem = function TimeItem(_ref) {
+  var value = _ref.value,
+    suffix = _ref.suffix;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex items-end",
+    "data-testid": "time-item",
+    children: [/*#__PURE__*/jsx(Typography, {
+      className: "me-1",
+      variant: "h1",
+      weight: "semibold",
+      children: value
+    }), /*#__PURE__*/jsx(Typography, {
+      className: "leading-loose",
+      variant: "body2",
+      children: suffix
+    })]
+  });
+};
+var TimeItem$1 = /*#__PURE__*/memo(TimeItem);
+
+var MetricItem = function MetricItem(_ref) {
+  var metric = _ref.metric,
+    value = _ref.value,
+    helpText = _ref.helpText,
+    isTime = _ref.isTime,
+    isPercentage = _ref.isPercentage;
+  var renderTime = function renderTime(value) {
+    var hours = value.h,
+      minutes = value.m,
+      seconds = value.s;
+    var showSeconds = !hours && !minutes;
+    return /*#__PURE__*/jsxs("div", {
+      className: "flex gap-2",
+      children: [!!hours && /*#__PURE__*/jsx(TimeItem$1, {
+        suffix: "H",
+        value: hours
+      }), !!minutes && /*#__PURE__*/jsx(TimeItem$1, {
+        suffix: "M",
+        value: minutes
+      }), (!!seconds || showSeconds) && /*#__PURE__*/jsx(TimeItem$1, {
+        suffix: "S",
+        value: seconds
+      })]
+    });
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "nf-insights__metric-item border-border border-b pb-4",
+    "data-testid": "".concat(hyphenate(metric), "-metric"),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex items-center gap-2",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "flex items-end gap-x-1",
+        children: isTime ? renderTime(value) : /*#__PURE__*/jsxs(Typography, {
+          className: "text-foreground",
+          "data-testid": "insights-count",
+          variant: "h1",
+          weight: "semibold",
+          children: [value || 0, isPercentage ? "%" : ""]
+        })
+      }), helpText && /*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsx(HelpPopover, {
+          description: helpText
+        })
+      })]
+    }), /*#__PURE__*/jsx(Typography, {
+      className: "text-muted-foreground",
+      "data-testid": "insights-type",
+      variant: "body3",
+      children: metric
+    })]
+  });
+};
+var MetricItem$1 = /*#__PURE__*/memo(MetricItem);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Insights = function Insights(_ref) {
+  var insightsData = _ref.insightsData,
+    isLoading = _ref.isLoading,
+    timePeriod = _ref.timePeriod,
+    setTimePeriod = _ref.setTimePeriod,
+    _ref$helpTexts = _ref.helpTexts,
+    helpTexts = _ref$helpTexts === void 0 ? {} : _ref$helpTexts,
+    _ref$showWarningMessa = _ref.showWarningMessage,
+    showWarningMessage = _ref$showWarningMessa === void 0 ? false : _ref$showWarningMessa,
+    className = _ref.className,
+    title = _ref.title,
+    _ref$tooltipProps = _ref.tooltipProps,
+    tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var visitCount = insightsData.visitCount,
+    startCount = insightsData.startCount,
+    submissionCount = insightsData.submissionCount,
+    completionRate = insightsData.completionRate,
+    averageSubmissionTime = insightsData.averageSubmissionTime,
+    devices = insightsData.devices,
+    operatingSystems = insightsData.operatingSystems,
+    browsers = insightsData.browsers;
+  if (isLoading) {
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames("mx-auto pt-10", className),
+    "data-testid": "insights",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "mb-10 flex w-full items-center",
+      children: [/*#__PURE__*/jsx(Typography, {
+        "data-testid": "submissions-insights-title",
+        variant: "h2",
+        children: title || t("neetoMolecules.insights.title")
+      }), showWarningMessage && /*#__PURE__*/jsx(Tooltip, _objectSpread(_objectSpread({
+        content: t("neetoMolecules.insights.dataInaccuracyWarning"),
+        position: "bottom"
+      }, tooltipProps), {}, {
+        children: /*#__PURE__*/jsx("span", {
+          className: "ms-3",
+          children: /*#__PURE__*/jsx(TriangleAlert, {
+            className: "text-warning",
+            "data-testid": "insights-warning",
+            size: 20
+          })
+        })
+      })), /*#__PURE__*/jsx("span", {
+        className: "ms-auto",
+        children: /*#__PURE__*/jsx(DateRangeFilter, {
+          setTimePeriod: setTimePeriod,
+          timePeriod: timePeriod
+        })
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "mb-6 grid grid-cols-1 gap-x-9 gap-y-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 lg:gap-0",
+      children: [/*#__PURE__*/jsx(MetricItem$1, {
+        helpText: helpTexts["visitCount"],
+        metric: t("neetoMolecules.insights.metrics.visits"),
+        value: visitCount
+      }), /*#__PURE__*/jsx(MetricItem$1, {
+        helpText: helpTexts["startCount"],
+        metric: t("neetoMolecules.insights.metrics.starts"),
+        value: startCount
+      }), /*#__PURE__*/jsx(MetricItem$1, {
+        helpText: helpTexts["submissions"],
+        metric: t("neetoMolecules.insights.metrics.submissions"),
+        value: submissionCount
+      }), /*#__PURE__*/jsx(MetricItem$1, {
+        isPercentage: true,
+        helpText: helpTexts["completionRate"],
+        metric: t("neetoMolecules.insights.metrics.completionRate"),
+        value: completionRate
+      }), /*#__PURE__*/jsx(MetricItem$1, {
+        isTime: true,
+        helpText: helpTexts["averageSubmissionTime"],
+        metric: t("neetoMolecules.insights.metrics.avgTimeToComplete"),
+        timeSuffix: t("neetoMolecules.insights.mins"),
+        value: averageSubmissionTime
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3",
+      children: [/*#__PURE__*/jsx(MetaInfo$1, {
+        data: devices,
+        defaultItems: DEFAULT_DEVICES,
+        type: t("neetoMolecules.insights.devices")
+      }), /*#__PURE__*/jsx(MetaInfo$1, {
+        data: operatingSystems,
+        defaultItems: DEFAULT_OS,
+        type: t("neetoMolecules.insights.os")
+      }), /*#__PURE__*/jsx(MetaInfo$1, {
+        data: browsers,
+        defaultItems: DEFAULT_BROWSERS,
+        type: t("neetoMolecules.insights.browsers")
+      })]
+    })]
+  });
+};
+
+export { Insights as default };
+//# sourceMappingURL=Insights.js.map

package/dist/v2/Insights.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Insights.js","sources":["../../src/v2/components/Insights/constants.js","../../src/v2/components/Insights/MetaInfo/PercentageBar.jsx","../../src/v2/components/Insights/MetaInfo/MetaInfoItem.jsx","../../src/v2/components/Insights/MetaInfo/DataDistribution.jsx","../../src/v2/components/Insights/utils.js","../../src/v2/components/Insights/MetaInfo/index.jsx","../../src/v2/components/Insights/TimeItem.jsx","../../src/v2/components/Insights/MetricItem.jsx","../../src/v2/components/Insights/index.jsx"],"sourcesContent":["import { t } from \"i18next\";\n\nexport const DEFAULT_DEVICES = [\n  {\n    label: t(\"neetoMolecules.insights.labels.devices.desktop\"),\n    value: \"desktop\",\n  },\n  {\n    label: t(\"neetoMolecules.insights.labels.devices.mobile\"),\n    value: \"smartphone\",\n  },\n];\n\nexport const DEFAULT_OS = [\n  { label: t(\"neetoMolecules.insights.labels.os.macos\"), value: \"mac\" },\n  {\n    label: t(\"neetoMolecules.insights.labels.os.windows\"),\n    value: \"windows\",\n  },\n];\n\nexport const DEFAULT_BROWSERS = [\n  {\n    label: t(\"neetoMolecules.insights.labels.browsers.chrome\"),\n    value: \"chrome\",\n  },\n  {\n    label: t(\"neetoMolecules.insights.labels.browsers.safari\"),\n    value: \"safari\",\n  },\n];\n\nexport const INITIAL_TIME_PERIOD_VALUE = {\n  label: t(\"neetoMolecules.insights.labels.allTime\"),\n  value: { startDate: null, endDate: null, rangeType: \"all\" },\n};\n","import { memo } from \"react\";\n\nimport { Typography } from \"@bigbinary/neeto-atoms\";\n\nconst PercentageBar = ({ value }) => (\n  <>\n    {value !== 0 && (\n      <div\n        className=\"bg-muted-foreground/30 h-2 rounded-full\"\n        style={{ width: `${value}%` }}\n      />\n    )}\n    <Typography variant=\"body3\">{value ? `${value}%` : 0}</Typography>\n  </>\n);\n\nexport default memo(PercentageBar);\n","import { memo } from \"react\";\n\nimport { Typography } from \"@bigbinary/neeto-atoms\";\n\nimport PercentageBar from \"./PercentageBar\";\n\nconst MetaInfoItem = ({ name, value }) => (\n  <>\n    <Typography className=\"capitalize\" variant=\"body2\">\n      {name}\n    </Typography>\n    <div className=\"col-span-3 flex items-center gap-2\">\n      <PercentageBar {...{ value }} />\n    </div>\n  </>\n);\n\nexport default memo(MetaInfoItem);\n","import MetaInfoItem from \"./MetaInfoItem\";\n\nconst DataDistribution = ({ data }) => (\n  <div className=\"grid grid-cols-4 gap-2\">\n    {data.map(({ name, value }) => (\n      <MetaInfoItem {...{ name, value }} key={name} />\n    ))}\n  </div>\n);\n\nexport default DataDistribution;\n","import { existsBy } from \"neetocist\";\n\nconst getSum = (data, searchKey) => {\n  let sum = 0;\n  for (const key in data) {\n    if (key.includes(searchKey)) sum += data[key];\n  }\n\n  return sum;\n};\n\nexport const transformInsights = (data, defaultItems) => {\n  const othersData = Object.keys(data)\n    .filter(key => !existsBy({ value: key }, defaultItems))\n    .map(key => ({ name: key, value: data[key] }));\n\n  const defaultData = defaultItems.map(({ label, value }) => ({\n    name: label,\n    value: getSum(data, value) || 0,\n  }));\n\n  return { defaultData, othersData };\n};\n","import { memo } from \"react\";\n\nimport { Tooltip, Typography } from \"@bigbinary/neeto-atoms\";\nimport { pluck, sum, values } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport DataDistribution from \"./DataDistribution\";\nimport MetaInfoItem from \"./MetaInfoItem\";\n\nimport { transformInsights } from \"../utils\";\n\nconst MetaInfo = ({ type, data, defaultItems }) => {\n  const { t } = useTranslation();\n  const { defaultData, othersData } = transformInsights(data, defaultItems);\n\n  const othersSum = sum(values(pluck(\"value\", othersData)));\n\n  return (\n    <div className=\"bg-muted rounded p-4\">\n      <Typography className=\"mb-2 uppercase\" variant=\"body2\" weight=\"bold\">\n        {type}\n      </Typography>\n      <DataDistribution data={defaultData} />\n      <Tooltip\n        content={<DataDistribution data={othersData} />}\n        disabled={!othersSum}\n        position=\"bottom\"\n      >\n        <div className=\"mt-2 grid grid-cols-4 gap-2\">\n          <MetaInfoItem\n            name={t(\"neetoMolecules.insights.others\")}\n            value={othersSum}\n          />\n        </div>\n      </Tooltip>\n    </div>\n  );\n};\n\nexport default memo(MetaInfo);\n","import { memo } from \"react\";\n\nimport { Typography } from \"@bigbinary/neeto-atoms\";\n\nconst TimeItem = ({ value, suffix }) => (\n  <div className=\"flex items-end\" data-testid=\"time-item\">\n    <Typography className=\"me-1\" variant=\"h1\" weight=\"semibold\">\n      {value}\n    </Typography>\n    <Typography className=\"leading-loose\" variant=\"body2\">\n      {suffix}\n    </Typography>\n  </div>\n);\n\nexport default memo(TimeItem);\n","import { memo } from \"react\";\n\nimport { Typography } from \"@bigbinary/neeto-atoms\";\nimport { hyphenate } from \"neetocist\";\n\nimport TimeItem from \"./TimeItem\";\n\nimport HelpPopover from \"../HelpPopover\";\n\nconst MetricItem = ({ metric, value, helpText, isTime, isPercentage }) => {\n  const renderTime = value => {\n    const { h: hours, m: minutes, s: seconds } = value;\n    const showSeconds = !hours && !minutes;\n\n    return (\n      <div className=\"flex gap-2\">\n        {!!hours && <TimeItem suffix=\"H\" value={hours} />}\n        {!!minutes && <TimeItem suffix=\"M\" value={minutes} />}\n        {(!!seconds || showSeconds) && <TimeItem suffix=\"S\" value={seconds} />}\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className=\"nf-insights__metric-item border-border border-b pb-4\"\n      data-testid={`${hyphenate(metric)}-metric`}\n    >\n      <div className=\"flex items-center gap-2\">\n        <div className=\"flex items-end gap-x-1\">\n          {isTime ? (\n            renderTime(value)\n          ) : (\n            <Typography\n              className=\"text-foreground\"\n              data-testid=\"insights-count\"\n              variant=\"h1\"\n              weight=\"semibold\"\n            >\n              {value || 0}\n              {isPercentage ? \"%\" : \"\"}\n            </Typography>\n          )}\n        </div>\n        {helpText && (\n          <div>\n            <HelpPopover description={helpText} />\n          </div>\n        )}\n      </div>\n      <Typography\n        className=\"text-muted-foreground\"\n        data-testid=\"insights-type\"\n        variant=\"body3\"\n      >\n        {metric}\n      </Typography>\n    </div>\n  );\n};\n\nexport default memo(MetricItem);\n","import { Spinner, Tooltip, Typography } from \"@bigbinary/neeto-atoms\";\nimport classNames from \"classnames\";\nimport { TriangleAlert } from \"lucide-react\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { DEFAULT_DEVICES, DEFAULT_BROWSERS, DEFAULT_OS } from \"./constants\";\nimport MetaInfo from \"./MetaInfo\";\nimport MetricItem from \"./MetricItem\";\n\nimport DateRangeFilter from \"../DateRangeFilter\";\n\nconst Insights = ({\n  insightsData,\n  isLoading,\n  timePeriod,\n  setTimePeriod,\n  helpTexts = {},\n  showWarningMessage = false,\n  className,\n  title,\n  tooltipProps = {},\n}) => {\n  const { t } = useTranslation();\n\n  const {\n    visitCount,\n    startCount,\n    submissionCount,\n    completionRate,\n    averageSubmissionTime,\n    devices,\n    operatingSystems,\n    browsers,\n  } = insightsData;\n\n  if (isLoading) {\n    return (\n      <div className=\"flex h-full w-full items-center justify-center\">\n        <Spinner />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={classNames(\"mx-auto pt-10\", className)}\n      data-testid=\"insights\"\n    >\n      <div className=\"mb-10 flex w-full items-center\">\n        <Typography data-testid=\"submissions-insights-title\" variant=\"h2\">\n          {title || t(\"neetoMolecules.insights.title\")}\n        </Typography>\n        {showWarningMessage && (\n          <Tooltip\n            content={t(\"neetoMolecules.insights.dataInaccuracyWarning\")}\n            position=\"bottom\"\n            {...tooltipProps}\n          >\n            <span className=\"ms-3\">\n              <TriangleAlert\n                className=\"text-warning\"\n                data-testid=\"insights-warning\"\n                size={20}\n              />\n            </span>\n          </Tooltip>\n        )}\n        <span className=\"ms-auto\">\n          <DateRangeFilter {...{ setTimePeriod, timePeriod }} />\n        </span>\n      </div>\n      <div className=\"mb-6 grid grid-cols-1 gap-x-9 gap-y-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 lg:gap-0\">\n        <MetricItem\n          helpText={helpTexts[\"visitCount\"]}\n          metric={t(\"neetoMolecules.insights.metrics.visits\")}\n          value={visitCount}\n        />\n        <MetricItem\n          helpText={helpTexts[\"startCount\"]}\n          metric={t(\"neetoMolecules.insights.metrics.starts\")}\n          value={startCount}\n        />\n        <MetricItem\n          helpText={helpTexts[\"submissions\"]}\n          metric={t(\"neetoMolecules.insights.metrics.submissions\")}\n          value={submissionCount}\n        />\n        <MetricItem\n          isPercentage\n          helpText={helpTexts[\"completionRate\"]}\n          metric={t(\"neetoMolecules.insights.metrics.completionRate\")}\n          value={completionRate}\n        />\n        <MetricItem\n          isTime\n          helpText={helpTexts[\"averageSubmissionTime\"]}\n          metric={t(\"neetoMolecules.insights.metrics.avgTimeToComplete\")}\n          timeSuffix={t(\"neetoMolecules.insights.mins\")}\n          value={averageSubmissionTime}\n        />\n      </div>\n      <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n        <MetaInfo\n          data={devices}\n          defaultItems={DEFAULT_DEVICES}\n          type={t(\"neetoMolecules.insights.devices\")}\n        />\n        <MetaInfo\n          data={operatingSystems}\n          defaultItems={DEFAULT_OS}\n          type={t(\"neetoMolecules.insights.os\")}\n        />\n        <MetaInfo\n          data={browsers}\n          defaultItems={DEFAULT_BROWSERS}\n          type={t(\"neetoMolecules.insights.browsers\")}\n        />\n      </div>\n    </div>\n  );\n};\n\nInsights.propTypes = {\n  /**\n   * Title displayed for the Insights component.\n   */\n  title: PropTypes.string,\n  /**\n   * Props for the tooltip displayed on the warning icon.\n   */\n  tooltipProps: PropTypes.object,\n  /**\n   * Object containing metrics and statistics for insights\n   */\n  insightsData: PropTypes.shape({\n    visitCount: PropTypes.number,\n    startCount: PropTypes.number,\n    submissionCount: PropTypes.number,\n    completionRate: PropTypes.number,\n    averageSubmissionTime: PropTypes.shape({\n      h: PropTypes.number,\n      m: PropTypes.number,\n      s: PropTypes.number,\n    }),\n    devices: PropTypes.shape({\n      desktop: PropTypes.number,\n      smartphone: PropTypes.number,\n    }),\n    operatingSystems: PropTypes.shape({\n      mac: PropTypes.number,\n      windows: PropTypes.number,\n    }),\n    browsers: PropTypes.shape({\n      chrome: PropTypes.number,\n      safari: PropTypes.number,\n    }),\n  }),\n  /**\n   * Indicates whether insights data is currently being fetched from an API\n   */\n  isLoading: PropTypes.bool,\n  /**\n   * The state corresponding to the currently selected date range.\n   */\n  timePeriod: PropTypes.shape({\n    label: PropTypes.string,\n    value: PropTypes.object,\n  }),\n  /**\n   * The setter method for `timePeriod` state.\n   */\n  setTimePeriod: PropTypes.func,\n  /**\n   * Object containing explanatory text for each metric, providing additional context that can help users understand the significance of the metrics displayed.\n   */\n  helpTexts: PropTypes.shape({\n    visitCount: PropTypes.string,\n    startCount: PropTypes.string,\n    submissions: PropTypes.string,\n    completionRate: PropTypes.string,\n    averageSubmissionTime: PropTypes.string,\n  }),\n  /**\n   * Displays a warning to indicate that the insights may not be accurate, as the insights integration occurred after the record's creation.\n   */\n  showWarningMessage: PropTypes.bool,\n  /**\n   * To provide additional classes.\n   */\n  className: PropTypes.string,\n};\n\nexport default Insights;\n"],"names":["DEFAULT_DEVICES","label","t","value","DEFAULT_OS","DEFAULT_BROWSERS","PercentageBar","_ref","_jsxs","_Fragment","children","_jsx","className","style","width","concat","Typography","variant","memo","MetaInfoItem","name","DataDistribution","data","map","_ref2","_createElement","key","getSum","searchKey","sum","includes","transformInsights","defaultItems","othersData","Object","keys","filter","existsBy","defaultData","MetaInfo","type","_useTranslation","useTranslation","_transformInsights","othersSum","values","pluck","weight","Tooltip","content","disabled","position","TimeItem","suffix","MetricItem","metric","helpText","isTime","isPercentage","renderTime","hours","h","minutes","m","seconds","s","showSeconds","hyphenate","HelpPopover","description","Insights","insightsData","isLoading","timePeriod","setTimePeriod","_ref$helpTexts","helpTexts","_ref$showWarningMessa","showWarningMessage","title","_ref$tooltipProps","tooltipProps","visitCount","startCount","submissionCount","completionRate","averageSubmissionTime","devices","operatingSystems","browsers","Spinner","classNames","_objectSpread","TriangleAlert","size","DateRangeFilter","timeSuffix"],"mappings":"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"}

package/dist/v2/IntegrationCard.js

@@ -0,0 +1,220 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { Badge, Tooltip, Typography, Spinner, Button } from '@bigbinary/neeto-atoms';
+import classnames from 'classnames';
+import { noop, isPresent, isNotEmpty } from '@bigbinary/neeto-cist';
+import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/v2/utils/general';
+import { isNotNil } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import MoreDropdown from './MoreDropdown.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { T as TriangleAlert } from '../triangle-alert-Pkh6pc42.js';
+import { C as Check } from '../check-DvxzqR83.js';
+import '@bigbinary/neeto-commons-frontend/v2/react-utils';
+import '../createLucideIcon-mNMhCCpf.js';
+import 'react';
+import '../ellipsis-DpI9xqUK.js';
+
+var Dropdown = function Dropdown(_ref) {
+  var customDropdown = _ref.customDropdown,
+    _ref$handleManage = _ref.handleManage,
+    handleManage = _ref$handleManage === void 0 ? noop : _ref$handleManage,
+    _ref$hideDisconnect = _ref.hideDisconnect,
+    hideDisconnect = _ref$hideDisconnect === void 0 ? false : _ref$hideDisconnect,
+    _ref$onDisconnect = _ref.onDisconnect,
+    onDisconnect = _ref$onDisconnect === void 0 ? noop : _ref$onDisconnect;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (isNotNil(customDropdown)) {
+    return /*#__PURE__*/jsx("div", {
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      children: customDropdown
+    });
+  }
+  var isManageable = isNotNil(handleManage);
+  if (!isManageable && hideDisconnect) {
+    return null;
+  }
+  return /*#__PURE__*/jsx("div", {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    children: /*#__PURE__*/jsx(MoreDropdown, {
+      menuItems: [{
+        isVisible: isManageable,
+        onClick: handleManage,
+        label: t("neetoMolecules.integrationCard.manage"),
+        key: "integration-card-manage-integration"
+      }, {
+        isVisible: !hideDisconnect,
+        onClick: onDisconnect,
+        label: t("neetoMolecules.integrationCard.disconnect"),
+        key: "integration-card-manage-disconnection"
+      }]
+    })
+  });
+};
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Status = function Status(_ref) {
+  var isExpired = _ref.isExpired;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var tagProps = isExpired ? {
+    icon: TriangleAlert,
+    label: t("neetoMolecules.integrationCard.tags.expired"),
+    variant: "amber"
+  } : {
+    icon: Check,
+    label: t("neetoMolecules.integrationCard.tags.connected"),
+    variant: "green"
+  };
+  return /*#__PURE__*/jsx(Badge, _objectSpread$1(_objectSpread$1({}, tagProps), {}, {
+    "data-testid": "integration-status",
+    iconPosition: "right"
+  }));
+};
+
+var _excluded = ["icon", "subIcons", "label", "description", "className", "onConnect", "onDisconnect", "onManage", "isLoading", "isConnected", "isFailed", "isExpired", "disabled", "hidden", "hideDisconnect", "onClick", "tooltipProps", "customDropdown", "dataTestid", "connectPath", "connectUrl", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var IntegrationCard = function IntegrationCard(_ref) {
+  var Icon = _ref.icon,
+    _ref$subIcons = _ref.subIcons,
+    subIcons = _ref$subIcons === void 0 ? [] : _ref$subIcons,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? "" : _ref$description,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$onConnect = _ref.onConnect,
+    onConnect = _ref$onConnect === void 0 ? noop : _ref$onConnect,
+    _ref$onDisconnect = _ref.onDisconnect,
+    onDisconnect = _ref$onDisconnect === void 0 ? noop : _ref$onDisconnect,
+    _ref$onManage = _ref.onManage,
+    onManage = _ref$onManage === void 0 ? undefined : _ref$onManage,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$isConnected = _ref.isConnected,
+    isConnected = _ref$isConnected === void 0 ? false : _ref$isConnected,
+    _ref$isFailed = _ref.isFailed,
+    isFailed = _ref$isFailed === void 0 ? false : _ref$isFailed,
+    _ref$isExpired = _ref.isExpired,
+    isExpired = _ref$isExpired === void 0 ? false : _ref$isExpired,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$hidden = _ref.hidden,
+    hidden = _ref$hidden === void 0 ? false : _ref$hidden,
+    _ref$hideDisconnect = _ref.hideDisconnect,
+    hideDisconnect = _ref$hideDisconnect === void 0 ? false : _ref$hideDisconnect,
+    _ref$onClick = _ref.onClick,
+    onCardClick = _ref$onClick === void 0 ? undefined : _ref$onClick,
+    _ref$tooltipProps = _ref.tooltipProps,
+    tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
+    _ref$customDropdown = _ref.customDropdown,
+    customDropdown = _ref$customDropdown === void 0 ? null : _ref$customDropdown,
+    _ref$dataTestid = _ref.dataTestid,
+    dataTestid = _ref$dataTestid === void 0 ? "" : _ref$dataTestid,
+    _ref$connectPath = _ref.connectPath,
+    connectPath = _ref$connectPath === void 0 ? "" : _ref$connectPath,
+    _ref$connectUrl = _ref.connectUrl,
+    connectUrl = _ref$connectUrl === void 0 ? "" : _ref$connectUrl,
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (hidden) return null;
+  var isCardClickable = isConnected && isNotNil(onCardClick);
+  var cardProps = isCardClickable ? {
+    onClick: onCardClick
+  } : {};
+  return /*#__PURE__*/jsx(Tooltip, _objectSpread(_objectSpread({
+    disabled: !disabled,
+    position: "top",
+    content: disabled && t("neetoMolecules.integrationCard.tooltip.integrationNotAvailable")
+  }, tooltipProps), {}, {
+    children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+      "data-testid": isPresent(dataTestid) ? dataTestid : "integration-card",
+      className: classnames("border-border hover:border-ring focus:border-ring flex flex-col rounded-lg border p-6 no-underline shadow-xs transition-colors outline-none", {
+        "hover:bg-muted cursor-not-allowed opacity-50": disabled,
+        "cursor-pointer": isCardClickable
+      }, className)
+    }, cardProps), otherProps), {}, {
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex flex-grow justify-between",
+        "data-testid": "integration-tabs",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex min-w-0 flex-col justify-end",
+          children: [/*#__PURE__*/jsx("div", {
+            className: "relative mb-4 flex h-8",
+            children: Icon && /*#__PURE__*/jsx(Icon, {
+              size: 32
+            })
+          }), /*#__PURE__*/jsxs("div", {
+            className: "my-auto",
+            children: [/*#__PURE__*/jsx(Typography, {
+              className: "mb-2",
+              "data-testid": "integration-card-label",
+              variant: "h4",
+              weight: "semibold",
+              children: label
+            }), /*#__PURE__*/jsx(Typography, {
+              className: "break-words",
+              "data-testid": "".concat(joinHyphenCase(label), "-integration-description"),
+              variant: "body2",
+              children: description
+            }), children]
+          })]
+        }), isNotEmpty(subIcons) && /*#__PURE__*/jsx("div", {
+          className: "flex h-24 flex-col gap-2",
+          children: subIcons.map(function (Icon, index) {
+            return /*#__PURE__*/jsx(Icon, {
+              className: "text-muted-foreground",
+              size: 24
+            }, index);
+          })
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: "border-border mt-4 w-full border-t pt-2",
+        children: isLoading ? /*#__PURE__*/jsx("div", {
+          className: "mt-3 flex items-center justify-start",
+          children: /*#__PURE__*/jsx(Spinner, {})
+        }) : /*#__PURE__*/jsxs("div", {
+          className: "flex h-8 items-center justify-between",
+          children: [isConnected && /*#__PURE__*/jsx(Status, {
+            isExpired: isExpired
+          }), isFailed && /*#__PURE__*/jsx(Button, {
+            className: "text-warning",
+            "data-testid": "connect-button",
+            disabled: disabled || isLoading,
+            href: connectUrl,
+            label: t("neetoMolecules.integrationCard.tryAgain"),
+            to: connectPath,
+            variant: "link",
+            onClick: onConnect
+          }), !isConnected && !isFailed && /*#__PURE__*/jsx(Button, {
+            "data-testid": "connect-button",
+            disabled: disabled || isLoading,
+            href: connectUrl,
+            label: t("neetoMolecules.integrationCard.connect"),
+            to: connectPath,
+            variant: "link",
+            onClick: onConnect
+          }), (isConnected || isFailed) && /*#__PURE__*/jsx(Dropdown, {
+            customDropdown: customDropdown,
+            hideDisconnect: hideDisconnect,
+            onDisconnect: onDisconnect,
+            handleManage: onManage
+          })]
+        })
+      })]
+    }))
+  }));
+};
+
+export { IntegrationCard as default };
+//# sourceMappingURL=IntegrationCard.js.map