@shipengine/elements 2.19.0 → 2.21.0

package/esm/features/transaction-history/use-date-range-options.js

@@ -0,0 +1,52 @@
+import { createDictionary } from '../../utilities/create-dictionary.js';
+import { getRelativeDates } from '../../utilities/date.js';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * @internal
+ *
+ * # Date Range Options Hook
+ *
+ * A curated list of date range options relative to the immediate date.
+ *
+ * @see {@link DateRangeOption | The `DateRangeOption` type used in this hook}
+ */
+const useDateRangeOptions = () => {
+  const {
+    t
+  } = useTranslation();
+  const relativeDates = useMemo(() => getRelativeDates(), []);
+  const options = useMemo(() => [{
+    label: t("wallet-history:historyOptions.custom"),
+    range: undefined,
+    value: "custom"
+  }, {
+    label: t("wallet-history:historyOptions.last30days"),
+    range: {
+      endDate: relativeDates.origin,
+      startDate: relativeDates.thirtyDaysAgo
+    },
+    value: "last30days"
+  }, {
+    label: t("wallet-history:historyOptions.thisMonth"),
+    range: {
+      endDate: relativeDates.lastDayOfTheMonth,
+      startDate: relativeDates.firstDayOfMonth
+    },
+    value: "thisMonth"
+  }, {
+    label: t("wallet-history:historyOptions.lastMonth"),
+    range: {
+      endDate: relativeDates.previousMonthLastDay,
+      startDate: relativeDates.previousMonthFirstDay
+    },
+    value: "lastMonth"
+  }], [relativeDates, t]);
+  const optionsByValue = createDictionary(options, o => ({
+    [o.value]: o
+  }));
+  return [options, optionsByValue];
+};
+
+export { useDateRangeOptions };

package/esm/features/unit-settings/index.js

@@ -0,0 +1,2 @@
+export { UnitSettings } from './unit-settings.js';
+export { useUnitSettings } from './use-unit-settings.js';

package/esm/features/unit-settings/unit-settings.js

@@ -0,0 +1,112 @@
+import { __awaiter } from 'tslib';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { Typography, RadioGroup, Radio } from '@shipengine/giger';
+import { Loader } from '../../components/loader/loader.js';
+import { Spacer } from '../../components/spacer/spacer.js';
+
+const UnitSettings = ({
+  accountSettings,
+  getVatSettingsErrors: errors,
+  isLoading,
+  refreshAccountSettings,
+  updateAccountSettings
+}) => {
+  const {
+    t
+  } = useTranslation(["common", "manage-defaults"]);
+  const handleSubmitUpdateAccountSettings = payload => __awaiter(void 0, void 0, void 0, function* () {
+    yield updateAccountSettings({
+      dimensionsUnit: payload.dimensionsUnit,
+      weightUnit: payload.weightUnit
+    });
+    yield refreshAccountSettings();
+  });
+  if (errors) throw new Error(errors.map(e => e.message).join(", "));
+  if (isLoading) return jsx(Loader, {
+    message: t("loading.accountSettings")
+  });
+  return jsxs(Fragment, {
+    children: [jsx(Typography, Object.assign({
+      bold: true,
+      variant: "heading6"
+    }, {
+      children: t("manage-defaults:units.dimensions.title")
+    })), jsx(Spacer, {
+      multiplier: 2.25
+    }), jsxs(RadioGroup, Object.assign({
+      name: "dimensionsUnit",
+      onChange: e => handleSubmitUpdateAccountSettings({
+        dimensionsUnit: e.currentTarget.value
+      }),
+      value: accountSettings === null || accountSettings === void 0 ? void 0 : accountSettings.dimensionsUnit
+    }, {
+      children: [jsx(Radio, Object.assign({
+        value: "inch"
+      }, {
+        children: jsx(Typography, Object.assign({
+          bold: true
+        }, {
+          children: t("manage-defaults:units.dimensions.standard")
+        }))
+      })), jsx(Spacer, {
+        multiplier: 1.25
+      }), jsx(Radio, Object.assign({
+        value: "centimeter"
+      }, {
+        children: jsx(Typography, Object.assign({
+          bold: true
+        }, {
+          children: t("manage-defaults:units.dimensions.metric")
+        }))
+      }))]
+    })), jsx(Spacer, {
+      multiplier: 2.25
+    }), jsx(Typography, Object.assign({
+      bold: true,
+      variant: "heading6"
+    }, {
+      children: t("manage-defaults:units.weight.title")
+    })), jsx(Spacer, {
+      multiplier: 2.25
+    }), jsxs(RadioGroup, Object.assign({
+      name: "weightUnit",
+      onChange: e => handleSubmitUpdateAccountSettings({
+        weightUnit: e.currentTarget.value
+      }),
+      value: accountSettings === null || accountSettings === void 0 ? void 0 : accountSettings.weightUnit
+    }, {
+      children: [jsx(Radio, Object.assign({
+        value: "ounce"
+      }, {
+        children: jsx(Typography, Object.assign({
+          bold: true
+        }, {
+          children: t("manage-defaults:units.weight.standard")
+        }))
+      })), jsx(Spacer, {
+        multiplier: 1.25
+      }), jsx(Radio, Object.assign({
+        value: "gram"
+      }, {
+        children: jsx(Typography, Object.assign({
+          bold: true
+        }, {
+          children: t("manage-defaults:units.weight.g")
+        }))
+      })), jsx(Spacer, {
+        multiplier: 1.25
+      }), jsx(Radio, Object.assign({
+        value: "kilogram"
+      }, {
+        children: jsx(Typography, Object.assign({
+          bold: true
+        }, {
+          children: t("manage-defaults:units.weight.kg")
+        }))
+      }))]
+    }))]
+  });
+};
+
+export { UnitSettings };

