@shipengine/elements 2.20.0 → 2.21.0

package/cjs/workflows/connect-external-carrier/components/custom-external-carrier-form/custom-form-fedex.cjs

@@ -0,0 +1,259 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var connectExternalCarrierForm = require('../connect-external-carrier-form/connect-external-carrier-form.cjs');
+var eulaClickwrap = require('./eula-clickwrap.cjs');
+
+const newAccountHref = "https://www.fedex.com/en-us/create-account.html";
+const eulaHtmlHref = "https://shipengine-elements-sdk-build-prod.s3.us-east-1.amazonaws.com/connections/fedex-eula-4-june-2024.html";
+const eulaPdfHref = "https://shipengine-elements-sdk-build-prod.s3.us-east-1.amazonaws.com/connections/fedex-eula-4-june-2024.pdf";
+const supportedCountries = [{
+  enum: ["US"],
+  title: "United States of America"
+}, {
+  enum: ["CA"],
+  title: "Canada"
+}, {
+  enum: ["AU"],
+  title: "Australia"
+}, {
+  enum: ["NZ"],
+  title: "New Zealand"
+},
+// EU codes
+{
+  enum: ["AT"],
+  title: "Austria"
+}, {
+  enum: ["BE"],
+  title: "Belgium"
+}, {
+  enum: ["BG"],
+  title: "Bulgaria"
+}, {
+  enum: ["HR"],
+  title: "Croatia"
+}, {
+  enum: ["CY"],
+  title: "Cyprus"
+}, {
+  enum: ["CZ"],
+  title: "Czech Republic"
+}, {
+  enum: ["DK"],
+  title: "Denmark"
+}, {
+  enum: ["EE"],
+  title: "Estonia"
+}, {
+  enum: ["FI"],
+  title: "Finland"
+}, {
+  enum: ["FR"],
+  title: "France"
+}, {
+  enum: ["DE"],
+  title: "Germany"
+}, {
+  enum: ["GR"],
+  title: "Greece"
+}, {
+  enum: ["HU"],
+  title: "Hungary"
+}, {
+  enum: ["IE"],
+  title: "Ireland"
+}, {
+  enum: ["IT"],
+  title: "Italy"
+}, {
+  enum: ["LV"],
+  title: "Latvia"
+}, {
+  enum: ["LT"],
+  title: "Lithuania"
+}, {
+  enum: ["LU"],
+  title: "Luxembourg"
+}, {
+  enum: ["MT"],
+  title: "Malta"
+}, {
+  enum: ["NL"],
+  title: "Netherlands"
+}, {
+  enum: ["PL"],
+  title: "Poland"
+}, {
+  enum: ["PT"],
+  title: "Portugal"
+}, {
+  enum: ["RO"],
+  title: "Romania"
+}, {
+  enum: ["SK"],
+  title: "Slovakia"
+}, {
+  enum: ["SI"],
+  title: "Slovenia"
+}, {
+  enum: ["ES"],
+  title: "Spain"
+}, {
+  enum: ["SE"],
+  title: "Sweden"
+}];
+const supportedCountriesUK = [{
+  enum: ["GB"],
+  title: "United Kingdom"
+}];
+const fedexJsonSchema = isUK => ({
+  description: `You'll need an existing FedEx account to complete this form. If you don't have a FedEx account, please <a href="${newAccountHref}" target="_blank" rel="noopener noreferrer">click here to open one now!</a>`,
+  properties: {
+    accountNumber: {
+      maxLength: 50,
+      title: "FedEx Account No",
+      type: "string"
+    },
+    address1: {
+      // TODO: Can we group address1/address2 under the same header?
+      maxLength: 50,
+      title: "Address Line 1",
+      type: "string"
+    },
+    address2: {
+      // TODO: Can we group address1/address2 under the same header?
+      maxLength: 50,
+      title: "Address Line 2",
+      type: "string"
+    },
+    agreeToEula: {
+      title: "I agree to the End-User License Agreement",
+      type: "boolean"
+    },
+    city: {
+      maxLength: 50,
+      title: "City",
+      type: "string"
+    },
+    company: {
+      maxLength: 50,
+      title: "Company Name",
+      type: "string"
+    },
+    countryCode: {
+      oneOf: isUK ? supportedCountriesUK : supportedCountries,
+      title: "Country",
+      type: "string"
+    },
+    email: {
+      maxLength: 50,
+      title: "Email",
+      type: "string"
+    },
+    firstName: {
+      // TODO: Can we make firstname/lastname in the same row?
+      maxLength: 50,
+      title: "Contact First Name",
+      type: "string"
+    },
+    lastName: {
+      // TODO: Can we make firstname/lastname in the same row?
+      maxLength: 50,
+      title: "Contact Last Name",
+      type: "string"
+    },
+    nickname: {
+      title: "Account Nickname",
+      type: "string"
+    },
+    phone: {
+      maxLength: 20,
+      title: "Phone #",
+      type: "string"
+    },
+    postalCode: {
+      // TODO: Can we make this reactive to country selection? Can we group State/Zip?
+      maxLength: 8,
+      title: "Zip/Postal Code",
+      type: "string"
+    },
+    state: {
+      // TODO: Can we make this reactive to country selection? Can we group State/Zip?
+      maxLength: 50,
+      title: "State",
+      type: "string"
+    }
+  },
+  required: ["accountNumber", "firstName", "lastName", "email", "countryCode", "address1", "city", "state", "postalCode", "phone", "nickname"],
+  title: "Connect Your FedEx Account",
+  type: "object"
+});
+const fedexUiSchema = {
+  accountNumber: {
+    "ui:autofocus": true,
+    "ui:emptyValue": ""
+  },
+  agreeToEula: {
+    "ui:widget": "hidden"
+  },
+  email: {
+    "ui:options": {
+      inputType: "email"
+    }
+  },
+  phone: {
+    "ui:options": {
+      inputType: "tel"
+    }
+  },
+  "ui:order": ["accountNumber", "firstName", "lastName", "company", "email", "countryCode", "address1", "address2", "city", "state", "postalCode", "phone", "agreeToEula", "nickname"]
+};
+const CustomExternalCarrierFormFedex = ({
+  carrierName,
+  displayName,
+  iconUrl,
+  isBeta,
+  onCancel,
+  onCarrierConnected,
+  isUK
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation("connect-carrier");
+  // This is necessary to prevent adding a new Nickname field every time the component refreshes
+  const jsonSchema = React.useMemo(() => fedexJsonSchema(isUK), [isUK]);
+  const [agreeToEula, setAgreeToEula] = React.useState(false);
+  if (agreeToEula) {
+    return jsxRuntime.jsx(connectExternalCarrierForm.ConnectExternalCarrierForm, {
+      carrierName: carrierName,
+      displayName: displayName,
+      iconUrl: iconUrl,
+      initialFormData: {
+        agreeToEula,
+        nickname: ""
+      },
+      isBeta: isBeta,
+      jsonSchema: jsonSchema,
+      onCancel: onCancel,
+      onCarrierConnected: onCarrierConnected,
+      uiSchema: fedexUiSchema
+    });
+  }
+  return jsxRuntime.jsx(eulaClickwrap.EulaClickwrap, {
+    disclaimerFooter: t("customForms.fedex.disclaimerFooter"),
+    displayName: displayName,
+    documentHref: eulaHtmlHref,
+    downloadHref: eulaPdfHref,
+    eulaName: t("customForms.fedex.eulaName"),
+    iconUrl: iconUrl,
+    onAccept: () => setAgreeToEula(true),
+    onCancel: onCancel
+  });
+};
+
+exports.CustomExternalCarrierFormFedex = CustomExternalCarrierFormFedex;

package/cjs/workflows/connect-external-carrier/components/custom-external-carrier-form/custom-form-stamps_com.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var connectExternalCarrierForm = require('../connect-external-carrier-form/connect-external-carrier-form.cjs');
+
+const stampsJsonSchema = {
+  description: "Enter your Stamps.com information below to connect your existing account and any negotiated pricing.",
+  properties: {
+    nickname: {
+      title: "Account Nickname",
+      type: "string"
+    },
+    password: {
+      maxLength: 30,
+      title: "Password",
+      type: "string"
+    },
+    username: {
+      maxLength: 30,
+      title: "Stamps.com Username",
+      type: "string"
+    }
+  },
+  required: ["username", "password", "nickname"],
+  title: "Connect Your Stamps.com Account",
+  type: "object"
+};
+const stampsUiSchema = {
+  password: {
+    "ui:widget": "password"
+  },
+  "ui:order": ["username", "password", "nickname"]
+};
+const CustomExternalCarrierFormStampsCom = ({
+  carrierName,
+  displayName,
+  iconUrl,
+  isBeta,
+  onCancel,
+  onCarrierConnected
+}) => {
+  return jsxRuntime.jsx(connectExternalCarrierForm.ConnectExternalCarrierForm, {
+    carrierName: carrierName,
+    displayName: displayName,
+    iconUrl: iconUrl,
+    initialFormData: {
+      nickname: ""
+    },
+    isBeta: isBeta,
+    jsonSchema: stampsJsonSchema,
+    onCancel: onCancel,
+    onCarrierConnected: onCarrierConnected,
+    uiSchema: stampsUiSchema
+  });
+};
+
+exports.CustomExternalCarrierFormStampsCom = CustomExternalCarrierFormStampsCom;

package/cjs/workflows/connect-external-carrier/components/custom-external-carrier-form/eula-clickwrap.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 React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var eulaClickwrap_styles = require('./eula-clickwrap.styles.cjs');
+var section = require('../../../../components/section/section.cjs');
+var loader = require('../../../../components/loader/loader.cjs');
+var buttonGroup = require('../../../../components/button-group/button-group.cjs');
+
+const EulaClickwrap = ({
+  disclaimerFooter,
+  documentHref,
+  downloadHref,
+  displayName,
+  eulaName: _eulaName = "End User License Agreement",
+  iconUrl,
+  onAccept,
+  onCancel
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "connect-carrier"]);
+  const containerRef = React.useRef(null);
+  const [shadowRoot, setShadowRoot] = React.useState(null);
+  const [eulaLoaded, setEulaLoaded] = React.useState(false);
+  const [hasScrolled, setHasScrolled] = React.useState(false);
+  const [hasAccepted, setHasAccepted] = React.useState(false);
+  const handleScroll = React.useCallback(() => {
+    const container = containerRef.current;
+    if (container) {
+      // the acceptable difference is 10 - we don't need to scroll to the last pixel and this will give us enough treshold
+      const acceptableDifference = 10;
+      const isRead = Math.abs(container.scrollHeight - container.clientHeight - container.scrollTop) <= acceptableDifference;
+      if (isRead) {
+        setHasScrolled(true);
+      }
+    }
+  }, [setHasScrolled, containerRef]);
+  // Load the HTML file into the div. Cross-domain iframes can't do scroll events.
+  React.useEffect(() => {
+    if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
+      return;
+    }
+    if (!shadowRoot) {
+      setShadowRoot(containerRef.current.attachShadow({
+        mode: "open"
+      }));
+    }
+    const loadEula = () => tslib.__awaiter(void 0, void 0, void 0, function* () {
+      setEulaLoaded(false);
+      const eulaResp = yield fetch(documentHref);
+      const eulaHtml = yield eulaResp.text();
+      if (containerRef.current && shadowRoot) {
+        shadowRoot.innerHTML = eulaHtml;
+        containerRef.current.scrollTop = 0;
+        setHasScrolled(false);
+        setHasAccepted(false);
+        setEulaLoaded(true);
+      }
+    });
+    void loadEula();
+  }, [documentHref, containerRef, shadowRoot]);
+  return jsxRuntime.jsxs(section.Section, Object.assign({
+    bold: false,
+    hideBackground: true,
+    title: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [iconUrl && jsxRuntime.jsx("img", {
+        alt: "carrier logo",
+        css: eulaClickwrap_styles.styles.icon,
+        src: iconUrl
+      }), displayName && jsxRuntime.jsx(giger.Typography, Object.assign({
+        variant: "heading4"
+      }, {
+        children: displayName
+      }))]
+    })
+  }, {
+    children: [jsxRuntime.jsx(loader.Loader, {
+      loading: !eulaLoaded,
+      size: giger.SpinnerSize.SIZE_LARGE
+    }), jsxRuntime.jsx("div", {
+      css: eulaClickwrap_styles.styles.scrollContainer,
+      onScroll: handleScroll,
+      ref: containerRef
+    }), downloadHref && jsxRuntime.jsx("a", Object.assign({
+      href: downloadHref,
+      rel: "noopener noreferrer",
+      target: "_blank"
+    }, {
+      children: t("connect-carrier:actions.downloadEula", {
+        eulaName: _eulaName
+      })
+    })), jsxRuntime.jsx("p", {
+      children: t("connect-carrier:eula.toContinue", {
+        eulaName: _eulaName
+      })
+    }), jsxRuntime.jsx("p", {
+      children: jsxRuntime.jsx(giger.Checkbox, {
+        "aria-label": t("connect-carrier:eula.iAgree", {
+          eulaName: _eulaName
+        }),
+        checked: hasAccepted,
+        disabled: !hasScrolled,
+        label: t("connect-carrier:eula.iAgree", {
+          eulaName: _eulaName
+        }),
+        onChange: e => setHasAccepted(e.target.checked)
+      })
+    }), disclaimerFooter && jsxRuntime.jsx("p", {
+      children: disclaimerFooter
+    }), jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+      justify: "end"
+    }, {
+      children: [onCancel && jsxRuntime.jsx(giger.Button, Object.assign({
+        bold: false,
+        onClick: onCancel,
+        type: "button",
+        variant: giger.ButtonVariant.OUTLINED
+      }, {
+        children: t("actions.cancel")
+      })), jsxRuntime.jsx(giger.Button, Object.assign({
+        bold: false,
+        disabled: !hasAccepted,
+        onClick: onAccept,
+        type: "submit",
+        variant: giger.ButtonVariant.FILLED
+      }, {
+        children: t("actions.continue")
+      }))]
+    }))]
+  }));
+};
+
+exports.EulaClickwrap = EulaClickwrap;

