@shipengine/elements 2.20.0 → 2.22.0

package/cjs/workflows/connect-external-carrier/connect-external-carrier.cjs

@@ -0,0 +1,241 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactQuery = require('@tanstack/react-query');
+var humps = require('humps');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var reactApi = require('@shipengine/react-api');
+var customExternalCarrierForm = require('./components/custom-external-carrier-form/custom-external-carrier-form.cjs');
+var connectExternalCarrierForm = require('./components/connect-external-carrier-form/connect-external-carrier-form.cjs');
+var availableCarriersList = require('./components/available-carriers-list/available-carriers-list.cjs');
+var index = require('../../locales/en/index.cjs');
+var elementsContextProvider = require('../../elements-provider/elements-context-provider.cjs');
+var loader = require('../../components/loader/loader.cjs');
+var spacer = require('../../components/spacer/spacer.cjs');
+var buttonGroup = require('../../components/button-group/button-group.cjs');
+var createElement = require('../../create-element/create-element.cjs');
+var errorFallback = require('../../components/error-fallback/error-fallback.cjs');
+
+/**
+ * # ConnectExternalCarrier Component
+ *
+ * @param ComponentProps The base props that will be passed into the `<ConnectExternalCarrier />` component.
+ *
+ * @returns Element A React element that renders the `<ConnectExternalCarrier />` component allowing users
+ * to connect their own existing carrier account. If no carrier is provided, the user may
+ * select from a list of carriers specified by `features.availableCarrierConnections`.
+ * This component is composed in the `<AccountSettings />` Element.
+ *
+ * @example
+ * ```tsx
+ * (() => {
+ *   const features = useFeatures("CarrierConnections");
+ *
+ *   return <ConnectExternalCarrier.Component features={features} />;
+ * })();
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link ConnectExternalCarrier.ComponentProps | The props that are passed into the `<ConnectExternalCarrier />` component}
+ */
+const Component = ({
+  carrierName,
+  onCancel,
+  onCarrierConnected
+}) => {
+  var _a;
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "connect-carrier"]);
+  const queryClient = reactQuery.useQueryClient();
+  const [selectedCarrier, setSelectedCarrier] = React.useState(carrierName);
+  const [needsRefetch, setNeedsRefetch] = React.useState(false);
+  const {
+    globalFeatures
+  } = elementsContextProvider.useElements();
+  React.useEffect(() => {
+    setSelectedCarrier(carrierName);
+  }, [carrierName]);
+  const {
+    data: schemaData,
+    error: schemaError,
+    isFetching: schemaLoading,
+    refetch: refetchSchema
+  } = reactApi.useGetCarrierConnectionForm({
+    carrierName: selectedCarrier !== null && selectedCarrier !== void 0 ? selectedCarrier : "apicode-dummy-carrier",
+    enabled: false
+  });
+  React.useEffect(() => {
+    if (selectedCarrier && needsRefetch) {
+      void refetchSchema();
+      setNeedsRefetch(false);
+    }
+  }, [refetchSchema, selectedCarrier, needsRefetch]);
+  const {
+    data: carriersData,
+    isLoading: carriersLoading
+  } = reactApi.useListCarrierConnections();
+  const carriers = carriersData === null || carriersData === void 0 ? void 0 : carriersData.filter(c => {
+    var _a;
+    return (_a = globalFeatures === null || globalFeatures === void 0 ? void 0 : globalFeatures.enabledExternalCarriers) === null || _a === void 0 ? void 0 : _a.includes(c.carrierName);
+  });
+  const carrierInfo = carriers === null || carriers === void 0 ? void 0 : carriers.find(c => c.carrierName === selectedCarrier);
+  const {
+    jsonSchema,
+    uiSchema
+  } = (_a = schemaData === null || schemaData === void 0 ? void 0 : schemaData.formMetadata.formSchema) !== null && _a !== void 0 ? _a : {};
+  const hasNicknameProperty = React.useMemo(() => {
+    var _a;
+    return !!((_a = jsonSchema === null || jsonSchema === void 0 ? void 0 : jsonSchema.properties) === null || _a === void 0 ? void 0 : _a.nickname);
+  }, [jsonSchema]);
+  const formattedJsonSchema = React.useMemo(() => {
+    if (!jsonSchema) return {};
+    const jsonSchemaClone = JSON.parse(JSON.stringify(jsonSchema));
+    // if property has a ref key, map the property value to the value of the path
+    const mapRefPath = schema => {
+      const {
+        properties
+      } = schema;
+      if (!properties) return schema;
+      for (const key in properties) {
+        const property = properties[key];
+        if (property.$ref) {
+          const refPath = humps.camelize(property.$ref.replace("#/", "")).split("/");
+          const value = refPath.reduce((acc, path) => acc === null || acc === void 0 ? void 0 : acc[path], schema);
+          properties[key] = value;
+        }
+      }
+      return schema;
+    };
+    // add nickname to properties if it doesn't exist
+    const addNicknameProperty = schema => {
+      if (!(schema === null || schema === void 0 ? void 0 : schema.properties)) return schema;
+      const updatedSchema = Object.assign({}, schema);
+      const updatedProperties = Object.assign({}, updatedSchema.properties);
+      if (!hasNicknameProperty) {
+        updatedProperties.nickname = {
+          title: "Account Nickname",
+          type: "string"
+        };
+        // add nickname to required array
+        updatedSchema.required = [...updatedSchema.required, "nickname"];
+      }
+      updatedSchema.properties = updatedProperties;
+      return updatedSchema;
+    };
+    const standardizeCasing = schema => {
+      if (!schema) return schema;
+      const updatedSchema = Object.assign({}, schema);
+      // camelize required fields, as casing varies between carriers
+      if (updatedSchema.required) {
+        updatedSchema.required = updatedSchema.required.map(humps.camelize);
+      }
+      // camelize property keys
+      // fail safe to ensure schema properties and required array match in the event the camelizeKeys from shipengine/js-api isn't consistent
+      // TODO: Fix edge cases with camelizeKeys in js-api and remove this
+      if (updatedSchema.properties) {
+        const camelizedProperties = Object.entries(updatedSchema.properties).reduce((acc, [key, value]) => {
+          acc[humps.camelize(key)] = value;
+          return acc;
+        }, {});
+        updatedSchema.properties = camelizedProperties;
+      }
+      return updatedSchema;
+    };
+    const newJsonSchema = standardizeCasing(addNicknameProperty(mapRefPath(jsonSchemaClone)));
+    return newJsonSchema;
+  }, [jsonSchema, hasNicknameProperty]);
+  const formattedUiSchema = React.useMemo(() => {
+    if (!uiSchema) return {};
+    const uiSchemaClone = JSON.parse(JSON.stringify(uiSchema));
+    const updatedUiSchema = Object.assign({}, uiSchemaClone);
+    // add nickname to ui:order and camelize the values to ensure consistency with jsonSchema properties and required array
+    if (!hasNicknameProperty && updatedUiSchema["ui:order"]) {
+      updatedUiSchema["ui:order"] = [...updatedUiSchema["ui:order"], "nickname"].map(humps.camelize);
+    }
+    return updatedUiSchema;
+  }, [uiSchema, hasNicknameProperty]);
+  const onCarrierFormCancel = React.useCallback(() => {
+    if (carrierName) {
+      onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    } else {
+      setSelectedCarrier(undefined);
+    }
+  }, [carrierName, onCancel, setSelectedCarrier]);
+  const onCarrierFormConnected = React.useCallback(carrierId => {
+    onCarrierConnected === null || onCarrierConnected === void 0 ? void 0 : onCarrierConnected(carrierId);
+    setSelectedCarrier(undefined);
+  }, [onCarrierConnected, setSelectedCarrier]);
+  if (schemaLoading || carriersLoading || needsRefetch) return jsxRuntime.jsx(loader.Loader, {
+    message: t(selectedCarrier ? "loading.connectCarrierForm" : "loading.carriers")
+  });
+  if (schemaError) {
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+        type: giger.NotificationType.ERROR
+      }, {
+        children: t("errorMessages.unableToLoad.connectCarrierForm")
+      })), jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 2
+      }), jsxRuntime.jsx(buttonGroup.ButtonGroup, Object.assign({
+        justify: "end"
+      }, {
+        children: jsxRuntime.jsx(giger.Button, Object.assign({
+          bold: false,
+          onClick: () => {
+            // clear the query cache to clear errors and reset form data
+            void queryClient.removeQueries({
+              predicate: query => query.queryKey[0] === "useGetCarrierConnectionForm"
+            });
+            onCarrierFormCancel();
+          },
+          type: "button",
+          variant: giger.ButtonVariant.OUTLINED
+        }, {
+          children: t("actions.cancel")
+        }))
+      }))]
+    });
+  }
+  if (!carriersData) throw new Error(t("errorMessages.unableToLoad.connectCarrierForm"));
+  if (selectedCarrier && carrierInfo && customExternalCarrierForm.hasCustomExternalCarrierConnectionForm(selectedCarrier)) return jsxRuntime.jsx(customExternalCarrierForm.CustomExternalCarrierForm, {
+    carrierName: carrierInfo.carrierName,
+    displayName: carrierInfo.name,
+    iconUrl: carrierInfo.iconUrl,
+    isBeta: carrierInfo.beta,
+    onCancel: onCarrierFormCancel,
+    onCarrierConnected: onCarrierFormConnected
+  });
+  if (schemaData && carrierInfo) return jsxRuntime.jsx(connectExternalCarrierForm.ConnectExternalCarrierForm, {
+    carrierName: carrierInfo.carrierName,
+    displayName: carrierInfo.name,
+    iconUrl: carrierInfo.iconUrl,
+    isBeta: carrierInfo.beta,
+    jsonSchema: formattedJsonSchema,
+    onCancel: onCarrierFormCancel,
+    onCarrierConnected: onCarrierFormConnected,
+    uiSchema: formattedUiSchema
+  });
+  return jsxRuntime.jsx(availableCarriersList.AvailableCarriersList, {
+    carriers: carriers !== null && carriers !== void 0 ? carriers : [],
+    onCarrierSelected: carrierName => {
+      if (!customExternalCarrierForm.hasCustomExternalCarrierConnectionForm(carrierName)) {
+        setNeedsRefetch(true);
+      }
+      setSelectedCarrier(carrierName);
+    }
+  });
+};
+const Element = createElement.createElement(Component, errorFallback.ErrorFallback, {
+  resources: {
+    en: index
+  }
+});
+
+exports.Component = Component;
+exports.Element = Element;