package/esm/features/unit-settings/use-unit-settings.js

@@ -0,0 +1,35 @@
+import { __awaiter } from 'tslib';
+import { useUpdateAccountSettings, useGetAccountSettings } from '@shipengine/react-api';
+
+const useUnitSettings = () => {
+  const {
+    error: updateUnitSettingsErrors,
+    isLoading: isUpdatingUnitSettings,
+    mutateAsync: updateAccountSettings
+  } = useUpdateAccountSettings();
+  const {
+    isInitialLoading: isLoading,
+    error: getVatSettingsErrors,
+    refetch: refreshAccountSettings,
+    data: accountSettings
+  } = useGetAccountSettings();
+  const handleSubmitUpdateAccountSettings = newAccountSetting => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+      yield updateAccountSettings(newAccountSetting);
+    } catch (error) {
+      console.error(error);
+    }
+    yield refreshAccountSettings();
+  });
+  return {
+    accountSettings,
+    getVatSettingsErrors,
+    isLoading,
+    isUpdatingUnitSettings,
+    refreshAccountSettings,
+    updateAccountSettings: handleSubmitUpdateAccountSettings,
+    updateUnitSettingsErrors
+  };
+};
+
+export { useUnitSettings };

package/esm/features/vat-settings/index.js

@@ -0,0 +1 @@
+export { VatSettings } from './vat-settings.js';

package/esm/features/vat-settings/vat-settings.js

