@shipengine/elements 2.27.0 → 2.29.0

package/dist/cjs/hooks/use-get-service-data.cjs

@@ -0,0 +1,60 @@
+'use strict';
+
+var reactApi = require('@shipengine/react-api');
+var React = require('react');
+
+const formatServiceCode = serviceCode => {
+  return serviceCode.split("_").map((word, index) => {
+    if (index === 0) return word.toUpperCase();
+    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+  }).join(" ");
+};
+const useGetServiceData = () => {
+  const {
+    data: carrierList,
+    isLoading,
+    isError
+  } = reactApi.useListCarriers();
+  const getServiceInfo = React.useCallback(item => {
+    const {
+      serviceCode,
+      carrierId
+    } = item;
+    const labelCarrierCode = item.carrierCode;
+    // Error fetching carriers
+    if (isError) {
+      return {
+        serviceName: serviceCode !== null && serviceCode !== void 0 ? serviceCode : undefined,
+        carrierCode: undefined,
+        hasCarrierIcon: false
+      };
+    }
+    const carrier = carrierList === null || carrierList === void 0 ? void 0 : carrierList.find(c => c.carrierId === carrierId || c.carrierCode === labelCarrierCode);
+    // No carrier found for the given carrierId or carrierCode
+    if (!carrier) {
+      const serviceName = serviceCode ? formatServiceCode(serviceCode) : undefined;
+      const carrierCode = labelCarrierCode || undefined;
+      return {
+        serviceName,
+        carrierCode,
+        hasCarrierIcon: !!carrierCode
+      };
+    }
+    const service = carrier.services.find(s => s.serviceCode === serviceCode);
+    const carrierCode = labelCarrierCode || carrier.carrierCode;
+    const serviceName = (service === null || service === void 0 ? void 0 : service.name) || serviceCode || undefined;
+    return {
+      serviceName,
+      carrierCode,
+      hasCarrierIcon: !!service && !!carrierCode
+    };
+  }, [carrierList, isError]);
+  const getServiceName = React.useCallback(item => getServiceInfo(item).serviceName, [getServiceInfo]);
+  return {
+    getServiceInfo,
+    getServiceName,
+    isLoadingCarriers: isLoading
+  };
+};
+
+exports.useGetServiceData = useGetServiceData;

package/dist/cjs/locales/en/list-labels.json.cjs

