@shipengine/elements 2.18.0 → 2.20.0

package/esm/workflows/onboarding/components/confirmation-and-submission-step/use-confirmation-and-submission-step.js

@@ -0,0 +1,192 @@
+import { __awaiter } from 'tslib';
+import { getSellerIdFromToken } from '../../../../utilities/checks.js';
+import { getDefaultWarehouse } from '../../../../utilities/shipengine/warehouses.js';
+import { useCallback } from 'react';
+import { useAddSandboxCarriers, useCreateFundingSource, useRegisterCarrier } from '@shipengine/react-api';
+import { useManageWarehouses } from '../../../../features/manage-warehouses/use-manage-warehouses.js';
+import { useElements } from '../../../../elements-provider/elements-context-provider.js';
+
+const useConfirmationAndSubmissionStep = ({
+  onStepComplete
+}) => {
+  const {
+    globalFeatures,
+    getToken
+  } = useElements();
+  const {
+    createWarehouse,
+    updateWarehouse,
+    updateWarehouseErrors,
+    refreshListWarehouses,
+    warehouses
+  } = useManageWarehouses();
+  const {
+    mutateAsync: addSandboxCarriers
+  } = useAddSandboxCarriers();
+  const {
+    error: createFundingSourceErrors,
+    isLoading: isCreatingFundingSource,
+    mutateAsync: createFundingSource,
+    reset: resetCreateFundingSource
+  } = useCreateFundingSource();
+  // TODO - This endpoint registers an array of carriers; shouldn't it be named useRegisterCarriers?
+  const {
+    error: registerCarrierErrors,
+    mutateAsync: registerCarrier,
+    isLoading: isRegisteringCarriers,
+    isSuccess: isRegisteringCarriersSuccess,
+    reset: resetRegisterCarrier
+  } = useRegisterCarrier();
+  const resetMutations = useCallback(() => {
+    resetCreateFundingSource();
+    resetRegisterCarrier();
+  }, [resetCreateFundingSource, resetRegisterCarrier]);
+  const createHandleCarrierConnections = useCallback(({
+    carrierProfiles,
+    defaultWarehouse,
+    insuranceProviderProfiles
+  }) => (fundingSourceId, {
+    address,
+    iovationBlackbox
+  }) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+      const addressToRegister = address !== null && address !== void 0 ? address : defaultWarehouse.originAddress;
+      // parcel guard check
+      const insuranceProviders = globalFeatures.enableParcelGuard ? insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.map(p => ({
+        acceptedTerms: [{
+          termType: p.terms.termType,
+          version: p.terms.version
+        }],
+        agreeToTerms: true,
+        fundingSourceId,
+        provider: p.provider
+      })) : undefined;
+      yield registerCarrier({
+        carriers: carrierProfiles.map(c => ({
+          acceptedTerms: c.requiredTerms.map(({
+            termType,
+            version
+          }) => ({
+            termType,
+            version
+          })),
+          agreeToTerms: true,
+          carrierCode: c.carrierCode,
+          fundingSourceId,
+          // TODO - Annoying; we should capitalize `Box` in WalletPayload so we can shorthand this property
+          iovationBlackBox: iovationBlackbox,
+          pickupAddress: Object.assign(Object.assign({}, addressToRegister), {
+            company: addressToRegister.companyName || "",
+            email: defaultWarehouse.originAddress.email,
+            fullName: addressToRegister.name,
+            // This is a hack to get around the fact that the API will only accept the 5 digit zip code for US addresses
+            postalCode: addressToRegister.postalCode.length === 10 ? addressToRegister.postalCode.slice(0, -5) : addressToRegister.postalCode
+          })
+        })),
+        insuranceProviders
+      });
+    } catch (_a) {
+      // Errors will bubble up to registerCarrier.errors
+    }
+  }), [registerCarrier, globalFeatures.enableParcelGuard]);
+  const createOnboardingSubmissionHandler = useCallback(({
+    carrierProfiles,
+    fundingSourceRequiredTerms,
+    insuranceProviderProfiles
+  }) => ({
+    address,
+    creditCard,
+    iovationBlackbox
+  }, warehousePayload) => __awaiter(void 0, void 0, void 0, function* () {
+    var _b, _c;
+    try {
+      const createOrUpdateWarehouse = warehousePayload => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+          if (warehousePayload.warehouseId) {
+            yield updateWarehouse(Object.assign(Object.assign({}, warehousePayload), {
+              warehouseId: warehousePayload.warehouseId
+            }));
+            if (!updateWarehouseErrors) {
+              return warehousePayload;
+            }
+          }
+          // Ex: partner provides a defaultShipFromAddress, but the seller has existing warehouses
+          // update the default warehouse instead of creating a new one
+          const defaultWarehouse = getDefaultWarehouse(warehouses);
+          const shouldUpdateDefaultWarehouse = (warehouses === null || warehouses === void 0 ? void 0 : warehouses.length) && (defaultWarehouse === null || defaultWarehouse === void 0 ? void 0 : defaultWarehouse.warehouseId) && warehousePayload.isDefault;
+          if (shouldUpdateDefaultWarehouse) {
+            yield updateWarehouse(Object.assign(Object.assign({}, warehousePayload), {
+              warehouseId: defaultWarehouse.warehouseId
+            }));
+            if (!updateWarehouseErrors) {
+              return warehousePayload;
+            }
+          }
+          // create a new warehouse if the seller doesn't have any warehouses
+          // or, if payload isDefault is false
+          return yield createWarehouse(warehousePayload);
+        } catch (error) {
+          console.error(error);
+        } finally {
+          yield refreshListWarehouses();
+        }
+        return;
+      });
+      if (globalFeatures.isSandbox) {
+        // Sandbox seller
+        const token = yield getToken();
+        const sellerId = (_b = getSellerIdFromToken(token)) !== null && _b !== void 0 ? _b : "";
+        yield Promise.all([createOrUpdateWarehouse(warehousePayload), addSandboxCarriers({
+          sellerId,
+          tryReuseCarrierConnection: true
+        })]);
+      } else {
+        // Standard seller
+        const [warehouse, fundingSource] = yield Promise.all([createOrUpdateWarehouse(warehousePayload), createFundingSource({
+          acceptedTerms: fundingSourceRequiredTerms.map(({
+            termType,
+            version
+          }) => ({
+            termType,
+            version
+          })),
+          agreeToTerms: true,
+          billingInfo: Object.assign(Object.assign({}, address), {
+            company: address.companyName || "",
+            email: (_c = address.email) !== null && _c !== void 0 ? _c : warehousePayload.originAddress.email,
+            fullName: address.name
+          }),
+          iovationBlackBox: iovationBlackbox,
+          paymentMethod: {
+            creditCardInfo: Object.assign({}, creditCard)
+          }
+        })]);
+        // TODO - need to be more programmatic for funding source required-fields
+        // https://auctane.atlassian.net/wiki/spaces/SE/pages/3628370266/ShipEngine+Funding+Sources+API
+        if (warehouse) {
+          yield createHandleCarrierConnections({
+            carrierProfiles,
+            defaultWarehouse: warehouse,
+            insuranceProviderProfiles: globalFeatures.enableParcelGuard ? insuranceProviderProfiles : undefined
+          })(fundingSource.fundingSource.fundingSourceId, {
+            iovationBlackbox
+          });
+        }
+      }
+      onStepComplete();
+    } catch (_d) {
+      // Errors will bubble up to createFundingSource.errors
+    }
+  }), [addSandboxCarriers, createFundingSource, createHandleCarrierConnections, createWarehouse, getToken, globalFeatures.enableParcelGuard, globalFeatures.isSandbox, onStepComplete, refreshListWarehouses, updateWarehouse, updateWarehouseErrors, warehouses]);
+  return {
+    createFundingSourceErrors,
+    createOnboardingSubmissionHandler,
+    isCreatingFundingSource,
+    isRegisteringCarriers,
+    isRegisteringCarriersSuccess,
+    registerCarrierErrors,
+    resetMutations
+  };
+};
+
+export { useConfirmationAndSubmissionStep };

