@shipengine/elements 2.28.0 → 2.29.1

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/fields.js

@@ -6,9 +6,9 @@ export { InputGroup } from './input-group/input-group.js';
 export { MoneyInput, transform } from './money-input/money-input.js';
 export { NumberInput } from './number-input/number-input.js';
 export { RateSelect } from './rate-select/rate-select.js';
-export { SelectAutoComplete } from './select-auto-complete/select-auto-complete.js';
 export { Select } from './select/select.js';
 export { SelectWithCategories } from './select/select-with-categories.js';
+export { SelectAutoComplete } from './select-auto-complete/select-auto-complete.js';
 export { SubmitButton } from './submit-button/submit-button.js';
 export { Switch } from './switch/switch.js';
 export { TextArea } from './text-area/text-area.js';

package/dist/esm/components/forms/add-funds-form/add-funds-form.js

@@ -11,8 +11,8 @@ import { useTranslation } from 'react-i18next';
 import { styles } from './add-funds-form.styles.js';
 import { getAddFundsSchema } from './add-funds-schema.js';
 import { FormPortal } from '../../form-portal/form-portal.js';
-import { Spacer } from '../../spacer/spacer.js';
 import { ButtonGroup } from '../../button-group/button-group.js';
+import { Spacer } from '../../spacer/spacer.js';
 import { MoneyInput } from '../../field/money-input/money-input.js';
 import { SubmitButton } from '../../field/submit-button/submit-button.js';
 

package/dist/esm/components/forms/address-form/address-form.js

@@ -8,8 +8,8 @@ import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { AddressFields } from './address-fields.js';
-import { shipToAddressSchema, addressFormSchema } from './address-form-schema.js';
 import { styles } from './address-form.styles.js';
+import { shipToAddressSchema, addressFormSchema } from './address-form-schema.js';
 import { AddressParser } from '../../address-parser/address-parser.js';
 import { LinkAction } from '../../link-action/link-action.js';
 import { ButtonGroup } from '../../button-group/button-group.js';

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

@@ -1,4 +1,4 @@
+export { AddressFields } from './address-fields.js';
 export { AddressForm } from './address-form.js';
 export { addressFormSchema } from './address-form-schema.js';
-export { AddressFields } from './address-fields.js';
 export { addressLine1Schema, addressLine2Schema, addressSchema, companyNameSchema } from './address-schema.js';

package/dist/esm/components/forms/auto-funding-form/auto-funding-form.js

@@ -8,9 +8,9 @@ import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { styles } from './auto-funding-form.styles.js';
 import { autoFundingSchema } from './auto-funding-schema.js';
-import { Loader } from '../../loader/loader.js';
 import { Spread } from '../../spread/spread.js';
 import { transform, MoneyInput } from '../../field/money-input/money-input.js';
+import { Loader } from '../../loader/loader.js';
 import { Switch } from '../../field/switch/switch.js';
 import { LinkAction } from '../../link-action/link-action.js';
 import { Spacer } from '../../spacer/spacer.js';

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/ship-from-address-form/ship-from-address-form.js

