@shipengine/elements 2.20.0 → 2.21.0

package/cjs/elements/purchase-label/components/customs-forms/products-display/products-display.cjs

@@ -0,0 +1,283 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useNestedForm = require('../../../../../hooks/use-nested-form.cjs');
+var useToggle = require('../../../../../hooks/use-toggle.cjs');
+var money = require('../../../../../utilities/money.cjs');
+var styles = require('../../../../../utilities/styles.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var productsDisplay_styles = require('./products-display.styles.cjs');
+var productForm = require('../product-form/product-form.cjs');
+var linkAction = require('../../../../../components/link-action/link-action.cjs');
+var loader = require('../../../../../components/loader/loader.cjs');
+
+const ProductActions = ({
+  hasMultipleProducts,
+  onEditClick,
+  onDeleteClick
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const [showCustomsPopover, toggleShowCustomsPopover] = useToggle.useToggle(false);
+  const actionsRef = React.useRef(null);
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const handleDelete = () => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    setIsDeleting(true);
+    yield onDeleteClick().finally(() => setIsDeleting(false));
+    toggleShowCustomsPopover();
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [hasMultipleProducts ? jsxRuntime.jsx(linkAction.LinkAction, {
+      css: productsDisplay_styles.styles.actionsButton,
+      icon: "dots",
+      onClick: toggleShowCustomsPopover,
+      ref: actionsRef
+    }) : jsxRuntime.jsx(linkAction.LinkAction, {
+      css: productsDisplay_styles.styles.actionsButton,
+      icon: "edit",
+      onClick: onEditClick
+    }), jsxRuntime.jsx(giger.Popover
+    // must be attached at a minimum, as a child to the theme provider
+    , Object.assign({
+      // must be attached at a minimum, as a child to the theme provider
+      container: document.querySelector("#shipment-form"),
+      isOpen: showCustomsPopover,
+      onClickAway: e => {
+        var _a;
+        return !((_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) && toggleShowCustomsPopover();
+      },
+      placement: "left",
+      reference: actionsRef.current
+    }, {
+      children: jsxRuntime.jsxs("div", Object.assign({
+        css: productsDisplay_styles.styles.actions
+      }, {
+        children: [jsxRuntime.jsx(giger.Button, Object.assign({
+          bold: false,
+          disabled: isDeleting,
+          onClick: onEditClick,
+          variant: giger.ButtonVariant.TEXT
+        }, {
+          children: t("actions.edit")
+        })), jsxRuntime.jsx(giger.Button, Object.assign({
+          bold: false,
+          disabled: isDeleting,
+          onClick: handleDelete,
+          variant: giger.ButtonVariant.TEXT
+        }, {
+          children: isDeleting ? jsxRuntime.jsx(loader.Loader, {
+            size: giger.SpinnerSize.SIZE_SMALL
+          }) : t("actions.remove")
+        }))]
+      }))
+    }))]
+  });
+};
+const ProductsDisplay = ({
+  onUpdate,
+  shipment,
+  currency,
+  harmonizedTariffCodes
+}) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    t
+  } = reactI18next.useTranslation(["purchase-label"]);
+  const [productBeingEdited, setProductBeingEdited] = React.useState();
+  const products = (_b = (_a = shipment.packages[0]) === null || _a === void 0 ? void 0 : _a.products) !== null && _b !== void 0 ? _b : [];
+  const productsCurrency = (_c = products[0]) === null || _c === void 0 ? void 0 : _c.value.currency;
+  const expectedCurrency = products.length === 1 && productBeingEdited ? undefined : productsCurrency;
+  const [productForm$1, isCustomsItemFormOpen, toggleIsCustomsItemFormOpen] = useNestedForm.useNestedForm(productForm.ProductForm, {
+    currency: productsCurrency || currency,
+    expectedCurrency,
+    formId: "product-form",
+    harmonizedTariffCodes,
+    onCancel: () => setProductBeingEdited(undefined),
+    onSubmit: payload => tslib.__awaiter(void 0, void 0, void 0, function* () {
+      let newProducts = productBeingEdited ? products.map((item, index) => index === productBeingEdited.index ? payload : item) // product was edited
+      : products.concat(payload); // product was created
+      // Override all products currencies if it has been changed from the expected.
+      if (expectedCurrency && expectedCurrency !== payload.value.currency) {
+        newProducts = newProducts.map(item => Object.assign(Object.assign({}, item), {
+          value: Object.assign(Object.assign({}, item.value), {
+            currency: payload.value.currency
+          })
+        }));
+      }
+      yield onUpdate(newProducts);
+      setProductBeingEdited(undefined);
+    }),
+    product: productBeingEdited === null || productBeingEdited === void 0 ? void 0 : productBeingEdited.product,
+    shipFromCountry: (_d = shipment.shipFrom) === null || _d === void 0 ? void 0 : _d.countryCode,
+    shipToCountry: (_e = shipment.shipTo) === null || _e === void 0 ? void 0 : _e.countryCode
+  }, {
+    initialOpenState: products.length === 0
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(giger.Grid, Object.assign({
+      css: productsDisplay_styles.styles.section,
+      noPadding: true
+    }, {
+      children: [jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 6
+      }, {
+        children: jsxRuntime.jsx(giger.Typography, Object.assign({
+          bold: true
+        }, {
+          children: t("customs.declarations")
+        }))
+      })), jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 6
+      }, {
+        children: !isCustomsItemFormOpen && jsxRuntime.jsx(linkAction.LinkAction, {
+          css: theme => ({
+            alignSelf: "end",
+            fontWeight: styles.scopeTheme(theme).typography.fontWeight.normal
+          }),
+          icon: "add",
+          onClick: toggleIsCustomsItemFormOpen,
+          title: t("customs.addDeclaration")
+        })
+      }))]
+    })), products.length > 0 && jsxRuntime.jsx(giger.Table, Object.assign({
+      header: jsxRuntime.jsx(giger.TableHeader, Object.assign({
+        "aria-label": "Products Table",
+        css: productsDisplay_styles.styles.header
+      }, {
+        children: jsxRuntime.jsxs(giger.TableBaseRow, {
+          children: [jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+            css: productsDisplay_styles.styles.headerDescription
+          }, {
+            children: jsxRuntime.jsx(giger.Typography, Object.assign({
+              css: productsDisplay_styles.styles.subtitle,
+              variant: "subtitle2"
+            }, {
+              children: t("customs.fields.description")
+            }))
+          })), jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+            css: productsDisplay_styles.styles.headerEach
+          }, {
+            children: jsxRuntime.jsx(giger.Typography, Object.assign({
+              css: productsDisplay_styles.styles.subtitle,
+              variant: "subtitle2"
+            }, {
+              children: t("customs.fields.valueQuantity")
+            }))
+          })), jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+            css: productsDisplay_styles.styles.headerQty
+          }, {
+            children: jsxRuntime.jsx(giger.Typography, Object.assign({
+              css: productsDisplay_styles.styles.subtitle,
+              variant: "subtitle2"
+            }, {
+              children: t("customs.fields.quantity")
+            }))
+          })), jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+            css: productsDisplay_styles.styles.headerTotal
+          }, {
+            children: jsxRuntime.jsx(giger.Typography, Object.assign({
+              css: productsDisplay_styles.styles.subtitle,
+              variant: "subtitle2"
+            }, {
+              children: t("customs.total")
+            }))
+          })), jsxRuntime.jsx(giger.TableHeaderCell, {
+            "aria-hidden": "true",
+            css: productsDisplay_styles.styles.headerActions
+          })]
+        })
+      })),
+      outerWrapperStyles: productsDisplay_styles.styles.table
+    }, {
+      children: jsxRuntime.jsx(giger.TableBody, {
+        children: products.map((item, index) => jsxRuntime.jsxs(React.Fragment, {
+          children: [jsxRuntime.jsx(giger.TableBaseRow, {
+            children: index === (productBeingEdited === null || productBeingEdited === void 0 ? void 0 : productBeingEdited.index) ? jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+              colSpan: 5,
+              css: {
+                whiteSpace: "pre-wrap"
+              }
+            }, {
+              children: productForm$1
+            })) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+                css: productsDisplay_styles.styles.itemInfoLeft
+              }, {
+                children: item.description || jsxRuntime.jsxs("div", Object.assign({
+                  css: productsDisplay_styles.styles.alertContainer
+                }, {
+                  children: [jsxRuntime.jsx(giger.Icon, {
+                    name: gigerTheme.IconNames.ALERT,
+                    size: giger.IconSize.SIZE_MEDIUM
+                  }), jsxRuntime.jsx(giger.Link, Object.assign({
+                    css: productsDisplay_styles.styles.alertText,
+                    onClick: () => {
+                      setProductBeingEdited({
+                        index,
+                        product: item
+                      });
+                      !isCustomsItemFormOpen && toggleIsCustomsItemFormOpen();
+                    }
+                  }, {
+                    children: t("required")
+                  }))]
+                }))
+              })), jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+                css: productsDisplay_styles.styles.itemEach
+              }, {
+                children: money.formatMoney(item.value)
+              })), jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+                css: productsDisplay_styles.styles.itemQty
+              }, {
+                children: item.quantity
+              })), jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+                css: productsDisplay_styles.styles.itemTotal
+              }, {
+                children: money.formatMoney({
+                  amount: Number(item.value.amount) * item.quantity,
+                  currency: item.value.currency
+                })
+              })), jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+                css: productsDisplay_styles.styles.actionsColumn
+              }, {
+                children: jsxRuntime.jsx(ProductActions, {
+                  hasMultipleProducts: products.length > 1,
+                  onDeleteClick: () => tslib.__awaiter(void 0, void 0, void 0, function* () {
+                    var _f;
+                    return yield onUpdate((_f = products.filter(ci => ci !== item)) !== null && _f !== void 0 ? _f : []);
+                  }),
+                  onEditClick: () => {
+                    setProductBeingEdited({
+                      index,
+                      product: item
+                    });
+                    !isCustomsItemFormOpen && toggleIsCustomsItemFormOpen();
+                  }
+                })
+              }))]
+            })
+          }), index !== (productBeingEdited === null || productBeingEdited === void 0 ? void 0 : productBeingEdited.index) && jsxRuntime.jsx(giger.TableBaseRow, {
+            children: jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+              css: productsDisplay_styles.styles.hsCode
+            }, {
+              children: item.harmonizedTariffCode
+            }))
+          })]
+        }, index))
+      })
+    })), !productBeingEdited && isCustomsItemFormOpen && jsxRuntime.jsx("section", Object.assign({
+      css: productsDisplay_styles.styles.form
+    }, {
+      children: productForm$1
+    }))]
+  });
+};
+
+exports.ProductsDisplay = ProductsDisplay;

