@shipengine/elements 2.20.0 → 2.22.0

package/cjs/components/forms/warehouse-form/warehouse-form-schema.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var min = require('libphonenumber-js/min');
+var zod = require('zod');
+var addressSchema = require('../address-form/address-schema.cjs');
+var address = require('../../../constants/shipengine/address.cjs');
+
+const getWarehouseAddressSchema = (useStrict, emailRequired, companyNameRequired) => {
+  return addressSchema.addressSchema.extend({
+    addressResidentialIndicator: zod.z.preprocess(v => v === "yes" ? true : false, zod.z.boolean().default(false).transform(value => value ? "yes" : "no")),
+    companyName: companyNameRequired ? zod.z.string().trim().min(1) : addressSchema.addressSchema.shape.companyName,
+    email: emailRequired ? zod.z.string().trim().email().min(1) : addressSchema.addressSchema.shape.email,
+    name: useStrict ? addressSchema.addressSchema.shape.name.regex(address.addressNameRegex, "schemaErrors.invalidAddressNameOnboarding") : addressSchema.addressSchema.shape.name,
+    phone: zod.z.string().trim().min(1)
+  }).refine(schema => !schema.phone || min.isValidPhoneNumber(schema.phone, schema.countryCode), {
+    message: "schemaErrors.notAValidPhoneNumber",
+    path: ["phone"]
+  }).refine(schema => {
+    if (schema.countryCode === "US") {
+      return schema.stateProvince && address.usStateCodes.includes(schema.stateProvince);
+    }
+    return true;
+  }, {
+    message: "schemaErrors.invalidStateProvince",
+    path: ["stateProvince"]
+  }).refine(schema => {
+    if (schema.countryCode === "US") {
+      return address.postalCodeRegex.test(schema.postalCode);
+    }
+    return true;
+  }, {
+    message: "schemaErrors.invalidPostalCode",
+    path: ["postalCode"]
+  });
+};
+const getWarehouseSchema = (useStrict, emailRequired, companyNameRequired = true) => {
+  const warehouseAddressSchema = getWarehouseAddressSchema(useStrict, emailRequired, companyNameRequired);
+  return zod.z.discriminatedUnion("returnToAddressIsDifferent", [zod.z.object({
+    isDefault: zod.z.boolean(),
+    name: zod.z.string().trim().min(1),
+    originAddress: warehouseAddressSchema,
+    returnAddress: warehouseAddressSchema,
+    returnToAddressIsDifferent: zod.z.literal(true),
+    warehouseId: zod.z.string().optional()
+  }), zod.z.object({
+    isDefault: zod.z.boolean(),
+    name: zod.z.string().trim().min(1),
+    originAddress: warehouseAddressSchema,
+    returnToAddressIsDifferent: zod.z.literal(false),
+    warehouseId: zod.z.string().optional()
+  })]);
+};
+
+exports.getWarehouseAddressSchema = getWarehouseAddressSchema;
+exports.getWarehouseSchema = getWarehouseSchema;

package/cjs/components/forms/warehouse-form/warehouse-form.cjs