package/esm/workflows/onboarding/components/funding-step/funding-step.js

@@ -0,0 +1,73 @@
+import { __awaiter, __rest } from 'tslib';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { WalletForm } from '../../../../components/forms/wallet-form/wallet-form.js';
+import { AddressPreferenceProvider } from '../../../../components/address-preference-context/address-preference-context.js';
+import { StepHeader } from '../step-header/step-header.js';
+
+const FundingStep = ({
+  address,
+  onSubmit,
+  showVatSettings
+}) => {
+  const {
+    t
+  } = useTranslation(["common", "register-wallet"]);
+  // TODO - Are we expecting to onboard folks that already have a wallet?
+  // if (!hasStampsWallet)
+  return jsx(AddressPreferenceProvider, Object.assign({
+    formHeader: jsx("header", {
+      children: jsx(StepHeader, {
+        title: t("register-wallet:sections.billing.title"),
+        tooltipMessage: t("register-wallet:sections.notifications.info.description")
+      })
+    }),
+    onSubmit: _a => __awaiter(void 0, void 0, void 0, function* () {
+      var {
+          passengerData
+        } = _a,
+        rest = __rest(_a, ["passengerData"]);
+      return yield onSubmit(Object.assign(Object.assign({}, passengerData), {
+        address: rest.originAddress
+      }));
+    })
+  }, {
+    children: jsx(WalletForm, {
+      address: address,
+      onSubmit: onSubmit,
+      showVatSettings: showVatSettings
+    })
+  }));
+  // TODO - Are these still needed? Suggest we programmatically handle all failed carrier registrations
+  // Step 4.1: Handle UPS Registration Errors
+  // if (upsEnabled && !hasUps && fundingSourceId) {
+  //   return (
+  //     <CarrierRecoveryForm
+  //       address={address}
+  //       carrierFriendlyName={"cool"}
+  //       carrierMetadata={{}}
+  //       errors={registerCarrierErrors}
+  //       fundingSourceId={fundingSourceId}
+  //       // onSkip={() => setOnboardingComplete(true)}
+  //       onSkip={() => {}}
+  //       // onSubmit={handleRegisterCarriers}
+  //       onSubmit={async () => {}}
+  //     />
+  //   );
+  // }
+  // // Step 4.2 Handle DHL Registration Errors
+  // if (!hasDhl && fundingSourceId) {
+  //   return (
+  //     <CarrierRecoveryForm
+  //       errors={registerCarrierErrors}
+  //       fundingSourceId={fundingSourceId}
+  //       // onSkip={() => setOnboardingComplete(true)}
+  //       onSkip={() => {}}
+  //       // onSubmit={handleRegisterCarriers}
+  //       onSubmit={async () => {}}
+  //     />
+  //   );
+  // }
+};
+
+export { FundingStep };