@@ -3,12 +3,13 @@
 var listLabels = {
 	"list-labels": {
 	title: "List Labels",
+	none: "None",
 	headers: {
 		created: "Created Date",
 		shipmentId: "Shipment ID",
 		parcels: "Parcels",
 		recipient: "Recipient",
-		shipping: "Shipping",
+		service: "Service",
 		shipDate: "Ship Date",
 		status: "Label Status",
 		trackingStatus: "Delivery Status",

package/dist/cjs/locales/en/list-shipments.json.cjs

@@ -7,7 +7,7 @@ var listShipments = {
 	headers: {
 		created: "Created Date",
 		modified: "Modified Date",
-		shipping: "Shipping",
+		service: "Service",
 		shipmentId: "Shipment ID",
 		parcels: "Parcels",
 		recipient: "Recipient",

package/dist/cjs/locales/en/manage-warehouses.json.cjs

@@ -7,6 +7,8 @@ var manageWarehouses = {
 	editWarehouse: "Edit Address",
 	contactName: "Contact Name",
 	"default": "Default",
+	forcedDefault: "This is your default Ship From Address",
+	forcedDefaultNew: "This will be your default Ship From Address",
 	isDefault: "Set as default Ship From address",
 	locationName: "Location Name",
 	residentialAddress: "Residential Address",

package/dist/cjs/locales/en/register-wallet.json.cjs

@@ -8,6 +8,11 @@ var registerWallet = {
 			cardSubTitle: "Enter your payment details",
 			addressSubTitle: "Billing Address"
 		},
+		paymentMethod: {
+			title: "Payment Method",
+			creditCard: "Credit Card",
+			payByBank: "Pay by Bank"
+		},
 		vatSettings: {
 			title: "Tax Settings"
 		},

package/dist/cjs/package.json.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-var version = "2.27.0";
+var version = "2.29.0";
 
 exports.version = version;

package/dist/cjs/utilities/feature-flags/feature-flags.cjs

@@ -51,7 +51,8 @@ const defaultFeatureFlags = {
       labelLayout: false,
       nicknameRate: true,
       requireDhlTermsAcknowledgement: false,
-      saveRate: true
+      saveRate: true,
+      showMediaMail: false
     },
     shipmentForm: {
       addOns: true,

package/dist/cjs/workflows/onboarding/components/confirmation-and-submission-step/confirmation-and-submission-step.cjs

@@ -72,22 +72,33 @@ const ConfirmationAndSubmissionStep = ({
         marginTop: styles.scopeTheme(theme).spacing(1)
       }),
       children: [jsxRuntime.jsx(ccProviderLogo.CcProviderLogo, {
-        provider: provider,
-        width: 56
+        provider: provider
       }), jsxRuntime.jsx(giger.Typography, {
         variant: "body2",
         children: `**** **** **** ${last4 !== null && last4 !== void 0 ? last4 : "****"}`
       })]
     });
   };
+  const mapAdyenBrandToProvider = brand => {
+    if (!brand) return undefined;
+    const brandMap = {
+      visa: "visa",
+      mc: "mastercard",
+      amex: "american_express",
+      discover: "discover"
+    };
+    return brandMap[brand.toLowerCase()];
+  };
   const PaymentInfoDisplay = () => {
     var _a, _b;
     return jsxRuntime.jsx(giger.GridChild, {
       colSpan: 9,
       children: walletPayload ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(CreditCardDisplay, {
-          last4: walletPayload.creditCard.cardNumber.slice(-4),
-          provider: walletPayload.creditCard.provider
+        children: [walletPayload.paymentMethod === "credit_card" ? jsxRuntime.jsx(CreditCardDisplay, {
+          provider: mapAdyenBrandToProvider(walletPayload.cardBrand)
+        }) : jsxRuntime.jsx(giger.Typography, {
+          variant: "body2",
+          children: "Pay by Bank"
         }), showBillingAddress && jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(spacer.Spacer, {
             multiplier: 1

package/dist/cjs/workflows/onboarding/components/confirmation-and-submission-step/use-confirmation-and-submission-step.cjs

@@ -153,8 +153,8 @@ const useConfirmationAndSubmissionStep = ({
     insuranceProviderProfiles
   }) => (_a, warehousePayload_1) => _tslib.__awaiter(void 0, [_a, warehousePayload_1], void 0, function* ({
     address,
-    creditCard,
-    iovationBlackbox
+    iovationBlackbox,
+    auctanePaySessionId
   }, warehousePayload) {
     var _b, _c;
     const warehouse = yield createOrUpdateWarehouse(warehousePayload);
@@ -175,7 +175,7 @@ const useConfirmationAndSubmissionStep = ({
       // Standard seller
       let fundingSource;
       try {
-        fundingSource = yield createFundingSource({
+        const fundingSourcePayload = {
           acceptedTerms: fundingSourceRequiredTerms.map(({
             termType,
             version
@@ -191,9 +191,10 @@ const useConfirmationAndSubmissionStep = ({
           }),
           iovationBlackBox: iovationBlackbox,
           paymentMethod: {
-            creditCardInfo: Object.assign({}, creditCard)
+            sessionId: auctanePaySessionId
           }
-        });
+        };
+        fundingSource = yield createFundingSource(fundingSourcePayload);
       } catch (error) {
         console.error(error);
         throw error;
@@ -248,7 +249,6 @@ const useConfirmationAndSubmissionStep = ({
             email: (_a = walletPayload.address.email) !== null && _a !== void 0 ? _a : "",
             fullName: walletPayload.address.name
           }),
-          creditCardInfo: walletPayload.creditCard,
           fundingSourceId
         });
       }

package/dist/cjs/workflows/onboarding/components/funding-step/funding-step.cjs

@@ -29,9 +29,13 @@ const FundingStep = ({
           passengerData
         } = _a,
         rest = _tslib.__rest(_a, ["passengerData"]);
-      return onSubmit(Object.assign(Object.assign({}, passengerData), {
-        address: rest.originAddress
-      }));
+      const walletData = passengerData;
+      const walletPayload = {
+        address: rest.originAddress,
+        iovationBlackbox: walletData.iovationBlackbox,
+        paymentMethod: "credit_card"
+      };
+      onSubmit(walletPayload);
     },
     children: jsxRuntime.jsx(walletForm.WalletForm, {
       address: address,

package/dist/cjs/workflows/onboarding/components/ship-from-address-step/ship-from-address-step.cjs

@@ -45,7 +45,7 @@ const ShipFromAddressStep = ({
     }), jsxRuntime.jsx(warehouseForm.WarehouseForm, {
       onSubmit: onSubmit,
       requireEmail: true,
-      shouldForceDefault: (pendingWarehouse === null || pendingWarehouse === void 0 ? void 0 : pendingWarehouse.isDefault) || (pendingShipFrom === null || pendingShipFrom === void 0 ? void 0 : pendingShipFrom.isDefault),
+      shouldForceDefault: true,
       submitButtonTitle: t("actions.continue"),
       useStrictSchema: true,
       warehouse: pendingWarehouse !== null && pendingWarehouse !== void 0 ? pendingWarehouse : pendingShipFrom

package/dist/cjs/workflows/onboarding/onboarding.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var auctanePaySessionContext = require('../../contexts/auctane-pay-session-context.cjs');
 var onboardingWizard = require('./components/onboarding-wizard/onboarding-wizard.cjs');
 var index = require('../../locales/en/index.cjs');
 var createElement = require('../../create-element/create-element.cjs');
@@ -45,11 +46,13 @@ const Component = ({
   onSellerOnboarded,
   skipWelcomePage
 }) => {
-  return jsxRuntime.jsx(onboardingWizard.OnboardingWizard, {
-    defaultShipFromAddress: defaultShipFromAddress,
-    onComplete: onComplete,
-    onSellerOnboarded: onSellerOnboarded,
-    skipWelcomePage: skipWelcomePage
+  return jsxRuntime.jsx(auctanePaySessionContext.AuctanePaySessionProvider, {
+    children: jsxRuntime.jsx(onboardingWizard.OnboardingWizard, {
+      defaultShipFromAddress: defaultShipFromAddress,
+      onComplete: onComplete,
+      onSellerOnboarded: onSellerOnboarded,
+      skipWelcomePage: skipWelcomePage
+    })
   });
 };
 /**

package/dist/esm/components/field/rate-select/rate-card/rate-card.js

@@ -188,6 +188,7 @@ const RateCard = ({
         carrierCode: carrierCode,
         carrierFriendlyName: carrierFriendlyName,
         costBreakdownProps: costBreakdownCommonProps,
+        hasRateAttributes: !!(rateAttributes === null || rateAttributes === void 0 ? void 0 : rateAttributes.length),
         rateDetailsProps: showRateDetails ? {
           rateDetails
         } : undefined,

package/dist/esm/components/forms/edit-billing-form/edit-billing-form.js

@@ -1,14 +1,19 @@
+import { __awaiter } from '../../../_virtual/_tslib.js';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { useAuctanePaySession } from '../../../contexts/auctane-pay-session-context.js';
 import { useToggle } from '../../../hooks/use-toggle.js';
-import { Grid, GridChild, Typography, Button, ButtonVariant, ButtonColor } from '@shipengine/giger';
+import { Grid, GridChild, InlineNotification, NotificationType, Typography, Spinner, SpinnerSize, Button, ButtonVariant, ButtonColor } from '@shipengine/giger';
 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 } from 'react-i18next';
-import { BillingFields } from '../wallet-form/billing-fields.js';
 import { styles } from './edit-billing-form.styles.js';
 import { getWalletSchema } from '../wallet-form/wallet-schema.js';
+import { useFinancialService } from '../../../hooks/financial-services/use-financial-service.js';
 import { AddressFields } from '../address-form/address-fields.js';
+import { useElements } from '../../../elements-provider/elements-context-provider.js';
+import { Spacer } from '../../spacer/spacer.js';
 import { AddressDisplay } from '../../address-display/address-display.js';
 import { LinkAction } from '../../link-action/link-action.js';
 import { ButtonGroup } from '../../button-group/button-group.js';
@@ -24,7 +29,13 @@ const EditBillingForm = ({
   const {
     t
   } = useTranslation();
+  const {
+    locale
+  } = useElements();
+  const [isAdyenReady, setIsAdyenReady] = useState(false);
   const [editBillingInfo, toggleEditBillingInfo] = useToggle(false);
+  const [paymentError, setPaymentError] = useState(null);
+  const sessionContext = useAuctanePaySession();
   const form = useForm({
     resolver: validationResolver(getWalletSchema("emailRequired", "blackboxOptional"), ["creditCard"]),
     defaultValues: {
@@ -42,35 +53,99 @@ const EditBillingForm = ({
       }
     }
   });
-  const handleSubmit = form.handleSubmit(values => {
+  const {
+    adyenRef,
+    submit: adyenSubmit,
+    getSessionData
+  } = useFinancialService({
+    getAdyenSessionData: sessionContext.getSessionData,
+    paymentMethod: "credit_card",
+    options: {
+      showPayButton: false,
+      locale: locale || "en-US",
+      onChange: () => {
+        setPaymentError(null);
+      },
+      creditCardOptions: {
+        onLoad: event => {
+          if (event.iframesLoaded) {
+            setIsAdyenReady(true);
+          }
+        }
+      }
+    }
+  });
+  const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
     const {
-      address,
-      creditCard
+      address
     } = values;
     const billingInfo = Object.assign(Object.assign({}, address), {
       company: address.companyName ? address.companyName : "",
       email: address.email,
       fullName: address.name
     });
-    onSubmit(billingInfo, creditCard);
-  });
+    const processPayment = () => __awaiter(void 0, void 0, void 0, function* () {
+      try {
+        const paymentResult = yield adyenSubmit();
+        if (!paymentResult.success) {
+          // Payment failed - show error and allow retry
+          setPaymentError(paymentResult.error || "Payment failed");
+          form.reset(undefined, {
+            keepValues: true
+          });
+          return;
+        }
+        if ((paymentResult === null || paymentResult === void 0 ? void 0 : paymentResult.resultCode) === "Authorised") {
+          // Payment was successful, proceed with form submission
+          const sessionData = getSessionData();
+          onSubmit(billingInfo, {
+            sessionId: sessionData === null || sessionData === void 0 ? void 0 : sessionData.id
+          });
+        }
+      } catch (error) {
+        // Payment processing error
+        const errorMessage = error instanceof Error ? error.message : "Payment processing failed";
+        setPaymentError(errorMessage);
+      }
+    });
+    yield processPayment();
+  }));
   return jsx("form", {
     onSubmit: formLogger.capture(handleSubmit),
     children: jsxs(Grid, {
       css: styles.container,
-      children: [jsx(GridChild, {
+      children: [paymentError && jsxs(Fragment, {
+        children: [jsx(GridChild, {
+          colSpan: 12,
+          children: jsx(InlineNotification, {
+            title: t("register-wallet:sections.notifications.error.title"),
+            type: NotificationType.ERROR,
+            children: paymentError
+          })
+        }), jsx(Spacer, {
+          multiplier: 2
+        })]
+      }), jsx(GridChild, {
         colSpan: 12,
         css: styles.subtitle,
         children: jsx(Typography, {
           variant: "subtitle1",
           children: t("register-wallet:settings.billing.subtitleCard")
         })
-      }), jsx(GridChild, {
+      }), jsxs(GridChild, {
         colSpan: 12,
-        children: jsx(BillingFields, {
-          form: form
-        })
-      }), jsx(GridChild, {
+        children: [!isAdyenReady && jsx("div", {
+          css: styles.loadingContainer,
+          children: jsx(Spinner, {
+            size: SpinnerSize.SIZE_LARGE
+          })
+        }), jsx("div", {
+          css: styles.adyenContainer,
+          "data-ready": isAdyenReady,
+          "data-testid": "adyen-div",
+          ref: adyenRef
+        })]
+      }), jsx(Spacer, {}), jsx(GridChild, {
         colSpan: 12,
         css: styles.subtitle,
         children: jsx(Typography, {

package/dist/esm/components/forms/edit-billing-form/edit-billing-form.styles.js

@@ -14,6 +14,21 @@ const styles = createStyles({
   subtitle: theme => ({
     paddingBottom: scopeTheme(theme).spacing(2),
     textAlign: "left"
+  }),
+  loadingContainer: theme => ({
+    display: "flex",
+    justifyContent: "center",
+    paddingTop: scopeTheme(theme).spacing(2),
+    paddingBottom: scopeTheme(theme).spacing(2)
+  }),
+  adyenContainer: () => ({
+    "&:not([data-ready='true'])": {
+      display: "none"
+    },
+    // Hide Adyen's "All fields are required" instruction text
+    "& .adyen-checkout-form-instruction": {
+      display: "none"
+    }
   })
 });
 

package/dist/esm/components/forms/wallet-form/index.js

@@ -1,3 +1,2 @@
 export { WalletForm } from './wallet-form.js';
 export { getBillingAddressSchema, getWalletSchema, walletBlackboxSchemas, walletEmailSchemas } from './wallet-schema.js';
-export { BillingFields } from './billing-fields.js';