@shipengine/elements 2.20.0 → 2.21.0

package/cjs/components/grid-filters/components/created-date-filter/created-date-filter.cjs

@@ -0,0 +1,230 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var date = require('../../../../utilities/date.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var reactUse = require('react-use');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var createdDateFilter_styles = require('./created-date-filter.styles.cjs');
+var form = require('./types/form.cjs');
+var dates = require('./utils/dates.cjs');
+var elementsContextProvider = require('../../../../elements-provider/elements-context-provider.cjs');
+
+/**
+ * @internal
+ *
+ * # CreatedDateFilter
+ *
+ * - The `<CreatedDateFilter />` component handle created date filter used in Shipments Grid.
+ *
+ * @see {@link CreatedDateFilterProps | The props for the `<CreatedDateFilter />` component}
+ */
+const CreatedDateFilter = ({
+  filters,
+  onFiltersUpdated
+}) => {
+  var _a;
+  const {
+    t
+  } = reactI18next.useTranslation(["common"]);
+  const {
+    locale
+  } = elementsContextProvider.useElements();
+  const buttonRef = React.useRef(null);
+  const [showCreatedDateFilter, toggleCreatedDateFilter] = reactUse.useToggle(false);
+  const [showCalendar, setShowCalendar] = React.useState(false);
+  const [calendarStartDate, setCalendarStartDate] = React.useState(null);
+  const [calendarEndDate, setCalendarEndDate] = React.useState(null);
+  const [selectedDateFilter, setSelectedDateFilter] = React.useState();
+  const onDateFilterChange = ({
+    target: {
+      value
+    }
+  }) => {
+    setSelectedDateFilter(value);
+    if (value !== form.DateFilter.CUSTOM) {
+      setShowCalendar(false);
+      onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+        createdDate: {
+          enabled: true,
+          value: dates.getDateRangeFromEnum(value)
+        }
+      }));
+    } else {
+      setShowCalendar(true);
+    }
+  };
+  const onFilterClear = () => {
+    setSelectedDateFilter(undefined);
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      createdDate: {
+        enabled: true,
+        value: null
+      }
+    }));
+  };
+  const onCalendarChange = dates => {
+    const [start, end] = dates;
+    setCalendarStartDate(start);
+    setCalendarEndDate(end);
+  };
+  const onApplyCustomDates = () => {
+    if (!calendarEndDate || !calendarStartDate) {
+      return;
+    }
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      createdDate: {
+        enabled: true,
+        value: {
+          end: calendarEndDate,
+          start: calendarStartDate
+        }
+      }
+    }));
+  };
+  const onClear = () => {
+    setCalendarStartDate(null);
+    setCalendarEndDate(null);
+  };
+  const onToggleCreatedDateFilter = () => {
+    toggleCreatedDateFilter();
+    setSelectedDateFilter(undefined);
+    setCalendarStartDate(null);
+    setCalendarEndDate(null);
+    setShowCalendar(false);
+  };
+  React.useEffect(() => {
+    var _a;
+    if (!((_a = filters.createdDate) === null || _a === void 0 ? void 0 : _a.value)) {
+      setSelectedDateFilter(undefined);
+    }
+  }, [filters.createdDate]);
+  return ((_a = filters.createdDate) === null || _a === void 0 ? void 0 : _a.value) ? jsxRuntime.jsxs(giger.Button, Object.assign({
+    css: createdDateFilter_styles.styles.mainButton,
+    onClick: onFilterClear,
+    variant: giger.ButtonVariant.TEXT
+  }, {
+    children: [jsxRuntime.jsx("span", {
+      children: t("common:grid.createdDateFilter", {
+        createdDateEnd: date.formatByDateAndLocale(filters.createdDate.value.end, locale),
+        createdDateStart: date.formatByDateAndLocale(filters.createdDate.value.start, locale),
+        interpolation: {
+          escapeValue: false
+        }
+      })
+    }), jsxRuntime.jsx(giger.Icon, {
+      name: gigerTheme.IconNames.CLOSE,
+      size: giger.IconSize.SIZE_SMALL
+    })]
+  })) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(giger.Button, Object.assign({
+      css: createdDateFilter_styles.styles.mainButton,
+      onClick: onToggleCreatedDateFilter,
+      ref: buttonRef,
+      variant: giger.ButtonVariant.TEXT
+    }, {
+      children: [jsxRuntime.jsx("span", {
+        children: t("common:grid.createdDate")
+      }), jsxRuntime.jsx(giger.Icon, {
+        name: showCreatedDateFilter ? gigerTheme.IconNames.CARET_TOP : gigerTheme.IconNames.CARET_BOTTOM,
+        size: giger.IconSize.SIZE_SMALL
+      })]
+    })), jsxRuntime.jsx(giger.Popover, Object.assign({
+      css: createdDateFilter_styles.styles.popover,
+      isOpen: showCreatedDateFilter,
+      onClickAway: toggleCreatedDateFilter,
+      reference: buttonRef.current
+    }, {
+      children: jsxRuntime.jsxs("section", Object.assign({
+        css: createdDateFilter_styles.styles.popoverWrapper
+      }, {
+        children: [jsxRuntime.jsxs(giger.RadioGroup, Object.assign({
+          css: createdDateFilter_styles.styles.radioGroup,
+          name: "dateFilter",
+          onChange: onDateFilterChange,
+          value: selectedDateFilter
+        }, {
+          children: [jsxRuntime.jsx(giger.Radio, Object.assign({
+            value: form.DateFilter.TODAY
+          }, {
+            children: t("common:grid.dateFilterToday")
+          })), jsxRuntime.jsx(giger.Radio, Object.assign({
+            value: form.DateFilter.LAST7DAYS
+          }, {
+            children: t("common:grid.dateFilterLast7Days")
+          })), jsxRuntime.jsx(giger.Radio, Object.assign({
+            value: form.DateFilter.LAST30DAYS
+          }, {
+            children: t("common:grid.dateFilterLast30Days")
+          })), jsxRuntime.jsx(giger.Radio, Object.assign({
+            value: form.DateFilter.LAST365DAYS
+          }, {
+            children: t("common:grid.dateFilterLast12Months")
+          })), jsxRuntime.jsx(giger.Radio, Object.assign({
+            value: form.DateFilter.CUSTOM
+          }, {
+            children: t("common:grid.dateFilterCustom")
+          }))]
+        })), showCalendar && jsxRuntime.jsxs("section", Object.assign({
+          css: createdDateFilter_styles.styles.popoverCalendarWrapper
+        }, {
+          children: [jsxRuntime.jsxs("div", Object.assign({
+            css: createdDateFilter_styles.styles.inputsWrapper
+          }, {
+            children: [jsxRuntime.jsx(giger.Input, {
+              css: createdDateFilter_styles.styles.input,
+              readOnly: true,
+              rightContent: jsxRuntime.jsx(giger.Icon, {
+                name: gigerTheme.IconNames.CALENDAR,
+                size: giger.IconSize.SIZE_SMALL
+              }),
+              value: calendarStartDate ? date.formatByDateAndLocale(calendarStartDate, locale) : undefined
+            }), jsxRuntime.jsx(giger.Icon, {
+              css: createdDateFilter_styles.styles.inputsArrow,
+              name: gigerTheme.IconNames.ARROW_RIGHT,
+              size: giger.IconSize.SIZE_SMALL
+            }), jsxRuntime.jsx(giger.Input, {
+              css: createdDateFilter_styles.styles.input,
+              readOnly: true,
+              rightContent: jsxRuntime.jsx(giger.Icon, {
+                name: gigerTheme.IconNames.CALENDAR,
+                size: giger.IconSize.SIZE_SMALL
+              }),
+              value: calendarEndDate ? date.formatByDateAndLocale(calendarEndDate, locale) : undefined
+            })]
+          })), jsxRuntime.jsx(giger.Calendar, {
+            containerStyles: createdDateFilter_styles.styles.calendarContainer,
+            endDate: calendarEndDate,
+            filterDate: date$1 => !date.isNowOrInTheFuture(date$1),
+            onChange: onCalendarChange,
+            selected: calendarStartDate,
+            selectsRange: true,
+            startDate: calendarStartDate,
+            withBorder: false
+          }), jsxRuntime.jsxs("div", Object.assign({
+            css: createdDateFilter_styles.styles.calendarFooterButtons
+          }, {
+            children: [jsxRuntime.jsx(giger.Button, Object.assign({
+              css: createdDateFilter_styles.styles.clearButton,
+              onClick: onClear,
+              variant: giger.ButtonVariant.OUTLINED
+            }, {
+              children: t("common:grid.clear")
+            })), jsxRuntime.jsx(giger.Button, Object.assign({
+              disabled: !calendarStartDate || !calendarEndDate,
+              onClick: onApplyCustomDates
+            }, {
+              children: t("common:grid.apply")
+            }))]
+          }))]
+        }))]
+      }))
+    }))]
+  });
+};
+
+exports.CreatedDateFilter = CreatedDateFilter;

