@shipengine/elements 2.19.0 → 2.20.0

package/esm/elements/purchase-label/components/rate-form/rate-form.js

@@ -0,0 +1,225 @@
+import { __awaiter } from 'tslib';
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { useQueryClient } from '@tanstack/react-query';
+import { formLogger } from '../../../../utilities/form-logger.js';
+import { validationResolver } from '../../../../utilities/validation.js';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { rateSchema } from './rate-schema.js';
+import { RateView } from './rate-view.js';
+import { useRateOptions } from '../../hooks/use-rate-options.js';
+import { Section } from '../../../../components/section/section.js';
+import { FundAndPurchase } from '../fund-and-purchase/fund-and-purchase.js';
+import { PoweredByShipEngine } from '../../../../components/powered-by-shipengine/powered-by-shipengine.js';
+import { useElements } from '../../../../elements-provider/elements-context-provider.js';
+import { Purchase } from '../../../../features/select-label-layout/select-label-layout.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+
+const RateForm = ({
+  carriers,
+  currency,
+  defaultFeatures,
+  disabled,
+  displayableRateErrors,
+  displayableSaveRateErrors,
+  displayableShipmentErrors,
+  errors,
+  features,
+  fetchServicePoints,
+  fundingOrigin,
+  isLoading,
+  labelErrors,
+  labels,
+  labelsLoading,
+  listServicePointsErrors,
+  onSave,
+  onSelectRate,
+  onSubmit,
+  onVatRegistrationComplete,
+  preferredRates,
+  preferredServiceCodes,
+  rates,
+  salesOrder,
+  servicePointSearchQuery,
+  servicePointsFetching,
+  servicePointsResponse,
+  shipment,
+  hasShipFromAddressErrors,
+  showVatFeatures
+}) => {
+  const {
+    globalFeatures
+  } = useElements();
+  const {
+    t
+  } = useTranslation();
+  const queryClient = useQueryClient();
+  const rateFormScrollToRef = useRef(null);
+  const [selectedServicePoint, setSelectedServicePoint] = useState();
+  const form = useForm({
+    defaultValues: {
+      rate: {
+        isAcknowledged: true,
+        rateId: undefined
+      }
+    },
+    mode: "onChange",
+    resolver: validationResolver(rateSchema)
+  });
+  const {
+    rateId: selectedRateId
+  } = form.watch("rate");
+  const handleSubmit = formLogger.capture(form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
+    const rateId = values;
+    try {
+      yield onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(rateId, selectedServicePoint);
+    } finally {
+      // Invalidate carrier queries after the rate form is submitted, regardless of success.
+      // This allows the carrier balance to refresh if the purchase failed but funding succeeded.
+      void queryClient.invalidateQueries(["useGetCarrierById", selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.carrierId], {
+        exact: true
+      });
+      void queryClient.invalidateQueries(["useListCarriers"], {
+        exact: true
+      });
+    }
+  })));
+  const rateOptions = useRateOptions(rates, fundingOrigin, preferredRates, carriers, shipment, servicePointsResponse === null || servicePointsResponse === void 0 ? void 0 : servicePointsResponse.servicePoints, !!(features === null || features === void 0 ? void 0 : features.requireDhlTermsAcknowledgement), !!(defaultFeatures === null || defaultFeatures === void 0 ? void 0 : defaultFeatures.betaEnableWindsorFramework));
+  const selectedRate = useMemo(() => rateOptions === null || rateOptions === void 0 ? void 0 : rateOptions.find(r => r.rateId === selectedRateId), [rateOptions, selectedRateId]);
+  const handleSaveRate = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    const isValid = yield form.trigger();
+    if (!isValid) return;
+    if (selectedRate) yield onSave === null || onSave === void 0 ? void 0 : onSave(selectedRate);
+    // sets the form to not be dirty, so that Save is disabled
+    form.reset(form.getValues());
+  }), [form, onSave, selectedRate]);
+  const onSelectServicePoint = useCallback(servicePoint => setSelectedServicePoint(servicePoint), [setSelectedServicePoint]);
+  // When rateOptions update, handle scrolling and single-rate auto-selection and form reset
+  useEffect(() => {
+    if (!(rateOptions === null || rateOptions === void 0 ? void 0 : rateOptions.length)) {
+      form.setValue("rate", {
+        isAcknowledged: false,
+        rateId: ""
+      }, {
+        shouldDirty: true
+      });
+    }
+    if (rateOptions.length === 1) {
+      form.setValue("rate", {
+        isAcknowledged: !rateOptions[0].requiresAcknowledgement,
+        rateId: rateOptions[0].rateId
+      }, {
+        shouldDirty: true,
+        shouldValidate: true
+      });
+    }
+    if (rateOptions.length || !!(errors === null || errors === void 0 ? void 0 : errors.length)) {
+      setTimeout(() => {
+        var _a;
+        (_a = rateFormScrollToRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+      }, 0);
+    }
+  }, [form, rateOptions, errors === null || errors === void 0 ? void 0 : errors.length]);
+  // If the selected rate is preferred and requires acknowledgement, then we know that this rate has come from a house account
+  // and we are not going to be able to fund and purchase.
+  const isPreferredRate = useMemo(() => {
+    const preferredRate = preferredRates === null || preferredRates === void 0 ? void 0 : preferredRates.find(r => r.rate.rateId === (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.rateId));
+    return !!preferredRate;
+  }, [preferredRates, selectedRate]);
+  const displayableErrors = useMemo(() => {
+    const rateAndShipmentErrors = [...(displayableRateErrors !== null && displayableRateErrors !== void 0 ? displayableRateErrors : []), ...(displayableShipmentErrors !== null && displayableShipmentErrors !== void 0 ? displayableShipmentErrors : [])];
+    if (hasShipFromAddressErrors) {
+      return {
+        messages: [t("errorMessages.updateShipFromAddress")],
+        title: "errorTypes.shipFromAddress"
+      };
+    }
+    if (rateAndShipmentErrors.length && rateOptions.length === 0) {
+      return {
+        messages: rateAndShipmentErrors,
+        title: "errorTypes.rateInvalid"
+      };
+    }
+    if (displayableSaveRateErrors === null || displayableSaveRateErrors === void 0 ? void 0 : displayableSaveRateErrors.length) {
+      return {
+        messages: displayableSaveRateErrors,
+        title: "errorTypes.saveRate"
+      };
+    }
+    if (labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length) {
+      return {
+        messages: labelErrors,
+        title: "errorTypes.purchase"
+      };
+    }
+    return undefined;
+  }, [displayableRateErrors, displayableShipmentErrors, hasShipFromAddressErrors, rateOptions.length, displayableSaveRateErrors, labelErrors, t]);
+  return jsxs("form", Object.assign({
+    id: "rate-form",
+    onSubmit: handleSubmit,
+    ref: rateFormScrollToRef
+  }, {
+    children: [jsx(Section, Object.assign({
+      "data-testid": "rates",
+      title: t("purchase-label:sections.rate", {
+        count: rateOptions.length
+      })
+    }, {
+      children: jsx(RateView, {
+        carriers: carriers,
+        errors: displayableErrors,
+        features: Object.assign(Object.assign({}, features), {
+          windsorFrameworkEnabled: !!(defaultFeatures === null || defaultFeatures === void 0 ? void 0 : defaultFeatures.betaEnableWindsorFramework)
+        }),
+        form: form,
+        isLoading: isLoading,
+        onSelectRate: onSelectRate,
+        preferredServiceCodes: preferredServiceCodes,
+        pudoServicePointDetails: {
+          fetchServicePoints,
+          isFetching: servicePointsFetching,
+          onSelectServicePoint,
+          servicePointSearchQuery: servicePointSearchQuery,
+          servicePointsErrors: listServicePointsErrors,
+          servicePointsResponse
+        },
+        rateOptions: rateOptions,
+        rates: rates,
+        salesOrder: salesOrder,
+        selectedRate: selectedRate,
+        shipment: shipment,
+        showVatFeatures: showVatFeatures
+      })
+    })), (features === null || features === void 0 ? void 0 : features.labelLayout) && !labelsLoading && !(labels === null || labels === void 0 ? void 0 : labels.length) && jsx(Section, Object.assign({
+      title: t("manage-defaults:label.title")
+    }, {
+      children: jsx(Purchase, {})
+    })), jsx(Section, Object.assign({
+      title: t("purchase-label:sections.payment")
+    }, {
+      children: jsx(FundAndPurchase, {
+        control: form.control,
+        currency: currency,
+        disabled: disabled,
+        isFundingEnabled: !!(features === null || features === void 0 ? void 0 : features.enableFunding),
+        isInvalidatedByError: !!(labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length),
+        onPurchase: handleSubmit,
+        onSave: handleSaveRate,
+        onVatRegistrationComplete: onVatRegistrationComplete,
+        rateData: {
+          isPreferredRate,
+          rate: selectedRate
+        },
+        showVatSettings: showVatFeatures && (globalFeatures === null || globalFeatures === void 0 ? void 0 : globalFeatures.showVatSettings)
+      })
+    })), (globalFeatures === null || globalFeatures === void 0 ? void 0 : globalFeatures.poweredByShipEngine) && jsxs(Fragment, {
+      children: [jsx(Spacer, {}), jsx(PoweredByShipEngine, {})]
+    })]
+  }));
+};
+
+export { RateForm };

