@shipengine/elements 2.28.0 → 2.29.0

package/dist/cjs/hooks/financial-services/use-financial-service.cjs

@@ -0,0 +1,188 @@
+'use strict';
+
+var _tslib = require('../../_virtual/_tslib.cjs');
+var React = require('react');
+var financialService = require('./financial-service.cjs');
+var elementsContextProvider = require('../../elements-provider/elements-context-provider.cjs');
+
+/**
+ * React hook for managing Adyen payment components lifecycle
+ *
+ * @example
+ * ```tsx
+ * const { adyenRef, adyenSubmit, isLoading, error } = useFinancialService({
+ *   serviceParams: { getAdyenSessionData: fetchSession },
+ *   paymentMethod: "credit_card",
+ *   options: { locale: 'en-US' }
+ * });
+ *
+ * return (
+ *   <div>
+ *     {isLoading && <Spinner />}
+ *     {error && <ErrorMessage>{error.message}</ErrorMessage>}
+ *     <div ref={adyenRef} />
+ *     <button onClick={adyenSubmit}>Pay</button>
+ *   </div>
+ * );
+ * ```
+ */
+const useFinancialService = ({
+  getAdyenSessionData,
+  paymentMethod,
+  options
+}) => {
+  const {
+    emotionCacheShadowRootContainer
+  } = elementsContextProvider.useElements();
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [isMounted, setIsMounted] = React.useState(false);
+  const adyenRef = React.useRef(null);
+  const currentPaymentMethodRef = React.useRef(null);
+  const service = React.useRef(new financialService.FinancialService({
+    getAdyenSessionData
+  })).current;
+  /**
+   * Indicates if the current page is a redirect return (i.e., Coming back from bank account authorization).
+   */
+  const isRedirectReturn = !!new URLSearchParams(window.location.search).get("redirectResult");
+  const handleRedirect = React.useCallback(options => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const params = new URLSearchParams(window.location.search);
+    const sessionId = params.get("sessionId");
+    const redirectResult = params.get("redirectResult");
+    if (!redirectResult || !sessionId) {
+      console.error("No redirectResult or sessionId param found in redirect URL");
+      return;
+    }
+    setIsLoading(true);
+    try {
+      yield service.handleRedirect(Object.assign({
+        redirectResult,
+        sessionId
+      }, options));
+    } catch (err) {
+      console.warn("Redirect handling failed:", err);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }), [service]);
+  const submit = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    if (!isMounted) {
+      throw new Error("Adyen component is not mounted. Cannot submit payment.");
+    }
+    return service.submitPromise();
+  }), [isMounted, service]);
+  const createCheckout = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    if (service.isReady()) {
+      yield service.createCheckout(paymentMethod, options);
+    } else {
+      throw new Error("Financial Services is not ready");
+    }
+  }), [options, paymentMethod, service]);
+  const init = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    if (!service.isReady()) {
+      yield service.init();
+    } else {
+      throw new Error("Financial Service already initialized");
+    }
+  }), [service]);
+  const mount = React.useCallback(() => {
+    if (!service.isReady()) {
+      throw new Error("Financial Services is not ready");
+    } else {
+      if (adyenRef.current) {
+        // Mount Adyen styles
+        const adyenStyles = document.createElement("link");
+        adyenStyles.rel = "stylesheet";
+        adyenStyles.href = "https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/6.19.0/adyen.css";
+        adyenStyles.id = "adyen-styles";
+        emotionCacheShadowRootContainer === null || emotionCacheShadowRootContainer === void 0 ? void 0 : emotionCacheShadowRootContainer.appendChild(adyenStyles);
+        // Mount Adyen component
+        service.mount(adyenRef.current);
+        setIsMounted(true);
+      } else {
+        throw new Error("Failed to mount Adyen component");
+      }
+    }
+  }, [service, emotionCacheShadowRootContainer]);
+  React.useEffect(() => {
+    if (service.isReady()) {
+      setIsLoading(false);
+      return;
+    }
+    const initCheckout = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+      setIsLoading(true);
+      setError(null);
+      try {
+        yield init();
+        yield createCheckout();
+        mount();
+        // Set the initial payment method
+        currentPaymentMethodRef.current = paymentMethod;
+      } catch (e) {
+        if (e instanceof Error) {
+          console.error("Financial Services Lifecycle Error: failed to initialize.", e);
+          setError(e);
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    });
+    void initCheckout();
+    return () => {
+      var _a;
+      service.unmount();
+      (_a = document.getElementById("adyen-styles")) === null || _a === void 0 ? void 0 : _a.remove();
+    };
+  }, []); // Only run once on mount
+  // Handle payment method changes - recreate component when payment method changes
+  React.useEffect(() => {
+    if (!service.isReady() || currentPaymentMethodRef.current === paymentMethod) {
+      return;
+    }
+    const recreateComponent = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+      setIsLoading(true);
+      setError(null);
+      setIsMounted(false);
+      try {
+        // Unmount the existing component
+        service.unmount();
+        if (service.isReady()) {
+          yield service.createCheckout(paymentMethod, options);
+        } else {
+          throw new Error("Financial Services is not ready");
+        }
+        // Mount the new component
+        if (adyenRef.current) {
+          service.mount(adyenRef.current);
+          setIsMounted(true);
+        } else {
+          throw new Error("Failed to mount Adyen component");
+        }
+        // Update the ref to track current payment method
+        currentPaymentMethodRef.current = paymentMethod;
+      } catch (e) {
+        if (e instanceof Error) {
+          console.error("Financial Services Error: failed to recreate component for payment method change.", e);
+          setError(e);
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    });
+    void recreateComponent();
+  }, [paymentMethod, options, service]);
+  return {
+    adyenRef,
+    submit,
+    handleRedirect,
+    isRedirectReturn,
+    isLoading,
+    error,
+    isMounted,
+    getSessionData: () => service.getCurrentSessionData()
+  };
+};
+
+exports.useFinancialService = useFinancialService;

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.28.0";
+var version = "2.29.0";
 
 exports.version = version;

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