package/cjs/workflows/connect-external-carrier/index.cjs

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

package/cjs/workflows/index.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var onboarding = require('./onboarding/onboarding.cjs');
+var labelWorkflow = require('./label-workflow/label-workflow.cjs');
+var accountSettings = require('./account-settings/account-settings.cjs');
+var connectExternalCarrier = require('./connect-external-carrier/connect-external-carrier.cjs');
+var carrierServices = require('./carrier-services/carrier-services.cjs');
+
+
+
+exports.Onboarding = onboarding;
+exports.LabelWorkflow = labelWorkflow;
+exports.AccountSettings = accountSettings;
+exports.ConnectExternalCarrier = connectExternalCarrier;
+exports.CarrierServices = carrierServices;

package/cjs/workflows/label-workflow/index.cjs

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

package/cjs/workflows/label-workflow/label-workflow.cjs

@@ -0,0 +1,211 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useConfigureShipment = require('../../hooks/use-configure-shipment.cjs');
+var useRunOnceOnTrue = require('../../hooks/use-run-once-on-true.cjs');
+var money = require('../../utilities/money.cjs');
+var React = require('react');
+var reactApi = require('@shipengine/react-api');
+var configureShipment = require('../../elements/purchase-label/configure-shipment.cjs');
+var index = require('../../locales/en/index.cjs');
+var suspendPurchase = require('../../components/suspend-purchase/suspend-purchase.cjs');
+var createElement = require('../../create-element/create-element.cjs');
+var errorFallback = require('../../components/error-fallback/error-fallback.cjs');
+var voidLabel = require('../../elements/void-label/void-label.cjs');
+var shipment = require('../../elements/shipment-summary/components/shipment/shipment.cjs');
+
+const Component = _a => {
+  var _b, _c;
+  var {
+      multiplexedId: _multiplexedId,
+      features: propFeatures,
+      warehouseId,
+      shipFromAddresses,
+      currency: _currency,
+      printLabelLayout,
+      onLoad,
+      onShipmentUpdated,
+      onLabelCreateSuccess,
+      onVoidLabelComplete,
+      onVoidLabelSuccess,
+      onViewShipment,
+      onClickVoidLabel,
+      onClickPurchaseLabel,
+      onRateSaved,
+      callbacks
+    } = _a,
+    props = tslib.__rest(_a, ["multiplexedId", "features", "warehouseId", "shipFromAddresses", "currency", "printLabelLayout", "onLoad", "onShipmentUpdated", "onLabelCreateSuccess", "onVoidLabelComplete", "onVoidLabelSuccess", "onViewShipment", "onClickVoidLabel", "onClickPurchaseLabel", "onRateSaved", "callbacks"]);
+  const [labelId, setLabelId] = React.useState();
+  const [element, setElement] = React.useState();
+  const {
+    data: fundingSource
+  } = reactApi.useListFundingSources();
+  const {
+    data: accountSettings
+  } = reactApi.useGetAccountSettings();
+  const {
+    shipment: shipment$1,
+    salesOrder,
+    isLoading: isConfiguringShipment,
+    errors: configureShipmentErrors,
+    refetchPendingSalesOrderShipments,
+    warehouses,
+    carriers
+  } = useConfigureShipment.useConfigureShipment(Object.assign(Object.assign({}, _multiplexedId), {
+    onLoad: onLoad,
+    onShipmentUpdated: onShipmentUpdated,
+    shipFromAddresses,
+    useWarehouses: (_b = propFeatures === null || propFeatures === void 0 ? void 0 : propFeatures.shipmentForm) === null || _b === void 0 ? void 0 : _b.useWarehouses,
+    warehouseId
+  }));
+  const {
+    data: insuranceAccount,
+    isInitialLoading: insuranceIsLoading
+  } = reactApi.useGetInsuranceAccount((shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.insuranceProvider) === reactApi.SE.InsuranceProviderType.SHIPSURANCE ? reactApi.SE.InsuranceProviderType.SHIPSURANCE : undefined);
+  const {
+    data: labelsResponse,
+    isLoading: isLabelsLoading,
+    error: listLabelsErrors,
+    refetch: refetchLabels
+  } = reactApi.useListLabels({
+    enabled: _multiplexedId && "shipmentId" in _multiplexedId ? true : !!(shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.shipmentId),
+    queryFnParams: {
+      shipmentId: _multiplexedId && "shipmentId" in _multiplexedId ? _multiplexedId.shipmentId : shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.shipmentId
+    }
+  });
+  /**
+   * Run once when we have the necessary label data to initialize the label work flow to the correct step.
+   *
+   * Only show the Purchase Label Element if there are no labels on the shipment.
+   */
+  useRunOnceOnTrue.useRunOnceOnTrue(labelsResponse && (() => {
+    if (labelsResponse.labels.length) {
+      setElement("shipmentSummary");
+    } else {
+      setElement("purchaseLabel");
+    }
+  }));
+  const currency = _currency !== null && _currency !== void 0 ? _currency : money.getCurrencyFromString((_c = fundingSource === null || fundingSource === void 0 ? void 0 : fundingSource[0]) === null || _c === void 0 ? void 0 : _c.currencyCode);
+  const handleShipmentUpdated = React.useCallback(shipment => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    yield refetchPendingSalesOrderShipments();
+    yield onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(shipment);
+  }), [onShipmentUpdated, refetchPendingSalesOrderShipments]);
+  const getElement = element => {
+    switch (element) {
+      case "purchaseLabel":
+        return jsxRuntime.jsx(configureShipment.ConfigureShipment, Object.assign({}, props, {
+          currency: currency,
+          features: propFeatures,
+          insuranceAccount: insuranceAccount,
+          isLoading: isConfiguringShipment || insuranceIsLoading,
+          onLabelCreateSuccess: (label, shipment) => tslib.__awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            setElement("shipmentSummary");
+            yield onLabelCreateSuccess === null || onLabelCreateSuccess === void 0 ? void 0 : onLabelCreateSuccess(label, shipment);
+            // Remove this in future versions
+            yield (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onLabelCreateSuccess) === null || _a === void 0 ? void 0 : _a.call(callbacks, label, shipment);
+            yield refetchLabels();
+          }),
+          onRateSaved: shipment => tslib.__awaiter(void 0, void 0, void 0, function* () {
+            var _b;
+            yield onRateSaved === null || onRateSaved === void 0 ? void 0 : onRateSaved(shipment);
+            yield (_b = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onRateSaved) === null || _b === void 0 ? void 0 : _b.call(callbacks, shipment);
+          }),
+          onShipmentUpdated: handleShipmentUpdated,
+          printLabelLayout: printLabelLayout !== null && printLabelLayout !== void 0 ? printLabelLayout : accountSettings === null || accountSettings === void 0 ? void 0 : accountSettings.defaultLabelLayout,
+          salesOrder: salesOrder,
+          shipFromAddresses: shipFromAddresses,
+          shipment: shipment$1
+        }));
+      case "shipmentSummary":
+        return jsxRuntime.jsx(shipment.Shipment, Object.assign({}, props, {
+          carriers: carriers,
+          features: propFeatures,
+          labels: labelsResponse === null || labelsResponse === void 0 ? void 0 : labelsResponse.labels,
+          onClickPurchaseLabel: (shipment, salesOrder) => {
+            setElement("purchaseLabel");
+            onClickPurchaseLabel === null || onClickPurchaseLabel === void 0 ? void 0 : onClickPurchaseLabel(shipment, salesOrder);
+          },
+          onClickVoidLabel: label => {
+            setLabelId(label.labelId);
+            setElement("voidLabel");
+            onClickVoidLabel === null || onClickVoidLabel === void 0 ? void 0 : onClickVoidLabel(label);
+          },
+          salesOrder: salesOrder,
+          shipment: shipment$1,
+          warehouse: warehouses === null || warehouses === void 0 ? void 0 : warehouses.find(w => w.warehouseId === (shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.warehouseId))
+        }));
+      case "voidLabel":
+        return jsxRuntime.jsx(voidLabel.Component, {
+          labelId: labelId,
+          onComplete: (request, shipment) => {
+            var _a;
+            setElement("shipmentSummary");
+            onVoidLabelComplete === null || onVoidLabelComplete === void 0 ? void 0 : onVoidLabelComplete(request, shipment);
+            (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onVoidLabelComplete) === null || _a === void 0 ? void 0 : _a.call(callbacks, request, shipment);
+          },
+          onSuccess: (label, shipment) => {
+            var _a;
+            onVoidLabelSuccess === null || onVoidLabelSuccess === void 0 ? void 0 : onVoidLabelSuccess(label, shipment);
+            (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onVoidLabelSuccess) === null || _a === void 0 ? void 0 : _a.call(callbacks, label, shipment);
+          },
+          onViewShipment: shipment => tslib.__awaiter(void 0, void 0, void 0, function* () {
+            setElement("shipmentSummary");
+            onViewShipment === null || onViewShipment === void 0 ? void 0 : onViewShipment(shipment);
+            yield refetchLabels();
+          })
+        });
+    }
+  };
+  const errors = [...(configureShipmentErrors ?
+  /**
+   * We don't want to show a "shipment has already purchased a label" error here because the workflow will
+   * handle this by directing the shipper to the shipment summary.
+   */
+  configureShipmentErrors.filter(error => error.message !== "label_purchased") : []), ...(listLabelsErrors ? listLabelsErrors : [])];
+  return jsxRuntime.jsx(suspendPurchase.SuspendPurchase, Object.assign({
+    data: shipment$1 || salesOrder,
+    errors: errors.length ? errors : undefined,
+    isLoading: isLabelsLoading || isConfiguringShipment || insuranceIsLoading
+  }, {
+    children: element && getElement(element)
+  }));
+};
+/**
+ * @internal
+ *
+ * # Label Workflow Element
+ *
+ * - The `<LabelWorkflow.Element />` component is a composition of the PurchaseLabel, ShipmentSummary,
+ * and VoidLabel elements that allows users to purchase a label, view the shipment details, and optionally void their shipping label.
+ *
+ * @param LabelWorkflowProps The props necessary to render the `<LabelWorkflow.Element />` for shipment
+ * based or sales order based label purchasing.
+ *
+ * @returns Element A React Element that will render the `<LabelWorkflow />` component.
+ *
+ * @example
+ * ```tsx
+ * <LabelWorkflow
+ *       {...elementProps}
+ *       callbacks={{ onLabelCreateSuccess }}
+ *       multiplexedId={elementIdProps}
+ * />
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link LabelWorkflowProps | The props that are passed into the `<LabelWorkflow />` component}
+ * @see {@link LabelWorkflow.useLabelWorkflow | The `hook` that is used to manage the state of the `<LabelWorkflow />` component}
+ */
+const Element = createElement.createElement(Component, errorFallback.ErrorFallback, {
+  resources: {
+    en: index
+  }
+});
+
+exports.Component = Component;
+exports.Element = Element;

