@shipengine/elements 2.20.0 → 2.21.0

package/cjs/components/grid-filters/components/shipment-id-filter/shipment-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 shipmentIdFilterShema = require('./shipment-id-filter-shema.cjs');
+var shipmentIdFilter_styles = require('./shipment-id-filter.styles.cjs');
+var textInput = require('../../../field/text-input/text-input.cjs');
+var submitButton = require('../../../field/submit-button/submit-button.cjs');
+
+/**
+ * @internal
+ *
+ * # ShipmentIdFilter
+ *
+ * - The `<ShipmentIdFilter />` component handle shipment id filter used in Shipments Grid.
+ *
+ * @see {@link ShipmentIdFilterProps | The props for the `<ShipmentIdFilter />` component}
+ */
+const ShipmentIdFilter = ({
+  filters,
+  onFiltersUpdated
+}) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    t
+  } = reactI18next.useTranslation(["common"]);
+  const [showShipmentIdFilter, toggleShipmentIdFilter] = reactUse.useToggle(false);
+  const buttonRef = React.useRef(null);
+  const form = reactHookForm.useForm({
+    resolver: validation.validationResolver(shipmentIdFilterShema.shipmentIdFormSchema)
+  });
+  const handleSubmit = form.handleSubmit(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    toggleShipmentIdFilter();
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      shipmentId: Object.assign(Object.assign({}, filters.shipmentId), {
+        value: values.shipmentId
+      })
+    }));
+  }));
+  const onClearShipmentId = () => {
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      shipmentId: Object.assign(Object.assign({}, filters.shipmentId), {
+        value: ""
+      })
+    }));
+    showShipmentIdFilter && toggleShipmentIdFilter();
+  };
+  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({
+          css: shipmentIdFilter_styles.styles.mainButton,
+          onClick: toggleShipmentIdFilter,
+          ref: buttonRef,
+          variant: giger.ButtonVariant.TEXT
+        }, {
+          children: filters.shipmentId.value ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx("span", {
+              children: jsxRuntime.jsx(reactI18next.Trans, {
+                i18nKey: t("common:grid.shipmentIdFilter", {
+                  name: (_b = (_a = filters === null || filters === void 0 ? void 0 : filters.shipmentId) === null || _a === void 0 ? void 0 : _a.nickname) !== null && _b !== void 0 ? _b : t("common:grid.shipmentId")
+                }),
+                values: {
+                  shipmentId: filters.shipmentId.value
+                }
+              })
+            }), jsxRuntime.jsx(giger.Icon, {
+              "aria-label": t("common:grid.clear"),
+              name: gigerTheme.IconNames.CLOSE,
+              onClick: e => {
+                e.stopPropagation();
+                onClearShipmentId();
+              },
+              onKeyDown: e => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.stopPropagation();
+                  onClearShipmentId();
+                }
+              },
+              role: "button",
+              size: giger.IconSize.SIZE_SMALL,
+              tabIndex: 0
+            })]
+          }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx("span", {
+              children: (_c = filters.shipmentId.nickname) !== null && _c !== void 0 ? _c : t("common:grid.shipmentId")
+            }), jsxRuntime.jsx(giger.Icon, {
+              name: showShipmentIdFilter ? gigerTheme.IconNames.CARET_TOP : gigerTheme.IconNames.CARET_BOTTOM,
+              size: giger.IconSize.SIZE_SMALL
+            })]
+          })
+        })), jsxRuntime.jsx(giger.Popover, Object.assign({
+          isOpen: showShipmentIdFilter,
+          onClickAway: toggleShipmentIdFilter,
+          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: (_d = filters.shipmentId.value) !== null && _d !== void 0 ? _d : "",
+              hint: t("common:grid.shipmentIdHint"),
+              label: (_e = filters.shipmentId.nickname) !== null && _e !== void 0 ? _e : t("common:grid.shipmentId"),
+              labelPosition: "vertical",
+              labelWeight: "bold",
+              labelWidth: "100%",
+              name: "shipmentId",
+              placeholder: t("common:grid.search")
+            }), jsxRuntime.jsxs("div", Object.assign({
+              css: shipmentIdFilter_styles.styles.popoverButtons
+            }, {
+              children: [jsxRuntime.jsx(giger.Button, Object.assign({
+                disabled: !form.watch("shipmentId") && !filters.shipmentId.value,
+                onClick: onClearShipmentId,
+                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.ShipmentIdFilter = ShipmentIdFilter;

package/cjs/components/grid-filters/components/shipment-id-filter/shipment-id-filter.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({
+  mainButton: theme => ({
+    marginRight: styles$1.scopeTheme(theme).spacing()
+  }),
+  popoverButtons: theme => ({
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(),
+    justifyContent: "flex-end"
+  })
+});
+
+exports.styles = styles;

package/cjs/components/grid-filters/components/tracking-status-filter/index.cjs

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

package/cjs/components/grid-filters/components/tracking-status-filter/tracking-status-filter-schema.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var zod = require('zod');
+
+const trackingStatusFormSchema = zod.z.object({
+  delivered: zod.z.boolean().optional(),
+  error: zod.z.boolean().optional(),
+  in_transit: zod.z.boolean().optional(),
+  unknown: zod.z.boolean().optional(),
+  voided: zod.z.boolean().optional()
+});
+
+exports.trackingStatusFormSchema = trackingStatusFormSchema;

package/cjs/components/grid-filters/components/tracking-status-filter/tracking-status-filter.cjs

@@ -0,0 +1,222 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+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 trackingStatusFilterSchema = require('./tracking-status-filter-schema.cjs');
+var trackingStatusFilter_styles = require('./tracking-status-filter.styles.cjs');
+var checkboxInput = require('../../../field/checkbox-input/checkbox-input.cjs');
+var spacer = require('../../../spacer/spacer.cjs');
+
+/**
+ * @internal
+ *
+ * # TrackingStatusFilter
+ *
+ * - The `<TrackingStatusFilter />` component handles the tracking status filter used in Labels Grid.
+ *
+ * @see {@link TrackingStatusFilterProps | The props for the `<TrackingStatusFilter />` component}
+ */
+const TrackingStatusFilter = ({
+  filters,
+  onFiltersUpdated
+}) => {
+  var _a;
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const [showTrackingStatusFilter, toggleTrackingStatusFilter] = reactUse.useToggle(false);
+  const [buttonText, setButtonText] = React.useState(t("list-labels:headers.trackingStatus"));
+  const buttonRef = React.useRef(null);
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      delivered: false,
+      error: false,
+      in_transit: false,
+      unknown: false,
+      voided: false
+    },
+    resolver: validation.validationResolver(trackingStatusFilterSchema.trackingStatusFormSchema)
+  });
+  const determineButtonText = React.useCallback(filters => {
+    if (filters.length === 0) {
+      return t("list-labels:headers.trackingStatus");
+    } else if (filters.length === 1) {
+      return t("common:grid.filteredTrackingStatus", {
+        filter: t(`list-labels:trackingStatus.${filters[0]}`)
+      });
+    } else {
+      return t("common:grid.filteredTrackingStatus", {
+        filter: t(`list-labels:trackingStatus.${filters[0]}`)
+      }) + t("common:grid.more", {
+        count: filters.length - 1
+      });
+    }
+  }, [t]);
+  const getUpdatedKeys = React.useCallback(updatedFields => {
+    return Object.keys(updatedFields).filter(key => updatedFields[key]);
+  }, []);
+  React.useEffect(() => {
+    var _a;
+    // keep form in sync with filters
+    if ((_a = filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.value) {
+      const updatedFields = {
+        // The order of these keys are set by the order they are displayed in the UI.
+        // We use this order to determine the order of the filters in the button text.
+        in_transit: filters.trackingStatus.value.includes("in_transit"),
+        // eslint-disable-next-line sort-keys-fix/sort-keys-fix
+        delivered: filters.trackingStatus.value.includes("delivered"),
+        voided: filters.trackingStatus.value.includes("voided"),
+        // eslint-disable-next-line sort-keys-fix/sort-keys-fix
+        error: filters.trackingStatus.value.includes("error"),
+        unknown: filters.trackingStatus.value.includes("unknown")
+      };
+      form.reset(updatedFields);
+      setButtonText(determineButtonText(getUpdatedKeys(updatedFields)));
+    }
+  }, [determineButtonText, (_a = filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.value, form, getUpdatedKeys, t]);
+  const onClearFilters = React.useCallback(() => {
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      trackingStatus: Object.assign(Object.assign({}, filters.trackingStatus), {
+        enabled: true,
+        value: []
+      })
+    }));
+    showTrackingStatusFilter && toggleTrackingStatusFilter();
+  }, [filters, onFiltersUpdated, showTrackingStatusFilter, toggleTrackingStatusFilter]);
+  const handleCheckboxChange = (name, checked) => {
+    form.setValue(name, checked);
+    const updatedFields = form.getValues();
+    // get the keys of the fields that are checked
+    const updatedKeys = getUpdatedKeys(updatedFields);
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      trackingStatus: Object.assign(Object.assign({}, filters.trackingStatus), {
+        enabled: true,
+        value: updatedKeys
+      })
+    }));
+  };
+  const watchedValues = form.watch();
+  const isAnyCheckboxChecked = React.useMemo(() => {
+    return Object.keys(watchedValues).some(key => watchedValues[key]);
+  }, [watchedValues]);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(giger.Button, Object.assign({
+      onClick: toggleTrackingStatusFilter,
+      ref: buttonRef,
+      variant: giger.ButtonVariant.TEXT
+    }, {
+      children: [jsxRuntime.jsx("span", {
+        children: buttonText
+      }), isAnyCheckboxChecked ?
+      // Show Close Icon
+      jsxRuntime.jsx(giger.Icon, {
+        "aria-label": t("common:grid.clear"),
+        name: gigerTheme.IconNames.CLOSE,
+        onClick: e => {
+          e.stopPropagation();
+          onClearFilters();
+        },
+        onKeyDown: e => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.stopPropagation();
+            onClearFilters();
+          }
+        },
+        role: "button",
+        size: giger.IconSize.SIZE_SMALL,
+        tabIndex: 0
+      }) : showTrackingStatusFilter ? jsxRuntime.jsx(giger.Icon, {
+        name: gigerTheme.IconNames.CARET_TOP,
+        size: giger.IconSize.SIZE_SMALL
+      }) : jsxRuntime.jsx(giger.Icon, {
+        name: gigerTheme.IconNames.CARET_BOTTOM,
+        size: giger.IconSize.SIZE_SMALL
+      })]
+    })), jsxRuntime.jsx(giger.Popover, Object.assign({
+      isOpen: showTrackingStatusFilter,
+      onClickAway: toggleTrackingStatusFilter,
+      reference: buttonRef.current
+    }, {
+      children: jsxRuntime.jsxs("form", {
+        children: [jsxRuntime.jsxs("div", Object.assign({
+          css: trackingStatusFilter_styles.styles.checkboxInputParent
+        }, {
+          children: [jsxRuntime.jsx(checkboxInput.CheckboxInput, {
+            ariaLabel: "In Transit tracking Status Filter",
+            checkboxLabel: t("list-labels:trackingStatus.in_transit"),
+            control: form.control,
+            label: "in_transit",
+            name: "in_transit",
+            onClick: e => {
+              handleCheckboxChange("in_transit", e.currentTarget.checked);
+            }
+          }), jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 2
+          }), jsxRuntime.jsx(checkboxInput.CheckboxInput, {
+            ariaLabel: "Delivered tracking Status Filter",
+            checkboxLabel: t("list-labels:trackingStatus.delivered"),
+            control: form.control,
+            label: "delivered",
+            name: "delivered",
+            onClick: e => {
+              handleCheckboxChange("delivered", e.currentTarget.checked);
+            }
+          }), jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 2
+          }), jsxRuntime.jsx(checkboxInput.CheckboxInput, {
+            ariaLabel: "Voided tracking Status Filter",
+            checkboxLabel: t("list-labels:trackingStatus.voided"),
+            control: form.control,
+            label: "voided",
+            name: "voided",
+            onClick: e => {
+              handleCheckboxChange("voided", e.currentTarget.checked);
+            }
+          }), jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 2
+          }), jsxRuntime.jsx(checkboxInput.CheckboxInput, {
+            ariaLabel: "Error tracking Status Filter",
+            checkboxLabel: t("list-labels:trackingStatus.error"),
+            control: form.control,
+            label: "error",
+            name: "error",
+            onClick: e => {
+              handleCheckboxChange("error", e.currentTarget.checked);
+            }
+          }), jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 2
+          }), jsxRuntime.jsx(checkboxInput.CheckboxInput, {
+            ariaLabel: "Unknown tracking Status Filter",
+            checkboxLabel: t("list-labels:trackingStatus.unknown"),
+            control: form.control,
+            label: "unknown",
+            name: "unknown",
+            onClick: e => {
+              handleCheckboxChange("unknown", e.currentTarget.checked);
+            }
+          })]
+        })), isAnyCheckboxChecked && jsxRuntime.jsx("div", Object.assign({
+          css: trackingStatusFilter_styles.styles.buttons
+        }, {
+          children: jsxRuntime.jsx(giger.Button, Object.assign({
+            disabled: !isAnyCheckboxChecked,
+            onClick: onClearFilters,
+            variant: giger.ButtonVariant.OUTLINED
+          }, {
+            children: t("common:grid.clear")
+          }))
+        }))]
+      })
+    }))]
+  });
+};
+
+exports.TrackingStatusFilter = TrackingStatusFilter;