@@ -0,0 +1,95 @@
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { useToggle } from '../../hooks/use-toggle.js';
+import { useTranslation } from 'react-i18next';
+import { Typography, IconTooltip, IconSize, Tag, TagColor } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { useVatSettings } from '../../hooks/use-vat-settings.js';
+import { styles } from './vat-settings.styles.js';
+import { VatForm } from '../../components/forms/vat-form/vat-form.js';
+import { countries } from '../../constants/shipengine/address.js';
+import { ButtonGroup } from '../../components/button-group/button-group.js';
+import { LinkAction } from '../../components/link-action/link-action.js';
+
+const VatSettings = () => {
+  const {
+    t
+  } = useTranslation();
+  const [showVatForm, toggleShowVatForm] = useToggle(false);
+  const {
+    vatSettings
+  } = useVatSettings();
+  const vatIssuingAuthorityCountry = countries.find(({
+    code
+  }) => code === (vatSettings === null || vatSettings === void 0 ? void 0 : vatSettings.issuingAuthority));
+  return jsxs(Fragment, {
+    children: [jsxs("section", Object.assign({
+      css: styles.addVatSection
+    }, {
+      children: [jsxs("div", Object.assign({
+        css: styles.registrationText
+      }, {
+        children: [jsx(Typography, {
+          children: t("vat-settings:vatNumber")
+        }), jsx(IconTooltip, Object.assign({
+          css: styles.infoIcon,
+          icon: IconNames.INFO_FILLED,
+          placement: "auto",
+          size: IconSize.SIZE_MEDIUM
+        }, {
+          children: jsx("div", Object.assign({
+            css: styles.tooltipContainer
+          }, {
+            children: jsx(Typography, Object.assign({
+              component: "small",
+              variant: "small"
+            }, {
+              children: t("vat-settings:vatRegistrationTooltip")
+            }))
+          }))
+        }))]
+      })), !vatSettings && jsx(ButtonGroup, Object.assign({
+        justify: "end"
+      }, {
+        children: jsx(LinkAction, {
+          icon: "add",
+          isBold: false,
+          isDisabled: showVatForm,
+          onClick: toggleShowVatForm,
+          role: "button",
+          title: t("vat-settings:addNew")
+        })
+      }))]
+    })), vatSettings && jsxs(Fragment, {
+      children: [jsxs("div", Object.assign({
+        css: styles.vatText
+      }, {
+        children: [jsx(Typography, Object.assign({
+          bold: true,
+          component: "p",
+          css: styles.vatParagraph
+        }, {
+          children: vatSettings.identifierType
+        })), jsx(Typography, Object.assign({
+          component: "p",
+          css: styles.vatParagraph
+        }, {
+          children: vatSettings.value
+        })), jsx(Tag, Object.assign({
+          color: TagColor.SUCCESS
+        }, {
+          children: t("vat-settings:verifiedVat")
+        }))]
+      })), jsx(Typography, Object.assign({
+        component: "p",
+        css: styles.vatIssuingAuthority
+      }, {
+        children: (vatIssuingAuthorityCountry === null || vatIssuingAuthorityCountry === void 0 ? void 0 : vatIssuingAuthorityCountry.name) || vatSettings.issuingAuthority
+      }))]
+    }), showVatForm && jsx(VatForm, {
+      onCancel: toggleShowVatForm,
+      onSuccess: toggleShowVatForm
+    })]
+  });
+};
+
+export { VatSettings };

package/esm/features/vat-settings/vat-settings.styles.js

@@ -0,0 +1,37 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  addVatSection: theme => ({
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "space-between",
+    paddingBottom: scopeTheme(theme).spacing()
+  }),
+  infoIcon: theme => ({
+    color: scopeTheme(theme).palette.secondary.main
+  }),
+  registrationText: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: scopeTheme(theme).spacing(),
+    minHeight: scopeTheme(theme).spacing(5),
+    width: "100%"
+  }),
+  tooltipContainer: theme => ({
+    maxWidth: "200px"
+  }),
+  vatIssuingAuthority: theme => ({
+    color: scopeTheme(theme).palette.gray[400],
+    margin: 0
+  }),
+  vatParagraph: () => ({
+    margin: 0
+  }),
+  vatText: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: scopeTheme(theme).spacing()
+  })
+});
+
+export { styles };

package/esm/hooks/index.js

@@ -0,0 +1,5 @@
+export { useAddressValidation } from './use-address-validation.js';
+export { useHelpers } from './use-helpers.js';
+export { useConfigureShipment } from './use-configure-shipment.js';
+export { useImportSalesOrder } from './use-import-sales-order.js';
+export { useBalanceServices } from './use-balance-services.js';

package/esm/hooks/options/format-carrier-label.js