@@ -0,0 +1,187 @@
+'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 isEqual = require('lodash/isEqual.js');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var warehouseFormSchema = require('./warehouse-form-schema.cjs');
+var addressFields = require('../address-form/address-fields.cjs');
+var addressPreferenceContext = require('../../address-preference-context/address-preference-context.cjs');
+var textInput = require('../../field/text-input/text-input.cjs');
+var checkboxInput = require('../../field/checkbox-input/checkbox-input.cjs');
+var buttonGroup = require('../../button-group/button-group.cjs');
+var submitButton = require('../../field/submit-button/submit-button.cjs');
+var portal = require('../../portal/portal.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+
+const WarehouseForm = ({
+  onCancel,
+  formId,
+  onDelete,
+  onSubmit,
+  portalRef,
+  requireEmail,
+  submitButtonTitle,
+  warehouse,
+  shouldForceDefault,
+  useStrictSchema: _useStrictSchema = false
+}) => {
+  var _a;
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "manage-warehouses"]);
+  const {
+    validateAddress,
+    userInput
+  } = addressPreferenceContext.useAddressPreference();
+  const hasDefaultValues = !!warehouse || !!userInput;
+  const form = reactHookForm.useForm({
+    defaultValues: warehouse ? Object.assign(Object.assign({}, warehouse), {
+      isDefault: warehouse.isDefault,
+      originAddress: Object.assign(Object.assign({}, warehouse.originAddress), {
+        countryCode: warehouse.originAddress.countryCode
+      }),
+      returnAddress: Object.assign(Object.assign({}, warehouse.returnAddress), {
+        countryCode: warehouse.returnAddress.countryCode
+      }),
+      returnToAddressIsDifferent: !isEqual__default["default"](warehouse.originAddress, warehouse.returnAddress)
+    }) : userInput ? Object.assign(Object.assign({}, userInput), {
+      originAddress: Object.assign(Object.assign({}, userInput.originAddress), {
+        countryCode: userInput.originAddress.countryCode
+      }),
+      returnAddress: Object.assign(Object.assign({}, userInput.returnAddress), {
+        countryCode: (_a = userInput.returnAddress) === null || _a === void 0 ? void 0 : _a.countryCode
+      }),
+      returnToAddressIsDifferent: !!userInput.returnAddress
+    }) : {
+      isDefault: !!shouldForceDefault,
+      originAddress: {
+        addressResidentialIndicator: false
+      },
+      returnToAddressIsDifferent: false
+    },
+    resolver: validation.validationResolver(warehouseFormSchema.getWarehouseSchema(_useStrictSchema, requireEmail))
+  });
+  const handleSubmit = form.handleSubmit(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const _b = values,
+      payload = tslib.__rest(_b, ["returnToAddressIsDifferent"]);
+    const passengerData = {
+      isDefault: payload.isDefault,
+      name: payload.name
+    };
+    yield validateAddress({
+      addresses: payload,
+      data: payload.warehouseId ? Object.assign(Object.assign({}, passengerData), {
+        warehouseId: payload.warehouseId
+      }) : passengerData,
+      onValid: validatedAddressesPayload => {
+        onSubmit(Object.assign(Object.assign(Object.assign({}, validatedAddressesPayload), {
+          isDefault: payload.isDefault,
+          name: payload.name
+        }), payload.warehouseId && {
+          warehouseId: payload.warehouseId
+        }));
+      }
+    });
+  }));
+  const formInterface = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(textInput.TextInput, {
+      "aria-required": "true",
+      control: form.control,
+      form: formId,
+      label: t("manage-warehouses:locationName"),
+      name: "name",
+      nativeLabel: true
+    }), jsxRuntime.jsx(addressFields.AddressFields, {
+      form: form,
+      formatFieldName: fieldName => `originAddress.${fieldName}`,
+      optionalFields: ["addressLine2", ...(requireEmail ? [] : ["email"])]
+    }), !shouldForceDefault && jsxRuntime.jsx(checkboxInput.CheckboxInput, {
+      ariaLabel: "Is Default Warehouse",
+      checkboxLabel: t("manage-warehouses:isDefault"),
+      control: form.control,
+      form: formId,
+      label: "isDefault",
+      name: "isDefault"
+    }), jsxRuntime.jsx(checkboxInput.CheckboxInput, {
+      ariaLabel: "Return To Address Is Different",
+      checkboxLabel: t("manage-warehouses:returnToAddressIsDifferent"),
+      control: form.control,
+      "data-testid": "returnToAddressIsDifferent",
+      form: formId,
+      label: "returnToAddressIsDifferent",
+      name: "returnToAddressIsDifferent",
+      onClick: e => {
+        if (e.currentTarget.checked) {
+          form.reset(formValues => Object.assign(Object.assign({}, formValues), {
+            returnAddress: Object.assign(Object.assign({}, {}), {
+              addressResidentialIndicator: false,
+              companyName: "",
+              countryCode: "US"
+            }),
+            returnToAddressIsDifferent: true
+          }), {
+            keepErrors: true
+          });
+        }
+      }
+    }), form.watch("returnToAddressIsDifferent") && jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: jsxRuntime.jsx(addressFields.AddressFields, {
+        form: form,
+        formatFieldName: fieldName => `returnAddress.${fieldName}`,
+        optionalFields: ["addressLine2"]
+      })
+    }), jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+      justify: "center"
+    }, {
+      children: [onDelete && jsxRuntime.jsx(giger.Button, Object.assign({
+        bold: false,
+        onClick: onDelete,
+        type: "button",
+        variant: giger.ButtonVariant.TEXT
+      }, {
+        children: t("actions.remove")
+      })), jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+        justify: onCancel ? "end" : "center"
+      }, {
+        children: [onCancel && jsxRuntime.jsx(giger.Button, Object.assign({
+          bold: false,
+          onClick: onCancel,
+          type: "button",
+          variant: giger.ButtonVariant.TEXT
+        }, {
+          children: t("actions.cancel")
+        })), jsxRuntime.jsx(submitButton.SubmitButton, Object.assign({
+          control: form.control,
+          "data-testid": "warehouseFormSubmitButton",
+          form: formId,
+          requireDirty: !hasDefaultValues,
+          variant: onCancel ? giger.ButtonVariant.OUTLINED : giger.ButtonVariant.FILLED
+        }, {
+          children: submitButtonTitle
+        }))]
+      }))]
+    }))]
+  });
+  return jsxRuntime.jsx("form", Object.assign({
+    id: formId,
+    onSubmit: formLogger.formLogger.capture(handleSubmit)
+  }, {
+    children: portalRef !== undefined ? jsxRuntime.jsx(portal.Portal, Object.assign({
+      target: portalRef
+    }, {
+      children: formInterface
+    })) : formInterface
+  }));
+};
+
+exports.WarehouseForm = WarehouseForm;

