@shipengine/elements 2.28.0 → 2.29.0

package/dist/cjs/components/forms/edit-billing-form/edit-billing-form.cjs

@@ -1,16 +1,21 @@
 'use strict';
 
+var _tslib = require('../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var auctanePaySessionContext = require('../../../contexts/auctane-pay-session-context.cjs');
 var useToggle = require('../../../hooks/use-toggle.cjs');
 var giger = require('@shipengine/giger');
 var formLogger = require('../../../utilities/form-logger.cjs');
 var validation = require('../../../utilities/validation.cjs');
+var React = require('react');
 var reactHookForm = require('react-hook-form');
 var reactI18next = require('react-i18next');
-var billingFields = require('../wallet-form/billing-fields.cjs');
 var editBillingForm_styles = require('./edit-billing-form.styles.cjs');
 var walletSchema = require('../wallet-form/wallet-schema.cjs');
+var useFinancialService = require('../../../hooks/financial-services/use-financial-service.cjs');
 var addressFields = require('../address-form/address-fields.cjs');
+var elementsContextProvider = require('../../../elements-provider/elements-context-provider.cjs');
+var spacer = require('../../spacer/spacer.cjs');
 var addressDisplay = require('../../address-display/address-display.cjs');
 var linkAction = require('../../link-action/link-action.cjs');
 var buttonGroup = require('../../button-group/button-group.cjs');
@@ -26,7 +31,13 @@ const EditBillingForm = ({
   const {
     t
   } = reactI18next.useTranslation();
+  const {
+    locale
+  } = elementsContextProvider.useElements();
+  const [isAdyenReady, setIsAdyenReady] = React.useState(false);
   const [editBillingInfo, toggleEditBillingInfo] = useToggle.useToggle(false);
+  const [paymentError, setPaymentError] = React.useState(null);
+  const sessionContext = auctanePaySessionContext.useAuctanePaySession();
   const form = reactHookForm.useForm({
     resolver: validation.validationResolver(walletSchema.getWalletSchema("emailRequired", "blackboxOptional"), ["creditCard"]),
     defaultValues: {
@@ -44,35 +55,99 @@ const EditBillingForm = ({
       }
     }
   });
-  const handleSubmit = form.handleSubmit(values => {
+  const {
+    adyenRef,
+    submit: adyenSubmit,
+    getSessionData
+  } = useFinancialService.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 => _tslib.__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 = () => _tslib.__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 jsxRuntime.jsx("form", {
     onSubmit: formLogger.formLogger.capture(handleSubmit),
     children: jsxRuntime.jsxs(giger.Grid, {
       css: editBillingForm_styles.styles.container,
-      children: [jsxRuntime.jsx(giger.GridChild, {
+      children: [paymentError && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.GridChild, {
+          colSpan: 12,
+          children: jsxRuntime.jsx(giger.InlineNotification, {
+            title: t("register-wallet:sections.notifications.error.title"),
+            type: giger.NotificationType.ERROR,
+            children: paymentError
+          })
+        }), jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 2
+        })]
+      }), jsxRuntime.jsx(giger.GridChild, {
         colSpan: 12,
         css: editBillingForm_styles.styles.subtitle,
         children: jsxRuntime.jsx(giger.Typography, {
           variant: "subtitle1",
           children: t("register-wallet:settings.billing.subtitleCard")
         })
-      }), jsxRuntime.jsx(giger.GridChild, {
+      }), jsxRuntime.jsxs(giger.GridChild, {
         colSpan: 12,
-        children: jsxRuntime.jsx(billingFields.BillingFields, {
-          form: form
-        })
-      }), jsxRuntime.jsx(giger.GridChild, {
+        children: [!isAdyenReady && jsxRuntime.jsx("div", {
+          css: editBillingForm_styles.styles.loadingContainer,
+          children: jsxRuntime.jsx(giger.Spinner, {
+            size: giger.SpinnerSize.SIZE_LARGE
+          })
+        }), jsxRuntime.jsx("div", {
+          css: editBillingForm_styles.styles.adyenContainer,
+          "data-ready": isAdyenReady,
+          "data-testid": "adyen-div",
+          ref: adyenRef
+        })]
+      }), jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(giger.GridChild, {
         colSpan: 12,
         css: editBillingForm_styles.styles.subtitle,
         children: jsxRuntime.jsx(giger.Typography, {

package/dist/cjs/components/forms/edit-billing-form/edit-billing-form.styles.cjs

@@ -16,6 +16,21 @@ const styles = styles$1.createStyles({
   subtitle: theme => ({
     paddingBottom: styles$1.scopeTheme(theme).spacing(2),
     textAlign: "left"
+  }),
+  loadingContainer: theme => ({
+    display: "flex",
+    justifyContent: "center",
+    paddingTop: styles$1.scopeTheme(theme).spacing(2),
+    paddingBottom: styles$1.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/cjs/components/forms/wallet-form/index.cjs

@@ -2,7 +2,6 @@
 
 var walletForm = require('./wallet-form.cjs');
 var walletSchema = require('./wallet-schema.cjs');
-var billingFields = require('./billing-fields.cjs');
 
 
 
@@ -11,4 +10,3 @@ exports.getBillingAddressSchema = walletSchema.getBillingAddressSchema;
 exports.getWalletSchema = walletSchema.getWalletSchema;
 exports.walletBlackboxSchemas = walletSchema.walletBlackboxSchemas;
 exports.walletEmailSchemas = walletSchema.walletEmailSchemas;
-exports.BillingFields = billingFields.BillingFields;

package/dist/cjs/components/forms/wallet-form/wallet-form.cjs

@@ -2,6 +2,7 @@
 
 var _tslib = require('../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var auctanePaySessionContext = require('../../../contexts/auctane-pay-session-context.cjs');
 var useBlackBoxDetection = require('../../../hooks/use-black-box-detection.cjs');
 var useNestedForm = require('../../../hooks/use-nested-form.cjs');
 var giger = require('@shipengine/giger');
@@ -12,11 +13,13 @@ var React = require('react');
 var reactHookForm = require('react-hook-form');
 var reactI18next = require('react-i18next');
 var editWalletAddressForm = require('../edit-wallet-address-form/edit-wallet-address-form.cjs');
-var billingFields = require('./billing-fields.cjs');
 var walletForm_styles = require('./wallet-form.styles.cjs');
 var walletSchema = require('./wallet-schema.cjs');
+var useFinancialService = require('../../../hooks/financial-services/use-financial-service.cjs');
+var paymentMethodSelector = require('../../payment/payment-method-selector/payment-method-selector.cjs');
 var addressFields = require('../address-form/address-fields.cjs');
 var vatSettings = require('../../../features/vat-settings/vat-settings.cjs');
+var elementsContextProvider = require('../../../elements-provider/elements-context-provider.cjs');
 var addressPreferenceContext = require('../../address-preference-context/address-preference-context.cjs');
 var spacer = require('../../spacer/spacer.cjs');
 var addressDisplay = require('../../address-display/address-display.cjs');
@@ -29,27 +32,38 @@ const WalletForm = ({
   onSubmit,
   showVatSettings
 }) => {
+  var _a, _b;
   const {
     t
   } = reactI18next.useTranslation(["register-wallet", "common"]);
+  const {
+    locale
+  } = elementsContextProvider.useElements();
   const defaultWarehouseIsPoBox = address.isPoBoxAddress(address$1);
   const {
     validateAddress
   } = addressPreferenceContext.useAddressPreference();
   const [codedErrors, setCodedErrors] = React.useState(errors);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [paymentError, setPaymentError] = React.useState(null);
+  const [isAdyenReady, setIsAdyenReady] = React.useState(false);
+  const [cardBrand, setCardBrand] = React.useState();
+  const sessionContext = auctanePaySessionContext.useAuctanePaySession();
   const form = reactHookForm.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$1), {
         countryCode: address$1.countryCode
-      })
+      }),
+      paymentMethod: "credit_card"
     },
-    resolver: validation.validationResolver(walletSchema.getWalletSchema("emailOptional", "blackboxRequired"), ["creditCard"])
+    resolver: validation.validationResolver(walletSchema.getWalletSchema("emailOptional", "blackboxRequired"))
   });
   const formSetValue = form.setValue;
   useBlackBoxDetection.useBlackboxDetection({
@@ -67,24 +81,104 @@ const WalletForm = ({
     onSuccess: React.useCallback(bb => formSetValue("iovationBlackbox", bb), [formSetValue])
   });
   const watchAddress = form.watch("address");
+  const watchPaymentMethod = form.watch("paymentMethod");
+  const adyenOptions = React.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.useFinancialService({
+    getAdyenSessionData: sessionContext.getSessionData,
+    paymentMethod: watchPaymentMethod || "credit_card",
+    options: adyenOptions
+  });
+  // Reset Adyen ready state when payment method changes
+  React.useEffect(() => {
+    setIsAdyenReady(false);
+  }, [watchPaymentMethod]);
   const handleSubmit = form.handleSubmit(values => _tslib.__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 = () => _tslib.__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$1, isEditWalletAddressFormOpen, toggleIsEditWalletAddressFormOpen] = useNestedForm.useNestedForm(editWalletAddressForm.EditWalletAddressForm, {
     address: watchAddress,
@@ -99,9 +193,9 @@ const WalletForm = ({
       children: jsxRuntime.jsxs("form", {
         id: "wallet-form",
         onSubmit: formLogger.formLogger.capture(handleSubmit),
-        children: [jsxRuntime.jsx(giger.GridChild, {
+        children: [jsxRuntime.jsxs(giger.GridChild, {
           colSpan: 12,
-          children: !!(codedErrors === null || codedErrors === void 0 ? void 0 : codedErrors.length) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [!!(codedErrors === null || codedErrors === void 0 ? void 0 : codedErrors.length) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [jsxRuntime.jsx(giger.InlineNotification, {
               title: t("register-wallet:sections.notifications.error.title"),
               type: giger.NotificationType.ERROR,
@@ -111,12 +205,47 @@ const WalletForm = ({
             }), jsxRuntime.jsx(spacer.Spacer, {
               multiplier: 2
             })]
+          }), paymentError && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx(giger.InlineNotification, {
+              title: t("register-wallet:sections.notifications.error.title"),
+              type: giger.NotificationType.ERROR,
+              children: paymentError
+            }), jsxRuntime.jsx(spacer.Spacer, {
+              multiplier: 2
+            })]
+          })]
+        }), jsxRuntime.jsx(giger.GridChild, {
+          colSpan: 12,
+          children: jsxRuntime.jsx(giger.Typography, {
+            variant: "subtitle1",
+            children: t("register-wallet:sections.paymentMethod.title")
           })
+        }), jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 1
         }), jsxRuntime.jsx(giger.GridChild, {
           colSpan: 12,
-          children: jsxRuntime.jsx(billingFields.BillingFields, {
-            form: form
+          children: jsxRuntime.jsx(paymentMethodSelector.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"
           })
+        }), jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 2
+        }), jsxRuntime.jsxs(giger.GridChild, {
+          colSpan: 12,
+          children: [!isAdyenReady && jsxRuntime.jsx("div", {
+            css: walletForm_styles.styles.loadingContainer,
+            children: jsxRuntime.jsx(giger.Spinner, {
+              size: giger.SpinnerSize.SIZE_LARGE
+            })
+          }), jsxRuntime.jsx("div", {
+            css: walletForm_styles.styles.adyenContainer,
+            "data-ready": isAdyenReady,
+            "data-testid": "adyen-div",
+            ref: adyenRef
+          })]
+        }), jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 2
         }), jsxRuntime.jsx(giger.GridChild, {
           colSpan: 12,
           children: jsxRuntime.jsx(giger.Typography, {
@@ -167,6 +296,7 @@ const WalletForm = ({
         children: jsxRuntime.jsx(submitButton.SubmitButton, {
           control: form.control,
           form: "wallet-form",
+          isLoading: isSubmitting,
           variant: giger.ButtonVariant.FILLED,
           children: t("actions.continue")
         })

package/dist/cjs/components/forms/wallet-form/wallet-form.styles.cjs

@@ -8,6 +8,21 @@ const styles = styles$1.createStyles({
   }),
   grid: theme => ({
     margin: styles$1.scopeTheme(theme).spacing(1)
+  }),
+  loadingContainer: theme => ({
+    display: "flex",
+    justifyContent: "center",
+    paddingTop: styles$1.scopeTheme(theme).spacing(2),
+    paddingBottom: styles$1.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/cjs/components/forms/wallet-form/wallet-schema.cjs

@@ -1,17 +1,11 @@
 'use strict';
 
-var _tslib = require('../../../_virtual/_tslib.cjs');
-var date = require('../../../utilities/date.cjs');
-var address$1 = require('../../../utilities/shipengine/address.cjs');
-var cardValidator = require('card-validator');
+var address = require('../../../utilities/shipengine/address.cjs');
 var min = require('libphonenumber-js/min');
 var zod = require('zod');
 var addressSchema = require('../address-form/address-schema.cjs');
-var address = require('../../../constants/shipengine/address.cjs');
+var address$1 = require('../../../constants/shipengine/address.cjs');
 
-const expirationYears = date.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.addressSchema.shape.email,
   emailRequired: zod.z.string().trim().email().min(1)
@@ -22,12 +16,12 @@ const walletBlackboxSchemas = {
 };
 const getBillingAddressSchema = emailRequirement => {
   return addressSchema.addressSchema.extend({
-    addressLine1: addressSchema.addressLine1Schema.refine(v => !address$1.isPoBox(v), "schemaErrors.invalidAddressPoBox"),
-    addressLine2: addressSchema.addressLine2Schema.refine(v => !v || !address$1.isPoBox(v), "schemaErrors.invalidAddressPoBox"),
+    addressLine1: addressSchema.addressLine1Schema.refine(v => !address.isPoBox(v), "schemaErrors.invalidAddressPoBox"),
+    addressLine2: addressSchema.addressLine2Schema.refine(v => !v || !address.isPoBox(v), "schemaErrors.invalidAddressPoBox"),
     companyName: zod.z.string().trim().min(1),
     email: walletEmailSchemas[emailRequirement],
     phone: zod.z.string().trim().min(1)
-  }).refine(schema => schema.name.match(address.addressNameRegex), {
+  }).refine(schema => schema.name.match(address$1.addressNameRegex), {
     message: "schemaErrors.invalidAddressNameOnboarding",
     path: ["name"]
   }).refine(schema => !schema.phone || min.isValidPhoneNumber(schema.phone, schema.countryCode), {
@@ -35,7 +29,7 @@ const getBillingAddressSchema = emailRequirement => {
     path: ["phone"]
   }).refine(schema => {
     if (schema.countryCode === "US") {
-      return schema.stateProvince && address.usStateCodes.includes(schema.stateProvince);
+      return schema.stateProvince && address$1.usStateCodes.includes(schema.stateProvince);
     }
     return true;
   }, {
@@ -43,7 +37,7 @@ const getBillingAddressSchema = emailRequirement => {
     path: ["stateProvince"]
   }).refine(schema => {
     if (schema.countryCode === "US") {
-      return address.postalCodeRegex.test(schema.postalCode);
+      return address$1.postalCodeRegex.test(schema.postalCode);
     }
     return true;
   }, {
@@ -51,40 +45,11 @@ const getBillingAddressSchema = emailRequirement => {
     path: ["postalCode"]
   });
 };
-const creditCardSchema = zod.z.object({
-  cvv: zod.z.string().trim().refine(cvv => cardValidator.cvv(cvv, [3, 4]).isValid, "Invalid CVV"),
-  expiration: zod.z.string().trim().refine(expiration => {
-    const [expirationMonth, expirationYear] = expiration.split("/");
-    return expirationMonths.includes(expirationMonth) && expirationYears.includes(expirationYear);
-  }, "schemaErrors.invalidExpirationDate"),
-  name: addressSchema.addressSchema.shape.name.refine(name => name.match(address.addressNameRegex), "schemaErrors.invalidAddressNameOnboarding"),
-  number: zod.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 = _tslib.__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 zod.z.object({
     address: billingAddressSchema,
-    creditCard: creditCardSchema,
+    paymentMethod: zod.z.enum(["credit_card", "pay_by_bank_us"]).default("credit_card"),
     iovationBlackbox: walletBlackboxSchemas[blackboxRequirement]
   });
 };

package/dist/cjs/components/payment/payment-method-selector/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var paymentMethodSelector = require('./payment-method-selector.cjs');
+
+
+
+exports.PaymentMethodSelector = paymentMethodSelector.PaymentMethodSelector;

package/dist/cjs/components/payment/payment-method-selector/payment-method-selector.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var reactI18next = require('react-i18next');
+var paymentMethodSelector_styles = require('./payment-method-selector.styles.cjs');
+
+const PaymentMethodSelector = ({
+  name = "paymentMethod",
+  onChange,
+  payByBankEnabled = false,
+  value
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation("register-wallet");
+  const paymentMethods = [{
+    value: "credit_card",
+    icon: gigerTheme.IconNames.CREDIT_CARD,
+    label: t("sections.paymentMethod.creditCard")
+  }, payByBankEnabled ? {
+    value: "pay_by_bank_us",
+    icon: gigerTheme.IconNames.BANK,
+    label: t("sections.paymentMethod.payByBank")
+  } : undefined];
+  return jsxRuntime.jsx("div", {
+    css: paymentMethodSelector_styles.styles.paymentMethodSelector,
+    children: jsxRuntime.jsx(giger.RadioGroup, {
+      name: name,
+      onChange: e => onChange(e.target.value),
+      value: value,
+      children: paymentMethods.map(method => {
+        return method !== undefined ? jsxRuntime.jsx("div", {
+          css: [paymentMethodSelector_styles.styles.paymentMethodOption, value === method.value && paymentMethodSelector_styles.styles.paymentMethodOptionSelected],
+          onClick: () => onChange(method.value),
+          children: jsxRuntime.jsx(giger.Radio, {
+            checked: value === method.value,
+            readOnly: true,
+            value: method.value,
+            children: jsxRuntime.jsxs("div", {
+              css: paymentMethodSelector_styles.styles.paymentMethodOptionContent,
+              children: [jsxRuntime.jsx(giger.Icon, {
+                name: method.icon,
+                size: giger.IconSize.SIZE_SMALL
+              }), method.label]
+            })
+          })
+        }, method.value) : null;
+      })
+    })
+  });
+};
+
+exports.PaymentMethodSelector = PaymentMethodSelector;

package/dist/cjs/components/payment/payment-method-selector/payment-method-selector.styles.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var styles$1 = require('../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  paymentMethodSelector: () => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    "& .giger-radio-group": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "12px"
+    }
+  }),
+  paymentMethodOption: theme => ({
+    padding: styles$1.scopeTheme(theme).spacing(2),
+    border: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+    borderRadius: styles$1.scopeTheme(theme).spacing(),
+    background: styles$1.scopeTheme(theme).palette.white,
+    marginBottom: styles$1.scopeTheme(theme).spacing(1),
+    transition: "all 0.2s ease",
+    cursor: "pointer",
+    "&:hover": {
+      borderColor: styles$1.scopeTheme(theme).palette.primary.main
+    },
+    "& .giger-radio": {
+      margin: 0,
+      width: "100%",
+      pointerEvents: "none",
+      // Disable pointer events on radio to let div handle clicks
+      "& .giger-radio__container": {
+        width: "100%",
+        justifyContent: "flex-start"
+      },
+      "& .giger-radio__label": {
+        fontWeight: 500,
+        marginLeft: styles$1.scopeTheme(theme).spacing(1),
+        flex: 1,
+        cursor: "pointer"
+      },
+      "& .giger-radio__input": {
+        pointerEvents: "auto" // Re-enable pointer events on the actual input
+      }
+    }
+  }),
+  paymentMethodOptionSelected: theme => ({
+    borderColor: styles$1.scopeTheme(theme).palette.primary.main,
+    backgroundColor: styles$1.scopeTheme(theme).palette.gray.megaLight
+  }),
+  paymentMethodOptionContent: () => ({
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  })
+});
+
+exports.styles = styles;