@@ -0,0 +1,26 @@
+import { createDictionary } from '../../utilities/create-dictionary.js';
+
+const getNicknameUniqueness = (carriers, carrier) => {
+  return carriers.filter(c => c.carrierCode === carrier.carrierCode).reduce((acc, c) => {
+    acc[c.nickname] = acc[c.nickname] === undefined;
+    return acc;
+  }, {});
+};
+// Check the uniqueness of the carrierCode, if unique default to friendlyName, else append carrierId or nickname, if present & unique
+const formatCarrierLabel = (carriers, carrier) => {
+  // Dictionary to lookup the uniqueness of each carrierCode
+  const isUniqueByCarrierCode = createDictionary(carriers, (c, partialResults) => ({
+    [c.carrierCode]: partialResults[c.carrierCode] === undefined
+  }));
+  const isCarrierCodeUnique = isUniqueByCarrierCode[carrier.carrierCode];
+  if (isCarrierCodeUnique) {
+    return carrier.friendlyName;
+  }
+  const carrierNicknameIsUnique = getNicknameUniqueness(carriers, carrier)[carrier.nickname];
+  if (!carrier.nickname || !carrierNicknameIsUnique) {
+    return `${carrier.friendlyName} - (${carrier.carrierId})`;
+  }
+  return `${carrier.friendlyName} - ${carrier.nickname}`;
+};
+
+export { formatCarrierLabel };

package/esm/hooks/options/index.js

@@ -0,0 +1,3 @@
+export { useCountryCodeOptions } from './use-country-code-options.js';
+export { useShipmentMetadata } from './use-shipment-metadata.js';
+export { useStateCodeOptions } from './use-state-code-options.js';

package/esm/hooks/options/use-country-code-options.js

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { useGetFundingSourceMetadata } from '@shipengine/react-api';
+import { countries } from '../../constants/shipengine/address.js';
+
+/**
+ * @internal
+ *
+ * # Country Code Options Hook
+ *
+ * @category Hooks
+ */
+const useCountryCodeOptions = () => {
+  var _a, _b;
+  const fundingSourceMetadata = useGetFundingSourceMetadata();
+  const fundingSourceRegion = (_b = (_a = fundingSourceMetadata === null || fundingSourceMetadata === void 0 ? void 0 : fundingSourceMetadata.data) === null || _a === void 0 ? void 0 : _a.defaultRegionProfile) === null || _b === void 0 ? void 0 : _b.countryCode;
+  const countryCodeOptions = useMemo(() => countries.flatMap(v => {
+    return {
+      label: v.name,
+      value: v.code
+    };
+  }), []);
+  const defaultCountryCodeOption = useMemo(() => {
+    const defaultLocale = new Intl.NumberFormat().resolvedOptions().locale;
+    const defaultCountryCode = fundingSourceRegion !== null && fundingSourceRegion !== void 0 ? fundingSourceRegion : defaultLocale.split("-")[1];
+    return countryCodeOptions.find(option => option.value === defaultCountryCode);
+  }, [countryCodeOptions, fundingSourceRegion]);
+  return {
+    countryCodeOptions,
+    defaultCountryCodeOption
+  };
+};
+
+export { useCountryCodeOptions };

package/esm/hooks/options/use-shipment-metadata.js