package/cjs/components/grid-controller/cell-formatted-date.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var date = require('../../utilities/date.cjs');
+var giger = require('@shipengine/giger');
+var elementsContextProvider = require('../../elements-provider/elements-context-provider.cjs');
+
+const CellFormattedDate = ({
+  date: date$1,
+  short
+}) => {
+  const {
+    locale: defaultLocale
+  } = elementsContextProvider.useElements();
+  return jsxRuntime.jsx(giger.Typography, Object.assign({
+    component: "span",
+    variant: "body2"
+  }, {
+    children: short ? date.formatByDateAndLocale(new Date(date$1), defaultLocale) : date.formatDate(date$1, defaultLocale)
+  }));
+};
+
+exports.CellFormattedDate = CellFormattedDate;

package/cjs/components/grid-controller/grid-controller.cjs

@@ -0,0 +1,129 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var giger = require('@shipengine/giger');
+var gridController_styles = require('./grid-controller.styles.cjs');
+
+/**
+ * @internal
+ *
+ * # Grid Controller
+ *
+ * - The `<GridController />` component is used to facilitate the display of data in a grid format.
+ *
+ * @see {@link GridProps | The props for the `<GridController />` component}
+ */
+const GridController = ({
+  columns,
+  data,
+  footerContent,
+  onRowClick,
+  isLoading: _isLoading = false,
+  useCheckboxes: _useCheckboxes = false,
+  filters,
+  emptyContent
+}) => {
+  var _a, _b, _c;
+  const [isChecked, setIsChecked] = React.useState((_a = data === null || data === void 0 ? void 0 : data.map(() => false)) !== null && _a !== void 0 ? _a : []);
+  const columnHeaderContents = React.useMemo(() => columns.map(column => column.headerContent), [columns]);
+  const loadingRows = React.useMemo(() => {
+    const items = [];
+    for (let index = 0; index < 5; index++) {
+      items.push(jsxRuntime.jsx(giger.TableRow, Object.assign({
+        css: gridController_styles.styles.skeletonTableRow,
+        withHover: false
+      }, {
+        children: columnHeaderContents.map((item, index) => jsxRuntime.jsx(giger.TableBodyCell, {
+          children: item && jsxRuntime.jsx(giger.Skeleton, {
+            animation: giger.SkeletonAnimation.WAVE,
+            height: 16,
+            variant: giger.SkeletonVariant.RECT,
+            width: 72
+          })
+        }, index))
+      }), `loading-row-${index}`));
+    }
+    return items;
+  }, [columnHeaderContents]);
+  const isAllChecked = React.useMemo(() => isChecked.length > 0 && isChecked.every(check => check), [isChecked]);
+  const isIndeterminate = React.useMemo(() => isChecked.some(check => check), [isChecked]);
+  const toggleCheckbox = React.useCallback(index => {
+    setIsChecked(prior => {
+      const next = [...prior];
+      next[index] = !next[index];
+      return next;
+    });
+  }, []);
+  const toggleAllCheckboxes = React.useCallback(value => {
+    setIsChecked(prior => {
+      const next = [...prior];
+      for (const index of next.entries()) next[index[0]] = value;
+      return next;
+    });
+  }, []);
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: gridController_styles.styles.wrapper
+  }, {
+    children: [filters && jsxRuntime.jsx("div", Object.assign({
+      css: gridController_styles.styles.filters
+    }, {
+      children: filters
+    })), data.length === 0 && emptyContent ? emptyContent : jsxRuntime.jsx(giger.Table, Object.assign({
+      "data-testid": "grid",
+      footer: footerContent && jsxRuntime.jsx(giger.TableFooter, Object.assign({
+        css: gridController_styles.styles.tableFooter
+      }, {
+        children: footerContent
+      })),
+      header: jsxRuntime.jsx(giger.TableHeader, {
+        children: jsxRuntime.jsxs(giger.TableHeaderRow, {
+          children: [_useCheckboxes && jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+            css: gridController_styles.styles.checkboxHeader
+          }, {
+            children: jsxRuntime.jsx(giger.Checkbox, {
+              checked: (_b = isAllChecked || isIndeterminate) !== null && _b !== void 0 ? _b : false,
+              indeterminate: (_c = !isAllChecked && isIndeterminate) !== null && _c !== void 0 ? _c : false,
+              onChange: event => toggleAllCheckboxes(event.target.checked)
+            })
+          })), columnHeaderContents.map((header, index) => jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+            css: gridController_styles.styles.tableHeader
+          }, {
+            children: header
+          }), index))]
+        })
+      }),
+      outerWrapperStyles: gridController_styles.styles.tableWrapper,
+      tableStyles: gridController_styles.styles.table
+    }, {
+      children: jsxRuntime.jsxs(giger.TableBody, {
+        children: [_isLoading && loadingRows, data.map((row, index) => {
+          var _a;
+          const allowOnClick = !!onRowClick && !(row === null || row === void 0 ? void 0 : row.disableOnRowClick);
+          return jsxRuntime.jsxs(giger.TableRow, Object.assign({
+            "data-testid": "grid-row",
+            onClick: allowOnClick ? () => onRowClick(row) : undefined,
+            withHover: !(row === null || row === void 0 ? void 0 : row.disableOnRowClick)
+          }, {
+            children: [_useCheckboxes && jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+              css: row === null || row === void 0 ? void 0 : row.bodyCellStyles
+            }, {
+              children: jsxRuntime.jsx(giger.Checkbox, {
+                checked: (_a = isChecked[index]) !== null && _a !== void 0 ? _a : false,
+                onChange: () => toggleCheckbox(index)
+              })
+            })), columns.filter(column => column.renderCellContent).map((column, index) => jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+              css: row === null || row === void 0 ? void 0 : row.bodyCellStyles
+            }, {
+              children: column.renderCellContent(row)
+            }), index))]
+          }), index);
+        })]
+      })
+    }))]
+  }));
+};
+
+exports.GridController = GridController;

