@shipengine/elements 2.20.0 → 2.21.0

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

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  balanceTypography: theme => ({
+    color: styles$1.scopeTheme(theme).palette.gray.main,
+    marginLeft: "auto"
+  }),
+  cardColumn: theme => ({
+    "&:last-child": {
+      alignItems: "flex-end"
+    },
+    alignItems: "flex-start",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    rowGap: `${styles$1.scopeTheme(theme).spacing(1)}px`
+  }),
+  cardContainer: () => ({
+    display: "flex",
+    justifyContent: "space-between"
+  }),
+  carrierTypography: theme => ({
+    color: styles$1.scopeTheme(theme).palette.black
+  }),
+  dateTypography: theme => ({
+    color: styles$1.scopeTheme(theme).palette.black
+  }),
+  getAmountTypography: isReload => theme => ({
+    color: isReload ? styles$1.scopeTheme(theme).palette.success.main : styles$1.scopeTheme(theme).palette.black,
+    marginLeft: "auto"
+  }),
+  getTransactionTypeTypography: transactionType => theme => ({
+    color: transactionType === "reload" ? styles$1.scopeTheme(theme).palette.success.main : transactionType === "adjustment" ? styles$1.scopeTheme(theme).palette.alert.main : styles$1.scopeTheme(theme).palette.black,
+    textTransform: "capitalize"
+  }),
+  transactionDetails: theme => ({
+    alignItems: "baseline",
+    columnGap: styles$1.scopeTheme(theme).spacing(1),
+    display: "flex"
+  })
+});
+
+exports.styles = styles;

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

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

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

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

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var label_styles = require('./label.styles.cjs');
+
+const Label = ({
+  spacing,
+  children,
+  text,
+  textProps,
+  variant
+}) => {
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: label_styles.styles({
+      spacing,
+      variant
+    }).labelContainer
+  }, {
+    children: [jsxRuntime.jsx(giger.Typography, Object.assign({}, textProps, {
+      children: text
+    })), children]
+  }));
+};
+
+exports.Label = Label;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../utilities/styles.cjs');
+
+const styles = ({
+  variant,
+  spacing
+}) => styles$1.createStyles({
+  labelContainer: theme => ({
+    alignItems: "center",
+    display: "flex",
+    flexDirection: variant === "subtitle" ? "column" : variant === "inline" ? "row" : "row-reverse",
+    gap: styles$1.scopeTheme(theme).spacing(typeof spacing === "number" ? spacing : 1),
+    justifyContent: typeof spacing === "string" && spacing === "spread" ? "space-between;" : "flex-start"
+  })
+});
+
+exports.styles = styles;

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