@@ -0,0 +1,48 @@
+import { isPoBoxAddress, isUnsupportedByUps } from '../../utilities/shipengine/address.js';
+import { getIsInternationalShipment, getIsCustomsRequiredForShipment } from '../../utilities/shipengine/shipment.js';
+import { useMemo } from 'react';
+
+/**
+ * @internal
+ *
+ * # Shipment Metadata Hook
+ *
+ * @category Hooks
+ */
+const useShipmentMetadata = shipment => {
+  const isInternational = useMemo(() => {
+    return shipment ? getIsInternationalShipment(shipment) : false;
+  }, [shipment]);
+  const isPoBox = useMemo(() => (shipment === null || shipment === void 0 ? void 0 : shipment.shipTo) && isPoBoxAddress(shipment.shipTo), [shipment === null || shipment === void 0 ? void 0 : shipment.shipTo]);
+  const isUnsupportedUpsCountry = useMemo(() => (shipment === null || shipment === void 0 ? void 0 : shipment.shipTo) && isUnsupportedByUps(shipment.shipTo), [shipment === null || shipment === void 0 ? void 0 : shipment.shipTo]);
+  const isCustomsRequired = useMemo(() => {
+    return shipment ? getIsCustomsRequiredForShipment(shipment) : false;
+  }, [shipment]);
+  const isContentDescriptionRequired = useMemo(() => {
+    var _a;
+    return shipment && ((_a = shipment.shipFrom) === null || _a === void 0 ? void 0 : _a.countryCode) === "MX" || (shipment === null || shipment === void 0 ? void 0 : shipment.shipTo.countryCode) === "MX";
+  }, [shipment]);
+  const isCanadaDeliveredDutyEligible = useMemo(() => {
+    var _a, _b;
+    return ((_a = shipment === null || shipment === void 0 ? void 0 : shipment.shipTo) === null || _a === void 0 ? void 0 : _a.countryCode) === "CA" && ((_b = shipment === null || shipment === void 0 ? void 0 : shipment.shipFrom) === null || _b === void 0 ? void 0 : _b.countryCode) === "US";
+  }, [shipment]);
+  const shipmentUnits = useMemo(() => {
+    const packageDimensions = shipment === null || shipment === void 0 ? void 0 : shipment.packages[0].dimensions;
+    const packageWeight = shipment === null || shipment === void 0 ? void 0 : shipment.packages[0].weight;
+    const packageMeasurements = [packageDimensions === null || packageDimensions === void 0 ? void 0 : packageDimensions.height, packageDimensions === null || packageDimensions === void 0 ? void 0 : packageDimensions.length, packageDimensions === null || packageDimensions === void 0 ? void 0 : packageDimensions.width, packageWeight === null || packageWeight === void 0 ? void 0 : packageWeight.value];
+    const hasAllZeroMeasurements = packageMeasurements.every(m => m === 0);
+    return {
+      hasAllZeroMeasurements
+    };
+  }, [shipment]);
+  return Object.assign({
+    isCanadaDeliveredDutyEligible,
+    isContentDescriptionRequired,
+    isCustomsRequired,
+    isInternational,
+    isPoBox,
+    isUnsupportedUpsCountry
+  }, shipmentUnits);
+};
+
+export { useShipmentMetadata };

package/esm/hooks/options/use-state-code-options.js

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import { usStates } from '../../constants/shipengine/address.js';
+
+/**
+ * @internal
+ *
+ * # State Code Options Hook
+ *
+ * @category Hooks
+ */
+const useStateCodeOptions = () => useMemo(() => usStates.flatMap(v => {
+  return {
+    label: `${v.code} - ${v.name}`,
+    value: v.code
+  };
+}), []);
+
+export { useStateCodeOptions };

package/esm/hooks/use-address-validation.js

