@shipengine/elements 2.19.0 → 2.20.0

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

@@ -0,0 +1,148 @@
+import { __awaiter } from 'tslib';
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { formLogger } from '../../../../utilities/form-logger.js';
+import { validationResolver } from '../../../../utilities/validation.js';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation, Trans } from 'react-i18next';
+import { Icon, IconSize, Link, Typography, Button, ButtonVariant } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { termsAgreementFormSchema } from './terms-agreement-form-schema.js';
+import { styles } from './terms-agreement-form.styles.js';
+import { useElements } from '../../../../elements-provider/elements-context-provider.js';
+import { CheckboxInput } from '../../../../components/field/checkbox-input/checkbox-input.js';
+import { DisplayTerm } from '../../../../components/display-term/display-term.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+import { ButtonGroup } from '../../../../components/button-group/button-group.js';
+import { SubmitButton } from '../../../../components/field/submit-button/submit-button.js';
+
+const TermsAgreementForm = ({
+  carrierTerms,
+  hideTerms,
+  insuranceProviderTerms,
+  isSubmitDisabled,
+  onSubmit
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    globalFeatures: {
+      enableParcelGuard
+    }
+  } = useElements();
+  const [showTerms, setShowTerms] = useState(false);
+  const form = useForm({
+    defaultValues: {
+      agreement: hideTerms
+    },
+    resolver: validationResolver(termsAgreementFormSchema)
+  });
+  const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
+    const payload = values;
+    onSubmit(payload.agreement);
+  }));
+  return jsxs("form", Object.assign({
+    css: styles.container,
+    onSubmit: formLogger.capture(handleSubmit)
+  }, {
+    children: [!hideTerms && jsx("div", {
+      children: jsx(CheckboxInput, {
+        ariaLabel: "I agree to the Terms of Service",
+        checkboxLabel: jsx(Trans, {
+          components: {
+            icon: jsx(Icon, {
+              name: showTerms ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM,
+              size: IconSize.SIZE_SMALL
+            }),
+            terms: jsx(Link, {
+              css: styles.expanderLink,
+              "data-testid": "terms-link",
+              onClick: e => {
+                e.preventDefault();
+                setShowTerms(prev => !prev);
+              },
+              onKeyDown: e => {
+                if (e.key === "Enter") {
+                  setShowTerms(prev => !prev);
+                }
+              },
+              role: "button",
+              tabIndex: 0
+            })
+          },
+          defaults: "I agree to the <terms>Terms of Service</terms>",
+          i18nKey: "terms.agreeToTerms"
+        }),
+        control: form.control,
+        "data-testid": "fields.agreement",
+        label: t("terms.fields.agreement"),
+        name: "agreement"
+      })
+    }), showTerms && jsxs("div", Object.assign({
+      css: styles.termsWell
+    }, {
+      children: [jsxs("div", {
+        children: [jsx(Typography, Object.assign({
+          bold: true,
+          variant: "body1"
+        }, {
+          children: t("terms.shipEngineTitle")
+        })), jsx(DisplayTerm, {
+          term: {
+            links: [{
+              link: "https://www.shipengine.com/terms-of-service/",
+              locale: "en-US",
+              title: t("onboarding:termsAndAgreementLinkText.shipEngineToS")
+            }, {
+              link: "https://auctane.com/legal/privacy-policy/",
+              locale: "en-US",
+              title: t("onboarding:termsAndAgreementLinkText.auctanePrivacyPolicy")
+            }]
+          }
+        }), !!carrierTerms.length && jsxs(Fragment, {
+          children: [jsx(Spacer, {}), jsx(Typography, Object.assign({
+            bold: true,
+            variant: "body1"
+          }, {
+            children: t("terms.carriersTitle")
+          })), carrierTerms.map(term => jsx(DisplayTerm, {
+            term: term
+          }, term.termType))]
+        }), enableParcelGuard && !!insuranceProviderTerms.length && jsxs(Fragment, {
+          children: [jsx(Spacer, {}), jsx(Typography, Object.assign({
+            bold: true,
+            variant: "body1"
+          }, {
+            children: t("terms.insuranceProvidersTitle")
+          })), insuranceProviderTerms.map(term => jsx(DisplayTerm, {
+            term: term
+          }, term.termType))]
+        })]
+      }), jsx(ButtonGroup, Object.assign({
+        justify: "end"
+      }, {
+        children: jsx(Button, Object.assign({
+          onClick: () => setShowTerms(false),
+          variant: ButtonVariant.OUTLINED
+        }, {
+          children: t("actions.close")
+        }))
+      }))]
+    })), jsx(ButtonGroup, Object.assign({
+      justify: "center"
+    }, {
+      children: jsx(SubmitButton, Object.assign({
+        alwaysRequireValidity: true,
+        control: form.control,
+        "data-testid": "actions.continue",
+        disabled: isSubmitDisabled,
+        variant: ButtonVariant.FILLED
+      }, {
+        children: t("actions.continue")
+      }))
+    }))]
+  }));
+};
+
+export { TermsAgreementForm };

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