package/cjs/components/grid-filters/components/created-date-filter/created-date-filter.styles.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  calendarContainer: theme => ({
+    border: `1px solid ${styles$1.scopeTheme(theme).palette.gray[200]}`,
+    borderRadius: styles$1.scopeTheme(theme).borderRadius.M
+  }),
+  calendarFooterButtons: theme => ({
+    alignSelf: "flex-end",
+    marginTop: styles$1.scopeTheme(theme).spacing()
+  }),
+  clearButton: theme => ({
+    marginRight: styles$1.scopeTheme(theme).spacing()
+  }),
+  input: () => ({
+    width: `calc((278px - 6px) / 2)`
+  }),
+  inputsArrow: theme => ({
+    marginLeft: styles$1.scopeTheme(theme).spacing(),
+    marginRight: styles$1.scopeTheme(theme).spacing()
+  }),
+  inputsWrapper: theme => ({
+    alignItems: "center",
+    display: "flex",
+    marginBottom: styles$1.scopeTheme(theme).spacing()
+  }),
+  mainButton: theme => ({
+    marginRight: styles$1.scopeTheme(theme).spacing()
+  }),
+  popover: () => ({
+    maxWidth: "initial"
+  }),
+  popoverCalendarWrapper: () => ({
+    display: "flex",
+    flexDirection: "column"
+  }),
+  popoverWrapper: () => ({
+    display: "flex"
+  }),
+  radioGroup: theme => ({
+    marginRight: styles$1.scopeTheme(theme).spacing(4)
+  })
+});
+
+exports.styles = styles;