package/cjs/elements/purchase-label/components/customs-forms/products-display/products-display.styles.cjs

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  actions: theme => ({
+    background: "white",
+    display: "flex",
+    flexDirection: "column",
+    width: styles$1.scopeTheme(theme).spacing(10)
+  }),
+  actionsButton: {
+    padding: "0",
+    verticalAlign: "middle"
+  },
+  actionsColumn: theme => ({
+    padding: `${styles$1.scopeTheme(theme).spacing()}px ${styles$1.scopeTheme(theme).spacing(2)}px 0 ${styles$1.scopeTheme(theme).spacing()}px`,
+    width: styles$1.scopeTheme(theme).spacing(5)
+  }),
+  alertContainer: theme => ({
+    color: styles$1.scopeTheme(theme).palette.error.main,
+    display: "flex"
+  }),
+  alertText: theme => ({
+    color: "inherit",
+    fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal,
+    paddingLeft: "8px"
+  }),
+  form: theme => ({
+    marginBottom: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  header: {
+    "& > tr > th": {
+      "&:after": {
+        borderBottom: "none"
+      }
+    }
+  },
+  headerActions: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    padding: `${styles$1.scopeTheme(theme).spacing()}px ${styles$1.scopeTheme(theme).spacing(2)}px 0 ${styles$1.scopeTheme(theme).spacing()}px`,
+    width: styles$1.scopeTheme(theme).spacing(5)
+  }),
+  headerDescription: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    overflow: "visible",
+    padding: `${styles$1.scopeTheme(theme).spacing()}px ${styles$1.scopeTheme(theme).spacing(2)}px`
+  }),
+  headerEach: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    padding: `${styles$1.scopeTheme(theme).spacing()}px ${styles$1.scopeTheme(theme).spacing()}px ${styles$1.scopeTheme(theme).spacing()}px 0`,
+    textAlign: "right",
+    width: styles$1.scopeTheme(theme).spacing(10)
+  }),
+  headerQty: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    padding: styles$1.scopeTheme(theme).spacing(),
+    textAlign: "right",
+    width: styles$1.scopeTheme(theme).spacing(5)
+  }),
+  headerTotal: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    padding: `${styles$1.scopeTheme(theme).spacing()}px 0 ${styles$1.scopeTheme(theme).spacing()}px ${styles$1.scopeTheme(theme).spacing()}px`,
+    textAlign: "right",
+    width: styles$1.scopeTheme(theme).spacing(10)
+  }),
+  hsCode: theme => ({
+    padding: `0 ${styles$1.scopeTheme(theme).spacing()}px ${styles$1.scopeTheme(theme).spacing()}px ${styles$1.scopeTheme(theme).spacing(2)}px`,
+    whiteSpace: "normal",
+    wordBreak: "break-word"
+  }),
+  itemEach: theme => ({
+    padding: `${styles$1.scopeTheme(theme).spacing()}px ${styles$1.scopeTheme(theme).spacing()}px 0 0`,
+    textAlign: "right",
+    width: styles$1.scopeTheme(theme).spacing(10)
+  }),
+  itemInfoLeft: theme => ({
+    overflow: "hidden",
+    padding: `${styles$1.scopeTheme(theme).spacing()}px ${styles$1.scopeTheme(theme).spacing(2)}px 0`
+  }),
+  itemQty: theme => ({
+    overflow: "visible",
+    padding: `${styles$1.scopeTheme(theme).spacing()}px ${styles$1.scopeTheme(theme).spacing()}px 0`,
+    textAlign: "right",
+    width: styles$1.scopeTheme(theme).spacing(5)
+  }),
+  itemTotal: theme => ({
+    overflow: "visible",
+    padding: `${styles$1.scopeTheme(theme).spacing()}px 0 0 ${styles$1.scopeTheme(theme).spacing()}px`,
+    textAlign: "right",
+    width: styles$1.scopeTheme(theme).spacing(10)
+  }),
+  section: theme => ({
+    marginBottom: styles$1.scopeTheme(theme).spacing(2),
+    width: "100%"
+  }),
+  subtitle: () => ({
+    letterSpacing: "0.01em"
+  }),
+  table: theme => ({
+    border: "1px solid #d4e4e8",
+    borderRadius: "0",
+    boxShadow: "none",
+    marginBottom: styles$1.scopeTheme(theme).spacing(2)
+  })
+});
+
+exports.styles = styles;