@@ -0,0 +1,27 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  container: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    textAlign: "left"
+  },
+  expanderLink: theme => ({
+    alignItems: "center",
+    display: "inline-flex",
+    fontWeight: scopeTheme(theme).typography.fontWeight.normal
+  }),
+  fullWidth: {
+    width: "100%"
+  },
+  termsWell: theme => ({
+    backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
+    marginBottom: scopeTheme(theme).spacing(6),
+    padding: scopeTheme(theme).spacing(2),
+    width: "100%"
+  })
+});
+
+export { styles };

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

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

package/esm/workflows/onboarding/components/terms-agreement-step/terms-agreement-step.js

@@ -0,0 +1,82 @@
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { InlineNotification, NotificationType, Icon, IconSize } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { styles } from './terms-agreement-step.styles.js';
+import { TermsAgreementForm } from '../terms-agreement-form/terms-agreement-form.js';
+import { useCarrierMetadata } from '../../../../features/manage-carriers/hooks/use-carrier-metadata.js';
+import { useElements } from '../../../../elements-provider/elements-context-provider.js';
+import { StepHeader } from '../step-header/step-header.js';
+import { CarrierLogo } from '../../../../components/carrier-logo/carrier-logo.js';
+
+const TermsAgreementStep = ({
+  carrierProfiles,
+  insuranceProviderProfiles,
+  onSubmit
+}) => {
+  var _a, _b;
+  const {
+    t
+  } = useTranslation("onboarding");
+  const {
+    globalFeatures: {
+      enableParcelGuard
+    }
+  } = useElements();
+  const carrierFriendlyNames = useCarrierMetadata();
+  const hideTerms = carrierProfiles.length === 0;
+  const carrierTerms = carrierProfiles.flatMap(c => c.requiredTerms);
+  const insuranceProviderTerms = (_a = insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.flatMap(p => p.terms)) !== null && _a !== void 0 ? _a : [];
+  const showParcelGuard = enableParcelGuard && ((_b = insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.length) !== null && _b !== void 0 ? _b : 0) > 0;
+  return jsxs("div", Object.assign({
+    css: styles.container,
+    "data-testid": "terms-agreement-step"
+  }, {
+    children: [carrierProfiles.length < 1 ? jsx(InlineNotification, Object.assign({
+      css: {
+        textAlign: "left"
+      },
+      title: t("errors.noCarriers.title"),
+      type: NotificationType.ERROR
+    }, {
+      children: t("errors.noCarriers.subtitle")
+    })) : jsx(StepHeader, {
+      subtitle: t("termsAgreement.subtitle"),
+      title: t("termsAgreement.title")
+    }), jsxs("div", Object.assign({
+      css: styles.carrierLogos
+    }, {
+      children: [carrierProfiles.map(p => {
+        var _a;
+        return jsx(CarrierLogo, {
+          carrierCode: p.carrierCode,
+          carrierName: (_a = carrierFriendlyNames[p.carrierCode].name) !== null && _a !== void 0 ? _a : p.carrierCode,
+          size: "lg"
+        }, p.carrierCode);
+      }), showParcelGuard && jsxs(Fragment, {
+        children: [jsx(Icon, {
+          css: styles.plus,
+          name: IconNames.PLUS,
+          size: IconSize.SIZE_SMALL
+        }), insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.map(p => jsx(CarrierLogo, {
+          carrierCode: p.provider,
+          carrierName: p.friendlyName,
+          size: "lg"
+        }, p.provider))]
+      })]
+    })), jsx("div", Object.assign({
+      css: styles.fullWidth
+    }, {
+      children: jsx(TermsAgreementForm, {
+        carrierTerms: carrierTerms,
+        hideTerms: hideTerms,
+        insuranceProviderTerms: insuranceProviderTerms,
+        // Prevent form submission if there are no carriers to connect (ex. partner developer did not pass global feature `enabledShipEngineCarriers`, or it resolved to an empty array)
+        isSubmitDisabled: carrierProfiles.length < 1,
+        onSubmit: onSubmit
+      })
+    }))]
+  }));
+};
+
+export { TermsAgreementStep };