@@ -0,0 +1,155 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var historyCardExtension_styles = require('./history-card-extension.styles.cjs');
+var spacer = require('../../spacer/spacer.cjs');
+
+// TODO: Uncomment the following code once we have a way to get the original shipment info for adjustments
+// const LoadingState = () => (
+//   <div css={styles.loadingStateContainer}>
+//     {[200, 160, 200].map((leftSkeletonWidth, index) => (
+//       <Spread key={`spread-${index}`}>
+//         <Skeleton
+//           animation={SkeletonAnimation.WAVE}
+//           height={24}
+//           variant={SkeletonVariant.RECT}
+//           width={leftSkeletonWidth}
+//         />
+//
+//         <Skeleton
+//           animation={SkeletonAnimation.WAVE}
+//           height={24}
+//           variant={SkeletonVariant.RECT}
+//           width={80}
+//         />
+//       </Spread>
+//     ))}
+//   </div>
+// );
+//
+// const ErrorState = () => <ErrorDisplay />;
+//
+// // replace type call with its se version - lmnt-936
+// const SuccessState = ({ adjustment }: { adjustment: WalletAdjustment }) => {
+//   const commonStylingProps: {
+//     spacing: LabelProps["spacing"];
+//     textProps: LabelProps["textProps"];
+//     variant: LabelProps["variant"];
+//   } = {
+//     spacing: "spread",
+//     textProps: { css: styles.detailsTypography, variant: "body2" },
+//     variant: "inline",
+//   };
+//
+//   const { adjustmentId, originalShipment, actualShipment, trackingNumber } = adjustment;
+//
+//   return (
+//     <div>
+//       <div>
+//         <Label text="Original Weight" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             {`${originalShipment.weight.value} ${originalShipment.weight.unit}.`}
+//           </Typography>
+//         </Label>
+//
+//         <Label text="Actual Weight" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             {`${actualShipment.weight.value} ${actualShipment.weight.unit}.`}
+//           </Typography>
+//         </Label>
+//
+//         <Spacer multiplier={2} />
+//
+//         <Label text="Adjustment ID" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             {adjustmentId}
+//           </Typography>
+//         </Label>
+//
+//         <Label text="Tracking Number" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             {trackingNumber}
+//           </Typography>
+//         </Label>
+//       </div>
+//
+//       <Spacer multiplier={2} />
+//
+//       <div css={styles.detailsBottomContainer}>
+//         <Label text="Quoted Amount" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             $10.00
+//           </Typography>
+//         </Label>
+//
+//         <Label text="Amount Paid" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             $9.00
+//           </Typography>
+//         </Label>
+//
+//         <Label text="Adjustment" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             +$1.00
+//           </Typography>
+//         </Label>
+//       </div>
+//     </div>
+//   );
+// };
+const HistoryCardExtension = ({
+  transactionDetails
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const [isOpen, setIsOpen] = React.useState(false);
+  return jsxRuntime.jsxs("div", {
+    children: [jsxRuntime.jsx(spacer.Spacer, {
+      multiplier: 2
+    }), jsxRuntime.jsx(giger.Divider, {}), jsxRuntime.jsx(spacer.Spacer, {
+      multiplier: 1
+    }), jsxRuntime.jsxs("div", {
+      children: [jsxRuntime.jsxs("div", Object.assign({
+        css: historyCardExtension_styles.styles.headingContainer
+      }, {
+        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+          css: historyCardExtension_styles.styles.detailsTypography
+        }, {
+          children: t("wallet-history:details.inaccurateWeight")
+        })), jsxRuntime.jsx("div", Object.assign({
+          onClick: () => setIsOpen(!isOpen),
+          onKeyDown: event => {
+            if (event.key === "Enter") {
+              setIsOpen(!isOpen);
+            }
+          },
+          role: "button",
+          tabIndex: 0
+        }, {
+          children: isOpen ? jsxRuntime.jsx(giger.Icon, {
+            css: historyCardExtension_styles.styles.chevronTypography,
+            name: gigerTheme.IconNames.CHEVRON_TOP
+          }) : jsxRuntime.jsx(giger.Icon, {
+            css: historyCardExtension_styles.styles.chevronTypography,
+            name: gigerTheme.IconNames.CHEVRON_BOTTOM
+          })
+        }))]
+      })), isOpen && jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 1
+      }), isOpen && jsxRuntime.jsx(giger.Typography, Object.assign({
+        css: historyCardExtension_styles.styles.detailsTypography
+      }, {
+        children: transactionDetails
+      }))]
+    })]
+  });
+};
+
+exports.HistoryCardExtension = HistoryCardExtension;

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

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  chevronTypography: theme => ({
+    color: styles$1.scopeTheme(theme).palette.secondary.main
+  }),
+  detailsBottomContainer: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.white,
+    padding: "8px"
+  }),
+  detailsRow: {
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  detailsTypography: theme => ({
+    color: styles$1.scopeTheme(theme).palette.black
+  }),
+  headingContainer: {
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  loadingStateContainer: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    rowGap: styles$1.scopeTheme(theme).spacing(2)
+  })
+});
+
+exports.styles = styles;

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

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

package/cjs/components/history/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var historyCard = require('./history-card/history-card.cjs');
+var historyCardExtension = require('./history-card-extension/history-card-extension.cjs');
+
+
+
+exports.HistoryCard = historyCard.HistoryCard;
+exports.HistoryCardExtension = historyCardExtension.HistoryCardExtension;

package/cjs/components/inline-label/index.cjs

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

package/cjs/components/inline-label/inline-label.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var inlineLabel_styles = require('./inline-label.styles.cjs');
+
+/**
+ * @internal
+ *
+ * # Inline Label Component
+ */
+const InlineLabel = ({
+  children,
+  label,
+  isLabelRight,
+  labelProps: _labelProps = {}
+}) => jsxRuntime.jsxs("div", Object.assign({
+  css: inlineLabel_styles.styles(isLabelRight).inlineContainer
+}, {
+  children: [jsxRuntime.jsx(giger.Typography, Object.assign({}, _labelProps, {
+    children: label
+  })), children]
+}));
+
+exports.InlineLabel = InlineLabel;