package/cjs/elements/purchase-label/components/customs-forms/tax-ids/form/index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var schema = require('./schema.cjs');
+var values = require('./values.cjs');
+
+
+
+exports.getTaxIdSchema = schema.getTaxIdSchema;
+exports.entityTypeOptions = values.entityTypeOptions;
+exports.taxIdTypesOptions = values.taxIdTypesOptions;

package/cjs/elements/purchase-label/components/customs-forms/tax-ids/form/schema.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var zod = require('zod');
+
+const getTaxIdSchema = () => {
+  return zod.z.object({
+    entityType: zod.z.string(),
+    issuingAuthority: zod.z.string(),
+    tax: zod.z.object({
+      type: zod.z.string(),
+      value: zod.z.string()
+    })
+  });
+};
+
+exports.getTaxIdSchema = getTaxIdSchema;

package/cjs/elements/purchase-label/components/customs-forms/tax-ids/form/values.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const taxIdTypesOptions = [{
+  label: "EORI",
+  value: "eori"
+}, {
+  label: "IOSS",
+  value: "ioss"
+}, {
+  label: "VAT",
+  value: "vat"
+}, {
+  label: "UKIMS",
+  value: "ukims"
+}];
+const entityTypeOptions = [{
+  label: "Shipper",
+  value: "shipper"
+}, {
+  label: "Recipient",
+  value: "recipient"
+}];
+
+exports.entityTypeOptions = entityTypeOptions;
+exports.taxIdTypesOptions = taxIdTypesOptions;