package/esm/workflows/onboarding/components/funding-step/index.js

@@ -0,0 +1 @@
+export { FundingStep } from './funding-step.js';

package/esm/workflows/onboarding/components/onboarding-wizard/index.js

@@ -0,0 +1 @@
+export { OnboardingWizard } from './onboarding-wizard.js';

package/esm/workflows/onboarding/components/onboarding-wizard/onboarding-wizard.js

@@ -0,0 +1,196 @@
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { assert } from '../../../../utilities/assertions.js';
+import { getDefaultWarehouse } from '../../../../utilities/shipengine/warehouses.js';
+import { getIsVatRequired } from '../../../../utilities/vat.js';
+import { useState, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Stepper, Step, StepStatus } from '@shipengine/giger';
+import { useListWarehouses } from '@shipengine/react-api';
+import { useTermsAgreementStep } from '../terms-agreement-step/use-terms-agreement-step.js';
+import { styles } from './onboarding-wizard.styles.js';
+import { useConfirmationAndSubmissionStep } from '../confirmation-and-submission-step/use-confirmation-and-submission-step.js';
+import { TermsAgreementStep } from '../terms-agreement-step/terms-agreement-step.js';
+import { ShipFromAddressStep } from '../ship-from-address-step/ship-from-address-step.js';
+import { FundingStep } from '../funding-step/funding-step.js';
+import { ConfirmationAndSubmissionStep } from '../confirmation-and-submission-step/confirmation-and-submission-step.js';
+import { WelcomePage } from '../welcome-page/welcome-page.js';
+import { CompletionPage } from '../completion-page/completion-page.js';
+import { useElements } from '../../../../elements-provider/elements-context-provider.js';
+import { Loader } from '../../../../components/loader/loader.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+import { PoweredByShipEngine } from '../../../../components/powered-by-shipengine/powered-by-shipengine.js';
+
+const OnboardingWizard = ({
+  defaultShipFromAddress,
+  onComplete: onWizardComplete,
+  onSellerOnboarded,
+  skipWelcomePage
+}) => {
+  var _a, _b;
+  const {
+    t
+  } = useTranslation();
+  const {
+    globalFeatures
+  } = useElements();
+  const {
+    data: warehouses
+  } = useListWarehouses();
+  const defaultWarehouse = (_a = getDefaultWarehouse(warehouses)) !== null && _a !== void 0 ? _a : warehouses === null || warehouses === void 0 ? void 0 : warehouses[0];
+  const defaultWarehousePayload = defaultWarehouse && {
+    isDefault: defaultWarehouse.isDefault,
+    name: defaultWarehouse.name,
+    originAddress: defaultWarehouse.originAddress,
+    returnAddress: defaultWarehouse.returnAddress,
+    warehouseId: defaultWarehouse.warehouseId
+  };
+  // TypeScript cant intuit that these values will always be defined see src/utilities/feature-flags.ts
+  const enabledCarriers = (_b = globalFeatures.enabledShipEngineCarriers) !== null && _b !== void 0 ? _b : [];
+  const [currentStep, setCurrentStep] = useState(0);
+  const [showWelcomePage, setShowWelcomePage] = useState(!skipWelcomePage);
+  const [showCompletionPage, setShowCompletionPage] = useState(false);
+  const [warehousePayload, setWarehousePayload] = useState();
+  const [walletPayload, setWalletPayload] = useState();
+  const {
+    carrierProfiles,
+    fundingSourceRequiredTerms,
+    fundingSourceMetadata,
+    handleSubmitTermsAgreement,
+    insuranceProviderProfiles
+  } = useTermsAgreementStep({
+    enabledCarriers,
+    onStepComplete: () => setCurrentStep(currentStep => currentStep + 1)
+  });
+  const handleSubmitShipFromAddress = useCallback(warehouse => {
+    setWarehousePayload(warehouse);
+    // if we have a wallet payload, we arrived here from edit in the confirmation step, jump back to confirmation step
+    setCurrentStep(currentStep => walletPayload ? 3 : currentStep + 1);
+  }, [walletPayload]);
+  const handleSubmitPaymentInformation = useCallback(walletPayload => {
+    setWalletPayload(walletPayload);
+    setCurrentStep(currentStep => currentStep + 1);
+  }, []);
+  const {
+    createOnboardingSubmissionHandler,
+    createFundingSourceErrors,
+    isCreatingFundingSource,
+    isRegisteringCarriers,
+    isRegisteringCarriersSuccess,
+    registerCarrierErrors,
+    resetMutations
+  } = useConfirmationAndSubmissionStep({
+    onStepComplete: () => {
+      setShowCompletionPage(true);
+      setWalletPayload(undefined);
+      onSellerOnboarded === null || onSellerOnboarded === void 0 ? void 0 : onSellerOnboarded();
+    }
+  });
+  const containerRef = useRef(null);
+  const steps = [
+  // Terms Agreement
+  {
+    component: () => {
+      if (fundingSourceMetadata.isLoading) return jsx(Loader, {
+        message: t("loading.data")
+      });
+      if (fundingSourceMetadata.error) throw new Error(t("errorMessages.unableToLoad.fundingSourceMetadata"));
+      assert(carrierProfiles && fundingSourceRequiredTerms, "TermsAgreementStep failed assertion.");
+      return jsx(TermsAgreementStep, {
+        carrierProfiles: carrierProfiles,
+        insuranceProviderProfiles: insuranceProviderProfiles,
+        onSubmit: handleSubmitTermsAgreement
+      });
+    },
+    label: t("onboarding:stepLabel.termsAgreement")
+  },
+  // Ship From Address
+  {
+    component: () => jsx(ShipFromAddressStep, {
+      defaultShipFromAddress: defaultShipFromAddress !== null && defaultShipFromAddress !== void 0 ? defaultShipFromAddress : defaultWarehousePayload,
+      onSubmit: handleSubmitShipFromAddress,
+      warehousePayload: warehousePayload
+    }),
+    label: t("onboarding:stepLabel.shipFromAddress")
+  },
+  // Funding
+  {
+    component: () => {
+      var _a, _b;
+      assert(warehousePayload, "FundingStep failed assertion.");
+      const fundingSourceRegion = (_a = fundingSourceMetadata.data) === null || _a === void 0 ? void 0 : _a.defaultRegionProfile.countryCode;
+      const isVatRequiredCountry = getIsVatRequired(fundingSourceRegion);
+      return jsx(FundingStep, {
+        address: (_b = walletPayload === null || walletPayload === void 0 ? void 0 : walletPayload.address) !== null && _b !== void 0 ? _b : warehousePayload.originAddress,
+        onSubmit: handleSubmitPaymentInformation,
+        showVatSettings: isVatRequiredCountry && (globalFeatures === null || globalFeatures === void 0 ? void 0 : globalFeatures.showVatSettings)
+      });
+    },
+    label: t("onboarding:stepLabel.fundingAndCarrierConnection")
+  },
+  // Confirmation and Submission
+  {
+    component: () => {
+      if (isCreatingFundingSource) return jsx(Loader, {
+        message: t("loading.creatingFundingSource")
+      });
+      // after carriers is done registering, hold the ui in place until next step rerenders the ui
+      if (isRegisteringCarriers || isRegisteringCarriersSuccess) return jsx(Loader, {
+        message: t("loading.connectingCarriers")
+      });
+      assert(carrierProfiles && fundingSourceRequiredTerms && walletPayload && warehousePayload, "Confirmation Step failed assertion.");
+      return jsx(ConfirmationAndSubmissionStep, {
+        createFundingSourceErrors: createFundingSourceErrors,
+        onEdit: returnToStep,
+        onSubmit: createOnboardingSubmissionHandler({
+          carrierProfiles,
+          fundingSourceRequiredTerms,
+          insuranceProviderProfiles
+        }),
+        registerCarrierErrors: registerCarrierErrors,
+        walletPayload: walletPayload,
+        warehousePayload: warehousePayload
+      });
+    },
+    label: t("onboarding:stepLabel.confirmation")
+  }];
+  const returnToStep = useCallback(step => {
+    // If we navigate back to the funding step, we need to clear the wallet payload and require the user to re-enter their payment information
+    if (step === 2) {
+      setWalletPayload(undefined);
+    }
+    setCurrentStep(step);
+    resetMutations();
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [resetMutations]);
+  return jsxs("div", Object.assign({
+    css: styles.container,
+    ref: containerRef
+  }, {
+    children: [showWelcomePage && jsx(WelcomePage, {
+      onContinue: () => setShowWelcomePage(false)
+    }), showCompletionPage && jsx(CompletionPage, {
+      onContinue: onWizardComplete
+    }), !showCompletionPage && !showWelcomePage && jsxs(Fragment, {
+      children: [jsx(Stepper, Object.assign({
+        currentStep: currentStep + 1 /* Stepper uses a one-based index */
+      }, {
+        children: steps.map((step, idx) => jsx(Step, {
+          "aria-current": idx === currentStep && "step",
+          css: styles.step,
+          label: step.label,
+          onClick: () => {
+            returnToStep(idx);
+          },
+          status: idx < currentStep ? StepStatus.STATUS_COMPLETED : idx === currentStep ? StepStatus.STATUS_CURRENT : StepStatus.STATUS_DISABLED
+        }, step.label))
+      })), steps[currentStep].component()]
+    }), globalFeatures.poweredByShipEngine && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 10
+      }), jsx(PoweredByShipEngine, {})]
+    })]
+  }));
+};
+
+export { OnboardingWizard };