package/cjs/workflows/onboarding/components/carrier-recovery-form/carrier-recovery-form-schema.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var min = require('libphonenumber-js/min');
+var zod = require('zod');
+var addressSchema = require('../../../../components/forms/address-form/address-schema.cjs');
+var address = require('../../../../constants/shipengine/address.cjs');
+
+const baseSchema = addressSchema.addressSchema.extend({
+  addressResidentialIndicator: zod.z.preprocess(v => v === "yes" ? true : false, zod.z.boolean().default(false).transform(value => value ? "yes" : "no")),
+  companyName: zod.z.string().trim().min(1),
+  phone: zod.z.string().trim().min(1)
+}).refine(schema => min.isValidPhoneNumber(schema.phone, schema.countryCode), {
+  message: "schemaErrors.notAValidPhoneNumber",
+  path: ["phone"]
+}).refine(schema => {
+  if (schema.countryCode === "US") {
+    return schema.stateProvince && address.usStateCodes.includes(schema.stateProvince);
+  }
+  return true;
+}, {
+  message: "schemaErrors.invalidStateProvince",
+  path: ["stateProvince"]
+}).refine(schema => {
+  if (schema.countryCode === "US") {
+    return address.postalCodeRegex.test(schema.postalCode);
+  }
+  return true;
+}, {
+  message: "schemaErrors.invalidPostalCode",
+  path: ["postalCode"]
+});
+const getCarrierRecoverySchema = requiresAddress => zod.z.object({
+  address: requiresAddress ? baseSchema : baseSchema.optional(),
+  iovationBlackbox: zod.z.string().trim().min(1)
+});
+
+exports.getCarrierRecoverySchema = getCarrierRecoverySchema;