package/cjs/elements/purchase-label/components/customs-forms/tax-ids/index.cjs

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

package/cjs/elements/purchase-label/components/customs-forms/tax-ids/tax-id-form.cjs

@@ -0,0 +1,139 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useCountryCodeOptions = require('../../../../../hooks/options/use-country-code-options.cjs');
+var formLogger = require('../../../../../utilities/form-logger.cjs');
+var validation = require('../../../../../utilities/validation.cjs');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var taxIds_styles = require('./tax-ids.styles.cjs');
+var schema = require('./form/schema.cjs');
+var values = require('./form/values.cjs');
+var portal = require('../../../../../components/portal/portal.cjs');
+var inputGroup = require('../../../../../components/field/input-group/input-group.cjs');
+var select = require('../../../../../components/field/select/select.cjs');
+var textInput = require('../../../../../components/field/text-input/text-input.cjs');
+var selectAutoComplete = require('../../../../../components/field/select-auto-complete/select-auto-complete.cjs');
+var buttonGroup = require('../../../../../components/button-group/button-group.cjs');
+var submitButton = require('../../../../../components/field/submit-button/submit-button.cjs');
+
+const FormID = "tax-id-form";
+const TaxIdForm = ({
+  portalRef,
+  taxIdToEdit,
+  onSubmit,
+  onCancel
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["purchase-label", "common"]);
+  const {
+    countryCodeOptions,
+    defaultCountryCodeOption
+  } = useCountryCodeOptions.useCountryCodeOptions();
+  const formValues = taxIdToEdit ? {
+    entityType: taxIdToEdit.taxableEntityType,
+    issuingAuthority: taxIdToEdit.issuingAuthority,
+    tax: {
+      type: taxIdToEdit.identifierType,
+      value: taxIdToEdit.value
+    }
+  } : {
+    entityType: values.entityTypeOptions[0].value,
+    issuingAuthority: (defaultCountryCodeOption === null || defaultCountryCodeOption === void 0 ? void 0 : defaultCountryCodeOption.value) || "US",
+    tax: {
+      type: values.taxIdTypesOptions[0].value,
+      value: ""
+    }
+  };
+  const form = reactHookForm.useForm({
+    defaultValues: formValues,
+    resolver: validation.validationResolver(schema.getTaxIdSchema())
+  });
+  const handleSubmit = form.handleSubmit(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    return onSubmit(values);
+  }));
+  return jsxRuntime.jsx(portal.Portal, Object.assign({
+    target: portalRef
+  }, {
+    children: jsxRuntime.jsxs("form", Object.assign({
+      id: FormID,
+      onSubmit: formLogger.formLogger.capture(handleSubmit)
+    }, {
+      children: [jsxRuntime.jsxs(inputGroup.InputGroup, Object.assign({
+        compact: true,
+        control: form.control,
+        label: t("customs.fields.taxId"),
+        name: "tax",
+        sizes: [116],
+        trigger: form.trigger
+      }, {
+        children: [jsxRuntime.jsx(select.Select, {
+          control: form.control,
+          form: FormID,
+          label: t("customs.fields.taxIdType"),
+          name: "tax.type",
+          options: values.taxIdTypesOptions
+        }), jsxRuntime.jsx(textInput.TextInput, {
+          control: form.control,
+          form: FormID,
+          label: t("customs.fields.taxIdTypeValue"),
+          name: "tax.value",
+          placeholder: t("customs.fields.taxIdTypeValue")
+        })]
+      })), jsxRuntime.jsx(selectAutoComplete.SelectAutoComplete, {
+        control: form.control,
+        form: FormID,
+        label: t("customs.fields.taxIssuingAuthority"),
+        name: "issuingAuthority",
+        noResultsLabel: t("customs.noResults"),
+        options: countryCodeOptions
+      }), jsxRuntime.jsx(select.Select, {
+        control: form.control,
+        form: FormID,
+        label: t("customs.fields.entityType"),
+        labelInfo: jsxRuntime.jsxs("div", Object.assign({
+          css: taxIds_styles.styles.tooltipContainer
+        }, {
+          children: [t("customs.taxIds.entityTypeTooltipText"), jsxRuntime.jsxs("ul", Object.assign({
+            css: taxIds_styles.styles.tooltipList
+          }, {
+            children: [jsxRuntime.jsx("li", {
+              children: t("customs.taxIds.entityTypeTooltipPointOne")
+            }), jsxRuntime.jsx("li", {
+              children: t("customs.taxIds.entityTypeTooltipPointTwo")
+            })]
+          }))]
+        })),
+        name: "entityType",
+        options: values.entityTypeOptions
+      }), jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+        justify: "end"
+      }, {
+        children: [jsxRuntime.jsx(giger.Button, Object.assign({
+          bold: false,
+          "data-testid": "actions.cancel",
+          onClick: onCancel,
+          type: "button",
+          variant: giger.ButtonVariant.TEXT
+        }, {
+          children: t("actions.cancel")
+        })), jsxRuntime.jsx(submitButton.SubmitButton, Object.assign({
+          control: form.control,
+          form: FormID,
+          requireDirty: true,
+          variant: giger.ButtonVariant.OUTLINED
+        }, {
+          children: taxIdToEdit ? t("actions.edit") : t("actions.add")
+        }))]
+      }))]
+    }))
+  }));
+};
+
+exports.FormID = FormID;
+exports.TaxIdForm = TaxIdForm;

