@shipengine/elements 0.33.0 → 0.34.0

package/index.cjs

@@ -4519,10 +4519,10 @@ const useBlackboxDetection = ({
 }) => {
   React.useEffect(() => {
     // basic configurations must be on page before snare.js is loaded
-    global.window.io_install_stm = false; // do not install Active X
-    global.window.io_exclude_stm = 12; // do not run Active X
-    global.window.io_install_flash = false; // do not install Flash
-    global.window.io_enable_rip = true; // collect Real IP information
+    window.io_install_stm = false; // do not install Active X
+    window.io_exclude_stm = 12; // do not run Active X
+    window.io_install_flash = false; // do not install Flash
+    window.io_enable_rip = true; // collect Real IP information
     const pollBlackBox = () => {
       try {
         if (typeof ioGetBlackbox !== "function") {
@@ -4541,7 +4541,7 @@ const useBlackboxDetection = ({
     };
     const intervalId = setInterval(pollBlackBox, 500);
     // attach script to DOM
-    const script = global.document.createElement("script");
+    const script = document.createElement("script");
     script.type = "text/javascript";
     script.async = true;
     script.src = "https://mpsnare.iesnare.com/snare.js";
@@ -4550,16 +4550,16 @@ const useBlackboxDetection = ({
         onError();
       }
     });
-    global.document.head.appendChild(script);
+    document.head.appendChild(script);
     return () => {
       if (intervalId) {
         clearTimeout(intervalId);
       }
-      delete global.window.io_install_stm;
-      delete global.window.io_exclude_stm;
-      delete global.window.io_install_flash;
-      delete global.window.io_enable_rip;
-      global.document.head.removeChild(script);
+      delete window.io_install_stm;
+      delete window.io_exclude_stm;
+      delete window.io_install_flash;
+      delete window.io_enable_rip;
+      document.head.removeChild(script);
     };
   }, [onSuccess, onError]);
 };
@@ -7455,6 +7455,7 @@ const getWrapperStyles = theme => /*#__PURE__*/css.css(process.env.NODE_ENV ===
 
 const DatePickerController = createFieldController();
 const DatePicker = fieldProps => {
+  const alchemy$1 = React.useContext(alchemy.AlchemyContext);
   const theme = react.useTheme();
   const datePickerRef = React.useRef(null);
   return jsxRuntime.jsx(DatePickerController, Object.assign({}, fieldProps, {
@@ -7475,7 +7476,7 @@ const DatePicker = fieldProps => {
         css: getOverrideStyles(theme)
       }, {
         children: jsxRuntime.jsx(ReactDatePicker__default["default"], Object.assign({
-          locale: LOCALE
+          locale: alchemy$1 === null || alchemy$1 === void 0 ? void 0 : alchemy$1.locale
         }, datePickerProps, {
           customInput: /*#__PURE__*/React.createElement( /*#__PURE__*/React.forwardRef(function InputWrapper(_a, forwardedRef) {
             var _b;
@@ -8846,16 +8847,8 @@ const AddFundsForm = ({
           }))]
         }))]
       })]
-    })), addFunds.error && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx(Spacer, {
-        multiplier: 1
-      }), jsxRuntime.jsx(giger.InlineNotification, Object.assign({
-        title: t("manage-funding:addFunds.error.title"),
-        type: giger.NotificationType.ERROR
-      }, {
-        children: addFunds.error[0].message
-      }))]
-    }), children === null || children === void 0 ? void 0 : children({
+    })), children === null || children === void 0 ? void 0 : children({
+      error: addFunds.error,
       isCustomAmount: selectedChip.value === "custom",
       isSubmitted,
       isSubmitting,
@@ -9197,6 +9190,12 @@ const AddressParser = ({
     const payload = values;
     onSubmit(payload);
   }));
+  form.watch((data, {
+    name
+  }) => {
+    var _a;
+    if (name === "fullAddress" && ((_a = data.fullAddress) === null || _a === void 0 ? void 0 : _a.length) == null) reset === null || reset === void 0 ? void 0 : reset();
+  });
   const errors = (parseErrors === null || parseErrors === void 0 ? void 0 : parseErrors.length) ? [t("errorMessages.parsingFailure")] : undefined;
   const formInterface = jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx(TextArea, {
@@ -9814,29 +9813,23 @@ const AddressPreferenceSelect = ({
       case "ERROR":
         return jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(Spacer, {
-            multiplier: 1
+            multiplier: 2
           }), jsxRuntime.jsx(giger.GridChild, Object.assign({
-            colSpan: 8,
-            css: theme => ({
-              paddingLeft: theme.spacing(1)
-            })
+            colSpan: 8
           }, {
             children: jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+              title: t("address.preference.addressNotValidated"),
               type: giger.NotificationType.ALERT
             }, {
               children: t("address.preference.unableToValidate")
             }))
           })), jsxRuntime.jsx(Spacer, {
-            multiplier: 1
-          }), jsxRuntime.jsx(giger.GridChild, Object.assign({
-            css: theme => ({
-              paddingLeft: theme.spacing(1)
-            })
-          }, {
+            multiplier: 2
+          }), jsxRuntime.jsx(giger.GridChild, {
             children: jsxRuntime.jsx(AddressDisplay, {
               address: (_b = warehousePreference.validation) === null || _b === void 0 ? void 0 : _b.originalAddress
             })
-          }))]
+          })]
         });
       default:
         // This code path should never be reached.