package/cjs/components/inline-label/inline-label.styles.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = isLabelRight => styles$1.createStyles({
+  inlineContainer: theme => ({
+    alignItems: "center",
+    display: "flex",
+    flexDirection: isLabelRight ? "row-reverse" : "row",
+    gap: styles$1.scopeTheme(theme).spacing(1)
+  })
+});
+
+exports.styles = styles;

package/cjs/components/insurance-popover/index.cjs

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

package/cjs/components/insurance-popover/insurance-popover.cjs

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var money = require('../../utilities/money.cjs');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var insurancePopover_styles = require('./insurance-popover.styles.cjs');
+var spacer = require('../spacer/spacer.cjs');
+
+const InsurancePopover = ({
+  fundingSourceInsuranceProvider,
+  iconRef,
+  insuredValue,
+  insuranceClaim,
+  showPopover,
+  toggleShowPopover
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation("view-shipment");
+  if (fundingSourceInsuranceProvider === "parcelguard") {
+    return jsxRuntime.jsxs(giger.Popover, Object.assign({
+      css: insurancePopover_styles.styles.popover,
+      isOpen: showPopover,
+      onClickAway: e => {
+        var _a;
+        return !((_a = iconRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) && toggleShowPopover();
+      },
+      placement: "bottom",
+      reference: iconRef.current
+    }, {
+      children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+        bold: true,
+        variant: "body2"
+      }, {
+        children: t(`insurance.parcelguard.title`)
+      })), jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 1
+      }), jsxRuntime.jsxs(reactI18next.Trans, Object.assign({
+        i18nKey: t(`view-shipment:insurance.parcelguard.description`),
+        insuredValue: money.formatMoney(insuredValue)
+      }, {
+        children: ["Your shipment includes insurance coverage up to\u00A0", {
+          insuredValue: money.formatMoney(insuredValue)
+        }, ". Learn more about\u00A0", jsxRuntime.jsxs(giger.Link, Object.assign({
+          "aria-label": "Opens in a new tab",
+          css: insurancePopover_styles.styles.link,
+          href: "https://help.shipengine.com/hc/en-us/articles/26099415057435-ParcelGuard",
+          isExternal: true,
+          rel: "noreferrer",
+          target: "_blank"
+        }, {
+          children: ["ParcelGuard coverage and terms of service\u00A0", jsxRuntime.jsx(giger.Icon, {
+            name: gigerTheme.IconNames.NEW_WINDOW,
+            size: giger.IconSize.SIZE_SMALL
+          })]
+        }))]
+      })), insuranceClaim && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 2
+        }), jsxRuntime.jsx(giger.Button, Object.assign({
+          role: "link"
+        }, {
+          children: jsxRuntime.jsx("a", Object.assign({
+            css: {
+              color: "inherit",
+              textDecoration: "none"
+            },
+            href: insuranceClaim === null || insuranceClaim === void 0 ? void 0 : insuranceClaim.href,
+            rel: "noreferrer",
+            target: "_blank"
+          }, {
+            children: t("actions.fileClaim")
+          }))
+        }))]
+      })]
+    }));
+  }
+  return null;
+};
+
+exports.InsurancePopover = InsurancePopover;

package/cjs/components/insurance-popover/insurance-popover.styles.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  icon: theme => ({
+    marginLeft: styles$1.scopeTheme(theme).spacing(0.5)
+  }),
+  link: theme => ({
+    "&:visited": {
+      color: styles$1.scopeTheme(theme).palette.secondary.main
+    },
+    fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal
+  }),
+  popover: theme => ({
+    fontSize: styles$1.scopeTheme(theme).typography.fontSize.S
+  })
+});
+
+exports.styles = styles;

package/cjs/components/items-breakdown/index.cjs

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

