@shipengine/elements 2.19.0 → 2.20.0

package/esm/components/address-preference-context/address-preference-context.js

@@ -0,0 +1,94 @@
+import { __awaiter } from 'tslib';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { useAddressValidation } from '../../hooks/use-address-validation.js';
+import isEqual from 'lodash/isEqual.js';
+import omit from 'lodash/omit.js';
+import { createContext, useState, useContext } from 'react';
+import { AddressPreferenceSelect } from '../address-preference-select/address-preference-select.js';
+
+const AddressPreferenceContext = /*#__PURE__*/createContext(undefined);
+const AddressPreferenceProvider = props => {
+  const {
+    children,
+    className,
+    formHeader,
+    onSubmit
+  } = props;
+  const [passengerData, setPassengerData] = useState();
+  const [userInput, setUserInput] = useState();
+  const {
+    validate: validateAddress,
+    validationPreference,
+    setValidationPreference
+  } = useAddressValidation();
+  const internalValidateAddress = payload => __awaiter(void 0, void 0, void 0, function* () {
+    const {
+      addresses,
+      onValid,
+      data
+    } = payload;
+    setUserInput(addresses);
+    const validationPreference = yield validateAddress(addresses);
+    const {
+      originAddress,
+      returnAddress
+    } = validationPreference;
+    setPassengerData(data);
+    if (isEqual(addresses.originAddress, omit(validationPreference.originAddress, ["addressLine3", "addressResidentialIndicator"]))) {
+      yield onValid({
+        originAddress: addresses.originAddress,
+        returnAddress: addresses === null || addresses === void 0 ? void 0 : addresses.returnAddress
+      });
+      setValidationPreference(undefined);
+      return;
+    }
+    if ((originAddress.validationType === "EXACT" || originAddress.validationType === "SOFT") && returnAddress && (returnAddress.validationType === "EXACT" || returnAddress.validationType === "SOFT")) {
+      yield onValid({
+        originAddress: originAddress.address,
+        returnAddress: returnAddress.address
+      });
+      setValidationPreference(undefined);
+      return;
+    }
+    if ((originAddress.validationType === "EXACT" || originAddress.validationType === "SOFT") && !returnAddress) {
+      yield onValid({
+        originAddress: originAddress.address
+      });
+      setValidationPreference(undefined);
+      return;
+    }
+  });
+  return jsx(AddressPreferenceContext.Provider, Object.assign({
+    value: {
+      data: passengerData,
+      userInput,
+      validateAddress: internalValidateAddress,
+      validationPreference
+    }
+  }, {
+    children: jsxs("div", Object.assign({
+      className: className
+    }, {
+      children: [formHeader, !validationPreference ? children : jsx(AddressPreferenceSelect, {
+        onCancel: () => setValidationPreference(undefined),
+        onSubmit: payload => __awaiter(void 0, void 0, void 0, function* () {
+          yield onSubmit(Object.assign(Object.assign({}, payload), {
+            passengerData
+          }));
+          setValidationPreference(undefined);
+        }),
+        originAddress: validationPreference.originAddress,
+        returnAddress: validationPreference.returnAddress
+      })]
+    }))
+  }));
+};
+const useAddressPreference = () => {
+  const context = useContext(AddressPreferenceContext);
+  if (context === undefined) {
+    throw new Error("useAddressPreference must be used within the AddressPreferenceProvider");
+  }
+  return context;
+};
+
+export { AddressPreferenceContext, AddressPreferenceProvider, useAddressPreference };

package/esm/components/address-preference-context/index.js

@@ -0,0 +1 @@
+export { AddressPreferenceContext, AddressPreferenceProvider, useAddressPreference } from './address-preference-context.js';

package/esm/components/address-preference-display/address-preference-display.js

