@shipengine/elements 2.20.0 → 2.22.0

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

@@ -0,0 +1,134 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var money = require('../../../utilities/money.cjs');
+var React = require('react');
+var giger = require('@shipengine/giger');
+var reactApi = require('@shipengine/react-api');
+var createFieldController = require('../create-field-controller.cjs');
+var field_styles = require('../field.styles.cjs');
+var moneyInputStyles = require('./money-input-styles.cjs');
+
+const transform = {
+  in: ({
+    amount,
+    currency
+  } = {}, hasFocus) => {
+    var _a;
+    return {
+      amount: (_a = hasFocus ? amount : Number.isNaN(amount !== null && amount !== void 0 ? amount : NaN) ? "" : Number(amount).toFixed(2)) !== null && _a !== void 0 ? _a : "",
+      currency: currency !== null && currency !== void 0 ? currency : reactApi.SE.Currency.USD
+    };
+  },
+  out: ({
+    amount,
+    currency
+  }) => ({
+    amount: Number.isNaN(amount) ? null : amount,
+    currency: currency !== null && currency !== void 0 ? currency : reactApi.SE.Currency.USD
+  })
+};
+const MoneyInputController = createFieldController.createFieldController();
+const MoneyInput = _a => {
+  var {
+      signed,
+      showCurrencySymbol = false
+    } = _a,
+    rest = tslib.__rest(_a, ["signed", "showCurrencySymbol"]);
+  const moneyInputRef = React.useRef(null);
+  // The state in this reducer is inconsequential; it is only used to force a re-render on blur events
+  const [, forceRender] = React.useReducer(x => x + 1, 0);
+  // Track the raw input value while the user is typing
+  const [rawInputValue, setRawInputValue] = React.useState("");
+  // Track whether the input is being edited
+  const [isEditing, setIsEditing] = React.useState(false);
+  return jsxRuntime.jsx(MoneyInputController, Object.assign({}, rest, {
+    children: _a => {
+      var _b;
+      var {
+          onChange,
+          value
+        } = _a,
+        moneyInputProps = tslib.__rest(_a, ["onChange", "value"]);
+      const currencySymbol = money.getCurrencySymbolFromString(value.currency);
+      // Check if focus is on money input OR money input child
+      const hasFocus = document.activeElement === moneyInputRef.current || ((_b = moneyInputRef.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement));
+      // Format and submit the current raw input value
+      const formatAndSubmitValue = () => {
+        // Only process if there's a value to format
+        if (rawInputValue) {
+          const parsedAmount = parseFloat(rawInputValue);
+          onChange(transform.out({
+            amount: parsedAmount,
+            currency: value.currency
+          }));
+        } else {
+          // Handle empty input
+          onChange(transform.out({
+            amount: NaN,
+            currency: value.currency
+          }));
+        }
+        setIsEditing(false);
+      };
+      return jsxRuntime.jsx("div", Object.assign({
+        css: field_styles.styles.overrideStyles
+      }, {
+        children: jsxRuntime.jsx(giger.Input, Object.assign({}, moneyInputProps, {
+          leftContent: showCurrencySymbol && currencySymbol && jsxRuntime.jsx("span", Object.assign({
+            css: moneyInputStyles.styles.leftDecoratorStyles
+          }, {
+            children: currencySymbol
+          })),
+          min: 0,
+          onBlur: () => {
+            formatAndSubmitValue();
+            forceRender();
+          },
+          onChange: event => {
+            const newValue = event.target.value;
+            const fractional = newValue.split(".")[1];
+            if (fractional && fractional.length > 2) {
+              // Prevent the user from entering more than 2 decimal places
+              event.preventDefault();
+            } else {
+              // Store the raw input value
+              setRawInputValue(newValue);
+            }
+          },
+          onFocus: () => {
+            setIsEditing(true);
+          },
+          onKeyDown: e => {
+            if (e.key === "Enter") {
+              // Format the value when the user presses enter
+              formatAndSubmitValue();
+              // This is a bit of a hack. It defers a blur event to the task queue, which itself will force a re-render,
+              // followed by a deferred focus event. This is necessary because we can only format the value when
+              // the field does not have focus.
+              setTimeout(() => {
+                var _a;
+                return (_a = moneyInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+              }, 0);
+              setTimeout(() => {
+                var _a;
+                return (_a = moneyInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+              }, 0);
+            }
+            if (e.key === "-" && !signed) e.preventDefault();
+            if (e.key === "e") e.preventDefault();
+          },
+          ref: moneyInputRef,
+          type: "number",
+          value: isEditing ? rawInputValue : transform.in(value, hasFocus).amount
+        }))
+      }));
+    }
+  }));
+};
+
+exports.MoneyInput = MoneyInput;
+exports.transform = transform;

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

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

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

@@ -0,0 +1,56 @@
+'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 NumberInputController = createFieldController.createFieldController();
+const transform = {
+  in: v => Number.isNaN(v) ? "" : v !== null && v !== void 0 ? v : "",
+  out: (e, isInteger) => {
+    const parsedValue = (isInteger ? parseInt : parseFloat)(e.target.value);
+    return Number.isNaN(parsedValue) ? null : parsedValue;
+  }
+};
+const NumberInput = _a => {
+  var {
+      isInteger,
+      onBlur,
+      signed
+    } = _a,
+    fieldProps = tslib.__rest(_a, ["isInteger", "onBlur", "signed"]);
+  return jsxRuntime.jsx(NumberInputController, Object.assign({}, fieldProps, {
+    children: _a => {
+      var {
+          onChange,
+          onKeyDown,
+          value
+        } = _a,
+        numberInputProps = tslib.__rest(_a, ["onChange", "onKeyDown", "value"]);
+      return jsxRuntime.jsx("div", Object.assign({
+        className: numberInputProps.disabled ? "disabled" : undefined,
+        css: field_styles.styles.overrideStyles
+      }, {
+        children: jsxRuntime.jsx(giger.Input, Object.assign({}, numberInputProps, {
+          min: 0,
+          onBlur: e => onBlur === null || onBlur === void 0 ? void 0 : onBlur(e),
+          onChange: e => onChange(transform.out(e, isInteger)),
+          onKeyDown: e => {
+            if (e.key === "e") e.preventDefault();
+            if (e.key === "-" && !signed) e.preventDefault();
+            if (e.key === "." && isInteger) e.preventDefault();
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+          },
+          type: "number",
+          value: transform.in(value)
+        }))
+      }));
+    }
+  }));
+};
+
+exports.NumberInput = NumberInput;

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

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

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

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var money = require('../../../../../utilities/money.cjs');
+var rates = require('../../../../../utilities/rates.cjs');
+var giger = require('@shipengine/giger');
+var reactApi = require('@shipengine/react-api');
+var costBreakdown_styles = require('./cost-breakdown.styles.cjs');
+
+const CostBreakdown = ({
+  showExtendedData: _showExtendedData = false,
+  shippingAmount,
+  insuranceAmount,
+  confirmationAmount,
+  taxAmount,
+  otherAmount
+}) => {
+  const totalAmount = rates.getTotalRateAmount({
+    confirmationAmount,
+    insuranceAmount,
+    otherAmount,
+    shippingAmount,
+    taxAmount
+  });
+  const priceItems = [];
+  if ((shippingAmount === null || shippingAmount === void 0 ? void 0 : shippingAmount.amount) && totalAmount !== (shippingAmount === null || shippingAmount === void 0 ? void 0 : shippingAmount.amount)) {
+    priceItems.push({
+      label: "Postage",
+      value: shippingAmount
+    });
+  }
+  if (insuranceAmount === null || insuranceAmount === void 0 ? void 0 : insuranceAmount.amount) {
+    priceItems.push({
+      label: "Insurance",
+      value: insuranceAmount
+    });
+  }
+  if (confirmationAmount === null || confirmationAmount === void 0 ? void 0 : confirmationAmount.amount) {
+    priceItems.push({
+      label: "Confirmation",
+      value: confirmationAmount
+    });
+  }
+  if (taxAmount === null || taxAmount === void 0 ? void 0 : taxAmount.amount) {
+    priceItems.push({
+      label: "Tax",
+      value: taxAmount
+    });
+  }
+  if (otherAmount === null || otherAmount === void 0 ? void 0 : otherAmount.amount) {
+    priceItems.push({
+      label: "Other",
+      value: otherAmount
+    });
+  }
+  return jsxRuntime.jsxs("aside", Object.assign({
+    css: costBreakdown_styles.styles.asideStyles,
+    "data-testid": "cost-breakdown"
+  }, {
+    children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+      bold: true,
+      component: "span",
+      css: costBreakdown_styles.styles.priceStyles
+    }, {
+      children: (shippingAmount === null || shippingAmount === void 0 ? void 0 : shippingAmount.amount) && shippingAmount.amount > 0 ? money.formatMoney({
+        amount: totalAmount,
+        currency: (shippingAmount === null || shippingAmount === void 0 ? void 0 : shippingAmount.currency) || reactApi.SE.Currency.USD
+      }) : "--.--"
+    })), _showExtendedData && !!(priceItems === null || priceItems === void 0 ? void 0 : priceItems.length) && jsxRuntime.jsx("table", Object.assign({
+      "data-testid": "cost-breakdown-extended-details"
+    }, {
+      children: jsxRuntime.jsx("tbody", {
+        children: priceItems.map((priceItem, index) => jsxRuntime.jsxs("tr", {
+          children: [jsxRuntime.jsx("td", Object.assign({
+            css: costBreakdown_styles.styles.tableCellLabelStyles
+          }, {
+            children: jsxRuntime.jsx(giger.Typography, {
+              children: priceItem.label
+            })
+          })), jsxRuntime.jsx("td", Object.assign({
+            "data-testid": priceItem.label.toLowerCase()
+          }, {
+            children: jsxRuntime.jsx(giger.Typography, {
+              children: money.formatMoney(priceItem.value)
+            })
+          }))]
+        }, index + priceItem.label + priceItem.value.amount))
+      })
+    }))]
+  }));
+};
+
+exports.CostBreakdown = CostBreakdown;