package/cjs/components/items-breakdown/items-breakdown.cjs

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var money = require('../../utilities/money.cjs');
+var React = require('react');
+var giger = require('@shipengine/giger');
+var itemsBreakdown_styles = require('./items-breakdown.styles.cjs');
+
+const ItemsBreakdownTableHeader = ({
+  hasValue,
+  hasTotal
+}) => jsxRuntime.jsx(giger.TableHeader, {
+  children: jsxRuntime.jsxs(giger.TableBaseRow, {
+    children: [jsxRuntime.jsx(giger.TableHeaderCell, {
+      "aria-hidden": "true"
+    }), jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+      css: itemsBreakdown_styles.styles.numericCell
+    }, {
+      children: "Qty"
+    })), hasValue && jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+      css: itemsBreakdown_styles.styles.numericCell
+    }, {
+      children: "$/ea"
+    })), hasTotal && jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+      css: itemsBreakdown_styles.styles.numericCell
+    }, {
+      children: "$ Total"
+    }))]
+  })
+});
+/**
+ * @internal
+ *
+ * # Items Breakdown Component
+ */
+const ItemsBreakdown = ({
+  items
+}) => {
+  const hasValue = items.some(item => item.value !== undefined);
+  const hasTotal = items.some(item => item.totalValue !== undefined);
+  return jsxRuntime.jsx("div", Object.assign({
+    css: itemsBreakdown_styles.styles.tableWrapper
+  }, {
+    children: jsxRuntime.jsx(giger.Table, Object.assign({
+      header: jsxRuntime.jsx(ItemsBreakdownTableHeader, {
+        hasTotal: hasTotal,
+        hasValue: hasValue
+      })
+    }, {
+      children: jsxRuntime.jsx(giger.TableBody, {
+        children: items.map(({
+          name,
+          detail,
+          quantity,
+          value,
+          totalValue
+        }, index) => jsxRuntime.jsx(React.Fragment, {
+          children: jsxRuntime.jsxs(giger.TableBaseRow, {
+            children: [jsxRuntime.jsxs(giger.TableBodyCell, Object.assign({
+              css: itemsBreakdown_styles.styles.itemDescription
+            }, {
+              children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+                css: itemsBreakdown_styles.styles.itemName
+              }, {
+                children: name
+              })), jsxRuntime.jsx(giger.Typography, {
+                children: detail
+              })]
+            })), jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+              css: [itemsBreakdown_styles.styles.numericCell, itemsBreakdown_styles.styles.itemDetail]
+            }, {
+              children: quantity
+            })), hasValue && jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+              css: [itemsBreakdown_styles.styles.numericCell, itemsBreakdown_styles.styles.itemDetail]
+            }, {
+              children: value && money.formatMoney(value)
+            })), hasTotal && jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+              css: [itemsBreakdown_styles.styles.numericCell, itemsBreakdown_styles.styles.itemDetail]
+            }, {
+              children: totalValue && money.formatMoney(totalValue)
+            }))]
+          })
+        }, index))
+      })
+    }))
+  }));
+};
+
+exports.ItemsBreakdown = ItemsBreakdown;

package/cjs/components/items-breakdown/items-breakdown.styles.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  itemDescription: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: `${styles$1.scopeTheme(theme).spacing(2)}px ${styles$1.scopeTheme(theme).spacing(2)}px ${styles$1.scopeTheme(theme).spacing(0)}px ${styles$1.scopeTheme(theme).spacing(0)}px`
+  }),
+  itemDetail: theme => ({
+    padding: `${styles$1.scopeTheme(theme).spacing(2)}px ${styles$1.scopeTheme(theme).spacing(2)}px ${styles$1.scopeTheme(theme).spacing(0.5)}px ${styles$1.scopeTheme(theme).spacing(0)}px`,
+    verticalAlign: "top"
+  }),
+  itemName: theme => ({
+    display: "-webkit-box",
+    lineHeight: `${styles$1.scopeTheme(theme).spacing(2.5)}px`,
+    maxHeight: `${styles$1.scopeTheme(theme).spacing(7.5)}px`,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    // Set item name to max 3 lines and truncate with ellipsis
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: "3",
+    whiteSpace: "normal"
+  }),
+  numericCell: () => ({
+    textAlign: "right",
+    width: "80px"
+  }),
+  tableWrapper: theme => ({
+    "&& > div": {
+      boxShadow: "none"
+    },
+    "&& > div table thead th": {
+      fontStyle: "italic",
+      fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal
+    }
+  })
+});
+
+exports.styles = styles;

package/cjs/components/link-action/index.cjs

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