package/esm/workflows/onboarding/components/onboarding-wizard/onboarding-wizard.styles.js

@@ -0,0 +1,17 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  container: theme => ({
+    display: "grid",
+    gridTemplateRows: "auto 1fr ",
+    minHeight: "100%",
+    padding: scopeTheme(theme).spacing(2)
+  }),
+  step: {
+    "& > span:last-child": {
+      position: "static"
+    }
+  }
+});
+
+export { styles };

package/esm/workflows/onboarding/components/ship-from-address-step/index.js

@@ -0,0 +1 @@
+export { ShipFromAddressStep } from './ship-from-address-step.js';

package/esm/workflows/onboarding/components/ship-from-address-step/ship-from-address-step.js

@@ -0,0 +1,56 @@
+import { __awaiter, __rest } from 'tslib';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { WarehouseForm } from '../../../../components/forms/warehouse-form/warehouse-form.js';
+import { AddressPreferenceProvider } from '../../../../components/address-preference-context/address-preference-context.js';
+import { StepHeader } from '../step-header/step-header.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+
+const ShipFromAddressStep = ({
+  defaultShipFromAddress,
+  warehousePayload,
+  onSubmit
+}) => {
+  var _a, _b;
+  const {
+    t
+  } = useTranslation("onboarding");
+  const pendingWarehouse = warehousePayload ? Object.assign(Object.assign({}, warehousePayload), {
+    returnAddress: (_a = warehousePayload.returnAddress) !== null && _a !== void 0 ? _a : warehousePayload.originAddress
+  }) : undefined;
+  const pendingShipFrom = defaultShipFromAddress ? Object.assign(Object.assign({}, defaultShipFromAddress), {
+    returnAddress: (_b = defaultShipFromAddress.returnAddress) !== null && _b !== void 0 ? _b : defaultShipFromAddress.originAddress
+  }) : undefined;
+  return jsxs(AddressPreferenceProvider, Object.assign({
+    formHeader: jsx("div", Object.assign({
+      css: {
+        textAlign: "center"
+      }
+    }, {
+      children: jsx(StepHeader, {
+        title: t("warehouse.title"),
+        tooltipMessage: t("tooltip.warehouse")
+      })
+    })),
+    onSubmit: _c => __awaiter(void 0, void 0, void 0, function* () {
+      var {
+          passengerData
+        } = _c,
+        rest = __rest(_c, ["passengerData"]);
+      return yield onSubmit(Object.assign(Object.assign({}, rest), passengerData));
+    })
+  }, {
+    children: [jsx(Spacer, {
+      multiplier: 1
+    }), jsx(WarehouseForm, {
+      onSubmit: onSubmit,
+      requireEmail: true,
+      shouldForceDefault: (pendingWarehouse === null || pendingWarehouse === void 0 ? void 0 : pendingWarehouse.isDefault) || (pendingShipFrom === null || pendingShipFrom === void 0 ? void 0 : pendingShipFrom.isDefault),
+      submitButtonTitle: t("actions.continue"),
+      useStrictSchema: true,
+      warehouse: pendingWarehouse !== null && pendingWarehouse !== void 0 ? pendingWarehouse : pendingShipFrom
+    })]
+  }));
+};
+
+export { ShipFromAddressStep };