package/cjs/components/grid-filters/components/created-date-filter/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createdDateFilter = require('./created-date-filter.cjs');
+
+
+
+exports.CreatedDateFilter = createdDateFilter.CreatedDateFilter;

package/cjs/components/grid-filters/components/created-date-filter/types/form.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+exports.DateFilter = void 0;
+(function (DateFilter) {
+  DateFilter["TODAY"] = "today";
+  DateFilter["LAST7DAYS"] = "last_7";
+  DateFilter["LAST30DAYS"] = "last_30";
+  DateFilter["LAST365DAYS"] = "last_365";
+  DateFilter["CUSTOM"] = "custom";
+})(exports.DateFilter || (exports.DateFilter = {}));

package/cjs/components/grid-filters/components/created-date-filter/utils/dates.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var subDays = require('date-fns/subDays');
+var form = require('../types/form.cjs');
+
+const DaysToSubtract = {
+  [form.DateFilter.LAST7DAYS]: 7,
+  [form.DateFilter.LAST30DAYS]: 30,
+  [form.DateFilter.LAST365DAYS]: 365
+};
+/**
+ * Given a value from `enumValue` we will return an object with the end and start Date
+ * By default will return `DateFilter.TODAY`, the `DateFilter.CUSTOM` its being handled at the
+ * component.
+ */
+const getDateRangeFromEnum = enumValue => {
+  const today = new Date();
+  if ([form.DateFilter.LAST30DAYS, form.DateFilter.LAST7DAYS, form.DateFilter.LAST365DAYS].includes(enumValue)) {
+    return {
+      end: today,
+      start: subDays.subDays(today, DaysToSubtract[enumValue])
+    };
+  }
+  return {
+    end: today,
+    start: today
+  };
+};
+
+exports.getDateRangeFromEnum = getDateRangeFromEnum;

