@shipengine/elements 2.20.0 → 2.21.0

package/cjs/components/field/rate-select/rate-card/rate-detail-cost-breakdown/rate-detail-cost-breakdown.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useToggle = require('../../../../../hooks/use-toggle.cjs');
+var money = require('../../../../../utilities/money.cjs');
+var rateDetails = require('../../../../../utilities/rate-details.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var reactApi = require('@shipengine/react-api');
+var rateDetailCostBreakdown_styles = require('./rate-detail-cost-breakdown.styles.cjs');
+
+const RateDetailCostBreakdown = ({
+  rateDetails: rateDetails$1
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const [isExpanded, toggleIsExpanded] = useToggle.useToggle(false);
+  const carrierRates = React.useMemo(() => rateDetails$1.filter(rateDetail => rateDetail.billingSource === "Carrier"), [rateDetails$1]);
+  // Aggregate rate items: sum all rate items with the same rate_detail_type
+  const aggregatedRateDetailItems = React.useMemo(() => rateDetails.aggregateRateDetailItems(carrierRates), [carrierRates]);
+  // Calculate the total, subtotal, and if there is a tax
+  const breakdown = React.useMemo(() => rateDetails.calculateRateDetailBreakdown(aggregatedRateDetailItems), [aggregatedRateDetailItems]);
+  const rateItems = React.useMemo(() => [...breakdown.items, ...breakdown.tax], [breakdown]);
+  return jsxRuntime.jsxs("aside", {
+    children: [jsxRuntime.jsxs(giger.Next.Link, Object.assign({
+      css: rateDetailCostBreakdown_styles.styles.breakdownCollapsible,
+      onClick: event => {
+        event.preventDefault();
+        toggleIsExpanded();
+      },
+      onKeyDown: event => {
+        if (event.key === "Enter") {
+          toggleIsExpanded();
+        }
+      },
+      role: "button",
+      tabIndex: 0
+    }, {
+      children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+        bold: true
+      }, {
+        children: money.formatMoney({
+          amount: breakdown.total,
+          currency: rateDetails$1[0].amount.currency || reactApi.SE.Currency.USD
+        })
+      })), jsxRuntime.jsx(giger.Icon, {
+        name: isExpanded ? gigerTheme.IconNames.CHEVRON_TOP : gigerTheme.IconNames.CHEVRON_BOTTOM
+      })]
+    })), isExpanded && jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: rateItems.map(({
+        rateDetailType,
+        amount,
+        currency
+      }) => jsxRuntime.jsx("div", Object.assign({
+        css: rateDetailCostBreakdown_styles.styles.rateDetail
+      }, {
+        children: jsxRuntime.jsx(giger.Typography, {
+          children: `${t(`rate-details:concepts:${rateDetailType}`)}: ${money.formatMoney({
+            amount: amount,
+            currency: currency
+          })}`
+        })
+      }), rateDetailType))
+    })]
+  });
+};
+
+exports.RateDetailCostBreakdown = RateDetailCostBreakdown;

package/cjs/components/field/rate-select/rate-card/rate-detail-cost-breakdown/rate-detail-cost-breakdown.styles.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../../utilities/styles.cjs');
+var rateCard_styles = require('../rate-card.styles.cjs');
+
+const styles = styles$1.createStyles({
+  breakdownCollapsible: theme => ({
+    alignItems: "center",
+    color: styles$1.scopeTheme(theme).palette.gray.dark,
+    display: "flex",
+    fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal,
+    justifyContent: "flex-end"
+  }),
+  priceStyles: theme => ({
+    lineHeight: rateCard_styles.getRateCardFirstLineSize(theme)
+  }),
+  rateDetail: () => ({
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "flex-end"
+  })
+});
+
+exports.styles = styles;

package/cjs/components/field/rate-select/rate-select.cjs