package/esm/workflows/onboarding/components/step-header/index.js

@@ -0,0 +1 @@
+export { StepHeader } from './step-header.js';

package/esm/workflows/onboarding/components/step-header/step-header.js

@@ -0,0 +1,56 @@
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { Typography, IconTooltip, IconSize } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { styles } from './step-header.styles.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+
+const StepHeader = ({
+  title,
+  subtitle,
+  tooltipMessage
+}) => {
+  return jsxs(Fragment, {
+    children: [jsxs("header", Object.assign({
+      css: styles.header
+    }, {
+      children: [jsx("h4", Object.assign({
+        css: {
+          margin: 0
+        }
+      }, {
+        children: jsx(Typography, Object.assign({
+          variant: "heading4"
+        }, {
+          children: title
+        }))
+      })), tooltipMessage && jsx(IconTooltip, Object.assign({
+        css: styles.iconTooltip,
+        icon: IconNames.INFO_FILLED,
+        placement: "auto",
+        size: IconSize.SIZE_MEDIUM
+      }, {
+        children: jsx("div", Object.assign({
+          css: styles.tooltipContainer
+        }, {
+          children: jsx(Typography, Object.assign({
+            variant: "small"
+          }, {
+            children: tooltipMessage
+          }))
+        }))
+      }))]
+    })), subtitle && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 2
+      }), jsx(Typography, Object.assign({
+        variant: "body2"
+      }, {
+        children: subtitle
+      }))]
+    }), jsx(Spacer, {
+      multiplier: 1
+    })]
+  });
+};
+
+export { StepHeader };

package/esm/workflows/onboarding/components/step-header/step-header.styles.js

@@ -0,0 +1,19 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  header: () => ({
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "center"
+  }),
+  iconTooltip: theme => ({
+    color: scopeTheme(theme).palette.secondary.main,
+    marginLeft: scopeTheme(theme).spacing(1)
+  }),
+  tooltipContainer: {
+    maxWidth: "260px",
+    textAlign: "left"
+  }
+});
+
+export { styles };

package/esm/workflows/onboarding/components/terms-agreement-form/index.js

@@ -0,0 +1 @@
+export { TermsAgreementForm } from './terms-agreement-form.js';

package/esm/workflows/onboarding/components/terms-agreement-form/terms-agreement-form-schema.js

@@ -0,0 +1,7 @@
+import { z } from 'zod';
+
+const termsAgreementFormSchema = z.object({
+  agreement: z.literal(true)
+});
+
+export { termsAgreementFormSchema };