@@ -0,0 +1,109 @@
+import { __awaiter } from 'tslib';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { scopeTheme } from '../../utilities/styles.js';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tag, TagColor, Typography, Grid, GridChild, Button, ButtonVariant } from '@shipengine/giger';
+import { Disclosure } from '../disclosure/disclosure.js';
+import { AddressDisplay } from '../address-display/address-display.js';
+import { Spacer } from '../spacer/spacer.js';
+import { ButtonGroup } from '../button-group/button-group.js';
+
+const AddressPreferenceDisplay = ({
+  addressPreference,
+  onChangePreference,
+  onEditAddress,
+  onToggleDisclosure
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const handleChangePreference = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    const selectedAddress = addressPreference.toggle();
+    yield onChangePreference === null || onChangePreference === void 0 ? void 0 : onChangePreference(selectedAddress);
+  }), [addressPreference, onChangePreference]);
+  const disclosureContentTitle = useMemo(() => addressPreference.status === "verified" ? t(`address.preference.${addressPreference.alternativeSource}`) : t("address.preference.addressNotValidated"), [addressPreference, t]);
+  const isVerified = useMemo(() => {
+    if (addressPreference.status === "verified" && addressPreference.selectionSource === "matchedAddress") {
+      return true;
+    }
+    return false;
+  }, [addressPreference]);
+  return jsxs(Fragment, {
+    children: [jsx(AddressDisplay, {
+      address: addressPreference.selection,
+      decoratorText:
+      // The modified decorator should only be shown on the mathced address
+      addressPreference.isModified && addressPreference.selectionSource === "matchedAddress" ? `(${t("address.preference.modified")})` : undefined,
+      onEdit: onEditAddress
+    }), jsx(Disclosure, Object.assign({
+      "data-testid": "address-preference-disclosure",
+      label: jsx(Tag, Object.assign({
+        color: isVerified ? TagColor.SUCCESS : TagColor.ERROR
+      }, {
+        children: isVerified ? t("address.validation.validated") : t("address.validation.notValidated")
+      })),
+      onToggle: isOpen => onToggleDisclosure === null || onToggleDisclosure === void 0 ? void 0 : onToggleDisclosure(isOpen, addressPreference),
+      // Only default to open if the address was unable to be verified
+      open: !isVerified,
+      showToggle: addressPreference.status === "error" || !!addressPreference.alternative
+    }, {
+      children: toggleDisclosure => jsxs(Fragment, {
+        children: [jsx(Typography, Object.assign({
+          bold: true
+        }, {
+          children: disclosureContentTitle
+        })), jsx(Spacer, {
+          multiplier: 1
+        }), addressPreference.status === "verified" ? addressPreference.alternative && jsx(AddressDisplay, {
+          address: addressPreference.alternative
+        }) : jsx(Grid, Object.assign({
+          css: theme => ({
+            maxWidth: scopeTheme(theme).spacing(40)
+          }),
+          noPadding: true
+        }, {
+          children: jsx(GridChild, Object.assign({
+            colSpan: 12
+          }, {
+            children: jsx(Typography, Object.assign({
+              variant: "body1"
+            }, {
+              children: t("address.preference.unableToValidate")
+            }))
+          }))
+        })), addressPreference.status !== "error" && addressPreference.alternative && jsxs(Fragment, {
+          children: [jsx(Spacer, {
+            multiplier: 2
+          }), jsxs(ButtonGroup, Object.assign({
+            justify: "start"
+          }, {
+            children: [jsx(Button, Object.assign({
+              bold: false,
+              isFullWidth: true,
+              onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                yield handleChangePreference();
+                toggleDisclosure();
+              }),
+              type: "button",
+              variant: ButtonVariant.OUTLINED
+            }, {
+              children: t(`address.preference.use.${addressPreference.alternativeSource}`)
+            })), jsx(Button, Object.assign({
+              bold: false,
+              onClick: toggleDisclosure,
+              type: "button",
+              variant: ButtonVariant.TEXT
+            }, {
+              children: t("common:actions.hide")
+            }))]
+          }))]
+        })]
+      })
+    })), jsx(Spacer, {
+      multiplier: 1
+    })]
+  });
+};
+
+export { AddressPreferenceDisplay };

package/esm/components/address-preference-display/index.js

@@ -0,0 +1 @@
+export { AddressPreferenceDisplay } from './address-preference-display.js';

package/esm/components/address-preference-select/address-preference-select.js

