@godaddy/react
Version:
The `createCheckoutSession` function creates a new checkout session with GoDaddy's commerce API.
194 lines (192 loc) • 6.5 kB
JavaScript
import { B as eventIds, K as TrackingEventType, M as Skeleton, O as PaymentMethodType, Q as useIsPaymentDisabled, _ as useConfirmCheckout, et as useDraftOrderTotals, g as PaymentProvider, o as useCheckoutContext, q as track, rt as useGoDaddyContext, u as useBuildPaymentRequest, y as useLoadPoyntCollect } from "./checkout-CCruxHvk.js";
import { k as GraphQLErrorWithCodes } from "./utils-DWBfAHfx.js";
import { useCallback, useEffect, useRef, useState } from "react";
import { useFormContext } from "react-hook-form";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/checkout/payment/checkout-buttons/paze/godaddy.tsx
function PazeCheckoutButton() {
const { session, setCheckoutErrors, isConfirmingCheckout } = useCheckoutContext();
const isPaymentDisabled = useIsPaymentDisabled();
const form = useFormContext();
const { isPoyntLoaded } = useLoadPoyntCollect();
const { godaddyPaymentsConfig } = useCheckoutContext();
const { t } = useGoDaddyContext();
const [isCollectLoading, setIsCollectLoading] = useState(true);
const [error, setError] = useState("");
const { data: totals } = useDraftOrderTotals();
const { poyntStandardRequest } = useBuildPaymentRequest();
const currencyCode = totals?.total?.currencyCode || "USD";
const countryCode = session?.shipping?.originAddress?.countryCode || "US";
const confirmCheckout = useConfirmCheckout();
const collect = useRef(null);
const hasMounted = useRef(false);
const isDisabled = isConfirmingCheckout || isPaymentDisabled;
const handlePazeClickRef = useRef(async () => void 0);
handlePazeClickRef.current = useCallback(async () => {
if (!poyntStandardRequest || isDisabled) return;
if (!await form.trigger()) {
const firstError = Object.keys(form.formState.errors)[0];
if (firstError) form.setFocus(firstError);
return;
}
setCheckoutErrors(void 0);
collect?.current?.startPazeSession(poyntStandardRequest);
track({
eventId: eventIds.pazePayClick,
type: TrackingEventType.CLICK,
properties: { paymentType: PaymentMethodType.PAZE }
});
}, [
poyntStandardRequest,
setCheckoutErrors,
form,
isDisabled
]);
useEffect(() => {
if (!collect.current && godaddyPaymentsConfig && (godaddyPaymentsConfig?.businessId || session?.businessId) && isCollectLoading && isPoyntLoaded && !hasMounted.current) collect.current = new window.TokenizeJs({
businessId: godaddyPaymentsConfig?.businessId || session?.businessId,
storeId: session?.storeId,
channelId: session?.channelId,
applicationId: godaddyPaymentsConfig?.appId
}, {
country: countryCode,
currency: currencyCode,
merchantName: session?.storeName || "",
requireEmail: false,
requireShippingAddress: false,
supportCouponCode: false
});
}, [
godaddyPaymentsConfig,
countryCode,
currencyCode,
session?.businessId,
session?.storeId,
session?.channelId,
isPoyntLoaded,
isCollectLoading
]);
useEffect(() => {
if (!isPoyntLoaded || !godaddyPaymentsConfig || !godaddyPaymentsConfig?.businessId && !session?.businessId || !isCollectLoading || !collect.current || hasMounted.current) return;
collect.current?.supportWalletPayments().then((supports) => {
if (!hasMounted.current && supports.paze) {
hasMounted.current = true;
collect?.current?.mount("paze-pay-element", document, {
paymentMethods: ["paze"],
buttonsContainerOptions: { className: "gap-1 !flex-col sm:!flex-row place-items-center" },
buttonOptions: {
type: "plain",
margin: "0",
height: "50px",
width: "100%",
justifyContent: "flex-start",
onClick: () => handlePazeClickRef.current()
}
});
setIsCollectLoading(false);
track({
eventId: eventIds.pazePayImpression,
type: TrackingEventType.IMPRESSION,
properties: { provider: "poynt" }
});
}
});
}, [
isPoyntLoaded,
godaddyPaymentsConfig,
isCollectLoading,
session?.businessId
]);
useEffect(() => {
if (!collect.current || !isPoyntLoaded) return;
collect.current.on("close_wallet", () => {
setError("");
});
collect.current.on("payment_authorized", async (event) => {
const nonce = event?.nonce;
if (nonce) {
const checkoutBody = {
paymentToken: nonce,
paymentType: PaymentMethodType.CREDIT_CARD,
paymentProvider: PaymentProvider.POYNT
};
try {
await confirmCheckout.mutateAsync(checkoutBody);
event.complete();
} catch (err) {
if (err instanceof GraphQLErrorWithCodes) {
const walletError = {
code: "invalid_payment_data",
message: t.apiErrors?.[err.codes[0]] || t.errors.errorProcessingPayment
};
setCheckoutErrors(err.codes);
track({
eventId: eventIds.checkoutError,
type: TrackingEventType.EVENT,
properties: {
paymentType: event.source,
provider: "poynt",
errorCodes: err.codes.join(",")
}
});
event.complete({ error: walletError });
} else {
track({
eventId: eventIds.checkoutError,
type: TrackingEventType.EVENT,
properties: {
paymentType: event.source,
provider: "poynt",
errorType: "generic"
}
});
const walletError = {
code: "invalid_payment_data",
message: t.errors.errorProcessingPayment
};
event.complete({ error: walletError });
}
}
} else {
track({
eventId: eventIds.checkoutError,
type: TrackingEventType.EVENT,
properties: {
paymentType: event.source,
provider: "poynt",
errorCodes: "no_nonce"
}
});
const walletError = {
code: "invalid_payment_data",
message: t.errors.errorProcessingPayment
};
event.complete({ error: walletError });
}
});
collect.current.on("error", (event) => {
setError(event?.data?.error?.message || t.errors.errorProcessingPayment);
});
}, [
isPoyntLoaded,
confirmCheckout.mutateAsync,
t,
setCheckoutErrors
]);
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("div", {
id: "paze-pay-element",
className: isDisabled ? "opacity-50 pointer-events-none" : void 0
}),
isCollectLoading ? /* @__PURE__ */ jsx("div", {
className: "grid gap-1 grid-cols-1",
children: /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full mb-1" })
}) : null,
error ? /* @__PURE__ */ jsx("p", {
className: "text-destructive py-1",
children: error
}) : null
] });
}
//#endregion
export { PazeCheckoutButton };