package/cjs/workflows/onboarding/components/carrier-recovery-form/carrier-recovery-form.cjs

@@ -0,0 +1,136 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useBlackBoxDetection = require('../../../../hooks/use-black-box-detection.cjs');
+var formLogger = require('../../../../utilities/form-logger.cjs');
+var validation = require('../../../../utilities/validation.cjs');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var carrierRecoveryFormSchema = require('./carrier-recovery-form-schema.cjs');
+var carrierRecoveryForm_styles = require('./carrier-recovery-form.styles.cjs');
+var addressFields = require('../../../../components/forms/address-form/address-fields.cjs');
+var buttonGroup = require('../../../../components/button-group/button-group.cjs');
+var submitButton = require('../../../../components/field/submit-button/submit-button.cjs');
+
+const CarrierRecoveryForm = ({
+  address,
+  carrierMetadata,
+  errors,
+  fundingSourceId,
+  onSkip,
+  onSubmit
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const [blackboxErrors, setBlackboxErrors] = React.useState(null);
+  const mergedErrors = [...(errors !== null && errors !== void 0 ? errors : []), ...(blackboxErrors !== null && blackboxErrors !== void 0 ? blackboxErrors : [])];
+  const isAddressRequired = !!carrierMetadata.carrierProfile.registrationRequirements.find(r => r.requirementType === "pickup_address");
+  const carrierFriendlyName = carrierMetadata.friendlyName;
+  const form = reactHookForm.useForm({
+    defaultValues: Object.assign({}, isAddressRequired && address && {
+      address: Object.assign(Object.assign({}, address), {
+        countryCode: address.countryCode
+      })
+    }),
+    resolver: validation.validationResolver(carrierRecoveryFormSchema.getCarrierRecoverySchema(isAddressRequired))
+  });
+  useBlackBoxDetection.useBlackboxDetection({
+    onError: () => setBlackboxErrors([{
+      errorCode: "unspecified",
+      errorSource: "client",
+      errorType: "unknown",
+      message: t("register-wallet:sections.notifications.blackBox.description")
+    }]),
+    onSuccess: bb => {
+      form.setValue("iovationBlackbox", bb);
+      setBlackboxErrors(null);
+    }
+  });
+  const handleSubmit = form.handleSubmit(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    yield onSubmit(fundingSourceId, values);
+  }));
+  return jsxRuntime.jsx("form", Object.assign({
+    "data-testid": "carrier-recovery-form",
+    id: "carrier-recovery-form",
+    onSubmit: formLogger.formLogger.capture(handleSubmit)
+  }, {
+    children: jsxRuntime.jsxs(giger.Grid, Object.assign({
+      css: carrierRecoveryForm_styles.styles.grid,
+      noPadding: true
+    }, {
+      children: [isAddressRequired && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.GridChild, Object.assign({
+          colSpan: 12
+        }, {
+          children: jsxRuntime.jsx(giger.Typography, Object.assign({
+            css: carrierRecoveryForm_styles.styles.heading,
+            variant: "heading4"
+          }, {
+            children: t("register-wallet:sections.carriers.title")
+          }))
+        })), jsxRuntime.jsx(giger.GridChild, Object.assign({
+          colSpan: 12,
+          css: carrierRecoveryForm_styles.styles.subtitle
+        }, {
+          children: jsxRuntime.jsx(giger.Typography, Object.assign({
+            variant: "subtitle1"
+          }, {
+            children: t("register-wallet:sections.carriers.subtitle")
+          }))
+        }))]
+      }), !!(mergedErrors === null || mergedErrors === void 0 ? void 0 : mergedErrors.length) && jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+          title: t("register-wallet:sections.notifications.carrier.title", {
+            carrierFriendlyName
+          }),
+          type: giger.NotificationType.ERROR
+        }, {
+          children: mergedErrors.map(({
+            message
+          }) => message).join(" ")
+        }))
+      })), isAddressRequired && jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 12,
+        "data-testid": "address-fields"
+      }, {
+        children: jsxRuntime.jsx(addressFields.AddressFields, {
+          form: form,
+          formatFieldName: fieldName => `address.${fieldName}`,
+          optionalFields: ["addressLine2", "email"]
+        })
+      })), jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+          justify: "center"
+        }, {
+          children: [jsxRuntime.jsx(giger.Button, Object.assign({
+            "data-testid": "actions.skipForNow",
+            onClick: onSkip,
+            type: "button",
+            variant: giger.ButtonVariant.OUTLINED
+          }, {
+            children: t("actions.skipForNow")
+          })), jsxRuntime.jsx(submitButton.SubmitButton, Object.assign({
+            control: form.control,
+            "data-testid": "actions.tryAgain",
+            form: "carrier-recovery-form",
+            variant: giger.ButtonVariant.FILLED
+          }, {
+            children: t("actions.tryAgain")
+          }))]
+        }))
+      }))]
+    }))
+  }));
+};
+
+exports.CarrierRecoveryForm = CarrierRecoveryForm;