@@ -0,0 +1,205 @@
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { scopeTheme } from '../../utilities/styles.js';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Grid, GridChild, Typography, Button, ButtonVariant, InlineNotification, NotificationType, RadioGroup, Radio } from '@shipengine/giger';
+import { Spacer } from '../spacer/spacer.js';
+import { AddressDisplay } from '../address-display/address-display.js';
+import { ButtonGroup } from '../button-group/button-group.js';
+
+const AddressPreferenceSelect = ({
+  onCancel,
+  onSubmit,
+  originAddress,
+  returnAddress
+}) => {
+  const {
+    t
+  } = useTranslation(["manage-warehouses", "common"]);
+  const determineAddressValidationType = address => {
+    if (!address) return undefined;
+    switch (address.validationType) {
+      case "EXACT":
+      case "SOFT":
+        return address.address;
+      case "SUGGESTED":
+        return address.validation.matchedAddress;
+      case "ERROR":
+        return address.validation.originalAddress;
+      default:
+        return undefined;
+    }
+  };
+  const [originAddressSelection, setOriginAddressSelection] = useState({
+    address: determineAddressValidationType(originAddress),
+    addressType: "suggested"
+  });
+  const [returnAddressSelection, setReturnAddressSelection] = useState({
+    address: determineAddressValidationType(returnAddress),
+    addressType: "suggested"
+  });
+  const AddressPreferenceDisplay = ({
+    name,
+    onSelect,
+    warehousePreference,
+    selectedAddress
+  }) => {
+    var _a, _b;
+    switch (warehousePreference.validationType) {
+      case "EXACT":
+      case "SOFT":
+        return jsx(AddressDisplay, {
+          address: warehousePreference.address
+        });
+      case "SUGGESTED":
+        return jsxs(RadioGroup, Object.assign({
+          name: name,
+          onChange: e => {
+            if (warehousePreference.validation.matchedAddress && e.target.value === "suggested") {
+              onSelect({
+                address: warehousePreference.validation.matchedAddress,
+                addressType: "suggested"
+              });
+            } else {
+              onSelect({
+                address: warehousePreference.validation.originalAddress,
+                addressType: "original"
+              });
+            }
+          },
+          value: selectedAddress.addressType
+        }, {
+          children: [jsx(Spacer, {
+            multiplier: 1
+          }), jsx(Radio, Object.assign({
+            value: "suggested"
+          }, {
+            children: t("common:address.preference.matchedAddress")
+          })), warehousePreference.validation.matchedAddress && jsx(GridChild, Object.assign({
+            colSpan: 6,
+            colStart: 4,
+            css: theme => ({
+              paddingLeft: scopeTheme(theme).spacing(3)
+            })
+          }, {
+            children: jsx(AddressDisplay, {
+              address: warehousePreference.validation.matchedAddress
+            })
+          })), jsx(Spacer, {
+            multiplier: 1
+          }), jsx(Radio, Object.assign({
+            value: "original"
+          }, {
+            children: t("common:address.preference.originalAddress")
+          })), jsx(Spacer, {
+            multiplier: 1
+          }), jsx(GridChild, Object.assign({
+            colSpan: 6,
+            colStart: 4,
+            css: theme => ({
+              paddingLeft: scopeTheme(theme).spacing(3)
+            })
+          }, {
+            children: jsx(AddressDisplay, {
+              address: (_a = warehousePreference.validation) === null || _a === void 0 ? void 0 : _a.originalAddress
+            })
+          }))]
+        }));
+      case "ERROR":
+        return jsxs(Fragment, {
+          children: [jsx(Spacer, {
+            multiplier: 2
+          }), jsx(GridChild, Object.assign({
+            colSpan: 8
+          }, {
+            children: jsx(InlineNotification, Object.assign({
+              title: t("address.preference.addressNotValidated"),
+              type: NotificationType.ALERT
+            }, {
+              children: t("address.preference.unableToValidate")
+            }))
+          })), jsx(Spacer, {
+            multiplier: 2
+          }), jsx(GridChild, {
+            children: jsx(AddressDisplay, {
+              address: (_b = warehousePreference.validation) === null || _b === void 0 ? void 0 : _b.originalAddress
+            })
+          })]
+        });
+      default:
+        // This code path should never be reached.
+        return jsx("div", {
+          children: "not found"
+        });
+    }
+  };
+  return jsxs(Fragment, {
+    children: [jsxs(Grid, Object.assign({
+      "data-testid": "addressPreferenceSelect",
+      noPadding: true
+    }, {
+      children: [jsx(GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsx(Typography, Object.assign({
+          variant: "subtitle2"
+        }, {
+          children: t("common:address.preference.title")
+        }))
+      })), jsxs(GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: [jsx(Typography, Object.assign({
+          css: {
+            textTransform: "capitalize"
+          },
+          variant: "subtitle2"
+        }, {
+          children: t("manage-warehouses:shipFrom")
+        })), originAddress && jsx(AddressPreferenceDisplay, {
+          name: "originAddressPreference",
+          onSelect: selection => setOriginAddressSelection(selection),
+          selectedAddress: originAddressSelection,
+          warehousePreference: originAddress
+        })]
+      })), returnAddress && jsxs(GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: [jsx(Typography, Object.assign({
+          css: {
+            textTransform: "capitalize"
+          },
+          variant: "subtitle2"
+        }, {
+          children: t("manage-warehouses:returnTo")
+        })), jsx(AddressPreferenceDisplay, {
+          name: "returnAddressPreference",
+          onSelect: selection => setReturnAddressSelection(selection),
+          selectedAddress: returnAddressSelection,
+          warehousePreference: returnAddress
+        })]
+      }))]
+    })), jsxs(ButtonGroup, Object.assign({
+      justify: "end"
+    }, {
+      children: [onCancel && jsx(Button, Object.assign({
+        bold: false,
+        onClick: onCancel,
+        type: "button",
+        variant: ButtonVariant.TEXT
+      }, {
+        children: t("actions.cancel")
+      })), jsx(Button, Object.assign({
+        onClick: () => onSubmit({
+          originAddress: originAddressSelection.address,
+          returnAddress: returnAddressSelection.address
+        }),
+        variant: ButtonVariant.OUTLINED
+      }, {
+        children: t("common:address.preference.confirm")
+      }))]
+    }))]
+  });
+};
+
+export { AddressPreferenceSelect };