package/esm/elements/purchase-label/components/rate-form/rate-form.styles.js

@@ -0,0 +1,24 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  ratesErrorMessage: theme => ({
+    marginTop: scopeTheme(theme).spacing(2)
+  }),
+  ratesInterstitial: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    textAlign: "center"
+  },
+  showMoreOrLessRatesButton: theme => ({
+    alignItems: "center",
+    display: "flex",
+    paddingTop: scopeTheme(theme).spacing(2)
+  }),
+  windsorFrameworkMessages: theme => ({
+    marginLeft: scopeTheme(theme).spacing(4)
+  })
+});
+
+export { styles };

package/esm/elements/purchase-label/components/rate-form/rate-schema.js

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+const rateSchema = z.object({
+  rate: z.object({
+    isAcknowledged: z.boolean().refine(v => v === true, "purchase-label:schemaErrors.needToAcknowledge"),
+    rateId: z.string()
+  })
+}).transform(schema => schema.rate.rateId);
+
+export { rateSchema };

package/esm/elements/purchase-label/components/rate-form/rate-view.js

@@ -0,0 +1,247 @@
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { formatMoney } from '../../../../utilities/money.js';
+import { getRequestedServices } from '../../../../utilities/shipengine/sales-order.js';
+import { useState, useMemo, useCallback } from 'react';
+import { useTranslation, Trans } from 'react-i18next';
+import { Typography, InlineNotification, NotificationType, Link } from '@shipengine/giger';
+import { styles } from './rate-form.styles.js';
+import { useWindsorFramework } from '../../hooks/use-windsor-framework.js';
+import { Cube } from '../../../../components/cube/cube.js';
+import { PudoRateTabs } from '../pudo/pudo-rate-tabs/pudo-rate-tabs.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+import { SearchBar } from '../../../../components/search-bar/search-bar.js';
+import { RateSelect } from '../../../../components/field/rate-select/rate-select.js';
+
+const RateView = ({
+  carriers,
+  errors,
+  features,
+  form,
+  isLoading,
+  onSelectRate,
+  preferredServiceCodes,
+  pudoServicePointDetails: _pudoServicePointDetails = {
+    fetchServicePoints: () => {},
+    onSelectServicePoint: () => {}
+  },
+  rateFormScrollToRef,
+  rateOptions,
+  rates,
+  salesOrder,
+  selectedRate,
+  shipment,
+  showVatFeatures
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    fetchServicePoints,
+    onSelectServicePoint,
+    isFetching: isFetchingServicePoints,
+    servicePointSearchQuery,
+    servicePointsErrors,
+    servicePointsResponse
+  } = _pudoServicePointDetails;
+  const [showHiddenRates, setShowHiddenRates] = useState(false);
+  const {
+    isWindsorFrameworkInvalid
+  } = useWindsorFramework(shipment, features === null || features === void 0 ? void 0 : features.windsorFrameworkEnabled);
+  const addressQueryCoordinates = useMemo(() => {
+    if (!servicePointsResponse) return {
+      lat: 0,
+      long: 0
+    };
+    const {
+      lat,
+      long
+    } = servicePointsResponse;
+    return {
+      lat,
+      long
+    };
+  }, [servicePointsResponse]);
+  const requestedServices = useMemo(() => getRequestedServices(salesOrder), [salesOrder]);
+  const formatRequestedService = () => requestedServices.length > 1 ? t("purchase-label:multipleShippingServices") : requestedServices[0];
+  const pudoRateOptions = useMemo(() => rateOptions === null || rateOptions === void 0 ? void 0 : rateOptions.filter(rate => rate.pudoType), [rateOptions]);
+  const getFilteredRateOptions = useCallback(rateOptions => {
+    return rateOptions.filter((option, index) =>
+    // show first 5 rates if there are 6 or fewer rate options
+    index < 5 && rateOptions.length <= 6 ||
+    // show the rates if they don't require acknowledgement and there are more than 6 rates
+    !option.requiresAcknowledgement && index < 6 && rateOptions.length > 6 ||
+    // show the rate if it matches the selectedRateId
+    option.rateId === (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.rateId) || (
+    // show the rates if they are a preferred service
+    preferredServiceCodes === null || preferredServiceCodes === void 0 ? void 0 : preferredServiceCodes.includes(option.serviceCode)));
+  }, [preferredServiceCodes, selectedRate]);
+  const handleShowMoreRates = useCallback(() => {
+    var _a;
+    setShowHiddenRates === null || setShowHiddenRates === void 0 ? void 0 : setShowHiddenRates(!showHiddenRates);
+    if (!showHiddenRates && rateFormScrollToRef) {
+      // scroll to top of Rates if we are showing hidden rates
+      (_a = rateFormScrollToRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+    }
+  }, [showHiddenRates, rateFormScrollToRef]);
+  const handleOnKeyDownShowMoreRates = useCallback(e => {
+    if (e.key === "Enter") {
+      setShowHiddenRates === null || setShowHiddenRates === void 0 ? void 0 : setShowHiddenRates(!showHiddenRates);
+    }
+  }, [showHiddenRates]);
+  // Return true if User has multiple accounts for a single carrier.
+  const hasDuplicateCarrierCode = () => {
+    if (!carriers) return false;
+    const uniqueCarrierCodes = new Set();
+    for (const carrier of carriers) {
+      // account for usps & stamps_com being different carrier codes, but the same carrier
+      if (uniqueCarrierCodes.has("stamps_com") && carrier.carrierCode === "usps" || uniqueCarrierCodes.has("usps") && carrier.carrierCode === "stamps_com") {
+        return true;
+      }
+      if (uniqueCarrierCodes.has(carrier.carrierCode)) {
+        return true;
+      }
+      uniqueCarrierCodes.add(carrier.carrierCode);
+    }
+    return false;
+  };
+  const rateSelectCommonProps = {
+    nicknameFeature: (features === null || features === void 0 ? void 0 : features.nicknameRate) && hasDuplicateCarrierCode(),
+    preferredServiceCodes,
+    rateFormScrollToRef,
+    setShowHiddenRates,
+    showHiddenRates,
+    showVatFeatures
+  };
+  if (isLoading) return jsxs("article", Object.assign({
+    css: styles.ratesInterstitial,
+    role: "presentation"
+  }, {
+    children: [jsx(Cube, {
+      animate: isLoading
+    }), jsx(Spacer, {}), jsx(Typography, {
+      children: t("purchase-label:loading.calculatingRates")
+    })]
+  }));
+  if (isWindsorFrameworkInvalid.isInvalid) return jsx(InlineNotification, Object.assign({
+    title: t("common:errorMessages.windsorFramework.doNotConform"),
+    type: NotificationType.ERROR
+  }, {
+    children: jsxs(Fragment, {
+      children: [t("common:errorMessages.windsorFramework.windsorFrameworkDefaultMessage"), jsx(Spacer, {
+        multiplier: 1
+      }), isWindsorFrameworkInvalid.messages && jsxs(Fragment, {
+        children: [t("common:errorMessages.windsorFramework.pleaseAddTheFollowingTaxIds"), jsx("ul", Object.assign({
+          css: styles.windsorFrameworkMessages
+        }, {
+          children: isWindsorFrameworkInvalid.messages.map((message, index) => jsx("li", {
+            children: t(`common:errorMessages.windsorFramework.${message}`)
+          }, index))
+        }))]
+      })]
+    })
+  }));
+  if (rateOptions.length) return jsxs(Fragment, {
+    children: [salesOrder && !!requestedServices.length && jsxs(Fragment, {
+      children: [jsx(InlineNotification, Object.assign({
+        type: NotificationType.INFO
+      }, {
+        children: jsx(Trans, {
+          components: [jsx("strong", {}), jsx("strong", {})],
+          i18nKey: "purchase-label:rates.requestedShippingNotification",
+          values: {
+            amount: formatMoney(salesOrder.paymentDetails.estimatedShipping),
+            service: formatRequestedService()
+          }
+        })
+      })), jsx(Spacer, {
+        multiplier: 3
+      })]
+    }), !!(features === null || features === void 0 ? void 0 : features.enablePudoUI) && pudoRateOptions.length ? jsx(PudoRateTabs, Object.assign({
+      form: form,
+      getFilteredRateOptions: getFilteredRateOptions,
+      mapCenter: {
+        lat: addressQueryCoordinates.lat,
+        lng: addressQueryCoordinates.long
+      },
+      onSearch: value => fetchServicePoints(value),
+      onSelectRate: onSelectRate,
+      onViewServicePoint: onSelectServicePoint,
+      options: pudoRateOptions,
+      rates: rates,
+      servicePointSearchQuery: typeof servicePointSearchQuery === "string" ? servicePointSearchQuery : "",
+      servicePointsErrors: servicePointsErrors,
+      servicePointsLoading: isFetchingServicePoints
+    }, rateSelectCommonProps)) : jsxs(Fragment, {
+      children: [pudoRateOptions.length > 0 && jsxs(Fragment, {
+        children: [jsx(SearchBar, {
+          defaultValue: typeof servicePointSearchQuery === "string" ? servicePointSearchQuery : "",
+          label: t("purchase-label:servicePoints.searchLabel"),
+          loading: isFetchingServicePoints,
+          onSearch: value => fetchServicePoints(value)
+        }), servicePointsErrors && jsxs(Fragment, {
+          children: [jsx(Spacer, {
+            multiplier: 3
+          }), jsx(InlineNotification, Object.assign({
+            type: NotificationType.INFO
+          }, {
+            children: t("purchase-label:servicePoints.error")
+          }))]
+        }), jsx(Spacer, {})]
+      }), jsx(RateSelect, Object.assign({
+        control: form.control,
+        displayErrors: false,
+        isLoading: isFetchingServicePoints,
+        label: "Rate",
+        name: "rate",
+        onClick: onSelectRate,
+        onSelectServicePoint: onSelectServicePoint,
+        options: showHiddenRates ? rateOptions : getFilteredRateOptions(rateOptions)
+      }, rateSelectCommonProps)), rateOptions.length > 4 && jsx(Link, Object.assign({
+        css: styles.showMoreOrLessRatesButton,
+        onClick: handleShowMoreRates,
+        onKeyDown: handleOnKeyDownShowMoreRates,
+        role: "button",
+        tabIndex: 0
+      }, {
+        children: jsx(Typography, Object.assign({
+          variant: "body1"
+        }, {
+          children: showHiddenRates ? t("purchase-label:actions.showFewerRates") : t("purchase-label:actions.showMoreRates")
+        }))
+      }))]
+    }), errors && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 2
+      }), jsx(InlineNotification, Object.assign({
+        title: t(errors.title),
+        type: NotificationType.ERROR
+      }, {
+        children: errors.messages
+      }))]
+    })]
+  });
+  if (errors) return jsx("article", Object.assign({
+    css: styles.ratesInterstitial,
+    role: "presentation"
+  }, {
+    children: jsx(InlineNotification, Object.assign({
+      title: t(errors.title),
+      type: NotificationType.ERROR
+    }, {
+      children: errors === null || errors === void 0 ? void 0 : errors.messages
+    }))
+  }));
+  return jsxs("article", Object.assign({
+    css: styles.ratesInterstitial,
+    role: "presentation"
+  }, {
+    children: [jsx(Cube, {}), jsx(Spacer, {}), jsx(Typography, {
+      children: (rates === null || rates === void 0 ? void 0 : rates.length) === 0 ? t("purchase-label:errorMessages.noRates") : t("purchase-label:cta.addPackageDetails")
+    })]
+  }));
+};
+
+export { RateView };