package/cjs/elements/purchase-label/components/customs-forms/tax-ids/tax-id-list.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useCountryCodeOptions = require('../../../../../hooks/options/use-country-code-options.cjs');
+var giger = require('@shipengine/giger');
+var taxIds_styles = require('./tax-ids.styles.cjs');
+var actionsMenu = require('../../../../../components/actions-menu/actions-menu.cjs');
+
+const TaxIdList = ({
+  taxIdItems,
+  itemIndexLoading,
+  handleActionsClick
+}) => {
+  const {
+    countryCodeOptions
+  } = useCountryCodeOptions.useCountryCodeOptions();
+  return jsxRuntime.jsx("ul", Object.assign({
+    css: taxIds_styles.styles.taxIdList
+  }, {
+    children: taxIdItems.map((taxIdentifier, index) => {
+      var _a;
+      return jsxRuntime.jsxs("li", Object.assign({
+        css: taxIds_styles.styles.taxIdListItem
+      }, {
+        children: [jsxRuntime.jsxs("div", {
+          children: [jsxRuntime.jsxs(giger.Typography, Object.assign({
+            component: "span"
+          }, {
+            children: [jsxRuntime.jsx("strong", Object.assign({
+              css: taxIds_styles.styles.taxIdListItemIdentifier
+            }, {
+              children: taxIdentifier.identifierType.toUpperCase()
+            })), taxIdentifier.value]
+          })), jsxRuntime.jsxs("div", Object.assign({
+            css: taxIds_styles.styles.taxIdListItemAuthorityWrapper
+          }, {
+            children: [jsxRuntime.jsx(giger.Tag, Object.assign({
+              color: giger.TagColor.GRAY,
+              css: taxIds_styles.styles.taxIdListItemAuthorityTag
+            }, {
+              children: taxIdentifier.taxableEntityType
+            })), jsxRuntime.jsx(giger.Typography, Object.assign({
+              component: "span",
+              css: taxIds_styles.styles.taxIdListItemAuthorityText
+            }, {
+              children: ((_a = countryCodeOptions.find(({
+                value
+              }) => value === taxIdentifier.issuingAuthority)) === null || _a === void 0 ? void 0 : _a.label) || taxIdentifier.issuingAuthority
+            }))]
+          }))]
+        }), jsxRuntime.jsx(actionsMenu.ActionsMenu, {
+          allowedActions: [actionsMenu.Actions.REMOVE, actionsMenu.Actions.EDIT],
+          isLoading: index === itemIndexLoading,
+          onActionClick: handleActionsClick(index)
+        })]
+      }), index);
+    })
+  }));
+};
+
+exports.TaxIdList = TaxIdList;