@@ -9859,7 +9852,7 @@ const AddressPreferenceSelect = ({
           children: t("common:address.preference.title")
         }))
       })), jsxRuntime.jsxs(giger.GridChild, Object.assign({
-        colSpan: 8
+        colSpan: 12
       }, {
         children: [jsxRuntime.jsx(giger.Typography, Object.assign({
           css: {
@@ -10231,10 +10224,7 @@ const WalletForm = ({
         return [...(errors !== null && errors !== void 0 ? errors : []), blackBoxError];
       });
     },
-    onSuccess: bb => {
-      console.log("bb", bb);
-      form.setValue("iovationBlackbox", bb);
-    }
+    onSuccess: bb => form.setValue("iovationBlackbox", bb)
   });
   const watchAddress = form.watch("address");
   const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
@@ -10924,7 +10914,8 @@ const styles$e = createStyles({
     display: "flex",
     flexDirection: "column",
     paddingBottom: theme.spacing(8),
-    paddingTop: theme.spacing(2)
+    paddingTop: theme.spacing(2),
+    textAlign: "center"
   }),
   termsLink: theme => ({
     alignItems: "center",
@@ -11986,7 +11977,8 @@ const styles$a = createStyles({
 });
 
 const LandingPage = ({
-  onSubmit
+  onSubmit,
+  partnerName
 }) => {
   const {
     t
@@ -12028,7 +12020,9 @@ const LandingPage = ({
         css: styles$a.description,
         variant: "body1"
       }, {
-        children: t("onboarding:landing.messageLine1")
+        children: partnerName ? t("onboarding:landing.partnerMessageLine1", {
+          partnerName: partnerName
+        }) : t("onboarding:landing.messageLine1")
       })), jsxRuntime.jsx(Spacer, {
         multiplier: 2
       }), jsxRuntime.jsx(giger.Typography, Object.assign({
@@ -12482,7 +12476,7 @@ const WarehouseForm = ({
           control: form.control,
           "data-testid": "warehouseFormSubmitButton",
           form: "warehouse-form",
-          requireDirty: true,
+          requireDirty: !warehouse,
           variant: _isOnboarding ? giger.ButtonVariant.FILLED : giger.ButtonVariant.OUTLINED
         }, {
           children: submitButtonTitle
@@ -12699,11 +12693,21 @@ const styles$6 = createStyles({
   container: theme => ({
     padding: theme.spacing(2)
   }),
+  iconTooltip: theme => ({
+    color: theme.palette.secondary.main,
+    display: "inline-block",
+    marginLeft: theme.spacing(1),
+    verticalAlign: "middle"
+  }),
   step: {
     "& > span:last-child": {
       position: "static"
     }
   },
+  tooltipContainer: () => ({
+    maxWidth: "260px",
+    textAlign: "left"
+  }),
   walletFormHeader: theme => ({
     margin: theme.spacing(4)
   }),
@@ -12719,18 +12723,20 @@ const styles$6 = createStyles({
 
 const Onboarding = ({
   connectedCarriers,
+  createFundingSource,
+  createFundingSourceErrors,
   createWarehouse,
   features,
   fundingSources,
   isRegisteringCarriers,
+  onboardingAddress,
   onCarrierCreated,
   onCompleteOnboarding,
   onFundingSourceCreated,
   onWarehouseCreated,
+  partnerName,
   registerCarrier,
   registerCarrierErrors,
-  createFundingSource,
-  createFundingSourceErrors,
   warehouses
 }) => {
   var _a, _b, _c;
@@ -12764,6 +12770,7 @@ const Onboarding = ({
   const hasDhl = connectedCarriers === null || connectedCarriers === void 0 ? void 0 : connectedCarriers.some(c => c.carrierCode === "dhl_express_worldwide");
   const fundingSourceId = (fundingSources === null || fundingSources === void 0 ? void 0 : fundingSources.length) ? fundingSources[0].fundingSourceId : undefined;
   const hasCompletedOnboarding = onboardingComplete || warehouses.length && hasStampsWallet && (hasUps || !upsEnabled) && hasDhl;
+  const containerRef = React.useRef(null);
   const currentStep = React.useMemo(() => {
     if (hasCompletedOnboarding) {
       return 5;
@@ -12876,7 +12883,8 @@ const Onboarding = ({
     }
     // Step 1: Landing Page
     if (!email) return jsxRuntime.jsx(LandingPage, {
-      onSubmit: e => setEmail(e)
+      onSubmit: e => setEmail(e),
+      partnerName: partnerName
     });
     // Step 2: Agree to Terms and Conditions
     if (!agreedToTerms) {
@@ -12925,7 +12933,8 @@ const Onboarding = ({
           onSubmit: payload => __awaiter(void 0, void 0, void 0, function* () {
             return handleCreateWarehouse(payload);
           }),
-          submitButtonTitle: t("actions.continue")
+          submitButtonTitle: t("actions.continue"),
+          warehouse: onboardingAddress
         })
       }));
     }
@@ -12948,21 +12957,39 @@ const Onboarding = ({
               variant: "subtitle1"
             }, {
               children: t("register-wallet:sections.billing.cardSubTitle")
+            })), jsxRuntime.jsx(giger.IconTooltip, Object.assign({
+              container: containerRef.current,
+              css: styles$6.iconTooltip,
+              icon: gigerTheme.IconNames.INFO_FILLED,
+              placement: "auto",
+              size: giger.IconSize.SIZE_MEDIUM
+            }, {
+              children: jsxRuntime.jsxs("div", Object.assign({
+                css: styles$6.tooltipContainer
+              }, {
+                children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+                  bold: true,
+                  variant: "small"
+                }, {
+                  children: t("register-wallet:sections.notifications.info.title")
+                })), jsxRuntime.jsx(Spacer, {
+                  multiplier: 1
+                }), jsxRuntime.jsx(giger.Typography, Object.assign({
+                  variant: "small"
+                }, {
+                  children: t("register-wallet:sections.notifications.info.description")
+                }))]
+              }))
             }))]
           })), jsxRuntime.jsx(Spacer, {
             multiplier: 1
-          }), (createFundingSourceErrors === null || createFundingSourceErrors === void 0 ? void 0 : createFundingSourceErrors.length) ? jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+          }), !!(createFundingSourceErrors === null || createFundingSourceErrors === void 0 ? void 0 : createFundingSourceErrors.length) && jsxRuntime.jsx(giger.InlineNotification, Object.assign({
             title: t("register-wallet:sections.notifications.error.title"),
             type: giger.NotificationType.ERROR
           }, {
             children: createFundingSourceErrors.map(({
               message
             }) => message).join(" ")
-          })) : jsxRuntime.jsx(giger.InlineNotification, Object.assign({
-            title: t("register-wallet:sections.notifications.info.title"),
-            type: giger.NotificationType.INFO
-          }, {
-            children: t("register-wallet:sections.notifications.info.description")
           }))]
         })),
         onSubmit: payload => __awaiter(void 0, void 0, void 0, function* () {
@@ -13020,14 +13047,15 @@ const Onboarding = ({
     });
   };
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$6.container
+    css: styles$6.container,
+    ref: containerRef
   }, {
     children: [jsxRuntime.jsxs(giger.Stepper, Object.assign({
       currentStep: currentStep
     }, {
       children: [jsxRuntime.jsx(giger.Step, {
         css: styles$6.step,
-        label: t("onboarding:steps.login")
+        label: t("onboarding:steps.register")
       }), jsxRuntime.jsx(giger.Step, {
         css: styles$6.step,
         label: t("onboarding:steps.carriers")
@@ -13036,7 +13064,7 @@ const Onboarding = ({
         label: t("onboarding:steps.addresses")
       }), jsxRuntime.jsx(giger.Step, {
         css: styles$6.step,
-        label: t("onboarding:steps.payment")
+        label: t("onboarding:steps.billing")
       })]
     })), renderStep(), ((_c = features === null || features === void 0 ? void 0 : features.presentation) === null || _c === void 0 ? void 0 : _c.poweredByShipEngine) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(Spacer, {}), jsxRuntime.jsx(PoweredByShipEngine, {})]
@@ -13110,29 +13138,6 @@ const Cube = _a => {
 };
 
 const styles$5 = createStyles({
-  balanceText: theme => ({
-    color: theme.palette.secondary.dark
-  }),
-  container: theme => ({
-    padding: `${theme.spacing(3)}px ${theme.spacing(4)}px`
-  }),
-  getFormExtension: isCustomAmount => theme => ({
-    backgroundColor: theme.palette.gray.ultraLight,
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.spacing(1),
-    // Negative margin is to compensate for the padding on AddFundsForm, since we want this
-    // section to seemlessly extend the form's well.
-    marginTop: theme.spacing(isCustomAmount ? -1.5 : -1),
-    padding: theme.spacing(2),
-    paddingTop: 0
-  }),
-  saveRateButton: {
-    whiteSpace: "nowrap"
-  }
-});
-
-const styles$4 = createStyles({
   icon: theme => ({
     color: theme.palette.primary.main,
     marginRight: theme.spacing(2)
@@ -13177,10 +13182,10 @@ const Section = _a => {
     rest = __rest(_a, ["bold", "title", "children", "rightContent"]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [title && jsxRuntime.jsx("summary", Object.assign({
-      css: styles$4.summary
+      css: styles$5.summary
     }, {
       children: jsxRuntime.jsxs("div", Object.assign({
-        css: styles$4.summaryWrapper
+        css: styles$5.summaryWrapper
       }, {
         children: [jsxRuntime.jsx(giger.Typography, Object.assign({
           bold: bold,
@@ -13188,19 +13193,42 @@ const Section = _a => {
         }, {
           children: title
         })), rightContent && jsxRuntime.jsx("div", Object.assign({
-          css: styles$4.rightContentWrapper
+          css: styles$5.rightContentWrapper
         }, {
           children: rightContent
         }))]
       }))
     })), jsxRuntime.jsx("section", Object.assign({
-      css: styles$4.section
+      css: styles$5.section
     }, rest, {
       children: children
     }))]
   });
 };
 
+const styles$4 = createStyles({
+  balanceText: theme => ({
+    color: theme.palette.secondary.dark
+  }),
+  container: theme => ({
+    padding: `${theme.spacing(3)}px ${theme.spacing(4)}px`
+  }),
+  getFormExtension: isCustomAmount => theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(1),
+    // Negative margin is to compensate for the padding on AddFundsForm, since we want this
+    // section to seemlessly extend the form's well.
+    marginTop: theme.spacing(isCustomAmount ? -1.5 : -1),
+    padding: theme.spacing(2),
+    paddingTop: 0
+  }),
+  saveRateButton: {
+    whiteSpace: "nowrap"
+  }
+});
+
 /**
  * Fund and Purchase handles the label purchase submission UX, ensuring that a user
  * has the necessary funds available and can add them if not. It allows a single button
@@ -13266,7 +13294,7 @@ const FundAndPurchase = ({
     }, {
       children: [jsxRuntime.jsx(giger.Button, Object.assign({
         bold: false,
-        css: styles$5.saveRateButton,
+        css: styles$4.saveRateButton,
         disabled: disabled || !carrierId || addFundsForm.isSubmitting || isRateFormSubmitting,
         isLoading: isSavingRate,
         onClick: handleSaveRate,
@@ -13286,7 +13314,7 @@ const FundAndPurchase = ({
   // render when no rate has been selected yet
   if (!carrierId) return jsxRuntime.jsxs("div", Object.assign({
     className: className,
-    css: styles$5.container
+    css: styles$4.container
   }, {
     children: [jsxRuntime.jsxs(Spread, {
       children: [jsxRuntime.jsx(CarrierBalance, {
@@ -13310,7 +13338,7 @@ const FundAndPurchase = ({
   //         show balance, but not the funding form.
   if (!isFundingEnabled) return jsxRuntime.jsxs("div", Object.assign({
     className: className,
-    css: styles$5.container
+    css: styles$4.container
   }, {
     children: [jsxRuntime.jsx(CarrierBalance, {
       carrierId: carrierId
@@ -13352,13 +13380,13 @@ const FundAndPurchase = ({
         var _a, _b;
         return jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsxs("section", Object.assign({
-            css: styles$5.getFormExtension(addFundsForm.isCustomAmount)
+            css: styles$4.getFormExtension(addFundsForm.isCustomAmount)
           }, {
             children: [jsxRuntime.jsx(InlineLabel, Object.assign({
               label: t("manage-funding:fundAndPurchase.newBalance")
             }, {
               children: jsxRuntime.jsx(giger.Typography, Object.assign({
-                css: styles$5.balanceText
+                css: styles$4.balanceText
               }, {
                 children: formatMoney({
                   amount: balance + ((_a = addFundsForm.selectedAmount) !== null && _a !== void 0 ? _a : 0),
@@ -13369,7 +13397,7 @@ const FundAndPurchase = ({
               label: t("manage-funding:fundAndPurchase.finalBalance")
             }, {
               children: jsxRuntime.jsx(giger.Typography, Object.assign({
-                css: styles$5.balanceText
+                css: styles$4.balanceText
               }, {
                 children: formatMoney({
                   amount: balance + ((_b = addFundsForm.selectedAmount) !== null && _b !== void 0 ? _b : 0) - purchaseAmount,
@@ -13389,6 +13417,15 @@ const FundAndPurchase = ({
             }))]
           })), jsxRuntime.jsx(Spacer, {
             multiplier: 2
+          }), addFundsForm.error && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+              title: t("manage-funding:addFunds.error.title"),
+              type: giger.NotificationType.ERROR
+            }, {
+              children: addFundsForm.error[0].message
+            })), jsxRuntime.jsx(Spacer, {
+              multiplier: 2
+            })]
           }), renderActionButtons(addFundsForm)]
         });
       }
@@ -15780,18 +15817,19 @@ var onboarding$1 = {
 	title: "Onboarding",
 	inlineTitle: "Why are we asking?",
 	landing: {
-		action: "Login",
+		action: "Register",
 		title: "Register Your Account",
 		subtitle: "Enter your email address to start shipping with discounted carrier rates",
 		welcome: "Welcome",
-		messageLine1: "Simplify your shipping workflow – no subscription required.",
-		messageLine2: "You can compare carrier services, ship domestic and international orders, and manage your postage payments."
+		messageLine1: "Simplify your shipping workflow.",
+		partnerMessageLine1: "Simplify your shipping workflow inside {{partnerName}}.",
+		messageLine2: "Let’s begin your account registration so that you can compare carrier services, ship domestic and international orders, and manage your postage payments."
 	},
 	steps: {
-		login: "Login",
+		register: "Register",
 		carriers: "Carriers",
 		addresses: "Addresses",
-		payment: "Payment"
+		billing: "Billing"
 	},
 	warehouse: {
 		title: "Ship From Address",
@@ -15921,8 +15959,8 @@ var registerWallet = {
 	"register-wallet": {
 	sections: {
 		setup: {
-			title: "Carriers Agreement",
-			subtitle: "Our service is including these carriers by default",
+			title: "Activate Carriers",
+			subtitle: "Activate the carriers in our service by agreeing to the carriers’ Terms of Service",
 			descriptionTitle: "What is a wallet?",
 			description: "Explaining the benefits of the wallet here"
 		},
@@ -15942,7 +15980,7 @@ var registerWallet = {
 			},
 			info: {
 				title: "Why we are asking?",
-				description: "Your account balance handles the cost of labels, insurance and carrier adjustments."
+				description: "We are offering a secure account balance to handle the cost of labels, insurance and carrier adjustments."
 			},
 			poBox: {
 				title: "PO Box cannot be used for Billing",
@@ -16078,7 +16116,9 @@ var accountSettings = /*#__PURE__*/Object.freeze({
 
 const Component$3 = ({
   features,
-  onCompleteOnboarding
+  onboardingAddress,
+  onCompleteOnboarding,
+  partnerName
 }) => {
   const {
     t
@@ -16131,10 +16171,12 @@ const Component$3 = ({
     features: features,
     fundingSources: fundingSources,
     isRegisteringCarriers: registeringCarriers || creatingFundingSource,
+    onboardingAddress: onboardingAddress,
     onCarrierCreated: onCarrierCreated,
     onCompleteOnboarding: onCompleteOnboarding,
     onFundingSourceCreated: onFundingSourceCreated,
     onWarehouseCreated: onWarehouseCreated,
+    partnerName: partnerName,
     registerCarrier: registerCarrier,
     registerCarrierErrors: registerCarrierErrors,
     warehouses: warehouses
@@ -16145,6 +16187,8 @@ const Element$4 = alchemy__default["default"].createElement(Component$3, ErrorFa
     height: "100%",
     maxWidth: "800px",
     minWidth: "440px",
+    overflow: "auto",
+    scrollbarGutter: "stable both-edges",
     width: "100%"
   },
   resources: {