package/cjs/components/grid-controller/grid-controller.styles.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  checkboxHeader: theme => ({
+    width: styles$1.scopeTheme(theme).spacing(6)
+  }),
+  filters: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.white,
+    borderBottom: `1px solid ${styles$1.scopeTheme(theme).palette.gray[200]}`,
+    padding: styles$1.scopeTheme(theme).spacing()
+  }),
+  skeletonTableRow: () => ({
+    height: "68px"
+  }),
+  table: {
+    tableLayout: "initial"
+  },
+  tableFooter: {
+    borderTop: "none",
+    justifyContent: "space-between"
+  },
+  tableHeader: theme => ({
+    background: styles$1.scopeTheme(theme).palette.gray[50]
+  }),
+  tableWrapper: {
+    border: "none"
+  },
+  wrapper: theme => Object.assign({
+    height: "auto",
+    overflow: "hidden"
+  }, styles$1.scopeTheme(theme).getComponentOverride("Table"))
+});
+
+exports.styles = styles;

package/cjs/components/grid-controller/grid-footer.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gridFooter_styles = require('./grid-footer.styles.cjs');
+var loader = require('../loader/loader.cjs');
+
+/**
+ * @internal
+ *
+ * # GridFooter
+ *
+ * - The `<GridFooter />` component that handle grid footer with pagination.
+ *
+ * @see {@link GridFooterProps | The props for the `<GridFooter />` component}
+ */
+const GridFooter = ({
+  page,
+  pages,
+  pageSize,
+  total,
+  showPagination,
+  onPageChange,
+  isLoadingMore,
+  hasMoreUnfetchedResults
+}) => {
+  const firstElementInPage = (page - 1) * pageSize + 1;
+  const lastElementInPage = Math.min(page * pageSize, total);
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: gridFooter_styles.styles.wrapper
+  }, {
+    children: [jsxRuntime.jsxs("div", Object.assign({
+      css: gridFooter_styles.styles.countWrapper
+    }, {
+      children: [firstElementInPage > 0 && jsxRuntime.jsx(giger.Typography, Object.assign({
+        component: "span",
+        variant: "body2"
+      }, {
+        children: jsxRuntime.jsx(reactI18next.Trans, {
+          components: [jsxRuntime.jsx("b", {})],
+          count: total,
+          i18nKey: hasMoreUnfetchedResults && total > 1 ? "common:grid.row-count-plus_other" : "common:grid.row-count",
+          values: {
+            firstIndex: firstElementInPage,
+            lastIndex: lastElementInPage
+          }
+        })
+      })), isLoadingMore && jsxRuntime.jsx("div", {
+        children: jsxRuntime.jsx(loader.Loader, {
+          css: gridFooter_styles.styles.loader,
+          size: giger.SpinnerSize.SIZE_SMALL
+        })
+      })]
+    })), showPagination && jsxRuntime.jsx(giger.Pagination, {
+      currentPage: page,
+      onPageChange: onPageChange,
+      totalPages: pages
+    })]
+  }));
+};
+
+exports.GridFooter = GridFooter;