package/esm/workflows/onboarding/components/terms-agreement-step/terms-agreement-step.styles.js

@@ -0,0 +1,29 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  carrierLogos: theme => ({
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: scopeTheme(theme).spacing(1),
+    justifyContent: "center",
+    padding: `${scopeTheme(theme).spacing(3)}px 0`
+  }),
+  container: theme => ({
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    paddingBottom: scopeTheme(theme).spacing(8),
+    paddingTop: scopeTheme(theme).spacing(2),
+    textAlign: "center"
+  }),
+  fullWidth: {
+    width: "100%"
+  },
+  plus: () => ({
+    alignItems: "center",
+    display: "flex"
+  })
+});
+
+export { styles };

package/esm/workflows/onboarding/components/terms-agreement-step/use-terms-agreement-step.js

@@ -0,0 +1,46 @@
+import { filterFundingSourceCarriers } from '../../../../utilities/shipengine/carrier.js';
+import { getInsuranceProviderWithFriendlyName } from '../../../../utilities/shipengine/insurance.js';
+import { useMemo, useCallback } from 'react';
+import { useGetFundingSourceMetadata } from '@shipengine/react-api';
+
+const useTermsAgreementStep = ({
+  enabledCarriers,
+  onStepComplete
+}) => {
+  var _a, _b, _c, _d;
+  const fundingSourceMetadata = useGetFundingSourceMetadata();
+  // TODO - Remove assertion after fixing type in lmnt-platform
+  const fundingSourceRequiredTerms = (_a = fundingSourceMetadata.data) === null || _a === void 0 ? void 0 : _a.defaultFundingSourceProfile.requiredTerms;
+  const fundingSourceRegion = (_b = fundingSourceMetadata.data) === null || _b === void 0 ? void 0 : _b.defaultRegionProfile.countryCode;
+  const fundingSourceCarrierProfiles = (_c = fundingSourceMetadata.data) === null || _c === void 0 ? void 0 : _c.defaultRegionProfile.carrierProfiles;
+  const filteredFundingSourceCarrierProfiles = filterFundingSourceCarriers(fundingSourceCarrierProfiles, fundingSourceRegion);
+  const insuranceProviderProfiles = (_d = fundingSourceMetadata.data) === null || _d === void 0 ? void 0 : _d.defaultFundingSourceProfile.optionalTerms.map(terms => {
+    return Object.assign(Object.assign({}, getInsuranceProviderWithFriendlyName(terms.termType)), {
+      terms
+    });
+  });
+  const carrierProfiles = useMemo(() => {
+    const enabledCarrierProfiles = filteredFundingSourceCarrierProfiles === null || filteredFundingSourceCarrierProfiles === void 0 ? void 0 : filteredFundingSourceCarrierProfiles.filter(c => enabledCarriers.includes(c.carrierCode));
+    // Stamps/usps carrier ToS returns in funding source terms, add to carrier profiles
+    return enabledCarrierProfiles === null || enabledCarrierProfiles === void 0 ? void 0 : enabledCarrierProfiles.map(c => {
+      if (c.carrierCode === "stamps_com" && fundingSourceRequiredTerms) {
+        return Object.assign(Object.assign({}, c), {
+          requiredTerms: [...fundingSourceRequiredTerms, ...c.requiredTerms]
+        });
+      }
+      return c;
+    });
+  }, [enabledCarriers, filteredFundingSourceCarrierProfiles, fundingSourceRequiredTerms]);
+  const handleSubmitTermsAgreement = useCallback(() => {
+    onStepComplete();
+  }, [onStepComplete]);
+  return {
+    carrierProfiles,
+    fundingSourceMetadata,
+    fundingSourceRequiredTerms,
+    handleSubmitTermsAgreement,
+    insuranceProviderProfiles
+  };
+};
+
+export { useTermsAgreementStep };

package/esm/workflows/onboarding/components/welcome-page/index.js

@@ -0,0 +1 @@
+export { WelcomePage } from './welcome-page.js';