package/cjs/workflows/connect-external-carrier/components/custom-external-carrier-form/eula-clickwrap.styles.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  icon: theme => ({
+    height: styles$1.scopeTheme(theme).iconSize.extra_large,
+    marginRight: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  scrollContainer: theme => ({
+    marginBottom: styles$1.scopeTheme(theme).spacing(4),
+    marginLeft: "auto",
+    marginRight: "auto",
+    maxHeight: "400px",
+    maxWidth: "800px",
+    overflowY: "scroll",
+    paddingRight: styles$1.scopeTheme(theme).spacing(1)
+  }),
+  spinner: {
+    marginLeft: "auto",
+    marginRight: "auto",
+    position: "relative"
+  }
+});
+
+exports.styles = styles;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var availableCarriersList = require('./available-carriers-list/available-carriers-list.cjs');
+var connectExternalCarrierForm = require('./connect-external-carrier-form/connect-external-carrier-form.cjs');
+var customExternalCarrierForm = require('./custom-external-carrier-form/custom-external-carrier-form.cjs');
+
+
+
+exports.AvailableCarriersList = availableCarriersList.AvailableCarriersList;
+exports.ConnectExternalCarrierForm = connectExternalCarrierForm.ConnectExternalCarrierForm;
+exports.CustomExternalCarrierForm = customExternalCarrierForm.CustomExternalCarrierForm;
+exports.hasCustomExternalCarrierConnectionForm = customExternalCarrierForm.hasCustomExternalCarrierConnectionForm;