@@ -0,0 +1,82 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var rates = require('../../../utilities/rates.cjs');
+var React = require('react');
+var createFieldController = require('../create-field-controller.cjs');
+var rateSelect_styles = require('./rate-select.styles.cjs');
+var rateCard = require('./rate-card/rate-card.cjs');
+
+const RateSelectController = createFieldController.createFieldController({
+  inputOnly: true
+});
+const optionWithEnabledData = option => {
+  /* TODO: the carrier nickname should be enabled / disabled based on a feature flag (LMNT-418) */
+  const optionWithEnabledData = tslib.__rest(option, ["carrierNickname"]);
+  return optionWithEnabledData;
+};
+const RateSelect = _a => {
+  var {
+      nicknameFeature,
+      preferredServiceCodes,
+      onClick,
+      onSelectServicePoint,
+      isLoading,
+      mapViewEnabled,
+      showVatFeatures,
+      showHiddenRates,
+      setShowHiddenRates,
+      rateFormScrollToRef
+    } = _a,
+    fieldProps = tslib.__rest(_a, ["nicknameFeature", "preferredServiceCodes", "onClick", "onSelectServicePoint", "isLoading", "mapViewEnabled", "showVatFeatures", "showHiddenRates", "setShowHiddenRates", "rateFormScrollToRef"]);
+  // The calculated cost of the selected rate
+  const [selectedRateCost, setSelectedRateCost] = React.useState();
+  return jsxRuntime.jsx(RateSelectController, Object.assign({}, fieldProps, {
+    children: _a => {
+      var {
+          options
+        } = _a,
+        field = tslib.__rest(_a, ["options"]);
+      return jsxRuntime.jsx("div", Object.assign({
+        "aria-label": "Rate Selection",
+        role: "radiogroup"
+      }, {
+        children: options === null || options === void 0 ? void 0 : options.map(option => {
+          return react.createElement(rateCard.RateCard, Object.assign({
+            mapViewEnabled: mapViewEnabled
+          }, optionWithEnabledData(option), {
+            carrierNickname: nicknameFeature ? option.carrierNickname || `ID: ${option.carrierId}` : undefined,
+            css: rateSelect_styles.styles.rateCardOptionStyles,
+            isAcknowledged: field.value.isAcknowledged,
+            isLoading: isLoading,
+            isPreferredRate: preferredServiceCodes && preferredServiceCodes.includes(option.serviceCode),
+            key: option.rateId,
+            onClick: rateId => {
+              onClick === null || onClick === void 0 ? void 0 : onClick(rateId);
+              field.onChange({
+                isAcknowledged: !option.requiresAcknowledgement,
+                rateId
+              });
+              setSelectedRateCost(rates.getTotalRateAmount(option));
+            },
+            onClickAcknowledgement: isAcknowledged => field.onChange(Object.assign(Object.assign({}, field.value), {
+              isAcknowledged
+            })),
+            onSelectServicePoint: onSelectServicePoint,
+            rateDetails: option.rateDetails,
+            selected: option.rateId === field.value.rateId,
+            selectedRateCost: selectedRateCost,
+            servicePoints: option.servicePoints,
+            showVatFeatures: showVatFeatures
+          }));
+        })
+      }));
+    }
+  }));
+};
+
+exports.RateSelect = RateSelect;

package/cjs/components/field/rate-select/rate-select.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({
+  rateCardOptionStyles: theme => ({
+    ":not(:last-of-type)": {
+      marginBottom: styles$1.scopeTheme(theme).spacing(2)
+    }
+  })
+});
+
+exports.styles = styles;

package/cjs/components/field/select/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var select = require('./select.cjs');
+var selectWithCategories = require('./select-with-categories.cjs');
+
+
+
+exports.Select = select.Select;
+exports.SelectWithCategories = selectWithCategories.SelectWithCategories;