package/esm/components/address-preference-select/index.js

@@ -0,0 +1 @@
+export { AddressPreferenceSelect } from './address-preference-select.js';

package/esm/components/button-group/button-group.js

@@ -0,0 +1,61 @@
+import { __rest } from 'tslib';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+/**
+ * @internal
+ *
+ * # Button Group Component
+ *
+ * - The `<ButtonGroup />` is a composition component used to group buttons together that are
+ * passed in as children.
+ *
+ * @see {@link ButtonGroupProps | The props that are passed into the `<ButtonGroup />` component}
+ */
+const ButtonGroup = _a => {
+  var {
+      children,
+      justify,
+      toolbar = false,
+      breakpoint
+    } = _a,
+    props = __rest(_a, ["children", "justify", "toolbar", "breakpoint"]);
+  const styles = createStyles({
+    groupStyles: theme => Object.assign(Object.assign({
+      alignItems: "center",
+      display: "flex",
+      justifyContent: justify,
+      width: "100%"
+    }, breakpoint && {
+      [`@media (max-width: ${scopeTheme(theme).breakPoints[breakpoint]}px)`]: {
+        "& > button": {
+          display: "flex",
+          justifyContent: "center",
+          textWrap: "nowrap",
+          width: "100%"
+        }
+      }
+    }), toolbar ? {
+      "& > button": {
+        "&:not(:first-of-type)": {
+          borderBottomLeftRadius: 0,
+          borderTopLeftRadius: 0
+        },
+        "&:not(:last-child)": {
+          borderBottomRightRadius: 0,
+          borderTopRightRadius: 0
+        }
+      }
+    } : {
+      gap: scopeTheme(theme).spacing(2)
+    })
+  });
+  return jsx("div", Object.assign({}, props, {
+    css: styles.groupStyles,
+    role: "group"
+  }, {
+    children: children
+  }));
+};
+
+export { ButtonGroup };

package/esm/components/button-group/index.js

@@ -0,0 +1 @@
+export { ButtonGroup } from './button-group.js';

package/esm/components/carrier-balance/carrier-balance.js

@@ -0,0 +1,41 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { formatMoney } from '../../utilities/money.js';
+import { useTranslation } from 'react-i18next';
+import { Spinner, Typography } from '@shipengine/giger';
+import { styles } from './carrier-balance.styles.js';
+import { InlineLabel } from '../inline-label/inline-label.js';
+
+/**
+ * @internal
+ *
+ * # Carrier Balance
+ *
+ * - The `<CarrierBalance />` component is used to display the current balance for a given
+ * carrier provider.
+ *
+ * @see {@link CarrierBalanceProps | The props for the `<CarrierBalance />` component}
+ */
+const CarrierBalance = ({
+  balance,
+  isLoading,
+  currency
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return jsx(InlineLabel, Object.assign({
+    label: t("manage-funding:currentBalance")
+  }, {
+    children: isLoading ? jsx(Spinner, {}) : jsx(Typography, Object.assign({
+      bold: true,
+      css: styles.getBalanceText(balance)
+    }, {
+      children: balance === undefined ? "----" : formatMoney({
+        amount: balance,
+        currency
+      })
+    }))
+  }));
+};
+
+export { CarrierBalance };

package/esm/components/carrier-balance/carrier-balance.styles.js

@@ -0,0 +1,9 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  getBalanceText: balance => theme => ({
+    color: balance === undefined ? scopeTheme(theme).palette.gray.main : balance >= 0 ? scopeTheme(theme).palette.secondary.dark : scopeTheme(theme).palette.error.main
+  })
+});
+
+export { styles };

package/esm/components/carrier-balance/index.js

@@ -0,0 +1 @@
+export { CarrierBalance } from './carrier-balance.js';