package/cjs/components/grid-controller/grid-footer.styles.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  countWrapper: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(1)
+  }),
+  loader: theme => ({
+    color: styles$1.scopeTheme(theme).palette.gray.main
+  }),
+  wrapper: {
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "space-between",
+    width: "100%"
+  }
+});
+
+exports.styles = styles;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var gridController = require('./grid-controller.cjs');
+var cellFormattedDate = require('./cell-formatted-date.cjs');
+var gridFooter = require('./grid-footer.cjs');
+var sortableHeader = require('./sortable-header/sortable-header.cjs');
+
+
+
+exports.GridController = gridController.GridController;
+exports.CellFormattedDate = cellFormattedDate.CellFormattedDate;
+exports.GridFooter = gridFooter.GridFooter;
+exports.SortableHeader = sortableHeader.SortableHeader;

package/cjs/components/grid-controller/sortable-header/index.cjs

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

package/cjs/components/grid-controller/sortable-header/sortable-header.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var sortableHeader_styles = require('./sortable-header.styles.cjs');
+
+/**
+ * A reusable component for creating sortable table headers
+ * that support both mouse and keyboard interaction
+ */
+const SortableHeader = ({
+  headerText,
+  sortDirection,
+  onToggleSort
+}) => {
+  const handleKeyDown = e => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onToggleSort();
+    }
+  };
+  return jsxRuntime.jsxs("span", Object.assign({
+    "aria-label": headerText,
+    css: sortableHeader_styles.styles.span,
+    onClick: onToggleSort,
+    onKeyDown: handleKeyDown,
+    role: "button",
+    tabIndex: 0
+  }, {
+    children: [headerText, jsxRuntime.jsx(giger.Icon, {
+      css: sortableHeader_styles.styles.icon,
+      name: sortDirection === "desc" ? gigerTheme.IconNames.SORT_BOTTOM : gigerTheme.IconNames.SORT_TOP,
+      size: giger.IconSize.SIZE_SMALL
+    })]
+  }));
+};
+
+exports.SortableHeader = SortableHeader;

package/cjs/components/grid-controller/sortable-header/sortable-header.styles.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  icon: theme => ({
+    paddingLeft: styles$1.scopeTheme(theme).spacing()
+  }),
+  span: () => ({
+    alignItems: "center",
+    cursor: "pointer",
+    display: "flex"
+  })
+});
+
+exports.styles = styles;