package/cjs/components/field/select/select-with-categories.cjs

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var isEqual = require('lodash/isEqual.js');
+var giger = require('@shipengine/giger');
+var createFieldController = require('../create-field-controller.cjs');
+var field_styles = require('../field.styles.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+
+const SelectController = createFieldController.createFieldController();
+const SelectWithCategories = _a => {
+  var {
+      onCategoryChange,
+      onChange: customOnChange,
+      options,
+      placeholder,
+      isInvalid
+    } = _a,
+    props = tslib.__rest(_a, ["onCategoryChange", "onChange", "options", "placeholder", "isInvalid"]);
+  const isValidJSON = str => {
+    try {
+      JSON.parse(str);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  };
+  const flatOptions = options === null || options === void 0 ? void 0 : options.flatMap(option => option.options);
+  return jsxRuntime.jsx(SelectController, Object.assign({}, props, {
+    children: _a => {
+      var {
+          onChange
+        } = _a,
+        fieldProps = tslib.__rest(_a, ["onChange"]);
+      return jsxRuntime.jsx("div", Object.assign({
+        css: field_styles.styles.overrideStyles
+      }, {
+        children: jsxRuntime.jsx(giger.Select, Object.assign({}, fieldProps, {
+          isInvalid: isInvalid,
+          onChange: (_name, value) => {
+            var _a;
+            onCategoryChange === null || onCategoryChange === void 0 ? void 0 : onCategoryChange((_a = value === null || value === void 0 ? void 0 : value.group) === null || _a === void 0 ? void 0 : _a.value);
+            // Some of the Shipment form values are returned as objects. See use-package-options.ts
+            if (value && isValidJSON(value.value)) {
+              customOnChange === null || customOnChange === void 0 ? void 0 : customOnChange(JSON.parse(value.value));
+              onChange(JSON.parse(value.value));
+            } else {
+              customOnChange === null || customOnChange === void 0 ? void 0 : customOnChange(value === null || value === void 0 ? void 0 : value.value);
+              onChange(value === null || value === void 0 ? void 0 : value.value);
+            }
+          },
+          showLabel: !!props.nativeLabel,
+          value: flatOptions === null || flatOptions === void 0 ? void 0 : flatOptions.find(option => isEqual__default["default"](option.value, fieldProps.value))
+        }, {
+          children: options === null || options === void 0 ? void 0 : options.map((category, idx) => {
+            // SelectCategory
+            const categoryOptions = category.options;
+            return (
+              // only render the category if it has options
+              categoryOptions.length > 0 && jsxRuntime.jsx(giger.OptionGroup, Object.assign({
+                label: category.label,
+                value: category.value
+              }, {
+                children: categoryOptions.map(o => {
+                  // Force option values to string so Giger can treat them as unique
+                  const stringifiedValue = typeof o.value === "string" ? o.value : JSON.stringify(o.value);
+                  return jsxRuntime.jsxs(giger.Option, Object.assign({
+                    selected: isEqual__default["default"](o.value, fieldProps.value),
+                    showTick: true,
+                    value: stringifiedValue
+                  }, {
+                    children: [o.subLabel ? jsxRuntime.jsxs("div", {
+                      children: [o.label, jsxRuntime.jsx("br", {}), jsxRuntime.jsx("div", Object.assign({
+                        css: {
+                          fontWeight: "normal"
+                        }
+                      }, {
+                        children: o.subLabel
+                      }))]
+                    }) : o.label, o.rightContent]
+                  }), stringifiedValue);
+                })
+              }), `${category.label}-${idx}`)
+            );
+          })
+        }))
+      }));
+    }
+  }));
+};
+
+exports.SelectWithCategories = SelectWithCategories;

package/cjs/components/field/select/select.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var isEqual = require('lodash/isEqual.js');
+var giger = require('@shipengine/giger');
+var createFieldController = require('../create-field-controller.cjs');
+var field_styles = require('../field.styles.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+
+const SelectController = createFieldController.createFieldController();
+const Select = _a => {
+  var {
+      onSelectChange,
+      options,
+      placeholder
+    } = _a,
+    props = tslib.__rest(_a, ["onSelectChange", "options", "placeholder"]);
+  return jsxRuntime.jsx(SelectController, Object.assign({}, props, {
+    children: _a => {
+      var {
+          onChange
+        } = _a,
+        fieldProps = tslib.__rest(_a, ["onChange"]);
+      return jsxRuntime.jsx("div", Object.assign({
+        css: field_styles.styles.overrideStyles
+      }, {
+        children: jsxRuntime.jsx(giger.Select, Object.assign({}, fieldProps, {
+          onChange: (_name, value) => {
+            onChange(value === null || value === void 0 ? void 0 : value.value);
+            onSelectChange === null || onSelectChange === void 0 ? void 0 : onSelectChange(value === null || value === void 0 ? void 0 : value.value);
+          },
+          placeholder: placeholder,
+          showLabel: !!props.nativeLabel,
+          value: options === null || options === void 0 ? void 0 : options.find(option => isEqual__default["default"](option.value, fieldProps.value))
+        }, {
+          children: options === null || options === void 0 ? void 0 : options.map((option, idx) => {
+            return jsxRuntime.jsxs(giger.Option, Object.assign({
+              selected: isEqual__default["default"](option.value, fieldProps.value),
+              showTick: !option.rightContent,
+              value: option.value
+            }, {
+              children: [option.subLabel ? jsxRuntime.jsxs("div", {
+                children: [option.label, jsxRuntime.jsx("br", {}), jsxRuntime.jsx("div", Object.assign({
+                  css: {
+                    fontWeight: "normal"
+                  }
+                }, {
+                  children: option.subLabel
+                }))]
+              }) : option.label, option.rightContent]
+            }), `${option.label}-${idx}`);
+          })
+        }))
+      }));
+    }
+  }));
+};
+
+exports.Select = Select;

package/cjs/components/field/select-auto-complete/index.cjs

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

package/cjs/components/field/select-auto-complete/select-auto-complete.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var createFieldController = require('../create-field-controller.cjs');
+var field_styles = require('../field.styles.cjs');
+
+const SelectAutoCompleteController = createFieldController.createFieldController();
+const SelectAutoComplete = _a => {
+  var {
+      onChange: customOnChange
+    } = _a,
+    fieldProps = tslib.__rest(_a, ["onChange"]);
+  return jsxRuntime.jsx(SelectAutoCompleteController, Object.assign({}, fieldProps, {
+    children: _a => {
+      var {
+          options,
+          value,
+          onChange
+        } = _a,
+        fieldProps = tslib.__rest(_a, ["options", "value", "onChange"]);
+      const buildValue = val => {
+        if (typeof val !== "string") return;
+        // currently options CAN be empty if the address is not from the US - in which case we want to display the value in the address as is
+        const option = options.length > 0 ? options.find(o => o.value === val) : {
+          label: val,
+          value: val
+        };
+        return option;
+      };
+      return jsxRuntime.jsx("div", Object.assign({
+        css: field_styles.styles.overrideStyles
+      }, {
+        children: jsxRuntime.jsx(giger.SelectAutocomplete, Object.assign({}, fieldProps, {
+          onChange: (_name, nextValue) => {
+            if (nextValue) {
+              customOnChange === null || customOnChange === void 0 ? void 0 : customOnChange(nextValue.value);
+              onChange(nextValue.value);
+            }
+          },
+          options: options,
+          value: buildValue(value)
+        }))
+      }));
+    }
+  }));
+};
+
+exports.SelectAutoComplete = SelectAutoComplete;

package/cjs/components/field/submit-button/index.cjs

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

package/cjs/components/field/submit-button/submit-button.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var giger = require('@shipengine/giger');
+
+const SubmitButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function SubmitButton(_a, forwardedRef) {
+  var {
+      alwaysRequireValidity,
+      children,
+      control,
+      disabled,
+      isLoading,
+      requireDirty
+    } = _a,
+    props = tslib.__rest(_a, ["alwaysRequireValidity", "children", "control", "disabled", "isLoading", "requireDirty"]);
+  const {
+    isDirty,
+    isValid,
+    isSubmitted,
+    isSubmitting
+  } = reactHookForm.useFormState({
+    control
+  });
+  return jsxRuntime.jsx(giger.Button, Object.assign({
+    bold: false,
+    disabled: disabled || !isDirty && requireDirty || !isValid && (alwaysRequireValidity || isSubmitted) || isSubmitting,
+    formNoValidate // Bypass all browser validations on form inputs
+    : true,
+    isLoading: isLoading || isSubmitting,
+    ref: forwardedRef,
+    type: "submit"
+  }, props, {
+    children: children
+  }));
+}));
+SubmitButton.displayName = "SubmitButton";
+
+exports.SubmitButton = SubmitButton;

package/cjs/components/field/switch/index.cjs

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

package/cjs/components/field/switch/switch.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var styles = require('../../../utilities/styles.cjs');
+var React = require('react');
+var giger = require('@shipengine/giger');
+
+const Switch = _a => {
+  var {
+      defaultChecked = false,
+      children,
+      shouldUnmount,
+      label = "",
+      onChange,
+      value
+    } = _a,
+    props = tslib.__rest(_a, ["defaultChecked", "children", "shouldUnmount", "label", "onChange", "value"]);
+  const [isChecked, setIsChecked] = React.useState(defaultChecked);
+  React.useEffect(() => {
+    setIsChecked(!!value);
+  }, [value]);
+  const handleOnChange = ({
+    target: {
+      checked
+    }
+  }) => {
+    setIsChecked(checked);
+  };
+  return jsxRuntime.jsxs("div", {
+    children: [jsxRuntime.jsx(giger.Switch, Object.assign({}, props, {
+      css: theme => ({
+        marginBottom: styles.scopeTheme(theme).spacing(2)
+      }),
+      isChecked: isChecked,
+      onChange: e => {
+        handleOnChange(e);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+      },
+      value: true
+    }, {
+      children: label
+    })), children && (!shouldUnmount || isChecked) && jsxRuntime.jsx("div", {
+      children: children
+    })]
+  });
+};
+
+exports.Switch = Switch;

package/cjs/components/field/text-area/index.cjs

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

package/cjs/components/field/text-area/text-area.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var createFieldController = require('../create-field-controller.cjs');
+
+const TextAreaController = createFieldController.createFieldController();
+const transform = {
+  in: v => v !== null && v !== void 0 ? v : "",
+  out: event => event.target.value === "" ? null : event.target.value
+};
+const TextArea = fieldProps => jsxRuntime.jsx(TextAreaController, Object.assign({}, fieldProps, {
+  children: _a => {
+    var {
+        onChange,
+        value
+      } = _a,
+      nativeProps = tslib.__rest(_a, ["onChange", "value"]);
+    return jsxRuntime.jsx(giger.Textarea, Object.assign({}, nativeProps, {
+      onChange: e => onChange(transform.out(e)),
+      value: transform.in(value)
+    }));
+  }
+}));
+
+exports.TextArea = TextArea;

package/cjs/components/field/text-input/index.cjs

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

package/cjs/components/field/text-input/text-input.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var createFieldController = require('../create-field-controller.cjs');
+var field_styles = require('../field.styles.cjs');
+
+const TextInputController = createFieldController.createFieldController();
+const transform = {
+  in: v => v !== null && v !== void 0 ? v : "",
+  out: event => event.target.value === "" ? null : event.target.value
+};
+const TextInput = fieldProps => jsxRuntime.jsx(TextInputController, Object.assign({}, fieldProps, {
+  children: _a => {
+    var {
+        onChange,
+        value
+      } = _a,
+      textInputProps = tslib.__rest(_a, ["onChange", "value"]);
+    return jsxRuntime.jsx("div", Object.assign({
+      css: field_styles.styles.overrideStyles
+    }, {
+      children: jsxRuntime.jsx(giger.Input, Object.assign({}, textInputProps, {
+        onChange: e => onChange(transform.out(e)),
+        type: "text",
+        value: transform.in(value)
+      }))
+    }));
+  }
+}));
+
+exports.TextInput = TextInput;