package/cjs/components/field/rate-select/rate-card/cost-breakdown/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({
+  asideStyles: {
+    display: "flex",
+    flexDirection: "column",
+    textAlign: "right"
+  },
+  priceStyles: theme => ({
+    lineHeight: rateCard_styles.getRateCardFirstLineSize(theme)
+  }),
+  tableCellLabelStyles: theme => ({
+    paddingRight: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  tableStyles: theme => ({
+    borderSpacing: `0 ${styles$1.scopeTheme(theme).spacing(0.5)}px`,
+    marginTop: styles$1.scopeTheme(theme).spacing(0.5)
+  })
+});
+
+exports.styles = styles;

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

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

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

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

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

@@ -0,0 +1,229 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var rates = require('../../../../utilities/rates.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var serviceCard = require('../../../service-card/service-card.cjs');
+var rateCard_styles = require('./rate-card.styles.cjs');
+var servicePoints = require('../../../service-points/service-points.cjs');
+
+const getDeliveryDaysLabel = deliveryDays => {
+  if (!deliveryDays) {
+    return undefined;
+  }
+  if (deliveryDays === 0) {
+    return "Today";
+  }
+  return `${deliveryDays.toString()} ${deliveryDays === 1 ? "day" : "days"}`;
+};
+const getPreferredRateAcknowledgementLabel = message => {
+  const {
+    primaryMessage,
+    link,
+    secondaryMessage
+  } = message;
+  return jsxRuntime.jsxs("span", {
+    children: [primaryMessage, link && jsxRuntime.jsx(giger.Link, Object.assign({
+      href: link.url,
+      isExternal: true,
+      rel: "noreferrer",
+      target: "_blank"
+    }, {
+      children: link.text
+    })), secondaryMessage]
+  });
+};
+const getAcknowledgementLabel = (serviceCode, packageType) => {
+  switch (serviceCode) {
+    case "usps_media_mail":
+      return jsxRuntime.jsxs(reactI18next.Trans, Object.assign({
+        i18nKey: "purchase-label:rates.uspsMediaMailAcknowledgement"
+      }, {
+        children: ["I confirm that this package is compliant with", jsxRuntime.jsx(giger.Link, Object.assign({
+          "aria-label": "Opens in a new tab",
+          href: "https://faq.usps.com/s/article/What-is-Media-Mail-Book-Rate",
+          isExternal: true,
+          rel: "noreferrer",
+          target: "_blank"
+        }, {
+          children: "USPS guidelines for Media Mail®"
+        }))]
+      }));
+    case "usps_first_class_mail":
+      if (packageType === "large_envelope_or_flat") {
+        return jsxRuntime.jsx(reactI18next.Trans, {
+          i18nKey: "purchase-label:rates.uspsFirstClassMailAcknowledgement_leof"
+        });
+      }
+      return;
+    case "dhl_express_worldwide":
+      return jsxRuntime.jsxs(reactI18next.Trans, Object.assign({
+        i18nKey: "purchase-label:rates.dhlExpressTermsAcknowledgement"
+      }, {
+        children: ["To start shipping with DHL, you are confirming that you have agreed to the ", jsxRuntime.jsx(giger.Link, Object.assign({
+          "aria-label": "Opens in a new tab",
+          href: "https://mydhl.express.dhl/us/en/legal/terms-and-conditions.html",
+          isExternal: true,
+          rel: "noreferrer",
+          target: "_blank"
+        }, {
+          children: "terms and conditions"
+        }))]
+      }));
+    default:
+      return null;
+  }
+};
+const RateCard = ({
+  carrierCode,
+  carrierFriendlyName,
+  carrierNickname,
+  className,
+  confirmationAmount,
+  deliveryDays,
+  insuranceAmount,
+  isAcknowledged,
+  messages,
+  onClick,
+  onClickAcknowledgement,
+  onSelectServicePoint,
+  otherAmount,
+  rateId,
+  requiresAcknowledgement,
+  rateAcknowledgementMessage,
+  selected: _selected = false,
+  serviceCode,
+  packageType,
+  serviceType,
+  shippingAmount,
+  taxAmount,
+  showVatFeatures,
+  isLoading: servicePointsLoading,
+  isPreferredRate,
+  selectedRateCost,
+  servicePoints: servicePoints$1,
+  mapViewEnabled,
+  rateDetails
+}) => {
+  /* TODO: ENGINE-7366: TODO Remove showVatSettings flag once this is fully in production */
+  const showRateDetails = showVatFeatures && rateDetails && rateDetails.length > 0;
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "purchase-label", "void-label"]);
+  // determines if there is any action that needs to happen upon clicking an unselected Rate
+  const onClickAvailable = !!onClick && !_selected && rateId;
+  const onRateCardClick = () => {
+    onClickAvailable && onClick(rateId);
+  };
+  const formatMessageForLeof = msg => {
+    if (packageType === "large_envelope_or_flat") {
+      return t(msg, {
+        weight: 13
+      });
+    }
+    return t(msg, {
+      weight: 16
+    });
+  };
+  const rateMessages = messages === null || messages === void 0 ? void 0 : messages.map(msg => {
+    return {
+      message: formatMessageForLeof(msg)
+    };
+  });
+  const rateSavings = React.useMemo(() => {
+    // calculate savings on selected rate
+    const totalCost = rates.getTotalRateAmount({
+      confirmationAmount: confirmationAmount,
+      insuranceAmount: insuranceAmount,
+      otherAmount: otherAmount,
+      shippingAmount: shippingAmount,
+      taxAmount: taxAmount
+    });
+    // only set savings if it's greater than zero
+    if (isPreferredRate && selectedRateCost && selectedRateCost > totalCost) {
+      const savings = selectedRateCost - totalCost;
+      return savings.toFixed(2);
+    } else {
+      return undefined;
+    }
+  }, [confirmationAmount, insuranceAmount, isPreferredRate, otherAmount, selectedRateCost, shippingAmount, taxAmount]);
+  const hasFooterData = !!(rateMessages === null || rateMessages === void 0 ? void 0 : rateMessages.length) || requiresAcknowledgement;
+  const costBreakdownCommonProps = {
+    confirmationAmount,
+    insuranceAmount,
+    otherAmount,
+    shippingAmount,
+    showExtendedData: _selected,
+    taxAmount
+  };
+  return jsxRuntime.jsxs(serviceCard.ServiceCardContainer, Object.assign({
+    className: className,
+    onClick: onRateCardClick,
+    selected: _selected
+  }, {
+    children: [isPreferredRate && jsxRuntime.jsx("section", Object.assign({
+      "aria-label": "Rate Savings",
+      css: rateCard_styles.styles.rateSavingsSection
+    }, {
+      children: rateSavings ? jsxRuntime.jsx("div", Object.assign({
+        css: rateCard_styles.styles.rateSavings
+      }, {
+        children: t("purchase-label:rates.rateSavings", {
+          amount: rateSavings
+        })
+      })) : _selected ? jsxRuntime.jsx("div", Object.assign({
+        css: rateCard_styles.styles.rateSavings
+      }, {
+        children: jsxRuntime.jsx(giger.Icon, {
+          name: gigerTheme.IconNames.CHECK_MARK,
+          size: giger.IconSize.SIZE_SMALL
+        })
+      })) : null
+    })), jsxRuntime.jsx(serviceCard.ServiceCardHeader, {
+      carrierCode: carrierCode,
+      carrierFriendlyName: carrierFriendlyName,
+      costBreakdownProps: costBreakdownCommonProps,
+      rateDetailsProps: showRateDetails ? {
+        rateDetails
+      } : undefined,
+      rightContentCss: Object.assign({}, (isPreferredRate && rateSavings || _selected && isPreferredRate) && {
+        paddingTop: "1rem"
+      }),
+      serviceInfo: {
+        line1: carrierNickname,
+        line2: getDeliveryDaysLabel(deliveryDays),
+        type: serviceType
+      }
+    }), servicePoints$1 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(giger.Divider, {
+        css: rateCard_styles.styles.divider
+      }), jsxRuntime.jsx(servicePoints.ServicePoints, {
+        isLoading: servicePointsLoading,
+        mapViewEnabled: mapViewEnabled,
+        onSelectServicePoint: servicePoint => {
+          onSelectServicePoint === null || onSelectServicePoint === void 0 ? void 0 : onSelectServicePoint(servicePoint);
+        },
+        rateSelected: _selected,
+        servicePoints: servicePoints$1
+      })]
+    }), _selected && hasFooterData && jsxRuntime.jsx(serviceCard.ServiceCardFooter, Object.assign({
+      messages: rateMessages
+    }, {
+      children: requiresAcknowledgement && onClickAcknowledgement && jsxRuntime.jsx(giger.Checkbox, {
+        "aria-required": true,
+        checked: isAcknowledged,
+        css: rateCard_styles.styles.acknowledgment,
+        "data-testid": "rate-acknowledgement",
+        label: rateAcknowledgementMessage ? getPreferredRateAcknowledgementLabel(rateAcknowledgementMessage) : getAcknowledgementLabel(serviceCode, packageType),
+        onChange: e => onClickAcknowledgement(e.target.checked)
+      })
+    }))]
+  }));
+};
+
+exports.RateCard = RateCard;

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../utilities/styles.cjs');
+
+const getRateCardFirstLineSize = theme => `${styles$1.scopeTheme(theme).spacing(3.25)}px`;
+const styles = styles$1.createStyles({
+  acknowledgment: theme => ({
+    alignItems: "center",
+    color: styles$1.scopeTheme(theme).palette.gray.main,
+    display: "flex",
+    paddingTop: styles$1.scopeTheme(theme).spacing(1.5)
+  }),
+  divider: theme => ({
+    borderColor: styles$1.scopeTheme(theme).palette.primary.main,
+    margin: "0 auto",
+    opacity: 0.3,
+    width: `calc(100% - ${styles$1.scopeTheme(theme).spacing(4)}px)`
+  }),
+  rateSavings: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.primary.main,
+    borderRadius: "1px 5px 1px",
+    color: styles$1.scopeTheme(theme).palette.white,
+    fontSize: styles$1.scopeTheme(theme).typography.fontSize.S,
+    padding: styles$1.scopeTheme(theme).spacing(0.5),
+    paddingLeft: styles$1.scopeTheme(theme).spacing(1),
+    paddingRight: styles$1.scopeTheme(theme).spacing(1)
+  }),
+  rateSavingsSection: () => ({
+    position: "absolute",
+    right: 0,
+    top: 0
+  })
+});
+
+exports.getRateCardFirstLineSize = getRateCardFirstLineSize;
+exports.styles = styles;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var rateDetailCostBreakdown = require('./rate-detail-cost-breakdown.cjs');
+
+
+
+exports.RateDetailCostBreakdown = rateDetailCostBreakdown.RateDetailCostBreakdown;