package/esm/components/carrier-connection-card/carrier-connection-card.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { styles } from './carrier-connection-card.styles.js';
+
+const CarrierConnectionCard = ({
+  carrierName,
+  className,
+  iconUrl,
+  name,
+  onClick
+}) => {
+  return jsxs("div", Object.assign({
+    className: className,
+    css: styles.article,
+    "data-testid": "cerrier-connection-card",
+    onClick: () => {
+      onClick === null || onClick === void 0 ? void 0 : onClick(carrierName);
+    },
+    onKeyDown: event => {
+      if (event.key === "Enter") {
+        onClick === null || onClick === void 0 ? void 0 : onClick(carrierName);
+      }
+    },
+    role: "button",
+    tabIndex: 0
+  }, {
+    children: [jsx("img", {
+      alt: name,
+      css: styles.carrierLogo,
+      src: iconUrl
+    }), jsx("div", {
+      css: styles.spacer
+    }), jsx("div", Object.assign({
+      css: styles.carrierName
+    }, {
+      children: name
+    }))]
+  }));
+};
+
+export { CarrierConnectionCard };

package/esm/components/carrier-connection-card/carrier-connection-card.styles.js

@@ -0,0 +1,39 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  article: theme => ({
+    ":hover": {
+      borderColor: scopeTheme(theme).palette.primary.main
+    },
+    alignItems: "center",
+    border: `1px solid ${scopeTheme(theme).palette.gray.light}`,
+    borderRadius: scopeTheme(theme).spacing(0.5),
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "nowrap",
+    paddingBottom: scopeTheme(theme).spacing(1.5),
+    paddingLeft: scopeTheme(theme).spacing(1),
+    paddingRight: scopeTheme(theme).spacing(1),
+    paddingTop: scopeTheme(theme).spacing(1.5),
+    position: "relative"
+  }),
+  carrierLogo: theme => ({
+    flex: "0 0 auto",
+    marginRight: scopeTheme(theme).spacing(2),
+    maxHeight: scopeTheme(theme).iconSize.large,
+    width: scopeTheme(theme).iconSize.large
+  }),
+  carrierName: () => ({
+    display: "block",
+    flex: "1"
+  }),
+  spacer: theme => ({
+    display: "block",
+    flex: "0 0 auto",
+    height: scopeTheme(theme).iconSize.large,
+    position: "relative"
+  })
+});
+
+export { styles };

package/esm/components/carrier-connection-card/index.js

@@ -0,0 +1 @@
+export { CarrierConnectionCard } from './carrier-connection-card.js';

package/esm/components/carrier-icon/carrier-icon.js

@@ -0,0 +1,28 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { getLogoOrIconByCarrierCode } from '../../utilities/shipengine/carrier.js';
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+import { Chip, IconSize } from '@shipengine/giger';
+
+const styles = createStyles({
+  getIconSize: size => theme => ({
+    height: scopeTheme(theme).iconSize[size],
+    width: scopeTheme(theme).iconSize[size]
+  })
+});
+const CarrierIcon = ({
+  carrierCode,
+  carrierName,
+  size: _size = IconSize.SIZE_REGULAR
+}) => {
+  const icon = getLogoOrIconByCarrierCode(carrierCode, "icon");
+  if (!icon) return jsx(Chip, {
+    children: carrierCode.toString().toUpperCase()
+  });
+  return jsx("img", {
+    alt: carrierName,
+    css: styles.getIconSize(_size),
+    src: icon
+  }, carrierName);
+};
+
+export { CarrierIcon, styles };

package/esm/components/carrier-icon/index.js

@@ -0,0 +1 @@
+export { CarrierIcon, styles } from './carrier-icon.js';

package/esm/components/carrier-logo/carrier-logo.js

@@ -0,0 +1,25 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { getLogoOrIconByCarrierCode } from '../../utilities/shipengine/carrier.js';
+
+/* eslint-disable sort-keys-fix/sort-keys-fix -- ordering by value makes more sense */
+const sizes = {
+  md: 40,
+  lg: 68,
+  xl: 105
+};
+const CarrierLogo = ({
+  carrierCode,
+  carrierName,
+  size: _size = "md"
+}) => {
+  const logo = getLogoOrIconByCarrierCode(carrierCode, "logo");
+  if (!logo) return null;
+  return jsx("img", {
+    alt: carrierName,
+    height: sizes[_size],
+    src: logo,
+    width: sizes[_size]
+  }, carrierName);
+};
+
+export { CarrierLogo };

package/esm/components/carrier-logo/index.js

@@ -0,0 +1 @@
+export { CarrierLogo } from './carrier-logo.js';