package/cjs/components/grid-filters/components/created-date-filter/utils/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dates = require('./dates.cjs');
+
+
+
+exports.getDateRangeFromEnum = dates.getDateRangeFromEnum;

package/cjs/components/grid-filters/components/index.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var shipmentIdFilter = require('./shipment-id-filter/shipment-id-filter.cjs');
+var createdDateFilter = require('./created-date-filter/created-date-filter.cjs');
+var labelIdFilter = require('./label-id-filter/label-id-filter.cjs');
+var trackingStatusFilter = require('./tracking-status-filter/tracking-status-filter.cjs');
+
+
+
+exports.ShipmentIdFilter = shipmentIdFilter.ShipmentIdFilter;
+exports.CreatedDateFilter = createdDateFilter.CreatedDateFilter;
+exports.LabelIdFilter = labelIdFilter.LabelIdFilter;
+exports.TrackingStatusFilter = trackingStatusFilter.TrackingStatusFilter;

package/cjs/components/grid-filters/components/label-id-filter/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var labelIdFilter = require('./label-id-filter.cjs');
+
+
+
+exports.LabelIdFilter = labelIdFilter.LabelIdFilter;

package/cjs/components/grid-filters/components/label-id-filter/label-id-filter-shema.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var zod = require('zod');
+
+const labelIdFormSchema = zod.z.object({
+  labelId: zod.z.string({
+    errorMap: () => ({
+      message: "schemaErrors.requiredLabelId"
+    })
+  })
+});
+
+exports.labelIdFormSchema = labelIdFormSchema;

package/cjs/components/grid-filters/components/label-id-filter/label-id-filter.cjs