@@ -0,0 +1,99 @@
+import { __awaiter } from 'tslib';
+import { addEmailToValidation } from '../utilities/shipengine/address.js';
+import isEqual from 'lodash/isEqual.js';
+import omit from 'lodash/omit.js';
+import { useState, useCallback } from 'react';
+import { useValidateAddresses } from '@shipengine/react-api';
+
+/**
+ * @internal
+ *
+ * # Address Validation Hook
+ *
+ * @cateogry Hooks
+ */
+const useAddressValidation = () => {
+  const [validationPreference, setValidationPreference] = useState();
+  const {
+    error: validateAddressErrors,
+    mutateAsync: validateAddresses
+  } = useValidateAddresses();
+  const caseInsensitiveCompare = useCallback((matched, original) => {
+    if (matched === undefined || original === undefined) return false;
+    const originalAddress = Object.fromEntries(Object.entries(original).map(([key, value]) => [key, typeof value == "string" ? value.toLowerCase() : value]));
+    const matchedAddress = Object.fromEntries(Object.entries(matched).map(([key, value]) => [key, typeof value == "string" ? value.toLowerCase() : value]));
+    // SE api returns addressLine2 as an empty string if it is not provided
+    if (matchedAddress.addressLine2 === "") {
+      matchedAddress.addressLine2 = null;
+    }
+    if (isEqual(omit(matchedAddress, ["postalCode", "addressResidentialIndicator"]), omit(originalAddress, ["postalCode", "addressResidentialIndicator"]))) return true;else return false;
+  }, []);
+  const postalCodeCompare = useCallback((matched, original) => {
+    if (matched === undefined || original === undefined) return false;
+    if (matched === original) return true;
+    return matched.includes(original);
+  }, []);
+  const buildAddressValidationPreference = useCallback(addressValidation => {
+    /**
+     * Address validation matching criteria
+     * 1. Case-insensitive string comparison
+     * 2. Zip Code only added 4 extra digits to the original Zip Code
+     */
+    var _a;
+    if (addressValidation.status === "error") {
+      return {
+        validation: addressValidation,
+        validationType: "ERROR"
+      };
+    }
+    //  Valid if the matched address and input address were EXACTLY the same
+    if (addressValidation.matchedAddress && addressValidation.matchedAddress.name === addressValidation.originalAddress.name && addressValidation.matchedAddress.companyName === addressValidation.originalAddress.companyName && addressValidation.matchedAddress.addressLine1 === addressValidation.originalAddress.addressLine1 && addressValidation.matchedAddress.addressLine2 === addressValidation.originalAddress.addressLine2 && addressValidation.matchedAddress.cityLocality === addressValidation.originalAddress.cityLocality && addressValidation.matchedAddress.stateProvince === addressValidation.originalAddress.stateProvince && addressValidation.matchedAddress.postalCode === addressValidation.originalAddress.postalCode && addressValidation.matchedAddress.countryCode === addressValidation.originalAddress.countryCode) {
+      return {
+        address: addressValidation.originalAddress,
+        validationType: "EXACT"
+      };
+    }
+    // Valid if the matched address passes matching criteria but are not exactly the same address
+    if (addressValidation.matchedAddress && caseInsensitiveCompare(addressValidation.matchedAddress, addressValidation.originalAddress) && postalCodeCompare((_a = addressValidation.matchedAddress) === null || _a === void 0 ? void 0 : _a.postalCode, addressValidation.originalAddress.postalCode)) {
+      return {
+        address: addressValidation.matchedAddress,
+        validationType: "SOFT"
+      };
+    }
+    // If there is a matched address and does not pass the matching criteria
+    if (addressValidation.matchedAddress) {
+      return {
+        validation: addressValidation,
+        validationType: "SUGGESTED"
+      };
+    }
+    // error or address was not valiqated
+    return {
+      validation: addressValidation,
+      validationType: "ERROR"
+    };
+  }, [caseInsensitiveCompare, postalCodeCompare]);
+  const validate = useCallback(addresses => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const result = yield validateAddresses([addresses.originAddress, ...(addresses.returnAddress ? [addresses.returnAddress] : [])]);
+    const [originAddress, returnAddress] = result;
+    const originAddressPreference = buildAddressValidationPreference(addEmailToValidation(originAddress, addresses.originAddress.email));
+    const returnAddressPreference = returnAddress && buildAddressValidationPreference(addEmailToValidation(returnAddress, (_a = addresses.returnAddress) === null || _a === void 0 ? void 0 : _a.email));
+    setValidationPreference({
+      originAddress: originAddressPreference,
+      returnAddress: returnAddressPreference
+    });
+    return {
+      originAddress: originAddressPreference,
+      returnAddress: returnAddressPreference
+    };
+  }), [buildAddressValidationPreference, validateAddresses]);
+  return {
+    errors: validateAddressErrors,
+    setValidationPreference,
+    validate,
+    validationPreference
+  };
+};
+
+export { useAddressValidation };