@@ -8,8 +8,8 @@ import isEqual from 'lodash/isEqual.js';
 import { useCallback, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { shipFromAddressFormSchema } from './ship-from-address-form-schema.js';
 import { styles } from './ship-from-address-form.styles.js';
+import { shipFromAddressFormSchema } from './ship-from-address-form-schema.js';
 import { AddressFields } from '../address-form/address-fields.js';
 import { useAddressPreference } from '../../address-preference-context/address-preference-context.js';
 import { AddressParser } from '../../address-parser/address-parser.js';

package/dist/esm/components/forms/vat-form/vat-form.js

@@ -7,8 +7,8 @@ import { formLogger } from '../../../utilities/form-logger.js';
 import { validationResolver } from '../../../utilities/validation.js';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { vatSchema } from './vat-form-schema.js';
 import { styles } from './vat-form.styles.js';
+import { vatSchema } from './vat-form-schema.js';
 import { vatTypesSelectOptions } from './vat-types.js';
 import { InputGroup } from '../../field/input-group/input-group.js';
 import { Select } from '../../field/select/select.js';

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';

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

@@ -1,20 +1,23 @@
 import { __awaiter } from '../../../_virtual/_tslib.js';
 import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { useAuctanePaySession } from '../../../contexts/auctane-pay-session-context.js';
 import { useBlackboxDetection } from '../../../hooks/use-black-box-detection.js';
 import { useNestedForm } from '../../../hooks/use-nested-form.js';
-import { Grid, GridChild, InlineNotification, NotificationType, Typography, ButtonVariant } from '@shipengine/giger';
+import { Grid, GridChild, InlineNotification, NotificationType, Typography, Spinner, SpinnerSize, ButtonVariant } from '@shipengine/giger';
 import { formLogger } from '../../../utilities/form-logger.js';
 import { isPoBoxAddress } from '../../../utilities/shipengine/address.js';
 import { validationResolver } from '../../../utilities/validation.js';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { EditWalletAddressForm } from '../edit-wallet-address-form/edit-wallet-address-form.js';
-import { BillingFields } from './billing-fields.js';
 import { styles } from './wallet-form.styles.js';
 import { getWalletSchema } from './wallet-schema.js';
+import { useFinancialService } from '../../../hooks/financial-services/use-financial-service.js';
+import { PaymentMethodSelector } from '../../payment/payment-method-selector/payment-method-selector.js';
 import { AddressFields } from '../address-form/address-fields.js';
 import { VatSettings } from '../../../features/vat-settings/vat-settings.js';
+import { useElements } from '../../../elements-provider/elements-context-provider.js';
 import { useAddressPreference } from '../../address-preference-context/address-preference-context.js';
 import { Spacer } from '../../spacer/spacer.js';
 import { AddressDisplay } from '../../address-display/address-display.js';
@@ -27,27 +30,38 @@ const WalletForm = ({
   onSubmit,
   showVatSettings
 }) => {
+  var _a, _b;
   const {
     t
   } = useTranslation(["register-wallet", "common"]);
+  const {
+    locale
+  } = useElements();
   const defaultWarehouseIsPoBox = isPoBoxAddress(address);
   const {
     validateAddress
   } = useAddressPreference();
   const [codedErrors, setCodedErrors] = useState(errors);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [paymentError, setPaymentError] = useState(null);
+  const [isAdyenReady, setIsAdyenReady] = useState(false);
+  const [cardBrand, setCardBrand] = useState();
+  const sessionContext = useAuctanePaySession();
   const form = useForm({
     defaultValues:
     // If the warehouse address is a PO Box they cannot use it as their billing address
     defaultWarehouseIsPoBox ? {
       address: {
         countryCode: "US"
-      }
+      },
+      paymentMethod: "credit_card"
     } : {
       address: Object.assign(Object.assign({}, address), {
         countryCode: address.countryCode
-      })
+      }),
+      paymentMethod: "credit_card"
     },
-    resolver: validationResolver(getWalletSchema("emailOptional", "blackboxRequired"), ["creditCard"])
+    resolver: validationResolver(getWalletSchema("emailOptional", "blackboxRequired"))
   });
   const formSetValue = form.setValue;
   useBlackboxDetection({
@@ -65,24 +79,104 @@ const WalletForm = ({
     onSuccess: useCallback(bb => formSetValue("iovationBlackbox", bb), [formSetValue])
   });
   const watchAddress = form.watch("address");
+  const watchPaymentMethod = form.watch("paymentMethod");
+  const adyenOptions = useMemo(() => ({
+    showPayButton: false,
+    locale: locale || "en-US",
+    onChange: () => {
+      setPaymentError(null);
+    },
+    creditCardOptions: {
+      onLoad: event => {
+        if (event.iframesLoaded) {
+          setIsAdyenReady(true);
+        }
+      },
+      onBinLookup: event => {
+        var _a, _b;
+        // Some cards return multiple brands (e.g., ['star', 'visa']), so prioritize major brands
+        const majorBrands = ["visa", "mc", "amex", "discover"];
+        const brand = ((_a = event.detectedBrands) === null || _a === void 0 ? void 0 : _a.find(b => majorBrands.includes(b.toLowerCase()))) || ((_b = event.detectedBrands) === null || _b === void 0 ? void 0 : _b[0]);
+        setCardBrand(brand);
+      }
+    }
+  }), [locale]);
+  const {
+    adyenRef,
+    submit: adyenSubmit,
+    getSessionData
+  } = useFinancialService({
+    getAdyenSessionData: sessionContext.getSessionData,
+    paymentMethod: watchPaymentMethod || "credit_card",
+    options: adyenOptions
+  });
+  // Reset Adyen ready state when payment method changes
+  useEffect(() => {
+    setIsAdyenReady(false);
+  }, [watchPaymentMethod]);
   const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
     const payload = values;
-    yield validateAddress({
-      addresses: {
-        originAddress: payload.address
-      },
-      data: {
-        creditCard: payload.creditCard,
-        iovationBlackbox: payload.iovationBlackbox
-      },
-      onValid: validatedAddressesPayload => {
-        onSubmit({
-          address: validatedAddressesPayload.originAddress,
-          creditCard: payload.creditCard,
+    setIsSubmitting(true);
+    try {
+      yield validateAddress({
+        addresses: {
+          originAddress: payload.address
+        },
+        data: {
           iovationBlackbox: payload.iovationBlackbox
-        });
-      }
-    });
+        },
+        onValid: validatedAddressesPayload => {
+          const processPayment = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+              const walletPayload = {
+                address: validatedAddressesPayload.originAddress,
+                iovationBlackbox: payload.iovationBlackbox,
+                paymentMethod: payload.paymentMethod
+              };
+              if (payload.paymentMethod === "credit_card") {
+                // For credit card, await Adyen payment completion
+                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;
+                }
+                // Payment succeeded - get session data and add to payload
+                const sessionData = getSessionData();
+                if (sessionData) {
+                  walletPayload.auctanePaySessionId = sessionData.id;
+                }
+                if (cardBrand) {
+                  walletPayload.cardBrand = cardBrand;
+                }
+              }
+              // Payment successful or non-credit-card method - proceed to next step
+              onSubmit(walletPayload);
+            } catch (error) {
+              // Payment processing error
+              const errorMessage = error instanceof Error ? error.message : "Payment processing failed";
+              setPaymentError(errorMessage);
+            } finally {
+              setIsSubmitting(false);
+            }
+          });
+          void processPayment();
+        }
+      });
+    } catch (error) {
+      // Address validation error
+      const errorMessage = error instanceof Error ? error.message : "An error occurred";
+      setCodedErrors([{
+        errorCode: "unspecified",
+        errorSource: "client",
+        errorType: "validation",
+        message: errorMessage
+      }]);
+      setIsSubmitting(false);
+    }
   }));
   const [editWalletAddressForm, isEditWalletAddressFormOpen, toggleIsEditWalletAddressFormOpen] = useNestedForm(EditWalletAddressForm, {
     address: watchAddress,
@@ -97,9 +191,9 @@ const WalletForm = ({
       children: jsxs("form", {
         id: "wallet-form",
         onSubmit: formLogger.capture(handleSubmit),
-        children: [jsx(GridChild, {
+        children: [jsxs(GridChild, {
           colSpan: 12,
-          children: !!(codedErrors === null || codedErrors === void 0 ? void 0 : codedErrors.length) && jsxs(Fragment, {
+          children: [!!(codedErrors === null || codedErrors === void 0 ? void 0 : codedErrors.length) && jsxs(Fragment, {
             children: [jsx(InlineNotification, {
               title: t("register-wallet:sections.notifications.error.title"),
               type: NotificationType.ERROR,
@@ -109,12 +203,47 @@ const WalletForm = ({
             }), jsx(Spacer, {
               multiplier: 2
             })]
+          }), paymentError && jsxs(Fragment, {
+            children: [jsx(InlineNotification, {
+              title: t("register-wallet:sections.notifications.error.title"),
+              type: NotificationType.ERROR,
+              children: paymentError
+            }), jsx(Spacer, {
+              multiplier: 2
+            })]
+          })]
+        }), jsx(GridChild, {
+          colSpan: 12,
+          children: jsx(Typography, {
+            variant: "subtitle1",
+            children: t("register-wallet:sections.paymentMethod.title")
           })
+        }), jsx(Spacer, {
+          multiplier: 1
         }), jsx(GridChild, {
           colSpan: 12,
-          children: jsx(BillingFields, {
-            form: form
+          children: jsx(PaymentMethodSelector, {
+            onChange: method => form.setValue("paymentMethod", method),
+            payByBankEnabled: (_b = (_a = getSessionData()) === null || _a === void 0 ? void 0 : _a.eligiblePaymentMethodTypes) === null || _b === void 0 ? void 0 : _b.includes("pay_by_bank_us"),
+            value: watchPaymentMethod || "credit_card"
           })
+        }), jsx(Spacer, {
+          multiplier: 2
+        }), jsxs(GridChild, {
+          colSpan: 12,
+          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, {
+          multiplier: 2
         }), jsx(GridChild, {
           colSpan: 12,
           children: jsx(Typography, {
@@ -165,6 +294,7 @@ const WalletForm = ({
         children: jsx(SubmitButton, {
           control: form.control,
           form: "wallet-form",
+          isLoading: isSubmitting,
           variant: ButtonVariant.FILLED,
           children: t("actions.continue")
         })

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

@@ -6,6 +6,21 @@ const styles = createStyles({
   }),
   grid: theme => ({
     margin: scopeTheme(theme).spacing(1)
+  }),
+  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/wallet-schema.js

@@ -1,15 +1,9 @@
-import { __rest } from '../../../_virtual/_tslib.js';
-import { getExpirationYears } from '../../../utilities/date.js';
 import { isPoBox } from '../../../utilities/shipengine/address.js';
-import cardValidator from 'card-validator';
 import { isValidPhoneNumber } from 'libphonenumber-js/min';
 import { z } from 'zod';
 import { addressSchema, addressLine2Schema, addressLine1Schema } from '../address-form/address-schema.js';
 import { addressNameRegex, usStateCodes, postalCodeRegex } from '../../../constants/shipengine/address.js';
 
-const expirationYears = getExpirationYears(15);
-const creditCardTypes = ["visa", "mastercard", "american-express", "discover"];
-const expirationMonths = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
 const walletEmailSchemas = {
   emailOptional: addressSchema.shape.email,
   emailRequired: z.string().trim().email().min(1)
@@ -49,40 +43,11 @@ const getBillingAddressSchema = emailRequirement => {
     path: ["postalCode"]
   });
 };
-const creditCardSchema = z.object({
-  cvv: z.string().trim().refine(cvv => cardValidator.cvv(cvv, [3, 4]).isValid, "Invalid CVV"),
-  expiration: z.string().trim().refine(expiration => {
-    const [expirationMonth, expirationYear] = expiration.split("/");
-    return expirationMonths.includes(expirationMonth) && expirationYears.includes(expirationYear);
-  }, "schemaErrors.invalidExpirationDate"),
-  name: addressSchema.shape.name.refine(name => name.match(addressNameRegex), "schemaErrors.invalidAddressNameOnboarding"),
-  number: z.string().trim().refine(number => cardValidator.number(number).isValid, "Invalid card number").refine(number => {
-    var _a, _b;
-    return !((_a = cardValidator.number(number).card) === null || _a === void 0 ? void 0 : _a.type) || creditCardTypes.includes((_b = cardValidator.number(number).card) === null || _b === void 0 ? void 0 : _b.type);
-  }, "schemaErrors.invalidCreditCardType")
-}).transform(schema => {
-  var _a;
-  const {
-      cvv,
-      expiration
-    } = schema,
-    creditCard = __rest(schema, ["cvv", "expiration"]);
-  const creditCardVendor = (_a = cardValidator.number(creditCard.number).card) === null || _a === void 0 ? void 0 : _a.type;
-  const [expirationMonth, expirationYear] = expiration.split("/").map(v => parseInt(v, 10));
-  return {
-    cardNumber: creditCard.number,
-    cvv: cvv,
-    expirationMonth: expirationMonth,
-    expirationYear: expirationYear,
-    name: creditCard.name,
-    provider: creditCardVendor === "american-express" ? "american_express" : creditCardVendor
-  };
-});
 const getWalletSchema = (emailRequirement, blackboxRequirement) => {
   const billingAddressSchema = getBillingAddressSchema(emailRequirement);
   return z.object({
     address: billingAddressSchema,
-    creditCard: creditCardSchema,
+    paymentMethod: z.enum(["credit_card", "pay_by_bank_us"]).default("credit_card"),
     iovationBlackbox: walletBlackboxSchemas[blackboxRequirement]
   });
 };

package/dist/esm/components/grid-controller/index.js

@@ -1,4 +1,4 @@
-export { GridController } from './grid-controller.js';
 export { CellFormattedDate } from './cell-formatted-date.js';
+export { GridController } from './grid-controller.js';
 export { GridFooter } from './grid-footer.js';
 export { SortableHeader } from './sortable-header/sortable-header.js';

package/dist/esm/components/grid-filters/components/index.js

@@ -1,5 +1,5 @@
-export { ShipmentIdFilter } from './shipment-id-filter/shipment-id-filter.js';
 export { CreatedDateFilter } from './created-date-filter/created-date-filter.js';
 export { LabelIdFilter } from './label-id-filter/label-id-filter.js';
 export { LabelStatusFilter } from './label-status-filter/label-status-filter.js';
+export { ShipmentIdFilter } from './shipment-id-filter/shipment-id-filter.js';
 export { TrackingStatusFilter } from './tracking-status-filter/tracking-status-filter.js';

package/dist/esm/components/grid-filters/components/label-id-filter/label-id-filter.js

@@ -7,8 +7,8 @@ import { useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation, Trans } from 'react-i18next';
 import * as reactUse from 'react-use';
-import { labelIdFormSchema } from './label-id-filter-shema.js';
 import { styles } from './label-id-filter.styles.js';
+import { labelIdFormSchema } from './label-id-filter-shema.js';
 import { TextInput } from '../../../field/text-input/text-input.js';
 import { SubmitButton } from '../../../field/submit-button/submit-button.js';
 

package/dist/esm/components/grid-filters/components/label-status-filter/label-status-filter.js

@@ -6,8 +6,8 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import * as reactUse from 'react-use';
-import { labelStatusFormSchema } from './label-status-filter-schema.js';
 import { styles } from './label-status-filter.styles.js';
+import { labelStatusFormSchema } from './label-status-filter-schema.js';
 
 /**
  * @internal