@@ -0,0 +1,145 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var formLogger = require('../../../../utilities/form-logger.cjs');
+var validation = require('../../../../utilities/validation.cjs');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var reactUse = require('react-use');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var labelIdFilterShema = require('./label-id-filter-shema.cjs');
+var labelIdFilter_styles = require('./label-id-filter.styles.cjs');
+var textInput = require('../../../field/text-input/text-input.cjs');
+var submitButton = require('../../../field/submit-button/submit-button.cjs');
+
+/**
+ * @internal
+ *
+ * # LabelIdFilter
+ *
+ * - The `<LabelIdFilter />` component handle label id filter used in Labels Grid.
+ *
+ * @see {@link LabelIdFilterProps | The props for the `<LabelIdFilter />` component}
+ */
+const LabelIdFilter = ({
+  filters,
+  onFiltersUpdated
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const {
+    t
+  } = reactI18next.useTranslation(["common"]);
+  const [showLabelIdFilter, toggleLabelIdFilter] = reactUse.useToggle(false);
+  const buttonRef = React.useRef(null);
+  const form = reactHookForm.useForm({
+    resolver: validation.validationResolver(labelIdFilterShema.labelIdFormSchema)
+  });
+  const handleSubmit = form.handleSubmit(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    toggleLabelIdFilter();
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      labelId: Object.assign(Object.assign({}, filters.labelId), {
+        enabled: true,
+        value: values.labelId
+      })
+    }));
+  }));
+  const onClearLabelId = () => {
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      labelId: Object.assign(Object.assign({}, filters.labelId), {
+        enabled: true,
+        value: ""
+      })
+    }));
+    showLabelIdFilter && toggleLabelIdFilter();
+  };
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.Button, Object.assign({
+          onClick: toggleLabelIdFilter,
+          ref: buttonRef,
+          variant: giger.ButtonVariant.TEXT
+        }, {
+          children: filters.labelId && filters.labelId.value ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx("span", {
+              children: jsxRuntime.jsx(reactI18next.Trans, {
+                i18nKey: t("common:grid.labelIdFilter", {
+                  name: (_b = (_a = filters === null || filters === void 0 ? void 0 : filters.labelId) === null || _a === void 0 ? void 0 : _a.nickname) !== null && _b !== void 0 ? _b : t("common:grid.labelId")
+                }),
+                values: {
+                  labelId: filters.labelId.value
+                }
+              })
+            }), jsxRuntime.jsx(giger.Icon, {
+              name: gigerTheme.IconNames.CLOSE,
+              onClick: e => {
+                e.stopPropagation();
+                onClearLabelId();
+              },
+              onKeyDown: e => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.stopPropagation();
+                  onClearLabelId();
+                }
+              },
+              role: "button",
+              size: giger.IconSize.SIZE_SMALL,
+              tabIndex: 0
+            })]
+          }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx("span", {
+              children: (_d = (_c = filters === null || filters === void 0 ? void 0 : filters.labelId) === null || _c === void 0 ? void 0 : _c.nickname) !== null && _d !== void 0 ? _d : t("common:grid.labelId")
+            }), jsxRuntime.jsx(giger.Icon, {
+              name: showLabelIdFilter ? gigerTheme.IconNames.CARET_TOP : gigerTheme.IconNames.CARET_BOTTOM,
+              size: giger.IconSize.SIZE_SMALL
+            })]
+          })
+        })), jsxRuntime.jsx(giger.Popover, Object.assign({
+          isOpen: showLabelIdFilter,
+          onClickAway: toggleLabelIdFilter,
+          reference: buttonRef.current
+        }, {
+          children: jsxRuntime.jsxs("form", Object.assign({
+            onSubmit: formLogger.formLogger.capture(handleSubmit)
+          }, {
+            children: [jsxRuntime.jsx(textInput.TextInput, {
+              "aria-required": "true",
+              control: form.control,
+              defaultValue: (_f = (_e = filters.labelId) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : "",
+              hint: t("common:grid.labelIdHint"),
+              label: (_h = (_g = filters === null || filters === void 0 ? void 0 : filters.labelId) === null || _g === void 0 ? void 0 : _g.nickname) !== null && _h !== void 0 ? _h : t("common:grid.labelId"),
+              labelPosition: "vertical",
+              labelWeight: "bold",
+              labelWidth: "100%",
+              name: "labelId",
+              placeholder: t("common:grid.search")
+            }), jsxRuntime.jsxs("div", Object.assign({
+              css: labelIdFilter_styles.styles.buttons
+            }, {
+              children: [jsxRuntime.jsx(giger.Button, Object.assign({
+                disabled: !form.watch("labelId") && !((_j = filters.labelId) === null || _j === void 0 ? void 0 : _j.value),
+                onClick: onClearLabelId,
+                variant: giger.ButtonVariant.OUTLINED
+              }, {
+                children: t("common:grid.clear")
+              })), jsxRuntime.jsx(submitButton.SubmitButton, Object.assign({
+                control: form.control,
+                variant: giger.ButtonVariant.FILLED
+              }, {
+                children: t("common:grid.apply")
+              }))]
+            }))]
+          }))
+        }))]
+      })
+    })
+  );
+};
+
+exports.LabelIdFilter = LabelIdFilter;

package/cjs/components/grid-filters/components/label-id-filter/label-id-filter.styles.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  buttons: theme => ({
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(),
+    justifyContent: "flex-end"
+  })
+});
+
+exports.styles = styles;

package/cjs/components/grid-filters/components/shipment-id-filter/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var shipmentIdFilter = require('./shipment-id-filter.cjs');
+
+
+
+exports.ShipmentIdFilter = shipmentIdFilter.ShipmentIdFilter;

package/cjs/components/grid-filters/components/shipment-id-filter/shipment-id-filter-shema.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var zod = require('zod');
+
+const shipmentIdFormSchema = zod.z.object({
+  shipmentId: zod.z.string({
+    errorMap: () => ({
+      message: "schemaErrors.requiredShipmentId"
+    })
+  })
+});
+
+exports.shipmentIdFormSchema = shipmentIdFormSchema;