package/cjs/components/grid-filters/components/tracking-status-filter/tracking-status-filter.styles.cjs

@@ -0,0 +1,21 @@
+'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: "end",
+    paddingTop: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  checkboxInputParent: theme => ({
+    "div > div > div:has(input[type='checkbox'])": {
+      paddingBottom: 0
+    }
+  })
+});
+
+exports.styles = styles;

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

@@ -0,0 +1,66 @@
+'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 shipmentIdFilter = require('./components/shipment-id-filter/shipment-id-filter.cjs');
+var labelIdFilter = require('./components/label-id-filter/label-id-filter.cjs');
+var createdDateFilter = require('./components/created-date-filter/created-date-filter.cjs');
+var trackingStatusFilter = require('./components/tracking-status-filter/tracking-status-filter.cjs');
+
+/**
+ * @internal
+ *
+ * # GridFilters
+ *
+ * - The `<GridFilters />` component includes Filters used in ShipmentsGrid and LabelsGrid component.
+ *
+ * @see {@link GridFiltersProps | The props for the `<GridFilters />` component}
+ */
+const GridFilters = ({
+  filters,
+  onFiltersUpdated,
+  onClearAllFilters
+}) => {
+  var _a, _b, _c;
+  const {
+    t
+  } = reactI18next.useTranslation(["common"]);
+  const shouldShowClearAll = Object.keys(filters).some(key => {
+    const filter = filters[key];
+    if (!(filter === null || filter === void 0 ? void 0 : filter.value)) {
+      return false;
+    }
+    // if the value is an array, check if it has any values
+    if (Array.isArray(filter.value)) {
+      return filter.value.length > 0;
+    }
+    return true;
+  });
+  return jsxRuntime.jsxs("section", {
+    children: [filters.shipmentId.enabled && jsxRuntime.jsx(shipmentIdFilter.ShipmentIdFilter, {
+      filters: filters,
+      onFiltersUpdated: onFiltersUpdated
+    }), ((_a = filters.labelId) === null || _a === void 0 ? void 0 : _a.enabled) && jsxRuntime.jsx(labelIdFilter.LabelIdFilter, {
+      filters: filters,
+      onFiltersUpdated: onFiltersUpdated
+    }), ((_b = filters.createdDate) === null || _b === void 0 ? void 0 : _b.enabled) && jsxRuntime.jsx(createdDateFilter.CreatedDateFilter, {
+      filters: filters,
+      onFiltersUpdated: onFiltersUpdated
+    }), ((_c = filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.enabled) && jsxRuntime.jsx(trackingStatusFilter.TrackingStatusFilter, {
+      filters: filters,
+      onFiltersUpdated: onFiltersUpdated
+    }), shouldShowClearAll && jsxRuntime.jsx(giger.Button, Object.assign({
+      onClick: () => {
+        onClearAllFilters();
+      },
+      variant: giger.ButtonVariant.TEXT
+    }, {
+      children: t("grid.clearAll")
+    }))]
+  });
+};
+
+exports.GridFilters = GridFilters;

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

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

package/cjs/components/history/history-card/history-card.cjs

@@ -0,0 +1,170 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var date = require('../../../utilities/date.cjs');
+var rates = require('../../../utilities/rates.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var funding = require('../../../assets/funding.cjs');
+var historyCard_styles = require('./history-card.styles.cjs');
+var elementsContextProvider = require('../../../elements-provider/elements-context-provider.cjs');
+var label = require('./label/label.cjs');
+
+const HistoryCard = ({
+  transaction,
+  carrierInfo
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const {
+    locale: defaultLocale
+  } = elementsContextProvider.useElements();
+  const {
+    transactionCategory,
+    transactionDate,
+    transactionAmount,
+    endingBalance
+    // description: transactionDescription,
+  } = transaction;
+  const deriveCurrencySymbol = currency => {
+    if (["USD", "usd"].includes(currency)) return "$";
+    if (["EUR", "eur"].includes(currency)) return "€";
+    if (["GBP", "gbp"].includes(currency)) return "£";
+    return "¤";
+  };
+  /**
+   *  This function derives the transaction with currency symbol as a string. All this logic below
+   *  is needed because the transaction history endpoint returns a minus symbol along with the
+   *  value that was deducted from the users balance. However, this is not the case for a value that
+   *  was added to the balance (e.g. the shipper paid too much for their shipment), where we would
+   *  expect that a plus sign was sent along with the value adjusted on the account.
+   *
+   *  The following logic ensures that the correct mathematical symbol is displayed for each transaction
+   *  per the figma designs for this view. _If only we could get a plus symbol from the API when
+   *  an additive operation is performed on the users balance_.
+   *
+   *  Example usage:
+   *
+   * ```typescript
+   * const moneyAsString = deriveTransactionSymbolWithAmount("adjustment", { amount: 15, currency: "USD" });
+   *
+   * => "+$15.00"
+   *
+   * OR
+   *
+   * const moneyAsString = deriveTransactionSymbolWithAmount("funds_added", { amount: -55, currency: "GBP" });
+   *
+   * => "-£55.00"
+   *
+   * ```
+   */
+  const deriveTransactionSymbolWithAmount = (category, transactionAmount) => {
+    const transactionFirstChar = transactionAmount.amount.toFixed(2).charAt(0);
+    const transactionSymbol = transactionFirstChar === "-" || transactionFirstChar === "+" ? transactionFirstChar : "";
+    const amountTrimmedOfSymbol = transactionAmount.amount.toFixed(2).replace("-", "");
+    const localizedCurrency = deriveCurrencySymbol(transactionAmount.currency);
+    const withDynamicMathematicalSymbol = `${transactionSymbol}${localizedCurrency}${amountTrimmedOfSymbol}`;
+    const withStaticMathematicalSymbol = `${localizedCurrency}${amountTrimmedOfSymbol}`;
+    if (["adjustment", "unknown"].includes(category)) {
+      return !["-", "+"].includes(transactionSymbol) ? `+${withDynamicMathematicalSymbol}` : withDynamicMathematicalSymbol;
+    }
+    if (["credit", "funds_added", "refund"].includes(category)) return `+${withStaticMathematicalSymbol}`;
+    if (["debit", "insurance", "label", "service_charge"].includes(category)) return `-${withStaticMathematicalSymbol}`;
+    return null;
+  };
+  const carrierLogoUrl = React.useMemo(() => {
+    return carrierInfo.carrierCode ? `https://logos.shipstation.com/ipaas/carriers/${rates.overrideCarrierCodes(carrierInfo.carrierCode, {
+      DHL: "dhl_express",
+      FedEx: "fedex",
+      UPS: "ups",
+      USPS: "stamps_com_wl"
+    })}/icon.svg` : undefined;
+  }, [carrierInfo.carrierCode]);
+  const cardTitle = React.useMemo(() => {
+    switch (transactionCategory) {
+      case "funds_added":
+        return t("wallet-history:category.fundsAdded");
+      default:
+        return carrierInfo.carrierName || "Carrier";
+    }
+  }, [carrierInfo.carrierName, transactionCategory, t]);
+  const formatTransactionCategory = category => {
+    return category.replace(/_/g, " ");
+  };
+  return (
+    // Note: div wrapper with padding to be removed with the implementation of Card UI Component
+    jsxRuntime.jsx("div", Object.assign({
+      css: {
+        padding: "16px"
+      }
+    }, {
+      children: jsxRuntime.jsxs("div", Object.assign({
+        css: historyCard_styles.styles.cardContainer
+      }, {
+        children: [jsxRuntime.jsxs("div", Object.assign({
+          css: historyCard_styles.styles.cardColumn
+        }, {
+          children: [jsxRuntime.jsx(label.Label, Object.assign({
+            text: cardTitle,
+            textProps: {
+              css: historyCard_styles.styles.carrierTypography
+            },
+            variant: "inline-right"
+          }, {
+            children: transactionCategory === "funds_added" ? jsxRuntime.jsx("img", {
+              alt: "funds logo",
+              height: 24,
+              src: funding,
+              width: 24
+            }) : carrierLogoUrl && jsxRuntime.jsx("img", {
+              alt: "carrier logo",
+              height: 24,
+              src: carrierLogoUrl,
+              width: 24
+            })
+          })), jsxRuntime.jsxs("div", Object.assign({
+            css: historyCard_styles.styles.transactionDetails
+          }, {
+            children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+              css: historyCard_styles.styles.dateTypography,
+              variant: "small"
+            }, {
+              children: date.formatByDateAndLocale(new Date(transactionDate), defaultLocale)
+            })), jsxRuntime.jsx("span", {
+              children: "-"
+            }), jsxRuntime.jsx(giger.Typography, Object.assign({
+              css: historyCard_styles.styles.getTransactionTypeTypography(transactionCategory),
+              variant: "small"
+            }, {
+              children: formatTransactionCategory(transactionCategory)
+            }))]
+          }))]
+        })), jsxRuntime.jsx("div", Object.assign({
+          css: historyCard_styles.styles.cardColumn
+        }, {
+          children: jsxRuntime.jsx(label.Label, Object.assign({
+            spacing: "spread",
+            text: deriveTransactionSymbolWithAmount(transactionCategory, transactionAmount),
+            textProps: {
+              css: historyCard_styles.styles.getAmountTypography(transactionCategory === "funds_added")
+            },
+            variant: "subtitle"
+          }, {
+            children: jsxRuntime.jsx(giger.Typography, Object.assign({
+              css: historyCard_styles.styles.balanceTypography,
+              variant: "small"
+            }, {
+              children: `${deriveCurrencySymbol(endingBalance.currency)}${endingBalance.amount.toFixed(2)}`
+            }))
+          }))
+        }))]
+      }))
+    }))
+  );
+};
+
+exports.HistoryCard = HistoryCard;