package/esm/workflows/onboarding/components/welcome-page/welcome-page.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { Typography, Button, ButtonColor, ButtonVariant } from '@shipengine/giger';
+import OnboardingGlobe from '../../../../assets/onboarding-globe.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+
+const WelcomePage = ({
+  onContinue
+}) => {
+  const {
+    t
+  } = useTranslation(["onboarding"]);
+  return jsxs("div", Object.assign({
+    css: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      textAlign: "center"
+    },
+    "data-testid": "welcome-page"
+  }, {
+    children: [jsx("img", {
+      alt: "Globe",
+      src: OnboardingGlobe
+    }), jsx(Spacer, {
+      multiplier: 4
+    }), jsx(Typography, Object.assign({
+      variant: "heading4"
+    }, {
+      children: t("onboarding:welcomePage.title")
+    })), jsx(Spacer, {
+      multiplier: 2
+    }), jsx(Typography, Object.assign({
+      css: {
+        textAlign: "center"
+      },
+      variant: "body2"
+    }, {
+      children: t("onboarding:welcomePage.message")
+    })), jsx(Spacer, {
+      multiplier: 4
+    }), jsx(Button, Object.assign({
+      bold: false,
+      color: ButtonColor.PRIMARY,
+      "data-testid": "onboarding:welcomePage.action",
+      onClick: onContinue,
+      type: "button",
+      variant: ButtonVariant.FILLED
+    }, {
+      children: t("onboarding:welcomePage.action")
+    }))]
+  }));
+};
+
+export { WelcomePage };

package/esm/workflows/onboarding/index.js

@@ -0,0 +1,2 @@
+import * as onboarding from './onboarding.js';
+export { onboarding as Onboarding };

package/esm/workflows/onboarding/onboarding.js

@@ -0,0 +1,89 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { OnboardingWizard } from './components/onboarding-wizard/onboarding-wizard.js';
+import en from '../../locales/en/index.js';
+import { createElement } from '../../create-element/create-element.js';
+import { ErrorFallback } from '../../components/error-fallback/error-fallback.js';
+
+/**
+ * # Onboarding Component
+ *
+ * - The `<Onboarding />` component is used to onboard a new user to the ShipEngine platform. This
+ * component will allow the user to create a warehouse, register a carrier, and create a funding
+ * source for their account. This is everything a user needs to begin fulfilling their shipments
+ * using the ShipEngine Platform.
+ *
+ * @param ComponentProps The base props that will be passed into the `<Onboarding />` component.
+ *
+ * @returns Element An EmotionJSX.Element that will render the `<Onboarding />` component
+ * with all the appropriate wrappers.
+ *
+ * @example
+ * You can see how the `<Component />` is used in the `createElement` function call below.
+ * ```tsx
+ * export const Element = createElement(Component, ErrorFallback, {
+ *   css: {
+ *     height: "100%",
+ *     maxWidth: "800px",
+ *     minWidth: "375px",
+ *     overflow: "auto",
+ *     scrollbarGutter: "stable both-edges",
+ *     width: "100%",
+ *   },
+ *   resources: { en },
+ * });
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link Onboarding.Element | The **Element** created to render `<Onboarding />`}
+ */
+const Component = ({
+  defaultShipFromAddress,
+  onComplete,
+  onSellerOnboarded,
+  skipWelcomePage
+}) => {
+  return jsx(OnboardingWizard, {
+    defaultShipFromAddress: defaultShipFromAddress,
+    onComplete: onComplete,
+    onSellerOnboarded: onSellerOnboarded,
+    skipWelcomePage: skipWelcomePage
+  });
+};
+/**
+ * # Registered Onboarding Element
+ *
+ * - This is the registered `<Onboarding />` element that will be used to render the
+ * `<Onboarding.Element />` component.
+ *
+ * @param ElementProps The props, callbacks, and resources necessary to render
+ * the `<Onboarding.Element />` component.
+ *
+ * @example
+ * The `<Component />` is the source JSX that is rendered when you make use of the `Onboarding`
+ * Element directly. Here is a brief example of how you would use it within your application.
+ * ```tsx
+ * <Onboarding.Element
+ *   onComplete={() => console.log('Onboarding Complete!')}
+ * />
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link Onboarding.ComponentProps | The **props** that can be passed into the `<Onboarding.Element />` component}
+ */
+const Element = createElement(Component, ErrorFallback, {
+  css: {
+    height: "100%",
+    maxWidth: "800px",
+    minWidth: "375px",
+    overflow: "auto",
+    scrollbarGutter: "stable both-edges",
+    width: "100%"
+  },
+  resources: {
+    en
+  }
+});
+
+export { Component, Element };